.cms-main-content{ margin-top: -20px;}
.cms-main-content{ margin-top: -20px;}
.cms-main-area p{color: #444; font-size: 1.15rem;line-height: 150%; margin-bottom: 15px;}
@media (max-width:768px) {
 .cms-main-area p{ font-size:1.063rem; }
   
}
/*about us----*/
.cms-main-wrap{ width: 100%; padding-right: 10px; padding-left: 10px; max-width: calc((100% - 40px)/12*12 + 40px); margin: auto; height: auto;  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; background-color: transparent;}
 @media (min-width:1200px) {
.cms-main-wrap{  padding-right:20px; padding-left: 20px;max-width: 1280px; }
}
@media (min-width:1400px) {
.cms-main-wrap { padding-right: 40px; padding-left: 40px; max-width: 1440px; }
}

.cms-block-wrap {width:100%;   padding:100px 50px; display: flex; flex-wrap: wrap;position: relative;  }
.cms-block {width:50%; height: auto; padding:50px 50px 100px 0px;  display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 1 }
.cms-block-txt{width:100%; margin:0; padding:20px 0px; display: flex; flex-wrap: wrap;align-content: center; position: relative; z-index: 1;}
#cms-main .cms-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;   }
 
 /*ms-title-2  樣式
=================================*/
.cms-name { width:100%;  margin:0px;  padding:30px 0px; display: flex;  flex-wrap: wrap; justify-content: flex-start;  position: relative; }
.cms-name h2{  width: 100%;  display: block; margin:0px; font-size: 2.5rem; font-weight:700; color:#202287!important;  }
.cms-name p{  width: 100%; display: block;margin:0px; font-size:0.9rem; font-weight: 700; color: #bfa571!important;   letter-spacing: 1px; }
.cms-name span{  width:100%; display: block;margin:0px; font-size: 0.95rem; font-weight: 700; color:#3884c7;  }
@media (max-width:820px) {
.cms-name h2{  font-size: 2rem; }
}


 /*pic size
=================================*/
.item{ width: 80%; max-width: 100%;height: auto ; margin:0px; padding:0px; position: relative;z-index: 1 }
.item-2{  width: 70%!important; margin:140px 0px 0px 25%; height: auto; left:0px;top:10px;  position: absolute;z-index: 2  }
 
.cms-box-wrap-2{ width:100%; padding:60px 0px 0px 0px; margin:0 auto;  display: flex; flex-wrap: wrap; justify-content: center;position: relative;  }
.cms-box-right-2{width: 50%; margin:0px; padding:0px 20px 50px 20px; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-items: center;position: relative;  }
.cms-box-left-2{ width:50%;  margin:0px; padding:0px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1 }

.cms-box-wrap-3{ margin: 0px auto; padding:100px 30px; display: flex; flex-wrap: wrap; justify-content: center;position: relative;  }
.cms-box-wrap-3:after{content: ""; position: absolute;right:0px; top:43%; width:46%; height:260px; background: #db0632; } 
.cms-box-right-3{width: 45%; margin: 0px; padding:20px 0px; display: flex; flex-wrap: wrap; justify-content:center;z-index: 3; }
.cms-box-left-3{ width:55%;  margin:0px; padding:0px 150px 0px 20px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1; }

.cms-box-right-3 .item-wrap{ flex-direction: row-reverse;}
.cms-box-right-3 .item-pic{width:100%; }
.cms-box-right-3 .item-txt{width:40%;}

.cms-box-right-3 .item-ce{ margin-top: 5%;}
.cms-box-right-3 .item-pic figure{ width: 100%;  height:auto ; margin:auto; position:relative;z-index: 1;}
.bg-about{ background: url("../images/about/bg-about.jpg") no-repeat right bottom #FFF;background-size:90% auto; } 

.cms-box-wrap{ padding:150px 30px; display: flex; flex-wrap: wrap; justify-content: flex-end;position: relative; z-index: 0; /*background: url("../images/about/bg-about.jpg") no-repeat left bottom #fff;*/
background-size:100% auto}
.cms-box-wrap h3{ margin:0px 0px 20px 0px; font-size: 2.25rem; position: relative; z-index: 2;}
.cms-box-wrap p{ margin: 0px 5px!important; line-height:1.75rem;  position: relative; z-index: 2;}
.cms-box-block{ width: 45%; position: relative; z-index: 1}
@media (max-width: 1024px) {
.cms-box-left-3{  padding:0px  80px 0px 20px;}    
}
@media (max-width: 990px) {
.cms-block {width: 100%; margin: 0px auto; padding:0px 25px; }
.cms-block-wrap:after { display: none; }   
}
@media (max-width: 820px) {
.cms-block-txt{ padding: 0px;}
.item-2{   width: 35%!important;  margin:120px 0px 0px 12%;   }
.bg-about .cms-box-left-2{ width: 65%!important;}
.cms-box-left-3{ margin:0px; padding:0px 20px;  }    
 }
@media (max-width:768px) {
.cms-main-about{ padding:40px 0px; }
.cms-block {width: 100%; margin: 0px auto; padding:0px; }
 }
@media (max-width:767.98px) {
.cms-box-wrap-2{ padding:20px 0px 40px 0px;}
.cms-box-right-2{width: 100%; margin:0px; padding:0px 0px 70px 0px;order: 2; }  
.cms-box-left-2{width: 100%; margin:0px; padding:0px;order: 1; } 
.item-2{width:75%!important;  margin:100px 0px 0px 27%;   }
.cms-box-left-3{ width: 100%; padding:0px;  }    
.cms-box-right-3{width: 100%;}
.bg-about .cms-box-left-2{ width: 100%!important; padding-bottom: 80px;}
    
}

@media (min-width:1600px) {
.cms-block {width:50%;}
.cms-box-wrap{padding:180px 30px; background-size:80% auto;} 
.cms-box-wrap h2{ margin:0px 0px 20px 0px; font-size: 2.5rem!important; position: relative; z-index: 2;}
.cms-box-wrap h3{ margin:0px 0px 20px 0px; font-size: 2rem!important; position: relative; z-index: 2;}
}
 

.delay-1 {animation-delay: .25s;}
.delay-2 {animation-delay: .5s;}
.delay-3 {animation-delay: .75s;}
.delay-4 {animation-delay: 1s;}

 
.item-txt{width:30%;display: flex; flex-wrap: wrap; align-self: center; flex-direction: column;}

/*-------------------*/
/***** team *****/
/*------------------*/

.bg-box-wrap-2 {  background-image:url("../images/index/bg-dot.svg"),url("../images/index/bg-dot.svg"); background-attachment: fixed,scroll; background-position:left 30%,60% bottom;  background-repeat: no-repeat;  background-size: auto 40%, auto 50%;}


/*-------------------*/
/***** Philosophy *****/
/*------------------*/
.philosophy.cms-block-wrap { padding: 0px 50px!important;}
 /*Philosophy Mission*/ 
.cms-about-card { width:50%;  margin:-2% 0px 0px 0px; padding:0px; display: flex; flex-wrap: wrap;justify-content: center; align-items: flex-start;position: relative;z-index: 1 }
.cms-about-card .item{ width: 50%; max-width: 100%;height: auto ; margin:-20px auto auto auto; padding:0px; position: relative;z-index: 1 }
/*.cms-about-card .item-2{ width:60%; max-width: 100%; margin:280px 0px 0px 200px; height: auto; position: absolute;z-index: 2  }
.cms-about-card .item-2 figure:before{content: ""; width: 96%;  height:94% ; margin:2%; padding:10px; position: absolute; left:0px; top:0px; z-index:2 ; border: solid 1px rgba(255,255,255,.5);}
*/
.mission .cms-box-right-3 .item-pic{ width: 80%;  height:auto; margin: 0px;}


.item-wrap-end{width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: center; position: relative;}
.item-wrap{width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: flex-end; position: relative;}
.item-pic{width: 100%; position: relative;}
.item-pic figure{ width:100%;  height:auto ; margin:auto; position:relative;z-index: 1;}
.item-pic figure img{  width:100%; height: auto; position:relative;z-index: 1;}
.item-pic figure:before{content: ""; width: 86%;  height:90%; margin:auto; padding:0px; position: absolute; left:-12%; top:-8%; z-index:0; border: solid 2px #b38f36;}
.cms-block-title{width:auto; margin:0px; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1;  }
.cms-block-title h3{  line-height: 130%;  font-weight: 700;}
.bg-philosophy-end { background-image:url("../images/about/bg-about-2.png"), linear-gradient(to top, #85a0c1 0%, #fff 100%);   
background-size:auto 100%, auto ; background-repeat: no-repeat,repeat;background-position: left bottom;position: relative;z-index: 0;}


@media (max-width:1024px) {
.bg-philosophy-end {   background-size:auto 90% ; }
}

@media (max-width:820px) {
.philosophy .cms-block{ width: 100%; padding:20px 0px 300px 0px; }
.bg-philosophy-end {  background-size:80% auto  ; }
}
@media (max-width:767.98px) {
.mission .cms-box-left-3{padding: 40px 0px;}   
.philosophy.cms-block-wrap{padding: 0px 30px!important;}
.philosophy .cms-block{ padding:20px 0px 240px 0px; }
.bg-philosophy-end {  background-size:100% auto  ; }
   
}

/*-------------------*/
/***** service *****/
/*------------------*/
.cms-service-box { width:70%;  margin:20px auto;   padding:0px 20px; display: flex; flex-wrap: wrap; align-items: center;position: relative;  z-index: 1;}
.cms-service-box .service-item{ width: 50%; max-width: 100%; margin:0px; padding: 30px 0px 40px 0px; height: auto }
.cms-service-box .service-item-2{ width: 50%; max-width: 100%; margin:0px; padding: 80px 0px 0px 0px;  display: flex; flex-wrap: wrap; align-items: center;}
.service-item img,.service-item-2 img { margin: 0px; padding: 10px;}
 .cms-slider-for { width:100%;  margin: 0px auto; padding:30px 30px 60px 30px;   }
.slider-for { width: 100%;  margin: 0px; padding:0px;   }
.slider-for li{ width: 100%; display: block;margin: auto; padding: 20px; -webkit-transition: all 0.5s; transition: all 0.5s; }
.slider-for li:hover{  transform: scale(0.95);   }

.slider-for li img{ display: block; width: 100%; height: auto;margin: auto; padding: 10px; border-radius:5px;  box-shadow: 0px 5px 5px rgba(0,0,0,.3);}  
.slider-for li h3{ width: 100%; margin: 0px; padding:10px 15px; font-size: 1.15rem; text-align: center;font-weight: 700;  }
.slider-for .slick-dots{bottom: -20px;}

#slider-1.slider-for li img{ display: block; width: 100%; height: auto;margin: auto; padding: 10px; border-radius:5px;  box-shadow: none;}  
#slider-1.slider-for li h3{ width: 100%; margin: 0px; padding:10px 15px; font-size: 1rem; text-align: center;font-weight:400;  }


.bg-light{ background:#f6f6f6; }
.bg-light-2{ background-image: linear-gradient(to top, #e7ecf7 30%, #cdeaf7 100%); }
.bg-light-3{  background: url("../images/about/bg-2.png") repeat-x 30% bottom #ebf4f4;  background-size:50% auto;  }


.label-spec{ width: 100%;  display: flex; flex-wrap: wrap; margin: 1.5% 0px;  padding: 0px;}
.label-spec li{ width: calc(100%/3 - 20px);  padding: 0px 5px; margin: 10px;display: flex;flex-wrap: wrap;  font-size:1rem; line-height:1.4em; font-weight:700; color:#000; border: solid 1px #1f2487; background:#F6F6F4; }



.label-spec .tag { display: flex;justify-content: center; width:80px!important; height: 36px; margin-right: 10px; padding:5px; font-size: 0.9rem; font-weight:400; line-height: 1.57;color: #fff; background: #1f2487;    }

.label-title{ width: 100%; margin: 0px; padding: 5px 0px; border-bottom: solid 1px #ddd; display: flex; flex-wrap: wrap; align-items: center; }
.label-value{width: 100%; margin:0px;  padding: 5px 0px;  border-bottom: solid 1px #ddd;display: flex; flex-wrap: wrap;align-items: center; }
.label-name{width: 100%; margin: 0px;  padding: 5px 0px; border-bottom: solid 1px #ddd; display: flex; flex-wrap: wrap; align-items: center; }
.label-txt{  width: calc(100% - 90px);  display: flex; flex-wrap: wrap;  }


/*-------------------*/
/***** about-item*****/
/*------------------ 
.about-item{   padding: 80px 20px;   }
 .about-item-summary { width: 100%;display: flex; flex-wrap: wrap; margin: 0px;padding: 0px; position: relative; }
.about-item-summary li{ width: auto; padding:0px; margin: 5px 2px; list-style: none; font-size:1rem; font-weight: 400; line-height: 1.75;  color: #666;}
.about-item-summary li:after{ content: " / " ; display: inline-block; margin-left: 5px;}



.about-item-column{ width: 80%; margin: auto; padding: 20vh 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-self: center;}
 

/**banner=================================*/
.cms-item-banner { width: 100%; max-width:100%; height: auto; margin:0px auto; padding:0px; position: relative; z-index: 2;  }
.cms-item-banner .imgSliderBox {  width: 100%;  display: flex; flex-wrap: wrap;justify-content: center; }
.cms-item-banner img{ display: block; width: 100%; max-width: 100%;  height: auto; position: relative;  -webkit-animation: zoom 6s ease-in-out; -moz-animation: zoom 6s ease-in-out; -o-animation: zoom 6s ease-in-out; -ms-animation: zoom 6s ease-in-out; animation: zoom 6s ease-in-out;animation-iteration-count:infinite;   -webkit-animation-duration: 6s; animation-duration: 6s;  animation-direction:alternate;}
  
.cms-item-banner .cms-sloga {   position: absolute;  width: 100%;  display: flex; flex-wrap: wrap; justify-content:center; align-self: flex-start;  z-index: 9; }   
 
.item-v{ width:auto; padding: 20px 30px;  }
.item-v-name{  width: auto; height: 100%; margin:0px 5px 0px 20px; font-size:2rem; line-height:4rem; letter-spacing: 10px; font-weight:400;  word-wrap:break-word;word-break:keep-all;font-family: 'Noto Serif TC', serif;}
.item-summary{  width: auto; height: 100%; margin:0px 5px; padding: 0px; list-style: none; }
.item-summary li{ font-size: 1.063rem; margin:0px 15px; letter-spacing: 3px; }

/*----------------------------------------/
timeline
----------------------------------------*/
.cms-about-time {padding:10vh 0 20vh 0; background-image:url("../images/about/bg-history.jpg"),url("../images/about/bg-history-line.jpg"); background-repeat: no-repeat, repeat-x; background-position: center bottom,center bottom; background-size: 70% auto;position: relative; }
 .cms-about-time:after{  content: attr(data-descr); width:100%; position: absolute; z-index:0; left:5%; top:15%;  font-size:86px; font-weight: 700; letter-spacing:-1px;-webkit-text-stroke: 2px rgba(31,186,238,.1); color: transparent;} 
.cms-about-time .cms-title-block { width: 100%;  max-width: 1200px; margin: 20px auto; }
.timeline { position: relative; max-width: 1200px;  margin:30px  auto; z-index:1;}
.timeline::after {  content: '';  position: absolute; width: 2px; background-color:#2860ab; top: 0; bottom: 0;  left: 50%;  margin-left: -3px; z-index:1;}
.timewrap { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;z-index:9;}
.timewrap::after { color: #fff; margin:0px;  content: attr(data-year)' '; position: absolute; font-weight:700;  width: 66px; height: 66px; right: -33px; top: 15px; border-radius: 50%; z-index:9; line-height: 65px; text-align: center;background-image: linear-gradient(60deg, #1f2487 0%, #2b76b9 37%, #16c1f3 65%, #dcf6ff 100%);}
.circlecontainer { color: #184598; content: " "; position: absolute; width: 66px; height: 66px; right: -33px; background-color: #774e36; border-color:#9e2b2f; border-style: solid;  border-width:1px; top: 15px;  border-radius: 50%;  z-index:99;}

 
.left { left: 0; text-align:right;}
.right { left: 50%; text-align:left; }
.right::after { left: -36px;}
.time-content {color:#774e36; padding: 20px 30px; position: relative; border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; flex-direction: column; }
.time-content figure{ margin: 0 auto 20px auto; }
.time-content p{ width: 100%;  font-weight: 700; }
.timewrap.right .time-content p{ text-align: left!important; }
.timewrap.left .time-content p{ text-align: right;}

.contentboxr { color:#184598; padding: 20px 30px; background-color: #181818; position: relative; border-style: solid;  border-left: 1px; border-left-color:#181818; border-width:1px; left:-43px;  z-index:5; line-height:1.2;}
.containerbox { padding: 10px 40px; position: relative; background-color: inherit;  width: 50%;}
.contentboxr::after { display: none !important; visibility: hidden;}
@media screen and (max-width: 767.98px) {
 .cms-about-time {padding:10vh 0 0 0;   }
.timeline::after { left: 51px; }
.flex-container { display:none; visibility:hidden; }
.timewrap {  width: 100%; padding-left: 70px; padding-right: 25px; }
.contentboxr { color:#184598; padding: 10px 20px; background-color: #181818;  position: relative; border-style: solid; border-left: 0px; border-left-color:#181818; border-right: 0px; border-right-color:#181818; width:330%;}
.timewrap.left .time-content p{ text-align: left;}
.timewrap::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.left::after, .right::after { left: 15px; }
.right {  left: 0%; text-align:left;}
.left { text-align:left; }
}

/*-------------------*/
/***** time  *****/
/*------------------*/
.cms-time-wrap{width:100%;   padding:50px 0px;margin:30px auto; }
 .time-nav { position: relative; width: 85%;  z-index: 1;  margin: 0 auto; padding: 0px;}
.time-nav:before { border-top: 1px solid #000; content:""; margin: 0 auto; position: absolute; top:50%; left: 0; right: 0; bottom: 0; width: 85%;  z-index: -1;}
.time-nav li{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
 .nav-item { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; width:80px; height: 80px; margin: auto; border-radius:99rem; background-color:#00bcd4;   position: relative}
.nav-item:before { content: ""; width: calc(80px - 16px);  height: calc(80px - 16px);position: absolute; top:8px; border: dashed 1px #fff; border-radius:99rem; animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}
.time-nav .slick-current .nav-item { background:#d40c00; }
.nav-item:hover{background:#bcbcbc;}
.nav-item p{ font-size:0.875rem; color: #fff; font-weight: 700;margin: 0px; }


 .time-nav .slick-prev,  .time-nav .slick-next{ top:14%; width: 60px; height: 60px;  border: solid 3px rgba(0,0,0,.1);  }
 .time-nav .slick-next::before,.time-nav .slick-next:focus:before, .time-nav .slick-prev::before,.time-nav .slick-prev:focus:before{  }

@keyframes rotate {
0% { transform: rotate(0deg) }
to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
0% { transform: rotate(0deg) scale(1) }
to { transform: rotate(-359deg) scale(1)  }
}

@keyframes rotateIt {
to { transform: rotate(-360deg); }
}

.time-item { width:100%; max-width:960px;  margin:30px auto;  padding: 30px; }
.time-item li a{ width: 100%; margin:0px auto;padding: 30px; position: relative; z-index: 1; list-style: none;  display: flex; flex-wrap: wrap; justify-content: center; align-content:center; align-items: center;  transition: all 0.3s linear 0s;  }
 

.time-inner-full{ width: 100%;  } 
.time-inner-5{ width: 50%;  } 
.time-inner-3{ width: 31.333%; margin: auto -15px;   } 
.time-inner{ margin: 0px; padding:5px 10px;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content:center; align-items: center;   } 
.time-inner .time-inner-img{ width:40%; }
.time-inner .time-inner-txt{ width:60%; }

.time-inner .time-inner-3 .time-inner-txt{ width:60%; }
.time-inner figure{ width:100%; height: auto;}
#cms-main .time-item li h3{flex: 0 0 100%; padding:0px; margin:0px 0px 20px 0px;width: 100%; font-weight:700; font-size:1.5rem;   color:#0070bd;  }
#cms-main .time-item li p{ flex: 0 0 100%;   margin:5px 0px; padding:10px 0px; font-size:1rem; line-height: 1.35rem;  font-weight: 700; } 
  
.map-list{ width: 100%;   margin: auto;  display: flex; flex-wrap: wrap; justify-content: center; }
.map-list li{width: auto; margin: 10px; display: flex; flex-wrap: wrap; align-items: center; font-weight: 700;}
.map-list li span{ margin-left: 5px;}
.box-brick { width: 16px; height: 16px;border-radius:99rem;  }
.yellow{ background-color: #eb9a26!important; }
.blue{  background-color:#026ebb!important;}
.green{  background-color: #4caf50!important;}
.t-yellow{ color: #eb9a26!important; }
.t-blue{ color: #026ebb!important; }
.t-green{ color: #4caf50!important; }

@media (max-width:767.98px) {
.time-inner-3{ width: 100%; margin: auto 0px;   } 
.time-inner-5{ width: 100%;  } 
 .time-inner .time-inner-img{ width:100%; }
.time-inner .time-inner-txt{ width:100%; }
   
}



/*awards.html*/
 .about-team{ padding: 40px 20px; display: flex; flex-wrap: wrap; justify-content: center;position: relative;z-index: 0;  }
 
 .about-team-main { position: relative; margin-top: 17px; display: flex; flex-wrap: wrap;}
 .about-team-main-row {  width: calc(50% - 8.33333px);   position: relative; margin-bottom: 33px; padding-left: 30px;}

 .about-team-main-name { font-size:1.313rem; font-weight:700; line-height: 1.5; letter-spacing: normal; color: #1f2387; position: relative; }
 .about-team-main-name:before { width: 12px; height: 12px;  content: "";  position: absolute; left:-20px; top:8px; background:url("../images/icon/square.svg") no-repeat left top; background-size: 12px;   }
 .about-team-main-name+.about-team-main-summary { margin-top: 11px;}
 .about-team-main-summary { font-size:1.063rem;  line-height: 1.5; font-weight: 400; letter-spacing: 1px; color: #000;}

@media (max-width:920px) {
 .about-team-main-row {  width: calc(100% - 8.33333px);}
}

 
.about-item{padding: 80px 20px; }
@media (max-width:920px) {
.about-item{ padding: 80px 0px; }

}

.award{width: 100%; display: flex; flex-wrap: wrap;   margin:30px auto 60px auto;padding: 0px;}
.award li{width:calc(100%/5 - 50px);margin: 30px 25px; padding:0px; list-style: none;  transition: all 0.3s; background:#e9f1f3;  border-radius:0px 60px 0px 60px; border:solid 2px #e9f1f3; box-shadow: 0px 2px 8px rgba(0,0,0,.25);  }
.award li.s4{width:calc(100%/4 - 60px);margin:40px 30px; list-style: none; transition: all 0.3s; }

.award-inner{padding:15px 20px; border-radius:0px 0px 0px 40px;   position: relative;}
.award-inner h3{ font-size:1.125rem; font-weight: 700; overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;}
.award-inner p{ font-size:0.9375rem; font-weight: 700; margin-bottom: 5px; }
/*.award-inner:after { content: ""; position: absolute; border-top: 10px solid #eee; border-left: 10px solid transparent; border-right: 10px solid transparent; bottom: -9px; left: 47%;}*/
.award-img{ margin: auto; display: block;  border-radius:0px 60px 0px 60px; }
.award-img img{ margin: auto; display: block; padding:0px;  border-radius:0px 60px 0px 60px; }

@media (max-width:1280px) {
.award li{width:calc(100%/4 - 50px);margin: 30px 25px;   }
}
@media (max-width:1024px) {
.award{ margin:30px auto; }
 .award li{width:calc(100%/3 - 50px);margin: 30px 25px;   }   
}
@media (max-width:820px) {
  .award li{width:calc(100%/2 - 30px);margin: 30px 15px;border-radius:0px 40px 0px 40px; }  
  .award-inner{padding:15px 10px; border-radius:0px 0px 0px 20px;}
  .award-img{  border-radius:0px 40px 0px 40px; }
.award-img img{   border-radius:0px 40px 0px 40px; }

}
@media (max-width:767.98px) {
  .award li{width:calc(100%/2 - 20px);margin: 30px 10px;border-radius:0px 30px 0px 30px; box-shadow: none;}  
  .award-inner{padding:15px 10px; border-radius:0px 0px 0px 20px;}
  .award-img{  border-radius:0px 30px 0px 30px; }
.award-img img{   border-radius:0px 30px 0px 30px; }

}
/*.material{width: 100%; display: flex; flex-wrap: wrap;   margin: auto;padding: 0px;}
.material li{width:calc(100%/3 - 60px);margin: 30px; list-style: none;  transition: all 0.3s; }
.material li.s4{width:calc(100%/4 - 60px);margin:40px 30px; list-style: none;  transition: all 0.3s; }

.material-card { position: relative;   margin-bottom: 6.6em;}

.material li.s4 .material-card { position: relative; height: 0; padding-bottom: calc(100% + 60px); margin-bottom: 6.6em;}

.material-card h3 {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: 100%;
  padding: 10px 16px;
  color: #fff;
  font-size: 1rem;line-height: 1.3rem;
   margin: 0; 
  z-index: 10;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.material-card h3 span { display: block;min-height: 48px; font-weight: 700; }
.material-card h3 strong { font-weight: 400; display: block; font-size: 0.8em;}

.material-card h3:before,
.material-card h3:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: -16px;
  width: 0;
  border: 8px solid;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.material-card h2:after {
  top: auto;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .material-card.mc-active { padding-bottom: 0; height: auto; }
}
.material-card.mc-active h3 {
  top: 0;
  padding: 10px 16px 10px 90px;
}
.material-card.mc-active h3:before {
  top: 0;
}
.material-card.mc-active h3:after {
  bottom: -16px;
}
.material-card .mc-content {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 16px;
  left: 16px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
 .material-card .img-container {
 /* overflow: hidden;*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 3;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
   
 .material-card.Red h3 { background-color: #1f2487;}
.material-card.Red h3:after { border-top-color: #1fbaee; border-right-color:#1fbaee; border-bottom-color: transparent; border-left-color: transparent;}
.material-card.Red h3:before { border-top-color: transparent; border-right-color: #9498d7; border-bottom-color:#9498d7; border-left-color: transparent;}
.material-card.Red.mc-active h3:before { border-top-color: transparent; border-right-color: #1fbaee; border-bottom-color:#1fbaee; border-left-color: transparent;}
.material-card.Red.mc-active h3:after { border-top-color: #1f2487; border-right-color: #1f2487; border-bottom-color: transparent; border-left-color: transparent;}


*/
.card{border: none; }

@media (min-width:920px) {
:root {
    --card-height: 60vw;
 	--card-top-offset: 1em;
	--numcards: 4;
	--outline-width: 0px;
 
}
#cards { display: grid; grid-template-columns: 1fr;}
#card_1 { --index: 1;}
#card_2 { --index: 2; }
#card_3 { --index: 3; }
#card_4 { --index: 4;}
.card { position: sticky; top: 0; border: none; }
}
 
 /*---Featured Product - tab switch---*/
ul.tabs {margin:0 0 25px 0; padding: 0px; list-style: none; text-align:center;}
ul.tabs li {background:none; color:#106199; display: inline-block; padding: 6px 25px; cursor: pointer; font-size:14px; position:relative;}
ul.tabs li.current {background: #106199; color: #fff;}
ul.tabs li.current:after {top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: #106199; border-width: 10px; margin-left: -10px;}
.tab-content {display: none;}
.tab-content.current {display: inherit;}



/*directors*/
.director-list{width: 100%; margin: 20px auto; padding: 0px 20px; list-style: none; }
.director-list>li{padding: 40px;}
.director-list>li:nth-child(even){background-color: #f7f7f7;}
.director-list .title h3{font-size: 1rem;color:#222020;font-weight: 400;}
.director-list .title h5{color:#00aab9;letter-spacing: 1px;font-weight: 700;}
.director-list .list-style01 li{font-size: 1rem;color:#222020;}
@media screen and (max-width: 767.98px) {
.director-list .list-style01{padding:0px;}
    
    
}