@CHARSET "UTF-8";
/*general START*/
*{
	color:#4A4A4A;
	font-family:微軟正黑體,Arial;
}
html,body{
	width:100%;
	height:100%;
}
.main{
	margin:0 auto;
	width:1280px;
}
.main-bg{
	background-image:url('../../images/backend/bg.png');
	background-size:auto 100%;
	background-repeat:repeat-x;
    background-attachment: fixed;
	width:100%
}
.month-only .ui-datepicker-calendar {
    display: none;
}
#loading{
    width: 100%;
    height: 100%;
}
#loading img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 70px;
}
.center-container{
	text-align:center;
}
.clear-fix{
	clear:both;
}
.btn{
	text-align:center;
}
.gray-btn{
	background: rgba(253,253,253,1);
	background: -moz-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(253,253,253,1)), color-stop(100%, rgba(230,228,228,1)));
	background: -webkit-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -o-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -ms-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: linear-gradient(to bottom, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e6e4e4', GradientType=0 );
	border-radius:5px;
	border:1px solid #DFDFDF;
	padding:5px 10px;
	text-decoration:none;
	display:inline-block;
}
.gray-btn:hover{
	background:none;
	background-color:#E4E4E4;
}
.gray-btn.active{
	background: rgba(0,162,154,1);
	background: -moz-linear-gradient(top, rgba(0,162,154,1) 0%, rgba(46,167,224,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,162,154,1)), color-stop(100%, rgba(46,167,224,1)));
	background: -webkit-linear-gradient(top, rgba(0,162,154,1) 0%, rgba(46,167,224,1) 100%);
	background: -o-linear-gradient(top, rgba(0,162,154,1) 0%, rgba(46,167,224,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,162,154,1) 0%, rgba(46,167,224,1) 100%);
	background: linear-gradient(to bottom, rgba(0,162,154,1) 0%, rgba(46,167,224,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a29a', endColorstr='#2ea7e0', GradientType=0 );
	color:#FFF;
}
.red-btn{
	background: rgba(208,1,27,1);
	background: -moz-linear-gradient(top, rgba(208,1,27,1) 0%, rgba(167,0,21,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(208,1,27,1)), color-stop(100%, rgba(167,0,21,1)));
	background: -webkit-linear-gradient(top, rgba(208,1,27,1) 0%, rgba(167,0,21,1) 100%);
	background: -o-linear-gradient(top, rgba(208,1,27,1) 0%, rgba(167,0,21,1) 100%);
	background: -ms-linear-gradient(top, rgba(208,1,27,1) 0%, rgba(167,0,21,1) 100%);
	background: linear-gradient(to bottom, rgba(208,1,27,1) 0%, rgba(167,0,21,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0011b', endColorstr='#a70015', GradientType=0 );
	border-radius:5px;
	border:1px solid #DFDFDF;
	padding:5px 10px;
	text-decoration:none;
	display:inline-block;
	color:#FFF;
}
.red-btn:hover{
	background:none;
	background-color:#555;
}
.default-btn{
	border-radius:5px;
	border:1px solid #4A4A4A;
	background-color:#FFF;
	padding:5px 10px;
	text-decoration:none;
	display:inline-block;
}
.default-btn:hover{
	border: 1px solid #B92525;
	color:#B92525;
}
.default-btn.active{
	border: 1px solid #B92525;
	color:#B92525;
}
.back-btn{
    border-radius: 5px;
    background-color: #FFF;
    padding: 5px 20px 5px 10px;
    box-shadow: inset 0px 0px 5px #AAA;
    font-size: 12px;
    text-decoration: none;
    float: right;
	line-height: 15px;
}
.back-btn img{
    width: 15px;
    vertical-align: middle;
    margin-right: 10px;
}
/*表單START*/
.main>.page-main-block{
	width:95%;
	margin:0 auto;
    padding-top: 50px;
}
.main>.page-main-block .form-box{
	width:100%;
}
.page-main-block{
    padding-top: 50px;
}
.right-content>.page-main-block{
    padding-top: 28px;
}
.page-main-block .main-topic{
	margin-bottom: 10px;
}
.page-main-block .main-topic span:first-child{
    font-size: 20px;
    margin: 8px 0;
    display: block;
}
.page-main-block .main-topic .bottom-border{
	background-image:url('../../images/backend/Separate.png');
	background-size:100% 100%;
	height:5px;
	display:block;
}
.form-box{
    width: 95%;
    border: 1px solid #DFDFDF;
    border-top:none;
    background-color: rgba(255,255,255,0.9);
    position: relative;
    margin: 0 auto;
}
.my-account .form-box{
	width:80% !important;
}
.form-box *{
	font-size:14px;
}
.form-box .return-btn{
    background-image: url(../../images/backend/Button_color_blocks.png);
    background-size: 100% 100%;
    display: inline-block;
    font-size: 14px;
    color: #FFF;
    text-decoration:none;
    padding: 8px 20px;
    float: right;
    margin: 15px 15px 0 0;
}
.form-box .return-btn img{
    height: 14px;
}
.form-box .sub-topic{
	background: rgba(253,253,253,1);
	background: -moz-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(253,253,253,1)), color-stop(100%, rgba(230,228,228,1)));
	background: -webkit-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -o-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -ms-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: linear-gradient(to bottom, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e6e4e4', GradientType=0 );
    border: 1px solid #DFDFDF;
    font-size: 15px;
    padding: 10px;
    line-height: 24px;
}
.form-box>.form-input{
    margin: 20px 0;
    font-size:14px;
}
.form-box .for-show label{
	vertical-align: top;
}
.form-box>.form-input label{
    width: 15%;
    display: inline-block;
    padding-left: 15%;
}
.form-box>.form-input .show-data-outer{
	display:inline-block;
    width: 55%;
}
.form-box>.form-input .show-data-outer .show-data{
	display: inline-block;
    width: 100%;
	line-height: 18px;
}
input[type='text'],
input[type='password']{
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    padding: 5px;
}
.form-box>.form-input input[type='text'],
.form-box>.form-input input[type='password']{
    width: 50%;
}
.form-box>.form-input.authen input[type='text'],
.form-box>.form-input.authen input[type='password']{
    width: 28% ;
}
.form-box .authen img{
    vertical-align: middle;
    margin-left: 3%;
    max-width: 19%;
}
.form-box>.form-input.submit{
	text-align:center;
}
.form-box input[type='submit']{
    background-image: url(../../images/backend/button_Send.png);
    background-size: 100% 100%;
    border: none;
    background-color: #FFF;
    color: #FFF;
    padding: 10px 30px;
    min-width: 140px;
    cursor:pointer;
}
.form-box .bottom-border{
    width: 100%;
    position: absolute;
    bottom: -5px;
    height: 15px;
    background-image: url(../../images/backend/bottom_box_line.png);
    background-size: 100% 100%;
}
.form-box>.form-input .date-range{
    display: inline-block;
}
.form-box>.form-input .date-range span{
    font-size: 12px;
}
.form-box>.form-input .date-range input[type='text']{
    width: 35%;
    margin: 0 3px;
}
.form-box .form-input .radio{
    display: inline-block;
}
.form-box .form-input .radio .radio-each{
    display: inline-block;
    margin-right: 10px;
}
.form-box .form-input .radio .radio-each span{
    display: inline-block;
    background: rgba(253,253,253,1);
	background: -moz-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(253,253,253,1)), color-stop(100%, rgba(230,228,228,1)));
	background: -webkit-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -o-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: -ms-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	background: linear-gradient(to bottom, rgba(253,253,253,1) 0%, rgba(230,228,228,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e6e4e4', GradientType=0 );
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    padding: 8px;
    width: 80px;
    text-align: center;
    cursor:pointer;
}
.form-box .form-input .radio .radio-each span.active{
	background:none;
    background-color: #B92525;
    color: #FFF;
}
.form-box .form-input .radio .radio-each input[type='radio']{
	display:none;
}

.form-box .form-input .radio .radio-each span.active{
	background:none;
    background-color: #B92525;
    color: #FFF;
}
.form-box .form-input select{
	padding:5px;
	border-radius:5px;
	margin-right:10px;
}
.form-box .form-group-area{
    background-color: #EEE;
    width: 86%;
    padding: 10px 2%;
    border-radius: 8px;
    float: right;
}
.form-box .form-group-area .form-input{
    margin: 20px 0;
}
.form-box .form-group-area .form-input label{
    width: 55px;
    display: inline-block;
}
.form-box .form-group-area .form-input .checkbox{
    display: inline-block;
}
.form-box .form-group-area .form-input .horizontal .checkbox-each{
    display: inline-block;
    margin-right: 5px;
}
.form-box .form-group-area .form-input select{
    width: 50%;
    padding: 5px;
    border-radius: 5px;
}
.form-box .form-group-area .form-input .vertical .checkbox-each{
    margin-bottom: 5px;
}
.form-box>.table-area table{
    border-collapse: collapse;
    margin: 15px 2.5%;
    font-size: 12px;
    width: 95%;
}
.form-box>.table-area table tr{

}
.table-area .wide-btn{
	min-width:220px;
}
.wide-btn .btn{
    vertical-align: middle;
    margin: 0 5px;
}
.form-box>.table-area table tr th{
    border-bottom: 1px solid #DFDFDF;
    padding: 15px 5px;
    text-align:center;
}
.form-box>.table-area table tr td{
	border-bottom:1px dashed #DFDFDF;
    padding:10px 5px;
    text-align:center;
    vertical-align: middle;
}
.table-area .pagination{
    text-align: center;
}
.table-area .pagination ul{
    display: inline-block;
    margin-bottom: 20px;
}
.table-area .pagination li{
	float: left;
    padding: 7px;
    border-radius: 5px;
    font-size: 12px;
    cursor:pointer;
}
.table-area .pagination li:hover{
	color:#B92525;
}
.table-area .pagination li.prev{
    background-color: #DFDFDF;
}
.table-area .pagination li.next{
	background-color: #DFDFDF;
}
.table-area .pagination li.active{
	color:#B92525;
}
.search-area{
    float: left;
    margin-top: 15px;
    font-size: 12px;
    width: 95%;
    padding: 0 2.5%;
}
.search-area .search-btn{
	float:right;
}
.search-area>.form-input{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
.search-area>.form-input label{
	margin-right:5px;
}
/*表單END*/

/*一般按鈕START*/
.general-btn{
    display: inline-block;
    padding: 10px 30px;
	background-size:100% 100%;
	text-decoration:none;
	color:#FFF;
    background-color: initial;
    border: none;
}
.light-orange-img-bg{
	background-image:url('../../images/frontend/btn.png');
}
.orange-img-bg{
	background-image:url('../../images/frontend/Picturebook.png');
}
.light-gray-img-bg{
	background-image:url('../../images/frontend/background_button_gray.png');
}
.gray-img-bg{
	background-image:url('../../images/book/gray_blocks_s.png');
}
.green-img-bg{
	background-image:url('../../images/frontend/Elementary.png');
}
.dark-green-img-bg{
	background-image:url(../../images/backend/Button_color_blocks.png);
}
.red-img-bg{
	background-image:url('../../images/frontend/Lower-intermediate.png');
}
.dark-red-img-bg{
	background-image:url('../../images/frontend/Group3Copy4.png');
}
.blue-img-bg{
	background-image:url('../../images/frontend/Intermediate.png');
}
/*一般按鈕END*/
/*常用背景色START*/
.orange-bg{
	background-color:#F57E20;
}
.green-bg{
	background-color:#41AB5F;
}
.red-bg{
	background-color:#BD3B40;
}
.blue-bg{
	background-color:#2D74B0;
}
.orange-font{
	color:#F57E20;
}
.green-font{
	color:#41AB5F;
}
.red-font{
	color:#BD3B40;
}
.blue-font{
	color:#2D74B0;
}
/*常用背景色END*/


/*純文字框START*/
.main .middle-box{
	width:70%;
    border: 1px solid #DFDFDF;
	position:absolute;
	top:60px;
	right:0;
	left:0;
	bottom:0;
	margin:auto;
}
.normal-paragraph{
    padding: 30px 30px 30px 50px;
}
.normal-paragraph h1{
    font-size: 26px;
    font-weight: bold;
    margin: 25px 0;
}
.normal-paragraph h2{
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
}
.normal-paragraph p{
    line-height: 25px;
    margin: 20px 0;
}
/*純文字框END*/

/*前台的管理表格選單START*/
.top-menu-bar{
    margin-bottom: 15px;
    text-align: center;
}
.top-menu-bar ul{
    background-image: url(../../images/frontend/my_account.png);
    background-size: 100% 100%;
    display: inline-block;
    padding: 0 20px;
}
.top-menu-bar ul li{
    display: inline-block;
    margin: 10px 16px;
}
.top-menu-bar ul li:hover a{
	border-bottom:1px solid #B92525;
}
.top-menu-bar ul li.active a{
	border-bottom:1px solid #B92525;
}
.top-menu-bar ul li a{
    text-decoration: none;
    color: #FFF;
    font-size: 14px;	
}
/*前台的管理表格選單END*/

/*黑色燈箱START*/

.black-full-bg{
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
}
.black-full-bg .alert-box{
    background-color: #FFF;
    border-radius: 5px;
    width: 400px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    display: inline-table;
}
.black-full-bg .alert-box .alert-msg{
    padding: 20px;
    line-height: 24px;
    font-size: 14px;
}
.black-full-bg .alert-box .alert-button{
    border-top: 1px solid #DDD;
}
.black-full-bg .alert-box .alert-button span.close-alert{
    float: right;
    color: #59A3E8;
    margin: 10px;
    margin-right: 20px;
    font-size: 14px;
    cursor:pointer;
}
/*黑色燈箱END*/

/*書籍通用START*/
.top-title{
    padding: 0 3%;
    margin-top: 40px;
}
.top-title .level-title{
    text-align: center;
    float: left;
    font-size: 20px;
    padding: 15px 30px;
}
.top-title .title-right{
    float: left;
}
.top-title .title-right .pointer{
    float: right;
    margin-right: 5%;
}
.top-title .title-right .pointer a{
    text-decoration: none;
    font-size: 14px;
    margin: 0 10px;
}
.top-title .title-right>img{
    width: 106%;
    margin: 10px;
}

.top-title .title-right .all-single{
    float: right;
    margin-right: 5%;
    text-decoration: none;
    background-color: #DDD;
    padding: 15px;
    border-radius: 30px;
    font-size: 14px;
}
.books-main .left-options{
    padding-top: 15px;
}
.books-main .left-options a{
	position:relative;
}
.books-main .left-options a.active:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #000000;
    right: -15px;
    top: 43%;
}
.books-main .left-options .general-btn{
    padding: 10px 15px;
}
.books-main .right-content{
	padding-top:26px;
}
.books-main .pagination{
	width:93%;
}
.books-rows{
    margin-bottom:70px;
}
.books-rows>li{
	position: relative;
    margin-top: 85px;
}
.books-rows>li:first-child{
    margin-top: 0;
}
.books-rows li.clear-fix:after{
    content: "";
    height:0;
}
.books-rows li:after{
    content: "";
    background-image: url(../../images/book/132123.png);
    background-size: 100% 500%;
    background-position-y: -110px;
    background-repeat: no-repeat;
    height: 35px;
    width: 93%;
    position: absolute;
    left: 0;
    bottom: -60px;
}
.each-row{
    width: 95%;
    text-align:center;
}
.each-row>li{
    display:inline-block;
    text-align: center;
}
.vertical-books .each-row>li{
    width: 22%;
}
.horizontal-books .each-row>li{
    width: 48%;
}
.each-row>li a{
	text-decoration:none;
}
.each-row>li.clear-fix{
	width:0;
}
.vertical-books .each-row>li img{
    background-size: 95% 98%;
    background-position: 8px 9px;
    background-repeat: no-repeat;
    padding: 13px 16px;
    width: 67%;
}
.horizontal-books .each-row>li img{
    background-size: 100% 100%;
    padding: 13px 16px;
    width: 70%;
}
.each-row>li span{
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
.each-row>li span.book-name{
    margin-top: 15px;
}
.each-row>li span.book-sub-name{
    font-size: 12px;
    margin-top: 5px;
}
.each-row>li span.buy-date{
	margin-top:15px;
	color:#9F5000;
    font-weight: bold;
}
.left-options .left-how-to{
    margin-top: 100px;
}
.left-options .left-how-to h1{

}
.left-options .left-how-to>img{
    width: 60%;
    height: 10px;
    margin-left: 25px;
}
.left-options .left-how-to li a.active:after{
    border-color: transparent transparent transparent #FFF;
    right: 15px;
}


.each-row.free-download>li{
    width: 100%;
}
.each-row>li.row-title{
	text-align: left;
    width: 100%;
    margin: 15px 0 40px 25px;
}
.each-row.free-download>li a>img{
    background-image: none !important;
    width: 18%;
    vertical-align: top;
}
.each-row.free-download .free-intro{
    display: inline-block;
    width: 20%;
    text-align: left;
    margin-top: 25px;
}
.each-row.free-download .free-title{
    line-height: 25px;
}
.each-row.free-download .free-title h1{
    font-size: 20px;
}
.each-row.free-download .free-title h2{
    font-size: 14px;
}
.each-row.free-download .free-content{
    margin-top: 25px;
    line-height: 25px;
}
.each-row.free-download .free-content span{
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.each-row.free-download .download-link{
    text-align: center;
    margin-top: 45px;
}
.each-row.free-download .download-link a{
    display: inline-block;
}
.horizontal-books .each-row .book-titles{
    width: 57%;
    display: inline-block;
    vertical-align: bottom;
}
.vertical-books  .each-row .book-titles{
    display:block;
}
.horizontal-books .each-row a.buy-link{
    width: 15%;
    display: inline-block;
    padding: 5px;
}
.vertical-books .each-row a.buy-link{
    width: 30%;
    display: inline-block;
    padding: 5px;
    margin-top: 10px;
}
.each-row a.buy-link>img{
	background-image: none !important;
    width: 20px;
    vertical-align: middle;
    padding: 0;
}
.each-row a.buy-link>span{
    display: inline-block;
    color: #FFF;
}
.category-label{
    clear: both;
    width: 90%;
    margin: 0 auto;
}
.category-label>div{
    display: inline-block;
}
.general-separator{
	width:100%;
	margin-bottom:30px;
}
/*書籍通用END*/

/*書籍列表START*/
.books-content{

}
.books-content .left-options{
    width: 25%;
    padding-top: 30px;
}
.books-content .left-options>img{
    width: 240px;
}
.book-title{
    text-align: left;
}
.book-title span{
    display: block;
    margin: 5px 0;
}
.book-title ul{
    margin-top: 65px;
}
.book-title ul li{
    display: inline-block;
}
.book-title ul li img{
    width: 30px;
}
.book-title span:first-child{
    font-size: 24px;
}
.book-title span>img{
    margin: 0 2px;
    vertical-align: bottom;
    width: 30px;
}
.book-title span>img:first-child{
	margin-left:10px;
}
.books-content .left-options .book-title{
    padding-left: 17%;
    margin-top: 20px;
}
.books-content .left-options .book-desc{
    text-align: left;
    padding: 0 17%;
    margin-top: 40px;
    line-height: 24px;
    font-size: 14px;
}
.books-content .right-content{
    width: 75%;
    padding-top: 30px;
}
.books-content .right-content>.catalog{
    display: inline-block;
}
.books-content .right-content .main-list{
    width: 85%;
    padding: 20px 5%;
    background-image: url(../../images/book/bgbg.png);
    background-size: 100% auto;
    background-repeat: repeat-y;
    margin: 20px 0 40px 0;
}
.books-content .right-content .main-list>li{
	border-bottom: 1px dashed #000;
    padding: 20px 0;
}
.books-content .right-content .main-list>li .list-title{
    
}
.books-content .right-content .main-list>li .list-title .title-left{
    float: left;
    position:relative;
    padding-left: 15px;
}
.books-content .right-content .main-list>li .list-title .title-left:before{
    content: "";
    position: absolute;
    width: 5px;
    height: 95%;
    left: 0;
    top: 0;
    border-radius: 5px;
}
.books-content .right-content .main-list>li .list-title .title-left span{
    margin-bottom: 10px;
}
.books-content .right-content .main-list>li .list-title .title-right{
    float: right;
    padding-right: 20px;
}
.books-content .right-content .main-list>li .list-title .title-right>span{
    padding: 10px 20px;
    background-color: yellow;
    border-radius: 13px;
    display: inline-block;
    cursor:pointer;
}
.books-content .right-content .main-list>li .list-title .title-right .stars-level{
    padding: 10px 5px;
}
.books-content .right-content .main-list>li .list-title .title-right .stars-level img{
    width: 20px;
    margin-right: 5px;
}
.books-content .right-content .main-list>li .list-details{
	position:relative;
}
.books-content .right-content .main-list>li .list-details>img{
    background-image: url(../../images/book/目錄捲軸.png);
    background-size: 100% 100%;
    width: 120px;
    padding: 40px 30px;
    float: left;
}
.books-content .right-content .main-list>li .list-details ul{
    float: left;
    margin-top: 25px;
    margin-left: 30px;
}
.books-content .right-content .main-list>li .list-details ul li{
    margin-bottom: 20px;
}
.books-content .right-content .main-list>li .list-details ul li a{
	text-decoration:none;
}
.books-content .right-content .main-list>li .list-details ul li span{
    display: inline-block;
    position: relative;
    padding-left: 15px;
}
.books-content .right-content .main-list>li .list-details ul li span:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #FFF;
    top: 14px;
    right: 12px;
}
.books-content .right-content .main-list>li .list-details ul li p{
    width: 300px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 10px;
    font-size: 14px;
}
.summary-area{
    position: absolute;
    width: 619px;
    background-image: url(../../images/book/summer_haver_dialog_box.png);
    background-size: 100% 100%;
    right: 0;
    top: -36px;
    z-index: 10;
}
.summary-area p{
    padding: 30px;
    position: absolute;
    top: 17%;
    line-height: 20px;
    font-size: 14px;
}
/*書籍通用END*/

/*書籍互動START*/
.book-main-block{
    width: 90%;
    margin: 0 auto;
    margin-top:20px;
    padding-bottom: 70px;
}
.book-main-block .title-bar{

}
.book-main-block .title-bar .left-title{
    float: left;
}
.book-main-block .title-bar .right-title{
    float: right;
    padding-right: 40px;
}
.book-main-block .title-bar .right-title span:first-child{
    font-size: 16px;
}
.book_wrapper .text-page{
    padding: 50px;
    height:360px;
}
.book_wrapper .text-page .chinese-area{
    font-size: 22px;
    letter-spacing: 3px;
    line-height: 40px;
}
.book_wrapper .text-page .chinese-area .play{
    vertical-align: middle;
    height: 22px;
    cursor: pointer;
}
.book_wrapper .text-page .eng-area,.book_wrapper .text-page .pinyin-area{
    font-size: 20px;
    line-height: 40px;
    margin-top: 20px;
    display:none;
}
.book-main-block .control-panel{

}
.book-main-block .control-panel>div{
	float:left;
}
.book-main-block .control-panel .clear-fix{
	float:none;
}
.book-main-block .control-panel .picture-text-switch{
    text-align: center;
    margin-right: 30px;
}
.book-main-block .control-panel .picture-text-switch>img{
    height: 75px;
    margin-bottom: 10px;
}
.book-main-block .control-panel .picture-text-switch>div{

}
.book-main-block .control-panel .picture-text-switch>div a.active{
	color:blue;
}
.book-main-block .control-panel .picture-text-switch>div a{
    margin: 0 10px;
    text-decoration: none;
}
.book-main-block .control-panel .function-panel{
    background-color: #EEE;
    padding: 15px;
    width: 70%;
}
.book-main-block .control-panel .function-panel .text-size{
    display: inline-block;
    vertical-align: middle;
}
.book-main-block .control-panel .function-panel .text-size li{
    float: left;
    margin: 0 10px;
    vertical-align: middle;
    cursor: pointer;
}
.book-main-block .control-panel .function-panel .text-size li img{
    width: 40px;
}
.book-main-block .control-panel .function-panel .panel-list{
    display: inline-block;
    vertical-align: middle;
}
.book-main-block .control-panel .function-panel .panel-list li{
    float: left;
    text-align: center;
    margin: 0 10px;
    cursor: pointer;
    position:relative;
}
.book-main-block .control-panel .function-panel .panel-list li.active span{
	color:#B92525;
}
.book-main-block .control-panel .function-panel .panel-list li.active:after{
    content: "";
    position: absolute;
    height: 5px;
    width: 100%;
    background-color: #B92525;
    bottom: -15px;
    left: 0;
}
.book-main-block .control-panel .function-panel .panel-list li.play-all{
    border-left: 1px solid #AAA;
    padding-left: 20px;
}
.book-main-block .control-panel .function-panel .panel-list li img{
    width: 50px;
    display: block;
    margin: 0 auto;
}
.book-main-block .control-panel .function-panel .panel-list li span{
    margin-top: 10px;
    display: inline-block;
}
.player-controller{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.player-controller ul{
	display:block;
}
.player-controller ul li{
    display: inline-block;
    cursor: pointer;
    margin: 0 10px;
    margin-bottom: 10px;
}
.player-controller ul li img{
    height: 17px;
}
.player-controller .timer{

}
.book-main-block .control-panel>.separator{
	width:110%;
	margin:20px 0;
}
.book-main-block .activity-block{
    background-color: rgba(250,250,250,0.9);
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 20px 0 40px 0;
    display:none;
}
#voc-area{
	display:block;
}
.book-main-block .activity-block:after{
    content: "";
    background-image: url(../../images/book/質感紙張背景.png);
    background-size: 100% 100%;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -18px;
    left: 0;
}
.book-main-block .vocab-list{
	width:90%;
}
.book-main-block .vocab-list>li{
	position:relative;
}
.book-main-block .vocab-list>li:before{
	content:"";
	position:absolute;
	width:10px;
	height:100%;
	left:0;
	top:0;
}
.picture-display .book-left,.picture-display .text-book-wrapper{
	display:none;
}
.picture-display .book-right{
	width:100%
}
.text-display .book-left{
    width: 20%;
    float: left;
}
.text-display .book-right{
    width: 80%;
    float: right;
}
.text-display .function-panel{
	width:63% !important;
}
.text-display .control-panel{
	margin-top:20px;
}
.text-display .panel-list li{
    margin: 0 15px !important;
}
.text-display .function-panel .player-controller,.text-display .book_wrapper,.text-display .function-panel .play-all{
	display:none !important;
}
.text-display .activity-block{
    float: left;
    margin: 0 5%;
}
.img-with-frame{
    background-image: url(../../images/book/目錄捲軸.png);
    background-size: 100% 100%;
}
.book-main-block .book-display-img{
	
}
.book-main-block .book-display-img img{
    height: 140px;
	padding:40px 30px;
}
.activity-block .quiz-timer{
    background-image: url(../../images/book/quiz-time.png);
    background-size: 100% 100%;
    position: absolute;
    padding: 15px 19px 30px 38px;
    right: 22px;
}
.activity-block .quiz-timer span{
	    color: #503400;
    font-weight: bold;
}
.activity-block .quiz-ques{
    width: 80%;
    padding: 20px 50px;
}
.activity-block .quiz-ques>li{
    border-top: 1px dashed #AAA;
    padding: 20px 0;
}
.activity-block .quiz-ques>li h5{

}
.activity-block .quiz-ques>li h5 .ques-no{
    color: #F6A623;
    font-weight: bold;
    font-size: 24px;
    display: inline-block;
    margin-right: 10px;
}
.activity-block .quiz-ques>li ul{
    margin-left: 45px;
    margin-top: 10px;
}
.activity-block .quiz-ques>li ul>li{
    margin-top: 10px;
}
.activity-block .quiz-ques>li ul>li input[type='radio']{

}
.activity-block .quiz-ques>li ul>li label{

}
#quiz-area input[type='submit']{
    float: right;
    margin-right: 65px;
    width: 160px;
    cursor:pointer;
}
.book-activity-black .alert-box{
    width: 1000px;
    background-image: url(../../images/book/print_jpg.png);
    background-size: 100% 100%;
    padding-bottom: 50px;
}
.book-activity-black .black-wrapper{
	background:transparent;
}
.book-activity-black .activity-title{
    padding: 20px 0;
}
.book-activity-black .activity-title img{
    position: absolute;
    top: -40px;
    left: -40px;
    width: 80px;
}
.book-activity-black .activity-title h1{
    font-size: 36px;
    float: left;
    margin-left: 85px;
}
.book-activity-black .activity-title a{
    float: right;
    margin-right: 40px;
    width: 100px;
    text-align: center;
}
#notes-area .note-content{
    padding-right: 10px;
    max-height: 400px;
}
#notes-area .note-comment{
    padding-right: 10px;
}
#notes-area .note-comment textarea{
    min-height:100px;
}
#print-area .form-box{
    width: 87%;
    padding: 15px;
    border-top: 1px solid #DFDFDF;
    max-height: 350px;
}
#print-area .form-box .print-paragraph>div{
	margin:20px;
}
#print-area .form-box .print-paragraph>div p{
	line-height: 20px;
}
.print-paragraph>div p.eng,.print-paragraph>div p.pinyin{
	display:none;
}
#print-area .print-options{
    padding-left: 50px;
    margin-bottom: 20px;
}
#print-area .print-options select{
    font-size: 18px;
    width: 120px;
}
#print-area .print-btn{
    margin-top: 40px;
    text-align: center;
}
#print-area .print-btn a{

}
.general-lightbox .form-box{
    width: 87%;
    padding: 15px;
    border-top: 1px solid #DFDFDF;
    max-height: 350px;
}
.general-lightbox .form-box table{
    width: 100%;
}
.general-lightbox .form-box table th{
    background-image: url(../../images/frontend/background_button_gray.png);
    background-size: 95% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    font-weight: bold;
    padding: 10px 30px;
}
.general-lightbox .form-box table td{
    padding: 10px;
}
.center{
	text-align:center;
}
.general-lightbox .form-box table td img.delete{
    vertical-align: middle;
    width: 18px;
    cursor: pointer;
}
.general-lightbox .form-box table td.total{
    background-image: url(../../images/frontend/background_button_gray.png);
    background-size: 100% 100%;
    font-weight: bold;
    padding: 10px 30px;
}
.general-lightbox .form-box table td.total span{
    float: left;
    width: 50%;
}
.general-lightbox .print-btn{
    margin-top: 40px;
    text-align: center;
}
.general-lightbox .print-btn a{

}
.general-lightbox .activity-title h1{
    font-size: 28px;
    margin-left: 50px;
}
.general-lightbox .activity-title h1 img{
    position: static;
    width: 30px;
    vertical-align: middle;
    margin-right: 15px;
}
.general-lightbox .lightbox-title{
    margin-bottom: 15px;
    text-align: center;
    font-size: 20px;
}

