@charset "utf-8";

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a, a:hover, a:link, a:active {
    text-decoration: none;
}

a {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

a:hover {
    opacity: .8;
}

.price-mark {
    font-family: arial;
    font-style: normal;
}

.qrcode {
    display: block;
    padding: 2rem 0 0 2rem !important;
    margin: -2rem 0 0 -2rem !important;
    -webkit-user-select: none;
    z-index: 100;
}

main {
    width:7.5rem;
    overflow: hidden;
    background: #2B2B2B;
}

/*主视觉部分*/
.section-home {
    background: url(../images/home-bg.jpg) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    width: 7.50rem;
    height: 9.01rem;
}

/*横幅部分*/
.section-banner {
    background: url(../images/banner-bg.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    width: 7.52rem;
    height: 1.53rem;
    margin: .28rem auto .4rem;
}

.section-banner > a {
    background: #FFCC00;
    -webkit-border-radius: .06rem;
    -moz-border-radius: .06rem;
    border-radius: .06rem;
    width: 1.1rem;
    height: .46rem;
    display: block;
    line-height: .46rem;
    font-size: .22rem;
    font-weight: 400;
    text-align: center;
    color: #1D1D1D;
    float: right;
    margin: .45rem .34rem 0 0;
}

/*抽奖部分*/
.section-prize {
    width: 4.2rem;
    height: .8rem;
    -webkit-border-radius: .8rem;
    -moz-border-radius: .8rem;
    border-radius: .8rem;
    -webkit-background-image: linear-gradient(-90deg, #FF7E69 0%, #F03E2E 100%);
    -moz-background-image: linear-gradient(-90deg, #FF7E69 0%, #F03E2E 100%);
    background-image: linear-gradient(-90deg, #FF7E69 0%, #F03E2E 100%);
    -webkit-box-shadow: 0 .06rem 0 0 #9D1D0D;
    -moz-box-shadow: 0 .06rem 0 0 #9D1D0D;
    box-shadow: 0 .06rem 0 0 #9D1D0D;
    margin: 0 auto .62rem;
}

.section-prize > a {
    display: block;
    width: 100%;
    height: .8rem;
    line-height: .8rem;
    font-size: .34rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

/*优惠部分*/
.section-sale {
    width: 100%;
    padding: 0 .2rem .32rem;
}

.section-sale img {
    width: 100%;
    height: 100%;
}

.section-sale > a {
    width: 98%;
    height: .6rem;
    /* Rectangle 2: */
    background: #FFFFFF;
    -webkit-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    line-height: .6rem;
    font-size: .28rem;
    font-weight: 400;
    color: #333333;
    text-align: center;
    display: block;
    margin: .2rem auto 0;
}

.section-sale .menu-box {
    width: 100%;
    margin: 0 auto;
}

.section-sale .menu-box:after {
    content: '';
    display: block;
    clear: both;
    opacity: 0;
}

.menu-box > li {
    list-style: none;
    background: #FFFFFF;
    -webkit-border-radius: .06rem;
    -moz-border-radius: .06rem;
    border-radius: .06rem;
    width: 31.3333%;
    height: auto;
    line-height: .6rem;
    font-size: .24rem;
    font-weight: 400;
    color: #2A2A2A;
    text-align: center;
    cursor: pointer;
    float: left;
    margin: .1rem 1%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.menu-box > li.active {
    background: #FFD000;
    -webkit-box-shadow: 0 .06rem .12rem 0 rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 .06rem .12rem 0 rgba(0, 0, 0, 0.10);
    box-shadow: 0 .06rem .12rem 0 rgba(0, 0, 0, 0.10);
    font-weight: 700;
    color: #333333;
}

.section-sale .sale-box {
    width: 100%;

}

.section-sale .sale-item {
    width: 100%;
    padding: 0 1%;
}

.sale-item > ul {
    width: 100%;
}

.sale-item > ul > li {
    width: 100%;
    height: 4.56rem;
    background: #FFFFFF;
    -webkit-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    padding: .22rem 0 .2rem;
    margin-top: .3rem;
    font-size: 0;
    position: relative;
}

.sale-pic-box-1, .sale-pic-box-2 {
    background: #e1e1e1 url(../images/global-load.gif) no-repeat center;
    -webkit-background-size: .5rem .42rem;
    background-size: .5rem .42rem;
    height: 2.6rem;
    display: inline-block;
    margin-bottom: .2rem;
}

.sale-pic-box-1 {
    width: 3.48rem;
    margin-left: .22rem;
}

.sale-pic-box-2 {
    width: 2.8rem;
    margin-right: .22rem;
    float: right;
}

.sale-txt-box {
    display: inline-block;
    width: 70%;
    margin-left: 2%;
}

.sale-txt-box > h1 {
    width: 100%;
    height: .42rem;
    line-height: .42rem;
    font-size: .28rem;
    font-weight: 700;
    color: #333333;
    text-align: left;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto .1rem;
}

.sale-txt-box > h2 {
    display: inline-block;
    border: 1px solid #F64531;
    -webkit-border-radius: .02rem;
    -moz-border-radius: .02rem;
    border-radius: .02rem;
    height: .3rem;
    line-height: .3rem;
    font-size: .2rem;
    font-weight: 400;
    color: #F64531;
    padding: 0 .05rem;
    margin-right: .1rem;
}

.sale-txt-box > h3 {
    display: inline-block;
    height: .3rem;
    line-height: .3rem;
    font-size: .22rem;
    font-weight: 400;
    color: #666666;
}

.sale-txt-box > ul {
    width: 100%;
    margin-top: .2rem;
}

.sale-txt-box > ul > li {
    list-style: none;
    height: .26rem;
    line-height: .26rem;
    font-size: .22rem;
    font-weight: 400;
    color: #666666;
    float: left;
    margin-right: .2rem;
}

.sale-txt-box > ul > li:before {
    content: '';
    display: inline-block;
    width: .24rem;
    height: .24rem;
    vertical-align: top;
    margin-right: .06rem;
}

.sale-txt-box > ul > li:nth-child(1):before {
    background: url(../images/sale-icon-1.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.sale-txt-box > ul > li:nth-child(2):before {
    background: url(../images/sale-icon-2.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.sale-txt-box > ul > li:nth-child(3):before {
    background: url(../images/sale-icon-3.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.sale-item > ul > li > p {
    display: inline-block;
    width: 26%;
    float: right;
    margin-right: 2%;
    text-align: right;
    font-size: 0;
}

.sale-item > ul > li > p > i {
    font-size: .24rem;
    font-weight: 700;
    color: #F14030;
}

.sale-item > ul > li > p > strong {
    line-height: .46rem;
    font-size: .46rem;
    font-weight: 700;
    color: #F14030;
}

.sale-item > ul > li > p > span {
    font-size: .22rem;
    font-weight: 400;
    color: #999999;
}

.sale-item > ul > li > p > a {
    background: #2A2A2A;
    -webkit-border-radius: .04rem;
    -moz-border-radius: .04rem;
    border-radius: .04rem;
    width: 1.68rem;
    height: .56rem;
    line-height: .56rem;
    font-size: .24rem;
    font-weight: 700;
    color: #FFD800;
    text-align: center;
    display: block;
    float: right;
    margin-top: .32rem;
}

.sale-item > ul > li > h1 {
    -webkit-background-image: linear-gradient(-90deg, #FF7E69 0%, #F03E2E 100%);
    -moz-background-image: linear-gradient(-90deg, #FF7E69 0%, #F03E2E 100%);
    background-image: linear-gradient(-90deg, #FF7E69 0%, #F03E2E 100%);
    width: 1.56rem;
    height: .50rem;
    position: absolute;
    top: -.1rem;
    left: .22rem;
    line-height: .5rem;
    font-size: .26rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    z-index: 10;
    margin: 0;
}

.sale-item > ul > li > h1:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 0;
    height: 0;
    border-width: .05rem .04rem;
    border-style: solid;
    border-color: transparent transparent #A92D21 #A92D21;
    color: #A92D21;
}

.section-box {
    width: 100%;
    background: #F0F1F3;
    padding: .4rem .3rem 0;
}

.section-box > h1 {
    -webkit-background-image: linear-gradient(90deg, #464646 0%, #2B2B2B 66%, #1D1D1D 100%);
    -moz-background-image: linear-gradient(90deg, #464646 0%, #2B2B2B 66%, #1D1D1D 100%);
    background-image: linear-gradient(90deg, #464646 0%, #2B2B2B 66%, #1D1D1D 100%);
    -webkit-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.10);
    width: 4.68rem;
    height: .72rem;
    -webkit-border-radius: .72rem;
    -moz-border-radius: .72rem;
    border-radius: .72rem;
    line-height: .72rem;
    font-size: .32rem;
    font-weight: 700;
    text-align: center;
    color: #FFD800;
    margin: 0 auto .4rem;
}

/*流程部分*/
.section-flow {

}

.section-flow > ul {
    width: 100%;
}

.section-flow > ul > li {
    list-style: none;
    width: 100%;
    background: #FFD400;
    -webkit-box-shadow: 0 .08rem .16rem 0 rgba(210, 210, 210, 0.5);
    -moz-box-shadow: 0 .08rem .16rem 0 rgba(210, 210, 210, 0.5);
    box-shadow: 0 .08rem .16rem 0 rgba(210, 210, 210, 0.5);
    padding: .4rem .4rem .4rem 1.4rem;
    margin-bottom: .3rem;
    position: relative;
}

.section-flow > ul > li:last-child {
    margin-bottom: 0;
}

.section-flow > ul > li > h1 {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    width: .63rem;
    height: .66rem;
    background: none;
    margin: 0;
}

.section-flow > ul > li > h1 > span {
    line-height: .32rem;
    font-size: .32rem;
    color: #ffffff;
    position: absolute;
    right: .08rem;
    top: .04rem;
    z-index: 2;
}

.section-flow > ul > li > h1:before {
    content: '';
    display: block;
    border-width: .36rem .31rem;
    border-style: solid;
    border-color: #3B3B3B #3B3B3B transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.section-flow > ul > li > h2 {
    height: .42rem;
    line-height: .42rem;
    font-size: .3rem;
    font-weight: 700;
    color: #333333;
    text-align: left;
    margin-bottom: .08rem;
}

.section-flow > ul > li > p, .section-flow > ul > li > h3 {
    line-height: .3rem;
    font-size: .22rem;
    font-weight: 400;
    color: #333333;
    text-align: left;
}

.section-flow > ul > li > h3 {
    margin-top: .08rem;
}

.flow-pic-box {
    background: #F24C3D;
    width: .8rem;
    height: .8rem;
    margin-left: -1rem;
    padding: .07rem;
    vertical-align: top;
    font-size: 0;
    float: left;
}

.flow-pic-box > img {
    width: 100%;
    height: 100%;
}

.section-flow > ul > li:nth-child(1) .flow-pic-box {
    background: url(../images/flow-pic-1.jpg) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-flow > ul > li:nth-child(3) .flow-pic-box {
    background: url(../images/flow-pic-3.jpg) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

/*herzt部分*/
.section-herzt {
    padding-bottom: .5rem;
}

.section-herzt > ul {
    width: 100%;
}

.section-herzt > ul > li {
    list-style: none;
    background: #202020;
    width: 100%;
    height: 2.4rem;
    margin-bottom: .2rem;
    font-size: 0;
    padding-top: .3rem;
    -webkit-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 .08rem .16rem 0 rgba(0, 0, 0, 0.1);
}

.section-herzt > ul > li:last-child {
    margin-bottom: 0;
}

.section-herzt > ul > li > h1 {
    width: 100%;
    height: .45rem;
    line-height: .45rem;
    font-size: .32rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin: 0 auto;
}

.section-herzt > ul > li > p {
    width: 100%;
    height: .45rem;
    line-height: .3rem;
    font-size: .22rem;
    font-weight: 400;
    text-align: center;
    color: #fff;
    margin: 0 auto;
}

.section-herzt > ul > li:before {
    content: '';
    display: block;
    width: .65rem;
    height: .65rem;
    margin: 0 auto;
}

.section-herzt > ul > li:nth-child(1):before {
    background: url(../images/hertz-icon-1.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-herzt > ul > li:nth-child(2):before {
    background: url(../images/hertz-icon-2.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-herzt > ul > li:nth-child(3):before {
    background: url(../images/hertz-icon-3.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-herzt > ul > li:nth-child(4):before {
    background: url(../images/hertz-icon-4.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-herzt > p {
    padding: 0 .22rem;
    line-height: .48rem;
    font-size: .26rem;
    font-weight: 400;
    color: #333333;
    text-align: justify;
    margin: .3rem auto 0;
}

.section-herzt > p:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-width: .15rem;
    border-style: solid;
    border-color: #202020 transparent transparent transparent;
    margin: 0 auto;
}

/*关于部分*/
.section-about {
    width: 100%;
    background: #3B3F4C;
    padding-top: 1.15rem;
}

.section-about > h1 {
    background: url(../images/zzc-logo.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    width: 5.20rem;
    height: .91rem;
    margin: 0 auto .38rem;
}

.section-about > h2 {
    height: .92rem;
    line-height: .92rem;
    font-size: .27rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    border-top: 1px solid #4A5162;
    border-bottom: 1px solid #4A5162;
}

.section-about > ul {
    width: 100%;
    padding: .3rem 1%;
    margin: 0 auto;
}

.section-about > ul:after {
    content: '';
    display: block;
    clear: both;
    opacity: 0;
}

.section-about > ul > li {
    list-style: none;
    width: 49%;
    padding-left: 16.5%;
    float: left;
    margin: .35rem 0;
    overflow: hidden;

}

.section-about > ul > li:before{
    content: '';
    display: inline-block;
    width: .55rem;
    height: .55rem;
    float: left;
    vertical-align: top;
    margin:.06rem 0 0 -.7rem;
}

.section-about > ul > li:nth-child(1):before{
    background: url(../images/about-icon-1.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-about > ul > li:nth-child(2):before{
    background: url(../images/about-icon-2.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-about > ul > li:nth-child(3):before{
    background: url(../images/about-icon-3.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-about > ul > li:nth-child(4):before{
    background: url(../images/about-icon-4.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-about > ul > li:nth-child(5):before{
    background: url(../images/about-icon-5.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-about > ul > li:nth-child(6):before{
    background: url(../images/about-icon-6.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-about > ul > li > strong {
    display: block;
    height: .33rem;
    line-height: .33rem;
    font-size: .26rem;
    font-weight: 700;
    text-align: left;
    color: #fff;
}
.section-about > ul > li > span {
    display: block;
    height: .33rem;
    line-height: .33rem;
    font-size: .26rem;
    font-weight: 400;
    text-align: left;
    color: #fff;
}


/*二维码弹窗*/
.section-qrcode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .5);
    display: none;
}

.section-pop {
    background: #FFFFFF;
    -webkit-border-radius: .16rem;
    -moz-border-radius: .16rem;
    border-radius: .16rem;
    width: 6.3rem;
    padding-top: .4rem;
    margin: 40% auto;
}

.section-pop .qrcode-box {
    width: 3.8rem;
    height: 3.8rem;
    margin: 0 auto .2rem;
    position: relative;
}

.section-pop > p {
    line-height: .4rem;
    font-size: .28rem;
    font-weight: 400;
    color: #333333;
    text-align: justify;
    padding: 0 .55rem;
    margin: 0 auto .48rem;
}

.section-pop > a {
    display: block;
    -webkit-box-shadow: inset 0 1px 0 0 #DDE0E6;
    -moz-box-shadow: inset 0 1px 0 0 #DDE0E6;
    box-shadow: inset 0 1px 0 0 #DDE0E6;
    border-top: 1px solid #DDE0E6;
    height: 1rem;
    line-height: 1rem;
    font-size: .32rem;
    font-weight: 700;
    color: #333333;
    text-align: center;
}

.section-qrcode .qrcode {
    width: 5.75rem;
    height: 5.75rem;
    position: absolute;
    top: 0;
    left: 0;
}


/*规则部分*/
.section-rule {
    background: #F0F1F3;
    padding-top: .4rem;
}

.section-rule .content-box{
    width: 6.9rem;
    margin: 0 auto ;
    padding: .4rem .3rem .5rem;
    background: #fff;
}

.section-rule  h1 {
    height: .5rem;
    line-height: .5rem;
    font-size: .36rem;
    font-weight: 400;
    color: #333333;
    text-align: left;
    margin: 0 auto .2rem;
}

.rule-tit-1:before, .rule-tit-2:before {
    content: '';
    display: inline-block;
    width: .3rem;
    height: .3rem;
    vertical-align: top;
    margin: .08rem .2rem 0 0;
}

.rule-tit-1:before {
    background: url(../images/rule-icon-1.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.rule-tit-2:before {
    background: url(../images/rule-icon-2.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.section-rule  ul {
    width: 100%;
}

.section-rule .rule-list-1 {
    margin-bottom: .3rem;
}

.section-rule  ul  li {
    list-style: none;
    line-height: .4rem;
    font-size: .22rem;
    font-weight: 400;
    color: #333333;
    text-align: justify;
    padding-left: .3rem;
}

.section-rule  ul  li  span {
    margin-left: -.3rem;
    float: left;
}