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; }