*{
	margin: 0;
	padding: 0;
	border: unset;
}
.mask,.mask2{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #929292;
	z-index: 10;
	display: none;
	top: 0;
    left: 0;
	opacity: 0.5;
}
.mask2{
	z-index: 21;
}
.frame{
	width: 74.5rem;
	/* height: 64.3rem; */
	background-color: white;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
	z-index: 20;
}
.frame-line{
	width: 1rem;
	height: 18.1rem;
	background-color: #0000ff;
	position: absolute;
    right: -1rem;
}
.frame-close{
	cursor: pointer;
	width: 10rem;
	height: 5rem;
	position: absolute;
    right: -15rem;
	background: url(../images/v2/world-window-close.png) no-repeat;
    background-size: cover;
}
.frame-body-title{
	font-size: 3rem;
	color: #707579;
	text-align: center;
	margin: 2rem 0;
    font-weight: bold;
}
.frame-body-content{
	margin: 3rem;
	font-size: 2.8rem;
	color: #404548;
	height: 42rem;
	overflow-y: scroll;
}
.frame-btn{
	width: 42.2rem;
	height: 6.4rem;
	margin: 0 auto;
	background-color: #1657D9;
	color: white;
	font-size: 3.4rem;
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	margin-bottom: 2rem;
}
.pay-tips-frame,.login-frame-code-input,.login-frame,.choose-account-frame,.pay-confirm-frame,.pay-code-frame,.pay-history-frame,.recharge-list,.tag4{
	display: none;
}
.login-frame-title{
	width: 21.4rem;
	height: 8.4rem;
	background: url(../images/v4/logo.png) no-repeat;
	background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 2rem;
}
.login-frame-content{
	height: unset;
}
.login-frame-type{
	font-size: 2.8rem;
	display: flex;
    justify-content: space-evenly;
    align-items: center;
	margin-bottom: 5rem;
}
.login-frame-type-txt{
	color: #676767;
	cursor: pointer;
	position: relative;
}
.login-type-check{
	color: #202226;
}
.login-type-check::after{
	content: "";
	background-color: #202226;
	width: 6.4rem;
	height: 0.3rem;
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	bottom: -0.5rem;
	border-radius: 0.2rem;
}
.login-frame-screct-input input,.login-frame-code-input input{
	width: 60.5rem;
    background-color: #F2F2F2;
    height: 7.6rem;
    font-size: 2.6rem;
    color: #9e9e9e;
    margin-bottom: 2rem;
    text-indent: 2rem;
    outline: none;
    margin-left: 4rem;
}
.login-frame-code-input input ~ .login-code{
	width: 36rem;
	float: left;
}
.login-frame-code-input .get-login-code{
	width: 23rem;
	margin-left: 1.5rem;
	color: #ffffff;
	background-color: #000000;
	text-indent: unset;
	cursor: pointer;
	height: 7.6rem;
    font-size: 2.6rem;
	display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
	float: left;
}
.check-server{
	margin-left: 4rem;
	width: 60.5rem;
	font-size: 2rem;
	color: #676767;
	float: left;
}
.check-server-input{
	-webkit-appearance: none; /* 去除默认样式 */
    -moz-appearance: none; /* 去除默认样式 */
    appearance: none; /* 去除默认样式 */
    width: 2.5rem; /* 方形的大小 */
    height: 2.5rem; /* 方形的大小 */
    background-color: white; /* 背景色 */
    border: 2px solid #000; /* 边框颜色和大小 */
    border-radius: 0; /* 去除圆角 */
    outline: none; /* 去除焦点时的轮廓 */
	position: relative;
	float: left;
	margin-top: 0.5rem;
}
.check-server-input:checked::after {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0.3rem; /* 根据需要调整 */
    left: 0.3rem; /* 根据需要调整 */
    width: 1.5rem; /* 根据需要调整 */
    height: 1.5rem; /* 根据需要调整 */
    background-color: #000; /* 选中时的背景色 */
}
.check-server-tips{
	margin-left: 4rem;
}
.pay-tips-content{
	font-size: 2rem;
	white-space: pre-line;
}
.check-server-tips a{
	color: #676767;
	cursor: pointer;
	text-decoration: none;
}
.login-frame-check{
	width: 60.2rem;
	margin-bottom: 1rem;
}
.login-frame-tips{
	font-size: 1.8rem;
    color: #676767;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 2rem;
    width: 60.2rem;
}
.choose-account-frame-content{
	height: 32.9rem;
}
.choose-account-frame-show{
	height: 7.6rem;
	/* width: 60.2rem; */
	background-color: #f2f2f2;
	color: #404548;
	text-align: center;
	line-height: 7.6rem;
	border: 1px solid #F2F2F2;
	position: relative;
	cursor: pointer;
}
.choose-account-frame-list{
	/* width: 60.2rem; */
	/* height:22.8rem; */
	font-size: 2.8rem;
	color: #404548;
	text-align: center;
	background-color: #f2f2f2;
	position: relative;
	cursor: pointer;
	overflow-y: scroll;
	border: 1px solid #F2F2F2;
	display: none;
}
.choose-account-frame-show:after{
	content: '▼';
	position: absolute;
	right: 0;
	top: 0;
	color: #aaa;
}
  
