@charset "UTF-8";
/* CSS Document */


/************** wellcom page **************/

body {
	height: 100%;
	font-family: "Times New Roman";

}
#wellcome-bg {
	
	height: 100%;

}
#wellcome-bg img {
	height: auto;
	max-width: 100%;
}
#wellcome-bg .wellcompage {
	padding-top: 80px;
}
#wellcome-bg h1 {
	font-size: 24px;
	font-weight: 600;
	padding-bottom: 20px;
}
#wellcome-bg p {
	font-size: 16px;
	color: #fff;
	padding-top: 100px;
}
#wellcome-bg .btn-custom {
	color: #fff;
	background-color: #e34b4b;
	border-color: #e34b4b;
	border-radius: 5em;
	font-size: 15px;
	white-space: normal;
}
#wellcome-bg .btn-custom:hover {
	background-color: #cc3838;
	border-color: #cc3838;
}
#wellcome-bg .qrcode {
	padding-top: 20px;
}

@media (max-width: 575.98px) {
#wellcome-bg {

	height: 100%;

}
#wellcome-bg .wellcompage {
	padding-top: 0px;
	padding-bottom: 0px;
}
#wellcome-bg p {
	font-size: 12px;
	color: #fff;
	padding-top: 50px;
}
}

@media (min-width: 768px) and (max-width: 991.98px) {
#wellcome-bg {
	background-image: url(../img/wellcome-ba.jpg);
	height: 120vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#wellcome-bg .wellcompage {
	padding-top: 0px;
	padding-bottom: 0px;
}
#wellcome-bg p {
	font-size: 18px;
	color: #fff;
	padding-top: 50px;
}
#wellcome-bg h1 {
	font-size: 30px;
	font-weight: 600;
	padding-bottom: 20px;
}
#wellcome-bg .btn-custom {
	color: #fff;
	background-color: #e34b4b;
	border-color: #e34b4b;
	border-radius: 5em;
	font-size: 20px;
	white-space: normal;
}
}


/************** homepage ************/
.homepage {
	background-image: url(../img/../img/index_ba.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
}
.homepage .row {
	margin-left: 0px;
	margin-right: 0px;
}
.homepage .btn {
	margin-bottom: 20px;
	font-size: 1rem !important;
	font-weight: 600;
	border: 0px;
}
.homepage h2 {
	color: #fff;
	font-weight: 600;
}
.homepage p {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 20px;
}

#button .btn_custom {
	font-size: 1.3rem !important;
	color: #004c85;
	font-weight: 600;
	margin: 20px 0;
	white-space: normal;
}
.btn_custom {
	font-size: 1rem !important;
	color: #004c85;
	font-weight: 600;
	white-space: normal;
}
.btn_custom i {
	font-size: 1.6rem !important;
	color: #004c85 !important;
}
.homepage_KV {
	padding-bottom: 60px;
}
.homepage_KV .KVBOOK {
	background-image: url(../img/homepage_kv.png);
	background-repeat: no-repeat;
	width: 460px;
	height: 490px;
	display: block;
	background-position: center;
	position: relative;
}
.homepage_KV .KVBOOK #book {
	position: absolute;
	display: none;
}

@media (min-width: 1200px) {
.homepage_KV .KVBOOK #book {
	position: absolute;
	display: block;
	top: 26%;
	left: 31%;
}
}

@media (min-width: 1400px) {
.homepage_KV .KVBOOK #book {
	position: absolute;
	display: block;
	top: 26%;
	left: 33%;
}
}

@media (min-width: 1600px) {
.homepage_KV .KVBOOK #book {
	position: absolute;
	display: block;
	top: 26%;
	left: 36.3%;
}
}
.homepage_KV .KVBOOK .couple {
	position: absolute;
	bottom: 0px;
	right: 280px;
}
.homepage_KV .KVBOOK .child {
	position: absolute;
	bottom: 40px;
	right: 80px;
}
.homepage .hometop {
	margin-top: 10px;
}

