body{ font-family: PingFang SC,Helvetica Neue,Hiragino Sans GB,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,th,ul{margin:0;padding:0}
a:link,a:visited{text-decoration:none;}
*{ box-sizing: border-box;}
a img{border:0}
body{ margin:0; padding:0; color: #152825; font-size: 16px; background:  #fff; line-height: 1.5;}
ul,li{ list-style:none;}
img{ margin:0; padding:0; border: none;}
button:focus,input:focus,select:focus,textarea:focus{outline:0}
input[type=text],input[type=password],input[type=search],input[type=tel],input[type=number],input[type=email],input[type=url],textarea{ color: #05265e; -webkit-appearance:none;-webkit-border-radius:0; font-size: 16px; border-radius:0}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
:-moz-placeholder { color: #05265e; opacity:0.4; font-size: 16px; }
::-moz-placeholder {  color: #05265e;opacity:0.4; font-size: 16px;  }
input:-ms-input-placeholder{ opacity:0.4; font-size: 16px; }
input::-webkit-input-placeholder{ opacity:0.4; color: #05265e; font-size: 16px; }
em{ font-style: normal;}
a{ color: #031b4d; -webkit-tap-highlight-color:rgba(0,0,0,0); }
:after, :before{box-sizing:initial}

.page-wrap{  max-width: 640px; margin: 0 auto; padding-bottom: 20px; min-height: 100vh; background-color: #f2f4f3;   }
.reg-header{ text-align: center; padding: 20px 0 0; }
.reg-form{ margin: 0 10px; border-radius: 20px; padding: 140px 20px 20px; }
.reg-logo{ width: 150px;}
.reg-txt h2{ font-size: 18px; font-weight: normal; margin: 12px 0; }
.reg-txt h3{ font-size: 16px; font-weight: normal; margin: 5px 0 10px; opacity: 0.7; }
.reg-form-tit{ margin-bottom: 50px; }
.reg-form-tit h2{ font-size: 28px; margin-bottom: 8px; }
.reg-form-tit p{ opacity: 0.6;}
.reg-item{ margin-bottom: 15px;}
.reg-tit { font-size: 16px;}
.reg-tit span{ color: #f85029; margin-left: 5px;}
.reg-con { background-color: #f5f7f9; margin-top: 6px; height: 44px; overflow: hidden; border-radius: 51px; }
.reg-input { background-color: transparent; margin: 1px 15px; height: 44px; border: none; width: calc(100% - 20px); }
.reg-opera a.submit-btn{ display: block; text-align: center; height: 46px; line-height: 46px; border-radius: 50px; background-image:linear-gradient(to right,#1be0c3,#09c7ab); color: #fff; }
.reg-tip{ margin-top: 15px; font-size: 14px; text-align: center; padding-bottom: 15px;}
.reg-opera{ margin-top: 20px;}
.reg-flex{ display: flex; align-items: center; }
.reg-flex a{ width: 150px; text-align: center; height: 40px; line-height: 40px; color: #09c7ab;}
.reg-flex input{ width: calc(100% - 150px);}
.reg-flex img{ height: 38px;}

.user-agree{ font-size: 15px; display: flex; align-items: center; }
.user-agree p{ margin-left: 6px;}
.user-agree p a{ color: #09c7ab;}
.checkbox{ background: url(../images/checkbox-grey.svg) no-repeat center center; background-size: 20px 20px; width: 20px; height: 20px; }
.checkbox.active{ background: url(../images/checkbox.svg) no-repeat center center; }

.desktop-wrap{ padding: 15px;}
.account-info a{ display: flex; align-items: center; background: url(../images/right.svg) no-repeat center right; background-size: 26px 26px; }
.account-logo{ width: 56px; height: 56px; border-radius: 56px; overflow: hidden; }
.account-txt{ width: calc(100% - 66px); margin-left: 10px; color: #fff; }
.account-txt h2{ margin-bottom: 5px; }
.account-txt p span{ position: relative; margin-left: 20px; background-color: #fff5c7; color: #9f671f; padding: 1px 10px 1px 24px; border-radius: 30px; font-size: 14px;}
.account-txt p span img{ position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 28px;}

.money-wrap{ margin-top: 15px; padding: 15px; background-image: linear-gradient(#d7fcf4,#fff,#fff); overflow: hidden; border-radius: 8px; }
.money-wrap h3{ font-weight: normal; margin-bottom: 10px; }
.money-info{ }
.money-info h4{ font-size: 30px; margin-top: 8px; }
.money-info h4 em{ font-size: 16px; margin-right: 3px;}
.my-money{ display: flex; align-items: center;  opacity: 0.6;  }
.my-money img{ width: 30px; height: 30px; margin-right: 10px; } 
.my-money b{ color: #FF2B2B; font-size: 20px; margin-left: 15px;}
.my-money b::before{ content: ""; font-size: 14px; margin-right: 5px;}
.my-money b em{ font-size: 13px; font-weight: normal; margin-left: 3px;}
.exp-date{  font-size: 14px; margin: 5px 0; }
.money-opera{ margin-top: 10px; display: flex; align-items: center; border-top: 1px #eee dashed; padding-top: 10px; }
.money-opera a{ width: calc(50% - 10px); text-align: center; margin-right: 10px; padding:10px 15px; border-radius: 60px;}
.money-opera a.recharge-btn{ background-image: linear-gradient(to right,#1be0c3,#09c7ab);  color: #fff; }
.money-opera a.recharge-btn:hover,.money-opera a.view-btn:hover{ color: #09c7ab; }
.money-opera a.view-btn{ border: 1px #09c7ab solid; color: #09c7ab; }

.report-wrap{ margin-top: 15px; background-color: rgba(255, 255, 255, 0.8); padding: 15px; border-radius: 8px;}
.report-wrap h3{ display: flex; align-items: center; margin-bottom: 10px; }
.report-wrap h3 a{ width: 120px; text-align: right; font-weight: normal; font-size: 14px; color: #09c7ab; }
.report-wrap h3 b{ width: calc(100% - 120px); }

.package-item ul{ margin-top: 15px;}
.package-item li{ padding:8px 0; display: flex; align-items: center; }
.package-item li:nth-child(2n){ border-bottom: 1px #d5dce1 dashed;}
.package-item li span{ width: 50%; opacity: 0.7;}
.package-item li b{ font-size: 18px; width: 50%; text-align: right; }
.package-item li b i{ font-style: normal; font-weight: normal; font-size: 14px; margin-left: 5px; }
.payment dl{ height: 64px; border-radius: 8px; margin-bottom: 10px; background-image: linear-gradient(#effffc,#fff); padding: 15px; border: 1px #cef1ec solid; display: flex; align-items: center;}
.payment dl dd{ opacity: 0.1; width: 30%; text-align: right;}
.payment dl dd img{ width: 24px; height: 24px;}
.payment dl.active dd{ opacity: 1;}
.payment dl.active{ border: 1px #09c7ab solid; }
.payment dt{ width: 70%; display: flex; align-items: center; }
.payment dt span{ margin-left: 5px; padding: 1px 10px; font-size: 12px; border-radius: 10px 0 10px 0; background-color: #ff8a8a; color: #fff;}
.payment dt img{ width: 20px; height: 20px; margin-right: 8px; }
.corp-info{ background-color: #eef2ff; padding: 15px; border: 1px #cad5ff solid; border-radius: 8px;}
.corp-info h3{ display: flex; align-items: center; font-size: 16px; margin-bottom: 10px; }
.corp-info h3 span{ width: 60%;}
.corp-info h3 a{ width: 40%; text-align: right; font-weight: normal; }
.corp-info ul{ background-color: #fff; border-radius: 8px; padding: 10px; }
.corp-info li{ padding: 4px 0; display: flex; align-items: center; }
.corp-info li span{ width: 90px;}
.corp-info li b{ font-weight: normal; width: calc(100% - 90px);}
.corp-info p{ margin-top: 10px; padding-top: 10px; color: #FF3939; border-top: 1px #cad5ff dashed;}
.package-tip p{ position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.3; }
.package-tip p::before{ content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: 6px; border-radius: 8px; background-color: #09c7ab; border: 3px #dbfef9 solid; }
.package-opera{ max-width: 640px; margin: 0 auto; border-top: 1px #f2f6fc solid; display: flex; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 8; background-color: #fff;}
.package-opera .pay-money{ width: 50%; padding: 0 15px;}
.package-opera a{ width: 50%; padding: 15px 0; font-size: 18px; text-align: center; background-image: linear-gradient(to right,#1be0c3,#09c7ab); color: #fff;}
.package-opera .pay-money b{ color:#FF3939; font-size: 20px;}
.package-opera .pay-money b::before{ content: "¥"; margin-right: 5px; font-size: 14px;}

.pay-wrap{ text-align: center; background-color: rgba(255, 255, 255, 0.7); margin-bottom: 15px; border-radius: 8px; padding: 15px; }
.pay-wrap .pay-img{ width: 80px; margin: 40px auto 10px;}
.pay-wrap h3{ margin-bottom: 10px;}
.pay-wrap p{ opacity: 0.8;}
.pay-opera{ display: flex; flex-wrap: wrap; width: 180px; margin: 15px auto 0;}
.pay-opera a{ width: 100%; margin-bottom: 10px; padding: 10px 0; border: 1px #09c7ab solid; color: #09c7ab; border-radius: 50px;}
.pay-opera a.pay-btn{ background-image: linear-gradient(to right,#1be0c3,#09c7ab); color: #fff; border: none; }

.pay-config{ max-width: 560px; margin: 0 auto; position: fixed; left: 40px; right: 40px; top: 50%; z-index: 12; transform: translateY(-50%); background-color: #fff; border-radius: 8px;}
.pay-config p{ padding: 25px;}
.pay-config-opera{ display: flex; align-items: center; border-top: 1px #cad5ff solid; }
.pay-config-opera a{ padding: 12px 0; width: 50%; text-align: center; }
.pay-config-opera a:nth-child(1){ color: #3777fe; border-right: 1px #cad5ff solid; } 
.pay-wrap ul{ margin: 10px auto; background-image: linear-gradient(#effffc,#fff,#fff); border: 1px #f2f6fc solid; border-radius: 8px; padding: 10px;}
.pay-wrap li{margin: 8px 0; display: flex;  text-align: left; }
.pay-wrap li span{ width: 90px; opacity: 0.7;}
.pay-wrap li b{ width: calc(100% - 90px); font-weight: normal; }
.pay-wrap ul h3{ display: flex; align-items: center;}
.pay-wrap ul h3 b{ width: 50%; text-align: left;}
.pay-wrap ul h3 a{ width: 50%; text-align: right; font-weight: normal; color: #09c7ab; }

.corp-money{ display: flex; align-items: center; padding: 0 15px; background: url(../images/bg-money.png) no-repeat; background-size: 100% auto; border-radius: 8px; min-height: 80px;}
.corp-num{ position: relative; width: calc(100% - 120px); padding-left: 58px;}
.corp-num p{ color: #2A0400; font-size: 14px; opacity: 0.7;}
.corp-num h3{ color: #FF3519; font-size: 20px; margin-top: 6px;}
.corp-opera{ width: 120px; text-align: right;}
.corp-opera a{ background-color: #F5CC87; color: #2A0400; padding: 8px 15px; border-radius: 6px;}
.record-wrap{ }
.record-tit{ margin: 0 0 10px; font-size: 16px; opacity: 0.5; font-weight: normal; }
.record-body{ }
.record-item{ padding: 15px; margin-bottom: 15px; border-radius: 8px; background-image: linear-gradient(#effffc,#fff,#fff); border: 1px #deece9 solid; position: relative; }
.record-item dl{ display: flex; align-items: center; margin-bottom: 4px;  }
.record-time dt{ width: 70%; font-weight: normal; opacity: 0.6; }
.record-time dd{ width: 30%; text-align: right;}
.record-pack dt{ width: 70%; font-size: 18px; position: relative; }
.record-pack dt::before{ content: ""; position: absolute; left: -15px; top: 5px; width: 4px; height: 18px; border-radius: 0 3px 3px 0; background-color: #09c7ab; }
.record-pack dd{ width: 30%; text-align: right; font-weight: bold; }
.record-order dt{ width: 70%; font-weight: normal; opacity: 0.6; }
.record-order dd{ width: 30%; text-align: right; }
.record-deadline{ border-top: 1px #ddd dashed; padding-top: 10px; }
.record-deadline dd { display: flex; align-items: center; }
.record-deadline dd img{ width: 20px; height: 20px; margin-right: 5px; }

.more-data{ padding: 20px 0; text-align: center;}
.more-data a{ background-color: #effffc; border-radius: 50px; padding: 7px 20px; font-size: 15px; opacity: 0.7; }
.none-data{ border-radius: 8px; background-image: linear-gradient(#effffc,#fff); text-align: center; padding: 30px 0; opacity: 0.7; }
.none-data img{ width: 300px; }
.corp-photo{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }

.account-wrap{ background-color: rgba(255, 255, 255, 0.7); min-height: calc(100vh - 30px); border-radius: 8px; padding: 15px; }
.account-item{ padding: 10px; border-bottom: 1px #eee solid; }
.account-item label{ opacity: 0.8; margin-bottom: 10px; }
.account-item label span{ color: #FF3519; margin-right: 6px; }
.account-con{ margin-top: 5px; }
.account-con p{ margin-bottom: 8px; }
.account-con p:nth-child(1){margin-bottom: 16px; }
.account-con p a{ margin-top: 20px; background-color: #09c7ab; color: #fff; padding: 8px 25px; border-radius: 80px; }
.logout{  padding: 10px; margin-top: 20px; }
.logout a{ display: block; text-align: center; background-color: #09c7ab; color: #fff; padding: 10px 0; border-radius: 80px; }
.pw-control{ border-radius: 40px; height: 46px; background-color: #edeff0; padding: 0 15px; position: relative; }
.pw-control input{ margin: 0 5px; height:44px; width: calc(100% - 10px); border:none; background-color: transparent; }
.pw-code{ position: absolute; right: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 15px; overflow: hidden; }
.pw-code img{ max-height: 44px; }
.pw-code a{ color: #09c7ab; }

.protocol-wrap{ position: fixed;  bottom: 0; top: 100px; left: 0; right: 0; max-width: 640px; margin: 0 auto; z-index: 12; border-radius: 10px 10px 0 0; background-color: #fff; overflow: hidden; }
.protocol-body p{ text-indent: 2rem; }
.protocol-body h1{ font-size: 20px; margin: 10px 0;  }
.protocol-body h2{ font-size: 16px; }
.protocol-body { height: calc(100% - 51px); padding: 20px; overflow-y: auto; }
.protocol-head{ border-bottom: 1px #eee solid;  }
.protocol-head h1{ font-size: 20px; padding: 0 20px; height: 50px; line-height: 50px;   display: flex; align-items: center; }
.protocol-head h1 span{ width:calc(100% - 30px); }
.protocol-head h1 a{ width: 30px; text-align: right; }
.protocol-head h1 img{ width: 25px; height: 25px; }
.protocol-layer{ display: none; }
.form-control{ box-shadow: inset 0 1px 1px rgba(0,0,0,0); }
.form-control:focus{ box-shadow: none; }
.return-btn{ position: fixed; left: 10px; top: 70px; z-index: 9; height: 44px;  }
.return-btn a{ width: 44px; height: 44px; border-radius: 50px; background-color: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.return-btn a img{ width: 24px; height: 24px; }

.page-home{ background-color: #f2f4f3;
	      background-image:
	        radial-gradient(circle at top left, rgba(33, 204, 171, 1), transparent 42%),
	        radial-gradient(circle at top right, rgba(23, 165, 224, 1), transparent 45%),
	        linear-gradient(to bottom, rgba(33, 191, 193, 0.5), rgba(33, 191, 193, 0.5) 38%); background-size: 100% 150px; background-repeat: no-repeat;  }
.page-login{ background-color: #fff;
	      background-image:
	        radial-gradient(circle at top left, rgba(33, 204, 171, 1), transparent 42%),
	        radial-gradient(circle at top right, rgba(23, 165, 224, 1), transparent 45%),
	        linear-gradient(to bottom, rgba(33, 191, 193, 0.5), #fff 38%); background-size: 100% 420px; background-repeat: no-repeat;   }
.record-info .nav-tabs{ margin-top: 10px; border-bottom: none; }
.record-info .nav-tabs>li{ margin-bottom: 0px;}
.record-info .nav-tabs>li>a{ border:none}
.record-info .nav-tabs>li.active>a, .record-info .nav-tabs>li.active>a:focus, .record-info .nav-tabs>li.active>a:hover{ border: none; }
.record-info .nav-tabs>li.active>a{ background-color: rgba(255, 255, 255, 0.7);}

.record-money em{ padding: 2px 10px; border-radius: 50px; }

/* 新布局：套餐选择模块样式 */
.package-wrap{ background-color: rgba(255, 255, 255, 0.7); margin-bottom: 15px; border-radius: 8px; padding: 15px;}
.package-wrap h2{ position: relative; font-size: 18px; margin-bottom: 15px;}
.package-wrap h2::before{ content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; border-radius: 0 5px 5px 0; background-color: #09c7ab;}

.suggest-package{ position: relative; display: flex; align-items: center; padding: 20px 10px 10px; background-image: linear-gradient(#feebcf,#fefdfd); border-radius: 20px; border: 1px #feeed2 solid; }
.suggest-package.active{ border: 1px #e92e28 solid; }
.sp-img{ width: 110px;}
.sp-intro{ width: calc(100% - 120px); margin-left: 10px;}
.sp-intro h3{ color: #6b2303; font-size: 22px; }
.sp-intro h3 em{ font-size: 16px; font-weight: normal; margin-left: 5px; color: #561005;}
.sp-intro h4{ margin: 5px 0; font-size: 28px; color: #e92e28;}
.sp-intro h4 em{ font-size: 16px;}
.sp-intro h4 span{ margin-left: 5px; font-size: 16px; color: #6b2303;}
.sp-intro p{ margin-top: 10px; }
.sp-intro p span{  border: 1px #dba869 solid; color: #561005; border-radius: 80px; padding: 4px 15px; }
.sp-intro p span em{ color: #e92e28;}
.sp-mark{ position: absolute; left: -2px; top: -2px; }
.sp-mark img{ width: 100px;}

.more-package-title{ margin: 15px 0; text-align: center; }
.more-package-title img{ width: 220px;}
.more-package ul{ display: flex; flex-wrap: wrap; }
.more-package ul li{ width: calc(50% - 5px); padding: 10px; margin-bottom: 10px; background-image:linear-gradient(#f2fffc,#fff); border-radius: 8px; border: 1px #bcf1e9 solid; }
.more-package ul li:nth-child(odd){ margin-right: 10px; }
.more-package li dl{ display: flex; align-items: center; }
.more-package li dt{ width: 60px; margin-right: 10px;}
.more-package li dd{ width: calc(100% - 70px);}
.more-package li dd h4{ opacity: 0.8; margin: 5px 0;  font-size: 15px; font-weight: normal; }
.more-package li dd h3{ font-size: 24px; color: #07443b;}
.more-package li dd h3 em{ font-size: 16px; margin-right: 3px; }
.more-package li h5{ margin-top: 15px; font-size:18px}

.more-package ul li p{ margin: 10px 0 5px; font-size: 13px; }
.more-package ul li p span{  border-radius: 80px; padding: 4px 10px; }
.more-package ul li p span em{ color: #e92e28;}
.more-package ul li.active{ border: 1px #09c7ab solid; }

.reward-title dl{ display: flex; align-items: center; }
.reward-title dt{ width: calc(100% - 150px); }
.reward-title dd{ width: 150px;}
.reward-title dt h2{ color: #56321e; font-size: 22px; margin-bottom: 5px; }
.reward-title dt h2 span{ color: #e92e28; margin-right: 3px; }
.reward-title dt p{ font-weight: normal;}
.reward-title dt p span{ color: #e92e28; font-weight: bold; margin-left: 5px; }

.pay-wechat{ margin: 0 10px; display: flex; justify-content: center; }
.pay-wechat a{ width: calc(50% - 10px); margin: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 40px; border: 1px #3777fe solid; background-color: #fff; color: #3777fe; height: 40px; }
.pay-wechat a.wechat-btn { background-color: #3777fe; color: #fff;  }

.gt-account dl{ display: flex; align-items: center; padding: 6px 0;}
.gt-account dt{ width: 100px;font-weight: normal; opacity: 0.6; }
.gt-account dd{ width: calc(100% - 110px); margin-left: 10px;}
.gt-account dd a img{ width: 20px; height: 20px;}

.mask{ position: fixed; top: 0; bottom: 0; left: 0; right: 0;  max-width: 640px; margin: 0 auto; z-index: 9; background-color: rgba(0, 0, 0, 0.6); }
.pay-none{ text-align: center; display: flex; flex-direction: column; margin-bottom: 15px;}
.pay-none img{ width: 80px; margin: 6px auto; }
.pay-none p{ opacity: 0.6;}
.pay-none p span{ color:#09c7ab; font-weight: bold; }