#LRfloater0{display:none;} @font-face { font-family: 'MicrosoftYaHei'; src: url('/public/static/modules/cms/css/MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src: url('/public/static/modules/cms/css//public/static/modules/cms/css/MicrosoftYaHei.eot') format('embedded-opentype'), /* IE6-IE8 */ url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */ url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */ url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */ } #LXB_CONTAINER { top: 200px !important; right: -9999px !important; } * { font-family: 'Microsoft Yahei'£¬ £¬£¬£¬£¬"΢ÈíÑźÚ"; font-family: ΢ÈíÑÅºÚ !important; } p, a { color: #fff; font-family: 'Microsoft YaHei'; font-size: 14px; line-height: 24px; text-decoration: none; } img { border: 0; vertical-align: middle } ul, li { list-style: none; } p{text-align: justify;} table p {color: #666;} #header { width: 100%; height: 65px; position: fixed; z-index: 100000; background: rgba(255,255,255,0);} .logo { margin: 20px 60px 15px 60px; float: left;} .menu { margin-top: 45px; float:right;margin-right: 20px; } .menu ul { display: block; float: left; margin: 9px 42px 8px 0; } .menu li { float: left; line-height: 12px; padding-right: 20px; margin-right: 20px; } .menu li.border0 { border: none; padding-right: 0; margin-right: 0; } .menu li a { font-size: 14px;color: #fff; line-height: 12px; } .menu li a:hover { color: #ffd700; } .menu li.yewu { position: relative; } video#bgvid { position: fixed; right: 0; bottom: -20px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; } /*.menu li.yewu a { background: url(/public/static/modules/cms/images/home_sub_menu.png) center right no-repeat; padding-right: 18px; }*/ .shake { display: inline-block; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center } .shake:hover { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } .shake.freez { -webkit-animation-play-state: paused !important; -ms-animation-play-state: paused !important; animation-play-state: paused !important } .shake.freez.shake-slow { -webkit-animation-name: shake-slow; -ms-animation-name: shake-slow; animation-name: shake-slow; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } .shake.freez:hover { -webkit-animation-play-state: running !important; -ms-animation-play-state: running !important; animation-play-state: running !important } .shake.shake-slow:hover { -webkit-animation-name: shake-slow; -ms-animation-name: shake-slow; animation-name: shake-slow; -webkit-animation-duration: 7s; -ms-animation-duration: 7s; animation-duration: 7s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } .shake.shake-constant { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } .shake.shake-constant.shake-slow { -webkit-animation-name: shake-slow; -ms-animation-name: shake-slow; animation-name: shake-slow; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } .product3 .item .text .xw{ padding-top: 50px; } .menu .yewu_ol { padding-top: 17px; display: none; position: absolute; top: 13px; left: -29px; z-index: 1000; } .menu li ol { background-color: #fff; -moz-box-shadow: 0px 5px 8px 5px rgba(102, 102, 102, 0.35); -webkit-box-shadow: 0px 5px 8px 5px rgba(102, 102, 102, 0.35); box-shadow: 0px 5px 8px 5px rgba(102, 102, 102, 0.35); padding: 17px 26px; } .menu ol li { border-right: 0; padding-right: 0; margin-right: 0; border-bottom: 1px solid #d7d7d7; float: none; width: 58px; height: 35px; line-height: 35px; text-align: center; } .menu ol li:last-child { border-bottom: none; } .menu .yewu ol a { background: none; color: #333; font-size: 14px; padding-right: 0; line-height: normal; } .menu ol li a:hover { color: #ff9a00; } .navigation { float: left; background: url(/public/static/modules/cms/images/navIco1.png) no-repeat; cursor: pointer; width: 31px; height: 30px; margin-right: 39px; float: left; } .navigation { display: none; } .menu-ul.hide { display: block !important; } #container { width: 100%; overflow: hidden; position: relative; } .sections { position: relative; } .section { position: relative; z-index: 10; } .section img { width: 100%; } .left { float: left; } .pages.vertical { position: fixed; top: 30%; right: 20px; width: 20px; -webkit-transform: translate3d(0, 50%, 0); -ms-transform: translate3d(0, 50%, 0); -o-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } .pages.horizontal { position: absolute; left: 46%; bottom: 20px; } .pages li { position: relative; width: 14px; height: 14px; margin: 7px 0; } .pages.horizontal li { float: left; } .pages.horizontal li:not(:last-child) { margin-right: 10px; } .pages li a { width: 100%; height: 100%; display: block; } .pages li span { position: absolute; left: 5px; top: 5px; width: 4px; height: 4px; text-indent: -9999em; background: #757575; border-radius: 50%; } .pages li.active span { top: 1px; left: 1px; width: 8px; height: 8px; border: 2px solid #95d7fd; background: none; } .start { height: 100%; background: url() center center no-repeat; background-size: cover; z-index: 10; width: 100%; overflow: hidden; } .item { position: absolute; top: 0; bottom: 0; left: 0; right: 0;width: 100%;height: 100%;} .item .text { position: absolute; top: 20%; top: 20%\9; left: 0; right: 0; z-index: 10;} .start .text { top: 29%; top: 30%\9; } /*.product4 .text { top: 38%; top: 38%\9; }*/ .text h1 { color: #fff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold;text-align: center; position: relative; top: 30px; } .text p { line-height: 26px; width: 62.5%;font-size: 18px; margin: 0 auto; padding: 12px 0 35px 0; text-align: center; position: relative; top: 15px; } .product1 { background: url(/public/static/modules/cms/images/banner_02.jpg) center center no-repeat; background-size: cover; } .product2 { background: url(/public/static/modules/cms/images/banner_03.jpg) center center no-repeat; background-size: cover;margin-top: -150px; } .product3 { background: url(/public/static/modules/cms/images/banner_04.jpg) center center no-repeat; background-size: cover;margin-top: -150px;} .product4 { background: url(/public/static/modules/cms/images/banner_05.jpg) center center no-repeat; background-size: cover ;} .product5 { background: url(/public/static/modules/cms/images/banner_06.jpg) center center no-repeat; background-size: cover; } .btn { text-align: center; margin-top: 232px; position: relative; display: inline-block;} .btn a { border: 1px solid #2d2d2d;color: #2d2d2d; -moz-border-radius: 10px; border-radius: 10px; padding: 10px 35px; } .btn a:hover { border: 1px solid #ffd700; background-color: #ffd700; color: #fff; } .mask-bg:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0); z-index: 5; display: block; } .nav { margin-top: -71px; position: fixed; right: 0; top: 50%; z-index: 50000000; } .nav li a span { background: url(/public/static/modules/cms/images/pager.png) center center no-repeat; display: block; width: 22px; height: 22px; margin-right: 40px; text-align: center; text-indent: -9999px } .nav li.active a span { background: url(/public/static/modules/cms/images/pager1.png) center center no-repeat; } .nav li > a {outline: none; } .other { background-color: #fff; width: 100%; overflow: hidden; position: relative; } .other > a {display: inline-block;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;} .other h2 { color: #fff; font-family: 'Microsoft YaHei'; font-size: 28px; text-align: center; margin-top: 46px; margin-bottom: 11px; } .other p { color: #fff; font-size: 16px; line-height: 30px; width: 782px; margin: 0 auto; text-align: center; } .other ul { width: 1110px; margin: 36px auto 0 auto; overflow: hidden; } .other ul li { float: left; margin-left: 31px; margin-bottom: 25px; } .other li.ml0 { margin-left: 0; } .other .more { margin-top: 10px; } .other .more a { color: #ffd700; font-size: 14px; } .other .item { top: 77%; top: 74%\9; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); } .product3 .btn { margin-top: 101px; } .product3 .btn a { border: 1px solid #fff; color: #fff;} .product3 .btn a:hover{ border: 1px solid #ffd700; } .product2 .item .text { width: 100%; } .product2 .item .text ul{ padding-top: 150px; padding-left: 0!important; } .product2 .item .q1 ul li{ float: left; width:7.9%; margin: 6.3% 8.55%; } .product2 .item ul li img{ width: 100%; } .product2 .item .product-inner ul>li>a>img{ position: relative; } .product2 .item .q1{ width: 100%; position: absolute; top: 27%; } .product2 .item ul{ padding-top: 80px; padding-left: 0!important; } .product2 .item .text ul li{ float: left; width: 25%; overflow: hidden; } .product2 .item .text ul li img{ width: 100%; height: auto; overflow: hidden; } .product2 .item .text ul li img:hover{ transition: all 6s; } .c2{ display: none; } .product2 .item .q1 ul li:hover .c2{ display: block; }.product2 .item .q1 ul li:hover .c1{ display: none; } .product2 .item .text .cp4{ position: relative; margin-bottom: 0; } .product2 .item .text .cp3{ position: relative; margin-bottom: 0; } .product2 .item .text ul li .cp2{ } .product2 .item .text ul li .cp1{ } .product2 .item .text .cp4 li:hover .cp2{ opacity: 1!important;transition: all 1s; transform: scale(1.07);top:0px; } .product2 .item .text .cp3 li:hover .cp1{ } .product4 .text h1{ margin-top: 180px; margin-bottom: 40px; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; /* remove the search and cancel icon */ } /* search input field */ input[type=search] { background: url(/public/static/modules/cms/images/sousuo.png) no-repeat 5px center ; border: none; position: relative; top:-3px; padding: 10px 10px 9px 32px; width: 35px; height: 15px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: #666; } /* placeholder */ input:-moz-placeholder { } input::-webkit-input-placeholder { } /* demo B */ #demo-b input[type=search] { width: 15px; padding-left: 10px; cursor: pointer; } #demo-b input[type=search]:hover { background-color: #666; } #demo-b input[type=search]:focus { width: 130px; padding-left: 32px; color: #fff; background-color: #666; cursor: auto; } #demo-b input:-moz-placeholder { color: transparent; } #demo-b input::-webkit-input-placeholder { color: transparent; } .yy h1:hover{ background-color: #ccc!important; } .d2{ padding-top: 55px; width: 62.5%; margin: 0 auto; } .d2 ul{ margin-top: 0px; float: right; } @media (max-width:1470px) and (max-height:760px) { video#bgvid{ max-width: 1470px; } } @media (max-width:1250px) { .d2 ul{ margin-top: 60px; } } .d2 ul li{ float: left;margin: 0 20px; } .a2{ display: none; } .d2 ul li:hover .a1{ display: none; } .d2 ul li:hover .a2{ display: block; transition:transform 0.7s; transform: scale(1.09); } @keyframes firstPart { 0% { bottom: 40px; } 100% { bottom: 20px; } } @-moz-keyframes firstPart /* Firefox */ { 0% { bottom: 40px; } 100% { bottom: 20px; } } @-webkit-keyframes firstPart /* Safari and Chrome */ { 0% { bottom: 40px; } 100% { bottom: 20px; } } @-o-keyframes firstPart /* Opera */ { 0% { bottom: 40px; } 100% { bottom: 20px; } } .shake.shake-constant.hover-stop:hover { -webkit-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused } .shake.shake-delay { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 10000ms; -ms-animation-duration: 10000ms; animation-duration: 10000ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 25s; -ms-animation-delay: 25s; animation-delay:25s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } @-webkit-keyframes shake-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) } 2% { -webkit-transform: translate(-1px, 8px) rotate(1.5deg) } 4% { -webkit-transform: translate(7px, 0px) rotate(-0.5deg) } 6% { -webkit-transform: translate(8px, 8px) rotate(-3.5deg) } 8% { -webkit-transform: translate(-4px, -3px) rotate(-1.5deg) } 10% { -webkit-transform: translate(5px, 0px) rotate(-2.5deg) } 12% { -webkit-transform: translate(-10px, -3px) rotate(-3.5deg) } 14% { -webkit-transform: translate(5px, 7px) rotate(2.5deg) } 16% { -webkit-transform: translate(8px, -8px) rotate(-1.5deg) } 18% { -webkit-transform: translate(9px, -6px) rotate(-3.5deg) } 20% { -webkit-transform: translate(3px, 1px) rotate(-0.5deg) } 22% { -webkit-transform: translate(6px, 8px) rotate(-2.5deg) } 24% { -webkit-transform: translate(-8px, -1px) rotate(2.5deg) } 26% { -webkit-transform: translate(7px, -10px) rotate(0.5deg) } 28% { -webkit-transform: translate(7px, -4px) rotate(-3.5deg) } 30% { -webkit-transform: translate(-2px, -6px) rotate(-1.5deg) } 32% { -webkit-transform: translate(-1px, 0px) rotate(2.5deg) } 34% { -webkit-transform: translate(6px, 2px) rotate(-0.5deg) } 36% { -webkit-transform: translate(2px, 7px) rotate(1.5deg) } 38% { -webkit-transform: translate(2px, -9px) rotate(1.5deg) } 40% { -webkit-transform: translate(-5px, -1px) rotate(-0.5deg) } 42% { -webkit-transform: translate(-8px, 2px) rotate(-0.5deg) } 44% { -webkit-transform: translate(-4px, 3px) rotate(0.5deg) } 46% { -webkit-transform: translate(-10px, -2px) rotate(-0.5deg) } 48% { -webkit-transform: translate(1px, 9px) rotate(1.5deg) } 50% { -webkit-transform: translate(6px, 7px) rotate(1.5deg) } 52% { -webkit-transform: translate(-8px, 4px) rotate(0.5deg) } 54% { -webkit-transform: translate(6px, -8px) rotate(-2.5deg) } 56% { -webkit-transform: translate(2px, -9px) rotate(-2.5deg) } 58% { -webkit-transform: translate(-2px, -9px) rotate(0.5deg) } 60% { -webkit-transform: translate(2px, 7px) rotate(-0.5deg) } 62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg) } 64% { -webkit-transform: translate(-9px, -4px) rotate(-3.5deg) } 66% { -webkit-transform: translate(6px, -6px) rotate(0.5deg) } 68% { -webkit-transform: translate(0px, -7px) rotate(-2.5deg) } 70% { -webkit-transform: translate(-10px, 1px) rotate(1.5deg) } 72% { -webkit-transform: translate(-7px, 9px) rotate(2.5deg) } 74% { -webkit-transform: translate(2px, -6px) rotate(-0.5deg) } 76% { -webkit-transform: translate(5px, 1px) rotate(-0.5deg) } 78% { -webkit-transform: translate(-1px, 5px) rotate(2.5deg) } 80% { -webkit-transform: translate(3px, 7px) rotate(2.5deg) } 82% { -webkit-transform: translate(-6px, -7px) rotate(-0.5deg) } 84% { -webkit-transform: translate(-8px, 8px) rotate(-2.5deg) } 86% { -webkit-transform: translate(8px, 3px) rotate(-2.5deg) } 88% { -webkit-transform: translate(-8px, 3px) rotate(-1.5deg) } 90% { -webkit-transform: translate(-7px, -4px) rotate(-3.5deg) } 92% { -webkit-transform: translate(-8px, 4px) rotate(2.5deg) } 94% { -webkit-transform: translate(-6px, -6px) rotate(-3.5deg) } 96% { -webkit-transform: translate(-3px, 2px) rotate(-3.5deg) } 98% { -webkit-transform: translate(2px, 1px) rotate(-0.5deg) } } @-ms-keyframes shake-slow { 0% { -ms-transform: translate(0px, 0px) rotate(0deg) } 2% { -ms-transform: translate(-9px, 1px) rotate(-1.5deg) } 4% { -ms-transform: translate(-10px, -1px) rotate(-3.5deg) } 6% { -ms-transform: translate(6px, 2px) rotate(-1.5deg) } 8% { -ms-transform: translate(-3px, -6px) rotate(-1.5deg) } 10% { -ms-transform: translate(-10px, -3px) rotate(-0.5deg) } 12% { -ms-transform: translate(-8px, 6px) rotate(-2.5deg) } 14% { -ms-transform: translate(7px, 5px) rotate(-1.5deg) } 16% { -ms-transform: translate(2px, 2px) rotate(1.5deg) } 18% { -ms-transform: translate(8px, -2px) rotate(-3.5deg) } 20% { -ms-transform: translate(-9px, 3px) rotate(-3.5deg) } 22% { -ms-transform: translate(8px, -4px) rotate(-1.5deg) } 24% { -ms-transform: translate(-1px, -7px) rotate(2.5deg) } 26% { -ms-transform: translate(9px, 9px) rotate(-0.5deg) } 28% { -ms-transform: translate(9px, -4px) rotate(-3.5deg) } 30% { -ms-transform: translate(6px, -7px) rotate(-0.5deg) } 32% { -ms-transform: translate(9px, 2px) rotate(1.5deg) } 34% { -ms-transform: translate(3px, -9px) rotate(2.5deg) } 36% { -ms-transform: translate(-6px, -4px) rotate(2.5deg) } 38% { -ms-transform: translate(-5px, -9px) rotate(0.5deg) } 40% { -ms-transform: translate(6px, 9px) rotate(-2.5deg) } 42% { -ms-transform: translate(5px, -5px) rotate(0.5deg) } 44% { -ms-transform: translate(8px, 5px) rotate(-3.5deg) } 46% { -ms-transform: translate(-2px, 9px) rotate(1.5deg) } 48% { -ms-transform: translate(-10px, -5px) rotate(-2.5deg) } 50% { -ms-transform: translate(8px, -1px) rotate(-3.5deg) } 52% { -ms-transform: translate(-5px, -7px) rotate(2.5deg) } 54% { -ms-transform: translate(7px, 0px) rotate(2.5deg) } 56% { -ms-transform: translate(-5px, -1px) rotate(-0.5deg) } 58% { -ms-transform: translate(0px, -4px) rotate(-3.5deg) } 60% { -ms-transform: translate(-10px, 2px) rotate(2.5deg) } 62% { -ms-transform: translate(9px, 8px) rotate(0.5deg) } 64% { -ms-transform: translate(-4px, -4px) rotate(-1.5deg) } 66% { -ms-transform: translate(-1px, -9px) rotate(-0.5deg) } 68% { -ms-transform: translate(-6px, -9px) rotate(-2.5deg) } 70% { -ms-transform: translate(-6px, -8px) rotate(-1.5deg) } 72% { -ms-transform: translate(-2px, -3px) rotate(-2.5deg) } 74% { -ms-transform: translate(-8px, 1px) rotate(-0.5deg) } 76% { -ms-transform: translate(-7px, 7px) rotate(2.5deg) } 78% { -ms-transform: translate(7px, 2px) rotate(-3.5deg) } 80% { -ms-transform: translate(-10px, -4px) rotate(-0.5deg) } 82% { -ms-transform: translate(2px, -9px) rotate(1.5deg) } 84% { -ms-transform: translate(3px, 5px) rotate(1.5deg) } 86% { -ms-transform: translate(5px, 2px) rotate(2.5deg) } 88% { -ms-transform: translate(-5px, -1px) rotate(-1.5deg) } 90% { -ms-transform: translate(-1px, -9px) rotate(1.5deg) } 92% { -ms-transform: translate(8px, -6px) rotate(-3.5deg) } 94% { -ms-transform: translate(7px, -9px) rotate(-2.5deg) } 96% { -ms-transform: translate(4px, -5px) rotate(2.5deg) } 98% { -ms-transform: translate(8px, 0px) rotate(-3.5deg) } } @keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg) } 2% { transform: translate(-6px, -8px) rotate(2.5deg) } 4% { transform: translate(3px, -9px) rotate(-0.5deg) } 6% { transform: translate(3px, -8px) rotate(2.5deg) } 8% { transform: translate(0px, 5px) rotate(0.5deg) } 10% { transform: translate(3px, 2px) rotate(0.5deg) } 12% { transform: translate(8px, 0px) rotate(0.5deg) } 14% { transform: translate(4px, 7px) rotate(-3.5deg) } 16% { transform: translate(-4px, 0px) rotate(-0.5deg) } 18% { transform: translate(1px, 3px) rotate(-1.5deg) } 20% { transform: translate(-8px, -1px) rotate(-3.5deg) } 22% { transform: translate(5px, 9px) rotate(2.5deg) } 24% { transform: translate(-9px, -10px) rotate(-2.5deg) } 26% { transform: translate(0px, 7px) rotate(-1.5deg) } 28% { transform: translate(-10px, 7px) rotate(2.5deg) } 30% { transform: translate(8px, -7px) rotate(-1.5deg) } 32% { transform: translate(0px, -8px) rotate(-0.5deg) } 34% { transform: translate(9px, 7px) rotate(-0.5deg) } 36% { transform: translate(-7px, 6px) rotate(0.5deg) } 38% { transform: translate(8px, -10px) rotate(-0.5deg) } 40% { transform: translate(8px, 0px) rotate(0.5deg) } 42% { transform: translate(0px, -2px) rotate(1.5deg) } 44% { transform: translate(5px, -2px) rotate(-0.5deg) } 46% { transform: translate(1px, -10px) rotate(-2.5deg) } 48% { transform: translate(4px, -1px) rotate(2.5deg) } 50% { transform: translate(-5px, -4px) rotate(2.5deg) } 52% { transform: translate(3px, 2px) rotate(-3.5deg) } 54% { transform: translate(1px, -6px) rotate(-0.5deg) } 56% { transform: translate(-3px, -4px) rotate(-0.5deg) } 58% { transform: translate(-10px, -10px) rotate(2.5deg) } 60% { transform: translate(8px, 7px) rotate(-3.5deg) } 62% { transform: translate(9px, -6px) rotate(-3.5deg) } 64% { transform: translate(-5px, 8px) rotate(-0.5deg) } 66% { transform: translate(1px, -3px) rotate(0.5deg) } 68% { transform: translate(-6px, 9px) rotate(1.5deg) } 70% { transform: translate(-5px, 8px) rotate(-1.5deg) } 72% { transform: translate(-10px, -2px) rotate(2.5deg) } 74% { transform: translate(0px, -4px) rotate(1.5deg) } 76% { transform: translate(-2px, -5px) rotate(0.5deg) } 78% { transform: translate(-2px, 9px) rotate(-3.5deg) } 80% { transform: translate(7px, 4px) rotate(-3.5deg) } 82% { transform: translate(-1px, -4px) rotate(-1.5deg) } 84% { transform: translate(3px, -6px) rotate(0.5deg) } 86% { transform: translate(7px, -8px) rotate(-1.5deg) } 88% { transform: translate(4px, -9px) rotate(1.5deg) } 90% { transform: translate(1px, -6px) rotate(2.5deg) } 92% { transform: translate(-8px, -1px) rotate(-1.5deg) } 94% { transform: translate(-4px, -1px) rotate(0.5deg) } 96% { transform: translate(-6px, 9px) rotate(1.5deg) } 98% { transform: translate(7px, 4px) rotate(-0.5deg) } } .mousetip { background: url(/public/static/modules/cms/images/mousetip.png) no-repeat; width:36px; height: 20px; position: fixed; bottom: 10px; left: 50%; margin-left: -18px; z-index: 100; cursor: pointer; animation-name: firstPart; animation-duration: 0.8s; animation-timing-function: linear; animation-delay: 0.3s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; -moz-animation-name: firstPart; -moz-animation-duration: 0.8s; -moz-animation-timing-function: linear; -moz-animation-delay: 0.3s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; -webkit-animation-name: firstPart; -webkit-animation-duration: 0.8s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0.3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; -o-animation-name: firstPart; -o-animation-duration: 0.8s; -o-animation-timing-function: linear; -o-animation-delay: 0.3s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; } .imgbox { position: relative; overflow: hidden; } .customer { background: url("/public/static/modules/cms/images/customer.jpg") center no-repeat; background-size: contain; } .customer img { visibility: hidden; } @media (max-height:700px){ .product-inner section { padding-top: 0px; position: relative; top:-10px; } .gywm11{ margin-top: -550px!important; }#slider .slide{ height: 350px!important; }#slider{ height:350px!important; top:120px!important; } .product4 .bt{ top: 120px; }.product5 .bt{ top: 120px; }.product4 .text h1 { margin-top: 90px!important; }.lj { margin-top: 100px!important; }.product-inner section { padding-top: 0px; position: relative; top: -30px; }.footer{ bottom: -45px!important; }.d2 { padding-top: 35px;} } @media (max-width:1800px) { .d2{ width: 75%; } } @media (max-width:1450px) { .d2{ width: 85%; } } @media (max-width:1550px) { .xw { width:75%!important; margin: 0 auto; } } @media (max-width: 1220px){ .d2>img{ display: none; } } @media (max-width:1200px) { .xw { width:100%!important; margin: 0 auto; } .xw p{ top:5px!important; } } @media (max-width:1450px) { #header div{ left: 00px!important; } } .sidebar-wrapper{ max-height: 90px; } @media (max-width:389px) { .xw ul li{ padding-bottom: 17px; } } @media (max-width:1366px) { .other .item { top: 73%; top: 58%\9; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); } } @media (min-width:767px) and (max-width:1199px) { .product2 .item .text { padding: 0 0px; } .nav li a { margin-right: 10px; padding: 0 5px; } .nav li a span { margin-right: 0; } .customer { background-size: 70%; margin-top: 0; } .other .item { top: 76%; } .other .more { display: block; } /* ¨¦???????¨C??¡§ */ html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; } .subnav .j_hide.topMenu { display: none; } .home-icon:before{width:16px;height:16px;top:5px;background-position:0 0;} .business-icon:before{width:16px;height:16px;top:30px;background-position:0 -17px;} .product-icon:before{width:16px;height:17px;top:29px;background-position:0 -34px;} .case-icon:before{width:16px;height:17px;top:29px;background-position:0 -51px;} .service-icon:before{width:16px;height:17px;top:29px;background-position:0 -86px;} .brand-icon:before{width: 16px; height: 18px;top: 28px; background-position: 0 -68px;} .brand1-icon:before{width:16px;height:13px;top:30px;background-position:0 -104px;} .sidebar-wrapper {z-index: 1000000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; overflow: hidden; } .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 20%; background-color: #fff; z-index: 124; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform .5s ease-in-out; -o-transition: transform .5s ease-in-out; transition: transform .5s ease-in-out; } .sidebar-title { width: 100%; height: 63px; background-color: #666; position: fixed; z-index: 999; } .sidebar-content { padding:80px 0 25px 27px;height:499px;position:relative;overflow:auto;} .sidebar-menu > li { position: relative; padding: 24px 0; /* border-bottom: 1px solid #f4f7fc; */ } .sidebar-menu > li:first-child { padding-top: 0; } .sidebar-menu > li > a { padding-left: 32px; vertical-align: middle; font-size: 18px; color: #444; font-weight: 400; } .sidebar-sub-menu { display: none; padding-top: 24px; padding-left:0px; border-bottom: 1px solid #f4f7fc; padding-bottom: 24px; margin-bottom: -24px; } .active .sidebar-sub-menu { display: block; } .sidebar-sub-menu > li { padding: 15px 0; } .sidebar-sub-menu > li:first-child { padding-top: 24px; border-top: 1px solid #f4f7fc; } .sidebar-sub-menu > li:last-child { padding-bottom: 0; } .sidebar-sub-menu li a { padding-left: 0px; color: #666; } .s-translate { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media (max-width:1220px) { .d2 .d21{ margin-left: 0!important; } .text .d2 p{ margin-left: 0!important; } .gywm{ display: none; }.nav{ right: 20px; } } .xw { width: 62.5% ; margin: 0 auto; } .xw ul{ padding-left: 0!important; } .xw ul li{ overflow: hidden; margin: 0 0.65%; width:32%;float: left; } .xw ul li img{ margin-bottom: -16px; } .xw ul li img:hover{ transition: all 0.6s; transform: scale(1.1); } .xw ul li p{ line-height: 28px; height: 85px;overflow: hidden; text-align: left; background-color: #808080; margin: 0!important; padding: 8px 15px; padding-bottom: 38px; width: 100%; } .other .item>h2{ display: none; }.other .item>p{ display: none; } @media (max-width:1650px) { } @media (max-width:543px) { .footer{ height: 60px!important; } .footer p{ line-height: 30px!important; } } @media (max-width:1220px) { .d2{ padding-top: 0!important; } .d2 ul{ float:left; padding-left: 0px!important; margin-left: -20px!important; } } @media (max-width:1000px) { .d2{ width: 85%!important; }.text p{ width: 100%; }.d2 .d21{ width: 100%!important; } } @media (max-width:991px) { .other .item { top: 76%; } } @media (max-width: 1250px){ .d2 { width: 95%; } } @media (max-width:818px) and (min-width:768px) { .logo img { width: 260px; } .menu li { padding-right: 28px; margin-right: 28px; } .other .item { top: 76%; } .other .more { display: block; } } @media (max-width:768px) { .item .text, .other .item { padding: 0 46px; } .item .text h1 { font-size: 28px; font-weight: bold; line-height: 30px; } .item .text p, .other p { width: auto; top: 20px; line-height: 32px; } .nav li a { margin-right: 10px; padding: 0 5px; } .nav li a span { margin-right: 0; } .other .item { top: 80%; } .other .more { display: block; } } @media (max-width:818px) { .logo img { width: 130px;} } .bt{ position: relative; top:150px; } @media (max-width:767px) { .footer{ margin-left: -46px; } .product3 .item .text{ padding: 0 36px; } .xw ul li img{ display: none; } .xw ul li{ width: 80%!important; margin: 0 auto; margin-left: 10%; margin-bottom: 20px; } .other .item>h2{ display: block; }.other .item>p{ display: block; } .other .item .product-inner{ display: none; } .d2 p{ font-size: 13px!important; } .d2{ width: 85%!important; margin-top: -30px; } .d2 .d21 img{ width: 70%!important; } .menu { display: none} #header { height: auto; overflow: visible; } .header-fixed { position: relative; } .menu { position: absolute; right: 0; left: 0; } .menu ul { width: 100%; margin-top: 20px; margin-right: 0; } .menu li { background-color: #fff; color: #333; width: 100%; border-bottom: 1px solid #ccc; padding: 10px 0; text-align: center; } .menu li a { color: #333; } .menu .yewu_ol { left: 15%; } .menu-ul { display: none !important; } ul.hide.menu-ul { display: block !important; } .other .item { top: 96%; } .other .more { display: block; } /* ¨¦???????¨C??¡§ */ html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; } .logo { padding-left: 15px; padding-bottom: 8px; margin: 8px 0 0 0;} .subnav .j_hide.topMenu { display: none; } .home-icon:before{width:16px;height:16px;top:5px;background-position:0 0;} .business-icon:before{width:16px;height:16px;top: 23px;background-position: 0 -17px;} .product-icon:before{width:16px;height:17px;top: 22px;background-position:0 -34px;} .case-icon:before{width:16px;height:17px;top: 22px;background-position:0 -51px;} .service-icon:before{width:16px;height:17px;top: 22px;background-position:0 -86px;} .brand-icon:before{width: 16px;height: 18px;top: 22px;background-position: 0 -68px;} .brand1-icon:before{width:16px;height:13px;top: 25px;background-position:0 -104px;} .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 45%; background-color: #fff; z-index: 124; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform .5s ease-in-out; -o-transition: transform .5s ease-in-out; transition: transform .5s ease-in-out; } .sidebar-title { width: 100%; height: 65px; background-color: #666; position: fixed; z-index: 999; } .sidebar-content {padding:80px 0 25px 27px;height: 603px;position:relative;overflow:auto;} .sidebar-menu > li {position: relative;padding: 16px 0;/* border-bottom: 1px solid #f4f7fc; */} .sidebar-menu > li:first-child { padding-top: 0; } .sidebar-menu > li > a { padding-left: 32px; vertical-align: middle; font-size: 18px; color: #444; font-weight: 400; } .sidebar-sub-menu { display: none; padding-top: 24px; padding-left:0px; border-bottom: 1px solid #f4f7fc; padding-bottom: 24px; margin-bottom: -24px; } .active .sidebar-sub-menu { display: block; } .sidebar-sub-menu > li { padding: 15px 0; } .sidebar-sub-menu > li:first-child { padding-top: 24px; border-top: 1px solid #f4f7fc; } .sidebar-sub-menu > li:last-child { padding-bottom: 0; } .sidebar-sub-menu li a { padding-left: 0px; color: #666; } .s-translate { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .start {background: url('/public/static/modules/cms/images/banner-01-xs.jpg') center center no-repeat; background-size: cover;} .product1 {background: url('/public/static/modules/cms/images/banner-02-xs.jpg') center center no-repeat; background-size: cover;} .product2 {background: url('/public/static/modules/cms/images/banner-03-xs.jpg') center center no-repeat; background-size: cover; margin-top: -150px;} .product3 {background: url('/public/static/modules/cms/images/banner-04-xs.jpg') center center no-repeat; background-size: cover;margin-top: -150px;} .product4 {background: url('/public/static/modules/cms/images/banner-05-xs.jpg') center center no-repeat; background-size: cover;margin-top: 0px;} .product5 {background: url('/public/static/modules/cms/images/banner-06-xs.jpg') center center no-repeat; background-size: cover;} .product2 .item .text { padding: 0 0px; } .item .text {padding: 0 62px;} .item .text h1 {font-size: 26px; font-weight: 400; } .product4 .text h1{ margin-top: 120px; } .item .text p {font-size: 13px; line-height: 22px;} .btn a {font-size: 11px;padding: 8px 27px;} .start .text {top: 21%;} .product4 .text {top: 21%;} .product2 .item .text ul { padding-top: 0px;} .product2 .item ul { padding-top: 0px;} .product2 .item .q1 ul li { float: left; width: 15.8%; margin: 12.5% 17.1%; }.product2 .item .q1{ top:20%; } .nav li a span {background: url('/public/static/modules/cms/images/pager-xs.png') center center no-repeat;} .nav li.active a span {background: url('/public/static/modules/cms/images/pager1-xs.png') center center no-repeat;} .product2 .item .text ul li { float: left; width: 50%; overflow: hidden; } .bt{ top:100px; } } @media (max-width:650px) { .d2{ width: 100%!important; }.item .text{ padding: 0 20px; } } @media (max-width:600px) { .d2 p{ padding-left: 10px!important; } .product1 .item .text { padding: 0 20px!important; } .product2 .item .text ul { padding-top: 50px;} .product2 .item ul { padding-top: 50px;} } @media (max-width:500px) { .xw ul li{ width: 90%!important; margin-left: 5%; } .product2 .item .text ul { padding-top: 80px;} .product2 .item ul { padding-top: 80px;} .d2 .d21 img{ width: 90%!important; } .a1{ width: 70px!important; } .d2 ul{ margin-left:-10px!important; } .d2 ul li{ margin: 0 5px!important; } .a2{ width: 70px!important; } } @media (max-width:450px) { .product4 .item .text{ padding: 0 20px; } .product4 .btn { text-align: center; margin-top: 132px;} .product4 .text h1{ margin-bottom: 10px; } .logo { margin-left: 5px; } .navigation { margin-right: 10px; } .menu .yewu_ol { top: 0; left: 55%; } .item .text { padding: 0 46px; } .item .text h1 { font-size: 24px; line-height: 30px; } .item .text p, .other p { width: auto; top: 40px; line-height: 24px; } .item .text .btn { top: 0; } .nav { margin-top: 0; transform: translateY(-60%); -webkit-transform: translateY(-60%); -moz-transform: translateY(-60%); -ms-transform: translateY(-60%); } .nav li a { margin-right: 10px; padding: 0 5px; } .nav li a span { margin-right: 0; } .other .more { display: block; } } @media (max-height:850px) { .product4 .text h1{ margin-top: 120px; } } .video1{ display: none; } @media (max-width:420px) and (max-height:750px) { .start { background: url(/public/static/modules/cms/images/sp.gif) center center no-repeat; background-size: cover; } .video{ display: none; } .product1 .item .text{ top:18%!important; } .product2 { margin-top: -100px;}.product3 { margin-top: -100px;} .product4 { margin-top: -100px;} .bt img{ margin-top: 100px!important; } .product5 .bt img{ margin-top: 0px!important; } .product2 .item ul{ padding-top: 60px!important; } .product3 .item .text .xw{ padding-top: 20px!important; } .product3 .btn { margin-top:41px!important; } .product4 .text h1 { margin-top: 85px!important; }.nav{ right: 0px; } .footer{ margin-bottom: -4px!important; } .product4 .btn { text-align: center; margin-top: 82px!important; }#slider{ height: 300px; }#slider .slide{ height: 300px; width: 350px; } .d2 .d21{ margin-top:20px!important; } .d2 ul{ margin-top: 70px; } } @media (max-width:390px) and (max-height:680px) { .xw ul li{ margin-bottom: 0!important; } .bt img { margin-top: 80px!important; }.product4 .text h1 { margin-top: 70px!important; } .product2 { margin-top: -80px;} .product3 {margin-top: -80px;} .product4 {margin-top: -80px;} .lj{ margin-top: 100px!important; }.other .item{ padding: 0 20px; }.footer{ margin-left: -20px; margin-bottom: 17px!important; } }