@charset "utf-8";

html,body{width:100%;height:100%; overflow-y:auto;}
body{font-family:"NanumSquare", "Noto Sans KR", 'Malgun Gothic', dotum, sans-serif;color:#666;font-size:18px;line-height:1.5em;font-weight:300}
#wrapper{display: flex; justify-content: space-between; height: 100%; align-items: top; }
#wrapper #header{width: 25%; position: sticky; top: 0; box-shadow: 1px 4px 11px 7px #0000000f;  background-color:#fff; padding:50px 70px; box-sizing:border-box;}
#wrapper #main_container{width: 75%; overflow-x:hidden; overflow-y: auto; padding:50px 0; }
#wrapper #sub_container{width: 75%; overflow-x:hidden; overflow-y: auto; padding: 20px 8%; }
#wrapper #main_container{background:#ebebeb;}

.contents_wrap{max-width:1600px;margin:0 auto;}
.contents_wrap:after{content:'';display:block;clear:both;}

#header h1.logo{position:absolute;top:50px;right:50px;display:inline-block;width:107px;height:83px;vertical-align:middle;background:url(/images/logo.svg) no-repeat 50%;z-index:9}
#header h1.logo a{display:block;width:100%;height:100%;}
#header .title{margin-top:120px;}
#header .title span{display:inline-block; font-size:30px; font-weight:bold; color:#4f4f4f; line-height:1em;}
#header .title .img-txt{margin:20px 0 25px;}
#header .title h3{display:block; font-size:40px; font-weight:bold; color:#000; line-height:1em; font-family: 'NanumSquareAcEB';}
#header .info{position:absolute; bottom:50px; width:calc(100% - 120px);}
#header .info > p{display:block; margin-bottom:25px; font-size:20px; color:#333; line-height:1.5em; word-break:keep-all; font-weight:bold;}
#header .info > p:last-child{margin:0;}
#header .img-bottom{position:relative; left:-6px; margin-top:60px;}
#header .img-bottom img{width:auto; max-width:100%;}

@media only screen and (max-width:1680px) {
	#wrapper #header{padding:50px;}
	#header .title span{font-size:28px;}
	#header .title h3{font-size:38px;}
	#header .info{width:calc(100% - 100px);}
	#header .info > p{font-size:19px;}
	#header .info > p br{display:none;}
}
@media only screen and (max-width:1500px) {
	#wrapper #header{padding:50px 40px;}
	#header h1.logo{top:40px; right:40px;}
	#header .title span{font-size:26px;}
	#header .title h3{font-size:36px;}
	#header .info{width:calc(100% - 80px);}
	#header .info > p{font-size:18px; margin-bottom:20px;}
	#header .img-bottom{margin-top:50px;}

}
@media only screen and (max-width:1200px) {
	#wrapper{display:block; height:auto;}
	#wrapper #header{position:relative; width:100%; padding:50px 70px;}
	#wrapper #main_container,
	#wrapper #sub_container{width:100%;}
	#wrapper #main_container{overflow:hidden;}
	#header .title{margin-top:20px;}
	#header .info{position:relative; bottom:0; margin-top:100px; width:100%;}
	#header .info > p{margin:0;}
}
@media only screen and (max-width:760px) {
	#wrapper #header{padding:50px 40px;}
	#header .info > p{margin-bottom:20px;}
	#header .info > p br{display:block;}
}
@media only screen and (max-width:540px) {
	#wrapper #header{padding:30px 30px 50px;;}
	#header h1.logo{top:20px; right:20px; height:70px;}
	#header .title{margin-top:50px;}
	#header .title span{font-size:20px;}
	#header .title .img-txt img{height:120px;}
	#header .title h3{font-size:30px;}
	#header .info{margin-top:50px;}
	#header .info > p{font-size:17px;}
	#header .img-bottom {left:0;}
	#header .img-bottom img{width:100%;}
}


@media only screen and (max-width:1680px) {

}
@media only screen and (max-width:1400px) {
	body{font-size:17px}

}
@media only screen and (max-width:1100px) {
	body{font-size:16px}

}
@media only screen and (max-width:760px) {
	body{font-size:15px}

}






/* visual_slide */
.swiper-container {height:100%;list-style: none; padding: 0px; overflow: hidden; margin-right: auto; margin-left: auto; position: relative; z-index: 1;}
.swiper-wrapper {width: 100%; height: 100%; display: flex; position: relative; z-index: 1; box-sizing: content-box; transition-property: transform;}
.swiper-slide {width: 100%; height: 100%; position: relative; transition-property: transform; flex-shrink: 0;background-position:50% 50%;background-size:cover}

#main_container{position:relative;}



.section1{position:relative; margin-bottom:50px; width:100%;}
.section2{position:relative; width:100%;}
.section1:before,
.section2:before{content:''; position:absolute; top:0; right:-50px; width:171px; height:480px; background:url(../images/bg-arr.png)no-repeat center; background-size:cover; z-index:2;}

@media only screen and (max-width:1200px) {
	.section1:before,
	.section2:before{height:540px;}
}
@media all and (max-width:540px) {
	.section1{margin-bottom:30px;}
	.section1:before, .section2:before{right:-80px; height:500px;}
}