.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: #000000;

  background-image: url("https://b.xn--qoxzm.xn--fiqs8s/gm/sym/bg.sym");

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

  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%;

  position: relative;

}



.animateImgSmall {

  width: 100%;

  background: url(https://b.xn--qoxzm.xn--fiqs8s/gm/sym/sequence_s_1.sym) no-repeat center / cover;

  margin: 0 auto;

}



.animateImg {

  width: 100%;

  background: url(https://b.xn--qoxzm.xn--fiqs8s/gm/sym/sequence_1.sym) no-repeat center / cover;

  margin: 0 auto;

}



.logo_effects {

  width: 80%;

  position: absolute;

  bottom: 1%;

  right: 0;

  left: 0;

  margin: auto;

}



.lightning {

  position: absolute;

  bottom: 0;

  /* -webkit-animation: lightning 1s infinite;

  animation: lightning 1s infinite; */

}



.game_logo {

  position: absolute;

  bottom: 0;

}



.download {

  width: 98%;

  display: flex;

  margin: -10% auto 1%;

  position: relative;

  z-index: 99;

}



.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://b.xn--qoxzm.xn--fiqs8s/gm/sym/story_content.sym');

}



#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://b.xn--qoxzm.xn--fiqs8s/gm/sym/introduce_1.sym');

}



.introduce_img2 {

  background-image: url('https://b.xn--qoxzm.xn--fiqs8s/gm/sym/introduce_2.sym');

}



.introduce_img3 {

  background-image: url('https://b.xn--qoxzm.xn--fiqs8s/gm/sym/introduce_3.sym');

}



.introduce_img4 {

  background-image: url('https://b.xn--qoxzm.xn--fiqs8s/gm/sym/introduce_4.sym');

}



#cherryBlossomContainer {

  position: fixed;

  width: 100%;

  height: 100vh;

  z-index: 10;

  top: 60px;

  pointer-events: none;

}



@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;

  }

  .logo_effects {

    width: 30%;

    position: absolute;

    bottom: 3%;

    right: 0;

    left: 0;

    margin: 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: pulse 1s ease-in-out both infinite;

  animation: pulse 1s ease-in-out both infinite;

}



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

  }

}



@-webkit-keyframes lightning {

  0%, 100% {

    opacity: 0;

  }

  10% {

    opacity: 0.6;

  }

  20% {

    opacity: 0;

  }

  30% {

    opacity: 0.8;

  }

  40%, 70% {

    opacity: 0;

  }

  80% {

    opacity: 1;

  }

  90% {

    opacity: 0;

  }

}



@keyframes lightning {

  0%, 100% {

    opacity: 0;

  }

  10% {

    opacity: 0.6;

  }

  20% {

    opacity: 0;

  }

  30% {

    opacity: 0.8;

  }

  40%, 70% {

    opacity: 0;

  }

  80% {

    opacity: 1;

  }

  90% {

    opacity: 0;

  }

}