.banner .img{height: 100vh;}
.banner{z-index: 5;}
.banner .img img{position: absolute;left: 50%;top: 40%;transform: translate(-50%,-40%);margin-top: 50px;opacity: 0;transition: 1s ;max-width: 60%;}
.banner .swiper-slide-active .img img{opacity: 1;margin-top: 0;}
.banner .swiper-pagination{left: 0 !important;bottom: 2% !important;position: absolute;z-index: 2;}
.banner .swiper-pagination span{width: 40px;height: 40px; display: block;position: relative;margin: 0.5rem 0 0 0 !important;opacity: 1;cursor: pointer;background: transparent;}
.banner .swiper-pagination span::before{content: "";position: absolute;top: 50%;left: 50%;width: 10px;height: 10px;border-radius: 50%;margin: -5px -5px;background: #fff;}
.banner .swiper-pagination-bullet svg{position: absolute;left: -1px;top: -1px;width: 40px;height: 40px;fill: transparent;stroke-width: 3px;stroke: #fff;stroke-dasharray: 120;stroke-dashoffset: 120;}
.banner .swiper-pagination-bullet-active{color: #005bac;}
.banner .swiper-pagination-bullet-active svg{animation: loopSvg 5.6s linear forwards;-webkit-animation: loopSvg 5.6s linear forwards;}
@keyframes loopSvg{
	to{stroke-dashoffset: 0;}
}
@-webkit-keyframes loopSvg{
	to{stroke-dashoffset: 0;}
}
/* 首页标题 */
.idxTitle .flexbetween{align-items: center;}
.idxTitle .cn{color: #2E7CD3;}
.idxTitle .en{color: #2E7CD3;opacity: 0.34; line-height: 1;text-transform:uppercase;}
.idxTitle > div{position: relative;}
.idxTitle.flexCenter > div::after,.titleBg::after{position: absolute;content: '';margin-left: -17px; left: 50%;bottom: 0;background: url(../images/shuibo.svg) center bottom no-repeat;width: 38px;height: 8px;animation: hvr-ripple-out-s infinite 3s ease-in-out}
@-webkit-keyframes hvr-ripple-out-s {
    0% {
     width: 0;
    }
    50% {
      width: 38px;
    }
	100% {
	  width: 0;
	}
  }
.titleBg{position: relative;}
.titleBg::after{left: 0;margin-left: 0;}
.idxTitle{padding-bottom: 0.83rem;}
.idxTitle.flexCenter > div{padding-bottom: 1rem;text-align: center;position: relative;}
.idxTitle.flexCenter > div .en{opacity: 1;padding-top: 5px;}

.indexOne .moreAll{margin: inherit;}
.indexOne .tabs {margin-left: 1.83rem;margin-top: 12px;}
.indexOne .tabs a{color: #333;position: relative;margin-left:30px;}
.indexOne .tabs a span{display: block;line-height: 1.6rem;background: rgba(255,255,255,0);width: 5rem;border-radius: 35px;}
.indexOne .tabs a.active span{background: rgba(22,163,234,1);color: #fff;}
.indexOne .tabs a::after{width: 51px;height: 2px;background: url(../images/tabon.svg) no-repeat;content: '';position: absolute;left: -26px;top: 50%;margin-top: -1px;transform: scaleX(0);}
.indexOne .tabs a.active::after{transform: scaleX(1);}

.oneSwiper{width: 50%;}
.oneSwiper .img{padding-bottom: 457px;}
.oneSwiper .gray{background: rgba(0,32,66,0.56);position: absolute;left: 0;bottom: 0;width: 100%;padding: 0.83rem 0.76rem;box-sizing: border-box;line-height: 1.375;}
.oneSwiper .gray .cn{margin-top: 5px;}
.oneSwiper .btn{position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,.4);width: 48px;height: 115px;background-position:  center center; background-repeat: no-repeat;cursor: pointer;transition: 0.3s;}
.oneSwiper .btn.prev{left: 0;background-image: url(../images/prev.svg); }
.oneSwiper .btn.next{right: 0;background-image: url(../images/next.svg);}
.oneSwiper .btn:hover{background-color: rgba(2,78,162,0.5);}
.oneSwiper a:hover .img{transform: scale(1.1);}
.oneSwiper a:hover .gray{padding: 1rem  0.76rem;background:  rgba(0,32,66,0.9);}

.indexOne .oneRight{width: calc(50% - 1rem);}
.indexOne .oneRight dl{border-bottom: 1px solid #F0F0F0;padding-bottom: 0.66rem;}
.indexOne .oneRight dl dt{width: 90px;border-right: 1px solid #D8D8D8;padding-bottom: 5px;}
.indexOne .oneRight dl dd{width: calc(100% - 112px);margin-left: 22px;}
.indexOne .oneRight dl dt .data{color: #024EA2;line-height: 1.4;margin-bottom: 3px;}
.indexOne .oneRight dl dd .title{color: #024EA2;line-height: 1;margin-bottom: 0.3rem;}
.indexOne .oneRight dl dd .subtitle{color: #666;line-height:1.7 ;}
.indexOne .oneRight ul li a{padding: 0.77rem 0;border-bottom: 1px solid #F0F0F0;}
.indexOne .oneRight ul li a::after{background: url(../images/amore.svg);width: 12px;height: 16px;right: 0;top: 50%;transform: translateY(-50%);}
.indexOne .oneRight ul li a .data{color: #666;border-right: 1px solid #D8D8D8;padding-right: 0.4rem;}
.indexOne .oneRight ul li a .title{padding-left: 0.4rem;width: calc(100% - 160px);margin-right: 30px;}
.indexOne .oneRight ul li a:hover .title,.indexOne .oneRight dl:hover dd .title,.twoLeft .container .twoUl li a:hover .cn{color: #024EA2;transform: translateX(5px);}
.twoLeft .container .twoUl{margin-bottom: 0.5rem;}

.indexTwo{background: #F8F8FA; padding-bottom: 0;}
.twoLeft{width: 70%;}
.indexTwo .tabs{width: 30.6%;background: #BCD7F4;}
.indexTwo .tabs a{padding: 1.3rem;height: 50%;box-sizing: border-box;}
.indexTwo .tabs a.active{background: rgba(0,30,92,0.3);}
.indexTwo .tabs a .en{color: rgba(255,255,255,0.5); line-height: 1.3;padding-bottom: 0.66rem;margin-bottom: 2.86rem;}
.indexTwo .tabs a .en::after{height: 4px;width: 40px;background: #fff;left: 0;bottom: 0;}
.indexTwo .tabs a img{position: absolute;right: 1.3rem;bottom: 1.3rem;opacity: 0.5;}
.indexTwo .tabs a.active img{transform: translateY(-10px);opacity: 1;}
.twoLeft .container{width: 69.4%;box-sizing: border-box;}
.twoLeft .container > .swiper-wrapper > .swiper-slide {padding: 0 1.3rem;width: 100%;box-sizing: border-box;}
.twoLeft .container .twoTitle{border-bottom: 1px solid #E1E1E1;}
.twoLeft .container .twoTitle span{display: inline-block;line-height: 42px;margin-top: 23px;color: #008DD4;}
.twoLeft .container .twoTitle span::after{width: 100%;height: 4px;background: #008DD4;left: 0;bottom: -1px;}
.twoLeft .container .wrap .title span{display: inline-block;padding-bottom: 13px;color: #008DD4;padding-top: 23px;}
.twoLeft .container .wrap .title span::after,.twoLeft .container .wrap .title span::before{width: 100%;background: #008DD4;}
.twoLeft .container .wrap .title span::after{height: 1px;left: 0;bottom: 0;}
.twoLeft .container .wrap .title span::before{height: 4px;bottom: 4px;}
.twoLeft .container .wrap .title{margin-bottom: 18px;}
.twoLeft .container .wrap dl dt{width: 90px;}
.twoLeft .container .wrap dl dd{width: calc(100% - 90px);}
.twoLeft .container .wrap dl{align-items: inherit;line-height: 25px;margin-bottom: 10px;}
.twoLeft .container .wrap .swiper-pagination{position: inherit;}
.twoLeft .container .wrap .swiper-pagination .swiper-pagination-bullet{opacity: 0.2;}
.twoLeft .container .wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 21px;border-radius: 5px;opacity: 1;}
.twoLeft .container .twoUl li a .cn::before{width: 6px;height: 8px;background: url(../images/shuidi.svg) center no-repeat;left: 0;top: 50%;margin-top: -4px;filter: brightness(0) invert(0.8);transition: 0.4s;}
.twoLeft .container .twoUl li a {padding: 0.6rem 0;border-bottom: 1px solid #E8E8E8;}
.twoLeft .container .twoUl li a .cn{padding-left: 16px;line-height: 22px;width: calc(100% - 115px);}
.twoLeft .container .twoUl li a:hover .cn::before{filter: inherit;}
.twoLeft .container .twoUl li:last-child a{border-bottom: none;}
.twoLeft .container .twoTitle2 span{margin-top: 0.5rem;}

/* 水质公告 */
.twoRight{width: 27.85%;background: url(../images/swbg.jpg);padding: 1.46rem 1.3rem 1rem;box-sizing: border-box;background-size: cover;}
.indexTwo .intel{align-items: inherit;}
.twoRight .tabs{width: 100%;background: none;}
.twoRight .tabs a{padding: 0;}
.twoRight .tabs a .en{margin-bottom: 0.6rem;}
.twoRight .tabs a.active{background: none;}
.twoRUl li a{border-bottom: 1px solid rgba(255,255,255,0.15);line-height: 18px;padding:0.45rem 0 0.45rem ;}
.twoRUl li a .time{margin-top: 0.2rem;}
.twoRUl li a .cn::after{width: 13px;height: 11px;background: url(../images/ggMOre.svg) center no-repeat;right: 0px;top: 50%;margin-top: -5px;}
.twoRUl li a .cn{padding-right: 20px;}
.twoRUl li a:hover .cn{transform: translateX(5px);}
.twoRight > a:after{content: '>';font-family: simsun;color: #fff;margin-left: 5px;}
.twoRight > a{line-height: 1.42;margin-top: 0.5rem;display: inline-block;}
/* 便民服务 */
.indexThree{background: url(../images/idxbg1.png) center top no-repeat #F8F8FA;padding-top: 6rem;box-sizing: border-box;}
.indexThree .idxTitle{filter: brightness(0) invert(1);}
.indexThree .idxTitle .en{opacity: 1;}
.indexThree .wave {position: absolute;left: 0;bottom: 10%;z-index: 2;width: 100%;}
.indexThree .waves {position: relative;width: 100%;height: 200px;margin-bottom: -10px;/*Fix for safari gap*/min-height: 70px;max-height: 250px;}
.indexThree .parallax > use {animation: move-forever 50s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;}
.indexThree .parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 20s;}
.indexThree .parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 28s;}
.indexThree .parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 34s;}
.indexThree .parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 48s;}
@keyframes move-forever {  
	0% {      transform: translate3d(-80px,0,0);  }
    50% { 
        transform: translate3d(80px,0,0);
    }
    100% {
        transform: translate3d(-80px,0,0);
    }
}
#bubbles{position: absolute;left: 0;bottom: 10%;width: 100%;height: 90%;}
.indexThree .container{z-index: 6;}
.indexThree .w90{padding: 0 2rem;box-sizing: border-box;margin-top: 2rem;}
.indexThree .btn{position: absolute;top: 50%;cursor: pointer;z-index: 7;margin-top: -18px;}
.indexThree .btn img{width: 20px;}
.indexThree .btn.prev{left: 0;}
.indexThree .btn.next{right: 0;}
.indexThree .btn.swiper-button-disabled{opacity: 0.2;}
.indexThree .container a{display: block;background: #fff;padding: 1rem;}
.indexThree .container a .moreAll{margin: auto;}
.indexThree .container a .num,.indexThree .container a .title{color: #2E7CD3;}
.indexThree .container a .title{line-height: 28px;padding-bottom: 0.6rem;}
.indexThree .container a .title::after{width: 35px;height: 4px;background: #024EA2;opacity: 0.2;left: 50%;bottom: 0;margin-left: -18px;}
.indexThree .container a .img{margin: 0.9rem 0 0.5rem;padding-bottom: 65%;}
.indexThree .container a .subtitle{text-align: left;margin-bottom: 1.2rem;}
.indexThree .container a .moreAll span{background: url(../images/more2.svg)  right center no-repeat;display: inline-block;height: 53px;line-height: 53px; filter: brightness(0) invert(0.7);}
.indexThree .container a .moreAll{width: 53px;height: 53px;border-color: #F4F4F4;background: #F4F4F4;}
.indexThree .container a:hover .moreAll span::before{content: '了解详情';}
.indexThree .container a:hover .moreAll {width: 164px;border-color: #16A3EA;background:#16A3EA ;}
.indexThree .container a:hover .moreAll span{filter: brightness(0) invert(1);width: 70px;}
.indexThree .container a:hover{transform: scale(0.95);box-shadow: 0 0 10px rgba(6,83,178,0.16);}
.indexThree .swiper-pagination{position: inherit;bottom: 0;margin-top: 1.4rem;}
.indexThree .swiper-pagination .swiper-pagination-bullet{background: #008DD4;}
.indexThree .swiper-pagination .swiper-pagination-bullet-active{width: 20px;border-radius: 10px;}
/* 供水 */
.indexFour{background: #F8FAFF;}
.indexFour .fourVideo{width: 64.2%;}
.ani-dot{position: absolute;left: 50%;top: 50%;margin: -10px 0 0 -9px; width: 20px;height: 20px;border-radius: 50%;color: #005E31;z-index: 2;}
.ani-dot::before{content: '';position: absolute;left: 50%;top: 50%;margin: -45px 0 0 -45px; background: rgba(255,255,255,0.7);border-radius: 50%;width: 90px;height: 90px;z-index: 2;}
.ani-dot::after{content: '';position: absolute;left: 50%;top: 50%;margin: -45px 0 0 -45px;width: 90px;height: 90px;background-color: rgba(255,255,255,0.2); border-radius: 50%;animation: aniDot 2s linear 1s infinite;}
.indexFour .fourVideo .img{padding-bottom: 450px;}
@keyframes aniDot{
	0%{opacity: 1;transform: scale(1);}
	100%{opacity: 0;transform: scale(2);}
}
.indexFour .container{padding-top: 0.5rem;align-items: inherit;}
.indexFour .fourVideo {background: #fff;}
.indexFour .fourVideo .text{padding: 1rem 1.3rem 1.3rem;}
.indexFour .fourVideo .text .title{color: #2E7CD3;line-height: 1.4;padding-bottom: 0.6rem;}
.indexFour .fourVideo .text .title::after{width: 43px;height: 4px;background: #2E7CD3;left: 0;bottom: 0;}
.indexFour .fourVideo .text .subtitle{color: #111;line-height: 1.625;margin-top: 0.4rem;}
.indexFour .fourVideo a:hover .text,.indexFour .fourRight .item a:hover .text{background: #2E7CD3;}
.indexFour .fourVideo a:hover .text *,.indexFour .fourRight .item a:hover .text *{color: #fff;}
.indexFour .fourVideo a:hover .text .title::after{background: #fff;}
.indexFour .fourRight {max-height: 631px;width: 32.8%;}
.indexFour .fourRight .item {margin-right: 1rem;margin-top: 0.66rem;}
.indexFour .fourRight .item:first-child{margin-top: 0;}
.indexFour .fourRight .item .text{background: #fff;padding: 1rem;}
.indexFour .fourRight .item .img{padding-bottom: 55%;}

@media screen and (max-width:1280px){
	.oneSwiper .img{padding-bottom: 390px;}
	.fixRight ul{width: 90px;}
	.fixRight ul li{height: 80px;padding-top: 0.6rem;}
	.fixRight ul li .ico img{width: 25px;}
}

@media screen and (max-width:1080px){
	.oneSwiper .img{padding-bottom: 350px;}
	
}
@media screen and (max-width:991px){
	.indexOne .oneRight dl dt{width: 70px;}
	.indexOne .oneRight ul li a .title{width: calc(100% - 130px);}
	.banner .img{height: auto;padding-bottom: 65%;}
	.indexTwo .tabs a img{width: 40px;}
	.twoLeft .container .twoTitle2 span{margin-top: 0;}
	.twoLeft .container .wrap dl dt{width:80px;		}
	.twoLeft .container .wrap dl dd{width: calc(100% - 80px);}
	.indexFour .fourVideo .img{padding-bottom: 300px;}
	.indexFour .fourRight{max-height: 450px;}
	.twoLeft .container .twoUl li a .cn{width: calc(100% - 90px);}
	
}
@media screen and (max-width:640px){
	.indexOne .titleBg{width: 100%;display: flex;justify-content: space-between;}
	.indexOne .tabs a span{width: 4rem;}
	.indexOne .tabs a,.indexOne .tabs{margin-left: 0;}
	.indexOne .tabs a::after,.indexOne .moreAll,.twoLeft .container .twoUl li a .time,.fixRight{display: none;}
	.oneSwiper,.indexOne .oneRight,.twoRight,.twoLeft,.twoLeft .container .twoUl li a .cn,.twoLeft .container .wrap dl dd,.indexFour .fourVideo,.indexFour .fourRight{width: 100%;}
	.oneSwiper .img{padding-bottom: 65%;}
	.indexOne .oneRight,.indexFour .fourRight{margin-top: 1rem;}
	.oneSwiper .btn{height: 80px;}
	.indexTwo .tabs a,.twoRight{padding: 0.5rem;}
	.twoLeft .container .twoTitle span{margin-top: 0rem;}
	.twoLeft .container > .swiper-wrapper > .swiper-slide{padding: 0 0.5rem;}
	.twoLeft .container .twoUl li a{padding: 0.3rem 0;}
	.indexTwo .tabs a img{right: 0.5rem;bottom: 0.5rem;}
	.twoRight .tabs a{padding: 0;}
	.indexThree .w90{margin-top: 0;}
	.indexThree{background-size: cover;background-position: center bottom}
	.indexFour .fourVideo .img{padding-bottom: 65%;}
	.indexFour .fourRight{max-height: inherit;}
	.indexFour .fourRight .item{margin-right: 0;}
	.ani-dot::before{width: 50px;height: 50px;margin: -25px 0 0 -27px;}
}