@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@700&display=swap');
html,
body {
  width: 100%;
  font-size: 1rem;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  text-align: center;
  line-height: 1.8rem;
  font-family: 'Noto Sans TC', sans-serif, Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}
* {
  /*chrome*/
  -webkit-box-sizing: border-box; /*firefox*/
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* :root {
} */
body {
  background: url(../images/wall_bg.webp) no-repeat top center;
  background-position: center 29px;
}
/* 共用 ------------------------------------ */
header .soc_con ul,
header .btn_con,
header .soc_con ul,
header .soc_con ul li,
header .soc_con ul li a,
header .btn_con a p {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .soc_con,
header .pic_con,
header .pic_con div img,
header .btn_con,
header .title_con,
header .title_con > div > img,
.logo,
header .title_con .story_btn,
header .title_con .story_btn > div img,
header .title_con .btn_a {
  position: absolute;
}
header .pic_con div,
header .title_con > div,
header .title_con .story_btn > div {
  position: relative;
}
header .pic_con div img,
header .title_con .story_btn > div {
  pointer-events: none;
}
/* header ------------------------------------ */
body > table {
  z-index: 1;
  position: relative;
}
header {
  position: relative;
  width: 1300px;
  height: 920px;
  margin: 0 auto;
}
.bg_v {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: color-dodge;
  pointer-events: none;
}
.bg_v video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  background-size: cover;
}
header .soc_con {
  left: 120px;
  z-index: 1;
}
header .soc_con ul {
  width: 495px;
  height: 65px;
  background: url(../images/soc_bg.webp) top center no-repeat;
  background-size: 100% auto;
  padding-left: 30px;
}
header .soc_con ul li a {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: -22px;
  letter-spacing: 2px;
  color: #fff;
  transition: all 0.3s;
}
header .soc_con ul li a:hover {
  color: #ffe02f;
}
header .soc_con ul li + li::before {
  content: '';
  display: block;
  width: 20px;
  height: 24px;
  background: url(../images/soc_icon.webp) center no-repeat;
  background-size: 100% auto;
  margin: 0 4px;
  margin-top: -22px;
}
header .soc_con ul li a img {
  width: 40px;
}
header .title_con {
  top: 246px;
  left: -9px;
}
header .title_con > div {
  opacity: 0;
  animation: title_open 0.7s 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
}
header .title_con .title_light {
  mix-blend-mode: screen;
}
header .title_con .title_pic {
  top: 81px;
  left: 41px;
}
header .title_con .story_btn {
  top: 345px;
  left: 536px;
  width: 248px;
  height: 110px;
}
header .title_con .story_btn > div img {
  transition: all 0.3s;
}
header .title_con .story_btn .btn_bg01 {
  top: 0;
  left: 18px;
}
header .title_con .story_btn .btn_bg02 {
  top: -7px;
  left: 2px;
  mix-blend-mode: screen;
}
header .title_con .story_btn .btn_icon {
  top: 36px;
  left: 46px;
  width: 38px;
}
header .title_con .story_btn .btn_txt {
  top: 21px;
  left: 88px;
}

header .title_con .story_btn:hover .btn_bg01 {
  top: 3px;
  filter: brightness(1.15) drop-shadow(0px 0px 15px rgba(236, 96, 255, 0.2));
}
header .title_con .story_btn:hover .btn_bg02 {
  top: -9px;
}
header .title_con .story_btn:hover .btn_icon {
  top: 39px;
  transform: scale(1.2);
}
header .title_con .story_btn:hover .btn_txt {
  top: 24px;
  transform: scale(0.95);
}

header .title_con .btn_a {
  display: block;
  width: 208px;
  height: 54px;
  z-index: 1;
  transform: rotate(-10deg);
  top: 20px;
  left: 20px;
}
header .btn_con {
  top: 718px;
  left: 248px;
  opacity: 0;
  animation: btn_open 0.7s 1.1s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
}
header .btn_con a {
  position: relative;
  margin: 0 20px;
  transition: all 0.3s;
}
header .btn_con a p {
  position: absolute;
  color: #fff;
  font-size: 1.1rem;
  width: 120px;
  height: 30px;
  border-radius: 20px;
}
header .btn_con a:first-child p {
  border: 1px solid rgb(115, 95, 41);

  background-image: -moz-linear-gradient(131deg, rgba(125, 53, 48, 0.99608) 0%, rgb(212, 154, 70) 100%);
  background-image: -webkit-linear-gradient(131deg, rgba(125, 53, 48, 0.99608) 0%, rgb(212, 154, 70) 100%);
  background-image: -ms-linear-gradient(131deg, rgba(125, 53, 48, 0.99608) 0%, rgb(212, 154, 70) 100%);
  box-shadow: inset 0px 0px 2.73px 0.27px rgba(190, 216, 255, 0.004);
  left: 190px;
  top: 150px;
}
header .btn_con a:last-child p {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(204, 118, 9);
  background-image: -moz-linear-gradient(131deg, rgb(182, 82, 24) 0%, rgb(230, 167, 49) 100%);
  background-image: -webkit-linear-gradient(131deg, rgb(182, 82, 24) 0%, rgb(230, 167, 49) 100%);
  background-image: -ms-linear-gradient(131deg, rgb(182, 82, 24) 0%, rgb(230, 167, 49) 100%);
  box-shadow: inset 0px 0px 2.73px 0.27px rgba(246, 160, 148, 0.004);
  left: 135px;
  top: 140px;
}

header .btn_con a:hover {
  transform: scale(0.96);
  filter: brightness(1.15);
}
.logo {
  top: 45px;
  left: 222px;
}
.logo a img {
  transition: all 0.3s;
}
.logo a:hover img {
  filter: brightness(1.1);
  transform: translateY(2px) scale(0.98);
}
header .pic_con .char {
  top: 10px;
  left: 5px;
  animation: char_open 0.6s ease-in, char infinite alternate-reverse 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
header .pic_con .char_light {
  left: 5px;
  top: -5px;
  mix-blend-mode: screen;
  animation: char_open 0.6s ease-in, char infinite alternate-reverse 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
header .pic_con .ball_left {
  top: 62px;
  left: 60px;
  opacity: 0;
  animation: char_open 0.6s ease-in 0.5s forwards, ball infinite alternate-reverse 1.5s linear;
}
header .pic_con .ball_right {
  top: 310px;
  left: 844px;
  opacity: 0;
  animation: char_open 0.6s ease-in 0.3s forwards, ball infinite alternate-reverse 1.5s 0.3s linear;
}
header .pic_con .light_point {
  left: -35px;
  top: -20px;
}
/* 版權copyright */
footer {
  width: 100%;
  position: relative;
  z-index: 10;
}
.footer-con {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.8rem 1% 1.7rem 1%;
  display: flex;
  display: -ms-flexbox;
  justify-content: space-around;
  -ms-flex-pack: justify;
  align-items: center;
  -ms-flex-align: center;
}
.footer-con article {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
}
.footer-con article:nth-of-type(1) {
  width: 70%;
}
.footer-con article:nth-of-type(2) {
  width: 30%;
  justify-content: flex-end;
  -ms-flex-pack: end;
}

.cr-uj {
  width: 100%;
  max-width: 150px;
}
ul.cr-txt {
  max-width: fit-content;
  font-size: 0.75rem;
  line-height: 1.55;
  padding-top: 0.5rem;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
}
ul.cr-txt li {
  max-width: fit-content;
  padding-left: 1.5%;
  text-align: left;
}
ul.cr-txt li:nth-of-type(1) {
  width: 100%;
  max-width: none;
}

.rank-icon {
  width: 100%;
  max-width: 42px;
}
ul.rank-txt {
  width: 100%;
  max-width: fit-content;
  font-size: 10px;
  line-height: 1.45;
  margin-left: 1.7%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
ul.rank-txt li {
  max-width: fit-content;
  padding-left: 0.47rem;
}

img.page02_img {
  position: absolute;
  bottom: -92px;
}

header .btn_con a:last-child p#page02_p {
  top: 76px;
}

@media (max-width: 1300px) {
  body {
    background-size: 165vw auto;
    background-attachment: local;
  }
  header {
    width: 100%;
    height: 65.71vw;
  }
  header .soc_con {
    left: 5vw;
  }
  header .soc_con ul {
    width: 35.64vw;
    height: 6.35vw;
    padding-left: 2vw;
  }
  header .soc_con ul li + li::before {
    width: 1.35vw;
    height: 1.71vw;
    margin: 0 0.28vw;
    margin-top: -3vw;
  }
  header .soc_con ul li a {
    font-size: 1.4vw;
    letter-spacing: 0;
    margin-top: -3vw;
  }
  header .soc_con ul li a img {
    width: 2.85vw;
  }
  header .title_con {
    top: 17.57vw;
    left: 2.85vw;
  }
  header .title_con .title_light {
    width: 28.71vw;
  }
  header .title_con .title_pic {
    width: 55.21vw;
    top: 5.78vw;
    left: 2.92vw;
  }
  header .title_con .story_btn {
    top: 24.78vw;
    left: 38.71vw;
    width: 17.71vw;
    height: 7.85vw;
  }
  header .title_con .story_btn .btn_bg01 {
    width: 15.14vw;
    top: 0;
    left: 1.28vw;
  }
  header .title_con .story_btn .btn_bg02 {
    width: 17.71vw;
    top: -0.5vw;
    left: -0.14vw;
  }
  header .title_con .story_btn .btn_icon {
    top: 2.64vw;
    left: 3.28vw;
    width: 2.71vw;
  }
  header .title_con .story_btn .btn_txt {
    width: 7.85vw;
    top: 1.5vw;
    left: 6.28vw;
  }
  header .title_con .story_btn:hover .btn_bg01 {
    top: 0;
  }
  header .title_con .story_btn:hover .btn_bg02 {
    top: -0.5vw;
  }
  header .title_con .story_btn:hover .btn_icon {
    top: 2.64vw;
    transform: scale(1);
  }
  header .title_con .story_btn:hover .btn_txt {
    top: 1.5vw;
    transform: scale(1);
  }
  header .title_con .btn_a {
    width: 14.85vw;
    height: 3.85vw;
    top: 1.42vw;
    left: 1.42vw;
  }
  header .btn_con {
    top: 51.28vw;
    left: 21.28vw;
    margin-top: -10px;
  }
  header .btn_con a {
    margin: 0 1.42vw;
  }
  header .btn_con a p {
    font-size: 1.3vw;
    width: 8.57vw;
    height: 2.1vw;
  }
  header .btn_con a:first-child p {
    left: 13.57vw;
    top: 10.8vw;
  }
  header .btn_con a:first-child img {
    width: 24.64vw;
  }
  header .btn_con a:last-child p {
    left: 9.64vw;
    top: 10vw;
  }
  header .btn_con a:last-child img {
    width: 29.42vw;
  }
  .logo {
    top: 3.14vw;
    left: 19.28vw;
  }
  .logo img {
    width: 27.14vw;
  }
  header .pic_con .char {
    width: 89.64vw;
    top: 0.85vw;
    left: 3.92vw;
  }
  header .pic_con .char_light {
    width: 92.07vw;
    left: 4.14vw;
    top: -1.42vw;
  }
  header .pic_con .ball_left {
    width: 27.64vw;
    top: 4.42vw;
    left: 7.78vw;
  }
  header .pic_con .ball_right {
    width: 28.57vw;
    top: 22.21vw;
    left: 63.71vw;
  }
  header .pic_con .light_point {
    width: 96.57vw;
    left: 1.28vw;
    top: -1.28vw;
  }
}
@media (max-width: 950px) {
  .footer-con {
    padding: 1.05rem 1% 1.12rem 1%;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -ms-flex-pack: center;
    align-items: center;
    -ms-flex-align: center;
  }
  .footer-con article:nth-of-type(1) {
    width: 100%;
    margin-bottom: 2rem;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -ms-flex-pack: center;
    align-items: center;
    -ms-flex-align: center;
  }
  .footer-con article:nth-of-type(2) {
    width: 100%;
    justify-content: center;
    -ms-flex-pack: center;
  }
  ul.rank-txt {
    margin-left: 1.4%;
    line-height: 1.5;
  }
  ul.rank-txt li {
    padding-left: 0.48rem;
  }
  ul.cr-txt {
    padding-top: 0.3rem;
    line-height: 1.6;
    justify-content: center;
    -ms-flex-pack: center;
  }
  ul.cr-txt li:nth-of-type(1) {
    text-align: center;
  }
}
@media (max-width: 900px), (orientation: portrait) {
  body {
    background: url(../images/main_bg_m.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center 29px;
  }
  .char,
  .char_light,
  .light_point,
  .bg_v {
    display: none;
  }
  header .title_con > div,
  header .pic_con .char,
  header .pic_con .ball_right,
  header .btn_con,
  header .pic_con .char_light,
  header .pic_con .ball_left {
    animation: none;
    opacity: 1;
  }
  .logo {
    top: 5vw;
    left: 2vw;
  }
  .logo img {
    width: 45.06vw;
  }
  header {
    height: 140vw;
  }
  header .pic_con .ball_left {
    width: 38.87vw;
    top: 20.22vw;
    left: 2vw;
  }
  header .pic_con .ball_right {
    width: 39.55vw;
    top: 44vw;
    left: 68.98vw;
  }
  header .soc_con {
    left: 0;
  }
  header .soc_con ul {
    width: 74.49vw;
    height: 11.79vw;
    padding-left: 6vw;
    margin-left: 13.25vw;
  }
  header .soc_con ul li a {
    font-size: 3vw;
    margin-top: -5vw;
    letter-spacing: normal;
  }
  header .soc_con ul li + li::before {
    width: 2.58vw;
    height: 2.6vw;
    margin-top: -5vw;
  }
  header .soc_con ul li a img {
    width: 6vw;
  }

  header .title_con {
    top: 56.85vw;
    left: 2.24vw;
  }

  header .title_con .title_light {
    width: 46.85vw;
  }
  header .title_con .title_pic {
    width: 90.56vw;
    top: 9.6vw;
    left: 5.05vw;
  }
  header .title_con .btn_a {
    width: 32.02vw;
    height: 9vw;
  }
  header .title_con .story_btn {
    top: 41.23vw;
    left: 60.22vw;
    width: 32.02vw;
    height: 9vw;
  }
  header .title_con .story_btn .btn_bg01 {
    width: 28.08vw;
    left: 2.24vw;
  }
  header .title_con .story_btn .btn_bg02 {
    width: 32.02vw;
    top: -0.5vw;
    left: 0vw;
  }
  header .title_con .story_btn .btn_icon {
    top: 4.92vw;
    left: 5.84vw;
    width: 4.83vw;
  }
  header .title_con .story_btn .btn_txt {
    width: 14.49vw;
    top: 2.58vw;
    left: 11.46vw;
  }
  header .title_con .story_btn:hover .btn_bg02 {
    top: -0.5vw;
  }
  header .title_con .story_btn:hover .btn_icon {
    top: 4.92vw;
  }
  header .title_con .story_btn:hover .btn_txt {
    top: 2.58vw;
  }

  header .btn_con {
    top: 112vw;
    left: 7.41vw;
  }
  header .btn_con a {
    margin: 2.8vw;
  }
  header .btn_con a p {
    font-size: 2.5vw;
    width: 16.62vw;
    height: 4.15vw;
  }
  header .btn_con a:first-child p {
    left: 20.5vw;
    top: 17vw;
  }
  header .btn_con a:first-child img {
    width: 38.2vw;
  }
  header .btn_con a:last-child p {
    left: 13.48vw;
    top: 16.2vw;
  }
  header .btn_con a:last-child img {
    width: 40.74vw;
  }
}
@media (max-width: 600px) {
  body {
    background: url(../images/main_bg_s.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center 29px;
  }
  .logo {
    top: 9.8vw;
    left: 25.84vw;
  }
  .logo img {
    width: 54vw;
  }
  header {
    height: 172vw;
  }
  header .pic_con .ball_left {
    width: 38.87vw;
    top: 7vw;
    left: -1.68vw;
  }
  header .pic_con .ball_right {
    width: 40.11vw;
    top: 62.02vw;
    left: 66.06vw;
  }
  header .soc_con {
    left: 0;
  }
  header .soc_con ul {
    width: 104vw;
    height: 13.12vw;
    padding-left: 6vw;
    margin-left: -2vw;
  }
  header .soc_con ul li a {
    font-size: 4.2vw;
    margin-top: -4vw;
    letter-spacing: normal;
  }
  header .soc_con ul li + li::before {
    width: 5.5vw;
    height: 5.6vw;
    margin-top: -4vw;
  }
  header .soc_con ul li a img {
    width: 8vw;
  }

  header .title_con {
    top: 74vw;
    left: -7.41vw;
  }
  header .title_con .title_light {
    width: 54.04vw;
  }
  header .title_con .title_pic {
    width: 104.04vw;
    top: 11.23vw;
    left: 6vw;
  }
  header .title_con .btn_a {
    width: 41vw;
    height: 14vw;
  }
  header .title_con .story_btn {
    top: 48.2vw;
    left: 57.97vw;
    width: 44.49vw;
    height: 19.77vw;
  }
  header .title_con .story_btn .btn_bg01 {
    width: 40.67vw;
    left: 1.68vw;
  }
  header .title_con .story_btn .btn_bg02 {
    width: 44.49vw;
    top: 0;
    left: 0vw;
  }
  header .title_con .story_btn .btn_icon {
    top: 7.2vw;
    left: 7.64vw;
    width: 6.4vw;
  }
  header .title_con .story_btn .btn_txt {
    width: 20.89vw;
    top: 3.7vw;
    left: 15.5vw;
  }
  header .title_con .story_btn:hover .btn_bg02 {
    top: 0;
  }
  header .title_con .story_btn:hover .btn_icon {
    top: 7.2vw;
  }
  header .title_con .story_btn:hover .btn_txt {
    top: 3.7vw;
  }

  header .btn_con {
    top: 140vw;
    left: 3.14vw;
  }
  header .btn_con a {
    margin: 2vw;
  }
  header .btn_con a p {
    font-size: 3vw;
    width: 20.11vw;
    height: 5vw;
  }
  header .btn_con a:first-child p {
    left: 22.47vw;
    top: 19.66vw;
  }
  header .btn_con a:first-child img {
    width: 41.91vw;
  }
  header .btn_con a:last-child p {
    left: 16.29vw;
    top: 17.97vw;
  }
  header .btn_con a:last-child img {
    width: 45.34vw;
  }

  img.page02_img {
    position: absolute;
    bottom: -46px;
  }

  header .btn_con a:last-child p#page02_p {
    top: 46px;
  }

  .map02 {
    max-height: 500px;
    width: 100%;
  }
}