@charset "utf-8";
/* CSS Document */

*{ 
  -webkit-box-sizing:border-box; /*Safari Chrome*/
  -moz-box-sizing:border-box; /*Firefox*/
  box-sizing:border-box; }

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

body{ width: 100%; background-color: #ffffff;  position: relative;
    font-family: "Noto Sans TC",'Microsoft JhengHei', Helvetica, 'Maven Pro', 'Droid Sans','Myriad Pro', Verdana, Geneva, sans-serif; 
    color: var(--basic-darkgray); /* text-align: center; line-height: 2rem; font-weight: 400;letter-spacing:normal; */}

:root {
    --basic-gray:rgb(59, 59, 59);
    --basic-darkgray:rgb(89, 89, 89);
    --basic-brightgray:#dfdfdf;
    --basic-brightgra2:#dcdcdcf3;
    --title-gray:rgb(48, 48, 48);
    --basic-gold:rgb(168, 123, 0);
    --border-radius-s:0.5rem;
    --border-radius-l:2rem;
    --common-h1-size:1.4rem;
    --border-radius-pic:3%;

    --swiper-theme-color:gray;
    --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;

        --block-margins-m: clamp(2rem, 3vw, 3rem);
    --block-margins-s: clamp(1rem, 2vw, 2rem);
    --block-margins-ss: clamp(0.4rem, 1vw, 0.7rem);

  }

.svg{width: 100%; height: 100%;}

/*fancybox*/
.fancybox__content{background: none!important;
    min-height: 250px !important; /* 设置最小高度 */}

.fancybox__slide {
    margin: 0 auto !important; padding: 0;
}
.index .fancybox__slide {
        max-width: 1200px !important;
}
.fancybox__container {
    --fancybox-bg: rgba(24, 24, 27, 0.8);
}
.fancybox__content{
    background: none !important;
}
.fancybox__content>.carousel__button.is-close {
    top: 5px!important;
    right: 30px!important;
}

/*像素比例尺*/
.ruler{ height:18px; background:url(../images/ruler.png) no-repeat left top; 
    position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}
.clear{ height:0; clear:both; font-size:0em!important;}

.btn {
    display: block;
    position: relative;
    text-align: center;
    border: none;
    outline: none;
    cursor: pointer;
}
a{ cursor: pointer;}
/*按鈕統一效果*/
main a, 
main input[type="button"], 
main input[type="submit"]{
    transition: filter 0.1s ease;
}

main a:hover, 
main input[type="button"]:hover, 
main input[type="submit"]:hover {
    filter: brightness(1.08); /* 提高亮度 */
}
.button:hover{
    filter: brightness(1.05); /* 提高亮度 */
}
/* 
a img{
    width: 100%;
  } */
/*main主要內容區塊*/

