@charset "utf-8";

#visual .visual .item1{background-image:url(../img/main/img_visual01.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
#visual .visual .item2{background-image:url(../img/main/img_visual02.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
#visual .visual .item3{background-image:url(../img/main/img_visual03.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
#visual .visual .item4{background-image:url(../img/main/img_visual04.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
#visual .visual .item5{background-image:url(../img/main/img_visual05.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
#visual .visual .item6{background-image:url(../img/main/img_visual06.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
@media all and (max-width:748px) {
    #visual .visual .item1{background-image: url(../img/main/img_visual01_m.png);background-repeat:no-repeat;background-position: top center;background-size: 100% auto;background-color: #b0ada7;}
}
@media (min-width:1420px) {

	#visual{position:relative;overflow:hidden}
	#visual .visual .item{position:relative;z-index:2;padding-top:100px;text-align:left;overflow:hidden}
	#visual .visual .item .cntbox{position:absolute;top:50%;left:50%;width:1200px;height:100%;transform:translate(-50%,-50%)}
	#visual .visual .item .imgbox{position:absolute;bottom:50px;right:0}
	#visual .visual .item .imgbox img{transform:scale(1.05);transition:all 2.5s}
	#visual .visual .item .txtbox{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%)}
	#visual .visual .item .txtbox .tit{position:relative;z-index:2;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .tit span{display:block;line-height:90px;font-size:100px;font-weight:800;color:#fff;word-break:keep-all}
	#visual .visual .item .txtbox .txt{position:relative;z-index:2;margin-top:50px;line-height:35px;font-size:30px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:-0.5px;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .con{position:relative;z-index:2;margin-top:30px;line-height:30px;font-size:24px;font-weight:500;color:#fff;letter-spacing:-0.5px;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .act{position:relative;z-index:2;margin-top:30px;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .act a{display:inline-block;line-height:60px;padding:0 50px;font-size:17px;font-weight:500;color:#fff;border:3px solid #fff;border-radius:60px}
	#visual .visual .item.swiper-slide-active .imgbox img{transform:scale(1)}
	#visual .visual .item.swiper-slide-active .tit{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0s}
	#visual .visual .item.swiper-slide-active .txt{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.25s}
	#visual .visual .item.swiper-slide-active .con{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.5s}
	#visual .visual .item.swiper-slide-active .act{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.75s}
	#visual .visual .item1{text-align:center}
	#visual .visual .dots{position:absolute;z-index:2;bottom:0;left:0;padding:0 0 35px 0;width:100%;font-size:0;text-align:center}
	#visual .visual .dots span{position:relative;display:inline-block;margin:0 6px;width:28px;height:28px;text-indent:-9999em;background:none;overflow:hidden;text-align:center;transition:all .3s;vertical-align:top}
	#visual .visual .dots .path{display:none}
	#visual .visual .dots span.swiper-pagination-bullet-active:after{width:28px;height:28px;opacity:1;visibility:visible}
	#visual .visual .dots .swiper-pagination-bullet-active .path{display:inline-block !important;stroke-dasharray:1000;stroke-dashoffset:0;animation-name:dash;animation-timing-function:linear;animation-duration:75s;animation-iteration-count:unset}
	#visual .visual .control .arrow{position:absolute;z-index:100;top:50%;margin: -50px 0 0 0;width: 100px;height: 100px;border-radius: 50%;background: rgba(255,255,255,0.20);opacity:0;transition:all 0.5s;cursor:pointer;}
	#visual .visual .control .arrow span{display:block;margin:0 auto;width:40px;height: 100px;text-indent:-9999em;overflow:hidden;}
	#visual .visual .control .prev{left: 25px;}
	#visual .visual .control .prev span{background:url("../img/arrowLeft.png") no-repeat left center}
	#visual .visual .control .next{right: 25px;}
	#visual .visual .control .next span{background:url("../img/arrowRight.png") no-repeat right center}
	#visual .visual:hover .control .arrow{opacity:1}	

	@keyframes dash {
		from{ stroke-dashoffset:1000}
		to{stroke-dashoffset:0}
	}
	
}
@media all and (min-width:748px) and (max-width:1419px) {
	#visual{position:relative;overflow:hidden}
	#visual .visual .item{position:relative;z-index:2;padding-top:100px;text-align:left;overflow:hidden}
	#visual .visual .item .cntbox{position:absolute;top:50%;left:50%;width: 100%;height:100%;transform:translate(-50%,-50%);}
	#visual .visual .item .imgbox{position:absolute;bottom: 15px;right: 15px;max-width: 60%;}
	#visual .visual .item .imgbox img{width:100%;height:auto;transform:scale(1.05);transition:all 2.5s}
	#visual .visual .item .txtbox{position:absolute;top:50%;left:0;width:100%;padding: 50px;transform:translateY(-50%);}
	#visual .visual .item .txtbox .tit{position:relative;z-index:2;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .tit span{display:block;line-height: 60px;font-size: 60px;font-weight:800;color:#fff;word-break:keep-all;}
	#visual .visual .item .txtbox .txt{position:relative;z-index:2;margin-top: 30px;line-height: 30px;font-size: 24px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:-0.5px;transform:translate(100px,0);opacity:0;visibility:hidden;}
	#visual .visual .item .txtbox .con{position:relative;z-index:2;margin-top: 20px;line-height: 28px;font-size: 20px;font-weight:500;color:#fff;letter-spacing:-0.5px;transform:translate(100px,0);opacity:0;visibility:hidden;}
	#visual .visual .item .txtbox .act{position:relative;z-index:2;margin-top:30px;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .act a{display:inline-block;line-height: 40px;padding: 0 30px;font-size: 15px;font-weight:500;color:#fff;border: 2px solid #fff;border-radius:60px;}
	#visual .visual .item.swiper-slide-active .imgbox img{transform:scale(1)}
	#visual .visual .item.swiper-slide-active .tit{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0s}
	#visual .visual .item.swiper-slide-active .txt{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.25s}
	#visual .visual .item.swiper-slide-active .con{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.5s}
	#visual .visual .item.swiper-slide-active .act{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.75s}
	#visual .visual .item1{text-align:center}
	#visual .visual .dots{position:absolute;z-index:2;bottom:0;left:0;padding:0 0 35px 0;width:100%;font-size:0;text-align:center}
	#visual .visual .dots span{position:relative;display:inline-block;margin:0 6px;width:28px;height:28px;text-indent:-9999em;background:none;overflow:hidden;text-align:center;transition:all .3s;vertical-align:top}
	#visual .visual .dots .path{display:none}
	#visual .visual .dots span.swiper-pagination-bullet-active:after{width:28px;height:28px;opacity:1;visibility:visible}
	#visual .visual .dots .swiper-pagination-bullet-active .path{display:inline-block !important;stroke-dasharray:1000;stroke-dashoffset:0;animation-name:dash;animation-timing-function:linear;animation-duration:75s;animation-iteration-count:unset}
	#visual .visual .control .arrow{position:absolute;z-index:100;bottom: 25px;margin: -25px 0 0 0;width: 50px;height: 50px;border-radius: 50%;background:rgba(255,255,255,0.25);opacity:0;transition:all 0.5s;cursor:pointer;}
	#visual .visual .control .arrow span{display:block;margin:0 auto;width: 25px;height: 50px;text-indent:-9999em;overflow:hidden;}
	#visual .visual .control .prev{left: 25px;}
	#visual .visual .control .prev span{background:url("../img/arrowLeft.png") no-repeat left center}
	#visual .visual .control .next{right: 25px;}
	#visual .visual .control .next span{background:url("../img/arrowRight.png") no-repeat right center}
	#visual .visual:hover .control .arrow{opacity:1}	

	@keyframes dash {
		from{ stroke-dashoffset:1000}
		to{stroke-dashoffset:0}
	}
}
@media all and (max-width:748px) {
#visual{position:relative;overflow:hidden}
	#visual .visual .item{position:relative;z-index:2;padding-top: 60px;text-align:left;overflow:hidden;}
	#visual .visual .item .cntbox{position:absolute;top:50%;left:50%;width: 100%;height:100%;transform:translate(-50%,-50%);}
	#visual .visual .item .imgbox{position:absolute;top: 50%;left: 10px;right: 10px;max-width: 100%;transform: translateY(-50%);text-align: right;}
	#visual .visual .item .imgbox img{width: auto;max-width: 100%;height: auto;max-height: 420px;transform:scale(1.05);transition:all 2.5s;}
	#visual .visual .item .txtbox{position:absolute;top: 50%;left:0;width:100%;padding: 0 10px;transform: translateY(-50%);}
	#visual .visual .item .txtbox .tit{position:relative;z-index:2;transform:translate(100px,0);opacity:0;visibility:hidden}
	#visual .visual .item .txtbox .tit span{display:block;line-height: 36px;font-size: 30px;font-weight:800;color:#fff;word-break:keep-all;}
	#visual .visual .item .txtbox .txt{position:relative;z-index:2;margin-top: 10px;line-height: 18px;font-size: 16px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:-0.5px;transform:translate(100px,0);opacity:0;visibility:hidden;}
	#visual .visual .item .txtbox .con{position:relative;z-index:2;margin-top: 10px;line-height: 18px;font-size: 15px;font-weight:500;color:#fff;letter-spacing:-0.5px;transform:translate(100px,0);opacity:0;visibility:hidden;}
	#visual .visual .item .txtbox .act{position:relative;z-index:2;margin-top: 10px;transform:translate(100px,0);opacity:0;visibility:hidden;}
	#visual .visual .item .txtbox .act a{display:inline-block;line-height: 30px;padding: 0 20px;font-size: 12px;font-weight:500;color:#fff;border: 2px solid #fff;border-radius:60px;}
	#visual .visual .item.swiper-slide-active .imgbox img{transform:scale(1)}
	#visual .visual .item.swiper-slide-active .tit{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0s}
	#visual .visual .item.swiper-slide-active .txt{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.25s}
	#visual .visual .item.swiper-slide-active .con{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.5s}
	#visual .visual .item.swiper-slide-active .act{transform:translate(0,0);opacity:1;visibility:visible;transition:all 1.6s 0.75s}
	#visual .visual .item1{text-align:center}
	#visual .visual .dots{position:absolute;z-index:2;bottom:0;left:0;padding: 0 0 10px 0;width:100%;font-size:0;text-align:center;}
	#visual .visual .dots span{position:relative;display:inline-block;margin:0 6px;width:28px;height:28px;text-indent:-9999em;background:none;overflow:hidden;text-align:center;transition:all .3s;vertical-align:top}
	#visual .visual .dots .path{display:none}
	#visual .visual .dots span.swiper-pagination-bullet-active:after{width:28px;height:28px;opacity:1;visibility:visible}
	#visual .visual .dots .swiper-pagination-bullet-active .path{display:inline-block !important;stroke-dasharray:1000;stroke-dashoffset:0;animation-name:dash;animation-timing-function:linear;animation-duration:75s;animation-iteration-count:unset}
	#visual .visual .control .arrow{position:absolute;z-index:100;bottom: 10px;margin: -14px 0 0 0;width: 28px;height: 28px;border-radius: 50%;background: rgba(255,255,255,0.25);transition:all 0.5s;cursor:pointer;}
	#visual .visual .control .arrow span{display:block;margin:0 auto;width: 15px;height: 28px;text-indent:-9999em;overflow:hidden;}
	#visual .visual .control .prev{left: 25px;}
	#visual .visual .control .prev span{background:url("../img/arrowLeft.png") no-repeat left center}
	#visual .visual .control .next{right: 25px;}
	#visual .visual .control .next span{background: url("../img/arrowRight.png") no-repeat right center;}

	@keyframes dash {
		from{ stroke-dashoffset:1000}
		to{stroke-dashoffset:0}
	}
}