/*textonly 課文*/
.text-book-wrapper{
	float:left;
	margin:0 5%;
	width:90%;
}
.text-book-wrapper .player-controller{
    width: 50%;
    text-align: left;
}
.text-book-wrapper .player-controller .play-all-text{
    display: inline-block;
    vertical-align: middle;
    cursor:pointer;
}
.text-book-wrapper .player-controller .play-all-text img{
    width: 50px;
    display: block;
    margin: 0 auto;
}
.text-book-wrapper .player-controller .play-all-text span{
    margin-top: 10px;
    display: inline-block;
}
.text-book-wrapper .player-controller>ul{
    display: inline-block;
    margin-left: 20px;
}
.text-book-wrapper .player-controller .timer{
    margin-left: 20px;
    display: inline-block;
}
.text-book-wrapper .choose-lang{
    float: right;
    margin-top: 20px;
}
.text-book-wrapper .choose-lang ul{

}
.text-book-wrapper .choose-lang ul li.active{
    background-color: #F6A623;
}
.text-book-wrapper .choose-lang ul li{
    background-color: #503400;
    cursor: pointer;
    float: left;
    text-align: center;
    color: #FFF;
    padding: 7px 0;
    width: 128px;
    margin: 0 5px;
    border-radius: 5px;
    font-size: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.text-book-content{
    position: relative;
    background-image: url(../../images/book/bgbg.png);
    background-size: 100% auto;
    margin-top: 20px;
    padding: 40px 65px;
}
.text-book-content .choose-part{
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,221,221,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(221,221,221,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,221,221,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,221,221,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,221,221,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,221,221,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0 );
    position: relative;
    float: right;
    top: -50px;
    right: -40px;
    padding: 5px 0;
    padding-right: 40px;
    border-radius: 30px;
}
.text-book-content .choose-part img.add-minus-part{
    width: 12px;
    vertical-align: middle;
    margin: 0 20px;
    cursor:pointer;
}
.text-book-content .choose-part select{
    margin: 0 10px;
}
.text-book-content .choose-part .text-note-btn{
    position: absolute;
    width: 60px;
    right: -40px;
    top: -20px;
    cursor:pointer;
}
.text-book-content .each-paragraph{
    margin-bottom: 40px;
}
.text-book-content .each-paragraph p{
    font-size: 22px;
    line-height: 40px;
    margin-bottom: 15px;
    letter-spacing: 3px;
}
.text-book-content .each-paragraph p>img{
    float: left;
    margin: 0 20px 20px 0;
    width: 250px;
}
.text-book-content .each-paragraph .eng, .each-paragraph .pinyin{
	display:none;
}
.text-book-content .back-to-top{
	text-align:center;
}
.text-book-content .each-paragraph a{
	color:#B92525;
	cursor:pointer;
	text-decoration:none;
}
#show_vocabularies{
	display:none;
    position: absolute;
    z-index: 30;
    width: 300px;
}
.back-pic{
	display:none;
}
#picturebook-slides,
#picturebook-slides-full{
	display: none;
}
#picturebook-area .function-panel,
#picturebook-area-full .function-panel{
    position: absolute;
    width: 120px;
    text-align: center;
    top: 145px;
    right: 70px;
    border-radius: 5px;
}
#picturebook-area .text-size,
#picturebook-area-full .text-size{
    margin-bottom: 20px;
}
#picturebook-area .text-size li,
#picturebook-area-full .text-size li{
    margin: 0 5px;
}
#picturebook-area .text-size li img,
#picturebook-area-full .text-size li img{
    width: 30px;
}
#picturebook-area .panel-list li,
#picturebook-area-full .panel-list li{
    float: none;
    margin:0;
    margin-bottom: 30px;
}
#picturebook-area .panel-list li.play-all,
#picturebook-area-full .panel-list li.play-all{
	border:none;
	padding:0;
}
#picturebook-area .panel-list li span,
#picturebook-area-full .panel-list li span{
    font-size: 14px;
}
#picturebook-area .player-controller ul li,
#picturebook-area-full .player-controller ul li{
    margin: 0 5px 10px 5px;
}
#picturebook-area .player-controller ul li img,
#picturebook-area-full .player-controller ul li img{
    height: 12px;
}
#picturebook-area .choose-lang-picturebook,
#picturebook-area-full .choose-lang-picturebook{
    position: absolute;
    top: 670px;
    right: 70px;
    width: 150px;
}
#picturebook-area .choose-lang-picturebook ul li,
#picturebook-area-full .choose-lang-picturebook ul li{
    background-color: #503400;
    cursor: pointer;
    text-align: center;
    color: #FFF;
    padding: 7px 0;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#picturebook-area .choose-lang-picturebook ul li.active,
