@charset "utf-8";

/* 접근성 */
.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;}

/* 언어설정 */
.En{font-family: 'Roboto';}
.Ko{font-family: 'Noto Sans';}

#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{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: absolute;left:0;top:50%;margin-top: -16px;color:#fff;font-size: 32px;margin-left:20px;box-sizing: border-box;}
			.modalWin-ul>li:nth-child(odd){width:25%;float:left;}
			.modalWin-ul>li:nth-child(even){width:75%;}

			.sub-ul{position: absolute;width: 100%;top: 50%;margin-top:-20px;}
			.sub-ul>li{float:left;width:33.33333%;}
			.sub-ul>li>a{color:#7d8798;font-size:20px;padding-bottom:3px;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-width:400px){
		.modalWin-ul>li>a{left:0px;}
		.sub-ul>li>a{left:18%;}
		.modalWin-ul>li:nth-child(odd){width:50%;}
		.modalWin-ul>li:nth-child(even){width:50%;}
	}
	@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:100%;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:nth-child(odd) {width:50%;height: 40px;}
	 .modalWin-ul>li:nth-child(even) {width: 50%;height: 40px;}
  }



#main {z-index:2;width:100%; height:auto;overflow: hidden;}
#section1{display:block;position:relative;width:100%;}
	.slide-wrap{z-index:0;position:absolute;left:0%;top:0;width:100%;height:100%;overflow:hidden;}
		.slide-wrap>li{position:absolute;top:0;left:0%;width:100%;height: 100%;opacity:0;}
			.slide-wrap>li>a{display:block;width:100%;height:100%;}

		/* 슬라이드 이미지 */
		.slide-wrap>li:nth-child(1){background:url(../img/main1.jpg) no-repeat center center;background-size:cover;opacity:1;}
		.slide-wrap>li:nth-child(2){background:url(../img/main2.jpg) no-repeat center center;background-size:cover;}
		.slide-wrap>li:nth-child(3){background:url(../img/main3.jpg) no-repeat right center;background-size:cover;}
		.slide-wrap>li:nth-child(4){background:url(../img/main4.jpg) no-repeat center center;background-size:cover;}

		.slide-con{z-index: 3;position: absolute;left:0;top:37%;width:100%;}
		.slide-con>li{width:100%;}
			.slide-con>li>p{font-size:68px;font-weight: 100;color:#fff;text-align: center;padding:0 10px;box-sizing: border-box;word-break: keep-all;}
			.slide-con>li>b{font-size:24px;font-weight: 400;color:#eee;text-align: center;display: block;margin:25px auto 50px auto;padding: 0 20px;box-sizing: border-box;word-break: keep-all;}
			.slide-con>li>a{display: block;font-size:20px;font-weight: 100;color:#fff;text-align: center;margin:0 auto;padding:22px 0;box-sizing: border-box;width:212px;height: 66px;border:2px solid #fff;border-radius: 33px;transition:all 0.3s;}
			a.detailBt.detail{background:#67ba35;box-shadow: 0px 10px 20px rgba(0,0,0,0.3);border:2px solid #67ba35;transition:all 0.3s;}

		.slide-con>li>p>br:nth-child(2){display: none;}
		.slide-con>li>b>br{display: none;}

		/* 네비게이션 버튼 */
			.sec1-navstickBt-wrap{z-index:2;position:absolute;bottom:10%;right:10%;width:auto;height:auto;transition:all 0.3s;}
				.sec1-navstickBt-wrap>li{float:left;margin:0 3px;}
				.sec1-navstickBt-wrap>li.sBt{margin-right:30px;}
					.sec1-navstickBt-wrap>li>a{font-size:20px;font-weight: 700;width:0px;color:rgba(255,255,255, .4);overflow: hidden;margin-top:10px;transition:0.4s;}
					.sec1-navstickBt-wrap>li>a.sBt{display:block;font-size:28px;transition:all 0.4s;width:50px;color:#fff;margin-top:-8px;}

					.sec1-navstickBt-wrap>li>a>span{transition:all 0.3s;float:right;width:0px;height: 0;opacity:0;background:#fff;display: none;position: absolute;top:46%;margin-left:5px;overflow: hidden;}
					.sec1-navstickBt-wrap>li>a>span.sBt{transition:all 0.3s;width:40px;height:3px;opacity:1;display: inline-block;margin-top:-4px;}

		/* 마우스 스크롤 애니메이션 */
				@-webkit-keyframes ani-mouse {
				    0% {opacity: 1;top: 29%;}
				    15% {opacity: 1;top: 50%;}
				    50% {opacity: 0;top: 62%;}
				    100% {opacity: 0;top: 29%;}
				}
				@-moz-keyframes ani-mouse {
						0% {opacity: 1;top: 29%;}
						15% {opacity: 1;top: 50%;}
						50% {opacity: 0;top: 62%;}
						100% {opacity: 0;top: 29%;}
				}
				@keyframes ani-mouse {
						0% {opacity: 1;top: 29%;}
						15% {opacity: 1;top: 50%;}
						50% {opacity: 0;top: 62%;}
						100% {opacity: 0;top: 29%;}
				}

			.scroll-btn{cursor:pointer;display: block;position: absolute;left: 50%;margin-left:-50px;bottom: 2%;width:100px;text-align: center;}
				.mouse {position: relative;display: block;width: 22px;height: 36px;margin: 0 auto 10px;border: 2px solid #fff;border-radius: 13px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
				.mouse>*{position: absolute;display: block;top: 29%;left: 50%;width: 6px;height: 6px;margin: -3px 0 0 -3px;background: #fff;border-radius: 50%;-webkit-animation: ani-mouse 2.5s linear infinite;-moz-animation: ani-mouse 2.5s linear infinite;animation: ani-mouse 2.5s linear infinite;}
			.scroll-btn>i{display: block;font-size:14px;color:#fff;text-align: center;}

	@media all and (max-width:768px){
		.sec1-navstickBt-wrap>li.sBt{margin-top:-3px;}
		.slide-con>li>p{width:100%;font-size:7vw;}
		.slide-con>li>b{width:100%;font-size:3vw;line-height: 1.2;}
		.scroll-btn{display: none;}
		.sec1-navstickBt-wrap{right:50%;margin-right:-85px;width:170px;}
		.slide-con>li>a{font-size:15px;padding:17px 0;box-sizing: border-box;width:150px;height: 50px;border:2px solid #fff;border-radius: 33px;border-width:1px;}
		.slide-wrap>li:nth-child(3){background:url(../img/main3.jpg) no-repeat right center;background-size:cover;background-position:40% bottom;}
		.sec1-navstickBt-wrap>li>a{font-size:18px;}
		.sec1-navstickBt-wrap>li>a.sBt{font-size:24px;margin-top:-2px;}
		.sec1-navstickBt-wrap>li>a>span.sBt{margin-top:-2px;}
	}
	@media all and (max-width:465px){
		.slide-con>li>p>br:nth-child(2){display: block;}
		.slide-con>li>b>br{display: block;}
		.slide-con>li>p{font-size:30px;}
		.slide-con>li>b{font-size:15px;}
	}
	@media all and (min-height:1000px){
		.sec1-navstickBt-wrap{bottom:12%;}
		.slide-con>li>b{margin: 35px auto 50px auto;}
		.slide-con{top:36%;}
	}
	@media all and (max-height:870px){
		.slide-con{position: absolute;left:0;top:33%;width:100%;}
		.slide-con>li>b{margin: 25px auto 30px auto;}
	}
	@media all and (max-height:600px){
		.slide-con{position: absolute;left:0;top:27%;width:100%;}
		.slide-con>li>b{margin: 25px auto 30px auto;}
	}
	@media all and (max-height:400px){
		.slide-con{position: absolute;left:0;top:25%;width:100%;}
		.slide-con>li>b{margin: 20px auto 25px auto;}
	}



#section2{display:block;position:relative;width:100%;background:url(../img/sec2.jpg) no-repeat center center;background-size:cover;}
	.sec2-wrap{width:100%;position: relative;left:0;top:18%;}
		.sec2-wrap>h2{font-size:72px;text-align: center;color:#5f6167;font-weight: 100;}
		.sec2-wrap>p{font-size:16px;text-align: center;color:#9c9ea2;font-weight: 500;margin-top:22px;}
		.sec2-wrap>p>br{display: none;}

		/* 4개의 선택박스 */
		.sec2-box{display: flex;justify-content: space-between;width:1320px;position:relative;left:50%;padding-top:5.5%;margin-left:-660px;box-sizing: border-box;}
		.sec2-box>li{float:left;position: relative;width:290px;min-height: 391px;cursor: pointer;}
		.sec2-box>li.hover{box-shadow: 0px 20px 35px rgba(0,0,0,0.35); -webkit-animation: topMove 0.3s;animation: topMove 0.3s; animation: topMove 0.3s; animation-fill-mode: both;}
			.sec2-box>li>h3{font-size:24px;color:#fff;font-weight: 400;padding: 30px;box-sizing: border-box;}
			.sec2-box>li>img{position: absolute;left:0;bottom:0;width:100%;opacity:0.1;}
			.sec2-box>li>span{display: block;margin-left: 30px;width:20px;height: 1px;background:#fff;}

			@keyframes topMove {
			  from {top: 0px;}
			  to {top: -40px;}
			}


		/* 섹션2 버튼 */
		.sec2-box>li>i{display: block;position: absolute;right:10%;bottom:7%;width:40px;height: 40px;background: url(../img/hov_bf.png);transition:all 0.3s;}
		.sec2-box>li>a{display: block;position: absolute;right:10%;bottom:7%;width:40px;height: 40px;}
		.sec2-box>li>i.hover{display: block;position: absolute;right:10%;bottom:7%;width:40px;height: 40px;background: url(../img/hov_at.png);transition:all 0.3s;}

		.sec2-box>li.box1{background: #11458b;background-image: linear-gradient(to top, rgba(17,69,139,0.75) 0%,rgba(17,69,139,1) 100%),url(../img/sec2-1.png);background-size: 100% 50%;background-repeat: no-repeat;background-position: bottom;}
		.sec2-box>li.box2{background: #3d3b7e;background-image: linear-gradient(to top, rgba(61,59,126,0.85) 0%,rgba(61,59,126,1) 100%),url(../img/sec2-2.png);background-size: 100% 50%;background-repeat: no-repeat;background-position: bottom;}
		.sec2-box>li.box3{background: #379779;background-image: linear-gradient(to top, rgba(55,151,121,0.7) 0%,rgba(55,151,121,1) 100%),url(../img/sec2-3.png);background-size: 100% 50%;background-repeat: no-repeat;background-position: bottom;}
		.sec2-box>li.box4{background: #51586a;background-image: linear-gradient(to top, rgba(81,88,106,0.7) 0%,rgba(81,88,106,1) 100%),url(../img/sec2-4.png);background-size: 100% 50%;background-repeat: no-repeat;background-position: bottom;}


		/* 리스트 내용 */
		.sec2-list{padding: 20px 0 20px 30px;box-sizing: border-box;}
		.sec2-list>li{position: relative;margin-bottom:13px;}
		.sec2-list>li>a{display:block;color:#fff;font-size:16px;font-weight: 200;line-height: 1.4;word-break: keep-all;margin-left:10px;}
		.sec2-list>li>a>br{display:none;}
		.sec2-list>li>a::before{position: absolute;left:0;/*top:8px;*/top:10px;content:'';width:3px;height: 3px;opacity:0.6;border-radius: 50%;background: #fff;}

@media all and (max-width:1750px){
	.sec2-box{margin-top:15px;}
}
@media all and (max-width:1320px){
	.sec2-box{width:100%;left:0;margin-left:0;margin-top:35px;}
	.sec2-box>li{width:23%;margin:0 1%;}
	.sec2-list>li>a>br {display: block;}
}
@media all and (max-width:1100px){
	.sec2-box>li{height: 300px;}
}
@media all and (max-width:950px){
	.sec2-box>li>h3{font-size:22px;padding: 30px 20px;}
	.sec2-box>li>span{margin-left: 20px;}
	/* .sec2-list{top:30%;padding: 20px;} */
	.sec2-list>li>a{font-size:15px;}
	.sec2-box>li>i{width:30px;height:30px;background-size:cover;bottom:10%;}
	.sec2-box>li>i.hover{width:30px;height:30px;background-size:cover;bottom:10%;}
	.sec2-box>li>a{width:30px;height:30px;}
}
@media all and (max-width:850px){
	.sec2-box>li{height: 270px;}
	.sec2-box>li>h3{font-size:22px;padding: 20px 20px 25px 20px;}
	.sec2-box>li>span{margin-left: 20px;}
	.sec2-list{top:30%;padding: 10px 20px;}
	.sec2-list>li>a{font-size:15px;}
	.sec2-box>li{width:24%;margin:0 0.5%;}
}
@media all and (max-width:768px){
	.sec2-box{flex-direction: column;padding:0 20px 4% 20px;box-sizing: border-box;}
	.sec2-box>li{float:none;width:100%;height: 150px;min-height:auto;margin:20px 0;background-size: cover !important;background-position: right !important;}
	.sec2-box>li.hover{margin-top:0px;box-shadow: 0px 20px 35px rgba(0,0,0,0.35);}

	.sec2-box>li>h3{font-size:19px;}
	.sec2-box>li>i{width:40px;height:40px;bottom:10%;}
	.sec2-box>li>i.hover{width:40px;height:40px;bottom:10%;}
	.sec2-box>li>a{width:40px;height:40px;bottom:10%;}
	/* .sec2-1c{position: absolute;left:50%;top:0;width:50%;height:100%;background-image: linear-gradient(to left, rgba(17,69,139,0.75) 0%,rgba(17,69,139,1) 100%),url("../img/sec2-1.png");background-position: right center;}
	.sec2-2c{position: absolute;left:50%;top:0;width:50%;height:100%;background-image: linear-gradient(to left, rgba(61,59,126,0.85) 0%,rgba(61,59,126,1) 100%),url("../img/sec2-2.png");background-position: right center;}
	.sec2-3c{position: absolute;left:50%;top:0;width:50%;height:100%;background-image: linear-gradient(to left, rgba(55,151,121,0.7) 0%,rgba(55,151,121,1) 100%),url("../img/sec2-3.png");background-position: right center;}
	.sec2-4c{position: absolute;left:50%;top:0;width:50%;height:100%;background-image: linear-gradient(to left, rgba(81,88,106,0.7) 0%,rgba(81,88,106,1)  100%),url("../img/sec2-4.png");background-position: right center;} */
	.sec2-wrap{width:100%;position: relative;left:0;top:0%;}
	.sec2-wrap>h2{font-size:8vw;}
	.sec2-wrap>p{font-size:16px;margin-bottom:40px;line-height: 1.2;}
	.sec2-wrap>p>br{display: block;}
	.sec2-list{display: none;}
}
@media all and (max-width:450px){
	.sec2-wrap>h2{font-size:36px;}
	.sec2-wrap>p{font-size:15px;}
}
@media all and (max-width:400px){
	.sec2-1c{left:45%;width:55%;}
	.sec2-2c{left:45%;width:55%;}
	.sec2-3c{left:45%;width:55%;}
	.sec2-4c{left:45%;width:55%;}
}



	#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%;}
		.copyright>p{padding:3.8% 0 ;}
	}
