.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/ln/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: 10px;

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

  margin: 0 auto;

}

.download {

  width: 98%;

  display: flex;

  margin: -7% 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: 50%;

  margin: 10% auto 4%;

}

.content {

  width: 90%;

  margin: 0 auto;

}

#story .content {
  margin: -1% 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/ln/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/ln/images/introduce_1.jpg');

}

.introduce_img2 {

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

}

.introduce_img3 {

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

}

.introduce_img4 {

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

}
.introduce_img5 {

  background-image: url('https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/ln/images/introduce_5.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/ln/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: 18%;

    margin: 5% auto 2%;

  }

  .content {

    width: 60%;

  }



  #introduce {

    margin-bottom: 10%;

  }
}

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)
  }
}