@charset "utf-8";


@font-face {
  font-family: 'Roboto';
  src: url(../font/Roboto-Thin.woff2) format('woff2'),
       url(../font/Roboto-Thin.woff) format('woff'),
       url(../font/Roboto-Thin.otf) format('opentype');
   font-weight: 100;
   font-style: normal;
 }
@font-face {
    font-family: 'Roboto';
  src: url(../font/Roboto-Light.woff2) format('woff2'),
       url(../font/Roboto-Light.woff) format('woff'),
       url(../font/Roboto-Light.otf) format('opentype');
   font-weight: 300;
   font-style: normal;
 }
@font-face {
  font-family: 'Roboto';
   src: url(../font/Roboto-Regular.woff2) format('woff2'),
        url(../font/Roboto-Regular.woff) format('woff'),
        url(../font/Roboto-Regular.otf) format('opentype');
   font-weight: 400;
   font-style: normal;
 }
@font-face {
  font-family: 'Roboto';
   src: url(../font/Roboto-Medium.woff2) format('woff2'),
        url(../font/Roboto-Medium.woff) format('woff'),
        url(../font/Roboto-Medium.otf) format('opentype');
   font-weight: 500;
   font-style: normal;
 }
@font-face {
  font-family: 'Roboto';
   src: url(../font/Roboto-Bold.woff2) format('woff2'),
        url(../font/Roboto-Bold.woff) format('woff'),
        url(../font/Roboto-Bold.otf) format('opentype');
   font-weight: 700;
   font-style: normal;
 }

