@charset "utf-8";
/* ----------
css
---------- */

/* layout */
body, table, th, td,
textarea, button, input[type="button"] {
 	font-family: 'Noto Sans KR',"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}
/* ===================================
	공통클래스
 =================================== */
body { background-color:#fff; }
button{cursor:pointer; padding:0; margin:0px;}
input[type="button"]{cursor:pointer;}
#wrap {overflow:hidden; width:100%; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area{ width:1200px; margin:0px auto; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.font-nanum{font-family:"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-nanumbarun{font-family:NanumBarunGothic,"Nanum Barun Gothic","나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
table {width:100%;table-layout:fixed;}
.material-icons{vertical-align:middle;}

/* ========
		헤더
 ======== */
#header{
	width:100%;  
	background-color:#fff;
}
#headerInner{
	position:relative; 
	width:100%; 
	max-width:1200px; 
	margin:0px auto;
	z-index:99999;
}
#headerInner .logo{
	position:absolute; 
	top:0; 
	left:1%; 
	z-index:1; 
}
#headerInner .logo a{
	display:block; 
	margin-top:22px; 
	width:257px; 
	height:68px; 
	background:url(../images/logo.jpg) no-repeat; 
	font-size:0;
}

/* 헤더 :: GNB */
#gnb{height:106px; }
#gnb > ul{
	text-align:center; 
	padding-left: 130px; 
	box-sizing:border-box;
}
#gnb > ul > li{
	position:relative; 
	display:inline-block; 
	width:200px; 
	margin-left:-4px;
 }
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{
	display:block; 
	height:106px; 
	padding:0 15px;
	-webkit-transition:all 400ms;
	-moz-transition:all 400ms;
	-o-transition:all 400ms;
	-ms-transition:all 400ms;
	transition:all 400ms;
	font-weight:500;
}
#gnb > ul > li > a:hover,#gnb > ul > li.on > a{background-color:#0060a1;}
#gnb > ul > li > a > span{
	display:block; 
	height:104px; 
	line-height:104px; 
	letter-spacing:-0.75px; 
	font-size:18px; 
	border-bottom:2px solid transparent; 
	color:#222;
	font-weight:600;
}
#gnb > ul > li > a:hover > span,#gnb > ul > li.on > a > span{
	border-bottom-color:#fff; 
	color:#fff !important;}
#gnb > ul > li .gnb-2dep{
	display:none; 
	position:absolute; 
	top:106px; 
	left:0px; 
	width:100%; 
	padding:11px 0 40px;
	text-align:left; 
	background-color:#0060a1;
}
#gnb > ul > li .gnb-2dep li{
	position:relative;	
}
#gnb > ul > li .gnb-2dep li a{
	display:block; 
	padding:11px 20px; 
	color:#fff; 
	font-size:14px; 
	font-weight:400; 
	letter-spacing:-0.25px;
}
#gnb > ul > li .gnb-2dep li a.this{
	line-height:1.7;	
}

/*=======*/

#gnb > ul > li .gnb-3dep{
	display:none; 
	position:absolute; 
	top:0; 
	left:100%; 
	width:100%; 
	padding:11px 0 40px;
	text-align:left; 
	background-color: rgba(59,65,75,0.5);
}
#gnb > ul > li .gnb-3dep:hover{
	background-color: rgba(59,65,75,1);	
}
#gnb > ul > li .gnb-3dep li a{
	display:block; 
	padding:11px 26px; 
	color:#fff; 
	font-size:14px; 
	font-weight:300; 
	letter-spacing:-0.25px;
}
#gnb > ul > li .gnb-3dep li a.this{
	line-height:1.8;	
}

/* 언어 */
#utilMenu{
	position:absolute; 
	top:0; 
	right:0; 
	padding-top:44px; 
	text-align:right;
}
#utilMenu a{color:#222; }
#utilMenu > div{display:inline-block;}
.user-menu-list a{
	opacity:0.7;
	filter:Alpha(opacity=70); 
	font-size:13px; 
	font-weight:300
}
.user-menu-list a:first-child{margin-right:15px;}
.user-menu-list a:hover{opacity:1.0;filter:Alpha(opacity=100);}
.user-lang-select a{
	display:inline-block; 
	font-size:18px; 
	font-weight:400; 
	padding-bottom:9px; 
	border-bottom:2px solid transparent; 
	margin-left:20px;}