#picturebook-area-full .choose-lang-picturebook ul li.active{
	background-color: #F6A623;
}
.container {
    width: 835px;
    background-image: url(../../images/book/Picturebook_book.png);
    background-size: 100% 100%;
    padding: 30px 50px;
}
.slidesjs-container img{
	height:100%;
}
.picutrebook-area{
/*     margin-top: 20px; */
}
.picutrebook-area .chinese-text{
    background-image: url(../../images/book/捲軸背景.png);
    background-size: 100% 100%;
    padding: 40px;
    width: 860px;
    margin-top: 10px;
}
.picutrebook-area .chinese-text .paragraphs{
	display:inline-block;
    width: 770px;
    vertical-align:middle;
}
.picutrebook-area .chinese-text p{
    font-size: 22px;
    letter-spacing: 3px;
    display:none;
    margin: 10px 0;
}
.picutrebook-area .chinese-text ul{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.picutrebook-area .chinese-text ul li{
    float: left;
    margin: 0 5px;
    cursor: pointer;
}
.picutrebook-area .chinese-text ul li img{
    width: 25px;
}
.picutrebook-area+.activity-block{
	margin:0;
	margin-top:20px;
	width:80%;
}
.picutrebook-area+.activity-block ul li{
	border:none;
	border-bottom:1px dashed #AAA;
	padding-bottom:80px;
}
.book-slides{
    position: relative;
}
.book-slides .slidesjs-navigation{
    position: absolute;
    top: 28%;
}
.book-slides .slidesjs-previous{
    left: -69px;
}
.book-slides .slidesjs-next{
    right: -71px;
}
.book-slides .slidesjs-navigation img{
	height:200px;
}

/*全螢幕START*/
.fullscreen-area{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FFF;
    z-index: 99;
    background-attachment: fixed;
    visibility:hidden;
}
#picturebook-area-full{
    width: 100%;
	height: 100%;
}
#picturebook-area-full .book-main-block{
    width: 95%;
    height: 100%;
}
#picturebook-area-full .function-panel{
    top: -20px;
    z-index: 150;
    right: 0;
    height: 716px;
    width: 10%;
    min-width:150px;
    transform-origin:right top;
}
#picturebook-area-full .panel-list{
	width:150px;
}
#picturebook-area-full .function-panel:before{
    content: "";
    width: 10px;
    background-color: #F6A623;
    height: 100%;
    left: -10px;
    top: 0;
    position: absolute;
}
#picturebook-area-full .picutrebook-area{
    position: relative;
}
#picturebook-area-full .container{
    width: 75%;
    margin: 0 auto;
}
#picturebook-area-full .slidesjs-control,
#picturebook-area-full .slidesjs-container{
	height:100% !important;
	width:100% !important;
}
#picturebook-area-full .chinese-text{
    width: 80%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    bottom: -80px;
    z-index: 110;
}
#picturebook-area-full .paragraphs{
    width: 85%;
}
#picturebook-area-full .choose-lang-picturebook{
    position: static;
    margin-top: 38px;
    width: 100%;
}
.close-fullscreen{
    width: 75px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background-color: #D8D8D8;
    border-radius: 10px;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#picturebook-area-full .book-right>.close-fullscreen{
    float: right;
}
#picturebook-area-full .function-panel>.close-fullscreen{
    margin: 0 auto;
 	margin-bottom: 25px;
}
.show-function-panel{
    position: absolute;
    z-index: 150;
    width: 20px;
    height: 130px;
    left: -25px;
    top: calc(50% - 130px);
    cursor: pointer;
}
/*全螢幕END*/
/*書籍互動END*/

