#quality_visual_scene {
   position: relative;
   height: 320vh;
}

.quality_visual_sticky {
   position: sticky;
   top: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
}

.quality_visual_intro {
   position: absolute;
   left: 50%;
   top: 32%;
   z-index: 4;
   width: max-content;
   transform: translateX(-50%);
   text-align: center;
}

.quality_visual_title,
.tab_mo_quality_visual_title {
   margin: 0;
   font-family: "Bahnschrift", "Pretendard", sans-serif;
   font-weight: 600;
   font-stretch: semi-condensed;
   line-height: 1;
   letter-spacing: 0.04em;
}

.quality_visual_title {
   font-size: 140px;
}

.tab_mo_quality_visual_title {
   display: none;
}

.quality_visual_img {
   position: absolute;
   left: 50%;
   top: 85%;
   z-index: 5;
   width: clamp(560px, 37vw, 700px);
   aspect-ratio: 1.7 / 1;
   overflow: hidden;
   will-change: left, top, width, height, transform;
   --visualOverlay: 0.03;
}

.quality_visual_media {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   pointer-events: none;
}

.quality_visual_img::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   background: rgba(25, 25, 25, var(--visualOverlay));
   pointer-events: none;
}

.quality_visual_text {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 7;
   width: max-content;
   opacity: 0;
   visibility: hidden;
   text-align: center;
   pointer-events: none;
}

.quality_visual_text p {
   font-size: 56px;
   font-weight: 700;
   line-height: 1.45;
   color: var(--color-text-light);
   text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.18);
}

.mo_br {
   display: none;
}


/*------------------------------------
   HACCP Section
------------------------------------*/
#haccp_section {
   --color-brand: var(--color-brand-light);
   --color-line-strong: var(--color-brand-light);
   position: relative;
   height: 360vh;
   background: #fff;
   color: var(--color-text-light);
}

.haccp_sticky {
   position: sticky;
   top: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   background: #fff;
}

.haccp_intro,
.haccp_content,
.haccp_feature {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}

.haccp_intro {
   z-index: 1;
   background: #fff;
}

.haccp_content {
   z-index: 2;
   opacity: 1;
   visibility: visible;
   background: #020303;
   clip-path: circle(170px at 50% 50%);
   -webkit-clip-path: circle(170px at 50% 50%);
   will-change: clip-path, transform;
}

.haccp_content_inner {
   position: relative;
   width: calc(100% - 220px);
   max-width: 1700px;
   height: 100%;
   margin: 0 auto;
}

.haccp_bg_machine {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
   width: min(64vw, 1200px);
   height: 100%;
   pointer-events: none;
   overflow: hidden;
   will-change: transform, opacity;
}

.haccp_bg_machine img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 30%;
   opacity: 25%;
   filter: blur(3px) brightness(0.5) contrast(1.08);
}

.haccp_title_area {
   position: absolute;
   left: 0;
   top: 50%;
   z-index: 3;
   transform: translateY(-50%);
   will-change: transform, opacity;
}

.haccp_label {
   margin-bottom: 30px;
   font-size: 18px;
   font-weight: 300;
   color: #aeaeae;
}

.haccp_title_area h2 {
   margin: 0;
   font-family: "Roboto", "Pretendard", sans-serif;
   font-size: 120px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.03em;
}

.haccp_title_area strong {
   display: block;
   margin-top: 6px;
   font-size: 48px;
   font-weight: 700;
   color: #A2DA67;
   letter-spacing: -0.02em;
}

.haccp_title_area > p:last-child {
   margin-top: 60px;
   margin-left: 2px;
   font-size: 20px;
   font-weight: 400;
   line-height: 1.75;
   color: #dedede;
}

.haccp_center_symbol {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 4;
   width: 660px;
   height: 660px;
   transform: translate(-50%, -50%);
   will-change: transform, opacity;
}

.haccp_center_ring {
   position: absolute;
   left: 50%;
   top: 50%;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.22);
   transform: translate(-50%, -50%);
   transform-origin: center;
   will-change: transform, opacity;
}

.haccp_center_ring::before,
.haccp_center_ring::after {
   content: "";
   position: absolute;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--color-line-strong);
   box-shadow: 0 0 12px rgba(162, 218, 103, 0.9);
}

