/* 外層容器，用於整體置中和最大寬度限制 */
.reach_sect_wrapper {
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* 核心佈局容器 - 使用 Grid 來定義整個畫布 */
.reach_sect {
    display: grid;
    width: 100%;
    position: relative;
    /* 網格定義：這部分是關鍵，需要仔細分析圖片中的元素位置和相對大小 */
    /* 這裡我會根據圖片大概劃分網格線，需要精確測量才能更準確 */
    /* 假設我們將整個設計分為 12 列和 12 行，以便精確定位 */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
    max-width: 812px;
}
/* REARCH 標題 */
.reach_sect .sect-title {
    grid-column: 2 / span 4; /* 佔據前4列 */
    grid-row: 2 / span 2; /* 佔據前2行 */
    z-index: 2; /* 確保在最上層 */
    text-align: left;
    margin: 0;
}
.reach_sect .sect-title span { 
        color: #333;
    font-size: 100px;
    font-weight: 700;
    font-family: "Figtree", sans-serif;
    line-height: 1;
    white-space: nowrap;
}
.reach_sect .sect-title h2 {
        color: #1f1f1f;
    font-size: 30px;
    font-weight: 400;
    margin: 0;
    flex-shrink: 0;
    letter-spacing: 0.1em;
}
/* mask_box (地球圖案) */
.mask_box {
    grid-column: 1 / span 12;
    grid-row: 1 / span 12;
    position: relative;
    z-index: 1;
    aspect-ratio: 812 / 627;/* 設定一個大致的容器比例，讓其等比縮放 */
}
.mask_box:before{
    content:'';
    display:block;
    width:100%;
    height:100%;
    background: url(../../images/common/index/earth.jpg) no-repeat center center / cover;
    -webkit-mask-image: url(../../images/common/index/earth_bg.svg);
    mask-image: url(../../images/common/index/earth_bg.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center 100%;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
}
.reach_item{
    position: absolute;
    right: 68px;
    top: -87px;
    width: 33%;
    max-width: 374px;
}
/* mask_box 內部的 stat-item s1 和 s2 */
.stat-item.s1 {
    max-width: 355px;
    max-height: 355px;
    width: 42%;
    height: 57%;
    position: absolute;
    right: 0;
    top: 0;
    flex: 1;
}
.stat-item.s2 {
    max-width: 551px;
    max-height: 429px;
    width: 66%;
    height: 64%;
    position: absolute;
    left: 0;
    bottom: 0;
    flex: 1;
}
/* stat_box 包含 s3 和 s4 */
.stat_box {
    grid-column: 6 / span 1;
    grid-row: 2 / span 1;
    display: flex;
    /* flex-direction: column; */
    /* justify-content: flex-end; */
    /* align-items: flex-end; */
    z-index: 0;
    aspect-ratio: 1 / 1;
    margin-right: 0;
    margin-bottom: 0;
    /* flex: 1; */
    max-width: 250px;
    max-height: 250px;
    position: relative;
    right: -48px;
    top: 107px;
}
/* stat_box 內部的 stat-item s3 和 s4 */
.stat_box1{
    grid-column: 3 / span 3;
    grid-row: 1 / span 1;
    max-width: 250px;
    max-height: 250px;
    position: relative;
    top: -85px;
    right: 76px;
}
.stat-item.s3 {
    /* aspect-ratio: 1 / 1; */
    max-width: 250px;
    max-height: 250px;
    width: 100%;
    height: 100%;
    flex: 1;
    background: #2EB2AA;
}
.stat-item.s4 {
    /* aspect-ratio: 851 / 307; */
    max-width: 250px;
    max-height: 250px;
    width: 100%;
    height: 100%;
    color: #333;
    background: url(../../images/common/index/s4bg.jpg) no-repeat center center / cover;
}
.stat-item {
    border-radius: 40px;
    color: #fff;
    box-sizing: border-box;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    /* background: red; */
}
.spec_num {
    font-size: 50px;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    font-family: "Figtree", sans-serif;
    margin-bottom: 8px;
}
.stat-item.s4 .spec_num {
    color: #000;
}
.spec_num .num {
    font-size: 50px;
    font-weight: bold;
    margin-right: 8px;
    letter-spacing: 0;
    font-family: "Figtree", sans-serif;
}
.stat-item span {
    font-size: 20px;
    margin: 0;
    letter-spacing: 0.1em;
    font-family:'Noto Sans TC', sans-serif;
}
.stat-item p {
    font-family: "Figtree", sans-serif;
    font-size: 22px;
    margin: 0;
    text-align: center;
}
/*--------------------------------------------------------------
# 響應式設計 (RWD) 調整
--------------------------------------------------------------*/
@media (max-width: 1600px) {
    .reach_sect_wrapper{
        padding-right: 48px;
    }
}
@media (max-width: 767px) {
    .reach_sect {
        /* 在平板尺寸下，可能需要調整網格佈局 */
        /* 例如，讓 mask_box 和 stat_box 垂直堆疊 */
        grid-template-columns: 1fr; /* 單列 */
        grid-template-rows: auto auto auto; /* 標題、地球、S3、S4 */
        aspect-ratio: auto; /* 移除固定比例，讓高度由內容撐開 */
        max-width: 720px;
        margin: 0 auto;
        gap: 20px;
    }
    .reach_sect_wrapper{
        padding:0;
    }
    .reach_sect .sect-title {
        grid-column: 1 / -1; /* 佔滿整列 */
        grid-row: 1;
        text-align: center;
        padding: 0 ; /* 調整 padding */
        margin: 0 auto 24px;
    }
    .reach_sect .sect-title span{
        font-size: 64px;
    }
    .reach_sect .sect-title h2{
        font-size: 28px;
    }
    .reach_item {
        position: absolute;
        right: -20px;
        top: 150px;
        width: 33%;
        max-width: 374px;
        width: 160px;
        display: none;
    }
    .stat_box1 {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        top: 0;
        right: 0;
    }
    .mask_box {
        grid-column: 1 / -1; /* 佔滿整列 */
        grid-row: 2;
        width: 100%;
        /* margin-bottom: 20px; */ /* 與下方元素的間距 */
        aspect-ratio: 1346 / 816; /* 保持地球的比例 */
    }
    .mask_box:before{
        display: none;
    }
    .stat-item.s1,
    .stat-item.s2 {
        /* 在手機板上，s1 和 s2 可能需要調整位置或變成獨立的區塊 */
        max-width: 100%;
        max-height: 100%;
        position: static; /* 移除絕對定位 */
        width: 100%;
        height: auto;
    }
    .stat-item.s1 {
        background: url(../../images/common/index/earth.jpg) no-repeat right top;
    }
    .stat-item.s2 {
        background: url(../../images/common/index/earth.jpg) no-repeat left bottom / cover;
    }
    .mask_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        mask-image: none; /* 移除地球遮罩，讓內容清晰可見 */
        background: none; /* 移除背景圖，如果需要背景色可以設定 */
        aspect-ratio: auto; /* 移除固定比例 */
        gap: 20px;
    }
    .stat_box {
        grid-column: 1 / span 1; /* 佔滿整列 */
        grid-row: 3 / span 1; /* 位於 mask_box 下方 */
        /* width: 100%; */
        margin: 0 auto;
        right: 0;
        top: 0;
    }
    .stat-item.s3,
    .stat-item.s4 {
        aspect-ratio:auto;
        max-width: 100%;
        max-height: 100%;
        width: 100%; /* 佔用較大寬度 */
        height: auto;
        margin: 0; /* 移除負邊距和固定邊距 */
    }
    .spec_num{
        margin-bottom: 16px;
        
    }
    .stat-item.s1 .spec_num,
    .stat-item.s2 .spec_num{
        text-shadow: 0 0 8px rgb(0 0 0 /40%);
    }
    .spec_num .num{
        font-size: 48px;
    }
}
/*-*/
.ab_t{
    font-size: 22px;
    color: #1F1F1F;
    margin-bottom: 16px;
    letter-spacing: 0.1em;
}
.ab_txt{
    font-size: 15px;
    color: #444;
    line-height: 2;
}
/*-*/
* html .clearfix { 
    height: 1%; 
}
.clearfix { 
    display: block; 
}
.col {
    box-sizing: border-box;
}
/*------ about page ------*/
.about-section {
  margin: 0 auto;
}
.about-title{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin: 0 auto 80px;
}
.about-title h2 {
  font-size: 40px;
  color: #1f1f1f;
  letter-spacing: 0.15em;
  font-weight: normal;
  text-align: center;
  margin: 28px;
  position: relative;
  z-index: 1;
}
.about-title span {
  font-size: 150px;
  text-align: center;
  font-weight: 700;
  position: relative;
  color: #EDEDED;
  opacity: 0.5;
  font-family: "Figtree", sans-serif;
  position: absolute;
  z-index: -1;
}
.about-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 48px;
}

