/* BASIC css start */
/* =====================================
공통 스타일
===================================== */
html, body {
  overflow-x: hidden;
}
html, body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
  }
.title-wrap, .title-wrap2 {padding: clamp(100px, 5vw, 120px) 46px  clamp(30px, 3vw, 60px); max-width: 1920px; width: 100%; margin: 0 auto; }
.main-title {color: #FFFFFF; font-size: clamp(25px, 4vw, 70px);font-weight: 700;}
.middle-title {font-size:clamp(20px,3vw,38px); z-index: 10; color: #ffffff;font-weight:600;margin:0;}
.sub-text {font-size: clamp(14px, 2vw, 24px);color: #ffffff;line-height: 1.4;}

.mob-br {display:none;}
.mob-bbr {display:none;}
.title-wrap sup {font-weight:400;font-size:clamp(0.6em, 1vw, 1em);top: -0.3em;position: relative;}

/* =====================================
  Sec1 
===================================== */

 #sec1,
  #sec1 * {pointer-events: auto !important;}
  #sec1 .hero-slider-pagination {z-index: 10000 !important;}
  #sec1.hero-slider { position: relative; width: 100%; height: 100vh; min-height: 640px; overflow: hidden; background: #000; color: #fff;  z-index: 1; }
  #sec1 .hero-slider-inner { position: relative; width: 100%; height: 100%; }
  #sec1 .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; }
  #sec1 .hero-slide.is-active { opacity: 1; pointer-events: auto; }
  #sec1 .hero-slide.is-leaving { opacity: 0; }
  #sec1 .hero-media,
  #sec1 .hero-media video,
  #sec1 .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #sec1 .bg-yt{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-width:177.78vh; min-height:100vh; border:0; }
  #sec1 .hero-caption { position: absolute; left: 3%; bottom: 25%; z-index: 2; width:100%; }
  #sec1 .hero-caption-line { overflow: hidden; }
  #sec1 .hero-caption-line + .hero-caption-line { margin-top: 5px; }
  #sec1 .hero-caption-line span { display: inline-block; transform: translateY(120%); opacity: 0; transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.7s ease; }
  #sec1 .hero-slide.is-active .hero-caption-line span { transform: translateY(0%); opacity: 1; transition-delay:1s;white-space: nowrap;}
  #sec1 .hero-slide.is-leaving .hero-caption-line span { transform: translateY(120%); opacity: 0; transition-delay:0s;}
  #sec1 .hero-title { font-size: clamp(28px,4vw,70px); line-height: 1.2; font-weight: 700; white-space: nowrap;  font-family: "Helvetica Neue", Helvetica, Arial, system-ui,  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
  #sec1 .hero-sub { font-size: clamp(14px, 2.6vw, 26px); line-height: 1.4; font-weight: 400; }
  #sec1 .hero-link-area { position: absolute; top: 0; bottom: 17%;left: 0;right: 0; z-index: 10001; cursor: pointer; text-decoration: none; display: block; pointer-events: auto; background: transparent;}
  #sec1 .hero-slide:not(.is-active) .hero-link-area { cursor: default;}
  #sec1 .hero-slider-pagination {  position: absolute;  left: 3%;  bottom: 80px;  display: flex;  align-items: center;  gap: 10px;  z-index: 10000 !important;  font-size: clamp(12px, 2.5vw, 16px);  letter-spacing: 0.15em;  text-transform: uppercase;  pointer-events: auto !important;}
  #sec1 .hero-page-current,
  #sec1 .hero-page-total { min-width: 26px; text-align:center; letter-spacing: -0.3px;  font-weight: 600; display: flex; align-items: center; justify-content: center;line-height: 1;height: 16px;}
  #sec1 .hero-progress-bar { position: relative;  width: 150px;  height: 2px;  background: rgba(255,255,255,0.3); overflow: hidden;  display: flex; align-items: center;}
  #sec1 .hero-progress-fill { position: absolute; inset: 0; width: 0%; background: #fff; }
  #sec1 .hero-nav {  border: none;  background: transparent;  color: #fff; cursor: pointer; padding: 0;font-size: 16px; position: relative;z-index: 10000 !important; pointer-events: auto !important;display: flex;align-items: center;justify-content: center;width: 18px;height: 18px;line-height: 1;}
  #sec1 .hero-nav svg {display: block;width: 18px;height: 18px;}
  #sec1 .hero-nav:hover { opacity: 0.7; }
  #sec1 .hero-pause-btn,
  #sec1 .hero-play-btn { display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; background-color: rgba(255,255,255,0.4); border-radius: 50%; border: none; cursor: pointer; padding: 0; position: relative;z-index: 10000 !important;pointer-events: auto !important;line-height: 1;flex-shrink: 0;}
  #sec1 .hero-pause-btn svg, 
  #sec1 .hero-play-btn svg { display: block; margin: 0 auto; padding: 0;}
  #sec1 .hero-pause-btn svg {  width: 6px; height: 6px; }
  #sec1 .hero-play-btn svg {  width: 8px;  height: 8px; }        
  #sec1 .hero-pause-btn:hover,
  #sec1 .hero-play-btn:hover { opacity: 0.7; }
  #sec1 .hero-caption {  position: absolute;  bottom: 25%;  z-index: 2; left: 50%; transform: translateX(-50%); max-width: 1920px; width: 100%; padding-left: 46px; box-sizing: border-box;}
  #sec1 .hero-slider-pagination {  position: absolute;  bottom: 100px;  display: flex;  align-items: center;  gap: 10px;  z-index: 3;  font-size: clamp(12px, 2.5vw, 16px);  letter-spacing: 0.15em;  text-transform: uppercase; left: 50%; transform: translateX(-50%); max-width: 1920px; width: 100%; padding-left: 46px; box-sizing: border-box;}


/* =====================================
  Sec2 
===================================== */

#sec2{--overlay-progress: 0;position:relative;width: 100vw;overflow: hidden;height: 100vh;z-index: 0;overflow:hidden;--gap:1.25rem;--speed:0.3s cubic-bezier(0.25,0.46,0.45,0.94);--closed:14%;--open:44%;--accent:#8A9C92;--overlay-progress:0;background:#07090d;color:#c5c7ce;scroll-snap-align:none;}
#sec2 .bg-video {position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -1;transform: translate(-50%, -50%);object-fit: cover;}
#sec2::after {content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, 0.45); opacity: var(--overlay-progress);z-index: 1;pointer-events: none;}
#sec2 .title-wrap { position: relative; z-index: 2;}
#sec2 .slider{position: relative; width:100%;max-width:1920px;margin:0 auto;padding:0 46px;z-index: 2;}
#sec2 .track{display:flex;align-items:flex-start;justify-content:center;scroll-behavior:smooth;scroll-snap-type:x mandatory;}
#sec2 .track::-webkit-scrollbar{display:none;}
#sec2 .project-card{position:relative;flex:0 0 var(--closed);min-width:140px;max-width:100%;height:clamp(14rem,55vh,35rem);overflow:hidden;cursor:pointer;transition:flex-basis var(--speed),box-shadow var(--speed);}
#sec2 .project-card[active]{flex-basis:var(--open);box-shadow:0 18px 55px rgba(0,0,0,.45);}
#sec2 .project-card:first-child{border-radius:10px 0 0 10px;}
#sec2 .project-card:last-child{border-radius:0 10px 10px 0;}
#sec2 .project-card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.75) saturate(75%);transition:filter .3s,transform var(--speed);}
#sec2 .project-card__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.7rem;padding:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.85) 100%);z-index:2;}
#sec2 .project-card__title{color:#fff;font-size: clamp(18px, 3vw, 30px);line-height:clamp(23px, 2.5vw, 35px);text-align:center;opacity:0.85;transform:translateY(50px);transition:opacity 0.55s ease,transform 0.55s ease,font-size 0.55s ease;}
#sec2 .project-card__thumb,#sec2 .project-card__desc,#sec2 .project-card__btn{margin-top:20px;opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity 0.65s ease,transform 0.65s ease;}
#sec2 .project-card[active] .project-card__content{flex-direction:column;align-items:center;padding:1.2rem 2rem;gap:1.1rem; transition-delay:0.3s;}
#sec2 .project-card[active] .project-card__title{writing-mode:horizontal-tb;transform:translateY(0);text-align:center;opacity:1; transition-delay:0.3s;}
#sec2 .project-card[active] .project-card__title br{display:none; transition-delay:0.3s;}
#sec2 .project-card[active] .project-card__thumb,#sec2 .project-card[active] .project-card__desc,#sec2 .project-card[active] .project-card__btn{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto; transition-delay:0.3s;}
#sec2 .project-card__thumb{width:133px;height:269px;border-radius:.45rem;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.4);}
#sec2 .project-card__desc{color:#ddd;font-size:1rem;line-height:1.4;max-width:20rem;text-align:center;}
#sec2 .project-card__btn{border:none;background:none;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:underline;text-align:center;}



/* =====================================
  Sec3
===================================== */


#sec3 .title-wrap{width: min(1920px, 100%);margin-inline: auto !important;box-sizing: border-box;position: relative;left: auto;right: auto;transform: none;}
#sec3 {position: relative;width: 100vw;height: 100vh; overflow: hidden;--overlay-progress: 0;}
#sec3 .sec3-content {position: relative;height: 100%;}
#sec3 .sec3-inner { position: relative;height: 100%;margin: 0 auto;}
#sec3 .sec3-pad {position: relative;height: 100%;padding: 0 46px;box-sizing: border-box;}
#sec3 {--overlay-progress: 0;position: relative;width: 100vw;height: 100vh; overflow: hidden; }
#sec3 .sec3-content {position: relative;height: 100vh;}
#sec3 .sec3-content .bg-img{position: absolute; inset: 0;width: 100%; height: 100%;object-fit: cover;}
#sec3 .bg-video {position: absolute;width: 100%;height: 100%;z-index: -2;object-fit: cover; object-position: center;}
#sec3 .sec3-bg::after{ content:""; position:absolute;inset:0;background:rgba(0,0,0,.25);opacity: var(--overlay-progress);z-index: -1;}
#sec3 .badges{max-width: 1920px; padding: 0 46px; margin-inline: auto !important; top:0;left: 0;right: 0;margin: 0 auto;display:flex;flex-direction:column;gap:clamp(10px,1vw,20px);align-items:flex-start;}
#sec3 .badges img{width:clamp(150px,16vw,300px);height:auto;object-fit:contain;filter:none;}
#sec3 .sec3-visual{ width: min(80%, 1920px); position: absolute; max-width: 1920px; display: flex;justify-content: center;bottom: 80%; left: 55%;transform: translateX(-55%);}
#sec3 .sec3-visual img { width: 100%; }

@media (max-width: 1480px) {
  #sec3 .sec3-visual{ bottom: 85%;width:85%; left: 50%;transform: translateX(-50%);}
}
@media (max-width: 1280px) {
  #sec3 .sec3-visual{ bottom: 75%;width:90%; left: 50%;transform: translateX(-50%);}
}
@media (max-width: 1080px) {
  #sec3 .sec3-visual{ bottom: 85%;}
}
@media (max-width: 950px) {
  #sec3 .sec3-visual{ bottom: 90%;}
}
@media (max-width: 768px) {
  #sec3 .sec3-visual{ bottom: 70%;left: 45%;transform: translateX(-45%);width:100%;}
  #sec3 .swiper-slide .lineup-link{width:60% !important;}
}
@media (max-width: 650px) {
  #sec3 .sec3-visual{ bottom: 85%; }
}

@media (max-width: 480px) {
  #sec3 .sec3-visual{ bottom: 86%;width:100%;}
}

@media (max-width: 768px) {
  #sec3 .sec3-pad {padding: 0 20px;}
} 

#sec3 .card1 {position: absolute; top: 6vw; background-color:#fff;border-radius: clamp(10px, 3vw, 64px) clamp(10px, 3vw, 64px) 0 0;overflow: hidden;}
#sec3 .card2 {position: absolute; top: 12vw; background:#eef1f2;}
#sec3 .card3 {position: absolute; top: 18vw; background-color:#fff;}

#sec3 .custom-card {width: 100%;}
#sec3 .custom-card .inner {margin:0 auto;max-width:1920px;width:100%;display:grid;grid-template-columns:1fr min(42vw,460px);gap:32px;align-items:center;padding:clamp(10px, 3.2vw, 95px) 46px;max-width:1920px;}
#sec3 .feature-text .chip{display:inline-block;padding:10px 16px;border-radius:999px;background:#233A3F;color:#FFFFFF;letter-spacing:0.2px;opacity:0.5;font-size:12px;font-weight:600;}
#sec3 .feature-text h3{font-size:clamp(20px, 2.5vw, 56px);font-weight:600;color:#233A3F;margin:clamp(10px, 1.5vw, 35px) 0;letter-spacing:-0.8px;}
#sec3 .feature-text p{color:#5D5D5D;font-size:14px;line-height:1.8;margin:0 0 12px;letter-spacing:-1px;}
#sec3 .feature-text .more{font-size:14px;display:inline-block;margin-top:4px;color:#5D5D5D;text-decoration:none;text-underline-offset:3px;letter-spacing:-0.5px;font-weight:600;}
#sec3 .feature-text .more:hover{text-decoration:underline;}
#sec3 .feature-thumb {border-radius:10px;overflow:hidden; background-color: #fefefe; display:flex;align-items:center;justify-content:center;}
#sec3 .feature-thumb .palm-footrest {height:260px;width:50%;object-fit:contain;}
#sec3 .feature-thumb img{width:100%;height:260px;object-fit:cover;display:block;transition:transform 0.5s ease;}
#sec3 .feature-thumb .thumb-video{width:100%;height:260px;object-fit:cover;object-position:center 30%;display:block;transition:transform 0.5s ease;}


/* =========================
  sec3 카드 스타일
========================= */

/* Swiper */
#sec3 .swiper { width:100%; height:100%; }
#sec3 .swiper-wrapper { display:flex; gap:30px; width:fit-content; }
#sec3 .swiper-slide { width:386px; border-radius:10px; font-size:2rem; flex-shrink:0; }
#sec3 .swiper-slide > * { position:relative; z-index:2; }
#sec3 .swiper { --card-w:386px; --card-h:570px; --img-h:320px; --btn-green:#8CA791; --card-radius:22px; --card-w-m:86vw; --card-h-m:550px; --img-h-m:280px; }
#sec3 .swiper-slide { position:relative; overflow:hidden; max-height:555px; height:100%; border-radius:10px; background:rgba(0,0,0,.04); border:1px solid rgba(255,255,255,.30); transition:background-color .22s ease,border-color .22s ease,transform .22s ease; }
#sec3 .swiper-slide::after { content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.12),transparent 65%); z-index:1; pointer-events:none; }
#sec3 .swiper-slide::before { will-change: transform, backdrop-filter;transform: translateZ(0);content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(6px) saturate(115%); backdrop-filter:blur(6px) saturate(115%); z-index:0; pointer-events:none; }
#sec3 .swiper-slide .media-container{aspect-ratio:auto;height:var(--img-h);padding:35px 26px 0;}
#sec3 .swiper-slide .thumb{border-radius:14px;overflow:hidden;background:#f2f2f2;height:100%;position:relative;}
#sec3 .swiper-slide .thumb img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:85%;height:85%;object-fit:contain;object-position:center;transition:opacity .22s ease,transform .22s ease,filter .22s ease;}
#sec3 .swiper-slide .thumb img.is-hover{opacity:0;height:100%;width:100%;object-fit:cover;}
#sec3 .swiper-slide .card-text{max-height:230px;min-height:210px;text-align: left; background:transparent;padding:18px 26px 22px;height:calc(var(--card-h) - var(--img-h));display:flex;flex-direction:column;}
#sec3 .swiper-slide .kicker{font-size:clamp(12px,1.1vw,14px);letter-spacing:.08em;opacity:.78;color:rgba(255,255,255,.78);text-transform:uppercase;}
#sec3 .swiper-slide .title{font-family:inherit;font-size:clamp(25px,2.5vw,38px);font-weight:500;line-height:1.08;margin:5px 0;color:#fff;}
#sec3 .swiper-slide .desc{margin-top:10px;font-size:clamp(12px,1.2vw,14px);line-height:1.45;color:#DEDEDE;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#sec3 .swiper-slide .k-name{font-size:clamp(14px,1.4vw,16px);color:#DEDEDE;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;}
#sec3 .swiper-slide .btn-row{margin-top:auto;display:flex;gap:10px;}
#sec3 .swiper-slide .btn{height:38px;border-radius:px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:2px 14px 0;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;pointer-events:auto;}
#sec3 .swiper-slide .btn.primary{background:var(--btn-green);color:#fff;border:1px solid transparent;min-width:120px;}
#sec3 .swiper-slide .btn.ghost{background:transparent;color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.24);min-width:120px;}
#sec3 .swiper-slide .lineup-link{min-height:555px;background-color: none; height:100%;width:100%;border-radius:var(--card-radius);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-decoration:none;transition:background-color .22s ease,transform .22s ease,border-color .22s ease;}
#sec3 .swiper-slide .lineup-link:hover,#sec4 .swiper-slide.is-active .lineup-link{background:#fff;border-color:rgba(0,0,0,.10);transform:translateY(-2px);}
#sec3 .swiper-slide .lineup-circle{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:border-color .22s ease,color .22s ease;color:#fff;}
#sec3 .swiper-slide .lineup-text{font-size:clamp(12px,1.1vw,14px);letter-spacing:.02em;color:rgba(255,255,255,.75);text-align:center;line-height:1.35;}
#sec3 .swiper-slide .lineup-link:hover .lineup-circle,#sec4 {border-color:rgba(0,0,0,.18);color:#111;}
#sec3 .swiper-slide .lineup-link:hover .lineup-text,#sec4 {color:rgba(0,0,0,.55);}
#sec3 .swiper-slide:last-of-type {background:none;border: 0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;width:250px;}
#sec3 .swiper-slide:last-of-type .swiper-slide:hover{background:transparent;}
#sec3 .swiper-slide:last-of-type .swiper-slide:hover .lineup-circle{background:#fff;border-color:#fff;color:#111;box-shadow:0 12px 32px rgba(0,0,0,.35);}
#sec3 .swiper-slide:last-of-type .swiper-slide:hover .lineup-text{opacity:1;color:rgba(255,255,255,.9) !important;}
#sec3 .swiper-slide:hover {background:#fff;border-color:rgba(0,0,0,.08);transform:translateY(-2px);}
#sec3 .swiper-slide:hover .k-name {color: #5D5D5D;}
#sec3 .swiper-slide:hover .kicker{color:rgba(0,0,0,.55);}
#sec3 .swiper-slide:hover .title{color:#111;}
#sec3 .swiper-slide:hover .desc{color:rgba(0,0,0,.58);}
#sec3 .swiper-slide:hover .thumb img.is-base{opacity:0;}
#sec3 .swiper-slide:hover .thumb img.is-hover{opacity:1;height:100%;width:100%;}
#sec3 .swiper-slide:hover .btn.ghost{color:#111;border-color:rgba(0,0,0,.18);}
#sec3 .swiper-slide:hover .btn.primary{transform:translateY(-1px);}
#sec3 .swiper-slide:last-of-type{ background:none !important; border:0 !important; box-shadow:none !important; }
#sec3 .swiper-slide:last-of-type::before,
#sec3 .swiper-slide:last-of-type::after{ content:none !important; display:none !important; }
#sec3 .swiper-slide:last-of-type:hover{background: none !important;border-color: transparent !important;transform: none !important;box-shadow: none !important;}
#sec3 .swiper-slide:last-of-type .lineup-link,
#sec3 .swiper-slide:last-of-type:hover .lineup-link{background: transparent !important;box-shadow: none !important;}
#sec3 .swiper-slide:last-child .lineup-link:hover .lineup-circle{background:#fff;border-color:#fff;color:#111;box-shadow:0 12px 32px rgba(0,0,0,.35);}
#sec3 .swiper-slide:last-child .lineup-link:hover .lineup-text{opacity:1;color:rgba(255,255,255,.9) !important;}

/* =========================
 Sec5 인스타
========================= */

#sec5 {width:100%;background-color:#FFFFFF;}
#sec5 .main-title {font-size:clamp(20px,3vw,70px);z-index:10;font-weight:600;color:#303030;}
#sec5 .sub-title {color:#303030;font-size:clamp(14px,2vw,40px);font-weight:600;}
#sec5.section {height:100vh;min-height:auto;}
#sec5 {position:relative;display:flex;align-items:start;justify-content:center;width:100%;height:calc(100vh - 60px);min-height:calc(100vh - 60px);box-sizing:border-box;}
#sec5 .sec_inner {max-width:1920px;margin:0 auto;display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;gap:0;box-sizing:border-box;padding: 46px;}
#sec5 .insta-left {flex:0 0 40%;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:start;padding-left:46px;height:100%;box-sizing:border-box;position:relative;}
#sec5 .insta-link-wrap {flex:0 0 60%;min-width:0;display:flex;align-items:center;justify-content:right;text-decoration:none;transition:transform .3s ease;height:100%;box-sizing:border-box;}
#sec5 .insta-grid {--gap:2px;width:auto;max-width:100%;min-width:0;aspect-ratio:1/1;height:calc(100% - 60px);max-height:calc(100% - 60px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);box-sizing:border-box;align-self:center;}
#sec5 .grid-item {aspect-ratio:1/1;overflow:hidden;}
#sec5 .grid-item img {width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease;}
#sec5 .title-wrap {padding:0;}
#sec5 .insta-left #instaTyping {display:inline-block;position:relative;white-space:nowrap;line-height:1.2;}
#sec5 .insta-left #instaTyping::after {content:"";display:inline-block;width:2px;height:1em;margin-left:.14em;transform:translateY(.1em);background:currentColor;animation:instaCaretBlink .8s step-end infinite;opacity:1;}


#sec5 .insta-link-wrap{flex:0 0 auto;width:fit-content;height:100%;align-items:center;justify-content:flex-end;}
#sec5 .insta-grid{height:min(calc(100vh - 60px - 60px),780px);width:auto;aspect-ratio:1/1;max-height:100%;}
#sec5 .insta-left{flex:1 1 auto;min-width:320px;}
@keyframes instaCaretBlink {50%{opacity:0;}}



/* 공통 */

@media (max-width: 1024px) {
  .pc-br {display: none;}
}
@media (max-width: 768px) {
  .title-wrap, .title-wrap2 {padding: clamp(80px, 2.5vw, 100px) 20px  30px;}
  .mob-br {display:block;}
}
@media (max-width: 480px) {
  .mob-bbr{display: block;}
}

/* 섹션 */
@media (min-width: 2200px) {
  #sec3 .sec3-visual img {width:80%;}
  #sec3 .sec3-visual{ left: 60%;}
}
@media (max-width: 1920px) {
  #sec1 .hero-caption {left: 3%;transform: none;max-width: none;width: auto;padding-left: 0;}
  #sec1 .hero-slider-pagination {left: 3%;transform: none;max-width: none;width: auto;padding-left: 0;}
  
  #sec3 .title-wrap{ padding-left:0; padding-right:0; }
  #sec3 .badges{padding-left: 0;paddding-right:0;}
  #sec3 .swiper { --img-h:280px; padding:0 20px;}
  #sec3 .swiper-slide { max-height:510px;}

  #sec5 .insta-grid {display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;aspect-ratio:1/1;height:auto;max-height:calc(100% - 60px);width:100%;}
  #sec5 .grid-item {aspect-ratio:1/1;width:100%;height:100%;}
} 


@media (max-width: 1024px) {
  #sec2{--closed:100%;--open:100%;--gap:.8rem;}
  #sec2 .head{padding:30px 15px 20px;flex-direction:column;align-items:flex-start;gap:1rem;}
  #sec2 .slider{margin:0 auto;}
  #sec2 .track{flex-direction:column;padding-bottom:20px;align-items:center;justify-content:flex-start;}
  #sec2 .project-card{height:auto;min-height:80px;flex:0 0 auto;width:100%;scroll-snap-align:start;border-radius:0;}
  #sec2 .project-card:first-child{border-radius:10px 10px 0 0 !important;}
  #sec2 .project-card:last-child{border-radius:0 0 10px 10px !important;}
  #sec2 .project-card[active]{min-height:300px;transform:none;box-shadow:0 8px 25px rgba(0,0,0,.3);}
  #sec2 .project-card__content{width:100%;transition:opacity .65s ease,transform .65s ease; flex-direction:row;justify-content:start;padding:1rem;align-items:center;gap:1rem;}
  #sec2 .project-card__title{writing-mode:horizontal-tb; font-size:clamp(18px, 2vw, 30px);opacity:1;transform:none;transition:font-size .65s ease,margin .65s ease;}
  #sec2 .project-card__thumb,
  #sec2 .project-card__desc,
  #sec2 .project-card__btn{margin-top:20px;opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity .65s ease,transform .65s ease;}
  #sec2 .project-card[active] .project-card__content{align-items:center;padding:1.5rem;flex-direction:column;}
  #sec2 .project-card[active] .project-card__title{font-size:1.5rem;margin-bottom:1rem;margin-top:2rem;opacity:1;transform:translateY(0);}
  #sec2 .project-card[active] .project-card__thumb{display:block;width:200px;height:267px;border-radius:10px;margin-bottom:1rem;}
  #sec2 .project-card[active] .project-card__desc{font-size:.95rem;max-width:100%;margin-bottom:1rem;}
  #sec2 .project-card[active] .project-card__btn{display:block;align-self:center;width:100%;text-align:center;padding:.7rem;}
  #sec2 .project-card[active] .project-card__thumb,
  #sec2 .project-card[active] .project-card__desc,
  #sec2 .project-card[active] .project-card__btn{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;}
  #sec2 .dots{display:none;}
  #sec2 .controls{width:100%;justify-content:space-between;padding:0 15px 20px;}
  #sec2 .nav-btn{width:2rem;height:2rem;font-size:1.2rem;position:static;transform:none;}

  #sec4 .title-wrap {margin-top: 0!important;}
}


@media (max-width: 768px) {
  #sec1.hero-slider { height:100svh; }
  #sec1.hero-slider { min-height: 520px; }
  #sec1 .hero-caption-line span { line-height:1.3; }
  #sec1 .hero-progress-bar { width: 130px; }
  #sec1 .hero-caption-line + .hero-caption-line { margin-top: 10px; }
  #sec1 .hero-caption {left: 7%;bottom: 20%;}
  #sec1 .hero-slider-pagination {left: 5%;right: 5%;bottom: 10%;justify-content: flex-start;}

  #sec2 .slider{padding:0 20px;}
  #sec2 .project-card {min-height:65px;}
  #sec2 .project-card .project-card__content {padding:1rem 1.1rem;gap:.3rem;}
  #sec2 .project-card .project-card__title {margin-top:.1rem;margin-bottom:.1rem;text-align:left;white-space:nowrap;}
  #sec2 .project-card[active] {min-height:230px;transform:none;box-shadow:0 8px 25px rgba(0,0,0,.3);}
  #sec2 .project-card__content {width:100%;transition:opacity .65s ease,transform .65s ease;flex-direction:row;justify-content:start;padding:1rem;align-items:center;gap:1rem;}
  #sec2 .project-card__title {writing-mode:horizontal-tb;font-size:clamp(18px,2vw,30px);opacity:1;transform:none;transition:font-size .65s ease,margin .65s ease;}
  #sec2 .project-card__thumb,
  #sec2 .project-card__desc,
  #sec2 .project-card__btn {margin-top:20px;opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity .65s ease,transform .65s ease;}
  #sec2 .project-card[active] {min-height:230px;transform:none;box-shadow:0 8px 25px rgba(0,0,0,.3);}
  #sec2 .project-card[active] .project-card__content {align-items:center;padding:1.5rem;flex-direction:column;gap:0;}
  #sec2 .project-card[active] .project-card__title {font-size:1.5rem;margin-bottom:1rem;margin-top:1rem;opacity:1;transform:translateY(0);}
  #sec2 .project-card[active] .project-card__thumb {display:block;width:200px;height:267px;border-radius:10px;margin-bottom:1rem;}
  #sec2 .project-card[active] .project-card__desc {font-size:.95rem;max-width:100%;margin-bottom:1rem;}
  #sec2 .project-card[active] .project-card__btn {display:block;align-self:center;width:100%;text-align:center;padding:.7rem;}
  #sec2 .project-card[active] .project-card__thumb,
  #sec2 .project-card[active] .project-card__desc,
  #sec2 .project-card[active] .project-card__btn {opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;}
  #sec2 .dots {display:none;}
  #sec2 .controls {width:100%;justify-content:space-between;padding:0 15px 20px;}
  #sec2 .nav-btn {width:2rem;height:2rem;font-size:1.2rem;position:static;transform:none;}
  
  #sec3 .swiper {--img-h: 250px; padding:20px 0;}
  #sec3 .swiper-slide { max-height:460px;}
  #sec3 .swiper-slide .card-text{max-height:180px;}
  #sec3 .feature-thumb .palm-footrest {height:190px;width:100%;}
  #sec3 .container {height:560px;}
  #sec3 .custom-card .inner{display:flex;flex-direction:column-reverse;gap:18px;width:100%;gap:32px;align-items:center;padding:40px 20px 40px 20px;}
  #sec3 .feature-thumb img,
  #sec3 .feature-thumb .thumb-video{height:190px;}
  #sec3 .feature-thumb{width:100%;}
  #sec3 .feature-text{width:100%;}
  #sec3 .feature-text .chip{padding:4px 10px;}
  #sec3 .feature-text p{line-height:1.4;}

  #sec3 .media-container{height:var(--img-h-m);padding:18px 18px 0;}
  #sec3 .card-text{padding:14px 18px 18px;height:calc(var(--card-h-m) - var(--img-h-m));}
  #sec3 .btn{min-width:0;flex:1;}
  #sec3 .btn-row{gap:8px;}

  #sec5 .sec_inner {padding:gap:20px !important;}
  #sec5.section {height: 100svh !important; padding:40px 0;}

}



/* 섹션3 관련 */
@media (max-width: 1280px) {
  #sec3 .card1 {top: 12vw; }
  #sec3 .card2 {top: 18vw; }
  #sec3 .card3 {top: 24vw; }
}

@media (max-width: 768px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 43vw; }
  #sec3 .card3 {top: 68vw; }
}

@media (max-width: 620px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 48vw; }
  #sec3 .card3 {top: 80vw; }
}
@media (max-width: 540px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 52vw; }
  #sec3 .card3 {top: 88vw; }
}


