@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 1100px;
    font-size: 14px;
    line-height: 1.4;
    color: #292b2f;
    font-weight: 500;
    font-family: "Montserrat", 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: #292b2f;
    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;
}

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

.all-icons {
    display: inline-block;
    text-indent: -9999px;
    background: url(../img/all-icons.png) 0 0 no-repeat;
}

/* banner */
.banner {
    position: relative;
    height: 824px;
    text-align: center;
    background: url('../img/bg.png') center top no-repeat;
}

.banner .wrapper {
    height: inherit;
}

.banner .snow {
    display: block;
    position: absolute;
    bottom: 106px;
    left: -65px;
    z-index: 109;
    width: 1108px;
    height: 102px;
    text-indent: -9999px;
    background: url(../img/snow.png) no-repeat;
}

.logo {
    display: block;
    position: absolute;
    top: 24px;
    left: 64px;
    width: 33px;
    height: 12px;
    text-indent: -9999px;
    background: url(../img/logo.png) no-repeat;
}

.banner .title {
    height: 138px;
    text-indent: -9999px;
    background: url(../img/title_xmas.png) center bottom no-repeat;
}

.banner .offer {
    position: relative;
    float: left;
    margin: 55px 0 0 130px;
    width: 376px;
    height: 430px;
    border-radius: 3px;
    background: #fff;
}

.banner .offer:before {
    content: '';
    display: none;
    position: absolute;
    top: -5px;
    left: -6px;
    width: 96px;
    height: 90px;
    background: url(../img/banner-discount.png) 0 -190px no-repeat;
}

.banner .big:before {
    display: block;
    top: -6px;
    left: -6px;
    width: 101px;
    height: 95px;
    background-position: 0 0;
}

.banner.sold .offer:before {
    display: block;
}

.banner.sold .big:before {
    z-index: 102;
    background-position: 0 -95px;
}

.banner .big {
    margin: 19px 0 0 42px;
    width: 441px;
    height: 501px;
    box-shadow: 6.691px 7.431px 34px 0px rgba(48, 105, 134, 0.72);
}

.banner.sold .big {
    box-shadow: 6.691px 7.431px 34px 0px rgba(2, 2, 2, 0.72);
}

.banner .top-wrap {
    margin-bottom: 6px;
    width: 100%;
    height: 102px;
    background: #ffeecb;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.banner h2 {
    display: none !important;
    padding: 24px 0 28px;
    color: #25252b;
    font-size: 24px;
    font-weight: 600;
}

.banner h2[data-type="normal"] {
    display: none !important;
}

.banner h2[data-type="xr"] {
    display: block !important;
}

.banner .big h2 {
    padding: 18px 0 12px;
    text-shadow: 2px 2px 2px #fff;
}

.countdown {
    color: #35353f;
    font-size: 16px;
}

.banner.sold .countdown span {
    color: #35353f;
}

.gifts .countdown,
.footbuy .countdown {
    color: #5e616b;
    font-size: 12px;
    font-weight: 600;
}

.footbuy .countdown {
    margin-top: 12px;
}

.countdown i {
    display: inline-block;
    margin-top: -4px;
    margin-right: 10px;
    width: 27px;
    height: 26px;
    text-indent: -9999px;
    vertical-align: middle;
    background: url(../img/time.png) no-repeat;
    background-size: 27px;
}

.countdown span {
    color: #ea2d2d;
    font-weight: 600;
}

.gifts .countdown span,
.footbuy .countdown span {
    font-size: 14px;
}

.footbuy .countdown span {
    color: #292b2f;
}

.countdown b {
    display: inline-block;
    width: 30px;
    font-weight: 600;
    text-align: center;
}

.gifts .countdown b,
.footbuy .countdown b {
    width: 26px;
}

.imgbox {
    position: relative;
    width: 100%;
    height: 190px;
}

.gifts .imgbox {
    width: 362px;
    height: inherit;
}