.about-block.reverse {
  flex-direction: row-reverse;
}

.about-text {
  flex: 1;
}
.about-text h3 {
  color: #2CB2AA;
  margin:0 0 ;
  font-size: 20px;
  font-weight: normal;
}
.about-text p {
  line-height: 2;
  color: #444;
  margin: 0;
}

.about-image {
  flex: 1;
}

.about-image img {
  width: 100%;
  border-radius: 20px;
  display: block;
  object-fit: cover;
}

/* RWD */
@media (max-width: 1000px) {
    .about-title{
        margin: 0 auto 0px;
    }
  .about-block,
  .about-block.reverse {
    flex-direction: column;
  }
  .about-title h2{
    font-size: 26px;
    line-height: 1.4;
  }
  .about-title span{
    font-size: 80px;
  }
}

/*------ //about page ------*/

/*------ //ESG page ------*/
.s_layout{
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    font-family: "Figtree" , "Noto Sans TC" , sans-serif;
}

.s_layout .s-1{
    text-align: center;
    margin-bottom: 75px;
}

.s_layout .s-1 h2{
    color: #1F1F1F;
    font-size: 50px;
    letter-spacing: 3px;
    margin: 0;
}

.s_layout .s-1 span{
    color: #4CB8A1;
    font-size: 20px;

}

