.swal2-styled.swal2-confirm {



  background-color: #002680;



}



.swal2-styled.swal2-confirm:focus {



  box-shadow: 0 0 0 3px #04b1e6;



}



.swiper-3d .swiper-slide-shadow {



  background: rgba(0, 0, 0, .15)



}



.swiper-3d .swiper-slide-shadow-left {



  background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3))



}



.swiper-3d .swiper-slide-shadow-right {



  background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3))



}



.swiper-3d .swiper-slide-shadow-top {



  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3))



}



.swiper-3d .swiper-slide-shadow-bottom {



  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3))



}







body {



  font-family: "jf-openhuninn", "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;



  width: 100%;



  position: relative;



  overflow-x: hidden;



  background-color: #04b1e6;



}







body::before {



  content: "";



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  z-index: -1;



  background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/bg.jpg");



  background-size: cover;



  background-repeat: no-repeat;  



  background-position: center;



}







img {



  width: 100%;



  display: block;



}







h5{



  padding: 5px 0 10px;



}







#qr{



  position: fixed;



  z-index: 999;



  right: 30px;



  bottom: 30px;  



  width: 80px;  



  padding: 5px 10px 10px;



  border-radius: 5px;  



  background-color: #ffffff;



  cursor:pointer ;



  text-align: center;



  display: none;



}







.navbar {



  width: 100%;



  height: 60px;



  background: #000000;



  position: fixed;



  top: 0;



  z-index: 100;



}







.logo {



  height: 30px;



  position: absolute;



  top: 0;



  bottom: 0;



  left: 20px;



  margin: auto;



}







.logo img {



  width: auto;



  height: 30px;



}







.navbar_nav {



  width: 250px;



  height: calc(100vh - 60px);



  background: #000000;



  position: fixed;



  top: 60px;



  right: -250px;



  transition: .5s;



}







.navbar_nav a {



  display: block;



  text-decoration: none;



  color: #ffffff;



  padding: 20px;



  border-bottom: 1px solid #818181;



  text-align: center;



}







.menu_btn {



  width: 50px;



  height: 50px;



  background: #000000;



  position: absolute;



  top: 5px;



  right: 10px;



  margin: auto;



}







.menu_btn span {



  opacity: 0;



  width: 1px;



  height: 1px;



}







.menu_btn::after {



  content: '';



  position: absolute;



  width: 36px;



  height: 2px;



  left: 7px;



  background: #ffffff;



  top: 0;



  bottom: 0;



  margin: auto;



  box-shadow: 0 10px 0 #ffffff,



    0 -10px 0 #ffffff;



}







#menu_control {



  opacity: 0;



  position: absolute;



}







#menu_control:checked~.navbar_nav {



  right: 0;



}







.pc {



  display: none;



}







.sequence {



  width: 100%;



}







.animateImgSmall{



  width: 100%;



  background: url(https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/sequence_s_1.png) no-repeat center / cover;;



  margin: 0 auto;



}







.download {



  width: 98%;



  display: flex;



  margin: -1% auto 1%;



}







.download a {



  margin: 0 auto;



  padding: 0 3px;



}



.reminder{



  color: #ffffff;



  text-align: center;



  margin: 0 auto;



  padding: 10px 15px; 



}



.reminder h4{



  font-size: 16px; 



  color: yellow;



  padding: 0 0 5px;



 }



 .reminder p{



  font-size: 14px; 



  line-height: 20px; 



  font-weight: lighter; 



 }



 .reminder strong{



  font-weight: bolder;  



 }







.title {



  width: 40%;



  margin: 10% auto 4%;



}







.content{



  width: 90%;



  margin: 0 auto;



}

#story .content{
  margin: -5px auto 0;

}

.content img {



  width: 100%;



  margin: 0 auto;



  background-repeat: no-repeat;



  background-position: center;



  background-size: cover;



  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/story_content.png');



}



#introduce{



  margin-bottom: 10%;



}



.swiper-slide img {



  width: 100%;



  margin: 0 auto;



  background-repeat: no-repeat;



  background-position: center;



  background-size: cover;



}



.introduce_img1 {



  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/introduce_1.jpg');



}



.introduce_img2 {



  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/introduce_2.jpg');



}



.introduce_img3 {



  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/introduce_3.jpg');



}



.introduce_img4 {



  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/introduce_4.jpg');



}







@media (min-width: 768px) {



  #qr{    



    display: block;



  }



  .menu_btn {



    display: none;



  }



  .navbar_nav {



    width: auto;



    height: 60px;



    display: flex;



    top: 0;



    right: 0;



  }







  .navbar_nav a {



    border-bottom: none;



  }







  .mobile {



    display: none;



  }







  .pc {



    display: block;



  }



  .animateImg{



    width: 100%;



    background: url(https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/xc/images/sequence_1.png) no-repeat center / cover;  



    margin: 0 auto;



    



  }



  .download {



    width: 44%;



    margin: -1% auto 0;



  }







  .download a {



    margin: 0 auto 0;



    padding: 10px;

  }







  .title {



    width: 14%;



    margin: 6% auto 2%;



  }







  .content{



    width: 60%;



  }



 



  #introduce{



    margin-bottom: 5%;



  }







}







a:hover {



  -webkit-animation-duration: 1s;



  animation-duration: 1s;



  -webkit-animation-fill-mode: both;



  animation-fill-mode: both;



  -webkit-animation-iteration-count: infinite;



  animation-iteration-count: infinite;



  -webkit-animation-name: pulse;



  animation-name: pulse;



  -webkit-animation-timing-function: ease-in-out;



  animation-timing-function: ease-in-out



}



@-webkit-keyframes pulse {



  0% {



    -webkit-transform: scaleX(1);



    transform: scaleX(1)



  }



  50% {



    -webkit-transform: scale3d(1.05, 1.05, 1.05);



    transform: scale3d(1.05, 1.05, 1.05)



  }



  to {



    -webkit-transform: scaleX(1);



    transform: scaleX(1)



  }



}



@keyframes pulse {



  0% {



    -webkit-transform: scaleX(1);



    transform: scaleX(1)



  }



  50% {



    -webkit-transform: scale3d(1.05, 1.05, 1.05);



    transform: scale3d(1.05, 1.05, 1.05)



  }



  to {



    -webkit-transform: scaleX(1);



    transform: scaleX(1)



  }







}