@media (max-width: 575.98px) {
.homepage_KV .KVBOOK {
	background-image: url(../img/homepage_kv.png);
	background-repeat: no-repeat;
	width: 460px;
	height: 430px;
	display: block;
	background-position: center top;
	position: relative;
	background-size: 95%;
}
.homepage_KV .KVBOOK .couple {
	position: absolute;
	bottom: 80px;
	right: 180px;
}
.homepage_KV .KVBOOK .child {
	position: absolute;
	bottom: 60px;
	right: 30px;
}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
.homepage_KV .KVBOOK {
	background-image: url(../img/homepage_kv.png);
	background-repeat: no-repeat;
	width: 460px;
	height: 490px;
	display: block;
	background-position: center;
	position: relative;
	background-size: 95%;
	margin-bottom: 50px;
}
.homepage_KV .KVBOOK .couple {
	position: absolute;
	bottom: 0px;
	right: 230px;
}
.homepage_KV .KVBOOK .child {
	position: absolute;
	bottom: 40px;
	right: 70px;
}
}
#button {
	background-color: #004c85;
}
#banner {
	background-color: #f6f6f6;
	padding-top: 30px;
	padding-bottom: 50px;
}
#banner img {
	margin-top: 25px;
	width: 100%;
}
#qrcodebook {
	padding-top: 30px;
	padding-bottom: 30px;
}
.dropdown-language {
	padding-left: 20px;
	padding-top: 30px;
}
.dropdown-language .langname {
	color: #333;
	text-decoration: blink;
}
.dropdown-language a {
	text-decoration: blink;
}
.chineselogo {
	width: 40%;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
.chineselogo {
	width: 45%;
}
}
.m-tooltip {
	display: none;
	background-image: url(../img/btn_book.png);
	height: 170px;
	padding: 0px;
	width: 250px;
	font-size: 11px;
	color: #fff;
}





/************** Contact Us ************/

.container-top{ 
	background-image:url(../img/index_ba.jpg);
	height: 50px;
	background-position: top;
	background-repeat: no-repeat;
	display:block;
	width: 100%;
	position: fixed;
	z-index: 9;
}
.contact {
	padding-bottom: 80px;
	margin: 15px;
	padding-top: 80px;
}


.contact .findus a{
	text-decoration: none;
}

.contact h1 {
	font-weight: 600;
}
.contact h3 {
	color: #06659c;
	padding-bottom: 20px;
}
.contact p {
	color: #06659c;
	font-size: 1.3rem;
}
.contact i {
	font-size: 2.5rem;
}
.contact .btn {
	margin-bottom: 30px;
}
/************** booklist ************/	
@media (min-width: 575.98px) and (max-width: 1024px) {

.nonlink {pointer-events: none;
 cursor: default;} 
}


#drawingbooklist-top {
	display: block;
	padding-top: 10px;
	position: fixed;
	width: 100%;
	z-index: 9;
}
#drawingbooklist-top h3 {font-size: 24px;color: #ffffff;margin-bottom: 10px;}
#drawingbooklist-top h4 {font-size: 15px;color: #ffffff;margin-bottom: 0px;}
#drawingbooklist-top .breadcrumb {margin: 0;float: right;padding-bottom: 10px; font-size: 1.2rem;}

@media (max-width: 575.98px) {
#drawingbooklist-top .breadcrumb {
	margin: 0;
	float: left;
	padding: 0;
	font-size: 1.2rem;
}
}
#drawingbooklist-top .breadcrumb-item a {color: #fff;}
#drawingbooklist-top .breadcrumb-item {color: #fff;}




#booklist-top {
	display: block;
	padding-top: 10px;
	position: absolute;
	width: 100%;
	z-index: 9;
}
@media (min-width:992px){
#booklist-top {
	display: block;
	padding-top: 10px;
	position: fixed;
	width: 100%;
	z-index: 9;
}}
#booklist-top h3 {
	font-size: 24px;
	color: #ffffff;
	margin-bottom: 10px;
}
#booklist-top h4 {
	font-size: 15px;
	color: #ffffff;
	margin-bottom: 0px;
}
#booklist-top .breadcrumb {
	margin: 0;
	float: left;
	padding-bottom: 10px;
	font-size: 1.2rem;
	padding-left: 0;
}

