@keyframes show {
    100% {opacity: 1;transform: translateY(0);}
}

@keyframes zoom {
    100% {opacity: 1;transform: scale(1);}
}
@keyframes flipX {
    100% {opacity: 1;transform: rotateY(0deg);}
}

.container{width: 100%;height: 100vh;background: url(../images/bg.jpg) no-repeat center;background-size: cover;}
.container .bg{position: absolute;top: 0;width: 37.5%;padding-bottom: 27%;}
.container .bg.left{left: 0;}
.container .bg.right{right: 0;}
.container .bg img{position: absolute;width: 25.8%;}
.container .bg img{opacity: 0;transform: translateY(30px);animation: show 0.5s forwards 2.2s;}
.container .bg img.polygon1{width: 24.4%;left: 0;top: 0;animation-delay: 2.8s;}
.container .bg img.polygon2{top: 0;left: 26.38%;animation-delay: 3s;}
.container .bg img.polygon3{width: 25.5%;left: 26.6%;top: 10.5%;transform: rotateY(90deg);animation: flipX 0.5s forwards 3.2s;}
.container .bg img.polygon4{left: 52.22%;top: 0;top: -11%;animation-delay: 3s;}
.container .bg img.polygon5{width: 21.25%;left: 53.05%;top: 34%;animation-delay: 3.2s;}
.container .bg img.polygon6{width: 13.61%;left: 74.16%;top: 21%;transform: rotateY(90deg);animation: flipX 0.5s forwards 3.4s;}
.container .bg img.polygon7{width: 7.5%;left: 77.22%;top: 45%;transform: scale(0);animation: zoom 0.5s forwards 3.6s;}
.container .bg img.polygon8{width: 13.61%;left: 86.8%;top: 0;transform: translateY(0);animation: show 0.5s forwards 3.8s;}

.container .bg.right img{left: auto;}
.container .bg.right img.polygon1{right: 0;}
.container .bg.right img.polygon2{right: 26.38%;}
.container .bg.right img.polygon3{right: 26.6%;}
.container .bg.right img.polygon4{right: 52.22%;}
.container .bg.right img.polygon5{right: 53.05%;}
.container .bg.right img.polygon6{right: 74.16%;}
.container .bg.right img.polygon7{right: 77.22%;}
.container .bg.right img.polygon8{right: 86.8%;}

.container .content{padding-top: 12%;text-align: center;display: flex;flex-direction: column;align-items: center;position: relative;z-index: 3;}
.container .content .logo{height: 1.57rem;}
.container .content .ch{height: 2.4rem;margin: 1.73rem 0 0;}
.container .content .txt{padding: 1.73rem 0 0;}
.container .content .txt img{height: 2.4rem;margin-right: 0.53rem;transform: translate3d(100px, 0, 0);filter: blur(60px);opacity: 0;}
.container .content .txt img:last-child{margin-right: 0;}
.container .content .txt.show img{transition: transform 1.2s cubic-bezier(0.3, 0.2, 0, 1), opacity 1.2s cubic-bezier(0.3, 0.2, 0, 1), filter 0.8s cubic-bezier(0.3, 0.2, 0, 1);transform: translate3d(0, 0, 0);filter: none;opacity: 1;}
.container .content .en{height: 0.53rem;margin: 0.73rem 0 0.93rem;}
.container .content .btn{width: 10.03rem;height: 3.33rem;background: url(../images/btn.svg) no-repeat center;background-size: 100%;text-align: center;line-height: 3.33rem;color: #41B6FF;font-weight: bold;}
.container .content .logo,
.container .content .en{transform: translateY(50px);opacity: 0;}
.container .content .btn{transform: scale(0);opacity: 0;}
.container .bg{animation: show 3s forwards 0.2s;}
.container .content .logo{animation: show 1s forwards 0.2s;}
.container .content .en{animation: show 1s forwards 1.8s;}
.container .content .btn{animation: zoom 1s forwards 2s;}
.container .content .btn:hover span{opacity: 0;animation: txtAni 0.8s ease-in-out forwards;}
.container .content .btn:hover span:nth-child(2){animation-delay: 0.1s;}
.container .content .btn:hover span:nth-child(3){animation-delay: 0.3s;}
.container .content .btn:hover span:nth-child(4){animation-delay: 0.5s;}
@keyframes txtAni {
    0% {
    	opacity: 0;
        transform:translateY(0);
    }
    50% {
        transform:translateY(-0.67rem);
    }
    100% {
    	opacity: 1;
        transform:translateY(0);
    }
}

@media screen and (max-width: 1620px){

}
@media screen and (max-width: 1480px){

}

@media screen and (max-width: 1300px){
}


@media screen and (max-width: 1024px){

}

@media screen and (max-width: 760px){
.container .content{padding-top: 24%;}
.container .content .logo{height: 1.2rem;}
.container .content .txt img{height: 1.6rem;margin-right: 0.2rem;}
.container .content .en{height: 0.4rem;}
}

@media screen and (max-width: 468px){
.container .content{padding-top:34%;}
.container .content .en{height: 0.3rem;}
.container .content .btn{width: 6rem;height: 1.8rem;line-height: 2.66rem;}
.container .content .txt img{height: 1.2rem;}
}