/* CSS Document */

.wraper { padding: 40px 0; background: #fff; }
.bggrey { background: #f9f9f9; }
.bgwhite { background: #fff; }
.sidenav { background: #fff; border-radius: 10px; margin-bottom: 20px; }
.sidenav li { margin-bottom: 2px; border-bottom: #f9f9f9 1px solid; }
.sidenav li:last-child { border-bottom: 0; }
.sidenav li a { display: block; padding: 1em; }
.sidenav li.active a, .sidenav li a:hover { border-left: #ffdf02 5px solid; }
.main { padding: 30px; }
.main h1 { margin-bottom: 30px; padding: 0 0 20px; border-bottom: #eee 1px solid; }
.main .topbar { border-bottom: #efefef 1px solid; margin: -20px -30px 30px; text-align: center }
.main .topbar h6 { float: left; font-size: 18px; margin-left: 2em; color: #999; }
.main .topbar .count { display: block; clear: both; margin: 10px auto; color: #999; }
.main .topbar .count span { margin-right: 1em; }
.main .topbar .count span i { margin-right: .5em; }
.main .topbar a.btn { float: right; margin: auto 20px; }
.main .topbar .hw-search { float: right; margin: auto 20px; }
.main .text p { line-height: 1.5; margin-bottom: 20px; }
.main .text img { max-width: 100%; }
.list-price { padding: 5px 20px; text-align: center; color: #fff; background: #ff6682; border-radius: 5px; font-style: normal; }
.common-list .list-pic { position: relative; margin-bottom: 20px; z-index: 2; }
.common-list .list-pic img { width: 100%; border-radius: 15px; transition: 0.3s cubic-bezier(.4, 0, .2, 1); }
.common-list .list-pic a { display: block; }
.common-list .list-pic a:hover img { opacity: .8; }
.common-list li { position: relative; padding: 30px 0; border-bottom: #eee 1px solid; }
.common-list li h3 { margin-top: 0; padding-right: 100px; }
.common-list li .list-intro { color: #999; }
.common-list li .list-price { position: absolute; top: 0; right: 0; display: block; }
.common-list li .list-count { float: right; }
.rank-list .name, .rank-list .count1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-list i { margin-right: .5em; }
.rank-list .likes i { color: #ffdf02; }
.rank-list .fishes i { display: inline-block; width: 16px; height: 16px; background-image: url(../img/fishes.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }
.rank-list li { position: relative; float: left; width: 33.33%; margin-bottom: 20px; }
.rank-list li > i { display: block; position: absolute; left: 3px; top: 3px; padding: 2px 5px; text-align: center; font-size: 18px; border-radius: 5px; color: #ffdf02; background: #333; }
.rank-list li > i.rico { color: #000; }
.rank-list li.no1 i.rico { background: #ffdc2f; }
.rank-list li.no2 i.rico { background: #ccc; }
.rank-list li.no3 i.rico { background: #ffa92f; }
.rank-list li img.tpic, .rank-list li .info { display: block; float: left; }
.rank-list li img.tpic { width: 20%; }
.rank-list li .info { width: 70%; }
.rank-list li .info p { padding-left: 20px; margin-bottom: 5px; }
.rank-list li .info .count1 { font-size: 12px; color: #999; }
.rank-list li .info .count2 span { margin-right: 1em; }
.rank-list.school-list img.tpic { border-radius: 10px; }
.rank-list.user-list img.tpic { border-radius: 50%; }
.movie-list .list-pic span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1px; color: #ffdf02; font-size: 40px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; }
.story-info { margin-bottom: 40px; }
.story-info .cover img { width: 100%; }
.story-info p { padding: 15px 0; border-top: 0px #eee solid; margin-bottom: 0; }
.story-info p.type span { margin-right: 2em; }
.story-info p.copyrights { font-size: 12px; color: #ccc; }
.story-chapter { padding: 40px 0; }
.story-chapter .list-t { margin-bottom: 40px; }
.story-chapter .list-t h2 { display: inline-block; }
.story-chapter .list-t .list-price { margin-left: 2em; }
.story-chapter .chapter-list li { float: left; width: 33.33%; padding: 10px 0; border-bottom: 1px #eee solid; }
.story-chapter .chapter-list li a { display: block; padding: .5em 1em; color: #333; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.story-chapter .chapter-list li a span { margin-right: 1em; }
.story-chapter .chapter-list li a:hover { color: #000; background: #ffdf02; }
/*作品详情*/
.work-view { bottom: 20px; }
.work-view object { width: 100%; }
.work-topbar { padding: 20px 0; margin-bottom: 30px; border-bottom: #eee 1px solid; }
.work-title h1 { margin-top: 0; }
.work-title p { margin-top: 20px; }
.work-title p span { display: inline-block; margin-right: 1em; color: #aaa; }
.work-title p span i { margin-right: .2em; }
.work-user .avatar { float: left; width: 90px; height: 90px; }
.work-user p { padding-left: 100px; padding-top: 25px; }
.work-intro { padding: 30px 0; margin-bottom: 20px; border-bottom: 1px #eee solid; line-height: 1.5; }
.work-ico img { width: 40px; }
.work-ico a { float: right; display: block; margin-left: .5em; padding: 0 1em; margin-top: 5px; line-height: 26px; font-size: 14px; text-align: center; border: #000 2px dotted; border-radius: 5px; transition: .2s cubic-bezier(.4, 0, .2, 1); }
.work-ico a:hover { background: #ffdf02; }
.work-zan { float: left; margin-bottom: 20px; }
.work-zan a { width: 100%; padding: .5em 0; }
.work-zan a i { display: block; }
.work-zan a.act { background: #ccc; }
.work-zan a.act:hover { color: #fff; }
.work-saoma { text-align: center; }
.work-saoma p { display: inline-block; width: 170px; text-align: center; font-size: 12px; }
.work-saoma canvas { background: #fff; padding: 10px; }
.reply-form { padding: 30px 0; }
.reply-form form { position: relative; }
.reply-form textarea { padding-bottom: 20px; }
.reply-form .length { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: #ccc; }
.reply-form .length strong { color: #ffdf02; }
.reply-form button { float: right; margin-top: 10px; padding: .5em 3em; }
.comment-list > ul > li { padding: 20px 0; border-bottom: #eee 1px solid; }
.comment-list > ul > li > .avatar { float: left; width: 50px; height: 50px; }
.comment-list h3 { padding-bottom: 10px; border-bottom: #eee 1px solid; }
.comment-c { position: relative; margin-left: 70px; }
.comment-c .reply-form { padding: 0; margin-top: 10px; }
.comment-c a.reply-btn { position: absolute; right: 0; top: 0; text-align: right; display: inline-block; font-size: 13px; padding: .2em .5em; background: #eee; border-radius: 3px; }
.comment-c a.reply-btn:hover { color: #fff; background: #333; }
.comment-c .user-info span { margin-left: 1em; color: #ccc; }
.comment-text { padding: 0 0 20px; }
.comment-c blockquote { font-size: 13px; }
.comment-c blockquote .comment-text { padding: 0; }
/*用户中心*/
.pw { margin-bottom: 20px; background: #fff; border-radius: 10px; }
.mypass .indicator { float: left; }
.mypass .indicator #indicatorContainerWrap, .mypass .indicator #indicatorContainer { display: inline-block; position: relative; }
.mypass .indicator #my-avatar { position: absolute; width: 80px; height: 80px; left: 20px; top: 20px; border-radius: 50%; }
.mypass .indicator .tooltip.right { margin-top: -30px; margin-left: -10px; }
.mypass .pass-info { padding-left: 170px; padding-top: 20px; }
.mypass .pass-info li { display: inline-block; padding: .3em 2em; margin-bottom: 5px; border-left: #eee 2px solid; }
.mypass .pass-info li p { font-size: 20px; color: #333; }
.mypass .pass-info li p.h { font-size: inherit; color: #ccc; }
.pass-item-list { margin-top: 30px; }
.pass-item-list li { margin-bottom: 30px; }
.pass-item-list li img { width: 100%; border-radius: 10px; }
.pass-item-list li .pass-title { margin-top: 20px; }
.pass-item-list li .pass-title a, .pass-item-list li .pass-title span { display: block; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pass-item-list li .pass-title span { margin-top: 5px; font-size: 13px; color: #9D9D9D; }
.pass-item-list li .progress { height: 14px; }
.pass-item-list li .progress-bar { background-color: #ffdf02; box-shadow: none; font-size: 10px; line-height: 14px; }
.mytop .name { margin-bottom: 20px; }
.mytop .name strong { margin-right: 1em; }
.mytop .name .i-s-female, .mytop .name .i-s-male, .mytop .name .i-student, .mytop .name .i-teacher { display: inline-block; margin: 0 .2em; border-radius: 3px; font-size: 12px; width: 20px; line-height: 20px; text-align: center; color: #fff; }
.mytop .name .i-student, .mytop .name .i-teacher { width: auto; padding: 0 .5em; }
.mytop .name .i-s-female { background: #fe8ab9; }
.mytop .name .i-s-male { background: #62b9f4; }
.mytop .name .i-student { background: #4bbca7; }
.mytop .name .i-teacher { background: #9a6db5; }
.mytop .info { color: #999; }
.mytop .count { margin-top: 25px; margin-bottom: 20px; border-left: #eee 1px solid; }
.mytop .count li { font-size: 24px; font-weight: bold; color: #333; }
.mytop .count li p.h { font-size: 20px; color: #999; font-weight: normal; }
.mybtnlink a { display: block; margin-bottom: 20px; border: #333 2px dotted; border-radius: 10px; padding: 15px 30px 10px; color: #999; transition: 0.3s cubic-bezier(.4, 0, .2, 1); }
.mybtnlink a i { font-size: 34px; margin-right: 1rem; }
.mybtnlink a strong { color: #333; }
.mybtnlink a.class { border-color: #ffc900; }
.mybtnlink a.teacher { border-color: #4bbca7; }
.mybtnlink a.school { border-color: #fe8aa2; }
.mybtnlink a.class i { color: #ffc900; }
.mybtnlink a.teacher i { color: #4bbca7; }
.mybtnlink a.school i { color: #fe8aa2; }
.mybtnlink a:hover { box-shadow: 0 5px 10px rgba(0,0,0,0.05); transform: translate3d(0, -2px, 0); }
.mybtnlink a:hover.class { border-color: rgba(255, 201, 0, 0.5); background: rgba(255, 201, 0, 0.1); }
.mybtnlink a:hover.teacher { border-color: rgba(75, 188, 167, 0.5); background: rgba(75, 188, 167, 0.1); }
.mybtnlink a:hover.school { border-color: rgba(254, 138, 162, 0.5); background: rgba(254, 138, 162, 0.1); }
.myexplain h3 { border-left: #ffc900 6px solid; padding-left: 1em; margin: 20px 0 30px; color: #000; }
.myexplain h4 { margin-top: 20px; color: #000; }
.myexplain p { font-size: 14px; color: #999; }
.myexplain dt { float: left; font-size: 60px; color: #eee; font-weight: 100; }
.myexplain dd { padding-left: 70px; }
.myexplain hr { margin: 50px 0; }
.uploadfile { position: relative; }
.uploadfile input[type=file] { position: absolute; top: 0; bottom: 0; width: 100%; opacity: 0; cursor: pointer; }
.uploadfile.sb2file i { float: left; font-size: 20px; margin-right: .5em; }
.uploadfile.sb2file span { float: left; display: inline-block; }
/*选择模式2018.01.18*/
.mode-pic { padding-top: 30px; }
.mode-pic img { width: 30%; }
/*选择模式end*/
/*手机模式按键2018.01.24*/
.control-btn { display: flex; align-items: stretch; margin-bottom: 20px}
.arr-c { position: relative; }
.arr-c img { background: #fff; border-radius: 100%; width: 100%; height: auto; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.arr-c-1 div { position: absolute; width: 30%; margin: auto; }
.arr-c-1 img { border: #ebeef5 2px sold; }
.arr-c-1 #arr-up, .arr-c-1 #arr-down { left: 50%; transform: translate(-50%, 0); }
.arr-c-1 #arr-left, .arr-c-1 #arr-right { top: 50%; transform: translate(0, -50%); }
.arr-c-1 #arr-up { top: 0; }
.arr-c-1 #arr-down { bottom: 0; }
.arr-c-1 #arr-left { left: 10%; }
.arr-c-1 #arr-right { right: 10%; }
.arr-c #arr-blank { width: 85%; margin: 35px auto; border: #fff 5px solid; }
/*手机模式按键end*/
.submit-btn { margin-top: 30px; }
.submit-btn p { margin-top: 20px; font-size: 12px; color: #999; text-align: center; }
.mycode { margin: 50px 0; text-align: center; }
.mycode strong { display: block; font-size: 24px; margin-bottom: 20px; }
.mycode .btn { min-width: 50%; margin: auto; font-size: 28px; }
.myclass { text-align: center; }
.myclass h4 { margin: 20px auto; font-weight: normal; color: #000; }
.myclass p { color: #999; }
.homework-list img.coverpic { width: 100%; border-radius: 3px; }
.homework-list .point { color: #ff6682; }
.caname input { width: 80px; }
.pass-list > thead > tr > th { text-align: center; }
.pass-list > thead > tr > th a { display: block; }
.pass-list td { text-align: center; }
i.star:before { content: "\e934"; }
i.star { color: #999; font-size: 24px; }
i.star.red { color: #ff6682; }
.legend { text-align: right; margin-bottom: 20px; }
.legend i { margin: auto .2em auto 1em; }
.class-list li { margin-bottom: 20px; }
.class-list li .class-item { background: #f4f4f4; padding: 15px; border-radius: 10px; }
.class-list li .class-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #eee; padding: 10px; border: #dcdcdc 1px dotted; }
.class-list li .class-count { margin-top: 20px; color: #666; }
.class-list li .class-count span { margin-right: 1em; }
.class-list li .class-count span i { margin-right: .2em; }
.class-list li .class-id { margin-top: 10px; font-size: 12px; color: #000; text-align: right; color: #999; }
.class-list li .class-id:before { display: inline-block; content: "ID:"; margin-right: 5px; }
.class-list li .edit { position: absolute; display: none; top: 0; left: 0; right: 0; text-align: center; transition: 0.3s cubic-bezier(.4, 0, .2, 1); }
.class-list li .edit a { display: inline-block; margin: 0 .2em; font-size: 12px; padding: 5px; background: rgba(255, 223, 2, 0.8); }
.class-list li .edit a:hover { color: #ffdf02; background-color: #000; }
.class-list li .edit a i { display: block; }
.class-list li:hover .edit { display: block; }
.submenu { margin-bottom: 20px; }
.submenu a { display: inline-block; margin-right: 20px; padding: 10px; }
.submenu a.active,.submenu a:hover { background-image: url(../img/tab-act.png); background-position: center bottom; background-repeat: no-repeat; }

@media (max-width: 767px) {
    .wraper { padding: 20px 0; }
    .sidenav li { width: 25%; float: left; }
    .sidenav li a { padding: .5em 0; text-align: center; }
    .sidenav li.active a, .sidenav li a:hover { border-left: none; background: #ffdf02; color: #000; }
    .main { padding: 10px; }
    .common-list li:first-child { padding: 0 0 30px; }
    .common-list li .list-price { position: relative; display: inline-block; margin-bottom: 20px; }
    .common-list li h3 { padding-right: 0; }
    .rank-list li { width: 100%; }
    .rank-list li .info { width: 80%; }
    .story-chapter .chapter-list li { width: 100%; }
    .comment-c a.reply-btn { position: relative; }
    .work-view object { height: 240px; }
    .work-user .avatar { width: 40px; height: 40px; }
    .work-user p { padding-left: 50px; padding-top: 0; }
    .work-title p span { font-size: 12px; }
    .mypass .pass-info { padding-left: 0; clear: both; }
    .main .topbar { margin: 5px -10px 40px; }
    .main .topbar .hw-search { float: none; clear: both; margin: 10px 20px; }
}

@media (min-width: 768px) {
    .work-view object { height: 350px; }
}

@media (min-width: 992px) {
    .work-view object { height: 400px; }
    .work-saoma { text-align: right; }
    .main .topbar .count { display: inherit; clear: inherit; margin-top: 10px; }
}

@media (min-width: 1200px) {
    .work-view object { height: 550px; }
}