/* body{overflow-x: hidden;} */
.outbox,.webdesign-max{width: 100%;margin:0 auto;}
.webdesign-max{position: relative;}
.web-cate{margin-top: 70px;}
.webdesign-1750{width: 92%;max-width:1750px;margin:0 auto;overflow: hidden;}
.case{margin: 85px 0px;}
.web-h5-wechat{width: 64.3%;margin:0 auto;padding: 70px 0px;}
.font-center{font-family: "maven_probold","Microsoft YaHei","微软雅黑";text-align: center;}
.font-28{font-size: 28px;}
.font-30{font-size: 30px;}
.font-18{font-size: 18px;}
.font-16{font-size: 16px;}
.top-20{margin-top: 5%;}
.web-font{width: 60%;position: absolute;right: 15px;top: 0;}
.web-h5-wechat-item,.case-item{position: relative;}
.top-line{margin-top: 25px;width: 86px;height: 1px;background: #ffffff;margin-bottom: 5px;}
.font-fff{color: #fff;}
.case-web-box{position: absolute;width: 61%;height: 62%;right: 7.6%;top: 14%;max-height: 285px;overflow: hidden;}
.case-borsion{position: absolute;width: 61%;height: 55%;right: 7.6%;top: 21.5%;max-height: 285px;overflow: hidden;}
.case-viking{width: 60.7%;top: 25.5%;height: 51%;right: 7.665%;}
.case-surfer{width: 60.7%;top: 25.5%;height: 51%;right: 7.665%;}
.case-item{cursor: pointer;}
/* .case-logo{-webkit-filter: grayscale(30%);-moz-filter: grayscale(30%);-ms-filter: grayscale(30%);-o-filter: grayscale(30%);filter: grayscale(30%);filter: gray;box-shadow:0 0 5px #888;border-radius: 10px;} */
.case-logo{-webkit-filter: grayscale(30%);-moz-filter: grayscale(30%);-ms-filter: grayscale(30%);-o-filter: grayscale(30%);filter: grayscale(30%);filter: gray;box-shadow:0 0 5px #888;}
.case-logo:hover{-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);filter: gray;}
.web-icon{margin-left: 105px;float: left;text-align: center;}
.web-icon img{height: 59px;width: auto;}
.web-icon div{text-align: center;font-size: 20px;margin-top: 28px;}
.web-icon:nth-of-type(1){margin-left: 0;}
.webdesign-header-inside{position: absolute;width: 1125px;left: 50%;margin-left:-562.5px;top: 0;height: 450px;top: 50%;margin-top: -225px;}
.header-bg{width: 100%;height: auto;min-height: 300px;}
.web-icon-box{width: 750px;margin: 0 auto;}
.web-icons{padding-top: 88px;}
.two-line{margin-top: 50px;text-align: center;font-size: 39px;height: 51px;line-height: 51px;padding: 0 20px;text-align: center;}
.two-line>.claerfix>div{float: left;}
.designpower{text-align: center;font-weight: 600;font-size: 18px;}
.static-box{position: relative;}
.static-box>.static-img{position: absolute;left: 0;top: 0;}
.static-img-1,.static-img-2{transition: all 2s ease;-webkit-transition: all 2s ease;-ms-transition: all 2s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;opacity: 0;transform: translateX(200px);-webkit-transform:translateX(200px);-ms-transform:translateX(200px);-moz-transform:translateX(200px);-o-transform:translateX(200px);}
.claerfix:before,.claerfix:after{
    content: '';
    display: block;
    clear: both;
}
.two-line-font{margin:0 20px;}
.red-line{width: 150px;height: 1px;background: red;margin-top:25px;}
.logo-out{text-align: center;}
.logo-out img{height: 30px;width: auto;}
.logos{width: 76.6%;margin: 0 auto;padding:50px 0;}
.logos p{text-align: center;}
.mt-50{margin: 50px 0px;}
.pt-20{padding: 20px 0px;}
.mt-50 p:nth-of-type(2){margin-top: 20px;}
.logo-honda-box{height: 60px;}
.logo-honda{max-height: 16px;margin-top: 7px;}
.stone-logo{margin-top: 60px;}
.logo-icon img{height: 70px;width: auto;}
.stone-logo > .logo-icon{float: left;margin-left: 63px;}
.stone-logo > .logo-icon:nth-of-type(1){margin-left: 0px;}
.case-out{overflow: hidden;}
@media (max-width: 1440px) {
    .web-icon-box{width: 540px;}
    .two-line{font-size: 28px;margin-top: 50px;}
    .web-icon img{height: 40px;}
    .web-icon{margin-left: 73px;}
    .web-icon div{font-size: 16px;margin-top: 28px;}
    .font-28{font-size: 26px;}
    .webdesign-header-inside{width: 900px;margin-left: -450px;height: 340px;    margin-top: -170px}
    .logo-icon img{height: 50px;}
    .stone-logo > .logo-icon{margin-left: 56px;}
    .red-line{width: 144px;}
    .stone-logo{margin-top: 40px;}
    .web-icons{padding-top: 40px;}
    .web-h5-wechat{padding: 70px 0px;}
    .case{margin: 85px 0px;}
    .logos{padding:30px 0;}
    .mt-50{margin: 30px 0px;}
    .two-line-font{margin:0 20px;}
    .two-line{padding: 0 20px;}
}

@media (max-width: 1024px) {
    .web-icon-box{width: 460px;}
    .two-line{font-size: 18px;margin-top: 20px;}
    .web-icon img{height: 35px;}
    .web-icon{margin-left: 54px;}
    .web-icon div{font-size: 14px;margin-top: 15px;}
    .font-28{font-size: 24px;}
    .webdesign-header-inside{width: 600px;margin-left: -300px;height: 220px;margin-top: -110px}
    .logo-icon img{height: 30px;}
    .stone-logo > .logo-icon{margin-left: 40px;}
    .red-line{width: 89px;}
    .stone-logo{margin-top: 20px;}
    .web-icons{padding-top: 10px;}
    .web-h5-wechat{padding: 50px 0px;width: 100%;}
    .case{margin: 65px 0px;}
    .logos{padding:0 0 30px 0;}
    .web-cate{margin-top: 50px;}
    .two-line-font{margin:0 20px;}
    .two-line{padding: 0 20px;}
}

@media (max-width: 640px) {
    .web-icon-box{width: 460px;}
    .two-line{font-size: 12px;margin-top: 20px;}
    .web-icon img{height: 30px;}
    .web-icon{margin-left: 32px;}
    .web-icon div{font-size: 12px;margin-top: 10px;}
    .font-28{font-size: 18px;}
    .webdesign-header-inside{width: 314px;margin-left: -157px;height: 200px;margin-top: -100px}
    .logo-icon img{height: 20px;}
    .stone-logo > .logo-icon{margin-left: 17px;}
    .red-line{width: 32px;}
    .stone-logo{margin-top: 20px;}
    .web-icons{padding-top: 10px;}
    .web-h5-wechat{padding: 30px 0px;width: 100%;}
    .case{margin: 45px 0px;}
    .logos{padding:0 0 30px 0;}
    .web-cate{margin-top: 30px;}
    .two-line-font{margin:0 10px;}
    .two-line{padding: 0px;}
    .logo-out img {height: 20px;}
}