/* common */
html, body {
  height: 100%;
  margin: 0;
}
.page-thanks {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.section-thanks{
  flex: 1;
}
.container-fluid{
  max-width: 1920px;
  padding: 0 80px;
  @media (max-width: 992px){
    padding: 0 24px;
  }
}
.container{
  padding: 0 80px;
  @media (max-width: 992px){
    padding: 0 24px;
  }
}
.text-en{
  font-family: var(--bs-font-en);
}

/* btn */
.btn-wrap{
  display: flex;
  justify-content: center;
  gap: 24px;
  @media (max-width: 480px){
    flex-wrap: wrap;
  }
}
.c-button--shine {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, var(--bs-primary), var(--bs-tertiary));
}
.c-button--shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 30%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 100%);
  transform: skewX(-20deg);
}
.c-button--shine:hover::before {
  animation: shine 1s ease forwards;
}
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

/* width */
.w-1000{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* indent */
.text-indent{
  text-indent: -1em;
  padding-left: 1em;
}

/* heading */
.heading__primary{
  display: inline-block;
  font-size: clamp(20px,3.6vw,28px);
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, var(--bs-primary) 0%, var(--bs-tertiary) 100%);
  border-image-slice: 1;
  padding: 0 1em 0.5em;
}
.heading__small{
  position: relative;
  font-size: clamp(16px, 2.3vw, 18px);
  &::before{
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-right: 0.8em;
    margin-bottom: -2px;
    background-color: var(--bs-primary);
  }
}


/* icon */
.icon{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ruby */
[data-ruby] {
  position: relative;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-size: 0.5em;
  letter-spacing: 0.5em;
  white-space: nowrap;
}


/* top */
.scroll-indicator {
  position: absolute;
  bottom: 10%;
  right: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  @media (max-width: 480px){
    bottom: 2%;
    right: 2%;
  }
}
.scroll-text {
  font-size: 12px;
  font-family: var(--bs-font-en);
  letter-spacing: 0.2em;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.scroll-line {
  width: 2px;
  height: 80px;
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  animation: scrollLine 1.8s infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.hero.v-h-full{
  @media (max-width: 992px){
    /* height: 70vh; */
    padding: 0;
  }
}
.hero-movie{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.hero-img{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.hero .hero-overlay{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  @media (max-width: 992px){
    top: unset;
    bottom: 0;
  }
}
.hero-text{
  padding: 40px 0;
  @media (max-width: 480px){
    padding: 24px 0;
  }
}
.hero-heading {
  font-family: var(--bs-font-en);
  font-size: clamp(32px,4.8vw,48px);
  line-height: 1;
  font-weight: 700;
  margin-bottom: 16px;
  @media (max-width: 992px){
    margin-bottom: 8px;
  }
}

.hero-subheading {
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 40px;
  @media (max-width: 992px){
    margin-bottom: 16px;
  }
}


.section-vision{
  background: linear-gradient(to left,
  rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%),
    url(../images/img-vision.webp?052902) center / cover no-repeat;
  @media (max-width: 992px){
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%),
      url(../images/img-vision.webp?052902) center / cover no-repeat;
  }
}


.section-whynow{
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.5) 10%,rgba(255,255,255,0) 100%),
    url(../images/img-whynow.webp?052902) center / cover no-repeat;

  @media (max-width: 992px){
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.8) 20%,rgba(255,255,255,0) 100%),
      url(../images/img-whynow.webp?052902) center / cover no-repeat;
  }
}


.section-product{
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.5) 10%,rgba(255,255,255,0) 100%),
    url(../images/img-product.webp?052902) center / cover no-repeat;

  @media (max-width: 992px){
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.8) 20%,rgba(255,255,255,0) 100%),
      url(../images/img-product.webp?052902) center / cover no-repeat;
  }
}

.section-whywewin{
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.5) 10%,rgba(255,255,255,0) 100%),
    url(../images/img-whywewin.webp?052902) center / cover no-repeat;

  @media (max-width: 992px){
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.8) 20%,rgba(255,255,255,0) 100%),
      url(../images/img-whywewin.webp?052902) 80% / cover no-repeat;
  }
}


