.venn {overflow: hidden; position: relative; border-radius: 50%;  background:rgba(4,92,216,.7);  text-transform: uppercase; font-size: 24px; color: white; font-weight: 700; line-height: 1;width: 80vmin;  height: 80vmin;  padding:40px; margin: auto;}





.venn:hover, .venn:hover *, .venn:hover *:after { animation-play-state: paused;}

.venn > span { position: relative; z-index: 1; text-align: center; display: block; font-size: 32px;}

.venn > span:nth-child(2) { position: absolute; inset: 53% 0 0 0;}

.venn__circles { position: absolute; inset: auto 0 12% 0;  margin: auto;  width: 78%; height: 73%; transform-origin: 50% 55%; animation: venn_rotate 7s linear infinite;}

.venn__circles i { animation: venn_rotate 7s linear infinite; animation-direction: reverse; position: absolute; bottom: 0; margin: auto; width: 62%; aspect-ratio: 1/1; border-radius: 50%; background: rgba(80, 227, 194, 0.5);}

.venn__circles i:nth-child(2) { --animation-delay: calc(-7s / 3 * 2); right: 0; bottom: 0;}

.venn__circles i:nth-child(3) { --animation-delay: calc(-7s / 3); left: 0; right: 0; bottom: auto;}

.venn__circles em { font-style: normal; position: absolute; inset: 35% 5%; animation: venn_rotate 7s linear infinite;  animation-delay: var(--animation-delay); display: flex; align-items: flex-end;}

.venn__circles em:after { content: attr(data-text); display: flex; align-items: center; justify-content: center; text-align: center;  width: 66.6666666%; animation: venn_rotate 7s linear infinite; animation-delay: var(--animation-delay); animation-direction: reverse;}