/* 바깥 링 */
.haccp_center_ring_01 {
   width: 100%;
   height: 100%;
   animation: haccpRingRotate01 36s linear infinite;
}

/* 바깥 링 왼쪽 점 */
.haccp_center_ring_01::before {
   left: -3px;
   top: 50%;
   transform: translateY(-50%);
}

/* 바깥 링 오른쪽 점 */
.haccp_center_ring_01::after {
   right: -3px;
   top: 50%;
   transform: translateY(-50%);
}

/* 안쪽 링 */
.haccp_center_ring_02 {
   width: 88%;
   height: 88%;
   animation: haccpRingRotate02 48s linear infinite;
}

/* 안쪽 링 왼쪽 점 */
.haccp_center_ring_02::before {
   left: -3px;
   top: 50%;
   transform: translateY(-50%);
}

/* 안쪽 링 아래쪽 점 */
.haccp_center_ring_02::after {
   left: 50%;
   bottom: -3px;
   transform: translateX(-50%);
}

.haccp_center_mark {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   border: 12px solid #fff;
   background:
      radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.05), transparent 34%),
      linear-gradient(135deg, #2B2E30 0%, #202426 100%);
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   box-shadow:
      0 0 38px rgba(141, 200, 90, 0.5),
      inset 0 0 24px rgba(255, 255, 255, 0.04);
   animation: haccpMarkGlow 3.8s ease-in-out infinite;
}

.haccp_center_icon {
   width: 70px;
   height: 70px;
}

.haccp_center_icon img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.haccp_center_mark strong {
   margin-top: 20px;
   font-family: "Roboto", "Pretendard", sans-serif;
   font-size: 76px;
   font-weight: 700;
   line-height: 1;
   color: var(--color-text-light);
}

.haccp_center_mark span {
   margin-top: 15px;
   margin-bottom: 30px;
   font-size: 20px;
   font-weight: 300;
   color: #aeaeae;
}

.haccp_slogan {
   position: absolute;
   right: 70px;
   bottom: 100px;
   z-index: 5;
   font-size: 16px;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.72);
   will-change: transform, opacity;
}

.haccp_slogan::after {
   content: "";
   display: inline-block;
   width: 40px;
   height: 1px;
   margin-left: 12px;
   vertical-align: middle;
   background: var(--color-brand);
}

@keyframes haccpRingRotate01 {
   from {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   to {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

@keyframes haccpRingRotate02 {
   from {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   to {
      transform: translate(-50%, -50%) rotate(-360deg);
   }
}

@keyframes haccpMarkGlow {
   0%, 100% {
      box-shadow:
         0 0 38px rgba(141, 200, 90, 0.5),
         inset 0 0 24px rgba(255, 255, 255, 0.04);
   }

   50% {
      box-shadow:
         0 0 56px rgba(162, 218, 103, 0.68),
         inset 0 0 24px rgba(255, 255, 255, 0.05);
   }
}

@media (prefers-reduced-motion: reduce) {
   .haccp_center_ring_01,
   .haccp_center_ring_02,
   .haccp_center_mark {
      animation: none;
   }
}


/*------------------------------------
   03. HACCP Feature
------------------------------------*/
.haccp_feature {
   z-index: 3;
   opacity: 1;
   visibility: visible;
   background: #020303;
   transform: none;
   will-change: transform;

   left: -2px;
   width: calc(100% + 4px);
}

.haccp_feature::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background:
      radial-gradient(circle at 50% 45%, rgba(162, 218, 103, 0.075), transparent 36%);
   pointer-events: none;
}

.haccp_feature_inner {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 2;
   width: min(1400px, calc(100% - 220px));
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   transform: translate(-50%, -50%);
}

.haccp_feature_item {
   position: relative;
   min-height: 360px;
   padding: 0 70px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.haccp_feature_item + .haccp_feature_item::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 1px;
   height: 480px;
   background: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.26),
      transparent
   );
   transform: translateY(-50%);
}

.haccp_feature_icon {
   width: 80px;
   height: 80px;
   margin-bottom: 40px;
}

.haccp_feature_icon img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.haccp_feature_item h3 {
   margin: 0;
   font-size: 28px;
   font-weight: 700;
   line-height: 1.3;
   color: var(--color-text-light);
}

.haccp_feature_item h3::after {
   content: "";
   display: block;
   width: 25px;
   height: 1px;
   margin: 16px auto 0;
   background: #8BB964;
}

.haccp_feature_en {
   margin-top: 16px;
   font-size: 14px;
   font-weight: 300;
   line-height: 1;
   color: rgba(255, 255, 255, 0.5);
}

.haccp_feature_desc {
   margin-top: 32px;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.55;
   color: #bababa;
}

.tab_haccp_info {
   display: none;
}




/*------------------------------------
   qh_standard_section
------------------------------------*/
#qh_standard_section {
   position: relative;
   overflow: hidden;
   background: var(--color-bg-base);
}

