/* //////////////////////////////////// sec02 世界觀 //////////////////////////////////// */
#section02, 
#section02 .swiper, 
#section02 .swiper-slide,
.swiper-button-next,
.swiper-button-prev {
  user-select: none;  /* 禁止選取文字 */
  -webkit-user-select: none;
  -ms-user-select: none;
}



  #section02 .swiper.mySwiper2 {
      width: 100%;
      height: 100%;
      padding: 0;
    }

  #section02 .mySwiper2 .swiper-slide {
      text-align: center;
      font-size: 18px;
      background-color: #ffffff00;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #000;
      background-size: cover;
      background-position: center;
    }

    /*上方章節-大圖*/
    #section02 .mySwiper2 .bg_noise{
      position: absolute;
      bottom: 0%;
      width: 100%;
      mix-blend-mode: difference;
    }


    /*上方章節-大圖*/
      /* #section02 .mySwiper2 img.chap_bg {
          display: block;
          width: 100%;
          height: 100%;
          opacity: .8;
          filter: blur(2px);
        } */
      #section02 .bg_block {
        display: block;
        width: 100%;
        height: 100%;
        /* object-fit: fill; */
        opacity: .8;
        filter: blur(2px);
      }
      #section02 .chap_1 {
        background: url(../images/sec_world/p2_bg_1.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_2 {
        background: url(../images/sec_world/p2_bg_2.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_3 {
        background: url(../images/sec_world/p2_bg_3.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_4 {
        background: url(../images/sec_world/p2_bg_4.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_5 {
        background: url(../images/sec_world/p2_bg_5.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_6 {
        background: url(../images/sec_world/p2_bg_6.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_7 {
        background: url(../images/sec_world/p2_bg_7.webp) no-repeat center center;
        background-size: 99.5% auto;
      }
      #section02 .chap_8 {
        background: url(../images/sec_world/p2_bg_8.webp) no-repeat center center;
        background-size: 99.5% auto;
      }





    /*上方章節-內文區塊*/
      #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
        position: absolute;
        top: 17%;
        width: 60%;
        /* border: 1px solid #fff; */
      }

      /* 讓文字本身做漸層 */
      #section02 .mySwiper2 div.chap_title{
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #section02 .mySwiper2 h5{
        filter: drop-shadow(2px 2px 4px black);
        color: #ffecc9d7 ;
      }
      #section02 .mySwiper2 h2{
        background: linear-gradient(to bottom, #f5deb2 30%, #ddaa5e 50%, #f7e4b2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        display: inline-block; /* 有時需要讓 span 是 block 才會正確套用 */
        font-weight: 700;
        filter: drop-shadow(2px 2px 4px black);
        animation: brightly 1s infinite alternate;
      }


      #section02 .mySwiper2 .swiper-slide .swiper-slide-con img{
        width: 280px;
        margin-bottom: 1.8rem;
        animation: brightly 1s infinite alternate;
      } 
      #section02 .mySwiper2 h4{
        font-size: 1.2rem;
        line-height: 33px;
        color: #fff;
        filter: drop-shadow(2px 2px 10px black);
        padding: 0 7px;
        overflow: scroll;
        overflow-x: hidden;/* 隱藏水平滾動條 */
      }
      #section02 .mySwiper2 h4::-webkit-scrollbar {
        display: block !important;
        width: 3px;
      }
      /* #section02 .mySwiper2 h4::-webkit-scrollbar-track{
        background-color: #26334207;
        border-radius: 10px;
        margin: 10px 5px;
      }
      #section02 .mySwiper2 h4::-webkit-scrollbar-thumb{
        border-radius: 10px;
        background-color: rgba(34, 35, 36, 0.637);
      } */
      /* 隱藏水平 scrollbar，只保留垂直 */
      ::-webkit-scrollbar:horizontal {
        display: none !important;
      }




      @keyframes brightly {
        from {
          filter: brightness(100%);
          /* transform: scale(1); */
        }
        to {
          filter: brightness(120%) drop-shadow(0px 0px 5px #5a5743);
          /* transform: scale(1.2); */
        }
      }





    /*下方章節-按鈕*/
    #section02 .mySwiper {
      width: 40%;
      height: 56px;
      position: absolute;
      bottom: 6%;
      z-index: 999;
      box-sizing: border-box;
      /* padding: 10px 0; */
      /* border: 1px solid #fff; */
      margin-left: auto;
      margin-right: auto;
    }

    #section02 .mySwiper .swiper-slide {
      opacity: 0.5;

    }
    #section02 .mySwiper .swiper-slide img{
      width: 160px ;
    }
    #section02 .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
      transform: scale(1.05);
      transition: 0.3s;
    }


      /* 給 mySwiper 的左右箭頭 */
      .swiper-thumb-prev,
      .swiper-thumb-next {
        top: 200%;
        width: 25px;
        height: 25px;
        background-color: rgba(255, 255, 255, 0);
        z-index: 10;
        opacity: 0;
      }

      .swiper-thumb-prev {
        opacity: 0;
        left: 0;
      }

      .swiper-thumb-next {
        opacity: 0;
        right: 0;
      }
      .swiper-thumb-prev,
      .swiper-thumb-next{
        display: none;
      }

      #section02 .swiper-button-next,
      #section02  .swiper-button-prev{
        /* top: 92.5%; */
        top: 50%;
        width: 80px;
        height: 60px;
      }
      /* #section02 .swiper-button-next{
        right: 25%;
      }
      #section02 .swiper-button-prev{
        left: 25%;
      } */
      #section02 .swiper-button-next.swiper-button-disabled, 
      #section02 .swiper-button-prev.swiper-button-disabled{
        opacity:0;
        }


