html { height: 100%; } body { height: 100%; } /*澶撮儴 begin*/ #main { background: #f8fcff; color: black; height: 100%; } #main .head { height: 1.95rem; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ebebeb)); background: -webkit-linear-gradient(top, #fff, #ebebeb); background: -moz-linear-gradient(top, #fff, #ebebeb); background: linear-gradient(to bottom, #fff, #ebebeb); position: relative; } #main .head a { display: block; height: 100%; position: absolute; top: 0; } #main .head .back { width: 1.5rem; left: 0; } #main .head .back img { height: 0.45rem; margin: 0.75rem 0 0 0.65rem; } #main .head .tel { width: 2.25rem; right: 0; } #main .head .tel img { height: 0.8rem; margin: 0.6rem 0 0 0.75rem; } #main .head .logo { width: 3.875rem; height: 100%; margin: 0 auto; } #main .head .logo img { height: 1.2rem; margin-top: 0.4rem; } /*澶撮儴 end*/ /*banner鍥? begin*/ #main .banner { height: 9.875rem; } #main .banner img { height: 100%; } /*banner鍥? end*/ /*妯″潡閮ㄥ垎 begin*/ #main .section-title { display: block; height: 1.25rem; margin: 0 auto; } /*妯″潡1*/ #main .section1 { padding-top: 1.575rem; } #main .section1 .section-min-title { margin-top: 1.1rem; height: 1.05rem; padding-left: 0.65rem; } #main .section1 .section-min-title img { height: 100%; margin-right: 0.25rem; vertical-align: top; } #main .section1 .section-min-title h2 { font-size: 0.75rem; line-height: 1.05rem; color: #005ad4; display: inline; } #main .section1 .section-min1 ul { width: 13.75rem; height: 3.2rem; margin: 0.4rem auto 0; background: url(/uploads/image/zavimg/a_curve.png) no-repeat center 0.85rem; -moz-background-size: 13.75rem 1.6rem; background-size: 13.75rem 1.6rem; position: relative; } #main .section1 .section-min1 li { width: 2.3rem; height: 2.3rem; border: 0.05rem solid #005ad4; -moz-border-radius: 50%; border-radius: 50%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; background: white; } #main .section1 .item1 { top: 0.15rem; left: 1.1rem; } #main .section1 .item2 { bottom: 0; left: 4.3rem; } #main .section1 .item3 { top: 0; left: 7.5rem; } #main .section1 .item4 { top: 0.6rem; right: 0.75rem; } #main .section1 .section-min1 ul .active { background: #005ad4; } #main .section1 .section-min1 ul .active p { color: white; } #main .section1 .section-min1 ul .active:after { content: ""; display: block; width: 0; position: absolute; border-top: 0.3rem solid #005ad4; border-bottom: 0.3rem solid transparent; border-left: 0.25rem solid transparent; border-right: 0.25rem solid transparent; bottom: -0.6rem; left: 0.85rem; } #main .section1 .section-min1 ul li p { font-size: 0.6rem; line-height: 0.75rem; color: #005ad4; text-align: center; width: 100%; } #main .section1 .description { width: 14.05rem; height: 5.35rem; border: 0.05rem solid #9bcdff; -moz-border-radius: 0.15rem; border-radius: 0.15rem; margin: 0.7rem 0 0 1.15rem; } #main .section1 .description .content { height: 100%; background: #e0f1ff; -moz-border-radius: 0.15rem; border-radius: 0.15rem; position: relative; top: -0.15rem; left: -0.15rem; } #main .section1 .description p { width: 11.75rem; font-size: 0.6rem; line-height: 0.85rem; position: absolute; display: none; text-align: justify; top: 0.65rem; left: 1.1rem; } #main .section1 .description .active { display: block; } #main .section1 .description a { display: block; width: 4.55rem; height: 1.1rem; background: #ffdb2e; -moz-border-radius: 0.55rem; border-radius: 0.55rem; font-size: 0.6rem; text-align: center; line-height: 1.1rem; position: absolute; bottom: 0.6rem; left: 4.7rem; } #main .section1 .section-min2 ul { margin-top: 0.95rem; } #main .section1 .section-min2 li { width: 14.55rem; height: 5.35rem; border: 0.05rem solid #9bcdff; -moz-border-radius: 0.15rem; border-radius: 0.15rem; margin: 0 0 0.6rem 0.8rem; } #main .section1 .section-min2 .content { height: 100%; background: #e0f1ff; -moz-border-radius: 0.15rem; border-radius: 0.15rem; position: relative; top: -0.15rem; left: -0.15rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } #main .section1 .left { width: 3.8rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column nowrap; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } #main .section1 .left img { width: 2.1rem; } #main .section1 .left h3 { font-size: 0.6rem; margin-top: 0.45rem; } #main .section1 .line { width: 0; height: 3.2rem; border: 0.025rem dashed white; margin: auto 0; } #main .section1 .right { width: 9.5rem; margin-left: 0.5rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column nowrap; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } #main .section1 .section-min2 p { font-size: 0.575rem; line-height: 0.85rem; text-align: justify; } #main .section1 .section-min2 a { font-size: 0.55rem; color: #005ad4; text-decoration: underline; font-weight: bold; margin-left: 7.15rem; margin-top: 0.25rem; } /*妯″潡2*/ #main .section2 { margin-top: 2.6rem; } #main .section2 .info { width: 14.7rem; height: 8.8rem; margin: 1.1rem auto 0; position: relative; } #main .section2 .bg { width: 14.3rem; height: 1.75rem; background: url(/uploads/image/zavimg/section2_curve.png) no-repeat; -moz-background-size: 14.3rem 1.725rem; background-size: 14.3rem 1.725rem; position: absolute; top: 2.65rem; left: 0.3rem; } #main .section2 .bg li { width: 0.45rem; height: 0.45rem; background: #005ad4; -moz-border-radius: 50%; border-radius: 50%; position: absolute; } #main .section2 .circle1 { bottom: 0.4rem; left: 1.25rem; } #main .section2 .circle2 { bottom: 0.2rem; left: 3.9rem; } #main .section2 .circle3 { bottom: 0.4rem; left: 6.85rem; } #main .section2 .circle4 { top: 0.15rem; right: 4rem; } #main .section2 .circle5 { top: 0.35rem; right: 0.9rem; } #main .section2 .content { width: 100%; height: 6.75rem; position: absolute; top: 0; left: 0; } #main .section2 .content li { border: 0.05rem solid #9bcdff; -moz-border-radius: 0.125rem; border-radius: 0.125rem; position: absolute; height: 2rem; } #main .section2 .content li:before { content: ""; display: block; position: absolute; border: 0.45rem solid transparent; } #main .section2 .content li:nth-child(2n 1):before { border-bottom: 0.45rem solid #9bcdff; top: -0.9rem; } #main .section2 .content li:nth-child(2n):before { border-top: 0.45rem solid #9bcdff; bottom: -0.9rem; } #main .section2 .content li:after { content: ""; display: block; position: absolute; border: 0.45rem solid transparent; } #main .section2 .content li:nth-child(2n 1):after { border-bottom: 0.45rem solid #f8fcff; top: -0.825rem; } #main .section2 .content li:nth-child(2n):after { border-top: 0.45rem solid #f8fcff; bottom: -0.825rem; } #main .section2 .item1 { width: 4.4rem; bottom: 0; left: 0.1rem; } #main .section2 .item1:before, #main .section2 .info .content .item1:after, #main .section2 .info .content .item1 div:after { left: 1.3rem; } #main .section2 .item2 { width: 3.7rem; top: 0.95rem; left: 2rem; } #main .section2 .item2:before, #main .section2 .info .content .item2:after, #main .section2 .info .content .item2 div:after { right: 0.75rem; } #main .section2 .item3 { width: 4.4rem; bottom: 0; left: 5.25rem; } #main .section2 .item3:before, #main .section2 .info .content .item3:after, #main .section2 .info .content .item3 div:after { left: 1.8rem; } #main .section2 .item4 { width: 6.65rem; top: 0; right: 1.2rem; } #main .section2 .item4:before, #main .section2 .info .content .item4:after, #main .section2 .info .content .item4 div:after { left: 3.1rem; } #main .section2 .item5 { width: 4.45rem; bottom: 0.3rem; right: 0; } #main .section2 .item5:before, #main .section2 .info .content .item5:after, #main .section2 .info .content .item5 div:after { right: 0.65rem; } #main .section2 .content div { height: 100%; background: #e0f1ff; -moz-border-radius: 0.125rem; border-radius: 0.125rem; position: relative; top: -0.1rem; left: -0.1rem; z-index: 1; } #main .section2 .content div:after { content: ""; display: block; border: 0.45rem solid transparent; position: absolute; } #main .section2 .content li:nth-child(2n 1) div:after { border-bottom: 0.45rem solid #e0f1ff; top: -0.825rem; } #main .section2 .content li:nth-child(2n) div:after { border-top: 0.45rem solid #e0f1ff; bottom: -0.825rem; } #main .section2 p { font-size: 0.6rem; line-height: 0.75rem; padding: 0.25rem 0.25rem 0; text-align: center; } #main .section2 a { display: block; width: 5.1rem; height: 1.1rem; background: #ffdb2e; -moz-border-radius: 0.55rem; border-radius: 0.55rem; font-size: 0.6rem; text-align: center; line-height: 1.1rem; position: absolute; bottom: 0; left: 4.8rem; } /*妯″潡3*/ #main .section3 { margin-top: 2.35rem; } #main .section3 ul { width: 14rem; margin: 1.75rem auto 0; } #main .section3 li { width: 3.75rem; height: 3.75rem; border: 0.05rem solid #9bcdff; -moz-border-radius: 50%; border-radius: 50%; float: left; margin: 0 1rem 0.7rem 0; } #main .section3 .item3, #main .section3 .item6 { margin-right: 0; } #main .section3 .item4 { margin-left: 0.75rem; } #main .section3 li > div { height: 100%; -moz-border-radius: 50%; border-radius: 50%; -moz-background-size: cover; background-size: cover; position: relative; top: -0.1rem; left: -0.1rem; } #main .section3 .item1 > div { background: url(/uploads/image/zavimg/section3_img1.png) no-repeat; } #main .section3 .item2 > div { background: url(/uploads/image/zavimg/section3_img2.png) no-repeat; } #main .section3 .item3 > div { background: url(/uploads/image/zavimg/section3_img3.png) no-repeat; } #main .section3 .item4 > div { background: url(/uploads/image/zavimg/section3_img4.png) no-repeat; } #main .section3 .item5 > div { background: url(/uploads/image/zavimg/section3_img5.png) no-repeat; } #main .section3 .item6 > div { background: url(/uploads/image/zavimg/section3_img6.png) no-repeat; } #main .section3 li > div > div { height: 100%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(0, 0, 0, 0.54); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } #main .section3 p { font-size: 0.6rem; line-height: 0.75rem; color: white; font-weight: bold; width: 2.5rem; text-align: center; } /*妯″潡4*/ #main .section4 { margin-top: 1.9rem; padding-bottom: 4.75rem; } #main .section4 .content { margin: 1.375rem auto 0; width: 14.7rem; height: 10.85rem; position: relative; overflow: hidden; } #main .section4 .slider-ul { width: 73.5rem; position: absolute; top: 1.1rem; left: 0; } #main .section4 .slider-ul > li { width: 14.55rem; height: 9rem; border: 0.05rem solid #9bcdff; -moz-border-radius: 0.15rem; border-radius: 0.15rem; margin-left: 0.15rem; float: left; position: relative; } #main .section4 .slider-ul > li:after { content: ""; display: block; width: 3.5rem; height: 3.5rem; background: #f8fcff; border: 0.05rem solid #9bcdff; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: -1rem; left: 0.7rem; clip: rect(0, 3.5rem, 1rem, 0); } #main .section4 .content-bg { width: 100%; height: 100%; background: #e0f1ff; position: relative; -moz-border-radius: 0.15rem; border-radius: 0.15rem; top: -0.2rem; left: -0.2rem; z-index: 1; padding-top: 0.7rem; } #main .section4 .content-bg:after { content: ""; display: block; width: 3.4rem; height: 3.4rem; background: #e0f1ff; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: -0.9rem; left: 0.75rem; } #main .section4 .content-bg img { height: 2.925rem; position: absolute; z-index: 1; top: -0.3rem; left: 1.2125rem; } #main .section4 h3 { font-size: 0.65rem; line-height: 1rem; width: 8.75rem; margin-left: 5rem; } #main .section4 .line { width: 12.5rem; border: 0.025rem dashed white; margin: 0.6rem auto 0; } #main .section4 .content-bg ul { width: 12.5rem; margin: 0.65rem auto 0; } #main .section4 .content-bg li { margin-bottom: 0.25rem; overflow: hidden; } #main .section4 .circle { width: 0.4rem; height: 0.4rem; background: #005ad4; -moz-border-radius: 50%; border-radius: 50%; float: left; margin-top: 0.3rem; } #main .section4 .text { font-size: 0.6rem; line-height: 1rem; float: right; width: 11.5rem; } #main .section4 span { font-weight: bold; } #main .section4 a { font-size: 0.6rem; line-height: 1rem; color: #005ad4; text-decoration: underline; margin-left: 0.6rem; font-weight: bold; } #main .section4 .tip { width: 2.15rem; overflow: hidden; position: absolute; bottom: 0; left: 6.275rem; } #main .section4 .tip li { width: 0.35rem; height: 0.35rem; border: 0.05rem solid #ffdb2e; -moz-border-radius: 50%; border-radius: 50%; float: left; margin-right: 0.25rem; } #main .section4 .tip li:first-child { background: #ffdb2e; } #main .section4 .tip li:last-child { margin-right: 0; } /*妯″潡閮ㄥ垎 end*/ /*鍥哄畾搴曢儴 begin*/ #main .fixed-bottom { width: 100%; height: 1.625rem; background: #ffdb2e; position: fixed; bottom: 2.6rem; left: 0; font-size: 0.6rem; line-height: 1.625rem; text-align: center; z-index: 1; } /*鍥哄畾搴曢儴 end*/ /*琛ㄥ崟 begin*/ #main .pop-form { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.69); z-index: 1; padding-top: 3.25rem; display: none; } #main .pop-form .form-div { width: 13.45rem; height: 15.675rem; background: white; -moz-border-radius: 0.15rem; border-radius: 0.15rem; margin: 0 auto; padding-top: 1.4rem; position: relative; } #main .pop-form .title { height: 2.875rem; display: block; margin: 0 auto; } #main .pop-form .close { height: 1.375rem; position: absolute; top: -0.6rem; right: -0.6rem; } #main .pop-form form { width: 11.05rem; margin: 0.85rem auto 0; display: block; } #main .pop-form form > div { margin-bottom: 0.5rem; } #main .pop-form label { font-size: 0.6rem; line-height: 1.4rem; } #main .pop-form span { letter-spacing: 3em; } #main .pop-form input, #main .pop-form select { width: 7.1rem; height: 1.4rem; border: 0.05rem solid #9bcdff; -moz-border-radius: 0.125rem; border-radius: 0.125rem; float: right; font-size: 0.6rem; text-align: center; padding: 0 0.5rem; } #main .pop-form select { color: #b5b5b5; background: white; } #main .pop-form .button { width: 4.625rem; height: 1.2rem; background: #ffdb2e; -moz-border-radius: 0.6rem; border-radius: 0.6rem; margin: 0.9rem auto 0; font-size: 0.6rem; line-height: 1.2rem; text-align: center; } /*琛ㄥ崟 end*/