body,html{
width: 100%;
height: 100%;
margin:0 auto;
font-family:PingFangSC-Regular,sans-serif;
}
body{
font-size: 16px;
}
a{
color: #fff;
}
.container{
width: 100%;
background-color: #000;
overflow: hidden;
}
@media screen and (min-width:1025px){
.main{
width: 62.5%;
margin: 0 auto;
}
.wenan::before{
width: 25%;
top: 15px;
left: 6%;
}
.wenan::after{
width: 25%;
top:15px;
right: 6%;
}
.footer{
padding: 20px 20% ;
/* padding: 20px 384px\9; */
}
.footer .infobox{
float: left;
}
.chuli{
position: relative;
top: 0;
left:12px;
}
.team .iconbox p{
font-size: 18px;
}
.team .iconbox{
width: 20%;
float: left;
overflow: hidden;
text-align: center;
color: #b6885d;
font-size: 18px;
}
.team .iconbox img{
width: 70%;
}
.team-bottm .KStip{
right: 6%;
top: 35%;
}
.team-bottm .DYtip{
left: 10%;
bottom: 20%;
}
}
@media screen and (min-width:768px) and (max-width:1024px){
.main{
width: 96%;
margin: 0 auto;
}
.wenan::before{
width: 25%;
top: 15px;
left: 60px;
}
.wenan::after{
width: 25%;
top: 15px;
left: 60px;
}
.footer{
padding: 20px 18%;
}
.footer .infobox{
float: none;
}
.team .iconbox p{
font-size: 12px;
}
.team .iconbox{
width: 20%;
float: left;
overflow: hidden;
text-align: center;
color: #b6885d;
font-size: 18px;
}
.team .iconbox img{
width: 70%;
}
.team-bottm .KStip{
right: 6%;
top: 40%;
}
.team-bottm .DYtip{
left: 10%;
bottom: 15%;
}
}
@media screen and (max-width:767px){
.main{
width: 99%;
margin: 0 auto;
}
.wenan::before{
width: 180px;
top: 15px;
left: 30px;
}
.wenan::after{
width: 180px;
top: 15px;
left: 30px;
}
footer{
padding: 20px 10%;
}
footer .infobox{
float: none;
}
.team .iconbox p{
font-size: 12px;
/* white-space:nowrap */
}
.team .iconbox{
width: 33.3%;
float: left;
overflow: hidden;
text-align: center;
color: #b6885d;
font-size: 18px;
margin-bottom: 30px;
}
.team .iconbox img{
width: 70%;
}
.team .iconbox:last-child,.team .iconbox.four{
width: 50%;
float: left;
overflow: hidden;
text-align: center;
color: #b6885d;
font-size: 18px;
margin-bottom: 0;
}
.team .iconbox.four img{
width: 48%;
margin-left: 30%;
}
.team .iconbox.four p{
margin-left: 30%;
}
.team .iconbox.last img{
width: 48.1%;
margin-right: 20%;
/* margin-bottom: 1.5px; */
}
.team .iconbox.last p{
margin-right: 10%;
}
.team-bottm .KStip{
right: 7%;
top: 40%;
}
.team-bottm .DYtip{
left: 11%;
bottom: 15%;
}
}
.header{
width: 100%;
height: 100px;
overflow: hidden;
}
.header .icon{
width: 70px;
height: 100px;
float: left;
}
.icon img{
display: block;
width: 100%;
margin-top: 5px;
}
.nav{
height: 100%;
float: right;
}
.nav ul{
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
line-height: 100px;
}
.nav ul li{
float: left;
height: 100%;
line-height: 100px;
font-size: 36px;
color: #FFF;
}
.nav a{
display: inline-block;
width: 108px;
height: 98px;
line-height: 98px;
font-size: 18px;
font-family:PingFangSC-Regular,sans-serif;
}
.nav ul li.active{
background-color: #b6885d;
}
/* bannner样式 */
.banner{
width: 100%;
/* height: 6.64rem; */
}
#myvideo{
width: 100%;
height: 100%;
}
/* 作品展示 */
.section{
margin-top: 60px;
}
.showWork{
position: relative;
}
.showWork .title{
font-size: 36px;
color: #b6885d;
margin-bottom: 22px;
}
.showWork .title .yuandian{
font-size: 40px;
}
.showWork .desc{
font-size: 24px;
color: #b6885d;
margin-bottom: 55px;
position: relative;
}
.wenan::before{
content:"";
display:inline-block;
height: 3px;
background-image: url(../images/line.png);
background-size: contain;
position: absolute;
}
.wenan::after{
content:"";
display:inline-block;
height: 3px;
background-image: url(../images/line.png);
background-size: contain;
position: absolute;
}
.videoshow{
overflow: hidden;
width: 78%;
/* height: 4.3px; */
margin: 0 auto ;
}
.videoshow .leftArrow{
width:31px;
height:64.8px;
position: absolute;
left: 0;
top: 50%;
cursor: pointer;
}
.videoshow .leftArrow img{
position:absolute;
top: 0;
right: 0;
}
.videoshow .rightArrow{
width:31px;
height:64.8px;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
}
.videoshow .rightArrow img{
position:absolute;
top: 0;
left: 0;
}
.videoshow .video{
width: 100%;
}
.videoshow .video-item .video-title{
margin-top: 14px;
font-size:24px;
color: #fff;
text-align: center;
margin: 0;
padding: 0;
white-space:nowrap
}
/* .videoshow::before{
content:"";
display:inline-block;
width: 10%;
background-image: url(../images/rightArrow.png);
background-size: contain;
position: absolute;
} */
.videoshow .video-item{
float: left;
width: 30%;
margin-right: 3%;
font-size:24px ;
position: relative;
}
.box{
font-size:24px ;
}
.videoshow .video-item:nth-child(4){
margin-right: 0
}
.videoshow .video-item:hover{
transform: translateY(-10px);
}
.hide{
display: none;
}
.videoshow .video-item .play{
width: 30%;
position: absolute;
top: 50%;
margin-top: -15%;
left: 50%;
margin-left: -15%;
cursor: pointer;
opacity:1;
z-index:3
}
.showWork .gomore{
display: block;
width: 142px;
height: 46px;
margin: 0 auto;
font-size: 24px;
margin-top: 40px;
color: #b6885d;
border: 1px solid #b6885d;
border-radius: 10px;;
line-height: 46px;
}
.company{
margin-top: 60px;
}
.companyImg{
width: 100%;
margin-top: 38px;
margin-bottom: 82px;
}
.companyImg img{
width: 100%;
margin-top: 40px;;
}
.team{
overflow: hidden;
}
.showicon{
display: flex;
justify-content: space-around;
flex-wrap:wrap
}
.team .iconbox p{
margin-top: 10px;
/* white-space:nowrap */
}
.teamImg{
width: 100%;
}
.teamImg img{
width: 100%;
margin-top: 38px;;
}
.team-bottm{
text-align: center;
position: relative;
/* overflow: hidden; */
}
.team-bottm .yrzh1{
width: 25%;
position: relative;
top: 60px;
left: 0%;
margin-left:-5% ;
}
.team-bottm .kuaishou{
width: 15%;
position: absolute;
top: 100px;
right: 22%;
display: none;
}
.kuaishou.show{
display: inline-block;
animation: bounceInRight 1.5s linear;
-ms-animation: bounceInRight 1.5s linear;
}
.team-bottm .douyin{
width: 17%;
position: absolute;
top: 60px;
left: 23.5%;
display: none;
}
.douyin.show{
display: inline-block;
animation: bounceInLeft 1.5s linear;
-ms-animation: bounceInLeft 1.5s linear;
}
.team-bottm .KStip{
width: 20%;
position: absolute;
display: inline-block;
display: none;
}
.KStip.show{
display: inline-block;
animation: bounceInDown 1s linear;
-ms-animation: bounceInDown 1s linear;
}
.team-bottm .DYtip{
width: 20%;
position: absolute;
display: inline-block;
display: none;
}
.DYtip.show{
display: inline-block;
animation: bounceInUp 1s linear;
-ms-animation: bounceInUp 1s linear;
}
/* hezuokehu */
.customers{
margin-bottom: 42px;
}
.show-customers{
display: flex;
justify-content: space-around;
overflow: hidden\0;
}
.show-customers .itembox{
width: 11%;
float: left\0;
margin-right: 3%\0;
}
.itembox img{
width: 100%;
}
/* 页脚 */
.footer{
box-sizing: border-box;
width: 100%;
background: #b6885d;
}
.footer .title{
font-size: 20px;
margin-bottom: 20px;
width: 100%;
}
.footer ul{
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden;
}
.footer ul li{
float: left;
color: #fff;
width: 16.6%\0;
text-align: left\0;
}
.footer ul li span {
font-size: 20px;
}
.footer .info{
font-size: 16px;
color: #fff;
/* margin-top: 20px\0; */
}
.footer .infobox{
text-align: left;
margin-right: 30px;
font-size: 16px;
margin-bottom: 10px;
}
.footer .box{
font-size: 18px;
margin-right: 11px;
}
.footer .infobox img{
width: 20px;
}
.clearfix::after{
content: '';
display: block;
height: 0;
clear: both;
}
.beian{
text-align: left;
}
.beianinfo{
display: inline-block;
margin-left: 45px;
}
.footer .clear-right{
margin-right: 0;
}
/* 返回顶部按钮 */
.aside{
display: block;
width: 40px;
height: 40px;
position: fixed;
bottom: 120px;
right: 120px;
cursor: pointer;
display: none;
}
.aside img{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.aside.show{
display: block;
}
.email{
margin-left: 40px;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-ms-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-ms-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-ms-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-ms-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-ms-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-ms-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown ;
}
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-ms-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-ms-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-ms-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-ms-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-ms-transform: none;
transform: none;
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft ;
}
@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-ms-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-ms-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-ms-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-ms-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-ms-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
100% {
-ms-transform: none;
transform: none;
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-ms-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-ms-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-ms-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-ms-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-ms-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}