.user-lang-select a:hover,.user-lang-select a.on{border-bottom-color:#000; transform:}
#utilMenu .user-menu-list{display:block; margin-bottom:15px;}
.header-lang-site-con{
	position:relative; 
}
.header-lang-site-con a{
	display:block; 
	padding:0 25px 0 0;
}
.header-lang-site-con a.lang-open-btn{
	background:url(../images/top_util_arr.png) no-repeat 99% 75%;	
	font-size:17px;	
}
.header-lang-site-con .lang-list{ 
	bottom: auto; 
	top: 24px;
	left: -1px; 
	width: 110px; 
	border-bottom:1px solid #b0b0b0; 
	z-index:999
}
.header-lang-site-con .lang-list a{padding:6px 10px; font-size:15px; text-align:left;}
#header.fixed .header-lang-site-con{border-color:#555;}
#header.fixed #utilMenu .header-lang-site-con .lang-list li a{color:#fff;}
.lang-box{
	position:relative; 
	float:right; 
	width:200px; 
	text-align:left; 
}
.lang-box > a{
	display:block; 
	height:30px; 
	line-height:30px; 
	text-indent:20px; 
	border:1px solid #b0b0b0; 
	background-color:#444546; 
	color:#fff; }
.lang-box > a i{position:absolute; right:15px; top:7px;}
.lang-list{
	position:absolute; 
	bottom:30px; 
	left:0px; 
	width:198px;  
	padding:10px 0; 
	background-color:#444; 
	border:1px solid #b0b0b0; 
	border-bottom:0;  
	z-index:11; 
	display:none; 
}
.lang-list a{display:block; padding:10px 20px; color:#fff!important; }
.lang-list a:hover{color:#00a19e}
.bottom-to-top-btn{
	position:absolute; 
	right:6%; 
	top:-60px; 
	display:block; 
	width:60px; 
	height:40px; 
	text-align:center; 
	padding-top:20px;
	background-color:rgba(169,169,169,0.8);
}
.index .bottom-to-top-btn{display:none;}

/*========
	cont2
========*/

#cont2{
	padding: 60px 0 70px;
    height: 292px;
    background:url(../images/sec2_bg3.png) center 0 no-repeat;
}
#cont2 .wrap .tit_area{
	margin-bottom: 35px;
    text-align: center;
    color: #fff;	
}
#cont2 .wrap .tit_area > h3{
	margin-bottom: 15px;
    font-size: 32px;	
	font-weight:500;
}
#cont2 .wrap .tit_area > p{
	margin-bottom: 25px;
    font-size: 15px;
	margin-top:20px;	
}	
#cont2 .wrap .tit_area > a{
	    display: inline-block;
    padding: 0 32px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: 1px solid #cdcdcd;
    border-radius: 21px;
    color: #fff;	
}
#cont2 .wrap > ul{
	margin-top:70px;	
}
#cont2 .wrap > ul > li{
	 float: left;
    position: relative;
    width: 400px;
    color: #fff;
    text-align: center;	
	box-sizing:border-box;
	padding:0 10px;
	height:180px;
}
#cont2 .wrap > ul > li{
    opacity: 0;
    filter: Alpha(opacity=0);
    -moz-transition: top 1.0s, opacity 1.0s;
    -ms-transition: top 1.0s, opacity 1.0s;
    transition: top 1.0s, opacity 1.0s;	
}
#cont2 .wrap > ul > li.active{
	opacity: 1.0;
    filter: Alpha(opacity=100);
    top: 0%;	
}
#cont2 .wrap > ul > li:after{
	position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 180px;
    background-color: #59788a;
    content: "";
}
#cont2 .wrap > ul > li:first-child:after{
	display:none;
}
#cont2 .wrap > ul > li > figure{
	width:50px;
	height:50px;
	margin:0 auto 20px;
}
#cont2 .wrap > ul > li dl{
	position:absolute;
	left:0;
	bottom:0;
	text-align:center;
	width:100%;
}
#cont2 .wrap > ul > li dl dt{
	font-size:18px;
	font-weight:500;	
}
#cont2 .wrap > ul > li dl dd{
	margin-top:15px;	
}
#cont2 .wrap > ul > li dl dd span{
	display:block;	
	font-size:14px;
	line-height:2;
}

