/* ============================================================ */
/* 網頁設計 Q&A 頁  style_qa.css                                 */
/* ============================================================ */


.left_horizontal .leftListArea {
    /* margin-top: 0; */
}



.pageContent{
    position: relative;
    overflow: unset;
    padding-bottom: 0;
}

    .pageContent .page >.wrap{
        /* max-width: 100%;
        width: 100%; */
        /* margin-left: auto;
        margin-right: auto; */
    }



/* 在螢幕寬度大於1024時，套用這裡的特定樣式 */ 
@media screen and (min-width: 1024.1px) {

    .pageContent .page >.wrap{
        /* max-width: 100%;
        width: 100%; */
        /* margin-left: auto;
        margin-right: auto; */
    }

}





/* 在螢幕寬度大於990時，套用這裡的特定樣式 */
@media screen and (min-width: 990.1px) {

   /* .pageContent{
        position: relative;
        overflow: unset;
        padding-bottom: 0;
    }
    .pageContent::before{
        content: "";
        position: absolute;
        width: 100%;
        max-width: calc(100% - (1rem * 2));
        box-shadow: rgba(50, 50, 93, 0.05) 0px -79px 95px -20px, rgba(0, 0, 0, 0.1) 0px -40px 57px -30px;
        border-top-left-radius: clamp(0.521rem, 2.6vw, 3.125rem);
        border-top-right-radius: clamp(0.521rem, 2.6vw, 3.125rem);
        top: calc(clamp(1.354rem, 6.77vw, 8.125rem) * -1);
        height: clamp(1.354rem, 6.77vw, 8.125rem);
        left: 50%;
        transform: translateX(-50%);
    } */
 
}



.right_contentBg{
    display: flex;
    flex-direction: column;
    gap: calc(clamp(1rem, 0.6rem + 1vw, 1.75rem) * 3);
    /* padding: clamp(2rem, 3.5vw, 3.5rem) 0; */
}




/* ------------------------------------------------------------ */
/* Section 1：FAQ 手風琴                                          */
/* ------------------------------------------------------------ */

.qa_faqBg {
    display: flex;
    flex-direction: column;
    gap: calc(clamp(1rem, 0.6rem + 1vw, 1.75rem) * 2);
    width: 100%;
}

.qa_faq_group {
    width: 100%;
    /* max-width: 52rem; */
    /* max-width: 75rem; */
    margin: 0 auto;
}

.qa_group_title {
    /* display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.1875rem solid var(--primary_color);
    margin-bottom: 0; */
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 0.5rem + 0.7vw, 1.125rem);
    margin-bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem);
}

.qa_group_icon {
    /* width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center; */


    flex: 0 0 auto;
    width: clamp(2.5rem, 1.8rem + 1.5vw, 3.25rem); /* ~52px @1920 */
    aspect-ratio: 1;    
}

.qa_group_icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* .qa_group_title strong */
.qa_category {
    /* font-size: 1.0625rem;
    font-weight: 700;
    color: var(--third_color);
    line-height: 1.4; */
    padding: 0;
    margin: 0;
    /* font-family: var(--mandarin_font); */
    font-weight: 900;
    font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); /* ~36px @1920 */
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--third_color);
}

