html,body{
    /*background: #000;*/
}
.scorp-header{
    width: 100%;
    position: relative;
}
.scorp-header .logo{
    width: 800px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 150px;
    text-align: center;
}

.scorp-header .logo img{
    max-width: 50%;
    margin:0 auto;
}
.scorp-header .logo .text{
    font-size: 40px;
    margin:10px 0;
    color: #fff;
    font-weight: 600;
}
.scorp-header .logo span{
    width: 140px;
    height: 40px;line-height: 40px;
    text-align: center;border: 1px solid #fff;
    border-radius: 20px;
    margin:0 auto;
    display: block;color: #fff;font-size: 20px;
    cursor: pointer;
}
.scorp-header .button{
  margin-top: 20px;
}
.scorp-header .button a{
  display: block;
  width: 140px;
  height: 40px;
  font-size: 14px;
  border-radius: 20px;
  border:2px solid #fff;
  text-indent: 10px;
  margin:0 auto;
}
.scorp-header .button a em{
  width: 100px;
  height: 40px;
  line-height: 38px;
  display: inline-block;
  font-style: normal;
  float: left;
  color: #fff;
}
.scorp-header .button a span{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('../png/play-icon-7.png') no-repeat center center;
  background-size: cover;
  margin: 4px 0 8px;
  float: left;
}
.scorp-header .items{
    width: 800px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 250px;
    text-align: center;
}
.scorp-header .items{position: relative;text-align: center;height: 100px;}
.scorp-header .items p{
    font-size: 36px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;width: 100%;height: 100%;
    display: flex;align-items: center;justify-content: center;text-align: center;
}

.structure{position: relative;width: 100vw;
    max-width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;}
.structure .default{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin:0 auto;
    overflow: hidden;
    object-fit: cover;
    height:100%;
    overflow: hidden;
    z-index: 9;
}
.structure .default img{width: 100%;}
.structure canvas#structure{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin:0 auto;
    overflow: hidden;
    object-fit: cover;
    height:100%;
    overflow: hidden;
    z-index: 10;
}
.structure .text{
    position: absolute;
    width: 700px;height: 350px;
    top: 50%;
    left: 12%;
    transform: translateY(-50%);
    z-index: 11;
}
.structure .text h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.structure .text p{font-size: 24px;line-height: 32px;margin-top: 10px;}


.payload{width: 80%;margin:40px auto;display: flex;}
.payload .control{width: 60%;}
/*.payload .control img{max-width: 100%;}*/
.payload .control.left{display: flex;align-items: center;width: 50%;}
.payload .control.left .content{width: 62%;margin-left: 20%;}
.payload .control.left .content h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.payload .control.left .content p{font-size: 24px;line-height: 32px;margin-top: 20px;}
.payload .control.left .content p.last{margin-top: 300px;}

.payload .control.right{display: flex;align-items: center;justify-content: space-between;}
.payload .control.right ul{width: calc(50% - 15px);}
.payload .control.right ul li{margin: 24px 0;display: block;width: 100%;}
.payload .control.right ul li img{width: 100%;border-radius: 20px;}




.light{width: 100%;position: relative;}
.light img{width: 100%;}
.light .text{
    width: 450px;height: 400px;
    position: absolute;
    left: 12.46%;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
}
.light .text h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.light .text p{font-size: 24px;line-height: 38px;margin-top: 20px;}


.screen{
    width: 100%;margin-top: 80px;
}
.screen .content{
    width: 80%;margin:0 auto;
    display: flex;
    background: #F8F8F8;
    border-radius: 40px;
    padding: 80px 0 0 80px;
}
.screen .content .left{
    width: 40%;
}
.screen .content .left img{width: 100%;}
.screen .content .right{width: calc(60% - 100px);position: relative;}
.screen .content .right .text{width: 100%;height: 240px;position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);padding-left: 80px;}
.screen .content .right .text h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.screen .content .right .text p{font-size: 24px;line-height: 38px;margin-top: 10px;}


