@CHARSET "UTF-8";
/*main START*/
.main{
	position:relative;
}
.left-options .options-title{
    text-align: left;
    width: 175px;
    margin: 0 auto;
}
.left-options ul .top-margin{
    margin-top: 30px;
}
.left-options img.undo{
	height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
.left-options img.undo+span{
	display:inline-block;
    vertical-align: middle;
}
.left-options{
    padding-top: 68px;
    width: 20%;
    text-align: center;
    float:left;
}
.left-options ul{

}
.left-options ul li{
    margin-top: 12px;
}
.left-options ul li a{
    display: inline-block;
    width: 155px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
}
.right-content{
	width:80%;
    float:right;
    position:relative;
}
/*main END*/
/*選擇腳色START*/
#pick-role{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 200px;
}
#pick-role li{
    float: left;
    position: relative;
    width: 33%;
    text-align: center;
    height: 200px;
}
#pick-role li a{
    position: relative;
}
#pick-role li a span{
    position: absolute;
    width: 140%;
    height: 100px;
    bottom: -50px;
    line-height: 100px;
    background-image: url(../../images/backend/歡迎頁面-02-02.png);
    background-size: 100% 100%;
    left: -20%;
}
#pick-role li a .role-pic{
    width: 160px;
}
/*選擇腳色END*/
/*登入START*/
.big-title{
    font-size: 25px;
    text-align: center;
    margin: 25px 0;
}
#login-area .form-box{
	margin:0 auto;
	width:80%;
    border-top:1px solid #DFDFDF;
}
#login-area .form-box .form-input{
    margin: 35px 0;
}
/*登入END*/
/*首頁歡迎START*/
#welcome-text-area{
    background-image: url(../../images/backend/歡迎頁面-02-02.png);
    background-size: 100% 100%;
    width: 500px;
    height: 250px;
    text-align: center;
    line-height: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
/*首頁歡迎END*/
/*選擇書籍START*/
.main .home-block{
    width: 24%;
    text-align: center;
    margin-top: 10px;
    display: inline-block;
    vertical-align: middle;
}
#fb-youtube-area{

}
#fb-youtube-area ul li{
    margin-bottom:10px;
}
#fb-youtube-area .display-img{
	width:180px;
}
#book-brief-area{
	width:50%;
}
#book-brief-area>ul>li{
	display:none;
}
#book-brief-area>ul>li:first-child{
	display:inline-block;
}
#book-brief-area .cover{
    background-image: url(../../images/frontend/hoome_grade_background.png);
    background-size: 100% 100%;
    width: 46%;
    margin: 0 2%;
    float: left;
    height: 360px;
    transform: rotateZ(3deg);
    -webkit-transform: rotateZ(3deg);
    -ms-transform: rotateZ(3deg);
}
#book-brief-area .cover img{
    padding: 5px;
    border-radius: 5px;
    width: 75%;
    margin-top: 52px;
}
#book-brief-area .book-intro{
    width: 46%;
    margin: 0 2%;
    float: left;
    text-align: left;
}
#book-brief-area .book-intro .book-title{
    font-size: 28px;
    display: block;
    margin: 25px 0;;
}
#book-brief-area .book-intro .stars{
    margin: 25px 0;
}
#book-brief-area .book-intro .stars ul{
    display: inline-block;
}
#book-brief-area .book-intro .stars ul li{
    display: inline-block;
}
#book-brief-area .book-intro .stars ul li img{
    width: 20px;
    vertical-align: middle;
}
#total-chapters{
    background-color: #999;
    color: #FFF;
    font-size: 14px;
    padding: 5px;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
}
#book-brief-area .book-intro .intro-text{
    font-size: 16px;
    height: 162px;
    margin-top: 45px;
    line-height: 24px;

}
#book-brief-area .book-intro>a{
    display: block;
    margin: 0 auto;
    width: 170px;
    text-align: center;
}

