

/* 隔斷 */
.jiange{ width: 100%;
float: none;
margin-top: 35px;
border-top: 1px dashed #cccccc;
margin-bottom: 35px;
line-height: 1px;}

/* 關鍵字左圖右文 before */
.allon_boths {
	padding: 0;
	display: flex;
	align-items: center;
}
.allon_imgs {
	float: left;
	text-align: center;
}
.allon_imgs img {
	width: 100%;
	height: auto;
	border-radius: 12px; /* 圓角 */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 陰影 */
	object-fit: cover;
}
.allon_nr {
	float: left;
	text-align: left;
	font-size: 1.0em;
	letter-spacing: 1px;
	color: #222;
	line-height: 38px;
}
.allon_nr::first-letter {

}
.allon_nr a{ 
text-decoration:underline;
}
.allon_nr h2{ font-size:1.4em;}
.allon_nr ul {
    padding-left: 20px;
    margin: 20px 0;
    list-style-type: none;
}

.allon_nr ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #5e4f4b;
    font-size: 1.05em;
    letter-spacing: 1px;
	 list-style-type: none;
}

.allon_nr ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #c7a17a; /* 時尚的咖啡金色 */
    font-size: 1.8em;
    line-height: 0.8;
}

.allon_nr ul li:last-child {
    margin-bottom: 0;
}

/* 懸停效果 */
.allon_nr ul li:hover {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}



@media (max-width:900px) {
	.allon_boths {
		display: block;
	}
	.allon_imgs {
		width: 100%;
		padding: 0 0 30px;
	}
	.allon_nr {
		width: 100%;
		padding: 0;
	}
}

@media (max-width:800px) {
	.allon_boths {
		padding: 0 20px;
	}
	.panel-body .allon_boths {
        padding: 0 10px;
    }
}
/* 關鍵字左圖右文 end */



/* 標題  */
.title_h2 {
    position: relative;
    text-align: center;
    margin: 30px 0 40px;
    padding-bottom: 20px;
    font-size: 1.3em;
    color: #333;
    font-weight: 600;
    letter-spacing: 1px;
	width:100%;
}

.title_h2 small {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: normal;
}

.title_h2 small a {
    color: #c7a17a;
    text-decoration: none;
    transition: all 0.3s;
}

.title_h2 small a:hover {
    color: #a5865e;
    text-decoration: underline;
}

/* 緊湊型雙色斷線效果 */
.title_h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px; /* 更細的線條 */
    background: linear-gradient(90deg, 
        #c7a17a 0%, #c7a17a 48%, 
        transparent 48%, transparent 52%, 
        #5e4f4b 52%, #5e4f4b 100%);
}

@media (max-width: 768px) {
    .title_h2 {
        font-size: 24px;
        margin: 25px 0 35px;
    }
    
    .title_h2::after {
        width: 100px;
        height: 1.5px;
    }
}
h2.title_h2 {
    /* 1. 歸零大法：取消所有繼承、外部定義、瀏覽器預設樣式 */
    all: unset !important;

    /* 2. 重新定義為區塊元素（因為 unset 會把它變回沒寬度的 inline） */
    display: block !important;

    /* 3. 應用你的專屬樣式 */
    position: relative !important;
    text-align: center !important;
    margin: 30px 0 40px !important;
    padding-bottom: 20px !important;
    font-size: 1.3em !important;
    color: #333 !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    width: 100% !important;

    /* 額外補充：處理內部的 <small> 免得它跑位 */
    box-sizing: border-box !important;
}

/* 如果你想連內部的 small 樣式也一併控制，避免它被別人影響 */
h2.title_h2 small {
    font-size: 14px !important;
    margin-left: 10px !important;
    font-weight: normal !important;
}
/* 標題 end */


