@media only screen and (max-width: 860px) {
    
}

/* 1. 일반 모바일 (최대 768px) */
@media only screen and (max-width: 768px) {
    :root {
        --container-width: calc(100% - 30px);
        --fixed-search-width: calc(100% - 190px - 2rem) ;
        --container-side: calc(50% + 520px);
    }
    #app>header { height: 138px;}
    .header-logo { width: 128px; height: 128px;}
    .header-category { top:20px; left: 140px;}
    .header-category .btn-category { width: 2rem;}
    .header-search {top:70px; left: 140px;}
    .header-search input[type="text"] {font-size: 1rem; 
        line-height: 1.8rem;}
    .header-user {top:10px; width: 110px;}
    .header-user li:nth-child(1),
    .header-user li:nth-child(5),
    .header-user li:nth-child(6),
    .header-user li:nth-child(7),
    
    .fixed-header .header-user li:nth-child(3),
    .compact-header .header-user li:nth-child(3) {display: none;}
    .fixed-header .header-user ,
    .compact-header .header-user  {width: 60px;}
    .fixed-header .header-user a,
    .compact-header .header-user a { margin: 0 0 0 auto;}
    .cs-info { width:calc(100% - 150px)}
    a.cs-kakao {
        width:92px;
        height:42px;
        margin-top: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left:38px;
        background-position: 5px 50%;
        background-size: 40px;
        line-height: 42px;

    }
    .cs-menu {width: 100%; min-width:290px}
    .cs-menu a {
        width:calc(18vw - 8px);
        height:calc(7vw - 8px);
        padding-top: 11vw;
        line-height: calc(7vw - 8px);
        letter-spacing:-1px;
    }
    .footer-menu { display: block; background-color: transparent; padding: 0; }
    .footer-menu a { font-size: .8725rem;}
    .footer-main-menu {  justify-content:center; width: 100%;
        padding: 1rem 10px;
        background-color: #F7F8F8; 
        border-bottom: 1px solid var(--light-gray); }
    .footer-link-menu { left:0; justify-content: center; height:60px; }
    .footer-link-menu .btn-top { position: absolute; right: 10px; top:10ox }
    .footer-link-menu .fixed-window { position: fixed; left: calc(100% - 45px); bottom: 85px; }
    .footer-logo img { width:24.7vw;}
    .footer-info dl { margin-left: calc(24.7vw + 20px)}
    .top-banner-zone {height: 8vw;}
    .top-banner-zone a>img { margin: 0  auto 0 5px;}
    .top-banner-zone .btn-close { 
        top:2.5vw; width:3vw; height: 3vw;}
    .slider-container { margin: 20px 0;}
    .slider-wrapper  { height:48vw;}
    .slide, .slide img { width: calc(100vw - 30px);}
    /*.contentsNavi ol {float:none;} 
    .contentsTitle { margin:20px 0 10px}
    .contentsTitle ul { grid-template-columns: repeat(3, 1fr); }
    .contentsCtrl { display: block; margin-top:10px}
    .ctrlSort { margin-top:10px}
    .product_list { grid-template-columns: repeat(2, 1fr);}
    */

}
/* 2. 소형 모바일 (최대 480px) */
@media only screen and (max-width: 480px) {
    .header-logo { left: 50%; margin-left: -64px;}
    .header-category { left:0px;}
    .header-user li:nth-child(2) {display: block;}
    .header-search {display: none;} 
    .header-user li:nth-child(3) {display: block;}
    .header-user {top:20px; width: 108px;}
    .header-user a{ width: 34px; height: 34px; background-size: 25px;}
    .header-user a>span { margin:0 -22px; }
    /*.fixed-header .header-main { display: block;}
    .fixed-header .header-logo,
    .fixed-header .header-category,
    .fixed-header .header-user {position: absolute; width: 80px; }
    .fixed-header .header-user a>span { top:40px; margin:0 -22px;}
    .fixed-header .header-logo {width: 120px; height: 120px; top:-16px; margin-left: -60px;}*/

    #app>.fixed-header,
    #app>.compact-header { position: fixed; left:0; right:0; z-index: 99; top:auto; bottom:0; height:70px;background-color: var(--primary-color);}
    .fixed-header .header-logo,
    .compact-header .header-logo {
        position: absolute; top:auto; left: 0; bottom:10px;
        width:21vw; min-width: 70px; height:44.1vw; min-height: 147px; margin-left:0;
    }
    .fixed-header .header-logo a,
    .compact-header .header-logo a { background-image: url(../images/common/header-logo_m.svg);}
    .fixed-header .header-category .btn-category,
    .compact-header .header-category .btn-category {
        margin-top: -1rem;
        margin-left: calc(24.7vw + 20px);
        padding-top:2rem;
        padding-left: 0;
        height: 1rem;
        line-height:1rem;
        background-position: 0 0;
        overflow: visible;
        font-size: .7rem;
        text-align: left;
    }
    .fixed-header .header-category .button-title,
    .compact-header .header-category .button-title { font-weight: lighter; letter-spacing: -2px;}
    .fixed-header .header-category .button-title>span,
    .compact-header .header-category .button-title>span { display: none;}
    .fixed-header .header-user,
    .compact-header .header-user { width:calc(100% - 24.7vw - 20px - 2rem)}
    .fixed-header .header-user li:nth-child(2),
    .compact-header .header-user li:nth-child(2) { display: none;}
    .fixed-header .header-user li:nth-child(3),
    .fixed-header .header-user li:nth-child(5),
    .fixed-header .header-user li:nth-child(7),
    .compact-header .header-user li:nth-child(3),
    .compact-header .header-user li:nth-child(5),
    .compact-header .header-user li:nth-child(7) { display: block;}

    .fixed-header .header-user a,
    .compact-header .header-user a {
        width: 3rem;
        height: 1rem;
        padding-top:2rem;
        font-size: .7rem;
        background-size: 35px;
        background-position: 50% 0;
        background-color: transparent;
        background-size: 1.8rem;
        font-size: .7rem;
        font-weight: lighter;
        line-height: 1rem;
        overflow: visible;
    }
    .fixed-header .header-user a>span ,
    .compact-header .header-user a>span { position: static; opacity: 1;}
    
    .fixed-header .header-user .user-mn-fav ,
    .compact-header .header-user .user-mn-fav {background-image:url(../images/common/icon-black_fav.svg)}
    .fixed-header .header-user .user-mn-search ,
    .compact-header .header-user .user-mn-search {background-image:url(../images/common/icon_black_search.svg)}
    .fixed-header .header-user .user-mn-user ,
    .compact-header .header-user .user-mn-user {background-image:url(../images/common/icon-black_user.svg)}
    .fixed-header .header-user .user-mn-cart ,
    .compact-header .header-user .user-mn-cart {background-image:url(../images/common/icon-black_cart.svg)}
    .fixed-header .header-user .user-mn-cash ,
    .compact-header .header-user .user-mn-cash {background-image:url(../images/common/icon-black_cash.svg)}
    .fixed-header .header-user .user-mn-cs ,
    .compact-header .header-user .user-mn-cs {background-image:url(../images/common/icon-black_cs.svg)}
    .fixed-header .header-user .user-mn-logout ,
    .compact-header .header-user .user-mn-logout {background-image:url(../images/common/icon-black_logout.svg)}
    .cs-info { width:100%; min-width:290px}
    a.cs-kakao{ width:100%; min-width:223px; margin-top: 20px;
        padding-left:67px;
        background-position: 10px 50%;
        text-align: left;
        font-size: 1.2rem;
    }
    .cs-menu a {
        overflow: hidden;
        height:calc(18vw - 8px);
        min-width: 50px;
        min-height: 50px;
        padding-top: 0;
        line-height: 50px;
        letter-spacing:-1px;
        background-position: 50% 50%;
        background-size: 80%;
    }
    .cs-menu a>span { display: block; position: relative; top:calc(100% + 10px)}
    .footer-info { padding: 35px 0 90px;}
    .footer-logo { display: none    ;}
    
    .fixed-header #subCategory,
    .compact-header #subCategory{
        top:100%;
        left: 0;
        right: auto;
        width: calc(100vw - 45px);
        max-height: calc(100vh - 45px);
        transform: translateY(-100%);
        padding:10px;
        z-index: 3002;
        overflow-y: auto;
    }
    .forMobile { display: block; padding-bottom:5px; margin-bottom: 5px; border-bottom: 1px solid #ddd;}
    .cs-info .subMenu_list ul {
        top:0; left: 0; bottom:0; right:o;
        overflow-y: auto;
    }
    .contentsTitle ul { grid-template-columns: repeat(2, 1fr); }
    .product_list { grid-template-columns: repeat(1, 1fr);}
     .footer-link-menu .fixed-window {  bottom: 187px; }
}



