.group-list-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
}
.group-list-container .group-flex-list .text{

    text-align: left;
}
.group-flex-list {
    display: flex;
    gap: 8px;
    justify-content: start;
    width: 100%;


    font-family: "Pretendard-Regular", Helvetica;
    color: #414141;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 140%;

    font-weight: 400;    
}
.group-flex-list .bullet {
    flex-shrink: 0; /* 불렛 기호가 찌그러지지 않게 고정 */
}


.school_frame1 {
    width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 40px;
  position: relative;
  margin-top: 80px;
}

.school_frame1 .div {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 486px;
  background-color: #727272;
  border-radius: 56px;
  overflow: hidden;
}

.school_frame1 .cb {
  position: absolute;
  top: calc(50.00% - 243px);
  left: calc(50.00% - 920px);
  width: 1840px;
  height: 486px;
  aspect-ratio: 1.5;
}

.school_frame1 .dist-hero {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 486px;
  background-color: #727272;
  border-radius: 56px;
  overflow: hidden;
}

.school_frame1 .hero .cb_yu {
  position: absolute;
  top: calc(50.00% - 243px);
  left: calc(50.00% - 920px);
  width: 1840px;
  height: 468px;
  object-fit: cover;     
  object-position: right; 
  display: block;
}


/* Hero video background: poster + container bg fallback; scope: school-hero only */
.school_frame1 .div.school-hero {
  background-image: url(../img/cb036126165-1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 학교급식 hero: fill container at any zoom (override base .school_frame1 .cb fixed width) */
.school_frame1 .div.school-hero .cb.school-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.school_frame1 .div.school-hero.hero-video-fallback .school-hero-video {
  display: none !important;
}

/* Group-hero (공공급식) video: poster + container bg fallback; scope: group-hero only */
.school_frame1 .div.group-hero {
  background-image: url(../img/school/group_hero.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 공공급식 hero: fill container at any zoom (override base .school_frame1 .cb fixed width) */
.school_frame1 .div.group-hero .cb.group-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.school_frame1 .div.group-hero.group-hero-video-fallback .group-hero-video {
  display: none !important;
}

/* Dist-hero (유통사업) video: poster + container bg fallback; scope: dist-hero only */
.school_frame1 .div.dist-hero {
  background-image: url(../img/04_menu/hero.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 유통사업 hero: fill container at any zoom (override base .school_frame1 .cb fixed width) */
.school_frame1 .div.dist-hero .cb.dist-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.school_frame1 .div.dist-hero.dist-hero-video-fallback .dist-hero-video {
  display: none !important;
}

/* Menu05-hero (급식안전한눈에 / 위생교육 등) video: poster + container bg fallback; scope: menu05-hero only */
.school_frame1 .div.menu05-hero {
  background-image: url(../img/heroNew.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.school_frame1 .div.menu05-hero .cb.menu05-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.school_frame1 .div.menu05-hero .div-2 {
  position: absolute !important;
  top: calc(50.00% - 78px);
  left: 160px;
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  z-index: 1;
}

.school_frame1 .div.menu05-hero.menu05-hero-video-fallback .menu05-hero-video {
  display: none !important;
}

/* Notice-hero (회사소식) video: poster + container bg fallback; scope: notice-hero only */
.school_frame1 .div.notice-hero {
  background-image: url(../img/06_menu/hero.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.school_frame1 .div.notice-hero .cb.notice-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.school_frame1 .div.notice-hero .div-2 {
  position: absolute !important;
  top: calc(50.00% - 78px);
  left: 160px;
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  z-index: 1;
}

.school_frame1 .div.notice-hero.notice-hero-video-fallback .notice-hero-video {
  display: none !important;
}

/* 769–1200px: keep video + text overlay so text stays visible (override position: unset) */
@media (min-width: 769px) and (max-width: 1200px) {
  .school_frame1 .div.school-hero .cb.school-hero-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.school-hero .div-2 {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
  }
  .school_frame1 .div.group-hero .cb.group-hero-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.group-hero .div-2 {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
  }
  .school_frame1 .div.dist-hero .cb.dist-hero-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.dist-hero .div-2 {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
  }
  .school_frame1 .div.menu05-hero .cb.menu05-hero-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.menu05-hero .div-2 {
    position: absolute !important;
    top: calc(50.00% - 78px);
    left: 160px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    z-index: 1;
  }
  .school_frame1 .div.notice-hero .cb.notice-hero-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.notice-hero .div-2 {
    position: absolute !important;
    top: calc(50.00% - 78px);
    left: 160px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    z-index: 1;
  }
}

/* Mobile (≤768px): show video + overlay (override .school_frame1 .cb { display: none }) */
@media (max-width: 768px) {
  .school_frame1 .div.school-hero .cb.school-hero-video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.school-hero .div-2 {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
  }
  .school_frame1 .div.group-hero .cb.group-hero-video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.group-hero .div-2 {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
  }
  .school_frame1 .div.dist-hero .cb.dist-hero-video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.dist-hero .div-2 {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
  }
  .school_frame1 .div.menu05-hero .cb.menu05-hero-video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.menu05-hero .div-2 {
    position: absolute !important;
    top: calc(50.00% - 78px);
    left: 160px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    z-index: 1;
  }
  .school_frame1 .div.notice-hero .cb.notice-hero-video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .school_frame1 .div.notice-hero .div-2 {
    position: absolute !important;
    top: calc(50.00% - 78px);
    left: 160px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    z-index: 1;
  }
}

.school_frame1 .div-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  position: absolute;
  top: calc(50.00% - 78px);
  left: 160px;
}

.school_frame1 .div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.school_frame1 .text-wrapper {
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  font-size: 62px;
  line-height: 86.8px;
  position: relative;
  width: fit-content;
  color: var(--n00);
  letter-spacing: 0;
  white-space: nowrap;
}

.school_frame1 .p {
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  font-size: 25px;
  line-height: 37.5px;
  position: relative;
  width: fit-content;
  color: var(--n00);
  letter-spacing: 0;
  white-space: nowrap;
}


.breadcrumbs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 20px 120px;
  position: relative;
  width: 100%;
}

.breadcrumbs .div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
}

.breadcrumbs .ic-round-home {
  position: relative;
  width: 16px;
  height: 16px;
}

.breadcrumbs .next {
  position: relative;
  width: 12px;
  height: 12px;
}

.breadcrumbs .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}



.section1 {
  display: flex;
  flex-direction: column;
  /* width: 1920px; */
  width: 100%;
  align-items: center;
  padding: 0px 220px;
  position: relative;
}

.section1 .contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 60px 0px 120px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section1 .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #111111;
  font-size: 44px;
  letter-spacing: -0.88px;
  line-height: 61.6px;
  white-space: nowrap;
}

.section1 .div {
  display: flex;
  height: 500px;
  align-items: center;
  gap: 48px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.section1 .frame-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.section1 .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section1 .p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32.0px;
}

.section1 .div-2 {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 500px;
  background-color: #d1d1d1;
  border-radius: 24px;
  overflow: hidden;
}

.section1 .twit {
  position: absolute;
  top: calc(50.00% - 250px);
  left: calc(50.00% - 358px);
  width: 716px;
  height: 500px;
  aspect-ratio: 1.6;
  object-fit: cover;
}

.section1 .tipt {
  position: absolute;
  top: calc(50.00% - 250px);
  width: 716px;
  height: 500px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.section1 .div-3 {
  display: flex;
  flex-direction: column;
  width: 100%;       
  max-width: 1480px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.section1 .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section1 .text-wrapper-2 {
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--x02);
  font-size: 28px;
  line-height: 39.2px;
  position: relative;
  width: fit-content;
  letter-spacing: 0;
  white-space: nowrap;
}

.section1 .text-wrapper-3 {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 15px;
  line-height: 24px;
  position: relative;
  width: fit-content;
  letter-spacing: 0;
  white-space: nowrap;
}

.section1 .container-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section1 .div-4 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section1 .container-3 {
  display: flex;
  width: 100%;
  height: 106px;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid;
  border-color: #e5e5e5;
}

.section1 .div-5 {
  display: flex;
  width: 190px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  position: relative;
  align-self: stretch;
  background-color: #005b45;
}

.section1 .img {
  position: relative;
  width: 56px;
  height: 56px;
}

.section1 .text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 25.2px;
  white-space: nowrap;
}

.section1 .div-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #ffffff;
}

.section1 .container-4 {
  display: flex;
  flex-direction: column;
  height: 55px;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: var(--x-03);
}

.section1 .text-wrapper-5 {
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #666666;
  font-size: 14px;
  line-height: 19.6px;
  position: relative;
  width: fit-content;
  letter-spacing: 0;
  white-space: nowrap;
}

.section1 .text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #111111;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 26.0px;
  white-space: nowrap;
}

.section1 .container-5 {
  display: flex;
  flex-direction: column;
  height: 55px;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.section1 .icon-wrapper {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #ffffff;
  border-radius: 16777200px;
}

.section1 .icon {
  position: relative;
  width: 28px;
  height: 28px;
}

.section1 .vector {
  position: absolute;
  width: 0;
  height: 58.33%;
  top: 25.00%;
  left: 45.83%;
}

.section1 .vector-2 {
  position: absolute;
  width: 83.33%;
  height: 75.00%;
  top: 8.33%;
  left: 4.17%;
}

.section1 .vector-3 {
  position: absolute;
  width: 83.40%;
  height: 41.67%;
  top: 16.66%;
  left: 4.17%;
}

.section1 .vector-4 {
  position: absolute;
  width: 0;
  height: 25.00%;
  top: 37.50%;
  left: 87.50%;
}

.section1 .vector-5 {
  position: absolute;
  width: 50.00%;
  height: 27.08%;
  top: 47.91%;
  left: 20.83%;
}

.section1 .vector-6 {
  position: absolute;
  width: 41.65%;
  height: 37.96%;
  top: 49.54%;
  left: 25.01%;
}

.section1 .vector-7 {
  position: absolute;
  width: 50.00%;
  height: 50.00%;
  top: 4.16%;
  left: 20.83%;
}

.section1 .vector-8 {
  position: absolute;
  width: 83.33%;
  height: 70.90%;
  top: 12.43%;
  left: 4.17%;
}

.section1 .vector-9 {
  position: absolute;
  width: 25.00%;
  height: 37.50%;
  top: 45.83%;
  left: 33.33%;
}

.section1 .vector-10 {
  position: absolute;
  width: 75.00%;
  height: 79.17%;
  top: 4.16%;
  left: 8.33%;
}

.section1 .container-6 {
  display: flex;
  height: 110px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #005b4566;
  border-radius: 10px;
  border: 2px solid;
  border-color: #f3f3f3;
}

.section1 .text-wrapper-7 {
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #111111;
  font-size: 20px;
  line-height: 30px;
  position: relative;
  width: fit-content;
  letter-spacing: 0;
  white-space: nowrap;
}

.section1 .div-7 {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.section1 .container-7 {
  display: inline-flex;
  flex-direction: column;
  height: 58px;
  align-items: flex-end;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.section1 .text-wrapper-8 {
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #666666;
  font-size: 14px;
  line-height: 21px;
  position: relative;
  width: fit-content;
  letter-spacing: 0;
  white-space: nowrap;
}

.section1 .text-wrapper-9 {
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  font-size: 22px;
  line-height: 33px;
  position: relative;
  width: fit-content;
  color: #111111;
  letter-spacing: 0;
  white-space: nowrap;
}

.section1 .vector-11 {
  position: relative;
  width: 1px;
  height: 47.5px;
}
/*  Section 2 Styles  ************************************************************************************/
.section2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  /* padding: 40px 220px 120px; */
  position: relative;
  background-color: #ffffff;
  width: 100%;
  /* padding: 0px 220px; */
}

.section2 .school_box2 {
    display: flex;
    align-items: center;
    gap: 48px;
    position: relative;
    align-self: stretch;
    width: 100%;
    padding: 0px 200px;
}

.section2 .div {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 500px;
  background-color: #d1d1d1;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d3d3d3;
}

.section2 .cb {
  position: absolute;
  top: calc(50.00% - 250px);
  left: calc(50.00% - 358px);
  width: 716px;
  height: 500px;
  aspect-ratio: 1.53;
  object-fit: cover;
}

/* 학교급식: zoom-safe fill — section images fill container at any zoom */
.section1 .div-2 {
  width: 100%;
  overflow: hidden;
}
.section1 .tipt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section2 .div {
  width: 100%;
  overflow: hidden;
}
.section2 .cb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* section4: 친환경·우수 농산물 계약재배 현황 */
.section4 .div-3 {
  width: 100%;
  overflow: hidden;
}
.section4 .div-3 .CK {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section4 .div-12 .sc_img {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.section4 .div-12 .sc_img .CK-cm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* section5: 공급업체 위생점검, 위생교육, 배송기사 위생교육 */
.section5 .div-3 {
  width: 100%;
  overflow: hidden;
}
.section5 .div-3 .CK,
.section5 .div-3 .CK-ticam,
.section5 .div-3 .img,
.section5 .div-3 .ti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section2 .frame-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.section2 .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section2 .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--n-01);
  font-size: 40px;
  letter-spacing: -0.80px;
  line-height: 54.0px;
  white-space: nowrap;
}

.section2 .frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section2 .p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32.0px;
}


.section2 .frame-4 {
  display: flex;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section2 .div-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 1000px;
  overflow: hidden;
  border: 1px dashed;
  border-color: #8b9a92;
  aspect-ratio: 1;
}

.section2 .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.section2 .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 84px;
}

.section2 .frame-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section2 .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #005b45;
  font-size: 24px;
  text-align: center;
  letter-spacing: -0.48px;
  line-height: 33.6px;
}

.section2 .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 15px;
  text-align: center;
  letter-spacing: -0.30px;
  line-height: 21.0px;
}

.section2 .frame-7 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-left: -30px;
  border-radius: 1000px;
  overflow: hidden;
  border: 1px dashed;
  border-color: #8b9a92;
  aspect-ratio: 1;
}

