.banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  overflow: hidden; }
  @media (max-width: 750px) {
    .banner {
      height: auto; } }

.banner .box {
  display: flex;
  width: 400%;
  height: 100%;
  transition: all 1.2s ease;
  transform: translateX(0%);
  /*m*/ }
  @media (max-width: 750px) {
    .banner .box {
      width: 100%;
      height: auto;
      flex-wrap: wrap; } }

.banner .box .item {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  .banner .box .item:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    content: ''; }
  .banner .box .item .desc {
    position: relative;
    bottom: 90px;
    z-index: 2;
    text-align: center; }
    .banner .box .item .desc a {
      display: inline-block;
      padding: 10px 25px;
      border: 1px solid #fefefe;
      color: #fefefe;
      font-size: 14px;
      font-weight: bold;
      margin-top: 30px;
      letter-spacing: 2px; }
    .banner .box .item .desc .icon_Right {
      margin-left: 10px; }
      .banner .box .item .desc .icon_Right:before {
        color: #fefefe; }
    .banner .box .item .desc img {
      transition: opacity 1s;
      -webkit-transition: opacity 1s;
      opacity: 1; }
      .banner .box .item .desc img.active {
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        opacity: 1; }
      .banner .box .item .desc img.hide {
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        opacity: 0; }
  @media (max-width: 750px) {
    .banner .box .item {
      height: 330px;
      background-size: 750px; }
      .banner .box .item .desc {
        bottom: auto; }
        .banner .box .item .desc img {
          width: 180px; }
        .banner .box .item .desc a {
          font-size: 12px;
          margin-top: 20px;
          padding: 8px 20px; } }

.banner .banner_tab {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 5;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: rgba(254, 254, 254, 0.9);
  /*filter: blur(20px) brightness(50%);*/
  /*m*/ }
  .banner .banner_tab li {
    transition: background .5s;
    -webkit-transition: background .5s;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.3;
    display: flex;
    align-items: center;
    padding: 0 5%; }
    .banner .banner_tab li:before {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -8px;
      display: inline-block;
      width: 1px;
      height: 16px;
      background-color: #d3d3d3;
      line-height: 0;
      font-size: 0;
      opacity: 1;
      filter: none;
      content: ''; }
    .banner .banner_tab li:hover {
      transition: filter,opacity 1s;
      -webkit-transition: filter,opacity .5s;
      filter: grayscale(0);
      opacity: 1; }
    .banner .banner_tab li.active {
      transition: filter,opacity 1s;
      -webkit-transition: filter,opacity .5s;
      filter: grayscale(0);
      opacity: 1; }
    .banner .banner_tab li:last-child:before {
      display: none; }
  @media (max-width: 950px) {
    .banner .banner_tab li img {
      width: 90%; } }
  @media (max-width: 420px) {
    .banner .banner_tab {
      display: none; } }

/*# sourceMappingURL=buyChannel.css.map */