@charset "utf-8";

/* ==========================================================
   메인 페이지 — mexus.kr 원본 layout.css / responsive.css 수치 기준
   원본 body 는 배경색이 없다(=흰색). 어두운 영역은 섹션이 각자 갖는다.
   ========================================================== */

/* ==========================================================
   공통 : View More 링크
   ========================================================== */
.link-more{
  display:inline-flex;align-items:center;width:fit-content;gap:var(--sp-30);
  font-family:var(--font-display);
  font-size:var(--fs-16);font-weight:600;color:var(--color-black);
}
.link-more__icon{
  display:inline-block;
  width:clamp(30px, calc(40 / var(--inner) * 100vw), 40px);
  height:clamp(30px, calc(40 / var(--inner) * 100vw), 40px);
  background:url("https://mexus.kr/images/main/m-arrow-bk.png") 50% 50% / contain no-repeat;
  transition:all .2s ease-in-out;
}
.link-more:hover .link-more__icon{
  transform:translateX(10px);
  background-image:url("https://mexus.kr/images/main/m-arrow-on.png");
}
/* 어두운 배경 위 */
.link-more--light{color:#fff;}
.link-more--light .link-more__icon{background-image:url("https://mexus.kr/images/main/m-arrow.png");}

/* ==========================================================
   1. HERO (.main-visual)
   ========================================================== */
.hero{position:relative;height:100vh;overflow:hidden;}
.hero__video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;background-color:#000;opacity:.3;}
.hero__caption{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:30;width:100%;max-width:1500px;padding:0 var(--contain-x);color:#fff;
}
.hero__title{
  margin-bottom:var(--sp-20);
  font-family:var(--font-display);
  font-size:clamp(25px, calc(64 / var(--inner) * 100vw), 64px);
  font-weight:800;line-height:1.25em;letter-spacing:-.03em;
  text-shadow:0 0 8px rgba(0,0,0,.16);
}
.hero__subtitle{
  font-size:clamp(15px, calc(20 / var(--inner) * 100vw), 20px);
  font-weight:700;line-height:1.2em;letter-spacing:-.03em;
  text-shadow:0 0 8px rgba(0,0,0,.16);
}
/* 진입 애니메이션 */
.hero__caption p{opacity:0;transform:translateX(20px);transition:.8s;}
.hero--active .hero__caption p{opacity:1;transform:translateX(0);}
.hero--active .hero__title{transition-delay:.4s;}
.hero--active .hero__subtitle{transition-delay:.6s;}

/* ==========================================================
   2. Business Area (.main-sec2)
   ========================================================== */
.business{background:#fff;}
.business__wrap{
  position:relative;
  width:100%;max-width:1630px;margin-left:auto;
  padding-left:var(--contain-x);
  font-family:var(--font-display);
}
.business__inner{display:flex;align-items:flex-end;height:100vh;}

.business__text{
  display:flex;flex-direction:column;justify-content:center;
  width:45.784%;height:100%;
}
.business__title{
  font-family:var(--font-display);
  font-size:clamp(24px, calc(72 / var(--inner) * 100vw), 72px);
  font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--color-black);
}

.business__tabs{display:flex;margin:var(--sp-80) 0 var(--sp-35);}
.business__tab{
  position:relative;padding-right:30px;
  font-family:inherit;
  font-size:var(--fs-20);font-weight:700;color:#ccc;line-height:1.2em;cursor:pointer;
}
.business__tab::after{
  content:"";position:absolute;top:50%;right:15px;transform:translateY(-50%);
  width:1px;height:16px;background:#ddd;
}
.business__tab:last-child::after{display:none;}
.business__tab--active{
  font-size:var(--fs-22);
  background:linear-gradient(90deg,#006BB6 0%,#00AEE6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.business__heading{
  margin-bottom:var(--sp-50);
  font-size:var(--fs-48);font-weight:700;color:var(--color-black);
  line-height:1.33em;letter-spacing:-.03em;
}
.business__heading em{font-style:normal;font-weight:400;}

.business__visual{flex:1;min-width:0;}
.business__visual img{width:100%;}

.business__nav{
  position:absolute;bottom:var(--sp-120);z-index:5;
  display:flex;align-items:center;gap:var(--sp-15);
}
.business__nav-btn{
  flex-shrink:0;padding:0;border:0;
  width:clamp(30px, calc(64 / var(--inner) * 100vw), 64px);
  height:clamp(30px, calc(64 / var(--inner) * 100vw), 64px);
  background-color:transparent;background-size:contain;
  background-position:50% 50%;background-repeat:no-repeat;cursor:pointer;
}
.business__nav-btn--prev{background-image:url("https://mexus.kr/images/main/sec2-prev.png");}
.business__nav-btn--next{background-image:url("https://mexus.kr/images/main/sec2-next.png");}
.business__nav-btn--prev:hover{background-image:url("https://mexus.kr/images/main/sec2-prev-on.png");}
.business__nav-btn--next:hover{background-image:url("https://mexus.kr/images/main/sec2-next-on.png");}

/* ==========================================================
   3. Our Product (.main-sec3)
   ========================================================== */
.products{
  padding:var(--sp-120) 0;
  background:url("https://mexus.kr/images/main/sec3bg.png") 50% 50% / cover no-repeat;
}
.products__header{
  display:flex;justify-content:space-between;gap:var(--sp-40);
  margin-bottom:var(--sp-100);color:#fff;
}
.products__title{
  font-family:var(--font-display);
  font-size:var(--fs-70);font-weight:700;line-height:1;
}
.products__desc{font-size:var(--fs-18);line-height:1.67em;}

.products__slider-wrap{position:relative;width:100%;max-width:1920px;margin:0 auto;}
.products__swiper .swiper-slide{padding:0 var(--sp-40);height:auto;}
/* 원본 slick centerPadding: 420 / 330(≤1600) / 100(≤1024) / 0(≤700) */
.products__swiper .swiper-slide{width:calc(100% - 840px);}

.product-card{
  height:100%;padding:var(--sp-60);
  background:rgba(0,0,0,.2);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.2);border-radius:24px;
}
.product-card__inner{display:flex;gap:var(--sp-60);}
.product-card__text{flex:1;min-width:0;}
.product-card__header{display:flex;align-items:center;gap:var(--sp-30);margin-bottom:var(--sp-35);}
.product-card__title{
  font-family:var(--font-display);
  font-size:var(--fs-32);font-weight:700;color:#fff;
}
.product-card__tabs{display:flex;align-items:center;gap:5px;}
.product-card__tab{
  height:30px;padding:0 20px;border-radius:40px;
  display:inline-flex;align-items:center;cursor:pointer;
  font-family:var(--font-display);
  font-size:var(--fs-14);font-weight:600;transition:all .3s;
  background-color:transparent;border:1px solid rgba(255,255,255,.5);color:rgba(255,255,255,.5);
}
.product-card__tab--active{background-color:#fff;border-color:#fff;color:var(--color-black);}
.product-card__desc{
  margin-bottom:var(--sp-50);
  font-size:var(--fs-18);line-height:1.56em;color:rgba(255,255,255,.7);
}
.product-card__image{width:50%;flex:none;}
.product-card__thumb{position:relative;padding-bottom:79%;overflow:hidden;}
.product-card__thumb img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}

.products__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:20px;height:36px;padding:0;border:0;font-size:0;cursor:pointer;
  background-color:transparent;background-size:contain;
  background-position:50% 50%;background-repeat:no-repeat;
  opacity:.8;transition:opacity .3s;
}
.products__nav:hover{opacity:1;}
.products__nav--prev{left:21.2%;background-image:url("https://mexus.kr/images/main/sec3-prev.png");}
.products__nav--next{right:21.2%;background-image:url("https://mexus.kr/images/main/sec3-next.png");}

