@charset "utf-8";

.pcbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}
.innerwrap{max-width:1460px;width:94%;margin:0 auto;}







/* visual */
.visual{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.visual .swiper-slide{
	overflow:hidden;
	position:relative;
	width:100%;height:100%;
}
.visual .swiper-slide .bg{
	width:100%;height:100%;
	transform:scale(1.05);transition:all 2s;
}
.visual .swiper-slide-active .bg{transform:scale(1);}
.visual .swiper-slide.v1 .bg{
	background:url(/images/main/visual1.jpg) no-repeat center;background-size:cover;
}

.visual .txtwrap{
	position:absolute;left:50%;top:50%;z-index:100;
	transform:translate(-50%,-50%);
	max-width:1460px;width:86%;
}
.visual .txtwrap h2{margin-top:20px;font-family:"Play";font-size: 40px;font-weight:700;color:#fff;}
.visual .txtwrap p{font-size: 13px;color:rgba(255,255,255,0.8);font-weight:300;}
.visual .vprev{
	display:block;
	width:42px;
	height:42px;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	transform:rotate(135deg);
	position:absolute;
	left:3%;
	top:50%;
	z-index:100;
	cursor:pointer;
	display: none;
}
.visual .vnext{
	display:block;
	width:42px;
	height:42px;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	transform:rotate(-45deg);
	position:absolute;
	right:3%;
	top:50%;
	z-index:100;
	cursor:pointer;
	display: none;
}
.visual .swiper-pagination{
	max-width:1460px;width:86%;
	position:absolute;left:50%;bottom:120px;z-index:100;text-align:left;
	transform:translateX(-50%);
}
.visual .swiper-pagination span{
	display:inline-block;position:relative;
	width:140px;padding-bottom:22px;margin-right:15px;
	border-radius:0;opacity:1;background:0;outline:0;
	font-family:"Play";font-size:14px;font-weight:700;color:#fff;
}
.visual .swiper-pagination span:before{
	display:block;content:"";
	width:100%;height:1px;
	background:#fff;
	position:absolute;left:0;bottom:0;
}
.visual .swiper-pagination span:after{
	display:block;content:"";
	width:100%;height:3px;
	background:#fff;transform-origin:left;
	position:absolute;left:0;bottom:0;transform:scaleX(0);
}
.visual .swiper-pagination .swiper-pagination-bullet-active:after{transform:scaleX(1);transition:all 2s;}





.titlewrap{}
.titlewrap h2{margin-bottom:20px;font-family:"Play";font-size: 14px;font-weight:700;color:#000;}
.titlewrap h3{font-size: 30px;color:#000;font-weight:600;line-height:140%;word-break: keep-all;}




/* section1 */
.section1{padding: 75px 0 80px;}
.section1 .products{display:flex;margin-top: 40px;}
.section1 .products>li{
	position:relative;
	width: 80%;
	margin-right: 3%;
	transform: translateY(0) !IMPORTANT;
}
.section1 .products>li:last-child {margin-right:0;}
.section1 .products>li .thumb{}
.section1 .products>li .thumb img {width:100%;}
.section1 .products>li .tit{
	box-sizing:border-box;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:30px;
	font-family:"Play";
	font-size: 15px;
	font-weight:700;
	color:#fff;
	perspective:800px;
}
.section1 .products>li .tit:before{
	display:block;content:"";
	width:100%;height:100%;
	position:absolute;left:0;bottom:0%;
	transform-origin:center;transform:rotateY(20deg) scaleY(0);transition:all 0.6s;
	background: linear-gradient(to right, #209bd6, #3a4ea3);
}
.section1 .products>li:hover .tit:before{transform: rotateY(0deg) scaleY(1);}
.section1 .products>li .tit>div{position:relative;z-index:5;}
.section1 .products>li .tit .arr{
	display:inline-block;vertical-align:top;
	width:8px;height:8px;
	margin:10px 0 0 5px;
	border-right:3px solid #fff;border-bottom:3px solid #fff;
	transform:rotate(-45deg) translate(-10px,-10px);opacity:0;transition:all 0.6s;
}
.section1 .products>li:hover .tit .arr{transform:rotate(-45deg) translate(0px,0px);opacity:1;}
.section1 .product_arrow {position:relative;display:flex;width: 50px;margin-top: 30px;float: right;}
.section1 .product_arrow:after {content:"";position:absolute;top:0;left:50%;width:2px;height:12px;margin-left:-1px;background:#ddd;}
.section1 .product_arrow>div {width:10px;height:10px;border:3px solid #000;box-sizing:border-box;border-top:none;border-right:none;cursor:pointer;}
.section1 .product_arrow>div.product_prev {transform:rotate(45deg);margin-right:15px;}
.section1 .product_arrow>div.product_next {transform:rotate(-135deg);margin-left:15px;}





/* section2 */
.section2{
	overflow:hidden;
	box-sizing:border-box;
	width:100%;
	padding: 80px 0;
	background:url(/images/main/section2_bg.jpg) no-repeat bottom;
	background-attachment:fixed;
}
.section2 .titlewrap h2{color:#fff;}
.section2 .titlewrap h3{color:#fff;}
.section2 .rnd{margin: 40px 0 0;border-top: 1px solid rgba(255,255,255,0.3);}
.section2 .rnd>a{
	box-sizing:border-box;
	width: 100%;
	text-align:center;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	display: block;
	padding: 20px 0;
}
.section2 .rnd>a .icon{}
.section2 .rnd>a .tit{margin: 20px 0 15px;font-size: 22px;color:#fff;font-weight:600;}
.section2 .rnd>a p{font-size: 12px;color:rgba(255,255,255,0.75);font-weight:300;}
.section2 .rnd>a .more{
	box-sizing:border-box;
	position:relative;
	width:49px;
	height:49px;
	margin: 15px auto 0;
	border:1px solid rgba(255,255,255,0.4);
}
.section2 .rnd>a .more:before{
	display:block;content:"";
	width:15px;height:1px;
	background:rgba(255,255,255,0.4);
	position:absolute;left:50%;top:50%;margin:0 0 0 -7.5px;
}
.section2 .rnd>a .more:after{
	display:block;content:"";
	width:1px;height:15px;
	background:rgba(255,255,255,0.4);
	position:absolute;left:50%;top:50%;margin:-7px 0 0 0;
}






/* section3 */
.section3{overflow:hidden;width:100%;padding: 80px 0;position:relative;background:#f7f7f7;word-break:keep-all;}
.section3 .bg{
	width:200%;height:270px;
	background:url(/images/main/section3_bg.png) space;
	background-size:contain;
	position:absolute;left:0;top:-7%;
	/*animation:sec3_bg 2000s infinite alternate;*/
}
@keyframes sec3_bg{
	0%{transform:translateX(0px);}
	100%{transform:translateX(-1000%);}
}

.section3 .titlewrap{}
.section3 .titlewrap>div{/* display:flex; */justify-content:space-between;}
.section3 .titlewrap>div h3{width: 100%;}
.section3 .titlewrap>div>div{padding: 20px 0 0;}
.section3 .titlewrap>div>div p{margin-bottom:25px;font-size:17px;color:#666;font-weight:300;line-height:180%;display: none;}
.section3 .titlewrap>div>div a{
	display:block;
	position:relative;
	padding-left:45px;
	font-family:"Montserrat";
	font-size: 10px;
	color:#666;
	font-weight:500;
}
.section3 .titlewrap>div>div a:before{
	display:block;
	content:"";
	width:30px;
	height:1px;
	background:#666;
	position:absolute;
	left:0;
	top: 5px;
}
.section3 .merit{display:flex;flex-wrap:wrap;justify-content:space-between;margin:70px 0 0;}
.section3 .merit .boxwrap{
	width: 48%;
	margin-bottom: 35px;
}
.section3 .merit .boxwrap .tit{
	padding:15px 0;
	font-size: 15px;
	color:#000;
	font-weight:600;
	border-bottom:1px solid #000;
}
.section3 .merit .boxwrap .icon{margin: 25px 0;}
.section3 .merit .boxwrap p{font-size: 12px;color:#666;font-weight:300;}







/* section4 */
.section4{overflow:hidden;width:100%;padding: 80px 0;position:relative;word-break:keep-all;}
.section4 .innerwrap{position:relative;padding-bottom:320px;}
.section4 .innerwrap:after{
	display:block;
	content:"";
	width:200%;
	height: 40%;
	background:#172538;
	position:absolute;
	left:0;
	bottom: 0;
}
.section4 .titlewrap{width:400px;}
.section4 .titlewrap .ctr{margin:50px 0 90px;}
.section4 .titlewrap .ctr>a{
	display:inline-block;
	border:1px solid #aaa;
	margin-right:5px;
}
.section4 .list{
	position:absolute;left:400px;top:120px;
	width:calc(100% - 0px);
}
.section4 .list .swiper-slide{
	position:relative;
	box-sizing:border-box;
	width: 85%;
	background:#d6dce6;
}
.section4 .list .swiper-slide:nth-child(4n-2){background:#f3f5f7;}
.section4 .list .swiper-slide:nth-child(4n-1){background:#ededff;}
.section4 .list .swiper-slide:nth-child(4n){background:#f7f9ff;}
.section4 .list .swiper-slide>a{
	display:block;
	box-sizing:border-box;
	position:relative;
	width:100%;
	height:100%;
	padding: 30px;
}
.section4 .list .swiper-slide>a:after{
	display:block;content:"";
	width:calc(100% - 20px);height:1px;
	background:#a5a5a5;
	position:absolute;left:10px;bottom:10px;z-index:10;
}
.section4 .list .swiper-slide>a .tit{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 라인수 */
	-webkit-box-orient: vertical;
	word-wrap:break-word;
	line-height: 1.4em;
	height: 2.8em;
	font-size: 17px;
	color:#172538;
	font-weight:500;
}
.section4 .list .swiper-slide>a p{
	 /* 라인수 */
	 line-height: 1.5em;
	 height:7.5em;
	 font-size: 12px;
	 color:#4c5358;
	 margin: 80px 0 15px;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 display: -webkit-box;
	 -webkit-line-clamp: 3;
	 -webkit-box-orient: vertical;
	 word-wrap:break-word;
}
.section4 .list .swiper-slide>a .date{font-family:"Play";font-size: 12px;color:#949494;}




/* section5 */
.section5{overflow:hidden;width:100%;padding: 80px 0;position:relative;}
.section5 .innerwrap{position:relative;}
.section5 .titlewrap{
	position:absolute;left:0;top:0;
	display:flex;align-items:center;
	width:50%;height:365px;
}
.section5 .cc{
	position:relative;
	box-sizing:border-box;
	align-items:flex-end;
	width:100%;
	padding-bottom: 320px;
	background:url(/images/main/section5_bg.jpg) no-repeat right top;
	background-size: 40% 100%;
	flex-direction: column;
}
.section5 .cc .boxwrap{
	box-sizing:border-box;
	width: 30%;
	height: 205px;
	padding: 35px 15px;
}
.section5 .cc .boxwrap:nth-child(1){background:#0b8acd;}
.section5 .cc .boxwrap:nth-child(2){background:#3eafc1;}
.section5 .cc .boxwrap:nth-child(3){position:absolute;right:0;top:0;background:#3eafc1;}
.section5 .cc .boxwrap a {display: block;width:100%;box-sizing: border-box;}
.section5 .cc .boxwrap .tit{font-size: 18px;color:#fff;font-weight:600;margin-bottom:25px;}
.section5 .cc .boxwrap .contact {margin-top:25px;}
.section5 .cc .boxwrap .contact li {font-family:'Montserrat','Noto Sans KR';font-size: 12px;color:#fff;line-height:1.6;padding: 3px 0 3px 20px;}
.section5 .cc .boxwrap .contact li:nth-child(1) {background: url(/images/main/sec5_contact_icon1.png) no-repeat center left;}
.section5 .cc .boxwrap .contact li:nth-child(2) {background: url(/images/main/sec5_contact_icon2.png) no-repeat center left;}
.section5 .cc .boxwrap p{font-family:'Montserrat','Noto Sans KR';font-size: 12px;color:#fff;font-weight:300;}
.section5 .cc .boxwrap p.mt {margin-top:15px;}
.section5 .cc .boxwrap .bot {display:flex;justify-content: space-between;align-items: flex-end;}
.section5 .cc .boxwrap .icon{text-align:center;display: none;}
.section5 .cc .boxwrap .more{position:relative;padding-left:45px;font-family:"Montserrat";font-size: 10px;color:#fff;font-weight:500;display: none;}
.section5 .cc .boxwrap .more:before{
	display:block;content:"";
	width:30px;height:1px;
	background:#fff;
	position:absolute;left:0;top:7px;
}

@media screen and (max-width:1050px){
	.section4 {padding-bottom:0;}
	.section4 .innerwrap {padding-bottom: 80px;}
	.section4 .titlewrap {width:100%;}
	.section4 .titlewrap .ctr {display:none;}
	.section4 .list {
		position: relative;
		top: auto;
		left: auto;
		margin-left: 20px;
		margin-top: 55px;
	}

	.section5 .titlewrap {position:unset;width:100%;height:auto;}
	.section5 .cc {align-items: normal;background: url(/images/main/section5_bg.jpg) no-repeat center bottom;background-size: 100%;margin-top: 50px;}
	.section5 .cc .boxwrap {width: 100%;}
}



#header {opacity:0;transition:opacity 0.9s 0.7s;}
.visual .txtwrap h2{opacity:0;transform:translateY(40px);transition:0.9s 0.4s;}
.visual .txtwrap p{opacity:0;transform:translateY(40px);transition:0.9s 0.1s;}
.visual .ctr>div,
.visual .swiper-pagination {opacity:0;transition:opacity 0.9s 0.7s;}
.motion #header {opacity:1;}
.motion .visual .swiper-slide .bg {transition-delay:0.2s;}
.motion .visual .txtwrap h2,
.motion .visual .txtwrap p {opacity:1;transform:translateY(0px);}
.motion .visual .ctr>div,
.motion .visual .swiper-pagination {opacity:1;}

.titlewrap h2 {height:26px;overflow:hidden;}
.titlewrap h2>span {display:block;transform:translateY(30px);transition:0.7s 0.1s;}
.titlewrap h3 {opacity:0;transform:translateY(40px);transition:0.7s 0.3s;}

.titlewrap.in-view h2>span,
.titlewrap.in-view h3 {opacity:1;transform:translateY(0px);}

.section1 .product_slide {opacity:0;transform:translateY(40px);transition:0.7s 0.2s;}
.section1 .product_slide.in-view {opacity:1;transform:translateY(0px);}

.section2 .rnd>a {opacity:0;transform:translateY(40px);transition:0.7s;}
.section2 .rnd>a:nth-child(1) {transition-delay:0.1s;}
.section2 .rnd>a:nth-child(2) {transition-delay:0.3s;}
.section2 .rnd>a:nth-child(3) {transition-delay:0.5s;}
.section2 .rnd.in-view>a {opacity:1;transform:translateY(0px);}

.section3 .titlewrap>div>div {opacity:0;transform:translatex(40px);transition:0.7s 0.5s;}
.section3 .titlewrap>div>div.in-view {opacity:1;transform:translatex(0px);}

.section3 .merit .boxwrap {opacity:0;transform:translateY(40px);transition:0.7s;}
.section3 .merit .boxwrap:nth-child(1) {transition-delay:0.2s;}
.section3 .merit .boxwrap:nth-child(2) {transition-delay:0.4s;}
.section3 .merit .boxwrap:nth-child(3) {transition-delay:0.6s;}
.section3 .merit .boxwrap:nth-child(4) {transition-delay:0.8s;}
.section3 .merit.in-view .boxwrap {opacity:1;transform:translateY(0px);}

.section4 .titlewrap .ctr {opacity:0;transform:translateY(40px);transition:0.7s 0.4s;}
.section4 .titlewrap.in-view .ctr {opacity:1;transform:translateY(0px);}

.section4 .innerwrap .list {opacity:0;transform:translateY(40px);transition:0.7s 0.6s;}
.section4 .innerwrap.in-view .list {opacity:1;transform:translateY(0px);}


.section5 .cc {position:relative;}
.section5 .cc:before {content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:#fff;transition:width 0.8s 0.5s;}
.section5 .cc.in-view:before {width:0;}
.section5 .cc .boxwrap {position:relative;}
.section5 .cc .boxwrap:before {content:"";position:absolute;top:0;right:0;width:100%;height:100%;background:#fff;transition:width 0.8s 0.5s;}
.section5 .cc.in-view .boxwrap:before {width:0;}