.index main{ /*display: none;*/
	width: 100%; position: relative; 
	margin: 0 auto;
}
.index main .all {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
/*visual輪播主視覺banner區塊*/
.index .visual{
    position: relative;
    width: 100%; height:fit-content; 
}

/* .index .visual>ul li .s{ display: none;} */
/* .index .visual {
    width: 100%;
} */
.index .visual nav.visual_title {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    /* height: clamp(50px, 3vw, 70px); */
    background-color: rgba(0, 0, 0, 0.4);
}
.index .visual img {
    width: 100%;
    object-fit: cover;
    height: 80vh;
}

.index .visual nav ul a:hover{ filter: brightness(1.5); /* 提升亮度效果 */
}



/*--------------.content 區塊--------------*/
.index main .all .content .first_box, .index main .all .content .second_box {
    width: 100%; gap:var(--block-margins-s);
    display: flex;
    justify-content: space-between;
}
.index main .all .content .first_box{
    /* max-height: 430px;  */
    display: flex;
    align-items: stretch; /* ⭐ 讓子元素等高 */
}
/* .index main .all .content .second_box{
    margin-bottom: clamp(1.5rem,7%,3rem);
} */



/*version區塊*/

  /*檢視每個version區塊用，內容無誤即可隱藏*/
 /* .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  
    display: flex;
    flex-direction: column;
}  */

.index main .version {
    width: 100%; height: auto; position: relative;
}

.index main .version .cover .all{
    width: 95%; max-width: 1600px;
}
.index main .version .cover .detail {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: center;
    align-items: center;
    padding: 2.5% 0 4.5%;
}
.index main .version .cover .detail .version_logo {
    margin: 7% auto 0;
    max-width: 340px;
}
    .index main .version .cover .detail .version_logo img {
        width: clamp(210px, 100%, 340px);

    }
.index main .version .cover.v2{
    background:url(../images/version/02.webp) no-repeat center top / cover;
}
.index main .version .cover.v3{
    background:url(../images/version/03.webp) no-repeat center top / cover;
}
.index main .version .cover.v4{
    background:url(../images/version/04.webp) no-repeat center top / cover;
}
.index main .version .cover.v5{
    background:url(../images/version/05.webp) no-repeat center top / cover;
}
.index main .version .cover.v6{
    background:url(../images/version/06.webp) no-repeat center top /  cover;
}
.index main .version .cover.v7{
    background:url(../images/version/07.webp) no-repeat center top /  cover;
}


.index main .version .detail h1, .index main .version .detail h2,
.index main .version .detail h3{
    font-family: 'Noto Serif HK'; color: #ffffff;
}
.index main .version .detail h3{
    font-size:clamp( 1.1rem,3vw,1.3rem); font-weight: 600; line-height: 2rem;
    margin-top: 5%; 
}
.index main .version .detail h2{
    font-size:clamp( 1.6rem,4vw,2.2rem); font-weight: 600; line-height: 2.5rem;
}
.index main .version .detail h1 {
    font-size: clamp( 2.5rem,4vw,3.1rem);
    font-weight: 700;
    line-height: 3.8rem;
    margin-bottom: 1rem;
}
.index main .version .detail p {
    font-size: clamp(0.9rem, 0.9vw, 1.1rem);
    margin: 2% 0 3%;
    line-height: clamp(1.8rem, 3vw, 2rem);
    color: #ebebeb;
    max-width: 350px;
}

.index main .version .detail p span {
    display: inline-block;
}
.index main .version .detail .button_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    margin: 4% 0 8%;
}
.index main .version .detail .button_box .button {
    width: auto;
    max-width: 250px;
    color: #ffffff;
    font-size: 1.2rem;
    background: linear-gradient(to bottom, #946d1b, #cea32d);
    border-radius: 3px;
    min-width: 150px;
}
.index main .version .detail .button_box .button a {
    width: 100%;
    height: 100%;
    display: block;
    padding: clamp( 0.7rem,0.6vw,1.1rem);
    position: relative;
    z-index: 1;
}

.index main .version .detail .button_box .button,
.version .swiper-button-next, .version .swiper-button-prev {
    transition: transform 0.1s ease, filter 0.1s ease;
}

.index main .version .detail .button_box .button:hover,
.version .swiper-button-next:hover, .version .swiper-button-prev:hover {
    -webkit-filter: brightness(1.2); /* Safari */
    filter: brightness(1.2);
}
.index main .version .detail .button_box .button a .btn_more::after {
    content: '+';
    width: 100%;
    height: 100%;
    display: inline;
    margin-left: 5%;
}

  /* 自訂箭頭按鈕樣式 */
  .version .button_group {
    width: 95vw;
    max-width: 1920px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    margin: 0 auto;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

  .version .swiper-button-next, .version .swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    border: none;
    padding: 10px;
    font-size: 20px;
  }
  .version .swiper-button-next:after,.version .swiper-button-prev:after {
    color: #cdcdcd !important; /* 白色箭頭 */
}
  .version .swiper-button-next{
    right: 10px; opacity: 0.3;
  }

  .version .swiper-button-prev {
    left: 10px; opacity: 0.3;
  }
  .version .swiper-button-next:hover,  .version .swiper-button-prev:hover{
    opacity: 0.8;
  }
  .version .slide-pager{
    position: absolute; bottom: 0; left: 50%;
z-index: 15; transform: translateX(-50%);
  }
  .version .slide-pager.circule-button {
    display: flex;
    justify-content: center;
    gap: 1.7rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.version .slide-pager.circule-button a {
    width: 1rem; /* 圆点大小 */
    height: 1rem;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
    border-radius: 50%; /* 圆形 */
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease; /* 平滑过渡效果 */
}

.version .slide-pager.circule-button a:hover {
    background-color: rgba(255, 255, 255, 0.8); /* 悬停时变亮 */
    transform: scale(1.1); /* 悬停时放大 */
}

.version .slide-pager.circule-button a.active {
    background-color: rgba(255, 255, 255, 1); /* 当前页为实心白色 */
    transform: scale(1.3); /* 激活时稍大 */
}

/*version popup*/

.version_pop article{ padding: 6% 8%;}
.version_pop h1, .version_pop h2, .version_pop h3{
    font-family: 'Noto Serif HK'; text-align: center; margin: 0.5rem;
}

.version_pop .intro_box .title{
    width: 100%; border-bottom: #a5a5a5 1px solid;
}
.version_pop .intro_box h1 {
    font-size: clamp( 1.6rem,4vw,3.1rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.version_pop .intro_box h2 {
    font-size: clamp( 1.1rem,4vw,2.2rem);
    font-weight: 600;
    /* line-height: 2.5rem; */
}
.version_pop .intro_box h3{
    font-size:clamp( 1rem,3vw,1.3rem); font-weight: 600; line-height: 2rem;
    margin-top: 5%;
}
.version_pop .intro_box>.text {
    width: 85%;
    margin: 5% auto;
}
.version_pop p {
    font-size: clamp(0.85rem, 2vw, 1.2rem);
    margin: 2% auto 2%;
    line-height: clamp(1.8rem, 4vw, 2.4rem);
}
.version_pop .intro_box .video_box {
    width: fit-content;
    margin: 0 auto 5%;
}
.version_pop .intro_box .video_box iframe {
    max-width: 100%;
}
.version_pop .intro_box{
    width: 100%; height: fit-content;
     margin-bottom: 5%; 
     border-bottom: #a5a5a5 1px solid;
    }
    .version_pop .story_box {
        width:100%;
        margin: 0 auto;
    }
.version_pop .story_box .chapter {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 4% 0;
    border-bottom: #a5a5a5 1px solid;
}
.version_pop .story_box .chapter:last-of-type{
    border-bottom: none

}
 .version_pop .story_box .chapter .pic{
    width: 42%;
 }
 .version_pop .story_box .chapter .text{
    width: 53%; 
 }
 .version_pop .story_box .chapter .text h5{
    font-size:clamp( 1.2rem,3vw,1.5rem); font-weight: 600; 

 }
 .version_pop .story_box .chapter .pic img{
    width: 100%; display: block;
 }
 .version_pop .story_box .chapter .text .story>p{
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    line-height: clamp(1.8rem, 4vw, 2.6rem);
    text-align: justify;
 }
 .version_pop .story_box .chapter .text .story>p span {
    /* display: inline-block; */
    margin-bottom: 3%;
    display: block;
    line-height: 2.2rem;
}

/*內容區*/
.index main .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 2.1rem;
    margin: 3% auto 0;
}

.index main .content .gmnote {
    flex: 1;                  /* 或 flex: 0 0 70% 根據需求 */
    display: flex;
    align-items: center;      /* 讓圖片垂直置中，可選 */
    justify-content: center;  /* 水平置中，可選 */
    overflow: hidden;
  }
  
.index main .content .pre_order_block {
    width: 70%;  
    display: flex;
    align-items: center;      /* 讓圖片垂直置中，可選 */
    justify-content: center;  /* 水平置中，可選 */
    overflow: hidden;
  }
  
.index main .content .facebook {
    width: 48%;
  }
  
.index main .content .social {
    width: 48%;
  }
  .index main .content h1 {
    font-size: 1.6rem; line-height: 1;
    color: #303030;
    font-weight: 600;
    margin-bottom: calc(var(--block-margins-ss) *1.2);
    text-align: left;
}
/*gmnote*/
/* .index .gmnote{ max-width:350px;} */
.index .gmnote .title {
    width: 100%;
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
    margin: 0;
    border-bottom: 1px solid var(--basic-brightgray);
}
.index .content > .div > div {
    padding: .5rem 0  0 0;
}
.index .gmnote .news_list .article_title a{ position: relative;}
.index .gmnote .news_list .article_title.new a::before {
    content: 'N';
    position: relative;
    left: 0;
    top: 0;
    color: var(--basic-gold);
    font-weight: 700;
    min-width: 20px;
    padding-right: 3px;
    display: inline;
}
.index .gmnote .news_list {
    margin-top: 0.5rem;
}
.index .gmnote .news_list ul {
    width: 98%;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0;
    text-align: left;
    font-weight: 350;
    justify-content: space-between;
}
.index .gmnote .news_list ul .article_title {
    width: 85%;
    display: flex;
    justify-content: left;
    color: var(--basic-gray);
    line-height: 1.8rem;
    font-size: var(0.95rem,1vw,1rem);
}
.index .gmnote .news_list ul .date {
    width: 13%;
    color: #a5a5a5;
    font-size: .9rem;
    text-align: right;
}
.index .gmnote .news_list ul .article_title a {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index .news_banner ul li{
    margin-bottom: 0.8rem; max-width: 300px;
}
.index .news_banner .banner_all{
    position: relative;
}
.index .news_banner .swiper-pagination {
    bottom: var(--swiper-pagination-bottom,0 );
    top: var(--swiper-pagination-top,auto);
}
.index .news_banner .banner_all .swiper-wrapper .swiper-slide a{
    width: 100%; height: fit-content;

}
.index .news_banner .banner_all .swiper-wrapper .swiper-slide a img {
    width: 100%;
    margin: 0.5rem auto  0;
}
.index .news_banner .slide-pager{
    position: relative; bottom: 0; left: 50%;
z-index: 15; transform: translateX(-50%);

  }
  .index .news_banner .slide-pager.circule-button {
    display: flex;
    justify-content: center;
    gap: 1.7rem;
    padding: 5% 0 0;
    /* margin-bottom: 0.5rem; */
}

.index .news_banner .slide-pager.circule-button a {
    width: 1rem; /* 圆点大小 */
    height: 1rem;
    background-color: rgba(182, 182, 182, 0.5); 
    border-radius: 50%; 
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease; 
}

.index .news_banner .slide-pager.circule-button a:hover {
    background-color: rgba(255, 255, 255, 0.8); 
    transform: scale(1.1); 
}

.index .news_banner .slide-pager.circule-button a.active {
    background-color: rgb(113, 113, 113) !important; 
    transform: scale(1.3);
}
   

/*商品專區 pre_order_block
#preorder 預購期展示
#shop 正式上線期展示
兩塊的樣式一樣，只是#order有右上類別選擇功能
*/
/*.pre_order{ display: none;}隱藏看效果*/
.store_block{ display: none;}/*隱藏看效果*/

.pre_order_block img{
    width:100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center; */
    display: block;
}

.index main .content .pre_order_block {
    /* width: 72.5%; */
    padding: var(--block-margins-ss);
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    position: relative;  
}
.index .content .pre_order_block .swiper a{
    display: flex; justify-content: center; align-items: center;
}
.index .pre_order_block .product_all {
    width: 97%;
    margin: 0 auto 1vw;
}
.index .pre_order_block .product_all .products{
    width: 100%; display: flex; align-items: center; justify-content: space-between;
   
}
.index .pre_order_block .product_all .products .product_detail{
    width: 24.5%;
}
.index .pre_order_block .title{ padding-left: 1.3rem;}

.index .pre_order_block .product_all .products .product_detail a {
    width: 100%;
    height: auto;
    margin: .2rem;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border-radius: 0.2rem;
    background: #fff;
}
.index .pre_order_block .product_detail.closed{ filter: grayscale(1);}


.index .pre_order_block .product_all .products .product_detail.closed a{
    pointer-events: none; /* 禁用鼠标事件 */
    cursor: default; /* 鼠标手型改为默认箭头 */
    color: inherit; /* 保持链接文字颜色 */
    text-decoration: none; /* 去掉下划线（可选） */
    position: relative;
}
.index .pre_order_block .product_detail.closed a::before{
    content: '';
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;    
    background-color: rgba(230, 230, 230, 0.5);
    z-index: 1;
    pointer-events: none;
}


.index .pre_order_block .product_all img {
    width: 100%;
    height: auto;
    padding: clamp(0.3rem, 3%, 0.5rem);
    border-radius: var(--border-radius-pic);
}
.index .pre_order_block .product_detail {
    position: relative;
    display: flex;
    align-items: stretch;
}
.index .pre_order_block .product_all .product_all{width: 100%;}
.index .pre_order_block .product_content {
    position: relative;
    /* background: linear-gradient(to bottom,  rgba(246,243,243,1) 0%,rgba(255,255,255,1) 50%); */
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0.4rem 0  0.8rem;
    justify-content: stretch;
    height: auto;  

}
.index .pre_order_block .product_content .product_keywords {
    color: var(--basic-gold);
    line-height: 1.7rem;
    font-size: 1.25rem;
    font-weight: 400;
}
.index .pre_order_block .product_content .product_name {
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.2rem,1vw,0.5rem);
    flex-wrap: wrap;
}
    

.index .pre_order_block .product_content .product_price{
    display: flex; align-items: center; justify-content: center;
    width: 80%; text-align: center; font-weight: 600;
    position: relative;  color:var(--basic-gold) ;
}
.index .pre_order_block .product_content .product_price::before {
    content: ''; position: absolute;
    display: block;
    width: 100%; /* 改为 100%，匹配 .product_content 的宽度 */
    height: 1px; /* 横线高度 */
    background-color: var(--basic-brightgra2); /* 横线颜色 */
    position: absolute; /* 使用绝对定位 */
    top: 10%; /* 根据需要调整到合适的位置 */
    left: 0; /* 从父容器的左边开始 */
}
.index .pre_order_block .product_price .currency {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 400;
    display: inline-block;
    padding: 0 .3rem  0.1rem 0.3rem;
    margin-top: .2rem;
    line-height: 1.4rem;
    border-radius: .2rem;
    background: linear-gradient(to bottom,  rgba(198,155,94,1) 0%,rgba(179,144,60,1) 100%);
    margin-right: 0.2rem;
}
.index .pre_order_block .product_price .price{
    font-size: 1.3rem;
}
.index .pre_order_block .product_price{
    padding-top: .5rem;
}


/* swiper左右按鈕設定 */
/* 初始狀態隱藏左右按鈕 */
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  /* pointer-events: none; 防止隱藏時還能被點擊 */
}

/* 滑鼠移入 swiper-container 時顯示按鈕 */
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}
.swiper-button-prev,
.swiper-button-next {
  transform: translateY(0); /* 可自訂動畫效果 */
}

/*facebook*//*X*/
.fb_block, .social_block {
    width: 100%;
    /* min-height: 500px; */
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 540px;
    padding-top: 4%;
    padding-bottom: 4%;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);

}
.fb_block .fb_embed, .social_block .social_embed{
display: flex; justify-content: center; align-items: center;
  margin: 0 auto; max-width: 540px;
    width: 90%;
}
   /* #x-widget-holder {
        width: 90%;
        max-width: 550px;
        margin: 20px auto;
        text-align: center;
    } */
