﻿.main-banner::before{content: "" ; width: 100%; height: 100%; display: block; position: absolute; z-index: 9; left:0; top:0;  background-image: linear-gradient(to top, rgba(17,117,75,.75) 10%,rgba(0,0,0,.2) 50%,rgba(17,117,75,.1) 100%); }
.about-team {display: block;  padding:40px 0px; position: relative; }
.about-team-container,.about-pic-container {  display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap; padding: 0px 140px; position: relative; }
.about-team-container >.about-team-column:nth-child(odd) { width: calc(31.66667% - 11.66667px);  max-width: calc(31.66667% - 11.66667px);  -webkit-box-flex: 0;  -ms-flex: 0 0 calc(31.66667% - 11.66667px); flex: 0 0 calc(31.66667% - 11.66667px);}
.about-team-container >.about-team-column:nth-child(2n) { width: calc(68.33333% - 8.33333px); max-width: calc(68.33333% - 8.33333px);  -webkit-box-flex: 0;  -ms-flex: 0 0 calc(68.33333% - 8.33333px); flex: 0 0 calc(68.33333% - 8.33333px); margin-left: 20px;}
.about-pic-container:nth-child(odd){ flex-direction: row-reverse;}
.about-pic-container >.about-pic-column:nth-child(odd) { width:35%;  }
.about-pic-container >.about-pic-column:nth-child(2n) { width:65%;  padding:30px; margin: auto; } 
.about-pic-column{ margin-bottom: 20px;}
.about-pic-container hr{width: 100%;}
.about-team-container::before{ content: attr(data-content);color:rgba(255,255,255,.3); font-size: 200px;  font-size: min(max(3.5vw, 90px), 200px); font-weight: 700;  letter-spacing: 3px; left:0; top:0;position: absolute; z-index: 1; }
.about-team-column hr{background-color: #fff; padding: 0px; margin:80px 0px;}
.about-team-main-name { margin-bottom: 33px; font-size:1.875rem;  font-size: min(max(3.5vw, 1rem), 1.875rem);   font-weight: 700; line-height: 1.5;  }
.about-team-main-name strong{ color:#ffc107;   }
.about-team-main-row { position: relative; margin-bottom: 33px;  }
.about-team-main-summary {  font-size:1,15rem;  font-size: min(max(3.5vw, 1rem), 1.15rem); line-height: 1.875rem;  margin-top: 11px;}  
.number-txt{ width: 48px; height: 48px; display:block; margin: auto; text-align: center;  line-height: 1.8em;color: #fff; background-color: #000;border-radius: 99rem; position: relative; z-index:9; }
@media (max-width:1180px) {
.about-team-container,.about-pic-container {  padding: 0px 60px 0px 20px;  }
.about-team-container >.about-team-column:nth-child(odd) { width: calc(31.66667% - 31.66667px);  max-width: calc(31.66667% - 31.66667px);  -webkit-box-flex: 0;  -ms-flex: 0 0 calc(31.66667% - 31.66667px); flex: 0 0 calc(31.66667% - 31.66667px); margin-left: 40px;}
.about-team-container >.about-team-column:nth-child(2n) { width: calc(68.33333% - 8.33333px); max-width: calc(68.33333% - 8.33333px);  -webkit-box-flex: 0;  -ms-flex: 0 0 calc(68.33333% - 8.33333px); flex: 0 0 calc(68.33333% - 8.33333px); margin-left: 0px;}
}
@media (max-width:840px) {
.about-team-container {  padding: 0px 20px;}
}
@media (max-width:767.98px) {
.about-team-container::before{ left:-2%; top:-6%;  }
.about-team { margin-bottom:0px;  padding: 40px 20px;}    
.about-pic-container { padding: 0px  20px;  }
.about-pic-container:nth-child(odd){ flex-direction: row-reverse;}
.about-pic-container >.about-pic-column:nth-child(odd) { width:100%;  }
.about-pic-container >.about-pic-column:nth-child(2n) { width:100%;  padding:0px; margin: auto; } 
.about-team-main-name { font-size: 20px; text-align: center; }   
.about-team-main-name figure,.about-pic-column figure{ width: 100%; max-width: 60%;margin: auto; }   
.about-team-container >.about-team-column:nth-child(odd) { width:100%;  max-width: 100%;  -webkit-box-flex: 0; -ms-flex: 0 0  100%;flex: 0 0 100%; margin-left: auto; }
.about-team-container >.about-team-column:nth-child(2n) { width:100%;  max-width: 100%;  -webkit-box-flex: 0;  -ms-flex: 0 0  100%;  flex: 0 0 100%;  margin-left: 0px;}
.about-team-main-summary {  line-height: 1.5rem;  margin-top: 0px;}  
}
@media (max-width:320px) {   
.about-team-container {padding: 0px;}
.about-pic-container { padding: 0px;  }
}
.slider-nav{ width: 100%;  margin: 5% auto;padding: 0; display: flex; flex-wrap: wrap;  justify-content: space-between; position: relative; z-index: 9; }
.slider-nav li { width: auto; padding:20px; margin: 10px; list-style: none; position: relative; background-color:#ecf2f0;   border: solid 1px #d2e0db}
.slider-nav li:hover {border: solid 1px #005639}
.slider-nav li .nav-item:after {display: none; }
.nav-item { text-align: center; width: 100%;  position: relative;display: flex;flex-wrap: wrap; justify-content: center; }
.nav-item .nav-img img { filter: grayscale(1) brightness(600%) opacity(1); }
.nav-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px auto;width: 180px;height:180px;border-radius: 10%; background-color:#4d4f53;position: relative;z-index:9; }
.nav-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px #fff; border-radius:10%; position: absolute;    transform-origin: 50% 50%;}
.nav-item:after { content: ""; width:2px;  height: calc(100vh + 10vh); background: #fff;  position: absolute;z-index:1; left:50%; bottom:0;  }
.about-team .nav-item:first-child:after { display: none; }
.nav-img img {  margin: auto;display: block;  transform: scale(.65);opacity: 1;  }
.nav-item p{ font-size:1.125rem;  font-size: min(max(3.5vw, 1rem), 1.125rem); color: #005639; font-weight: 700; line-height: 1.875rem; }
.nav-item span{ display: block;    font-size:1rem;  font-size: min(max(3.5vw, .875rem), 1rem); color: #000; font-weight: 400; line-height: 1.5rem; }
@media (max-width:1460px) {
.slider-nav li {  width: calc(100%/2 - 20px);   }  
}
@media (max-width:768px) {
.slider-nav:after{ display: none;}
}
@media (max-width:767.98px) { 
.slider-nav .nav-item { padding-bottom: 10px; margin: 0px auto;}   
.nav-item p{ line-height: 1.35rem; }
.nav-item span{  line-height: 1.35rem; }
.slider-nav li {  width: calc(100%/2 - 10px);   padding:10px; margin: 10px 5px;   }  
}
@media (max-width:320px) { 
.slider-nav{margin: 5% -5px;}
.nav-img { width: 100px;height:100px; margin: auto; }
.nav-item p{ min-height: 50px;}
}
 
  