.gifts.sold .imgbox {
    width: 630px;
}

.imgbox>img {
    display: block;
    margin: -11px 0 0 70px;
}

.gifts .imgbox>img {
    margin: 65px 0 0 424px;
    display: none;
}

.footbuy .imgbox>img {
    margin: 0px 0 0px 108px;
}

.banner .big .imgbox>img {
    margin: -26px 0 0 56px;
}

.imgbox>img.sd,
.imgbox>img.isu {
    position: absolute;
    right: 68px;
    bottom: 12px;
    z-index: 2;
    margin: 0px;
    width: 116px;
}

.imgbox>img.isu {
    right: 132px;
    z-index: 1;
}

.gifts .imgbox>img.sd,
.gifts .imgbox>img.isu,
.gifts.sold .imgbox>img {
    display: block;
}

.gifts .imgbox>img.sd,
.gifts .imgbox>img.isu {
    bottom: 52px;
    right: auto;
    left: 35px;
    width: 174px;
}

.gifts .imgbox>img.sd {
    left: 147px;
}

.gifts.sold .imgbox>img.sd,
.gifts.sold .imgbox>img.isu {
    bottom: 45px;
    left: 77px;
}

.gifts.sold .imgbox>img.isu {
    left: 189px;
}

.footbuy .imgbox>img.sd,
.footbuy .imgbox>img.isu {
    bottom: 10px;
    right: auto;
    left: 310px;
    width: 126px;
}

.footbuy .imgbox>img.isu {
    left: 240px;
}

.imgbox:before,
.imgbox:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 3;
    width: 154px;
    height: 108px;
    background: url(../img/gifts-2021.png) no-repeat;
    background-size: 154px;
}

.imgbox:after {
    bottom: 10px;
    left: 114px;
    width: 45px;
    height: 51px;
    background: url(../img/box-tag.png) no-repeat;
}

.banner .big .imgbox:after {
    left: 102px;
}

.footbuy .imgbox:after {
    left: 150px;
}

.gifts .imgbox:before {
    top: 58px;
    left: 58px;
    width: 249px;
    height: 164px;
    background-size: 249px;
}

.footbuy .imgbox:before {
    top: 59px;
    left: 258px;
    width: 168px;
    height: 118px;
    background-size: 168px;
}

.gifts.sold .imgbox:before {
    top: 65px;
    left: 100px;
}

.banner .imgbox:before,
.footbuy.sold .imgbox:before,
.footbuy.sold .imgbox>img.sd,
.footbuy.sold .imgbox>img.isu,
.gifts .imgbox:after {
    display: none;
}

.banner .big .imgbox:before {
    display: block;
    top: 67px;
    right: 76px;
}

.banner.sold .big .imgbox>img,
.banner.sold .imgbox:before,
.gifts.sold .imgbox:before,
.gifts.sold .imgbox>img.sd,
.gifts.sold .imgbox>img.isu {
    filter: gray;
    -webkit-filter: grayscale(1);
}

.payment {
    position: relative;
    z-index: 5;
    padding-bottom: 25px;
    margin: 70px auto 0;
    text-align: center;
    border-bottom: 1px solid #d9dfe9;
}

/* price */
.price {
    color: #25252b;
    text-align: center;
}

.gifts .price {
    margin: 96px 60px 0 0;
}

.gifts.sold .price {
    margin: 96px 102px 0 0;
}

.footbuy .price {
    margin: 76px 124px 0 0px;
}

.banner .price {
    padding-right: 20px;
    text-align: right;
}

.price del {
    display: inline-block;
    padding-left: 8px;
    color: #838395;
    font-size: 18px;
    font-weight: 600;
}

.footbuy .price del {
    color: #a8c9e2;
}

.banner .big .price del {
    font-size: 22px;
}

.price strong {
    font-size: 48px;
    font-weight: 600;
}

