body{
	padding:0;
	margin:0;
	font-family: 'Noto Sans', sans-serif;
	color:#808285;
	background-image: url("../images/bg.png");
	background-repeat: repeat;
}

img{
	border: none;
	vertical-align: top;
}

#banner, #menu .inner{
	list-style: none;
	margin:0;
	padding:0;
}

/* trigger */
#trigger{
	position: relative;
	width: 59px;
    height: 46px;
    background-image: url(../images/trigger.png);
    background-repeat: no-repeat;
	position: absolute;
    top: 0px;
    left: 10px;
	display:none;
}

/* menu - login */
#menu_login{
	position: relative;
	top: -55px; 
	width: 280px;
	left: 70%;
}

#login_inner{
	position: absolute;
	border-radius: 5px;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);    
	top: -25px;
	background-color: #fff;
	padding: 10px;
}

#login_inner a {
	color:#92A543;
	text-decoration:none;
}

#login_inner  a.active{
	color:#e36500;
}


/* menu */
.inner,
#menu .inner{
	width:100%;
	max-width: 1000px;
	position: relative;
	margin:auto;
}

#menu .inner{
	text-align: center;
}

#banner{
	background-color: #fff;
	overflow: hidden;
}

#menu{
	width:100%;
	height:50px;
	background-color: #fed789;
	color:#fff;
	position: relative;
	z-index: 9;
}

#menu a{
	color: #92a543;
	display: block;
	width: 195px;
	text-align: center;
	text-decoration: none;
	line-height: 3;
	height: 50px;
	position:relative;
}

#menu .inner>li>a:before{
	content:"";
	display:block;
	position:absolute;
	height:20px;
	border-left:1px solid #fff;
	top:50%;
	transform: translateY(-50%);
}

#menu .inner>li:last-child a:after{
	content:"";
	display: block;
	position:absolute;
	height: 20px;
	border-left: 1px solid #fff;
	top:50%;
	transform: translateY(-50%);
	right:0;
}

#banner img{
	position:relative;
	left:50%;
	transform: translateX(-50%);
}

#menu .inner>li{
	display: inline-block;
	position: relative;
}

#menu .active{
	color:#e36500;
}

#menu .inner>li:hover .second_menu{
	display: block;
}

#menu .second_menu{
	position: absolute;
	width: 100%;
	top: 50px;
	padding: 0;
	background-color: #f1f1e5;
	box-shadow: 0px 2px 4px #aaa;
	display:none;
}

#menu .second_menu li{
	display: block;
}
#menu .second_menu li:hover a{
	background-color: #598e75;
	color:#fff;
}

/* menu - mb */
#overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99;
}

#nav_mb {
    position: fixed;
    top: 0;
    left: -532px;
    background-color: #fff;
    z-index: 999;
    height: 100%;
    transition: left 0.4s;
	background-color:#F1F1E5;
	width: 275px;
	font-size:18px;
}

#nav_mb.active{
	left:0;
}

#nav_mb ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav_mb #close {
    position: absolute;
    right: -30px;
    width: 30px;
    height: 30px;
    background-color: #333;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 0.75;
    cursor: pointer;
    font-weight: bold;
    display: none;
}

#nav_mb.active #close{
	display:block;
}

#nav_mb .top{
	background-color:#FAFFFF;
	padding:3% 0 3% 5%;
	border-radius: 3px;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	color:#92A543;
}

#nav_mb .top a{
	color:#92A543;
	text-decoration:none;
}

#nav_mb .top a.active{
	color:#e36500;
}

#nav_mb .top li{
	display:block;
}

/*#nav_mb .top li:nth-child(2){
	padding:0 10%;
}*/

.division {
    display: inline-block;
    margin: 0 12px;
}

#nav_mb .bottom li{
	color:#4A8469;
	padding:20px 30px;
}

#nav_mb .bottom a{
	color:#4A8469;
	text-decoration:none;
}

#nav_mb .bottom li.active a{
	color:#E36500;
}

#nav_mb .bottom #sub_menu{
	background-color:#FFF;
	display:none;
	width:100%;
}

#nav_mb .bottom #sub_menu li.active a{
	color:#E36500;
}

#nav_mb #sub_menu a{
	color:#808285;
	font-size:16px;
}

/* content */
#h2_before {
    background-image: url(../images/h2_before.png);
    background-repeat: no-repeat;
    height: 12px;
    display: inline-block;
    width: 18px;
}

#h2_after {
    background-image: url(../images/h2_after.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 12px;
}

#content{
	text-align: center;
	min-height: 682px;
	background-color: #FAFFFF;
	position: relative;
    z-index: 1;
    margin-top: -95px;
    padding: 95px 20px;
}

#content p:last-child{
	margin-bottom: 0;
}

