@charset "utf-8";

.container {
  width: 100%;
  min-width: 1000px;
  overflow: hidden;
}

html,
body,
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.fullpage {
  width: 100%;
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.swiper-container .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  /* font-size: 80px; */
  font-weight: bold;
  color: #000;
  /* background-size: cover; */
}

.wrap {
  width: 100%;
  position: relative;
  /* background: url("../image/bg.jpg") no-repeat center top;
  background-size: 100%; */
}

.wrap.overtime {
  width: 100%;
  position: relative;
  /* background: url("../image/bg-overtime.jpg") no-repeat center top;
  background-size: 100%; */
}

@keyframes brightness {
  0% {
    filter: brightness(1);
  }

  10% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.5);
  }

  90% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes shinning {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

/*标题*/
.title {
  /* width: auto; */
  text-align: center;
}

.title img {
  width: 6.85rem;
  height: 2.19rem;
}

select::-ms-expand {
  display: none;
}

.zoom {
  -webkit-animation: pulse 1s infinite;
  -o-animation: pulse 1s infinite;
  animation: pulse 1s infinite;
}

.tiny-zoom {
  -webkit-animation: tinyScale 1s infinite;
  -o-animation: tinyScale 1s infinite;
  animation: tinyScale 1s infinite;
}

/* 导航栏 */
.head {
  width: 19.20rem;
  height: 0.90rem;
  position: fixed;
  top: 0;
  background: url(../image/section1/bg-header.png) no-repeat;
  /* background-color: #0d0b0c; */
  background-size: 100%;
  z-index: 9;
  font-size: 0;
  display: flex;
  align-items: center;
}

.logo {
  width: 2.34rem;
  height: 1.12rem;
  background: url('../image/section1/logo.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0.2rem;
  left: 1.1rem;
}

.header-ul {
  position: relative;
  width: 8.62rem;
  display: flex;
  vertical-align: middle;
  font-size: 0.22rem;
  color: #ffffff;
  height: 0.90rem;
  align-items: center;
  left: 6.8rem;
  justify-content: space-between;
}

.header-youtube {
  width: 0.50rem;
  height: 0.50rem;
  background: url('../image/section1/youtube.png') no-repeat;
  background-size: 100%;
  position: absolute;
  right: .26rem;
}

.header-twitter {
  width: 0.50rem;
  height: 0.50rem;
  background: url('../image/section1/twitter.png') no-repeat;
  background-size: 100%;
  position: absolute;
  right: 1.57rem;
}

.header-tiktok {
  width: 0.50rem;
  height: 0.50rem;
  background: url('../image/section1/tiktok.png') no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0.92rem;
}

.fb-login {
  width: 0.5rem;
  height: 0.50rem;
  background: url(../image/section1/facebook.png) no-repeat;
  background-size: 100%;
  position: absolute;
  right: 2.22rem;
}

/* Top */
.btn-top {
  width: 1.41rem;
  height: .96rem;
  background: url(../image/ben-top.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 3.75rem;
  left: 0.45rem;
}

.header-ul li {
  position: relative;
  cursor: pointer;
  height: 0.72rem;
  line-height: 0.72rem;
  user-select: none;
  font-family: 'Noto Serif JP', serif;
  font-size: .22rem;
}

.header-ul .title-active::before {
  content: '';
  position: absolute;
  width: 0.78rem;
  height: 0.68rem;
  background: url('../image/section1/title.png') no-repeat;
  background-size: 100%;
  left: 60%;
  transform: translateX(-50%);
  top: 0.05rem;
  z-index: -1;
}

.header-ul li:nth-child(4).title-active:before {
  left: 55%;
  transform: translateX(-50%);
  top: 0.05rem;
}

.header-ul li:nth-child(6).title-active:before {
  left: 55%;
  transform: translateX(-50%);
  top: 0.05rem;
}

/* .header-ul .title-active::after {
  content: '';
  position: absolute;
  width: 0.22rem;
  height: 0.14rem;
  background: url('../image/section1/right.png') no-repeat;
  background-size: 100%;
  right: -0.3rem;
  top: 0.28rem;
} */

.header-ul .title-active {
  color: transparent;
  background: linear-gradient(to bottom, white 33%, #b2e3c3 48%);
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
  font-weight: 600;
}

/* 页脚 */
.footer {
  width: 19.2rem;
  height: 3.16rem;

  position: relative;
  bottom: 0;
}



.footer .footer-pact {
  position: absolute;
  /* width: 100%; */
  bottom: 2.15rem;
  text-align: center;
  color: #8f8f8f;
  left: 50%;
  transform: translate(-50%);
  font-weight: normal;
}

/* 底部導航按鈕 */
.footer-media .order-store-ios,
.footer-media .order-store-gp {
  width: 1.38rem;
  height: .50rem;
  position: absolute;

}

.footer-media .order-store-ios {
  background: url(../image/footer_ios.png) no-repeat;
  background-size: 100%;
  top: 0rem;
  left: 2.05rem;
}

.footer-media .order-store-gp {
  background: url(../image/footer_gp.png) no-repeat;
  background-size: 100%;
  top: 0rem;
  left: 3.5rem;
}

.footer .footer-pact .header-ul {
  left: 0rem;
  text-align: center;
  color: #8f8f8f;
}

.footer .secret-pact,
.footer .utilize-pact {
  color: #fff;
  font-size: .14rem;
}

.footer .footer-text {
  position: absolute;
  width: 100%;
  bottom: 1rem;
  color: #fff;
  text-align: center;
}

.footer .footer-media {
  position: absolute;
  top: 1.37rem;
  left: 11.05rem;
  display: flex;
  width: 2rem;
  justify-content: space-around;
}

.footer .footer-twitter {
  font-size: 0;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../image/footer-twitter.png) no-repeat;
  background-size: 100%;
}

.footer .footer-youtube {
  font-size: 0;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../image/footer-youtube.png) no-repeat;
  background-size: 100%;
}

/*侧边栏*/
.slidebar {
  width: 2.08rem;
  height: 4.76rem;
  position: fixed;
  right: 0.15rem;
  top: 25%;
  z-index: 99;
  transition: all 0.3s;
}

.slidebar nav {
  font-size: 0;
  text-align: center;
  position: relative;
  left: 0.37rem;
  top: -0.3rem;
  z-index: 11;
}

.slidebar nav a {

  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
}

.slidebar nav a.nav-gp {
  width: 1.28rem;
  height: 0.46rem;
  background-image: url(../image/slidebar-gp.png);
  top: 3.06rem;
  left: 0.03rem;
  transition: all 0.6s;
}

.slidebar nav a.nav-gp.overtime {
  background-image: url(../image/slidebar-gp-overtime.png);
}

.slidebar nav a.nav-as {
  width: 1.29rem;
  height: 0.45rem;
  background-image: url(../image/slidebar-as.png);
  top: 3.58rem;
  left: 0.03rem;
  transition: all 0.6s;
}

.slidebar nav a.nav-as.overtime {
  background-image: url(../image/slidebar-as-overtime.png);
}

.slidebar nav a.nav-twitter {
  width: 1.35rem;
  height: 0.49rem;
  background-image: url(../image/slidebar-twitter.png);
  top: 2.55rem;
  left: 0rem;
  transition: all 0.6s;
}

.slidebar nav a.nav-youtube {
  background-image: url(../image/slidebar-youtube.png);
  top: 4.4rem;
  left: 0.13rem;
  transition: all 0.6s;
}

.slidebar .star-list li {
  background: url(../image/star.png) no-repeat;
  background-size: 100%;
  width: 0.52rem;
  height: .68rem;
  position: absolute;
}

.slidebar .star-list li:first-child {
  left: 0.5rem;
  top: 0.25rem;
  animation: twinkling 1.5s infinite;
}

.slidebar .star-list li:nth-child(2) {
  left: 1.7rem;
  top: 0.35rem;
  transform: scale(0.4);
  animation: twinkling 3s infinite;
}

.slidebar .star-list li:nth-child(3) {
  left: 0.1rem;
  top: 0.8rem;
  transform: scale(0.7);
  animation: twinkling 2s infinite;
}

.slidebar .star-list li:nth-child(4) {
  left: 1.6rem;
  top: 1rem;
  animation: twinkling 2s infinite;
}

.slidebar .star-list li:nth-child(5) {
  left: 1.85rem;
  top: 0.7rem;
  transform: scale(0.6);
  animation: twinkling 1.5s infinite;
}

.slidebar .gear {
  position: absolute;
  top: -0.06rem;
}

.slidebar .gear .big-gear {
  position: absolute;
  background: url(../image/big-gear.png) no-repeat;
  background-size: 100%;
  top: 4.6rem;
  left: 0.18rem;
  width: 0.48rem;
  height: 0.47rem;
  animation: rotate-anti-clockwise 2s linear infinite;
  pointer-events: none;
}

.slidebar .gear .small-gear {
  position: absolute;
  background: url(../image/small-gear.png) no-repeat;
  background-size: 100%;
  top: 4.77rem;
  left: 0.56rem;
  width: 0.41rem;
  height: 0.4rem;
  animation: rotate-clockwise 2s linear infinite;
  pointer-events: none;
}

@keyframes twinkling {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rotate-anti-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes rotate-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*弹出视频*/
.shade {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;
}

.videos {
  width: 10rem;
  height: 5.62rem;
  position: absolute;
  left: 50%;
  margin-left: -5rem;
  top: 50%;
  margin-top: -3rem;
}

.close {
  width: 0.33rem;
  height: 0.35rem;
  position: absolute;
  left: 9.75rem;
  top: -0.2rem;
  background: url(../image/close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 101;
}

/*弹层*/
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  z-index: 101;
}

/* 弹窗关闭 */
.dia-close {
  width: 0.39rem;
  height: 0.61rem;
  top: 0.13rem;
  right: 0.42rem;
  position: absolute;
  background: url("../image/pop/pop-close.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 300;
}

.dia-close:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* 预约弹窗 */
.order .order-bg {
  position: absolute;
  width: 7.98rem;
  height: 4.27rem;
  background: url(../image/pop/order-bg.png) no-repeat;
  background-size: 100%;
  left: 5.8rem;
  top: 2.5rem;
}

.order .order-bg.overtime {
  background: url(../image/pop/order-bg-overtime.png) no-repeat;
  background-size: 100%;
}

.order .order-bg.over {
  background: url(../image/pop/order-bg-over.png) no-repeat;
  background-size: 100%;
}

.order .order-bg .close {
  position: absolute;
  width: 0.33rem;
  height: 0.35rem;
  background: url(../image/pop/order-close.png) no-repeat;
  background-size: 100%;
  top: -0.2rem;
  left: 7.5rem;
}

.order .btn-list {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 3rem;
  top: 3.2rem;
  left: 1.5rem;
}

.order .overtime .btn-list {
  top: 3.4rem;
}

.order .over .btn-list {
  top: 3.2rem;
}

.order .btn-list .btn-ios {
  width: 1.39rem;
  height: .49rem;
  background: url(../image/pop/order-store-ios.png) no-repeat;
  background-size: 100%;
}

.order .btn-list .btn-ios.overtime {
  background: url(../image/pop/order-store-ios-overtime.png) no-repeat;
  background-size: 100%;
}

.order .btn-list .btn-gp {
  width: 1.39rem;
  height: .49rem;
  background: url(../image/pop/order-store-gp.png) no-repeat;
  background-size: 100%;
}

.order .btn-list .btn-gp.overtime {
  background: url(../image/pop/order-store-gp-overtime.png) no-repeat;
  background-size: 100%;
}

.order .btn-list .btn-twitter {
  position: absolute;
  width: 1.47rem;
  height: 0.53rem;
  background: url(../image/pop/btn-twitter.png) no-repeat;
  background-size: 100%;
  left: 3rem;
}

.order .btn-list .btn-twitter.overtime {
  background: url(../image/pop/btn-twitter-overtime.png) no-repeat;
  background-size: 100%;
}

.order .btn-list > .active::before {
  content: '';
  width: .17rem;
  height: .17rem;
  background: url(../image/pop/red-dot.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -0.06rem;
  left: 0.05rem;
}

.order .btn-list > .over::before {
  display: none;
}

/* 完成预约弹窗 */
.order-finish .order-bg {
  position: absolute;
  width: 7.98rem;
  height: 4.27rem;
  background: url(../image/pop/order-finish-bg.png) no-repeat;
  background-size: 100%;
  left: 5.8rem;
  top: 2.5rem;
}

.order-finish .order-bg .close {
  position: absolute;
  width: 0.33rem;
  height: 0.35rem;
  background: url(../image/pop/order-close.png) no-repeat;
  background-size: 100%;
  top: -0.2rem;
  left: 7.5rem;
}

.order-finish .btn-list {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 3rem;
  top: 3.2rem;
  left: 1.5rem;
}

.order-finish .btn-list .btn-ios {
  width: 1.39rem;
  height: .49rem;
  background: url(../image/pop/order-store-ios.png) no-repeat;
  background-size: 100%;
}

.order-finish .btn-list .btn-gp {
  width: 1.39rem;
  height: .49rem;
  background: url(../image/pop/order-store-gp.png) no-repeat;
  background-size: 100%;
}

.order-finish .btn-list .btn-twitter {
  position: absolute;
  width: 1.47rem;
  height: 0.53rem;
  background: url(../image/pop/btn-twitter.png) no-repeat;
  background-size: 100%;
  left: 3rem;
}