/*공통*/

#wrap {width:100%; min-width:280px; overflow:hidden; position:relative;}

html.hide,
body.hide {overflow:hidden;}

html.fix,
body.fix {height:var(--nvh); overflow:hidden;}


header {width:100%; height:var(--headerH); position:relative; position:fixed; left:0; top:0; z-index:1000; transition:transform .3s cubic-bezier(.455,.03,.515,.955);}
header:before {content:''; width:100%; height:var(--headerH); background:var(--white); position:absolute; left:0; top:var(--headerH); z-index:1; display:none;}
header:after {content:''; width:100%; height:1px; border-top:1px solid var(--line-e8); position:absolute; left:0; top:var(--headerH); z-index:2; display:none;}
header > .wrap {width:90%; max-width:var(--max-w); height:100%; position:relative; margin:0 auto; display:flex; align-items:center; justify-content:center; z-index:10;}
header .logo {width:169px; height:30px; display:block; font-size:0; background:url(/img/com/logo_w.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
header .gnb-wrap {width:fit-content; height:100%;}
header .gnb-wrap .gnb-box {width:fit-content; height:100%; display:flex; align-items:center; justify-content:center; gap:calc(200px - (var(--gap-32) * 2));}
header .gnb-wrap .gnb-box .gnb {width:fit-content; height:100%; position:relative;}
header .gnb-wrap .gnb-box .gnb .gnb-link {width:fit-content; padding:0 var(--gap-32); font-size:var(--font-20); font-weight:500; height:100%; display:flex; align-items:center; color:var(--white);}
header .gnb-wrap .gnb-box .gnb .snb-wrap {width:fit-content; height:100%; position:absolute; left:0; top:var(--headerH); display:none;}
header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box {width:fit-content; height:100%; display:flex; align-items:center; gap:80px;}
header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb {width:fit-content; height:100%; display:flex; align-items:center;}
header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link {font-size:var(--font-18); font-weight:500; padding:0 var(--gap-32);}
header .btn-sitemap {width:36px; height:36px; background:url(/img/com/icon_menu_w.svg) center no-repeat; background-size:cover; position:absolute; right:0; top:50%; transform:translateY(-50%); display:none;}
header .btn-sitemap.active {background-image:url(/img/com/icon_close_b.svg) !important;}

header .gnb-wrap .gnb-box .gnb[data-id='community'] .snb-wrap {left:50%; transform:translateX(-50%);}
header .gnb-wrap .gnb-box .gnb[data-id='customer'] .snb-wrap {left:auto; right:0;}

header .gnb-wrap .gnb-box .gnb:hover .gnb-link {color:var(--key-color) !important;}
header .gnb-wrap .gnb-box .gnb.active .snb-wrap {display:block;}

header.hide {transform:translateY(-110%);}

header.typeB {background:var(--white);}
/*header.typeB:before,
header.typeB:after {display:block;}*/
header.typeB .logo {background-image:url(/img/com/logo.svg);}
header.typeB .gnb-wrap .gnb-box .gnb .gnb-link {color:var(--gray-1);}
header.typeB .btn-sitemap {background-image:url(/img/com/icon_menu.svg);}

header.fix {background:rgba(0,0,0,0.4);}
header.fix .logo {background-image:url(/img/com/logo_w.svg);}
header.fix .gnb-wrap .gnb-box .gnb .gnb-link {color:var(--white);}

header.on {background:var(--white);}
header.on:before,
header.on:after {display:block;}
header.on .logo {background-image:url(/img/com/logo.svg);}
header.on .gnb-wrap .gnb-box .gnb .gnb-link {color:var(--gray-1);}

header.lock .logo {background-image:url(/img/com/logo.svg);}
header.lock:after {display:block;}


@media screen and (max-width: 1440px) {
    header .gnb-wrap .gnb-box {gap:calc(120px - (var(--gap-32) * 2));}
    header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box {gap:50px;}
}

@media screen and (max-width: 1280px) {
    header .gnb-wrap .gnb-box {gap:calc(80px - (var(--gap-32) * 2));}
    header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box {gap:30px;}
}

@media screen and (max-width: 1024px) {
    header .gnb-wrap {display:none;}
    header .btn-sitemap {display:block;}
}

@media screen and (max-width: 768px) {
    header .logo {width:130px; height:23px;}
}

@media screen and (max-width: 480px) {
    header .logo {width:112px; height:20px;}
    header .btn-sitemap {width:30px; height:30px;}
}





.sitemap {width:100%; height:var(--nvh); background:var(--white); position:fixed; left:0; top:0; padding-top:var(--headerH); visibility:visible; opacity:0; transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index:-1;}
.sitemap.active {visibility:visible; opacity:1; z-index:999;}
.sitemap .sitemap-wrap {width:100%; height:100%; overflow-y:auto; padding:var(--gap-80) 0; display:flex; justify-content:center;}
.sitemap .sitemap-wrap .sitemap-box {width:90%;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box {width:100%;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb {width:100%; position:relative; margin-top:var(--gap-16);}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb:first-child {margin-top:0;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .btn-gnb {width:100%; height:80px; display:flex; align-items:center; font-size:var(--font-50); font-weight:700; cursor:pointer; padding:0 var(--gap-16);}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .snb-wrap {width:100%; padding:var(--gap-8) 0; display:none;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .snb-wrap .snb-box {width:100%;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .snb-wrap .snb-box .snb {width:100%; margin-top:var(--gap-10);}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .snb-wrap .snb-box .snb:first-child {margin-top:0;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link {width:fit-content; font-size:var(--font-30); font-weight:500; padding:var(--gap-10) var(--gap-16); display:block;}
.sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb.active .btn-gnb {color:var(--key-color);}

@media screen and (max-width: 768px) {
    .sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .btn-gnb {height:72px;}
}

@media screen and (max-width: 480px) {
    .sitemap .sitemap-wrap .sitemap-box .gnb-box .gnb .btn-gnb {height:60px;}
}




footer {width:100%; margin-top:calc(var(--gap-60) * 3);}
footer .footer-wrap {width:90%; max-width:var(--max-w); margin:0 auto; padding:var(--gap-60) 0; border-top:1px solid #7d7d7d;}
footer .footer-wrap .top-box {width:100%; display:flex; gap:var(--gap-40); justify-content:space-between;}
footer .footer-wrap .top-box .logo {width:265px; height:46px; background:url(/img/com/logo.svg) center no-repeat; background-size:cover; font-size:0;}
footer .footer-wrap .bottom-box {width:100%; margin-top:var(--gap-80); display:flex; align-items:flex-end; justify-content:space-between;}
footer .footer-wrap .bottom-box .lf-box {max-width:60%;}
footer .footer-wrap .bottom-box .company-info-wrap {display:flex; align-items:center; gap:var(--gap-10) var(--gap-16); flex-wrap:wrap;}
footer .footer-wrap .bottom-box .company-info-wrap span {font-size:var(--font-16); color:var(--gray-6); display:flex; position:relative;}
footer .footer-wrap .bottom-box .company-info-wrap span.address {width:100%;}
footer .footer-wrap .bottom-box .company-info-wrap span:before {content:''; width:1px; height:12px; border-left:1px solid var(--gray-6); position:absolute; left:calc((var(--gap-16) / 2) * -1); top:50%; transform:translateY(-50%);}
footer .footer-wrap .bottom-box .company-info-wrap span:first-child:before,
footer .footer-wrap .bottom-box .company-info-wrap span:last-child:before {display:none;}
footer .footer-wrap .bottom-box .button-wrap {width:100%; margin-top:var(--gap-40);}
footer .footer-wrap .bottom-box .copyright {font-size:var(--font-16); color:var(--gray-6);}

@media screen and (max-width: 1024px) {
    footer .footer-wrap .bottom-box {flex-direction:column; align-items:flex-start; gap:var(--gap-40);}
    footer .footer-wrap .bottom-box .lf-box {max-width:100%;}
}

@media screen and (max-width: 768px) {
    footer .footer-wrap .top-box .logo {width:220px; height:38px;}
}

@media screen and (max-width: 648px) {
    footer .footer-wrap .top-box {flex-direction:column; gap:var(--gap-24);}
    footer .footer-wrap .top-box .logo {width:160px; height:28px;}
    footer .footer-wrap .bottom-box .company-info-wrap {flex-direction:column; align-items:flex-start;}
    footer .footer-wrap .bottom-box .company-info-wrap span:before {display:none;}
}








.select-box {position:relative; width:fit-content; z-index:100;}
.select-box select {width:0; height:0; position:absolute; left:0; top:0; visibility:hidden; opacity:0;}
.select-box .select {width:fit-content; min-width:220px; height:var(--el-H); display:flex; align-items:center; padding:0 var(--gap-16); padding-right:calc((var(--gap-16) * 2) + var(--gap-10)); position:relative; font-size:var(--font-16); font-weight:500; color:var(--gray-6); border-bottom:1px solid var(--gray-9); cursor:pointer;}
.select-box .select:after {content:""; width:var(--gap-16); height:100%; background:url(/img/com/arrow_select.svg) center no-repeat; background-size:100% auto; position:absolute; right:var(--gap-16); top:0;}
.select-box .option-list {width:100%; position:absolute; left:0; top:calc(100% + 5px); border-radius:var(--gap-8); background:var(--white); border:1px solid var(--gray-db); display:none;}
.select-box .option-list .option-inner {width:100%; max-height:200px; overflow-y:auto;}
.select-box .option-list .option-inner::-webkit-scrollbar {background:transparent; width:var(--gap-8);}
.select-box .option-list .option-inner::-webkit-scrollbar-thumb {background:var(--gray-db); border-radius:50px;}
.select-box .option-list ul {width:100%;}
.select-box .option-list ul li {width:100%; padding:var(--gap-16); cursor:pointer; font-size:var(--font-16); color:var(--gray-6);}
.select-box .option-list ul li.active {color:var(--key-color);}







.button {width:fit-content; position:relative; display:flex; align-items:center; justify-content:center; border-radius:200px; background:var(--white); border:1px solid var(--gray-d9); cursor:pointer; overflow:hidden;}
.button span {position:relative; z-index:10;}
.button.basic {height:var(--el-H); font-size:var(--font-14); padding:0 var(--gap-24);}
.button.medium {height:70px; font-size:var(--font-20); padding:0 var(--gap-32);}
.button.transparent {background:transparent; color:var(--white);}
.button.fill {background:var(--gray-1); color:var(--white); border-color:var(--gray-1);}

.button:after {content:""; width:50px; height:50px; border-radius:50%; position:absolute; left:0; top:0; transform:scale(0); transform-origin:50% 50%; transition:transform 0.5s ease-in-out; z-index:0; background:var(--gray-1);}
.button.basic:hover:after {transform:scale(5);}
.button.medium:hover:after {transform:scale(8);}
.button:hover {color:var(--white);}

.button.fill:after {background:var(--white);}
.button.fill:hover {color:var(--gray-1);}

.button.transparent:after {background:var(--white);}
.button.transparent:hover {color:var(--gray-1);}


@media screen and (max-width: 768px) {
    .button.medium {height:60px;}
}

@media screen and (max-width: 480px) {
    .button.medium {height:52px;}
}






.fade-up {transform:translateY(50px); opacity:0; transition:0.7s ease-in-out;}





.radio {position:relative; overflow:hidden;}
.radio input[type=radio] {width:0; height:0; position:absolute; left:0; top:0; opacity:0; visibility:hidden;}
.radio input[type=radio] + label {display:block; font-size:var(--font-18); font-weight:400; position:relative; padding-left:30px; cursor:pointer; box-sizing:border-box;}
.radio input[type=radio] + label:before {content:''; width:22px; height:22px; border-radius:50%; background:url(/img/com/radio.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:0;}
.radio input[type=radio]:checked + label:before {background-image:url(/img/com/radio_on.svg);}

@media screen and (max-width: 768px) {
    .radio input[type=radio] + label {padding-left:28px;}
    .radio input[type=radio] + label:before {width:20px; height:20px;}
}

@media screen and (max-width: 480px) {
    .radio input[type=radio] + label {padding-left:20px;}
    .radio input[type=radio] + label:before {width:16px; height:16px;}
}



.quick-menu {position:fixed; right:1%; bottom:60px; opacity:0; visibility:hidden; transition:0.5s ease-in-out; z-index:888;}
.quick-menu.active {opacity:1; visibility:visible;}
.quick-menu ul {display:flex; flex-direction:column; gap:var(--gap-10);}
.quick-menu ul li a {width:56px; aspect-ratio:1; position:relative; border-radius:50%; cursor:pointer; font-size:0; background-size:cover; background-position:center; background-repeat:no-repeat; display:block;}

.quick-menu ul li a.quick-message {background-image:url(/img/com/quick_message.svg);}
.quick-menu ul li a.btn-top {background-image:url(/img/com/quick_top.svg);}






@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 648px) {}
@media screen and (max-width: 480px) {}