.choose-account-frame-list li{
	background-color: #FFFFFF;
	color: #989c9e;
	height: 7.6rem;
	line-height: 7.6rem;
	list-style: none;
	border: 1px solid #F2F2F2;
}
.choose-account-frame-list li:hover,.choose-account-frame-list li ~ .choose-account-frame-li-checked{
	background-color: #f2f2f2;
	color: #404548;
}
.pay-confirm-frame{
	width: 89rem;
}
.pay-confirm-title{
	font-size: 2.2rem;
	color: #707579;
}
.pay-confirm-frame-account{
	width: 76.3rem;
	background-color: #F2F2F2;
	margin: 0 auto;
	padding-bottom: 2.5rem;
}
.pay-confirm-frame-detail{
	margin-top: 2rem;
}
.pay-confirm-frame-account-title{
	font-size: 2.6rem;
	color: #202226;
	padding: 2.5rem 0 2rem 2.5rem;
	font-weight: bold;
}
.pay-info-group{
	padding-left: 2.5rem;
}
.pay-info-label{
	font-size: 2.2rem;
	color: #626966;
	display: inline-block;
}
.pay-info-value{
	font-size: 2.2rem;
	color: #202226;
	display: inline-block;
}
.pay-confirm-frame-check{
	display: flex;
}
.pay-confirm-frame-check .frame-btn{
	width: 28.4rem;
	margin-bottom: 5rem;
}
.pay-code-frame{
	z-index: 30;
}
.pay-code-title{
	width: 74.5rem;
	font-size: 2.8rem;
	font-weight: unset;
	color: #202226;
}
.pay-code-frame-content{
	height: 25.5rem;
}
.pay-code-frame-content img{
	width: 18rem;
	height: 18rem;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	border: 1px solid #AEB5B9;
}
.pay-end-content{
	text-align: center;
    color: red;
    margin: 2rem;
    font-size: 2.4rem;
}
.pay-res-content{
	color: red;
    font-size: 2.4rem;
}
.pay-history-frame{
	width: 89rem;
	height: 57.4rem;
}
.pay-history-title{
	font-size: 3rem;
	color: #707579;
}
.pay-history-title span{
	font-size: 2.2rem;
	margin-left: 1rem;
	color: #a2a2a2;
}
.pay-history-flush{
    font-size: 1.6rem;
    /* margin-left: 1rem; */
    color: #a2a2a2;
	position: absolute;
    right: 10rem;
    top: 6rem;
	display: flex;
    align-items: center;
	cursor: pointer;
	padding: 0.5rem 1rem;
}
.pay-history-flush:hover{
	background-color: #F2F2F2;
	color: #3d3b3b;
}
.pay-history-flush-img{
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
}
@keyframes rotate360 {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }
.rotating {
	animation: rotate360 0.3s linear; /* 2秒完成一个周期，线性速度 */
}
.pay-history-frame-list{
	background-color: #f2f2f2;
	height: 19.1rem;
	width: 76.3rem;
	margin: 0 auto;
}
.pay-history-frame-content{
	height: 45rem;
}
.pay-history-detail{
    line-height: 3.8rem;
    font-size: 2.4rem;
    overflow: hidden;
	margin-top: 2rem;
	text-indent: 4rem;
}
.pay-history-detail h3{
	font-size: 2.8rem;
	margin-top: 2rem;
}

.item h3 {
	color: #4a6ee0;
	margin-bottom: 0.8rem;
	font-size: 2.6rem;
}

.item p {
	color: #666;
	line-height: 1.5;
}
.item small {
	/* color: #989898; */
}

