.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/yn/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: 40px;







  position: absolute;







  top: 0;







  bottom: 0;







  left: 10px;







  margin: auto;







}















.logo img {







  width: auto;







  height: 40px;







}















.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/yn/images/sequence_s_1.png) no-repeat center / cover;;







  margin: 0 auto;







}















.download {







  width: 98%;







  display: flex;







  margin: -10% 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/yn/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/yn/images/introduce_1.jpg');







}







.introduce_img2 {







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







}







.introduce_img3 {







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







}







.introduce_img4 {







  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yn/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/yn/images/sequence_1.png) no-repeat center / cover;  







    margin: 0 auto;







    







  }







  .download {







    width: 44%;







    margin: -6% 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)







  }















}