/* /////////////////////////////////////// RWD設定 /////////////////////////////////////// */
/* /////////////////////////////////////// RWD設定 /////////////////////////////////////// */
/* /////////////////////////////////////// RWD設定 /////////////////////////////////////// */
/* /////////////////////////////////////// RWD設定 /////////////////////////////////////// */
/* /////////////////////////////////////// RWD設定 /////////////////////////////////////// */
/* /////////////////////////////////////// RWD設定 /////////////////////////////////////// */



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

}

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

  /* ////////////////// section02 //////////////////  */
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
    top: 15%;
  }
  #section02 .mySwiper2 h2{
    font-size: 2rem !important;
  }
  #section02 .mySwiper2 h4{
    font-size: 1.1rem ;
    line-height: 33px;
    height: 100%;
    max-height: 415px;
    
  }
  #section02 .mySwiper .swiper-slide img{
    width: 100%;
    max-width: 130px;
  }

}



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




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

  /* ////////////////// section02 //////////////////  */
  #section02 .mySwiper2 h4{
    max-height: none;

  }

}


@media screen and (max-width: 1281px) {
  /* ////////////////// section02 //////////////////  */
  #section02 .mySwiper2 h4{
    font-size: 1rem;
    line-height: 26px;
  }

}



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

  /* ////////////////// sec02 ////////////////// */

      #section02 .chap_1 {
        background: url(../images/sec_world/p2_bg_m_1.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_2 {
        background: url(../images/sec_world/p2_bg_m_2.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_3 {
        background: url(../images/sec_world/p2_bg_m_3.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_4 {
        background: url(../images/sec_world/p2_bg_m_4.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_5 {
        background: url(../images/sec_world/p2_bg_m_5.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_6 {
        background: url(../images/sec_world/p2_bg_m_6.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_7 {
        background: url(../images/sec_world/p2_bg_m_7.webp) no-repeat center center;
        background-size: cover;
      }
      #section02 .chap_8 {
        background: url(../images/sec_world/p2_bg_m_8.webp) no-repeat center center;
        background-size: cover;
      }

      #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
        top: unset;
      }

      #section02 .mySwiper{
        width: 50%;
        height: 60px;
        bottom: 15%;
      }
}


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

  /* ////////////////// 02_ //////////////////  */


  #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
    width: 70%;
  }
  #section02 .mySwiper2 h5{
    font-size: 2rem;
  }
  #section02 .mySwiper2 h2{
    font-size: 3rem !important;
  }
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con img{
    width: 330px;
  }
  #section02 .mySwiper2 h4{
    font-size: 1.2rem;
    line-height:40px;
    height: auto;
    max-height: 750px;
  }
  #section02 .mySwiper{
    width: 60%;
    bottom:5%;
  }

}


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

  /* ////////////////// sec02 ////////////////// */
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
    width: 80%;
  }
  #section02 .mySwiper2 h4{
    max-height: 650px;
  }
  #section02 .mySwiper{
    width: 80%;
  }
  #section02 .swiper-button-next{
    right: -0%;
  }
  #section02 .swiper-button-prev{
    left: -0%;
  }

  /* ////////////////// sec05.06 ////////////////// */
  .light{
    top: 1%;
  }

}




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

  /* ////////////////// 02_ //////////////////  */
  #section02 .mySwiper2 h5{
    font-size: 1.5rem;
  }
  #section02 .mySwiper2 h2{
    font-size: 2.5rem !important;
  }
  /* #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
    top: 13%;
  } */
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con img{
    margin-bottom: 1.2rem;
  }
  #section02 .mySwiper2 h4{
    max-height: 580px;
    font-size: 1.1rem;
    line-height: 36px;
  }

}


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

  /* ////////////////// sec02 ////////////////// */
  #section02 .mySwiper2 h5{
    font-size: 1.3rem;
  }
  #section02 .mySwiper2 h2{
    font-size: 2.2rem !important;
  }
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
    top: 12%;
    width: 83%;
  }

  #section02 .mySwiper2 .swiper-slide .swiper-slide-con img{
    width: 280px;
  }
  #section02 .mySwiper{
    width: 88%;
  }


}

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

  /* ////////////////// sec02 ////////////////// */
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con{
    top: unset;
    margin-top: 6rem;
  }
  #section02 .mySwiper2 h4{
    max-height: 440px;
  }
  #section02 .swiper-button-next,
  #section02 .swiper-button-prev{
    width: 30px;
    height: 70px;
  }


}



@media screen and (max-width: 390px) {
  /* ////////////////// sec02 ////////////////// */
  #section02 .mySwiper{
    bottom: 0%;
  }
  #section02 .mySwiper2 h2{
    font-size: 2rem !important;
  }
  #section02 .mySwiper2 h4{
    font-size: 1rem;
    line-height:32px;
  }
}


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

  /* ////////////////// sec02 ////////////////// */
  #section02 .mySwiper2 h5{
    font-size: 1.1rem;
  }
  #section02 .mySwiper2 h2{
    font-size: 1.6rem !important;
  }
  #section02 .mySwiper2 .swiper-slide .swiper-slide-con img{
    width: 250px;
    margin-bottom: .7rem;
  }

  #section02 .mySwiper2 h4{
    max-height: 385px;
    font-size: 14px;
    line-height:28px;
    /* overflow: hidden; */
  }
  #section02 .mySwiper{
    width: 88%;
  }
  #section02 .swiper-button-next,
  #section02 .swiper-button-prev{
    width: 20px;
  }

}