.clear{ clear:both;} @media (min-width: 729px) and (max-width:1920px ) { /*头部*/ #fh5co-header-section { padding: 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 2; } .scroll #fh5co-header-section{height:62px; position:fixed;top:0px; width:100%; z-index:99;} .scroll #fh5co-header-section .topbar{ display:none;} .scroll #fh5co-header-section .topritop {-webkit-transition: 1s;transition: 1s; display:none;} .scroll #fh5co-header-section .toplogo{ float:left; padding-top:8px;-webkit-transition: 1s;transition: 1s;} .scroll #fh5co-header-section .toplogo a{ display:block; background:url(../images/n1_01.png) no-repeat; width:185px; height:52px;} .scroll #fh5co-header-section .nav{-webkit-transition: 1s;transition: 1s; float:left;} .scroll #fh5co-header-section div.hidden-box{ top:49px;} .scroll #fh5co-header-section .fixedlogo{ float:left; padding-top:5px; display:block;} } @media (max-width: 768px) { /*头部*/ #bframe{ float:left; width:100%; margin-top:75px;} .nframe{ float:left; width:100%; margin-top:75px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top; min-height: 320px; } #fh5co-header-section { padding: 0; padding-top: 10px; top: 0; left: 0; width: 100%; z-index: 2; position: absolute; background: #fff; display:none; } .bframe { margin-top:75px; } .mobile-meunu{height:75px; position:fixed; z-index:999; width:100%;-webkit-transition: 1s;transition: 1s; top:0px; left:0px;} .mobilebg{ background:#fff; height:75px; float:left; width:100%; border-bottom:1px solid #ddd;} .mobile-logo{ float:left; padding-top:15px; padding-left:.2em;} .mobile-logo img{ height:50px;} } ul.nav-main{ width: 100%; height: 100%; list-style-type: none;margin:0; padding:0px;padding-left:2em; } .hover-up{ } .hover-down{ transition-duration: .5s; transform: rotate(0deg); -webkit-transform: rotate(0deg); } .mlogo{ display:none;} #nav_lis{ width:100%; background:#05ebde; height:62px; float:left;} @media (min-width: 1200px) { #bframe{ float:left; width:100%; margin-top:170px;} .nframe{ float:left; width:100%; margin-top:170px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top; min-height: 450px; } .toplogo{ float:left; padding-top:18px; padding-bottom:5px;} .toplogo a{ display:block; background:url(../images/1_01.png) no-repeat; width:500px; height:82px;} .topright{ float:right; width:225px; margin-top:5px;} .topritop{ float:left; width:225px; padding-top:6px;-webkit-transition: 1s;transition: 1s;} div.nav{ text-align: center; font-size: 1.2em; position: relative; float:left; } .tolor{ float:left; line-height:20px; color:#eb3d00; width:225px;} .tolor img{ padding-right:5px;padding-left:10px; float:left;} .tolor p{float:left; color:#3d3d3d; line-height:32px; font-size:1.2em; padding-left:5px;} .topritel{ float:left; width:225px; color:#fa2525; font-size:1.4em; padding-left:20px;} .topbottom{ float:left; width:225px;padding-left:20px;font-size:1.1em; padding-top:5px;} .topbottom p{ float:left; width:225px; margin:0px;} .topbottom p i{ color:#fa2525;font-size:1.2em; font-weight:bold;} .scroll #fh5co-header-section .mlogo{ display:block; float:left; padding-top:5px; padding-right:20px;} .scroll #fh5co-header-section .mlogo a{ float:left;} .scroll #fh5co-header-section .mlogo a img{ float:left;} .nasear{ float:right;} .nasear img{ float:left;} ul.nav-main>li{ height: 100%; display: block; float: left; cursor: pointer; padding-right:8px; text-transform:uppercase; } ul.nav-main>li a{ color:#333; display:block; text-decoration:none; padding-left:28px; padding-right:28px; padding-top:22px; line-height:20px; padding-bottom:20px;} ul.nav-main>li a:hover{ color:#fff;background:#000;} ul.nav-main>li a.hover{ color:#fff;background:#000;} .scroll #fh5co-header-section div.nav{ line-height:20px; text-align: center; font-size: 1em; position: relative; float:right; padding-top:0px; width:1000px; } .scroll #fh5co-header-section ul.nav-main>li { padding-top:24px;} .scroll #fh5co-header-section ul.nav-main>li a{ color:#000; display:block; text-decoration:none; padding-left:18px; padding-right:18px; padding-top:0px; padding-bottom:0px;} .scroll #fh5co-header-section ul.nav-main>li a.hover{color:#fff;background:#000;} .scroll #fh5co-header-section ul.nav-main>li a:hover{color:#fff;background:#000;} .mobile-meunu{ display:none;} } @media (min-width: 992px) and (max-width:1199px ) { #bframe{ float:left; width:100%; margin-top:174px;} .nframe{ float:left; width:100%; margin-top:174px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top; min-height: 380px;} .toplogo{ float:left; padding-top:22px; padding-bottom:5px;} .toplogo a{ display:block; background:url(../images/1_01.png) no-repeat; width:500px; height:82px;} .scroll #fh5co-header-section .mlogo{ display:block; float:left; padding-top:5px; padding-right:20px; padding-left:15px;} .scroll #fh5co-header-section .mlogo a{ float:left;} .scroll #fh5co-header-section .mlogo a img{ float:left;} .topright{ float:right; width:225px; margin-top:5px;} .topritop{ float:left; width:225px; padding-top:10px;-webkit-transition: 1s;transition: 1s;} .tolor{ float:left; line-height:20px; color:#eb3d00; width:225px;} .tolor img{ padding-right:5px;padding-left:10px; float:left;} .tolor p{float:left; color:#3d3d3d; line-height:32px; font-size:1.2em; padding-left:5px;} .topritel{ float:left; width:225px; color:#fa2525; font-size:1.4em; padding-left:20px;} .topbottom{ float:left; width:225px;padding-left:20px;font-size:1.1em; padding-top:5px;} .topbottom p{ float:left; width:225px; margin:0px;} .topbottom p i{ color:#fa2525;font-size:1.2em; font-weight:bold;} div.nav{ text-align: center; font-size: 1.2em; position: relative; float:left; } ul.nav-main>li{ height: 100%; display: block; float: left; cursor: pointer; padding-right:8px; text-transform:uppercase; } ul.nav-main>li a{ color:#000; display:block; text-decoration:none; padding-left:20px; padding-right:20px; line-height:20px; padding-top:22px; padding-bottom:20px; font-size:15px;} ul.nav-main>li a:hover{ color:#fff;background:#000;} ul.nav-main>li a.hover{ color:#fff;background:#000;} .scroll #fh5co-header-section div.nav{ line-height:20px; text-align: center; font-size: 1em; position: relative; float:left; padding-top:0px; width:850px; } .scroll #fh5co-header-section ul.nav-main>li { padding-top:24px;} .scroll #fh5co-header-section ul.nav-main>li a{ color:#000; display:block; text-decoration:none; padding-left:15px; padding-right:15px; padding-top:0px; padding-bottom:0px; font-size:13px;} .scroll #fh5co-header-section ul.nav-main>li a.hover{color:#fff;background:#000;} .scroll #fh5co-header-section ul.nav-main>li a:hover{color:#fff;background:#000;} .mobile-meunu{ display:none;} } @media (min-width: 768px) and (max-width:991px ) { .nframe{ float:left; width:100%; margin-top:160px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top; min-height: 320px;} #bframe{ float:left; width:100%; margin-top:160px;} .toplogo{ float:left; padding-top:22px; padding-bottom:5px;} .toplogo a{ display:block; background:url(../images/1_01.png) no-repeat; width:165px; height:71px; background-position: 50% 50%; background-size: 165px 71px;} .scroll #fh5co-header-section .mlogo{ display:block; float:left; padding-top:5px; padding-right:20px; padding-left:15px;} .scroll #fh5co-header-section .mlogo a{ float:left;} .scroll #fh5co-header-section .mlogo a img{ float:left;} .topright{ float:right; width:225px; margin-top:2px;} .topritop{ float:left; width:225px; padding-top:10px;-webkit-transition: 1s;transition: 1s;} .tolor{ float:left; line-height:20px; color:#eb3d00; width:225px;} .tolor img{ padding-right:5px;padding-left:10px; float:left;} .tolor p{float:left; color:#3d3d3d; line-height:32px; font-size:1em; padding-left:5px; padding-bottom:0px; margin:0px; margin-bottom:4px;} .topritel{ float:left; width:225px; color:#fa2525; font-size:1.2em; padding-left:20px;} .topbottom{ float:left; width:225px;padding-left:20px;font-size:1em; padding-top:2px;} .topbottom p{ float:left; width:225px; margin:0px;} .topbottom p i{ color:#fa2525;font-size:1em; font-weight:bold;} div.nav{ text-align: center; font-size: .8em; position: relative; float:left; } ul.nav-main>li{ height: 100%; display: block; float: left; cursor: pointer; padding-right:8px; text-transform:uppercase; } ul.nav-main>li a{ color:#000; display:block; text-decoration:none; padding-left:15px; padding-right:15px; line-height:20px;padding-top:22px; padding-bottom:20px; } ul.nav-main>li a:hover{ color:#fff;background:#000;} ul.nav-main>li a.hover{ color:#fff;background:#000;} .scroll #fh5co-header-section div.nav{ line-height:20px; text-align: center; font-size: .8em; position: relative; float:left; padding-top:0px; width:750px; } .scroll #fh5co-header-section ul.nav-main>li { padding-top:24px;} .scroll #fh5co-header-section ul.nav-main>li a{ color:#000; display:block; text-decoration:none; padding-left:10px; padding-right:10px;padding-top:0px; padding-bottom:0px; } .scroll #fh5co-header-section ul.nav-main>li a.hover{color:#fff;background:#000;} .scroll #fh5co-header-section ul.nav-main>li a:hover{color:#fff;background:#000;} .mobile-meunu{ display:none;} } .mobile-nav { position: relative; width: auto; display: inline-block; border: none; } .btn-nav { position: fixed; top: 10px; right: 10px; background: transparent; border: none; padding: 10px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; cursor: pointer; z-index: 99999; } .btn-nav:focus { outline: 0; } .icon-bar { display: block; margin: 6px 0; width: 30px; height: 4px; background-color: #05ebde; } .btn-nav:hover .icon-bar { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; background-color: #05ebde; } .nav-content { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: block; height: 100%; z-index: 9; } .nav-list { list-style: none; padding: 0; position: relative; top: 15%; } .item-anchor:after { content: ""; position: absolute; width: 3px; height: 3px; left: 0; bottom: 0; z-index: 9; background: transparent; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .item-anchor { color: #000; font-size: 1.5em; text-transform: uppercase; position: relative; text-decoration: none; padding: 10px; } .item-anchor:hover, .item-anchor:focus { text-decoration:none; color: #05ebde; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .item-anchor:hover:after, .item-anchor:focus:after{ width: 100%; background: #05ebde; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .nav-item { margin: 25px auto; text-align: center; } .animated { display: block; margin: 0 auto; } .animated:hover .icon-bar, .animated:focus .icon-bar{ background-color: #05ebde; } .animated:focus { cursor: pointer; z-index: 9999; } .middle { margin: 0 auto; } .icon-bar { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; z-index: 999999; } .animated .icon-bar { z-index: 999999; background-color: #05ebde; } .animated .top { -webkit-transform: translateY(10px) rotateZ(45deg); -moz-transform: translateY(10px) rotateZ(45deg); -ms-transform: translateY(10px) rotateZ(45deg); -o-transform: translateY(10px) rotateZ(45deg); transform: translateY(10px) rotateZ(45deg); } .animated .bottom { -webkit-transform: translateY(-11px) rotateZ(-45deg); -moz-transform: translateY(-11px) rotateZ(-45deg); -ms-transform: translateY(-11px) rotateZ(-45deg); -o-transform: translateY(-11px) rotateZ(-45deg); transform: translateY(-11px) rotateZ(-45deg); } .animated .middle { width: 0; } @keyframes showNav { from { top: -100%; } to { top: 0; } } @-webkit-keyframes showNav { from { top: -100%; } to { top: 0; } } @-moz-keyframes showNav { from { top: -100%; } to { top: 0; } } @-o-keyframes showNav { from { top: -100%; } to { top: 0; } } .showNav { -webkit-animation: showNav 1s ease forwards; -moz-animation: showNav 1s ease forwards; -o-animation: showNav 1s ease forwards; animation: showNav 1s ease forwards; } @keyframes hideNav { from { top: 0; } to { top: -100%; } } @-webkit-keyframes hideNav { from { top: 0; } to { top: -100%; } } @-moz-keyframes hideNav { from { top: 0; } to { top: -100%; } } @-o-keyframes hideNav { from { top: 0; } to { top: -100%; } } .hideNav { -webkit-animation: hideNav 1s ease forwards; -moz-animation: hideNav 1s ease forwards; -o-animation: hideNav 1s ease forwards; animation: hideNav 1s ease forwards; } .hidden { display: none; } @media (min-width: 1200px) and (max-width:1920px ) { .productsbg{ width:100%; background:#e7eef5; padding-top:60px; padding-bottom:60px;} .protitle_left{ width:50%; text-align:right; float:left;} .protitle_left h2{ width:100%; float:left; color:#474747; font-size:2.2em; line-height:25px;} .protitle_left p{ width:100%; float:left; color:#ced5e8; font-size:1.4em; font-family:Arial, Helvetica, sans-serif; line-height:22px;} .protitle_right{ float:left; width:50%; text-align:left;} .protitle_right h2{ font-size:3.4em; color:#474747; font-weight:bold; line-height:40px; text-indent:8px;} .ptlist{ padding:8px; background:#fff; margin-bottom:20px;} .ptlist_top{ width:100%;} .ptlist_bot{ width:100%; text-align:center; margin-top:10px; margin-bottom:10px;} .ptlists{ margin-top:35px;} .prolist_le{ float:left; width:100%; background:#fff; height:680px;} .proli_lebr{ float:left; width:10px; background:#e7eef5; height:680px;} .proli_ul { float:left; width:262px; margin-top:20px;} .proli_ul ul { list-style:none; float:left; width:100%; padding:0px; margin:0px;} .proli_ul ul li{ float:left; width:100%;} .proli_ul ul li a{ float:left; padding-left:25px; padding-top:10px; padding-bottom:10px;} .proli_ul ul li a span{ float:left; font-size:1.2em; line-height:60px; padding-left:15px;} .proli_ul ul li a .icon-1{ float:left; width:60px; height:60px; background:url(../images/c1.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover{ background:#05ebde; width:262px;} .proli_ul ul li a:hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a:hover span{ color:#fff;} .proli_ul ul li a.hover{ background:#05ebde; width:262px;} .proli_ul ul li a.hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover span{ color:#fff;} .proli_ul ul li a .icon-2{ float:left; width:60px; height:60px; background:url(../images/c2.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a .icon-3{ float:left; width:60px; height:60px; background:url(../images/c3.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a .icon-4{ float:left; width:60px; height:60px; background:url(../images/c4.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a .icon-5{ float:left; width:60px; height:60px; background:url(../images/c5.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a .icon-6{ float:left; width:60px; height:60px; background:url(../images/c6.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a .icon-7{ float:left; width:60px; height:60px; background:url(../images/c7.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a .icon-8{ float:left; width:60px; height:60px; background:url(../images/c8.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .proli_ul ul li a:hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } .proli_ul ul li a.hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); } } @media (min-width: 992px) and (max-width:1199px ) { .productsbg{ width:100%; background:#e7eef5; padding-top:60px; padding-bottom:60px;} .protitle_left{ width:50%; text-align:right; float:left;} .protitle_left h2{ width:100%; float:left; color:#474747; font-size:2em; line-height:23px;} .protitle_left p{ width:100%; float:left; color:#ced5e8; font-size:1.1em; font-family:Arial, Helvetica, sans-serif; line-height:22px;} .protitle_right{ float:left; width:50%; text-align:left;} .protitle_right h2{ font-size:3em; color:#474747; font-weight:bold; line-height:40px; text-indent:8px;} .ptlist{ padding:8px; background:#fff; margin-bottom:20px;} .ptlist_top{ width:100%;} .ptlist_bot{ width:100%; text-align:center; margin-top:10px; margin-bottom:10px;} .ptlists{ margin-top:35px;} .prolist_le{ float:left; width:100%; background:#fff; height:567px;} .proli_lebr{ float:left; width:10px; background:#e7eef5; height:567px;} .proli_ul { float:left; width:212px; margin-top:20px;} .proli_ul ul { list-style:none; float:left; width:100%; padding:0px; margin:0px;} .proli_ul ul li{ float:left; width:100%;} .proli_ul ul li a{ float:left; padding-left:20px; padding-top:10px; padding-bottom:10px;} .proli_ul ul li a span{ float:left; font-size:1em; line-height:45px; padding-left:8px;} .proli_ul ul li a .icon-1{ float:left; background:url(../images/c1.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a:hover{ background:#05ebde; width:212px;} .proli_ul ul li a:hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px; width:45px; height:45px; } .proli_ul ul li a:hover span{ color:#fff;} .proli_ul ul li a.hover{ background:#05ebde; width:212px;} .proli_ul ul li a.hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px; width:45px; height:45px; } .proli_ul ul li a.hover span{ color:#fff;} .proli_ul ul li a .icon-2{ float:left; width:45px;height:45px; background:url(../images/c2.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;} .proli_ul ul li a:hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a .icon-3{ float:left; background:url(../images/c3.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-4{ float:left; background:url(../images/c4.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-5{ float:left; width:45px;height:45px;background:url(../images/c5.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;} .proli_ul ul li a:hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0);background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-6{ float:left; background:url(../images/c6.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-7{ float:left; background:url(../images/c7.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a .icon-8{ float:left; background:url(../images/c8.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a.hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a.hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} } @media (min-width: 768px) and (max-width:991px ) { .fst2 { float:left; display:none;} .fst1 { float:right; } .productsbg{ width:100%; background:#e7eef5; padding-top:30px; padding-bottom:30px;} .protitle_left{ width:50%; text-align:right; float:left;} .protitle_left h2{ width:100%; float:left; color:#474747; font-size:1.8em; line-height:20px;margin:0px; padding:0px;margin-top:26px; margin-bottom:4px;} .protitle_left p{ width:100%; float:left; color:#ced5e8; font-size:.9em; font-family:Arial, Helvetica, sans-serif; line-height:20px;} .protitle_right{ float:left; width:50%; text-align:left;} .protitle_right h2{ font-size:2.5em; color:#474747; font-weight:bold; line-height:40px; text-indent:8px;} .ptlist{ padding:8px; background:#fff; margin-bottom:20px;} .ptlist_top{ width:100%;} .ptlist_bot{ width:100%; text-align:center; margin-top:10px; margin-bottom:10px;} .ptlists{ margin-top:15px;} .prolist_le{ float:left; width:100%; background:#fff; height:567px;} .proli_lebr{ float:left; width:10px; background:#e7eef5; height:567px;} .proli_ul { float:left; width:212px; margin-top:20px;} .proli_ul ul { list-style:none; float:left; width:100%; padding:0px; margin:0px;} .proli_ul ul li{ float:left; width:100%;} .proli_ul ul li a{ float:left; padding-left:20px; padding-top:10px; padding-bottom:10px;} .proli_ul ul li a span{ float:left; font-size:1em; line-height:45px; padding-left:8px;} .proli_ul ul li a .icon-1{ float:left; background:url(../images/c1.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a:hover{ background:#05ebde; width:212px;} .proli_ul ul li a:hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px; width:45px; height:45px; } .proli_ul ul li a:hover span{ color:#fff;} .proli_ul ul li a.hover{ background:#05ebde; width:212px;} .proli_ul ul li a.hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px; width:45px; height:45px; } .proli_ul ul li a.hover span{ color:#fff;} .proli_ul ul li a .icon-2{ float:left; width:45px;height:45px; background:url(../images/c2.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;} .proli_ul ul li a:hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a .icon-3{ float:left; background:url(../images/c3.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-4{ float:left; background:url(../images/c4.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-5{ float:left; width:45px;height:45px;background:url(../images/c5.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;} .proli_ul ul li a:hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0);background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-6{ float:left; background:url(../images/c6.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-7{ float:left; background:url(../images/c7.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a .icon-8{ float:left; background:url(../images/c8.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a.hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a.hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} } @media (max-width: 767px) { .fst2 { float:left; display:none;} .fst1 { float:right; } .productsbg{ width:100%; background:#e7eef5; padding-top:30px; padding-bottom:30px;} .protitle_left{ width:50%; text-align:right; float:left;} .protitle_left h2{ width:100%; float:left; color:#474747; font-size:1.8em; line-height:20px;margin:0px; padding:0px;margin-top:26px; margin-bottom:4px;} .protitle_left p{ width:100%; float:left; color:#ced5e8; font-size:.9em; font-family:Arial, Helvetica, sans-serif; line-height:20px;} .protitle_right{ float:left; width:50%; text-align:left;} .protitle_right h2{ font-size:2.5em; color:#474747; font-weight:bold; line-height:40px; text-indent:8px;} .ptlist{ padding:8px; background:#fff; margin-bottom:20px;} .ptlist_top{ width:100%;} .ptlist_bot{ width:100%; text-align:center; margin-top:10px; margin-bottom:10px;line-height:20px;height:40px;overflow:hidden} .ptlists{ margin-top:15px;} .prolist_le{ float:left; width:100%; background:#fff; height:567px;} .proli_lebr{ float:left; width:10px; background:#e7eef5; height:567px;} .proli_ul { float:left; width:212px; margin-top:20px;} .proli_ul ul { list-style:none; float:left; width:100%; padding:0px; margin:0px;} .proli_ul ul li{ float:left; width:100%;} .proli_ul ul li a{ float:left; padding-left:20px; padding-top:10px; padding-bottom:10px;} .proli_ul ul li a span{ float:left; font-size:1em; line-height:45px; padding-left:8px;} .proli_ul ul li a .icon-1{ float:left; background:url(../images/c1.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a:hover{ background:#05ebde; width:212px;} .proli_ul ul li a:hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px; width:45px; height:45px; } .proli_ul ul li a:hover span{ color:#fff;} .proli_ul ul li a.hover{ background:#05ebde; width:212px;} .proli_ul ul li a.hover .icon-1{ background:url(../images/hc1.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px; width:45px; height:45px; } .proli_ul ul li a.hover span{ color:#fff;} .proli_ul ul li a .icon-2{ float:left; width:45px;height:45px; background:url(../images/c2.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;} .proli_ul ul li a:hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a .icon-3{ float:left; background:url(../images/c3.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-4{ float:left; background:url(../images/c4.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-5{ float:left; width:45px;height:45px;background:url(../images/c5.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;} .proli_ul ul li a:hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0);background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-6{ float:left; background:url(../images/c6.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a .icon-7{ float:left; background:url(../images/c7.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a .icon-8{ float:left; background:url(../images/c8.png) no-repeat;-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a:hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a.hover .icon-2{ background:url(../images/hc2.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-3{ background:url(../images/hc3.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-4{ background:url(../images/hc4.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-5{ background:url(../images/hc5.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-6{ background:url(../images/hc6.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px; } .proli_ul ul li a.hover .icon-7{ background:url(../images/hc7.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} .proli_ul ul li a.hover .icon-8{ background:url(../images/hc8.png) no-repeat; transform:translate(-10px,0); -webkit-transform:translate(-10px,0); -moz-transform:translate(-10px,0); -o-transform:translate(-10px,0); -ms-transform:translate(-10px,0); background-position: 50% 50%; background-size: 45px 45px;width:45px;height:45px;} } @media (min-width: 992px) { .newstop{ margin-top:50px;} .new_list{ width:100%; margin-top:30px;} .news_imgs{ position:relative; z-index:1; float:left;} .news_imgs a img{} .news_imgs a span{ position:absolute; top:0; right:0px; background:#05ebde; width:53px; height:58px; color:#fff; font-size:1.2em; text-align:center; line-height:22px; padding-top:7px;} .news_content{ background:#f1f8ff; float:left; width:100%;} .news_content h2{ font-weight:normal; font-size:1.4em; text-align:left; float:left; padding-left:8px; padding-right:8px; height:30px; overflow:hidden; line-height:30px;} .news_content h2 a{ color:#3f3f3f; line-height:1.2;} .news_content p{ padding-left:10px; padding-right:10px; color:#5c5c5c; margin-top:10px; float:left;} .news_more{ float:left; margin-top:8px; width:100%;} .news_more a{ background:#05ebde; border-radius:5px; padding:8px; color:#fff; float:right;} } @media (min-width: 768px) and (max-width:991px ) { .newstop{ margin-top:30px;} .new_list{ width:100%; margin-top:30px;} .news_imgs{ position:relative; z-index:1; float:left; } .news_imgs a img{} .news_imgs a span{ position:absolute; top:0; right:0px; background:#05ebde; width:43px; height:58px; color:#fff; font-size:1.1em; text-align:center; line-height:22px; padding-top:7px;} .news_content{ background:#f1f8ff; float:left; width:100%;} .news_content h2{ font-weight:normal; font-size:1em; text-align:left; float:left; padding-left:8px; padding-right:8px; height:30px; overflow:hidden; line-height:30px;} .news_content h2 a{ color:#3f3f3f; line-height:1.2;} .news_content p{ padding-left:10px; padding-right:10px; color:#5c5c5c; margin-top:2px; float:left; font-size:12px;} .news_more{ float:left; margin-top:0px; width:100%;} .news_more a{ background:#05ebde; border-radius:5px; padding:8px; color:#fff; float:right;font-size:12px;} } @media (max-width: 767px) { .newstop{ margin-top:30px;} .new_list{ width:100%; margin-top:30px; float:left;} .news_imgs{ position:relative; z-index:1; float:left;width:100%;} .news_imgs a .img-responsive{ width:100%;} .news_imgs a span{ position:absolute; top:0; right:0px; background:#05ebde; width:43px; height:58px; color:#fff; font-size:1.1em; text-align:center; line-height:22px; padding-top:7px;} .news_content{ background:#f1f8ff; float:left; width:100%;} .news_content h2{ font-weight:normal; font-size:1.2em; text-align:left; float:left; padding-left:8px; padding-right:8px; height:30px; overflow:hidden; line-height:30px;} .news_content h2 a{ color:#3f3f3f; line-height:1.2;} .news_content p{ padding-left:10px; padding-right:10px; color:#5c5c5c; margin-top:2px; float:left; font-size:12px;} .news_more{ float:left; margin-top:0px; width:100%;} .news_more a{ background:#05ebde; border-radius:5px; padding:8px; color:#fff; float:right;font-size:12px;} } @media (min-width: 1200px) { .abotop{ margin-top:100px;} .fst { float:right; } .about_liefts{ border:3px solid #05ebde; border-radius:5px;} .abou_tops_left{ text-align:left; float:left; width:65px;} .abou_tops_left h2{ float:left; color:#474747; font-size:2.2em; line-height:25px;} .abou_tops_left p{ float:left; color:#ced5e8; font-size:1.4em; font-family:Arial, Helvetica, sans-serif; line-height:22px;} .abou_tops_right{ float:left;} .abou_tops_right h2{ font-size:3.4em; color:#474747; font-weight:bold; line-height:40px;} .about_midd_p{ margin-top:35px;} .about_midd_p p{ font-size:1em; color:#5d5d5d;} .about_midd_lis ul{ width:100%; float:left; list-style:none; margin:0px; padding:0px;margin-top:30px;} .about_midd_lis ul li{ float:left; width:33%; text-align:center;} .about_midd_lis ul li span{ color:#05ebde; font-size:1.4em; line-height:1.2; font-weight:bold; text-align:center;} .about_midd_lis ul li p{ font-size:1.4em; line-height:1.2; font-weight:bold; margin-top:5px; position:relative;text-align:center;} .about_midd_lis ul li p i { display:block; width:0; height:0; overflow:hidden; border-bottom: 2px #05ebde solid;width:40px; position:absolute; left:40%; bottom:-20px; } .about_mid_bot{ width:100%; margin-top:60px; float:left; text-align:center;} .about_mid_bot a{ background:#05ebde; border-radius:5px; color:#fff; padding:10px;} } @media (min-width: 992px) and (max-width:1199px ) { .abotop{ margin-top:70px;} .fst { float:right; } .about_liefts{ border:3px solid #05ebde; border-radius:5px;} .abou_tops_left{ text-align:left; float:left; width:65px;} .abou_tops_left h2{ float:left; color:#474747; font-size:2.2em; line-height:25px;} .abou_tops_left p{ float:left; color:#ced5e8; font-size:1.4em; font-family:Arial, Helvetica, sans-serif; line-height:22px;} .abou_tops_right{ float:left;} .abou_tops_right h2{ font-size:3.4em; color:#474747; font-weight:bold; line-height:40px;} .about_midd_p{ margin-top:15px;} .about_midd_p p{ font-size:1em; color:#5d5d5d;} .about_midd_lis ul{ width:100%; float:left; list-style:none; margin:0px; padding:0px;margin-top:15px;} .about_midd_lis ul li{ float:left; width:33%; text-align:center;} .about_midd_lis ul li span{ color:#05ebde; font-size:1.4em; line-height:1.2; font-weight:bold; text-align:center;} .about_midd_lis ul li p{ font-size:1.4em; line-height:1.2; font-weight:bold; margin-top:5px; position:relative;text-align:center;} .about_midd_lis ul li p i { display:block; width:0; height:0; overflow:hidden; border-bottom: 2px #05ebde solid;width:40px; position:absolute; left:40%; bottom:-20px; } .about_mid_bot{ width:100%; margin-top:40px; float:left; text-align:center;} .about_mid_bot a{ background:#05ebde; border-radius:5px; color:#fff; padding:10px;} } @media (min-width: 768px) and (max-width:991px ) { .abotop{ margin-top:40px;} .fst { float:right; } .frst { float:left; } .about_liefts{ border:3px solid #05ebde; border-radius:5px;} .abou_tops_left{ text-align:left; float:left; width:65px;} .abou_tops_left h2{ float:left; color:#474747; font-size:2em; line-height:25px; padding:0px; margin:0px; margin-top:20px; margin-bottom:5px;} .abou_tops_left p{ float:left; color:#ced5e8; font-size:1.2em; font-family:Arial, Helvetica, sans-serif; line-height:22px;} .abou_tops_right{ float:left;} .abou_tops_right h2{ font-size:3em; color:#474747; font-weight:bold; line-height:40px;} .about_midd_p{ margin-top:10px;} .about_midd_p p{ font-size:1em; color:#5d5d5d;} .about_midd_lis ul{ width:100%; float:left; list-style:none; margin:0px; padding:0px;margin-top:15px;} .about_midd_lis ul li{ float:left; width:33%; text-align:left;} .about_midd_lis ul li span{ color:#05ebde; font-size:1.4em; line-height:1.2; font-weight:bold; text-align:left;} .about_midd_lis ul li p{ font-size:1.4em; line-height:1.2; font-weight:bold; margin-top:5px; position:relative;text-align:left;} .about_midd_lis ul li p i { display:block; width:0; height:0; overflow:hidden; border-bottom: 2px #05ebde solid;width:40px; position:absolute; left:8%; bottom:-20px; } .about_mid_bot{ width:100%; margin-top:50px; float:left; text-align:left; margin-bottom:40px;} .about_mid_bot a{ background:#05ebde; border-radius:5px; color:#fff; padding:10px;} } .frendsbg .row { margin-left:0px; margin-right:0px; } .frendsbg{ background:#05ebde; padding-top:30px; margin-top:50px; width:100%; padding-bottom:50px;} .frendsbg h2{ color:#fff; font-size:1.4em; float:left;} .frendsbg ul{ list-style:none; width:100%; float:left; margin:0px; padding:0px; margin-top:15px;} .frendsbg ul li{ float:left; margin-right:20px;} .frendsbg ul li a{ float:left; color:#333;} @media (max-width:767px ) { .abotop{ margin-top:40px;} .fst { float:right; } .frst { float:left; } .about_liefts{ border:3px solid #05ebde; border-radius:5px;} .abou_tops_left{ text-align:left; float:left; width:65px;} .abou_tops_left h2{ float:left; color:#474747; font-size:2em; line-height:25px; padding:0px; margin:0px; margin-top:20px; margin-bottom:5px;} .abou_tops_left p{ float:left; color:#ced5e8; font-size:1.2em; font-family:Arial, Helvetica, sans-serif; line-height:22px;} .abou_tops_right{ float:left;} .abou_tops_right h2{ font-size:3em; color:#474747; font-weight:bold; line-height:40px;} .about_midd_p{ margin-top:10px;} .about_midd_p p{ font-size:1em; color:#5d5d5d;} .about_midd_lis ul{ width:100%; float:left; list-style:none; margin:0px; padding:0px;margin-top:15px;} .about_midd_lis ul li{ float:left; width:33%; text-align:left;} .about_midd_lis ul li span{ color:#05ebde; font-size:1.4em; line-height:1.2; font-weight:bold; text-align:left;} .about_midd_lis ul li p{ font-size:1.4em; line-height:1.2; font-weight:bold; margin-top:5px; position:relative;text-align:left;} .about_midd_lis ul li p i { display:block; width:0; height:0; overflow:hidden; border-bottom: 2px #05ebde solid;width:40px; position:absolute; left:8%; bottom:-20px; } .about_mid_bot{ width:100%; margin-top:50px; float:left; text-align:left; margin-bottom:40px;} .about_mid_bot a{ background:#05ebde; border-radius:5px; color:#fff; padding:10px;} .frendsbg .row { margin-left:0px; margin-right:0px; } .frendsbg{ background:#05ebde; padding-top:20px; margin-top:30px; width:100%; padding-bottom:30px;} .frendsbg h2{ color:#fff; font-size:1.2em; float:left;} .frendsbg ul{ list-style:none; width:100%; float:left; margin:0px; padding:0px; margin-top:15px;} .frendsbg ul li{ float:left; margin-right:20px; margin-bottom:6px;} .frendsbg ul li a{ float:left; color:#fff;} } @media (min-width: 1200px) { #foot{ background:#3b3b3c; padding-top:50px; width:100%;} .fnt1{ float:left; width:100%;} .fnt1_top{ float:left; width:100%; margin-bottom:15px;} .fnt1_top img{ float:left;} .fnt1_top h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; margin-left:12px;} .fnt1_li{ color:#8a8a8a; float:left; width:100%; } .fnt1_li strong{ float:left;text-indent:62px;} .fnt1_li p{ float:left;} .fnt2{ float:left; width:100%; margin-left:40px;} .fnt2 h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt2 ul{ float:left; width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt2 ul li{ float:left;padding-top:5px; width:100%;} .fnt2 ul li a{ color:#8a8a8a; } .fnt4{ float:left; margin-left:80px;} .fnt4 h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt4 ul{ float:left; width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt4 ul li{ float:left;padding-top:5px; width:100%;} .fnt4 ul li a{ color:#8a8a8a; } .fnt3{ float:left; width:100%; text-align:center; } .fnt3 img{ margin-top:70px;} .fnt3 p{ color:#afafaf; width:100%; margin-top:8px;} } @media (min-width: 992px) and (max-width: 1199px) { #foot{ background:#3b3b3c; padding-top:40px; width:100%;} .fnt1{ float:left; width:100%;} .fnt1_top{ float:left; width:100%; margin-bottom:15px;} .fnt1_top img{ float:left;} .fnt1_top h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; margin-left:12px;} .fnt1_li{ color:#8a8a8a; float:left; width:100%; } .fnt1_li strong{ float:left;text-indent:62px;} .fnt1_li p{ float:left;} .fnt2{ float:left; width:100%; margin-left:0px;} .fnt2 h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt2 ul{ float:left; width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt2 ul li{ float:left;padding-top:5px; width:100%;} .fnt2 ul li a{ color:#8a8a8a; } .fnt4{ float:left; margin-left:10px;} .fnt4 h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt4 ul{ float:left; width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt4 ul li{ float:left;padding-top:5px; width:100%;} .fnt4 ul li a{ color:#8a8a8a; } .fnt3{ float:left; width:100%; text-align:center; } .fnt3 img{ margin-top:70px; width:120px;} .fnt3 p{ color:#afafaf; width:100%; margin-top:8px;} } @media (min-width: 768px) and (max-width: 991px) { #foot{ background:#3b3b3c; padding-top:40px; width:100%;} .fnt1{ float:left; width:100%;} .fnt1_top{ float:left; width:100%; margin-bottom:15px;} .fnt1_top img{ float:left;} .fnt1_top h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; margin-left:12px;} .fnt1_li{ color:#8a8a8a; float:left; width:100%; } .fnt1_li strong{ float:left;text-indent:62px;} .fnt1_li p{ float:left;} .fnt2{ float:left; width:100%; margin-left:0px; text-align:center;} .fnt2 h3{ color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt2 ul{ width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt2 ul li{ padding-top:5px; width:100%;} .fnt2 ul li a{ color:#8a8a8a; } .fnt4{ float:left; margin-left:60px; margin-top:20px;} .fnt4 h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt4 ul{ float:left; width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt4 ul li{ float:left;padding-top:5px; width:100%;} .fnt4 ul li a{ color:#8a8a8a; } .fnt3{ float:left; width:100%; text-align:center; margin-top:20px;} .fnt3 img{ margin-top:70px; width:120px;} .fnt3 p{ color:#afafaf; width:100%; margin-top:8px;} .smclear { clear:both; } } .copys { border-top:1px solid #707070; margin-top:35px; padding:15px; } .copys p { float:left; color:#8a8a8a; } .copys a { float:right; color:#8a8a8a; } .addpl { width:200px; } @media (max-width: 767px) { #foot{ background:#3b3b3c; padding-top:40px; width:100%;} .fnt1{ float:left; width:100%;} .fnt1_top{ float:left; width:100%; margin-bottom:15px;} .fnt1_top img{ float:left; display:none;} .fnt1_top h3{ float:left; color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; margin-left:12px;} .fnt1_li{ color:#8a8a8a; float:left; width:100%; } .fnt1_li strong{ float:left;text-indent:12px;} .fnt1_li p{ float:left;} .fnt2{ float:left; width:100%; margin-left:12px;margin-top:20px;} .fnt2 h3{ color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt2 ul{ width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt2 ul li{ padding-top:5px; width:100%;} .fnt2 ul li a{ color:#8a8a8a; } .fnt4{ float:left; margin-top:20px; } .fnt4 h3{ color:#fff;font-size:1.4em; line-height:52px; padding:0px; margin:0px; } .fnt4 ul{ width:100%; list-style:none; margin:0px; padding:0px; margin-top:10px;} .fnt4 ul li{ padding-top:5px; width:100%;} .fnt4 ul li a{ color:#8a8a8a; } .fnt3{ float:left; width:100%; text-align:center; margin-top:20px;} .fnt3 img{ margin-top:70px; width:120px;} .fnt3 p{ color:#afafaf; width:100%; margin-top:8px;} .copys { border-top:1px solid #707070; margin-top:35px; padding:15px; } .copys p { color:#8a8a8a; width:100%; text-align:center; } .copys a { color:#8a8a8a; width:100%; text-align:center;margin-bottom:10px; } .addpl { width:auto; } } .casebg{ background:#f6f6f6; padding-top:50px; padding-bottom:50px; margin-top:50px;} .caselis{ margin-top:30px;} @media (min-width: 768px) and (max-width:991px ) { .casebg{ background:#f6f6f6; padding-top:30px; padding-bottom:30px; margin-top:30px;} .caselis{ margin-top:30px;} } @media (max-width:768px ) { .casebg{ background:#f6f6f6; padding-top:50px; padding-bottom:30px; margin-top:20px;} .caselis{ margin-top:30px;} } .recent-work-wrap2 { position: relative; } .recent-work-wrap2 img{ width: 100%; } .recent-work-wrap2 .recent-work-inner{ top: 0; background: transparent; opacity:1; width: 100%; border-radius: 0; margin-bottom: 0; border:1px solid #fff; height:100%; } .recent-work-wrap2 .recent-work-inner h3{ margin-top: 70px; margin-bottom:15px; } @media (min-width: 992px) and (max-width:1199px ) { .recent-work-wrap2 .recent-work-inner h3{ margin-top: 30px; margin-bottom:15px; } } .recent-work-wrap2 .recent-work-inner h3 a{ font-size: 16px; color: #fff; } .recent-work-wrap2 .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 0; background:url(../images/cabg.png); color: #fff; vertical-align: middle; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; padding: 15px; } .recent-work-wrap2 .overlay .preview { bottom: 0; display: inline-block; height: 35px; line-height: 35px; border-radius: 0; background: transparent; text-align: center; color: #fff; } .recent-work-wrap2:hover .overlay { opacity: 1; } .nBar {width:100%; background:#eaeaea; padding:22px 0px} .nBar strong{font-size:16px; color:#000; font-weight:normal;} .nBar .Location {float:right; font-size:14px;color:#a3a3a3} .nBar .Location a{color:#a3a3a3} .md_desc {padding-bottom:40px; border-bottom:1px solid #dadada; font-size:14px; line-height:30px;} .md_Location {padding-bottom:10px; border-bottom:1px solid #dadada; font-size:14px; line-height:30px;} .mk-page {font-size:14px; padding:20px 0px; line-height:30px;} .mtCon { padding-top:40px; } .mtCon h2 { font-size:28px; margin-bottom:25px; } .msCon {color:#adadad; padding:0px 100px;} @media (max-width:767px ) { .msCon {color:#adadad; padding:0px 15px;} .mtCon h2 { font-size:20px; margin-bottom:25px; } } .mk-flipbox-flipper img { display: block; max-width: 100%; height: auto; } .about_title { margin-top:30px; text-align:center; } .about_title h2 { text-transform:uppercase; color:#bbbbbb; position:relative; } .about_title h2 i { display:block; width:0; height:0; overflow:hidden; border-bottom:#e70012 transparent transparent; border-style:solid solid solid; border-width:2px;width:60px; position:absolute; left:50%; bottom:-20px; margin-left:-25px; } /*新闻列表*/ .fh5co-section-gray {background: rgba(0, 0, 0, 0.04); border-top:1px solid #ddd; padding-bottom:40px; } .fh5co-blog { margin-bottom: 60px; } .fh5co-blog a img { width: 100%; } @media screen and (max-width: 768px) { .fh5co-blog { width: 100%; } } .fh5co-blog .blog-text { margin-bottom: 30px; position: relative; background: #fff; width: 90%; padding: 30px; float: right; margin-top: -5em; -webkit-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); } .fh5co-blog .blog-text span { display: inline-block; margin-bottom: 20px; } .fh5co-blog .blog-text span.posted_by { font-style: italic; color: rgba(0, 0, 0, 0.3); font-size: 18px; } .fh5co-blog .blog-text span.comment { float: right; } .fh5co-blog .blog-text span.comment a { color: rgba(0, 0, 0, 0.3); } .fh5co-blog .blog-text span.comment a i { color: #e82700; padding-left: 7px; } .fh5co-blog .blog-text h3 { font-size: 20px; margin-bottom: 20px; font-weight: 300; line-height: 1.5; height:3em; overflow:hidden; } .fh5co-blog .blog-text h3 a { color: rgba(0, 0, 0, 0.6); } #fh5co-start-project-section { padding: 7em 0; background: #F64E8B; } #fh5co-start-project-section h2 { color: white; font-size: 60px; text-transform: uppercase; font-weight: 300; } @media screen and (max-width: 768px) { #fh5co-start-project-section h2 { font-size: 30px; } } #fh5co-start-project-section a:hover, #fh5co-start-project-section a:focus, #fh5co-start-project-section a:active { color: white !important; } .btn { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn { text-transform: uppercase; letter-spacing: 2px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn.btn-primary { background: #1068cb; color: #fff; border: none !important; border: 2px solid transparent !important; } .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus { box-shadow: none; background: #66D37E; color: #fff !important; } .btn:hover, .btn:active, .btn:focus { background: #393e46 !important; color: #fff; outline: none !important; } .btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active { border-color: transparent; } .heading-section { margin-top:1em; padding-bottom: 1em; margin-bottom: 2.2em; } .heading-section:after { position: absolute; content: ''; bottom: 0; left: 50%; width: 100px; margin-left: -50px; height: 2px; background: #05ebde; } .heading-section h3 { font-size: 30px; font-weight: 300; position: relative; } .heading-section p { font-size: 20px; } .newsa .where{ border-bottom:1px solid #ddd; height:60px; line-height:60px; width:100%; padding-top:10px; display:block;} .newsa .where h2{ display:block; border-bottom:2px solid #05ebde; font-size:1.5em; color:#000; float:left; line-height:50px; font-weight:bold; margin:0px; padding:0px;} .newsa .where p { float:right; } @media (min-width: 992px) { .news_c_right{ margin-top:50px; border:1px solid #ddd;} .coright { float:right; } } @media (min-width: 768px) and (max-width: 991px) { .news_c_right{ margin-top:50px; border:1px solid #ddd;} } @media (max-width: 767px) { .news_c_right{ margin-top:0px; border:1px solid #ddd; margin-bottom:30px;} } @media (max-width: 480px) { .news_c_right{ margin-top:0px; border:1px solid #ddd; margin-bottom:30px;} } .news_bar { padding-top:6em;padding-bottom:3em; } .news_bar h1 { text-align:center; color:#646464; font-size:56px; line-height:70px; } .news_bar p { text-align:center; font-size:16px; color:#7c7c7c; line-height:25px; padding-top:12px; } .news_c_left{ padding-bottom:30px; margin-top:20px;} .news_c_left h2 { font-weight: normal; line-height: 35px; margin-top: 15px; font-size: 1.8em; } .news_c_left h3{ font-size:14px; color:#666; font-weight:normal; margin:15px 0;} .news_c_left .news_c_content{ line-height:30px; font-size:14px; margin-top:40px; color:#666;} .news_c_right h4{ background:#05ebde; color:#fff; height:44px; font-weight:normal; text-indent:20px; line-height:44px;width:100%; padding:0; margin:0;} .news_c_right ul{ list-style:none; border-top:0px; margin:0; display:block; padding:0px;} .news_c_right ul li{ padding:10px 10px;} .news_c_right ul li a{ font-size:14px;} .news_c_right ul li a:hover{ text-decoration:underline;} .share .si { display:inline-block; width:23px; height:23px; overflow:hidden; font:0/0 a; letter-spacing:-9px; background:url(../images/share.png) no-repeat; filter:alpha(opacity=40); opacity:0.4; vertical-align:middle; margin-right:5px;} .share a:hover .si { filter:alpha(opacity=100); opacity:1;} .share .si01 { background-position:0 0;} .share .si02 { background-position:-23px 0;} .share .si03 { background-position:-46px 0;} .share .si04 {background-position:-69px 0;} .share .si05 {background-position:-92px 0;} /*end新闻列表*/ @media (min-width:768px) and (max-width:1920px ) { .caseli2{ list-style:none; text-align:center; margin:40px; margin-top:0px; margin-bottom:30px;} .caseli2 li{ display:inline; margin-right:8px; margin-bottom:6px;} .caseli2 li a{line-height:30px; background:#fff; color:#666666;padding:10px;} .caseli2 li a:hover{ background:#05ebde;color:#fff; text-decoration:none} .caseli2 li a.hover{ background:#05ebde;color:#fff} } @media (max-width:767px){ .caseli2{ list-style:none; text-align:center; margin:40px; margin-top:0px; margin-bottom:15px; } .caseli2 li{ display:inline-block; margin-right:8px; margin-bottom:16px;} .caseli2 li a{line-height:30px; background:#fff; color:#666666;padding:10px;} .caseli2 li a:hover{ background:#05ebde;color:#fff; text-decoration:none} .caseli2 li a.hover{ background:#05ebde;color:#fff} } .home_news { width: 100%; margin-top:10px; } .home_news .news_con { max-width: 1240px; width: 100%; margin: auto; overflow: hidden; } .home_news .news_con ul { width: 100%; list-style:none; padding:0; margin:0 } .home_news .news_con ul li { background: #fff; padding: 20px 20px; cursor: pointer; margin-bottom: 30px; } .home_news .news_con ul li .news_left { width: 77%; float: left; } .home_news .news_con ul li .news_left a { color: #4c4c4c; font-size: 16px; font-weight: bold; overflow: hidden; width: 95%; display: block; margin-bottom: 15px; height: 25px; line-height: 25px; } .home_news .news_con ul li .news_left p { font-size: 14px; color: #666666; line-height: 24px; width: 95%; max-height: 72px; overflow: hidden; } .home_news .news_con ul li .news_right { width: 23%; float: right; border-left: 1px solid #cccccc; min-height: 50px; color: #e0e0e0; font-family: arial; text-align: left; padding-left: 8%; background: url(../images/li_1.png) no-repeat right; min-height: 95px; } .home_news .news_con ul li .news_right span { font-size: 42px; display: block; line-height: 45px; } .home_news .news_con ul li .news_right time { font-size: 18px; } .home_news .news_con ul li:hover { background: #b8b5b5; } .home_news .news_con ul li:hover .news_left a { color: #fff; } .home_news .news_con ul li:hover .news_left p { color: #fff; } .home_news .news_con ul li:hover .news_right { border-left: 1px solid #fff; background: url(../images/li_1_h.png) no-repeat right; color: #fff; } .home_news .news_con ul li:hover .news_right span { color: #fff; } @media (max-width: 768px) { .home_news .news_con ul li .news_right { padding-left: 10px; padding-top: 15px; } } @media (max-width: 680px) { .home_news .news_con ul li .news_right span { font-size: 24px; } .home_news .news_con ul li .news_right time { font-size: 16px; } } @media (max-width: 480px) { .home_news .news_con ul li .news_left { width: 68%; } .home_news .news_con ul li .news_right { width: 32%; } } @media (max-width: 480px) { .home_news .news_con ul li { padding: 20px 10px; } } #fh5co-contact {margin-top:50px;} #fh5co-contact p{ font-size:16px; line-height:30px;} #fh5co-contact .contact-info { margin: 0; padding: 0; margin-top:20px; float:left; } #fh5co-contact .contact-info li { list-style: none; margin: 0 0 15px 0; position: relative; padding-left: 40px; } #fh5co-contact .contact-info li i { position: absolute; top: 0em; left: 0; font-size: 22px; color: rgba(0, 0, 0, 0.3); } #fh5co-contact .contact-info li a { font-weight: 400 !important; color:#000; } #fh5co-contact .form-control { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border: none; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 14px; font-weight: 400; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; } #fh5co-contact .form-control:focus, #fh5co-contact .form-control:active { border-bottom: 1px solid rgba(0, 0, 0, 0.5); } #fh5co-contact input[type="text"] { height: 50px; } #fh5co-contact .form-group { margin-bottom: 30px; } /*下载*/ .newslist dl{ margin-bottom:50px; border:1px solid #ddd; min-height:161px; display:block; background:#fff;} .newslist dl:hover{ background:#f9f9f9;} .newslist dl dt{ float:left; width:20%;} .newslist dl dt img{ width:100%;height:159px;} .newslist dl .dd1{ float:left; width:48%; margin-left:5%; padding:10px 0;} .newslist dl .dd1 h2{ font-size:1.2em; font-weight:normal;} .newslist dl .dd1 h2 a{ color:#111; font-weight:bold;} .newslist dl .dd1 span{ display:block; margin:5px 0; font-size:14px;} .newslist dl .dd1 p{ font-size:14px; line-height:22px; color:#666; height:44px; overflow:hidden;} .newslist dl .dd2{ border-radius:8px; float:right; background:#EFEFEF; color:#333; margin:25px 20px 0 0; width:20%;} .newslist dl .dd2 b{ font-size:47px; text-align:center; display:block; border-bottom:1px solid #ddd; padding:25px 0; font-weight:normal; color:#666;} .newslist dl .dd2 span{ color:#666; display:block; text-align:center; height:30px; line-height:30px;} .newslist dl .dd3{float:right; width:20%; margin:25px 20px 0 0;} .newslist dl .dd3 b{ font-size:47px; text-align:center; display:block; font-weight:normal; color:#666;} .newslist dl .dd3 span{ color:#666; display:block; text-align:right; height:30px; line-height:30px;} /******************/ .dh{-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .dh:hover{-webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1);} @media (min-width: 1200px) { .cat-nav-box { float:left; width:1140px; margin-top:35px; } #top-cat-nav { float:left; width:1140px; list-style:none; box-shadow:2px 2px 10px #ccc;border-radius:.2em; margin:0px; padding:0px; } #top-cat-nav .cat-item { border-left:1px solid #3e82b0; } #top-cat-nav li a { background-color:#fff;border-right:1px solid #3e82b0;border-top:1px solid #3e82b0;border-bottom:1px solid #3e82b0;display:block;text-align:center;padding-left:16px; padding-right:16px;text-decoration:none;color:#222; height:45px; line-height:45px; } #top-cat-nav li { float:left; position:relative; } #top-cat-nav li a:hover { background:#3e82b0; color:#fff; } #top-cat-nav li a.hover { background:#3e82b0; color:#fff; } #top-cat-nav .cat-item:first-child a { border-radius:.2rem 0 0 .2rem; } #top-cat-nav .cat-item:last-child a { border-radius:0 .2rem .2rem 0; border-right:thin solid #3e82b0; } #top-cat-nav .cat-item>a i { margin-left:.5rem } #top-cat-nav .cat-item .sub-cats { padding:0px; margin:0px; z-index: 99; position: absolute; top: 3.2em; width: 100%; box-shadow: 2px 2px 10px #777; border-radius:.3rem; overflow: hidden; list-style:none; display:none; } #top-cat-nav li .sub-cats>li { background: #498fbf; text-align: left; width: 100% } #top-cat-nav li .sub-cats>li>a { color: #fff; background: #498fbf; padding:.8rem .6rem; display: inline-block; width: 100%; border-top: thin solid #6ea6cc; transition: all .2s; } #top-cat-nav li .sub-cats>li>a:hover { text-decoration: none; background-color: #6ea6cc } #top-cat-nav li .sub-cats>li:first-child>a { border-top: none } .prod_title h2 { font-size:1.2em; margin-left:15px; position:relative; margin-top:28px; } .prod_title h2 i { display:block; height:0; overflow:hidden; border:#05ebde solid 2px;width:40px; position:absolute; left:0; bottom:-15px; } .prlist_pd { border:1px solid #ccc; margin-top:25px; float:left; padding:25px; } .wrap { float: left; width:25%; padding: 1em; opacity: 1; transition: all 1s } .wrap .item-box .img { float: left; width: 100% } .wrap .item-box .img img { max-width: 100% } .wrap .item-box { display: block; overflow: hidden; border-radius:.3em; border: thin solid #ccc } .wrap .item-box .text { color: #aaa; padding:.5em; float: left; text-align: center; width: 100%; } .wrap .item-box .text>p:first-child { color: #000 } .wrap .item-box:hover { border: thin solid #3e82b0 } .wrap.hide-wrap { padding: 0; overflow: hidden; height: 0 } .more-btn-wrap { float: left; text-align: center; width: 100%; margin-top:15px; } .more-btn-wrap a { border-radius:.3em; display: block; padding:.8em 0; margin: auto; width: 50%; color: #fff; text-decoration: none; font-size:.75em; background-color: #ff3636; transition: all .2s; } .more-btn-wrap a i { margin-left:.5em } .more-btn-wrap:hover a { background-color: #ff5151; text-decoration: none; color: #fff } } @media (min-width: 992px) and (max-width: 1199px) { .cat-nav-box { float:left; width:940px; margin-top:35px; } #top-cat-nav { float:left; width:940px; list-style:none; box-shadow:2px 2px 10px #ccc;border-radius:.2em; margin:0px; padding:0px; } #top-cat-nav .cat-item { border-left:1px solid #3e82b0; } #top-cat-nav li a { background-color:#fff;border-right:1px solid #3e82b0;border-top:1px solid #3e82b0;border-bottom:1px solid #3e82b0;display:block;text-align:center;padding-left:16px; padding-right:16px;text-decoration:none;color:#222; height:45px; line-height:45px; } #top-cat-nav li { float:left; position:relative; } #top-cat-nav .cat-item:first-child a { border-radius:.2rem 0 0 .2rem; } #top-cat-nav .cat-item:last-child a { border-radius:0 .2rem .2rem 0; border-right:thin solid #3e82b0; } #top-cat-nav .cat-item>a i { margin-left:.5rem } #top-cat-nav .cat-item .sub-cats { padding:0px; margin:0px; z-index: 99; position: absolute; top: 3.2em; width: 100%; box-shadow: 2px 2px 10px #777; border-radius:.3rem; overflow: hidden; list-style:none; display:none; } #top-cat-nav li .sub-cats>li { background: #498fbf; text-align: left; width: 100% } #top-cat-nav li .sub-cats>li>a { color: #fff; background: #498fbf; padding:.8rem .6rem; display: inline-block; width: 100%; border-top: thin solid #6ea6cc; transition: all .2s; } #top-cat-nav li .sub-cats>li>a:hover { text-decoration: none; background-color: #6ea6cc } #top-cat-nav li .sub-cats>li:first-child>a { border-top: none } .prod_title h2 { font-size:1.2em; margin-left:15px; position:relative; margin-top:28px; } .prod_title h2 i { display:block; height:0; overflow:hidden; border:#05ebde solid 2px;width:40px; position:absolute; left:0; bottom:-15px; } .prlist_pd { border:1px solid #ccc; margin-top:25px; float:left; padding:25px; } .wrap { float: left; width:25%; padding: 1em; opacity: 1; transition: all 1s } .wrap .item-box .img { float: left; width: 100% } .wrap .item-box .img img { max-width: 100% } .wrap .item-box { display: block; overflow: hidden; border-radius:.3em; border: thin solid #ccc } .wrap .item-box .text { color: #aaa; padding:.5em; float: left; text-align: center; width: 100%; } .wrap .item-box .text>p:first-child { color: #000 } .wrap .item-box:hover { border: thin solid #3e82b0 } .wrap.hide-wrap { padding: 0; overflow: hidden; height: 0 } .more-btn-wrap { float: left; text-align: center; width: 100%; margin-top:15px; } .more-btn-wrap a { border-radius:.3em; display: block; padding:.8em 0; margin: auto; width: 50%; color: #fff; text-decoration: none; font-size:.75em; background-color: #ff3636; transition: all .2s; } .more-btn-wrap a i { margin-left:.5em } .more-btn-wrap:hover a { background-color: #ff5151; text-decoration: none; color: #fff } } .filter-select{ display:none; position: relative; margin-top: 25px; } @media (min-width: 768px) and (max-width: 991px) { .cat-nav-box { float:left; width:720px; margin-top:35px; display:none; } #top-cat-nav { float:left; width:720px; list-style:none; box-shadow:2px 2px 10px #ccc;border-radius:.2em; margin:0px; padding:0px; } #top-cat-nav li a { background-color:#fff;border:thin solid #3e82b0;border-right:none;display:block;text-align:center;padding:.8em 0;text-decoration:none;color:#222;font-size:12px; } #top-cat-nav li { float:left; position:relative; width:12%; } #top-cat-nav li:first-child { width:16%; } #top-cat-nav .cat-item:first-child a { border-radius:.2rem 0 0 .2rem; } #top-cat-nav .cat-item:last-child a { border-radius:0 .2rem .2rem 0; border-right:thin solid #3e82b0; } #top-cat-nav .cat-item>a i { margin-left:.5rem } #top-cat-nav .cat-item .sub-cats { padding:0px; margin:0px; z-index: 99; position: absolute; top: 3.2em; width: 100%; box-shadow: 2px 2px 10px #777; border-radius:.3rem; overflow: hidden; list-style:none; display:none; } #top-cat-nav li .sub-cats>li { background: #498fbf; text-align: left; width: 100% } #top-cat-nav li .sub-cats>li>a { color: #fff; background: #498fbf; padding:.8rem .6rem; display: inline-block; width: 100%; border-top: thin solid #6ea6cc; transition: all .2s; } #top-cat-nav li .sub-cats>li>a:hover { text-decoration: none; background-color: #6ea6cc } #top-cat-nav li .sub-cats>li:first-child>a { border-top: none } .prod_title h2 { font-size:1.2em; margin-left:15px; position:relative; margin-top:28px; } .prod_title h2 i { display:block; height:0; overflow:hidden; border:#05ebde solid 2px;width:40px; position:absolute; left:0; bottom:-15px; } .filter-select { display:block; } .filter-select ul { display: none; position: absolute; left: 0; right: 0; z-index: 10; margin: 0; padding:0; background: #fff; border: 1px solid #d9d9d9; border-top: none; list-style: none; } .filter-select .filter-current { background: #fafafa; border: 1px solid #e2e2e2; border-bottom: 1px solid #dfdfdf; } .filter-select .filter-current:hover { background: #fafafa url(../images/light-btn.jpg) repeat-x top; box-shadow: 0 2px 2px rgba(0,0,0,0.04); border-color: #d9d9d9; border-bottom: 1px solid #cecece; } .filter-select .filter-current:active { background: #f5f5f5; box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); border-color: #d9d9d9; } .filter-select .filter-current i { float: right; margin-top: 5px; font: 12px 'FontAwesome'; } .filter-select li, .filter-select .filter-current { padding: 10px 15px 10px; position:relative; line-height: 22px; cursor: pointer; } .filter-select li:hover { margin: 0 -1px; background: #05ebde; color: #fff; } .filter-select li:hover a { background: #05ebde; color: #fff; } .filter-select li a { display:block; } .filter-select li a:hover { color:#fff; } .filter-select li ul{ display: none; position:initial; margin: 0; padding:0; background:none; border: none; margin-top:5px; list-style: none; } .filter-select li ul li a { font-size:13px; } .poasss { position:absolute; right:0px;top:5px; width:40px; height:30px; text-align:center; line-height:30px; } .prlist_pd { border:1px solid #ccc; margin-top:25px; float:left; padding:25px; } .wrap { float: left; width:50%; padding: 1em; opacity: 1; transition: all 1s } .wrap .item-box .img { float: left; text-align:center; width: 100% } .wrap .item-box .img img { max-width: 100% } .wrap .item-box { display: block; overflow: hidden; border-radius:.3em; border: thin solid #ccc } .wrap .item-box .text { color: #aaa; padding:.5em; float: left; text-align: center; width: 100%; } .wrap .item-box .text>p:first-child { color: #000 } .wrap .item-box:hover { border: thin solid #3e82b0 } .wrap.hide-wrap { padding: 0; overflow: hidden; height: 0 } .more-btn-wrap { float: left; text-align: center; width: 100%; margin-top:15px; } .more-btn-wrap a { border-radius:.3em; display: block; padding:.8em 0; margin: auto; width: 50%; color: #fff; text-decoration: none; font-size:.75em; background-color: #ff3636; transition: all .2s; } .more-btn-wrap a i { margin-left:.5em } .more-btn-wrap:hover a { background-color: #ff5151; text-decoration: none; color: #fff } } @media (max-width: 767px) { .filter-select { display:block; } .filter-select ul { display: none; position: absolute; left: 0; right: 0; z-index: 10; margin: 0; padding:0; background: #fff; border: 1px solid #d9d9d9; border-top: none; list-style: none; } .filter-select .filter-current { background: #fafafa; border: 1px solid #e2e2e2; border-bottom: 1px solid #dfdfdf; } .filter-select .filter-current:hover { background: #fafafa url(../images/light-btn.jpg) repeat-x top; box-shadow: 0 2px 2px rgba(0,0,0,0.04); border-color: #d9d9d9; border-bottom: 1px solid #cecece; } .filter-select .filter-current:active { background: #f5f5f5; box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); border-color: #d9d9d9; } .filter-select .filter-current i { float: right; margin-top: 5px; font: 12px 'FontAwesome'; } .filter-select li, .filter-select .filter-current { padding: 10px 15px 10px; position:relative; line-height: 22px; cursor: pointer; } .filter-select li:hover { margin: 0 -1px; background: #05ebde; color: #fff; } .filter-select li:hover a { background: #05ebde; color: #fff; } .filter-select li a { display:block; } .filter-select li a:hover { color:#fff; } .filter-select li ul{ display: none; position:initial; margin: 0; padding:0; background:none; border: none; margin-top:5px; list-style: none; } .filter-select li ul li a { font-size:13px; } .poasss { position:absolute; right:0px;top:5px; width:40px; height:30px; text-align:center; line-height:30px; } .cat-nav-box { float:left; width:720px; margin-top:35px; display:none; } #top-cat-nav { float:left; width:720px; list-style:none; box-shadow:2px 2px 10px #ccc;border-radius:.2em; margin:0px; padding:0px; } #top-cat-nav li a { background-color:#fff;border:thin solid #3e82b0;border-right:none;display:block;text-align:center;padding:.8em 0;text-decoration:none;color:#222 } #top-cat-nav li { float:left; position:relative; width:17%; } #top-cat-nav li:first-child { width:15%; } #top-cat-nav .cat-item:first-child a { border-radius:.2rem 0 0 .2rem; } #top-cat-nav .cat-item:last-child a { border-radius:0 .2rem .2rem 0; border-right:thin solid #3e82b0; } #top-cat-nav .cat-item>a i { margin-left:.5rem } #top-cat-nav .cat-item .sub-cats { padding:0px; margin:0px; z-index: 99; position: absolute; top: 3.2em; width: 100%; box-shadow: 2px 2px 10px #777; border-radius:.3rem; overflow: hidden; list-style:none; display:none; } #top-cat-nav li .sub-cats>li { background: #498fbf; text-align: left; width: 100% } #top-cat-nav li .sub-cats>li>a { color: #fff; background: #498fbf; padding:.8rem .6rem; display: inline-block; width: 100%; border-top: thin solid #6ea6cc; transition: all .2s; } #top-cat-nav li .sub-cats>li>a:hover { text-decoration: none; background-color: #6ea6cc } #top-cat-nav li .sub-cats>li:first-child>a { border-top: none } .prod_title h2 { font-size:1.2em; margin-left:15px; position:relative; margin-top:28px; } .prod_title h2 i { display:block; height:0; overflow:hidden; border:#05ebde solid 2px;width:40px; position:absolute; left:0; bottom:-15px; } .prlist_pd { border:1px solid #ccc; margin-top:25px; float:left; padding:20px; } .wrap { float: left; width:50%; padding: 1em; opacity: 1; transition: all 1s } .wrap .item-box .img { float: left; text-align:center; width: 100% } .wrap .item-box .img img { max-width: 100% } .wrap .item-box { display: block; overflow: hidden; border-radius:.3em; border: thin solid #ccc } .wrap .item-box .text { color: #aaa; padding:.5em; float: left; text-align: center; width: 100%; } .wrap .item-box .text>p:first-child { color: #000 } .wrap .item-box:hover { border: thin solid #3e82b0 } .wrap.hide-wrap { padding: 0; overflow: hidden; height: 0 } .more-btn-wrap { float: left; text-align: center; width: 100%; margin-top:15px; } .more-btn-wrap a { border-radius:.3em; display: block; padding:.8em 0; margin: auto; width: 50%; color: #fff; text-decoration: none; font-size:.75em; background-color: #ff3636; transition: all .2s; } .more-btn-wrap a i { margin-left:.5em } .more-btn-wrap:hover a { background-color: #ff5151; text-decoration: none; color: #fff } } /*最终页*/ .pdebgs { background:#f5f1ea; float:left; width:100%; } .rtp{ padding:3px; border:1px solid #E1E1E0 !important; display:block; margin:0px; text-align:center; vertical-align:middle; } .rtp img{ margin:0px; padding:0px; width:100%;height:auto; max-width:400px; display:initial;} @media (min-width: 485px) { #promoreimg{ margin-top:5px; margin-bottom:5px;overflow:hidden; display:block; float:left; position:relative;} #promoreimg .Cont { MARGIN: 0px auto; OVERFLOW: hidden; min-width:400px; display:block; max-width:450px; margin-left:25px;} #promoreimg .Cont ul { list-style:none; margin:0px; float:left; padding:0px; } #promoreimg .Cont ul li { margin:0px; padding:0px; float:left; } #promoreimg img{float:left; width:90px; height:90px; border:0; margin:5px; margin-left:0px; border:1px solid #e5e5e5; padding:2px; cursor:pointer;} #promoreimg .LeftBotton { float:left;BACKGROUND: url(../images/left1.jpg) no-repeat 0px 0px; LEFT:0px; WIDTH: 25px; CURSOR: pointer; TOP:5px; height:90px; position:absolute;} #promoreimg .RightBotton { float:right;BACKGROUND: url(../images/right1.jpg) no-repeat 0px 0px; RIGHT:0px; WIDTH: 25px; CURSOR: pointer; TOP: 5px; height:90px; position:absolute;} } @media (max-width: 484px) { #promoreimg{ margin-top:5px; margin-bottom:5px;overflow:hidden; display:block; float:left;} #promoreimg .Cont { MARGIN: 0px auto; display:block; margin-left:0px; max-width:240px;} #promoreimg .Cont ul { list-style:none; margin:0px; float:left; padding:0px; } #promoreimg .Cont ul li { margin:0px; padding:0px; float:left; } #promoreimg img{float:left; width:60px; height:60px; border:0; margin:5px; margin-left:0px; border:1px solid #e5e5e5; padding:2px; cursor:pointer;} #promoreimg .LeftBotton { float:left;BACKGROUND: url(../images/left1.jpg) no-repeat 0px 0px; LEFT:0px; WIDTH: 25px; CURSOR: pointer; TOP:5px; height:90px; position:absolute; display:none;} #promoreimg .RightBotton { float:right;BACKGROUND: url(../images/right1.jpg) no-repeat 0px 0px; RIGHT:0px; WIDTH: 25px; CURSOR: pointer; TOP: 5px; height:90px; position:absolute; display:none;} } .pdintro { display:block;} .pdintro .name,.pdintro .cateby { border-bottom:#efefef 0px solid; line-height:1.2;} .pdintro .name { font-size:32px; font-weight:normal; padding-top:8px; color:#000000; padding-bottom:0; word-break:break-all; text-align:left;} .pdintro .cateby { font-size:24px; color:#888; padding-top:35px; padding-bottom:5px; text-align:left;} .pdintro .cateby .cate { font-size:20px; color:#333; margin-right:5px;} .pdintro .btn { display:inline-block; margin:0; margin-top:10px; border:0; background:none;} .pdintro .btn a { display:block; height:40px; line-height:40px; background-color:#2bcaf5; color:#fff; padding:9px 120px; text-align:center; font-size:20px; font-weight:bold;} .pdintro .btn .cart { display:inline-block; width:40px; height:40px; background:url(../images/cart.png) no-repeat; overflow:hidden; vertical-align:middle; margin-right:15px;} .pdintro .tel { font-size:14px;} .pdintro .tel b { font-size:24px; color:#216cbd; font-style:italic; margin-left:5px;} .pdintro .links ul { width:100%;list-style:none; margin:0px; border:0;} .pdintro .links li { width:24.333%; padding:0 1%; height:72px; line-height:18px; float:left; border-right:#c7c7c7 1px solid; margin-right:-1px; text-align:center; font-size:14px; padding-bottom:8px;} .pdintro .links i { display:block; width:40px; height:40px; background:url(../images/arr.png) no-repeat; overflow:hidden; margin:0 auto;} .pdintro .links i.pl02 { background-position:-40px 0;} .pdintro .links i.pl03 { background-position:-80px 0;} .pdintro .share .si { display:inline-block; width:23px; height:23px; overflow:hidden; font:0/0 a; letter-spacing:-9px; background:url(../images/share.png) no-repeat; filter:alpha(opacity=40); opacity:0.4; vertical-align:middle; margin-right:5px;} .pdintro .share a:hover .si { filter:alpha(opacity=100); opacity:1;} .pdintro .share .si01 { background-position:0 0;} .pdintro .share .si02 { background-position:-23px 0;} .pdintro .share .si03 { background-position:-46px 0;} .pdintro .share .si04 {background-position:-69px 0;} .pdintro .share .si05 {background-position:-92px 0;} .share .si { display:inline-block; width:23px; height:23px; overflow:hidden; font:0/0 a; letter-spacing:-9px; background:url(../images/share.png) no-repeat; filter:alpha(opacity=40); opacity:0.4; vertical-align:middle; margin-right:5px;} .share a:hover .si { filter:alpha(opacity=100); opacity:1;} .share .si01 { background-position:0 0;} .share .si02 { background-position:-23px 0;} .share .si03 { background-position:-46px 0;} .share .si04 {background-position:-69px 0;} .share .si05 {background-position:-92px 0;} .detail_first { padding-top:20px; border-bottom:#747474 3px solid; height:74px; display:block; } .detail_first strong { float:left; display:inline-block; width:auto; height:54px; line-height:54px;font-size:16px; font-weight:normal; padding-left:4%; padding-right:4%; text-transform:uppercase; background:#545454; color:#fff; position:relative; border-bottom:#05ebde 3px solid; } .detail_first strong i { display:block; width:0; height:0; overflow:hidden; border-color:#05ebde transparent transparent; border-style:solid dashed dashed; border-width:10px; position:absolute; left:50%; bottom:-20px; margin-left:-10px;} .cont_rnrlist { padding-top:20px; padding-bottom:20px; display:block; } #conremark{ display:block; padding:35px 0px 0px 0px; background:#fff url(../images/confeedback.jpg) repeat-x left top; font-size:14px;} #conremark strong{ display:block; font-size:20px; color:#05ebde; line-height:35px; text-transform:capitalize; padding-bottom:10px;} .cont_rnrlist { display:block;padding-top:20px; padding-bottom:20px; } @media (min-width: 980px) { #rlt{ padding:15px; min-height:450px;} .rrtl{ padding:15px; min-height:450px;} .pdintro .name,.pdintro .cateby,.pdintro .btn,.pdintro .tel,.pdintro .links { padding:10px 80px 10px 80px;} .pdintro .links { overflow:hidden; padding:20px 0 0; margin:0 65px;} .pdintro .share{ float:left; width:380px; padding-left:130px; padding-top:30px;} } @media (min-width: 768px) and (max-width: 979px) { #rlt{ padding:15px; min-height:410px;} .rrtl{ padding:15px; min-height:410px;} .pdintro .name,.pdintro .cateby,.pdintro .btn,.pdintro .tel,.pdintro .links { padding:10px 30px 10px 30px;} .pdintro .links { overflow:hidden; padding:20px 0 0; margin:0 15px;} .pdintro .share{ float:left; width:340px; padding-left:40px; padding-top:30px;} } @media (max-width: 767px) { .pabous { margin-top:30px; } .xmbot15 { margin-bottom:15px; } #rlt{ padding:15px; } .rrtl{ padding:15px; min-height:350px;} .pdintro .name,.pdintro .cateby,.pdintro .btn,.pdintro .tel,.pdintro .links { padding:10px 10px 10px 10px;} .pdintro .links { overflow:hidden; padding:20px 0 0; margin:0 25px;} .pdintro .share{ float:left; width:340px; padding-left:40px; padding-top:30px;} } @media (min-width: 400px) and (max-width: 480px) { .pabous { margin-top:30px; } .xmbot15 { margin-bottom:15px; } #rlt{ padding:15px; } .rrtl{ padding:15px;} .pdintro .name,.pdintro .cateby,.pdintro .btn,.pdintro .tel,.pdintro .links { padding:10px 10px 10px 10px;} .pdintro .links { overflow:hidden; padding:10px 0 0; margin:0 15px;} .news_c_right{ margin-top:0px; border:1px solid #ddd; margin-bottom:30px;} .pdintro .share{ float:left; width:340px; padding-left:40px; padding-top:10px; } .sliderbox { display:none; } } @media (max-width:400px) { .pdintro .name, .pdintro .cateby, .pdintro .btn, .pdintro .tel, .pdintro .links { padding:0px; } .pabous { margin-top:30px; } .xmbot15 { margin-bottom:15px; } #rlt{ padding:0px; } .rrtl{ padding:0px;} .pdintro .name,.pdintro .cateby,.pdintro .btn,.pdintro .tel,.pdintro .links { padding:10px 10px 10px 10px;} .pdintro .links { overflow:hidden; padding:10px 0 0; margin:0 15px;} .pdintro .links ul { width:100%;list-style:none; margin:0px; border:0;} .pdintro .links li { width:30.333%; padding:0 1%; height:72px; line-height:18px; float:left; border-right:#c7c7c7 1px solid; margin-right:-1px; text-align:center; font-size:14px; padding-bottom:8px;} .pdintro .links i { display:block; width:40px; height:40px; background:url(../images/arr.png) no-repeat; overflow:hidden; margin:0 auto;} .pdintro .links i.pl02 { background-position:-40px 0;} .pdintro .links i.pl03 { background-position:-80px 0;} .news_c_right{ margin-top:0px; border:1px solid #ddd; margin-bottom:30px;} .pdintro .share{ width:100%; text-align:center; float:none; margin-bottom:20px; } .sliderbox { display:none; } } .contact-section{ padding: 1em 0; } .contact { text-align: center; } #comname { line-height:30px; height:30px; } #comemail { line-height:30px; height:30px; } #comtel { line-height:30px; height:30px; } #comsend { padding: 0.8em 1.2em; color: #fff; font-size: 1.2em; font-weight: 600; text-decoration: none; -webkit-appearance: none; border-radius: 0.3em; -webkit-border-radius: 0.3em; -o-border-radius: 0.3em; -moz-border-radius: 0.3em; background:#05ebde; border:none; outline:none; box-shadow: inset 0px -2px 11px #05ebde; -webkit-box-shadow: inset 0px -2px 11px #05ebde; -o-box-shadow: inset 0px -2px 11px #05ebde; margin-top:15px; } .mtop15 { margin-top:15px; } .mbot15 { margin-bottom:15px; } .mbt20 { margin-bottom:20px; } .margin-bottom-40 { margin-bottom:25px; } .recent-work-wrap1 { position: relative; } .recent-work-wrap1 img{ width: 100%; } .recent-work-wrap1 .recent-work-inner{ top: 0; background: transparent; opacity: .8; width: 100%; border-radius: 0; margin-bottom: 0; } .recent-work-wrap1 .recent-work-inner h3{ margin: 10px 0;word-wrap:break-word; } .recent-work-wrap1 .recent-work-inner h3 a{ font-size: 24px; color: #fff; } .recent-work-wrap1 .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 0; background: #05ebde; color: #fff; vertical-align: middle; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; padding: 30px; } .recent-work-wrap1 .overlay .preview { bottom: 0; display: inline-block; height: 35px; line-height: 35px; border-radius: 0; background: transparent; text-align: center; color: #fff; } .recent-work-wrap1:hover .overlay { opacity: .9; } .pdebgs .foot { position:relative; text-align:center; height:78px; border-top:1px solid #bebebe; border-bottom:1px solid #bebebe; margin:60px 0; } .pdebgs .foot .child { display:inline-block; *display:inline; *zoom:1; position:relative; width:193px; height:100%; border-left:1px solid #ddd; } .pdebgs .foot a:nth-child(1) .child { border-left:0; } .pdebgs .foot .child .childIcon, .main .foot .child .childInfo { display:inline-block; *display:inline; *zoom:1; vertical-align:middle; } .pdebgs .foot .child .childIcon { margin-top:20px; position:relative; background:#666; width:38px; height:38px; text-align:center; line-height:38px; border-radius:38px; -moz-border-radius:38px; -ms-border-radius:38px; -o-border-radius:38px; -webkit-border-radius:38px; } .pdebgs .foot .child .childIcon img { vertical-align:middle; } .pdebgs .foot .child .childIcon img { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .pdebgs .foot .child:hover .childIcon img { transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg); } .pdebgs .foot .child .childInfo { padding-left:12px; text-align:left; margin-top: 18px; } .pdebgs .foot .child .childInfo p { color:#666; font-size:14px; } body .online-box { position: fixed; z-index: 999; right: -1px; top: 15em } @media (max-width: 768px) { body .online-box { display:none; } } body .online-box .wrap { border: thin solid #ccc; background-color: rgba(255,255,255,.7); width: 88px } body .online-box .wrap ul { overflow: visible; padding:.2em 0; list-style:none; } body .online-box .wrap ul li { float: left; width: 100%; padding:.4em; padding-bottom: 0 } body .online-box .wrap ul li>p { margin: 0 } body .online-box .wrap ul li .p1 { text-align: center } body .online-box .wrap ul li .p1>i { transition: all .2s; font-size: 3em } body .online-box .wrap ul li .p2 { font-size:.6em; text-align: center; width: 60px; margin: auto; padding-bottom:.5em; border-bottom: thin solid #ccc; transition: all .2s } body .online-box .wrap ul li:last-child .p2 { border-bottom: none } body .online-box .wrap ul li.x5 .p2 { border-bottom: none } body .online-box .wrap ul li.x6 .p1 { border-top: thin solid #ccc } body .online-box .wrap ul li:hover { cursor: pointer } body .online-box .wrap ul li:hover .p1>i { color: #3e82b0 } body .online-box .wrap ul li:hover .p2 { color: #3e82b0 } body .online-box .wrap ul .x3 { position: relative } body .online-box .wrap ul .x3 .wx-qrcode { position: absolute; top: 2px; right: 77px; overflow: hidden; z-index: 1000 } body .online-box .wrap ul .x3 .wx-qrcode .box { transition: all .2s; margin-right: -200px; float: right; width: 200px } body .online-box .wrap ul .x3 .wx-qrcode .box img { width: 100% } body .online-box .wrap ul .x3 .wx-qrcode .box>p { text-align: center; padding:.5rem; background-color: #fff } body .online-box .wrap ul .x3:hover .wx-qrcode .box { margin-right: 0 } /*联系我们*/ .contact {float:left; width:100%; height:680px; border-bottom:3px solid #0365ac; font-family:"微软雅黑",Arial,Helvetica,sans-serif} .contact{height:680px;overflow:hidden;background-color:#000; position:relative;} .contact .map{width:100%;height:710px;opacity:1;filter:alpha(opacity=100);} .contact .y-row{height:680px;overflow:hidden; margin:0 auto; width:1200px; text-align:left;} .contact .y-row .box{width:420px;height:486px;background-color:#FFF;position:absolute;top:80px;padding:34px 27px 0px 43px;overflow:hidden;} .contact .y-row .menu{height:40px;overflow:hidden;width:420px;overflow:hidden; line-height:40px;} .contact .y-row .menu a{float:left; width:120px; height:40px; overflow:hidden; position:relative; margin-right:20px; text-align:center; background:#323232;} .contact .y-row .menu a span{color:#FFF; position:absolute; width:120px; height:40px; top:0; left:0; cursor:pointer; display:block;} .contact .y-row .menu a b{position:absolute; background-color:#0365ac;width:120px; height:40px; top:-40px; left:0; display:block; transition:all ease-out .2s 0s;-webkit-transition:all ease-out .2s 0s;-moz-transition:all ease-out .2s 0s;-o-transition:all ease-out .2s 0s;} .contact .y-row .menu a:hover b,.contact .y-row .menu a.s b{top:0;} .contact .y-row .item2{width:400px; overflow:hidden;line-height:30px; padding-top:20px; font-size:14px; color:#636363;} .contact .y-row .item2 h1{ font-size:1.4em; color:#0365ac; line-height:50px; margin:0px; padding:0px;} .contact .y-row .item2 .t{ color:#c4c4c4;} .contact .y-row .item2 a.red{ color:#0365ac;} .contact .y-row .item2 a.red:hover{ text-decoration:underline;color:#0365ac;} .contact .y-row .item2 p{margin:0px; font-size:11px; line-height:18px; border-top:1px dotted #636363; margin-top:18px; padding-top:18px;} .sliderbox{background:#fff;width:100%;height:90px;overflow:hidden;margin-top:10px; } .arrow-btn{display:inline;width:25px;height:90px;overflow:hidden;cursor:pointer;} #btn-left{float:left;background:url(/images/left1.jpg) no-repeat;background-position: 50% 50%; margin-left:0px; background-size: 25px 90px;} #btn-left.dasabled{background:url(/images/left1.jpg) no-repeat;background-position: 50% 50%; background-size: 25px 90px;} #btn-right{float:right;margin-right:0px;cursor:pointer;background:url(/images/right1.jpg) no-repeat;background-position: 50% 50%; background-size: 25px 90px;} #btn-right.dasabled{background:url(/images/right1.jpg) no-repeat;background-position: 50% 50%; background-size: 25px 90px;} .slider{width:88%;overflow:hidden;position:relative;height:90px;float:left; margin-top:1px;} .slider ul{position:absolute;left:0px;top:0px;width:1800px;height:90px;list-style:none; margin:0px; padding:0px;} .slider li{float:left;height:90px;width:114px;} .slider a{display:block;text-decoration:none;color:#000;font-size:14px;font-weight:bold;text-align:center; } .slider img{width:110px;display:inline-block!important; height:88px; border:1px solid #ddd; margin-left:6px;}