@import "./swiper.min.css";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.15rem;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

a {
  text-decoration: none;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

.pos_abs {
  position: absolute;
}

.bg-container {
  width: 100vw;
  height: 100vh;

  .bg-wrapper {
    transition-delay: 0.3s;

    .bg-slide {
      background: url("./../images/bg.jpg") no-repeat center top;
      background-size: 100% auto;
      position: relative;

      .item_bg {
        position: relative;
        width: 10.85rem;
        height: 4.86rem;
        background: url("./../images/item_bg.png") no-repeat center top;
        background-size: 100% 100%;

        .phone-box {
          width: 2.53rem;
          height: 4.45rem;
          position: absolute;

          left: 0.1rem;
          top: 0.13rem;
          a {
            width: 100%;
            height: 100%;
            display: block;
          }

          video {
            position: absolute;
            width: 3.39rem;
            height: 6.03rem;
            left: 0.16rem;
            top: 00.16rem;
            background: #000;
          }

          img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
        }

        .conts {
          width: 7.3rem;
          height: 3rem;
          position: absolute;
          left: 3.3rem;
          top: 0.3rem;

          .time {
            display: flex;
            align-items: center;
            color: #fff;
            span {
              font-size: 0.2rem;
            }
            img {
              width: 0.3rem;
              margin-right: 0.1rem;
            }
          }

          strong.title {
            color: #fff;
            display: block;
            text-align: center;
            font-size: 0.22rem;
            margin-top: 0.5rem;
            margin-bottom: 0.1rem;
            border-bottom: 1px solid #fff;
            padding-bottom: 0.3rem;
            margin-bottom: 0.3rem;
          }

          p {
            font-size: 0.18rem;
            color: #fff;
            line-height: 2em;
          }
        }

        .tit_kly {
          width: 2.16rem;
          position: absolute;
          left: 4rem;
          top: -0.2rem;
        }

        & .item_bg {
          transform: translateX(-200px);
          opacity: 0;
          transition: all 0.4s;
        }

        &.ani-slide .item_bg {
          transform: translateX(0);
          opacity: 1;
        }
      }
    }
  }
}

.change-box {
  width: 12rem;
  height: 5rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 3.91rem;

  .change {
    width: 10.85rem;
    height: 4.85rem;
    overflow: hidden;
    margin: 0 auto;

    .change-slide {
      font-size: 18px;
      background: none;
      display: flex;
      justify-content: center;
      align-items: top;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .swiper-button-next {
    right: -50px;
    background: url("./../images/right.png");
  }

  .swiper-button-prev {
    background: url("./../images/left.png");
    left: -50px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 0.7rem;
    height: 0.7rem;
    background-size: 100% 100%;

    &::after {
      content: "";
    }
  }
}