body {}

.bgpic {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.bgcolor1 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.1);
}

.bgcolor2 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.2);
}

.bgcolor3 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.3);
}

.bgcolor4 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.4);
}

.bgcolor5 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.5);
}

.bgcolor6 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.6);
}

.bgcolor7 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.7);
}

.bgcolor8 {
  transition: all .3s;
  background: rgba(20, 20, 20, 0.8);
}

.row-a1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.row-a1 .left {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.row-a1 .left ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.row-a1 .left ul li a {
  color: #fff;
}

.row-a1 .left ul li {
  margin-bottom: 20px;
}

.row-a1 .left ul li.on a {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.awards {
  position: relative;
}

.awards .menus_aa {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  height: 160px;
}

.awards .menus_aa .logo {
  display: block;
  width: 160px;
}

.awards .menus_aa .menus_li {
  width: 589px;
  position: relative;
}

.awards .menus_aa .menus_li>ul {
  padding-top: 17px;
  display: flex;
  height: 100%;
  justify-content: space-between;
}

.awards .menus_aa .menus_li>ul li {
  height: 100%;
}

.awards .menus_aa .menus_li>ul li a {
  color: #fff;
  font-size: 14px;
}

.awards .menus_aa .menus_li>ul li .selct {
  color: #fff;
  font-weight: 700;
}

.awards .menus_aa .menus_li>ul li:last-child {
  display: flex;
}

.awards .menus_aa .menus_li>ul li:last-child .on a {
  color: #fff;
}

.head_box_cc {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.head_box_cc .swiper_fl {
  position: relative;
  height: 100%;
  width:700px;
  min-width: 700px;
  margin-right: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}


.head_box_cc .swiper_fr {
  color: #fff;
}

.head_box_cc .swiper_fr ul li {
  margin-bottom: 9px;
  font-size: 14px;
}

.product {
  padding-top: 100px;
}

.product ul li {
  /* width: 800px;
  min-width: 800px; */
  margin-bottom: 60px;
  overflow: hidden;
  position: relative;
}

.product ul li:hover .introduce {
  bottom: 0px;
}

.product ul li .introduce {
  position: absolute;
  bottom: -100px;
  transition: all 1s;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 7px 20px 0;
  line-height: 26px;
  font-size: 15px;
}

@media screen and (max-width: 768px) {
  .head_box_cc .swiper_fl{
    min-width: auto;
  }
  .bgcolor1 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor2 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor3 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor4 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor5 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor6 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor7 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
  
  .bgcolor8 {
    transition: all .3s;
    background: rgba(20, 20, 20, 0.8);
  }
}