/*-----------------------------------------------
    Import
-----------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/********************************基本********************************/
html { font-size: 62.5%; }
body{ background-color: #000000 ;font-family:'Noto Serif JP', sans-serif;font-size: 1.6rem;}
.bt {text-indent: -999px;overflow: hidden;cursor:pointer;scroll-behavior: smooth;}

.section{ position:relative; }
.inner{ position:relative; width:100%; height:100%; max-width: 1920px;  margin: 0 auto;}/*滿版*/
.content{ position:relative; height:100%;max-width:1920px; margin-inline:auto;}/*寬度容器*/
.is-center{ display:flex; justify-content:center; align-items:center; text-align:center; }/*置中*/
.is-split .left, .is-split .right{ flex:1; }


/********************************主外框********************************/
.section {text-align: center;overflow: hidden!important;}
.bg{position: absolute;background-position: center 0px; -moz-background-size: cover;background-size: cover;}
.top .bg      {background-image:url(../images/bg_00.jpg);top:0px;right: 0;width: 100%;height: 100%;margin:0;padding:0;	}
.update .bg   {background-image:url(../images/bg_01.jpg); bottom: 0;right: 0;width: 100%;height: 100%;margin:0;padding:0; }
.campaign .bg {background-image:url(../images/bg_01.jpg); bottom: 0;right: 0;width: 100%;height: 100%;margin:0;padding:0; }
.gallery .bg  {background-image:url(../images/bg_01.jpg); bottom: 0;right: 0;width: 100%;height: 100%;margin:0;padding:0; }
.movie .bg    {background-image:url(../images/bg_05.jpg); background-position-y: -6vh; bottom: 0;right: 0;width: 100%;height: 100%;margin:0;padding:0; }


/*footer頁腳*/
#footer{height:150px!important;background-color: #ffffff;}
.copyright{ }

/*----- fullPage  menu 樣式------ */
.bar-box{width: 180px;height:200px;position: fixed;z-index: 2000;top:2vw;right: 0px;}

#menu{width:auto;height:auto;}
#menu ul{width:150px; height:auto;margin:0;padding:0;list-style:none;}
#menu li{height:25px;cursor:pointer;
  background-color:rgba(0, 32, 70, 0.9);
  background-image: linear-gradient(90deg,rgba(212,175,55,0.95),rgba(170,135,40,0.9));
  background-repeat:no-repeat;background-size:0px 100%;background-position:left top;transition: background-size .4s ease, transform .3s ease;
}

#menu li a{height:30px;display:block;text-align:center;margin:8px 0;font:bold 12pt/25px 'Noto Serif JP', sans-serif;color:#d3d3d3;letter-spacing:1px;transition: color .3s ease;}
#menu li:hover{background-size:160px 100%; /* 從 0 → 160px */transform: translateX(12px);}
#menu li:hover a{color:#1b1b1b;}
#menu li.active,#menu li.active:hover{background-size:160px 100%;transform: translateX(12px);}
#menu li.active a{color:#1b1b1b;}

.menu01{width:100px;}
.menu02{width:120px;}
.menu03{width:120px;}
.menu04{width:120px;}
.menu05{width:100px;}

.menu-toggle{display:none;}

/********************************top主視覺內容********************************/
.top_7anlogo{ width: clamp(210px, 18vw,350px); aspect-ratio: 457 / 339;transform: translateY(-75vh);z-index:100;position: absolute;}
.top_7anlogo img{ width:100%; height:100%; object-fit:contain; display:block; }

.top_logo{ width: clamp(90px, 8vw,150px); aspect-ratio: 189 / 97;left: 5.5vw;top:2.5vw;;z-index:100;position: absolute; }
.top_logo img{ width:100%; height:100%; object-fit:contain; display:block; }

