html {
margin: 0;
padding: 0;
border: 0;
}
a,
address,
b,
blockquote,
body,
code,
dd,
div,
dl,
dt,
em,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
header,
hgroup,
iframe,
img,
label,
li,
nav,
object,
ol,
p,
pre,
section,
span,
ul {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #fff;
color: #666;
position: relative;
font: 12px/1.5 Microsoft YaHei, arial, 瀹嬩綋, sans-serif;
vertical-align: baseline;
width: 100%;
overflow-x: hidden;
}
input {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
}
img {
border: none;
background: 0 0;
vertical-align: middle;
}
li,
ol,
ul {
list-style-type: none;
}
img,
input,
select {
vertical-align: middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table,
td,
th {
vertical-align: middle;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.clearboth {
height: 0;
line-height: 0;
overflow: hidden;
clear: both;
font-size: 0;
}
h1,
h2,
h3,
h4 {
font-size: 12px;
font-weight: 700;
}
hr {
border: 0;
border-top: 1px solid #ccc;
height: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.fwn {
font-weight: 400;
}
.wh,
.w1200 {
width: 1200px;
margin: 0 auto;
}
.container {
width: 1200px !important;
}
#header {
width: 1200px;
margin: 0 auto;
}
.tophead {
width: 100%;
height: 32px;
background: #090000;
position: relative;
z-index: 999;
}
.headtitle {
font-size: 12px;
color: #a5a3a3;
line-height: 32px;
}
.sechead {
width: 1200px;
margin: 0 auto;
height: 108px;
line-height: 108px;
position: relative;
}
.logo {
float: left;
}
.logo h1 {
display: inline-block;
}
#menu {
background-color: #1258c6;
}
.nav {
height: 52px;
text-align: center;
margin: 0 auto;
}
.nav li {
text-align: center;
width: auto;
float: left;
position: relative;
z-index: 999;
transition: 0.4s;
}
.nav li + li {
margin-left: 52px;
}
.nav li h2 {
line-height: 52px;
height: 52px;
font-weight: 400;
}
.nav li h2 a {
display: block;
font-size: 16px;
color: #fff;
width: 104px;
transition: 0.4s;
}
.nav li h2 > a:hover {
background-color: #114ba2;
}
.nav .sec {
background: #114ba2;
color: #fff;
overflow: hidden;
z-index: 9999;
position: absolute;
top: 36px;
left: -13px;
display: none;
}
.nav .sec a {
background: #114ba2;
color: #fff;
height: 38px;
line-height: 38px;
width: 90px;
}
.nav .sec a:hover {
background: #000;
text-decoration: none;
}
/* 浜у搧 */
.pro {
background: url(../images/pro_bg.jpg) 0 0;
padding: 25px 0;
overflow: hidden;
}
.proleft {
background: #004ebe;
width: 254px;
overflow: hidden;
}
.proleft h3 {
background: url(../images/proleft_tit.jpg) no-repeat 0 0;
font-size: 26px;
height: 68px;
line-height: 68px;
color: #fff;
font-weight: 400;
text-align: center;
}
.proleft h3 span {
font-size: 16px;
color: #819cd7;
text-transform: uppercase;
}
.proleft .box {
background-color: #fff;
margin: 0 2px 2px;
text-align: center;
padding: 24px 0;
}
.proleft ul {
width: 210px;
margin: 0 auto;
}
.proleft ul li {
height: 40px;
line-height: 40px;
margin-bottom: 24px;
text-align: left;
text-indent: 50px;
font-size: 16px;
}
.proleft ul li a {
color: #fff;
transition: 0.4s;
width: 100%;
display: block;
background-color: #004ebe;
}
.proleft ul li a:hover {
background-color: #ff7f3b;
}
.proright {
width: 930px;
overflow: hidden;
}
.proright .biaoti {
width: 100%;
text-align: left;
height: 40px;
line-height: 40px;
position: relative;
margin-top: 15px;
overflow: hidden;
border-bottom: 3px solid #004ebe;
}
.proright .biaoti h3 {
font-size: 24px;
color: #004ebe;
}
.proright .biaoti .more {
float: right;
color: #141414;
font-size: 16px;
}
.product_list1 {
margin-top: 14px;
overflow: hidden;
}
.product_list1 li {
float: left;
width: 290px;
position: relative;
margin: 15px 12px;
overflow: hidden;
}
.product_list1 li:nth-child(3n) {
margin-right: 0;
}
.product_list1 li img {
width: 290px;
height: 282px;
transition: 0.5s;
}
.product_list1 li .ks {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.product_list1 li h4 {
text-align: center;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 36px;
transition: 0.5s;
}
.product_list1 li:hover h4 {
line-height: 282px;
}
.product_list1 li:hover img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.protj {
overflow: hidden;
width: 100%;
}
.protj .biaoti {
height: 105px;
position: relative;
overflow: hidden;
text-align: center;
}
.protj .biaoti::before {
content: "";
background-color: #e1e1e1;
width: 100%;
height: 1px;
position: absolute;
left: 0;
right: 0;
top: 90px;
z-index: 0;
}
.protj h3 {
line-height: 75px;
font-size: 33px;
font-weight: 400;
color: #000;
}
.protj .more {
line-height: 30px;
width: 150px;
display: inline-block;
background-color: #474954;
border-radius: 10px;
color: #fff;
position: relative;
z-index: 1;
}
.prolist {
margin: 30px 0 0;
}
.prolist li {
width: 290px;
margin-right: 20px;
text-align: center;
overflow: hidden;
}
.prolist li .img {
width: 100%;
height: 282px;
display: block;
overflow: hidden;
}
.prolist li img {
width: 290px;
height: 282px;
transition: 0.4s;
}
.prolist li h4 {
font-size: 16px;
line-height: 80px;
font-weight: 400;
}
.prolist li h4 a {
color: #343434;
}
.prolist li:hover img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/* 浼樺娍 */
.ys {
background: url(../images/youshi_bg.jpg) no-repeat 50% 0;
padding: 55px 0 20px 0;
text-align: center;
}
.ys-tit {
color: #fff;
height: 100px;
overflow: hidden;
}
.ys-tit h3 {
font-size: 26px;
line-height: 36px;
position: relative;
padding-bottom: 10px;
}
.ys-tit h3 span {
font-size: 28px;
display: block;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-weight: 400;
}
.ys-tit h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: #fff;
}
.ys-tit p {
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.ys-tit p span {
text-align: right;
text-transform: uppercase;
display: block;
font-size: 12px;
line-height: 18px;
color: #a8bddb;
}
.ys-cont {
background-color: #fff;
overflow: hidden;
}
.ys-tab {
width: 1126px;
margin: 24px auto;
}
.ys-tab .hd {
width: 92px;
height: 400px;
background-color: #114ba2;
text-align: center;
margin-left: 1px;
}
.ys-tab .hd li {
height: 100px;
position: relative;
transition: 0.3s;
}
.ys-tab .hd li a {
display: block;
width: 100%;
overflow: hidden;
cursor: pointer;
}
.ys-tab .hd li a img {
margin-top: 15px;
}
.ys-tab .hd li a h3 {
font-size: 14px;
font-weight: 400;
color: #fff;
margin-top: 25px;
position: relative;
}
.ys-tab .hd li a h3::after {
content: "";
width: 33px;
height: 2px;
background-color: #ffffff;
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
}
.ys-tab .hd li.on {
background-color: #377cca;
}
.ys-tab .hd li.on::after {
content: "";
width: 11px;
height: 16px;
background: url(../images/jiao.png) no-repeat center center;
position: absolute;
right: -11px;
top: 50%;
transform: translateY(-50%);
}
.ys-tab .bd li img {
width: 1000px;
height: 406px;
}
.ys-tab .bd li p {
font-size: 16px;
line-height: 30px;
color: #565656;
margin: 16px 0;
}
.ys .more {
display: inline-block;
margin: 0 auto;
width: 200px;
font-size: 18px;
line-height: 60px;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #ff7f3b;
}
/* 鍏充簬鎴戜滑 */
.about {
background: url(../images/about_bg.jpg) 50% 0 no-repeat;
overflow: hidden;
max-height: 930px;
text-align: center;
}
.about_tit {
border-bottom: 1px solid #3b86d4;
}
.about_tit h3 {
font: 700 22px/56px "寰蒋闆呴粦";
color: #fff;
text-align: center;
border: 1px solid #fff;
display: inline-block;
padding: 0 15px 0 20px;
margin: 70px auto 24px;
letter-spacing: 5px;
}
.about_txt {
max-height: 350px;
text-align: left;
font-size: 16px;
line-height: 48px;
color: #fff;
overflow: hidden;
text-overflow: ellipsis; /* 鏂囧瓧婧㈠嚭鐨勬椂鍊欑敤鐪佺暐鍙锋潵鏄剧ず */
display: -webkit-box; /* 寮规€т几缂╃洅瀛愭ā鍨嬫樉绀 */
-webkit-line-clamp: 9; /* 闄愬埗鍦ㄤ竴涓潡鍏冪礌鏄剧ず鐨勬枃鏈殑琛屾暟 */
-webkit-box-orient: vertical; /* 璁剧疆鎴栨绱几缂╃洅瀵硅薄鐨勫瓙鍏冪礌鐨勬帓鍒楁柟寮 */
}
.about_list {
}
.about_list li {
width: 290px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #9fbbd7;
float: left;
background-color: rgba(255, 255, 255, 0.7);
margin: 10px 13px 10px 0;
}
.about_list li:last-child {
margin-right: 0;
}
.about_list li .img {
width: 290px;
height: 194px;
overflow: hidden;
display: block;
}
.about_list li img {
width: 290px;
height: 194px;
transition: 0.4s;
}
.about_list li h4 {
line-height: 68px;
font-size: 16px;
}
.about_list li h4 a {
color: #393939;
}
.about_list li:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}
.about .more {
display: block;
text-align: left;
text-indent: 90px;
width: 300px;
height: 60px;
line-height: 60px;
font-size: 16px;
color: #fff;
background-color: #ff7f3b;
position: relative;
margin: 40px auto;
transition: 0.4s;
box-sizing: border-box;
}
.about .more::after {
content: "鈫?;
position: absolute;
text-indent: 0;
font-size: 30px;
height: 60px;
width: 30px;
left: 180px;
top: 0;
}
.about .more:hover {
border-radius: 30px;
}
.case {
overflow: hidden;
text-align: center;
margin: 30px auto;
}
.case_tit {
text-align: left;
}
.case_tit h3 {
font-size: 30px;
font-weight: 400;
line-height: 50px;
}
.case_tit h3 b {
font-size: 33px;
color: #004bb7;
text-transform: uppercase;
}
.case_tit h3 span {
color: #004bb7;
}
.case_tit .more {
float: right;
line-height: 50px;
}
.case_list {
}
.case_list li {
width: 290px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #dcdcdc;
float: left;
margin: 10px 10px 10px 0;
}
.case_list li:last-child {
margin-right: 0;
}
.case_list li .img {
width: 290px;
height: 194px;
overflow: hidden;
display: block;
}
.case_list li img {
width: 290px;
height: 194px;
transition: 0.4s;
}
.case_list li h4 {
line-height: 68px;
font-size: 16px;
font-weight: 400;
}
.case_list li h4 a {
color: #393939;
}
.case_list li:hover img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.news {
}
.news {
overflow: hidden;
text-align: center;
margin: 30px auto;
}
.news_tit {
text-align: left;
}
.news_tit h3 {
font-size: 30px;
font-weight: 400;
line-height: 50px;
}
.news_tit h3 b {
font-size: 33px;
color: #004bb7;
text-transform: uppercase;
}
.news_tit h3 span {
color: #004bb7;
}
.news_tit .more {
float: right;
line-height: 50px;
}
.newspic {
overflow: hidden;
margin: 35px auto;
}
.newspic img {
float: left;
width: 560px;
height: 320px;
}
.newspic .cont {
float: right;
width: 600px;
text-align: left;
}
.newspic .cont .date {
font-size: 14px;
color: #8f8f8f;
line-height: 55px;
margin-top: 24px;
display: block;
}
.newspic .cont .tit {
font-size: 18px;
line-height: 50px;
color: #000;
}
.newspic .cont .txt {
height: 84px;
line-height: 28px;
font-size: 14px;
color: #666;
}
.newspic .cont .more {
width: 146px;
height: 40px;
color: #fff;
display: block;
font-size: 14px;
margin-top: 18px;
line-height: 40px;
text-align: center;
background-color: #004bb7;
}
.newslist {
overflow: hidden;
}
.newslist li {
float: left;
width: 390px;
height: 164px;
overflow: hidden;
text-align: left;
transition: 0.5s;
margin-right: 10px;
}
.newslist li a {
color: #666666;
}
.newslist .date {
float: left;
width: 85px;
text-align: center;
}
.newslist .date b {
font-size: 48px;
color: #02041d;
transition: 0.5s;
}
.newslist .date span {
font-size: 14px;
transition: 0.5s;
}
.newslist .cont {
float: right;
width: 270px;
font-size: 14px;
margin: 0 20px 0 0;
}
.newslist .tit {
font-size: 16px;
line-height: 45px;
color: #02041d;
transition: 0.5s;
}
.newslist .txt {
line-height: 26px;
height: 52px;
overflow: hidden;
margin: 6px 0;
transition: 0.5s;
}
.newslist .more {
line-height: 36px;
transition: 0.5s;
}
.newslist li:hover {
background-color: #004bb7;
}
.newslist li:hover * {
color: #fff;
}
.adline {
width: 100%;
height: 200px;
background: url(/images/adline.jpg) no-repeat 50%;
}
.foot {
background-color: #014bb7;
padding: 35px 0;
margin-top: 24px;
overflow: hidden;
}
.foot_nav {
color: #fff;
padding-bottom: 20px;
margin-bottom: 45px;
overflow: hidden;
border-bottom: 1px solid #5c8cd1;
}
.foot_nav h3 {
color: #fff;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
.foot_nav h3 span {
display: block;
text-transform: uppercase;
}
.foot_nav p a {
line-height: 48px;
display: inline-block;
color: #dde3f2;
font-size: 16px;
margin-left: 70px;
}
.foot_nav p a:hover {
color: #fff;
}
.foot_cont {
position: relative;
overflow: hidden;
}
.foot_cont::after {
content: "";
position: absolute;
top: 0;
left: 420px;
bottom: 0;
width: 1px;
height: 100%;
background: #5c8cd1;
}
.foot_com, .foot_com a {
color: #FFF;
}
.foot_com {
width: 400px;
padding-right: 20px;
}
.foot_com h3 {
font-size: 28px;
line-height: 1.6;
}
.foot_com h3 span {
font-size: 14px;
display: block;
}
.foot_com .txt {
font-size: 14px;
line-height: 1.8;
}
.er {
color: #dedee9;
text-align: center;
line-height: 14px;
margin-top: 10px;
}
.er img {
padding: 0 45px 10px;
}
.wchat {
width: 90px;
height: 90px;
padding-right: 26px;
}
#footer {
border-top: 1px solid #5c8cd1;
background-color: #014bb7;
padding: 18px 0 12px 0;
font-size: 14px;
line-height: 26px;
text-align: center;
}
#footer,
#footer a {
color: #e8e8ea;
}
.ys33 {
margin-top: 24px;
}
.layui-form-label {
box-sizing:content-box;
}