@charset "utf-8";

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
           code by 姚
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/


/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
           場景介紹
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.chapter {
  position: absolute !important;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  display: block;
  z-index: 61;
  background-color: rgba(255, 127, 80, 0);
  /*顏色標記*/
}


.view .dark_mask {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 62;
  pointer-events: none;
  display: block;

  background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/dark_mask_pc.webp);
  background-size: cover;
  background-repeat: no-repeat;
}


/*標題*/
.view .chapter .view_title {
  position: absolute !important;
  width: 14vw;
  height: auto;
  padding-bottom: 0%;
  top: 11%;
  right: 7%;
  z-index: 66 !important;

  overflow: hidden;
  background-color: rgba(6, 74, 134, 0);
  /*--顏色標記--*/

  filter: blur(50px) brightness(20);
  opacity: 0;
}


.view .chapter .swiper-slide.swvd.swiper-slide-active .view_title {
  animation: logo_in_309 cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: 0.8s;
  animation-duration: 1s !important;
}




/*影片區*/
.chapter .swiper-slide .videoArea {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
}

.chapter .videoArea .menpi_v {
  object-fit: cover;
  object-position: left top;
  height: 100%;
  width: 100%;
  display: block;
}


/*手機影片_按鈕*/
.view .chapter .swiper-slide .sp_play_btn {
  position: absolute;
  width: 17%;
  height: auto;
  padding-bottom: 0%;
  z-index: 68;

  background-image: url(../image/sp_play.webp);
  background-repeat: no-repeat;
  background-size: 100%;

  cursor: pointer;

  display: none;
  opacity: 0;
  filter: blur(50px) brightness(20);
}



.view .chapter .swiper-slide.c1 .sp_play_btn {
  top: 44%;
  left: 79%;
}

.view .chapter .swiper-slide.c2 .sp_play_btn {
  top: 52%;
  left: 79%;
}

.view .chapter .swiper-slide.c3 .sp_play_btn {
  top: 52%;
  left: 79%;
}

.view .chapter .swiper-slide.c4 .sp_play_btn {
  top: 52%;
  left: 79%;
}

.view .chapter .swiper-slide.c5 .sp_play_btn {
  top: 52%;
  left: 79%;
}

.view .chapter .swiper-slide.c6 .sp_play_btn {
  top: 52%;
  left: 79%;
}

.view .chapter .swiper-slide.c7 .sp_play_btn {
  top: 52%;
  left: 79%;
}

.view .chapter .swiper-slide.c8 .sp_play_btn {
  top: 52%;
  left: 79%;
}



/*中央*/
.view .main_center {
  position: absolute;
  width: 72vw;
  height: auto;
  padding-bottom: 0%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 65;
  background-color: rgba(226, 21, 21, 0);
  /*顏色標記*/
}




/*----大選項----*/
.s12_thumbs_box {
  position: absolute !important;
  width: 90%;
  height: 17%;

  bottom: -2%;
  left: 4%;

  z-index: 70 !important;
  background-color: rgba(6, 74, 134, 0);
  /*--顏色標記--*/

  opacity: 0;
}


/*----大選項----*/
.view.swiper-slide-active .s12_thumbs_box {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: both;
  opacity: 1;
}


.view .s12_thumbs_box .chapter_thumbs {
  position: absolute;
  width: 84.6%;
  height: auto;
  padding: 2%;
  top: -11%;
  left: 7.8%;

  z-index: 81;
  overflow: hidden;

  background-color: #23279b00;
  /*顏色標記*/
}



.view .chapter_thumbs .swiper-slide {
  position: relative;
  padding-bottom: 9%;
  opacity: 1;
  cursor: pointer;
}



/*--縮圖--*/
.view .chapter_thumbs .swiper-slide.ct01 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_01.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct01.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_01_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}


.view .chapter_thumbs .swiper-slide.ct02 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_02.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct02.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_02_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}



.view .chapter_thumbs .swiper-slide.ct03 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_03.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct03.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_03_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}


.view .chapter_thumbs .swiper-slide.ct04 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_04.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct04.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_04_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}


.view .chapter_thumbs .swiper-slide.ct05 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_05.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct05.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_05_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}


.view .chapter_thumbs .swiper-slide.ct06 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_06.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct06.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_06_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}


.view .chapter_thumbs .swiper-slide.ct07 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_07.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct07.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_07_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}


