@charset "utf-8";
*{
   -webkit-tap-highlight-color:transparent;
}
/*layout*/
html { width:100%; height:100%;margin:0;}
body { text-align:center; width:100%; height:100%;}
.loading { position:absolute; width:100%; height:100%; background:#fff url(../images/loading.gif) center no-repeat; left:0; right:0; top:0; z-index:9999999; opacity:0.2 }

.layout { width: 100%; height: 100%; background-color:#fff; max-width: 640px; margin:auto; overflow: hidden; position:relative; z-index:1; }
.pageHeader { position: absolute; z-index: 1; left:0; right:0; width:100%; border-bottom:#ddd 1px solid; height: 120px; overflow: hidden; background-color: #fff;}
.pageBody { position:absolute; z-index:0; left:0; right:0; bottom:0; width:100%; height:100%; overflow: auto;}
.pageContent { padding-top: 120px;}
.pageHeader h1 { height: 60px; line-height: 60px; font-size: 20px; font-weight: normal; background-color: #0cf; color: #fff; margin-bottom: 15px;}
.mainNav {font-size:0; line-height: 0; white-space:nowrap; height: 30px; margin:0 10px; overflow: hidden; }
ul.mainNav {display: flex;}
.mainNav li { display: inline-block; text-align: center; height: 30px; line-height: 30px; font-size: 12px; color: #fff; background-color: #3c6; flex: 1; margin: 0 10px;}
.mainNav li.active { background-color: #0cf;}

.helpList {position: relative;}
.helpList li { line-height: 24px; padding:12px 40px 12px 32px; border-bottom: #ddd 1px solid; text-align: left; font-size: 14px; position:relative;}
.helpList .arrow { position: absolute; right: 10px; top:12px; float: right; display: inline-block; vertical-align: middle; height: 24px; width: 24px; background: url(../images/arrow.png) center no-repeat; background-size: 24px 24px;}
.helpList span.number {position: absolute; float:left; left:10px; top:16px; display: inline-block; width: 16px; height: 16px; line-height: 16px; font-size: 9px; text-align:center; background-color: #0cf; color: #fff; margin-right: 5px; border-radius: 8px;}

section.popWin { width: 100%; height: 100%; left:0; top:0; right:0; background-color:#fff; max-width: 640px; margin:auto; overflow: hidden; position: absolute; z-index:2; background-color: #fff; overflow: auto;}
section.popWin header { position: relative; padding:15px 60px; border-bottom: #ddd 1px solid; text-align: center;}
section.popWin header h3 { background-color: #0cf; color:#fff; padding:5px 10px; line-height: 22px; font-size: 16px; display: inline-block; border-radius: 5px; font-weight: normal;}
section.popWin .close {position: absolute; right: 10px; bottom:15px; float: right; width: 40px; height: 22px; line-height: 20px; text-align: center; font-size: 12px; border:#ddd 1px solid; border-radius: 5px;}
section.popWin article { font-size: 14px; text-align: left;}
section.popWin article li { line-height: 22px; padding:10px 10px 10px 24px; border-bottom: #ddd 1px solid;  position:relative; text-align: justify;}
section.popWin article li i.circle  {position: absolute; float:left; left:10px; top:17px; display: inline-block; width: 8px; height: 8px; line-height: 16px; font-size: 9px; text-align:center; background-color: #0cf; color: #fff; margin-right: 5px; border-radius: 4px;}
section.popWin article .font-big { font-size: 16px;}
section.popWin article .font-small { font-size: 12px;}
section.popWin article .color-blue { color: #0cf;}
section.popWin article .color-red { color: #f00;}