body { padding: 2rem 0 3rem; background: #daf4e9; } .header { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 2rem; background: #fff; display: flex; justify-content: center; align-items: center; } .header .left, .header .right { position: absolute; top: 0; width: 2rem; height: 100%; display: flex; } .header .left .icon, .header .right .icon { margin: auto; } .header .left { left: 0; } .header .left .icon { height: 0.8rem; } .header .right { right: 0; } .header .right .icon { height: 0.95rem; } .header .logo { height: 1.4rem; margin-right: 0.55rem; } .header .tel-box { width: 5.5rem; display: flex; justify-content: center; align-items: center; background: #8e8e8e; border-radius: 0.575rem; } .header .tel-box .icon { height: 0.55rem; margin-right: 0.2rem; } .header .tel { font-size: 0.6rem; line-height: 1.15rem; color: #fff; font-weight: 700; } .banner .pic { width: 100%; } .section-title-box { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .section-title-box .left, .section-title-box .right { height: 0.35rem; } .section-title-box .section-title { font-size: 0.7rem; line-height: 0.7rem; color: #333; font-style: oblique; } .section-title-box span { color: #6793b3; } .button-box { line-height: 1.25rem; color: #fff; font-weight: 700; text-align: center; margin-top: 1rem; } .button-box .button { display: inline-block;vertical-align: top; width: 7.2rem;height: 1.25rem;line-height: 1.25rem; border-radius: 1rem; margin: 0 0.075rem;font-size: 0.6rem; box-sizing: border-box; } .button-box .button1 { background: #3e3e3f;padding-right: 1rem; box-shadow: 0 0.05rem 0.35rem rgba(165, 197, 184, 0.75); } .button-box .button2 { background: #7fd6b2;padding-left: 1rem; box-shadow: 0 0.05rem 0.35rem rgba(63, 63, 63, 0.52); } .button-box .button p {display: inline-block;color: #fff;} .button-box .icon {height: 0.65rem;margin: 0.3rem 0.45rem 0;} .button-box .button1 .icon {float: left;} .button-box .button2 .icon {float: right;} .section{ background: no-repeat; -webkit-background-size: 100%; background-size: 100%; padding: 1rem 0 0; } .section1 { height: 12.3rem;padding: 0; background-image: url(/uploads/image/zyimg/bg_01.jpg); } .section1 .container{ width: 15rem; background: #fff; border-radius: 0.2rem; margin: 0 auto; padding: 0.7rem 0.4rem 0.45rem; transform: translatey(-0.9rem); } .section1 .section-title-box { width: 9.7rem; } .section1 .wrap { margin-top: 0.7rem; } .section1 .item { height: 2.35rem; display: flex; align-items: center; background: #6793b3; box-shadow: 0 0 0.5rem rgba(47, 80, 106, 0.4); margin-bottom: 0.3rem; border-radius: 1.175rem; } .section1 .num { width: 2rem; font-size: 1rem; line-height: 2rem; color: #fff; text-align: center; font-weight: 700; border-radius: 50%; background: linear-gradient(-122deg, #81e0a5, #7199ff); box-shadow: 0 0.05rem 0.15rem rgba(35, 79, 106, 0.13); margin: 0 0.3rem 0 0.25rem; } .section1 .text { max-width: 10.85rem; font-size: 0.6rem; line-height: 0.8rem; color: #fff; } .form-box .section-title-box { width: 9.7rem; } .form-box form { width: 12rem; margin: 0.75rem auto 0; } .form-box input, .form-box select { width: 100%; height: 1.75rem; background: #fff; border-radius: 0.1rem; box-shadow: 0 0.05rem 1.25rem rgba(47, 80, 106, 0.23); margin-bottom: 0.4rem; font-size: 0.55rem; line-height: 1.75rem; padding: 0 0.55rem; } .form-box select { background: #fff url(/uploads/image/zyimg/select_icon.png) no-repeat 95% center; background-size: 0.475rem 0.3rem; color: #666; } .form-box .submit-box { width: 6.7rem; height: 1.35rem; background: #5fa98a; border-radius: 0.4rem; margin: 0.35rem auto 0; position: relative; box-shadow: 0 0.05rem 0.05rem rgba(28, 103, 72, 0.75); font-size: 0.6rem; line-height: 1.35rem; color: #fff; font-weight: 700; } .form-box .submit { display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 0.4rem; position: absolute; top: -0.15rem; left: 0; background: linear-gradient(0, #7ac3a4, #a2f1cf); } .form-box .icon { height: 0.65rem; margin-left: 0.25rem; } ::-webkit-input-placeholder {color: #666;} :-moz-placeholder {color: #666;} ::-moz-placeholder {color: #666;} :-ms-input-placeholder {color: #666;} .form-box .form-item{position: relative;} .form-box .j_getyzm{ position: absolute;right: 0;top: 0; width: 4.15rem;height: 1.75rem;line-height: 1.75rem; background: #b3b3b3;border-radius: 0.1rem; color: #fff;font-size: 0.55rem;text-align: center; } .section2 { height: 12.8rem; background-image: url(/uploads/image/zyimg/bg_02.jpg); } .section3 { height: 9.375rem; background-image: url(/uploads/image/zyimg/bg_06.jpg); } .section3 .section-title-box{width: 9.75rem;} .section3 .content { width: 15rem; margin: 0.75rem auto 0; background: #6793b3; border-radius: 0.2rem; overflow: hidden; } .section3 .tit-wrap { display: flex; background: #fff; height: 2.2rem; } .section3 .tit-wrap .item { flex: 1; padding-top: 0.3rem; border-top: 0.1rem solid transparent; border-radius: 0.2rem 0.2rem 0 0; } .section3 .tit-wrap .active { border-top-color: #7fd6b2; background: #6793b3; } .section3 .tit-wrap .active p { background: #6793b3; font-weight: 700; } .section3 .tit-wrap p { width: 3rem; text-align: center; font-size: 0.6rem; line-height: 1.3rem; color: #fff; background: #8caabf; border-radius: 0.2rem; margin: 0 auto; } .section3 .wrap { height: 2.75rem; font-size: 0.55rem; line-height: 0.8rem; color: #fff; padding: 0 0.6rem; display: flex; align-items: center; } .section3 .wrap .item { display: none; } .section3 .wrap .item:first-child { display: block; } /*.section3 .button-box {margin-top: 0.5rem;}*/ .section4 { height: 23.825rem; background-image: url(/uploads/image/zyimg/bg_03.jpg); } .section4 .section-title-box { width: 11.1rem; } .section4 .wrap { width: 12.95rem; margin: 0.95rem auto 0; text-align: center; } .section4 .item { display: flex; align-items: center; margin-bottom: 0.85rem; } .section4 .month { width: 3.95rem; background: #7fd6b2; border-radius: 0.4rem; box-shadow: 0 0.05rem 0.35rem rgba(165, 197, 184, 0.75); font-size: 0.6rem; line-height: 1.95rem; color: #fff; } .section4 .text { width: 9rem; background: #d2e5da; font-size: 0.6rem; line-height: 1.45rem; color: #3f3f3f; } .section5 { height: 13.725rem; background-image: url(/uploads/image/zyimg/bg_04.jpg); } .section5 .section-title-box { width: 8.3rem; } .section5 .wrap { width: 15rem; height: 9.3rem; margin: 0.75rem auto 0; display: flex; justify-content: space-between; align-content: space-between; flex-flow: row wrap; } .section5 .item { width: 4.75rem; border-radius: 0.4rem; overflow: hidden; position: relative; } .section5 .bg { height: 4.45rem; } .section5 .text { position: absolute; bottom: 0; left: 0; width: 100%; height: 1.95rem; background: rgba(31, 37, 41, 0.6); display: flex; align-items: center; font-size: 0.6rem; line-height: 0.8rem; color: #fff; padding-left: 0.35rem; } /*.section5 .button-box {margin-top: 0.5rem;}*/ .section6 { min-height: 25.2rem; background-image: url(/uploads/image/zyimg/bg_07.jpg); } .section6 .section-title-box { width: 9.65rem; } .section6 table { width: 14.7rem; margin: 0.75rem auto 0; border-spacing: 0; border-collapse: collapse; border-color: #fff; background: #6793b3; text-align: center; } .section6 thead { background: #23516d; } .section6 td { font-size: 0.5rem; line-height: 1.4rem; color: #fff; } /*.section6 .button-box { margin-top: 0.75rem;}*/ .section7 { height: 12.8rem; background-image: url(/uploads/image/zyimg/bg_05.jpg); } /*pop*/ .section-pop{ position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999; margin: 0;width: 100%; background-color: rgba(0,0,0,0.7); -webkit-transition: all .5s; transition: all .5s; -webkit-transform: scale(0); transform: scale(0); } .section-pop.active{-webkit-transform: scale(1);transform: scale(1);} .section-pop .pop-box{ position: absolute;top: 50%;left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 9.525rem;height: 13.3rem; border-radius: 0.3rem; background: #defbff url(/uploads/image/zyimg/pop-bg.png) no-repeat ; background-size: 100%; padding: 3.475rem 0 0; } .section-pop .pop-close{ width: 0.825rem;height: 0.825rem; background: url(/uploads/image/zyimg/pop-close.png); background-size: 100%; position: absolute;right: 0.15rem;top: 0.15rem; } .section-pop .pageform{width: 8.65rem;margin: 0 auto;} .section-pop .pageform .form-item{ position: relative;height: 1.3rem;line-height: 1.3rem; margin-bottom: 0.25rem; } .section-pop .form-item .icon{position: absolute;width: 1.45rem;height: 100%;text-align: center;margin: 0;} .section-pop .form-item .icon img{height: 0.675rem;vertical-align: middle;} .section-pop input, .section-pop select{height: 1.3rem;padding-left: 1.45rem;margin: 0;line-height: 1.3rem;} .section-pop input.yzm{padding-left: 0.4rem;} .section-pop .j_getyzm{height: 1.3rem;line-height: 1.3rem;width: 3.85rem;} .section-pop .j_submit{ width: 5.9rem;height: 1.25rem;line-height: 1.25rem; margin: 0.5rem auto 0;font-size: 0.65rem; background: #7ed5b1;color: #fff; text-align: center;border-radius: 1rem; box-shadow: 0 0.05rem 1.25rem rgba(47, 80, 106, 0.23); }