.am-topbar{
background: transparent!important;
/* background: #1a1a1a; */
border: none;
position: absolute;
top: 0;
width: 100%;
}
.am-topbar-nav{
}
.am-topbar a{
color: #fff;
opacity: 0.9;
}
.am-topbar a:hover{
}
.am-nav>li>a:focus, .am-nav>li>a:hover{
background: none;
opacity: 1;
}
/**/
.view{
overflow: hidden;
}
.logo-img{
width: 100px;
}
.am-topbar-brand{
line-height: 20px;
}
header{
z-index: 99;
}
.section-title{
margin: 0;
font-size: 18px;
color: #48466C;
padding: 20px 10px;
text-align: center;
}
/**/
.banner{
position: relative;
display: block;
width: 100%;
height: auto;
max-height: 600px;
/* margin-top: 50px; */
}
.bg_small{
display: inline-block;
}
.bg_big{
display: none;
}
.banner-content{
padding-top: 150px;
color: white;
text-align: center;
}
#business{
/* margin-top: 20px ; */
}
.am-slides>li{
width: 1200px;
/* max-width: 500px;
min-height: 250px; */
height: 300px;
overflow: hidden;
}
.am-slides>li>a>img{
height: 100%;
overflow: hidden;
}
/**/
#model{
/* margin-top: 20px ; */
}
#model .am-container{
max-width: 1200px;
}
.model-title{
margin-bottom: 70px;
color: #474769;
}
.model-content{
max-width: 1300px;
margin: 0 auto;
}
.model-item{
position: relative;
margin-bottom: 15px;
font-size: 16px;
color: #ffffff;
cursor: pointer;
}
.model-item-content{
width: 100%;
height: 100px;
position: relative;
background: #400080;
}
.model-item-content>span{
display: inline;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
transition: top 0.5s;
-webkit-transition: top 0.5s; /* Safari */
border-bottom: 4px solid #22D4B8;
}
.model-item-content>img{
display: block;
position: absolute;
z-index: 110;
top: 0px;
right: -20px;
width: 160px;
height: 100px;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s; Safari
}
/**/
.am-container{
max-width:1200px ;
/* overflow: hidden; */
}
/**/
#solution{
position: relative;
width: 100%;
padding: 0;
}
.solution-banner{
display: block;
z-index: 9;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.solution-title{
z-index: 99;
color: #48466c;
}
.solution-content{
z-index: 99;
max-width: 1000px!important;
margin: 0 auto;
text-align: center;
}
.solution-item{
flex: 1;
margin-bottom: 35px;
text-align: center;
opacity: 0.8;
cursor: pointer;
transition: all .2s linear;
}
.solution-item:hover{
opacity: 1;
}
.solution-item>img{
width: 35px;
height: 35px;
/*opacity: 0.6;*/
}
.solution-item>span{
display: block;
font-size: 16px;
color: #48466c;
}
.img_white{
display: none;
}
.img_gray{
display: inline-block;
}
/**/
#tech{
}
.tech-title{
color: #474769;
color: #ffffff;
background: #22D4B8;
}
.tech-content{
max-width: 1200px;
margin: 80px auto 100px;
}
.tech-item{
flex: 1;
display: flex;
padding: 20px 10px;
margin: 0 auto;
max-width: 500px;
font-size: 16px;
color: #949494;
cursor: pointer;
transition: all .2s linear;
}
.tech-item:hover{
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.tech-item>img{
width: 60px;
height: 90px;
}
.tech-text{
flex: 1;
padding-left: 20px;
}
.tech-text>span{
margin-top: 10px;
display: block;
font-size: 18px;
color: #5fceb9;
}
.tech-text>div{
margin-top: 10px;
}
#about{
padding: 40px 10px 60px;
width: 100%;
background:url('../images/website/bg_gpu.jpg') no-repeat center;
background-size: cover;
}
.aboutme-title{
color: #22d4b8;
text-align: center;
font-size: 20px;
}
.about-email{
margin: 20px auto;
max-width: 600px;
height: 40px;
border-radius: 40px;
background: #22D4B8;
color: #FFFFFF;
font-size: 18px;
text-align: center;
}
.about-email img{
vertical-align: middle;
padding: 5px 10px;
height: 40px;
}
.about-email span{
vertical-align: middle;
}
.about-content{
max-width: 1000px;
margin: auto;
}
.about-content>div{
font-size: 14px;
color: #fff;
text-align: center;
opacity: 0.9;
}
.foot{
padding: 16px 10px;
background: #1a1a1a;
color: #FFFFFF;
text-align: center;
vertical-align: middle
}
.foot p{
margin: 0 auto;
max-width: 1000px;
color: #FFFFFF;
font-size: 14px;
text-align: center;
font-family: "微软雅黑";
opacity: 0.8;
}
@keyframes clipAni-on{
0%{
clip:rect(10px,100px,150px,20px);
}
50%{
clip:rect(10px,250px,150px,0px);
}
100%{
clip:rect(0px,420px,150px,0px);
}
}
@keyframes clipAni-out{
0%{
clip:rect(0px,420px,150px,0px);
}
50%{
clip:rect(10px,250px,150px,0px);
}
100%{
clip:rect(10px,100px,150px,20px);
}
}
@media screen and (min-width:641px){
#buiness{
margin: 20px 0;
}
#model{
margin: 20px 0;
}
.logo-img{
width: 150px;
}
.am-topbar-brand{
line-height: 50px;
}
}
@media screen and (min-width:800px){
.bg_small{
display: none;
}
.bg_big{
display: inline-block;
}
#buiness{
margin: 20px 0;
}
#model{
margin: 20px 0;
}
.model-section{
}
.model-item{
padding:5px;
}
.model-item-content>span{
top: 70%;
}
.model-item-content{
height: 140px;
}
.model-item-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.model-item-content>img{
display: none;
position: absolute;
z-index: 110;
top: -10px;
right: -50px;
width: 250px;
height: 160px;
/*transition: opacity 0.5s;
-webkit-transition: opacity 0.5s; /* Safari */
}
.section-title{
font-size: 24px;
}
#solution{
background:url('../images/website/bg_ban.jpg') no-repeat center;
background-size: cover;
}
.solution-title{
color: white;
}
.solution-item{
margin-bottom: 100px;
}
.solution-content{
margin-top:70px;
padding-bottom:50px;
}
.solution-item>span{
color: #FFFFFF;
}
.solution-item>img{
width: 46px;
height: 46px;
/*opacity: 0.6;*/
}
.img_white{
display: inline-block;
}
.img_gray{
display: none;
}
.tech-cont{
max-width: 1200px;
padding: 50px;
}
.tech-title{
background: #ffffff;
color: #48466C;
}
.tech-item{
margin-bottom: 50px;
display: block;
text-align: center;
}
.tech-item>img{
width: 90px;
}
.tech-text{
padding-left: 0px;
}
.am-slides>li{
/* width: 400px!important; */
/* max-width: 500px;
min-height: 250px; */
height: 400px;
}
}
@media screen and (min-width:1024px){
.model-item-content>span{
border-bottom: 0;
}
.model-item-bg{
border:5px solid #3aeede;
clip:rect(10px,100px,150px,20px);
}
.am-slides>li{
/* width: 400px!important; */
/* max-width: 500px;
min-height: 250px; */
height: 500px;
}
}
@media screen and (min-width:2000px){
.banner{
max-height: 600px;
height: 400px;
background:url('../images/website/banner.jpg') no-repeat center;
background-size: cover;
}
.bg_small{
display: none;
}
.bg_big{
display: none;
}
}