.swal2-styled.swal2-confirm {

  background-color: #2279a7;

}



.swal2-styled.swal2-confirm:focus {

  box-shadow: 0 0 0 3px #5aa5ce;

}



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

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

}


.swal_content{
  text-align: left;
}



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

  background: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/siko/images/bg.jpg") fixed center;

  background-size: cover;

  background-repeat: no-repeat;

  overflow-x: hidden;

}
a{
  cursor: pointer
}


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: sticky;

  top: 0;

}



.logo {

  height: 30px;  

  position: absolute;

  top: 0;

  bottom: 0;

  left: 20px;

  margin: auto;

  object-fit: contain;

}



.logo img {  
  height: 30px;
  width: auto;
}



.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: 92%;

  display: flex;

  margin: 0 auto;

}



.download a {

  margin: -16% auto 0;

  padding: 0 5px;

}


.reminder {
    color: #000000;
    text-align: center;
    margin: -5% auto 0;
    padding: 10px 15px;
    background-color: #ffffffcc;
    border-radius: 20px;
}
  .reminder h4{
    font-size: 16px; 
    
    padding: 0 0 5px;
   }
   .reminder p{
    font-size: 14px; 
    line-height: 20px; 
    font-weight: lighter; 
   }
   .reminder strong{
    font-weight: bolder;  
   }

#story{

  margin:10% 0 0;

}

#character{

  margin:15% 0 0;

}

#introduce{

  background: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/siko/images/introduce_s.png") center;

  background-size: cover;

  background-repeat: no-repeat;

  padding: 25% 0 25% 0;

  margin: 15% 0 0 0;

}





@media (min-width: 767.98px) {
 #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: 38%;


  }

  .download a {

    margin: -16% auto 0;
  
  }
  
  .reminder {
    max-width: 600px;
    margin: -2% auto 0;
}

  #story{

    margin:3% 0 0;

  }

  #character{

    margin:5% 0 0;

  }

  #introduce{    

    background: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/siko/images/introduce.png") center;

    background-size:cover;    

    background-repeat: no-repeat;

    padding: 9% 0 9% 0; 

    margin: 8% 0 0;   

  }

  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)

    }

  }

}