/* 모바일 */
@media all and (min-width:0px) and (max-width: 1259px){
    /* 배너 이미지 사이즈 */
    .carousel-inner img {
        width: 100%;
        image-rendering: -webkit-optimize-contrast;
    }
    .static_banner{
        margin-top: 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: 94%;
        height: 4rem;
        line-height: 4rem;

        margin: auto;
        margin-top: 5rem;
        margin-bottom: 2rem;
        font-size: 2rem;
        
        color: #000;
    }
    .product_list{
        color: rgb(60, 60, 60);
        margin: auto;
        width: 98%;
        max-width: 126rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        

    }
    .product_list .product{
        width: 45%;
        max-width:28rem;
        cursor:pointer;
        display: flex;
        flex-flow: column;
        text-decoration: none;
    }
    .product:empty{
        height:0;
    }
    .product_list .product:hover{
        text-decoration: none;
    }

    /* 제품 이미지 */
    .product_list .product_img {
        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.5rem;
        padding-top:0.8rem;
        margin-top: 1rem;
    }
    .product_list .product_name_sub{
        font-size:1.1rem;
    }


    .product_list .product_price{
        color: #333;
        font-size: 1.6rem;
        margin-top:1rem;
        margin-bottom:2rem
        
    }

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


    .story_box .ranking_box{
        width: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        margin-top: 5rem;
    }
    .story_box .ranking_box .ranking_title{
        width: 100%;
        height: 4rem;
        line-height: 4rem;
        font-size: 2rem;
        color:#000;
    }

    .story_box .ranking_box .ranking_subtitle{
        width: 100%;
        max-width: 126rem;
        margin-bottom:1.5rem;
        font-size: 1.3rem;
        color:gray;
    }


    .story_box .ranking_box .product_comment_list{
        width:100%;
        display:flex;
        flex-flow:wrap;
        justify-content: space-around;
    }

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

    .story_box .ranking_box .product_comment_list .comment .comment_product_image{
        width:100%;
        max-width:23rem;
        display:flex;
        align-items: center;
        justify-content: center;
        overflow:hidden;
        border:1px solid rgb(230,230,230);
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_image:after{
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_image img{
        width:100%;
        height:auto;
    }


    .story_box .ranking_box .product_comment_list .comment .comment_product_name{
        width:100%;
        height:2rem;
        margin-top:1rem;
        display: flex;
        color:rgb(150,150,150);
        
        
        
    }
    .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;          /* 보여주려는 줄 수 -> 실행되려면 위에 두줄이 필요함*/  
        font-size:1.2rem
        
        
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_name .count_span{
        min-width:4.5rem;
        height:2.5rem;
        line-height:2.5rem;
        font-size:1.2rem;
        
        
        
    }
    .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.3rem
    }
    .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:0.5rem;
        
        
        
    }
    .story_box .ranking_box .product_comment_list .comment .comment_product_info .user{
        margin-right:1rem;
        font-size:1.2rem
        
        
        
    }


}

