.scratch-wrapper[data-v-4cacb679] {
    position: relative;
    width: 100%;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    overflow: hidden
}

.scratch-content[data-v-4cacb679] {
    position: relative;
    z-index: 10
}

.scratch-canvas[data-v-4cacb679] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    cursor: pointer
}

.scratch-percentage[data-v-4cacb679] {
    position: absolute;
    top: .25rem;
    right: .25rem;
    z-index: 30;
    font-size: .75rem;
    background-color: rgba(255,255,255,.7);
    padding: 0 .25rem;
    border-radius: .25rem
}

.code-row[data-v-901ba97e] {
    display: flex;
    justify-content: space-around;
    font-family: type-font,Microsoft YaHei,sans-serif;
    padding: .2rem
}

.code-row .ppc-code-box[data-v-901ba97e] {
    display: block;
    width: 3.05rem;
    height: 3.05rem;
    font-size: 1.56rem;
    border-radius: 50%;
    color: #333;
    margin: 0 auto 4px;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-weight: 600
}

.code-row .ppc-code-box .ppc-code-box-bg[data-v-901ba97e] {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.code-row .ppc-code-box .ppc-code-box-txt[data-v-901ba97e] {
    position: absolute;
    top: 45.5%;
    left: 46%;
    transform: translate(-50%,-50%)
}

.code-row .ppc-add-ico[data-v-901ba97e] {
    height: 3.05rem;
    padding-bottom: .4rem;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #333
}

.code-row .red[data-v-901ba97e] {
    background-image: var(--ppc-ball-red-bg)
}

.code-row .green[data-v-901ba97e] {
    background-image: var(--ppc-ball-green-bg)
}

.code-row .blue[data-v-901ba97e] {
    background-image: var(--ppc-ball-blue-bg)
}

.code-row .red-text[data-v-901ba97e] {
    color: red
}

.code-row .green-text[data-v-901ba97e] {
    color: #0f0
}

.code-row .blue-text[data-v-901ba97e] {
    color: #00f
}

.code-row .theme-v2[data-v-901ba97e] {
    align-items: center
}

.code-row .theme-v2 .ppc-code-box[data-v-901ba97e] {
    color: #333
}

.code-row .theme-v2 .red[data-v-901ba97e] {
    background-image: var(--ppc-ball-red-bg)
}

.code-row .theme-v2 .green[data-v-901ba97e] {
    background-image: var(--ppc-ball-green-bg)
}

.code-row .theme-v2 .grey[data-v-901ba97e] {
    background-image: var(--ppc-ball-gray-bg)
}

.code-row .theme-v2 .blue[data-v-901ba97e] {
    background-image: var(--ppc-ball-blue-bg)
}

.code-row .theme-v2 .red-text[data-v-901ba97e],.code-row .theme-v2 .green-text[data-v-901ba97e],.code-row .theme-v2 .blue-text[data-v-901ba97e] {
    color: #000
}

.code-label[data-v-901ba97e] {
    text-align: center;
    color: #333
}

.theme-v2 .ppc-add-ico[data-v-901ba97e] {
    font-weight: 700
}

@media screen and (min-width: 750px) {
    .base-site .code-row[data-v-901ba97e] {
        padding:0
    }
}

@media screen and (max-width: 750px) {
    .theme-v2 .code-label[data-v-901ba97e] {
        font-size:1rem;
        text-align: center;
        letter-spacing: .45px
    }
}

@media screen and (max-width: 320px) {
    .theme-v2 .ppc-code-box[data-v-901ba97e] {
        width:38px;
        height: 38px
    }
}

.tab-inner-con .ppc-code-box-txt[data-v-901ba97e] {
    font-size: 1.2rem
}

.code-draw-item[data-v-901ba97e] {
    position: relative
}

.scratch-mask[data-v-901ba97e] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #95a5a6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: .62rem;
    z-index: 10
}

.mask-content[data-v-901ba97e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 12px
}

.scratch-card-container[data-v-901ba97e] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.scratch-card[data-v-901ba97e] {
    width: 14.375rem;
    height: 14.375rem;
    border-radius: .62rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff
}

.scratch-card .code-row[data-v-901ba97e] {
    transform: scale(2)
}