@charset "utf-8";

/* --- 公用样式 --- */
* {-webkit-tap-highlight-color:transparent;}
html,body{margin:0 auto; position:relative; /*max-width:750px;*/}
.icon{font-family:iconfont;}
i{line-height:1; width:auto; display:block;}
span{display:block;}
.wrap{max-width:750px; margin:0 auto;}
input{-webkit-user-select:text !important; display:block; cursor:pointer;}
button{display:block; cursor:pointer;}
img{display:block;}
a{cursor:pointer;}
em,i,p,span{line-height:100%;}


/* --- 头部 --- */
.page-header{height:.8rem; display:flex; align-items:center; background:#333;}

/* 返回 */
.page-header .back{width:15%; text-align:center; font-size:.32rem; position:relative; z-index:500;}
.page-header .back a{color:#fff; display:block;}

/* 标题 */
.page-header h1{ text-align:center; font-size:.28rem; font-size:.28rem; color:#fff; font-weight:bolder; position:absolute; left:0; top:0; line-height:.8rem; width:100%;}

/* 关闭 */
.page-header .close{width:15%; margin-left:auto; text-align:center; font-size:.36rem; color:#fff; cursor:pointer; position:relative; z-index:200;}




/* --- 弹出 --- */
.pop-back{background:#000; left:0; top:0; width:100%; height:100%; position:fixed; background-color:rgba(0,0,0,0.3); }


@media only screen and (orientation:portrait ) {
	/* --- 支付 --- */
	.pop-pay{position:fixed; left:10%; top:25%; right:0; bottom:0; background:#fff; width:80%; height:45%; border-radius:.15rem; padding-top:.25rem; z-index: 10}
	.pop-pay .title{text-align:center; padding:.3rem 0; font-size:.36rem; font-weight:bolder; margin-bottom:.25rem;}
	.pop-pay .amount{text-align:center; font-size:.28rem; color:#999; border-top:1px solid #efefef; border-bottom:1px solid #efefef; background:#f9f9f9;}
	.pop-pay .amount b{font-size:.36rem; color:#FF0004;}
	.pop-pay .item{border-bottom:1px solid #efefef; padding:.3rem; font-size:.28rem; display:flex; align-items:center; cursor:pointer;}
	.pop-pay .item .icon{width:.5rem; margin-right:.25rem;}
	.pop-pay .check{margin-left:auto; background:url(https://sgslg.panguhy.com/svg/choice-no.svg) no-repeat center center; width:.3rem; height:.3rem; background-size:cover;}
	.pop-pay .item.active .check{ background:url(https://sgslg.panguhy.com/svg/choice-yes.svg) no-repeat center center; width:.3rem; height:.3rem; background-size:cover;}
	.pop-pay .btn{padding:.5rem;}
	.pop-pay .btn a{display:block; background: linear-gradient(to right, #f60 , #f90); height:.8rem; line-height:.8rem; border-radius:1rem; text-align:center; color:#fff; font-size:.32rem; font-weight:bolder;  box-shadow: 0 3px 8px #eee;}
	.pop-pay .close{position:absolute; right:.35rem; top:.35rem; cursor:pointer;}
	.pop-pay .close img{width:.3rem;}

}
@media only screen and (orientation:landscape ) {
	/* --- 支付 --- */
	.pop-pay{position:fixed; left:20%; top:2%; right:0; bottom:0; background:#fff; width:60%; height:96%; border-radius:.15rem; z-index: 10}
	.pop-pay .title{text-align:center; padding:.1rem 0; font-size:.26rem; font-weight:bolder; }
	.pop-pay .amount{text-align:center; font-size:.18rem; color:#999; border-top:1px solid #efefef; border-bottom:1px solid #efefef; background:#f9f9f9;}
	.pop-pay .amount b{font-size:.20rem; color:#FF0004;}
	.pop-pay .item{border-bottom:1px solid #efefef; padding:.15rem; font-size:.20rem; display:flex; align-items:center; cursor:pointer;}
	.pop-pay .item .icon{width:.4rem; margin-right:.25rem;}
	.pop-pay .check{margin-left:auto; background:url(https://sgslg.panguhy.com/svg/choice-no.svg) no-repeat center center; width:.3rem; height:.3rem; background-size:cover;}
	.pop-pay .item.active .check{ background:url(https://sgslg.panguhy.com/svg/choice-yes.svg) no-repeat center center; width:.3rem; height:.3rem; background-size:cover;}
	.pop-pay .btn{padding:.15rem; width:50%; padding-left:25%;}
	.pop-pay .btn a{display:block; background: linear-gradient(to right, #f60 , #f90); height:.5rem; line-height:.5rem; border-radius:1rem; text-align:center; color:#fff; font-size:.22rem; font-weight:bolder;  box-shadow: 0 3px 8px #eee;}
	.pop-pay .close{position:absolute; right:.35rem; top:.15rem; cursor:pointer;}
	.pop-pay .close img{width:.25rem;}
}


/*竖屏*/
@media only screen and (orientation:portrait ) {
	/* --- 框架 --- */
	.page-login .content{background:#fff; width:70%; position:fixed; z-index:200; left:15%; border-radius:.15rem; top:35%; overflow:hidden; box-shadow: 0 .1rem .3rem #333;}
	.page-login .content .hd{ padding:.3rem; background:#E6F0FF; margin-bottom:.35rem; border-bottom:1px solid #D5E2FF; box-shadow: 0 .1rem .1rem #F0F5FF; }
	.page-login .content .bd .box .button{display:flex; align-items:center; justify-content:space-between; margin-top:.35rem; margin-bottom:.25rem;}
	.page-login .content .bd .box .button button{width:45%; height:.75rem; border-radius:1rem; border:none; font-size:.28rem;}
}
/*横屏*/
@media only screen and (orientation:landscape) {
	/* --- 框架 --- */
	.page-login .content{background:#fff; width:60%; position:fixed; z-index:200; left:20%; border-radius:.15rem; top:2%; overflow:hidden; height: 96%; box-shadow: 0 .1rem .3rem #333;}
	.page-login .content .hd{ padding:.05rem; background:#E6F0FF; margin-bottom:.1rem; border-bottom:1px solid #D5E2FF; box-shadow: 0 .1rem .1rem #F0F5FF; }
	.page-login .content .bd .box .button{display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem;}
	.page-login .content .bd .box .button button{width:45%; height:.55rem; border-radius:1rem; border:none; font-size:.28rem;}
}
/* ------ 登录 ------ */
.page-login{background:url(../images/login-back.jpg) no-repeat center top; background-size:cover; height:100vh; position:relative;}
.page-login:after{content:""; background:#000; left:0; top:0; position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,0.5); }


/* --- 切换 --- */

.page-login .content .hd ul{display:flex; align-items:center; justify-content:space-between; border-radius:1rem; padding:.15rem; background:rgba(13,94,255,.2); background:#3375FF; box-shadow: .1rem .1rem .2rem #AEC9FF; }
.page-login .content .hd ul li{width:50%; text-align:center;  display:flex; align-items:center; justify-content:center; font-size:.28rem; border-radius:1rem; color:#0D5EFF; height:.6rem; color:#fff; font-weight:bolder;}
.page-login .content .hd ul li.on{ color:#fff; background:#fff; box-shadow: .1rem .1rem .2rem #0045D5; color:#333; color:#0D5EFF;}

/* --- 内容 --- */
.page-login .content .bd{}
.page-login .content .bd .box{padding:0 .3rem; padding-bottom:.1rem;}
.page-login .content .bd .box .item{ border-radius:1rem; margin-bottom:.2rem; height:.65rem; display:flex; align-items:center; border:1px solid #ddd; transition:all .3s; position:relative;}
.page-login .content .bd .box .item .icon{width:15%; text-align:center; font-size:.32rem; color:#999;}
.page-login .content .bd .box .item .input{width:85%;}
.page-login .content .bd .box .item .input input{width:100%; border:none; height:.65rem; font-size:.24rem; background:none;}
.page-login .content .bd .box .item .verification{position:absolute; top:0; right:.15rem; display:flex; align-items:center; height:100%;}
.page-login .content .bd .box .item .verification input{font-size:.24rem; background:#EBF1FE; color:#0D5EFF; border-radius:1rem; border:none; padding:.08rem .2rem}

/* --- button --- */


.page-login .content .bd .box .button button:nth-child(1){background:#3375FF; color:#fff; box-shadow: .1rem .1rem .2rem #DDE8FF; }
.page-login .content .bd .box .button button:nth-child(2){background:#EBF1FE; color:#0D5EFF;}
	
/* --- hover --- */
.page-login .content .bd .box .item:hover{border:1px solid #3375FF;}
.page-login .content .bd .box .item:hover .icon{ color:#3375FF;}





/* ------ 首页 ------ */
.page-home{position:relative;  height: 100vh; overflow: hidden;}


/* --- 付款 --- */
.game-pay{position:absolute; left:30%; top:3%; background:#FAFF43;  color:#333; padding:.15rem .2rem; font-size:.28rem; border-radius:.15rem; }



/* --- 游戏 --- */
.page-game{ height:100vh; overflow:hidden;}


/* --- 用户后台 --- */
.page-user{height:100vh; width:0%; position:fixed; left:0; top:0; z-index:2;}

/* 关闭 */

.page-user .drag-close .icon{width:1rem; height:1rem; background:linear-gradient(to bottom, #0D5EFF , #286FFF); color:#fff; text-align:center; line-height:1rem; border-radius:1rem; font-size:.52rem; box-shadow: .1rem .1rem .3rem #ACC7FF;}



/* --- 拖动 --- */
/*竖屏*/
@media only screen and (orientation:portrait ) {
	.page-drag{ width:1rem; height:1rem; position: absolute; font-size:.56rem;  text-align:center; line-height:1rem; color:#fff; border-radius:1rem; border:.05rem solid rgba(255,255,255,0.8); text-align:center; display:flex; align-items:center; justify-content:center; left:-.45rem; top:.3rem; background:url(../images/tuodong.svg) no-repeat center center #7a801b; opacity:0.3; background-size:.56rem .56rem; box-shadow: 0 .2rem .8rem #d4b034;  cursor:pointer; z-index:1;}
	.page-user .drag-close{position:absolute; right:-.5rem; top:45%; display:none;  cursor:pointer;}
}
/*横屏*/
@media only screen and (orientation:landscape) {
	.page-drag{ width:0.5rem; height:0.5rem; position: absolute; font-size:.56rem;  text-align:center; line-height:1rem; color:#fff; border-radius:1rem; border:.05rem solid rgba(255,255,255,0.8); text-align:center; display:flex; align-items:center; justify-content:center; left:-.35rem; top:.3rem; background:url(../images/tuodong.svg) no-repeat center center #7a801b; opacity:0.3; background-size:.56rem .56rem; box-shadow: 0 .2rem .8rem #d4b034;  cursor:pointer; z-index:1;}
	.page-user .drag-close{position:absolute; right:-.5rem; top:45%; display:none;  cursor:pointer; zoom:60%}
}




/* --- 在线支付 --- */
.page-pay{position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; display:none; z-index:3;}


/* 支付金额 */
.pay-number{background:#fff;  border-bottom:.2rem solid #efefef;}
.pay-number ul{ display:flex; align-items:center;}
.pay-number ul li{width:50%; text-align:center; padding:.3rem; position:relative;}
.pay-number ul li .title{margin-bottom:.2rem; color:#999; font-size:.24rem;}
.pay-number ul li .number{font-size:.52rem; font-weight:bolder;}
.pay-number ul li .number.red{color:#FF103E;}
.pay-number ul li:nth-child(1):after{content:""; width:1px; height:50%; background:#efefef; left:100%; top:25%; position:absolute;}


/* 支付方式 */
.pay-way{background:#fff; margin-bottom:.5rem;}
.pay-way .choice{display:flex; align-items:center; height:1rem; border-bottom:1px solid #efefef; padding:0 .25rem; font-size:.28rem;}
.pay-way .choice .checkbox{appearance: none; -webkit-appearance: none; outline: none; display: none;}
.pay-way .choice .icon-xuanze{margin-left:auto; font-size:.36rem; color:#ccc;}
.pay-way .choice .icon-zhifubao{font-size:.36rem; margin-right:.2rem; color:#00A2EA;}
.pay-way .choice .icon-wxpay{font-size:.36rem; margin-right:.2rem; color:#00C800;}
.pay-way .choice .checkbox:checked+.icon-xuanze{ color:#0D5EFF;}
.pay-way .choice:active{background:#f9f9f9;}


/* 弹出 */
.pay-pop{position:fixed; left:0; top:0; width:100%; height:100%; display:none; z-index:1000;}





/* --- 按钮 --- */
.pay-button{position:fixed; bottom:0; left:0; width:100%; background:#F00000;}
.pay-button button{width:100%; height:1rem;  background:#0D5EFF; border:none; color:#fff; font-size:.32rem;}