@charset "UTF-8";
@import "../fonts.css";
@import "../reset.css";

:root {
    --font-title : 'ONE-Mobile-Title', 'Pretendard', sans-serif;
    --font-sub : 'SCoreDream', 'Pretendard', sans-serif;;
    --btn-color-green : #71CD59;
    --text-color-active : #019DFF;

}

.container {padding: 0;}
.text-hide {position: absolute; overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
.black {position: fixed; top: 0; z-index: 88; width: 100vw; height: 100vh; background: rgba(0,0,0,.5);}

/* modal alert, confirm */
.modal.bootbox-alert .modal-dialog, .modal.bootbox-confirm .modal-dialog {max-width: 400px; display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2);}
.modal.bootbox-alert .modal-content, .modal.bootbox-confirm .modal-content {padding: 2rem 0rem 0rem; border: none; border-radius: 10px;}
.modal.bootbox-alert .modal-header, .modal.bootbox-confirm .modal-header {display: none;}
.modal.bootbox-alert .modal-body, .modal.bootbox-confirm .modal-body {text-align: center; padding-bottom: 2rem; padding-top: 3.75rem; background: url(/img/icon-alert.png) no-repeat top center/3rem;}
.modal.bootbox-alert.check .modal-body, .modal.bootbox-confirm .modal-body {background-image: url(/img/icon-check.png);}
.modal.bootbox-alert .bootbox-body, .modal.bootbox-confirm .bootbox-body {color: #636D7B; line-height: 1.45;}
.modal.bootbox-alert .modal-footer, .modal.bootbox-confirm .modal-footer {justify-content: center; border-top: none; padding: 0;}
.modal.bootbox-alert .modal-footer .btn, .modal.bootbox-confirm .modal-footer .btn {width: 100%; border-radius: 0 0 10px 10px; margin: 0; padding: .85rem; background-color: transparent; color: #636D7B; border: none; border-top: 1px solid #eee; transition: all .2s; font-family: var(--font-nanum);}
.modal.bootbox-alert .modal-footer .btn:hover, .modal.bootbox-confirm .modal-footer .btn:hover {border-color: var(--btn-color-green); background-color: var(--btn-color-green); color: #fff;}

/* header */
html {overflow-x: hidden;}
header {width: 100%; position: relative; z-index: 100;}
header.active {background-color: #fff;}
header>.container {display: flex; align-items: center; height: 80px; gap: 7.5rem;}
header #logo {display: flex; align-items: center;}
header #logo .logo {display: block; width: 12rem; height: 3rem; margin-right: .75rem; background: url(/img/logo-default-headerB.png) no-repeat center/contain;}
header #logo .region {display: block; padding: .35rem .65rem; font-family: var(--font-sub); color: #fff; font-size: .88rem; background-color: var(--btn-color-green); border-radius: 4px;}
header #gnb .depth1-list {display: flex; margin-right: 5rem; gap: 2.5rem; height: 80px;}
header #gnb .depth1-list>li {position: relative; display: flex; justify-content: center; align-items: center; width: 13.75rem; height: 100%;}
header #gnb .depth1-list>li.active::after {position: absolute; display: block; content: ""; left: 0; bottom: 0; width: 100%; height: 4px; background-color: #80C2FF;}
header #gnb .depth1-list>li>a {display: block; color: #333; font-size: 1.13rem; font-weight: 600; transition: .2s;}
header #gnb .depth1-list>li>a:hover,
header #gnb .depth1-list>li.active>a {color: var(--text-color-active);}
header #gnb .depth2-list {display: none; position: absolute; top: 120px; left: 0; z-index: 100;}
header.active #gnb .depth2-list {display: block;}
header #gnb .depth2-list {width: 13.75rem; text-align: center;}
header #gnb .depth2-list a {color: #aaa; line-height: 2.75rem; transition: .2s;}
header #gnb .depth2-list a:hover {color: #555; font-weight: 500;}
header .depth2-area {display: none; position: absolute; left: 0; z-index: 99; width: 100%; height: 0; border-top: 1px solid #eee; background-color: #fff;}
header.active .depth2-area {display: flex; height: 336px;}
header .depth2-text {position: relative; flex-grow: 0; height: 100%; padding-top: 3rem; padding-right: 5rem; background-color: #3194D2; overflow: hidden;}
header .depth2-text::after {position: absolute; display: block; content: ""; width: 280px; height: 280px; bottom: -140px; right: -5%; border: 80px solid transparent; border-radius: 9999px; background-image:linear-gradient(#3194D2, #3194D2),linear-gradient(15deg, rgba(255,255,255,.45) 0%, transparent 100%); background-origin: border-box; background-clip: content-box, border-box;}
header .depth2-text h2 {position: relative; padding-bottom: 1.5rem; font-family: var(--font-title); color: #fff; font-size: 1.38rem; line-height: 1.45;}
header .depth2-text h2::after {position: absolute; content: ""; display: block; bottom: 0; left: 0; width: 30px; height: 4px; background-color: #fff;}

/* footer */
footer {padding: 1.5rem 0 2.5rem; background-color: #f6f8fb;}
footer .footer-top {margin-bottom: 1.15rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e0e0e0;}
footer .footer-menu {display: flex; gap: 2rem;}
footer .footer-menu a {font-size: 0.88rem; color: #606060; letter-spacing: -.25px;}
footer .footer-wrap {display: flex; justify-content: space-between; align-items: center;}
footer address {font-size: 0.88rem; color: #777777; font-weight: 300; line-height: 1.65; letter-spacing: -.5px;}
footer address span {position: relative; display: block;}
footer address strong {margin-right: .45rem;}
footer .footer-logo {display: flex; align-items:flex-start; gap: 2rem;}
footer .footer-logo a {display: block; opacity: .8;}
footer .footer-logo a:first-of-type img {height: 1.75rem;}
footer .footer-logo a:last-of-type img {height: 1.65rem;}
footer .copy {margin-top: 1.25rem;color: #999999; font-size: 0.75rem;}