.inputx {
    position: relative;
}

.eye {
    margin-left: 240px;
    position: absolute;
    top: 11px;
    right: 22px;
}

.mobile-eye {
    width: 20px;
    position: absolute;
    top: 13px;
    right: 8px;
    color: white;
}

.mobil-eye {
    width: 20px;
    position: absolute;
    top: 15px;
    right: 8px;
}

.mb-bm {
    position: fixed;
    right: -20px;
    bottom: 70px;
    font-size: 36px;
    text-decoration: none;
    width: 61px;
    height: 45px;
    color: rgba(89, 171, 185, 0.6588235294117647) !important;
    z-index: 1000;
}

.mb-bm:hover {
    color: rgba(89, 171, 185, 0.6588235294117647);
    text-decoration: none;
}

@keyframes ball-pulse-sync {
    33% {
        transform: translateY(10px);
        -ms-transform: translateY(10px);
        /* IE 9 */
        -moz-transform: translateY(10px);
        /* Firefox */
        -webkit-transform: translateY(10px);
        /* Safari 和 Chrome */
        -o-transform: translateY(10px);
    }
    66% {
        transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        /* IE 9 */
        -moz-transform: translateY(-10px);
        /* Firefox */
        -webkit-transform: translateY(-10px);
        /* Safari 和 Chrome */
        -o-transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        -ms-transform: translateY(0);
        /* IE 9 */
        -moz-transform: translateY(0);
        /* Firefox */
        -webkit-transform: translateY(0);
        /* Safari 和 Chrome */
        -o-transform: translateY(0);
    }
}

