@charset "utf-8";
.bold{font-weight: 600;}
button.disable{
    opacity: 0.6;
    pointer-events: none;
}
  
.hide{
   display: none;
}
.retainer main .all .content{
    max-width: 1920px;
    font-size: calc(var(--normal-txt-size)*1.05);
    line-height: clamp(1.75rem,2.5vw,2.5rem);
}

.inside_pages.retainer main .all .content .header, .retainer>main>.all>.content>.title{
    max-width: 1200px;
    margin: 0 auto;
}
.retainer>main>.all>.content>.title{
    display: flex; justify-content: center;
    padding: var(--block-margins-s) var(--block-margins-ss) ;
}

.retainer main section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    margin-top: var(--block-margins-ss);
    margin-bottom: var(--block-margins-s);
}
.retainer main section:last-child {margin-bottom: 0;}
.retainer main section .txt_box {
    padding: var(--block-margins-s) var(--block-margins-m);
    position: relative;
    /* border-bottom: var(--border-bright-gray); */
    width: 900px;
    margin: 0 auto;
}

.retainer main section:last-child .txt_box {
    border-bottom: none;
    padding-bottom: 0;
}
/* 角色圖片*/

section .role_box {
    width: 100%;
    /* position: absolute; */
    left: 0;
    top: 0;
    height: auto;
}

section .role img {
    width: 100%;
    height: auto;
    display: block;
}

section .role_box .role {
    position: absolute;
    /* transition: all 0.2s ease-in; */
}

.read_first .role {

    width:clamp(150px,10.5vw,235px);
    aspect-ratio: 245 / 659;
    top:5%;
    right: 4.5%;
}

.charge .role {
    width: clamp(240px,17.5vw,360px);
    aspect-ratio: 360 / 855;
    top: 7rem;
    left:-2.8%;
}

.service .role {
    width: clamp(220px,16vw,358px);
    aspect-ratio: 358 / 952;
    top: 10rem;
    right: 0;
}


.retainer main section .content_box {
    width: 100%; max-width: 800px;
    padding: 0 var(--block-margins-ss) var(--block-margins-ss) var(--block-margins-ss);

}
.retainer main section .content_box>div{
max-width: 750px;
}
.retainer main section.read_first .title_name h1 {
    color: var(--basic-gold);
}

.retainer main .title_name span {
    display: inline-block;
    line-height: 1.5;
}

.retainer main section.read_first .title_name .title_icon svg {
    mask-image: url(../images/svg/notice.svg);
    mask-size: 100% 100%;
}

.retainer main section.charge .title_name .title_icon svg {
    mask-image: url(../images/svg/charge.svg);
    mask-size: 100% 100%;
}

.retainer .content_box {
    width: 100%;
    margin: 0 auto;
}

/*收費說明表格*/
.retainer .content_box .list {
    width: 100%;
    max-width: 750px;
    /* 可依需求調整 */
    margin: var(--block-margins-ss) auto;
    border: var(--border-bright-gray);
    line-height: 1.5;
    min-height: auto;

}

