/*第一屏*/
.topic {
  width: 100%;
  height: 1400px;
  position: relative;
  background-size: 100%;
}

.topic .header-nav {
  position: fixed;
  top: 0;
  width: 720px;
  left: 50%;
  margin-left: -360px;
  z-index: 2;
}

.topic .logo {
  width: 274px;
  height: 164px;
  background: url(../image/section1/logo.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 16px;
  left: 6px;
}

.topic .head-menu-btn {
  width: 114px;
  height: 114px;
  background: url(../image/section1/header-menu-btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 35px;
  right: 20px;
}

.topic .fb-login {
  width: 166px;
  height: 61px;
  background: url(../image/section1/fb-login.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 62px;
  right: 150px;
}

.topic .header-menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
  width: 100%;
  height: 100%;
}

.topic .header-menu-mask .header-menu-inner {
  position: absolute;
  top: 0;
  width: 720px;
  left: 50%;
  margin-left: -360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-ul li{
  position: relative;
  cursor: pointer;
  height: 0.72rem;
  user-select: none;
  font-size: 0;
  width: 350px;
  height: 94px;
  margin-bottom: 18px;
}

.header-ul .section2 {
  height: 114px;
}

.topic-chip {
  position: absolute;
  top: 180px;
}

.topic-chip [class^="topic-chip-"] {
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  animation: bubble 10s infinite ease-out;
}

.topic-chip .topic-chip-1 {
  width: 110px;
  height: 53px;
  top: 105px;
  left: 17px;
  background-image: url(../image/section1/topic-chip-1.png);
  animation-delay: 0s;
}

.topic-chip .topic-chip-2 {
  width: 160px;
  height: 117px;
  top: 602px;
  left: 36px;
  background-image: url(../image/section1/topic-chip-2.png);
  animation-delay: 0.5s;
}

.topic-chip .topic-chip-3 {
  width: 70px;
  height: 144px;
  top: 890px;
  left: 0;
  background-image: url(../image/section1/topic-chip-3.png);
  animation-delay: 1s;
}

.topic-chip .topic-chip-4 {
  width: 97px;
  height: 61px;
  top: 58px;
  left: 76px;
  background-image: url(../image/section1/topic-chip-4.png);
  animation-delay: 0.5s;
}

.topic-chip .topic-chip-5 {
  width: 81px;
  height: 79px;
  top: 350px;
  left: 370px;
  background-image: url(../image/section1/topic-chip-5.png);
  animation-delay: 0.2s;
}

.topic-chip .topic-chip-6 {
  width: 157px;
  height: 135px;
  top: 35px;
  left: 558px;
  background-image: url(../image/section1/topic-chip-6.png);
  animation-delay: 0.8s;
}

.topic-chip .topic-chip-7 {
  width: 214px;
  height: 162px;
  top: 612px;
  left: 500px;
  background-image: url(../image/section1/topic-chip-7.png);
  animation-delay: 1.2s;
}

.topic-video {
  width: 181px;
  height: 181px;
  position: absolute;
  top: 1036px;
  right: 16px;
}

.topic-video .btn-play::before {
  content: '';
  position: absolute;
  width: 181px;
  height: 181px;
  background: url(../image/section1/btn-play-bg.png) no-repeat;
  background-size: 100%;
  animation: rotate 12s infinite linear;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}

.topic-video .btn-play::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 55px;
  background: url(../image/section1/btn-play.png) no-repeat;
  background-size: 100%;
  top: 65px;
  left: 73px;
}

.topic-video .topic-video-light {
  position: absolute;
  background: url(../image/section1/topic-video-light.png) no-repeat;
  background-size: 100%;
  width: 720px;
  height: 500px;
  top: -162px;
  left: -271px;
}

.topic .topic-slogan {
  position: absolute;
  background: url(../image/section1/slogan.png) no-repeat;
  background-size: 100%;
  width: 720px;
  height: 306px;
  top: 790px;
  left: 0;
}

.topic-store {
  position: absolute;
  width: 720px;
  display: flex;
  justify-content: center;
  top: 1073px;
}

.topic-store [class^="order-store-"] {
  position: absolute;
  width: 288px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.topic-store .order-store-ios {
  background-image: url(../image/section1/order-store-ios.png);
}

.topic-store .order-store-ios.overtime {
  background-image: url(../image/section1/order-store-ios-overtime.png);
}

.topic-store .order-store-gp {
  background-image: url(../image/section1/order-store-gp.png);
}

.topic-store .order-store-gp.overtime {
  background-image: url(../image/section1/order-store-gp-overtime.png);
}

.topic-store .order-store-ios::before,
.topic-store .order-store-gp::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../image/section1/fb-like-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: -4px;
  left: 20px;
  z-index: 1;
}

.topic-store .order-store-ios::after,
.topic-store .order-store-gp::after {
  content: "";
  display: inline-block;
  width: 75px;
  height: 60px;
  background: url(../image/section1/fb-like-hand.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 76px;
  left: 246px;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
}

.countdown {
  display: flex;
  width: 529px;
  height: 157px;
  font-size: 64px;
  font-family: Arial, Courier, sans-serif;
  font-weight: bold;
  color: #3367B8;
  background: url(../image/section1/countdown-bg1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 100px;
  top: 820px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.hidden {
  visibility: hidden;
}

.countdown-second {
  position: absolute;
  left: 48px;
  top: 960px;
  width: 612px;
  height: 101px;
  opacity: 0;
  background: url(../image/section1/countdown-bg2.png) no-repeat;
  background-size: 100%;
}

.countdown .day {
  position: absolute;
  top: 130px;
  left: 97px;
  letter-spacing: 10px;
  width: 35px;
}

.countdown .hour {
  position: absolute;
  top: 130px;
  left: 221px;
  letter-spacing: 14px;
  width: 91px;
}

.countdown .minute {
  position: absolute;
  top: 130px;
  left: 341px;
  letter-spacing: 14px;
  width: 91px;
}

.countdown .second {
  position: absolute;
  top: 130px;
  left: 460px;
  letter-spacing: 14px;
  width: 91px;
}

/* 预约弹窗 */
.order .order-bg {
  position: absolute;
  width: 720px;
  height: 883px;
  background: url(../image/section1/order-bg.png) no-repeat;
  background-size: 100%;
  top: 13%;
  left: 50%;
  margin-left: -365px;
}

.order .hot-block a{
  width: 506px;
  height: 214px;
  position: absolute;
  top: 360px;
  left: 116px;
}

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

.order .order-bg .close {
  position: absolute;
  width: 64px;
  height: 65px;
  background: url(../image/section1/order-close.png) no-repeat;
  background-size: 100%;
  top: 85px;
  left: 630px;
}

.order .btn-list {
  position: absolute;
  top: 525px;
  left: 170px;
}

.order .btn-list.overtime {
  top: 490px;
}

.order .btn-list .btn-ios {
  position: absolute;
  width: 317px;
  height: 114px;
  background: url(../image/section1/btn-ios.png) no-repeat;
  background-size: 100%;
  top: 86px;
  left: 42px;
}

.order .btn-list .btn-ios.overtime {
  top: 112px;
  width: 315px;
  height: 113px;
  background: url(../image/section1/btn-ios-overtime.png) no-repeat;
  background-size: 100%;

}

.order .btn-list .btn-gp {
  position: absolute;
  width: 317px;
  height: 114px;
  background: url(../image/section1/btn-gp.png) no-repeat;
  background-size: 100%;
  top: 86px;
  left: 42px;
}

.order .btn-list .btn-gp.overtime {
  top: 112px;
  width: 315px;
  height: 113px;
  background: url(../image/section1/btn-gp-overtime.png) no-repeat;
  background-size: 100%;
}

.order .btn-list .btn-gp::before,
.order .btn-list .btn-ios::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../image/section1/fb-like-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: -4px;
  left: 20px;
  z-index: 1;
}

.order .btn-list .btn-gp::after,
.order .btn-list .btn-ios::after {
  content: "";
  display: inline-block;
  width: 75px;
  height: 60px;
  background: url(../image/section1/fb-like-hand.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 76px;
  left: 246px;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
}

.order .btn-list .btn-twitter {
  position: absolute;
  width: 228px;
  height: 72px;
  background: url(../image/section1/btn-twitter.png) no-repeat;
  background-size: 100%;
  left: 81px;
  top: 80px;
}

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