﻿.SCat-Nav.simple-inner-list .SCat-Main .list-page-cat .hidden-fild-banner {
    display:none;
}
.SCat-Nav.simple-inner-list .SCat-Main  {
   list-style:none;
   margin-left: 0;
}
.SCat-Nav.simple-inner-list .SCat-Main li {
        display: inline-block;
        padding: 10px 10px;
    }
    .SCat-Nav.simple-inner-list .SCat-Main li .list-page-cat .cat-t {
        padding: 5px 20px;
        background-color: #aaaaaa;
        color: #fff;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        -webkit-transition: all 200ms ease-out 0s;
        -moz-transition: all 200ms ease-out 0s;
        -o-transition: all 200ms ease-out 0s;
        transition: all 200ms ease-out 0s;
    }
    .SCat-Nav.simple-inner-list .SCat-Main li:hover .list-page-cat .cat-t {
        background-color: #02502f;
        -webkit-transition: all 200ms ease-out 0s;
        -moz-transition: all 200ms ease-out 0s;
        -o-transition: all 200ms ease-out 0s;
        transition: all 200ms ease-out 0s;
    }
    .SCat-Nav.simple-inner-list .SCat-Main li.SCat-Active .list-page-cat .cat-t {
        background-color: #064f2d;

    }
.smple-image-div img {
    width: 100%;
}


.PagingTable .LastPage , 
.PagingTable .NextPage  , 
.PagingTable .PreviousPage  , 
.PagingTable .FirstPage  {
    font-size: 0 !important;
}
.PagingTable .LastPage::after , 
.PagingTable .NextPage::after , 
.PagingTable .PreviousPage::before  , 
.PagingTable .FirstPage::before  {
    font-size: 14px !important;
}



/***********************************detail************************/


