/* 苹方-简 常规体 */
@font-face {
  font-family: 'PingFangSC-Regular-ttf';
   src: url('../imgs/PingFangSC-Regular.subset.ttf') format('truetype');
}

/* 苹方-简 中黑体 */
@font-face {
  font-family: 'PingFangSC-Medium-ttf';
   src: url('../imgs/PingFangSC-Medium.subset.ttf') format('truetype'); 
}

/* 苹方-简 中粗体 */
@font-face {
  font-family: 'PingFangSC-Semibold-ttf';
  src: url('../imgs/PingFangSC-Semibold.subset.ttf') format('truetype');
}

@font-face {
  font-family: 'DIN-Alternate-Bold';
  src: url('../imgs/DIN-Alternate-Bold.subset.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'PingFangSC-Regular-ttf';
  background: linear-gradient( 254deg, #F3F3F3 0%, #F5F5F5 100%);
  padding: 22rem;
}

.container{
  max-width: 750rem;
  margin: 0 auto;
}
.money{
  border-bottom: 1rem solid #E6E6E6;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 15rem 10rem 5rem;
}
.toplogo img{
    display: block;
    margin-left: 6rem;
}

.top img{
    max-width: 60%;
    display: block;
}
.money .num{
  font-weight: 500;
  font-size: 32rem;
  color: #000000;
  font-family: 'PingFangSC-Medium-ttf';
  display: flex;
  flex: 1;
  align-items: baseline;
}
.money .num input{
  font-family: 'DIN-Alternate-Bold';
  font-weight: bold;
  font-size: 88rem;
  color: #000000;
  margin-left: 10rem;
  border: none;
  outline: none;
  width: 400rem;
  background-color: transparent;
}
.money .all{
  font-weight: 400;
  font-size: 28rem;
  color: #196BFC;
}
.tips{
  font-weight: 400;
  font-size: 24rem;
  color: #5D6776;
  padding-left: 25rem;
  background: url('../imgs/tips.png') no-repeat left center;
  background-size: 16rem 22rem;
  margin: 28rem 0 20rem;
}
.tips span{
  color: #FF7B00;
}

.card{
  background: #FFFFFF;
  box-shadow: inset 0rem 2rem 2rem 0rem #FFFFFF, 0rem 4rem 4rem 0rem rgba(174,174,174,0.25);
  border-radius: 16rem;
  padding: 0 34rem 10rem;
  margin-bottom: 22rem;
}
.card .line{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rem solid #F2F2F2;
}
.card .line:last-of-type{
  border: none;
}
.card .line .label{
  font-weight: 500;
  font-size: 26rem;
  color: #000000;
  font-family: 'PingFangSC-Medium-ttf';
}
.card .line .value{
  font-weight: 400;
  font-size: 24rem;
  color: #0F0F0F;
  text-align: right;
  margin: 20rem 0;
}
.card .line .desc{
  font-weight: 400;
  font-size: 22rem;
  color: #92939F;
  font-family: 'PingFangSC-Regular-ttf';
}
.card .line .desc span{
  color: #3079FD;
}
.card .line .second{
  color: #5D6776;
}
.card .line .selectbox{
  background: url(../imgs/arrowright.png) no-repeat right center;
  background-size: 14rem 27rem;
  padding-right: 25rem;
}
.tishi{
  font-weight: 400;
  font-size: 20rem;
  color: #5D6776;
  margin: 22rem 0 16rem;
}

.card .phone{
  padding: 26rem 0;
}
.card .phone input{
  background: #F8F8F8;
  border-radius: 200rem;
  line-height: 100rem;
  width: 100%;
  padding: 0 38rem;
  font-weight: 500;
  font-size: 26rem;
  color: #000000;
  font-family: 'PingFangSC-Medium-ttf';
  border: none;
  outline: none;
}
.card .phone input:focus{
  border: none;
  outline: none;
}
.card .phone input::placeholder{
  color: #92939F;
  font-family: 'PingFangSC-Regular-ttf';
}
.card .btn{
  line-height: 100rem;
  background-color: #006EFE;
  border-radius: 112rem;
  font-size: 34rem;
  color: #FFFFFF;
  text-align: center;
}
.copyright{
  text-align: center;
  font-weight: 400;
  font-size: 24rem;
  color: #9F9D9D;
  line-height: 50rem;
  margin: 20rem 0 8rem;
  font-family: "pingfangsc";
}
.copyright img{
  margin-right: 5rem;
  vertical-align: middle;
}

.info {
  text-align: center;
  font-weight: 400;
  font-size: 20rem;
  font-family: "pingfangsc"; 
  color: rgba(159,157,157,0.5);
  line-height: 35rem;
  padding-bottom: 26rem;
}
.info .pcolor{
	color: #9F9D9D;
	font-size: 11rem;
}
.info .pname{
	font-weight: 600;
}
.info p:nth-child(4),.info p:nth-child(9){
	margin-top: 10rem;
}

.xybox{
font-family: 'PingFangSC-Regular-ttf';
font-weight: 400;
font-size: 22rem;
color: #5D6776;
line-height: 44rem;
margin: 30rem 20rem;
}
.xybox input{
vertical-align: bottom;
margin-right: 4rem;
width: 24rem !important;
height: 24rem !important;
background-color: #fff;
border: solid 2rem #C5C5C5;
border-radius: 50%;
font-size: 14rem;
padding: 0;
position: relative;
display: inline-block;
vertical-align: middle;
cursor: default;
-webkit-appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color ease .1s;
transition: background-color ease .1s
}
.xybox span{
color: #006EFE;
}
.xybox input:checked{
background: url(../imgs/gou.svg) no-repeat center center #0074FF;
background-size: 25rem 25rem;
border: none;
}

.app{
   font-size: 25rem;
   text-align: center;
   color: #9F9D9D;
   margin-bottom: 10rem;
   line-height: 44rem;
}
.rules{
    text-align: center;
    color: #9F9D9D;
    font-size: 25rem;
    padding-bottom: 20rem;
}
.rules span{
    margin: 0 5rem;
    position: relative;
}
.rules .vline{
    padding-right: 15rem;
}
.rules span a{
    color: #666;
    text-decoration: none;
}
.rules .vline::after{
    content: '';
    display: inline-block;
    width: 1rem;
    height: 25rem;
    position: absolute;
    right: 0;
    top: 6rem;
    background-color: #9F9D9D;
}
.rules .color{
    color: #576c95;
}
.product{
    border-radius: 16rem;
    width: 80%;
    position: relative;
    background-color: #fff;
    font-size: 26rem;
    padding: 30rem;
    font-family: 'PingFangSC-Regular-ttf';
}
.product .tit{
    font-size: 32rem;
    font-weight: 600;
    color: #555;
    text-align: center;
    margin-bottom: 15rem;
}
.product .art{
    color: #666;
    line-height: 40rem;
}
.product .close{
position: absolute;
right: 10rem;
top: 10rem;
width: 60rem;
height: 60rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 50%;
cursor: pointer;
}
.product .close::before,.product .close::after {
content: '';
position: absolute;
width: 30rem;
height: 4rem;
background-color: #b5b5b5;
}
.product .close::before {
transform: rotate(45deg);
}

.product .close::after {
transform: rotate(-45deg);
}
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.63);
display: flex;
justify-content: center;
align-items: center;
}
.dialog{
background: #FFFFFF;
border-radius: 24rem;
margin: 0 78rem;
padding: 34rem 40rem;
max-width: 600rem;
width: 100%;
}
.dialog .tit{
font-weight: 400;
font-size: 36rem;
color: #000000;
text-align: center;
}
.dialog .desc{
font-weight: 400;
font-size: 28rem;
color: #0F0F0F;
margin: 34rem 0;
}
.dialog .desc span{
color: #006EFE;
}
.dialog .btn{
display: flex;
justify-content: space-between;
}
.dialog .btn .cancel{
background: #F5F5F5;
border-radius: 112rem;
font-size: 32rem;
color: #0074FF;
line-height: 90rem;
text-align: center;
width: 48%;
}
.dialog .btn .agree{
background: #0074FF;
border-radius: 112rem;
font-weight: 400;
font-size: 32rem;
color: #FFFFFF;
line-height: 90rem;
text-align: center;
width: 48%;
font-family: 'PingFangSC-Medium-ttf';
}
.dialog .phone{
font-weight: 400;
font-size: 28rem;
color: #92939F;
line-height: 44rem;
margin: 10rem 0;
text-align: center;
}
.dialog .code{
position: relative;
margin-bottom: 22rem;
display: flex;
}
.dialog .code input{
background: #F5F5F5;
border-radius: 200rem;
line-height: 94rem;
padding-left: 42rem;
outline: none;
border: none;
width: 100%;
font-size: 28rem;
font-family: 'PingFangSC-Medium-ttf';
}
.dialog .code input::placeholder{
font-weight: 400;
font-size: 28rem;
color: #7C7C7C;
}
.dialog .code .sendbtn{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 42rem;
font-size: 28rem;
color: #3673FF;
border: none;
outline: none;
background-color: transparent;
}
.dialog .comfirm{
background: #0074FF;
border-radius: 112rem;
font-weight: 500;
font-size: 32rem;
color: #FFFFFF;
line-height: 100rem;
text-align: center;
}

