* {
    font-family: PingFang-SC-Bold;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
}

.top-banner {
    width: 100%;
    height: 13.5rem;
    background: url(../img/banner.jpg) no-repeat center;
    background-size: 100%;
    box-sizing: border-box;
    padding-top: 2.5rem
}

.top-banner h1 {
    font-size: 1.6rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #ffffff;
    width: 100%;
    text-align: center;
    margin-top: 0.4rem;
}

.top-banner h2 {
    text-align: center;
    margin-bottom: 1.5rem
}

.top-banner h2 img {
    width: 6rem;
}

.about-us {
    box-sizing: border-box;
    padding: 2.2rem 0.5rem 1rem 1.5rem;
}

.about-us > h3 {
    font-size: 1.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.7rem;
    letter-spacing: 0rem;
    color: #00572c;
    width: 100%;
    text-align: center
}

.us-info {
    width: 100%;
    height: 15rem;
    background: red;
    margin-top: 2rem;
    padding-left: 6.5rem;
    box-sizing: border-box;
    background: url(../img/bg1.jpg) no-repeat left;
    background-size: contain;
}

.us-info ul li {
    margin-top: 0.9rem;
}

.us-info ul li:first-child {
    margin-top: 0 !important
}

.us-info ul li h4 {
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #333333;
    font-weight: 600
}

.us-info ul li p {
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #666666;
    margin-top: 0.4rem
}

.commodity-list {
    box-sizing: border-box;
    padding: 4rem 0.5rem 1rem 0.5rem;
}

.commodity-list > h3 {
    font-size: 1.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.7rem;
    letter-spacing: 0rem;
    color: #00572c;
    width: 100%;
    text-align: center;
}

.short-line {
    width: 100%;
    text-align: center
}

.short-line > span {
    width: 2.5rem;
    height: 0.05rem;
    background-color: #00592b;
    display: inline-block;
}

.commodity-area {
    width: 100%;
    height: 13rem;
}

.discount {
    box-sizing: border-box;
    padding: 3rem 1.3rem 2rem 1.3rem;
    height: 18rem;
    background: url(../img/bg2.jpg) no-repeat center;
    background-size: 100%
}

.discount > h3 {
    font-size: 1.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.7rem;
    letter-spacing: 0rem;
    color: #00572c;
    width: 100%;
    text-align: center
}

.discount h4 {
    font-size: 0.8rem;
    font-weight: 600;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #333333;
    margin-top: 0.8rem;
    width: 100%;
    /*text-align: center*/
}

.steps {
    width: 100%;
    height: 15rem;
    box-sizing: border-box;
    padding-right: 6rem;
    padding-top: 0.5rem;
    position: relative;
}

.qrcode {
    width: 7rem;
    height: 7rem;
    position: absolute;
    top: 1rem;
    right: 0;

}

.qrcode img {
    width: 7rem;
    height: 7rem;
}

.steps ul li {
    width: 100%;
    margin-top: 0.5rem;
}

.steps ul li h4 {
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: normal;
    line-height: 1.2rem;
    letter-spacing: 0rem;
    color: #333333;
    text-align: left;
    margin-top: 0
}

.steps ul li span {
    width: 1rem;
    height: .1rem;
    background-color: #00ae53;
    display: table-cell;
}

.steps ul li p {
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.2rem;
    letter-spacing: 0rem;
    color: #333333;
    margin-top: 0.2rem;
    padding-left: 1rem;
    background: url(../img/point1.png) no-repeat left;
}

.service {
    height: 20rem;
    box-sizing: border-box;
    padding: 2rem 0.5rem 0 0.5rem;
}

.service h3 {
    font-size: 1.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.7rem;
    letter-spacing: 0rem;
    color: #00572c;
    width: 100%;
    text-align: center
}

.service ul {
    margin-top: 2rem
}

.service ul li {
    width: 32%;
    margin-left: 2%;
    height: 8rem;
    float: left;
    position: relative;
    text-align: center;
}

.service ul li:first-child {
    margin-left: 0
}

.new-man {
    background: url(../img/f2.jpg) no-repeat top center;
    background-size: contain
}

.give-voucher {
    background: url(../img/f1.jpg) no-repeat top center;
    background-size: contain
}

.give-point {
    background: url(../img/f3.jpg) no-repeat top center;
    background-size: contain
}

.service ul li .tag {
    width: 1.1rem;
    height: 6rem;
    background: url(../img/tip.png) no-repeat top;
    display: inline-block;
    position: absolute;
    right: 0.5rem;
    top: 0;
    background-size: contain;
    color: #fff;
    text-align: center;
    font-size: 0.4rem;
    box-sizing: border-box;
    padding: 0.3rem 0.2rem 0 0.2rem;
    writing-mode:lr-tb
}

.service ul li i {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
    margin-top: 1.3rem
}

.new-man i {
    background: url(../img/gift.png) no-repeat center;
    background-size: contain
}

.give-voucher i {
    background: url(../img/cash.png) no-repeat center;
    background-size: contain
}

.give-point i {
    background: url(../img/point.png) no-repeat center;
    background-size: contain
}

.service ul li h4 {
    font-size: 0.9rem;
    font-weight: 600;
    font-stretch: normal;
    line-height: 2rem;
    letter-spacing: 0rem;
    color: #ffffff;
    width: 100%;
}

.service ul li p {
    color: #fff;
    font-size: 0.8rem;
    text-decoration: underline;
}

