body{margin:0;padding:0;padding-top: 2rem;} /*common*/ #main, #main div, #main span, #main ul, #main li, #main p, #main form, #main img, #main input, #main label, #main table, #main thead, #main tbody, #main tr, #main th, #main td, #main hr, #main textarea, #main a, #main h5 { -moz-box-sizing: border-box;-wemainit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box; margin:0;padding:0; } #main{ font-size: 0; font-family: "microsoft yahei"; color: #000; background-color: #ffede7; line-height: 1; } #main li{list-style: none;} #main img{vertical-align: middle;} #main .btn{ font-weight: bold;margin: 0 auto;text-align: center;width: 8.45rem;height: 1.55rem;line-height: 1.55rem; font-size: 0.625rem;border-radius: 2rem;color: #fff; background: #ffa045; background: -webkit-linear-gradient(90deg,#ff6c2b,#ffcb5c); background: -o-linear-gradient(90deg,#ff6c2b,#ffcb5c); background: linear-gradient(0deg,#ff6c2b,#ffcb5c); box-shadow: 0 0.125rem 0.25rem rgba(186,88,63,0.36); } #main a.btn{display: block;text-decoration: none;} #main .showmq{font-size: 0.55rem;text-decoration: underline;} #main .showmq.btn{text-decoration: none;} #main .box-inline{text-align: center;} #main .box-inline .btn{display: inline-block;} #main .fl{float: left;} #main .fr{float: right;} #main .tr{text-align: right;} #main .clearfloat:after{content:"";display:block;clear:both;height:0} /*form*/ #main .myform{margin: 0 auto;} #main .myform input, #main .myform select{ border: 0; resize:none; outline: none; -webkit-appearance: none; background-color: #fff; color: #000; padding-left: 0.75rem; border-radius: 0.1rem; font-size: 0.6rem; border: 0; width: 100%; height: 100%; } #main .myform .form-item{ position: relative; margin: 0 auto; } #main .myform .form-item img{ position: absolute; left: 0; top: 50%; margin-top: -0.375rem; } #main .myform select{ color: #8c8c8c; background-image: url(/uploads/image/ztimages/icon-arrow.png); background-repeat: no-repeat; background-position: 10.45rem 0.7rem; -webkit-background-size: 0.6rem 0.35rem; background-size: 0.6rem 0.35rem; } #main .myform input::-webkit-input-placeholder{color: #8c8c8c;} /*swiper*/ #main .swiper-container{padding-bottom: 1.15rem;} #main .swiper-pagination{bottom: 0;} #main .swiper-pagination-bullet{ opacity: 1; border:0; margin: 0 0.25rem; width: 0.45rem; height: 0.45rem; background-color: transparent; border-radius: 50%; border: 0; background: #ccc; } #main .swiper-pagination-bullet-active{background: #e84c4d;} #main .section{ background-repeat: no-repeat; background-size: 100%; margin: 0 auto; } #main .section .last{margin-right: 0!important;} #main .section .headline{ text-align: center; font-weight: bold; font-size: 1rem; color: #404040; position: relative; } #main .section .headline i{ color: #ff9500; } #main .section .headline:before,#main .section .headline:after{ content: ""; position: absolute; top: -0.2rem; background: url(/uploads/image/ztimages/headline_01.png); width: 1.6rem; height: 1.45rem; -webkit-background-size: 100%; background-size: 100%; } #main .section .headline:before{left: 1.25rem;} #main .section .headline:after{ right: 1.7rem; background-image: url(/uploads/image/ztimages/headline_02.png); width: 1.2rem; } #main .section .container{ width: 15rem; margin: 0 auto; position: relative; } /*section1*/ #main .section1 h5{ width: 1.65rem; height: 2.625rem; font-size: 1.1rem; line-height: 1.15rem; color: #404040; position: absolute; top: -0.4rem; left: 0.55rem; background: url(/uploads/image/ztimages/icon_01.png); -webkit-background-size: 100%; background-size: 100%; padding: 0.1rem 0 0 0.3rem; } #main .section1 p{ font-size: 0.6rem; line-height: 0.85rem; color: #666; padding: 0.625rem 0.4rem 0.55rem 2.75rem; } #main .section1 p span{ color: #ff0000; } /*section2*/ #main .section2 li{ height: 6.25rem; width: 15rem; background: #fff; border-radius: 0.2rem; padding: 0.95rem 0.5rem 0 6.5rem; } #main .section2 img{ position: absolute; left: 0.4rem; top: 1.4rem; width: 5.5rem; } #main .section2 h5{ font-size: 0.7rem; color: #000; } #main .section2 p{ font-size: 0.6rem; line-height: 0.75rem; color: #666; margin-top: 0.55rem; } #main .section2 .btn,#main .section4 .btn{margin-top: 0.75rem;} /*section3*/ #main .section3{margin-top: 1rem;} #main .section3 .container{margin-top: 1.1rem;} #main .section3 li{ padding-bottom: 0.15rem; } #main .section3 li.active{ background-color: #fff; border-radius: 0.25rem 0.25rem 0 0; padding-bottom: 0.4rem; } #main .section3 li.next{ margin-top: -0.25rem; } #main .section3 .top{ height: 2rem; line-height: 2rem; padding-left: 0.75rem; font-size: 0.75rem; color: #fff; border-radius: 0.25rem; background: #f37850; background: -webkit-linear-gradient(90deg,#ff8c4e,#e86652); background: -o-linear-gradient(90deg,#ff8c4e,#e86652); background: linear-gradient(0deg,#ff8c4e,#e86652); position: relative; } #main .section3 li.active .top{ border-radius: 0.25rem 0.25rem 0 0; } #main .section3 .top:after{ content: ""; position: absolute; right: 0.8rem; top: 0.55rem; width: 0.9rem; height: 0.9rem; background: #fff url(/uploads/image/ztimages/icon-arrow.png) no-repeat center 0.325rem; -webkit-background-size: 0.6rem 0.35rem; background-size: 0.6rem 0.35rem; border-radius: 50%; transform: rotate(-90deg); } #main .section3 li.active .top:after{ transform: rotate(0); } #main .section3 .bottom{ display: none; font-size: 0.6rem; line-height: 0.75rem; padding: 0.8rem 1rem 1.6rem; background-color: #fff; } /*section4*/ #main .section4{margin-top: 1.25rem;} #main .section4 .container,#main .section6 .container{margin-top: 1rem;} #main .section4 li{height: 7.5rem;} #main .section4 .item{ position: relative; width: 7.25rem; } #main .section4 h5{ font-size: 0.7rem; color: #fff; position: absolute; top: 0.9rem; } #main .section4 .fl h5{left: 1.25rem;} #main .section4 .fr h5{right: 1.25rem;} #main .section4 img{width: 100%;} #main .section4 p{ height: 5rem; font-size: 0.6rem; line-height: 5rem; background-color: #fff; border-radius: 0 0 0.2rem 0.2rem; padding: 0 0.5rem; } #main .section4 p span{ display: inline-block; line-height: 0.75rem; vertical-align: middle; } /*section5*/ #main .section5{ margin-top: 1.15rem; height: 17.4rem; background-image: url(/uploads/image/ztimages/bg_05.jpg); -webkit-background-size: 100%; background-size: 100%; } #main .section5 h3{ font-size: 0.9rem; line-height: 1.15rem; color: #fff; text-align: center; padding: 0.4rem 0; } #main .section5 .form-item{ width: 12.15rem; height: 1.7rem; margin-bottom: 0.25rem; } #main .section5 .btn{margin-top: 0.75rem;} /*section6*/ #main .section6{margin-top: -0.45rem;} #main .section6 .headline{ font-size: 0.9rem; } #main .section6 .headline p{ font-size: 0.8rem; margin-bottom: 0.3rem; } #main .section6 .headline:before,#main .section6 .headline:after{top: 0.4rem;} #main .section6 li{ height: 13.4rem; background-color: #ffd9cd; border-radius: 0.2rem; padding: 0 0.25rem 0; } #main .section6 h5{ font-size: 0.75rem; color: #404040; padding: 0 0 0 4rem; height: 2rem; line-height: 2rem; position: relative; } #main .section6 h5:before{ content: ""; position: absolute; top: 0.2rem; left: 0.75rem; width: 2.5rem; height: 2.5rem; background: url(/uploads/image/ztimages/icon-head.png); -webkit-background-size: 100%; background-size: 100%; } #main .section6 .bottom{ height: 8.75rem; background-color: #fff; border-radius: 0.2rem; padding: 1.15rem 1.2rem 0 1rem; letter-spacing: 0.5px; } #main .section6 p{ color: #333; font-size: 0.55rem; line-height: 0.9rem; } #main .section6 b{ font-size: 0.6rem; } #main .section6 .btn{margin-top: 0.5rem;} /*section7*/ #main .section7{ margin-top: 1.25rem; padding-bottom: 1.35rem; background-image: url(/uploads/image/ztimages/bg_07.jpg) no-repeat bottom center; -webkit-background-size: 100% 5.5rem; background-size: 100% 5.5rem; } #main .section7 ul{ height: 3.6rem; margin-top: 0.9rem; background: url(/uploads/image/ztimages/icons.png) no-repeat center top; -webkit-background-size: 11.85rem 1.725rem; background-size: 11.85rem 1.725rem; padding: 2.3rem 0 0; text-align: center; } #main .section7 li{ font-size: 0.6rem; display: inline-block; vertical-align: top; width: 3.4rem; } #main .section7 .form-item{ width: 14.6rem; height: 1.65rem; margin-bottom: 0.5rem; } #main .section7 .form-item img{ width: 0.7rem; left: 0.75rem; } #main .section7 input{ padding-left: 1.9rem; }