::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-ms-input-placeholder { color: #999; } body { padding: 2rem 0 0.75rem; background: #edf1f3; } .header { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 2rem; background: #fff; display: flex; justify-content: center; align-items: center; } .header .left, .header .right { position: absolute; top: 0; width: 2rem; height: 100%; display: flex; } .header .left .icon, .header .right .icon { margin: auto; } .header .left { left: 0; } .header .left .icon { height: 0.8rem; } .header .right { right: 0; } .header .right .icon { height: 0.95rem; } .header .logo { height: 1.4rem; margin-right: 0.55rem; } .header .tel-box { width: 5.5rem; display: flex; justify-content: center; align-items: center; background: #8e8e8e; border-radius: 0.575rem; } .header .tel-box .icon { height: 0.55rem; margin-right: 0.2rem; } .header .tel { font-size: 0.6rem; line-height: 1.15rem; color: #fff; font-weight: 700; } .section-title-box { text-align: center; } .section-title-box .section-title-min-box { display: inline-block; position: relative; } .section-title-box .section-title { font-size: 0.85rem; line-height: 1.15rem; color: #1a2590; position: relative; z-index: 1; } .section-title-box .title-icon { height: 0.7rem; position: absolute; } .section-title-box .title-icon1 { top: 0; left: -0.3rem; } .section-title-box .title-icon2 { bottom: 0; right: -0.3rem; } .button { text-align: center; background: #ffde00; color: #5b56cd; box-shadow: 1px 1px 0.25rem rgba(186, 178, 110, 0.64); margin: 0 auto; } .section { width: 14.5rem; margin: 1.7rem auto 0; } .section1 { width: auto; background: url(/uploads/image/zuhimg/section1_bg.png) no-repeat; background-size: 16rem 16rem; padding-top: 8.6rem; margin-top: 0; } .section1 .content { overflow: hidden; margin-top: 0.65rem; } .section1 .wrap { white-space: nowrap; } .section1 .wrap .item { display: inline-block; white-space: normal; width: 6.15rem; height: 7.1rem; background: #fff; border-radius: 0.2rem; margin-left: 0.45rem; text-align: center; } .section1 .icon { height: 1rem; margin-top: 0.45rem; } .section1 .title { font-size: 0.6rem; line-height: 0.65rem; color: #1a2590; margin-top: 0.35rem; } .section1 .line { width: 4.3rem; border-top: 1px dashed #cdcdcd; margin: 0.3rem auto 0.25rem; } .section1 .text { font-size: 0.55rem; line-height: 0.65rem; color: #1a2590; width: 5.95rem; } .section1 .button { width: 4.9rem; font-size: 0.5rem; line-height: 1.2rem; border-radius: 0.6rem; margin-top: 0.45rem; } .section1 .dot-wrap { text-align: center; margin-top: 0.55rem; } .section1 .dot-wrap .item { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #cdcbff; display: inline-block; margin: 0 0.125rem; } .section1 .dot-wrap .active { background: #5b56cd; } .section2 form { height: 15.8rem; margin-top: 0.6rem; background: linear-gradient(156deg, #5b54cc, #51b6e5); border-radius: 0.2rem; padding: 0.9rem 1.175rem 0; } .section2 .wrap { display: flex; justify-content: space-between; margin-bottom: 0.9rem; } .section2 .item { position: relative; width: 2.15rem; height: 2.45rem; } .section2 .num { font-size: 0.85rem; line-height: 0.85rem; color: #8588d9; font-weight: 700; text-align: right; font-style: oblique; } .section2 .text { font-size: 0.5rem; line-height: 0.7rem; color: #fff; position: absolute; width: 100%; top: 0.35rem; left: 0; } .section2 .form-item { display: flex; align-items: center; background: #fff; border-radius: 0.1rem; margin-bottom: 0.5rem; } .section2 .icon-box { width: 1.9rem; text-align: center; border-right: 1px solid #d2d2d2; } .section2 .icon { height: 0.75rem; } .section2 input, .section2 select { width: 10.2rem; height: 1.7rem; font-size: 0.6rem; line-height: 1.7rem; padding: 0 0.5rem; } .section2 select { color: #999; background: url(/uploads/image/zuhimg/selected1.png) no-repeat 8.55rem center; background-size: 0.6rem 0.35rem; } .section2 .submit { width: 10.4rem; font-size: 0.55rem; line-height: 1.6rem; border-radius: 0.8rem; margin-top: 0.75rem; } .section3 .tit-wrap { display: flex; justify-content: space-between; margin-top: 0.6rem; text-align: center; font-size: 0.6rem; line-height: calc(1.5rem - 2px); color: #5b56cd; } .section3 .tit-wrap .item { width: 3.1rem; border: 1px solid #5b56cd; border-radius: 0.2rem; position: relative; } .section3 .tit-wrap .item:after { content: ""; border-top: 0.25rem solid #5b56cd; border-bottom: 0.25rem solid transparent; border-left: 0.35rem solid transparent; border-right: 0.35rem solid transparent; position: absolute; bottom: -0.45rem; left: 50%; transform: translatex(-50%); display: none; } .section3 .tit-wrap .active { background: #5b56cd; color: #fff; } .section3 .tit-wrap .active:after { display: block; } .section3 .content-wrap { margin-top: 0.55rem; } .section3 .content-wrap .item { display: none; background: #fff; border-radius: 0.2rem; padding: 1.05rem 0.7rem 1.15rem; } .section3 .content-wrap .item:first-child { display: block; } .section3 .content-wrap .group { border-bottom: 1px dashed #cdcdcd; } .section3 .content-wrap .group1 { padding-bottom: 0.6rem; } .section3 .content-wrap .group2 { padding-bottom: 0.9rem; margin-top: 0.65rem; } .section3 .content-wrap .group3 { border-bottom: none; margin-top: 0.9rem; } .section3 .content-wrap .title-box { text-align: center; } .section3 .content-wrap .title { display: inline-block; font-size: 0.6rem; line-height: 0.6rem; color: #1a2590; padding: 0 0.55rem; position: relative; } .section3 .content-wrap .title:before, .section3 .content-wrap .title:after { content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #d8d6f2; position: absolute; top: 0.175rem; } .section3 .content-wrap .title:before { left: 0; } .section3 .content-wrap .title:after { right: 0; } .section3 .content-wrap .text { font-size: 0.6rem; line-height: 0.7rem; color: #666; margin-top: 0.6rem; } .section3 .content-wrap .button { width: 6.5rem; font-size: 0.55rem; line-height: 1.15rem; border-radius: 0.575rem; margin-top: 0.45rem; } .section3 .content-wrap table { width: 10.8rem; margin: 0.4rem auto 0; color: #666; } .section3 .content-wrap th, .section3 .content-wrap td { font-size: 0.6rem; line-height: 0.75rem; } .section3 .content-wrap th:nth-child(2), .section3 .content-wrap td:nth-child(2) { text-align: center; } .section3 .content-wrap th { font-weight: 700; } .section3 .button-box { display: flex; justify-content: space-between; margin-top: 0.85rem; } .section3 .button-box .button { width: 7rem; font-size: 0.55rem; line-height: 1.45rem; border-radius: 0.8rem; border: 0.075rem solid #ffde00; margin: 0; } .section3 .button2 { background: transparent; } .section4 .tit-wrap { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.6rem; line-height: calc(1.5rem - 2px); color: #5b56cd; text-align: center; } .section4 .tit-wrap .item { position: relative; width: 2rem; border: 1px solid #5b56cd; border-radius: 0.2rem; } .section4 .tit-wrap .item:after { content: ""; border-top: 0.25rem solid #5b56cd; border-bottom: 0.25rem solid transparent; border-left: 0.35rem solid transparent; border-right: 0.35rem solid transparent; position: absolute; bottom: -0.45rem; left: 50%; transform: translatex(-50%); display: none; } .section4 .tit-wrap .active { background: #5b56cd; color: #fff; } .section4 .tit-wrap .active:after { display: block; } .section4 .content { height: 7.6rem; margin-top: 0.55rem; background: #fff; border-radius: 0.2rem; padding-top: 0.95rem; } .section4 .title-box { text-align: center; } .section4 .title { display: inline-block; font-size: 0.6rem; line-height: 0.6rem; color: #1a2590; padding: 0 0.55rem; position: relative; } .section4 .title:before, .section4 .title:after { content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #d8d6f2; position: absolute; top: 0.175rem; } .section4 .title:before { left: 0; } .section4 .title:after { right: 0; } .section4 .content-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; align-content: space-between; width: 13rem; height: 4.15rem; margin: 0.8rem auto 0; font-size: 0.55rem; line-height: 0.7rem; color: #fff; } .section4 .content-wrap .item { width: 4rem; height: 1.85rem; background-repeat: no-repeat; background-size: cover; border-radius: 0.2rem; display: flex; justify-content: flex-end; align-items: center; padding-right: 0.4rem; } .section4 .content-wrap .icon { height: 0.7rem; margin-left: 0.2rem; } .section4 .item1 { background-image: url(/uploads/image/zuhimg/section4_bg1.jpg); } .section4 .item2 { background-image: url(/uploads/image/zuhimg/section4_bg2.jpg); } .section4 .item3 { background-image: url(/uploads/image/zuhimg/section4_bg3.jpg); } .section4 .item4 { background-image: url(/uploads/image/zuhimg/section4_bg4.jpg); } .section4 .item5 { background-image: url(/uploads/image/zuhimg/section4_bg5.jpg); } .section4 .item6 { background-image: url(/uploads/image/zuhimg/section4_bg6.jpg); } .section4 .button-box { display: flex; justify-content: space-between; margin-top: 0.85rem; } .section4 .button { width: 7rem; font-size: 0.55rem; line-height: 1.45rem; border-radius: 0.8rem; border: 0.075rem solid #ffde00; margin: 0; } .section4 .button2 { background: transparent; } .section5 .tit-wrap { width: 13rem; margin: 0.85rem auto 0; display: flex; justify-content: space-between; font-size: 0.6rem; line-height: calc(1.5rem - 2px); color: #5b56cd; text-align: center; } .section5 .tit-wrap .item { width: 5.75rem; border: 1px solid #5b56cd; border-radius: 0.2rem; position: relative; } .section5 .tit-wrap .item:after { content: ""; border-top: 0.25rem solid #5b56cd; border-bottom: 0.25rem solid transparent; border-left: 0.35rem solid transparent; border-right: 0.35rem solid transparent; position: absolute; bottom: -0.45rem; left: 50%; transform: translatex(-50%); display: none; } .section5 .tit-wrap .active { background: #5b56cd; color: #fff; } .section5 .tit-wrap .active:after { display: block; } .section5 .content-wrap { margin-top: 0.5rem; } .section5 .content-wrap .item { display: none; overflow: hidden; } .section5 .content-wrap .item1 { display: block; } .section5 .content-wrap .item1 .group { height: 4.5rem; } .section5 .content-wrap .item2 .group { height: 5.2rem; } .section5 .content-wrap .group-wrap { white-space: nowrap; } .section5 .content-wrap .group-box { white-space: normal; display: inline-block; vertical-align: top; width: 14.5rem; background: #fff; border-radius: 0.2rem; } .section5 .content-wrap .group { display: flex; justify-content: space-between; align-items: center; } .section5 .content-wrap .info-box { width: 12.85rem; display: flex; flex-direction: column; } .section5 .content-wrap .info { display: flex; align-items: center; } .section5 .content-wrap .title { width: 1.45rem; text-align: center; font-size: 0.55rem; line-height: 0.6rem; color: #5b56cd; } .section5 .content-wrap .intro { width: 11.4rem; font-size: 0.55rem; line-height: 0.75rem; color: #666; } .section5 .content-wrap .text { padding-left: 0.35rem; position: relative; } .section5 .content-wrap .text:before { content: ""; width: 0.1rem; height: 0.1rem; border-radius: 50%; background: #666; position: absolute; top: 0.325rem; left: 0; } .section5 .content-wrap .tit { font-weight: 700; } .section5 .content-wrap .ask { font-size: 0.55rem; line-height: 0.75rem; color: #ffba00; font-weight: 700; text-decoration: underline; } .section5 .content-wrap span.ask { margin-left: 0.6rem; } .section5 .content-wrap p.ask { margin-left: auto; } .section5 .content-wrap .icon { height: 0.9rem; margin-right: 0.4rem; } .section5 .button-box { display: flex; justify-content: space-between; margin-top: 0.9rem; font-size: 0.6rem; line-height: 1.6rem; } .section5 .button { width: 7rem; border-radius: 0.8rem; margin: 0; } .section6 { width: auto; height: 5.4rem; background: url(/uploads/image/zuhimg/section6_bg.jpg) no-repeat; background-size: cover; text-align: center; padding-top: 0.65rem; } .section6 .title { font-size: 0.85rem; line-height: 1.1rem; color: #fff; } .section6 .tips { font-size: 0.6rem; line-height: 0.85rem; color: #fff; } .section6 .button { width: 6.1rem; font-size: 0.6rem; line-height: 1.6rem; border-radius: 0.8rem; margin-top: 0.55rem; } .pop-major, .pop-form { display: none; position: fixed; width: 100%; height: 100%; z-index: 1; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); } .pop-major .content, .pop-form .content { background: #fff; position: absolute; top: 50%; transform: translatey(-50%); } .pop-major .close-box, .pop-form .close-box { width: 1.3rem; height: 1.9rem; background: url(/uploads/image/zuhimg/pop_close_bg.png) no-repeat; background-size: cover; position: absolute; top: -1.85rem; right: 0.4rem; } .pop-major .close, .pop-form .close { height: 1.3rem; } .pop-major .content { width: 12.05rem; border-radius: 0.2rem; left: 1.975rem; padding: 1.1rem 0.85rem; } .pop-major .title-box { text-align: center; } .pop-major .title { display: inline-block; position: relative; font-size: 0.6rem; line-height: 0.6rem; color: #1a2590; padding: 0 0.55rem; } .pop-major .title:before, .pop-major .title:after { content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #d8d6f2; position: absolute; top: 0.175rem; } .pop-major .title:before { left: 0; } .pop-major .title:after { right: 0; } .pop-major .text { font-size: 0.6rem; line-height: 0.7rem; color: #666; margin-top: 0.5rem; } .pop-major .button { width: 6.5rem; font-size: 0.55rem; line-height: 1.15rem; border-radius: 0.575rem; margin-top: 0.5rem; } .pop-major .line { border-top: 1px dashed #cdcdcd; margin: 1.1rem 0; } .pop-major table { width: 100%; margin-top: 0.4rem; color: #666; } .pop-major th, .pop-major td { font-size: 0.6rem; line-height: 0.75rem; } .pop-major th:nth-child(2), .pop-major td:nth-child(2) { text-align: center; } .pop-major th { font-weight: 700; } .pop-form .content { width: 12.5rem; height: 12.3rem; left: 1.75rem; border-radius: 0.3rem; padding-top: 0.45rem; } .pop-form .title { font-size: 0.8rem; line-height: 1.15rem; text-align: center; background: linear-gradient(90deg, #5c59ce, #52cce3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pop-form form { width: 11.25rem; margin: 0.5rem auto 0; } .pop-form .item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; } .pop-form .icon { height: 0.75rem; } .pop-form label { font-size: 0.6rem; line-height: 1.75rem; color: #333; } .pop-form input, .pop-form select { width: 8.75rem; height: 1.75rem; background: #f0f0f0; border-radius: 0.1rem; font-size: 0.6rem; line-height: 1.75rem; padding: 0 0.55rem; } .pop-form select { color: #999; background: #f0f0f0 url(/uploads/image/zuhimg/selected2.png) no-repeat 7.6rem center; background-size: 0.475rem 0.3rem; } .pop-form .submit { width: 9.55rem; text-align: center; font-size: 0.6rem; line-height: 1.5rem; color: #fff; border-radius: 0.75rem; margin: 0.75rem auto 0; background: linear-gradient(90deg, #ffa200, #ebd227); box-shadow: 0.1375rem 0.175rem 0.5rem rgba(92, 86, 205, 0.48); }