@charset "utf-8";
/* CSS Document */

.wrap{ background:#fff;}

/* banner */
.ibanner{ height:100vh; position:relative;}
.ibanner .waves{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:9;}
.ibanner .waves canvas{ width:100% !important; height:100% !important; position:absolute; left:0; top:0;}
.ibanner .swiper-slide{ display:block; height:100%; background:#fff center no-repeat; background-size:cover; overflow:hidden; position:relative;}
.ibanner .swiper-slide .box{ height:100%; background-size:cover !important; padding:0 8%; overflow:hidden; position:relative;}
.ibanner .swiper-pagination{ display:block; bottom:4%;}
.ibanner .swiper-pagination-bullet{ width:10px; height:10px; background:#00c3de; border-radius:50%; opacity:1; margin:0 6px !important; vertical-align:top;}
.ibanner .swiper-pagination-bullet-active{ background:#fff; opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ width:70px; height:70px; background-size:contain !important; margin-top:-20px;}
.ibanner .swiper-button-prev{ background:url(../images/icons/prev.png) center no-repeat;}
.ibanner .swiper-button-next{ background:url(../images/icons/next.png) center no-repeat;}

/*主体样式*/
.main{ background:#fff; padding:0; overflow:hidden; position:relative;}
.clear{ clear:both;}

.ibox{ position:relative;}
.ibox .con{ padding:0 8%;}
.ibox .con::before,
.ibox .con::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox h2{ display:block; line-height:1; font-size:48px; text-align:center; padding:1em 0; overflow:hidden; position:relative; margin:4% 0 0;}
.ibox h2 em{ display:block; color:#999; position:relative; z-index:3;}
.ibox h2 span{ display:block; width:100%; line-height:1; color:#efefef; font-size:1.7em; text-transform:uppercase; position:absolute; left:0; top:0; z-index:1;}
.ibox a.more{ display:block; width:9.5em; line-height:2.4; color:#999; font-size:18px; text-align:center; background:#fff; border:2px solid #999; border-radius:1.25em; margin:0 auto; transition:all ease 0.4s;}
.ibox a.more:hover{ color:#fff; background:#00c3de; border-color:#00c3de;}

.box1 ul{ display:block; margin:0 -6px;}
.box1 ul::after{ content:''; display:block; overflow:hidden; clear:both;}
.box1 ul li{ display:block; width:33.33%; float:left; transition:all ease 0.4s;}
.box1 ul li a{ display:block; background:#00111d; overflow:hidden; position:relative; margin:0 6px;}
.box1 ul li a img{ display:block; width:100%; opacity:0.4;}
.box1 ul li a span{ display:block; width:100%; line-height:1; color:#bbb; font-size:14px; text-align:center; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.box1 ul li a em{ display:block; color:#fff; font-size:2.286em; margin:0 0 0.625em;}
.box1 .txt{ line-height:2.5; color:#999; font-size:16px; text-align:center; overflow:hidden; padding:3.25% 6.5% 3%;}
.box1 ul li:hover{ transform:translateY(-16px);}

.box2 .yw-swiper{ position:relative; margin:1% 0 5%;}
.box2 .yw-swiper .swiper-button-prev,
.box2 .yw-swiper .swiper-button-next{ width:60px; height:60px; background:rgba(0,0,0,0.16) center no-repeat; background-size:contain; margin-top:-30px;}
.box2 .yw-swiper .swiper-button-prev{ background-image:url(../images/icons/prev1.png); left:-86px;}
.box2 .yw-swiper .swiper-button-next{ background-image:url(../images/icons/next1.png); right:-86px;}
.box2 .yw-swiper .swiper-button-prev:hover,
.box2 .yw-swiper .swiper-button-next:hover{ background-color:rgba(0,195,222,0.8);}
.box2 .yw-swiper .swiper-slide a{ display:block; background:#000; overflow:hidden; position:relative;}
.box2 .yw-swiper .swiper-slide a span{ display:block; width:100%; line-height:1; color:#fff; font-size:24px; text-align:center; overflow:hidden; position:absolute; left:0; top:48%; transform:translateY(-50%);}
.box2 .yw-swiper .swiper-slide a img{ display:block; width:100%; opacity:0.5; transition:all ease 0.4s;}
.box2 .yw-swiper .swiper-slide a em{ display:block; width:3.34em; height:3.34em; border-radius:50%; background:#fff center bottom no-repeat; background-size:100% 200%; margin:0 auto 1.8em; transition:all ease 0.4s;}
.box2 .yw-swiper .swiper-slide a em.ico01{ background-image:url(../images/icons/yw01.png);}
.box2 .yw-swiper .swiper-slide a em.ico02{ background-image:url(../images/icons/yw02.png);}
.box2 .yw-swiper .swiper-slide a em.ico03{ background-image:url(../images/icons/yw03.png);}
.box2 .yw-swiper .swiper-slide a em.ico04{ background-image:url(../images/icons/yw04.png);}
.box2 .yw-swiper .swiper-slide a em.ico05{ background-image:url(../images/icons/yw05.png);}
.box2 .yw-swiper .swiper-slide a em.ico06{ background-image:url(../images/icons/yw06.png);}
.box2 .yw-swiper .swiper-slide a em.ico07{ background-image:url(../images/icons/yw07.png);}
.box2 .yw-swiper .swiper-slide a em.ico08{ background-image:url(../images/icons/yw08.png);}
.box2 .yw-swiper .swiper-slide a em.ico09{ background-image:url(../images/icons/yw09.png);}
.box2 .yw-swiper .swiper-slide a em.ico10{ background-image:url(../images/icons/yw10.png);}
.box2 .yw-swiper .swiper-slide a em.ico11{ background-image:url(../images/icons/yw11.png);}
.box2 .yw-swiper .swiper-slide a em.ico12{ background-image:url(../images/icons/yw12.png);}
.box2 .yw-swiper .swiper-slide a:hover{ background:#00c3de;}
.box2 .yw-swiper .swiper-slide a:hover em{ transform:rotateY(180deg);}
.box2 .yw-swiper .swiper-slide a:hover img{ opacity:0.5; transform:scale(1.04);}
.box2 a.more{ margin-bottom:5%;}

.box3{ background:#f5f5f5;}
.box3 ul{ display:block; overflow:hidden; margin:0 -36px 2.5%;}
.box3 ul li{ display:block; width:50%; float:left;}
.box3 ul li a{ display:block; overflow:hidden; margin:12px 36px 36px; position:relative; transition:all ease 0.4s;}
.box3 ul li a img{ display:block; width:100%; height:auto; transition:all ease 0.4s;}
.box3 ul li a span{ display:block; width:100%; line-height:3; color:#fff; font-size:18px; text-align:center; background:rgba(0,0,0,0.5); position:absolute; left:0; bottom:0;}
.box3 ul li a:hover{ background:#000;}
.box3 ul li a:hover img{ transform:scale(1.12); opacity:0.9;}
.box3 ul li a:hover span{ background:rgba(0,195,222,0.6);}
.box3 a.more{ background:#f5f5f5; margin-bottom:5%;}

.box4{}
.box4 ul{ display:block; border:1px solid #f0f0f0; border-width:1px 0 0 1px; margin:0 0 7.5%;}
.box4 ul::before,
.box4 ul::after{ content:''; display:block; height:0; overflow:hidden; clear:both;}
.box4 ul li{ display:block; width:20%; float:left;}
.box4 ul li a{ display:block; overflow:hidden; border:1px solid #f0f0f0; margin:-1px 0 0 -1px; position:relative; transition:all ease 0.4s;}
.box4 ul li a img{ display:block; width:100%; height:auto; transition:all ease 0.4s;}
.box4 ul li a:hover{ border-color:#00c3de; z-index:5;}
.box4 ul li a:hover img{ transform:scale(1.12);}


/*pc适配*/
@media only screen and (max-width:1440px){
.ibox .con{ width:1200px; padding:0; margin-left:auto; margin-right:auto;}
}

@media only screen and (max-width:1412px){
.box2 .con{ width:auto; margin:0 20px;}
.box2 .yw-swiper{ margin-left:86px; margin-right:86px;}
}

@media only screen and (max-width:1240px){
.ibox .con{ width:auto; padding:0 20px;}
.ibox h2{ font-size:40px;}

.box2 .yw-swiper{ margin-left:80px; margin-right:80px;}

.box3 ul{ margin-left:-12px; margin-right:-12px;}
.box3 ul li a{ margin-left:16px; margin-right:16px; margin-bottom:24px;}
}

/*pad适配*/
@media only screen and (max-width:1024px){
.ibanner{ height:80vh;}
.ibanner .swiper-button-prev, .ibanner .swiper-button-next{ display:none;}

.ibox h2{ font-size:36px;}
.ibox .con{ padding:0 16px;}
.ibox a.more{ font-size:15px;}

.box1 ul li a em{ font-size:1.75em;}
.box1 .txt{ font-size:14px;}

.box2 .yw-swiper{ margin-left:60px; margin-right:60px;}
.box2 .yw-swiper .swiper-button-prev,
.box2 .yw-swiper .swiper-button-next{ width:48px; height:48px; margin-top:-24px;}
.box2 .yw-swiper .swiper-button-prev{ left:-60px;}
.box2 .yw-swiper .swiper-button-next{ right:-60px;}

.box3 ul{ margin-left:-8px; margin-right:-8px;}
.box3 ul li a{ margin-left:12px; margin-right:12px; margin-bottom:14px;}
.box3 ul li a span{ font-size:15px;}
}

/*手机适配*/
@media only screen and (max-width:767px){
.ibanner{ height:43vh;}
.ibanner .swiper-pagination{ height:12px;}
.ibanner .swiper-pagination-bullet{ width:6px; height:6px; border-width:1px; margin:0 3px !important;}

.ibox .con{ padding:0 12px;}
.ibox h2{ font-size:24px; margin-top:9%;}
.ibox h2 span{ font-size:1.5em;}
.ibox a.more{ font-size:14px;}

.box1 ul li{ width:84%; margin:2% 8% 2%;}
.box1 ul li a img{ height:24vw; object-fit:cover;}
.box1 ul li a em{ font-size:1.3em;}
.box1 .txt{ font-size:13.5px; padding:4% 0 7%;}
.box1 a.more{ margin-bottom:2%;}

.box2 .yw-swiper{ margin-left:56px; margin-right:56px;}
.box2 .yw-swiper .swiper-button-prev,
.box2 .yw-swiper .swiper-button-next{ width:40px; height:40px; margin-top:-20px;}
.box2 .yw-swiper .swiper-button-prev{ left:-54px;}
.box2 .yw-swiper .swiper-button-next{ right:-54px;}
.box2 .yw-swiper .swiper-slide a span{ font-size:18px;}
.box2 .yw-swiper .swiper-slide a img{ height:80vw; object-fit:cover;}

.box3 ul{ margin-left:0; margin-right:0;}
.box3 ul li{ width:100%;}
.box3 ul li a{ margin:0 0 12px;}
.box3 ul li a span{ font-size:14px;}
.box3 a.more{ margin-bottom:8%;}

.box4 ul{ margin-bottom:10%;}
.box4 ul li{ width:33.33%;}

}





/**/