.qa_item_area {
    margin: 0;
    padding: 0;
    list-style-type : none;
    /* display: block; */
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.4rem + 0.6vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.qa_item {
    margin: 0;
    padding: 0;
    list-style-type : none;
    /* display: block; */
      display: flex;
    /* border-bottom: 1px solid var(--second_color); */
}








/* ---------- details：白卡，hover 浮起 ---------- */
.qa_item details {
  flex: 1 1 auto;
  background: #ffffff;
  border: 1px solid var(--second_color);
  border-radius: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem);
  box-shadow: 0 1px 2px rgba(28, 28, 32, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.qa_item details[open] {
  border-color: var(--sixth_color);
  box-shadow:
    0 2px 6px rgba(227, 6, 19, 0.05),
    0 14px 30px -16px rgba(28, 28, 32, 0.16);
}
.qa_item details:hover {
  border-color: var(--sixth_color);
}



/* details / summary 基礎重置 */
/* .qa_item details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 0;
    user-select: none;
}

.qa_item details > summary::-webkit-details-marker {
    display: none;
}

.qa_item details > summary::marker {
    content: '';
} */

.qa_item summary {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.3rem + 0.5vw, 0.875rem);
  padding: clamp(1rem, 0.7rem + 0.9vw, 1.5rem) clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.qa_item summary::-webkit-details-marker { display: none; }
.qa_item summary:focus-visible {
  outline: 2px solid var(--primary_light);
  outline-offset: 2px;
  border-radius: inherit;
}







/* .qa_q_num {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary_color);
    font-family: var(--foreign_font);
    min-width: 1.75rem;
    line-height: 1;
} */
.qa_q_num {
  min-width: calc(clamp(1.05rem, 0.8rem + 0.5vw, 1.375rem) * 3);
  flex: 0 0 auto;
  font-family: var(--foreign_font);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.8rem + 0.5vw, 1.375rem); /* ~22px @1920 */
  letter-spacing: 0.01em;
  color: var(--primary_color);
}
.qa_q_num::after {
  content: "：";
  margin-left: 0.05em;
  color: var(--fourth_color);
  font-family: var(--mandarin_font);
  font-weight: 500;
}




.qa_q_text {
    /* flex: 1;
    font-size: clamp(0.9375rem, 1vw, 1rem);
    font-weight: 500;
    color: var(--third_color);
    line-height: 1.5;
    transition: color 0.2s ease; */
  flex: 1 1 auto;
  font-family: var(--mandarin_font);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.82rem + 0.5vw, 1.375rem); /* ~22px @1920 */
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--third_color);
  text-wrap: pretty;
}

.qa_q_arrow {
    /* flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary_color);
    transition: transform 0.3s ease; */
      flex: 0 0 auto;
  position: relative;
  width: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
  height: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
  margin-left: clamp(0.5rem, 0.3rem + 0.4vw, 0.75rem);
}
.qa_q_arrow::before,
.qa_q_arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--primary_color);
  border-radius: 999px;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