@font-face {
 font-family:"Noto Sans";
 src:url('../font/NotoSans-Light.eot');
 src:url('../font/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
     url('../font/NotoSans-Light.woff') format('woff'),
     url('../font/NotoSans-Light.ttf') format('truetype');
  font-weight:100;
  font-style:normal;
}
@font-face {
 font-family:"Noto Sans";
 src:url('../font/NotoSans-Thin.eot');
 src:url('../font/NotoSans-Thin.eot?#iefix') format('embedded-opentype'),
     url('../font/NotoSans-Thin.woff') format('woff'),
     url('../font/NotoSans-Thin.ttf') format('truetype');
  font-weight:200;
  font-style:normal;
}
@font-face {
 font-family:"Noto Sans";
 src:url('../font/NotoSans-DemiLight.eot');
 src:url('../font/NotoSans-DemiLight.eot?#iefix') format('embedded-opentype'),
     url('../font/NotoSans-DemiLight.woff') format('woff'),
     url('../font/NotoSans-DemiLight.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
}
@font-face {
 font-family:"Noto Sans";
 src:url('../font/NotoSans-Regular.eot');
 src:url('../font/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
     url('../font/NotoSans-Regular.woff') format('woff'),
     url('../font/NotoSans-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
}
@font-face {
 font-family:"Noto Sans";
 src:url('../font/NotoSans-Medium.eot');
 src:url('../font/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
     url('../font/NotoSans-Medium.woff') format('woff'),
     url('../font/NotoSans-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
}



*{margin:0;padding:0;vertical-align:middle;border:0;}
html,body{ width:100%; height:100%}
html{ overflow-y: scroll;}  /* scroll:스크롤바 생성 , hidden:스크롤 숨길 때*/
#wrap{ width: 100%; height: 100%;}
body>#wrap{ width: 100%; height: auto; min-height:100%;}


body{font:16px/1 'Roboto',"Noto Sans";color:#555;background:#fff;}
/* HTML5 새 요소 초기화 */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display:block;}
i,em, address {font-style:normal;vertical-align:top;}
table, input, textarea, select, button{font: 1em/1 "Noto Sans"; color: #555;}
ul,ol{list-style:none;}
fieldset, blockquote, iframe, button {border:none;}
input, select{vertical-align:middle;}
h1, h2, h3, h4, h5, h6{font-size:1em;}
a:link{color:#555;text-decoration:none;}
a:visited{color:#555;text-decoration:none;}
a:hover{color:#555;text-decoration:none;}
a:active{color:#555;text-decoration:none;}
a:focus{color:#555;text-decoration:none;}
hr {display:none;height:0;}
.input_text{padding:3px;border:1px solid #d4d4d4;}
.select_type{padding:2px;border:1px solid #d4d4d4;}
.content_text{font-size:12px;}
.hidden{display:none;position:absolute;font-size:0;width:0;height:0;line-height:0;background:none;}
.blind{text-indent:-2000px;overflow:hidden;}
.floatClear:after{content:'';display:block;clear:both;}
.no-drag {-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}







 /* 접근성 */
 .skip{z-index:4;position:absolute;left:50%;top:0;margin-left:-250px;width:500px;}
 .skip>li{position:absolute;left:50%;margin-left:-250px;top:0;width:500px;height:auto;}
 .skip>li>a{display:block;padding:0;font-size:0;text-align:center;background:#fff;color:#000;}
 .skip>li>a:focus{padding:15px 0;font-size:16px;box-sizing: border-box;}


 #wrap{width:100%;height:100%;margin:0 auto;overflow: hidden;font-family: 'Noto Sans';}

 /* 언어설정 */
 .En{font-family: 'Roboto';}
 .Ko{font-family: 'Noto Sans','Roboto';}

 #header{position:absolute;left:0;top:0;width:100%;height:auto;}
 	.header-con{position:relative;width:100%;max-width: 1600px;height: 120px;margin:0 auto;}
 	.header-con.addHead{z-index: 5;position:fixed;left:0;top:0;background:#2f3745;transition: all 0.3s;}
 		.border{z-index: 3;position: absolute;left:0;bottom:0%;width:100%;height:1px;background: #fff;opacity:0.2;}
 		.border.addHead{display: none;}
 			a.logoBt{z-index: 3;position: absolute;left:20px;top:50%;margin-top:-25px;width:165px;}
 			a.logoBt.addHead{display: none;}
 			a.logoBt>img{width:100%;}

 		/* 언어설정 버튼 */
 		.langBt-wrap{z-index: 3;position: absolute;top:43.5%;right:100px;width:80px;height: auto;cursor:pointer;}
 			a.langBt{padding: 0px 10px 10px 0;text-align: center;color:#fff;font-size:16px; font-weight: 400;box-sizing: border-box;}
 				.sub>li{display: block;font-size:16px;font-weight: 400;padding:10px 0;box-sizing: border-box;float:left;}
 				.sub>li>a{display: block;padding-bottom:2px;color:#ccc;transition: all 0.4s;}
 				.sub>li>a:hover{color:#fff;border-bottom:1px solid #fff;transition: all 0.4s;}
 				.sub>li>a:focus{color:#fff;border-bottom:1px solid #fff;transition: all 0.4s;}

 		/* 메뉴 버튼 3선 */
 		.gnbBt-wrap{z-index: 5;position:absolute;top:50%;margin-top:-12px;right:35px;width:30px;height:24px;}
 			.gnbBt-wrap>a{display:block;position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-2000px;overflow:hidden;}

 			.gnbBt-wrap-ul{position:relative;width:100%;height:24px;}
 				.gnb-line{position:absolute;width:100%;height:2px;background:#fff;}
 					.gnb-line1{top:0;transform:rotate(0deg);transition:all 0.3s;}
 					.gnb-line1.lineAni{top:50%;margin-top:-1px;transform:rotate(45deg);transition:all 0.3s;}

 					.gnb-line2{top:50%;margin-top:-1px;opacity:1;}
 					.gnb-line2.lineAni{top:50%;margin-top:-1px;opacity:0;}

 					.gnb-line3{bottom:0;transform:rotate(0deg);transition:all 0.3s;}
 					.gnb-line3.lineAni{bottom:50%;margin-bottom:-1px;transform:rotate(-45deg);transition:all 0.3s;}

 		/* 모달 홈버튼 */
 		.modal-home{z-index: 5;display: none;position: relative;left:20px;top:50%;margin-top:-8px;width:24px;}
 		.modal-home>a>img{width:100%;}

 		/* 메뉴 모달창 */
 			.modal-wrap{display:none;z-index:4;position:fixed;top:0;left:0;width:100%;min-height:100%;height:auto;background:#2f3745;}
 			.modalWin{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;}
 			.modalWin-ul{position: relative;top:110px;width:65%;height:70%;text-align: center;margin:0 auto;padding: 15px 0;box-sizing: border-box;overflow: hidden;}
 			.modalWin-ul>li{position:relative;float:left;height:24.5%;border-bottom:1px solid #484f5c;min-height: 48px;}
 			.modalWin-ul>li>a{position:relative;left:0;top:0;color:#fff;font-size: 32px;box-sizing: border-box;display: table-cell;}
 			.modalWin-ul>li:nth-child(odd){width:25%;float:left;display: table;}
 			.modalWin-ul>li:nth-child(even){width:75%;display: table;}

 			.sub-ul{position: absolute;width: 100%;top: 50%;margin-top:-10px;}
 			.sub-ul>li{float:left;width:33.33333%;line-height: 1.5;}
 			.sub-ul>li>a{color:#7d8798;font-size:20px;padding-bottom:3px;border-bottom:2px solid transparent;box-sizing: border-box;text-align: center;transition: all 0.3s;}
 			.sub-ul>li>a:hover{color:#94e564;transition: all 0.3s;border-bottom:2px solid #94e564;}
 			.sub-ul>li>a:focus{color:#94e564;transition: all 0.3s;border-bottom:2px solid #94e564;}

 	@media all and (max-width:1250px){
 			.modalWin-ul{width:80%;height:75%;}
 	}
 	@media all and (max-width:1000px){
 			.modalWin-ul>li>a{font-size:25px;}
 			.sub-ul>li>a{font-size:17px;}
 	}
 	@media all and (max-width:768px){
 		.header-con{width:100%;height:60px;}
 		a.logoBt{left:20px;top:50%;margin-top:-17px;width:111px;height: 34px;}
 		.langBt-wrap{display: none;}
 		.langBt-wrap.lang{z-index: 5;display: inline-block;left:70px;}
 		.gnbBt-wrap{z-index: 5;position:absolute;top:50%;margin-top:-9px;right:20px;width:20px;height:18px;}
 		.gnbBt-wrap-ul{position:relative;width:100%;height:18px;}
 		.sub>li{padding:15px 0;}
 		.modal-home{display: inline-block;}
 		.modalWin-ul{top:80px;width:100%;height:90%;padding:0 20px;box-sizing: border-box;}
 		.modalWin-ul>li>a{font-size:20px;left:15%;}
 		.sub-ul{height:100%;top: 0%;left:0;margin-top:0;}
 		.sub-ul>li{float:none;width:100%;height:33.33333%;position:relative;}
 		.sub-ul>li>a{font-size:15px;position: absolute;left:35%;top:50%;margin-top:-7.5px;}
 		.modalWin-ul>li:nth-child(odd){width:35%;}
 		.modalWin-ul>li:nth-child(even){width:65%;}
 		.modalWin-ul>li>a{padding-top: 20px;box-sizing: border-box;top:12px;}
 	}
 	@media all and (max-width:500px){
 		.modalWin-ul>li>a{left:4%;}
 		.sub-ul>li>a{left:36%;}
 	}

 	@media all and (max-height:580px){
 		.modalWin-ul{height:580px;overflow-y: auto;}
 	}

  /* new mobile menu */
 	@media all and (max-width:768px){
    .modalWin-ul {padding:0 30px;text-align:left;}
    .modalWin-ul>li:nth-child(odd){width:40%;}
    .modalWin-ul>li:nth-child(even){width:60%;}
    .modalWin-ul>li {height:auto;min-height:21px;padding:40px 0;border:none;}
    .modalWin-ul>li:after {content:'';display:block;clear:both;}
    .modalWin-ul>li:before {content:'';display:block;width:120%;height:1px;background:#484f5c;position:absolute;left:0;top:0;}
    .modalWin-ul>li:nth-of-type(1):before, .modalWin-ul>li:nth-of-type(2):before {content:none;}
    .modalWin-ul>li:nth-last-of-type(1), .modalWin-ul>li:nth-last-of-type(2) {border-bottom:1px solid #484f5c;}
    .modalWin-ul>li>a {position:relative;margin:0;padding:0;top:0;}
    .sub-ul {position:relative;}
    .sub-ul>li {float:left;height:auto;margin-bottom:20px;}
    .sub-ul>li:last-of-type {margin-bottom:0;}
    .sub-ul>li>a {position:relative;left:0;top:0;margin:0;}
    .sub-ul>li>a {margin-left:20px;}
  }
  @media all and (max-width:500px){
      .modalWin-ul>li>a{left:0px;}
      .sub-ul>li>a{left:18%;}
      .modalWin-ul>li:nth-child(odd){width:45%;height: 40px;}
      .modalWin-ul>li:nth-child(even){width:50%;height: 40px;}
  }

  #footer {z-index:1;position: relative;width:100%; left:0; height:auto;background: #fff;border-top:1px solid #eee;}
	.copyright{position: relative;width:100%;}
	.copyright>p{text-align: center;color:#aaa;font-size:13px;padding: 1.5% 0;box-sizing: border-box;}
  .copyright>p{font-family:Roboto;font-weight:300;}

	@media all and (max-width:500px){
		.sec2-wrap{width:100%;position: relative;left:0;top:0%;}
		.copyright>p{padding:3.3% 0 ;}
	}
	@media all and (max-width:340px){
		.sec2-wrap{width:100%;position: relative;left:0;top:0%;}
        .sub-ul>li>a {left:0;}
		.copyright>p{padding:3.8% 0 ;}
	}


	/* 고탑버튼 */
	.goTop-wrap{z-index:3;position:fixed;bottom:10%;right:8%;width:48px;height:48px;}
	.goTop-wrap>p{width:100%;height:100%;}
	.goTop-wrap>p>a{position:relative;display:block;width:100%;height:100%;}
	.goTop-wrap>p>a>i{position:absolute;display:block;width:100%;height:100%;background:url(../img/goTop.png);background-size:cover;transition: all 0.3s;}
	.goTop-wrap>p>a>i.top{width:100%;height:100%;background:url(../img/goTop_h.png);background-size:cover;transition: all 0.3s;}

	@media all and (max-width:1800px){
		.goTop-wrap{bottom:10%;right:5%;}
	}
	@media all and (max-width:1650px){
		.goTop-wrap{bottom:10%;right:4%;}
	}
	@media all and (max-width:1600px){
		.goTop-wrap{bottom:5%;right:1%;width:36px;height:36px;}
		.goTop-wrap>p>a>i.top{width:100%;height:100%;background:url(../img/goTop_h.png);background-size: cover;}
	}
	@media all and (max-width:768px){
		.goTop-wrap{bottom:2%;right:2%;width:36px;height:36px;}
		.goTop-wrap>p>a>i.top{width:100%;height:100%;background:url(../img/goTop_h.png);background-size: cover;}
	}