/* QA  */
.qa-qa {
  margin-bottom: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.qa-q {
  font-weight: 600;
  font-size: 1.8rem;
  color: #333; /* 深藍灰色，專業且通用 */
  padding: 0.8rem 1rem;
  background-color: #eef1f1; /* 淺灰藍，半透明適應不同背景 */
  border-left: 4px solid #c7a17a; /* 藍色邊框作為視覺提示 */
  margin-bottom: 0.5rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.qa-q:hover {
  background-color: rgba(236, 240, 241, 0.9); /* 懸停時稍加深 */
}

.qa-a {
  padding: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
  color: #34495e; /* 深灰色，確保可讀性 */
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .qa_title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  .qa-q {
    font-size:1.8rem;
    padding: 0.7rem 0.9rem;
  }
  
  .qa-a {
    padding: 0.8rem;
    font-size: 1.5rem;
  }
}
/* QA end  */


/* 流程  */
    .process-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .process-title {
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      color: #444;
      margin-bottom: 40px;
    }

    .step-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
    }

    .step {
      flex: 1 1 calc(20% - 20px);
      min-width: 180px;
      background-color: #f0f2ee;
      border-left: 6px solid #9faa94;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .step:hover {
      background-color: #e7ebe4;
      transform: translateY(-4px);
    }

    .step-number {
      font-size: 20px;
      font-weight: bold;
      color: #9faa94;
      margin-bottom: 10px;
    }

    .step-description {
      font-size: 16px;
      color: #555;
      line-height: 1.5;
    }

    @media (max-width: 768px) {
      .step {
        flex: 1 1 calc(45% - 20px);
      }
    }

    @media (max-width: 480px) {
      .step {
        flex: 1 1 100%;
      }

      .process-title {
        font-size: 24px;
      }
    }
/* 流程 end  */


/*  評論  */
.pinglun {
    padding: 20px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 10px 0;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.pinglun::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.95);
    z-index: 1;
}

.pinglun > .col-md-6 {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.pinglun a {
    display: block;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}

.pinglun a:hover {
    transform: translateY(-10px) rotate(1deg);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.pinglun img {
    width: 100%;
     height: auto;
    object-fit: cover;
    transition: all 0.4s ease;
}

.pinglun a:hover img {
    transform: scale(1.1);
}

/* 響應式調整 */
@media (max-width: 768px) {
    .pinglun .col-md-6 {
        padding: 10px;
    }
    
    .pinglun img {
       width: 100%;
     height: auto;
    }
    
    .pinglun a:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 576px) {
    .pinglun {
        padding: 20px 0;
        border-radius: 10px;
    }
    
    .pinglun .col-md-6 {
        padding: 8px;
    }
    
    .pinglun img {
       width: 100%;
     height: auto;
    }
}
/*  評論 end  */


/*  好處   */
.haochu {
  margin: 30px 0;
  row-gap: 25px;
}

.haochu > div {
  text-align: center; /* 圖文居中 */
  padding: 0 10px;
}

.haochu strong {
  display: block; /* 獨佔一行 */
  font-size: 18px;
  color: #c7a17a; /* 要求指定色 */
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 1px; /* 輕微字間距，提升質感 */
}

.haochu p {
  font-size: 14px; /* 縮小字號 */
  color: #666; /* 淺灰色文字 */
  line-height: 1.7; /* 行高提升可讀性 */
  margin: 0;
  text-align: justify; /* 兩端對齊，繁體閱讀更整齊 */
}

@media (max-width: 767px) {
  .haochu {
    margin: 20px 0;
  }
  .haochu strong {
    font-size: 17px;
  }
}



/*  表格   */
.biaoge2 td{
  vertical-align:middle !important;
}
.biaoge2 th{ text-align:center;}

/* 重點文字 */
.biaoge2 strong {
  font-weight: bold;
  color: #411c01;
}

/* 列表樣式重置並重新設置 */
.biaoge2 ul {
  padding-left: 20px;
  margin: 0;
}

.biaoge2 li {
  position: relative;
  padding-left: 5px;
  margin-bottom: 4px;
  color: #411c01;
  list-style-type: disc;
}
/*  表格end   */


/*  調用產品   */
.indexpropage1 {
  display: flex;
  flex-wrap: wrap;
}

.indexpropage1 .proh {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px; /* 增加底部間距 */
}

.indexpropage1 .proimg {
  height: 250px; /* PC端固定高度 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5; /* 可選：添加背景色 */
}

.indexpropage1 .proimg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 關鍵：保持比例並填滿容器 */
  object-position: center;
  transition: transform 0.3s ease;
}

/* 懸停效果 */
.indexpropage1 .proimg:hover img {
  transform: scale(1.05);
}

/* 手機端響應式調整 */
@media (max-width: 768px) {
  .indexpropage1 .proimg {
    height: 200px; /* 手機端較小高度 */
  }
}

@media (max-width: 480px) {
  .indexpropage1 .proimg {
    height: 180px; /* 小手機端高度 */
  }
}

    .fixed-size {
        width: 100%; /* 設置圖片寬度與父容器一致 */
        height: 200px; /* 固定高度 */
        object-fit: cover; /* 確保圖片按比例填滿，可能會裁切 */
        object-position: center; /* 圖片裁切時，保持中心對齊 */
    }

/*  調用產品 end   */

.subtitle1 h1{font-size:1em; margin:0; display:inline-block; font-weight:bold;}