body { width: 100%; overflow: hidden; position: relative; } .w1400 { width: 1400px; margin: 0 auto; position: relative; } .w1530 { width: 1530px; margin: 0 auto; position: relative; } .w1200 { width: 1200px; position: relative; margin: 0 auto; } .inline-banner { width: 100%; height: 600px; position: relative; } .inline-banner .w1400 { z-index: 3; } .inline-banner img { position: absolute; top: 0; left: 50%; width: 1920px; z-index: 1; margin-left: -960px; } .inline-banner.join-banner h2 { padding-top: 130px; } .inline-banner h2 { font-size: 54px; color: #fff; line-height: 70px; padding-top: 202px; } .inline-banner p { font-size: 30px; color: #fff; line-height: 40px; } .inline-banner .down { width: 58px; height: 58px; background: url(../images/ban01.png) no-repeat center; background-size: 100% 100%; position: relative; margin-top: 90px; cursor: pointer; } .inline-banner .down span { width: 100%; height: 100%; display: block; background-image: url(../images/ban02.png); background-position: center; background-repeat: no-repeat; opacity: 1; -webkit-animation: bap 1500ms infinite linear; animation: bap 1500ms infinite linear; } .wel-swiper { height: 0px; position: relative; overflow: hidden; } .wel-swiper li.swiper-slide { width: 100%; overflow: hidden; } .wel-swiper .swiper-slide a { display: block; width: 100%; } .wel-swiper .swiper-slide img { max-width: 100%; } @-webkit-keyframes bap { 0% { background-position: center top; opacity: 0; } 50% { background-position: center; opacity:1; } 100% { background-position: center bottom; opacity:0; } } @keyframes bap { 0% { background-position: center top; opacity: 0; } 50% { background-position: center; opacity:1; } 100% { background-position: center bottom; opacity:0; } } .inline-banner.product-banner { height: 420px; } .inline-banner.product-banner h2 { font-size: 40px; line-height: 97px; padding-top: 203px; } .inline-banner.product-banner form { width: 100%; } .inline-banner.product-banner .box { padding-left: 5%; width: 79%; height: 70px; line-height: 70px; border-radius: 5px; overflow: hidden; background: #fff url(../images/pro01.png) no-repeat 2% center; background-size: 1.7%; } .inline-banner.product-banner .text { padding: 0; margin: 0; border: none; background: none; font-size: 13px; color: #999; width: 100%; height: 70px; line-height: 70px; } .inline-banner.product-banner .submit { width: 14%; height: 70px; line-height: 70px; background: #004da1; color: #fff; border: none; padding: 0; margin: 0; font-size: 26px; border-radius: 5px; } .contact { padding: 103px 0 110px; } .contact-center { padding: 43px 0 70px; } .contact-center .left { width: 549px; float: left; } .contact-center .left p { font-size: 16px; color: #666; line-height: 30px; } .contact-center .left span { font-weight: bold; } .contact-center .right { float: right; width: 360px; padding-top: 14px; } .contact-center .right ul { float: left; width: 100%; } .contact-center .right li { float: right; width: 46%; text-align: center; } .contact-center .right li:first-child { float: left; } .contact-center .right p { font-size: 14px; color: #666; line-height: 34px; padding-top: 7px; } .contact-bot { width: 100%; } .contact-bot ul { width: 100%; float: left; } .contact-bot li { width: 25.8%; padding: 20px 2.8%; margin-left: 2.9%; float: left; background: #f9f9f9; transition: background 0.3s; min-height: 150px; cursor: pointer; position: relative; } .contact-bot li h2 { font-size: 16px; color: #666; line-height: 36px; font-weight: bold; transition: color 0.3s; } .contact-bot li i { width: 20px; height: 1px; display: block; background: #aaaaaa; margin: 10px 0 14px; transition: background 0.3s; } .contact-bot li p { font-size: 14px; color: #666; line-height: 30px; } .contact-bot li:first-child { margin-left: 0; } .contact-bot li span.bg { width: 29.8%; height: 100%; position: absolute; bottom: 0; right: 0; } .contact-bot li:nth-child(1) span.bg { background: url(../images/con02.png) no-repeat center bottom; background-size: 100%; } .contact-bot li:nth-child(2) span.bg { background: url(../images/con03.png) no-repeat center bottom; background-size: 100%; } .contact-bot li:nth-child(3) span.bg { background: url(../images/con04.png) no-repeat center bottom; background-size: 100%; } .contact-bot li:hover { background: #014ea1; } .contact-bot li:hover h2, .contact-bot li:hover p { color: #fff; } .contact-bot li:hover i { background: #fff; } .contact-bot li:nth-child(1):hover span.bg { background: url(../images/con02_h.png) no-repeat center bottom; background-size: 100%; } .contact-bot li:nth-child(2):hover span.bg { background: url(../images/con03_h.png) no-repeat center bottom; background-size: 100%; } .contact-bot li:nth-child(3):hover span.bg { background: url(../images/con04_h.png) no-repeat center bottom; background-size: 100%; } .join-nav, .about-nav { position: absolute; bottom: 20px; left: 50%; margin-left: -700px; background: #fff; } .join-nav li, .about-nav .slides li { float: left; width: 33.33333%; height: 70px; line-height: 70px; text-align: center; background: url(../images/join04.png) no-repeat left center; position: relative; cursor: pointer; } .join-nav.bus-nav li, .join-nav.product-nav li { width: 25%; overflow: hidden; } .join-nav.bus-nav li { width: 33%; } .join-nav li a, .about-nav .slides a { display: block; width: 100%; } .join-nav li:first-child, .about-nav .slides li:first-child { background: none; } .join-nav li .font, .about-nav .slides .font { font-size: 18px; color: #888; padding-left: 0; line-height: 70px; transition: color 0.3s; } .join-nav li .line, .about-nav .slides .line { width: 0; height: 2px; background: #004da1; position: absolute; bottom: 0; left: 50%; transition: width 0.3s, left 0.3s; } .join-nav.news-nav li { width: 50%; } .join-nav li:hover .font1, .join-nav li.cur .font1 { background: url(../images/join01.png) no-repeat left center; } .join-nav li:hover .font2, .join-nav li.cur .font2 { background: url(../images/join02.png) no-repeat left center; } .join-nav li:hover .font3, .join-nav li.cur .font3 { background: url(../images/join03.png) no-repeat left center; } .join-nav li:hover .font4, .join-nav li.cur .font4 { background: url(../images/bus01.png) no-repeat left center; background-size: 20px; } .join-nav li:hover .font5, .join-nav li.cur .font5 { background: url(../images/bus04.png) no-repeat left center; } .join-nav li:hover .font6, .join-nav li.cur .font6 { background: url(../images/bus03.png) no-repeat left center; } .join-nav li:hover .font7, .join-nav li.cur .font7 { background: url(../images/bus02.png) no-repeat left center; } .join-nav li:hover .font8, .join-nav li.cur .font8, .about-nav li:hover .font8, .about-nav li.cur .font8 { background: url(../images/news05.png) no-repeat left center; } .join-nav li:hover .font9, .join-nav li.cur .font9 { background: url(../images/news01.png) no-repeat left center; } .join-nav li:hover .font10, .join-nav li.cur .font10 { background: url(../images/ser03.png) no-repeat left center; } .join-nav li:hover .font11, .join-nav li.cur .font11 { background: url(../images/ser01.png) no-repeat left center; } .join-nav li:hover .font12, .join-nav li.cur .font12 { background: url(../images/ser02.png) no-repeat left center; } .join-nav li:hover .font, .join-nav li.cur .font, .about-nav .slides li:hover .font, .about-nav .slides li.cur .font { color: #004da1; } .join-nav li:hover .line, .join-nav li.cur .line, .about-nav .slides li:hover .line, .about-nav .slides li.cur .line { width: 99%; left: 0.5%; } .about-nav .slides li:hover .font1, .about-nav .slides li.cur .font1 { background: url(../images/a01.png) no-repeat left center; } .about-nav .slides li:hover .font2, .about-nav .slides li.cur .font2 { background: url(../images/a02.png) no-repeat left center; } .about-nav .slides li:hover .font3, .about-nav .slides li.cur .font3 { background: url(../images/a03.png) no-repeat left center; } .about-nav .slides li:hover .font4, .about-nav .slides li.cur .font4 { background: url(../images/a04.png) no-repeat left center; } .about-nav .slides li:hover .font5, .about-nav .slides li.cur .font5 { background: url(../images/a05.png) no-repeat left center; } .join-intro { width: 100%; padding: 65px 0 125px; background: url(../images/join05.jpg) no-repeat center; background-size: cover; } .join-title { width: 100%; text-align: center; } .join-title h2 { font-size: 40px; color: #333; line-height: 60px; } .join-title h2 span { /*color: #004da1;*/ } .join-title i { display: block; width: 75px; height: 1px; background: #d0d0d0; margin: 30px auto 0; } .join-intro-list { margin-top: 55px; position: relative; } .join-intro-list ul { float: left; } .join-intro-list .slides li { float: left; width: 330px; margin-right: 25px; background: #fff; padding-bottom: 27px; box-shadow: 0 0 10px rgba(0,0,0,.07); transition: background 0.3s; position: relative; left: 80px; opacity: 0; } .join-intro-list .slides a { display: block; width: 100%; height: 100%; } .join-intro-list .slides h2 { font-size: 20px; color: #333333; line-height: 30px; padding: 20px 9% 10px; transition: color 0.3s, background 0.3s; } .join-intro-list .slides .con { display: block; padding: 0 9%; margin: 14px 0 6px; background: #f8f8f8; height: 156px; overflow-y: hidden; transition: background 0.3s; } .join-intro-list .slides h3 { font-size: 16px; color: #666; line-height: 36px; transition: color 0.3s; } .join-intro-list .slides p { font-size: 13px; color: #888888; line-height: 24px; transition: color 0.3s; } .join-intro-list .slides .more { margin: 26px 9% 0; width: 68px; height: 28px; border: 1px solid #e6e5e5; background: url(../images/join08.png) no-repeat center; display: block; transition: background 0.3s, border 0.3s; } .join-intro-list .slides li:hover { background: #004da1; } .join-intro-list .slides li:hover h2 { color: #fff; background: #004da1; } .join-intro-list .slides li:hover .more { background: #004da1 url(../images/join08_h.png) no-repeat center; border-color: #004da1; } .join-intro-list .slides li:hover .con { background: #004da1; } .join-intro-list .slides li:hover h3, .join-intro-list .slides li:hover p { color: #fff; } .flex-viewport { width: 1400px; margin: 0 auto; max-width: 1400px; } .join-intro-list .flex-direction-nav a { width: 16px; height: 31px; top: 50%; margin-top: -15px; opacity: 1 !important; transition: background 0.3s; z-index: 1 !important; } .join-intro-list .flex-direction-nav .flex-prev { left: 0; background: url(../images/join06.png) no-repeat center; } .join-intro-list .flex-direction-nav .flex-prev:hover { background: url(../images/join06_h.png) no-repeat center; } .join-intro-list .flex-direction-nav .flex-next { right: 0; background: url(../images/join07.png) no-repeat center; } .join-intro-list .flex-direction-nav .flex-next:hover { background: url(../images/join07_h.png) no-repeat center; } .join-intro-list .flex-direction-nav a:before { content: '' !important; } .join-intro-list .flex-control-nav { display: none; } .join-idea { width: 100%; padding: 80px 0 75px; background: url(../images/join09.jpg) no-repeat center top fixed; background-size: cover; } .join-idea .join-title h2 { color: #fff; } .join-idea .join-title i { background: #fff; } .join-idea-list { padding: 52px 0 52px; position: relative; } .join-idea-list .slides li { width: 260px; margin-right: 25px; background: #fff; border-radius: 7px; text-align: center; padding: 40px 0; position: relative; left: 80px; opacity: 0; } .join-idea-list .slides .box { width: 80%; text-align: center; display: block; margin: 0 auto; } .join-idea-list .slides .pic { width: 81px; height: 81px; text-align: center; line-height: 81px; margin: 0 auto; background: url(../images/join15.png) no-repeat center; background-size: 100% 100%; } .join-idea-list .slides img { max-width: 80%; max-height: 50%; } .join-idea-list .slides h2 { font-size: 20px; color: #004da1; line-height: 40px; padding-top: 9px; } .join-idea-list .slides i { width: 25px; height: 1px; display: block; margin: 7px auto 10px; background: #7fa6d0; } .join-idea-list .slides .font { font-size: 13px; color: #888888; line-height: 24px; min-height: 200px; } .join-idea-list .flex-control-paging li a { width: 15px; height: 15px; background: url(../images/join16.png) no-repeat center; background-size: 100% 100%; } .join-idea-list .flex-control-paging li a:hover, .join-idea-list .flex-control-paging li a.flex-active { background: url(../images/join16_h.png) no-repeat center; background-size: 100% 100%; } .join-history { padding: 80px 0 55px; } .join-history .join-title { text-align: left; } .join-history .join-title i { margin: 30px 0 0; } .join-history .box { font-size: 16px; color: #333333; line-height: 26px; padding: 30px 0 38px; } .join-history ul { width: 100%; } .join-history li { width: 32%; margin-left: 2%; float: left; margin-bottom: 20px; position: relative; left: 80px; opacity: 0; } .join-history li:first-child { margin-left: 0; } .join-history li .pic { width: 100%; overflow: hidden; } .join-history li img { max-width: 100%; } .join-history li .font { width: 100%; padding: 35px 7% 17px; border: 1px solid #eee; box-sizing: border-box; font-size: 13px; color: #888888; line-height: 23px; min-height: 190px; } .bus-member { width: 100%; padding: 75px 0 52px; background: url(../images/bus05.jpg) no-repeat center; background-size: cover; position: relative; } .bus-intro { padding: 52px 0 39px; width: 100%; border-bottom: 5px solid #c7c7c7; } .bus-intro .font { float: left; width: 40%; } .bus-intro .font h2 { font-size: 24px; color: #333; line-height: 68px; padding-top: 39px; } .bus-intro .font p { font-size: 14px; color: #666666; line-height: 28px; } .bus-intro .pic { width: 49%; float: right; background: url(../images/bus07.png) no-repeat center bottom; } .bus-intro .pic img { width: 32%; } .bus-intro .pic .pic1 { margin-left: 18%; } .bus-intro .pic .pic2 { margin: 45px 0 0 6%; } .bus-intro-list { padding: 45px 0 55px; width: 100%; position: relative; } .bus-intro-list .slides li { float: left; width: 260px; margin-right: 25px; position: relative; background: #fff; transition: background 0.3s; } .bus-intro-list .slides .pic { width: 100%; overflow: hidden; } .bus-intro-list .slides img { width: 100%; transition: all 0.5s; } .bus-intro-list .slides .con { display: block; width: 80%; margin: 0 auto; padding: 10px 0 20px; } .bus-intro-list .slides h2 { font-size: 18px; color: #000; line-height: 28px; padding: 9px 0; transition: color 0.3s; } .bus-intro-list .slides .font { font-size: 12px; color: #666; line-height: 24px; transition: color 0.3s; } .bus-intro-list .slides h3 { font-size: 14px; color: #000; line-height: 24px; margin-top: 20px; background: url(../images/bus10.png) no-repeat 66px center; background-size: 13px; transition: background 0.3s, color 0.3s; } .bus-intro-list .slides li:hover { background: #004da1; } .bus-intro-list .slides li:hover img { transform: scale(1.1, 1.1); } .bus-intro-list .slides li:hover h2, .bus-intro-list .slides li:hover .font { color: #fff; } .bus-intro-list .slides li:hover h3 { color: #fff; background: url(../images/bus10_h.png) no-repeat 66px center; } .bus-intro-list .flex-control-nav { bottom: 0; } .bus-intro-list .flex-control-nav li { margin: 0; } .bus-intro-list .flex-control-paging li a { width: 12px; height: 12px; margin: 0 9px; background: url(../images/bus11.png) no-repeat center; background-size: 100% 100%; } .bus-intro-list .flex-control-paging li a.flex-active, .bus-intro-list .flex-control-paging li a:hover { background: url(../images/bus11_h.png) no-repeat center; background-size: 100% 100%; } .bus-intro-list .flex-direction-nav { display: none; } .bus-preferred { width: 100%; padding: 79px 0 89px; background: url(../images/bus12.jpg) no-repeat center top fixed; background-size: cover; position: relative; text-align: center; } .bus-preferred .join-title h2 { color: #fff; } .bus-preferred .join-title i { background: #93aecd; } .bus-preferred img { max-width: 100%; margin-top: 56px; } .bus-preferred .font { width: 685px; margin: 22px auto 0; font-size: 16px; color: #fff; line-height: 30px; } .bus-preferred .font p { font-size: 16px; color: #fff; line-height: 30px; } .bus-engineer { padding: 60px 0; position: relative; width: 100%; } .bus-engineer .join-title h2 { color: #fff; } .bus-engineer.bus-home .join-title h2 { color: #333; } .bus-engineer .list { padding: 60px 0 48px; } .bus-engineer .slides li { width: 330px; background: #ffffff; margin-right: 25px; float: left; transition: background 0.3s; } .bus-engineer .slides .pic { width: 100%; overflow: hidden; position: relative; } .bus-engineer .slides img { width: 100%; transition: all 0.3s; } .bus-engineer .slides .con { padding: 20px 7% 25px; width: 86%; display: block; } .bus-engineer .slides h2 { font-size: 16px; color: #333; line-height: 34px; transition: color 0.3s; } .bus-engineer .slides .font { font-size: 13px; color: #999; font-style: italic; line-height: 21px; transition: color 0.3s; } .bus-engineer .slides .bg { width: 110%; height: 100%; position: absolute; top: 0; left: 0; background: #004da1; opacity: 0; z-index: 2; transition: opacity 0.3s; } .bus-engineer .slides .open { width: 47px; height: 48px; position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -24px; background: url(../images/bg04.png) no-repeat center; background-size: 100% 100%; z-index: 3; opacity: 0; transition: opacity 0.3s; } .bus-engineer .slides li:hover img { transform: scale(1.1, 1.1); } .bus-engineer .slides li:hover .bg { opacity: 0.6; } .bus-engineer .slides li:hover .open { opacity: 1; } .bus-engineer .slides li:hover .con, .bus-engineer.bus-home .slides li:hover .con { background: #004da1; } .bus-engineer .slides li:hover .con { background: #fff; } .bus-engineer .slides li:hover h2, .bus-engineer .slides li:hover .font { color: #004da1; } .bus-engineer.bus-home .slides li:hover h2, .bus-engineer.bus-home .slides li:hover .font { color: #fff; } .bus-engineer .flex-control-nav { bottom: -26px; } .bus-engineer .flex-control-nav li { margin: 0; } .bus-engineer.bus-home { background: #fff; } .bus-engineer.bus-home .slides li { background: #f5f5f5; } .bus-engineer .flex-control-paging li a { width: 12px; height: 12px; margin: 0 5px; background: url(../images/bg02.png) no-repeat center; background-size: 100% 100%; } .bus-engineer .flex-control-paging li a.flex-active, .bus-engineer .flex-control-paging li a:hover { background: url(../images/bg03.png) no-repeat center; background-size: 100% 100%; } .bus-engineer.bus-home .flex-control-paging li a { background: url(../images/bus11.png) no-repeat center; background-size: 100% 100%; } .bus-engineer.bus-home .flex-control-paging li a.flex-active, .bus-engineer.bus-home .flex-control-paging li a:hover { background: url(../images/bus11_h.png) no-repeat center; background-size: 100% 100%; } .bus-engineer .flex-direction-nav { display: none; } .news { width: 100%; background: #f8f8f8; padding: 68px 0 85px; } .news-intro { padding-bottom: 120px; position: relative; } .news-intro ul { display: inline-block; } .news-intro li { width: 30.333%; background: #fff; margin: 10px 1.5% 30px 1.5%; float: left; transition: box-shadow 0.3s; } .news-intro .pic { width: 100%; overflow: hidden; } .news-intro img { width: 100%; transition: all 0.5s; max-height: 260px; } .news-intro .con { display: block; width: 100%; padding: 20px 6% 30px; box-sizing: content-box; border: 1px solid #eeeeee; border-top: none; width: 88%; } .news-intro h2 { font-size: 16px; color: #333333; line-height: 36px; transition: color 0.3s; } .news-intro .time { padding-left: 22px; font-size: 13px; color: #999; font-family: 'Arial'; line-height: 23px; margin-top: 8px; background: url(../images/news02.png) no-repeat left center; } .news-intro .font { font-size: 13px; color: #999; line-height: 24px; height: 50px; overflow: hidden; margin: 10px 0 22px; } .news-intro i { width: 28px; height: 14px; background: url(../images/news03.png) no-repeat center; background-size: 100% 100%; display: block; } .news-intro li:hover { box-shadow: 0 0 15px rgba(0,0,0,.1); } .news-intro li:hover img { transform: scale(1.1, 1.1); } .news-intro li:hover h2 { color: #0651a3; } .news-intro li:hover i { background: url(../images/news03_h.png) no-repeat center; background-size: 100% 100%; } .news-intro .flex-control-nav { bottom: 50px; } .news-intro .flex-control-nav li { margin: 0 6px; } .news-intro .flex-control-paging li a { width: 12px; height: 12px; background: url(../images/news04.png) no-repeat center; background-size: 100% 100%; } .news-intro .flex-control-paging li a.flex-active, .news-intro .flex-control-paging li a:hover { background: url(../images/news04_h.png) no-repeat center; background-size: 100% 100%; } .news-intro .flex-direction-nav { display: none; } .news-list { padding-bottom: 30px; width: 100%; } .news-list ul { width: 100%; } .news-list li { width: 23.7%; margin-right: 1.7%; background: #fff; float: left; margin-bottom: 40px; transition: background 0.3s; } .news-list li.li4 { margin-right: 0; } .news-list li a { display: block; width: 82%; padding: 27px 9% 21px; } .news-list li h2 { font-size: 16px; color: #333; line-height: 26px; height: 26px; overflow: hidden; transition: color 0.3s; } .news-list .time { padding-left: 22px; font-size: 13px; color: #999; font-family: 'Arial'; line-height: 23px; margin-top: 10px; background: url(../images/news02.png) no-repeat left center; transition: color 0.3s, background 0.3s; } .news-list .font { font-size: 13px; color: #999; line-height: 24px; height: 48px; margin: 10px 0 25px; overflow: hidden; transition: color 0.3s; } .news-list i { width: 28px; height: 14px; background: url(../images/news03.png) no-repeat center; background-size: 100% 100%; display: block; transition: background 0.3s; } .news-list li:hover { background: #014ea1; } .news-list li:hover h2 { color: #fff; } .news-list li:hover .time { color: #7591c0; background: url(../images/news06.png) no-repeat left center; } .news-list li:hover .font { color: #c3cee2; } .news-list li:hover i { background: url(../images/news07.png) no-repeat center; background-size: 100% 100%; } .news-page { text-align: center; font-size: 16px; } /*.news-page a{ zoom:1; padding: 0; margin: 0; display: inline-block; *display: inline; margin:0 1px; width: 40px; height: 40px; background: #fff; color: #888888; line-height: 40px; font-size: 16px; font-family: 'Arial'; transition:background 0.3s, color 0.3s; }*/ .news-page a.btn { font-family: '宋体'; font-weight: bold; } .news-page a:hover, .news-page a.active { background: #014ea1; color: #fff; } .info-title { width: 100%; text-align: center; padding-bottom: 30px; border-bottom: 1px solid #eeeeee; } .info-title h2 { font-size: 20px; color: #333; line-height: 40px; } .info-title .time { padding-left: 22px; font-size: 16px; color: #999; font-family: 'Arial'; line-height: 26px; margin-top: 10px; background: url(../images/news02.png) no-repeat left center; transition: color 0.3s, background 0.3s; } .info-box { padding: 30px 0; border-bottom: 1px solid #eeeeee; font-size: 14px; color: #999; } .info-box p { text-indent: 0 !important; } .info-box img { max-width: 100%; height: auto !important; } .info-page { padding-top: 30px; width: 100%; } .info-page a.back { width: 80px; height: 30px; text-align: center; line-height: 30px; color: #999; font-size: 14px; border: 1px solid #eee; transition: background 0.3s, color 0.3s; } .info-page a.back:hover { background: #004da1; color: #fff; border-color: #004da1; } .info-page .left { width: 80%; overflow: hidden; } .info-page .left p { font-size: 14px; color: #999; line-height: 24px; height: 24px; overflow: hidden; } .info-page .left a { color: #999; transition: color 0.3s; } .info-page .left a:hover { color: #004da1; } .pc-footer { width: 100%; background: #333333; } .pc-footer .left { background: #333333; width: 60%; padding: 60px 7% 0 8%; float: left; } .pc-footer .left-top { padding-bottom: 80px; } .pc-footer .right { padding: 60px 4% 0 0; width: 21%; float: right; background: #242424; position: relative; } .pc-footer .list { float: left; width: 100%; } .pc-footer .list li { float: left; width: 16.6%; } .pc-footer .list h2 { font-size: 16px; color: #fff; line-height: 16px; padding-bottom: 20px; } .pc-footer .list p { font-size: 13px; line-height: 30px; } .pc-footer .list a { color: #adadad; transition: color 0.3s; } .pc-footer .list a:hover { color: #fff; } .pc-footer .erwei { width: 24%; float: right; } .pc-footer .erwei p { width: 44%; text-align: center; } .pc-footer .erwei img { padding-bottom: 12px; } .pc-footer .erwei span { font-size: 13px; color: #fff; line-height: 23px; } .wel-font-left { position: fixed; left: 0; bottom: 0; font-size: 12px; color: #ced3d5; line-height: 32px; z-index: 2; padding: 10px 0 10px 2%; } .wel-font-left.on, .wel-font-left.on a { color: #a2a3a3; } .wel-font-right.on, .wel-font-right.on a { color: #a2a3a3; } .wel-font-left.on a:hover, .wel-font-right.on a:hover { color: #000; } .wel-font-right { position: fixed; z-index: 2; right: 0; bottom: 0; padding: 10px 2% 10px 0; font-size: 12px; color: #ced3d5; line-height: 32px; } .wel-font-left a, .wel-font-right a { color: #ced3d5; transition: color 0.3s; } .wel-font-left a:hover, .wel-font-right a:hover { color: #fff; } .wel-font-left i { background: #a1aaae; height: 12px; width: 1px; margin: 0 18px; display: inline-block; position: relative; top: 2px; } .pc-footer .left .font { font-size: 12px; color: #545454; line-height: 48px; } .pc-footer .left .font a { color: #545454; transition: color 0.3s; } .pc-footer .left .font a:hover { color: #fff; } .pc-footer .left .font i { background: #545454; height: 12px; width: 1px; margin: 0 18px; display: inline-block; position: relative; top: 2px; } .pc-footer .right h3 { text-align: right; font-size: 16px; color: #fff; line-height: 22px; } .pc-footer .right h2 { text-align: right; font-size: 40px; color: #fff; font-family: 'Arial'; line-height: 65px; } .pc-footer .right dl { width: 55%; margin-left: 45%; position: relative; cursor: pointer; } .pc-footer .right dt { width: 88%; border: 1px solid #3a3a3a; padding: 0 6%; font-size: 13px; box-sizing: content-box; color: #585858; background: url(../images/fot03.png) no-repeat 92%center; height: 36px; line-height: 36px; } .pc-footer .right dd { position: absolute; bottom: 36px; left: 0; width: 100%; display: none; } .pc-footer .right dl a { display: block; box-sizing: content-box; width: 88%; border: 1px solid #3a3a3a; padding: 0 6%; font-size: 13px; color: #585858; height: 36px; line-height: 36px; background: #242424; transition: color 0.3s; } .pc-footer .right dl a:hover { color: #fff; } .pc-footer .bdsharebuttonbox { width: 100%; margin-top: 20px; } .pc-footer .bdsharebuttonbox a { width: 39px; height: 39px; margin: 0 5px; padding: 0; line-height: 39px; float: right; transition: background 0.3s; } .pc-footer .bdsharebuttonbox a.bds_tsina { background: url(../images/fot06.jpg) no-repeat center; background-size: 100% 100%; } .pc-footer .bdsharebuttonbox a.bds_weixin { background: url(../images/fot05.jpg) no-repeat center; background-size: 100% 100%; } .pc-footer .bdsharebuttonbox a.bds_sqq { background: url(../images/fot04.jpg) no-repeat center; background-size: 100% 100%; } .pc-footer .bdsharebuttonbox a.bds_tsina:hover { background: url(../images/fot06_h.jpg) no-repeat center; background-size: 100% 100%; opacity: 1; } .pc-footer .bdsharebuttonbox a.bds_weixin:hover { background: url(../images/fot05_h.jpg) no-repeat center; background-size: 100% 100%; opacity: 1; } .pc-footer .bdsharebuttonbox a.bds_sqq:hover { background: url(../images/fot04_h.jpg) no-repeat center; background-size: 100% 100%; opacity: 1; } .pc-footer .right p { font-size: 12px; color: #545454; line-height: 48px; position: absolute; bottom: 0; right: 16%; } .pc-footer .right p a { color: #545454; transition: color 0.3s; } .pc-footer .right p a:hover { color: #fff; } .mobile-footer { display: none; width: 100%; background: #3a3939; padding: 15px 0; z-index: 5; } .tit-search { width: 100%; } .mobile-footer .link { width: 47.7%; margin: 0 auto 10px; position: relative; } .mobile-footer .link dt { width: 92%; margin: 0 auto; padding: 0 4%; height: 27px; line-height: 27px; font-size: 12px; color: #666; background: url(../images/fot07.png) no-repeat 95% center; border: 1px solid #5d5c5c; background-size: 15px; border-radius: 3px; } .mobile-footer .link dd { position: absolute; bottom: 30px; left: 0; width: 100%; display: none; } .mobile-footer .link a { display: block; box-sizing: content-box; width: 88%; border: 1px solid #3a3a3a; padding: 0 6%; font-size: 13px; color: #585858; height: 27px; line-height: 27px; background: #3a3939; transition: color 0.3s; } .mobile-footer .link a:hover { color: #fff; } .mobile-footer .font { width: 100%; text-align: center; color: #9c9c9c; font-size: 12px; line-height: 26px; border-top: 1px solid #4e4d4d; padding-top: 15px; margin-top: 15px; } .mobile-footer .font a { color: #9c9c9c; transition: color 0.3s; } .mobile-footer .font a:hover { color: #fff; } .service-center { width: 100%; background: url(../images/ser04.jpg) no-repeat center; background-size: cover; padding: 63px 0 88px; } .service-title-box { width: 100%; background: #fff; margin-top: 50px; } .service-title-box ul{ width:100%; display:inline-block; float:left; } .service-title-box li h3{font-size: 30px; color: #004da1;} .service-title-box li h4{ font-size:24px;padding:0 40px; } .service-title-box li p{ padding:0 40px; margin-bottom:10px; font-size:20px; } .service-title-box li:nth-child(2n+1) { width: 55%; float: left; font-size: 24px; text-align: center; color: #706f6f; } .service-title-box li:nth-child(2n) { width: 45%; float: left; } .service-title-box ul:nth-child(2){ background-color:#f0f0f0; } .service-title-box ul:nth-child(2) li:nth-child(2){ padding-top:10%;} .service-title-box .right { width: 46%; float: right; } .service-title-box li img{ max-width: 100%; } .complaint { position: fixed; top: 0; left: 0; z-index: 10; display: none; } .complaint.on { width: 100%; height: 100%; } .complaint .bg { width: 100%; height: 100%; background: #000; opacity: 0.3; filter: alpha(opacity=30); position: absolute; top: 0; left: 0; z-index: 1; } .complaint .con { height: 600px; overflow: auto; } .complaint.on .box { width: 52%; min-height: 600px; margin: -300px 0 0 -26%; } .complaint.in .box { width: 46%; min-height: 600px; margin: -300px 0 0 -26%; } .complaint.on p { font-size: 13px; line-height: 1.5; } .complaint .box { padding: 20px 2.5% 50px; background: #fff; z-index: 2; position: absolute; width: 62%; top: 50%; left: 50%; margin: -300px 0 0 -33.5%; } .complaint .box .close { width: 56px; height: 56px; background: url(../images/ser12.jpg) no-repeat center; background-size: 100% 100%; position: absolute; top: 0; right: -78px; cursor: pointer; } .complaint .box h2 { font-size: 30px; color: #004da1; line-height: 50px; padding-bottom: 15px; border-bottom: 1px solid #e6e5e5; margin-bottom: 20px; } .complaint.in .box h2 { position: relative; } .complaint.in .font { border-bottom: 1px solid #e5e5e5; margin-bottom: 46px; padding-bottom: 40px; } .complaint.in .line { width: 184px; height: 50px; text-align: center; line-height: 50px; background: #004da1; color: #fff; font-size: 16px; border-radius: 28px; display: block; } .complaint .box .con { width: 98%; padding-right: 2%; } .complaint.in .box .con::-webkit-scrollbar { width: 4px; height: 100%; position: relative; left: 10px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ .complaint.in .box .con::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; width: 1px; height: 100%; background-color: #f8f8f8; } /*定义滑块 内阴影+圆角*/ .complaint.in .box .con::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #004da1; } .complaint.in .font h3 { font-size: 20px; color: #333333; line-height: 50px; } .complaint.in .font p { font-size: 13px; color: #666; line-height: 30px; } .complaint.in .font h4 { font-weight: normal; font-size: 16px; color: #666; line-height: 36px; padding-bottom: 9px; } .complaint.in .box .time { position: absolute; right: 0; top: 0; font-size: 20px; color: #999999; } .complaint .box .btn { padding: 0 3%; width: 41%; border: 1px solid #e6e5e5; margin-bottom: 20px; height: 48px; line-height: 48px; } .complaint .box .time { background: url(../images/ser09.png) no-repeat 1% center; background-size: 3%; } .complaint .box .name { background: url(../images/ser10.png) no-repeat 1% center; background-size: 3%; } .complaint .box .btn input { border: none; padding: 0; margin: 0; background: none; width: 100%; height: 48px; line-height: 48px; font-size: 14px; color: #888888; } .complaint .mas { padding: 0 0 0 3%; border: 1px solid #e6e5e5; width: 97%; margin-bottom: 20px; background: url(../images/ser11.png) no-repeat 0.8% 18px; background-size: 1.5%; } .complaint .mas textarea { width: 100%; padding: 12px 0 0 0; font-size: 14px; color: #888888; line-height: 24px; border: none; margin: 0; height: 240px; } .complaint .submit { width: 185px; height: 50px; text-align: center; line-height: 50px; background: #004da1; font-size: 16px; color: #ffffff; border-radius: 28px; border: none; } .product { padding: 40px 0 75px; background: #f6f6f6; min-height: 300px; } .product-nav { margin-bottom: 40px; background: #fff; position: relative; bottom: 0 !important; } .join-nav.ser li { width: 25%; } .join-nav li:hover .font13, .join-nav li.cur .font13 { background: url(../images/pro02.png) no-repeat left center; } .join-nav li:hover .font14, .join-nav li.cur .font14 { background: url(../images/pro04.png) no-repeat left center; } .join-nav li:hover .font15, .join-nav li.cur .font15 { background: url(../images/pro03.png) no-repeat left center; } .join-nav li:hover .font16, .join-nav li.cur .font16 { background: url(../images/case01.png) no-repeat left center; } .join-nav li:hover .font16.on, .join-nav li.cur .font16.on { background: url(../images/pic12.png) no-repeat left center; } .join-nav li:hover .font17, .join-nav li.cur .font17 { background: url(../images/case03.png) no-repeat left center; } .join-nav li:hover .font18, .join-nav li.cur .font18 { background: url(../images/case02.png) no-repeat left center; } .join-nav li:hover .font30, .join-nav li.cur .font30 { background: url(../images/pic02.png) no-repeat left center; } .product-list { width: 100%; padding-bottom: 42px; } .product-list ul { width: 100%; } .product-list li, .product-recommend .slides li { width: 23%; margin: 0 1% 50px 1%; float: left; background: #fff; position: relative; box-shadow: 0 0 20px rgba(0,0,0,.1); } .product-list li.li4 { margin-right: 0; } .product-list li a, .product-recommend .slides a { display: block; width: 100%; } .product-list li .pic, .product-recommend .slides .pic { width: 100%; height: auto; text-align: center; line-height: 200px; } .product-list li img, .product-recommend .slides img { max-width: 100%;/*max-height: 200px;*/ } .product-list li .font, .product-recommend .slides .font { font-size: 16px; color: #666; line-height: 44px; min-height: 48px; text-align: center; opacity: 1; } .product-list li .con, .product-recommend .slides .con { width: 0; height: 0; /*background: #004da1;*/ background: url(../images/wel09.png) no-repeat center; background-size: 100% 100%; text-align: center; position: absolute; left: 50%; top: 50%; overflow: hidden; transition: all 0.3s; } .product-list li:hover .con, .product-recommend .slides li:hover .con { left: 0; top: 0; width: 100%; height: 100%; } .product-list li:hover .font, .product-recommend .slides li:hover .font { opacity: 0; } .product-list li h2, .product-recommend .slides h2 { font-size: 20px; color: #fff; line-height: 40px; padding-bottom: 20px; padding-top: 100px; } .product-list li i, .product-recommend .slides i { font-size: 14px; color: #fff; border-bottom: 3px solid #fff; line-height: 24px; font-style: normal; opacity: 0; transition: opacity 0.5s; } .product-list li:hover i, .product-recommend .slides li:hover i { opacity: 1; } .product-list li .more, .product-recommend .slides .more { width: 137px; height: 37px; line-height: 37px; text-align: center; background: #80a6d0; color: #fff; font-size: 13px; margin: 0 auto; border-radius: 25px; } .product-list li i { width: 40px; height: 40px; background: url(../images/bigimg.png) no-repeat center; background-size: cover; border: none; display: inline-block; } .product-info-banner .slides li { width: 100%; float: left; padding: 123px 14% 0; box-sizing: border-box; } .product-info-banner .slides .pic { float: right; width: 23.5%; text-align: center; } .product-info-banner .slides a { display: inline-block; width: 100%; } .product-info-banner .slides .con { width: 50%; float: left; } .product-info-banner .slides h2 { font-size: 34px; color: #004da1; line-height: 44px; } .product-info-banner .slides i { display: block; width: 49px; height: 1px; background: #aeb1b3; margin: 20px 0; } .product-info-banner .slides .font { font-size: 13px; color: #888888; line-height: 23px; } .product-info-banner .slides .shop { padding-left: 79px; width: 106px; height: 50px; line-height: 50px; background: url(../images/pro07.png) no-repeat center; background-size: 100% 100%; font-size: 16px; color: #fff; margin-right: 20px; margin-top: 40px; } .product-info-banner .slides .back { width: 185px; height: 50px; line-height: 50px; text-align: center; background: url(../images/box01.png) no-repeat center; background-size: 100% 100%; font-size: 16px; color: #fff; margin-top: 40px; } .product-info-banner .slides img { max-width: 100%; } .banner-list { height: 100%; position: relative; } .product-info-banner { height: 420px; position: relative; } .product-info-banner a.btn { width: 24px; height: 44px; opacity: 1; position: absolute; top: 50%; margin-top: -22px; background-size: 100% 100% !important; transition: left 0.3s, right 0.3s; } .product-info-banner a.prev { left: 0; background: url(../images/pro08.png) no-repeat center; } .product-info-banner a.prev:hover { left: 5px; background: url(../images/pro08_h.png) no-repeat center; } .product-info-banner a.next { right: 0; background: url(../images/pro09.png) no-repeat center; } .product-info-banner a.next:hover { right: 5px; background: url(../images/pro09_h.png) no-repeat center; } .product-info { padding: 56px 0 86px; } .product-info h2 { font-size: 30px; color: #333333; line-height: 50px; padding-bottom: 22px; border-bottom: 1px solid #e6e5e5; position: relative; } .product-info h2 span { font-size: 13px; color: #333; line-height: 50px; position: absolute; right: 0; top: 0; } .product-recommend { padding: 38px 0 66px; background: #f8f8f8; } .product-recommend h1 { font-size: 30px; color: #333; line-height: 50px; padding-bottom: 20px; } .product-info .box { width: 100%; overflow: auto; } .product-info .box table { width: 100%; text-align: center; margin-top: 21px; } .product-info .box tr { border-bottom: 1px solid #e5e5e5; cursor: pointer; transition: background 0.3s, border 0.3s; } .product-info .box th { font-weight: normal; font-size: 18px; color: #333333; line-height: 28px; padding: 14px 0; background: #fff; } .product-info .box td { font-size: 16px; color: #888888; line-height: 28px; padding: 14px 0; transition: color 0.3s; } .product-info .box tr:hover { background: #004da1; } .product-info .box tr:hover td { color: #fff; } .product-recommend .flex-direction-nav { display: none; } .product-recommend .flex-control-nav { bottom: -20px; } .product-recommend .flex-control-nav li { margin: 0 5px; } .product-recommend .flex-control-paging li a { width: 14px; height: 14px; background: url(../images/pro11.png) no-repeat center; background-size: 100% 100%; } .product-recommend .flex-control-paging li a.flex-active, .product-recommend .flex-control-paging li a:hover { background: url(../images/pro11_h.png) no-repeat center; background-size: 100% 100%; } .product-only-top { width: 100%; height: 600px } .only-back { background: url(../images/img_1.png) no-repeat center center; width: 100%; background-size: 100% 100%; padding-bottom: 110px; padding-top: 67px; position: relative; } .back-left { float: left; width: 43%; padding-bottom: 53px; background: url(../images/img_4.png) no-repeat 15.2% bottom; position: relative; left: -50px; opacity: 0; } .left-por1 { width: 57.5%; overflow: hidden; } .left-por2 { width: 61%; position: relative; box-shadow: 0 0 10px #6a6f77; margin-top: -216px; margin-left: 38.5% } .back-right { width: 49.3%; float: right; position: relative; right: -50px; opacity: 0; } .back-right h2 { font-size: 40px; color: #333; line-height: 96px; background: url(../images/img_5.png) no-repeat left bottom; background-size: 10.8%; margin: 107px 0 40px 0 } .back-right h2 b { font-weight: normal; color: #004da1 } .back-right h3 { font-size: 24px; color: #004da1; line-height: 34px; padding-bottom: 20px } .back-right p { font-size: 13px; color: #888888; line-height: 23px; } .back-right span { display: block; font-size: 16px; color: #666666; line-height: 26px; } .only-one { background: url(../images/img_6.png) no-repeat center center; background-size: 100% 100%; padding: 135px 0 88px 0; position: relative; } .only-one .list { padding-bottom: 88px; position: relative; } .only-one .slides li { width: 330px; margin-right: 28px; float: none; position: relative; left: 80px; opacity: 0; } .only-one .slides dl { width: 100%; } .only-one .slides dd { width: 86%; padding: 30px 7% 7px; background: #fff; margin-bottom: 28px; border-radius: 5px; background: #fff; } .only-one .slides h2 { font-size: 18px; color: #004da1; line-height: 33px; padding-bottom: 7px; } .only-one .slides img { width: 27px; margin-right: 7px; } .only-one .slides p { font-size: 13px; color: #888; line-height: 24px; min-height: 96px; } .only-one .flex-control-nav { bottom: 0px; } .only-one .flex-control-nav li { margin: 0 5px; } .only-one .flex-control-paging li a { width: 15px; height: 15px; background: url(../images/join16.png) no-repeat center; background-size: 100% 100%; } .only-one .flex-control-paging li a.flex-active, .only-one .flex-control-paging li a:hover { background: url(../images/join16_h.png) no-repeat center; background-size: 100% 100%; } .only-one .flex-direction-nav { display: none; } .only-service { width: 100%; background: url(../images/pro14.jpg) no-repeat center; background-size: cover; padding: 99px 0 129px; } .only-service h1 { font-size: 36px; color: #004da1; line-height: 56px; padding-bottom: 30px; border-bottom: 3px solid #dcdcdd; margin-bottom: 37px; } .only-service .slides li { width: 330px; margin-right: 28px; background: #fff; float: left; opacity: 0; left: 80px; position: relative; } .only-service .slides h2 { width: 88%; margin: 0 auto; font-size: 18px; color: #333333; line-height: 28px; padding: 15px 0 12px; } .only-service .slides .pic { width: 100%; } .only-service .slides img { max-width: 100%; } .only-service .slides .font { font-size: 13px; color: #888; line-height: 24px; width: 88%; margin: 0 auto; padding: 24px 0; height: 212px; overflow: hidden; } .font-s { overflow: auto; height: 100%; max-height: 300px; padding-right: 5px; } .font-s::-webkit-scrollbar { width: 2px; background-color: #f5f5f5; } /*定义滚动条的轨道,内阴影及圆角*/ .font-s::-webkit-scrollbar-track { border-radius: 10px; background-color: #f5f5f5; } /*定义滑块,内阴影及圆角*/ .font-s::-webkit-scrollbar-thumb { /*width: 10px;*/ height: 20px; border-radius: 10px; background-color: #555; } .only-service .flex-direction-nav { display: none; } .only-service .flex-control-nav { bottom: -76px; } .only-service .flex-control-nav li { margin: 0 5px; } .only-service .flex-control-paging li a { width: 14px; height: 14px; background: url(../images/pro11.png) no-repeat center; background-size: 100% 100%; } .only-service .flex-control-paging li a.flex-active, .only-service .flex-control-paging li a:hover { background: url(../images/pro11_h.png) no-repeat center; background-size: 100% 100%; } .case-list { padding: 35px 0 65px; background: #f8f8f8; } .case-list ul { padding-bottom: 30px; width: 100%; } .case-list li { width: 23.7%; margin-right: 1.7%; background: #fff; float: left; margin-bottom: 40px; transition: background 0.3s; } .case-list li.li4 { margin-right: 0; } .case-list li a { display: block; width: 100%; } .case-list li .pic { width: 100%; overflow: hidden; position: relative; } .case-list li .pic .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: url(../images/pic.png) no-repeat center; background-size: 100% 100%; z-index: 2; transition: opacity 0.3s; } .case-list li img { max-width: 100%; transition: all 0.3s; } .case-list li .con { width: 82%; display: block; padding: 23px 9%; } .case-list li h2 { font-size: 16px; color: #333; line-height: 30px; transition: color 0.3s; } .case-list .time { font-size: 13px; color: #999; font-family: 'Arial'; line-height: 27px; font-style: italic; transition: color 0.3s; } .case-list li:hover .bg { opacity: 1; } .case-list li:hover img { transform: scale(1.1, 1.1); } .case-list li:hover h2 { color: #014ea1; } .website-map { position: fixed; top: 0; left: 0; background: #fff; z-index: 10; display: none; } .website-map .top { width: 100%; height: 80px; line-height: 80px; box-shadow: 0 5px 10px rgba(0,0,0,.1); } .website-map .top .logo { width: 144px; padding: 0 45px 0 33px; height: 80px; display: block; line-height: 80px; border-right: 1px solid #d3d3d3; } .website-map .top .font { padding-left: 40px; height: 80px; display: block; line-height: 80px; width: 150px; } .website-map .top .close { width: 22px; height: 22px; display: block; background: url(../images/case06.png) no-repeat center; margin: 29px 44px 0 0; } .website-map .map-list { padding-top: 200px; } .website-map .map-list ul { width: 100%; position: relative; left: 5%; } .website-map .map-list li { float: left; width: 14.2%; } .website-map .map-list h2 { font-size: 18px; color: #333333; line-height: 28px; padding-bottom: 15px; } .website-map .map-list p { font-size: 13px; color: #666; line-height: 30px; } .website-map .map-list a { color: #666; transition: color 0.3s; } .website-map .map-list a:hover { color: #004da1; } .load { background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; } .load .box { width: 144px; height: 21px; position: fixed; top: 50%; left: 50%; margin: -10px 0 0 -72px; } .load .box img { width: 144px; height: 21px; } .load .box .one { position: absolute; top: 2px; left: 0; height: 21px; width: 0; background: url(../images/logo01.png) no-repeat center left; animation: wave 4s infinite linear; -webkit-animation: wave 4s infinite linear; } @-webkit-keyframes wave { 0% { width: 0; } 100% { width: 144px; } } .zindex { position: relative; top: 0px; opacity: 1; z-index: 2; filter: alpha(opacity=100); } footer { position: relative; /*top: 100px;*/ opacity: 1; z-index: 1; filter: alpha(opacity=100); } header { z-index: 8; position: relative; } .about-intro { padding: 65px 0 0; position: relative; z-index: 2; } .about-intro .join-title { text-align: left; } .about-intro .join-title i { margin: 30px 0 0; } .about-intro h3 { font-size: 30px; color: #333333; line-height: 34px; padding: 40px 0 32px; } .about-intro p { font-size: 18px; color: #666; line-height: 2; padding-bottom: 10px; } .about-intro img { max-width: 100%; height: auto !important; padding: 15px 0 7px; } .about-intro .list { width: 100%; padding: 55px 0 48px; text-align: center; background: #004da1; margin-top: 40px; } .about-intro .list li { float: left; width: 33.33333%; text-align: center; background: url(../images/a09.png) no-repeat left center; } .about-intro .list h2 { font-size: 50px; font-family: 'Arial'; line-height: 55px; color: #fff; position: relative; } .about-intro .list h4 { font-size: 13px; color: #fff; opacity: 0.5; font-weight: normal; line-height: 23px; padding-top: 8px; } .about-intro .list .unit { font-size: 13px; position: absolute; top: 0; left: 65%; line-height: 13px; } .about-intro .list .add { font-size: 20px; line-height: 20px; position: absolute; top: 0; left: 59%; } .about-intro .list li:nth-child(3) .add { left: 55%; } .about-culture { padding: 180px 0 100px; background: url(../images/culture_bg.jpg) no-repeat center; width: 100%; position: relative; z-index: 1; margin-top: -100px; background-size: cover; } .about-culture .join-title h2 { color: #fff; } .about-culture .join-title i { background: #c8cacf; } .about-culture .list { position: relative; } .about-culture .slides li { width: 31.333%; margin: 0 1% 20px 1%; float: left; border-radius: 5px; text-align: center; position: relative; } .about-culture .slides li .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/a13.png) no-repeat center; z-index: 1; display: block; background-size: cover; border-radius: 5px; transition: all 0.3s; } .about-culture .slides li:hover .bg { background: #fff; transform: scale(1.1, 1.1); } .about-culture .slides a { display: block; width: 80%; position: relative; border-radius: 5px; z-index: 2; padding: 38px 10% 40px; background: #fff; min-height: 340px; } .about-culture .slides .pic { width: 93px; height: 93px; margin: 0 auto; text-align: center; line-height: 93px; background: url(../images/a14.png) no-repeat center; background-size: 100% 100%; } .about-culture .slides img { max-width: 80%; max-height: 50px; } .about-culture .slides h2 { font-size: 20px; color: #333; line-height: 30px; padding: 14px 0 16px; } .about-culture .slides i { display: block; width: 22px; height: 1px; background: #c5c5c6; margin: 0 auto 14px; } .about-culture .slides .font { font-size: 13px; color: #888888; line-height: 24px; min-height: 96px; transition: all 0.3s; } .about-culture .slides li:hover .font { transform: scale(1.1, 1.1); } .about-culture .flex-viewport { padding: 64px 0 75px; } .about-culture .flex-control-nav { bottom: 0; } .about-culture .flex-control-nav li { margin: 0 7px; } .about-culture .flex-control-paging li a { width: 14px; height: 14px; background: url(../images/a12.png) no-repeat center; background-size: 100% 100%; } .about-culture .flex-control-paging li a.flex-active, .about-culture .flex-control-paging li a:hover { background: url(../images/a12_h.png) no-repeat center; background-size: 100% 100%; } .about-history { width: 100%; padding: 87px 0 112px; background: url(../images/a17.jpg) no-repeat center; background-size: cover; position: relative; } .about-history .pc-history { position: relative; margin-top: 77px; height: 413px; background: url(../images/a18.png) no-repeat center; } .pc-history .box { width: 88.6%; margin: 0 auto; position: relative; height: 413px; overflow: hidden; } .pc-history .box ul { float: left; position: relative; } .pc-history .box li { width: 318px; background: #fff; float: left; margin-left: -104px; height: 413px; position: relative; background: url(../images/a19.png) no-repeat center; transition: background 0.3s; } .pc-history .box li.om { background: url(../images/a19_h.png) no-repeat center; } .pc-history .box li:first-child { margin-left: 0px; } .pc-history .box li.odd { } .pc-history .box li .bord:hover h2 { background: #004da1; color: #fff; } .pc-history .box li h2 { font-size: 24px; color: #666; background: #e0e0e0; line-height: 34px; padding: 5px 0 4px; text-align: center; transition: background 0.3s, color 0.3s; } .pc-history .box .bord { border: 1px solid #e0e0e0; background: #fff; position: relative; cursor: pointer; margin-bottom: -20px; } .pc-history .box li.odd .bord { margin-top: 233px; margin-bottom: 0; } .pc-history .box .bord:after { content: ""; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 13px solid #e0e0e0; position: absolute; left: 50%; margin-left: -13px; bottom: -13px; transition: background 0.3s; } .pc-history .box li.odd .bord:after { border-top: none; border-bottom: 13px solid #e0e0e0; bottom: auto; top: -13px; } .pc-history .box li .bord:hover:after { border-top: 13px solid #004da1; } .pc-history .box li.odd .bord:hover:after { border-top: none; border-bottom: 13px solid #004da1; } .pc-history .box .con { padding: 10px 15px 20px; width: 288px; } .pc-history .box p { padding-left: 18px; font-size: 13px; color: #888888; line-height: 25px; background: url(../images/a20.png) no-repeat left 10px; } .pc-history a.btn { width: 43px; height: 44px; display: block; position: absolute; top: 50%; margin-top: -22px; transition: background 0.3s; } .w1580 { width: 1580px; position: relative; margin: 0 auto; } .pc-history a.prev { background: url(../images/a21.png) no-repeat center; left: 0; } .pc-history a.prev:hover { background: url(../images/a21_h.png) no-repeat center; } .pc-history a.next { background: url(../images/a22.png) no-repeat center; right: 0; } .pc-history a.next:hover { background: url(../images/a22_h.png) no-repeat center; } .mobile-history { height: 0; overflow: hidden; } .about-honor { width: 100%; padding: 75px 0 75px; background: url(../images/a27.jpg) no-repeat center; background-size: cover; } .about-honor .link { position: relative; width: 325px; margin: 47px auto; cursor: pointer; z-index: 9; } .about-honor .link dt { background: #3975b4 url(../images/a29.png) no-repeat 90% center; padding: 0 6%; width: 88%; height: 50px; line-height: 50px; font-size: 16px; color: #ffffff; } .about-honor .link dd { width: 100%; position: absolute; top: 50px; left: 0; display: none; } .about-honor .link a { padding: 0 6%; width: 88%; height: 50px; line-height: 50px; font-size: 16px; color: #ffffff; background: #3975b4; display: block; transition: background 0.3s; } .about-honor .link a:hover { background: #004da1; } .about-honor #honor { display: inline-block; margin-top: 50px; width: 100%; } .about-honor #honor li { width: 23%; margin: 10px 1%; float: left; } .about-honor #honor li img { max-width: 100%; } .revolve { position: relative; width: 100%; padding-bottom: 30px; } .revolve .btn { width: 43px; height: 44px; background: url(../images/a35.png) no-repeat center; background-size: 100% 100%; display: block; position: absolute; top: 50%; margin-top: -58px; color: #fff; font-size: 20px; font-family: '宋体'; text-align: center; line-height: 44px; transition: background 0.3s; } .revolve .btn:hover { background: url(../images/a35_h.png) no-repeat center; background-size: 100% 100%; } .revolve .btn.prev { left: 0; } .revolve .btn.next { right: 0; } .revolve .w1200 { width: 1200px; position: relative; margin: 0 auto; overflow: hidden; } .revolve li { position: absolute; width: 46.8%; text-align: center; -webkit-perspective: 100; perspective: 100; opacity: 0; cursor: pointer; filter: alpha(opacity=0); } .revolve li img { width: 100%; } .revolve .tips { font-size: 16px; color: #fff; line-height: 36px; position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; } .about-duty { padding: 75px 0; background: #f7f7f7; } .about-duty .list { width: 100%; padding-top: 43px; } .about-duty-intro { width: 49%; margin-right: 2%; overflow: hidden; position: relative; } .about-duty-intro .slides li { width: 100%; position: relative; } .about-duty-intro .slides img { max-width: 100%; max-height: 100%; } .about-duty-intro .slides p { padding: 78px 4% 10px; font-size: 20px; color: #ffffff; width: 92%; line-height: 40px; position: absolute; bottom: 0; left: 0; background: url(../images/a31.png) no-repeat center; background-size: 100% 100%; } .about-duty-intro .flex-control-nav { bottom: 10px; right: 0; text-align: right; z-index: 3; overflow: hidden; } .about-duty-intro .flex-control-nav li { margin: 0 5px; } .about-duty-intro .flex-control-paging li a { width: 9px; height: 9px; background: url(../images/a32.png) no-repeat center; background-size: 100% 100%; } .about-duty-intro .flex-control-paging li a.flex-active, .about-duty-intro .flex-control-paging li a:hover { background: url(../images/a32_h.png) no-repeat center; background-size: 100% 100%; } .about-duty .right-list { width: 48.9%; float: right; } .about-duty .right-list li { width: 48%; float: left; background: #fff; } .about-duty .right-list li.odd { float: right; } .about-duty .right-list a, .load-list li a { width: 100%; display: block; float: left; padding-bottom: 34px; } .about-duty .right-list .pic, .load-list li .pic { width: 100%; overflow: hidden; } .about-duty .right-list img, .load-list li img { width: 100%; transition: all 0.3s; } .about-duty .right-list .con, .load-list li .con { display: block; width: 83%; margin: 20px auto 0; } .about-duty .right-list h2, .load-list li h2 { font-size: 16px; color: #333333; line-height: 34px; transition: color 0.3s; } .about-duty .right-list h3, .load-list li h3 { font-size: 12px; color: #999; line-height: 30px; padding-left: 21px; background: url(../images/ser09.png) no-repeat left center; background-size: 15px; } .about-duty .right-list .font, .load-list li .font { font-size: 13px; color: #888888; line-height: 24px; min-height: 72px; padding: 10px 0 3px; } .about-duty .right-list h4, .load-list li h4 { width: 29px; height: 15px; background: url(../images/a34.png) no-repeat center; background-size: 100% 100%; } .load-list { width: 100%; padding: 33px 0 54px; } .load-list li { float: left; width: 23.5%; margin-right: 2%; background: #fff; margin-bottom: 20px; } .load-list li.li4 { margin-right: 0; } .load-list li:hover img, .about-duty .right-list li:hover img { transform: scale(1.1, 1.1); } .load-list li:hover h2, .about-duty .right-list li:hover h2 { color: #004da1; } .load-btn { width: 185px; height: 50px; margin: 0 auto; cursor: pointer; text-align: center; line-height: 50px; font-size: 16px; color: #fff; border-radius: 28px; background: #004da1; } .load-info { font-size: 20px; height: 50px; line-height: 50px; color: #999; text-align: center; display: none; } .service-flow { width: 100%; background: url(../images/ser13.jpg) no-repeat center; background-size: cover; padding: 52px 0 50px; } .service-flow .join-title h2 { color: #fff; } .service-flow .join-title i { background: #d0d0d0 } .service-flow .list { margin-top: 56px; width: 100%; } .service-flow .list li { float: left; width: 23.5%; margin: 0 1.7% 30px 0; position: relative; z-index: 1; cursor: pointer; } .service-flow .list li.in { z-index: 2; } .service-flow .list li.on { margin-right: 0; } .service-flow .list .tit { width: 100%; height: 59px; background: #fff; } .service-flow .list h2 { width: 18%; text-align: center; line-height: 59px; font-size: 24px; color: #fff; float: left; background: #004da1; margin-right: 6%; } .service-flow .list .font { width: 76%; font-size: 16px; color: #333; float: left; line-height: 26px; padding: 16px 0 17px; } .service-flow .list .con { position: absolute; top: 59px; padding: 16px 9% 4px; width: 82%; background: #fff; height: 200px; left: 0; display: none; } .service-flow .list li.bot .con { top: auto; bottom: 59px; } .service-flow .list p { font-size: 13px; line-height: 29px; color: #888; } #i-navli { position: fixed; top: 50%; left: 1.7%; z-index: 9; margin-top: -97px; } #i-navli li { padding: 8px 0; width: 90px; font-size: 14px; color: #fff; line-height: 23px; position: relative; cursor: pointer; opacity: 0.5; } #i-navli li span.line { background: #fff; width: 15px; position: absolute; bottom: 8px; left: 0; opacity: 0.5; display: block; height: 1px; transition: width 0.5s; } #i-navli li.current { opacity: 1; } #i-navli.on li { color: #888; } #i-navli.on li span.line { background: #ddddde; } #i-navli li span.font { margin-left: 15px; display: none; } #i-navli li:hover span.font { display: inline-block; } #i-navli li:hover span.line { width: 100%; } #i-navli.on li:hover { color: #004da1; opacity: 1; } #i-navli.on li { color: #7e7e7f; } #i-navli.on li span.line { background: #b1b1b1; opacity: 1; } .fixed-right { position: fixed; top: 50%; margin-top: -153px; right: 0; width: 50px; /*display: none;*/ z-index: 5; } .fixed-right.on { display: block; } .fixed-right li { height: 50px; margin-left: 0; width: 50px; background: #fff; position: relative; position: relative; margin-bottom: 1px; box-shadow: 0 0 10px rgba(0,0,0,.1); } .fixed-right li .lxfx-box { width: 50px; float: left; height: 50px; text-align: center; } .fixed-right li .lxfx-box p { line-height: 18px; padding: 10px 0; } .fixed-right li .lxfx-box span { width: 100%; height: 100%; display: block; transition: all 0.3s; } .fixed-right li .lxfx-box .bg1 { background: url(../images/r01.png) no-repeat center; } .fixed-right li .lxfx-box .bg2 { background: url(../images/r02.png) no-repeat center; } .fixed-right li .lxfx-box .bg3 { background: url(../images/r03.png) no-repeat center; } .fixed-right li .lxfx-box .bg4 { background: url(../images/r04.png) no-repeat center; } .fixed-right li .lxfx-box .bg5 { background: url(../images/r05.png) no-repeat center; } .fixed-right li .lxfx-box .bg6 { background: url(../images/r06.png) no-repeat center; } .fixed-right li .lxfx-box .bg7 { background: url(../images/bg.png) no-repeat center; } .fixed-right li.top .lxfx-box { background: #004da1; } .fixed-right li img { position: absolute; top: 0; right: 88px; display: none; } .fixed-right li a { display: block; width: 100%; } .fixed-right li.top { background: #004da1; box-shadow: none; border: none; } .fixed-right li.id { width: 195px; } .fixed-right li span.tel { font-size: 18px; color: #004da1; float: left; height: 50px; line-height: 50px; padding-left: 15px; background: url(../images/r07.png) no-repeat left center; } .fixed-right li:hover .lxfx-box .bg1 { background: url(../images/r01_h.png) no-repeat center; } .fixed-right li:hover .lxfx-box .bg2 { background: url(../images/r02_h.png) no-repeat center; } .fixed-right li:hover .lxfx-box .bg3 { background: url(../images/r03_h.png) no-repeat center; } .fixed-right li:hover .lxfx-box .bg4 { background: url(../images/r04_h.png) no-repeat center; } .fixed-right li:hover .lxfx-box .bg5 { background: url(../images/r05_h.png) no-repeat center; } .fixed-right li:hover .lxfx-box .bg7 { background: url(../images/bg_h.png) no-repeat center; } .pc-header { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 3; background: #fff; height: 80px; box-shadow: 0 3px 10px rgba(0,0,0,.1); opacity: 1; filter: alpha(opacity=100); } .pc-header .con { position: absolute; top: 0; right: -320px; width: 320px; height: 80px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.1); } .pc-header .nav-btn { width: 80px; height: 80px; } .pc-header .nav-btn img { width: 100%; height: 100%; } .pc-header .con .logo { width: 240px; text-align: center; line-height: 80px; background: #fff; } .pc-header .con .logo img { max-width: 80%; position: relative; top: 0; transition: top 0.3s; } .pc-header .con .logo:hover img { top: -3px; } .pc-header .header-box { width: 100%; height: 80px; } .pc-header .header-box .logo { width: 16%; height: 100%; line-height: 80px; border-right: 1px solid #e8e8e8; box-sizing: border-box; text-align: center; } .pc-header .header-box img { max-width: 80%; position: relative; top: 0; transition: top 0.3s; } .pc-header .header-box .logo:hover img, .pc-header .header-box .shop:hover img { top: -5px; } .pc-header .header-box .font { height: 100%; width: 13%; line-height: 80px; text-align: center; } .pc-header .header-box .serch-btn { width: 4%; text-align: center; height: 100%; border-right: 1px solid #e8e8e8; box-sizing: border-box; background: url(../images/head03.png) no-repeat center; background-size: 24%; transition: background 0.3s; } .pc-header .header-box .serch-btn:hover { background: url(../images/head03_h.png) no-repeat center; background-size: 24%; } .pc-header .header-box .laun { width: 4%; text-align: center; height: 100%; border-right: 1px solid #e8e8e8; box-sizing: border-box; font-size: 18px; color: #666; line-height: 80px; transition: color 0.3s; } .pc-header .header-box .laun:hover { color: #004da1; } .pc-header .header-box .shop { width: 4%; text-align: center; height: 100%; line-height: 80px; border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; box-sizing: border-box; } .pc-header .header-box nav { width: 60%; height: 100%;/*margin-right: 3%;*/ } .pc-header .header-box ul { width: 100%; } .pc-header .header-box li { width: 14%; float: left; text-align: center; height: 100%; font-size: 14px; line-height: 80px; position: relative; } .pc-header .header-box a.tit { width: 100%; text-align: center; height: 100%; color: #666666; display: block; position: relative; transition: color 0.3s; } .pc-header .header-box .tit .line { width: 0; height: 3px; background: #004da1; position: absolute; bottom: 0; left: 50%; transition: left 0.3s, width 0.3s; } .pc-header .header-box li:hover .tit, .pc-header .header-box li.cur .tit { color: #004da1; } .pc-header .header-box li:hover .tit .line, .pc-header .header-box li.cur .tit .line { width: 100%; left: 0; } .pc-header .header-box nav .con1, .pc-header .header-box nav .con2 { height: 70px; position: fixed; left: 0; top: 80px; text-align: center; background: #f8f8f8; line-height: 70px; display: none; } .pc-header .header-box nav .con1 a, .pc-header .header-box nav .con2 dd { display: inline-block; width: 95px; margin: 0 5px; height: 100%; font-size: 13px; color: #888; position: relative; transition: color 0.3s; } .pc-header .header-box nav .con2 .second { width: 100%; height: 100%; font-size: 13px; color: #888; display: block; position: relative; transition: color 0.3s; } .pc-header .header-box nav .con1 .line1, .pc-header .header-box nav .con2 .line1 { width: 0; height: 2px; background: #004da1; position: absolute; bottom: 0; left: 50%; transition: left 0.3s, width 0.3s; } .pc-header .header-box nav .con1 a:hover, .pc-header .header-box nav .con2 dd:hover .second { color: #004da1; } .pc-header .header-box nav .con1 a:hover .line1, .pc-header .header-box nav .con2 dd:hover .line1 { width: 100%; left: 0; } .pc-header .header-box nav .three { position: fixed; left: 0; top: 150px; text-align: center; background: #fff; display: none; padding: 40px 0; border-bottom: 1px solid #eee; } .form-horizontal .controls { margin: 0 !important; } .pc-header .header-box nav .three a { width: 25%; float: left; box-sizing: border-box; border-left: 1px solid #e6e5e5; text-align: center; } .pc-header .header-box nav .three a:first-child { border-left: none; } .pc-header .header-box nav .three img { max-width: 80%; } .pc-header .header-box nav .three a:hover h2 { color: #004da1; } .pc-header .header-box nav .three h2 { font-size: 20px; color: #666; line-height: 40px; width: 100%; transition: color 0.3s; } .pc-header .header-box nav .three i { display: block; width: 28px; height: 1px; background: #e6e5e5; margin: 10px auto; } .pc-header .header-box nav .three p.text { font-size: 13px; color: #888; line-height: 24px; height: 72px; width: 60%; margin: 0 auto; } .pc-header .serch-con { position: fixed; top: 80px; right: 0; width: 200px; background: #fff; z-index: 2; display: none; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .pc-header .serch-con .text { width: 74%; border: none; background: none; padding: 10px 2%; } .pc-header .serch-con .submit { width: 20%; background: url(../images/head03.png) no-repeat center; height: 36px; border: none; background-size: 35%; transition: background 0.3s; } .pc-header .serch-con .submit:hover { background: url(../images/head03_h.png) no-repeat center; background-size: 35%; } .mobile-header { height: 60px; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); position: relative; z-index: 2; position: fixed; top: 0; left: 0; width: 100%; } .mobile-header .w1400 { height: 100%; } .mobile-header .logo { display: inline-block; height: 100%; width: 45%; line-height: 60px; } .mobile-header .logo img { width: 100%; } .mobile-header .nav-btn { width: 23px; height: 16px; position: relative; cursor: pointer; margin: 22px 0 0 4%; } .mobile-header .nav-btn .line { display: block; width: 100%; height: 2px; background-color: #292929; position: absolute; left: 0; } .mobile-header .nav-btn .line1 { top: 0; -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } .mobile-header .nav-btn .line2 { top: 7px; } .mobile-header .nav-btn .line3 { bottom: 0; -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } .mobile-header .nav-btn.active { -webkit-animation: rotate 0.3s linear 0s; animation: rotate 0.3s linear 0s; } .mobile-header .nav-btn.hover .line { left: 0.06rem; } .mobile-header { display: none; } .mobile-header .search-btn { display: block; width: 11%; height: 60px; background: url(../images/head03.png) no-repeat center center; background-size: auto; border-right: 1px solid #e6e5e5; cursor: pointer; } .mobile-header .sub-menu { width: 92%; padding: 14px 4%; display: none; position: absolute; left: 0; top: 60px; overflow-y: auto; background-color: #f5f5f5; } .mobile-header .sub-menu ul, .mobile-header .sub-menu li { width: 100%; } .mobile-header .sub-menu li { border-bottom: 1px solid #dcdcdc; } .mobile-header .sub-menu .tit { display: block; width: 91%; padding: 0 4.5%; line-height: 40px; color: #000; position: relative; } .mobile-header .sub-menu .sub-tit:after { content: ''; display: block; width: 13px; height: 13px; background: url(../images/ico_03.png) no-repeat center; background-size: 100% auto; position: absolute; right: 4.5%; top: 14px; } .mobile-header .sub-menu .sub-tit.on { background-color: #073190; color: #fff; } .mobile-header .sub-menu .sub-tit.on:after { background: url(../images/ico_03_h.png) no-repeat center; background-size: 100% auto; } .mobile-header .sub-menu .sec-list { line-height: 30px; padding: 5px 4.5%; display: none; } .mobile-header .sub-menu .sec-list p { background: url(../images/ico_04.png) no-repeat left center; background-size: 3px auto; } .mobile-header .sub-menu .sec-list a { padding-left: 20px; width: 94%; display: block; color: #666; } .search-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background-color: #000; opacity: 0.8; filter: Alpha(opacity=80); display: none; } .m-search-box { width: 92%; border: 1px solid #aaa; position: fixed; left: 3%; top: 54px; height: 40px; z-index: 9999; display: none; } .m-search-box input.tex { border: none; background: none; font-size: 12px; font-family: "Arial"; color: #a7a7a7; height: 24px; line-height: 24px; padding: 8px 4%; width: 80%; } .m-search-box input.search-btn { border: none; width: 35px; height: 40px; background: url(../images/ico_08.png) no-repeat center; background-size: 15px auto; } .m-close-search { display: block; width: 15px; height: 15px; background: url(../images/ico_07.png) no-repeat center; background-size: 100% auto; position: fixed; right: 4%; top: 15px; cursor: pointer; z-index: 9999; display: none; } .wel-banner { width: 100%; height: 100%; position: relative; } .wel-banner li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background-size: cover !important; } .wel-banner li a { display: block; width: 100%; height: 100%; } .wel-banner li .w1200 { height: 100%; } .wel-banner li .con { position: absolute; left: 0; top: 50%; margin-top: -145px; } .wel-banner li h3 { font-size: 30px; color: #fff; line-height: 50px; position: relative; top: -50px; opacity: 0; } .wel-banner li h2 { font-size: 54px; color: #fff; font-weight: bold; line-height: 98px; position: relative; top: -50px; opacity: 0; } .wel-banner li p.font { font-size: 25px; color: #ffffff; line-height: 40px; padding: 10px 0 20px; position: relative; top: -50px; opacity: 0; } .wel-banner li span.bg { display: block; width: 121px; height: 41px; background: url(../images/wel03.png) no-repeat center; background-size: 100% 100%; position: relative; top: 50px; opacity: 0; } .wel-banner .btns, .wel-swiper .swiper-pagination { position: absolute; bottom: 17px; left: 50%; width: 100%; height: 19px; text-align: center; margin-left: -50%; } .wel-swiper .swiper-pagination { left: 0; margin-left: 0; bottom: 25px !important; } .wel-banner .btns span, .wel-swiper .swiper-pagination-bullet { width: 19px; height: 19px; background: url(../images/wel02.png) no-repeat center; background-size: 100% 100%; margin: 0 5px; display: inline-block; cursor: pointer; transition: background 0.3s; } .wel-swiper .swiper-pagination-bullet .wel-banner .btns span:hover, .wel-banner .btns span.cur, .wel-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: url(../images/wel02_h.png) no-repeat center; background-size: 100% 100%; } .i-wrap { position: relative; display: inline-block; width: 100%; } .i-wrap1 .mouth { width: 22px; height: 43px; position: absolute; left: 50%; bottom: 45px; margin-left: -11px; background: url(../images/wel01.png) no-repeat center; background-size: 100% 100%; z-index: 5; } .i-wrap2 { background: url(../images/wel05.jpg) no-repeat center; background-size: cover; } .i-wrap2 .wel-product { position: absolute; height: 60.8vh; left: 50%; top: 0; margin: -30.4vh 0 0 -700px; opacity: 0; } .wel-product .list { width: 100%; padding-top: 5.7vh; } .wel-product .list li { border: 1px solid #d8d8d8; width: 23.3%; margin-left: 1.9%; padding: 24px 2% 32px; position: relative; float: left; box-sizing: border-box; cursor: pointer; transition: background 0.3s, border 0.3s; } .wel-product .list li:first-child { margin-left: 0; } .wel-product .list a { display: block; width: 100%; } .wel-product .list h2 { font-size: 16px; color: #333; line-height: 26px; transition: color 0.3s; } .wel-product .list p { font-size: 12px; line-height: 22px; color: #888; font-family: 'Arial'; transition: color 0.3s; } .wel-product .list i { width: 14px; height: 14px; position: absolute; bottom: 20px; right: 20px; background: url(../images/wel06.png) no-repeat center; display: block; transition: background 0.3s; } .wel-product .list li:hover, .wel-product .list li.on { background: #004da1; border-color: #004da1; } .wel-product .list li:hover i, .wel-product .list li.on i { background: url(../images/wel06_h.png) no-repeat center; } .wel-product .list li:hover h2, .wel-product .list li:hover p, .wel-product .list li.on h2, .wel-product .list li.on p { color: #fff; } .wel-pro-list { width: 100%; } .wel-pro-list ul { width: 100%; } .wel-pro-list li { width: 23%; margin: 30px 1% 0 1%; /*height: 23vh;*/ float: left; text-align: center; position: relative; opacity: 0; left: 80px; } .wel-pro-list li a { display: block; width: 100%; height: 100%; } .wel-pro-list li .pic { width: 100%; line-height: 23px; background: #ececec; } .wel-pro-list li img { max-width: 100%; max-height: 100%; } .wel-pro-list li .con { width: 0; height: 0; background: url(../images/wel09.png) no-repeat center; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; overflow: hidden; transition: all 0.3s; } .wel-pro-list li h2 { font-size: 18px; color: #fff; line-height: 28px; padding: 8.4vh 0 2vh; opacity: 0; transition: opacity 0.1s; } .wel-pro-list li i { font-size: 14px; color: #fff; border-bottom: 3px solid #fff; line-height: 24px; font-style: normal; opacity: 0; transition: opacity 0.5s; } .wel-pro-list li:hover .con { width: 100%; height: 100%; left: 0; top: 0; } .wel-pro-list li:hover h2, .wel-pro-list li:hover i { opacity: 1; } .wel-more { width: 119px; height: 38px; margin: 7.5vh auto 0; border: 1px solid #e3e4e4; background: url(../images/wel08.png) no-repeat center; transition: background 0.3s, border 0.3s; display: block; } .wel-more:hover { background: #3d78b8 url(../images/wel08_h.png) no-repeat center; border-color: #3d78b8; } .i-wrap3 .video { width: 50%; height: 100%; overflow: hidden; position: relative; left: -50px; opacity: 0; cursor: pointer; } .i-wrap3 .video img{ position: absolute; top:50%; left:50%; width:auto; height: 100%; margin-top: -50%; } .i-wrap3, .i-wrap5 { position: relative; background: url(../images/wel10.jpg) no-repeat center; background-size: cover; } .i-wrap3 .wel-about { margin-left: 5.7%; width: 32%; position: relative; top: 50%; margin-top: -241px; right: -50px; opacity: 0; } .i-wrap3 .join-title { text-align: left; } .i-wrap3 .join-title i { margin: 30px 0 0; } .i-wrap3 .wel-about h3 { font-size: 20px; color: #004da1; line-height: 30px; padding: 4.3vh 0 2.7vh; } .i-wrap3 .wel-about .font { font-size: 13px; color: #888; line-height: 24px; } .i-wrap3 .wel-more { margin: 4vh 0 6.3vh; } .i-wrap3 .wel-about li { float: left; width: 33.33333%; text-align: left; } .i-wrap3 .wel-about li:nth-child(3) { } .i-wrap3 .wel-about li h2 { font-size: 50px; font-family: 'Arial'; line-height: 55px; color: #004da1; position: relative; } .i-wrap3 .wel-about li h4 { font-size: 13px; color: #888; opacity: 0.5; font-weight: normal; line-height: 23px; padding-top: 8px; } .i-wrap3 .wel-about .unit { font-size: 13px; position: absolute; top: 0; left: 70%; line-height: 13px; } .i-wrap3 .wel-about .add { font-size: 20px; line-height: 20px; position: absolute; top: 0; left: 62%; } .i-wrap4 { background: url(../images/wel11.jpg) no-repeat center; background-size: cover; } .wel-news { position: absolute; top: 55%; opacity: 0; left: 50%; margin: -325px 0 0 -700px; } .wel-news .join-title h2 { color: #fff; } .wel-news .join-title i { background: #d0d0d0; } .wel-news .box { padding-top: 4vh; } .wel-news-intro { width: 46.7%; position: relative; overflow: hidden; position: relative; left: -50px; opacity: 0; } .wel-news-intro .slides li { width: 100%; float: left; } .wel-news-intro .slides .pic { width: 100%; overflow: hidden; } .wel-news-intro .slides img { max-width: 100%; transition: all 0.3s; } .wel-news-intro .slides li:hover img { transform: scale(1.2); } .wel-news-intro .slides a { display: block; width: 100%; } .wel-news-intro .slides .font { font-size: 18px; font-weight: bold; padding: 17px 20% 17px 4%; width: 76%; line-height: 38px; height: 38px; overflow: hidden; background: #004da1; color: #fff; } .wel-news-intro .flex-control-nav { bottom: 22px; text-align: right; right: 3%; z-index: 9; } .wel-news-intro .flex-control-nav li { margin: 0 5px; } .wel-news-intro .flex-control-paging li a { width: 9px; height: 9px; background: url(../images/wel13.png) no-repeat center; } .wel-news-intro .flex-control-paging li a:hover, .wel-news-intro .flex-control-paging li a.flex-active { background: url(../images/wel13_h.png) no-repeat center; } .wel-news-list { width: 53.3%; float: right; position: relative; right: -50px; opacity: 0; } .wel-news-list li { float: left; width: 100%; margin-bottom: 6.6vh; } .wel-news-list li a { float: left; width: 100%; } .wel-news-list li .time { width: 20%; text-align: right; margin-right: 6%; padding-top: 30px; } .wel-news-list li h2 { font-size: 34px; line-height: 33px; color: #858789; transition: color 0.3s; } .wel-news-list li h4 { font-size: 16px; color: #fff; opacity: 0.4; line-height: 24px; font-weight: normal; } .wel-news-list li .con { width: 74%; border-left: 1px solid #53575e; box-sizing: border-box; padding-left: 5%; } .wel-news-list li h3 { font-size: 18px; color: #fff; font-weight: bold; line-height: 28px; } .wel-news-list li p { font-size: 13px; color: #999999; line-height: 1.5; height: 38px; overflow: hidden; margin-top: 4px; } .wel-news-list li i { width: 28px; height: 14px; position: relative; left: 0; background: url(../images/wel14.png) no-repeat center; background-size: 100% 100%; display: block; margin-top: 20px; transition: background 0.3s, left 0.3s; } .wel-news-list li:hover i { left: 10px; background: url(../images/wel14_h.png) no-repeat center; background-size: 100% 100%; } .wel-news-list li:hover h2 { color: #fff; } .wel-service { position: absolute; top: 55%; left: 50%; margin: -300px 0 0 -700px; opacity: 0; } .wel-service .list { width: 100%; margin-top: 4vh; } .wel-service .list li { width: 31.1%; margin-left: 2.9%; background: #fff; float: left; position: relative; box-shadow: 0 0 10px rgba(0,0,0,.1); left: 50px; opacity: 0; } .wel-service .list li:first-child { margin-left: 0; } /*.wel-service .list li:nth-child(3){ background: none; box-shadow: none; }*/ .wel-service .list a { display: block; width: 100%; } .wel-service .list .pic { width: 100%; position: relative; overflow: hidden; } .wel-service .list .img { width: 100%; transition: all 0.3s; } .wel-service .list .box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: url(../images/wel16.png) no-repeat center; background-size: 100% 100%; text-align: center; opacity: 0; transition: opacity 0.5s; } .wel-service .list .box img { padding-top: 12vh; } .wel-service .list .con { display: block; width: 86%; margin: 0 auto; padding: 35px 0 37px; } .wel-service .list h2 { padding-left: 37px; font-size: 24px; color: #333333; line-height: 34px; transition: color 0.3s; } .wel-service .list li:nth-child(1) h2 { background: url(../images/wel19.png) no-repeat left center; } .wel-service .list li:nth-child(3) h2 { background: url(../images/wel20.png) no-repeat left center; } .wel-service .list li:nth-child(2) h2 { background: url(../images/wel26.png) no-repeat left center; } .wel-service .list li .font { font-size: 13px; line-height: 24px; color: #888888; padding: 19px 0 25px; } .wel-service .list li i { display: block; width: 29px; height: 10px; background: url(../images/wel21.png) no-repeat center; background-size: 100% 100%; transition: background 0.3s; } .wel-service .list .one:hover .img { transform: scale(1.2); } .wel-service .list .one:hover .box { opacity: 1; } .wel-service .list .one:hover h2 { color: #004da1; } .wel-service .list .one:hover i { background: url(../images/wel21_h.png) no-repeat center; background-size: 100% 100%; } .wel-service .list .ser { width: 100%; position: relative; padding: 14px 6% 0; box-sizing: border-box; } .wel-service .list .add { background: url(../images/wel23.jpg) no-repeat center; background-size: cover; margin-bottom: 29px; } .wel-service .list .odd { background: #004ea3; } .wel-service .list h3 { font-size: 24px; color: #fff; line-height: 54px; } .wel-service .list b { display: block; width: 30px; height: 1px; background: #e0e6ef; } .wel-service .list .text { font-size: 13px; color: #fff; opacity: 0.8; line-height: 24px; padding: 12px 0 16px; } .wel-service .list .bg { width: 35px; height: 35px; display: block; position: absolute; bottom: 20px; right: 20px; } .wel-service .list .add .bg { background: url(../images/wel24.png) no-repeat center; } .wel-service .list .odd .bg { background: url(../images/wel25.png) no-repeat center; } .wel-service .list .ser i { display: block; width: 29px; height: 10px; background: url(../images/wel22.png) no-repeat center; } .back-right .por.f-cb { margin-top: 30px; } .back-right .bak-link { display: block; width: 140px; height: 50px; background: #fff; border-radius: 30px; font-size: 16px; color: #004da1; float: left; text-align: center; margin-top: 10px; line-height: 50px; margin-right: 30px; transition: background 0.3s, color 0.3s; } .back-right .bak-link:hover { background: #004da1; color: #fff; } .only-video { padding: 30px 0; } .only-video .box { position: relative; width: 100%; overflow: hidden; } .only-video .box aboutimg { width: 100%; height: 545px; } .only-video .box .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: url(../images/pic13.png) no-repeat center; background-size: cover; } .book-box { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; display: none; } .book-box .bg { width: 100%; height: 100%; background: #000; opacity: 0.3; filter: alpha(opacity=30); position: absolute; top: 0; left: 0; z-index: 1; } .book-box .box { width: 46.6%; padding: 20px 2.5% 50px; background: #fff; position: fixed; top: 50%; left: 50%; margin: -251px 0 0 -25.8%; z-index: 2; } .book-box .box .close { width: 56px; height: 56px; background: url(../images/ser12.jpg) no-repeat center; background-size: 100% 100%; position: absolute; top: 0; right: -78px; cursor: pointer; } .book-box .box .btn { padding: 0 0 0 28px; width: 48.5%; box-sizing: border-box; border: 1px solid #e6e5e5; margin-bottom: 13px; height: 38px; line-height: 38px; position: relative; } .book-box .box .btn input { border: none; padding: 0; margin: 0; background: none; width: 100%; height: 38px; line-height: 38px; font-size: 14px; color: #888888; } .book-box .box .cnv img { position: absolute; right: 3%; top: 50%; margin-top: -10px; } .book-box .box .cnv img.captcha { position: absolute; right: 3%; max-width: 100%; top: 50%; margin-top: -13px; } .book-box select { width: 100%; height: 33px; line-height: 33px; border: none; } .book-box .mas { padding: 0 0 0 28px; border: 1px solid #e6e5e5; width: 100%; box-sizing: border-box; margin-bottom: 13px; background-size: 1.5%; } .book-box .mas textarea { width: 100%; padding: 12px 0 0 0; font-size: 14px; color: #888888; line-height: 24px; border: none; margin: 0; height: 110px; } .book-box .box .btn input.submit, .book-box .box .btn input.reset { width: 175px; height: 40px; text-align: center; line-height: 40px; background: #004da1; font-size: 16px; color: #ffffff; border-radius: 28px; border: none; display: inline-block; margin-right: 12px; } .book-box .box .btn input.reset { margin-right: 0; } .book-box .name { background: url(../images/pp01.png) no-repeat 8px center; } .book-box .tel { background: url(../images/pp02.png) no-repeat 8px center; } .book-box .add { background: url(../images/pp03.png) no-repeat 8px center; } .book-box .time { background: url(../images/pp04.png) no-repeat 8px center; } .book-box .mas { background: url(../images/pp05.png) no-repeat 8px 18px; } .book-box .cnv { background: url(../images/pp06.png) no-repeat 8px center; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; } .book-box .box .btn.shf { width: 100%; border: none; padding-left: 0; margin-top: 10px; } .book-box .box h2 { font-size: 24px; color: #004da1; line-height: 62px; border-bottom: 1px solid #e6e5e5; margin-bottom: 13px; } .job-title { border: none; } .job-title h2 { font-size: 30px; color: #004da1; line-height: 50px; padding-bottom: 15px; border-bottom: 1px solid #e6e5e5; margin-bottom: 20px; text-align: left; } .job-title span.time { position: absolute; right: 0; top: 0; font-size: 20px; color: #999999; } .info-page .fl .line { width: auto; height: 50px; text-align: center; line-height: 50px; background: #004da1; color: #fff; font-size: 16px; border-radius: 8px; display: block; } .products-nav li { width: 10%; } .product-content { width: 100%; height:auto; display:inline-block; margin-bottom:50px; } .product-content li { float: left; font-size:18px; } .product-content li img{max-width:100%;} .product-content li:first-child { width: 55%; } .product-content li:last-child { width: 45%; text-align: right; } .product-content li p{font-size: 30px;color: #006699;} .product-content li span {font-size: 20px;} .pagesize{margin-top:50px;} .pagesize a,.pagesize span{ padding: 5px 8px; border: #004da1 solid 1px; border-radius: 3px; color: #004da1; } .pagesize a:hover,.pagesize span.thisclass{ color: #fff; background-color:#004da1; } .pagesize select{ width:40px; height:28px; }