.box-shadow{
	position: absolute;
	/* left: -96%; */
	height: 76px;
	box-shadow: -5px 3px 5px #aaa;
	/* width: 100%; */
	z-index: 2;
	background-color: #fff;
}

.title_inner{
	width: 100%;
    max-width: 1000px;
    position: relative;
    margin: 0 auto 20px auto;
    z-index:2;
}

h1 {
	color: #f59579;
	font-size: 26px;
	padding: 20px;
	border-bottom-right-radius: 40px;
	box-shadow: 5px 3px 5px #aaa;
	margin:0;
	width:630px;
	text-align: left;
	background:#FFF;
	font-weight:normal;
}

h1 img{
	vertical-align: middle;
	top: -3px;
	position: relative;
}

#h1_before{
	background-image:url(../images/h1_before.png);
	background-repeat:no-repeat;
    height: 14px;
	display: inline-block;
    width: 60px;
}

#h1_after{
	background-image:url(../images/h1_after.png);
	background-repeat:no-repeat;
	display: inline-block;
    width: 60px;
    height: 14px;
}


h2 {
	color:#768e12;
	text-align: center;
}

.column{
	display:inline-block;
	vertical-align: top;
	text-align: left;
}

.column p{
	margin: 5px;
}

.column h3{
	margin-top: 30px;
	margin-bottom: 10px;
}

/* login */
#userLogin input#username,#userLogin input#password{
	width: 200px;
}

.leftSide{
	border-radius:10px;
	box-shadow: 0px 0px 10px #ccc;
	margin:20px 2% 0 0;
	width:37%;
	box-sizing: border-box;
	background:#FFF;
}

.rightSide{
	width:57%;
	box-sizing: border-box;
}

.leftSide a{
	color:#808285;
	text-decoration: none;
}

.leftSide h2{
	padding:30px;
	font-weight: normal;
}

.leftSide .content{
	padding:0 30px 20px 30px;
}

.leftSide .content h3,.leftSide .content h3 a{
	color:#8cb533;
}

.leftSide .content > .h3_bk2,.leftSide .content > .h3_bk2 a{
	color:#b58285;
}

.leftSide .content .active a, .leftSide .content > .h3_bk2 .active a{
	color:#e36500;
}



.rightSide .content h3{
	color:#b58285;
}

.column h2{
	/* margin-top: 10px;
	margin-bottom: 10px; */
	margin:0;
}

#open{
	display:none;
	background-image:url(../images/open.png);
	background-repeat:no-repeat;
    background-size: 30px;
    width: 30px;
    height: 30px;
    position: relative;
    float: right;
}

.rightSide h2{
	margin: 30px 0;
	text-align: left;
}

.rightSide ul{
	list-style: none;
	padding:0;
	margin:0;
}

.rightSide ul a{
	text-decoration:none;
	color:#808285;
}

.structure_column{
	display:inline-block;
	width:30%;
	vertical-align: top;
	text-align: left;
	border-radius:10px;
	box-shadow: 0px 0px 10px #ccc;
	margin:20px 1%;
	background-color:#fff;
}

.structure_column h2::before{
	background-image:url(../images/h2_before.png);
	background-repeat:no-repeat;
    height: 12px;
	display: inline-block;
    width: 18px;
    content:"";
    margin-right: 8px;
}


.structure_column h2::after{
	background-image:url(../images/h2_after.png);
	background-repeat:no-repeat;
	display: inline-block;
    width: 18px;
    height: 12px;
    content:"";
    margin-left: 8px;
}


.structure_title{
	padding:30px;
}

.structure_leftSide h2{
	font-weight: normal;
    margin-bottom: 0;
}

.more{
	display:none;
	background-image:url(../images/more.png);
	background-repeat:no-repeat;
    background-size: 30px;
    width: 30px;
    height: 30px;
    position: relative;
    float: right;
    top: -36px;
}
.structure_leftSide .content{
	padding:0 30px 10px 30px;
}

.structure_leftSide .content a,.structure_center .content a,.structure_rightSide .content a{
	color: #808285;
	text-decoration: none;
}

.structure_leftSide .content h3{
	color: #8cb533;
}

.structure_leftSide .book_title{
    color: #768e12;
}

.structure_center .book_title{
	color:#6c5800;
}

.structure_center h2{
	color:#6c5800;
	font-weight: normal;
	margin-bottom: 0;
}

.structure_center .content{
	padding:0 30px 10px 30px;
}

.structure_center .content h3{
	color: #b58285;
}

.structure_rightSide .book_title{
	color:#9a985b;
}

.structure_rightSide h2{
	color:#9a985b;
	font-weight: normal;
	margin-bottom: 0;
}

.structure_rightSide .content{
	padding:0 30px 10px 30px;
}

.structure_rightSide .content h3{
	color: #5a8f75;
}



.book_title{
	font-weight:bold;
	font-size: 1.5em;
	text-align:center;
}