@media (max-width: 575.98px) {
#booklist-top .breadcrumb {
	margin: 0;
	float: left;
	padding: 0;
}
}
#booklist-top .breadcrumb-item a {
	color: #fff;
}
#booklist-top .breadcrumb-item {
	color: #fff;
}


#select-list {
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #FFFFFF;
	border-bottom: solid 1px #e4e4e4;
}
#select-list .btn-select {
	background-color: #f6f6f6;
	color: #666;
	margin-right: 10px;
	padding: 12px 20px;
	font-size: 14px;
}
#select-list .btn-bottomline {
	color: #666;
	font-size: 15px;
}

@media (max-width: 575.98px) {
#select-list {
	padding-top: 10px;
	padding-bottom: 10px;
}
#select-list .btn-bottomline {
	color: #666;
	font-size: 14px;
}
}
#select-list .btn-bottomline.active {
	color: #004c85;
	background-image: url(../img/bottom_line.png);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 40px;
}
#select-list .btn-list {
	background-color: #666;
	color: #ffffff;
}
#select-list .btn_custom {
	padding: 12px 20px;
	font-size: 14px;
}
/***dropdown**/

#select-list .dropdown-menu .dropdown-submenu {
	position: relative;
}
#select-list .dropdown-menu .dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}
#select-list .dropdown-menu .dropdown-submenu:hover>.dropdown-menu {
	display: block;
}
#select-list .dropdown-menu .dropdown-submenu>a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #ccc;
	margin-top: 5px;
	margin-right: -10px;
}
#select-list .dropdown-menu .dropdown-submenu:hover>a:after {
	border-left-color: #fff;
}
#select-list .dropdown-menu .dropdown-submenu.pull-left {
	float: none;
}
#select-list .dropdown-menu .dropdown-submenu.pull-left>.dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}
.booklist-all .booklist-step {
	padding-bottom: 20px;
}
.booklist-all .booklist-step .stepall {
	height: 70px;
	border-bottom: solid 1px #dddddd;
	border-top: solid 1px #dddddd;
	background-image: url(../img/stepline_ba.png);
	background-repeat: no-repeat;
}
.booklist-all .booklist-step h4 {
	margin-bottom: 0px;
	font-style: italic;
	font-weight: 600;
}
.booklist-all .booklist-step h5 {
	margin-bottom: 0px;
	font-size: 16px;
	color: #666;
	font-weight: 400;
}
.booklist-all .booklist-step span {
	color: #004c85;
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
	padding-right: 5px;
}
.booklist-all .booklist-step i {
	font-size: 20px;
	padding-left: 50px;
	color: #d0d0d0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
.booklist-all .booklist-step .stepall {
	height: 70px;
	border-bottom: solid 1px #dddddd;
	border-top: solid 1px #dddddd;
	background-image: url(../img/stepline_ba_pad.jpg);
	background-repeat: no-repeat;
}
.booklist-all .booklist-step h4 {
	margin-bottom: 0px;
	font-style: italic;
	font-weight: 600;
}
.booklist-all .booklist-step h5 {
	margin-bottom: 0px;
	font-size: 16px;
	color: #666;
	font-weight: 400;
}
.booklist-all .booklist-step span {
	color: #004c85;
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
	padding-right: 0px;
}
.booklist-all .booklist-step i {
	font-size: 20px;
	padding-left: 0px;
	color: #d0d0d0;
}
}
.booklist-all {
	padding-top: 150px;
	padding-bottom: 20px;
}
.booktext h3 {
	font-size: 20px;
}

.classifcation .booktext p {
	font-size: 1rem;
	color: #000;
	padding: 0;
}

