.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,.block-full 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{  }

@media (max-width:768px) {
.main-about p,.block-txt p,.block-full p{  line-height:1.5rem;  }
}

.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%;  position: relative; z-index: 9; }
.card-1{ width:auto; height: auto; margin:auto;  border-radius:50px 0px 50px 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}
}

.grid-wrap{ width: 50%; }
.grid-flex-end{justify-content: flex-end}
.grid-flex-start{justify-content: flex-start}
.grid-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); gap:40px; 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; }
.grid-w30 figure.pho{   margin-bottom: 20px; border-radius:30px; overflow: hidden}

.grid-box-color { display: flex; flex-wrap: wrap;align-items: center; justify-content: center; width:200px; height: 200px;  padding: 20px;  border-radius:99rem;  border:solid 1px #f8f8f8; background-color:transparent;  }
.grid-box-color:nth-child(1){border: 1px solid #a2c617; background-color:#a2c617; }
.grid-box-color:nth-child(2){border: 1px solid #f59c00;  background-color:#f59c00;}
.grid-box-color:nth-child(3){border: 1px solid #017a84; background-color:#017a84; }
.grid-box-color:nth-child(4){border: 1px solid #03a9f4;  background-color:#03a9f4;}
 
.grid-box-color.grid-w30 h3 { margin:0px  auto; text-align: center; font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#fff}
 figure.pic-radius{ margin:30px; border-radius:30px; overflow: hidden}
 figure.pic-radius img{ border-radius:30px; overflow: hidden}
@media(max-width:1280px) {
.grid-wrap{ width: 60%; }
.grid-card {  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr)); gap:20px; padding: 15px 0px;position: relative;z-index:2}
 }
@media(max-width:1160px) {
.grid-wrap{ width: 100%; }
}

.bg-about-2 {padding: 80px 0px; background: url("/images/theme-b67/index/bg-vision.jpg") no-repeat left bottom;background-size: 100% auto; background-color:#000;border-radius: 180px 0px 0px 0px; }
.bg-about-2 .titlebox{ padding: 30px 0px 0px 150px;}
@media (max-width:1200px) {
.bg-about-2 { padding: 40px 0px; }
}
@media (max-width:840px) {
.bg-about-2 {padding: 80px 0px 200px 0px;}
.bg-about-2 .titlebox{ padding: 30px 0px 0px  0px;}	
.bg-about-2 { border-radius:60px 0px 0px 0px; }		
}
@media (max-width:768px) {
 .bg-about-2 .block-txt{ padding:0px; }
 }
 @media (max-width:640px) {
.bg-about-2 {  background-size: 150% auto; border-radius:0px; padding: 80px 0px 240px 0px; }	 
}
 
.bg-about-3 { padding: 80px 0px; background: url("/images/theme-b67/index/bg-vision-2.jpg") no-repeat left bottom;background-size: 100% auto; background-color:#8c999f;border-radius:180px 0px 0px 0px;}
@media(max-width:1280px) {
.bg-about-3 { padding: 80px 0px; background-size: 120% auto; background-position: right bottom}	
.bg-about-3 p.color-white{text-shadow: 0px 1px 2px rgba(0,0,0,.4)}	
}
@media(max-width:1160px) {
.bg-about-3 { padding: 80px 0px; border-radius:120px 0px 0px 0px; background-image: none }	
}
@media(max-width:840px) {
.bg-about-3 { border-radius:60px 0px 0px 0px; }	
}



.bg-core{ padding:80px 0px; background: url("/images/theme-b67/index/bg-vision-3.jpg") no-repeat left bottom;background-size: 100% auto; background-color:#000 ;border-radius:180px 0px 0px 0px; }
 
.core { width: 100%; margin: 30px 0px; padding: 30px;  list-style: none;position: relative}
.core:after { content: ""; width: 1px; height: 100%; position: absolute;z-index: 0; left:0px; top:0px; background-color: #D14C33}
.core li{ width: 100%; margin-bottom: 30px; position: relative}
.core li:before{ content: ""; position: absolute; left:-38px; top:5px; width: 16px; height: 16px; border-radius:50%; border:solid 1px #D14C33 ;    }
.core li:after{ content: "";position: absolute; left:-34px; top:9px;  width: 8px; height: 8px; border-radius:50%;background-color: #D14C33 ;animation: animate-pulse 3s linear infinite; }
.core li h3{ font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#D14C33}
.core li p{font-size: 1rem; margin-bottom: 10px; font-weight: 400; color:#fff}

@media(max-width:1160px) {
.bg-core{ padding:80px 0px 140px 0px; border-radius:60px 0px 0px 0px; background-size: 80% auto;   }
}
@media(max-width:440px) {
.core li h3{ font-size: 1.125rem; }
.core li p{font-size: .9rem; }	
}
@keyframes animate-pulse{
0%{ box-shadow: 0 0 0 0 rgba(255,109,74,0.7), 0 0 0 0 rgba(255,109,74,0.7); }
40%{ box-shadow: 0 0 0 20px rgba(255,109,74,0.0), 0 0 0 0 rgba(255,109,74,0.7);  }
80%{ box-shadow: 0 0 0 20px rgba(255,109,74,0.0), 0 0 0 30px rgba(255,109,74,0); }
100%{ box-shadow: 0 0 0 0 rgba(255,109,74,0.0), 0 0 0 30px rgba(255,109,74,0);     }
}

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


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

 
 @-webkit-keyframes circleAni {
0% {  -webkit-transform: rotate(0deg);  transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes circleAni {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg);  transform: rotate(360deg) }
}