.cc, .cc-back {
    border-radius: 4%;
    z-index: 1
}

    .cc .date .right span, .cc .name, .cc .number {
        color: #333
    }

.cc {
    -webkit-box-shadow: 0 8px 32px 0 rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.08);
    background-color: var(--white-two);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    position: relative
}

    .cc .logo, .cc .number, .chip .mc {
        position: absolute
    }

.cc-back {
    transform: rotateY(180deg)
}

    .cc .chip, .cc-back .chip {
        width: 18%;
        height: 18%;
        position: absolute;
        background: #ddd;
        border-radius: 5%;
        top: 10%;
        left: 10%
    }

    .cc-back .chip {
        top: 70% !important;
        left: 5% !important
    }

.chip .mc {
    /* width: 65%; */
    /* height: 70%; */
    /* background: #aaa; */
    top: 15%;
    left: 5%;
}

.cc .logo {
    width: 20%;
    height: 100%;
    top: 10%;
    right: 10%;
    display: none
}

.cc .number {
    width: 80%;
    height: 20%;
    top: 45%;
    left: 10%;
    text-align: center
}

.cc .name, .cc-back .sign {
    left: 5%;
    position: absolute
}

.cc .name {
    width: 60%;
    height: auto;
    bottom: 15%
}

.cc .date {
    width: 30%;
    height: auto;
    position: absolute;
    right: 10%;
    bottom: 10%
}

    .cc .date .left {
        width: 30%;
        display: inline-block;
        float: left;
        padding-top: 10%
    }

    .cc .date .right {
        width: 70%;
        display: inline-block;
        float: right;
        text-align: center
    }

.cc-back .magnet {
    width: 100%;
    height: 20%;
    position: absolute;
    background: #efefef;
    top: 15%
}

.cc-back .sign {
    width: 65%;
    height: 15%;
    background: #fff;
    top: 40%
}

.cc-back .cvc {
    width: 25%;
    height: auto;
    position: absolute;
    color: #333;
    top: 40%;
    right: 5%;
    text-align: center
}

.cc-back .copyright {
    width: 65%;
    height: 20%;
    position: absolute;
    top: 70%;
    right: 5%;
    color: #666;
    text-align: justify
}

.cc, .cc-back {
    border-radius: 4%;
    z-index: 1
}

    .cc .date .right span, .cc .name, .cc .number {
        color: #333;
    }

    .cc .logo, .cc .number, .chip .mc {
        position: absolute
    }

.cc-back {
    transform: rotateY(180deg)
}

    .cc .chip, .cc-back .chip {
        width: 18%;
        height: 18%;
        position: absolute;
        background: #ddd;
        border-radius: 5%;
        top: 10%;
        left: 10%
    }

    .cc-back .chip {
        top: 70% !important;
        left: 5% !important
    }

.chip .mc {
    /* width: 65%; */
    /* height: 70%; */
    /* background: #aaa; */
    top: 15%;
    left: 5%;
}

.cc .logo {
    width: 20%;
    height: 100%;
    top: 10%;
    right: 10%;
    display: none
}

.cc .number {
    width: 80%;
    height: 20%;
    top: 45%;
    left: 10%;
    text-align: center
}

.cc .name, .cc-back .sign {
    left: 5%;
    position: absolute
}

.cc .name {
    width: 60%;
    height: auto;
    bottom: 15%
}

.cc .date {
    width: 30%;
    height: auto;
    position: absolute;
    right: 10%;
    bottom: 10%
}

    .cc .date .left {
        width: 30%;
        display: inline-block;
        float: left;
        padding-top: 10%
    }

    .cc .date .right {
        width: 70%;
        display: inline-block;
        float: right;
        text-align: center
    }

.cc-back .magnet {
    width: 100%;
    height: 20%;
    position: absolute;
    background: #efefef;
    top: 15%
}

.cc-back .sign {
    width: 65%;
    height: 15%;
    background: #fff;
    top: 40%
}

.cc-back .cvc {
    width: 25%;
    height: auto;
    position: absolute;
    color: #333;
    top: 40%;
    right: 5%;
    text-align: center
}

.cc-back .copyright {
    width: 65%;
    height: 20%;
    position: absolute;
    top: 70%;
    right: 5%;
    color: #666;
    text-align: justify
}