.wrap { width: 1120px; /* overflow:hidden; */ margin: auto; padding: 0; } .main-top { height: 30px; line-height: 30px; overflow: hidden; background-color: #f2f2f2; } .main-top p { font-size: 14px; color: #010101; display: inline-block; font-family: PingFang, 'Microsoft YaHei'; } .main-top .btns { float: right; font-size: 0; letter-spacing: -3px; } .main-top .btns a { display: inline-block; font-size: 12px; color: #000000; margin-right: 18px; vertical-align: top; letter-spacing: 0; } .main-top .btns a:hover { color: #333333; } .main-top .btns a .icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-top: -3px; margin-right: 5px; } .main-top .btns .icon-wechat { background: url("../../image/common/icon-wechat.png") no-repeat center center; } .main-top .btns .icon-collect { background: url("../../image/common/icon-collect.png") no-repeat center center; } .main-top .btns .icon-home { background: url("../../image/common/icon-home.png") no-repeat center center; } .main-head { height: 116px; padding: 21px 0; } .main-head .logo, .main-head .info, .main-head .call { vertical-align: top; display: inline-block; height: 74px; } .main-head .logo { width: 236px; overflow: hidden; } .main-head .logo img { display: inline-block; vertical-align: top; width: 100%; min-height: 100%; } .main-head .info { margin: 12px 0; height: 50px; padding-left: 16px; border-left: 2px solid #0e5b9f; } .main-head .info .title { font-family: PingFang, 'Microsoft YaHei'; font-size: 26px; font-weight: bold; color: #0e5b9f; } .main-head .info .title span { color: #ff7f28; } .main-head .info p { color: #0e5b9f; } .main-head .call { position: relative; padding-left: 50px; padding-right: 10px; float: right; } .main-head .call .icon { position: absolute; top: 50%; margin-top: -22px; left: 0; width: 41px; height: 44px; background: url("../../image/common/main-phone.png") no-repeat center center; background-size: 41px; } .main-head .call .phone { font-size: 28px; letter-spacing: 1px; line-height: 37px; color: #1070c6; font-weight: bold; font-style: italic; } .main-nav { position: relative; z-index: 12; height: 51px; border-top: 1px solid #aac6dd; border-bottom: 4px solid #002747; background-color: #004782; } .main-nav .nav-container { font-size: 0; letter-spacing: -3px; } .main-nav .nav-container .nav-item { height: 50px; position: relative; font-size: 16px; letter-spacing: 0; display: inline-block; background-color: #005091; border-bottom: 4px solid #002747; transition: background .25s ease, border .25s ease; -webkit-transition: background .25s ease, border .25s ease; } /* 杩欐槸楂樹寒鏁堟灉.鍖呮嫭浜唄over */ .main-nav .nav-container .nav-item:hover, .main-nav .nav-container .nav-item.active { background-color: #f1721a; border-bottom: 4px solid #7b411d; } /* 濡傛灉涓嶆兂瑕乭over鏁堟灉:鎶婁笂闈㈢殑娉ㄩ噴鎺? 浣跨敤涓嬮潰鐨勬牱寮 */ /* .main-nav .nav-container .nav-item.active { background-color:#f1721a; border-bottom:4px solid #7b411d; } */ .main-nav .nav-container .nav-item:after, .main-nav .nav-container .nav-item:first-child:before { position: absolute; right: 0; top: 0; content: ''; display: inline-block; vertical-align: top; width: 0; height: 50px; border-right: 1px solid #002240; border-left: 1px solid #005fad; } .main-nav .nav-container .nav-item:first-child:before { right: auto; left: -1px; } .main-nav .nav-container a { line-height: 50px; display: inline-block; padding: 0 20px; /*min-width: 80px;*/ color: #ffffff; font-family: PingFang, 'Microsoft YaHei'; } .main-nav .nav-container .nav-child { display: none; position: absolute; top: 50px; left: 0; min-width: 150px; } .main-nav .nav-container .nav-item:hover .nav-child { display: block; } .main-nav .nav-container .nav-child>a { background: #0454a1; line-height: 39px; display: block; border-bottom:1px solid #0462ba; } .main-nav .nav-container .nav-child>a:hover { background-color: #0462ba; } .main-site { height: 50px; padding: 12px 0; } .main-site .site { line-height: 26px; } .main-site .site p { font-size: 12px; display: inline-block; max-width: 777px; } .main-site .site p, .main-site .site p a { height: 26px; line-height: 26px; font-size: 12px; color: #333333; } .main-site .site p a:before { content: ''; display: inline-block; height: 12px; vertical-align: middle; margin: 0 3px; margin-top: -3px; border-left: 2px solid #9a9a9a; } .main-site .site p a:first-child:before { content: none; } .main-site .site p>span.tag { height: 26px; font-size: 14px; color: #000000; } .main-site .site p>span { display: inline-block; vertical-align: middle; } .main-site .search { position: relative; height: 26px; line-height: 24px; float: right; border-radius: 3px; border: 1px solid #cccccc; overflow: hidden; padding-right: 50px; } .main-site .search input { height: 24px; vertical-align: top; width: 270px; padding-left: 10px; font-size: 12px; color: #333333; } .main-site .search .btn { position: absolute; right: 0; top: 0; vertical-align: top; display: inline-block; padding: 0; width: 50px; border: none; height: 24px; background: url("../../image/common/icon-search.png") no-repeat center center; background-color: #cccccc; background-size: 21px; border-radius: 0; } .main-site .search .btn:active { background-color: #999; } .main-footer { position: relative; width: 100%; /* height:410px; */ padding-top: 65px; padding-bottom: 19px; margin-top: -25px; overflow: hidden; } .main-footer .footer-backdrop { position: absolute; /* top:10px; */ top: 25px; bottom: 0; left: 0; width: 100%; /* height:385px; */ /* height:100%; */ display: block; background: url("../../image/common/footer-background.jpg") repeat; z-index: 1; } .main-footer .footer-backdrop .top, .main-footer .footer-backdrop .bottom { content: ''; display: inline-block; position: absolute; /*left: 50%; margin-left: -960px;*/ width: 1920px; } .main-footer .footer-backdrop .top { top: -24px; height: 41px; } .main-footer .footer-backdrop .bottom { bottom: 0; height: 19px; } .main-footer .footer-container { position: relative; z-index: 2; } .main-footer .footer-nav {} .main-footer .footer-nav>ul { font-size: 0; letter-spacing: -3px; } .main-footer .footer-nav .nav-item { vertical-align: top; display: inline-block; font-size: 14px; letter-spacing: 0; width: 219px; text-align: center; } .main-footer .footer-nav .list { text-align: left; display: inline-block; } .main-footer .footer-nav .list>p, .main-footer .footer-nav .list>a { display: block; } .main-footer .footer-nav .list .tit { line-height: 36px; font-size: 16px; color: #0e5b9f; } .main-footer .footer-nav .list>a { line-height: 24px; font-size: 12px; color: #ffffff; transition: color .25s ease; -webkit-transition: color .25s ease; } .main-footer .footer-nav .list>a:hover { color: #ff7f28; } .main-footer .lump-bottom { padding-top: 34px; width: 910px; margin: auto; } .main-footer .lump-bottom .view-img { display: inline-block; vertical-align: top; width: 232px; height: 74px; margin-top: 20px; } .main-footer .lump-bottom .view-img img { display: inline-block; width: 100%; height: 100%; vertical-align: top; } .main-footer .lump-bottom .des { margin-left: 125px; display: inline-block; } .main-footer .lump-bottom .des p { line-height: 24px; font-size: 12px; color: #ffffff; } .main-footer .lump-bottom .qr-code { float: right; width: 95px; height: 92px; } .main-footer .lump-bottom .qr-code img { display: inline-block; vertical-align: top; width: 100%; height: 100%; } .to-top { position: fixed; z-index: 99; /* top: 600px; */ /* right:6px; */ right: 50%; bottom:20%; margin-right: -585px; } .main-broadside { position: fixed; z-index: 99; width: 120px; /* top: 250px; */ bottom:calc(20% + 88px); /* right:-120px; */ right:5px; /* right: 50%; */ /* margin-right: -740px; */ border: 4px solid #0e5b9f; border-radius: 5px; /* overflow: hidden; */ background-color: #fff; transition:all .5s ease; transition-delay: .5s; } .main-broadside .fixed { /* content:'鍦ㄧ嚎鍜ㄨ'; */ display:inline-block; width:120px; position:absolute; left:-120px; transition-delay: .5s; transition:all .5s ease; height:44px; line-height:44px; top:0; text-align:center; background-color:#005499; color:#fff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; cursor: pointer; } .main-broadside .fixed:hover { background-color:#ab0c00; } .main-broadside:hover { right:6px; } .main-broadside:hover .fixed { /* left:120px; */ } .main-broadside .view-img { position:relative; display: inline-block; width: 100%; height: 58px; padding: 12px 6px; overflow: hidden; /* margin-left:-116px; */ background-color:#fff; } .main-broadside .view-img img { width: 100%; height: 100%; } .main-broadside .btn-list { padding: 0 2px; } .main-broadside .btn-list>a { display: inline-block; width: 100%; line-height: 25px; height: 30px; margin-bottom: 10px; color: #fff; font-size: 12px; background: url("../../image/common/broadside-btn.png") no-repeat center center; background-size: 100%; text-align: center; margin-bottom: 5px; } .main-broadside .btns { padding: 0 3px; } .main-broadside .btns>a { display: inline-block; width: 100%; /* border:1px solid #fff; */ box-shadow: 0px 3px 3px #c0cdd8; background-color: #fff; text-align: center; line-height: 25px; height: 25px; margin-bottom: 10px; color: #fff; font-size: 12px; border-radius: 3px; background: linear-gradient(90deg, #00335d, #005499, #00335d); background: -moz-linear-gradient(left, #00335d, #005499, #00335d); background: -o-linear-gradient(left, #00335d, #005499, #00335d); } .main-broadside .des { padding: 10px 4px; } .main-broadside .des p { padding: 4px 0; font-size: 12px; color: #000000; line-height: 16px; font-weight: bold; } .main-broadside .des p:first-child { padding-left: 4px; padding-right: 4px; } .main-broadside .des .call { color: #02559a; text-align: center; } .main-broadside .des .call span { display: block; } .main-broadside .des .call:before { content: ''; display: inline-block; width: 100%; height: 8px; background: url("../../image/common/broadside-partition.png") no-repeat center center; background-size: 100%; } .main-body { /* padding-bottom:32px; */ } .main-body .backdrop { background: #005499; background: linear-gradient(90deg, #003764, #005499); background: -webkit-linear-gradient(90deg, #003764, #005499); background: -moz-linear-gradient(90deg, #003764, #005499); background: -o-linear-gradient(90deg, #003764, #005499); } .main-body .backdrop-f { background: #f8741b; background: linear-gradient(90deg, #fb7920, #e65c00); background: -webkit-linear-gradient(left, #fb7920, #e65c00); background: -moz-linear-gradient(left, #fb7920, #e65c00); background: -o-linear-gradient(left, #fb7920, #e65c00); } .main-body .banner { width: 100%; height: 500px; overflow: hidden; } /* 涔﹀啓鏀寔superslide鎻掍欢鐨勬牱寮 */ .main-body .banner .slideBox { position:relative; height:100%; } .main-body .banner .hd { position:absolute; bottom:20px; left:0; width:100%; height:20px; text-align:center; z-index:2; } .main-body .banner .hd ul { display:inline-block; font-size:0; letter-spacing: -3px; } .main-body .banner .hd ul li { display:inline-block; font-size:12px; letter-spacing: 0; color:#fff; background-color:#333; border-radius:50%; width:24px; margin:0 5px; height:24px; line-height:24px; text-align:center; cursor: pointer; } .main-body .banner .hd ul li.on { background-color:#f1721a; } .main-body .banner .bd { position:relative; height: 100%; } .main-body .banner .bd li { width:100%; height:100%; position:absolute; top:0; left:0; } .main-body .banner img { display: inline-block; vertical-align: top; width: 1920px; height: 500px; position: relative; /*left: 50%; margin-left: -960px;*/ } .main-body .banner .prev, .main-body .banner .next { position:absolute; top:50%; width:30px; height:58px; margin-top:-29px; } .main-body .banner .prev { background: url(../../image/home/swiper-prev.png) no-repeat center center; left:50px; } .main-body .banner .next { right:50px; background: url(../../image/home/swiper-next.png) no-repeat center center; }