* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
    outline: 1;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

body,
html {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    font-family: 'Microsoft YaHei', 微软雅黑;
    background: #FFF;
    min-width: 1024px;
    min-height: 600px;
}

body .front-page {
    background: url("../images/front-page.png") no-repeat center;
    /*-webkit-transition: 1s all linear;*/
    width: 700px;
    height: 525px;
    background-size: 700px 525px;
}

/* 活动手写手册字体 */

@font-face {
    font-family: 'englishLing';
    src: url('../css/english-light.ttf');
}

.font-hand-input {
    font-family: "englishLing";
}

.no-drag {
    /*-webkit-app-region: no-drag;*/
}

.nothing-tip {
    width: 100%;
    text-align: center;
    padding: 20px 0px;
}

.d-tips:before {
    content: url('../images/loading.gif');
    margin-top: 10px;
}

a.load-more {
    display: block;
    padding: 10px 0px;
    text-decoration: none;
    color: #888;
    width: 100%;
    text-align: center;
}

.main {
    width: 100%;
    height: 100%;
    position: relative;
}

.main.nw-yes .nw-no {
    display: none;
}

.main.nw-no .nw-yes {
    display: none;
}

#index-close {
    position: fixed;
    top: 0px;
    right: 10px;
    z-index: 1000;
}

#index-close .top-minimize {
    position: absolute;
    right: 55px;
    top: 10px;
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../images/min-n.svg') center no-repeat;
}

#index-close .top-close {
    position: absolute;
    right: 25px;
    top: 10px;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url('../images/close-n.svg') center no-repeat;
}

#index-close .top-close:hover {
    background: url('../images/close-p.svg') center no-repeat;
}

#index-close .top-minimize:hover {
    background: url('../images/min-p.svg') center no-repeat;
}

#index-fullscreen .full-screen {
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    width: 28px;
    height: 28px;
    z-index: 5;
}

#index-fullscreen .full-screen.enter-full-screen {
    background-image: url('../images/enter-full.svg');
    background-size: 100% 100%;
}

#index-fullscreen .full-screen.enter-full-screen:hover {
    background-image: url('../images/enter-full-hover.svg');
    background-size: 100% 100%;
}

#index-fullscreen .full-screen.leave-full-screen {
    background-image: url('../images/leave-full.svg');
    background-size: 100% 100%;
}

#index-fullscreen .full-screen.leave-full-screen:hover {
    background-image: url('../images/leave-full-hover.svg');
    background-size: 100% 100%;
}

/*头部*/
#index-head {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    background: #002165;
    height: 52px;
    /*-webkit-app-region: drag;*/
}

#index-head .left {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 100px;
    background: url('../images/title-img.svg') center no-repeat;
}

#index-head .center {
    margin-left: 150px;
}

#index-head .right {
    position: absolute;
    right: 30px;
    top: 10px;
}


/*--------------------------------setting------------------*/

#index-head .setting {
    position: absolute;
    right: 90px;
    display: inline-block;
    width: 70px;
    height: 28px;
    border-radius: 20px;
    border: 1px solid #88b7ca;
    text-decoration: none;
    color: #3c3c3c;
    font-size: 16px;
    line-height: 28px;
}


/*--------------------------------maximizing------------------*/

#index-head .maximizing {
    position: absolute;
    right: 40px;
}

#index-head .maximizing:after {
    content: url(../images/max-n.png);
}

#index-head .maximizing:hover:after {
    content: url(../images/max-p.png);
}

#index-head .maximizing:active:after {
    content: url(../images/max-p.png);
}


/*--------------------------------close------------------*/

#index-head .bottom-close {
    position: absolute;
    right: 0px;
    width: 90px;
    font-size: 16px;
}

#index-head .bottom-back {
    position: absolute;
    right: 0px;
    width: 70px;
    font-size: 16px;
}


/*-----------------------index-head center*/


/*-----------------------------------------------------------关于班级选择的*/

.class-list {
    position: absolute;
    width: 120px;
    max-height: 700px;
    background: #FFF;
    border-radius: 15px;
    overflow: auto;
    display: none;
    z-index: 13;
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    padding: 10px 0;
    border: 1px solid #205cd8;
    overflow-x: hidden;
}

.class-list .class-item {
    width: 100%;
    padding: 10px 0px 10px 13px;
}

.class-list .class-item a {
    color: #3c3c3c;
    font-size: 15px;
    text-decoration: none;
}

.class-list .class-item a:hover {
    font-weight: bold;
}


/*----------------------------以上关于班级选择的-------------------------*/


/*----------------------------关于课本选择的-----------------------------*/

#index-head .menu-book {
    position: absolute;
    left: 140px;
    top: 10px;
    width: 120px;
    font-size: 15px;
}

#index-head .menu-book-normal:after {
    content: url('../images/arrow-green-up.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

#index-head .menu-book-active:after {
    content: url('../images/arrow-green-down.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

.book-list {
    position: absolute;
    width: 120px;
    max-height: 500px;
    background: #FFF;
    border-radius: 15px;
    overflow: auto;
    display: none;
    z-index: 13;
    box-shadow: 0 0 30px rgba(100, 100, 100, .5);
    padding: 8px 0;
    border: 1px solid #88b7ca;
}

.book-list .book-item {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

.book-list .book-item a {
    color: #3c3c3c;
    font-size: 15px;
    text-decoration: none;
    position: relative;
    right: 8px;
}

.book-list .book-item a:hover {
    font-weight: bold;
}

.playrate-list {
    position: absolute;
    background: #FFF;
    width: 126px;
    border-radius: 15px;
    overflow: auto;
    display: none;
    z-index: 13;
    box-shadow: 0 0 30px rgba(100, 100, 100, .5);
    padding: 8px 0;
    border: 1px solid #88b7ca;
}

.playrate-list .playrate-item {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    display: block;
    color: #3c3c3c;
    font-size: 15px;
    text-decoration: none;
}

.playrate-list .playrate-item:hover {
    font-weight: bold;
    color: #222;
    background: #f0f0f0;
}

/*--------------------------------------------关于课本选择的---------------------*/

#index-head .menu-exercise-choose-type-select .bottom-hover-btn,
#index-head .menu-exercise-middle-type-select .bottom-hover-btn,
#index-head .menu-exercise-better-type-select .bottom-hover-btn {
    background: #205cd8;
}

.menu-exercise-type {
    position: absolute;
    left: 270px;
    top: 10px;
    font-size: 15px;
    width: auto;
    padding: 0px 10px;
    max-width: 140px;
}

.menu-exercise-type-normal:after {
    content: url('../images/arrow-green-up.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

.menu-exercise-type-active:after {
    content: url('../images/arrow-green-down.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

.exercise-type-list {
    position: absolute;
    max-height: 500px;
    background: #FFF;
    border-radius: 15px;
    overflow: auto;
    display: none;
    z-index: 13;
    box-shadow: 0 0 30px rgba(100, 100, 100, .5);
    padding: 8px 0;
    border: 1px solid #88b7ca;
}

.exercise-type-list .exercise-type-item {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

.exercise-type-list .exercise-type-item a {
    color: #3c3c3c;
    font-size: 15px;
    text-decoration: none;
    position: relative;
    padding: 0px 10px;
}

.exercise-type-list .exercise-type-item a:hover {
    font-weight: bold;
}

.menu-book-type {
    position: absolute;
    left: 270px;
    top: 10px;
    width: 120px;
    font-size: 15px;
}

.menu-book-type-normal:after {
    content: url('../images/arrow-green-up.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

.menu-book-type-active:after {
    content: url('../images/arrow-green-down.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

.book-type-list {
    position: absolute;
    width: 120px;
    max-height: 500px;
    background: #FFF;
    border-radius: 15px;
    overflow: auto;
    display: none;
    z-index: 13;
    box-shadow: 0 0 30px rgba(100, 100, 100, .5);
    padding: 8px 0;
    border: 1px solid #88b7ca;
}

.book-type-list .book-type-item {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

.book-type-list .book-type-item a {
    color: #3c3c3c;
    font-size: 15px;
    text-decoration: none;
    position: relative;
    right: 8px;
}

.book-type-list .book-type-item a:hover {
    font-weight: bold;
}

/*--------------------------------------------以下关于目录---------------------*/

.catalog-list {
    min-width: 200px;
    height: 70%;
    background: #FFF;
    position: absolute;
    border-radius: 8px;
    overflow: auto;
    display: none;
    z-index: 2;
    box-shadow: 0 0 30px rgba(136, 136, 136, .5);
}

.catalog-list .catalog-head {
    width: 100%;
    line-height: 40px;
    color: #91b4fd;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    background: #0c3ea7;
    position: absolute;
    top: 0px;
}

.catalog-list .catalog-item {
    height: 40px;
    margin: 0px 10px 0px 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.catalog-list .catalog-item a {
    text-decoration: none;
    color: #000;
    height: 100%;
}

.catalog-list .catalog-item .current-page {
    color: #91b4fd;
}

.catalog-list .catalog-item-head {
    font-size: 18px;
}

.catalog-list .catalog-item-page {
    margin-left: 40px;
}

.catalog-list .catalog-content {
    overflow: auto;
    height: 100%;
}


/*--------------------------------------------以上关于点读---------------------*/

#index-head .bottom-hover-btn {
    background-color: #0c3ea7;
    color: #91b4fd;
    border: 1px solid #205cd8;
    border-radius: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    display: inline-block;
}

#index-head .bottom-hover-btn:hover {
    background-color: #205cd8;
}

#index-head .bottom-hover-btn.bottom-hover-disable-btn {
    background-color: #455983;
}

#index-head .bottom-hover-btn.bottom-hover-disable-btn:hover {
    background-color: #455983;
}

#index-head .bottom-hover-btn.bottom-hover-select-btn {
    background-color: #205cd8;
}

#index-head .bottom-hover-btn.bottom-hover-select-btn:hover {
    background-color: #205cd8;
}

#index-head .menu-home a:after {
    content: url(../images/home-n.png);
}

#index-head .menu-home a:hover:after {
    content: url(../images/home-p.png);
}

#index-head .menu-catalog a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-catalog a:after {
    content: url(../images/catalog-n.svg);
}

#index-head .menu-catalog a:hover:after {
    content: url(../images/catalog-p.svg);
}

#index-head .menu-explain {
    opacity: 0;
}

#index-head .menu-explain.explain-show {
    opacity: 1;
}

#index-head .menu-explain a {
    width: 90px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .menu-book-exercise {
    opacity: 0;
    position: absolute;
    top: -75px;
    right: 60px;
}

#index-head .menu-book-exercise.book-exercise-show {
    opacity: 1;
}

