@charset 'utf-8';
/* common */
#Wcap{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1002; display:none; }
#gnbBg{ position: fixed; top: 0; left: 0; width: 100%; height: 0; background: #fff; transition:all 0.3s; z-index: 1001;}
#gnbBg.on{ height: 370px;  box-shadow:0 0 10px rgba(0,0,0,0.2)}
#navWrap{ position: fixed; top: 0; right: 0; width: 160px; height: 100%; background: rgba(255,255,255,0.08); border-left:1px solid rgba(170,170,170,0.25); backdrop-filter: blur(10px); box-shadow:-3px 0 6px rgba(34,34,34,0.07); z-index: 1000;}
#menu_btn{ position: fixed; top: 0; right: 0; width: 160px; display: flex; justify-content: center; padding-top: 50px; z-index: 1005;}
#menu_btn button{ width: 14px; height: 10px; position: relative; }
#menu_btn button span{ display:block; width: 100%; height: 2px; background: #fff; border-top-left-radius:10px; border-bottom-left-radius:10px; }
#menu_btn button span:before{ content:''; display:block; position: absolute; top: 0; width: 100%; height: 2px; background: #fff; border-top-left-radius:30px; border-bottom-left-radius:30px; transition:all 0.5s; }
#menu_btn button span:after{ content:''; display:block; position: absolute; bottom: 0; right: 0; width: 60%; height: 2px; background: #fff; border-top-left-radius:30px; border-bottom-left-radius:30px; 
transition:all 0.5s; }
#menu_btn.on button span{ height: 0; background: #002C7D;}
#menu_btn.on button span:before{ top: 5px; transform:rotate(45deg); border-radius:10px; background: #002C7D;}
#menu_btn.on button span:after{ width: 100%; bottom: 3.5px; transform:rotate(-45deg); border-radius:10px; background: #002C7D;}
#menu_btn.navy button span,#menu_btn.navy button span:before,#menu_btn.navy button span:after{ background: #002C7D;}
#menu_btn.line button span,#menu_btn.line button span:before,#menu_btn.line button span:after{ background: #002C7D;}
#menu_btn.subon{ width: 150px; }
#topBtn{ display:none; position: fixed; right: 50px; bottom: 100px; width: 60px; height: 60px; border-radius:50%; box-shadow: 2px 2px 15px rgba(187,187,187,0.35);  justify-content:center; align-items:center; cursor:pointer; z-index: 1002; background: #fff;}
#topBtn i{ font-size:20px; color:#2AAFEC;}
#topBtn.subon{ display:flex; }

.w1760{ max-width:1760px; margin: 0 auto 0 0; width: 100%; height: 100%; }
.w1600{ max-width:1600px; margin: 0 auto;}
.innerP-m{ padding: 0 0 0 8.333333333333333%; margin: 0 100px 0 0;height: 100%; }