.section2 .layer-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 84px;
  background-color: #ffffff;
}

.section2 .layer {
  position: relative;
  top: 6px;
  left: 120px;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background-image: url(../img/vector-2.svg);
  background-size: 100% 100%;
}

.section2 .vector {
  position: absolute;
  width: 100.00%;
  height: 36.33%;
  top: 63.67%;
  left: 0;
}

.section2 .element {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  line-height: 22.4px;
}

.section2 .text-wrapper-5 {
  position: relative;
  width: 327px;
  margin-left: -7.25px;
  margin-right: -7.25px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 15px;
  text-align: center;
  letter-spacing: -0.30px;
  line-height: 21.0px;
}

.section2 .text-wrapper-6 {
  position: relative;
  align-self: stretch;
  height: 44px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 15px;
  text-align: center;
  letter-spacing: -0.30px;
  line-height: 21.0px;
}








/* School process section: image-based replacement */
.school-process {
  width: 100%;
  text-align: center;
}

.process-desktop {
  display: block;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.process-mobile {
  display: none;
}

@media (max-width: 1199px) {
  .process-desktop {
    display: none;
  }

  .process-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

  .process-mobile img {
    width: 92%;
    max-width: 500px;
    height: auto;
  }
}

/*  Section3 Styles  ************************************************************************************/

.section3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #f3f3f3;
  width: 100%;
}

.section3 .div-s3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 68px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section3 .div-wrapper-s3 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.section3 .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x02);
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 56.0px;
  white-space: nowrap;
}

.section3 .div-2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.section3 .box-s3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px;
  position: relative;
  min-width: 0;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
}

.section3 .div-wrapper-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 120px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section3 .layer {
  position: relative;
  width: 100%;
  height: 90px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.section3 .vector {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  transform: none !important;
  width: 90px !important;
  height: 90px !important;
  object-fit: contain;
  display: block !important;
}

.section3 .div-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.section3 .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28.0px;
  white-space: nowrap;
}

.section3 .element {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #404040;
  font-size: 16px;
  line-height: 22.4px;
  position: relative;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
}

/* Arrows between cards: visible only on desktop; vertically centered in row */
.section3 .material-symbols {
  position: relative;
  width: 31px;
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section3 .group {
  position: relative;
  width: 98.70%;
  height: 97.22%;
}

/* .section3 .img {
  position: absolute;
  width: 38.30%;
  height: 100%;
  top: 0;
  left: 61.70%;
} */

.section3 .vector-2 {
  position: absolute;
  width: 38.30%;
  height: 100%;
  top: 0;
  left: 30.85%;
}

.section3 .vector-3 {
  position: absolute;
  width: 38.30%;
  height: 100%;
  top: 0;
  left: 0;
}

.section3 .img-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 120px;
}

.section3 .icons {
  position: relative;
  top: 11px;
  left: 85px;
  width: 45px;
  height: 57px;
}

.section3 .vector-4 {
  position: absolute;
  width: 36.84%;
  height: 20.83%;
  top: 38.13%;
  left: 32.37%;
}

.section3 .vector-5 {
  position: absolute;
  width: 94.74%;
  height: 95.83%;
  top: 0;
  left: 0;
}

.section3 .text-wrapper-3 {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #404040;
  font-size: 16px;
  line-height: 22.4px;
  white-space: nowrap;
  position: relative;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
}

.section3 .div-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 169px;
  left: calc(50.00% - 29px);
}

.section3 .text-wrapper-4 {
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #8b9a92;
  font-size: 16px;
  line-height: 22.4px;
  white-space: nowrap;
  position: relative;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
}

.section3 .text-wrapper-5 {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #8b9a92;
  font-size: 12px;
  line-height: 16.8px;
  position: relative;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
}


/*  Section4 Styles  ************************************************************************************/

.section4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #ffffff;
  width: 100%;
}

.section4 .div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 68px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section4 .div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.section4 .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x02);
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 56.0px;
  white-space: nowrap;
}

.section4 .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section4 .div-3 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 500px;
  background-color: #113b27;
  border-radius: 24px;
  overflow: hidden;
}

.section4 .div-3 .sc_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.section4 .div-3 .sc_img .CK {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section4 .rectangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  max-width: 551px;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(0, 39, 22, 1) 0%,
    rgba(0, 39, 22, 0) 100%
  );
}

.section4 .div-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  max-width: 420px;
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.section4 .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x02);
  font-size: 32px;
  letter-spacing: -0.64px;
  line-height: 43.2px;
  white-space: nowrap;
}

.section4 .rectangle-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  background-color: var(--x03);
}

.section4 .div-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section4 .div-wrapper-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x05);
  border-radius: 6px;
}

.section4 .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: -0.15px;
  line-height: 18.0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.section4 .p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25.6px;
}

.section4 .table-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;

    max-width: 1480px;
    

}

.section4 .div-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 1480px;
  flex: 0 0 auto;
  border-top-width: 1.5px;
  border-top-style: solid;
  border-color: var(--x02);
}

.section4 .table-head {
  display: flex;
  height: 50px;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 1480px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--x03);
}

.section4 .div-wrapper-3 {
  display: flex;
  width: 368px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 8px;
  position: relative;
  align-self: stretch;
  background-color: #f0f0f0;
}

.section4 .text-wrapper-4 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--x02);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20.8px;
}

.section4 .div-wrapper-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 8px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #f0f0f0;
}

.section4 .text-wrapper-5 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 246px;
  margin-left: -61.50px;
  margin-right: -61.50px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--x02);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20.8px;
}

