@charset "utf-8";


html, body {
    height: 100%;
}


body {
    background: url(/images/welcome-bj.jpg) repeat;
    overflow: hidden;
}

.main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7%;
}

.main-icon a {
    display: flex;
    justify-content: center;
}

.gx-logo-text {
    border-top: 2px solid #be907f;
    padding-top: 40px;
    margin-bottom: 15.7vh;
    position: relative;
}

.guangdian {
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateY(-50%) translateX(-50%);
    z-index: 9;
    /* box-shadow: 0 0 150px 100px rgba(249, 245, 242, 1); */
    box-shadow: 0 0 100px 50px rgb(249 245 242 / 80%);
    margin-left: -150px;
    animation: guangdian 5s 1 linear;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}

.guangdian::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 1920px;
    height: 2px;
    background: #be907f;
    background: linear-gradient(90deg, #be907f, #f9f5f2, #be907f);
    box-shadow: 0 0 150px 100px rgba(212, 181, 170, .4);
    box-shadow: 0 0 550px 100px rgba(212, 181, 170, .3);
    /* box-shadow: 0 0 550px 100px rgba(212, 181, 170, .5); */
}

.guangdian::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 198px;
    border-radius: 50%;
    height: 5px;
    background: rgba(249, 245, 242, 1);
    box-shadow: 0 0 11px 15px rgb(249 245 242 / 24%);
    transform: translateX(-50%) translateY(-50%);
    /* transform: translateX(-50%) translateY(-50%) scaleX(.7) scaleY(.6); */
    z-index: 1;
}

.guangdian div {
    width: 60px;
    border-radius: 50%;
    height: 5px;
    background: rgba(249, 245, 242, 1);
    box-shadow: 0 0 11px 15px rgb(249 245 242);
    transform: scaleX(.7) scaleY(.45);
    z-index: 9;
    position: relative;
    animation: guangdian2 5s 1 linear;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}

.gx-logo-text a {
    display: flex;
    justify-content: center;
}

.gx-logo div {
    display: flex;
    justify-content: center;
    transform-style: preserve-3d;
    /* perspective: 100px; */
    animation: logo_rotate 5s 1;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}

.gx-logo div a {
    display: block;
    height: 185px;
    position: relative;

}

.gx-logo div a img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 185px;
}

.gx-logo div a img:nth-child(1) {
    transform: translateX(-50%) translateZ(0);
    animation: logo_text_opc1 5s 1;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}

.gx-logo div a img:nth-child(2) {
    transform: translateX(-50%) translateZ(0) rotateY(-180deg);
    opacity: 0;
    animation: logo_text_opc2 5s 1;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}


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

    10% {
        opacity: 1;
    }

    20% {
        opacity: .9;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: .9;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: .9;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: .95;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        margin-left: 150px;
    }
}

@keyframes guangdian2 {
    0% {
        transform: scaleX(.7) scaleY(.45);
    }

    10% {
        transform: scaleX(.6) scaleY(.4);
    }

    20% {
        transform: scaleX(.6) scaleY(.45);
    }

    30% {
        transform: scaleX(.6) scaleY(.4);
    }

    40% {
        transform: scaleX(.7) scaleY(.45);
    }

    50% {
        transform: scaleX(.6) scaleY(.4);
    }

    60% {
        transform: scaleX(.7) scaleY(.45);
    }

    70% {
        transform: scaleX(.7) scaleY(.4);
    }

    80% {
        transform: scaleX(.7) scaleY(.45);
    }

    90% {
        transform: scaleX(.6) scaleY(.4);
    }

    100% {
        transform: scaleX(.7) scaleY(.45);
    }
}

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

    25% {
        transform: rotateY(0);
    }

    40% {
        transform: rotateY(0);
    }

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

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

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

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

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    40% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


@media screen and (max-width: 1024px){
    .gx-logo div a img{
        width:160px;
        height: auto;
    }
    .gx-logo-text a img{
        max-width: 85%;
    }
}