@media (max-width: 490px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 55vw; }
  #sec3 .card3 {top: 94vw; }
}
@media (max-width: 460px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 56vw; }
  #sec3 .card3 {top: 105vw; }
}

@media (max-width: 430px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 60vw; }
  #sec3 .card3 {top: 115vw; }
}

@media (max-width: 400px) {
  #sec3 .card1 {top: 20vw; }
  #sec3 .card2 {top: 68vw; }
  #sec3 .card3 {top: 125vw; }
}



/* 섹션5 관련 */
@media (max-width:1400px){
  #sec5 .insta-left {flex:0 0 30%;}
  #sec5 .insta-link-wrap {flex:0 0 70%;}
}
@media (max-width:1080px){
  #sec5 {height:calc(100svh - 50px);min-height:calc(100svh - 50px);padding:120px 0 0;}
  #sec5 .sec_inner {flex-direction:column;align-items:flex-start;justify-content:flex-start;height:100%;gap:0;}
  #sec5 .insta-left {width:100%;flex:0 0 auto;padding-left:0;padding-right:0;height:auto;align-items:flex-start;}
  #sec5 .insta-link-wrap {flex:0 0 auto;width:100%;padding:0 70px;height:auto;justify-content:flex-start;align-items:flex-start;align-self:flex-start;}
  #sec5 .insta-grid {width:100%;max-width:100%;min-width:auto;height:auto;max-height:100%;}
  #sec5 .sec_inner {padding:0 20px;gap:60px;}
  #sec5 .insta-link-wrap {padding:0;}
  #sec5 {padding:80px 0 0;}
  #sec5 .insta-left #instaTyping {margin:0;}
  #sec5.section {height: 120svh;}
  #sec5 .insta-left {padding-left:0;}
}



#footer {z-index:10;position:relative



/* BASIC css end */