#booklist-area{
    margin-top: 30px;
}
#booklist-area .choose-book{

}
#booklist-area .choose-book li{
    position: relative;
    margin-bottom: 25px;
}
#booklist-area .choose-book li a{
    display: inline-block;
    width: 165px;
}
#booklist-area .choose-book li a img{
    padding: 3px;
    border-radius: 5px;
    width: 40px;
    position: absolute;
    left: 5px;
    top: -5px;
}
.slope-left{
	transform: rotateZ(-3deg);
    -webkit-transform: rotateZ(-3deg);
    -ms-transform: rotateZ(-3deg);
}
.slope-right{
	transform: rotateZ(3deg);
    -webkit-transform: rotateZ(3deg);
    -ms-transform: rotateZ(3deg);
}
#booklist-area>#qr-code{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: left;
}
#booklist-area>#qr-code li{
    display: inline-block;
    margin: 10px 5px;
}
#booklist-area>#qr-code li img{
    display: block;
    width: 80px;
}
#booklist-area>#qr-code li a{
    margin-top: 10px;
    display: inline-block;
}
/*選擇書籍END*/

/*最新消息START*/
.news-left{
    width: 15%;
    float: left;
}
.news-left>h1{
    font-size: 26px;
    font-weight: bold;
}
.news-left .qr-code-area{
    padding-top: 100px;
}
.news-left .qr-code-area>span{

}
.qr-code-area>#qr-code{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: left;
}
.qr-code-area>#qr-code li{
    margin: 10px 5px;
}
.qr-code-area>#qr-code li img{
    display: block;
    width: 80px;
}
.qr-code-area>#qr-code li a{
    margin-top: 10px;
    display: inline-block;
}
.news-main{
    float: left;
    width: 85%;
}
.news-main .news-context{
    width: 56%;
    padding: 0 2%;
    float: left;
    background-color: rgba(255,255,255,0.8);
}
.news-main .news-context .context-title{

}
.news-main .news-context .context-title img{
    background-image: url(../../images/frontend/BOOK.png);
    background-size: 97% 100%;
    padding: 25px;
    background-position: 9px 10px;
    background-repeat: no-repeat;
    width: 180px;
}
.news-main .news-context .context-title h1{
    width: 300px;
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 0 35px;
}
.news-main .news-context .context-text p{
    margin: 20px 0;
    font-size: 14px;
    line-height: 18px;
}
.news-main .news-list{
    background-image: url(../../images/frontend/hoome_grade_background.png);
    background-size: 100% 100%;
    background-position-y: -10px;
    width: 28%;
    padding: 0 2%;
    margin-left: 6%;
    float: left;
    height: 450px;
}
.news-main .news-list .list-title{
    margin-top: 58px;
    margin-bottom: 10px;
    text-align: center;
}
.news-main .news-list ul{
    background-color: #FFE4AF;
    width: 76%;
    margin: 0 auto;
    padding: 12px 4% 12px 6%;
    height: 263px;
}
.news-main .news-list ul li{
    padding: 4%;
    border-bottom: 1px dashed #000;
}
.news-main .news-list ul li img{
    width: 22%;
    float: left;
    margin-right: 5%;
}
.news-main .news-list ul li h2{
    width: 73%;
    float: left; 
    font-size: 13px;
    color: #E9A42D;
    font-weight: bold;
    height: 26px;
}
.news-main .news-list ul li span{
    float: left;
    font-size: 12px;
    vertical-align: bottom;
    display: inline-block;
    margin-top: 10px;
}
/*最新消息END*/

