@charset "utf-8";

/* CSS Document */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  min-width: 1120px;
  font-family: 'Prompt', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #2b2a44;
  outline: 0;
  vertical-align: baseline;
  overflow-x: hidden;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: #2b2a44;
  outline: none;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ul li {
  list-style-type: none;
}

img {
  border: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix:after {
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  content: "";
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}

.clear {
  display: block;
  clear: both;
  zoom: 1;
}

.wrapper {
  position: relative;
  width: 1120px;
  min-width: 1120px;
  margin: 0 auto;
  zoom: 1;
}

.container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.all-icons {
  display: inline-block;
  text-indent: -9999px;
  vertical-align: middle;
  background: url("../images/all-icons.png") no-repeat;
}

.btn {
  position: relative;
  display: block;
  width: 342px;
  height: 52px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 52px;
  text-align: center;
  color: #fff;
  border: 1px solid #ffb876;
  border-radius: 4px;
  background: #ff9e48;
  background: -webkit-linear-gradient(to right, #ffbc52 0%, #ff6f36 100%);
  background: linear-gradient(to right, #ffbc52 0%, #ff6f36 100%);
}

.btn:before {
  z-index: -1;
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 300px;
  height: 62px;
  margin-left: -150px;
  border-radius: 4px;
  background: -webkit-linear-gradient(left, #fff4dc 0%, #ffe5cd 100%);
  background: linear-gradient(to right, #fff4dc 0%, #ffe5cd 100%);
}

.banner .btn {
  margin: 0px auto 9px;
}

.banner .btn.small {
  margin: 7px auto;
}

.btn.small {
  width: 184px;
  height: 44px;
  font-size: 16px;
  line-height: 44px;
}

.comparison .btn.small {
  margin: 6px auto -6px;
  width: 224px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
}

.comparison .btn.small big {
  font-size: 16px;
}

.comparison .btn.small small {
  font-size: 12px;
}

.btn.small:before {
  width: 140px;
  margin-left: -70px;
}

.float .btn {
  margin-top: 4px;
  width: 264px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
}

.float .btn:before {
  top: -4px;
  margin-left: -110px;
  width: 220px;
  height: 53px;
}

.btn span {
  z-index: 1;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.btn:hover {
  background: #ffbc52;
  background: -webkit-linear-gradient(right, #ffbc52 0%, #ff6f36 100%);
  background: linear-gradient(to left, #ffbc52 0%, #ff6f36 100%);
}

.price {
  color: #2b2a44;
  font-size: 12px;
  text-align: center;
}

.price b {
  font-size: 14px;
}

.price strong {
  color: #ff7037;
  font-size: 30px;
}

.price strong big {
  font-size: 50px;
}

.price del {
  padding-left: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #2b2a44;
}

.banner {
  min-width: 1120px;
  height: 726px;
  text-align: center;
  background: url("../images/banner-bg.jpg?t=2165") top center no-repeat;
}

.banner .logo {
  z-index: 9;
  display: block;
  position: absolute;
  top: 62px;
  left: 0;
  width: 56px;
  height: 18px;
  text-indent: -9999px;
  background: url("../images/logo.png") center no-repeat;
}

.banner .title,
.banner .klick,
.banner .asc-box,
.banner .right-message .countnum,
.banner .right-message .offer,
.banner .price {
  -webkit-transform: translate(0, 100px);
  -ms-transform: translate(0, 100px);
  -o-transform: translate(0, 100px);
  transform: translate(0, 100px);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.banner .title.on,
.banner .klick.on,
.banner .asc-box.on,
.banner .price.on {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
  filter: alpha(opacity=100);
}

.banner .title {
  position: relative;
  padding: 44px 0 8px;
  color: #2b2a44;
  font-size: 46px;
  transition-delay: .3s;
}

.banner .title:before {
  content: '';
  display: block;
  position: absolute;
  top: 76px;
  right: -10px;
  width: 244px;
  height: 169px;
  background: url(../images/discount.png) no-repeat;
  transition: all .3s ease-in-out;
  transform-origin: 0 0px;
  animation: rotateIn 5s linear infinite;
}

.banner .klick {
  margin: 0 auto;
  width: 702px;
  color: #2b2a44;
  font-size: 16px;
  line-height: 26px;
  transition-delay: .5s;
}

.banner .asc-box {
  position: relative;
  transition-delay: 1s;
}

.banner .asc-box:before {
  content: '+';
  display: block;
  position: absolute;
  top: 100px;
  left: 480px;
  color: #d2d9fe;
  font-size: 114px;
  font-weight: 700;
}

.banner .asc-box>img {
  display: block;
  float: left;
  margin: 46px 110px 0 166px;
}

.banner .asc-box>img.bundle {
  margin: 88px 0 0;
}

.banner .price {
  transition-delay: 1.4s;
}

.buynow {
  display: inline-block;
  margin-left: 32px;
  color: #ff7036;
  font-size: 16px;
  line-height: 18px;
  border-bottom: 1px solid #ff7036;
}

.buynow:hover {
  color: #fb976e;
  border-color: #fb976e;
}

.intro {
  min-width: 1120px;
  height: 807px;
  overflow-x: hidden;
  background: url("../images/intro-bg.jpg?t=567") top center no-repeat;
}

.intro h2 {
  width: 320px;
  padding-top: 180px;
  font-size: 36px;
  line-height: 46px;
  text-align: left;
  color: #fff;
}

.intro h2 small {
  font-size: 14px;
  font-weight: 400;
}

.intro .intro-list {
  width: 1169px;
  height: 501px;
  margin: 0 -400px 0 0;
  padding: 190px 0 0 27px;
  overflow: hidden;
}

.intro .intro-list ul {
  position: relative;
  width: 1288px;
  height: 280px;
  -webkit-transform: translate(10%, 0);
  -ms-transform: translate(10%, 0);
  -o-transform: translate(10%, 0);
  transform: translate(10%, 0);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.intro .intro-list ul.on {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.intro .intro-list ul li {
  position: relative;
  float: left;
  width: 300px;
  height: 240px;
  margin-right: 22px;
  padding: 26px 30px 0;
  text-align: left;
  border: 1px solid #d5daff;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  background: url("../images/intro05-bg.jpg") center no-repeat;
  opacity: 0.85;
  transform: scale(0.85);
  transition: all .5s ease;
}

.buynow {
  opacity: 0.85;
  filter: alpha(opacity=85);
  transition: all .5s ease;
}

.intro .intro-list ul li h3 {
  font-size: 36px;
  line-height: 90px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.intro .intro-list ul li p {
  line-height: 24px;
}

.intro .intro-list ul li.active {
  border-color: #fff;
  -webkit-box-shadow: 0 30px 30px 6px rgba(13, 35, 122, 0.2);
  box-shadow: 0 30px 30px 6px rgba(13, 35, 122, 0.2);
  opacity: 1;
  transform: scale(1);
}

.intro .intro-list ul li.active h3 {
  color: #6773ff;
}

.intro .intro-list ul li.active[data-num="1"] {
  background: url("../images/intro01-bg.jpg") center no-repeat;
}

.intro .intro-list ul li.active[data-num="2"] {
  background: url("../images/intro02-bg.jpg") center no-repeat;
}

.intro .intro-list ul li.active[data-num="3"] {
  background: url("../images/intro03-bg.jpg") center no-repeat;
}

.intro .intro-list ul li.active[data-num="4"] {
  background: url("../images/intro04-bg.jpg") center no-repeat;
}

.intro ul.intro-line {
  width: 164px;
  height: 4px;
  margin: -17px 0 0 0;
}

.intro ul.intro-line li {
  float: left;
  width: 20px;
  height: 4px;
  margin-right: 6px;
  background: #d5daff;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.intro ul.intro-line li.active {
  width: 80px;
  background: #747fff;
}

.intro .intro-awards {
  display: block;
  margin-top: 136px;
}

.feature {
  min-width: 1120px;
  min-height: 780px;
}

.feature h2 {
  padding-top: 236px;
  font-size: 42px;
  line-height: 52px;
  text-align: center;
}

.feature .feature-chart {
  position: relative;
  width: 560px;
  margin-top: 127px;
}

.feature .feature-chart .chart-box {
  position: relative;
  width: 560px;
  background: url("../images/feature-chart-bg.jpg") top center no-repeat;
}

.feature .feature-chart .chart-box dl {
  position: relative;
  z-index: 2;
  float: left;
  width: 140px;
}

.feature .feature-chart .chart-box dl dt {
  position: relative;
  width: 140px;
  height: 212px;
}

.feature .feature-chart .chart-box dl dt .bar {
  display: block;
  position: absolute;
  bottom: 0;
  width: 7px;
  -webkit-border-radius: 3.5px;
  border-radius: 3.5px;
}

.feature .feature-chart .chart-box dl dt .bar.short {
  left: 59px;
  height: 0;
  background: #ced1e0;
  background: -webkit-linear-gradient(bottom, #ced1e0 0%, #e5e7f2 100%);
  background: linear-gradient(to top, #ced1e0 0%, #e5e7f2 100%);
}

.feature .feature-chart .chart-box dl dt .bar.long {
  left: 73px;
  height: 0;
  background: #6773ff;
  background: -webkit-linear-gradient(bottom, #6773ff 0%, #aab1ff 100%);
  background: linear-gradient(to top, #6773ff 0%, #aab1ff 100%);
}

.feature .feature-chart .chart-box dl dt .bar.long span {
  display: block;
  position: absolute;
  top: -32px;
  left: 50%;
  width: 132px;
  margin-left: -66px;
  font-size: 12px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  color: #6773ff;
}

.feature .feature-chart .chart-box dl dd {
  font-size: 12px;
  line-height: 36px;
  text-align: center;
}

.feature .feature-chart .chart-box dl.on dt .bar.long {
  height: 180px;
  -webkit-transition: height .9s ease;
  transition: height .9s ease;
}

.feature .feature-chart .chart-box dl.on.one dt .bar.short,
.feature .feature-chart .chart-box dl.on.three dt .bar.short {
  height: 90px;
  -webkit-transition: height .45s ease;
  transition: height .45s ease;
}

.feature .feature-chart .chart-box dl.on.two dt .bar.short {
  height: 120px;
  -webkit-transition: height .6s ease;
  transition: height .6s ease;
}

.feature .feature-chart .chart-box dl.on.four dt .bar.short {
  height: 60px;
  -webkit-transition: height .3s ease;
  transition: height .3s ease;
}

.feature .feature-chart .chart-curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 212px;
  background: url("../images/feature-chart-curve.png") left bottom no-repeat;
  -webkit-transition: all .5s ease .9s;
  transition: all .5s ease .9s;
}

.feature .feature-chart .chart-curve.on {
  width: 560px;
}

.feature .feature-chart p {
  margin-top: 33px;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

.feature .feature-list {
  width: 515px;
  text-align: left;
}

.feature .feature-list h3 {
  font-size: 26px;
  line-height: 40px;
}

.feature .feature-list ul {
  margin-top: 18px;
}

.feature .feature-list ul li {
  padding-left: 24px;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 26px;
  background: url("../images/feature-list-iocn01.png") left 8px no-repeat;
}

.feature .feature-list ul li,
.feature .feature-list .buynow {
  opacity: 0;
  filter: alpha(opacity=0);
  transition: all .5s ease;
}

.feature .feature-list .buynow {
  transition-delay: 1.2s;
}

.feature .feature-list ul li.one {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.feature .feature-list ul li.two {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}

.feature .feature-list ul li.three {
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
}

.feature .feature-list ul li.four,
.feature.feature03 .feature-list .buynow {
  -webkit-transition-delay: .8s;
  transition-delay: .8s;
}

.feature .feature-list ul li.five,
.feature.feature02 .feature-list .buynow {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.feature .feature-list ul li.on,
.feature .feature-list .buynow.on {
  transform: translate(0, 0);
  opacity: 1;
  filter: alpha(opacity=100);
}

.feature .feature-list ul li span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
  height: 19px;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  vertical-align: middle;
  color: #fff;
  background: #ff4848;
}

.feature .feature-list ul li span:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  right: -5px;
  width: 5px;
  height: 19px;
  vertical-align: middle;
  background: url("../images/feature-list-iocn02.png") center no-repeat;
}

.feature .feature-show {
  position: relative;
  width: 797px;
  height: 461px;
  margin-top: 181px;
  margin-right: -215px;
  background: url("../images/feature-show-bg.jpg") right top no-repeat;
}

.feature .feature-show .feature-content {
  position: relative;
  float: left;
  width: 632px;
  height: 421px;
  margin: 40px 0 0 0;
  background: url("../images/feature-show-screen.jpg") center no-repeat;
  -webkit-box-shadow: 0 0 57px 6.27px rgba(130, 145, 252, 0.5);
  box-shadow: 0 0 57px 6.27px rgba(130, 145, 252, 0.5);
  -webkit-transform: translate(0, 30%);
  -ms-transform: translate(0, 30%);
  -o-transform: translate(0, 30%);
  transform: translate(0, 30%);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .75s ease;
  transition: all .75s ease;
}

.feature .feature-show .feature-content.on {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
  filter: alpha(opacity=100);
}

.feature .feature-show .show-left {
  position: absolute;
  top: 80px;
  left: 163px;
  width: 45px;
}

.feature .feature-show .show-left span {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.feature .feature-show .show-left span.waste {
  display: block;
  width: 45px;
  height: 16px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #1f2030;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background: #f8b551;
}

.feature .feature-show .show-left span.waste.omit {
  color: #f8b551;
  background: none;
}

.feature .feature-show .show-left span.waste.on {
  width: 16px;
  height: 16px;
  background: url(../images/feature-show-icon04.png) center no-repeat;
}

.feature .feature-show .show-left span.waste.on.omit {
  opacity: 0;
  filter: alpha(opacity=0);
}

.feature .feature-show .show-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 415px;
}

.feature .feature-show .show-right .scan {
  position: absolute;
  top: 24px;
  right: 91px;
  width: 254px;
  height: 254px;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.feature .feature-show .show-right .scan span {
  display: block;
  position: absolute;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

.feature .feature-show .show-right .scan span.inner {
  top: 0;
  right: 0;
  width: 254px;
  height: 254px;
  background: url("../images/feature-show-inner-ring.png") center no-repeat;
}

.feature .feature-show .show-right .scan span.outer {
  top: 0;
  right: 0;
  width: 254px;
  height: 254px;
  background: url("../images/feature-show-outer-ring.png") center no-repeat;
}

.feature .feature-show .show-right .scan div {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 254px;
  text-align: center;
  text-shadow: 0 10px 12px 1.42px rgba(18, 24, 48, 0.53);
  color: #e7f0fd;
}

.feature .feature-show .show-right .details {
  position: absolute;
  top: 84px;
  right: 20px;
  width: 371px;
  height: auto;
}

.feature .feature-show .show-right .details .detail {
  width: 371px;
  height: 65px;
  padding: 0 0 0 92px;
  margin: 0 auto -40px;
  font-size: 12px;
  font-weight: 700;
  line-height: 50px;
  color: #f8b551;
  background: rgba(69, 95, 206, 0.15);
  -webkit-border-radius: .56px;
  border-radius: .56px;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

.feature .feature-show .show-right .details .detail b {
  opacity: 0;
  filter: alpha(opacity=0);
}

.feature .feature-show .show-right .details .detail.detail01 {
  -webkit-transform: scale(0.38, 0.19);
  transform: scale(0.38, 0.19);
  margin-top: 212px;
}

.feature .feature-show .show-right .details .detail.detail02 {
  -webkit-transform: scale(0.25, 0.06);
  transform: scale(0.25, 0.06);
}

.feature .feature-show .show-right .details .detail.detail03 {
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}

.feature .feature-show .show-right .details .detail.on {
  margin: 0 auto 13px;
}

.feature .feature-show .show-right .details .detail.on b {
  opacity: 1;
  filter: alpha(opacity=100);
}

.feature .feature-show .show-right .details .detail.on.detail01 {
  margin-top: 0;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  background: url("../images/feature-show-icon01.png") center no-repeat;
}

.feature .feature-show .show-right .details .detail.on.detail02 {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  background: url("../images/feature-show-icon02.png") center no-repeat;
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

.feature .feature-show .show-right .details .detail.on.detail03 {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  background: url("../images/feature-show-icon03.png") center no-repeat;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.feature .feature-show .show-right .cleaner {
  position: absolute;
  top: 160px;
  right: 81px;
  width: 208px;
  height: 269px;
  background: url("../images/feature-cleaner.png") center no-repeat;
  -webkit-transform: scale(0.25);
  -ms-transform: scale(0.25);
  -o-transform: scale(0.25);
  transform: scale(0.25);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  -o-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.feature .feature-show .show-right .cleaner span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/feature-cleaner-light.png") center no-repeat;
  -webkit-animation: light .2s ease infinite;
  animation: light .2s ease infinite;
}

.feature .feature-show .show-right .cleaner.on {
  -webkit-transform-origin: 163px 218px;
  transform-origin: 163px 218px;
  -webkit-animation: rotate45 3s linear infinite;
  animation: rotate45 3s linear infinite;
}

.feature .feature-show .show-right .compalate {
  position: absolute;
  top: 81px;
  right: 91px;
  width: 254px;
  height: 254px;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.feature .feature-show .show-right .compalate span {
  display: block;
  position: absolute;
}

.feature .feature-show .show-right .compalate span.inner {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/feature-show-inner-ring02.png") center no-repeat;
}

.feature .feature-show .show-right .compalate span.outer {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/feature-show-outer-ring02.png") center no-repeat;
}

.feature .feature-show .show-right .compalate span.check {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/feature-show-check.png") center no-repeat;
}

.feature .feature-show .show-right .compalate div {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 254px;
  text-align: center;
  text-shadow: 0 10px 12px 1.42px rgba(18, 24, 48, 0.53);
  color: #e7f0fd;
}

.feature .feature-tag {
  position: relative;
  width: 600px;
}

.feature .feature-tag span {
  display: block;
  position: absolute;
  -webkit-transition: all .8s ease .5s;
  transition: all .8s ease .5s;
}

.feature .feature-tag span.inner {
  top: 208px;
  left: 163px;
  width: 251px;
  height: 251px;
  background: url("../images/feature-tag-inner-ring.png") center no-repeat;
  -webkit-animation: clockwise 1s linear infinite;
  animation: clockwise 1s linear infinite;
}

.feature .feature-tag span.outer {
  top: 52px;
  left: 6px;
  width: 560px;
  height: 560px;
  background: url("../images/feature-tag-outer-ring.png") center no-repeat;
  -webkit-animation: anticlockwise 1.2s linear infinite;
  animation: anticlockwise 1.2s linear infinite;
}

.feature .feature-tag span.tag {
  top: 236px;
  left: 193px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  filter: alpha(opacity=0);
}

.feature .feature-tag span.tag01 {
  width: 151px;
  height: 151px;
  background: url("../images/feature-tag-icon01.png") center no-repeat;
}

.feature .feature-tag span.tag02 {
  top: 236px;
  left: 193px;
  width: 192px;
  height: 192px;
  background: url("../images/feature-tag-icon02.png") center no-repeat;
}

.feature .feature-tag span.tag03 {
  width: 260px;
  height: 260px;
  background: url("../images/feature-tag-icon03.png") center no-repeat;
}

.feature .feature-tag span.tag04 {
  width: 181px;
  height: 181px;
  background: url("../images/feature-tag-icon04.png") center no-repeat;
}

.feature .feature-tag span.on {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  filter: alpha(opacity=100);
}

.feature .feature-tag span.on.tag01 {
  top: 169px;
  left: 55px;
}

.feature .feature-tag span.on.tag03 {
  top: 372px;
  left: -30px;
}

.feature .feature-tag span.on.tag04 {
  top: 358px;
  left: 384px;
}

.feature.feature01 {
  background: url("../images/feature-bg.jpg?t=765") center top no-repeat;
}

.feature.feature01 .feature-list {
  margin-top: 116px;
}

.feature.feature02 {
  background: #fff;
}

.feature.feature02 .feature-list {
  margin-top: 272px;
}

.feature.feature03 {
  height: 840px;
  background: url("../images/feature-bg03.jpg") bottom center no-repeat;
}

.feature.feature03 .feature-list {
  width: 480px;
  margin-top: 195px;
}

.comparison {
  min-width: 1120px;
  padding: 50px 0;
  background: #f2f5ff;
}

.comparison h2 {
  font-size: 30px;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
}

.comparison table {
  width: 100%;
  margin-top: 32px;
}

.comparison .text {
  width: 626px;
}

.comparison thead th.text {
  padding-left: 25px;
  color: #6b6a84;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d7d6ef;
}

.comparison table th.text span {
  display: inline-block;
  padding-top: 72px;
}

.comparison table th.space,
.comparison table td.space {
  width: 7px;
}

.comparison table th.free,
.comparison table td.free {
  width: 220px;
}

.comparison table th.pro,
.comparison table td.pro {
  width: 260px;
}

.comparison table thead th {
  height: 120px;
  text-align: center;
}

.comparison table thead th div {
  color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.comparison table thead th div span {
  display: inline-block;
  line-height: 24px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.comparison table thead th.free div {
  height: 100px;
  padding-top: 16px;
  line-height: 68px;
  font-weight: 400;
  background: #6b6a84;
}

.comparison table thead th.free div span {
  margin-top: 10px;
  padding: 0 20px;
  font-size: 12px;
  color: #3b3a59;
  background: #b6b6cc;
}

.comparison table thead th.pro div {
  height: 120px;
  padding-top: 34px;
  line-height: 20px;
  background: #2178ff;
}

.comparison thead th.pro h3 {
  font-size: 18px;
}

.comparison table thead th.pro div span {
  display: inline-block;
  margin-top: 26px;
  padding: 0 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  border-radius: 4px;
  background: #ff4848;
}

.comparison table tbody td {
  height: 36px;
  border-bottom: 1px solid #d7d6ef;
}

.comparison table tbody td i {
  width: 17px;
  height: 14px;
}

.comparison table tbody td.text {
  padding-left: 25px;
}

.comparison table tbody td.space {
  border-bottom: 0;
}

.comparison table tbody td.free {
  text-align: center;
  background: #e9e8f1;
}

.comparison table tbody td.free i {
  background-position: 0 -28px;
}

.comparison table tbody td.free i.yes {
  background-position: 0 0;
}

.comparison table tbody td.pro {
  text-align: center;
  background: #e7ecff;
}

.comparison table tbody td.pro i {
  background-position: 0 -14px;
}

.comparison table tfoot th {
  height: 118px;
  vertical-align: middle;
  border-bottom: 1px solid #d7d6ef;
}

.comparison table tfoot th.space {
  border-bottom: 0;
}

.comparison table tfoot th.free {
  background: #e9e8f1;
}

.comparison table tfoot th.pro {
  padding: 0;
  background: #e7ecff;
  vertical-align: top;
}

.comparison table tfoot th dl dt {
  padding: 13px 0 13px 23px;
}

.comparison table tfoot th dl dt img {
  display: block;
}

.comparison table tfoot th dl dd {
  width: 540px;
  padding: 30px 0 0 15px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
}

.comparison table tfoot th p {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
}

.comparison table tfoot th .price {
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  color: #2b2a44;
}

.comparison-tab {
  margin-top: 3px;
  height: 74px;
  background: #e7ecff;
}

.comparison table tfoot th.pro p {
  padding: 20px 0px;
  line-height: 0px;
}

.comparison table tfoot th.pro p.price {
  padding: 26px 0 8px;
}

.comparison .price strong {
  font-size: 20px;
}

.comparison .price del {
  font-size: 12px;
  padding-left: 4px;
}

.comparison table tfoot th.pro p b {
  font-weight: 400;
}

.review {
  min-width: 1120px;
  height: 720px;
  padding-top: 197px;
  background: #f2f5ff url("../images/review-bg.jpg") bottom center no-repeat;
}

.review .review-content {
  width: 420px;
  margin: 0;
  overflow: hidden;
}

.review .review-content ul {
  position: relative;
  width: 1680px;
  height: 360px;
}

.review .review-content ul li {
  position: absolute;
  top: 0;
  width: 420px;
  height: 360px;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;
}

.review .review-content ul li dl {
  width: 100%;
  height: 100%;
}

.review .review-content ul li dl dt img {
  display: block;
  float: left;
  width: 79px;
  height: 79px;
}

.review .review-content ul li dl dt p {
  display: inline-block;
  float: left;
  padding-top: 10px;
  margin-left: 15px;
  line-height: 30px;
}

.review .review-content ul li dl dd {
  margin-top: 38px;
  line-height: 24px;
}

.review .review-content ul li.zero {
  left: -420px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0.85);
  -ms-transform: scale(0.85);
  -o-transform: scale(0.85);
  transform: scale(0.85);
}

.review .review-content ul li.one {
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.review .review-content ul li.two {
  left: 420px;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.review .review-content ul li.three {
  left: 840px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.review .control {
  display: block;
  position: absolute;
  top: 110px;
  left: 468px;
  width: 63px;
  height: 63px;
  text-indent: -9999px;
  background: url("../images/review-control.png") 0 0 no-repeat;
}

.review .control:hover {
  background-position: -63px 0;
}

.footer {
  min-width: 1120px;
  padding: 15px 0 160px;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
  color: #8f8eaa;
  background: #5a5973;
}

.footer dl {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(182, 182, 204, 0.1);
}

.footer .copyright {
  margin-top: 20px;
}

.footer .copyright a {
  display: inline-block;
  padding: 0 0 0 10px;
  color: #8f8eaa;
}

.float {
  z-index: 10;
  position: fixed;
  bottom: -160px;
  left: 0;
  width: 100%;
  min-width: 1120px;
  height: 90px;
  background: #fff;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.float.on {
  bottom: 0;
}

.float .asc-box {
  position: relative;
  float: left;
  width: 260px;
  height: 90px;
}

.float .asc-box img {
  display: block;
  position: absolute;
  top: -46px;
  left: 0px;
  width: 130px;
}

.float .asc-box img.bundle {
  top: 12px;
  left: 100px;
  width: 160px;
}

.float .information {
  float: left;
  width: 560px;
  text-align: center;
}

.float .information h2 {
  padding: 24px 0 10px;
  color: #2b2a44;
  font-size: 16px;
}

.float .information h2 b {
  color: #ff7036;
}

.float .information h2 span {
  color: #c1c1d1;
  font-size: 12px;
}

.float .information p {
  color: #2b2a44;
  font-size: 12px;
}

.float .price {
  padding-top: 8px;
}

.float .price strong {
  font-size: 16px;
}

.float .price del {
  font-size: 14px;
}

@keyframes rotateIn {

  0%,
  5%,
  10%,
  15%,
  20%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  2.5%,
  12.5% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  7.5%,
  17.5% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}

@-webkit-keyframes clockwise {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes clockwise {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes anticlockwise {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes anticlockwise {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
    filter: alpha(opacity=100);
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@-webkit-keyframes light {

  0%,
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  50% {
    opacity: 0.8;
    filter: alpha(opacity=80);
  }
}

@keyframes light {

  0%,
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  50% {
    opacity: 0.8;
    filter: alpha(opacity=80);
  }
}

@-webkit-keyframes rotate45 {

  0%,
  50%,
  100% {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  25% {
    -webkit-transform: translate(-5%, -5%);
    -ms-transform: translate(-5%, -5%);
    -o-transform: translate(-5%, -5%);
    transform: translate(-5%, -5%);
  }

  75% {
    -webkit-transform: translate(5%, 5%);
    -ms-transform: translate(5%, 5%);
    -o-transform: translate(5%, 5%);
    transform: translate(5%, 5%);
  }
}

@keyframes rotate45 {

  0%,
  50%,
  100% {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  25% {
    -webkit-transform: translate(-5%, -5%);
    -ms-transform: translate(-5%, -5%);
    -o-transform: translate(-5%, -5%);
    transform: translate(-5%, -5%);
  }

  75% {
    -webkit-transform: translate(5%, 5%);
    -ms-transform: translate(5%, 5%);
    -o-transform: translate(5%, 5%);
    transform: translate(5%, 5%);
  }
}