#cont2 .wrap > ul > li.sec2_ico2 dl, 
#cont2 .wrap > ul > li.sec2_ico3 dl{
	padding-bottom:30px;	
}

/*========
	cont3
========*/

#cont3{
	width:100%;
	background:#fff;	
	margin-top:70px;
}
#cont3 .wrap{
	padding-bottom:30px;	
}
#cont3 .wrap h2{
	text-align:center;
	margin-bottom:20px;
}
#cont3 .wrap  .swiper-container {
      width: 100%;
      height:360px!important;
	  padding-bottom:70px;
}
#cont3 .wrap  .swiper-container .swiper-wrapper > div{
    opacity: 0;
    filter: Alpha(opacity=0);
    -moz-transition: top 1.0s, opacity 1.0s;
    -ms-transition: top 1.0s, opacity 1.0s;
    transition: top 1.0s, opacity 1.0s;	
}
#cont3 .wrap  .swiper-container .swiper-wrapper > div.active{
	opacity: 1.0;
    filter: Alpha(opacity=100);
    top: 0%;	
}
#cont3 .wrap  .swiper-container .swiper-wrapper > div.mobile{
	opacity:1!important	
}
#cont3 .wrap .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  position:relative;
	  /*
	  border:1px solid #ddd;
	  */
	  background:#ddd;
	  height:340px;
	  box-sizing:border-box;
}
#cont3 .wrap .swiper-slide > a{
	display:block;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	box-sizing:border-box;
	position:relative;
	z-index:100;
	background:#fff;
}
#cont3 .wrap .swiper-slide > .hover{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	/*
	height:100%;
	*/
	height:0;
  	background-image: linear-gradient(to bottom, rgba(18,48,161,1) , rgba(0,96,161,1), rgba(122,173,208,1));
	box-sizing:border-box;
}
#cont3 .wrap .swiper-slide > a .figcaption{
	position:absolute;
	top:70%;
	left:0;
	width:100%;
	padding:10px 20px;
	box-sizing:border-box;		
}
#cont3 .wrap .swiper-slide > a .figcaption strong{
	margin-bottom:10px;
	display:block;	
}
#cont3 .wrap .swiper-slide > a .figcaption p{
	font-size:14px;
	letter-spacing:-0.5px;
	line-height:1.6;	
}
.swiper-button-next{
	background:url(../images/btn_next.png) no-repeat left bottom;
	width:23px;
	height:45px;
	right:0;
	margin-right:-65px;
}
.swiper-button-prev{
	background:url(../images/btn_prev.png) no-repeat left bottom;
	width:23px;
	height:45px;
	left:0;
	margin-left:-65px;	
}

/*========
	cont4
========*/

#cont4{
	width:100%;
	height:160px;
	background:#242a33;
}
#cont4 .wrap {
	height:160px;	
}
#cont4 .wrap h3{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-470px;
	margin-top:-9.5px;
}	
#cont4 .wrap > a.c_down{
	position:absolute;
	right:0;
	top:50%;
	display:block;
	width:265px;
	height:45px;
	box-sizing:border-box;
	padding:12px 20px;
	background:#375cac;
	border:2px solid #fff;
	text-align:center;
	color:#fff;
	font-size:16px;
	margin-top:-22.5px;
}



/* ========
		푸터
 ======== */
#footer{position:relative; padding:50px 0 40px;border-top:1px solid #868686; background:#fff;}
.index #footer{border-top-color:transparent;}
#footerInner .foot-logo{float:left; margin-right:7%;}
#footerInner .footer-address,
#footerInner .footer-address dl{
	float:left; 
	line-height:24px; 
	font-weight:400; 
	font-size:15px; 
	color:#707070;
}
#footerInner .footer-address dt,#footerInner .footer-address dd{display:inline-block;}
#footerInner .footer-address dd{margin-right:10px;}
#footerInner address{clear:both;}
#footerInner .foot-mark{position:absolute; right:0;}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}



