/*
 * Additive UHD scaling for the preserved Small Machines homepage.
 * Up to Full HD the original c009c09 output is untouched. Above 1920px,
 * content grows at the same ratio as the viewport and reaches 2x at 4K.
 */

/* Preserve the complete source image instead of stretching or edge-cropping. */
.main-visual .img-bx {
  background: #d9d9d7;
}

.main-visual .img-bx > img {
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
}

.main :is(.img_bx, .img-bx) > img {
  max-width: 100%;
  object-fit: contain !important;
  object-position: center !important;
}

.main img {
  object-fit: contain !important;
  object-position: center !important;
}

@media (min-width: 769px) and (max-width: 1440px),
  (min-width: 769px) and (max-height: 900px) {
  #header,
  #header .header-wrap,
  #header .nav-list--depth1 > .nav-list__item > .link {
    height: clamp(92px, 13vh, 112px) !important;
  }

  #header .logo {
    width: clamp(148px, 12.5vw, 170px) !important;
  }

  #header .nav-list--depth1 > .nav-list__item > .link {
    padding-right: clamp(18px, 1.8vw, 26px) !important;
    padding-left: clamp(18px, 1.8vw, 26px) !important;
    font-size: clamp(14px, 1.15vw, 16px) !important;
  }

  .main-visual .img-bx {
    min-height: calc(100svh - clamp(92px, 13vh, 112px)) !important;
  }

  .main-visual .img-bx::after {
    min-height: 0 !important;
    padding-bottom: calc(100svh - clamp(92px, 13vh, 112px)) !important;
  }

  .main-visual .txt-bx .title {
    max-width: min(72vw, 820px);
    font-size: clamp(48px, 4.4vw, 60px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #header,
  #header .header-wrap {
    height: 88px !important;
  }

  #header .container,
  main .container {
    max-width: 100% !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
  }

  .main-visual .img-bx {
    min-height: calc(100svh - 88px) !important;
  }

  .main-visual .img-bx::after {
    padding-bottom: calc(100svh - 88px) !important;
  }

  .main-visual .txt-bx .title {
    max-width: 680px;
    font-size: clamp(44px, 6vw, 56px) !important;
  }

  .main_section3 .container .cover_bx p,
  .main_section4 .container .mission_bx .content_bx p,
  .main_section4 .container .vision_bx .content_bx p {
    font-size: clamp(26px, 3.6vw, 34px) !important;
  }

  .main_section6 .container .txt-bx-container .txt-bx .title,
  .main_section8 .container .txt_bx h2,
  .main_section7 .container .txt_bx h2,
  .main_section9 .container .txt_bx h2 {
    font-size: clamp(48px, 6.6vw, 64px) !important;
  }
}

@media (max-width: 768px) {
  #header,
  #header .header-wrap {
    height: 64px !important;
    min-height: 64px !important;
  }

  .nav-mobile {
    max-width: min(88vw, 420px);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .main-visual .txt-bx .title {
    overflow-wrap: break-word;
  }
}

@media (max-width: 430px) {
  .header .header-wrap,
  .main-visual .txt-bx .container {
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
  }

  .main-visual .txt-bx .title {
    max-width: 10em;
    font-size: clamp(30px, 9.2vw, 40px) !important;
  }
}

/*
 * Product media keeps the source 500x520-ish ratio while scaling down with
 * compact viewports. This prevents the legacy 100%-width card from becoming
 * visually larger as the layout changes from two columns to one.
 */