@media (max-width: 575.98px) {
.booklist-all {
	padding-top: 180px;
	padding-bottom: 20px;
}
.booktext h3 {
	font-size: 14px;
}
}
.abook {
	background-color: #f5f5f5;
	padding: 10px;
	border: solid 10px #fff;
}
.booklist-all .btn-abooklove {
	color: #999999;
	border-color: #999999;
	padding: 0.6em 0.6em;
	background-color: #f5f5f5;
	float: left;
}
.booklist-all .btn-abooklove.active {
	color: #ff4d4d;
	border-color: #ff4d4d;
}
.booklist-all .btn-abookassign {
	color: #999999;
	border-color: #999999;
	padding: 0.6em 0.6em;
	background-color: #f5f5f5;
	float: right;
}
.booklist-all .btn-abookassign.active {
	color: #004c85;
	border-color: #004c85;
}



/*** booktooltip***/

.booktooltip {
	/**display: inline-block;**/
	position: relative;
	text-align: left;
}
.booktooltip h3 {
	font-size: 14px;
	color: #666;
}
.booktooltip .text-content {
	padding: 10px 20px;
}
.booktooltip .right {
	min-width: 250px;
	max-width: 400px;
	top: 50%;
	left: 80%;
	margin-left: 20px;
	transform: translate(0, -50%);
	padding: 6px;
	color: #000;
	background-color: #fff;
	font-weight: normal;
	font-size: 13px;
	border-radius: 3px;
	position: absolute;
	z-index: 99999999;
	box-sizing: border-box;
	box-shadow: 0 1px 8px rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.8s;
}
.booktooltip:hover .right {
	visibility: visible;
	opacity: 1;
}
.booktooltip .right i {
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -12px;
	width: 12px;
	height: 24px;
	overflow: hidden;
}
.booktooltip .right i::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform: translate(50%, -50%) rotate(-45deg);
	background-color: #fff;
	box-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.booktooltip .right span {
	color: #fbc651;
	font-size: 1.2rem;
}
.booktooltip .right .btn-primary {
	background-color: #004c85;
	border: 0px;
}
/******left********/

.booktooltip .left {
	min-width: 250px;
	max-width: 400px;
	top: 50%;
	right: 90%;
	margin-left: 20px;
	transform: translate(0, -50%);
	padding: 6px;
	color: #000;
	background-color: #fff;
	font-weight: normal;
	font-size: 13px;
	border-radius: 3px;
	position: absolute;
	z-index: 99999999;
	box-sizing: border-box;
	box-shadow: 0 1px 8px rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.8s;
}
.booktooltip:hover .left {
	visibility: visible;
	opacity: 1;
}
.booktooltip .left i {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -12px;
	width: 12px;
	height: 24px;
	overflow: hidden;
}
.booktooltip .left i::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform:translate(-50%,-50%) rotate(-45deg);
	background-color: #fff;
	box-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.booktooltip .left span {
	color: #fbc651;
	font-size: 1.2rem;
}
.booktooltip .left .btn-primary {
	background-color: #004c85;
	border: 0px;
}
/******book Introduction*****/

#book-Introduction {
	padding-bottom: 50px;
	padding-top: 50px;
}
#book-Introduction .btn_custom {
	margin: 5px 0;
	white-space: normal;
	font-size: 14px;
}
#book-Introduction span {
	font-weight: 400;
}
#book-Introduction p {
	font-size: 15px;
}
#book-Introduction span.flaticon-star {
	color: #fbc651;
}

#book-Introduction .tags{
	padding-top: 10px;
}

#book-Introduction .tags .m-badge{
	border: solid 1px #c4c5d6;
	margin-left: 5px;
	padding: 7px 12px;
	font-size: 1rem;
	border-radius:0rem;
}
#assignhomework .modal-body span {
	float: right;
}
#assignhomework .modal-body h5 {
	padding-bottom: 8px;
}


/**popup**/


.steppop p {
	font-size: 14px;
	padding-top: 10px;
}


/**classifcation**/

#classifcation-top {
	background-image:url(../img/index_ba.jpg);
	background-position: top;
	background-repeat: no-repeat;
	display: block;
	padding-top: 10px;
	
	width: 100%;
	z-index: 9;
}


