@charset "utf-8";

#visual{overflow:hidden;height:98vh;}
#visual .swiper-container{width:100%;height:100%;}
#visual .swiper-wrapper{width:100%;height:100%;}
#visual .swiper-slide{width:100%;height:100%;}
#visual .v1{background:url(/image/img/visual1.jpg) no-repeat center;}
#visual .v2{background:url(/image/img/visual2.jpg) no-repeat center;}
#visual .v3{background:url(/image/img/visual3.jpg) no-repeat center;}
#visual .v4{background:url(/image/img/visual4.jpg) no-repeat center;}
#visual .v5{background:url(/image/img/visual5.jpg) no-repeat center;}

#visual .swiper-button-prev{
    width:32px;
    height:67px;
    margin-top:-33px;
	background:url(/image/img/vprev.png) no-repeat;
	opacity:1;
	cursor:pointer;
	left:2%;z-index:300;
}
#visual .swiper-button-next{
    width:32px;
    height:67px;
    margin-top:-33px;
	background:url(/image/img/vnext.png) no-repeat;
	right:2%;z-index:300;
}

#visual .txts{
	position:absolute;left:50%;top:50%;z-index:50;
	width:900px;
	transform:translate(-50%,-50%);
	text-align:center;
}
#visual .txts .visual_tit{
	font-family: 'Titillium Web';
	font-size:78px;color:#fff;font-weight:300;
	text-shadow:0 2px 5px rgba(0,0,0,0.4);
}
#visual .txts .visual_tit:after{
	display:block;
	content:"";
	width:80px;height:4px;
	margin:0 auto 35px;
	background:#cd161c;
}
#visual .txts .visual_txt{font-size:19px;color:rgba(255,255,255,0.8);text-shadow:0 2px 5px rgba(0,0,0,0.4);}
#visual .txts a{
	display:inline-block;
	box-sizing:border-box;
	position:relative;
	width:278px;height:68px;
	margin-top:70px;
	border:2px solid rgba(255,255,255,0.8);
	font-family: 'Titillium Web';font-size:16px;color:#fff;
	text-align:left;
	padding:0 25px;
	line-height:64px;
}
#visual .txts a span{
	position:absolute;right:25px;top:50%;
	transform:translateY(-50%);
}

#visual .swiper-pagination{
    bottom: 50px;
    left:0;
    width: 100%;	
}
#visual .swiper-pagination .swiper-pagination-bullet{
	box-sizing:border-box;
	width:12px;height:12px;
	border:2px solid #fff;
	background:0;
	opacity:1;
	margin:0 10px;
}
#visual .swiper-pagination .swiper-pagination-bullet-active{
	position:relative;background:#fff;
	margin-right:30px;
}
#visual .swiper-pagination .swiper-pagination-bullet-active:after{
	display:block;
	content:"";
	width:20px;height:2px;
	background:#fff;
	position:absolute;left:100%;top:50%;
	margin:-1px 0 0 10px;
}




/**/
#wrap{background:#}
.conwrap{position:relative;max-width:1400px;width:100%;margin:0 auto;}
.conwrap:after{display:block;content:"";clear:both;}
.main_title{
	font-family: 'Titillium Web';
	font-size:46px;
	color:#272727;
}


