@charset "utf-8";

/*layout*/
.wow { 	visibility: hidden;}
body.overflow {overflow: hidden;}
/*header*/


/*개별 드랍다운 CSS:S*/
.header {width: 100%; height: 125px; position: fixed; z-index: 100;  top: 0;left: 0; background-color: #fff;}
.header .head { box-sizing: border-box; transition: all .3s ease-in-out;background-color: rgba(0,0,0,0); width: 100%;}
.header .gnb_wrap {width: 100%;display: inline-block;}
.header .gnb_wrap > .gnb {margin-left: 30px;}
.header .gnb_wrap > .gnb > ul {display: flex;align-items: center;height: 90px;}
.header .gnb_wrap > .gnb > ul > li {display: inline-block;position: relative; transition: all 0.2s ease-in-out; text-align: center; z-index: 0; box-sizing: border-box;width: 20%;height: 100%;}
.header .gnb_wrap > .gnb > ul > li > a {position: relative;top: 50%;transform:translateY(-50%);color: #333; font-size: 20px; font-weight: 400; line-height:1.2; display: block; width: 100%; padding: 0 30px; box-sizing: border-box;word-break:keep-all;}
.header .gnb_wrap > .gnb > ul > li > ul {display:none; transition:.3s ease; position: absolute; background: #fff; padding: 35px 0; left: 50%;top: 90px; width: 100%;transform: translateX(-50%);  z-index: -1;}
.header .gnb_wrap > .gnb > ul > li.tech > ul {width: 160px;}
.header .gnb_wrap > .gnb > ul > li:hover ul {display:block;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child {margin-top: 0; }
.header .gnb_wrap > .gnb > ul > li > ul > li {transition: all .2s ease-in-out; margin-top: 24px;word-break:keep-all;padding:0 25px;}
.header .gnb_wrap > .gnb > ul > li > ul > li a {transition: all .2s ease-in-out; position: relative;}
.header .gnb_wrap > .gnb > ul > li > ul > li:hover a {font-weight: 600;transition: all .1s ease-in-out; color: #3189b7;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child a {margin-top: 0;}
.header .gnb_wrap > .gnb > ul > li:hover ul > li:first-child::before { transform:translateX(0)}
.header .gnb_wrap > .gnb > ul > li:hover{background:#3189b7;}
.header .gnb_wrap > .gnb > ul > li:hover > a {color: #fff;}
.header .gnb_wrap > .gnb > ul > li > ul > li > a {color: #888;display: block; width: 100%; margin-top: 17px; font-size: 16px;}

.header .head .top {height: 35px; box-sizing: border-box; text-align: right; border-bottom: 1px solid #ddd; background-color: #fff;}
.header .head .top a {display: inline-block; font-size: 14px; color: #888; font-weight: 400; line-height: 35px; vertical-align: middle;}
.header .head .top a:first-child {padding-right: 15px; margin-right: 10px; position: relative;}
.header .head .top a:first-child:after {content: ""; width: 1px; height: 16px; background-color: #ddd; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.header .bt {height: 90px; width: 100%; border-bottom: 1px solid #ddd;}
.header .bt .inner {height: 100%;display: flex;justify-content: space-between;}

.header .logo {margin-top: 10px;}

.header .right_wrap {display: flex;}
.header .right_box { float:right; font-size:0; margin-right:10px;}
.header .right_box a { height:49px; margin-left:10px; transition:.3s ease; display: inline-block; font-weight: 100; vertical-align:top; color: #fff; box-sizing:border-box; width:50px; text-align: center; line-height:100%; padding: 0 20px; border: 1px solid #fff;text-indent:-99999px;}
.header .right_box a.login_btn {background:url("/resources/img/common/login_ico.png") center no-repeat; }
.header .right_box a.logout_btn {background:url("/resources/img/common/logout_ico.png") center no-repeat; }
.header .right_box a.mypage_btn {background:url("/resources/img/common/mypage_ico.png") center no-repeat; }
.header .right_box a.join_btn {background:url("/resources/img/common/join_ico.png") center no-repeat; }
.header .right_box a:hover { background-color:#88b927;}
.header .right_wrap > div {display: inline-block; width: 90px; height: 90px; vertical-align: top;/*  margin-right: -4px; */}
.header .right_wrap > div:last-child {margin-right: 0;}

.header .lang a{display: block; color: #333; text-align: center; padding: 0px 15px; font-size: 16px; border-left: 1px solid #ddd; box-sizing: border-box; line-height: 90px; text-align: center;}
.header .lang a.ko {position: relative;}
.header .lang a.on, .header .lang a:hover {font-weight: 600;}
.header .search {border-left: 1px solid #ddd; background:#fafafa url("/resources/img/common/search_ico.png")no-repeat center; text-indent: -9999px; cursor: pointer;}
.header .search.on {background:#fafafa url("/resources/img/common/search_cls.png")no-repeat center;}

.header .sch_form {width: 100%;  background-color: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,0.1); padding: 10px 0 25px; box-sizing: border-box; display: none;}
.header .sch_form .search_wrap {width: 100%; max-width: 700px; border-bottom: 2px solid #3189b7; margin: 0 auto; height: 50px;}
.header .sch_form .search_wrap input {float: left; height: 100%;width: calc(100% - 50px); border:none;}
.header .sch_form .search_wrap .sch_btn {width: 50px; height: 50px; background: url("/resources/img/common/search_ico.png")no-repeat center; text-indent: -9999px; float: right;}

.header .ham_btn, .header .ham_btn span {display: inline-block; transition: all .3s ease-in-out; box-sizing: border-box;}
.header .ham_btn { cursor: pointer; background-color: #3189b7; position: relative;}
.header .ham_btn p {width: 30px; height: 21px; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%;}
.header .ham_btn span {position: absolute;  width: 100%; height: 3px; background-color: #fff;}
.header .ham_btn span:nth-of-type(1) {top: 0;}
.header .ham_btn span:nth-of-type(2) {top: 9px;}
.header .ham_btn span:nth-of-type(3) {bottom: 0;}

.header .ham_menu {position: fixed; top: 0; left: 0; width: 100%; height: 100vh;}
.header .ham_menu .ham_head {width: 100%; height: 75px;}
.header .ham_menu .lang {display: none;}

/*eng*/
.eng .header {height: 90px;} 
/*개별 드랍다운 CSS:E*/

/* mobile menu */
.mobile_menu {position: fixed; width: 100%; height: 100%; background-color: rgba(255,255,255,.6); top: 0; left: 0; display: none;  overflow-y: auto;}
.mobile_menu .menu_wrap {background: #3189b7 url("/resources/img/common/ham_bg.png")no-repeat center; width: 100%; height: 600px;}
.mobile_menu .menu_wrap .inner, .mobile_menu .menu_wrap .gnb, .mobile_menu .menu_wrap .gnb > ul {height: 100%;}
.mobile_menu .menu_wrap .gnb > ul{display: flex;}
.mobile_menu .gnb > ul > li {text-align: center; border-left: 1px solid rgba(255,255,255,.3); box-sizing: border-box;width: 20%; height: 100%;}
.mobile_menu .gnb > ul > li:last-child{border-right: 1px solid rgba(255,255,255,.3);}
.mobile_menu .gnb > ul > li > a {display: flex;justify-content: center; align-items: center; font-size: 26px;font-weight: 600;color: #fff;word-break: keep-all;height: 14%;line-height: 1.4;padding:25px;border-bottom: 1px solid rgba(255,255,255,.3);margin-top: 125px;}
.mobile_menu .gnb > ul > li a {color: #fff;}
.mobile_menu .gnb > ul:after {clear: both; content: ""; display: block;}
.mobile_menu .gnb > ul > li > .two_depth {padding-top: 35px; box-sizing: border-box;}
.mobile_menu .gnb > ul > li > .two_depth > li {margin-top: 25px;padding:0 20px; word-break: keep-all;}
.mobile_menu .gnb > ul > li > .two_depth > li:first-child {margin-top: 0;}
.mobile_menu .gnb > ul > li > .two_depth > li > a {opacity: .6; transition: all .3s ease-in-out; display: inline-block;position: relative; height: 25px; font-size: 20px;}
.mobile_menu .gnb > ul > li > .two_depth > li > a:before{content: ""; position: absolute; width: 0%; height: 1px; background-color: #fff; bottom: 0; left: 50%; transform: translateX(-50%);  transition: all .3s ease-in-out;}
.mobile_menu .gnb > ul > li > .two_depth > li > a:hover {opacity: 1;}
.mobile_menu .gnb > ul > li > .two_depth > li > a:hover:before {width: 100%;}

.mobile_menu .close {width: 80px; height: 80px; border: 1px solid #fff; box-sizing: border-box; position: absolute; top: 20px;right: 20px; cursor: pointer; background-color: #3189b7;}
.mobile_menu .close span {display: block; position: absolute; width: 3px; height: 30px; transform: rotate(-45deg); background-color: #fff; top: 24px; left: 37px;}
.mobile_menu .close span:last-child {transform: rotate(45deg);}

/*eng s*/
.eng .header .gnb_wrap > .gnb {margin-right: 50px;}
.eng .header .gnb_wrap > .gnb > ul {text-align: right;}
.eng .header .gnb_wrap > .gnb > ul > li {float: none; margin-right: -4px;}

.eng .mobile_menu .gnb > ul > li {width: 50%;}
/*eng e*/


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

@media screen and (max-width:1100px){
  .mobile_menu .gnb > ul > li > a {font-size: 22px;}
  .mobile_menu .gnb > ul > li > .two_depth > li > a {font-size: 16px;}
  .mobile_menu .gnb > ul > li > .two_depth > li {margin-top: 20px;}
}

@media screen and (max-width:1024px){
  .header {height: 100px;}
  .header .gnb_wrap {display: none;}
  .header .head {height: 100px;}
  
  .header .bt {height: 65px;}
  .header .logo {width: 200px; margin-top: 10px;}
  .header .logo img{width: 100%;}
  .header .right_wrap > div {width: 65px; height: 65px;}
  .header .lang a {line-height: 65px;}
  
  .header .search {-webkit-background-size: 39%;background-size: 39%;}
  .header .search.on {-webkit-background-size: 28%;background-size:  28%;}
  .header .ham_btn p {width: 25px;}

  .mobile_menu .menu_wrap .gnb > ul{flex-flow: row wrap;align-content: flex-end;}
  .mobile_menu .gnb > ul > li {height: 45%; width: 33.33%; border-top: 1px solid rgba(255,255,255,.3);}
  .mobile_menu .gnb > ul > li > a {font-size: 20px; margin: 0; padding:15px 25px;}
  .mobile_menu .gnb > ul > li > .two_depth > li > a {height: 25px;font-size: 16px;}
  .mobile_menu .gnb > ul > li > .two_depth {padding-top: 25px;}
  .mobile_menu .gnb > ul > li > .two_depth > li {margin-top: 10px;}
  .mobile_menu .gnb > ul > li:nth-of-type(3){border-right: 1px solid rgba(255,255,255,.3);border-bottom: 1px solid rgba(255,255,255,.3);}
  .mobile_menu .close {width: 60px; height: 60px; background-color: #3189b7; top: 0; right: 15px;}
  .mobile_menu .close span {top: 14px; left: 28px;}
  /*eng*/
  .eng .header {height: 66px;}
  .eng .header .head {height: 66px;}
  .eng .mobile_menu .gnb > ul > li {height: 100%;}
}

@media screen and (max-width:768px){
  .header .ham_menu .m_gnb_wrap > .gnb > ul > li > .two_depth > li {width: 25%;}
  .header .search_wrap .sch_btn {-webkit-background-size: 45%;background-size: 45%;}
  .header .search_form {padding: 5px 0 15px;}
  .mobile_menu .close {right: 0%;}
  .mobile_menu .inner{width: 100%;}
}

@media screen and (max-width:550px){
  .header .head > .h_inner .lang, .header .head .h_inner .right_box {display: none;}
  .header .ham_menu .lang {display: block; float: none; width: 87%; text-align: right; padding-top: 17px;}
  
/*   .header .right_wrap > div {width: 50px;} */
  .header .lang a {font-size: 14px; padding: 0;}
  .header .ham_btn span {height: 2px;}
  .header .ham_btn p {height: 18px;}
  .header .ham_btn span:nth-of-type(2) {top: 8px;}
  
  #header .bt .inner {width: 100%;}
  #header .logo {margin-left: 10px; width: 150px; margin-top: 16px;}
  
  .mobile_menu.mobileOn .menu_wrap {height: 100%;}
  .mobile_menu.mobileOn .menu_wrap .gnb{border-left: 1px solid rgba(255,255,255,.3); border-right: 1px solid rgba(255,255,255,.3); position: relative;}
  .mobile_menu.mobileOn .menu_wrap .gnb > ul {position: absolute; width: 100%; top: 50%; transform: translateY(-50%); height: auto;}
  .mobile_menu.mobileOn .menu_wrap .gnb > ul > li {border: none; border-top: 1px solid rgba(255,255,255,.3); width: 100%;float: none; height: auto;}
  .mobile_menu.mobileOn .menu_wrap .gnb > ul > li:last-child {border-bottom: 1px solid rgba(255,255,255,.3)}
  .mobile_menu.mobileOn .gnb > ul > li > .two_depth {padding-bottom: 25px;}
  .mobile_menu.mobileOn .gnb > ul > li > a {margin-top: 20px; padding-bottom: 20px;}
}

@media screen and (max-width:350px){
  .header .logo {width: 107px; margin-top: 21px; margin-left: 8px;}
}


.header .ham_menu .m_gnb_wrap > .gnb > ul > li > .two_depth > li.add {float: none; width: 100%;}