.intr { width: 100%; padding: .4rem .43rem 0; } .intr .content { height: auto; background-color: #ffffff; border: solid 0.04rem #cccccc; padding: .45rem; position: relative; } .intr p { font-size: 0.6rem; line-height: 0.9rem; color: #333333; } .intr p span { text-decoration: underline; color: #f70000; } .intr .icon { width: 0.65rem; height: 0.68rem; position: absolute; } .intr .icon img { width: 100%; } .intr .icon1 { top: -.04rem; left: -.04rem; } .intr .icon2 { top: -.04rem; right: -.04rem; transform: rotatez(90deg); } .intr .icon3 { bottom: -.04rem; left: -.04rem; transform: rotatez(270deg); } .intr .icon4 { bottom: -.04rem; right: -.04rem; transform: rotatez(180deg); } .part { margin-top: 1.68rem; } .part .title { height: 2.65rem; background: url(/uploads/image/zulimg/icon2.png) no-repeat; background-size: auto 100%; background-position: center center; padding-left: 1.6rem; font-size: 0.7rem; color: #333333; align-items: flex-start; padding-top: 1rem; margin-bottom: .83rem; } .part .title .num { height: 0.98rem; margin-right: .3rem; } .part .title p { height: 0.98rem; line-height: .98rem; letter-spacing: 0.01rem; } .part .btn_box { padding: 0 .65rem; margin-top: 1.05rem; } .part .btn_box .btn { width: 6.43rem; height: 1.73rem; background-color: #f5be59; border-radius: 0.13rem; font-size: 0.6rem; color: #000000; } .part1 .content { padding: 0 .1rem; } .part1 ul { position: relative; height: 14.6rem; } .part1 li { width: 7.3rem; height: 7.3rem; background: url(/uploads/image/zulimg/pic1.png) no-repeat; background-size: 100% auto; position: absolute; } .part1 li:nth-child(1) { top: 0; left: 50%; transform: translatex(-50%); } .part1 li:nth-child(2) { background: url(/uploads/image/zulimg/pic2.png) no-repeat; background-size: 100% auto; left: 0; top: 50%; transform: translatey(-50%); } .part1 li:nth-child(3) { background: url(/uploads/image/zulimg/pic3.png) no-repeat; background-size: 100% auto; right: 0; top: 50%; transform: translatey(-50%); } .part1 li:nth-child(4) { background: url(/uploads/image/zulimg/pic4.png) no-repeat; background-size: 100% auto; bottom: 0; left: 50%; transform: translatex(-50%); } .part1 li p { height: 2.58rem; font-size: 0.6rem; line-height: 0.85rem; color: #ffffff; } .part1 .btn_box { padding: 0 1.15rem; } .part2 .content { padding: 0 .53rem; } .part2 li { width: 100%; height: auto; background-color: #ffffff; border: solid 0.02rem #000000; position: relative; overflow: hidden; flex-direction: column; align-items: flex-start; padding: .88rem .65rem .45rem .65rem; margin-bottom: .63rem; } .part2 li:last-child { margin-bottom: 0; } .part2 li::before { content: ""; width: 14.95rem; height: .13rem; background-color: #f5be59; border-bottom: solid 0.02rem #000000; position: absolute; top: 0; left: -.02rem; } .part2 li h3 { font-size: 0.65rem; font-weight: normal; line-height: 0.65rem; color: #333333; position: relative; z-index: 1; margin-bottom: .4rem; } .part2 li h3::after { content: ""; width: 105%; height: 0.28rem; background-color: #f5be59; border-radius: 0.12rem; position: absolute; bottom: 0; left: 50%; transform: translatex(-50%); z-index: -1; } .part2 li p { font-size: 0.5rem; line-height: 0.8rem; color: #4d4d4d; } .part2 li .txt { margin-top: .2rem; } .part2 li .txt span { height: 0.88rem; background-color: #caaf7a; font-size: 0.55rem; line-height: 0.88rem; color: #ffffff; text-align: center; display: inline-block; padding: 0 .3rem; margin-bottom: .2rem; } .part2 li .icon { position: absolute; top: 0; right: 0; width: 6.63rem; height: 1.55rem; background: url(/uploads/image/zulimg/icon3.png) no-repeat; background-size: 100% auto; font-size: 0.6rem; color: #000000; } .part3, .part5{ background-color: #f0f0f0; padding: .85rem 0 1.08rem; } .part3 .title , .part5 .title { background: #f0f0f0 url(/uploads/image/zulimg/icon4.png) no-repeat; background-size: auto 100%; background-position: center center; } .part3 .content { padding: 0 .53rem 0 .43rem; } .part3 ul{ flex-wrap: wrap; align-items: stretch; } .part3 ul li{ width: 7.28rem; padding-top: 1.38rem; position: relative; justify-content: flex-end; margin-bottom: .73rem; } .part3 li div{ width: 98%; height: 1.53rem; background-color: #caaf7a; border: solid 0.02rem #000000; font-size: 0.6rem; color: #333333; position: absolute; top: 0; left: 0; padding-bottom: .1rem; } .part3 li:last-child{ width: 100%; margin-bottom: 0; } .part3 ul li p{ width: 98%; height: 3.88rem; background-color: #ffffff; border: solid 0.02rem #000000; position: relative; z-index: 4; font-size: 0.55rem; line-height: 0.8rem; color: #4d4d4d; padding: .2rem .4rem 0; } .part3 li:last-child div{ width: 99%; } .part3 li:last-child p{ width: 99%; } .part3 ul li.s p{ height: 3.03rem; } .part3 ul li.t p{ height: 2.38rem; } .part3 .btn_box { padding: 0 0.65rem; } .part4 .title{ margin-bottom: .35rem; } .part4>p{ font-size: .6rem; margin-bottom: .6rem; line-height: 0.6rem; } .part4 .tab_box , .part4 .content { padding: 0 .53rem ; } .part4 .tab_box{ margin-bottom: 1.13rem; } .part4 .tab{ width: 25%; height: 1.73rem; background-color: #cbae7b; font-size: 0.6rem; color: #ffffff; } .part4 .tab.active{ background-color: #a2844f; position: relative; } .part4 .tab.active::after{ content: ""; border: .35rem solid #a2844f; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; position: absolute; bottom: 0; left: 50%; transform: translatex(-50%); bottom: -.6rem; } .part4 tbody{ display: none; } .part4 tbody.active{ display: contents; } .part5 .content { padding: 0 .53rem; } .part5 ul{ flex-wrap: wrap; align-items: stretch; } .part5 li{ flex-direction: column; width: 25%; font-size: 0.5rem; text-align: center; margin-bottom: .7rem; } .part5 li img{ width: 3.23rem; margin-bottom: .3rem; } .part5 li p em{ line-height: .5rem; display: block; } .part5 .btn_box{ width: 50%; padding: 0; margin-top: 0; } .btmform { width: 100%; margin-top: 0; background: url(/uploads/image/zulimg/form_bg.png) no-repeat; background-size: 100%; padding-top: 1.05rem; padding-bottom: 1.05rem; } .btmform h3 { font-size: 0.85rem; line-height: 0.85rem; color: #ffffff; margin: 0 0 .83rem; } .btmform form { flex-wrap: wrap; padding: 0 .85rem; } .btmform .item, .btmform input, .btmform select { width: 100%; background-color: #ffffff; font-size: 0.5rem; color: #808080; } .btmform input::placeholder { color: #808080; } .btmform .item { width: 6.85rem; height: 1.5rem; margin-bottom: .63rem; overflow: hidden; position: relative; } .btmform .item.nomar { margin-bottom: 0; } .btmform input, .btmform select { padding-left: .5rem; position: absolute; top: 0; left: 0; height: 100%; } .btmform select { background: #ffffff url(/uploads/image/zulimg/arrow.png) no-repeat right; background-position-x: 95%; background-size: 8%; } .btmform .btn { font-size: 0.64rem; color: #000000; width: 6.4rem; height: 1.73rem; background-color: #f5be59; border-radius: 0.13rem; margin: 1.05rem auto 0; }