/*註冊頁START*/
.left-side{
    width: 50%;
    float: left;
    border-right: 2px solid #CCC;
}
.left-side .sign-up-title{
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 22px;
}
.left-side .sign-up-title span{
    font-weight: initial;
    font-size: 12px;
}
.left-side .form-group{
    margin-bottom: 15px;
}
.left-side .form-group label{
    width: 49%;
    display: inline-block;
    padding-right: 20px;
    text-align: right;
}
.left-side .form-group input[type='text'],.left-side .form-group input[type='password']{
    width: 38%;
}
.left-side .form-group .err-msg{
    padding-left: 54%;
    font-size: 14px;
    color: red;
    width: 37%;
}
.left-side .form-group input.date-input{
    width: 10%;
}
.left-side .form-group select{
    border-radius: 5px;
    padding: 5px;
}
.left-side .form-group input.veri-code{
    width: 20%;
}
.left-side .form-group input.veri-code+img{
    width: 18%;
    vertical-align: middle;
}
.left-side .submit-area{
	text-align: right;
}
.left-side .submit-area>a{
    display: inline-block;
    margin: 0 35px;
    text-decoration: none;
}
.left-side .submit-area>a:first-child{
    margin: 0;
}
.right-side{
    width: 40%;
    padding-left: 4%;
    float: left;
    margin-top: 70px;
}
.right-side h1{
    font-size: 20px;
    margin-bottom: 20px;
}
.right-side h2{
    margin: 15px 0;
    font-weight: bold;
}
.right-side p{
    font-size: 14px;
    line-height: 22px;
}
.right-side input{

}
#question-mark{
    background-color: #498FE4;
    border-radius: 100%;
    color: #FFF;
    padding: 6px 10px;
    cursor: pointer;
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
}
#regist-area .red-font{
	color:red !important;
}
/*註冊頁END*/
/*登入頁START*/
#login-input-area>.left-side{
	float:none;
	margin:0 auto;
	border:none;
}
#login-input-area>.left-side h1{
	margin-bottom: 55px;
}
#login-input-area>.left-side .form-group{
    margin-bottom: 30px;
}
#login-input-area>.left-side .form-group label{
    width: 30%;
}
#login-input-area>.left-side .form-group .err-msg{
    padding-left: 34%;
}
#login-input-area>.left-side .submit-area{
	text-align:center;
}
#login-input-area>.left-side .submit-area a{
    display: inline-block;
    width: 140px;
    margin: 10px 20%;
}
#login-input-area>.left-side .submit-area .forget-pwd{
    font-size: 14px;
    color: #006AE6;
}
/*登入頁END*/
/*忘記密碼START*/

#choose-role-area>h1{
    width: 15%;
    float: left;
    padding-left: 15%;
    font-size: 26px;
    font-weight: bold;
}
#choose-role-area .forget-right{
    float: left;
    width: 70%;
    margin-top: 10px;
}
#choose-role-area .form-group{

}
#choose-role-area .form-group label{
    padding-right: 5%;
}
#choose-role-area .form-group input[type='text']{
    width: 40%;
    margin-right: 2%;
}
#choose-role-area .form-group input[type='submit']{

}
#choose-role-area .forget-right>p{
    font-size: 14px;
    line-height: 20px;
    margin-top: 40px;
    width: 65%;
}
/*忘記密碼END*/
/*老師筆記列表START*/

#teachers-note td{
	position:relative;
}
#teachers-note tr td:after{
    content: "";
    position: absolute;
    width: 1px;
    left: 0;
    background-color: #DDD;
    height: 70%;
    top: 15%;
}
#teachers-note tr td:first-child:after{
	width:0;
}
#teachers-note .teacher-note-img{
    
}
#teachers-note .teacher-note-img>img{
    height: 150px;
    vertical-align: middle;
}
#teachers-note .teacher-note-img .img-text{
    vertical-align: middle;
    text-align: middle;
}
#teachers-note .teacher-note-img h5{

}
.main-table a.details{
    background-color: #EEE;
    border-radius: 5px;
    border: 1px solid #CCC;
    padding: 10px 30px 10px 0;
    text-decoration: none;
}
.main-table a.details img{
    vertical-align: middle;
    width: 40px;
    position: relative;
    right: 17px;
}
/*老師筆記列表END*/

