.lead { padding: 0 .43rem; margin-top: -1.3rem; position: relative; margin-bottom: 1.25rem; } .lead .content { height: auto; background-color: #ffffff; border-radius: 0.21rem; font-size: 0.55rem; line-height: .88rem; color: #4d4d4d; padding: 0 1.13rem .6rem 1.02rem; } .lead .content>div { width: 4.28rem; height: 1.43rem; background-color: #4d4f76; border-radius: 0rem 0rem 0.32rem 0.32rem; font-size: 0.75rem; color: #ffffff; margin-bottom: .4rem; } .lead .content span { font-size: 0.55rem; color: #ff0000; } .lead .content span a{ color: #ff0000; font-size: 0.55rem; } .line { padding: 0 .43rem; margin-bottom: 1.7rem; } .line img { width: 100%; margin: 0 auto; display: block; } .part { padding: 0 .43rem; } .part .title { height: 1.18rem; margin-bottom: 1.02rem; } .part .title img { width: auto; height: 100%; } .part1 { padding-bottom: 1.08rem; position: relative; z-index: 1; } .part1::after { content: ""; width: 100%; height: 5.88rem; background: url(/uploads/image/zujimg/part1_bg.png) no-repeat; background-size: 100%; position: absolute; bottom: 0; left: 0; z-index: -1; } .part1 ul { align-items: stretch; } .part1 li { width: 4.7rem; height: auto; background-color: #ffffff; border-radius: 0.09rem; text-align: center; padding: .6rem .3rem; } .part1 li h6 { font-size: 0.65rem; font-weight: normal; color: #000000; line-height: .65rem; margin-bottom: .45rem; } .part1 li p { font-size: 0.55rem; line-height: 0.8rem; color: #333333; margin-bottom: .4rem; } .part1 li .common-btn { width: 3.45rem; height: 1.33rem; background-color: #b39a7c; border-radius: 0.63rem; margin: 0 auto; font-size: 0.51rem; font-weight: 700; color: #ffffff; } .part2 { padding-top: 1.68rem; position: relative; z-index: 1; padding-bottom: 2.18rem; } .part2::after { content: ""; width: 100%; height: 22.9rem; background-color: #545782; position: absolute; top: 0; left: 0; z-index: -1 } .part2 .step-bg { flex-wrap: wrap; margin-bottom: 1.43rem; } .part2 .step-bg li { width: 50%; } .part2 .step-bg li p { margin-top: 5px; } .part2 .step-bg li:nth-child(3) { width: 100%; margin-top: .75rem; } .part2 .step-bg li>div:nth-child(1) { width: 2.38rem; height: 2.38rem; background-color: #ffffff; font-size: 0.64rem; line-height: .88rem; color: #000000; border-radius: 2.38rem; ; flex-shrink: 0; margin-right: .5rem; } .part2 .step-bg li .txt { font-size: 0.55rem; line-height: 0.88rem; color: #ffffff; } .part2 .step-bg li .txt:nth-child(3) { margin-left: .3rem; } .part form { width: auto; height: auto; background-color: #ffffff; border-radius: 0.13rem; padding: 1.08rem .73rem 1rem; } .part h3 { font-size: 1.07rem; font-weight: normal; line-height: 1.07rem; color: #b39a7c; text-align: center; margin-bottom: 1.05rem; } .part h3 span { color: #000000; } .part .item { align-items: stretch; height: 1.53rem; font-size: 0.51rem; line-height: 1.53rem; color: #000000; position: relative; overflow: hidden; margin-bottom: .63rem; } .part .item label { width: 2.5rem; text-align: right; flex-shrink: 0; } .part .item input, .part .item select { width: 11.1rem; height: 1.53rem; background-color: #f5f5f5; border: solid 0.02rem #ebebeb; padding-left: .4rem; } .part .item.yzm { margin-bottom: 1.02rem; } .part .item.yzm span { width: 4.28rem; height: 1.53rem; background-color: #545782; font-size: 0.51rem; color: #ffffff; position: absolute; right: 0; top: 0; } .part .submit { width: 7.7rem; height: 1.75rem; background-color: #b39a7c; border-radius: 0.84rem; font-size: 0.75rem; font-weight: 700; color: #ffffff; margin: 0 auto .68rem; } .part form>p { font-size: 0.45rem; line-height: 0.55rem; letter-spacing: -0.03rem; color: #808080; text-align: center; } .part3 { padding-bottom: 1rem; } .part3 ul { flex-wrap: wrap; margin-bottom: .83rem; } .part3 li { width: 4.28rem; height: a; background-color: #ffffff; border-radius: 0.09rem; font-size: 0.51rem; line-height: 0.8rem; color: #333333; padding: .6rem 0 .3rem .38rem; } .part3 li:nth-child(3) { width: 100%; height: auto; margin-top: .4rem; } .part3 li:nth-child(2) { width: 10.48rem; } .part3 li h3 { width: auto; font-size: 0.6rem; font-weight: normal; line-height: 0.6rem; color: #000000; position: relative; z-index: 1; margin-bottom: .3rem; } .part3 li h3::after { content: ""; width: 2.4rem; height: 0.23rem; background-color: #cfd1e0; position: absolute; bottom: 0; z-index: -1; } .part3 li:nth-child(1) h3::after { width: 3.03rem; } .part3 li .txt { flex-wrap: wrap; } .part3 li:nth-child(2) .txt p { width: 50%; } .part3 .tabbox>div { width: 7.48rem; height: 2.15rem; background-color: #ffffff; border-radius: 0.13rem 0.13rem 0rem 0rem; font-size: 0.6rem; line-height: .6rem; color: #4d4f76; align-items: flex-start; padding-top: .58rem; } .part3 .tabbox>div.active { background-color: #4d4f76; color: #ffffff; } .part3 .tablebox { margin-top: -.55rem; position: relative; z-index: 3; } .part3 .table { width: 100%; border-radius: 0.09rem; background-color: #ffffff; overflow: hidden; display: none; } .part3 .table.active { display: block; } .part3 table th { height: 1.53rem; font-size: 0.55rem; background-color: #cfd1e0; color: #000000; border: solid 0.02rem #e4e8ef; border-top: none; } .part3 table th:nth-child(1), .part3 table td:nth-child(1) { border-left: none; border-right: none; width: 6rem; } .part3 table th:nth-child(3), .part3 table td:nth-child(3) { border-left: none; border-right: none; width: 6rem; } .part3 table td { font-size: 0.55rem; line-height: 1.5rem; color: #333333; background-color: #ffffff; border: solid 0.02rem #e4e8ef; border-bottom: none; } .part3 table tr:last-child td { border-bottom: none; } .part3 .content>p { font-size: 0.51rem; line-height: .88rem; color: #808080; margin-top: .7rem; } .part3 .content>p span { font-size: 0.51rem; color: #ff0000; } .part3 .content>p span a{ color: #ff0000; font-size: 0.51rem; } .part4 { padding-top: 1.05rem; height: 11.3rem; background: url(/uploads/image/zujimg/part4_bg.png) no-repeat; background-size: 100%; margin-bottom: 2.13rem; } .part4 .content { flex-wrap: wrap; } .part4 .content>div { width: 5rem; height: 3.43rem; background-color: #ffffff; border-radius: 0.09rem; } .part4 .content>div:nth-child(1), .part4 .content>div:nth-child(2), .part4 .content>div:nth-child(3) { margin-bottom: .08rem; } .part4 .content>div h4 { font-size: 0.68rem; font-weight: normal; line-height: 1.1rem; color: #b39a7c; } .part4 .content>div h4 span:last-child { color: #000000; } .part5 { margin-bottom: 1.68rem; } .part5 ul { flex-wrap: wrap; margin-bottom: .78rem; } .part5 .content li { width: 4.93rem; height: 3.23rem; background-color: #ffffff; border-radius: 0.09rem; position: relative; z-index: 1; padding-top: 2.25rem; } .part5 .content li:nth-child(4), .part5 .content li:nth-child(5), .part5 .content li:nth-child(6) { margin: .2rem 0; } .part5 .content li h4 { font-size: 0.51rem; font-weight: normal; color: #000000; text-align: center; line-height: .5rem; } .part5 .content li img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .part5 .content li.active { padding-top: 1.35rem; background-color: #4d4f76; } .part5 .content li.active img { display: none; transition: all .3s; } .part5 .content li.active h4 { color: #ffffff; transition: all .3s; } .part5 .detail { width: 15.15rem; height: auto; background-color: #4d4f76; border-radius: 0.09rem; padding: .95rem; position: relative; } .part5 .detail h4 { font-size: 0.64rem; font-weight: normal; line-height: 0.64rem; color: #ffffff; } .part5 .detail p { font-size: 0.51rem; line-height: 0.8rem; color: #ffffff; } .part5 .detail p:nth-child(2) { margin: .48rem 0 .53rem; } .part5 .detail .pinggu { width: 3.43rem; height: 1.3rem; background-color: #b39a7c; border-radius: 0.63rem; font-size: 0.51rem; font-weight: 700; color: #ffffff; margin-top: .4rem; } .part5 .detail::after { content: ""; border: .5rem solid #4d4f76; position: absolute; top: -.9rem; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; left: 50%; transform: translatex(-50%); } .part6 { padding: 0; margin-bottom: 2.13rem; } .part6 h2{ padding-left: .43rem; } .part6 .content { width: 100%; padding: 1.02rem .43rem 0; position: relative; z-index: 1; } .part6 .content::after { content: ""; width: 100%; height: 35rem; background: #4d4f76; position: absolute; top: 0; left: 0; z-index: -1; } .part6 h6 { font-size: 0.51rem; font-weight: normal; line-height: 1rem; letter-spacing: 0rem; color: #ffffff; align-items: flex-start; margin-bottom: .5rem; } .part6 li { margin-bottom: 1rem; } .part6 li p { font-size: 0.47rem; line-height: 0.88rem; color: #c7c8d8; } .part6 h6 img { width: 1.05rem; margin-right: .2rem; } .part6 form { padding: 1.08rem 0.73rem 1rem .48rem; } .part6 form h3 { font-size: .95rem; } .part6 .item label { width: 2.8rem; } .part .item select { background: #f5f5f5 url(/uploads/image/zujimg/arrow.png) no-repeat; background-size: 4%; background-position: 97% center; } .part6 .item.cannot { overflow: auto; height: auto; } .part6 .item textarea{ width: 11.1rem; height: 6.5rem; background-color: #f5f5f5; border: solid 0.02rem #ebebeb; resize: none; padding: .2rem; } .part7{ padding-bottom: 1.2rem; } .part7 .content{ flex-wrap: wrap; } .part7 a{ width: 7.38rem; height: 3.85rem; background: url(/uploads/image/zujimg/part7_bg.png) no-repeat; background-size: 100%; border-radius: 0.09rem; padding-left: .55rem; padding-top: .35rem; } .part7 a:nth-child(1), .part7 a:nth-child(2){ margin-bottom: .4rem; } .part7 a h4{ font-size: 0.6rem; line-height: 0.8rem; color: #4d4f76; margin-bottom: .2rem; } .part7 a p{ font-size: 0.47rem; line-height: 0.65rem; color: #333333; } /* layout */ #main .layout { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 20; display: none; } #main .layout .layout_box { width: 11.38rem; height: 15.95rem; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: url(/uploads/image/zujimg/lay_bg.png) no-repeat; background-size: 100%; text-align: center; padding: 1.18em .7rem 0 1.05rem; } #main .layout .layout_box .title { margin-bottom: .95rem; font-size: 0.85rem; font-weight: normal; line-height:0.85rem; letter-spacing: 0.09rem; color: #ffffff; } #main .layout .layout_box .item { width: 100%; position: relative; margin-bottom: 0.2rem; } #main .layout .layout_box .item img { position: absolute; top: 50%; transform: translatey(-50%); right: 0.4rem; width: 0.5rem; } #main .layout .layout_box .item.yzm{ margin-bottom: .83rem; } #main .layout .layout_box .item.yzm input { width: 60%; } #main .layout .layout_box .item.yzm span { width: 40%; text-align: center; font-size: 0.6rem; background-color: #000000; color: #ffffff; height: 1.5rem; line-height: 1.5rem; cursor: pointer; } #main .layout .layout_box input, #main .layout .layout_box select { width: 100%; padding-left: 0.3rem; height: 1.5rem; background-color: #ffffff; line-height: 1.5rem; color: #b3b3b3; font-size: .55rem; } #main .layout .layout_box input::placeholder { color: #b3b3b3; } #main .layout .layout_box select { background: #ffffff url(/uploads/image/zujimg/arrow.png) no-repeat; background-size: 4%; background-position: 97% center; } #main .layout .layout_box .submit { width: 4.3rem; height: 1.75rem; background-color: #b39a7c; border-radius: 0.84rem; margin: 0 auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02rem; color: #ffffff; } #main .layout .layout_box .close { width: 1.5rem; height: 1.5rem; position: absolute; top: 0; right: 0; } #main .layout .layout_box p{ font-size: 0.47rem; line-height: 0.6rem; color: #ffffff; opacity: 0.4; margin-top: .4rem; }