*{ margin:0px; padding:0px; list-style: none; text-decoration: none; } body{ font-family: "微软雅黑"; overflow-x: hidden; font-size: 16px; min-width: 1200px; } .w12{ width: 1200px; margin:0px auto; } .fl{ float:left; } .fr{ float:right; } input{ outline: none; border: none; } .clearfix:after{ content: ""; display: block; clear: both; } img{ border: none; display: block; } a{ display: block; } /*头部*/ header{ width: 100%; position: relative; } header::before{ content: ""; display: block; width: 100%; height: 5px; background: #014991; } header::after{ content: ""; display: block; position: absolute; top:5px; left:0px; width: 100%; height: 200px; background: url(../img/nav_bg.png) repeat-x; z-index: 2; } header>.w12{ position: absolute; top:5px; left:0; right:0; bottom:0; z-index: 3; height: 103px; } header .header1{ width: 100%; display: flex; margin-bottom:10px; } header .logo{ margin:16px 0px; } .header-right{ margin-left: auto; display: flex; align-items: center; } .header-link{ height: 30px; line-height: 30px; } .header-link ul{ text-align: right; height: 30px; } .header-link ul li{ display: inline-block; } .header-link ul li a{ color: rgba(255,255,255,.8); font-size: 14px; position:relative; padding-right: 10px; padding-left:8px; } .header-link ul li a::after{ content: ""; display:inline-block; width: 1px; height: 15px; background: rgba(255,255,255,.8); position:absolute; right:0px; top:7.5px; } /*搜索*/ .search{width:30px;height:30px;position:relative;z-index:20;margin-left:2px;} .search .btn{position:absolute;left:0;top:0;right:0;bottom:0;z-index:5;} .search .btn input{width:100%;height:30px;cursor:pointer;position:absolute;z-index:1;left:0;right:auto;top:0;bottom:auto; background: transparent;border: 0} .search .btn span{font-size: 20px;margin:8px 0 0 8px;color:#ffffff;} .search .btn:hover{opacity:1} .search .input{position:absolute;z-index:1;left:auto;right:0;top:0;bottom:auto;height:30px;width:20px; background:#fff;opacity:0;visibility:hidden;transition: .3s} .search .input input{width:calc( 100% - 24px );height:30px;padding:0 12px;border: 0;color: #555; display: block;} .search:hover .btn span{color:#014991;} .search:hover .input{width:260px;opacity:1;visibility:visible} /*导航*/ .navlist>li{ position: relative; width: 105px; line-height: 30px; float: left; text-align: center; } .navlist li h3{ font-size: 18px; } .navlist li h3 a{ color: #ffffff; font-weight: normal; } .navlist .sub{ display: none; width: 130px; position: absolute; top:29px; left:0px; z-index: 2; padding-top:4px; } .sub li{ height: 40px; text-align: center; line-height: 40px; background: #f3f3f3; } .sub li a{ font-size: 14px; color: #434343; } .navlist>li.on>h3>a,.navlist>li:hover>h3>a{ color: #014991; background: #ffffff; } .sub li:hover{ background: #014991; } .sub li:hover a{ color: #ffffff; } /*底部*/ .footer{ width: 100%; padding:40px 0; background: #014991; } .footer .w12{ display: flex; } .footer-left{ width: 985px; } .footer-right{ width: 178px; background: #2f6dac; margin-left: auto; padding-bottom:10px; } .links{ display: flex; padding-bottom:16px; border-bottom: 1px solid #2f6dac; } .links h3{ font-size: 16px; color: #ffffff; font-weight: normal; line-height: 40px; } .links ul{ width: 880px; margin-left: auto; } .links ul li{ font-size: 16px; float: left; margin-right: 30px; line-height: 40px; } .links ul li a{ color: #ffffff; } .copyright{ padding-top:20px; } .copyright p{ color: #ffffff; font-size: 14px; line-height: 35px; } .footer-right img{ margin:24px auto 10px; width:116px; height:116px; } .footer-right p{ text-align: center; color: #ffffff; font-size: 16px; } /*swiper滚动图*/ .swiper-container{ width: 100%; height: 100%; } .swiper-slide{ text-align: center; font-size: .18rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } /*IE9升级提示*/ #browser-modal{width:100%;height:100%;top:0;left:0;text-align:center;color:#303233;position:fixed;z-index:9990009;} #browser-modal .browser-modal-cover{position:fixed;left:0;top:0;height:100%;width:100%;background-color:#111;opacity:.9;z-index:-1} #browser-modal .browser-content{width:700px;margin-top:120px;margin-left:auto;margin-right:auto;padding-bottom:80px;padding-top:50px;background-color:#fff;border-radius:5px} #browser-modal .browser-content .browser-dpc-logo img{height:42px;margin:45px auto 40px} #browser-modal .browser-content .browser-text-title{text-transform:uppercase;font-size:24px} #browser-modal .browser-content .browser-text-desc{margin-top:30px;margin-bottom:20px;font-size:14px} #browser-modal .browser-content .browser-list{width:600px;margin:20px auto;height:130px} #browser-modal .browser-content .browser-item{float:left;width:150px;padding-top:20px;padding-bottom:20px;margin-left:auto;margin-right:auto} #browser-modal .browser-content .browser-item .iconfont{width:100px;height:100px;margin:0 auto;font-size:80px;line-height:80px;margin-bottom:10px;} #browser-modal .browser-content .browser-item .iconchrome{background: url(../img/bro.png) no-repeat 0 0} #browser-modal .browser-content .browser-item .iconfirefox{background: url(../img/bro.png) no-repeat 0 -100px} #browser-modal .browser-content .browser-item .iconopera{background: url(../img/bro.png) no-repeat 0 -200px} #browser-modal .browser-content .browser-item .iconEdge{background: url(../img/bro.png) no-repeat 0 -300px} #browser-modal .browser-content .browser-item a{cursor:pointer;display:block} #browser-modal .browser-content .browser-item a img{display:block;margin:0 auto;max-width:100px;width:100px;height:100px} #browser-modal .browser-content .browser-item a h4{text-align:center;margin-top:20px;font-size:18px;font-weight:700}