@charset "utf-8";

/*전체 메뉴 시 컨텐츠 쪽 스크롤 방지*/
html.noneScroll, body.noneScroll  { overflow: hidden; }

/*header 기본*/
    /* logo */
    .header .logo { width: 200px; float: left; margin-right: 3%; position: relative; top:2%;}
    .header .logo img { width: 100%; }
    .header .logo img.logo_b { display: none; }
    .header .head:hover .logo img.logo_b { display: inline; }
    .header .head:hover .logo img.logo_w { display: none; }

    /* 전화걸기 */
    .call-ico { width: 300px; height: 120px; background-color: #222; color: #fff; position: absolute; top: 0; right: 0; }
    .call-ico a { display: block; font-size: 22px; font-weight: 700; color:#fff; line-height: 120px; position: relative; padding-left: 60px; text-align: center; }
    .call-ico a::before { content: ''; width: 40px; height: 40px; background: url('/resources/img/main/ico-call02.png') no-repeat center/cover; position: absolute; top: 50%; left: 40px; transform: translateY(-50%);}
/*header 기본 e*/


/* 햄버튼 스타일 s */
    /* ham-btn */
    .ham-btn { width: 100px; height: 90px; position: absolute; top: 0; right: 2%; transition: all .3s ease-in-out; z-index: 200; cursor: pointer; box-sizing: border-box; display: none; }
    .ham-btn a { display: block; width: 30px; height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .ham-btn p { position: relative; width: 100%; height: 100%; box-sizing: border-box; }

    /* 햄버거 */
    .ham-btn.ham-line p span { display: block; height: 4px; position: absolute; background-color: #fff;  }
    .ham-btn.ham-line p span.hb01 { width: 100%; top: 0; right: 0; transition: all .3s ease-in-out; }
    .ham-btn.ham-line p span.hb02 { width: 100%; top: 11px; right: 0; transition: all .3s ease-in-out; }
    .ham-btn.ham-line p span.hb03 { width: 100%; bottom: 0; right: 0; transition: all .3s ease-in-out; }
    .ham-btn.ham-line p span.hb04 { display: none; }

    /* 모바일메뉴 활성화시 햄버튼 */
    .mob_gnb .ham-btn {z-index: 200;} 
    .ham-btn.active { position: fixed; }

    .ham-btn.active { width: 100px; height: 90px; top: 0; right: 2%; }
    .ham-btn.active a { display: block; width: 30px; height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .ham-btn.active p span { display: block; width: 100%; height: 3px; position: absolute; background-color: #fff; }
    .ham-btn.active p span.hb01 { -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); top: 5px;}
    .ham-btn.active p span.hb02 { opacity: 0; }
    .ham-btn.active p span.hb03 { -webkit-transform: translateY(-7px) rotate(45deg); transform: translateY(-7px) rotate(45deg); bottom: 5px; }
    .ham-btn.active span.hb04 { opacity: 0; }
/* 햄버튼 스타일 e */


/* gnb */ 

    /*공통*/
    .header { width: 100%; height: 120px; position: fixed; z-index: 100; top: 0; left: 0; }
    .h_inner { width: 92%; max-width: 1560px; height: 100%; position: relative; margin: 0 auto; } 
    .header .head { height: 120px; overflow: hidden; padding-top: 30px; box-sizing: border-box; transition: all .3s ease-in-out; background-color: rgba(0,0,0,0); }
    .header .head.on { overflow: initial; }

    .gnb_wrap { width: fit-content; float: right; text-align: center; margin-right: 230px; }
    .gnb_wrap > .gnb { height: 58px; overflow: hidden; }
    .gnb_wrap:hover > .gnb { overflow: inherit; }
    .gnb_wrap > .gnb > ul > li > a { display: inline-block; height: 100%; text-align: center; font-weight: 500; color: #222; font-size: 16px; padding: 25px 0; position: relative; }
    .gnb_wrap > .gnb > ul > li > a::before { content: ""; width: 100%; height: 3px; background: #B93535; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.25s ease; }
    .gnb_wrap > .gnb > ul > li:hover > a::before { opacity: 1; }
    .gnb_wrap .img_wrap { display: none; }
    .gnb_wrap > .gnb > ul ul > li > a { transition:.3s ease; font-size: 16px; color:#fff; }

    /*onedrop s--------------------------*/
    .gnb_wrap.onedrop > .gnb > ul > li { display: inline-block; width: max-content; position: relative; text-align: center; z-index: 0; box-sizing: border-box; transition: all 0.2s ease-in-out; padding: 0 30px; }
    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth { display: none; }
    /*onedrop e--------------------------*/


/* 스크롤 */
    /* 스크롤 탑이 메인 비주얼 지나면 헤더 변경 s */
.header.scroll {box-shadow: 3px 3px 8px rgba(0,0,0,0.20);}
    /*스크롤 탑이 메인 비주얼 지나면 헤더 변경 e*/



@media screen and (max-width:1650px){
    .gnb_wrap {margin-right: 250px;}
    .gnb_wrap.onedrop > .gnb > ul > li {padding:0 22px;}
    .header .right_wrap { right: 120px; }
}

@media screen and (max-width:1500px){
    .header .sns { display: none; }
    .header .right_wrap { right: 80px; }

    .head_icons { right: 92px; }
}
@media screen and (max-width:1400px){
    .call-ico {width:250px;}
    .call-ico a {padding-left: 40px; font-size: 18px;}
    .call-ico a::before {width:30px; height:30px; left:30px;}
    .gnb_wrap {margin-right: 200px;}
    .gnb_wrap.onedrop > .gnb > ul > li {padding:0 22px;}
}
@media screen and (max-width:1300px){
    /* header */
    
    .header .logo { width: 200px; margin-right: 0; top:16%; margin-top: -5px; }
    
    .header .right_wrap { right: 120px; }
    .header .lang a { margin: 5px 15px 0 0; }
    
    .gnb_wrap {margin-right: 20%;}
    .gnb_wrap > .gnb > ul > li {width: 100px;}
    .gnb_wrap.alldrop > .gnb > ul > li {padding:0 18px; width: 106px;}
}

@media screen and (max-width:1130px){
    .gnb_wrap { display: none; }
}

@media screen and (max-width:1024px){
    /* header */
    .header .head { height: 80px; padding: 17px 12px; }
    .header ,.head,.call-ico{height:80px !important;}
    .call-ico a{line-height: 80px;}
    /* dropdown효과 */
    .header .head::before { display: none; }
    .header .head:hover { background-color: inherit; height:80px; }
    .header .head:hover .logo img.logo_b { display: none; }
    .header .head:hover .logo img.logo_w { display: inline; }
    .header .head:hover .lang a { border-color: #fff; background-color: transparent; }
    
    .header .right_wrap { top: 5px; }
    .head_icons { top: 28px; right: 90px; }
        
}

@media screen and (max-width:768px){
    /* header */
    .header .right_wrap.main_head { right: 132px;}
    .header .right_wrap.moblie_head { display: block; }
    .header .right_wrap { right: 142px; }
    .head .lang a { margin-right: 0;}
    .head_icons { right: 74px; }
    
}


@media screen and (max-width:500px){
    .head_icons { display: none; }
    .header .right_wrap.main_head { right: 42px; }
    
    .mobile_menu .gnb > ul > li > ul { display: none; }
    .call-ico {width:80px; text-indent: -99999px;}
    .call-ico p::before {left:24px;}
}