body{background:rgba(0,0,0,0.5);}
#wrap{width:100%; margin:0 auto; height:100vh; max-width: 640px; min-width: 320px; position:relative;}

.mainWrap > header > .naviBtn::after{color:#fff;}

header{width: 100%; max-width: 640px; height: 6.4rem; display:flex; justify-content: space-between; align-items: center; position:fixed; top:0; z-index: 10; border-bottom:1px solid #DDDDDD;}
header > .headLogo{width:80px; padding:0 20px; height:100%; line-height: 6.4rem;}
header > .headLogo > img{width:100%; object-fit: cover;}
header > .naviBtn{font-size:0px; padding:0 20px; height:100%; line-height: 6.4rem; cursor: pointer; width:6.4rem; position:relative;}
header > .naviBtn::after{content: "\e91c"; display:inline-block; font-family: "xeicon"; font-size:2.5rem; color:#727C83; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
header > .backBtn{font-size:0px; padding:0 20px; height:100%; line-height: 6.4rem;  width:6.4rem; position:relative;}
header > .backBtn::after{content: "\e906"; display:inline-block; font-family: "xeicon"; font-size:2.4rem; color:#727C83; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
header > .tit{font-weight: 600; font-size: 18px; color:var(--blackColor);}

main{padding-top:6.4rem; height:100vh; position:relative; }
main.errWrap{padding-top:0px;}

.subWrap header{background:#fff;}
.subWrap main{background:#F1F1F1;}
.subWrap main section{background:#fff;}
.subWrap main section + section{margin-top:8px;}

.loginWrap header{display:none;}
.mainWrap main{min-height: 620px;}

/* form */
.formItem label{font-weight: 400; font-size: 13px; display:block;}
.formItem + .formItem{margin-top:20px;}
.formItem div,
.formItem input{width:100%;}

.formItem.flex{display:flex; border-bottom: 1px solid #DDDDDD;}
.formItem.flex > div{width:50%;}
.formItem.flex > div > span{padding: 8px 0; height: 40px; font-weight: 500; font-size: 16px; display:inline-block; color:var(--blackColor); display: flex; align-items: center;}
.formItem.flex > div > span.on{color:#656EE1; font-weight: 600;}

.formItem.flex.dap3{border-bottom:0px; justify-content: space-between;}
.formItem.flex.dap3 > div{width:calc((100% - 30px) / 3); border-bottom: 1px solid #DDDDDD;}

/* pdding */
.pt20{padding-top:20px !important;}

/* Modalpop */
.modalPop{display:none; position:fixed; top:0; bottom:0; width:100%; max-width: 640px; z-index: 11;}
.modalPop.on{display:inline-block;}

.modalPop > .header{width: 100%; height: 6.4rem; display:flex; justify-content: space-between; align-items: center; border-bottom:1px solid #DDDDDD;}
.modalPop > .header > .tit{font-weight: 600; font-size: 18px; color:var(--blackColor); padding:0 20px; height:100%; line-height:6.4rem;}
.modalPop > .header > .tit > span{font-size:12px; font-weight: 400; color:var(--textColor); display:inline-block; margin-top:3px;}
.modalPop > .header > .closeBtn{font-size:0px; padding:0 20px; height:100%;  line-height:6.4rem;}
.modalPop > .header > .closeBtn:after{content: "\e921"; display:inline-block; font-family: "xeicon"; font-size:2.3rem; color:var(--blackColor); cursor: pointer;}

.modalPop > .footer{width: 100%; height: 6.4rem; border-top:1px solid #DDDDDD; position:fixed; bottom:0; max-width: 640px; background:#fff;}
.modalPop > .footer2{width: 100%; height: 6.4rem; border-top:1px solid #DDDDDD; position:fixed; bottom:0; max-width: 640px; background:#fff;}