.banner{padding-top: 60px; padding-bottom: 30px;}
.banner h1{color: #403f3f; font-size: 70px; font-family: 'Graphik 700'; padding-top: 70px;}
.banner p{color: #818182; font-size: 24px; line-height: 32px; padding: 45px 0;}
.banner a.down{height: 70px; padding: 0 30px; background-color: #20a06b; border-radius: 35px; text-decoration: none;}
.banner a.down:hover{background-color: #147a50;}
.banner a.down span{font-size: 18px; color: #fff; text-decoration: none; padding: 0 15px;}
.banner a.down i{display: inline-block;}
.banner a.down i.down-ico{width: 19px; height: 17px; background: url(../images/down-ico.png) center center no-repeat;}
.banner a.down i.down-arrow{width: 11px; height: 12px; background: url(../images/down-arrow.png) center center no-repeat;}
.banner span.ver{text-align: center; display: block; font-size: 14px; padding: 18px 0;}
@media screen and (max-width: 1400px) {
  .banner .banner-img img{display: block; width: 100%; height: auto;}
}
@media (max-width: 1024px){
  .banner h1{font-size: 50px;}
  .banner p{font-size: 18px;}
}
@media (max-width: 768px){
  .banner a.down{height: auto; padding: 15px 10px;}
  .banner a.down span{font-size: 16px;}
  /* .banner a.down i{display: none;} */
}

.permium{padding-bottom: 60px;}
.permium .box{background-image: linear-gradient(#2e2d2d,#212121); border-radius: 30px; padding-top: 70px; padding-bottom: 40px;}
.permium .box h2{color: #fff; font-size: 40px; text-align: center; letter-spacing: 1px;}
.permium .box .Cell{padding: 0;}
.permium dl{padding: 0;}
/* .permium dl.dl2{padding: 0 40px;}
.permium dl.dl3{padding: 0 40px;} */
.permium dl dt{padding-bottom: 35px; padding-top: 80px;}
.permium dl img{display: block; margin: 0 auto;}
.permium dl dd{border-right: 2px solid #737373; min-height: 162px; padding: 0 65px;}
.permium dl h3{color: #fff; font-size: 20px; text-align: center; padding-bottom: 30px; letter-spacing: 1px;}
.permium dl p{color: #999; font-size: 16px; line-height: 22px; letter-spacing: 1px;}
.permium .padding-b80{padding-bottom: 60px;}
.permium a.see{font-size: 18px; color: #66a3ff; display: block; width: 160px; text-align: center; margin: 0 auto;}
@media screen and (max-width: 1264px) {
  .permium dl dd{border: none;}
}

.allinone{background-color: #e6e3ec; padding-bottom: 80px;}
.allinone h2{font-size: 40px; text-align: center; padding: 48px 0; color: #2b2b2a;}
.allinone p{font-size: 16px; color: #2b2b2a; line-height: 24px; padding-bottom: 80px;}
.allinone .width-300{box-sizing: border-box; -webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px;}
.allinone .allinone-titles{list-style: none;}
.allinone .allinone-titles li{color: #979ea9; font-size: 20px; font-weight: bold; padding: 10px 15px; display: inline-block; margin: 10px 0; border-radius: 24px; cursor: pointer; -webkit-transition: all .5s; transition: all .5s;}
.allinone .allinone-titles li:hover{background-color: #fff; color: #24b076; -webkit-transition: all .5s; transition: all .5s;}
.allinone .allinone-titles li:hover i.play{background-image: url(../images/play.png);}
.allinone .allinone-titles span{padding: 0 15px;}
.allinone .allinone-titles i{display: inline-block; background-repeat: no-repeat; background-position: center center;}
.allinone .allinone-titles i.play{width: 17px; height: 17px; background-image: url(../images/play-ico.png);}
.allinone .allinone-titles i.overview-ico{width: 24px; height: 23px; background-image: url(../images/overview-ico.png);}
.allinone .allinone-titles i.apps-ico{width: 24px; height: 23px; background-image: url(../images/installed-apps-ico.png);}
.allinone .allinone-titles i.add-ico{width: 24px; height: 23px; background-image: url(../images/installed-add-ons-ico.png);}
.allinone .allinone-titles i.fix-ico{width: 24px; height: 23px; background-image: url(../images/custom-fix-ico.png);}
.allinone .allinone-titles i.tools-ico{width: 24px; height: 23px; background-image: url(../images/tools-ico.png);}
.allinone .allinone-titles li.act{background-color: #fff; color: #24b076;}
.allinone .allinone-titles li.act i.play{background-image: url(../images/play.png);}
.allinone .video{list-style: none;}
.allinone .video li{height: 0; overflow: hidden; animation: slideUp600 .3s ease-out; animation-fill-mode:forwards;}
.allinone .video li.act{animation: slideDown600 .3s ease-out; animation-fill-mode:forwards;}

@keyframes slideDown600 {
  0% {height: 0;}
  100% {height: 585px;}
}
@keyframes slideUp600 {
  0% {height: 585px;}
  100% {height: 0;}
}
@media (max-width: 768px){
  .allinone .allinone-titles li{display: block;}
}

.list{padding: 50px 0;}
.list .row{border-bottom: 2px solid #d9d9d9; padding: 50px 0;}
.list .row.list-end{padding-bottom: 0;}
.list .imgbox img{display: block; margin: 0 auto;}
.list h3{font-size: 35px; color: #4b4b4b; padding-bottom: 40px;}
.list p{font-size: 16px; color: #6d6d6d; line-height: 26px;}
@media (max-width: 768px){
  .list .imgbox img{width: 100%; height: auto;}
}

.Totally{background-color: #e6e3ec; padding: 80px 0;}
.Totally h2{color: #2b2b2a; font-size: 40px; text-align: center;}
.Totally span.title{font-size: 22px; text-align: center; color: #fff; display: block; padding: 20px 0;}
.Totally .row{padding-top: 40px;}
.Totally ul#titles{list-style: none;}
/* .Totally li{color: #918f95; font-size: 18px; font-weight: bold; box-sizing: border-box; padding: 20px 0; background-color: #fff; margin-bottom: 10px; border-radius: 5px; cursor: pointer; -webkit-transition: all .5s; transition: all .5s;} */
.Totally ul#titles li{color: #918f95; font-size: 18px; font-weight: bold; box-sizing: border-box; padding: 20px 15px; background-color: #fff; margin-bottom: 10px; border-radius: 5px; cursor: pointer; -webkit-transition: all .5s; transition: all .5s; align-items: center;}
.Totally ul#titles li:hover{background-color: #353338; color: #fff; -webkit-transition: all .5s; transition: all .5s;}
.Totally ul#titles li .title{padding: 0 10px;}
.Totally ul#titles li i{display: inline-block; width: 11px; height: 7px; background: url(../images/drop-down-arrow.png) center center no-repeat;}
.Totally ul#titles li p{animation: slideUp .3s ease-out; animation-fill-mode:forwards; overflow: hidden; font-size: 16px; font-weight: normal; color: #fff; line-height: 20px; font-family:'Graphik 200';}
.Totally ul#titles li.act{background-color: #353338; color: #fff; -webkit-transition: all .5s; transition: all .5s;}
.Totally ul#titles li.act i{width: 13px; height: 13px; background: url(../images/play.png) center center no-repeat;}
.Totally ul#titles li.act p{animation: slideDown .3s ease-out; animation-fill-mode:forwards; box-sizing: border-box; border-top: 2px solid #44c590; margin-top: 15px;}
.Totally .video{margin-left: 20px; list-style: none; box-shadow: 0 0 10px 10px #ccc;}
.Totally .video li{height: 0; overflow: hidden; animation: slideUp500 .3s ease-out; animation-fill-mode:forwards;}
.Totally .video li.act{animation: slideDown500 .3s ease-out; animation-fill-mode:forwards;}

@keyframes slideDown {
  0% {height: 0; padding: 0 10px;}
  100% {height: 180px; padding: 15px 10px;}
}
@keyframes slideUp {
  0% {height: 180px; padding: 15px 10px;}
  100% {height: 0; padding: 0 10px;}
}

@keyframes slideDown500 {
  0% {height: 0;}
  100% {height: 565px;}
}
@keyframes slideUp500 {
  0% {height: 565px;}
  100% {height: 0;}
}


/* .bottom{padding-top: 100px; padding-bottom: 180px;}
.bottom .box{background-image: linear-gradient(60deg, rgb(48, 226, 166)0%, rgb(47, 174, 227)100%); height: 420px; max-width: 1200px; margin: 0 auto; border-radius: 20px; padding-right: 80px; box-sizing: border-box;}
.bottom .width-500{-webkit-flex: 0 0 500px; -ms-flex: 0 0 500px; flex: 0 0 500px;}
.bottom .man{position: relative; top: -36px; left: -30px;}
.bottom .man img{display: block; width: 100%; height: auto;}
.bottom h3{font-size: 44px; text-align: center; color: #fff; padding-top: 88px;}
.bottom .btnbox{}
.bottom .btn{padding: 0 30px; height: 70px; background: #313734; border-radius: 35px; color: #fff; text-decoration: none; margin: 80px auto;}
.bottom .btn:hover{background: #000;}
.bottom .btn i{display: block; width: 32px; height: 28px; background: url(../images/ad-down-ico.png) center center no-repeat;}
.bottom .btn span{font-size: 24px; padding-left: 16px;}
@media (max-width: 1024px){
  .bottom .box{padding: 0 20px;}
  .bottom .width-500{-webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
  .bottom .man{position: static;}
  .bottom h3{font-size: 32px;}
}
@media (max-width: 768px){
  .bottom .box{height: auto;}
  .bottom .btn{height: auto;}
  .bottom .btn span{font-size: 16px; padding: 10px 0;}
} */

.cover{position:absolute; background:rgba(0, 0, 0, 0.9); width:100%; height:100%; filter:alpha(opacity=60); opacity:0.6; display:none; z-Index:99;}
.ad-box{position: absolute; width: 1200px; height: 630px; border-radius: 30px; z-index: 999; animation: popupClose .3s ease-out; animation-fill-mode:forwards;}
.ad-box.act{animation: popup .3s ease-out; animation-fill-mode:forwards;}
.ad-box .Cell{padding: 0;}
.ad-box .box-l{position: relative; height: 630px; background-image: linear-gradient(60deg, #0edc9b, #0da2e0); border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
.ad-box .box-l .man{position: absolute; left: -124px; bottom: 0; height: 579px;}
.ad-box .box-l .logo{position: absolute; right: -18px; top: 30px; z-index: 99;}
.ad-box .box-r{background-color: #313235; height: 630px; border-bottom-right-radius: 30px; border-top-right-radius: 30px; padding: 0 70px; position: relative;}
.ad-box .box-r .x{display: block; width: 24px; height: 23px; position: absolute; right: 30px; top: 20px; cursor: pointer;}
.ad-box .box-r h2{font-size: 78px; color: #fff; font-family: 'Graphik 500'; padding-top: 60px;}
.ad-box .box-r ul{list-style: none; padding-top: 15px; padding-left: 30px;}
.ad-box .box-r li{font-size: 18px; color: #fff; padding: 12px 0; background: url(../images/ad/hook.png) left center no-repeat; padding-left: 40px;}
.ad-box .box-r .btn{color: #fff; text-decoration: none; height: 70px; border-radius: 35px; background-image: linear-gradient(90deg, rgba(0, 148, 209, 1), rgba(1, 200, 124, 1)); margin: 45px auto;}
.ad-box .box-r i{display: inline-block; width: 22px; height: 18px; background: url(../images/ad/shop-ico.png) center center no-repeat;}
.ad-box .box-r span{font-size: 18px; padding-left: 15px;}
.ad-box .box-r .btn:hover{background-image: linear-gradient(90deg, rgba(0, 148, 209, 0.8), rgba(1, 200, 124, 0.8));;}

@keyframes popup {
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}
@keyframes popupClose {
  0% {transform: scale(1);}
  100% {transform: scale(0);}
}