.section4 .table-content {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 1480px;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--x03);
}

.section4 .div-wrapper-5 {
  display: flex;
  width: 106px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  background-color: #f0f0f0;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: var(--x03);
}

.section4 .text-wrapper-6 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: var(--x02);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section4 .div-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.section4 .div-11 {
  display: flex;
  height: 50px;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--x03);
}

.section4 .div-wrapper-6 {
  display: flex;
  width: 262px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  background-color: #f0f0f0;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: var(--x03);
}

.section4 .div-wrapper-7 {
  border-right-width: 1px;
  border-right-style: solid;
  border-color: var(--x03);
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.section4 .text-wrapper-7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--x02);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section4 .text-wrapper-8 {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--x02);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section4 .div-wrapper-8 {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #ffffff;
  border-right-width: 1px;
  border-right-style: solid;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--x03);
}

/* first data row: no top border (header already has bottom border) */
.section4 .div-11:first-child .div-wrapper-8 {
  border-top: none;
}

.section4 .text-wrapper-9 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #8c8c8c;
  font-size: 13px;
  text-align: right;
  letter-spacing: 0;
  line-height: 20.8px;
}

.section4 .div-12 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 500px;
  background-color: #d1d1d1;
  border-radius: 24px;
  overflow: hidden;
}

.section4 .div-12 .sc_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.section4 .div-12 .sc_img .CK-cm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section4 .CK-cm {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section4 .div-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  max-width: 420px;
  position: absolute;
  left: 75px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* .section4 .div-14 {
  display: flex;
  height: 50px;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  overflow: hidden;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--x03);
} */

.section4 .div-15 {
  overflow: hidden;
  display: flex;
  height: 50px;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--x03);
}

/*  Section 5 Styles  ************************************************************************************/
.section5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #f3f3f3;
  width: 100%;
}

.section5 .div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section5 .div-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.section5 .div-3 {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 438px;
  background-color: #d9d9d9;
  border-radius: 24px;
  overflow: hidden;
}

.section5 .CK {
  position: absolute;
  top: calc(50.00% - 219px);
  left: calc(50.00% - 365px);
  width: 730px;
  height: 438px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.section5 .CK-ticam {
  position: absolute;
  top: calc(50.00% - 219px);
  left: calc(50.00% - 365px);
  width: 730px;
  height: 438px;
  aspect-ratio: 1.4;
  object-fit: cover;
}

.section5 .div-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* padding: 0px 30px; */
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 24px;
}

.section5 .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 28px;
  text-align: center;
  letter-spacing: 0;
  line-height: 42px;
  padding: 15px;;
}

.section5 .p {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: 30px;
  padding: 15px;
  white-space: normal;     /* 기본값(줄바꿈 허용) */
  overflow-wrap: break-word; /* 긴 단어가 있으면 적당히 끊어줌 */
  word-break: keep-all;    /* 한글/단어를 가급적 단어 단위로 유지(권장) */  
}

.section5 .img {
  position: absolute;
  top: calc(50.00% - 219px);
  left: calc(50.00% - 365px);
  width: 730px;
  height: 438px;
  aspect-ratio: 1.78;
  object-fit: cover;
}

.section5 .ti {
  position: absolute;
  top: calc(50.00% - 219px);
  left: 0;
  width: 730px;
  height: 438px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

/*  Group Styles  ************************************************************************************/

.group_frame {
  display: flex;
  flex-direction: column;
  /* width: 1920px; */
  width: 100%;
  align-items: center;
  padding: 0px 220px;
  position: relative;
}

.group_frame .contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 46px;
  padding: 60px 0px 120px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.group_frame .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.group_frame .div-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

.group_frame .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x02);
  font-size: 44px;
  letter-spacing: -0.88px;
  line-height: 61.6px;
  white-space: nowrap;
}

.group_frame .p {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 40px;
  letter-spacing: -0.80px;
  line-height: 56.0px;
  white-space: nowrap;
}

.group_frame .span {
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.32px;
}

.group_frame .text-wrapper-2 {
  font-family: "Pretendard-ExtraBold", Helvetica;
  font-weight: 800;
  color: #3a7956;
  letter-spacing: -0.32px;
}

.group_frame .text-wrapper-3 {
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.32px;
  text-decoration: underline;
}

.group_frame .div-3 {
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.group_frame .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 30px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #f6f6f6;
  border-radius: 24px;
  overflow: hidden;
}

.group_frame .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 120px;
}

.group_frame .div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.group_frame .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28.0px;
  white-space: nowrap;
}

.group_frame .div-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.group_frame .div-5,
.group-fr2 .div-5
 {
  display: flex;
  width: 200px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  position: relative;
  align-self: stretch;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d8d8d8;
}

  


.group_frame .text-wrapper-5 {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: var(--x02);
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 22.4px;
  white-space: nowrap;
}

.group_frame .mdi-download {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

.group_frame .vector {
  position: absolute;
  width: 58.33%;
  height: 70.83%;
  top: 12.50%;
  left: 20.83%;
}

.group_frame .div-wrapper-2 {
  display: flex;
  width: 200px;
  align-items: center;
  justify-content: space-around;
  gap: 60px;
  padding: 18px 20px;
  position: relative;
  align-self: stretch;
  background-color: var(--x01);
  border-radius: 8px;
  overflow: hidden;
}

.btn_contact {
    position: relative;
    width: fit-content;
    font-family: "Pretendard-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    background-color: #3a7956;
    font-size: 16px;
    letter-spacing: -0.32px;
    line-height: 22.4px;
    white-space: nowrap;
    border:none;
    
}

.group_frame .div-6 {
  display: flex;
  flex-direction: column;
  width: 1352px;
  align-items: flex-start;
  gap: 80px;
  padding: 60px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 24px;
}

.group_frame .div-7 {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.group_frame .clipped {
  position: relative;
  width: 110px;
  height: 109px;
  object-fit: cover;
}

.group_frame .div-8 {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
  box-shadow: 0px 4px 20px #a5c1a640;
}

.group_frame .vector-2 {
  position: relative;
  width: 14px;
  height: 27px;
}

.group_frame .div-wrapper-3 {
  width: 519px;
  height: 98px;
  padding: 10px;
  margin-left: -2px;
  background-color: #666666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  border-radius: 12px;
}

.group_frame .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
  white-space: nowrap;
}

.group_frame .div-9 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.group_frame .div-10 {
  display: flex;
  width: 557px;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.group_frame .element-wrapper {
  width: 545px;
  padding: 24px 10px;
  background-color: #4fa6ce;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  border-radius: 12px;
}

.group_frame .element {
  position: relative;
  width: 529px;
  margin-top: -1.00px;
  margin-left: -2.00px;
  margin-right: -2.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.group_frame .vector-3 {
  position: relative;
  width: 14px;
  height: 27px;
  margin-left: -2px;
}

.group_frame .g-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  background-color: #ffffff;
  border-radius: 100px;
  overflow: hidden;
  aspect-ratio: 1;
}

.group_frame .g {
  position: relative;
  width: 34.47%;
  height: 43.64%;
  top: 28.18%;
  left: 32.73%;
}



.group_frame .path-2 {
  position: absolute;
  width: 100%;
  height: 96.00%;
  top: 4.00%;
  left: 0;
}

.group_frame .div-11 {
  display: flex;
  width: 655px;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.group_frame .clipped-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  background-color: #edf5f0;
  border-radius: 100px;
  overflow: hidden;
  aspect-ratio: 1;
}

.group_frame .clipped-2 {
  top: calc(50.00% - 55px);
  left: calc(50.00% - 55px);
  width: 110px;
  height: 110px;
  position: absolute;
  object-fit: cover;
}

.group_frame .div-12 {
  display: flex;
  width: 531px;
  margin-right: -6.00px;
  align-items: center;
  position: relative;
  box-shadow: 0px 4px 20px #a5c1a640;
}

.group_frame .div-wrapper-4 {
  width: 513px;
  height: 98px;
  padding: 10px;
  margin-left: -2px;
  background-color: #666666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  border-radius: 12px;
}

.group_frame .div-13 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: 0 0 auto;
}

.group_frame .div-wrapper-5 {
  display: flex;
  flex-direction: column;
  width: 557px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 10px;
  position: relative;
  background-color: #4fa6ce;
  border-radius: 12px;
}

.group_frame .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.group_frame .clipped-3 {
  top: calc(50.00% - 54px);
  left: calc(50.00% - 54px);
  width: 109px;
  height: 109px;
  position: absolute;
  object-fit: cover;
}

.group_frame .div-14 {
  display: flex;
  width: 531px;
  align-items: center;
  position: relative;
  
}

.group_frame .div-wrapper-6 {
  width: 531px;
  height: 98px;
  padding: 10px;
  margin-right: -12.00px;
  margin-left: -2px;
  background-color: #666666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  border-radius: 12px;
}

.group_frame .div-15 {
  position: relative;
  width: 483px;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.group_frame .text-wrapper-9 {
  letter-spacing: -0.18px;
}

.group_frame .text-wrapper-10 {
  font-size: 20px;
  letter-spacing: -0.08px;
  line-height: 27.0px;
}

.group-fr2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #f8f8f8;
  width: 100%;
}

.group-fr2 .contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 68px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.group-fr2 .div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.group-fr2 .div {
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  color: transparent;
  font-size: 44px;
  text-align: center;
  letter-spacing: -0.88px;
  line-height: 61.6px;
  position: relative;
  font-weight: 400;
}

.group-fr2 .text-wrapper {
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.39px;
}

.group-fr2 .span {
  font-weight: 600;
  color: #3a7956;
  letter-spacing: -0.39px;
}

.group-fr2 .text-wrapper-2 {
  font-weight: 600;
  color: #0e57d1;
  letter-spacing: -0.39px;
}

.group-fr2 .text-wrapper-3 {
  font-weight: 600;
  color: #ddb206;
  letter-spacing: -0.39px;
}

.group-fr2 .text-wrapper-4 {
  font-weight: 600;
  color: #ddb206;
  letter-spacing: -0.39px;
}

.group-fr2 .div-2 {
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.group-fr2 .button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 12px 12px 30px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0px 4px 14px #8c8c8c40;
}

/* 공공급식: image-based cards (desktop/tablet vs mobile) */
.group-fr2 .group-fr2-card-img {
  flex: 1;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0px 4px 14px #8c8c8c40;
  background-color: #ffffff;
}
.group-fr2 .group-fr2-card-img picture,
.group-fr2 .group-fr2-card-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.group-fr2 .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 158px;
}