.end-message {
	text-align: center;
	padding: 2rem;
	color: #666;
	font-style: italic;
}
.error-message {
	text-align: center;
	padding: 2rem;
	color: #e74c3c;
	background: #ffeaea;
	border-radius: 0.8rem;
	margin: 1rem 0;
}
.loading {
	text-align: center;
	padding: 2rem;
	color: #666;
}
/* 设置滚动条的样式 */
#pay-history-list::-webkit-scrollbar {
	display: block;
    width: 0.5rem;
}
/* 滚动槽 */
#pay-history-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 1rem;
}
/* 滚动条滑块 */
#pay-history-list::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
#pay-history-list::-webkit-scrollbar-thumb:window-inactive {
    background: #4a6ee0;
}
/* 头部 */
.header{
	height: 8.8rem;
	width: 100%;
	background-color: white;
	z-index: 5;
	position: fixed;
	box-shadow: 0 0px 5px #c5c4c4;
}
.header-body{
	width: 80%;
	margin: 0 auto;
	display: flex;
    justify-content: space-between;
    align-items: center;
	height: 100%;
}
.logo{
    display: flex;
	align-items: center;
}
.line{
	margin: 0 2rem;
	height: 35px;
	width: 1px;
	background-color: #7e7e7e;
}
.pay-txt{
	font-size: 2.3rem;
}
.pay-menu-list{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.pay-menu-account,.pay-history{
	visibility: hidden;
}
.pay-menu-account{
	position: relative;
}
.pay-menu-account::after {
	content: '▼';
	position: absolute;
	right: -0.3rem;
	top: 3rem;
	color: #aaa;
}
.pay-menu-account:hover .pay-menu-account-exit{
	opacity: 1;
	top: 8rem;
}
.pay-menu-account-exit{
	font-size: 1.8rem;
	background-color: #1657D9;
	color: #ffffff;
	position: absolute;
	padding: 1rem 2.5rem;
    width: max-content;
	right: 0;
	top: 0;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	opacity: 0;
}
.pay-menu-account-exit::before {
	content: '';
	position: absolute;
	top: -2rem; /* 将三角形放在容器上方 */
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 2rem solid transparent;
	border-right: 2rem solid transparent;
	border-bottom: 2rem solid #1657D9;
}
.pay-menu{
	padding:3rem 2rem;
	font-size: 2.3rem;
	cursor: pointer;
}
.logo-img{
	width: 11.8rem;
	height: 4.4rem;
	background: url(../images/official_footer_mid_2.png) no-repeat;
	background-size: 100% auto;
}

/* 内容 */
.body{
    position: fixed;
    top: 0;
	/* bottom: 27.6rem; */
    left: 0;
	/* height: auto !important; */
	height: 100%;
    width: 100%;
    background: url(../images/official_news_bg.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
	overflow-y: overlay;
}
/* 隐藏滚动条 */
.body::-webkit-scrollbar,.frame-body-content::-webkit-scrollbar,.choose-account-frame-list::-webkit-scrollbar {
    display: none; /* 对于WebKit浏览器，使用display: none; */
}
.body-header{
	margin-top: 8.8rem;
	/* position: relative; */
}
.choose-game-list{
	width: 110.5rem;
	/* height: 57.3rem; */
	background-color: white;
	position: relative;
    left: 50%;
	top: 10rem;
    transform: translateX(-50%);
	padding-bottom: 5rem;
}
.gray-line{
	height:7rem;
	background-color: #e0e0e0;
}
.game-list{
	display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
	padding: 3rem 3rem 2.2rem 3rem;
}
.game-icon{
	width: 12.8rem;
	height: 12.8rem;
}
.game-name{
	margin-top: 2.2rem;
	font-size: 2.6rem;
	color: #202226;
}
.plz-login{
	display: none;
	font-size: 2rem;
	color: #707579;
	text-align: center;
	margin-bottom: 2.2rem;
}
.login-begin{
	margin: 0 auto;
	width: 22.6rem;
	height: 5.6rem;
	font-size: 2.4rem;
	text-align: center;
	background-color: #1657D9;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recharge-list{
	padding: 5rem 0;
}
.account-info{
	width: 121.4rem;
	height: 14.2rem;
	margin: 0 auto;
	background-color: white;
}
.account-info-txt{
	background-color: #e0e0e0;
	font-size: 2.6rem;
	color: #202226;
	height: 4.7rem;
	line-height: 4.7rem;
    text-indent: 5rem;
	font-weight: bold;
}
.account-info-detail{
	display: flex;
	font-size: 2.6rem;
	color: #626966;
	height: 9.5rem;
	align-items: center;
	justify-content: space-around;
}
.account-info-detail div{

}
.account-color{
	color: #202226;
}
.recharge-list-info{
	width: 121.4rem;
	margin: 0 auto;
	/* margin-bottom: 30rem; */
}
.recharge-list-info table{
	border-spacing: unset;
	/* margin-top: 5rem; */
}
.recharge-list-info th{
    text-indent: 5rem;
	text-align: left;
	width: 121.4rem;
	height: 5.1rem;
	font-size: 2.6rem;
	color: #202226;
	background-color: white;
}
.recharge-type{
	border-spacing: unset;
	margin-top: 5rem;
	/* text-indent: 5rem; */
	/* text-align: left; */
	width: 121.4rem;
	height: 5.1rem;
	font-size: 2.6rem;
	color: #202226;
	background-color: white;
	/* line-height: 5.1rem; */
	display: flex;
    align-items: center;
}
.recharge-type-choose{
	text-indent: 5rem;
	font-weight: bolder;
}
.recharge-type-li-first{
	margin-left: 4.5rem;
}
.recharge-type-li{
	height: 3.8rem;
	background-color: #e0e0e0;
	color: #404548;
	margin-right: 2.7rem;
	font-weight: unset;
	cursor: pointer;
	padding: 0 1rem;
}
.recharge-type-li-checked{
	background-color: #1657d9;
	color: #ffffff;
}
.tag4,.tag1{
	/* display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
}
.tag4::after,.tag1::after{
	/* content: "";
	flex: 1;    */
}
.recharge-detail{
	border: 1px solid #c5c4c4;
	display: inline-block;
	/* margin-top: 4rem; */
	margin: 4rem 2rem;
	width: 26.3rem;
	height: 32.6rem;
	cursor: pointer;
	text-align: center;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background: url(../images/webpay/recharge.png) no-repeat;
    background-size: 100%;
	box-shadow: 0.5rem 0.7rem 0.3rem #c5c4c4;
}
/* .recharge-detail::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.5); 
	z-index: 0; 
} */

.recharge-name{
	font-size: 2.5rem;
    width: 100%;
    position: absolute;
    bottom: 6.2rem;
    text-align: center;
	
}
.recharge-id{
	width: 100%;
	display: inline-block;
	display: none;
}
.recharge-limit{
	/* width: 100%;
	display: inline-block;
	margin-top: 0.5rem;
	color: red;
	height: 1.6rem; */
	position: absolute;
    right: 3rem;
    bottom: 10rem;
	background-color: #E9EFF8;
	border-radius: 0.5rem;
    padding: 0 0.5rem;
}
.recharge-status{
	/* position: absolute;
	width: 6.1rem;
    height: 4.8rem;
    right: 0;
	border-radius:  0 1rem 0 0; */
}
.recharge-status img{
	/* border-radius:  0 1rem 0 0; */
}
.recharge-img{
	width: 19rem;
	height: 19rem;
	position: absolute;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%);
}
.recharge-money{
	font-size: 2rem;
    color: white;
    background-color: #1657D9;
    height: 4.2rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    line-height: 4.2rem;
}

/* 底部 */
.footer {
    bottom: 0;
    width: 100%;
	z-index: 5;
}
.footer-fixed {
	position: fixed;
}

.footer-max {
	overflow: hidden;
	position: relative;
	height: 100%;
	width: 100%;
	vertical-align: middle;
}

.footer .content {
	height: 13.8rem;
	width: 100%;
	background-color: #f9f9f9;
	border-top: 1px solid black;
}

.footer-mid {
	position: relative;
	margin: 0 auto;
	height: 100%;
	width: 110rem;
	font-size: 1.2rem;
	font-family: "微软雅黑";
	color: black;
}

.footer-mid a {
	color: black;
	cursor: pointer;
	text-decoration: none;
}

.footer-mid-top {
	position: relative;
	width: 100%;
	height: 2.64rem;
	top: 19.6%;
}

.footer-line {
	float: left;
	position: relative;
	top: 10%;
	border: 1px solid black;
	height: 80%;
	margin: 0 1.8% 0 1.8%;
}

.footer-mid-img-1 {
	float: left;
	position: relative;
	width: 9.18rem;
	height: 100%;
	background: url(../images/official_footer_mid_1.png) no-repeat;
	background-size: 100% auto;
}

.footer-mid-img-2 {
	float: left;
	position: relative;
	width: 7.08rem;
	height: 100%;
	background: url(../images/official_footer_mid_2.png) no-repeat;
	background-size: 100% auto;
}

.footer-mid-top-txt {
	float: right;
	position: relative;
	height: 100%;
}

.footer-mid-top-txt::before {
	display: inline-block;
	content: "";
	height: 100%;
	vertical-align: middle;
}

.footer-mid-down {
	position: relative;
	height: 35%;
	top: 28%;
}

.footer-mid-down-left {
	float: left;
	width: fit-content;
	width: -webkit-fit-content;
	width: -moz-fit-content;
}

.footer-mid-down-left p {
	margin-bottom: 1rem;
}

.footer-mid-down-right {
	float: left;
	margin-top: 1rem;
	/* width: 6.3rem;
	height: 8.1rem; */
	width: 7.4rem;
    height: 9.6rem;
	background: url(../images/age.png) no-repeat;
	background-size: 100% auto;
	float: right;
}
.footer-mid-down-list{
	margin-top: 2rem;
	display: flex;
    justify-content: space-around;
    align-items: baseline;
}
.footer-mid-down-list span{
	display: inline-block;
	height: 2rem;
}