/*像素比例尺*/
/* body::before{ width:100%; height:18px; background:url(../images/ruler.png) no-repeat left top; content: ""; position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999999; pointer-events: none; opacity: 1;} */

:root {
  --tw-gradient-from: rgba(44, 44, 46, 1);
  --tw-gradient-to: rgba(44, 44, 46, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);   
  --block-title:4.8rem;
  --block-title-content:1.6rem;
  --btn-crystal: 32px;
  --decor-wt-bg:rgba(140, 145, 160, 1);
  --decor-bk-bg:rgba(236, 236, 239, 1);
  --block-title-color-wt-bg:rgb(34, 34, 36);
  --block-title-color-bk-bg:rgb(252, 252, 255);
  --block-subtitle-color:rgb(120, 120, 128);
  --maxW:1350px;

  --swiper-pagination-color: initial;
  --swiper-pagination-bullet-size: initial;
  --swiper-pagination-bullet-width: initial;
  --swiper-pagination-bullet-height: initial;
  --swiper-pagination-bullet-inactive-color: initial;
  --swiper-pagination-bullet-inactive-opacity: initial;
  --swiper-pagination-bullet-opacity: initial;
  --swiper-pagination-bullet-horizontal-gap: initial;
  --swiper-pagination-bullet-vertical-gap: initial;
}




html{
  font-size:15px; scroll-behavior: smooth;
  overflow-y: scroll; overflow-x: hidden;
}
body{ 
  width:100%; max-width: 100vw; margin:0; padding:0; background-color:var(--block-title-color-wt-bg); color:var(--block-title-color-bk-bg);
  font-family:'Noto Sans TC', 'Noto Serif HK', 'Noto Serif TC', 'Microsoft JhengHei','微軟正黑體', sans-serif, Verdana;
  /* overflow-x: hidden; */
}

button,button,svg,
a, .btn, .btn *,.btn::before, .btn::after, .fixed_btn, .go_top, .go_top::before , .title_icons svg, *::before, *::after,
.swiper-pagination, .swiper-pagination *, .swiper-pagination *::before, .swiper-pagination *::after,
.swiper-button-prev,.swiper-button-prev::after, .swiper-button-next,.swiper-button-next::after
{transition: .25s cubic-bezier(0.4,0,0.2,1);}

i{margin-right: .25rem;}

a{cursor: pointer;}

img{width:100%; height:auto;}

svg, video{width:100%; height:100%;}

div[aria-hidden="true"] {opacity: 0; pointer-events: none; position: absolute; inset: 0; z-index:-1;}
div[aria-hidden="true"] img{width:100%; height:100%; object-fit:cover;}


@media (prefers-reduced-motion: no-preference) {
    body{scroll-behavior: smooth;}
  }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important;}
  }

.loading{ width:100%; height: 100vh; background: #fff url(../images/loading.gif) no-repeat center center; position: fixed; left: 0; top: 0; z-index: 999999999999;}

.container{ width:100%; margin: 0 auto; padding:0; position: relative;}


/* event活動蓋台&按鈕用 */
.cover{ width:100%; max-width: 1920px; display: block;
  background-color: transparent;
  cursor: pointer;
}

.cover img{
  width:100%; max-height: 75vh; object-fit: contain;
}

.go_event{
  width:clamp(100px, 15%, 150px);
  position: absolute !important; top: 3vh; right: 1vw; z-index: 90;
  transition: 0.5s cubic-bezier(0.4,0,0.2,1);
}
.go_event.active{
  opacity: 1; pointer-events: initial;
  top: 90vh;
  transform: translateY(-100%);
}
.scrolled_hide .go_event{ opacity: 0; pointer-events: none;}

.go_event a{
  width:100%; height:auto; aspect-ratio: 484/870; display: block;  
  background: url(../images/cover/moogles.webp) no-repeat center center; background-size: contain;
  position: relative;

}
.go_event a::after{
  --sec_02_color1:rgb(109, 71, 30);
  --sec_02_color2: rgb(150, 114, 63);
  --hover-effect:hue-rotate(0deg);
  --gradient-direction:160deg;
  width: fit-content; content: "前往活動頁";
  padding: 0 calc(var(--block-title-content) * .8);
  background: var(--sec_02_color1) linear-gradient(var(--gradient-direction), var(--sec_02_color2), var(--sec_02_color1));
  font-size: calc(var(--block-title-content) * .8); font-weight: 500; color: #fff;
  line-height: calc(var(--block-title-content) * 1.6); white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
  position:absolute; top:50%; left: 50%; z-index:0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3)) var(--hover-effect);  
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
  border-radius: 6px;
}