.venn__circles .Img { height: 100px; width: 100px; background-color: #fff; border-radius: 50%; margin-right: 20px;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden}

@keyframes venn_rotate {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

 

@media (max-width:1366px) {

.venn {width: 66vmin;  height: 66vmin; margin: auto; }	

}

@media (max-width:767.98px) {

.venn {width: 80vmin; height: 80vmin; }	

.venn > span { font-size: 18px;}

	.venn__circles em { font-size: 18px;}

.venn__circles em:after { font-size: 18px;}



 }







.missionList { margin-top: 20px;width: 100%; display: flex; flex-wrap: wrap; }

.missionItem { width: calc(100%/3); -webkit-box-align: center;  -ms-flex-align: center; align-items: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; flex-direction: column;  color: #fff}

.missionItem .Img { height: 100px; width: 100px; background-color: #fff; border-radius: 50%; margin: auto;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden}

@media (max-width:768px) {

.missionItem .Img { height: 60px; width: 60px;  min-width: 60px }

}

.missionItem .Img img { height: 60px; width: 60px; /* -webkit-filter: drop-shadow(100px 0 #045cd8); filter: drop-shadow(100px 0 #045cd8);-webkit-transform: translateX(-100px); transform: translateX(-100px)*/ }

@media (max-width:768px) {

.missionItem .Img img {  height: 30px;  width: 30px }

}

.missionItem  h3 { font-size: 1.125rem; font-weight: 700; margin-bottom:0px; letter-spacing:1px; color: #0199ff}

@media (max-width:768px) {

.missionItem h3 {  margin-bottom: 0 }

}

 

.missionItem .Txt { margin: auto; text-align: center; }

.missionItem .text { font-size: 1.125rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.96px; }

 

.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }

.main-about{ position: relative; margin:0px; padding:0px; }

.main-about::after{width:200%; content: attr(data-content);color: #000; font-size: 180px; font-weight: 900; word-wrap: normal;font-family: "Raleway", sans-serif; letter-spacing: 3px; -webkit-text-stroke: 1px #c2c3c4;  -webkit-text-fill-color: transparent; left:10%; top:-5%; position: absolute; z-index:1;}

.main-about .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}

 @media (max-width:1024px) {

.main-about::after{width:200%; font-size: 120px;top:10%; left:0px; }

}

@media (max-width:840px) {

.main-about::after{width:200%; font-size: 120px;top:0px; }

}

@media (max-width: 767.98px) {

.main-about{ padding:40px 0px 0px 0px;background-size: 100% auto; background-position:0px top;}   

.main-about::after{width:100%; font-size: 80px;top:1%; left:0px;}

}

@media (max-width: 420px) {

.main-about::after{ font-size: 66px;}

}

@media (max-width: 320px) {

.main-about::after{ font-size: 46px;}

}

.block {width:50%; height: auto;margin: 0; padding: 2vw 6vw;}

@media (max-width: 992px) {

.block {width:100%;margin: 0px; padding: 0px 40px; }  

} 

 @media (max-width:767.98px) {

.block { padding: 0px; }  

} 

.block-txt{width:100%; margin: auto; padding:50px 0px ;  display: block; position: relative;z-index: 9;   }

.block-txt p { font-size:1rem;  line-height:1.875rem; font-weight: 400;   margin-bottom: 10px; color:#3b3d40 }

.block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;   margin-bottom: 10px; color: #fff; }

.post-btn{  margin-top:30px; }



 @media (max-width: 1280px) {

.block-txt p { font-size:0.9rem; }

}

@media (max-width:840px) {

.block-txt{ margin:50px 0px; padding: 0px 40px;}   

}

@media (max-width:767.98px) {

.block-txt{  padding: 0px 30px;}   

}

@media (max-width:640px) {

.block-txt p { font-size:0.9rem; line-height: 1.5rem;  }

}

 

@media (max-width:320px) {

.block-txt{  padding: 0px 20px;}  

 }



.block-pic {width:50%; height: auto;margin: 0; padding:0px;  position: relative;  }

 @media (max-width: 992px) {

.block-pic {width:100%; height: 420px; order: 2;  }

}

@media (max-width: 320px) {

.block-pic {width:100%; height: 360px; }

}

 





.card-box{ width: 100%; height: 100%;  } 

.card-2 { width: 100%;  background-image: attr(src url); background-repeat: no-repeat; background-size:  cover; background-position:left bottom;   position: absolute;z-index: 1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  border-radius:0px 200px 0px 0px; overflow: hidden  }

@media (max-width:1360px) {

.card-2{ margin: auto;  }

 }

 @media (max-width:992px) {

.card-2 { background-position:left top; }	 

}







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

@media (max-width: 1024px) {

.bg-end-background {  background-size:120% auto ;  }	

}

@media (max-width:767.98px) {

	.bg-end-background {  background-position:left center;  background-attachment:local;  }



}



.promiseArea { padding: 50px 0px;  position: relative; overflow: hidden}

.promiseArea  strong{color:#0199ff;}

.promiseArea .title-4{ border-bottom: solid 1px #fff;}

.promiseArea .leftBox, .promiseArea .rightBox { width: 50%; max-width: 620px}

.promiseArea .leftBox p{ font-weight: 600 }

@media (max-width:840px) {

.promiseArea .leftBox, .promiseArea .rightBox {  width: 100% ; max-width: 100%;}

.promiseArea .leftBox{  margin-bottom: 40px }

}







.missionBox { width: -webkit-fit-content; width: -moz-fit-content;  width: fit-content; width: 100%; max-width:560px; margin-left:30px; margin-right: auto; position: relative; padding: 60px;   backdrop-filter: blur(4px);    }

@media (max-width:768px) {

.missionBox {  margin-right: 0; margin-left: auto }

}

@media (max-width:640px) {

.missionBox { padding: 20px;  margin-left: 0 }

}

.missionBox:before { content: ""; position: absolute;  width: 100%;  height: 100%;   transform: skewX(-10deg); border: 5px solid #0199ff;left: 0; top: 0; z-index: 1;  }

@media (max-width:768px) {

.missionBox:before { height: 10px  }

}

 

 /* ==== Sustainable === */

 .bg-sustainable {width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto;  background-position:center;background-color: #000;   background-attachment: fixed; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; } 

.sustainable-mould{ width: 100%; padding: 0; position: relative }

.sustainable-mould::before{ content: ""; width: 100%;height: 100%; background-color: rgba(0,0,0,.3); position: absolute; left:0px;top:0px;  }

.sustainable{ padding:5vw 2vw;   }



.sustainable .col { padding: 0; }

.sustainable .desc { display: flex; align-items: center; flex: 0 0 calc(100%/3 - 30px); margin: 15px; }

.sustainable .block-title { padding: 0 2vw;}

.sustainable .block-title-txt p{ margin: 0; font-size: clamp(.9rem, 2.3vw, 1.125rem); font-weight: 500; color: #fff; line-height: 1.75rem;}





.sustainable-mould .title-block h2:before,.title-block h2::after { background-color:#fff;}

 



@media (max-width:768px) {

.sustainable{ padding:5vw 0px; margin: auto  }

.sustainable .desc { margin: 15px auto; }

.bg-sustainable {background-size:200% auto;  background-attachment: scroll;background-position:right top;  } 

 }







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

}



 





 

@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); }

}

 

 

@-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 {   margin-top:0px;  opacity: 1;  -ms-transform: translateY(0); transform: translateY(0); }

.milestone-box .milestone-list-year {margin-bottom: 20px; font-size: 32px; color: #004198; 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:#004198; 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 #004198; 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: #004198; margin: 0 auto; border-radius: 50%; }

.milestone-box .milestone-list-info .milestone-list-dot-line { position: absolute; height: 1px;  background-color:#004198; 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:#004198; 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) }

}


.travel_pic { margin: 0 0 calc(20px + 4%) 0;}

@media (max-width: 430px) {
.travel_pic img { margin: 0;}
}