@charset "utf-8"; /* CSS Document */ @font-face { src: url(SourceHanSansCN-Regular.otf); font-family: "myfont"; } @font-face { src: url(BellMT.woff2); font-family: "BellMT"; } @font-face { font-family: 'iconfont'; src: url(iconfont.eot); src: url(iconfont.eot?#iefix) format('embedded-opentype'), url(iconfont.woff) format('woff'), url(iconfont.ttf) format('truetype'), url(iconfont.svg#iconfont) format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } * { padding: 0; margin: 0; border: none; outline: none; color: #222; list-style: none; font-family: "myfont", Calibri, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;} html { font-size: 62%; } article, aside, dialog, figure, footer, header, hgroup, menu, nav, dir, section { margin: 0; padding: 0; display: block; } .clear { clear: both; } a { text-decoration: none; } .w_all { width: 79.5%; margin: auto; } .thide { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /*index*/ html, body { width: 100%; position: relative;} .nav_box { width: 100%; z-index: 999; position: fixed; left: 0; top: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; border-bottom: 1px solid rgba(10,11,13,0.1); box-shadow: 0 0 5px rgba(0,0,0,0.3); } .nav { margin: auto; position: relative; background: rgba(255,255,255,0.96) } .nav b { position: absolute; left: 0; top: 0; width: 100%; height: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .logo img { display: block; height: 52px; padding: 10px 30px; position: relative; z-index: 9; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .nav_list { position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 0; width: 56%; } .nav_list ul li { float: left; width: 12.5%; color: #333; text-align: center; cursor: pointer; position: relative; -webkit-transition: all 0.4s; transition: all 0.4s; } .nav_list ul li h2 { font-size: 16px; line-height: 72px; color: #0a0b0d; font-weight: bold; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav_list ul li.on h2 { color: #004795; } .nav_list ul li i { font-size: 16px; line-height: 72px; color: #004795; font-weight: bold; position: absolute; width: 100%; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20px; opacity: 0; font-style: normal; } .nav_list ul li:hover h2 { opacity: 0; } .nav_list ul li:hover i { opacity: 1; top: 0; -webkit-transition: all 0.4s; transition: all 0.4s; } /*.nav_list ul li.active h2{ opacity:1; } .nav_list ul li.active i{ opacity:1; top:0; }*/ .nav_list ul li:before { content: ""; width: 100%; height: 4px; background: #fff; background: -webkit-linear-gradient(left, #004795, #018267, #009441); background: -o-linear-gradient(right, #004795, #018267, #009441); background: -moz-linear-gradient(right, #004795, #018267, #009441); background: linear-gradient(to right, #004795, #018267, #009441); position: absolute; left: 0; bottom: 0; opacity: 0; } .nav_list ul li:hover:before { opacity: 1; } /*.nav_list ul li.active h2{ color:#ec6a0f !important; }*/ .header_others { position: absolute; right: 0; top: 0px; } .header_others .load { float: left; border-right: 1px solid rgba(10,11,13,0.1); padding: 25px 26px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .header_others .load .ll { line-height: 0; margin-left: 20px; float: left; position: relative; overflow: hidden; } .header_others .load .ll img { display: block; width: 22px; } .header_others .load .ll .img2 { display: none; } .header_others .load .ll:hover .img1 { display: none } .header_others .load .ll:hover .img2 { display: block; } .header_others .load .ll .img3 { opacity: 0; position: absolute; width: 130px; top: 40px; display: block; left: 50%; margin-left: -60px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .header_others .load .ll:hover { overflow: inherit; } .header_others .load .ll:hover .img3 { opacity: 1; top: 30px; } .header_others .language { float: left; font-size: 16px; padding: 26px; border-right: 1px solid rgba(10,11,13,0.1); color: #0a0b0d; font-weight: bold; text-transform: uppercase; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .nav_list2 { position: absolute; left: 0%; top: 72px; width: 100%; background: rgba(0,71,149,0.9); padding: 2% 0; display: none; z-index: -1; } .nav_list2 .sbox { width: 56%; margin: auto; } .nav_list2 dl { float: left; width: 9.5%; padding-left: 3%; position: relative; } .nav_list2 dl:before { content: ""; border-right: 1px dotted rgba(255,255,255,0.1); position: absolute; right: 0%; top: 0; height: 170px; } .nav_list2 dl:last-of-type { margin-right: 0; } .nav_list2 dl dd { font-size: 14px; color: rgba(255,255,255,0.8); margin: 5px 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: pointer; } .nav_list2 dl dd:hover { color: #fff; margin-left: 5px; text-decoration: underline; } .navBtn { padding: 22px 26px; float: left; cursor: pointer; background: #004795; } .navBtn span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px auto; } .nav_btn_active { padding: 30px 26px; } .nav_btn_active span:nth-of-type(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 5px; } .nav_btn_active span:nth-of-type(2) { opacity: 0; } .nav_btn_active span:nth-of-type(3) { margin-top: -58%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .banner { position: relative; width: 100%; height: 100%; overflow: hidden; } .banner ul { width: 100%; height: 100%; } .banner ul li { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 1s linear; transition: all 1s linear; } .banner ul li:first-of-type { opacity: 1; } .banner ul li.turn_active { -webkit-transform: scale(1.06); transform: scale(1.06); } .banner ul li b { position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .banner .txt { display: block; position: absolute; left: 50%; top: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -100%); } .banner .txt h2 { color: #fff; font-size:56px; text-shadow: 0 0 3px rgba(0,0,0,0.8); } .banner .txt span { width: 100%; background: #581b1a; height: 0px; margin: 30px 0; display: block; position: relative; } .banner .txt span strong { width: 0; position: absolute; left: 0; top: 0; height: 0px; background: -webkit-linear-gradient(left, #581b1a, #de4019, #f8c301); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, #581b1a, #de4019, #f8c301); opacity: 0; } .banner .txt p { color: #004795; font-size: 24px; letter-spacing: 2px; color: #f8c301; text-shadow: 0 0 5px rgba(0,0,0,0.2); } /*.banner li:nth-of-type(2) .txt h2{ color:#004795; } .banner li:nth-of-type(3) .txt h2{ color:#004795; }*/ .banner li:nth-of-type(2) .txt p { width: 910px; color: #f8c301; } .banner li:nth-of-type(3) .txt p { font-size: 23px; letter-spacing: 1px; width: 1000px; color: #f8c301; } .banner .scroll img { position: absolute; left: 50%; bottom: 0%; width: 80px; margin-left: -40px; cursor: pointer; } .banner dl { position: absolute; right: 1.5%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .banner dl dd { width: 16px; height: 16px; border: solid 1px transparent; margin: 10px 0; position: relative; cursor: pointer; border-radius: 50%; } .banner dl dd:after { content: ""; display: block; width: 8px; height: 8px; background: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; } .banner dl dd.active { border: solid 1px rgba(255,255,255,0.5); } .banner dl dd.active:after { width: 6px; height: 6px; } .index_bar1 .top { background: #eee; padding-bottom: 7%; } .index_title { padding: 3% 0 2%; text-align: center; } .index_title h2 { font-size: 3rem; font-weight: bold; color: #3E3C3D; } .index_title h1 { font-size: 3rem; font-weight: bold; color: #3E3C3D; } .index_bar1 .top p { width: 50%; margin: auto; text-align: center; color: #0a0b0d; font-size: 14px; margin-bottom: 30px; } .index_title b { margin: auto; width: 1px; height: 40px; display: block; margin-top: 10px; background: #999; } .index_bar1 ul { margin-top: -6%; } .index_bar1 ul li { background: #fff;width: 32%; margin-right: 2%; float: left; cursor: pointer; position: relative; overflow: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;box-shadow: 0 1px 5px rgba(0,0,0,0.1); } .index_bar1 ul li:nth-of-type(3n) { margin-right: 0; } .pro { display: block; position: relative; } .index_bar1 ul li b img { width: 40%; display: block; margin: auto; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar1 ul p { font-size: 36px; font-weight: bold; font-weight: bold; color: #004795; text-align: center; margin: 20px auto 0; } .index_bar1 ul li h2 { position: absolute; width: 100%; left: 0; top: 50%; z-index: 7; font-size: 36px; margin-top: -30px; text-align: center; font-weight: bold; color: #FFF; text-shadow: 5px 2px 6px #000; } .img { display: block; position: relative; overflow: hidden; } .subtxt { display: block; position: relative; z-index: 1; padding: 20px; background: #F4F4F4; overflow: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; min-height:90px; } .subtxt a { float: left; width: 50%; font-size: 16px; height: 30px; line-height: 29px; color: #333; text-align: left; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar1 li:hover .subtxt { background: #33b5ed; } .index_bar1 li:hover .subtxt a { color: #fff; } .index_bar1 li:hover h2 { opacity: 0; } .index_bar1 ul span { display: block; text-align: center; font-size: 13px; margin-top: 8px; letter-spacing: 1px; display: none; } .index_bar1 .img img { width: 100%; display: block; opacity: 1; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } .index_bar1 li:hover .img img { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } .index_bar1 .onebox { background: rgba(60,138,177,0.7); width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 10; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar1 li:hover .onebox { opacity: 1; } .index_bar1 .onebox .tx { width: 90%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .index_bar1 .onebox .tx img { width: 30%; } .index_bar1 .onebox .tx p { color: #fff; } .index_bar1 .onebox .tx span { color: rgba(255,255,255,0.8); display: block; } .index_more { width: 200px; margin: 12% auto 0; border-bottom: 1px solid rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.5); position: relative; cursor: pointer; box-sizing: border-box; } .index_more:before { content: ""; width: 100%; height: 0; position: absolute; left: 0; background: #004795; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_more:hover { border-bottom: 1px solid #004795; border-top: 1px solid #004795; } .index_more:hover:before { height: 100%; opacity: 1; } .index_more h3 { color: #fff; position: relative; font-size: 13px; z-index: 2; padding: 10px 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_more:hover h3 { color: #fff; } .index_bar1s .box { width: 100%; overflow: hidden; position: relative; } .index_bar1s ul li { float: left; width: 100%; position: relative; } .index_bar1s ul li img { display: block; width: 100%; } .index_bar1s ul li .txt { width: 90%; background: rgba(0,71,149,0.8); opacity: 0; text-align: center; position: absolute; left: 0%; bottom: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; text-align: center; padding: 8px 5%; } .index_bar1s ul li:hover .txt { opacity: 1; bottom: 0; } .index_bar1s ul li .txt:before { content: ""; position: absolute; left: 7%; top: 10%; width: 86%; height: 80%; border: 1px solid rgba(248,195,1,0.2); display: none; } .index_bar1s ul li .txt span { color: #fff; font-size: 18px; } .index_bar1s ul li .txt strong { font-size: 15px; opacity: 0.8; color: #fff; position: relative; font-weight: normal; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } .index_bar1s ul li .txt span strong:before { content: ""; position: absolute; left: 10px; top: 7px; width: 0px; background: #fff; height: 1px; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; opacity: 0; } .index_bar1s ul li:hover .txt span strong { padding-left: 50px; } .index_bar1s ul li:hover .txt span strong:before { opacity: 1; width: 30px; } .index_bar1s .btn .ll { position: absolute; top: 50%; left: 20px; cursor: pointer; width: 50px; height: 50px; margin-top: -25px; background: rgba(255,255,255,0); border-radius: 50%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar1s .btn .ll i { font-size: 24px; text-align: center; line-height: 50px; color: #fff; display: block; opacity: 0.7; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar1s .btn .right { left: inherit; right: 20px; } .index_bar1s .btn .left i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .index_bar1s .btn .ll:hover { background: rgba(255,255,255,0.5); } .index_bar1s .btn .ll:hover i { opacity: 1; color: #de4019; } .index_bar2 { width: 100%; position: relative; overflow: hidden; } .index_bar2 .left { width: 60%; position: relative; position: absolute; left: 0; top: 0; height: 100%; } .index_bar2 .left img { display: block; width: 100%; } .index_bar2 .left b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.06); } .index_bar2 .left .v_btn { display: block; width: 68px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 8; } .index_bar2 .right { width: 40%; background: #eee; float: right; padding: 4% 0; } .index_bar2 .top { width: 80%; margin: auto; } .index_bar2 p { text-align: center; color: #0a0b0d; font-size: 14px; margin-top: 3%; } .index_more2 { border-bottom: 1px solid #004795; border-top: 1px solid #004795; } .index_more2 h3 { color: #004795; text-align: center; } .index_more h3 i { color: #004795; font-size: 20px; margin-left: 10px; } .index_more2:hover { border: 1px solid #004795; } .index_more2:hover h3 { color: #fff; } .index_more:hover h3 i { color: #fff; } .index_bar3 { margin-bottom: 4%; } .index_bar3 .box { position: relative; } .index_bar3 .left { width: 48%; cursor: pointer; position: absolute; left: 0; top: 0; height: 100%; } .index_bar3 .left b { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } .index_bar3 .left b:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.2); z-index: 4; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar3 .left:hover b:before { opacity: 1; } .index_bar3 .left .txt { width: 90%; position: absolute; left: 0; bottom: 0; padding: 2% 5%; background: rgba(12,13,15,0.7); z-index: 9; } .index_bar3 .txt span { font-size: 12px; color: #a0a0a0; } .index_bar3 .txt strong { font-size: 12px; color: #a0a0a0; padding-left: 15px; margin-left: 15px; position: relative; } .index_bar3 .txt strong:before { content: "|"; position: absolute; left: 0; top: -5px; font-size: 10px; color: #a0a0a0; } .index_bar3 .txt h2 { font-size: 16px; color: #333; margin-top: 8px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index_bar3 .left h2 { color: #fff; } .index_bar3 .left:hover h2 { color: #fff; } .index_bar3 ul li:hover h2 { color: #004795; } .index_bar3 .right { float: right; width: 48%; } .index_bar3 .right li { border-left: 3px solid #00a2e9; padding: 25px; background: #f6f6f6; margin-bottom: 15px; position: relative; cursor: pointer; } .index_bar3 .right li:before { content: ""; width: 100%; height: 0%; position: absolute; left: 0; top: 0; background: #eee; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar3 .right li:hover:before { height: 100%; } .index_bar3 .right .txt { margin-top: 0px; position: relative; z-index: 9; } .index_bar3 .index_more { width: 100%; border: 1px solid #004795; margin-top: 6%; } .index_bar3 .index_more h3 { color: #004795; text-align: center; } .index_bar3 .index_more:hover { border: 1px solid #004795; } .index_bar3 .index_more:hover h3 { color: #fff; } .index_bar4 { padding: 0 0 4% 0; } .index_bar4 .top { width: 100%; height: 160px; background: #f6f6f6; } .index_bar4 ul { margin-top: -80px; } .index_bar4 ul li { width: 25%; float: left; padding: 5%; border-left: 1px solid #eee; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; box-sizing: border-box; position: relative; cursor: pointer; } .index_bar4 ul li:last-of-type { border-left: 1px solid #eee; border-right: 1px solid #eee; } .index_bar4 ul li:before { content: ""; width: 90%; height: 100%; position: absolute; left: 0; top: 0; background: -webkit-linear-gradient(left, #004795, #0070bb, #00a2e9); background: -o-linear-gradient(right, #004795, #0070bb, #00a2e9); background: -moz-linear-gradient(right, #004795, #0070bb, #00a2e9); background: linear-gradient(to right, #004795, #0070bb, #00a2e9); opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .index_bar4 ul li:hover:before { opacity: 1; width: 100%; } .index_bar4 ul li b { position: relative; display: block; z-index: 2; height: 30px; overflow: hidden; } .index_bar4 ul li img { width: 30px; float: left; display: block; margin-right: 10px; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .index_bar4 ul li:hover img { -webkit-transform: translateY(-30px); transform: translateY(-30px); } .index_bar4 ul li h2 { font-size: 18px; font-weight: bold; color: #004795; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; float: left; margin-top: 2px; } .index_bar4 ul li .txt { position: relative; z-index: 2; } .index_bar4 ul li p { font-size: 13px; line-height: 20px; color: #333; margin-top: 20px; height: 40px; overflow: hidden; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .index_bar4 ul li:hover h2 { color: #fff; } .index_bar4 ul li:hover p { color: #fff; opacity: 0.9; } .footer_box { padding: 4% 0 3%; background: #004795; } .footers .logo2 img { display: block; margin: auto; height: 110px; } .footers { } .footers .bar2 { margin: 30px 0; display: flex; justify-content: center; align-items: center; } .footers .bar2 p { float: left; font-size: 15px; color: #fff; position: relative; padding: 5px 35px; } .footers .bar2 p:before { content: ""; width: 1px; height: 100%; background: rgba(255,255,255,0.6); position: absolute; right: 0; top: 0; } .footers .bar2 a:last-of-type p:before { display: none; } .footers .bar2 a:last-of-type p i { margin-right: 14px; } .footers .bar2 p i { font-size: 22px; color: #fff; float: left; display: block; margin-right: 10px; } .footers ul { display: flex; justify-content: center; align-items: center; } .footers ul li { float: left; font-size: 18px; color: rgba(255,255,255,0.8); padding: 0 20px; cursor: pointer; } .copy_right p { text-align: center; line-height: 20px; color: rgba(255,255,255,0.6); margin-top: 20px } .copy_right a { color: rgba(255,255,255,0.6); margin-left: 10px; } .copy_right span { display: block; line-height: 20px; color: rgba(255,255,255,0.6); } .all_back { width: 100%; padding: 5px 0; background: #00a2e9; position: relative; } .all_back img { display: block; margin: auto; width: 50px; position: relative; z-index: 6; } .all_back:before { content: ""; width: 100%; height: 0; background: #f90; position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; opacity: 0; } .all_back:hover:before { height: 100%; opacity: 1; } .banner_in { background-size: cover; width: 100%; padding-top:28%; position: relative; } .banner_in .index_title h2 { /* margin-top:20px; */ } .banner_in .index_title b { width: 40px; height: 1px; margin: auto; margin-top: 8px; display: block; } .b_box1 { position: absolute; left: 50%; bottom: -13%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .banner_in .index_title { padding: 0; } .banner_in ul { background: #fff; position: relative; padding: 30px 0; box-shadow: 0 0 3px rgba(0,0,0,0.1); display: flex; } .banner_in li { display: block; flex: 1; text-align: center; position: relative; border-left: 1px dotted #aaa; cursor: pointer; } .banner_in li:first-of-type { border: none; } .banner_in .more { position: absolute; right: 0; top: 0; /* padding:31px 60px; */ padding: 0px 60px 10px; text-align: center } .banner_in .more:before { width: 100%; content: ""; position: absolute; left: 0; top: 0; background: #004795; height: 100%; opacity: 1; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .banner_in .more:hover:before { height: 100%; opacity: 1; } .banner_in li h2 { font-size: 16px; color: #dd4b22; display: none; } .banner_in li h2 strong { font-size: 6rem; color: #dd4b22 } .banner_in p { position: relative; z-index: 2; margin: 15px 0; } .banner_in p a { font-size: 16px; font-weight: bold; } .banner_in p.on a { color: #004795; } .banner_in p a:hover { color: #004795; } .page_show { line-height: 180%; font-size: 1.4rem; padding: 0 0 20px 0; } .page_show img { max-width: 100%; } /*鍒嗛〉鐩稿叧*/ .pagelist ul { text-align: center; margin: 20px 0; } .pagelist li { display: inline-block; margin: 0 3px; } .pagelist li a { color: #666; display: inline-block; border: 1px solid #ddd; padding: 5px 10px; } .pagelist li a:hover { border-color: #004795; color: #004795; } .pagelist li.active a { border-color: #004795; color: #004795; } .banner_in .more i { line-height: 80px; font-size: 30px; color: #dd4b22; position: relative; z-index: 2; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .banner_in .more p { margin: 0; } .banner_in .more:hover i { font-size: 50px; } .about .bar2 { background: #f2f2f2; padding: 5% 0 4%; } .about .bar2 .box { position: relative; height: 100%; } .about .bar2 .left { position: absolute; left: 0; height: 100%; top: 0; width: 40%; } .about .bar2 .left:before { content: ""; position: absolute; right: -10px; top: -10px; background: #dd4b22; width: 84%; height: 80%; } .about .bar2 .left .img { background: url(../image/about2_1.jpg) no-repeat top right; background-size: cover; height: 100%; width: 100%; position: relative; z-index: 2; } .about .bar2 .txt { float: right; padding: 2% 5% 5%; width: 45%; } .about .bar2 .txt p { font-size: 14px; color: #333; margin: 10px 0; } .about .bar3 .box { position: relative; background: url(../image/about1_2.jpg) no-repeat center center; background-size: cover; height: 100%; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } .about .bar3 .box:before { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } .about .bar3 .box:hover { background-position: center 60%; } .about .bar3 .box:hover:before { opacity: 1; } .about .bar3 .box .ll { width: 100%; padding: 0% 0 12%; position: relative; z-index: 2; } .about .bar3 .box .txt { width: 33%; padding: 3% 10% 8%; } .about .bar3 .index_title h2 { margin-top: 20px; text-align: left; } .about .bar3 .index_title b { width: 40px; height: 1px; margin: 0; margin-top: 15px; display: block; } .about .bar3 h2 { margin: 5px 0 10px; background: #dd4b22; color: #fff; font-size: 16px; float: left; padding: 2px 5px; } .about .bar3 h3 { font-size: 15px; font-weight: bold; color: #dd4b22; } .about .bar3 p { font-size: 13px; color: #333; margin-top: 10px; line-height: 20px; } .about .bar3 .box .txt .more { font-size: 13px; color: #004795; margin-top: 2%; display: block; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .about .bar3 .box .txt i { margin-left: 6px; color: #004795; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; font-size: 16px; } .about .bar3 .box .ll:hover .txt .more { color: #dd4b22; } .about .bar3 .box .ll:hover .txt i { color: #dd4b22; opacity: 0; margin-left: 10px; } .about .bar4 { background: #f2f2f2; padding-bottom: 6%; } .about .bar4 dl { display: flex; justify-content: center; align-items: center; margin-bottom: 3%; } .about .bar4 dl dd { width: 130px; text-align: center; padding: 5px 0; position: relative; margin: 10px 20px 0; font-size: 18px; border: 1px solid #79311b; color: #79311b; font-weight: bold; cursor: pointer; } .about .bar4 dl dd:before { content: ""; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 50%; background: #79311b; margin-top: -2px; display: none; } .about .bar4 dl dd.active { border: 1px solid #dd4b22; color: #dd4b22; } .about .bar4 dl dd.active:before { background: #dd4b22; } .about .bar4 .left { width: 24%; float: left; margin: 3% 0 3% 10%; } .about .bar4 .txt { display: none; } .about .bar4 .txt:first-of-type { display: block; } .about .bar4 .txt span { display: block; font-size: 1.4rem; color: #333; font-weight: bold; margin-bottom: 5px; position: relative; padding-left: 10px; } .about .bar4 .txt span:before { content: ""; width: 3px; height: 3px; background: #666; border-radius: 50%; position: absolute; left: 0; top: 8px; } .about .bar4 .txt p { display: block; font-size: 1.3rem; line-height: 20px; } .about .bar4 .txt h2 { display: block; font-size: 2rem; color: #dd4b22; margin: 0 0 20px 0; font-style: normal; font-weight: bold; } .about .bar4 .index_more3 { margin: 50px 0 0; border: 1px solid #de4019; } .about .bar4 .big_box { position: relative; width: 64%; float: right; } .about .bar4 .bbox2 { width: 96%; overflow-x: hidden; position: relative; display: none; position: absolute; left: 0%; top: 0; padding: 1% 2%; } .about .bar4 .bbox2 ul li { float: left; width: 25%; } .about .bar4 .bbox2 ul li img { display: block; width: 100%; margin: auto; } .about .bar4 .bbox2:first-of-type li { padding: 2% 0 6%; } .about .bar4 .bbox2 ul li p { text-align: center; font-size: 1.6rem; color: #333; margin-top: 20px; } .about .bar4 .bbox2 ul li b { position: relative; display: block; width: 75%; margin: auto; } .about .bar4 .bbox2 ul li b:before { content: ""; background: rgba(0,0,0,0.4); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .about .bar4 .bbox2 ul li b.active { -webkit-transform: scale(1.2); transform: scale(1.2); padding-bottom: 12px;/*-webkit-transition:all 0.3s linear; transition:all 0.3s linear;*/ } .about .bar4 .bbox2 ul li b.active:before { opacity: 0; } .about .bar4 .bbox2 .btn span i { position: absolute; left: 0; top: 32%; color: #333; font-size: 30px; opacity: 0.6; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: pointer; } .about .bar4 .bbox2 .btn span.right i { -webkit-transform: rotate(180deg); transform: rotate(180deg); left: inherit; right: 0; } .about .bar4 .bbox2 .btn span:hover i { opacity: 1; color: #dd4b22; } .about .bar5 .top { width: 100%; padding: 5% 0; background: url(../image/about5_1.jpg) no-repeat center center; background-size: cover; background-attachment: fixed } .about .bar5 .index_title { width: 30%; margin: 0 auto; border: 10px solid rgba(255,255,255,0.4); background-color: rgba(221,75,34,0.4); padding: 4%; } .about .bar5 .index_title p { color: #fff; font-size: 14px; margin-top: 20px; line-height: 20px; } .about .bar5 ul { width: 70%; margin: auto; position: relative; padding: 3% 0; } .about .bar5 ul li { width: 50%; padding: 3% 0; float: left; } .about .bar5 ul li:nth-of-type(2n) { float: right; margin-top: 60px; } .about .bar5 ul li:nth-of-type(2n) h2 { padding-left: 130px; } .about .bar5 ul li:nth-of-type(2n) h2:before { left: 0; width: 100px; } .about .bar5 ul li:nth-of-type(2n) h2:after { left: 100px; } .about .bar5 ul li:nth-of-type(2n) .txt { margin-left: 70px; width: 100%; } .about .bar5 ul:before { content: ""; width: 1px; height: 100%; background: #ccc; position: absolute; left: 50%; top: 0; } .about .bar5 h2 { font-size: 26px; font-weight: bold; color: #79311b; position: relative; padding-left: 60px; } .about .bar5 h2:before { content: ""; width: 50%; height: 1px; position: absolute; right: 0; top: 50%; background: #ccc; } .about .bar5 h2:after { content: ""; width: 8px; height: 8px; position: absolute; right: 50%; top: 50%; background: #ccc; border-radius: 50%; margin-top: -4px; } .about .bar5 .txt { margin-top: 10px; width: 90%; } .about .bar5 .txt p { font-size: 14px; color: #333; padding-left: 60px; position: relative; line-height: 20px; margin-bottom: 10px; } .about .bar5 .txt p strong { position: absolute; left: 0; top: 0; font-weight: bold; font-size: 14px; letter-spacing: 1px; color: #dd4b22; } .about .bar5 h4 { text-align: center; margin: 3% auto; width: 80px; font-size: 13px; color: #333; cursor: pointer; } .about .bar5 h4 span { width: 5px; height: 5px; background: #666; display: block; float: left; margin-top: 6px; border-radius: 50% } .about .bar5 h4:hover { color: #004795; } .about .bar5 h4:hover span { background: #004795; } .about1_d .contain h2 { font-size: 20px; font-weight: bold; color: #004795; position: relative; padding-left: 30px; } .about1_d .contain h2:before { content: ""; position: absolute; left: 0; top: 5px; font-size: 12px; color: #dd4b22; } .about1_d .contain .bar2 p strong { color: #dd4b22; font-size: 15px; font-weight: bold; } .about2_d .p_nav { opacity: 0; } .about2_d .bar0 { width: 100%; position: relative; } .about2_d .bar0 img { display: block; width: 100%; } .about2_d .bar0 .contain { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about2_d .bar0 .contain h2 { font-size: 2.4rem; text-align: center; color: #fff; letter-spacing: 0.5px; text-shadow: 0 0 3px rgba(0,0,0,0.2); } .about2_d .bar0s { padding: 5% 0; text-align: center; } .a3_title { font-size: 2.8rem; color: #004795; font-weight: bold; text-align: center; } .about2_d .bar0s h3 { font-size: 1.6rem; color: #333; margin: 10px 0 30px; } .about2_d .bar0s img { display: block; width: 100%; margin: auto; } .about2_d .bar4 { padding: 5% 0; background: #f3f3f3; } .about2_d .bar4 ul { margin: 3% 0 0; } .about2_d .bar4 ul li { float: left; width: 31.3%; margin-right: 3%; background: #fff; position: relative; } .about2_d .bar4 ul li:before { content: ""; width: 100%; height: 50%; background: rgba(222,64,25,0.9); position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } .about2_d .bar4 ul li:hover:before { height: 100%; opacity: 1; } .about2_d .bar4 ul li:last-of-type { margin-right: 0; } .about2_d .bar4 ul li b img { display: block; width: 100%; } .about2_d .bar4 ul li .txt { position: absolute; left: 0; top: 0; padding: 10% 8%; width: 84%; cursor: default; } .about2_d .bar4 ul li .txt span { display: block; height: 36px; width: 36px; overflow: hidden; position: relative; float: left; margin-right: 10px; } .about2_d .bar4 ul li .txt span img { width: 36px; display: block; position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .about2_d .bar4 ul li:hover .txt span img { top: -36px; } .about2_d .bar4 ul li .txt h2 { font-size: 1.8rem; color: #fff; line-height: 36px; } .about2_d .bar4 ul li .txt p { width: 96%; margin: auto; font-size: 1.45rem; color: rgba(255,255,255,0.9); opacity: 0.9; position: relative; padding: 10px 0; margin-top: 20px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .about2_d .bar4 ul li .txt p:before { content: ""; width: 100%; height: 1px; position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.6); -webkit-transition: all 0.6s linear; transition: all 0.6s linear; opacity: 0.8; } .about2_d .bar4 ul li:hover .txt p { opacity: 1; } .about2_d .bar4 ul li:hover .txt p:before { opacity: 1; } .about2_d .bar1 { background: url(../image/about3_2.jpg) -40px -32px; padding: 5% 0 3%; } .about2_d .bar1 .contain { width: 54%; margin-top: 2%; } .about2_d .bar1 .img { width: 50%; float: left; } .about2_d .bar1 .img img { width: 70%; display: block; margin: auto; } .about2_d .bar1 .right { width: 46%; float: right; } .about2_d .bar1 .right h2 { margin: 20px 0 10px; padding-left: 16px; } .about2_d .bar1 .right p { font-size: 14px; color: #333; position: relative; padding-left: 16px; margin: 5px 0; } .about2_d .bar1 .right p strong { color: #dd4b22; font-size: 14px; font-weight: bold; display: block; margin-left: -6px; } .about2_d .bar1 .right p:before { content: ""; width: 6px; height: 6px; background: #ccc; position: absolute; left: 0; top: 8px; border-radius: 50%; } .about2_d .bar2 { padding: 2% 0 5%; background: #f2f2f2; } .about2_d .bar2 .top { } .about2_d .bar2 .top h3 { font-size: 1.6rem; color: #333; margin: 10px 0 30px; } .about2_d .bar2 h2 { margin: 0px 0 10px; padding-left: 16px; } .about2_d .bar2 ul { margin-top: -30px; background: url(../image/about2_bc4.jpg) no-repeat center center; background-size: cover; } .about2_d .bar2 li { float: left; width: 25%; position: relative; padding: 13% 0; text-align: center; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: default } .about2_d .bar2 li:before { content: ""; width: 1px; height: 100%; background: #fff; position: absolute; right: 0%; top: 0%; opacity: 0.1; } .about2_d .bar2 li:last-of-type:before { display: none; } .about2_d .bar2 li b { position: relative; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; display: block; } .about2_d .bar2 li b h3 { position: relative; z-index: 2; font-size: 2rem; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.1); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .about2_d .bar2 li:hover b h3 { color: #004795; } .about2_d .bar2 li b:before { content: ""; width: 0px; height: 1px; background: #004795; position: absolute; left: 50%; bottom: -15px; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; margin-left: -18px; } .about2_d .bar2 li:hover { background: rgba(88,27,26,0.1) } .about2_d .bar2 li:hover b { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); } .about2_d .bar2 li:hover p { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } .about2_d .bar2 li:hover b:before { width: 36px; opacity: 1; } .about2_d .bar2 li b strong { overflow: hidden; height: 46px; display: block; margin: 0 auto 20px; } .about2_d .bar2 li img { width: 46px; margin: auto; display: block; } .about2_d .bar2 li:hover img { margin-top: -46px; } .about2_d .bar2 li p { position: relative; color: #fff; font-size: 1.46rem; padding: 5% 0 0; line-height: 22px; text-shadow: 0 0 3px rgba(0,0,0,0.1); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .about2_d .bar3 { background: url(../image/about2_bc3.jpg) no-repeat left center; background-size: cover; width: 100%; padding: 5% 0; background-attachment: fixed; } .about2_d .bar3 .txt { margin: auto; } .about2_d .bar3 h2 { text-align: left; } .about2_d .bar3 h2 { margin: 30px 0 10px 0px; background: #dd4b22; color: #fff; font-size: 15px; float: left; padding: 2px 5px; } .about2_d .bar3 h3 { font-size: 15px; font-weight: bold; color: #dd4b22; } .about2_d .bar3 p { width: 50%; font-size: 14px; color: #fff; margin-top: 10px; text-shadow: 0 0 4px rgba(0,0,0,0.2); } .about4_d { background: #f2f2f2; padding: 4% 0 3%; } .about4_d .bar0 h2 { font-size: 14px; color: #333; margin: 0px auto 10px; width: 52%; line-height: 22px; text-align: center; } .about4_d ul { float: right; width: 80%; border-left: 1px solid #ccc; padding-left: 50px; margin: 2% 5% 0; padding-top: 20px; } .about4_d ul li { position: relative; } .about4_d ul li:before { content: ""; position: absolute; left: -54px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #de4019; } .about4_d ul li h2 { position: absolute; left: -150px; top: -10px; font-size: 1.8rem; color: #de4019; border-bottom: 1px solid #de4019; font-weight: bold; } .about4_d ul li .ll { float: left; width: 22.6%; margin-right: 3%; margin-bottom: 3%; } .about4_d ul li .ll:nth-of-type(4n) { margin-right: 0; } .about4_d ul li .ll img { display: block; width: 100%; } .about4_d ul li p { text-align: center; font-size: 1.4rem; color: #333; margin-top: 10px; } .case { width: 100%; overflow: hidden; position: relative; } .case dl dd { width: 100%; float: left; position: relative; } .case dl dd:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.2); } .case dl dd img { width: 100%; display: block; } .case .btn { position: absolute; right: 1.5%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .case .btn p { font-size: 13px; color: #fff; margin: 15px 0; text-shadow: 0 0 3px rgba(0,0,0,0.1); cursor: default; position: relative; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .case .btn p:before { content: ""; width: 10px; height: 1px; position: absolute; left: -16px; top: 10px; background: #fff; } .case .btn p.active { color: #de4019; font-size: 14px; text-shadow: none; } .case .btn p.active:before { background: #de4019; } .case .box { width: 68%; height: 70%; border: 1px solid rgba(248,195,1,0.3); position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); z-index: 2; } .case ul { height: 70%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9; } .case ul a { position: absolute; left: 0; top: 0%; display: none; width: 100%; height: 100%; } .case ul li { position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .case ul h2 { color: #004795; font-size: 5rem; text-shadow: 0 0 3px rgba(0,0,0,0.1); letter-spacing: 3px; margin-top: 80px; opacity: 0; float: left; position: relative; } .case ul p { font-size: 26px; margin-top: 5%; color: #004795; text-shadow: 0 0 5px rgba(0,0,0,0.1); letter-spacing: 1px; opacity: 0; } .case ul i { display: block; margin-top: 26px; float: right; font-size: 26px; color: #004795; margin-right: -60px; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .case ul a:hover li i { opacity: 1; margin-right: -100px; } .case2 { background: #f2f2f2; padding: 5% 0 2%; } .case2 dl { width: 80%; margin: 0 auto 50px; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.1); padding: 3%; } .case2 h2 { width: 82%; margin: auto; font-size: 24px; color: #004795; position: relative; margin-bottom: 20px; padding-left: 50px; } .case2 h2 strong { font-size: 24px; color: #004795; display: block; float: left; margin-right: 10px; } .case2 h2:before { content: ""; width: 40px; height: 1px; background: #004795; position: absolute; left: 0px; top: 16px; } .case2 dl dd { font-size: 14px; color: #333; padding: 5px 1%; float: left; position: relative; width: 18%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: pointer; } .case2 dl dd:before { content: "路"; position: absolute; left: 0; top: 5px; } .case2 dl dd:hover { text-decoration: underline; color: #de4019; } .bc_all { background: #f2f2f2; padding: 4% 0 2%; } .case_d .contain { padding-bottom: 3%; } .case_d .contain .bar1 { width: 66%; margin: auto; } .case_d .contain > img { display: block; width: 100%; } .case_d .contain .bar1 img { display: block; width: 100%; } .case_d .contain .bar2 { width: 66%; margin: auto; margin-top: 1%; padding: 20px 0; border-top: 1px solid #ccc; } .case_d .contain h2 img { display: block; width: 16px; float: left; margin-right: 12px; } .case_d .contain h2 { color: #de4019; width: 66%; margin: auto; margin-top: 3%; font-size: 12px; } .case_d .contain h2 span { float: right; display: block; position: relative; padding-right: 15px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; font-size: 12px; } .case_d .contain h2 span:before { content: ""; width: 10px; height: 1px; position: absolute; right: 0; top: 50%; background: #666; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .case_d .contain h2 span:hover:before { width: 20px; background: #004795; } .case_d .contain h2 span:hover { padding-right: 25px; color: #004795; } .case_d .contain h2 strong { font-size: 12px; color: #dd3f18; padding-left: 15px; margin-left: 15px; position: relative; } .case_d .contain h2 strong:before { content: "|"; position: absolute; left: 0; top: -5px; font-size: 10px; color: #a0a0a0; } .case_d .contain .bar2 p { color: #333; font-size: 14px; margin-top: 1%; text-indent: 32px; } .case_d ul { position: relative; } .case_d .wall-column { display: block; position: relative; width: 50%; float: left; box-sizing: border-box; } .case_d ul .article { display: block; margin-top: 20px; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .case_d ul .article .imgs { position: relative; width: 92%; margin: auto; display: block; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; overflow: hidden; } .case_d ul .article:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .case_d ul .article img { display: block; width: 100%; margin: auto; border: 1px solid rgba(0,0,0,0.02); -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .case_d ul .article span { width: 92%; margin: auto; font-size: 14px; display: block; margin-top: 10px; text-align: center; color: #333; } .case_d ul .article span strong { font-size: 16px; font-weight: bold; color: #004795; } .btn_sub .ll { position: fixed; top: 50%; left: 20px; cursor: pointer; width: 50px; height: 50px; margin-top: -25px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .btn_sub .ll i { font-size: 24px; text-align: center; line-height: 50px; color: #333; display: block; opacity: 0.7; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; position: relative; } .btn_sub .ll i:before { content: ""; width: 0px; height: 1px; background: #de4019; position: absolute; left: -10px; top: 23px; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .btn_sub .ll:hover i:before { opacity: 1; width: 30px; } .btn_sub .ll span { color: #de4019; position: absolute; left: 60px; top: 18px; opacity: 0; display: block; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .btn_sub .ll:hover span { left: 70px; opacity: 1; } .btn_sub .ll.right span { left: -40px; top: 13px; } .btn_sub .ll.right:hover span { left: -50px; } .btn_sub .right { left: inherit; right: 20px; } .btn_sub .left i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .btn_sub .ll:hover { } .btn_sub .ll:hover i { opacity: 1; color: #de4019; margin-left: -5px; font-size: 16px; } .news .bar1 li { float: left; width: 31.3%; margin-right: 3%; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; cursor: pointer; } .news .bar1 li:last-of-type { margin-right: 0; } .news .bar1 li:hover { box-shadow: 0 0 5px rgba(0,0,0,0.1); } .news .bar1 li b { display: block; width: 100%; overflow: hidden; } .news .bar1 li b img { display: block; width: 100%; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .news .bar1 li:hover b .img { -webkit-transform: scale(1.1); transform: scale(1.1); } .news .bar1 li .txt { padding: 20px; position: relative; } .news .bar1 li .txt:before { content: ""; width: 100%; height: 60%; background: #fff; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .news .bar1 li h2 { font-size: 16px; color: #0a0b0d; height: 24px; overflow: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; position: relative; z-index: 2; } .news .bar1 li:hover .txt:before { height: 100%; opacity: 1; } .news .bar1 li:hover h2 { color: #004795; } .news .bar1 li h3 { font-size: 12px; border-top: 1px solid #ccc; padding-top: 10px; margin-top: 20px; font-weight: bold; color: #888; position: relative; z-index: 2; } .news .bar1 li h3 strong { font-size: 12px; color: #dd3f18; padding-left: 15px; margin-left: 15px; position: relative; } .news .bar1 li h3 strong:before { content: "|"; position: absolute; left: 0; top: -5px; font-size: 10px; color: #a0a0a0; } .news .index_more { margin: 3% auto 5%; } .news .bar2 { background: #fff; padding-bottom: 1%; } .news .bar2 .box { background: #f6f6f6; position: relative; height: 100%; box-shadow: 0 2px 15px rgba(0,0,0,0.1); } .news .bar2 .left { position: absolute; left: 0p; top: 0; height: 100%; width: 50%; } .news .bar2 .right { float: right; width: 50%; position: relative; cursor: pointer; } .news .bar2 .right:before { content: ""; width: 100%; height: 60%; background: #eee; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .news .bar2 .right:hover:before { height: 100%; opacity: 1; } .news .bar2 .right .txt { padding: 10%; position: relative; z-index: 2; } .news .bar2 .right .txt h2 { font-size: 20px; color: #0a0b0d; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .news .bar2 .box:hover .right .txt h2 { color: #004795; } .news .bar2 .right .txt h3 { font-size: 12px; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin: 20px 0 30px; font-weight: bold; color: #888; } .news .bar2 .right .txt h3 strong { font-size: 12px; color: #dd3f18; padding-left: 15px; margin-left: 15px; position: relative; } .news .bar2 .right .txt h3 strong:before { content: "|"; position: absolute; left: 0; top: -5px; font-size: 10px; color: #a0a0a0; } .news .bar2 .right .txt p { font-size: 14px; color: #555; height: 140px; overflow: hidden; } .news .bar2 .index_more { margin-bottom: 3%; } .news .bar3 .index_more { margin: 3% auto 2%; } .news .bar3 b { display: block; position: relative; } .news .bar3 .v_btn { width: 48px; display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .news .bar3 li h2 { text-align: center; } .news_l .bar1 dl { width: 62%; margin: auto; padding-bottom: 2%; } .news_l .bar1 dd { float: left; width: 31.5%; margin-right: 2.5%; margin-top: 2.5%; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; cursor: pointer; } .news_l .bar1 a:nth-of-type(3n) dd { margin-right: 0; } .news_l .bar1 dd:hover { box-shadow: 0 0 5px rgba(0,0,0,0.1); } .news_l .bar1 dd b { display: block; width: 100%; overflow: hidden; position: relative; } .news_l .bar1 dd b img { display: block; width: 100%; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .news_l .bar1 dd b .v_btn { width: 48px; display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .news_l .bar1 dd:hover b .img { -webkit-transform: scale(1.1); transform: scale(1.1); } .news_l .bar1 dd .txt { padding: 5% 5%; position: relative; } .news_l .bar1 dd .txt:before { content: ""; width: 100%; height: 60%; background: #fff; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .news_l .bar1 dd h2 { font-size: 15px; color: #0a0b0d; height: 24px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; position: relative; z-index: 2; overflow: hidden; } .video .bar1 dd h2 { text-align: center; } .news_l .bar1 dd:hover .txt:before { height: 100%; opacity: 1; } .news_l .bar1 dd:hover h2 { color: #004795; } .news_l .bar1 dd h3 { font-size: 12px; border-top: 1px solid #ccc; padding-top: 10px; margin-top: 10px; font-weight: bold; color: #888; position: relative; z-index: 2; } .news_l .bar1 dd h3 strong { font-size: 12px; color: #004795; padding-left: 15px; margin-left: 15px; position: relative; } .news_l .bar1 dd h3 strong:before { content: "|"; position: absolute; left: 0; top: -5px; font-size: 10px; color: #a0a0a0; } .news_d .contain .bar2 { width: 66%; margin: auto; margin-top: 1%; padding: 20px 0; border-top: 1px solid #ccc; } .news_d .contain h2 img { display: block; width: 16px; float: left; margin-right: 12px; } .news_d .contain h2 { color: #de4019; width: 66%; margin: auto; border-top: 1px solid #ccc; padding: 15px 0 0; margin-top: 0; } .news_d .contain h2 span { float: right; display: block; position: relative; padding-right: 15px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .news_d .contain h2 span:before { content: ""; width: 10px; height: 1px; position: absolute; right: 0; top: 50%; background: #666; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .news_d .contain h2 span:hover:before { width: 20px; background: #004795; } .news_d .contain h2 span:hover { padding-right: 25px; color: #004795; } .news_d .contain h2 strong { font-size: 12px; color: #dd3f18; padding-left: 15px; margin-left: 15px; position: relative; } .news_d .contain h2 strong:before { content: "|"; position: absolute; left: 0; top: -5px; font-size: 10px; color: #a0a0a0; } .news_d .contain .txt img { max-width: 100%; display: block; margin: 20px auto; } .news_d .contain .bar2 p { color: #333; font-size: 14px; margin-top: 1%;} .products { padding-bottom: 0; } .products .bar1 { background: url(../image/banner4.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100%; background-attachment: fixed; position: relative; } .products .index_title p { font-size: 14px; color: #333; margin: 20px auto 10px; width: 52%; line-height: 22px; } .products .bar1 ul { height: 100%; width: 100%; background: rgba(222,64,25,0.2); } .products .bar1 li { position: relative; width: 100%; float: left; padding: 40px 0; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; cursor: pointer; border-top: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.6); height: 100%; } .products .txt { position: relative; height: 100%; } .products .txt .imgs { float: left; width: 20%; } .products .txt .imgs img { width: 100%; display: block; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .products .txt .tt { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 70%; font-size: 1.6rem; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .products .txt .tt h2 { font-size: 2.4rem; color: #004795; letter-spacing: 1px; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; font-weight: bold; } .products .txt h2 span img { width: 40px; display: block; float: left; margin-right: 15px; position: relative; display: none; } .products li:hover .txt h2 span .img2 { display: block; } .products .txt p { width: 100%; margin: 10px 0 20px; color: #333; font-size: 1.36rem; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; line-height: 22px; } .products .txt h3 { color: #004795; font-size: 1.5rem; position: relative; letter-spacing: 0.5px; float: left; margin-right: 30px; line-height: 24px; } .products .txt h3 i { margin-left: 8px; color: #004795; font-size: 1rem; opacity: 0.7; } .products .txt h3:hover i { opacity: 0; margin-left: 10px; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .products .txt h3:before { content: ""; position: absolute; left: -10px; top: 9px; width: 3px; height: 3px; background: #fff; border-radius: 50%; display: none; } .products li:before { content: ""; width: 80%; height: 100%; background: rgba(0,71,149,0.8); position: absolute; left: 0; top: 0; opacity: 0; z-index: 0; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .products li:hover:before, .products li.active:before { width: 100%; opacity: 1; } .products li:hover .txt .imgs img { -webkit-transform: scale(1.08); transform: scale(1.08); } .products li:hover .txt { } .products li:hover .tt { width: 72%; } .products li:hover .tt h2 { color: #ff0; } .products li:hover .txt p { color: #fff; } .products li:hover .txt h3 { color: #fff; } .products .txt h3:hover { color: #ff0 !important; text-decoration: underline; } .products li:hover .txt h3 i { color: #fff } .pro_service { width: 100%; padding: 8% 0; background: url(../image/pro_service.jpg) no-repeat left center; background-size: cover; } .pro_service .txt { width: 48%; margin-left: 1%; } .pro_service .txt h2 { font-size: 2.8rem; font-weight: bold; color: #de4019; letter-spacing: 1px; margin-bottom: 20px; } .pro_service .txt h3 { font-size: 2rem; color: #fff; margin-bottom: 10px; margin-left: -8px; } .pro_service .txt p { font-size: 1.36rem; color: #fff; margin-top: 5px; } .p_nav { position: fixed; right: 1.5%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .p_nav dl dd { font-size: 13px; color: #0a0b0d; margin: 15px 0; position: relative; padding-bottom: 8px; opacity: 0.6; font-weight: bold; cursor: default; } .p_nav dl a dd { cursor: pointer; } .p_nav dl dd i { display: block; width: 10px; height: 1px; background: #0a0b0d; position: absolute; left: -15px; top: 8px; } .p_nav dl dd.active { color: #004795; opacity: 1; } .p_nav dl dd:hover { color: #004795; opacity: 1; } .p_nav dl dd.active i { background: #de4019; } .product_d .contain h2 { font-size: 20px; font-weight: bold; color: #004795; position: relative; padding-left: 30px; } .product_d .contain h2:before { content: ""; position: absolute; left: 0; top: 5px; font-size: 12px; color: #dd4b22; } .product_d .contain h2 { border-top: 1px solid #ccc; padding: 15px 0 0; margin-top: 0; } .product_d .contain .bar2 img { margin-top: 20px; max-width: 100%; } .technology { padding-bottom: 0; } .technology .index_title p { font-size: 14px; color: #333; margin: 20px auto 10px; width: 52%; line-height: 22px; } .technology .bar1 { width: 100%; background: #f2f2f2; } .technology ul { margin: auto; } .technology ul li { position: relative; } .technology ul li:last-of-type { border: none; } .technology ul li .left { position: absolute; left: 0; top: 0; overflow: hidden; height: 100%; width: 50%; } .technology ul li:nth-of-type(2n) .left { left: inherit; right: 0; } .technology ul li b { display: block; height: 100%; width: 100%; -webkit-transition: all 0.8s linear; transition: all 0.8s linear; position: relative; z-index: 2; } .technology ul li:hover b { -webkit-transform: scale(1.06); transform: scale(1.06); } .technology ul li:after { content: ""; position: absolute; left: 0; top: 0; background: #f9f9f9; width: 100%; height: 80%; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .technology ul li:hover:after { opacity: 1; height: 100%; } .technology ul li .prob { float: right; width: 38%; padding: 6%; min-height: 200px; position: relative; z-index: 2; } .technology ul li:nth-of-type(2n) .prob { float: left; } .technology ul li h2 { font-size: 26px; margin-bottom: 20px; color: #de4019; font-weight: bold; letter-spacing: 1px; position: relative; padding-left: 30px; } .technology ul li h2:before { content: ""; position: absolute; left: 0px; top: 8px; color: #de4019; font-size: 14px; } .technology ul li p { font-size: 14px; color: #333; margin-top: 10px; } .technology ul li .sbox h3 { font-size: 1.6rem; color: #004795; position: relative; float: left; padding-left: 16px; margin-right: 30px; } .technology ul li .sbox h3 strong { font-size: 22px; color: #de4019; font-weight: bold; letter-spacing: 1px; margin: 0 5px; } .technology ul li .sbox h3:before { content: ""; width: 5px; height: 5px; position: absolute; left: 0px; top: 15px; background: #004795; border-radius: 50%; opacity: 0.6; } .tech_d .bar_t1 { padding: 0% 0 5%; background: #f0f0f0; } .tech_d .bar_t1 .contain { background: #fff; padding: 3% 0 1%; position: relative; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .tech_d .bar_t1 .contain h3 { text-align: center; font-size: 1.4em; color: #333; width: 80%; margin: auto; margin-top: 40px; } .tech_d .bar_t1 .contain h3 strong { font-family: "BellMT"; font-size: 7rem; color: #004795; float: left; margin-top: -40px; } .tech_d .bar_t1 .contain h3 strong:nth-of-type(2) { float: right; margin-top: 0px; } .tech_d .bar_t1 .contain2 { margin: 2% auto; } .tech_d .bar_t1 .contain2 li { float: left; width: 60%; margin-top: 5%; position: relative; } .tech_d .bar_t1 .contain2 li img { display: block; width: 80%; } .tech_d .bar_t1 .contain2 li .txt { position: absolute; right: 0; background: #f0f0f0; padding: 30px; bottom: 0; width: 60%; } .tech_d .bar_t1 .contain2 li:nth-of-type(2n) { width: 35%; float: right; } .tech_d .bar_t1 .contain2 li:nth-of-type(2n) .txt { width: 75%; } .tech_d .bar_t1 .contain2 li:nth-of-type(3) { width: 70%; margin-top: 5%; margin-left: 9%; } .tech_d .bar_t1 .contain2 li .txt p { font-size: 1.4rem; color: #333; } .tech_d .bar_t1 .contain2 li .txt p span { color: #de4019; font-size: 1.5rem; margin-left: 2px; } .tech_d .bar_t1 .contain2 li .txt p strong { color: #de4019; font-size: 1.5rem; display: block; } .res dl { width: 60%; margin: 0 auto 3%; } .res dl dd { float: left; width: 33.3%; text-align: center; } .res dl dd img { margin: auto; width: 80px; } .res dl dd h2 { color: #333; font-size: 16px; font-weight: bold; } .res .index_more2 { margin-left: 0; } .case_list { } .zp ul { width: 66%; margin: auto; } .zp ul li { margin-top: 20px; } .zp ul .bar { width: 93%; background: #8a8a8a; padding: 8px 3% 8px 4%; border-radius: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.1); cursor: pointer; position: relative; } .zp ul .bar:before { content: ""; width: 100%; height: 0; opacity: 0; background: #004795; position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .zp ul .bar .bl { position: relative; z-index: 2; } .zp ul li:hover .bar:before { opacity: 1; height: 100%; } .zp ul .bar h6 { float: left; font-size: 16px; line-height: 30px; color: #fff; letter-spacing: 1px; position: relative; font-weight: bold; padding-left: 0px } .zp ul .bar h6 strong { position: absolute; left: -20px; top: 0px; font-size: 14px; color: #fff; opacity: 0.8; font-weight: bold; } .zp ul .bar h5 { float: right; font-size: 15px; margin-right: 30px; color: #fff; border-right: 1px solid rgba(255,255,255,0.2); padding-right: 30px; line-height: 15px; margin-top: 8px; } .zp ul .bar h4 i { float: right; position: relative; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; color: #fff; font-size: 14px; text-align: center; line-height: 30px; cursor: default; } .zp ul .bar h4.active i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .zp ul .bars { width: 100%; background: #fff; height: 0; border: 1px solid #f0f1ff; box-sizing: border-box; opacity: 0; text-align: left; } .zp ul .bars .contain { padding: 2% 4%; display: none; } .zp ul .bars .contain h4 { font-size: 16px; color: #111; letter-spacing: 1px; margin: 10px 0 5px; padding-left: 16px; position: relative; } .zp ul .bars .contain h4:before { content: ""; width: 6px; height: 6px; background: #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 0; top: 7px; } .zp ul .bars .contain p { font-size: 14px; color: #555; } .zp ul .bars .contain h6 { margin-top: 10px; font-size: 15px; color: #222; } .zp ul .bars .contain h6 a { font-size: 16px; font-weight: bold; text-decoration: underline; color: #dd4b22; } .contact { background: #f2f2f2; } .contact .box { padding: 30px 0; box-shadow: 0 0 3px rgba(0,0,0,0.1); background: #fff; margin-top: -5%; position: relative; z-index: 2; } .contact .left { width: 100%; } .contact .box p { float: left; width: 25%; margin-top: 20px; font-size: 14px; text-align: center; color: #333; border-right: 1px dotted rgba(88,27,26,0.2); box-sizing: border-box } .contact .box p:last-of-type { border: none; } .contact .box p span { font-size: 14px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .contact .box p:hover span { color: #004795; } .contact .box p img { display: block; height: 34px; margin: auto; } .contact .box p:nth-of-type(2) i { font-size: 32px; } .contact .box p i { display: block; font-size: 36px; text-align: center; color: #de4019; line-height: 34px; } .contact .box .right { margin-top: 40px; } .contact .box strong { display: block; font-size: 16px; color: #de4019; margin: 15px 0 0px; font-weight: bold; } .contact .box .right { margin-top: 35px; } .contact .box .right strong { margin-top: -5px; } .contact .box .right b img { display: block; margin-top: 10px; } .amap-icon { left: -36px; top: -40px; } .contact .bar2 { padding: 2% 0 3%; } .contact .bar2 p { font-size: 14px; color: #333; margin: 20px 0 0; } .contact .bar2 .contain { width: 54%; } .contact .bar2 span { position: relative; float: left; width: 48.5%; display: block; margin-top: 20px; } .contact .bar2 input { display: block; background: none; color: #333; border-bottom: solid 1px rgba(255,255,255,0.6); padding: 12px 4%; width: 92%; background: #ddd; } .contact .bar2 span.ll:before { content: "*"; position: absolute; left: 5px; top: 5px; color: #ca0000; font-size: 16PX; } .contact .bar2 span:nth-of-type(2n) { float: right; } .contact .bar2 textarea { margin-top: 20px; background: none; height: 130px; padding: 2%; border-bottom: solid 1px rgba(255,255,255,0.6); width: 96%; resize: none; background: #eee; } .contact .bar2 .submit { background: none; border-bottom: 1px solid #de4019; border-top: 1px solid #de4019; width: 30%; margin: 5% auto 3%; display: block; padding: 10px 0; font-size: 15px; color: #de4019; } .w1200{width:1200px; margin:0 auto; } .wenhua1 { background-image: url(../../../images/wh1.jpg); background-repeat: no-repeat; background-position: center top; height: 500px; padding-top: 100px; } .wenhua1 li { font-size: 20px; color: #00459a; } .wenhua1 li p { line-height: 40px; font-size: 18px; } .wenhua2 { height: 500px; padding-top: 100px; } .wenhua2 li { font-size: 20px; color: #00459a; width: 600px; float: left; } .wenhua2 li p { line-height: 40px; font-size: 26px; color: #666; } .wenhua3 { background-image: url(../../../images/wh3.jpg); background-repeat: no-repeat; background-position: center top; height: 500px; padding-top: 100px; } .wenhua3 li { font-size: 20px; color: #fff; } .wenhua3 li p { line-height: 40px; font-size: 20px; } .wenhua4 { height: 500px; padding-top: 100px; } .wenhua4 li { font-size: 20px; color: #00459a; width: 600px; float: left; } .wenhua4 li p { line-height: 40px; font-size: 26px; color: #666; } @media all and (max-width:1024px) { .w1200{width:100%; margin:0 auto;} .wenhua1 { background-image: url(../../../images/wh1.jpg); background-repeat: no-repeat; background-position: center top; height: 500px; padding-top: 50px; } .wenhua1 li { font-size: 20px; color: #00459a;padding:0 15px 0 15px;} .wenhua1 li p { line-height: 30px;font-size: 18px; } .wenhua2 { height: 500px; padding-top:10px; } .wenhua2 li { font-size:20px; color: #00459a; width:100%; float: left;} .wenhua2 li span {font-size:20px;} .wenhua2 li img {width:100%; height:auto;} .wenhua2 li p { line-height:30px; font-size: 20px; color: #000;padding:0 15px 0 15px;} .wenhua3 { background-image: url(../../../images/wh3.jpg); background-repeat: no-repeat; background-position: center top; height: 400px; padding-top: 100px; } .wenhua3 li { font-size: 20px; color: #fff;padding:0 15px 0 15px;} .wenhua3 li p {line-height: 40px; font-size: 20px;} .wenhua4 { height: 500px; padding-top: 100px; } .wenhua4 li { font-size: 20px; color: #00459a; width:100%;float: left; } .wenhua4 li p { line-height: 40px; font-size: 26px; color: #666; } }