@use '@/assets/utils.scss';

.cover {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: url('./images/bg.jpg') no-repeat center / cover;

  &__img {
    position: absolute;
    top: 0;
    left: 0;
    width: utils.vh-calc(676);
    height: utils.vh-calc(920);
  }
  &__title {
    position: absolute;
    top: utils.vh-calc(34);
    right: utils.vw-calc(75);
    width: utils.vw-calc(448);
    height: utils.vw-calc(804);
  }
  &__guide {
    position: absolute;
    left: utils.vw-calc(609);
    bottom: utils.vh-calc(83);
    width: utils.vw-calc(510);
    height: utils.vw-calc(438);
    z-index: 1;
  }
  &__btn {
    position: absolute;
    right: utils.vw-calc(221);
    bottom: utils.vh-calc(97);
    width: utils.vw-calc(321);
    height: utils.vw-calc(71);
    cursor: pointer;
    z-index: 2;
  }
}

.mb-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: url('./images/mobile/bg.jpg') no-repeat center / cover;

  &__img {
    position: absolute;
    top: 0;
    left: 0;
    width: utils.vh-calc(470);
    height: utils.vh-calc(882);
  }
  &__title {
    position: absolute;
    top: utils.vh-calc(163);
    right: utils.vh-calc(58);
    width: utils.vh-calc(447);
    height: utils.vh-calc(805);
  }
  &__guide {
    position: absolute;
    left: utils.vh-calc(33);
    bottom: utils.vh-calc(52);
    width: utils.vh-calc(510);
    height: utils.vh-calc(438);
    z-index: 1;
  }
  &__btn {
    position: absolute;
    left: utils.vh-calc(33);
    bottom: utils.vh-calc(532);
    width: utils.vh-calc(321);
    height: utils.vh-calc(71);
    cursor: pointer;
    z-index: 2;
  }
}