.group-fr2 .div-wrapper-2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 60px;
  padding: 18px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #f3f3f3;
  border-radius: 8px;
  overflow: hidden;
}

.group-fr2 .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--x02);
  font-size: 32px;
  letter-spacing: -0.64px;
  line-height: 44.8px;
  white-space: nowrap;
}

.group-fr2 .p {
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  color: #414141;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28.0px;
  position: relative;
  font-weight: 400;
}

.group-fr2 .div-3 {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.group-fr2 .div-4 {
  display: flex;
  width: 200px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  position: relative;
  align-self: stretch;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d8d8d8;
}

.group-fr2 .text-wrapper-6 {
  width: fit-content;
  font-family: "Pretendard-Regular", Helvetica;
  color: var(--x02);
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 22.4px;
  white-space: nowrap;
  position: relative;
  font-weight: 400;
}

.group-fr2 .mdi-download {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

.group-fr2 .vector {
  position: absolute;
  width: 58.33%;
  height: 70.83%;
  top: 12.50%;
  left: 20.83%;
}

.group-fr2 .div-wrapper-3 {
  display: flex;
  width: 200px;
  align-items: center;
  justify-content: space-around;
  gap: 60px;
  padding: 18px 20px;
  position: relative;
  align-self: stretch;
  background-color: var(--x01);
  border-radius: 8px;
  overflow: hidden;
}

.group-fr2 .text-wrapper-7 {
  width: fit-content;
  font-family: "Pretendard-Regular", Helvetica;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 22.4px;
  white-space: nowrap;
  position: relative;
  font-weight: 400;
}


/*  yutong 1 Styles  ************************************************************************************/
.yutong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 60px 220px 120px;
  position: relative;
  width: 100%;
}




.yutong .div {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 400;
  color: var(--x02);
  font-size: 40px;
  letter-spacing: 0;
  line-height: 56.0px;
  position: relative;
  text-align: center;
}

.yutong .text-wrapper {
  font-weight: 700;
}

.yutong .span {
  font-family: "Pretendard-Regular", Helvetica;
}

.yutong .frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.yutong .frame:hover {
  background-color: transparent;
}

.yutong .p {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #4a4a4a;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 38.4px;
  position: relative;
  text-align: center;
}

.yutong .text-wrapper-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #4a4a4a;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 38.4px;
  position: relative;
  text-align: center;
}

.yutong .div-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #f9f9f9;
  border-radius: 200px;
  border: none;
  /* min-width: 1480px; */
}

.yutong .div-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 200px;
  background: linear-gradient(
    180deg,
    rgba(221, 221, 221, 0) 0%,
    rgba(119, 119, 119, 1) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

/* yutong-textbox-img: pure image block – no decoration, layout only */
.yutong .div-wrapper.yutong-textbox-img {
  background: none;
  border-radius: 0;
  padding: 0;
}
.yutong .div-wrapper.yutong-textbox-img::before {
  display: none;
}
.yutong .div-wrapper.yutong-textbox-img picture,
.yutong .div-wrapper.yutong-textbox-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0;
}

.yutong .div-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -2.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 56.0px;
  white-space: nowrap;
  position: relative;
  text-align: center;
}

.yutong .text-wrapper-3 {
  color: #1a4895;
}

.yutong .text-wrapper-4 {
  color: #111111;
}

.yutong .text-wrapper-5 {
  color: #e38d24;
}

.yutong .text-wrapper-6 {
  color: #3a7956;
  text-decoration: underline;
}

.yutong .div-3 {
  position: relative;
  width: 788px;
  height: 731px;
}

.yutong .layer-wrapper {
  position: absolute;
  height: 731px;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  min-width: 788px;
}

.yutong .group-2 {
  position: absolute;
  width: 68.65%;
  height: 44.75%;
  top: 0;
  left: 12.60%;
}

.yutong .vector-3 {
  position: absolute;
  width: 100%;
  height: 58.90%;
  top: 25.11%;
  left: 0;
}

.yutong .group-3 {
  position: absolute;
  width: 58.79%;
  height: 99.22%;
  top: 0;
  left: 25.03%;
  mix-blend-mode: multiply;
}

.yutong .frame-wrapper {
  position: absolute;
  top: 0;
  left: 134px;
  width: 274px;
  height: 274px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/vector-4.svg);
  background-size: 100% 100%;
}

.yutong .frame-2 {
  display: flex;
  margin-top: -0.8px;
  height: 165px;
  margin-left: -0.1px;
  width: 115.5px;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.yutong .frame-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong .view {
  position: relative;
  width: 66px;
  height: 79px;
  background-image: url(../img/image.png);
  background-size: 100% 100%;
}

.yutong .text-wrapper-7 {
  width: fit-content;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: -0.48px;
  line-height: 33.6px;
  position: relative;
  text-align: center;
}

.yutong .group-4 {
  position: absolute;
  width: 50.70%;
  height: 64.38%;
  top: 35.62%;
  left: 49.30%;
}

.yutong .group-5 {
  position: absolute;
  width: 44.56%;
  height: 64.30%;
  top: 35.62%;
  left: 0;
}

.yutong .vector-4 {
  position: absolute;
  width: 86.85%;
  height: 99.67%;
  top: 0;
  left: 13.15%;
}

.yutong .group-6 {
  position: absolute;
  width: 90.57%;
  height: 69.05%;
  top: 30.95%;
  left: 0;
  mix-blend-mode: multiply;
}

.yutong .frame-4 {
  position: absolute;
  top: 143px;
  left: 0;
  width: 274px;
  height: 274px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/vector-6.svg);
  background-size: 100% 100%;
}

.yutong .frame-5 {
  display: flex;
  margin-top: 0.6px;
  height: 126.05px;
  margin-left: -0.4px;
  width: 115.5px;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.yutong .g {
  position: relative;
  width: 58.5px;
  height: 74.05px;
}

.yutong .path {
  position: absolute;
  width: 49.86%;
  height: 37.96%;
  top: 0;
  left: 25.08%;
}

.yutong .path-2 {
  position: absolute;
  width: 100%;
  height: 96.00%;
  top: 4.00%;
  left: 0;
}

.yutong .text-wrapper-8 {
  width: fit-content;
  margin-left: -7.75px;
  margin-right: -7.75px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: -0.48px;
  line-height: 33.6px;
  white-space: nowrap;
  position: relative;
  text-align: center;
}

.yutong .image {
  width: 100%;
}
.yutong .heading {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}
.yutong .text-wrapper {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Pretendard-Regular", Helvetica;
    font-weight: 400;
    color: var(--x02);
    font-size: 40px;
    letter-spacing: -0.88px;
    line-height: 61.6px;
    white-space: nowrap;
}
.yutong .head-p {
    position: relative;
    width: fit-content;
    font-family: "Pretendard-Regular", Helvetica;
    font-weight: 400;
    color: #111111;
    font-size: 40px;
    letter-spacing: -0.80px;
    line-height: 56.0px;
    white-space: nowrap;
}

.yutong .text-wrapper b,
.yutong .head-p b {
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
}

.yutong-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #eff8f3;
  width: 100%;
}

/* Frame wrapper - centered with max-width constraint */
.yutong-2 .frame-wrapper {
  width: 100%;
  max-width: 1480px;
}

.yutong-2 .yutong-2-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 68px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-2 .div {
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 24px;
  width: 100%;
  padding: 50px 0px;
}

.yutong-2 .image-wrapper {
  position: relative;
  width: 41%;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
}

.yutong-2 .image {
  width: 100%;
  min-width: 400px;
  /* position: absolute;
  top: calc(50.00% - 97px);
  left: calc(50.00% - 305px);
  width: 610px;
  height: 193px;
  aspect-ratio: 3.71;
  object-fit: cover; */
}

.yutong-2 .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 0px 30px 0px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  width: 59%;
}

.yutong-2 .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-2 .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #00b350;
  font-size: 35px;
  letter-spacing: -0.70px;
  line-height: 47.3px;
  white-space: nowrap;
}

.yutong-2 .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-2 .p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32.0px;
}

.yutong-2 .text-wrapper-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32.0px;
}

.yutong-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #ffffff;
  width:100%;
}

.yutong-3 .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-3 .div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-3 .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x-02);
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 56.0px;
  white-space: nowrap;
}

.yutong-3 .div-2 {
  display: inline-flex;
  align-items: flex-start;
  gap: 160px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-3 .div-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 160px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-3 .div-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 24px;
}

.yutong-3 .img-wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #cecece;
  border-radius: 1000px;
  overflow: hidden;
  aspect-ratio: 1;
}

.yutong-3 .tipt {
  position: absolute;
  top: calc(50.00% - 250px);
  left: 0;
  width: 500px;
  height: 500px;
  aspect-ratio: 1.28;
  object-fit: cover;
}

.yutong-3 .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x-02);
  font-size: 25px;
  text-align: center;
  letter-spacing: -0.50px;
  line-height: 33.8px;
}

