.head { height: 5.6rem; background-repeat: no-repeat; background-size: cover; } .head_d1 { width: 1200px; margin: 0 auto; padding-top: 1.35rem; padding-bottom: 1.3rem; } .head_p1 { font-size: 0.46rem; color: white; line-height: 1; margin-bottom: 0.17rem; letter-spacing: 1px; font-weight: 500; } .head_p2 { font-size: 0.2rem; color: white; line-height: 1; margin-bottom: 0.36rem; letter-spacing: 4px; text-indent: 4px; font-family: arial; } .head_p3 { font-size: 0.14rem; color: white; line-height: 0.3rem; } .head_d2 { display: flex; align-items: center; margin-top: 0.55rem; cursor: pointer; } .head_d2 img { width: 0.7rem; height: 0.7rem; object-fit: contain; display: block; margin-right: 0.16rem; } .head_d2 p { font-size: 0.22rem; color: white; border-bottom: 1px solid white; letter-spacing: 1px; } /* */ .wgzs { width: 1200px; margin: 0 auto; padding-top: 0.9rem; padding-bottom: 0.9rem; } .wgzs_p1 { text-align: center; font-size: 16px; color: #333947; line-height: 36px; margin-bottom: 0.5rem; } .wgzs_list { display: flex; justify-content: space-around; text-align: center; } .wgzs_item { width: 25%; transition: 0.5s; border-radius: 5px; padding: 0.5rem 0; } .wgzs_item:hover { box-shadow: 0 0 10px 1px rgba(102, 102, 102, 0.1); } .wgzs_img { height: 0.68rem; margin-bottom: 0.4rem; } .wgzs_img img { height: 100%; object-fit: contain; margin: 0 auto; display: block; } .wgzs_p2 { font-size: 18px; color: #333947; margin-bottom: 0.2rem; line-height: 1; } .wgzs_p3 { font-size: 16px; color: #333947; line-height: 1; margin-bottom: 0.2rem; } .wgzs_p4 { font-size: 14px; color: #464d61; line-height: 28px; } /* */ .work_bg { width: 100%; overflow: hidden; background-color: #f0f3f7; } .work { width: 1200px; margin: 0 auto; padding-top: 0.8rem; } .work .pub_title { margin-bottom: 0.25rem; } .work .wgzs_p1 { margin-bottom: 0.7rem; } .work_list { display: flex; justify-content: space-between; margin-bottom: 0.6rem; } .work_item { transition: 0.3s; opacity: 0; transform: translateY(40%); height: auto; } .work_item.on { opacity: 1; transform: translateY(0); } .work_img { width: 0.9rem; height: 0.9rem; margin: 0 auto; position: relative; z-index: 2; } .work_img img { width: 100%; height: 100%; object-fit: contain; } .work_d1 { transform: translateY(-55px); width: 2.8rem; background-color: rgba(255, 255, 255, 0.4); border-radius: 8px; padding: 0.7rem 0.2rem 0; text-align: center; box-shadow: 0 0 10px 1px rgba(102, 102, 102, 0.1); height: 85%; } .work_p1 { font-size: 16px; color: #333947; line-height: 40px; } .work_p2 { font-size: 14px; color: #464d61; line-height: 28px; } .work_p3 { font-size: 22px; color: #333947; text-align: center; padding-top: 0.2rem; margin-bottom: 0.6rem; } .trains_d1 { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; } .trains_l { width: 4.8rem; height: 2.77rem; margin-left: 0.44rem; max-width: 100%; } .trains_l img { max-width: 100%; object-fit: contain; } .trains_r { margin-right: 0.4rem; width: 5.5rem; box-shadow: 0 0 10px 3px rgba(18, 79, 127, .1); padding: 0.36rem 0 0.36rem 1.26rem; border-radius: 5px; background-color: rgba(255, 255, 255, 0.4); transition: 0.5s; } .trains_r:hover { transform: scale(1.1) } .trains_r p { font-size: 16px; color: #333947; position: relative; padding: 0.12rem 0; transition: 0.5s; } .trains_r p::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #619fd0; position: absolute; left: -0.3rem; top: 50%; transform: translateY(-50%); } /* */ .system { position: relative; padding-top: 1rem; background-color: white; } .system_top { position: absolute; top: 0; left: 0; width: 100%; height: 3.8rem; background-image: url("../img/skr118.png"); background-repeat: no-repeat; background-size: cover; z-index: 0; } .system_cont { position: relative; z-index: 2; } .system .pub_title { color: white; margin-bottom: 0.3rem; } .system .pub_title::after { background-color: white; } .system_p1 { font-size: 16px; color: white; text-align: center; line-height: 1; margin-bottom: 0.5rem; } .system_d1 { width: 1200px; margin: 0 auto; } .system_d2 { padding: 0.4rem 0; display: flex; background-color: white; box-shadow: 0 0 10px 1px rgba(102, 102, 102, 0.1); margin-bottom: 0.5rem; } .system_d2_item { flex: 1; text-align: center; border-right: 1px solid #e0ecf6; padding: 0.3rem 0 0.2rem; } .system_d2_item:last-of-type { margin-right: 0; } .system_img { width: 0.76rem; margin: 0 auto 0.4rem; } .system_img img { max-width: 100%; height: 100%; object-fit: contain; } .system_p2 { font-size: 16px; color: #333947; } .system_d3 { display: flex; margin-bottom: 1rem; justify-content: space-between; } .system_d3_item { width: 2.2rem; background-color: white; box-shadow: 0 0 10px 3px rgba(18, 79, 127, .1); text-align: center; padding: 0.3rem 0 0.2rem; transition: 0.5s; } .system_d3_item:hover { transform: scale(1.1); } .system_img2 { height: 0.4rem; margin-bottom: 0.2rem; } .system_img2 img { max-width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto; } .system_p3 { font-size: 16px; color: #333947; line-height: 40px; } .system_p4 { font-size: 14px; color: #464d61; line-height: 28px; } /* */ .tax { width: 1200px; margin: 0 auto; } .tax_p1 { text-align: center; font-size: 22px; color: #333947; line-height: 1; margin-bottom: 0.8rem; } .tax_item { margin-bottom: 1.4rem; } .tax_item:nth-of-type(1) .tax_img { margin-left: -0.56rem; } .tax_item:nth-of-type(2) .tax_img, .tax_item:nth-of-type(4) .tax_img { margin-right: -0.5rem; } .tax_item:nth-of-type(2), .tax_item:nth-of-type(4) { padding-left: 0.4rem; } .tax_item:nth-of-type(3) .tax_img { height: 3.9rem; } .tax_d1 { display: flex; justify-content: space-between; } .tax_img { height: 4.1rem; transition: 1s; transform: translateY(20%); opacity: 0; } .tax_img.on { transform: translateY(0); opacity: 1; } .tax_img img { height: 100%; object-fit: contain; } .tax_d2_item { display: flex; margin-bottom: 0.5rem; min-width: 4.3rem; } .tax_d2_item:last-of-type { margin-bottom: 0; } .tax_d2_l { width: 0.8rem; height: 0.8rem; margin-right: 0.3rem; } .tax_d2_l img { width: 100%; height: 100%; object-fit: contain; } .tax_p2 { font-size: 18px; color: #333947; line-height: 1; margin-bottom: 0.15rem; } .tax_p3 { font-size: 14px; line-height: 24px; color: #333947; } .protect_p2 img { display: none } /* */ .protect { width: 1200px; margin: 0 auto; padding-bottom: 1.5rem; } .protect_p1 { font-size: 22px; color: #333947; line-height: 1; margin-bottom: 0.8rem; text-align: center; } .protect_p2 { font-size: 18px; color: #333947; line-height: 1; margin-bottom: 0.3rem; } .protect_p3 { font-size: 14px; line-height: 24px; color: #333947; } .protect_list { width: 100%; background-image: url('../img/skr143.png'); background-repeat: no-repeat; background-size: 100% auto; padding: 0 0.64rem; height: 5rem; display: flex; justify-content: space-between; flex-wrap: wrap; } .protect_item { width: 3rem; margin-right: 20%; max-height: 1.1rem; } .protect_item:nth-of-type(2n) { margin-right: 0; } .protect_item:nth-of-type(3), .protect_item:nth-of-type(4) { margin-top: auto; } /* */ .money_bg { background-color: #f0f3f7; width: 100%; overflow: hidden; } .money { display: flex; width: 1200px; margin: 0 auto; padding: 0.86rem 0; } .money_img { margin-right: 2.2rem; } .money_r { padding-top: 0.56rem; } .money_p1 { font-size: 0.38rem; color: #333947; line-height: 1; margin-bottom: 0.34rem; font-family: Arial, "Source Han Sans CN"; } .money_p2 { font-size: 0.14rem; color: #464d61; line-height: 1.7; } .money_p3 { background-color: #619fd0; border-radius: 3px; width: 1.56rem; height: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; margin-top: 40px; cursor: pointer; } .money_p3 img { margin-right: 10px; height: 18px; object-fit: contain; } @media screen and (min-width: 1200px) {} @media screen and (max-width: 1920px) {} @media screen and (max-width: 800px) { .head_d1, .wgzs, .work, .system_cont, .tax, .protect, .money { width: 90%; margin: 0 auto; } .money_img { display: none; } .head_p3, .trains_l, .trains_r, .system_d1, .tax_img, .tax_img img, .tax_d2_item, .protect_item, .money_img, .money_img img, .money_p3 { width: 100%; min-width: 100%; } .money { display: block; } .wgzs_list, .work_list, .system_d2, .tax_d1, .protect_list { display: block; } .protect_list { height: auto; } .protect_item { margin: 0 0 0.2rem 0 !important; padding: 0.2rem 0; height: auto; max-height: 100%; border-bottom: 1px dashed #cccccc; } .protect_item:last-of-type { border-bottom: 0; } .protect_list { padding: 0; } .protect_list { background-image: none; } .tax_item:nth-of-type(2n) .tax_d1 { display: flex; flex-direction: column-reverse; } .tax_item { padding: 0 !important; margin-bottom: 0.8rem; } .tax_item .tax_img { margin: 0 0 0.5rem 0 !important; height: auto !important; } .system_d3 { flex-wrap: wrap; } .system_d3_item { width: 47%; margin-bottom: 0.3rem; padding-left: 0.15rem; padding-right: 0.15rem; } .system_d2_item { border-right: 0; } .system_p1 { line-height: 1.6; } .trains_l, .trains_r { margin: 0; } .trains_l { margin-bottom: 0.4rem; } .trains_r { padding: 0.36rem 0 0.36rem 0.8rem; } .wgzs_item { margin-bottom: 0.5rem; width: 90%; margin: 0 auto; } .head_p3 { font-size: 0.18rem; } .work_d1 { width: 90%; margin: 0 auto; padding-bottom: 0.4rem; transform: translateY(-35px); } .protect { padding: 0.5rem 0; } .tax_p1 { margin-bottom: 0.3rem; } .money_img { margin-right: 0; } .money_p2 { font-size: 0.2rem; } .trains_d1 { flex-direction: column-reverse; } .trains_d1 .trains_l { margin-top: 0.5rem; } .protect_p2 img { width: 40px; height: 40px; object-fit: contain; display: inline-block; vertical-align: middle; margin-right: 15px; } }