.iframe{
border-radius: 16rem;
width: 80%;
position: relative;
background-color: #fff;
}
.iframe .ifra{
overflow: hidden;
}
.iframe iframe{
width: 100%;
height: 50vh;
margin: 0 auto;
display: block;
border: none;
}
.iframe .iftit{
position: relative;
text-align: center;
padding: 20rem 0;
font-size: 32rem;
font-weight: 600;
color: #333;
font-family: 'PingFangSC-Regular-ttf';
}
.iframe .close{
position: absolute;
right: 10rem;
top: 10rem;
width: 60rem;
height: 60rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 50%;
cursor: pointer;
}
.iframe .close::before,.iframe .close::after {
content: '';
position: absolute;
width: 30rem;
height: 4rem;
background-color: #b5b5b5;
}
.iframe .close::before {
transform: rotate(45deg);
}

.iframe .close::after {
transform: rotate(-45deg);
}

dialog{
border: none;
font-weight: 400;
font-size: 32rem;
color: #FFFFFF;
background: rgba(0,0,0,0.7);
border-radius: 12rem;
padding: 24rem 38rem;
width: max-content;
}
dialog:focus{
border: none;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
dialog[open] {
position: fixed;
top: 50%;
left: 50%;
outline: none;
border: none;
transform: translate(-50%, -50%);
}

.wlmask{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(62,62,62,0.82);
display: flex;
align-items: center;
justify-content: center;
}
.wlmask .wldialog{
background: url(../imgs/onebg.png) no-repeat center center;
background-size: cover;
border-radius: 28rem;
padding: 40rem;
width: calc(100% - 184rem);
text-align: center;
position: relative;
}
.wlmask .wldialog .tit{
font-weight: 500;
font-size: 40rem;
color: #000000;
margin-bottom: 20rem;
font-family: "PingFangSC-Semibold";
}
.wlmask .wldialog .tit span{
color: #006EFE;
}
.wlmask .wldialog .info{
font-weight: 500;
font-size: 28rem;
color: #0F0F0F;
margin-bottom: 28rem;
font-family: "PingFangSC-Regular";
}
.wlmask .wldialog span{
color: #DF6C05;
}
.wlmask .wldialog .btn{
background: #006EFE;
border-radius: 112rem;
font-weight: 500;
font-size: 32rem;
color: #FFFFFF;
line-height: 100rem;
font-family: "PingFangSC-Medium";
}
.wlmask .wldialog .other{
font-weight: 500;
font-size: 28rem;
color: #5E8AC7;
font-family: "PingFangSC-Semibold";
margin: 60rem 0 30rem;
display: flex;
justify-content: center;
align-items: center;
}
.wlmask .wldialog .other span{
display: inline-block;
width: 80rem;
height: 2rem;
border-bottom: 2rem solid #5E8AC7;
margin: 0 20rem;
}
.wlmask .wldialog .card{
background: url(../imgs/ljsq.png) no-repeat right center #DBEAFF;
background-size: 80rem 152rem;
border-radius: 12rem;
display: flex;
align-items: center;
padding: 36rem 0 36rem 22rem;
}

.wlmask .wldialog .card .ico{
width: 86rem;
}
.wlmask .wldialog .card .desc{
flex: 1;
text-align: left;
margin-left: 22rem;
}
.wlmask .wldialog .card .desc .name{
font-weight: 600;
font-size: 28rem;
color: #5D6776;
font-family: "PingFangSC-Semibold";
}
.wlmask .wldialog .card .range{
font-weight: 500;
font-size: 24rem;
color: #5D6776;
font-family: "PingFangSC-Medium";
}
.wlmask .wldialog .card .range span{
color: #DF6C05;
}
.wlmask .wldialog .card .abtn{
font-weight: 500;
font-size: 24rem;
color: #4E89D4;
font-family: "PingFangSC-Semibold";
width: 72rem;
}
.wlmask .wldialog .close{
position: absolute;
bottom: -80rem;
left: calc(50% - 24rem);
width: 48rem;
height: 48rem;
}

.repay{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background: #FFFFFF;
border-radius: 20rem 20rem 0 0;
}
.repay .tit{
font-weight: 500;
font-size: 32rem;
color: #3D3D3D;
font-family: 'PingFangSC-Medium';
padding: 20rem 40rem 20rem;
}
.repay .tit img{
width: 40rem;
height: 40rem;
float: right;
}
.repay .tips{
font-weight: 400;
font-size: 24rem;
color: #989898;
padding: 0 30rem 20rem;
}
.repay .rebox{
background: #F9F9F9;
padding: 0 30rem 30rem;
}

.repay .rebox .scrolldiv{
max-height: 60vh;
overflow-y: scroll;
padding-top: 15rem;
}
.repay .rebox .sum{
background: #FFFFFF;
border-radius: 100rem 100rem 100rem 100rem;
border: 1rem solid #D9D9D9;
display: inline-block;
padding: 8rem 25rem;
font-weight: 400;
font-size: 24rem;
color: #000000;
margin-bottom: 15rem;
}

.repay .rebox .part{
display: flex;
}

.repay .rebox .part .right{
margin-left: 25rem;
border-left: 1rem solid #D8D8D8;
padding-left: 25rem;
position: relative;
}
.repay .rebox .part .right::before{
display: inline-block;
content: '';
width: 18rem;
height: 18rem;
border: 1rem solid #006EFE;
border-radius: 50%;
position: absolute;
left: -10rem;
top: 2rem;
background: #F9F9F9;
}
.repay .rebox .part .right .pay{
font-weight: 600;
font-size: 24rem;
color: #000000;
line-height :  24rem;
margin-bottom: 10rem;
font-family: 'PingFangSC-Semibold';
}

.repay .rebox .part .right .detail{
font-weight: 400;
font-size: 24rem;
color: #7C7B7B;
}
.repay .rebox .part .left{
width: 180rem;
font-weight: 400;
font-size: 24rem;
color: #7C7B7B;
text-align: right;
margin-bottom: 20rem;
}
.repay .rebox .part .left .date{
line-height: 30rem;
width: 100%;
margin: 0 auto;
}
.repay .rebox .part .index{
color: #000000;
font-weight: 500;
line-height: 40rem;
font-family: 'PingFangSC-Semibold';
}


.hide{
display: none;
}