YPZZBWG/pc/src/pages/A2Main/index.module.scss

.A2Main {
  background-image: url('../../assets/img/tempBg.jpg');
  background-size: 100% 100%;
  position: relative;

  :global {
    .logo {
      cursor: pointer;
      position: absolute;
      z-index: 10;
      top: 20px;
      left: 20px;

      &>img {
        width: 180px;
      }
    }

    .swBox {
      transition: all .3s;
      position: absolute;
      z-index: 11;
      width: 100%;
      height: 100px;
      left: 0;
      bottom: 0;
      backdrop-filter: blur(4px);

      .swBoxMain {
        width: 100%;
        height: 100%;
        border-radius: 50px 50px 0 0;

        background-color: rgba(6, 10, 11, 0.80);

      }

      .top {
        height: 100px;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        padding-right: 40px;

        .row {
          width: 70px;
          height: 70px;
          cursor: pointer;
          background-size: 100% 100%;
          transition: all .2s;
          margin: 0 60px;
        }

        .row1 {
          background-image: url('../../assets/img/main/1.png');

          &:hover {
            background-image: url('../../assets/img/main/1Ac.png');
          }
        }

        .rowAc1 {
          background-image: url('../../assets/img/main/1Ac.png');
        }

        .row2 {
          background-image: url('../../assets/img/main/2.png');

          &:hover {
            background-image: url('../../assets/img/main/2Ac.png');
          }
        }

        .rowAc2 {
          background-image: url('../../assets/img/main/2Ac.png');
        }

        .row3 {
          background-image: url('../../assets/img/main/3.png');

          &:hover {
            background-image: url('../../assets/img/main/3Ac.png');
          }
        }

        .rowAc3 {
          background-image: url('../../assets/img/main/3Ac.png');
        }

        .row4 {
          background-image: url('../../assets/img/main/4.png');

          &:hover {
            background-image: url('../../assets/img/main/4Ac.png');
          }
        }

        .rowAc4 {
          background-image: url('../../assets/img/main/4Ac.png');
        }

        .row5 {
          background-image: url('../../assets/img/main/5.png');

          &:hover {
            background-image: url('../../assets/img/main/5Ac.png');
          }
        }

        .rowAc5 {
          background-image: url('../../assets/img/main/5Ac.png');
        }

        .openIcon {
          cursor: pointer;
          transition: all .3s;
          position: absolute;
          top: 15px;
          right: 38px;
          width: 70px;
          height: 70px;
          background-image: url('../../assets/img/main/icon_down.png');
          background-size: 100% 100%;
        }

        .openIconAc {
          transform: rotate(180deg);
        }

      }
    }

    .swBox1 {
      height: 270px;
    }

    .swBox2 {
      height: 100%;
      padding-top: 30px;
    }
  }
}