/* BASIC css start */
.content_box {position:relative; }
.content_box img {width:100%;}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 !important;}
.detail-pagination{padding-top:6px;}
.swiper-container img {width:100%;}
.swiper-pagination {width:100%;}
.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: none !important;
    outline:none;
    opacity:1;
    transition: width 0.3s;
}
.swiper-pagination .swiper-pagination-bullet:after {
    content: "";
    width: 6px;
    height: 6px;
    margin: 3px;
    display: block;
    border-radius: 10px;
    background-color: rgb(255 255 255);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    border: #ccc solid 1px;
    box-sizing: border-box;
transition: width 0.3s;
}
.swiper-pagination .swiper-pagination-bullet-active {
    width: 27px;
    height: 12px;
    background: none !important;
    outline:none;
    opacity:1;
    transition: width 0.3s;
}
.swiper-pagination .swiper-pagination-bullet-active:after {
    content: "";
    width: 20px;
    height: 6px;
    margin: 3px;
    display: block;
    border-radius: 10px;
    background-color: rgb(255 255 255);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    border: #ccc solid 1px;
    box-sizing: border-box;   
}
.btn_slider_next {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 32px;
    padding:4px 10px;
    margin-top: -20px;
    z-index: 10;
    cursor: pointer;
    right: 0;
    left: auto;
    text-align:center;
    outline:none;
}
.btn_slider_prev {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 32px;
    padding:4px 10px;
    margin-top: -20px;
    z-index: 10;
    cursor: pointer;
    left: 0;
    right: auto;
    outline:none;
}
.btn_slider_prev img, .btn_slider_next img {width:100%;}
.multi-slider-pagination {padding-top:6px;}

@media screen and (min-width: 768px) {
  .content_box {max-width:720px; margin-left:auto; margin-right:auto;}
}
/* BASIC css end */