/*筆記詳細內容START*/
.class-list .add-note{
    background-color: #EEE;
    border: none;
    font-size: 13px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor:pointer;
}
.function-list{
    background-color: #AAA;
    padding: 15px;
    position:relative;
}
.function-list button{
    background-color: #FFF;
    border: none;
    font-size: 13px;
    padding: 5px 20px;
    border-radius: 5px;
}
.function-list p{
    color: #FFF;
    line-height: 24px;
}
.note-main{

}
.note-main .left-side{
    width: 71%;
    border-right: 1px solid #DDD;
    padding: 10px 2%;
    position:relative;
}
.note-main .left-side .class-list{
    border-bottom: 3px solid #AAA;
    padding-bottom: 10px;
    min-height: 25px;
}
.note-main .left-side .no-border{
	border:none;
}
.note-main .left-side .class-list select{
    padding: 5px 10px;
    border-radius: 5px;
}
.note-main .left-side .class-list ul{
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}
.note-main .left-side .class-list ul li{
    float: left;
    min-width: 70px;
}
.note-main .left-side .class-list ul li input[type='checkbox']{

}
.note-main .left-side .class-list .confirm{
    float: right;
    width: 80px;
}
.note-main .left-side .note-content{

}
.note-main .left-side .note-content .book-text{
    margin: 10px 0;
}
.note-main .left-side .note-content .book-text h5{
    color: #59A3E8;
    margin: 20px 0;
    font-weight: bold;
}
.note-main .left-side .note-content .book-text p{
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 24px;
}
.note-main .left-side .note-content .book-text .highlight{
    color: #FFF;
    background-color: red;
}
.note-main .left-side .note-content .note-comment{
    margin: 10px 0;
}
.note-main .left-side .note-content .note-comment h5{
    color: #59A3E8;
    padding: 10px 0;
    margin: 10px 0;
    font-weight: bold;
    border-bottom: 2px dotted #CCC;
}
.note-main .left-side .note-content .note-comment textarea{
    width: 100%;
    min-height: 200px;
}
.note-main .left-side .note-content .note-comment p{
	margin-bottom: 15px;
    font-size: 14px;
    line-height: 24px;
}
/***********2017/05/05新增**************/
.note-main{
	position:relative;
}
/***********2017/05/05新增**************/
/***********2017/05/05修改**************/
.delete-all{
    position: absolute;
    bottom: -38px;
    right: 30px;
    cursor: pointer;
}
.delete-all img{
    width: 25px;
    vertical-align: middle;
    margin-right: 5px;
}
.note-main .right-side{
    width: 20%;
    margin: 0;
    padding: 0 2%;
    position: relative;
}
.note-main .right-side ul{

}
.note-main .right-side ul li{
    border-bottom: 2px solid #AAA;
    padding: 10px 0;
    position: relative;
}
.note-main .right-side ul li span.vocab{
    background-color: red;
    color: #FFF;
    padding: 3px 15px;
    display: inline-block;
}
.note-main .right-side ul li p{
    margin: 10px 0;
}
.note-main .right-side ul li  .link-area{
    text-align: right;
}
.note-main .right-side ul li  .link-area .click-link{
    width: 20px;
    vertical-align: middle;
    padding: 5px;
    background-color: #DDD;
    border-radius: 10px;
    margin-right: 5px;
    cursor: pointer;
}
.note-main .right-side ul li  .link-area .extended-link{
    background-color: #AAA;
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    display:none;
}
.note-main .right-side ul li  .link-area .extended-link li{
    display: inline-block;
    margin: 3px;
}

.note-main .right-side ul li  .link-area .extended-link li img{
    background-color: #DDD;
    border-radius: 5px;
    height: 15px;
    padding: 5px;
}
.note-main .right-side ul li .delete-sign{
	position: absolute;
    right: 0;
    top: 13px;
    width: 20px;
    cursor: pointer;
}
/***********2017/05/05修改**************/
/*筆記詳細內容 END*/

