header{margin: 0 auto;width: 1280px;height: 72px;font-size: 16px;display: flex;align-items: center;justify-content: space-between;}
header .logo{font-size: 22px;font-weight: 700;}
header .menu  a{margin: 0 15px}
header .user{display: flex;align-items: center;}
header .user a{margin: 0 0 0 10px;background: #f2f3f5;width: 72px;height: 40px;line-height: 40px;border-radius: 10px;text-align: center;display: block;}
header .user .sub{background: #0079bf;color: #fff;}
footer{margin: 0 auto;padding: 30px 0;width: 1280px;font-size: 14px;}

section{margin: 0 auto;width: 1280px;}
.m-intro{display: flex;align-items: center;}
.m-intro .cons{width: 50%;line-height: 1.2;font-size: 56px;font-weight: 700;}
.m-intro .cons .bns{margin: 40px 0 0 0;background: #0079bf;width: 128px;height: 52px;line-height: 52px;border-radius: 12px;font-size: 20px;font-weight: 400;color: #fff;text-align: center;display: block;}
.m-intro .pics{position: relative;width: 50%;height: 680px;display: flex;align-items: center;}
.m-intro .pics img{width: 100%;display: block;}
.m-intro .pics .list{position: relative;margin: 90px 120px 0 auto;width: 400px;height: 400px;transform: skew(-35deg, 25deg) rotate3D(5, -4, 0, 40deg) translate3d(0, 0, -50px);transform-style: preserve-3d;perspective-origin: 50% 50%;perspective: 2000px;}
.m-intro .pics .item{position: absolute;top: 0;left: 0;border-radius: 16px;overflow: hidden;transform-origin: 50% 50%;}

.it1{animation: t1 .5s 1s forwards;}
.it2{animation: t2 .5s 1s forwards;opacity: 0;}
.it3{animation: t3 .5s 1s forwards;opacity: 0;}
/* .it1{transform: translate3d(0, 0, 0)}
.it2{transform: translate3d(0, 0, -100px)}
.it3{transform: translate3d(0, 0, -200px)} */
@keyframes t1{
  100%{
    transform: translate3d(0, 0, 50px)
  }
}
@keyframes t2{
  100%{
    opacity: 1;
    transform: translate3d(0, 0, -50px)
  }
}
@keyframes t3{
  100%{
    opacity: 1;
    transform: translate3d(0, 0, -150px)
  }
}

.m-half{padding: 80px 0 0 0;min-height: 300px;display: flex;align-items: center;}
.m-half .box{width: 50%;}
.m-half .box:first-of-type{font-size: 48px;font-weight: 700;}
.m-half .box:last-of-type{text-align: center;}
.m-half .box .txt{font-size: 18px;font-weight: 400;}
.m-half .box .ctrl{padding: 24px 0 0 0;display: flex;}
.m-half .box .ctrl a{margin: 0 16px 0 0;background: #f2f3f5;width: 128px;height: 52px;line-height: 52px;border-radius: 12px;font-size: 20px;text-align: center;display: block;}
.m-half .box .ctrl .bns{background: #0079bf;color: #fff;}