@font-face {
  font-family: 'DigitalNumbers';
  src: url('../css/DigitalNumbers-Regular.woff') format('woff'),
  url('../css/DigitalNumbers-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* popup */
.pc {
  display: block;
}

.mobile {
  display: none;
}

.layer-popup {
  /* position: absolute; */
  width: 400px;
  height: 534px;
  z-index: 99;
  background-color: #fff;
  box-shadow: 2px 3px 10px #555;
  border-radius: 10px;
  height: auto !important;
  overflow: hidden;
}

.layer-popup:nth-child(1) {
  left: 0;
}

.layer-popup img {
  width: 100%;
  height: auto !important;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.layer-popup .show-chk-wrap {
  display: flex;
  padding: 6px 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
}

.show-chk-div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.layer-popup .show-chk-wrap a {
  font-size: 16px;
  color: #505050;
  cursor: pointer;
}

.layer-popup .show-chk-wrap a:hover {
  color: #222;
  font-weight: 600;
  transition: 0.3s;
}

.close-popup {
  box-sizing: border-box;
  padding: 4px 12px;
  border: 1px solid #999;
  border-radius: 4px;
}

.close-popup:hover {
  border: 1px solid #505050;
  background-color:#505050;
  color: #fff !important;
  transition: 0.3s;
}

.popup-space {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 65px;
  left: 10px;
  gap: 10px;
  align-items: start;
  z-index: 100;
}

.page1{

}
.page1 .vimeo-bg{
  position: relative;
  width: 100%;
  height: 80vh;              /* 100vh 대신 80vh */
  overflow: hidden;
  margin: 0;
  background: url("../img/main/main-bg.png") center/cover no-repeat;
}

/* Vimeo iframe 공통: 가운데 정렬 */
.page1 .vimeo-bg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
  pointer-events: none;
}

/* 영상 원본 비율: 20:9 */
@media (min-aspect-ratio: 20/9){
  /* 뷰포트가 영상보다 가로가 넓을 때 → 높이를 기준으로 */
  .page1 .vimeo-bg iframe{
    height: 80vh;                        /* 부모와 동일 */
    width: calc(80vh * 20 / 9);          /* 80vh × (20/9) */
  }
}
@media (max-aspect-ratio: 20/9){
  /* 뷰포트가 영상보다 세로가 긴 경우 → 너비를 기준으로 */
  .page1 .vimeo-bg iframe{
    width: 100vw;
    height: calc(100vw * 9 / 20);        /* 100vw ÷ (20/9) */
  }
}
.page1 .vimeo-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.5); /* 어둡게 (원하면 삭제/수정) */
}
.page1 .vimeo-content{
  position:absolute;
  z-index:1; /* 오버레이 위에 */
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
.page1 .vimeo-content .txt1{
  color: #FFF;
  text-align: center;
  font-family: "Pretendard";
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 111.111% */
  letter-spacing: 0px;
}
.page1 .vimeo-content .txt2{
  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.page2{
  padding: 63px 80px;
}
.page2 .youtube-slide-container{
  margin: 0 auto;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;
}
.page2 .youtube-slide-container .swiper-slide{
  position: relative;
  cursor: pointer;
}
.page2 .youtube-slide-container .swiper-slide img{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  object-fit: cover;
}
.page2 .youtube-slide-container .swiper-slide .title{
  color: #1D1D1D;
  font-family: Pretendard;
  font-size: 27px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 30px 0 10px;
}
.page2 .youtube-slide-container .swiper-slide .desc{
  color: #525252;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
 .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
}
 .swiper-pagination-bullet-active{
  background: #11624A;
  width: 30px;
  border-radius: 50px;
}

.page3 {
  height: 400vh;
  background: transparent;
  display: flex;
  flex-direction: row;
  position: relative;
  background-attachment: scroll !important;
  align-items: start;
  padding: 0 70px 60px;
}

.value-container {
  width: 30%;
  position: sticky;
  top: 13%;
  left: 0;
}
.value-container .value-title{

}
.value-container .value-title .txt1{
  color: #11624A;
  font-family: "Pretendard";
  font-size: 45px;
  font-style: normal;
  font-weight: 800;
  line-height: 50px; /* 111.111% */
  letter-spacing: 0px;
}
.value-container .value-title .txt2{
  color: #303030;
  font-family: "Pretendard";
  font-size: 45px;
  font-style: normal;
  font-weight: 800;
  line-height: 50px;
  letter-spacing: 0px;
}

.word-logo {
  width: 184px;
  vertical-align: sub;
}

.value-content {
  margin-top: 20px;
  color: #1D1D1D;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.04em;
}

.value-wrap {
  margin-top: 75px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.value-wrap>.s32 {
  color: #8F8F8F;
  font-family: "Pretendard";
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 0;
}
.value-wrap>.s32:nth-last-child(1){
  margin-bottom: 0;
}
.value-wrap>.s32.active {
  color: #11624A !important;
  font-family: "Pretendard";
  font-size: 60px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

.active>hr {
  display: block !important;
}

hr {
  width: 60px;
  height: 2px;
  color: #00693E;
  opacity: 1;
}

hr:not([size]) {
  height: 2px;
}

.value-more {
  width: 70%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  right: 70px;
  margin-top: 30px;
}

.value-info {
  width: 100%;
  height: calc(100vh - 160px);
  min-height: 400px;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 40px;
  padding-top: 77px;
  padding-left: 77px;
  position: sticky;
  top: 100px;
  z-index: 10;
  margin-bottom: 10%;
  overflow: hidden;
  align-items: flex-start;
}
.value-info .up{
  color: #FFF;
  font-family: "Pretendard";
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 83.333% */
  letter-spacing: 0;
}
.value-info .down{
  color: #FFF;
  font-family: Pretendard;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.value-info>.w-btn {
  position: static;
  border-radius: 33.5px;
  border: 1px solid #FFF;
  color: #FFF;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 13px 26px;
  display: inline;
}
.value-info>.w-btn svg{
  position: relative;
  top: 2.5px;
}

.value-img {
  width: 30%;
  position: absolute;
  bottom: -5%;
  left: -17%;
  z-index: 11;
}

.value-info:nth-child(2)>.value-img{
  width: 35%;
}
.value-info:first-child>.value-img, .value-info:last-child>.value-img{
  width: 40%;
}

.value-info:first-child {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/main/page3-bg1.png');
}

.value-info:nth-child(2) {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/main/page3-bg2.png');
}

.value-info:nth-child(3) {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/main/page3-bg3.png');
}

.value-info:last-child {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/main/page3-bg4.png');
  opacity: 1 !important;
}
.page4{
  width: 100%;
  padding: 0px 0;
  position: relative;
  height: 320px;
  overflow: hidden;
  margin-top: 90px;
}
.page4 .vimeo-bg{
  position: relative;
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: url("../img/brand/main-vbg.png");
  background-size: cover !important;
  background-position: center center !important;
}
.page4 .vimeo-bg iframe{
  position: absolute;
  inset: 0;
  width: 130%;
  height: 130%;
  top: -15%;
  border: 0;
  display: block;
  pointer-events: none;
}
.page4 .vimeo-overlay{
  position:absolute; inset:0;
}
.page4 .vimeo-content{
  position: absolute;
  z-index: 1;
  width: calc(100% - 140px);
  display: flex;
  justify-content: space-between;
  top: 0;
  left: 70px;
}
.page4 .vimeo-content .marquee-vertical{
  width: 15%;
  height: 100%; /* 보여줄 높이 */
  overflow: hidden;
  position: relative;
}
.page4 .vimeo-content .txt{
  color: #FFF;
  text-align: center;
  font-family: "Pretendard";
  font-size: 60.75px;
  font-style: normal;
  font-weight: 700;
  line-height: 67.325px;
  position: relative;
  top: 100px;
}
.page4 .vimeo-content .num-wrap{
  position: relative;
  top: 100px;
}
.page4 .vimeo-content .num-wrap .dot1{
  font-size: 73px;
  color: #fff;
  font-family: "DigitalNumbers";
  position: absolute;
  z-index: 2;
  top: 63px;
  left: 103px;
}
.page4 .vimeo-content .num-wrap .dot2{
  font-family: "DigitalNumbers";
  font-size: 73px;
  color: #fff;
  position: absolute;
  z-index: 2;
  top: 63px;
  left: 439px;
}
.marquee-inner {
  display: flex;
  flex-direction: column;
  animation: vscroll 60s linear infinite;
}

.marquee-inner img {
  width: 100%;
  margin-bottom: 10px;
}
/* 공통 스케일 값 */
.odometer{
  --digit-h: 140px;                   /* 1칸 높이(여기만 바꾸면 전체가 따라감) */
  --font-scale: .58;                  /* 폰트/높이 비율 */
  --digit-w: calc(var(--digit-h)*.717);  /* 가로폭 비율(86/120) */
  --radius:   calc(var(--digit-h)*.116);  /* 14/120 */
  display:flex;
  flex-direction: row;   /* 가로 방향 */
  flex-wrap: nowrap;     /* 줄바꿈 금지 */
  gap: 12px;             /* 칸 사이 간격 */
  align-items: flex-end; /* 높이 맞춤(선택) */
}

/* 각 자리 */
.odometer .digit{
  flex: 0 0 auto;        /* 크기 줄이거나 늘리지 않음 */
  display: block;        /* inline 영향 제거 */
  position: relative;
  width: var(--digit-w);
  height: var(--digit-h);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: url(../img/index/num-bg.png) no-repeat center/100% 100%;
}

/* 숫자 스트립 */
.odometer .strip{
  position:absolute; left:16%; top:0;
  transition:transform 900ms cubic-bezier(.22,.8,.3,1);
  will-change:transform;
}

/* 각 숫자 한 칸(0~9) */
.odometer .strip span{
  display:block;
  width:100%;
  height: var(--digit-h);
  line-height: var(--digit-h);
  text-align:center;
  font-family: 'DigitalNumbers', ui-monospace, monospace;
  font-weight:400;
  font-size: calc(var(--digit-h) * var(--font-scale));
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  user-select:none;
  position: relative;
  bottom: 2px;
}

@keyframes vscroll{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes xscroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.page5{
  padding: 90px 70px 60px;
  background: #F7F7F7;
}
.page5 .sns-wrap{
  max-width: 1810px;
  margin: 0 auto;
  display: flex;
  gap: 90px;
}
.page5 .item-wrap{
  width: calc(50% - 45px);
  padding: 20px 0 30px;
}
.page5 .item-wrap .title-wrap{
  color: #252525;
  text-align: center;
  font-family: Pretendard;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 166.667% */
  letter-spacing: -1.5px;
}
.page5 .item-wrap .title-wrap img{
  width: 25px;
  position: relative;
  bottom: 3px;
}
.page5 .item-wrap .sns-title{
  color: #878787;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 333.333% */
  letter-spacing: -0.75px;
  margin-bottom: 20px;
}
.page5 .item-wrap.youtube-container{
  border-radius: 20px;
  background: #FFF;
  padding-right: 15px;
  padding-left: 40px;
}
.page5 .item-wrap.youtube-container .youtube-wrap{
  height: 420px;
  overflow-y: scroll;
  padding-right: 18px;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item{
  width: 100%;
  display: flex;
  gap: 20px;
  border-bottom: none;
  padding: 10px 0;
  align-items: center;
  cursor: pointer;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item:nth-last-child(1){
  border-bottom: none;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .thumb{
  width: 30%;
  border-radius: 4.558px;
  background-position: center center !important;
  background-size: cover !important;
  aspect-ratio: 1 / 0.56;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap{
  width: calc(70% - 20px);
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-title{
  color: #252525;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 166.667% */
  letter-spacing: -0.871px;
  display: -webkit-box;            
  -webkit-line-clamp: 2;           
  -webkit-box-orient: vertical;   
  overflow: hidden;                
  text-overflow: ellipsis;
  word-break: keep-all;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .view{
  color: #878787;
  font-family: Pretendard;
  font-size: 12.709px;
  font-style: normal;
  font-weight: 400;
  line-height: 29.028px; /* 333.333% */
  letter-spacing: -0.435px;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .profile-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .profile-wrap .profile{
  width: 24px;
  height: 24px;
  background-position: center center !important;
  background-size: cover !important;
  border-radius: 100%;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-desc{
  color: #878787;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 29.028px; /* 333.333% */
  letter-spacing: -0.4px;
  display: -webkit-box;            
  -webkit-line-clamp: 1;           
  -webkit-box-orient: vertical;   
  overflow: hidden;                
  text-overflow: ellipsis;
  word-break: keep-all;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .view{
  line-height: 1.7;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-tags{
  color: #4e7a3a;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.3px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page5 .item-wrap.insta-container {
}
.page5 .item-wrap.insta-container .insta-slide-container{
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 40px;
}
.page5 .item-wrap.insta-container .insta-slide-container .swiper-slide{
  cursor: pointer;
}
.page5 .item-wrap.insta-container .insta-slide-container img{
  width: 100%;
  margin-bottom: 20px;
}
.page5 .item-wrap.insta-container .insta-slide-container .thumb{
  width: 100%;
  aspect-ratio: 1 / 1.25;
  background-size:  cover !important;
  background-position: center center !important;
  border-radius: 30px;
  margin-bottom: 20px;

}
.page5 .item-wrap.insta-container .insta-slide-container .i-title{
  color: #4E4E4E;
  text-align: center;
  font-family: Pretendard;
  font-size: 16.725px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.page5 .board-container{
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  gap: 90px;
  border-radius: 20px;
  background: #FFF;
  margin-top: 30px;
}
.page5 .board-container .board-wrap{
  width: calc(50% - 45px);
}
.page5 .board-container .board-wrap .title-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}
.page5 .board-container .board-wrap .title-wrap .b-title{
  color: #444;
  font-family: Pretendard;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 166.667% */
  letter-spacing: -1.5px;
}
.page5 .board-container .board-wrap .title-wrap .more{
  color: #717171;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 133.333% */
}
.page5 .board-container .event-container .event-wrap{
  width: 100%;
  display: flex;
  gap: 20px;
}
.page5 .board-container .event-container .event-wrap .item{
  width: 33%;
  cursor: pointer;
}
.page5 .board-container .event-container .event-wrap .item .thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover !important;
  background-position: center center !important;
  margin-bottom: 15px;
}
.page5 .board-container .event-container .event-wrap .item .tit{
  color: #1D1D1D;
  font-family: Pretendard;
  font-size: 20.491px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page5 .board-container .event-container .event-wrap .item .txt{
  color: #1D1D1D;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 153.846% */
  margin-bottom: 4px;
}
.page5 .board-container .event-container .event-wrap .item .date{
  color: #717171;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 222.222% */
}
.page5 .board-container .news-container .news-wrap{
  width: 100%;
}
.page5 .board-container .news-container .news-wrap .item{
  width: 100%;
  display: flex;
  padding: 7px 0 9px;
  align-items: center;
  border-bottom: 1px solid #BDBDBD;
  cursor: pointer;
  justify-content: space-between;
}
.page5 .board-container .news-container .news-wrap .item:nth-child(1){
  border-top: 1px solid #BDBDBD;
}
.page5 .board-container .news-container .news-wrap .item .tit{
  color: #656565;
  font-family: Pretendard;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  width: calc(100% - 80px);
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page5 .board-container .news-container .news-wrap .item .date{
  width: 60px;
  color: #656565;
  text-align: left;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}


@media (max-width: 1500px) {
  .page1 .vimeo-bg iframe{
    width: 110%;
    height: 100%;
  }
  .page4 .vimeo-bg iframe {
    width: 150%;
    height: 150%;
    top: -25%;
  }
  .page4 .vimeo-content .txt {
    font-size: 52.75px;
    line-height: 62.325px;
  }
  .odometer{
    --digit-h: 110px;
  }
  .odometer .strip{
    left: 20%;
  }
  .odometer .strip span{
    font: 400 57px / 117px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 70px;
    top: 36px;
    left: 80px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 70px;
    top: 36px;
    left: 353px;
  }

}
@media (max-width: 1400px) {
  .page2{
    padding: 60px 40px;
  }
  .page3{
    padding: 0 40px;
  }
  .page5{
    padding: 90px 40px 60px;
  }
  .value-more{
    right: 40px;
  }
  .value-wrap {
    margin-top: 40px
  }
  .page5 .board-container,
  .page5 .sns-wrap{
    gap: 60px;
  }
  .page5 .board-container .board-wrap,
  .page5 .item-wrap{
    width: calc(50% - 30px);
  }

}
@media (max-width: 1350px) {
  .page1 .vimeo-bg iframe{
    width: 120%;
    height: 100%;
  }
  .page2 .youtube-slide-container .swiper-slide .title{
    font-size: 25px;
  }
  .page2 .youtube-slide-container .swiper-slide .desc{
    font-size: 16px;
  }
}
@media (max-width: 1300px) {
  .page2 .left-wrap .txt1, .page2 .right-wrap .txt1{
    font-size: 58px;
  }
  .page2 .left-wrap .img {
    width: 70%;
  }
  .page4 .vimeo-bg iframe {
    width: 170%;
    height: 170%;
    top: -35%;
  }
}
@media (max-width: 1280px) {
  .page5 .board-container, .page5 .sns-wrap {
    gap: 30px;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item {
    gap: 15px;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .thumb {
    width: 45%;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap {
    width: calc(55% - 15px);
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-title {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 6px;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-desc {
    font-size: 14px;
    line-height: 20px;
  }
  .page5 {
    padding: 60px 40px 50px;
  }
  .page4 .vimeo-content {
    width: calc(100% - 80px);
    left: 40px;
  }
  .page5 .item-wrap.youtube-container {
    padding-left: 20px;
  }
  .page5 .board-container {
    padding: 40px 20px;
  }
}
@media (max-width: 1250px) {
  .page1 .vimeo-bg iframe{
    width: 130%;
    height: 100%;
  }
  .page4 .vimeo-content .txt{
    font-size: 45.75px;
    line-height: 55.325px;
    top: 95px;
  }
  .odometer{
    --digit-h: 95px;
  }
  .odometer .strip{
    left: 20%;
  }
  .odometer .strip span{
    font: 400 55px / 100px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 60px;
    top: 30px;
    left: 70px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 60px;
    top: 30px;
    left: 311px;
  }
}

@media (max-width: 1200px) {
  .value-wrap>.s32.active{
    font-size: 55px;
  }
  .value-wrap>.s32 {
    font-size: 35px;
    margin-bottom: 10px;
  }
  .value-more{
    width: 65%;
  }
  .value-info{
    padding-top: 60px;
    padding-left: 50px;
  }
  .value-info .up{
    font-size: 55px;
  }
}
@media (max-width: 1150px) {
  .page1 .vimeo-bg iframe{
    width: 150%;
    height: 100%;
  }
  .page4 .vimeo-bg iframe {
    width: 190%;
    height: 190%;
    top: -45%;
  }
  .page4 .vimeo-content .txt {
    font-size: 45.75px;
    line-height: 55.325px;
  }
  .odometer{
    --digit-h: 85px;
  }
  .odometer .strip{
    left: 18%;
  }
  .odometer .strip span{
    font: 400 50px / 92px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 55px;
    top: 26px;
    left: 64px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 55px;
    top: 26px;
    left: 283px;
  }
}

@media(max-width: 1024px) {
  .layer-popup {
    width: 350px;
    height: 474px;
  }
  .page1 .vimeo-bg iframe{
    width: 170%;
    height: 100%;
  }
  .page1 .vimeo-content .txt1{
    font-size: 35px;
  }
  .page4{
    height: 80vh;
  }
  .page4 .vimeo-content .txt{
    order: 1;
    top: 50px;
    font-weight: 700;
  }
  .page4 .vimeo-bg iframe {
    width: 500%;
    height: 300%;
    top: -100%;
    left: -150%;
  }
  .page4 .vimeo-content{
    flex-direction: column;
    width: 100%;
    left: 0;
    height: 100%;
  }
  .page4 .vimeo-content .marquee-vertical{
    width: 100%;
    order: 3;
    bottom: 20px;
    height: auto;
  }
  .marquee-inner{
    flex-direction: row;
    animation: xscroll 10s linear infinite;
    gap: 30px;
  }
  .marquee-inner img {
    width: 28%;
  }
  .page4 .vimeo-content .num-wrap {
    position: relative;
    top: 20px;
    order: 2;
    margin: 0 auto 30px;
  }
  .odometer{
    --digit-h: 115px;
  }
  .odometer .strip{
    left: 17%;
  }
  .odometer .strip span{
    font: 400 68px / 120px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 65px;
    top: 45px;
    left: 84px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 65px;
    top: 45px;
    left: 367px;
  }
}
@media(max-width: 960px) {
  .page1 .vimeo-content .txt1{

  }
  .page3 {
    flex-direction: column;
    gap: 30px !important;
    height: auto;
  }
  .value-container {
    width: 100%;
    top: 15%;
  }

  .value-title, .value-content {
    text-align: center;
  }
  .value-wrap {
    justify-content: center;
    flex-direction: row;
    gap: 24px;
    margin-top: 30px;
  }
  .value-wrap>.s32{
    font-size: 35px !important;
    margin: 0 !important;
  }
  .value-wrap>.s32.active{
    border-bottom: 3px solid #11624A;
  }
  .value-more {
    width: 100%;
    position: static;
  }
  .value-info  {
    top: 47%;
    min-height: auto;
    height: calc(100vh - 300px);
    padding-left: 10%;
    margin-bottom: 0;
  }
  .value-img {
    left: 50%;
    width: 25%;
    bottom: 2%;
  }
  .value-info:first-child>.value-img, .value-info:last-child>.value-img{
    width: 40%;
  }
  .value-info:nth-child(3)>.value-img{
    left: 60%;
  }
  .value-info:nth-child(2)>.value-img{
    width: 35%;
    left: 55%;
  }
  .page5 .board-container, .page5 .sns-wrap{
    flex-direction: column;
  }
  .page5 .board-container .board-wrap, .page5 .item-wrap,
  .page5 .item-wrap.insta-container,
  .page5 .item-wrap.youtube-container{
    width: 100%;
  }
  .page5 .board-container{
    background: none;
    padding: 0;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .thumb {
    width: 40%;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap {
    width: calc(60% - 15px);
  }
}
@media(max-width: 900px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block;
  }
  .layer-popup .show-chk-wrap {
    margin-top: 0;
  }
  .layer-popup .show-chk-wrap a {
    font-size: 14px;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.35px;
  }
  .layer-popup .show-chk-wrap .x-btn {
    padding: 0 15px;
  }
  .page1 .vimeo-bg iframe{
    width: 190%;
    height: 100%;
  }
  .page4 .vimeo-content .num-wrap {
    top: 35px;
  }
  .page4 .vimeo-content .marquee-vertical {
    top: 61px;
    margin-bottom: 20px;
  }
  .marquee-inner img {
    width: 37%;
  }
  .page4 .vimeo-content .marquee-vertical {
    top: 0px;
  }
  .marquee-inner img {
    width: 32%;
  }
}

@media (max-width: 768px) {
  .layer-popup {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 300px;
    height: 384px;
  }
  .page1 .vimeo-bg iframe{
    width: 230%;
    height: 110%;
  }
  .page1 .vimeo-content {
    transform: translateY(calc(-50% + 30px));
  }
  .page1 .vimeo-content .txt1 {
    font-size: 30px;
    line-height: 40px;
  }
  .page1 .vimeo-content .txt2{
    font-size: 16px;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .view,
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-tags{
    font-size: 11px;
  }
  .page2{
    padding: 40px 20px 80px;
  }
  .page3 {
    padding: 0 20px 40px;
  }

  .value-wrap>.s32{
    font-size: 30px !important;
  }
  .value-info {
    padding-top: 50px;
    top: 44%;
    border-radius: 40px;
  }
  .value-info .up {
    font-size: 45px;
  }
  .value-info .down{
    font-size: 20px;
  }
  .page4 .vimeo-bg iframe {
    width: 600%;
    height: 300%;
    top: -100%;
    left: -200%;
  }
  .page4 .vimeo-content .marquee-vertical {
    top: 0px;
  }
  .marquee-inner img {
    width: 40%;
  }
  .page5 .item-wrap.youtube-container{
    padding: 20px 16px;
  }
  .page4{
    margin-top: 60px;
  }
  .odometer{
    --digit-h: 100px;
  }
  .odometer .strip{
    left: 17%;
  }
  .odometer .strip span{
    font: 400 60px / 106px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 60px;
    top: 34px;
    left: 74px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 60px;
    top: 34px;
    left: 326px;
  }
}

@media (max-width: 680px) {
  .page4 .vimeo-bg iframe {
    width: 700%;
    height: 300%;
    top: -100%;
    left: -250%;
  }
}
@media (max-width: 650px) {
  .page1 .vimeo-bg iframe{
    width: 250%;
    height: 130%;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .thumb {
    width: 45%;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap {
    width: calc(55% - 15px);
  }
}
@media (max-width: 600px) {
  .page1 .vimeo-bg iframe{
    width: 280%;
    height: 150%;
  }
  .page4 .vimeo-content .num-wrap {
    margin: 0 auto 40px;
  }
  .marquee-inner img {
    width: 45%;
  }

  .odometer{
    --digit-h: 80px;
  }
  .odometer .strip{
    left: 17%;
  }
  .odometer .strip span{
    font: 400 51px / 90px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 55px;
    top: 22px;
    left: 60px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 55px;
    top: 22px;
    left: 267px;
  }
}

@media (max-width: 580px) {
  .page4 {
    height: 70vh;
  }
  .page4 .vimeo-bg iframe {
    width: 850%;
    height: 288%;
    top: -97%;
    left: -350%;
  }
  .odometer{
    --digit-h: 80px;
  }
  .odometer .strip{
    left: 17%;
  }
  .odometer .strip span{
    font: 400 51px / 90px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 55px;
    top: 22px;
    left: 60px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 55px;
    top: 22px;
    left: 267px;
  }
}
@media (max-width: 550px) {
  .page1 .vimeo-bg iframe{
    width: 350%;
    height: 150%;
  }
}
@media (max-width: 480px) {
  .page1 .vimeo-bg iframe{
    width: 400%;
    height: 150%;
  }
  .page1 .vimeo-content .txt1 {
    font-size: 35px;
    line-height: 45px;
    word-break: keep-all;
    font-family: "Pretendard";
    letter-spacing: 0;
  }
  .page1 .vimeo-content .txt2{
    font-size: 14px;
    line-height: 140%;
    font-weight:500;
  }
  .page2 {
    padding: 55px 20px 80px;
  }
  .page2 .youtube-slide-container{
    padding-bottom: 35px;
  }
  .page2 .youtube-slide-container .swiper-slide .title {
    font-size: 20px;
    margin: 20px 0 10px;
  }
  .page2 .youtube-slide-container .swiper-slide .desc {
    font-size: 14px;
  }
  .value-wrap>.s32{
    font-size: 25px !important;
  }
  .value-info .up {
    font-size: 40px;
  }
  .value-container .value-title .txt1,
  .value-container .value-title .txt2{
    font-size: 40px;
    line-height: 45px;
  }
  .value-container {
    width: 100%;
    top: 18%;
  }
  .value-info {
    padding-top: 20px;
    padding-left: 30px;
    top: 52%;
    gap: 10px;
  }
  .value-info .down {
    font-size: 20px;
    line-height: 30px;
  }
  .value-info>.w-btn {
    font-size: 14px;
    padding: 10px 19px;
    margin-top: 20px;
  }
  .page5 {
    padding: 60px 20px 50px;
  }
  .page5 .board-container .board-wrap .title-wrap .b-title{
    font-size: 25px;
  }
  .page4 {
    height: 505px;
  }
  .page4 .vimeo-content .txt {
    font-size: 42px;
    line-height: 44px;
  }
  .page4 .vimeo-content .marquee-vertical {
    top: 28%;
    height: auto;
    transform: translateY(-50%);
  }
  .marquee-inner img {
    width: 55%;
  }
  .odometer{
    --digit-h: 60px;
    gap: 9px;
  }
  .odometer .strip{
    left: 17%;
  }
  .odometer .strip span{
    font: 400 36px / 64px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 35px;
    top: 21px;
    left: 45px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 35px;
    top: 21px;
    left: 202px;
  }
  .value-info{
    top: 45%;
  }
  .page5 .item-wrap.youtube-container {
    padding: 20px 12px;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .thumb {
    width: 50%;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap {
    width: calc(50% - 15px);
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-title {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 4px;
  }
  .page5 .item-wrap.youtube-container .youtube-wrap .item .info-wrap .y-desc {
    font-size: 12px;
    line-height: 15px;
  }
}
@media (max-width: 400px) {
  .page1 .vimeo-content .txt2{
    font-size: 12px;
  }
  .odometer{
    --digit-h: 55px;
    gap: 9px;
  }
  .odometer .strip{
    left: 17%;
  }
  .odometer .strip span{
    font: 400 35px / 60px 'DigitalNumbers', ui-monospace, monospace;
    bottom: 4px;
  }
  .page4 .vimeo-content .num-wrap .dot1 {
    font-size: 30px;
    top: 23px;
    left: 42px;
  }
  .page4 .vimeo-content .num-wrap .dot2{
    font-size: 30px;
    top: 23px;
    left: 187px;
  }
  .page4 .vimeo-content .marquee-vertical{
    top: 20%;
  }
  .value-info {
    top: 55%;
  }
  .value-info .up {
    font-size: 37px;
  }
  .value-info .down {
    font-size: 18px;
  }
}

/* ===== Figma 디자인 반영 (2026-06): KBL Jump 폰트 + 히어로/누적판매수 타이포 ===== */
@font-face{
    font-family:'KBL Jump';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-5@1.0/KBLJump_EB_ExtendedTTF.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
}
/* ① 히어로 제목 */
.page1 .vimeo-content .txt1{
    font-family:'KBL Jump','Pretendard',sans-serif;
    font-size:31px; line-height:47px; letter-spacing:3.1px; font-weight:400;
}
/* ① 히어로 자막 */
.page1 .vimeo-content .txt2{
    font-family:'Pretendard',sans-serif;
    font-size:18px; font-weight:600; letter-spacing:0;
}
/* ② 된장전골 누적 판매 수 */
.page4 .vimeo-content .txt{
    font-family:'KBL Jump','Pretendard',sans-serif;
    font-size:45px; line-height:61px; letter-spacing:0; font-weight:400;
}
@media(max-width:768px){
    .page1 .vimeo-content .txt1{ font-size:26px; line-height:37px; letter-spacing:0.5px; }
    .page1 .vimeo-content .txt2{ font-size:15px; }
    .page4 .vimeo-content .txt{ font-size:45px; line-height:60px; letter-spacing:0.9px; }
}

/* ===== ③ 브랜드 가치: 전골/온기 2박스 (Figma 디자인) ===== */
.page3{
    height:auto !important;
    min-height:0 !important;
    padding:20px 0 90px !important;
    background:#fff !important;
    display:block !important;
    overflow:visible !important;
}
/* page4 위 큰 여백(원래 스크롤섹션용 margin-top:90px) 제거 → page3 하단 패딩으로만 간격 */
.page4{ margin-top:0 !important; }
.page3 .brand-box-wrap{
    max-width:1810px; width:92%; margin:0 auto;
    display:flex; gap:21px; align-items:stretch;
}
.page3 .brand-box{
    position:relative; flex:1 1 0; min-width:0;
    aspect-ratio:879 / 450; border-radius:32px; overflow:hidden;
}
.page3 .brand-box img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.page3 .brand-box::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(122deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 26%, rgba(0,0,0,.28) 46%, rgba(0,0,0,0) 68%);
}
.page3 .brand-box .b-info{
    position:absolute; top:9%; left:5.5%; z-index:2; color:#fff;
}
.page3 .brand-box .b-title{
    font-family:'KBL Jump','Pretendard',sans-serif;
    font-size:35px; line-height:1; letter-spacing:0; font-weight:400; margin:0;
}
.page3 .brand-box .b-desc{
    font-family:'Pretendard',sans-serif; font-weight:700;
    font-size:14px; line-height:20px; margin:14px 0 0; color:#fff;
}
.page3 .brand-box .b-btn{
    position:absolute; left:5.5%; bottom:9%; z-index:2;
    display:inline-flex; align-items:center; justify-content:space-between;
    width:206px; height:45px; padding:0 22px 0 26px; box-sizing:border-box;
    border:1px solid #fff; border-radius:33.5px;
    color:#fff; font-family:'Pretendard',sans-serif; font-weight:700; font-size:15px;
    text-decoration:none; transition:background .2s ease, color .2s ease;
}
.page3 .brand-box .b-btn .b-arr{
    width:8px; height:8px; flex:0 0 auto; margin-right:2px;
    border-top:2px solid currentColor; border-right:2px solid currentColor;
    transform:rotate(45deg);
}
.page3 .brand-box .b-btn:hover{ background:#fff; color:#222; }
@media(max-width:768px){
    .page2{ padding-bottom:30px !important; }
    /* 위 공백(배너30+page3 24=54) 과 아래 공백(54) 동일하게 */
    .page3{ padding:24px 0 54px !important; }
    /* 박스 화면 꽉 채우기 (전체폭) */
    .page3 .brand-box-wrap{ flex-direction:column; gap:14px; width:100%; }
    .page3 .brand-box{ border-radius:0; flex:0 0 auto; width:100%; }
    .page3 .brand-box .b-info{ top:9%; left:6%; }
    .page3 .brand-box .b-title{ font-size:25px; }
    .page3 .brand-box .b-desc{ font-size:12px; line-height:18px; margin-top:10px; }
    .page3 .brand-box .b-btn{
        left:6%; bottom:9%; width:150px; height:48px;
        padding:0 20px 0 22px; border-radius:24px; font-size:14px;
    }
    .page3 .brand-box .b-btn .b-arr{ width:9px; height:9px; }
}

/* ===== 모바일 page4: 제목 → 음식 → 숫자 순서 (Figma 디자인) ===== */
@media(max-width:1024px){
    .page4 .vimeo-content{ justify-content:center; align-items:center; }
    .page4 .vimeo-content .txt{ order:1; top:0 !important; bottom:auto !important; margin-bottom:34px; }
    .page4 .vimeo-content .marquee-vertical{ order:2; top:0 !important; bottom:auto !important; transform:none !important; margin-bottom:34px; }
    .page4 .vimeo-content .num-wrap{ order:3; top:0 !important; bottom:auto !important; margin:0 auto !important; }
    /* 음식 그릇 크게 (Figma처럼 큰 그릇 가로 스크롤) */
    .page4 .vimeo-content .marquee-inner{ gap:14px !important; align-items:center; }
    .page4 .vimeo-content .marquee-inner img{ width:48% !important; }
}

/* ===== 브랜드 가치 제목 (모바일 전용, Figma) ===== */
.page3 .brand-heading{ display:none; }
@media(max-width:1024px){
    .page3 .brand-heading{ display:block; text-align:center; padding:0 20px 36px; }
    .page3 .brand-heading .bh-title{
        font-family:'Pretendard',sans-serif; font-weight:900;
        font-size:44px; line-height:1.18; color:#303030; margin:0; letter-spacing:-0.5px;
    }
    .page3 .brand-heading .bh-title .g{ color:#11624a; }
    .page3 .brand-heading .bh-desc{
        font-family:'Pretendard',sans-serif; font-weight:600;
        font-size:16px; line-height:24px; letter-spacing:0.4px; color:#1d1d1d; margin:16px 0 0;
    }
}

/* ===== 모바일(폰) page4: 피그마 1000px 기준 vw 변환으로 정확히 일치 ===== */
@media(max-width:480px){
    /* 제목 (KBL Jump) — Figma 90px/1000 = 9vw */
    .page4 .vimeo-content .txt{ font-size:9vw; line-height:12vw; letter-spacing:0.18vw; }
    /* 음식 그릇 — Figma 큰 그릇 ~50vw */
    .page4 .vimeo-content .marquee-inner img{ width:50vw !important; }
    .page4 .vimeo-content .marquee-inner{ gap:2.4vw !important; }
    /* 숫자 계기판 — Figma 번호표 145px/1000 = 14.5vw */
    .odometer{ --digit-h:16vw; gap:1.2vw; }
    .odometer .strip{ left:17%; }
    .odometer .strip span{ font:400 9.6vw/16vw 'DigitalNumbers', ui-monospace, monospace; bottom:0.6vw; }
    /* 쉼표: 숫자 간격(gap 1.2vw)에 맞춰 자릿수 사이로 재계산 */
    .page4 .vimeo-content .num-wrap .dot1{ font-size:9.3vw; top:5.6vw; left:12vw; }
    .page4 .vimeo-content .num-wrap .dot2{ font-size:9.3vw; top:5.6vw; left:50vw; }
}

/* ===== [카운터 정렬 버그 수정 2026-07] =====
   숫자 칸 높이(--digit-h)와 글자 line-height 가 브레이크포인트마다 어긋나
   숫자가 칸 사이에 걸쳐 뒤죽박죽 보이던 문제 수정.
   모든 구간에서 line-height 를 칸 높이와 강제로 일치시켜 정렬을 보장한다.
   (위치 계산은 index.php 에서 % 기반으로 변경 → 리사이즈에도 안 흔들림) */
.odometer .strip span{ line-height: var(--digit-h); }