.app{
    width: 100%;margin-top: 80px;
}
.app .content{
    width: 80%;margin:0 auto;
    display: flex;
}
.app .content .left{
    width: 40%;
    margin-left: 80px;
}
.app .content .left img{width: 100%;}
.app .content .right{width: calc(60% - 80px);position: relative;}
.app .content .right .text{width: 80%;height: 360px;position: absolute;top: 50%;left:50%;transform: translate(-50%,-180px);}
.app .content .right .text h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.app .content .right .text p{font-size: 24px;line-height: 38px;margin-top: 20px;}


.controls{
    width: 100%;margin-top: 140px;
}
.controls .content{
    width: 1200px;margin:0 auto;
}
.controls .content .left{
    width: 100%;
}
.controls .content .right{width: 100%;margin-top: 50px;}
.controls .content .right video{width: 100%;border-radius: 20px;}
.controls .content .left .text{width: 100%;padding-right: 100px;}
.controls .content .left .text h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.controls .content .left .text p{font-size: 24px;line-height: 38px;margin-top: 20px;text-align: justify;}
.controls .video{position: relative;}
.controls .video .icon-bg{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 60px;
    right: 60px;
    border-radius: 24px;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.controls .video .icon-bg .icon{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
}
.controls .video .icon-bg .icon.play{
    background: url(https://cdn.feiyu-tech.com/Index/feiyu-scorp-mini/images/icon-play.svg) center center no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}
.controls .video .icon-bg .icon.repeat{
    background: url(https://cdn.feiyu-tech.com/Index/feiyu-scorp-mini/images/icon-repeat.svg) center center no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}

.install{
    width: 100%;margin-top: 80px;
}
.install .content{
    width: 1200px;margin:0 auto;
}
.install .content h3{font-size: 40px;line-height: 50px;text-align: center;font-weight: bold;}
.install .content ul{display: flex;justify-content: space-between;margin-top: 24px;}
.install .content ul li{width: calc(50% - 24px);}
.install .content ul li .video{position: relative;}
.install .content ul li .video video{width: 100%;border-radius: 10px;background: #f8f8f8;}
.install .content ul li p{height: 40px;font-size: 24px;line-height: 40px;text-align: center;margin-top: 15px;}
.install .content ul li .video .icon-bg{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 60px;
    right: 60px;
    border-radius: 24px;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.install .content ul li .video .icon-bg .icon{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
}
.install .content ul li .video .icon-bg .icon.play{
    background: url(https://cdn.feiyu-tech.com/Index/feiyu-scorp-mini/images/icon-play.svg) center center no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}
.install .content ul li .video .icon-bg .icon.repeat{
    background: url(https://cdn.feiyu-tech.com/Index/feiyu-scorp-mini/images/icon-repeat.svg) center center no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}


.magic{width: 100%;margin-top: 150px;}
.magic .content{width: 1200px;margin:0 auto;}
.magic .content .title{text-align: center;}
.magic .content .title h3{font-size: 40px;line-height: 50px;font-weight: bold;}
.magic .content .title p{font-size: 24px;line-height: 38px;margin-top: 15px;}
.magic .content ul{margin-top: 24px;}
.magic .content ul li{margin:20px 0 80px;}
.magic .content ul li .video{position: relative;}
.magic .content ul li .video video{width: 100%;border-radius: 20px;}
.magic .content ul li .video .icon-bg{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 60px;
    right: 60px;
    border-radius: 24px;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.magic .content ul li .video .icon-bg .icon{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
}
.magic .content ul li .video .icon-bg .icon.play{
    background: url(https://cdn.feiyu-tech.com/Index/feiyu-scorp-mini/images/icon-play.svg) center center no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}
.magic .content ul li .video .icon-bg .icon.repeat{
    background: url(https://cdn.feiyu-tech.com/Index/feiyu-scorp-mini/images/icon-repeat.svg) center center no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}
.magic .content ul li p{font-size: 36px;line-height: 40px;margin-top: 24px;text-align: center;}

.prize-item{
    margin:40px 0;
}
.prize-item .pcontent{
    width:1200px;
    margin:0 auto;
}
.prize-item .pcontent h4{
    font-size:40px;
    color:#333;
}
.prize-item .pcontent p{font-size:24px;color:#333;margin-top:15px;}
.prize-item .pcontent .pimgs{margin-top:30px;}
.prize-item .pcontent .pimgs img{border-radius:20px;margin-bottom:30px;}

.accessories{
    width: 100%;
    margin-top: 150px;
}
.accessories .content{
    width: 1200px;margin:0 auto;
}
.accessories .content .title h3{font-size: 40px;line-height: 50px;text-align: center;font-weight: bold;}
.accessories .content ul{display: flex;justify-content: space-between;flex-wrap:wrap;margin-top: 24px;}
.accessories .content ul li{width: calc(33% - 20px);position: relative;margin-bottom: 40px;}
.accessories .content ul li img{width: 100%;border-radius: 10px;}
.accessories .content ul li p{width: 100%;height: 40px;line-height: 40px;font-size: 24px;text-align: center;position: absolute;left: 0;bottom:50px;}
/*====================================================*/

.scorp-structure{
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    background: #000;
    overflow: hidden;
    z-index: 4;

}

.scorp-structure  .tcontent{
    font-size: 60px;
    color: #fff;
    width: 100%;
    display: flex;
    position: relative;
}
.scorp-structure  .tcontent .title{
    font-weight: bold;
    font-size: 64px;
    background: -webkit-gradient(linear,left top,left bottom, from(#fff), to(#666));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.scorp-structure .tcontent .title span{
    color: #fff;
    font-size: 24px;
    letter-spacing: 1px;
    display: block;
}
.scorp-structure .s-content{
    width: 600px;
    height: 420px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-25%,-50%);
    z-index: 2;
}
.scorp-structure .s-content ul{
    margin-top: 60px;
}
.scorp-structure .s-content ul li{
    margin-bottom: 15px;

}
.scorp-structure .s-content ul li h3{
    font-size: 24px;
    color: #292929;
    transition:all 1s;
}
.scorp-structure .s-content ul li span{
    display: block;
    font-size: 18px;
    color: #d1d1d1;
    height: 0px;
    opacity: 0;
    transition:all 1s;
    margin-top: 10px;
    transform: translateY(0);
}
.scorp-structure .s-content ul li.active h3{
    color: #fff;
}
.scorp-structure .s-content ul li.active span{
    height: auto;
    opacity: 1;
    transform: translateY(-10);
}
.scorp-structure canvas#structure{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin:0 auto;
    overflow: hidden;
    object-fit: cover;
    height:100%;
}








/*==========================================*/
.popup-item{width: 100%;height: 100%;display: none;position: relative;}
.popup-item .shadow{
    width: 100%;
    height: 100%;
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    overflow: hidden;
}
.popup-item .window{
    z-index: 10002;
    width: 1200px;
    height: 676px;position: fixed;
    margin-left: -600px;
    left: 50%;
    top: 50%;
    margin-top: -337px;
}
.popup-item .window video{
    max-width: 100%;
    margin:0 auto;
}
.popup-item .center{
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
.popup-item span{
    width: 40px;
    height: 40px;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    z-index: 10002;
}
@media (max-width: 1920px){
    .structure .text{left: 12%;}
}
@media (max-width:1661px){
    .structure .text{left: 10%;}
    .screen .content .right .text{height: 340px;}
    .app .content .right .text{height: 420px;transform: translate(-50%,-210px);}
}
@media (min-width:1441px) and (max-width: 1660px){
    .scorp-header .logo{top:100px;}
}
@media (min-width:1280px) and (max-width:1440px){
    .scorp-header .logo{top:80px;}
    .screen .content{padding: 50px 0 0 50px;}
    .controls .content,.magic .content,.accessories .content,.install .content{width: 1000px;}
    .payload .control.left .content p.last{margin-top: 200px;}
    .structure .text{width: 460px;height: 450px;}
    .app .content .right .text{width: 100%;height: 64%;}
    .screen .content .right .text{padding-left: 40px;height: 375px;}
}