.main-area.top { background-color: transparent; }   
.font-larger{ font-size: clamp(1.25rem, 2.3vw, 2.125rem);line-height:2rem; font-weight: 400;  padding:5px; margin-bottom: 10px;  color:#d14c34;  } 
.font-sign{ font-size:120px; font-weight: 700;  color:#d14c34; letter-spacing: 3px;  opacity: .2;  } 
@media (max-width: 840px) {
.font-sign{ font-size:72px;   } 
	
}
@media (max-width: 576px) {
.font-sign{ font-size:clamp(2.5rem, 12.500vw, 4.5rem);}
}
@media (max-width: 480px) {
.font-larger{ margin-bottom: 0px; padding:0px 0px 5px 0px;} 	
}
 
.main-about{ position: relative; margin:0px; padding:60px  0px 30px 0px;   }
@media (max-width:767.98px) {
.main-about{ padding: 30px 0px; }    
}
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}

.block-full{width:80%;  margin:0px auto; padding:40px 0px; position: relative; }
@media (max-width:768px) {
.block-full{width:100%;padding:0px 5px; }    
}
@media (max-width:767.98px) {
.block-full{padding:0px; }    
}




/*----------------------------------------/
.concept
---------------------------------------- */
  
.concept .col { padding:35px 0px;}
.col.grid { display: flex; align-items: center; flex: 0 0 50%; }
.col.desc { display: flex; align-items: center; flex: 0 0 50%;padding: 0px 20px;  }
.block-pic {width:50%; margin:0px auto; text-align: center; position: relative;overflow: hidden;  }
.card-pic{ width: 100%;  height: auto; margin: auto ; border-radius:30px; overflow: hidden}
.card-pic img{ border-radius:30px; }
.block { width: 50%; margin:0 auto; position: relative;z-index: 9;}
@media (max-width: 1024px) {
.col .desc {align-items: flex-start; }
.card-pic{ margin:0px  0px 0px 20px;  }
}



@media (max-width: 992px) {
.concept .col { padding:30px 0px;}
.col.desc { flex: 0 0 100%;padding: 40px 20px; }
.col.grid { flex: 0 0 100%; margin-bottom: 30px;}
.block-pic {width:100%;}	
.card-pic{ margin:0px;}	
.block {width: 100%; margin: 0px; }  
}
@media (max-width: 480px) {
.concept.col { padding:30px 0px;}	
.col.desc { padding: 0px; }		
.card-pic,.card-pic img{ border-radius:0px; }
}




.block::after{  width:200%; content: attr(data-content);color:rgba(209,76,52,.1); font-size: 120px; font-weight: 700;letter-spacing: 2px; word-wrap: normal;  left:10%; top:-15%;position: absolute; z-index:2;  animation:fadeInUp 1s both 1s;   }
@media (max-width: 1160px) {
.block::after{  left:12%; top:-30px; }
}
@media (max-width: 840px) {
.block::after{ left:5%;  font-size: 72px;  }
}
@media (max-width: 320px) {
.block::after{ left:5%;  font-size: 60px;  }
}
.block p{ width: 100%;  font-size: clamp(.9rem, 2.3vw, 1.125rem); line-height:2rem;font-weight: 400;  margin-bottom: 10px;  color:#3f3a39;  }
.block p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #3f3a39; }


.block-txt{width:100%; margin:0px auto; padding: 30px 0 30px 12%;}
.block-txt p{margin-bottom: 10px;  font-size: clamp(.9rem, 2.3vw, 1.125rem); line-height:2rem;font-weight: 400;   color:#3f3a39; }
@media (max-width:992px) {
.block-txt{ padding:30px 0;}
 }

.txt-full{width:100%; margin:0px auto; padding:0px 60px 0px 0px;}
.txt-full p{margin-bottom: 10px; font-size: clamp(.9rem, 2.3vw, 1.125rem); line-height:2rem;font-weight: 400;   color:#3f3a39; }
@media (max-width:992px) {
.txt-full{ padding:0px;}
 }
@media (max-width:767.98px) {
.txt-full{ padding:0px;}
 }





/*----------------------------------------/
esg
---------------------------------------- */
.title-box { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; margin-top: 100px; }
.title-box .main-title {  margin:auto 8vw auto 2vw; }
.title-box .subtitle  h2{width:100%; margin:0px 0px 10px 0px;  font-size: clamp(1.5rem, 2.3vw, 4rem);  color:#333; font-weight:400;  }
.title-box .subtitle { -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1; color: #333; }
 @media (max-width:840px) {
.title-box {  flex-direction: column; align-items: center; margin: 50px 0px; }	 
.title-box .main-title {  margin:auto ; }

}

.bg-globe{background: url("../images/index/bg-globe.jpg") no-repeat  right  bottom #fff; background-size: 80%  auto; position: relative;z-index: 0; }
.bg-esg{background: url("../images/index/bg-esg.jpg") no-repeat  right top #fff; background-size:100%  auto; position: relative;z-index: 0; }
.esg {padding: 70px 0 0;}
.esg .esg-wrap:nth-child(even){flex-direction: row-reverse}
.esg-wrap{ padding:35px 0px;display: flex; flex-wrap: wrap; align-items: center }

 
.col.esg-pic { flex: 0 0 40%; padding: 0px 20px}
.col.esg-txt { flex: 0 0 60%;  }

 @media (max-width:1200px) {
.esg-wrap{ padding:0px; }
.esg .esg-wrap:nth-child(3) { padding: 50px 0px; }	 
.concept .esg-wrap .col{padding: 0px;}
}
 @media (max-width:840px) {
.col.esg-pic { flex: 0 0 100%; padding: 0px;}
.col.esg-txt { flex: 0 0 100%;  }
	 
}


.item-pic{ border-radius:15px; overflow: hidden; position: relative; }
.item-pic figure{flex: 0 0 100%; padding-bottom:65%; height: 0; overflow: hidden; border-radius:15px;  transition: all 0.5s ease 0s;  }
.item-pic figure:hover img { transform: scale(1.1);  opacity: 1; }
.item-pic figure img {  opacity:1; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100% !important; transition: 1s; }
.item-pic .icon-pic{ width: 100px; height: 100px; position: absolute; left:0px; bottom:0px;z-index: 12;}

.esg-txt .inner{ padding: 0px 6vw; }
.esg-txt .inner h3{margin-bottom: 50px; padding-bottom: 10px; font-size: clamp(1.125rem, 2.3vw, 2.125rem); letter-spacing: 3px; position: relative;}
.esg-txt .inner h3:after{ content: "";  width: 10%; height: 2px; position: absolute; left:0px; bottom:0px; background-color: #d14c34;}
.esg-txt .inner p{margin-bottom: 15px;  font-size: clamp(.9rem, 2.3vw, 1.125rem); line-height:2rem;font-weight: 400;    color:#3f3a39; }

 @media (max-width:1200px) {
.esg .esg-wrap:nth-child(2) .esg-txt .inner{ padding: 0px 6vw 0px 0px; }
 }

 @media (max-width:840px) {
.esg-txt .inner{ padding:6vw 0px; }	 
.esg-txt .inner h3{ font-size: 2rem; }	
.esg .esg-wrap:nth-child(2) .esg-txt .inner{ padding:6vw 0px;}
}

 @media (max-width:480px) {
.esg-txt .inner h3{ font-size: 1.5rem; margin-bottom: 30px; }	
}
.timeline { position: relative; max-width: 1160px;  margin:50px auto; padding: 50px 0px; z-index:1;}
.timeline::after {  content: '';  position: absolute; width: 3px; background-color: #000; top: 0; bottom: 0;  left: 50%;  margin-left: -3px; z-index:1;}
.timewrap { padding:0px 40px;  position: relative; background-color: inherit; width: 30%; min-height: 200px; z-index:9;}


.timewrap::after { color: #fff; margin:0px;  content: attr(data-year)' '; position: absolute; font-weight:700;  width: 66px; height: 66px; right: -33px; background-color:#cc2621;   border-style: solid;  border-width:1px; top: 15px; border-radius: 50%; z-index:9; line-height: 65px; text-align: center;}

.timeline .timewrap:nth-child(even)::after { right: 30px; background-color:#a2c409; }
 .timeline .timewrap:nth-child(even) .time-img  { left:100%;  }


.left { left: 0; text-align:left!important;}
.right { left: 50%; text-align:left; }
.right::after { left: -36px;}
.time-content { color:#312927; padding: 5px 30px; border-radius:5px; border:solid 1px transparent;position: relative;  }
.time-content h3{ width: 100%; margin: 5px 0px!important; font-size: 1.25rem; font-weight: 700;color: #cf0004; }
.time-content p{ font-size: 1rem;   width: 100%; margin: 5px 0px!important;}

.time-img { color:#312927; padding: 5px 30px; border-radius:5px; width: 320px; height: 400px; position: absolute; left:-100%; top:0px; }
.time-img img{ border-radius: 15px; }

.left .time-content { text-align: right;}

.timeline .timewrap:nth-child(even){left: 25%}
.timeline .timewrap:nth-child(even) .time-content h3{color: #a2c409}

.timeline .timewrap:nth-child(odd) .time-content{left: 30px; border-color: #d14c35}
.timeline .timewrap:nth-child(even) .time-content{left: -30%; border-color: #a2c409}
.timeline .timewrap .time-content:before{ content: ""; position: absolute; top: 25%; right: 100%; height: 0; width: 0; border: 11px solid transparent; border-right: 11px solid #d14c35;}
.timeline .timewrap:nth-child(even) .time-content:before{ left: 100%;  border-left: 11px solid #a2c409;  border-right:none;  }
@media screen and (max-width: 600px) {
.timeline::after { left: 51px; }
.flex-container { display:none; visibility:hidden; }
.timewrap {width: 100%; padding-left: 70px; padding-right: 25px; }
.timewrap::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.left::after, .right::after { left: 15px; }
.right {  left: 0%; text-align:left;}
.left { text-align:left; }
}
/*20241015 */ 
.application { display: flex; flex-wrap: wrap; }
.application .col { padding:30px 20px; margin-bottom: 30px;}
.application .desc { display: flex; align-items: center; flex: 1 0 50%;}
.application .block-title { padding: 0 8vw; position: relative; z-index: 1}
@media screen and (max-width: 1680px) {
.application .block-title { padding: 2vw 8vw; }
}
@media screen and (max-width: 9920px) {
.application .col { padding:30px 10px; margin-bottom: 10px;}
.application .block-title { padding: 2vw; }
}
@media screen and (max-width: 320px) {
.application .col { padding:30px 0px; margin-bottom: 30px;}
}

.application .block-title-txt p{ margin:  0; font-size: clamp(.9rem, 2.3vw, 1rem); text-transform: uppercase; line-height: 2rem;}
.application .tit-wp { flex: 1 0 100%;  display: flex; flex-wrap: wrap; background-color: #fff;border-radius:0px 120px 20px 20px; position: relative;}
.application .tit-wp h3 { font-size: clamp(1.125rem, 2.3vw, 1.5rem); text-transform: uppercase; line-height:2rem;}
.application .tit-wp .subtitle { flex: 0 0 calc(100% - 60px); padding: 20px;  font-size: clamp(0.875rem, 2.3vw, 1rem); line-height: 1.5rem; font-weight: 700; }

.application .tit-wp .num {margin-top: -10px; width: 60px;height: 60px; background-color:#d14c35; color: #fff; border-radius:99rem; border: solid 2px #fff;display: flex; justify-content: center; align-items: center; position: relative;z-index: 9; }
.application .tit-wp .num span{  color: #fff;  font-size: clamp(1rem, 2.3vw, 1.5rem); line-height: 1.5rem; font-weight: 700;  }
.application .tit-wp:after{ content: "";   width: 100px;height: 100px; left:-20px; top:-20px; background-color:#fff;  border-radius:99rem;  position: absolute;z-index: 1; }
.application .copy {  display: flex; align-items: flex-end;  position: absolute; top: 0; bottom: 0; left: 0; right: 0;  padding:0px  }

/*20241015文字樣式二*/
.application .tit-wp-2 { width:100%; min-height: 40px; margin-bottom: 20px;  padding-left: 20px;   background-color:rgba(255,255,255,.75);   position: relative;}
.application .tit-wp-2 h3 { color:#d14c35; font-size: clamp(1.125rem, 2.3vw, 1.375rem); font-weight:500; text-transform: uppercase; line-height:2rem;}
.application .tit-wp-2 p { color:#494341; font-size: clamp(0.875rem, 2.3vw, 0.9rem); font-weight:500;  text-transform: uppercase; line-height:1.175rem;}
.application .tit-wp-2 .subtitle {  padding:10px 20px;  font-size: clamp(0.875rem, 2.3vw, 1rem); line-height: 1.5rem; font-weight: 700; }
.application .tit-wp-2:after{ content: ""; width: 12px;height:12px; left:10px; top:10px; background-color:#d14c35;  border-radius:99rem;  position: absolute;z-index: 1; }

.application .images {  width: 100%; height: auto; padding: 0; background-color:#000; border-radius: 30px; overflow: hidden; }
.application .images img {  opacity: 1; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; transition: 1s; }
.application .item { position: relative; flex: 0 0 calc(100%/4);}
.application .item-w2 { position: relative; flex: 0 0 calc(100%/2);}
.application .item-w3 { position: relative; flex: 0 0 calc(100%/3);}
.application .item-full { position: relative; flex: 1 0 calc(100%);}
.application .item-first{  margin: 15% 10% 10% 0px; flex: 0 0 calc(100%/3);   align-items: center}
.application .item-first .copy {  display: flex; align-items: flex-start;  position: relative;  padding:0px  }
.application .item .col.copy .text { opacity: 0; height: 0; overflow: hidden; transition: 1s; margin-top: 12px; line-height: 1.6;}
.application .item-w2 .link {z-index: 3; position: absolute; left: -18%; top: 30%;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
.application .item-w2 .link::before {  content: ""; position: absolute; top: 25%; height: 0; width: 0; border:40px solid transparent; border-left: 60px solid #d14c35;  border-right: none;}
.application .col .item-w2:nth-child(1) .link { top:50%;  }
.application .col .item-w2:nth-child(2) .link { top:20%;  }
 
.application .item-no::before { display: none; }
.application .item::before { content: ""; position: absolute; top: 25%; left:calc(100% - 10px); height: 0; width: 0; border: 20px solid transparent; border-left: 20px solid #d14c35;  border-right: none; }
.application .item:hover .images img { opacity: 0.6;}
.application .item:hover .col.copy .text { opacity: 1; height: 100px; margin-bottom: 40px;}
.application .item:last-child::before{display: none;}
@media screen and (max-width: 1400px) {
.application .desc{ flex: 1 0 100%; }
}
@media screen and (max-width:1024px) {
.application .tit-wp .num {margin-top: -20px; width: 40px;height: 40px; }
.application .tit-wp:after{ left:-10px; top:-20px;  width: 50px;height: 50px; }
.application .tit-wp .subtitle { flex: 0 0 calc(100% - 40px); padding:5px 15px 0px 10px;  font-size: 1rem;  }
.application .tit-wp h3 { margin-bottom:0px; font-size: 1rem; } 
.application .tit-wp p {  font-size: 0.9rem; line-height: 1.375rem; }  
.application .tit-wp-2 { width:100%; margin-left: 0px; padding-left: 40px; position: relative;}	
.application .tit-wp-2:after{ left:15px; top:10px;   }	
.application .item-w2 .link::before {  border:20px solid transparent; border-left: 40px solid #d14c35;  border-right: none;}
}
@media screen and (max-width:992px) {
.application .col .item-w2:nth-child(1) .link { top:50%;  }
.application .col .item-w2:nth-child(2) .link { top:20%;  }
}
@media screen and (max-width: 767.98px) {
.application .copy {   position: relative;   }
.application .item-first .copy {  align-items: flex-end;  top: auto; }
.application .item {  flex: 0 0 calc(100%/2);}	
.application .m-full{flex: 1 0 100%!important; }
.application .item .col.copy .text { display: none; opacity: 1;  height: 100px; margin-bottom: 40px;  }
.application .item-w2 .link {display: none}
.application .tit-wp h3,.application .tit-wp-2 h3 { line-height:1.5rem;}
.application .tit-wp-2 .subtitle {  padding:10px; }	
}
@media screen and (max-width: 360px) {
.application .item{ flex: 1 0 100%; }
.application .item::before{display: none;}	
}





.icon-list{width: 100%; margin:0px auto; padding:0px; border-radius:25px; border: solid 1px rgba(209,76, 53,.3);display: flex; flex-wrap: wrap;position: relative; }
.icon-list:after{ content: "";width: 90%; height: 2px; position: absolute;left:5%;top:50%;  background:#212529;  }
.icon-list.w4 li{ flex: 0 0 calc(100%/5 - 20px); margin:10px; padding: 10px; transition: all 0s ease 0s;position: relative; list-style: none;   border-radius:15px;} 
.icon-list li{ flex: 0 0 calc(100%/2 - 20px); margin:10px; padding: 10px; transition: all 0s ease 0s;position: relative; list-style: none;   border-radius:15px;} 
.icon-list li:after{ content: "";width: 16px; height: 16px;border-radius:50%;  position: absolute;left:-20px;top:calc(50% - 8px);  background:#212529;  }
.icon-list li:first-child:after{ display: none;  }
.icon-list li .item{ width: 100%; margin:0px; padding:0px;  display:flex; flex-wrap: wrap; justify-content: center;align-content: flex-start;  }
.icon-list li .item-txt{width: 100%; padding: 10px;}
.icon-list li .item-pic{width: 100%; padding-bottom:100%; height: 0; overflow: hidden; border-radius:15px;position: relative; z-index: 1; transition: all 0.5s ease 0s;box-shadow: 0px 5px 16px rgba(0, 0, 0, .3);}
.icon-list li .item-txt h3{ font-size: clamp(.9rem, 2.3vw, 1rem); text-transform: uppercase; line-height:1.875rem; font-weight:400;color:#212529;}  
 @media screen and (max-width: 840px) {
.icon-list li .item-txt h3{ font-size:0.9rem;   line-height:1.375rem;  }  
}
  
 @media screen and (max-width: 768px) {
.icon-list.w4 li{ flex: 0 0 calc(100%/3 - 20px);  } 
.icon-list li:after{ display: none }
.icon-list:after{  display: none  }
}
 @media screen and (max-width: 640px) {
.icon-list.w4 li{ flex: 0 0 calc(100%/2 - 20px);   } 
 }
 @media screen and (max-width: 320px) {
.icon-list.w4 li{ flex: 0 0 calc(100%/2 - 20px); padding: 0px;  } 
 }

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

.about-team-container {  display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding:  50px;}
.about-team-container >.about-team-column:nth-child(odd) { width: calc(36.66667% - 11.66667px); max-width:calc(36.66667% - 11.66667px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(36.66667% - 11.66667px);; flex: 0 0 calc(36.66667% - 11.66667px);padding-right: 20px;}
.about-team-container >.about-team-column:nth-child(2n) {  width: calc(63.33333% - 8.33333px); max-width: calc(63.33333% - 8.33333px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(63.33333% - 8.33333px); flex: 0 0 calc(63.33333% - 8.33333px);margin-left: 20px;}
.about-team-main-row { position: relative; margin-bottom: 63px;  }
.about-team-main-summary { padding-left: 20px;  font-size: 1.125rem; font-size: clamp(1rem, 2.3vw, 1.125rem);font-weight: 400;  line-height:1.75rem;  line-height: 1.875rem;  letter-spacing: 1px;margin-top: 11px;}  
.about-team-main-name { margin-bottom: 20px;padding-left: 20px; font-size: clamp(1rem, 2.3vw, 1.5rem);font-weight: 400;  line-height:1.75rem; letter-spacing: 2px; color:#d14c35;}
.about-team-main-name:before { width: 10px; height:10px; content: "";  position: absolute; left:0px; top:10px; margin-right: 8px;  margin-bottom: 4px; background-color:#d14c35; border-radius: 3px; transform: rotate(45deg);}
.about-team-image{position: relative;}
.about-team-main-row:before {content: ""; display: block; top: 0px;left:4px; width: 1px;height: calc(100% + 80px);  background-color:#d14c35;  position: absolute; transition: all 1.05s 0.85s ease-in-out;  pointer-events: none;}
@media (max-width:840px) {
.about-team-container{padding: 0px 40px;}
.about-team-container .wrapper{padding: 0px;}    
.about-team-main-name {font-size: 120%;}   
}

@media (max-width:768px) {
.about-team-container {padding: 0px 0px 30px 0px;}   
.about-team-container .wrapper{padding: 0px 30px;}   
.about-team-container >.about-team-column:nth-child(odd),.about-team-container >.about-team-column:nth-child(2n) { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin-left: 0px;padding:  20px; }
}

@media (max-width:767.98px) {
.about-team-main-name { font-size: 125%; }   
}

@media (max-width:320px) {
.about-team-main-name { font-size: 100%; }   
.about-team-container .wrapper{padding: 0px 20px;}   
.about-team-container >.about-team-column:nth-child(odd),.about-team-container >.about-team-column:nth-child(2n) {padding: 20px 10px; }
}

.about-team { position: relative;  display: block;  padding:40px 0px; }
@media (max-width: 1280px) {
.about-team { margin-bottom: 0px;}   
}
.bg-about-who{  padding:80px 0px; background: url("../images/index/bg-about.jpg") no-repeat right top;background-size:auto 100% ;}
@media (max-width:767.98px) {
.bg-about-who{  padding:40px 0px; }
}
@media (max-width:320px) {
.bg-about-who{  padding:20px 0px; }
}

.bg-advantage{ padding:80px 0px 160px 0px; background: url("../images/index/bg-advantage.jpg") no-repeat left bottom;background-size:100% auto;}
@media (max-width:992px) {
.bg-advantage{  padding:40px 0px 20px 0px; }
}
@media (max-width:320px) {
.bg-advantage{  padding:20px 0px; }
}

.bg-advantage-2{ padding:80px 0px 160px 0px; background: url("../images/index/bg-4.jpg") no-repeat left bottom;background-size:100% auto;}
@media (max-width:992px) {
.bg-advantage-2{ padding:40px 0px 20px 0px; }
}
@media (max-width:320px) {
.bg-advantage-2{ padding:20px 0px; }
}

 .bg-industry{ padding:80px 0px;}
@media (max-width:767.98px) {
.bg-industry{ padding:40px 0px;}
}
 



.bg-gradient {padding: 80px 0px; background-image: linear-gradient(to bottom,#eff5f9 0%, #d6e8f3 50%, #fff 100%);}
.bg-gray {background-color: #f2f2f2}
.bg-gradient-bk {  padding:80px 0px 120px 0px; background-image: linear-gradient(to top,#f2f2f2 0%, #f6f6f6 50%, #fff 100%);}
.bg-custom-1 {padding:0px 0px 40px 0px; background: url("../images/index/bg-box.svg")  repeat left bottom #fff;background-size: 40% auto;}
.bg-custom-2 {padding: 80px 0px; background: url("../images/index/bg-5.jpg") no-repeat left bottom;background-size: 100% auto;}
@media (max-width:992px) {
.about-team.bg-about-1,.about-team.bg-about-2{ padding: 40px 0px;   }
.bg-gradient-bk {  padding:40px 0px 120px 0px; }
}


@media (max-width:768px) {
.about-team.bg-about-1 { background-position: left bottom; }
.about-team-main{padding-bottom:0px;}
}
@media (max-width:420px) {
.about-team-main{padding-bottom:50px;}
}

/*about-history ===================================================================== */
.milestone-block { padding: 150px; }
.milestone-box { position: relative; margin: 0 auto; }
.milestone-box .milestone-list { position: relative; z-index: 1; }
.milestone-box .milestone-list p { font-size: clamp(.9rem, 2.3vw, 1.125rem);  font-weight:400; line-height: 2rem; color: #494342;    }
.milestone-box .milestone-list.year-none .milestone-list-year {  display: none; }
.milestone-box .milestone-list.aos-animate .milestone-list-dot-line { -ms-transform: scaleX(1);  transform: scaleX(1); }
.milestone-box .milestone-list.aos-animate .milestone-list-info h3 { opacity: 1; }
.milestone-box .milestone-list.aos-animate .milestone-list-info p { opacity: 1;  -ms-transform: translateY(0); transform: translateY(0); }
.milestone-box .milestone-list-year {margin-bottom: 20px; font-size: 32px; color: #D14C33; font-weight: 700; position: relative;  z-index: 1; background-color: #fff;   }
.milestone-box .milestone-list-info {  position: relative; }
.milestone-box .milestone-list-info .milestone-list-title {  display: inline-block; }
.milestone-list-title ul li{ font-size: clamp(.9rem, 2.3vw, 1.125rem); font-weight:400; line-height: 2rem; color:#494342;  }
.milestone-list-title ul li strong{  color:#b78603;  }
.milestone-box .milestone-list-info h3 {font-size: 1.15rem; font-weight:400;line-height: 36px; color: #D14C33; margin-bottom: 20px; background-color: #FFF; position: relative; z-index: 1;  padding-right: 10px; transition-delay: .5s; transition-duration: .5s;  opacity: 0; }
.milestone-box .milestone-list-info p {  -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; transition-duration: .5s; transition-delay: .5s; }
.milestone-box .milestone-list-info .milestone-list-dot { width: 15px; height: 15px;  border-radius: 50%; border: 1px dotted #D14C33; position: absolute; top: 6px; display: -ms-flexbox;  display: flex;  -ms-flex-align: center; align-items: center;  -ms-flex-pack: center; justify-content: center; }
.milestone-box .milestone-list-info .milestone-list-dot span { width: 5px; height: 5px; display: block; background-color: #D14C33; margin: 0 auto; border-radius: 50%; }
.milestone-box .milestone-list-info .milestone-list-dot-line { position: absolute; height: 1px;  background-color: #D14C33; transition-duration: .5s; transition-delay: .3s;  -ms-transform: scaleX(0); transform: scaleX(0); }
.milestone-box .milestone-list-flex {  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 50px; }
.milestone-box .milestone-list-img {  font-size: 0; }
.milestone-box .milestone-list-img a { width: calc((100% - 2px) ); max-width: 300px;  display: inline-block;  margin-right: 20px; }
.milestone-box .milestone-list-img a:last-child {margin-right: 0; }
.milestone-box .milestone-list-img img { width: 400px;  border-radius:15px;  }
.milestone-box::after { content: '';  width: 1px;  height: 100%;  position: absolute;  left: 50%; top: 0; background-color: #D14C33; transition: all .5s linear; }
@media (min-width:1024px) {
.milestone-block { padding: 50px; }
}

@media (min-width: 992px) {
.milestone-list .milestone-list-year { text-align: center; }
.milestone-list .milestone-list-flex .milestone-list-info, .milestone-list .milestone-list-flex .milestone-list-img {  width: 50%; }
.milestone-list:nth-child(odd) .milestone-list-info { -ms-flex-order: 2;  order: 2;  padding-left: 80px; }
.milestone-list:nth-child(odd) .milestone-list-info .milestone-list-dot-line { -ms-transform-origin: left;  transform-origin: left; }
.milestone-list:nth-child(odd) .milestone-list-img { -ms-flex-order: 1; order: 1;  padding-right: 80px; text-align: right; }
.milestone-list:nth-child(odd) .milestone-list-dot { left: -7px; }
.milestone-list:nth-child(odd) .milestone-list-dot-line {  width: 70px;  top: 13px;  left: 0; }
.milestone-list:nth-child(even) .milestone-list-info {  -ms-flex-order: 1; order: 1;  padding-right: 80px; text-align: right; }
.milestone-list:nth-child(even) .milestone-list-info .milestone-list-dot-line { -ms-transform-origin: right; transform-origin: right; }
.milestone-list:nth-child(even) .milestone-list-img {  -ms-flex-order: 2;  order: 2;  padding-left: 80px; text-align: left; }
.milestone-list:nth-child(even) .milestone-list-dot {  right: -8px; }
.milestone-list:nth-child(even) .milestone-list-dot-line { width: 13%; top: 13px; right: 0; } 
}

@media (max-width: 991px) {
.milestone-block { padding: 0px; }
.milestone-block {  overflow: hidden; }
.milestone-box::after { left: 32px; }
.milestone-box .milestone-list-flex { display: block;  padding-left: 80px; }
.milestone-box .milestone-list-info .milestone-list-dot { left: -55px; }
.milestone-box .milestone-list-info .milestone-list-dot-line { top: 13px; left: -38px;  width: 39px;  -ms-transform-origin: left; transform-origin: left; }
.milestone-list .milestone-list-info { margin-bottom: 20px; }
.milestone-list .milestone-list-info h3 {  margin-bottom: 5px; }
.milestone-list.aos-animate .milestone-list-img { opacity: 1;  -ms-transform: translateX(0px); transform: translateX(0px); }
.milestone-box .milestone-list-img a { width: 100%; margin: 10px 0px; }
.milestone-box .milestone-list-img a:last-child { margin-bottom: 0; } 
.milestone-box .milestone-list-info p {  opacity: .5;   }  
.milestone-box .milestone-list-info .milestone-list-title { margin: 0px;padding: 0px; }
}

@media (max-width:320px) {
.milestone-box .milestone-list-flex { padding-left: 20px; }
.milestone-box .milestone-list-info p {  padding-left: 20px; }  
.milestone-box .milestone-list-img a {  margin: 10px 0px 10px 20px; }
}

.org-box{ width: 100%;max-width: 80%; margin:6% auto;position: relative;z-index: 11 }
@media (max-width:840px) {
.org-box{  max-width: 100%; margin:0px auto;padding: 40px 0px; }    
}


	/*SERVICE circle slide*/

@keyframes growAndFade {
0% { opacity: 0.75; transform: scale(0); }
100% { opacity: 0; transform: scale(1); }
}
.arrowBox .arrow, .arrowBox .arrow:before , .service .circleContentBox, .service .circleContentBox .product-item .icon, .service .circleContentBox .product-item li:before { -webkit-transition: all 0.4s ease; transition: all 0.4s ease}
 
.service {margin-bottom: 40px; background:#f2f1f1;  border-radius:250px;position: relative; z-index:9; overflow: hidden;}
 @media (max-width:840px) {
.service {  border-radius:30px;   }
	 
}
 .service .serviceBox { display: -webkit-box; display: -ms-flexbox; display: flex; margin:50px auto; }
@media (max-width:1023px) {
.service .serviceBox { display: none  }
}
 
.service .outerBox {  position: relative; z-index: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
@media (max-width:1440px) {
.service .outerBox { width: 100% }
}
.service .product-pic-box { position: absolute;z-index:1; left:33%; top:35%; width: 35%; }
@media (max-width:1280px) {
.service .product-pic-box { width: 38% }
}
@media (max-width:1023px) {
.service .product-pic-box { display: none }
}
.service .product-list {  width: 75%; margin:auto; z-index: 0}
.service .product-list > li { pointer-events: none; opacity: 0}
.service .product-list > li.current { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; pointer-events: auto; opacity: 1;}
.service .product-list .item { display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0px}
 
.service .product-list .name span { display: block; font-size: 50px; font-weight: 900;  color:#d14c35;  margin-bottom: 5px;   }
.service  h3,.service ul li{   margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;  }
.service .product-list .name a{ display: block; margin-bottom: 10px; font-size: 24px; letter-spacing: 2.8px; /*white-space: nowrap;*/color:#000;}
@media (max-width:1280px) {
.service .product-list .name {font-size: 30px; }
}
.service .product-list .listTitle { margin-bottom: 10px; font-size: 20px;  font-weight: 700;  letter-spacing: 2.5px; color: #3f3f3f; }
.service .product-list .text { width: 400px;  height: 135px; line-height: 1.75rem; letter-spacing: 1px; margin-bottom: 40px;}
@media (max-width:1280px) {
.service .product-list .text {  width: 300px; font-size: .875rem;  }
}
.service .product-list ul.w-list  { position: relative; margin: 0px; padding: 0px; list-style: none}
.service .product-list ul.w-list li { position: relative; margin: 0px; padding-left: 15px; list-style: none}
.service .product-list ul.w-list li:before { content: ""; position: absolute; top: calc(50% - 1px); left: 0; width: 6px; height: 6px; background-color:#000; border-radius: 99rem;}
.service .circleContentBox { position: relative; z-index: 2;   width: 800px; height: 800px;margin: auto}
  
 
@media (max-width:1023px) {
.service .circleContentBox { display: none }
}
.service .circleContentBox .circleBox { position: absolute; top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; width: 100%; height: 100%}
.service .circleContentBox .circleBox:after { content: ""; position: absolute;  top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 200px); height: calc(100% - 200px);  border-radius: 50%; background-image: linear-gradient(to top, #d14c35 0%, #fff 100%);  box-shadow: 0px 0px 13px 0px rgba(148, 58, 43, .5); }
@media (max-width:1023px) {
.service .circleContentBox .circleBox:after { width: calc(100% - 60px); height: calc(100% - 60px) }
}
@media (max-width:640px) {
.service .circleContentBox .circleBox:after { width: calc(100% - 6px); height: calc(100% - 6px) }
}
.service .circleContentBox .dashed {  position: absolute; top: 5px; left: 5px; width: calc(100% - 10px);  height: calc(100% - 10px); stroke: #d14c35;  stroke-width:1px;  fill: none}
@media (max-width:640px) {
.service .circleContentBox .dashed { display: none }
}
.service .circleContentBox .product-item li { list-style: none; position: absolute; width: 104px; bottom: 50%; left: 50%; margin-left: -52px; height: 50%; -webkit-transform-origin: center bottom; transform-origin: center bottom}
.service .circleContentBox .product-item li.current .icon {border-color:#d14c34;  background-color: #fff;  box-shadow: 0px 0px 13px 0px rgba(240, 139, 21, 0.5);}
.service .circleContentBox .product-item li.current:before { width: 18px; height: 18px; border: 1px solid #d14c35}
.service .circleContentBox .product-item li:after { content: ""; position: absolute; top: 0px; left: 50%;  -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background-color:#d14c35;z-index: -1;}
.service .circleContentBox .product-item li:before { content: ""; position: absolute; top: -3.5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-radius: 50%}
.service .circleContentBox .product-item .item { width: 100%;}
.service .circleContentBox .product-item .name { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; padding-top: 5px;}
.service .circleContentBox .product-item .name span{display: block;  }
@media (max-width:1023px) {
.service .circleContentBox .product-item .name { display: none}
}
.service .circleContentBox .product-item .name a { font-size: 1rem; font-weight: 500; color: #111111; letter-spacing:1px}
.service .circleContentBox .product-item .icon {  margin:50px auto;  width:80px; height: 80px;  display: flex; justify-content: center; align-items: center;  background-color: #fff; border: 8px solid #f5f9fc; border-radius: 50%; overflow: hidden;-webkit-box-shadow: 2px 2px 25px 2px rgba(35, 58, 71, 0.2); box-shadow: 2px 2px 25px 2px rgba(35, 58, 71, 0.2);}
.service .circleContentBox .product-item .icon a{   margin: auto;font-size: 2rem; font-weight: 500;    }

@media (max-width:1023px) {
.service .circleContentBox .product-item .icon { display: none;  }
}

 .service .circleContentBox .stroke { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: center; transform-origin: center; stroke: #000; stroke-width: 5px; fill: none;}
.service .circleContentBox .stroke.ani circle { -webkit-transition: all 5s; transition: all 5s}
.service .circleContentBox .stroke circle { fill: none; stroke: #000; stroke-width: 3; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transition: all 0s; transition: all 0s;}
.service .circleContentBox .titleWrap { position: absolute; top: 50%; left: 50%; width: calc(100% - 400px); height: calc(100% - 400px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); letter-spacing: 1px; border-radius: 50%; background: #f5f9fc}
.service .circleContentBox .titleWrap .text { position: relative; width: 305px;  text-align: center; letter-spacing: 1.8px; font-weight: 500; color: #575757}

/*arrowWrap*/
.service .arrowWrap { width: 100%;  cursor: pointer;}
@media (max-width:1023px) {
.service .arrowWrap {display: none }
} 
.service .arrowWrap .arrowNext, .service .arrowWrap .arrowPrev { position: relative;  padding: 130px;  background: #fff; -webkit-box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.05);  box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.05); border-radius: 50%;}
.service .arrowWrap .arrowPrev:after { content: ""; position: absolute; z-index: 1; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; height: 20px; width: 40px;  background: url("../images/icon/arrow-right-2.svg") no-repeat center top; }
.service .arrowWrap .arrowNext:after { content: ""; position: absolute; z-index: 1; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; height: 20px; width: 40px; background: url("../images/icon/arrow-left-2.svg") no-repeat center top; }

 
.service .arrowWrap .arrowNext { position: absolute;  z-index:9999; right: 0; top: 35%; -webkit-transform: translateX(200px); transform: translateX(200px)}
.service .arrowWrap .arrowNext:after { left: 22px}
.service .arrowWrap .arrowNext .arrow { left: 15px; -webkit-transform: translateY(-50%);transform: translateY(-50%);}
.service .arrowWrap .arrowNext:hover {  -webkit-box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1);  box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1); -webkit-transform: translateX(190px); transform: translateX(190px);}
@media (max-width:1560px) {
.service .arrowWrap .arrowNext:hover { padding: 140px}
}

.service .arrowWrap .arrowNext:hover:after {width: 70px;left: -16px}
.service .arrowWrap .arrowPrev { position: absolute;  z-index:9999; left: 0; top: 35%;  -webkit-transform: translateX(-200px); transform: translateX(-200px)}
.service .arrowWrap .arrowPrev:after { right: 22px;}
.service .arrowWrap .arrowPrev .arrow { right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%)}
.service .arrowWrap .arrowPrev:hover { -webkit-box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1); box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1); -webkit-transform: translateX(-190px); transform: translateX(-190px);}
@media (max-width:1560px) {
.service .arrowWrap .arrowPrev:hover { padding: 130px }
}
.service .arrowWrap .arrowPrev:hover:after {width: 70px;  right: -16px}
.service .arrowWrap .arrow { position: absolute; z-index: 1; top: 50%; width: 60px; height: 60px}
.service .arrowWrap_m { position: relative;  z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center;  -ms-flex-align: center; gn-items: center;  cursor: pointer; margin-top: 10px;padding: 0 10px 10px;}
@media (min-width:1181px) {
.service .arrowWrap_m { display: none; }
}
.service .arrowWrap_m .arrowNext, .service .arrowWrap_m .arrowPrev { position: relative; z-index: 0; line-height: 12px}
.service .arrowWrap_m .arrowNext:after, .service .arrowWrap_m .arrowPrev:after { content: ""; position: absolute; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; display: block; height: 2px; width: 30px; background: #40b0b8}
.service .arrowWrap_m .arrowNext:after { left: 7px}
.service .arrowWrap_m .arrowNext:hover:after {  width: 45px; left: -6px}
.service .arrowWrap_m .arrowPrev:after { right: 7px}
.service .arrowWrap_m .arrowPrev:hover:after { width: 45px; right: -6px}
.service .arrowWrap_m .arrow { width: 40px; height: 40px}
 
.service .serviceBox_m { display: none; position: relative; z-index: 1}
@media (max-width:1023px) {
.service .serviceBox_m { padding: 80px 0 0; display: block;}
}
.service .serviceBox_m .service-nav { margin-bottom: 20px; position: relative;  }
.service .serviceBox_m .service-nav:after { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); display: block; width: 100%; height: 1px; background: #e5e5e5;}
.service .serviceBox_m .service-nav .slick-list { z-index: 1}
.service .serviceBox_m .service-nav .Img { border-radius:50%;width: 90px; height: 90px; margin: 0 auto 10px;   -webkit-box-shadow: 2px 2px 10px 2px rgba(35, 58, 71, 0.1); box-shadow: 2px 2px 10px 2px rgba(35, 58, 71, 0.1); background-color: #494341}
.service .serviceBox_m .service-nav  .Img a{ color: #fff; margin: 25% auto}

.service .serviceBox_m .service-nav .slick-current .Img {  background: #d14c35;}
.service .serviceBox_m .service-nav .slick-current .Img a{ color: #fff;  }
@media (max-width:320px) {
.service .serviceBox_m .service-nav .Img { width: 60px; height: 60px;}
}
.service .serviceBox_m .service-nav a { display: block; font-size: 1.5rem;font-weight: 500; text-align: center; letter-spacing: 1px; color:#d14c35}
@media (max-width:428px) {
.service .serviceBox_m .service-nav a { font-size: 1.125rem;   }
}

.service .serviceBox_m .service-nav .name { font-size: 1.5rem; text-align: center; letter-spacing: 1px; color: #d14c35 }
.service .serviceBox_m .service-nav .name span{ font-size: 1.5rem; display: block; margin: auto;  }
@media (max-width:480px) {
.service .serviceBox_m .service-nav .name span{ font-size: 1rem;  }
}

.service-nav .slick-prev,.service-nav .slick-next{  top:35%; }
.service .serviceBox_m .item { position: relative; z-index: 1; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal;  -ms-flex-direction: column; flex-direction: column}
.service .serviceBox_m .service-for { max-width: 800px; margin: 0 auto}
@media (max-width:800px) {
.service .serviceBox_m .service-for { padding: 0 10px }
}

.service-for .item{   margin:0px auto; padding: 10px 80px;}
@media (max-width:480px) {
.service-for .item{   margin:0px auto; padding: 10px 40px;}
}

@media (max-width:4280px) {
.service-for .item{   margin:0px auto; padding: 10px 20px;}
}


.service-for .name { margin: 20px 0; padding:0px; font-weight: 900; font-size: 1.5rem; letter-spacing: 1px; color: #d14c35 }
.service-for .name a{  color: #d14c35 }
.service-for .title span {   font-weight: 900; font-size: 45px; padding-right: 20px; color: #42adc9;}
.service-for .inner .listTitle { margin-bottom: 10px; font-size: 20px; font-weight: 700; letter-spacing: 1.5px;   }
.service-for .inner ul { padding: 0 25px 25px 25px; margin: auto;}
.service-for .inner ul li{ padding: 0px; line-height: 1.8; letter-spacing: 0.8px; font-size: 1rem; }

 
/*QC ===================================================================== */
.custom {  padding: 85px 0;}
@media (max-width:1160px) {
.custom { transform: scale(.9)}
 }

@media (max-width:920px) {
 .custom {  padding: 40px 0px;}   
}
@media (max-width:767.98px) { 
 .custom {  padding: 0px 20px; transform: scale(1)}   
}

.custom .wrap { max-width: 1240px; margin: auto;  display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: center; flex-wrap: wrap;  -ms-flex-align: center; align-items: center;}
.custom .left { width: 39.5%; position: relative;z-index: 1; display: flex; align-items: center; justify-content: center; }
.custom .left:before {width: 473px; height: 473px; background-color: #215284;   animation: growAndFade 3s infinite ease-out; }
.custom .left:after {background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd); width: 403px; height: 403px;opacity: .2;   }
.custom .left:after, .custom .left:before { content: ""; border-radius: 50%; z-index: -1; position: absolute;}
.custom .left .custom-title { text-align: center; position: relative; z-index: 1;}
.custom-title .titleTw { font-size: 30px; line-height: 1.2; letter-spacing: 1.5px; font-weight: 400;}
.custom-title .titleEn { font-weight: 500; font-size: 48px; line-height: 1.05; letter-spacing: 0.48px;}
.custom .left .pic { z-index: 2; position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: clip; opacity: 1;}
.custom .left .pic img { width: 140px; height: 40px; display: block;  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
@media (max-width:767.98px) {
.custom .left { width:100%; margin:30% auto; transform: scale(.8)}
}

@media (max-width:320px) {
.custom .left {   transform: scale(.5)}
}

.custom .right { width: 80%; margin-left: 20%; margin-top: 10%}
.custom .right .custom-list{ position: relative }
.custom .right .custom-list:after{ content: "";position: absolute; left:-42px; top:0px; width: 2px; height: 100%; background-color:#c4afab }
.custom .right .custom-list .txt {max-width: 70%; text-align: left;}
.custom .right .custom-list .txt h3 { color:#d14c35; font-weight: 700; font-size: 1.375rem;line-height: 1.2;letter-spacing: 0.2px;text-transform: uppercase;margin-bottom: 0px;}
.custom .right .custom-list .txt .textEditor {  padding-top: 8px;}
.custom .right .custom-list .txt .textEditor p{ color: #4a4a4a;  font-weight: 400; font-size: 1rem; text-align: left; line-height: 1.375rem; }
.custom .left .custom-title:after { content: ""; position: absolute; width: 340px; height: 340px; z-index: -1; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff;  border-radius: 50%;}
.custom .right .custom-list .item { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; -webkit-column-gap: 36px; -moz-column-gap: 36px; column-gap: 36px; border:2px solid #c3afab;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);border-radius: 84.5px;}
.custom .right .custom-list .Img { border-radius: 50%;  background-color:#494342; height: 141px; min-width: 141px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;justify-content: center; align-items: center;}
.custom .right .custom-list .Img img{  height: 80px; width:80px;  }
.custom .right .custom-list .custom-item { opacity: 1;  position: relative; max-width: 692px; padding: 10px 0;}
.custom .right .custom-list .link {z-index: 3; position: absolute; left: -42px;  top: 50%;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
.custom .right .custom-list .link span { background-color:#d14c35; display: block;}
.custom .right .custom-list .link span:nth-child(1) {width: 5.85px; height: 5.85px; border-radius: 50%;}
.custom .right .custom-list .link span:nth-child(2) {width: 30px; height: 1px;}
.custom .right .custom-list .link span:nth-child(3) { width: 5.85px; height: 5.85px; border-radius: 50%; position: relative; margin-left: 4px;}

.custom .right .custom-list .link span:nth-child(3) {  width: 5.85px; height: 5.85px; border-radius: 50%; position: relative; margin-left: 4px;}
.custom .right .custom-list .link span:nth-child(3):after{content: "";width: 15px; height: 15px; background-color: #fff; position: absolute;top: -4px; left: -4px;  z-index: -1; border-radius: 50%;}

@media (max-width:767.98px) {
.custom .right { width: 100%; margin-left: auto;}
.custom .right .custom-list .custom-item { margin-bottom: 20px}
.custom .right .custom-list .item {  flex-direction: column; border: none; padding: 0px; background:transparent}
.custom .right .custom-list .txt h3 , .custom .right .custom-list .txt .subtitle {text-align: center; margin: 10px auto;}
.custom .right .custom-list .txt {max-width: 90%;  } 
.custom .right .custom-list .link{display: none;} 
 }
 

  


.spec-table .datatable th,.spec-table .datatable td {  border: 1px solid #fff; }
.table-wrapper { width: 100%;  height: auto;  margin: 0px auto 30px 0px;  overflow: auto; }
.datatable { width: 100%; border-spacing: 0; margin: auto; border: 1px solid #fff;}
@media (max-width: 991.98px) {
.datatable { width: 100%;}
}

.datatable thead { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;}
.datatable tbody { font-size: .9rem;}
.datatable th, .datatable td { font-size:.9rem; padding: 15px; white-space: nowrap; border-bottom: 1px solid #fff;  border-right: 1px solid #fff;  position: relative}
.datatable thead td{ color: #000;  font-weight: 700; }
.datatable tr:nth-child(even) {background-color:#eae4e2; }
.datatable th{color: #fff; font-weight: 700}
.datatable th:nth-child(1n) {background-color:#de7b6a; }
.datatable th:nth-child(2n) {background-color:rgba(209,76,53,1); }
.datatable th:nth-child(3n) {background-color:rgba(174,51,29,1); }

/*STICKY ROW Normal css box-shadow works for the header as it is a single html element*/
.datatable tr.sticky {color: #fff; font-weight: 700; position: sticky;  top: 0;  z-index: 1;background-image: linear-gradient(135deg, #d14c35 10%, #500c01 100%); box-shadow: 0 0 6px rgba(0,0,0,0.25);}
.datatable th.sticky {  position: sticky; left: 0; z-index: 9; background-color:#de7b6a;  }
.datatable td.sticky { position: sticky; left: 0; z-index: 9; background-color:#fff; }
.datatable tr:nth-child(even) td:first-of-type.sticky {  background-color:#eae4e2; }

@media (max-width:320px) {
.datatable tr.sticky {   position: relative;  }
.datatable th.sticky,.datatable td.sticky {  position: relative; }
}