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

.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: url('./images/sea/bg.jpg') no-repeat center / cover;

  &-title {
    width: utils.vh-calc(1093);
    height: utils.vh-calc(228);
  }
  &-sub-title {
    margin: utils.vh-calc(46) 0 utils.vh-calc(62);
    width: utils.vh-calc(1377);
    height: utils.vh-calc(72);
  }
  &-en-title {
    width: utils.vh-calc(408);
    height: utils.vh-calc(35);
  }
  &-en-sub-title {
    margin: utils.vh-calc(19) 0 utils.vh-calc(62);
    width: utils.vh-calc(668);
    height: utils.vh-calc(79);
  }
  &-date {
    width: utils.vh-calc(964);
    height: utils.vh-calc(39);
  }
  &-btn {
    margin: utils.vh-calc(86) 0 utils.vh-calc(24);
    width: utils.vh-calc(310);
    height: utils.vh-calc(56);
    cursor: pointer;
  }
  &-logo {
    width: utils.vh-calc(120);
    height: utils.vh-calc(54);
  }
}

.mb-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: url('./images/sea/mobile/bg.jpg') no-repeat center bottom / cover;

  &-title {
    width: utils.vh-calc(238);
    height: utils.vh-calc(851);
  }
  &-sub-title {
    margin: utils.vh-calc(37) 0 utils.vh-calc(57);
    width: utils.vh-calc(485);
    height: utils.vh-calc(467);
  }
  &-btn {
    margin: 0 0 utils.vh-calc(70);
    width: utils.vh-calc(310);
    height: utils.vh-calc(56);
    cursor: pointer;
  }
  &-logo {
    width: utils.vh-calc(120);
    height: utils.vh-calc(54);
  }
}
