@charset "utf-8";

/*layout*/
.wow { 	visibility: hidden;}
body.overflow {overflow: hidden;}
/*header*/
.header .logo {width: 305px; float: left;}
.header .logo img {width: 100%;}

.header .right_wrap {position: absolute; top: 0; right: 0;}
.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("https://kcmie2021.com/resources/img/common/login_ico.png") center no-repeat; }
.header .right_box a.logout_btn {background:url("../../img/common/logout_ico.png") center no-repeat; }
.header .right_box a.mypage_btn {background:url("https://kcmie2021.com/resources/img/common/mypage_ico.png") center no-repeat; }
.header .right_box a.join_btn {background:url("../../img/common/join_ico.png") center no-repeat; }
.header .right_box a:hover { background-color:#88b927;}


.header .lang {float: right;}
.header .lang a{display: inline-block; font-weight: 100; color: #fff; width: 50px; text-align: center; padding: 15px 0; font-size: 17px; border: 1px solid #fff;}
.header .lang a.ko {position: relative;}
.header .lang a.on, .header .lang a:hover {font-weight: 600;}





.header .ham_btn, .header .ham_btn span {display: inline-block; z-index: 100; transition: all .3s ease-in-out; box-sizing: border-box;}
.header .ham_btn {display: none;}
.header .ham_btn {position: absolute;width: 70px;height: 70px;top: 0;right: 0;cursor: pointer;background: #00428e;}
.header .ham_btn span {position: absolute;left: 50%;transform: translateX(-50%);width: 62%;height: 7%;background-color: #ffffff;}
.header .ham_btn span:nth-of-type(1) {top: 25%;}
.header .ham_btn span:nth-of-type(2) {top: 50%;transform: translate(-50%,-50%);}
.header .ham_btn span:nth-of-type(3) {bottom: 25%;}


.header .ham_btn.active {position: fixed;top: 0;}
.header .ham_btn.active span:nth-of-type(1) {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
	left: 50%;
	top: 50%;
	}
.header .ham_btn.active span:nth-of-type(2) {opacity: 0;}
.header .ham_btn.active span:nth-of-type(3) {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	left: 50%;
	top: 50%;
	}


.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;}





/*개별 드랍다운 CSS:S*/
.header {width: 100%;height: 70px;position: absolute; font-size: 14px;z-index: 102;}
.header .head {padding-top: 45px; box-sizing: border-box;transition: all .3s ease-in-out;background-color: rgba(0,0,0,0);width: 100%;}
.header .gnb_wrap {width: 60%;display: inline-block;float: right;}
.main .header .gnb_wrap {display: none;}
.header .gnb_wrap > .gnb {width: calc(100% - 275px);float: right;margin-right: 275px;}
.header .gnb_wrap > .gnb > ul {display: flex; flex-direction: row; flex-wrap: nowrap;}
.header .gnb_wrap > .gnb > ul > li {display: inline-block;width: 25%;position: relative;transition: all 0.2s ease-in-out;text-align: center;z-index: 0;box-sizing: border-box;float: left; flex: 1 1 0;}
.header .gnb_wrap > .gnb > ul > li > a {color: #0a4d94; font-size: 18px; font-weight: 600;transition: all .1s ease-in-out; padding: 6px 0;}
.header .gnb_wrap > .gnb > ul > li:hover > a {color:#06a2af;}
.header .gnb_wrap > .gnb > ul > li > ul {display:none; transition:.3s ease; position: absolute;  width: 123px; background: #3a3c8a; padding: 65px 0 25px; left: 50%;top: -25px;  transform: translateX(-50%);  z-index: -1;}
.header .gnb_wrap > .gnb > ul > li {padding: 0 7px;}
.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 {padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.3);}
.header .gnb_wrap > .gnb > ul > li > ul > li {transition: all .2s ease-in-out;}
.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;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child a {margin-top: 0;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child::before {transition:.3s ease; transform:translateX(-15px); position: absolute; display:inline-block; content: ""; top: -2px; left: -15px;width:62px;  height: 3px;  background: #fff;}
.header .gnb_wrap > .gnb > ul > li:hover ul > li:first-child::before { transform:translateX(0)}
.header .gnb_wrap > .gnb > ul > li > ul > li > a {color: #fff;display: block; width: 100%; margin-top: 17px; font-size: 16px;}

/*개별 드랍다운 CSS:E*/



/* mobile menu */
.mobile_menu { background: rgba(255,255,255,.95); display: none;  box-sizing:border-box;  padding:20px; position: fixed; left: 0; width: 100%; height: 100%; top: 0;}
.mobile_menu .gnb {position: absolute;left: 50%; text-align: center;width: 100%;transform: translate3d(-50%,0,0);  box-sizing: border-box; padding:45px 5% 50px;  overflow-y: auto; height: calc(100% - 70px); top: 70px;}
.mobile_menu .gnb>ul>li{display: block; position:relative; width:100%;height: 33px;margin-bottom: 60px; padding-left:39px; vertical-align: top; box-sizing: border-box; text-align: left; float: left;cursor:pointer;}
.mobile_menu .gnb > ul > li::before {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); content: ""; width: 15px; height: 2px; background: #000; z-index: 1; transition: .3s ease;}
.mobile_menu .gnb > ul > li::after{content: ""; position: absolute; right: 0px; width: 36px;  height: 36px; background: #fff url(https://kcmie2021.com/resources/img/main/ham_arw.png) center right 7px no-repeat; border: 2px solid #000;  box-sizing: border-box; top: 50%;  transform: translateY(-50%); transition: .3s ease;}
.mobile_menu .gnb > ul > li:hover::before {width: 59px;}
.mobile_menu .gnb > ul > li:hover::after {width: 82px;}

.mobile_menu .gnb > ul > li > a {display:inline-block; position: relative; height: 36px;margin-left:15px;line-height:36px; color:#000; font-weight: 500; font-size: 32px; letter-spacing: -1.5px; transition: .3s ease; word-break: keep-all;border-bottom: 3px solid rgba(255, 239, 107,0);}
.mobile_menu .gnb > ul > li > a::before {position: absolute; width: 19px; height: 21px; background: url("https://kcmie2021.com/resources/img/main/sp01.png") 0 -130px no-repeat; content: ""; left: -30px; top: 50%; transform: translateY(-50%);}
.mobile_menu .close_btn { z-index:2; position: absolute; right: -70px; width: 60px; height:60px; text-indent: -99999px; border:2px solid #122e4b; top: 10px; box-sizing: border-box; background:#fff url('https://kcmie2021.com/resources/img/common/clos_btn.png') no-repeat center; cursor: pointer;}
.mobile_menu .mobile_f_btn { display:none; position: fixed; bottom: 0; width:100%; min-width: 360px;}
.mobile_menu .mobile_f_btn a { background: #0e4d86; padding: 25px 0; text-align: center; float: left; width: 50%;  box-sizing: border-box; color:#fff; display: inline-block;}
.mobile_menu .mobile_f_btn a:first-child {border-right:1px solid #4a6f96;}

.mobile_menu .right_box { position: absolute; top: 0; left: 0; width: 100%; height:70px; background: #88b927;}
.mobile_menu .right_box a{ margin-top:10px;}
.mobile_menu .mb_title {color:#fff; font-size: 18px; text-align: center; position: absolute; width:100%; margin-top: 26px;}



@media screen and (max-width:1500px){
	.header .gnb_wrap {width: 73%;}
}
@media screen and (max-width:1200px){
	.header .logo {width: 230px;}
	.main .header .logo {width: 305px;}
	
	.header .gnb_wrap > .gnb {    width: calc(100% - 170px); margin-right: 170px;}
	.header .gnb_wrap > .gnb > ul > li > a {font-size: 16px;}
}
@media screen and (max-width:1024px){

    .header .ham_btn {display: block;}
	
	.main .header .ham_btn {width: 100px; height: 100px;}
    .header .lang {margin-right: 50px;}

    .header .gnb_wrap {display: none;}
    .header .head {height: 90px; padding:17px 12px;}
    
    .header .head:hover {background-color: inherit; height: 90px;}
	.mobile_menu .gnb {top: 100px;}
  
}
@media screen and (max-width:768px){
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li > .two_depth > li {width: 25%;}
	
	.mobile_menu .gnb>ul>li {    padding-left: 0;}
	.mobile_menu .gnb > ul > li > a {font-size: 26px;}
}

@media screen and (max-width:500px){
	
	.header .logo, .main .header .logo {width: 50vw;}
    .header .head > .h_inner .lang, .header .head .h_inner .right_box {display: none;}
	.header .ham_btn, .main .header .ham_btn {width: 17vw; height: 17vw;}
    .header .ham_menu .lang {display: block; float: none; width: 87%; text-align: right; padding-top: 17px;}
	.mobile_menu .gnb {top: 70px;}
   
}


@media screen and (max-width:420px){
	.header .ham_btn {width: 19vw; height: 19vw;}
}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > .two_depth > li.add {float: none; width: 100%;}