@media (hover) {
  .go_event:hover a{transform: translateY(-5%);}

  .go_event:hover a::after{
    --hover-effect: hue-rotate(-5deg) saturate(1.2) contrast(1.1);
    --gradient-direction: 100deg;
    background-color: rgba(0, 0, 0, 1);
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  }
}

/* --------↓版頭header↓-------- */
header{ width:100%; position:fixed; top:0; z-index:100; transition: transform .5s cubic-bezier(0.4,0,0.2,1);}

header.scrolled_hide .top_bar{transform: translateY(-150%);}

header.active.scrolled_hide{ pointer-events: none;}

/* logo */
.top_bar{
  width:100%; padding:clamp(10px, 2%, 20px); position: relative; top:0; left:0;
  color: #fff; display: flex; justify-content:center; align-items: center;
  transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

.logo{
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex; justify-content: center; align-items: center;
  transition: .25s cubic-bezier(0.4,0,0.2,1);
}
@media (hover) {
  /* .logo:hover{
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7)) drop-shadow(0 1px 1px rgba(0, 0, 0, .75));
    filter: -webkit-drop-shadow(0 0 3px rgba(0, 0, 0, .7)) -webkit-drop-shadow(0 1px 1px rgba(0, 0, 0, .75));
  } */
}

.logo a{aspect-ratio: 512 / 130; font-size: 0; line-height: 0; cursor: default;}
.logo svg{width:100%; aspect-ratio: 512 / 130; background-color: #fff; mask-size: 100% 100%; mask-image: url(../images/svg/logo_ffxiv.svg);}

.logo_freetrial {
 width: 80%;
 max-width: 560px;
 margin: 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column; 
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .35)) drop-shadow(0 0px 3px rgba(0, 0, 0, .75));
  filter: -webkit-drop-shadow(0 0 5px rgba(0, 0, 0, .35)) -webkit-drop-shadow(0 0px 3px rgba(0, 0, 0, .75));
}

.freetrial {
  width: 100%;
  height: auto;
  aspect-ratio: 705 / 22;
  margin-top: clamp(10px , 2vw, 1rem);
  margin-bottom: clamp(20px , 4vw, 2rem);
  background: url(../images/sec_01/freetrial.webp) no-repeat top center; background-size: cover;
}

.top_bar::after{
  content: "";
  width:100%; height:150%; position:absolute; top:0; left:0; z-index:0; pointer-events: none;   
  background: linear-gradient(to bottom, var(--tw-gradient-stops));
  pointer-events: none;
}

header.active .top_bar::after{
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(2px);  
}

/* 右上主按鈕 */
.btn_block{width:100%; margin-top:clamp(10px, 5vw, 5rem);}
.btn_block ul{width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(15px, 2%, 25px);}
.btn_block ul>li{ position: relative;}



.reg_block{
  margin-top: clamp(15px, 3vw, 1.5rem);
  display: flex;
  justify-content: center;
}