/*header*/
header{ position: relative; position: fixed; top:0; left: 0; z-index: 1001; width: 100%; height: 110px; transition:all 0.5s; }
header .headerBox{ padding: 0 0 0 8.333333333333333%; margin: 0 100px 0 0; height: 100%; position: relative; transition:all 0.5s; display:flex; justify-content: space-between; align-items:center;}
header .headerBox nav{ height: 100%; }
header .headerBox nav .depth1{ display:flex; height: 100%;}
header .headerBox nav .depth1 > li > a{ padding: 0 35px; height: 100%; display:flex; align-items:center; color:#fff; font-weight: 600;}
header .headerBox nav .depth2{ padding-top: 10px; height: 260px; display:none; }
header .headerBox nav .depth2 li{}
header .headerBox nav .depth2 li a{ display:block; padding: 10px 0; width: 100%; text-align: center; font-size:17px; color:#222; font-weight: 300;  }
header .headerBox nav .depth2 li a:hover{ color:#002c7d; font-weight: 400;}
header .headerBox #side{ display:flex; }
header .headerBox #side #lang{ display:flex; margin-right: 30px;}
header .headerBox #side #lang li a{ font-size:15px; color:#fff; font-weight: 300;}
header .headerBox #side #lang li:last-child a:before{ content:'/'; margin: 0 5px;}
header .headerBox #side #lang li.on a{ color:#fff; font-weight: 600;}
header:after{ content: ''; position: absolute;  bottom: 0; left: 0; width: 100%; height: 1px; background: #E0E0E0; display: block; opacity: 0;  transition: all 0.5s; pointer-events: none; }
header.navy .headerBox nav .depth1 > li > a{ color:#222; }
header.navy .headerBox nav .depth1 > li:hover > a{ color:#002c7d; }
header.navy .headerBox #side #lang li a{ color:#222;}
/*header.navy .headerBox #side #lang li.on a{ color:rgba(34,34,34,0.6);}*/
header.line:after{ opacity: 1; }
header.line .headerBox nav .depth1 > li > a{ color:#222;}
header.line .headerBox #side #lang li a{ color:rgba(34,34,34,0.6); }
header.line .headerBox #side #lang li.on a{ color:#222;}
header.subon{ background: #fff; box-shadow:0 0 10px rgba(0,0,0,0.2)}
header:hover{ box-shadow:none; }

#allMenu{ position: fixed; top: 0; right: -50%; width: 530px; height: 100%; z-index: 1003; padding: 140px 90px 45px; background: #fff; transition:all 0.7s; }
#allMenu .depth1 > li{ cursor:pointer; }
#allMenu .depth1 > li > a{ font-size: 50px; font-weight: bold; color:#aaa; pointer-events: none; }
/*
#allMenu .depth1 > li:nth-child(4) > a{ pointer-events:auto; }
#allMenu .depth1 > li:not(nth-child(4)) > a{ pointer-events:none; }
*/
#allMenu .depth1 > li.on > a{ color:#002C7D;}
#allMenu .depth1 > li:not(:last-child){ margin-bottom: 60px;}
#allMenu .depth1 .depth2{ display:flex; display:none; margin-top: 15px;}
#allMenu .depth1 .depth2 li{ display:inline-block; }
#allMenu .depth1 .depth2 li:not(:last-child){ margin-right: 25px; }
#allMenu .depth1 .depth2 a{ display:block; width: 100%; color:#222; font-weight: 300;}
#allMenu .depth1 .depth2 a:hover{ color:#002C7D; font-weight: 500;}
#allMenu .depth1 .depth2 a br { display:none }
#allMenu.on{ right: 0;}

/*footer*/
.footer_in{ background: #111; position: relative; }
.footer_in:after{ content:''; display:block; position: absolute; bottom: 60px; left: 0; width: 100%; height: 1px; background: #333;}
.footer_in .innerP-m{ padding-top: 40px;}
.footer_in .topBox{ display:flex; justify-content:space-between; margin-bottom: 100px;}
.footer_in .leftBox .infoBox{ margin-top: 40px;}
.footer_in .leftBox .infoBox li,.footer_in .leftBox .infoBox li a{ font-size:16px; color:rgba(255,255,255,0.7); font-family: 'KoPubWorldDotum';  font-weight: 300;}
.footer_in .leftBox .infoBox li span{ color:#fff; font-weight: 400; margin-right: 5px; display: inline-block; }
.footer_in .leftBox .infoBox > li:not(:last-child){ margin-bottom: 17px; }
.footer_in .leftBox .infoBox > li a{ transition:all 0.5s; }
.footer_in .leftBox .infoBox > li a:hover{ color:#fff; font-weight: 500;}
.footer_in .leftBox .infoBox ul{ display:flex; }
.footer_in .leftBox .infoBox ul li{ display:flex; align-items:center; }
.footer_in .leftBox .infoBox ul li:not(:last-child):after{ content:''; background: rgba(255,255,255,0.7); display:block; width: 1px; height: 10px; margin: -3px 10px 0; font-size:11px; }
.footer_in .rightBox #gnb{ display:flex; text-align: center; margin-right: -35px; }
.footer_in .rightBox #gnb > li > a{ color:#fff; font-weight: 600; display: inline-block; }
.footer_in .rightBox #gnb .depth2{ margin-top: 53px;}
.footer_in .rightBox #gnb .depth2 li a{ width: 140px; color:rgba(255,255,255,0.66); font-weight: 300; font-size:17px; padding: 10px; display:block; } 
.footer_in .rightBox #gnb .depth2 li a:hover{ color:#fff; font-weight: 500;}
.footer_in .copy{ color: rgba(255,255,255,0.7); font-size:16px; font-weight: 500; padding: 20px 0; text-align: center; }


/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:18px;	line-height: 1.5; word-break:break-all; }
.privacy h2 { font-weight:bold; color:#000; text-align: left; margin:0 0 80px; text-align: center; }
.privacy h3 { display:inline-block; vertical-align:bottom;}
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:18px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:18px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:17px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }



/*animation*/
@keyframes lineW {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes rotate{
	0%{
		transform: rotate(-360deg);
	}
	100%{
	    transform: rotate(0deg);
	}
}

@keyframes gradient{
	0% {
		background-position: 100% 
	}
	100%{
		background-position: 0% 100%
	}
}

@keyframes txtUp {
  from {
    -webkit-transform:translate3d(0, 250%, 0);
    transform:translate3d(0, 250%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeLeft {
  from {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(-30%, 0, 0);
    opacity:0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes fadeRight {
  from {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(30%, 0, 0);
    visibility: visible;
    opacity:0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes fadeUp {
	0%{transform:  translateY(0); opacity: 0;}
	100%{transform: translateY(-20px); opacity: 1;}
}

@keyframes fadeDown {
	0%{transform: translateY(-20px); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}