.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;}
.main-about p,.block-txt p{ width: 100%; font-size:1.125rem; font-size: min(max(3.5vw, .9rem), 1.125rem); line-height:2rem; font-weight: 400;  padding:5px 0px; margin-bottom: 10px;  color:#3f3a39;}
.main-about p strong{   color:#017a85; }

.block {width:50%; height: auto;margin: 0; padding:0px;  display: flex; flex-wrap: wrap;  position: relative;z-index: 2 }
@media (max-width:992px) {
.block {width:100%;}
}
.block-full{width:80%;  margin:0px auto; padding:40px 0px; position: relative; }
.block-txt{width:100%; margin:0px auto; padding:0px 60px 0px 0px;}
@media (max-width:1024px) {
 .block-txt{ padding:0px 30px;}
}
@media (max-width:768px) {
.block-full{width:100%;  margin:0px auto; padding:40px 0px;   }
 .block-txt{ padding:0px;}
}

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

.block-box{ width: 100%;bottom: 10%;  position: absolute; z-index: 9; }
.card-1{ width:auto; height: auto; margin-top: 20%;  border-radius:150px 0px 150px 0px; overflow: hidden  }
.card-2{ width: 60%; margin: 0px; padding: 0px;position: absolute;top:0px; right:-200px; border-radius:150px 0px 0px 150px; overflow: hidden}

@media (max-width:992px) {
.card-2{ width: 50%; margin: 0px; padding: 0px;position: absolute;top:10%; right:-30px;z-index: 0}
}


.icon-list{width: 100%; margin:0px auto; padding:20px 0px; display: flex; flex-wrap: wrap;  }
.icon-list li{width: auto; margin:0px 40px 0px 0px; display:flex; flex-wrap: wrap;   transition: all 0s ease 0s;position: relative; } 
.icon-list li .item{ width: 100%; margin:0px; padding: 10px; }
.icon-list li h3 { width: 100%; font-size:1.5rem; line-height: 2.75rem; font-weight:400; color:#a0aaab; margin-bottom:20px; position: relative; }  
.icon-list li h3 span{ padding-right: 10px; font-size:2.15rem;  font-weight:400;  color:#017a85;  }
.icon-list li p {  width: 100%; font-size: 1rem; line-height: 1.15rem; font-weight:700; color:#017a85;   }  

@media (max-width:1280px) {
.icon-list li{ margin:0px 20px 0px 0px;  } 
}

/*core-3*/
.bg-custom-1 {padding: 140px 0px; background: url("../images/index/bg-5.jpg") no-repeat left bottom ;background-size: 100% auto;}
@media (max-width:1180px) {
.bg-custom-1 { background: url("../images/index/bg-5.jpg") no-repeat right bottom  #fcfcfc;background-size:170% auto;}   
}

@media (max-width:992px) {
.bg-custom-1 { background-size:200% auto;}   
.bg-custom-1 .block-txt p.color-white { color: #000!important;}
.bg-custom-1 .block-txt h2.color-white{  color:#017a85!important;}  
 }
@media (max-width:480px) {
.bg-custom-1 .card-3{ width:80%;  margin: 30% auto auto 5%;  }
.bg-custom-1 .card-4{ width:60%; }
}


/*core-4*/
.core-list{width: 100%; margin:0px auto; padding:30px 0px 60px 0px; display: flex; flex-wrap: wrap;  }
.core-list li{width:calc(100%/4 - 30px); margin:0px 15px; transition: all 0s ease 0s;position: relative; list-style: none;background-color: #fff;border-radius:0px 0px 15px 15px;   box-shadow: 0px 5px 10px rgba(0,0,0,.2) } 
.core-list li .item{ width: 100%; margin:0px; padding:0px; }
.core-list li h3{ width: 100%; font-size:1.25rem; line-height: 2rem; font-weight:400; color:#017a85;  position: relative; }  
.core-list li p{  width: 100%; font-size: 1rem; line-height: 1.15rem; font-weight:400; }  
.core-list li .photo figure{ width: 100%; padding-top:66.725%; height: 0; object-fit: cover;overflow: hidden;  position: relative; transition: all 0.5s ease 0s; border-radius:0px 0px 15px 15px; }
.core-list  li .photo figure img { max-width: none; opacity: 0.8; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.core-list  li .item-txt{width: 100%;padding:20px 20px 0px 20px; position: relative;}
@media (max-width:1024px) {
.core-list li{width:calc(100%/3 - 30px);  margin: 15px 15px 30px 15px;}    
}
@media (max-width:768px) {
.core-list li{width:calc(100%/2 - 10px);margin: 15px 5px 30px 5px;  }  
.core-list li h3 { font-size:1rem;line-height: 1.5rem; }  
.core-list li p { font-size: .9rem; }  
}

@media (max-width:768px) {
.core-list li{width:100%;margin: 15px auto 30px auto;  }  
}

/*core-5*/
.custom {  padding:0px 0px  85px 0px;}
@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(#00BCD4, #017a84, #03A9F4);width: 403px; height: 403px;opacity: .85;   }
.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:36px; 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:768px) {
.custom .left {   transform: scale(.8)}
}
@media (max-width:767.98px) {
.custom .left { width:100%; margin:30% auto; transform: scale(.5)}
}
@media (max-width:280px) {
.custom .left {  transform: scale(.4)}
}
 


.bg-core {padding: 120px 0px; background: url("../images/index/bg-core.jpg")  repeat-x left bottom;background-size: 50% auto;}
.bg-core-green {  padding:120px 0px 80px 0px;background-image: linear-gradient(to bottom,#e4ead7 0%,#fff 100%);}
.bg-core-green .card-3{ width:60%; height: auto; margin: 20% auto auto 5%;  }
.bg-core-green .card-4{ width: 40%; margin: 0px; padding: 0px;position: absolute;top:0px;right:0px; }

.bg-core .card-7{ width:auto; height: auto; margin: 0px 10% 0px 0px;   border-radius:0px 150px 150px 0px; overflow: hidden}
.bg-core .card-6{ width: 55%;  height: auto; margin: auto;  position: absolute;top:-60%; right:-15%; z-index: 1; border-radius:150px 80px 150px 15px;overflow: hidden }

@media (max-width:1024px) {
.bg-core-green .card-3{width:80%; margin:30% auto auto 0  }
.bg-core-green .card-4{ width: 50%; top:10%;  }
.bg-core .card-7{  margin:0px 10% 35% 0px;  }
.bg-core .card-6{ width:75%; top:-50%; right:-5%;  }
}

@media (max-width:992px) {
.bg-core .main-wrap .block:nth-child(1){display: none}   
.bg-core-green .card-3{width:80%; margin:30% auto auto 0  }
.bg-core-green .card-4{ width: 50%;   }
.bg-core .card-7{  margin:0px 10% 0px 0px;  }
.bg-core .card-6{ width:55%;   }
 }

@media (max-width:767.98px) {
.bg-core {padding: 40px 0px; background-size: 100% auto;} 
    .bg-core-green {  padding:120px 0px 40px 0px;} 
}
@media (max-width:320px) {
.bg-core {padding:0px 0px 40px 0px;}   
}

.grid-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(22.5%, 1fr)); gap:20px; padding: 15px 0px;position: relative;z-index:2}
.grid-box {   width: 100%; padding: 20px;   border:solid 1px #f8f8f8; background-color:#f8f8f8;  }
.grid-w30 h3 { font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#017a84}
.grid-w30 ul { margin: 0px; padding: 0px; list-style: none}
.grid-w30 ul li{ margin: 0px; padding: 0px; }

@media(max-width: 1180px) {
.grid-card {  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr)); gap:20px; padding: 15px 0px;position: relative;z-index:2}
 }

 
.card-3{ width:60%; height: auto; margin: 20% auto auto 5%;  }
.card-4{ width: 40%; margin: 0px; padding: 0px;position: absolute;top:0px;right:0px; }
.card-7 img,.card-6 img,.card-3 img,.card-4 img{display: block; margin: 0; box-shadow: 0px 5px 16px rgba(0,0,0,.3);border-radius:15px;} 

.about-team { position: relative;   padding:40px 0px;  }
.about-team-container { display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 140px; position: relative;  }
.about-team-container >.about-team-column:nth-child(odd) { width: calc(41.66667% - 11.66667px); max-width: calc(41.66667% - 11.66667px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(41.66667% - 11.66667px); flex: 0 0 calc(41.66667% - 11.66667px);}
.about-team-container >.about-team-column:nth-child(2n) {  width: calc(58.33333% - 8.33333px); max-width: calc(58.33333% - 8.33333px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(58.33333% - 8.33333px); flex: 0 0 calc(58.33333% - 8.33333px); margin-left: 20px;}
.about-team-main-name { margin-bottom: 20px; font-size: 26px; font-weight: 700; line-height: 1.5; letter-spacing: normal; color:#215285;}
.about-team-main-name:before { width: 10px; height:10px; content: ""; display: inline-block;  margin-right: 8px;  margin-bottom: 4px; background-color:#ed6d34; border-radius: 2px;}
.about-team-main-row { position: relative; margin-bottom: 63px;  }
.about-team-main-summary {  font-size: 1.125rem; font-size: min(max(3.5vw, .9rem), 1.125rem);line-height: 1.7rem; font-weight: 400; letter-spacing: 1px;margin-top: 11px;}  
.about-team-image{position: relative;}

@media (max-width:1440px) {
.about-team-container {    padding: 30px 80px; position: relative;  }
}



@media (max-width:840px) {
.about-team {margin-bottom: 0px;}  
.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 {  padding:40px 0px 0px 0px; }
.about-team-container {padding: 0px 20px 30px 20px;}   
.about-team-container .wrapper{padding: 0px 30px;}   
.about-team  iframe{   margin: 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: 0px 30px; }

}
@media (max-width:767.98px) {
.about-team-container {padding: 0px 40px 30px 40px;}   
.about-team { padding:0px; margin-bottom: 0px;}     
.about-team-main-name { font-size: 150%; }   
.about-team  iframe{  max-height: 360px;}    
.about-team-container >.about-team-column:nth-child(odd),.about-team-container >.about-team-column:nth-child(2n) { padding: 0px; }
}
@media (max-width:640px) {
.about-team iframe{    margin: auto;}   
}

@media (max-width:320px) {
.about-team iframe{  max-height:280px; margin: auto;}      
.about-team-main-name { font-size: 130%; }   
.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: 0px 20px; }
}


/*bg-style*/
.bg-about-1 { padding:40px 0px 80px 0px; background: url("../images/index/bg-1.jpg") no-repeat left bottom;background-size: 100% auto;}
.bg-about-2 { padding: 80px 0px; background: url("../images/index/bg-a1.jpg") no-repeat right top;background-size: 80% auto;}
@media (max-width:1200px) {
.bg-about-2 { padding: 40px 0px; }
}
@media (max-width:768px) {
.bg-about-2 { padding:0px; }
.bg-about-2 .block-txt{ padding:0px; }
}



.bg-about-3 { padding: 80px 0px; background: url("../images/index/bg-home.jpg") no-repeat left bottom;background-size: 100% auto;}
 
@media (max-width:1200px) {
.main-about.bg-about-3 .block{ width: 100%;}
.main-about.bg-about-3 .block .block-box{ position: relative; bottom: auto;}
.main-about.bg-about-3 .block .block-box .card-1 img{border-radius: 150px 150px 150px 150px; }   
.main-about.bg-about-3 .block .block-box .card-2 { top:10%; }
}

.bg-gradient {background-image: linear-gradient(to top,#eff5f9 0%, #f8f8f8 50%, #fff 100%);}
.bg-gray {background-color: #f2f2f2}

.first-secion{margin-top: -80px;}
.bg-gradient-bk {  padding:80px 0px 120px 0px; background-image: linear-gradient(to bottom,#fffbf2 0%, #f6f6f6 50%, #fff 100%);}
@media (max-width:1200px) {
.bg-gradient-bk {  padding:40px 0px;}
}

@media (max-width:1024px) {
.bg-gray.first-secion{ margin-top:-20px;}
}
@media (max-width:768px) {
.bg-gray.first-secion{ margin-top:0px;}
}



@media (max-width:992px) {
.about-team.bg-about-1,.about-team.bg-about-2{ padding: 40px 0px;   }
.bg-gradient-bk {  padding:40px 0px 0px 0px; }
}
@media (max-width:768px) {
.about-team.bg-about-1 { background-position: left bottom; }
.about-team-main{padding-bottom:100px;}
}
@media (max-width:420px) {
.about-team-main{padding-bottom:50px;}
}
 

.bg-custom-2 {padding:0px 0px 80px 0px; background: url("../images/index/bg-home.jpg") no-repeat left bottom;background-size: 100% auto;}
/*.bg-core-5 {padding: 80px 0px; background: url("../images/index/bg-box.svg")  repeat left bottom;background-size: 30% auto;}*/

.bg-digital-1 {padding: 140px 0px; background: url("../images/index/bg-6.jpg") no-repeat left bottom #215184;background-size: 100% auto;}
@media (max-width:1024px) {
.bg-digital-1 {  background: url("../images/index/bg-6.jpg") no-repeat left bottom #030911;background-size: 150% auto;}
}

.bg-digital-2 {padding: 140px 0px; background: url("../images/index/bg-7.jpg") no-repeat left bottom #fff;background-size: 100% auto;}

@media (max-width:768px) {
 .bg-digital-2 {padding:70px 0px;  }   
}
/* About Us ===================================================================== */


.esg-list{width: 100%; margin:80px auto 80px auto; padding-bottom: 50px; display: flex; flex-wrap: wrap;}
.esg-item {width: calc(100%/3);}


.esg-list .esg-item:nth-child(1) h3, .esg-list .esg-item:nth-child(1) ul li{color: #a2c617;}
.esg-list .esg-item:nth-child(1) .item{border: 1px solid #a2c617;}
.esg-list .esg-item:nth-child(1) .Img{background-color: #a2c617;}
.esg-list .esg-item:nth-child(2) h3, .esg-list .esg-item:nth-child(2) ul li{color: #f59c00;}
.esg-list .esg-item:nth-child(2) .item{border: 1px solid #f59c00;}
.esg-list .esg-item:nth-child(2) .Img{background-color: #f59c00;}
.esg-list .esg-item:nth-child(3) h3, .esg-list .esg-item:nth-child(3) ul li{color: #017a84;}
.esg-list .esg-item:nth-child(3) .item{border: 1px solid #017a84;}
.esg-list .esg-item:nth-child(3) .Img{background-color: #017a84;}



.esg-list .item { padding: 16px;  min-height: 240px;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: 1px solid #215284; border-radius: 84.5px;}
.esg-list .Img { border-radius: 50%;  background-color: #215284; 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;}
.esg-list .Img img{  height: 80px; width:80px;  }


.esg-list .txt .textEditor {  padding-top: 8px;}
.esg-list .txt h3 { color:#215284; font-weight: 700; font-size: 1.375rem;line-height: 1.2;letter-spacing: 0.2px;text-transform: uppercase;margin-bottom: 0px;}
.esg-list .txt .subtitle { padding-top: 5px; color:#000; text-transform: uppercase; font-size: 0.875rem;  font-weight: 500;line-height: 1.2;  }
.esg-list .txt .textEditor p{ color: #4a4a4a;  font-weight: 400; font-size: 1rem; text-align: left; line-height: 1.375rem; }
.esg-list .txt .textEditor ul{ margin: 0px; padding: 0px; }

 
@media (max-width:1180px) {
.esg-list{ margin:40px auto; padding-bottom: 0px; }
.esg-item {width: calc(100%/2); margin-bottom: 20px;}
.esg-list .link {display: none;}   
}

@media (max-width:767.98px) {
.esg-item {width:100%;  }
.esg-list .item {flex-direction: column}
.esg-list .Img {margin-bottom: 10px;}

}

 .pix-item{width: 100%; display: flex; flex-wrap: wrap;}
.pix-list {width: calc(100%/3)}
.pix-list .item { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center; justify-content: center;  flex-direction: column;position: relative;z-index: 9}
.pix-list .Img { border-radius: 50%; height: 140px;  width: 140px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;justify-content: center; align-items: center; margin: auto; position: relative;z-index: 9;background: linear-gradient(45deg, #02191b 0%, rgb(1 122 132) 100%); }
 
.pix-list .Img img{  height: 80px; width:80px;  }
.pix-list .item .txt {margin-top: 10px; width: 100%;  text-align: center; display: block}
.pix-list .item h3 { font-size:1.125rem; letter-spacing:1px; font-weight: 400;}
.pix-list .Img:before { content: ""; margin: auto; width: 110px; height: 110px; border: dashed 2px #fff; border-radius: 99rem; position: absolute; top: 10%;  left: 10%;  z-index: 1; animation: rotate 20s infinite linear;transform-origin: 50% 50%;}
 @media (max-width:767.98px) {
.pix-list {width: calc(100%/2)}    
}



.custom .right { width: 60%; margin-left: -36px;}
.custom .right .custom-list .txt {max-width: 70%; text-align: left;}
.custom .right .custom-list .txt h3 { color:#017a84; 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 .subtitle { padding-top: 5px; color:#c69f47; text-transform: uppercase; font-size: 0.875rem;  font-weight: 500;line-height: 1.2;  }
.custom .right .custom-list .txt .textEditor {  padding-top: 8px;}
.custom .right .custom-list .txt .textEditor p{ color:#017a85;  font-weight: 400; font-size: 1rem; text-align: left; line-height: 1.375rem; }
.custom .right .custom-list .txt .textEditor ul{ margin: 0px; padding: 0px; }

 

.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: 1px solid #c79f47; border-radius: 84.5px;}
.custom .right .custom-list .Img { border-radius: 50%; background-image: linear-gradient(120deg, #f6d365 0%, #c79f47 100%); 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 strong{ font-size: 2rem;font-weight: 700; color: #fff  }
.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 .custom-item:nth-child(2) {  -webkit-transform: translateX(72px); transform: translateX(72px);}
.custom .right .custom-list .link {z-index: 3; position: absolute; left: 0; 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 .custom-item:nth-child(1) .link { top: 68%; left: -38px; -webkit-transform: rotate(-27.75deg); transform: rotate(-27.75deg);}
.custom .right .custom-list .custom-item:nth-child(2) .link {left: -42px;}
.custom .right .custom-list .custom-item:nth-child(3) .link { top: 31%;  left: -38px;  -webkit-transform: rotate(27.75deg); transform: rotate(27.75deg);}
.custom .right .custom-list .link span { background-color: #215284; 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:nth-child(2) {  -webkit-transform: translateX(0px); transform: translateX(0px);}   
.custom .right .custom-list .item {  flex-direction: column; border: none; padding: 0px;}
.custom .right .custom-list .txt h3 , .custom .right .custom-list .txt .subtitle {text-align: center}
.custom .right .custom-list .txt {max-width: 90%;  } 
.custom .right .custom-list .link{display: none;} 
}
 

.card-item{ width: 100%; padding: 80px 0px 0px 0px; display: flex; flex-wrap: wrap; position: relative;}
.card-item li{width: auto; position: relative; list-style: none;}
.card-item li:nth-child(1){width: 25%; -webkit-animation: slide-up-down 2s ease-in-out infinite alternate both;  animation: slide-up-down 2s ease-in-out infinite alternate both;  -webkit-animation-delay: 1s; animation-delay: 1s;}
.card-item li:nth-child(2){width: 45%; -webkit-animation: slide-up-down 3s ease-in-out infinite alternate both;  animation: slide-up-down 3s ease-in-out infinite alternate both;  -webkit-animation-delay: 1s; animation-delay: 1.5s; }
.card-item li:nth-child(3){width: 30%;  }

.card-item li .item .circlebox{ position: relative; padding: 2%;  display: block; overflow: hidden; transition: all 0.5s;}
.card-item li .item .circlebox::before {  content: "";  display: block; position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  width: calc(100% - 2px);  height: 100%; background: url("../images/index/circle2.png") no-repeat center center/100%; z-index: 1; -webkit-animation: rotateCenter 10s linear infinite; animation: rotateCenter 10s linear infinite;}
.card-item li .item .circlebox .item-pic { border-radius: 50%; overflow: hidden; border: 10px solid #f6f8f7; display: -ms-flexbox; display: flex;  -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 2; transition: all 0.5s;}
.card-item li .item .circlebox .item-pic:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 8px); height: calc(100% + 8px); background: url("../images/index/circle.png") no-repeat center center/100%; transition: all 0.5s; -webkit-animation: rotateCenter2 9s linear infinite; animation: rotateCenter2 9s linear infinite; z-index: 1;}
.card-item li .item .circlebox .item-pic img {  position: relative; width: 100%; border-radius: 50%; overflow: hidden;}


/**
 * ----------------------------------------
 * 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); }
}

@-webkit-keyframes rotateCenter {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);}
100% {  -webkit-transform: translate(-50%, -50%) rotate(360deg);  transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotateCenter {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);  }
100% {-webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@-webkit-keyframes rotateCenter2 {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);  }
100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes rotateCenter2 {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes growAndFade {
0% { opacity: 0.75;  transform: scale(0);  }
100% {  opacity: 0; transform: scale(1); }
}
 /* core*/
.product { margin:60px auto; padding: 0px; display: flex;flex-wrap: wrap; position: relative;z-index: 1;}
.product li {width: calc(100%/5 - 30px); margin:30px 15px; position: relative;  transition: all 0.3s linear 0s; list-style: none; }
.product li .item{width: 100%; padding: 20px 0px; border: solid 1px rgb(205 233 235);background: linear-gradient(45deg, #ffffff 0%, rgb(205 233 235) 100%);border-radius:30px; }
.product li .inner-body { padding:10px 20px; }
.product li h3 { position: relative;  font-size:1.375rem; font-weight: 400;  text-align: center; color: #017a84; letter-spacing: 1px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); cursor: pointer;}
.product li h3::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #c69f47; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
.product li:hover h3::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.product li:hover h3{color: #c69f47;}
.product li .photo { width: 50%; height: auto; padding: 0px;  margin: auto; overflow: hidden; position: relative; z-index: 0;  }
.product li .photo figure{ width: 100%; padding-top:100%; height: 0; object-fit: cover;overflow: hidden; position: relative; transition: all 0.5s ease 0s;}
.product li .photo figure img { max-width: none; opacity: 0.8; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.product li:hover  .photo figure img {  animation: wobble 2s linear infinite;}


@media (max-width: 1180px) {
.product li {width: calc(100%/3 - 30px);    }
}
@media (max-width: 767.98px) {
.product li {width: calc(100%/2 - 30px); margin:15px;}
}
@media (max-width:320px) {
.product li {width: calc(100%/2 - 10px); margin:15px 5px;}
.product li .inner-body { padding:10px; }    
} 

.crumbs{  width: auto;  display:flex; flex-wrap: nowrap; margin:10% auto;    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); overflow: hidden; border-radius: 5px; counter-reset: flag; }
.crumbs a {  width:calc(100%/4);   display: flex; margin: auto;  outline: none; font-size:1.125rem; line-height: 60px; font-weight: 500; color:#017a85; padding: 0 30px 0 60px; background:#fff; position: relative;}
.crumbs a:first-child {color:#fff; padding-left: 46px; border-radius: 5px 0 0 5px;  }
.crumbs a:first-child:before {left: 14px;}
.crumbs a:last-child { border-radius: 0 5px 5px 0;  padding-right: 20px;}
 /*hover/active styles*/
.crumbs a.active, .crumbs a:hover{background:#017a85;}
.crumbs a.active:after, .crumbs a:hover:after {background:#017a85;   }
.crumbs a:after { content: ''; position: absolute; top: 0; right: -30px; width: 60px;  height: 60px; transform: scale(0.707) rotate(45deg); z-index: 1; background: #fff; box-shadow:2px -2px 0 2px rgba(0, 0, 0, 0.4),  3px -3px 0 2px rgba(255, 255, 255, 0.1); border-radius: 0 5px 0 50px;}
.crumbs a:last-child:after { content: none;}
.crumbs a:before { content: counter(flag); counter-increment: flag; text-align: center; border-radius: 100%; width: 20px; height: 20px; line-height: 20px; margin: 8px 0; position: absolute; top: 0; left:30px; background:#c79f47; font-weight: 700; color:#017a85;}
.crumbs a:hover{color:#fff;}

 

  /* core-2*/
.timeline { display: flex; flex-direction: column; margin: 20px auto; position: relative;}
.timeline-event { display: flex; align-self: center; width:50vw;margin: 20px 0px 50px 0px; border-radius: 6px;position: relative;z-index: 9}
.timeline-event:nth-child(2n+1) { flex-direction: row-reverse;}
.timeline-event:nth-child(2n+1) .timeline-event-date { border-radius: 0 50px 50px 0;}
.timeline-event:nth-child(2n+1) .timeline-event-content {border-radius: 50px 0 0 50px;}
.timeline-event:nth-child(2n+1) .timeline-event-icon:before {content: "";  width: 2px;  height: 200%; background: #ffc108; position: absolute; top: 0%; left: 50%; right: auto; z-index: -1; transform: translateX(-50%);  -webkit-animation: fillTop 2s forwards 4s ease-in-out; animation: fillTop 2s forwards 4s ease-in-out;}
.timeline-event:nth-child(2n+1) .timeline-event-icon:after { content: ""; width: 100%; height: 2px;  background: #ffc108; position: absolute; right: 0;  z-index: -1; top: 50%;  left: auto; transform: translateY(-50%);  -webkit-animation: fillLeft 2s forwards 4s ease-in-out; animation: fillLeft 2s forwards 4s ease-in-out;}
.timeline-event-title {  font-size: 1.2rem; line-height: 1.4; text-transform: uppercase; font-weight: 600; color:#c79f47; letter-spacing: 1.5px;}
.timeline-event-content { padding: 20px; box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025); background:#fffbf2; width: calc(40vw - 84px);  border-radius: 0 50px 50px 0;}
.timeline-event-date { color: #463001; font-size: 1.5rem;  font-weight: 700; background:#ffe491; display: flex; align-items: center;  justify-content: center; white-space: nowrap;  padding: 0 20px; border-radius:50px 0 0 50px;}
.timeline-event-icon {display: flex; align-items: center;  justify-content: center; align-self: center; padding: 40px;margin: 0 20px; width: 40px;  height: 40px; color:#473001;background: #ffc107;border-radius: 100%;box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);position: relative;}

.timeline-event-icon span { font-size: 32px; font-weight: 900;}


.timeline-event-icon:before { content: "";  width: 2px; height: 150%;  background: #ffc108; position: absolute;  top: 0%; z-index: -1; left: 50%; transform: translateX(-50%); -webkit-animation: fillTop 2s forwards 4s ease-in-out;  animation: fillTop 2s forwards 4s ease-in-out;}
.timeline-event-icon:after { content: ""; width: 100%;  height: 2px; background: #ffc108; position: absolute; left: 0%; z-index: -1;  top: 50%; transform: translateY(-50%); -webkit-animation: fillLeftOdd 2s forwards 4s ease-in-out; animation: fillLeftOdd 2s forwards 4s ease-in-out;}
.timeline-event-description { flex-basis: 100%;}
 

.timeline-event-type2:after { background:#017a85;}
.timeline-event-type2 .timeline-event-date { color:#a4dce1; background:#017a85;}
.timeline-event-type2:nth-child(2n+1) .timeline-event-icon:before, .timeline-event-type2:nth-child(2n+1) .timeline-event-icon:after {background:#a4dce1;}
.timeline-event-type2 .timeline-event-icon { background: #a4dce1; color:#017a85;}
.timeline-event-type2 .timeline-event-icon:before, .timeline-event-type2 .timeline-event-icon:after { background:#a4dce1;}
.timeline-event-type2 .timeline-event-title { color:#047985;}
.timeline-event-type3:after { background: #24b47e;}
.timeline-event-type3 .timeline-event-date { color: #aff1b6; background-color: #24b47e;}
.timeline-event-type3:nth-child(2n+1) .timeline-event-icon:before, .timeline-event-type3:nth-child(2n+1) .timeline-event-icon:after {background: #aff1b6;}
.timeline-event-type3 .timeline-event-icon { background: #aff1b6; color: #24b47e;}
.timeline-event-type3 .timeline-event-icon:before, .timeline-event-type3 .timeline-event-icon:after { background: #aff1b6;}
.timeline-event-type3 .timeline-event-title {color: #24b47e;}
.timeline-event:last-child .timeline-event-icon:before {content: none;}

@media (max-width: 786px) {
 .timeline::after { content: ""; width: 1px; height: 90%; background:#017a84; position: absolute; left: 50%; top:5%;z-index: 0;   }    
.timeline-event {  width:80vw; flex-direction: column; align-self: center;}
.timeline-event-content,.timeline-event:nth-child(2n+1) .timeline-event-content {width: 100%; border-radius: 0 0px 50px 50px;}
.timeline-event-icon {border-radius: 50px 50px 0 0; width: 100%;  margin: 0; box-shadow: none;}
.timeline-event-icon:before, .timeline-event-icon:after { display: none; }
.timeline-event-date { border-radius: 0; padding: 20px; }
.timeline-event:nth-child(2n+1) { flex-direction: column; align-self: center; }
.timeline-event:nth-child(2n+1) .timeline-event-date { border-radius: 0; padding: 20px; }
.timeline-event:nth-child(2n+1) .timeline-event-icon { border-radius: 50px 50px 0 0; margin: 0; }
}
@-webkit-keyframes fillLeft {
100% { right: 100%; }
}
@keyframes fillLeft {
100% { right: 100%; }
}
@-webkit-keyframes fillTop {
100% { top: 100%;  }
}
@keyframes fillTop {
100% { top: 100%; }
}
@-webkit-keyframes fillLeftOdd {
100% { left: 100%; }
}
@keyframes fillLeftOdd {
100% { left: 100%; }
}