@charset "utf-8";

@import url("font.css");
@import url("reset.css");
@import url("common.css");
@import url("form.css");
/* @import url("ui.css"); */


:root {  
    --default_font: "SUIT";
    /* gnb nav style */
    --header_bg:rgba(0,0,0,0);
    --header_bg_line:rgba(255,255,255,.1);
    --depth1_txt:rgba(255,255,255,1);
    --depth2_txt:rgba(255,255,255,1);
    --depth1_hover_txt:rgba(255,255,255,1);
    --depth2_hover_txt:rgba(255,255,255,1);
    --depth1_hover_bg:rgba(0,0,0,.5);
    --depth1_hover_round:0.3rem;   
    --phone_txt:#fff;

    /* mobile nav style */
    --mobile_menu_bg:#232429;
    --mobile_depth1_txt:#fff;
    --mobile_depth2_txt:#fff;
    --hamburger_color:#fff;

    /* location nav style */
    --location_nav_bg:rgba(0,0,0, .5);
    --location_nav_menubg: rgba(73,73,73,.6);
    --location_nav_menuhover: rgba(73,73,73,.8);
}

/********************************************* 
    헤더
*********************************************/
.temp_header_skin1{position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition:all 0.3s ease-in-out; padding: 20px 40px; background: rgba(0, 0, 0, 0.5);}
.temp_header_skin1 .header_con{display: flex; align-items: center; justify-content: space-between;}
.temp_header_skin1 .header_util{display: flex; align-items: center; gap: 22px;}
.temp_header_skin1 .header_util .open_box{padding: 6px 30px; background: #fff; border-radius: 30px; text-align: center;}
.temp_header_skin1 .header_util .open_box p{font-family: "Audiowide"; color: #003A31; font-size: 20px;}
.temp_header_skin1 .header_util .open_box p strong{font-weight: 800;}
.temp_header_skin1 .header_util .top_tel{font-family: "Audiowide"; color: #fff; font-size: 24px;}

.temp_header_skin1 .gnb .gnb_depth_1{display: flex; align-items: center; justify-content: center; gap: 60px;}
.temp_header_skin1 .gnb .gnb_depth_1 > li{position: relative;}
.temp_header_skin1 .gnb .gnb_depth_1 > li > a{font-size: 20px; color: #fff; font-weight: 300;}

.temp_header_skin1 .gnb .gnb_depth_2{position: absolute; left: 50%; transform: translateX(-50%); padding-top: 10px; opacity: 0; visibility: hidden; transition: all 0.3s;}
.temp_header_skin1 .gnb .gnb_depth_2 > ul{padding: 20px 10px; background: #003A31; border-radius: 10px; width: max-content; text-align: center; display: flex; flex-direction: column; gap: 5px;}
.temp_header_skin1 .gnb .gnb_depth_2 > ul > li > a{font-size: 16px; color: #fff; font-weight: 300;}

.temp_header_skin1 .gnb .gnb_depth_1 > li:hover .gnb_depth_2{opacity: 1; visibility: visible;}

.temp_header_skin1 .util_menu{display: none;}
.temp_header_skin1 .allmenu_con{display: none;}
.temp_header_skin1 .close_icon{display: none;}

header.temp_header_skin1.scrollUp {transform: translateY(0); transition: all 0.8s;}
header.temp_header_skin1.scrollDown {transform: translateY(-100%); transition: all 0.5s;}

.temp_header_skin1.bk .header_con .gnb_logo{content: url("/resources/img/common/header_logo_b.svg");}
.temp_header_skin1.bk .gnb .gnb_depth_1 > li > a{color: #003A31;}
.temp_header_skin1.bk .header_util .open_box{background: #003A31;}
.temp_header_skin1.bk .header_util .open_box p{color: #fff;}
.temp_header_skin1.bk .header_util .top_tel{color: #003A31;}
/********************************************* 
    풋터
*********************************************/
#footer{width: 100%; background: #003A31;}
#footer .footer_inner{display: flex; justify-content: space-between; width: 100%; max-width: 1560px; margin: auto; padding: 60px 20px; box-sizing: border-box; gap: 20px;}
#footer .footer_inner .ci_box{margin-bottom: 20px;}
#footer .footer_inner .ci_box ul{display: flex; align-items: flex-end; gap: 25px;}
#footer .footer_inner .ci_box ul li{display: flex; align-items: center; gap: 10px;}
#footer .footer_inner .ci_box ul li:nth-child(2){transform: translateY(3px);}
#footer .footer_inner .ci_box ul li:nth-child(3){transform: translateY(7px);}
#footer .footer_inner .ci_box ul li p{color: #fff; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400;}
#footer .footer_inner .info1{margin-bottom: 5px;}
#footer .footer_inner .info1 ul{display: flex; align-items: center; gap: 15px;}
#footer .footer_inner .info1 ul li{color: #fff; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 400;}
#footer .footer_inner .info2{margin-bottom: 8px;}
#footer .footer_inner .info2 ul li{font-family: "Noto Sans KR"; font-size: 13px; font-weight: 300; color: #fff; opacity: 0.7; line-height: 22px;}
#footer .footer_inner .copy p{color: #fff; font-family: "Noto Sans KR"; font-size: 12px; font-weight: 500;}

#footer .footer_inner .utility_box #goTop{display: block; width: 54px; height: 100px; margin-left: auto; margin-bottom: 34px;}
#footer .footer_inner .utility_box .logo2{margin-bottom: 8px; text-align: right;}
#footer .footer_inner .utility_box p{color: #fff; font-size: 16px; font-weight: 700;}
#footer .footer_inner .utility_box p a{color: #fff; font-family: 'Audiowide'; font-size: 40px; font-weight: 400; margin-left: 5px; white-space: nowrap;}
#footer .footer_inner .utility_box .privacy{border-radius: 20px; background: rgba(216, 217, 213, 0.20); padding: 8px 30px; color: rgba(255, 255, 255, 0.70); text-align: center; font-size: 16px; font-weight: 400; width: 175px; height: 34px; display: block; margin-left: auto; line-height: 20px;}

/* 반응형 */
@media screen and (max-width: 1640px) {
    .temp_header_skin1 .gnb .gnb_depth_1 > li > a{font-size: 16px;}
    .temp_header_skin1 .gnb .gnb_depth_2 > ul > li > a{font-size: 14px;}
    .temp_header_skin1 .header_util .open_box p{font-size: 16px;}
    .temp_header_skin1 .header_util .top_tel{font-size: 20px;}
    .temp_header_skin1 .gnb .gnb_depth_1{gap: 40px;}

    #footer .footer_inner{padding: 60px;}
}

@media screen and (max-width: 1400px){
    .temp_header_skin1 .header_util .open_box{display: none;}

    #footer .footer_inner .info_box{width: 70%;}
}

@media screen and (max-width: 1300px){
    #footer .footer_inner .info1 ul{flex-wrap: wrap; gap: 5px;}
}

@media screen and (max-width: 1200px){
    .temp_header_skin1 .header_con h1{width: 200px;}
    .temp_header_skin1 .header_con h1 img{width: 100%;}
    .temp_header_skin1 .gnb .gnb_depth_1{gap: 20px;}
}

/* 모바일 */
@media screen and (max-width: 1024px) {
    .temp_header_skin1{padding: 20px; height: unset;}
    .temp_header_skin1.on{background: rgba(0, 0, 0, 0.5);}
    .temp_header_skin1 .header_con .gnb{display: none;}
    .temp_header_skin1 .header_util{display: none;}
    .temp_header_skin1 .util_menu{display: block;}
    .temp_header_skin1 .header_con h1{width: unset;}
    .temp_header_skin1 .header_con h1 a{display: block;}
    .temp_header_skin1 .header_con h1 a img{display: block;}
    
    .temp_header_skin1 .header_con{z-index: 1; position: relative;}
    .temp_header_skin1 .hamburger_icon{width: 20px; height: 20px;}
    .temp_header_skin1.active .hamburger_icon svg{display: none;}
    .temp_header_skin1 .close_icon{width: 20px; height: 20px; position: relative;}
    .temp_header_skin1.active .close_icon{display: block;}
    .temp_header_skin1 .close_icon i{display: block; width: 20px; height: 1px; background: #fff; position: absolute; top: 50%;}
    .temp_header_skin1 .close_icon i:nth-child(1){transform: rotate(45deg);}
    .temp_header_skin1 .close_icon i:nth-child(2){transform: rotate(-45deg);}
    .temp_header_skin1 .allmenu_con{display: block; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: #003A31; padding: 100px 20px; transition: all 0.5s; opacity: 0; visibility: hidden; transform: translateY(-100%);}
    .temp_header_skin1.active .allmenu_con{opacity: 1; visibility: visible; transform: translateY(0);}
    .temp_header_skin1 .mobile_gnb .depth0{display: flex; flex-direction: column; gap: 20px;}
    .temp_header_skin1 .mobile_gnb .depth0 > li{display: flex; gap: 20px;}
    .temp_header_skin1 .mobile_gnb .depth0 > li > a{color: #fff; font-size: 24px; font-weight: 400;}
    .temp_header_skin1 .mobile_gnb .depth1{padding-top: 5px; display: none;}
    .temp_header_skin1 .mobile_gnb .depth1 > li > a{color: #fff; font-size: 20px; font-weight: 400;}

    #footer .footer_inner{flex-direction: column; padding: 25px; position: relative;}
    #footer .footer_inner .info_box{width: 100%;}
    #footer .footer_inner .ci_box{margin-bottom: 40px;}
    #footer .footer_inner .ci_box ul{align-items: flex-start; gap: 0; flex-direction: column;}
    #footer .footer_inner .ci_box ul li:nth-child(1){margin-bottom: 50px;}
    #footer .footer_inner .ci_box ul li:nth-child(2){margin-bottom: 10px;}
    #footer .footer_inner .info2{margin-bottom: 15px;}
    #footer .footer_inner .utility_box #goTop{position: absolute; top: 25px; right: 25px;}
    #footer .footer_inner .utility_box .logo2{display: none;}
    #footer .footer_inner .utility_box p{text-align: center; margin-bottom: 20px;}
    #footer .footer_inner .utility_box .privacy{margin: auto;}
}

@media screen and (max-width: 600px) {
    #footer .footer_inner .copy p{text-align: center;}
}



/**************************************************************
	서브 비주얼
**************************************************************/
.sub_top_visual{width: 100%; height: 560px; position: absolute;}
.sub_top_visual_mt{width: 100%; height: 560px; position: relative;}
.sub_top_visual_mt .motion_box{width: 100%; height: 100%; position: relative; overflow: hidden;}
.sub_top_visual_mt .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sub_top_visual_mt .bg img{width: 100%; height: 100%; object-fit: cover;}

.sub_top_visual_mt .bi{position: absolute; top: 30%; left: 0; transform: translateX(-100%);}

/* PAGE LOCATION NAV */
.page_location_nav {width: max-content; text-align: center; position: absolute; z-index: 40; left: 20px; right:20px; bottom: 80px; width: 100%; max-width: 1560px; margin: auto;}
/* .page_location_nav[data-menu="5"] {background-color: #724F49;} */
.page_location_nav.topfix {position: fixed; top: 0; left: 0; right: 0;z-index: 90;}
.page_location_nav nav {text-align: left; white-space: nowrap; position: relative; display: flex; align-items: center; gap: 20px;}
.page_location_nav button {border: 0; background: transparent; outline: 0; font-size: 0;}
.page_location_nav .home {display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}
.page_location_nav .blt{width: 6px; height: 6px; border-radius: 6px; background: #fff; margin-left: 10px; margin-right: -5px;}
.page_location_nav .path-item {position: relative; min-width: 130px; padding: 14px 70px 14px 24px; border-radius: 8px; transition: all 0.5s; box-sizing: content-box;}
.page_location_nav .path-item:hover{background: rgba(255,255,255,0.2);}
.page_location_nav .path-item.active{background: rgba(255,255,255,0.2);}
.page_location_nav .path-item dt {color: #fff;}
.page_location_nav nav span.open {margin-left: auto; align-items: center; display: flex;}
.page_location_nav .path-item ul {position: absolute; top: 50px; left: 0; right: 0; margin-left:-1px; border-radius: 8px; overflow: hidden; width: 100%;}
.page_location_nav .path-item ul li {line-height: 1.6; padding: 0; text-align: left;}
.page_location_nav .path-item dd {display: none; width: 100%;}
.page_location_nav .path-item li a {color: rgba(255,255,255,1); display: block; position: relative; padding: 14px 25px; font-size: 16px; transition: all .3s;}
.page_location_nav .path-item ul li a {background: rgba(0, 58, 49, 0.7); opacity: 1;}
.page_location_nav .path-item ul li a:hover { opacity: 1;}
.page_location_nav .path-item.path_depth_1 ul {margin-left: 0; }
.page_location_nav .path-item.path_depth_1 li a {border-left: 0;}
.page_location_nav .path-item li.on a {color: rgba(255,255,255,1);}
.page_location_nav .path-item .btn-open,
.page_location_nav .path-item .btn-close {position: absolute; right: 0; top: 0; left: 0; width: 100%; height: 100%; white-space: nowrap; overflow: hidden; cursor: pointer;}
.page_location_nav .path-item .btn-open:after,
.page_location_nav .path-item .btn-close:after {content: ""; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 20px; height: 20px; background: url('/resources/img/sub/sub_nav_arrow.svg') center center no-repeat;}
.page_location_nav .path-item .btn-close {display: none;}
.page_location_nav .path-item .btn-close:after {transform: translateY(-50%) rotate(180deg);}
.page_location_nav .path-item.active {z-index: 22;}
.page_location_nav .path-item.active .btn-open {display: none;}
.page_location_nav .path-item.active .btn-close {display: block;}

@media screen and (max-width: 1600px){
    .page_location_nav{left: 0; right: 0; padding-left: 20px;}
}

@media screen and (max-width: 1024px) {
    .sub_top_visual{height: 420px;}
    .sub_top_visual_mt{height: 420px;}
    .sub_top_visual_mt .bg img{object-fit: none;}
    .sub_top_visual_mt .bi{animation: sub_top_visual_mt 10s infinite linear; transform: translateX(100%); max-width: 600px; width: 100%;}
    .sub_top_visual_mt .bi img{width: 100%;}
    @keyframes sub_top_visual_mt {
        0%{transform: translateX(100%);}
        100%{transform: translateX(-100%);}
    }

    .page_location_nav{bottom: 40px; width:auto;}
    .page_location_nav .home{display: none;}
    .page_location_nav .blt{display: none;}
    
}

@media screen and (max-width: 560px){
    .page_location_nav .path-item{padding: 10px 24px 10px 24px;}
    .page_location_nav .path-item dt{font-size: 3vw;}
    .page_location_nav .path-item li a{font-size: 2.5vw; padding: 10px 24px;}
}
@media screen and (max-width: 450px){
    .page_location_nav .path-item li a{font-size: 3.2vw;}
}