/* swiper */

.swiper-banner{ width: 100%; }
.swiper-banner img{ width: 100%; }

.swiper-button-next, .swiper-button-prev {
    top: 50%;
    width: 35px;
    height: 64px;
    margin: -17px 0 0;
    z-index: 10;
    background: url('../img/icon/slider-left.png') 0 0 no-repeat;
}


.swiper-button-next, .swiper-container-rtl .swiper-button-prev {background: url('../img/icon/slider-right.png') 0 0 no-repeat;}



.swiper-container-horizontal>.swiper-pagination-bullets{    bottom: 3px; text-align: left; padding-left:40px;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{  margin: 0 4px;}
.swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #fff; 

    opacity: 1;
    box-shadow: 0 0 2px rgba(0,0,0,.2);   
}

.swiper-pagination-bullet-active {

   background-color: #eb565f; 

    box-shadow: 0 0 0 ;
    width: 11px;
    height: 11px;
/*    margin-bottom: -1px!important;*/
}






/* 音樂搶先聽 */

.swiper-listen-first {
      width: 100%;
    }
    .swiper-listen-first .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: 80%;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-listen-first .swiper-slide:nth-child(2n) {
      width: 60%;
    }
    .swiper-listen-first .swiper-slide:nth-child(3n) {
      width: 40%;
    }


@media (max-width: 767px){

    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 3px;
        text-align: right;
        padding-left: 10px;
    }
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{  margin: 0 2px;}
    .swiper-pagination-bullet {    width: 5px;    height: 5px;}
    .swiper-pagination-bullet-active {width: 7px;    height: 7px;}
    .swiper-container-horizontal>.swiper-pagination-bullets-active .swiper-pagination-bullet{margin: 0 1px;}
}



/* 週邊商品 */

.swiper_block{ display: flex; }

    .swiper_block .swiper-container {
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper_block .swiper-slide {
      background-size: cover;
      background-position: center;


    }
     .swiper_block .swiper-slide:before{ padding-top: 56.25%; content: ''; display: block;}
    .swiper_block .gallery-top {
     padding-bottom: 31px;
     width: 67.5%;

      flex: auto;
    }
    .swiper_block .gallery-thumbs {
       width: 31.5%;
      flex: auto;
      box-sizing: border-box;
      padding: 0 0 0px 0;
      margin-left: 0px;

    }
.swiper_block .swiper-container-free-mode>.swiper-wrapper{ height: calc(100% - 48px); 

  

 }

    .swiper_block .gallery-thumbs .swiper-slide {
      width: 25%;

      text-align: center;
      font-size: 18px;
      height: calc(100%  / 4);
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      background-size: cover;
      cursor: pointer;
    }
    .swiper_block .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
.swiper_block .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0px;
    padding-left: 0px;
    text-align: center;
}
.swiper_block .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 1;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
}
.swiper_block .swiper-pagination-bullet-active {
    background-color: #026773;
}

.swiper_block  .swiper-button-next, .swiper_block  .swiper-button-prev{ width: 10px; height:19px; top: 100%; z-index: 11;}
.swiper_block  .swiper-button-next{background:url(../img/ic/ic-goods-swiper-right.png) 0 0 no-repeat ; background-size: cover;}
.swiper_block  .swiper-button-prev{background:url(../img/ic/ic-goods-swiper-left.png) 0 0 no-repeat ; background-size: cover;}



/* scroll */

.swiper-container-vertical>.swiper-scrollbar{width: 10px; border-radius: 0; right:0}
.swiper-scrollbar-drag{border-radius: 0;}
.swiper-scrollbar-drag{ background-color: #878787; }
/*
@media (max-width:1280px){
    .swiper_block .gallery-thumbs {margin-left:0px;}

}*/


.gallery-top .swiper-slide{ margin-right: 10px!important; width: calc(100% - 10px)!important; }

@media (max-width:767px){
.swiper_block .gallery-thumbs, .swiper_block .gallery-top{ width: 100%; }
}