@charset "utf-8";

.main-container {position:relative;}

/* ==========================================================================
    MAIN VISUAL
    ========================================================================== */
.main-visual{
    position: relative; overflow: hidden;
    width: 100%;
    .main-vis{position: relative; width: 100%; height: 100svh; background-color: var(--basic-color); overflow: hidden}
    /*.main-vis::after{content: ""; position: absolute; inset: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.15); pointer-events: none;}*/
    .main-vis .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;}
    .main-vis .move01{animation: move01 15s ease-in-out forwards;}
    .main-vis .move02{animation: move02 15s ease-in-out forwards;}
    /*.main-vis .video-poster{display: none}*/
    /*.video-poster{display: flex; justify-content: center; align-items: center;}*/
    /*.video-poster img {width: auto; height:auto; object-fit: none; }*/
    .logo-text{position: absolute; left: var(--main-gap); bottom: calc(var(--main-gap) - 6px); width: calc(100% - calc(var(--main-gap) * 2));}
    .logo-text img{width: 100%; max-width: 1312px;}
    .static-text{position: absolute; left: var(--main-gap); bottom: calc(var(--main-gap) - 6px); max-width: 760px; color: var(--point-color01); line-height: 22px; user-select: none; pointer-events: none;}
    .static-text p.empty{height: 20px;}
    .swiper-button-next,
    .swiper-button-prev{top: var(--main-gap); margin-top: 0; width: auto; height: auto; font-size: 30px; font-weight: 500; color: var(--point-color01); background: none;}
    .swiper-button-next{right: var(--main-gap);}
    .swiper-button-prev{left: calc(var(--main-gap) + 82px);}

    @media (width <= 1360px) {
        .swiper-button-next{right: calc(var(--main-gap) + 101px);}
        .static-text,
        .logo-text{left: 0; bottom: 0; width: 100%; padding: calc(var(--main-gap) - 6px) var(--main-gap);}
    }
    @media (width <= 1024px) {
        .swiper-nav {display: none;}
    }
    @media (width <= 860px) {
        .main-vis{height: calc(100svh - var(--header-height));}
        .logo-text{padding: 27px 27px;}
    }
    @media (width <= 640px) {
        .static-text{font-size: 13px; line-height: 19px;}
    }
}

/* ==========================================================================
    MAIN CONTENTS
    ========================================================================== */
.main-content{
    padding-top: 115px; padding-bottom: 115px;
    .main-sec{position: relative;}
    .cate-sec{padding-top: 26px; padding-bottom: 26px;}
    @media (width <= 1024px) {
        padding-bottom: 80px;
    }
    @media (width <= 640px) {
        padding-top: 40px; padding-bottom: 60px;
        .cate-sec{padding-top: 36px; padding-bottom: 36px;}
    }
}