@charset "utf-8";

:root{
  --space-x: clamp(16px, 5vw, 50px);
  --radius-xl: 32px;
  --vh: 100dvh;
  --gnb-color: #080808;
  --burger-bg: transparent;
  --burger-brd-light: rgba(0,0,0,.15);
  --burger-brd-dark:  rgba(255,255,255,.35);
}

/* 다크 테마 구간 위에 헤더가 있을 때 */
html[data-active-theme="dark"]{--gnb-color: white;}

/* GNB 링크/아이콘은 공통으로 currentColor 사용 */
#gnb .gnb_1da{color: var(--gnb-color); transition: color .2s ease;}
#gnb .gnb_menu_btn{color: var(--gnb-color); background: var(--burger-bg); border-radius: 10px;}
html[data-active-theme="dark"] #gnb .gnb_menu_btn{border-color: var(--burger-brd-dark);}

/* Font Awesome 아이콘이 상속색을 따르도록(보통 기본임, 안전용) */
#gnb .gnb_menu_btn i{ color: currentColor;}
body:has(.index) #container{margin-top: 0;}
body:has(.index) #container_wr{margin: 0; width: 100%;}

/*동영상부분->비주얼슬라이드로 변경*/
.index{margin-top: clamp(80px, 12vw, 200px); padding: 0 var(--space-x) 0; word-break: keep-all;}
.main_contain1{position: relative; height: var(--vh); overflow: hidden; background: #000;}
.main_contain1 .blue24{color:#3814FF; font-size: clamp(12px, 2vw, 24px); text-align:center; letter-spacing: clamp(6px, 1vw, 13px);line-height:1; margin-bottom: clamp(10px, 1.5vw, 16px);}
.main_contain1 .white80{font-size: clamp(28px, 7vw, 80px);font-family: 'eco700'; color:#fff;}
.main_contain1.en .white80{font-size: 70px;}
.main_contain1 {position: relative;overflow: hidden;}
.slideshow{position:absolute; inset:0; z-index:0;}
.slideshow img{position:absolute; inset:0;width:100%; height:100%; object-fit:cover;opacity:0; transition: opacity 1s ease-in-out;will-change: opacity;}
.slideshow img.active{opacity:0.7;}
.main_contain1 .text{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; text-align: center;}
.main_contain1 .text .blue24,.main_contain1 .text .white80 span{display: block; opacity: 0; transform: translateY(30px); animation: fadeUp 1s ease forwards;}
.main_contain1 .text .blue24{animation-delay: 0.2s;}
.main_contain1 .text .white80 span:nth-child(1){animation-delay: 0.6s;}
.main_contain1 .text .white80 span:nth-child(2){animation-delay: 1.0s;}
.main_contain1 .text .white80 span:nth-child(3){animation-delay: 1.4s;}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*공통*/
.index .blue18{color:#3814FF; font-family:'eco700'; line-height:1; margin-bottom: clamp(12px, 2vw, 24px);}
.index .black52{color:#000; font-size: clamp(20px, 5vw, 46px); line-height: 1.3; font-family:'eco700'; margin-bottom: clamp(24px, 5vw, 52px);}

/*후위아*/
/* 레이아웃 */
.main_contain2 .flex{display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 14px); perspective:1200px;}
@media (max-width: 840px){.main_contain2 .flex{ grid-template-columns: 1fr; }}
.main_contain2 .card{width: 100%; height: clamp(320px, 60vw, 680px); border-radius: var(--radius-xl); overflow: hidden; position: relative; will-change: transform;}
.main_contain2 .card .flip{height:100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.2,1);}
.main_contain2 .card:hover .flip{ transform: rotateY(180deg); }

/* 앞/뒷면 공통 */
.main_contain2 .card .face{position:absolute; inset:0; padding: clamp(24px, 4vw, 52px); display:flex; flex-direction:column; justify-content:space-between; backface-visibility:hidden; background-size: cover; background-position:center; border-radius: var(--radius-xl);}
.main_contain2 .card .front{transform: rotateY(0deg);}
.main_contain2 .card .back{transform: rotateY(180deg);}
.main_contain2 .card .num{ font-size: clamp(14px, 1.8vw, 24px); font-family:'eco700'; color:#fff; }
.main_contain2 .card .title{ font-size: clamp(18px, 2.4vw, 32px); font-family:'eco700'; color:#fff; line-height:1.4; }
.main_contain2 .card .detail{font-size: clamp(14px, 1.8vw, 18px); color:#fff; margin-top:16px; opacity:0; transform: translateY(18px); transition: opacity .45s .2s ease, transform .45s .2s ease;}
.main_contain2 .card:hover .back .detail{ opacity:1; transform: translateY(0); }
  
/* 이미지 매핑 */
.main_contain2 .card1 .front{ background-image:url(../../../img/main_card1.png); }
.main_contain2 .card1 .back { background-image:url(../../../img/main_card_back.png); }
.main_contain2 .card2 .front{ background-image:url(../../../img/main_card2.png); }
.main_contain2 .card2 .back { background-image:url(../../../img/main_card_back.png); }
.main_contain2 .card3 .front{ background-image:url(../../../img/main_card3.png); }
.main_contain2 .card3 .back { background-image:url(../../../img/main_card_back.png); }
.main_contain2 .card3 .front .num, .main_contain2 .card3 .front .title{ color:#000; }
  
/* 모바일: 호버 플립 비활성화 */
@media (hover: none){
  .main_contain2 .card .flip{ transform:none !important; }
}
  
/* 모션 선호도 */
@media (prefers-reduced-motion: reduce){
  .main_contain2 .card .flip{ transition:none; }
  .main_contain2 .card .detail{ transition:none; }
}

/*파트너스*/
.main_contain3 .main_mkt_slide{display:flex; gap: clamp(8px, 2vw, 16px); overflow:hidden; margin-inline: calc(var(--space-x) * -1);}
.main_contain3 .main_mkt_slide .card{padding: clamp(40px, 8vw, 160px); border-radius: var(--radius-xl); color:#fff; flex: 0 0 auto;}
.main_contain3 .main_mkt_slide .card1{ background:url(../../../img/main_partner_img1.png) center/cover #000; margin-left: var(--space-x); }
.main_contain3 .main_mkt_slide .card2{ background:url(../../../img/main_partner_img2.png) center/cover #000; }
.main_contain3 .main_mkt_slide .card3{ background:url(../../../img/main_partner_img3.png) center/cover #000; margin-right: var(--space-x); }
.main_contain3 .main_mkt_slide .card .title{font-size: clamp(28px, 4.5vw, 56px); font-family:'eco700'; text-align:center; margin-bottom: clamp(26px, 6vw, 80px);}
.main_contain3 .main_mkt_slide .card .title span{font-size: clamp(20px, 4vw, 52px); font-family:'eco200'; display:block; text-align:center;}
.main_contain3 .main_mkt_slide .card .text{display:flex; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; justify-content:center; }
.main_contain3 .main_mkt_slide .card .text div{background:#fff; border-radius: 24px; line-height: clamp(50px, 8vw, 120px); color:#3814FF; width: clamp(120px, 20vw, 290px); text-align:center; font-size: clamp(12px, 1.8vw, 16px); transition: all .3s ease;}
.main_contain3 .main_mkt_slide .card .text div:hover{ background:#3814FF; color:#fff;}
.main_contain3 .logos{display:grid; grid-template-columns: repeat(6, 1fr);gap: clamp(10px, 2vw, 16px);margin-top: clamp(24px, 6vw, 56px);}
.main_contain3 .logos div{ aspect-ratio: 4 / 1; display:flex; align-items:center; justify-content:center; border: 1px solid #eaeaea;}
.main_contain3 .logos div img{ max-width: 60%; max-height: 60%; object-fit: contain; }
.main_contain3 .logos div:nth-child(13) img{max-height: 50%;}
.main_contain3 .logos div:nth-child(14) img{max-width: 75%;}
.main_contain3 .logos div:nth-child(5) img{max-height: 42%;}
.main_contain3 .logos div:nth-child(1) img{max-height: 80%;}
.main_contain3 .logos div:nth-child(4) img{max-height: 50%;}
.main_contain3 a{display:block; margin: clamp(24px, 6vw, 80px) auto 0; border-radius: 24px; border:1px solid #ddd; text-align:center; width: clamp(160px, 25vw, 240px); line-height: clamp(44px, 8vw, 80px); font-size: clamp(16px, 2.5vw, 24px); cursor:pointer;}
.main_contain4 .main_bld_slide{height: clamp(220px, 35vw, 360px); margin-left: calc(var(--space-x) * -1); margin-right: calc(var(--space-x) * -1); background:#000;}
.main_contain3{margin-bottom: clamp(60px, 10vw, 160px);}
.main_contain4{display:none;}
.main_contain5{display:none;}


@media screen and (max-width: 1200px){
  .main_contain1 .blue24{font-size: 16px; letter-spacing: 12px;}
  .main_contain1 .white80,.main_contain1.en .white80{font-size: 65px;}
  .index .black52{font-size: 40px;}
  .index{margin-top: 140px;}
  .main_contain2 .flex{flex-direction: column;}
  .main_contain2 .card{width: 100%; height: 320px;}
  .main_contain2 .card{font-size: 16px; line-height: 1.3;}
  /* .main_contain3 .logos div {width: calc(100% / 5);} */
  .main_contain2 .card .detail br{display: none;}
  .main_contain3 .main_mkt_slide .card{padding: 40px; gap: 8px;width: 100%; margin-left: unset;}
  .main_contain3 .main_mkt_slide .card .text{flex-wrap: unset;}
  .main_contain3 .main_mkt_slide .card .text div{line-height: 80px; width: 100%;}
  .main_contain3 .main_mkt_slide .card .title{font-size: 40px; margin-bottom: 46px; font-size: 32px;}
  .main_contain3 .main_mkt_slide .card .title span{font-size: 32px; margin-bottom: 16px;}
  .main_contain3 .main_mkt_slide{margin-right: 0;flex-direction: column; margin: 0 auto 0;}
  .main_contain3 .main_mkt_slide .card .title span{display: none;}
  .main_contain2 .card .face{padding: 24px;}
}

@media screen and (max-width: 840px){

  :root{
    --space-x: clamp(16px, 5vw, 50px);
    --radius-xl: 16px;
    --vh: 100dvh; /* 모바일 주소창 높이 대응 */
  }
  .main_contain1 .blue24{font-size: 22px;margin-bottom: 12px; letter-spacing: 6px;}
  .main_contain1 .white80,.main_contain1.en .white80{font-size: 56px;}
  .main_contain1 .text{width: 100%; text-align: center;}
  .index .black52{font-size: 32px;}
  /* .main_contain3 .logos div {width: calc(100% / 3); } */
  .main_contain2 .card .num{font-size: 16px;}
  .main_contain2 .card .title{font-size: 20px;}
  .main_contain2 .card .face{padding: 24px;}
  .index .black52{margin-bottom: 32px;}
  .main_contain3 a{font-size: 16px; line-height: 50px; width: 200px; margin-top: 24px;}
  .main_contain3 .main_mkt_slide .card .text div{line-height: 56px; width: 120px; border-radius: 12px; font-size: 12px;}
  .main_contain3 .main_mkt_slide .card .title{margin-bottom: 26px; font-size: 24px;}
  .main_contain3 .main_mkt_slide .card .title span{font-size: 24px;}
  .main_contain2 .card{height: 280px;}
}

@media screen and (max-width: 500px){
  .index .black52{font-size: 28px;}
  .index{margin-top: 100px; margin-bottom: 60px;}
  .main_contain1 .white80,.main_contain1.en .white80{font-size: 36px;}
  .main_contain1 .blue24{letter-spacing: 3px; font-size: 15px;}
  .main_contain2 .card{height: 240px;}
  .main_contain3 .main_mkt_slide .card .title{font-size: 18px;}
  .main_contain3 .logos{grid-template-columns: repeat(2, 1fr);}
  .main_contain3 .logos div{aspect-ratio: 3 / 1;}
  .main_contain3 .logos div img{max-width: 70%;}
  .main_contain3 .main_mkt_slide .card .text{flex-direction: column;}
  .main_contain3 .main_mkt_slide .card .text div{width: 100%;}
}