.lead { width: 15rem; background: url(/uploads/image/zajimg/lead.png) no-repeat; background-size: 100%; margin: -.8rem auto 0; padding-left: .85rem; height: 6rem; box-shadow: 0rem 0rem 1.25rem 0rem rgba(253, 198, 202, 0.4); position: relative; } .lead h2 { font-size: 1.25rem; color: #0e0707; background: linear-gradient(109deg, #0e0707 50%, #f86e83 45%); -webkit-background-clip: text; color: transparent; writing-mode: vertical-lr; writing-mode: tb-lr; margin-right: .5rem; } .lead p { width: 11.6rem; color: #333333; font-size: 0.55rem; line-height: 1rem; } .section { margin-top: 2rem; } .section>.title { font-size: 1.25rem; background: linear-gradient(0deg, #0e0707 45%, #f86e83 45%); -webkit-background-clip: text; color: transparent; } .section>.title>img:nth-child(1) { margin-right: .4rem; width: 0.8rem; } .section>.title>img:nth-child(2) { width: 1.25rem; position: relative; top: 0.4rem; } .section .btn_box{ padding: 0 1rem; margin-top: 1.25rem; } .section .btn_box .btn{ width: 6.5rem; height: 2rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%, #84ad65 100%, #0f797e 100%); box-shadow: 0rem 0rem 0.5rem 0rem rgba(255, 171, 175, 0.5); border-radius: 0.99rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02rem; color: #000000; } .section .btn_box .btn a{ font-size: 0.75rem;} .section.section1 ul { margin-top: 1.5rem; flex-wrap: wrap; padding: 0 .75rem; } .section.section1 li { width: 7rem; height: 2rem; background-color: #ff747b; box-shadow: 0rem 0rem 1.25rem 0rem rgba(253, 198, 202, 0.4); border-radius: 0.2rem; padding-left: .23rem; padding-right: .4rem; } .section.section1 li.mar_b{ margin-bottom: 1.25rem; } .section.section1 li:nth-child(2), .section.section1 li:nth-child(3) { background-color: #8163f0; } .section.section1 li .img{ width: 2.5rem; height: 2.5rem; background-color: #ffffff; border: solid 0.08rem #ff747b; border-radius: 2.5rem; flex-shrink: 0; position: relative; top: -.73rem; } .section.section1 li img{ width: 55%; } .section.section1 li:nth-child(2) .img, .section.section1 li:nth-child(3) .img { border: solid 0.08rem #8163f0; } .section.section1 li span { width: 3.6rem; font-size: 0.6rem; font-weight: 700; color: #ffffff; } .section.section2 { margin-top: 2rem; } .section.section2>.tc { font-size: 0.7rem; color: #000000; margin-top: .3rem; } .section.section2>.content { padding: .75rem .7rem; width: 15rem; background-color: #ffffff; box-shadow: 0rem 0rem 1.25rem 0rem rgba(202, 196, 255, 0.1); border-radius: 0.13rem; margin: 1rem auto 0; } .section.section2 .desc { flex-wrap: wrap; } .section.section2 .desc div { width: 8.6rem; height: 1.5rem; background-color: #e4f0ff; border-radius: 0.74rem; font-size: 0.6rem; color: #0f3c75; align-items: baseline; line-height: 1.5rem; margin-bottom: .25rem; } .section.section2 .desc div b { font-size: 0.65rem; } .section.section2 .desc div:nth-child(2) { width:100%; background-color: #ffefe4; color: #754727; } .section.section2 .desc div:nth-child(3) { width:100%; background-color: #ffe4f8; color: #7c1f64; height:2.2rem; line-height: 0.8rem; border-radius: 0.96rem; padding: .26rem .68rem; } .section.section2 .remark { width: 100%; color: #000000; font-size: 0.55rem; line-height: 0.88rem; border-bottom: dashed 1px #e5e5e5; padding-bottom: .8rem; margin-top: .8rem; margin-bottom: 1rem; } .section.section2 .part { margin-bottom: .95rem; } .section.section2 .s_title { font-size: 0.75rem; } .section.section2 .s_title b { flex-shrink: 0; margin-right: 12px; } .section.section2 .s_title img:nth-child(1) { width: 1.8rem; margin-right: 9px; flex-shrink: 0; } .section.section2 .part1 .pic { margin-top: .75rem; } .section.section2 .part1 .pic>div{ width: 6.5rem; } .section.section2 .part2 ul { width: 13.5rem; border: 2px solid #e6e6e6; margin-top: .9rem; } .section.section2 .part2 li { width: 100%; min-height: 2.25rem; height: auto; background-color: #ffffff; font-size: 0.55rem; line-height: 0.8rem; color: #000000; padding: .3rem 0 .3rem .7rem; } .section.section2 .part2 li img { width: 1rem; height: 1rem; margin-right: .75rem; } .section.section2 .part2 li:nth-child(2n) { background-color: #eeeeee; font-size: 16px; line-height: 26px; } .section.section2 .part2 .partbtn{ width: 11.5rem; height: 2rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%, #84ad65 100%, #0f797e 100%); box-shadow: 0rem 0rem 0.5rem 0rem rgba(255, 171, 175, 0.5); border-radius: 0.99rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02rem; color: #000000; margin: 1rem auto 0; } .section.section2 .part3 ul{ flex-wrap: wrap; margin-top: 1rem; } .section.section2 .part3 li{ width: 4rem; height: 2.5rem; background-color: #ff747b; border-radius: 0.13rem; font-size: 0.6rem; line-height: 0.75rem; color: #ffffff; font-weight: 700; color: #ffffff; text-align: center; margin-right: .75rem; position: relative; margin-bottom: .78rem; position: relative; } .section.section2 .part3 li::after{ content:""; width: 1.2rem; height: 1.2rem; display: flex; border-radius: 1.2rem; background: #ffffff url(/uploads/image/zajimg/part3_icon1.png) no-repeat; background-size: 50%; background-position: center center; position: absolute; z-index: 10; } .section.section2 .part3 li.part3_right::after{ top: 50%; transform: translatey(-50%); right: -1rem; } .section.section2 .part3 li.part3_btm::after{ left: 50%; transform: translatex(-50%) rotatez(90deg); bottom: -1rem; } .section.section2 .part3 li.part3_left::after{ top: 50%; transform: translatey(-50%) rotatez(180deg); left: -1rem; } .section.section2 .part3 li:nth-child(2n){ background-color: #8163f0; } .section.section2 .part3 li:nth-child(2n)::after{ background: #ffffff url(/uploads/image/zajimg/part3_icon2.png) no-repeat; background-size: 50%; background-position: center center; } .section.section2 .part3 li:nth-child(3n){ margin-right: 0; } .section.section2 .part3 li:last-child::after{ display: none; } .section.section2 .part4{ margin-bottom: 0; } .section.section2 .sch_content{ align-items: flex-start; } .section.section2 .sch .sch_title{ width: 7.95rem; height: 1.2rem; background: url(/uploads/image/zajimg/sch_title.png) no-repeat; background-size: 100%; font-size: 0.6rem; font-weight: 700; color: #ffffff; margin: .9rem auto 1.83rem; } .section.section2 .sch ul{ width: 100%; flex-wrap: wrap; } .section.section2 .sch li{ width: 6.5rem; height: 4.75rem; background-color: #ffffff; border-radius: 0.15rem; border: solid 0.05rem #e5e5e5; font-size: 0.6rem; color: #000000; flex-direction: column; position: relative; padding-top: 2.4rem; margin-bottom: 1.58rem; } .section.section2 .sch li:last-child{ margin-bottom: 0; } .section.section2 .sch img{ width: 3rem; height: 3rem; border-radius: 3rem; overflow: hidden; position: absolute; top:-.83rem; left: 50%; transform: translatex(-50%); border: 2px solid #e6e6e6; } .section.section2 .sch p{ font-size: 0.35rem; line-height: 0.45rem; color: #666666; text-align: center; margin-top: .2rem; } .btm{ width: 100%; } .section.btm>.tc { font-size: 0.7rem; color: #000000; margin-top: 0.3rem; } .btm .content{ width: 15rem; margin: .6rem auto 0; padding: 1.55rem .9rem 1rem; background-color: #ffffff; border-radius: 0.15rem; } .btm form{ flex-wrap: wrap; } .btm .item, .btm input, .btm select { width: 100%; height: 1.63rem; background-color: #f7f7f7; font-size: 0.6rem; line-height: 1.63rem; color: #b3b3b3; } .btm input::placeholder{ color: #b3b3b3; } .btm .item { margin-bottom: .38rem; } .btm input, .btm select { padding-left: 10px; } .btm select { background: #f7f7f7 url(/uploads/image/zajimg/arrow.png) no-repeat ; background-size: 4%; background-position: 96% center; } .btm .item.yzm span { width: 6.25rem; height: 1.63rem; background-color: #edf42f; line-height: 1.63rem; font-size: 0.55rem; color: #000000; cursor: pointer; flex-shrink: 0; } .btm .btn { width: 7.5rem; height: 2rem; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%, #84ad65 100%, #0f797e 100%); box-shadow: 0rem 0rem 0.5rem 0rem rgba(255, 171, 175, 0.5); border-radius: 0.99rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02rem; color: #000000; margin: .6rem auto 0; } .btm input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset !important; } .layout{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.7); z-index: 12; display: none; } .layout .layout_box{ width: 12.5rem; height: 18.25rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); background: url(/uploads/image/zajimg/layout.png) no-repeat; background-size: 100%; padding: 5.25rem .68rem 0; } .layout .form2 h2 { font-size: 26px; color: #ffffff; margin-bottom: 20px; } .layout .form2 .item { width: 100%; height: 1.5rem; margin-bottom:10px ; box-shadow: 0.06rem 0.11rem 0.75rem 0rem rgba(110, 110, 110, 0.35); } .layout .form2 label{ font-size: 14px; font-weight: 700; color: #ffffff; margin-right: 15px; } .layout .form2 input, .layout .form2 select { width: 100%; height: 1.5rem; line-height: 1.5rem; background-color: #ffffff; font-size: 0.55rem; color: #b3b3b3; padding-left: 14px; } .layout .form2 select{ background: #ffffff url(/uploads/image/zajimg/arrow.png) no-repeat; background-size: 4.5%; background-position: 97% center; } .layout .form2 input::placeholder{ color: #b3b3b3; } .layout .form2 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; } .layout .form2 .item.yzm span{ width: 4.5rem; height: 1.5rem; background-color: #ffdb22; flex-shrink: 0; font-size: 0.55rem; color: #000000; } .layout .form2 .submit{ width: 170px; height: 50px; background-image: linear-gradient(0deg, #ffd200 0%, #f9e14c 100%, #84ad65 100%, #0f797e 100%); border-radius: 24.5px; font-size: 20px; font-weight: 700; color: #000000; margin: 20px auto 0; } .layout .close{ position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; }