@charset "utf-8";

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans TC";
  overflow-x: hidden;
    background-image: url(../images/bg_main.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
    background-color: rgb(214, 214, 214);

  /* 背景固定不隨頁面滾動 */

}

:root {
  --FontSize-ttl-sec: 24px;
  --block-title: 3.6rem;
  --top_btn_txt: clamp(0.7rem, 1vw, 1rem);
  --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);
  --block-title-content: 1.6rem;
  --maxW: 1350px;
}
li.coming_soon{
    cursor: default !important;
    }


.guide_index main {
  width: 100%; position: relative;
  color: #404040; margin-top: calc(var(--block-title)* .5);
}

.guide_index main .content_all{
   width: 100%;
  padding: 0 7% 0;
  position: relative;
}

/*---------------------------------- ↓ 大  標 ↓---------------------------------- */

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

.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 .svg {
  height: clamp(15px, 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%;
  background-color: var(--block-title-color-wt-bg);
}

.title_icons svg {
  mask-image: url(../../../images/svg/header/02-5_guide.svg);
}

.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,
.decor_item .svg {
  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/job/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(140, 145, 160, .0), var(--decor-wt-bg) 2%, var(--decor-wt-bg) 98%, rgba(140, 145, 160, .0));
  flex-grow: 0.49;
  flex-shrink: 0.49;
}

.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,
.middle .svg {
  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/job/star.svg);
}

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

.decor_item2,
.decor_item2 .svg {
  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;
}

h1,
h2,
.sec_title {
  font-family: 'Noto Serif HK';
  font-weight: 800;
  text-align: center;
}

.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));
}


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

/*---------------------------------- ↑ 大  標 ↑---------------------------------- */


/*---------------------------------- ↓ 次  標 ↓---------------------------------- */
section .sec_title {
  font-size: calc(var(--block-title) * 0.8);
  letter-spacing: calc(var(--block-title) * 0.05);
  line-height: calc(var(--block-title) * 0.9);
  padding: 0 var(--block-margins-s);
}

section .title_name .top_decor {
  /* padding-right: 1rem; */
  display: flex;
}

section .top_decor,
section .bottom_decor {
  margin: calc(var(--block-title) *.0.8) auto;
}

section .title_name .decor.rt {
  justify-content: left;
}

section .title_name .decor.lt {
  justify-content: right;
}

section .title_icons .svg {
  height: clamp(15px, calc(var(--block-title) * 1), 40px);
  aspect-ratio: 1 / 1;
  margin-bottom: .2rem;
  position: relative;
}

.sec01 .title_icons svg {
  mask-image: url(../../../images/svg/play_guide.svg);
}

.sec02 .title_icons svg {
  mask-image: url(../../../images/svg/game_content.svg);
}

.sec03 .title_icons svg {
  mask-image: url(../../../images/svg/meteo.svg);
}

.sec04 .title_icons svg {
  mask-image: url(../../../images/svg/meteo_other.svg);
}

/*---------------------------------- ↑ 次  標 ↑---------------------------------- */


/*---------------------------------- ↓ 次 選 單 ↓---------------------------------- */

.content_menu {
  width: 100%;  position: sticky;
  margin: var(--block-margins-s) auto;
  transition:all 0.1s;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}
.content_menu.sticky{
  /* position: sticky; */
 position: fixed;
   margin: 0 auto;

  left: 0;
  right: 0;  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 8px 0;
}
.content_menu ul {
  width: 100%;
  max-width: 1250px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--block-margins-ss) * 1.1);
  margin: 0 auto;

}

.content_menu ul li {
  min-width: 23%;
  max-width: none;
  width: fit-content;
  white-space: nowrap;
  color: #ffffff;
  font-size: calc(var(--btn_txt_size)*1.1);
  display: flex;
  justify-content: center;
  background: var(--gold-gradient);
  border-radius: var(--border-radius-s);
  text-shadow: var(--text-shadow);
  /* font-family: 'Noto Serif HK'; */
  font-weight: 600;
  filter: brightness(1) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
  transition: var(--nav-transition);

}

.content_menu ul li a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  text-align: center;
  justify-content: center;
  padding: calc(var(--block-margins-ss) * 1.2) calc(var(--block-margins-ss) * 1.9);
}

.content_menu ul li:hover {
  filter: brightness(1.1);
}

