@charset "utf-8";

@import url("common.css");


/********************************************* 
    헤더
*********************************************/
.temp_header_skin1{position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 120px; transition: all 1s;}
.temp_header_skin1 .rolling_logo{position: relative;}
.temp_header_skin1 .rolling_logo .logo{position: absolute; left: 0; top: -2px; transition: all 1s; opacity: 0; max-height: 30px;}
.temp_header_skin1 .rolling_logo .txt{transition: all 1s; opacity: 0;}
.temp_header_skin1 .rolling_logo .logo.on,
.temp_header_skin1 .rolling_logo .txt.on{opacity: 1;}
.temp_header_skin1 .header_con{position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 50px; width: 100%; height: 120px; border-bottom: 1px solid transparent;}
.temp_header_skin1 .header_con .gnb{position: absolute; left: 50%; transform: translateX(-50%);}
.temp_header_skin1 .header_con .gnb_depth_1{display: flex; align-items: center; gap: 20px;}
.temp_header_skin1 .header_con .gnb_depth_1 > li{position: relative;}
.temp_header_skin1 .header_con .gnb_depth_1 > li > a{color: #fff; font-size: 18px; position: relative; padding: 17px 30px; background: transparent; border-radius: 24px; white-space: nowrap; transition: all 0.3s;}
.temp_header_skin1 .header_con .gnb_depth_1 > li > a > strong{font-weight: 400;}
/* .temp_header_skin1 .header_con .gnb_depth_1 > li > a::after{position: absolute; content: ""; width: 8px; height: 8px; border-radius: 8px; background: #98C0FF; top: -5px; right: -8px; opacity: 0; transition: all 0.3s;}
.temp_header_skin1 .header_con .gnb_depth_1 > li:hover > a::after{opacity: 1;} */

.temp_header_skin1 .header_con .gnb_depth_2{position: absolute; display: block !important; top: 94px; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: all 0.3s;}
.temp_header_skin1:hover .header_con .gnb_depth_2{opacity: 1; visibility: visible;}
.temp_header_skin1 .header_con .gnb_depth_2 > ul{display: flex; flex-direction: column; align-items: center; gap: 25px;}
.temp_header_skin1 .header_con .gnb_depth_2 > ul > li{text-align: center;}
.temp_header_skin1 .header_con .gnb_depth_2 > ul > li > a{font-size: 16px; color: #666; text-align: center; white-space: nowrap; position: relative; display: block;}
.temp_header_skin1 .header_con .gnb_depth_2 > ul > li > a::after{position: absolute; content: ""; width: 0%; height: 1px; background: #2E3C46; transition: all 0.3s; left: 0; bottom: -1px;}
.temp_header_skin1 .header_con .gnb_depth_2 > ul > li > a:hover::after{width: 100%;}

.temp_header_skin1 .header_utll a {display: flex; align-items: center; gap: 12px;}
.temp_header_skin1 .header_utll a span {color: #fff; font-family: "Gmarket Sans"; font-size: 28px; font-weight: 400; line-height: 120%; letter-spacing: -0.28px; text-transform: uppercase; margin-bottom: -4px;}
.temp_header_skin1 .header_utll .open_bt{padding: 12px 19px; border-radius: 50px; background: #C5E2FF;}
.temp_header_skin1 .header_utll .open_bt p{font-size: 18px; line-height: 22px; color: #001241; font-weight: 400;}

.temp_header_skin1.scrollDown{transform: translateY(-100%);}
.temp_header_skin1.scrollTop{transform: translateY(0);}

.bk .temp_header_skin1 .rolling_logo svg path{fill: #001241;}
.bk .temp_header_skin1 .header_con .gnb_depth_1 > li > a{color: #fff;}

.temp_header_skin1:hover{background: #fff !important; height: 500px; border-radius: 0 0 30px 30px; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);}
.temp_header_skin1:hover .rolling_logo svg path:not(:last-child){fill: #2E3C46 !important;}
.temp_header_skin1:hover .header_con{border-bottom: 1px solid #d8d8d8;}
.temp_header_skin1:hover .header_con .gnb_depth_1 > li > a{color: #2E3C46 !important;}
.temp_header_skin1 .header_con .gnb_depth_1 > li:hover > a strong{font-weight: 600;}
.temp_header_skin1:hover .header_utll .top_tel svg path{fill: #2E3C46;}
.temp_header_skin1:hover .header_utll .top_tel svg circle {stroke: #848485;}
.temp_header_skin1:hover .header_utll a span {color: #2E3C47;}

.allmenu_con {display: none !important;}

/* 헤더 활성화 */
body:not(.fp-viewing-0, .fp-viewing-1) .temp_header_skin1 .header_con .gnb_depth_1 > li > a{color: #2E3C46;}
body:not(.fp-viewing-0, .fp-viewing-1) .temp_header_skin1 .header_utll .top_tel svg path{fill: #2E3C46;}
body:not(.fp-viewing-0, .fp-viewing-1) .temp_header_skin1 .header_utll .top_tel svg circle {stroke: #848485;}
body:not(.fp-viewing-0, .fp-viewing-1) .temp_header_skin1 .rolling_logo svg path:not(:last-child){fill: #2E3C46;}
body:not(.fp-viewing-0, .fp-viewing-1) .temp_header_skin1 .header_utll a span {color: #2E3C47;}



/* 서브 헤더 활성화 */
.sub .temp_header_skin1 .header_con .gnb_depth_1 > li > a{color: #2E3C46;}
.sub .temp_header_skin1.scrollUp {background-color: #fff;}
.sub .temp_header_skin1.scrollTop {background-color: transparent;}
.sub .temp_header_skin1 .header_utll .top_tel svg path{fill: #2E3C46;}
.sub .temp_header_skin1 .header_utll .top_tel svg circle {stroke: #848485;}
.sub .temp_header_skin1 .rolling_logo svg path:not(:last-child){fill: #2E3C46;}
.sub .temp_header_skin1 .header_utll a span {color: #2E3C47;}



@media screen and (max-width: 1500px){
    .temp_header_skin1 .header_con h1{max-width: 208px; width: 100%;}
    .temp_header_skin1 .rolling_logo{width: 80%;}
    .temp_header_skin1 .rolling_logo svg{width: 100%;}
    .temp_header_skin1 .header_con{padding: 0 25px;}
    .temp_header_skin1 .header_con .gnb_depth_1 > li > a{padding: 17px 15px;}
}

@media screen and (max-width: 1400px) {
    .temp_header_skin1 .header_con .gnb_depth_1{gap: 10px;}
}
@media screen and (max-width: 1260px) {
    .temp_header_skin1 .header_con .gnb_depth_1 > li > a{white-space: nowrap;}
    .temp_header_skin1 .header_utll .phone_num a{padding: 5px;}
    .temp_header_skin1 .header_utll .phone_num a span{display: none;}
}
@media screen and (max-width: 1100px){
    .temp_header_skin1 .header_con .gnb_depth_1{gap: 10px;}
    .temp_header_skin1 .header_con .gnb_depth_1 > li > a{font-size: 14px;}
}

/* 모바일 */
@media screen and (max-width: 1024px) {
    .temp_header_skin1{height: unset;}
    .temp_header_skin1 .header_con{z-index: 1; height: unset; padding: 23px 33px; justify-content: flex-end;}
    .temp_header_skin1 .header_con h1{position: absolute; left: 33px; transform: translateX(0);}
    .temp_header_skin1 .rolling_logo{width: 100%;}
    .temp_header_skin1 .header_con .gnb_depth_1{display: none;}
    .temp_header_skin1 .header_utll .phone_num{position: absolute; right: 25px;}
    .temp_header_skin1 .header_utll .phone_num a{padding: 0;}
    .header_utll {display: flex;}
    .header_utll a {margin-right: 10px;}
    .header_utll a span{display: none;}

    #mGnbBtn{width: 30px; height: 30px; display: block;}
    .hamburger_icon{width: 100%; height: 100%; position: relative;}
    .hamburger_icon i{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 23px; height: 2px; background: #D9D9D9; transition: all 0.3s;}
    .sub .temp_header_skin1 .hamburger_icon i{background: #2C3D49;}
    .temp_header_skin1.on .hamburger_icon i{background: #2C3D49;}
    .hamburger_icon i:nth-child(1){transform: translateY(-3px);}
    .hamburger_icon i:nth-child(2){transform: translate(2px, 3px); width: 18px;}
    .hamburger_icon i:nth-child(3){opacity: 0; transition: all 0.3s;}
    .temp_header_skin1.active .hamburger_icon i:nth-child(3){opacity: 1; transition: all 0.3s;}

    .mobile_gnb_open .hamburger_icon i:nth-child(1){transform: translateY(0px) rotate(45deg);}
    .mobile_gnb_open .hamburger_icon i:nth-child(2){opacity: 0;}
    .mobile_gnb_open .hamburger_icon i:nth-child(3){transform: translateY(0px) rotate(-45deg);}

    .allmenu_con{display: block !important; position: fixed; top: 0; right: 0; background: #fff; width: 100vw; height: 100vh; transition: all 0.5s; transform: translateY(-100%);}
    .temp_header_skin1.active .allmenu_con{transform: translateY(0);}
    .allmenu_con .mobile_gnb{padding: 100px 33px;}
    .allmenu_con .mobile_gnb .depth0{display: flex; flex-direction: column; gap: 60px; opacity: 0; transition: all 1s;}
    .temp_header_skin1.active .allmenu_con .mobile_gnb .depth0{opacity: 1;}
    .allmenu_con .mobile_gnb .depth0 > li > a{color: #001241; font-family: Quattrocento; font-size: 26px; font-style: normal; font-weight: 300; line-height: normal;}
    .allmenu_con .mobile_gnb .depth0 > li.on > a{font-weight: 400; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; position: relative;}
    .allmenu_con .mobile_gnb .depth0 > li.on > a::after {content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #000; position: absolute; top: 50%; transform: translateX(-50%); right: -15%;}

    .allmenu_con .mobile_gnb .depth0 > li > .depth1{padding-top: 20px; display: none;}
    .allmenu_con .mobile_gnb .depth0 > li > .depth1[style*="display: block"] {display: flex !important;}
    .allmenu_con .mobile_gnb .depth0 > li > .depth1 {justify-content: flex-start; gap: 20px; flex-wrap: wrap;}
    .allmenu_con .mobile_gnb .depth0 > li > .depth1 > li > a{font-size: 16px; color: #001241; font-family: 'Pretendard'; font-style: normal; font-weight: 500; position: relative;}
    .allmenu_con .mobile_gnb .depth0 > li > .depth1 > li > a:hover {text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}

    .temp_header_skin1.active .hamburger_icon i{background: #001241;}
    .temp_header_skin1.active .header_utll .top_tel svg path{fill: #2E3C47;}
    .temp_header_skin1.active .header_utll .top_tel svg circle {stroke: #bebebe;}
    .temp_header_skin1.active .rolling_logo svg path:not(:last-child){fill: #2E3C47 !important;}


    .temp_header_skin1:hover{background: unset !important; height: unset; border-radius: 0;}
    .temp_header_skin1:hover .header_con{border-bottom: 0;}
    .temp_header_skin1:hover .rolling_logo svg path:not(:last-child){fill: #fff !important;}
    .temp_header_skin1.active:hover .rolling_logo svg path:not(:last-child){fill: #2E3C47 !important;}
    .temp_header_skin1:hover .header_utll .top_tel svg path{fill: #fff;}
    .temp_header_skin1:hover .header_utll .top_tel svg circle {stroke: #fff;}
    .temp_header_skin1.active:hover .header_utll .top_tel svg path{fill: #2E3C47;}
    .temp_header_skin1.active:hover .header_utll .top_tel svg circle {stroke: #bebebe;}
    .sub .temp_header_skin1:hover .rolling_logo svg path:not(:last-child){fill: #2E3C47 !important;}

    /* 
    .temp_header_skin1:hover .header_con .gnb_depth_1 > li > a{color: #ffffff;}
    .temp_header_skin1:hover .header_utll .phone_num a{color: #ffffff;} */

    .temp_header_skin1.scrollUp .hamburger_icon i{background: #001241;}
    .temp_header_skin1.scrollUp .header_utll .top_tel svg path{fill: #2E3C47;}
    .temp_header_skin1.scrollUp .header_utll .top_tel svg circle {stroke: #bebebe;}
    .temp_header_skin1.scrollUp .rolling_logo svg path:not(:last-child){fill: #2E3C47 !important;}
    .temp_header_skin1.scrollUp .header_con  {background-color: #fff;}
    .temp_header_skin1.scrollTop .header_con  {background-color: transparent; transition: all 0.5s;}
    .temp_header_skin1.scrollTop .hamburger_icon i{background: #fff;}
    .temp_header_skin1.scrollTop .header_utll .top_tel svg path{fill: #fff;}
    .temp_header_skin1.scrollTop .header_utll .top_tel svg circle {stroke: #fff;}
    .temp_header_skin1.scrollTop .rolling_logo svg path:not(:last-child){fill: #fff !important;}
    .temp_header_skin1.active.scrollTop .hamburger_icon i {background: #001241;}
    
}
@media screen and (max-width: 600px){
    .temp_header_skin1 .header_con{padding: 20px;}
    /* .temp_header_skin1 .rolling_logo .txt{width: 160px;}
    .temp_header_skin1 .rolling_logo .logo{width: 160px;} */
    .temp_header_skin1 .header_utll .open_bt{padding: 10px 20px;}
    .temp_header_skin1 .header_utll .open_bt p{font-size: 14px;}
}
@media screen and (max-width: 450px){
    .temp_header_skin1 .header_utll .open_bt{display: none;}
}

/********************************************* 
    서브 비주얼
*********************************************/
/* .sub_wrap{overflow: hidden;}
.sub_top_visual{width: 100%; height: 485px; position: relative; padding: 182px 0 0; z-index: 20; max-width: 1500px; margin: auto;}

.sub_top_visual .bg_motion{position: absolute; top: 0; right: 50%; transform: translateX(50%); width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all 1s; z-index:1000;}
.sub_top_visual .bg_motion .bkbg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; z-index: 1; transition: all 1s;}
.sub_top_visual .bg_motion::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;}
.sub_top_visual .bg_motion h2{color: #FFF; font-family: 'Outfit'; font-size: 100px; position: relative; z-index: 2; opacity: 0; filter: blur(10px); transition: 1s; letter-spacing: 20px;}
.sub_top_visual .bg_motion h2 strong{font-weight: 500;}

.sub_top_visual.ani1 .bg_motion h2{opacity: 1; filter: blur(0); letter-spacing: 0;}

.sub_top_visual.ani2 .bg_motion{width: 720px; height: 360px; border-radius: 20px; top: 182px; right: 0; transform: translateX(0%);}
.sub_top_visual.ani2 .bg_motion .bkbg{opacity: 1;}
.sub_top_visual.ani2 .bg_motion h2{opacity: 0; filter: blur(10px); transform: translateX(-100%);}  */

.sub_top_visual {
    position: relative;
    max-width: 1200px;
    margin:0 auto;
    padding-top:260px;
    height:230px;
    transition: all .3s;
    box-sizing: content-box;
    z-index: 50;
}
@media screen and (max-width: 1240px) {
    .sub_top_visual {
        padding-right: 5%;
    }
}
.sub_top_bg {width: 100%; height: 470px; overflow: hidden; display: block; top: 0; left: 0; position: absolute; margin: auto; animation: sub_top_bg 1.5s both ease-in-out; }
/* .sub_top_bg::after{content: ""; position: absolute; top: -55px; left: 0; right: 0; margin: auto; width: 1px; height: 0; background: #353F49; animation: sub_top_line 1s 1.5s both ease-in-out;} */
@keyframes sub_top_bg {
    0%{background-size: auto 150%;}
    100%{background-size: auto 100%;}
}
@media screen and (min-width: 1919px) {
    @keyframes sub_top_bg {
        0%{background-size: 150%;}
        100%{background-size: 100%;}
    }
}
@media screen and (max-width: 1024px) {
    @keyframes sub_top_bg {
        0%{background-size: 150%;}
        100%{background-size: 100%;}
    }
}
@media screen and (max-width: 420px) {
    @keyframes sub_top_bg {
        0%{background-size: auto 150%;}
        100%{background-size: auto 100%;}
    }
}

@keyframes sub_top_line {
    0%{height: 0;}
    100%{height: 110px;}
}
@font-face {
    font-family: 'URWClassico';
    src: url('../css/webfont/URWClassico-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.sub_top_visual h2 {position: relative; color:#353F49; font-size:74px; font-weight: normal; line-height:80px; font-family: 'URWClassico', sans-serif; text-align: right; margin-bottom: 15px;}
.sub_top_visual p{text-align: right; font-size: 26px; color: #353F49; font-weight: 500; font-family: 'Pretendard';}
.sub_top_visual .sub_visual_title {color: #fff; position: relative; z-index: 20; text-align: center;}
.sub_top_visual .sub_visual_title strong {
    font-weight: 500;
}


.sub_wrap_1 .sub_top_bg{background: url('../img/sub/sub_contact_1.webp') center center/cover no-repeat;}
.sub_wrap_2 .sub_top_bg{background: url('../img/sub/sub_contact_2.webp') center center/cover no-repeat;}
.sub_wrap_3 .sub_top_bg{background: url('../img/sub/sub_contact_3.webp') center center/cover no-repeat;}
.sub_wrap_4 .sub_top_bg{background: url('../img/sub/sub_contact_4.webp') center center/cover no-repeat;}
.sub_wrap_5 .sub_top_bg{background: url('../img/sub/sub_contact_5.webp') center center/cover no-repeat;}
.sub_wrap_6 .sub_top_bg{background: url('../img/sub/sub_contact_6.webp') center center/cover no-repeat;}



@media screen and (max-width: 1024px) {
    /* .sub_top_bg{height: 390px;} */
    .sub_top_visual {height: 240px; padding: 230px 20px 0;}
    .sub_top_visual h2 {padding: 0; font-size:40px; line-height: 50px; margin-bottom: 10px; text-align: center;}
    .sub_top_visual #page_location{justify-content: center;}
    .sub_top_visual p {text-align: center; font-weight: 400;}
}
@media screen and (max-width: 480px) {
    /* .sub_top_visual {height: 200px;} */
    .sub_top_visual p {font-size: 20px;}
}
@media screen and (max-width: 1024px) {
    .sub_wrap_1 .sub_top_bg{background: url('../img/sub/sub_contact_1_m.webp') center center/cover no-repeat;}
    .sub_wrap_2 .sub_top_bg{background: url('../img/sub/sub_contact_2_m.webp') center center/cover no-repeat;}
    .sub_wrap_3 .sub_top_bg{background: url('../img/sub/sub_contact_3_m.webp') center center/cover no-repeat;}
    .sub_wrap_4 .sub_top_bg{background: url('../img/sub/sub_contact_4_m.webp') center center/cover no-repeat;}
    .sub_wrap_5 .sub_top_bg{background: url('../img/sub/sub_contact_5_m.webp') center center/cover no-repeat;}
    .sub_wrap_6 .sub_top_bg{background: url('../img/sub/sub_contact_6_m.webp') center center/cover no-repeat;}
}
/* @media screen and (max-width: 1260px) {
    .sub_top_visual {padding-top: 140px; height:580px;}
    .sub_top_visual .bg_motion h2 {font-size:40px;}
    .sub_top_visual.ani2 .bg_motion{width: calc(100% - 32px); height: 310px; top: 270px; right: 16px;}
} */


/*********************************************
    브레드크럼 (Breadcrumbs) 네비게이션
    사용자의 현재위치 / 사이트 이동경로
*********************************************/
/* .page_location_nav {position: relative; width: 100%; opacity: 0; filter: blur(10px); transition: 1s 0.3s;}
.page_location_nav nav{display: flex; align-items: center; gap: 12px;}
.page_location_nav nav .home,
.page_location_nav nav .home a,
.page_location_nav nav .home a svg{display: block;}
.page_location_nav nav .line{width: 28px; height: 1px; background: #353F49;}
.page_location_nav nav .line:last-child{display: none;}
.page_location_nav dt{color: #353F49; font-family: 'Outfit'; font-size: 16px; font-weight: 400; position: relative; padding-right: 20px;}
.page_location_nav dd{color: #353F49; font-family: 'Outfit'; font-size: 16px; font-weight: 400; padding: 20px; position: absolute; background: #fff; transform: translateX(-20px) translateY(20px); border: 1px solid #353F49; display: none;}
.page_location_nav dd ul{display: flex; flex-direction: column; gap: 10px;}
.page_location_nav button{background: transparent; border: 0; position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; cursor: pointer;}
.page_location_nav button svg{position: relative; right: 0; top: 0;}
.page_location_nav .path-item.active button svg{transform: rotate(180deg);}
.page_location_nav h2{margin-top: 20px; color: #353F49; font-family: 'Outfit'; font-size: 100px;}
.page_location_nav h2 strong{font-weight: 500;}

@media screen and (max-width: 1260px) {
    .page_location_nav {padding:0 16px; z-index: 1001;}
    .page_location_nav h2 {font-size:40px;}
}


.sub_top_visual.ani2 .page_location_nav{opacity: 1; filter: blur(0);} */
.sub_top_visual #page_location{display: flex; align-items: center; justify-content: flex-start; gap: 10px; position: relative; top: 120px;}
.sub_top_visual #page_location span{width: 2px; height: 2px; border-radius: 2px; background: #353F49; display: block;}
.sub_top_visual #page_location li{font-size: 16px; letter-spacing: -0.5px; color: #353F49; font-weight: 300; font-family: 'pretendard';}

@media screen and (max-width:1240px) {
    .sub_top_visual #page_location {left: 3%;}
}
@media screen and (max-width:1024px) {
.sub_top_visual #page_location{top: 100px; left: 0; justify-content: center;}
}


.header_img {
    width: 40%;
    position: absolute;
    right: -3%;
    opacity: 0;
    bottom: 4%;
    transition: all 0.5s;
}
.header_img img {
    width: 100%;
}
.nav-open .header_img {
    right: 0;
    opacity: 1;
    transition: all 1s;
    transition-delay: 1s;
}
@media screen and (max-width:1024px) {
    .header_img {
        display: none;
    }
}









/* 푸터SNS */
#footer .f_inner_top .r-box .sns-utils ul li a {
    /* border-radius: 15px; */
}
#footer .f_inner_top .r-box .sns-utils ul li a.b-btn {
    background-image: url(../img/common/blog.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.b-btn:hover {
    background-image: url(../img/common/blog_on.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.y-btn {
    background-image: url(../img/common/youtube.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.y-btn:hover {
    background-image: url(../img/common/youtube_on.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.i-btn {
    background-image: url(../img/common/insta.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.i-btn:hover {
    background-image: url(../img/common/insta_on.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.p-btn {
    background-image: url(../img/common/plus.webp);
    background-size: contain;
}

#footer .f_inner_top .r-box .sns-utils ul li a.p-btn:hover {
    background-image: url(../img/common/plus_on.webp);
    background-size: contain;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background: #353F49;
    transform: translateY(100%);
    transition: transform 0.8s;
    z-index: 999;
    display: flex;
    flex-direction: row;
    padding: 3% 10%;
    /* margin-top:-4.8px; */
}
.sub #footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    /* height: unset; */
    height: 290px;
    overflow: hidden;
    background: #353F49;
    transition: all 0.8s;
    z-index: 999;
    transform: translateY(0);
    /* margin-top:-4.8px; */
}
#footer.on {
    transform: translateY(0);
    transition: all 0.8s;
}


#footer .f_inner_top {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    width: 20%;
}
#footer .f_inner_top .f_inner_top_left {
    display: flex;
    flex-wrap: wrap;
}
#footer .f_inner_top .f_inner_top_left p {
    font-size: min(1vw, 18px);
    /* font-size: 18px; */
    word-break: keep-all;
    text-indent: -43px;
    margin-left: 45px;
    color: #fff;
    font-weight: 300;
    font-family: 'Pretendard';
}
#footer .f_inner_top .f_inner_top_left p:last-child {
    margin-top: 7%;
    display: flex;
    align-items: center;
}
#footer .f_inner_top .f_inner_top_left p:last-child img {
    width: auto;
    height: 16px;
    margin-left: 3px;
}
#footer .f_inner_top .f_inner_top_right p {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    font-family: 'Pretendard';
}
#footer .f_inner_top .f_inner_top_right p b {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    font-family: 'Outfit';
}

#footer .f-inner {
    /* width: 1140px; */
    margin: 0 auto;
    padding: 0;
    width: 80%;
}

#footer .f-inner:after {
    display: block;
    content: '';
    clear: both;
}

#footer .f_inner_top .r-box {
    float: right;
    text-align: right;
}


#footer .f_inner_top .r-box .sns-utils {
    margin: 30% 0 0;;
}

#footer .f_inner_top .r-box .sns-utils ul {
    display: inline-block;
}

#footer .f_inner_top .r-box .sns-utils ul li {
    float: left;
    margin: 0 0 0 8px;
}

#footer .f_inner_top .r-box .sns-utils ul li:first-child {
    margin: 0;
}

#footer .f_inner_top .r-box .sns-utils ul li a {
    display: block;
    width: 34px;
    height: 34px;
    background-repeat: no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    text-indent: -9999em;
    transition: background .3s;
}

#footer .f_inner_top .r-box .kolong-logo {
    margin: 58px 0 0;
    text-align: right;
}

#footer .f_inner_top .r-box .kolong-logo a {
    display: inline-block;
}

#footer .f_inner_top .r-box .kolong-logo a img {
    width: 90px;
}

#footer .f-inner .l-box {
    float: left;
    width: 95%;
}

#footer .f-inner .l-box .f-menu {padding-left: 12%;}

#footer .f-inner .l-box .f-menu ul {
    overflow: hidden;
}

#footer .f-inner .l-box .f-menu ul li {
    float: left;
    position: relative;
    margin: 0 0 0 10px;
}

#footer .f-inner .l-box .f-menu ul li:first-child {
    margin: 0;
}

#footer .f-inner .l-box .f-menu ul li:before {
    display: block;
    content: '';
    position: absolute;
    top: 8px;
    left: -21px;
    width: 1px;
    height: 13px;
}

#footer .f-inner .l-box .f-menu ul li:first-child:before {
    display: none;
}

#footer .f-inner .l-box .f-menu ul li a {
    display: inline-block;
    font-size: 14px;
    line-height: 27px;
    color: #dddddd;
}

#footer .f-inner .l-box .f-info {
    position: relative;
    margin: 12px 0 0;
    padding: 0 0 0 12%;
}

#footer .f-inner .l-box .f-info .f-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 83px;
    margin: -33px 0 0;
}

#footer .f-inner .l-box .f-info .f-logo img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

#footer .f-inner .l-box .f-info .info-box {
    word-break: keep-all;
}

#footer .f-inner .l-box .f-info .info-box>div {
    font-family: 'Pretendard';
    font-size: 14px;
    line-height: 20px;
    color: #D0D0D0;
}

#footer .f-inner .l-box .f-info .info-box>div .br {
    display: none;
}
#footer .f-inner .l-box .f-info .info-box .ori {
    margin-top: 12px;
}

#footer .top-trg {
    position: fixed;
    bottom: -9999px;
    right: 50%;
    z-index: 99;
    width: 50px;
    height: 50px;
    margin: 0 -655px 0 0;
    opacity: 0;
    transition: opacity .3s;
}

#footer .top-trg.on {
    bottom: 79px;
    opacity: 1;
}

#footer .top-trg.fixed {
    position: absolute;
    top: -85px;
}

#footer .top-trg>img {
    width: 100%;
    height: 100%;
}
#footer .f-logo.mo_only {
    display: none;
}
@media screen and (max-width: 1390px) {
    #footer,
    .sub #footer {
        height: 340px;
        padding: 3% 5%;
    }
    #footer .f-inner .l-box .f-info .f-logo img {
        width: 80%;
        height: auto;
    }
}
@media screen and (max-width: 1024px) {
    #footer {
        position: relative;
    }
    #footer .top_btn {
        position: absolute;
        top: 20px;
        right: 33px;
}
@media screen and (max-width: 1000px) {
    #footer .f-inner .l-box .f-info .f-logo img {
        width: 70%;
    }
}
@media screen and (max-width: 834px) {
    #footer {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 95vw;
        transform: translateY(100%);
        overflow: hidden;
        background: #353F49;
        transition: all 0.8s;
        z-index: 999;
        display: flex;
        flex-direction: column;
    }
    #footer .f-logo {order:0;}
    #footer .f_inner_top {order:1;}
    #footer .f-inner {order:2;}
    .sub #footer {
        position: absolute;
        left: 0;
        bottom: auto !important;
        width: 100%;
        height: 90vw;
        /* height: unset; */
        overflow: hidden;
        background: #353F49;
        transition: all 0.8s;
        z-index: 999;
        /* margin-top:-4.8px; */
    }
    #footer .f-inner {
        /* width: 750px; */
        width: 100%;
        padding: 30px 20px;
        margin-top: -9px;
    }

    #footer .f-inner .r-box {
        overflow: hidden;
        float: none;
        display: flex;
        justify-content: center;
    }
    #footer .f-inner .r-box .cs-trg {
        float: left;
        padding: 0 0 0 40px;
        background-size: 29px;
        font-size: 30px;
        line-height: 45px;
    }
    #footer .f-inner .r-box .sns-utils {
        margin: 0;
        width: 31%;
    }
    #footer .f-inner .r-box .sns-utils ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #footer .f-inner .r-box .sns-utils ul li {
        margin: 0 0 0 2vw;
    }
    #footer .f-inner .r-box .sns-utils ul li a {
        width: 4vw;
        height: 4vw;
        border-radius: 45%;
    }
    #footer .f-inner .r-box .kolong-logo {
        float: right;
        margin: 0;
    }
    #footer .f-inner .r-box .kolong-logo a {
        padding: 16px 0;
    }
    #footer .f-inner .r-box .kolong-logo a img {
        width: 135px;
    }
    #footer .f-inner .l-box {
        float: none;
        margin: 10px 0 0;
        padding: 10px 0 0;
        width: 100%;
    }
    #footer .f-inner .l-box .f-menu {
        text-align: center;
        padding-left: 0;
    }
    #footer .f-inner .l-box .f-menu ul {
        display: inline-block;
    }
    #footer .f-inner .l-box .f-menu ul li {
        margin: 0 0 0 20px;
    }
    #footer .f-inner .l-box .f-menu ul li a {
        font-size: 2vw;
        line-height: 35px;
        font-weight: bold;
    }
    #footer .f-inner .l-box .f-menu ul li:before {
        width: 2px;
        height: 15px;
        background: #4e5a66;
        left: -10px;
        display: none;
    }
    #footer .f-inner .l-box .f-info {
        margin: 10px 0 0;
        padding: 0;
        text-align: center;
    }
    /* #footer .f-inner .l-box .f-info .f-logo {
            width: 12vw;
            height: 12vw;
            margin: -8vw 0 0;
            top:70%;
        } */
    #footer .f-inner .l-box .f-info .f-logo {
        display: none;
    }
    #footer .f-inner .l-box .f-info .info-box>div {
        font-size: 2vw;
        line-height: 3vw;
        letter-spacing: -1px;
        font-weight: 500;
        word-break: keep-all;
    }
    #footer .f-inner .l-box .f-info .info-box>.ori {
        margin-top: 3vw;
    }
    #footer .f-inner .l-box .f-info .info-box>div .br {
        display: block;
    }
    #footer .f-inner .l-box .f-info .info-box>div img {
        width: 16vw;
    }
    #footer .top-trg {
        right: 0;
        width: 100px;
        height: 100px;
        margin: 0;
    }
    #footer .top-trg.fixed {
        position: absolute;
        top: -100px;
    }
    #footer .f-logo.mo_only {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6% 0;
    }
    #footer .f-logo.mo_only img {
        width: 10%;
    }
    #footer .f_inner_top {
        flex-direction: column;
        align-items: center;
        padding: 0;
        border-bottom: none;
        width: 100%;
    }
    #footer .f_inner_top .f_inner_top_left {
        width: 100%;
        justify-content: center;
        text-align: center;
        word-break: keep-all;
        flex-direction: column;
    }
    #footer .f_inner_top .f_inner_top_left img {
        width: 100%;
    }
    #footer .f_inner_top .f_inner_top_left p {
        font-size: clamp(10px, 4vw, 20px);
    }
    #footer .f_inner_top .f_inner_top_left p:last-child {
        margin-top: 2%;
        display: block;
    }
    #footer .f_inner_top .r-box .sns-utils {
        margin: 0;;
    }
    #footer .f_inner_top .f_inner_top_right {
        width: 65%;
        text-align: center;
        padding: 2% 0;
    }
    #footer .f_inner_top .f_inner_top_right p,
    #footer .f_inner_top .f_inner_top_right p b {
        font-size: min(18px,4vw);
    }
}

