.ratih1 {
    color: #333; /* 一級標題文字顏色 */
    margin-top: 20px; /* 一級標題頂部外邊距 */
    margin-bottom: 15px; /* 一級標題底部外邊距 */
    text-align: center; /* 一級標題文字置中 */
    font-size: 2em; /* 設定一級標題的字體大小 (相對於 body) */
    font-family: 微軟正黑體;
}
.ratitd{
    font-family: 微軟正黑體;
}
.ratih2 {
    color: #555; /* 二級標題文字顏色 */
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    font-size: 1.5em; /* 設定二級標題的字體大小 (與 .horizontal-section-title 相同) */
    font-family: 微軟正黑體;
}
.ratih3 {
    color: #777; /* 三級標題文字顏色 */
    margin-top: 15px; /* 三級標題頂部外邊距 */
    margin-bottom: 10px; /* 三級標題底部外邊距 */
    font-size: 1.2em; /* 設定三級標題的字體大小 (相對於 body) */
    font-family: 微軟正黑體;
}
.ratip {
    color: #666; /* 段落文字顏色 */
    line-height: 1.6; /* 段落行高 */
    margin-bottom: 10px; /* 段落底部外邊距 */
    font-size: 1em; /* 設定段落的字體大小 (相對於 body) */
    font-family: 微軟正黑體;
}

.raticontainer {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
}
.ratisection-title {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.ratisolution-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.ratimodule {
    background-color: #e9ecef;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    border: 1px solid #ced4da;
    width: 300px;
}
.ratimodule h2 {
    color: #495057;
    margin-top: 0;
    margin-bottom: 10px;
}
.ratimodule p {
    color: #6c757d;
    font-size: 0.9em;
    line-height: 1.6;
}
.ratiimage-container {
    text-align: center;
    margin-top: 20px;
}
.ratiimage-container img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/*img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
}*/
.ratidescription {
    text-align: left; /* 描述文字靠左對齊 */
}
.ratidiagram-element {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background-color: #eee;
    float: left;
    height: 80px;
    vertical-align: bottom;
}
.ratidiagram-element h3 {
    color: #555;
    margin-top: 10;
    margin-bottom: 5px;
}
.ratidiagram-element p {
    color: #777;
    margin-bottom: 0;
}
.ratiarrow {
    margin-top: 25px;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
    font-size: 1.2em;
    color: #888;
}
.ratistore-layout {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}
.ratistore-item {
    width: 30%;
    text-align: center;
}       

.raticontainer1 {
    background-color: #e9e9e9;
    padding: 40px 20px; /* 調整內邊距以確保文字不與背景元素重疊 */
    margin: 20px auto;
    border-radius: 8px; /* 如果背景圖有圓角 */
    display: flex;
    justify-content: space-around;
    text-align: left;
}
.ratistep {
    flex: 1;
    padding: 20px;
    /* 為了讓文字更清晰，可以添加一個半透明的背景 */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    margin: 0 10px;
}
.ratistep h2 {
    color: #333;
    margin-bottom: 10px;
}
.ratistep p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
    font-size: 0.9em;
}
/* 調整每個步驟的寬度，使其看起來更像流程圖 */
.ratistep:first-child {
    margin-left: 0;
}
.ratistep:last-child {
    margin-right: 0;
}  

.ratiesl-advantages-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
    display: flex; /* 使用 Flexbox 佈局 */
    justify-content: space-around; /* 平均分配空間 */
    flex-wrap: wrap; /* 在空間不足時換行 */
  }
  
  .ratiadvantage-group {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-sizing: border-box; /* 包含 padding 和 border 在元素總寬度內 */
  }
  
  /* 在小於 768px 的螢幕上調整佈局 */
  @media (max-width: 768px) {
    .ratiesl-advantages-container {
      flex-direction: column; /* 改為垂直排列 */
      align-items: stretch; /* 讓子元素寬度撐滿容器 */
    }
  
    .ratiadvantage-group {
      width: 100%; /* 在小螢幕上佔滿整行 */
      margin-left: 0; /* 移除左邊的外邊距 */
      margin-right: 0; /* 移除右邊的外邊距 */
    }
  }
.ratisection-header {
    background-color: #e9ecef;
    color: #495057;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center; /* 標題置中 */
}
.ratiadvantage-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.ratiadvantage-icon {
    margin-right: 10px;
    font-size: 1.5em; /* 您可以使用 Font Awesome 或其他圖標庫 */
    color: #007bff;
}
.ratiadvantage-text {
    color: #555;
    line-height: 1.6;
    text-align: left;
}
.ratiadvantage-title {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    text-align: left;
}
.ratiperson-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 10px;
}

