.A2Main {
  background-size: 100% 100%;
  position: relative;

  :global {

    .threeBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

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

      &>img {
        pointer-events: none;
        width: 180px;
      }
    }

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

      .swBoxMain {
        width: 100%;
        height: 100%;
        border-radius: 20px 0px 0 20px;
        background-color: rgba(35, 28, 9, 0.65);
        padding-left: 86px;
      }

      .top {
        width: 70px;
        position: absolute;
        left: 10px;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 70px;

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

        .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;
          bottom: 30px;
          left: 0;
          width: 70px;
          height: 70px;
          background-image: url('../../assets/img/main/icon_down.png');
          background-size: 100% 100%;
          // transform: rotate(90deg);
          // left: -16px;
        }

        .openIconAc {
          left: -6px;
          transform: rotate(180deg);
        }

      }
    }

    .swBox1 {
      width: 100%;
      .swBoxMain{
        border-radius: 0;
      }
    }
  }
}