@charset "utf-8";

:root {
  --q-color: #506fb3;
  --a-color: #b37550;
  --qa-icon: clamp(1.4rem, 1.8vw, 1.6rem);
  --qa-gap: clamp(0.2rem, 1vw, 0.5rem);
  --qa-lh: 1.5;
  /* 文字 line-height，依實際調整 */
}
.other_service .title_icons svg {
    mask-image: url(../../../images/svg/meteo_other.svg)
}
.other_service .sec01 .title_icons svg {
    mask-image: url(../../../images/svg/servant.svg);
}
.other_service .sec02 .title_icons svg {
    mask-image: url(../../../images/svg/eternal_bonding.svg);
}
.other_service .sec03 .title_icons svg {
    mask-image: url(../../../images/svg/rename.svg);

}
.other_service section .content {
  text-align: left;
  font-size: calc(var(--normal-txt-size)*1.1);
  line-height: 1.7;
  padding-left: var(--block-margins-s);
  padding-right: var(--block-margins-s);
}
.other_service main .content_all section.sec02 .title_name,
.other_service main .content_all section.sec03 .title_name{
  margin-bottom: var(--block-margins-m);
}
.other_service section .content h3 {
  text-align: center;
  display:flex; gap: 0.4rem;
  justify-content: center;
}

.other_service section .content h4 {
  margin-top: calc(var(--block-margins-ss) * 1.5);
  margin-bottom: calc(var(--block-margins-ss) * 0.1);
  font-size: calc(var(--btn_txt_size)*1);
  font-weight: 600;
  position: relative;
  color: var(--basic-gold);
  z-index: 1;
  display: inline-flex;
  gap: 0.2em;
  line-height: 1.8;
}

.other_service section .content h5 {
  width: fit-content;
  font-weight: 600;
  margin-top: var(--block-margins-ss);
 
}

.other_service section .content p.notice {
  color: var(--dark-red);
}

/*麵包屑設定*/
.other_service .bread_crumbs {
  width: 90%;
  max-width: var(--maxW);
  position: relative;
  margin: 0 auto;
  display: flex;
  font-size: 0.95rem;
  z-index: 50;
  align-items: flex-end;
  flex-direction: row;
  justify-content: flex-start;
  margin: 0 auto;
}

.other_service .bread_crumbs li {
  width: auto;
  display: flex;
}

.other_service .bread_crumbs a {
  display: block;
  width: 100%;
  height: 100%;
}

.other_service .bread_crumbs {
  line-height: 1;
  vertical-align: bottom;
}

.other_service .bread_crumbs li:first-of-type:before {
  padding-left: 0;
}

.other_service .bread_crumbs li::before {
  padding-top: 1px;
  padding-right: 4px;
  padding-left: 4px;
  border-color: var(--basic-gray);
  content: ">";
  pointer-events: none;
}

.other_service .bread_crumbs li:nth-of-type(1):before {
  content: "";
}

.other_service .bread_crumbs li a span {
  background: url(../../../images/svg/home2.svg) no-repeat center top;
  width: 16px;
  height: 16px;
  display: block;
  background-size: contain;
  text-indent: -99999px;
}
/*僱員服務*/
.other_service main .content_all section.sec01 .button_block{
 margin-bottom: var(--block-margins-m);
}

/*QA區塊*/
.other_service .qa_list {
  width: 100%;
}

.other_service .qa_list .qa_item {
  border-top: 1px solid rgb(203 203 203);
}

.other_service .qa_list .qa_item:after {
  content: "";
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--gray03);
}

.other_service .qa_list .qa_item,
.other_service .content .sec1 {
  width: 100%;
  padding:calc( var(--block-margins-m)*1.2);
}

.other_service .qa_list .qa_item:last-of-type{
  padding-bottom: 0;
}
.other_service .content .sec1 {
  margin-bottom: 0;
}

