/*初始化样式*/
input{padding:0;margin:0;font-family:'Microsoft YaHei';}
img{border:none;background:none;vertical-align:middle}
ul,ol,li{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0}
table, th, td {vertical-align: middle}
.clearfix:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
.clearfix{zoom:1}
.clearboth{height:0px;line-height:0px;overflow:hidden;clear:both;font-size:0px;}

h1,h2{font-size:12px;font-weight:bold;}
hr {border: 0;border-top:1px solid #ccc;height:0;}
p{margin: 0;}

/*----- Common css ------*/
.fl{float:left;}
.fr{float:right;}
.di{_display:inline;}
.fwn{font-weight:normal;}
.dib{*display:inline;_zoom:1;_display:inline;_font-size:0px;}

.com-img{ display:block; overflow:hidden;}
.com-img img{ transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
.com-img:hover img{transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);-ms-transform:scale(1.2);}

.xypg-right-content{font-size: 16px;}

.j-space-between{justify-content:space-between}
.j-flex-start{justify-content:flex-start}
.j-flex-end{justify-content:flex-end}
.j-center{justify-content:center}
.a-j-center{align-items:center;justify-content:center}
.a-center{align-items:center}
.a-flex-start{align-items:flex-start}
.a-flex-end{align-items:flex-end}

.flexf {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

/*主体样式*/
.yblist li+li {
    /*border-left: 1px solid #fff;*/
  }
  
  .yblist li {
    width: 25%;
    position: relative;
    overflow: hidden;
    transition: all .4s;
  }
  .zhezhao {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    background-color: rgb(21, 21, 21, 0.3)  
  }
  .yblist li .img img {
    display: block;
  }
  
  .yblist li.active {
    width: 50%;
  }
  .yblist li.active .zhezhao {
   display: none;
  }
  
  .yblist li.sm {
    width: 16.6%;
  }
  
  .yblist li .faa {
    width: 92%;
    position: absolute;
    left: 4%;
    bottom: 2.5rem;
    text-align: center;
  }
  
  .yblist li .wz {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
  }
  
  .yblist li .fbb {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 2vw;
    z-index: 99;
  }
  
  .yblist li .fbb .wz {
    color: #b6adad;
    font-size: 4rem;
  }
  
  .yblist li .fbb .wz2 {
    color: #fff;
    font-size: 1.2rem;
  }
  
  .yblist li .xiaotu {
    width: 100%;
    margin-top: 4vw;
  }
  
  .yblist li .xiaotu .ff1 {
    width: 31%;
    position: relative;
    text-align: center;
  }
  
  .yblist li .xiaotu .ff1 .img2 img {
    width: 100%;
    display: block;
  }
  
  .yblist li .xiaotu .ff1 .wz3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 16px;
    width: 100%;
    left: 0;
    bottom: 0.75rem;
    position: absolute;
  }
  
  .yblist li .mos {}
  
  .yblist li .mos .aa {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    color: #9c6606;
    font-size: 14px;
    border: 1px solid rgb(206, 156, 68);
    background-color: rgb(255, 255, 255);
    width: 8.7rem;
    height: 2.4rem;
    border-radius: 25px;
  }
  
  .yblist li .mos .aa img {
    margin-right: 11px;
  }
  
  .yblist li .mos .aa img {
    display: block;
  }
  
  .yblist li .mos .aa img:nth-child(2) {
    display: none;
  }
  
  .yblist li .mos:hover .aa img {
    display: none;
  }
  
  .yblist li .mos:hover .aa img:nth-child(2) {
    display: block;
  }
  
  .yblist li .mos:hover .aa {
    color: #fff;
    background: #ddbe8a;
    border-color: #ddbe8a;
  }
  
  .yblist li:hover .faa {
    opacity: 0;
  }
  
  .yblist li:hover .fbb {
    opacity: 1;
  }
  
  
  
  @media (max-width:1440px) {
  
    .yblist li .wz {
      font-size: 30px;
    }
  
    .yblist li .jia {
      width: 60px;
      margin: 0 auto;
    }
  
    .yblist li .jia img {
      width: 100%;
      display: block;
    }
  
    .yblist li .fbb .wz {
      font-size: 30px;
    }
  
    .yblist li .fbb .wz2 {
      font-size: 15px;
    }
  
    .yblist li .xiaotu .ff1 .wz3 {
      font-size: 15px;
    }
  }
  
  @media (max-width:1280px) {
  
    .yblist li .wz {
      font-size: 24px;
    }
  
    .yblist li .jia {
      width: 54px;
      margin: 0 auto;
    }
  
    .yblist li .fbb .wz {
      font-size: 24px;
    }
  
  
  }
  
  
  
  
  @media (max-width: 768px) {
  
    .yblist li {
      width: 100%;
    }
  
    .yblist li.sm {
      width: 100%;
    }
  
    .yblist li.active {
      width: 100%;
    }
  
    .yblist li+li {
      border: none;
      margin-top: 15px;
    }
  
    .yblist li .faa {
      opacity: 0 !important;
    }
  
    .yblist li .fbb {
      opacity: 1 !important;
    }
  
    .yblist li .img img {
      width: 100%;
      display: block;
    }
    .yblist li .wz {
      margin-bottom: 0;
    }
  
  }
  
  
  @media (max-width:640px) {
  
    .yblist li .fbb .wz {
      font-size: 40px;
      /* margin-bottom: 12px; */
      color: white;    
    }
  
    .yblist li .fbb .wz2 {
      margin: 10px 0;
    }
  
    .yblist li .xiaotu .ff1 .wz3 {
      font-size: 14px;
    }
  
    .yblist li .mos .aa {
      height: 42px;
    }
    .yblist li .fbb .wz2 {
      font-size: 20px;
      margin: 0 0 ;
    }
  
  }