.cms-main-content{ background-image: url("../images/index/dot-line.svg"), url("../images/index/bg-main.jpg"); background-repeat: repeat-y,repeat-x; background-position: -10% top,right bottom;background-size: 30% auto, 100% auto;  }
 @media (max-width: 767.98px) {
    .cms-main-content::before{display: none;}
}
 
/*-------------------*/
/***** cms-application-list  *****/
/*------------------*/
.cms-application-list { margin: 0 auto; padding: 0px 10px; margin-bottom: 75px;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.cms-application-list li{ /*background: #edf5e8; */display: flex; width:calc(100%/2 - 40px); flex-wrap: wrap; flex-direction: row; justify-content: center; padding: 0px; margin:20px; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s;  overflow: hidden; position: relative; z-index: 1;background-image: linear-gradient(-225deg, #edf5e8 50%, #f7fbf5 80%);} 
  
.cms-application-list figure{ cursor: pointer;  width:60%; vertical-align: middle;overflow: hidden; transform: translateZ(0); position: relative;transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
background: #000; /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 50px -40px, rgba(0, 0, 0, 0.3) 0px 30px 30px -30px; */ }
.cms-application-list figure img{ opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }

.cms-application-list li:nth-child(even) figure{ clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
} 


.cms-application-list li:hover img { opacity: 0.4;}
.cms-application-list li::before,.cms-application-list li::after { position: absolute; z-index: 2; top: 20px; right: 20px; bottom: 20px; left: 20px; content: ''; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
.cms-application-list li::before{ border-top: 1px solid #3b7722; border-bottom: 1px solid #3b7722; -webkit-transform: scale(1); transform: scale(1);}
.cms-application-list li::after{ border-right: 1px solid #3b7722; border-left: 1px solid #3b7722; -webkit-transform: scale(1); transform: scale(1);}
.cms-application-list li:hover::before{ opacity: 1; -webkit-transform: scale(0,1); transform: scale(0,1);}
.cms-application-list li:hover::after{ opacity: 1; -webkit-transform: scale(1,0); transform: scale(1,0);}
 
.cms-application-list li:nth-child(odd){ flex-direction: row-reverse;} 
.cms-application-list li:nth-child(odd) .wrap-box{ /*transform: translateX(10%);*/  } 
.cms-application-list li:nth-child(even) .wrap-box{ /*transform: translateX(-10%);*/ } 
.cms-application-list .wrap-box {position: relative; flex-direction: column; display: flex; align-self: center; text-align: center; z-index: 1; width:40%; padding:20px; box-sizing: border-box; /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;*/ }




/* Sweep To Right */

 .cms-application-list h3 a:before { content: ""; position: absolute;width: 100%; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important;  -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.cms-application-list h3 a:hover, .cms-application-list h3 a:focus, .cms-application-list h3 a:active {  color: #fff!important; }
.cms-application-list h3 a:hover:before, .cms-application-list h3 a:focus:before, .cms-application-list h3 a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
.cms-application-list h3 {position: relative; width:auto;  font-size:2.15rem;  line-height: 2.5rem; font-weight:400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.cms-application-list h3 a { cursor: pointer; color: #3c7622; padding:5px 20px; display: inline-block;  vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);  -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.cms-application-list p { width: 100%; height: auto; font-size: 0.875rem; line-height: 1.7142857143rem;  letter-spacing: .05em;color:#999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.cms-application-list p a{ color:#999; margin-top: -10px;  }
 



@media (max-width: 1199.98px) {
.cms-application-list li{  margin: 10px; }
    .cms-application-list h3 { font-size:1.188rem!important; line-height: 1.75rem; }
}
@media (max-width: 820px) {
.cms-application-list li{  width:calc(100%/2 - 20px);  padding: 0px; margin:20px 10px; } 
.cms-application-list figure::before,.cms-application-list figure::after { top: 15px; right: 15px; bottom: 15px; left: 15px; }
}

@media (max-width: 767.98px) {
.cms-application-list li{  width:100%;  margin:0px 0px 30px 0px; padding: 0px;}   
   
}








/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor;margin-top: 2.1875rem;  padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { color: currentColor; padding-left: 2.8125rem  }
.text-button:hover:before { width: 2.1875rem; color: currentColor  }
}






/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor;margin-top: 2.1875rem;  padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { color: currentColor; padding-left: 2.8125rem  }
.text-button:hover:before { width: 2.1875rem; color: currentColor  }
}