.posbox {
    position: relative;
    width: 1000px;
    border-radius: 50%;
    margin: 0 auto;
    height: 160px;
    perspective: 1200px;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.fcg_box3_bgc {
    width: 1200px;
    height: 460px;
    padding-top: 100px;
    margin-top: 0;
}

.fcg_box3_q {
    transform-origin: center center;
}

.oh {
    overflow: hidden;
}

.rotatebox {
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    transform: translateZ(-1400px) rotateX(-15deg) rotateY(0deg);
    /* animation: formsas 20s linear infinite; */
    z-index: 99999;
    transition: transform 1s;
}


.rotatebox.ci0 {
    transform: translateZ(-1400px) rotateY(180deg);
}

.rotatebox.ci1 {
    transform: translateZ(-1400px) rotateY(270deg);
}

.rotatebox.ci2 {
    transform: translateZ(-1400px) rotateY(360deg);
}

.rotatebox.ci3 {
    transform: translateZ(-1400px) rotateY(450deg);
}

.rotatebox.ci0 .ratation1 {
    transform: translate3d(0, 200px, -600px) rotateY(-180deg);
}

.rotatebox.ci0 .ratation2 {
    transform: translate3d(800px, 150px, -200px) rotateY(-180deg);
}

.rotatebox.ci0 .ratation3 {
    transform: translate3d(-600px, -100px, 0) rotateY(-180deg);
}

.rotatebox.ci0 .ratation4 {
    transform: translate3d(-600px, 80px, -600px) rotateY(-180deg);
}

.rotatebox.ci1 .ratation1 {
    transform: translate3d(700px, 80px, -600px) rotateY(-270deg);
}

.rotatebox.ci1 .ratation2 {
    transform: translate3d(700px, 200px, 0) rotateY(-270deg);
}

.rotatebox.ci1 .ratation3 {
    transform: translate3d(200px, 150px, 800px) rotateY(-270deg);
}

.rotatebox.ci1 .ratation4 {
    transform: translate3d(0, -80px, -600px) rotateY(-270deg);
}

.rotatebox.ci2 .ratation1 {
    transform: translate3d(600px, -80px, -200px) rotateY(-360deg);
}

.rotatebox.ci2 .ratation2 {
    transform: translate3d(600px, 80px, 600px) rotateY(-360deg);
}

.rotatebox.ci2 .ratation3 {
    transform: translate3d(0, 200px, 700px) rotateY(-360deg);
}

.rotatebox.ci2 .ratation4 {
    transform: translate3d(-800px, 150px, 200px) rotateY(-360deg);
}

.rotatebox.ci3 .ratation1 {
    transform: translate3d(-200px, 150px, -800px) rotateY(-450deg);
}

.rotatebox.ci3 .ratation2 {
    transform: translate3d(200px, -100px, 600px) rotateY(-450deg);
}

.rotatebox.ci3 .ratation3 {
    transform: translate3d(-600px, 100px, 600px) rotateY(-450deg);
}

.rotatebox.ci3 .ratation4 {
    transform: translate3d(-700px, 200px, 0) rotateY(-450deg);
}

.oagebox {
    transition: transform 1s;
}

.poa {
    position: absolute;
}

.por {
    position: relative;
}

.tac {
    text-align: center;
}

.cover {
    width: 100%;
    height: 100%;
}

.iconbox {
    width: 130px;
    height: 130px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

.iconbox::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(210.86deg, rgba(49, 142, 255, .66) -248.03%, rgba(49, 142, 255, .2) 87.87%);
    backdrop-filter: blur(5px);
    left: 0;
    top: 0;
    /* opacity: 0.9; */
}

.ratation h4 {
    color: #318EFF;
    font-size: 36px;
}

.ratation {
    position: absolute;
    width: 300px;
    cursor: pointer;
    left: calc(50% - 150px);
    transition: transform 1s;
}

@keyframes formsas {
    0% {
        transform: translateZ(-1400px) rotateX(-15deg) rotateY(0deg);
    }

    50% {
        transform: translateZ(-1400px) rotateX(-15deg) rotateY(180deg);
    }

    100% {
        transform: translateZ(-1400px) rotateX(-15deg) rotateY(360deg);

    }
}

@keyframes trans1 {
    0% {
        transform: translateZ(-900px) rotateY(0deg);
    }

    50% {
        transform: translateZ(-900px) rotateY(-180deg);
    }

    100% {
        transform: translateZ(-900px) rotateY(-360deg);

    }
}

@keyframes trans2 {
    0% {
        transform: translateX(900px) rotateY(0deg);
    }

    50% {
        transform: translateX(900px) rotateY(-180deg);
    }

    100% {
        transform: translateX(900px) rotateY(-360deg);
    }
}

@keyframes trans3 {
    0% {
        transform: translateZ(900px) rotateY(0deg);
    }

    50% {
        transform: translateZ(900px) rotateY(-180deg);
    }

    100% {
        transform: translateZ(900px) rotateY(-360deg);

    }
}

@keyframes trans4 {
    0% {
        transform: translateX(-900px) rotateY(0deg);
    }

    50% {
        transform: translateX(-900px) rotateY(-180deg);
    }

    100% {
        transform: translateX(-900px) rotateY(-360deg);

    }

}

@keyframes txtop01 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes txtop02 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes txtop02 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes txtop03 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes txtop04 {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rot2 {
    0% {
        transform: rotateY(0);
    }

    50% {
        transform: rotateY(-180deg);
    }

    100% {
        transform: rotateY(-360deg);
    }
}

/* @keyframes rota {
    0% {
        transform:rotateX(90deg) rotateY(0deg) ;
    }

    50% {
        transform:rotateX(90deg) rotateY(-180deg) ;
    }

    100% {
        transform:rotateX(90deg)rotateY(-360deg) ;

    }
} */

.cirlimg {
    transform: translateX(-50%) translateY(100px) translateZ(-1400px) scale(2.4) rotateX(83deg) rotateY(-5deg);
    left: 50%;
    top: -360px;
    width: 840px;
    opacity: 0.5;
    z-index: -9999;
}

/* .posbox:hover * {
    animation-play-state: start;
}
.rotatebox:hover {
    
} */
.ratation1 {
    transform: translateZ(-600px) rotateY(-180deg);
    /* animation: trans1 20s linear infinite; */
}

.ratation2 {
    transform: translateX(600px) rotateY(0deg);
    /* animation: trans2 20s linear infinite; */
}

.ratation3 {
    transform: translateZ(600px) rotateY(0deg);
    /* animation: trans3 20s linear infinite; */
}

.ratation4 {
    transform: translateX(-600px) rotateY(0deg);
    /* animation: trans4 20s linear infinite; */
}

/* .ratation1 p {
    animation: txtop01 20s linear infinite;
}

.ratation2 p {
    opacity: 0;
    animation: txtop03 20s linear infinite;
}

.ratation3 p {
    opacity: 0;
    animation: txtop04 20s linear infinite;
}

.ratation4 p {
    opacity: 0;
    animation: txtop02 20s linear infinite;
} */



.oagebox p {
    position: absolute;
    width: 620px;
    left: 50%;
    font-weight: 700;
    font-size: 24px;
    line-height: 180%;
    opacity: 0;
    transform: translateX(-50%);

}

.ratation.active p {
    opacity: 1;
}

.fcg_box3_q {
    position: absolute;
    left: 50%;
    height: 800px;
    width: 800px;
    top: -160px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #fff;
    transform-origin: center center;
    transform: translateX(-50%) translateZ(-1200px);
    /* animation: rot2 20s linear infinite; */
}


.rotation3D__item {
    width: 586px;
}