@charset "utf-8";

@import url('common.css');
@import url('layout.css');

header{position:relative;}
.dMbody{margin-top:-135px;}

.main_visual{position:relative;}
.visualSlider .item{position:relative;height:100vh}
.visualSlider .img{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;-webkit-transform: scale(1.05);transform: scale(1.05);transition:all 6s ease-in-out;}
.visualSlider .txtg{position:relative;z-index:1;display:flex;align-items:center;max-width:1430px;height:100%;margin:0 auto;padding:0 100px;box-sizing:border-box;}
.main_visual dt{position:relative;line-height:92px;letter-spacing:1px;color:#fff;font-size:80px;font-weight:600;font-family:"exo2";opacity:0;left:-30px;transition:all .8s ease-in-out;}
.main_visual dd{position:relative;margin-top:40px;line-height:52px;color:#fff;font-size:36px;opacity:0;left:-30px;transition:all .8s ease-in-out;transition-delay:400ms;}
/*.visualSlider dd br{display:none}*/
.main_visual .visualSlider .active dt{opacity:1;left:0}
.main_visual .visualSlider .active dd{opacity:1;left:0;}
.main_visual .slide-controller{position:absolute;top:0;bottom:0;left:50px;right:50px;height:47px;margin:auto 0;}
.main_visual .slide-controller .slide-wrap{position:relative;top:280px;max-width:1430px;margin:0 auto;padding:0 100px;box-sizing:border-box;}
.main_visual .slide-controller .slick-dots{display:inline-block;margin-right:20px;text-align:center}
.main_visual .slide-controller .slick-dots li{cursor:pointer;display:inline-block;vertical-align:middle;width:30px;height:30px;line-height:30px;font-size:0;border-radius:100%;background:rgba(255, 255, 255, 0);transition:all 0.2s ease-in-out}
.main_visual .slide-controller .slick-dots li~li{margin-left:20px}
.main_visual .slide-controller .slick-dots button{width:8px;height:8px;border-radius:100%;background:#fff;}
.main_visual .slide-controller .slick-dots .slick-active{background:rgba(255, 255, 255, .5);}
.main_visual .slide-controller .slick-arrow{opacity:.6;position:absolute;top:0;width:31px;height:47px;font-size:0;background:url(../images/main/ic_arrow.png) no-repeat 50% 50%;transition:all 0.2s ease-in-out}
.main_visual .slide-controller .slick-arrow:hover{opacity:1}
.main_visual .slide-controller .slick-prev{left:0;transform:scaleX(-1);}
.main_visual .slide-controller .slick-next{right:0;}
.main_visual .mo{display:none}
.slide-pause,.slide-play{width:37px;height:37px;font-size:0;background:url(../images/main/ic_pause.png) no-repeat 50% 50%;transition:all 0.2s ease-in-out}
.slide-play{display:none;background:url(../images/main/ic_play.png) no-repeat 50% 50%}
.slide-pause:hover,.slide-play:hover{opacity:.8}

.visualSlider .active .img{-webkit-transform: scale(1);transform: scale(1);webkit-transition:all 4s ease-in-out;transition:all 4s ease-in-out;}
.visualSlider br.mobr{display:none}
.sroll{position:absolute;left:0;right:0;bottom:30px;width:45px;height:69px;margin:0 auto;font-size:0;background:url(../images/ic_scroll.png) no-repeat 50% 0/contain;animation:scrollMotion 1s linear infinite alternate;}
@keyframes subMotion{from{opacity:0;background-size:130% auto;} to{opacity:1;background-size: 100% auto;}}
@keyframes subMotion2{from{opacity:0;background-size:120% auto;} to{opacity:1;background-size: 90% auto;}}
@keyframes scrollMotion{0% {bottom:30px;}50% {bottom:50px;}100% {bottom:30px;}}

section{overflow:hidden;}
.set1,.set2,.set3,.set4{padding:150px 80px;}
section .box{max-width:1420px;margin:0 auto;box-sizing:border-box;}
section h2{margin-bottom:50px;font-size:60px;font-weight:900;color:#000}

.main_box{background:url(../images/main/bg.jpg) no-repeat 50% 50%/cover;}

.set1{}
.set1 h2{text-align:center}
.set1 h2 + p{line-height:68px;font-size:48px;font-weight:500;text-align:center}
.set1 ul{display:flex;justify-content:center;gap:50px;margin-top:112px;}
.set1 ul li{width:100%;height:280px;}
.set1 ul a{display:flex;align-items:center;padding:0 50px;;width:100%;height:100%;border-radius:50px;background:#fff;box-sizing:border-box;box-shadow:0 0 16px rgba(0, 0, 0, .1);transition:all 0.3s ease-in-out;}
.set1 ul div{position:relative;}
.set1 ul h3{font-size:36px;font-weight:700;transition:all 0.3s ease-in-out;}
.set1 ul p{margin-top:16px;line-height:32px;color:#666;transition:all 0.3s ease-in-out;}
.set1 ul span{position:relative;display:inline-block;margin-top:12px;padding-top:8px;font-size:20px;font-weight:700}
.set1 ul span:before{content:"";position:absolute;top:0;left:0;width:15px;height:1px;background:#dbdbdb;transition:all 0.3s ease-in-out;}
.set1 ul span:after{position:relative;top:-2px;content:"";display:inline-block;width:0;height:0;vertical-align:middle;margin-left:10px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #888;transform:rotate(-90deg);transition:all 0.3s ease-in-out;}
.set1 ul a:hover{color:#fff;background:#91cf3e}
.set1 ul a:hover h3, .set1 ul a:hover p{color:#fff;}
.set1 ul a:hover span:after{border-top-color:#fff;}
.set1 ul a:hover span:before{background:#b2dd78;}

.set2{}
.set2 h2 + p{font-size:28px;color:#666}
.set2 h2 + p br{display:none}
.set2 .tec_ui{position:relative;margin-top:72px}
.set2 .item div{display:flex;gap:50px;align-items:center;}
.set2 .item p{flex:0 0 850px;}
.set2 .item p img{width:100%;border-radius:60px;}
.set2 .item dt{position:relative;left:-30px;opacity:0;letter-spacing:-1px;font-size:32px;font-weight:700;transition:all 0.6s ease-in-out;}
.set2 .item dd{position:relative;left:-30px;opacity:0;line-height:34px;margin-top:16px;color:#666;transition:all 0.6s ease-in-out;transition-delay:50ms;}
.tec_ui .slick-current .item dt{left:0;opacity:1;}
.tec_ui .slick-current .item dd{left:0;opacity:1;}
.tec_ui .slick-arrow{z-index:1;position:absolute;bottom:0;width:100px;height:100px;font-size:0;background:url(../images/main/ic_arrow2.png) no-repeat 50% 50% #fff;transition:all 0.3s ease-in-out;}
.tec_ui .slick-prev{left:0;border-radius:0 60px 0 60px;background-image:url(../images/main/ic_arrow3.png);}
.tec_ui .slick-next{left:751px;border-radius:60px 0 0 0}
.tec_ui .slick-disabled{opacity:0}

.set3{}
.set3 h2 + p{font-size:28px;color:#666}
.set3 .pro_ui{display:flex;margin-top:72px;gap:50px;justify-content:space-between;}
.set3 .item{display:flex ! important;gap:30px;cursor:pointer;flex:0 0 299px;overflow:hidden;transition:all 0.4s ease-in-out;}
.set3 .item p{display:flex;align-items:center;justify-content:center;flex:0 0 299px;height:267px;text-align:center;transition:all 0.4s ease-in-out;}
.set3 .item p span{font-size:27px;font-weight:700;color:#fff;transition:all 0.3s ease-in-out;}
.set3 .item dl{position:relative;}
.set3 .item dl div{opacity:0;position:absolute;bottom:-20px;width:400px;transition:all 0.3s ease-in-out;transition-delay:200ms;}
.set3 .item dt{font-size:36px;font-weight:700;color:#333}
.set3 .item dd:nth-of-type(1){line-height:34px;margin-top:12px;color:#666;}
.set3 .item dd:nth-of-type(2){margin-top:12px;}
.set3 .item a{position:relative;display:inline-block;padding-top:8px;font-size:20px;font-weight:700;color:#333}
.set3 .item a:before{content:"";position:absolute;top:0;left:0;width:15px;height:1px;background:#dbdbdb;transition:all 0.3s ease-in-out;}
.set3 .item a:after{position:relative;top:-2px;content:"";display:inline-block;width:0;height:0;vertical-align:middle;margin-left:10px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #888;transform:rotate(-90deg);transition:all 0.3s ease-in-out;}
.set3 .item.it1 p{background:url(../images/main/bg_product01.png) no-repeat 50% 50%/contain;}
.set3 .item.it2 p{background:url(../images/main/bg_product02.png) no-repeat 50% 50%/contain;}
.set3 .item.it3 p{background:url(../images/main/bg_product03.png) no-repeat 50% 50%/contain;}
.set3 .item.current {flex:0 0 720px;}
.set3 .item.current p span{opacity:0;}
.set3 .item.current dl div{opacity:1;bottom:0;}
.set3 .item.it1.current p{background:url(../images/main/img_product01.png) no-repeat 50% 50%/cover;}
.set3 .item.it2.current p{background:url(../images/main/img_product02.png) no-repeat 50% 50%/cover;}
.set3 .item.it3.current p{background:url(../images/main/img_product03.png) no-repeat 50% 50%/cover;}

.set4{position:relative;text-align:center;background:#333}
.set4:before{content:"";position:absolute;top:0;left:0;right:0;margin:auto;background:url(../images/main/bg_set4.jpg) no-repeat 50% 50%/cover;}
.set4 .box{position:relative;}
.set4 p{margin-bottom:48px;line-height:68px;font-size:48px;font-weight:700;color:#fff;text-shadow:0 0 10px #555555;}
.set4 a{display:block;width:360px;height:80px;line-height:80px;margin:0 auto;border-radius:40px;font-size:36px;color:#fff;font-weight:700;background:#379900}

/* motion */
section h2, section h2 + p, .set1 ul,.tec_ui, .pro_ui, .set4 .box p, .set4 .box a{opacity:0;transform:translateY(100px);transition:1s all;}
.is-visible{opacity:1 ! important;transform:translateY(0) ! important;}
.set4:before{height:0;transition:1s all;}
.set4.is-visible:before{height:100%}

@media (max-width: 1530px) {
	 .set3 .pro_ui{display:block;}
	 .set3 .item{align-items:flex-end;}
	 .set3 .item dl div{opacity:1;position:static;width:auto}
	 .set3 .item dd:nth-of-type(1) br{display:none}
	 .set3 .item p span{display:none ! important}
	 .set3 .item.it1 p{background:url(../images/main/img_product01.png) no-repeat 50% 50%/cover;}
	 .set3 .item.it2 p{background:url(../images/main/img_product02.png) no-repeat 50% 50%/cover;}
	 .set3 .item.it3 p{background:url(../images/main/img_product03.png) no-repeat 50% 50%/cover;}
	 .set3 .slick-dots{margin-top:20px;text-align:center}
	 .set3 .slick-dots li{display:inline-block;margin:0 4px}
	 .set3 .slick-dots button{width:6px;height:6px;font-size:0;background:#d8d9d9;border-radius:100%;}
	 .set3 .slick-dots .slick-active button{background:#222}
}

@media (max-width: 1420px) {
	.main_visual dt{line-height:70px;font-size:60px;}
	.main_visual dd{margin-top:30px;line-height:32px;font-size:28px;}
	
	section h2{font-size:52px;}
	.set1 h2 + p{line-height:48px;font-size:32px}
	.set1 ul h3{font-size:28px}
	.set1 ul span{font-size:18px}
	
	.set2 h2 + p{font-size:24px}
	.set2 .item p{flex:0 0 50%;}
	.set2 .item dt{font-size:28px}
	.set2 .item p img{border-radius:30px;}
	.tec_ui .slick-arrow{width:65px;height:65px;background-size:14px auto}
	.tec_ui .slick-next{left:calc(50% - 65px);border-radius:30px 0 0 0;}
	.tec_ui .slick-prev{border-radius:0 30px 0 30px;}
	
	.set3 .item dt{font-size:28px}
	.set3 .item a{font-size:18px;}
	
	.set4 p{line-height:48px;font-size:34px}
	.set4 a{font-size:28px}
	
}

/* mobile & pad */
@media (max-width: 1280px) { 
	.dMbody{margin-top:-81px;} 
		
	.set1, .set2, .set3, .set4{padding:80px 40px;}
	.set1 ul{gap:20px}
	
	.set2 .item div{gap:30px}
}

@media (max-width: 1024px) { 
	.visualSlider .item{height:100dvh}
}

@media (max-width: 920px) { 
	.dMbody{margin-top:-46px;} 
	
	.visualSlider .txtg{top:-5vh;padding:0 20px}
	.main_visual dt{font-size:32px;line-height:38px;font-weight:600;letter-spacing:-1px}
	.main_visual dd{margin:20px 30px 0 0;line-height:19px;font-size:13px;letter-spacing:0}
	.main_visual .slide-controller{top:160px;bottom:0;left:auto;right:auto;margin:auto 0}
	.main_visual .slide-controller .slide-wrap{top:auto;padding:0 20px}
	.main_visual .slide-controller .slick-dots li{width:20px;height:20px;line-height:20px}
	.main_visual .slide-controller .slick-dots li~li{margin-left:12px;}
	.main_visual .slide-controller .slick-dots button{width:4px;height:4px}
	.main_visual .slide-controller .slick-arrow{display:none ! important}

	.visualSlider dd br{display:block}
	
	.sroll{height:32px}
	
	.set1, .set2, .set3, .set4{padding:40px 20px;}
	section h2{margin-bottom:12px;font-size:24px;}
	.set1 h2 + p{line-height:28px;font-size:18px}
	.set1 ul h3{font-size:16px}
	.set1 ul span{font-size:12px}
	.set1 ul{display:block;margin-top:24px}
	.set1 ul li{height:auto}
	.set1 ul li~li{margin-top:12px}
	.set1 ul a{padding:20px 32px 20px 24px;border-radius:16px;}
	.set1 ul span{font-size:11px}
	.set1 ul span:before{width:8px}
	.set1 ul span:after{margin-left:4px;border-left-width:3px;border-right-width:3px;border-top-width:4px;}
	.set1 ul p{margin-top:6px;line-height:22px;}
	.set1 ul p br{display:none}
		
	.set2 h2 + p{line-height:24px;font-size:16px}
	.set2 .tec_ui{margin-top:24px}
	.set2 .item{display:block;}
	.set2 .item div{display:block;}
	.set2 .item p img{border-radius:12px;}
	.set2 .item dl{margin-top:20px}
	.set2 .item dt{font-size:16px}
	.set2 .item dd{margin-top:6px;line-height:22px;}
	.tec_ui .slick-arrow{top:42vw;width:42px;height:42px;background-size:12px auto}
	.tec_ui .slick-next{right:0;left:auto;border-radius:12px 0 0 0;}
	.tec_ui .slick-prev{border-radius:0 12px 0 0;}
	
	.set3 h2 + p{line-height:22px;font-size:14px}
	.set3 .pro_ui{margin-top:24px}
	.set3 .item{gap:20px}
	.set3 .item p{flex: 0 0 150px;height:130px}
	.set3 .item dt{font-size:16px}
	.set3 .item dd:nth-of-type(1){margin-top:6px;line-height:22px}
	.set3 .item a{font-size:11px}
	.set3 .item a:before{width:8px}
	.set3 .item a:after{margin-left:4px;border-left-width:3px;border-right-width:3px;border-top-width:4px;}
	
	.set4 p{margin-bottom:24px;line-height:28px;font-size:18px}
	.set4 a{width:180px;height:42px;line-height:42px;font-size:16px;border-radius:20px}
	
	
}

@media (max-width: 540px) { 
	.visualSlider .item{height:560px}
	.main_visual .mo{display:block;width:100%;}
		
	.set1{background:url(../images/main/mo/bg_set1.jpg) no-repeat 50% bottom/cover;}
	.set2{background:url(../images/main/mo/bg_set2.jpg) no-repeat 50% 50%/cover;}
	.set4:before{display:none}
	.set4{background:url(../images/main/mo/bg_set4.jpg) no-repeat 50% 50%/cover;}
}

@media (max-width: 330px) { 
	body{font-size:13px;} 
}


/* motion */