.qh_bg {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
}

.qh_bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
   filter: blur(7px) brightness(1.03);
   transform: scale(1.06);
}

.qh_panel {
   position: relative;
   z-index: 2;
   min-height: 100vh;
   display: flex;
   align-items: center;
}

.qh_inner {
   width: 100%;
   max-width: 1400px;
   height: 560px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 440px minmax(0, 1fr);
   align-items: flex-start;
   gap: 40px;
}

.qh_text {
   position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 420px;
   padding-top : 20px
}

.qh_text_inner {
   display: flex;
   flex-direction: column;
   gap: 34px;
}

.qh_text_inner h2 {
   font-family: "Bahnschrift", "Pretendard", sans-serif;
   font-weight: 600;
   font-stretch: semi-condensed;
   font-size: 64px;
   line-height: 1.1;
   letter-spacing: 0.04em;
   color: var(--color-text-primary);
}

.qh_text h2::after {
   content: "";
   display: block;
   width: 60px;
   height: 2px;
   margin: 16px 0 0;
   background: var(--color-brand);
}

.qh_text_inner p {
   font-size: 18px;
   line-height: 1.3;
   color: var(--color-text-secondary);
}

.qh_count {
   display: flex;
   align-items: center;
   gap: 4px;

   font-family: "Bahnschrift", "Pretendard", sans-serif;
   font-weight: 400;
   font-stretch: semi-condensed;
   font-size: 24px;
}

.qh_count_current {
   color: var(--color-text-primary);
   font-weight: 500;
}

.qh_count_slash,
.qh_count_total {
   color: var(--color-text-disabled);
   font-weight: 400;
}



/*------------------------------------
   qh_slider_section
------------------------------------*/
.qh_slider {
   position: relative;
   width: calc(100vw - ((100vw - 1400px) / 2) - 440px - 80px);
   height: 560px;
   overflow: hidden;
   z-index: 2;
}

@media screen and (min-width: 1025px) {
   .qh_slider {
      width: calc(100vw - ((100vw - 1400px) / 2) - 480px);
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
   }

   .qh_slider.is-dragging {
      cursor: grabbing;
   }

   .qh_slider img {
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
   }
}

@media screen and (min-width: 1025px) and (max-width: 1400px) {
   .qh_slider {
      width: calc(100vw - 480px);
   }
}

/* PC보다 작은 데스크톱 환경에서는 외곽 궤도를 포함한 HACCP 그래픽 전체를 확대합니다. */
@media screen and (min-width: 1025px) and (max-width: 1600px) {
   .haccp_center_symbol {
      width: clamp(660px, 52vw, 720px);
      height: clamp(660px, 52vw, 720px);
   }

   .haccp_center_mark {
      width: 65%;
      height: 65%;
   }

   .haccp_center_icon {
      width: 76px;
      height: 76px;
   }

   .haccp_center_mark strong {
      font-size: 80px;
   }
}

.qh_drag_cursor {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9999;
   width: 58px;
   height: 58px;
   border: 2px solid #6FAF45;
   border-radius: 50%;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   box-shadow:
      0 6px 16px rgba(25, 25, 25, 0.1);
   transform: translate(-50%, -50%) scale(0.72);
   transition:
      opacity 0.18s ease,
      visibility 0.18s ease,
      transform 0.18s ease,
      border-color 0.18s ease;
}

.qh_drag_cursor.is-visible {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, -50%) scale(1);
}