.form-box .group-wrapper{
    width: 96%;
    margin: 10px 2%;
}
.form-box .group-wrapper .group-title{
    float: left;
    width: 10%;

}
.form-box .group-wrapper .group-title h5{
    margin: 10px 0;
    line-height: 18px;
}
.form-box .group-wrapper .btn-area{
    float: right;
    margin-top: 10px;
}
.form-box .group-wrapper .btn-area li{
    float: left;
    margin: 0 5px;
}
.step-btn{
    display: inline-block;
    padding: 5px 15px;
    min-width: 50px;
    text-align: center;
    border-radius: 5px;
    text-decoration:none;
}
.disabled-btn{
    border: 1px solid #DDD;
    color: #DDD;
}
.form-input .light-gray-img-bg{
    color: #000;
    padding: 5px 25px;
}
.checkbox .underline{
    border-bottom: 1px solid #CCC;
    padding-bottom: 5px;
}
.checkbox{
	position:relative;
}
.checkbox .sub-title{
    position: relative;
    display: block;
    padding-left: 20px;
    margin-bottom: 15px;
    height: 20px;
    line-height: 20px;
}
.checkbox .sub-title:before{
    content: "";
    position: absolute;
    top: 0;
    left: 5px;
    background-color: #666;
    width: 5px;
    height: 20px;
    border-radius: 5px;
}
.checkbox.vertical{
    width: 82%;
}
.checkbox.need-padding{
	padding-left:8%;
    margin-top: 20px;
}
.form-input .checkbox.need-padding:first-child{
	margin-top:0;
}
.checkbox .book-each{
    background-color: #DDD;
    padding: 5px 0 5px 20px;
}
.checkbox .book-each:before{
    top: 5px;
}
.checkbox .checkbox-each input[type='checkbox']{
    margin: 0 10px 0 20px;
}
.blue-btn{
	background-color:#4990E2;
	color:#FFF;
}
.dark-gray-btn{
	background-color:#9B9B9B;
	color:#FFF;
}
.form-box .table-area{
	margin-top:20px;
}
.edit-password .form-input{
    margin: 20px 0;
    font-size:14px;
}
.edit-password .for-show label{
	vertical-align: top;
}
.edit-password .form-input label{
    width: 20%;
    display: inline-block;
    padding-left: 16%;
}
.edit-password .form-input .show-data-outer{
	display:inline-block;
    width: 55%;
}
.edit-password .form-input .show-data-outer .show-data{
	display: inline-block;
    width: 100%;
	line-height: 18px;
}
input[type='text'],
input[type='password']{
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    padding: 5px;
}
.edit-password .form-input input[type='text'],
.edit-password .form-input input[type='password']{
    width: 50%;
}
.edit-password .form-input.submit{
	text-align:center;
}
.edit-password input[type='submit']{
    background-image: url(../../images/backend/button_Send.png);
    background-size: 100% 100%;
    border: none;
    background-color: inherit;
    color: #FFF;
    padding: 10px 30px;
    min-width: 140px;
    cursor:pointer;
}
.edit-password .warning-text{
    margin-left: 37% !important;
}
.edit-password .forget-right{
	width:35% !important;
}
.edit-password>h1{
	margin-top:50px !important;
}
/*general END*/