/* ========
	서브레이아웃
 ======== */
.sub_visual{
	overflow:hidden; 
	position:relative; 
	display:table; 
	width:100%; 
	height:320px; 	
}
.sub_visual > div.wrap{
	height:100%;	
}
.sub_visual > div.wrap .sub_visual-tit{
	font-size:40px; 
	letter-spacing:-0.75px; 
	font-weight:400; 
	text-align:right;
	color:#fff;
	position:absolute;
	top:60%;
	right:0;
}
.sub_visual > div.wrap .sub_visual-tit span{
	font-size:15px; 
	font-weight:400; 
	display:block;
	margin-top:20px;	
}

/* Sub Layout :: Location */
#contentLocation{
	position:relative; 
	width:100%; 
	height:50px; 
	border-top:1px solid #cfcfcf; 
	border-bottom:1px solid #cfcfcf; 
	background-color:#fff;
	z-index:10000
}
#contentLocation .wrap{
	background-color:#fff;
}
#contentLocation .wrap > ul{ height:100%;}
#contentLocation .wrap > ul > li{
	position:relative; 
	float:left; 
	width:210px; 
	height:100%; 
	letter-spacing:-0.25px; 
	color:#373737; 
	line-height:50px; 
	padding-right:20px;
	border-right:1px solid #cfcfcf
}
#contentLocation .wrap> ul > li.home{
	font-size:13px; 
	font-weight:300; 
	background:#000;
	text-align:center;
	width:75px;
    padding-right: 0!important;
    border-right: 0!important;
}
#contentLocation .wrap > ul > li > a{
	display:block; 
	padding-left:23px; 
	font-size:15px; 
	background:url(../images/location_arrow.jpg) no-repeat 100% 50%;
    color: #666;
}
#contentLocation .wrap > ul > li .location-2dep{
	display:none; 
	position:absolute; 
	top:50px; 
	left:0;
	width:228px; 
	border:1px solid #cfcfcf; 
	border-bottom-color:#000000; 
	background-color:#fff; 
	z-index:11
}
#contentLocation .wrap> ul > li.location1 .location-2dep{width:229px;}
#contentLocation .wrap > ul > li .location-2dep li{height:44px; line-height:44px; border-top:1px solid #cfcfcf;}
#contentLocation .wrap > ul > li .location-2dep li:first-child{border-top:0;}
#contentLocation .wrap > ul > li .location-2dep li a{display:block; padding-left:20px; color:#414141; font-size:15px; font-weight:400; letter-spacing:-0.75px;}
#contentLocation .wrap > ul > li .location-2dep li a:hover{background:#f0f0f0 url(../images/location_arrow2.jpg) no-repeat 90% 50%}
#contentLocation .wrap > ul > li.location2 .location-2dep{
	width:230px;
	margin-left:-1px;	
}
#sub_content{
	width:100%;	
}
#sub_content .wrap{
	padding:70px 0;	
}
#sub_content .wrap h1{

}
#sub_content .wrap > h3{
    display: inline-block;
    position: relative;
    top: 2px;
    color: #151515;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.75px;
    width: 100%;
    text-align: center;
}
#sub_content .wrap h3.sub_in_tit span{
    padding: 42px 0;
    color: #151515;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.75px;
    text-align: center;
    border-bottom: 3px solid #375cac;
    margin: 0 auto;
    position: relative;
    z-index: 11;
    display: inline-block;
}
#sub_content .wrap h3.this:after{
	content:"";
	display:block;
	position:absolute;
	width:3px;
	height:70px;
	background:#0060a1;
	top:100%;
	left:0;
	margin-top:-20px;
}
#sub_content .wrap .com_tit {
    display: inline-block;
    position: relative;
    top: 1px;
    height: 31px;
    padding: 0 35px 42px 0px;
    color: #151515;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.75px;
    text-align: left;
}
#sub_content .wrap .com_tit span {
    display: inline-block;
    padding-left: 10px;
    font-size: 15px;
    color: #6b6b6b;
    font-weight: 400;
    position: relative;
    top: 5px;
}



/* ===================================
	애니메이션효과
 =================================== */
@-webkit-keyframes inFromRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes inFromLeft {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}