.view .chapter_thumbs .swiper-slide.ct08 {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_08.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

.view .chapter_thumbs .ct08.swiper-slide-active {
  background-image: url(https://images2.iwplay.com.tw/image/zxsj/main/image/view/thumbs_08_on.webp) !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}






/*-------箭頭-------*/
.view .arrow_box {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 8%;
  top: 26.5%;
  left: 0%;
  z-index: 80;
  background-color: #56f00f00;
  /*顏色標記*/
  opacity: 1;
}



.view .wv-prev,
.view .wv-next {
  position: absolute;
  width: 6%;
  height: auto;
  padding-bottom: 6%;
  z-index: 70;
  background-color: #f00f2900;
  /*顏色標記*/

}

.view .wv-next {
  background: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/arrow_n.webp) no-repeat;
  background-size: 100%;
  right: 1%;
  outline: none;
  transition: 0.2s;
  transform: translateX(0%);
}

.view .wv-next:hover {
  transition: 0.2s;
  transform: translateX(9%);
}


.view .wv-prev {
  background: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/arrow_p.webp) no-repeat;
  background-size: 100%;
  left: 1%;
  outline: none;
  transition: 0.2s;
  transform: translateX(0%);
}

.view .wv-prev:hover {
  transition: 0.2s;
  transform: translateX(-9%);
}




@media (max-width:1500px) {


  .s12_thumbs_box {
    width: 95%;
    height: 17%;
    bottom: 0%;
    left: 3.4%;
  }

}


@media (max-width:1100px) {

  .chapter .videoArea .menpi_v {
    object-fit: cover;
    object-position: center top;
    height: 100%;
    width: 100%;
    display: block;
  }

  .view .chapter .view_title {
    width: 26vw;
    right: 0%;
  }




  /*--小圖--*/
  .s12_thumbs_box {
    width: 100%;
    height: 8%;
    bottom: 5%;
    left: -0.6%;
  }

  .chapter_thumbs {
    width: 58%;
    left: 1.2%;
    padding-bottom: 13%;
  }


  .view .chapter_thumbs .swiper-slide {
    padding-bottom: 16%;
  }


  /*--箭頭--*/
  .view .arrow_box {
    width: 111%;
    padding-bottom: 15%;
    top: 1%;
    left: -5%;
  }

  .s12_thumbs_box .wv-prev,
  .s12_thumbs_box .wv-next {
    width: 9.5%;
    height: 69%;
    top: 30%;
  }

  .s12_thumbs_box .wv-prev {
    left: 2%;
  }

  .s12_thumbs_box .wv-next {
    right: 2%;
  }

}


@media (max-width:767px) {

  .view .chapter .view_title {
    width: 36vw;
    right: -4%;
  }

  .view .thumbs_line {
    display: none;
  }

  .view .chapter_thumbs {
    display: none;
  }



  /*壓暗*/
  .view .dark_mask {
    display: none;
  }



  /*選項*/
  .view .s12_thumbs_box {
    width: 137%;
    height: 13%;
    bottom: 8%;
    left: -18.6%;
  }


  /*箭頭*/
  .view .arrow_box {
    width: 111%;
    padding-bottom: 22%;
    top: 21%;
    left: -5%;
  }

  .view .s12_thumbs_box .wv-prev,
  .s12_thumbs_box .wv-next {
    width: 15.5%;
    height: 75%;
    padding-bottom: unset;
    top: 30%;
  }

  .view .s12_thumbs_box .wv-prev {
    left: 30%;
  }

  .view .s12_thumbs_box .wv-next {
    right: 30%;
  }



  /*影片*/
  .view .chapter .swiper-slide.c1 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_5_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c2 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_3_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c3 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_4_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c4 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_9_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c5 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_6_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c6 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_7_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c7 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_8_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .view .chapter .swiper-slide.c8 .videoArea {
    background-image: url(https://images4.iwplay.com.tw/image/zxsj/main/image/view/view_big_bg_1_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }



  /*影片隱藏*/
  .view .chapter .swiper-slide .videoArea video {
    display: none;
  }


  /*手機影片_按鈕*/
  .view .chapter .swiper-slide .sp_play_btn {
    display: block;
  }


  .view .chapter .swiper-slide .sp_play_btn img {
    animation: magnify_yt .6s linear infinite alternate;
  }

  .view .chapter .swiper-slide.swvd.swiper-slide-active .sp_play_btn {
    animation: logo_in_309 cubic-bezier(0.19, 1, 0.22, 1) both;
    animation-delay: 1s;
    animation-duration: 1s !important;
  }

}