/*about us----*/
.cms-main-wrap{ width: 100%; padding-right: 15px; padding-left: 15px; 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; }
}

/*----------------------------------------/
width樣式  
----------------------------------------*/
.cms-box-10{ width: 10%}
.cms-box-20{ width: 20%;  }
.cms-box-30{ width: 30%;}
.cms-box-40{ width: 40%;}
.cms-box-50{ width: 50%;  position: relative;  }
.cms-box-60{ width: 60%}
.cms-box-70{ width: 70%}
.cms-box-80{ width: 80%}
.cms-box-90{ width: 90%}

.cms-about-wrap{ width: 100%; height: auto; margin: auto;padding: 30px 0px; display: flex; flex-wrap: wrap; justify-content: center;}
@media (max-width:1024px) {
.cms-about-wrap{ padding:0px;  }
}
/*about -1*/
.about-title {position: relative; }
.about-title figure{ width: 600px;  height: 120px;  max-width: 100%;   margin: auto; vertical-align: middle;  position: relative;  }
.about-title img {max-width: 100%; height: auto; margin: auto auto 30px auto; vertical-align: middle;}

@media (max-width:767.98px) {
.about-title figure{ width:320px; height: auto;    }

}

/*about -2*/
.about-2{width: 100%;padding: 100px 0px 0px 0px; position: relative;}
.about-card{ width: 100%; margin:50px auto; padding:0px; display: flex; flex-wrap: wrap;  }
.about-card li{ width: calc(100%/2 - 40px);margin: 30px 20px; display: flex; flex-wrap: wrap;  align-items: center; align-content: center;}
.about-card li figure{ width: 30%;  max-width: 100%;  height: auto; margin: auto; vertical-align: middle;   }
.about-card li .about-card-inner{width: 70%; padding:20px 30px;}
.about-card li .about-card-inner p{width: 100%; font-size: 1.188rem; color:#2a424c; }

@media (max-width:768px) {
.about-2{ padding:20px 0px 0px 0px; }
.about-card{  margin:0px auto;  }
.about-card li{ width: calc(100% - 20px);margin: 30px 10px; }
.about-card li figure{ width:20%;  }
.about-card li .about-card-inner{width:80%;  }    
}

@media (max-width:767.98px) {
.about-card li{ width:100%; margin:15px auto auto auto; }
.about-card li .about-card-inner p{  font-size: 1rem;  }
.about-card li .about-card-inner{padding:20px;  }    
}
/*about -3*/
.about-3{width: 100%; padding: 100px 0px 0px 0px; position: relative;}
.cms-about-left{width: 60%;position: relative; }
.cms-about-right{width: 50%;position: absolute;right: 0px;  margin: 10% 0px 0px 0px;}
.cms-about-block{ width: 100%;position: relative;z-index: 0;  }
.cms-about-box{ width: 100%;  margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;flex-direction: column;position: absolute;z-index: 3;}
.cms-about-box .pic{ width: 30%;margin:10% auto 15px auto;  }
.cms-about-box h3{width: 100%; font-size: 1.75em; color:#443f3e; text-align: center;}
.cms-about-box-bg {  display: block; width: 100%; max-width: 100%;  height: auto;  margin: auto; position: relative; z-index: 2;}

@media (max-width:768px) {
.about-3{  padding:0px;}
.cms-about-box h3{ font-size: 1.313rem; }
}
@media (max-width:767.98px) {
 .cms-about-left{width: 100%;  }
.cms-about-right{width: 100%;position: relative;  margin: 0px;}
   
}
/*about -4*/
.about-4{width: 100%; padding: 100px 0px 150px 0px; position: relative;}
.about-4:after {  content: "";  position: absolute; z-index: 1; top: 120px;right: 0px; width: 20%; height: 200px;  background: url("../images/index/about-4.png") no-repeat left top; background-size:100% auto; 
/* transform: translateX(-50%) translateY(-50%);*/}
@media (max-width:1680px) {
.about-4:after { top: 96px; } 
}

@media (max-width:1440px) {
.about-4:after { top: 80px; } 
}
@media (max-width:1280px) {
.about-4:after { top:70px; } 
}

@media (max-width:767.98px) {
 .about-4{ padding: 0px 0px 50px 0px;}   
 .about-4:after { top:0px; } 
}

/*about -5*/
.about-5{width: 100%;padding: 100px 0px; background: url("../images/index/bg-about-end.jpg") no-repeat left bottom #f2f3f5; background-size:100% auto; position: relative;}
.cms-about-txt{width: 100%;  margin:0 auto; padding:0px 10px 10px 10px; }
.cms-about-txt h3{ margin-bottom: 15px; font-size: 2rem; font-weight: 700;  color:#117279;letter-spacing: 2px;  }
.cms-about-txt p{ color: #2a424c; font-size: 1.188rem; margin: 15px 0px 50px 0px; }
.cms-about-txt a{  margin: 30px 0px; }
 @media (max-width:768px) {
.cms-about-txt p{  font-size: 1rem;  margin: 15px 0px;}
.about-5 .cms-box-30,.about-5 .cms-box-70 {width: 100%;} 
.cms-about-txt h3{  font-size: 1.5rem; font-weight: 500;   }
}

 @media (max-width:768px) {
.cms-about-txt{  padding:0px 15px; }
.about-5 .cms-title-block{padding: 0px 15px;}     
}
.video-card { width: 50vw;  height: 28vw;  position: relative; inset: 0; margin:10% auto; transition: 0.2s ease-out;}
 @media (max-width:768px) {
 .video-card { width:80vw; height:45vw;  }
}

.video-card:hover {transform:scale(0.95)}
.video-card img { width: 100%; box-shadow: 5px 30px 70px -15px #111;}
.video-card:before { content: ""; position: absolute; z-index: 0; left:0; top: 0;  display: block;  width: 100%;  height:100%; opacity:.5; background-image: linear-gradient(to top, #107279 0%, #34aaac 30%,#86c077 60%,#adc93b 100%); }
.video-play-button { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); box-sizing: content-box; display: block;  width: 32px; height: 44px; border-radius: 50%; padding: 18px 20px 18px 28px;}
.video-play-button:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; background:rgba(255,255,255,.85); border-radius: 50%;  -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite;}
.video-play-button:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; background: rgba(255,255,255,.85); border-radius: 50%; transition: all 200ms;}
.video-play-button:hover:after { background-color: rgba(255,255,255,.5);}
.video-play-button img { position: relative; z-index: 3; max-width: 100%;  width: auto; height: auto;}
.video-play-button span { display: block; position: relative; z-index: 3;  width: 0; height: 0; border-left: 32px solid rgba(15,162,177,.3); border-top: 22px solid transparent; border-bottom: 22px solid transparent;}
@-webkit-keyframes pulse-border {
  0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);  opacity: 1; }
  100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);  opacity: 0; }
}
@keyframes pulse-border {
  0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);  opacity: 1; }
  100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0;  }
}
 