@media screen and (max-height: 700px) {
    #footer,
    .sub #footer {
        margin-top: -10px;
    }
}
@media screen and (max-width: 674px) {
    #footer,
    .sub #footer {
        height: 120vw;
    }
    #footer .f-inner {
        padding: 10px 20px;
    }
    #footer .f-logo.mo_only img {
        width: 15%;
    }
    #footer .f-inner .l-box {
        padding: 20px 0 0;
    }
    #footer .f-inner .l-box .f-menu ul li a {
        font-size: 2.5vw;
    }
    #footer .f_inner_top .f_inner_top_left {
        width: 90%;
    }
    #footer .f_inner_top .f_inner_top_right p,
    #footer .f_inner_top .f_inner_top_right p b {
        font-size: min(19px, 4vw);
    }
    #footer .f-inner .r-box .sns-utils {
        width: 45%;
    }
    #footer .f-inner .r-box .sns-utils ul li a {
        width: 8vw;
        height: 8vw;
    }
    #footer .f-inner .l-box .f-info {
        margin: 0;
    }
    #footer .f-inner .l-box .f-info .info-box>div {
        font-size: 2.5vw;
        line-height: 4.5vw;
        font-weight: 300;
    }
}
@media screen and (max-width: 500px) {
    #footer,
    .sub #footer {
        height: 140vw;
    }
    #footer .f_inner_top .f_inner_top_left p {
        font-size: 15px;
    }
    #footer .f-inner .l-box .f-info .info-box>div { 
        font-size: 3vw;
        line-height: 5vw;
    }
}



/* 서브네비게이션 */

.sub_navigation {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    margin: 0 auto;
    padding: 20px 30px;
    border-radius: 10px;
    background: rgba(42, 50, 58, 0.50);
    backdrop-filter: blur(5px);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.sub_navigation ul {
    display: flex;
    gap: 30px;
}

.sub_navigation ul a {
    color: #FFF;
    text-align: center;
    font-family: SUIT;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.32px;
}

.sub_navigation .active a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sub_navigation.active {
    opacity: 1;
    visibility: visible;
}


@media screen and (max-width: 1024px) {
    .sub_navigation {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
        text-align: center;
    }

    .sub_navigation ul {
        justify-content: center;
    }
}