/***********通用基本类1************/ /*格式化样式*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, hr, img { margin: 0; padding: 0; } address, cite, dfn, em, var, i { font-style: normal; } table { border-collapse: collapse; border-spacing: 0; } h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; } button, input, select, textarea { font-size: 100%; } fieldset, img { border: 0; max-width: 100%; } a { text-decoration: none; color: #333; background: none } a:hover { color: #b80000; } ul, ol { list-style: none; } i, strong, em, b { font-style: normal; } /*结构样式*/ .p10 { padding-left: 10px; padding-right: 10px; } /***********通用基本类2************/ body { font-size: 14px; line-height: 1.5; font-family: 'Microsoft Yahei', 'simsun', 'arial', 'tahoma'; /*background-color: #000; color: #fff;*/ max-width: 1920px; margin-left: auto; margin-right: auto; } .wrap{ width: 100%; max-width: 1920px; margin: 0 auto; } .main { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } /* 单行文字超出隐藏 */ .ellipsis { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 清理浮动 */ .fn-clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .fn-clear { zoom: 1; /* for IE6 IE7 */ } .floatL { float: left; } .floatR { float: right; } .overflowH { overflow: hidden; } /* 响应式图片盒子 */ .imgBox { position: relative; } .imgBox img { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .imgBox img.full { width: 100%; height: 100%; } .imgBox img.auto { max-width: 100%; max-height: 100%; } /* 图片放大 */ .hoverScale { overflow: hidden; } .hoverScale img { -webkit-transition: .4s; transition: .4s; } .hoverScale:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* 居中 */ .middleBox:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .middleLi { display: inline-block; vertical-align: middle; } /* 模块间的上边距 */ .marginTop { margin-top: 3%; } @media (max-width: 768px) { .marginTop { margin-top: 5%; } } /***********其他公共样式************/ /*ao-顶部栏目*/ .ao-headerNav .item1>li { position: relative; display: table-cell; height: 100%; width: 1%; text-align: center; font-size: 16px; } .ao-headerNav .item1>li>a { position: relative; display: block; } .ao-headerNav .item2 { display: none; position: absolute; top: 100%; left: 50%; z-index: 2; font-size: 14px; line-height: 3em; text-align: center; min-width: 100%; background-color: #fff; border: 1px solid #e0e0e0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .ao-headerNav .item1>li:hover .item2 { display: block; } @media (max-width: 1200px) { .ao-headerNav { display: none; } } /*顶部栏目end*/ /*ao-响应式顶部栏目+按钮*/ .ao-navBtn .navbar-toggle { position: relative; padding: 9px 10px; background-color: transparent; background-image: none; cursor: pointer; outline: none; border: 1px solid #ddd; border-radius: 6px; } .ao-navBtn .navbar-box .sr-only { display: block; width: 100%; padding: 0; margin: -1px; font-size: 12px; line-height: 1.4; overflow: hidden; border: 0; color: #888; text-align: center; margin-top: 2px; } .ao-navBtn .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #888; } .ao-navBtn .navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; } /*响应式顶部栏目+按钮end*/ /* header头部 */ .header { width: 100%; background-color: #000; } .header .header_main { height: 100px; line-height: 100px; padding: 30px 0; } .top_line { background: #686868; height: 36px; line-height: 36px; font-size: 12px; overflow: hidden; } .top_line, .top_line a { color: #fff; } .top_line .welcome { float: left; } .top_line .topBtn { float: right; } .header .logo { float: left; font-size: 0; } .header .logo { height: 100%; } .header .logo img { max-height: 90%; } .header_main .header_tel { float: right; line-height: 1.2; height: 100%; display: table; text-align: center; padding-left: 20px; } .header_main .header_tel .phoneIco, .header_main .header_tel .telInfo { display: table-cell; vertical-align: middle; text-align: left; } .header_main .header_tel .phoneIco i { display: inline-block; width: 4em; height: 4em; background: url("../Images/phoneIco.png") no-repeat center center / contain; margin-right: 20px; } .header_main .header_tel .telInfo .telText { font-size: 20px; color: #fff; margin-bottom: 5px; } .header_main .header_tel .telInfo .telNum { font-size: 22px; color: #00479d; } .header_main .header_tel .telInfo .telNum a { color: #fff; font-size: 36px; } .header .icoBtn { float: right; height: 100%; display: none; } .header .icoBtn .navbar-box { display: inline-block; vertical-align: middle; } @media (max-width: 1200px) { .header { position: fixed; top: 0; left: 0; z-index: 22; } body { padding-top: 126px; } .header .header_main { height: 90px; line-height: 90px; padding: 18px 0; } .header .icoBtn { display: block; margin-right: 10px; margin-left: 10px; } .header .logo { margin-left: 10px; } } @media (max-width: 992px) { body { padding-top: 116px; } .header .header_main { height: 80px; line-height: 80px; } .header .logo{ max-width: 70%; } .header .logo img { max-height: 60%; max-width: 100%; } } @media (max-width: 900px) { .header_main .header_tel { display: none; } } @media (max-width: 768px) { body { padding-top: 84px; } .header .header_main { height: 60px; line-height: 60px; padding: 12px 0; } .top_line { height: 24px; line-height: 24px; } .top_line .welcome { float: none; text-align: center; font-size: 12px; } .top_line .topBtn { display: none; } } /* nav */ .header_nav { background-color: #fff; } .header_nav li { height: 60px; line-height: 60px; font-size: 14px; } .header_nav li.on { background-color: #b80000; } .header_nav li.on a { color: #fff; } /* nav end*/ /* 移动端侧导航 */ .ao-slideNav-mask { position: fixed; width: 80%; height: 100%; top: 0; left: -80%; background-color: rgba(0, 0, 0, .8); z-index: 2222; -webkit-transition: all 0.5s; transition: all 0.5s; } .ao-slideNav { -webkit-box-sizing: border-box; box-sizing: border-box; visibility: visible; position: fixed; top: 0; right: -20%; width: 20%; height: 100%; padding: 1em; background-color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 2222; } .ao-slideNav-mask.on { left: 0; } .ao-slideNav.on { right: 0; } .ao-slideNav .btn { background: url("../Images/slide-close.png") no-repeat center center / cover; width: 30px; height: 30px; margin-left: auto; margin-right: 10px; cursor: pointer; } .ao-slideNav li { width: 100%; border-left: 0; padding: .1em 0; line-height: 1.8; text-align: center; } .ao-slideNav .item1>li { font-size: 20px; color: #8B8784; } .ao-slideNav .item2 { display: none; } @media (max-width: 992px) { .ao-slideNav { right: -30%; width: 30%; } .ao-slideNav-mask { width: 70%; } } @media (max-width: 768px) { .ao-slideNav { right: -50%; width: 50%; } .ao-slideNav-mask { width: 50%; } } /* footer脚部 */ .footer { padding: 3% 0; color: #fff; /*margin-top: 4%;*/ background-color: #000; } .footer a { color: #fff; } .footer .nav .item1 > li{ position: relative; display: table-cell; height: 100%; width: 1%; text-align: center; font-size: 20px; } .footer .nav .item2{ margin-top: ; } .footer .nav .item2 li{ margin-top: .6em; font-size: 14px; } .footer .info .hotTel{ font-size: 20px; text-align: center; margin-top: 30px; } .footer .info .hotTel span{ font-size: 1.8em; } .footer .info .companyInfo{ text-align: center; margin-top: 10px; } .footer .info .companyInfo span{ margin: 0 .5em; } @media (max-width: 768px) { .footer .nav{ display: none; } .footer .info .companyInfo span{ display: block; text-align: center; font-size: 12px; } .footer .info .hotTel{ font-size: 14px; margin-top: 10px; } .footer{ border-top: 1px solid #fff; } } .swiper-button-prev, .swiper-button-next { position: absolute; left: 3%; top: 50%; margin-top: -25px; display: block; width: 32px; height: 40px; background: url(../Images/slider-arrow.png) -110px 5px no-repeat; filter: alpha(opacity=50); opacity: 0.5; } .swiper-button-next { left: auto; right: 3%; background-position: 8px 5px; } .swiper-button-prev:hover, .swiper-button-next:hover { filter: alpha(opacity=100); opacity: 1; } /* lignhtBox */ #wrap { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000; background: #292929; opacity: 0.5; filter: alpha(opacity=50); display: none; } .photo_border { width: 300px; height: 300px; position: fixed; left: 50%; margin-left: -150px; z-index: 1001; background: url(../Images/lightbox/loading.gif) no-repeat center center #fff; display: none; z-index: 1000; zoom: 1; } .photo { position: relative; border: 5px solid #fff; border-radius: 3px; overflow: hidden; } .photo_btn { display: block; position: absolute; height: 100%; width: 40%; top: 0; zoom: 1; background: url(../Images/lightbox/ie-bug.gif); cursor: pointer; } .photo_pre_btn { left: 0; } .photo_pre_btn_show { background: url(../Images/lightbox/prev.png) no-repeat; background-position: 10% center; } .photo_next_btn { right: 0; } .photo_next_btn_show { background: url(../Images/lightbox/next.png) no-repeat; background-position: 90% center; } .caption { position: relative; top: -65px; width: auto; height: 60px; margin: 0 5px; display: block; background: rgba(126, 126, 126, 0.5); } .photo_border .index { padding-left: 10px; color: #000; height: 30px; line-height: 30px; } .photo_border .title { padding-left: 10px; height: 30px; line-height: 30px; color: #fff; } .caption_close_btn { width: 27px; height: 27px; position: absolute; right: 10px; top: 13px; background: url(../Images/lightbox/close.png) no-repeat; cursor: pointer; } /* lignhtBox */ .goTop{ position: fixed; bottom: 10%; right: 0; width: 3.6em; height: 3.6em; border-radius: 50%; background: #c9c9c9 url('../Images/go-top.png') no-repeat center center / 60% 60%; z-index: 34; opacity: 0.8; } .goTop img{ width: 100%; height: 100%; } .goTop:hover{ background-color: #b80000; opacity: 1; } /*客户 end*/ .friendsLinks_content { background-color: #000; border-bottom: 1px solid #666666; color: #fff; margin-top: 4%; } .friendsLinks_content .main { padding: 20px 10%; box-sizing: border-box; } .friendsLinks_content span { font-size: 20px; } .friendsLinks_content a { font-size: 14px; color: #fff; margin-right: 1.5em; white-space: nowrap; } @media (max-width: 768px) { .friendsLinks_content .main { padding: 15px 15px; box-sizing: border-box; } .friendsLinks_content span, .friendsLinks_content a { font-size: 10px; } }