/***********通用基本类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: inherit; background: none } a:hover { color: #0496e1; } ul, ol { list-style: none; } i, strong, em, b { font-style: normal; } /*结构样式*/ .p10 { padding-left: 10px; padding-right: 10px; } input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none; } /***********通用基本类2************/ body { font-size: 16px; line-height: 1.5; font-family: 'Microsoft Yahei', 'simsun', 'arial', 'tahoma'; color: #333; } .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; height: 100%; /*display: table-cell; width: 1%;*/ text-align: center; font-size: 16px; } .ao-headerNav .item1.fullW>li{ display: table-cell; width: 1%; } .ao-headerNav .item1.autoW>li{ float: left; min-width: 5em; } .ao-headerNav .item1.autoW>li a{ padding: 0 1em; } .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: #2a82af; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .ao-headerNav .item1>li:hover .item2 { display: block; } .ao-headerNav .item2 li:hover { background-color: #e09a20; } /*顶部栏目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: #fff; } .header .header_main { height: 115px; } .top_line { background: #fff; color: #717171; min-height: 36px; line-height: 36px; font-size: 12px; overflow: hidden; border-bottom: 1px solid #e7e7e7; } .top_line .main { } .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%; padding-right: 10px; } .header .logo .text{ display: inline-block; vertical-align: middle; padding: 10px 0 10px 20px; line-height: 1; border-left: 1px solid #d2d2d2; } .header .logo .text b{ display: block; font-size: 22px; color: #003755; font-weight: bold; line-height: 1; } .header .logo .text i{ display: block; line-height: 1; font-size: 16px; color: #333; margin-top: 6px; } .header .header_nav { background-color: #0255a5; height: 70px; line-height: 70px; } .header .header_nav a{ color: #fff; } .header .header_nav .item1>li.on, .header .header_nav .item1 > li:hover { background-color: #0496e1; } .header .header_nav .ban:hover { background-color: #a7a7a7 !important; color: #fff !important; } .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: 2em; height: 2em; border-radius: 50%; background: #353535 url("../Images/phoneIco.png") no-repeat center center / contain; border: 4px solid #353535; margin-right: 10px; } .header_main .header_tel .telInfo .telText { font-size: 14px; color: #686868; } .header_main .header_tel .telInfo .telNum { font-size: 26px; color: #0255a5; } .header_main .header_tel .telInfo .telNum a { color: #0255a5; } .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; } .header .header_nav { display: none; } .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 img { max-height: 60%; } } @media (max-width: 768px) { body { padding-top: 84px; } .header .header_main { height: 60px; line-height: 60px; } .header_main .header_tel { display: none; } .top_line { height: 24px; line-height: 24px; } .top_line .welcome { float: none; text-align: center; font-size: 12px; } .top_line .topBtn { display: none; } }*/ /* 移动端侧导航 */ .ao-navMask { 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-navMask.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: .5em 0; line-height: 1.5; text-align: center; } .ao-slideNav .item1>li { font-size: 16px; color: #8B8784; } .ao-slideNav .item2 { display: none; } @media (max-width: 992px) { .ao-slideNav { right: -30%; width: 30%; } .ao-navMask { width: 70%; } } @media (max-width: 768px) { .ao-slideNav { right: -50%; width: 50%; } .ao-navMask { width: 50%; } } /* lignhtBox */ #lignhtBoxrap { 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 */ /*footer*/ #footer { margin-top: 100px; } #footer_menu-m { display: none; } #footer_menu { background-color: #0397df; height: 55px; line-height: 55px; color: #fff; } #footer_menu a { display: table-cell; width: 1%; min-width: 6em; height: 100%; text-align: center; font-size: 16px; padding: 0 1em; box-sizing: border-box; } #footer_menu a:hover { background-color: #0077ea; color: #fff; } #footer_menu a.ban:hover { background-color: #a7a7a7 !important; } #copyright { padding-top: 40px; padding-bottom: 35px; } #copyright .flogo{ float: left; width: 270px; margin-right: 80px; } #copyright .flogo img{ margin: 0 auto; max-width: 100%; } #copyright .flogo .text{ display: block; padding-left: 20px; } #copyright .flogo .text b{ display: block; } #copyright .fContact { float: left; width: 600px; font-size: 15px; line-height: 2; } .fCode { float: right; color: #a1a1a1; } .fCode span{ display: inline-block; text-align: center; } .fCode span img { width: 120px; display: block; } .footer_line { border: 1px solid #ededed; height: 40px; line-height: 40px; } .footer_line .fOther{ font-size: 12px; color: #a1a1a1; text-align: center; } .footer_line .fOther .r { float: right; } .footer_line .fOther .friendsLinks { float: left; } /*footer end*/ /*友情链接*/ .friendsLinks { margin-left: 10px; } .friendsLinks small { font-size: 1em; } .friendsLinks a{ margin-right: 5px; } /*@media (max-width: 768px) { .friendsLinks { display: block; margin-left: 0; margin-top: 15px; } }*/ /*模块间间隔*/ .marginTop { margin-top: 70px; } /*首页title*/ .index-title { text-align: center; color: #323232; margin-bottom: 47px; } .index-title .ch{ font-size: 36px; display: block; } .index-title .ch:after{ content: ""; display: block; width: 2em; height: 2px; background-color: #008ee0; margin: 5px auto; } .index-title .en{ font-size: 16px; text-transform:uppercase; color: #989898; } /*公司介绍*/ .ab2 { background-color: #fff; width: 1400px; max-width: 100%; margin: 0 auto; padding: 30px 0; } .about { background: #f2f2f2 url("../Images/about-bg.jpg") no-repeat center center / cover; padding: 75px 0 75px 0; } .about .cont .l{ float: left; width: 427px; margin-right: 38px; } .about .cont .r { overflow: hidden; } .about .cont .l .border { width: 100%; height: 395px; box-sizing: border-box; position: relative; } .about .cont .l .border .img { width: 100%; height: 100%; background: url("../Images/about-l-img.jpg?v=2") no-repeat center center / cover; } .about .companyName { font-size: 30px; color: #0497e0; line-height: 1; margin-bottom: 40px; } .about .companyProfile { font-size: 16px; color: #666666; line-height: 2em; margin-bottom: 55px; height: 12em; overflow: hidden; position: relative; } .about .companyProfile .more { position: absolute; right: 0; bottom: 0; color: red; } .about .aboutAlbum .btn li { background-color: #fff; font-size: 16px; color: #666666; text-align: center; line-height: 1.2em; height: 2.4em; width: 2.4em; padding: 20px; border-radius: 8px; margin-right: 15px; float: left; } .about .aboutAlbum .btn li.on{ background-color: #0497e0; color: #fff; } .about .albumList { height: 200px; position: relative; margin-top: 50px; } .about .albumList ul { width: 100%; position: absolute; top: 0; left: 0; } .about .albumList ul li { float: left; width: 25%; padding-right: 15px; box-sizing: border-box; } .about .albumList ul li .imgBox { width: 100%; padding-bottom: 70%; background-color: #fff; } .about .albumList ul li .videoBox { background-color: #000; } .about .albumList ul li .videoBox a:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.4) url("../Images/play.png") no-repeat center center / 30% auto; } /*案例*/ .case .type{ float: right; width: 200px; margin-left: 15px; } .case .imgList { overflow: hidden; } .case .type .typeTop{ background-color: #0497e0; color: #fff; text-align: center; padding: 36px 0 46px; } .case .type .typeTop .typeTopTitle .ch{ font-size: 30px; } .case .type .typeTop .typeTopTitle .en{ font-size: 14px; } .case .type .typeTop .more { display: block; width: 134px; height: 46px; text-align: center; line-height: 46px; border: 1px solid #fff; margin: 40px auto 0; color: #fff; } .case .type .typeList { margin-top: 15px; } .case .type .typeList a{ display:block; box-sizing: border-box; width: 100%; height: 68px; line-height: 66px; text-align: center; border-top-width: 0px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-color: #999999; border-style: solid; } .case .type .typeList a.on { background-color: #0497e0; color: #fff; border-color: #0497e0; } .case .type .typeList a:first-child { border-top-width: 1px; } .case .imgList li .border { width: 100%; } .case .imgList li.big { width: 75%; float: right; } .case .imgList li.small { width: 25%; box-sizing: border-box; padding-right: 15px; padding-bottom: 18px; } .case .imgList li.small:last-of-type { padding-bottom: 0; } .case .imgList li .imgBox { padding-bottom: 80%; overflow: hidden; } .case .imgList li .imgBox span { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: rgba(0,0,0,.6); color: #fff; font-size: 15px; box-sizing: border-box; padding: 0 5px; } .case .imgList { position: relative; padding-bottom: 50%; } .case .imgList ul { position: absolute; left: 0; top: 0; width: 100%; } .about2 { overflow: hidden; width: 100%; } .about2 .aCont { float: left; width: 50%; padding: 5% 7%; box-sizing: border-box; } .about2 .companyName { font-size: 30px; color: #0497e0; line-height: 1; margin-bottom: 40px; } .about2 .companyProfile { font-size: 16px; color: #666666; line-height: 2em; margin-bottom: 30px; height: 12em; overflow: hidden; } .about2 .aBg { position: absolute; width: 1000px; height: 100%; left: 50%; top: 0; background: url("../Images/aBg.jpg") no-repeat 0 0 / auto 100%; } .about2 .aMore { display: block; width: 125px; height: 30px; line-height: 30px; background-color: #0397df; color: #fff; text-align: center; } .aImg { margin-top: 45px; } .aImg li{ width: 48%; float: left; } .aImg li:nth-child(2n) { float: right; } .aImg li .imgBox { padding-bottom: 70%; } .aImg li .videoBox { background-color: #000; } .aImg li a:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.4) url("../Images/play.png") no-repeat center center / 30% auto; } .about2 .cBox { position: relative; } .about2 .cWrap { overflow: hidden; background-color: #f2f2f2; }