html
body{
    margin: 0;
    overflow-x: hidden;
}
/* ------------ zone1 --------------- */
.video1{
    width: 194rem;
}
.saclecontent{
    /* position: absolute;
    min-width: 175rem;
    height: 100%;
    top : 0rem; */
}
.p1{
    font-size: 18rem;
    color: white;
    position: absolute;
    width: 100%;
    top: 30rem;
    text-align: center;
    /* font-family: 'hansannormal'; */
    font-weight: 500;
    height: 31rem;
}
.p2{
    font-size: 7rem;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 56rem;
    /* font-family: 'hansanlight'; */
    font-weight: 500;
}
.img1{
    position: absolute;
    top: 71.4rem;
    width: 194rem;
}
.img2{
    position: absolute;
    top: 27rem;
    left:8.8rem;
    width: 2rem;
}
.img3{
    position: absolute;
    top: 82rem;
    left:173rem;
    width: 12rem;
}
.img4{
    position: absolute;
    top: 92rem;
    left:177rem;
    width: 1.6rem;
}


.p3{
    position: absolute;
    top: 6rem;
    left:8.4rem;
    color: white;
    font-size: 2rem;
    -webkit-transform:rotate(180deg);
    
     writing-mode:vertical-lr;
}
.p30{
    font-size: 3rem;
    line-height: 4.7rem;
    color: white;
    position: absolute;
    top: 117rem;
    left: 50rem;
    width: 88rem;
    /* opacity: 0; */
    font-family: "hansanlight";
    font-weight: 300;
}
.mask{
    position: absolute;
    top: 0;
    left:0;
    background-color: black;
    width: 100%;
    height: 108rem;
    opacity: 0;
}
.line1{
    position: absolute;
    top: 38.4rem;
    left:9rem;
    background-color: white;
    width: 2.2rem;
    height: 6rem;
    border-radius: 0.9rem;
}
.line2{
    position: absolute;
    top: 44.4rem;
    left:10rem;
    background-color: white;
    width: 0.2rem;
    height: 152rem;
    opacity:0.5;
}
/* ------------ zone2 --------------- */
.zone2{
    position: absolute;
    top: 196rem;
    left:0rem;
    width: 100%;
}
.line3{
    position: absolute;
    top: 0rem;
    left:9rem;
    background-color: white;
    width: 2.2rem;
    height: 6rem;
    border-radius: 0.9rem;
}
.line4{
    position: absolute;
    top: 6rem;
    left:10rem;
    background-color: white;
    width: 0.2rem;
    height: 122rem;
    opacity:0.5;
}
.p4{
    font-size: 4rem;
    color: white;
    position: absolute;
    top: 0rem;
    left: 17.6rem;
    font-family: "hansannormal";
}
.z4{
    position: absolute;
    top: 16rem;
    left: 30rem;
    width: 70rem;
    height: 50rem;
}
.z5{
    position: absolute;
    top: 40rem;
    left: 115rem;
    width: 70rem;
    height: 50rem;
}
.z6{
    position: absolute;
    top: 67rem;
    left: 30rem;
    width: 70rem;
    height: 50rem;
}
.content{
    position: absolute;
    top: 10rem;
    left: 0px;
    width: 100%;
    opacity: 0%;
}


.p44{
    font-size: 5rem;
    color: white;
    position: absolute;
    top: 15.5rem;
    left: 0px;
    font-family: "hansannormal";
    font-weight: 400;
}
.p45{
    font-size: 5rem;
    color: white;
    position: absolute;
    top: 23rem;
    left: 0px;
    font-family: "hansannormal";
    font-weight: 100;
}
.p46{
    font-size: 2.5rem;
    color: white;
    position: absolute;
    top: 34rem;
    left: 0px;
    width: 58rem;
    word-wrap: break-word;
    font-family: "hansannormal";
    font-weight: 400;
}
.img47{
    position: absolute;
    top: 0px;
    left: 30rem;
    width: 21.6rem;
}
.img48{
    position: absolute;
    top: 0px;
    left: 30rem;
    width: 27.2rem;
}
.img49{
    position: absolute;
    top: 0px;
    left: 30rem;
    width: 29.3rem;
}
/* --------------------------- */

