* {margin:0;padding:0;list-style:none;border:0}

product-inner
body { position: relative }
#container { width: 100%; overflow: hidden; position: relative }

.text-center { text-align: center; }
.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); 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: 0 0 }

.item { position: absolute; top: 0; bottom: 0; left: 0; right: 0 }
.item .text { position: absolute; top: 35%; top: 20%\9; left: 0; right: 0; z-index: 10 }
.start .text { top: 36%; top: 30%\9 }
.product4 .text { top: 38%; top: 38%\9 }
video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(../images/banner_01.jpg) center center no-repeat; background-size: cover }
.text h1 { color: #fff; font-family: microsoft yahei; font-size: 54px; text-align: center; position: relative; top: 30px }
.text p { line-height: 26px; width: 762px; margin: 0 auto; padding: 12px 0 35px; text-align: center; position: relative; top: 15px;color:white }

.start { height: 100%; background: #3671cf; background-size: cover; z-index: 10; width: 100%; overflow: hidden }
.product1 { background: #3671cf; background-size: cover }
.product2 { background: #3671cf; background-size: cover }
.product3 { background: #3671cf; background-size: cover }
.product4 { background: #3671cf; background-size: cover }
.product5 { background: #3671cf; background-size: cover }

.btn { text-align: center; position: relative; display: inline-block }
.btn a { display: inline-block; width: 180px; height: 48px; text-align: center; line-height: 48px; border-radius: 4px; color: #fff; background-color: #f90 }
.btn a + a { margin-left: 10px }
.btn a span { display: inline-block; margin-right: 0; color: #fff; transition: all ease .5s }
.btn a img { width: 17px; height: 16px; margin-top: -3px; margin-left: 0; display: none; margin-bottom: 0; transition: all ease .5s;}
.btn a:hover span { margin-right: 10px }
.btn a:hover img { display: inline-block }
.mask-bg:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.5); z-index: 5; display: block }
.nav { margin-top: -71px; position: fixed; right: 0; top: 50%; z-index: 50 }
.nav li a span { background: url(/images/pagescroll/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(/images/pagescroll/pager1.png) center center no-repeat }
.nav li > a { outline: none }
.other { background-color: #fff; width: 100%; overflow: hidden; position: relative; text-align: center }
.other > a { display: inline-block; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 28px }
.other h2 { color: #333; font-family: microsoft yahei; font-size: 28px; text-align: center; margin-top: 46px; margin-bottom: 11px }
.other p { color: #333; font-size: 14px; width: 782px; margin: 0 auto; text-align: center }
.other ul { width: 1110px; margin: 36px auto 0; 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: #f90; font-size: 14px }
.other .beian { color: #ccc; height: auto; font-size: 12px; top: auto }
.other .item { top: 77%; top: 74%\9; -webkit-transform: translateY(-60%); transform: translateY(-60%) }
.other .links { position: absolute; bottom: 10px; left: 0; right: 0; color: #ccc }
.other .links a { color: inherit; font-size: 12px }

@keyframes firstPart {
    0% { bottom: 40px }
    100% { bottom: 20px }
}

@-webkit-keyframes firstPart {
    0% { bottom: 40px }
    100% { bottom: 20px }
}

.mousetip { background: url(/images/pagescroll/mousetip.png) no-repeat; width: 51px; height: 41px; position: fixed; bottom: 10px; left: 50%; margin-left: -25px; z-index: 100; cursor: pointer; animation-name: firstPart; animation-duration: .8s; animation-timing-function: linear; animation-delay: .3s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; -moz-animation-name: firstPart; -moz-animation-duration: .8s; -moz-animation-timing-function: linear; -moz-animation-delay: .3s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; -webkit-animation-name: firstPart; -webkit-animation-duration: .8s; -webkit-animation-timing-function: linear; -webkit-animation-delay: .3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; -o-animation-name: firstPart; -o-animation-duration: .8s; -o-animation-timing-function: linear; -o-animation-delay: .3s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running }

.imgbox { position: relative; overflow: hidden }
.customer { background: url(../images/customer.html) center no-repeat; background-size: contain }
.customer img { visibility: hidden }

@media(max-width:1366px) {
    .other .item { top: 73%; top: 58%\9; -webkit-transform: translateY(-60%); transform: translateY(-60%) }
}

@media(max-width:1199px) {
    .item .text { padding: 0 46px }
    .item .text h1 { font-size: 32px; font-weight: 700; line-height: 30px }
    .item .text p { width: auto; top: 20px; line-height: 32px }
    .nav li a { margin-right: 10px; padding: 0 5px }
    .nav li a span { margin-right: 0 }
    .customer { background-size: 70%; margin-top: 0 }
}

@media(max-width:991px) {
    .other .item { top: 76% }
}

@media(max-width:818px) and (min-width:768px) {
    .logo img { width: 260px }
    .menu-ul > 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: 700; 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:767px) {
    #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-ul > li { background-color: #fff; color: #333; width: 100%; border-bottom: 1px solid #ccc; padding: 10px 0; text-align: center }
    .menu-ul > li a { color: #333 }
    .menu .yewu_ol { left: 15% }
    .menu-ul { display: none !important }
    ul.hide.menu-ul { display: block !important }
    .other .item { top: 76% }
    .other .more { display: block }
    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: 22px; margin: 17px 0 0 }
    .subnav .j_hide.topMenu { display: none }
    .navbar-icon:before { content: ""; background-image: url(../images/navsprite.png); background-repeat: no-repeat; position: absolute; display: inline-block; text-align: center; vertical-align: middle }
    .icon-toggle:before { content: ""; position: absolute; display: inline-block; background: url(../images/icon-toggle-white.png) no-repeat center; right: 10px; top: 20px; width: 30px; height: 30px; z-index: 123 }
    .left-arrow-icon:before { content: ""; position: absolute; display: inline-block; background: url(../images/left-arrow-icon.png) no-repeat center; width: 30px; height: 30px; top: 50%; left: 19px; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg) }
    .home-icon:before { width: 16px; height: 16px; top: 5px; background-position: 0 0 }
    .business-icon:before { width: 16px; height: 16px; top: 33px; background-position: 0 -23px }
    .product-icon:before { width: 16px; height: 17px; top: 30px; background-position: 0 -40px }
    .case-icon:before { width: 16px; height: 17px; top: 30px; background-position: 0 -63px }
    .service-icon:before { width: 16px; height: 17px; top: 31px; background-position: 0 -83px }
    .brand-icon:before { width: 16px; height: 13px; top: 32px; background-position: 0 -102px }
    .sidebar-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; overflow: hidden }
    .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 80%; background-color: #fff; z-index: 124; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform .5s ease-in-out; -webkit-transition: -webkit-transform .5s ease-in-out; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out }
    .sidebar-title { width: 100%; height: 45px; background-color: #3671cf; position: fixed; z-index: 999 }
    .sidebar-content { padding: 96px 0 25px 27px; height: 499px; position: relative; overflow: auto }
    .sidebar-menu > li { position: relative; padding: 24px 0 }
    .sidebar-menu > li:first-child { padding-top: 0 }
    .sidebar-menu > li > a { padding-left: 32px; vertical-align: middle; font-size: 20px; color: #444; font-weight: 400 }
    .sidebar-sub-menu { display: none; padding-top: 24px; padding-left: 10px; 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 { font-size: 14px; color: #666 }
    .s-translate { -webkit-transform: translateX(0); transform: translateX(0) }
    .start { background: url(../images/banner-01-xs.jpg) center center no-repeat; background-size: cover }
    .product1 { background: url(../images/banner-02-xs.jpg) center center no-repeat; background-size: cover }
    .product2 { background: url(../images/banner-03-xs.jpg) center center no-repeat; background-size: cover }
    .product3 { background: url(../images/banner-04-xs.jpg) center center no-repeat; background-size: cover }
    .product4 { background: url(../images/banner-05-xs.jpg) center center no-repeat; background-size: cover }
    .product5 { background: url(../images/banner-06-xs.jpg) center center no-repeat; background-size: cover }
    .item .text { padding: 0 62px }
    .item .text h1 { font-size: 22px; font-weight: 400 }
    .item .text p { font-size: 13px; line-height: 22px }
    .btn a { font-size: 11px; padding: 8px 27px; display: inline; }
    .start .text { top: 21% }
    .product4 .text { top: 21% }
    .nav li a span { background: url(../images/pager-xs.png) center center no-repeat }
    .nav li.active a span { background: url(../images/pager1-xs.png) center center no-repeat }
}

@media(max-width:450px) {
    .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: 20px; 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 .item { top: 74% }
    .other .more { display: block }
}