/*responsive-desktop*/

/* desktop: 1280px 이상 */
@media (min-width: 1280px) {
    /* 데스크탑 전용 스타일 */
    :root {
        --spacing-xs: 0.75rem; /* 작은 간격 */
        --spacing-sm: 1.5rem;  /* 기본 간격 */
        --spacing-md: 2.5rem;  /* 중간 간격 */
        --spacing-lg: 4rem;    /* 넉넉한 간격 */
        --spacing-xl: 5rem;    /* 아주 큰 간격 */
    }

    /*gutter class*/
    .with-gutter{
        box-sizing: border-box;
        padding: 0 var(--spacing-xl);
    }
    .element_gutter{
        width: 1200px;
        margin-top: 25vh;
    }
    /*header_nav_btn*/
    .header_nav_btn:hover span:first-of-type{
        transform: scale(0.75, 1);
    }
    .non-parallax-section{
        width: 1200px;
        margin-right: auto;
        margin-left: auto;
    }
    /*데스크탑 전용 스타일 부분도 필히 다른 곳에서 따로 적어둬야 함*/


    /**/
    #featured_products_section ul{
        width: 1200px;
    }
    .sec3_products_marquee_wrapper{
        margin-top: -5vh;
    }
    #about_section{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-row-gap: calc(15 * var(--vh, 1vh)); /*--vh는 모바일이나 태블릿에서만 쓴다*/
        grid-column-gap: var(--grid-gutter);
    }


    /*여기서부터는 style.css에 안적은것들. 이 부분은 필히 따로 mobile, tablet에서 적어야 함*/
    /*footer 섹션*/
    .footer-center{
        width: 1200px;
    }

    /*bucket 섹션*/
    .bucket-white-overlay{
        width: 50%;
    }






    /*hover만 모아놓음, hover는 데스크탑에서만 적용할 것*/

    /*전역 style.css*/
    .sec3_products_marquee ul li a:hover div{
        background-color: rgba(0, 0, 0, 0.4);
    }
    .sec3_products_marquee ul li a:hover span{
        opacity: 1;
        transition: opacity .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
    }
    .sec3_products_marquee ul li a:hover span:hover{
        opacity: 0.8;
    }

    /*swiper.css*/
    #swiper_products_section .swiper-slide.swiper-slide-active.hover-enabled::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index:1;
        width: 100%;
        height: 100%;
        transition: opacity .3s ease;
    }
    #swiper_products_section .swiper-slide.swiper-slide-active:hover::before{
        backdrop-filter: blur(.5px);
        background: rgba(0, 0, 0, 0.1);
    }
    #swiper_products_section .swiper-slide.swiper-slide-active:hover .swiper-float-div a:hover{
        animation-name: jelly;
        animation-duration: .5s;
        pointer-events: all;
    }

    /*components.css*/
    #clayn_nav ul li span a:hover{
        opacity: .7;
    }
    .sns_wrapper li a:hover{
        opacity: .7;
        transform: skewX(-10deg);
    }
    .clayn_btn:hover{
        animation-name: jelly;
        animation-duration: .5s;
    }
    .CTA_wrapper > div:hover::before{
        backdrop-filter: blur(10px); /* 흐림 효과 */
        background: rgba(0, 0, 0, 0.5);
    }
    .CTA_wrapper > div:hover img{
        transform: scale(1.1);
    }
    /* 호버시 버튼 활성화 */
    .CTA_wrapper > div:hover .clayn_btn {
        /*background: var(--extra-point-clr) !important;*/
        pointer-events: all; /* 버튼 클릭 가능 */
        transform: translate(-50%, -50%); /* 버튼 위치 유지 */
    }
    /* 버튼 호버 시 Jelly 애니메이션 */
    .CTA_wrapper > div:hover .clayn_btn:hover {
        animation-name: jelly2;
        animation-duration: .5s;
    }
    .footer-submit-btn:hover{
        color: var(--extra-extra-point-clr);
    }
    .footer-submit-btn:hover::before{
        transform: scale(1);
    }
}