/* section1 */
.section1{
	position:relative;
	padding:114px 0 140px;
	background:#fafafa;
}
.section1:before{
	display:block;
	content:"";
	width:100%;height:1190px;
	background:#f3f3f3;
	position:absolute;left:0;bottom:0;
}
.section1 .titarea{position:absolute;left:0;top:10px;}
.section1 .titarea h3{
	font-family: 'Titillium Web';
	font-size:46px;color:#000;line-height:100%;
}
.section1 .titarea h3:after{
	display:block;
	content:"";
	width:80px;height:1px;
	background:#afafaf;
	margin:20px 0 30px;
}
.section1 .titarea p{font-size:16px;color:#777;}
.section1 .conarea{overflow:hidden;}
.section1 .conarea a{display:block;width:100%;height:100%;}
.section1 .conarea .leftarea{
	float:left;
	width:50%;
}
.section1 .conarea .leftarea>div a{
	position:relative;
	display:block;
	transition:all 0.6s;
}
.section1 .conarea .leftarea>div:hover a{
	box-shadow:5px 5px 0 #cd161b inset,-5px -5px 0 #cd161b inset;
	transition:all 0.6s;
}


.section1 .conarea .rightarea{
	float:right;
	width:50%;
}
.section1 .conarea .rightarea a{transition:all 0.6s;}
.section1 .conarea .rightarea .size2:hover a{
	box-shadow:5px 5px 0 #cd161b inset,-5px -5px 0 #cd161b inset;
	transition:all 0.6s;
}
.section1 .conarea .rightarea .size3:hover a{
	box-shadow:5px 5px 0 #cd161b inset,-5px -5px 0 #cd161b inset;
	transition:all 0.6s;
}

.section1 .conarea .size1{overflow:hidden;height:350px;}
.section1 .conarea .size2{overflow:hidden;height:700px;}
.section1 .conarea .size3{overflow:hidden;width:50%;height:350px;}

.section1 .conarea .tool1{background:url(/image/img/section1_img1.jpg) no-repeat center;background-size:cover;}
.section1 .conarea .tool2{background:url(/image/img/section1_img2.jpg) no-repeat center;background-size:cover;}
.section1 .conarea .tool3{background:url(/image/img/section1_img3.jpg) no-repeat center;background-size:cover;}
.section1 .conarea .toolwrap{overflow:hidden;}
.section1 .conarea .toolwrap>div{float:left;}
.section1 .conarea .toolwrap>div:nth-child(1){
	background:url(/image/img/section1_img4.jpg) no-repeat center;background-size:cover;
}
.section1 .conarea .toolwrap>div:nth-child(2){
	background:url(/image/img/section1_img5.jpg) no-repeat center;background-size:cover;
}
.section1 .conarea .toolwrap>div:nth-child(3){
	background:url(/image/img/section1_img6.jpg) no-repeat center;background-size:cover;
}
.section1 .conarea .toolwrap>div:nth-child(4){
	background:url(/image/img/section1_img7.jpg) no-repeat center;background-size:cover;
}
.section1 .conarea h4{
	display:inline-block;
	font-family: 'Titillium Web';
	font-size:22px;font-weight:600;color:#000;line-height:120%;
	border-bottom:1px solid #808080;
	margin:45px 0 10px 45px;
}
.section1 .conarea p{margin:0 0 0 45px;font-size:14px;color:#6f6f6f;}




/* section2 */
.section2{padding:125px 0 140px;text-align:center;}
.section2 .conwrap{
	position:relative;
	margin-top:40px;
	min-height:659px;
}
.section2 .conwrap .bg{
	width:794px;height:659px;
	background:url(/image/img/section2_bg.jpg) no-repeat left top;
	position:absolute;left:0;top:0;
}
.section2 .txtarea{
	float:right;
	box-sizing:border-box;
	width:665px;height:569px;
	padding:80px 0 0 70px;
	background:#fff url(/image/img/section2_bg1.gif) no-repeat 325px 326px;
	box-shadow:5px 5px 30px rgba(0,0,0,0.2);
	text-align:left;
}
.section2 .txtarea h4{
	font-family: 'Titillium Web';
	font-size:38px;color:#111;
}
.section2 .txtarea p{margin:10px 0 20px;font-size:16px;color:#777;}
.section2 .txtarea ul{overflow:hidden;}
.section2 .txtarea ul li{
	float:left;
	width:156px;height:156px;
	margin-right:20px;
	border:1px solid #ddd;
	border-radius:50%;
	text-align:center;
}
.section2 .txtarea ul li a{display:block;padding-left:10px;}
.section2 .txtarea ul li a .ico{height:53px;margin:25px 0 0;}
.section2 .txtarea ul li:nth-child(1) a .ico{background:url(/image/img/section2_ico1_over.png) no-repeat center;}
.section2 .txtarea ul li:nth-child(2) a .ico{background:url(/image/img/section2_ico2.png) no-repeat center;}
.section2 .txtarea ul li a .sbj{margin:10px 0 0;font-size:15px;color:#666;}
.section2 .txtarea>a{
	display:block;
	position:relative;
	box-sizing:border-box;
	width:278px;height:68px;
	padding:0 25px;
	margin:37px 0 0 -160px;
	text-align:left;
	font-family: 'Titillium Web';font-size:16px;color:#fff;
	background:#e00515;
	line-height:68px;
}
.section2 .txtarea>a span{position:absolute;right:25px;top:50%;transform:translateY(-50%);}




/* section3 */
.section3{padding:125px 0 140px;text-align:center;background:#f3f3f3 url(/images/main/section3_bg.gif) no-repeat right 255px;}
.section3 .conwrap{margin-top:55px;}
.section3 .meritbox{
	float:left;
	width:320px;height:300px;
	box-sizing:border-box;
	background:#fff;
	padding:45px 45px;
	margin:0 40px 0 0;
	text-align:left;
}
.section3 .meritbox:nth-child(4){margin-right:0;}

.section3 .meritbox .num{min-height:71px;font-size:18px;color:#656565;}
.section3 .meritbox .num .count{
	display:inline-block;
	margin-right:5px;
	font-family: 'Titillium Web';font-size:70px;color:#cd161c;font-weight:600;
}

.section3 .meritbox:nth-child(1) .num{
	background:url(/image/img/section3_ico1.png) no-repeat right center;
}
.section3 .meritbox:nth-child(2) .num{
	background:url(/image/img/section3_ico2.png) no-repeat right center;
}
.section3 .meritbox:nth-child(3) .num{
	background:url(/image/img/section3_ico3.png) no-repeat right center;
}
.section3 .meritbox:nth-child(4) .num{
	background:url(/image/img/section3_ico4.png) no-repeat right center;
}

.section3 .meritbox h4{margin-bottom:10px;font-size:20px;color:#121212;font-weight:500;}
.section3 .meritbox p{font-size:15px;color:#777;}





/* 메인 모션 */
.section1{}
.section1 .titarea h3{opacity:0;transform:translateX(40px);}
.section1 .titarea p{opacity:0;transform:translateX(40px);}

.section1 .conarea{perspective:800px;}
.section1 .conarea .size1,.section1 .conarea .size2,.section1 .conarea .size3 {position: relative;}
.section1 .conarea .size1 a::before,
.section1 .conarea .size2 a::before,
.section1 .conarea .size3 a::before{
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.section1 .conarea .size1 h4,
.section1 .conarea .size2 h4,
.section1 .conarea .size3 h4{transform:rotate(0);transition:all 0.4s ease-out;}
.section1 .conarea .size1 p,
.section1 .conarea .size2 p,
.section1 .conarea .size3 p{transform:rotate(0);transition:all 0.4s ease-out;}


.section1.in-view .titarea h3{opacity:1;transform:translateX(0px);transition:all 1s ease-out;}
.section1.in-view .titarea p{opacity:1;transform:translateX(0px);transition:all 1s ease-out .3s;}
.section1 .conarea .size1:hover a::before,
.section1 .conarea .size2:hover a::before,
.section1 .conarea .size3:hover a::before{
	-webkit-animation: shine 1s;
	animation: shine 1s;
}
.section1 .conarea .size1:hover h4,
.section1 .conarea .size2:hover h4,
.section1 .conarea .size3:hover h4{transform:translateY(5px);transition:all 0.4s;}
.section1 .conarea .size1:hover p,
.section1 .conarea .size2:hover p,
.section1 .conarea .size3:hover p{transform:translateY(5px);transition:all 0.4s ;}



@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}



.section2{}
.section2 .conwrap .bg{opacity:0;top:60px;}
.section2 .txtarea{
	opacity:0;
	transform:translateX(-100px);
}
.section2 .txtarea>a{transform:translateX(190px);}


.section2.in-view .conwrap .bg{opacity:1;top:0;transition:all 1s ease-out;}
.section2.in-view .txtarea{
	opacity:1;
	transform:translateX(0px);
	transition:all 1s ease-out;
}
.section2.in-view .txtarea>a{transform:translateX(0px);transition:all 1s ease-out;}