video {
  width: 100%;
  display: block;
}

.content .main {
  background: #f6f6f6;
}

.banner-warp {
  text-align: center;
}

.content .nav {
  /* padding: 0 25em; */
  text-align: center;
}

.content .nav:after {
  content: "";
  display: block;
  clear: both;
}

.content .nav li {
  /* margin-top: 1.6em; */
  display: inline-block;
  /* width: 33.33%; */
  text-align: center;
  font-size: 24px;
  padding: 2em 2em;
  /* margin-bottom: 2em; */
  position: relative;
  cursor: pointer;
  font-weight: 100;
}

.content .nav a li {
  color: #000;
}


/* .content .nav a li:hover {
  color: #f00;
} */

.content .nav li.on {
  font-weight: initial;
  /* display: block; */
}

.content .nav li.on:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 0;
  width: 100%;
  background: #f00;
}

.content video {
  height: 4.4em;
  object-fit: cover;
}

.content .banner {
  position: relative;
  margin-bottom: 0.25em;
}

.content .tit {
  font-size: 32px;
  font-weight: 100;
  position: absolute;
  padding: 1em;
  color: #fff;
  bottom: 0;
  z-index: 100;
}

.gradient .item {
  height: 1.568em;
}

/* .play_button {
  position: absolute;
  font-size: 0.36em;
  z-index: 102;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  text-align: center;
  color: #fff;
  cursor: pointer;
} */

.play_button {
  position: absolute;
  font-size: 0.36em;
  z-index: 102;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  text-align: center;
  color: #fff;
  cursor: pointer;
  width: 1.8em;
  height: 1.8em;
  text-align: center;
  line-height: 1.8em;
  background: rgba(0,0,0,.3);
  border-radius: 50%;
  padding-left: 0.25em;
  box-sizing: border-box;
}

.iconbofang:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border: .5em solid #fff;
  border-top-width: .4em;
  border-bottom-width: .4em;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  margin-top: -0.4em;
  margin-left: -0.16em;
}

.main .video-list li {
  width: 3.24em;
  float: left;
  position: relative;
  margin-right: 0.132em;
  margin-bottom: 0.132em;
  vertical-align: top;
  background: #fff;
}

.main .video-list li:nth-child(3n) {
  margin-right: 0px;
}

.main .video-list video {
  height: 100%;
}

.main .video-list li .text {
  font-size: 14px;
  padding: 1em 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color, background 0.5s;
}

.main .video-list .v-warp {
  position: relative;
  height: 5.77em;
  overflow: hidden;
}

.main .video-list .v-warp:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 100;
  transition: background 0.5s;
}

.main .video-list li:hover .text {
  color: #fff;
  background: #ff001a;
}

.main .video-list li:hover .v-warp:before {
  background: rgba(0, 0, 0, 0);
}

.video-list .play_button {
  font-size: 0.6em;
}

.video-list:after {
  content: '';
  display: block;
  clear: both;
}

.pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  display: none;
}

.pop .video_warp {
  position: relative;
  top: 50%;
  width: 80%;
  height: 80%;
  margin: auto;
  transform: translateY(-50%);
  background: #000;
}

.pop .video_warp video {
  height: 100%;
  width: 100%;
}

.pop .close {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  right: 0;
  transform: translate(0, -100%);
  background: #c00;
  text-align: center;
  color: #fff;
  cursor: pointer;
  transition: all .3s;
}

.pop .close:hover {
  background: #f00;
}

.phonetit {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .main .video-list li {
    width: 4.93em;
  }

  .main .video-list li:nth-child(3n) {
    margin-right: 0.132em;
  }

  .main .video-list li:nth-child(2n) {
    margin-right: 0px;
  }

  .content .tit {
    font-size: 20px;
    display: none;
  }

  .gradient {
    display: none;
  }

  .phonetit {
    display: block !important;
    position: initial !important;
    position: initial !important;
    background: #fff;
    color: #000 !important;
    text-align: left;
    font-size: 14px;
    padding: 1em 2em !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color, background 0.5s;
    font-weight: normal !important;
  }

  .video-warp .play_button {
    top: 100px;
    margin-top: -15px;
  }

  .content .banner {
    margin-bottom: 0.132em;
  }
}

@media only screen and (max-width: 768px) {
  .banner {
    background: #000000;
  }

  .content video.on {
    object-fit: contain;
  }

  .banner video.on {
    object-fit: contain;
  }

  .banner video {
    height: 6em;
  }

  .play_button {
    font-size: 0.6em;
  }

  .content .nav {
    padding: 0;
  }

  .content .nav li {
    padding: 1em 1em;
    box-sizing: border-box;
    line-height: 1.2em;
    text-align: center;
    height: auto;
    font-size: 14px;
    /* display: block; */
  }

  .main .video-list li {
    width: 100%;
    margin-right: 0;
  }

  .main .video-list li:nth-child(3n) {
    margin-right: 0;
  }

  .main .video-list li:nth-child(2n) {
    margin-right: 0;
  }

  .content .tit {
    font-size: 14px;
  }
}