*{
    padding: 0;
    margin: 0
}

a {
    text-decoration: none
}

html {
    scroll-behavior: smooth
}

body {
    width: 100%;
    height: 100vh;
    font-family: "Microsoft YaHei", sans-serif;
    overflow: hidden;
    background: url(../files/bg.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
}
.main{
    width: 1280px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
}
.main .img{
    margin-top:50px;
    width:70%;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}
.main .img img{
    width:100%;
    
}
.main .info{
    width: 30%;
    color: #fff;
    margin-top: -100px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.main .info h1{
    font-size: 54px;
    padding: 20px 0;
}
.main .info p{
    font-size: 18px;
}
.main .info .down{
    margin-top:40px;
}
.main .info .down a{
    align-items: center;
    background: #3f85ff;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    height: 76px;
    justify-content: center;
    margin: 25px auto;
    text-align: center;
    width: 288px;
    display: flex;
}
.main .info .down i {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../files/icon.png);
    background-size: 30px 30px;
    margin-right: 10px;
}
.main .info .down a:hover{
    background: #226ef2;
}
.bg{
    position: absolute;
    background: url(../files/bg1.png) no-repeat;
    background-size: 100% auto;
    height: 263px;
    left:0;
    bottom:0;
    width: 100%;
    z-index: 2;
}
.skin {
    background: url(../files/skin.png) no-repeat;
    background-size: 1920px auto;
    height: 462px;
    left: 50%;
    margin-left: -960px;
    margin-top: 38px;
    position: absolute;
    top: 50%;
    width: 1920px;
}
.spr-light-1{
    background: url(../files/spr-light.png) no-repeat;
    background-size: 555px auto;
    position: absolute;
    top: 50%;
    animation: light1 2s 1s infinite both;
    background-position: -252px -209px;
    height: 69px;
    left: 672px;
    margin-top: 113px;
    width: 236px;
}
.spr-light-2{
    background: url(../files/spr-light.png) no-repeat;
    background-size: 555px auto;
    position: absolute;
    top: 50%;
    animation: light2 2s 0.3s infinite both;
    background-position: -5px -209px;
    height: 69px;
    left: 854px;
    margin-top: 110px;
    width: 237px;
}
.spr-light-3{
    background: url(../files/spr-light.png) no-repeat;
    background-size: 555px auto;
    position: absolute;
    top: 50%;
    animation: light3 2s 0.7s infinite both;
    background-position: -5px -156px;
    height: 43px;
    left: 1118px;
    margin-top: -5px;
    width: 382px;
}
.spr-light-4{
    background: url(../files/spr-light.png) no-repeat;
    background-size: 555px auto;
    position: absolute;
    top: 50%;
    animation: light4 2s 1s infinite both;
    background-position: -5px -5px;
    height: 141px;
    left: 1050px;
    margin-top: 176px;
    width: 545px;
}
@keyframes light1{0%{opacity:0;transform:translate3d(-750px,-150px,0)}25%{opacity:1}50%,to{opacity:0;transform:translate3d(200px,50px,0)}}
@keyframes light2{0%{opacity:0;transform:translate3d(-750px,-150px,0)}25%{opacity:1}50%,to{opacity:0;transform:translate3d(200px,50px,0)}}
@keyframes light3{0%{opacity:0;transform:translate3d(-750px,-100px,0)}25%{opacity:1}50%,to{opacity:0;transform:translateZ(0)}}
@keyframes light4{0%{opacity:0;transform:translate3d(-750px,-200px,0)}25%{opacity:.2}50%,to{opacity:0;transform:translateZ(0)}}