/* 調整圖片在並排佈局中的樣式，使其不會過於擁擠 */
.ratiadvantage-group .person-image {
    max-height: 150px; /* 設定最大高度 */
    object-fit: contain; /* 保持圖片比例並完整顯示 */
    width: auto; /* 寬度自動調整 */
    margin: 10px auto 0; /* 上下間距，水平居中 */
    display: block; /* 使圖片可以水平居中 */
}     
.raticost-comparison-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
}
.raticost-comparison-title {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}
.raticost-comparison-intro {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}
.raticost-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.raticost-table th, .raticost-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.raticost-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.raticost-table tfoot td {
    font-weight: bold;
    background-color: #e9ecef;
}        
.raticost-comparison-table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
}
.raticomparison-title {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}
.raticomparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.raticomparison-table th, .raticomparison-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.raticomparison-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.raticomparison-table thead tr:first-child th {
    background-color: #007bff;
    color: white;
    text-align: center;
}
.raticomparison-table thead tr:first-child th:first-child {
    background-color: transparent;
    color: black;
    font-weight: normal;
    text-align: left;
}
.raticomparison-table tfoot td {
    font-weight: bold;
    background-color: #e9ecef;
}
.raticomparison-note {
    color: #777;
    font-size: 0.9em;
    margin-bottom: 10px;
}
.raticomparison-conclusion {
    font-weight: bold;
    color: #28a745;
}
.raticost-analysis-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
}
.ratianalysis-title {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}
.ratianalysis-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.ratianalysis-table th, .ratianalysis-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.ratianalysis-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.ratianalysis-table td:last-child {
    text-align: right;
}
.ratisoftware-platform-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
    display: flex; /* 使用 Flexbox 佈局 */
    justify-content: space-around; /* 平均分配空間 */
    flex-wrap: wrap; /* 在空間不足時換行 */            
}
.ratiplatform-title {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}
.ratiplatform-flow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* 允許在小螢幕上換行 */
}
.ratiplatform-step {
    background-color: #e0f2f7; /* 淺藍色 */
    color: #333;
    padding: 10px;
    border-radius: 6px;
    margin: 10px;
    text-align: center;
    flex: 1; /* 平均分配空間 */
    box-sizing: border-box; /* 包含 padding 和 border 在元素總寬度內 */
    position: relative;
}

.ratistep-heading {
    font-weight: bold;
    margin-bottom: 10px;
    color: #007bff;
}
.ratistep-description {
    font-size: 0.9em;
    line-height: 1.6;
}
.ratiflow-arrow {
    font-size: 2em;
    color: #ccc;
    margin: 0 5px;
}

/* 在小螢幕上隱藏箭頭，避免過於擁擠 */
@media (max-width: 768px) {
    .ratiflow-arrow {
        display: none;
    }
    .ratiplatform-flow {
        flex-direction: column; /* 改為垂直排列 */
        align-items: stretch; /* 步驟寬度拉伸 */
    }
    .ratiplatform-step {
        margin: 10px 0;
    }
}
.ratideployment-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.ratideployment-option {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
}
.ratioption-header {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border-radius: 4px 4px 0 0;
    margin-bottom: 10px;
    font-weight: bold;
}
.ratioption-list {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    text-align: left;
}
.ratioption-list li {
    color: #555;
    line-height: 1.6;
    margin-bottom: 5px;
    font-size: 0.9em;
}
.ratideployment-diagram {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
.ratidiagram-label {
    color: #777;
    font-size: 0.9em;
}

/* 針對不同部署方案的標題顏色 */
.ratipublic-header {
    background-color: #007bff;
}
.ratiprivate-header {
    background-color: #28a745;
}
.ratilocal-header {
    background-color: #dc3545;
}

/* 調整圖片大小以適應容器 */
.ratideployment-option img {
    max-width: 90%;
    height: auto;
    margin: 10px auto;
    display: block;
}

@media (max-width: 768px) {
    .ratideployment-option {
        width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .ratideployment-option {
        width: 100%;
    }
}
.ratiserver-coverage-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.raticoverage-title {
    color: #333;
    margin-bottom: 20px;
}
.raticoverage-diagram {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.ratiserver-location {
    text-align: center;
    margin: 20px;
}
.ratilocation-label {
    color: #555;
    margin-bottom: 5px;
    font-weight: bold;
}
.ratidata-center {
    color: #007bff;
}
.raticoverage-map {
    max-width: 50%;
    height: auto;
    opacity: 0.6; /* 稍微降低透明度，使其看起來像背景 */
}
.ratiserver-info {
    text-align: left;
    margin-top: 20px;
    color: #666;
    font-size: 0.9em;
}
.ratilaptop-screenshot {
    max-width: 40%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 5px #ddd;
}
.ratiaccess-note {
    color: #777;
    font-size: 0.8em;
    margin-top: 15px;
}        
.ratidata-import-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    /*max-width: 900px;*/
    margin: 0 auto;
}
.ratiimport-method {
    margin-bottom: 30px;
    padding: 15px;
    border: 3px solid #dcecff;
    border-radius: 6px;
}
.ratimethod-title {
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}
.ratimethod-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.9em;
}
.ratidiagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ratidiagram-element {
    text-align: center;
}
.ratidiagram-image {
    max-width: 150px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 4px;
}
.ratidiagram-arrow {
    font-size: 2em;
    color: #aaa;
}
.ratiexcel-icon {
    max-width: 80px;
    height: auto;
}
.ratiesl-features-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 0 auto;
}
.ratifeatures-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.ratifeature-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
}
.ratifeature-number {
    font-size: 2em;
    color: #007bff;
    margin-bottom: 5px;
}
.ratifeature-icon {
    max-width: 50px;
    height: auto;
    margin-bottom: 10px;
}
.ratifeature-title {
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}
.ratifeature-description {
    color: #555;
    font-size: 0.9em;
    line-height: 1.6;
    text-align: center;
}

