body {
  font-size: 14px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "新細明體", "蘋果儷黑體", Verdana, sans-serif;
  overflow-x: hidden;
}

.fp-watermark {
  display: none !important;
}

.full-image {
  width: 100%;
}

.content {
  width: 100%;
}

.original-area {
  /* position: relative; */
  min-height: 100%;
  /* padding-top: 120px; */
  box-sizing: border-box;
  overflow-x: hidden;
}

.sec-title {
  max-width: 500px;
  margin: 80px auto 0 auto;
}

.bg {
  background: url(../../images/mobile/web_m_bg/web_m2_bg_01.png);
  /* background-position: center 0.7%; */
  background-size: cover;
  height: 100vh;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center 20%;
}

.sectionbg-1 {
  background: url(../../images/mobile/web_m_bg/web_m2_bg_02.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
}


.sectionbg-2 {
  /* background: url(../../images/mobile/web_bg.png); */
  background: url(../../images/mobile/web_m_bg/web_m2_bg_03.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.sectionbg-3 {
  /* background: url(../../images/mobile/web_bg.png); */
  background: url(../../images/mobile/web_m_bg/web_m2_bg_04.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.sectionbg-4 {
  /* background: url(../../images/mobile/web_bg.png); */
  background: url(../../images/mobile/web_m_bg/web_m2_bg_05.png);
  /* background: url(../../images/mobile/bg_4.png); */
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.sectionbg-4 {
  /* background: url(../../images/mobile/web_bg.png); */
  background: url(../../images/mobile/web_m_bg/web_m2_bg_05.png);
  /* background: url(../../images/mobile/bg_4.png); */
  background-position: center bottom;
  background-size: cover;
  height: 100vh;
}

.sectionbg-5 {
  /* background: url(../../images/mobile/web_bg.png); */
  /* background: url(../../images/mobile/bg_5.png); */
  background: url(../../images/mobile/web_m_bg/web_m2_bg_06.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.sectionbg-6 {
  /* background: url(../../images/mobile/web_bg.png); */
  /* background: url(../../images/mobile/bg_6.png); */
  background: url(../../images/mobile/web_m_bg/web_m_bg_07.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.sectionbg-6-5 {
  /* background: url(../../images/mobile/web_bg.png); */
  /* background: url(../../images/mobile/bg_6.png); */
  background: url(../../images/mobile/web_m_bg/web_m2_bg_08.png);
  background-position: center top;
  background-size: cover;
  height: 50vh;
}

/* .sectionbg-7 {
  height: 50vh;
} */


/* background config start */

.sectionbg-0 .header {
  position: fixed;
  display: block;
  width: 100%;
  height: 10%;
  top: 0;
  left: 0;
  z-index: 9;
  text-align: center;
  background: rgba(38, 58, 74, .99);
  box-sizing: border-box;
}

.sectionbg-0 .header img {
  padding: 10px;
  max-width: 60px;
  height: auto;
}

.video-btn-box {
  width: 100%;
}

.video-btn {
  width: 94px;
  position: absolute;
  right: 15px;
  bottom: 167px;
}



/* .sectionbg-0 .video{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;  
} */
.sectionbg-0 .video {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.sectionbg-0 .video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.sectionbg-0 .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 240px;
  transform: translateX(-50%);
  object-fit: cover;
  z-index: 3;
}

/* .sectionbg-0 .logo span{
  color: #fff;
  text-shadow: 8px 8px 0px rgba(0,0,0,0.2); 
  font-size: 72px;
  font-weight: 900;
} */

.badge {
  position: absolute;
  top: 87%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  /* Or 'space-around'/'space-evenly' depending on spacing preference */
  gap: 10px;
  /* Adjust the spacing between the links */
  z-index: 3;
}

.badge a {
  width: calc(300px * 0.35);
  /* Set the desired width */
  height: calc(110px * 0.35);
  /* Set the desired height */
  background-size: contain;
  /* Cover the entire area */
  background-position: center;
  /* Center the background image */
  display: block;
}

.badge div {
  width: calc(250px* 0.5);
}

/* Background images for each link */
.badge div:nth-child(1) a {
  background-image: url('../../images/web01_01.png');
  background-repeat: no-repeat;
  width: 100%;
}

.badge div:nth-child(2) a {
  background-image: url('../../images/web01_02.png');
  background-repeat: no-repeat;
  width: 100%;
}

.badge div:nth-child(3) a {
  background-image: url('../../images/web01_03.png');
  background-repeat: no-repeat;
  width: 100%;
}


.sectionbg-0 .have_order {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  z-index: 3;
}

.light {
  position: relative;
  overflow: hidden;
}

.light::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../../images/light.png);
  background-size: cover;
  content: "";
  animation: searchlights2 1.3s ease-in-out 0s infinite;
}

.btn {
  position: relative;
  width: calc(950px* 0.3);
  height: calc(255px* 0.3);
  border: none;
  animation: upDown 2s infinite ease-in-out;
  background: url(../../images/booking_btn_index_2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn img {
  width: 100%;
  animation: scaleUp 2s infinite ease-in-out;
}

.have_order .btn .order {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  transform: scaleX(-1);
}

.center {
  justify-content: center;
  align-items: center;
}


/* 事前預約 */
.sectionbg-1 .booking-1 {
  position: relative;
}

/* step1 */


.step1 {
  position: absolute;
  /* top: 25px; */
  top: 15%;
  left: 10%;
}

.step1_text0 {
  text-align: center;
  color: #3b3b3b;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: "Noto Sans TC", sans-serif;
}

.step1_text1 {
  text-align: center;
  margin-right: 15px;
  color: #3b3b3b;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: "Noto Sans TC", sans-serif;
  margin: 10px;
}

.step1_text2 {
  font-size: 2.5rem;
  font-weight: 900;
  font-family: "Noto Sans TC", sans-serif;
  background: linear-gradient(to bottom, rgb(0, 0, 0) -30%, rgb(255, 255, 255) 185%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.step1 .info {
  width: 450px;
  height: 50px;
  display: flex;
  font-size: 1rem;
  margin: 20px;
  justify-content: center;
}

.step1 select {
  border-radius: 7px;
  width: 150px;
  border: 1px solid gray;
  padding: 10px;
}

.step1 .info input {
  border-radius: 7px;
  width: 250px;
  margin-left: 10px;
  border: 1px solid gray;
  padding: 10px;
}

.step1 .extra {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  justify-content: center;
}

.step1 .order_err_msg {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 16px;
  font-weight: 600;
}

.step1 .extra input {
  width: 30px;
  height: 20px;
}

.step1 .sendbtn {
  margin-top: 10%;
}

.order_btn_box {
  display: flex;
  justify-content: center;
}

.order_btn {
  background-size: 50% 50%;
  background-repeat: no-repeat;
  width: 255px;
  height: 55px;
  transform: skewX(-15deg);
}

.order_text {
  background-size: 50% 50%;
  background-repeat: no-repeat;
  width: 250px;
  height: 50px;
  transform: skewX(-15deg);
  position: absolute;
  top: 2.3px;
  left: 2.1px;
  color: #000;
  font-size: 1.5rem;
  font-weight: 800;
  font-style: initial;
}

.order_btn_box a {
  background-image: url("../../images/btn01.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: inline-block;
  height: calc(90px * 0.7);
  width: calc(240px * 0.9);
}

.booking-2 {
  margin-top: 85px;
  position: relative;
}


.step2_text {
  align-items: center;
  position: relative;
  position: absolute;
  text-align: center;
  top: 15%;
  left: 21%;
}

.step2_text1 {
  background: linear-gradient(to bottom, rgb(0, 0, 0) -30%, rgb(255, 255, 255) 185%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.8rem;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 900;
  margin: 10px;
}

.step2_text2 {
  color: #0769C5;
  font-size: 2.2rem;
  font-weight: 900;
  font-family: "Noto Sans TC", sans-serif;
  margin: 10px;
  letter-spacing: 1px;
}

.step-store {
  display: flex;
  justify-content: end;
  align-items: end;
  flex-direction: column;
  margin-top: 20px;
}

.step-store-gp {
  width: 120px;
  margin: 5px 10px;
}

.step-store-ios {
  width: 120px;
  margin: 5px 10px;
}

.booking-3 {
  position: relative;
}

.step3_text {
  align-items: center;
  position: absolute;
  top: 20%;
  left: 20%;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans TC", sans-serif;
}

.step3_text1 {
  color: #3b3b3b;
  font-weight: 900;
  margin-right: 15px;
  font-size: 2.8rem;
}

.step3_text2 {
  background: linear-gradient(to bottom, rgb(0, 0, 0) -30%, rgb(255, 255, 255) 185%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.6rem;
  font-weight: 900;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 1px;
  margin: 10px;
}

.step3 .step-fb {
  width: 350px;
  margin: 20px;
}

/* 挑戰者先行禮 */
.slogan-bg {
  background-image: url("../../images/mobile/title2_13.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(882px * 0.8);
  height: calc(350px * 0.8);
  position: relative;
  top: 30%;
}

.milestone .slogan-bg {
  width: calc(570px* 0.8);
  height: calc(120px* 0.8);
  position: relative;
  top: 4vh;
  left: 0vw;
}

.milestone .slogan {
  left: 6vw;
  top: 2vh;
  width: calc(630px* 0.7);
}

.milestone .gift {
  top: 1em;
  left: 24%;
  width: calc(1150px* 0.45);
  height: calc(1124px* 0.35);
  overflow-x: hidden;
  padding-top: 4rem;
  /* padding-left: 250px; */
  position: relative;
}

.milestone .gift .chs {
  background-image: url("../../images/part3_02.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: calc(256px * 0.8);
}

.milestone .gift .item1 {
  position: absolute;
  left: 5px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item2 {
  position: absolute;
  left: 131px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item3 {
  position: absolute;
  left: 258px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item4 {
  position: absolute;
  left: 385px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item5 {
  position: absolute;
  left: 5px;
  /* top: 475px; */
  top: 210px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item6 {
  position: absolute;
  left: 131px;
  /* top: 475px; */
  top: 210px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item7 {
  position: absolute;
  left: 258px;
  /* top: 475px; */
  top: 210px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .item8 {
  position: absolute;
  left: 385px;
  /* top: 475px; */
  top: 210px;
  width: calc(256px* 0.5);
  height: calc(256px* 0.5);
}

.milestone .gift .chs img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

/* .milestone .gift .chs:hover{
  background: url(../images/re_bg_hover.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.milestone .gift .chs span {
  position: absolute;
  left: 0px;
  top: 124px;
  width: 98%;
  padding: 5px 0px;
  /* transform: skew(0deg, -6deg); */
  border-radius: 10px;
  color: #000;
  text-align: center;
  font-size: 0.7rem;
  background: rgba(35, 36, 35, 0.2);
}

/* 英雄介紹 */
.hero-box {
  position: relative;
}

.hero-logo {
  z-index: 5;
  position: absolute;
  bottom: 165px;
}

.hero-logo img {
  width: calc(330px* 0.5);
  margin: 5px 10px;
}

.hero-name-box {
  height: calc(110px* 0.6);
  width: calc(400px* 0.6);
  background-image: url(../../images/herointro.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  position: relative;
}

.hero-name-box .hero-name {
  font-weight: 700;
  font-size: 2.2rem;
  color: #fff;
  position: absolute;
  font-family: "Noto Sans TC", sans-serif;
  top: 10px;
  left: 23px;
}

.hero-name-box .logo-s {
  height: calc(67px* 0.6);
  width: calc(78px* 0.6);
  position: absolute;
  top: 10px;
  left: 139px;
}

.hero-box .hero-text {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.6rem;
  position: absolute;
  top: 70px;
  font-weight: 800;
  background: linear-gradient(to bottom, rgb(255, 255, 255) -20%, rgb(0, 0, 0) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  padding: 10px;
  z-index: 3;
}

.hero-box .switch-type {
  width: calc(400px* 0.3);
  position: absolute;
  right: 0;
  top: 185px;
}

.hero-box .switch-hero {
  height: calc(1000px* 0.5);
  width: calc(1000px* 0.5);
  align-items: end;
  margin-left: -200px;
}

.hero-box .hero-detail-box {
  height: calc(300px* 0.7);
  width: calc(1063px* 0.5);
  background-image: url(../../images/mobile/font_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
  right: 0;
  position: absolute;
  top: 62%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-detail-box .hero-title {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(to bottom, rgb(255, 255, 255) -20%, rgb(0, 0, 0) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  border-bottom: 1.5px #000 solid;
  padding-bottom: 15px;
  width: 23rem;
  letter-spacing: 1px;
  text-align: center;
}

.hero-detail-box .hero-detail {
  font-size: 0.8rem;
  font-weight: 700;
  width: 24rem;
  padding-top: 14px;
  letter-spacing: 2px;
  line-height: 20px;
}

.heroes-bg {
  height: calc(276px* 0.5);
  width: calc(1716px* 0.9);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-left: auto;
  position: relative;
  top: -53px;
  right: -25px;
  z-index: 2;
}

.heroes-bg .heroes {
  position: absolute;
  top: 70px;
  width: calc(1500px * 0.3);
  justify-content: center;
  align-items: center;
}

.hero-img {
  width: 200px;
  position: relative;
  height: calc(179px* 0.5);
  width: calc(194px* 0.9);
}

.hero-img:first-child {
  margin-right: 5px;
}

.hero-img img {
  object-fit: cover;
  height: 100%;
}


.more-hero-btn {
  width: 117px;
  z-index: 5;
  position: absolute;
  bottom: -67px;
  margin: 0 auto;
  left: 11%;
}

/* 注意事項 */
.booking-area {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -30%);
}

.booking-area .booking-district {
  position: relative;
  width: calc(1220px *0.5);
  height: calc(710px *0.5);
  background: url(../../images/preord.png);
  background-position: center center;
  background-size: cover;
}

.booking_charter {
  position: absolute;
  left: -200px;
  top: 30em;
  width: 30em;
}

.booking_charter2 {
  position: absolute;
  right: -110px;
  top: 30em;
  width: 40em;
}

.booking-district .title {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding-left: 25px;
  background: url(../../images/diamaond.png);
  background-size: 20px auto;
  background-position: left center;
  background-repeat: no-repeat;
}

.booking-district .info {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-district .info select {
  padding: 3px 5px;
  border: 1px solid #9e9c9c;
  border-radius: 5px;
  font-size: 16px;
}

.booking-district .info input[type='text'] {
  display: inline-block;
  padding: 3px 5px;
  margin-left: 5px;
  border: 1px solid #9e9c9c;
  border-radius: 5px;
  font-size: 18px;
}

.booking-district .extra {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 100%;
  padding-bottom: 30px;
  align-items: center;
  color: #fff;
  font-size: 20px;
  justify-content: center;
}

.booking-district .extra input[type='checkbox'] {
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: center;
  border: 1px solid #292927;
}

.booking-district .extra input[type='checkbox']:checked::after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 3px;
  right: 0;
  bottom: 0;
  color: #292927;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

.order_err_msg {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 20px;
  font-weight: 600;
}

/* .booking-district a.sendbtn {
  position: absolute;
  width: calc(384px * 0.7);
  height: calc(125px * 0.7);
  bottom: 30px;
  left: 50%;
  margin-bottom: 19px;
  transform: translateX(-50%);
  background: url(../../images/booking_btn.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.booking-district a.sendbtn:hover {
  background: url(../../images/booking_btn_hover.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
} */

.milestone {
  position: absolute;
  top: 0;
  width: 100%;
}

.milestone .sandy {
  position: absolute;
  top: 70px;
  left: -120px;
  width: calc(1150px * 0.4);
}

.milestone .slogan {
  position: absolute;
  top: 140px;
  left: 80px;
  width: calc(630px * 0.4);
}

.milestone .haru {
  position: absolute;
  top: 70px;
  right: -60px;
  width: calc(558px * 0.5);
}

/* .milestone .gift {
  position: absolute;
  top: 20em;
  left: 50%;
  transform: translate(-50%);
  width: calc(1150px * 0.35);
  height: calc(1124px * 0.35);
  overflow-x: hidden;
  background: url(../../images/mobile/2_rewardbg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.milestone .gift .gift-area {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

#div1 {
  transform: translateX(0);
}

#div2 {
  transform: translateX(100%);
}

.milestone .gift .gift-area .item1 {
  position: absolute;
  left: 60px;
  top: 40px;
  width: 130px;
  height: 130px;
  background-color: rgba(2, 254, 141, 0.6);
  border-radius: 20px;
}

.milestone .gift .gift-area .item2 {
  position: absolute;
  left: 210px;
  top: 40px;
  width: 130px;
  height: 130px;
  background-color: rgba(2, 254, 141, 0.6);
  border-radius: 20px;
}

.milestone .gift .gift-area .item3 {
  position: absolute;
  left: 60px;
  top: 195px;
  width: 130px;
  height: 130px;
  background-color: rgba(2, 254, 141, 0.6);
  border-radius: 20px;
}


.milestone .gift .gift-area .item4 {
  position: absolute;
  left: 210px;
  top: 195px;
  width: 130px;
  height: 130px;
  background-color: rgba(2, 254, 141, 0.6);
  border-radius: 20px;
}

.milestone .gift .gift-area .right_arrow {
  position: absolute;
  right: 0;
  top: 180px;
  width: 60px;
}

.milestone .gift .gift-area .left_arrow {
  position: absolute;
  left: 0;
  top: 180px;
  width: 60px;
}

.sectionbg-3 .original-area .sec-title {
  padding-top: 10px;
}

.album-area {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.album-district {
  position: relative;
  width: calc(1207px* 0.4);
  height: calc(840px* 0.3);
  background: url(../../images/windows_2.png);
  background-position: center center;
  background-size: cover;
}

.album-content {
  width: 430px;
  padding-top: 66px;
}


.arrow-box {
  width: 40%;
  position: absolute;
  left: 30%;
  top: 45%;
}

.character-block .album {
  position: relative;
  display: block;
  box-sizing: border-box;
  left: 6%;
}


.arrow-box {
  width: 40%;
  position: absolute;
  left: 30%;
  top: 46%;
}

.cat {
  position: absolute;
  left: 10em;
  top: -6em;
  width: calc(540px * 0.3);
  z-index: 5;
}

.xano {
  position: absolute;
  left: 0;
  bottom: -13em;
  width: calc(1180px * 0.4);
}

.character-block .album a.arrow {
  position: absolute;
  width: 10%;
  top: 47%;
  transform: translateY(-50%);
}

.character-block .album a.arrow.character-arrow-pre {
  position: absolute;
  top: 14rem;
  left: 10rem;
}

.character-block .album a.arrow.character-arrow-next {
  position: absolute;
  top: 14rem;
  right: 9rem;
}


.sectionbg-4 .original-area .sec-title {
  margin-top: 90px;
}

/* .sectionbg-4 .original-area .sec-title img {
  width: 25em;
} */

.publicity {
  position: absolute;
  margin-top: 0;
  width: 100%;
  height: 55rem;
}

.publicity .ra {
  position: absolute;
  top: 0;
  left: -180px;
  width: 800px;
}

.publicity .xeno {
  position: absolute;
  top: -90px;
  right: 0;
  width: 500px;
}

.publicity .pub_content {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  width: calc(1207px * 0.33);
  height: calc(840px * 0.33);
  background: url(../../images/mobile/4_vdbg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

video::-webkit-media-controls-play-button {
  display: none;
}

video::-webkit-media-controls-timeline {
  display: none;
}

video::-webkit-media-controls-current-time-display {
  display: none;
}

video::-webkit-media-controls-time-remaining-display {
  display: none;
}

video::-webkit-media-controls-play-button {
  display: none;
}

.publicity .pub_content video {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 90%;
}

.publicity .pub_content .video_pagenum {
  display: flex;
  position: absolute;
  bottom: -35px;
  left: 20%;
}

.publicity .pub_content .video_pagenum .page {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  background: url(../../images/video_aw.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.publicity .pub_content .video_pagenum .pubchs {
  background: url(../../images/video_aw02.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.play_btn {
  position: absolute;
  top: 51%;
  left: 50%;
  width: 93%;
  height: 74%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.play_btn img {
  width: 30%;
}

.play_btn img:hover {
  transform: scale(1.25);
  transition: transform 0.3s ease;
}

.sectionbg-5 .original-area:nth-of-type(2) {
  margin-top: 250px;
}

/* .sectionbg-5 .original-area .sec-title img {
  width: 22em;
} */

.notice-area {
  position: absolute;
  left: 50%;
  width: 90%;
  line-height: 0.6rem;
  transform: translateX(-50%);
}

.notice-area span {
  display: block;
  font-size: 14px;
  color: #000;
  line-height: 1rem;
}

.sectionbg-6-5 .original-area {
  padding-top: 5%;
  height: 50vh;
}

.copyright {
  position: relative;
  display: block;
  width: 100vw;
  max-width: 1920px;
  text-align: center;
  z-index: 3;
}

.copyright .copyright-title img {
  width: 15em;
}

.copyright .copyright-content img {
  width: 27%;
}

.copyright .copyright-content .eddLai {
  width: 18%;
}

.copyright .copyright-content .philips {
  width: 13%;
  margin-right: 3%;
}

.copyright .copyright-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  line-height: 1rem;
  font-size: 10px;
}

.copyright .copyright-text span {
  display: block;
  color: #000;
}

/* bottom bar start */
ul.download {
  position: fixed;
  left: 0;
  bottom: 0;
  display: none;
  width: 100%;
  margin: 0;
  align-items: center;
  padding: 10px 0;
  list-style: none;

  background: #28466e;
}

ul.download.see {
  display: block;
}

ul.download li {
  display: inline-block;
  width: 32%;
  text-align: center;
}

ul.download li img {
  width: 90%;
  max-width: 130px;
}

/* bottom bar end */

div.topup {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 50px;
  /* 可以根據需求調整大小 */
  height: auto;
  display: none;
  z-index: 100;
  /* 確保圖片在其他元素之上 */
  animation: scaleUp 1.5s infinite ease-in-out;
}

div.topup.see {
  display: block;
}

.sectionbg-7 {
  background: rgba(38, 58, 74, .99);
  padding-bottom: 60px;
}

.sectionbg-7 .mb-footer {
  display: flex;
  width: 100%;
  padding: 30px 15px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.mb-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40%;
}

.mb-logo>div {
  flex: 1;
  text-align: center;
}

.mb-logo img.full-image {
  max-height: 100px;
  object-fit: contain;
}

.sectionbg-7 .mb-footer .mb-cat {
  width: 100%;
  text-align: center;
}

.sectionbg-7 .mb-footer .mb-cat img {
  width: 100%;
  max-width: 293px;
}

.sectionbg-7 .mb-footer .mb-company {
  display: flex;
  width: 100%;
  padding: 30px 0;
  justify-content: center;
  flex-wrap: wrap;
}

/* 文字區 */
.sectionbg-7 .mb-footer .mb-company .mb-cover {
  width: 100%;
  max-width: 273px;
  margin: 0 auto;
  padding-bottom: 10px;
}

.sectionbg-7 .mb-footer .mb-company span.mb-title {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  color: #FFF;
  text-align: center;
}

.sectionbg-7 .mb-footer .mb_content_link {
  width: 100%;
  padding-top: 10px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

.sectionbg-7 .mb-footer .mb_content_link a {
  color: #FFF !important;
  text-decoration: none;
}

.sectionbg-7 .mb-footer .mb-year {
  width: 100%;
  padding-top: 20px;
  text-align: center;
}

.sectionbg-7 .mb-footer .mb-year span.mb-title {
  text-align: center;
  font-size: 12px;
  color: #FFF;
  letter-spacing: 0;
  line-height: 16px;
}

.sectionbg-7 .mb-footer .mb-year .mb-cover {
  display: flex;
  align-items: flex-start;
  padding-bottom: 10px;
  margin: 0 auto;
}

.sectionbg-7 .mb-footer .mb-year .mb-cover img {
  max-width: 62px;
  flex-shrink: 0;
  margin-right: 10px;
}

.sectionbg-7 .mb-footer .mb-year .mb-cover span {
  display: inline-block;
  font-size: 12px;
  color: #FFF;
  letter-spacing: 0;
  line-height: 16px;
  text-align: left;
}

/* .sectionbg-7 .mb-footer .socail{
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.sectionbg-7 .mb-footer .socail a{
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  background: #28466e;
  text-decoration: none;
  color: #FFF;
}

.sectionbg-7 .mb-footer .socail a:hover{
  opacity: 0.9;
} */

.hide {
  display: none;
}

.pub_content .pub_text {
  position: absolute;
  top: 50%;
  left: 20%;
  color: #fff;
}




.step1 .info {
  width: 543px;
  height: 61px;
  display: flex;
  font-size: 1rem;
  margin: 25px;
  justify-content: center;
}

.step1 select {
  border-radius: 7px;
  width: 160px;
  border: 1px solid gray;
  padding: 10px;
}

.step1 .info input {
  border-radius: 7px;
  width: 276px;
  margin-left: 10px;
  border: 1px solid gray;
  padding: 10px;
}

.step1 .extra {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  justify-content: center;
}

.step1 .extra input {
  width: 41px;
  height: 30px;
}

.step1 .order_err_msg {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 1.6rem;
  font-weight: 600;
}

.order_btn_box a {
  background-image: url(../../images/btn01.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: inline-block;
  height: calc(90px* 0.9);
  width: calc(302px* 1);
}


.step-store {
  display: flex;
  justify-content: end;
  align-items: end;
  flex-direction: column;
  margin-top: 40px;
}

.step-store-gp {
  width: 200px;
  margin: 5px 10px;
}

.step-store-ios {
  width: 198px;
  margin: 5px 10px;
}



/* 英雄介紹 */
.hero-logo {
  z-index: 5;
  position: absolute;
  bottom: 175px;
}

.sectionbg-4 .original-area {
  height: 100vh;
}

.hero-box .switch-hero {
  height: calc(1000px* 0.5);
  width: calc(1000px* 0.5);
  align-items: end;
  margin-left: -101px;
  margin-top: -8%;
}

.hero-box .switch-type {
  width: calc(400px* 0.3);
  position: absolute;
  right: 0;
  top: 106px;
}

.hero-box .hero-detail-box {
  height: calc(300px* 0.7);
  width: calc(1063px* 0.75);
  background-image: url(../../images/mobile/font_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
  right: 0;
  position: absolute;
  top: 59%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-detail-box .hero-title {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(to bottom, rgb(255, 255, 255) -20%, rgb(0, 0, 0) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  border-bottom: 1.5px #000 solid;
  padding-bottom: 15px;
  width: 28rem;
  letter-spacing: 1px;
  text-align: center;
}

.hero-detail-box .hero-detail {
  font-size: 0.8rem;
  font-weight: 700;
  width: 28rem;
  padding-top: 14px;
  letter-spacing: 2px;
  line-height: 20px;
}

.heroes-bg {
  height: calc(276px* 0.5);
  width: calc(1716px* 0.9);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-left: auto;
  position: relative;
  top: -31px;
  right: -48px;
  z-index: 2;
}

.heroes-bg .heroes {
  position: absolute;
  top: 42px;
  width: calc(1500px* 0.45);
  justify-content: center;
  align-items: center;
  /* height: calc(250px* 0.9); */
}

.hero-img {
  width: 200px;
  position: relative;
  height: calc(179px* 0.65);
  width: calc(194px* 0.9);
}

.more-hero-btn {
  width: 117px;
  z-index: 5;
  position: absolute;
  bottom: -72px;
  margin: 0 auto;
  left: 18%;
}

/* 注意事項 */
.notice-area span {
  display: block;
  font-size: 14px;
  color: #000;
  line-height: 1.2rem;
}

/* copyright */
.copyright .copyright-content img {
  width: 18%;
}

.copyright .copyright-content .eddLai {
  width: 13%;
}

.copyright .copyright-content .philips {
  width: 9%;
  margin-right: 3%;
}

@media (max-width: 520px) {
  /* .sectionbg-4 {
   
    background: url(../../images/mobile/web_m_bg/web_m2_bg_05.png);
   
    background-position: center;
    background-size: cover;
    height: 100vh;
  } */

  .video-btn-box {
    width: 100%;
  }

  .video-btn {
    width: 78px;
    right: 35px;
    bottom: 178px;
  }



  /* .sectionbg-0 .video{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;  
} */
  .sectionbg-0 .video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .sectionbg-0 .video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .sectionbg-0 .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 240px;
    transform: translateX(-50%);
    object-fit: cover;
    z-index: 3;
  }

  /* .sectionbg-0 .logo span{
  color: #fff;
  text-shadow: 8px 8px 0px rgba(0,0,0,0.2); 
  font-size: 72px;
  font-weight: 900;
} */

  .badge {
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    /* Or 'space-around'/'space-evenly' depending on spacing preference */
    gap: 10px;
    /* Adjust the spacing between the links */
    z-index: 3;
  }

  .badge a {
    width: calc(300px * 0.35);
    /* Set the desired width */
    height: calc(110px * 0.35);
    /* Set the desired height */
    background-size: contain;
    /* Cover the entire area */
    background-position: center;
    /* Center the background image */
    display: block;
  }

  .badge div {
    width: calc(250px* 0.5);
  }

  /* Background images for each link */
  .badge div:nth-child(1) a {
    background-image: url('../../images/web01_01.png');
    background-repeat: no-repeat;
    width: 100%;
  }

  .badge div:nth-child(2) a {
    background-image: url('../../images/web01_02.png');
    background-repeat: no-repeat;
    width: 100%;
  }

  .badge div:nth-child(3) a {
    background-image: url('../../images/web01_03.png');
    background-repeat: no-repeat;
    width: 100%;
  }


  .sectionbg-0 .have_order {
    top: 91%;
  }

  .light {
    position: relative;
    overflow: hidden;
  }

  .light::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/light.png);
    background-size: cover;
    content: "";
    animation: searchlights2 1.3s ease-in-out 0s infinite;
  }

  .btn {
    position: relative;
    width: calc(950px* 0.3);
    height: calc(255px* 0.3);
    border: none;
    animation: upDown 2s infinite ease-in-out;
    background: url(../../images/booking_btn_index_2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .btn img {
    width: 100%;
    animation: scaleUp 2s infinite ease-in-out;
  }

  .have_order .btn .order {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    transform: scaleX(-1);
  }

  .center {
    justify-content: center;
    align-items: center;
  }


  /* 事前預約 */
  .sectionbg-1 .booking-1 {
    position: relative;
  }

  /* step1 */
  .step1 {
    position: absolute;
    /* top: 25px; */
    top: 15%;
    left: 2%;
  }

  .step1_text0 {
    text-align: center;
    color: #3b3b3b;
    font-size: 1.8rem;
    font-weight: 900;
    font-family: "Noto Sans TC", sans-serif;

  }

  .step1_text1 {
    font-size: 1.8rem;
    margin: 10px;
  }

  .step1_text2 {
    font-size: 1.8rem;
    /* font-weight: 900; */
    /* font-family: "Noto Sans TC", sans-serif;
    background: linear-gradient(to bottom, rgb(0, 0, 0) -30%, rgb(255, 255, 255) 150%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center; */
  }

  .step1 .info {
    width: 450px;
    height: 50px;
    display: flex;
    font-size: 1rem;
    margin: 20px;
    justify-content: center;
  }

  .step1 select {
    border-radius: 7px;
    width: 150px;
    border: 1px solid gray;
    padding: 10px;
  }

  .step1 .info input {
    border-radius: 7px;
    width: 192px;
    margin-left: 10px;
    border: 1px solid gray;
    padding: 10px;
  }

  .step1 .extra {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    justify-content: center;
  }

  .step1 .order_err_msg {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 16px;
    font-weight: 600;
  }

  .step1 .extra input {
    width: 30px;
    height: 20px;
  }

  .step1 .sendbtn {
    margin-top: 10%;
  }

  .order_btn_box {
    display: flex;
    justify-content: center;
  }

  .order_btn {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 255px;
    height: 55px;
    transform: skewX(-15deg);
  }

  .order_text {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 250px;
    height: 50px;
    transform: skewX(-15deg);
    position: absolute;
    top: 2.3px;
    left: 2.1px;
    color: #000;
    font-size: 1.5rem;
    font-weight: 800;
    font-style: initial;
  }

  .order_btn_box a {
    background-image: url("../../images/btn01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: inline-block;
    height: calc(90px * 0.7);
    width: calc(240px * 0.9);
  }

  .booking-2 {
    margin-top: 85px;
    position: relative;
  }

  .step2_text {
    align-items: center;
    position: relative;
    position: absolute;
    text-align: center;
    top: 40px;
    left: 100px;
  }


  .step2_text1 {
    font-size: 1.8rem;
    margin: 10px;
  }

  .step2_text2 {
    /* color: #0769C5; */
    font-size: 1.6rem;
    /* font-weight: 900; */
    /* font-family: "Noto Sans TC", sans-serif; */
    margin: 10px;
    letter-spacing: 1px;
  }

  .step-store {
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: column;
    margin-top: 20px;
  }

  .step-store-gp {
    width: 120px;
    margin: 5px 10px;
  }

  .step-store-ios {
    width: 120px;
    margin: 5px 10px;
  }

  .booking-3 {
    position: relative;
  }

  .step3_text {
    align-items: center;
    position: absolute;
    top: 20%;
    left: 20%;
    align-items: center;
    display: flex;
    flex-direction: column;
    /* font-family: "Noto Sans TC", sans-serif; */
  }

  .step3_text1 {
    color: #3b3b3b;
    font-weight: 900;
    margin-right: 15px;
    font-size: 2rem;
  }

  .step3_text2 {
    background: linear-gradient(to bottom, rgb(255, 255, 255) -20%, rgb(0, 0, 0) 110%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.6rem;
    font-weight: 900;
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 1px;
    margin: 10px;
  }

  .step3 .step-fb {
    width: 240px;
    margin: 10px;
  }

  /* 挑戰者先行禮 */
  .slogan-bg {
    background-image: url("../../images/mobile/title2_13.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: calc(882px * 0.8);
    height: calc(350px * 0.8);
    position: relative;
    top: 30%;
  }

  .milestone .slogan-bg {
    width: calc(570px* 0.8);
    height: calc(120px* 0.8);
    position: relative;
    top: -1vh;
    left: 0vw;
  }

  .milestone .slogan {
    left: 6vw;
    top: 2vh;
    width: calc(630px* 0.7);
  }

  .milestone .gift {
    top: 16rem;
    left: 0%;
    width: calc(1150px* 0.55);
    height: calc(1124px* 0.65);
    overflow-x: hidden;
    padding-top: 4rem;
    position: absolute;
  }

  .milestone .gift .chs {
    background-image: url("../../images/part3_02.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: calc(256px * 0.8);
  }

  .milestone .gift .item1 {
    position: absolute;
    left: 19%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
    top: 0%;
  }

  .milestone .gift .item2 {
    position: absolute;
    left: 42%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
    top: 0%;
  }

  .milestone .gift .item3 {
    position: absolute;
    left: 19%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
    top: 18%;
  }

  .milestone .gift .item4 {
    position: absolute;
    left: 42%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
    top: 18%;
  }

  .milestone .gift .item5 {
    position: absolute;
    left: 19%;
    top: 36%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .item6 {
    position: absolute;
    left: 42%;
    /* top: 475px; */
    top: 36%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .item7 {
    position: absolute;
    left: 19%;
    /* top: 475px; */
    top: 54%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .item8 {
    position: absolute;
    left: 42%;
    /* top: 475px; */
    top: 54%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .chs img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
  }

  /* .milestone .gift .chs:hover{
  background: url(../images/re_bg_hover.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

  .milestone .gift .chs span {
    position: absolute;
    left: 0px;
    top: 124px;
    width: 98%;
    padding: 5px 0px;
    /* transform: skew(0deg, -6deg); */
    border-radius: 10px;
    color: #000;
    text-align: center;
    font-size: 0.7rem;
    background: rgba(35, 36, 35, 0.2);
  }

  /* 英雄介紹 */
  .hero-box {
    position: relative;
  }

  .hero-logo {
    z-index: 5;
    position: absolute;
    bottom: 165px;
  }

  .hero-logo img {
    width: calc(330px* 0.5);
    margin: 5px 10px;
  }

  .hero-name-box {
    height: calc(110px* 0.6);
    width: calc(400px* 0.6);
    background-image: url(../../images/herointro.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    position: relative;
  }

  .hero-name-box .hero-name {
    font-weight: 700;
    font-size: 2.2rem;
    color: #fff;
    position: absolute;
    font-family: "Noto Sans TC", sans-serif;
    top: 10px;
    left: 23px;
  }

  .hero-name-box .logo-s {
    height: calc(67px* 0.6);
    width: calc(78px* 0.6);
    position: absolute;
    top: 10px;
    left: 139px;
  }

  .hero-box .hero-text {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.6rem;
    position: absolute;
    top: 70px;
    font-weight: 800;
    background: linear-gradient(to bottom, rgb(255, 255, 255) -20%, rgb(0, 0, 0) 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    padding: 10px;
    z-index: 3;
  }

  .hero-box .switch-type {
    width: calc(400px* 0.3);
    position: absolute;
    right: 0;
    top: 135px;
  }

  .hero-box .switch-hero {
    height: calc(1000px* 0.5);
    width: calc(1000px* 0.5);
    align-items: end;
    margin-left: -200px;
  }

  .hero-box .hero-detail-box {
    height: calc(300px* 0.7);
    width: calc(1063px* 0.5);
    background-image: url(../../images/mobile/font_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
    right: 0;
    position: absolute;
    top: 62%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero-detail-box .hero-title {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(to bottom, rgb(255, 255, 255) -20%, rgb(0, 0, 0) 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    border-bottom: 1.5px #000 solid;
    padding-bottom: 15px;
    width: 23rem;
    letter-spacing: 1px;
    text-align: center;
  }

  .hero-detail-box .hero-detail {
    font-size: 0.8rem;
    font-weight: 700;
    width: 24rem;
    padding-top: 14px;
    letter-spacing: 2px;
    line-height: 20px;
  }

  .heroes-bg {
    height: calc(276px* 0.5);
    width: calc(1716px* 0.9);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-left: auto;
    position: relative;
    top: -37px;
    right: -25px;
    z-index: 2;
  }

  .heroes-bg .heroes {
    position: absolute;
    top: 70px;
    width: calc(1500px * 0.3);
    justify-content: center;
    align-items: center;
  }

  .hero-img {
    width: 200px;
    position: relative;
    height: calc(179px* 0.5);
    width: calc(194px* 0.9);
  }

  .hero-img:first-child {
    margin-right: 5px;
  }

  .hero-img img {
    object-fit: cover;
    height: 100%;
  }


  .more-hero-btn {
    width: 117px;
    z-index: 5;
    position: absolute;
    bottom: -67px;
    margin: 0 auto;
    left: 11%;
  }

  /* 注意事項 */
  .booking-area {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -30%);
  }

  .booking-area .booking-district {
    position: relative;
    width: calc(1220px *0.5);
    height: calc(710px *0.5);
    background: url(../../images/preord.png);
    background-position: center center;
    background-size: cover;
  }

  .booking_charter {
    position: absolute;
    left: -200px;
    top: 30em;
    width: 30em;
  }

  .booking_charter2 {
    position: absolute;
    right: -110px;
    top: 30em;
    width: 40em;
  }

  .booking-district .title {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding-left: 25px;
    background: url(../../images/diamaond.png);
    background-size: 20px auto;
    background-position: left center;
    background-repeat: no-repeat;
  }

  .booking-district .info {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .booking-district .info select {
    padding: 3px 5px;
    border: 1px solid #9e9c9c;
    border-radius: 5px;
    font-size: 16px;
  }

  .booking-district .info input[type='text'] {
    display: inline-block;
    padding: 3px 5px;
    margin-left: 5px;
    border: 1px solid #9e9c9c;
    border-radius: 5px;
    font-size: 18px;
  }

  .booking-district .extra {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    padding-bottom: 30px;
    align-items: center;
    color: #fff;
    font-size: 20px;
    justify-content: center;
  }

  .booking-district .extra input[type='checkbox'] {
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: center;
    border: 1px solid #292927;
  }

  .booking-district .extra input[type='checkbox']:checked::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 3px;
    right: 0;
    bottom: 0;
    color: #292927;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
  }

  .order_err_msg {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 20px;
    font-weight: 600;
  }

  /* .booking-district a.sendbtn {
  position: absolute;
  width: calc(384px * 0.7);
  height: calc(125px * 0.7);
  bottom: 30px;
  left: 50%;
  margin-bottom: 19px;
  transform: translateX(-50%);
  background: url(../../images/booking_btn.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.booking-district a.sendbtn:hover {
  background: url(../../images/booking_btn_hover.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
} */

  .milestone {
    position: absolute;
    top: 0;
    width: 100%;
  }

  .milestone .sandy {
    position: absolute;
    top: 70px;
    left: -120px;
    width: calc(1150px * 0.4);
  }

  .milestone .slogan {
    position: absolute;
    top: 140px;
    left: 80px;
    width: calc(630px * 0.4);
  }

  .milestone .haru {
    position: absolute;
    top: 70px;
    right: -60px;
    width: calc(558px * 0.5);
  }

  /* .milestone .gift {
  position: absolute;
  top: 20em;
  left: 50%;
  transform: translate(-50%);
  width: calc(1150px * 0.35);
  height: calc(1124px * 0.35);
  overflow-x: hidden;
  background: url(../../images/mobile/2_rewardbg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

  .milestone .gift .gift-area {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s ease-in-out;
  }

  #div1 {
    transform: translateX(0);
  }

  #div2 {
    transform: translateX(100%);
  }

  .milestone .gift .gift-area .item1 {
    position: absolute;
    left: 60px;
    top: 40px;
    width: 130px;
    height: 130px;
    background-color: rgba(2, 254, 141, 0.6);
    border-radius: 20px;
  }

  .milestone .gift .gift-area .item2 {
    position: absolute;
    left: 210px;
    top: 40px;
    width: 130px;
    height: 130px;
    background-color: rgba(2, 254, 141, 0.6);
    border-radius: 20px;
  }

  .milestone .gift .gift-area .item3 {
    position: absolute;
    left: 60px;
    top: 195px;
    width: 130px;
    height: 130px;
    background-color: rgba(2, 254, 141, 0.6);
    border-radius: 20px;
  }


  .milestone .gift .gift-area .item4 {
    position: absolute;
    left: 210px;
    top: 195px;
    width: 130px;
    height: 130px;
    background-color: rgba(2, 254, 141, 0.6);
    border-radius: 20px;
  }

  .milestone .gift .gift-area .right_arrow {
    position: absolute;
    right: 0;
    top: 180px;
    width: 60px;
  }

  .milestone .gift .gift-area .left_arrow {
    position: absolute;
    left: 0;
    top: 180px;
    width: 60px;
  }

  .sectionbg-3 .original-area .sec-title {
    padding-top: 10px;
  }

  .album-area {
    position: absolute;
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }

  .album-district {
    position: relative;
    width: calc(1207px* 0.4);
    height: calc(840px* 0.3);
    background: url(../../images/windows_2.png);
    background-position: center center;
    background-size: cover;
  }

  .album-content {
    width: 430px;
    padding-top: 66px;
  }


  .arrow-box {
    width: 40%;
    position: absolute;
    left: 30%;
    top: 45%;
  }

  .character-block .album {
    position: relative;
    display: block;
    box-sizing: border-box;
    left: 6%;
  }


  .arrow-box {
    width: 40%;
    position: absolute;
    left: 30%;
    top: 46%;
  }

  .cat {
    position: absolute;
    left: 10em;
    top: -6em;
    width: calc(540px * 0.3);
    z-index: 5;
  }

  .xano {
    position: absolute;
    left: 0;
    bottom: -13em;
    width: calc(1180px * 0.4);
  }

  .character-block .album a.arrow {
    position: absolute;
    width: 10%;
    top: 47%;
    transform: translateY(-50%);
  }

  .character-block .album a.arrow.character-arrow-pre {
    position: absolute;
    top: 14rem;
    left: 10rem;
  }

  .character-block .album a.arrow.character-arrow-next {
    position: absolute;
    top: 14rem;
    right: 9rem;
  }


  .sectionbg-4 .original-area .sec-title {
    margin-top: 90px;
  }

  /* .sectionbg-4 .original-area .sec-title img {
  width: 25em;
} */

  .publicity {
    position: absolute;
    margin-top: 0;
    width: 100%;
    height: 55rem;
  }

  .publicity .ra {
    position: absolute;
    top: 0;
    left: -180px;
    width: 800px;
  }

  .publicity .xeno {
    position: absolute;
    top: -90px;
    right: 0;
    width: 500px;
  }

  .publicity .pub_content {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    width: calc(1207px * 0.33);
    height: calc(840px * 0.33);
    background: url(../../images/mobile/4_vdbg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  video::-webkit-media-controls-play-button {
    display: none;
  }

  video::-webkit-media-controls-timeline {
    display: none;
  }

  video::-webkit-media-controls-current-time-display {
    display: none;
  }

  video::-webkit-media-controls-time-remaining-display {
    display: none;
  }

  video::-webkit-media-controls-play-button {
    display: none;
  }

  .publicity .pub_content video {
    position: absolute;
    top: 40px;
    left: 20px;
    width: 90%;
  }

  .publicity .pub_content .video_pagenum {
    display: flex;
    position: absolute;
    bottom: -35px;
    left: 20%;
  }

  .publicity .pub_content .video_pagenum .page {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    background: url(../../images/video_aw.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .publicity .pub_content .video_pagenum .pubchs {
    background: url(../../images/video_aw02.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .play_btn {
    position: absolute;
    top: 51%;
    left: 50%;
    width: 93%;
    height: 74%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  .play_btn img {
    width: 30%;
  }

  .play_btn img:hover {
    transform: scale(1.25);
    transition: transform 0.3s ease;
  }

  .sectionbg-5 .original-area:nth-of-type(2) {
    margin-top: 250px;
  }

  /* .sectionbg-5 .original-area .sec-title img {
  width: 22em;
} */

  .notice-area {
    position: absolute;
    left: 50%;
    width: 90%;
    line-height: 0.6rem;
    transform: translateX(-50%);
  }

  .notice-area span {
    display: block;
    font-size: 14px;
    color: #000;
    line-height: 1rem;
  }

  .sectionbg-6-5 .original-area {
    padding-top: 10%;
    height: 50vh;
  }

  .copyright {
    position: relative;
    display: block;
    width: 100vw;
    max-width: 1920px;
    text-align: center;
    z-index: 3;
  }

  .copyright .copyright-title img {
    width: 15em;
  }

  .copyright .copyright-content img {
    width: 27%;
  }

  .copyright .copyright-content .eddLai {
    width: 18%;
  }

  .copyright .copyright-content .philips {
    width: 13%;
    margin-right: 3%;
  }

  .copyright .copyright-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    line-height: 1rem;
    font-size: 10px;
  }

  .copyright .copyright-text span {
    display: block;
    color: #000;
  }

  /* bottom bar start */
  ul.download {
    position: fixed;
    left: 0;
    bottom: 0;
    display: none;
    width: 100%;
    margin: 0;
    align-items: center;
    padding: 10px 0;
    list-style: none;

    background: #28466e;
  }

  ul.download.see {
    display: block;
  }

  ul.download li {
    display: inline-block;
    width: 32%;
    text-align: center;
  }

  ul.download li img {
    width: 90%;
    max-width: 130px;
  }

  /* bottom bar end */

  div.topup {
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 50px;
    /* 可以根據需求調整大小 */
    height: auto;
    display: none;
    z-index: 100;
    /* 確保圖片在其他元素之上 */
    animation: scaleUp 1.5s infinite ease-in-out;
  }

  div.topup.see {
    display: block;
  }

  .sectionbg-7 {
    background: rgba(38, 58, 74, .99);
    padding-bottom: 60px;
  }

  .sectionbg-7 .mb-footer {
    display: flex;
    width: 100%;
    padding: 30px 15px;
    flex-wrap: wrap;
    box-sizing: border-box;
  }

  .mb-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40%;
  }

  .mb-logo>div {
    flex: 1;
    text-align: center;
  }

  .mb-logo img.full-image {
    max-height: 100px;
    object-fit: contain;
  }

  .sectionbg-7 .mb-footer .mb-cat {
    width: 100%;
    text-align: center;
  }

  .sectionbg-7 .mb-footer .mb-cat img {
    width: 100%;
    max-width: 293px;
  }

  .sectionbg-7 .mb-footer .mb-company {
    display: flex;
    width: 100%;
    padding: 30px 0;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* 文字區 */
  .sectionbg-7 .mb-footer .mb-company .mb-cover {
    width: 100%;
    max-width: 273px;
    margin: 0 auto;
    padding-bottom: 10px;
  }

  .sectionbg-7 .mb-footer .mb-company span.mb-title {
    display: inline-block;
    width: 100%;
    font-size: 13px;
    color: #FFF;
    text-align: center;
  }

  .sectionbg-7 .mb-footer .mb_content_link {
    width: 100%;
    padding-top: 10px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
  }

  .sectionbg-7 .mb-footer .mb_content_link a {
    color: #FFF !important;
    text-decoration: none;
  }

  .sectionbg-7 .mb-footer .mb-year {
    width: 100%;
    padding-top: 20px;
    text-align: center;
  }

  .sectionbg-7 .mb-footer .mb-year span.mb-title {
    text-align: center;
    font-size: 12px;
    color: #FFF;
    letter-spacing: 0;
    line-height: 16px;
  }

  .sectionbg-7 .mb-footer .mb-year .mb-cover {
    display: flex;
    align-items: flex-start;
    padding-bottom: 10px;
    margin: 0 auto;
  }

  .sectionbg-7 .mb-footer .mb-year .mb-cover img {
    max-width: 62px;
    flex-shrink: 0;
    margin-right: 10px;
  }

  .sectionbg-7 .mb-footer .mb-year .mb-cover span {
    display: inline-block;
    font-size: 12px;
    color: #FFF;
    letter-spacing: 0;
    line-height: 16px;
    text-align: left;
  }

  /* .sectionbg-7 .mb-footer .socail{
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.sectionbg-7 .mb-footer .socail a{
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  background: #28466e;
  text-decoration: none;
  color: #FFF;
}

.sectionbg-7 .mb-footer .socail a:hover{
  opacity: 0.9;
} */

  .hide {
    display: none;
  }

  .pub_content .pub_text {
    position: absolute;
    top: 50%;
    left: 20%;
    color: #fff;
  }
}



@media (max-width: 414px) {
  .video-btn {
    width: 72px;
    right: 5px;
    bottom: 198px;
  }

  .badge {
    top: 78%;
  }

  .sectionbg-0 .have_order {
    top: 80%;
  }

  /* 事前預約 */
  .sectionbg-1 .booking-1 {
    position: absolute;
    top: 23%;
  }

  .step1 .info input {
    width: 250px;
  }

  .step1 .order_err_msg {
    top: 77%;
  }

  .step1 .sendbtn {
    margin-top: 5%;
  }

  .booking-2 {
    margin-top: 85px;
    position: relative;
    position: absolute;
    top: 10%;
  }

  .step2_text {
    top: 30px;
    left: 45px;
  }

  .booking-3 {
    position: relative;
    position: absolute;
    top: 57%;
  }

  .btn {
    width: calc(980px * 0.35);
    height: calc(120px * 0.85);
  }

  /* 挑戰者先行禮 */
  .milestone .gift {
    top: 14.5rem;
    left: -12%;
    width: calc(1150px* 0.55);
    height: calc(1124px* 0.65);
    overflow-x: hidden;
    padding-top: 4rem;
    position: absolute;
  }

  .milestone .gift .chs span {
    top: 123px;
    font-size: 0.7rem;
  }

  .milestone .gift .item3 {
    position: absolute;
    left: 19%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
    top: 17.5%;
  }

  .milestone .gift .item4 {
    position: absolute;
    left: 42%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
    top: 17.5%;
  }

  .milestone .gift .item5 {
    position: absolute;
    left: 19%;
    top: 35%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .item6 {
    position: absolute;
    left: 42%;
    /* top: 475px; */
    top: 35%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .item7 {
    position: absolute;
    left: 19%;
    /* top: 475px; */
    top: 52.5%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  .milestone .gift .item8 {
    position: absolute;
    left: 42%;
    /* top: 475px; */
    top: 52.5%;
    width: calc(256px* 0.5);
    height: calc(256px* 0.5);
  }

  /* 英雄介紹 */
  .hero-box .switch-hero {
    height: calc(1000px* 0.45);
    align-items: end;
    margin-left: -189px;
    padding-top: 13%;
  }

  .hero-logo {
    bottom: 185px;
  }

  .hero-box .switch-type {
    width: calc(400px* 0.3);
    position: absolute;
    right: 0;
    top: 147px;
  }

  .hero-box .hero-detail-box {
    height: calc(300px* 0.75);
    width: calc(1063px* 0.4);
    top: 64%;
  }


  .hero-detail-box .hero-title {
    font-size: 1.4rem;
    padding-bottom: 10px;
    width: 20rem;
  }

  .hero-detail-box .hero-detail {
    /* font-size: 0.8rem; */
    width: 20rem;
    padding-top: 10px;
  }

  .heroes-bg {
    height: calc(276px* 0.5);
    width: calc(1716px* 0.6);
    top: -34px;
    right: -2px;
  }

  .heroes-bg .heroes {
    /* top: 70px; */
    width: calc(1238px* 0.33);
  }

  .hero-img:first-child {
    margin-right: 3px;
  }

  .hero-img {
    position: relative;
    height: calc(179px* 0.45);
  }

  .more-hero-btn {
    width: 117px;
    bottom: -65px;
    margin: 0 auto;
    left: 15%;
  }

  .booking-district .info select {
    font-size: 16px;
  }

  .booking-district .info input[type='text'] {
    font-size: 18px;
  }

  .booking-district .extra {
    font-size: 16px;
  }

  .booking-district .extra input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-right: 0px;
  }

  .booking-district a.sendbtn {
    width: calc(384px * 0.6);
    height: calc(125px * 0.6);
  }

  .milestone .slogan {
    width: calc(630px * 0.4);
  }

  .step1 {
    top: 15%;
    left: 2%;
  }

  .step1 .info {
    width: 350px;
  }


  .step3_text {
    left: 12%;
  }

  .step3 .step-fb {
    width: 200px;
  }

  .character-block .album {
    position: relative;
    display: block;
    box-sizing: border-box;
    left: 4%;
  }

  .album-district {
    width: calc(1207px* 0.323);
    height: calc(840px* 0.25);
  }

  .album-content {
    padding-top: 50px;
    width: 360px;
  }

  .album-area .arrow {
    width: calc(90px* 0.9);
  }

  .notice-area {
    line-height: 0.4rem;
    padding-top: 0px;
  }

  .notice-area span {
    font-size: 12px;
    line-height: 1rem;
  }

  .cat {
    left: 10em;
    top: -6em;
    width: calc(540px * 0.3);
    z-index: 5;
  }

  .character-block {
    padding-top: 5px;
  }

  .character-block .album a.arrow.character-arrow-pre {
    top: 14rem;
    left: 10rem;
  }

  .character-block .album a.arrow.character-arrow-next {
    top: 14rem;
    right: 9rem;
  }

  .publicity .pub_content {
    width: calc(1207px * 0.33);
    height: calc(840px * 0.33);
  }

  .publicity .pub_content video {
    top: 40px;
    left: 20px;
  }

  .publicity .pub_content .video_pagenum {
    left: 33%;
  }

  .play_btn {
    top: 51%;
    left: 50%;
    width: 93%;
    height: 74%;
  }
}

@media (max-width: 350px) {

  /* 彈窗 */
  .popup {
    width: calc(1007px* 0.4);
    height: calc(937px* 0.4);
    left: -2%;
    top: 20%;
  }

  .popup .booking-district .info select {
    padding: 0px 2px;
    border-radius: 8px;
    font-size: 11px;
    height: 1.1rem;
    width: 4rem;
  }

  .popup .booking-district .info input[type='text'] {
    padding: 3px 5px;
    border-radius: 8px;
    font-size: 11px;
    height: 0.7rem;
    width: 7rem;
  }

  .popup .booking-district .extra {
    position: absolute;
    top: 92%;
    left: 48%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    padding-bottom: 30px;
    align-items: center;
    color: #fff;
    font-size: 10px;
    justify-content: center;
  }

  .popup .booking-district .extra input[type='checkbox'] {
    width: 10px;
    height: 10px;
    margin-right: 3px;
  }

  /* 播放影片按鈕 */
  .video-btn {
    width: 72px;
    right: 0%;
    bottom: 23%;
  }


  /* 徽章 */
  .badge div {
    width: calc(250px* 0.4);
  }

  /* apple徽章 */
  .badge div:nth-child(2) a {
    width: 84%;
    margin-left: 8%;
  }

  /* 事前預約 */
  .step1_text0 {
    font-size: 1.6rem;
  }

  .step1_text1 {
    font-size: 1.4rem;
  }

  .step1_text2 {
    font-size: 1.4rem;

  }

  .step1 .info {
    width: 90%;
    font-size: 0.8rem;
    margin: 15px;
  }

  .step1 select {
    border-radius: 7px;
    width: 30%;
    border: 1px solid gray;
    padding: 10px;
  }

  .step1 .info input {
    width: 50%;
  }

  .step1 .extra input {
    width: 20px;
    height: 15px;
  }

  .step1 .extra {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    justify-content: center;
  }

  .order_btn_box a {
    height: calc(90px* 0.5);
    width: calc(240px* 0.65);
  }

  .step1 .sendbtn {
    margin-top: 7%;
  }

  .step2_text1 {
    font-size: 1.4rem;
  }

  .step2_text2 {
    font-size: 1rem;
  }

  .step-store-gp {
    width: 90px;
    margin: 5px 10px;
  }

  .step-store-ios {
    width: 90px;
    margin: 5px 10px;
  }

  .step3_text {
    left: 19%;
  }

  .step3_text1 {
    font-size: 1.4rem;
  }

  .step3_text2 {
    font-size: 1.2rem;
  }

  .step3 .step-fb {
    width: 160px;
  }

  /* 挑戰者先行禮 */
  .milestone .slogan-bg {
    width: calc(570px* 0.6);
    height: calc(120px* 0.6);
  }

  .milestone .gift {
    left: -24%;
    top: 13rem;
  }

  .milestone .gift .chs span {
    top: 95%;
    font-size: 0.6rem;
  }

  .milestone .gift .item1 {
    position: absolute;
    left: 23%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
    top: 0%;
  }

  .milestone .gift .item2 {
    position: absolute;
    left: 42%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
    top: 0%;
  }

  .milestone .gift .item3 {
    position: absolute;
    left: 23%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
    top: 15%;
  }

  .milestone .gift .item4 {
    position: absolute;
    left: 42%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
    top: 15%;
  }

  .milestone .gift .item5 {
    position: absolute;
    left: 23%;
    top: 30%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
  }

  .milestone .gift .item6 {
    position: absolute;
    left: 42%;
    top: 30%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
  }

  .milestone .gift .item7 {
    position: absolute;
    left: 23%;
    top: 45%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
  }

  .milestone .gift .item8 {
    position: absolute;
    left: 42%;
    top: 45%;
    width: calc(256px* 0.4);
    height: calc(256px* 0.4);
  }

  /* 英雄介紹 */
  .hero-name-box {
    height: calc(110px* 0.5);
    width: calc(400px* 0.5);
  }

  .hero-name-box .hero-name {
    font-size: 2rem;
    top: 5px;
    left: 18px;
  }

  .hero-name-box .logo-s {
    height: calc(67px* 0.5);
    width: calc(78px* 0.5);
    top: 5px;
    left: 120px;
  }

  .hero-box .hero-text {
    font-size: 1.2rem;
    top: 50px;
  }

  .hero-box .switch-type {
    width: calc(400px* 0.25);
    top: 147px;
  }

  .hero-logo {
    bottom: 169px;
  }

  .hero-box .switch-type {
    width: calc(400px* 0.25);
    top: 147px;
  }

  .hero-box .hero-detail-box {
    height: calc(300px* 0.55);
    width: calc(1063px* 0.4);
    top: 60%;
  }

  .hero-detail-box .hero-title {
    font-size: 1rem;
    width: 15rem;
    margin-left: 9%;
    padding-bottom: 3px;
  }

  .hero-detail-box .hero-detail {
    width: 16rem;
    font-size: 0.7rem;
    margin-left: 12%;
    letter-spacing: 1px;
    line-height: 16px;
    padding-top: 3px;
  }

  .heroes-bg {
    height: calc(276px* 0.4);
    width: calc(1716px* 0.4);
    top: -100px;
    right: -2px;
  }

  .heroes-bg .heroes {
    width: calc(1238px* 0.27);
  }

  .hero-img {
    height: calc(179px* 0.35);
  }

  .more-hero-btn {
    width: 100px;
    bottom: -65px;
    left: 16%;
  }

  /* 遊戲特色 */
  .album-district {
    width: calc(1207px* 0.27);
    height: calc(840px* 0.2);
  }










}

@keyframes upDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes scaleUp {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }
}