/****2017/02/09新增 START*****/
.book_wrapper .picture-page{
    position: relative;
    height: 443px;
}
.book_wrapper .picture-page>img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.book_wrapper .text-page-wrapper{
    position: relative;
    height: 443px;
}
.book_wrapper .helper-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height:auto;
    display:table;
}
_:-moz-tree-row(hover), .book_wrapper .helper-wrapper{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height:auto;
    display:table;
    -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}
.book_wrapper .text-page{
    height: auto;
    max-height: 360px;
}
.img-with-shadow{
    background-image: url(../../images/book/Book_Elementary.png);
    background-size: 95% 98%;
    background-position: 8px 9px;
    background-repeat: no-repeat;
    padding: 30px 16px;
}
/****2017/02/09新增 END*****/

/*******2017/02/13新增********/
.grammar-outter{
    width: 615px;
    margin:0 auto;
}
.grammar-top {
    width: 480px;
    min-height: 115px;
    padding: 15px 0 0 135px;
    margin: 15px 0 15px 0;
}
.grammar-top .grid1 {
    width: 422px;
    min-height: 40px;
    background: url(../../images/frontend/grammar-pop.jpg) no-repeat;
    padding: 20px 0 0 47px;
}
.grammar-top .grid2 {
    width: 469px;
    height: 20px;
    background: url(../../images/frontend/grammar-pop.jpg) no-repeat bottom;
}
.grammar-main {
    width: 615px;
    margin: 0px 0 15px 0;
}
.grammar-main .tit {
    width: 590px;
    height: 25px;
    background: url(../../images/frontend/icon-light.jpg) no-repeat top left;
    padding: 3px 0 0 25px;
    margin-bottom: 5px;
}
.text-brown20 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 24px;
    color: #6b6058;
    font-weight: bold;
}
.text-black15-2 {
    font-family: "Microsoft JhengHei";
    font-size: 15px;
    line-height: 20px;
    color: #000;
}
/*******2017/02/13新增********/

