@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');

/*--------------------------------------------------------------
(共用) CSS
--------------------------------------------------------------*/
* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'source-han-serif-tc', 'Maven Pro', 'Droid Sans', 'Myriad Pro', Helvetica, Verdana, Geneva, sans-serif;
  background: #1d1493;
  background-image: url(../img/bg_footer_dk.jpg);
  background-position: bottom;
  overflow-x: hidden;
}

* {
  /*chrome*/
  -webkit-box-sizing: border-box;
  /*firefox*/
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:focus {
  outline: none;
  /*去除藍框*/
}

input,
button,
select,
textarea {
  outline: none;
  /*去除藍框*/
}

span {
  display: inline-block;
}

ol,
ul {
  padding-left: 0rem;
  list-style-type: none;
}

img {
  width: 100%;
  height: auto;
}

a {
  z-index: 100;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

a:hover {
  cursor: pointer;
}

a:focus,
a:active {
  outline: none;
}

.col-12 a:focus,
.col-12 a:active {
  outline: none !important;
}


/*--------------------------------------------------------------
(共用) 分級:18  nav部分隱藏
--------------------------------------------------------------*/

#index_lang_pc,
#index_lang_mb{
  display: none !important;
}

#gentleman_lang_pc{
  display: block !important;
} 


@media (max-width: 991.98px) {
  #index_lang_mb{
    display: none !important;
  }
    #gentleman_lang_mb{
    display: flex !important;
  }

}




/*--------------------------------------------------------------
(共用) 分級:18  footer部分隱藏  
--------------------------------------------------------------*/
.rank_con ul li .icon img.rank_15{
  display: none;
}
.rank_con ul li .icon img.rank_18{
  display: block;
}





/*--------------------------------------------------------------
(共用) 滾動條
# scrollbar
--------------------------------------------------------------*/
::-webkit-scrollbar {
  width: 10px;
  background: #9ccecb94;
}

::-webkit-scrollbar-button {
  background: transparent;
  border-radius: 50px;
}

::-webkit-scrollbar-track-piece {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background-color: #4ca9dc;
  border: 1px solid #87d7f5;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #87d7f5;
}

::-webkit-scrollbar-track {
  box-shadow: transparent;
}

/* 滾動條-scrollbar-end */


/*--------------------------------------------------------------
(共用) content CSS
--------------------------------------------------------------*/

/* ------------------------------ content CSS ------------------------------ */

/* #new_page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
} */

section {
  height: 100vh;
}

section#sec_00 {
  height: 90vh;
  background: #efbfff;
  /*#dd88f9*/
}


/* 外部容器樣式 */
#sec_00 {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}



/* ------------------------------ Swiper 區塊 ------------------------------ */
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #25012e;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    
    .swiper-button-next:after,
    .swiper-button-prev:after{
      display: none;
    }

    .swiper-button-next,
    .swiper-button-prev{
      width: calc(var(--swiper-navigation-size)/ 17 * 27);
      height: auto;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    .swiper-button-next:hover,
    .swiper-button-prev:hover{
      filter: hue-rotate(302deg);
    }

    .swiper-button-prev img{
      transform: rotate(180deg);
    }


    /** 隱藏/顯示 X 手機版/電腦版 **/
    .swiper-slide img.img_mb { 
      display:none; 

      @media (width < 1025px) {
        display:block;
        object-fit: cover;
      }
    }

     @media (width < 1025px) {
        .swiper-slide img.img_pc { 
          display:none !important; 
        }
      }





  




/* ------------------------------ 標題 X 按鈕區塊 ------------------------------ */
.sloganbtn_con {
  width: 75%;
  position: absolute;
  bottom: 5%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (width < 1600px) {
    padding: 0 3%;
  }

  @media (width < 1500px) {
    width: 80%;
    padding: 0;
    margin-left: 0%;
  }

  @media (width < 1280px) {
    width: 90%;

  }
  

}


/* ---------- 文案 ---------- */
.title_con {
  position: relative;
  z-index: 99;
  width: 50%;
  margin-left: -2%;
}


.slogan {
  position: relative;
  animation: light 3s ease-in-out infinite alternate;
}

.slogan_mb{
  display: none;
}



  @keyframes light {

    0% {
      filter: drop-shadow(0 0 0px #ffffff6c) brightness(1) contrast(100%);
      transform: scale(1);
    }

    20% {
      filter: drop-shadow(0 0 2px #fff) brightness(1.05) contrast(103%);
      transform: scale(1.01);
    }

    40% {
      filter: drop-shadow(0 0 0px #ffffff6c) brightness(1) contrast(100%);
      transform: scale(1);
    }

    60% {
      filter: drop-shadow(0 0 2px #fff) brightness(1.05) contrast(103%);
      transform: scale(1.01);
    }

    80% {
      filter: drop-shadow(0 0 0px #ffffff6c) brightness(1) contrast(100%);
      transform: scale(1);
    }

    100% {
      filter: drop-shadow(0 0 2px #fff) brightness(1.05) contrast(103%);
      transform: scale(1.01);
    }

  }



/* ---------- app  ---------- */

.app_all {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  -moz-gap: 1.5rem;
  margin: auto;
  margin-top: 2rem;
}


.app_all a {
  width: 200px;
  height: auto;
  text-align: center;
  margin: auto;
  padding: 0rem;
}

.app_all a:hover {
  animation: ahover 0.5s infinite alternate;
}

  @keyframes ahover {
    0% {
      filter: brightness(1);
    }

    100% {
      filter: brightness(1.3);
    }
  }





/*--------------------------------------------------------------
(共用) RWD  
--------------------------------------------------------------*/

@media (max-width: 1025px) {

  section#sec_00 {
    height: 92vh;
  }


  /*標題x按鈕 區*/
  .sloganbtn_con {
    bottom: 4%;
    z-index: 99;
    width: 85%;
    margin-left: 0%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }


  /*標題*/
  .title_con {
    position: relative;
    width: 100%;
  }

  .app_all a{
    width: auto;
  }

}


@media (max-width: 992px) {

  section#sec_00 {
    height: 90vh;
  }

  /*標題X按鈕 區*/
  .sloganbtn_con {
    width: 90%;
  }

}




@media (max-width: 769px) {
  #new_page {
    width: 100%;
    height: 100%;
  }
  .sloganbtn_con{
    bottom: 10%;
  }
  .app_all {
    width: 88%;
  }

  .slogan_pc{
    display: none;
  }
  .slogan_mb{
    display: block;
  }


}




@media (max-width: 480px) {
  #new_page {
    height: auto;
  }

  section#sec_00 {
    height: 86.5vh;
  }

  .swiper-button-next, .swiper-button-prev{
    width: calc(var(--swiper-navigation-size)/ 17 * 18);
    padding-top: 0;
  }
}