/*공통*/

#wrap {width:100%; min-width:280px; overflow:hidden; position:relative; background:var(--down-white); container-type:inline-size;}

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

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


.box-fit-img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

:root {
    --headerH : 100px;
}

header {width:100%; height:var(--headerH); position:fixed; left:0; top:0; z-index:1000; display:flex; align-items:center; justify-content:center; transform:translateY(0); transition:transform 0.3s ease;}
header .header-wrap {width:90%; max-width:1680px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--gap-24); position:relative;}

header .gnb-wrap {height:100%;}
header .gnb-wrap .gnb-box {display:flex; height:100%; display:flex; align-items:center; gap:30px;}
header .gnb-wrap .gnb-box .gnb {width:fit-content; height:100%; position:relative;}
header .gnb-wrap .gnb-box .gnb:after {content:''; width:0%; height:3px; background:var(--sub-color-y); position:absolute; left:0; bottom:-3px; transition:width 0.2s linear; z-index:10;}
header .gnb-wrap .gnb-box .gnb a {height:100%; font-size:var(--font-18); font-weight:500; color:var(--black); display:flex; align-items:center;}
header .gnb-wrap .gnb-box .gnb .nav-item {display:flex; align-items:center; position:relative; overflow:clip;}
header .gnb-wrap .gnb-box .gnb .nav-item span {transition:transform 0.8s cubic-bezier(.496,.004,0,1);}
header .gnb-wrap .gnb-box .gnb .nav-item span:last-child {position:absolute; left:0; top:100%;}
header .gnb-wrap .gnb-box .gnb:hover:after {width:100%;}
header .gnb-wrap .gnb-box .gnb:hover .nav-item span:first-child {transform:translateY(-100%);}
header .gnb-wrap .gnb-box .gnb:hover .nav-item span:last-child {transform:translateY(-100%);}
header .gnb-wrap .gnb-box .gnb .snb-wrap {width:fit-content; height:var(--headerH); position:absolute; left:0; top:100%; display:none; align-items:center; z-index:10;}
header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box {width:max-content; display:flex; align-items:center; gap:40px;}
header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb a {font-size:var(--font-18); color:var(--gray-6);}
header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb:hover a {color:var(--black);}
header .gnb-wrap .gnb-box .gnb .snb-wrap.active {display:flex;}

header .utility-menu {height:100%;}
header .utility-menu .menu-box {display:flex; height:100%; display:flex; align-items:center; gap:30px;}
header .utility-menu .menu-box .menu {width:fit-content; height:100%; position:relative;}
header .utility-menu .menu-box .menu:after {content:''; width:0%; height:3px; background:var(--sub-color-y); position:absolute; left:0; bottom:-3px; transition:width 0.2s linear; z-index:10;}
header .utility-menu .menu-box .menu a {height:100%; font-size:var(--font-18); font-weight:500; color:var(--black); display:flex; align-items:center;}
header .utility-menu .menu-box .menu .nav-item {display:flex; align-items:center; position:relative; overflow:clip;}
header .utility-menu .menu-box .menu .nav-item span {transition:transform 0.8s cubic-bezier(.496,.004,0,1);}
header .utility-menu .menu-box .menu .nav-item span:last-child {position:absolute; left:0; top:100%;}
header .utility-menu .menu-box .menu:first-child .nav-item span {color:var(--sub-color-y);}
header .utility-menu .menu-box .menu:hover:after {width:100%;}
header .utility-menu .menu-box .menu:hover .nav-item span:first-child {transform:translateY(-100%);}
header .utility-menu .menu-box .menu:hover .nav-item span:last-child {transform:translateY(-100%);}
header .utility-menu .menu-box .menu .snb-wrap {width:fit-content; height:var(--headerH); position:absolute; left:0; top:100%; display:none; align-items:center; z-index:10;}
header .utility-menu .menu-box .menu .snb-wrap[data-type='rt'] {left:auto; right:0;}
header .utility-menu .menu-box .menu .snb-wrap .snb-box {width:max-content; display:flex; align-items:center; gap:40px;}
header .utility-menu .menu-box .menu .snb-wrap .snb-box .snb a {font-size:var(--font-18); color:var(--gray-6);}
header .utility-menu .menu-box .menu .snb-wrap .snb-box .snb:hover a {color:var(--black);}
header .utility-menu .menu-box .menu .snb-wrap.active {display:flex;}

