* { word-wrap: break-word; }

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

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; color: #000; background: #fff; width: 100%; height: auto; line-height: 1; margin: 0 auto; max-width: 420px; }

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; }

body, th, td, button, input, select, textarea { font-size: 18px; font-family: "SourceHanSans-Regular",-apple-system,"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

a { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-transition: all .5s; transition: all .5s; 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; transition: all .5s; }

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; }

.pd30 { padding: .3rem; }

.pdlr30 { padding: 0 .3rem; }

.pdtb30 { padding: .3rem 0; }

.mr30 { margin: .3rem; }

.mrlr30 { margin: 0 .3rem; }

.mrtb30 { margin: .3rem 0; }

.pd20 { padding: .2rem; }

.pdlr20 { padding: 0 .2rem; }

.pdtb20 { padding: .2rem 0; }

.mr20 { margin: .2rem; }

.mrlr20 { margin: 0 .2rem; }

.mrtb20 { margin: .2rem 0; }

.fl { float: left; }

.fr { float: right; }

.cl { clear: both; }

.container { height: auto; overflow: hidden; max-width: 768px; 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; }

.wrap { background: #84e4f2; }

@keyframes breathe { 0% { transform: scale(0.98); }
  50% { transform: scale(1.03); }
  100% { transform: scale(0.99); } }

.banner img { width: 100%; }

.container { padding: 0 .15rem 0 .25rem; position: relative; margin-top: -1.8rem; }

.section { width: 100%; padding: 2rem .55rem 0 .45rem; height: auto; overflow: hidden; margin-top: .25rem; position: relative; z-index: 0; }

.section .title { font-size: .32rem; color: #02B8C3; margin-bottom: .4rem; text-align: center; font-weight: bold; }

.section .title1 { font-size: .28rem; color: #333; margin-bottom: .4rem; text-align: center; line-height: .45rem; }

.section .btn { width: 5.11rem; height: .8rem; border-radius: .5rem; overflow: hidden; font-size: .32rem; color: #fff; text-shadow: 0 1px 0 #ED6A00; font-weight: bold; display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg, #FF8C00 0%, #FFC600 100%); margin: 0 auto; }

.order { height: 5.16rem; overflow: hidden; padding: 1.3rem .6rem 0; background: url("../images/order-bg.png") no-repeat center/cover; }

.order .row { height: auto; overflow: hidden; margin-bottom: .2rem; }

.order .row label { font-size: .3rem; color: #fff; margin-bottom: .2rem; display: block; }

.order .row label i { font-size: .32rem; color: #F73D24; }

.order .row input { width: 100%; height: .88rem; padding: 0 .2rem; font-size: .28rem; color: #333; background: #fff; border-radius: .08rem; }

.order .btn { width: 100%; height: .8rem; border-radius: .5rem; overflow: hidden; font-size: .32rem; color: #fff; text-shadow: 0 1px 0 #ED6A00; font-weight: bold; display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg, #FF8C00 0%, #FFC600 100%); margin: .4rem auto 0; }

.section1 { height: 11.32rem; background: url("../images/section1-bg.png") no-repeat center/cover; }

.section1 .img { width: 4.5rem; margin: 0 auto .3rem; }

.section1 dl { height: auto; overflow: hidden; margin-bottom: .2rem; }

.section1 dl dt { font-size: .28rem; color: #363A3A; font-weight: bold; margin-top: .25rem; }

.section1 dl dd { font-size: .26rem; color: #424646; line-height: .38rem; margin-top: .15rem; }

.section1 dl dd span { color: #FF2F27; }

.section1 .btn { margin: .2rem auto .3rem; }

.section2 { height: 9.59rem; background: url("../images/section2-bg.png") no-repeat center/cover; }

.section2 .img { width: 4.51rem; margin: 0 auto .2rem; }

.section2 dl { height: auto; overflow: hidden; margin-bottom: .3rem; }

.section2 dl dt { font-size: .28rem; color: #363A3A; font-weight: bold; margin-top: .25rem; }

.section2 dl dd { font-size: .26rem; color: #424646; line-height: .38rem; margin-top: .15rem; }

.section2 dl dd span { color: #FF2F27; }

.section2 .btn { margin: .2rem auto .3rem; }

.section3 { height: 16.54rem; background: url("../images/section3-bg.png") no-repeat center/cover; }

.section3 .title { margin-bottom: .2rem; }

.section3 dl { height: auto; overflow: hidden; margin-bottom: .3rem; }

.section3 dl dt { font-size: .28rem; color: #363A3A; font-weight: bold; margin-top: .25rem; }

.section3 dl dd { font-size: .26rem; color: #424646; line-height: .38rem; margin-top: .15rem; }

.section3 dl dd span { color: #FF2F27; }

.section3 .btn { margin: .2rem auto .3rem; }

.section4 { height: 11.08rem; padding: 1.6rem .25rem 0; background: url("../images/section4-bg.png") no-repeat center/cover; }

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

.section4 ul li { width: 48.5%; background: #fff; border-radius: .1rem; margin-bottom: .2rem; padding-bottom: .45rem; }

.section4 ul li h2 { font-size: .3rem; color: #333; text-align: center; margin: .35rem 0; }

.section4 ul li .btn { width: 80%; height: .54rem; font-size: .26rem; }

.section4 .more { font-size: .28rem; color: #fff; text-align: center; margin-top: .2rem; display: block; }

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

.qrBox { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.7); display: none; }

.qrBox .box { width: 5rem; height: 4.8rem; background: #fff; padding: .5rem 0; position: absolute; left: 0; right: 0; top: 3rem; margin: auto; }

.qrBox .box img { width: 3rem; margin: 0 auto; }

.qrBox .box p { font-size: .28rem; text-align: center; margin-top: .3rem; color: #333; }

.qrBox .box .close { width: .6rem; position: absolute; left: 0; right: 0; bottom: -.8rem; }