@charset "utf-8";

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

/*layout*/
.wow {visibility: hidden;}

/*header*/
.header .h_inner {height: auto; max-width: 1820px;}
.header .logo {position: absolute; left: 0; top: 6px;}
.header .logo img {width: 100%;}
.header .logo img.logo_b {display: none;}
.header .right_wrap {position: absolute; top: 11px; right: 2%; transition: right 0.3s ease;}
    /*로그인&로그아웃 버튼 s*/
.header .right_box {display: inline-block; float: right; display: none;}
.header .right_box a {text-indent: -99999px;width: 35px;height: 35px;background: url("/resources/img/common/right_box_login.png") no-repeat -1px -1px;display: inline-block;float: left;border: 1px solid #fff; box-sizing: border-box; transition: all .3s ease;}
.header .head .right_wrap .right_box a:hover {background-color: #aaa; border-color: #aaa;}
.header .right_box a:nth-of-type(2) {margin-left: 15px; background-position: -51px -1px;}
.header .right_box a.logout_btn {background-image: url("/resources/img/common/right_box_logout.png"); background-position: -1px -1px;}
.header .right_box a.mypage_btn {background-image: url("/resources/img/common/right_box_logout.png"); background-position: -51px -1px;}
    /*로그인&로그아웃 버튼 e*/
.header .lang {display: inline-block;}
.header .lang a { display: inline-block; font-weight: 300; color: #fff; text-align: center; padding: 10px; font-size: 17px; border: 1px solid #fff;}
.header .head:hover .lang a {border-color: #333; color: #333;}
.header .sns {display: none; float: right;}
.header .sns a {text-indent: -99999px; width: 35px; height: 35px; background: url("/resources/img/common/sns_w.png") no-repeat 0 0; display: inline-block; float: left;}
.header .sns .blog {margin-left: 15px; background-position: -50px 0;}


    /*전체 드랍다운 CSS:S*/
.header {width: 100%; height: 90px; position: fixed; z-index: 100; font-size: 14px;}
.header .head {padding-top: 15px; height: 90px; box-sizing: border-box; transition: all .3s ease-in-out;background-color: rgba(0,0,0,0);}
.header .head::before {position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: rgba(204,204,204,.3); transition: all .2s ease-in-out; content: ""; display: none;}
.header .gnb_wrap {text-align:center;}

.header .gnb_wrap > .gnb > ul > li {display:inline-block; position: relative; vertical-align:top; margin: 0 5px;}
.header .gnb_wrap > .gnb > ul > li > a {display: block; line-height: 58px; text-align: center; color: #fff; font-size: 17px; padding: 0 25px; font-weight: 400;}
.header .gnb_wrap > .gnb > ul > li > a::before {display: block; position: absolute; content: ""; bottom: -16px; left: 16%; width: 90px; height: 3px; background: #28407e; opacity: 0; z-index: 33;}
.header .gnb_wrap > .gnb > ul > li:hover > a::before {opacity: 1;}
.header .gnb_wrap > .gnb > ul ul > li > a { color:#fff;}
.header:hover .gnb_wrap > .gnb > ul ul { display:block;}
.header .gnb_wrap > .gnb > ul ul > li {margin-top: 15px;}
.header .gnb_wrap > .gnb > ul ul > li a {display: block; line-height: 32px; transition:.3s ease; font-size:16px; color: #555;}
.header .gnb_wrap > .gnb > ul ul > li:hover a {color:#28407e; font-weight: 600;}

    /* ham_btn */
.header .ham_btn, .header .ham_btn span {display: inline-block; z-index: 200; transition: all .3s ease-in-out; box-sizing: border-box;}
.header .ham_btn {position: absolute; top: 23px; right: 30px; width: 42px; height: 42px; cursor: pointer; z-index: 200; -webkit-transform: translateZ(0); box-sizing: border-box; border: 1px solid #fff; display: block;}
.header .ham_btn.active{display: none;}
.header.scroll .ham_btn{border: 1px solid #333;}
.header.scroll .ham_btn span{background-color: #333;}
.header .ham_btn p {position: relative; width: 30px; height: 20px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.header .ham_btn span {position: absolute; right: 0; width: 25px; height: 2px; background-color: #fff;}
.header .ham_btn span:nth-of-type(1) {top: 0; width: 15px;}
.header .ham_btn span:nth-of-type(2) {top: 9px;}
.header .ham_btn span:nth-of-type(3) { bottom: 0;}

/*.header:hover .ham_btn{border: 1px solid #333;}
.header:hover .ham_btn span{background-color: #333;}*/

    /*dropdown효과*/
.header .head:hover {background-color: rgba(255,255,255,1); height: 440px;}
.header .head:hover::before {background-color: #f2f2f2;}
.header .head:hover .logo img.logo_b {display: inline;}
.header .head:hover .logo img.logo_w {display: none;}
.header .gnb_wrap > .gnb {height: 58px; overflow: hidden;}
.header .head:hover .gnb_wrap > .gnb {overflow: inherit;}
.header .head:hover .gnb_wrap > .gnb::after{content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-bottom: 2px solid #ddd; width: 1920px; display: block; bottom: -25.5%;}
.header .head:hover .gnb_wrap > .gnb > ul > li > a {color: #000;}
.header .gnb_wrap > .gnb > ul > li > .two_depth {transition: all .5s ease-in-out; padding-top: 20px;}
.header .head:hover .gnb_wrap > .gnb > ul > li > .two_depth {opacity: 1; z-index: 0;}
.header .head .gnb_wrap > .gnb > ul > li:hover > a {color: #28407e; position: relative;}
.header .head:hover .right_box a {background-color: #ddd; border-color: #ddd;}
.header .head:hover .sns a {background-image: url("/resources/img/common/sns_c.png");}
    /*dropdown효과*/
    /*전체 드랍다운 CSS:E*/

/*스크롤 탑이 메인 비주얼 지나면 헤더 변경 s*/
.scroll .head{background-color: #fff;}
.scroll .head:hover {background-color: #fff;}
.scroll .head:hover .lang a {border-color: #333; color: #333;}
.scroll .head .logo img.logo_b {display: inline;}
.scroll .head .logo img.logo_w {display: none;}
.scroll .gnb_wrap > .gnb > ul > li > a {color: #000;}
.scroll .head .right_box a {background-color: #ddd; border-color: #ddd;}
.scroll .head .sns a {background-image: url("/resources/img/common/sns_c.png");}
.scroll .head .lang a {color: #333; border-color: #333;}
/*스크롤 탑이 메인 비주얼 지나면 헤더 변경 e*/

/*mv_logo*/
.mv_logo_wrap{position: absolute; top: 7px; right: 65px; width: 300px; height: 45px;}
.mv_logo_wrap .mv_logo{width: 32%; height: 45px; background: #fff; border-radius: 5px;  overflow: hidden; display: inline-block; margin-right: 1%;}
.mv_logo_wrap .mv_logo:last-child{margin-right: 0;}
.mv_logo_wrap .mv_logo img{width: 100%; position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}


/* mobile menu */
.mobile_menu {display: none; box-sizing:border-box;position: fixed;left: 0;width: 100%;height: 100%;top: 0;z-index: 103;text-align: center; overflow: hidden; background: rgba(0,0,0,.5);}
.mobile_menu .menu_wrap {min-height: 100%;/* overflow: hidden; */position: relative;}
    /*btn_close*/
.mobile_menu .btn_close {display: inline-block; position: absolute; top: 25px; right: 40px; cursor: pointer; box-sizing: border-box; transition: all .3s ease-in-out; z-index: 104;}
.mobile_menu .btn_close p {position: relative; top: 5px; width: 28px; height: 28px; background: url(/resources/img/main/ham_btn_close.png)no-repeat center/cover;}
.mobile_menu .btn_close p span {display: inline-block; width: 0; height: 0; font-size: 0; text-indent: -9999px; overflow: hidden;}
    /*gnb*/
.mobile_menu .gnb {position: absolute; top: 0; right: -100%; width:100%; height: 100%;  box-sizing: border-box; background: #fff; overflow-x: hidden;}
.mobile_menu .gnb > ul {display: inline-block; width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.mobile_menu .gnb > ul::after {display: block; content: ""; clear: both; height: 0;}
.mobile_menu .gnb > ul > li {display: block; float: left; width:33%; vertical-align: top; margin-bottom: 5%; box-sizing: border-box;}
.mobile_menu .gnb > ul > li:last-child {margin-bottom: 0;}
.mobile_menu .gnb > ul > li > a {position: relative; display: inline-block;line-height:130%;color:#28407e;font-weight: 500;font-size: 40px;letter-spacing: -1.5px;transition: .3s ease;word-break: keep-all; box-sizing: border-box; transition: all .3s ease-in-out; opacity: 0.7;}
.mobile_menu .gnb > ul > li:hover> a {opacity: 1;}
.mobile_menu .gnb > ul > li > a::after{content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -13px; width: 195px; height: 3px; background: #ddd;}
.mobile_menu .gnb > ul > li:hover > a::before {opacity: 1; left: 0;}


.mobile_menu .gnb > ul > li > ul {margin-top: 25px; padding-top: 5px;}
.mobile_menu .gnb > ul > li > ul li {margin-right: 15px; display: block;}
.mobile_menu .gnb > ul > li > ul li:last-child {margin-bottom: 0}
.mobile_menu .gnb > ul ul li {display: inline-block;}
.mobile_menu .gnb > ul ul li a {display: block; line-height: 1.7; padding: 3px 5px; font-size: 18px; transition:.3s ease-in-out; word-break: keep-all; box-sizing: border-box; color: #333;}
.mobile_menu .gnb > ul ul li a:hover {color: #28407e; background-color: #fff; font-weight: 600;}
.mobile_menu .right_wrap {display: none;}

.ham_logo_wrap{width: 100%;  background: #fff; border-top: 1px solid #ddd; position: absolute; bottom: 0; text-align: center; margin: 0 auto;}
.ham_logo_wrap ul{height: auto; position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box;}
.ham_logo_wrap li{height: 100%; position: relative; margin-right: 5%; width: 28.3%;}

.gnb .logo_ham{left: 30px; top: 30px;}


@media screen and (max-width:1900px){
    .header .right_wrap {right: calc(1% + 50px);}
}

@media screen and (max-width:1720px){
    .header .right_wrap {right: 90px;}
}

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

@media screen and (max-width:1300px){
    .header .sns .blog {margin-left: 10px;}
}

@media screen and (max-width:1024px){
    .header .gnb_wrap {display: none;}
    .header .head {height: 90px; padding:17px 12px;}
    
    /* .header .head::before {display: none;} */
    
    .header .head:hover {background-color: inherit; height: 90px;}
    .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; color: #fff;}
    .header .head:hover .sns a {background-image: url("/resources/img/common/sns_w.png");}
    
    .scroll .head{background-color: #fff;}
    .scroll .head:hover {background-color: #fff;} 
    .scroll .head:hover .logo img.logo_b {display: inline;}
    .scroll .head:hover .logo img.logo_w {display: none;}
    .scroll .head:hover .lang a {border-color: #333; color: #333;}
    
    .mobile_menu .gnb {overflow-y: scroll; overflow-x: hidden;}
    .mobile_menu .gnb {width: 100%;}

}

@media screen and (max-height:860px){
    /*높이 값이 낮을 때, overflow-y 스크롤 추가*/
   .mobile_menu .gnb {overflow-y: scroll;height: 100%;}
}

@media screen and (max-width:768px){
    .head .sns {display: none;}
    .head .lang a {margin-right: 0;}
    .mobile_menu .gnb { padding: 100px 20px 0;}
    .mobile_menu .gnb > ul > li{width: 50%;}
    .ham_logo_wrap{display: none;}
    .mobile_menu .gnb > ul{top: 55%;}
}

@media screen and (max-width:500px){
    .gnb .logo_ham{display: none;}
    .mobile_menu .gnb > ul{top: 50%;}
    .mobile_menu .gnb > ul > li{width: 100%; margin-bottom: 13%;}
    .mobile_menu .gnb > ul > li > ul li {display: block; margin: 0 0 3% 0; float: none;}
    .mobile_menu .gnb {height: 100%;}
    .mobile_menu .gnb > ul > li > a {display: block;}
}