/*詞彙庫START*/
.vocab-list{
    margin: 0 auto;
    display: block;
    text-align: center;
}
.vocab-list>li{
    position: relative;
    float: left;
    width: calc(44% - 2px);
    width: -moz-calc(44% - 2px);
    width: -webkit-calc(44% - 2px);
    width: -o-calc(44% - 2px);
    padding: 10px 2%;
    border: 1px solid #DDD;
    margin: 1%;
    text-align: left;
    background-color: rgba(255,255,255,0.9);
}
.vocab-list>li .delete-sign{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
}
.vocab-list>li .main-word{
    font-size: 32px;
    color: #F6A623;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 18%;
}
.vocab-list>li .which-kind{
    display: inline-block;
    vertical-align: middle;
    margin-right: 40%;
}
.vocab-list>li .level{
    display: inline-block;
    vertical-align: middle;
}
.vocab-list>li>h5{
    margin: 10px 0;
}
.vocab-list>li .pinyin{

}
.vocab-list>li .eng-mean{
    color: #F6A623;
}
.vocab-list>li>ul{
    list-style-type: decimal;
    margin-left: 3%;
}
.vocab-list>li>ul>li{
    color: #0C4387;
    margin-bottom: 5px;
    font-size: 14px;
}
/*詞彙庫END*/

/*書籍管理START*/
.main-table .story-column{
    text-align: left !important;
}
.main-table .story-column ul.stories{
    text-align: left;
}
.main-table .story-column ul.stories li{
    display: block;
    margin: 5px 0;
}
.main-table .story-column ul.stories li span{
    display: inline-block;
    width: 100px;
    vertical-align: middle;
}
.main-table .story-column ul.stories li .stars{
    display: inline-block;
    width: 110px;
    vertical-align: middle;
}
.main-table .story-column ul.stories li .stars img{
    vertical-align: middle;
    margin: 0 1px;
    height: 18px;
}
.main-table .story-column .each-check{
    display: inline-block;
}
.main-table .story-column .each-check input[type='checkbox']{
    vertical-align: middle;
    display: inline-block;
}
.main-table .story-column .each-check label{
    width: 10px;
    display: inline-block;
    vertical-align: middle;
}
.main-table .story-column .horizontal label{
    width:auto;
}
/*書籍管理END*/

/*新增書籍START*/

/*新增書籍END*/

/*修改學生密碼START*/

.edit-pwd-function{
    padding: 25px;
    padding-bottom: 0;
}
.edit-pwd-function h5{
	float:left;
}
.edit-pwd-function a{
    float: right;
}
.form-input .warning-text{
    display: inline-block;
    margin-left: 32%;
    width: 50%;
    color: #999;
}
/*修改學生密碼END*/

/*學生成績START*/

.function-list select{
	border-radius:5px;
}
.function-list a{
    position: absolute;
    right: 25px;
    top: 22px;
}
.show-stats-area img{
    width: 70%;
    display: block;
    margin: 0 auto;
}
.show-stats-area .choose-date{
	padding:20px;
}
.show-stats-area .choose-date input[type='text']{
    width: 100px;
}
/*學生成績END*/

