@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 1000px;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  font-family: "Lato",Arial,Helvetica,sans-serif;
  font-weight: 400;
  outline: 0;
  vertical-align: baseline;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: #000;
  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; }
.wrapper {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  margin: 0 auto;
  zoom: 1;
}
.fl { float: left; }
.fr { float: right; }
.all-icons { 
  display: inline-block;
  vertical-align: middle;
  text-indent: -9999px;
  background: url(../images/all_icons.png) no-repeat 0 0;
}

/* banner */
.banner {
  display: inline-block;
  width: 100%;
  height: 649px;
}
.banner .container {
  display: inline-block;
  width: 100%;
  height: 650px;
  background: #f0e6cb url(../images/bg.jpg) top center no-repeat;
  background-size: cover;
}
.banner .logo {
  display: block;
  padding-top: 29px;
  width: 46px;
  height: 15px;
}
.banner .title {
  height: 132px;
  margin-top: -28px;
  text-indent: -9999px;
  background: url(../images/title-year.png) center center no-repeat;
}
.banner .title.prombn {
  background: url("../images/title-year_1.png") center center no-repeat;
}
.banner .activity {
  display: inline-block;
  margin: 15px auto 0;
  margin-left: -15px;
  width: 1030px;
  height: 315px;
  background: url(../images/activity-bg.png) center center no-repeat;
}
.banner .activity .steps { 
  display: block;
  float: left;
  height: 288px; 
}
.banner .activity .mainstep {
  width: 600px;
  margin-left: 30px;
  font-weight: 700;
  text-align: center;
}
.banner .activity .mainstep h2,
.banner .activity .mainstep h2+p { text-indent: -9999px; }
.banner .activity .focus {
  position: relative;
  display: block;
  margin: 0 auto;
  height: 130px;
  width: 500px;
}
.banner .activity .reduce {
  position: relative;
  display: block;
  float: right;
  width: 277px;
  height: 127px;
}
.banner .activity .ghost {
  position: absolute;
  display: block;
  top: 8px;
  left: 22px;
  width: 253px;
  height: 108px;
  background:url(../images/gift-ghost.png) center top no-repeat;
}
.banner .activity .num {
  display: inline-block;
  position: absolute;
  top: 48px;
  left: 160px;
  z-index: 2;
  width: 45px;
  height: 46px;
  background-image: url(../images/reduce.png);
  background-repeat: no-repeat;
}
.banner .activity .reduce1 .num { background-position: 0 0; }
.banner .activity .reduce2 .num { background-position: 0 -46px; }
.banner .activity .notice {
  display: inline-block;
  margin-top: 4px;
  color: #3c3c3c;
  font-size: 16px;
  font-weight: 700;
}
.banner .activity .notice i { color: #000; }
.banner .activity .progress {
  position: relative;
  display: block;
  margin: 13px auto 0;
  width: 500px;
  height: 60px;
}
.banner .activity .counter {
  position: absolute;
  z-index: 10;
  top: -6px;
  left: 0;
  display: block;
  width: 31px;
  height: 31px;
  background: url(../images/progress-point.png) left top no-repeat;
}
.banner .activity .counter span,
.banner .activity .counter em {
  display: inline-block;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.banner .activity .counter span {
  text-shadow: 0 2px 1px rgba(160, 3, 29, .98);
}
.banner .activity .counter em {
  position: absolute;
  top: 4px;
  left: 5px;
  font-style: normal;
}
.banner .activity .counter.positioned,
.banner .activity .progressbar.positioned {
  -webkit-transition: .3s ease-in-out;
          transition: .3s ease-in-out
}
.banner .activity .progress .bar-mask {
  position: relative;
  margin: 0 auto;
  height: 20px;
  width: 472px;
  overflow: hidden;
  border-radius: 10px;
}
.banner .activity .progressbar {
  position: absolute;
  top: 5px;
  right: 1px;
  display: block;
  width: 490px;
  height: 5px;
  border-radius: 2px;
  background-color: #be0120;
  background-image: -webkit-linear-gradient(90deg, #ef0027 0%, #ef0027 0%, #be0120 100%);
  background-image: -ms-linear-gradient(90deg, #ef0027 0%, #ef0027 0%, #be0120 100%);
}

.banner .activity .progress .count {
  float: right;
  margin-top: 14px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  color: #545243;
}
.banner .activity .progress .count i { font-size: 14px; }
.banner .activity .steps.others { 
  width: 220px; 
  text-align: center;
  text-indent: -9999px;
}
.banner .activity .steps.others:last-child { width: 170px; }
.showcase {
  display: block;
  margin-top: -15px;
  width: 1000px;
  height: 150px;
}
.showcase .details {
  position: relative;
  float: left;
  margin-left: 60px;
  width: 654px;
  height: 136px;
  color: #fff;
  background: url(../images/showcase.png) right top no-repeat;
}
.showcase .details .imgcase {
  position: absolute;
  top: 15px;
  left: -70px;
}
.showcase .details > dl {
  float: left;
  margin-top: 53px;
  margin-left: 82px;
  width: 274px;
}
.showcase .details > dl dt { 
  margin-bottom: 4px;
  font-size: 18px; 
}
.showcase .details > dl dd strong { font-size: 18px; }
.showcase .details > ul {
  float: left;
  margin-left: 25px;
  margin-top: 54px;
  width: 260px;
  font-size: 16px;
}
.showcase .details > ul li { 
  margin-bottom: 10px; 
  cursor: pointer;
}
.showcase .details > ul li strong {
  display: inline-block;
  font-weight: 600;
  width: 180px;
  font-size: 16px;
  font-size: 15px \0;
  text-indent: 10px;
}
.showcase .details > ul li span {
  display: inline-block;
  float: right;
  font-size: 18px;
  font-weight: 400;
}
.showcase .details > ul li del { 
  font-size: 14px;
  color: #ffb1b1;
}
.showcase .checkout { 
  float: right;
  margin-top: 2px;
  width: 282px; 
  color: #000;
  text-align: center;
}
.showcase .checkout dl dt strong {
  display: inline-block;
  float: left;
  margin-left: 30px;
  font-size: 48px;
  font-weight: 600;
  line-height: 46px;
  color: #fff5b2;
}
.showcase .checkout dl dt span {
  display: inline-block;
  float: left;
  margin-left: 10px;
  width: 75px;
  height: 40px;
}
.showcase .checkout dl dt span del {
  position: relative;
  display: inline-block;
  min-width: 55px;
  height: 20px;
  font-weight: 600;
  line-height: 20px;
  font-size: 18px;
  color: #efa0a0;
  text-decoration: none;
  text-decoration: line-through\0;
}
.showcase .checkout dl dt span del:after {
  content: '';
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 0;
  width: 55px;
  height: 12px;
  background: url("../images/del.png") center no-repeat;
}
.showcase .checkout dl dt span em {
  display: block;
  width: 73px;
  height: 20px;
  text-indent: -9999px;
  background: url(../images/tag-discount.png) center center no-repeat;
}
.showcase .checkout dl dd:last-child {
  font-weight: 700;
  font-style: italic; 
  color: #ffd3c8;
}

/* butbtn */
.buybtn {
  position: relative;
  display: block;
  color: #2c0406;
  background: url(../images/buybtn.png) 0 0 no-repeat;
}
.activebtn {
  display: inline-block;
  margin: 10px 0 6px;
  width: 273px;
  height: 59px;
  line-height: 59px;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  box-shadow: 0 12px 24px 2.4px rgba(138, 19, 19, 1);
  
}
.activebtn:hover { background-position: 0 -59px;}

.activesmall {
  margin: 4px auto;
  width: 180px;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 19px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(139, 0, 19, 1);
  background-position: 0 -118px;
  box-shadow: 0 5px 15px .45px rgba(137, 35, 0, 0.5);
}
.activesmall:hover { background-position: 0 -156px; }

/* payments */
.paymanets {
  height: 102px;
  margin-top: 37px;
}
.paymanets dl {
  width: 497px;
  height: 102px;
  padding: 17px 0 0 10px;
  text-align: left;
  color: #c9b5b4;
  background: rgba(227,198,198,.3);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.paymanets dl dt {
  font-size: 14px;
  color: #a18b8a;
}
.paymanets dl dd {
  font-size: 12px;
  line-height: 22px;
}
.paymanets dl dd h3 {
  padding-left: 5px;
  font-weight: 400;
  color: #a18b8a;
}
.paymanets dl dd p {
  margin-top: 6px;
  padding-left: 7px;
  line-height: 18px;
}
.paymanets dl.fr {
  padding: 17px 0 0 17px;
}
.paymanets dl.fr dd {
  margin-top: 10px;
}

/* awards */
.awards {
  padding-bottom: 60px;
  position: relative;
  display: block;
  margin-top: 60px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.awards h2 {
  font-size: 30px;
  line-height: 24px;
  color: #484848;
}
.awards img {
  display: block;
  margin-top: 44px;
  width: 1000px;
}

/* benfits */
.benfits {
  margin-top: 35px;
}
.benfits h2 {
  display: inline-block;
  margin-bottom: 15px;
  padding: 10px 0;
  width: 100%;
  color: #000;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
}
.benfits .snapshoot {
  width: 100%;
  height: 268px;
  text-align: center;
  border-bottom: 2px #2c2c2c solid;
}
.benfits .benfits-list { margin-top: 20px; }
.benfits .list {
  margin: 10px 0;
  width: 455px;
  height: 124px;
}
.benfits .list.fr { width: 485px; }
.benfits .list img { 
  display: block;
  float: left;
  width: 71px; 
}
.benfits .list dl {
  float: right;
  margin-top: 3px;
  width: 384px;
  line-height: 22px;
}
.benfits .list.fr dl { width: 414px; }
.benfits .list dl span {
  display: block;
  margin-left: -20px;
  font-size: 12px;
  -webkit-transform: scale(.9,.9);
          transform: scale(.9,.9);
}
.benfits .list dl dt {
  margin-bottom: 6px;
  padding-bottom: 5px;
  font-size: 18px;
  text-indent: 28px;
  font-weight: 600;
}
.benfits .list dl dd { padding-left: 28px; }
.benfits .list dt i {
  display: inline-block;
  margin-left: 2px;
  margin-top: -8px;
  width: 72px;
  height: 20px;
  vertical-align: middle;
  text-indent: -9999px;
  background: url(../images/tag.png) no-repeat;
}
.benfits .morelink {
  float: right;
  display: block;
  margin: 15px 140px 0 0;
  width: 238px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px #373535 solid;
  border-radius: 15px;
  -webkit-transition: all .3s;
          transition: all .3s;
}
.benfits .morelink:hover {
  color: #eb2629;
  border: 1px #eb2629 solid;
}

/* gift-pack */
.gift-pack {
  margin: 100px auto 0;
  width: 1000px;
  height: 298px;
  background: url(../images/gift-year-bg.png) center center no-repeat;
}
.gift-pack.prombn {
  background: url("../images/gift-year-bg_1.png") center center no-repeat;
}
.gift-pack h2 { text-indent: -9999px; }
.gift-pack dl {
  float: left;
  margin: 66px 0 0 84px;
  width: 362px;
}
.gift-pack dl dt {
  float: left;
  width: 170px;
}
.gift-pack dl dd span { display: block; }
.gift-pack dl dd.price del,
.gift-pack dl dd { color: #4a4a4a; }
.gift-pack dl dd strong,
.gift-pack dl dd.price { color: #000; }
.gift-pack dl dd strong { 
  font-size: 18px; 
  font-weight: 600;
}
.gift-pack dl dd.price { 
  margin-bottom: 15px; 
  font-weight: 700;
}
.gift-pack dl dd.price del { font-weight: 400; }
.gift-pack dl dd.price strong { color: #ee0027; }
/* midcart */
.midcart {
  width: 100%;
}
.midcart .container {
  height: 273px;
  background: url(../images/middle-bg.png) center no-repeat;
  background-size: cover;
}
.midcart .showcase {
  margin: 0 auto;
  padding-top: 61px;
}
.midcart p {
  display: block;
  margin-top: 150px;
  margin-left: 260px;
  color: #ffcdcd;
  font-size: 14px;
}
.midcart p i {
  margin-right: 4px;
  width: 14px;
  height: 17px;
  background-position: -31px -22px;
}
.midcart .checkout { margin-top: 25px;}

/* reviews */
.review {
  margin: 90px 0 60px 0;
}
.review .content {
  position: relative;
  margin-top: 60px;
  height: 180px;
}
.review .content h3 { 
  margin-bottom: 10px;
  font-size: 36px; 
  text-align: center;
}
.review .content dl { 
  text-align: center;
  display: none; 
}
.review .content h4 {
  margin-top: 35px;
  font-size: 20px;
  font-weight: 600;
}
.review .content dd {
  margin-bottom: 12px;
  color: #383838;
  line-height: 24px;
  font-size: 15px;
}
.review .content .active { display: block; }
.review ul.users li {
  margin-top: 40px;
  float: left;
  width: 20%;
  height: 210px;
  text-align: center;
  box-sizing: border-box;
}
.review ul.users li .pic {
  padding-bottom: 26px;
  width: 100%;
  height: 100px;
  cursor: pointer;
  border-bottom: 3px solid #e8e9ed;
}
.review ul.users li img {
  display: inline-block;
  margin-top: 35px;
  width: 65px;
  height: 65px;
  vertical-align: middle;
  -webkit-transition: all ease .2s;
          transition: all ease .2s;
}
.review ul.users li p {
  position: relative;
  display: none;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: all ease-out .3s;
          transition: all ease-out .3s;
}
.review ul.users li p span { display: block; }
.review ul.users li b {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #a3a3a3;
  font-weight: 400;
}
.review ul.users li.current img {
  margin-top: 0;
  width: 100px;
  height: 100px;
}
.review ul.users li.current p { display: block; }
.review ul.users li.current p:after {
  content:'';
  position: absolute;
  top: -29px;
  left: 50%;
  margin-left: -58px;
  width: 117px;
  height: 3px;
  background: #ff4e00;
}

/* compar-tab */
.compar-tab { 
  display: block;
  margin: 30px auto 10px; 
}
.compar-tab table {
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
.compar-tab table tr th { vertical-align: middle; }
.compar-tab table th {
  height: 130px;
  vertical-align: middle;
  font-weight: 700;
  border-top: 1px #dcdcdc solid;
  border-bottom: 1px #dcdcdc solid;
} 
.compar-tab table thead th { height: 65px; }
.compar-tab table th.text {
  text-align: left;
  font-size: 20px;
  color: #393649;
}
.compar-tab table thead th.item-pro {
  font-size: 16px;
  color: #fff;
  background: #ef0027;
}
.compar-tab table tfoot th.item-pro dt { 
  font-size: 14px; 
  font-weight: 700;
  color: #393649;
}
.compar-tab table tfoot th.item-pro dt strong { font-size: 22px; }
.compar-tab table tfoot th.item-pro dt del { font-weight: 400; }
.compar-tab table tr { text-align: center; }
.compar-tab table tr td {
  height: 40px;
  vertical-align: middle;
  border-bottom: 1px #dcdcdc solid;
}
.compar-tab table tr td.text { 
  width: 520px; 
  color: #393649;
  font-weight: 600;
  text-align: left;
  font-size: 14px;
}
.compar-tab table tr td.icons { 
  width: 50px; 
  text-align: center;
}
.compar-tab table tfoot th {
  font-weight: 700;
  font-size: 16px;
  color: #393649;
  vertical-align: middle;
}
.compar-tab table .item-pro { 
  width: 230px; 
}
.compar-tab table .item-pro img {
  margin: 18px auto 0;
}.compar-tab table .item-pro {  background: #fbf7f7; }
.compar-tab table .item-p { display: inline-block; }
.compar-tab table tr td img { display: inline-block; vertical-align: middle; margin: 0 5px;}
.compar-tab table tr td span { font-size: 12px; color: #ff780a; font-weight: 700; }
.compar-tab table tr td span i { display: inline-block; vertical-align: middle; width: 7px; height: 9px; background: url(../images/top.png);}
.compar-tab table thead th.item-pro dl dt { font-size: 14px; }
.compar-tab table tfoot th.item-pro dl dd.last { 
  font-size: 14px;
  font-style: italic;
}
.compar-tab table .space {
  width: 10px;
  border-top: 1px #fff solid;
  border-bottom: 1px #fff solid;
} 
.compar-tab table tr td > span {
  width: 19px;
  height: 18px;
  background-position: 0 -40px;
}
.compar-tab table tr td > span.solid { background-position: -40px -40px; }

/* annotation */
.annotation {
  margin: 20px auto;
  font-size: 12px;
}
.annotation dt { display: inline-block; }

/* footer */
.footer .copyright {
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

/* float */
.float {
  position: fixed;
  z-index: 0;
  top: -80px;
  right: 0;
  width: 280px;
  height: 60px;
  background: url("../images/float-bg.png") center no-repeat;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
}
.float.on { top: 30px;}
.float > img {
  margin: 16px 0 0 20px;
  width: 31px;
  height: 31px;
}
.float > img:hover { cursor: pointer; }
.float > div { margin-top: 12px; }
.float > div p {
  margin-left: 10px;
  font-weight: 600;
  color: #e1e1e1;
}
.float > div p strong { color: #fff; }