#index-head .menu-book-exercise a {
    width: 75px;
    margin: 0 5px;
    font-size: 14px;
}

#index-head .menu-translate a {
    width: 65px;
    font-size: 16px;
}

#index-head .menu-translate a .white-check-select {
    display: none;
    width: 17px;
    height: 17px;
    position: relative;
    top: 2px;
    right: 4px;
    background: url('../images/white-check-select.svg') center no-repeat;
}

#index-head .menu-translate a.bottom-hover-select-btn .white-check-select {
    display: inline-block;
}

#index-head .menu-audio-content {
    letter-spacing: -6px;
    white-space: nowrap;
    margin: 0px 7px;
}

#index-head .menu-audio-content.bottom-hover-btn:hover {
    background-color: #0c3ea7;
}

#index-head .menu-audio a {
    letter-spacing: 0px;
    color: #91b4fd;
    height: 31px;
    line-height: 31px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    bottom: 1px;
}

#index-head .menu-audio-read {
    width: 73px;
    font-size: 15px;
    text-align: right;
    padding-right: 7px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

#index-head .menu-audio-read:hover {
    background-color: #205cd8;
}

#index-head .menu-audio-read.menu-audio-read-n .normal {
    display: inline;
}

#index-head .menu-audio-read.menu-audio-read-n .select {
    display: none;
}

#index-head .menu-audio-read.menu-audio-read-p .normal {
    display: none;
}

#index-head .menu-audio-read.menu-audio-read-p .select {
    display: inline;
}

#index-head .menu-playrate a {
    width: 100px;
    margin: 0px 5px;
}

#index-head .menu-playrate-normal a:after {
    content: url('../images/arrow-green-up.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

#index-head .menu-playrate-active a:after {
    content: url('../images/arrow-green-down.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

#index-head .read-space {
    font-size: 14px;
    text-align: left;
    padding-left: 7px;
    padding-right: 10px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

#index-head .read-space:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 13px;
    left: -1px;
    top: 9px;
    background-color: #205cd8;
}

#index-head .read-space:hover {
    background-color: #205cd8;
}

#index-head .read-space:hover:before {
    left: 0px;
}

#index-head .read-space.arrow-up:after {
    content: url('../images/arrow-green-up.png');
    margin-left: 4px;
    position: relative;
    bottom: 2px;
}

#index-head .read-space.arrow-down:after {
    content: url('../images/arrow-green-down.png');
    margin-left: 4px;
    position: relative;
    bottom: 2px;
}

#index-head .menu-left a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-left a:after {
    content: url(../images/left-n.svg);
}

#index-head .menu-left a:hover:after {
    content: url(../images/left-p.svg);
}

#index-head .menu-left.menu-left-disable a:after {
    content: url(../images/left-disable.svg);
}

#index-head .menu-left.menu-left-disable a:hover:after {
    content: url(../images/left-disable.svg);
}

#index-head .menu-right a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-right a:after {
    content: url(../images/right-n.svg);
}

#index-head .menu-right a:hover:after {
    content: url(../images/right-p.svg);
}

#index-head .menu-right.menu-right-disable a:after {
    content: url(../images/right-disable.svg);
}

#index-head .menu-right.menu-right-disable a:hover:after {
    content: url(../images/right-disable.svg);
}

#index-head .menu-question-read-n a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-question-read-p a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-question-read-n a:after {
    content: url(../images/question-read-n.svg);
}

#index-head .menu-question-read-n a:hover:after {
    content: url(../images/question-read-n-hover.svg);
}

#index-head .menu-question-read-p a:after {
    content: url(../images/question-read-p.svg);
}

#index-head .menu-question-read-p a:hover:after {
    content: url(../images/question-read-p-hover.svg);
}

#index-head .menu-question-read.menu-question-read-disable a:after {
    content: url(../images/question-read-disable.svg);
}

#index-head .menu-question-read.menu-question-read-disable a:hover:after {
    content: url(../images/question-read-disable.svg);
}

#index-head .menu-left-audio a {
    width: 78px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .menu-right-audio a {
    width: 78px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .menu-question-answer a {
    width: 90px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .menu-question-audio-text a {
    width: 70px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .menu-question-analysis a {
    width: 70px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .menu-question-reset a {
    width: 70px;
    margin: 0 5px;
    font-size: 16px;
}

#index-head .center table {
    margin: 0 auto;
    height: 52px;
}

#index-head .center .menu-td {
    width: 45px;
    text-align: center;
    vertical-align: middle;
}

#index-head .menu-class {
    position: absolute;
    left: 140px;
    top: 10px;
    width: 120px;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#index-head .menu-class-normal:after {
    content: url('../images/arrow-green-up.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

#index-head .menu-class-active:after {
    content: url('../images/arrow-green-down.png');
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

#index-head .menu-message {
    position: absolute;
    left: 280px;
    top: 10px;
    width: 92px;
    font-size: 15px;
}

#index-head .menu-message:before {
    content: url('../images/message-icon.png');
    padding-right: 8px;
    position: relative;
    top: 2px;
}

#index-head .menu-message-number {
    display: none;
    background: #92b6ff;
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 20px;
    padding: 3px 5px 2px;
    line-height: 1;
    color: #022165;
    font-size: 12px;
}

#index-head .menu-activity {
    position: absolute;
    left: 390px;
    top: 10px;
    width: 92px;
    font-size: 15px;
}

#index-head .menu-activity:before {
    content: url('../images/activity-icon.png');
    padding-right: 5px;
    position: relative;
    top: 3px;
}

#index-head .menu-app-download {
    position: absolute;
    left: 500px;
    top: 10px;
    width: 170px;
    font-size: 15px;
    background-color: #cb9733;
    color: #ffebc6;
    border: 1px solid #976400;
    border-radius: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    display: inline-block;
}

#index-head .menu-app-download:before {
    content: url('../images/app-download-icon.png');
    padding-right: 5px;
    position: relative;
    top: 3px;
}

#index-head .menu-app-download:hover {
    background-color: #976400;
}

#index-head .menu-teacher-holiday {
    position: absolute;
    left: 685px;
    top: 10px;
    width: 150px;
    font-size: 15px;
    background-color: #3b99d7;
    color: #fff;
    border: 1px solid #3b99d7;
    border-radius: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    display: inline-block;
}

#index-head .menu-teacher-holiday:hover {
    background-color: #205cd8;
    border: 1px solid #205cd8;
}

#index-head .menu-draw a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-draw-color a:after {
    content: url(../images/draw-color.svg);
}

#index-head .menu-draw-color.menu-draw-color-select a:after {
    content: url(../images/draw-color-hover.svg);
}

#index-head .menu-draw-color a:hover:after {
    content: url(../images/draw-color-hover.svg);
}

#index-head .menu-draw-size a:after {
    content: url(../images/draw-size.svg);
}

#index-head .menu-draw-size.menu-draw-size-select a:after {
    content: url(../images/draw-size-hover.svg);
}

#index-head .menu-draw-size a:hover:after {
    content: url(../images/draw-size-hover.svg);
}

#index-head .menu-draw-back a:after {
    content: url(../images/draw-back.svg);
}

#index-head .menu-draw-back a:hover:after {
    content: url(../images/draw-back-hover.svg);
}

#index-head .menu-draw-forward a:after {
    content: url(../images/draw-forward.svg);
}

#index-head .menu-draw-forward a:hover:after {
    content: url(../images/draw-forward-hover.svg);
}

#index-head .menu-draw-clear a:after {
    content: url(../images/draw-clear.svg);
}

