@charset "utf-8";

/* CSS Document */
* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 1100px; 
  font-size: 14px;
  line-height: 1.4;
  color: #1c1c1c;
  font-weight: 400;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  outline: 0;
  vertical-align: baseline;
  overflow-x: hidden;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: #302d3d;
  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; }
.clearfix:after {
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  content: "";
  visibility: hidden;
}
.clearfix { zoom: 1; }
.fl { float: left; }
.fr { float: right; }
.alc{ text-align: center;}
.main {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  zoom: 1;
}
.all-icons { 
  display: inline-block;
  text-indent: -9999px;
  background: url(../images/all-icons.png) no-repeat 0 0;
}

/* banner */
.banner { width: 100%; min-width: 1100px; height: 725px; background: url(../images/banner.jpg) #1d2027 top center no-repeat; background-size: cover;}
.banner .wrapper { padding-top: 45px;}
.banner .logo { display: block; width: 45px; height: 15px; text-indent: -9999px; background: url(../images/logo.png);}
.banner .asc-box { float: left; margin-top: 100px; margin-left: -40px;}
.banner .right-message { float: right; margin-top: 114px; margin-right: 30px; text-align: left;}
.banner .right-message p { position: relative; font-size: 18px; color: #666976; letter-spacing: 5px;}
.banner .right-message h1 {margin-top: 20px; color: #fff; font-size: 36px; font-weight: 400;}
.banner .right-message .numbox { margin-top: 70px; }
.banner .right-message dl { margin-top: 55px;}
.banner .right-message .buybtn { display: inline-block; vertical-align: middle;}
.banner .right-message  dl dt { line-height: 60px;}
.banner .price { margin-top: 62px;}
.banner .price .buybtn { margin-left: 20px;}
.banner.soldout h1 { font-size: 36px; line-height: 56px;}
.banner.soldout h1 span { color: #ff9c00;}
.banner.soldout .price { margin-top: 125px;}
.banner.soldout .right-message { margin-right: 63px;}
.price{ position: relative;}
.price span {
  display: inline-block; vertical-align: middle; margin-right: 5px; font-size: 18px; color: #6d717b; line-height: 26px;
}
.price strong { display: inline-block; vertical-align: bottom; margin-right: 5px; font-size: 28px; color: #ff9c00;}
.price strong b { line-height: 28px; font-size: 70px;}
.price strong sup { display: inline-block; vertical-align: top; margin-top: -14px;  font-size: 18px; font-weight: 400; color: #6d717b;}
.price del {position: absolute; color: #6d717b; font-size: 16px; left: 256px; top: 5px;}
.numbox {line-height: 49px; color: #fff; font-size: 18px;}
.giftNum {
  display: inline-block;
  position: relative;
  height: 51px;
  margin: 0 4px;
  vertical-align: middle;
}
.giftNum .nwrap { 
  display: inline-block;
  position: relative;
  margin: 0 1px;
  width: 50px;
  height: 49px;
  border: solid #3f4452 1px;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
}
.giftNum em {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
  color: #ff9c00;
  font-size: 28px;
  line-height: 49px;
  font-style: normal;
}
.giftNum .numlist {
  display: block;
  width: inherit;
  height: inherit;
  color: #ff9c00;
  font-size: 28px;
  font-weight: 600;
  line-height: 49px;
}
.giftNum .numlist span { display: block; }

/* buybtn */
.buybtn { display: inline-block; width: 263px; height: 61px; line-height: 61px; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #16181e; border-radius: 3px; font-weight: 700; text-align: center;
  background-color: #ff8a00;
  background-image: -moz-linear-gradient( 103deg, rgb(255,126,0) 0%, rgb(255,156,0) 100%);
  background-image: -webkit-linear-gradient( 103deg, rgb(255,126,0) 0%, rgb(255,156,0) 100%);
  background-image: -ms-linear-gradient( 103deg, rgb(255,126,0) 0%, rgb(255,156,0) 100%);
}
.buybtn:hover{ 
  background-color: #ffa800;
  background-image: -moz-linear-gradient( 103deg, rgb(255,150,0) 0%, rgb(255,174,0) 100%);
  background-image: -webkit-linear-gradient( 103deg, rgb(255,150,0) 0%, rgb(255,174,0) 100%);
  background-image: -ms-linear-gradient( 103deg, rgb(255,150,0) 0%, rgb(255,174,0) 100%);
}


.floatlayer .buybtn { width: 251px; height: 53px; line-height: 53px; }

.animation{
    opacity: 0;
    -webkit-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
    -webkit-transition: all .5s;
    transition: all .5s;
}
.animation.on,.ai.on {
  opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.feature-main { height: 2505px; background: url(../images/main-bg.jpg) #1d2027 top center no-repeat; background-size: cover;}
.feature-box { position: relative;}
.feature .left {float: left;}
.feature .right { float: right;}
.feature .img-box { position: relative;}
.feature .message { color: #fff;}
.feature .message h2 { margin-bottom: 10px; margin-top: 15px; font-weight: 500; color: #f7f8fa; font-size: 42px; position: relative;}
.feature .message h2:before{ width: 29px; height: 29px; content: ""; display: inline-block; position: relative; margin: -2px 15px 0 0; background: url(../images/list.png) top center no-repeat; background-size: cover;}
.feature .message h2 span{ font-size: 24px; color: #f7f8fa; margin-right: 10px;}
.olduser_desp{ font-size: 18px; color: #585d66; letter-spacing: 0.8px;}



.feature01{ padding-top: 30px; height:890px;}
.feature01 .olduser_title{ margin-left: 40px; }
.olduser_powered{height: calc(100% - 200px); position: relative; overflow: hidden;}
.olduser_powai{ width: 636px; height: 464px; margin: 110px auto 0; background: url(../images/olduser_powai.png) no-repeat center top; position: relative; transform: translateX(-20px); }
.olduser_powcic1{ width: 23px; height: 23px; background: url(../images/olduser_powcic1.png) no-repeat center top; position:absolute; left: 186px; top: 266px; z-index: 2; -webkit-transform: translate(0px, 0); transform: translate(0px, 0);}
.olduser_powcic1.on{animation: olduser_powcic1 2s linear 1s alternate; -webkit-animation: olduser_powcic1 2s linear 1s alternate; transition-delay: 1s;}
.olduser_powcic2{ width: 19px; height: 19px; background: url(../images/olduser_powcic2.png) no-repeat center top; position:absolute; left: 400px; top: 281px; z-index: 2; -webkit-transform: translate(0px, 0); transform: translate(0px, 0);}
.olduser_powcic2.on{animation: olduser_powcic2 1.5s linear 1.2s alternate; -webkit-animation: olduser_powcic2 1.5s linear 1.2s alternate; transition-delay: 1.2s;}
.olduser_powcic3{ width: 18px; height: 18px; background: url(../images/olduser_powcic3.png) no-repeat center top; position:absolute; right:165px; top: 153px; z-index: 2; -webkit-transform: translate(0px, 0); transform: translate(0px, 0);}
.olduser_powcic3.on{animation: olduser_powcic3 1.8s linear 0.8s alternate; -webkit-animation: olduser_powcic3 1.8s linear 0.8s alternate; transition-delay: 0.8s;}
.olduser_powli{  height: 196px; position: absolute; z-index: 3; background-size: cover;}
.olduser_powli h5{ font-size: 20px; color: #ffffff; font-weight: normal; margin: 35px 0 0 60px; position: relative;}
.olduser_powli h5:after{ width: 134px; height: 3px; background: url(../images/olduser_line.png) no-repeat center top; bottom: -22px; content: ""; display: block; position: absolute;}
.olduser_powli p{margin: 40px 0 0 60px; font-size:14px; color: #c3c3cd; line-height: 1.8;}
.olduser_powli1{ width: 347px; background: url(../images/olduser_powbg1.png) no-repeat center top; top: 260px; left: 0;}
.olduser_powli1.on{transition-delay: 0.3s;}
.olduser_powli1 p{width: 235px;}
.olduser_powli2{ width: 466px; background: url(../images/olduser_powbg2.png) no-repeat center top; top: 35px; left: 752px;}
.olduser_powli2.on{transition-delay: 0.4s;}
.olduser_powli2 p{width: 290px;}
.olduser_powli3{ width: 402px; background: url(../images/olduser_powbg3.png) no-repeat center top; top: 450px; left: 610px;}
.olduser_powli3.on{transition-delay: 0.5s;}
.olduser_powli3 p{width: 270px;}
.feature02{ height: 680px; margin-top: 20px;}
.olduser_feature{ margin-top: 60px;}
.olduser_feature ul li{ width: 255px; height:150px ; padding:110px 20px 0 25px; margin: 100px 46px 0 46px; display: inline-block; vertical-align: top; background-color: #1d2026; border: 1px solid #27303f; box-shadow: 0 0 5px 1px #27303f inset; border-radius:8px; position: relative;}
.olduser_feature ul li:before{content: ""; display: block; position: absolute; background-size: cover; z-index: 2;}
.olduser_fea1:before{ width: 185px; height: 211px; background: url(../images/olduser_feaico1.png) no-repeat center top; left: 75px; top: -90px; }
.olduser_fea2:before{ width: 190px; height: 201px; background: url(../images/olduser_feaico2.png) no-repeat center top; left: 90px; top: -108px; }
.olduser_fea3:before{ width: 188px; height: 170px; background: url(../images/olduser_feaico3.png) no-repeat center top; left: 90px; top: -90px; }
.olduser_feature ul li em{ font-size: 12px; color: #9cacc4; padding: 2px 8px 1px 5px; display: inline-block; font-weight: bold; background-color: #0634c4; border-radius:10px;}
.olduser_feature ul li h5{ font-size: 18px; color: #ffffff; font-weight: bold; margin-top: 10px;}
.olduser_feature ul li p{ font-size: 14px; color: #d3d3d3; margin-top: 10px; line-height: 1.7;}
.feature03{ margin-top: 30px;}
.feature03 .message h2{ margin-bottom: 0;}
.feature03 .olduser_desp{ font-size: 24px;}

.olduser_othtit{width: 1100px; margin: 40px auto 0; overflow: hidden;}
.olduser_othtit>div{position: relative; float: left;}
.olduser_othtit>div.olduser_tit1{ width: 504px; height: 7px; background-color: #333743; margin: 83px 6px 0 0;}
.olduser_othtit>div.olduser_tit2{ width: 282px; height: 70px; border-radius: 15px 15px 0 0; background-color: #3e4352; font-size: 16px; color: #e3e4e7; font-weight: normal; margin: 20px 6px 0 0;}
.olduser_othtit>div.olduser_tit3{ width: 302px; height: 90px; border-radius: 15px 15px 0 0; background-color: #2752b7; font-size: 22px; color: #ffffff; font-weight: normal;}
.olduser_othtit>div p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 98%; margin: 0 auto; text-align: center;}
.feature03 table{ width: 1100px; margin: 0 auto; border-collapse: inherit;}
.feature03 table tr td{ border-right: 6px solid #20272e; border-bottom: 1px solid #20272e; background-color: #333743; font-size: 14px; color: #e3e4e7; padding: 9px 15px; position: relative;}
.feature03 table tr td:first-child{ padding-left: 55px;}
.feature03 table tr td:first-child span{ width: 25px; height: 25px; background: url(../images/olduser_icon.png) no-repeat center top; background-size: cover; display: block; position: absolute; left: 15px; top:calc(50% - 10px);}

.feature03 table tr td span.olduser_othico1{ background-position: 0 0;}
.feature03 table tr td span.olduser_othico2{ background-position: 0 -38px;}
.feature03 table tr td span.olduser_othico3{ background-position: 0 -77px;}
.feature03 table tr td span.olduser_othico12{ background-position: 0 -116px;}
.feature03 table tr td span.olduser_othico13{ background-position: 0 -154px;}
.feature03 table tr td span.olduser_othico4{ background-position: 0 -191px;}
.feature03 table tr td span.olduser_othico5{ background-position: 0 -227px;}
.feature03 table tr td span.olduser_othico6{ background-position: 0 -262px;}
.feature03 table tr td span.olduser_othico7{ background-position: 0 -300px;}
.feature03 table tr td span.olduser_othico8{ background-position: 0 -339px;}
.feature03 table tr td span.olduser_othico9{ background-position: 0 -379px;}
.feature03 table tr td span.olduser_othico10{ background-position: 0 -418px;}
.feature03 table tr td span.olduser_othico11{ background-position: 0 -456px;}
.feature03 table tr td:last-child{ border-right: none;}
.olduser_are1{width: 469px;}
.olduser_are2{width: 278px;}
.olduser_are3{width: 300px;}
.olduser_cor:before{width: 17px; height: 14px; content: ""; display: block; background: url(../images/olduser_cor.png) no-repeat center top; background-size:cover; margin: auto;}

/* animation */
.olduser_fea1.on{transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}
.olduser_fea2.on{transition-delay: 0.4s; -webkit-transition-delay: 0.4s;}
.olduser_fea3.on{transition-delay: 0.6s; -webkit-transition-delay: 0.6s;}
@keyframes olduser_powcic1{
	0%{transform: translate(0,0);}
	68%{opacity: 1; transform: translate(-120px,70px);}
	80%{ opacity: 0; transform: translate(-140px,80px);}
	100%{ opacity: 0; transform: translate(-140px,80px);}
}
@keyframes olduser_powcic2{
	0%{transform: translate(0,0);}
	68%{opacity: 1; transform: translate(120px,70px);}
	80%{ opacity: 0; transform: translate(140px,80px);}
	100%{ opacity: 0; transform: translate(140px,80px);}
}
@keyframes olduser_powcic3{
	0%{transform: translate(0,0);}
	68%{opacity: 1; transform: translate(110px,-67px);}
	80%{ opacity: 0; transform: translate(130px, -78px);}
	100%{ opacity: 0; transform: translate(130px, -78px);}
}



 
.bottom-bg { height: 1237px; background: url(../images/bottom-bg.jpg) #1d2027 top center no-repeat;}
.bottom-bg .worthy {text-align: center; color: #fff;}
.bottom-bg .worthy h2,.review h2,.awards h2 { margin-bottom: 45px; font-size: 44px; font-weight: 300;}
.bottom-bg .worthy dl { display: inline-block; padding-top: 55px; font-size: 18px; background: url(../images/bottom-icon.png) no-repeat center top; }
.bottom-bg .worthy dl.center { margin: 0px 260px; background: url(../images/bottom-icon02.png) no-repeat center top;}
.bottom-bg .worthy dl.last { background: url(../images/bottom-icon03.png) no-repeat center top;}
.bottom-bg .worthy dl dt { margin-bottom: 10px; font-weight: 300; font-size: 40px; color: #6090fd;}

.review { margin-top: 140px; text-align: center;}
.review h2 { color: #fff;}
.review ul li {display: inline-block; width: 100px; height: 100px; margin: 0px 20px;}
.review ul li img {
  opacity: 0.5;
  -webkit-transform: scale(.7);
          transform: scale(.7);
          transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -webkit-transition: all .5s;
          transition: all .5s;
}
.review ul li.active img {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.review .content { margin-top: 40px;}
.review dl { display: none; height: 180px;}
.review dl.active {
  display: block;
}
.review dl dt { margin-bottom: 25px; font-size: 18px; color: #fff;}
.review dl dd { padding: 0px 100px; font-size: 14px; line-height: 20px; color: #848593;}

.review .change span {display: inline-block; margin: 0px 6px; width: 13px; height: 13px; cursor: pointer; border-radius: 50%; background: #303140;}
.review .change span.active { background: #3275fe;}

.awards { margin-top: 110px; text-align: center;}
.awards h2 { position: relative; display: inline-block; margin-top: 0px; color: #fff;}
.awards h2:after,.awards h2:before { position: absolute; content: ""; display: block; width: 37px; height: 65px; top: 0;}
.awards h2:after { left: -50px; background: url(../images/left-award.png);}
.awards h2:before { right: -50px; background: url(../images/right-award.png);}

/* footer */
.footer { 
  padding: 20px 0px;
  padding-bottom: 145px;
  color: #41444d;
  background: #121418;
}

.footer dd {
  font-size: 12px;
  line-height: 16px;
  text-align: left;
}
.footer p { text-align: center; padding-top: 26px; }

/* floatlayer */
.floatlayer { 
  position: fixed; 
  z-index: 10; 
  right: 0px;
  left: 0px;
  bottom: -130px; 
  width: 100%;
  min-width: 1200px; 
  height: 111px;  
  text-align: center;
  visibility: hidden; 
  background: url(../images/float-bg.png) top center no-repeat;
  -webkit-transition: all 0.4s; 
          transition: all 0.4s;  
}
.floatlayer.on { 
  bottom: 0px; 
  visibility: visible; 
}
.floatlayer img {
  display: block;
  margin: -43px 0px 0 57px;
}
.floatlayer .numbox { float: left; margin-top: 30px; font-size: 16px; color: #fff; width: 467px; text-align: center; }
.floatlayer .numbox  .nwrap { background: #21252e;}


.floatlayer.soldout img {margin: -43px 0px 0 19px;}
.floatlayer.soldout .numbox { width: 505px; font-size: 20px; color: #f7f8fa; line-height: 30px;}
.floatlayer.soldout .numbox span { font-size: 26px; color: #ffba00;}
.floatlayer.soldout .price { margin-right: 50px;}


.floatlayer .price { float: right; margin-top: 30px; margin-right: 110px;}
.floatlayer .price strong {padding-top: 10px;}
.floatlayer .price span {text-align: left;}
.floatlayer .price del{ left:122px ;}
.floatlayer .price .buybtn { display: inline-block; vertical-align: top; margin-left: 20px;}