@charset "utf-8";
/*水晶商城所有基礎通用設定*/

* {
    -webkit-box-sizing: border-box;
    /*Safari Chrome*/
    -moz-box-sizing: border-box;
    /*Firefox*/
    box-sizing: border-box;
}
::selection{background: var(--blue);}
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-gray);
    /* text-align: center; line-height: 2rem; font-weight: 400;letter-spacing:normal; */
}
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* main {width: 100%;
    flex: 1; 
    display: flex;
    flex-direction: column;
} */
:root {
    --gray01: rgb(59, 59, 59);
    /*文字基本顏色*/
    --gray02: rgb(89, 89, 89);
    /*淡一階的文字顏色*/
    --gray03: rgb(175, 175, 175);
    /*細細的襯線用色*/
    --gray04: rgb(219, 219, 219);
    --gray05: rgb(246, 246, 246);


    --crumbs-gray: rgb(48, 48, 48);
    /*麵包屑細字用色*/
    --input-gray: rgb(143, 143, 143);
    /*表單填寫框*/
    --blue: rgb(7, 106, 203);
    --red: rgb(211, 73, 73);


    --basic-gold: rgb(168, 123, 0);

    --border-radius-ss: 3px;
    --border-radius-s: 5px;
    --border-radius-m: 15px;
    --border-radius-l: 2rem;
    --border-style: 1px solid var(--gray04);

    --bold-font: 500;
    --box-shadow-light: 0px 0px 3px rgba(0, 0, 0, 0.22);
    --box-shadow-light-form: 0px 1px 3px rgba(0, 0, 0, 0.15);


    --border-wt-style: clamp(0.3rem, 1.2vw, 0.5rem) solid #fff;
    /*白色相片邊框*/
    --border-wt-style-s: clamp(0.1rem, 0.25vw, 0.25rem) solid #fff;
    /*白色相片邊框*/

    --gray-gradient: linear-gradient(to bottom, #ebe9e6 0%, #ffffff 50%);
    /*商品淺灰色背景*/

    /*按鈕顏色設定*/
    --gold-gradient: linear-gradient(to bottom, #cea32d, #946d1b);
    /*一般金色按鈕*/
    --blue-gradient: linear-gradient(to bottom, #4c8ccd 35%, #375bad 100%);
    --red-gradient: linear-gradient(to bottom, #e55c5c 0%, #a73e1e 100%);
    --light-blue-gradient: linear-gradient(to bottom, #e7f0fc 0%, #92b8e9 100%);
    --gray-gradient: linear-gradient(to bottom, #a8a8a8 0%, #696565 100%);


    --blue-txt-gradient: linear-gradient(to bottom, #084599 0%, #1272d1 80%);
    /*基本的漸層藍色文字*/
    --blue-txt-gradient-reverse: linear-gradient(to top, #084599 0%, #1272d1 80%);
    --gray-txt-gradient: linear-gradient(to bottom, #333333 0%, #525252 80%);
    /*基本的漸層藍色文字*/


    --step-bg: linear-gradient(to bottom, #d6d6d6 50%,  #ececec 100%);
    --form-bg: linear-gradient(to bottom, #fbfbfb 50%, #f3f3f3 100%);
    /*表單一般淺色背景*/
    --form-title-bg: linear-gradient(to bottom, #868686 50%, #9e9e9e 100%);
    /*表單一般標題背景*/
    --form-calculate-bg: linear-gradient(to top, #e4f2fe 0%, #cedffb 100%);
    /*結算金額淺藍色欄位背景*/

    --option-width: 23vw;
    /*假定option的寬度，隨著大版小版再做其他設定*/

    --normal-btn-size: 1.5rem;
    --step--txt-size: 1.25rem;
    /*文字在1300px寬度以上為此值，小於1300~767之間再定義，小於767再定義*/
    --normal-txt-size: 1.15rem;
    --normal-option-size: 1rem;
    --hint-txt-size: 1rem;
    --largest-title-size: calc(var(--normal-txt-size) * 1.3);
    --header-title-size: calc(var(--normal-btn-size) * 1.25);
    --select-min-width:230px;
 


    --line-height-p:clamp(2.2rem,2.8vw, 2.6rem);

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



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

.svg, svg {
    display: flex; align-items: center; justify-content: center;
    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: 20px !important;
    right: 40px !important;
}

/* main .all>.content {
    padding: 3% 0 4% 0;
} */
main .all>.content {
    padding: clamp(10rem,6vw,13rem) 0 4% 0;
}

.blue {
    color: var(--blue) !important;
}

.red {
    color: var(--red) !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;
}
.btn_block>.btn>a {
    padding: calc((var(--block-margins-ss)) * 1.2) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn_block{width: 100%; display: flex; justify-content: center; gap: var(--block-margins-ss);}
.btn_block .btn {
    width: clamp(180px,30%,300px);
    color: #fff;
    margin-bottom: 1rem;
    border-radius: var(--border-radius-s);
    font-size: var(--normal-btn-size); font-weight: 600;  padding:0  calc((var(--block-margins-ss)) * 1.2);
}
.btn_block .btn a {display: flex; justify-content: center; align-items: center;}
.btn_block .btn a span{  line-height: 1; /* 防止行高影響對齊 */}
.btn_block .btn a svg {
    display: block; /* 移除預設的 inline-block 行為，防止基線對齊問題 */
    height: 1em; /* 調整 SVG 高度與文字匹配 */
    width: 1em; /* 視需求調整寬度 */
}

/* 四種顏色的按鈕 */
.special.btn{background: var(--gold-gradient);}
.quick.btn{background: var(--red-gradient);}
.normal.btn{background: var(--blue-gradient);}
.secondary.btn{background: var(--light-blue-gradient); color: var(--blue);}



/*前面有水晶的元素套上.price*/
.price>span:first-child{
    display: flex; align-items: center; 
    color: var(--blue);
}
.price>span:first-child::before{
    content: ""; 
    display: inline-block;
    width: clamp( 0.9rem,1.25vw, 1.25rem);
    aspect-ratio: 155/200;
    background: url("../images/common/crystal.png") no-repeat center / contain;
    margin-right: 5px; /* 可調整圖片與文字的間距 */
    vertical-align: middle;
    transform: translateY(0.1rem); 
}

/*進用狀態 的按鈕*/
.btn.disable {
    background: var(--gray-gradient) !important;
    opacity: 0.5;
}

.btn.disable a,
.btn.disable {
    pointer-events: none !important;
}


main {
    font-weight: 400;
}

a {
    cursor: pointer;
}

/*按鈕統一效果*/
main a, main .btn,
main input[type="button"],
main input[type="submit"] {
    transition: filter 0.1s ease;
}

main a:hover, main .btn:hover,
main input[type="button"]:hover,
main input[type="submit"]:hover {
    filter: brightness(1.08);
    /* 提高亮度 */
}

main input {
    color: var(--input-gray);
    font-size: var(--normal-option-size);
}
main select {
    font-size: var(--normal-txt-size);
}


main .all>.content a {
    width: 100%;
    height: 100%;
    display: block;
}

/*main主要內容區塊*/
main {
    width: 100%;
    margin: 0 auto;
    font-size: var(--normal-txt-size);
}

main .all {
    max-width: 1500px;
    margin: 0 auto;
}
.all>.content {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/*內頁版頭類型設定*/

.page main .all>.content .header {
    margin-bottom: clamp(0.2rem, 1.8vw, 1.8rem);
    padding:var(--block-margins-ss) 0;
}
.page main .all>.content .header p {
    font-size: calc((var(--normal-txt-size)) * 1);
    font-weight: 350;
    display: flex;
    align-items: center;
    /* width: 100%; */
    flex: 1;
}
.page main .all>.content .header .notice_block p {
    justify-content: flex-end;
}
.page main .all>.content .header.line {/*下方有襯線的header*/
   
    border-bottom: 1px solid;
    border-color: var(--gray03);
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
}

.page main .all>.content .header h1 {
    font-size: var(--header-title-size);
    font-weight: 350;
    align-self: flex-end;
    margin-bottom: calc(var(--block-margins-ss) * 1.3);
}

/*麵包屑*/
.page main .all>.content .header .bread_crumbs {
    display: flex;
    font-size: calc(var(--normal-option-size) * 0.95);
    z-index: 50;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.page main .all>.content .header .bread_crumbs li {
    width: auto;
    align-items: center;
    display: flex;
}

.page main .all>.content .header .bread_crumbs a {
    display: block;
    width: 100%;
    height: 100%;
}

.page main .all>.content .header h1,
.page main .all>.content .header .bread_crumbs {
    line-height: 1;
    vertical-align: bottom;
}

.page main>.all>.content>.header>ul>li::before {
    padding-right: 4px;
    padding-left: 4px;
    border-color: var(--basic-gray);
    content: ">";
    pointer-events: none;
}

.page main>.all>.content>.header>ul>li:nth-of-type(1):before {
    padding-left: 0;
    content: "";
}

.page main>.all>.content>.header>ul>li>a>span {

    mask-image: url("../../images/svg/header/07-3_crystal.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    background-color: var(--gray01);
    width: clamp(20px, 5vw, 23px);
    height:  clamp(20px, 5vw, 23px);
    display: block;
    text-indent: -9999px;

}

.page main .all>.content .header .bread_crumbs li a {
    position: relative;
}

.page main .all>.content .header .bread_crumbs li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    /* 控制底線距離文字的間距 */
    width: 100%;
    height: 1px;
    /* 底線厚度 */
    background-color: transparent;
    /* 預設透明 */
    transition: all 0.1s;
}

@media (hover) {

    .page main .all>.content .header .bread_crumbs li:not(:first-child) a:hover::after {
        background-color: var(--gray02);
        /* 滑鼠懸停時顯示底線 */
    }


}

/*核取方塊樣式設定*/
/*文字input樣式設定*/
main .checkbox input {
    width: 18px;
    aspect-ratio: 1/1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: var(--border-style);
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 0.5rem;
    flex: 0 0 18px; transform: translateY(0.2rem);
}

main .checkbox {
    display: flex;
    align-items: center;
}

main .checkbox input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

.page select{
    min-width: var(--select-min-width);
    width: max-content; /* 根據內容自適應寬度 */
    max-width: 350px; /* 你可以保留這個設定，如果希望限制最大寬度 */
    margin: var(--block-margins-ss) var(--block-margins-ss) var(--block-margins-ss) 0;
    padding: calc((var(--block-margins-ss)) * 0.65);
}
select ,main>.all .text_input_box input {
    width: 100%; 
    text-align: left;
    font-size: var(--normal-option-size);
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    color: var(--gray02);
    background-color: #fff;
    border: var(--border-style);
    box-sizing: border-box;
    margin: auto auto;
    line-height: 1;
}
select{
    padding: calc((var(--block-margins-ss)) * 0.65);
    background-image: url('../../images/svg/v.svg');
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 0.8rem;
    cursor: pointer;

}
.text_input_box input{
    padding: calc((var(--block-margins-ss)) * 0.3) calc((var(--block-margins-ss)) * 0.5);

}

select option {
    font-size: var(--normal-option-size);
}

select option:checked {
    color:  #fff;
    background-color: var(--blue);
}


/*錯誤提示*/
.error{
    color: var(--red); font-size: var(--hint-txt-size); margin: var(--block-margins-s) 0;
}

/*頁面注意提醒*/
 .notice_block{
    width: 100%; display: flex; justify-content: flex-end;
    /* margin-bottom:var(--list-item-padding); */
  }
  .notice_block p::before {
    content: "";
    display: inline-block;
    height: 100%;
    background-color: var(--gray01);
    aspect-ratio: 1/1;
    mask-image: url("../../images/svg/notice.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    margin-right: 4px;
    /* vertical-align: middle; */
}
  .notice_block p{ align-items: center; justify-content: center;}


/*頁碼區塊設定*/

main .all .content .pagination {
    max-width: 500px;
    margin: 0 auto;
    margin-top: var(--block-margins-m);
    margin-bottom:var(--block-margins-m);

}

main .all .content .pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

main .all .content .pagination li {
    margin: 1% 1%;
    padding: 0.5%;
}

main>.all>.content .pagination li a {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 30px;
}

main>.all>.content .pagination .btn_page.on {
    background-color: var(--gray02);
    color: #fff;
}

@media (max-width:1299px) {
    :root {
        --normal-btn-size: clamp(1.2rem, 1.5vw, 1.5rem);
        --step--txt-size:clamp(1.2rem, 1.3vw, 1.3rem);
        --normal-txt-size: clamp(1.1rem, 1.2vw, 1.2rem);
        --normal-option-size: clamp(1rem, 1.2vw, 1.2rem);
        --hint-txt-size: clamp(.9rem, 1.1vw, 1.1rem);
    }
}
@media (max-width:1550px) {
.page main .all {
    width: 92%;
}
}

@media (max-width:1024px) {
main .all>.content {
    padding: clamp(1rem,3vw,3rem) 0 4% 0;
}
}
@media (max-width: 850px) {
    :root {
        --option-width: 60vw;
        /*假定option的寬度，調動後根據option的寬度為變化基準的問自大小或是寬度設定都會一起帶動*/
        --normal-btn-size: clamp(1.1rem, 1.6vw, 1.6rem);
        --normal-txt-size: clamp(1rem, 1.4vw, 1.1rem);
    }

}

@media (max-width: 600px) {
    :root {
    --step--txt-size:clamp(1.1rem, 1.2vw, 1.2rem);
}
/*核取方塊樣式設定*/
main .checkbox input {
    width: 15px;
    flex:1; 
}

}

@media (max-width:500px) {
    :root {
        --normal-btn-size: clamp(1.1rem, 1.3vw, 1.3rem);
        --normal-txt-size: clamp(0.95rem, 1.2vw, 1rem);
        --normal-option-size: clamp(0.9rem, 1.1vw, 1.1rem);
        --hint-txt-size: clamp(0.9rem, 1vw, 1rem);
        --normal-btn-size: clamp(1.1rem, 1.3vw, 1.3rem);
    }
   

}

@media (max-width: 450px) {
    :root {
        --option-width: 70vw;
        --block-margins-m: clamp(1rem, 2vw, 2rem);
        --step--txt-size:clamp(0.9rem, 0.95vw, 0.95rem);
        --normal-txt-size: clamp(0.9rem, 1vw, 0.95rem);


    }

}

@media (max-width: 320px) {


    :root {
        --option-width: 100vw;
        --normal-txt-size: clamp(0.85rem, .9vw, 0.9rem);
        --hint-txt-size: clamp(0.85rem, 1vw, 1rem);
        --normal-btn-size: clamp(0.95rem, 1.2vw, 1.2rem);
        --select-min-width:200px;

    }
}