@import "https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap";


body,
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	font-family: "Noto Sans SC",Roboto, SF Pro Text, Poppins, Peach Crush, Roboto, SF Pro TC, SF Pro Text, PingFang TC, Noto Sans TC, sans-serif;
	font-size: 14px;
	font-weight: normal;
	overflow-x: hidden;
}

h3{
	font-size: 1rem;
}


#app{
	display: none;
}

#loading{
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;

}

.bind-btn{
    width: 100%;
    border-radius: 10px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #25b09b;
  animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.loader::after {
  margin: 8px;
  animation-duration: 3s;
}
@keyframes l15{ 
  100%{transform: rotate(1turn)}
}


.bg-white{
	background-color: rgba(248,249,250);
}

.header{
	display: flex;
	padding: 1.5rem 0 3rem 0;
	
	background-color: #05a6a4 !important;
	color:#fff;
	align-items: center;
}

.wd50{
	width: 50%;
}

.header-l{
	padding-left: 5vw;
	display: flex;
	align-items: center;
}

.header-l .layui-icon{
	margin-right: 5px;
}

.header-r{
	text-align: right;
	padding-right: 5vw;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.header-bg-white{
	width: 35px;
	height: 35px;
	background-color: #fff;
	border-radius: 35px;
	color:#888;
	line-height: 35px;
	text-align: center;
	cursor: pointer;

}

.header-bg-white .layui-icon{
	font-size: 18px;
}

.header-bg-black{
	width: 35px;
	height: 35px;
	background-color: rgba(0,0,0,.75);
	border-radius: 35px;
	line-height: 35px;
	text-align: center;
	margin-left: 10px;
	cursor: pointer;

}

.header-bg-black .layui-icon{
	font-size: 16px;
}
.banner,.banner-list{
	border-radius: 15px;
}

.banner-list{
	width: 90%;
	position: relative;
	top: -25px;
}

.index-main-title{
	margin: 20px 0;
	width: 90%;
	margin: auto;
	height: 45px;
	line-height: 45px;

}

.index-main-title a{
	float: right;
	color:#05a6a4;
	font-size: 0.8rem;
}

.index-main-title span{
	font-size: 18px;
	color: #000;
	font-weight: bold;
}

.index-main{
	width: 90%;
	margin: auto;

}


.index-main-box{
	display: flex;
	padding:.8rem;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 .5rem 1rem rgba(33,37,41,.15)!important;
	margin-bottom: 15px;
	align-items: center;
}

.index-main-l{
	width: 175px;
}

.index-main-l img{
	width: 90%;
}


.index-main-r a{
	font-size: 0.8rem;
	color:#05a6a4;
	display: block;
	margin: 5px 0px;
}

.index-main-r p{
	font-size: 0.8rem;
}

.index-tips{
	width: 90%;
	margin: auto;
}

.index-tips-box{
	box-shadow: 0 .5rem 1rem rgba(33,37,41,.15)!important;
	padding:.8rem;
	background: #fff;
	border-radius: 15px;
	display: flex;
}

.index-tips-box .layui-icon{
	color:#05a6a4;
	font-size: 30px;
	position: relative;
	top: 5px;
}

.index-tips-r p{
	font-size: 13px;
	line-height: 25px;
	color: #000;
	padding: 0 20px;
}

.index-tips{
	margin-bottom: 100px;
}

.footer{
	width: 100vw;
	position: fixed;
	bottom: 0px;
	background-color: #fff;
	padding:10px 0;
	box-shadow: 0 -5px 5px 0 rgb(0 0 0 / 4%);
}

.footer-box{
	width: 95vw;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	text-align: center;
}

.footer-box-link .layui-icon{
	font-size: 21px;
}

.footer-box-link{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 13px;

}

.footer-link-active{
	color: #05a6a4!important;
}

.footer-box-link span{
	display: block;
	margin-top: 5px;
}

.banner-list img{
	width: 100%;
	border-radius: 15px;
}

.left-nav{
	width: 240px;
	z-index: 2;
	display: none;


}

.leftNav{
	border-radius: 15px!important;
	background: rgb(255,255,255,0.95);
}


.left-nav-box{
	width: 95%;
	margin: auto;
}

.left-nav-header{
	display: flex;
	flex-direction: row-reverse;
	margin: 15px 0;
	padding:15px;
	border-bottom: 1px solid #efefef;
}

.left-nav-header img{
	width: 50px;
	height: 50px;
	border-radius: 50px;
}

.left-nav-header-r{
	display: flex;
	flex-direction: column;
	width: calc(100% - 50px);
	margin-right: 15px;
	font-size: 13px;
}

.left-nav-header-r span:nth-child(1){
	color:#05a6a4 !important;
	font-weight: bold;
}

.left-nav-header-r span:nth-child(2){
	font-size: 1.3rem;
	color:#000;
	font-weight: 700;
}
.nav-version{
	
	margin-top: 5px;
}

.left-nav-list{
	padding-left: 15px;
}

.left-nav-ul li{
	margin-bottom: 20px;
	font-size: 0.8rem;
}

.left-nav-ul li a{
	display: flex;
	align-items: center;
}

.left-nav-ul li:last-child{
	margin-bottom: 15px;
}

.left-nav-ul span{
	display: block;
	margin-left: 8px;
}


.left-nav-ul .layui-icon{
	font-size: 0.8rem;
}

.left-nav-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	border-top: 1px solid #efefef;
	padding:9px 0;
}

.left-nav-footer-box{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.left-nav-footer-child{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.left-nav-footer-child span{
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
}

.left-nav-footer-child .layui-icon{
	font-size: 24px;
}

.page-header{
	
	background: linear-gradient(to right, #05a6a4, #00b8b6);
	padding: 1rem 0;
	background-size: cover;
}

.page-header .layui-icon{
	color:#fff;
}

.page-header-box{
	display: flex;
	align-items: center;
	width: 90%;
	margin: auto;
}

.page-header-r{
	display: flex;
	justify-content: flex-end;
}

.page-header-l .layui-icon{
	font-size: 20px;
}

.page-header-l{
	display: flex;
	align-items: center;
}

.page-header-title{
	display: flex;
	flex-direction: column;
	margin-left: 15px;

}

.page-header-title span:nth-child(1){
	color:#fff;
	font-size: 0.8rem;
}

.page-header-title span:nth-child(2){
	color:rgba(255,255,255,0.5);
	font-size: 12px;
}

.help-banner{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding:30px 0 15px 0;

}

.help-banner h2{
	color: #fff;
}

.help-banner p{
	color:#dadada;
	font-size: 13px;
	padding:10px 30px;
}

.help-contact{
	background-color: #ffc107;
	border:none;
	border-radius: 50px;
	padding:10px 40px;
	margin-top: 10px;

}

.contact-banner-box{
	width: 90vw;
	margin: auto;
	display: flex;
	margin-top: 20px;
	align-items: center;
}


.contact-banner-box img{
	width: 100%;
	border-radius: 15px;
}

.contanct-banner-r{
	padding-left:20px;
}

.contanct-banner-r p{
	font-size: 0.8rem;
	margin-top: 5px;
}

.help-faq{
	margin-top: 35px;
	margin-bottom: 100px;
}

.help-faq-box{
	width: 90vw;
	margin: auto;


}

.help-faq-list{
	margin-top: 10px;
	display: flex;
	flex-direction: column;
}

.help-faq-box h3{
	text-align: center;
	margin-bottom: 20px;
}

.help-faq-child{
	background-color: #fff;
	padding:10px 20px;
	border-radius: 15px;
	font-size: 0.8rem;
	cursor: pointer;
	margin-bottom: 15px;
}

.help-faq-child-title{
	padding:8px 0;
}

.help-faq-child-title .layui-icon{
	float: right;
}

.help-faq-child-content{
	border-top: 1px solid #efefef;
	padding:10px 0px;
	display: none;
}


.user{
	margin-top: 15px;
}

.user-box{
	width: 90vw;
	margin: auto;

}
.user-box-header{
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	border:1px solid #efefef;
	padding:15px 30px;
}

.user-box-header-img img{
	border-radius: 50px;
}
.user-box-header-info{
	display: flex;
	flex-direction: column;
	margin-left: 15px;

}

.user-box-header-info span:nth-child(1){
	color:#000;
	font-size: 15px;
}

.user-box-header-info span:nth-child(2){
	color:rgba(0,0,0,0.75);
	font-size: 13px;
	margin-top: 5px;
}

.user-box-child{
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	border:1px solid #efefef;
	padding:15px 30px;
	margin: 15px 0;
}


.user-box-child-info{
	display: flex;
	flex-direction: column;
	margin-left: 15px;

}

.user-box-child-info span:nth-child(1){
	color:#000;
	font-size: 0.8rem;
}

.user-box-child-info span:nth-child(2){
	color:rgba(0,0,0,0.75);
	font-size: 12px;
	margin-top: 5px;
}

.user-box-child-img .layui-icon{
	font-size: 24px;
}

.account{
	margin-top: 15px;
}

.account-box{
	width: 90vw;
	margin: auto;
}

.account-box-title{
	display: flex;
	font-size: 0.8rem;
	color: #000;
}

.account-box-title-r{
	text-align: right;
}

.account-box-list{
	margin-top: 15px;
}

.account-box-list-child,.account-box-list-child-l,.account-title,.account-box-list-child-r{
	display: flex;
	
}

.account-box-list-child,.account-box-list-child-l{
	align-items: center;
}

.account-title{
	flex-direction: column;
	margin-left: 10px;
	font-size: 13px;

}

.account-box-list-child-l{
	width: 70vw;
}

.account-box-list-child-r{
	font-size: 0.8rem;
	width: 30vw;
	justify-content: flex-end;
	text-align: right;
	align-items: center;
	color: #05a6a4;
	cursor: pointer;
}

.account-box-list-child-r .layui-icon{
	margin-right: 3px;
	font-size: 0.8rem;
}

.account-box-list-child{
	background-color: #fff;
	border-radius: 10px;
	padding: 15px 20px;
	border:1px solid #efefef;
	margin-bottom: 15px;
}

.account-title span:last-child{
	color: #05a6a4;
	margin-top: 3px;
	font-size: 12px;
}
.layui-icon-return{
	cursor: pointer;
}

.account-box-tips{
	border:1px solid #05a6a4;
	border-radius: 10px;
	padding: 15px 20px;
	margin-bottom: 15px;
	font-size: 0.8rem;
	background:rgba(5,166,164,0.1);
	color: #079694;
}

.account-box-tips a:first-child{
	color:#1d9c62;
	font-weight: 700;
	text-decoration: underline;
	font-size: 15px;
	margin-left: 5px;
	cursor: pointer;
}

.account-box-tips a:last-child{
	color:#05a6a4;
	font-weight: 700;
	text-decoration: underline;
	font-size: 15px;
	margin-left: 5px;
	cursor: pointer;
}

.choose-type{
	font-size: .85rem;
	height: 100%;
	width: 80vw;
	display: none;
}

.choose-type-box{
	width: 100%;
	margin: auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;

}

.choose-type-box p:first-child{
	font-size: 18px;
}

.choose-type-box p span{
	color:#f00;
}

.contact-kefu{
	font-size: .85rem;
	height: 100%;
	width: 80vw;
	display: none;

}

.contact-kefu-box{
	width: 100%;
	margin: auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	text-align: center;


}

.contact-kefu-box img{
	width: 100%;
	max-width: 240px;
	margin: auto;


}

.contact-kefu-box .p1{
	font-size: 13px;
	color:#05a6a4;
}

.contact-kefu-box .p2{
	font-size: 16px;
	padding-bottom: 25px;
	color: #F00;
	margin-top: 10px;
}



.choose-type-list,.choose-type-info{
	display: flex;
	flex-direction: column;
}

.choose-type-list{
	margin-top: 15px;
}

.choose-type-info{
	margin-left: 1rem;
	width: calc(100% - 70px);
}

.choose-type-list-child{
	display: flex;
	align-items: center;
	padding:.8rem;
	border:1px solid #efefef;
	border-radius: 10px;
	margin-bottom: 15px;
	cursor: pointer;
}

.choose-type-list-child img{
	width: 35px;
	height: 35px;
}

.choose-type-info span{
	font-size: 13px;
}

.choose-type-info span:nth-child(1){
	color: #198754;
	background:#d1e7dd;
	border-radius: 15px;
 	display: inline-block;
 	padding:0 10px;
}

.choose-type-list-child-wx{
	background: #cff4fc!important;
	color:#0dcaf0!important;
	display: inline-block;
	padding: 0 10px;
	border-radius: 15px;
}


.choose-type-info span:nth-child(2){
	font-size: 15px;
	color: #05a6a4;
	margin: 5px 0;
}


.dh-box{
	border-radius: 15px;
	display: flex;
	justify-content: center;

}

.dh-box .layui-layer-close2{
	top: 0;
	right: 0;
}

.left-nav-bottom{
	border-top:1px solid #efefef;
	padding:15px;
}

.left-nav-bottom span{
	font-size: 13px;
}

.left-nav-bottom ul{
	font-size: 0.8rem;
	margin-top: 15px;
}


.left-nav-bottom .layui-icon{
	margin-right: 5px;
}

.left-nav-bottom li{
	margin-bottom: 20px;
}
.left-nav-footer-copyright{
	padding: 0 15px;
	font-size: 12px;
	color: #9f9f9f;
}

.bind-qrcode{
	width: 90vw;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 25px 0 10px 0;
}

.bind-qrcode img{
	width: 65%;
}

.bind-vx{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bind-vx img{
	width: 120px;
	height: 120px;
	border-radius: 120px;
	margin-top: 10px;
}

.bind-vx p{
	font-size: 1.2rem;
	margin-top: 10px;

}

#vxBindForm{
	margin-top: 25px;
	margin-bottom: 25px;
}

#vxBindForm center{
	margin-top: 15px;
}

.change-money-header{
	width: 90%;
	margin:auto;
	display: flex;
	margin-top: 10px;

}

.change-money-header-r{
	text-align: right;
	color: #00b8b6;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.change-money-header-r .layui-icon{
	font-size: 12px;
}
.change-money-user{
	width: 90vw;
	margin:15px auto;
	background: #fff;
	border-radius: 10px;
}

.change-money-user-box{
	
	display: flex;
	align-items: center;
	padding:15px 15px;
	
	
}

.change-money-user-box img{
	border-radius: 50px;
}

.change-money-user-r{
	display: flex;
	flex-direction: column;
	margin-left: 15px;
}

.change-money-user-r span:first-child{
	font-size: 15px;
	color:#000;
}

.change-money-user-r span:last-child{
	font-size: 12px;
	margin-top: 5px;
}

.change-money-number{
	padding: 5px 15px;
	padding-bottom: 25px;

}

.change-money-number span{
	display: block;
	font-size: 13px;
	margin-bottom: 5px;

}

.change-money-tips,.change-money-info{
	width: 90vw;
	margin:25px auto;
}

.change-money-tips p{
	font-size: 13px;
	margin-bottom: 10px;
	color: #00b8b6;
	display: flex;
	align-items: center;
}

.change-money-tips .layui-icon{
	margin-right: 5px;
}

.red{
	color:red;
	font-weight: 700;
}

.change-money-info{
	background: #fff;
	border-radius: 10px;
}

.change-money-info-box{
	padding: 15px;


}

.change-money-info-child{
	font-size: 13px;
	display: flex;
	
}

.change-money-info-child span{
	width: 50%;
	display: block;
	margin-bottom: 5px;
}

.change-money-info-child span:last-child{
	text-align: right;
	float: right;
}



.change-money-btn{
	width: 90vw;
	margin:auto;
}

.change-money-btn button{
	width: 100%;
	padding:15px 0;
	background: #05a6a4;
	color:#fff;
	border:none;
	border-radius: 10px;
	font-size: 15px;
}

.contact-kefu{
	border-radius: 15px;
}

.wx-pay-icon{
	width: 24px;
	height: 24px;
	margin-right: 5px;
}

.account-title-bind span:nth-child(1){
	color:#198754;
	font-weight: 500;
}

.account-title-bind span:nth-child(2){
	color:#00ae65;
	font-size: 12px;
	margin-top: 3px;
}

.account-title-bind span:nth-child(3){
	color:#585b5e;
	font-size: 12px;
	margin-top: 5px;
}


.order{
	width: 90%;
	margin: auto;
	margin-bottom: 80px;
}

.order-user{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
}

.order-user img{
	width: 80px;
	height: 80px;
	border-radius: 80px;
	margin-bottom: 5px;
}

.order-count{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-top: 15px;

}

.order-count-child{
	width: 100%;
	border:1px solid #05a6a4;
	border-radius: 5px;
	background: rgba(5,166,164,0.1);
	text-align: center;
	padding:8px 0px;
	font-size: 0.9rem;
	color:#079694;
}

.order-list{
	
	
	width: 100%;
	margin-top:15px;
	display: flex;
	flex-direction: column;
}

.order-list-child{
	padding: 15px;
	display: flex;
	align-items: center;
	background: #fff;
	border:1px solid #efefef;
	border-radius: 5px;
	margin-bottom: 10px;
}

.order-list-child-content{
	display: flex;
	flex-direction: column;
	margin-left: 15px;

}

.order-list-child-content span:nth-child(1){
	color:#308865;
	font-size: 15px;
	font-weight: 500;
}

.order-list-child-content span:nth-child(2){
	color:#5e5e5e;
	font-size: 10px;
	font-weight: 500;
}

.order-list-child-l{
	width: 70%;
	display: flex;
	align-items: center;
}

.order-list-child-r{
	width: 30%;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.order-list-child-r b{
	font-size: 15px;
	color:#308865;
}

.order-list-child-r span{
	margin-left: 15px;
}

.payTips{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.payTips-top{
	margin-top: 55px;
	font-size: 16px;
}

.payTips-top-img{
	position: absolute;
	top: 15px;
	right: 20px;
}

.payTips-top-android{
	margin-top: 25px;
}


.payTips-mid{
	font-size: 16px;
	margin-top: 25px;
}

.payTips-qr{
	margin-top: 10px;
	max-width: 280px;
}


.alipay{
	display: none;
}

.alipay p{
	width: 80%;
	margin: auto;
	margin-top: 25px;
	text-align: center;
	color:red;
	font-size: 16px;
}

#alipay{
	width: 120px;
	text-align: center;
	background: #4e6ef2;
	padding:10px;
	display: block;
	border-radius: 5px;
	margin: auto;
	color: #fff;
	margin-top: 15px;

}

.wxpay p{
	width: 80%;
	margin: auto;
	margin-top: 25px;
	text-align: center;
	color:red;
	font-size: 16px;
}

#wxpay{
	width: 120px;
	text-align: center;
	background: #07c160;
	padding:10px;
	display: block;
	border-radius: 5px;
	margin: auto;
	color: #fff;
	margin-top: 15px;

}

.withrawal,.withrawal-tips-box{
    margin: auto;
    border-radius: 10px;
    background: #fff;
    padding: 15px;
    margin-bottom: 10px;
}

.withrawal-title{
    font-weight: 500;
}

.withrawal-money{
    margin-top: 10px;
    font-weight: 700;
    font-size: 16px;
    
}

.withrawal-money span{
    font-size: 24px;
    margin-left: 10px;
}

.withrawal-tips-box{
    display: flex;
    align-items: center;
}

.withrawal-tips-box img{
    margin-right: 15px;
}

.withrawal-tips{
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.withrawal-tips span:last-child{
    font-size: 10px;
    color:#999;
}

.withrawal-btn{
    width: 100%;
    border:none;
    background: #00b8b6;
    border-radius: 10px;
    color:#fff;
    height: 50px;
    margin-top: 10px;
}

.alipay-page{
    width:90%;
    margin: auto;
    text-align: center;
    margin-top: 35px;
}

.alipay-page p{
    color:red;
    font-size: 16px;
    font-weight: 700;
}

.alipay-page p:first-child{
    font-weight: 500;
}


.alipay-page button{
    width: 100%;
    border-radius: 5px;
    border:none;
    height: 45px;
    color:#fff;
    margin-top: 20px;
    background: #1e9fff;
}

.alipay-page img{
    width: 100%;
    margin-top: 20px;
    border-radius: 5px;
}

#second{
    margin: 0 5px;
}

#payment-wx{
    background: #16b777;
}


.qrcode-time{
    text-align: center;
    font-size: 15px;
    margin-bottom: 10px;
}


.payreturn{
	width: 90%;
	margin: auto;
	display: flex;
	flex-direction: column;
}

.payreturn-logo{
	width: 100%;
	text-align: center;
	margin-top: 20px
}

.payreturn-logo img{
	width: 75px;
	height: 75px;
	border-radius: 10px;
	border:2px solid #efefef;
	border-radius: 75px;
	padding:5px;

}

.payreturn-mch-title{
	text-align: center;
	font-size: 16px;
	color:#000;
	margin-top: 15px;
}

.payreturn-order{
	display: flex;
	flex-direction: column;
	
	width: 95%;
	margin: auto;
	margin-top: 30px;
}

.payreturn-order-child{
	display: flex;
	margin-bottom: 10px;
}

.payreturn-order-child span{
	font-size: 16px;
	width: 50%;
	color:#a9a9a9;
}

.payreturn-order-child span:last-child{
	text-align: right;
	color:#000;
}

.payreturn-line{
	border-top: 2px solid #efefef;
	margin-bottom: 10px;
}

.payreturn-big{
	font-size: 17px!important;
}

.payreturn-amount{
	font-size: 18px!important;
	font-weight: 500;
	letter-spacing: .3px;
}

.back-site{
	display: block;
	width: 95%;
	margin: auto;
	margin-top: 30px;
	background: #16b777;
	text-align: center;
	color:#fff;
	font-size: 16px;
	border-radius: 5px;
	height: 45px;
	line-height: 45px;
}

.back-site:active{
	color:#fff;
}