.s_layout .s-2{
    display: flex;
    gap: 60px;
}

.s_layout .s-2 .s_item{
    width: 33.3%;
}

.s_layout .s-2 .s_item .s_box{
    background: #FAFAFA;
    border-radius: 20px;
    margin: 0;
    padding: 30px 40px 50px;
    position: relative;
}


.s_layout .s-2 .s_item .s_box .s_pic{
    position: absolute;
    top: -35px;
    right: 35px;
    border: 11px solid #E9F7F6;
    background: #fff;
    width: 125px;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.s_layout .s-2 .s_item .s_text .s_tit{
    margin-bottom:25px;
}

.s_layout .s-2 .s_item .s_text .s_tit span{
    color: #AAAAAA;
    font-size: 20px;
    position: relative;
    display: block;
    letter-spacing: 2px;
    margin-bottom: -7px;
}


.s_layout .s-2 .s_item .s_text .s_tit span::first-letter{
    color: #3FB4AA;
    font-size: 30px;
}

.s_layout .s-2 .s_item .s_text .s_tit h4{
    font-weight: normal;
    margin: 0;
    color: #666666;
    font-size: 25px;
    letter-spacing: 2px;
}

.s_layout .s-2 .s_item .s_text  .st{
    position: relative;
    margin-bottom: 3px;
    letter-spacing: 1.5px;
    padding-left: 15px;
}

.s_layout .s-2 .s_item .s_text  .st::before{
    content: '-';
    position: absolute;
    top:0;
    left: 0;
}
@media (max-width: 1550px) {
    .s_layout .s-2 {
        display: flex;
        gap: 20px;
        max-width: 1200px;
        justify-content: center;
        margin: 0 auto;
    }

    .s_layout .s-2 .s_item .s_box {
        padding: 30px 30px 40px;
        position: relative;
    }

    .s_layout .s-2 .s_item .s_box .s_pic {
        right: 18px;
    }

}

@media (max-width: 1380px) {
    .s_layout .s-2{
        margin-top: 110px;
    }

    .s_layout .s-2 .s_item .s_box .s_pic {
        right: 0;
        left: 0;
        margin: 0 auto;
        top: -70px;
    }
    .s_layout .s-2 .s_item .s_box{
        padding-top: 80px;
    }

    .s_layout .s-2 .s_item .s_text .s_tit{
        text-align: center;
    }
}
@media (max-width: 1024px) {
    .s_layout .s-2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .s_layout .s-2 .s_item {
        width: 48%;
        margin-bottom: 70px;
    }
     
}

@media (max-width: 767px) {
    .s_layout .s-2 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }

     .s_layout .s-2 .s_item {
        width: 100%;
        max-width: 400px;
        margin-bottom: 70px;
    }

}