#index-head .menu-draw-clear a:hover:after {
    content: url(../images/draw-clear-hover.svg);
}

#index-head .menu-transform a {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 30px;
    background: #0c3ea7;
    border: 1px solid #205cd8;
    z-index: 11;
}

#index-head .menu-transform a img {
    width: 20px;
    position: relative;
    top: 7px;
    left: 1px;
}

#index-head .menu-transform-big {
    position: absolute;
    top: -38px;
    right: 60px;
}

#index-head .menu-transform-small {
    position: absolute;
    top: -38px;
    right: 20px;
}

#index-head .menu-transform-big a:hover {
    opacity: 0.5;
}

#index-head .menu-transform-small a:hover {
    opacity: 0.5;
}

.draw-color-list {
    width: 240px;
    height: 155px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    position: absolute;
    text-align: center;
    background-color: #fff;
    display: none;
    z-index: 100;
}

.draw-color-list .draw-color-item {
    display: inline-block;
    margin: 10px 18px;
    width: 30px;
    height: 30px;
    border-radius: 20px;
}

.draw-color-list .draw-color-item:hover {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);     /* IE 9 */
    -moz-transform: scale(1.1, 1.1);    /* Firefox */
    -webkit-transform: scale(1.1, 1.1); /* Safari 和 Chrome */
    -o-transform: scale(1.1, 1.1);  /* Opera */
}

.draw-color-list .name {
    font-size: 18px;
    padding: 15px 0px 8px;
    color: #3c3c3c;
}

.draw-color-list .draw-arrow-down {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    position: absolute;
    left: 50%;
    bottom: -9px;
    margin-left: -9px;
}

.draw-color-red {
    background-color: #fd0d00;
}

.draw-color-orange {
    background-color: #fe6c00;
}

.draw-color-green {
    background-color: #30cc02;
}

.draw-color-blue {
    background-color: #1098e6;
}

.draw-color-pink {
    background-color: #d528fc;
}

.draw-color-black {
    background-color: #000;
}

.draw-size-list {
    width: 280px;
    height: 230px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    position: absolute;
    text-align: center;
    background-color: #fff;
    display: none;
    z-index: 100;
}

.draw-size-list .draw-size-item {
    display: inline-block;
    width: 240px;
    padding: 8px 20px;
    margin: 4px 0px;
}

.draw-size-list .draw-size-item.draw-size-select {
    background-color: #eee;
}

.draw-size-list .draw-size-item .size-line {
    width: 100%;
    background-color: #78a0f4;
    display: block;
    opacity: 0.7;
}

.draw-size-list .draw-size-item:hover .size-line {
    background-color: #225fd9;
    opacity: 1;
}

.draw-size-list .name {
    font-size: 18px;
    padding: 15px 0px 8px;
    color: #3c3c3c;
}

.draw-size-list .draw-arrow-down {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    position: absolute;
    left: 50%;
    bottom: -9px;
    margin-left: -9px;
}

.draw-size-1 .size-line {
    height: 2px;
}

.draw-size-2 .size-line {
    height: 4px;
}

.draw-size-3 .size-line {
    height: 6px;
}

.draw-size-4 .size-line {
    height: 10px;
}

.draw-size-5 .size-line {
    height: 18px;
}

.read-space-choose-list {
    width: 290px;
    height: 160px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    position: absolute;
    text-align: center;
    background-color: #fff;
    display: none;
    z-index: 100;
}

.read-space-choose-list .name {
    font-size: 20px;
    padding: 20px 0px 18px;
    color: #3c3c3c;
}

.read-space-choose-list .arrow-down {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    position: absolute;
    left: 50%;
    bottom: -9px;
    margin-left: -9px;
}

.read-space-choose-list .space-progress {
    width: 240px;
    height: 38px;
    display: inline-block;
    position: relative;
}

.read-space-choose-list .space-progress:before {
    content: "";
    width: 240px;
    display: inline-block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 10px;
    height: 8px;
    background-color: #e5e5e5;
    border-radius: 10px;
}

.read-space-choose-list .mark {
    background: url('../images/audio-space-mark.svg') right no-repeat;
    position: absolute;
    left: -15px;
    width: 30px;
    height: 35px;
    top: 0px;
    cursor: pointer;
}

.read-space-choose-list .space-grade {
    display: inline-block;
    text-decoration: none;
    width: 40px;
    margin-right: 35px;
    text-align: center;
    margin-top: 10px;
    padding: 10px 0px;
    font-size: 12px;
    color: #555;
    position: relative;
}

.read-space-choose-list .space-grade:before {
    content: "";
    position: absolute;
    left: 19px;
    top: -20px;
    background-color: #aaa;
    width: 2px;
    height: 5px;
}

.read-space-choose-list .space-grade.grade-4 {
    margin-right: 0px;
    right: 2px;
}

/*学生列表---------------------------------------------------------------------------*/

#index-hornor {
    background: #fda300;
    position: absolute;
    left: 10px;
    top: 47px;
    bottom: 70px;
    width: 103px;
    z-index: 2;
    border-radius: 8px;
    display: none;
}

#index-hornor .hornor-img {
    background: url("../images/hornor.svg") no-repeat center;
    height: 83px;
    right: 0px;
    left: 0px;
    top: -30px;
    position: absolute;
}

#index-hornor .hornor-list::-webkit-scrollbar {
    width: 0px;
}

#index-hornor .hornor-list {
    background: #FFF;
    position: absolute;
    margin: 6px;
    top: 55px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: 5px;
    overflow: auto;
    padding: 15px 0px 10px;
}

#index-hornor .hornor-list .stu-item {
    width: 100%;
    text-align: center;
    display: none;
}

#index-hornor .hornor-list .stu-item .avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto;
}

#index-hornor .hornor-list .stu-item .avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

#index-hornor .hornor-list .stu-item .stu-name {
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    margin: 5px auto;
}

#index-hornor .hornor-list .stu-item .star-div {
    width: 85px;
}

#index-hornor .hornor-list .stu-item .star {
    background: url('../images/star-big.svg') center no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

#index-hornor .hornor-list .hornor-tip {
    font-size: 14px;
    margin: 10px;
    text-align: center;
}

#index-hornor .hornor-list .reward {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background: #ff6c00;
    height: 32px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    border-radius: 7px;
    color: #fff;
    font-size: 21px;
    font-weight: 500;
}

#index-hornor .hornor-list .reward:hover {
    background: #da5c00;
}


/*-------------------------------------------------------------学生列表----------------------------------*/

.d-students::-webkit-scrollbar {
    width: 0px;
}

.d-students {
    overflow: auto;
    height: 100%;
}