.social-link { width: clamp(60px, 10vw,150px); aspect-ratio: 115/ 36;z-index: 100;position: absolute; right:8vw;bottom:8vw;}
.social-link ul {display: flex;height:100%;}
.social-link ul li {flex: 1;margin: 2% 0;}
.social-link ul li a{display:block;width: 100% ; height: 100%; }
.social-link ul li:hover {transform: scale(1.1);transition: all .3s ease;}
.social-link ul li:nth-child(1) a {background: url(../images/top_sociallink.png) 0 0 /300% no-repeat; }
.social-link ul li:nth-child(2) a {background: url(../images/top_sociallink.png) 50% 0 /300% no-repeat; ;}
.social-link ul li:nth-child(3) a {background: url(../images/top_sociallink.png) 100% 0 /300% no-repeat;  }

.top_english{ width: clamp(320px, 50vw,642px); aspect-ratio: 642 / 96;right:-4vw;bottom:-6vw;;z-index:100;position: absolute; }
.top_english img{ width:100%; height:100%; object-fit:contain; display:block; }

/********************************************update內容********************************************/
/* 按鈕 */
.update-tabs{width: 90%;height: auto;position: absolute; left: 5%;transform: translateX(-50%);bottom: 4.5vw;z-index: 100; }
.update_btn {width: clamp(220px, 20vw,400px); aspect-ratio:404/ 99;; cursor: pointer;margin: 0 .2vw }
.update_btn p{font-family: 'Noto Serif JP', serif  ;font-size:3rem;color:#d6c3a0;position:relative;margin:-5% 0 0 40%;display: block; font-weight: bold; }
.update_btn span{letter-spacing:0.1vw;font-size: 1rem;color:#727272; position:relative;margin:-1% 0 0 55%;display: block;opacity:1; }
.update_btn01{background: url(../images/update_btn01.png) 0 0 /100% no-repeat; }
.update_btn02{background: url(../images/update_btn02.png) 0 0 /100% no-repeat; }
.update_btn03{background: url(../images/update_btn03.png) 0 0 /100% no-repeat; }

.update_btn{ transition: transform 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease; transform-origin: center;filter: brightness(0.8); }
.update_btn p, .update_btn span{ transition: transform 0.4s ease, color 0.4s ease, text-shadow 0.4s ease; }
.update_btn:hover{ transform: scale(1.03); filter: brightness(1.2); box-shadow: 0 10px 25px rgba(0,0,0,0.4); }
.update_btn:hover p{ transform: translateY(3px); color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.6); }
.update_btn:hover span{ transform: translateY(-3px); color: #ffffff;transform: scale(1.1);} 
.update_btn:active{ transform: scale(0.96); transition: transform 0.1s; }

/* 內容 */
.update-slider { overflow:hidden; width:100%;height: auto; position:relative;margin-top:-5vw ;}
.update-track{display:flex;transition: transform .38s ease;will-change: transform;}
.update_box{ flex: 0 0 100%; }
.update-slider{ overflow:hidden; }

.update_box {  width:100%; height:auto;aspect-ratio: 1920 / 900;  flex:0 0 100%; position:relative;}
.update_char{  width:100%; height:100%;position:absolute; background-size: contain; background-position: center; background-repeat: no-repeat; }
.char01{background-image: url(../images/update_01char.png);}
.char02{background-image: url(../images/update_02char.png);}
.char03{background-image: url(../images/update_03char.png);}

.char_title{width: clamp(150px, 20vw,329px); aspect-ratio:329/ 189;position:absolute; top:5vw;left: 10vw;} 
.title01{background: url(../images/update_01title.png) center no-repeat; background-size: contain; }
.title02{background: url(../images/update_02title.png) center no-repeat; background-size: contain; }
.title03{background: url(../images/update_03title.png) center no-repeat; background-size: contain; }

.char_content{width: clamp(200px, 29vw,504px); aspect-ratio:504/ 452;position:absolute; top:15vw;right: 8vw;}
.content01{background: url(../images/update_01content.png) center no-repeat; background-size: contain;}
.content02{background: url(../images/update_02content.png) center no-repeat; background-size: contain;margin-right: -2vw;}
.content03{background: url(../images/update_03content.png) center no-repeat; background-size: contain;margin-right: -2vw;}

.char_name01{width: clamp(50px, 10vw,174px); aspect-ratio:174/ 25;position:absolute; top:30vw;right: 39vw;
  background: url(../images/update_01name.png) center no-repeat; background-size: contain;}

.char_fly01{width:8vw; height: 10vw;;position:absolute; top:15vw;left:20vw;background: url(../images/update_01fly.png) center no-repeat; background-size: contain; } 
.char_fly02{width:8vw; height: 10vw;;position:absolute; top:15vw;left:52vw;background: url(../images/update_02fly.png) center no-repeat; background-size: contain; } 
.char_fly03{width:15vw; height: 20vw;;position:absolute; top:26vw;left:47vw;background: url(../images/update_03fly.png) center no-repeat; background-size: contain; } 

.section.update .update-track{ display:flex; transition: transform .4s ease; touch-action: pan-y; /* 允許上下捲動，水平交給 JS */ }
.section.update .update_box{ min-width:100%; }
.section.update img{ -webkit-user-drag: none; user-select: none; }


/* active 樣式（給按鈕/狀態用） */
.update_btn.is-active {  transform: scale(0.96); transition: transform 0.1s;filter: brightness(1.2); box-shadow: 0 10px 25px rgba(0,0,0,0.4); }
.update_btn.is-active p { transform: translateY(3px); color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.6); }
.update_btn.is-active span { transform: translateY(-3px); color: #ffffff;transform: scale(1.1);} 
/* 箭頭 */
.update_nav { width: 70px; height: 108px; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); 
              background-image: url(../images/update_next.png) ;z-index: 200; transition: all 0.3s ease; }
.update_pre { left: 2vw; background-position: 0 0; }
.update_next { right: 2vw; background-position: -68px 0; }
.update_pre:hover { transform: translateY(-50%) translateX(-8px) scale(1.01); }
.update_next:hover { transform: translateY(-50%) translateX(8px) scale(1.01); }


/***************************************************campaign內容***************************************************/
.camp_content{ width:100%;height: auto; position:relative;}

.camp_title{width: clamp(250px, 22vw,450px);aspect-ratio:521/ 111; background: url(../images/camp_title.png) no-repeat ;background-size: contain;
position: absolute; left: 30%;transform: translateX(-50%);top:-4% ;z-index: 200;}
.camp_7anlogo{ width: clamp(100px, 11vw,220px); aspect-ratio: 457 / 339;background: url(../images/top_7anlogo.png) no-repeat ;background-size: contain
;position: absolute; ;left:18%;transform: translateX(-50%);top:-8%;;z-index: 200;}

.campbg_circle01{background: url(../images/camp_bg01.png)left 0 /cover no-repeat; position: absolute;left: 1vw;top: 1vw; 
  width: clamp(300px, 30vw,600px); aspect-ratio: 600 / 690;}
  .campbg_circle02{background: url(../images/camp_bg01.png)right 0 /cover no-repeat; position: absolute;right: 1vw;bottom: 1vw; 
  width: clamp(300px, 30vw,600px); aspect-ratio: 600 / 690;}

.camp_btnbox {width: clamp(700px, 75vw,1476px); aspect-ratio:1476/ 755;margin: 0 auto;; background: url(../images/camp_bg00.png) no-repeat ;background-size: contain;z-index: 100;}
.camp_btnbox ul { padding: 0; margin: 0;display: flex; justify-content: center; gap: 1vw; }
.camp_btnbox li{margin-top: 6vw;margin-left: .5vw; z-index: 200;position: relative; width: clamp(200px, 20vw,411px);aspect-ratio:411/538;   }
.camp_btn01,.camp_btn02,.camp_btn03{cursor: pointer; position:absolute;inset:0; width: 100%;height: 100%;}

.is-disabled{ pointer-events:none !important; cursor: default !important; }

.camp_btn01::after{content:"";background: url(../images/camp_01frame.png) center/cover no-repeat;  width: 100%;height: 100%;position: absolute;left:0;}
.camp_btn01{background: url(../images/camp_01img.png) center/cover no-repeat;}
.camp_btn02::after{content:"";background: url(../images/camp_02frame.png) center/cover no-repeat;  width: 100%;height: 100%;position: absolute;left:0;}
.camp_btn02 {background: url(../images/camp_02img.png) center/cover no-repeat;  ;}
.camp_btn03::after{content:"";background: url(../images/camp_03frame.png) center/cover no-repeat;  width: 100%;height: 100%;position: absolute;left:0;}
.camp_btn03 {background: url(../images/camp_03img.png) center/cover no-repeat; }


.btn_inner::before{content:"";position: absolute;background: url(../images/camp_star.png) center/cover no-repeat;width:31px ;height:39px ;top: -30%;margin-left: -5%; }
.btn_inner { position: relative; width: 100%; top: 6vw; text-align: center; z-index: 200;cursor: pointer; }
.btn_inner h3 {color: #8d703a; font-family: 'Noto Serif JP', serif  ;font-size: 4.5rem; font-weight: bold; }
.btn_inner p { color: #8e8e8e; font-family: 'Noto Serif JP', serif  ;font-size: 0.8rem;  margin-top: -12%; letter-spacing: 2px; }
.btn_inner span{ background: url(../images/camp_line.png) center/contain no-repeat; width: clamp(6px, .6vw,13px); aspect-ratio: 13 / 127; position: absolute; margin-top: 5%; transform-origin: top;      /* ⭐ 重點 */ transform: scaleY(0);       /* 初始為 0 高度 */ transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
/* ====== 按鈕動態基礎 ====== */
.camp_btn01:hover .btn_inner span, .camp_btn02:hover .btn_inner span, .camp_btn03:hover .btn_inner span{ opacity: 1; transform: scaleY(1); transition-delay: .15s;}
.camp_btn01, .camp_btn02, .camp_btn03 
{ transition: transform .4s ease, filter .4s ease; }
.camp_btn01, .camp_btn02, .camp_btn03
{ background-size: 100%; background-position: center; background-repeat: no-repeat; transition: background-size .6s ease, opacity .4s ease; }
.btn_inner { transition: transform .4s ease; }
.camp_btn01:hover,
.camp_btn02:hover,
.camp_btn03:hover 
{ transform: translateY(-15px) scale(1.03); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25)); } 
.camp_btn01:hover,
.camp_btn02:hover,
.camp_btn03:hover
 { background-size: 120%; opacity: .9; }

.camp_btn01:hover .btn_inner,
.camp_btn02:hover .btn_inner,
.camp_btn03:hover .btn_inner 
{ transform: translateY(-5px); }

.camp_btn01:active,
.camp_btn02:active,
.camp_btn03:active 
{ transform: scale(.97); }

.btn_inner::before { animation: starFloat 2.5s ease-in-out infinite; }

@keyframes starFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(8deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* ====== 漸入效果（進場） ====== */
.camp_btnbox li { opacity: 0; transform: translateY(40px); animation: fadeUp .8s ease forwards; }
.camp_btnbox li:nth-child(1) { animation-delay: .1s; }
.camp_btnbox li:nth-child(2) { animation-delay: .3s; }
.camp_btnbox li:nth-child(3) { animation-delay: .5s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ================================= GALLERY ==================================== */
.section.gallery .content{ width: 100%; height: 100%; display: flex; }
.gallery-grid{ width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.g-item{ position: relative; overflow: hidden; }

/* 8張圖底圖 */
.g-btn{ border: 0; padding: 0;  cursor: pointer; background-image:  linear-gradient(rgba(7, 17, 30, 0.901)),var(--bg); background-size: cover; background-position: center; outline: none; }
.g-btn::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.977), rgba(22, 30, 45, 0.749)); opacity: .9; transition: opacity .35s ease, transform .35s ease; }

/* 中間的 + 圖 */
.g-plus{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2vw; height: 2vw; 
  background: url("../images/galley_btn.png") no-repeat center; background-size: contain; pointer-events: none; 
  transition: transform .35s ease, filter .35s ease, opacity .35s ease; }
.g-plus img{ width: 100%; height: 100%; display: block; }
.g-btn:hover{ }
.g-btn:hover::before{ opacity: .65; }
.g-btn:hover{ transform: translateZ(0); }
.g-btn:hover .g-plus{ transform: translate(-50%, -50%) scale(0.5) rotate(360deg); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 25px rgba(237, 237, 237, 0.4)); }
.g-btn{ }
.g-btn::after{ content:""; position:absolute; inset:0; background-image: var(--bg); background-size: cover; background-position: center; transform: scale(1); transition: transform .6s cubic-bezier(.22,.61,.36,1); z-index: -1; }
.g-btn:hover::after{ transform: scale(1.06); }

/* 中間 title 格 */
.g-title{ background: #071521b7; display: grid; place-items: center; }
.g-title img{ width: min(70%, 520px); height: auto; display: block; user-select: none; pointer-events: none; }



/* ================================= campaign 彈窗 Modal ================================ */
.camp-modal{ position:fixed; inset:0; z-index:9999; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }
.camp-modal.is-open{ visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .25s ease; }
.camp-modal__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.9); opacity: 0; transition: opacity 1s ease; }
.camp-modal__panel{ position:relative; width: min(1100px, 92vw); max-height: 88vh; margin: 6vh auto 0; background: transparent; border: 0; box-shadow: none; display:flex; justify-content:center; align-items:center; }
.camp-modal__img{ width: 100%; height: auto; max-height: 88vh; object-fit: contain; display:block; pointer-events:none;}
.camp-modal__close{ position:absolute; top: 2vw; right: 1vw; width: 48px; height: 48px; border:0;cursor:pointer;
background: url("../images/btn_close.png") no-repeat center/contain;  transition: transform .35s cubic-bezier(.22,.61,.36,1), filter .35s ease, opacity .3s ease; }
.camp-modal__close:hover{ transform: scale(1.15) rotate(90deg); filter: drop-shadow(0 0 8px rgba(212,175,55,.7)); }