#classifcation-top h3 {font-size: 24px;color: #ffffff;margin-bottom: 10px;}
#classifcation-top h4 {font-size: 15px;color: #ffffff;margin-bottom: 0px;}
#classifcation-top .breadcrumb {margin: 0;float: right;padding-bottom: 10px;	font-size: 1.2rem;

}

@media (max-width: 575.98px) {
#classifcation-top .breadcrumb {
	margin: 0;
	position: relative;
	float: left;
	padding: 0;
	font-size: 1.2rem;
	
}
}
@media (min-width: 575.98px) {
#classifcation-top {

	position: fixed;

	}}
#classifcation-top .breadcrumb-item a {color: #fff;}
#classifcation-top .breadcrumb-item {color: #fff;}

.classifcation{
	padding-top: 150px;
	padding-bottom: 80px;
	
}

@media (max-width: 575.98px){
	.classifcation{
	padding-top: 20px;
	padding-bottom: 80px;
	
}
}




.classifcation .classbtn{
	margin-bottom: 20px;
	font-size: 1.3rem !important;
	font-weight: 600;
}



.classifcation .Beginner_btn{ color:#fff;  background-color: #999;}
.classifcation .Elementary_btn{color:#fff; background-color: #999;}
.classifcation .Lower-intermediate_btn{ color:#fff; background-color: #999;}
.classifcation .Intermediate_btn{color:#fff; background-color: #999;}
.classifcation .Upper-intermediate_btn{color:#fff; background-color: #999;}
.classifcation .Advanced_btn{color:#fff; background-color: #999;}
.classifcation .Picture_Book_btn{color:#fff; background-color: #999;}
.classifcation .Columns_btn{color:#fff; background-color: #999;}


.classifcation .Beginner_btn:hover{ color:#fff;  background-color: #d90000;}
.classifcation .Elementary_btn:hover{color:#fff; background-color: #ffbf00;}
.classifcation .Lower-intermediate_btn:hover{ color:#fff; background-color: #008c46;}
.classifcation .Intermediate_btn:hover{color:#fff; background-color: #d96d00;}
.classifcation .Upper-intermediate_btn:hover{color:#fff; background-color: #4c0066;}
.classifcation .Advanced_btn:hover{color:#fff; background-color: #001a66;}
.classifcation .Picture_Book_btn:hover{color:#fff; background-color: #00a3d9;}
.classifcation .Columns_btn:hover{color:#fff; background-color: #333333;}

.classifcation .Beginner_btn.active{ color:#fff;  background-color: #d90000;}
.classifcation .Elementary_btn.active{color:#fff; background-color: #ffbf00;}
.classifcation .Lower-intermediate_btn.active{ color:#fff; background-color: #008c46;}
.classifcation .Intermediate_btn.active{color:#fff; background-color: #d96d00;}
.classifcation .Upper-intermediate_btn.active{color:#fff; background-color: #4c0066;}
.classifcation .Advanced_btn.active{color:#fff; background-color: #001a66;}
.classifcation .Picture_Book_btn.active{color:#fff; background-color: #00a3d9;}
.classifcation .Columns_btn.active{color:#fff; background-color: #333333;}


.classifcation-select {
	border-bottom: 1px solid #ebedf2;
	width: 100%;
	height: 33px;
}

.classifcation-select a{
	color: #666;
	font-size: 1.3rem;
	padding: 15px;
}

@media (max-width: 575.98px){
.classifcation-select a{
	color: #666;
	font-size: 12px;
	padding: 15px 5px;
}

}


.classifcation-select a:hover{ text-decoration: none;}

.classifcation-select a.active {
	color: #004c85;
	background-image: url(../img/bottom_line.png);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 40px;
}

.classifcation p{
	color: #666;
	font-size: 1.3rem;
	padding: 20px;
	
}

#m_accordion_8 .m-accordion__item-body .accordion-text{
	width: 100%;
	display: table;
	border-bottom: 1px solid #999;
	margin-bottom: 20px;
}

#m_accordion_8 .m-accordion__item-body .accordion-text i{
	text-align: right;
	vertical-align: middle;
	display: table-cell;
	font-size: 1.3rem;
	color: #004c85;
}

#m_accordion_8 .m-accordion__item-body .accordion-text span.flaticon-star{
	color: #fbc651;
}




.classtooltip .top p{ font-size: 1.1rem; padding: 10px; margin: 0;}

.classtooltip {
    display:inline-block;
    position:relative;
    text-align:left;
}

.classtooltip .top {
    min-width:200px; 
    top:-10px;
    left:50%;
    transform:translate(-50%, -100%);
    /*padding:10px 20px;*/
    color:#444444;
    background-color:#FFFFFF;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.classtooltip:hover .top {
    visibility:visible; opacity:1;
}

.classtooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.classtooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#FFFFFF;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}


/********search*********/

.searchbar{
	padding-top: 140px;
	padding-bottom: 80px;
	
}

@media (max-width: 575.98px){
	.searchbar{
	padding-top: 20px;
	padding-bottom: 80px;
	
}
}

.searchbar .search-btn{
	color:#ffffff;
	background-color: #004c85;
	margin-top: 10px;
}



/**********teacher**********/
#teacher{ padding-top: 20px; padding-bottom: 80px;}

@media (min-width: 575.98px) {
#teacher{ padding-top: 80px; padding-bottom: 80px;}
}
#teacher .booklist-step {
	padding-bottom: 20px;
}
#teacher .booklist-step .stepall {
	height: 70px;
	border-bottom: solid 1px #dddddd;
	border-top: solid 1px #dddddd;
	background-image: url(../img/stepline_ba.png);
	background-repeat: no-repeat;
}
#teacher .booklist-step h4 {
	margin-bottom: 0px;
	font-style: italic;
	font-weight: 600;
}
#teacher .booklist-step h5 {
	margin-bottom: 0px;
	font-size: 16px;
	color: #666;
	font-weight: 400;
}
#teacher .booklist-step span {
	color: #004c85;
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
	padding-right: 5px;
}
#teacher .booklist-step i {
	font-size: 20px;
	padding-left: 50px;
	color: #d0d0d0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
#teacher .booklist-step .stepall {
	height: 70px;
	border-bottom: solid 1px #dddddd;
	border-top: solid 1px #dddddd;
	background-image: url(../img/stepline_ba_pad.jpg);
	background-repeat: no-repeat;
}
#teacher .booklist-step h4 {
	margin-bottom: 0px;
	font-style: italic;
	font-weight: 600;
}
#teacher .booklist-step h5 {
	margin-bottom: 0px;
	font-size: 16px;
	color: #666;
	font-weight: 400;
}
#teacher .booklist-step span {
	color: #004c85;
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
	padding-right: 0px;
}
#teacher .booklist-step i {
	font-size: 20px;
	padding-left: 0px;
	color: #d0d0d0;
}
}

ul.teachermenu{
	background-color: #fafafa;
	border: 1px solid #dddddd;
	padding: 15px;
	list-style:none;
	border-radius:10px;
}

ul.teachermenu li a{
	color: #333333;
	font-size: 1.3rem;
	line-height: 1.8;
}

ul.teachermenu li a:hover{
	color: #004c85;
	border-left: 3px solid #004c85;
	padding-left: 3px;
}

ul.teachermenu li a.active{
	color: #004c85;
	border-left: 3px solid #004c85;
	padding-left: 7px;
	font-weight: 700;
}

.right-header{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 1rem;
	border: 1px solid #dddddd;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}


.right-body{
	background-color: #fff;
	border: 1px solid #dddddd;
	padding: 20px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top: 0px;
	font-size: 1.2rem;
}
.right-body h4{ color:#004c85; }

.right-body span.namecolor{ color:#333;font-size: 1.1rem; }

.right-body .classifcation-select{ border: 0;}
.search-btn{ 
	color:#ffffff;
	background-color: #004c85;
}

.teachericon {
	font-size: 1.2rem;

}
.teachericon i{
	text-align: center;
	height: 34px;
	width: 34px;
	background-color: #fff;
	border: 1px solid #66676b;
	padding: 8px 0;
	border-radius:100px;
	margin: 2px;
	color: #66676b;
	font-size: 1.4rem;
	line-height: 0.9;
}

span.flaticon-star{
	color: #fbc651;
}

#teacher th.bookselect{
	text-align: left;
	padding: 20px;
}
#teacher th.bookselect .form-check-label{ font-size: 1.1rem; color: #666;}


.right-body .mynotes_ba{
	background-color: #f5f5f5;
	padding: 20px;
	border: 5px solid #fff;
}
.right-body .mynotes_ba h3{
	margin-top: 15px;
	font-size: 1rem;
	font-weight: bold;}

.right-body .mynotes_ba h5{
	font-size: 0.8rem;
	color: #666;
	word-wrap: break-word;
    word-break: break-all;
}

.right-body .mynotes_ba h6{
	font-size: 0.8rem;
	color: #00a0e9;
	word-wrap: break-word;
    word-break: break-all;
}



@media (min-width: 575.98px) {
.right-body .mynotes_ba h3{
	margin-top: 15px;
	font-size: 1.3rem;
	font-weight: bold;
}
	.right-body .mynotes_ba h5{
	font-size: 1rem;
	color: #666;
}
}



.right-header .btn-select {
	background-color: #f6f6f6;
	color: #666;
	margin-right: 10px;
	padding: 12px 20px;
	font-size: 14px;
}

.right-body .snotes_ba{
	border-bottom: 1px solid #eee;
	padding: 20px;
	border-left: 5px solid #fff;
	border-right: 5px solid #fff;
}

.right-body .snotes_ba .btn-secondary{
	border-color: #004c85;
	color: #004c85;
	padding-left: 30px;
	padding-right: 30px;
}

.Vocabulary .notearea h2{ 
	font-size: 1.8rem;
	color: #333;
}
.Vocabulary .notearea h3{ 
	font-size: 1.8rem;
	color: #004c85;
	font-weight: 500;
}
.Vocabulary .notearea h4{ 
	font-size: 1.3rem;
	color: #004c85;
}
.Vocabulary .notearea h5{ 
	font-size: 1.3rem;
	color: #666;
}

.Vocabulary .notearea p{ 
	font-size: 1.3rem;
	color: #333;
}

/**********teacher 筆記開始瞜**********/
.notecontent { font-size:1.3rem; line-height: 200%; padding: 15px 0; }
.notearea { border:1px solid #ebedf2; border-radius:1rem; padding: 30px 15px 5px 5px; box-shadow:3px 3px 2px #dddddd; margin-bottom: 15px; }
.notearea h5{padding-right:10px; }
.notearea h5 span{padding:3px 10px; } 
.notearea p{ color: #666666; font-size: 1.1rem;}

.notearea .alink { margin: 0; padding:6px 6px; background:#eeeeee; border-bottom: 1px solid #DDD; }
.notearea ul{list-style: none; margin: 0; padding:0; }
.notearea ul li{ float: left; position: relative; display: inline-block;padding: 0; margin:6px;}
.notearea ul li i{ font-size: 1.8rem;}
.notearea ul li a{ color: #000;}
.linknumber { display: block; color: #666666}
.notearea .fa-link{ font-size: 1.5rem;}
.notecolor span{display: inline-block;  margin-right:3px}
.notecolor .blue {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 12px; background:#5867DD; display:inline-block;  }
.notecolor .green {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 12px; background:#34BFA3; display:inline-block;  }
.notecolor .red {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 12px; background:#F4516C; display:inline-block;  }
.notecolor .purple {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 12px; background:#9816F4; display:inline-block;  }
.notecolor .orange {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 12px; background:#FF8000; display:inline-block;  }
@media (min-width: 575.98px) {
.notecolor .blue {width: 24px; height: 24px; display:inline-block; }
.notecolor .green {width: 24px; height: 24px; display:inline-block; }
.notecolor .red {width: 24px; height: 24px; display:inline-block; }
.notecolor .purple {width: 24px; height: 24px; display:inline-block; }
.notecolor .orange {width: 24px; height: 24px; display:inline-block; }
}
.note_reflections {background:#F6F6F6; border-radius: .25rem; padding: 15px; color: #666; }
#addnewnotes i{font-size: 1.8rem; margin-right: 3px;}
#teacher th {font-size:1.1rem; color: #333; font-weight: bold; }
#teacher td {font-size:1.2rem; color: #666; font-weight: normal; }
.close .fa-times-circle {font-size: 1.5rem; position: absolute; right: 15px; top:10px;}
.unlock .btn{ display: inline-block; width: 34px; height: 34px; background: url(../img/lock.png) center no-repeat #666666; border-radius: 17px;}
.unlock .active{ display: inline-block; width: 34px; height: 34px; background: url(../img/unlock.png) center no-repeat #4DA93A; border-radius: 17px;}
.btn-like .btn{ display: inline-block; background:#fff; color: #004C85; border: 1px solid #004C85;}
.btn-like .active{  display: inline-block; background:#004C85; color: #FFF; border: 1px solid #004C85;}
#teacher .date{color: #004C85}
#teacher  .score{color:#4CAC3D; font-size:2.2rem;}
#teacher select {
    height: 3.2rem;
    margin: 0 1.5rem 0 0;
    font-size: 1rem;
    font-family: inherit;
    line-height: normal;
    color: #666666;
    background-color: #f6f6f6;
    border-radius: 50PX;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url( ../img/arrow.png);
    background-size: 9px 6px;
    background-position: right center;
    background-origin: content-box;
	background-repeat: no-repeat;}

.teacherselect { padding-left: 2rem;}
.teacherselect option { font-size: 1rem;}
.teachericon .fa-question{ color: #fff; background: #666; font-size: 1.2rem;
}


/************** B2C ************/
.B2Chomepage {
	background-image: url(../img/../img/indexb2c_ba.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
}

.B2Chomepage .btn_custom{white-space: normal;}

.abookB2C {
	background-color: #f5f5f5;
	padding: 0px;
	border: solid 10px #fff;
	margin-bottom: 30px;
}

.B2Cfreebook{
	background-color: #f29b76;
	text-align: right;
	padding: 5px 23px 1px 2px;
	border-radius: 0px 0px 0px 20px;
	color: #fff;
	margin-left: 50%;
	
}

.B2Cfreebook h4{font-size: 1.2rem;}

.addtocart{ background-color: #fff; padding-top: 10px;}
.addtocart h4{color:#c54251; font-weight: 800;}
.addtocart del{color: #cfcfcf;}
.freebook{background-color: #f29b76; color: #fff;}

@media (max-width: 575.98px) {
.listb2c {
	padding-top: 220px;
	padding-bottom: 20px;
}

}

#shppinglist{
	padding-top: 100px;
	padding-bottom: 80px;
}

#shppinglist h3{
	font-weight: 800;
	padding-bottom: 30px;
	text-align: center;
}

#shppinglist img{ width: 15%;}

@media (max-width: 575.98px){
	#shppinglist img{ width: 100%;}
}

@media (max-width: 991.98px){
	.addtocart i{display: none;}
}

/************NEWS***********/

.newslist{
	padding-top: 50px;
	padding-bottom: 80px;
	
}

.newslist h5{color: #004c85; font-weight: 600;}

.newslist h3{font-weight: 800;}

.newslist p{color: #666;}

.newslist .search-btn:hover{color: #fff;}


/************About Us***********/
.aboutus{
	padding-top: 30px;
	padding-bottom: 80px;
	
}
@media ( min-width:576px ){
.aboutus{
	padding-top: 120px;
	padding-bottom: 80px;
	
}
}