/*responsive-mobile*/

/* mobile: 768px 이하 */
@media (max-width: 768px) {
    /* 모바일 전용 스타일 */
    :root {
        --spacing-xs: 0.5rem;  /* 작은 간격 */
        --spacing-sm: 1rem;    /* 기본 간격 */
        --spacing-md: 1.5rem;  /* 중간 간격 */
        --spacing-lg: 3rem;    /* 넉넉한 간격 */
        --spacing-xl: 5rem;    /* 아주 큰 간격 */

        /*폰트 사이즈 변수*/
        --title-size : calc((var(--spacing-fix-1rem)) + (var(--spacing-fix-half1rem)));
        --text-effect-size : calc((var(--spacing-fix-1rem)));
        --text-size : 14px;
    }

            /*gutter class*/
            .with-gutter{
                box-sizing: border-box;
                padding: 0 var(--grid-gutter);
            }
            .element_gutter{
                width: 80%;
                box-sizing: border-box;
                padding: 0 var(--grid-gutter);
                margin-top: 25vh;
            }
            .non-parallax-section{
                width: 100%;
                margin-right: auto;
                margin-left: auto;
                box-sizing: border-box;
                padding: 0 1rem;
            }
            #about_section{
                display: flex;
                flex-direction: column;
                gap: 3rem;
            }
    
            /**/
            #featured_products_section{
                padding-bottom: 550px;
            }
            #featured_products_section ul{
                width: 80%;
            }
            #featured_products_section .article1 .element_gutter{
                margin-top: 0;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .sec4p{
                width: auto;
            }
    
    
        /*여기서부터는 style.css에 안적은것들. 이 부분은 필히 따로 mobile, desktop에서 적어야 함*/
        #swiper_products_section .swiper-slide .swiper-float-div {
            padding: 1rem;
        }
        .sec3_products_marquee_wrapper{
            gap: 0.625rem;
        }
        .sec3_products_marquee ul li{
            width: 220px;
            height: auto;
        }
        #about_section .o-dl_row{
            grid-template-columns: repeat(2, minmax(0, 1fr)); /*2열, 각 열의 크기 최소0 최대1fr 균등분배.*/
        }
        .mobile-font-small{
            font-size: 10.5px;
        }
        #about_section blockquote{
            font-size: 1rem;
        }
        #about_section figcaption p{
            left: calc(1 / 3* 100% + 1 / 3* var(--spacing-fix-5rem));
        }
        #about_section .about_col{
            grid-template-columns: auto;
        }
        /*footer 섹션*/
        .footer-center{
            width: 100%;
            box-sizing: border-box;
            padding: 0 var(--grid-gutter);
        }
        .footer-bottom{
            flex-wrap: wrap;
        }
        .footer-bottom > p{
            max-width: 50%;
            text-align: center;
        }
        .footer-bottom > a{
            order: -1;
            width: 100%;
            margin-bottom: var(--grid-gutter);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .figcaptionSvg{
            position: relative;
            left: -25%;
        }
    
        /*bucket 섹션*/
        .bucket-white-overlay{
            width: 85%;
        }
}