.index .video-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* justify-content: center;
  padding: 1rem 0; */
}

.index .video-wrapper {
  flex: 1 1 480px;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}

.index .video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

    /*
.fb_embed {
    position: relative;
    width: 100%; 
    max-width: 540px;
    margin: 0 auto; 
    overflow: hidden; 
}

.fb_embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    border: none;
}

.fb_embed::before {
    content: '';
    display: block;
    padding-top: 92.59%;  高度比例 = 原始高度(500px) ÷ 原始宽度(540px) × 100% 
}
*/

/* 
讓 FB 的 Page Plugin 可以有 RWD 的效果
https://developers.facebook.com/docs/plugins/page-plugin
*/
.fb_block .fb_embed *{
    width: 100% !important;
}
/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

/* fancybox -------------------------------------------------*/
.fancybox-skin{
	background: none;
	padding: 0;
}
.fancybox-opened .fancybox-skin {
	padding: 0 !important;
    -webkit-box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
}
.fancybox-close {
    margin-top: -15px;
    right: 25px;
    width: 44px;
    height: 43px;
    background: url("../images/btn_close.png");
    transition: all 0.5s ease 0s;
    transform: scale(0.95);
}
.fancybox-close:hover{
	transform: rotate(-90deg) scale(1);
	filter: contrast(150%)
}
.fancybox-title-float-wrap .child{
	display: none;
}


