@charset "utf-8"; *, :before, :after { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box } html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, form, fieldset, figure, figcaption, table, th, td img { margin: 0; padding: 0 } body { font-family: "Heiti SC", "Microsoft YaHei"; color: #333; font-size: 18px; line-height: 1.7; margin: 0 auto; background-color: #FFF } ol, ul, li { list-style: none } i, em { font-style: normal } a { color: #333; text-decoration: none; outline: none; cursor: pointer } a:hover, a:active, a:link, a:visited { text-decoration: none } fieldset, img, video { max-width: 100%; border: none; vertical-align: middle } input, select, textarea, button { color: #333; font-size: 16px; font-family: "Microsoft Yahei", sans-serif; outline: none; border: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box } input, button { border-radius: 0; -webkit-appearance: none } textarea { resize: none; outline: none; border: none; -webkit-appearance: none } input:-ms-clear { display: none } input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; outline: none } ::-webkit-input-placeholder { color: #999 } ::-moz-placeholder { color: #999 } :-ms-input-placeholder { color: #999 } :-moz-placeholder { color: #999 } table { border-collapse: separate } .clearfix:after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden } .clearfix { zoom: 1 } .transition { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s } .wrap { width: 98%; max-width: 1580px; margin: 0 auto } .wraper { width: 98%; max-width: 1200px; margin: 0 auto } .header { position: absolute; left: 0; width: 100%; z-index: 0; padding-top: 40px; line-height: 40px; z-index: 999 } .header:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 300px; background: -webkit-linear-gradient(top, #b9b9b9 0%, transparent 100%); background: -moz-linear-gradient(top, #b9b9b9 0%, transparent 100%); background: -ms-linear-gradient(top, #b9b9b9 0%, transparent 100%); background: -o-linear-gradient(top, #b9b9b9 0%, transparent 100%); background: linear-gradient(to bottom, #b9b9b9 0%, transparent 100%); z-index: -1 } .logo { float: left; width: 120px } .logo img { width: 100%; height: auto } .head-btn { float: right; width: 335px; color: #FFF; font-size: 16px } .head-btn a { width: 90px; height: 40px; line-height: 40px; text-align: center; text-transform: uppercase; margin-left: 20px } .btn-show { display: inline-block; color: #FFF; background-color: #FB605A; -webkit-box-shadow: 0 5px 10px rgba(250, 123, 118, 0.4); -moz-box-shadow: 0 5px 10px rgba(250, 123, 118, 0.4); -ms-box-shadow: 0 5px 10px rgba(250, 123, 118, 0.4); -o-box-shadow: 0 5px 10px rgba(250, 123, 118, 0.4); box-shadow: 0 5px 10px rgba(250, 123, 118, 0.4); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .btn-show:hover { -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px } .nav { overflow: hidden; display: block; text-align: center; margin-left: 10% } .nav ul li { position: relative; display: inline-block; margin-left: 40px } .nav ul li a { display: block; color: #FFF; font-size: 18px } .nav ul li:before { content: ""; position: absolute; bottom: 0; width: 0%; height: 3px; background-color: #FB605A; left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); transition: all .3s ease } .nav ul li:hover:before, .nav ul li.on:before { width: 50% } .banner { position: relative; line-height: 1; font-family: "Arial" } .banner .swiper-container { z-index: auto; } .banner .swiper-slide img { width: 100%; display: block; } .banner .sty1 { padding: 0 2%; position: absolute; left: 0; right: 0; top: 27%; z-index: 1000 } .banner .sty1 h2 { width: 800px; font-size: 70px; color: #ffffff; line-height: 1.12; font-weight: 900; text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.16) } .banner .sty1 p { width: 760px; margin-top: 30px; margin-bottom: 44px; font-size: 20px; color: #ffffff; line-height: 1.5; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.29) } .banner .sty1 .swtbtn { height: 57px; background: #ff463f; background: linear-gradient(to right, #ff463f, #fb605a); display: inline-block; padding: 0 3.7%; font-size: 20px; color: #fff; font-weight: bold; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); text-align: center; line-height: 57px; cursor: pointer; transition: all linear 0.3s; } .banner .sty1 .swtbtn:before { content: ""; width: 29px; height: 33px; background: url(../images/bannerswttb.png) center no-repeat; background-size: 100%; display: inline-block; vertical-align: middle; margin-bottom: 4px; margin-right: 20px } .banner .sty1 .swtbtn:hover { border-radius: 50px } .banner .sty2 { padding: 0 2%; position: absolute; left: 0; right: 0; bottom: -98px; z-index: 2 } .banner .sty2 ul { margin-left: -1.22% } .banner .sty2 li { width: 23.78%; height: 196px; float: left; margin-left: 1.22%; padding: 34px 0; background: #ffffff; text-align: center; position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) } .banner .sty2 li:before { content: ""; border: 1px solid #3360a4; position: absolute; left: 9px; right: 9px; top: 9px; bottom: 9px } .banner .sty2 li span { margin-top: 22px; margin-bottom: 17px; display: block; font-size: 36px; color: #00438b; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-image: -webkit-linear-gradient(left, #00438b, #2577d4); font-family: "方正粗黑宋简体" } .banner .sty2 li p { font-size: 18px; color: #666666; line-height: 1.5 } .index-hot { padding-top: 50px; padding-bottom: 100px } .index-hot h2 { width: 710px; margin: 0 auto; color: #00438B; font-size: 50px; line-height: 1.2; text-align: center } .hot-show ul { position: relative; margin-top: 80px } .hot-show li { position: relative; float: left; width: 28%; margin-left: 8%; } .hot-show li:first-child { margin-left: 0; } .hot-show li:before { content: ""; position: absolute; left: -60px; top: -65px; width: 374px; height: 443px; background: url(../images/hot-dot.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -1 } .hot-show li a { display: block } .hot-show li img { width: 100%; height: auto } .hot-show li:hover img { -webkit-border-radius: 20px 0 0 20px; -moz-border-radius: 20px 0 0 20px; -ms-border-radius: 20px 0 0 20px; -o-border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px } .hot-show li a.hot-tit { position: relative; color: #012144; font-size: 30px; line-height: 1.2; font-weight: bold; padding-left: 55px; margin-top: 50px; margin-bottom: 30px } .hot-show li a.hot-tit:hover { color: #FF8800 } .hot-show li a.hot-tit:before { content: ""; position: absolute; left: 0; top: 16px; width: 34px; height: 2px; background-color: #FDA82B } .hot-show li p { margin-left: 46px; position: relative; color: #6E757C; font-size: 16px; line-height: 20px; margin-bottom: 16px; padding-left: 13px; font-weight: 600 } .hot-show li p:before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background-color: #FDA82B; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50% } .hot-show ul li:nth-child(2) .hot-tit { width: 75% } .hot-show ul li:nth-child(2) p { width: 70% } .index-about { text-align: center; margin-top: -30px } .index-about h1 { width: 1000px; margin: 0 auto; color: #012144; font-size: 50px; line-height: 1.2 } .index-about p { color: #727581; font-size: 20px; line-height: 34px; width: 50%; margin: 50px auto } .index-about a { width: 200px; height: 66px; line-height: 66px; text-align: center; font-size: 20px; font-weight: bold } .index-case { margin-top: 100px; position: relative; z-index: 0 } .index-case:before { content: ""; position: absolute; left: 50%; bottom: 100px; width: 222px; height: 8px; margin-left: -166px; background-color: #FF8800; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; z-index: 2 } .index-case i { position: absolute; right: 0; bottom: -15px; font-size: 200px; line-height: 1; color: #F7F7F8; font-style: normal; font-weight: bold; z-index: -1 } .index-case span { position: absolute; left: 50%; bottom: 100px; margin-left: -170px; cursor: pointer } .index-case span:hover { background-color: #FF8800 } .case-pic { float: left; width: 50.5% } .case-pic a { display: block; padding-top: 75.4%; position: relative } .case-pic a img { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .case-info { float: left; width: 34%; margin-left: 4% } .index-tit { margin: 90px 0 130px; font-size: 46px; line-height: 72px; letter-spacing: -1px } .index-tit a { display: inline-block; color: #012144 } .index-tit a:hover { color: #FF8800 } .index-txt { color: #727581; font-size: 16px; line-height: 34px } .index-txt strong { display: block } .index-line { position: relative; z-index: 0 } .index-line:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 880px; background: url(../images/case-bg.jpg) #00438B no-repeat top; z-index: -1 } .line-info { display: inline-block; width: 45%; color: #FFF; margin-left: 2% } .line-info .index-tit { margin: 90px 0 40px } .line-info .index-tit a { color: #FFF } .line-info .index-tit a:hover { color: #FF8800 } .line-info p { color: #FFF } .line-info a.line-btn { width: 170px; height: 52px; line-height: 52px; text-align: center; font-size: 16px; margin-top: 40px; text-transform: uppercase } .line-pic { display: inline-block; vertical-align: top; margin-left: 3.3%; width: 44%; position: relative } .line-pic:after { content: ""; position: absolute; right: -140px; width: 140px; height: 140px; background-color: #FFFAEF } .line-pic a { display: block; padding-top: 75%; position: relative } .line-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .line-base { position: relative; background-color: #FFFAEF; margin-top: 140px; margin-left: 10.9%; padding: 100px 11% 180px 12.5% } .line-base:after { content: ""; position: absolute; right: 0; bottom: -50px; width: 770px; height: 210px; /*background: url(../images/logo-base.png) no-repeat right top*/ } .line-base h2 { display: block; text-align: center; font-size: 50px; line-height: 1.2 } .line-base ul { margin-top: 90px; margin-left: -6.3% } .line-base ul li { float: left; width: 27%; margin-left: 6.3% } .line-base ul li img { display: block; width: 80px; height: auto; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .line-base ul li a { display: block; color: #012144; font-size: 30px; line-height: 36px; font-weight: bolder; margin: 30px 0 } .line-base ul li a:hover { color: #FF8800 } .line-base ul li p { color: #606267; font-size: 18px; line-height: 24px; font-weight: bold; letter-spacing: 0.3px } .line-base ul li:hover img { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg) } .index-ep { margin-top: 100px } .index-ep .wrap { padding-left: 26px; padding-right: 26px } .ep-btn { float: right; width: 230px; text-align: right } .ep-btn a { width: 170px; height: 52px; line-height: 52px; text-align: center; font-size: 16px; text-transform: uppercase; margin-top: 120px } .ep-info { display: block; overflow: hidden } .ep-info strong { color: #012144; font-size: 50px; line-height: 72px; display: block; margin-bottom: 30px } .ep-info p { color: #606267; font-size: 20px; line-height: 1.5; height: 60px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .index-pro { margin-left: 10%; margin-top: 70px } .index-info.swiper-slide { width: 27% } .scroll-pic { position: relative; padding-top: 106.5%; display: block } .scroll-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .scroll-tit { display: block; color: #012144; font-size: 30px; line-height: 1.2; font-weight: bold; margin: 46px 0 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .scroll-tit:hover { color: #FF8800 } .index-info p { color: #727581; font-size: 18px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .pro-scroll.swiper-container-horizontal>.swiper-pagination-progressbar { top: 36px; left: 5%; width: 80%; height: 3px } .pro-scroll .swiper-pagination-progressbar { background-color: #FDF3E1 } .pro-scroll .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #FF8800 } .pro-scroll.swiper-container { padding-top: 140px } .pro-scroll .swiper-button-prev { width: 84px; height: 84px; margin-top: 0; top: 0; background: url(../images/pro-arrow01.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; outline: none } .pro-scroll .swiper-button-next { width: 84px; height: 84px; margin-top: 0; top: 0; right: 10%; background: url(../images/pro-arrow02.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; outline: none } .index-chosen { margin-top: 150px; text-align: center } .index-chosen h2 { color: #012144; font-size: 50px; line-height: 1.2 } .index-chosen p { color: #606267; font-size: 20px; line-height: 1.2; margin-top: 20px } .index-chosen ul { margin-top: 100px; text-align: center } .index-chosen ul li { display: inline-block; margin: 0 30px } .index-chosen .hzhbpic { max-width: 1496px; width: 100%; margin-top: 60px } .footer { margin-top: 200px; background: url(../images/foot-bg.jpg) bottom #003065; } .foot-fl { float: left; width: 53%; position: relative; padding-top: 8.35% } .foot-fl img { width: 100% } .foot-fl strong { position: absolute; display: inline-block; color: #FFF; font-size: 80px; line-height: 1.1 } .foot-fr { float: right; width: 46%; margin-top: -6% } .foot-fr img { width: 100% } .foot-list { margin-top: 150px; padding-top: 100px; border-top: 1px solid rgba(251, 96, 90, 0.1) } .foot-count { margin-top: 130px; line-height: 1.1 } .foot-count i { display: block; color: #FFC900; font-size: 20px } .foot-count strong { display: block; color: #FFF; font-size: 40px; margin-top: 30px } .foot-help { float: left; width: 30%; padding-left: 2% } .foot-cont { float: left; width: 21%; margin: 0 12% 0 14% } .foot-link { float: right; width: 20% } .foot-list dt { color: #FFF; font-size: 30px; font-weight: bold; line-height: 1.2; margin-bottom: 16px } .foot-list dt:first-letter { color: #FF8800 } .foot-list dd { color: #FFF; font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px; letter-spacing: 0.5px } .foot-list dd a { color: #FFF } .foot-list dd a:hover { color: #FF8800 } .foot-btn { width: 140px; height: 36px; line-height: 33px; border: 1px solid #FF8800; text-align: center; margin-top: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; position: relative; display: block; z-index: 1 } .foot-btn a { display: block; color: #FF8800; font-size: 18px } .foot-btn:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FF8800; z-index: -1; opacity: 0; -webkit-transform: scale3d(0.7, 1, 1); transform: scale3d(0.7, 1, 1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px } .foot-btn:hover a { color: #FFF } .foot-btn:hover:before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .foot-cont dd a { color: #FF8800 } .foot-cont dd a:hover { text-decoration: underline } .foot-con { margin: 50px auto 0; width: 66%; line-height: 30px; position: relative; padding-top: 15px; padding-bottom: 55px } .foot-con:before, .foot-con:after { content: ""; position: absolute; top: 0; width: 26px; height: 15px } .foot-con:before { left: -60px; background: url(../images/foot-fl.png) no-repeat } .foot-con:after { right: -60px; background: url(../images/foot-fr.png) no-repeat } .foot-prpo { float: right; width: 150px } .foot-prpo a { display: block; width: 150px; height: 30px; line-height: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.4); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color: rgba(255, 255, 255, 0.4); font-size: 16px } .foot-prpo a img { margin-right: 12px; vertical-align: middle; margin-top: -2px } .foot-prpo a:hover { color: #FF8800; border-color: #FF8800 } .foot-con p { display: block; overflow: hidden; color: rgba(255, 255, 255, 0.4); font-size: 16px } .show-fix { position: fixed; right: 12px; top: 220px; width: 145px; height: 345px; z-index: 9999 } .fix-online { position: absolute; top: 0; width: 100%; height: 100%; cursor: pointer } .fix-msg { position: absolute; left: 0; bottom: 0; width: 100%; color: #666; line-height: 20px; font-size: 16px; background: url(../images/fix-icon.png) no-repeat 36px top; padding: 26px 0 30px 36px } .fix-msg:hover { color: #FB605A; background-image: url(../images/fix-icons.png) } .show-fix p { width: 140px; color: #FFF; padding: 10px 15px; font-weight: 400; line-height: 1.6; background-color: #FB605A; left: -60px; top: 12%; -webkit-transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); font-size: 16px; border-radius: 3px; position: absolute; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; opacity: 0; filter: alpha(opacity=0); z-index: 9; font-family: "思源黑体 cn" } .show-fix p:after { content: ''; position: absolute; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50; background-color: #FB605A; -webkit-box-shadow: 3px 3px 10px 0 rgba(255, 37, 29, 0.2); box-shadow: 3px 3px 10px 0 rgba(255, 37, 29, 0.2); right: -6px; top: 50%; margin-top: -10px } .show-fix .show { left: -150px; opacity: 1; filter: alpha(opacity=100) } .fix-top { position: fixed; right: 20px; bottom: 80px; width: 48px; height: 48px; cursor: pointer; z-index: 9998; display: none } .top-ban img { width: 100%; height: auto } .about-base { position: relative; padding-bottom: 130px } .base-fl { float: left; width: 49%; margin-top: -21% } .base-fl img { width: 100%; height: auto } .base-fr { float: right; width: 47.5% } .base-fr h1 { position: relative; color: #1057E3; font-size: 60px; line-height: 1.1; margin: 30px 0; padding-bottom: 46px } .base-fr h1:after { content: ""; position: absolute; left: 0; bottom: 0; width: 166px; height: 37px; background: url(../images/about-line.png) no-repeat } .base-fr h2 { position: relative; color: #1057E3; font-size: 56px; line-height: 1.1; margin: 30px 0; padding-bottom: 46px } .base-fr h2:after { content: ""; position: absolute; left: 0; bottom: 0; width: 166px; height: 37px; background: url(../images/about-line.png) no-repeat } .base-txt { position: relative; padding-left: 20px } .base-txt:before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; background-color: #1057E3; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50% } .base-txt p { color: #414655; font-size: 16px; line-height: 30px; margin-bottom: 40px } .about-base ul { position: absolute; bottom: 0; right: 0; width: 87%; background-color: #FFF; -webkit-box-shadow: 0 5px 25px rgba(73, 83, 110, 0.2); -moz-box-shadow: 0 5px 25px rgba(73, 83, 110, 0.2); -ms-box-shadow: 0 5px 25px rgba(73, 83, 110, 0.2); -o-box-shadow: 0 5px 25px rgba(73, 83, 110, 0.2); box-shadow: 0 5px 25px rgba(73, 83, 110, 0.2); -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px } .about-base ul li { float: left; width: 25%; text-align: center; padding: 40px 4%; position: relative } .about-base ul li:after { content: ""; position: absolute; right: 0; top: 60px; width: 2px; height: 100px; background-color: #F3F3F3 } .about-base ul li p { color: #2A2E43; font-size: 16px; line-height: 30px; margin-top: 16px } .about-base ul li:last-child:after { display: none } .about-con { margin-top: 140px; text-align: center } .about-con h2 { color: #1057E3; font-size: 40px; line-height: 50px } .about-con p { margin-top: 40px; color: #414655; font-size: 18px; line-height: 36px } .about-con ul { margin-top: 40px; margin-left: -5% } .about-con ul li { float: left; width: 45%; margin-left: 5% } .about-con ul li img { width: 100%; height: auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px } .about-offer { margin-top: 120px } .offer-pic { width: 100% } .about-tit { position: relative; z-index: 0; text-align: left } .about-tit:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 172px; background: url(../images/about-font01.png) no-repeat left center; -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -ms-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; z-index: -1 } .about-tit h2 { color: #1057E3; font-size: 60px; line-height: 1.1; padding: 70px 0 40px } .about-offer p { color: #414655; font-size: 20px; line-height: 36px } .offer-show { margin-top: 20px } .offer-fl { float: left; width: 67%; position: relative; margin-left: -22px } .offer-fl:before { content: ""; position: absolute; right: 0; top: 0; width: 111px; height: 103px; background: url(../images/about-side.png) no-repeat } .offer-swiper .swiper-slide { padding: 22px } .offer-swiper img { height: auto; -webkit-border-top-right-radius: 20px; -moz-border-top-right-radius: 20px; -ms-border-top-right-radius: 20px; -o-border-top-right-radius: 20px; border-top-right-radius: 20px; -webkit-box-shadow: 0 9px 21px rgba(50, 100, 158, 0.4); -moz-box-shadow: 0 9px 21px rgba(50, 100, 158, 0.4); -ms-box-shadow: 0 9px 21px rgba(50, 100, 158, 0.4); -o-box-shadow: 0 9px 21px rgba(50, 100, 158, 0.4); box-shadow: 0 9px 21px rgba(50, 100, 158, 0.4) } .offer-pic .offer-swiper { padding-bottom: 40px } .offer-pic .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 0 } .offer-swiper .swiper-pagination-bullet { width: 16px; height: 16px; border: 1px solid #FDA82B; background: none; opacity: 1 } .offer-swiper .swiper-pagination-bullet-active { position: relative } .offer-swiper .swiper-pagination-bullet-active:after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; background-color: #FDA82B; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50% } .offer-fr { float: right; width: 31% } .offer-fr ul { border-left: 1px dashed #D1D1D1; margin-top: 35px } .offer-fr ul li { position: relative; color: #414655; font-size: 16px; font-weight: bold; line-height: 30px; margin-bottom: 30px; padding-left: 26px } .offer-fr ul li:before { content: ""; position: absolute; left: -7px; top: 8px; width: 13px; height: 13px; border: 2px solid #FDA82B; background-color: #FFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50% } .offer-fr ul li:after { content: ""; position: absolute; left: 6px; top: 20px; width: 1px; height: 180% } .offer-fr ul li:first-child:after { content: ""; position: absolute; left: -7px; top: -22px; width: 13px; height: 100%; background-color: #FFF } .offer-fr ul li:last-child:after { content: ""; position: absolute; left: -7px; top: 22px; width: 13px; height: 100%; background-color: #FFF } .index-chosen.about-chosen { margin-top: 80px } .about-chosen .about-tit:before { background-image: url(../images/about-font02.png) } .about-chosen.index-chosen ul li { margin: 0 20px } .top-cont .wrap { position: relative } .top-cont { background: url(../images/top-cont.jpg) no-repeat top center; -webkit-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -o-background-size: 100%; background-size: 100%; min-height: 1133px; padding-top: 180px; color: #D5E3FE } .cont-fl { float: left; width: 48.5%; padding-left: 20%; position: relative } .cont-fl p { font-size: 22px; line-height: 1.1; margin-bottom: 26px } .cont-fl p strong { font-size: 50px; margin-right: 50px } .cont-fl p strong sub { position: relative; top: -12px; font-size: 20px; margin-left: 2px } .cont-fr { float: right; width: 51%; position: relative; margin-top: 80px } .cont-fr strong { display: block; font-size: 80px; line-height: 1.1; text-align: right } .cont-txt { font-size: 40px; line-height: 60px; text-align: right; margin-top: 10px } .cont-link { margin-top: 200px; font-size: 22px; line-height: 1.2 } .cont-link p { margin-bottom: 10px } .cont-link p a { position: relative; font-size: 30px; color: #D5E3FE } .cont-link p a:after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 2px; background-color: #D5E3FE } .cont-link p a:hover { color: #FFF } .cont-link p a:hover:after { display: none } .cont-head { position: absolute; bottom: -95px; width: 424px; height: 508px; background: url(../images/cont-head.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover } .cont-head span { display: inline-block; margin-left: 305px; margin-top: 310px; width: 343px; height: 78px; line-height: 72px; text-align: center; background-color: #FF8800; border: 4px solid #EFDBB3; -webkit-border-radius: 0 78px 78px 78px; -moz-border-radius: 0 78px 78px 78px; -ms-border-radius: 0 78px 78px 78px; -o-border-radius: 0 78px 78px 78px; border-radius: 0 78px 78px 78px; color: #1057E3; font-size: 20px; font-weight: bold; cursor: pointer; -webkit-box-shadow: inset 0 3px 40px rgba(255, 255, 255, 0.82); -moz-box-shadow: inset 0 3px 40px rgba(255, 255, 255, 0.82); -ms-box-shadow: inset 0 3px 40px rgba(255, 255, 255, 0.82); -o-box-shadow: inset 0 3px 40px rgba(255, 255, 255, 0.82); box-shadow: inset 0 3px 40px rgba(255, 255, 255, 0.82) } .cont-head span:hover { color: #FFF; -webkit-box-shadow: 0 3px 40px rgba(255, 255, 255, 0.82); -moz-box-shadow: 0 3px 40px rgba(255, 255, 255, 0.82); -ms-box-shadow: 0 3px 40px rgba(255, 255, 255, 0.82); -o-box-shadow: 0 3px 40px rgba(255, 255, 255, 0.82); box-shadow: 0 3px 40px rgba(255, 255, 255, 0.82) } .cont-msgs { background: url(../images/cont-msgbg.png) #fff right top; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; margin-top: -240px; padding: 90px 110px 70px; position: relative } .cont-msgs strong { display: inline-block; color: #1057E3; font-size: 40px; line-height: 1.1 } .cont-msgs p { color: #012144; font-size: 24px; line-height: 30px; margin-top: 22px } .cont-msg { padding: 30px 4% 66px; margin-top: 55px; background-color: #FFF; -webkit-box-shadow: 0 0 35px rgba(52, 124, 206, 0.4); -moz-box-shadow: 0 0 35px rgba(52, 124, 206, 0.4); -ms-box-shadow: 0 0 35px rgba(52, 124, 206, 0.4); -o-box-shadow: 0 0 35px rgba(52, 124, 206, 0.4); box-shadow: 0 0 35px rgba(52, 124, 206, 0.4); -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px } .cont-msg ul { float: left; width: 44% } .cont-msg ul li { position: relative; border-bottom: 1px dashed #DDD; line-height: 30px } .cont-msg img { position: absolute; left: 18px; top: 18px; width: 28px; height: auto; z-index: 22 } .cont-msg ul li input { width: 100%; line-height: 30px; color: #606267; font-size: 20px; background: none; position: relative; z-index: 2; padding: 22px 20px 18px 68px } .cont-area { position: relative; float: right; width: 52%; border-bottom: 1px dashed #DDD } .cont-area img { position: absolute } .cont-area textarea { width: 100%; height: 275px; line-height: 30px; color: #606267; font-size: 20px; background: none; position: relative; z-index: 2; padding: 22px 20px 18px 68px } .cont-msg span { position: absolute; left: 0; top: 18px; width: 100%; height: 100%; color: #B5B8C1; font-size: 20px; padding-left: 70px } .cont-msg span i { color: #F3632D; padding-left: 2px } .msg-btn { text-align: center; margin-top: 36px } .msg-btn input { color: #FFF; font-size: 20px; width: 180px; height: 50px; line-height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background: -webkit-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -moz-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -ms-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -o-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: linear-gradient(to bottom, #FFAA6E 0%, #F92C0B 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFAA6E, endColorstr=#F92C0B, GradientType=0); -webkit-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); -moz-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); -ms-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); -o-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); cursor: pointer; margin-left: -6% } .msg-btn input:hover { font-weight: bold; -webkit-box-shadow: inset 0 2px 16px rgba(255, 108, 44, 0.9); -moz-box-shadow: inset 0 2px 16px rgba(255, 108, 44, 0.9); -ms-box-shadow: inset 0 2px 16px rgba(255, 108, 44, 0.9); -o-box-shadow: inset 2px 16px #ff6c2c; box-shadow: inset 0 2px 16px rgba(255, 108, 44, 0.9) } .cont-ensure { margin-top: 40px } .cont-ensure ul { margin: 0 -3% } .cont-ensure li { float: left; width: 25%; text-align: center; color: #012144; line-height: 1.2; padding: 0 3% } .cont-ensure li strong { display: block; font-size: 22px } .cont-ensure li p { font-size: 16px; line-height: 30px; margin-top: 30px } .cont-font { display: block; text-align: center; color: #1057E3; font-size: 40px; line-height: 1.1; margin-top: 132px; } .top-pic img { width: 100%; min-height: 130px; -webkit-object-fit: cover; object-fit: cover } .top-type { position: relative; z-index: 999; } .top-show img { width: 100% } .top-txt { position: absolute; top: 200px; width: 100% } .top-txt strong { display: block; color: #FFF; font-size: 80px; line-height: 1.2 } .top-txt h1 { display: block; color: #FFF; font-size: 60px; line-height: 1.2 } .type-pro { margin-top: 70px } .type-pro li { display: inline-block; margin-right: 20px; margin-bottom: 30px; height: 65px; line-height: 62px; background-color: #FFF; border: 2px solid #EFDBB3; -webkit-border-radius: 65px; -moz-border-radius: 65px; -ms-border-radius: 65px; -o-border-radius: 65px; border-radius: 65px } .type-pro li a { display: block; color: #333; font-size: 16px; font-weight: bold; padding: 0 50px } .type-pro li.on, .type-pro li:hover { background-color: #FF8800 } .pro-list { margin-top: 0 } .pro-list ul { margin-left: -2% } .pro-list ul li { position: relative; z-index: 0; float: left; width: 31.3%; margin-left: 2%; margin-top: 40px } .pro-list ul li:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 69%; background: url(../images/list-bg.png) #E7EEF7 no-repeat right bottom; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; z-index: -1 } .list-pic { width: 92% } .list-pic a { display: block; overflow: hidden; position: relative; padding-top: 66.9%; -webkit-border-radius: 6px 6px 60px 6px; -moz-border-radius: 6px 6px 60px 6px; -ms-border-radius: 6px 6px 60px 6px; -o-border-radius: 6px 6px 60px 6px; border-radius: 6px 6px 60px 6px } .list-pic a img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .show-list ul li:hover img { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03) } .list-info { padding: 30px 30px } .list-info a { display: block; color: #1057E3; font-size: 22px; font-weight: bold; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 20px } .list-info a i { color: #FF8800; font-style: normal; } .show-list ul li:hover a { color: #FF8800 } .list-info p { color: #012144; font-size: 16px; height: 30px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 90% } p.caselb, p.prolb { height: 60px; line-height: 30px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: initial } .footer-show { color: #FFF; font-size: 14px; line-height: 30px; padding: 35px 0; background-color: #02091C; margin-top: 100px } .footer-link { float: right; width: 194px; margin-left: 20px } .footer-link a { display: inline-block; color: #FFF } .footer-link a:hover { color: #FF8800; text-decoration: underline } .footer-link i { padding: 0 6px } .footer-show p { overflow: hidden; text-align: center } .top-main { color: #FFF; padding-top: 155px; background: url(../images/top-pros.jpg) #071029 left bottom; overflow: hidden; } .pro-fl { position: relative; z-index: 0; float: left; width: 56.5%; padding-left: 4.6% } .pro-fl:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 48%; background-color: #012144; -webkit-border-top-left-radius: 60px; -moz-border-top-left-radius: 60px; -ms-border-top-left-radius: 60px; -o-border-top-left-radius: 60px; border-top-left-radius: 60px; z-index: -1 } .fl-pic { display: block; position: relative; padding-top: 66.25% } .fl-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .pro-fl strong { display: block; color: #FFF; font-size: 26px; line-height: 1.2; height: 155px; padding: 36px 0 88px } .pro-fl i { position: absolute; left: 26px; bottom: 150px; color: rgba(255, 255, 255, 0.4); font-size: 14px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .pro-fr { float: right; width: 39%; } .top-main h1 { position: relative; font-size: 40px; line-height: 1.2; padding-top: 40px; margin-bottom: 50px } .top-main h1:before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 6px; background-color: #FDA82B } .top-main p { font-size: 20px; line-height: 34px } .top-main p strong { margin-right: 5px } .top-main p.txt-pro { font-size: 18px; font-weight: bold; margin-top: 35px; } .top-main .wrap { position: relative } .link-show { width: 100%; position: absolute; bottom: 54px; left: 48.35%; font-size: 0; line-height: 96px } .link-show span { display: inline-block; vertical-align: middle; width: 126px; height: 96px; line-height: 96px; text-align: center; background-color: #0F4B8C; -webkit-border-bottom-left-radius: 60px; -moz-border-bottom-left-radius: 60px; -ms-border-bottom-left-radius: 60px; -o-border-bottom-left-radius: 60px; border-bottom-left-radius: 60px; cursor: pointer } .link-show span img { width: 35px; height: auto; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .link-show span:hover img { -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06) } .link-show .link-msg { display: inline-block; vertical-align: middle; width: 322px; height: 96px; line-height: 96px; text-align: center; color: #0D4079; font-size: 24px; background-color: #FDA82B; -webkit-border-bottom-right-radius: 60px; -moz-border-bottom-right-radius: 60px; -ms-border-bottom-right-radius: 60px; -o-border-bottom-right-radius: 60px; border-bottom-right-radius: 60px; -webkit-box-shadow: 0 2px 10px rgba(232, 15, 15, 0.35) inset, 0 1px 6px rgba(255, 108, 44, 0.5); -moz-box-shadow: 0 2px 10px rgba(232, 15, 15, 0.35) inset, 0 1px 6px rgba(255, 108, 44, 0.5); -ms-box-shadow: 0 2px 10px rgba(232, 15, 15, 0.35) inset, 0 1px 6px rgba(255, 108, 44, 0.5); -o-box-shadow: 0 2px 10px rgba(232, 15, 15, 0.35) inset, 0 1px 6px rgba(255, 108, 44, 0.5); box-shadow: 0 2px 10px rgba(232, 15, 15, 0.35) inset, 0 1px 6px rgba(255, 108, 44, 0.5) } .link-msg img { width: 28px; height: auto; margin-right: 18px } .link-msg:hover { color: #FFF } .link-show i { display: inline-block; vertical-align: middle; margin-left: 44px } .link-show i a { color: #FFF; font-size: 24px } .link-show i a:hover { text-decoration: underline } .link-show i img { margin-top: -14px; margin-right: 16px } .show-con { margin-top: 160px; color: #606267; font-size: 16px; line-height: 30px } .show-con p { margin-bottom: 20px } .show-base { position: relative; z-index: 0; min-height: 660px; margin-bottom: 50px } .show-base:before { content: ""; position: absolute; left: 0; top: 0; width: 39%; height: 660px; background-color: #0A4686; -webkit-border-top-left-radius: 60px; -moz-border-top-left-radius: 60px; -ms-border-top-left-radius: 60px; -o-border-top-left-radius: 60px; border-top-left-radius: 60px; z-index: -1 } .show-base:after { content: ""; position: absolute; right: 0; top: 0; width: 61%; height: 660px; background-color: #F8F8F8; -webkit-border-bottom-right-radius: 60px; -moz-border-bottom-right-radius: 60px; -ms-border-bottom-right-radius: 60px; -o-border-bottom-right-radius: 60px; border-bottom-right-radius: 60px; z-index: -1 } .base-mail { position: absolute; left: 26px; top: 440px } .base-mail a { color: #CEE5FE; font-size: 16px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .base-mail a:before { content: ''; display: inline-block; vertical-align: middle; width: 2px; height: 45px; background-color: #CEE5FE; margin-right: 9px; margin-bottom: 20px } .info-fl { float: left; width: 39%; text-align: right } .info-fl h3 { display: inline-block; width: 73%; margin: 100px 40px 0 0; color: #FFF; font-size: 30px; line-height: 36px; text-align: left } .info-fl img { margin-top: 240px } .info-fr { float: right; width: 61%; padding: 40px 30px 0 } .info-fr p { margin-bottom: 20px } .info-fr p a, .solu-base p a, .show-con p a { color: #E5472E } .info-fr p a:hover, .solu-base p a:hover, .show-con p a:hover { text-decoration: underline } .base-pic { position: absolute; left: 50%; margin-left: -29%; width: 58%; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; overflow: hidden } .base-pic img { border: 50px solid #F8F8F8 } .show-tit { position: relative; z-index: 0; text-align: left; margin-top: 60px } .show-tit:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; background-repeat: no-repeat; background-position: left center; -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -ms-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; z-index: -1 } .tit-ser:before { background-image: url(../images/tit-font02.png); height: 140px } .tit-data:before { background-image: url(../images/tit-font03.png); height: 140px } .tit-related:before { background-image: url(../images/tit-font05.png); height: 140px } .tit-ser h3, .tit-data h3, .tit-related h3 { padding: 60px 0 36px } .show-tit h3 { color: #1057E3; font-size: 36px; line-height: 1.1; margin-bottom: 24px } .show-pic { margin-top: 60px } .show-pic .show-tit:before { background-image: url(../images/tit-font04.png) } .show-pic p { margin-top: 44px } .pic-con { font-size: 0; text-align: center; margin-top: 40px } .pic-con div { display: inline-block; width: 47.9%; margin: 0 1% } .pic-con div img { width: 100%; height: auto } .show-good { margin-top: 20px; background: url(../images/good-data.jpg) no-repeat left top; -webkit-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -o-background-size: 100%; background-size: 100% } .show-good ul { padding-top: 30px } .show-good li { min-height: 120px; width: 30%; color: #606267; font-size: 18px; line-height: 24px; margin-bottom: 44px; margin-top: 36px } .show-good li strong { display: block; color: #1057E3; font-size: 20px; line-height: 36px; margin-bottom: 10px } .show-good li:nth-child(1) { margin-left: 50% } .show-good li:nth-child(2) { margin-left: 32% } .show-good li:nth-child(3) { margin-left: 16% } .show-good li:nth-child(4) { margin-left: auto; margin-right: 0 } .show-good li:nth-child(5) { margin-left: auto; margin-right: 18% } .show-good li:nth-child(6) { margin-left: auto; margin-right: 26% } .show-ser p { color: #012144; font-size: 20px; font-weight: bold } .show-ser ul { margin-left: -2%; margin-top: 40px } .show-ser ul li { float: left; width: 31.3%; min-height: 404px; margin-left: 2%; background: url(../images/ser-bg.png) no-repeat; -webkit-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -o-background-size: 100%; background-size: 100%; text-align: right } .show-ser ul li strong { display: block; color: #FFF; font-size: 30px; line-height: 1.1; margin: 32px 46px 36px } .show-ser ul li p { margin: 80px 46px 0 100px; color: #606267; font-size: 16px; line-height: 36px; font-weight: normal; letter-spacing: -0.2px } .show-con table td { padding: 10px 2px; word-break: break-word } .show-con table tr:hover td { background: #012144; color: #fff !important; cursor: pointer } .data-txt { color: #727581; font-style: italic; margin-top: 30px } .main-msg { padding-top: 130px; margin-top: 90px; background: url(../images/msg-bg.jpg) no-repeat top center; -webkit-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -o-background-size: 100%; background-size: 100% } .main-msg .wrap { max-width: 1320px } .main-msg strong { display: inline-block; color: #E7E9ED; font-size: 40px; line-height: 1.1; margin-bottom: 24px } .main-msg p { color: #E7E9ED; font-size: 24px; line-height: 38px; margin-bottom: 50px } .msg-place { position: relative } .msg-fl { position: relative; z-index: 2; float: left; width: 67%; padding: 35px 55px; background-color: #FFF; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 0 40px rgba(52, 124, 206, 0.4); -moz-box-shadow: 0 0 40px rgba(52, 124, 206, 0.4); -ms-box-shadow: 0 0 40px rgba(52, 124, 206, 0.4); -o-box-shadow: 0 0 40px rgba(52, 124, 206, 0.4); box-shadow: 0 0 40px rgba(52, 124, 206, 0.4) } .msg-fl ul li { position: relative; border-bottom: 1px dashed #DDD; line-height: 30px } .msg-fl img { position: absolute; left: 18px; top: 18px; width: 28px; height: auto; z-index: 22 } .msg-fl ul li input, .msg-fl ul li textarea { width: 100%; line-height: 30px; color: #606267; font-size: 20px; background: none; position: relative; z-index: 2; padding: 22px 20px 18px 68px } .fl-area textarea { height: 180px } .msg-fl span { position: absolute; left: 0; top: 18px; width: 100%; height: 100%; color: #B5B8C1; font-size: 20px; padding-left: 70px } .msg-fl span i { color: #F3632D; padding-left: 2px } .msg-fl .msg-btn { text-align: left; margin-left: 55px } .msg-fr { position: absolute; right: 0; top: 48px; width: 35%; padding: 2% 2% 3% 7%; background-color: #DDEBFA; -webkit-border-radius: 0 20px 20px 0; -moz-border-radius: 0 20px 20px 0; -ms-border-radius: 0 20px 20px 0; -o-border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0; -webkit-box-shadow: 0 0 13px rgba(0, 21, 42, 0.2); -moz-box-shadow: 0 0 13px rgba(0, 21, 42, 0.2); -ms-box-shadow: 0 0 13px rgba(0, 21, 42, 0.2); -o-box-shadow: 0 0 13px rgba(0, 21, 42, 0.2); box-shadow: 0 0 13px rgba(0, 21, 42, 0.2) } .msg-fr strong { display: block; color: #232227; font-size: 32px; line-height: 1.1; margin: 55px 0 10px } .msg-fr a { color: #E5472E; font-size: 20px; position: relative } .msg-fr a:after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; height: 2px; background-color: #E5472E } .msg-fr a:hover:after { display: none } .msg-fr span { display: inline-block; width: 190px; height: 46px; line-height: 46px; text-align: center; color: #FFF; font-size: 16px; background-color: #FF8800; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; cursor: pointer } .msg-fr span:hover { background-color: #E5472E } .msg-fr p { color: #646464; font-size: 18px; line-height: 24px; margin-top: 66px } .top-case { top: 230px } .top-case strong { font-size: 70px; width: 90% } .case-fl { float: left; width: 30% } .case-item { width: 100%; padding: 20px 12%; background-color: #E7EEF7; -webkit-border-bottom-right-radius: 60px; -moz-border-bottom-right-radius: 60px; -ms-border-bottom-right-radius: 60px; -o-border-bottom-right-radius: 60px; border-bottom-right-radius: 60px; -webkit-box-shadow: 0 5px 27px rgba(0, 67, 139, 0.5); -moz-box-shadow: 0 5px 27px rgba(0, 67, 139, 0.5); -ms-box-shadow: 0 5px 27px rgba(0, 67, 139, 0.5); -o-box-shadow: 0 5px 27px rgba(0, 67, 139, 0.5); box-shadow: 0 5px 27px rgba(0, 67, 139, 0.5) } .case-item ul li { line-height: 30px; padding: 25px 0; border-bottom: 1px solid #D2E1EF } .case-item ul li:last-child { border-bottom: none } .case-item ul li a { display: block; color: #012144; font-size: 22px } .case-item ul li.on a, .case-item ul li:hover a { color: #FF8800 } .case-fr { float: right; width: 66% } .case-fr ul { margin-left: -3% } .case-fr ul li { position: relative; z-index: 0; float: left; width: 47%; margin-left: 3%; margin-top: 40px } .case-fr ul li:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 69%; background-color: #E7EEF7; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; z-index: -1 } .case-fr .pro-list li { width: 48% } .list-info { position: relative } .list-info a.more-arrow { position: absolute; right: 30px; bottom: 55px; width: 40px; height: 22px; margin-bottom: 0; background: url(../images/more-arrow01.png) no-repeat } .show-list li:hover a.more-arrow { background-image: url(../images/more-arrow02.png) } .top-solu { color: #FFF; padding-top: 175px; padding-bottom: 240px; background: url(../images/top-cases.jpg) #071029 left bottom; } .top-solu .wrap { position: relative } .solu-fl { float: left; width: 51% } .solu-fl img { width: 100%; height: auto; border: 4px solid #EFDBB3; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px } .solu-fr { float: right; width: 44.8% } .solu-fr h1 { margin-bottom: 40px; color: #FFF; font-size: 36px; line-height: 1.2 } .solu-fr p { color: #FFF; font-size: 16px; line-height: 36px; font-weight: bold } .solu-txt { margin-top: 30px } .solu-btn { margin-top: 60px } .solu-btn a { display: inline-block; vertical-align: middle; width: 273px; height: 59px; line-height: 52px; text-align: center; background: url(../images/solu-btn01.png) no-repeat; color: #FFF; font-size: 28px } .solu-btn a:hover { color: #FF8800 } .solu-btn span { display: inline-block; vertical-align: middle; width: 437px; height: 70px; line-height: 65px; text-align: center; background: url(../images/solu-btn02.png) no-repeat; color: #FFF; font-size: 24px; margin-left: -27px; cursor: pointer } .solu-btn span:hover { color: #012144 } .solu-btn span img { width: 35px; height: auto; margin-right: 6px; margin-top: -5px } .solu-show { margin-top: -150px; background-color: #FFF; border: 36px solid #FFF; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px } .solu-base { color: #414655; font-size: 16px; line-height: 36px; padding: 40px; background-color: #E7ECF7; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px } .solu-show h3 { color: #1057E3; font-size: 40px; line-height: 1.1; margin-bottom: 40px } .solu-show h4 { color: #1057E3; font-size: 36px; line-height: 1.1; margin-bottom: 40px } .solu-base p { margin-bottom: 30px } .solu-base p img { max-width: 100%; height: auto } .solu-pro { margin-top: 150px } .solu-pro h3 { margin-bottom: 0 } .solu-pro .pro-list { margin-top: 0 } .solu-pro .list-info a { margin-bottom: 0 } .proj-list { margin-top: 20px } .proj-list ul { margin-left: -2% } .proj-list ul li { position: relative; z-index: 0; float: left; width: 31.3%; margin-left: 2%; margin-top: 40px } .proj-list ul li:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 69%; background-color: #E7EEF7; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; z-index: -1 } .top-news strong { text-align: center } .news-hot { position: relative; margin-top: -130px } .news-hot ul { margin-left: -2% } .news-hot ul li { float: left; width: 31.3%; margin-left: 2% } .news-pic { display: block; overflow: hidden; position: relative; padding-top: 61%; -webkit-border-radius: 20px 60px 0 0; -moz-border-radius: 20px 60px 0 0; -ms-border-radius: 20px 60px 0 0; -o-border-radius: 20px 60px 0 0; border-radius: 20px 60px 0 0; -webkit-box-shadow: 0 5px 10px rgba(228, 0, 52, 0.1); -moz-box-shadow: 0 5px 10px rgba(228, 0, 52, 0.1); -ms-box-shadow: 0 5px 10px rgba(228, 0, 52, 0.1); -o-box-shadow: 0 5px 10px rgba(228, 0, 52, 0.1); box-shadow: 0 5px 10px rgba(228, 0, 52, 0.1) } .news-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .news-hot ul li:hover img { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03) } .news-txt { position: relative; margin-top: -40px; padding: 25px 30px; background-color: #FFF; -webkit-border-radius: 0 0 20px 20px; -moz-border-radius: 0 0 20px 20px; -ms-border-radius: 0 0 20px 20px; -o-border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px; -webkit-box-shadow: 0 0 15px rgba(52, 124, 206, 0.4); -moz-box-shadow: 0 0 15px rgba(52, 124, 206, 0.4); -ms-box-shadow: 0 0 15px rgba(52, 124, 206, 0.4); -o-box-shadow: 0 0 15px rgba(52, 124, 206, 0.4); box-shadow: 0 0 15px rgba(52, 124, 206, 0.4) } .news-txt a { color: #1057E3; font-size: 22px; font-weight: bold; line-height: 38px; height: 76px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .news-hot ul li:hover a { color: #FF8800 } .news-txt span { display: block; text-align: right; line-height: 16px; color: #A8A5AC; font-size: 14px; margin-top: 8px } .news-txt span img { width: 14px; height: auto; vertical-align: middle; margin-top: -4px; margin-right: 10px } .news-list { margin-top: 90px } .news-list li { padding: 46px 30px; margin-bottom: 40px; background-color: #ECF0F8; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px } .news-list li a { display: block; color: #1057E3; font-size: 22px; line-height: 1.2; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .news-list li:hover a { color: #FF8800 } .news-list li span { display: inline-block; color: #B5B8C1; font-size: 14px; line-height: 16px; margin: 25px 0 } .news-list li span img { width: 12px; height: auto; vertical-align: middle; margin-top: -5px; margin-right: 8px } .news-list li p { color: #414655; font-size: 18px; line-height: 34px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .list-page { margin-top: 90px; text-align: center } .list-page a, .list-page span { display: inline-block; width: 50px; height: 46px; line-height: 45px; text-align: center; border: 1px solid #02091C; margin-right: 4px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color: #02091C; font-family: Arial } .list-page span.current, .list-page a:hover { color: #141418; background-color: #E97F07 } .list-page span.disabled { color: #999 } .top-base { top: 280px } .top-base strong { font-size: 60px; width: 60%; text-align: left } .news-base { color: #A8D3FC; font-size: 26px; line-height: 30px; margin-top: 60px } .news-base span img { width: 25px; height: auto; margin-top: -6px; margin-right: 10px } .news-base i { margin-left: 20% } .news-base i img { width: 31px; height: auto; margin-top: -6px; margin-right: 10px } .news-base i a { color: #A8D3FC } .news-base i a:hover { text-decoration: underline } .news-link { text-align: right } .news-link span { display: inline-block; color: #FFF; font-size: 26px; width: 471px; height: 56px; line-height: 53px; text-align: center; background: url(../images/news-link.png) no-repeat; cursor: pointer } .news-link span img { width: 35px; height: auto; margin-top: -6px; margin-right: 8px } .news-link span:hover { color: #FF8800 } .news-main { position: relative; padding-left: 80px; margin-top: 60px; color: #606267; font-size: 18px; line-height: 32px } .news-main:before { content: ""; position: absolute; left: 9px; top: 10px; width: 1px; height: 100%; background-color: #EFDBB3 } .news-main p { margin-bottom: 25px } .news-main p img { max-width: 800px; } .news-main p a { color: #E5472E } .news-main p a:hover { text-decoration: underline } .news-main h3 { color: #1057E3; font-size: 36px; line-height: 1.1; margin-bottom: 20px } .news-main h4 { color: #1057E3; font-size: 34px; line-height: 1.1; margin-bottom: 20px } .news-page { border-top: 1px dashed #C3D9F3; margin-top: 50px; padding: 30px 0; margin-left: 80px } .news-page p { color: #606267; font-size: 16px; line-height: 36px } .news-page p strong { margin-right: 5px } .news-page p a { color: #606267 } .news-page p a:hover { color: #FF8800 } .news-dot { position: relative } .news-dot:before { content: ""; position: absolute; left: -80px; top: 7px; width: 18px; height: 18px; background-color: #1057E3; border: 4px solid #EFDBB3; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50% } .top-error { top: 220px; text-align: center } .top-error img { max-width: 100%; width: 510px; height: auto } .error { margin-top: -37px; text-align: center } .error p { color: #FFF; font-size: 36px; line-height: 1.3 } .error-btn { margin-top: 120px } .error-btn span, .error-btn a { display: inline-block; width: 333px; height: 68px; line-height: 68px; text-align: center; font-size: 20px; margin: 0 15px; -webkit-border-radius: 68px; -moz-border-radius: 68px; -ms-border-radius: 68px; -o-border-radius: 68px; border-radius: 68px; cursor: pointer } .error-btn span { color: #FFF; -webkit-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); -moz-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); -ms-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); -o-box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); box-shadow: 0 1px 6px rgba(255, 108, 44, 0.5); background: -webkit-linear-gradient(top, #FFAA6E 0%, #FF4641 100%); background: -moz-linear-gradient(top, #FFAA6E 0%, #FF4641 100%); background: -ms-linear-gradient(top, #FFAA6E 0%, #FF4641 100%); background: -o-linear-gradient(top, #FFAA6E 0%, #FF4641 100%); background: linear-gradient(to bottom, #FFAA6E 0%, #FF4641 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFAA6E, endColorstr=#FF4641, GradientType=0) } .error-btn span:hover { color: #FF4641; background: #FFF } .error-btn a { color: #000; border: 2px solid #02091C } .error-btn a:hover { color: #FFF; background-color: #02091C } .postda { text-align: center; margin: 40px auto } .postda .dh { margin-bottom: 20px } .postda p { font-size: 16px; color: #444; margin: 20px 0 } h1.success { color: #7CC629 } h1.failure { color: #D50000 } .postbt a { color: #FB605A } .popu-tips { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; display: none } .tip-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3) } .tip-show { position: absolute; left: 50%; top: 50%; width: 100%; max-width: 600px; -webkit-border-radius: 10px; border-radius: 10px; background: #fff; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; line-height: 48px; color: #333; overflow: hidden } .tip-base { padding: 30px 40px 10px } .tip-base p { color: #8C8C8C; margin-bottom: 20px } .tip-base p.tip-font { color: #333 } .tip-base p img { width: 27px; height: auto; margin-right: 16px; margin-top: -5px } .tip-base p span { color: #1C498D } .tip-btn a { float: left; width: 50%; text-align: center; color: #666; font-size: 24px; line-height: 70px } .tip-btn a.btn-tip02 { color: #FFF } .btn-tip01 { background-color: #CCC } .btn-tip02 { background-color: #F75851 } .ban-swiper.ie9 .swiper-wrapper .swiper-slide { display: none } .ban-swiper.ie9 .swiper-wrapper .swiper-slide:first-child { display: block } .pro-scroll.ie9 { margin-left: -2.3%; padding-top: 20px } .pro-scroll.ie9 .swiper-wrapper .swiper-slide { float: left; width: 31%; margin-left: 2.3%; margin-bottom: 30px } .pro-scroll.ie9.swiper-container-horizontal>.swiper-pagination-progressbar { display: none } .pro-scroll.ie9 .swiper-button-next, .pro-scroll.ie9 .swiper-button-prev { display: none } .offer-swiper.ie9 .swiper-wrapper .swiper-slide { display: none } .offer-swiper.ie9 .swiper-wrapper .swiper-slide:first-child { display: block } .about-spot { margin-top: 84px } .spot-info { text-align: center; width: 60%; margin: 0 auto } .spot-info h2 { color: #1057e3; font-size: 60px; line-height: 1.2 } .spot-info strong { color: #414655; font-size: 22px; font-weight: normal; line-height: 1.2; display: block; margin-top: 12px } .spot-info p { color: #414655; font-size: 16px; line-height: 30px; margin-top: 26px } .spot-line { margin-top: 20px; position: relative; background: url(../images/spot-bg.png) no-repeat top center; min-height: 300px } .spot-line img { width: 100%; height: auto } .spot-line p { position: absolute; width: 180px; text-align: center } .spot-line p strong { color: #1057e3; font-size: 80px; line-height: 1.1 } .spot-line p span { display: block; font-size: 16px; color: #2a2e43; line-height: 30px } .spot-line p.dot01 { left: 50%; top: 27%; margin-left: -530px } .spot-line p.dot02 { left: 50%; bottom: 0; margin-left: -252px } .spot-line p.dot03 { right: 50%; bottom: 0; margin-right: -225px } .spot-line p.dot04 { right: 50%; top: 40%; margin-right: -540px } .about-con p img { width: 100%; height: auto } .about-con h2 { font-size: 60px; text-transform: uppercase } @media screen and (max-width: 1880px) { .ban-info { padding-bottom: 60px } .line-pic:after { display: none } .index-pro { margin-left: 8% } .index-chosen { margin-top: 140px; } .top-txt strong { font-size: 70px } .top-show img { min-height: 520px; -webkit-object-fit: cover; object-fit: cover } .news-base span img, .news-base i img, .top-error img { min-height: 0 } .top-base { top: 210px } } @media screen and (max-width: 1660px) { .banner .sty1 h2 { font-size: 60px } .index-tit { margin: 20px 0 90px; line-height: 66px } .line-info .index-tit { margin: 40px 0 } .index-pro { margin-left: 5% } .index-chosen { margin-top: 130px; } .cont-head { width: 360px; height: 431px } .cont-head span { margin-left: 260px; margin-top: 270px } .cont-msgs { margin-top: -260px } .cont-ensure ul { margin: 0 } .solu-btn a { display: block } .solu-btn span { display: block; margin-top: 20px } .solu-fr h1 { margin-top: 20px } } @media screen and (max-width: 1550px) { .ban-info strong, .foot-fl strong, .cont-fr strong { font-size: 70px } .ban-txt ul:before { display: none } .ban-txt ul { padding-right: 0 } .index-tit { margin: 10px 0 50px; font-size: 44px; line-height: 55px } .line-base { padding: 100px 8% 160px } .index-pro { margin-top: 40px } .pro-scroll.swiper-container { padding-top: 110px } .cont-txt { font-size: 36px; line-height: 46px; margin-top: 30px } .cont-fl { padding-left: 16% } .cont-msgs { margin-top: -280px } .top-cont { min-height: auto; padding-bottom: 300px } .top-txt strong { font-size: 60px } .top-txt h1 { font-size: 52px } .pro-fr { padding-top: 20px } .link-show i { margin-left: 20px } .show-con { margin-top: 100px } .about-spot { margin-top: 80px } .spot-info h2, .about-con h2 { font-size: 50px } .spot-line p strong { font-size: 70px } } @media screen and (max-width: 1460px) { .head-btn { display: none } .nav { text-align: right; margin-left: 0; margin-right: 6% } .banner .sty1 { top: 24% } .banner .sty1 h2 { width: 600px; font-size: 50px } .banner .sty1 p { width: 600px; font-size: 18px } .banner .sty1 .swtbtn { padding: 0 3% } .banner .sty2 { bottom: -85px } .banner .sty2 li { height: 170px; padding: 27px 0 } .banner .sty2 li span { margin-top: 18px; margin-bottom: 13px; font-size: 32px } .hot-show li:before { left: -30px; top: -35px; -webkit-background-size: 80%; -moz-background-size: 80%; -ms-background-size: 80%; -o-background-size: 80%; background-size: 80% } .hot-show li a.hot-tit { font-size: 26px } .line-base ul li a { font-size: 26px } .line-base ul li p { font-size: 16px } .ep-info strong { font-size: 50px; line-height: 66px } .index-pro { margin-left: 4% } .footer { margin-top: 220px } .foot-count { margin-top: 100px } .foot-list { margin-top: 120px } .cont-fl { padding-left: 10% } .cont-fr { margin-top: 40px } .cont-link { margin-top: 160px } .cont-ensure li strong { font-size: 20px } .cont-font { font-size: 36px; margin-bottom: -50px } .type-pro { margin-top: 60px } .type-pro li { height: 52px; line-height: 50px } .type-pro li a { padding: 0 30px } .link-show { bottom: 58px } .link-show span { width: 110px; height: 90px; line-height: 90px } .link-show .link-msg { width: 280px; height: 90px; line-height: 90px } .show-con { margin-top: 80px } .show-good li { margin-top: 0; margin-bottom: 34px } .show-good li:nth-child(4) { margin-right: 16% } .show-good li:nth-child(5) { margin-right: 30% } .show-good li:nth-child(6) { margin-right: 44% } .show-ser ul li p { margin-top: 60px } .show-ser ul li strong { font-size: 23px } .main-msg { padding-top: 100px } .top-main h1 { font-size: 35px; } .spot-info { width: 98% } } @media screen and (max-width: 1370px) { .index-hot h2, .line-base h2, .index-chosen h2 { font-size: 60px } .hot-show li a.hot-tit { margin-top: 30px; margin-bottom: 20px } .index-about p { width: 70% } .case-info { width: 44% } .line-base { margin-top: 80px; margin-left: 4%; padding: 80px 8% 120px } .line-base:after { bottom: -100px; -webkit-background-size: 80%; -moz-background-size: 80%; -ms-background-size: 80%; -o-background-size: 80%; background-size: 80% } .scroll-tit { font-size: 28px; margin: 20px 0 15px } .index-info p { font-size: 16px } .pro-scroll .swiper-button-next { right: 4% } .pro-scroll.swiper-container-horizontal>.swiper-pagination-progressbar { width: 84% } .foot-con { width: 94%; padding: 20px 0 } .foot-con:before { left: -3% } .foot-con:after { right: -3% } .base-fr h1 { font-size: 54px } .base-fr h2 { font-size: 50px } .about-con h2 { font-size: 36px } .about-con { margin-top: 100px } .about-offer { margin-top: 100px } .about-tit:before { height: 130px } .about-tit h2 { padding: 40px 0 30px; font-size: 54px } .cont-head { width: 300px; height: 359px } .cont-head span { margin-left: 190px; margin-top: 180px; width: 260px; height: 60px; line-height: 60px } .cont-link { margin-top: 120px } .cont-msgs { padding: 70px 80px 50px } .cont-ensure li { padding: 0 2% } .cont-ensure li img { width: 160px; height: auto } .cont-ensure li p { margin-top: 20px } .pro-fl strong { font-size: 22px } .top-main h1 { margin-bottom: 40px; font-size: 30px; } .top-main p.txt-pro { margin-top: 25px; } .link-show .link-msg { width: 260px } .show-good li { margin-bottom: 24px } .show-good li { width: 46% } .show-good li:nth-child(1) { margin-left: 36% } .show-good li:nth-child(2) { margin-left: 26% } .show-good li:nth-child(3) { margin-left: 6% } .show-good li:nth-child(4) { margin-right: 0 } .show-good li:nth-child(5) { margin-right: 6% } .show-good li:nth-child(6) { margin-right: 20% } .show-ser ul li p { margin-top: 30px } .show-ser ul li { min-height: 360px } .main-msg { padding-top: 60px } .main-msg strong { font-size: 32px } .main-msg p { font-size: 20px } .solu-fr h1 { font-size: 36px } .solu-show h3 { font-size: 36px } .solu-show h4 { font-size: 32px } .show-tit h3 { font-size: 32px } .top-main p.txt-pro { font-size: 16px } } @media screen and (max-width: 1300px) { .header { padding-top: 30px } .nav ul li a { font-size: 17px } .ban-info strong, .foot-fl strong, .cont-fr strong { font-size: 50px } .ban-info strong { margin-top: 60px } .ban-txt { margin-top: 100px } .ban-info p { font-size: 16px } .index-hot h2, .line-base h2, .index-chosen h2 { font-size: 50px } .hot-show li a.hot-tit:before { display: none } .hot-show li a.hot-tit { padding-left: 0 } .hot-show li p { margin-left: 0 } .index-about p { width: 90% } .index-tit { font-size: 40px; line-height: 48px; margin-bottom: 30px } .line-base { padding-left: 20px; padding-right: 20px } .line-base ul li { text-align: center } .line-base ul li img { margin: 0 auto } .ep-info strong { font-size: 44px; line-height: 52px } .index-chosen p { font-size: 28px } .index-chosen { margin-top: 120px } .index-chosen ul { margin-left: -2%; margin-top: 80px } .index-chosen ul li { float: left; width: 18%; margin: 0; margin-left: 2% } .about-chosen.index-chosen ul li { margin: 0; margin-left: 2% } .footer { margin-top: 180px } .foot-count { margin-top: 80px } .foot-count strong { font-size: 32px } .foot-list { margin-top: 100px; padding-top: 80px } .foot-cont { margin: 0 6%; width: 32% } .foot-link { width: 26% } .foot-list dt { font-size: 28px } .hot-show li:before { width: 300px; height: 355px } .base-fr h1 { font-size: 50px } .base-fr h2 { font-size: 46px } .base-txt p { margin-bottom: 30px } .about-con h2 { font-size: 34px } .about-con { margin-top: 80px } .about-offer { margin-top: 80px } .about-tit:before { height: 100px } .about-tit h2 { padding: 30px 0 20px; font-size: 50px } .cont-link { font-size: 18px } .cont-fl { padding-left: 2%; width: 44% } .cont-fr { width: 55% } .cont-link p a { font-size: 26px } .cont-fl p { margin-bottom: 20px } .cont-msgs { padding: 60px 50px 40px } .cont-msgs strong { font-size: 36px } .cont-msgs p { font-size: 20px } .cont-msg { margin-top: 40px } .cont-font { font-size: 30px; margin-top: 80px } .top-txt strong { font-size: 50px } .top-txt h1 { font-size: 44px } .top-txt { top: 160px } .top-news, .top-base { top: 200px } .top-case { top: 220px } .list-info { padding: 20px } .list-info a { margin-bottom: 15px } .link-show { position: static; margin-left: 0; margin-top: 20px } .pro-fl strong { padding: 30px 0; height: auto } .pro-fl i { bottom: 80px } .top-main h1 { padding-top: 30px } .top-main { padding-top: 140px } .info-fl h3 { width: 84% } .show-tit { margin-top: 40px } .base-pic img { border-width: 40px } .show-good { background: none } .show-good ul { padding-top: 20px } .show-good li { width: 100%; min-height: auto } .show-good li:nth-child(1) { margin-left: 0 } .show-good li:nth-child(2) { margin-left: 0 } .show-good li:nth-child(3) { margin-left: 0 } .show-ser ul li { min-height: 320px } .show-ser ul li strong { margin: 24px 16px 20px 18px; font-size: 22px } .case-item ul li a { font-size: 20px } .solu-btn a { font-size: 24px } .solu-btn span { font-size: 20px } .solu-btn span img { width: 30px } .solu-fr h1 { margin: 10px 0 30px } .solu-show h3 { font-size: 34px; margin-bottom: 30px } .solu-show h4 { font-size: 30px; margin-bottom: 30px } .solu-pro { margin-top: 120px } .news-txt { padding: 25px } .footer-show { padding: 20px 0 } .show-base { min-height: 550px } .show-base:before, .show-base:after { height: 550px } .info-fl img { margin-top: 200px; width: 80% } .base-mail { top: 320px } .top-pic img { min-height: 100px } .about-spot { margin-top: 60px } .spot-info h2, .about-con h2 { font-size: 46px } .spot-line p strong { font-size: 60px } } @media screen and (max-width: 1200px) { .show-fix { display: none } .header { padding-top: 20px } .nav { margin-right: 20px } .nav ul li a { font-size: 16px } .nav ul li { margin-left: 32px } .banner .sty1 h2 { font-size: 40px; } .banner .sty1 p { font-size: 16px; margin-bottom: 30px; } .banner .sty2 li { height: 140px; padding: 20px 0; } .banner .sty2 li span { font-size: 27px; margin-top: 15px; margin-bottom: 10px; } .banner .sty2 li p { font-size: 16px; } .index-hot h2, .line-base h2, .index-chosen h2 { font-size: 40px } .hot-show li a.hot-tit { font-size: 24px } .hot-show li p { font-size: 15px } .index-about h1 { font-size: 40px; } .index-about p { width: 100% } .index-about a { width: 180px; height: 55px; line-height: 55px; font-size: 18px } .index-case:before { display: none } .index-tit { font-size: 36px } .index-txt { line-height: 32px } .line-pic { width: 49% } .line-base ul { margin-top: 70px } .line-base ul li a { font-size: 22px; line-height: 32px } .ep-info strong, .foot-fl strong { font-size: 40px } .scroll-tit, .index-chosen p { font-size: 24px } .index-chosen { margin-top: 100px } .index-chosen ul { margin-top: 60px } .footer { margin-top: 160px } .foot-count { margin-top: 60px } .foot-count strong { font-size: 28px } .foot-list { margin-top: 80px; padding-top: 60px } .foot-list dt { font-size: 26px } .about-base ul { width: 96% } .base-fr h1 { font-size: 48px } .base-fr h2 { font-size: 42px } .about-con { margin-top: 60px } .about-con p { font-size: 16px; line-height: 32px; margin-top: 30px } .about-con ul { margin-top: 30px } .about-offer { margin-top: 60px } .about-tit:before { height: 90px } .about-tit h2 { padding: 30px 0 20px; font-size: 46px } .offer-fr ul li { margin-bottom: 20px } .top-cont { padding-top: 160px } .cont-fr { margin-top: 10px } .cont-txt { font-size: 30px } .cont-fl p strong { font-size: 36px; margin-right: 36px } .cont-fl p { margin-bottom: 15px } .cont-head { width: 240px; height: 288px } .cont-head span { margin-left: 165px; margin-top: 100px; width: 220px; height: 55px; line-height: 46px } .cont-txt { font-size: 26px } .cont-link { margin-top: 100px } .cont-msgs { padding: 50px 30px 40px } .cont-msgs strong { font-size: 32px } .cont-ensure li img { width: 130px } .cont-font { margin-bottom: 0 } .list-pic { width: 96% } .list-pic a { -webkit-border-radius: 6px 6px 40px 6px; -moz-border-radius: 6px 6px 40px 6px; -ms-border-radius: 6px 6px 40px 6px; -o-border-radius: 6px 6px 40px 6px; border-radius: 6px 6px 40px 6px } .pro-fr { padding-top: 10px } .top-main h1:before { height: 4px } .top-main h1 { font-size: 34px; margin-bottom: 30px } .top-main p { font-size: 18px } .top-main p.txt-pro { margin-top: 30px } .link-show span { height: 80px; line-height: 80px; -webkit-border-bottom-left-radius: 40px; -moz-border-bottom-left-radius: 40px; -ms-border-bottom-left-radius: 40px; -o-border-bottom-left-radius: 40px; border-bottom-left-radius: 40px } .link-show .link-msg { height: 80px; line-height: 80px; -webkit-border-bottom-right-radius: 40px; -moz-border-bottom-right-radius: 40px; -ms-border-bottom-right-radius: 40px; -o-border-bottom-right-radius: 40px; border-bottom-right-radius: 40px; font-size: 20px } .pro-fl { padding-left: 0; width: 52% } .pro-fr { width: 45% } .pro-fl i { display: none } .pro-fl strong { padding: 30px 10px; font-size: 20px; text-align: center } .link-show span img { width: 30px } .link-msg img { width: 24px } .info-fl h3 { margin-top: 60px; font-size: 26px } .base-pic img { border-width: 30px } .base-pic { -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px } .tit-ser:before, .tit-data:before, .tit-related:before { height: 100px } .tit-ser h3, .tit-data h3, .tit-related h3 { padding: 48px 0 20px } .show-tit h3 { font-size: 30px } .show-ser ul li { min-height: 280px } .show-ser ul li p { margin-right: 20px; margin-left: 60px } .msg-fl { padding: 20px 30px } .main-msg strong { font-size: 30px } .main-msg p { line-height: 18px; line-height: 32px } .case-fl { width: 26% } .case-item { padding: 20px } .case-item ul li a { font-size: 18px } .case-item ul li { padding: 18px 0 } .case-fr { width: 72% } .list-info a.more-arrow { display: none } .solu-btn { margin-top: 30px } .solu-fr h1 { font-size: 32px } .solu-show h3 { font-size: 32px; margin-bottom: 20px } .solu-show h4 { font-size: 28px; margin-bottom: 20px } .solu-pro { margin-top: 100px } .news-txt { padding: 20px } .news-txt a { line-height: 32px; height: 64px; font-size: 20px } .news-list li { padding: 30px 24px } .news-list li a { font-size: 20px } .news-list li p { font-size: 16px; line-height: 30px } .news-list { margin-top: 70px } .news-link span { font-size: 22px } .news-link span img { width: 30px } .news-main { font-size: 16px } .news-base { font-size: 22px } .news-main h3 { font-size: 32px } .news-main h4 { font-size: 30px } .spot-info h2, .about-con h2 { font-size: 40px } .spot-line p.dot01, .spot-line p.dot02, .spot-line p.dot03, .spot-line p.dot04 { position: inherit; left: auto; right: 0; top: 0; bottom: 0; margin: 0 1% } .spot-line { background: none; min-height: auto; margin: 40px 0 } .spot-line p { float: left; width: 23%; margin: 0 1% } .spot-line p strong { font-size: 46px } } @media screen and (max-width: 1100px) { .index-tit { font-size: 32px; line-height: 40px; margin: 0 0 20px } .index-txt { line-height: 30px; font-size: 15px } .line-base:after { display: none } .line-base { padding-bottom: 80px } .index-ep { margin-top: 60px } .ep-info strong { font-size: 36px } .scroll-tit { font-size: 22px } .index-chosen { margin-top: 80px } .footer { margin-top: 120px } .foot-count { margin-top: 40px } .foot-list { margin-top: 60px; padding-top: 40px } .foot-list dt { font-size: 24px } .foot-list dd { font-size: 15px } .foot-con p, .foot-prpo a { font-size: 15px } .base-fr h1 { font-size: 44px; padding-bottom: 40px; margin-bottom: 10px } .base-fr h2 { font-size: 40px; padding-bottom: 40px; margin-bottom: 10px } .about-base ul li { padding: 30px 2% } .about-con { margin-top: 50px } .about-tit:before { display: none } .about-tit h2 { padding: 0; margin-bottom: 20px; font-size: 40px } .about-offer p { line-height: 32px; font-size: 18px } .offer-fr { width: 32% } .offer-fr ul li { line-height: 26px; margin-bottom: 18px } .offer-show { margin-top: 30px } .cont-txt { font-size: 22px; line-height: 36px } .cont-fl p strong { font-size: 32px; margin-right: 28px } .cont-msgs { padding: 40px 25px 30px; -webkit-border-radius: 10px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px } .cont-msgs strong { font-size: 32px } .cont-msg { margin-top: 30px; padding: 20px 20px 40px } .cont-link p a { font-size: 24px } .cont-link p { margin-bottom: 20px } .cont-link { margin-top: 80px } .cont-ensure li p { font-size: 15px; line-height: 26px } .type-pro li { margin-bottom: 20px } .top-txt strong { font-size: 46px } .top-txt h1 { font-size: 40px } .list-info a { font-size: 20px; margin-bottom: 12px } .list-info p { font-size: 15px } .top-show img { min-height: 400px } .top-shows img { min-height: 460px } .top-case { top: 180px } .top-news { top: 160px } .top-main p, .top-main p.txt-pro { font-size: 16px; line-height: 34px } .info-fl h3 { font-size: 24px } .base-pic img { border-width: 20px } .show-good li strong { font-size: 19px } .show-good li { font-size: 16px } .show-good ul { padding-top: 0 } .show-ser ul li { min-height: 260px } .show-ser ul li p { line-height: 32px; margin-top: 20px } .show-ser ul li strong { font-size: 20px; margin-top: 20px } .msg-fr { padding-left: 6% } .main-msg strong { font-size: 26px } .case-item ul li a { font-size: 16px } .case-item { -webkit-border-bottom-right-radius: 40px; -moz-border-bottom-right-radius: 40px; -ms-border-bottom-right-radius: 40px; -o-border-bottom-right-radius: 40px; border-bottom-right-radius: 40px; -webkit-box-shadow: 0 4px 12px rgba(0, 67, 139, 0.5); -moz-box-shadow: 0 4px 12px rgba(0, 67, 139, 0.5); -ms-box-shadow: 0 4px 12px rgba(0, 67, 139, 0.5); -o-box-shadow: 0 4px 12px rgba(0, 67, 139, 0.5); box-shadow: 0 4px 12px rgba(0, 67, 139, 0.5) } .solu-show h3 { font-size: 26px; margin-bottom: 16px } .solu-show h4 { font-size: 24px; margin-bottom: 16px } .solu-pro { margin-top: 80px } .top-main { padding-top: 120px } .news-base { font-size: 20px } .news-base span img { width: 20px } .news-base i img { width: 28px } .news-main { padding-left: 60px } .news-dot:before { left: -60px } .news-base span img, .news-base i img, .top-error img { min-height: 0 } .error p { font-size: 32px } .error-btn span, .error-btn a { width: 300px; height: 60px; line-height: 60px } .top-error img { width: 400px } .tit-ser:before, .tit-data:before, .tit-related:before { height: 80px } .tit-ser h3, .tit-data h3, .tit-related h3 { padding: 32px 0 16px } } #topclose { display: none } .ny-bg { position: fixed; width: 100%; height: 100vh; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 99999 } .ny-view { width: 94%; position: absolute; max-width: 1400px; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden } .main-img { display: block; width: 100% } .main-icon { position: absolute } .nicon1 { left: 0; top: -150px; width: 200px } .nicon2 { right: 0; top: -150px; width: 200px } .nicon5 { left: 0; bottom: -200px; width: 100% } .nicon3 { left: 7%; top: -100px; width: 80px } .nicon4 { right: 16%; top: -100px; width: 70px } .nicon6 { left: 15%; top: 20%; width: 160px; animation: moveY 5s linear infinite } .nicon7 { left: 15%; top: 70%; width: 120px; animation: moveY 3s linear infinite } .nicon8 { right: 15%; bottom: 10%; width: 120px; animation: moveY 2s linear infinite } .ny-close { width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; position: absolute; right: 50%; bottom: 7%; background: #FFFFFF; margin-right: -25px; cursor: pointer; font-weight: bold } .ny-close i { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-style: normal; display: block } .ny-close:hover i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg) } @-webkit-keyframes move { 0% { -webkit-transform: rotate(0) } 100% { -webkit-transform: rotate(360deg) } } @keyframes move { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } } @-webkit-keyframes moveY { 0% { -webkit-transform: translate(0, 0) } 50% { -webkit-transform: translate(20px, 0) } 100% { -webkit-transform: translate(0, 0) } } @keyframes moveY { 0% { -webkit-transform: translate(0, 0) } 50% { -webkit-transform: translate(20px, 0) } 100% { -webkit-transform: translate(0, 0) } } .search_body .top-show { background: url(../images/top-case.jpg) center no-repeat; background-size: cover; overflow: hidden; } .search_body .top-show .top-case { position: inherit; padding: 160px 0 80px; } .search_body .top-show strong { position: relative; z-index: 1000; font-size: 40px; } .search_body .top-show strong span { color: #FB605A; } .search_body .type-pro { margin-top: 50px; } .search_body .type-pro li { margin-bottom: 0; } .search_body .pro-list { margin-top: 20px; } .privacy_notice { padding: 30px 0 } .privacy_notice p { margin: 20px 0 } .privacy_notice p strong { font-size: 24px } .customer_cases { padding: 60px 0; background: #f8f8f8 } .customer_cases h3 { font-size: 30px; color: #1057e3; line-height: 1; font-weight: bold } .customer_cases ul { margin-top: 52px } .customer_cases ul li { width: 23.87%; float: left; padding: 8px 8px 90px; background: #fff; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05) } .customer_cases ul li img { width: 100%; display: block; border-radius: 20px; } .customer_cases ul li strong { margin-top: 27px; padding: 0 11px; height: 52px; font-size: 19px; color: #333333; line-height: 1.42; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden } .customer_cases ul li span { padding: 14px 35px; position: absolute; left: 0; right: 0; bottom: 0; border: 1px solid #fda82b; border-radius: 0 0 20px 20px; font-size: 19px; color: #fda82b; font-weight: bold; transition: all linear 0.3s } .customer_cases ul li span:before { content: ""; width: 30px; background: url(../images/alpagejt.png) center no-repeat; background-size: 100%; position: absolute; right: 25px; top: 0; bottom: 0; transition: all linear 0.3s } .customer_cases ul li:hover span { background: #fda82b; color: #fff } .customer_cases ul li:hover span:before { background: url(../images/alpagejt_on.png) center no-repeat; background-size: 100% } .customer_cases ul li+li { margin-left: 1.5% } @media screen and (max-width: 1370px) { .customer_cases ul li { padding-bottom: 72px; } .customer_cases ul li strong { margin-top: 20px; height: 48px; font-size: 17px; } .customer_cases ul li span { padding: 11px 30px; font-size: 17px; } }