.top { margin:  30px 0;  }
#swiper1 {
    display: inline-block;
    width: 60%;
    height: 525px;
    margin: 0;
    vertical-align: middle;
}
#swiper1 .swiper-slide img, #swiper2 .swiper-slide img {
    width: 100%;
    height: 100%;
 /* object-fit: cover;*/
}
#swiper3 .swiper-slide img {
    width: 100%;
}
#swiper1 .swiper-pagination {
    text-align: left;
    padding-left: 30px;
}
#swiper1 .swiper-pagination .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    border-radius: 5px !important;
    opacity: 1 !important;
}
#swiper1 .swiper-pagination .swiper-pagination-bullet-active {
    border: 1.5px solid #024897;
    background: none !important;
}
#swiper1 .swiper-slide p{
position: absolute;
    bottom: 0;
    left: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    font-size: 15px;
    background: rgba(0,0,0,.6);
    padding: 10px 15px;
    padding-left: 147px;
    opacity: 1;
    transition: opacity .3s;
    margin: 0;
}
.top-right {
    float: right;
    width: 40%;
    min-height: 525px;
    background: #fff;
    padding: 30px;
    padding-top: 12px;
    color: #666;
    font-size: 16px;
}
.top-right>p {
    line-height: 50px;
    border-bottom: 1px dashed #ccc;
    display: flex;
    /* justify-content: space-between; */
}
.top-right > p a { cursor: pointer; text-align: center; position: relative;}

.top-right>p a:nth-child(2) {
    margin: 0px 10%;
    padding: 0 15px;
}
.top-right>p a:nth-child(3) {
    margin-left: -15px;
    padding: 0 15px;
}

.top-right>p a:nth-child(2)::after, .top-right>p a:nth-child(2)::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 15px;
    top: 18px;
    /* bottom: 18px; */
    left: -16px;
    background: #014896;
}
.top-right>p a:nth-child(2)::after {
    left: auto;
    right: -16px;
}
.top-right > p a:nth-child(2).active::before, .top-right > p a:nth-child(2).active::after {
    top: 17px;
}
.top-right > p a.active {
    font-size: 20px;
    font-weight: bold;
    color: #014896;
    position: relative;
    top: 1px;
    border-bottom: 3px solid; 
}
.top-right > p a:first-child::before {
    content: "NEW";
    display: inline-block;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: #f75555;
    width: 40px;
    height: 40px;
    line-height: 30px;
    padding: 5px;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 7px;
    margin-left: -7px;
    transform: scale(.6);
}