/* 版頭大banner輪播 */
.index .visual{
    width: 100%; height: auto;
    position: relative;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}
.index .s{ display: none;}

.index .visual .swiper-slide{ 
    width: 100%;
    display: flex; justify-content: center;
}

.index .visual .swiper-slide a{
    width: 100%; height: auto;
    display: flex; justify-content: center; align-items: flex-start;
    overflow: hidden;
}
.index .visual .swiper-slide a:hover{ filter: brightness(1);}


/* news banner輪播 */
.index .first_box{ align-items: stretch;}

.index main .content .gmnote{
     display: flex; justify-content: stretch; flex-wrap: wrap;
     padding: var(--block-margins-ss); 
     padding-bottom: 0;
     background: #fff;
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
     position: relative;
     /* height: fit-content; */
 
    }
.index main .content .gmnote .top_box{ 
    width: 100%; padding: var(--block-margins-ss) }
.index main .content .gmnote .news_banner{
    width: 100%; display: flex; max-width: 310px;
margin: 0 auto;}


.index .news_banner, .index .news_banner .banner_all {
    flex: 1 1 auto;
    padding-bottom: 0.8rem;
}
.index .news_banner .banner_all .swiper-wrapper .swiper-slide a{ width: 100%; height: auto; display: block;}
.index .news_banner .banner_all .swiper-wrapper .swiper-slide a+a{ margin-top: .5rem;}
.index .news_banner .banner_all .swiper-wrapper .swiper-slide a img{ margin: 0;}

