.main-about{ position: relative; margin:0px; padding:0px; }
.main-about::after{width:200%; content: attr(data-content); color: #e7f4ff; font-size: 180px; font-weight: 900; word-wrap: normal; letter-spacing: 3px; left:0; bottom:0px; position: absolute; z-index:0; opacity: .5 ;} 
.main-about .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
@media (max-width:1024px) {
.main-about{ padding:0px;}
}

.block {width:50%; height: auto;margin: 0; padding:4vw  2vw; display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 2}
.block-txt{width:100%; margin: auto; padding:0px 0px 0px 20px;  display: block; position: relative;z-index: 9;   }
.block-txt p { font-size: clamp(.9rem, 2.3vw, 1.05rem); line-height:1.875rem; font-weight:400; margin:0px 0px 10px 0px;  }
.block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;   margin-bottom: 10px; color: #fff; }
@media (max-width: 992px) {
.block {width:100%;margin: 0px; padding: 0px; }  
} 

@media (max-width:840px) {
.block-txt{ margin:30px 0px; padding: 0px 20px;}   
}
@media (max-width:767.98px) {
.block-txt{  padding: 0px;}   
}
@media (max-width:640px) {
.block-txt p { font-size:0.9rem; line-height: 1.5rem;  }
}

@media (max-width:320px) {
.block-txt{  padding: 0px;}  
.block .block-txt{margin: 0px;}
}

.block-pic {width:50%; height: auto;margin: 0; padding:4vw 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center  }
@media (max-width: 992px) {
.block-pic {width:100%;  order: 2;}
}


@media (max-width: 320px) {
.block-pic {width:100%;   }
}

.card-1{ width: 80%; margin: auto 0px; position: relative}
.card-1 figure{width: 100%; height: 100%; border-radius:5px; overflow: hidden; }


.card-2{ margin: auto 0px; position: relative}
.card-2 figure{width: 100%; height: 100%; border-radius:25px; overflow: hidden; }

@media (max-width:1024px) {
.card-1{ margin: auto;  }
.card-1 img {  display: block; margin: auto;  }

.card-2{ margin: auto;  }
.card-2 img {  display: block; margin: auto;  }
}

/* 內容區塊基礎樣式 */
.section {padding: 80px 20px; margin: auto;   max-width: 1200px; }
@media screen and (max-width: 840px) {
.section {padding:20px 0px; }     
}


.commitment { margin:auto auto 50px auto ;  border-radius:30px;  backdrop-filter: blur(8px); }
.commitment .title-2{margin-top: 0px;}
/* ==== Sustainable === */

.bg-sustainable {width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:100%  auto ; background-position:center;  background-attachment: fixed; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; } 
.bg-fixed {width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:100%  auto ; background-position:center;  background-attachment: fixed; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; } 
@media screen and (max-width: 1024px) {
.bg-sustainable { background-attachment: scroll; background-size:cover; }  
}
@media screen and (max-width: 767.98px) {
.tool-section-2 .bg-sustainable { background-attachment: scroll; background-size: contain; }     
}
.sustainable-mould{ width: 100%; padding:0px 0px 50px 0px; position: relative }
.sustainable-mould::before{ content: ""; width: 100%;height: 100%; background-color: rgba(0,0,0,.35); position: absolute; left:0px;top:0px;  }
.sustainable{ padding:5vw 2vw;   }
.sustainable .col { padding: 0; }
.sustainable .desc { display: flex; align-items: center;   margin: 15px auto; }
.sustainable .block-title { padding: 0 2vw;}
.sustainable .block-title-txt p{ margin: 0; font-size: clamp(.9rem, 2.3vw, 1.05rem); font-weight: 400; color: #fff; line-height: 1.75rem;}
@media screen and (max-width: 767.98px) {
.sustainable .block-title-txt p{ line-height: 1.375rem;}
}
@media (max-width:320px) {
.sustainable .block-title { padding: 0px;}    
}


/* ESG 指標區塊 (使用卡片式設計) */
.esg-metrics {margin:50px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.esg-card {  padding: 40px; border-radius: 15px; text-align: center;  transition: all 0.3s ease; backdrop-filter: blur(14px);}
.esg-card.green-card{background-color:rgba(55, 174, 175, .15); border: solid 1px rgba(55, 174, 175, .5); }
.esg-card.yellow-card{background-color:rgba(255, 193, 7, .35); border: solid 1px rgba(255, 193, 1, .5); }
.esg-card.pur-card{background-color:rgba(139, 91, 187, .35); border: solid 1px rgba(139, 91, 187, .85); }
.esg-card h3 { font-size: 1.5rem;font-weight:700;  margin-bottom: 20px; color: #fff;   }
.esg-card p{   color: #fff;   }
@media screen and (max-width:320px) {
.esg-metrics {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  }
.esg-card { padding:20px; }    
}
@media screen and (max-width:280px) {
.esg-metrics {  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));  }

}


:root {
--color-gov: #c084fc; --color-eco: #60a5fa;
--color-env: #a3e635; --color-soc: #fbbf24;
}

.chart{padding: 80px 20px;  }
.chart-container { position: relative; width:700px; height: 700px;  margin: auto}
.chart-container > svg { overflow: visible;}
@media screen and (max-width: 767.98px) {
 .chart{padding: 80px 0px;  }   
.chart-container { width:380px; height:380px; }    
}
@media screen and (max-width:320px) {
.chart-container { width:300px; height:300px; }        
}
@media screen and (max-width:280px) {
.chart-container { width:280px; height:280px; }        

}


svg { width: 100%; height: 100%; }
/* 11等分扇形樣式 - 僅保留 Hover */
.slice { fill: none; stroke-width: 90;  transition: all 0.3s ease; opacity: 0.8;  }
/* 滑鼠移入時的特效 */
.slice:hover {  opacity: 1;  stroke-width: 100;  filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); }
.slice-text {font-size: 14px; font-weight: bold; fill: #333;pointer-events: none; text-anchor: middle; dominant-baseline: middle;text-shadow: 0px 0px 4px rgba(255,255,255,0.8);}
.category-label { font-size: 20px; font-weight: 900; pointer-events: none; }
/* 中心區域 - 靜態標誌 */
.center-hole {position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);width: 170px; height: 170px;background: white; border-radius: 50%;display: flex; justify-content: center; align-items: center;text-align: center; z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.08);}
#static-logo { color: #333; font-size: 20px; font-weight: bold; }

/* 動態旋轉外環 */
#rotating-outline {transform-origin: center;animation: rotate-outline 30s linear infinite;pointer-events: none;}
@keyframes rotate-outline {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.outline-circle { fill: none; stroke: #e2e8f0; stroke-width: 2; stroke-dasharray: 5 15; }
.outline-dot { fill: #a0cfee; opacity: 0.8; }

/* ESG -1 */


/* 卡片設計 */
.card-blcok{ width: 100%; padding:0px 0px 50px 0px;}

.card-customt {height: 100%; padding:50px; margin:20px auto; display: flex; flex-wrap: wrap;flex-direction: column; background:#e4efef;  border: solid 1px #b8d2d3;  border-radius: 15px;transition: transform 0.3s;}
.card-customt .item{display: flex; flex-wrap: wrap;}

.card-customt .w5{ width: calc(50% - 40px);  margin:30px 20px ; }
.card-customt .photo{border-radius:15px; }
.card-customt h3{ font-size: clamp(1.15rem, 2.3vw, 1.75rem);color:#157372; font-weight: 600}
.card-customt p{ font-size: clamp(1rem, 2.3vw, 1.15rem);color:#157372;font-weight: 500 }
.list-unstyled{ width: 100%;margin: 10px auto; list-style: none;  position: relative}
.list-unstyled li{position: relative; padding-left: 28px; margin-bottom: 10px; font-size: clamp(0.9rem, 2.3vw, 1rem);}
.list-unstyled li::before{content: ""; width: 16px; height: 16px; position: absolute; left:0px; top:8px; background: url("../images/index/dot.svg") no-repeat left top;}  
/*title-item*/
.title-item{ width: 100%; margin-bottom: 20px; display: flex; flex-wrap: nowrap; align-items: flex-end}
.title-item .icon-box { width: 80px; margin: auto 0px;}
.icon-box i,.icon-box i img{ width: 62px; height: 62px;}
.icon-box-s i,.icon-box-s i img{ width:56px; height: 56px;margin: auto 10px auto auto}
@media screen and (max-width: 840px) {
.card-customt .w5{ width:100%;margin:30px auto; }
.card-customt  img.photo { max-width: 80%!important; display: block; margin: auto}
}
@media screen and (max-width:767.98px) {
.card-customt {padding:25px;}
.card-customt  img.photo { max-width: 100%!important;}   
}
@media screen and (max-width:320px) {
.card-customt {padding:15px;}
}

/* 數據工具區塊 */
.tool-section {padding: 80px 0;background-color:#157372;color: #fff; position: relative }
.tool-section::before {width: 10%; height: 30%;  content: ""; right: 0px;  top: 70%;  opacity: 1;  background: #fff; clip-path: polygon(100% 0, 0% 100%, 100% 100%); position: absolute;  z-index: 1;}
.tool-section::after {width: 10%; height: 30%;  content: ""; right: 0px;  top: -29%;  opacity: 1;  background:#157372; clip-path: polygon(100% 0, 0% 100%, 100% 100%); position: absolute;  z-index: 1;}
.tool-card { margin-bottom:30px;background: rgba(255,255,255,0.1);border: 1px solid rgba(255,255,255,0.2);padding: 30px;border-radius: 10px;}
.tool-card h3{ line-height: 1.75rem;  font-size: clamp(1rem, 2.3vw, 1.125rem);font-weight: 600; }
.hero-title{ margin-bottom: 10px; font-size: clamp(1.15rem, 2.3vw, 1.75rem);font-weight: 600;}
.tool-section .photo{ border-radius: 15px;}

.card-wrap{display: flex; flex-wrap: wrap; gap: 3%;}
.card-wrap .tool-card { display: flex; flex-wrap: wrap; align-items: center;  flex-direction: column; flex: 0 1 48%;  ;}

@media screen and (max-width: 1024px) {
.tool-section::before { height: 10%; top:90%; } 
.tool-section::after { height: 10%;  top: -10%; }   
}
@media screen and (max-width: 840px) {
.tool-section .block-pic img.photo{ max-width: 80%!important; display: block; margin: auto}    
}

@media screen and (max-width: 767.98px) {
.card-wrap .tool-card { flex: 0 1 100%;}
.tool-card { padding:10px; }    
.tool-section .block-pic img.photo{ max-width: 100%!important;}       
}

.card-section{ padding: 100px 0; position: relative}
.card-section .block-txt{ width: 60%; margin: auto; padding-bottom: 100px;}
@media screen and (max-width: 840px) {
.card-section .block-txt{ width: 100%;  padding-bottom: 0px;}
}
@media screen and (max-width: 767.98px) {
.card-section{ padding: 40px 0;}   
}

/* ==== 底圖 === */
.bg-background { width: 100%;  background-image: attr(src url); background-repeat: no-repeat; background-size:80% auto;background-position: right bottom; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0;   } 


/* how */
.how { padding:20px 0px; max-width: 100%;  margin: 0 auto;  }
/* ESG -2 */
.core { padding: 20px; max-width: 1200px;  margin: 0 auto;  }
@media screen and (max-width: 840px) {
.core { padding: 20px 0px;  }    
}
.section-title { text-align: center;  margin-bottom: 50px; position: relative; }
.section-title h2 {margin-bottom: 20px; font-size: clamp(1.5rem, 2.3vw, 2.75rem);font-weight:900; color:#157372;letter-spacing: 2px;   }
.section-title p {margin-bottom: 20px; font-size: clamp(1rem, 2.3vw, 1.375rem); font-weight:500; letter-spacing: 2px;   }

.section-title::after { content: '';  width: 60px;  height: 3px; background: #157372;; display: block; margin: 15px auto;  }
.pillar-container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  gap: 30px; }
.pillar-card { padding: 40px;  border-radius: 12px;  border-bottom: 5px solid transparent; transition: all 0.4s ease; /* 平滑過渡 */  text-align: center;  box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.pillar-card h3 { margin-bottom: 15px;  color:#157372;; font-size: clamp(1.125rem, 2.3vw, 1.5rem);font-weight: 600;letter-spacing: 2px; }

@media(max-width:767.98px) {
.pillar-container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }   
}
@media(max-width:320px) {
.pillar-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }   
}

/* esg 具體內容區塊 */
.content-block { display: flex;  flex-wrap: wrap;  align-items: center; margin-top: 50px; gap: 40px;  }

.content-block.border-toom{ padding-bottom: 30px;  border-bottom: solid 1px #157372;}
.content-text { flex: 1;  min-width: 300px;  }
.content-block h3{ margin-bottom: 20px; color:#157372; font-size: clamp(1.125rem, 2.3vw, 1.75rem);font-weight: 600;letter-spacing: 2px; }
.content-block h4{margin:20px 0px 10px 0px;  color:#157372; font-size: clamp(1rem, 2.3vw, 1.5rem);font-weight: 600;letter-spacing: 2px; }

@media(max-width:767.98px) {
.content-block { margin-top:20px;  }
}
@media(max-width:320px) {
.content-text { min-width: 250px;}   
}


.highlight-box { background:#157372; ; color: #fff;font-weight: 600;   padding: 30px;  border-radius: 0 30px 0 30px;  margin: 30px 0;  }
.benefit-list { list-style: none; padding: 0;  }
.benefit-list li { padding: 10px 0px 0px 20px; border-bottom: 1px solid #eee; display: flex; position: relative }
.benefit-list li::before { content: '✔'; color: #157372;  margin-right: 15px; font-weight: bold; }
.bg-color-blue-light{background:#dbe3e3;}
.grid-wrap { display: grid;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  gap: 30px; }
.grid-wrap-2 { display: grid;  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));  gap: 10px; }

.grid-card { transition: all 0.4s ease;  text-align: center;   }
.grid-flex-end{justify-content: flex-end}
.grid-flex-start{justify-content: flex-start}
figure.pic-radius{ border-radius:15px; overflow: hidden}
figure.pic-radius img{ border-radius:15px; overflow: hidden}

@media(max-width:1280px) {
.grid-card { padding: 15px 0px;position: relative;z-index:2}
}
@media(max-width:1160px) {
.grid-wrap{ width: 100%; }
}
@media(max-width:767.98px) {
.grid-wrap { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  gap: 30px; }
}
@media(max-width:320px) {
.grid-wrap { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap:10px; }
}
.content-block.m-b{margin-bottom: 100px} 
@media(max-width:1024px) {
.content-block.m-b{margin-bottom:0px;padding-bottom: 50px;} 
}

.bg-esg {width: 100%; background-image: attr(src url); background-repeat: no-repeat;background-size:80% auto;background-position:right bottom; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  } 



/* 治理卡片區塊 */
.governance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 60px 0; }
.pin { padding: 25px; background: linear-gradient(152deg, rgba(255, 255, 255, 1) -5%, rgba(186, 217, 214, .3) 10%, rgba(248, 252, 255, 1) 45.3%, rgba(206, 225, 225, .3) 75%, rgba(176, 223, 218, .7) 90%, rgba(66, 144, 137, .8) 100%); border: 1px solid #fff; border-radius: 8px; transition: transform 0.3s, background 0.3s; cursor: pointer; }
.pin h3{margin-bottom: 30px;  color:#157372; font-size: clamp(1.125rem, 2.3vw, 1.75rem);font-weight: 600;letter-spacing: 2px;} 
.pin p{  color:#157372; font-size: clamp(1rem, 2.3vw, 1.125rem);font-weight: 600;letter-spacing: 2px;} 

/*永續價值*/
.four-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(48%, 1fr)); gap: 20px; margin: 60px 0; }



@media(max-width:767.98px) {
.governance-grid, .four-grid  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  margin: 30px auto; }    
}
@media(max-width:320px) {
.governance-grid, .four-grid  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  margin: 30px auto; }    
}



/* 流程圖區塊esg-6.html */
.process-flow { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 40px 0; }
.flow-chart { display: flex;  flex-wrap: wrap;  justify-content: start;  margin:50px auto;}
.flow-chart div { position: relative; min-width: 22.5%; max-width: 150px;  min-height: 80px;  margin: 1rem 0.5rem; padding:0.5rem; color: #eee;}
.flow-chart div::before,.flow-chart div::after { content: ""; display: block; position: absolute; left: 0; width: 100%;height: calc(50% + 0.5rem); background: #45b2b3;  z-index: -1;}

.flow-chart div::before { top: 0; transform: skewX(20deg);}
.flow-chart div::after { top: calc(50% + 0.5rem); transform: skewX(-20deg);}
.flow-chart div p { margin: 0 auto; font-size: 1rem; font-weight: 400; color: #fff;  max-width: 75%;}
.flow-chart div h2 { margin: 10px auto;  max-width: 75%;  min-height: 60px; font-size: 1.375rem; font-weight: 700; text-align: center; letter-spacing: 2px;  }

.flow-chart div:nth-child(1)::before,.flow-chart div:nth-child(1)::after{ }
.flow-chart div:nth-child(2)::before,.flow-chart div:nth-child(2)::after{ background:#8268b1; }
.flow-chart div:nth-child(3)::before,.flow-chart div:nth-child(3)::after{ background:#8abc70; }
.flow-chart div:nth-child(4)::before,.flow-chart div:nth-child(4)::after{ background:#e58a6b; }

/*  page-editor -----------------------*/
.page-editor {  margin: 0 auto;padding: 5vw 0px; letter-spacing: 0.02rem; color: #515151; position: relative;z-index: 0;}
.page-editor .titlebox{margin:70px auto 50px auto; }
.page-editor p{ font-size: clamp(.9rem, 2.3vw, 1.05rem); line-height: 1.875rem; font-weight: 400; margin: 0px 0px 10px 0px;   color: #515151  }
.page-editor blockquote{ width: 80%; margin: auto; font-size: clamp(1rem, 2.3vw, 1.75rem); font-weight: 600;line-height: 2.375rem; color:#212529 }

@media only screen and (max-width:1024px) {
.page-editor {  padding: 5vw 0px 0px 0px; }     
}

@media only screen and (max-width:840px) {
.page-editor blockquote{ width: 100%; line-height: 1.5rem;  }
}
@media only screen and (max-width:767px) {
.page-editor { padding:50px 0px 0px 0px;}
}



@keyframes rotate {
0% { transform: rotate(0deg) }
to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
0% { transform: rotate(0deg) scale(1) }
to { transform: rotate(-359deg) scale(1)  }
}

@keyframes rotateIt {
to { transform: rotate(-360deg); }
}

.milestone-block{ background: url("../images/index/img-grid-bg-white.svg") repeat left top;}

.time-nav { width:100%; margin:30px auto;  padding: 30px; }
.time-nav li{ width: 100%; margin:0px auto;padding: 30px; position: relative; z-index: 1; list-style: none;  display: flex; flex-wrap: wrap; justify-content: center; align-content:center; align-items: center;  transiion: all 0.3s linear 0s;  }
.nav-item{border-top: 2px solid #157372;  }
.nav-item .year{position: relative; display: inline-block; padding-top: 6px; font-size: 4rem;  font-weight: bold; font-family: "Montserrat", sans-serif; color: #157372;}
.nav-item .txt{min-height: 120px;}
.nav-item .deco { position: relative; width: 100%; padding-top: 24px;  border-bottom: 6px dotted #eee;}
.nav-item .point { position: absolute;  top: 16px;  display: inline-block;border-radius:3px;  border: 10px solid #157372;}
@media screen and (max-width:768px) {
.time-nav {  padding: 30px 10px; }
.nav-item .year{ font-size:2rem; }
.time-nav li{ padding: 30px 20px; }  
.time-nav .slick-prev,.time-nav .slick-next{top:-10px;}
.time-nav .slick-prev{left:auto; right:60px; }
.time-nav .slick-next{right:20px;}
}
@media screen and (max-width:320px) {
.time-nav {  margin:30px auto 0px auto;  padding:0px; }
.time-nav li{ padding: 30px 10px; }     
}


/* ==== about === */
.bg-global {width: 100%; background-image: attr(src url); background-repeat: no-repeat;background-size:100% auto;background-position:left bottom; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  } 
@media screen and (max-width: 840px) {
 .bg-global {  background-position:left top; }    
}

.global-mould{ width: 100%; padding:0;  position: relative }
.global{padding:0vw 2vw 5vw 2vw }
.global .block {  width: 50%; }
.global .block-pic { width: 50%; margin: auto;padding: 20px 40px; }
.global .block-title { padding: 0 2vw;}

.global-logo{ padding:0; display: flex; flex-wrap: wrap; justify-content: center; margin: auto}
.global-logo .images { width:150px; position: relative;  }
.global-logo .images img {  opacity:1; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100% !important; transition: 1s; }
@media screen and (max-width:1180px) {
.global{padding:0vw 0 5vw 0 }  
.global .block { width: 50%; padding: 4vw 0;}   
}
@media screen and (max-width: 840px) {
.global{padding:0}  
.global .block-title { padding: 0px;}   
.global .block { width: 100%; }   
.global .block-pic { width: 100%; padding: 20px; }
.global .desc {  margin: 15px auto;}
}


.locatio-icon{width: 100%;}
.icon-list{ display: flex;flex-wrap: wrap; margin: 0px; padding: 0 2vw ; list-style: none;}
.icon-list li{flex: 1 1 0%;margin:20px;position: relative }
.icon-list li .item{ padding:20px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;}
.icon-list li .number-t{width:auto; padding-bottom: 10px;  margin-bottom: 10px; font-size: 1rem; line-height: 1.5rem; font-weight:700; text-align: center;color:#000;  }
.icon-list li figure{width: 72px; height: auto; display: flex; margin: auto 0px; }
.icon-list li .number-b { color: #000;  text-align: center; position: relative }
.icon-list li .number-b span{  font-size:6.5rem;line-height: 6rem;  font-weight: 700;color: #000;  font-family: "Montserrat", sans-serif;  }
.icon-list li .number-b strong{  font-size:3rem; color: #000!important;  position: absolute; top:-30px;z-index: 2  }
@media screen and (max-width:840px) {
.icon-list li .number-t{ min-height: 60px; padding-bottom: 0px;  margin-bottom: 0px;  }	 
.icon-list{ padding: 0; }
.icon-list li .number-b span{  font-size:3.5rem;line-height:3rem;  }

}
@media screen and (max-width:767.98px) {
.icon-list li{flex: 1 1 100%;margin:0px;position: relative }
.icon-list li .number-b span{ font-size:2.5rem;  }

}
.bg-end-background { background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto ;background-position:left bottom;  background-attachment: fixed; position: absolute;z-index:-1;background-color: #173e0f;  width: 100%;  height: 100%; top: 0px; right: 0; bottom: 0; left: 0; transition: 0.8s 1s; -webkit-filter: brightness(0.35); }
@media (max-width: 1024px) {
.bg-end-background {  background-size:120% auto ;  }	
}

/*** ----------------------------------------
* animation slide-up-down
* ----------------------------------------*/
.slide-up-down { -webkit-animation: slide-up-down 1.7s ease-in-out infinite alternate both;  animation: slide-up-down 1.7s ease-in-out infinite alternate both; }
/* ------- */
@-webkit-keyframes slide-up-down {
0% {  -webkit-transform: translateY(0); transform: translateY(0); }
100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes slide-up-down {
0% { -webkit-transform: translateY(0); transform: translateY(0); }
100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 
}
@-webkit-keyframes rotate {
to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes rotate {
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* Global Markets*/
.bg-box{ background: url("../images/index/img-grid-bg-white.svg") repeat;}
.location{ padding: 5vw 0px;  background-image: linear-gradient(to bottom, #fff 0%,#d1dede 50%,  #fff 100%); position: relative; z-index: 0;} 
.location-office{ width:100%;  padding:0px 0px 5vw 0px;  }
.location .block-txt{ padding:0px 30px; }
@media(max-width:840px) {
.location .block-txt{ padding:0px; }   
}

@media(max-width:767.98px) {
.location-office{margin-top: -15px }
.location .block-txt{ padding:0px 0px; }	
.bg-box{ background-size: 20px; }

}


.office{ width:100%; display: flex; flex-wrap: wrap; justify-content: space-between;  margin: 0px auto; padding: 2vw 0; list-style: none}
.office.center{ justify-content: center}
.office li {width:calc(100%/3 - 40px); margin:20px 20px ; position: relative;   list-style: none; }
.office li .item{width: 100%;  display: flex; flex-wrap: wrap;  }
.office li .photo { width: 100%; height: auto; padding: 0px;  overflow: hidden; border-radius:12px;  }
.office li .photo figure{ width: 100%; padding-top:56.725%; height: 0; object-fit: cover;overflow: hidden; position: relative;  transition: all 0.5s ease 0s;}
.office li .photo figure img { max-width: none; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.office li .inner-body { position: relative;  width:100%; height: auto; padding:10px 0px 0px 0px;  z-index: 9;  }
.office li h3 {  font-size: clamp(1rem, 2.3vw, 1.375rem); font-weight: 700; color:#000;  margin:3px 0px 10px 0px; word-break: normal; word-wrap: normal }
.office li p {  font-size: clamp(0.9rem, 2.3vw, 1rem); line-height: 1.5rem; font-weight: 400; color:#222;margin:0px; }
.office li h4{  font-size: clamp(1rem, 2.3vw, 1.125rem);font-weight: 700; color:#000;  margin: 10px 0px; }
.office li ul{width: calc(100% - 40px) }
.office li ul li{width: 100%; }
.office li p strong{  color: #247372; font-weight: 400;}
@media (max-width:1024px) {
.office{ padding: 0px; }	

}

@media (max-width:767.98px) {
.office li {width:calc(100%/2 - 20px); margin: 10px;}
.office li ul{width: 100%;list-style: none;margin:2px 0px;  }
.office li ul li{width: 100%;list-style: none;margin: 1rem 0 1rem 0; }
 
 
}
@media (max-width:640px) {
.office li {width:100%; margin: 10px auto;}	
}



.lines{width: 100%;  }
.line { position: absolute; width: 1px; height:42%; top: 0; left: 25%; background: rgba(196, 209, 220, .4); overflow: hidden;}
.line::after { content: ""; display: block;  position: absolute;  height: 15vh; width: 100%; top: -50%; left: 0;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%); -webkit-animation: drop 7s 0s infinite; animation: drop 7s 0s infinite;  -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);}

.line:nth-child(1) {  height: 100%;margin-left: -15%;}
.line:nth-child(1)::after {-webkit-animation-delay: 2s; animation-delay: 2s;}
.line:nth-child(2)::after {height: 5vh;margin-left: -15%; }
.line:nth-child(3) { height: 50%;margin-left:50%;}
.line:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;}
.line:nth-child(4) { height: 100%;margin-left:65%;}
.line:nth-child(4)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;}

@-webkit-keyframes drop {
0% { top: -50%;  }
100% { top: 110%;  }
}

@keyframes drop {
0% { top: -50%;  }
100% {  top: 110%;  }
} 
@keyframes bg-circle {
0% { transform: translateZ(0)   }
10% {transform: translate(0%, -10%) translate3d(0px, 50px, 0px); }
25% { transform:translate(0%, -18%) translate3d(0px, 0px, 0px);   }
50% {  transform: translate(0%, -20%) translate3d(0px, 0px, 0px); }
70% { transform: translate(0%, -10%) translate3d(0px, 50px, 0px);    }
to {  transform: translate(0%, -5%) translate3d(0px, 0px, 0px); }
}

.hrefbox {  display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center; align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center; justify-content: center; max-width: 305px; width: 100%; height: 66px; background: -moz-linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%); background: -webkit-linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%); background: -o-linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%);  background: rgb(0,0,128); background: linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%); color: #333; font-weight: 700;   font-size: clamp(.875rem, 2.3vw, 1rem); }

.hrefbox span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(100% - 8px); height: calc(100% - 8px); background-color: #fff;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
@media only screen and (min-width: 1025px) {
.hrefbox:hover span { background-color: transparent; color: #fff; }
}


/*ul dot style*/
.ingredients { list-style: none; margin: 2rem 0; padding: 0;}
.ingredients li{ list-style-type:square; margin: 1rem 0 1rem 1rem; padding: 0; font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.5rem; }
.ingredients li ::marker { font-variant-numeric: normal;  line-height: 1.2; font-weight: 500;}
/*ul step style*/
.instructions { list-style-type: decimal-leading-zero; margin: 2rem 0 2rem 2rem; padding: 0;}
.instructions ::marker { font-variant-numeric: normal;  line-height: 1.2; font-weight: 500;}
.instructions-step { margin: 2rem 0;  padding-left: 1rem; position: relative;}
.instructions-step:after { content: "";  display: block; position: absolute;  background: #000; width: 1px;  inset: 2rem auto -1.5rem -1rem;}
.instructions-step:last-child:after { display: none;}

.ingredients-item {  border-top: 1px solid #000;  display: grid;  gap: 2rem;  padding: 1rem 0;  grid-template-columns: 3rem 1fr;}
.ingredients-item:first-child { padding-top: 0;  border: none;}
.ingredients-item:last-child { padding-bottom: 0;}
.ingredients-value { font-weight: 600; text-align: center;}
/*table css*/
:root {   --borderColor: rgba(0,0,0,.75);}
.recipe .datatable { width: 100%; max-width: 600px;  border-spacing: 0; margin:50px auto;background-color:#fff; box-shadow: 0px 0px 13px 0px #dbdee0;}
@media (max-width: 991.98px) {
.recipe .datatable { width: 100%;}
}

.recipe .datatable thead {  letter-spacing: 0.05em;  text-transform: uppercase;  }
.recipe .datatable tbody { font-size: .9rem ;border: 2px solid var(--borderColor); }
.recipe .datatable th { font-size:.9rem; font-weight: 700; color:#000;  padding:10px; text-align: left; white-space: nowrap; border-right: 1px solid var(--borderColor); border-top: 1px solid var(--borderColor);  border-bottom: 1px solid var(--borderColor); background-color: rgba(168,206,125,.3);}
.recipe .datatable td { font-size:.9rem; font-weight: 400;padding: 10px; white-space: nowrap; border: 1px solid var(--borderColor);   }
.recipe .datatable thead td{ color: #000;  font-weight: 700; }
.recipe .datatable td:nth-child(odd) { background-color: rgba(168,206,125,.3);} 
.recipe .datatable td.bg-white { background-color:#fff} 
.recipe .datatable td.bg-green { background-color: rgba(168,206,125,.3);} 

.recipe .datatable td .wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center}
.recipe .datatable span.txt-r{ display: flex; flex-wrap: wrap;text-align: right}
.recipe .datatable span.txt-name{ display: flex; flex-wrap: wrap;flex-direction: column;  }

/*about-1.html css*/
.capability{ width: 100%; margin-bottom: 60px; position: relative }
.capability.section{padding:5vw 0px 0;}
.asrs.section{padding: 0px 0 5vw;}

.capability .titlebox{margin: 30px 0px;}
.c-pic{ width: 40%; padding:0px 20px;  }
.c-pic img{ border-radius:15px; overflow: hidden}
.c-pic-r2{ width: 50%; padding:0px 20px;}
.c-pic-r2 img{ border-radius:15px; overflow: hidden}
.c-txt{ width: 60%; padding:0px 20px;}

@media (max-width: 840px) {
.c-pic{ width: 80%; padding:0px 20px; margin: auto }

.c-txt{ width: 100%; padding:0px 20px;}

}
.capability h3{ font-size: clamp(1rem, 2.3vw, 1.5rem); font-weight: 700;line-height:2rem; margin-bottom: 20px; }
.capability h4{ font-size: clamp(.9rem, 2.3vw, 1.125rem); font-weight: 400;line-height:1.5rem;  }
.asrs h3{ font-size: clamp(1rem, 2.3vw, 1.5rem); font-weight: 700;line-height:2rem; margin-bottom: 20px; }
.v-center{align-items: center; justify-content: center}

.quality-list{width: 100%; margin: auto; padding: 0px; list-style: none}
.quality-list li{width: 100%}





/*how*/
.how .content-block {  padding: 50px; margin: 20px auto; display: flex; flex-wrap: wrap; align-items: flex-start;  background: #e4efef; border: solid 1px #b8d2d3; border-radius: 15px; transition: transform 0.3s; }
.how .content-block:before { content: ""; position: absolute; left:10%;  bottom:-20vh;height: 20vh;  width:5px; border-left:10px solid #37aeaf;}
.how:last-of-type .content-block:before{display: none}

.how .content-text{   padding:40px 0px 0px 40px; width: 50%;  margin: 0}
.how .content-pic { width: 50%; }
.how .grid-wrap { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));  gap: 15px; }
.how .grid-card {margin: auto}


@media(max-width:1280px) {
.how .grid-wrap{ width: 100%;grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));  gap: 10px; }
}
@media (max-width:840px) {
.how .content-pic { width: 100%; }
.how .content-text{  width: 100%; padding:50px 0px 0px 0px;  height:auto; }  
}
@media (max-width:767.98px) {
.how .content-block {  padding:10px 20px; height:auto;  }
}

.circle-number {width:80px;height:80px;margin: auto;display: flex;flex-wrap: wrap;justify-content: center;align-items: center; border-radius: 99rem; background: url("../images/index/bg-paten.jpg") repeat left top; background-size: cover; position: absolute; left:110px;top:-30px; box-shadow: 2px 5px 15px rgba(0,0,0,.3)}
.circle-number b {  font-size: 2rem;color:#157372; font-weight: 900 }

@media (max-width:1112px) {
.circle-number { left:70px; }
}
@media (max-width:840px) {
.circle-number { left:40px; }
}

@media (max-width:767.98px) {
.circle-number { left:20px; }
}

.steps { position: relative; padding: 0 1rem 0 3.5rem; margin: 2rem 0 0; list-style: none;}
.steps-item { position: relative;  min-height:60px; counter-increment: list; padding-left: 0.5rem;}
.steps-item:before { content: ""; position: absolute; left: -1.5rem; top: 50px;  height: 54%;  width: 2px;  border-left: 2px solid #ffc107;}
.steps-item:after { content: counter(list); position: absolute; top:2px; left: -2.5rem; width:36px; height: 36px; border-radius: 50%; background: transparent; color:#298182; font-weight: 400; font-size: 13px; line-height: 2rem; text-align: center; border: 1px solid #ffc107;}
.steps-item:last-child:before { border: none;}
.steps-item.steps-item--completed { opacity: 1;  }
.steps-item.steps-item--completed:after {  content: "\2713"; font-weight: 700;  background:#ffc107;  color: #fff;}
.steps-item.steps-item--active:after { background:#ffc107; color: #fff;}
/*.how different colors*/
.how .steps-item { margin:80px 10px; counter-increment: list; padding-left: 0.5rem;}
.how .steps-item:after { top:5px; background: #157372; color:#fff;   border: 1px solid #157372;}
.how .steps-item:before {  top: 30px;  height: 150%;  width: 2px;  border-left: 2px solid #157372;}
.how .steps-item:last-child:before{display: none}

@media (max-width: 767.98px) {
.how .steps-item { margin: 10px; }   
}
.steps-title { padding: 0.5rem 0 0.5rem; margin: 0;font-size: clamp(.9rem, 2.3vw, 1.05rem);  font-weight: 400; line-height: 1.75rem; color: #212529 }
.steps-title strong{color:#ffc107;}
.steps-info { font-size: 13px;}


.step-box { width: 100%;padding: 0 0 0 1rem; margin:1rem 0; }
.step-box li { width: 100%; height: auto;  margin:5px 0px; color:#000; }  
.step-box li .inner { padding: 0.2rem 0 0.5rem; margin: 0; font-size: clamp(.9rem, 2.3vw, 1.05rem);  font-weight: 500;line-height: 1.65rem;  }


.step-box-2 { width: 100%;padding:0; margin:0px 0px 10px 0; }
.step-box-2 ul { width: calc(100% - 20px); padding:10px 20px; margin:0px 0px 0px 20px; display: flex; flex-wrap: wrap; list-style: none}
.step-box-2 li { width: calc(100%/3); padding:0px;margin:5px 0;  font-size: .875rem; font-weight: 500;line-height: 1.375rem;   list-style:disc}  
.step-box-2 li .inner { padding: 0.2rem 0; margin: 0;font-size: clamp(.9rem, 2.3vw, 1.05rem);  font-weight: 500;line-height: 1.65rem;  }

.bg-box-light{background:rgb(29,153, 210,10%);   backdrop-filter: blur(15px); border: 4px solid rgba(255, 255, 255, 0.18);  border-radius:5px;}
.inner-number { width: auto;  margin:0px 0px 0px 20px; padding: 5px 20px; font-size: clamp(.9rem, 2.3vw, 1.05rem);  font-weight: 500;line-height: 1.65rem; color:#003567; background-color:#edf1f5; position: relative;}

@media (max-width: 767.98px) {
.step-box-2 li { width: calc(100%/2); padding:0px;margin:5px 0;  font-size: .9rem; font-weight: 500;line-height: 1.375rem;  }  
}
@media (max-width: 420px) {
.step-box-2 li { width:100%;  }  
}

.step-2{position: relative}
.step-list { width: 100%;  height: 100%;  margin:3% auto; padding: 0px;  list-style: none; display: flex; flex-wrap: wrap;  justify-content: flex-start; align-items: stretch; position: relative}
.step-list li{  width: calc(100%/3 - 20px); margin: 10px; background:rgb(29,153, 210,10%);;  backdrop-filter: blur(15px); border: 4px solid rgba(255, 255, 255, 0.18);  border-radius:15px; z-index: 1; position: relative}
.step-list.w2 li{  width: calc(100%/2 - 20px); margin: 10px; background:rgb(29,153, 210,10%);;  backdrop-filter: blur(15px); border: 4px solid rgba(255, 255, 255, 0.18);  border-radius:15px; z-index: 1; position: relative}

.step-list .inner{  padding:30px 20px;  font-size: clamp(.875rem, 2.3vw, 1.275rem); font-weight: 500;line-height: 1.65rem; word-break:normal; word-wrap: normal}
.step-2 .circle{  opacity: .5;filter: blur(15px); position: absolute; width: 300px; height: 300px; transform: translate(-5rem, -15rem); z-index: -1; border-radius: 50%; background: linear-gradient(to right,  #0062a3, #29ABE2);  }
.step-2 .circle:nth-child(2){  filter: blur(35px);width: 200px; height: 200px; background: linear-gradient(to right, #F15, #F15A2A); transform: translate(55rem, -45rem);}
@media (max-width: 1112px) {
.step-list .inner{ padding:30px 10px; font-size: clamp(.875rem, 2.3vw, 1.175rem); }	
}
@media (max-width: 840px) {
.step-list li{ width: calc(100%/2 - 20px);}
}
@media (max-width: 767.98px) {
.capability{  margin-bottom:10px;  }
.step-list li{ width: 100%; margin:10px auto}
.c-txt{ width: 100%; padding:0px;}
.c-pic{ width: 100%; padding:0px;  }
.c-pic-r2{ width: 100%; padding:0px; margin-bottom: 20px;}    
}


/*---------------------------------------------------------------------*/
/*  202051205 certification.html
/*---------------------------------------------------------------------*/
.iso-wrap { margin-bottom: 60px; padding-top: 80px; padding-bottom: 60px; border-top: 1px solid #ddedf6;}
.iso-column { width: calc(33.33333% - 13.33333px); } 
.iso-pic { width: calc(66.66667% - 6.66667px);   margin-left: 20px;}

.iso {width: 100%;margin: auto; padding: 0px; display: flex; flex-wrap: wrap; list-style: none}
.iso li{width: calc(100%/3);  margin:25px 0px;  border-right: 1px solid #ddedf6; box-sizing: border-box;  display: flex; flex-wrap: wrap; justify-content: center;  align-items: center}
.iso li figure { width:calc(100% - 50px); padding: 10px 20px;   position: relative;}
.iso li figure img{margin: auto;}
.a-title{position: relative;margin-top:50px }
.a-title h2 { margin-bottom: 0px; font-size:2rem; font-size: calc(1.125rem + 1.0416666667vw);font-weight: 500; line-height: 1.23; letter-spacing: normal;  color:#004098; }
.a-title:before { width: 10px; height: 10px; content: ""; position: absolute; top: 10px;  left:-10px;   background-color: #f38054;  border-radius: 50%;  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
@media (max-width: 1112px) {
.iso-column { width:100%; max-width:100%; padding-bottom: 0px;margin-bottom: 30px;} 
.iso-pic { width:100%;max-width:100%; margin-left: 0;}
.iso li figure {width:calc(100% - 40px);  padding: 10px 20px;  }
.a-title{ margin-left: 20px; }
}
@media (max-width:767.98px) {
.iso li figure {width:calc(100% - 20px);  padding: 10px;  }
}



.esg{ list-style:none; margin-bottom: 20px 0px; padding: 0px;   }
.esg li{margin: 10px 0px;}
.esg .item{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.esg .depiction{ width: calc(100% - 100px); padding-left: 30px; font-size:1.125rem; font-weight: 500; line-height: 1.23; letter-spacing: normal;}
.esg-icon{ width: 100px; height: 100px;  margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #fff; border-radius:50%; box-shadow: 2px 5px 8px rgba(0,0,0,.2)  }
.esg-icon img{  width: 80px; display: block; margin: auto; filter:invert(100%) brightness(100) grayscale(1)}

.esg .half{  display: flex; flex-wrap: wrap;  }
.esg .half li{ width: calc(100%/2);display: flex }


.esg li .box-blue-light{ background-color: #50c4b9}
.borde-blue-light{  border:solid 1px #50c4b9; background-color:rgba(255,255,255,.5);  }
.color-blue-light{  color:#50c4b9;   }



.esg-block{width: calc(100%/3 - 40px);  margin: 10px 20px; padding: 30px;   backdrop-filter: blur(8px); }
.borde{border-radius:30px; box-shadow:0px 3px 5px rgba(0,0,0,.2)}
.esg-block h3{ text-align: center; margin-bottom: 20px;}
.esg-block p{min-height: 120px;}
.esg-block figure{margin: auto; display: block; text-align: center;}
.esg-pic{width: 100%; max-width:40%; margin: auto; display: block}
@media (max-width:840px) {
.esg-block{width: calc(100%/2 - 40px);  margin: 10px 20px; padding: 30px;  }   
}
@media (max-width:767.98px) {
.esg-block{width: calc(100%  - 40px);  margin: 10px auto; padding: 30px;  }   
}


.step-box.half{  display: flex;flex-wrap: wrap }
.step-box.half li  { width: calc(100%/2);  }  
.esg-block ul li { margin-bottom: 5px;  font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 400;line-height: 1.5rem;  }
@media (max-width:840px) {
.step-box.half li  { width:100%;  }  

}


.size-16{ font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.5rem;  }
.size-weight{ font-weight: 500; }



/*HOW.htm
=================================*/
.solution{width:100%; margin:auto;  padding: 0px;list-style: none; display:flex; flex-wrap: wrap; align-items: center;align-content: center;  justify-content: center; position: relative }
.solution:after{content: ""; width:100%; height:100%;position: absolute;z-index: -1; right:0; top:0; background: url("../images/index/a-line.svg") no-repeat right 45%; background-size: 90% auto;opacity: 0.7; }
.solution li {width:calc(100%/5 - 100px); margin:50px; cursor: pointer; position: relative;}

.solution li::before {  width:36px; height: 36px; content: attr(data-content); font-size: 1.125rem;  line-height: 1.75; text-align: center;  font-weight: 500;   color: #fff;  left:10px; top:10px;  opacity: 1; position: absolute; z-index: 3; background:#37aeaf; border-radius:50%;  }
.solution li:after{ content: ""; width: 100%; height:30px; position: absolute;z-index: -1; right:-40%; top:12vh; background: url("../images/index/arrow-r.svg") no-repeat right center; }
.solution li:nth-child(5):after,.solution li:last-child:after{display: none;}
.solution li .item { width: 100%; padding: 10px;display:flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: auto; border-radius:25px;border:solid 2px #f0f0f0;background:#f0f0f0;}
.solution li figure{  width:120px;height:120px;margin: auto; padding: 10px;}
.solution li span{  width:100%;min-height: 72px; font-size: clamp(.9rem, 2.3vw, .95rem);color: #344a4a; font-weight:500; line-height: 1.5rem;text-align: center;  }
@media (max-width:1112px) {
.solution{width:100%;}	 
.solution:after{background-position:right 52%; }	
.solution li {width:calc(100%/5 - 40px); margin:50px 20px; }
}

@media (max-width:840px) {
.solution li {width:calc(100%/5 - 20px); margin:50px 10px; }
.solution li::before { left:0px; top:0px;  opacity: 1; position: absolute; z-index: 3; background:#37aeaf; border-radius:50%;  }
.solution:after{ width:100%; height:100%;  background-position:right 52%; }
.solutionl i:after{ content: ""; width: 100%; height:30px;  right:-22%; top:6vh;   }
.solution li figure{  width:90px;height:90px; }     
}
@media (max-width:767.98px) {
.solution{width:90%; margin:auto; flex-direction: column   }
.solution:after{display: none;}
.solution li {width:200px; margin:30px auto;  }
.solution li:after{   width: 100%; height:30px;  z-index: -1; left:0; top:auto;bottom:-30px; background: url("../images/index/arrow-r.svg") no-repeat center;-moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);  }
.solutionli:nth-child(4):after,.solution li:nth-child(5):after{display: block;}
}


/*hover*/
.solution li .item:hover, .solution li .item:focus { background-color:#f0f0f0; border:solid 2px #37aeaf;box-shadow: 1px 1px  8px 3px rgba(175, 175 ,175,.3);   animation: pulse 1s; box-shadow: 0 0 0 2em transparent;}
.solution li .item:hover figure img{   }
.solution li .item:hover span{color:#37aeaf;}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(146, 148, 248, 0.4);  }
}

@keyframes rotate {
0% { transform: rotate(0deg) }
to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
0% { transform: rotate(0deg) scale(1) }
to { transform: rotate(359deg) scale(1)  }
}

@keyframes rotateIt {
to { transform: rotate(-360deg); }
}

.w8{width: 80%; margin: auto}
@media (max-width:840px) {
.w8{width: 100%;}     
}
.bg-how{background:#e4efef;}

.company-video { max-width: 800px; margin: 0 auto;}
.company-video-name { background: rgba(0,0,0,.85); padding: 20px; color: #ee7000; font-size: 17px; margin-bottom: 40px;}
.video-container {position: relative;padding-bottom: 51.5%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.company_text { max-width: 780px; padding: 0 20px; margin: 0 auto; text-align: left;  line-height: 1.5;}

.video_ctrl {position: relative;padding-bottom: 50%;padding-top: 30px;height: 0;overflow: hidden;    margin: 30px 15px;}
.video_ctrl iframe{position: absolute; left: 0;width: 100%;height: 100%;top: 0;bottom: 0;}