.yutong-3 .img-wrapper-2 {
  position: relative;
  width: 500px;
  height: 379px;
  background-color: #cecece;
  border-radius: 1000px;
  overflow: hidden;
}

.yutong-3 .img {
  position: absolute;
  top: calc(50.00% - 190px);
  left: calc(50.00% - 250px);
  width: 500px;
  height: 379px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.yutong-3 .tc-wrapper {
  height: 330px;
  border-radius: 80px;
  position: relative;
  width: 500px;
  background-color: #cecece;
  overflow: hidden;
}

.yutong-3 .tc {
  position: absolute;
  top: calc(50.00% - 165px);
  left: calc(50.00% - 250px);
  width: 500px;
  height: 330px;
  aspect-ratio: 2.34;
  object-fit: cover;
}

.yutong-3 .tc-wrapper-2 {
  height: 476px;
  border-radius: 80px;
  position: relative;
  width: 500px;
  background-color: #cecece;
  overflow: hidden;
}

.yutong-3 .tc-2 {
  position: absolute;
  top: calc(50.00% - 238px);
  left: calc(50.00% - 250px);
  width: 500px;
  height: 476px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.yutong-3 .div-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 160px;
  padding: 379px 0px 0px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-3 .tc-wrapper-3 {
  height: 500px;
  border-radius: 30px;
  aspect-ratio: 1;
  position: relative;
  width: 500px;
  background-color: #cecece;
  overflow: hidden;
}

.yutong-3 .tc-3 {
  position: absolute;
  top: calc(50.00% - 250px);
  left: calc(50.00% - 250px);
  width: 500px;
  height: 500px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

/* Make all product images in "천안 하늘그린 주요 농산물" section perfectly circular */
.yutong-3 .img-wrapper,
.yutong-3 .img-wrapper-2,
.yutong-3 .tc-wrapper,
.yutong-3 .tc-wrapper-2,
.yutong-3 .tc-wrapper-3 {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.yutong-3 .img-wrapper-2,
.yutong-3 .tc-wrapper,
.yutong-3 .tc-wrapper-2 {
  height: 500px;
}

.yutong-3 .tipt,
.yutong-3 .img,
.yutong-3 .tc,
.yutong-3 .tc-2,
.yutong-3 .tc-3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Horizontal alignment - match "하늘그린은" section boundaries */
.yutong-3 > .div {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  overflow: visible;
}

.yutong-3 > .div > .div-2 {
  display: flex;
  width: auto;
  max-width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: visible;
}

/* Ensure div-3 and div-5 are positioned relative to container, not viewport */
.yutong-3 .div-3,
.yutong-3 .div-5 {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

/* 천안 하늘그린 주요 농산물: smaller slide distance for balanced animation */
.yutong-3 [data-aos="fade-up-right"] {
  transform: translate3d(-40px, 60px, 0);
}
.yutong-3 [data-aos="fade-up-right"].aos-animate {
  transform: translateZ(0);
}
.yutong-3 [data-aos="fade-up-left"] {
  transform: translate3d(40px, 60px, 0);
}
.yutong-3 [data-aos="fade-up-left"].aos-animate {
  transform: translateZ(0);
}

/* Ensure all image wrappers are contained within their parent */
.yutong-3 .div-4 {
  position: relative;
  overflow: visible;
}

/* Responsive adjustments for 769px-1200px to prevent overflow while keeping desktop layout */
/* Scale everything proportionally based on available viewport width */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Reduce horizontal padding on smaller screens to prevent overflow */
  .yutong-3 {
    padding-left: max(40px, min(220px, calc((100vw - 1480px) / 2)));
    padding-right: max(40px, min(220px, calc((100vw - 1480px) / 2)));
  }
  
  /* Scale images proportionally: scale factor = (viewport - padding) / ideal container (1480px) */
  /* At 1000px viewport: (1000 - 80) / 1480 = 0.62, so 500px * 0.62 = 310px */
  .yutong-3 .img-wrapper,
  .yutong-3 .img-wrapper-2,
  .yutong-3 .tc-wrapper,
  .yutong-3 .tc-wrapper-2,
  .yutong-3 .tc-wrapper-3 {
    width: max(300px, calc(500px * ((100vw - 80px) / 1480px)));
    height: max(300px, calc(500px * ((100vw - 80px) / 1480px)));
  }
  
  /* Fixed gap – keep groups visually balanced */
  .yutong-3 > .div > .div-2 {
    gap: 160px;
  }
  
  .yutong-3 .div-3,
  .yutong-3 .div-5 {
    gap: max(60px, calc(160px * ((100vw - 80px) / 1480px)));
  }
  
  /* Scale div-5 padding-top proportionally */
  .yutong-3 .div-5 {
    padding-top: max(200px, calc(379px * ((100vw - 80px) / 1480px)));
  }
}

.yutong-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 220px;
  position: relative;
  background-color: #f7f7f7;
  width:100%;
}

.yutong-4 .div {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1480px;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-4 .text-wrapper {
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x-02);
  font-size: 40px;
  letter-spacing: -0.80px;
  line-height: 56.0px;
  white-space: nowrap;
  position: relative;
  text-align: center;
}

.yutong-4 .p {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32.0px;
  position: relative;
  text-align: center;
}

.yutong-4 .div-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 68px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-4 .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-4 .div-4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-4 .ellipse {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 12px;
  border: 5px solid;
  border-color: var(--x-01);
}

.yutong-4 .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--n-01);
  font-size: 24px;
  letter-spacing: -0.48px;
  line-height: 37.2px;
  white-space: nowrap;
}

.yutong-4 .yutong-4-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 160px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-4 .div-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  position: relative;
  width: 100%;
  min-width: 0;
}

.yutong-4 .div-6 {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 280 / 292;
  background-color: #797979;
  border-radius: 24px;
  overflow: hidden;
}

.yutong-4 .div-5 .div-6 img,
.yutong-4 .div-5 .thumb-card img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.yutong-4 .tipt {
  position: absolute;
  top: calc(50.00% - 146px);
  left: calc(50.00% - 140px);
  width: 280px;
  height: 292px;
  aspect-ratio: 1.28;
  object-fit: cover;
}

.yutong-4 .div-wrapper {
  display: flex;
  flex-direction: column;
  width: 173px;
  height: 27px;
  align-items: center;
  gap: 22px;
  position: absolute;
  top: calc(50.00% - 14px);
  left: calc(50.00% - 87px);
}

.yutong-4 .text-wrapper-3 {
  align-self: stretch;
  margin-top: -1.00px;
  margin-bottom: -13.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: 40.5px;
  position: relative;
  text-align: center;
}