.btn_crystal{
  --button-bg-left-arrow: linear-gradient(180deg, #EC407A 0.15%, #E91E63 49.98%, #D81B60 50.02%, #D81B60 99.85%);
  --button-bg-right-arrow: linear-gradient(180deg, #E91E63 0%, #E91E63 49.98%, #D81B60 50.02%, #C2185B 100%);
  --button-bg-content: linear-gradient(180deg, #E91E63 0%, #E91E63 50.04%, #D81B60 50.04%, #D81B60 100%);
  --button-bg-shadow: drop-shadow(0px 1px 8px rgba(233, 30, 99, 0.50)) drop-shadow(0px 0px 4px rgba(233, 30, 99, 0.50));
  --button-text-color: #F2F2F5;
  --button-text-shadow: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
  width:fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
  z-index: 1;
  filter: var(--button-bg-shadow);
  position: relative;
  transition: .25s cubic-bezier(0.4,0,0.2,1);
}
.btn_crystal:hover{filter: var(--button-bg-shadow) brightness(1.2);}


.btn_crystal .txt_content{
  padding: 0 calc(var(--btn-crystal) * 1.5) 2px;
  background: var(--button-bg-content);
  font-size: var(--btn-crystal);
  font-weight: 800;
  color:var(--button-text-color);
  font-family: 'Noto Serif TC'; 
  line-height: calc(var(--btn-crystal) * 1.8);
  text-shadow: 1px 1px 2px rgba(130, 0, 43, 0.8);
  display: flex;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  letter-spacing: calc(var(--btn-crystal) * .1);
}

.btn_block ul>li:last-child .btn_crystal{
  /* 銅金色 */
  --button-bg-left-arrow: linear-gradient(180deg, #b8893a 0.15%, #a8793a 49.98%, #8f6830 50.02%, #8f6830 99.85%);
  --button-bg-right-arrow: linear-gradient(180deg, #a8793a 0%, #a8793a 49.98%, #8f6830 50.02%, #6e4f22 100%);
  --button-bg-content: linear-gradient(180deg, #a8793a 0%, #a8793a 50.04%, #8f6830 50.04%, #8f6830 100%);
  --button-bg-shadow: drop-shadow(0px 1px 8px rgba(160, 115, 50, 0.55)) drop-shadow(0px 0px 4px rgba(160, 115, 50, 0.55));
}

.btn_block ul>li:last-child .btn_crystal .txt_content{
  text-shadow: 1px 1px 2px rgba(40, 25, 3, 0.85);
}

.btn_crystal::before,.btn_crystal::after { 
  width: calc(var(--btn-crystal) * .75); content: ""; display: block; line-height: 0 !important; font-size:0 !important;
}
.btn_crystal::before {
  --polygon-shape: polygon(92.308% 0%, 100% 0%, 100% 100%, 92.308% 100%, 1.963% 52.311%, 1.963% 52.311%, 1.256% 51.88%, 0.707% 51.427%, 0.314% 50.96%, 0.079% 50.483%, 0% 50%, 0.079% 49.517%, 0.314% 49.04%, 0.707% 48.573%, 1.256% 48.12%, 1.963% 47.689%, 92.308% 0%);
  background: var(--button-bg-left-arrow);
  -webkit-clip-path: var(--polygon-shape);
  clip-path: var(--polygon-shape);
}
.btn_crystal::after {
  --polygon-shape:polygon(7.692% 0%, 98.037% 47.689%, 98.037% 47.689%, 98.744% 48.12%, 99.293% 48.573%, 99.686% 49.04%, 99.921% 49.517%, 100% 50%, 99.921% 50.483%, 99.686% 50.96%, 99.293% 51.427%, 98.744% 51.88%, 98.037% 52.311%, 7.692% 100%, 0% 100%, 0% 0%);
  background: var(--button-bg-right-arrow);
  -webkit-clip-path: var(--polygon-shape);
  clip-path: var(--polygon-shape);
}


@media screen and (max-width: 1599px) {
  .btn_register .deco {
      width: 24px;
  }
}



.btn{display: block; /* position: relative; */ text-align: center; border: none; outline: none; cursor: pointer;}

.btn a, .btn a img, li a{
  width:100%; height:auto; display:block;
  background-position: left top; background-repeat: no-repeat; background-size: 100% auto;
}

/* --------↑版頭header↑-------- */



/* --------↓主要內容區塊↓-------- */
main{
  display: flex; flex-direction: column; align-items: stretch;  
  position: relative;
}

/* ↓section區塊設定↓ */
.block_content{
  width:100%; min-height: 100vh; position:relative;  
  /* border-bottom:2px solid rgb(131, 131, 133, 1); */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.sec_02 .block_content, .sec_04 .block_content, .sec_05 .block_content{
  background-image:url(../images/bg_texture.png); background-blend-mode:luminosity, normal;
}

.sec_05 .block_content{ background-color:var(--block-title-color-wt-bg);}

.sec_02 .block_content .sec_06 .block_content{ 
  background-color:var(--block-title-color-bk-bg);
}


/* ↑section區塊設定↑ */

/* ↓大項標題樣式↓ */
h1, h2, .sec_title{font-family:'Noto Serif HK'; font-weight: 800; text-align: center;}

span.num{
  font-size: calc(var(--block-title) * 1.2);
  letter-spacing:0; display: inline; position: relative;
}

.title_name, .title_content{
  width:80%;  max-width: var(--maxW); position: relative; z-index: 1;
  display: flex; justify-content: center; flex-direction: column; align-items: center;
}

.title_content{
  --title-content-shadow: 1px 1px 1px rgba(0,0,0,.4), -1px 1px 1px rgba(0,0,0,.4), 0 0 0px rgba(0,0,0,.2);
  margin: calc(var(--block-title-content) * 1.5) 0;
  font-size: var(--block-title-content); text-align: center; letter-spacing: calc(var(--block-title-content) * .08);
  line-height:calc(var(--block-title-content) * 2);
  text-shadow: var(--title-content-shadow);
  -webkit-text-shadow: var(--title-content-shadow);
}

.title_icons{
  height:clamp(30px, calc(var(--block-title) * 1) , 64px); aspect-ratio: 1 / 1;
  margin-bottom: calc(-1 * var(--block-title) * 0.1); position: relative;
}

.title_icons svg{
  width:100%;
  height:100%;
  mask-size: 100% 100%;
}


.sec_02 .title_icons svg{
  mask-image: url(../images/svg/mother_crystal.svg);
      background-color: var(--block-title-color-wt-bg);
}

.top_decor, .bottom_decor{
  width:100%; margin:calc(var(--block-title) *.3) auto;
  display: flex; justify-content:space-between; align-items: center;
}

.decor{display: flex; justify-content: space-between; align-items: center; flex-grow: .5; flex-shrink: .5;}
.decor, .middle.ico{opacity: .8;}
.decor_item{display: flex; align-items: center;}

.decor_item svg{width:clamp(12px, calc(var(--block-title)* 0.35) , 24px); aspect-ratio: 16 / 5; mask-image: url(../images/svg/decor_arrow.svg);}
.rt .decor_item svg{transform: scaleX(-1);}

.top_decor svg, .bottom_decor svg,.decor.lt::after,.decor.rt::before{mask-size: 100% 100%;}

.line{
  height:2px;
  background:linear-gradient(to right, rgba(236, 236, 239, 0), var(--decor-bk-bg) 2%, var(--decor-bk-bg) 98%, rgba(236, 236, 239, 0));
  flex-grow:.49; flex-shrink:.49;
}
.sec_02 .line{
  background:linear-gradient(to right, rgba(140, 145, 160, .0), var(--decor-wt-bg) 2%, var(--decor-wt-bg) 98%, rgba(140, 145, 160, .0));}

.line.s{flex-grow:.5; flex-shrink: .5;}
.bottom_decor .line{margin:0; clip-path: polygon(99% 0, 100% 100%, 0 100%, 1% 0);}

.middle{width: fit-content; display: flex; justify-content: center; align-items: center;}
.middle.text{ margin:0 2.5%; text-align:center;}

.middle.text h3{ 
  font-family: "Noto Sans Display";
  font-weight: 900;
  font-stretch: condensed;
  font-variation-settings:"wdth" 75;
  text-transform: uppercase;
  font-size:clamp(15px, calc(var(--block-title) * 0.33) , 20px);
  line-height: 100%;
  letter-spacing:clamp(5px, calc(var(--block-title) * 0.19) , .53rem);  
  text-indent:0.5rem; white-space: nowrap;
}

.middle svg,
.decor.lt::after, .decor.rt::before,
.decor_item2 svg{
  width:clamp(4px, calc(var(--block-title) * 0.14) , 8px); aspect-ratio: 1 / 1.5; mask-image: url(../images/svg/star.svg);
}

.middle svg{width:clamp(7px, calc(var(--block-title) * 0.16) , 12px); margin:0 2px;}

.decor_item2{display: flex; justify-content: center; align-items: center;}

.decor.lt::after,.decor.rt::before{content:""; display: block;}
.decor.lt::after{ margin-left: calc(var(--block-title) * .05);}
.decor.rt::before{margin-right: calc(var(--block-title) * .05);}

.sec_title{
  font-size:var(--block-title); letter-spacing:calc(var(--block-title) * 0.075);
  line-height:calc(var(--block-title) * 1.25);
}
.sec_title h1{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

.sec_02 .title_name,
.sec_06 .title_name{
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .9));
  filter: -webkit-drop-shadow(1px 1px 0 rgba(255, 255, 255, .9));
}

.sec_04 .title_name{
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .5));
  filter: -webkit-drop-shadow(1px 1px 0 rgba(255, 255, 255, .5));
}

.sec_05 .title_name, .sec_07 .title_name,.sec_08 .title_name, .sec_09 .title_name{
  color:var(--block-title-color-bk-bg);
  text-shadow: 0 0 3px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.2), 0 0 15px rgba(0,0,0,.1);
  -webkit-text-shadow: 0 0 3px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.2), 0 0 15px rgba(0,0,0,.1);
}

.top_decor svg, .bottom_decor svg, .decor.lt::after, .decor.rt::before{background-color:var(--decor-bk-bg);}

.sec_02 .top_decor svg, .sec_02 .bottom_decor svg, .sec_02 .decor.lt::after, .sec_02 .decor.rt::before{background-color:var(--decor-wt-bg);}
/* ↑大項標題樣式↑ */







/* all sec_02 獎項列表 */
.sec_02 .block_content{ padding:6.5vw 0; background-color: #f2f2f5; color: var(--block-title-color-wt-bg);}

.sec_02 .sec_title{
  height: fit-content; display: flex; justify-content: center; align-items: center;
}

.sec_02 .sec_title h1{flex-wrap: wrap;}

#sns_embed{width:100%;}



@media screen and (min-width:768px) {
  /* 桌機/手機顯示切換設定 */
.mobile{display: none;}
}



@media screen and (max-width:1439px) {
  :root {
    --btn-crystal: 28px;
  }
}


@media (max-width:1280px){
  :root {
    --block-title:5.5vw;
    --block-title-content:2vw;
  }
}

@media (max-width:1000px){
  :root {
    --block-title-content:2.5vw;

  }

  /* 延遲aos */
  .sec_03 .title_content h1{ font-size: var(--block-title);}
}



/* ------------------------mobile view-------------------------- */
@media (max-width:767px){
  :root {
    --block-title:8vw;
    --btn-crystal: 6vw;
    --block-title-content:3.5vw;
  }

  /* 桌機/手機顯示切換設定 */
  .pc{display:none;}
  .mobile{display:block !important;}

  /* --------↓mobile 版頭header↓-------- */

  .block_content{ border-bottom-width:1px;}
  .title_name, .title_content{ width:90%;}

  .go_event{ right: calc(1vw + var(--block-title-content) * .8);}
    

  /* mobile sec_02 獎項列表 */

  .top_decor, .bottom_decor{margin:.8rem auto;}

  .middle.text{margin:0 2%;}

  .middle.text h3{font-size:clamp(6px, calc(var(--block-title) * 0.4) , 15px); letter-spacing: .37rem;}

  .middle svg, .decor.lt::after, .decor.rt::before{width:clamp(4px, calc(var(--block-title) * 0.3) , 6px);}

  .decor_item svg{width:clamp(12px, calc(var(--block-title) * 0.5) ,16px);}

  .line{height:1px; margin:0 2px;}

  .sec_02 .sec_title{width: 82%;}

  .sec_02 .sec_title h1{--sd_n:1px; }

  .sec_02 .title_name h2{font-size:calc(var(--block-title) * 0.55); line-height: calc(var(--block-title) * .7);}
}



@media (max-width:640px){
  :root {
    --block-title-content:3.4vw;

  }  
}


@media (max-width:500px){
  :root {
    --block-title:7.8vw;
    --block-title-content:3.9vw;
  }

  .go_event{ right: calc(1.5vw);}

  .sec_02 .sec_title{width:100%;}

}



@media (max-width:430px){
  :root {
    --sec_01_title:14vw;
  }

  body{ width:100vw;}


}


@media (max-width:310px){
  :root {
    --block-title-content: 4.9vw;
  }
    
  .middle.text h3{letter-spacing:.1rem;}

  .top_decor, .bottom_decor{margin:.5rem 0;}

  .line{margin:0 1px;}

}

@media (max-width:200px){
  :root {    
    --block-title:7.6vw;
  }
}