/* ==========================================================
   4. Our Company (.main-sec4)
   ========================================================== */
.about{
  position:relative;padding:0 0 var(--sp-120);
  background:url("https://mexus.kr/images/main/sec4bg.jpg") 50% 50% / cover no-repeat;
}
.about__inner{position:relative;}
.about__bg-text{
  position:absolute;top:-95px;left:5px;z-index:1;
  font-family:var(--font-display);
  font-size:var(--fs-150);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:rgba(255,255,255,.1);
}
.about__cont{position:relative;z-index:2;margin-top:200px;}
.about__title{
  font-family:var(--font-display);
  font-size:var(--fs-70);font-weight:700;color:#fff;line-height:1em;
}
.about__desc{margin:var(--sp-60) 0;font-size:var(--fs-18);line-height:1.67em;color:#fff;}

.about__stats{
  position:relative;z-index:2;margin-top:var(--sp-80);
  display:flex;align-items:center;justify-content:center;gap:var(--sp-60);
  font-family:var(--font-display);
}
.stat{position:relative;width:33.3333%;}
.stat::after{
  content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:1px;height:100px;background-color:rgba(255,255,255,.2);
}
.stat:last-child::after{display:none;}
.stat__label{
  margin-bottom:var(--sp-30);
  font-size:var(--fs-24);font-weight:500;color:rgba(255,255,255,.7);text-align:center;
}
.stat__value{font-size:var(--fs-80);font-weight:700;color:#fff;line-height:1;text-align:center;}
.stat__value--cyan{text-shadow:0 0 30px #00aee6;}
.stat__value--blue{text-shadow:0 0 30px #006bb6;}
.stat__value--purple{text-shadow:0 0 30px #8534cc;}

/* ==========================================================
   Responsive — 원본 responsive.css
   ========================================================== */
@media (max-width:1600px){
  .products__swiper .swiper-slide{width:calc(100% - 660px);}
}

@media (min-width:1024px) and (max-width:1600px){
  .business__wrap{max-width:1920px;margin:0 auto;}
  .business__text{flex:1;width:auto;}
  .business__inner{align-items:center;height:70vh;}
}

@media (max-width:1024px){
  .products__swiper .swiper-slide{width:calc(100% - 200px);}
  .business__tabs,
  .business__inner{padding-left:var(--contain-x);}
  .business__tabs{margin-bottom:30px;}
  .business__inner{height:auto;align-items:center;}
  .business__heading{margin:0 0 var(--sp-60);}
  .products__nav--prev{left:30px;}
  .products__nav--next{right:30px;}
  .about__bg-text{top:-45px;}
}

@media (max-width:700px){
  .products__swiper .swiper-slide{width:100%;}
}

@media (max-width:640px){
  .hero{height:80vh;}
  .hero br{display:none;}

  .business{padding:50px 0;}
  .business__inner{display:block;padding-left:var(--contain-x);padding-right:var(--contain-x);}
  .business__tabs{padding-left:var(--contain-x);padding-right:var(--contain-x);}
  .business__tab,
  .business__tab--active{font-size:12px;padding-right:0;text-align:left;}
  .business__tab::after{display:none;}
  .business__text{width:100%;margin-bottom:30px;}
  .business__nav{position:relative;bottom:auto;margin-top:15px;}

  .products{padding:50px 0;}
  .products__header{display:block;}
  .products__desc{margin-top:15px;}
  .products__desc br{display:none;}
  .product-card__inner{flex-direction:column;}
  .product-card__image{width:100%;}
  .products__nav{height:25px;}
  .products__nav--prev{left:15px;}
  .products__nav--next{right:15px;}

  .about{padding:0 0 50px;}
  .about__cont{margin-top:50px;}
  .about__bg-text{top:-25px;}
  .about__desc br{display:none;}
  .about__stats{display:block;margin-top:0;}
  .stat{width:100%;padding:30px 0;}
  .stat::after{display:none;}
}