.qh_drag_cursor.is-dragging {
   border-color: #6FAF45;
   transform: translate(-50%, -50%) scale(0.86);
}

@media screen and (max-width: 1024px) {
   .qh_drag_cursor {
      display: none;
   }
}

.qh_card_track {
   display: flex;
   align-items: flex-start;
   gap: 40px;
   height: 560px;
   will-change: transform;
}

.qh_card {
   position: relative;
   flex: 0 0 440px;
   width: 440px;
   height: 440px;
   border-radius: 30px;
   overflow: hidden;
   background: var(--color-line);
   opacity: 1;
   transition:
      height 0.55s ease,
      transform 0.55s ease;
}

.qh_card.is-active {
   height: 560px;
}

/* 무한 루프 경계에서 복제 카드와 원본 카드를 교체할 때 전환 중복 방지 */
.qh_card_track.is-loop-jumping .qh_card,
.qh_card_track.is-loop-jumping .qh_card::after,
.qh_card_track.is-loop-jumping .qh_card_text {
   transition: none !important;
}

.qh_card img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.qh_card picture {
   display: block;
   width: 100%;
   height: 100%;
}

.qh_card::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(
      to bottom,
      rgba(31, 31, 31, 0.02) 35%,
      rgba(31, 31, 31, 0.58) 100%
   );
   opacity: 0;
   transition: opacity 0.35s ease;
   pointer-events: none;
}

.qh_card.is-active::after {
   opacity: 1;
}

.qh_card_text {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 2;
   width: 100%;
   padding: 0 32px 44px;
   text-align: center;
   color: var(--color-text-light);
   opacity: 0;
   transform: translateY(12px);
   transition:
      opacity 0.35s ease,
      transform 0.35s ease;
}

.qh_card.is-active .qh_card_text {
   opacity: 1;
   transform: translateY(0);
}

.qh_card_text h3 {
   margin: 0;
   font-size: 28px;
   font-weight: 600;
}

.qh_card_text p {
   margin-top: 20px;
   font-size: 17px;
   font-weight: 400;
   color: var(--color-line);
}





/*------------------------------------
   Responsive
------------------------------------*/
@media (max-width: 1400px) {}