/* 各改版版本介紹輪播 */
.version .swiper-wrapper{ align-items: stretch;}
.version .swiper-slide{ height: auto;}


@media (max-width: 1500px) {
    .index main .content {
        width: 85%;
    }
    /* .index main .content .gmnote {
        width: 24%;
      }
      
    .index main .content .pre_order_block{
       width: 73%;
      }
       */
.index main .content .gmnote {
    width:clamp(23%,23vw,29%);
}
}

@media (max-width: 1200px) {
        /*每個主要內容區塊改為100%寬度*/
    .index main .all .content .first_box,
     .index main .all .content .second_box {
        flex-wrap: wrap;
         /* margin-bottom: clamp(1.5rem,7%,2rem)!important; */
    }
  .index main .content .gmnote {
    display: flex;
    width: 90%;
    margin: 0 auto;
    flex-wrap: nowrap;
    justify-content: stretch;
    /* max-width: fit-content; */
    gap: var(--block-margins-s);
    margin-bottom: 2.5%;
    /* box-shadow: none; */
}
      .index main .content .pre_order_block{
        width:100%; margin: 0 auto;
      }
          /*新聞區塊*/


 .index main .content .gmnote .top_box {
        width: 60%; padding-top: 0;
    }
.index main .content .gmnote .news_banner{
    width:  40%; max-width: 500px;
}
.index .gmnote .news_list ul .article_title {
    line-height: clamp(1.8rem,2.3vw,2.3rem);
    font-size: clamp(1.1rem,1.3vw,1.3rem);
}
/* .index .news_banner .banner_all .swiper-wrapper .swiper-slide a img {
    margin: 0 auto 0.5rem;
} */
 .index .gmnote .title {
    padding-bottom: var(--block-margins-ss);
}

}

