* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  src: url(../fonts/BadComic.woff2);
  font-family: "BadComic";
}

@font-face {
  src: url(../fonts/Furore.woff2);
  font-family: "Furore";
}

@font-face {
  src: url(../fonts/Montserrat.woff2);
  font-family: "Montserrat";
}

@font-face {
  src: url(../fonts/Play.woff2);
  font-family: "Play";
}

@font-face {
  src: url(../fonts/Manga.woff2.woff2);
  font-family: "Manga";
}

/* общие */
.flipster--flat .flipster__item--future,
.flipster--flat .flipster__item--past {
  opacity: 1 !important;
}

body {
  background: #000000;
  overflow-x: hidden;
}

main {
  background: none !important;
}

.img_width {
  width: 100%;
}

.home_wrap {
  max-width: 1920px;
  margin: 0 auto;
}

.section_wrap {
  max-width: 1760px;
  margin: auto;
}

.card_back_share {
  z-index: 143 !important;
  width: max-content !important;
  max-width: 58vw !important;
  position: absolute !important;
  top: 0% !important;
  left: calc(-13vw - 1rem) !important;
}

.card_back_z {
  z-index: 102 !important;
}

.hub_bg_top {
  background: no-repeat url("./img/background_hub/hub_bg_top.svg");
  background-size: cover;
}

.hub_bg_center {
  background: no-repeat url("./img/background_hub/hub_bg_center.svg");
  background-size: cover;
}

/*----------------------------------------------------- HUB header ---------------------------------------*/

.header_hub_group_btn {
  display: flex;
}

.btn_hub_name {
  margin-right: 20px;
}

.btn_exit {
  padding: 16px 90px !important;
  font-size: 22px;
  cursor: pointer;
  background: none !important;
  font-family: "Play";
  color: #dcdcf0;
  border-radius: 5px;
  border: 1.5px solid #f000fa;
  box-shadow: 0px 0px 10px 0px #f000fa, 0px 0px 5px 0px #0019f0;
}

.btn_exit:hover {
  box-shadow: 0px 0px 10px 5px #f000fa, 0px 0px 5px 0px #0019f0;
}

/*---------------------------------------------------- ita dialog ----------------------------------------*/

