html,
body {
  margin: auto;
  max-width: 1280px;
  font-size: 3.4vw;
  font-size: 56.30631%;
}

html {
  margin: auto;
}

body {
  margin: auto;
  font-family: "Eucerina-TH Light";
  font-size: 1.4rem;
  color: #223341;

}
body * {
  box-sizing: border-box;
}
body img {
  max-width: 100%;
}
.svg-txt{
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
}
.svg-border{
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
}
.dot{
  position: absolute;
  max-width: 1280px;
}


.vdo{
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
}
.hero img {
  width: 100%;
}

.wrapper {
  position: relative;
  margin: auto;
  width: 100%;
  font-size: 3.15vw;
}
.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5 {
  margin-top: 0;
}
.wrapper img {
  width: 100%;
}
.wrapper .container {
  position: relative;
  align-items: start;
  width: 100%;
  width: 96vw;
  max-width: 100%;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 576px) {
  .wrapper .container {
    width: 100%;
  }
}
.wrapper .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.foot-note {
  width: 90%;
  margin: auto;
  font-size: 2vw;
  margin-top: 5.5vw;
  margin-bottom: 10vw;
  color: #323e48;
}

.foot-note .iconic{
  font-size: 1.3vw;
  top: -10px;
}

.tablet {
  display: block !important;
}
.tablet-txt {
  display: block !important;
}
.tablet-border{
  display: block !important;
}

.mobile {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .wrapper .hl_2 .hl_list.sub_1 {
    height: 44vw;
  }

  .wrapper .hl_2 .hl_list.sub_2 {
      height: 44vw;
    }

  .wrapper .hl_2 .hl_list.sub_3 {
    height: 145.1vw;
  }

  .wrapper .hl_2 .hl_list.sub_4 {
    height: 108.7vw;
  }
}
@media screen and (max-width: 576px) {
  .wrapper .hl_1 h2 {
    font-size: 5.8vw;
  }

  .wrapper .line {
    width: 77.8vw;
  }

  .wrapper .hl_1 h2 span {
    font-size: 4.8vw;
  }

  .wrapper .hl_1 .hl_label strong:after {
    height: 1px;
    top: -5px;
  }

  .wrapper .hl_1 .hl_label {
    top: 31vw;
    right: 3vw;
  }

  .wrapper .hl_1 .hl_label label {
    font-size: 9.3vw;
  }

  .wrapper .hl_2 .hl_list.sub_3 {
    height: 144vw;
  }

  .wrapper .hl_2 .hl_list.sub_4 {
    height: 108vw;
  }

  .wrapper .hl_2 .hl_list.sub_1, .wrapper .hl_2 .hl_list.sub_2 {
    height: 43.9vw;
  }

  .wrapper .hl_2 h2 {
    font-size: 5.8vw;
  }

  .wrapper .hl_2 h2 .line {
    width: 67%;
    margin-top: 3px;
  }

  .wrapper .hl_2 .hl_list .sub_content label {
    font-size: 3.8vw;
  }

  .wrapper .hl_2 {
    padding-left: 1vw;
    padding-right: 1vw;
  }

  .wrapper .hl_2 .hl_list.sub_1 {
    background-image: url("images/Mobile-Hya-Poker-Face-Option1_04.jpg");
    height: 51.3vw;
  }

  .wrapper .hl_2 .hl_list.sub_1 .sub_position {
    padding-top: 33.4vw;
  }

  .wrapper .hl_2 .hl_list .sub_content {
    font-size: 3.3vw;
  }

  .wrapper .hl_2 .hl_list.sub_2 {
    background-image: url("images/Mobile-Hya-Poker-Face-Option1_06.jpg");
    height: 50vw;
  }

  .wrapper .hl_2 .hl_list.sub_2 .sub_position {
    padding-top: 33.4vw;
  }

  .wrapper .hl_2 .hl_list.sub_3 {
    background-image: url("images/Mobile-Hya-Poker-Face-Option1_07.jpg");
    height: 173.4vw;
  }

  .wrapper .hl_2 .hl_list.sub_3 .sub_position {
    padding-top: 34vw;
  }

  .wrapper .hl_2 .hl_list.sub_4 {
    background-image: url("images/Mobile-Hya-Poker-Face-Option1_09.jpg");
    height: 130.5vw;
  }

  .wrapper .hl_2 .hl_list.sub_4 .sub_position {
    padding-top: 29.5vw;
  }

  .wrapper .hl_2 .hl_list.sub_5 {
    background-image: url("images/Mobile-Hya-Poker-Face-Option1_10.jpg");
    height: 55vw;
  }

  .wrapper .hl_2 .hl_list.sub_5 .sub_position {
    padding-top: 33.4vw;
  }

  .foot-note {
    font-size: 3.2vw;
  }
}
@media screen and (max-width: 576px) {
  html,
body {
    font-size: 3.4vw;
    font-size: 56.30631%;
  }

  .wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .tablet {
    display: none !important;
  }

  .mobile {
    display: block !important;
  }
  .foot-note .iconic {
    font-size: 2.3vw;
    top: -5px;
  }
}
@media screen and (max-width: 425px) {
  .wrapper .hl_2 .hl_list.sub_4 {
    height: 129.8vw;
  }

}

@media screen and (max-width: 325px) {
  .wrapper .container{
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .wrapper .hl-box .hl-text h4,
.wrapper .hl-bigbox.big-present .c-50 h2 span + span,
.wrapper .real-title,
.wrapper .hl-top h2 {
      letter-spacing: 0;
    }
  }
}