﻿/* Visual Section */
.visual-section { position: relative; width: 100%; height: 1040px; margin: 0 auto; background-color: #1a1a1a; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.visual-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.visual-text-box { position: relative; z-index: 2; width: 100%; max-width: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 50px 0; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%); }
.visual-text-box .sub-desc { font-size: var(--fs-title); line-height: 62px; font-weight: 400; margin-bottom: 18px; }
.visual-text-box .main-desc { font-size: var(--fs-visual); line-height: var(--fs-title); font-weight: 700; word-break: keep-all; }

@media screen and (max-width: 1300px) {
    .visual-section { height: 800px; }
    .visual-text-box .main-desc { line-height: 1.5; }
    .visual-text-box .sub-desc { margin-bottom: 25px; line-height: 1.5; }
}
@media screen and (max-width: 800px) {
    .visual-section { height: 600px; }
    .visual-text-box .main-desc { line-height: 1.3; }
    .visual-text-box { height: auto; padding: 40px 20px; }
    .visual-text-box .sub-desc { margin-bottom: 15px; }
}
@media screen and (max-width: 600px) {
    .visual-section { height: 100vh; height: 100dvh; }
    .visual-text-box .main-desc { line-height: 1.3; }
    .visual-text-box .sub-desc { margin-bottom: 10px; }
}

/* Stats Section */
.stats-section { position: relative; width: 100%; }
.stats-inner { background-image: url('.././img/page1.png'); background-repeat: no-repeat; background-position: center; background-size: cover; max-width: 1920px; margin: 0 auto; padding-top: 100px; padding-bottom: 100px; display: flex; align-items: center; justify-content: flex-start; }
.stats-title { flex-shrink: 0; margin-left: 240px; margin-right: 214px; text-align: left; }
.stats-title-en { display: block; font-size: var(--fs-body); line-height: var(--lh-body); color: var(-blackC); margin-bottom: 20px; font-weight: 500; }
.stats-title-ko { display: block; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--main); font-weight: 700; white-space: nowrap; }
.stats-data { display: flex; justify-content: flex-start; align-items: stretch; }
.stat-item { width: 320px; height: 216px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #e0e0e0; padding: 0; }
.stat-icon-img { display: block; max-height: 24px; width: auto; }
.stat-item .desc { display: block; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sub); font-weight: 500; margin-top: 40px; margin-bottom: 20px; text-align: center; }
.stat-item .number-wrap { display: flex; align-items: baseline; justify-content: center; line-height: 1; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.04em; gap: 2px; }
.ticker-num-wrap { font-size: var(--fs-stat-num); line-height: var(--lh-stat-num); font-weight: 700; color: var(--main); display: inline-block; }
.ticker-view { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; position: relative; }
.ticker-col { display: inline-block; transform: translateY(0); }
.ticker-num { display: block; height: 100%; text-align: center; }
.ticket-txt { font-size: var(--fs-stat-unit); line-height: var(--lh-stat-unit); color: var(--main); font-weight: 800; transform: translateY(-4px); }
.ticket-txt-small { font-size: var(--fs-sub-title-sub); line-height: var(--lh-sub-title-sub); color: var(--sub); font-weight: 500; margin-left: 8px; }

/* Overlap Stats Style */
.stats-section.overlap-top { position: relative; z-index: 10; margin-bottom: -30px; width: 100%; background: #f5f6f7; }
.stats-section.overlap-top .stats-inner { background-color: #fff; border-radius: 20px; }
.stats-title-ko-sub { color: var(--sub); font-size: var(--fs-body); line-height: var(--lh-sub-title); margin-top: 18px; }
.stats-innerHwang { background: var(--black)!important; border-radius: 0px!important; }
.stats-innerHwang .stats-title { margin-right: 0px; }

@media screen and (max-width: 1600px) {
    .ticket-txt, .ticker-col { transform: translateY(0px) !important; }
    .stats-inner { background-image: none; background-color: #fff; padding-top: 60px; padding-bottom: 60px; flex-direction: column; }
    .stats-title { margin-left: 0; margin-right: 0; margin-bottom: 40px; text-align: center; padding-left: 0px; }
    .stats-title-ko { word-break: keep-all; width: 250px; margin: 0 auto; }
    .stats-title-ko br { display: block; }
    .stats-data { display: flex; flex-direction: row; justify-content: center; width: 100%; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
    .stat-item { flex: 1; min-width: 0; height: auto; border-right: 1px solid #e0e0e0; border-bottom: none; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: auto; }
    .stat-item:last-child { border-right: none; }
    .stat-icon-img { max-height: 24px; margin-bottom: 10px; }
    .stat-item .desc { margin-top: 5px; margin-bottom: 5px; word-break: keep-all; height: 34px; display: flex; align-items: center; }
    .stat-item .number-wrap { display: flex; flex-direction: row; align-items: baseline; justify-content: center; flex-wrap: nowrap; width: 100%; }
    .ticker-num-wrap, .ticket-txt { letter-spacing: -1px; white-space: nowrap; }
    .ticket-txt-small { font-size: var(--fs-small); margin-left: 3px; white-space: nowrap; }
}
@media screen and (max-width: 1024px) {
    .stats-section.overlap-top { margin-bottom: -50px; transform: none; }
}
@media screen and (max-width: 800px) {
    .stats-title-en { margin: 0px; padding-bottom: 10px; }
    .stats-title-ko-sub { margin: 0px; }
}
@media screen and (max-width: 600px) {
    .stats-inner { padding-top: 80px !important; padding-bottom: 80px !important; }
    .stats-title { margin-bottom: 30px; }
    .stats-data { display: flex; flex-direction: row; }
    .stat-item { padding: 30px 2px; }
    .stat-icon-img { max-height: 20px; margin-bottom: 8px; }
    .ticket-txt-small { margin-left: 2px; }
}