.video-view { display: none; position: fixed; left: 0; top: 0; width: 100%;  height: 100%; align-items: center; justify-content: center; background: rgba(0,0,0,0.95);z-index: 9999;}
.video-close { position: fixed; top: 10vh; right: 5vw; width: 50px;  height: 50px; border-radius: 50%;  cursor: pointer;border: 1px solid #fff;}
.video-close span {  display: block; width: 20px;  height: 2px; background: #fff;}
.video-close span:first-of-type { transform: rotate(45deg);position: relative;left: 14px;top: 24px;}
.video-close span:last-of-type {transform: rotate(-45deg);top: 22px;left: 14px;position: relative;}
 .video-view iframe { display: none; width: 100%; width: 90vw; max-width: 1000px;  height: 66vh; -webkit-animation: fadeInUp 500ms ease; -moz-animation: fadeInUp 500ms ease; -ms-animation: fadeInUp 500ms ease;}
 @media (max-width:767.98px) {
 .video-view iframe {  width:320px; height: 300px; }

}
.video:hover { background: #fff;transition: .3s;}
.video:hover span {background: #fff;}
.mask-bg {position: fixed; top: 0;  left: 0;  width: 100%; height: 100%; z-index: 9999;display: none; background: rgba(0, 0, 0, 0.95); }
.video-close { top: 12vh;  }
@-webkit-keyframes fadeInUp {
    0% {  opacity: 0;  -webkit-transform: translate3d(0, 100%, 0);  transform: translate3d(0, 100%, 0)  }
    to {  opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)     }
}
@keyframes fadeInUp {
0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) }
to { opacity: 1;  -webkit-transform: translateZ(0);  transform: translateZ(0)  }
}
/*----------------------------------------/
section-title樣式  
----------------------------------------*/
.section-title{ width: 100%; margin:0px auto 30px auto;  padding:0px; display: flex; flex-wrap: wrap;   position: relative;   }
.section-title-item {position: relative; }
.section-title-item figure{ width: 100px; height: 100px; margin: auto 0px; vertical-align: middle;  position: relative;  }
.section-title-item img { width: 80%; max-width: 100%; height: auto; margin: auto auto 30px auto; vertical-align: middle;}
.section-title-item figure:after{ content: ""; width:200px; height:3px; display: block; position: absolute; z-index: 999; left:0px;bottom:10px; background-image: linear-gradient(to left, #adc93b 0%, #107279 30%, #adc93b 100%); } 
.section-title h3 {width:100%; margin:5px 0px 15px 0px; padding:0px 0px 0px 0px; font-size:2rem;  color:#000; font-weight:600; letter-spacing:6px; position: relative;  }
.section-title p {width:100%; margin:0px 0 15px 0; padding:0px 0px 0px 0px; font-size:1.15rem;  color:#117279; font-weight:400;  position: relative;  }
@media (max-width: 1199.98px) {
.section-title h2{  font-size: 1.5rem; }
.section-title-item figure{ width: 90px;  height: 90px;   }
}
@media (max-width: 767.98px) {
.section-title{  margin: 15px auto; }
.section-title h3 { font-size:1.5rem;  }
.section-title p { font-size:.9rem; }
}  
/*soloar */
.soloar{ width: 100%; position: relative; padding:0px;}

/*soloar -1*/
.soloar-1:before{ content:"";  position: absolute; z-index:-1; top:-15%; right:-5%;width:50%; height: 220px;background: url("../images/index/w-t4.png") no-repeat right top; background-size: 100% auto; }  
 @media (max-width:768px) {
  .soloar-1:before{  width:70%; height: 220px;}  
}
/*icon*/
.soloar-icon{ width: 100%; margin: 0px auto;padding: 0px 15px;  display: flex; flex-wrap: wrap;  }
.soloar-icon-item{ width: 100%; margin: 0px auto 30px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: stretch; flex-direction: column;}
.soloar-icon-item figure{ width: 80%;  max-width: 100%;  height: auto; margin: auto; vertical-align: middle; filter:invert(1) brightness(200%);   }
.soloar-icon-item img {max-width: 100%; height: auto; vertical-align: middle;}
.soloar-icon-item h3{  display: block;margin: 15px auto; width: 100%; color:#117279; font-size:1.313rem; font-weight: 500; text-align: center;  }
.soloar-icon-circle{ width: 150px; height: 150px; display: flex;flex-wrap: wrap; justify-content: center; align-content: center; margin: auto;background: #117279; border-radius:99rem;position: relative; z-index:2;  animation: dot-pulse 2s infinite}
.soloar-feature{ width:100%; max-width: 100%; height: auto; margin: auto; padding: 25px;  vertical-align: middle;  }
.soloar-feature img {width:100%;  max-width: 100%;  height: auto; vertical-align: middle;}
.soloar-icon-item:hover{ animation: gelatine 0.5s ;}
.soloar-icon-item:hover .soloar-icon-circle{background: #b7cc19;}
 @media (max-width:840px) {
.soloar-icon-circle{ width: 100px; height: 100px;}
}
@media (max-width:767.98px) {
.soloar-1 .cms-box-20,.soloar-1 .cms-box-60{width: 100%;}
.soloar-icon-item{ width: calc(100%/3); margin: 0px auto;}
.soloar-icon-item h3{ font-size:1rem; }
.soloar-icon-circle{ width: 80px; height: 80px;}
}
/*soloar -2*/
.soloar-2{ padding:60px 0px; } 
.soloar-2 .cms-item-box{ padding: 0px  40px; } 
.cms-item-box{width:100%; margin:0; padding: 0px  0px 0px 0px; position: relative; z-index: 1;} 
.item-card{ width:100%; margin: 50px auto auto auto; padding: 0px; display: flex; flex-wrap: wrap; list-style: none;  position: relative; z-index: 1;}
.item-card li{width: 100%; margin:15px auto; padding: 0px;position: relative; }
.item-card li.full{width: calc(100% - 30px); margin:15px 30px 15px 0px; padding: 0px; position: relative;}
.item-card li figure{ width: 100%;  max-width: 100%;  height: auto; margin: auto; border-radius: 15px;   }
.item-card li img {width: 100%;  max-width: 100%; height: auto; vertical-align: middle; border-radius: 15px; }
@media (max-width: 1024px) {
.soloar-2{ padding:0px; } 
}
@media (max-width: 840px) {
.item-card li.full{width: calc(100% - 30px); margin:15px auto; padding: 0px; position: relative;}
}
@media (max-width: 767.98px) {
.soloar-2 .cms-box-50{ width:100%; } 
.item-card{ margin: 0px auto auto auto; }
}
/*soloar -3*/
.soloar-3{ padding:60px 0px; } 
.soloar-3 .cms-item-box{width:70%; margin: auto; padding: 120px 0px; } 
@media (max-width: 1440px) {
.soloar-3{ padding:0px; } 
.soloar-3 .cms-item-box{  padding: 0px; } 
}
@media (max-width: 767.98px) {
.soloar-3 .cms-about-wrap{flex-direction: column-reverse;}
.soloar-3 .cms-box-50{ width:100%;} 
.soloar-3 .item-card{margin: 0px auto auto auto;}
.soloar-3 .cms-item-box{ width: 100%; padding: 0px 20px;  }     
}
/*soloar -4*/
.soloar-4{ padding:60px 0px 120px 0px; } 
 @media (max-width: 1440px) {
 .soloar-4{ padding:0px 0px 60px 0px; } 
}
.title-wrapper {  display: flex;  flex-wrap: wrap; align-items: center; }
.title-wrapper .title { width:200px; margin-right: 5%; }
.title-wrapper .subtitle {  width:calc(100% - 200px - 5%); -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1;   }
.title-wrapper .subtitle p{width:100%; margin:0px 0 15px 0; padding:0px 0px 0px 0px; font-size:1.15rem;  color:#117279; font-weight:400;  position: relative; }
@media (max-width: 1023.98px) {
.title-wrapper { display: block; margin: 0px 15px; }
.title-wrapper .title { margin-right: initial;  margin-bottom: 16px; }
.title-wrapper .subtitle { border: none; }
}
  
@media (max-width: 840px) {
.title-wrapper .title,.title-wrapper .subtitle  { width:calc(100% - 5%)}
 }
@media (max-width: 767.98px) {
.title-wrapper { display: block; margin: 0px 25px; }
.title-wrapper .subtitle p{ font-size:.9rem;  }
}
 .cms-main-product-item { width:100%; margin:0px auto;  padding:20px 60px; display: flex; flex-wrap: wrap; }
.cms-main-product-item li { width:calc( 100% - 60px); margin:50px 30px; padding:0px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; border-color:transparent;position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;  border-style: solid; border-width:2px;   background:   linear-gradient(to top, #b7cc19 0%, #13a3b1 100%)  padding-box, linear-gradient(to top, #b7cc19 0%, #13a3b1 100%) border-box;  border: 2px solid transparent;border-radius:30px; overflow: hidden; }
.cms-main-product-item li:hover { border: solid 2px #f6d60a; box-shadow:0px 8px 12px rgba(0,0,0,.05);} 
.cms-main-product-item li figure{ position: relative; width:100%; height: auto; margin-bottom:0px; overflow: hidden; background-color:transparent;  transition: all 0.5s ease 0s; }
.cms-main-product-item li figure img {  width: 100%; max-width: 100%; border-radius:30px; transition: all 0.3s;}
.cms-main-product-item li figure:hover img { transform: scale(1.1);  opacity: 1; }
.cms-main-product-item li .cms-main-product-inner{width: 100%;margin: 0px; padding: 0px 20px 0px 20px; display: flex; flex-wrap: wrap; justify-content: center;  align-content: center; align-items: center;position: absolute; left:0px; bottom: 0px; } 
 #cms-main .cms-main-product-item li h3{flex: 0 0 100%; padding:20px 0px; margin:10px 0px;width: 100%; font-weight:700; font-size:1.313rem; line-height:1.75rem; text-align: center; color: #0fa2b1;  }
#cms-main .cms-main-product-item li h3 a{ color: #0fa2b1; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
#cms-main .cms-main-product-item li:hover h3 a{color:#f6d60a; }
 .cms-main-product-item .slick-prev,.cms-main-product-item .slick-next{  z-index: 9;}
.cms-main-product-item .slick-prev{ left:15px;/*  transform:translateX(-15px);*/ }
.cms-main-product-item .slick-next{right:15px; /*transform:translateX(-15px); */}
@media (max-width: 840px) {
.cms-main-product-item li { width:calc( 100% - 20px); margin:50px 10px; }    
.cms-main-product-item li .cms-main-product-inner{position: relative;padding: 0px; min-height: 48px; }  
#cms-main .cms-main-product-item li h3{  padding:5px 0px; margin:0px; font-size:1rem; line-height:1.5rem; }   
#cms-main .cms-main-product-item li h3 a{ color: #fff; }   
}

/*soloar -5*/
.soloar-5 {  } 
.soloar-item{ width:100%; min-height: 640px;  margin:0px; padding:20px; display: flex; flex-wrap: wrap; justify-content: flex-start;align-items:flex-start; position: relative;}
.soloar-item-box{ width:50%;  margin: 0px; padding: 10px;  z-index: 9;   }
.soloar-item-box h3{ font-size: 2rem; font-weight: 700; margin:0px 0px 30px 0px;color: #002447; } 
.soloar-item-box p{ font-size: 1.15rem;; line-height: 2rem; font-weight: 400; margin: 15px 0px;color: #2a424c; } 
.item-bg-3 { width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; background: url("../images/index/solar-end-1.jpg") no-repeat left bottom #9fdae0; background-size: 100%  auto;}
.item-bg-4 {  width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; background: url("../images/index/solar-end-2.jpg") no-repeat left bottom #dfe9a0; background-size: 100% auto;  }
.item-bg-5 { width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; background: url("../images/index/solar-ev-1.jpg") no-repeat left bottom #d0d8e2; background-size: 100%  auto;}
.item-bg-6{  width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; background: url("../images/index/solar-ev-2.jpg") no-repeat left bottom #ffff; background-size: 100% auto;  }

@media (max-width: 10240px) {
.soloar-item-box{  width:70%;  margin: 0px auto;  }    
}
@media (max-width: 767.980px) {
 .soloar-item{ width:100%;  height: auto;    }
 .soloar-item-box{ width:96%; } 
.soloar-item-box h3{ font-size: 1.5rem; } 
.soloar-item-box p{ font-size:0.9rem;  } 
 }
/*soloar -6*/
.soloar-6 { background: url("../images/index/solar-end-3.jpg") no-repeat right bottom #eff3f5;  background-size:auto 100%; } 
.soloar-6 .soloar-item{ width:100%; height: auto; margin:0px; padding:0px; display: flex; flex-wrap: wrap; justify-content: flex-start;align-items: center; position: relative;}
@media (max-width: 1200px) {
.soloar-6 {   background-size:auto 80%; }     
.soloar-6 .soloar-item{  max-height: 340px;  }
}
@media (max-width: 767.98px) {
.soloar-6 .soloar-item{ align-items: flex-start; }
}
/*soloar -7*/
.soloar-7 { background: url("../images/index/solar-end-4.jpg") no-repeat right bottom #eee;  background-size:auto 100%; } 
.soloar-7 .soloar-item-box{width:90%; margin: 0px auto; padding:50px 10px 10px 40px;   }
.item-icon{ width:40%; max-width:170px; max-height: 170px; height:auto;  margin: auto 0px;  }
.item-icon img { width:100%; height:auto;}
@media (max-width: 1200px) {
.soloar-7 { background-size:100% auto ;}    
.soloar-7 .soloar-item-box{  padding:50px 20px 50px 120px; }  
}
@media (max-width: 1024px) {
 .soloar-7 .soloar-item-box{  padding:50px 20px; }  
}
@media (max-width: 840px) {
.soloar-7 .cms-box-50, .soloar-7 .cms-box-40{  width: 100%; }   
.soloar-7 .soloar-item-box{  padding:50px 20px 50px 120px;  }  
 }
@media (max-width: 767.98px) {
.soloar-7 .soloar-item-box{  padding:50px 20px;  }  
}
/*soloar -animation*/
.cursorBlob { width: 450px; height: 350px; background: linear-gradient(120deg, #0fa2b1, #8cc06c, #0e7278, #0fa2b1, #0fa2b1); background-size: 1600% 1600%; position: absolute; left:25%; bottom:15%; pointer-events: none;  z-index:0; transition: 0.15s linear; animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;}
.cursorBlob-2 { width: 150px; height: 180px; background: linear-gradient(120deg, #0fa2b1, #8cc06c, #0e7278, #0fa2b1, #0fa2b1); background-size: 1600% 1300%; position: absolute; left:45%; bottom:45%; pointer-events: none;  z-index:0; transition: 0.15s linear; animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;}
@media (min-width:1400px) {
.cursorBlob { left:45%; bottom:-15%;}
.cursorBlob-2 { left:85%; bottom:25%;}
}
@keyframes blobRadius {
  0%, 100% { border-radius: 43% 77% 80% 40%/40% 40% 80% 80%; }
  20% { border-radius: 47% 73% 61% 59%/47% 75% 45% 73%; }
  40% { border-radius: 46% 74% 74% 46%/74% 58% 62% 46%; }
  60% { border-radius: 47% 73% 61% 59%/40% 40% 80% 80%; }
  80% { border-radius: 50% 70% 52% 68%/51% 61% 59% 69%; }
}
@keyframes blobBackground {
  0%, 100% {  background-position: 0% 50%;}
  50% { background-position: 100% 50%;}
}
.gooey{ background-image: linear-gradient(120deg, #34e0f0 0%, #00c48b 100%); border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;  width: 350px; height: 444px;  position: absolute; right:-50%; top:5%;animation: morph 3s linear infinite;  transform-style: preserve-3d; outline: 1px solid transparent;  will-change: border-radius;}
.gooey:before,.gooey:after{  content: '';  display: block;  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;  box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);  will-change: border-radius, transform, opacity; animation-delay: 200ms;  background-image: linear-gradient(120deg, rgba(0,196,139,.55) 0%, rgba(0,196,139,.89) 100%);}
.gooey:before{  content: ""; width: 100%; height: 80%; position: absolute; left: 0px; top: 50px; animation: morph 3s linear infinite; opacity: .21; animation-duration: 1.5s;}
.gooey:after{ content: ""; width: 80%; height:60%; position: absolute; left: -60px; top: 150px;  animation: morph 3s linear infinite; animation-delay: 400ms; opacity: .8;   }
@keyframes morph{
0%,100%{ border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate3d(0,0,0) rotateZ(0.01deg); }
34%{  border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform:  translate3d(0,5px,0) rotateZ(0.01deg); }
50%{  opacity: .89; transform: translate3d(0,0,0) rotateZ(0.01deg); }
67%{ border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ; transform: translate3d(0,-3px,0) rotateZ(0.01deg); }
}
@keyframes fadeIn{
100%{  transform: scale(1.03); opacity: 0;}
}
@media (max-width: 1200px) {
.gooey{ width: 250px; height: 244px; right:-40%; }
.cursorBlob {transform: scale(.85);}
.cursorBlob-2{transform: scale(.85);}
}
@media (max-width: 840px) {
.cursorBlob {transform: scale(.5); left:25%; bottom:-5%;}
.cursorBlob-2{transform: scale(.5); left:55%; bottom:0; }
}
 /*link hover css */
.gelatine { animation: gelatine 0.5s infinite;}
@keyframes gelatine {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}

 /*ev */
.ev-1{ width: 100%; position: relative;}
.ev-1:before{ content:"";  position: absolute; z-index:-1; top:-90%; right:-10%;width:40%; height:600px;background: url("../images/index/ev-bg.jpg") no-repeat right top; background-size: 100% auto; }  
@media (max-width:767.98px) {
 .ev-1:before{ top:-80%;  }     
}
.cms-slider-nav{width:100%; height: auto; margin: auto; position: relative;}
.cms-slider-nav:after{ content: ""; display: block;  width:100%; height:2px;  background:rgba(17,114,121, 0.4);; left:0; bottom:80px; position: absolute; z-index: 0;  }
.slider-nav{ width:calc(100% - 20%); height: auto; margin:10px 0px; padding:30px 0px; display: flex; flex-wrap: wrap;    }
.slider-nav li{ width:calc(100%/5 - 10px);  margin:10px auto; padding: 20px 5px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;  transition: all 0.3s linear 0s;  }
.slider-nav li figure{ width:70%; max-width:100%;   margin:0px auto 10px auto;   }
.slider-nav li img{ display:block;width:80%; max-width:100%;  margin:0px auto;   }
.slider-nav li h3{ font-size: 1.188rem;color:#117279;font-weight: 700; text-align: center;}
.slider-nav li:hover{ animation: gelatine 0.5s ;}
.slider-nav li:hover img{  filter:hue-rotate(260deg) brightness(180%);  }
.slider-nav li:hover h3{color: #b7cc19;}
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav li:hover .pulse{ background: #b7cc19; }
@media (max-width: 1200px) {
 .slider-nav{ width:100%; }  
}
@media (max-width: 840px) {
.slider-nav li h3{ font-size:1rem; }
}
@media (max-width:767.98px) {
 .cms-slider-nav:after{ display: none; }
 .slider-nav li{ width:calc(100%/3 - 10px);  margin:10px 5px;   }
}
.pulse { margin:10px auto; display: block;  width: 22px; height: 22px; border-radius: 50%;  background: #117279; cursor: pointer; box-shadow: 0 0 0 rgba(17,114,121, 0.4); position: relative; z-index: 1; animation: dot-pulse 2s infinite}
.pulse:hover { animation: none;}
.pulse:before {  content: ""; display: block;  width:8px; height: 8px; border-radius: 50%;  background: #fff; left:50%; top:50%; transform:translate(-50%, -50%);  position: absolute; z-index:99; }
 
@-webkit-keyframes dot-pulse {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(17,114,121, 0.4); }
  70% { -webkit-box-shadow: 0 0 0 10px rgba(17,114,121, 0);}
  100% {  -webkit-box-shadow: 0 0 0 0 rgba(17,114,121, 0); }
}
@keyframes dot-pulse {
  0% {  -moz-box-shadow: 0 0 0 0 rgba(17,114,121, 0.4); box-shadow: 0 0 0 0 rgba(17,114,121, 0.4); }
  70% { -moz-box-shadow: 0 0 0 10px rgba(17,114,121, 0); box-shadow: 0 0 0 10px rgba(17,114,121, 0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(17,114,121, 0); box-shadow: 0 0 0 0 rgba(17,114,121, 0);}
}
 /*ev-2 */
.ev-2{ padding: 60px 0px; position: relative;}
.ev-2 .gooey{ width: 450px; height: 344px; right:10%; top:35%; animation: morph 6s linear infinite;  border-radius: 42% 98% 10% 30%/ 42% 98% 10% 30% ; opacity: .15; z-index: 0;}
.ev-2 .gooey:before{  width: 100%; height: 80%; left:-100px; top: 100px; }
.ev-2 .gooey:after{ width: 80%; height:60%; position: absolute; left: -60px; top: 150px;  animation: morph 3s linear infinite; animation-delay: 400ms; opacity: .8; content: "";  }
.ev-card{ width:100%; margin: 50px auto ; padding: 20px 50px; display: flex; flex-wrap: wrap; list-style: none;  position: relative; z-index: 1;}
.ev-card li{width: calc(100% - 30px); margin:15px; padding: 0px;   border-style: solid; border-width:2px; background:linear-gradient(to top, #b7cc19 0%, #13a3b1 100%)  padding-box, linear-gradient(to top, #b7cc19 0%, #13a3b1 100%) border-box;  border-radius: 30px;  border: 2px solid transparent; transition: all 0.5s ease 0s; transform: scale(0.75)}
.ev-card li figure{ width: 100%;  max-width: 100%;  height: auto; margin: auto; border-radius: 30px;   }
.ev-card li img {max-width: 100%; height: auto; vertical-align: middle; border-radius: 30px; }
.ev-card li.slick-current,.ev-card li:focus{opacity: 1; transform: scale(1)}
@media (max-width: 820px) {
.ev-2{ padding:0px; }
.ev-2 .cms-box-30,.ev-2 .cms-box-70{ width:100%;}
.ev-card{margin: 0px auto ; padding: 0px 50px; }
.ev-card .slick-prev{ left: 10px;}
.ev-card .slick-next{right: 10px;}
}
/*ev-3 */
.ev-3{ padding: 60px 0px; position: relative;}
.ev-3 .cursorBlob { width: 450px;  height: 350px;left:-5%;; bottom:15%; opacity: .75;  background: linear-gradient(to left, #abecd9,#9ae1e8, #8cddb6);  background-size: 1200% 1600%;}
.ev-3 .cursorBlob-2 { width: 450px; height: 280px;left:-10%; bottom:30%;opacity: .85; background: linear-gradient(120deg, #fff, #d2f5ea); background-size: 1600% 1300%; }
@media (max-width: 820px) {
.ev-3{ padding: 0px;}
}
@media (max-width: 767.98px) {
.ev-3 .cms-box-60,.ev-3 .cms-box-40{width: 100%;}
}
.ev-4 { background: url("../images/index/solar-ev-1-1.jpg") no-repeat right bottom #eff3f5;  background-size:auto 100%; } 
.ev-4 .soloar-item{ width:100%; height: auto; margin:0px; padding:0px; display: flex; flex-wrap: wrap; justify-content: flex-start;align-items: center; position: relative;}
@media (max-width: 1200px) {
.ev-4 { background-size:110% auto ; } 
.ev-4 .soloar-item{   min-height:400px!important; }
}
/*ev-5 */
@media (max-width: 767.98px) {
.ev-5 .soloar-item{   min-height:500px!important; }
}
/*ev-6 */
.ev-6 {   background-image: url(../images/index/end-2.png), url(../images/index/end-2.jpg); background-position: -25px bottom,right top; background-color: #eeeeee;  background-size: auto 100%,auto 100%; background-repeat: no-repeat;} 
.ev-6 .soloar-item-box{ width:90%; margin: 0px auto; padding:50px 10px 10px 40px;   }
@media (max-width: 840px) {
.ev-6 {   background-position: -25px bottom,10% top; background-size: auto 80%,auto 100%;  } 
.ev-6 .cms-box-50, .ev-6 .cms-box-40{  width: 100%; }   
.ev-6  .soloar-item-box{  padding:50px 20px 50px 120px;  }  
 }
@media (max-width: 767.98px) {
.ev-6 { background-position: -25px -5%, 15% -10%; background-size: auto 50%,auto 50%;  } 
.ev-6 .soloar-item-box{  padding:50px 20px;  }  
}