/* ------------ zone3 --------------- */
.zone3{
    position: absolute;
    top: 324rem;
    left:0rem;
    width: 100%;
}
.p13{
    font-size: 4rem;
    color: white;
    position: absolute;
    top: 0rem;
    left: 17.6rem;
    font-family: "hansannormal";
} 
.line5{
    position: absolute;
    top: 0rem;
    left:9rem;
    background-color: white;
    width: 2.2rem;
    height: 6rem;
    border-radius: 0.9rem;
}
.line6{
    position: absolute;
    top: 6rem;
    left:10rem;
    background-color: white;
    width: 0.2rem;
    height: 104rem;
    opacity:0.5;
}
.content2{
    position: absolute;
    top: 0px;
    left: 10rem;
    width: 100%;
    opacity: 0%;
}

.p14{
    font-size: 4.5rem;
    color: white;
    position: absolute;
    top: 4.5rem;
    left: 4rem;
    width: 43rem;
    font-family: "hansannormal";
}
.p17{
    font-size: 2.3rem;
    color: white;
    position: absolute;
    top: 18rem;
    left: 4rem;
    width: 43rem;
    line-height: 3.6rem;
    font-weight: 100;
    font-family: "hansannormal";
}


.z1{
    position: absolute;
    top: 14rem;
    left:17.6rem;
    /* border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 50rem;
    height: 74rem; */
}
.z2{
    position: absolute;
    top: 14rem;
    left:73.6rem;
    
}
.z3{
    position: absolute;
    top: 14rem;
    left:129.6rem;
    
}
.border1{
    border-radius: 1rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.5);
    width: 50rem;
    height: 80rem;
}
.border2{
    border-radius: 1rem;
    /* border: 1px solid rgba(255, 255, 255, 0.5); */
    width: 50rem;
    height: 80rem;
    background-color: rgba(255, 255, 255, 0.1);
}
.line10{
    position: absolute;
    top: 11.6rem;
    left:3rem;
    width: 44rem;
    height: 0.1rem;
    background-color: white;
}
/* --------------------------- */

/* ------------- zone4 -------------- */
.zone4{
    position: absolute;
    top: 434rem;
    left:0rem;
    width: 100%;
}
.p20{
    font-size: 4rem;
    color: white;
    position: absolute;
    top: 0rem;
    left: 17.6rem;
    font-family: "hansannormal";
}
.p21{
    font-size: 3rem;
    color: white;
    position: absolute;
    top: 14rem;
    left: 8.6rem;
    font-family: "hansanlight";
    font-weight: 100;
    height: 4rem;
}
.p22{
    font-size: 3rem;
    color: white;
    position: absolute;
    top: 22.5rem;
    left: 8.6rem;
    white-space:nowrap;
    font-family: "hansanlight";
    font-weight: 100;
    height: 4rem;
}
.p23{
    font-size: 3rem;
    color: white;
    position: absolute;
    top: 14rem;
    left: 96.8rem;
    white-space:nowrap;
    font-family: "hansanlight";
    font-weight: 100;
    height: 12.5rem;
}
.p24{
    font-size: 3rem;
    color: white;
    position: absolute;
    top: 19.6rem;
    left: 96.8rem;
    white-space:nowrap;
    font-family: "hansanlight";
    font-weight: 100;
}
.p25{
    font-size: 3rem;
    color: white;
    position: absolute;
    top: 24rem;
    left: 96.8rem;
    white-space:nowrap;
    font-family: "hansanlight";
    font-weight: 100;
}



.line7{
    position: absolute;
    top: 0rem;
    left:9rem;
    background-color: white;
    width: 2.2rem;
    height: 6rem;
    border-radius: 0.9rem;
}
.line8{
    position: absolute;
    top: 6rem;
    left:10rem;
    background-color: white;
    width: 0.2rem;
    height: 23rem;
    opacity:0.5;
}