.yutong-4 .tc {
  position: absolute;
  top: calc(50.00% - 146px);
  left: calc(50.00% - 140px);
  width: 280px;
  height: 292px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.yutong-4 .image {
  top: 0;
  left: 0;
  width: 280px;
  height: 292px;
  aspect-ratio: 1;
  position: absolute;
  object-fit: cover;
}

.yutong-4 .div-wrapper-2 {
  top: calc(50.00% - 20px);
  left: calc(50.00% - 86px);
  display: flex;
  flex-direction: column;
  width: 173px;
  align-items: center;
  gap: 22px;
  position: absolute;
}

.yutong-4 .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.yutong-4 .img {
  top: calc(50.00% - 146px);
  left: calc(50.00% - 140px);
  width: 280px;
  height: 292px;
  aspect-ratio: 1;
  position: absolute;
  object-fit: cover;
}

.yutong-4 .div-wrapper-3 {
  height: 27px;
  top: calc(50.00% - 7px);
  left: calc(50.00% - 87px);
  display: flex;
  flex-direction: column;
  width: 173px;
  align-items: center;
  gap: 22px;
  position: absolute;
}

.yutong-4 .div-7 {
  display: flex;
  width: 1480px;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

/* Tablet: 농산물 cards 3 columns (768px–1080px) */
@media (max-width: 1080px) {
  .yutong-4 .div-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: 농산물 cards 2 columns */
@media (max-width: 768px) {
  .yutong-4 .div-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Desktop container constraints for 판매 제품 소개 section (≥769px) */
@media (min-width: 769px) {
  /* Center the entire section with max-width constraint */
  .yutong-4 {
    padding-left: max(40px, min(220px, calc((100vw - 1480px) / 2)));
    padding-right: max(40px, min(220px, calc((100vw - 1480px) / 2)));
  }
  
  /* Constrain the main content container */
  .yutong-4 > .div {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Constrain div-2 (product grid container) */
  .yutong-4 .div-2 {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Make div-7 responsive instead of fixed 1480px */
  .yutong-4 .div-7 {
    width: 100%;
    max-width: 1480px;
  }
  
  /* Constrain frame-wrapper */
  .yutong-4 .frame-wrapper {
    max-width: 1480px;
    width: 100%;
  }
  
  /* 농산물 cards: grid 5 cols desktop (handled in base); img fill card */
  .yutong-4 .div-5 .div-6 .tipt,
  .yutong-4 .div-5 .thumb-card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  
  .yutong-4 .div-5 .text-wrapper-2,
  .yutong-4 .div-5 .thumb-card__tag {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  
  /* 가공식품 section (div-9) - keep wrapping for now */
  .yutong-4 .div-9 {
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  /* Also ensure div-7 (축산물 section) wraps cards */
  .yutong-4 .div-7 {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  /* Prevent thumb-cards in other sections from stretching - maintain fixed 280px width */
  .yutong-4 .div-7 .thumb-card,
  .yutong-4 .div-9 .thumb-card {
    flex-shrink: 0;
    width: 280px;
  }
  
  /* Ensure div-8 (card wrappers in other sections) maintain size */
  .yutong-4 .div-8 {
    flex-shrink: 0;
  }
}

.yutong-4 .div-8 {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 344px;
  background-color: #797979;
  border-radius: 24px;
  overflow: hidden;
}

.yutong-4 .image-2 {
  top: calc(50.00% - 172px);
  left: calc(50.00% - 365px);
  width: 730px;
  height: 344px;
  aspect-ratio: 1;
  position: absolute;
  object-fit: cover;
}

.yutong-4 .div-wrapper-4 {
  display: flex;
  flex-direction: column;
  width: 247px;
  align-items: center;
  gap: 22px;
  position: absolute;
  top: calc(50.00% - 20px);
  left: calc(50.00% - 123px);
}

.yutong-4 .image-3 {
  top: calc(50.00% - 172px);
  left: calc(50.00% - 364px);
  width: 729px;
  height: 344px;
  aspect-ratio: 0.75;
  position: absolute;
  object-fit: cover;
}

.yutong-4 .div-wrapper-5 {
  display: flex;
  flex-direction: column;
  width: 159px;
  align-items: center;
  gap: 22px;
  position: absolute;
  top: calc(50.00% - 20px);
  left: calc(50.00% - 80px);
}

.yutong-4 .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  margin-left: -57.81px;
  margin-right: -57.81px;
  white-space: nowrap;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.yutong-4 .div-9 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-4 .image-4 {
  top: calc(50.00% - 172px);
  left: calc(50.00% - 240px);
  width: 480px;
  height: 344px;
  aspect-ratio: 0.67;
  position: absolute;
  object-fit: cover;
}

.yutong-4 .text-wrapper-6 {
  position: absolute;
  top: calc(50.00% - 13px);
  left: calc(50.00% - 104px);
  white-space: nowrap;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.yutong-4 .ticaj {
  position: absolute;
  top: calc(50.00% - 172px);
  left: calc(50.00% - 240px);
  width: 480px;
  height: 344px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.yutong-4 .div-wrapper-6 {
  display: flex;
  flex-direction: column;
  width: 214px;
  align-items: center;
  gap: 22px;
  position: absolute;
  top: calc(50.00% - 21px);
  left: calc(50.00% - 107px);
}

.yutong-4 .image-5 {
  top: calc(50.00% - 172px);
  left: calc(50.00% - 240px);
  width: 480px;
  height: 344px;
  aspect-ratio: 1.3;
  position: absolute;
  object-fit: cover;
}

.yutong-4 .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  margin-left: -10.50px;
  margin-right: -10.50px;
  white-space: nowrap;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 40.5px;
}

.yutong-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 68px;
  padding: 120px 220px;
  position: relative;
  background-color: #ffffff;
  width:100%;
}

.yutong-5 .div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.yutong-5 .text-wrapper {
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 56.0px;
  position: relative;
  width: fit-content;
  color: var(--x-02);
  white-space: nowrap;
}

.yutong-5 .div {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.yutong-5 .div-2 {
  display: flex;
  flex-direction: column;
  height: 160px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid;
  border-color: var(--x01);
}

/* 오버 시 */
.vendor-card:hover{
  border: 3px solid #3A7956 !important;
}

/* Desktop container constraints for 온라인 입점사 section (≥769px) */
@media (min-width: 769px) {
  /* Center the entire section with max-width constraint */
  .yutong-5 {
    padding-left: max(40px, min(220px, calc((100vw - 1480px) / 2)));
    padding-right: max(40px, min(220px, calc((100vw - 1480px) / 2)));
  }
  
  /* Constrain the main content container */
  .yutong-5 > .div-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Constrain div (logo cards container) */
  /* Force single row layout - no wrapping on desktop */
  .yutong-5 .div {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
    height: auto; /* Remove height: 100% to prevent vertical stretching */
    justify-content: center;
    flex-wrap: nowrap;
    align-items: stretch; /* Ensure cards stretch to same height */
  }
  
  /* Make cards flexible to fit in single row - keep original design */
  /* Cards maintain fixed height: 160px, width scales proportionally */
  .yutong-5 .div-2,
  .yutong-5 .div-3,
  .yutong-5 .vendor-card {
    flex: 1 1 0;
    min-width: 0; /* Allow cards to shrink proportionally to fit container */
    max-width: 100%;
    height: 160px !important; /* Keep original fixed height - prevent vertical growth */
    min-height: 160px; /* Ensure minimum height */
    max-height: 160px; /* Ensure maximum height - stable height */
  }
  
  /* Ensure images fit within card without causing height growth */
  .yutong-5 .div-2 .image,
  .yutong-5 .div-3 .image,
  .yutong-5 .vendor-card .image,
  .yutong-5 .div-2 .img,
  .yutong-5 .div-3 .img,
  .yutong-5 .vendor-card .img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Preserve logo proportions within card */
    position: relative !important; /* Ensure no absolute positioning */
  }
  
  /* Ensure anchor tags fill the card properly */
  .yutong-5 .vendor-card a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent content from breaking card boundaries */
  }
}

/* .yutong-5 .img-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
} */

.yutong-5 .image {

  object-fit: cover;
}

.yutong-5 .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: var(--x-02);
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 24.8px;
  white-space: nowrap;
}

.yutong-5 .div-3 {
  display: flex;
  flex-direction: column;
  height: 160px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid;
  border-color: #e1e1e1;
}

/* .yutong-5 .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 60px;
}

.yutong-5 .image-2 {
  top: -34px;
  left: 44px;
  width: 174px;
  height: 151px;
  aspect-ratio: 1;
  position: absolute;
  object-fit: cover;
} */

/* .yutong-5 .element {
  position: absolute;
  top: calc(50.00% - 36px);
  left: calc(50.00% - 75px);
  width: 150px;
  height: 74px;
  aspect-ratio: 2.01;
  object-fit: cover;
}

.yutong-5 .image-3 {
  top: 8px;
  left: 81px;
  width: 100px;
  height: 43px;
  aspect-ratio: 2.33;
  position: absolute;
  object-fit: cover;
} */

.yutong-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 40px 220px 120px;
  position: relative;
  background-color: #ffffff;
  width:100%;
}

.yutong-6 .contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 68px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-6 .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-6 .text-wrapper {
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--x-02);
  font-size: 40px;
  letter-spacing: -0.80px;
  line-height: 56.0px;
  white-space: nowrap;
  position: relative;
  text-align: center;
}

.yutong-6 .p {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32.0px;
  position: relative;
  text-align: center;
}

.yutong-6 .div-2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-6 .div-3 {
  display: flex;
  flex-direction: column;
  width: 500px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  margin-left: -558.00px;
}

.yutong-6 .image-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 372px;
  background-color: #e6e6e6;
  border-radius: 24px;
  overflow: hidden;
}

.yutong-6 .image {
  left: calc(50.00% + 88px);
  width: 162px;
  aspect-ratio: 1.61;
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 186px);
  height: 372px;
}

.yutong-6 .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.yutong-6 .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #111111;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: 27.0px;
}

.yutong-6 .div-4 {
  display: flex;
  flex-direction: column;
  width: 500px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  margin-left: -34.00px;
}

.yutong-6 .img {
  left: calc(50.00% - 250px);
  width: 500px;
  aspect-ratio: 1.61;
  position: absolute;
  top: calc(50.00% - 186px);
  height: 372px;
}

.yutong-6 .div-5 {
  display: flex;
  flex-direction: column;
  width: 500px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
}

.yutong-6 .image-2 {
  left: calc(50.00% - 250px);
  width: 500px;
  aspect-ratio: 1.55;
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 186px);
  height: 372px;
}

.yutong-6 .div-6 {
  display: flex;
  flex-direction: column;
  width: 500px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  margin-right: -34.00px;
}

.yutong-6 .image-3 {
  left: calc(50.00% - 250px);
  width: 500px;
  aspect-ratio: 1.6;
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 186px);
  height: 372px;
}

.yutong-6 .div-7 {
  display: flex;
  flex-direction: column;
  width: 500px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  margin-right: -558.00px;
}

.yutong-6 .image-4 {
  position: absolute;
  top: calc(50.00% - 186px);
  left: calc(50.00% - 250px);
  width: 162px;
  height: 372px;
  aspect-ratio: 1.6;
  object-fit: cover;
}


.thumb-card{
  position: relative;
  display: block;
  width: 280px;          /* 필요에 맞게 */
  aspect-ratio: 1 / 1;   /* 정사각형 */
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: var(--thumb) center/cover no-repeat;
}

/* Default state: dark overlay and text visible */
.thumb-card__tag{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  color: #fff;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.2px;

  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
}

.thumb-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.5); /* Reduced opacity for better image visibility */
  opacity: 1;
  transition: opacity .2s ease;
  z-index: 1;
}


.thumb-card::after{
  content:"";
  position:absolute;
  inset:0;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1;
  backdrop-filter: saturate(1.1) contrast(1.05);
}

/* Hover state: remove dark overlay, keep text visible and readable */
.thumb-card:hover::before,
.thumb-card:focus-visible::before{
  opacity: 0;
}

.thumb-card:hover .thumb-card__tag,
.thumb-card:focus-visible .thumb-card__tag{
  opacity: 1; /* Keep text visible on hover */
  transform: translateY(0); /* Keep text in place */
  /* Enhanced readability with text-shadow and background */
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4);
}

.thumb-card:hover::after,
.thumb-card:focus-visible::after{
  opacity: 1;
}

.thumb-card{
  position: relative; 
}

.thumb-card__overlay{
  position: absolute;
  inset: 0;              
  z-index: 10;
  display: block;
  text-decoration: none;
  /* 글자 안 보이게 */
  color: transparent;
}

.yutong-4 .box-wrapper {
    display: flex;
    flex-direction: column;
}
.yutong-4 .tag-wrap {
    white-space: nowrap;
    font-family: "Pretendard-SemiBold", Helvetica;
    font-weight: 600;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    letter-spacing: -0.60px;
    line-height: 40.5px;
    transition: background-color .2s ease, padding .2s ease, border-radius .2s ease;
}

