@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;

      .down {
        position: absolute;
        width: 1.5rem;
        left: 50%;
        transform: translate(-50%);
        bottom: 0.2rem;
        animation: updown 1s linear infinite;
      }

      @keyframes updown {
        0% {
          bottom: 0.2rem;
        }

        50% {
          bottom: 0.1rem;
        }

        100% {
          bottom: 0.2rem;
        }
      }

      .item-box {
        left: 5.61rem;
        top: 2.2rem;
        position: absolute;
      }

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

        .phone-box {
          width: 3.72rem;
          height: 6.34rem;
          position: absolute;
          left: 0;
          top: 0;

          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: 6.5rem;
          height: 3rem;
          position: absolute;
          left: 4.42rem;
          top: 0.8rem;

          .intro {
            line-height: 2em;
            color: #1272df;
            font-size: 0.2rem;
          }

          &.change-conts {
            top: 0.5rem;

            strong {
              color: #333;
              display: block;
              font-size: 0.18rem;
              margin-top: 0.2rem;
              margin-bottom: 0.1rem;
            }

            p {
              font-size: 0.16rem;
              color: #999;
              line-height: 1.6em;
            }
            .extra {
              margin-top: 0.2rem;
              li {
                display: flex;
                align-items: center;
                color: #388eee;
                margin-bottom: 0.2rem;
                span {
                  font-size: 0.2rem;
                }
                img {
                  width: 0.45rem;
                  margin-right: 0.1rem;
                }
              }
            }
          }
        }

        .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: 12.3rem;
  height: 7rem;
  position: absolute;
  left: 5.61rem;
  top: 2.2rem;

  .change {
    width: 11.37rem;
    height: 6.43rem;
    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: "";
    }
  }
}