.inside_pages.retainer .all .content .content_box .list .item>div {
    padding: var(--block-margins-ss);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.item span {
    display: inline-block;
}

.content_box .list .item_title,
.item {
    display: flex;
    border-bottom: var(--border-bright-gray);
}

.item_title {
    font-weight: bold;
    background-color: var(--form-title-bg);
}

.item_title .item_name,
.item_title .price,
.item .item_name,
.item .price,
.item_title .options,
.item .options {
    width: 49%;
    text-align: center;
    padding: var(--block-margins-ss) 0;
    box-sizing: border-box;
}

.content_box .list .item {
    background: #fff;
}

.inside_pages.retainer .all .content .content_box .list .item:last-child {
    border-bottom: none;
}

/*注意事項*/

.retainer main .content_box ul {
    margin: var(--block-margins-m) auto var(--block-margins-m);
    padding: 0 var(--block-margins-s);
}

.retainer.step2 main .content_box .notice_list {
    width: fit-content;
}
.retainer main .service .content_box ul.notice_list {
       margin: 0 auto var(--block-margins-m);
}

.retainer main .content_box ul.notice_list li {
    margin-bottom: calc(var(--block-margins-ss)*1.2);
    text-indent: -1.2rem;
}


.retainer main .content_box ul.notice_list li::before {
    content: '';
    display: inline-block;
    width: clamp(0.7rem, 1vw, 0.8rem);
    aspect-ratio: 1 / 1;
    margin-right: clamp(0.2rem, 1vw, 0.5rem);
    background-color: var(--gray01);
    -webkit-mask-image: url('../images/svg/star.svg');
    mask-image: url('../images/svg/star.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

.content_box .notice_list li .link {
    color: var(--basic-gold);
    text-decoration: underline;
    margin: 0 calc(var(--block-margins-ss)*0.3);
}

/*人數編輯區塊*/
.retainer main .service .edit_box {
    width: 100%;
    border: var(--border-bright-gray);
    padding:calc(var(--block-margins-m)*1.1) var(--block-margins-m) calc(var(--block-margins-m)*1.3);
    margin: 0 auto;
}

.retainer main .service .edit_box .total {
    width: 100%; padding: var(--block-margins-ss);
}

.retainer main .service .edit_box .total ul {
    width: 100%;
    max-width: 620px;
    display: flex;
    justify-content: center;
    align-items: center; flex-wrap: wrap;
    margin: 0 auto; padding: 0;
    /* gap: calc(var(--block-margins-ss)*0.5) ; */
}

.retainer main .service .edit_box .total ul li {
    width: clamp(40px, 4vw, 55px);
    aspect-ratio: 1 / 1;
    filter: grayscale(1) brightness(1.5);
    background: var(--gold-gradient);
    mask-image: url('../images/svg/retainer.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('../images/svg/retainer.svg');
    /* Safari 支援 */
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    transition: all 0.5s ease;
}

.retainer main .service .edit_box .total ul li.on {
    filter: grayscale(0) brightness(1.1);
}


.retainer main .service .edit_box .calculate {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.retainer main .service .edit_box .calculate .calculate_inner {
    width: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--block-margins-s);
    letter-spacing: 0.05rem;
    font-size: calc(var(--normal-txt-size)*1.15);
    padding: var(--block-margins-ss);
    margin: 0 auto;
}

.retainer main .service .edit_box .calculate p span{
    display: inline-block; 
}
.retainer main .service .edit_box .calculate p span.current_num,
.retainer main .service .edit_box .calculate p span.new_num
 {
    font-size:  calc(var(--normal-txt-size)*1.6) ;
}

.retainer main .service .edit_box .button_box {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--block-margins-ss)*1.5);
    font-weight: 600;

}

.retainer main .service .edit_box .button_box .button {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top:calc(var(--block-margins-s)*0.6);
    min-width: auto;
    padding: var(--block-margins-ss) var(--block-margins-s);
}
 
.retainer main .service .edit_box .button_box .button::before {
  content: "";
  display: block;
  width: clamp(40px, 4vw, 50px);
  height: clamp(40px, 4vw, 50px);
  background: #fff;
  mask-image: url(../images/svg/add_retainer.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(../images/svg/add_retainer.svg);
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
   transition: all 0.3s ease;
}

.retainer main .service .edit_box .button_box .button.nag::before {
  background: linear-gradient(to bottom, #aeaeae, #6b6b6b);
  mask-image: url(../images/svg/reduce_retainer.svg);
  -webkit-mask-image: url(../images/svg/reduce_retainer.svg);
}
.retainer main .service .edit_box .button_box .button p span{
    display: inline-block;
}

/*付款方式*/
 .retainer main .form {
    box-shadow: var(--box-shadow-light-form);
    margin: 5% auto;
    background: var(--form-bg);
}
 .retainer main .service .form .from_content {
    width: 90%;
    font-size: var(--normal-txt-size);
    margin: 0 auto;
    padding: 3% 0;
    display: flex; align-items: center; gap: var(--block-margins-ss);
}

.retainer main .service .form .from_content select{
min-width: auto; width: 45%;  cursor: pointer;
}


/*更新按鈕*/

 .retainer main .all .content .btn.update.icon {
    display: flex; padding: 0; border-radius: 0;
    align-items: center;
    justify-content: center;
    width: clamp(15px, 6vw, 23px);
    height: clamp(15px, 6vw, 23px);
    aspect-ratio: 1/1;
    cursor: pointer;
    background: none;
}
 .retainer main .all .content .btn.update.icon img{
    width: 100%; height: auto; 
 }

/*發票區塊*/

.retainer .invoice_block .invoice_detail .option{
    width: 100%; aspect-ratio:unset; text-align: left; justify-content: flex-start;
    border: none; box-shadow: none; background: none; font-family: unset;
    margin: 0;
}
.retainer .invoice_block{
    box-shadow: var(--box-shadow-light-form);
    margin: 0 auto 5%;
    background: var(--form-bg);
}

.retainer .agreement_block {
    padding: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: fit-content;
    font-size: var(--normal-txt-size);
    margin: var(--block-margins-s) auto;
}
   .retainer main .paper_info > ul{
       padding: 0;
    }


/*按鈕設置*/
.retainer .button_group {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--block-margins-s);
}

.retainer main .button {
    /* padding: calc(var(--block-margins-ss) *1.2) var(--block-margins-ss); */
    margin-top: var(--block-margins-ss);
    border-radius: var(--border-radius-button);
    width: clamp(200px,40%,300px);
    color: #fff;
    font-size: calc(var(--normal-txt-size) *1.1);
    font-weight: 500;
    background: linear-gradient(to bottom, #cea32d, #946d1b);
    text-align: center;
}
.retainer main .button a{
    padding: calc(var(--block-margins-ss) *1.2) var(--block-margins-ss);
}
.retainer main .button.crystal {
    background:var(--blue-gradient);
}


/*retainer step2*/

.retainer.step2 .detail_block{
        border: var(--border-bright-gray);
        max-width: 650px;
        margin: 0 auto;
}

.retainer.step2 .detail_block .from_content, .retainer.step3 .detail_block .from_content{
      padding:calc(var(--block-margins-s) *1.2) calc(var(--block-margins-s) *1.5) ;
}
/* .retainer.step3 .detail_block .from_content p{
    margin-bottom: var(--block-margins-s);
} */
.retainer.step2 main section .title_name p{
    text-align: center; margin-top: var(--block-margins-ss);
}

.retainer.step2 .detail_block .from_content ul{
    margin: 0 auto; padding: 0;
}
.retainer .detail_block .from_content{
    font-size: var(--normal-txt-size);
}    

.retainer .detail_block .from_content ul li {
    width: 100%;
    padding: 0.1rem 0;
    display: flex;
    justify-content: space-between;
}
.retainer.step2 .detail_block .from_content .amount{
    margin-top: var(--block-margins-ss); font-weight: 600;
    border-top: var(--border-bright-gray);
    padding-top: var(--block-margins-ss);
}
/*retainer step3*/

.retainer.step3 .detail_block .from_content p .notice{
    display: inline-block; font-weight: 500;  font-size:calc( var(--normal-txt-size) *1.3);
}
.retainer .space{
    padding-left: calc(var(--block-margins-ss)*.6);
    padding-right: calc(var(--block-margins-ss)*.6);
}

@media (max-width: 1700px) {
.charge .role {
    left:1%;
}

}

@media (max-width: 1500px) {
    .retainer main section {
        width: 95%;
    }

    .retainer main section .txt_box {
        width: 75%;
    }


.retainer main section .content_box>div, .retainer .content_box .list {
    max-width: 45vw;
}


}
@media (max-width: 1300px) {
.read_first .role {

    right: -2%;
}
.charge .role {
    left:-6%;
}
.service .role {
    right: -7%;
}
}

@media (max-width: 1023px) {
      section .role_box .role {
        display: none;
    }
 .retainer main section .txt_box {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .retainer .content_box .list {
        width: 100%;
    }
.retainer main section .content_box>div, .retainer .content_box .list{
    max-width: 80%;
}
}


@media (max-width: 900px) {
    .retainer main .all .content {
        font-size: var(--normal-txt-size);
    }

    .retainer main section .txt_box {
        width: 100%;
    }
}
@media (max-width: 670px) {
 .retainer main .service .edit_box .calculate .calculate_inner {
    flex-direction: column;      
    gap: 0;
}
}

@media (max-width: 600px) {
.retainer main .service .edit_box {
    border: var(--border-bright-gray);
    padding: calc(var(--block-margins-s)*1.5) var(--block-margins-s);
}
.retainer .title_name .title_icon {
    margin-bottom: var(--block-margins-ss) !important;
}

.retainer main .service .form .from_content {
  flex-wrap: wrap; justify-content: center; width: 70%;
}

.retainer main .service .form .from_content select{
 width:100%;
}
.retainer main section .content_box>div, .retainer .content_box .list {
    max-width: 100%;
}
.retainer main .service .edit_box .calculate .calculate_inner {
    font-size: calc(var(--normal-txt-size)*1.05);
}
}

@media (max-width: 500px) {
    .retainer main section .content_box {
        padding: 0;
    }

    .content_box ul {
        padding: 0 var(--block-margins-ss) 0 var(--block-margins-s);
    }
.retainer .content_box .list {
    margin: var(--block-margins-s) auto var(--block-margins-ss);
}
.retainer main .all .content {
    line-height: clamp(1.75rem,3vw,1.8rem);
}

}
@media (max-width: 450px) {
    .retainer main .service .form .from_content {
   width: 90%;
}
.retainer main .service .edit_box .calculate {
    gap: 0 ;
}
.retainer main .service .edit_box .button_box {
    gap: 10px;
}

  .retainer .button_group {
gap:calc(var(--block-margins-ss)*.7) ;
}
.retainer main .button {
    font-size: calc(var(--normal-txt-size) *1.1);
}

.retainer main section .title_name {
    padding: calc(var(--block-margins-s)*1.5) calc(var(--block-margins-s)*1.5) calc(var(--block-margins-s)*1);
}
.retainer main section .title_name h3{
    margin-bottom: calc( var(--block-margins-ss)*1.1); 
}
.retainer main section .title_name h1 span{
   line-height: 1;
}
}

@media (max-width: 415px) {
.retainer .detail_block .from_content br{
    display: none;
}

.retainer.step3 .detail_block .from_content {
    padding: var(--block-margins-s) calc(var(--block-margins-s) *1.2);
}
}

@media (max-width: 400px) {
    .retainer main .title_name h1 {
        font-size: clamp(1.3rem, calc(var(--option-width) * 0.06), 1.8rem);
        letter-spacing: 1px;
    }

    .retainer main .title_name h3 {
        line-height: 1.5;
    }
}

@media (max-width: 340px) {

    .retainer .button_group {
      flex-wrap: wrap;
}
 .retainer .button_group .button {
    width: clamp(120px,60%,200px);
 }

    .retainer main .service .form .from_content {
   width: 93%;
}

}
@media (max-width: 300px) {
.retainer main section .title_name h1 span{
   display: inline;
}
}
@media (max-width: 250px) {
    .retainer .button_group .button{
     width: 100%;
}
}