/* 데스크탑 */
@media all and (min-width:1260px){

    .homebanner{
        cursor:pointer;
    }

    .static_banner{
        margin-top: 10rem;
        margin-bottom: 10rem;
        height: 30rem;
        background-image:url("{% static 'img/static_banner.jpg' %}");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    /* 베스트 상품 */
    .best_product_text{
        width: 100%;
        max-width: 126rem;
        height: 4rem;
        line-height: 4rem;

        margin: auto;
        margin-top: 10rem;
        margin-bottom: 2rem;

        
        font-size: 2.4rem;
        
        color: #000;
    }
    .product_list{
        margin: auto;
        width: 100%;
        max-width: 126rem;
        display: flex;
        justify-content: space-between;
        
    }
    .product_list .product{
        width:22%;
        cursor:pointer;
        text-decoration:none;
        
    }
    .product_list .product:hover{
        text-decoration: none;
    }
    /* 제품 이미지 */
    .product_list .product_img {
        /* background-image:url("{% static 'img/product1.gif' %}"); */
        position: relative;
        width: 100%;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .product_list .product_img img{
        width:100%;
    }

    /* 제품 이름 */
    .product_list .product_name{
        color: #333;
        font-size:1.6rem;
        margin-top: 1rem;
    }
    .product_list .product_name_sub{
        font-size:1.4rem;
        color:#969696;

    }

    .product_list .product_price{
        color: #333;
        font-size: 1.8rem;
        margin-top:0.5rem;
        cursor:pointer;
    }




    @media all and (min-width:0px) and (max-width:1100px){
        .mobile_hidden{
            display:none !important;
        }
        .desktop_hidden{
            display:unset  !important
        }
    }
    @media all and (min-width:1260px){
        .mobile_hidden{
            display:flex  !important;
        }
        .desktop_hidden{
            display:unset  !important
        }
    }

    .story_box{
        width: 100%;
        margin: auto;
        color:  #333;
    }

    /* 언박싱 랭킹 */
    .story_box .ranking_box{
        width: 100%;
        /* height: 34rem; */
        display: flex;
        flex-flow:column;
        align-items: center;
        margin-top: 10rem;
    }
    .story_box .ranking_box .ranking_title{
        width: 100%;
        max-width: 126rem;
        height: 4rem;
        line-height: 4rem;
        font-size: 2.4rem;
    }
    .story_box .ranking_box .ranking_subtitle{
        width: 100%;
        max-width: 126rem;
        font-size: 1.5rem;
        
        color:#646464;
    }

    .story_box .ranking_box .product_comment_list{
        width:100%;
        max-width:126rem;
        display:flex;
        flex-flow:wrap;
        justify-content: space-between;
    }

    .story_box .ranking_box .product_comment_list .comment{
        width:23rem;
        display:flex;
        flex-flow:column;
        cursor:pointer;
        margin-top:1.5rem;
        margin-bottom:1.5rem;
        font-size:1.3rem;
    }
    .story_box .ranking_box .product_comment_list .comment:empty{
        width:23rem;
        height:0;
        margin:0;
    }

    .story_box .ranking_box .product_comment_list .comment .comment_product_image{
        width:23rem;
        height:23rem;
        display:flex;
        align-items: center;
        justify-content: center;
        overflow:hidden;
        border:1px solid #EBEBEB;
        overflow:hidden;
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_image img{
        height:100%;
        width:auto;
    }

    .story_box .ranking_box .product_comment_list .comment .comment_product_name{
        width:100%;
        height:2.5rem;
        margin-top:1rem;
        display: flex;
        font-size:1.3rem;
        color:#969696;
        
        
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_name .title_span{
        max-width:19rem;
        height:2.5rem;
        line-height:2.5rem;
        overflow: hidden;                   /* 넓이 86.66%를 넘는 내용에 대해 말줄임 */
        text-overflow: ellipsis;            /* 보여줄 내용이 길면 내용의 일부만 표여주고 ...표시 */
        white-space: normal;                /*  white-space와 overflow: hidden 제거되면 text-overflow가 적용되지 않음 */
        text-align: left;                   /* 텍스트 정렬*/
        word-wrap: break-word;              
        display: -webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;          /* 보여주려는 줄 수 -> 실행되려면 위에 두줄이 필요함*/  
        
        
        
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_name .count_span{
        min-width:4rem;
        height:2.5rem;
        line-height:2.5rem;
        white-space: nowrap;
        
        
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_content{
        width:100%;
        height:2.5rem;
        line-height:2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        text-align: left;
        word-wrap: break-word;              
        display: -webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        font-size:1.4rem;
        color:black;
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_content p{
        margin: initial;
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_info{
        display:flex;
        height:2rem;
        margin-top:1rem;
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_info .user{
        margin-right:1rem;
        font-size:1.3rem;
        
    }
}
/* 스와이퍼 */
/* :root {
    --swiper-theme-color: #000
} */
.mySwiper img{
    width: 100%;
}
.mySwiper .swiper-pagination-bullet{
    font-size: 2rem;
    background-color: white;
    opacity: 0.2;
}
.mySwiper .swiper-pagination-bullet-active{
    font-size: 2rem;
    background-color: white;
    opacity: 0.5;
}
.mySwiper .swiper-button-next::after, 
.mySwiper .swiper-button-prev::after{
    font-size: 3rem;
    color: white;
    opacity: 0.5;
}


.mySwiper .swiper-button-prev{
    width:5rem;
    left:3%;
}

.mySwiper .swiper-button-next{
    width:5rem;
    right:3%;
}