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: 0.15rem; left: 6%; } .wenan::after{ width: 25%; top: 0.15rem; top:15px\9; right: 6%; } .footer{ padding: 0.2rem 20%; padding: 20px 20% \9; } .footer .infobox{ float: left; } .chuli{ position: relative; top: 0; left:0.12rem; left:12px\9; } .email{ margin-left: 0.4rem; } .team .iconbox p{ font-size: 0.18rem; font-size: 18px\9; } .team .iconbox{ width: 20%; float: left; overflow: hidden; text-align: center; color: #b6885d; font-size: 0.18rem; font-size: 18px\9; } .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: 0.15rem; top: 15px\9; left: 0.6rem; left: 60px\9; } .wenan::after{ width: 25%; top: 0.15rem; top: 15px\9; right: 0.6rem; left: 60px\9; } .footer{ padding: 0.2rem 18%; } .footer .infobox{ float: none; } .team .iconbox p{ font-size: 0.12rem; } .team .iconbox{ width: 20%; float: left; overflow: hidden; text-align: center; color: #b6885d; font-size: 0.18rem; } .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: 1.8rem; top: 0.15rem; left: 0.3rem; } .wenan::after{ width: 1.8rem; top: 0.15rem; right: 0.3rem; } .footer{ padding: 0.2rem 10%; } .footer .infobox{ float: none; } .team .iconbox p{ font-size: 0.12rem; font-size: 12px\9; /* white-space:nowrap */ } .team .iconbox{ width: 33.3%; float: left; overflow: hidden; text-align: center; color: #b6885d; font-size: 0.18rem; font-size: 18px\9; margin-bottom: 0.3rem; } .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: 0.18rem; font-size: 18px\9; 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%; } .video{ height: 3.55rem; } } .header{ width: 100%; height:1rem; height: 100px\9; overflow: hidden; } .header .icon{ width: 0.7rem; width: 70px\9; height: 1rem; height: 100px\9; float: left; } .icon img{ display: block; width: 100%; margin-top: 0.05rem; margin-top: 5px\9; } .nav{ height: 100%; float: right; } .nav ul{ margin: 0; padding: 0; height: 100%; overflow: hidden; line-height: 1rem; line-height: 100px\9; } .nav ul li{ float: left; height: 100%; line-height: 1rem; line-height: 100px\9; font-size: 0.36rem; font-size: 36px\9; color: #FFF; } .nav a{ display: inline-block; width: 1.08rem; width: 108px\9; height: 0.98rem; height: 98px\9; line-height: 0.98rem; line-height: 98px\9; font-size: 0.18rem; font-size: 18px\9; 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: 0.6rem; margin-top: 60px\9; } .showWork{ position: relative; } .showWork .title{ font-size: 0.36rem; color: #b6885d; margin-bottom: 0.22rem; } .showWork .title .yuandian{ font-size: 0.4rem; } .showWork .desc{ font-size: 0.24rem; color: #b6885d; margin-bottom: 0.55rem; 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.3rem; */ margin: 0 auto ; } .videoshow .leftArrow{ width:0.31rem; height:0.648rem; position: absolute; left: 0; top: 50%; cursor: pointer; } .videoshow .leftArrow img{ position:absolute; top: 0; right: 0; } .videoshow .rightArrow{ width:0.31rem; height:0.648rem; 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: 0.24rem; 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:0.24rem ; position: relative; } .box{ font-size:0.24rem ; } .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; z-index: 3; } .showWork .gomore{ display: block; width: 1.42rem; height: 0.46rem; margin: 0 auto; font-size: 0.24rem; margin-top: 0.4rem; color: #b6885d; border: 1px solid #b6885d; border-radius: 0.1rem;; line-height: 0.46rem; } .company{ margin-top: 0.6rem; } .companyImg{ width: 100%; margin-top: 0.38px; margin-bottom: 0.82rem; } .companyImg img{ width: 100%; margin-top: 0.4rem;; } .team{ overflow: hidden; } .showicon{ display: flex; justify-content: space-around; flex-wrap:wrap } .team .iconbox p{ margin-top: 0.1rem; /* white-space:nowrap */ } .teamImg{ width: 100%; } .teamImg img{ width: 100%; margin-top: 0.38rem;; } .team-bottm{ text-align: center; position: relative; /* overflow: hidden; */ } .team-bottm .yrzh1{ width: 25%; position: relative; top: 0.6rem; left: 0%; margin-left:-5% ; } .team-bottm .kuaishou{ width: 15%; position: absolute; top: 1rem; 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: 0.6rem; 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: 0.42rem; } .show-customers{ display: flex; justify-content: space-around; } .show-customers .itembox{ width: 11%; } .itembox img{ width: 100%; } /* 页脚 */ .footer{ box-sizing: border-box; width: 100%; background-color: #b6885d; } .footer .title{ font-size: 0.2rem; margin-bottom: 0.2rem; } .footer ul{ display: flex; justify-content: space-between; } .footer ul li{ float: left; color: #fff; } .footer ul li span { font-size: 0.2rem; } .footer .info{ font-size: 0.16rem; color: #fff; } .footer .infobox{ text-align: left; margin-right: 0.3rem; font-size: 0.16rem; margin-bottom: 0.1rem; } .footer .box{ overflow: hidden; font-size: 0.18rem; margin-right: 0.11rem; } .footer .infobox img{ width: 0.2rem; } .clearfix::after{ content: ''; display: block; height: 0; clear: both; } .beian{ text-align: left; } .beianinfo{ display: inline-block; margin-left: 0.45rem; } .footer .clear-right{ margin-right: 0; } /* 返回顶部按钮 */ .aside{ display: block; width: 0.3rem; height: 0.3rem; position: fixed; bottom: 0.4rem; right: 0.4rem; cursor: pointer; display: none; } .aside img{ width: 100%; position: absolute; top: 0; left: 0; } .aside.show{ display: block; } @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; } } @-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; -ms-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; -ms-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; -ms-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); } } .bounceInUp { -webkit-animation-name: bounceInUp; -ms-animation-name: bounceInUp; animation-name: bounceInUp; } @-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); } }