#main article { padding-top: .8rem; } #main .section { padding: 0 .43rem; margin-bottom: 1.5rem; position: relative; z-index: 1; } #main .section .title { width: 100%; height: .96rem; margin-bottom: 1.25rem; position: relative; } #main .section .title::after { content: ""; width: 2.35rem; height: 2.03rem; background: url(/uploads/image/zccimg/01.png) no-repeat; background-size: 100%; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); z-index: -1; display: block; opacity: .1; } #main .section .title b { color: #6835fd; font-size: 0.9rem; line-height: .9rem; flex-shrink: 0; } #main .section .title img { height: 0.25rem; } #main .section .title img:nth-child(1) { margin-right: .43rem; } #main .section .title img:nth-child(3) { margin-left: .43rem; } #main .section .btnbox { margin-top: 1.25rem; } #main .section .btnbox>div { width: 5.15rem; height: 1.5rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%); border-radius: 0.74rem; font-size: 0.68rem; color: #000000; } #main .section1 .title b { color: #ffffff; } #main .section1 .content { height: auto; flex-wrap: wrap; align-items: flex-start; } #main .section1 .content>div { width: 4.95rem; height: 6rem; background-color: #ffffff; box-shadow: 0rem 0rem 0.53rem 0rem rgba(119, 51, 249, 0.3); border-radius: 0.17rem; padding-top: .85rem; } #main .section1 .content>div:nth-child(1), #main .section1 .content>div:nth-child(2), #main .section1 .content>div:nth-child(3) { margin-bottom: .18rem; } #main .section1 img { width: 1.95rem; display: block; margin: 0 auto; margin-bottom: .9rem; } #main .section1 p { font-size: 0.55rem; line-height: 0.88rem; color: #000000; text-align: center; } #main .section2 .title::after { background-image: url(/uploads/image/zccimg/02.png); } #main .section2 .content { flex-wrap: wrap; } #main .section2 .content>div { width: 4.7rem; height: 4.28rem; background: no-repeat; background-size: 100%; text-align: center; font-size: 0.64rem; line-height: 0.64rem; color: #000000; padding-top: 3rem; } #main .section2 .content>div:nth-child(2) { margin: 0 .5rem; } #main .section2 .content>div:nth-child(4), #main .section2 .content>div:nth-child(5) { margin-top: .6rem; } #main .section2 .content>div:nth-child(4) { margin-right: .5rem; } #main .section3 { padding: 0; } #main .section3 .title { margin-bottom: 1rem; } #main .section3 .title::after { background-image: url(/uploads/image/zccimg/02.png); } #main .section3 .list { margin-bottom: .63rem; height: 12.8rem; padding: .3rem .43rem; overflow: hidden; } #main .section3.active .list { height: auto; } #main .section3 .list>div { align-items: stretch; margin-bottom: .85rem; height: 5.55rem; background-color: #ffffff; box-shadow: 0rem 0rem 0.53rem 0rem rgba(119, 51, 249, 0.16); border-radius: 0.17rem; } #main .section3 .list>div:last-child { margin-bottom: 0; } #main .section3 .list>div .img { width: 4.7rem; margin-right: .2rem; flex-shrink: 0; font-size: 0.55rem; line-height: 0.55rem; color: #000000; padding-top: .68rem; text-align: center; } #main .section3 .list>div img { width: 2.8rem; height: 2.8rem; display: block; margin: 0 auto .38rem; overflow: hidden; border-radius: 2.8rem; border: solid 0.04rem #f2f0ff; } #main .section3 .list>div>div { width: 100%; } #main .section3 .advantage { padding: .8rem .5rem .0 .78rem; } #main .section3 .advantage p { font-size: 0.55rem; line-height: .8rem; letter-spacing: 0rem; color: #000000; } #main .section3 .advantage .btnbox { margin-top: .55rem; } #main .section3 .advantage .btnbox>div { width: 5.15rem; height: 1.5rem; background-color: #ff9600; font-size: 0.6rem; } #main .section3 .more>img { width: 1.45rem; } #main .section3.active .more>img { transform: rotatez(180deg); } #main .section4 .title::after { background-image: url(/uploads/image/zccimg/03.png); } #main .section4 .content { align-items: flex-start; flex-wrap: wrap; } #main .section4 .content>div { width: 4.95rem; height: 4.7rem; background-color: #ffffff; box-shadow: 0rem 0rem 0.53rem 0rem rgba(119, 51, 249, 0.16); border-radius: 0.17rem; padding: .1rem .13rem 0; font-size: 0.55rem; line-height: 0.55rem; color: #000000; text-align: center; } #main .section4 .content>div:nth-child(1), #main .section4 .content>div:nth-child(2), #main .section4 .content>div:nth-child(3) { margin-bottom: .4rem; } #main .section4 .content>div img { width: 100%; display: block; margin-bottom: .45rem; } #main .section5 { padding: 0; } #main .section6 .title::after { background-image: url(/uploads/image/zccimg/04.png); } #main .section6 .content { background-color: #ffffff; box-shadow: 0rem 0rem 0.53rem 0rem rgba(119, 51, 249, 0.16); border-radius: 0.17rem; padding: .7rem .5rem; } #main .section6 .list { padding: 0 .33rem; margin-bottom: .68rem; } #main .section6 .list>span { width: 3rem; height: 1.3rem; background-color: #f2f0ff; border-radius: 0.63rem; font-size: 0.55rem; color: #000000; } #main .section6 form { flex-wrap: wrap; } #main .section6 form .item { width: 6.85rem; height: 1.53rem; background-color: #f5f5f5; border: solid 0.02rem #ebebeb; overflow: hidden; margin-bottom: .43rem; } #main .section6 form .item.yzm { margin-bottom: 0; } #main .section6 form .item input, #main .section6 form .item select { width: 100%; height: 100%; background-color: #f5f5f5; font-size: 0.51rem; padding-left: .4rem; color: #999999; } #main .section6 form .item select { background: #f5f5f5 url(/uploads/image/zccimg/arrow.png) no-repeat; background-size: 5%; background-position: 95% center; } #main .section6 form .item input::placeholder { color: #999999; } #main .section6 form .item.yzm span { width: 3.23rem; height: 100%; background-color: #000000; font-size: 0.51rem; color: #ffffff; flex-shrink: 0; } #main .section6 form .submit { width: 6.85rem; height: 1.5rem; background-color: #6835fd; font-size: 0.75rem; font-weight: bold; color: #ffffff; } #main .section6 em { font-size: 0.45rem; line-height: 0.7rem; color: #808080; text-align: center; opacity: .8; display: block; margin-top: .6rem; text-align: center; } #main .section7 .title::after { background-image: url(/uploads/image/zccimg/05.png); } #main .section7 .content { align-items: flex-start; flex-wrap: wrap; } #main .section7 .content>div { width: 4.95rem; height: 2.6rem; background-color: #ffffff; box-shadow: 0rem 0rem 0.53rem 0rem rgba(119, 51, 249, 0.16); border-radius: 0.17rem; font-size: 0.55rem; line-height: 0.88rem; color: #000000; text-align: center; margin-top: .18rem; position: relative; } #main .section7 .content>div:nth-child(1), #main .section7 .content>div:nth-child(2), #main .section7 .content>div:nth-child(3) { margin-top: 0; } #main .section7 .content>div::after { content: ""; width: 1.02rem; height: 1.02rem; background: url(/uploads/image/zccimg/step.png) no-repeat; background-size: 100%; position: absolute; top: 50%; z-index: 2; right: -0.51rem; transform: translatey(-50%); } #main .section7 .content>div:nth-child(3)::after { top: auto; transform: translatex(-50%) rotatez(90deg); left: 50%; bottom: -.51rem; } #main .section7 .content>div:nth-child(6)::after, #main .section7 .content>div:nth-child(9)::after { display: none; } #main .section7 .content>div:nth-child(4)::after, #main .section7 .content>div:nth-child(5)::after { transform: translatey(-50%) rotatez(180deg); } #main .section8{ padding: 0; } #main .section9 .content{ background:url(/uploads/image/zccimg/group.png) no-repeat; background-size: 100%; box-shadow: 0rem 0rem 0.53rem 0rem rgba(119, 51, 249, 0.3); border-radius: 0.17rem; padding: .8rem .63rem 0.8rem; } #main .section9 h3 { font-size: 1rem; line-height: 1.4rem; color: #fafafa; margin-bottom: .4rem; } #main .section9 .content>p { font-size: 0.51rem; line-height: .8rem; color: #fafafa; opacity: 0.5; } #main .section9 .intr>div { padding-top: .8rem; } #main .section9 .intr .top { font-size: 0.51rem; line-height: 0.51rem; color: #fafafa; padding-bottom: .35rem; border-bottom: 0.08rem solid rgba(255, 255, 255, 0.3); align-items: flex-end; margin-bottom: .4rem; } #main .section9 .intr img { height: 1.05rem; margin-right: .23rem; } #main .section9 .intr p { font-size: 0.47rem; line-height: 0.7rem; color: #fafafa; opacity: .8; } #main .section10 .title::after { background-image: url(/uploads/image/zccimg/06.png); } #main .section10 .title{ margin-bottom: .6rem; } #main .section10>p { font-size: 0.55rem; line-height: .88rem; color: #999999; margin-bottom: 1rem; } #main .section10 .content { flex-wrap: wrap; padding: 0 1.25rem; } #main .section10 .content>div { width: 2.17rem; font-size: 0.64rem; color: #000000; text-align: center; margin-right: 1.3rem; } #main .section10 .content>div:nth-child(1), #main .section10 .content>div:nth-child(2), #main .section10 .content>div:nth-child(3), #main .section10 .content>div:nth-child(4) { margin-bottom: .67rem; } #main .section10 .content>div:nth-child(4), #main .section10 .content>div:nth-child(8) { margin-right: 0; } #main .section10 .content>div img { width: 100%; margin-bottom: .3rem; } #main .section10 .btnbox>div{ width: 6rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%); border-radius: 0.74rem; font-size: .6rem; } #main .section10 .btnbox>div:nth-child(2){ margin-left: 1.25rem; } #main .section11 { background-color: #6835fd; padding: 1rem .53rem; margin-bottom: 0; } #main .section11 h3 { font-size: 0.9rem; line-height: 1.2rem; color: #fafafa; margin-bottom: .8rem; } #main .section11 form { flex-wrap: wrap; } #main .section11 form .item { width: 7.28rem; height: 1.53rem; background-color: #f5f5f5; overflow: hidden; margin-bottom: .4rem; } #main .section11 form .item.mar { margin-bottom: 0; } #main .section11 form .item input, #main .section11 form .item select { width: 100%; height: 100%; background-color: #f5f5f5; font-size: 0.51rem; padding-left: .4rem; color: #999999; } #main .section11 form .item select { background: #f5f5f5 url(/uploads/image/zccimg/arrow.png) no-repeat; background-size: 5%; background-position: 95% center; } #main .section11 form .item input::placeholder { color: #999999; } #main .section11 form .item.yzm span { width: 3.23rem; height: 100%; background-color: #000000; font-size: 0.51rem; color: #ffffff; flex-shrink: 0; } #main .section11 form .submit { width: 5.3rem; height: 1.73rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%); border-radius: 0.84rem; color: #000000; margin: .8rem auto 0; font-size: .64rem; } #main .section11 em { font-size: 0.45rem; line-height: 0.7rem; color: #ffffff; text-align: center; opacity: .5; display: block; margin-top: .63rem; } /* layout */ #main .s_layout { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 20; display: none; } #main .s_layout .layout_box { width: 14rem; height: auto; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: #6835fd ; text-align: center; padding: 1.3rem .7rem .5rem 1.05rem; display: none; } #main .s_layout .layout_box .title { margin-bottom: .35rem; font-size: 0.85rem; font-weight: normal; line-height: 0.85rem; letter-spacing: 0.09rem; color: #ffffff; } #main .s_layout .layout_box p { font-size: .6rem; color: #ffffff; line-height: 0.6rem; margin-bottom: .5rem; } #main .s_layout .layout_box form { flex-wrap: wrap; } #main .s_layout .layout_box .item { width: 100%; position: relative; margin-bottom: 0.3rem; } #main .s_layout .layout_box .item.w { width: 48.5%; } #main .s_layout .layout_box .item img { position: absolute; top: 50%; transform: translatey(-50%); right: 0.4rem; width: 0.5rem; } #main .s_layout .layout_box .item.yzm { margin-bottom: .83rem; } #main .s_layout .layout_box .item.yzm input { width: 60%; } #main .s_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 .s_layout .layout_box input, #main .s_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 .s_layout .layout_box input::placeholder { color: #b3b3b3; } #main .s_layout .layout_box select { background: #ffffff url(/uploads/image/zccimg/arrow.png) no-repeat; background-size: 7%; background-position: 95% center; } #main .s_layout .layout_box .submit { width: 5.3rem; height: 1.73rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%); border-radius: 0.84rem; color: #000000; margin: 0 auto; font-size: 0.64rem; } #main .s_layout .layout_box .close { width: 1.5rem; height: 1.5rem; position: absolute; top: 0; right: 0; } #main .s_layout .layout_box .close img{ width: .5rem; } #main .s_layout .layout_box em { font-size: 0.47rem; line-height: 0.7rem; color: #ffffff; opacity: 0.4; margin-top: .6rem; display: block; }