*{margin:0;font-size:18px;color:#000;outline:none;  -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; font-family:'Helvetica Neue','Helvetica','Hiragino Sans GB','PingHei','PingFang SC','STHeitiSC-Light','Microsoft YaHei',"微软雅黑",'Arial',sans-serif}
a{text-decoration:none; border:none;}
a:hover{cursor:pointer}
img{display:block}
.clear{clear:both}
.h10{height:10px;clear:both}
.h20{height:20px;clear:both}
.h40{height:40px;clear:both}

html{background-size:cover; background-repeat:repeat; background-position:center; background-attachment: fixed;}

.login{ position:absolute; width:640px; height:460px; top:45%; margin-top:-230px; left:50%; margin-left:-320px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; background-color:rgba(148,118,88, 0.95); border-top:10px solid #642; }
.login .title{font-size:28px; text-align:center; margin:30px 0px;}
.login .control{display:block; width:380px; margin:0px auto; height:45px; line-height:45px; border:2px solid #642; text-align:center; background-color:#FFF; border-radius:5px;}
.login .button{font-size:20px; background-color:#421; color:#DDD; margin:30px auto; margin-bottom:20px; border:2px solid #421; }
.login .button:hover{color:#FFF;}
.login .button:active{color:#FFF;}
.login .options{width:380px; margin:0px auto;}
.login .options a{font-size:14px; color:#CCC;}
.login .options a.forget{float:left;}
.login .options a.first{float:right;}
.login .options a.getsms{ font-size:16px; float:right; color:#fff;}
.login .options a.getsms[useable=no]{color:#999;}

.login .link{text-align:center;  margin-bottom:60px; margin-top:20px;}
.login .link a{font-size:14px; color:#fff; background-color:#421; border-radius:100px; padding:5px 8px;}
.login .copyright{display:block; text-align:center; font-size:14px; color:#fff;}
.login .copyright a{font-size:14px;}
.login .captcha_image{cursor:pointer; position:absolute; right:135px; top:15px; z-index:99; width:100px; height:40px;}

@media screen and (max-width: 681px) {
	.login{ position:relative; width:100%; height:380px; top:0%; margin-top:80px; left:0%; margin-left:0px; border-radius:0px; padding-bottom:40px; border-top:10px solid #642; }
	.login .title{font-size:22px; }
	.login .control{ width:70%; max-width:380px; min-width:200px; height:38px; line-height:38px;  border:1px solid #642;}
	.login .options{ width:70%; max-width:380px; min-width:200px; }
	.login .captcha_image{left:16%; top:15px; z-index:99; width:70px; height:32px;}
}

.menu{width:100%; position:fixed; height:60px; background-color:rgba(0,0,0, 0.95); border-bottom:5px solid #421; z-index:99;}
.menu .box{width:100%; height:60px; max-width:1000px; position:relative; margin:0px auto;}
.menu .box .title{width:100%; height:60px; line-height:60px; font-size:24px; color:#987b5f; box-sizing:border-box; padding-left:20px; padding-right:80px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.menu .box .more{display:block; position:absolute; top:0px; right:20px; cursor:pointer; height:60px; line-height:60px; width:60px; background-color:#CC6666; background: url('menu.png'); background-size:60px 120px; background-repeat:no-repeat;}
.menu .box .more.open{background-position:0px 0px;}
.menu .box .more.close{background-position:0px -60px;}
.menu .box .item{display:none; position:absolute; width:260px; background-color:rgba(102, 68, 34, 1); right:0px; top:65px;  z-index:99; border:5px solid #421;}
.menu .box .item a{display:block; width:100%; height:50px; line-height:50px; text-align:center; border-bottom:2px solid #421; color:#310;}
.menu .box .item p{display:block; width:100%; height:30px; line-height:30px; text-align:center; background-color:#421; color:#8d7154;}
.menu .box .item a:active{background-color:#53371C; color:#fff;}
.menu .box .item a:hover{background-color:#53371C; color:#fff;}

@media screen and (max-width: 681px) {
	.menu .box{max-width:100%;}
	.menu .box .title{font-size:21px; padding-left:10px; padding-right:70px;}
	.menu .box .more{right:0px;}
	.menu .box .item{width:100%; left:0px;}
}

#page{width:94%; min-height:350px; max-width:1000px; background-color:rgba(148,118,88, 0.95);  margin:0px auto; box-sizing:border-box;  margin-bottom:20px; border-radius:10px; }
#page .title{width:100%; height:45px; line-height:45px; font-size:22px; background-color:rgba(102,68,34, 0.6); color:#000; text-align:center; border-top-left-radius:10px;border-top-right-radius:10px;}
#page .content{box-sizing:border-box; padding:20px; padding-bottom:50px;}
#page .content p{ line-height:28px; font-size:16px; margin-bottom:20px; text-indent:30px; color:#000;}
#page .content p b{ color:#000; font-size:16px; }

#page .content .control{display:block; width:380px; margin:0px auto; height:45px; line-height:45px; border:2px solid #642; text-align:center; background-color:#FFF; border-radius:5px;}
#page .content .control.h10{position:relative; width:380px; border:0px; background-color:transparent; height:10px;}
#page .content .control.h10 #area{position:absolute; text-align:left; border:0px; left:3px; top:12px;  width:110px; height:40px; font-size:14px;}
#page .content .control.h10 #getsms{position:absolute; text-align:left; border:0px; left:6px; top:12px;  width:170px; height:40px; font-size:14px;}
#page .content .control#mobile{text-align:right; box-sizing:border-box; padding-right:3%;}
#page .content .control#verifycode{text-align:right; box-sizing:border-box; padding-right:3%;}
#page .content .button{font-size:20px; background-color:#421; color:#DDD; margin:30px auto; border:2px solid #421; }
#page .content .button:hover{color:#FFF;}
#page .content .button:active{color:#FFF;}
#page .content .link{display:block; text-align:center; color:#421;}


#page .content .tester{font-size:16px; text-align:center; line-height:30px; border-bottom:2px solid #421; padding-bottom:15px; margin:0px auto;}
#page .content .exercises{position:relative; min-height:200px; box-sizing:border-box; padding:50px 0px 40px 0px;}
#page .content .exercises .previous{position:absolute; left:0; top:0; height:50px; line-height:50px; width:90px; font-size:18px; background:#642; border-radius:90px; color:#CCC; text-align:center;}
#page .content .exercises .previous i{font-weight:bold; color:#CCC;}
#page .content .exercises .order{position:absolute; left:0; right:0; top:0; margin:auto; height:50px;line-height:50px; width:90px; font-size:28px; background:#642; border-radius:90px; color:#999; text-align:center;}
#page .content .exercises .next{position:absolute; right:0; top:0; margin:auto; height:50px;line-height:50px; width:90px; font-size:18px; background:#642; border-radius:90px; color:#CCC; text-align:center;}
#page .content .exercises .next i{font-weight:bold; color:#CCC;}
#page .content .exercises .text{ font-size:28px; line-height:40px; color:#000; text-align:center; font-weight:bold;}
#page .content .exercises .explain{font-size:20px; padding:10px 0px 0px 0px; text-align:center;}
#page .content .options{box-sizing:border-box; padding-left:0px; text-align:center;}
#page .content .options .otips{font-size:18px; text-align:center;}
#page .content .options .option{display:inline-block; font-size:19px; margin-left:10px; margin-right:10px; margin-bottom:20px; height:50px; line-height:50px; border-radius:5px; background:#421; color:#999; min-width:140px; width:15%; text-align:center;}
#page .content .options .option.on{background-color:#642; color:#FFF;}

#page .content .h1{ text-align:center; font-size:24px; margin:20px 0px;}
#page .content .h2{ text-align:center; font-size:20px; margin:40px 0px; font-weight:bold; }
#page .content .h2#conclusion{  border:2px dotted #421; color:#421; padding:10px;}

#page .content .h3{ max-width:660px; margin:0px auto;}
#page .content .h3 p{margin-bottom:10px;  }
#page .content .h3 h2{margin-top:25px; margin-bottom:10px; font-size:20px; border-left:10px solid #421; color:#421; padding-left:10px;}
#page .content .h3 h1{margin-top:20px; margin-bottom:10px; font-size:16px;}
#page .content img.tcm9{display:block; float:left; width:25%;}
#page .content .chart{ width:400px; margin:40px auto;}
#page .content .chart .item{ width:100%; height:20px; margin-bottom:15px; position:relative; box-sizing:border-box; padding-left:60px; padding-right:30px; }
#page .content .chart .item .name{position:absolute; top:0px; left:0px; width:60px; height:20px; line-height:20px; font-size:16px;}
#page .content .chart .item .score{position:absolute; top:0px; right:0px; width:20px; height:20px; line-height:20px; font-size:16px;}
#page .content .chart .item .exbox{width:100%; height:20px; background-color:#CCC; border-radius:20px;}
#page .content .chart .item .inbox{height:18px; background-color:#642; margin-top:-20px; border:1px solid #CCC;border-radius:20px;}

#page .content .history{width:100%; min-height:490px;  position:relative; box-sizing:border-box; padding-left:240px;}
#page .content .history .left{position:fixed; height:450px; overflow-y:auto; width:220px; border:2px solid #421; margin-left:-240px; margin-top:20px; box-sizing:border-box;}
#page .content .history .left::-webkit-scrollbar {width: 10px;}
#page .content .history .left::-webkit-scrollbar-track {background-color:#421;}
#page .content .history .left::-webkit-scrollbar-thumb {background-color:#642;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;}
#page .content .history .left .item{display:block; height:40px; line-height:40px; border-bottom:1px solid #421;}
#page .content .history .left .item.on{background:#53371C;}
#page .content .history .left .item.on .name{color:#fff;}
#page .content .history .left .item.on .date{color:#CCC;}
#page .content .history .left .item .name{float:left; height:40px; line-height:40px; margin-left:15px;width:95px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} 
#page .content .history .left .item .date{float:right; height:40px; line-height:40px; font-size:14px; width:95px;}
#page .content .history .left .more{display:block; height:40px; line-height:40px; text-align:center; color:#421; padding-top:20px;}
#page .content .history .right{width:100%; box-sizing:border-box; padding:20px 0px;  /*height:470px; overflow-y:auto;*/ }

@media screen and (max-width: 681px){
	#page .content{ padding:10px; padding-bottom:50px;}
	#page .content p{ line-height:25px; font-size:15px; margin:10px 0px;}
	#page .content p b{ font-size:15px; }
	#page .content img.tcm9{display:block; float:left; width:33%;}
	#page .content .control{ width:85%; max-width:380px; min-width:200px; height:38px; line-height:38px;  border:1px solid #642;}
	#page .content .control.h10{width:85%; max-width:380px; min-width:200px; border:0px;height:10px;}
	#page .content .control.h10 #area{width:120px; height:34px; font-size:14px;}
	#page .content .tester{font-size:15px; padding-bottom:10px; margin:0px;}
	#page .content .exercises{min-height:120px; }
	#page .content .exercises .previous{height:40px; line-height:40px; width:90px; font-size:15px;}
	#page .content .exercises .order{height:40px;line-height:40px; width:60px; font-size:18px; }
	#page .content .exercises .next{height:40px; line-height:40px; width:90px; font-size:15px;}
	#page .content .exercises .text{ font-size:24px; line-height:30px; padding-top:5px;}
	#page .content .options{}
	#page .content .options .option{font-size:20px; margin-bottom:10px; height:45px; line-height:45px; width:80%; }
	#page .content .chart{ width:80%; min-width:200px; }
	
	#page .content .history{padding-left:0px;}
	#page .content .history .left{position:relative; height:300px; overflow-y:auto; width:100%;  margin-left:0px;}
	
}


.foot{display:block; text-align:center; padding-bottom:40px; font-size:14px; color:#CCC;}
.foot a{font-size:14px; color:#CCC;}