/*---------------------------------- ↑ 次 選 單 ↑---------------------------------- */
.guide_index main section {
  max-width: 1200px;
  margin: calc(var(--block-margins-m)*1) auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2.5rem;

}

section .content {
  width: 100%;
  max-width: 1200px;
  text-align: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--border-radius-pic)*1.2);
  padding: calc(var(--block-margins-m)* 0.7);
  margin: 0 auto var(--block-margins-s);
}

section .content.icon_menu {
  padding-bottom: calc(var(--block-margins-m)* 0.5);

}

section .content.col-2-3 {
  width: 67%;
  margin: 0;
}

section .content.col-1-3 {
  width: 30.5%;
  margin: 0;
}

section .content .list_block {
  /* margin-top: calc(var(--block-margins-s) * 1.5); */
  display: flex;
  gap: var(--column-gap);

}

section .content .list_block.three_column .list {
  width: calc((100% - var(--column-gap)) / 3);
  /* 三欄：總寬扣掉 gap，再除以 3 */
  box-sizing: border-box;
}


/*圖片式按鈕*/
section .content .coming_soon::after {
  border-radius: var(--border-radius-pic);
}
section .content .list_block img{
  aspect-ratio: 767 / 220;
}
section .content .list_block img,
section .content ul li.crystal_store a {
  border-radius: var(--border-radius-pic);
  box-shadow: var(--box-shadow-pop);
}
section .content .list_block.three_column .list{
  max-width: 360px;
}
section .content .list_block.three_column .list a {
  transition: var(--nav-transition);
}

section .content a:hover,
section .content .btn_color:hover {
  filter: brightness(1.06);
}

section .content h3 {
  margin-bottom: calc(var(--block-margins-ss) * 1.3);
  font-size: calc(var(--btn_txt_size)*1.03);
  font-weight: 500;
  position: relative;
  color: var(--basic-gold);
  z-index: 1;
  display: inline-flex;
  /* 讓偽元素與文字對齊 */
  gap: 0.2em;
}

section .content h3::before,
section .content h3::after {
  content: "";
  display: inline-block;
  width: clamp(6px, calc(var(--block-title) * 0.14), 10px);
  aspect-ratio: 1 / 1.5;
  background-color: var(--basic-gold);
  mask-image: url(../../../images/svg/job/star.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url(../../../images/svg/job/star.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* section .content h3::before{
  content: "";
  position: absolute;
  z-index: -1;
  height: 5px;
  width:250px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background: var(--gold-line-gradient);
  opacity: 0.3;
} */
section .content a h3 {
  margin-bottom: 0;
}

section h3 span {
  display: inline-block;
  text-align: center;
}

section .content .list_block.three_column ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--block-margins-s) * 1);
}
/* section .content .list_block ul li.btn-image{
  border-radius: var(--border-radius-pic);
} */
section .txt-lead {
  color: #575757;
  font-size: calc(var(--btn_txt_size)*1);
  text-align: center;
  margin: calc(var(--block-margins-m)*0.7) auto calc(var(--block-margins-m)*0.8);
  max-width: 800px;
  display: block;
  text-align: left;
  width: fit-content;
}

section .txt-lead p {
  padding: 0;
  line-height: calc(var(--btn_txt_size)*1.8);
  margin: 0 auto;
  width: auto;
  width: fit-content;
  text-align: left;

}

section.sec01 .txt-lead p {
  display: inline;
}

/*link_menu icon區塊*/


section .content.icon_menu h4,
section .content .btn_color h4 {
  font-size: calc(var(--btn_txt_size)*0.9);
  font-weight: 500;
}

section .content ul.link_menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: calc(var(--block-margins-s) *0.2) auto 0;
  gap: clamp(1rem, 2vw, 2rem);
}

section .content ul svg {
  width: 100%;
  height: 100%;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
  background-color: var(--nav-sub-font-color);
}

section .content ul.link_menu svg {
  width: clamp(45px, 5vw, 60px);
  aspect-ratio: 1 / 1;
}

/*彩色按鈕*/
section .content .btn_color {
  /* background: linear-gradient(to bottom, #084599 0%, #1272d1 80%); */
  color: #ffffff;
  text-shadow: var(--text-shadow);
  font-size: calc(var(--btn_txt_size)*1.1);
  font-weight: 600;
  display: block;
  border-radius: var(--border-radius-pic);
  transition: var(--nav-transition);
  height: 100%;

}

