html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体;
            font-size: 12px;
            color: #333;
            background-color: #fff;
        }

        a {
            text-decoration: none;
        }

        button,
        input,
        textarea {
            color: inherit;
            font: inherit;
            outline: 0;
        }

        ul,
        ol {
            list-style: none;
            margin: 0;
            padding: 0;
        }


        .van-row:after {
            display: table;
            clear: both;
            content: "";
        }

        .van-col {
            float: left;
            box-sizing: border-box;
            min-height: .02667rem;
        }

        .van-col--1 {
            width: 4.16666667%;
        }

        .van-col--8 {
            width: 33.33333333%;
        }

        .van-col--13 {
            width: 54.16666667%;
        }

        .van-col--15 {
            width: 100%;
        }


        .container {
            font-size: .37333rem;
            width: 100%;
            height: 100%;
            min-height: 100vh;
            color: #333;
            position: relative;
            background-color: #fff;
        }


        .main .top-block {
            background: url(/assets/img/bg_coupon_top.1bb8ea0a.svg) no-repeat;
            background-color: #f7f7f7;
            width: 100vw;
            height: 16.8vw;
            background-size: cover;
            color: #fff;
        }


        .main .coupon-detail-content {
            text-align: center;
            background: #f7f7f7;
            min-height: calc(100vh - 16.8vw);
        }


        .main .coupon-detail-content .benefit-info {
            background: url(/assets/img/bg_coupon_detail.01643e22.svg) no-repeat;
            width: 90vw;
            height: 63.76vw;
            background-size: cover;
            margin: auto;
            color: #c36666;
            position: relative;
        }

        .main .coupon-detail-content .benefit-info .benefit-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .main .coupon-detail-content .benefit-info .benefit-content .upi-logo {
            height: .66667rem;
        }

        .main .coupon-detail-content .benefit-info .benefit-content .benefit-name {
            font-size: .37333rem;
            font-weight: 500;
            margin-top: .1rem;
            width: 72vw;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .main .coupon-detail-content .benefit-info .benefit-content .cat-icon {
            height: 1.6rem;
        }


        .main .coupon-detail-content .coupon-info {
            width: 90%;
            margin-left: 5%;
            margin-top: .53333rem;
            padding-bottom: .53333rem;
            background: #fff;
            box-shadow: 0 .05333rem .21333rem 0 rgba(0, 0, 0, .06);
            border-radius: .32rem;
        }

        .main .coupon-detail-content .coupon-info .qr-code {
            margin: auto;
            margin-top: -2.7rem;
            text-align: center;
        }

        .main .coupon-detail-content .coupon-info .qr-code canvas {
            width: 155px;
            height: 155px;
        }

        .main .coupon-detail-content .coupon-info .coupon-img {
            margin-top: .53333rem;
            float: right;
            height: 31vw;
        }

        .main .coupon-detail-content .coupon-info .bar-code {
            margin: auto;
            margin-top: .53333rem;
            margin-bottom: .3rem;
        }


        .main .coupon-detail-content .coupon-info .used-qr-code-left {
            margin-top: .53333rem;
            width: 30vw;
            position: absolute;
            float: left;
            left: 5%;
        }

        .main .coupon-detail-content .coupon-info .used-coupon-img {
            margin-top: .53333rem;
            margin-right: 5%;
            float: right;
            height: 30vw;
        }

        .main .coupon-detail-content .coupon-info .used-bar-code {
            margin-top: .53333rem;
            height: 18.5%;
            width: 90%;
        }


        .main .coupon-detail-content .coupon-info .refresh-option {
            text-align: center;
            margin: .53333rem auto;
            font-size: .37333rem;
            color: #333;
        }

        .main .coupon-detail-content .coupon-info .refresh-option .copy {
            cursor: pointer;
            color: #4b95ff;
        }

        .main .coupon-detail-content .coupon-info .refresh-option .refresh {
            cursor: pointer;
            color: #ffacac;
        }

        .main .coupon-detail-content .coupon-info .btn-use {
            height: 1.06667rem;
            line-height: 1.06667rem;
            width: 4rem;
            border-radius: .26667rem;
            background-color: #ed171f;
            font-weight: 500;
            font-size: .37333rem;
            color: #fff;
            text-align: center;
            margin: .8rem auto auto auto;
            cursor: pointer;
        }


        .main .coupon-detail-content .use-directions {
            width: 90%;
            margin-left: 5%;
            margin-top: .53333rem;
            font-size: .37333rem;
            background: #fff;
            box-shadow: 0 .05333rem .21333rem 0 rgba(0, 0, 0, .06);
            border-radius: .32rem;
        }

        .main .coupon-detail-content .use-directions .sub-title {
            margin-top: .3rem;
            margin-left: 5%;
            margin-bottom: .4rem;
            font-size: .4rem;
            padding-top: .26667rem;
        }

        .main .coupon-detail-content .use-directions .sub-title .v-line {
            width: .13333rem;
            height: .58667rem;
            background: linear-gradient(180deg, #ff7277, #ed171f);
            border-radius: .24rem;
            float: left;
            margin-top: .10667rem;
        }

        .main .coupon-detail-content .use-directions .sub-title .label {
            line-height: .8rem;
            font-weight: 600;
            color: #ed171f;
            text-align: left;
            margin-left: 5%;
        }

        .main .coupon-detail-content .use-directions .detail-content {
            width: 90%;
            margin-left: 5%;
            color: #666;
            white-space: pre-wrap;
            text-align: justify;
            word-break: break-all;
            font-size: .37333rem;
            line-height: .69333rem;
            padding-bottom: .4rem;
        }


        .display {
            display: none;
        }

        .block-layout {
            width: 100%;
            height: 100%;
            background: hsla(0, 0%, 90.2%, .5);
            z-index: 999;
        }


        .main .coupon-detail-content .coupon-info .qr-code {

            display: flex;
            justify-content: center;
            align-items: center;

            margin-top: -2.7rem;
            position: relative;
            z-index: 10;
        }

        .main .coupon-detail-content .coupon-info .qr-code canvas {

            width: 100% !important;
            max-width: 250px;
            height: auto !important;

            background: #fff;
            padding: 4px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }


        .main .coupon-detail-content .coupon-info .bar-code {
            margin: 0.5rem auto 0.3rem auto;
            text-align: center;
            width: 90%;
            overflow: hidden;
        }


        #barcode-svg {
            width: 100% !important;
            height: auto !important;
            max-height: 120px;
            display: block;
            margin: 0 auto;
        }


        .main .coupon-detail-content .coupon-info .qr-code {


            margin-top: 0.9rem;


            display: flex;
            justify-content: center;
            position: relative;
            z-index: 10;
        }


        .main .coupon-detail-content .coupon-info .coupon-img {


            margin-top: 1.0rem;


            float: right;
            height: 31vw;
            width: auto;
        }


        .main .coupon-detail-content .coupon-info .bar-code {


            margin-top: 0.8rem;
            margin-bottom: 0.5rem;

            text-align: center;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }


        #qrcode canvas {

            display: block;
        }