.d-students .students-tip {
    width: 100%;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

.d-search .i-search {
    border: 1px solid #ddd;
    border-radius: 20px;
    height: 30px;
    width: 290px;
    margin: 25px 20px;
    display: inline-block;
}

.d-search .i-search .mark-icon {
    background: url("../images/search.svg") center no-repeat;
    position: relative;
    top: 4px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.d-search .i-search input {
    border-style: none;
    background-color: transparent;
    outline: none;
    padding-left: 15px;
    height: 100%;
    width: 236px;
    font-size: 13px;
    position: relative;
    bottom: 1px;
}

.d-change-groups {
    padding-left: 20px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #757575;
    padding-bottom: 7px;
}

.d-change-groups a {
    color: #ffa000;
    font-size: 14px;
    padding-left: 3px;
}

.d-groups {
    overflow-y: auto;
}

.d-group {
    border-bottom: 1px solid #eee;
    position: relative;
}

.d-group .group-name {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    text-decoration: none;
    color: #3c3c3c;
}

.d-group .group-name.check-yes:before {
    content: url(../images/check-yes.png);
    position: relative;
    top: 1px;
    padding-right: 7px;
}

.d-group .group-name.check-no:before {
    content: url(../images/check-no.png);
    position: relative;
    top: 1px;
    padding-right: 7px;
}

.d-group .group-admin {
    padding-left: 15px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
}

.d-group .group-control {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 25px;
    height: 25px;
    display: inline-block;
}

.d-group .group-control.down {
    background: url('../images/group-down.svg') center no-repeat;
}

.d-group .group-control.up {
    background: url('../images/group-up.svg') center no-repeat;
}

.d-group .students {
    border-top: 1px solid #eee;
    padding: 8px 0px;
    background-color: #f5f5f5;
}

.d-students .student {
    width: 85px;
    padding: 5px 0;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.d-students .student.student-big {
    width: 110px;
}

.d-students .student .star-number {
    font-size: 16px;
    color: red;
    line-height: 34px;
}

.d-students .student .star-number .star-icon {
    background: url('../images/star-big.svg') center no-repeat;
    padding-right: 10px;
    position: relative;
    top: 2px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.d-students .student .real-name {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-students .student .real-name.real-name-big {
    font-size: 20px;
}

.d-students .student .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #77D300;
    display: inline-block;
}

.d-students .student .avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.d-students .student .avatar.avatar-big {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.d-students .student .avatar.avatar-big img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.d-students-right {
    text-align: center;
}

.d-students-right .star-total {
    color: #757575;
    font-size: 17px;
    padding-top: 15px;
}

.d-students-right .choose-one-group {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
    margin: 10px 7px 20px;
    background-color: #fd6c21;
}

.d-students-right .choose-one-group:hover {
    background-color: #da5c00;
}

.d-students-right .choose-one-student {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
    margin: 10px 7px 20px;
    background-color: #fd6c21;
}

.d-students-right .choose-one-student:hover {
    background-color: #da5c00;
}

.d-students-right .choose-clear {
    display: inline-block;
    text-decoration: none;
    color: #757575;
    width: 70px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    position: absolute;
    top: 26px;
    right: 20px;
}

.d-students-right .choose-clear:hover {
    background-color: #f5f5f5;
}

.d-students-right .d-have-choose {
    overflow-y: auto;
    padding-right: 10px;
    position: relative;
}

.d-have-choose .gold-show {
    display: inline-block;
    background-color: #f5f5f5;
    border-radius: 15px;
    text-align: center;
    padding: 20px 15px 15px;
    text-decoration: none;
    color: #3c3c3c;
    font-size: 20px;
    border: 1px solid #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
    -ms-transform: translate( -50%, -50%);     /* IE 9 */
    -moz-transform: translate( -50%, -50%);    /* Firefox */
    -webkit-transform: translate( -50%, -50%); /* Safari 和 Chrome */
    -o-transform: translate( -50%, -50%);  /* Opera */
}

.d-have-choose .gold-show .tree {
    position: relative;
    vertical-align: middle;
    bottom: 5px;
    padding-right: 5px;
    display: inline-block;
    width: 50px;
    height: 60px;
}

.d-have-choose .gold-show .number-div {
    display: inline-block;
    line-height: 1.2
}

.d-have-choose .gold-show .gold-number {
    font-size: 27px;
    color: #fd6c21;
    font-weight: 500;
}

.gold-alert {
    padding: 23px 20px 10px 30px;
    color: #3c3c3c;
}

.gold-alert span {
    color: #fd6c21;
}

.gold-alert .lost {
    font-size: 20px;
}

.gold-alert .content {
    margin: 15px 0 25px;
    font-size: 15px;
    line-height: 1.6;
}

.gold-alert .require-div {
    text-align: right;
}

.gold-alert .require-div .require-a {
    display: inline-block;
    height: 30px;
    border-radius: 20px;
    color: #fff;
    background: #77d300;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 20px;
}

.gold-alert .require-div .require-a:hover {
    background: #6abb00;
}

.gold-alert .require-div .require-a.require-a-disable {
    background: #a9aaa9;
}

.gold-alert .require-div .require-a.require-a-disable:hover {
    background: #a9aaa9;
}

.d-students-right .student {
    position: relative;
}

.d-students-right .student .cancel-btn {
    font-size: 18px;
    color: red;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    position: absolute;
    right: -2px;
    top: 0px;
    border-radius: 10px;
    border: 1px solid red;
    text-decoration: none;
}

.d-students-right .student .cancel-btn:hover {
    background-color: #aaa;
}

.d-students-right .reward-btn {
    width: 290px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    background-color: #ffa000;
    color: #fff;
    font-size: 25px;
    text-decoration: none;
    margin-top: 20px;
}

.d-students-right .reward-btn:hover {
    background-color: #ed9500;
}

.d-students-right .reward-btn.reward-btn-disable {
    background-color: #aaa;
}

.d-students-right .reward-btn.reward-btn-disable:hover {
    background-color: #aaa;
}

.d-students-right .reward-audio-alert {
    font-size: 16px;
    color: #999;
    padding-top: 10px;
}

.reward-confirm {
    text-align: center;
    margin-top: 80px;
}

.reward-confirm .avatar {
    margin-top: 30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid #77D300;
}

.reward-confirm .avatar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.reward-confirm a {
    margin-top: 10px;
    width: 248px;
    height: 48px;
    display: inline-block;
    text-align: center;
    line-height: 48px;
    background-color: #ffa000;
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid #ed9500;
}

.reward-confirm a:hover {
    background-color: #ed9500;
}

.reward-confirm p {
    font-weight: 900;
    font-size: 25px;
    color: #505050;
    margin: 15px;
    margin-bottom: 40px;
}

.reward-success {
    position: relative;
}

.reward-success-name {
    border: 2px solid #76DBF7;
    position: absolute;
    top: 130px;
    width: 230px;
    left: 78px;
    text-align: center;
    background: #FFF;
    border-radius: 100px;
    height: 80px;
}

.reward-success-name h1 {
    color: #EE7526;
    font-size: 20px;
    font-weight: 500;
    margin: 20px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.close-reward-succ {
    position: absolute;
    right: 0px;
    top: 0px;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid red;
    color: red;
    font-size: 22px;
    text-decoration: none;
}


/*-------------------------------------------------------------学生列表----------------------------------*/


/*----------------home---------------------*/

#container {
    background: #FFF;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

#container .home-container {
    width: 100%;
    height: 100%;
    background: #2635a9;
    background: -webkit-linear-gradient(top, #001030, #042d84 60%, #084bd9);
    background: -moz-linear-gradient(top, #001030, #042d84 60%, #084bd9);
    background: -o-linear-gradient(top, #001030, #042d84 60%, #084bd9);
    background: linear-gradient(top, #001030, #042d84 60%, #084bd9);
}

.body-ie11 #container .home-container {
    background: #042d84;
}

#container .home {
    position: absolute;
    top: 47px;
    left: 150px;
    right: 37px;
    bottom: 82px;
}

#container .home-back {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #042d84;
    background: -webkit-linear-gradient(top, #001030, #042d84 60%, #084bd9);
    background: -moz-linear-gradient(top, #001030, #042d84 60%, #084bd9);
    background: -o-linear-gradient(top, #001030, #042d84 60%, #084bd9);
    background: linear-gradient(top, #001030, #042d84 60%, #084bd9);
}

.home .home-top {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #1ef0ff;
    height: 47.5%;
    box-shadow: 0 0 25px rgba(0, 0, 0, .7);
    border-radius: 7px;
    overflow: hidden;
}

.home-top .home-top-img,
.home-top .home-top-img-back {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 7px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
}

.home-top .home-top-left {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);     /* IE 9 */
    -moz-transform: translate(0, -50%);    /* Firefox */
    -webkit-transform: translate(0, -50%); /* Safari 和 Chrome */
    -o-transform: translate(0, -50%);  /* Opera */
    width: 50px;
    height: 50px;
    background-image: url('../images/home-left.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

.home-top .home-top-left:hover {
    background-image: url('../images/home-left-click.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

.home-top .home-top-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);     /* IE 9 */
    -moz-transform: translate(0, -50%);    /* Firefox */
    -webkit-transform: translate(0, -50%); /* Safari 和 Chrome */
    -o-transform: translate(0, -50%);  /* Opera */
    width: 50px;
    height: 50px;
    background-image: url('../images/home-right.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

.home-top .home-top-right:hover {
    background-image: url('../images/home-right-click.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

.home-top .points {
    position: absolute;
    display: inline-block;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);     /* IE 9 */
    -moz-transform: translate(-50%, 0);    /* Firefox */
    -webkit-transform: translate(-50%, 0); /* Safari 和 Chrome */
    -o-transform: translate(-50%, 0);  /* Opera */
}

.home-top .points .point {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #fff;
    opacity: 1;
    margin: 0px 3px;
}

.home-top .points .point.point-select {
    opacity: 1;
    background: #fe6c00;
}

.home .home-bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 49%;
}

.home-bottom .bottom-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 23%;
}

.home-bottom .bottom-right div {
    position: absolute;
    text-align: right;
    width: 33.33%;
    height: 50%;
}

.home-bottom a {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 20px;
    bottom: 0;
    border-radius: 7px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .7);
    background-size: 100% 100%;
    text-align: center;
}

.home-bottom a.top {
    bottom: 10px;
    top: 0px;
}

.home-bottom a.bottom {
    top: 10px;
    bottom: 0px;
}

.home-bottom a img {
    height: 48%;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);     /* IE 9 */
    -moz-transform: translate(-50%, 0);    /* Firefox */
    -webkit-transform: translate(-50%, 0); /* Safari 和 Chrome */
    -o-transform: translate(-50%, 0);  /* Opera */
}

.home-bottom a span {
    position: absolute;
    bottom: 12%;
    left: 0px;
    right: 0px;
    text-align: center;
    color: #fff;
    font-size: 21px;
    font-weight: 200;
}

.home-bottom a:hover {
    transform: scale(1.06, 1.06);
    -ms-transform: scale(1.06, 1.06);     /* IE 9 */
    -moz-transform: scale(1.06, 1.06);    /* Firefox */
    -webkit-transform: scale(1.06, 1.06); /* Safari 和 Chrome */
    -o-transform: scale(1.06, 1.06);  /* Opera */
    border: 2px solid #fff;
    border-radius: 10px;
}

.home-bottom a:hover img {
    top: 14%;
}

.home-bottom a:hover span {
    margin-top: 14%;
}

.home-bottom .reward {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 23%;
}

.home-bottom .reward a {
    background: #ff8c38;
    background: -webkit-linear-gradient(left top, #ff8c38, #cb5600);
    background: -moz-linear-gradient(left top, #ff8c38, #cb5600);
    background: -o-linear-gradient(left top, #ff8c38, #cb5600);
    background: linear-gradient(left top, #ff8c38, #cb5600);
    left: 0px;
}

.home-bottom .reward a img {
    top: 30%;
    height: 23%;
}

.home-bottom .reward a span {
    bottom: 32%;
}

.home-bottom .read {
    left: 0;
    top: 0;
}

.home-bottom .read a {
    background: #5ed1b3;
    background: -webkit-linear-gradient(left top, #5ed1b3, #299577);
    background: -moz-linear-gradient(left top, #5ed1b3, #299577);
    background: -o-linear-gradient(left top, #5ed1b3, #299577);
    background: linear-gradient(left top, #5ed1b3, #299577);
}

.home-bottom .word {
    left: 33.33%;
    top: 0;
}

.home-bottom .word a {
    background: #4ac5da;
    background: -webkit-linear-gradient(left top, #4ac5da, #0a8499);
    background: -moz-linear-gradient(left top, #4ac5da, #0a8499);
    background: -o-linear-gradient(left top, #4ac5da, #0a8499);
    background: linear-gradient(left top, #4ac5da, #0a8499);
}

.home-bottom .hand {
    left: 66.66%;
    top: 0;
}

.home-bottom .hand a {
    background: #f1b24d;
    background: -webkit-linear-gradient(left top, #f1b24d, #af6f0a);
    background: -moz-linear-gradient(left top, #f1b24d, #af6f0a);
    background: -o-linear-gradient(left top, #f1b24d, #af6f0a);
    background: linear-gradient(left top, #f1b24d, #af6f0a);
}

.home-bottom .exercise {
    left: 0;
    bottom: 0;
}

.home-bottom .exercise a {
    background: #ed6294;
    background: -webkit-linear-gradient(left top, #ed6294, #b32a5c);
    background: -moz-linear-gradient(left top, #ed6294, #b32a5c);
    background: -o-linear-gradient(left top, #ed6294, #b32a5c);
    background: linear-gradient(left top, #ed6294, #b32a5c);
}

.home-bottom .class-manager {
    left: 33.33%;
    bottom: 0;
}

.home-bottom .class-manager a {
    background: #ffc65d;
    background: -webkit-linear-gradient(left top, #ffc65d, #b98018);
    background: -moz-linear-gradient(left top, #ffc65d, #b98018);
    background: -o-linear-gradient(left top, #ffc65d, #b98018);
    background: linear-gradient(left top, #ffc65d, #b98018);
}

.home-bottom .homework {
    left: 25%;
    bottom: 0;
}

.home-bottom .homework a {
    background: #cf4ee9;
    background: -webkit-linear-gradient(left top, #cf4ee9, #81079b);
    background: -moz-linear-gradient(left top, #cf4ee9, #81079b);
    background: -o-linear-gradient(left top, #cf4ee9, #81079b);
    background: linear-gradient(left top, #cf4ee9, #81079b);
}

.home-bottom .check-homework {
    left: 50%;
    bottom: 0;
}

.home-bottom .check-homework a {
    background: #b2e774;
    background: -webkit-linear-gradient(left top, #b2e774, #70a531);
    background: -moz-linear-gradient(left top, #b2e774, #70a531);
    background: -o-linear-gradient(left top, #b2e774, #70a531);
    background: linear-gradient(left top, #b2e774, #70a531);
}

.home-bottom .set {
    left: 66.66%;
    bottom: 0;
}

.home-bottom .set a {
    background: #ee7642;
    background: -webkit-linear-gradient(left top, #ee7642, #b63b08);
    background: -moz-linear-gradient(left top, #ee7642, #b63b08);
    background: -o-linear-gradient(left top, #ee7642, #b63b08);
    background: linear-gradient(left top, #ee7642, #b63b08);
}


/*书本页面信息*/

.down-btn {
    position: fixed;
    right: 20px;
    bottom: 70px;
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #0c3ea7;
    border-radius: 20px;
    border: 1px solid #205cd8;
    opacity: 0.3;
}

.down-btn:hover {
    opacity: 1;
}

.down-btn:active {
    background-color: #205cd8;
}

.book-exercise-content {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: none;
    z-index: 100;
}

.book-page {
    overflow: hidden;
    position: relative;
    left: 90px;
    margin-bottom: 50px;
}

.book-page-container {
    width: 100%;
    background: #FFF;
    overflow-x: hidden;
    position: relative;
}

.book-page .area {
    border: 5px solid #fe6c00;
    border-radius: 8px;
}

.translate {
    font-size: 1em;
    border-radius: 8px;
    background: #136600;
    color: #fff;
}


/*活动手册页面信息*/

.hand-page-container {
    width: 100%;
    height: 100%;
    background: #70ecff;
}

.hand-page-container .hand-page {
    position: absolute;
    left: 130px;
    top: 55px;
    right: 105px;
    bottom: 60px;
    background-color: #fff;
    border-radius: 15px;
    overflow-y: auto;
    overflow-x: auto;
}

.hand-page-container .draw-btn {
    width: 97px;
    height: 32px;
    position: absolute;
    display: inline-block;
    border-radius: 32px;
    background-color: #205cd8;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 32px;
    right: 5px;
    bottom: 105px;
    font-size: 15px;
}

.hand-page-container .draw-btn:hover {
    opacity: 0.5;
}

.hand-page-container .draw-btn .white-check-select {
    position: relative;
    top: 2px;
    right: 4px;
    width: 17px;
    height: 17px;
    background: url('../images/white-check-select.svg') center no-repeat;
}

.hand-page-container .draw-btn.check-no .white-check-select {
    display: none;
}

.hand-page-container .draw-btn.check-yes .white-check-select {
    display: inline-block;
}

.hand-page-container .show-answer-all-btn {
    width: 97px;
    height: 32px;
    position: absolute;
    display: inline-block;
    border-radius: 32px;
    background-color: #205cd8;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 32px;
    right: 5px;
    bottom: 142px;
    font-size: 13px;
}

.hand-page-container .show-answer-all-btn-select {
    background-color: #fff;
    color: #3c3c3c;
}

.hand-page-container .show-answer-all-btn:hover,
.hand-page-container .show-answer-all-btn-select:hover {
    opacity: 0.5;
}

.hand-page-container .show-answer-one-btn {
    width: 97px;
    height: 32px;
    position: absolute;
    display: inline-block;
    border-radius: 32px;
    background-color: #205cd8;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 32px;
    right: 5px;
    font-size: 12px;
}

.hand-page-container .show-answer-one-btn.show-answer-one-btn-select {
    background-color: #fff;
    color: #3c3c3c;
}

.hand-page-container .show-answer-one-btn:hover,
.hand-page-container .show-answer-one-btn.show-answer-one-btn-select:hover {
    opacity: 0.5;
}

.hand-page-container .show-answer-one-btn.show-answer-one-btn-right {
    bottom: 215px;
}

.hand-page-container .show-answer-one-btn.show-answer-one-btn-left {
    bottom: 179px;
}

.hand-page-container .enlarge-big-btn {
    position: absolute;
    right: 55px;
    bottom: 60px;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: #205cd8;
}

.hand-page-container .enlarge-big-btn:hover {
    opacity: 0.5;
}

.hand-page-container .enlarge-big-btn img {
    width: 20px;
    position: relative;
    top: 10px;
    left: 10px;
}

.hand-page-container .enlarge-small-btn {
    position: absolute;
    right: 10px;
    bottom: 58px;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: #205cd8;
}

.hand-page-container .enlarge-small-btn:hover {
    opacity: 0.5;
}

.hand-page-container .enlarge-small-btn img {
    width: 20px;
    position: relative;
    top: 10px;
    left: 10px;
}

.hand-page-container .unit-name {
    position: absolute;
    left: 130px;
    top: 17px;
    font-size: 33px;
    font-weight: 900;
    color: #fff;
}

.hand-page-container .question-btns {
    position: absolute;
    display: table-cell;
    right: 0px;
    width: 107px;
    /* bottom: 260px; */
    bottom: 200px;
    overflow-x: hidden;
}

.hand-page-container .question-btns .q-btn {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    background-color: #205cd8;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    margin-top: 20px;
    padding: 0 20px 0 10px;
    white-space: nowrap;
}

.hand-page-container .question-btns .q-btn.q-btn-select {
    font-size: 15px;
    background-color: #fff;
    color: #022165;
}

.hand-page .draw-canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}

.hand-page .canvas-btns {
    position: fixed;
    top: 82px;
    right: 120px;
    text-align: right;
    z-index: 10;
}

.hand-page .canvas-btns .canvas-btn {
    background-color: #0c3ea7;
    color: #91b4fd;
    border: 1px solid #205cd8;
    border-radius: 20px;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    display: inline-block;
    padding: 0px 10px;
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
}

.hand-page .canvas-btns .canvas-btn:hover {
    background-color: #205cd8;
}

.hand-page .canvas-btns .canvas-color {
    width: 80px;
    height: 25px;
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
}

.hand-page .question {
    overflow-x: hidden;
    overflow-y: hidden;
}

.hand-page .question span {
    cursor: pointer;
}

.hand-page .question.question-answer input {
    color: red;
}

.hand-page .title-img {
    margin-left: 30px;
    margin-top: 30px;
    position: relative;
    display: inline-block;
}

.hand-page .content-img {
    box-sizing: border-box;
    padding: 0px 20px 10px;
    margin-top: 40px;
    width: 100%;
}

.hand-page .buttons {
    position: absolute;
    top: 40px;
    left: 20px;
    right: 20px;
    bottom: 10px;
}

.hand-page .area {
    background-image:url(about:blank);
}

.hand-page .question-type12 .area-type1 {
    position: absolute;
    border: 3px solid transparent;
}

.hand-page .question-type12 .area-type1:hover {
    border: 3px solid #77d300;
}

.hand-page .question-type12 .area-type1.area-start {
    border: 3px solid #77d300;
}

.hand-page .question-type12 .area-type1 .connect-point {
    display: none;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #77d300;
    border-radius: 100%;
    border: 1px solid #6abb00;
}

.hand-page .question-type12 .area-type1.area-start .connect-point {
    display: block;
}

.hand-page .question-type12 .area-type1.area-connect .connect-point {
    display: block;
}

.hand-page .question-type12 .canvas {
    position: absolute;
    left: 0px;
    top: 0px;
}

.hand-page .question-type12 .area-type3 {
    position: absolute;
    border: none;
    background-color: transparent;
    text-align: center;
}

.hand-page .question-type12 .area-type4 {
    position: absolute;
    border: none;
    background-color: transparent;
    text-align: center;
}

.hand-page .question-type12 .area-type100 {
    position: absolute;
}

.hand-page .question-type12 .area-type100.area-style1.area-select {
    border-radius: 100%;
    border: 3px solid #fe6c00;
}

.hand-page .question-type12 .area-type100.area-style2.area-select {
    background-image: url('../images/right-mark.png');
    background-repeat: no-repeat;
    background-position: center;
}

.hand-page .question-type12 .area-type100.area-style3.area-select {
    border: 3px solid #fe6c00;
}

.hand-page .question-type12 .area-type100.area-style4.area-select:before {
    content: "";
    left: 0px;
    right: 0px;
    top: 50%;
    margin-top: -2px;
    height: 3px;
    background: red;
    position: absolute;
    transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

.hand-page .question-type12 .area-type100.area-style5.area-select {
    border-bottom: 3px solid #fe6c00;
}

.hand-page .question-type12 .area-type100.area-style6.area-select {
    background-image: url('../images/wrong-mark.png');
    background-repeat: no-repeat;
    background-position: center;
}

.hand-page .question-type12 .area-type200 {
    position: absolute;
}

.hand-page .question-type12 .area-type200.area-right {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hand-page .question-type12 .area-type200.area-wrong {
    background-image: url('../images/wrong-mark.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hand-page .question-type12 .area-type200.area-style1.area-right {
    background-image: url('../images/right-mark.png');
}

.hand-page .question-type12 .area-type200.area-style1.area-wrong {
    background-image: url('../images/wrong-mark.png');
}

.hand-page .question-type12 .area-type200.area-style2.area-right {
    background-image: url('../images/smile-mark.png');
}

.hand-page .question-type12 .area-type200.area-style2.area-wrong {
    background-image: url('../images/cry-mark.png');
}

.hand-page .question-type12 .area-type200.area-style3.area-right{
    background-image: url('../images/smile-mark-big.png');
}

.hand-page .question-type12 .area-type200.area-style3.area-wrong{
    background-image: url('../images/cry-mark-big.png');
}

.hand-page .question-type12 .area-type200.area-style4.area-right{
    background-image: url('../images/rect-mark.png');
}

.hand-page .question-type12 .area-type200.area-style4.area-wrong{
    background-image: url('../images/triangle-mark.png');
}

.hand-page .question-type12 .choose {
    position: absolute;
    border-radius: 30px;
    border: 1px solid #ddd;
    background-color: #fff;
    display: none;
}

.hand-page .question-type12 .choose .right {
    float: left;
    width: 48px;
    height: 48px;
    margin-left: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
}

.hand-page .question-type12 .choose .wrong {
    float: right;
    width: 48px;
    height: 48px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
}

.hand-page .question-type12 .choose-style1 .right{
    background-image: url('../images/right-mark.png');
}

.hand-page .question-type12 .choose-style1 .wrong{
    background-image: url('../images/wrong-mark.png');
}

.hand-page .question-type12 .choose-style2 .right{
    background-image: url('../images/smile-mark.png');
}

.hand-page .question-type12 .choose-style2 .wrong{
    background-image: url('../images/cry-mark.png');
}

.hand-page .question-type12 .choose-style3 .right{
    background-image: url('../images/smile-mark-big.png');
}

.hand-page .question-type12 .choose-style3 .wrong{
    background-image: url('../images/cry-mark-big.png');
}

.hand-page .question-type12 .choose-style4 .right{
    border: 2px solid #77d300;
    background: 0;
}

.hand-page .question-type12 .choose-style4 .wrong{
    background-image: url('../images/triangle-mark.png');
}

.hand-page .question-type8 .area {
    position: absolute;
    border-radius: 100%;
    border: 3px solid transparent;
}

.hand-page .question-type8 .area.area-select {
    border: 3px solid #fe6c00;
}

.hand-page .question-type10 .area {
    position: absolute;
}

.hand-page .question-type10 .area .star {
    width: auto;
    height: 100%;
    margin-right: 5px;
}

.hand-page .question-type10 .choose {
    position: absolute;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    display: none;
}

.hand-page .question-type10 .add {
    float: left;
    width: 35px;
    height: 35px;
    margin-left: 10px;
    background-image: url('../images/add-mark.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
}

.hand-page .question-type10 .minus {
    float: right;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    background-image: url('../images/minus-mark.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
}


/*---------------------------------------------------------登录的css*/

.login {
    font-size: 14px;
    background: #6DECFF;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0;
}

.login .content .brand {
    background: url(../images/loginbg.png) no-repeat;
    background-size: 418px 200px;
    height: 200px;
    width: 418px;
    margin: 0 auto;
    margin-bottom: 5%;
}

.login .content {
    width: 100%;
    text-align: center;
    height: 100%;
}

.login .content table.content-table {
    height: 100%;
    width: 100%;
}

.login .content table.content-table td {
    vertical-align: middle;
}

.login .content .in {
    margin: 0 auto;
    border-radius: 50px;
    height: 48px;
    background: #FFF;
    margin-top: 15px;
    width: 290px;
}

.login .content .in table {
    height: 100%;
    /*border: 2px solid #CFCFCF;*/
    display: block;
    border-radius: 50px;
}

.login .content .in .tag {
    vertical-align: middle;
    padding-left: 20px;
    width: 45px;
    color: #888;
}

.login .content .in input {
    border-style: none;
    background-color: transparent;
    outline: none;
    width: 180px;
    height: 48px;
}

.login .content .btn-login {
    margin-top: 18px;
    margin-bottom: 10px;
    height: 51px;
}

.login .content .btn-login a {
    background: #f9a200;
    border-radius: 30px;
    border: 2px solid #e79700;
    font-size: 24px;
    padding: 12px 115px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
}

.login .content .btn-login a:hover {
    background: #e79700;
}


/* .register {
    margin-top: 10px;
    color: #000;
}

.register-div {
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

.register-div img {
    width: 250px;
    height: 250px;
}

.register-div p {
    font-size: 14px;
    line-height: 18px;
    text-align: left;
} */

.div-register {
    display: inline-block;
    width: 280px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #3c3c3c;
    margin-top: 18px;
    text-align: left;
}

.div-register .register {
    color: #3c3c3c;
}

.div-register .forget-password {
    color: #3c3c3c;
    float: right;
}


/*-------------------------------------------------------------以下是关于单词的----------------------------*/

#index-head .menu-uword a {
    display: block;
    width: 34px;
    height: 34px;
    background-size: 34px 34px;
    margin: 0 auto;
}

#index-head .menu-uword-unit a:after {
    content: url(../images/catalog-n.svg);
}

#index-head .menu-uword-unit a:hover:after {
    content: url(../images/catalog-p.svg);
}

#index-head .menu-uword-img .menu-uword-img-n {
    background: url(../images/word-img-n.svg) no-repeat center;
}

#index-head .menu-uword-img .menu-uword-img-p {
    background: url(../images/word-img-p.svg) no-repeat center;
}

#index-head .menu-uword-all .menu-uword-all-n {
    background: url(../images/word-all-n.svg) no-repeat center;
}

#index-head .menu-uword-all .menu-uword-all-p {
    background: url(../images/word-all-p.svg) no-repeat center;
}

#index-head .menu-uword-en .menu-uword-en-n {
    background: url(../images/word-en-n.svg) no-repeat center;
}

#index-head .menu-uword-en .menu-uword-en-p {
    background: url(../images/word-en-p.svg) no-repeat center;
}

#index-head .menu-uword-cn .menu-uword-cn-n {
    background: url(../images/word-cn-n.svg) no-repeat center;
}

#index-head .menu-uword-cn .menu-uword-cn-p {
    background: url(../images/word-cn-p.svg) no-repeat center;
}

#index-head .menu-td.menu-uword-type a {
    width: 120px;
    margin-left: 50px;
    margin-right: 10px;
    height: 30px;
}

#index-head .menu-uword-type .menu-uword-type-1:after {
    content: "浏览模式";
}

#index-head .menu-uword-type .menu-uword-type-2:after {
    content: "教学模式";
}


/*-----------------------------------------------------------以下是关于单元列表的----------------------------------*/

.unit-list {
    height: 70%;
    background: #FFF;
    position: absolute;
    border-radius: 8px;
    display: none;
    z-index: 13;
    box-shadow: 0 0 30px rgba(136, 136, 136, .5);
    overflow: hidden;
    padding-bottom: 2rem;
    min-width: 250px;
}

.unit-list .unit-scroll {
    overflow-y: auto;
    height: 100%;
}

.unit-list .unit-title {
    color: #91b4fd;
    background: #0c3ea7;
    line-height: 50px;
    text-align: center;
}

.unit-list .unit-item a {
    text-decoration: none;
    color: #000;
}

.unit-list .unit-item.current-unit a {
    color: #91b4fd;
}

.unit-list .unit-item {
    width: 100%;
    margin: 20px;
}

.words {
    position: absolute;
    left: 115px;
    right: 10px;
    top: 30px;
    bottom: 70px;
    z-index: 1;
    border-radius: 8px;
    font-size: 14px;
}

.words-list {
    box-shadow: 0 0 30px rgba(136, 136, 136, .5);
    background-color: white;
    position: fixed;
    width: 260px;
    min-width: 140px;
    left: 50%;
    margin-left: -360px;
    top: 20px;
    bottom: 75px;
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 11;
}

.words-list a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 20px 5px;
    font-size: 25px;
    width: 100%;
    text-align: center;
}

.words-list a:hover {
    color: #116600;
    font-weight: 900;
}

.words-list .words-item-current {
    color: #116600;
    background: #77D300;
}

.words-list .words-item-current a {
    font-weight: 900;
    color: #116600;
}

.words-list .words-item {
    width: 100%;
}

.words .words-content::-webkit-scrollbar {
    width: 0px;
}

.words .words-content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    overflow: auto;
}

.words .words-content .word-detail-1 {
    margin-top: 10px;
    width: 100%;
    min-height: 70%;
}

.words .words-content .word-detail-1 img {
    max-width: 100%;
    max-height: 700px;
}

.words .words-content .word-detail-1 .text {
    font-weight: 900;
    text-decoration: none;
    color: #000;
    line-height: 63px;
    vertical-align: top;
}

.words .words-content .word-detail-1 td {
    vertical-align: middle;
}

.words .words-content .word-detail-1 .word-talk {
    text-align: left;
    padding-left: 20px;
    padding-top: 50px;
}

.words .words-content .word-detail-1 .text.en-text {
    font-size: 75px;
    line-height: 75px;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 10px;
    white-space: nowrap;
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.words .words-content .word-detail-1 .ph-text {
    font-size: 22px;
    font-weight: 200;
    color: #3d3d3d;
    margin-bottom: 20px;
}

.words .words-content .word-detail-1 .text.cn-text {
    font-size: 40px;
}

.words .words-content .word-detail-1 .play-audio:after {
    content: url(../images/play-n.svg);
    margin-left: 30px;
    height: 63px;
    width: 63px;
    display: inline-block;
    position: relative;
    bottom: 5px;
}

.words .words-content .word-detail-1 .play-audio:hover:after {
    content: url(../images/play-p.svg);
}

.words .words-content .word-detail-1 .sentence {
    margin-top: 30px;
}

.words .words-content .word-detail-1 .sentence a {
    font-size: 30px;
    text-decoration: none;
    color: #000;
    vertical-align: top;
    position: relative;
}

.words .words-content .word-detail-1 .sentence a p {
    padding-left: 72px;
    padding-top: 0px;
}

.words .words-content .word-detail-1 .sentence a:before {
    content: url(../images/play-n.svg);
    position: absolute;
    margin-right: 10px;
    height: 63px;
    width: 63px;
    display: inline-block;
}

.words .words-content .word-detail-1 .sentence a:hover:before {
    content: url(../images/play-p.svg);
    margin-right: 10px;
    position: absolute;
}

.words .words-content .word-detail-2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 180px;
    line-height: 1.3;
    color: #222;
}

.words .words-content .word-detail-2.word-detail-2-transform {
    transition: 0.8s;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-transition: 0.8s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    -moz-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(180deg);
    -moz-backface-visibility: hidden;
    -o-transition: 0.8s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(180deg);
    -o-backface-visibility: hidden;
    -ms-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(180deg);
    -ms-backface-visibility: hidden;
}

.words-content .word-detail-2 .word-box-2 {
    background: #fff;
    backface-visibility: hidden;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    -o-box-align: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

.words-content .word-detail-2 .word-img-2 {
    max-height: 95%;
    min-height: 70%;
}

.words-content .word-detail-2 .word-ch-2 {
    font-size: 130px;
    font-weight: 800;
}

.words-content .word-detail-2 .word-en-2 .text-2 {
    text-align: center;
    font-size: 110px;
    font-weight: 800;
    color: #222;
    cursor: pointer;
    text-decoration: none;
    z-index: 0;
    padding-left: 30px;
    white-space: nowrap;
}

.words-content .word-detail-2 .word-en-2 .text-2:after {
    content: url('../images/play-n.svg');
    margin-left: 20px;
    height: 90px;
    width: 90px;
    display: inline-block;
    position: relative;
    left: 40px;
    bottom: 50px;
    vertical-align: middle;
}

.words-content .word-detail-2 .word-en-2 .text-2:hover:after {
    content: url('../images/play-p.svg');
}

.words-content .word-detail-2 .word-en-2 .phonetic-2 {
    text-align: center;
    font-size: 50px;
    font-weight: 300;
    padding: 0px 20px;
}

.words .words-content .word-detail-2 .word-sentence-2 {
    margin-top: 90px;
}

.words .words-content .word-detail-2 .word-sentence-2 a {
    font-size: 35px;
    text-decoration: none;
    color: #000;
    vertical-align: top;
    position: relative;
    display: inline-block;
    text-align: left;
}

.words .words-content .word-detail-2 .word-sentence-2 a p {
    padding-left: 82px;
    padding-top: 0px;
}

.words .words-content .word-detail-2 .word-sentence-2 a:before {
    content: url('../images/play-n.svg');
    position: absolute;
    left: 0;
    top: 0;
    height: 72px;
    width: 72px;
}

.words .words-content .word-detail-2 .word-sentence-2 a:hover:before {
    content: url('../images/play-p.svg');
}

.words .words-content .word-font-4-show {
    position: relative;
}

.words .words-content .word-font-4-show:before {
    content: "";
    position: absolute;
    left: -2px;
    top: -3%;
    bottom: -4%;
    right: 70px;
    background: url('../images/line-4.png') no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

.word-change {
    position: fixed;
    bottom: 60px;
    left: 150px;
    right: 150px;
    height: 100px;
    text-align: center;
    z-index: 10;
}

.word-change .word-change-left {
    background-image: url(../images/word-left-n.svg);
    width: 63px;
    height: 63px;
    position: absolute;
    left: 15%;
    top: 0;
}

.word-change .word-change-left:hover {
    background-image: url(../images/word-left-p.svg);
}

.word-change .word-change-right {
    background-image: url(../images/word-right-n.svg);
    width: 63px;
    height: 63px;
    position: absolute;
    right: 15%;
    top: 0;
}

.word-change .word-change-right:hover {
    background-image: url(../images/word-right-p.svg);
}

.word-change a {
    text-decoration: none;
    color: #3d3d3d;
}

.word-change .word-change-list {
    position: absolute;
    left: 50%;
    margin-left: -125px;
    width: 250px;
    height: 63px;
    line-height: 63px;
    border-radius: 32px;
    border: 2px solid #e5e5e5;
    font-size: 32px;
    font-weight: 400;
    top: 0;
    background: #fff;
}

.word-change .word-change-list:hover {
    background-color: #e5e5e5;
}


/* ------------------------------------------------------以下是关于设置的-------------------------------*/

.d-setting {
    position: relative;
    height: 90%;
}

.d-setting .left-menu {
    width: 100px;
    height: 100%;
    margin-top: 5%;
    border-right: 1px solid #E3E3E3;
    text-align: right;
    font-size: 14px;
}

.d-setting .right-content {
    position: absolute;
    left: 130px;
    top: 0;
    right: 20px;
    bottom: 0;
    height: 95%;
}

.d-setting .left-menu div {
    margin-right: -1px;
    margin-bottom: 20px;
}

.d-setting .left-menu div.current-menu {
    border-right: 2px solid #77D300;
}

.d-setting .left-menu div.current-menu a {
    color: #77D300;
}

.d-setting .left-menu a {
    margin-right: 18px;
    text-decoration: none;
    color: #000;
    margin-bottom: 20px;
}

.d-setting .right-content .gold-head {
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 18px;
}

.d-setting .right-content .gold-head .gold-head-right {
    float: right;
    margin-top: -20px;
}

.d-setting .right-content .gold-head .gold-head-right a {
    border: 1px solid #E3E3E3;
    border-radius: 20px;
    font-size: 14px;
    padding: 5px 10px;
    text-decoration: none;
    color: #000;
}

.d-setting .right-content .gold {
    color: #77D300;
}

.gold-tips {
    width: 400px;
    height: 300px;
    overflow: hidden;
    padding: 10px;
}

.gold-consume-log {
    overflow: auto;
    height: 95%;
}

.gold-consume-log ul {
    list-style: none;
    margin-top: 2%;
}

.gold-consume-log ul li {
    position: relative;
    border-bottom: 1px solid #EEE;
    padding: 10px 0px;
}

.gold-consume-log ul li .gold-right {
    position: absolute;
    right: 15px;
    top: 15px;
}

.gold-consume-log ul li .time {
    font-size: 13px;
    color: #C5C5C5;
}

.gold-consume-log ul li .des {
    margin: 10px 0px;
}

.gold-consume-log ul li .gold-plus {
    font-size: 25px;
    padding-right: 10px;
    color: #77D300;
}

.gold-consume-log ul li .gold-minus {
    font-size: 25px;
    padding-right: 10px;
    color: #000;
}

.gold-consume-log ul li .gold-name {
    vertical-align: middle;
}

.gold-require {
    text-decoration: none;
    color: #fff;
    border-radius: 20px;
    background-color: #77d300;
    padding: 7px 12px;
    margin-left: 15px;
    font-size: 14px;
    position: relative;
    bottom: 2px;
}

.gold-require:hover {
    background-color: #6abb00;
}

.gold-require.gold-require-disabled {
    background-color: #e0e0e0;
}

.gold-require.gold-require-disabled:hover {
    background-color: #e0e0e0;
}


/*-------------------------------账号设置-------------------------*/

.d-setting .right-content .gold-container {
    height: 100%;
}

.d-setting .right-content .account-contaner {
    margin: 0 auto;
    text-align: center;
}

.d-setting .right-content .account-contaner .account-name {
    font-size: 22px;
    margin-top: 40px;
}

.d-setting .right-content .account-contaner .account-school {
    font-size: 18px;
    margin-top: 12px;
    color: #999;
}

.d-setting .right-content .account-contaner .account-back {
    font-size: 19px;
    margin-top: 40px;
}

.d-setting .right-content .account-contaner .account-back a {
    color: #000;
    text-decoration: none;
    border: 1px solid #E3E3E3;
    padding: 8px 20px;
    border-radius: 50px;
    display: block;
    margin: 0 auto;
    width: 200px;
}

.d-setting .right-content .account-contaner .account-back a:hover {
    background: #F5F5F5;
}

.d-setting .right-content .account-contaner .account-change {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    border-radius: 20px;
    background-color: #ffa000;
    padding: 2px 0;
    width: 37px;
    text-align: center;
    margin-left: 12px;
    font-size: 10px;
    position: relative;
    bottom: 4px;
}

.d-setting .right-content .account-contaner .account-change:hover {
    background-color: #ed9500;
}


/*=---------------------------------学期设置-----------------------*/

.d-setting .right-content .term-container {
    text-align: center;
}

.d-setting .right-content .term-container a {
    display: inline-block;
    margin: 15px;
    border: 1px solid #E3E3E3;
    width: 100px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    border-radius: 50px;
    vertical-align: top;
}

.d-setting .right-content .term-container a.current-term {
    color: #FFF;
    background: #77D300;
}

.d-setting .right-content .term-container a.current-term:after {
    content: url(../images/right.png);
    margin-left: 10px;
}


/*=---------------------------------音效设置-----------------------*/

.d-setting .right-content .audio-container {
    text-align: center;
    color: #3c3c3c;
}

.d-setting .right-content .audio-container a {
    text-decoration: none;
    color: #3c3c3c;
}

.d-setting .right-content .audio-container a:hover {
    background-color: #F5F5F5;
}

.d-setting .right-content .audio-container .audio {
    display: inline-block;
    width: 210px;
    height: 70px;
    line-height: 70px;
    font-size: 27px;
    border-radius: 4px;
    border: 1px solid #eee;
    margin-top: 65px;
}

.d-setting .right-content .audio-container .audio .audio-img {
    display: inline-block;
    width: 26px;
    position: relative;
    top: 3px;
    right: 10px;
}

.d-setting .right-content .audio-container .audio-bottom-text {
    font-size: 17px;
    margin-top: 15px;
}


/* -----------------------数据更新-------------------------------------------*/

.d-setting .right-content .data-update {
    text-align: center;
}

.d-setting .right-content .data-update a {
    text-decoration: none;
    display: block;
    color: #000;
    border: 1px solid #E3E3E3;
    border-radius: 50px;
    text-align: center;
    padding: 10px 20px;
    margin: 0 auto;
    width: 200px;
    margin-top: 20px;
}

.d-setting .right-content .data-update a:hover {
    background: #F5F5F5;
}

.d-setting .right-content .data-update .tip {
    font-size: 12px;
}


/* -----------------------园丁币不足/未创建班级-------------------------------------------*/

.cant-use {
    margin-top: 6%;
}

.cant-use .qrcode {}

.cant-use .qrcode {
    width: 200px;
    height: 200px;
    background: url(../images/qrcode.jpg) no-repeat;
    background-size: 200px 200px;
    margin: 0 auto;
}

.cant-use .cant-reason {
    width: 500px;
    margin: 0 auto;
    line-height: 20px;
}

.cant-use .cant-reason p {
    margin: 10px 0px;
}

.cant-use .cant-reason p.title {
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
}


/*-----------------------------------------关于-----------------------------------------*/

.about {
    height: 100%;
}

.about table {
    height: 100%;
    width: 100%;
    margin-top: -55px;
}

.about table p {
    margin: 20px 0px;
}

.about table td {
    vertical-align: middle;
    text-align: center;
}

.about .contact {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}

.about .contact div {
    margin: 0 auto;
    text-align: center;
}

.about .contact div p {
    line-height: 20px;
}

.about .copyright {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
}


/*......................修改姓名................................*/

.change-name-div {
    padding: 25px 15px;
}

.change-name-div .name-input {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 13px 15px;
    margin-top: 7px;
    width: 90%;
    font-size: 14px;
}

.change-name-div .change-btns {
    text-align: right;
    margin-top: 27px;
}

.change-name-div .change-btns a {
    padding: 5px 20px;
    border-radius: 20px;
    margin-left: 10px;
    text-decoration: none;
    font-size: 14px;
}

.change-name-div .change-btns .change-name-confirm {
    color: #fff;
    background-color: #77d300;
    border: 1px solid #77d300;
}

.change-name-div .change-btns .change-name-confirm:hover {
    background-color: #6abb00;
}

.change-name-div .change-btns .change-name-cancel {
    color: #3c3c3c;
    border: 1px solid #e0e0e0;
}

.change-name-div .change-btns .change-name-cancel:hover {
    background-color: #f5f5f5;
}


/*-------------------------------------随堂练习的css-------------------------------------*/
#index-head .menu-exercise a {
    display: inline-block;
    width: 32px;
    height: 32px;
}

#index-head .menu-exercise a:after {
    content: url(../images/catalog-n.svg);
}

#index-head .menu-exercise a:hover:after {
    content: url(../images/catalog-p.svg);
}



/*-------------------------------------flash的layer弹框-------------------------------------*/
.explain-flash-div {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.explain-flash-div .flash-cover {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    opacity: 0.8;
}

.explain-flash-div .flash-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 20px;
    overflow: visible;
    background-image: url('../images/flash-bg.svg');
    background-size: 100% 100%;
}

.explain-flash-div .flash-content {
    position: absolute;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}

.explain-flash-div .flash-close {
    display: inline-block;
    position: absolute;
    top: -20px;
    right: 20px;
    width: 35px;
    height: 35px;
    background: url('../images/flash-close.svg') center no-repeat;
}

.explain-flash-div .flash-close:hover {
    background: url('../images/flash-close-hover.svg') center no-repeat;
}

.explain-flash-div .flash-max {
    display: inline-block;
    position: absolute;
    top: -20px;
    right: 65px;
    width: 35px;
    height: 35px;
    background: url('../images/flash-max.svg') center no-repeat;
}

.explain-flash-div .flash-max:hover {
    background: url('../images/flash-max-hover.svg') center no-repeat;
}

.explain-flash-div .flash-min {
    display: inline-block;
    position: absolute;
    top: -20px;
    right: 65px;
    width: 35px;
    height: 35px;
    background: url('../images/flash-min.svg') center no-repeat;
}

.explain-flash-div .flash-min:hover {
    background: url('../images/flash-min-hover.svg') center no-repeat;
}