@charset "utf-8"; .xz-slider { width: 100%; height: 620px; background: url(../images/slider.png) center center no-repeat; } .p-lg { padding-top: 120px; padding-bottom: 120px; } .mtitle { text-align: center; margin-bottom: 80px; } .mtitle h2 { display: inline-block; width: 498px; height: 50px; text-align: center; font-size: 30px; background-image: linear-gradient(135deg, #477ae4, #195588); line-height: 50px; -webkit-background-clip: text; color: transparent; position: relative; } .mtitle h2::after { position: absolute; left: 0; right: 0; display: inline-block; content: ""; background: url(../images/title-bg.png) no-repeat; height: 50px; } .xz-ntlist > ul > li { width: 25%; float: left; text-align: center; } .xz-ntlist > ul > li h3 { margin-top: 20px; margin-bottom: 15px; font-size: 20px; font-weight: bold; color: #3c71ce; } .xz-ntlist > ul > li p { color: #888; padding: 0 50px; text-align: center; line-height: 2; font-size: 14px; } .xz-box { background: url(../images/boxbg.png) center center no-repeat; background-size: cover; } .xz-fw > ul { margin-left: -10px; margin-right: -10px; } .xz-fw > ul > li { width: 25%; float: left; padding: 0 10px; } .xz-fw > ul > li img { width: 100%; } .xz-fw > ul > li h3 { margin-top: 20px; font-size: 20px; text-align: center; } .xz-service { margin-top: -150px; } .xz-service > ul > li { width: 16.6666%; float: left; text-align: center; } .xz-service > ul > li h3 { margin-top: 15px; font-size: 18px; padding: 0 60px; } .xz-ser-img { text-align: center; } .xz-youshi > ul { margin-left: -40px; margin-right: -40px; } .xz-youshi > ul > li { width: 33.3333%; float: left; padding-left: 40px; padding-right: 40px; } .xz-youshi > ul > li .ys-tit { border-top: 1px solid #3C71CE; border-bottom: 1px solid #3C71CE; padding-top: 20px; padding-bottom: 20px; position: relative; } .xz-youshi > ul > li .ys-tit h3 { font-size: 20px; color: #3c71ce; } .xz-youshi > ul > li .ys-tit span { position: absolute; right: 0; color: #3c71ce; display: inline-block; opacity: .5; font-size: 20px; top: 20px; } .xz-youshi > ul > li .ys-info { font-size: 14px; color: #888; line-height: 2; padding-top: 40px; } .xz-youshi > ul > li.first { margin-bottom: 80px; } .xz-liucheng > ul > li { width: 25%; float: left; } .xz-liucheng > ul > li .t { position: relative; text-align: center; border-bottom: 1px solid #3C71CE; } .xz-liucheng > ul > li .t::after { position: absolute; width: 15px; height: 15px; border-radius: 15px; border: 1px solid #3C71CE; background-color: #fff; left: 50%; margin-left: -7px; bottom: -9px; display: inline-block; content: ""; z-index: 1; } .xz-liucheng > ul > li span { display: inline-block; font-size: 100px; font-family: "arial"; font-weight: bold; color: #D4E0F4; } .xz-liucheng > ul > li h3 { position: absolute; bottom: 50px; font-size: 20px; color: #3c71ce; left: 0; right: 0; background-color: #fff; padding: 3px 0; text-align: center; } .xz-liucheng > ul > li .c { color: #888; margin-top: 50px; } .xz-liucheng > ul > li .c p { font-size: 14px; text-align: center; line-height: 2; margin-top: 10px; } .xz-liucheng > ul > li:hover .t:after { background-color: #3C71CE; } .xz-case { background: linear-gradient(top left, #477ae4, #195588); background: -ms-linear-gradient(top left, #477ae4, #195588); background: -webkit-linear-gradient(top left, #477ae4, #195588); background: -moz-linear-gradient(top left, #477ae4, #195588); border-radius: 4px; padding: 10px 5px 5px 5px; } .xz-case-content { background-color: #fff; border-radius: 4px; padding: 50px 0; } .xz-case-content .left, .xz-case-content .right { width: 50%; float: left; padding: 0 50px; } .xz-case-content .left li, .xz-case-content .right li { position: relative; padding: 15px 0; padding-left: 15px; } .xz-case-content .left li::after, .xz-case-content .right li::after { position: absolute; content: ""; display: inline-block; width: 0; height: 0; overflow: hidden; vertical-align: middle; border-left: 6px solid #8aaae2; border-top: 5px dashed transparent; border-bottom: 5px dashed transparent; left: 0; top: 22px; border-top-left-radius: 3px; border-radius: 3px; } .xz-case-content .left li p, .xz-case-content .right li p, .xz-case-content .left li span, .xz-case-content .right li span { display: inline-block; } .xz-case-content .left li span, .xz-case-content .right li span { float: right; color: #888; font-size: 14px; line-height: 24px; } .xz-case-content .left { border-right: 1px solid #E2EAF8; } .xz-case-content .right { float: right; } .xz-form { margin-top: 20px; } .xz-form .half { width: 50%; float: left; } .xz-form .three { width: 33.3333%; float: left; } .xz-form .xz-form-input { position: relative; padding: 0 20px; } .xz-form .txt { position: absolute; left: 35px; line-height: 62px; height: 62px; color: #888; top: 0; bottom: 0; } .xz-form .input, .xz-form .form-radio, .xz-form .area { height: 62px; border: 1px solid #DFE1E6; background-color: #fff; width: 100%; padding-left: 100px; } .xz-form .input label, .xz-form .form-radio label, .xz-form .area label { margin-right: 20px; margin-top: 18px; display: inline-block; position: relative; padding-left: 20px; } .xz-form .area { height: 200px; padding-top: 20px; padding-right: 20px; } .xz-form input[type="radio"] + label::before { position: absolute; content: " "; display: inline-block; width: 15px; height: 15px; border-radius: 50%; top: 5px; left: 0; margin-right: 8px; background: url(../images/radio.png); } .xz-form input[type="radio"]:checked + label::before { background: url(../images/radio-checked.png); } .xz-form input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); } .xz-form .sub { background-color: #3c71ce; color: #fff; border: 1px solid #3c71ce; height: 62px; line-height: 62px; padding: 0 80px; font-size: 18px; letter-spacing: 2px; } .xz-form .tips { display: inline-block; color: #888; margin-left: 30px; } .xz-form .error { position: absolute; right: 30px; color: red; top: 20px; z-index: 1; font-size: 14px; } .pol-list > ul > li { padding-top: 10px; position: relative; padding-left: 16px; } .pol-list > ul > li:before { position: absolute; content: ""; display: inline-block; width: 8px; height: 8px; background-color: #E8E4E1; border-radius: 8px; left: 0; top: 16px; } .pol-list > ul > li a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 85%; } .pol-list > ul > li span { color: #999999; display: inline-block; float: right; font-size: 12px; line-height: 22px; } .pol-list > ul > li:first-child:before { background-color: #FE8C28; } .pol-list > ul > li:nth-child(2):before { background-color: #FE9E4B; } .pol-list > ul > li:nth-child(3):before { background-color: #FEAE68; } .pol-hot { background-color: #F5F8FC; } .pol-hot .pic { width: 144px; height: 94px; display: block; position: relative; float: left; } .pol-hot .pic img { width: 100%; height: 94px; object-fit: cover; } .pol-hot > div { margin-left: 144px; padding: 10px 15px; position: relative; height: 94px; } .pol-hot > div h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 65px; margin-bottom: 5px; } .pol-hot > div p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 38px; } .pol-hot > div .more { position: absolute; right: 0; bottom: 0; } .xz-news .left, .xz-news .right { width: 48%; } .xz-news .left { float: left; } .xz-news .right { float: right; } .tit-name h2, .tit-name h1 { font-size: 24px; display: inline-block; } .tit-name .f20 { font-size: 20px; } .tit-name .more { float: right; color: #707070; font-size: 15px; line-height: 36px; } .tit-name .more:hover { color: #000000; } .xz-case-pic > ul > li { width: 20%; float: left; padding: 10px; } .xz-case-pic > ul > li p { text-align: center; height: 120px; border: 1px solid #eee; line-height: 120px; background-color: #fff; } .xz-case-pic > ul > li p img { vertical-align: middle; } @media (max-width: 960px) { .xz-slider { height: 260px; background-size: cover; } .p-lg { padding-top: 40px; padding-bottom: 40px; } .mtitle { margin-bottom: 30px; } .mtitle h2 { width: 100%; font-size: 24px; } .mtitle h2::after { display: none; } .xz-liucheng > ul > li h3, .xz-youshi > ul > li .ys-tit h3, .xz-fw > ul > li h3, .xz-ntlist > ul > li h3 { font-size: 18px; } .xz-ntlist > ul > li { width: 50%; margin-bottom: 20px; } .xz-ntlist > ul > li img { max-width: 50%; } .xz-ntlist > ul > li h3 { margin-bottom: 10px; } .xz-ntlist > ul > li p { padding: 0 18px; } .xz-fw > ul > li { width: 50%; margin-bottom: 40px; } .xz-service { margin-top: -50px; } .xz-service > ul > li { width: 33.3333%; margin-top: 30px; } .xz-service > ul > li h3 { font-size: 16px; padding: 0 10px; } .xz-youshi > ul { margin-left: 0; margin-right: 0; } .xz-youshi > ul > li { width: 100%; padding: 0 18px; } .xz-youshi > ul > li, .xz-youshi > ul > li.first { margin-bottom: 30px; } .xz-youshi > ul > li .ys-info { padding-top: 20px; } .xz-liucheng { padding-left: 40px; } .xz-liucheng > ul > li .t::after { display: none; } .xz-liucheng > ul > li .t { border-bottom: 0; text-align: left; } .xz-liucheng > ul > li { width: 100%; border-left: 1px solid #3c71ce; position: relative; text-align: left; padding-bottom: 40px; padding-left: 30px; } .xz-liucheng > ul > li::before { position: absolute; width: 11px; height: 11px; border-radius: 11px; border: 1px solid #3C71CE; background-color: #fff; left: 0; display: inline-block; content: ""; z-index: 1; top: 68px; margin-left: -7px; } .xz-liucheng > ul > li span { line-height: 1; } .xz-liucheng > ul > li h3 { bottom: 10px; text-align: left; } .xz-liucheng > ul > li .c { margin-top: 0px; } .xz-liucheng > ul > li .c p { text-align: left; } .xz-liucheng > ul > li:last-child { padding-bottom: 0; } .xz-case-content .right, .xz-case-content .left { width: 100%; } .xz-case-content { padding: 15px 0; } .xz-case-content .left, .xz-case-content .right { padding: 0 15px; } .xz-case-content .left li span, .xz-case-content .right li span { display: none; } .xz-case-content .left li, .xz-case-content .right li { padding-top: 10px; padding-bottom: 10px; } .xz-case-content .left li::after, .xz-case-content .right li::after { top: 15px; } .xz-form { margin-top: 0; } .xz-form .xz-form-input { width: 100%; } .xz-form .form-radio { height: auto; padding-bottom: 20px; } .xz-form .xz-form-input { margin-top: 20px; } .xz-form .sub { display: block; width: 100%; } .xz-form .tips { margin-left: 0; margin-top: 10px; } .xz-case-pic > ul > li { width: 33.3333%; } .xz-case-pic > ul > li p { height: 80px; line-height: 80px; } .xz-case-pic > ul > li p img { max-width: 80%; } .xz-news .left, .xz-news .right { width: 100%; } .tit-name h2, .tit-name h1 { font-size: 20px; } .xz-news .right { margin-top: 20px; } }