.line9{
    position: absolute;
    top: 13rem;
    left:90rem;
    width: 0.1rem;
    height: 14.5rem;
    background-color: white;
}

.bz3{
    position: absolute;
    top: 0rem;
    left:9rem;
}
.img8{
    font-size: 4rem;
    color: white;
    position: absolute;
    top: 15rem;
    left: 84rem;
    width: 3rem;
}
.img9{
    font-size: 4rem;
    color: white;
    position: absolute;
    top: 23rem;
    left: 84rem;
    width: 3rem;
}
.img10{
    font-size: 4rem;
    color: white;
    position: absolute;
    top: 23rem;
    left: 170rem;
    width: 3rem;
}
/* -----------动画---------------- */
.fade
{-webkit-animation-name: fadeIn; /*标题消失*/
-webkit-animation-duration: 0.8s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
.fade2
{-webkit-animation-name: fadeIn2; /*公司简介*/
-webkit-animation-duration: 0.8s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
@-webkit-keyframes fadeIn {
    0% {opacity: 1; }
    30% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes fadeIn2 {
    0% {opacity: 0; }
    30% {opacity: 0;}
    100% {opacity: 1;}
}
.fade3
{-webkit-animation-name: fadeIn3; /*产品理念1*/
-webkit-animation-duration: 1s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
@-webkit-keyframes fadeIn3 {
    0% {top: 100;opacity: 0%; }
    100% {top: 0;opacity: 100%;}
}
.fade4
{-webkit-animation-name: fadeIn4; /*招募1*/
-webkit-animation-duration: 1s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
.fade5
{-webkit-animation-name: fadeIn4; /*招募2*/
-webkit-animation-duration: 1s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0.5s; /*延迟时间*/
animation-fill-mode: forwards;}
.fade6
{-webkit-animation-name: fadeIn4; /*招募3*/
-webkit-animation-duration: 1s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 1s; /*延迟时间*/
animation-fill-mode: forwards;}
@-webkit-keyframes fadeIn4 {
    0% {left: 100;opacity: 0%; }
    100% {left: 0;opacity: 100%;}
}
.roate1
{-webkit-animation-name: roate1; /*关于我们*/
-webkit-animation-duration: 20s; /*动画持续时间*/
animation-iteration-count: infinite;
-webkit-animation-delay: 0s; /*延迟时间*/}
@-webkit-keyframes roate1 {
    0% {transform:rotate(0deg); }
    100% {transform:rotate(360deg);}
}
.roate2
{-webkit-animation-name: roate2; /*箭头*/
-webkit-animation-duration: 0.5s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
@-webkit-keyframes roate2 {
    0% {transform:rotate(0deg); }
    100% {transform:rotate(180deg);}
}
.roate3
{-webkit-animation-name: roate3; /*箭头*/
-webkit-animation-duration: 0.5s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
@-webkit-keyframes roate3 {
    0% {transform:rotate(180deg); }
    100% {transform:rotate(0deg);}
}

.fade7
{-webkit-animation-name: fadeIn7; /*遮罩*/
-webkit-animation-duration: 0.6s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
.fade8
{-webkit-animation-name: fadeIn8; /*遮罩*/
-webkit-animation-duration: 0.6s; /*动画持续时间*/
animation-iteration-count: 1;
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;}
@-webkit-keyframes fadeIn7 {
    0% {opacity: 0.5; }
    50% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes fadeIn8 {
    0% {opacity: 0; }
    50% {opacity: 0;}
    100% {opacity: 0.5;}
}

@font-face {
    font-family: 'hansannormal';
    src:url('../font/SourceHanSansCN-Normal.otf');
}
@font-face {
    font-family: 'hansanmedium';
    src:url('../font/SourceHanSansCN-Medium.otf');
}
@font-face {
    font-family: 'hansanlight';
    src:url('../font/SourceHanSansCN-Light.otf');
}