.other_service .qa_list .qa_item .question,
.other_service .qa_list .qa_item .answer {
  font-size: calc(var(--btn_txt_size)*1);
  position: relative;
  /* 給圖示預留空間：圖示寬 + 間距 */
  padding-left: calc(var(--qa-icon) + var(--qa-gap));
  line-height: var(--qa-lh);
  /* 若原本是 flex 並造成置中，請停用或改成以下兩行 */
  /* display: block; */
  /* align-items: flex-start; */

}

.other_service .qa_list .qa_item .question {
  color: var(--q-color);
  font-weight: 600;
  margin-bottom:calc(var(--block-margins-ss)*0.7);
}

.other_service .qa_list .qa_item .answer {
  color: var(--a-color);
  font-weight: 600;
}

.other_service .qa_list .qa_item .answer_box {
  margin: calc(var(--block-margins-s) * 0.4) calc(var(--block-margins-s) *1.1);
}

.other_service .qa_list .qa_item .answer_box img {
  display: block;
}

.other_service .qa_list .qa_item .question::before {
  -webkit-mask-image: url("../../../images/svg/q.svg");
  mask-image: url("../../../images/svg/q.svg");
  background-color: var(--q-color);

}

.other_service .qa_list .qa_item .answer::before {
  -webkit-mask-image: url("../../../images/svg/a.svg");
  mask-image: url("../../../images/svg/a.svg");
  background-color: var(--a-color);

}

.other_service .qa_list .qa_item .question::before,
.other_service .qa_list .qa_item .answer::before {
  content: "";
  position: absolute;
  left: 0;

  /* 讓圖示對齊第一行的垂直中央：
     (第一行高度 - 圖示高) / 2 */
  top: calc((1em * var(--qa-lh) - var(--qa-icon)) / 2);

  width: var(--qa-icon);
  height: var(--qa-icon);

  /* 你原本的 mask 設定保留 */
  -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; */
  /* flex: 0 0 auto; */
}

/*表格*/
.other_service .content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gray02);
  /* 深灰色外框 */
  font-size: 16px;
  margin: calc(var(--block-margins-ss) * 0.6) auto calc(var(--block-margins-ss) * 1.5);
}

.other_service .content thead {
  background-color: var(--gray02);
  /* 版頭深灰色 */
  color: #fff;
  /* 白色文字 */
}

th,
td {
  border: 1px solid var(--gray03); 
  /* 深灰色框線 */
  padding: calc(var(--block-margins-ss)*0.5) calc(var(--block-margins-ss)*1);
  text-align: left;
  font-size: calc(var(--normal-txt-size)*1.1);
}
td {background-color: #ffffff4b;}
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
  /* 可加上微底色增加可讀性 */
}
.other_service .content table.two-column th,.other_service .content table.two-column td{
  width: 50%;
}
/*清單*/
.other_service main .content ul 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(--gray02);
  -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;
}
.other_service .content .pic_box {
  box-sizing: border-box;
  display: flex; justify-content: center; align-items: center;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: calc( var(--block-margins-ss)*1.5 ) 0;
}
.other_service .content img {
  /* margin:calc( var(--block-margins-ss)*1.3 )auto; */
  /* border-radius: var(--border-radius-pic); */
  filter: drop-shadow(var(--box-shadow-pop)) ;
  display: block;
  max-width: 100%;
  height: auto;
}

/*永結同心*/
.other_service .sec03 .content .sec1, .other_service .sec02 .content .sec1 {
max-width: 900px;  margin: 0 auto;
}

.other_service main .content_all section.sec02 .pic_box{
  max-width: 600px;
}
.other_service section .content .coming_soon::after{
  border-radius: inherit;
}
 

@media (max-width: 500px) {
  :root {
  --qa-icon: 4.5vw;
  --qa-gap: 1.5vw;
  /* --qa-lh: 1.2vw; */
}
.other_service .content ul li::before {
    width: 2.5vw;
}
.other_service .qa_list .qa_item, .other_service .content .sec1 {
    width: 100%;
    padding: calc( var(--block-margins-m)*0.7);
}
}