/*筆記新增視窗START*/
#insert-new-link .alert-box{
    width: 600px;
    font-size: 14px;
}
.black-wrapper{
	max-height:600px;
}
.alert-box .insert-title{
    border-bottom: 1px solid #DDD;
    padding: 10px 20px;
    position: relative;
}
.alert-box .insert-title h6{
    font-size: 12px;
    color: #AAA;
}
.alert-box .insert-title h1{
    font-size: 30px;
    margin-top: 10px;
    font-weight: bold;
}
.alert-box .insert-title .choose-color{
    position: absolute;
    right: 21px;
    top: 50%;
    background-color: #DDD;
    padding: 5px;
}
.alert-box .insert-title .choose-color span{
    display: inline-block;
    vertical-align: middle;
}
.alert-box .insert-title .choose-color ul{
    display: inline-block;
    vertical-align: middle;
}
.alert-box .insert-title .choose-color ul li{
    padding: 8px;
    float: left;
    background-color: #000;
    margin-left: 5px;
    cursor: pointer;
}
.alert-box .add-link{
    display: block;
    width: 100px;
    text-align: center;
    font-size: 12px;
    padding: 5px 10px;
    margin: 10px;
    float: right;
    color: #000;
}
.alert-box .add-link img{
    height: 12px;
    vertical-align: middle;
    float: left;
    margin-left: 10px;
}
.alert-box .add-link span{
    display: inline-block;
    vertical-align: middle;
}
.alert-box .each-link{
    border-top: 1px solid #EEE;
    padding: 10px;
}
.alert-box .each-link .form-input{
    margin-bottom: 15px;
}
.alert-box .each-link .form-input>label{
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}
.alert-box .each-link .form-input .each-radio{
    display: inline-block;
    margin-right: 14px;
}
.alert-box .each-link .form-input .each-radio input[type='radio']{

}
.alert-box .each-link .form-input .each-radio img{
    height: 20px;
    vertical-align: middle;
}
.alert-box .each-link .form-input .each-radio span{

}
.alert-box .each-link .form-input>label img{
    height: 22px;
    vertical-align: middle;
}
.alert-box .each-link .form-input input[type='text']{
    width: 50%;
    vertical-align: middle;
}
.alert-box .each-link .form-input .delete{
    vertical-align: middle;
    height: 2px;
    margin-left: 70px;
    cursor: pointer;
    padding: 10px 0;
}
.alert-box .form-input{
    text-align: center;
    margin-bottom: 15px;
}
.alert-box .form-input textarea{
	width:95%;
	height:120px;
}
.alert-box .submit{
    text-align: right;
}
.alert-box .submit a{
    margin: 0 10px;
    min-width: 50px;
}
/*筆記新增視窗END*/

/*書架START*/
#elementary-area .left-options li a.active{
	background-image:url('../../images/frontend/Elementary.png');
}
#elementary-area .each-row>li img{
	background-image:url('../../images/book/Book_Elementary.png');
}
#lower-intermediate-area .left-options li a.active{
	background-image:url('../../images/frontend/Lower-intermediate.png');
}
#lower-intermediate-area .each-row>li img{
	background-image:url('../../images/book/Book_Lower-intermediate.png');
}
#upper-intermediate-area .left-options li a.active{
	background-image:url('../../images/frontend/Intermediate.png');
}
#upper-intermediate-area .each-row>li img{
	background-image:url('../../images/book/book-Lower-intermediate.png');
}
#picturebook-area .all-single{
	visibility:hidden;
}
#picturebook-area .left-options li a.active{
	background-image:url('../../images/frontend/Picturebook.png');
}
#picturebook-area .each-row>li img{
/* 	background-image:url('../../images/book/Picturebook_book_s.png'); */
}
/*書架END*/

/*故事列表START*/
#elementary-area .list-title .title-left:before{
    background-color: #41AB5F;
}
#lower-intermediate-area .list-title .title-left:before{
	background-color: #BD3B40;
}
#upper-intermediate-area .list-title .title-left:before{
	background-color: #2D74B0;
}
/*故事列表END*/

/*書籍互動START*/
#elementary-area .book-main-block .vocab-list>li:before{
	background-color:#41AB5F;
}
#lower-intermediate-area .book-main-block .vocab-list>li:before{
	background-color:#BD3B40;
}
#upper-intermediate-area .book-main-block .vocab-list>li:before{
	background-color:#2D74B0;
}
#upper-intermediate-area .picture-text-switch{
	margin-left: 121.5px;
}
/*書籍互動END*/

