.main-area.top { background-color: transparent;}
.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 {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:840px) {
.block-full{width:100%;padding:0px 5px; }    
.block-txt{ padding:0px 30px;}
 }
@media (max-width:767.98px) {
.block-full{padding:0px; }    
.block-txt{ padding:0px;}  
 }
.block p,.block-txt p,.about-card-inner p{ width: 100%; font-size:1.125rem; font-size: min(max(3.5vw, .9rem), 16px); line-height:2rem; font-weight: 400;  padding:5px; margin-bottom: 10px;  color:#3f3a39;  }
.block p strong,.block-txt 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-box{ width: 80%;bottom: 0px;left:0px;  position: absolute; z-index: 9; }
@media (max-width:767.98px) {
.block p,.block-txt p,.about-card-inner p{  line-height:1.5rem; padding: 5px 0px; }
}

.block-photo{  width: 100%; max-width: 80%; margin: auto; padding: 0px; list-style: none; border-radius:0px 60px 0px 60px; }
.block-photo:before{content: ""; width: 70%; height:80%;  position: absolute;z-index: -1; right:-20px; top:-50px; background:#0397db; border-radius:0px 60px 0px 60px;}
.block-photo:after{content: ""; width: 200px; height:150px;  position: absolute;z-index: -1; left:10px; bottom:15%; background: url("../images/index/bg-1.svg") no-repeat left top;}
.block-photo li{width: 100%;  }
.block-photo li img{width: 100%; border-radius:0px 60px 0px 60px;}
 @media (max-width:1280px) {
.block-photo:after{bottom: 25%;}
 }
@media (max-width:840px) {
.block-photo{  margin:40px auto; }
 }
 @media (max-width:767.98px) {
.block-photo{ max-width: 100%;}	 
.block-photo:before{ right:-20px; top:-30px; }
}
 
 
.card-5{ width:45%;  height: auto; margin: auto;  position: absolute;top:10%; left:5%; z-index: 1;  }
.card-3{ width:60%; height: auto; margin: 35% auto auto auto;  }
.card-4{ width: 40%; margin: 0px; padding: 0px;position: absolute;top:18%;right:0px; }
.card-5 img,.card-3 img,.card-4 img{display: block; margin: 0; box-shadow: 0px 5px 16px rgba(0,0,0,.3);border-radius:15px;} 
.card-6{ height: auto;    }
@media (max-width:840px) {
.card-3{  margin: 20% auto auto auto}
.card-6{  text-align: center}
}
@media (max-width:767.98px) {
.card-3{  margin: 30% auto auto auto}
.card-5{top:0; left:0;}	
}



.about-card{ width: 100%; margin:50px auto; padding:50px 0;}
@media (max-width:1024px) {
.about-card{ margin:50px auto; padding:0px;}
}
@media (max-width:840px) {
.about-card{  padding:0px 30px;}
}
@media (max-width:767.98px) {
.about-card{  padding:0px;}
}
.about-card li{ width: 100%;margin: 0px auto 30px auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; position: relative; }
.about-card-inner { width: calc(100% - 250px); padding-left: 50px; }
.title-circle{ width: 130px; height: 130px; border: solid 2px #0ba1b0; border-radius: 99rem;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; position: relative; }
.title-circle h2{font-size: 1.6rem; font-weight: 700; color:#2a424c; letter-spacing: 1px;}
.title-circle h2 strong{display: block }
.title-circle p{margin:0px; font-size: .9rem; font-weight: 700;color:#2a424c;}
.title-circle:before{ content:"";  position: absolute; z-index:-1; top:45%; right:-30%;width:42px; height:42px;background: url("../images/index/circle-line.svg") no-repeat right top; background-size: 100% auto; }  
.title-circle-w{  border-color:#fff;   }
.title-circle-w h2{color:#fff;  }
.title-circle-w p{ color:#fff;}
.title-circle-w:before{ background: url("../images/index/circle-line-w.svg") no-repeat right top;  }  
@media (max-width:840px) {
.about-card li{ justify-content:flex-start;  }
.about-card-inner { width: 100%; padding-left:0px; }
}


.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 30px 30px ; position: relative;  }
.about-team-container >.about-team-column:nth-child(odd) { width:50%; }
.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;}
@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-container >.about-team-column:nth-child(odd) { width:100%; }
.about-team-container >.about-team-column:nth-child(2n) {   width:100%; flex: 0 0 100%; margin-left: auto;}
}
@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-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 30px 30px 30px;}   
.about-team { padding:0px; margin-bottom: 0px;}     
.about-team-container >.about-team-column:nth-child(odd),.about-team-container >.about-team-column:nth-child(2n) { padding: 0px; }
}
@media (max-width:320px) {
.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; }
}


/*bg-style*/
.about-team.bg-about-1 { padding: 80px 0px;  position: relative;  z-index: 1; width: 100%; background: url("../images/index/bg-1.jpg") no-repeat center;background-size: 100% auto;}
.about-team.bg-about-2 { padding: 80px 0px;  position: relative;  z-index: 1; width: 100%;  background: url("../images/index/bg-8.jpg") no-repeat right bottom;background-size: 80% auto;}
.bg-gradient-bk {  padding:80px 0px 120px 0px; background-image: linear-gradient(to top,#f2f2f2 0%, #f6f6f6 50%, #fff 100%);}
.bg-custom-1 {padding: 80px 0px; background: url("../images/index/bg-5.jpg") no-repeat left bottom #12548e;background-size: 100% auto;}
.bg-custom-3 {padding: 80px 0px; background: url("../images/index/bg-6.jpg") no-repeat left bottom #12548e;background-size: 100% auto;}
.bg-custom-4 {padding: 20px 0px; background: url("../images/index/bg-7.jpg") no-repeat left bottom #fff;background-size: 100% auto;}
.bg-custom-1 .title-circle { margin: 0 auto 0 0;}
.bg-custom-4 .title-circle { margin: 0 auto 0 0;}
@media (max-width:1024px) {
.about-team.bg-about-2 { padding: 40px 0px 0px 0px;background-size: 100% auto; }
.bg-gradient-bk {padding:40px 0px 120px 0px; }
.bg-custom-1 {padding: 20px 0px; }
.bg-custom-3 {padding: 0px 0px;margin-top: -3px;  }
.bg-custom-4 {padding: 0px 0px 20px 0px;}
}
@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:100px;}
}
@media (max-width:420px) {
.about-team-main{padding-bottom:50px;}
}

 

.card-item{ width: 100%; padding: 20px 0px 0px 0px; display: flex; flex-wrap: wrap;justify-content: center; 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: 30%; -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: 28%;  }

.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;}

 @media (max-width:767.98px) {
.card-item{ padding: 0px; justify-content: space-around; }
.card-item li .item .circlebox .item-pic { border: 5px solid #f6f8f7; }	 
.card-item li:nth-child(1){width: 32%; }
.card-item li:nth-child(2){width: 35%; }
.card-item li:nth-child(3){width: 28%;  }
.card-item li .item .circlebox::before { display: none }
}

/**
 * ----------------------------------------
 * 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 rotate2 {
  to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}
@keyframes rotate2 {
  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);  }
}