/* 4. 데스크톱 */
@media only screen and (min-width: 1024px) {
    :root {
        --container-width: calc(100% - 100px);
        --fixed-search-width: calc(100% - 520px - 10rem) ;
        --container-padding: 50px;
        --container-side: calc(100% - 45px);
    }
    .NotWide {display: none;}
    .header-category .btn-category { width: 2rem;}
    .header-menu {
        position:absolute;
        display: flex;
        align-content: space-between;
        top: 50px;
        left: calc(220px + 2rem);
        right: 320px;
        height: 2rem;
        line-height: 2rem;}
    .header-menu a{
        display: block;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        font-size: 1.125rem;
        font-weight: 700;
        display: block;
        text-decoration: none;
    }
    .fixed-header .header-category .btn-category,
    .compact-header .header-category .btn-category { width: 10rem }
    .footer-cs {flex-wrap:nowrap; justify-content:flex-end; }
    .cs-info { width: calc(100% - 604px);}
    a.cs-kakao, .cs-menu a {
        width:92px;
        height:35px;
        padding-top: 57px;
        line-height: 35px;
    }
    a.cs-kakao { margin-top: 0 }
    .cs-menu { width:auto; justify-content: flex-end; padding-top: 0;  }
    .cs-menu a { margin-left: 8px;}
    .product_list { grid-template-columns: repeat(4, 1fr);}
}
/* 4. 중형 화면 대형 화면 (1280px 이상)*/
@media only screen and (min-width: 1280px) {
    .footer-cs {padding: 30px 0;}
    .cs-info { width: calc(100% - 684px); }
    .cs-info dt img { width: 100px; }
    .cs-info dd a { font-size: 3.6rem; }
    .cs-info dd span { font-size: 1.2rem; }
    a.cs-kakao, 
    .cs-menu a {
        width: 100px;
        height: 40px;
        padding-top:60px;
        line-height: 40px;
        font-size: .875rem;
    }
    .cs-menu a { margin-left: 12px;}
    .footer-main-menu a {padding:0 2rem;}
    .footer-menu a {font-size: 1.125rem;}
    .contentsTitle ul { grid-template-columns: repeat(5, 1fr); }
}
/* 6. 대형 화면 (1640px 이상) */
@media only screen and (min-width: 1600px) {
    :root {
        --container-width: 1500px;
        --fixed-search-width: calc(1000px - 10rem) ;
        --container-padding: calc(50% - 750px);
        --container-side: calc(50% + 755px);
        --product-summary-img-zone: calc(33% + 135px);
        --product-summary-img: calc(33% + 100px);
        --product-summary-info-zone: calc(67% - 135px);
    }
    .header-category {left:250px; }
    .header-category .btn-category { width: 10rem; font-size: 1.25rem;}
    .header-menu { left: calc(280px + 10rem); right: 500px;}
    .header-menu a{ font-size: 1.25rem; }
    .header-search { left: 250px; right: 500px;}
    .header-user {top:50px;width: 450px;}
    .header-user a{ width: 78px; height: 78px; background-size: 50px; }
    .header-user a>span { top:calc(100% + 10px); width: 85px; margin: 0; opacity: 1; }
    .fixed-header .header-user,
    .compact-header .header-user { width: 350px; }
    .fixed-header .header-user a,
    .compact-header .header-user a { width: 50px; height: 50px; margin: auto; background-size: 35px; overflow: hidden; text-align: center;}
    .footer-cs {padding: 35px 0;}
    .cs-info { width: calc(100% - 822px); }
    .cs-info dt { padding-right: 17px; }
    .cs-info dt img { width: 147px; }
    .cs-info dd a { font-size: 4rem; }
    a.cs-kakao, 
    .cs-menu a {
        width: 120px;
        height: 50px;
        padding-top:70px;
        line-height: 50px;
        font-size: .875rem;
    }
    .cs-menu a { margin-left: 15px;}
    .contentsTitle ul { grid-template-columns: repeat(6, 1fr); }
    .product_list { grid-template-columns: repeat(5, 1fr);}

}