body {background:#000}
li {list-style:none}
.min-width {
  width:1600px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
* {margin:0;padding:0;box-sizing:border-box}
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height:100%;
}

#smooth-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

#smooth-content {
  will-change: transform;
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section1 {position:relative;}
.section1 video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.visual-tit {color:rgba(255,255,255,.5);font-size:72px;font-weight:700;position: absolute;
  bottom: 15%;left: calc((100vw - 1600px) / 2);text-shadow:0 0 10px rgba(0,0,0,.7);
  position: absolute;
  bottom: 10%;
  left: 10%;
  line-height: 1.3;
  z-index: 2;
}
.char {
  display: inline-block;
  line-height: 1;          /* ✅ 줄간격 조정 */
  font-size: inherit;      /* ✅ 부모와 동일하게 */
  letter-spacing: normal;  /* ✅ 혹시 깨졌으면 초기화 */
  vertical-align: baseline;
}

.section2 {
  background: #000 url('../images/main/main-section2-bg.png') center/cover no-repeat;
  position: relative;color: white;overflow:hidden;z-index: 1;
}
.section2 .min-width {height:100%;  position:relative;padding-top:120px;padding-bottom:120px;}
.left-sec {
  font-size: 52px;
  line-height: 1.3;
  z-index: 2;
  color: #fff; 
  transition: color 0.3s ease;
  font-weight:500;
  word-break:keep-all;
}
.left-sec .char {
color: #5e5e5e;
display: inline-block;
transition: color 0.3s ease;
}
.line {
white-space: nowrap;
}
.card-stack {
  display: flex;
  justify-content: center;
  gap:40px;
  margin-top:70px;
  /* position: relative; 
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: flex-end; */
}

.card {
  width: 450px;
  height: 600px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  padding: 30px;
  border-radius: 25px;
  text-align:center;
  line-height:1.4;
  padding-top:80px;
  transition: all 0.3s ease;
}
.card1 {
  background:url('../images/main/section2-card1.jpg');
  background-size:cover;
      background-position-y: -40px;
}
.card2 {
  background:url('../images/main/section2-card2.jpg');
  background-size:cover;
      background-position-y: -40px;
}
.card3 {
  background:url('../images/main/section2-card3.jpg');
  background-size:cover;
  background-position-y: -80px;
}
.card p {font-size:20px;font-weight:400;margin-bottom:10px;text-shadow:0 0 5px rgba(0,0,0,.6)}
.card div {font-size:33px;font-weight:500;text-shadow:0 0 5px rgba(0,0,0,.3);line-height:1.3}


/* section3 */
.section3 {
  width: 100%;min-height:unset;
  height: 724px;background:url(../images/main/main-section3-bg.jpg);background-size:cover;
  border-radius:0 50px 0 0;z-index: 3;position:relative;
  background-size: 100%;
  background-position: center;
  transition: background-size 0.3s ease;
  align-items:flex-start;
}
.section3 .min-width {margin-top:120px}
.main-tit {background:rgba(255,255,255,.2);color:#fff;font-size:18px;font-weight:300;margin-bottom:35px;border-radius:100px;padding:10px 20px;display:inline-block;}
.tit {color:#fff;font-size:60px;font-weight:600;}
.section3 ul {margin-top:50px}
.section3 li {
  font-size:24px;font-weight:500;color:#b8b8b8;margin:8px;
  transition: color 0.3s ease;
  color: #505050; /* 초기 색상 */
}

/* section4 */
.section4 {
  overflow: hidden;
  background:url(../images/main/main-section4-bg.png);background-size:cover;
  height: 100vh;flex-direction:column;gap:10vh
}
.track-wrapper {
  width: 100%;
  overflow: hidden;
}
.product-track {
  display: flex;
  width: fit-content;
  gap: 90px;
  padding-left:300px
}
.spacer {
  width: calc((100vw - 1900px) / 2); /* ✅ 화면 너비 기준으로 좌측 여백 설정 */
  flex-shrink: 0;
}

.product {
  flex-shrink: 0;
  overflow:hidden;
  color:#fff;
}
.product-img {background:#ddd;border-radius:20px;width:520px; height:400px;box-shadow:0 10px 20px #000;overflow:hidden;}
.product .p-cate {font-size:17px;font-weight:300;margin-top:22px;margin-bottom:5px;padding-left:20px;}
.product p {font-size:30px;font-weight:500;padding-left:20px;word-break:keep-all;}
.product img {}
.dummy-space {
  width: 1000px; /* ✅ 원하는 만큼 늘리기 */
  flex-shrink: 0;
}

/* section4 */
.section5 {min-height:1450px;background:url('../images/main/section5-bg.jpg');background-size:cover;background-position-y: bottom;display:block;}
.section5 .min-width {
  display: flex;
  flex-direction: row;
  align-items:flex-start;
  justify-content:space-between;
  padding-top:70px;
}
.section5 .text {padding-top:80px;}
.section5 .text h2 {font-size:22px;font-weight:700;color:#0a73d6;margin-bottom:20px;}
.section5 .text p {font-size:52px;font-weight:600;color:#ccc;line-height:1.3}

.location {
  background-size: cover;
  background-position: center;
  height: 200px;
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  border-radius: 12px;
  width:880px;
  height:300px;
  border-radius:0 50px 0 0;
  margin:30px 0;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}

.lo1 {background:url('../images/main/main-office1.jpg')}
.lo2 {background:url('../images/main/main-office2.jpg');background-position:center top;background-size:cover;}
.lo3 {background:url('../images/main/main-office3.jpg')}
.lo-info {
  background:#000;height:58px;display:flex;width:100%;gap:30px;
  color:#fff;align-items: center;padding:0 40px
}
.lo-info h3 {font-size:22px;font-weight:500;}
.lo-info p {font-size:18px;font-weight:300;}

@media screen and (max-width:1700px) {
  .visual-tit {font-size:65px;left:70px;}

  .min-width {width:100%;padding-left:70px;padding-right:70px;}


  .tit,
  .section5 .text p {font-size:50px;}
  
}
@media screen and (max-width:1500px) {
  .visual-tit {font-size:60px;left:60px;}

  .min-width {width:100%;padding-left:60px;padding-right:60px;}

  .tit,
  .section5 .text p {font-size:46px;}
  .product .p-cate {margin-bottom:0;}
  .product p {font-size:26px;}

  .section4 {gap:8vh}

  .location {width:800px}
}
@media screen and (max-width:1366px) {
  .lo-info h3 {font-size:55px;}

  .left-sec {font-size:38px;}
  .card {width: 400px;height: 520px;}
  .card div {font-size:25px;}
  .card p {font-size:18px;margin-bottom:5px;}

  .section3 li {font-size:22px;margin:5px;}
  .main-tit {margin-bottom:10px;}
  .section3 ul {margin-top:30px;}

  .tit, .section5 .text p {font-size:38px;}
  .section5 .text h2 {font-size:20px;margin-bottom:12px;}
  .product-img {width:420px;height:300px;padding:20px;}
  .product-img img {max-width:100%;}
  .product-track {gap:50px;}
  .product .p-cate {font-size:16px;}
  .product p {font-size:22px}
  .card1, .card2, .card3 {background-position-y:bottom;}
  .location {width:700px;}
  .lo-info h3 {font-size:19px;}

  .card div {word-break:keep-all}
  .card div br {display:none;}
}

@media screen and (max-width:1280px) {
  .visual-tit {font-size:50px;}
  /* .left-sec {font-size:32px;}
  .card-stack {margin-top:0;gap:200px}
  .card {border-radius: 11px;width: 310px;height: 460px;}
  .card2 {margin-right: 350px;} */
  .main-tit {font-size:16px;}
  .tit, .section5 .text p {font-size:36px;}
  .product .p-cate {font-size:15px;}
  .product p {font-size:18px;}
  .location {width: 680px;height: 280px;}
  .lo-info h3 {font-size:17px;font-weight:600;}
  .lo-info p {font-size:17px;} 
  .product-track {padding-left:0}
}
@media screen and (max-width:1279px) {
  /* .left-sec {color:#fff;position: relative;top: unset;left:unset;text-align:center;margin-top:0;}
  .left-sec br {display:none;}
  .card {opacity:1;transform: translateY(0px) rotate(0deg);}
  .card-stack {gap:20px;flex-direction: row;align-items: center;justify-content: center;margin-top:50px}
  .card2 {margin-right:0;margin-top:0;}
  .card3 {margin-top:0;}
  .section2 .min-width {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .card div {font-weight:500;font-size:21px;} */
  .section3 {height:550px;}
  .product-track {width:100%;gap:20px;}
  .dummy-space {display:none;}
  .product {width: calc(25% - 30px);height: fit-content;}
  .product-img {width: 100%;height: 100%;}
  .spacer {width:0;display:none;}
  .product-track {justify-content:center;}
} 
@media screen and (max-width:1024px) {
  section {min-height:unset;}
  
  .min-width {padding-left:40px;padding-right:40px;}

  .visual-tit {font-size:42px;bottom:40px;}

  .section2 .min-width {padding-top:70px;padding-bottom:70px;}

  .section3 {height:350px;}

  .section5 .text {padding-top:0;}

  .left-sec {font-size:30px;}
  .card-stack {margin-top:40px}
  .card div {font-size:21px;}
  .card p {font-size:16px;}
  .card {padding-top:50px;border-radius:15px;height:400px;}
  
  .product-track {padding-left: 40px;padding-right: 40px;}
  .section3 ul {margin-top:20px;}
  .section3 .min-width {margin-top:70px;}
  .section3 li {font-size:18px;}
  .tit, .section5 .text p {font-size:28px;}

  .section3 {background-size:cover !important}
  .section3 li {color:#b2b2b2;}
  .section3 .spacer {display:none;width:0}

  .section4 {gap:30px; height: auto; min-height: unset; padding-top: 70px;padding-bottom:70px}
  .lo-info h3 {font-size:16px;}
  .lo-info p {font-size:15px;}

  .tit, .section5 .text p br {display:none;}
  .section5 {min-height:1450px;height:auto;}
  .section5 .text h2 {font-size: 17px;margin-bottom: 5px;}
  .section5 .min-width {display:block}
  .section5 .text {margin-top:0;}
  .location {width:100%;background-size:cover;height: 320px;}
  
}

@media screen and (max-width:1023px) {
  .section1 {min-height:auto;height:auto;}
  .section1 video {height:auto;}
  .visual-tit {font-size:22px;left:40px;}
}
@media screen and (max-width:1000px) {
   
}
@media screen and (max-width:768px) {
  .left-sec {font-size:20px;}
  .card-stack {gap:10px;margin-top:30px;}
  .card {height:300px;}
  .card p {font-size:13px;}
  .card div {font-size:15px;}
  .section2 .min-width {padding-top: 40px;padding-bottom:40px;}

  .section3 li {font-size:15px;}
  .section3 ul {margin-top:10px;}

  .section3 .min-width {margin-top:40px;}
  .section3 {height:250px;}

  .section4 {padding-top:40px;padding-bottom:40px;}
  .product p {padding-left:0;}
  .product .p-cate {padding-left:0;margin-top:12px;}
  .product p {font-size:14px;}
  .product .p-cate {font-size:12px;}
  .product-track {padding-left: 20px;padding-right: 20px;}
  .product-img {border-radius:9px;}

  .section5 {min-height: 1250px;}
  .section5 .text p {font-size:22px;}
  .location {height:260px;margin:20px 0;}
  .lo-info {gap:20px;padding-left:20px;}
  .section5 .min-width {padding-top:40px;}
  
  
}
@media screen and (max-width:640px) {
  .min-width {padding-left:20px;padding-right:20px;}
  .card {height:195px;padding-top: 30px;word-break:keep-all;padding:10px;padding-top:30px;}
  .main-tit {font-size:11px;}
  .section3 li {font-size:13px}
  .product-track {gap:10px;}
  .product {width: calc(25% - 10px);}
  .product .p-cate {font-size:10px;margin-top:10px;padding-left:0;}
  .product p {padding-left:0;font-size:12px;word-break:keep-all;}
  .product-img {padding:10px 0;border-radius:10px;}

  .section5 .text h2 {font-size:10px;}
  .tit, .section5 .text p {font-size:18px;}

  .location {height:180px;margin:20px 0;border-radius: 0 30px 0 0;}
  .lo-info {padding-left:20px;gap:20px;height:42px;}
  .lo-info h3 {font-size:13px;}
  .lo-info p {font-size:12px;}
  .section5 {padding-bottom:250px !important;min-height:unset}
  .left-sec {font-size:18px;}
  .card-stack {margin-top:20px;}
  .card {border-radius:10px;}
  .card div,.card p {font-size:12px;}
  .section3 li {margin:1px 5px;}

  .section4 {gap:10px;}
  .visual-tit {left:20px;bottom:20px;font-size:18px;line-height:1.2}
}
@media screen and (max-width:380px) {
  /* .section2, .section3, .section4, .section5 {padding-top:40px;padding-bottom:40px;} */
  .section3 {height:200px;}
  .section3 ul {margin-top:0;}
  .location {height:130px}
}