*{margin:0;padding:0;list-style: none;text-decoration: none;}
.fl{float:left;}
.fr{float:right;}
.cf:after{content:'';display: table;clear: both;}
img{vertical-align: middle;border:none;}
.h300{height: 100px;}
.bg{width:100%;height: 100%;background: url('./bg.jpg') no-repeat;background-size:100%;padding-bottom:7px;}
.botimg{width: 100%;}
.botimg img{width: 100%;}
.bt{width: 864px;margin:auto;height: 270px;
background: url('./bt.png') no-repeat;
}
.qy{padding:20px;background: rgba(0,0,0,0.3);width:960px;
    margin:auto;border-radius: 20px;
}
.qy span{font-size:16px;line-height: 30px;color:#fff;}

.top-banner-wrapper{position: relative;width:1000px;margin:30px auto;}

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-container {
    width: 100%;
    height:500px;
 }
 .slide-img {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
  }
  
  .slide-img .text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 50px;
    color: #ffffff;
    text-indent: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 600;
  }
  .slide-img .text:hover {
    text-decoration: underline;
  }
  
  .slide-img.shadow {
    position: relative;
  }
  
  .slide-img.shadow:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 70%;
    bottom: 0;
    background: -webkit-linear-gradient(top, transparent, #000);
    opacity: 0.4;
    z-index: 9;
  }
  
  
  .top-banner-wrapper .banner-button-prev {
    width: 40px;
    height: 40px;
    background-color: rgba(245, 40, 30, 0.8);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    position: absolute;
    left: 95px;
    top: 50%;
    z-index: 99999;
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
  }
  .top-banner-wrapper .banner-button-next {
    width: 40px;
    height: 40px;
    background-color: rgba(245, 40, 30, 0.8);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    position: absolute;
    right: 95px;
    top: 50%;
    z-index: 99999;
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
  }
.piclist{width: 980px;margin:auto;padding:10px;background: #8fa1ae;}
.piclist li{width:31.2%;margin:10px;float:left;}
.piclist li .pic img{width:100%;}
.piclist li .pic{position:relative;text-align: center;height:170px;}
.piclist li .pic span{display: block;width:93%;position: absolute;font-size:14px;color:#fff;bottom: 10px;overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;padding:0 10px;}
.piclist li .title{font-size:16px;color:#333;background: #fff;padding:0 5px;height:35px;line-height: 35px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.more{width: 960px;margin:10px auto;text-align: right;}
.more a{padding:5px 10px;border-radius: 5px;font-size: 16px;color:#333;
    background: #fff;
}

.textlist{width:980px;margin:20px auto;padding:10px;background: #8fa1ae;}
.textlist li{width:48%;float:left;padding:5px 0;border-bottom: 1px solid #fff;margin:10px 1%;}
.textlist li a{display: block;font-size:16px;color:#fff;overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}


@media screen and (max-width: 680px){
    .h300{height:50px;}
    .bt{width:95%;background-size:100%;height:150px;}
    .qy{width:85%;}
    .top-banner-wrapper{width: 100%;}
    .swiper-container{height:300px;}
    .piclist{width:100%;padding:10px 0;}
    .piclist li{width: 90%;margin:10px auto;float:none;}
    .textlist{width:100%;}
    .more{width:90%;margin:auto;}
    .textlist{margin:0 auto;}
    .textlist li{width:94%;margin:10px 0;}
}