@charset "UTF-8";
/* 引入 Zenkaku 字體 */
@font-face {
  font-family: 'Zenkaku';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ZenKakuGothicAntique-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Zenkaku';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/ZenKakuGothicAntique-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Zenkaku';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/ZenKakuGothicAntique-Medium.ttf") format("truetype");
}

@font-face {
  font-family: 'Zenkaku';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/ZenKakuGothicAntique-Bold.ttf") format("truetype");
}

@font-face {
  font-family: 'Zenkaku';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/ZenKakuGothicAntique-Black.ttf") format("truetype");
}

/* 使用 @font-face 確保字體正確載入 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFlOG829Oofr2wohFbTp9i9WyEJIfNZ1sjy.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9kwMvDd1V39Hr7g.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nF7OG829Oofr2wohFbTp9iFOSsLA_ZJ9Q.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9ywIvDd1V39Hr7g.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9gwQvDd1V39Hr7g.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9uwYvDd1V39Hr7g.otf) format("opentype");
}

/* 基本設定 */
:root {
  /* 主色系 - 橙色系列 */
  --primary-orange-1: #FF7F00;
  --primary-orange-2: #FFA100;
  --primary-orange-3: #FFC384;
  --primary-orange-4: #E19408;
  /* 灰階系列 */
  --black: #000000;
  --grey-7: #b6b6b6;
  --grey-6: #5E5E5E;
  --grey-5: #7D7D7E;
  --grey-4: #AAAAAA;
  --grey-3: #CCCCCC;
  --grey-2: #D3D3D3;
  --grey-1: #EFEFEF;
  --white: #FFFFFF;
  /* 漸層背景色 */
  --gradient-start: #E8E8E8;
  --gradient-end: #FAFAFA;
  /* Header 漸層 */
  --header-gradient-start: rgba(255, 127, 0, 0);
  --header-gradient-end: #FF7F00;
}

/* 全域設定 */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  /* background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--gradient-end) 100%); */
  color: var(--black);
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

body.lock {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

::-webkit-scrollbar-track {
  background: var(--primary-orange-2);
}

/* 標題系列設定 */
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", sans-serif;
}

