/* ==============================
   PRODUCTION SYSTEM VISUAL COMMON
============================== */
:is(.onestop_visual_sticky, .facility_visual_sticky, .quality_visual_sticky, .ehs_visual_sticky) {
   background: #fff;
}

:is(.onestop_visual_intro, .facility_visual_intro, .quality_visual_intro, .ehs_visual_intro) {
   top: 18%;
   left: 50%;
   width: max-content;
   transform: translateX(-50%);
   text-align: center;
}

:is(.onestop_visual_title, .facility_visual_title, .quality_visual_title, .ehs_visual_title) {
   display: block;
   margin: 0;
   color: var(--color-text-primary);
   font-family: "Bahnschrift", "Pretendard", sans-serif;
   font-size: 200px;
   font-weight: 700;
   font-stretch: semi-condensed;
   line-height: 0.96;
   letter-spacing: 0.02em;
}

:is(.tab_mo_onestop_visual_title, .tab_mo_facility_visual_title, .tab_mo_quality_visual_title, .tab_mo_ehs_visual_title) {
   display: none !important;
}

:is(.onestop_visual_img, .facility_visual_img, .quality_visual_img, .ehs_visual_img) {
   top: 94%;
   left: 50%;
   width: min(1400px, calc(100vw - 200px));
   height: auto;
   aspect-ratio: 1400 / 560;
}

@media screen and (max-width: 1400px) {
   :is(.onestop_visual_img, .facility_visual_img, .quality_visual_img, .ehs_visual_img) {
      width: calc(100vw - 120px);
   }
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
   :is(.onestop_visual_img, .facility_visual_img, .quality_visual_img, .ehs_visual_img) {
      top: calc(18% + 323px + 20vw);
   }

   :is(.onestop_visual_title, .facility_visual_title, .quality_visual_title, .ehs_visual_title) {
      font-size: 170px;
   }
}

@media screen and (min-width: 1025px) and (max-width: 1400px) {
   :is(.onestop_visual_img, .facility_visual_img, .quality_visual_img, .ehs_visual_img) {
      top: calc(18% + 339px + 20vw);
   }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
   :is(.onestop_visual_sticky, .facility_visual_sticky, .quality_visual_sticky, .ehs_visual_sticky) {
      --system-title-top: 26svh;
      --system-title-height: clamp(189px, 27.3vw, 252px);
      --system-visual-gap: 44px;
      --system-visual-width: 80vw;
      --system-visual-height: calc(var(--system-visual-width) * 0.5);
      height: 100svh;
      height: 100dvh;
   }

   :is(.onestop_visual_intro, .facility_visual_intro, .quality_visual_intro, .ehs_visual_intro) {
      top: var(--system-title-top);
   }

   :is(.onestop_visual_title, .facility_visual_title, .quality_visual_title, .ehs_visual_title) {
      font-size: clamp(90px, 15vw, 120px);
      line-height: 1.05;
   }

   :is(.ehs_visual_title) {
      letter-spacing: -0.02em;
   }

   :is(.onestop_visual_img, .facility_visual_img, .quality_visual_img, .ehs_visual_img) {
      top: calc(var(--system-title-top) + var(--system-title-height) + var(--system-visual-gap) + (var(--system-visual-height) / 2));
      width: var(--system-visual-width);
      height: var(--system-visual-height);
      aspect-ratio: auto;
   }
}

@media screen and (max-width: 599px) {
   :is(.onestop_visual_sticky, .facility_visual_sticky, .quality_visual_sticky, .ehs_visual_sticky) {
      --system-title-top: 28svh;
      --system-title-height: clamp(112px, 31vw, 140px);
      --system-visual-gap: 36px;
      --system-visual-width: 82vw;
      --system-visual-height: clamp(330px, 90vw, 460px);
      height: 100svh;
      height: 100dvh;
   }

   :is(.onestop_visual_intro, .facility_visual_intro, .quality_visual_intro, .ehs_visual_intro) {
      top: var(--system-title-top);
   }

   :is(.onestop_visual_title, .facility_visual_title, .quality_visual_title, .ehs_visual_title) {
      font-size: clamp(52px, 14.5vw, 64px);
      line-height: 1.1;
   }

   :is(.onestop_visual_img, .facility_visual_img, .quality_visual_img, .ehs_visual_img) {
      top: calc(var(--system-title-top) + var(--system-title-height) + var(--system-visual-gap) + (var(--system-visual-height) / 2));
      width: var(--system-visual-width);
      height: var(--system-visual-height);
      aspect-ratio: auto;
   }
}