@charset "utf-8";

/*header 기본*/

    /*기본 레이아웃*/
    .header { width: 100%; height: auto; position: fixed; z-index: 100; }
    .header .header-wrap { height: 100px; box-sizing: border-box; transition: all .3s ease-in-out; }
    .header .header-wrap::before { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #c1c1c1; transition: all .2s ease-in-out; opacity: 0; }
    .h-inner { width: 94%; max-width: 1720px; height: 100%; padding-top: 36px; position: relative; margin: 0 auto; } 

    /* logo */
    .header .header-wrap .logo { width: 163px; height: 40px; float: left; }
    .header .header-wrap .logo img { width: 100%; height: 100%; object-fit: contain; }
    .header .header-wrap .logo img.logo_b { display: none; }
    
    /* 헤더 호버 시 배경색이 바뀌지 않을 경우의 로고 (주석 풀어서 사용) */
    .header .header-wrap.on .logo img.logo_b { display: none; }
    .header .header-wrap.on .logo img.logo_w { display: block; }
    
    /* ---------------------------------------------------------------------------------------------------------------------------------------------- */

    /* 유틸 아이콘 옵션 s*/
    .opt-menu { float: right; }
    .act-vs { display: block !important; } /*필요없는 버튼에서 act-vs 클래스 삭제*/

    /*언어*/
    .opt-menu .lang { display: none; margin-right: 20px; float: left; }
    .opt-menu .lang a { display: block; padding: 8px 17px; font-weight: 300; color: #fff; font-size: 14px; border: 1px solid #fff; border-radius: 50px; }
    .opt-menu .lang a:hover,
    .opt-menu .lang.on a { border-color: var(--key-color); background-color: var(--key-color); }


    /* sns세트 */
    .opt-menu .sns-set { display: none; float: left; } /*통채로 필요없으면 여기 act-vs 클래스 삭제 / sns 개별사용시 해당하는 아이콘만 남기고 act-vs 클래스 삭제*/
    .opt-menu .sns a { display: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; text-indent: -99999px; margin-right: 5px; }
    
    .sns-set .sns a.ytb { background: url('/resources/img/common/sns_icon_ytb_w.png') no-repeat center/100%; }
    .sns-set .sns a.blog { background: url('/resources/img/common/sns_icon_blog_w.png') no-repeat center/100%; }
    .sns-set .sns a.insta { background: url('/resources/img/common/sns_icon_insta_w.png') no-repeat center/100%; }
    .sns-set .sns a.twt { background: url('/resources/img/common/sns_icon_twt_w.png') no-repeat center/100%; }
    .sns-set .sns a.fcbk { background: url('/resources/img/common/sns_icon_fcbk_w.png') no-repeat center/100%; }
    .sns-set .sns a.kkt { background: url('/resources/img/common/sns_icon_kkt_w.png') no-repeat center/100%; }

    .sns-set .sns a.ytb:hover,
    .sns-set.color-set .sns a.ytb { background: url('/resources/img/common/sns_icon_ytb.png') no-repeat center/100%; }
    .sns-set .sns a.blog:hover,
    .sns-set.color-set .sns a.blog { background: url('/resources/img/common/sns_icon_blog.png') no-repeat center/100%; }
    .sns-set .sns a.insta:hover,
    .sns-set.color-set .sns a.insta { background: url('/resources/img/common/sns_icon_insta.png') no-repeat center/100%; }
    .sns-set .sns a.twt:hover,
    .sns-set.color-set .sns a.twt { background: url('/resources/img/common/sns_icon_twt.png') no-repeat center/100%; }
    .sns-set .sns a.fcbk:hover,
    .sns-set.color-set .sns a.fcbk { background: url('/resources/img/common/sns_icon_fcbk.png') no-repeat center/100%; }
    .sns-set .sns a.kkt:hover,
    .sns-set.color-set .sns a.kkt { background: url('/resources/img/common/sns_icon_kkt.png') no-repeat center/100%; }


    /* 로그인 회원가입 세트*/
    .head-icons { display: none; margin-left: 20px; float: right; }
    .head-icons a { display: inline-block; width: 32px; height: 32px; text-indent: -99999px; float: left; margin-left: 8px; box-sizing: border-box; transition: all .2s ease; }
    
    /* 로그인 */
    .head-icons a.login_btn { background: url("/resources/img/common/main_login.png") no-repeat center/18px; }
    .header-wrap .head-icons.on a.login_btn { background: url("/resources/img/common/main_login_active.png") no-repeat center/18px; }
    .head-icons a.login_btn:hover,
    .header-wrap .head-icons.on a.login_btn:hover { background: url("/resources/img/common/main_login_hover.png") no-repeat center/18px; }

    /* 회원가입 */
    .head-icons a.join_btn { background: url("/resources/img/common/main_mypage.png") no-repeat center/23px; }
    .header-wrap .head-icons.on a.join_btn { background: url("/resources/img/common/main_mypage_active.png") no-repeat center/23px; }
    .head-icons a.join_btn:hover,
    .header-wrap .head-icons.on a.join_btn:hover { background: url("/resources/img/common/main_mypage_hover.png") no-repeat center/23px; }

    /* 로그아웃 */
    .head-icons a.logout_btn { background: url("/resources/img/common/main_logout.png") no-repeat center/19px; }
    .header-wrap .head-icons.on a.logout_btn { background: url("/resources/img/common/main_logout_active.png") no-repeat center/19px; }
    .head-icons a.logout_btn:hover,
    .header-wrap .head-icons.on a.logout_btn:hover { background: url("/resources/img/common/main_logout_hover.png") no-repeat center/19px; }
    
    /* 마이페이지 */
    .head-icons a.mypage_btn { background: url("/resources/img/common/main_in_mypage.png") no-repeat center/21px; }
    .header-wrap .head-icons.on a.mypage_btn { background: url("/resources/img/common/main_in_mypage_active.png") no-repeat center/21px; }
    .head-icons a.mypage_btn:hover,
    .header-wrap .head-icons.on a.mypage_btn:hover { background: url("/resources/img/common/main_in_mypage_hover.png") no-repeat center/21px; }
    /* 유틸 아이콘 옵션 e */

    /* 카카오톡 상담 */
    .header .opt-menu { position: relative; right: 54px; }
    .sub .header .opt-menu { position: relative; right: 0; }
    .header .kkt-inq { margin: 3px 0 0 auto; }
    .header .kkt-inq a { display: inline-block; padding: 8px 16px 8px 40px; border-radius: 30px; border: 1px solid rgba(255,255,255,1); font: 500 13px/14px var(--font-family); color: #fff; position: relative; transition: all 0.3s ease; }
    .header .kkt-inq a::before { content: ''; width: 16px; height: 14px; background: url('/resources/img/common/hd_ico_kakao_wt.png') no-repeat left top/16px; position: absolute; left: 16px; top: 8px; z-index: 3; transition: all 0.3s ease; }
    .header .kkt-inq a::after { content: ''; width: 0; height: 100%; border-radius: 30px; background-color: #FEDC00; position: absolute; left: 0; top: 0; z-index: 0; transition: all 0.3s ease; }
    .header .kkt-inq a span { display: inline-block; position: relative; z-index: 3; }




/*header 기본 e*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* 햄버튼 스타일 s */
    /* ham-btn */
    .hd-ham-btn.ham-btn { width: 48px; height: 48px; padding: 9px; position: fixed; top: 32px; transition: all .3s ease-in-out; z-index: 500; cursor: pointer; box-sizing: border-box; opacity: 1; }
    .hd-ham-btn.ham-btn p { width: 30px; height: 30px; border-radius: 50%; background-color: #fff; position: relative;  box-sizing: border-box; }
    .hd-ham-btn.ham-btn p span { transition: all .3s ease-in-out; position: absolute; background-color: var(--main-black); }
    .hd-ham-btn.ham-btn.on p span { background-color: var(--main-black); }


    /* 햄버거 */
    .ham-btn.ham-line p span { display: block; height: 2px; border-radius: 2px; }
    .ham-btn.ham-line p span.hb01 { width: 16px; top: 9px; left: calc(50% - 8px);  }
    .ham-btn.ham-line p span.hb02 { width: 16px; top: calc(50% - 1px); left: calc(50% - 8px); }
    .ham-btn.ham-line p span.hb03 { width: 16px; bottom: 9px; left: calc(50% - 8px); }
    .ham-btn.ham-line p span.hb04 { display: none; }


    /* 모바일메뉴 활성화시 햄버튼 */
    .mob_gnb .ham-btn { z-index: 9999; } 
    .mob_gnb .ham-btn.active { position: absolute; }
    .hd-ham-btn.ham-btn.active { opacity: 0; }

    .mob_gnb .ham-btn.active { width: 48px; height: 48px; background-color: var(--sub-color-grn); border-radius: 50%; right: 0; top: 0; }
    .mob_gnb .ham-btn.active a { display: block; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .mob_gnb .ham-btn.active span { display: block; width: 24px; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; }
    .mob_gnb .ham-btn.active span.hb01 { transform: translate(-50%, -50%) rotate(45deg); }
    .mob_gnb .ham-btn.active span.hb02 { transform: translate(-50%, -50%) rotate(135deg); }


    /* 스크롤 시 햄버튼 */
    .hd-ham-btn.ham-btn.scroll p { background-color: var(--main-black); }
    .hd-ham-btn.ham-btn.scroll p span  { background: #fff; }
    .sub .hd-ham-btn.ham-btn p { background-color: var(--main-black); }
    .sub .hd-ham-btn.ham-btn p span  { background: #fff; }

    @media screen and (max-width:1280px){
        .hd-ham-btn.ham-btn { top: 27px; }
    }
    @media screen and (max-width:1130px){
        .hd-ham-btn.ham-btn { top: 18px; }
    }
    @media screen and (max-width:768px){
        .hd-ham-btn.ham-btn { top: 17px; }
    }
    @media screen and (max-width:480px){
        .hd-ham-btn.ham-btn { top: 10px; }
        .hd-ham-btn.ham-btn p { width: 32px; height: 32px; }
    }
/* 햄버튼 스타일 e */

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* gnb s*/ 
    /* 기본 레이아웃 */
    .gnb_wrap { width: max-content; float: left; position: relative; left: calc(50% - 163px); transform: translateX(-50%); }
    .gnb_wrap > .gnb > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; -webkit-box-lines: single; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .gnb_wrap > .gnb > ul > li { display: inline-block; position: relative; vertical-align: top; }
    .gnb_wrap > .gnb > ul > li > a { display: inline-block; text-align: center; font: var(--gnb-dep1); color: #fff; padding: 10px 30px 34px; margin: 0 25px; }

    .gnb_wrap .img_wrap { display: none; }

    /*onedrop s--------------------------*/
    .gnb_wrap.onedrop > .gnb > ul > li { display: inline-block; position: relative; text-align: center; z-index: 0; box-sizing: border-box; transition: all 0.2s ease-in-out; position: relative; }
    .gnb_wrap.onedrop > .gnb > ul > li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background-color: var(--sub-color-grn); position: absolute; left: calc(50% - 6px); top: 58px; opacity: 0; z-index: 5; transition: opacity 0.3s ease; transition-delay: 0.2s; }
    .gnb_wrap.onedrop > .gnb > ul > li.on::before { opacity: 1; }
    .gnb_wrap.onedrop > .gnb > ul > li:hover > a { color: #fff; }
    .gnb_wrap.onedrop > .gnb > ul > li:hover > a::before,
    .gnb_wrap.onedrop > .gnb > ul > li:focus > a::before { opacity: 0; }

    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth { width: max-content; min-width: 160px; background: var(--main-black); border-radius: 16px; padding: 30px 32px; box-shadow: 2px 3px 8px rgba(0,0,0,0.25); position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: -1; display: none; }
    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth > li + li { margin-top: 25px; }
    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth > li > a { display: block; width: 100%; font: var(--gnb-dep2); color: #fff; opacity: 0.8; transition: all .2s ease-in-out; position: relative; }
    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth > li > a:hover { opacity: 1; }
    /*onedrop e--------------------------*/
/* gnb e*/ 

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* quick S */
.quick { width: 60px; height: 60px; position: fixed; right: 50px; bottom: 100px; z-index: 300; opacity: 0; transform: scale(0); transition: all 0.4s ease; }
.quick.scroll { opacity: 1; transform: scale(1); }
.quick .kkt-inq { width: 100%; height: 100%; border-radius: 50%; box-shadow: 2px 3px 6px rgba(0,0,0,0.25); background-color: #FFE900; overflow: hidden; }
.quick .kkt-inq > a { display: block; width: 100%; height: 100%; position: relative; }
.quick .kkt-inq > a .img { display: block; width: 100%; height: 100%; background: url('/resources/img/common/hd_ico_kakao_br.png') no-repeat center/32px 31px; transition: all 0.3s ease-in-out; }
.quick .kkt-inq > a .txt { display: block; width: 100%; height: 100%; padding: 18px 6px 14px; font: 500 13px/110% var(--font-family); color: var(--main-black); text-align: center; transition: all 0.3s ease-in-out; }

#container:has(.inquiry.aos-animate) .quick { bottom:100px; }
#container:has(.fixed-inquiry.close) .quick { bottom:100px; }
.quick:has(.go-inq) { bottom:30px !important; }
.quick .go-inq { display: none; }
.quick .go-inq { width: 100%; height: 100%; border-radius: 50%; box-shadow: 2px 3px 6px rgba(0,0,0,0.25); background-color: #CEDF88; overflow: hidden; }
.quick .go-inq > a { display: block; width: 100%; height: 100%; position: relative; }
.quick .go-inq > a .img { display: block; width: 100%; height: 100%; background: url('/resources/img/common/hd_ico_inquiry_br.png') no-repeat center/30px; transition: all 0.3s ease-in-out; }
.quick .go-inq > a .txt { display: block; width: 100%; height: 100%; padding: 18px 6px 14px; font: 500 13px/110% var(--font-family); color: white; text-align: center; transition: all 0.3s ease-in-out; }

.quick.mob-tel { justify-content: center; align-items: center; width: 100%; height: 64px; right: auto; background-color: var(--main-color); left: 0; bottom: 0 !important; display: none; }
.quick.mob-tel a { display: block; font: 600 20px / 100% var(--font-family); color: #fff; padding-left: 28px; position: relative; }
.quick.mob-tel a::before { content: ''; width: 20px; height: 20px; background: url('/resources/img/main/location_ico2.svg') no-repeat center/contain; mix-blend-mode: screen; position: absolute; left: 0; top: 0; }

/* quick E */

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* 스크롤 탑이 메인 비주얼 지나면 헤더 변경 & 서브 s */
    .scroll .header-wrap { background-color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); }
    .header.scroll .gnb_wrap > .gnb > ul > li > a { color: var(--main-black); }
    
    .sub .header .header-wrap .h-inner { max-width: 1600px; }
    .sub .header .gnb_wrap > .gnb > ul > li > a { color: var(--main-black); }

    /* 스크롤 시 배경색이 바뀌지 않을 경우의 로고 */
    .scroll .header-wrap .logo img.logo_b { display: block; }
    .scroll .header-wrap .logo img.logo_w { display: none; }
    .header.scroll .header-wrap.on .logo img.logo_b { display: block; }
    .header.scroll .header-wrap.on .logo img.logo_w { display: none; }

    .sub .header-wrap .logo img.logo_b { display: block; }
    .sub .header-wrap .logo img.logo_w { display: none; }
    .sub .header .header-wrap.on .logo img.logo_b { display: block; }
    .sub .header .header-wrap.on .logo img.logo_w { display: none; }

    /* 옵션 아이콘  */
    .header.scroll .kkt-inq a { border: 1px solid rgba(255,255,255,0); color: var(--main-black); }
    .header.scroll .kkt-inq a::before { background-position: left bottom; }
    .header.scroll .kkt-inq a::after { width: 100%; }

    .sub .header .kkt-inq a { border: 1px solid rgba(255,255,255,0); color: var(--main-black); }
    .sub .header .kkt-inq a::before { background-position: left bottom; }
    .sub .header .kkt-inq a::after { width: 100%; }
/*스크롤 탑이 메인 비주얼 지나면 헤더 변경 e*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* 모바일메뉴 공통 기본 s*/
.mobile_menu { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; box-sizing: border-box; overflow: hidden; display: none; background: transparent; z-index: 350; }
.mobile_menu::after { content: ''; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; opacity: 0; transition: all 0.5s linear;  z-index: -1; }
.mobile_menu.mobileOn::after { opacity: 1; }

.top_box .head-icons { margin-left: 0; }

.mob_gnb .gnb > ul > li .two-depth-wrap .img_wrap { display: none; }
.mobile_menu.mb-mode .gnb > ul > li > .two-depth-wrap .two_depth { display: none; }

.mobile_menu .nav-eng { display: none; }
.mobile_menu.eng-on .nav { display: none; }
.mobile_menu.eng-on .nav-eng { display: block; }
/* 모바일메뉴 공통 기본 e*/



/* 호버모음 */
@media (hover: hover) {
    /* 카카오톡 상담 */
    .header .kkt-inq a:hover { border: 1px solid rgba(255,255,255,0); color: var(--main-black); }
    .header .kkt-inq a:hover::before { background-position: left bottom; }
    .header .kkt-inq a:hover::after { width: 100%; }

    /* 퀵 - 카카오톡 상담 */
    .quick .kkt-inq > a:hover .img { transform: translateY(-100%); }
    .quick .kkt-inq > a:hover .txt { transform: translateY(-100%); } 

    .quick .go-inq > a:hover .img { transform: translateY(-100%); }
    .quick .go-inq > a:hover .txt { transform: translateY(-100%); } 
}


/* 반응형 */
@media screen and (max-width:1630px){
    .opt-menu {position: relative; right: 48px; }
    .sub .header .opt-menu { right: 48px; }
    .quick { bottom:290px; }
}
@media screen and (max-width:1440px){
    .gnb_wrap > .gnb > ul > li > a { font-size: 19px; padding: 10px 25px 34px; margin: 0 20px; }
    
    .quick { right: 3%; }
}
@media screen and (max-width:1280px){
    .h-inner { padding-top: 24px; }
    .gnb_wrap { padding-top: 3px; }
    .gnb_wrap > .gnb > ul > li > a { font-size: 18px; padding: 13px 25px 25px; }
    .header .kkt-inq { margin-top: 10px; }
}
@media screen and (max-width:1200px){
    .quick { bottom:260px; }
}
@media screen and (max-width:1130px){
    .header .header-wrap { height: 86px; }
    .header .header-wrap .logo { width: 144px; height: 36px; }
    .gnb_wrap { display: none; }
    .header .kkt-inq { margin-top: 2px; }
}
@media screen and (max-width:1024px){
    /* header */
    .header .header-wrap { height: 80px; }
    .header .header-wrap .h-inner { padding: 24px 0; }
    .header .header-wrap .logo { height: 32px; }
    .header .opt-menu { margin-right: 0; position: relative; right: 54px; }
    .header .kkt-inq { margin-right: 0; }
    .header .kkt-inq a { padding: 7px 14px 7px 38px; }
    .header .kkt-inq a::before { top: 7px; }
    
    /* 스크롤 */
    .scroll .header-wrap { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: unset; }

    .quick { bottom:290px; }
}
@media screen and (max-width:768px){
    .quick { bottom:100px; }
    .quick .go-inq { display: block; }
}
@media screen and (max-width:640px){
    .header .header-wrap { height: 72px; }

    .head-icons { display: none; }
    .mobile_menu .gnb > ul > li > ul { display: none; }

    .header .kkt-inq a { padding: 7px 14px 7px 34px; }
    .header .kkt-inq a::before { left: 13px; }

    .quick { width: 50px; height: 50px; }
    .quick.mob-tel { display: flex; }
    .quick:has(.kkt-inq) { bottom: 130px !important; }
    .quick:has(.go-inq) { bottom: 70px !important; }
    .quick .kkt-inq > a .img { background-size: 28px 27px; }
    .quick .go-inq > a .img { background-size: 26px; }
}
@media screen and (max-width:480px){
    .header .header-wrap .h-inner { padding: 18px 0; }
    .header .kkt-inq { margin-top: 0; }
    .header .kkt-inq a { padding: 10px 14px 9px 36px; line-height: 12px; }
    .header .kkt-inq a::before { left: 12px; top: 10px; }
}