* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body, button, input, select, textarea {
font-family: "Microsoft YaHei", 微软雅黑, \9ed1\4f53, \5b8b\4f53, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu;
}
html {
font-size: 62.5%;
}
body {
font-size: 12px;
font-size: 1.2rem;
line-height: 1;
}
@media only screen and (min-width:320px) {
html {
font-size: 62.5% !important;
}
}
@media only screen and (min-width:640px) {
html {
font-size: 125% !important;
}
}
@media only screen and (min-width:750px) {
html {
font-size: 150% !important;
}
}
@media only screen and (min-width:1242px) {
html {
font-size: 187.5% !important;
}
}
address, cite, dfn, em, var, i {
font-style: normal;
}
code, kbd, pre, samp {
font-family: courier new, courier, monospace;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: inherit;
}
body, button, input, select, textarea {
font: "Microsoft YaHei", Helvetica;
color: #333;
}
input, select, textarea {
outline: none;
}
button {
cursor: pointer;
outline: none;
}
a {
text-decoration: none;
outline: none;
color: inherit;
}
a, button, input, textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0;
)
}
body {
margin: 0 auto;
-webkit-text-size-adjust: none;
}
.fn-left, .fn-right {
display: inline;
}
.fn-left {
float: left;
}
.fn-right {
float: right;
}
.fn-clear {
*zoom: 1;
}
.fn-clear:before, .fn-clear:after {
display: block;
line-height: 0;
height: 0;
content: "";
}
.fn-clear:after {
clear: both;
}
.b_c {
color: #3D78DB;
}
.title {
font-size: 2.3rem;
text-align: center;
line-height: 2.4rem;
margin: 2.5rem auto .6rem;
}
.sub_title {
font-size: 1.3rem;
text-align: center;
margin-bottom: 1rem;
}
.go_btn {
display: block;
width: 93.333%;
height: 4rem;
line-height: 4rem;
background: #1D65D4;
color: #FFFFFF;
text-align: center;
white-space: pre-wrap;
margin: 2rem auto;
font-size: 1.6rem;
-webkit-border-radius:.5rem;
border-radius: .5rem;
}
.layout {
min-height: 100vh;
}
/*********header style************/
.layout_header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 5rem;
z-index: 1;
background: #1D65D4;
}
.layout_header .action_bar {
height: 5rem;
position: relative;
}
.layout_header .action_bar .app_title {
display: block;
height: 5rem;
overflow: hidden;
margin: 0 5rem;
background: url(../image/logo.png) center center no-repeat;
background-size: auto 45%;
}
.layout_header .action_bar>a {
display: block;
position: absolute;
font-size: 2rem;
top: 50%;
overflow: hidden;
z-index: 1;
}
.layout_header .action_bar .list {
width: 2.2rem;
height: 2.2rem;
margin-top: -1.1rem;
left: 1.3rem;
background: url(../image/h_list.png) center center no-repeat;
background-size: 100% auto;
}
.layout_header .action_bar .phone {
width: 2.4rem;
height: 2.6rem;
margin-top: -1.3rem;
right: 1.3rem;
background: url(../image/h_phone.png) center center no-repeat;
background-size: auto 100%;
}
.layout_header .collapse {
background: #1D65D4;
display: none;
}
.layout_header .collapse li {
position: relative;
border-bottom: 1px solid #1C1D1F;
}
.layout_header .collapse li a {
color: #ffffff;
display: block;
padding: 1.5rem 2rem;
}
/*****body style*********/
.layout .layout_body {
position: relative;
z-index: 0;
padding-top: 5rem;
}
.layout .layout_body .banner {
position: relative;
margin: 0 auto;
overflow: hidden;
z-index: 1;
}
.layout .layout_body .banner img {
width: 100%;
}
.layout .row1 .con {
width: 100%;
clear: both;
margin: 1.5rem auto 2rem;
}
.layout .row1 .con>div {
width: 33.333%;
text-align: center;
font-size: 1.4rem;
float: left;
}
.layout .row1 .con>div img {
width: 55%;
margin-bottom: .5rem;
}
.layout .row2>img {
width: 100%;
}
.layout .row3 .con {
width: 100%;
margin-top: 1.5rem;
}
.layout .row3 .row_to>div {
background: #1D65D4;
height: 7rem;
line-height: 7rem;
text-align: center;
font-size: 1.5rem;
position: relative;
float: left;
width: 45%;
margin: 4% auto 2%;
color: #FFFFFF;
}
.layout .row3 .row_to>div:nth-child(odd) {
margin-left: 3.333%;
margin-right: 3.333%;
}
.layout .row3 .step {
position: absolute;
top: -1rem;
left: 50%;
margin-left: -1rem;
width: 2rem;
height: 2rem;
line-height: 2rem;
color: #000000;
text-align: center;
background: #FFF701;
border-radius: 100%;
}
.layout .row4>img {
width: 93.333%;
display: block;
margin: 2rem auto 0;
}
.layout .row5 .con>div {
width: 93.333%;
margin: 5rem auto 0;
padding: 2rem 1.5rem;
background: #B0B0B0;
color: #FFFFFF;
position: relative;
}
.layout .row5 .con>div>img {
position: absolute;
width: 9rem;
top: -4rem;
}
.layout .row5 .first img {
left: 2rem;
}
.layout .row5 .second img {
right: 2rem;
}
.layout .row5 .main {
text-align: center;
margin-bottom: 3rem;
}
.layout .row5 .con_c p {
font-size: 1.2rem;
letter-spacing: .05rem;
line-height: 1.6rem;
text-indent: 2em;
text-align: justify;
}
.layout .row5 .main span {
display: inline-block;
font-size: 1.4rem;
margin-left: 1rem;
}
.layout .row5 .main span:nth-child(2) {
font-size: 2rem;
font-weight: bold;
}
.layout .row5 .first .main span:nth-child(2) {
margin-left: 5rem;
}
.layout .row5 .second .main {
text-align: left;
}
.layout .row5 .second .main span {
margin-left: .5rem;
}
.layout .row6 .title {
font-size: 2.0rem;
line-height: 2.2rem;
}
.layout .row6>img {
display: block;
width: 35%;
margin: 1.4rem auto;
}
.layout .row6 .con {
width: 93.333%;
margin: 0 auto;
border: 1px solid #E5E5E5;
padding: 2%;
color: #FFFFFF;
font-size: 3.5rem;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 100;
}
.layout .row6 .con .con_c {
background: #1D65D4;
padding: 1rem 0;
line-height: 3.5rem;
}
.layout .row7 ul {
width: 70%;
padding-left: 15%;
margin: 2rem auto 0;
padding-top: 5rem;
position: relative;
}
.layout .row7 ul li {
float: right;
margin-bottom: 2rem;
text-align: center;
color: #FFFFFF;
width: 100%;
height: 2.5rem;
line-height: 2.5rem;
font-size: 1.4rem;
-webkit-border-radius: 2rem;
border-radius: 2rem;
}
.layout .row7 ul li:nth-child(even) {
background: #1D65D4;
}
.layout .row7 ul li:nth-child(odd) {
background: #22ADDD;
}
.layout .row7 ul .step {
position: absolute;
left: 16%;
top: 0;
width: 1.2%;
height: 100%;
background: -webkit-linear-gradient(to bottom, #34BCDD, #1D65D4);
background: -mozt-linear-gradient(to bottom, #34BCDD, #1D65D4);
background: linear-gradient(to bottom, #34BCDD, #1D65D4);
}
.layout .row7 .step .main {
position: absolute;
top: 0;
left: 50%;
width: 4.5rem;
height: 4.5rem;
padding-top: 1.25rem;
margin-left: -2.25rem;
text-align: center;
-webkit-border-radius: 50%;
border-radius: 50%;
background: -webkit-linear-gradient( to right bottom, #34BCDD, #1D65D4);
background: -mozt-linear-gradient( to right bottom, #34BCDD, #1D65D4);
background: linear-gradient( to right bottom, #34BCDD, #1D65D4);
-webkit-box-shadow:0rem 0rem 1rem .2rem #CAEEF8;
box-shadow:0rem 0rem 1rem .2rem #CAEEF8;
}
.layout .row7 .step .main>img {
height: 2rem;
}
.layout .row7 .step .con {
position: absolute;
left: 50%;
top: 5.6rem;
width: 1.4rem;
height: 100%;
margin-left: -0.7rem;
}
.layout .row7 .step .con span {
display: block;
width: 1.4rem;
height: 1.4rem;
margin-bottom: 3.1rem;
background: -webkit-linear-gradient( to right bottom, #34BCDD, #1D65D4);
background: -mozt-linear-gradient( to right bottom, #34BCDD, #1D65D4);
background: linear-gradient( to right bottom, #34BCDD, #1D65D4);
-webkit-border-radius: 50%;
border-radius: 50%;
}
.layout .row8 .con>div {
float: left;
width: 50%;
text-align: center;
margin: 1.5rem auto;
font-size: 1.4rem;
}
.layout .row8 .con>div img {
width: 30%;
}
.layout .row8 .con>div p {
padding:.5rem 0;
margin-bottom: 1rem;
}
.layout .row8 .con>div:nth-child(odd) p {
border-right: 1px solid #E9E9E9;
}
.layout .row8 .con>div:nth-child(3), .layout .row8 .con>div:nth-child(4) {
margin-bottom: 0;
}
.layout .row9 img {
width: 93.333%;
display: block;
margin: 2rem auto 0;
}
.layout .row10 .title {
margin-bottom: 1rem;
}
.layout .row10 .con>div {
float: left;
width: 50%;
height: 12rem;
font-size: 1.2rem;
line-height: 1.6rem;
padding: 5rem 1rem 0;
border: 1px solid #D4D5D5;
}
.layout .row10 .con>div:nth-child(even) {
border-left: none;
border-right: none;
}
.layout .row10 .con>div:nth-child(1), .layout .row10 .con>div:nth-child(2) {
border-bottom: none;
}
.layout .row10 .con>div:nth-child(odd) {
border-left: none;
}
.layout .row10 .con>div p {
text-indent: 2em;
}
.layout .row10 .con>div:nth-child(1) {
background: url(../image/row10_i1.png) center 1.75rem no-repeat;
background-size: auto 2.5rem;
}
.layout .row10 .con>div:nth-child(2) {
background: url(../image/row10_i2.png) center 1.75rem no-repeat;
background-size: auto 2.5rem;
}
.layout .row10 .con>div:nth-child(3) {
background: url(../image/row10_i3.png) center 1.75rem no-repeat;
background-size: auto 2.5rem;
}
.layout .row10 .con>div:nth-child(4) {
background: url(../image/row10_i4.png) center 1.75rem no-repeat;
background-size: auto 2.5rem;
}
.footer {
background: #3A3A3A;
padding-top: 1rem;
padding-bottom: 1rem;
}
.footer .footer_tel {
text-align: center;
padding: .2rem 0;
}
.footer .footer_tel img {
width: 80%;
}
.footer .last_ {
border-top: 1px solid #4F4F4F;
padding-top: 1rem;
line-height: 2.1rem;
text-align: center;
color: #4F4F4F;
font-size: 1rem;
margin-top: 1rem;
}
.footer .last_ span a {
font-size: 1.3rem;
}