/* 기본 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html{font-size:20px !important;}
body { font-family: 'Poppins', sans-serif, 'pretendard'; line-height:1.5; overflow-x: hidden; background-color: #000; color: #fff; font-size:1rem !important;  margin: 0; padding:0; overflow-x:hidden;}

/* 히어로 섹션 */
.hero-section { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #000; overflow: hidden; }
.hero-content { position: relative; text-align: center; max-width:1600px;  width:100%; padding: 0 2rem; }
.hero-content .main-title { font-size: 3.5rem; font-weight:600; line-height: 1.2; margin-bottom:1.5rem; color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); letter-spacing: -0.02em; }
.hero-content .sub-title { font-size: 1.3rem; font-weight:400; line-height: 1.5; color: #ccc; margin: 0 auto; }

/* 히어로 비디오 영역 */
.hero-section .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-section .hero-video {width: 100%; height: 100%; object-fit: cover; opacity: 0.3;  height:auto; display: block;}
.hero-section .hero-video--pc{ display:block; height:100vh;}
.hero-section .hero-video--mobile{ display:none; }
.hero-section .video-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a1a 0%, #333 100%); display: flex; align-items: center; justify-content: center; }
.hero-section .video-placeholder { text-align: center; color: #fff; font-size: 2rem; font-weight: bold; background: rgba(0, 0, 0, 0.7); padding: 2rem 4rem; border-radius: 10px; border: 2px dashed #666; }

/* 플랫폼 영역 */
.platform-section { position: relative; width: 100vw; display:flex; align-items: center; justify-content: center; background-color: #fff; overflow: hidden; padding:5rem 0;}
.platform-content { position: relative; text-align: center; max-width:2400px; width:100%; padding: 0 2rem; }
.platform-content .sec-title { font-size: 3rem; font-weight: 600; line-height: 1.2; margin-bottom:1.5rem; color: #000; text-shadow: none; letter-spacing: -0.02em; }
.platform-content .sec-sub-title { font-size: 1.1rem; font-weight: 400; line-height: 1.6; color: #666; margin: 0 auto; }

/* Swiper 스타일 */
.platform-content .mySwiper { width: 100%; height: 300px; margin: 2rem 0; background: transparent; margin-left:auto; margin-right:auto; display:flex; align-items:center;}
.platform-content .mySwiper swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); color: #333; padding: 20px; min-height: 200px; transition: all 0.3s ease; opacity: 0.7; transform: scale(0.9); }
.platform-content .mySwiper swiper-slide-active { opacity: 1; transform: scale(1.1); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.platform-content .mySwiper .swiper-wrapper{display:flex; align-items:center;}
.platform-content .swiper{width:100%; height:100%;}
.platform-content .swiper-slide{text-align: center; font-size:18px; background:#444; display:flex; justify-content: center; align-items:center;}
.platform-content .swiper-slide{background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8));}
.platform-content .swiper-slide.kr{background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url(../img/img_thumb_kr.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.platform-content .swiper-slide.jp{background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url(../img/img_thumb_jp.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.platform-content .swiper-slide.tw{background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url(../img/img_thumb_tw.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.platform-content .swiper-slide.en{background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url(../img/img_thumb_gl.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.platform-content .swiper-slide.novel{background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url(../img/img_thumb_novel.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;}

.platform-content .swiper-slide img {display: block; width:auto; height:4.5rem;  object-fit:cover;}
.platform-card{display:flex; flex-direction:column; gap:1.5rem; position:absolute; height:100%; display:flex; align-items:center; justify-content:center; padding:0 1.5rem;}
.platform-card > h3{color:#60A5FA; position:absolute; top:2rem; left:50%; transform: translateX(-50%); font-size:1rem;}
.platform-card__logo-img{max-width:340px; max-height:120px; margin:0 auto;}
.platform-card__desc{font-size:0.85rem; color:rgba(255,255,255,.8); line-height:1.5;}
.platform-card .btn-view{position:absolute; width:2.5rem; bottom:2rem; left:50%; transform: translateX(-50%);  height:2.5rem; border-radius:0.8rem; background: rgba(255, 255, 255, 0.50); display:flex; align-items:center; justify-content:center;}
.platform-card .btn-view > img{height:1.4rem; width:1.4rem;}

:root {
  --slide-base-height: 35rem;
  --slide-scale-inactive: 0.8;
  --slide-scale-active: 0.9;
}

.mySwiper .swiper-slide {padding:0; overflow: visible; display: flex; align-items: center; border-radius:20px; overflow: hidden; transition: transform 0.3s ease, opacity 0.3s ease; /*height: calc(var(--slide-base-height) * var(--slide-scale-inactive)); transform: scale(var(--slide-scale-inactive));*/ opacity: 1; aspect-ratio:300 / 420; }
.mySwiper .swiper-slide:before{content:''; display:inline-block; /*background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8));*/ position:absolute; left:0; right:0; bottom:0; top:0;}
.mySwiper .swiper-slide-active{/*height: calc(var(--slide-base-height) * var(--slide-scale-active)); transform: scale(var(--slide-scale-active));*/ opacity:1; z-index:10;}
.mySwiper .swiper-slide:not(.swiper-slide-active){transform: scale(0.7); opacity:1;}
.mySwiper .swiper-slide:not(.swiper-slide-active) .platform-card__desc{display:none;}
.mySwiper .swiper-pagination{position:relative; display:flex; justify-content:center; width:100%; max-width:200px; margin:0 auto; bottom:-10px !important;}
.mySwiper .swiper-pagination-bullet{height:2px; background:rgba(0, 0, 0, .5); width:100%; flex:1; border-radius:0; margin:0 2px!important;}
.mySwiper .swiper-pagination-bullet-active{background:#F02D37;}
.mySwiper .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 1px;}

.mySwiper .swiper-button-wp{max-width:610px; width:94%; position:relative; top:50%; transform:translate(-50%, -50%); position:absolute; z-index:1; left:50%; margin-top:-17px}
.mySwiper .swiper-button-next.btn{transform:translateY(calc(-50% + 38px)); right:10px;}
.mySwiper .swiper-button-prev.btn{transform:translateY(calc(-50% + 38px)); left:10px;}

.mySwiper .swiper-button-next.btn,.mySwiper .swiper-button-prev.btn{border:1px solid rgba(0,0,0,.1); border-radius:50px; background:#fff; width:40px; height:40px; display: inline-flex; align-items:center; justify-content:center;}
.mySwiper .swiper-button-next.btn>img,.mySwiper .swiper-button-prev.btn>img{width:35px; height:35px;}
.mySwiper .swiper-button-prev.btn>img{transform:scaleX(-1);}
.mySwiper .swiper-button-next:after, .mySwiper .swiper-button-prev:after{display:none;}
.mySwiper .swiper-button-next.swiper-button-disabled.btn, .mySwiper .swiper-button-prev.swiper-button-disabled.btn{opacity:0;}

/* 데이터 영역 */
.data-section { position: relative; width: 100vw; display:flex; padding:8rem 0; align-items: center; justify-content: center; background-color:#000; overflow: hidden; background:url(../img/bg-data.jpg) top center no-repeat; background-size:auto; }
.data-content { position: relative; text-align: center; max-width:2400px; width:100%; padding: 0 2rem; }
.data-content .main-title { font-size: 3rem; font-weight: 600; line-height: 1.2; margin-bottom:1.5rem; color: #fff; text-shadow: none; letter-spacing: -0.02em; }
.data-content .sub-title { font-size: 1.1rem; font-weight: 400; line-height: 1.6; color:rgba(255,255,255,.8); margin: 0 auto; }
.data-stats{display:flex; justify-content:center; gap:5rem; margin-top:3rem}
.data-number{color:#fff; font-family:'poppins'; font-size:3.5rem; font-weight:600;}
.data-unit{color:#fff; font-family:'poppins'; font-size:3.5rem; font-weight:600;}
.data-label{color:#60A5FA;}

.graph-area{margin:1rem auto 0; width:100%; max-width:1360px;}
.graph-area img{width:100%; margin:0 auto;}

/* 비지니스 영역 */
.business-section { position: relative; width: 100vw; padding:8rem 0; display:flex; align-items: center; justify-content: center; background-color:#000; overflow: visible;}
.business-content {text-align: center; max-width:2400px; width:100%; height:100%; padding: 0 2rem; }
.business-content .text-content {position: relative; z-index:1;}
.business-content .main-title { font-size: 3rem; font-weight: 600; line-height: 1.2; margin-bottom:1.5rem; color: #fff; text-shadow: none; letter-spacing: -0.02rem; }
.business-content .sub-title { font-size: 1.1rem; font-weight: 400; line-height: 1.6; color: #666; margin: 0 auto;}

.business-items{--gap: clamp(12px, 2vw, 30px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); max-width:1200px; position: relative; z-index:1; margin:0 auto 0;}
.business-items__item{ grid-column: span 3; display:flex; flex-direction:column; gap:0.5rem; padding:0.5rem; box-sizing: border-box;}
.business-items__item:last-child{ grid-column: 2 / span 10; }
.business-items__img > img{width:100%;}
.business-items__title-area{display:flex; width:100%; justify-content:center; margin: 0 auto; gap:0; flex-direction:column; align-items:center;}
.business-items__title{color: #5A9BEA; text-align: center; font-family:Poppins; font-size:1.2rem; font-style: normal; font-weight:600; line-height:1.4; letter-spacing: -0.2px; display:flex; align-items:center; justify-content:center; gap:0.2rem}
.business-items__title.epi{font-size:1.1rem; flex:none}
.business-items__title > img{height:1.1rem;}
.business-items__title-box{display:flex; align-items:center;}
.business-items__title-box > img{width:100%; max-width: 420px; margin: 0 auto;}
.business-items__desc{color: #FFF; font-family: Poppins; font-size:1.5rem; font-style: normal; font-weight: 500; line-height:1.3; letter-spacing: -0.2px; text-align:center;}
.business-items__title-desc{color: #5A9BEA;; font-family: Poppins; font-size:1rem; font-style: normal; font-weight:500; line-height:1.4; letter-spacing: -0.2px; text-align:left;}

.business-content .video-container{position:relative; inset:0; z-index:0;}
.business-content .business-video{width:100%; height:100%; display:block; object-fit:cover; opacity:1; transform-origin:50% 50%; border-radius:2rem; overflow:hidden;}

/* 테크 영역 */
.tech-section { position: relative; width: 100vw; height: 100vh; display:flex; align-items: center; justify-content: center; background-color:#211B24; overflow: hidden; flex-direction: column;}
.tech-content { position: relative; text-align: center; max-width:2400px; width:100%; padding: 0 2rem; }
.tech-content .main-title { font-size: 3rem; font-weight: 600; line-height: 1.2; margin-bottom:1.5rem; color: #fff; text-shadow: none; letter-spacing: -0.02em; }
.tech-content .sub-title { font-size: 1.1rem; font-weight: 400; line-height: 1.6; color:rgba(255,255,255,.6); margin: 0 auto;}

.tech-list-wp{position: relative; text-align: center; max-width:1400px; width:100%; padding: 0 2rem; margin:3rem auto 0;}
.tech-list{display:flex; flex-direction:row; justify-content:center; gap:1.5rem}
.tech-list .tech-item{list-style:none; display: flex; padding:2rem 1.5rem; flex-direction: column; align-items: center; justify-content:center; gap:1rem; border-radius:1rem; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.05); flex:1;}
.tech-list .tech-item .tech-list-title{line-height:1.2;}
.tech-list .tech-item .tech-list-desc{font-size:1rem; color:#fff; line-height:1.4;}
.tech-list .tech-item:nth-child(1) .tech-list-title{color:#FFCF02; font-weight:600; font-size:1.4rem}
.tech-list .tech-item:nth-child(2) .tech-list-title{color:#60A5FA; font-weight:600; font-size:1.4rem}
.tech-list .tech-item:nth-child(3) .tech-list-title{color:#A756FF; font-weight:600; font-size:1.4rem}

/* 스토리 사이클 영역 */
.story-cycle-section { position: relative; width: 100vw; height: 100vh; display:flex; align-items: center; justify-content: center; background-color:#000; overflow: hidden; flex-direction: column;}
.story-cycle-content { position: relative; text-align: center; max-width:1520px; width:100%; padding: 0 2rem; display:flex; flex-direction: row; justify-content: space-between; gap:3rem}
.story-cycle-copy{width:50%; text-align:left; display:flex; flex-direction:column; gap:3rem;}
.story-cycle-line{color: #FFF; font-family: Poppins; font-size:1.8rem; font-style: normal; font-weight:400; line-height:1.5; letter-spacing: -0.2px;} 
.story-cycle-headline > img{width:100%; max-width:max-content;} 
.story-cycle-subtext{font-family: Poppins; font-size:3rem; font-style: normal; font-weight: 600; line-height:1.4; letter-spacing: -0.2px; background: linear-gradient(93deg, #FAD201 0.63%, #00A7E6 46.99%, #58218A 93.35%);
background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.story-cycle-subtext > img{width:100%; max-width:max-content;}
.story-cycle-gallery{width:50%;}
.story-cycle-item{list-style:none;}
.story-cycle-img{ display:block; width:100%; height:100%; object-fit:cover; }
.story-cycle-gallery{width:50%; position:relative; overflow: hidden; height:clamp(280px, 70vh, 720px);}
.story-cycle-list{list-style: none; margin: 0; padding: 0; will-change: transform;}

/* 마무리 영역 */
.conclusion-section { position: relative; width: 100vw; height: 100vh; display:flex; align-items: center; justify-content: center; background-color:#000; overflow: hidden; flex-direction: column;}
.conclusion-content { position: relative; text-align: center; max-width:1920px; width:100%; padding: 0 2rem; }
.conclusion-content .main-title { font-size: 3rem; font-weight: 600; line-height: 1.2; margin-bottom:1.5rem; color: #fff; text-shadow: none; letter-spacing: -0.02em; }
.conclusion-content .sub-title { font-size: 1.1rem; font-weight: 400; line-height: 1.6; color: #666; margin: 0 auto;}
.conclusion-img img{width:100%; margin:0 auto;}

.story-quote{background: linear-gradient(90deg, #FAD201 0%, #00A7E6 50%, #58218A 100%); display:flex; padding:1rem; flex-direction:column; justify-content:center; align-items:center; align-self: stretch; position:absolute; bottom:0; left:0; right:0;}
.story-quote-text{font-size:1.5rem; color:#fff; line-height:1.4;}


/* 버튼:: 바로가기 */
.detail-view {font-family:'pretendard'; display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 2rem; background:#fff; color:#000; text-decoration:none; border-radius:25px; font-size:0.8rem; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.2); cursor: pointer; position:relative; z-index:7;}
.detail-view:hover {transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,0.3);}
.detail-view::after {content:'\f061'; font-family:'Font Awesome 5 Free'; font-weight:600; font-size:0.9rem; transition:transform 0.3s ease;}
/* .detail-view:hover::after {transform:translateX(3px);} */

/* 푸터 */
.footer {color:#fff; background:#101010;}
.footer .container{max-width:1600px; width:100%; margin:0 auto;}
.footer-inner {padding:2rem 2rem; display:flex; grid-template-columns:1fr 1fr; justify-content: space-between; gap:0; font-size:14px; word-break: keep-all; text-align:center;}
.footer-logo {color:#fff; font-size:0}
.footer-logo > img {height:40px;}
.footer-description {color:#aaa; margin-bottom:24px; line-height:1.6;}
.footer-contact {display:flex; flex-direction:row; gap:5px; font-family:'poppins'; align-items:center}
.footer-contact__label{font-weight:500; font-size:0.7rem; color:#666;}
.footer-contact__email {font-size:1.3rem;}
.footer-contact__email-link {text-decoration: none; color: inherit; font-size:0.9rem; display:flex; gap:5px}
.footer-contact__email-link:hover { text-decoration: underline; }
.contact-item {display:flex; align-items:center; gap:12px; color:#aaa;}
.contact-label {width:5rem;}
.contact-item svg {color:#fff; flex-shrink:0;}
.footer-bottom {padding:32px 0; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-copyright {text-align:right;}
.footer-copyright p {color:#666; font-size:14px;}

@media (min-width: 0) and (max-width:767px) {
    html{font-size: 16px !important;}
    body{font-size: 1rem !important; margin: 0; padding:0;}

    .footer-inner {grid-template-columns:1fr; gap:0; flex-direction:column; justify-content:center; align-items: center;}
    .footer-bottom {flex-direction:column; text-align:center;}
    .footer-copyright {text-align:center;}
    .footer-contact{gap:5px;}
    .footer-description{display:none;}

    /* 히어로 섹션 */
    .hero-content {padding:0 3rem;}
    .hero-section .hero-video--pc{ display:none; }
    .hero-section .hero-video--mobile{ display:block; height:100vh;}
    .hero-content .main-title{font-size:1.8rem;}
    .hero-content .sub-title{font-size:0.9rem;}

    /* 플랫폼 영역 */
    .platform-section{height:auto; padding: 3rem 0;}
    .platform-content{padding:0;}
    .platform-content .sec-sub-title{padding:0 1.5rem;}
    .platform-content .sec-title { font-size: 1.8rem;}
    .platform-content .sec-sub-title { font-size: 0.9rem;}

    /* 데이터 섹션 */
    .data-section{height:auto; padding: 3rem 0;}
    .data-content{padding:0;}
    .data-stats{display:flex; flex-direction:column;}
    .data-content .main-title { font-size: 1.8rem; padding:0 1rem;}

    /* 비지니스 영역 */
    .business-section {height:auto; padding:3rem 0; }
    .business-content{padding:0;}
    .business-content .hero-video{border-radius:0;}
    .business-content .main-title{font-size:1.8rem;}
    .business-content .business-video{border-radius:0;}

    .business-items{grid-template-columns: repeat(2, minmax(0, 1fr)); padding:0 1rem; margin-top:2rem}
    .business-items__item{grid-column: auto / span 1;}
    .business-items__item:last-child{grid-column: 1 / -1; justify-self: center; width:100%;}
    .business-items__desc{font-size:1.2rem;}
    .business-items__title.epi{font-size:1.2rem;}

    /* 테크 영역 */
    .tech-section{height:auto; padding: 3rem 0;}
    .tech-list-wp{padding:0;}
    .tech-list{flex-direction:column;}
    .tech-content .main-title { font-size: 1.8rem; }
    .tech-content .sub-title {font-size: 0.9rem;}
    .tech-list .tech-item .tech-list-desc{ font-size:0.9rem;}

    /* 스토리 사이클 영역 */
    .story-cycle-copy{width:100%;}
    .story-cycle-gallery{width:100%;}
    .story-cycle-section{height:auto; padding: 3rem 0;}
    .story-cycle-content{flex-direction:column; gap:2rem}
    .story-cycle-line{font-size:0.9rem;}
    .story-cycle-subtext{font-size:1.6rem; position:relative; z-index:1;}
    .story-cycle-headline{display:none;}

    /* 마무리 영역 */
    .conclusion-section{height:auto; padding: 3rem 0 0;}
    .conclusion-content{padding:0;}

}