/* Enhanced readability on hover - add semi-transparent background to tag */
.thumb-card:hover .tag-wrap,
.thumb-card:focus-visible .tag-wrap {
    background: rgba(0,0,0,0.35);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
}

.div-wrapper-3.js-modal-open{ cursor:pointer; }
.div-wrapper-3.js-modal-open:focus{ outline: 2px solid rgba(0,0,0,.2); outline-offset: 3px; }

.section1 .school_box {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 48px;
    position: relative;
    align-self: stretch;
    width: 100%;
}

.yutong-4 .div-7,
.yutong-4 .frame-wrapper {
  width: 100%;
  max-width: 1480px;
}


/* 모바일 환경 (1800px 이하) 설정 *****************************************************************/
@media (max-width: 1800px) {
  .section1 {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      padding: 0px 20px;
      position: relative;
  }
  .section1 .p {
    font-size: 16px;
  }
  .section4 {
      padding: 60px 16px;
  }






}
/* 모바일 환경 설정 *****************************************************************/
@media (max-width: 1480px) {
  
  .section4 .table-wrap {
    overflow-x: auto;
  } 





}



@media (max-width: 1380px) {

  .yutong-2 {
      padding: 120px 120px;
  }
}



/* 모바일 환경 (1200px 이하) 설정 END *****************************************************************/


/* 모바일 환경 (1200px 이하) 설정 *****************************************************************/
@media (max-width: 1200px) {

 
  .section1 {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      padding: 0px 16px;
      position: relative;
  }

.section2 {
    padding: 40px 16px 60px;
}
.section2 .school_box2 {
  flex-direction: column;
  padding: 0;
}
.section2 .cb {
  position: unset;
    width: 100%;
}
.section2 .text-wrapper {
    font-size: 24px;
}
.section2 .p {
  font-size: 16px;
}

.section5, .section3 {
    padding: 60px 16px;
}

.yutong-4 .div,
.yutong-4 .div-7,
.yutong-4 .frame-wrapper {
  width: 100%;
}
.school_frame1 .cb,
.school_frame1 .p {
  width: 100%;
  text-align: center;
}

.school_frame1 .cb {
    position: unset;
}
}
/* 모바일 환경 (1200px 이하) 설정 END *****************************************************************/



@media (max-width: 1040px) {

  .yutong-2 .div {
      flex-direction: column;
      background: none;
  }
  .yutong-2 .image {
      width: 100%;
      height: auto;
      min-width: 0;
      object-fit: contain;
  }  
  .yutong-2 .image-wrapper {
      width: 100%;
      height: auto;
      min-width: 0;
  }
  .yutong-2 .div-wrapper {
      width: 100%;
      padding: 0px;
  }
}

/* 1041–1220px: yutong-2 image – remove min-width 400px overflow when 41% < 400px */
@media (min-width: 1041px) and (max-width: 1220px) {
  .yutong-2 .image-wrapper {
    min-width: 0;
  }
  .yutong-2 .image {
    min-width: 0;
    max-width: 100%;
  }
}

/* Section4: info box below image on tablet/small desktop */
@media (max-width: 1024px) {
  .section4 .div-3,
  .section4 .div-12 {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
  }
  .section4 .div-3 .sc_img,
  .section4 .div-12 .sc_img {
    position: relative;
    width: 100%;
    height: 400px;
    flex-shrink: 0;
  }
  .section4 .div-3 .sc_img .CK,
  .section4 .div-12 .sc_img .CK-cm {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .section4 .rectangle {
    display: none;
  }
  .section4 .div-4,
  .section4 .div-13 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    max-width: 100%;
    padding: 32px;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }
}