/****2017/02/20新增*****/
.bb-item img{
	width:100%;
	height:100%;
}
.bb-page img{
	width:100%;
	height:100%;
}
/****2017/02/20新增*****/

/****2017/03/24新增*****/
#book-separator{
    height: 100%;
    position: absolute;
    z-index: 999;
    left: 50%;
}
.book_wrapper>.picture-note-btn{
    position: absolute;
    right: 0;
    top: 73px;
    z-index: 99;
    width: 60px;
    cursor: pointer
}
#discussion-area .quiz-ques li{
	padding-bottom: 150px;
}
.book_wrapper .chapter-selection{
	bottom: 0;
    top: 88%;
    z-index: 99;
    right: 55px;
}
.book_wrapper .chapter-selection li{
    background: rgba(240,240,240,1);
    background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(177,177,177,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(240,240,240,1)), color-stop(100%, rgba(177,177,177,1)));
    background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(177,177,177,1) 100%);
    background: -o-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(177,177,177,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(177,177,177,1) 100%);
    background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(177,177,177,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#b1b1b1', GradientType=0 );
    width: 75px;
    border-radius: 5px;
    margin: 0 5px;
    color: #4A4A4A;
    font-size: 12px;
}
.book_wrapper .chapter-selection li.active{
	background:none;
	background-color:#703F20;
	color:#FFF;
}
.light-blue-img-bg{
	background-image:url('../../images/frontend/BTN_BG.png');
}
/****2017/03/24新增*****/