@media (max-width: 1400px) {
 
 
.index main .content h1 {
    font-size: clamp(1.3rem,2vw,1.6rem);
}
/*產包區塊*/
.index .pre_order_block .product_content .product_keywords {
    line-height: clamp(1.3rem,1.6vw,1.8rem);
    font-size: clamp(1.2rem,1.5vw,1.4rem);
}
.index .pre_order_block .product_content .product_name{
    font-size:  clamp(1.1rem,1.5vw,1.5rem);
}
.index .pre_order_block .product_content .product_price .price{
    font-size:  clamp(0.9rem,1.5vw,1.3rem);
}
.index .pre_order_block .product_price .currency {
    font-size: clamp(0.7rem,1.5vw,0.9rem);
}
.index .gmnote .news_list ul .date {
    font-size: clamp(0.7rem,1.3vw,0.9rem);
}
/*visual區塊*/
.index main .visual .swiper-slide a{
    display: flex; align-items: center; justify-content: center;
}
.index .visual img {
    width: 100%;
    object-fit: cover;
    max-height: 50vh;
    min-height: 500px;
}
}
@media (min-width: 901px) {
    .index .pre_order_block .product_content{ flex: 1 1 auto; }
}
@media (max-width: 900px) {
 
    /*每個主要內容區塊改為100%寬度*/
    /* .index main .all .content .first_box,  */
    .index main .all .content .second_box {
        flex-wrap: wrap;
         margin-bottom: clamp(1.5rem,7%,2rem)!important;
        
    }
    /* .index main .content .gmnote {
        display: flex;
        width: 95%;
        margin: 0 auto;
        flex-wrap: nowrap;
        justify-content: stretch;
        max-width: fit-content;
        gap: 5%;
        margin-bottom: 2.5%;
    }
      .index main .content .pre_order_block{
        width:100%; margin: 0 auto;
      } */



}

