/* -------------------------------------------------
    my-swiper
-------------------------------------------------*/
/*!按鈕箭頭顏色在swiper.css裡*/
.swiper-father {
    /*! width:100%; */
    /*! height: 400px; */
    /*! background: #f2f2f2; */
    /*! position: relative; */
    /*! margin: 30vh auto; */
    /*! padding: 50px; */
    /*! max-width: 1800px; */
}



.swiper-container {
    width: 100%;
    /*! height: 50vw; */
    /*! margin: 20px auto; */
    padding: 0 0 4.5rem 0;
    /*! max-width: 300px; */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /*! background: #ecc3eb; */

    /* 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-slide p{
  color: var(--white01);
  font-size: var(--fs-2xs);

  position: absolute;
  top: 103%;
  /*! left: 0; */
  letter-spacing: 0.1rem;
  text-align: left;
  margin: auto;
  right: 0;
  line-height: 1.5;
  opacity: 0;
  /*! height: 4rem; */
  /*! justify-content: center; */
  align-items: center;
  border-left: 2px solid #fff;
  padding: 0 0 0 0.5rem;
  max-width: 60%;
}

.swiper-slide.swiper-slide-active  p{
  opacity: 1;
}

.swiper-slide.swiper-slide-active img{
  border-top: 1px solid #616060;
  padding: 3px 0 3px 0;
  border-bottom: 1px solid #616060;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 23% !important;
  left: auto !important;
  width: 110px;
  height: 24px;
  background: #000000d9;
  top: 106% !important;
  border-bottom: 1px solid #fff;
  margin: 0 !important;
}
.swiper-button-next svg, .swiper-button-prev svg{
display: none;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left: 23% !important;
  right: auto !important;
  /*! width: 100px; */
  /*! height: 100px; */
  width: 110px;
  height: 24px;
  /*! background: #000000d9; */
  /*! border-radius: 50%; */
  border-bottom: 1px solid #fff;
  top: -40px !important;
  margin: 0 !important;
}

/* 2. 移除 Swiper 預設字體圖示並定義箭頭樣式 */
.swiper-button-prev:after,
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: ""; /* 關鍵：清空原本的 'prev' 或 'next' 文字 */
  display: block;
width: 43px;
  height: 8px;
  border-top: 1px solid #fff;
  /*! border-left: 2px solid #fffcfc; */
  font-family: none !important;
  /*! border-radius: 0px 50px 20px 47px; */
  position: absolute;
  right: -2px;
}


/* 箭頭向左 < */
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  transform: rotate(-45deg);
  /*! margin-left: 0; */ /* 視視覺效果微調位置 */
  right: 72px;
}

/* 箭頭向右 > */
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  transform: rotate(40deg);
  /*! margin-right: 0; */ /* 視視覺效果微調位置 */
}


@media screen and (max-width: 768px) {

.swiper-father {

    height: 90vh;
    width: 95%;
    margin: auto;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
}
.swiper-container {
height: 100%;

}
.swiper-slide {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 29vh !important;
    filter: brightness(0.2);
    margin: 0% auto 0;
    transform: scale(0.6) perspective(908px) rotateX(-55deg) !important;
    transform-origin: 50% 100%;


    margin-bottom: -36% !important;
}

.swiper-slide img{

      box-shadow:
        0 10px 25px rgba(0, 0, 0, 1),
        0 25px 60px rgba(0, 0, 0, 1),
        0 45px 90px rgba(0, 0, 0, 0.85);
}

.swiper-slide.swiper-slide-prev,.swiper-slide.swiper-slide-next{
filter: brightness(0.4);
}


.swiper-slide.swiper-slide-active{
   height: 50vh;
   filter: brightness(1);
   margin: 17% auto 0;
    transform: scale(1) perspective(0px) rotateX(0deg) !important;
    box-shadow:none;
   height: 50vh !important;
   /*! margin-bottom: -28% !important; */
   z-index: 99;
}



.swiper-slide p{
  color: var(--white01);
  font-size: var(--fs-xs);

  position: relative;
  top: initial;
  letter-spacing: 0.1rem;
  text-align: left;
  margin: auto;
  right: 0;
  line-height: 1.5;
  opacity: 0;
  align-items: center;
  border-left: 2px solid #fff;
  padding: 0 0 0 0.5rem;
  max-width: 80%;
  margin: 3% auto 10%;
}
.swiper-button-prev:after,
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: ""; /* 關鍵：清空原本的 'prev' 或 'next' 文字 */
  display: block;
  width: 19px;

  right: 0;
  left: 0;
}

.swiper-button-next::after {
  right: 0;
  left: 30px;
}


.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 0;
  left: 0;
  width: 50px;
  height: 8px;
  transform: rotate(90deg);
  margin: auto;
  bottom: 10%;
  top: initial;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {

  transform: rotate(90deg);
  right: 0;
  left: 0;
  width: 50px;
  height: 8px;
  margin: auto;
  top: 5%;
}
}


@media screen and (max-width: 376px) {

.swiper-father {

    width: 90%;
}

.swiper-slide.swiper-slide-active{
   height: 50vh;
}
}