header .logo {height:80%; aspect-ratio:1; background:url(/img/com/logo.svg) no-repeat center / cover; font-size:0; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

header .btn-menu {width:84px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:100px; border:1px solid rgba(38,38,38,0.4); font-size:var(--font-16); color:var(--black); display:none;}
header .btn-menu.active {background:var(--black); color:var(--white);}

header.fix {background:var(--beige);}
header.hide {transform:translateY(-100%);}
header.up {background:rgba(244,243,239,0.3); backdrop-filter:blur(1.5px);}
header.active {background:var(--beige);}
header.active:after {content:''; width:100%; height:var(--headerH); background:var(--beige); position:absolute; left:0; top:100%; z-index:0; border-top:1px solid var(--gray-e0); box-shadow:0 2px 3px rgba(0,0,0,0.05);}


@media screen and (max-width: 1280px) {
    header .gnb-wrap .gnb-box,
    header .utility-menu .menu-box {gap:24px;}

    header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box,
    header .utility-menu .menu-box .menu .snb-wrap .snb-box {gap:32px;}

    header .gnb-wrap .gnb-box .gnb a,
    header .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb a,
    header .utility-menu .menu-box .menu a,
    header .utility-menu .menu-box .menu .snb-wrap .snb-box .snb a {font-size:15px;}
}

@media screen and (max-width: 1024px) {
    header {border:none;}
    header .gnb-wrap,
    header .utility-menu {display:none;}    
    header .logo {position:relative; transform:none; left:0; top:0;}
    header .btn-menu {display:block;}
}

@media screen and (max-width: 480px) {
    :root {
        --headerH : 80px;
    }

    header .logo {height:50px;}
    header .btn-menu {width:70px; height:30px;}
}


.sitemap {width:100%; height:calc(var(--nvh) - var(--headerH)); background:var(--beige); position:fixed; left:0; top:var(--headerH); z-index:0; overflow-y:auto; visibility:hidden; opacity:0;}
.sitemap .sitemap-wrap {width:90%; margin:0 auto;}
.sitemap .sitemap-wrap .sitemap-box {width:100%;}
.sitemap .sitemap-wrap .sitemap-box .item {width:100%; border-bottom:1px solid var(--gray-e4);}
.sitemap .sitemap-wrap .sitemap-box .item:last-child {border-bottom:none;}
.sitemap .sitemap-wrap .sitemap-box .item > a,
.sitemap .sitemap-wrap .sitemap-box .item .btn-gnb {display:block; width:100%; padding:var(--gap-32) 0; position:relative; font-size:var(--font-30); font-weight:500; text-align:left; position:relative;}
.sitemap .sitemap-wrap .sitemap-box .item .btn-gnb:after {content:''; height:25%; aspect-ratio:1; background:url(/img/com/arrow_down.svg) no-repeat center / 100% auto; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.sitemap .sitemap-wrap .sitemap-box .item .snb-wrap {padding-bottom:var(--gap-32); display:none;}
.sitemap .sitemap-wrap .sitemap-box .item .snb-wrap .snb-box .snb {width:100%; padding:var(--gap-10) 0;}
.sitemap .sitemap-wrap .sitemap-box .item .snb-wrap .snb-box .snb a {font-size:var(--font-26); color:var(--gray-6);}

.sitemap .sitemap-wrap .sitemap-box .item.active .btn-gnb:after {transform:translateY(-50%) scaleY(-1);}
.sitemap.active {z-index:1000; visibility:visible; opacity:1;}






footer {width:100%; padding:var(--gap-80) 0 var(--gap-50) 0; background:#36312B;}
footer .footer-wrap {width:90%; max-width:1760px; margin:0 auto; display:flex; flex-direction:column; gap:var(--gap-40);}

footer .footer-top {width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:30px;}
footer .footer-top .logo {height:100px; aspect-ratio:1; background:url(/img/com/logo_b.svg) no-repeat center / cover; font-size:0;}
footer .footer-top .sns-wrap {display:flex; align-items:center; gap:10px; transform:translateY(30px);}
footer .footer-top .sns-wrap a {font-size:0; width:40px; aspect-ratio:1; background-size:cover; background-repeat:no-repeat; background-position:center;}
footer .footer-top .sns-wrap a.instagram {background-image:url(/img/com/icon_instagram.svg);}
footer .footer-top .sns-wrap a.kakaotalk {background-image:url(/img/com/icon_kakao.svg);}

footer .company-conts {width:100%; display:flex; align-items:stretch; justify-content:space-between; gap:10px;}
footer .company-conts .info-wrap {display:flex; flex-direction:column; gap:var(--gap-50); font-size:var(--font-18); color:#A4A4A4;}
footer .company-conts .info-wrap .info-box {display:flex; flex-direction:column;}
footer .company-conts .info-wrap .company-info ul {display:flex; flex-direction:column; gap:var(--gap-16);}
footer .company-conts .info-wrap .company-info ul li {display:flex; align-items:center; gap:20px;}
footer .company-conts .info-wrap .company-info ul li .head {width:55px;}

footer .company-conts .contact-wrap {width:35%; max-width:500px;}
footer .company-conts .contact-wrap .map-wrap {width:100%;}
footer .company-conts .contact-wrap .map-wrap .map {width:100%; border-radius:var(--gap-16); overflow:hidden; position:relative; aspect-ratio:492/312;}
footer .company-conts .contact-wrap .map-wrap .map img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

footer .footer-conts {width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;}
footer .footer-conts .copyright {font-size:var(--font-18); color:var(--gray-6);}
footer .footer-conts .fnb {display:flex; align-items:center; gap:10px;}
footer .footer-conts .fnb a {font-size:var(--font-18); color:var(--gray-6);}

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

@media screen and (max-width: 648px) {
    footer .footer-top .sns-wrap {display:none;}

    footer .company-conts {flex-direction:column; gap:var(--gap-60);}
    footer .company-conts > * {width:100%;}
    footer .company-conts .contact-wrap {width:100%;}

    footer .footer-conts {flex-direction:column; gap:10px; align-items:flex-start;}
}

@media screen and (max-width: 480px) {
    footer .footer-top .logo {height:60px;}
    footer .company-conts .info-wrap .company-info ul li .head {width:40px;}
}






:root {
    --button-basic-size : 60px;
    --button-basic-pd : 40px;
    --button-basic-font : clamp(13px, 1.7cqw, 18px);

    --button-small-size : 43px;
    --button-small-pd : 30px;

    --button-medium-size : 70px;
    --button-medium-pd : 40px;
}

@media screen and (max-width: 768px) {
    :root {
        --button-basic-pd : 32px;
        --button-small-pd : 24px;
        --button-medium-pd : 36px;
    }
}

@media screen and (max-width: 648px) {
    :root {
        --button-basic-size : 52px;
        --button-small-size : 36px;
        --button-medium-size : 64px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --button-basic-size : 46px;
        --button-basic-pd : 24px;

        --button-small-size : 32px;
        --button-small-pd : 18px;

        --button-medium-size : 58px;
        --button-medium-pd : 30px;
    }
}



.com-button-wrap {width:100%; display:flex; align-items:center; justify-content:center; gap:var(--gap-8); flex-wrap:wrap;}

.button {display:flex; align-items:center; justify-content:center; border-radius:100px; position:relative;}
.button.basic {width:fit-content; height:var(--button-basic-size); font-size:var(--button-basic-font); font-weight:500; padding:0 var(--button-basic-pd);}
.button.small {width:fit-content; height:var(--button-small-size); font-size:var(--font-size-15); padding:0 var(--button-small-pd);}
.button.medium {width:fit-content; height:var(--button-basic-size); font-size:var(--button-basic-font); font-weight:500; padding:0 var(--button-basic-pd);}

.button.rotation {background:var(--black); color:var(--white); transition:background 0.3s ease, color 0.2s ease;}
.button.rotation .txt-wrap {display:flex; align-items:center; position:relative; overflow:clip;}
.button.rotation .txt-wrap p {transition:transform 0.8s cubic-bezier(.496,.004,0,1);}
.button.rotation .txt-wrap p:last-child {position:absolute; left:0; top:0; transform:translateY(100%);}
.button.rotation:hover {background:var(--key-color); color:var(--black);}
.button.rotation:hover .txt-wrap p:first-child {transform:translateY(-100%);}
.button.rotation:hover .txt-wrap p:last-child {transform:translateY(0%);}

.button.hover,
.button.black {background:var(--black); color:var(--key-color); transition:background 0.3s ease-in-out;}
.button.hover:hover {background:var(--key-color); color:var(--black);}

.button.disabled {background:var(--gray-d); color:var(--gray-6); pointer-events:none;}

.button.line {border:1px solid var(--gray-a4); color:var(--gray-3);}


.radio {position:relative;}
.radio input[type='radio'] {width:0; height:0; position:absolute; left:0; top:0; opacity:0; visibility:hidden;}
.radio label {display:flex; align-items:flex-start; gap:var(--gap-8); cursor:pointer;}
.radio label .check {position:relative; width:var(--font-size-24); min-height:var(--font-size-30); display:block;}
.radio label .check:before {content:''; width:100%; aspect-ratio:1; box-sizing:border-box; border-radius:50%; border:1px solid var(--gray-d9); position:absolute; left:0; top:50%; transform:translateY(-50%);}
.radio label .check:after {content:''; width:50%; aspect-ratio:1; box-sizing:border-box; border-radius:50%; background:var(--gray-d9); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.radio label p {min-height:var(--font-size-30); display:flex; align-items:center; font-size:var(--font-size-18);}

.radio input[type='radio']:checked + label .check:before {border-color:var(--key-color);}
.radio input[type='radio']:checked + label .check:after {background:var(--key-color);}






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