@media all and (min-width:0px) and (max-width:700px){
    .comment_detail_modal{
        position:   fixed;
        z-index:    1001;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: rgba(0,0,0,.75);
        padding-bottom:10rem;
        overflow-y:auto;
        display:none;
        z-index:1002;
    }
    .comment_detail_modal .comment_loading_spinner{
        width:100%;
        height:100%;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .comment_detail_modal .modal_close_button{
        width:8rem;
        height:8rem;
        border-radius:50%;
        background:black;
        color:white;
        display:flex;
        align-items: center;
        justify-content: center;
        font-size:4rem;
        cursor:pointer;
        box-shadow:5px 5px 10px rgb(0,0,0,0.5);
        margin:auto;
        margin-bottom:3rem;
        margin-top:3rem;
    }

    .comment_detail_modal .comment_detail{
        width:92%;
        max-width:126rem;
        background:rgb(250,250,250);
        border:1px solid rgb(230,230,230);
        border-radius:10px;
        box-shadow:5px 5px 10px rgb(0,0,0,0.5);
        padding:6.5%;
        margin:auto;
    }

    .comment_detail_modal .comment_detail .comment_top{
        display:flex;
        flex-flow:column;
        align-items: center;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_main_image{
        width:20rem;
        height:20rem;
        background:white;
        border-radius:10px;
        overflow:hidden;
        margin-right:2rem;
        display:flex;
        align-items: center;
        justify-content: center;
        border:1px solid rgb(230,230,230);
    }
    .comment_detail_modal .comment_detail .comment_top .comment_main_image img{
        width:100%;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info{
        width:100%;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .product_title{
        font-size:1.4rem;
        color:rgb(150,150,150);
        margin-top:1rem;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .product_content{
        margin-top:1rem;
        margin-bottom:2rem;
        font-size:1.5rem;
        
        white-space:pre-wrap;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment_image{
        width:100%;
        height:auto;
        margin-top:3rem;
        margin-bottom:3rem;
    }



    .comment_detail_modal .comment_detail .comment_top .comment_info .comment_registered{
        display:flex;
        font-size:1.4rem;
        
        justify-content: flex-end;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .comment_registered .writer{
        margin-right:2rem;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment{
        width:100%;
        margin-top:1rem;
        display:none;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment .hashbox_logo{
        height:4rem;
        display:flex;
        align-items: center;
        border-top:1px solid rgb(230,230,230);
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment .hashbox_comment_content{
        font-size:1.3rem;
        
        white-space: pre-wrap;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info .point_reward_comment_alarm{
        font-size:1.3rem;
        
    }


    .comment_detail_modal .comment_detail .comment_bottom{
        margin-top:3rem;
        
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_record_title{
        height:3rem;
        display:flex;
        align-items: center;
        font-size:1.5rem;
        
        
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records{
        min-height:4rem;
        background:white;
        border:1px solid rgb(230,230,230);
        border-radius:10px;
        display:flex;
        flex-flow:wrap;
        padding:2rem;
        padding-bottom:0;
        
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record{
        width:100%;
        display:flex;
        margin-bottom:2rem;

    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .left_part{
        width:9rem;
        min-width:9rem;
        border-radius:5px;
        overflow:hidden;
        margin-right:1.5rem;
        display:flex;
        align-items: center;
        justify-content: center;
        border:1px solid rgb(230,230,230);

    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .left_part img{
        width:100%;
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part{
        width:77.5%;
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .product_name{
        height:2rem;
        font-size:1.2rem;
        
        line-height:2rem;
        overflow: hidden;                   /* 넓이 86.66%를 넘는 내용에 대해 말줄임 */
        text-overflow: ellipsis;            /* 보여줄 내용이 길면 내용의 일부만 표여주고 ...표시 */
        white-space: normal;                /*  white-space와 overflow: hidden 제거되면 text-overflow가 적용되지 않음 */
                                            /* 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리*/
        width: 100%;                        /* 라인 너비*/
        text-align: left;                   /* 텍스트 정렬*/
        word-wrap: break-word;              

        display: -webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical  
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .original_price{
        height:2.5rem;
        font-size:1.3rem;
        color:rgb(183,62,49);
        
        
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .blockchain_link{
        width:12rem;
        height:3rem;
        font-size:1rem;
        
        border-radius:5px;
        color:white;
        display:flex;
        align-items: center;
        justify-content: center;
        
        cursor:pointer;
        margin-top:1rem;

        background:transparent;
        border:1px solid rgb(90,90,90);
        color:black;
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .blockchain_link:hover{
        border:1px solid rgb(183,62,49)
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .blockchain_link img{
        height:65%;
        width:auto;
        margin-right:0.5rem;
    }
    /* 증빙자료 */
    .comment_detail_modal .comment_detail .buy_record{
        margin-top:3rem;
        display:none
    }
    .comment_detail_modal .comment_detail .buy_record .buy_record_title{
        height:3rem;
        display:flex;
        align-items: center;
        font-size:1.5rem;
        
        
    }

    .comment_detail_modal .comment_detail .buy_record .evidence_box{
        background:white;
        border:1px solid rgb(230,230,230);
        border-radius:10px;
        overflow:hidden;
        text-align:center;
        display:flex;
        flex-flow:column;
        align-items: center;
    }
    .comment_detail_modal .comment_detail .buy_record .evidence_box img{
        width:100%;
        max-width:50rem;
    }

}

@media all and (min-width:700px){
    .comment_detail_modal{
        position:   fixed;
        z-index:    1001;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: rgba(0,0,0,.75);
        flex-flow:column;
        justify-content: center;
        align-items: center;
        overflow-y:auto;
        display:none;
        z-index:1002;
        padding-bottom:10rem;
    }

    .comment_detail_modal .comment_loading_spinner{
        width:100%;
        height:100%;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .comment_detail_modal .modal_close_button{
        width:8rem;
        height:8rem;
        border-radius:50%;
        background:black;
        color:white;
        display:flex;
        align-items: center;
        justify-content: center;
        font-size:4rem;
        cursor:pointer;
        box-shadow:5px 5px 10px rgb(0,0,0,0.5);
        margin:auto;
        margin-bottom:3rem;
        margin-top:5rem;
        display:none;
        
    }

    .comment_detail_modal .comment_detail{
        width:92%;
        max-width:126rem;
        min-height:50rem;
        background:rgb(250,250,250);
        border:1px solid rgb(230,230,230);
        border-radius:10px;
        box-shadow:5px 5px 10px rgb(0,0,0,0.5);
        padding:4rem;
        margin:auto;
        margin-top:5rem;
        display:none;
    }

    .comment_detail_modal .comment_detail .comment_top{
        width:100%;
        display:flex;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_main_image{
        width:16.67%;
        max-width:20rem;
        min-width:17rem;
        border-radius:10px;
        overflow:hidden;
        margin-right:2rem;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_main_image img{
        width:99%;
        height:auto;
        border:1px solid rgb(230,230,230);
        background:white;
        border-radius:10px;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info{
        width:83.3%;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .product_title{
        width:100%;
        font-size:1.4rem;
        height:2.5rem;
        color:rgb(150,150,150);
        margin-top:1rem;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .product_content{
        width:100%;
        margin-top:1rem;
        margin-bottom:2rem;
        font-size:1.5rem;
        
        white-space:pre-wrap;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment_image{
        width:100%;
        max-width:40rem;
        height:auto;
        margin-top:3rem;
        margin-bottom:3rem;
    }


    .comment_detail_modal .comment_detail .comment_top .comment_info .comment_registered{
        display:flex;
        font-size:1.4rem;
        
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .comment_registered .writer{
        margin-right:2rem;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment{
        width:100%;
        margin-top:1rem;
        display:none;
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment .hashbox_logo{
        height:4rem;
        display:flex;
        align-items: center;
        border-top:1px solid rgb(230,230,230);
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .hashbox_comment .hashbox_comment_content{
        font-size:1.3rem;
        
        white-space:pre-wrap;
    }

    .comment_detail_modal .comment_detail .comment_top .comment_info .point_reward_comment_alarm{
        font-size:1.3rem;
        
    }
    .comment_detail_modal .comment_detail .comment_top .comment_info .point_reward_comment_alarm_variable{
        margin-top:0.5rem;
    }

    .comment_detail_modal .comment_detail .comment_bottom{
        margin-top:3rem;
        
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_record_title{
        height:3rem;
        display:flex;
        align-items: center;
        font-size:1.5rem;
        
        
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records{
        min-height:4rem;
        background:white;
        border:1px solid rgb(230,230,230);
        border-radius:10px;
        display:flex;
        flex-flow:wrap;
        padding:2rem;
        padding-bottom:0;
        
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record{
        width:48%;
        display:flex;
        margin-bottom:2rem;

    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .left_part{
        width:17.65%;
        max-width:10rem;
        min-width:8rem;
        height:10rem;
        
        border-radius:5px;
        overflow:hidden;
        margin-right:1.5rem;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .left_part img{
        width:100%;
        border:1px solid rgb(230,230,230);
        border-radius:5px;
    }

    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part{
        width:82.34%;
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .product_name{
        height:2rem;
        font-size:1.4rem;
        
        line-height:2rem;
        overflow: hidden;                   /* 넓이 86.66%를 넘는 내용에 대해 말줄임 */
        text-overflow: ellipsis;            /* 보여줄 내용이 길면 내용의 일부만 표여주고 ...표시 */
        white-space: normal;                /*  white-space와 overflow: hidden 제거되면 text-overflow가 적용되지 않음 */
                                            /* 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리*/
        width: 100%;                        /* 라인 너비*/
        text-align: left;                   /* 텍스트 정렬*/
        word-wrap: break-word;              

        display: -webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical  
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .original_price{
        height:2.5rem;
        font-size:1.8rem;
        color:rgb(183,62,49);
        
        
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .blockchain_link{
        width:15.5rem;
        height:3.5rem;
        font-size:1.3rem;
        
        border-radius:5px;
        color:white;
        display:flex;
        align-items: center;
        justify-content: center;
        
        cursor:pointer;
        margin-top:1rem;
        background:transparent;
        border:2px solid rgb(90,90,90);
        color:black;
    }
    
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .blockchain_link:hover{
        border:2px solid rgb(183,62,49)
    }
    .comment_detail_modal .comment_detail .comment_bottom .unboxing_records .blockchain_record .right_part .blockchain_link img{
        height:80%;
        width:auto;
        margin-right:0.5rem;
    }


    /* 증빙자료 */
    .comment_detail_modal .comment_detail .buy_record{
        margin-top:3rem;
        display:none
    }
    .comment_detail_modal .comment_detail .buy_record .buy_record_title{
        height:3rem;
        display:flex;
        align-items: center;
        font-size:1.5rem;
        
        
    }

    .comment_detail_modal .comment_detail .buy_record .evidence_box{
        background:white;
        border:1px solid rgb(230,230,230);
        border-radius:10px;
        overflow:hidden;
        text-align:center;
        display:flex;
        flex-flow:column;
        align-items: center;
    }
    .comment_detail_modal .comment_detail .buy_record .evidence_box img{
        width:100%;
        max-width:50rem;
    }


}