@media (max-width: 767px) {
    /* .index main .content {
    width: 90%;
} */
        /*新聞區塊*/
            .index main .content h1 {
    margin-bottom: calc(var(--block-margins-ss) *1.5);
}

 .index main .content .gmnote .top_box {
        width: 50%;
    }
.index main .content .gmnote .news_banner{
    width:  48%; 
}
    .index .gmnote .news_list ul .article_title {
    line-height: clamp(1.5rem,1.8vw,1.8rem);
    font-size: clamp(0.95rem,1.1vw,1.1rem);
}

    .index .visual .s{ display: block; height: auto; min-height: initial;}
    .index .visual .l{ display: none;}


/*version區塊*/

    /*Version跳窗*/
    .version_pop .story_box .chapter {
        flex-wrap: wrap;
    }
    .version_pop .story_box .chapter .pic{
        width: 100%;
     }
     .version_pop .story_box .chapter .text{
        width: 100%; 
     }
     .version_pop .intro_box>.text {
        width: 95%;
    }
    .index main .version .cover .detail {
    width: auto;
    padding-top: clamp(8rem,30%,18rem); 
    }
    .index main .version .detail h3 {
        margin-top: 0;
    }
    .index .news_banner .slide-pager.circule-button {
    padding: 0; 
    }

    .index main .version .cover.v2 .detail .version_log img{
        width:  75%;
    }
    .index main .version .cover.v3 .detail .version_logo img{
        width:  75%; margin-bottom: 7%;
    }
    .index main .version .cover.v4 .detail .version_logo img{
        width:  90%;
    }
    .index main .version .cover.v5 .detail .version_logo img{
        width:  110%;
    }

    .index main .version .cover.v2{
        background:url(../images/version/02_s.webp) no-repeat center top / 150%;
        background-color: #000;
    }
    .index main .version .cover.v3{
        background:url(../images/version/03_s.webp) no-repeat center top /  130%;
        background-color: #000;
    }
    .index main .version .cover.v4{
        background:url(../images/version/04_s.webp) no-repeat center top /  150%;
        background-color: #000;
    }
    .index main .version .cover.v5{
        background:url(../images/version/05_s.webp) no-repeat center top /  150%;
        background-color: #000;
    }
    .index main .version .cover.v6{
        background:url(../images/version/06_s.webp) no-repeat center top /  150%;
        background-color: #000;
    }
    .index main .version .cover.v7{
        background:url(../images/version/07_s.webp) no-repeat center top /  100%;
        background-color: #000;
    }

/*產包區塊改2/2排*/

    .index .pre_order_block .product_all .products{
        width: 100%; display: flex; align-items: center; justify-content: space-between;
       
    }
    .index .pre_order_block .product_all .products .product_detail{
        width: 24.5%;
    }


}

@media (min-width: 631px){
    /* facebook & X */
    .index main .all .content .second_box{
      --social-size: 48.5%;
      --max-size:calc(500px + var(--block-padding) * 2);
    }
  
  }


@media (max-width: 630px) {
/*新聞區塊*/
.index main .content .gmnote {
    box-shadow:none;
}
   
    /*社群區塊改滿版*/
        .index main .content .facebook, .index main .content .social {
            width: 95%; margin: 0 auto;
    }

    .index main .content .gmnote {
        flex-wrap: wrap;
    }
    .index main .content .gmnote .top_box{width: 95%; margin: 0 auto;}
    .index main .content .gmnote .news_banner {
        margin: 0 auto 5%;
    }

    .index main .content .gmnote {
        margin-bottom: 0;
        margin-top: clamp(1rem,10%,1.5rem);
        width: 85%;
    }
    .index .gmnote .top_box{
        width:  100%; 
    }
    .index .gmnote .news_banner{
        width:  100%;
    }
    .index .news_banner .banner_all .swiper-wrapper .swiper-slide a img {
        margin: 0 auto 0.5rem; width: 100%;
    }
    .index .gmnote .news_list ul {
        width: 100%;
        border-bottom: 1px dotted #e9e9e9;
    }


    /*文字大小調整*/
    .index .gmnote .news_list ul .article_title {
        font-size: clamp(0.9rem,3vw,1.15rem);
        padding: 1.2% 0;
    }
    .index main .content h1 {
    font-size: clamp(1.4rem,2vw,1.6rem);
    }
    .index .gmnote .news_list ul .date {
    font-size: clamp(0.8rem,1.3vw,1.1rem);
    }
    .index main .version .detail h1 {
        font-size: clamp( 2rem,4vw,2.7rem);
        margin-bottom: 0.7rem;
    }

    .index .pre_order_block .product_content .product_keywords {
        display: block; text-align: center;
        margin: 0 auto;
        font-size: clamp(1.3rem,2vw,1.5rem);
        line-height: clamp(1.8rem,2vw,2.5rem);
    }
    .index .pre_order_block .product_content .product_keywords span{
        display: block;
    }
    .index .pre_order_block .product_content .product_name {
        font-size: clamp(1.4rem,2.5vw,2rem);
        line-height: clamp(2rem,5vw,3.8rem);
    }
    .index .pre_order_block .product_price .currency {
        font-size: clamp(0.9rem,2vw,1.2rem);
    }
    .index .pre_order_block .product_content .product_price .price {
        font-size: clamp(1.2rem,4vw,1.8rem);
    }
    .index .pre_order_block .product_all .products{ max-height: 100vh;}

    /*預購產包加上原繳內縮白邊*/
.index .pre_order_block .product_all img {
    padding: clamp(0.3rem, 3%, 0.7rem);
}
}



