*, *:before, *:after { box-sizing: border-box; outline: none; word-wrap: break-word; }

html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset { margin: 0; padding: 0; font-weight: normal; -webkit-tap-highlight-color: transparent; }

ul, ol, dl { list-style-type: none; }

html, body { *position: static; width: 100%; height: auto; overflow-x: hidden; background: #fff; font-size: .16rem; color: #000; line-height: 1; font-family: system-ui, -apple-system, Microsoft YaHei, Heiti SC ,tahoma, arial, Hiragino Sans GB, "\5B8B\4F53",sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 400; }

input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }

input, button { overflow: visible; vertical-align: middle; outline: none; }

a { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-transition: all .5s ease; transition: all .5s ease; color: #000; }

a:hover, a:focus, a:active { text-decoration: none; outline: none; }

b, i { font-weight: normal; font-style: normal; }

sub, sup { vertical-align: baseline; }

button, input[type="button"], input[type="submit"] { line-height: normal !important; }

img { max-width: 100%; border: 0; object-fit: cover; display: block; -webkit-user-drag: none; }

a img { -webkit-transition: all .5s ease; transition: all .5s ease; }

input, textarea { border: 0; background: none; outline: none; resize: none; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input[type="text"], input[type="tel"], input[type="button"], input[type="submit"], input[type="reset"], input[type="password"], input[type="email"], textarea { -webkit-appearance: none; border-radius: 0; -webkit-tap-highlight-color: transparent; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }

input::-moz-placeholder, textarea::-moz-placeholder { color: #bbb; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #bbb; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #bbb; }

::-webkit-scrollbar { width: 4px; height: 4px; background-color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

::-webkit-scrollbar-thumb { background-color: #c8c8c8; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.fl { float: left; }

.fr { float: right; }

.cl { clear: both; }

.container { height: auto; overflow: hidden; max-width: 677px; margin: 1.05rem auto 0; position: relative; z-index: 0; }

.mask-black { background: rgba(0, 0, 0, 0.4); position: fixed; z-index: 50; bottom: 0; right: 0; left: 0; top: 0; display: none; }

html, body { max-width: 677px; margin: 0 auto; }

/*banner*/
.banner { width: 100%; height: 8.88rem; background: url("../images/banner.jpg") center no-repeat; background-size: cover; padding: 0 .25rem; position: relative; }

.banner .logo { width: 1.35rem; display: block; position: absolute; left: 0; top: .3rem; }

.banner .t { width: 100%; position: absolute; left: 0; top: 2rem; right: 0; margin: auto; }

.progress { position: relative; margin-top: .7rem; z-index: 2; }

.progress .t { width: 2.82rem; height: .6rem; margin: 0 auto .4rem; }

.progress .t img { width: 100%; }

.progress .box { width: 6.9rem; display: flex; align-items: center; background: #fff; padding: .4rem .3rem; margin: 0 auto; box-shadow: 0 0.03rem 0.2rem 0.01rem rgba(147, 179, 216, 0.29); border-radius: .15rem; overflow: hidden; }

.progress .box ul { flex: 1; display: flex; justify-content: space-between; margin: 0 px2rem(70); position: relative; }

.progress .box ul:before { content: ""; width: 75%; height: .03rem; background: #D7E4FB; margin: 0 auto; position: absolute; left: .8rem; top: 37%; }

.progress .box ul li { flex: 0 0 25%; text-align: center; }

.progress .box ul li h3 { font-size: .28rem; color: #343846; font-weight: bold; }

.progress .box ul li .dot { width: .15rem; height: .15rem; position: relative; background: #D7E4FB; border-radius: 50%; overflow: hidden; margin: .2rem auto; }

.progress .box ul li .dot:after { content: ""; width: .12rem; height: .12rem; background: #1B74E9; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50%; overflow: hidden; }

.progress .box ul li h4 { font-size: .24rem; color: #707070; line-height: .32rem; }

.progress .box ul li.active h3 { color: #1B74E9; }

.progress .box ul li:nth-child(2) { flex: 0 0 50%; }

/* section */
.section { height: auto; overflow: hidden; position: relative; padding: .8rem 0; }

.section .title { height: auto; overflow: hidden; margin: 0 auto .4rem; font-size: .34rem; color: #fff; text-align: center; font-weight: bold; }

.section .title img { width: 2.82rem; margin: 0 auto; }

.section .title i { font-size: .4rem; margin-right: .1rem; }

.section1 .big { width: 100%; height: 4.5rem; margin-bottom: .3rem; position: relative; }

.section1 .big img { width: 100%; height: 100%; }

.section1 .big .coverV { width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; background: rgba(0, 0, 0, 0.5); padding-top: 22%; }

.section1 .big .coverV .icon-play { width: .8rem; font-size: .8rem; color: #fff; margin: 0 auto .2rem; display: block; }

.section1 .big .coverV h2 { font-size: .26rem; color: #fff; }

.section1 .slide { height: auto; overflow: hidden; padding: 0 .25rem .5rem; position: relative; }

.section1 .slide .swiper-slide { position: relative; }

.section1 .slide .swiper-slide .img { height: 2.1rem; position: relative; }

.section1 .slide .swiper-slide .img img { width: 100%; height: 100%; }

.section1 .slide .swiper-slide .coverV { width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; background: rgba(0, 0, 0, 0.5); padding-top: 20%; }

.section1 .slide .swiper-slide .coverV .icon-play { width: .6rem; font-size: .6rem; color: #fff; margin: 0 auto .2rem; display: block; }

.section1 .slide .swiper-slide h2 { font-size: .24rem; color: #333; line-height: .36rem; margin-top: .15rem; text-align: center; }

.section1 .slide .swiper-pagination { bottom: 0; }

.section1 .slide .swiper-pagination .swiper-pagination-bullet-active { background: #0964C8; }

.section2 { background: url("../images/section2-bg.jpg") no-repeat center/cover; }

.section2 .slide { margin-top: .5rem; padding-bottom: .6rem; position: relative; }

.section2 .slide .swiper-slide { transition: 300ms; transform: scale(0.9); position: relative; }

.section2 .slide .swiper-slide.swiper-slide-active { transform: scale(1); }

.section2 .slide .swiper-slide h2 { width: 100%; font-size: .28rem; font-weight: bold; color: #fff; text-align: center; position: absolute; left: 0; bottom: 0; padding: .3rem; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.98) 100%); }

.section2 .slide .swiper-pagination { bottom: 0; }

.section2 .slide .swiper-pagination .swiper-pagination-bullet { margin: 0 .05rem; background: #fff; }

.section3 { padding: .8rem .25rem; }

.section3 .big { overflow: hidden; position: relative; }

.section3 .big h2 { width: 100%; font-size: .28rem; line-height: .4rem; color: #fff; position: absolute; left: 0; bottom: 0; padding: .3rem; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.98) 100%); }

.section3 ul { height: auto; }

.section3 ul li { overflow: hidden; background: #fff; margin-top: .2rem; padding: .4rem; box-shadow: 0px 0px 15px 1px rgba(79, 119, 159, 0.15); border-radius: .15rem; }

.section3 ul li h2 { font-size: .28rem; line-height: .4rem; font-weight: bold; color: #333; margin-bottom: .15rem; }

.section3 ul li p { font-size: .26rem; color: #5C5851; line-height: .42rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.section4 { background: #EBF5FF; }

.section4 .title img { width: 5.4rem; }

.section4 .box { width: 6.9rem; margin: 0 auto; }

.section4 .box .tt { font-size: .34rem; color: #1B74E9; text-align: center; font-weight: bold; }

.section4 .box .tt i { font-size: .4rem; margin-right: .1rem; }

.section4 .box p { font-size: .26rem; line-height: .4rem; }

.section4 .box1 { padding: .5rem; background: url("../images/section4-box1.png") no-repeat top/100% #fff; }

.section4 .box1 p { color: #343846; padding-left: .5rem; margin-top: .3rem; position: relative; z-index: 1; }

.section4 .box1 p span { width: .3rem; height: .3rem; position: absolute; left: 0; top: .06rem; display: flex; align-items: center; justify-content: center; }

.section4 .box1 p span i { font-size: .26rem; color: #fff; position: relative; z-index: 1; }

.section4 .box1 p span:after { content: ""; width: 100%; height: 100%; background: #1B74E9; position: absolute; left: 0; top: 0; transform: rotate(45deg); border-radius: .06rem; overflow: hidden; }

.section4 .box1 p b { color: #1B74E9; }

.section4 .box1 .tip { font-size: px2rem(24); color: #999; }

.section4 .box2 { margin-top: .5rem; }

.section4 .box2 .bg { height: 3.74rem; margin-top: .4rem; padding: 1rem; background: url("../images/section4-box2.png") no-repeat center/cover; border-radius: .1rem; position: relative; }

.section4 .box2 .bg p { color: #fff; }

.section4 .box2 .bg img { width: 100%; position: absolute; right: -.15rem; bottom: -.6rem; }

.section4 .box3 { margin-top: 1rem; }

.section4 .box3 ul li { background: #fff; border-radius: .2rem 0 .2rem 0; display: flex; align-items: center; margin-top: .3rem; padding-right: .1rem; }

.section4 .box3 ul li .t { flex-shrink: 0; width: 1.7rem; height: 1.5rem; margin-right: .25rem; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(180deg, #009FFD 0%, #475FE1 100%); border-radius: .2rem 0 .2rem 0; }

.section4 .box3 ul li .t h3 { font-size: .26rem; font-weight: bold; color: #fff; }

.section4 .box3 ul li .t h4 { font-size: .26rem; color: #fff; margin-top: .1rem; }

.section4 .box3 ul li p { font-size: .26rem; color: #343846; }

.section-order { height: auto; overflow: visible; background: url("../images/order-bg.jpg") top no-repeat #F4FAFF; background-size: 100%; }

.section-order .st { font-size: .26rem; color: #B3C6F5; text-align: center; }

.section-order form { width: 6.9rem; padding: .5rem .3rem; box-shadow: 0 0 0.15rem 0.01rem rgba(27, 40, 83, 0.17); background: #fff; border-radius: .2rem; margin: 3.2rem auto 0; }

.section-order form .row { height: .9rem; background: #f6f6f6; padding-left: .2rem; margin-bottom: .3rem; display: flex; align-items: center; position: relative; }

.section-order form .row label { font-size: .28rem; color: #000; line-height: 62px; display: inline-block; }

.section-order form .row label i { color: #ff0000; width: .2rem; display: inline-block; }

.section-order form .row > input, .section-order form .row > select, .section-order form .row > div { height: .9rem; font-size: .28rem; color: #000; border: 0; flex: 1; background: none; }

.section-order form .btn { width: 100%; height: .8rem; line-height: .8rem; font-size: .3rem; color: #fff; font-weight: bold; text-align: center; border-radius: .5rem; background: linear-gradient(297deg, #009FFD 0%, #475FE1 100%); margin-top: .3rem; }

.section-order .copyright { width: 100%; font-size: .26rem; color: #fff; text-align: center; position: absolute; left: 0; bottom: .4rem; }

.section-product { background: #F4FAFF; padding: .8rem .3rem; }

.section-product ul { display: flex; justify-content: space-between; flex-wrap: wrap; }

.section-product ul li { width: 48.5%; padding: .3rem .2rem; background: #fff; box-shadow: 0 0 0.2rem 0.01rem rgba(88, 191, 136, 0.06); border-radius: .1rem; margin-top: .2rem; }

.section-product ul li img { width: 100%; }

.section-product ul li .text h2 { font-size: .26rem; color: #333; font-weight: bold; }

.section-product ul li .text p { font-size: .24rem; color: #666; margin-top: .1rem; }

.section-product ul li .btn { width: 100%; height: .6rem; font-size: .26rem; color: #fff; margin-top: .2rem; background: linear-gradient(180deg, #009FFD 0%, #475FE1 100%); display: flex; align-items: center; justify-content: center; border-radius: .3rem; }

.footer { background: #0B264A; padding: .4rem 0; font-size: .24rem; color: #fff; text-align: center; }

.footer a { color: #fff; }

.popVideo { width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 22; background: #000; display: none; }

.popVideo video { width: 100%; height: 50vh; position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto; }

.popVideo .close { position: absolute; right: 0; top: 0; padding: 0.4rem; color: #fff; z-index: 2; font-size: 0.3rem; }

.fixed-right { width: 2.18rem; height: .76rem; background: url("../images/fixed-right.png") center no-repeat; background-size: 100%; position: fixed; right: 0; bottom: 2rem; z-index: 10; }