.chart{
	box-sizing: border-box;
	border:1px solid #E0E4E4;
	margin-bottom:20px;
}

.chart h3{
	padding:15px 12px 10px 12px;
	color:#fff;
	margin:0;
}

.chart .chart_topic.teacher_manual{
	background-color: #8cb533;
}

.chart .chart_topic.ppt{
	background-color: #feb044;
}

.chart .chart_content{
	background:#FFF;
	padding:30px 12px;
}

.chart .chart_content li{
	display:inline-flex;
    width: 49%;
    margin-bottom: 10px;
}

.chart_content img {
    margin: 0 5px
}

#userInfo,#userLogin {
	display: table;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0 1em;
}
#userInfo label,#userLogin label{
	color:#8CB433;
	font-weight:bold;
    margin-right: 10px;
}

.row {
    display: table-row;
}

.table_column {
    display: table-cell;
    text-align: left;
}

input{
	border:1px solid #D1D3D4;
	height: 25px;
	padding:0 10px;
	vertical-align: middle;
}

#submit {
    float: right;
    background-color: #A1B07D;
    border: none;
    color: white;
    width: 75px;
    border-radius: 5px;
    height: 35px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
}

#userLogin #keep_login {
    height: 15px;
}

#userLogin #words_forget{
	color:#808285;
	text-decoration:none;
	float:right;
}

.error{
	color:red;
}

#footer{
	text-align: center;
	background-color: #a1b07d;
	color:#fff;
	text-align: center;
	height:40px;
	line-height: 2.2;
}

@media only screen and (max-width:1000px){
	#trigger{
		display:block;
	}
	
	#menu{
		display:none;
	}
	
	#menu_login{
		display:none;
	}
	
	#content{
		min-height:initial;
		padding:95px 20px 175px 20px;
		font-size:14px;
	}
	
	.inner{
		width:initial;
		
	}
	
	h1{
		font-size:20px;
		padding:25px 15px;
		width:90%;
	}
	
	#h1_before{
		background-image:url(../images/h1_before_mobile.png);
		width: 47px;
		height: 11px;
		
	}

	#h1_after{
		background-image:url(../images/h1_after_mobile.png);
		width: 47px;
		height: 11px;
	}
	
	h2{
		font-size:18px;
	}
	
	#h2_before{
		background-image:url(../images/h2_before_mobile.png);
		width: 37px;
		height: 12px;
		background-size: 32px;
	}

	#h2_after{
		background-image:url(../images/h2_after_mobile.png);
		width: 37px;
		height: 12px;
		background-size: 32px;
	}
	
	
	h3{
		font-size:16px;
	}

	/* login */
	#userLogin input#username,#userLogin input#password{
		width: 100%;
	}

	#userLogin #words_forget{
		float: none;
		display:block;
	}
	
	.leftSide{
		width:100%;
		margin:20px 0;
	}
	
	/* .leftSide h2,.rightSide h2{
		font-size:36px;
	} */
	
	.leftSide h2{
		background-color:#E7F5F5;
		box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
		padding:15px;
	}
	
	#open{
		display:inline-block;
	}
	
	.leftSide .content{
		display:none;
	}
	
	.rightSide{
		width:100%;
	}
	
	
	.leftSide .content{
		display:none;
	}
	
	.chart .chart_content{
		padding:0 0 20px 0;
	}
	
	.chart .chart_content li{
		width:100%;
		display:block;
		padding: 30px 25px 10px 25px;
		/* font-size:28px; */
	}
	
	.chart .chart_topic{
		/* font-size:30px; */
		padding: 18px 25px;
	}
	
	#book_bottom{
		display:none;
	}
	
	/* Page - Structure */
	.structure_column{
		display:block;
		width:100%;
		margin:20px 0;
	}
	
	.structure_column h2{
		margin:0;
	}
	
	.more{
		display:inline-block;
	}

	.book_title{
	    font-size: 18px;
	}
	
	.structure_leftSide .structure_title{
		background-color:#F1F5E7;
	}
	
	.structure_leftSide .content{
		display:none;
	}
	
	.structure_rightSide .structure_title{
		background-color:#F1F5E7;
	}
	.structure_rightSide .content{
		display:none;
	}
	
	#footer{
		padding: 10px 0;
		font-size: 13px;
		height:initial;
		line-height:initial;
	}
}

@media only screen and (max-width:400px){
	h1{
		padding: 25px 5px;
		width:283px;
	}
	
	#h1_before{
		background-image:url(../images/h1_before_mobile2.png);
		width: 30px;
		height: 11px;
		
	}

	#h1_after{
		background-image:url(../images/h1_after_mobile2.png);
		width: 30px;
		height: 11px;
	}

	.table_column {
	    display: block;
	    text-align: left;
	}

	.words_forget{
		float:left;
		height:initial;
	}

	#submit {
 	   float: left;
	}
}