.section-leadership{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
    url(../images/img-leadership.webp?052902) center / cover no-repeat;
  background-attachment: fixed;
  @media (max-width: 992px){
    background-attachment: scroll;
  }
}
.leadership-heading{
  text-align: center;
  @media (max-width: 992px){
    text-align: left;
  }
}
.leadership-item{
  padding: 32px;
  @media (max-width: 480px){
    padding: 16px;
  }
}
.leadership-img{
  width: 100%;
  max-width: 426px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.leadership-text{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  color: #fff;
  font-size: clamp(10px, 2vw, 14px);
  padding: 32px 16px 16px 16px;
  z-index: 1;
  &::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.3) 70%,
      rgba(0,0,0,0) 100%
    );
    z-index: -1;
  }
  @media (max-width: 480px){
    padding: 16px 8px 8px 8px;
  }

  p{
    margin-bottom: 8px;
  }
  p:last-child{
    margin-bottom: 0;
  }
}


.section-news{
  background: #eff3fc;
}
.news-lists{
  margin-bottom: 0;
  .news-list{
    display: flex;
    gap: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding: 16px 8px;
    &:first-child{
      border-top: 1px solid rgba(0, 0, 0, 0.3);
    }
    @media (max-width: 992px){
      padding: 8px;
    }
  }
  .news-date{
    font-weight: bold;
    font-family: var(--bs-font-en);
  }
  .news-text{
    font-size: clamp(12px,1.4vw,14px);
    p:last-child{
      margin-bottom: 0;
    }
  }
}

.icon__blank::after{
  content: "\f4c8";
  font-family: "Material Symbols Outlined";
  font-size: 1em;
  font-weight: 300;
}
.icon__arrow::after{
  content: "\e5e1";
  font-family: "Material Symbols Outlined";
  font-size: 1em;
  font-weight: 300;
  transition: transform 0.3s ease;
}



/* Privacy Policy */
.privacy{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  .privacy__item{
    margin-bottom: 40px;
  }
  ul{
    padding: 16px;
    li{
      margin-bottom: 8px;
    }
  }
}


/* contact */
.section-contact {
  background-color: #eff3fc;
}
.contact-img{
  height: 100%;
  object-fit: cover;
  @media (max-width: 992px){
    height: auto;
  }
}
.contact-form{
  padding: 40px 80px;
  @media (max-width: 1320px){
    padding: 24px 40px;
  }
  @media (max-width: 992px){
    padding: 24px 0;
  }
}
#mfp_hidden{
  display: none;
}
.mfp_err{
  color: var(--bs-danger);
  font-size: clamp(10px,1.5vw,12px);
}
input[type="text"],input[type="email"],input[type="tel"] select, textarea {
  width: 100% !important;
  border: 1px solid rgba(31, 42, 74, 0.2);
  background: #fcfcfc;
  appearance: none;
  outline: 0;
  padding: 8px;
}
input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--bs-primary);
  padding: 0;
}
.form__contact{
  position: relative;
  width: 100%;
  margin: 0 auto;
  @media (max-width: 992px){
    padding: 0 24px;
  }
  .form__item{
    margin-bottom: 16px;
    @media (max-width: 992px){
      margin-bottom: 8px;
    }
    .input__title{
      margin-bottom: 8px;
      @media (max-width: 992px){
        margin-bottom: 4px;
      }
    }
    .--must{
      &::after{
        content: "*";
        display: inline-block;
        color: var(--bs-danger);
        font-size: 14px;
        vertical-align: super;
        margin-left: 4px;
      }
    }
    .item__textarea{
      textarea{
        height: 250px !important;
        @media (max-width: 480px){
          height: 200px;
        }
      }
    }
  }
  .privacy__link{
    margin-bottom: 24px;
    a{
      font-size: 14px;
    }
  }
  .privacy__check{
    margin-bottom: 24px;
    label{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
  }
}

#mfp_phase_confirm{
  h4{
    margin-bottom: 40px;
  }
  #mfp_confirm_table{
    width: 100%;
    margin-bottom: 40px;
    th{
      width: 100%;
      display: block;
      font-size: clamp(16px,2.3vw,18px);
      margin-bottom: 8px;
    }
    td{
      width: 100%;
      display: block;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--bs-gray);
      margin-bottom: 20px;
    }
  }
  .mfp_buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  #mfp_button_send,#mfp_button_cancel{
    padding: 8px 24px;
    border-width: 1px;
    font-size: clamp(12px,1.4vw,14px);
    white-space: nowrap;
    transition: 0.3s;
  }
  #mfp_button_send{
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: transparent;
    &:hover{
      background: var(--bs-primary);
      color: #fff;
    }
  }
  #mfp_button_cancel{
    background: #020202;
    color: #fff;
  }
}
#mfp_loading_screen,
#mfp_overlay_background {
  pointer-events: none;
}