.visual{}
.visual li{}
.visual li .inbox{position:relative; height:950px;}
.visual .scroll{position:absolute; bottom:30px; left:50%; color:#fff; font-size:17px; font-weight:bold;width:60px; text-align:center; z-index:10;}
.visual .scroll span{display:block;width:2px;height:50px;background-color:#fff;margin:0 auto 10px;transform: scaleY(0);transition: all 0.5s 1s;-webkit-animation: scroll 6s ease-in-out infinite 1s;-moz-animation: scroll 6s ease-in-out infinite 1s;-ms-animation: scroll 6s ease infinite 1s;-o-animation: scroll 6s ease-in-out infinite 1s;animation: scroll 6s ease-in-out infinite 1s;-webkit-transition: all 0.5s 1s; }



.v1{background:url(/images/visual1.png) no-repeat 50%;}
.v1 .inbox>div{position:absolute; top:50%; width:675px; height:372px;   margin-top:-186px;}
.v1 .inbox>div h3{width:100%; height:372px; background:url(/images/visual1_img.png) no-repeat 50% 0; }
/*.v1 h3.animate__animated{height:372px;}*/



.writer .inbox{display:table;text-align:right;}
.writer .inbox>div{display:table-cell;vertical-align:middle;text-align: right;}

.writer h3{display:inline-block;text-align: left;}
.writer h3>span,.writer h3 strong{color:#fff;font-size:60px;font-weight:bold;width: 100%;}
.writer h3>span{display:block; }
.writer h3 strong{position:relative;display:inline-block;z-index:1;margin: 10px 0;}
.writer h3 strong::after{position:absolute;top: -7px;left: 1px;height: 122%;width: 101%;background-color:#3d848d;transform:scaleX(0);content:'';z-index:-1;transform-origin: 0 50%;}
.writer h3 strong.animated::after{-webkit-animation-name:underline;animation-name:underline;   animation-duration: 0.7s;animation-delay:3s; -webkit-animation-fill-mode:both;animation-fill-mode:both}
.writer p{ text-align:right; line-height:1.5em;  margin-top:50px}
.writer p span{display:inline-block; text-align:left; color:#fff; font-size:25px; line-height:1.5em}
 
 
.v2{background:url(/images/visual2.png) no-repeat 50%;}
.v2 h3>span{min-width:650px;}
.v2 p{position:relative; left:-27px;}



.v3{background:url(/images/visual3.png) no-repeat 50%;}
.v3 .inbox>div{text-align:left; vertical-align:bottom; padding-bottom:160px}
.v3 h3 strong::after{width:540px;}
.v3 p{text-align:left;}




.v4{background:url(/images/visual4.png) no-repeat 50%;}
.v4 h3>span{min-width:719px;}
.v4 h3 strong::after{width:670px;}
 .v4 p{position:relative; left:-60px;}
.v4 h3 strong.animate__animated::after{animation-delay:3.8s; }

 
 .contents{}
.con1{position:relative;}
.con1 li{height:615px; width:100%;}
.con1 li.con1_1{background:url(/images/con1_1.png) no-repeat 50%;}
.con1 li.con1_2{background:url(/images/con1_2.png) no-repeat 50%;}
.con1 li.con1_3{background:url(/images/con1_3.png) no-repeat 50%;}

.con1 .swiper-pagination{position:absolute; bottom:20px; left:0;}
.con1 .swiper-pagination span{display:inline-block; width:35px; height:35px; border:1px solid #fff; color:#fff; text-align:center; border-radius:50%; line-height:35px; font-size:17px; margin:0 5px}
.con1 .swiper-pagination span.swiper-pagination-bullet-active{background-color:#3d848d; border:0;}



.con2{padding:140px 0; overflow:hidden}
.con2 .inbox{position:relative;}
.con2 .titlebox{position:absolute; top:0; left:0;}
.con2 .titlebox p{margin-top:20px}
.con2 .slide_btn {position:absolute; top:350px; left:0;}
.con2 .slide_btn span{display:inline-block; vertical-align:middle; margin-right:10px}



.con2_list{ }
.con2_list>div{float:left; left:50%; margin-left:-250px !important; width:100%; overflow:hidden}
.con2_list li{float:left; width:560px; margin-right:50px;}
.con2_list li img{margin-bottom:10px;}
.con2_list li strong{display:block; font-size:23px; font-weight:bold; color:#272727; line-height:1.5em; margin-bottom:15px;}
.con2_list li p{font-size:18px; font-weight:400; color:#272727; line-height:1.5em}


.con3{padding:140px 0;}
.con3 .inbox{position:relative;}
.con3 .titlebox{margin-bottom:30px;}
.con3 .inbox .slide_btn{}
.con3 .inbox .slide_btn>span{position:absolute; top:50%; margin-top:-25px;}
.con3 .l_bt{left:0;}
.con3 .r_bt{right:0;}