@mixin textColor($color1, $color2) {
  background-image: linear-gradient(to top, $color1 0%, $color2 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bigScrenn {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  background: url('~@/assets/images/home_bg.png') no-repeat center center;
  background-size: 100% 100%;
  color: #fff;

  // 头部
  .homeHead,.homeHeadsmall {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: url('~@/assets/images/home_head.png') no-repeat center center;
    background-size: 100% 100%;

    .left_Head {
      position: absolute;
      left: 1vw;
      top: 1.5vh;
      transform: rotate(3deg);
      font-family: "DigifaceWide";
    }

    .center_head {
      position: absolute;
      top: 2vw;
      left: 50%;
      transform: translateX(-56%);
      font-size: 4vw;
      font-family: "YSBTH";
      letter-spacing: 0.104vw;
      font-weight: 400;
      white-space: nowrap;

      span {
        background-image: linear-gradient(to top, #165493 10%, #ffffff 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      &::before {
        content: attr(text);
        position: absolute;
        z-index: -2;
      }
    }

    .right_head {
      position: absolute;
      right: 1.875vw;
      top: 0.848vw;
      transform: rotate(-3deg);

      .setting {
        position: absolute;
        top: -10px;
        left: -78px;
        width: 1.8vw;
        height: 1.8vw;
      }
    }
  }
  .homeHeadsmall{
    // background: url('~@/assets/images/home_head_small.png') no-repeat center center;
    height: 6.771vw;
    .center_head{
      position: absolute;
      top: 0.5vw;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2.5vw;
      font-family: "YSBTH";
      letter-spacing: 0.104vw;
      font-weight: 400;
      white-space: nowrap;
    }
  }

  // 侧边
  .asidemodel {
    position: absolute;
    top: 4.688vw;
    width: 22.396vw;
    height: calc(100vh - 13.75vw);
    transform: perspective(6.25vw) rotateY(2deg);

    .asideHead {
      position: relative;
      height: 2.083vw;
      line-height: 2.083vw;
      margin-bottom: 1.042vw;
      padding-left: 0.729vw;
      padding-right: 0.729vw;
      box-sizing: border-box;

      span {
        font-size: 1.458vw;
        @include textColor(#499FF2, #ffffff);
        font-family: "HANYILINGXINTIJIAN";
      }

      &::after {
        position: absolute;
        content: '';
        width: 8.594vw;
        height: 1.146vw;
        left: 0.104vw;
        top: 1.823vw;
        background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
        background-size: 100%;
      }
    }

    .asideHeadR {
      position: relative;

      &::after {
        position: absolute;
        content: '';
        width: 8.594vw;
        height: 1.146vw;
        left: 13.333vw;
        top: 1.823vw;
        background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
        background-size: 100%;
        transform: rotate(180deg);
      }
    }

    .modelBox {
      height: calc(100% - 3.125vw);
    }

    .asideItem {
      flex: 1 0 0;
      // margin: 0px 0.052vw;
      margin: 0 0.052vw 1.5vh;
      overflow: hidden;
      // margin-bottom: 0.26vw;
      background: url('~@/assets/images/bg_04.png') no-repeat left bottom;
      background-size: 100%;
    }
  }

  .asidemodelR {
    transform: perspective(6.25vw) rotateY(-2deg);
  }

  // 展开-关闭按钮
  .showNeun {
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    width: 4.313vw;
    height: 22.802vw;
    background: url('~@/assets/images/home_left.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .showNeunR {
    background: url('~@/assets/images/home_right.png') no-repeat center center;
    background-size: 100% 100%;
  }

}