@charset "utf-8";
/* CSS Document */


	.section .icon {margin:0 auto; overflow:hidden;}
	.section .icon:after{display:block;content:'';clear:both}
	.section .icon ul {display:flex; justify-content:center; align-items:center; margin:auto; max-width:1200px;}
	.section .icon ul li {width:15%; height:100%; display:table; text-align:center;}
	.section .icon ul li a {color:#222; display:block; font-size:17px; display:table-cell; vertical-align:middle; font-weight:bold; padding:20px 0;}
	.section .icon ul li a img {display: block; margin: auto;}


/* 공통 */
	h3 {font-size:24px;}
	h2 {font-size:32px;}

	#contents {width:100%; overflow:hidden; }
	#contents .section01 {width:100%; overflow:hidden;}
	#contents .section01 .swrap {max-width:1200px; margin:0 auto; padding:0; display:flex; justify-content:space-between; flex-wrap:wrap;}
	.section01 .board {padding:20px; position:relative; width:24%;}
		.section01 .board h3 {color:#fff;}
		.section01 .board ul {margin:25px 0 15px;}
		.section01 .board ul li {border-bottom:1px solid rgba(255,255,255,0.3); padding:15px 0; line-height:20px;}
		.section01 .board ul li a {color:#fff; text-overflow:ellipsis; overflow:hidden; width:100%; display:block; white-space:nowrap; font-size:16px;}
		.section01 .board ul li span {color:rgba(255,255,255,0.65); line-height:24px; font-size:14px;}
		.section01 .board .plus { position:absolute; top:15px; right:18px}
		.section01 .board .plus a {font-size:20px; color:#fff}
			.section01 .s1 {/*background:#b3b8db;*/ background:url(/images/s1.jpg) no-repeat right; width:25%; background-size:cover;}
			.section01 .s2 {background:#52b5a5;}
			.section01 .s3 {background:#47c4d0;}
			.section01 .s4 {background:#6f91b6;  margin-right:0;}
				.section01 .s1 ul {margin-top:100px}
				.section01 .s1 ul li {border-bottom:none !important; padding:3px 5px !important; color:#fff; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:100%; display:block;}
				.section01 .s1 ul li a {margin-bottom:5px; }
				.section01 .s1 ul li span {background:#513a29; padding:3px 8px; margin-right:5px; color:#fff; }



	#contents .section02 {width:100%; max-width:1200px; margin:1.5% auto 0; overflow:hidden; background: url(/images/bg_main.jpg) 50% no-repeat; background-size:cover;  padding:50px; border:1px solid #ddd;}
	#contents .section02 .swrap {overflow:hidden;}
		.section02 .half {}
			.s5 {float:left; width:55%; padding:40px 0 0 40px;}
			.s6 {float:right; width:45%; text-align:right; padding: 15px 0 0 0;}
				.s5 h2 {font-size:24px; color:#fff494; margin-bottom:20px; line-height: 24px;}
				.s5 h2 span {font-size:12px; color:#fff494; margin-bottom:20px;}
				.s5 p {color:#fff; line-height:1.7; font-size:16px; padding-left:10px;}
				.s5 p.mb10 {margin-bottom: 10px;}
				.s6 img {border:8px solid #fff; box-sizing:content-box; width:100%; max-width:450px; cursor:pointer; border-radius:10px;}
				.vod_area {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 900;}
				.vod_area .vod_area_in {width:100%;}
				.vod_area .vod_area_in iframe, .vod_area .vod_area_in video {width:800px; height:450px; position:fixed; top:50%; left:50%; margin:-225px 0 0 -400px; z-index:999}
				.vod_area .close {position:fixed; top:50%; right:50%; margin: -260px -400px 0 0; opacity: 5; cursor: pointer; z-index: 999; float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff;}
				.vod_area .bg {width:100%; height:100%; background:rgba(0,0,0,.7); position:fixed; top:0; bottom:0; left:0; right:0;}



	#contents .section03 {width:100%; overflow:hidden;}
	#contents .section03 .swrap {max-width:1200px; margin:1.5% auto; overflow: hidden;}
	.gallery {padding:25px 20px; float:left; width:49.5%; position:relative; margin-right:1%; border:1px solid #ddd; box-sizing: border-box;}
	.gallery:last-child {margin-right:0}
		.gallery h3 {margin-bottom:20px;}
		.gallery .tabList {}
		.gallery .tabList ul {overflow:hidden;}
		.gallery .tabList ul li {float:left; margin:0 1%; width:31.333%; text-align:center; position:relative;box-sizing:border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box}
		.gallery .tabList ul li a {}
		.gallery .tabList ul li a img {width:100%; /*height:112px;*/ max-width:170px;}
		.gallery .tabList ul li p a {width:95%; display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; margin:10px auto; color:#222;  font-size:18px;}
		.gallery .tabList ul li span {display: block; color:#888; font-size:13px; font-weight:normal}
		.gallery .plus {position:absolute; top:15px; right:18px}
		.gallery .plus a {font-size:20px; color:#444}


	#contents .section04 {display:flex; flex-wrap: wrap;}
	#contents .section04 .swrap {}
		.section04 .half {width:50%; float:left;}
		.section04 .half:nth-child(1) {background:#eb9478}
		.section04 .half:nth-child(2) {background:url(/images/bg_bottom.jpg) no-repeat center; background-size:cover}
				.half .left {width:100%; float:right; max-width:600px; padding:40px 25px;}
					.half .left ul {display:flex; justify-content:space-around; flex-wrap:wrap;}
					.half .left ul li {width:48%; margin-bottom:15px; border:1px solid #fff; box-sizing: border-box; position:relative;}
					.half .left ul li:nth-child(2n) {margin-right:0}
					.half .left ul li:nth-child(7), .left ul li:nth-child(8) {margin-bottom:0}
					.half .left ul li a {display:block; padding:15px; color:#fff;  font-size:18px;}
					.half .left ul li a:hover {background:#fff; color:#eb9478; transition:all 0.5s ease-out;}
					.half .left ul li a span {font-size:12px; line-height:18px; position:absolute; right:15px;  }
				.half .right {width:100%; max-width:600px; text-align:left; height:100%; padding:40px 25px;}
					.half .right h3 {font-weight:bold;}
					.half .right > ul {display:flex; justify-content:space-between; flex-direction:column; height:100%;}
					.half .right p {line-height:1.7; color:#555; font-size:15px;}
					.half .right li:nth-child(2) {margin:25px 0 35px; }
					.half .right li:last-child {width:48%; border:1px solid #777; box-sizing: border-box; position:relative;}
					.half .right li a {display:block; padding:15px; /*color:#777;*/}
					.half .right li a:hover {background:#777; color:#fff; transition:all 0.5s ease-out;}
					.half .right li a span {font-size:12px; line-height:18px; position:absolute; right:15px;}


#wrap>#contents {padding:0}


.section05 {}
.section05 .swrap {max-width: 1200px; margin:0 auto 50px; overflow: hidden; position:relative;}
.section05 .swrap .plus {position: absolute; top: 0; right: 18px;}
.section05 .swrap .plus a {font-size:20px; color:#444;}

.section05 .halfTb {width:50%; float:left; table-layout:fixed; border-top:2px solid #007ae6;}
.section05 .halfTb:nth-child(2n) {border-left:1px solid #d7e1eb;}
.section05 .halfTb tr {border-bottom:1px solid #d7e1eb;}
.section05 .halfTb tr th {background:#f7fbff; padding:10px 15px; color:#222; border-right:1px solid #d7e1eb; word-break:keep-all; line-height:1.2;  font-size:18px; font-weight:300;}
.section05 .halfTb tr td {padding:10px 15px; border-right:1px solid #d7e1eb; line-height:1.7; word-break:keep-all;}
.section05 .halfTb tr td:last-child {border-right:0;}
.section05 .halfTb tr td i {color:#007ae6;}





@media(max-width:1220px){
	#contents {padding:0 5px}
}


@media(max-width:1000px){
	.bx-wrapper .bx-controls-direction a {top:42%;}
	
	.section .icon ul li a img {margin-bottom:5px;}
	#contents .section02 {background:url(/images/bg_main.jpg) 30% no-repeat; background-size:cover;  padding:60px 30px;}
	#contents .section02 .swrap {height:auto;}
	.section02 .half {width:100%; text-align:center;}
	.s5 {padding:0; margin-top:25px; word-break:keep-all;}

	.s5 p {font-size:14px; }
	.s6 img {box-sizing:border-box;}

	.s5 h3 {margin:0 0 40px;}
	.gallery .tabList ul li p a {font-size:16px;}
	
	#wrap>#contents {padding-top:60px;}

	.visual ul.bxslider li {width:100%; position:absolute; left:50%; margin-left:-500px;}
	.visual	ul.bxslider li img {width:1000px; max-width:inherit;}
}


@media(max-width:850px){
	.s5 h2, h3 {font-size:18px;}
	.section04 .half {width:100%; float:inherit;}
	.half .left {float:inherit; margin:auto;}

	.section .icon ul li a {font-size:14px; padding:15px 0;}
	.section01 .board {width:49.5%; margin-bottom:1%}
	.section01 .board ul {margin-top:15px;}
	.section01 .board ul li a {font-size:15px;}
	.section01 .board ul li span {font-size:13px;}
	.section01 .s1 ul {margin-top:80px;}
	
	.half .left ul li a {font-size:15px; padding:10px;}
	.s2 {margin-right:0}
	.vod_area .vod_area_in {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; top:10%;}
	.vod_area .vod_area_in iframe, .vod_area .vod_area_in video { position: absolute; width:96%; height:100%; top:0; bottom:0; right:2%; left:2%; margin:auto}
	.vod_area .close{top:5%;right:5%;margin:0}
}


@media(max-width:700px){
	.gallery .tabList ul li {width:48%}
	.gallery .tabList ul li:last-child {display:none;}
	
	.section04 .half:nth-child(2) {background:url(/images/bg_bottom.jpg) no-repeat 60%; background-size:cover;}
	.half .right p {word-break:keep-all; width:85%; font-weight:600; background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.8)) no-repeat; display:inline}
}



@media(max-width:600px){
	
	.gallery {width:100%; margin-right:0; margin:1% 0}
	.gallery .tabList ul li {width:31.333%}
	.gallery .tabList ul li:last-child {display:block;}
	
	.section05 .swrap {margin:25px auto 50px;}
	#contents .section02 {padding:60px 20px;}

	
	.bx-wrapper .bx-controls-direction a {width:35px; height:35px; background-size:cover;}
	.section .icon ul li {width:20%;}
	.section .icon ul li a img {max-width:50px;}

	.visual ul.bxslider li {width:100%; position:absolute; left:50%; margin-left:-400px;}
	.visual	ul.bxslider li img {width:800px;}


}


@media(max-width:450px){
	.section01 .board {width:100%;}
	.section01 .s1 {background:#948367 url(/images/s1.jpg) no-repeat right; background-size:contain;}
	.gallery .tabList ul li {width:48%}
	.gallery .tabList ul li:last-child {display:none;}
	.half .right li:last-child {width:100%;}
	.s5 p {font-size:14px}
	.s5 br {display:none;}
}