/* 橫條 */
.qa_q_arrow::before {
  width: 100%;
  height: 2.5px;
  transform: translate(-50%, -50%);
}
/* 直條（展開時隱藏 → 變成減號） */
.qa_q_arrow::after {
  width: 2.5px;
  height: 100%;
  transform: translate(-50%, -50%);
}
.qa_item details[open] .qa_q_arrow::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* ---------- answer：回覆內容（grid 0fr→1fr 收合動畫） ---------- */
.qa_answer {
  /* 收合動畫：以 grid-rows 0fr → 1fr，容器為純 grid（不可加 overflow / padding） */
  padding: clamp(1rem, 0.7rem + 0.9vw, 1.5rem) clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.qa_item details[open] .qa_answer {
  grid-template-rows: 1fr;
}
/* grid 子項：負責裁切，min-height:0 才能被壓縮 */
.qa_answer_in {
  overflow: hidden;
  min-height: 0;
}
.qa_answer_in > p {
  margin: 0;
  padding-top: clamp(0.25rem, 0.15rem + 0.25vw, 0.5rem);
  padding-bottom: clamp(1rem, 0.7rem + 0.9vw, 1.5rem);
  padding-right: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  /* 與問題文字對齊：跳過 Q 編號寬度 */
  padding-left: calc(clamp(1.25rem, 0.8rem + 1.2vw, 2rem) + clamp(1.05rem, 0.8rem + 0.5vw, 1.375rem) * 1.6 + clamp(0.5rem, 0.3rem + 0.5vw, 0.875rem));
  font-family: var(--mandarin_font);
  font-weight: 400;
  font-size: clamp(0.95rem, 0.78rem + 0.42vw, 1.1875rem); /* ~19px @1920 */
  letter-spacing: 0.01em;
  line-height: 1.75;
  color: var(--fourth_color);
  text-wrap: pretty;
}






/* 在螢幕寬度大於1024時，套用這裡的特定樣式 */ 
@media screen and (min-width: 1024.1px) {

    .qa_faqBg {
        /* width: 90%; */
        /* max-width: 73.75rem; */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }

}





@media (max-width: 1024px) {

    .qa_faqBg {
        /* margin-left: auto; */
        /* margin-right: auto; */
        /* width: 90%; */
    }

}


@media (max-width: 768x) {
  .qa_answer_in>p {
      padding-left: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  }

  .qa_q_text {
      font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa_item details,
  .qa_answer,
  .qa_q_arrow::before,
  .qa_q_arrow::after {
    transition: none;
  }
}

















/* .qa_q_arrow::before {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.125rem solid var(--primary_color);
    border-bottom: 0.125rem solid var(--primary_color);
    transform: rotate(45deg);
    margin-top: -0.25rem;
}

.qa_item details[open] .qa_q_arrow {
    transform: rotate(180deg);
}

.qa_item details[open] > summary .qa_q_text {
    color: var(--primary_color);
}

.qa_answer {
    padding: 0 0 1.375rem 2.5rem;
    animation: qa-answer-in 0.25s ease;
}

.qa_answer p {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--fourth_color);
    line-height: 1.75;
    margin: 0;
} 

@keyframes qa-answer-in {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qa_answer {
        animation: none;
    }
    .qa_q_arrow {
        transition: none;
    }
}

@media (max-width: 990px) {
    .qa_faq_group {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .qa_faqBg {
        padding: 1.75rem 0;
    }

    .qa_item details > summary {
        padding: 1rem 0;
    }

    .qa_answer {
        padding-left: 2rem;
    }
}*/


/* ------------------------------------------------------------ */
/* Section 2：底部 CTA                                           */
/* ------------------------------------------------------------ */

.qa_ctaBg {
    background: linear-gradient(180deg, var(--primary_light) 0%, var(--primary_color) 45%, var(--primary_dark) 100%);
    padding: clamp(2.25rem, 3.5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    /* margin-bottom: 2.5rem; */
    margin-bottom: 1.5625rem;
}

.qa_cta_inner {
    align-items: center;
    margin: 0 auto;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 73.75rem;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.qa_cta_inner_left {
    display: flex;
    flex-direction: column;
    max-width: 63%;
    gap: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem);
}
.qa_cta_title {
    /* display: block; */
    /* font-size: clamp(1.25rem, 2vw, 1.625rem); */
    /* font-weight: 800; */
    /* color: var(--third_color); */
    /* line-height: 1.3; */
    /* margin-bottom: 0.625rem; */
    padding: 0;
    margin: 0;
    font-size: calc(clamp(2.188rem, 0.787rem + 2.26vw, 3.5rem) * 0.8);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .01em;
    color: #ffffff;
    font-style: italic;
    text-align: left;
}

.qa_cta_sub {
    /* font-size: 0.9375rem; */
    /* color: var(--fourth_color); */
    /* line-height: 1.6; */
    /* margin: 0 0 1.75rem; */
    font-size: calc(clamp(1.172rem, 0.422rem + 1.21vw, 1.875rem) * 0.8);
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    text-align: left;
}

.qa_cta_btns {
    display: flex;
    gap: 0.875rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 36%;
}

    .qa_cta_btns .qa_cta_btn1 {
        background: #fff;
        color: var(--primary_color);
    }

        .qa_cta_btns .qa_cta_btn1 .arrow{      
            font-size: 1.5rem;
        }
            .qa_cta_btns .qa_cta_btn1 i{        
                color: var(--primary_color);
                font-size: inherit;
            }


    .qa_cta_btns .qa_cta_btn2 {
        background: #fff0 !important;
        border-color: #fff !important;
        color: #fff !important;
    }
    .qa_cta_btns .qa_cta_btn2 .arrow {
        display: flex;
    }

    




/* 在螢幕寬度大於1024時，套用這裡的特定樣式 */ 
@media screen and (min-width: 1024.1px) {

    .qa_ctaBg{
        /* margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 112.8125rem; */
    }

}




@media (max-width: 990px) {

    .qa_ctaBg {
       padding:clamp(1.613rem, 2.6vw, 3.125rem);
    }
    
        .qa_cta_inner {
            align-items: unset;
            justify-content: unset;
            flex-direction: column;
            gap: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem);
        }

            .qa_cta_inner_left {
                max-width: unset;
            }
            
            .qa_cta_btns {
                max-width: unset;
                margin: 0;
                padding: 0;
            }

}


@media (max-width: 640px) {

.qa_ctaBg {
    /* border-radius: 1rem; */
}

    .qa_cta_inner {
    
    }
        
        .qa_cta_btns {
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        

            .qa_cta_btns .qa_cta_btn {
                width: 100%;
            }

            
}