.swal2-styled.swal2-confirm {

  background-color: #4e0d06;

}



.swal2-styled.swal2-confirm:focus {

  box-shadow: 0 0 0 3px #7f2c03;

}



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

}



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

}



.download {

  width: 95%;

  display: flex;

  margin: -10% auto 0;

}



.download a {

  margin: 0 auto 0;

  padding: 0 5px;

}

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

}



.content{

  width: 90%;

  margin: 0 auto ;

}



#introduce{

  margin-bottom: 10%;

}





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

  }



  .download {

    width: 44%;

    margin: -8% auto 0;

  }

  .download a {

    margin: 0 auto 0;

    

  }



  .title {

    width: 18%;

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

  }

}