@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: 700px; background: url(../images/banner.jpg) 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: 16px; text-align: left;}
.banner .right-message p { position: relative; font-size: 18px; color: #666976; letter-spacing: 12px;}
.banner .right-message h1 {margin-top: 20px; color: #fff; font-size: 44px; font-weight: 400;}
.banner .right-message .numbox { margin-top: 79px; }
.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: 40px;}
.banner .price .buybtn { margin-left: 20px;}
.banner.soldout h1 { font-size: 30px; line-height: 56px;}
.banner.soldout h1 span { color: #ff9c00;}
.banner.soldout .price { margin-top: 125px;}
.banner.soldout .right-message { margin-right: 30px;}
.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 { padding-top: 60px; height: 2523px; background: url(../images/main-bg.jpg) 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: 33px; font-weight: 500; color: #f7f8fa; font-size: 46px; 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;}

.feature01{ height: 720px;}
.feature01 .img-box .adva_computer{ position: absolute; top: 133px; left: -127px; z-index: 1;}
.adva_light{ width: 486px; height: 208px; background: url(../images/adva_box.png) top center no-repeat; background-size: cover; display: block; position: absolute; top: 225px; left: 43px; z-index: 3;}
.adva_corr{ width: 0; height: 186px; background: url(../images/adva_corr.png) left center no-repeat; -webkit-transform: translate(0px, 0); transform: translate(0px, 0); background-size: cover; display: block; position: absolute; top: 215px; left: 218px; z-index: 4;}
.adva_arrow{ width: 0; height: 112px; background: url(../images/adva_arrow.png) left center no-repeat; -webkit-transform: translate(0px, 0); transform: translate(0px, 0); background-size: cover; display: block; position: absolute; top: 228px; left: 190px; z-index: 3;}
.adva_profo{ width: 525px; height: 125px; margin: 32px 12px 0 0; background: url(../images/adva_areabg.png) top center no-repeat; background-size: cover; position:relative;}
.adva_message{ margin-top: 83px;}
.adva_profo:before{ width: 84px; height: 85px; content: ""; display: block; position: absolute; left: -84px; top: 25px; background-size: cover; z-index: 2;}
.adva_profo1:before{background: url(../images/adva_icon1.png) top center no-repeat; background-size: cover;}
.adva_profo2:before{background: url(../images/adva_icon2.png) top center no-repeat; background-size: cover;}
.adva_profo3:before{background: url(../images/adva_icon3.png) top center no-repeat; background-size: cover;}
.adva_profo ul{ width:440px; position: absolute; z-index: 2; left: 60px; top: 50%; transform: translateY(-50%);}
.adva_profo ul li{ font-size: 16px; color: #98989b; line-height:1.5; margin: 8px 0;}
.adva_profo ul li span{ color: #f3ae22; font-size: inherit;} 

.feature02{ height: 600px; margin-top: 140px;}
.feature02 .message h2 b{ font-size: inherit; font-weight: inherit; color: #f3ae22;}
.lost_area ul li{ width: 340px; display: inline-block; vertical-align: top; margin: 28px;}
.lost_img_area{ width: 210px; height: 168px; background-size: cover; margin: 0 auto; position: relative;}
.lost_area1{ width: 180px; height: 148px; background-size: cover; margin: 15px auto; -webkit-transform: translate(0px, 0); transform: translate(0px, 0); opacity: 1;}
.lost_area2{ width: 210px; height: 168px; background-size: cover; position: absolute; left: -190px; top: 0; z-index: 2; -webkit-transform: translate(0px, 0); transform: translate(0px, 0); opacity:0;}
.lost_area1_img1{background: url(../images/lost_area1_img1.png) top center no-repeat; background-size: cover; }
.lost_area1_img2{background: url(../images/lost_area1_img2.png) top center no-repeat; background-size: cover; }
.lost_area1_img2:before{ width: 0; height: 119px; content: ""; background: url(../images/lost_area1_arrow.png) left center no-repeat; background-size: cover; position: absolute; left: -15px; top: 25px; z-index: 3; animation: arrow 4s linear 1.2s alternate forwards; -webkit-animation: arrow 4s linear 1.2s alternate forwards; -moz-animation: arrow 4s linear 1.2s alternate forwards; -o-animation: arrow 4s linear 1.2s alternate forwards;}
.lost_area2_img1{background: url(../images/lost_area2_img1.png) top center no-repeat; background-size: cover; }
.lost_area2_img2{background: url(../images/lost_area2_img2.png) top center no-repeat; background-size: cover; }
.lost_area2_img2:before{ width: 39px; height: 39px; opacity: 0; content: ""; background: url(../images/lost_area2_loading.png) top center no-repeat; background-size: cover; position: absolute; left: 72px; top: 60px; z-index: 3; animation: spin 2.5s linear 1.7s alternate forwards; -webkit-animation: spin 2.5s linear 1.7s alternate forwards; -moz-animation: spin 2.5s linear 1.7s alternate forwards; -o-animation: spin 2.5s linear 1.7s alternate forwards;}
.lost_area3_img1{background: url(../images/lost_area3_img1.png) top center no-repeat; background-size: cover; }
.lost_area3_img2{background: url(../images/lost_area3_img2.png) top center no-repeat; background-size: cover; }
.lost_area3_img2:before{ width: 50px; height:40px; opacity: 0; content: ""; background: url(../images/lost_area3_virus.png) top center no-repeat; background-size: cover; position: absolute; left: 20px; top: 106px; z-index: 3; animation: enlarge 4s linear 1.8s alternate forwards; -webkit-animation: enlarge 4s linear 1.8s alternate forwards; -moz-animation: enlarge 4s linear 1.8s alternate forwards; -o-animation: enlarge 4s linear 1.8s alternate forwards;}
.lost_exclabox{ width: 260px; height: 145px; padding: 10px 15px 20px 15px; margin: 30px 0 0 30px; border-radius: 10px; border: 1px solid #383d4c; position: relative;}
.lost_exclabox:before{ width: 71px; height: 89px; content: ""; background: url(../images/lost_excla.png) top center no-repeat; background-size: cover; position: absolute; display: block; z-index: 2; left: -73px; bottom: 40px;}
.lost_exclabox h5{ font-size:20px; color: #ffc756; font-weight: 500;}
.lost_exclabox p{ font-size:16px; color: #98989b; line-height: 1.8; margin-top: 10px;}

.feature03{ height: 780px; margin-top: 180px;}
.feature03 .message h2 span{ font-size: inherit; font-weight: inherit; color: #3cc6ff;}
.lost_renew_clean{ position: relative;}
.lost_renew_clean:before{ width: 82px; height: 82px; content: ""; display: block; position: absolute; background-size: cover;}
.lost_renew_clean h5{ margin-bottom: 15px; font-size: 24px; color: #ececec; font-weight: 500;}
.lost_renew_clean p{ margin-top: 15px; font-size: 16px; color: #c4c5c5; line-height: 1.8;}
.lost_renew_line{ width: auto; height: 5px; background-size: cover;}
.lost_renew_clean1{ width: 385px; margin: 106px 0 0 96px; float: left;}
.lost_renew_clean1:before{ left: -92px; top: 0; background: url(../images/renew_icon1.png) top center no-repeat;}
.lost_renew_clean1 p{ width: 260px;}
.lost_renew_clean1 .lost_renew_line{width: 0; background: url(../images/renew_line1.png) left center no-repeat;}
.lost_renew_clean2{ width: 461px; position: absolute; left: 130px; right: 0; top: 440px; margin: auto;}
.lost_renew_clean2:before{ left: -92px; top: 0; background: url(../images/renew_icon2.png) top center no-repeat;}
.lost_renew_clean2 p{ width: 395px; }
.lost_renew_clean2 .lost_renew_line{width: 0; background: url(../images/renew_line2.png) left center no-repeat;}
.lost_renew_clean3{ width: 343px; float: right; text-align: right; margin: 106px 96px 0 0; }
.lost_renew_clean3:before{ right: -92px; top: 0; background: url(../images/renew_icon3.png) top center no-repeat;}
.lost_renew_clean3 p{ width: 290px; text-align: right; margin-left: calc(100% - 290px);}
.lost_renew_clean3 .lost_renew_line{width:0; background: url(../images/renew_line3.png) right center no-repeat; float: right;}
/* animation */
.adva_corr.on{ width:132px; transition-delay:1s; -webkit-transition-delay:1s;}
.adva_arrow.on{ width:78px; transition-delay:0.6s; -webkit-transition-delay:0.6s;}
.adva_light.on{ transition-delay:0.2s; -webkit-transition-delay:0.2s;}
.lost_area1.on{ opacity: 0; transition: opacity 1s ease-in-out 0.2s; -webkit-transition: opacity 1s ease-in-out 0.2s;}
.lost_area2.on{ opacity: 1; left: 0; transition: all 1s ease-in-out 0.2s; -webkit-transition: all 1s ease-in-out 0.2s;}
.lost_area1_img1.on,.lost_area1_img2.on,.lost_exclabox1.on{ transition-delay:0.2s; -webkit-transition-delay:0.2s;}
.lost_area2_img1.on,.lost_area2_img2.on,.lost_exclabox2.on{ transition-delay:0.3s; -webkit-transition-delay:0.3s;}
.lost_area3_img1.on,.lost_area3_img2.on,.lost_exclabox3.on{ transition-delay:0.4s; -webkit-transition-delay:0.4s;}
.lost_exclabox1.on{ transition-delay:0.6s; -webkit-transition-delay:0.6s;}
.lost_exclabox2.on{ transition-delay:0.7s; -webkit-transition-delay:0.7s;}
.lost_exclabox3.on{ transition-delay:0.8s; -webkit-transition-delay:0.8s;}

.lost_renew_clean.on .lost_renew_line{ width:100%; transition:width 0.5s ease-in-out; -webkit-transition:width 0.5s ease-in-out;}
.lost_renew_clean1.on .lost_renew_line{ transition-delay:0.3s; -webkit-transition-delay:0.3s;}
.lost_renew_clean2.on .lost_renew_line{ transition-delay:0.7s; -webkit-transition-delay:0.7s;}
.lost_renew_clean3.on .lost_renew_line{ transition-delay:0.5s; -webkit-transition-delay:0.5s;}
@keyframes arrow{
0%{ width: 0px;}
15%{ width: 179px;}
50%{ width: 179px;}
51%{ width: 0px;}
66%{ width: 179px;}
100%{ width: 179px;}
}

@keyframes spin{
0%{ opacity: 0; transform: rotate(0);}
1%{ opacity: 1; transform: rotate(0);}
100%{ opacity: 1; transform: rotate(360deg);}
}

@keyframes enlarge{
0%{ opacity: 0; transform: scale(0.8) translate(15px,-15px);}
15%{ opacity: 1; transform: scale(1) translate(0,0);}
50%{ opacity: 1; transform: scale(1) translate(0,0);}
51%{ opacity: 0; transform: scale(0.8) translate(15px,-15px);}
66%{ opacity: 1; transform: scale(1) translate(0,0);}
100%{ opacity: 1; transform: scale(1) translate(0,0);}
}


 
.bottom-bg { height: 1226px; background: url(../images/bottom-bg.jpg) no-repeat center;}
.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: #23a0ff;}

.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;}