h1 {
  font-size: 6rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-stretch: condensed;
  /* 設定 condensed 樣式 */
  /* 備用方案，使用具體字體名稱 */
  font-family: "Helvetica Neue Condensed Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 4.8rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-stretch: condensed;
  /* 備用方案 */
  font-family: "Helvetica Neue Condensed Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h3 {
  font-size: 3.6rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-stretch: condensed;
  /* 備用方案 */
  font-family: "Helvetica Neue Condensed Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.h1 {
  font-size: 6rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-stretch: condensed;
  /* 設定 condensed 樣式 */
  /* 備用方案，使用具體字體名稱 */
  font-family: "Helvetica Neue Condensed Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 英文標題類別 */
.headline-large {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 5%;
  line-height: 1.4;
}

.headline-medium {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 5%;
}

.headline-small {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 5%;
  line-height: 1;
}

/* 中文標題類別 */
.zh-title-large {
  font-family: "Zenkaku", sans-serif;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 5%;
}

.zh-title-medium {
  font-family: "Zenkaku", sans-serif;
  font-size: 2rem;
  font-weight: 1000;
  letter-spacing: 30%;
}

.zh-subtitle {
  font-family: "Zenkaku", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
}

/* Noto Sans 中文樣式 */
[class^="noto-"], .noto-title, .noto-subtitle, .noto-text-md, .noto-text-sm, .noto-text-bold {
  font-family: 'Noto Sans TC', sans-serif;
}

.noto-title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.noto-subtitle {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.noto-text-md {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0;
}

.noto-text-sm {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

.noto-text-bold {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* -------------- 龍珠專用容器 -------------- */
.dragonball {
  /* 自訂 scrollbar 顏色 */
}

.dragonball ::-webkit-scrollbar-track {
  background: var(--primary-orange-2);
}

@media (min-width: 446px) {
  .dragonball {
    padding-top: 15vh;
    overflow: hidden;
    position: relative;
  }
  .dragonball::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#EEEEEE));
    background: linear-gradient(to bottom, #FAFAFA 0%, #EEEEEE 100%);
  }
}

@media (max-width: 446px) {
  .dragonball_bg {
    display: none;
  }
}

.dragonball_bg .dragonball-1 {
  position: fixed;
  top: 8.49vw;
  /* 163px / 1920 * 100 */
  left: 9.375vw;
  /* 180px / 1920 * 100 */
  width: 3.75vw;
  /* 72px / 1920 * 100 */
  -webkit-animation: updownInfiTwo 10s infinite;
          animation: updownInfiTwo 10s infinite;
  z-index: 2;
}

.dragonball_bg .dragonball-2 {
  position: fixed;
  top: 27.97vw;
  /* 537px / 1920 * 100 */
  left: 5.73vw;
  /* 110px / 1920 * 100 */
  width: 3.75vw;
  -webkit-animation: updownInfiThree 8s infinite;
          animation: updownInfiThree 8s infinite;
  z-index: 2;
}

.dragonball_bg .dragonball-3 {
  position: fixed;
  top: 38.65vw;
  /* 742px / 1920 * 100 */
  left: 48.33vw;
  /* 928px / 1920 * 100 */
  width: 3.75vw;
  -webkit-animation: updownInfiThree 10s infinite;
          animation: updownInfiThree 10s infinite;
  z-index: 2;
}

.dragonball_bg .dragonball-4 {
  position: fixed;
  top: 8.85vw;
  /* 170px / 1920 * 100 */
  right: 7.29vw;
  /* 140px / 1920 * 100 */
  width: 3.75vw;
  -webkit-animation: updownInfiThree 10s infinite;
          animation: updownInfiThree 10s infinite;
  z-index: 2;
}

.dragonball_bg .dragonball-5 {
  position: fixed;
  top: 31.04vw;
  /* 596px / 1920 * 100 */
  right: 6.25vw;
  /* 120px / 1920 * 100 */
  width: 3.75vw;
  -webkit-animation: updownInfiTwo 8s infinite;
          animation: updownInfiTwo 8s infinite;
  z-index: 2;
}

.dragonball_bg .dragonball-6 {
  position: fixed;
  top: 6.51vw;
  /* 125px / 1920 * 100 */
  left: 41.67vw;
  /* 800px / 1920 * 100 */
  width: 3.75vw;
  -webkit-animation: updownInfiTwo 8s infinite;
          animation: updownInfiTwo 8s infinite;
  z-index: 2;
}

.dragonball_bg .dragonball-7 {
  position: fixed;
  top: 47.81vw;
  /* 918px / 1920 * 100 */
  left: 34.27vw;
  /* 658px / 1920 * 100 */
  width: 3.75vw;
  -webkit-animation: updownInfiTwo 8s infinite;
          animation: updownInfiTwo 8s infinite;
  z-index: 2;
}

.dragonball_bg .big-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: 1;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
}

.dragonball_bg .big-bg-two {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: 1;
  -webkit-animation: updownInfi 12s infinite;
          animation: updownInfi 12s infinite;
}

.dragonball_nav {
  position: fixed;
  top: calc((100vh - 63.5rem) / 2);
  left: 16vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 2;
}

@media (max-width: 446px) {
  .dragonball_nav {
    display: none;
  }
}

.dragonball_nav-logo {
  width: 28.6rem;
}

.dragonball_nav-links {
  padding-top: 12.8rem;
  padding-bottom: 16rem;
  padding-left: 2.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.dragonball_nav-links a {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.dragonball_nav-links a:hover {
  color: var(--primary-orange-1);
}

.dragonball_nav-links a.active {
  color: var(--primary-orange-1);
}

.dragonball_nav > p {
  padding-left: 2.3rem;
}

.dragonball_inner {
  position: relative;
  max-width: 44.5rem;
  z-index: 3;
  background-color: var(--grey-1);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.dragonball_inner::-webkit-scrollbar {
  display: none;
}

@media (min-width: 446px) {
  .dragonball_inner {
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 2rem 2rem 0 0;
    height: 100%;
    margin: 0 18vw 0 auto;
  }
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 44.5rem;
  padding: 5.3rem 4.5rem 2rem 2rem;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--header-gradient-start)), to(var(--header-gradient-end)));
  background: linear-gradient(to top, var(--header-gradient-start) 0%, var(--header-gradient-end) 100%);
  z-index: 10000;
  -webkit-transition: top 0.3s ease;
  transition: top 0.3s ease;
}

@media (min-width: 446px) {
  .header {
    position: -webkit-sticky;
    position: sticky;
    margin-top: -12rem;
    /* 負 margin 抵消頂部空間 (53px padding-top + 20px padding-bottom) */
    /* 創建一個看不見的偽元素來防止內容顯示在 header 下方 */
  }
  .header::before {
    content: "";
    display: block;
    height: 0;
    /* 與 header 內容高度相同 */
    visibility: hidden;
  }
}

.header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.header__logo {
  width: 12rem;
}

.header__hamburger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

@media (min-width: 446px) {
  .header__hamburger {
    display: none;
  }
}

.header__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 44.5rem;
  height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  background-color: rgba(182, 182, 182, 0.8);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(4rem);
  overflow: hidden;
  /* 隱藏 scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.header__nav::-webkit-scrollbar {
  display: none;
}

.header__nav-inner {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: 7vh;
  padding-bottom: 7vh;
}

.header__nav.open {
  height: calc(var(--real-vh, 1vh) * 100);
}

.header__nav::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: .6;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgba(33, 33, 33, 0)), to(rgba(33, 33, 33, 0.9)));
  background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 30%, rgba(33, 33, 33, 0.9) 100%);
}

.header__nav-logo {
  width: 22.5rem;
  position: relative;
  z-index: 2;
}

.header__nav-links {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4rem;
  padding: 7rem 0;
}

.header__nav-links li a {
  color: white;
}

.header__nav-close {
  position: relative;
  z-index: 2;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  border: 0.1rem solid white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  cursor: pointer;
  gap: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* 防止按鈕被壓縮變形 */
  min-width: 9rem;
  /* 確保最小寬度 */
  min-height: 9rem;
  /* 確保最小高度 */
  /* 在極小螢幕上稍微縮小按鈕 */
}

@media screen and (max-width: 320px) {
  .header__nav-close {
    width: 7rem;
    height: 7rem;
    min-width: 7rem;
    min-height: 7rem;
    gap: 0.8rem;
  }
}

.header__nav-close path {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.header__nav-close:hover {
  background-color: white;
  color: var(--primary-orange-1);
}

.header__nav-close:hover path {
  stroke: var(--primary-orange-1);
}

/* hero */
.dragonball_inner-hero {
  position: relative;
  width: 100%;
  max-width: 44.5rem;
  margin: 0 auto;
}

.dragonball_inner-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 115rem;
  z-index: 2;
  background: -webkit-gradient(linear, left top, left bottom, from(#FF7F00), color-stop(67%, #FF7F00), color-stop(81%, rgba(255, 127, 0, 0.3)), to(rgba(255, 127, 0, 0)));
  background: linear-gradient(to bottom, #FF7F00 0%, #FF7F00 67%, rgba(255, 127, 0, 0.3) 81%, rgba(255, 127, 0, 0) 100%);
}

.dragonball_inner-hero .hero-img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 3;
}

.dragonball_inner-hero .light,
.dragonball_inner-hero .character {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.dragonball_inner-hero .character {
  z-index: 4;
}

.dragonball_inner-hero .light {
  z-index: 5;
  -webkit-animation: lightInfi 8s infinite;
          animation: lightInfi 8s infinite;
}

.dragonball_inner-hero .ball-1,
.dragonball_inner-hero .ball-2,
.dragonball_inner-hero .ball-3 {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  z-index: 4;
}

.dragonball_inner-hero .ball-1 img,
.dragonball_inner-hero .ball-2 img,
.dragonball_inner-hero .ball-3 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dragonball_inner-hero .ball-1 {
  top: 50rem;
  left: 5rem;
  -webkit-animation: updownInfi 10s infinite;
          animation: updownInfi 10s infinite;
}

.dragonball_inner-hero .ball-2 {
  top: 11rem;
  right: 2.8rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 4;
}

.dragonball_inner-hero .ball-3 {
  top: 23rem;
  left: 3rem;
  -webkit-animation: updownInfi 6s infinite;
          animation: updownInfi 6s infinite;
  z-index: 4;
}

.dragonball_inner-hero .kame-1,
.dragonball_inner-hero .kame-2 {
  position: absolute;
  top: 63.5rem;
  /* 改用 top 定位 */
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 3;
  /* Marquee 容器樣式 */
}

.dragonball_inner-hero .kame-1 img,
.dragonball_inner-hero .kame-2 img {
  display: block;
  height: auto;
}

.dragonball_inner-hero .kame-1 .kame-1-marquee-container,
.dragonball_inner-hero .kame-1 .kame-2-marquee-container,
.dragonball_inner-hero .kame-2 .kame-1-marquee-container,
.dragonball_inner-hero .kame-2 .kame-2-marquee-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  gap: 0;
  /* 確保圖片間沒有間隙 */
}

.dragonball_inner-hero .kame-1 .kame-1-marquee-container img,
.dragonball_inner-hero .kame-1 .kame-2-marquee-container img,
.dragonball_inner-hero .kame-2 .kame-1-marquee-container img,
.dragonball_inner-hero .kame-2 .kame-2-marquee-container img {
  display: block;
  height: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* 防止圖片被壓縮 */
}

.dragonball_inner-hero .kame-1 {
  z-index: 3;
}

.dragonball_inner-hero .kame-2 {
  z-index: 6;
  /* 不同於 kame-1 的 z-index */
}

/* about */
.dragonball_inner-about {
  position: relative;
  margin-top: -14rem;
  padding-top: 21rem;
  width: 100%;
  /* max-width: 44.5rem;
      margin-left: auto;
      margin-right: auto; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6rem;
  /* 大螢幕的固定 gap */
  z-index: 3;
  /* 增加 z-index 讓 sticker 在 dragonball_inner-hero::after 之上 */
  overflow: hidden;
  /* 圖樣 */
  /* 大螢幕下的固定尺寸設置 */
}

.dragonball_inner-about .bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.dragonball_inner-about .lightning {
  position: absolute;
  top: 43rem;
  left: 5.6rem;
  width: 1.9rem;
  -webkit-animation: updownInfi 4s infinite;
          animation: updownInfi 4s infinite;
}

.dragonball_inner-about .square-one {
  position: absolute;
  top: 66rem;
  right: -1.5rem;
  width: 5.75rem;
  -webkit-animation: updownInfi 6s infinite;
          animation: updownInfi 6s infinite;
}

.dragonball_inner-about .square-two {
  position: absolute;
  bottom: .8rem;
  left: -0.6rem;
  width: 5.75rem;
  -webkit-animation: updownInfi 5s infinite;
          animation: updownInfi 5s infinite;
}

.dragonball_inner-about .sticker {
  width: 24.5rem;
  height: 24.5rem;
  position: relative;
}

.dragonball_inner-about .sticker figure {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.dragonball_inner-about .sticker .sticker-text {
  -webkit-animation: spinningcircle 15s infinite both linear;
          animation: spinningcircle 15s infinite both linear;
}

.dragonball_inner-about .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}

.dragonball_inner-about .title h3 {
  color: var(--primary-orange-1);
}

.dragonball_inner-about .title figure {
  width: 1.9rem;
  margin-top: 1.6rem;
  margin-bottom: 1.2rem;
}

.dragonball_inner-about p {
  text-align: center;
  z-index: 2;
  color: var(--primary-orange-1);
  white-space: pre-line;
}

.dragonball_inner-about .roll_down {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  margin-top: -2rem;
}

/* Drinks */
.dragonball_inner-drinks {
  position: relative;
  z-index: 2;
  background-color: var(--grey-1);
}

.dragonball_inner-drinks .drinks-square-one {
  position: absolute;
  top: 10rem;
  left: 9.5rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 6s infinite;
          animation: updownInfi 6s infinite;
}

@media (max-width: 445px) {
  .dragonball_inner-drinks .drinks-square-one {
    top: 22vw;
    left: 21vw;
    width: 11.7vw;
  }
}

.dragonball_inner-drinks .drinks-square-two {
  position: absolute;
  top: -6rem;
  right: 3rem;
  width: 3rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
}

@media (max-width: 445px) {
  .dragonball_inner-drinks .drinks-square-two {
    top: -13.48vw;
    right: 6.74vw;
    /* 660px ÷ 445px × 100 = 148.31vw */
    width: 6.7vw;
  }
}

.dragonball_inner-drinks .drinks-square-three {
  position: absolute;
  bottom: -10rem;
  right: 6rem;
  width: 3rem;
  -webkit-animation: updownInfi 6s infinite;
          animation: updownInfi 6s infinite;
}

@media (max-width: 445px) {
  .dragonball_inner-drinks .drinks-square-three {
    bottom: -22.47vw;
    right: 13.48vw;
    width: 6.7vw;
  }
}

.dragonball_inner-drinks .drinks-square-four {
  position: absolute;
  bottom: 1.9rem;
  left: 5rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
}

@media (max-width: 445px) {
  .dragonball_inner-drinks .drinks-square-four {
    left: 11.24vw;
    width: 11.7vw;
  }
}

.dragonball_inner-drinks .drinks-lightning-one {
  position: absolute;
  top: 0;
  left: 4rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 6s infinite;
          animation: updownInfi 6s infinite;
}

@media (max-width: 445px) {
  .dragonball_inner-drinks .drinks-lightning-one {
    left: 9vw;
    width: 11.7vw;
  }
}

.dragonball_inner-drinks .drinks-lightning-two {
  position: absolute;
  top: 30rem;
  right: 7.8rem;
  width: 3rem;
  -webkit-animation: updownInfi 6s infinite;
          animation: updownInfi 6s infinite;
}

@media (max-width: 445px) {
  .dragonball_inner-drinks .drinks-lightning-two {
    top: 67.4vw;
    right: 17.5vw;
    width: 6.7vw;
  }
}

.dragonball_inner-drinks__bgtop {
  position: absolute;
  top: -7rem;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.dragonball_inner-drinks__bgtop > img {
  width: 100%;
}

.dragonball_inner-drinks__marquee {
  width: 100%;
  position: relative;
  padding: 10rem 0 6rem;
  overflow: hidden;
  height: 30rem;
  z-index: 1;
  margin-bottom: 7.5rem;
}

.dragonball_inner-drinks__marquee > p {
  font-size: 0.8rem;
  color: #fff;
  padding-left: 1.6rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

.dragonball_inner-drinks__marquee-inner {
  height: 20rem;
  width: 200%;
  position: absolute;
  display: inline-block;
  white-space: nowrap;
}

.dragonball_inner-drinks__marquee-inner > figure {
  overflow: hidden;
  padding: 3rem 0 4rem;
  -webkit-animation: marquee 10s linear infinite;
          animation: marquee 10s linear infinite;
  width: 53.7rem;
  display: inline-block;
}

.dragonball_inner-drinks__marquee-inner > figure img {
  max-width: none;
  width: auto;
  height: 11rem;
  -webkit-filter: drop-shadow(0.7rem 0.7rem 1rem rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0.7rem 0.7rem 1rem rgba(0, 0, 0, 0.3));
}

.dragonball_inner-drinks__title {
  color: #fff;
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.dragonball_inner-drinks__title h2 {
  color: #fff;
}

.dragonball_inner-drinks__title > span {
  color: #fff;
  margin-bottom: 4.3rem;
}

.dragonball_inner-drinks__title > p {
  line-height: 3.6rem;
  padding: 0 1.6rem;
}

.dragonball_inner-drinks__slider {
  position: relative;
}

.dragonball_inner-drinks__slider-marquee {
  overflow: hidden;
  position: absolute;
  height: 10rem;
  color: #FF7F00;
  top: 13rem;
  width: 100%;
  z-index: 1;
}

.dragonball_inner-drinks__slider-marquee-inner {
  width: 200%;
  position: absolute;
}

.dragonball_inner-drinks__slider-marquee-inner p {
  font-size: 3rem;
  white-space: nowrap;
  float: left;
  width: 50%;
  overflow: hidden;
  -webkit-animation: marquee 10s linear infinite;
          animation: marquee 10s linear infinite;
}

.dragonball_inner-drinks__slider-item {
  position: relative;
  padding-top: 25rem;
}

.dragonball_inner-drinks__slider-item > img {
  position: absolute;
  top: 0;
}

.dragonball_inner-drinks__slider-item-box {
  border-radius: 0.8rem;
  border: 0.3rem solid var(--primary-orange-ff-7-f-00, #FF7F00);
  background: var(--white-ffffff-90, rgba(255, 255, 255, 0.9));
  -webkit-box-shadow: 0.6rem 0.6rem 1.6rem 0rem rgba(0, 0, 0, 0.25);
          box-shadow: 0.6rem 0.6rem 1.6rem 0rem rgba(0, 0, 0, 0.25);
  padding: 15rem 3.6rem 3.6rem 3.6rem;
}

.dragonball_inner-drinks__slider-item-text {
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
}

.dragonball_inner-drinks__slider-item-text > h3 {
  color: #5E5E5E;
  font-size: 2.4rem;
}

.dragonball_inner-drinks__slider-item-text > p {
  color: #5E5E5E;
  line-height: 2rem;
  font-size: 1.2rem;
  /* 限制顯示 5 行，超過顯示省略號 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  line-clamp: 5;
  /* 標準屬性 */
}

.dragonball_inner-drinks__slider-item-text-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FF7F00;
  border-bottom: 0.1rem solid #FF7F00;
  padding-bottom: 0.4rem;
}

.dragonball_inner-drinks__slider-item-text-tag > span {
  font-size: 1.4rem;
  font-weight: 700;
}

.dragonball_inner-drinks__slider-item-text-tag > span.headline-medium {
  font-weight: 500;
}

.dragonball_inner-drinks__slider-item > span {
  font-size: 0.8rem;
  color: #fff;
  text-align: right;
  margin-top: 2.1rem;
}

.dragonball_inner-drinks__slider .swiper {
  padding-bottom: 1.9rem;
}

.dragonball_inner-drinks__btmbg {
  position: absolute;
  bottom: -40rem;
  left: 0;
  width: 100%;
  height: 107.3rem;
}

.dragonball_inner-drinks__btmbg > div {
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 127, 0, 0)), color-stop(60%, #FF7F00), to(rgba(255, 127, 0, 0)));
  background: linear-gradient(180deg, rgba(255, 127, 0, 0) 0%, #FF7F00 60%, rgba(255, 127, 0, 0) 100%);
}

/* collabproduct */
.collabproduct {
  background-color: var(--grey-1);
  padding-top: 15rem;
}

.collabproduct-square {
  position: absolute;
  top: 0;
  right: -3rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
}

@media (max-width: 445px) {
  .collabproduct-square {
    right: -6.74vw;
    width: 11.7vw;
  }
}

.collabproduct__title {
  color: #fff;
  text-align: center;
}

.collabproduct__title h2 {
  color: #fff;
  position: relative;
  z-index: 2;
}

.collabproduct__title > span {
  color: #fff;
  position: relative;
  z-index: 2;
}

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

.collabproduct__slider-char {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.collabproduct__slider-char > img {
  width: 33rem;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  -webkit-animation: fadeInUp .6s ease-in-out;
          animation: fadeInUp .6s ease-in-out;
}

.collabproduct__slider-char > img:nth-child(1) {
  top: 0;
  left: -1rem;
}

.collabproduct__slider-char > img:nth-child(2) {
  bottom: 2rem;
  right: 3.3rem;
}

.collabproduct__slider-char > img:nth-child(3) {
  top: 0;
  left: 2rem;
}

.collabproduct__slider-char > img:nth-child(4) {
  bottom: 1rem;
  right: 4.3rem;
}

.collabproduct__slider-char > img:nth-child(3), .collabproduct__slider-char > img:nth-child(4) {
  display: none;
}

.collabproduct__slider-char.after4 > img:nth-child(1), .collabproduct__slider-char.after4 > img:nth-child(2) {
  display: none;
}

.collabproduct__slider-char.after4 > img:nth-child(3), .collabproduct__slider-char.after4 > img:nth-child(4) {
  display: block;
}

.collabproduct__slider > .swiper {
  padding: 19rem 0 17rem;
}

.collabproduct__slider > .swiper > .swiper-wrapper {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 61rem;
}

.collabproduct__slider-item {
  position: relative;
  border-radius: 0.8rem;
  border: 0.2rem solid var(--primary-orange-ff-7-f-00, #FF7F00);
  background: var(--white-ffffff-90, rgba(255, 255, 255, 0.9));
  -webkit-box-shadow: 0.6rem 0.6rem 1.6rem 0rem rgba(0, 0, 0, 0.25);
          box-shadow: 0.6rem 0.6rem 1.6rem 0rem rgba(0, 0, 0, 0.25);
}

.collabproduct__slider-item-insideslide {
  /* 左右箭頭樣式 */
}

.collabproduct__slider-item-insideslide > figure {
  width: 100%;
}

.collabproduct__slider-item-insideslide .insideslide__arrowr {
  position: absolute;
  top: calc(50% - 4rem);
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.collabproduct__slider-item-insideslide .insideslide__arrowr-left, .collabproduct__slider-item-insideslide .insideslide__arrowr-right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (min-width: 446px) {
  .collabproduct__slider-item-insideslide .insideslide__arrowr-left:hover, .collabproduct__slider-item-insideslide .insideslide__arrowr-right:hover {
    -webkit-transform: translateY(-50%) scale(1.1);
            transform: translateY(-50%) scale(1.1);
  }
}

.collabproduct__slider-item-insideslide .insideslide__arrowr-left svg, .collabproduct__slider-item-insideslide .insideslide__arrowr-right svg {
  width: .7rem;
  height: 1.4rem;
}

.collabproduct__slider-item-insideslide .insideslide__arrowr-left {
  left: 1rem;
}

.collabproduct__slider-item-insideslide .insideslide__arrowr-right {
  right: 1rem;
}

.collabproduct__slider-item-insideslide .swiper-horizontal > .swiper-pagination-bullets, .collabproduct__slider-item-insideslide .swiper-pagination-bullets.swiper-pagination-horizontal, .collabproduct__slider-item-insideslide .swiper-pagination-custom, .collabproduct__slider-item-insideslide .swiper-pagination-fraction {
  top: 63%;
  bottom: initial;
}

.collabproduct__slider-item-insideslide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .collabproduct__slider-item-insideslide .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet, .collabproduct__slider-item-insideslide .swiper-pagination-custom .swiper-pagination-bullet, .collabproduct__slider-item-insideslide .swiper-pagination-fraction .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.5);
}

.collabproduct__slider-item-insideslide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active, .collabproduct__slider-item-insideslide .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active, .collabproduct__slider-item-insideslide .swiper-pagination-custom .swiper-pagination-bullet-active, .collabproduct__slider-item-insideslide .swiper-pagination-fraction .swiper-pagination-bullet-active {
  background-color: #FFFFFF;
}

.collabproduct__slider-item-insideslide .swiper-thumbs {
  padding: 1rem;
}

.collabproduct__slider-item-insideslide .swiper-thumbs .swiper-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.collabproduct__slider-item-insideslide .swiper-thumbs .swiper-slide {
  width: 6rem;
  height: 6rem;
  border-radius: 0.4rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.collabproduct__slider-item-insideslide .swiper-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.collabproduct__slider-item-insideslide .swiper-thumbs .swiper-slide-active {
  opacity: 1;
  border: 0.1rem solid #FF7F00;
}

.collabproduct__slider-item-text {
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem 1.6rem 3rem 1.6rem;
}

.collabproduct__slider-item-text > h3 {
  color: #5E5E5E;
  font-size: 2.4rem;
}

.collabproduct__slider-item-text > p {
  color: #5E5E5E;
  line-height: 2rem;
  font-size: 1.2rem;
}

.collabproduct__slider-item-text > a {
  color: #FF7F00;
  font-size: 1.2rem;
  font-weight: bolder;
}

.collabproduct__slider-item-text-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FF7F00;
  border-bottom: 0.1rem solid #FF7F00;
  font-size: 1.2rem;
  padding-bottom: 0.4rem;
  font-weight: bolder;
}

.collabproduct__slider-item-text-tag > span {
  font-size: 1.4rem;
  font-weight: 700;
}

.collabproduct__slider-item-text-tag > span.headline-medium {
  font-weight: 500;
}

.collabproduct__slider-item-chartop, .collabproduct__slider-item-charbtm {
  position: absolute;
  z-index: 1;
}

.collabproduct__slider-item-chartop {
  top: -18rem;
  left: -5.8rem;
  z-index: 2;
}

.collabproduct__slider-item-chartop.one {
  top: -19.5rem;
}

.collabproduct__slider-item-charbtm {
  bottom: -15rem;
  right: -2rem;
}

.collabproduct__slider [aria-label="4 / 4"] .collabproduct__slider-item-chartop {
  left: -3.2rem;
}

.collabproduct__slider [aria-label="4 / 4"] .collabproduct__slider-item-charbtm {
  bottom: -14.6rem;
  right: -1.5rem;
}

.collabproduct__slider [aria-label="4 / 4"] .collabproduct__slider-item-charbtm.two {
  bottom: -17rem;
}

.others {
  margin-top: -15rem;
  position: relative;
  background-color: var(--grey-1);
  padding: 27rem 0 10rem;
}

.others::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(10%, rgba(200, 200, 200, 0.9)), color-stop(70%, rgba(140, 140, 140, 0.7)), to(rgba(120, 120, 120, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.9) 10%, rgba(140, 140, 140, 0.7) 70%, rgba(120, 120, 120, 0) 100%);
}

.others-lightning {
  position: absolute;
  top: 28rem;
  right: 6rem;
  width: 3rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 5;
}

@media (max-width: 445px) {
  .others-lightning {
    top: 62.92vw;
    right: 13.48vw;
    width: 6.7vw;
  }
}

.others-square {
  position: absolute;
  bottom: 12rem;
  right: 3rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 1;
}

@media (max-width: 445px) {
  .others-square {
    bottom: 26.97vw;
    right: 6.74vw;
    width: 11.7vw;
  }
}

.others__title {
  color: #fff;
  text-align: center;
  padding-bottom: 4rem;
}

.others__title > span {
  position: relative;
  z-index: 2;
}

.others__title > h2 {
  color: #fff;
  position: relative;
  z-index: 2;
}

.others__slider-item > span {
  padding-bottom: 1.6rem;
}

.others__slider-item-box {
  width: 100%;
  aspect-ratio: 280 / 640;
  max-width: 32rem;
  height: auto;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  border: 0.2rem solid black;
}

.others__slider-item-box-text {
  position: absolute;
  left: 3.5rem;
  bottom: 3.5rem;
  color: white;
}

.others__slider-item-box-text > h3 {
  color: white;
}

.others__slider-item-box > img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

.others__slider-pagination {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.others__slider .swiper-pagination-bullet {
  background-color: #7D7D7E;
}

.others__slider .swiper-pagination-bullet-active {
  background-color: #FFFFFF;
}

.media {
  margin-bottom: -10rem;
  padding: 10rem 0 20rem;
  background-color: var(--grey-1);
  position: relative;
}

.media > .bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.media-lightning {
  position: absolute;
  top: 28rem;
  left: 6rem;
  width: 3rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 5;
}

@media (max-width: 445px) {
  .media-lightning {
    top: 62.92vw;
    left: 13.48vw;
    width: 6.7vw;
  }
}

.media-square {
  position: absolute;
  bottom: 12rem;
  right: 6rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 5;
}

@media (max-width: 445px) {
  .media-square {
    bottom: 26.97vw;
    right: 13.48vw;
    width: 11.7vw;
  }
}

.media__title {
  color: var(--primary-orange-1);
  text-align: center;
  padding-bottom: 4rem;
}

.media__title > span {
  position: relative;
  z-index: 2;
}

.media__title > h2 {
  color: var(--primary-orange-1);
  position: relative;
  z-index: 2;
}

.media-marquee {
  position: relative;
  overflow: hidden;
  height: 10rem;
  color: var(--primary-orange-1);
  width: 100%;
  z-index: 5;
  margin-top: 10rem;
  border-top: 0.1rem solid var(--primary-orange-1);
  border-bottom: 0.1rem solid var(--primary-orange-1);
}

.media-marquee-inner {
  width: 200%;
  position: absolute;
}

.media-marquee-inner p {
  white-space: nowrap;
  float: left;
  width: 50%;
  overflow: hidden;
  -webkit-animation: marquee 10s linear infinite;
          animation: marquee 10s linear infinite;
}

.media__comingsoon > p {
  color: var(--primary-orange-1);
  text-align: center;
  padding-top: 2rem;
  position: relative;
  z-index: 5;
}

.media__slider {
  padding-top: 2rem;
}

.media__slider-item > span {
  padding-bottom: 1.6rem;
}

.media__slider-item-box {
  width: 100%;
  aspect-ratio: 370 / 230;
  max-width: 32rem;
  height: auto;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  border: 0.2rem solid black;
}

.media__slider-item-box-text {
  position: absolute;
  left: 3.5rem;
  bottom: 3.5rem;
  color: white;
  z-index: 2;
}

.media__slider-item-box-text > h3 {
  color: white;
}

.media__slider-item-box > img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

.media__slider-item-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: .3;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 127, 0, 0)), to(#ff7f00));
  background: linear-gradient(to bottom, rgba(255, 127, 0, 0) 0%, #ff7f00 100%);
}

.media__slider-pagination {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.media__slider .swiper-pagination-bullet {
  background-color: #7D7D7E;
}

.media__slider .swiper-pagination-bullet-active {
  background-color: #FFFFFF;
}

/* footer */
.dragonball_inner-footer {
  position: relative;
  padding: 52rem 0 8rem;
  background-color: var(--grey-1);
  overflow: hidden;
}

@media (max-width: 445px) {
  .dragonball_inner-footer {
    padding: 46rem 0 8rem;
  }
}

.dragonball_inner-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(40%, #FF7F00), color-stop(60%, rgba(255, 127, 0, 0.5)), color-stop(80%, rgba(255, 127, 0, 0)));
  background: linear-gradient(to top, #FF7F00 40%, rgba(255, 127, 0, 0.5) 60%, rgba(255, 127, 0, 0) 80%);
}

.dragonball_inner-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, #ffc384), to(rgba(255, 195, 132, 0)));
  background: linear-gradient(to top, #ffc384 80%, rgba(255, 195, 132, 0) 100%);
}

.dragonball_inner-footer-lightning {
  position: absolute;
  bottom: 28rem;
  left: 6rem;
  width: 3rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 5;
}

@media (max-width: 445px) {
  .dragonball_inner-footer-lightning {
    bottom: 62.92vw;
    left: 13.48vw;
    width: 6.7vw;
  }
}

.dragonball_inner-footer-square {
  position: absolute;
  bottom: 70rem;
  right: -3rem;
  width: 5.2rem;
  -webkit-animation: updownInfi 8s infinite;
          animation: updownInfi 8s infinite;
  z-index: 5;
}

@media (max-width: 445px) {
  .dragonball_inner-footer-square {
    bottom: 157.3vw;
    right: -6.74vw;
    width: 11.7vw;
  }
}

.dragonball_inner-footer .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  opacity: .3;
}

.dragonball_inner-footer > .list {
  position: relative;
  z-index: 3;
  padding-left: 7.5rem;
  padding-right: 7.5rem;
  padding-bottom: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.4rem;
}

.dragonball_inner-footer > .list:nth-child(2) {
  gap: 8rem;
}

.dragonball_inner-footer > .list:nth-child(2) > figure {
  width: 19rem;
}

.dragonball_inner-footer > .list:nth-child(2) > ul::before {
  content: "";
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
  display: block;
}

.dragonball_inner-footer > .list:nth-child(n+2) > .logo {
  border-top: 0.1rem solid white;
  border-bottom: 0.1rem solid white;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.dragonball_inner-footer > .list > ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
  width: 100%;
  grid-auto-flow: dense;
}

.dragonball_inner-footer > .list > ul > li {
  width: 100%;
  margin-bottom: 0.5rem;
}

.dragonball_inner-footer > .list > ul > li:nth-child(1), .dragonball_inner-footer > .list > ul > li:nth-child(2), .dragonball_inner-footer > .list > ul > li:nth-child(3) {
  -ms-grid-column: 1;
  grid-column: 1;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.dragonball_inner-footer > .list > ul > li:nth-child(1) img, .dragonball_inner-footer > .list > ul > li:nth-child(2) img, .dragonball_inner-footer > .list > ul > li:nth-child(3) img {
  float: left;
  margin-right: auto;
  margin-left: 0;
}

.dragonball_inner-footer > .list > ul > li:nth-child(n+4) {
  -ms-grid-column: 2;
  grid-column: 2;
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.dragonball_inner-footer > .list > ul > li:nth-child(n+4) img {
  float: right;
  margin-left: auto;
  margin-right: 0;
}

.dragonball_inner-footer > .list > ul > li img {
  width: 2.2rem;
  height: 2.2rem;
}

.dragonball_inner-footer > .list > ul > li > a {
  color: #fff;
}

.dragonball_inner-footer > .list > ul::after {
  content: "";
  display: block;
  clear: both;
}

.dragonball_inner-footer-marquee {
  position: relative;
  overflow: hidden;
  height: 10rem;
  color: #fff;
  width: 100%;
  z-index: 5;
  margin-top: 10rem;
  border-top: 0.1rem solid white;
  border-bottom: 0.1rem solid white;
}

.dragonball_inner-footer-marquee-inner {
  width: 200%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.dragonball_inner-footer-marquee-inner p {
  white-space: nowrap;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  padding-right: 2rem;
  overflow: hidden;
  -webkit-animation: marquee 15s linear infinite;
          animation: marquee 15s linear infinite;
}

.dragonball_inner-footer-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dragonball_inner-footer-bottom .top {
  margin-top: 7rem;
  margin-bottom: 7rem;
  position: relative;
  z-index: 2;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  border: 0.1rem solid white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6rem;
  color: white;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.dragonball_inner-footer-bottom .top path {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.dragonball_inner-footer-bottom .top:hover {
  background-color: white;
  color: var(--primary-orange-1);
}

.dragonball_inner-footer-bottom .top:hover path {
  stroke: var(--primary-orange-1);
}

.dragonball_inner-footer-bottom .copyright {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.dragonball_footer {
  position: relative;
  z-index: 3;
  background: #AAAAAA;
  padding: 15rem 0 13rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4.6rem;
}

.dragonball_footer-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 13rem;
}

.dragonball_footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4.6rem;
}

.dragonball_footer-nav > figure {
  width: 16rem;
  height: 7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dragonball_footer-nav ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -webkit-column-gap: 6rem;
          column-gap: 6rem;
  width: 100%;
}

.dragonball_footer-nav ul li {
  width: 100%;
  margin-bottom: 1.5rem;
}

.dragonball_footer-nav ul li:nth-child(1), .dragonball_footer-nav ul li:nth-child(2), .dragonball_footer-nav ul li:nth-child(3) {
  -ms-grid-column: 1;
  grid-column: 1;
  text-align: left;
}

.dragonball_footer-nav ul li:nth-child(4) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
  /* 與第一個項目(線上點餐)對齊 */
  text-align: right;
}

.dragonball_footer-nav ul li:nth-child(5) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  /* 與第二個項目(加入會員)對齊 */
  text-align: right;
}

.dragonball_footer-nav ul li:nth-child(n+6) {
  -ms-grid-column: 2;
  grid-column: 2;
  text-align: right;
}

.dragonball_footer-nav ul li a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.dragonball_footer-nav ul li a:hover {
  opacity: .8;
}

.dragonball_footer p {
  width: 100%;
  color: #fff;
  border-top: 1px solid #fff;
  padding-top: 4.6rem;
  margin-top: 4.6rem;
}

@media screen and (max-width: 444px) {
  .dragonball_footer {
    display: none;
  }
}

/* 響應式調整 */
@media screen and (min-width: 445px) {
  .dragonball_inner-hero .kame-1 img,
  .dragonball_inner-hero .kame-2 img {
    width: 41rem;
  }
}

@media screen and (max-width: 444px) {
  /* 小屏幕下的響應式調整 */
  .dragonball_inner-hero {
    width: 100%;
  }
  .dragonball_inner-hero .ball-1 {
    top: 112.36vw;
    /* 50rem (500px) ÷ 445px × 100 = 112.36vw */
    left: 11.24vw;
    /* 5rem (50px) ÷ 445px × 100 = 11.24vw */
    width: 16.85vw;
    /* 75px ÷ 445px × 100 */
    height: 16.85vw;
  }
  .dragonball_inner-hero .ball-2 {
    top: 24.72vw;
    /* 11rem (110px) ÷ 445px × 100 = 24.72vw */
    right: 6.29vw;
    /* 2.8rem (28px) ÷ 445px × 100 = 6.29vw */
    width: 16.85vw;
    /* 75px ÷ 445px × 100 */
    height: 16.85vw;
  }
  .dragonball_inner-hero .ball-3 {
    top: 51.69vw;
    /* 23rem (230px) ÷ 445px × 100 = 51.69vw */
    left: 6.74vw;
    /* 3rem (30px) ÷ 445px × 100 = 6.74vw */
    width: 16.85vw;
    /* 75px ÷ 445px × 100 */
    height: 16.85vw;
  }
  .dragonball_inner-hero .kame-1,
  .dragonball_inner-hero .kame-2 {
    top: 142.7vw;
    /* 63.5rem (635px) ÷ 445px × 100 = 142.7vw */
  }
  .dragonball_inner-hero .kame-1 img,
  .dragonball_inner-hero .kame-2 img {
    width: 92.13vw;
    /* 41rem (410px) ÷ 445px × 100 = 92.13vw */
  }
  .dragonball_inner-about {
    margin-top: -31.46vw;
    /* -140px ÷ 445px × 100% = -31.46vw */
    padding-top: 47.19vw;
    /* 210px ÷ 445px × 100 = 47.19vw */
    gap: 13.48vw;
    /* 60px ÷ 445px × 100 = 13.48vw */
  }
  /* 小螢幕下的響應式調整 */
  .dragonball_inner-about .sticker {
    width: 55.06vw;
    /* 245px ÷ 445px × 100 = 55.06vw */
    height: 55.06vw;
    /* 保持正方形 */
  }
  .dragonball_inner-hero::after {
    height: 258.43vw;
    /* 1150px ÷ 445px × 100 = 258.43vw */
  }
  .lightning {
    top: 96.63vw;
    /* 430px ÷ 445px × 100 = 96.63vw */
    left: 12.58vw;
    /* 56px ÷ 445px × 100 = 12.58vw */
    width: 4.27vw;
    /* 19px ÷ 445px × 100 = 4.27vw */
  }
  /* 小螢幕下的響應式調整 */
  .square-one {
    top: 148.31vw;
    /* 660px ÷ 445px × 100 = 148.31vw */
    right: -3.37vw;
    /* -15px ÷ 445px × 100 = -3.37vw */
    width: 12.92vw;
    /* 57.5px ÷ 445px × 100 = 12.92vw */
  }
  .square-two {
    left: -1.35vw;
    /* -6px ÷ 445px × 100 = -1.35vw */
    width: 12.92vw;
    /* 57.5px ÷ 445px × 100 = 12.92vw */
  }
}

/* 動畫 */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes updownInfi {
  0% {
    -webkit-transform: translate(-0.2rem, -0.6rem);
            transform: translate(-0.2rem, -0.6rem);
  }
  50% {
    -webkit-transform: translate(0.2rem, 0.6rem);
            transform: translate(0.2rem, 0.6rem);
  }
  100% {
    -webkit-transform: translate(-0.2rem, -0.6rem);
            transform: translate(-0.2rem, -0.6rem);
  }
}

@keyframes updownInfi {
  0% {
    -webkit-transform: translate(-0.2rem, -0.6rem);
            transform: translate(-0.2rem, -0.6rem);
  }
  50% {
    -webkit-transform: translate(0.2rem, 0.6rem);
            transform: translate(0.2rem, 0.6rem);
  }
  100% {
    -webkit-transform: translate(-0.2rem, -0.6rem);
            transform: translate(-0.2rem, -0.6rem);
  }
}

@-webkit-keyframes updownInfiTwo {
  0% {
    -webkit-transform: translate(-0.6rem, -1rem);
            transform: translate(-0.6rem, -1rem);
  }
  50% {
    -webkit-transform: translate(0.6rem, 1rem);
            transform: translate(0.6rem, 1rem);
  }
  100% {
    -webkit-transform: translate(-0.6rem, -1rem);
            transform: translate(-0.6rem, -1rem);
  }
}

@keyframes updownInfiTwo {
  0% {
    -webkit-transform: translate(-0.6rem, -1rem);
            transform: translate(-0.6rem, -1rem);
  }
  50% {
    -webkit-transform: translate(0.6rem, 1rem);
            transform: translate(0.6rem, 1rem);
  }
  100% {
    -webkit-transform: translate(-0.6rem, -1rem);
            transform: translate(-0.6rem, -1rem);
  }
}

@-webkit-keyframes updownInfiThree {
  0% {
    -webkit-transform: translate(0.6rem, 1rem);
            transform: translate(0.6rem, 1rem);
  }
  50% {
    -webkit-transform: translate(-0.6rem, -1rem);
            transform: translate(-0.6rem, -1rem);
  }
  100% {
    -webkit-transform: translate(0.6rem, 1rem);
            transform: translate(0.6rem, 1rem);
  }
}

@keyframes updownInfiThree {
  0% {
    -webkit-transform: translate(0.6rem, 1rem);
            transform: translate(0.6rem, 1rem);
  }
  50% {
    -webkit-transform: translate(-0.6rem, -1rem);
            transform: translate(-0.6rem, -1rem);
  }
  100% {
    -webkit-transform: translate(0.6rem, 1rem);
            transform: translate(0.6rem, 1rem);
  }
}

@-webkit-keyframes lightInfi {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .8;
  }
  100% {
    opacity: 1;
  }
  /* 0%{
          opacity: 0.8;
      }
      40%{
          opacity: 0.9;
      }
      50%{
          opacity: 1;
      }
      60%{
          opacity: 0.6;
      }
      70%{
          opacity: 0.9;
      }
      100%{
          opacity: 0.8;
      } */
}

@keyframes lightInfi {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .8;
  }
  100% {
    opacity: 1;
  }
  /* 0%{
          opacity: 0.8;
      }
      40%{
          opacity: 0.9;
      }
      50%{
          opacity: 1;
      }
      60%{
          opacity: 0.6;
      }
      70%{
          opacity: 0.9;
      }
      100%{
          opacity: 0.8;
      } */
}

@-webkit-keyframes marqueeKame {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-65%);
            transform: translateX(-65%);
  }
}

@keyframes marqueeKame {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-65%);
            transform: translateX(-65%);
  }
}

@-webkit-keyframes spinningcircle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes spinningcircle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.is-inview {
  opacity: 0;
  z-index: 10;
  -webkit-transform: translateY(2rem);
          transform: translateY(2rem);
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease;
}

.is-inview.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
/*# sourceMappingURL=dragonball.css.map */