@charset "UTF-8";
body{background: #f5f5f5;}
/* section-cnt */
.section-cnt{margin-bottom: 20px;}
/* section tri-cols */
.section-cnt .col-sub{width: 356px;padding: 0 14px 10px;margin-right: 24px;background-color: #fff;}
.section-cnt .col-sub.last-item{margin-right: 0;}
.section-cnt .col-main{width: 764px;padding: 0 14px 10px;background-color: #fff;}
.section-cnt .col-main-inner .col-sub{padding: 0;}
/* headline */
.headline-container{background-color: #fff;padding-bottom: 25px;margin-top: 25px;}
.mod-headline .headline-title{font-size: 38px;color: #333;position: relative;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;padding: 24px 0 14px 0;}
.mod-headline .headline-title-link{color: #333;}
.mod-headline .headline-title-mark{color: #d20000;position: relative;padding-right: 24px;}
.mod-headline .headline-title-mark:after{width: 8px;height: 8px;border-radius: 50%;background-color: #d20000;position: absolute;top: 0;right: 8px;bottom: 0;left: auto;content: "";margin: auto;}
.mod-headline .headline-text{font-size: 14px;color: #666;text-align: center;}
.mod-headline .headline-text-link{position: relative;padding: 0 10px;max-width: 270px;overflow: hidden;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;}
.mod-headline .headline-text-link:after{width: 1px;height: 15px;content: "";background-color: #333;position: absolute;top: 2px;right: 0;}
.mod-headline .headline-text-link.last-item:after{display: none;}

/* swiper-container-01 */
.swiper-container{position: relative;}
.swiper-container-01{width: 100%;height: 504px;}
.swiper-container-01 .swiper-slide{height: 504px;position: relative;}
.swiper-container-01 .slide-image{width: 1200px;height: 504px;}
.swiper-container-01 .slide-image img{width: 100%;height: 100%;}
.swiper-container-01 .slide-mask,
.swiper-container-01 .slide-text{position: absolute;left: 0;bottom: 0;height: 65px;line-height: 65px;z-index: 99;overflow: hidden;color: #fff;font-size: 24px;width: 100%;display: none;}
.swiper-container-01 .slide-mask{background-color: #000000;opacity: 0.4;filter: alpha(opacity=40);}
.swiper-container-01 .slide-text p{color: #fff;padding-left: 30px;max-width: 580px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.swiper-container-01 .swiper-control{position: absolute;top: 0;right: 112px;width: 250px;height: 100%;background: url(../img/bg-control.png) 0 0 no-repeat;z-index: 9999;color: #fff;padding-top: 20px;}
.swiper-container-01 .swiper-control .swiper-control-item{padding: 14px 18px;cursor: pointer;} 
.swiper-container-01 .swiper-control .swiper-control-item-inner{font-size: 14px;line-height: 20px;height: 40px;overflow: hidden;display: block;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.swiper-container-01 .swiper-control .swiper-control-item.cur{padding: 10px 18px;background: url(../img/bg-control-item.png) center center no-repeat;}
.swiper-container-01 .swiper-control .swiper-control-item.cur .swiper-control-item-inner{font-size: 16px;line-height: 24px;height: 48px;}

/* 维权执法 & 95110 & 国际合作 */
.section-headline+.section-cnt .col-sub{height: 301px;}
.news-container{margin-top: 10px;}
.news-container>.text-news{margin-top: 6px;}
/* section-swiper-02 */
.section-swiper-02{}
.swiper-container-02{height: 367px;margin-top: 20px;}
.swiper-container-02 .swiper-slide{width: 100%;background-color: #fff;}
.swiper-container-02 .slide-image{width: 662px;height: 367px;margin-right: 68px;}
.swiper-container-02 .slide-image img{width: 100%;height: 100%;display: block;}
.swiper-container-02 .slide-title{font-size: 22px;color: #09448f;line-height: 68px;border-bottom: 1px solid #b5b5b5;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-top: 50px;margin-bottom: 25px;margin-right: 34px;}
.swiper-container-02 .slide-text{font-size: 16px;line-height: 24px;color: #999;height: 96px;overflow: hidden;padding-right: 38px;}
.swiper-container-02 .arrow-left-02,
.swiper-container-02 .arrow-right-02{width: 66px;height: 66px;position: absolute;top: 269px;background-position: center center;background-repeat: no-repeat;z-index: 999;}
.swiper-container-02 .arrow-left-02{background-image: url(../img/arr-left.png);right: 142px;}
.swiper-container-02 .arrow-right-02{background-image: url(../img/arr-right.png);right: 66px;}
/* section-swiper-03 专项行动*/
.section-swiper-03{}
.section-swiper-03 .wrapper{background-color: #fff;padding-bottom: 20px;}
.section-swiper-03 .title-line{margin: 0 14px;}
/* .bx-wrapper{padding: 0 70px;position: relative;}
.bx-wrapper .bx-viewport{border: none;margin-top: 20px;box-shadow: none;}
.bx-wrapper .slide-image{width: 296px;height: 160px;}
.bx-wrapper .bx-controls-direction a.bx-prev,
.bx-wrapper .bx-controls-direction a.bx-next{width: 40px;height: 66px;position: absolute;top: 60px;background-color: #f3f3f3;background-position: center center;background-repeat: no-repeat;z-index: 999;}
.bx-wrapper .bx-controls-direction a.bx-prev{background-image: url(../img/arr-left.png);left: 16px;}
.bx-wrapper .bx-controls-direction a.bx-next{background-image: url(../img/arr-right.png);right: 16px;} */
.section-swiper-03 .slider-wrapper{padding: 0 65px;}
.section-swiper-03 .owl-carousel{padding-top: 20px;}
.section-swiper-03 .owl-carousel .slide-image{width: 296px;height: 160px;}
.section-swiper-03 .owl-carousel .owl-nav .owl-prev,
.section-swiper-03 .owl-carousel .owl-nav .owl-next{width: 40px;height: 66px;position: absolute;top: 65px;background-color: #f3f3f3;background-position: center center;background-repeat: no-repeat;z-index: 999;}
.section-swiper-03 .owl-carousel .owl-nav .owl-prev{background-image: url(../img/arr-left.png);left: -50px;}
.section-swiper-03 .owl-carousel .owl-nav .owl-next{background-image: url(../img/arr-right.png);right: -50px;}

/* section-03 海洋气象 & 大美海疆 & 在线咨询*/
.section-03{}
/* 大美海疆 幻灯 */
.swiper-container-04{height: 210px;margin-top: 10px;}
.swiper-container-04 .swiper-wrapper{height: 100%;}
.swiper-container-04 .swiper-slide{width: 100%;height: 210px;background-color: #fff;position: relative;}
.swiper-container-04 .swiper-slide .slide-image{position: absolute;}
.swiper-container-04 .swiper-slide .slide-image img{width: 100%;height: 100%;}
.swiper-container-04 .swiper-slide .slide-image .icon{width: 39px;height: 39px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
.swiper-container-04 .swiper-slide .slide-image{width: 175px;height: 96px;}
.swiper-container-04 .swiper-slide .slide-image-01{top: 5px;left: 0;}
.swiper-container-04 .swiper-slide .slide-image-02{top: 5px;right: 0;}
.swiper-container-04 .swiper-slide .slide-image-03{bottom: 5px;left: 0;}
.swiper-container-04 .swiper-slide .slide-image-04{bottom: 5px;right: 0;}

/* 在线咨询 网上报警 */
.menu-container{width: 384px;}
.menu-container .menu-item{margin: 0 0 15px 0;width: 100%;height: 133px;font-size: 35px;line-height: 133px;color: #09448f;text-align: center;background-color: #fff;font-weight: bold;}
.menu-container .menu-item.last-item{margin: 0;}
.menu-container .menu-item a{color: #09448f;}
.menu-container .menu-item .icon-holder{display: inline-block;vertical-align: middle;background-position: center center;background-repeat: no-repeat;margin-right: 15px;}
.menu-container .menu-item.zxzx .icon-holder{width: 45px;height: 36px;background-image: url(../img/icon-zxzx.png);}
.menu-container .menu-item.wsbj .icon-holder{width: 39px;height: 39px;background-image: url(../img/icon-wsbj.png);}
/* 公众号矩阵 */
.matrix-wrapper{}
.matrix-item{width: 290px;height: 106px;background-color: #fff;border-radius: 5px;position: relative;font-size: 16px;margin-right: 10px;overflow: hidden;cursor: pointer;}
.matrix-item.last-item{width: 300px;margin-right: 0;}
.matrix-item .matrix-mask,
.matrix-item .matrix-cnt{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.matrix-image{width: 64px;height: 64px;margin-right: 16px;}
.matrix-inner-title{line-height: 64px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.matrix-inner-name{padding-bottom: 10px;line-height: 22px;font-size: 12px;color: #939393;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: none;}
.matrix-cnt{background-color: #d1def4;}
.matrix-item .matrix-mask .matrix-inner{padding: 21px 0 0 32px;}
.matrix-item .matrix-mask .matrix-image{border-radius: 50%;overflow: hidden;}
.matrix-item .matrix-cnt{display: none;}
.matrix-item .matrix-cnt .matrix-inner{padding: 15px 0 0 22px;}
.matrix-item .matrix-cnt .matrix-image{width: 78px;height: 78px;}
.matrix-item .matrix-cnt .matrix-inner-title{line-height: 78px;} 
.matrix-item .matrix-cnt .matrix-inner-name{padding-bottom: 17px;}
.matrix-item:hover .matrix-cnt{display: block;}

/*  */
.section-01 .col-sub{min-height: 331px;}
.section-02 .col-sub{min-height: 331px;}

@media screen and (max-width: 900px){
  .section-cnt{margin-bottom: 0;}
  .col-sub{height: auto !important;}
  .headline-container{padding-bottom: 0;background-color: transparent;margin-top: 0;}
  .mod-headline .headline-title{padding: 0;line-height: 1rem;border-bottom: .02rem solid rgba(170,170,170,.2);margin-bottom: .1rem;text-align: left;}
  .mod-headline .headline-title-link{font-weight: bold;font-size: .36rem;padding: 0 .24rem;}
  .mod-headline .headline-title-mark{color: #ff3535;}
  .mod-headline .headline-title-mark:after{background-color: #ff3535;}
  .mod-headline .headline-text{}
  .mod-headline .headline-text-link{display: block;line-height: .56rem;font-size: .3rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: left;padding: 0 0 0 .46rem;color: #333;background: url(../img/dot-blue.png) .25rem center no-repeat;background-size: .09rem;}
  .mod-headline .headline-text-link:after{display: none;}

  .swiper-container-01{}
  .swiper-container-01,
  .swiper-container-01 .slide-image{width: 100%;height: 3.2rem;}
  .swiper-container-01 .slide-image img{max-width: 100%;max-height: 100%;display: block;margin: 0 auto;object-fit: fill;}
  .swiper-container-01 .swiper-control{display: none;}
  .swiper-container-01 .slide-mask, 
  .swiper-container-01 .slide-text{display: block;height: .65rem;line-height: .65rem;font-size: .32rem;}
  .swiper-container-01 .slide-text p{padding: 0 .2rem;}

  .menu-container{display: flex;flex-wrap: wrap;justify-content: space-around; margin: .2rem 0 0 0;float: none;width: 100%;}
  .menu-container .menu-item{width: 3.43rem;height: 1.04rem;margin: auto;font-size: .36rem;line-height: 1.04rem;}
  .menu-container .menu-item.last-item{margin: auto;}
  .menu-container .menu-item.zxzx .icon-holder{width: .6rem;height: .5rem;background-image: url(../img/icon-zxzx-wap.png);background-size: 100%;}
  .menu-container .menu-item.wsbj .icon-holder{width: .54rem;height: .54rem;background-image: url(../img/icon-wsbj-wap.png);background-size: 100%;}

  .section-cnt .col-sub,
  .section-cnt .col-main{float: none;width: 100%;margin: 0;background-color: transparent;}
  .section-cnt .col-sub{padding-bottom: .1rem;}
  .news-container>.text-news{margin-top: .2rem;}
  .qwfb .col-sub.last-item{display: none;}

  .section-ad{display: none;}

  .section-swiper-02{padding: 0 14px;}
  .swiper-container-02{height: 3.94rem;}
  .swiper-container-02 dl{position: relative;}
  .swiper-container-02 .slide-image{width: 100%;height: 3.94rem;margin: 0;float: none;}
  .swiper-container-02 .slide-title{position: absolute;left: 0;bottom: 0;width: 100%;font-size: .3rem;height: .56rem;line-height: .56rem;margin: 0;padding: 0;color: #fff;background-color: rgba(0,0,0,.3);text-align: center;border-bottom: none;}
  .swiper-container-02 .slide-text,
  .swiper-container-02 .arrow-left-02,
  .swiper-container-02 .arrow-right-02{display: none;}
  .section-swiper-03{display: none;}

  .xxgk .col-sub.last-item,
  .flfg .col-sub.last-item{display: none;}

  .swiper-container-04 .swiper-slide .slide-image{width: 3.4rem;height: 1.92rem;}
  /* .swiper-container-04 .swiper-slide .slide-image-01{top: 5px;}
  .swiper-container-04 .swiper-slide .slide-image-02{top: 5px;right: 0;}
  .swiper-container-04 .swiper-slide .slide-image-03{bottom: 5px;right: 0;} */

  .matrix-wrapper{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: .2rem;font-size: 0;}
  .matrix-item,
  .matrix-item.last-item{width: 3.46rem;height: 1.22rem;margin: 0 auto .2rem auto;}
  .matrix-item .matrix-mask{display: none;}
  .matrix-item .matrix-cnt{display: flex;justify-content: center;align-items: center;}
  .matrix-item .matrix-cnt .matrix-inner,
  .matrix-item .matrix-cnt .matrix-inner-title,
  .matrix-item .matrix-cnt .matrix-inner-name{padding: 0;}
  .matrix-item .matrix-cnt .matrix-inner{padding: 0 .2rem;width: 100%;}
  .matrix-item .matrix-cnt .matrix-image{width: 0.9rem;height: 0.9rem;margin: 0.16rem .1rem 0 0;}
  .matrix-item .matrix-cnt .matrix-inner-title{font-size: .24rem;line-height: 1.22rem;}
  
  .section-01 .col-sub,
  .section-02 .col-sub{min-height: auto;}
}