.mc-memberCard-border {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000007e;
    z-index: 1031;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.mc-memberCard-main {
    position: absolute;
    left: 50%;
    top: 30px;
    height: 550px;
    width: 320px;
    margin-left: -160px;
    border-radius: 10px;
    background-color: #ffc440;
}

.mc-memberCard-bottom {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    width: 320px;
    height: 35px;
    background-color: #343B3E;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    line-height: 35px;
    vertical-align: middle;
    color: #ffc440;
}

.mc-memberCard-close {
    position: absolute;
    right: 0;
    top: 0;
}

.mc-memberCard-bottom-left {
    cursor: pointer;
    padding: 0 0 0 35px;
    letter-spacing: 35px;
    border-right: #ffc440 dashed 1px;
}

.mc-memberCard-bottom-right {
    cursor: pointer;
    padding: 0 0 0 35px;
    letter-spacing: 35px;
}

.mc-memberCard-close::after {
    position: absolute;
    right: 5px;
    top: 5px;
    content: "";
    width: 30px;
    height: 30px;
    background-color: #fff;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    z-index: 1032;
}

.mc-memberCard-main-top {
    position: absolute;
    top: 0;
    width: 320px;
    height: 25px;
    background-color: #343B3E;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #ffc440;
    line-height: 25px;
    letter-spacing: 4px;
}

.mc-memberCard-main-mid {
    display: none;
    width: 320px;
}

.mc-memberCard-main-picture {
    margin-left: 32px;
    margin-top: 30px;
    width: 250px;
    height: 165px;
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 9px 6px 0px 0px #343b3e;
    box-shadow: 9px 6px 0px 0px #343b3e;
}

.mc-memberCard-main-user {
    padding: 10px 32px;
}

.mc-memberCard-main-user-account,
.mc-memberCard-main-user-phone {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 3px 0px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;

}

.mc-memberCard-main-user-label {
    border-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #343B3E;
    color: #ffc440;
    padding: 5px 0px;
}

.mc-memberCard-main-user-label-span-data {
    border-left: #ffc440 solid 1px;
    padding: 10px;
}

.mc-memberCard-main-user-label-span-title {
    padding: 10px 10px 10px 15px;
}

.mc-memberCard-main-foot {
    padding-top: 10px;
    padding-left: 32px;
}

.mc-memberCard-main-foot-logo img {
    height: 180px;
    width: 180px;

}

.mc-memberCard-main-foot-barcode {
    position: absolute;
    right: -53px;
    bottom: 120px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.mc-memberCard-main-login {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -95px;
    left: 20px;
    width: 280px;
}

.mc-memberCard-main-login p {
    border: none;
    margin-bottom: 10px;
    color: #343B3E;
    font-weight: bold;
    padding-left: 10px;
    font-size: 18px;
}

.mc-memberCard-main-login input {
    margin-bottom: 20px;
}

.mc-memberCard-main-instruction {
    padding: 20px;
    display: none;
    background-color: #000000e3;
    position: absolute;
    height: 89%;
    width: 100%;
    top: 26px;
    left: 0;
    color: #ffc440;
}

.mc-memberCard-main-instruction p {
    margin-bottom: 5px;
}

.instruction-title {
    font-size: 20px;
    font-weight: 600;
}

#hr_border {
    border-color: #343b3e;
}