/*------------------------------------
   탭 버전
------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
   #quality_visual_scene {
      height: 260svh;
   }

   .quality_visual_sticky {
      height: 100svh;
   }

   .quality_visual_intro {
      top: 20%;
      width: calc(100% - 48px);
   }

   .quality_visual_title {
      display: none;
   }

   .tab_mo_quality_visual_title {
      display: block;
      font-size: clamp(120px, 15.5vw, 160px);
   }

   .quality_visual_img {
      top: 65%;
      width: min(calc(100vw - 40px), clamp(560px, 75vw, 700px));
   }

   .quality_visual_text {
      width: max-content;
      max-width: calc(100% - 80px);
   }

   .quality_visual_text p {
      font-size: clamp(30px, 5vw, 56px);
   }

   .mo_br {
      display: inline;
   }

   #haccp_section {
      --color-brand: var(--color-brand-light);
      --color-line-strong: var(--color-brand-light);
      height: 360svh;
      height: 360dvh;
      background: var(--color-bg-dark);
   }

   .haccp_sticky {
      height: 100svh;
      height: 100dvh;
      background: #fff;
   }

   .haccp_content {
      clip-path: circle(130px at 50% 50%);
      -webkit-clip-path: circle(130px at 50% 50%);
   }

   .haccp_content_inner {
      width: 100%;
      height: 100%;
   }

   .haccp_title_area {
      display: none;
   }

   .haccp_center_symbol {
      top: 50%;
      width: min(540px, 68vw, 76dvh);
      height: min(540px, 68vw, 76dvh);
   }

   .haccp_center_mark {
      width: 68%;
      height: 68%;
      border-width: 8px;
   }

   .haccp_center_icon {
      width: 48px;
      height: 48px;
   }

   .haccp_center_mark strong {
      margin-top: 12px;
      font-size: clamp(52px, 7vw, 62px);
   }

   .haccp_center_mark span {
      margin-top: 8px;
      margin-bottom: 14px;
      font-size: clamp(13px, 1.7vw, 15px);
      line-height: 1.15;
   }

   .haccp_bg_machine {
      left: 50%;
      top: 50%;
      width: 112vw;
      max-width: none;
      height: 100svh;
      height: 100dvh;
      opacity: 0.3;
      transform: translate(-50%, -50%);
   }

   .haccp_slogan,
   .haccp_feature {
      display: none;
   }

   .tab_haccp_info {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      padding: clamp(64px, 9dvh, 96px) 28px clamp(48px, 7dvh, 72px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: var(--color-text-light);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }

   .tab_haccp_title {
      width: 100%;
   }

   .tab_haccp_title .haccp_label {
      margin-bottom: 12px;
      font-size: 14px;
      color: #c4c4c4;
   }

   .tab_haccp_title h2 {
      margin: 0;
      font-family: "Roboto", "Pretendard", sans-serif;
      font-size: clamp(72px, 12vw, 104px);
      font-weight: 700;
      line-height: 0.95;
      margin-left: 10px;
   }

   .tab_haccp_title strong {
      display: block;
      margin-top: 10px;
      font-size: clamp(26px, 4.2vw, 36px);
      font-weight: 700;
      color: var(--color-line-strong);
   }

   .tab_haccp_title > p:last-child {
      margin-top: 24px;
      font-size: clamp(15px, 2.2vw, 19px);
      font-weight: 300;
      line-height: 1.55;
      color: #dedede;
   }

   .tab_haccp_feature_list {
      width: 100%;
      margin-top: clamp(44px, 7dvh, 72px);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 18px;
   }

   .tab_haccp_feature_item {
      text-align: center;
   }

   .tab_haccp_feature_item .haccp_feature_icon {
      width: clamp(52px, 7vw, 64px);
      height: clamp(52px, 7vw, 64px);
      margin: 0 auto 20px;
   }

   .tab_haccp_feature_item h3 {
      margin: 0;
      font-size: clamp(18px, 2.6vw, 22px);
      font-weight: 700;
      color: var(--color-text-light);
   }

   .tab_haccp_feature_item h3::after {
      content: "";
      display: block;
      width: 25px;
      height: 1px;
      margin: 12px auto 0;
      background: var(--color-brand);
   }
   
   .tab_haccp_feature_item .haccp_feature_en {
      margin-top: 12px;
      font-size: 13px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.5);
   }

   .tab_haccp_feature_item .haccp_feature_desc {
      margin-top: 18px;
      font-size: 14px;
      line-height: 1.55;
      color: #bababa;
   }

   #qh_standard_section {
      background: #fff;
   }

   .qh_bg img {
      filter: blur(7px) brightness(1.04);
      transform: scale(1.08);
   }

   .qh_panel {
      min-height: 100svh;
      align-items: center;
      padding: 100px 0 150px;
   }

   .qh_inner {
      width: calc(100% - 48px);
      height: auto;
      max-width: none;
      display: block;
   }

   .qh_text {
      height: auto;
      min-height: 0;
      padding-top: 0;
      margin-bottom: 40px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      column-gap: 32px;
      margin-top: 48px;
   }

   .qh_text_inner {
      gap: 34px;
   }

   .qh_text_inner h2 {
      font-size: clamp(44px, 7vw, 60px);
      line-height: 1.04;
   }

   .qh_text h2::after {
      width: 45px;
      height: 2px;
      margin-top: 14px;
   }

   .qh_text_inner p {
      font-size: clamp(15px, 2vw, 17px);
   }

   .qh_count {
      font-size: clamp(18px, 2.4vw, 21px);
      padding: 0 4px 2px 0;
   }

   .qh_slider {
      --qh_tablet_card_size: clamp(340px, 50vw, 410px);
      width: calc(100vw - 24px);
      height: var(--qh_tablet_card_size);
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
   }

   .qh_slider.is-dragging {
      cursor: grabbing;
   }

   .qh_slider img {
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
   }

   .qh_card_track {
      gap: clamp(16px, 2.5vw, 24px);
      height: var(--qh_tablet_card_size);
   }

   .qh_card,
   .qh_card.is-active {
      flex-basis: var(--qh_tablet_card_size);
      width: var(--qh_tablet_card_size);
      height: var(--qh_tablet_card_size);
      border-radius: 18px;
   }

   .qh_card_text {
      padding: 0 clamp(20px, 3vw, 24px) clamp(28px, 4vw, 34px);
      transform: translateY(10px);
   }

   .qh_card_text h3 {
      font-size: clamp(22px, 3vw, 26px);
   }

   .qh_card_text p {
      margin-top: 16px;
      font-size: clamp(15px, 2vw, 16px);
   }
}

/* 폴드처럼 가로 폭은 태블릿이지만 화면 높이가 짧은 환경의 정보 화면 보정 */
@media screen and (min-width: 600px) and (max-width: 1024px) and (max-height: 700px) {
   .tab_haccp_info {
      padding: 32px 24px 26px;
   }

   .tab_haccp_title .haccp_label {
      margin-bottom: 8px;
      font-size: 11px;
   }

   .tab_haccp_title h2 {
      margin-left: 6px;
      font-size: clamp(64px, 10vw, 78px);
   }

   .tab_haccp_title strong {
      margin-top: 7px;
      font-size: clamp(21px, 3.2vw, 27px);
   }

   .tab_haccp_title > p:last-child {
      margin-top: 15px;
      font-size: 13px;
      line-height: 1.45;
   }

   .tab_haccp_feature_list {
      margin-top: 40px;
      column-gap: 14px;
   }

   .tab_haccp_feature_item .haccp_feature_icon {
      width: 44px;
      height: 44px;
      margin-bottom: 11px;
   }

   .tab_haccp_feature_item h3 {
      font-size: clamp(16px, 2.2vw, 18px);
      line-height: 1.25;
   }

   .tab_haccp_feature_item h3::after {
      margin-top: 8px;
   }

   .tab_haccp_feature_item .haccp_feature_en {
      margin-top: 8px;
      font-size: 11px;
   }

   .tab_haccp_feature_item .haccp_feature_desc {
      margin-top: 11px;
      font-size: 12px;
      line-height: 1.45;
   }
}