/*------ //ESG page ------*/

.terms-title {
    color: #2CB2AA;
    font-size: 18px;
    margin: 0 0 5px;
}
.contact-editor {
    max-width: 1000px;
    margin: 0 auto;
}
.contact-editor .col {
    float: left;
    width: 50%;
}
.contact-editor .col2 {
    padding-left: 6%;
}
.contact-map {
    height: 350px;
    border: 1px solid #ddd;
    padding: 5px;
}
.contact-map iframe {
    display: block;
    max-height: 100%;
}
.company-name {
    max-width: 241px;
    margin: 10px 0 30px;
}
.contact-info-list {
    padding: 0;
    margin: 0;
}
ul.contact-info-list {
    color: #2EB2AA;
    font-size: 16px;
    margin: 5px 0;
}
ul.contact-info-list li+li {
    padding: 15px 0 0;
}
ul.contact-info-list li span{
    position: relative;
    color: #666;
    display: block;
}
.contact-info-list i {
    position: relative;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
}
.contact-info-list i::before{
    display: inline-block;
    font-family: 'icon-font' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
}
.contact-info-list i.add::before {
    content: "\ff004";
    font-size: 18px;
}
.contact-info-list i.tel::before {
    content: "\ff001";
}
.contact-info-list i.fax::before {
    content: "\ff002";
}
.contact-info-list i.mail::before {
    content: "\ff003";
}
.contact-info-list a:hover {
    text-decoration: underline;
}
.email-link {
}
.news-editor .row {
    margin: 0 -20px;
}
.news-editor .col {
    padding: 0 20px;
    float: left;
    width: 50%;
}
@media screen and (max-width: 1400px) {
    .index-service .col1 {
        padding-left: 2%;
    }
    .index-service .col2 {
        padding-right: 2%;
    }
}
@media screen and (max-width: 1300px) {
    .service-list {
        max-width: 960px;
        margin: 0 auto;
    }
    .service-list .item {
        width: 100%;
        display: block;
    }
    .index-service .col1 {
        padding-left: 0;
    }
    .index-service .col2 {
        padding-right: 0;
    }
}
@media screen and (max-width: 1000px) {
    .about-layout {
        margin: 0;
    }
    .about-layout .row,
    .about-layout .col {
        display: block;
        width: auto;
    }
    .about-layout .col {
        padding: 0 0 1.5em;
    }
    .news-editor .col {
        width: 100%;
    }
    .index-service .row,
    .index-service .col {
        display: block;
        width: auto;
    }
    .index-service .col {
        padding: 0;
    }
    .index-service .col2 {
        padding-top: 25px;
        margin-top: 30px;
        border-width: 1px 0 0;
    }
}
@media screen and (max-width: 767px) {
    .about-layout2 .col {
        float: none;
        width: auto;
        padding-bottom: 2em;
    }
    .about-title {
        font-size: 24px;
    }
    .history-title {
        font-size: 20px;
    }
    .history-title span {
        padding: 0 20px;
        margin-top: -18px;
    }
    .contact-editor .col {
        width: 100%;
        padding: 0;
    }
    .contact-map {
        height: 300px;
        margin-bottom: 1.8em;
    }
}
@media screen and (max-width: 639px) {
    .service-list .item,
    .service-list .pic-box,
    .service-list .txt-box,
    .index-service-item,
    .index-service-item .pic-box,
    .index-service-item .txt-box {
        display: block;
        float: none;
        width: auto;
        margin: 0 auto 20px;
    }
    .service-list .item {
        margin-bottom: 40px;
        max-width: 360px;
        padding: 0;
    }
    .service-list .pic-box,
    .index-service-item .pic-box {
        max-width: 210px;
        height: auto;
    }
    .service-list .txt-box,
    .index-service-item .txt-box {
        padding-left: 0;
    }
    .service-list .name,
    .index-service-item .name {
        text-align: center;
    }
}
@media screen and (max-width: 600px) {
    .contact-map {
        height: 200px;
    }
}