.cms-top.cms-main-area{margin-top: -40px;  position: relative; z-index: 0;  }
.cms-main-content{ background-image: url("../images/index/dot-line.svg"), url("../images/index/bg-dot.svg"); background-repeat: repeat-y, repeat;  background-size:  auto, 50% auto;  }
 .cms-main-content::before{content: "APPLICATION";display: block; position:absolute; z-index: 2; left:-50px; top:120px;  font-size:6rem; font-weight: 900;color:rgba(235,235,235,.5); writing-mode: vertical-lr;text-orientation: mixed;}
@media (max-width: 767.98px) {
    .cms-main-content::before{display: none;}
}
 
/*-------------------*/
/***** cms-application-list  *****/
/*------------------*/
.cms-application-list { margin: 0 auto;   margin-bottom: 75px;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.cms-application-list li{ display: flex;  width: calc(100% - 40px); flex-wrap: wrap; flex-direction: row; justify-content: center; padding: 50px 30px; margin:20px 10px; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s;  overflow: hidden; position: relative; z-index: 1;  } 
  
.cms-application-list figure{ cursor: pointer;  width:40%; 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; 
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::before { content: ''; width: 30%; height: 80%; top:30px; right: 110px; position: absolute;z-index: 0;  pointer-events: none; background: #C9CCD3;
 background-image: linear-gradient(-180deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: lighten; -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms;
}
.cms-application-list li:nth-child(even)::before{ left: 110px!important;} 
.cms-application-list figure:hover img { opacity: 0.4;}
.cms-application-list figure::before,.cms-application-list figure::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
.cms-application-list figure::before{ border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(1); transform: scale(1);}
.cms-application-list figure::after{ border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1); transform: scale(1);}
.cms-application-list figure:hover::before{ opacity: 1; -webkit-transform: scale(0,1); transform: scale(0,1);}
.cms-application-list figure: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 .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; }
.cms-application-list li:nth-child(odd) .wrap-box{ transform: translateX(30%); background: #fff; } 
.cms-application-list li:nth-child(even) .wrap-box{ transform: translateX(-30%); background:#fff;} 


.cms-application-list .wrap-box:before{ content: ''; pointer-events: none;  width: 97%; height: 94%; position: absolute; z-index:0; top: 4px; left:4px; border: 1px solid #000; -webkit-transition: all 500ms;  -o-transition: all 500ms; transition: all 500ms;}





/* 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:3.125vw;  line-height: 3rem; font-weight:700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; margin: 0;}
.cms-application-list h3 a { cursor: pointer; color: #000; padding:15px 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:#000; margin-top: -10px;  }
 



@media (max-width: 1199.98px) {
.cms-application-list li{  margin:0px 10px; }
}
@media (max-width: 820px) {
.cms-application-list li{margin:15px 0px; padding: 0px;}   
 .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{margin:0px 0px 30px 0px; padding: 0px;}   
 .cms-application-list li::before { content: ''; width:80%; height: 70%; top:20px; right: 110px;  }  
 .cms-application-list li:nth-child(even)::before{ left: 80px!important; top:20px; } 
   
.cms-application-list figure  {width: 100%; }
.cms-application-list .wrap-box {  width:100%; padding:0px 10px;  }
.cms-application-list li:nth-child(odd) .wrap-box{ transform: translateX(0); transform: translateY(-100%); background-color:rgba(0,0,0,.75)   } 
.cms-application-list li:nth-child(even) .wrap-box{ transform: translateX(0); transform: translateY(-100%); background-color:rgba(0,0,0,.75)  } 
.cms-application-list .wrap-box:before{ width: 96%; height: 86%;top: 6px; left:6px; border: 1px solid rgba(255,255,255,.75); }  
 .cms-application-list h3 {  font-size:1.75rem;  line-height: 2rem; font-weight:900; text-align: left; 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{ color: #fff; margin: 0;}
  .cms-application-list p a.text-button { margin-left:-30%; transform: translateY(-30%); color: #fff!important; }
   
}








/* 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  }
}