#dnn_ctr782_ProductList_dlProductList {
    display: flex;
    flex-wrap: wrap;
}
.ListCell-custome, .AltListCell-custome {
    padding: 15px;
    float:right;
}
.custome-col{
    min-height:250px;
}
    .custome-col .ref-list {
        margin-top: 20px;
        color: #717171;
    }
    .custome-col .boc-oroduct-list .list-pro-img img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
    .custome-col .boc-oroduct-list:hover .list-pro-img img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
    .custome-col .boc-oroduct-list .list-pro-img {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
    .custome-col .boc-oroduct-list:hover .list-pro-img {
        -moz-box-shadow: 0 0 15px #e6e6e6;
        -webkit-box-shadow: 0 0 15px #e6e6e6;
        box-shadow: 0 0 15px #e6e6e6;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
.hidden-fild-banner1{
    display:none;
}
.pain-detail{
    display:inline-block;
    width:100%;
}
.detail .smple-image-div {
    position:relative;
}
.detail .tt-slid-prowuct {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
}
.Detail .right {
    float: right !important;
    width: 25%!important;
}
.detail .smple-image-div .tt-slid-prowuct {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
    bottom: 50px;
    left: 10%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    font-size: 30px;
    color: #fff;
    text-align:center;
}
    .detail .smple-image-div .tt-slid-prowuct .tt {
        margin-bottom: 30px;
        line-height: 40px;
    }
.other-img .GalleryOuter .GalleryInner {
    position:relative;
    padding:15px;
}
    .other-img .GalleryOuter .GalleryInner .Gallery.Image {
        width: 100%;
        max-width: 100%;
    }
    .other-img .GalleryOuter .GalleryInner:before {
        content: '';
        width: 80%;
        height: 76%;
        border: 1px solid #fff;
        position: absolute;
        z-index: 2;
        display: block;
        top: 50%;
        /* right: 0%; */
        left: 50%;
        transform: translate(-50%,-50%);
        pointer-events: none;
    }
.Detail .det-list {
    list-style: none;
    margin-bottom: 18px!important;
    margin-right: 18px!important;
}
    .Detail .det-list li {
        list-style-type: disc;
        color: #717171;
    }
        .Detail .det-list li::marker {
            color: #c1c1c1;
        }
        .Detail .det-list li .tt-pro {
            color: #000;
        }
.Detail .pain-detail {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-end;
}
    .Detail .pain-detail .det{
        margin-bottom:60px;
    }
.detail .product-detail-rel {
    padding-top:40px;
}
.product-detail-rel .rel-tt-div {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 1px solid #dadada;
    height: 1px;
    right: 0;
    left: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    margin-bottom:80px;
}
    .product-detail-rel .rel-tt-div .rel-tt {
        background-size: 30px;
        padding: 5px 5px 10px 33px;
        position: absolute;
        right: 0;
        top: -24px;
        background-color: #fff;
    }
.Detail .RelatedWrapper .RelatedOuter {
    padding:15px;
}
    .Detail .RelatedWrapper .RelatedOuter .Name {
        text-align: center;
        margin-top: 10px;
    }
        .Detail .RelatedWrapper .RelatedOuter .Name a {
            font-size: 14px;
            color: #717171;
        }
            .Detail .RelatedWrapper .RelatedOuter .Name a:visited {
                color: #717171;
            }
.bt-poro-mobile {
    display: none;
}
@media all and (min-width:1024px) {
    .ListCell-custome, .AltListCell-custome {
        flex: 0 0 20%;
        max-width: 20%;
        padding: 15px;
        float: right;
    }

}
@media all and (min-width:992px) and (max-width:1024px) {
    .custome-col {
        min-height: 260px;
    }
}
@media all and (max-width:992px) {

    .detail #wrap.tabid-208 {
        padding-top: 70px;
    }

    .detail .smple-image-div .tt-slid-prowuct {
        width: 150px;
        height: 150px;
        bottom: 10%;
    }

    .Detail .right {
        float: right !important;
        width: 45% !important;
    }
    .Detail .pain-detail{
        display:block;
    }
    /*********************category responsive*******************/
    .detail .bt-poro-mobile {
        display:none;
    } 
    .bt-poro-mobile {
        padding: 5px 3px;
        display: block;
    }

        .bt-poro-mobile .bt-mobile-list {
            padding: 18px 15px 18px 50px;
            border: 1px solid #d3d3d2;
            width: 100%;
            display: inline-block;
            background-color: #f7f7f5;
            color: #6f4f38;
            font-size: 15px;
            font-weight: bold;
            position:relative;
        }

            .bt-poro-mobile .bt-mobile-list:before {
                width: 20px;
                height: 20px;
                content: "";
                position: absolute;
                background: url(../images/btn-cat-left.png) 4% 2% no-repeat;
                left: 23px;
                transform: rotate( -90deg );
                top: 12px;
                -webkit-transition: .3s ease-in-out;
                transition: .3s ease-in-out;
            }

            .bt-poro-mobile .bt-mobile-list.yess:before {
                width: 20px;
                height: 20px;
                content: "";
                position: absolute;
                background: url(../images/btn-cat-left.png) 4% 2% no-repeat;
                left: 23px;
                transform: rotate( 90deg );
                top: 21px;
                -webkit-transition: .3s ease-in-out;
                transition: .3s ease-in-out;
            }

    .SCat-Nav.simple-inner-list .SCat-Main li{
        display: none;
        padding: 0 5px;
    }
    .SCat-Nav.simple-inner-list .SCat-Main.yess li {
        display: block;
        padding: 0px;
    }
            .SCat-Nav.simple-inner-list .SCat-Main li .list-page-cat .cat-t {
                -moz-border-radius: 0px;
                -webkit-border-radius: 0px;
                border-radius: 0px;
                border-bottom: 1px dashed;
                padding: 10px;
            }
            /*.SCat-Nav.simple-inner-list .SCat-Main.yess li{
                display: block;
            }*/

        .SCat-Nav.simple-inner-list .SCat-Main li.SCat-Active {
            display: block;
        }


}

@media all and (min-width:768px) and (max-width:991px) {
    .custome-col {
        min-height: 270px;
    }
}
@media all and (max-width:768px) {

    .detail .smple-image-div .tt-slid-prowuct {
        width: 150px;
        height: 150px;
        bottom: 5%;
        font-size: 20px;
    }
    .smple-image-div .img-sim-append {
        min-height: 130px;
    }
    .smple-image-div {
        padding-top: 75px;
    }

    .main-content {
        padding: 20px;
    }

    .Detail .right {
        width: 100%!important;
        float: none!important;
    }
        .Detail .right .image.import-img {
            text-align:center;
        }
}
@media all and (max-width:560px) {
    .detail .smple-image-div .tt-slid-prowuct {
        width: 150px;
        height: 130px;
        bottom: 5%;
        font-size: 20px;
    }
}
@media all and (max-width:480px) {
    .detail .smple-image-div .tt-slid-prowuct {
        width: 90px;
        height: 90px;
        font-size: 16px;
    }
        .detail .smple-image-div .tt-slid-prowuct .tt {
            margin-bottom: 6px;
            line-height: 21px;
        }
}

@media all and (max-width:380px) {
    .custome-col {
        min-height: 210px;
    }
    .Detail .right {
        float: none !important;
        width: 100% !important;
        text-align: center;
    }
    .Detail .pain-detail .left {
        padding: 10px 20px;
    }
}