.hub_btn_start_quest {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*---------------------------------------------------- Модальное окно для карты прогресса ----------------------------------------*/

.modal_hub {
  max-width: 790px;
  padding: 0 10px;
  margin: 0 auto;
  border: 1px solid;
  border-radius: 20px;
  /* position: absolute; */
  /* left: 23%;
            bottom: -122px; */
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(292deg, rgba(0, 120, 255, 0.2) 0%, rgba(10, 0, 25, 0) 100%),
    linear-gradient(0deg, #0a0019, #0a0019),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}

#modalHub {
  flex-direction: column;
  display: none;
  position: absolute;
  z-index: 1000;
  top: 20%;
}

.modal_hub_wrap {
  display: flex;
  justify-content: space-between;
}

.modal_close {
  color: #ffffff;
  cursor: pointer;
}

.modal_text {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.modal_icon {
  width: 100%;
}

.text_progress {
  padding-left: 15px;
}

.icon_modal_block {
  width: 20%;
  max-width: 30px;
}

.modal_left_column {
  max-width: 50%;
  padding-bottom: 10px;
  padding-right: 3px;
}

.modal_left_column_double_check {
  display: flex;
  padding-bottom: 10px;
}

.modal_left_column_hourglass {
  display: flex;
  padding-bottom: 10px;
}

.modal_right_column {
  max-width: 50%;
}

.modal_right_column_check {
  display: flex;
  padding-bottom: 10px;
}

.modal_right_column_elipse {
  display: flex;
  padding-bottom: 10px;
}

/* Карточка прогресса */

.card {
  width: 270px;
  height: 340px;
  perspective: 1000px;
  display: inline-block;
  margin: 10px;
}

.card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.card-front {
  background: linear-gradient(90deg, #6b0498 20%, #6b0498 50%, #340ba4);
  border-radius: 16px;
  font-size: 26px;
  font-weight: 700;
  color: white;
  font-style: normal;
  font-family: "Montserrat";
}

.card-back {
  background: linear-gradient(83deg, #770f9f 0%, #463475 100%);
  transform: rotateY(180deg);
  text-align: center;
  border-radius: 16px;
  color: #fff;
  font-family: "Montserrat";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.flip-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.click {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  cursor: pointer;
}

.click-name {
  font-size: 28px !important;
  align-self: center;
  position: relative;
  bottom: 25px;
  left: 1%;
  color: white;
}

.profession {
  text-align: center;
  position: relative;
  top: 10%;
  font-size: 26px;
  font-weight: 700;
  font-family: "Montserrat";
  color: white;
  text-decoration: none;
}

.link_to_profession_hover:hover {
  color: #c800c8;
}

.profession-lock {
  padding: 60% 0 20% 0;
}

.profession-text {
  margin: 20% 20px 2px 7%;
  text-align: left;
  font-size: 14px;
  padding-bottom: 88px;
}

.img_people {
  display: flex;
  left: 14%;
  position: relative;
  top: 6%;
  cursor: pointer;
}

.lock {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

.triangle-down {
  border-left: 63px solid transparent;
  border-right: 63px solid transparent;
  border-top: 60px solid #340ba4;
  border-radius: 12px;
  bottom: -70px;
  left: 27%;
  position: absolute;
}

.circle {
  margin-top: 63%;
  color: #9600ff;
  position: relative;
}

/*.circle-after:after {
    position: absolute;
    top: 50%;
    left: calc(3vw - 3rem);
    content: "";
    height: 2px;
    width: 841%;
    background-image: radial-gradient(rgb(150, 0, 255) 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0px center;
    display: block;
    margin-left: 76%;
}*/

.circle-after:after {
  position: absolute;
  top: 50%;
  left: 2px;
  content: "";
  height: 2px;
  width: 413px;
  background-image: radial-gradient(rgb(150, 0, 255) 40%, transparent 50%);
  background-size: 17px 10px;
  background-repeat: repeat-x;
  background-position: 0px center;
  display: block;
  margin-left: 76%;
}

.circle-after-long:after {
  width: 100vw;
}

.circle-back {
  margin-top: 295px;
}

.circle-before::before {
  position: absolute;
  top: 50%;
  right: 83%;
  content: "";
  height: 2px;
  width: 100vw;
  background-image: radial-gradient(#9600ff 40%, transparent 50%);
  background-size: 17px 10px;
  background-repeat: repeat-x;
  background-position: 0 center;
}

.Progress_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Progress-main {
  display: flex;
  justify-content: center;
  position: relative;
}

.Progress-card-name {
  color: #fff;
  font-family: Furore;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 95px 0;
}

.Progress-block {
  display: flex;
  justify-content: space-around;
  max-width: 1350px;
  width: 100%;
  padding-bottom: 307px;
}

.last-cards {
  display: flex;
  justify-content: space-around;
  max-width: 1350px;
  width: 100%;
}

.progress-circle {
  width: 100% !important;
  display: flex;
  position: absolute;
  justify-content: center;
}

.dashed {
  margin: 20px 0;
  padding: 0;
  height: 0;
  border: none;
  border-top: 2px dashed #ddd;
}

.material-symbols-outlined {
  font-size: 50px !important;
  z-index: 1;
  cursor: pointer;
}

.material-symbols-outlined:hover {
  color: #c800c8;
}

/*------------------------------------------- CLOUd BOTTOM ITA -----------------------------------------------------*/

.hub_ita_final_text {
  color: #fff;
  font-family: "Play";
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  max-width: 850px;
  line-height: normal;
  padding-bottom: 40px;
}

.ita_hub_img {
  padding: 10px 0;
}

.hub_ita_final {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hub_ita_final_btn {
  margin-bottom: 78px;
}

.check_hub {
  color: #fff;
  font-family: "Montserrat";
  font-size: 18px;
  background: linear-gradient(315deg, #023f83 0%, rgba(36, 1, 88, 0.87) 100%),
    #fff;
  padding: 17px 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  max-width: 560px;
  position: absolute;
  left: 47%;
  bottom: 28%;
}

.dialog_ita {
  position: relative;
}

.img_warning {
  padding-right: 29px;
}

.dialog_cloud_star {
  position: relative;
  bottom: 11%;
  left: 35%;
}

.dialog_cloud_star__text {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 45%;
  left: 18%;
  color: #fff;
  font-family: "Manga";
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-decoration: underline;
}

.dialog_cloud_star__link {
  padding-right: 14px;
}
.disabled_link {
  pointer-events: none; /* делаем ссылку некликабельной */
  cursor: not-allowed; /* устанавливаем курсор в виде стрелки */
  color: #999; /* цвет текста для нективной ссылки */
  text-decoration: none;
}

.dialog_cloud_star__link:hover {
  text-decoration: blue;
  cursor: pointer;
  color: black;
}

.second_dialog_hub_top {
  text-align: center;
  max-width: 71%;
  position: absolute;
  left: 18%;
  top: 64px;
}

.second_dialog_hub_bottom {
  text-align: center;
  max-width: 71%;
  position: absolute;
  left: 17%;
  bottom: 17%;
}

.ita_final_dialog {
  margin-top: 18% !important;
}

.dialog_wrap_text_bottom {
  text-align: center !important;
  width: 57% !important;
  position: absolute !important;
  left: 21rem !important;
  bottom: -16rem !important;
}

/* -------------  Media  --------------- */
@media (max-width: 1760px) {
  /* .dialog_wrap {
        margin-top: 0rem!important;
    } */
}

@media (max-width: 1300px) {
  .circle-after:after {
    width: calc(30vw - 1rem);
    left: calc(6vw - 3rem);
  }
}

@media (max-width: 1100px) {
  .second_dialog_hub_top {
    text-align: center;
    max-width: calc(51vw - 1rem);
    position: absolute;
    left: calc(8vw - 1rem);
    top: calc(5vw - 1rem);
  }
}

@media (max-width: 900px) {
  .check_hub {
    font-size: 12px;
    position: relative;
    left: 0;
  }

  .Progress-main {
    z-index: 100;
  }

  .card {
    z-index: 101;
  }

  .ita_hub_img {
    width: calc(49vw - 1rem) !important;
  }

  .dialog_cloud_star {
    position: relative;
    bottom: calc(5vw - 1rem);
    left: calc(5vw - 1rem);
  }

  .second_dialog_hub_top {
    text-align: center;
    max-width: calc(48vw - 1rem);
    position: absolute;
    left: calc(11vw - 1rem);
    top: calc(5vw - 1rem);
    font-size: 17px;
  }

  .second_dialog_hub_bottom {
    text-align: center;
    max-width: calc(34vw - 1rem);
    position: absolute;
    left: calc(15vw - 1rem);
    bottom: calc(7vw - 1rem);
    font-size: 17px;
  }

  .dialog_wrap_hub {
    margin-top: calc(50vw - 1rem) !important;
  }

  .text_top_hub {
    top: calc(8vw - 1rem) !important;
    max-width: calc(56vw - 1rem) !important;
    left: calc(13vw - 1rem) !important;
  }

  .text_bottom_hub {
    top: calc(50vw - 1rem) !important;
    max-width: calc(50vw - 1rem) !important;
    left: calc(13vw - 1rem) !important;
  }

  .ita_hub_img_top {
    position: relative;
    top: calc(-6vw - 1rem) !important;
    left: calc(-23vw - 1rem) !important;
    width: calc(45vw - 1rem) !important;
  }

  .header_wrap {
    padding: 36px 10px !important;
  }

  .header_logo {
    width: 23%;
  }

  .icon_logo_header {
    width: 19px;
    height: 19px;
  }

  .btn_hub_name {
    margin-right: 10px;
  }

  .btn_tg {
    padding: 8px 16px !important;
  }

  .dialog_cloud_hub {
    position: absolute !important;
    width: calc(69vw - 1rem) !important;
    top: calc(-16vw - 1rem) !important;
    left: calc(27vw - 1rem) !important;
    margin: 0 !important;
    font-size: 16px !important;
  }

  .Progress_card_adaptiv {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(90vw - 1rem);
    margin: 0 auto;
  }

  .card {
    margin-bottom: 40%;
  }

  .circle-after:after {
    position: absolute;
    top: calc(5vw - 1rem);
    left: calc(2vw - 1rem);
    content: "";
    height: 2px;
    width: calc(42vw - 1rem);
    background-image: radial-gradient(#9600ff 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0 center;
    display: block;
    margin-left: 76%;
  }

  .circle-before::before {
    position: absolute;
    top: calc(5vw - 1rem);
    right: calc(7vw - 1rem);
    content: "";
    height: 2px;
    width: 830%;
    background-image: radial-gradient(#9600ff 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0 center;
  }
}

@media (max-width: 800px) {
  .Progress-card-name {
    font-size: 40px;
  }
}

@media (max-width: 750px) {
  .second_dialog_hub_bottom {
    text-align: center;
    max-width: calc(43vw - 1rem);
    position: absolute;
    left: calc(16vw - 1rem);
    bottom: calc(5vw - 1rem);
    font-size: 17px;
  }
}

@media (max-width: 700px) {
  .start_quest {
    margin-top: calc(19vw - 1rem);
  }

  .ita_hub_img_top {
    position: relative;
    left: calc(-1vw - 1rem) !important;
    top: calc(5vw - 1rem) !important;
  }

  .dialog_cloud_hub_bottom {
    margin-left: -18%;
    top: -2rem;
    left: calc(14vw - 1rem) !important;
  }

  .text_top_hub {
    top: calc(8vw - 1rem) !important;
    max-width: calc(56vw - 1rem) !important;
    left: calc(13vw - 1rem) !important;
  }

  .text_bottom_hub {
    top: calc(50vw - 1rem) !important;
    max-width: calc(50vw - 1rem) !important;
    left: calc(13vw - 1rem) !important;
  }

  .dialog_cloud {
    width: 100%;
  }

  .ita_hub_img_top {
    position: relative;
    top: 3px;
    left: 0%;
    width: 47% !important;
  }

  .dialog_cloud_hub {
    position: absolute !important;
    width: 76% !important;
    top: -16% !important;
    left: 27% !important;
    margin: 0 !important;
  }

  .bg-top-center {
    padding-top: 10%;
  }

  .wrap_people_text {
    margin: 0 !important;
  }
}

@media (max-width: 650px) {
  .start_quest {
    margin-top: calc(9vw - 1rem);
  }

  .Progress_card_adaptiv {
    max-width: calc(67vw - 1rem);
  }

  .card {
    width: 120px;
    height: 152px;
  }

  .card {
    width: 120px;
    height: 152px;
    margin-bottom: 50%;
  }

  .img_people {
    height: 113px;
    width: 86px;
  }

  .circle-after:after {
    position: absolute;
    top: 50%;
    left: calc(4vw - 1rem);
    content: "";
    height: 2px;
    width: calc(33vw - 1rem);
    background-image: radial-gradient(#9600ff 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0 center;
    display: block;
    margin-left: 76%;
  }

  .Progress_card_adaptiv {
    max-width: calc(73vw - 1rem);
  }

  .Progress-card-name {
    font-size: 18px;
  }

  .profession-text {
    font-size: 11px;
    margin: 4% 20px 2px 7%;
  }

  .Progress-block {
    display: block;
  }

  .last-cards {
    display: block;
  }

  .card {
    width: 120px;
    height: 152px;
  }

  .img_people {
    height: 113px;
    width: 86px;
  }

  .triangle-down {
    width: 27px;
  }

  .profession {
    font-size: 14px;
  }

  .click {
    font-size: 80%;
  }

  .triangle-down {
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 32px solid #340ba4;
    border-radius: 7px;
    bottom: -37px;
    left: 25%;
  }

  .profession-lock {
    padding: 30% 0 30% 0;
  }

  .cloud_hub,
  .hub_ita_final_text {
    font-size: 12px;
  }

  .dialog_cloud_star__link {
    font-size: 10px;
  }

  .check_hub {
    font-size: 12px;
    position: relative;
    left: 0;
  }

  .text_top_hub {
    top: calc(8vw - 1rem) !important;
    max-width: calc(54vw - 1rem) !important;
    font-size: 12px !important;
    left: calc(13vw - 1rem) !important;
  }

  .text_bottom_hub {
    top: calc(50vw - 1rem) !important;
    max-width: calc(50vw - 1rem) !important;
    left: calc(13vw - 1rem) !important;
    font-size: 12px !important;
  }

  .circle {
    font-size: 35px !important;
  }

  .click {
    position: absolute;
    top: calc(5vw - 1rem);
    right: calc(5vw - 1rem);
    color: #fff;
    cursor: pointer;
  }

  .circle-before::before {
    position: absolute;
    top: 50%;
    right: calc(11vw - 1rem);
    content: "";
    height: 2px;
    width: calc(46vw - 1rem);
    background-image: radial-gradient(#9600ff 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0 center;
  }
}

@media (max-width: 600px) {

  .dialog_cloud_star{
    width: 86%;
  }
  .dialog_wrap{
    justify-content: initial;
  }
  .svg_mob{
    width: 9%;
    height: 10%;
  }
  .dialog_cloud_star {
    width: 77%;
  }
  .dialog_wrap_text{
    width: 98%;
  }
  .dialog_cloud_hub_bottom {
    margin-left: -18%;
    top: -2rem;
    left: calc(11vw - 1rem) !important;
    width: 76%;
  }

  .ita_hub_img {
    width: calc(31vw - 1rem) !important;
  }
  .dialog_wrap_mob{
  width: 37%;
}
  .modal_text {
    font-size: 12px;
  }

  close_modal_hub {
    font-size: 12px !important;
  }

  .icon_wait {
    width: calc(7.5vw - 1rem);
  }

  .elipse_icon {
    width: calc(7.3vw - 1rem);
  }

  .card {
    width: 120px;
    height: 152px;
    margin-bottom: 50%;
  }

  .img_people {
    height: 113px;
    width: 86px;
  }

  .circle-after:after {
    position: absolute;
    top: 50%;
    left: calc(4vw - 1rem);
    content: "";
    height: 2px;
    width: calc(33vw - 1rem);
    background-image: radial-gradient(#9600ff 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0 center;
    display: block;
    margin-left: 76%;
  }

  .Progress_card_adaptiv {
    z-index: 1;
    position: relative;
    max-width: calc(73vw - 1rem);
  }

  .Progress-card-name {
    font-size: 18px;
  }

  .profession-text {
    font-size: 10px;
  }

  .Progress-block {
    display: block;
  }

  .last-cards {
    display: block;
  }

  .card {
    width: 120px;
    height: 152px;
  }

  .img_people {
    height: 113px;
    width: 86px;
  }

  .triangle-down {
    width: 27px;
  }

  .profession {
    font-size: 14px;
  }

  .click {
    font-size: 80%;
  }

  .triangle-down {
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 32px solid #340ba4;
    border-radius: 7px;
    bottom: -37px;
    left: 25%;
  }

  .profession-lock {
    padding: 30% 0 30% 0;
  }

  .cloud_hub,
  .hub_ita_final_text {
    font-size: 12px;
  }

  .second_dialog_hub_top {
    text-align: center;
    max-width: calc(48vw - 1rem);
    position: absolute;
    left: calc(16vw - 1rem);
    top: calc(7vw - 1rem);
  }

  .second_dialog_hub_bottom {
    text-align: center;
    max-width: calc(45vw - 1rem);
    position: absolute;
    left: calc(16vw - 1rem);
    bottom: calc(8vw - 1rem);
  }

  .dialog_cloud_star__link {
    font-size: 8px;
  }

  .check_hub {
    font-size: 12px;
    position: relative;
    left: 0;
  }

  .text_top_hub {
    top: calc(8vw - 1rem) !important;
    max-width: calc(54vw - 1rem) !important;
    font-size: 12px !important;
    left: calc(13vw - 1rem) !important;
  }

  .text_bottom_hub {
    top: calc(50vw - 1rem) !important;
    max-width: calc(50vw - 1rem) !important;
    left: calc(13vw - 1rem) !important;
    font-size: 12px !important;
  }

  .circle {
    font-size: 35px !important;
  }

  .click {
    position: absolute;
    top: calc(5vw - 1rem);
    right: calc(5vw - 1rem);
    color: #fff;
    cursor: pointer;
  }

  .circle-before::before {
    position: absolute;
    top: 50%;
    /*
            right: calc(11vw - 1rem);
            */
    content: "";
    height: 2px;
    width: calc(43vw - 1rem);
    background-image: radial-gradient(#9600ff 40%, transparent 50%);
    background-size: 17px 10px;
    background-repeat: repeat-x;
    background-position: 0 center;
  }
}

@media (max-width: 500px) {
  .hab_w{
    
    max-width: 90%!important;
  }
  .text_top_hub {
    top: calc(6vw - 1rem) !important;
    max-width: calc(57vw - 1rem) !important;
    font-size: 11px !important;
    left: calc(13vw - 1rem) !important;
  }

  .text_bottom_hub {
    top: calc(50vw - 1rem) !important;
    max-width: calc(60vw - 1rem) !important;
    left: calc(8vw - 1rem) !important;
    font-size: 11px !important;
  }

  .dialog_wrap_text_bottom {
    width: 100% !important;
  }

  .cloud_hub,
  .hub_ita_final_text {
    font-size: 11px;
  }



  /*
  .dialog_cloud_hub_bottom {
    margin-left: -18%;
    top: -2rem;
    left: calc(14vw - 1rem) !important;
  }
  */

  .second_dialog_hub_top {
    text-align: center;
    max-width: calc(59vw - 1rem);
    position: absolute;
    left: calc(9vw - 1rem);
    top: calc(7vw - 1rem);
  }

  .dialog_cloud_hub_bottom {
    margin-left: -22% !important;
    top: -2rem;
    left: 4%;
  }
}

@media (max-width: 400px) {
  .text_bottom_hub {
    top: calc(49vw - 1rem) !important;
  }

  .dialog_cloud_hub_bottom {
    margin-left: -25% !important;
    top: -2rem;
    left: 4%;
  }

  .second_dialog_hub_top {
    text-align: center;
    max-width: calc(64vw - 1rem);
    position: absolute;
    left: calc(12vw - 1rem);
    top: calc(6vw - 1rem);
  }

  .second_dialog_hub_bottom {
    text-align: center;
    max-width: calc(50vw - 1rem);
    position: absolute;
    left: calc(16vw - 1rem);
    bottom: calc(9vw - 1rem);
  }

  .check_hub {
    padding: 10px 6px;
  }

  .img_warning {
    padding-right: 16px;
    padding-left: 16px;
  }

  .card {
    width: 103px;
    height: 152px;
  }
}