#container { padding: 0; }
.main-video { padding-top: 220px; }
.main-video .main-video-vod { height: 100vh; }
.main-video .main-video-vod .vod-inner { clip-path: inset(0px calc(50% - 315px) round 20px); }
.main-video .main-logos { position: absolute; top: 684px; left: 0; }
.main-logos {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1888px; /* 초기 노출 값 [ 여백 포함 236px * 8개 ] */
    height: 120px;
}
.logo-slide {
    width: 3776px; /* 보여야 하는 이미지 + 클론이미지 전체 합 [ 여백 포함 236px * 8개 * 2그룹 ] */
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    animation: bannermove 10s linear infinite;
    animation-delay: 0;
}
.logo-slide:hover { animation-play-state: paused; }
.logo-slide > div { width: 236px; }
.logo-slide > div a { display: flex; align-items: center; justify-content: center; width: 180px; height: 100px; border: 1px solid rgba(204, 204, 204, 1); border-radius: 999px; background: #fff; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); }

@keyframes bannermove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}

.main-slate { height: 100vh; }
.main-slate .slate-txt { z-index: 1; position: absolute; left: 0; height: calc(100vh / 2); }
.main-slate .slate-txt.slate-up { top: 0; align-items: end; }
.main-slate .slate-txt.slate-down { top: calc(100vh / 2); }
.main-slate .slate-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-slate .slate-wrap .slate-cowave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.main-zoom { height: 100vh; background-color: #000; }
.main-zoom .zoom-group { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); clip-path: inset(50%); }

.main-wave { height: 100vh; }
.main-wave .wave-commerce { width: 302%; height: 100vh; }
.main-wave .wave-commerce .panel > div { height: 559px; }
.main-wave .wave-commerce .panel > div svg { width: 20px; }
.main-wave .wave { position: absolute; top: 400px; left: 0; width: 100%; }

@media (max-width:768px) {
    .main-video { padding-top: 84px; }
    .main-video .main-video-txt span { font-size: 22px; line-height: 33px; }
    .main-video .main-video-txt p { margin-top: 10px; font-size: 38px; line-height: 52px; }
    .main-video .main-logos { top: 50%; }
    .main-logos { width: 944px; height: 80px; }
    .logo-slide { width: 1888px; }
    .logo-slide > div { width: 118px; }
    .logo-slide > div a { width: 108px; height: 60px; }
    .logo-slide > div a img { height: 15px; }
    .logo-slide > div.makeshop a img { height: 12px; }

    .main-slate .slate-txt { font-size: 40px; line-height: 56px; }

    .main-zoom .zoom-txt { font-weight: 700; font-size: 32px; line-height: 52px; }
    .main-zoom .zoom-txt .zoom-obj { max-height: 38px; }

    .main-wave { height: 100%; padding: 24px 18px 40px; box-sizing: border-box; }
    .main-wave img { width: 100%; max-width: 400px; }
    .main-wave .wave-commerce { width: 100%; height: 100%; gap: 90px 0; }
    .main-wave .wave-commerce .panel { flex-direction: column; flex-flow: column-reverse; }
    .main-wave .wave-commerce .panel > div { height: 100%; flex-flow: column-reverse; }
    .main-wave .wave-commerce .panel .panel-stxt { gap: 10px; }
    .main-wave .wave-commerce .panel .panel-stxt .text-20 { word-break: keep-all; }
    .main-wave .wave-commerce .panel .panel-stxt span { line-height: 32px; letter-spacing: -0.5px; }
    .main-wave .wave-commerce .panel .panel-stxt a { font-size: 20px; line-height: 28px; }

    .main-wave .wave-commerce .panel .panel-title { margin: 20px 0; }
    .main-wave .wave-commerce .panel .panel-title .text-32 { font-size: 18px; }
    .main-wave .wave-commerce .panel .panel-title .text-90 { font-size: 36px; }
    .main-wave .wave-commerce .panel .panel-title .leading-48 { line-height: 27px; }
    .main-wave .wave-commerce .panel .panel-title .leading-135 { line-height: 54px; }
    .main-wave .wave-commerce .panel .panel-title .font-800 { font-weight: 700; }
}