body.is-modal-open{ overflow:hidden; }
.camp-modal__panel{ transform: translateY(40px) scale(.9); opacity: 0; transition: transform 1s cubic-bezier(.18,1.4,.3,1), opacity .35s ease; }
.camp-modal.is-open .camp-modal__panel{ transform: translateY(0) scale(1); opacity: 1; }
.camp-modal.is-open .camp-modal__overlay{ opacity: 1; }


/* =================================GALLERY 彈窗 Modal ================================ */
.g-modal{ position: fixed; inset: 0; z-index: 9999; display: block; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.g-modal.is-open{ opacity: 1; pointer-events: auto; }
.g-modal__cover{ position: absolute; inset: 0; background: rgba(0,0,0,.78); opacity: 0; transition: opacity .25s ease; }
.g-modal.is-open .g-modal__cover{ opacity: 1; }
.g-modal__panel{ position: absolute; left: 50%; top: 50%; 
  transform: translate(-50%, calc(-50% + 40px)) scale(.9); opacity: 0;
  transition: transform 1s cubic-bezier(.18,1.4,.3,1), opacity .35s ease; 
  width: min(1100px, 92vw); height: min(980px, 90vh); 
  box-shadow: 0 20px 60px rgba(0,0,0,.45); border-radius: 10px; overflow: hidden; }
.g-modal__body{ width: 100%; height: 100%; display: grid; place-items: center; padding: 30px; box-sizing: border-box; }
.g-modal__img{ max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.g-modal__close{ position: absolute;top: 6vw; right: 1vw;width: 48px; height: 48px; border: 0;
  background: url("../images/btn_close.png") no-repeat center; background-size: contain; cursor: pointer; 
  opacity: .9; transition: transform .2s ease, opacity .2s ease; }
.g-modal__close:hover{ transform: scale(1.15) rotate(90deg); filter: drop-shadow(0 0 8px rgba(212,175,55,.7)); }
body.is-modal-open{ overflow:hidden; } .g-modal.is-open .g-modal__panel{ transform: translate(-50%, -50%) scale(1); opacity: 1; }