/* 小螢幕調整為每行 1 個 */
@media (max-width: 768px) {
    .ratifeature-item {
        width: calc(100% - 20px);
    }
}
.ratiproduct-data-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}
.ratiproduct-table {
    border-collapse: collapse;
    margin-bottom: 20px;
}
.ratiproduct-table th, .ratiproduct-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
}
.ratiproduct-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}
.ratiproduct-table thead th:first-child {
    text-align: left;
}
.ratisection-title {
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}
.ratihorizontal-product-data-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    overflow-x: auto; /* 當內容超出時顯示水平捲軸 */
}
.ratihorizontal-product-table {
    border-collapse: collapse;
    margin-bottom: 20px;
}
.ratihorizontal-product-table th, .ratihorizontal-product-table td {
    border: 1px solid #ddd;
    padding: 3px 5px;
    text-align: left;    
    word-break: break-word;
    overflow-wrap: break-word;
    /*white-space: nowrap;*/ /* 防止文字換行 */
    font-size: 12px;
}
.ratihorizontal-product-table th {
    white-space: nowrap;
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}
.ratihorizontal-product-image {
    max-width: 80px;
    height: auto;
}
.ratihorizontal-section-title {
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}        

.ratihorizontal-product-table tr:hover {
    background-color: #e6f2ff !important; /* 淺藍色 */
    transition: background-color 0.3s ease; /* 平滑過渡效果 */
}
.ratihorizontal-product-table tr .ratirowspan-hover {
    background-color: #e6f2ff !important;
  }/* 解决 rowspan 单元格问题 */

  /* 隱藏表格標題，準備在小螢幕上顯示為列表項目的標題 */
@media (max-width: 1100px) {
    .ratihorizontal-product-table thead {
      display: none;
    }
  
    .ratihorizontal-product-table tbody tr {
      display: block; /* 讓每一列佔據一個完整的區塊 */
      margin-bottom: 15px; /* 增加列之間的間距 */
      border: 1px solid #ddd; /* 可選：添加邊框 */
      border-radius: 4px; /* 可選：添加圓角 */
      padding: 10px; /* 可選：添加內邊距 */
    }
  
    .ratihorizontal-product-table tbody td {
      display: block; /* 讓每個單元格佔據一個完整的區塊 */
      text-align: left; /* 文字靠左對齊 */
      padding-left: 0 !important; /* 移除原有的內邊距 */
    }
  
    .ratihorizontal-product-table tbody td:before {
      content: attr(data-th) ": "; /* 顯示對應的表頭文字 */
      font-weight: bold; /* 加粗表頭文字 */
      display: inline-block;
      width: 120px; /* 調整寬度以容納最長的表頭文字 */
      margin-right: 10px;
    }
  
    .ratihorizontal-product-table td img {
      max-width: 80%; /* 調整圖片在小螢幕上的大小 */
      height: auto;
    }
  }