@charset 'utf-8';

/* ====================== */
/* UI Reset */
/* ====================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-subset.min.css');

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Bold'),
        url('../font/Pretendard-Black.woff2') format('font-woff2'),
        url('../font/Pretendard-Black.woff') format('woff');
    font-weight: 900;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Bold'),
        url('../font/Pretendard-ExtraBold.woff2') format('font-woff2'),
        url('../font/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Bold'),
        url('../font/Pretendard-Bold.woff2') format('font-woff2'),
        url('../font/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard SemiBold'),
        url('../font/Pretendard-SemiBold.woff2') format('font-woff2'),
        url('../font/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Medium'),
        url('../font/Pretendard-Medium.woff2') format('font-woff2'),
        url('../font/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Regular'),
        url('../font/Pretendard-Regular.woff2') format('font-woff2'),
        url('../font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Light'),
        url('../font/Pretendard-Light.woff2') format('font-woff2'),
        url('../font/Pretendard-Light.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard ExtraLight'),
        url('../font/Pretendard-ExtraLight.woff2') format('font-woff2'),
        url('../font/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
}

@font-face {
    font-family: 'Pretendard';
    font-display: block;
    src: local('Pretendard Thin'),
        url('../font/Pretendard-Thin.woff2') format('font-woff2'),
        url('../font/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
}

* {margin:0;padding:0;font:inherit;}
*, *::before, *::after {box-sizing:border-box;}
html {font-size: 62.5%;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-touch-callout: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
img, video, svg, picture {display:block;height:auto;max-width:100%;}
body {font-size:1.6rem;color:#333D4B;overflow-x: hidden;font-family:"Pretendard", pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Hiragino Sans", "Apple SD Gothic Neo",  "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
a {text-decoration:none;cursor:pointer;}
button {border:none;cursor:pointer;background-color:transparent;}
sup {line-height:1;vertical-align:0px;}
ul, ol, li {list-style:none;}

input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input::-ms-clear {display: none;}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type='number'] {-moz-appearance: textfield;}

select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none;}

::-webkit-scrollbar {width: 5px;height:5px;}
::-webkit-scrollbar-thumb {background: #F0F0F0;border-radius: 10px;}


/* ====================== */
/* 공통 */
/* ====================== */
:root {
    --primary: #B5091F;
    --secondary: #EB233D;
}
.blind {position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow:hidden;}
.inner {padding:0 16px;max-width:1240px;width:100%;margin-left:auto;margin-right:auto;}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"] {height:46px;width:100%;border:1px solid #dedede;padding:0 14px;transition:all .3s ease;border-radius:4px;background-color:#F9FAFB;font-size:14px;}
textarea {height:auto;border:1px solid #dedede;width:100%;padding:14px;line-height:1.4;word-break:keep-all;transition:all .3s ease;border-radius:4px;resize:none;background-color:#F9FAFB;font-size:14px;}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="date"]:focus {outline:none;}
textarea:focus {outline:none;}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="date"]::placeholder {color:#999;}
select {border-radius:5px;border: 1px solid #d1d1d1;height:45px;font-weight:500;padding:0 44px 0 10px;background:#fff url(../images/select_arrow.svg) no-repeat calc(100% - 16px) center/12px auto;transition:all .3s ease;font-size:14px;width:100%;}
select:focus {outline:none;border-color:#111;}
.check {position:relative;display:inline-flex;align-items:center;}
.check input {position:absolute;left:0;top:0;opacity:0;width:0;height:0;cursor: pointer;}
.check i {content:'';display:block;width:20px;height:20px;flex:none;border: 1px solid #dfe1e2;background: #fff;position:relative;border-radius:4px;margin-right:6px;}
.check input:checked + i:before {content:'';display:block;position: absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height:100%;background:url(../images/check.svg) no-repeat center/contain;}

/* ====================== */
/* 레이아웃 */
/* ====================== */
.certify {position:relative;background:url(../images/main/certify_bg.png) no-repeat center/cover;}
.certify .inner {position:relative;display:flex;align-items:center;height:58px;justify-content:center;gap:15px;padding-right:40px;}
.certify .btn-certify-close {position:absolute;right:8px;top:50%;transform:translateY(-50%);display: inline-block;width:40px;height:40px;font-size:0;text-indent:-9999px;overflow:hidden;background:url(../images/main/btn_certify_close.svg) no-repeat center/22px auto;}
.certify p {color:#fff;font-size:20px;font-weight:600;word-break:keep-all;}
.certify p strong {color:#FFBF48;}
/* header */
.header-wrap {position:sticky;top:0;left:0;width:100%;z-index:101;border-bottom: 1px solid rgba(240, 240, 240, 0.20);background: rgba(76, 77, 80, 0.8);backdrop-filter: blur(6.2px);transition:all .3s ease;}
.header-wrap header {display:flex;justify-content:space-between;height:80px;align-items:center;}
.header-wrap .logo {flex:none;font-size:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;width:160px;height:40px;background:transparent url(../images/header-logo-white.svg) no-repeat center/contain;}
.header-wrap .gnb {display:flex;gap:40px;}
.header-wrap .gnb a {color:#fff;font-size:18px;}
.header-wrap .etc {display:flex;gap:10px;align-items:center;}
.header-wrap .btn-menu {width:44px;height:44px;font-size:0;white-space:nowrap;overflow:hidden;background:transparent url(../images/btn_menu.svg) no-repeat center right;background-size:24px auto;}
.header-wrap:hover {background-color:#fff;}
.header-wrap:hover .logo {background-image:url(../images/header-logo-refined.svg);}
.header-wrap:hover .gnb a {color:#333D4B;}
.header-wrap:hover .btn-menu {background-image:url(../images/btn_menu_black.svg);}
.header-wrap.active {background-color:#fff;}
.header-wrap.active .logo {background-image:url(../images/header-logo-refined.svg);}
.header-wrap.active .gnb a {color:#333D4B;}
.header-wrap.active .btn-menu {background-image:url(../images/btn_menu_black.svg);}

#container {margin-top:-80px}
/* footer */
.footer-wrap {background: #fff;padding:0 0 40px;}
.footer-wrap footer {padding:40px 0 0;color:#969696;border-top:1px solid #F5F5F5;}
.footer-wrap .logo {margin-bottom:30px;}
.footer-wrap .logo img {display:inline-block;}
.footer-wrap .link {margin-top:10px;}
.footer-wrap .link a {margin-right:14px;color: #969696;}
.footer-wrap .link a:last-child {margin-right:0;}
.footer-wrap .company {margin-bottom:30px;}
.footer-wrap .company span {display:flex;align-items:start;gap:10px;margin-bottom:10px;font-size:14px;}
.footer-wrap .company span img {height:16px;}
.footer-wrap .copyright {font-size:13px;}
.footer-wrap.black {background-color:#000;margin-top:0;}
.footer-wrap.black footer {color:#fff;border-top:1px solid #eee;}
.footer-wrap.black .link a {color: #eee;}

/* drawer */
.menu-wrap {background-color:#fff;border-top:1px solid #F0F0F0;transition:all .5s ease;max-height:0;overflow:hidden;visibility:hidden;position:absolute;left:0;right:0;width: 100%;}
.menu-wrap.active {max-height:100vh;visibility:visible;box-shadow: 0 13px 13px rgba(0, 0, 0, .1);transition:all .7s ease;}
.menu-wrap .main-menu {display:flex;}
.menu-wrap .main-menu > li {position:relative;}
.menu-wrap .main-menu > li > .menu-toggle {display:none;position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:3px;font-size:0;background:#fff url(../images/menu_toggle.svg) no-repeat center/50%;z-index:1;}
.menu-wrap .main-menu > li > .menu-toggle.active {transform:rotate(180deg);}
.menu-wrap .main-menu a {color:inherit;transition:all .3s ease;}
.menu-wrap .main-menu a:hover {color:#2D97E7;}
.menu-wrap .main-menu .title {font-size:17px;font-weight:600;margin-bottom:18px;display:block;}
.menu-wrap .main-menu > li {width:100%;border-right:1px solid #F0F0F0;padding:30px 20px 35px;font-size:16px; }
.menu-wrap .sub-menu > li {margin-bottom:15px;position:relative;line-height:1.4;font-size:16px; word-break: keep-all;}
.menu-wrap .sub-menu > li:last-child {margin-bottom:0;}
.menu-wrap .sub-menu .menu-toggle {position:absolute;right:0;top:4px;width:14px;height:12px;font-size:0;background:url(../images/menu_toggle.svg) no-repeat center/contain;z-index:1;}
.menu-wrap .sub-menu .menu-toggle.active {transform:rotate(180deg);}
.menu-wrap .sub-menu ul li {font-size:15px;margin-top:8px;color:#969696;}
.menu-wrap .main-menu > li:first-child {border-left:1px solid #F0F0F0;}

/* fnb */
.fnb {position:fixed;right:0;top:25%;z-index:10;box-shadow:0 0 13px rgba(0, 0, 0, .1);}
.fnb .fnb-btn {width:84px;height:84px;display:block;text-align:center;background-color:#fff;color:#333D4B;font-size:14px;display:flex;justify-content:center;align-items:center;flex-direction:column;position:relative;font-weight:600;color:#969696;transition:all .3s ease;}
.fnb .fnb-btn:after {content:'';display:block;position:absolute;width:68%;height:1px;background-color:#dedede;bottom:0;left: 50%;transform:translateX(-50%);}
.fnb .fnb-btn:hover {background:#2D97E7;color:#fff;}
.fnb .fnb-btn:hover:after {content:none;}
.fnb .fnb-btn.active {background:#2D97E7;color:#fff;}
.fnb .fnb-btn.active:after {content:none;}
.fnb .fnb-btn:last-child::after {content:none;}
.fnb .fnb-btn1:before {content:'';display:block;margin:0 auto 7px;width:24px;height:24px;background:url(../images/fnb_btn1.svg) no-repeat center/contain;}
.fnb .fnb-btn2:before {content:'';display:block;margin:0 auto 7px;width:24px;height:24px;background:url(../images/fnb_btn2.svg) no-repeat center/contain;}
.fnb .fnb-btn3:before {content:'';display:block;margin:0 auto 7px;width:24px;height:24px;background:url(../images/fnb_btn3.svg) no-repeat center/contain;}
.fnb .fnb-btn1.active:before {background-image:url(../images/fnb_btn1_active.svg);}
.fnb .fnb-btn2.active:before {background-image:url(../images/fnb_btn2_active.svg);}
.fnb .fnb-btn3.active:before {background-image:url(../images/fnb_btn3_active.svg);}
.fnb .fnb-btn1:hover:before {background-image:url(../images/fnb_btn1_active.svg);}
.fnb .fnb-btn2:hover:before {background-image:url(../images/fnb_btn2_active.svg);}
.fnb .fnb-btn3:hover:before {background-image:url(../images/fnb_btn3_active.svg);}

/* contact */
.contact {position:fixed;right:20px;bottom:20px;width:280px;z-index:11;background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 0 15px rgba(0, 0, 0, .15);transform: translateY(40px);opacity:0;transition:all .3s ease;visibility:hidden;}
.contact.active {transform:translateY(0);opacity:1;visibility:visible;}
.contact .contact-top {background-color:#2D97E7;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;}
.contact .contact-top strong {color:#fff;font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:8px;}
.contact .contact-top strong:before {content:'';display:inline-block;width:10px;height:10px;border-radius:100px;background-color:#49FFCC;}
.contact .btn-contact-close {display:inline-block;width:24px;height:24px;font-size:0;text-indent:-9999px;overflow:hidden;background:url(../images/btn_contact_close.svg) no-repeat center/22px;}
.contact .contact-contents {padding:14px 16px;}
.contact .call {text-align:center;border-radius:5px;background-color:#f9f9f9;padding:14px 10px;}
.contact .call span {display:block;font-size:16px;margin-bottom:3px;font-weight:600;color:#333;}
.contact .call a {font-size:22px;color:#2D97E7;font-weight:600;}
.contact .call + .form-box {margin-top:15px;}
.contact .form-box {margin-bottom:15px;}
.contact .form-box label {font-size:14px;font-weight:500;color:#2D97E7;display:block;margin-bottom:8px;}
.contact .byte {text-align:right;font-size:14px;color:#969696;margin-top:5px;}
.contact .byte .count {color:#2D97E7;}
.contact .agree {position:relative;display:inline-flex;align-items:center;font-size:14px;}
.contact .agree i {margin-right:7px;width:18px;height:18px;border-radius:4px;border:1px solid #ddd;transition:all .3s ease;background:#fff url(../images/checkbox.svg) no-repeat center/14px auto}
.contact .agree input[type='checkbox'] {position:absolute;left:0;top:0;}
.contact .agree input[type='checkbox']:checked ~ i {background-color:#2D97E7;}
.contact .btn-send {margin-top:22px;text-align:center;padding:10px 10px;background-color:#2D97E7;color:#fff;font-size:15px;font-weight:500;width:100%;border-radius:6px}

/* 퀵메뉴 */
.quickmenu {position:fixed;top:50%;transform:translateY(-50%);width:174px;left:40px;background-color:#fff;border-radius:6px;overflow:hidden;border:1px solid #dedede;z-index:10;}
.quickmenu a {display:block;color:#666;padding:12px 16px;font-size:15px;line-height:1.4;transition:all .1s ease;}
.quickmenu a.active {background-color:#2D97E7;color:#fff;font-weight:500;}
.quickmenu li {border-bottom:1px solid #dedede;}
.quickmenu li:last-child {border-bottom:0;}

/* 팝업 */
.popup {position:fixed;top:160px;width:400px;background-color:#fff;z-index:102;display:none;}
.popup#popup1 {left:50px;}
.popup#popup2 {left:470px;}
.popup .popup-img {width:100%;}
.popup .popup-img a {display:block;}
.popup .popup-img img {width:100%;}
.popup .popup-btn {border-radius:0 0 10px 10px;overflow:hidden;display:flex;justify-content:space-between;}
.popup .popup-btn .btn-close {text-align:center;padding:12px 20px;font-size:15px;}
.popup .popup-btn .btn-today-close {text-align:center;padding:12px 20px;font-size:15px;}

@media screen and (max-width: 1700px) {
    .quickmenu {left:16px;}
    #container .inner {max-width:60%;}
}


/* 태블릿 */
@media screen and (max-width: 1024px) {
    .header-wrap {border-bottom-color:rgba(255, 255, 255, .2);z-index:103;}
    #container .inner {max-width:100%;}
    .header-wrap header {height:60px;}
    .header-wrap .logo {height:34px;width:138px;}
    .header-wrap .gnb {display:none;}
    .certify .inner {gap:10px;}
    .certify p {font-size:14px;line-height:1.4;}
    .certify img {height:28px;}
    .menu-wrap {overflow:auto;}
    .menu-wrap.active {max-height:calc(100vh - 60px);}
    .menu-wrap .inner {padding:0;}
    .menu-wrap .main-menu {flex-direction:column;}
    .menu-wrap .main-menu > li {padding:0;border:0;border-bottom:1px solid #f0f0f0;}
    .menu-wrap .main-menu > li:first-child {border-left:0;}
    .menu-wrap .main-menu > li > .menu-toggle {display:block;;}
    .menu-wrap .main-menu .title {padding:14px 16px;margin-bottom:0;background-color:#2D97E7;color:#fff;}
    .menu-wrap .sub-menu > li {margin-bottom:0;border-top: 1px solid #f0f0f0;}
    .menu-wrap .sub-menu > li a {padding:13px 16px;display:block;}
    .menu-wrap .sub-menu > li a br {display:none;}
    .menu-wrap .sub-menu .menu-toggle {top:0;right:4px;height:46px;width:35px;background-size:14px auto;}
    .menu-wrap .sub-menu ul {background-color: #f8f8f8;padding:7px 0;}
    .menu-wrap .sub-menu ul li {margin-top:0;}
    .menu-wrap .sub-menu ul li a {padding:7px 16px;}
    #container {margin-top:-60px}
    .fnb {right:16px;top:unset;bottom:16px;box-shadow:0 0 10px rgba(0, 0, 0, .1);border-radius:6px;overflow:hidden;}
    .fnb .fnb-btn {width:48px;height:48px;font-size:0;}
    .fnb .fnb-btn:before {width:20px;height:20px;margin-bottom:0;}
    .quickmenu {display:none;}
}

/* 모바일 */
@media screen and (max-width: 768px) {
    .contact {left:16px;right:16px;width:auto;}

    
    .popup {position:fixed;top:80px;width:94%;left:50% !important;transform:translateX(-50%);}
}