﻿.gallery-slider {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
  }
  .gallery-slider .swiper-container {
    width: 100%;
    height: 100%;
  }
  .gallery-slider .swiper-slide {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .gallery-slider .swiper-slide__bg-image {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  .gallery-slider .swiper-button-next, .gallery-slider .swiper-button-prev {
    margin-top: -26px;
  }
  .gallery-slider .swiper-button-next {
    right: 0;
  }
  .gallery-slider .swiper-button-prev {
    left: 0;
  }
  
  .gallery-slider .swiper-pagination {
    width: 100%;
    font-size: 0;
    bottom: 0;
  }
  .gallery-slider .swiper-pagination-bullet {
    width: 6px;
    height: 4px;
    background-color: blue;
    border-radius: 0;
    opacity: 1;
  }
  .gallery-slider .swiper-pagination-bullet-active {
    background-color: blue;
  }
  .gallery-slider .swiper-button-next,
  .gallery-slider .swiper-button-prev {
    z-index: 10;
  }

  .gallery-slider .swiper-button-next::after,
  .gallery-slider .swiper-button-prev::after{
      display: none;
  }

  .gallery-slider .swiper-button-next.-dark,
  .gallery-slider .swiper-button-prev.-dark {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .gallery-slider .swiper-button-prev.-dark{
    left: 9rem;
    background-image: url(../image/icon_arrow_r_double_prev.png);
  }

  .gallery-slider .swiper-button-next.-dark{
    right: 9rem;
    background-image: url(../image/icon_arrow_r_double_next.png);
  }

  .gallery-slider .swiper-container iframe{
      width: 100%;
      height: 100%;
  }

  /* Slick */
  .gallery-slider .slick-slide{
      position:relative;
  }
  
  .gallery-slider .slick-slide img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
    
  .gallery-slider .slick-prev,
  .gallery-slider .slick-next{
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
  }
  .gallery-slider .slick-prev{
    left: 9rem;
    background-image: url(../image/icon_arrow_r_double_prev.png);
  }
  .gallery-slider .slick-next{
    right: 9rem;
    background-image: url(../image/icon_arrow_r_double_next.png);
  }

  .gallery-slider .slick-prev::before,
  .gallery-slider .slick-next::before{
      display: none;
  }

  .gallery-slider .sticky-mirrorPro-sec blockquote .blackcolor * {
    color: #fff !important;
  }

  .gallery-slider .sticky-mirrorPro-sec blockquote{
      position: relative;
      left: 50%;
      top:35%;
      transform: translate(-50%,0);
      text-align: center;
  }

  .gallery-img-block{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .gallery-banner-video .banner-movie{
    width: 100%;
  }

  /*  */
  .gallery-slider-mobile{
    display: none;
  }

  @media screen and (min-width:1101px) {
    .banner-video,
    .gallery-slider .slick-slide{
        height: 100vh !important;
    }

    .gallery-slider .sticky-mirrorPro-sec{
        position: static;
    }
    .gallery-banner-video .banner-movie{
      height: 100vh;
    }
  }

  @media screen and (min-width:1600px){
    .gallery-img{
      position:relative;
      top:-7rem
    }
  }

  @media screen and (max-width:1100px) {
    .gallery-slider .slick-dotted.slick-slider {
        margin-bottom: 28px;
    }
    .gallery-slider.index .slick-dotted.slick-slider {
        margin-bottom: 0;
    }
    .gallery-slider .slick-prev,
    .gallery-slider .slick-next{
        display: none !important;
    }
    
    .gallery-slider .slick-dots{
        position: relative;
        background-color: #000;
        padding-top: 5px;
        padding-bottom: 5px;
        bottom: auto;
    }
    
    .gallery-slider .slick-dots li button::before {
        font-size: 15px;
        color:#fff;
    }
    .gallery-slider .slick-dots li.slick-active button::before {
        opacity: 1 !important;
    }
    
    .gallery-slider .sticky-mirrorPro-sec{
        background-size: cover;
    }
    .gallery-slider .sticky-mirrorPro-sec blockquote{
        position: absolute;
    }
    .gallery-slider .sticky-mirrorPro-sec blockquote .big-text{
        display: none;
    }

    .mirrorCourse.gallery-slider .slick-slide img,
    .cycleCourse.gallery-slider .slick-slide img {
      height: 400px;
      object-fit: cover;
      object-position: center;
    }

    .fancybox-slide--current{
      padding: 0;
    }
    .fancybox-slide--video .fancybox-content {
      padding: 0;
      width: 100% !important;
      min-height: 320px;
    }

    .gallery-slider-desktop{
      display: none;
    }

    .gallery-slider-mobile{
      display: block;
    }

  }

  /* @media screen and (max-width:400px) {
    .mirrorCourse.gallery-slider .slick-slide img,
    .cycleCourse.gallery-slider .slick-slide img {
      height: 200px;
    }
  } */

    
  .gallery-slider.index .slick-list,
  .gallery-slider.index .slick-slide{
    height:auto !important
  }
  
  .gallery-slider.index .slick-slide img{
    position:static !important
  }
  
  @media screen and (max-width:1100px) {
    /* 首頁 &  */
    .gallery-slider.index .slick-slide img{
      object-fit: cover;
      object-position: center;
      /* height: 360px; */
    }

    .gallery-slider.index .gallery-img-block,
    .gallery-slider.index .gallery-banner-video,
    .gallery-slider.mirrorCourse .gallery-img-block,
    .gallery-slider.cycleCourse .gallery-img-block{
      position: relative;
      /* height: 0;
      padding-bottom: 50%; */
    }

    .gallery-slider.index .gallery-img-block img,
    .gallery-slider.index .gallery-banner-video iframe,
    .gallery-slider.mirrorCourse .gallery-img-block img,
    .gallery-slider.cycleCourse .gallery-img-block img{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
    .gallery-slider.index .gallery-banner-video iframe {
      height: 100%;
    }
  }