/*공통*/

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

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

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


:root {
    --header-gap : 100px;
}

header {width:100%; height:var(--headerH); background:var(--down-white); box-shadow:0 10px 20px rgba(0,0,0,0.05); position:fixed; left:0; top:0; z-index:1000; transition:box-shadow 0.3s ease-in-out;}
header:after {content:''; width:100%; height:0; background:var(--white); background-size:100% 0; position:absolute; left:0; top:var(--headerH); z-index:0; transition:height 0.4s ease-in-out;}
header > .wrap {width:90%; max-width:1440px; margin:0 auto; height:100%; position:relative; z-index:10;}
header .header-conts {width:100%; height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--header-gap);}
header .header-conts .logo {height:50px; aspect-ratio:190/50; font-size:0; background:url(/img/com/logo_new.svg) center no-repeat; background-size:cover;}

header .header-conts .gnb-wrap {width:calc(100% - 110px - var(--header-gap)); height:100%;}
header .header-conts .gnb-wrap .gnb-box {height:100%; display:flex; align-items:center; justify-content:space-between;}
header .header-conts .gnb-wrap .gnb-box .gnb {height:100%; position:relative;}
header .header-conts .gnb-wrap .gnb-box .gnb .gnb-link {height:100%; font-size:var(--font-16); font-weight:700; display:flex; align-items:center; justify-content:center; padding:10px;}
header .header-conts .gnb-wrap .gnb-box .snb-wrap {position:absolute; left:50%; top:var(--headerH); padding-top:10px; transform:translateX(-50%) translateY(20px); visibility:hidden; opacity:0; transition:0.3s;}
header .header-conts .gnb-wrap .gnb-box .snb-wrap .snb-box {width:max-content; max-width:210px; background:var(--white); padding:10px; display:flex; flex-direction:column; gap:5px; box-shadow:0 0 30px rgba(0,0,0,0.1);}
header .header-conts .gnb-wrap .gnb-box .snb-wrap .snb-box .snb {width:100%; background:transparent; transition:background 0.3s ease-in-out;}
header .header-conts .gnb-wrap .gnb-box .snb-wrap .snb-box .snb .snb-link {width:100%; min-height:44px; display:flex; align-items:center; padding:10px var(--gap-16); font-size:var(--font-16); font-weight:500;}

header.on {box-shadow:0 10px 20px rgba(0,0,0,0.1);}
header .header-conts .gnb-wrap .gnb-box .gnb:hover .gnb-link {color:var(--key-color);}
header .header-conts .gnb-wrap .gnb-box .snb-wrap.active {visibility:visible; opacity:1; transform:translateX(-50%) translateY(0);}
header .header-conts .gnb-wrap .gnb-box .snb-wrap .snb-box .snb:hover {background:rgba(255,123,42,0.1);}
header .header-conts .gnb-wrap .gnb-box .snb-wrap .snb-box .snb:hover .snb-link {color:var(--key-color);}

header .header-conts .btn-sitemap {display:none; width:var(--gap-24); aspect-ratio:1; background:url(/img/com/icon_menu3.svg) center no-repeat; background-size:100% auto;}

@media screen and (max-width: 1280px) {
    :root {
        --header-gap : 60px;
    }
}

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

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

@media screen and (max-width: 480px) {
    header .header-conts .logo {height:32px;}
}


header .sitemap {width:100%; height:calc(var(--nvh) - var(--headerH)); position:absolute; left:0; top:var(--headerH); visibility:hidden; opacity:0; z-index:10;}
header .sitemap .sitemap-wrap {width:100%; height:100%; overflow-y:auto; position:relative; z-index:10;}
header .sitemap .sitemap-wrap .gnb-box {width:100%;}
header .sitemap .sitemap-wrap .gnb-box .gnb {width:100%;}
header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-txt {width:100%; height:90px; background:var(--white); display:flex; align-items:center; padding:0 var(--gap-40); position:relative; font-size:var(--font-30); font-weight:700; transform:translateY(30%); opacity:0; transition:transform 0.3s ease-in-out, opacity 0.3s ease-in-out;}
header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-txt:hover {background:var(--down-white);}
header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-btn:after {content:''; width:var(--gap-40); aspect-ratio:1; background:url(/img/com/arrow_down_black.svg) center no-repeat; background-size:80% auto; position:absolute; right:var(--gap-24); top:50%; transform:translateY(-50%); transition:transform 0.2s;}
header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-btn.active {background:var(--down-white);}
header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-btn.active:after {transform:translateY(-50%) scaleY(-1);}
header .sitemap .sitemap-wrap .gnb-box .gnb .snb-wrap {width:100%; display:none;}
header .sitemap .sitemap-wrap .gnb-box .gnb .snb-wrap .snb-box {width:100%; padding:calc(var(--gap-24) / 2) 0;}
header .sitemap .sitemap-wrap .gnb-box .gnb .snb-wrap .snb-box .snb {width:100%;}
header .sitemap .sitemap-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link {display:block; width:100%; font-size:var(--font-20); padding:calc(var(--gap-24) / 2) var(--gap-40);}

