@media screen and (max-width: 1500px) {
  .section-004 .wrap {
    padding: 0 1rem;
  }

  .section-005 .desktop .left img {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
  .section-001 {
    min-height: 60px;
  }
  .section-001 .nav li {
    line-height: 60px;
  }
  .section-001 .logo {
    min-width: 108px;
  }

  .section-002 .logo {
    margin-top: 10vh;
    min-width: 181px;
  }

  .section-002 h2 {
    font-size: 40px;
  }

  .section-002 p {
    font-size: 20px;
  }

  .section-002 button {
    width: 330px;
    font-size: 20px;
  }

  .section-002 .btns {
    bottom: 25px;
    justify-content: center;
  }

  .section-002 .btns-4 {
    width: 9rem;
  }

  .section-002 .btns-4 .btn {
    width: 4rem;
    min-width: unset !important;
  }

  .section-002 .btns-3 {
    width: 9rem;
    flex-direction: column;
  }

  .section-002 .btns-3 .btn {
    width: 4rem;
    min-width: unset !important;
  }

  .section-002 .btns .btn {
    margin: 0.2rem auto;
  }

  /* .section-002 .btns-3 .btn:nth-child(1) {
    margin: 0 2rem;
  } */

  .section-002 .role {
    bottom: 32vh;
  }

  .section-004 .wrap {
    padding: 0 0.5rem;
  }

  .section-005 .desktop {
    display: none;
  }

  .section-005 .mobile {
    display: block;
  }

  .section-005 .bg,
  .section-005.active .bg {
    filter: brightness(0.6);
    background-position-x: center;
    transition: unset;
    transform: unset;
  }

  .section-007 .footer {
    min-height: 3rem;
  }

  .section-007 .wrap > .right {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .section-008 {
    display: none;
  }

  .section-003::before,
  .section-005::before,
  .section-007::before {
      height: 0.5rem;
      top: -0.25rem;
      background: url("../image/common/line4.webp") no-repeat center / cover;
      background-size: 100% 100%;
  }

  .section-004::before,
  #dowebok .section-006::before {
      content: "";
      height: 0.5rem;
      top: -0.3rem;
      background: url("../image/common/line3.webp") no-repeat center / cover;
      background-size: 100% 100%;
  }
}

@media screen and (max-width: 768px) {
  .section-001 > .nav {
    display: none;
  }
  .section-001 .nav li {
    line-height: inherit;
  }
  .section-001 > .link {
    display: none;
  }

  .section-001 .more {
    display: block;
    min-width: 29px;
  }

  .section-001 .btn {
    display: block;
    min-width: 50px;
  }

  .section-002 .role {
    bottom: 31vh;
  }

  .section-002 .register {
    min-width: 330px;
    font-size: 20px;
    margin: 0.25rem auto;
  }

  .section-002 .btns .btn {
    min-width: 229px;
  }

  .section-003 {
    background-color: #e1d3b8;
    background: url("../image/section3/bg2.webp") no-repeat center / cover;
  }

  .section-003 .desktop {
    display: none;
  }

  .section-003 .mobile {
    display: block;
  }

  .section-003 .register {
    animation: scaleSmall2 1.5s infinite linear;
  }

  .section-002 .role .desktop {
    display: none;
  }

  .section-002 .role .mobile {
    display: block;
  }

  .section-007 .wrap > .right {
    display: none;
  }

  .section-007 .wrap .footer {
    padding: 0 0.2rem;
    font-size: 0.22rem;
    flex-direction: column;
    justify-content: center;
  }

  .section-007 .wrap .footer .left {
    min-width: 90vw;
  }

  .section-007 .wrap .footer .left .copyright {
    line-height: 0.7rem;
  }

  .section-007 .wrap .footer .right .link {
    display: none;
  }

  .section-007 .wrap .footer .right .lang {
    width: 2.8rem;
    height: 0.9rem;
    font-size: 0.24rem;
    background-position-x: 2.3rem;
    background-size: auto 0.15rem;
    padding: 0 0.3rem;
  }

  .section-007 .wrap .footer .right .lang:focus {
    background-position-x: 2.3rem;
    background-size: auto 0.15rem;
  }

  .section-007 .wrap .footer .right .lang option {
    font-size: 0.2rem;
  }

  .model-002 .wrap .close,
  .model-003 .wrap .close {
    display: none;
  }

  .model-002 .wrap .close2,
  .model-003 .wrap .close2 {
    display: block;
  }

  .model-002 .wrap {
    height: 6.5rem;
  }

  .model-002 .wrap h2 {
    font-size: 0.5rem;
  }

  .en .section-002 h2 {
    font-size: 24px;
  }

  .en .section-002 p {
    font-size: 12px;
  }

  .es .section-002 h2 {
    font-size: 28px;
  }

  .es .section-002 p {
    font-size: 12px;
  }

  .es .section-002 .register {
    font-size: 16px;
  }

  .de .section-002 h2 {
    font-size: 21px;
  }

  .de .section-002 p {
    font-size: 14px;
  }

  .fr .section-002 h2 {
    font-size: 25px;
  }

  .fr .section-002 p {
    font-size: 12px;
  }

  .fr .section-002 .register {
    font-size: 11px;
  }

  .pt .section-002 h2 {
    font-size: 22px;
  }

  .pt .section-002 p {
    font-size: 14px;
  }

  .pt .section-002 .register {
    font-size: 16px;
  }

  .it .section-002 h2 {
    font-size: 24px;
  }

  .it .section-002 p {
    font-size: 12px;
  }

  .ru .section-002 h2 {
    font-size: 32px;
  }

  .ru .section-002 p {
    font-size: 16px;
  }

  .ru .section-002 .register {
    font-size: 11px;
  }

  .vn .section-002 h2 {
    font-size: 24px;
  }

  .vn .section-002 p {
    font-size: 14px;
  }

  .vn .section-002 .register {
    font-size: 14px;
  }

  .th .section-002 h2 {
    font-size: 28px;
  }

  .th .section-002 p {
    font-size: 18px;
  }

  .th .section-002 .register {
    font-size: 14px;
  }

  .id .section-002 h2 {
    font-size: 24px;
  }

  .id .section-002 p {
    font-size: 16px;
  }

  .id .section-002 .register {
    font-size: 16px;
  }
}

@media screen and (max-width: 640px) {
  .section-004 .wrap {
    /* height: min(100vh, 14rem); */
    height: min(100vh, max(14rem, 80vh));
    min-height: 100vw;
  }

  .section-004 .wrap::before {
    content: "";
    z-index: 2;
    --height: calc(100vh - min(100vh, max(14rem, 80vh)));
    width: 100vw;
    height: calc(var(--height) * 4);
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(var(--height));
    background: linear-gradient(0deg, rgb(60, 117, 183) 0%, rgb(25, 63, 118) 32%, rgba(25, 63, 118, 0.10196) 65%, rgba(25, 63, 118, 0) 100%);
  }

  .section-004 .wrap::after {
    /* content: ""; */
    z-index: 3;
    --height: calc(100vh - min(100vh, max(14rem, 80vh)));
    width: max(100vw, 10rem);
    height: 100vh;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(var(--height));
    background: url("../image/section4/mask2.webp") no-repeat bottom / contain;
    /* background-size: bottom / contain; */
    /* background: linear-gradient(0deg, ); */
    /* background-color: red; */

    background-position-x: left;
    background-position-y: bottom;
    background-size: 100vw max(40vh, 50vw);
  }

  .section-004 .wrap .left {
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: -1vh;
    bottom: 0;
    transform: translateX(-50%);
  }

  .section-004 .wrap .left h2 span {
    width: 100%;
  }

  .section-004 .wrap .left h2 {
    font-size: 1rem;
  }

  .section-004 .wrap .left h4 {
    font-size: 0.5rem;
    line-height: 1.25rem;
  }

  .section-004 .wrap .left p {
    font-size: 0.4rem;
    /* white-space: nowrap; */
    line-height: 0.6rem;
    margin: auto;
    max-width: 75vw;
    position: unset;
  }

  .section-004 .wrap .middle::after {
    content: unset;
  }

  .section-004 .wrap .middle .hero {
    display: none;
  }

  .section-004 .wrap .left .hero {
    display: block;
  }

  .section-004 .wrap .right {
    display: none;
  }

  .section-004 .wrap .bottom {
    z-index: 3;
    display: flex;
    align-items: flex-end;
    --height: calc(100vh - min(100vh, max(14.5rem, 85vh)));
    width: max(100vw, 10rem);
    height: 100vh;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, var(--height));
    background: url("../image/section4/mask2.webp") no-repeat bottom / contain;
    background-position-x: center;
    background-position-y: bottom;
    background-size: 100vw max(40vh, 50vw);
  }

  .section-009 {
    min-height: 150px;
    max-height: 250px;
    height: 25vh;
    overflow: hidden;
  }

  .section-009 .wrap {
    top: 10%;
  }

  .section-010 .wrap {
    margin: 10px 0;
    padding: 0 10px;
  }

  .section-010 h2 {
    font-size: 18px;
    line-height: 24px;
    margin: 15px 0 5px;
  }

  .section-010 p,
  .section-010 li {
    font-size: 12px;
    line-height: 18px;
  }

  .section-011 {
    height: 100px;
  }
}

@media screen and (min-width: 768px) {
  .model-001,
  .model-003 {
    display: none !important;
  }

  .section-007 .wrap .thumb,
  .section-007 .wrap .banner,
  .section-007 .wrap .swiper-button {
    display: none;
  }
}

@media screen and (min-width: 1200px) {

  .section-002 .register {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12vh;
    animation-name: scaleSmall2;
  }
}