@media (min-width: 1025px) and (max-width: 1440px) {
  .main_section6 .container .list_bx .list li .link {
    width: min(100%, clamp(460px, 44vw, 620px)) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .main_section6 .container .list_bx .list li {
    justify-content: center !important;
  }

  .main_section6 .container .list_bx .list li .link {
    width: min(100%, clamp(360px, 62vw, 520px)) !important;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .main_section6 .container .list_bx .list li {
    justify-content: center !important;
  }

  .main_section6 .container .list_bx .list li .link {
    width: min(100%, clamp(260px, 78vw, 420px)) !important;
    margin-right: auto;
    margin-left: auto;
  }
}

.main_section6 .container .list_bx .list li .link .img_bx {
  aspect-ratio: 25 / 26;
  width: 100%;
}

.main_section6 .container .list_bx .list li .link .img_bx::after {
  display: none !important;
}

.main_section6 .container .list_bx .list li .link .img_bx > img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

.main_section6 .container .list_bx .list li .link:hover .img_bx > img {
  transform: none !important;
}

@media (min-width: 1921px) {
  html {
    font-size: clamp(16px, min(0.833333vw, 1.481481vh), 32px);
  }

  .container {
    max-width: clamp(1320px, min(68.75vw, 122.222222vh), 2640px) !important;
    padding-right: clamp(20px, min(1.041667vw, 1.851852vh), 40px) !important;
    padding-left: clamp(20px, min(1.041667vw, 1.851852vh), 40px) !important;
  }

  #header,
  #header .header-wrap,
  #header .nav-list--depth1 > .nav-list__item > .link {
    height: clamp(150px, min(7.8125vw, 13.888889vh), 300px) !important;
  }

  #header .logo {
    width: clamp(160px, min(8.333333vw, 14.814815vh), 320px) !important;
    margin-right: clamp(20px, min(1.041667vw, 1.851852vh), 40px) !important;
  }

  #header .nav-list--depth1 > .nav-list__item > .link {
    padding-right: clamp(32px, min(1.666667vw, 2.962963vh), 64px) !important;
    padding-left: clamp(32px, min(1.666667vw, 2.962963vh), 64px) !important;
    font-size: clamp(17px, min(0.885417vw, 1.574074vh), 34px) !important;
    letter-spacing: clamp(-0.4px, max(-0.010417vw, -0.018519vh), -0.2px) !important;
  }

  #header .lang-btn {
    min-width: clamp(85px, min(4.427083vw, 7.87037vh), 170px);
    min-height: clamp(50px, min(2.604167vw, 4.62963vh), 100px);
    font-size: clamp(14px, min(0.729167vw, 1.296296vh), 28px) !important;
  }

  #header .nav-mobile-btn {
    width: clamp(50px, min(2.604167vw, 4.62963vh), 100px);
    height: clamp(50px, min(2.604167vw, 4.62963vh), 100px);
  }

  .main-visual .txt-bx .title {
    max-width: clamp(920px, min(47.916667vw, 85.185185vh), 1840px);
    font-size: clamp(72px, min(3.75vw, 6.666667vh), 144px) !important;
    letter-spacing: clamp(-5.6px, max(-0.145833vw, -0.259259vh), -2.8px) !important;
  }

  .main-visual .swiper-control .swiper-button {
    width: clamp(60px, min(3.125vw, 5.555556vh), 120px) !important;
    height: clamp(60px, min(3.125vw, 5.555556vh), 120px) !important;
    font-size: clamp(20px, min(1.041667vw, 1.851852vh), 40px) !important;
  }

  .main_section3 .container .cover_bx p {
    max-width: clamp(720px, min(37.5vw, 66.666667vh), 1440px);
    font-size: clamp(36px, min(1.875vw, 3.333333vh), 72px) !important;
    letter-spacing: clamp(-1.6px, max(-0.041667vw, -0.074074vh), -0.8px) !important;
  }

  .main_section4 .container .mission_bx .content_bx .title h2,
  .main_section4 .container .vision_bx .content_bx .title h2 {
    font-size: clamp(18px, min(0.9375vw, 1.666667vh), 36px) !important;
    letter-spacing: clamp(6px, min(0.3125vw, 0.555556vh), 12px) !important;
  }

  .main_section4 .container .mission_bx .content_bx p,
  .main_section4 .container .vision_bx .content_bx p {
    font-size: clamp(40px, min(2.083333vw, 3.703704vh), 80px) !important;
    letter-spacing: clamp(-2.4px, max(-0.0625vw, -0.111111vh), -1.2px) !important;
  }

  .main_section6 .container .txt-bx-container .txt-bx .title,
  .main_section8 .container .txt_bx h2,
  .main_section7 .container .txt_bx h2,
  .main_section9 .container .txt_bx h2 {
    font-size: clamp(72px, min(3.75vw, 6.666667vh), 144px) !important;
    letter-spacing: clamp(-5.6px, max(-0.145833vw, -0.259259vh), -2.8px) !important;
  }

  .main_section6 .container .list_bx .list li .link h3 {
    font-size: clamp(42px, min(2.1875vw, 3.888889vh), 84px) !important;
    letter-spacing: clamp(-2px, max(-0.052083vw, -0.092593vh), -1px) !important;
  }

  .main_section6 .container .list_bx .list li .link p {
    max-width: clamp(620px, min(32.291667vw, 57.407407vh), 1240px);
    margin-top: clamp(14px, min(0.729167vw, 1.296296vh), 28px) !important;
    font-size: clamp(18px, min(0.9375vw, 1.666667vh), 36px) !important;
  }

  .main_section6 .container .list_bx .list li .link p.semi {
    margin-top: clamp(7px, min(0.364583vw, 0.648148vh), 14px) !important;
    font-size: clamp(13px, min(0.677083vw, 1.203704vh), 26px) !important;
  }

  .main_section8 .container .content_bx .content_item .title h3 {
    font-size: clamp(28px, min(1.458333vw, 2.592593vh), 56px) !important;
  }

  .main_section8 .container .content_bx .content_item .title h3 span {
    font-size: clamp(44px, min(2.291667vw, 4.074074vh), 88px) !important;
  }

  .main_section8 .container .content_bx .content_item .hv_bx p {
    padding-right: clamp(24px, min(1.25vw, 2.222222vh), 48px);
    padding-left: clamp(24px, min(1.25vw, 2.222222vh), 48px);
    font-size: clamp(18px, min(0.9375vw, 1.666667vh), 36px) !important;
  }

  .main_section7 .container .content_bx .inner_text h3 {
    font-size: clamp(44px, min(2.291667vw, 4.074074vh), 88px) !important;
    letter-spacing: clamp(-3px, max(-0.078125vw, -0.138889vh), -1.5px) !important;
  }

  .main_section9 .container .swiper-bx .swiper-container .swiper-wrapper .swiper-slide .inner_txt_bx p {
    font-size: clamp(18px, min(0.9375vw, 1.666667vh), 36px) !important;
  }

  .main_section9 .container .swiper-bx .swiper-container .swiper-wrapper .swiper-slide .inner_txt_bx p.date {
    margin-top: clamp(8px, min(0.416667vw, 0.740741vh), 16px) !important;
    font-size: clamp(14px, min(0.729167vw, 1.296296vh), 28px) !important;
  }

  .main_section10 .container .count_list li p {
    font-size: clamp(15px, min(0.78125vw, 1.388889vh), 30px) !important;
  }

  .main_section10 .container .count_list li p.num {
    width: clamp(190px, min(9.895833vw, 17.592593vh), 380px) !important;
    margin-top: clamp(16px, min(0.833333vw, 1.481481vh), 32px) !important;
    font-size: clamp(128px, min(6.666667vw, 11.851852vh), 256px) !important;
    letter-spacing: clamp(-10px, max(-0.260417vw, -0.462963vh), -5px) !important;
  }

  .main_section10 .container .count_list li p.num.plus_mark::after {
    font-size: clamp(56px, min(2.916667vw, 5.185185vh), 112px) !important;
  }
}