/*------------------------------------
   모바일 버전
------------------------------------*/
@media screen and (min-width: 300px) and (max-width: 599px) {
   #quality_visual_scene {
      height: 260svh;
   }

   .quality_visual_sticky {
      height: 100svh;
      background: #fff;
      --mo-img-w: calc(100vw - 60px);
      --mo-img-center-y: 70svh;
      --mo-img-half-h: calc(var(--mo-img-w) / 3.7016);
      --mo-title-gap: 25px;
   }

   .quality_visual_intro {
      left: 50%;
      top: auto;
      bottom: calc(100svh - var(--mo-img-center-y) + var(--mo-img-half-h) + var(--mo-title-gap));
      width: calc(100% - 60px);
      transform: translateX(-50%);
   }

   .quality_visual_title {
      display: none;
   }

   .tab_mo_quality_visual_title {
      display: block;
      font-size: clamp(60px, 18vw, 100px);
   }

   .quality_visual_img {
      left: 50%;
      top: var(--mo-img-center-y);
      width: var(--mo-img-w);
      aspect-ratio: 335 / 181;
   }

   .quality_visual_text {
      width: max-content;
      max-width: calc(100% - 60px);
   }

   .quality_visual_text p {
      font-size: clamp(28px, 7.5vw, 48px);
   }

   .mo_br {
      display: inline;
   }

   #haccp_section {
   --color-brand: var(--color-brand-light);
   --color-line-strong: var(--color-brand-light);
      height: 360svh;
   }

   .haccp_sticky {
      height: 100svh;
   }

   .haccp_content {
      clip-path: circle(105px at 50% 50%);
      -webkit-clip-path: circle(105px at 50% 50%);
   }

   .haccp_content_inner {
      width: calc(100% - 40px);
   }

   .haccp_title_area {
      left: 50%;
      top: 50%;
      width: calc(100% - 40px);
      transform: translate(-50%, -50%);
      text-align: center;
   }

   .haccp_label {
      margin-bottom: 18px;
      font-size: 11px;
   }

   .haccp_title_area h2 {
      font-size: clamp(56px, 18vw, 78px);
   }

   .haccp_title_area strong {
      margin-top: 14px;
      font-size: clamp(22px, 6vw, 30px);
   }

   .haccp_title_area > p:last-child {
      margin-top: 28px;
      font-size: 13px;
      line-height: 1.7;
   }

   .haccp_center_symbol {
      left: 50%;
      top: 50%;
      width: min(360px, 92vw);
      height: min(360px, 92vw);
   }

   .haccp_center_mark {
      width: 68%;
      height: 68%;
      border-width: 6px;
   }

   .haccp_center_icon {
      width: 30px;
      height: 30px;
   }

   .haccp_center_mark strong {
      margin-top: 10px;
      font-size: clamp(40px, 11.5vw, 44px);
   }

   .haccp_center_mark span {
      margin-top: 10px;
      margin-bottom: 12px;
      font-size: 12px;
      line-height: 1.15;
   }

   .haccp_bg_machine {
      right: 50%;
      top: 50%;
      width: 480px;
      max-width: 130vw;
      transform: translate(50%, -50%);
      opacity: 0.1;
   }

   .haccp_slogan {
      display: none;
   }

   .haccp_feature_inner {
      width: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      gap: 36px;
   }

   .haccp_feature_item {
      min-height: auto;
      padding: 0;
   }

   .haccp_feature_item + .haccp_feature_item::before {
      display: none;
   }

   .haccp_feature_icon {
      width: 40px;
      height: 40px;
      margin-bottom: 16px;
   }

   .haccp_feature_item h3 {
      font-size: 18px;
   }

   .haccp_feature_en {
      margin-top: 8px;
      font-size: 11px;
   }

   .haccp_feature_desc {
      margin-top: 14px;
      font-size: 12px;
      line-height: 1.65;
   }

   #qh_standard_section {
      overflow: visible;
      background: var(--color-bg-base);
   }

   .qh_bg {
      display: none;
   }

   .qh_panel {
      min-height: 0;
      padding: 100px 0 50px;
      align-items: flex-start;
   }

   .qh_panel + .qh_panel {
      padding-top: 96px;
      padding-bottom: 96px;
   }

   .qh_inner {
      width: calc(100% - 40px);
      max-width: none;
      height: auto;
      display: block;
      margin: 0 auto;
   }

   .qh_text {
      height: auto;
      padding-top: 0;
      margin-bottom: 40px;
      display: block;
   }

   .qh_text_inner {
      gap: 25px;
   }

   .qh_text_inner h2 {
      font-size: clamp(40px, 12vw, 54px);
      line-height: 1;
   }

   .qh_text h2::after {
      width: 34px;
      height: 2px;
      margin-top: 12px;
   }

   .qh_text_inner p {
      font-size: 14px;
      line-height: 1.3;
   }

   .qh_count {
      display: none;
   }

   .qh_slider {
      width: 100%;
      height: auto;
      overflow: visible;
   }

   .qh_card_track {
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 100px;
      transform: none !important;
   }

   .qh_card,
   .qh_card.is-active {
      flex: 0 0 auto;
      width: 100%;
      height: auto;
      border-radius: 0;
      overflow: visible;
      background: transparent;
      transition: none;
   }

   .qh_card::after {
      display: none;
   }

   .qh_card img {
      width: 100%;
      height: auto;
      aspect-ratio: 335 / 180;
      object-fit: cover;
      border-radius: 0;
   }

   .qh_card picture {
      height: auto;
   }

   .qh_card_text {
      position: static;
      width: 100%;
      padding: 15px 0 0;
      text-align: left;
      color: var(--color-text-primary);
      opacity: 1;
      transform: none;
      transition: none;
   }

   .qh_card_text::before {
      display: block;
      margin-bottom: 20px;
      font-family: "Roboto", "Pretendard", sans-serif;
      font-size: 12px;
      font-weight: 400;
      color: var(--color-brand);
   }

   .clean_standard .qh_card_text::before {
      content: "CLEAN STANDARD";
   }

   .quality_assurance .qh_card_text::before {
      content: "QUALITY ASSURANCE";
   }

   .qh_card_text h3 {
      font-size: 24px;
      font-weight: 600;
      color: var(--color-text-primary);
   }

   .qh_card_text p {
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.15;
      color: var(--color-text-secondary);
   }
}