@charset "utf-8";

/* ============================================
    공통
============================================ */

/* body */
body:has(.main-container){background-color: var(--theme-black);}

/* 섹션 */
.sec{
    margin: var(--main-sec-space) 0 var(--main-sec-space); background-color: var(--theme-black);
    
    &.sec-green{background-color: var(--theme-green);}

    &.hasTopShape{
        position: relative; padding-top: calc(var(--main-sec-space) * 0.5);  margin-top: 13%;
        &:before{
            content: ""; position: absolute; bottom: calc(100% - 0px); left: 0; width: 100%; height: auto; aspect-ratio: 1920 / 144; 
            background: url("/assets/site/img/common/section-shape1-green.png") repeat-x center bottom; 
            background-size: 100% auto; 
            background-position: var(--shape-top-left) bottom;
            transition: all 0.1s;
        }
    }

    &.hasBottomShape{
        position: relative; margin-bottom: 0; padding-bottom: var(--main-sec-space);
        &:after{
            content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; aspect-ratio: 1920 / 122; 
            background: url("/assets/site/img/common/section-shape2-green.png") repeat-x center bottom; 
            background-size: 100% auto;
            background-position: var(--shape-bottom-left) bottom;
            transition: all 0.1s;
        }
        @media (pointer: coarse) and (hover: none){
            /* 터치디스플레이인 경우에만 적용 */
            &:after{background-size: calc(100vw + 2px) auto;}
        }
    }

    &.topGreen:before{background-image: url("/assets/site/img/common/section-shape1-green.png");}
    &.topBlack:before{background-image: url("/assets/site/img/common/section-shape1-black.png");}
    &.topGray:before{background-image: url("/assets/site/img/common/section-shape1-gray.png");}
    &.topWhite:before{background-image: url("/assets/site/img/common/section-shape1-white.png");}

    &.bottomGreen:after{background-image: url("/assets/site/img/common/section-shape2-green.png");}
    &.bottomBlack:after{background-image: url("/assets/site/img/common/section-shape2-black.png");}
    &.bottomGray:after{background-image: url("/assets/site/img/common/section-shape2-gray.png");}
    &.bottomWhite:after{background-image: url("/assets/site/img/common/section-shape2-white.png");}
}

/* 섹션 타이틀 */
.main-container{
    & .sec-tit{
        --sec-tit-bottom: 80px;
        display: flex; flex-direction: column; gap: 9px; text-align: center; padding: 0 0 var(--sec-tit-bottom);
        & .sup{
            font-size: 18px; font-weight: var(--fwm); color: var(--gray3); line-height: 1.3; text-transform: uppercase;
            &.transparent{color: rgba(255,255,255,0.4);}
        }
        & h3{font-family: var(--font-eng); font-size: clamp(70px,6vw,100px); font-weight: var(--fwb); letter-spacing: 0.0116em; line-height: 1; text-transform: uppercase; color: var(--white);}

        &.alignLeft{text-align: left;}


        @media (width <= 1500px){
            & h3{font-size: clamp(50px,6.3vw,90px);}
        }
        @media (width <= 1280px){
            --sec-tit-bottom: 65px;
            & h3{font-size: 64px;}
        }
        @media (width <= 860px){
            --sec-tit-bottom: 40px;
            & h3{font-size: 40px;}
        }
        @media (width <= 640px){
            --sec-tit-bottom: 30px;
            & .sup{font-size: 15px;}
            & h3{font-size: 34px;}
        }
    }
}


/* ============================================
    개별 섹션
============================================ */

/* visual */
.sec.visual{
    & .v-slide{
        height: 100%;
        & .list{
            height: 100%;
            & .item{
                position: relative; height: 100%;
                & .img{
                    height: 100%;
                    & img{width: 100%; height: 100%; object-fit: cover;}
                }
                & .video-frame{
                    position: relative; width: 100%; height: 100%; overflow: hidden;
                    & video{width: 100%; height: 100%; object-fit: cover;}
                    & iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; aspect-ratio: 16 / 9; /* ◀ 원본 영상 비율 */ object-fit: cover;}
                }
                & .txt{position: absolute; bottom: 99px; left: 0; width: 100%; text-align: center; color: var(--gray); font-family: var(--font-eng); font-size: 20px; font-weight: var(--fwr); line-height: 1.4;}
            }
        }
    }

    @media (width <= 1600px){
        width: 100%; height: auto !important; aspect-ratio: 16 / 9;
    }
    @media (width <= 640px){
        width: 100%; height: auto !important; aspect-ratio: 1.35 / 1;
        & .v-slide{
            & .list{
                & .item{
                    & .txt{
                        bottom: 20px; font-size: 17px;
                    }
                    & .video-frame{
                        & iframe{width: 132%;}
                    }
                }
            }
        }
    }
}

/* bean */
.sec.bean{
    /* margin-top: calc( var(--main-sec-space) * 0.5 ); */
    & .sec-con{
        & .beans{}
        & .beans + .view-more{
            margin: 60px auto 0;
        }
    }

    @media (width <= 640px){
        & .sec-con{
            & .beans + .view-more{
                margin: 40px auto 0;
            }
        }
    }
}

/* space */
.sec.space{
    overflow: hidden;
}

/* best */
.sec.best{

    & .best-wrap{
        position: relative;
        & .tablist{
            position: absolute; top: -120px; right: 0;
            & .tab:nth-child(1){display: none;}
        }
        & .tabcont{
            & .con{
                display: none;

                &.on{
                    display: block;
                }

                /* &.menu-no-result{
                    border-radius: 10px; background-color: #575757; aspect-ratio: 6 / 1; text-align: center; align-content: center; color: #595959; font-size: 30px; font-weight: var(--fwb);
                } */
            }
        }
    }
    & .best-slide{
        overflow: hidden; border-radius: 10px; width: calc(100% + ((100vw - 1600px) / 2));
        & .card{
            & .top{
                & .img{aspect-ratio: 1;}
            }
        }
    }

    @media (width <= 1820px){
        & .best-slide{
            width: calc(100% + var(--space));
        }
    }
    @media (width <= 1280px){
        & .best-wrap{
            & .tablist{top: -99px;}
        }
    }
    @media (width <= 1024px){
        & .sec-tit{
            text-align: center !important;
        }
        & .best-wrap{
            & .tablist{position: static; top: auto; right: auto; margin: 0 0 20px; justify-content: center;}
        }
    }
}

/* new */
.sec.new{
    overflow: hidden;

    & .new-slide{
        overflow: hidden; border-radius: 10px 0 0 10px; width: calc(100% + ((100vw - 1600px) / 2));
        & .new-monster{
            display: block; transition: opacity 0.3s ease;
            &.swiper-slide-visible ~ .swiper-slide-visible ~ .swiper-slide-visible ~ .swiper-slide-visible{opacity: 0.5;}
        }
    }

    @media (width <= 1820px){
        & .new-slide{
            width: calc(100% + var(--space));
        }
    }
}

/* boards */
.sec.boards{

}