/*水晶商城按鈕*/
section .content ul li.crystal_store {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* max-width: 360px; */
    width: 100%;
}
section .content ul li.crystal_store a,
section .content .btn_color {
  background: linear-gradient(to bottom, #084599 0%, #1272d1 80%);
   width: 100%;
  max-width: 360px;
  padding: clamp(0.5rem, 2vw, 1rem);
  height: fit-content;
}

section .content ul li.crystal_store .svg {
  display: flex;
  justify-content: center;
  align-items: center;
}

section .content ul li.crystal_store svg {
  max-width: clamp(140px, 16vw, 160px);
  aspect-ratio: 300 / 82;
  height: fit-content;
  background-color: #ffffff;
}

section .content ul.link_menu a {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: block;
}

section .content ul.link_menu .main svg {
  mask-image: url(../../../images/svg/header/07-1_main.svg);
}

section .content ul.link_menu .subscribe svg {
  mask-image: url(../../../images/svg/header/07-2_subscribe.svg);
}

section .content ul.link_menu .crystal svg {
  mask-image: url(../../../images/svg/header/07-3_crystal.svg);
}

section .content ul.link_menu .retainer svg {
  mask-image: url(../../../images/svg/servant.svg);
}

section .content ul.link_menu .eternal_bonding svg {
  mask-image: url(../../../images/svg/eternal_bonding.svg);
}

section .content ul.link_menu .renaming svg {
  mask-image: url(../../../images/svg/rename.svg);
}

section .content ul .crystal_store svg {
  mask-image: url(../../../store/images/svg/header/logo_store.svg);
}

section .content ul.link_menu a:hover svg {
  background-color: var(--nav-hover-color);
}

section .content ul.link_menu li {
  position: relative;
  width: fit-content;
  min-width: 130px;
  padding: 1rem 1rem 0.5rem;
  cursor: pointer;
  border-radius: var(--border-radius-pic);
  overflow: hidden;
  /* 確保偽元素不超出範圍 */
  transition: var(--nav-transition);
}

section.sec04 .content ul.link_menu li {
  min-width: 145px;
}

/* --- 漸層背景層（預設透明）--- */
section .content ul.link_menu li::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top/right/bottom/left: 0 的簡寫 */
  border-radius: inherit;
  background: linear-gradient(to bottom, #ffffff 30%, #f3f3f3 100%);
  opacity: 0;
  transition: var(--nav-transition);
  z-index: 0;
}

/* --- hover 時淡入漸層背景 --- */
section .content ul.link_menu li:hover::before {
  opacity: 1;
}

/* --- 保持內容層在上方 --- */
section .content ul.link_menu li>* {
  position: relative;
  z-index: 1;
}

/* 單欄式 */
section .content .single_column {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

/*雙欄式*/
section .content .menu-list.two_column {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--column-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

section .content .menu-list.two_column li {
  width: calc((100% - var(--column-gap)) / 2);
  /* 兩欄：總寬扣掉 gap，再除以 2 */
  box-sizing: border-box;
}

section .content .menu-list.two_column .link_topic a,
section .content .btn-image a {
  display: inline;
}

section .content .menu-list.two_column .link_topic {
  margin-top: var(--block-margins-ss);
  text-align: left;
  font-size: calc(var(--btn_txt_size)*0.9);
  display: none;
}

section .content .menu-list.two_column .link_topic a {
  text-decoration: underline;
  margin: 0 3px;
  transition: var(--nav-transition);
}

section .content .menu-list.two_column .link_topic a:hover {
  text-decoration: none;
  color: var(--basic-gold);
}

.notice_block .hint {
  width: fit-content;
  margin: calc(var(--block-margins-s)*1.2) auto 0;
  font-size: calc(var(--btn_txt_size)*1);
  color: var(--blue);
  text-align: left;
}

.sec03 .notice_block {
  margin: var(--block-margins-m) auto 0;
  font-size: calc(var(--btn_txt_size)*0.75);
  line-height: 1.8;
  color: var(--dark-red);
  text-align: center;
}

.sec03 .notice_block {
  width: 100%;
  text-align: left;
}

/* :is(section.sec02 ul, section.sec03 ul) li.btn-image:hover {
    transform: scale(1.03);
  } */



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

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

  section .txt-lead {
    width: 95%;
  }
  .content_menu {
    padding: 0 5%;
}
.content_menu.sticky {
    /* top: 40px;
    left: 0; */
    padding: var(--block-margins-s) 5%;

}
}

@media (max-width:875px) {

  .content_menu ul li {
    width: 49%;
  }
}

/* ------------------------mobile view-------------------------- */


@media (max-width:835px) {
  :root {
    --sec_01_title: 8.5vw;
  }
}

@media (max-width:800px) {

  /*---------------------------------- ↓ 內容排列改變 ↓---------------------------------- */
  .guide_index main .content_all {
    padding: calc(var(--block-title)* .5) 5% 0;
  }

  .guide_index main section {
    padding-top: 1vw;
  }

  section .content .list_block.three_column {
    flex-wrap: wrap;
  }

  section .content .list_block.three_column ul {
    flex-wrap: wrap;
  }

  section .content .list_block.three_column .list {
    width: 48%;
    margin-bottom: 2%;
  }

  section.sec01 .content:first-of-type .list_block.three_column .list:last-of-type {
    margin-top: 2%;
  }

  section .content .list_block {
    gap: 4%;
  }

  section .content ul.link_menu {
    justify-content: space-evenly;
    gap: 0;
  }

  section .content ul.link_menu li,
  section.sec04 .content ul.link_menu li {
    width: fit-content;
    min-width: clamp(80px, 30%, 120px);
    padding: 1.5vw 1.5vw 1vw;
  }

  section .content ul.link_menu svg {
    width: clamp(30px, 10vw, 50px);
  }

  /*---------------------------------- ↑ 內容排列改變 ↑---------------------------------- */

}

@media (max-width:767px) {

  :root {
    --block-title: 7vw;
    --block-title-content: 3.5vw;
  }

  /*---------------------------------- ↓ 大  標 ↓---------------------------------- */
  .title_name,
  .title_content {
    width: 90%;
  }

  .title_icons {
    margin-bottom: calc(var(--block-title) *.2);
  }

  section .title_icons {
    margin-bottom: 1vw;
  }


  .top_decor,
  .bottom_decor {
    margin: calc(var(--block-title) *.1) 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;
  }

  /*---------------------------------- ↑ 大  標 ↑---------------------------------- */

  /*版面排列異動*/

  section .content.col-1-3,
  section .content.col-2-3 {
    width: 100%;
    margin: 0 auto var(--block-margins-s);
  }
}

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

@media (max-width:500px) {
  :root {
    --block-title: 7.8vw;
    --block-title-content: 3.9vw;
  }
  section .content .list_block.three_column .list{
  max-width:100%;
}

  /*---------------------------------- ↓ 內容排列改變 ↓---------------------------------- */

  section .txt-lead {
    margin: 3.5vw auto;
  }

  section .txt-lead p {
    line-height: 1.5;
  }

  section .content .list_block.three_column .list {
    width: 100%;
    margin-bottom: 3vw;
  }

  section .content .list_block.three_column ul {
    gap: 4vw; align-items: center;
  }

  section .content h3 {
    margin-bottom: 2vw;
  }

  section .content>h3 {
    font-size: 4.3vw;
  }

  section .content .list_block.three_column .list h3,
  .sec04 .content h3 {
    font-size: 4.3vw;
    margin-bottom: 2.5vw;
  }

  .sec04 .content .crystal_store h3 {
    /*太長的標題改置中對齊*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sec04 .content .crystal_store h3>span {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  /* 兩欄式改單欄 */
  section .content .menu-list.two_column li {
    width: 100%;
    margin-top: 3vw;
  }

  section .content ul li.crystal_store svg {
    width: 40vw;
  }

  main .coming_soon::after{
    font-size: 4vw;
  }

  /*---------------------------------- ↑ 內容排列改變 ↑---------------------------------- */
}

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

  body {
    width: 100vw;
  }

}

@media (max-width:410px) {

  .title_name,
  .title_content {
    width: 92%;
  }

  .content_menu ul li {
    width: 47%;
  }

  .content_menu ul li a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
    text-align: center;
    justify-content: center;
    /* padding: 1.3vw 1.9vw; */
  }


}


@media (max-width:310px) {
  :root {
    --block-title-content: 5vw;
  }

  .middle.text h3 {
    letter-spacing: .1rem;
  }

  .line {
    margin: 0 1px;
  }

}


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