@media screen and (max-width: 768px) {
    header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-btn,
    header .sitemap .sitemap-wrap .gnb-box .gnb .gnb-link {height:80px; padding:0 var(--gap-24);}
    header .sitemap .sitemap-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link {display:block; width:100%; font-size:var(--font-20); padding:calc(var(--gap-24) / 2) var(--gap-24);}
}

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


header.open {box-shadow:0 0 0 rgba(0,0,0,0);}
header.open:after {height:calc(var(--nvh) - var(--headerH));}
header.open .header-conts .btn-sitemap {background-image:url(/img/com/icon_close.svg); background-size:90% auto;}
header.open .sitemap {visibility:visible; opacity:1;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb .gnb-txt {transform:translateY(0); opacity:1;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(1) .gnb-txt {transition-delay:0.2s;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(2) .gnb-txt {transition-delay:0.25s;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(3) .gnb-txt {transition-delay:0.3s;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(4) .gnb-txt {transition-delay:0.35s;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(5) .gnb-txt {transition-delay:0.4s;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(6) .gnb-txt {transition-delay:0.45s;}
header.open .sitemap .sitemap-wrap .gnb-box .gnb:nth-child(7) .gnb-txt {transition-delay:0.5s;}





.button[data-type='arrow'] {width:fit-content; position:relative; display:flex; align-items:center;}
.button[data-type='arrow'] .txt {width:fit-content; height:50px; display:flex; align-items:center; padding:0 var(--gap-24); font-size:var(--font-18); font-weight:600; transition:background-color 0.3s ease-in-out;}
.button[data-type='arrow'] .arrow {width:50px; aspect-ratio:1; border-radius:50%; overflow:hidden; transition:background-color 0.3s ease-in-out;}
.button[data-type='arrow'] .arrow .arrow-wrap {width:100px; height:100%; display:flex; flex-shrink:0; transform:translateX(-50%);}
.button[data-type='arrow'] .arrow .arrow-wrap span {display:flex; width:50px; aspect-ratio:1; background:url(/img/com/arrow_right_white.svg) center no-repeat; background-size:40% auto;}

.button[data-type='arrow']:hover .arrow .arrow-wrap {animation:btnArrowAni 0.5s forwards;}

.button[data-type='arrow'][data-color='black'] .txt {background-color:var(--black); color:var(--white);}
.button[data-type='arrow'][data-color='black'] .arrow {background-color:var(--black);}

.button[data-type='arrow'][data-hover='key']:hover .txt,
.button[data-type='arrow'][data-hover='key']:hover .arrow {background-color:var(--key-color);}

.button[data-type='arrow'][data-hover='white']:hover .txt,
.button[data-type='arrow'][data-hover='white']:hover .arrow {background-color:var(--white); color:var(--key-color);}
.button[data-type='arrow'][data-hover='white']:hover .arrow .arrow-wrap span {background-image:url(/img/com/arrow_right_key.svg);}

.button.wide,
.button.wide .txt {width:100% !important;}
.button.wide .txt {justify-content:center;}


@keyframes btnArrowAni {
    0% {transform:translateX(-50%);}
    100% {transform:translateX(0);}
}

@media screen and (max-width: 768px) {
    .button[data-type='arrow'] .txt {height:45px;}
    .button[data-type='arrow'] .arrow,
    .button[data-type='arrow'] .arrow .arrow-wrap span {width:45px;}
    .button[data-type='arrow'] .arrow .arrow-wrap {width:90px;}
}

@media screen and (max-width: 480px) {
    .button[data-type='arrow'] .txt {height:38px;}
    .button[data-type='arrow'] .arrow,
    .button[data-type='arrow'] .arrow .arrow-wrap span {width:38px;}
    .button[data-type='arrow'] .arrow .arrow-wrap {width:76px;}
}



.button[data-type='basic'] {width:fit-content; height:var(--el-size); flex-shrink:1; position:relative; display:flex; align-items:center; justify-content:center; font-size:var(--font-16); font-weight:700; transition:background-color 0.3s ease-in-out; padding:0 var(--gap-40);}
.button[data-type='basic'][data-color='black'] {background-color:var(--black); color:var(--white);}
.button[data-type='basic'][data-color='black']:hover {background-color:var(--key-color);}







footer {width:100%; padding:var(--gap-50) 0 var(--gap-80) 0; background:var(--black); position:relative; z-index:9;}
footer .footer-wrap {width:90%; max-width:var(--max-w); margin:0 auto;}
footer .top-conts {width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gap-50);}
footer .top-conts .logo {height:50px; aspect-ratio:190/50; background:url(/img/com/logo_white_new.svg) center no-repeat; background-size:cover; font-size:0;}
footer .top-conts .sns-wrap {display:flex; align-items:center; gap:var(--gap-32); justify-content:center;}
footer .top-conts .sns-wrap a {display:block; width:30px; aspect-ratio:1; font-size:0; background-repeat:no-repeat; background-size:cover; background-position:center; transition:0.4s ease-in-out;}
footer .top-conts .sns-wrap a.blog {background-image:url(/img/com/icon_blog.svg);}
footer .top-conts .sns-wrap a.youtube {background-image:url(/img/com/icon_youtube.svg);}
footer .top-conts .sns-wrap a.instagram {background-image:url(/img/com/icon_insta.svg);}
footer .top-conts .sns-wrap a.blog:hover {background-image:url(/img/com/icon_blog_on.svg);}
footer .top-conts .sns-wrap a.youtube:hover {background-image:url(/img/com/icon_youtube_on.svg);}
footer .top-conts .sns-wrap a.instagram:hover {background-image:url(/img/com/icon_insta_on.svg);}

footer .footer-conts {width:100%; margin-top:var(--gap-50); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap-50);}
footer .footer-conts .company-info {color:var(--gray-c); font-size:var(--font-16)}
footer .footer-conts .company-info .head {font-weight:700; margin-bottom:var(--gap-16);}
footer .footer-conts .company-info .info-wrap {width:100%; display:flex; flex-direction:column; gap:5px;}
footer .footer-conts .company-info .info-wrap .row {width:100%; display:flex; align-items:center; gap:5px var(--gap-24); flex-wrap:wrap; font-weight:500;}
footer .footer-conts .copyright {font-size:var(--font-16); font-weight:500; color:var(--gray-9);}

@media screen and (max-width: 1280px) {
    footer .footer-conts {flex-direction:column;}
    footer .footer-conts > * {width:100%;}
}

@media screen and (max-width: 480px) {
    footer .top-conts {flex-direction:column;}
    footer .top-conts .sns-wrap {padding:var(--gap-16) 0;}
    footer .top-conts .sns-wrap a {width:25px;}
}




.quick {width:70px; position:fixed; right:3%; bottom:60px; z-index:100; visibility:hidden; opacity:0; transition:visivility 0.4s ease, opacity 0.4s ease;}
.quick.active {visibility:visible; opacity:1;}
.quick ul {width:100%; display:flex; gap:var(--gap-16); flex-direction:column;}
.quick ul li {width:100%;}
.quick ul li a {width:100%; aspect-ratio:1; background-position:center; background-size:50% auto; background-repeat:no-repeat; background-color:var(--white); transition:0.3s ease-in-out; font-size:0; display:block; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.quick ul li a span {font-weight: 700; font-size: var(--font-14); text-align: center; color: var(--key-color); display: block; width: 100%; line-height: 1.3; transition: color 0.1s ease-in-out; margin-top: 5px;}
.quick ul li a span br {display: none;}
.quick ul li a.contact { aspect-ratio: unset; padding: 15px 0;}
.quick ul li a.contact i {display: block; width: 30px; aspect-ratio: 1; background-image:url(/img/com/icon_inquiry.svg); background-position: center; background-size: 100% auto; margin: auto; background-repeat: no-repeat;}
.quick ul li a.online { aspect-ratio: unset; padding: 15px 0;}
.quick ul li a.online i {display: block; width: 30px; aspect-ratio: 1; background-image:url(/img/com/icon_kakao.svg); background-position: center; background-size: 100% auto; margin: auto; background-repeat: no-repeat;}
/* .quick ul li a.online {background-image:url(/img/com/icon_online.svg);} */
.quick ul li a.btn-top {background-image:url(/img/com/icon_top.svg); background-color:var(--black);}
.quick ul li a:hover {background-color:var(--key-color);}
.quick ul li a:hover {background-color:var(--key-color);}
.quick ul li a:active{background-color:var(--key-color);}
.quick ul li a.contact:hover i{background-image:url(/img/com/icon_inquiry_on.svg);}
.quick ul li a.online:hover i{background-image:url(/img/com/icon_kakao_on.svg);}
.quick ul li a.btn-top:hover {background-image:url(/img/com/icon_top_on.svg); background-color:var(--gray-3);}
.quick ul li a:hover span {color: var(--white);}


@media screen and (max-width: 648px) {
    .quick {width:40px; bottom:30px;}
    .quick ul {gap:var(--gap-10);}

    .quick ul li a.contact, .quick ul li a.online {padding: 8px 0;}
    .quick ul li a.contact i, .quick ul li a.online i {width: 20px;}
    .quick ul li a span {margin-top: 3px;}
    .quick ul li a span br {display: block;}
}


.quick-menu {position:fixed; right:3%; bottom:60px; z-index:100;}
.quick-menu .quick-box {width:75px; max-height:75px; display:flex; flex-direction:column; gap:var(--gap-16); background:#075B37; border-radius:200px; padding:5px 0; overflow:hidden; transition:max-height 0.5s ease-in-out, padding 0.3s ease-in-out;}
.quick-menu .quick-box li {padding:var(--gap-16) 0; position:relative;}
.quick-menu .quick-box li:after {content:''; width:60%; height:1px; background:rgba(255,255,255,0.6); position:absolute; left:50%; bottom:calc((var(--gap-16) / 2) * -1); transform:translateX(-50%);}
.quick-menu .quick-box li:last-child:after {display:none;}
.quick-menu .quick-box li a {width:100%; display:flex; flex-direction:column; gap:var(--gap-10); align-items:center;}
.quick-menu .quick-box li .icon {width:32px; aspect-ratio:1; background-repeat:no-repeat; background-size:cover; background-position:center;}
.quick-menu .quick-box li .icon-tel {background-image:url(/img/com/quick_icon_tel.svg);}
.quick-menu .quick-box li .icon-inquiry {background-image:url(/img/com/quick_icon_inquiry.svg);}
.quick-menu .quick-box li .icon-calendar {background-image:url(/img/com/quick_icon_calendar.svg);}
.quick-menu .quick-box li .icon-kakao {background-image:url(/img/com/quick_icon_kakao.svg);}
.quick-menu .quick-box li span {text-align:center; font-size:14px; font-weight:700; color:var(--white); opacity:0; transition:opacity 0.3s ease-in-out;}
.quick-menu .quick-box.on {max-height:400px; padding:var(--gap-16) 0;}
.quick-menu .quick-box.on li span {opacity:1;}
.quick-menu .btn-top {width:75px; height:75px; max-height:0; border-radius:50%; background:url(/img/com/icon_top.svg) center / 50% auto no-repeat; background-color:var(--black); font-size:0; cursor:pointer; overflow:hidden; opacity:0; margin-top:0; pointer-events:none; transition:all 0.3s ease-in-out;}
.quick-menu .btn-top.active {margin-top:var(--gap-16); opacity:1; max-height:75px; pointer-events:auto;}


@media screen and (max-width: 768px) {
    .quick-menu .quick-box {width:62px; max-height:62px;}
    .quick-menu .quick-box li .icon {width:30px;}
    .quick-menu .quick-box li span {font-size:13px;}
    .quick-menu .btn-top {width:62px; height:62px;}
    .quick-menu .btn-top.active {max-height:62px;}
}

@media screen and (max-width: 480px) {
    .quick-menu .quick-box {width:56px; max-height:56px;}
    .quick-menu .quick-box li .icon {width:26px;}
    .quick-menu .quick-box li span {font-size:11px;}
    .quick-menu .btn-top {width:56px; height:56px;}
    .quick-menu .btn-top.active {max-height:56px;}
}






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