.block-box,.background-bg img,.product li,.product li figure,.box  { -webkit-transition: all 0.5s; transition: all 0.5s;}

@-webkit-keyframes caseScale {
0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes caseScale {
0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes caseScale2 {
0% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes caseScale2 {
0% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

 
.shape.shape1 {-webkit-animation: caseScale 1s linear forwards; animation: caseScale 1s linear forwards;}
.shape.shape2 { -webkit-animation: caseScale 1s 0.8s linear forwards; animation: caseScale 1s 0.8s linear forwards;}

.pic-box .pic {-webkit-animation: caseScale2 1s 0.4s linear forwards; animation: caseScale2 1s 0.4s linear forwards;}
.pic-box .picLogo { -webkit-animation: caseScale2 1s 1.2s linear forwards; animation: caseScale2 1s 1.2s linear forwards;}





.pic-box{-webkit-box-ordinal-group: 3;  -ms-flex-order: 2; order: 2; width: 45%; position: relative; padding: 0 60px 160px;}
@media (max-width: 1300px) {
.pic-box{width: 40%; }
}
@media (max-width: 1200px) {
.pic-box{ width: 50%; padding: 0; -webkit-box-ordinal-group: 2;  -ms-flex-order: 1;  order: 1; margin: 0 auto;}
}
@media (max-width: 640px) {
.pic-box{width: 100%;}
}
.pic-box .pic {   position: relative;  width: 100%; opacity: 1;}
/*.pic-box .pic {clip-path: polygon(0 20%, 50% 0, 100% 19%, 100% 81%, 53% 100%, 0 83%);}*/



@media (max-width: 1200px) {
.pic-box .pic { width: 75%; margin: 0 auto; }
}
.pic-box .pic img { width: 100%; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 1}
.pic-box .picLogo { position: absolute; bottom: 20%; left: -100px; 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; align-items: center; width: 400px; height: 400px; background: url("../images/index/card-logo-bg.png") no-repeat center;background-size: contain; pointer-events: none; opacity: 1;}
.pic-box .picLogo img { position: relative; z-index: 2; width: 40%;}

@media (max-width: 1280px) {
.pic-box .picLogo { bottom: 5%; }
}
@media (max-width: 1200px) {
 .pic-box .picLogo { bottom: -5%;}
}
@media (max-width: 1023px) {
.pic-box .picLogo {bottom: -15%;}
}
@media (max-width: 640px) {
.pic-box .picLogo {width: 240px;height: 290px;left: -30px;}
}
@media (max-width: 360px) {
.pic-box .picLogo {bottom: -35%;}
}

.main-about .shape { position: absolute;}
@media (max-width: 1023px) {
.main-about .shape { width: 30%; }
}
.main-about .shape img { width: 100%; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.main-about .shape.shape1 { top: 0; left: 0; opacity: 1; -webkit-transform: scale(0); transform: scale(0);}
@media (max-width: 640px) {
 .main-about .shape.shape1 { left: 20px; }
}
.main-about .shape.shape2 { bottom: 125px; right: 0px; opacity: 1; -webkit-transform: scale(0); transform: scale(0);}
@media (max-width: 1280px) {
.main-about .shape.shape2 { bottom: 10%; }
}
@media (max-width: 640px) {
.main-about .shape.shape2 { right: 20px; }
}


.main-about .box-wrap:nth-child(even){ flex-direction: row-reverse;}




.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }
.box-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap; justify-content: space-between; }

.main-area.top .main-content{margin-top: 0px; padding: 0px}
.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: #404040; }
.block-txt p strong{  display: block;  width: 100%; font-size: 1.5rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:700;  padding:5px; margin-bottom: 10px; color: #eb9924;  }
.block p,.about-team-main-summary p ,.about-box p,.overview-list-column p,.overview-desc{ width: 100%; font-size:1.125rem;  line-height:1.875rem; font-weight: 400;  padding:5px; margin-bottom:20px;  color:#3f3a39;  }
@media (max-width:767.98px) {
.block p,.about-team-main-summary p ,.about-box p,.overview-list-column p,.overview-desc{  margin-bottom:20px; line-height:1.75rem;   }
}
@media (max-width:1024px) {
.main-area p,.block p,.block-txt p  {  font-size:1rem;}
}

.main-about{ position: relative; margin:0px; padding:80px 0px 0px 0px; display: flex; flex-wrap: wrap;justify-content: space-between; background-color: #fff; }
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.main-about::before { content: ""; position: absolute; width: 100%; height: 517px; bottom:0px; left: 0;background: url("../images/index/bg-item.png") no-repeat left bottom;background-size: 100% auto;}
@media (max-width: 1180px) {
.main-about::before { display: none;}
}

@media (max-width: 1280px) {
.main-about{ padding:80px 20px 40px 20px;}
}
@media (max-width: 1024px) {
.main-about{ padding:40px 0px; }
}
@media (max-width:640px) {
.main-about{ padding:0px; }
}


.block {width:50%; height: auto;margin: 0; padding:0px;  position: relative;z-index: 1 }
.block-txt{width:80%; margin:60px auto; padding:0px 30px;}
.block-box { border-left: 8px solid #e5e5e5; padding: 0px 40px 20px 40px;}
@media (max-width:1366px) {
.block-txt{width:100%; margin:60px auto; padding:0px 30px;}
.block p {  font-size:1rem;  line-height:1.75rem;  }
}
@media (max-width: 1280px) {
.block-txt{width:100%; padding:20px;  }
}
@media (max-width: 1024px) {
.block {width:100%;margin: 0px; padding: 0px; display: block; }  
.block-txt{ padding:20px 30px;margin: 0px;  }
.block-box{ width: 100%;}   

}

@media (max-width:767.98px) {
.block-txt{ margin:20px 0px; padding: 0px 20px;}   
.block-box {  border-left:none;   padding: 0px 0px 20px 0px;}    
}
@media (max-width:640px) {
.block p { padding:5px 0px; margin-bottom: 20px;  }    
}
@media (max-width:320px) {
.block-txt{ margin:20px 0px; padding: 0px;}   
 
}

 


.icon-list{width: 100%; margin:0px auto; padding:30px 0px; display: flex; flex-wrap: wrap;  }
.icon-list li{width:calc(100%/2); margin:0px; display:flex; flex-wrap: wrap;  align-content: flex-start;  position: relative; } 
.icon-list li .item{ width: 100%; margin:0px; padding:0px 0px 0px 10px; }
.icon-list li h3 { width: 100%; font-size:2.75rem; line-height: 2.75rem; font-weight:900;  color:#063688;overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis;  position: relative; }  
.icon-list li h3 span{ padding-right: 10px; font-size:1.15rem;  font-weight:400;  color:#000;  }
.icon-list li p {  width: 100%; font-size: 1rem; line-height: 1.15rem; font-weight:400; color:#777;   }  
@media (max-width: 1280px) {
.icon-list{  padding:30px 10px 30px 60px; }
.icon-list li h3{  font-size: 2rem; }
.icon-list li h3 span{ font-size:1rem;  }
.icon-list li p{font-size:.875rem; }
}
@media (max-width:767.98px) {
.icon-list{  padding:30px 0px 30px 30px; }
.icon-list li{width:100%; margin:0px; display:flex; flex-wrap: wrap;  align-content: flex-start;  position: relative; } 
}

.about-team { position: relative;z-index: 1;   padding:0px 0px 80px 0px; background-color:#f2f5f7; }



.about-team-row {width: 100%; max-width: 80%; margin: auto;   }
@media (max-width: 1024px) {
 .about-team-row {  max-width: 100%; }
   
}


.about-team-container,.team-esg {  display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0px 140px;  position: relative;z-index: 1; }
.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-container >.about-team-esg:nth-child(odd) { width: calc(45.66667% - 11.66667px); max-width: calc(45.66667% - 11.66667px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(45.66667% - 11.66667px); flex: 0 0 calc(45.66667% - 11.66667px);padding-top: 40px;}
.about-team-container >.about-team-esg:nth-child(2n) {  width: calc(54.33333% - 8.33333px); max-width: calc(55.33333% - 8.33333px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(55.33333% - 8.33333px); flex: 0 0 calc(54.33333% - 8.33333px);padding-top: 40px; padding-left: 40px; margin-left: 0px;}

.about-team-container.team-esg {display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0px 140px;  position: relative;z-index: 1; }
.about-team-container.team-esg:nth-child(odd) { flex-direction: row-reverse }
.about-team-container.team-esg .about-team-esg:nth-child(2n){margin-left: 0px; margin-right:0px; padding-right: 40px;}
 
.photo {  width: 100%; height: auto; position: relative;}
.photo img {  border-radius: 10px; background-position: center;   width: inherit;height: inherit;}
.photo-image { color: rgba(0, 0, 0, 0.16);box-shadow: 0 2px 4px, 0 4px 8px -1px, 0 8px 16px -2px, 0 16px 32px -4px, 0 32px 64px -8px, 0 64px 128px -16px; background-size: 150%;}
  .photo-shadow { background-color: #fff; box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 1), 0 2px 50px 2px rgba(0, 0, 0, 1), 0 0 100px 3px rgba(0, 0, 0, .25); height: 1px;  margin: -1px auto 0;  width: 80%; z-index: -1;}
  
   


.about-team-main-name { margin-bottom: 20px; font-size: 26px; font-weight: 700; line-height: 1.5;   letter-spacing: normal; color:#00437c;}
.about-team-main-name:before { width: 10px; height:10px; content: ""; display: inline-block;  margin-right: 8px;  margin-bottom: 4px; background-color:#00437c; border-radius: 2px;}
.about-team-main-row { position: relative; margin-bottom: 63px;  }
.about-team-main-summary { margin-top: 11px;}  
.about-team-image{position: relative;}
.background{position: relative; width: 100%; height: 480px; overflow: hidden; }
.background-bg img{ width: 100%; max-width: 100%; height: auto; display: block; margin: auto; -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; position: relative; z-index: 0;}
@media (max-width:1024px) {
.about-team-container {  padding: 0px 40px 30px 40px;}      
}

@media (max-width:768px) {
.about-team-container .wrapper{padding: 0px;}    
.background{ height: 380px; }    
}
@media (max-width:767.98px) {
 .about-team-container {  padding: 0px 20px;}      
.about-team { padding:0px; margin-bottom: 0px;}     
.about-team-main-name { font-size: 150%; }    
.about-team-container >.about-team-column:nth-child(odd) { width: 100%; max-width: 100%;   -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin-left: 0px; }
.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;  }
.about-team-container >.about-team-esg:nth-child(odd) { width: 100%; max-width: 100%;   -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin-left: 0px;   }
.about-team-container >.about-team-esg: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-top: 0px; padding-left: 0px; }
.background{ height: 200px; }    
}



.product  { margin:0px; padding: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;  }
.product li{ width: calc(100%/4); margin: 15px 0px; padding:0px;  list-style: none; background: #fff; position: relative;  overflow: hidden;   -webkit-box-shadow: 5vw 5vw 3vw -3vw rgb(0,0,0,20%);  box-shadow: 5vw 5vw 3vw -3vw rgb(0,0,0,20%);}
.product li:after {  content: ""; position: absolute; top: 0; right: 0;  width: 1px; height: 100%;background: #e0e0e0; z-index: 2;}
.product li figure {  width: 100%; padding-bottom: 100%;  height: 0;   position: relative; overflow: hidden;  }
.product li:hover figure img { transform: scale(1.05);  opacity: 1; }
.product li .inner{width: 100%;  padding: 10px; text-align: center;  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; position: relative;  z-index: 4; }
.product li a h3 { margin: 5px 0px; font-size:1.313rem; line-height: 1.466; color: #000; font-weight:400; overflow: hidden; white-space: normal;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; text-overflow: ellipsis;}
.product li p{ color: #262626; font-size: 15px; line-height: 1.466; word-wrap: break-word;  text-overflow: ellipsis; height: 45px;}
.product li:hover .inner{ color: #fff!important;  -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); }
.product li:hover h3{color: #56cbf2;}
@media (max-width: 1180px) {

.product li a figure,.product li a .arrow {opacity: 1;  }
}
@media (max-width: 1024px) {
.product  {width: 100%; padding: 0px;  margin: 0 auto; }
}
@media (max-width: 992px) {
.product li a .arrow:before { border-width: 0 0 70px 70px; }
}
@media (max-width: 840px) {
.product li{ width: calc(100%/3); }
}
@media (max-width: 767.98px) {
.product li{ width: calc(100%/2); padding: 0px; }
.product li:after, .product li:befor{display: none!important;} 
.product li a h3 {   font-size:1rem;  }
}




/* ==== 底圖 === */
.bg-background {background-image: attr(src url); background-repeat: no-repeat; background-size: 100% auto;background-position:center bottom;position: absolute;z-index: 0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%; pointer-events: none;}
@media(max-width:767.98px) {
.bg-background {background-size:cover;}
}

.bg-feather { box-shadow: 0 0 10px 10px transparent  inset, 0 0 30px 20px transparent  inset, 0 0 50px 30px transparent inset; filter: blur(1px);  background-size:auto; background-position:left bottom; position: absolute; bottom: 0;z-index: -1; opacity: 0.5; }
.bg-feather-2 {  background-size:auto; background-position:left bottom; position: absolute; bottom: 0;z-index: -1;   }
.bg-feather-3 {  background-size:auto; background-position:left bottom;    }
@media(max-width:1440px) {
.bg-feather {   background-size:100% auto;   }    
.bg-feather-2 {  background-size:100% auto;   }    
}


@media(max-width:767.98px) {
.bg-feather {   background-size:150% auto;   }    
.bg-feather-2 {  background-size:150% auto;   }   
    .bg-feather-3 {   background-size:150% auto;background-position:left bottom;    }
}



/* ==== 底圖 fix=== */
.bg-background-fix { background-image: attr(src url); background-repeat: no-repeat; background-size: 80% auto;background-position:left bottom; background-attachment: fixed; background-color: #fff; position: absolute;z-index: 0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%;  }
@media(max-width:1024px) {
.bg-background-fix {background-size:contain;}
}


.about-box{ width: 90%; margin:6% auto;position: relative;z-index: 1 }
.box { position: relative;z-index: 1; margin: 0 auto;padding:30px 30px 30px 50px; width: 80%; height: auto;   pointer-events: all; }
.box:before {content: ""; position: absolute;z-index: 0; top: 0; left: 0;  width: 100%; height: calc(100% + 20px); background: transparent; border-top: 2px solid #d9e1ed; border-left: 2px solid #d9e1ed; box-sizing: border-box;}
.box:after { content: ""; position: absolute;z-index: 0; top: 0; left: 0; width: 100%; height: calc(100% + 20px); border-bottom: 2px solid #d9e1ed; border-right: 2px solid #d9e1ed; box-sizing: border-box;} 
.box .fas { font-size: 25px; height: 50px; width: 50px; line-height: 50px !important;  color: #2C3A47; background-color: #fff}
.box .fa1 {position: absolute; top: 0; left: 0;}
.box .fa2 {position: absolute;  bottom: -30px; right: 0; z-index: 1;}

@media(max-width:1024px) {
.box {  width: 100%;   }   
}
 
@media(max-width:767.98px) {
.about-box{ width: 100%;  }   
.wrapper .about-box:nth-child(2){margin-top: 20%;}
.box {  width: 100%;  padding:30px 20px ;  }   
}

.choose-us{ background-color:#f2f2f3;  }
.award-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: 30px; padding: 15px 0px; position: relative;z-index:99 }
.award-card > .award-w30 {  aspect-ratio: 16 / 9;  width: 100%;  }
.award-card > .award-w40 {  aspect-ratio: 16 / 9;  width: 100%;  }
.award-w30 img {  width: 100%; height: auto;   object-position: center;}
.award-w40 .item-inner{ padding: 20px 0px;}
.award-w40 .item-inner h3{ font-size:1.125rem;font-weight: 500; min-height: 50px; color: #063688}
.award-card > .award-w40  a { padding-bottom: 10px; display: block;}
@media (max-width:767.98px){
.award-card {  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));  gap: 10px;padding: 0px; }  
.award-w40 .item-inner h3{ font-size:.9rem;}   
.about-box.w-full .award-card {  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));  gap: 10px;padding: 0px; }  
}




.overview-pic{width: 100%; max-width:60%; display: block; margin: auto;}
.overview-pic img{width: 100%; max-width:100%; display: block; margin: auto;}
@media (max-width: 1024px){
.overview-pic{  max-width:100%}

}
.overview { position: relative;width: 100%;}
.overview-list { position: relative; margin-top: 24px;}
.overview-summary { font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 1px; position: relative; color:#053688;}
.overview-list-title { font-size: 26px; font-weight: bold; color:#053688; line-height: 1.88; letter-spacing: normal;  position: relative;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}
.overview-list-title:after { width: auto;  height: 1px; content: ""; display: block;  -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-left: 16px; background-color: #f1f1f1;}

.overview-list-main { position: relative; display: block; padding: 43px 10px 40px;}
@media (min-width: 1200px){
.overview-list-main { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
}

@media (max-width:768px) {
.overview-list-main {padding: 10px 0px;}     
}

.overview-list-column { position: relative;  margin-top: 25px;}
@media (min-width: 1200px){
.overview-list-main>.overview-list-column:nth-child(2n+2), .overview-list-main>.overview-list-column:nth-child(odd) { width: calc((100% - 20px)/2); max-width: calc((100% - 20px)/2); -webkit-box-flex: 0; -ms-flex: 0 0 calc((100% - 20px)/2);  flex: 0 0 calc((100% - 20px)/2);}
}

.overview-name { font-size: 24px!important; font-weight: 700; line-height: normal; letter-spacing: normal;  position: relative;  padding-left: 18px; color:#053688; font-family: 'Playfair Display', serif; }
.overview-name:before { width: 4px; height: 4px; content: ""; position: absolute; top: 12px; left: 0; background-color: #f38054; border-radius: 50%;}
.overview-desc { position: relative;  padding-left: 18px!important;padding-right: 18px!important;  margin-top: 10px;   }

@media (max-width:767.98px){
 .overview-desc {  padding-left: 10px!important;padding-right: 10px!important;   }   
 }
 /*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: 1rem;  font-weight:400; line-height: 1.75rem; color: #1d2c2f;   }
.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: #00A0B6; font-weight: 700; position: relative;  z-index: 1; background-color: #fff; font-family: 'Playfair Display', serif; }
.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: 1rem; font-weight:400; line-height: 1.75rem; color: #1d2c2f; }
.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: #00A0B6; 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 #00A0B6; 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: #00A0B6; margin: 0 auto; border-radius: 50%; }
.milestone-box .milestone-list-info .milestone-list-dot-line { position: absolute; height: 1px;  background-color: #00A0B6; 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::after { content: '';  width: 1px;  height: 100%;  position: absolute;  left: 50%; top: 0; background-color: #00A0B6; 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; }
.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: 20%; 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; }    
}