.kp-iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.kp-iframe iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.kp-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url(../images/yt-pc-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.kp-logo {
    width: 24%;
    /* height: 485px; */
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%) translateY(0) scale(0.8);
    transition: transform 1s ease;
    z-index: 10;
    -webkit-animation: btncarton 2s infinite;
    animation: btncarton 2s infinite;
}

.kp-diaosu {
    position: absolute;
    width: 36%;
    left: 50%;
    top: 45%;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-100px) scale(0.5);
    transition: all 2s ease;
}
.kp-stone {
    position: absolute;
    width: 29%;
    left: 50%;
    top: 72%;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateX(-50%) translateY(30%);
    transition: all 0.5s ease 2s;
}
.kp-cloud {
    position: absolute;
    width: 227px;
    top: -100%;
    left: 15%;
    z-index: 11;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease 3s;
    -webkit-animation: wrj 2s infinite;
    animation: wrj 2s infinite;
}

.kp-btn {
    position: absolute;
    display: block;
    width: 166px;
    height: 50px;
    left: 50%;
    visibility: hidden;
    transform: translateX(-50%);
    transition: all 1s ease 2s;
    opacity: 0;
    bottom: 7%;
    z-index: 11;
    color: #fff;
    border-radius: 30px;
    border: 2px solid #fff;
    line-height: 50px;
    text-align: center;
    transition: all 0.3s ease 3s;
    /* -webkit-animation: btncarton 1s infinite;
    animation: btncarton 1s infinite; */
}
.kp-btn img {
    width: 100%;
}

.kp-pc-yun,
.kp-mobile-yun {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.kp-yun {
    position: absolute;
}
.kp-yun-1,
.kp-yun-2,
.kp-yun-3,
.kp-yun-10,
.kp-yun-11,
.kp-yun-12 {
    left: 0;
    opacity: 0;
}
.kp-yun-4,
.kp-yun-5,
.kp-yun-6,
.kp-yun-7,
.kp-yun-8,
.kp-yun-9 {
    right: 0;
    opacity: 0;
}

.kp-yun-1 {
    top: 0;
    width: 900px;
}
.kp-yun-2 {
    top: 18%;
    width: 435px;
}
.kp-yun-3 {
    top: 44%;
    width: 436px;
}

.kp-yun-4 {
    top: -5%;
    right: -2%;
    width: 900px;
}
.kp-yun-5 {
    top: 20%;
    width: 586px;
}
.kp-yun-6 {
    top: 44%;
    width: 300px;
}
.kp-yun-7 {
    top: 5%;
    right: -20%;
    width: 86%;
    -webkit-animation: myun5 30s linear infinite;
    animation: myun5 30s linear infinite;
}
.kp-yun-8 {
    top: 43.75%;
    right: -15%;
    width: 66%;
    -webkit-animation: myun4 50s linear infinite;
    animation: myun4 50s linear infinite;
}
.kp-yun-9 {
    width: 53%;
    top: 60%;
    right: -5%;
    -webkit-animation: myun4 30s linear infinite;
    animation: myun4 30s linear infinite;
}

.kp-yun-10 {
    top: 10%;
    left: -20%;
    width: 88%;
    -webkit-animation: myun 20s infinite;
    animation: myun 20s infinite;
}
.kp-yun-11 {
    top: 38%;
    left: -10%;
    width: 76%;
    transform: translateX(-50%);
    -webkit-animation: myun2 20s infinite;
    animation: myun2 20s infinite;
}
.kp-yun-12 {
    width: 66%;
    top: 53%;
    left: -5%;
    -webkit-animation: myun3 30s linear infinite 5s;
    animation: myun3 30s linear infinite 5s;
}

/* @media screen and (max-width: 1440px) {
    .kp-logo {
        width: 30%;
        top: 15%;
    }
    .kp-diaosu {
        width: 300px;
    }
    .kp-stone {
        width: 500px;
    }
    .kp-cloud {
        width: 300px;
    }
    .kp-btn {
        width: 166px;
        height: 50px;
        bottom: 5%;
    }
} */

@media screen and (max-width: 767px) {
    .kp-container {
        background-image: url(../images/kp-moblie-bg.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .kp-logo {
        width: 78%;
        top: 20%;
    }
    .kp-diaosu {
        width: 110%;
        bottom: 0;
        top: 48%;
    }
    .kp-stone {
        width: 75%;
        top: 75%;
        /* right: -20%; */
    }
    .kp-cloud {
        width: 260px;
        top: -20px;
        left: -100%;
        transform: scale(0);
        -webkit-animation: wrj2 30s linear infinite;
        animation: wrj2 30s linear infinite;
    }
    .kp-btn {
        width: 140px;
        height: 40px;
        line-height: 40px;
        bottom: 8%;
    }
}
.kp-container.active .kp-logo {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}
.kp-container.active .kp-diaosu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}
.kp-container.active .kp-stone {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.kp-container.active .kp-cloud {
    opacity: 1;
    visibility: visible;
    top: 0;
}
.kp-container.active .kp-btn {
    opacity: 1;
    visibility: visible;
}

.kp-container.active .kp-yun-1,
.kp-container.active .kp-yun-2,
.kp-container.active .kp-yun-3,
.kp-container.active .kp-yun-4,
.kp-container.active .kp-yun-5,
.kp-container.active .kp-yun-6,
.kp-container.active .kp-yun-7,
.kp-container.active .kp-yun-8,
.kp-container.active .kp-yun-9,
.kp-container.active .kp-yun-10,
.kp-container.active .kp-yun-11,
.kp-container.active .kp-yun-12 {
    opacity: 1;
}

@-webkit-keyframes btncarton {
    0% {
        transform: translateX(-50%) scale(0.9);
    }
    50% {
        transform: translateX(-50%) scale(1);
    }
    100% {
        transform: translateX(-50%) scale(0.9);
    }
}

@keyframes btncarton {
    0% {
        transform: translateX(-50%) scale(0.9);
    }
    50% {
        transform: translateX(-50%) scale(1);
    }
    100% {
        transform: translateX(-50%) scale(0.9);
    }
}

@-webkit-keyframes myun {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes myun {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes myun2 {
    0% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes myun2 {
    0% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@-webkit-keyframes myun3 {
    0% {
        left: -5%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: -5%;
    }
}
@keyframes myun3 {
    0% {
        left: -5%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: -5%;
    }
}
@-webkit-keyframes myun4 {
    0% {
        right: -5%;
    }
    50% {
        right: 100%;
    }
    100% {
        right: -5%;
    }
}
@keyframes myun4 {
    0% {
        right: -5%;
    }
    50% {
        right: 100%;
    }
    100% {
        right: -5%;
    }
}
@-webkit-keyframes myun5 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes myun5 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes wrj {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes wrj {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes wrj2 {
    0% {
        left: -50%;
        transform: scale(0.4);
    }
    50% {
        left: 100%;
        transform: scale(1);
    }
    100% {
        left: -50%;
        transform: scale(0.4);
    }
}

@keyframes wrj2 {
    0% {
        left: -50%;
        transform: scale(0.4);
    }
    50% {
        left: 100%;
        transform: scale(1);
    }
    100% {
        left: -50%;
        transform: scale(0.4);
    }
}