@media (max-width: 450px) {

    .index main .content {
    width: 88%;
}
.index main .content .gmnote .top_box {
    width: 100%;
}
    .index main .visual .swiper-wrapper .swiper-slide picture img {
        min-height: auto;
    }

    .index main .version {
        width: 100%;
        height: auto;
        position: relative;
        padding-bottom: 2rem;
        background-color: black;
    }
    .index main .content h1 {
        font-size: clamp(1.2rem,4vw,1.4rem);
    }
    .index main .version .detail h1 {
        font-size: clamp( 1.5rem,6vw,2rem);
    }
    .index main .version .detail h2 {
        font-size: clamp( 1.3rem,6vw,2.2rem);
        font-weight: 400;
        line-height: 1.8rem;
    }
    .index main .version .detail h3 {
        font-size: clamp( 0.9rem,5vw,1.1rem);
        font-weight: 400;
        line-height: 1.5rem;
        margin-top: 3%;
    }
    .index main .version .detail p {
        width: 90%; text-align: left; text-align: justify;
        font-size: clamp(0.8rem, 0.9vw, 0.9rem);
        margin: 1% auto 2%;
        line-height: clamp(1.8rem, 3vw, 2rem);
    }
    .index main .version .detail>.text_box span{
        display: inline; 
    }
    .index main .version .cover .detail .version_logo {
        width: 90%;
    }
    .version .slide-pager.circule-button {
        gap: clamp(1rem,5%,1.5rem);
    }
    .version .slide-pager.circule-button a {
        width: 0.85rem;
        height: 0.85rem;
    }

    .index main .content .gmnote {
        margin-top: clamp(0rem,5%,0.5rem);
    }
    .index main .content .gmnote .news_banner {
    margin-bottom: 0;
}
}

@media (max-width: 430px){
    .index .pre_order_block .product_all .products .product_detail a{ margin: 1vw !important;}

}

@media (max-width: 385px){
    .index .pre_order_block .product_all .products{ width: fit-content !important; height: fit-content;}
  
    .index .pre_order_block .product_all .products .product_detail{ height: 50% !important; /* align-items: center; */}
  
    /* .index .pre_order_block .product_all .products .product_detail a{ height: 100%;} */
    .index .pre_order_block .product_content{ height: 100%;}
    .index .pre_order_block .product_content .product_name{ flex: 1 1 auto; }

}


@media (max-width: 380px) {

.index .pre_order_block .product_content .product_keywords {
display: block; text-align: center;
 margin: 0 auto;
font-size: clamp(1rem,4vw,1.2rem);
line-height: clamp(1.2rem,4.2vw,1.5rem);
}
.index .pre_order_block .product_content .product_keywords span{
display: block;
}
.index .pre_order_block .product_content .product_name {
    font-size: clamp(.8rem,5vw,1.5rem);
    line-height: clamp(1rem,5.5vw,2rem);
}
.index .pre_order_block .product_price .currency {
font-size: clamp(0.7rem,2vw,1.2rem);
}
.index .pre_order_block .product_content .product_price .price {
font-size: clamp(0.8rem,4vw,2.5rem);
}

}



.index .news_banner .swiper-pagination {
    bottom: 0;
    height: 1.3rem;
}
@media (max-width: 767px) {
    /*version區塊*/
    .index .visual .s{ width: 100%; height: auto; min-height: initial; max-height: initial;}
}