/* 모바일 환경 (768px 이하) 설정 *****************************************************************/
@media (max-width: 768px) {
  

.section1 .school_box {
      flex-direction: column-reverse;
}
.section1 .div-2 {
    height: 100%;
}
.section1 .tipt {
  display: flex;
  width: 100%;
    height: 100%;
  border-radius: 24px;
  position: unset;
}
.section1 .div-5 {
  width: 34%;
  flex-direction: column;
}
.section1 .container-6 {
    /* background-color: #cfcfcf;  */
    background-color: rgba(207, 207, 207, 0.08);
    border-radius: 10px;
    border: 2px solid;
    border-color: #4a4a4a;
}
.section1 .contents {
    padding: 60px 0px 60px;
}
.section1 .container {
  flex-direction: column;
  align-items: start;
}
.section1 .div-4 {
    flex-direction: column;
}
.section1 .container-3 {
  height: 135px;
  flex:auto;
}
.section5 .div-2 {
    flex-direction: column;
}
.section5 .div-2:nth-child(2) {
    flex-direction: column-reverse;
}
.section5 .div-4 {
    background-color: unset;
}
.section5 .text-wrapper,
.section5 .p {
    text-align: left;
}
.section4 .text-wrapper {
    font-size: 24px;
}
.section5 .div-3 {
  position: unset;
  height: auto;
  background-color: #d9d9d9;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
}
.section5 .CK,
.section5 .div-3 .CK,
.section5 .div-3 .CK-ticam,
.section5 .div-3 .img,
.section5 .div-3 .ti {
  position: unset;
  aspect-ratio: 1.5;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}
/* Section3 mobile (친환경·우수 농산물 작부체계): 1 card per row; 농가관리 between card2 & card3, right of arrow */
.section3 .div-2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto auto auto auto auto;
  align-items: center;
  gap: 0;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  
}
.section3 .div-2 .box-s3 {
  grid-column: 1 / -1;
  justify-self: center;
  width: 280px;
  max-width: 100%;
  min-width: 0;
}
.section3 .div-2 .material-symbols {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  width: 100%;
  padding: 28px 0;
}
.section3 .div-2 .material-symbols:nth-child(4) {
  grid-column: 2;
  grid-row: 4;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 0;
}
.section3 .div-2 .div-4 {
  grid-column: 3;
  grid-row: 4;
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  padding-left: 12px;
  justify-self: start;
  align-self: center;
}
.section3 .div-2 .material-symbols .img {
  transform: rotate(90deg);
}
.section3 .div-2 > .box-s3:nth-child(1) { grid-row: 1; }
.section3 .div-2 > .material-symbols:nth-child(2) { grid-row: 2; }
.section3 .div-2 > .box-s3:nth-child(3) { grid-row: 3; }
.section3 .div-2 > .material-symbols:nth-child(4) { grid-row: 4; }
.section3 .div-2 > .div-4:nth-child(8) { grid-row: 4; }
.section3 .div-2 > .box-s3:nth-child(5) { grid-row: 5; }
.section3 .div-2 > .material-symbols:nth-child(6) { grid-row: 6; }
.section3 .div-2 > .box-s3:nth-child(7) { grid-row: 7; }
/* Card: stretch to same height in row; icon right, text below; text area grows to match */
.section3 .box-s3 {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 12px;
  padding: 16px;
}
.section3 .box-s3 .div-wrapper-2 {
  order: 1;
  align-self: flex-end;
  height: auto;
  min-height: 90px;
  flex-shrink: 0;
}
.section3 .box-s3 .div-3 {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section3 .box-s3 .layer {
  justify-content: flex-end;
  align-items: flex-start;
  width: auto;
  height: 90px;
}
.section3 .box-s3 .vector {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  height: auto !important;
  transform: none !important;
  width: 90px !important;
  height: 90px !important;
  object-fit: contain;
  flex: 0 0 auto;
}
.section3 .box-s3 .text-wrapper-2 {
  text-align: center;
  white-space: normal;
}
.section3 .box-s3 .element,
.section3 .box-s3 .text-wrapper-3 {
  text-align: center;
  white-space: normal;
  width: 100%;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.index .section3 .vector {
  width: 90px !important;
  height: 90px !important;
}
.index .vector {
  position:unset;
  top: 15.80%;
  transform: rotate(-180deg);
  width: 84.20%;
}
.section3 .text-wrapper {
  font-size: 24px;
}
.section3 .div-s3 {
  gap: 30px;
}
.section3 .div-4 {
  top: 669px;
  left: calc(50.00% + 29px);
}
.section3 .material-symbols {
  display: none;   /* arrows removed on mobile */
}

.group_frame,
.group-fr2 {
    padding: 0px 16px;
}
.group_frame .text-wrapper {
    font-size: 28px;
    text-align: center;
    white-space: wrap;
    line-height: 140%;
}
.group_frame .p {
    font-size: 24px;
    white-space:unset;
    line-height: 140%;
    text-align: center;
    width: 100%;
}
.group_frame .div-6 {
  width: 100%;
  padding: 0px;
}
.group-fr2 .div-2 {
  flex-direction: column;
}
.down_wrap {
  width: 100%;
}
.group-fr2 .div-3.down_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.group_frame .text-wrapper-7 {
    font-size: 18px;
    line-height: 135%;
    /* white-space: nowrap; */
}
.group_frame .div-8 {
    width: 100%;
}

.yutong,
.yutong-6 {
    padding: 0px 16px;
    gap:40px;
}
.yutong-2,
.yutong-3,
.yutong-4,
.yutong-5 {
  padding: 60px 16px;
  gap:40px;
}

.yutong .text-wrapper,
.yutong .head-p {
    font-size: 24px;
    line-height: 160%
}
.yutong .text-wrapper-2,
.yutong .p {
    font-size: 20px;
}
.yutong .div-3 {
    width: 100%;
    height: auto;
}
.yutong-2 .div {
  flex-direction: column;
  background: none;
}
.yutong-2 .div-wrapper {
    width: 100%;
    padding: 0px;
}
.yutong-4 .div-5,
.yutong-4 .div-7,
.yutong-4 .div-9 {
  flex-direction: column;
}
.yutong-5 .div {
  flex-direction: column;
}
.yutong .div-wrapper {
  background-color:unset;
  border-radius:unset;
  min-width:unset;
  padding: 0px;
}
.yutong .div-wrapper::before {

    background:unset;
    -webkit-mask: unset;
}
.yutong .div-2 {
    display: block;
    font-size: 24px;
    line-height: 140%;
    white-space: normal;
    text-align: center;
}
.yutong-2 .frame-wrapper,
.yutong-2 .text-wrapper {
  width: 100%;
}
.yutong-2 .text-wrapper {
    white-space: normal;
    font-size: 24px;
    text-align: center;
}

.yutong-3 .div-2,
.yutong-3 .div-3,
.yutong-3 .div-4 {
    width: 100%;
}
.yutong-3 .div-5 {
    width: 100%;
}
.yutong-3 .div-3,
.yutong-3 .div-5 {
    gap: 24px;
    align-items: center;
    flex-direction: column;
}
.yutong-3 .div-4 {
    width: auto;
    min-width: 0;
}
/* Mobile: All circular images must have consistent, readable minimum size */
.yutong-3 .img-wrapper,
.yutong-3 .img-wrapper-2,
.yutong-3 .tc-wrapper,
.yutong-3 .tc-wrapper-2,
.yutong-3 .tc-wrapper-3 {
    width: 100%;
    max-width: 280px;
    min-width: 200px;
    min-height: 200px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    flex-shrink: 0;
}
.yutong-3 .tipt,
.yutong-3 .img,
.yutong-3 .tc, 
.yutong-3 .tc-2,
.yutong-3 .tc-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yutong-3 .div-2 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
}
.yutong-3 .div-5 {
    padding: 0px 0px 0px;
    width: 100%;
}

.yutong-3 .text-wrapper-2 {
    font-size: 16px;
}

.school_frame1 .div-2 {
    position: unset;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.page-top .frame {
    padding: 0px 12px;
}

.yutong-2 .image-wrapper {
    width: 100%;
    height: auto;
}

.yutong-2 .image {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.yutong-2 .text-wrapper-2,
.yutong-2 .p {
    font-size: 16px;
}
.yutong-3 .text-wrapper {
  font-size: 24px;
}
.yutong-3 .text-wrapper-2 {
  font-size: 20px;
}
.yutong-4 .text-wrapper {
  font-size: 24px;
}
.yutong-4 .p,
.yutong-4 .text-wrapper-2  {
  font-size: 18px;
}
.yutong-4 .div-6 {
    width: 100%;
    height: auto;
}
.yutong-4 .frame-wrapper {
    width: 100%;
}
.yutong-4 .tipt,
.yutong-4 .tc, 
.yutong-4 .image,
.yutong-4 .img,
.yutong-4 .image-2,
.yutong-4 .image-3,
.yutong-4 .image-4,
.yutong-4 .image-5,
.yutong-4 .ticaj {
  position: unset;
  aspect-ratio: unset;
    width: 100%;
    height: 100%;
}
.yutong-4 .div-8 {
    width: 100%;
    height: auto;
}
.yutong-5 .text-wrapper {
  font-size: 24px;
}

.yutong-5 .div-3,
.yutong-5 .vendor-card {
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yutong-5 .vendor-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.yutong-5 .vendor-card .image,
.yutong-5 .vendor-card .img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 1;
}
.yutong-5 .div-3 {
  width: 100%;
}
.school_frame1 {
  padding: 0px;
}
.section5 .text-wrapper {
  font-size: 20px;
}
.section5 .p {
  font-size: 16px;
}
.section4 .div-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    /* position: relative; */
    /* align-self: stretch; */
    width: 100%;
    flex: 0 0 auto;
    height: 100%;
}
.section4 .div-3,
.section4 .div-12 {
    display: flex;
    flex-direction: column;
    gap:28px;
    background: none;

    /* position: relative; */
    align-self: stretch;
    width: 100%;
    height: 100%;
    /* height: 500px; */
    /* background-color: #113b27; */
    border-radius: 24px;

}
.section4 .CK,
.section4 .CK-cm {
  width: 100%;
  height: 358px;
    /* position: absolute; */
    /* top: calc(50.00% - 250px);
    left: calc(50.00% - 740px);
    height: 358px; */
    /* width: 1094px; */
    /* height: 500px; */
    /* aspect-ratio: 1.62; */
    object-fit: cover;
}
.section4 .rectangle {
  display: none;
}
.section4 .div-4,
.section4 .div-13  {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 32px;
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.sc_img {
  width: 100%;
  height: 358px;
  border-radius: 24px;
  overflow: hidden;
}

.section4 .text-wrapper-2 {
  font-size: 20px;
  line-height: 120%;
}
.intro_contents {
    gap: 30px;
    padding: 40px 20px;
}

.group_frame .div-7 {
  display: block;
  width: 100%;
}
.group_frame .div-wrapper-3 {
    width: 100%;
    height: 98px;
    padding: 10px;
    margin-left: -2px;
    background-color: #666666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    border-radius: 12px;
}
.group_frame .div-9 {
  gap:0px;
  width: 100%;
    display: flex;
    align-items: end;
    flex-direction: column-reverse;
}
.group_frame .div-10 {
  width: 100%;
}
.group_frame .element-wrapper {
  width: 100%;
}
.group_frame .element {
    font-size: 18px;
    line-height: 135%;
}
.group-fr2 .div {
  font-size: 24px;
  line-height: 140%;
}
.group-fr2 .contents {
  padding: 60px 0px;
}
.group-fr2 .text-wrapper-5 {
  font-size: 18px;
  line-height: 140%;
}
.group-fr2 .p {
  font-size: 16px;
}
.group_frame .div {
    gap: 40px;
}
.group_frame .element {
  width: 100%;
}






}
/* 모바일 환경 (768px 이하) 설정 END ******************************************************************************/
























/* ===== Base ===== */
.category{
  padding: 0;
}
.category__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;      
  width: 1480px;
}

/* 카드 링크 */
.category__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-height: 232px;         /* 카드 높이감 */
  padding: 22px 14px;

  background: #f6f6f6;
  border-radius: 24px;       /* 이미지처럼 라운드 크게 */
  text-decoration: none;
  color: #111;


}

/* 아이콘 크기 */
.category__icon{
  width: 100%;
  max-height: 120px;
  object-fit: contain;
}

/* 텍스트 */
.category__text{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  word-break: keep-all;
}

/* Tablet (769px–900px): div-6 logo overflow fix – flex + max-width, no fixed px */
@media (min-width: 769px) and (max-width: 900px) {
  .group_frame .div-6 {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .group_frame .div-7 {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-width: 0;
  }
  .group_frame .div-8 {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .group_frame .div-wrapper-3 {
    width: 100%;
    max-width: 100%;
  }
  .group_frame .div-9 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    min-width: 0;
  }
  .group_frame .div-10 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .group_frame .element-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .group_frame .g-wrapper {
    flex-shrink: 0;
    width: 110px;
    max-width: 110px;
    height: 110px;
    overflow: hidden;
  }
  .group_frame .g-wrapper img.path {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* 1301px+: group_frame & group-fr2 same fluid padding – align sections, responsive big text */
@media (min-width: 1301px) {
  .group_frame {
    padding-left: max(40px, min(220px, calc((100vw - 1480px) / 2)));
    padding-right: max(40px, min(220px, calc((100vw - 1480px) / 2)));
  }
  .group_frame .contents {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .group_frame .div-6 {
    width: 100%;
    max-width: 100%;
  }
  .group_frame .text-wrapper,
  .group_frame .p {
    max-width: 100%;
    white-space: normal;
  }
  .group_frame .p {
    text-align: center;
  }
  .group-fr2 {
    padding-left: max(40px, min(220px, calc((100vw - 1480px) / 2)));
    padding-right: max(40px, min(220px, calc((100vw - 1480px) / 2)));
  }
  .group-fr2 .contents {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .category__grid {
    width: 100%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 1301px+: same side padding as at 1300px so content does not shrink */
@media (min-width: 1301px) {
  .section2 {
    padding: 40px 20px 120px;
  }
}

@media (max-width: 1300px){
  .section3 {
      padding: 120px 20px;
  }
  .section2 {
      padding: 40px 20px 120px;
  }
  .group_frame .p {
    text-align: center;
      white-space: unset;
      width: 100%;
  }
  .category__grid {
        width: 100%;
  }
.group_frame {
    padding: 0px 20px;
}
.group_frame .div-6 {
        width: 100%;
}
.group-fr2 {
    padding: 120px 20px;
}
.yutong {
    padding: 60px 20px 120px;
}
.yutong-2 {
    padding: 120px 20px;
}










}

/* ===== PC: 5 columns ===== */
@media (min-width: 1201px){
  .category__grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }
  /* PC에서는 wide 처리 불필요(그냥 1칸) */
  .category__item--wide{
    grid-column: auto;
  }
}

/* ===== Mobile/Tablet: 2 columns + last full width ===== */
@media (max-width: 1200px){
  .category{
    padding: 0 14px; /* 모바일 여백 */
  }
  .category__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* 마지막 카드(산업체) 전체폭 */
  .category__item--wide{
    grid-column: 1 / -1; /* 2칸 전체 span */
  }

  /* 모바일에서 카드 높이 조금 더 크게(이미지처럼 여유 있게) */
  .category__card{
    min-height: 150px;
  }
  .category__grid {

      width: 100%;
  }
.category__icon {
  max-height: 80px;
}


}

/* ===== Mobile/Tablet: 2 columns + last full width ===== */
@media (max-width: 768px){
  .category__item:nth-child(3) .category__text {
      font-size: 13px;
  }
  .group-list-container .text {
    font-size: 16px;
  }
.section1 .container-6 {
    padding: 0px 30px;
  }

}