.ball-pulse-sync>div:nth-child(1) {
    animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(2) {
    animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(3) {
    animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(4) {
    animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(5) {
    animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync 0.6s 0.28s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(6) {
    animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync 0.6s 0.42s infinite ease-in-out;
}

.ball-pulse-sync>div {
    width: 13px;
    height: 50px;
    border-radius: 100%;
    margin: 25px 12px;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    display: inline-block;
    background-size: 100% 100%;
}

.box {
    overflow: hidden;
    position: relative;
}

.loadinga {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #a0cbde;
    animation: loadinga 1.5s linear infinite;
    -webkit-animation: loadinga 1.5s linear infinite;
    position: relative;
    top: 19%;
    left: 13px;
    margin: auto;
}

.loadingb {
    position: absolute;
    top: 3px;
    left: 91px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #3cd7ed, #9df1be);
}

@keyframes loadinga {
    0% {
        transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        /* IE 9 */
        -moz-transform: rotate(0) scale(1);
        /* Firefox */
        -webkit-transform: rotate(0) scale(1);
        /* Safari 和 Chrome */
        -o-transform: rotate(0) scale(1);
    }
    20% {
        transform: rotate(75deg) scale(1.04);
        -ms-transform: rotate(75deg) scale(1.04);
        /* IE 9 */
        -moz-transform: rotate(75deg) scale(1.04);
        /* Firefox */
        -webkit-transform: rotate(75deg) scale(1.04);
        /* Safari 和 Chrome */
        -o-transform: rotate(75deg) scale(1.04);
    }
    40% {
        transform: rotate(150deg) scale(1.08);
        -ms-transform: rotate(150deg) scale(1.08);
        /* IE 9 */
        -moz-transform: rotate(150deg) scale(1.08);
        /* Firefox */
        -webkit-transform: rotate(150deg) scale(1.08);
        /* Safari 和 Chrome */
        -o-transform: rotate(150deg) scale(1.08);
    }
    60% {
        transform: rotate(225deg) scale(1.12);
        -ms-transform: rotate(225deg) scale(1.12);
        /* IE 9 */
        -moz-transform: rotate(225deg) scale(1.12);
        /* Firefox */
        -webkit-transform: rotate(225deg) scale(1.12);
        /* Safari 和 Chrome */
        -o-transform: rotate(225deg) scale(1.12);
    }
    80% {
        transform: rotate(300deg) scale(1.08);
        -ms-transform: rotate(300deg) scale(1.08);
        /* IE 9 */
        -moz-transform: rotate(300deg) scale(1.08);
        /* Firefox */
        -webkit-transform: rotate(300deg) scale(1.08);
        /* Safari 和 Chrome */
        -o-transform: rotate(300deg) scale(1.08);
    }
    100% {
        transform: rotate(360deg) scale(1.04);
        -ms-transform: rotate(360deg) scale(1.04);
        /* IE 9 */
        -moz-transform: rotate(360deg) scale(1.04);
        /* Firefox */
        -webkit-transform: rotate(360deg) scale(1.04);
        /* Safari 和 Chrome */
        -o-transform: rotate(360deg) scale(1.04);
    }
}

.demo {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 342px;
    left: 534px;
}

.an.img {
    width: 75%;
    height: 75%;
}

.ball-pulse-sync img {
    width: 39px;
    height: 39px;
    margin-top: -778px;
}

@keyframes rotation {
    from {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        /* IE 9 */
        -moz-transform: rotateY(0deg);
        /* Firefox */
        -webkit-transform: rotateY(0deg);
        /* Safari 和 Chrome */
        -o-transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        /* IE 9 */
        -moz-transform: rotateY(360deg);
        /* Firefox */
        -webkit-transform: rotateY(360deg);
        /* Safari 和 Chrome */
        -o-transform: rotateY(360deg);
    }
}

.an {
    transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    /* IE 9 */
    -moz-transform: rotateY(360deg);
    /* Firefox */
    -webkit-transform: rotateY(360deg);
    /* Safari 和 Chrome */
    -o-transform: rotateY(360deg);
    animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
}

@keyframes ball-pulse-sync1 {
    33% {
        transform: translateY(10px);
        -ms-transform: translateY(10px);
        /* IE 9 */
        -moz-transform: translateY(10px);
        /* Firefox */
        -webkit-transform: translateY(10px);
        /* Safari 和 Chrome */
        -o-transform: translateY(10px);
    }
    66% {
        transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        /* IE 9 */
        -moz-transform: translateY(-10px);
        /* Firefox */
        -webkit-transform: translateY(-10px);
        /* Safari 和 Chrome */
        -o-transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        -ms-transform: translateY(0);
        /* IE 9 */
        -moz-transform: translateY(0);
        /* Firefox */
        -webkit-transform: translateY(0);
        /* Safari 和 Chrome */
        -o-transform: translateY(0);
    }
}

.ball-pulse-sync1>div:nth-child(1) {
    animation: ball-pulse-sync1 0.6s -0.14s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync1 0.6s -0.14s infinite ease-in-out;
}

.ball-pulse-sync1>div:nth-child(2) {
    animation: ball-pulse-sync1 0.6s -0.07s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync1 0.6s -0.07s infinite ease-in-out;
}

.ball-pulse-sync1>div:nth-child(3) {
    animation: ball-pulse-sync1 0.6s 0s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync1 0.6s 0s infinite ease-in-out;
}

.ball-pulse-sync1>div:nth-child(4) {
    animation: ball-pulse-sync1 0.6s 0.14s infinite ease-in-out;
    -webkit-animation: ball-pulse-sync1 0.6s 0.14s infinite ease-in-out;
}

.ball-pulse-sync1>div {
    width: 29px;
    height: 29px;
    border-radius: 100%;
    margin: 7% -1px;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    display: inline-block;
    background-size: 100% 100%;
}

#loader {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.main {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.box1 {
    width: 80%;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.content {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.box2 {
    width: 100%;
    height: 60%;
    position: absolute;
    ;
    top: 0;
    left: 0;
}

.loadinga1 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #a0cbde;
    animation: loadinga1 1.5s linear infinite;
    -webkit-animation: loadinga1 1.5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.loadingb1 {
    margin-top: 5px;
    left: 58px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #3cd7ed, #9df1be);
}

@keyframes loadinga1 {
    0% {
        transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        /* IE 9 */
        -moz-transform: rotate(0) scale(1);
        /* Firefox */
        -webkit-transform: rotate(0) scale(1);
        /* Safari 和 Chrome */
        -o-transform: rotate(0) scale(1);
    }
    20% {
        transform: rotate(75deg) scale(1.04);
        -ms-transform: rotate(75deg) scale(1.04);
        /* IE 9 */
        -moz-transform: rotate(75deg) scale(1.04);
        /* Firefox */
        -webkit-transform: rotate(75deg) scale(1.04);
        /* Safari 和 Chrome */
        -o-transform: rotate(75deg) scale(1.04);
    }
    40% {
        transform: rotate(150deg) scale(1.08);
        -ms-transform: rotate(150deg) scale(1.08);
        /* IE 9 */
        -moz-transform: rotate(150deg) scale(1.08);
        /* Firefox */
        -webkit-transform: rotate(150deg) scale(1.08);
        /* Safari 和 Chrome */
        -o-transform: rotate(150deg) scale(1.08);
    }
    60% {
        transform: rotate(225deg) scale(1.12);
        -ms-transform: rotate(225deg) scale(1.12);
        /* IE 9 */
        -moz-transform: rotate(225deg) scale(1.12);
        /* Firefox */
        -webkit-transform: rotate(225deg) scale(1.12);
        /* Safari 和 Chrome */
        -o-transform: rotate(225deg) scale(1.12);
    }
    80% {
        transform: rotate(300deg) scale(1.08);
        -ms-transform: rotate(300deg) scale(1.08);
        /* IE 9 */
        -moz-transform: rotate(300deg) scale(1.08);
        /* Firefox */
        -webkit-transform: rotate(300deg) scale(1.08);
        /* Safari 和 Chrome */
        -o-transform: rotate(300deg) scale(1.08);
    }
    100% {
        transform: rotate(360deg) scale(1.04);
        -ms-transform: rotate(360deg) scale(1.04);
        /* IE 9 */
        -moz-transform: rotate(360deg) scale(1.04);
        /* Firefox */
        -webkit-transform: rotate(360deg) scale(1.04);
        /* Safari 和 Chrome */
        -o-transform: rotate(360deg) scale(1.04);
    }
}

.demo1 {
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0px;
    left: 0;
}

.an1.img {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.ball-pulse-sync1 {
    width: 100%;
    height: 40%;
    position: absolute;
    top: 46%;
    left: 0;
}

.ball-pulse-sync1 div img {
    width: 100%;
    height: 100%;
}

@keyframes rotation {
    from {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        /* IE 9 */
        -moz-transform: rotateY(0deg);
        /* Firefox */
        -webkit-transform: rotateY(0deg);
        /* Safari 和 Chrome */
        -o-transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        /* IE 9 */
        -moz-transform: rotateY(360deg);
        /* Firefox */
        -webkit-transform: rotateY(360deg);
        /* Safari 和 Chrome */
        -o-transform: rotateY(360deg);
    }
}

.an1 {
    transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    /* IE 9 */
    -moz-transform: rotateY(360deg);
    /* Firefox */
    -webkit-transform: rotateY(360deg);
    /* Safari 和 Chrome */
    -o-transform: rotateY(360deg);
    animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
}


/* Fay 20210607 */

img {
    max-width: 100%;
}