/*SINGLE STORY選單START*/
#single-story-area{
    padding-bottom: 40px;
}
#single-story-area .top-title{
    text-align: center;
    padding: 0 10%;
}
#single-story-area .top-title h1{
    font-size: 26px;
    font-weight: bold;
}
#single-story-area .top-title img{
    width: 100%;
}
#single-story-area .choose-level{
    text-align: center;
    margin: 20px 0;
}
#single-story-area .choose-level li{
    display: inline-block;
    margin: 0 35px;
    width: 175px;
    opacity: 0.4;
	cursor:pointer;
}
#single-story-area .choose-level li.active{
    opacity: 1;
}
#single-story-area .single-story-details{
    background-image: url(../../images/book/bgbg.png);
    background-size: 100% 100%;
    padding: 30px 5%;
    width: 85%;
    margin: 0 auto;
}
#single-story-area .single-story-details .left{
    float: left;
    width: 20%;
}
#single-story-area .single-story-details .left ul{
    margin-top: 57px;
}
#single-story-area .single-story-details .left ul li{
    color: #000;
    font-size:14px;
    padding: 10px;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 10px;
	cursor:pointer;
}
#single-story-area .single-story-details .left ul li.active{
	background-image:url('../../images/frontend/Elementary.png');
	color:#FFF
}
#single-story-area .single-story-details .left ul li img{
    vertical-align: middle;
    height: 25px;
    margin-right: 10px;
}
#single-story-area .single-story-details .right{
    float: right;
    width: 80%;
}
#single-story-area .single-story-details .right .choose-time{
    text-align: center;
}
#single-story-area .single-story-details .right .choose-time li{
    display: inline-block;
    padding: 2px 50px 2px 0;
    margin: 0 45px;
	cursor:pointer;
}
#single-story-area .single-story-details .right .choose-time li.active{
	background-image:url('../../images/frontend/Elementary.png');
}
#single-story-area .single-story-details .right .choose-time li img{
    vertical-align: middle;
    width: 35px;
}
#single-story-area .single-story-details .right .choose-time li span{
    color: #000;
    display: inline-block;
    padding-left: 15px;
}
#single-story-area .single-story-details .right .choose-time li.active span{
	color:#FFF
}
#single-story-area .single-story-details .right .story-content{
    border: 1px solid #000;
    padding: 20px;
    width: 90%;
    margin: 20px auto;
    border-radius: 10px;
    height: 500px;
    font-size: 14px;
}
#single-story-area .single-story-details .right .story-content li{
    border-bottom: 1px dashed #000;
    padding: 10px;
}
#single-story-area .single-story-details .right .story-content li>div{
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
}
#single-story-area .single-story-details .right .story-content li .story-title{
    width: 160px;
}
#single-story-area .single-story-details .right .story-content li .story-title h2{
    line-height: 20px;
    margin-bottom: 5px;
}
#single-story-area .single-story-details .right .story-content li .story-title h3{
    line-height: 20px;
    color: #F6A623;
}
#single-story-area .single-story-details .right .story-content li .stars{
    width: 100px;
}
#single-story-area .single-story-details .right .story-content li .stars img{
    width: 20px;
}
#single-story-area .single-story-details .right .story-content li .intro{
    width: 270px;
    height: 60px;
    line-height: 20px;
}
/*SINGLE STORY選單END*/

/*購買步驟START*/

#subscription{
    padding-top: 60px;
    width: 90%;
    margin: 0 auto;
}
#subscription>h1{
    font-size: 34px;
    line-height: 36px;
}
#subscription>ul{
    margin: 25px 0;
    text-align: center;
}
#subscription>ul li{
    display:inline-block;
    margin:0 5px;
}
#subscription>ul li.active a{
	background-image: url(../../images/frontend/Elementary.png);
}
#subscription>ul li.final a{
	background-image: url(../../images/frontend/Group3Copy4.png) !important;
}
#subscription>ul li a{
    display: inline-block;
}
#subscription>ul li a span{
    color: #FFF;
    font-size: 14px;
}
#subscription>ul li a span:first-child{
    font-weight: bold;
    margin-right: 10px;
    color: #BBB;
}
#subscription>ul li.active a span:first-child,#subscription>ul li.final a span:first-child{
    color: #FFF600;
}
#subscription .payment-content{
    border: 1px solid #979797;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.9);
    min-height: 300px;
    position: relative;
}
#subscription .payment-content>h1{
    text-align: center;
    font-size: 22px;
    margin: 20px;
}
#subscription .payment-content>img{
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #979797;
    border-radius: 5px;
    cursor: pointer;
}
/*購買步驟END*/




/***********2017/02/13新增*************/
#print-area .vocab-list{
	display:none;
}
/***********2017/02/13新增*************/