.footbuy .price strong {
    color: #fff;
}

.price strong small {
    font-size: 18px;
}

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

.banner .big .price strong small {
    font-size: 22px;
}

/* buybtn */
.buybtn {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 276px;
    height: 56px;
    color: #1d1305;
    line-height: 56px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    text-align: center;
    background: #f96f00;
    text-shadow: 0px 2px 0px rgba(251, 237, 11, 0.75);
    background: -webkit-linear-gradient(#fdc000 1%, #ff9600 100%);
    background: linear-gradient(#fdc000 1%, #ff9600 100%);
    transition: all 0.3s ease;
}

.buybtn.empty {
    width: 272px;
    height: 52px;
    color: #868695;
    line-height: 52px;
    background: #fff;
    text-shadow: none;
    border: 2px solid #868695;
    transition: all 0s ease;
}

.banner .buybtn {
    margin-top: 34px;
}

.banner.sold .big .buybtn {
    color: #212121;
    text-shadow: none;
    background: #7f7f7f;
}

.banner .buybtn.empty {
    margin-top: 22px;
}

.gifts .buybtn {
    margin: 0px auto 20px;
    width: 248px;
    height: 54px;
    line-height: 54px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 2px;
}

.buybtn:hover,
.buybtn.empty:hover {
    color: #1d1305;
    background: #fdc000;
    background: -webkit-linear-gradient(#ff9600 1%, #fdc000 100%);
    background: linear-gradient(#ff9600 1%, #fdc000 100%);
}

.buybtn.empty:hover {
    width: 276px;
    height: 56px;
    border: 0;
    line-height: 56px;
    text-shadow: 0px 2px 0px rgba(251, 237, 11, 0.75);
}

/* mask */
.mask {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 101;
    width: inherit;
    height: inherit;
    background: url(../img/mask-bg.png) repeat;
}

.banner .mask {
    top: 0px;
    left: 0px;
    width: 441px;
    height: 501px;
    border-radius: 3px;
}

.gifts .mask {
    top: 67px;
    left: 78px;
    width: 284px;
    height: 166px;
    background: url(../img/gifts-img-sold.png) repeat;
}

.sold-word {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 102;
    width: 295px;
    height: 94px;
    text-indent: -9999px;
    background: url(../img/sold-word.png) no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: scale(3);
    transition: opacity 0.6s, transform 0.6s ease;
}

.banner .sold-word {
    top: 150px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.gifts .sold-word {
    top: 46px;
    left: 40px;
    width: 210px;
    height: 70px;
    background-size: 210px;
}

.sold-word.on {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* feature */
.feature {
    position: relative;
    margin-top: -24px;
    height: 725px;
    background: url('../img/qieone.png') center top no-repeat;
}

.feature h2 {
    position: relative;
    padding: 54px 0 60px;
    font-size: 34px;
    text-align: center;
}

.feature h2:before,
.feature h2:after,
.table-center:before,
.table-center:after {
    content: '';
    display: block;
    position: absolute;
    top: 54px;
    width: 67px;
    height: 54px;
    background: url('../img/feature-icon.png') 0 0 no-repeat;
}

.feature h2:before {
    left: 0px;
}

.table-center:before {
    top: -6px;
    left: 40px;
}

.feature h2:after,
.table-center:after {
    right: 0px;
    background-position: 0 -54px;
}

.table-center:after {
    top: -6px;
    right: 40px;
}

.feature .computer {
    position: relative;
}

.feature .computer:before,
.feature .computer:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: -70px;
    z-index: 1;
    width: 743px;
    height: 427px;
    background: url('../img/computer.png') no-repeat;
}

.feature .computer:after {
    z-index: 0;
    top: -7px;
    left: -198px;
    width: 357px;
    height: 414px;
    background: url('../img/treen.png') no-repeat;
}

.feature .screen {
    position: relative;
    z-index: 2;
    width: 562px;
    height: 362px;
    margin: 27px 0 0 21px;
    overflow: hidden;
}

.feature .computer ul {
    width: 2800px;
}

.feature .computer ul li {
    display: block;
    float: left;
    width: 562px;
    height: 362px;
}

.feature .computer ul li > img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.feature-message {
    position: relative;
    margin-top: 0px;
    width: 382px;
}

.feature-message li {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    height: 98px;
    color: #5e616b;
    line-height: 24px;
    font-weight: 600;
    cursor: pointer;
}

.feature-message li h3 {
    color: #ff6102;
    font-size: 16px;
}

.feature-message li p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: #5e616b;
    font-weight: 600;
}

.feature-tag {
    display: block;
    position: absolute;
    top: -10px;
    left: -58px;
    z-index: 0;
    width: 454px;
    height: 120px;
    background: url('../img/feature-tag.png') no-repeat;
}

/* gifts */
.gifts {
    height: 467px;
    background: url(../img/gifts_bg_xmas.png) center top no-repeat;
}

.gifts .wrapper {
    padding-top: 134px;
}

.gifts h2 {
    position: absolute;
    top: 36px;
    left: -3px;
    z-index: 2;
    width: 1121px;
    height: 218px;
    background: url(../img/gifts_title_bg_xmas.png) center top no-repeat;
}

.gifts h2 span {
    display: block;
    position: absolute;
    top: 30px;
    left: 150px;
    width: 797px;
    height: 36px;
    text-indent: -9999px;
    background: url(../img/gifts_title_xmas.png) 0 0 no-repeat;
}

/* .gifts.sold h2 span {
    left: 350px;
    width: 410px;
    height: 43px;
    background-position: 0 -42px;
} */

.gifts h3 {
    display: none;
    position: absolute;
    top: 152px;
    left: 0px;
    z-index: 3;
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.gifts.sold h3 {
    display: block;
}

.gifts-offer {
    height: 277px;
    background: #fff;
    box-shadow: 14.766px 11.957px 34.2px 3.8px rgba(62, 75, 146, 0.72);
}

.gifts-offer .all-icons {
    margin-right: 14px;
    width: 16px;
    height: 14px;
    background-position: 0 0;
}

.gifts-list {
    padding-top: 50px;
}

.gifts.sold .gifts-list {
    display: none;
}

.gifts-list dl {
    margin-bottom: 24px;
}

.gifts-list dt {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
}

.gifts-list dd {
    padding-left: 40px;
    color: #5e616b;
    font-weight: 600;
}

.review {
    height: 463px;
    background: url(../img/review-bg.png) center top no-repeat;
}

.review .wrapper {
    padding-top: 90px;
}

.review-wrap {
    position: relative;
    height: 190px;
    background: #b1dbf2;
    background: rgba(158, 210, 239, .8);
    border: 1px solid rgba(51, 145, 197, .8);
}

.review-wrap:before {
    content: '';
    display: block;
    position: absolute;
    top: -22px;
    left: 12px;
    width: 65px;
    height: 57px;
    background: url(../img/comma.png) no-repeat;
}

.review-list {
    display: none;
    position: relative;
    width: 100%;
    text-align: center;
}

.review-list h3 {
    padding: 18px 0 2px;
    font-size: 22px;
    font-weight: 600;
}

.review-list p {
    padding: 0 64px;
    line-height: 24px;
}

.review-icon {
    font-size: 0px;
    text-align: center;
}

.review-icon li {
    display: inline-block;
    position: relative;
    margin: 35px 0px 0px;
    width: 275px;
    cursor: pointer;
}

.review-icon li img {
    display: block;
    margin: 0 auto;
    opacity: 0.3;
    transform: scale(.7);
    transition: opacity .6s, transform .6s;
}

.review-icon li h4 {
    padding-top: 12px;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.3;
    visibility: hidden;
    transition: opacity .6s;
}

.review-icon li.on:before,
.review-icon li.on:after {
    content: '';
    display: block;
    position: absolute;
    top: -35px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(51, 145, 197, .8);
}

.review-icon li.on:after {
    top: -36px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #acd8f1;
}

.review-icon li.on img {
    opacity: 1;
    transform: scale(1);
}

.review-icon li.on h4 {
    opacity: 1;
    visibility: visible;
}


.tablebox {
    height: 711px;
    background: url(../img/compare-bg.png) center top no-repeat;
}

.tablebox .wrapper {
    padding-top: 30px;
}

.table-title {
    height: 66px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.table-title h3.pro {
    margin-top: 0px;
    width: 279px;
    height: 66px;
    background: #f3720a;
    border-radius: 20px 20px 0px 0px;
    text-align: center;
    font-size: 24px;
    font-family: Montserrat;
    font-weight: bold;
    color: #ffffff;
    line-height: 66px;
}

.table-title div {
    flex: 1;
    text-align: center;
}

.table-title h3 {
    width: 239px;
    margin-top: 16px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background: #434a57;
    border-radius: 20px 20px 0px 0px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

.table-center {
    position: relative;
    font-size: 28px;
    line-height: 30px;
    font-weight: 600;
}

.tablebox table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    background: #ffffff;
    border-color: #d6d6d6;
    box-shadow: 10px 6px 19px 2px rgba(68, 134, 173, 0.35);
}

.tablebox table tr {
    padding: 0;
    margin: 0;
    text-align: center;
}

.tablebox table tr td {
    height: 50px;
    line-height: 50px;
    border-top: 0;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 0;
    text-align: center;
}

.tablebox table tr.last td {
    border-bottom: 1px solid #fff;
}

.tablebox table tr td.free {
    width: 238px;
}

.tablebox table tr td.text {
    padding: 0 54px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
}

.tablebox table tr td.pro {
    width: 278px;
    border-right: 0;
}

.tablebox table tr td i {
    width: 26px;
    height: 25px;
    vertical-align: middle;
    background-position: 0 -15px;
}

.tablebox table tr td i.grayfork.right {
    background-position: 0 -40px;
}

.tablebox table tr td i.yellowfork {
    background-position: 0 -65px;
}

.footbuy {
    position: relative;
    height: 259px;
    background: url(../img/footbuy-bg.jpg) center bottom no-repeat;
}

.footbuy h2 {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1065px;
    height: 60px;
    text-indent: -9999px;
    background: url(../img/footbuy_title_xmas.png) 0px 0px no-repeat;
}

.footbuy.sold h2 {
    width: 700px;
    height: 64px;
    background-position: 0px -60px;
}

.footbuy .imgbox {
    margin: 50px 0 16px;
    width: 540px;
}

.footbuy .discount {
    display: block;
    position: absolute;
    top: 0px;
    left: 280px;
    z-index: 6;
    width: 160px;
    height: 54px;
    text-indent: -9999px;
    background: url(../img/discount.png) 0px 0px no-repeat;
}

.footbuy.sold .discount {
    top: 0px;
    left: 250px;
    background-position: 0 -54px;
}

.service {
    padding-top: 20px;
    height: 190px;
}

.service dl {
    float: left;
    width: 33.33%;
    text-align: center;
}

.service dl.last {
    margin-right: 0;
}

.service dl dt {
    height: 72px;
    line-height: 72px;
    margin-bottom: 10px;
}

.service dl dt img {
    display: inline-block;
    vertical-align: middle;
}

.service dl dd {
    font-size: 12px;
    color: #959595;
}

.service dl dd strong {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #000;
}

.footer {
    padding: 14px 0;
    color: #84878e;
    font-size: 12px;
    background: #e0e1e4;
}

.footer .annotation {
    padding-top: 20px;
    text-align: left;
}

.footer .copyright {
    padding: 15px 0;
    text-align: center;
}