.trust {
    height: 22rem;
    box-sizing: border-box;
    padding: 2rem 3rem;
    background-color: #f9f9f9
}

.trust h2 {
    font-size: 1.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.7rem;
    letter-spacing: 0rem;
    color: #00572c;
    width: 100%;
    text-align: center
}

.permit {
    width: 50%;
    height: 13rem;
    background: url(../img/cert.jpg) no-repeat top center;
    float: left;
    margin-top: 2rem;
    /*background-size: contain;*/
    position: relative;
    background-size: 80%;

}

.authentication {
    width: 50%;
    height: 13rem;
    background: url(../img/cert2.jpg) no-repeat top center;
    float: right;
    margin-top: 2rem;
    background-size: 80%;
    position: relative;
}

.trust div p {
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #333333;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
}

.contact {
    height: 8rem;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 10rem
}

.contact h4 {
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.8rem;
    letter-spacing: 0rem;
    color: #333333;
}

.tel-no {
    width: 7.5rem;
    height: 1rem;
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #00572c;
    padding-left: 1.5rem;
    background: url(../img/service.png) no-repeat left;
    display: inline-block;
    background-size: contain;
    margin-top: 1rem
}

.talk-now {
    width: 7.3rem;
    height: 1rem;
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #00572c;
    padding-left: 1.5rem;
    background: url(../img/msg.png) no-repeat left;
    display: inline-block;
    background-size: contain;
    margin-top: 1rem;
    text-align: left;
    text-decoration: underline;
}

.contact > p {
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #999999;
    margin-top: 2rem;
}

.buy-now {
    width: 96%;
    margin-left: 2%;
    height: 4rem;
    background-color: #00572c;
    border-radius: 0.3rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #ffffff;
    line-height: 4rem;
    border: none;
    margin-bottom: 0.3rem;
    z-index: 100;
}

.commodity-list {
    width: 100%;
    display: inline-block;
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    margin-right: 0.2rem;
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
}

.middle-partner {
    background: url(../img/commodity1.png) no-repeat center bottom;
    background-size: contain
}

.middle-exchange {
    background: url(../img/commodity2.png) no-repeat center bottom;
    background-size: contain
}

.exchange-partner {
    background: url(../img/commodity3.png) no-repeat center bottom;
    background-size: contain

}

.exchange-point {
    background: url(../img/commodity4.png) no-repeat center bottom;
    background-size: contain
}

.big-cup {
    background: url(../img/commodity2.png) no-repeat center bottom;
    background-size: contain
}

.pizza_hut_30 {
    background: url(../img/30.png) no-repeat center bottom;
    background-size: contain
}

.pizza_hut_50 {
    background: url(../img/50.png) no-repeat center bottom;
    background-size: contain
}

.pizza_hut_100 {
    background: url(../img/100.png) no-repeat center bottom;
    background-size: 97.3%
}

.pizza_hut_150 {
    background: url(../img/150.png) no-repeat center bottom;
    background-size: 97.3%
}
.xbk-usa {
    background: url(../img/coffe.png) no-repeat center bottom;
    background-size: 97.3%
}
.kfc-egg{
    background: url(../img/dan.png) no-repeat center bottom;
    background-size: contain
}
.kfc-fifty{
    background: url(../img/hun.png) no-repeat center bottom;
    background-size: contain
}
.kfc-chicken{
    background: url(../img/chicken.png) no-repeat center bottom;
    background-size: 97.3%
}
.burger-king{
    background: url(../img/burgerKing.png) no-repeat center bottom;
    background-size: contain
}
.coco{
    background: url(../img/coco.png) no-repeat center bottom;
    background-size: contain
}
.haagen-dazs-1{
    background: url(../img/haagen1.png) no-repeat center bottom;
    background-size: contain
}
.haagen-dazs-2{
    background: url(../img/haagen2.png) no-repeat center bottom;
    background-size: contain
}
.haagen-dazs-3{
    background: url(../img/haagen3.png) no-repeat center bottom;
    background-size: contain
}
.baiguoyuan{
    background: url(../img/baiGuoYuan.png) no-repeat center bottom;
    background-size: contain
}
.swiper-slide{
    padding:0 .2rem;
}
.swiper-slide > div {
    width: 100%;
    height: auto;
    position: relative;
    clear: both;
    padding-top: 70%
}

.swiper-slide > div > h4 {
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0;
    color: #00572c;
    width: 86%;
    margin:0 auto;
    margin-bottom: 0.2rem
}

.swiper-slide p {
    font-size: .7rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0;
    color: #999999;
    margin-top: 0.4rem
}
.swiper-slide .t-red{
    margin-top: 0;
}

.swiper-slide p > span {
    text-decoration: line-through
}

.t-red {
    color: red !important;
}

#udesk_btn {
    display: none;
}

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    /*opacity: 0.3;*/
    top: 0;
    text-align: center;
    padding-top: 30%;
    display: none;
}

.mask img {
    margin-top: 2rem;
    width: 70%;
}

.close-qrcode {
    position: absolute;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: url(../img/close.png) no-repeat center;
    display: inline-block;
}
.fixed-bottom-area{
    width: 100%;
    height: 6rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 100;
    border-top: 1px solid #f4f4f4;
    box-sizing: border-box;
    padding-top: 1rem;
}
.contact  .bei-an {
    margin-top: .5rem;
}

.contact  .bei-an a{
    color: #999;
}
@media screen and ( max-width: 340px ) {
    .swiper-slide > div{
        padding-top: 89%
    }
}