.top-right .zcjd li:first-child { padding: 0 }
.top-right ul { list-style: none; padding: 0; height: 320px}
.top-right ul p {   font-size: 18px;  margin-bottom: 20px; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }
.top-right ul p a { color: #004998; }

.top-right li:nth-of-type(1) { padding-bottom: 15px; }
.top-right ul li:nth-child(n+2) {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding-left: 28px;

}
.top-right ul li:nth-of-type(n+2)::before {
    content: "•";
    color: #bfbfbf;
    font-size: 25px;
    position: absolute;
    left: 10px;
}
.top-right ul li>a {
    display: inline-block;
    color: #666;
    overflow: hidden;
    max-width: calc(100% - 60px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-right li:nth-of-type(1) span { color: #333; line-height: 30px;}

.top-right li span.date { color: #666; float: right; margin-right: 10px;}

.top-right .btn {
    background: #f75555;
    width: 50%;
    margin-left: 25%;
    font-size: 16px;
}
.top-right .btn a { color: white;  display: block;}
.news { margin: 0 -10px; font-size: 16px;}
.news .col-md-4 { padding: 0 10px; min-height: 333px }
.news div p {
    height: 48px;
    line-height: 48px;
    font-size: 19px;
    margin: 0;
    margin-right: 18px;
    border-bottom: 1px dashed #b9cce2;
}
.news div { background: #fff content-box; }
.news div .categoryName {
    display: inline-block;
    width: 143px;
    color: #fff; 
    background: url(../image/titleBg.png);
    text-align: center;
 }
.news div .more, .news div ul li span {
    float: right;
    font-size: 16px;
    color: #999;
}
.news div ul {
    list-style: none;
    margin: 0;
    padding: 25px 18px 15px;
}
.news div ul li { line-height: 40px; padding-left: 18px;}
.news div ul li::before {
    content: '•';
    position: absolute;
    left: 24px;
    font-size: 24px;
    color: #bfbfbf;
}
.news div ul li a{
    color: #333;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 45px);
}
.banner {
    margin: 20px 0;
}
#swiper2 {
    height: 140px;
}
/* #swiper3 { height: 110px; } */

.swiper-button-prev,.swiper-button-next{
    background: none;
    width: 45px !important;
    line-height: 43px;
    color: #87939e;
    margin: 0;
    border: 1px solid #a7b7cf;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
    background: #a7b7cf;
}
.swiper-button-prev {
    transform: translate(calc(-100% - 30px), -50%);
}
.swiper-button-next {
    transform: translate(calc(100% + 30px), -50%);
}
.swiper-button-prev::after,.swiper-button-next::after{
    font-size: 25px;
    font-weight: bold;
}

.special-topic { display: flex; align-items: center; font-size: 18px;}
.special-topic::after { 
    display: table;
    content: "";
    clear: both;
 }
.special-topic div {
    float: left;
    width: 18%;
    overflow: hidden;
    text-align: center;
    border: 1px solid #e0e0e0;
    transition: all .3s;
}
.special-topic div:nth-child(-n + 4) {
    border-right-width: 0;
}
.special-topic div p {
    color: #3379d4;
    font-size: 22px;
    font-weight: bold;
    height: 90px;
    line-height: 90px;
    margin: 0;
    background: #f3f1f1;
}
.special-topic div p i {
    font-size: 28px;
    vertical-align: bottom;
    font-weight: normal;
    margin-right: 5px;
}
.special-topic div ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.special-topic div ul li {
    height: 115px;
    line-height: 115px;
    border-bottom: 1px solid #e1e1e1;
}
.special-topic .two ul li { line-height: 172px;   height: 172.5px;  }

.special-topic div ul li i {
    font-size: 24px;
    color: #bfbfbf;
    margin-right: 16px;
    margin-left: -4px;
    vertical-align: bottom;
    transition: font-size,color,padding,border,background .2s;
}
.special-topic div ul li a { display: block; height: 100%; color: #333; white-space: nowrap;}
 .special-topic .information p i, .special-topic .communication p i { font-weight: bold; }
.special-topic .information ul li {
    height: 57.5px;
    line-height: 57.5px;
}
.special-topic .information ul li:nth-child(1) i { margin-left: -16px; }
.special-topic .information ul li:nth-child(2) i { font-size: 20px; margin-left: 3px; }
.special-topic .information ul li:nth-child(3) i { font-size: 26px; margin-right: 13px; margin-left: -17px;}
.special-topic .information ul li:nth-child(4) i { margin-left: -14px; margin-right: 14px; }
.special-topic .information ul li:nth-child(5) i { font-size: 20px; margin-left: -12px; margin-right: 11px; }
.special-topic .information ul li:nth-child(6) i { font-size: 22px; margin-left: -12px; margin-right: 7px; }

.special-topic .communication li i { font-size: 30px; margin-right: 14px; }
.special-topic .service ul li:nth-child(2) i{ margin-left: 32px; margin-right: 18px; }

.special-topic ul li:last-child {
    border: none;
}




.special-topic div.active {
    width: 28%;
    height: 481px;
    border: 1px solid #1e69c6;
}
.special-topic .active p {
    height: 100px;
    line-height: 100px;
    font-size: 26px;
    color: #fff;
    background: url(../image/specialTopicBg.png) 0 0 / 100% 100%;
}
.special-topic .active p i { 
    font-size: 30px;
    font-weight: normal;
    margin-right: 10px;
}

.special-topic .information.active p i { font-size: 40px; }

.special-topic .communication.active p i { font-weight: bold; }

.special-topic .knowledge.active p i { font-size: 45px; }

.special-topic .service.active p i { font-size: 46px; }


.special-topic .active ul { padding: 17px 0; overflow: hidden; }
.special-topic .active li {
    line-height: 95px;
    padding: 10px 20px;
    border: none;
    font-size: 22px;
    font-weight: bold;
}
.special-topic .two.active ul li { line-height: 151px;  }

.special-topic .active li i {
    color: inherit;
    font-size: 30px;
    font-weight: normal;
    margin-right: 18px;
    border: 1px solid;
    border-radius: 50%;
    padding: 15px;
	vertical-align: sub;
}
.special-topic .active li i:hover {
    color: #fff !important;
}

.special-topic .information.active ul { padding: 35px 0 3px; }
.special-topic .information.active li { 
    width: 33.33%;
    float: left;
    height: auto;
    line-height: 80px;
    font-size: 18px;
    padding: 10px 15px;
    font-weight: normal;
}
.special-topic .information.active li a {
    background: none !important;
}
.special-topic .information.active li i {
    display: block;
    width: 62px;
    height: 62px;
    line-height: 30px;
    margin: 0 auto !important;
}
.special-topic .information.active li i:hover {  }
.special-topic .information.active li:nth-of-type(1) a { color: #2eb5b0; }
.special-topic .information.active li:nth-of-type(1) i { color: #7ac7c4;  }
.special-topic .information.active li:nth-of-type(1) i:hover { background: #7ac7c4; border-color: #7ac7c4 }


.special-topic .information.active li:nth-of-type(2) a { color: #9852d0; }
.special-topic .information.active li:nth-of-type(2) i { color: #d3b3ec; font-size: 25px;}
.special-topic .information.active li:nth-of-type(2) i:hover { background: #d3b3ec; border-color: #d3b3ec }



.special-topic .information.active li:nth-of-type(3) a { color: #f75555; }
.special-topic .information.active li:nth-of-type(3) i { color: #ff8686; font-size: 32px;}
.special-topic .information.active li:nth-of-type(3) i:hover { background: #ff8686; border-color: #ff8686; }


.special-topic .information.active li:nth-of-type(4) a { color: #4e99b4; }
.special-topic .information.active li:nth-of-type(4) i { color: #77afc3; }
.special-topic .information.active li:nth-of-type(4) i:hover { background: #77afc3; border-color: #77afc3 }


.special-topic .information.active li:nth-of-type(5) a { color: #f76529; }
.special-topic .information.active li:nth-of-type(5) i { color: #ffa783; font-size: 25px;}
.special-topic .information.active li:nth-of-type(5) i:hover{ background: #ffa783; border-color: #ffa783; }


.special-topic .information.active li:nth-of-type(6) a { color: #4da63d; }
.special-topic .information.active li:nth-of-type(6) i { color: #a8d89e; font-size: 25px;}
.special-topic .information.active li:nth-of-type(6) i:hover{ background: #a8d89e;  border-color: #a8d89e}



.special-topic .data.active li:nth-of-type(2) i { 
          display: inline-block;
          font-size: 27px;
          vertical-align: middle;
          line-height: 30px;
 }


.special-topic .communication.active li i, .special-topic .service.active li i { 
    font-size: 35px;
    padding: 12px 12.5px
}

.special-topic .service.active li:nth-of-type(1) i{
    font-weight: bold;
    margin-left: -6px;
}
.special-topic .service.active li:nth-of-type(2) i{ margin-left: 40px; }
.special-topic .service.active li:nth-of-type(3) a{
    color: #955fbf;
    background: #f0e7f7;
}
.special-topic .service.active li:nth-of-type(3) i{ margin-left: -5px; }
.special-topic .service.active li:nth-of-type(3) i:hover{ background: #955fbf; border-color: #955fbf }



.special-topic .active a { 
    border-radius: 10px;
    background-clip: content-box;
}
.special-topic .active ul li:nth-child(1) a { 
    background-color: #ddecf5; 
    color: #3379d4;
}
.special-topic .active ul li:nth-child(1) a i:hover{ 
    background-color: #3379d4;
    border-color:  #3379d4;
}

.special-topic .active ul li:nth-child(2) a { 
    background-color: #f9efe7;
    color: #f88930;
}
.special-topic .active ul li:nth-child(2) a i:hover{ 
    background-color: #f88930;
    border-color: #f88930;
}
.special-topic .active ul li:nth-child(3) a { 
    background-color: #F8E0DA;
    color: #f75555;
}
.special-topic .active ul li:nth-child(3) a i:hover{ 
    background-color: #f75555;
    border-color: #f75555;
}


.imgLink{
    border-top: 1px solid #EFF7FE;
    color: #c6c6c6;
    line-height: 130px;
    text-align: center;
}
.imgLink a { margin: 0 35px; position: relative;}
.imgLink a:first-child { margin-right: 25px; }
.imgLink a:nth-child(n + 2)::before{
    content: "";
    position: absolute;
    left: -35px;
    top: -18px;
    width: 1px;
    height: 52px;
    background: #cfcfcf;
}
.imgLink img { max-width: 280px; max-height: 130px}
.imgLink a:nth-child(4) img { height: 35px; }
/* .imgLink a:nth-child(1) img:first-child { margin-right: 5px; } */

@media only screen and (min-width: 992px) {
    #swiper1 { width: 46%; height: 405px; }
    .top-right { width: 54%; min-height: 405px; }
    .top-right>p, .top-right ul p, .top-right ul { margin-bottom: 10px; }
    .top-right li:nth-of-type(1) {
        padding-bottom: 0px;
    }
    .top-right ul li:nth-child(n+2) {
        height: 30px;
        line-height: 30px;
    }
    .special-topic .service ul li:nth-child(2) i { margin-left: 21px; }
    .special-topic .service.active li:nth-of-type(2) i { margin-left: 19px; }
}

@media only screen and (min-width: 1200px) {
    #swiper1 { width: 56%; height: 470px; }
    .top-right { width: 44%; min-height: 470px;}
    .top-right>p, .top-right ul p, .top-right ul { margin-bottom: 20px; }
    .top-right li:nth-of-type(1) {
        padding-bottom: 10px;
    }
    .top-right ul li:nth-child(n+2) {
        height: 35px;
        line-height: 35px;
    }
    .special-topic .service ul li:nth-child(2) i { margin-left: 32px; }
    .special-topic .service.active li:nth-of-type(2) i { margin-left: 40px; }

}
@media only screen and (min-width: 1400px) {
    #swiper1 { width: 60%; height: 525px;}
    .top-right { width: 40%; min-height: 525px;}
    .top-right>p, .top-right ul { margin-bottom: 30px; }
    .top-right li:nth-of-type(1) {
        padding-bottom: 15px;
    }
    .top-right ul li:nth-child(n+2) {
        height: 40px;
        line-height: 40px;
    }
}


@media only screen and (max-width: 992px) {
    .top { margin: 0 -15px 15px; }
    #swiper1, .top-right { width: 100%; }
    #swiper1 {
        /* height: 524px; */
    }
  
    .top-right {
        padding: 0 15px 20px;
        min-height: auto;
    }
  .top-right > p a.active{
  font-size:10px;
  }
    .top-right>p a:nth-child(2) {
        margin: 0px 28px;
        padding: 0;
    }
    .top-right>p { margin-bottom: 15px; }
   /* .top-right > p a.active { font-size: 10px; }*/
    .top-right > p a:first-child::before { margin-right: 0; }
    .top-right>p a:nth-child(2) {
        margin: 0px 30px;
        padding: 0px 5px;
    }
    .top-right>p a:nth-child(2)::after { right: -20px; }
    .top-right>p a:nth-child(2)::before { left: -20px; }
    .top-right>p a:nth-child(3) {
        margin-left: -10px;
        padding: 0 10px;
    }
    .top-right ul p { margin-bottom: 10px; }

    .news { margin: 0 -15px; }
    .news div.col-md-4 { margin-bottom: 15px; padding: 0;}
    #swiper2 { height: 60px; }
    .special-topic { flex-wrap: wrap; }
    .special-topic div, .special-topic div.active { width: 100%; margin-bottom: 15px; }
    .imgLink {
        display: none;
    }
   
    
}
@media only screen and (max-width: 500px) {
    #swiper1 {
        height: 262px;
    }
    .top-right>p span:nth-child(2) {
        margin: 0px 28px;
        padding: 0px;
    }
    .top-right>p span:nth-child(3) {
        margin-left: 0px;
        padding: 0;
    }
    .top-right>p span:nth-child(2)::before {
        left: -14px;
    }
    .top-right>p span:nth-child(2)::after {
        right: -14PX;
    }

}
@media only screen and (max-width: 375px){
  .top-right li:nth-of-type(1){
    width:97%;
    
  }
  .top-right li:nth-of-type(1) .date{
  margin-right:0;
  }
}
@media only screen and (max-width: 360px){
  .top-right li:nth-of-type(1){
  width:100%;
  }
  .top-right li:nth-of-type(1) .date{
  margin-right:10px;
  }
}
@media only screen and (max-width: 320px) {
  .top-right>p a:nth-child(2){
    font-size:10px;
  margin:0 27px;
  }

  .top-right>p a:nth-child(2)::before{
    left: -11px;
  }
  .top-right>p a:nth-child(2)::after{
  right: -16px;
  }
  .top-right>p a:nth-child(3){
      font-size: 10px;
  }
    .top-right li:nth-of-type(1){ width:100%;}
   .top-right li:nth-of-type(1) .date{
  margin-right:10px;
  }
}