html,
body {
    height: 100%;
}

body {
    background-image: url(../../images/zvo6321/bg.png) !important;
     background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
}
.mark-center {
    background-image: url(../../images/zvo6321/icon.png);
    background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: bottom center;
         z-index: 10;
}

.mark-left {
    background-image: url(../../images/zvo6321/model-left.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 92%;
    z-index: 1;
}

.mark-right {
    background-image: url(../../images/zvo6321/model-right.png);
   background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 92%;
     z-index: 1;
}

.land-logo {
    background-image: url(../../images/zvo6321/km.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 10;
}

.bg-form {
    background-image: url(../../images/zvo6321/register_box.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 10;
}

.content_wrap {
    max-width: 658px  !important;
    height: 100%;
    position: relative;
    margin: auto;
}


.mark-bottom{
    background-image: url(../../images/zvo6321/dai.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 10;
    background-position-y: 91%;
}


.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 50;
}

.card-body form {
    width: 58%;
    margin: 73% auto 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#formregister .form-group {
    height: 147px;
    margin-bottom: 0;
}

@media(min-width: 540px) {
    #formregister .items-group {
       margin-bottom: 7px;
        margin-left: 75px;
        height: 45px;
    }

    .container {
        height: 100%;
    }
}

#formregister .input-group input {
    font-size: 18px;
    font-weight: 500;
    color: #7d7d7d !important;
    border-radius: 0 13px 13px 0px !important;
}

#formregister .input-group input::placeholder {
    color: #7d7d7d;
}

.pop-coverflow {width: 100%;height: 100%;position: fixed;top: 0%;left: 0%;background-color: #00000054;z-index: 999;display: none;}
.pop-coverflow .pop-cards {width: 90%;max-width: 640px;position: fixed;list-style-type: none;padding: 0;overflow: unset;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.pop-coverflow .pop-card {position: absolute;top: 0;left: 0;z-index: 2;border: 2px solid var(--color);background: #ccc;border-radius: 10px;box-shadow: 0 0 40px #000;
transform: translateY(-84px) rotate(0deg) translateX(0px) scale(0.90);transition: transform 0.6s cubic-bezier(.8, .2, .1, 0.8) 0.1s, background 0.4s linear;cursor: pointer;user-select: none;:last-child {margin-bottom: 0;}}
.pop-coverflow .card--out {animation: card-out 0.6s cubic-bezier(0.8, .2, .1, 0.8);transform: translateY(-120px) rotate(0deg) translateX(0px) scale(0.80);z-index: 1;background: #bbb;}
.pop-coverflow .card--next {z-index: 5;transform: translateY(-45px) rotate(0deg) translateX(0px) scale(0.95);}
@keyframes card-out {
    0% {z-index: 20;transform: translateY(0px) rotate(0deg);}
    50% {transform: translateY(120%) rotate(0deg) translateX(0px);}
    80% {z-index: 1;}
    100% {transform: translateY(50px) rotate(0deg) translateX(0px) scale(0.80);}
}
.pop-coverflow .card--current {cursor: auto;user-select: auto;position: relative;z-index: 10;opacity: 1;background: #EEE;transform: rotate(0deg) translateX(0%) scale(1);}
.pop-coverflow .pop-card img {width: 100%;border-radius: 10px;}
.pop-coverflow .close-pop {
    position: absolute;
    top: -60px;
    right: 17px;
    z-index: 100;
    width: 32px;
    height: 32px;
    background: red;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
}
button.close-pop{color: #fff!important;}