@charset "UTF-8";
/* 手機版：共用版面及 sec1～sec7 */
@media (max-width: 768px) {
  .header-title {
    width: 80%;
    bottom: 5%;
  }
  .header-bottom-fog img {
    width: 100%;
    top: 13px;
  }
  .header-video {
    display: none;
  }
  .wrap {
    width: 100%;
    min-width: 0;
  }
  .header {
    width: 100%;
    height: auto;
    aspect-ratio: 768/1117;
    background: url("../images/header-bg-m.jpg") no-repeat center;
    background-size: cover;
  }
  .header .inner {
    display: none;
  }
  .logo {
    display: block;
    width: 36%;
    max-width: 200px;
    height: auto;
    top: 0px;
    left: 0px;
  }
  .logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .promo-btn {
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: #140f20;
    animation: none;
    transform: none;
  }
  body {
    padding-bottom: calc(11.71875vw + env(safe-area-inset-bottom));
  }
  .social-btns {
    display: none;
  }
  .top-menu {
    display: none;
  }
  .inner {
    width: 100%;
  }
  .container {
    min-width: 0;
  }
  /* 固定圖層，手機不使用 background-attachment: fixed */
  .container-video-bg {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100lvh;
    background: url("../images/container-bg.jpg") no-repeat center top/cover;
  }
  .container-video {
    display: none;
  }
  .sec {
    width: 100%;
    margin-top: 0;
    height: auto;
    padding-top: 0;
    padding: 0;
  }
  .footer {
    height: auto;
  }
  .footer-inner {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .footer-left, .footer-right {
    display: block;
    height: auto;
  }
  .footer-left {
    margin-bottom: 20px;
    text-align: center;
  }
  .lager-logo, .class-level {
    margin: 0 auto 20px auto;
  }
  .footer-right {
    margin-top: 10px;
    margin-left: 0;
  }
  .class-level {
    margin: 20px auto 20px auto;
  }
  .hamburger {
    display: block;
    opacity: 1;
    right: 15px;
  }
  .tit-box img {
    max-width: 100%;
    height: auto;
  }
  .sec1 {
    padding-bottom: 40px;
  }
  .sec1-login-word {
    width: 100%;
  }
  .sec1-login-btn {
    width: 160px;
    height: 38px;
    font-size: 16px;
  }
  .sec1-gifts {
    -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: 24px;
    margin-top: 15px;
    padding: 0 5%;
  }
  .sec1-gift {
    width: 100%;
    max-width: 555px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .sec1-gift-actions {
    width: 47.39%;
    bottom: 7.04%;
  }
  .sec1-gift-blue .sec1-gift-decoration {
    width: 27.03%;
    left: -3.6%;
    bottom: 2.93%;
  }
  .sec1-gift-pink .sec1-gift-decoration {
    width: 35.68%;
    right: -10%;
    bottom: -10.07%;
  }
  .sec1-notice {
    width: 100%;
    margin-top: 30px;
    font-size: 13px;
    padding: 0 5%;
  }
  .sec1-notice-title {
    width: 55%;
    max-width: 348px;
    margin-left: 0;
    margin-bottom: -8px;
  }
  .sec2-word1 {
    width: 100%;
    height: auto;
  }
  .sec2-word1 img {
    width: 100%;
    height: auto;
  }
  .sec2-1 {
    width: 100%;
    margin-top: 24px;
    padding: 0 5%;
  }
  .sec2-subtitle img {
    width: 65%;
    max-width: 338px;
  }
  .sec2-1-panel {
    min-height: 0;
    padding: 0;
    background-image: url("../images/sec2-1-pic1-m.png");
    background-size: 100% auto;
    padding-top: 70.66%;
  }
  .sec2-1-content {
    padding: 20px;
    background: #234c7d;
    border: 1px solid #eed785;
    border-radius: 0 0 35px 0;
    font-size: 15px;
    margin-top: 10px;
  }
  .sec2-2 {
    width: 100%;
    margin-top: 35px;
    padding: 0 5%;
  }
  .sec2-map-frame {
    width: 100%;
    padding: 0;
    background: none;
  }
  .sec2-map-swiper {
    border-radius: 30px 0 30px 0;
    border: 1px solid #ffe889;
  }
  .sec2-map-prev,
  .sec2-map-next {
    display: none;
  }
  .sec2-3 {
    width: 100%;
    margin-top: 35px;
  }
  .sec2-npc-prev,
  .sec2-npc-next {
    display: none;
  }
  /* 手機 NPC：人物在上、介紹框疊在下方 */
  .sec2-npc-stage {
    aspect-ratio: 505/1000;
  }
  .sec2-npc-swiper {
    top: 0;
  }
  .sec2-npc-character {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 60%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center top;
       object-position: center top;
    z-index: 1;
  }
  .sec2-npc-character[src="images/sec2-3-pic3.png"] {
    top: -7%;
    left: 3%;
  }
  .sec2-npc-character[src="images/sec2-3-pic2.png"] {
    top: -2%;
  }
  .sec2-npc-intro {
    top: 36%;
    left: 5%;
    right: auto;
    width: 90%;
    z-index: 2;
  }
  .sec2-npc-tabs {
    left: 15%;
    right: auto;
    bottom: 9%;
    width: 70%;
  }
  .sec2-npc-prev,
  .sec2-npc-next {
    display: none;
  }
  .sec3 .tit-box img {
    max-width: 100%;
    height: auto;
  }
  .content-frame {
    width: 90%;
  }
  .content-frame-middle {
    padding: 0 8.89%;
  }
  .sec3-content {
    font-size: 14px;
  }
  .sec3-subtitle {
    margin-bottom: 12px;
  }
  .sec3-gift {
    margin: 20px auto;
  }
  .sec4 {
    padding-top: 30px;
  }
  .sec4 .tit-box img {
    max-width: 100%;
    height: auto;
  }
  .sec4-content {
    font-size: 14px;
  }
  .sec4-content .content-frame-middle {
    padding: 0 8%;
  }
  .sec4-intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
  .sec4-game-pic {
    width: 100%;
    max-width: 448px;
  }
  .sec4-rules {
    margin-top: 20px;
  }
  .sec4-ghost {
    display: none;
  }
  .sec4-rules li {
    padding: 10px 20px;
    margin-bottom: 12px;
    background: #d7b893;
    border: 2px solid #9f7c53;
    border-radius: 20px;
  }
  .sec4-bat {
    display: none;
  }
  .sec4-rate-btn {
    width: 100%;
    max-width: 383px;
    margin: 0 auto;
  }
  .sec5 {
    padding-top: 30px;
  }
  .sec5 .tit-box img {
    max-width: 100%;
    height: auto;
  }
  /* 手機新幻獸：沿用 NPC 直式排列 */
  .sec5-pet-stage {
    width: 100%;
    aspect-ratio: 505/1000;
  }
  .sec5-pet-character {
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 54%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center top;
       object-position: center top;
    z-index: 1;
  }
  .sec5-pet-intro {
    top: 36%;
    left: 5%;
    width: 90%;
    z-index: 2;
  }
  .sec5-detail-btn {
    top: 65%;
    left: 28%;
    width: 44%;
  }
  .sec5-pet-tabs {
    top: 73%;
    left: 25%;
    width: 50%;
  }
  .sec5-pet-prev,
  .sec5-pet-next {
    display: none;
  }
  #sec6 {
    padding-bottom: 30px;
  }
  #sec6 .tit-box img {
    max-width: 100%;
    height: auto;
  }
  .sec6-content {
    font-size: 14px;
  }
  .sec6-content .content-frame-middle {
    padding: 10px 8%;
  }
  .sec6-activity,
  .sec6-activity-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
  .sec6-activity-pic {
    width: 100%;
    max-width: 452px;
  }
  .sec6-activity-word {
    width: 100%;
  }
  .sec6-activity + .sec6-activity {
    margin-top: 30px;
  }
  .sec7 .tit-box img {
    max-width: 100%;
    height: auto;
  }
  .sec7-stage {
    width: 100%;
    padding: 0 5%;
    margin-bottom: 30px;
  }
  .sec7-welcome {
    display: block;
  }
  .sec7-panel {
    width: 100%;
    min-height: 0;
    padding: 9% 8% 9%;
    font-size: 14px;
    background: #f7fbff;
    border-radius: 30px 0 30px 0;
    border: 3px solid #397be5;
  }
  .sec7-character-left {
    display: none;
  }
  .sec7-character-right {
    display: none;
  }
  .sec7-welcome {
    font-size: 16px;
  }
  .sec7-dates {
    font-size: 16px;
  }
  .sec7-code-label {
    width: 50px;
    font-size: 14px;
  }
  .sec7-code-value {
    font-size: 13px;
    padding: 6px;
  }
  .sec7-copy-btn {
    margin-right: 6px;
    padding: 4px 8px;
    font-size: 12px;
  }
  .sec7-code-row {
    min-height: 48px;
  }
  .sec7-gift {
    width: 80%;
    max-width: 383px;
    margin: 20px auto 0;
  }
}
/* 手機地圖輪播指示點 */
@media (max-width: 768px) {
  .sec2-map-pagination {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 8px;
    margin-top: -14px;
    z-index: 50;
  }
  .sec2-map-pagination .swiper-pagination-bullet {
    width: 60px;
    height: 7px;
    margin: 0;
    border-radius: 6px;
    background: #ffe58b;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: background 0.3s, -webkit-box-shadow 0.3s;
    transition: background 0.3s, -webkit-box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
  }
  .sec2-map-pagination .swiper-pagination-bullet-active {
    background: #5ca3e6;
    -webkit-box-shadow: 0 0 10px rgba(101, 92, 230, 0.7);
            box-shadow: 0 0 10px rgba(101, 92, 230, 0.7);
  }
}