html,body{
margin: 0;
padding: 0;
width: 100%;
/*height: 100%;*/
/*height: 800px;*/
}
/*.wrapper{*/
/* height: 100%;*/
/* display: flex;*/
/* flex-flow:column;*/
/*}*/
img{
width: 100%;
}
.header{
background-color: black;
position: fixed;
height: 90px;
width: 100%;
/*position: fixed;*/
}
#logo{
width: 10%;
height: 55%;
position: relative;
top:20%;
left: 5%;
}
.header span{
color: white;
height: 5%;
width: 5%;
position: relative;
top:10%;
left: 45%;
margin-left: 2%;
text-align: center;
}
.container{
/*height: 90%;*/
height: 700px;
width: 100%;
position: fixed;
top:90px;
display: flex;
/*flex-flow:column;*/
flex-direction: column;
/*flex: 1;*/
/*display: flex;*/
overflow: hidden auto;
/*overflow: auto;*/
/*position: fixed;*/
}
#model-1{
/*height: 382px;*/
width: 100%;
flex-shrink: 0;
height: 18%;
/*position: relative;*/
/*top:15%;*/
/*position: fixed;*/
}
#model-1 img{
flex-shrink:0;
width: 100%;
z-index: 1;
height: 500px;
}
.img-bar{
z-index: 2;
width: 10%;
height: 7px;
border-radius: 5px;
position: relative;
left: 35%;
top: -50px;
opacity:40%
}
/*model2的样式*/
#model-2{
flex-shrink:0;
height: 17.5%;
/*height: 400px;*/
/*height: 60%;*/
width: 100%;
/* position:relative;
top:170px;*/
background-color: #54E1D6;
/*top:190px;*/
/*top:170px;*/
}
#model-2-play{
width: 9%;
height: 25%;
z-index: 2;
position: relative;
/*top:-270%;*/
/*left: -45%;*/
top: 250px;
left: 25%;
visibility: hidden;
}
#model-2-introduction{
width: 65%;
height: 480px;
/*
height: 100%;
*/
z-index: 1;
position: absolute;
/*left: -1%;*/
/*top:-754px;*/
/*visibility: hidden;*/
}
#model-2-spanBcimg{
width: 35%;
/*height: 750px;*/
height: 480px;
/*
height: 100%;
*/
z-index: 1;
position: absolute;
left: 65%;
/*top:-504px;*/
/*left: 70%;*/
/*visibility: hidden;*/
}
#play-div{
/*height: 50%;*/
/*width: 30%;*/
background-color: white;
height: 400px;
width: 40%;
/*height: 0;*/
/*width: 0;*/
/*border-top:600px;*/
/*border-right: 10px;*/
position: absolute;
left:0;
top:500px;
/*position: relative;*/
z-index: 3;
/*top:-290%;*/
/*left: 20%;*/
/*left: 15%;*/
/*top: 30px;*/
visibility: hidden;
}
#video-introduction{
object-fit: fill;
z-index: 3;
}
#play-div img{
width: 8%;
height: 5%;
position: relative;
left: 93%;
top:-2%;
}
#model-2-span{
width: 35%;
height: 100%;
/*z-index: 2;*/
position: relative;
z-index: 2;
left: 65%;
top:-100px;
margin-left: 60px;
/*top:-370%;*/
/*left: 69%;*/
/*top:-700px;*/
}
#model-2-span-1{
z-index: 2;
width: 147px;
height: 35px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: center;
color: #ffffff;
line-height: 36px;
letter-spacing: 0.07px;
}
#model-2-span-2{
z-index: 2;
width: 147px;
height: 35px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: center;
color:#54E1D6;
line-height: 36px;
letter-spacing: 0.07px;
}
.model-2-span-1{
z-index: 2;
width: 350px;
height: 50px;
color: #ffffff;
font-size: 19px;
font-family: MiSans, MiSans-400;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 25px;
letter-spacing: 0.04px;
}
.model-2-span-2{
z-index: 2;
width: 280px;
height: 50px;
color: #ffffff;
font-size: 14px;
font-family: MiSans, MiSans-300;
font-weight: 300;
text-align: LEFT;
color: #ffffff;
line-height: 25px;
letter-spacing: 0.03px;
}
/*model3的样式*/
#model-3{
flex-shrink: 0;
width: 100%;
height:16% ;
background-color: pink;
position: relative;
/*top:200px;*/
}
#model-3 img{
position: relative;
height: 100%;
}
#model-4-and-model-5{
flex-shrink: 0;
width: 100%;
height:46%;
/* height: 500px; */
/*height: 1200px;*/
/*position: fixed;*/
position: relative;
/*top:200px;*/
display: flex;
flex-direction: column;
/*overflow: hidden hidden;*/
overflow: hidden auto;
background-color: #2A3141;
}
#model-4-and-model-5::-webkit-scrollbar{
width: 0px;
height: 100%;
}
#model-4-and-model-5::-webkit-scrollbar-track{
background:transparent;
}
#model-4-and-model-5::-webkit-scrollbar-thumb{
background: cyan;
}
/*moddel-4样式*/
#model-4{
flex-shrink: 0;
width: 100%;
height: 40%;
background-color: #2A3141;
}
#model-4-span-1{
width: 147px;
height: 36px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: left;
color: #ffffff;
line-height: 36px;
letter-spacing: 0.07px;
text-shadow: 0px 12px 24px 0px rgba(0,0,0,0.05);
position: absolute;
left: 30px;
top: 20px;
}
#model-4-span-2{
width: 147px;
height: 36px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: left;
color: #54E1D6;
line-height: 36px;
letter-spacing: 0.07px;
text-shadow: 0px 12px 24px 0px rgba(0,0,0,0.05);
position: absolute;
left: 105px;
top: 20px;
}
#model-4-play{
/*width:300px;*/
/*width:1200px;*/
width: 80%;
height: 300px;
position:absolute;
top:100px;
/*left:40%;*/
left: 10%;
/*background-color:#ffffff;*/
background-color: #2A3141;
/*overflow:hidden;*/
}
#model-4-carousel{
/*width: 900px;*/
width: 75%;
height: 400px;
/*background-color: #54E1D6;*/
/*background-color:#ffffff;*/
position: absolute;
left: 12.5%;
overflow: hidden;
/*left: 10%;*/
display: flex;
}
#model-4-carousel img{
/*width: 300px;*/
width: 31%;
/*height: 300px;*/
border: 0;
/*margin:10px;*/
margin:1%;
/*position: absolute;*/
/*opacity:0;*/
/*background-color: #54E1D6;*/
/*animation-name: carousel;*/
/*animation-duration:5s;*/
/*animation-iteration-count: infinite;*/
}
#model-4-carousel-1{
height: 150px;
/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*!*animation-iteration-count: infinite;*!*/
/*animation-delay: 0s;*/
animation: carousel1 10s linear infinite;
}
#model-4-carousel-2{
/*!*animation-name: carousel;*!*/
/*animation-duration:6s;*/
/*!*animation-iteration-count: infinite;*!*/
/*animation-delay: 3s;*/
height: 150px;
position: relative;
left:-33%;
top:150px;
animation: carousel1 10s linear infinite;
/*animation: carousel2 10s linear infinite;*/
}
#model-4-carousel-3{
/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*!*animation-iteration-count: infinite;*!*/
/*animation-delay: 6s;*/
height: 150px;
position: relative;
/*left:-320px;*/
left:-33%;
/*top:150px;*/
animation: carousel2 10s linear infinite;
}
#model-4-carousel-4{
/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*!*animation-iteration-count: infinite;*!*/
/*animation-delay: 9s;*/
height: 150px;
width: 35%;
position: relative;
/*left:-320px;*/
left: -66%;
top:150px;
animation: carousel2 10s linear infinite;
/*animation: carousel3 10s linear infinite;*/
}
#model-4-carousel-5{
height: 150px;
position: relative;
/*left:-320px;*/
left: -66%;
/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*!*animation-iteration-count: infinite;*!*/
/*animation-delay: 12s;*/
animation: carousel3 10s linear infinite;
/*animation: carousel4 10s linear infinite;*/
}
#model-4-carousel-6{
/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*!*animation-iteration-count: infinite;*!*/
/*animation-delay: 15s;*/
height: 150px;
position: relative;
/*left: -640px;*/
left: -99%;
top: 150px;
animation: carousel3 10s linear infinite;
/*animation: carousel4 10s linear infinite;*/
}
#model-4-carousel-7{
height: 145px;
position: relative;
left:-99%;
animation: carousel4 10s linear infinite;
/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*/*animation-iteration-count: infinite;*/
/*animation-delay: 0s;*/
}
#model-4-carousel-8{
/*/*animation-name: carousel;*/
/*animation-duration:6s;*/
/*/*animation-iteration-count: infinite;*/
/*animation-delay: 3s;*/
height: 145px;
position: relative;
left:-132%;
top:151px;
animation: carousel4 10s linear infinite;
}
/*#model-4-carousel-9{*/
/* !*animation-name: carousel;*!*/
/* !*animation-duration:6s;*!*/
/* !*!*animation-iteration-count: infinite;*!*!*/
/* !*animation-delay: 6s;*!*/
/* height: 150px;*/
/* position: relative;*/
/* !*left:-850px;*!*/
/* left:-300px;*/
/* top:150px;*/
/*}*/
@keyframes carousel1 {
0%{
transform:translateX(0);
}
20%{
visibility:hidden;
/*transform:translateX(-320px);*/
transform:translateX(-106%);
}
20.2%{
visibility:hidden;
/*transform:translateX(960px);*/
transform:translateX(318%);
}
40.2%
{
/*transform:translateX(640px);*/
transform:translateX(212%);
}
60.2%
{
/*transform:translateX(320px);*/
transform:translateX(106%);
}
80.2%
{
transform:translateX(0);
}
}
@keyframes carousel2 {
0%{
transform:translateX(0);
}
20%{
/*transform:translateX(-320px);*/
transform:translateX(-106%);
}
40%{
visibility:hidden;
/*transform:translateX(-640px);*/
transform:translateX(-212%);
}
40.2%{
visibility:hidden;
/*transform:translateX(640px);*/
transform:translateX(212%);
}
60.2%
{
/*transform:translateX(320px);*/
transform:translateX(106%);
}
80.2%{
transform:translateX(0px);
}
}
@keyframes carousel3 {
0%{
transform:translateX(0);
}
20%{
/*transform:translateX(-320px);*/
transform:translateX(-106%);
}
40%{
/*transform:translateX(-640px);*/
transform:translateX(-212%);
}
60%{
visibility:hidden;
/*transform:translateX(-960px);*/
transform:translateX(-318%);
}
60.2%{
visibility:hidden;
/*transform:translateX(320px);*/
transform:translateX(106%);
}
80.2%{
transform:translateX(0px);
}
}
@keyframes carousel4 {
0%{
transform:translateX(0);
}
20%{
/*transform:translateX(-320px);*/
transform:translateX(-106%);
}
40%{
/*transform:translateX(-640px);*/
transform:translateX(-212%);
}
60%{
/*transform:translateX(-960px);*/
transform:translateX(-318%);
}
80%{
visibility:hidden;
/*transform:translateX(-1280px);*/
transform:translateX(-424%);
}
80.2%{
visibility: hidden;
transform:translateX(0px);
}
}
#model-5{
flex-shrink: 0;
width: 100%;
height: 40%;
background-color: #2A3141;
}
#model-5-span-1{
width: 147px;
height: 36px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: left;
color: #ffffff;
line-height: 36px;
letter-spacing: 0.07px;
text-shadow: 0px 12px 24px 0px rgba(0,0,0,0.05);
position: relative;
/*position: absolute;*/
top:5%;
left: 30px;
}
#model-5-span-2 {
width: 147px;
height: 36px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: left;
color: #54E1D6;
line-height: 36px;
letter-spacing: 0.07px;
text-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.05);
position: relative;
top:5%;
left: 30px;
}
#model-5-play{
flex-shrink: 0;
/*width:300px;*/
/*width:1800px;*/
width: 80%;
height: 400px;
position:absolute;
left:10%;
top:600px;
/*left:40%;*/
/*left: 5%;*/
/*background-color:#ffffff;*/
/*background-color: #2A3141;*/
/*overflow:hidden;*/
}
#model-5-carousel{
/*width: 1000px;*/
/*width: 1400px;*/
flex-shrink: 0;
width: 100%;
height: 400px;
/*background-color: #54E1D6;*/
/*background-color:#ffffff;*/
position: absolute;
/*left: 15%;*/
overflow: hidden;
display: flex;
}
#model-5-carousel-up{
/*width: 1400px;*/
flex-shrink: 0;
width: 100%;
height: 200px;
/*background-color: #54E1D6;*/
/*background-color:#ffffff;*/
position: absolute;
display: flex;
}
#model-5-carousel-down{
flex-shrink: 0;
/*width: 1400px;*/
width: 100%;
height: 200px;
/*background-color: #54E1D6;*/
/*background-color:#ffffff;*/
position: absolute;
top:200px;
display: flex;
}
#model-5-carousel img{
/*width: 200px;*/
width: 18%;
height: 100px;
/*height: 300px;*/
border: 0;
/*margin:5px;*/
margin:1%;
/*position: absolute;*/
/*opacity:0;*/
/*background-color: #54E1D6;*/
/*animation-name: model-5-carousel-down;*/
/*animation-duration:8s;*/
/*animation-iteration-count: infinite;*/
}
#model-5-carousel-up img{
position: relative;
top:50px;
left: -40%;
/*left: -400px;*/
/*animation-name: model-5-carousel-up;*/
/*animation-duration:5s;*/
/*animation-iteration-count: infinite;*/
}
/*#model-5-carousel-down img{*/
/* */
/* !*animation-name: model-5-carousel-down;*!*/
/* !*animation-duration:5s;*!*/
/* !*animation-iteration-count: infinite;*!*/
/*}*/
#model-5-carousel-up-1
{
animation: model-5-carousel-up-1 15s linear infinite;
}
#model-5-carousel-up-2
{
animation: model-5-carousel-up-2 15s linear infinite;
}
#model-5-carousel-up-3
{
animation: model-5-carousel-up-3 15s linear infinite;
}
#model-5-carousel-up-4
{
animation: model-5-carousel-up-4 15s linear infinite;
}
#model-5-carousel-up-5
{
animation: model-5-carousel-up-5 15s linear infinite;
}
#model-5-carousel-up-6
{
animation: model-5-carousel-up-6 15s linear infinite;
}
#model-5-carousel-up-7
{
animation: model-5-carousel-up-7 15s linear infinite;
}
#model-5-carousel-down-1
{
animation: model-5-carousel-down-1 15s linear infinite;
}
#model-5-carousel-down-2
{
animation: model-5-carousel-down-2 15s linear infinite;
}
#model-5-carousel-down-3
{
animation: model-5-carousel-down-3 15s linear infinite;
}
#model-5-carousel-down-4
{
animation: model-5-carousel-down-4 15s linear infinite;
}
#model-5-carousel-down-5
{
animation: model-5-carousel-down-5 15s linear infinite;
}
#model-5-carousel-down-6
{
animation: model-5-carousel-down-6 15s linear infinite;
}
#model-5-carousel-down-7
{
animation: model-5-carousel-down-7 15s linear infinite;
}
@keyframes model-5-carousel-up-1 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
20%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
30%{
/*transform: translateX(630px);*/
transform: translateX(336%);
}
40%{
/*transform: translateX(840px);*/
transform: translateX(448%);
}
50%{
/*transform: translateX(1050px);*/
transform: translateX(560%);
}
60%{
/*transform: translateX(1260px);*/
transform: translateX(672%);
}
70%{
visibility: hidden;
/*transform: translateX(1470px);*/
transform: translateX(784%);
}
80%{
visibility: hidden;
transform: translateX(0px);
}
/*80%{*/
/* visibility: hidden;*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-up-2 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
20%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
30%{
/*transform: translateX(630px);*/
transform: translateX(336%);
}
40%{
/*transform: translateX(840px);*/
transform: translateX(448%);
}
50%{
/*transform: translateX(1050px);*/
transform: translateX(560%);
}
60%{
visibility: hidden;
/*transform: translateX(1260px);*/
transform: translateX(672%);
}
70%{
visibility: hidden;
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-up-3 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
20%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
30%{
/*transform: translateX(630px);*/
transform: translateX(336%);
}
40%{
/*transform: translateX(840px);*/
transform: translateX(448%);
}
50%{
visibility: hidden;
/*transform: translateX(1050px);*/
transform: translateX(560%);
}
60%{
visibility: hidden;
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-up-4 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
20%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
30%{
/*transform: translateX(630px);*/
transform: translateX(336%);
}
40%{
visibility: hidden;
/*transform: translateX(840px);*/
transform: translateX(448%);
}
50%{
visibility: hidden;
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
60%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-up-5 {
0%{
transform:translateX(0px);
}
10%{
transform: translateX(112%);
/*transform: translateX(210px);*/
}
20%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
30%{
visibility: hidden;
/*transform: translateX(630px);*/
transform: translateX(336%);
}
40%{
visibility: hidden;
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
50%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
60%{
transform: translateX(-112%);
/*transform: translateX(-210px);*/
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-up-6 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
20%{
visibility: hidden;
/*transform: translateX(420px);*/
transform: translateX(224%);
}
30%{
visibility: hidden;
/*transform: translateX(-840px);*/
transform: translateX(-448%);
}
40%{
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
50%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
60%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-up-7 {
0%{
transform:translateX(0px);
}
10%{
visibility: hidden;
/*transform: translateX(210px);*/
transform: translateX(112%);
}
20%{
visibility: hidden;
/*transform: translateX(-1050px);*/
transform: translateX(-560%)
}
30%{
/*transform: translateX(-840px);*/
transform: translateX(-448%);
}
40%{
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
50%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
60%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
70%{
transform: translateX(0px);
/*transform: translateX(-102%);*/
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down {
0%{
transform:translateX(0px);
}
/*25%{*/
/* transform: translateX(-200px);*/
/*}*/
/*50%{*/
/* transform: translateX(-400px);*/
/*}*/
50%{
transform: translateX(-500px);
}
/*75%{*/
/* transform: translateX(-600px);*/
/*}*/
100%{
transform: translateX(-1000px);
}
}
@keyframes model-5-carousel-down-1 {
0%{
transform:translateX(0px);
}
10%{
visibility: hidden;
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
visibility: hidden;
/*transform: translateX(1050px);*/
transform: translateX(560%);
}
30%{
/*transform: translateX(840px);*/
transform: translateX(448%);
}
40%{
/*transform: translateX(630px);*/
transform: translateX(336%);
}
50%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
60%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
/*80%{*/
/* visibility: hidden;*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down-2 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
visibility: hidden;
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
30%{
visibility: hidden;
/*transform: translateX(840px);*/
transform: translateX(448%);
}
40%{
/*transform: translateX(630px);*/
transform: translateX(336%);
}
50%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
60%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down-3 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
30%{
visibility: hidden;
transform: translateX(-336%);
/*transform: translateX(-630px);*/
}
40%{
visibility: hidden;
/*transform: translateX(630px);*/
transform: translateX(336%);
}
50%{
/*transform: translateX(420px);*/
transform: translateX(224%);
}
60%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down-4 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
30%{
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
40%{
visibility: hidden;
/*transform: translateX(-840px);*/
transform: translateX(-448%);
}
50%{
visibility: hidden;
/*transform: translateX(420px);*/
transform: translateX(224%);
}
60%{
/*transform: translateX(210px);*/
transform: translateX(112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down-5 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
30%{
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
40%{
/*transform: translateX(-840px);*/
transform: translateX(-448%);
}
50%{
visibility: hidden;
/*transform: translateX(-1050px);*/
transform: translateX(-560%);
}
60%{
visibility: hidden;
/*transform: translateX(210px);*/
transform: translateX(112%);
}
70%{
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down-6 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
30%{
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
40%{
/*transform: translateX(-840px);*/
transform: translateX(-448%);
}
50%{
/*transform: translateX(-1050px);*/
transform: translateX(-560%);
}
60%{
visibility: hidden;
/*transform: translateX(-1260px);*/
transform: translateX(-672%);
}
70%{
visibility: hidden;
transform: translateX(0px);
}
/*80%{*/
/* transform: translateX(0px);*/
/*}*/
}
@keyframes model-5-carousel-down-7 {
0%{
transform:translateX(0px);
}
10%{
/*transform: translateX(-210px);*/
transform: translateX(-112%);
}
20%{
/*transform: translateX(-420px);*/
transform: translateX(-224%);
}
30%{
/*transform: translateX(-630px);*/
transform: translateX(-336%);
}
40%{
/*transform: translateX(-840px);*/
transform: translateX(-448%);
}
50%{
/*transform: translateX(-1050px);*/
transform: translateX(-560%);
}
60%{
/*transform: translateX(-1260px);*/
transform: translateX(-672%);
}
70%{
visibility: hidden;
/*transform: translateX(-1470px);*/
transform: translateX(-784%);
}
80%{
visibility: hidden;
transform: translateX(0px);
}
}
#model-5-1{
flex-shrink: 0;
width: 100%;
height: 4%;
}
#model-6{
margin-top:-52px;
flex-shrink:0;
width: 100%;
height:18%;
background: #2A3141;
}
#model-6-detail img{
flex-shrink:0;
width:70%;
height: 570px;
}
#model-6-detail{
flex-shrink:0;
width: 100%;
height:280px;
background: #2A3141;
}
#model-6-input{
position: relative;
width: 60%;
height: 180px;
z-index: 1;
top:-360px;
left: 10%;
}
#model-6-input-1{
width: 30%;
height: 20px;
/*background-color: #E0FDFB;*/
/*opacity: 0.4;*/
background-color: #2B324278;
border: 1px solid rgba(224,253,251,0.81);
color: white;
}
#model-6-input input::placeholder{
color: white;
}
#model-6-input-2{
width: 30%;
height: 20px;
position: relative;
left: 5%;
/*opacity: 0.4;*/
background-color: #2B324278;
border: 1px solid rgba(224,253,251,0.81);
color: white;
}
#model-6-input-3{
width: 66.5%;
height: 55px;
position: relative;
top: 15px;
/*opacity: 0.4;*/
background-color: #2B324278;
border: 1px solid rgba(224,253,251,0.81);
color: white;
}
#model-6-input textarea::placeholder {
color: white;
}
#model-6-button{
width: 15%;
height: 30px;
position: relative;
top:75px;
left: -42%;
background-color: rgba(0,0,0,0.80);
border: 1px solid #55e1d6;
color:#55e1d6;
}
/*#model-6-span-bc{*/
/* flex-shrink: 0;*/
/* width: 25%;*/
/* height: 550px;*/
/* position: relative;*/
/* left: 72%;*/
/*}*/
#model-6-span{
flex-shrink: 0;
width: 28%;
position:relative;
left: 72%;
top:-400px;
}
#model-6-span-1{
width: 147px;
height: 36px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: left;
color: #ffffff;
line-height: 36px;
letter-spacing: 0.07px;
text-shadow: 0px 12px 24px 0px rgba(0,0,0,0.05);
}
#model-6-span-2{
width: 147px;
height: 36px;
font-size: 36px;
font-family: MiSans, MiSans-600;
font-weight: normal;
text-align: left;
color: #54E1D6;
line-height: 36px;
letter-spacing: 0.07px;
text-shadow: 0px 12px 24px 0px rgba(0,0,0,0.05);
}
#di_components_footer10002{
flex-shrink: 0;
width: 100%;
position: relative;
/*top:170px;*/
}
.u-img{
width: 10%;
}
.m-number-footer.z-web {
padding: 50px 0 22px;
background: #1d2234;
color: #fff;
}
.m-number-footer.z-web .u-footer-list {
display: inline-block;
height: 250px;
margin-left: 30%;
vertical-align: top;
}
.m-number-footer.z-web .links-code {
text-align: center;
float: right;
}
.links-code img,p{
vertical-align: middle;
border-style: none;
position: relative;
left: -50%;
}
.m-number-footer.z-web .u-footer-info {
width: 100%;
line-height: 20px;
text-align: center;
color: #f5f5f5;
font-size: 0;
opacity: .6;
}
.m-number-footer.z-web .u-footer-info .m-info-list {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
font-size: 14px;
}
.m-number-footer.z-web .u-footer-list .m-service {
display: inline-block;
vertical-align: top;
margin-right: 120px;
}
.m-number-footer.z-web .u-footer-list .m-service .detail-tlt {
font-size: 18px;
line-height: 25px;
margin-bottom: 20px;
}
.m-number-footer.z-web .u-footer-list .m-service .detail {
padding: 10px 0;
color: #222;
font-family: "微软雅黑";
}
.m-number-footer.z-web .u-footer-list .m-service .detail-list {
margin-bottom: 8px;
color: #f5f5f5;
}
.m-number-footer.z-web .u-footer-list .u-link {
color: #fff;
opacity: .5;
line-height: 20px;
text-decoration: none;
position: relative;
left: -50%;
}
.u-footer-info img{
width: 45%;
}
.m-number-footer.z-web .u-footer-info .m-info-list .link {
color: #f5f5f5;
opacity: .6;
text-decoration: none;
}
.m-number-footer.z-web {
padding: 50px 0 22px;
background: #1d2234;
color: #fff;
}