.cms-main-area{margin-top:50px;  background-image:url("../images/index/bg-gear.svg"),url("../images/index/bg-box.svg"); background-position: right 30%,left top; background-repeat: no-repeat,repeat;
 background-size:auto 60%,20% auto ; background-attachment: fixed; }



.tps-section { width: 100% !important; max-width: 900px; height: auto;  margin: 0 auto 20px auto;}
.tps-section { -webkit-perspective: 10em;  -moz-perspective: 10em; -ms-perspective: 10em; -o-perspective: 10em; perspective: 10em; -webkit-perspective-origin: center bottom; -moz-perspective-origin: center bottom; -ms-perspective-origin: center bottom; -o-perspective-origin: center bottom; perspective-origin: center bottom; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;  -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}
.tps-wrapper { display: block; width: 100%; height: auto;}
.page-container { display: block;  width: 100%; margin: 0 auto ; position: relative;}

.nav-img{ display: inline-flex; margin:20px 10px 0px 0px;  padding: 0px; width:80px; height: 80px;}
.nav-txt{ display: inline-flex; width:calc(100% - 100px);  padding-top: 20px; padding-left:20px;font-size: 2.5rem; font-weight:700!important; color:#fff  }


.cms-application { width: 100%; padding:40px 0px;  margin: auto; position: relative; }
.cms-application .slide {  display: block; vertical-align: top;  width:100%; height:auto; margin: 30px auto;background: #101419; border-radius:30px;  white-space: normal; word-break: break-word; position: relative;z-index: 3;}
.cms-application .slide:before {  content: ""; display: block; background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 50%,  #202287 80%);opacity: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius:30px;z-index: 1;}


.cms-application .slide .body { position: absolute;  width: 100%; display: flex;flex-wrap: wrap;   bottom: 2em; left:10px;z-index: 9;  }
.cms-application .slide .number { position: absolute;z-index:3;  top: 2em; left: 2em;color: #fff; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5)); }
.cms-application .slide .number, .cms-application .slide .number:before, .cms-application .slide .number:after { vertical-align: middle;}
.cms-application .slide .number:before, .cms-application .slide .number:after { display: inline-block; content: ""; height: 0.133em; margin-top: -0.2em; background: #fff;}
.cms-application .slide .number:before {width: 0; margin-left: 0;}
.cms-application .slide .number:after { width: 3em;  margin-left: 1em;}
 
.cms-application .slide:before,.cms-application .slide .number:before,.cms-application .slide .number:after,.cms-application .slide .headline,.cms-application .slide .link {transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}
 
.cms-application .slide h3 {position: relative;  font-size:1.35rem;  line-height: 1.5rem; font-weight:700; color: #fff; text-align: center;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
 
.cms-application .slide .headline {position: absolute;  bottom:100px; right: -60px;  cursor: default;font-size:8.5rem;  line-height: 2.5rem;color: transparent;-webkit-text-stroke: 2px #01e2ff; font-weight: 700; transition-delay: 50ms;}
.cms-application a .slide .link { display: block; background: #333;text-align: center; font-weight: 700; width: 200px; padding: 0.5em ; font-size:1rem; opacity: 0; color: #fff;position: absolute;right:50px; bottom: 0px;  transition-delay: 25ms;}
.cms-application .slide.hover:before, .cms-application .slide:hover:before {opacity: 1;}
 

.cms-application .slide.hover:before,
.cms-application .slide.hover .number:before,
.cms-application .slide.hover .number:after,
.cms-application .slide.hover .headline,
.cms-application .slide.hover .link, .cms-application .slide:hover:before,.cms-application .slide:hover .number:before,
.cms-application .slide:hover .number:after, .cms-application .slide:hover .headline,.cms-application .slide:hover .link {
  transition: 500ms cubic-bezier(0.7, 0, 0.3, 1);
}
.cms-application .slide.hover .number:before, .cms-application .slide:hover .number:before { width: 3em; margin-right: 1em;}
.cms-application .slide.hover .number:after, .cms-application .slide:hover .number:after { width: 0; margin-right: 0;}
 
.cms-application .slide.hover .headline, .cms-application .slide:hover .headline { transition-delay: 100ms;  bottom:240px; }
.cms-application .slide.hover .link, .cms-application .slide:hover .link { bottom:115px;   opacity: 1; transition-delay: 250ms; pointer-events: auto;}
 
 
.slide figure { width: 100%; vertical-align: middle;overflow: hidden; border-radius:30px; transform: translateZ(0); position: relative;transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; }
.slide figure::before { content: ''; position: absolute; top: 8px; left: 8px;  z-index: 1;  width: calc(100% - 16px); height: calc(100% - 16px); border: 2px solid rgba(255, 255, 255, 0.9); border-radius:30px;}


@media (max-width:1024px) {
.cms-application { padding:40px 80px;}
 }
@media (max-width:767.98px) {
.cms-application { padding:0px;}
.cms-application .slide .headline{display: none;}
.cms-application .slide .body {bottom: 0px;  }   
}


/*-------------------*/
/***** cms-application-list  *****/
/*------------------ 
.cms-application-list {width: 100%;  margin: 10px auto;  padding:10px 0; display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.cms-application-list li{ display: flex;  width: calc(100% / 2 - 20px); flex-wrap: wrap;  justify-content: flex-end; align-self: center;  margin:0px 10px; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s;padding:0px 34px; overflow: hidden; position: relative; z-index: 1;  }
.cms-application-list li:nth-child(even){ margin-top: 150px;} 

.cms-application-list li::after{ content: ""; display: block; width: 100%; height: 80%; margin-right: -10%; background: #000; position: relative; z-index: 0;  }


 
.cms-application-list figure { cursor: pointer;   width: 100%; 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; }
 .cms-application-list figure::before { content: ''; position: absolute; top: 8px; left: 8px;  z-index: 1;  width: calc(100% - 16px); height: calc(100% - 16px); border: 2px solid rgba(255, 255, 255, 0.9); pointer-events: none; }
.cms-application-list figure:hover{transform: scale(1.05); opacity: .5; }
.cms-application-list .wrap-box {position: relative; z-index: 1; display: flex; flex-wrap: wrap; width:auto; height: auto; box-sizing: border-box; margin-left: -10%; margin-top: -20%;padding:0px 20px; background: #fff; }
/* 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: #555!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:1.5625rem;  line-height: 2.5rem; font-weight:400;text-align: center; letter-spacing: .18em;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: #fff;  background: #000; 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:#000; margin-top: -10px;  }