.bg{position:relative;overflow-x:hidden;background-repeat: no-repeat;background-size:100% 105%;width: 100%;height: 100%;}
.backindex{width: 4.2%;height: 13%;position: fixed;top: 0;font-weight:bold;color:#fff;font-size: 12px; }
.backlast{left: 89.5%;top:1%;}
.home{top: 1%;left: 82.5%;}

#index{background-image: url(../img/indexbg.jpg); }
#help{background-image: url(../img/helpbg.jpg);}
#book{background-image: url(../img/bookbg.jpg);}
#game{background-image: url(../img/gamebg.jpg);}
#study{background-image: url(../img/6.jpg);}
#plan{background-image: url(../img/planbg.jpg);}
#help{background-image: url(../img/helpbg.jpg);}

#book-1{background-image: url(../img/book-1.jpg);}
#book-11{background-image: url(../img/book-11.jpg);}
#book-111{background-image: url(../img/book-111.jpg);}
#book-video{background-image: url(../img/book-video.jpg);}

#study1{background-image:url(../img/study1.jpg) ;}
#study11{background-image:url(../img/study11.jpg) ;}
#studygq{background-image:url(../img/studygq.jpg) ;}
#studyday{background-image:url(../img/studyday.jpg) ;}

#help-about{background-image:url(../img/help-about.jpg) ;}
#help-contact{background-image:url(../img/help-contact.jpg) ;}



.study{width: 22%;height:42%;position: absolute;left:21%;bottom:3%; background:url(../img/main_plan.gif) no-repeat;background-size:100%;}
.game{width: 15%;height: 38%;position: absolute;left:46%;bottom:7%;}
.book{width: 25%;height:40%;position: absolute;left:58%;bottom:2%; background:url(../img/main_enter.gif) no-repeat;background-size:100%; }
.help{width: 16%;height: 50%;position: absolute;right:0%;bottom:7%;}

.backindex{cursor: pointer;}

/*#help a{width: 6%;height:13%;position: absolute;}
#help a:nth-child(4){right: 4%;}
#help a:nth-child(3){right: 11%;}
#help a:nth-child(2){right: 17.5%;}
#help a:nth-child(1){right: 24%;}*/

.sort{width:90%; margin:12% auto 0;}
.sort ul li{float:left; width:18%; position:relative;margin-right:2%;}
.sort>ul>li:nth-child(5n){margin-right:0;}
.sort ul li img{width:100%;}
.sort ul>li>ul{position:absolute;width:100%; background:#fff; opacity:0.7;border-radius:8px;line-height: 40px;display:none;top:50%;z-index:2;}
.sort ul>li>ul:nth-child(6){top:-50%;}
.sort ul>li>ul li{width:100%; text-align:center;}
.sort ul>li>ul li:hover{background:#bbb;}
.sort ul>li>ul li:nth-child(1){border-radius:8px 8px 0 0;}
.sort ul>li>ul li:last-child{border-radius:0 0 8px 8px;}
.sort ul>li>ul li a{font-size:18px; font-weight:bold; color:#000;}
.sort ul li:hover ul{display:block;}

#book-111 .courselist{}
#book-111 ul{width:90%; margin:10% auto 0; height:78%;overflow-y:auto;}
#book-111 ul li{width:15%; background:url(../img/coursebg.png); float:left; background-size:100%; height:9.4rem;margin:0 1.8% 1% 0; line-height:1rem;display: table;}
#book-111>ul>li:nth-child(6n){margin:0 0 1%;}
#book-111 ul li a{color:#8a8b8b; font-weight:bold; font-size:18px;width: 84%;line-height: 1.3rem;padding: 0 8% 10%; display: table-cell;text-align: center;vertical-align: middle;}

.tit {font-size: 2em;color: #FFF;position:fixed;left: 5%;top: 2%;width:auto;height:65px;}
.tit .titl{background:url(../img/tit_bg.png) no-repeat;background-size: auto 100%; width:20px;height:65px;float:left;}
.tit .titr{background:url(../img/tit_bg.png) no-repeat right;background-size: auto 100%; width:20px;height:65px;float:left;}
.tit .titm{background:url(../img/tit_bg_m.png) repeat-x;background-size: auto 100%; width:auto;height:65px;float:left;text-align: center; line-height:65px;}
.title{font-size: 2em;color: #e14928;position:fixed;left:25%;top: 2%;width:60%;height:65px; text-align:center;line-height:65px;}



#plan .planlistA{ position:absolute; top:20%;left:5%; width:35%;}
#plan .planlist{background-image: url(../img/planlistbg.png); width:; background-size:100%;padding:20% 3% 1%;;}
#plan .planlist .addplan img{width:25%;}
#plan .planlist .cont table{margin-top:2%;}
#plan .planlist .cont table tr{line-height:2; background:url(../img/planline.png) no-repeat bottom;}
#plan .planlist .cont table td a img{width:90%;}
#plan .planlist .cont table .planname{color:#e14928; font-size:1.3rem;font-weight:bold;}
#plan .bottom{height:1.6rem; background:url(../img/planlistbg.png) no-repeat bottom;background-size:100%;}


#plan .addplans{background: url(../img/addplanbg.png) no-repeat; position:absolute; top:30%;left:40%; width:18%; background-size:100%;padding:8% 3%;}
#plan .addplans .c_name{border:2px solid #dc973f;padding:3px;border-radius:5px; width:100%;}
#plan .addplans .butter{text-align:center; margin-top:15%;}
#plan .addplans button{background:none;}
#plan .addplans button img{width:70%;}

#calendar{position:absolute; top:25%;left:16%;}


#plan .courseA{position:absolute; top:16%;left:10%; width:80%;}
#plan .course{background: url(../img/kuang.png) no-repeat; height:27rem; background-size:100%;padding:2%;}
#plan .coursebottom{height:3.5rem; background:url(../img/kuang.png) no-repeat bottom;background-size:100%;}
#plan .course .left{width:35%; float:left;height:27rem;background:url(../img/planline2.png) no-repeat right;background-size:8%;padding-right:3%;}
#plan .course .left .ltitle{text-align:center; background:url(../img/planline.png) no-repeat bottom;background-size:90%;line-height:3.5rem; color:#fff; font-size:30px; font-weight:bold;}
#plan .course .left .lcon{margin-top:2%;}
#plan .course .left .lcon ul li{color:#fff; font-size:18px; font-weight:; line-height:2.2rem;text-shadow:5px 2px 6px #000;}
#plan .course .left .lcon ul li span{float:right;width:8%;height:8%; background:url(../img/del.png) no-repeat center;background-size:100%;cursor:pointer;}

#plan .course .right{width:61%; float:right; }
#plan .course .right .rtitle{width:100%; text-align:center; background:url(../img/planline.png) no-repeat bottom;background-size:70%;line-height:3.5rem; color:#fff; font-size:30px; font-weight:bold; }
#plan .course .right .rcon{overflow:hidden;margin-top:2%;height:92%;}
#plan .course .right .rcon .rconl{float:left;width:20%; }
#plan .course .right .rcon .rconl li{text-align:center;height:10%; line-height:2.6rem;background:url(../img/plansortbg.png) no-repeat;background-size:100%;color:#fff; cursor:pointer;font-size:18px; position:relative;width:auto;}
#plan .course .right .rcon .rconl li:hover{background:url(../img/plansortcur.png) no-repeat;color:#666464;background-size:100%;}
#plan .course .right .rcon .rconl .choose{background:url(../img/plansortcur.png) no-repeat;color:#666464;background-size:100%;}
#plan .course .right .rcon .rconl li ul{display:; position:absolute; top:0; left:100%; width:100%;}
#plan .course .right .rcon .rconl li:nth-child(8) ul,#plan .course .right .rcon .rconl li:nth-child(9) ul,#plan .course .right .rcon .rconl li:nth-child(10) ul{bottom:0;top:auto;}
#plan .course .right .rcon .rconl li>ul>li{text-align:center;height:10%; color:#fff; cursor:pointer;line-height:2.6rem;font-size:18px;background:none;}

#plan .course .right .rcon .rconc{float:left;width:20%;background:url(../img/plansortbg2.png) no-repeat;background-size:100%;height:100%;}

#plan .course .right .rcon .rconr{float:right;width:56%; padding:0 2%;height:100%;overflow-y:auto;}
#plan .course .right .rcon .rconr li{color:#fff; font-size:18px; font-weight:; line-height:2rem;text-shadow:5px 2px 6px #000;}
#plan .course .right .rcon .rconr li span{float:right;width:8%;height:8%; background:url(../img/add.png) no-repeat center;background-size:100%;cursor:pointer;}

#plancourselist a:hover{color:#0faad1;}


#member{position:fixed;right:0; top:6%;z-index: 1;text-align: right; cursor:pointer;}
#member .icon{background: url(../img/member.png) no-repeat;background-size:100%;width:6rem;height:6rem;}
#members{position:absolute;right:0; top:6%;z-index:1;text-align:right; cursor:pointer;}
#members .icon{background: url(../img/mem_iconbg.png) no-repeat;background-size:100%;width: 6rem;height:6rem; text-align:center;position:relative;float:left;z-index: 5;}
#members .icon span{color:#dac006;/*#8fce1f*/ font-size:26px; font-weight:bold; position:absolute;right:10%; top:28%; }
#members .memberinfo{background: url(../img/memberinfo.png) no-repeat;background-size:100%;width:17rem;height:7rem;float:left;display:none;position:relative;}
#members .memberinfo .username{position:absolute; left:3.4rem; top:1.5rem;color:#ff8105; font-size:22px;text-shadow:2px 2px 2px #000;text-stroke:1px #fff;}
#members .memberinfo .btn{position: absolute;top: 50%;right: 10%;}
#members .memberinfo .btn img{width:24%;}
#members .memberinfo .btn a{display:unset;}

#loginA{
		  width: 100%;
		  height: 100%;
		  position: fixed;
		  top: 0;
		  background: rgba(0,0,0,0.5);
		  z-index: 2;
	  }
#loginA .login{
		width:40%;
		height:100%;
		background: url(../img/loginbg.png) no-repeat;
		background-size:100%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -20%;
        margin-top: -20%;
		padding:12% 0 0;
		
	}
#loginA .login	.box{
  		width:80%;
		height:;
		margin:2% 0 0 12%;
		text-align:center;
	}
#loginA .login .box input{background:url(../img/login_inputbg.png) no-repeat;background-size:100%;
		width: 60%;
		padding: 20px;
		margin:2% 10%;
	}
	.sign{
		background: url(../img/loginbtn.png)no-repeat;background-size:100%;width: 50%;height: 10%;float:left;cursor:pointer;
	}
	.no{
		background: url(../img/cancel.png)no-repeat;background-size:100%;width: 50%;height: 10%; float:left;cursor:pointer;
	}
#loginA .login .btn{
		    width: 40%;
    padding: 20px;
    margin: 1% 0 0 27%;
	}
.close{position: absolute;right: -6%;top: 0;width: 30%;height: 30%;}
			.image-item{width: 192px;height: 140px;position: fixed;top: 32px;right: 2px;z-index: 1;cursor: pointer;}
			.image-item img{width: 100%;height: 100%;}