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





.n-pages {display: -ms-flex; display: flex; justify-content: center; align-items: center; padding: 50px 0;}
.n-pages a,
.n-pages b,
.n-pages span {display: -ms-flex; display: flex; justify-content: center; align-items: center; width: auto; height: 32px; box-sizing: border-box; min-width: 32px; padding: 0 5px; border-radius: 3px; margin: 0 3px; font-size: 14px; color: #333;}
.n-pages a {background: #fff; border: 1px solid #ddd;}
.n-pages b {background: #8562ce; color: #fff; font-weight: bold;}
.n-pages span {margin: 0;}
@media all and (max-width: 480px) {
    .n-pages {padding: 30px 0;}
    .n-pages a,
    .n-pages b,
    .n-pages span {min-width: 30px; height: 30px; font-size: 13px;}
}
@media all and (max-width: 420px) {
    .n-pages a,
    .n-pages b,
    .n-pages span {min-width: 28px; height: 28px; font-size: 12px; margin: 0 2px;}
}








.n-filter {padding-bottom: 40px;}
.n-filter .flex {display: -ms-flex; display: flex; font-size: 16px;}
.n-filter .name {color: #000; padding-top: 10px;}
.n-filter .list {-ms-flex: 1; flex: 1; min-width: 0; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.n-filter .list .item {padding: 10px 25px 0 0;}
.n-filter .list .item:last-child {padding-right: 0;}
.n-filter .list .item a {display: block; color: #19031a; position: relative; padding-bottom: 10px;}
.n-filter .list .item a.on {color: #8562ce;}
.n-filter .list .item a.on:after {content: ''; display: block; width: 100%; height: 3px; background: #8562ce; position: absolute; left: 0; bottom: 0;}

@media all and (max-width: 1080px) {
    .n-filter {padding-bottom: 30px;}
}
@media all and (max-width: 960px) {
    .n-filter .list .item {padding: 10px 20px 0 0;}
}
@media all and (max-width: 720px) {
    .n-filter .flex {font-size: 15px;}
}
@media all and (max-width: 640px) {
    .n-filter {padding-bottom: 20px;}
    .n-filter .flex {font-size: 14px;}
}
@media all and (max-width: 420px) {
    .n-filter {padding-bottom: 10px;}
}
@media all and (max-width: 375px) {
    .n-filter .flex {font-size: 13px;}
    .n-filter .list .item {padding: 10px 15px 0 0;}
}




.n-main {background: #f8f8f8; padding-top: 30px;}
.n-main.white {background: #fff; padding-top: 20px;}

.n-course-list {display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.n-course-list .group {width: calc(25% - 21px); padding: 28px 28px 0 0;}
.n-course-list .group:nth-child(4n + 0) {padding-right: 0;}
.n-course-list .box {background: #fff; border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
.n-course-list .box .img {position: relative;}
.n-course-list .box .img .space {font-size: 0;}
.n-course-list .box .img .space img {width: 100%;}
.n-course-list .box .img .imgbox {font-size: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20;}
.n-course-list .box .img .imgbox a {display: block; width: 100%; height: 100%;}
.n-course-list .box .img .imgbox img {width: 100%; height: 100%; border-radius: 8px 8px 0 0;}
.n-course-list .box .img .txtbox {width: 100%; height: 46px; position: absolute; left: 0; bottom: 0; z-index: 30; box-sizing: border-box; padding: 0 15px; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #fff; background: rgba(0, 0, 0, .5);}
.n-course-list .box .img .txtbox .school {-ms-flex: 1; flex: 1; min-width: 0; position: relative; padding-left: 32px; line-height: 30px;}
.n-course-list .box .img .txtbox .school {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.n-course-list .box .img .txtbox .school:before {content: ''; display: block; width: 24px; height: 24px; background: url("../images/course-school-white.png") no-repeat center / 100% 100%; position: absolute; left: 0; top: 50%; margin-top: -12px;}
.n-course-list .box .img .txtbox .teacher {position: relative; padding-left: 24px;}
.n-course-list .box .img .txtbox .teacher:before {content: ''; display: block; width: 18px; height: 20px; background: url("../images/course-teacher-white.png") no-repeat center / 100% 100%; position: absolute; left: 0; top: 50%; margin-top: -10px;}
.n-course-list .box .con {padding: 20px 15px;}
.n-course-list .box .con .tit {font-size: 16px; font-weight: bold; color: #333;}
.n-course-list .box .con .tit {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.n-course-list .box .con .tit a {color: #333;}
.n-course-list .box .con .txt {font-size: 14px; color: #666; padding-top: 10px;}
.n-course-list .box .con .txt {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}






.n-live-list {display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.n-live-list .group {width: calc(25% - 21px); padding: 28px 28px 0 0;}
.n-live-list .group:nth-child(4n + 0) {padding-right: 0;}
.n-live-list .box {border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
.n-live-list .box .txt {display: -ms-flex; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 16px; color: #fff; height: 44px; background: #8562ce; border-radius: 8px 8px 0 0;}
.n-live-list .box .img {font-size: 0; position: relative;}
.n-live-list .box .img .space img {width: 100%;}
.n-live-list .box .img .imgbox {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20;}
.n-live-list .box .img .imgbox a {display: block; width: 100%; height: 100%;}
.n-live-list .box .img .imgbox img {width: 100%; height: 100%;}
.n-live-list .box .tit {background: #fff; border-radius: 0 0 8px 8px; padding: 20px 15px; font-size: 15px; color: #333; font-weight: bold;}
.n-live-list .box .tit a {color: #333;}
.n-live-list .box .tit {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


@media all and (max-width: 1080px) {
    .n-course-list .box .img .txtbox {height: 40px; font-size: 13px; padding: 0 10px;}
    .n-course-list .box .img .txtbox .school {padding-left: 22px;}
    .n-course-list .box .img .txtbox .school:before {width: 16px; height: 16px; margin-top: -8px;}
    .n-course-list .box .img .txtbox .teacher {padding-left: 18px;}
    .n-course-list .box .img .txtbox .teacher:before {width: 13px; height: 14px; margin-top: -7px;}
    .n-course-list .box .con {padding: 15px;}
    .n-course-list .box .con .txt {font-size: 13px; padding-top: 5px;}

    .n-live-list .box .txt {font-size: 14px;}
    .n-live-list .box .tit {font-size: 14px;}
}
@media all and (max-width: 960px) {
    .n-course-list .group {width: calc(33.333% - 20px); padding: 30px 30px 0 0;}
    .n-course-list .group:nth-child(4n + 0) {padding-right: 30px;}
    .n-course-list .group:nth-child(3n + 0) {padding-right: 0;}

    .n-live-list .group {width: calc(33.333% - 20px); padding: 30px 30px 0 0;}
    .n-live-list .group:nth-child(4n + 0) {padding-right: 30px;}
    .n-live-list .group:nth-child(3n + 0) {padding-right: 0;}
}
@media all and (max-width: 860px) {
    .n-course-list .group {width: calc(33.333% - 14px); padding: 21px 21px 0 0;}
    .n-course-list .group:nth-child(4n + 0) {padding-right: 21px;}
    .n-course-list .group:nth-child(3n + 0) {padding-right: 0;}

    .n-live-list .group {width: calc(33.333% - 14px); padding: 21px 21px 0 0;}
    .n-live-list .group:nth-child(4n + 0) {padding-right: 21px;}
    .n-live-list .group:nth-child(3n + 0) {padding-right: 0;}
}
@media all and (max-width: 720px) {
    .n-course-list .box .img .txtbox {font-size: 12px; height: 36px;}
    .n-course-list .box .con {padding: 12px;}
    .n-course-list .box .con .tit {font-size: 14px;}
    .n-course-list .box .con .txt {font-size: 12px;}

    .n-live-list .box .txt {font-size: 13px;}
    .n-live-list .box .tit {padding: 15px 10px;}
}
@media all and (max-width: 640px) {
    .n-main {padding-top: 25px;}
    .n-main.white {padding-top: 10px;}
    .n-course-list {justify-content: space-between;}
    .n-course-list .group {width: calc(50% - 10px); padding: 20px 0 0 0;}
    .n-course-list .group:nth-child(4n + 0) {padding-right: 0;}
    .n-course-list .group:nth-child(3n + 0) {padding-right: 0;}

    .n-live-list {justify-content: space-between;}
    .n-live-list .group {width: calc(50% - 10px); padding: 20px 0 0 0;}
    .n-live-list .group:nth-child(4n + 0) {padding-right: 0;}
    .n-live-list .group:nth-child(3n + 0) {padding-right: 0;}
}
@media all and (max-width: 480px) {
    .n-main.white {padding-top: 0;}
}
@media all and (max-width: 420px) {
    .n-main {padding-top: 20px;}
    .n-course-list .group {width: calc(50% - 8px); padding: 16px 0 0 0;}

    .n-course-list .box .img .txtbox {height: 32px; font-size: 12px;}
    .n-course-list .box .img .txtbox .school {padding-left: 0;}
    .n-course-list .box .img .txtbox .school:before {display: none;}
    .n-course-list .box .img .txtbox .teacher {padding-left: 0;}
    .n-course-list .box .img .txtbox .teacher:before {display: none;}
    .n-course-list .box .con {padding: 10px;}

    .n-live-list .group {width: calc(50% - 8px); padding: 16px 0 0 0;}
    .n-live-list .box .txt {font-size: 12px; height: 40px;}
}



.detail-location {font-size: 16px; color: #999; padding: 20px 0; background: url("../images/n-location.png") no-repeat left center / auto 16px; padding-left: 20px;}
.detail-location {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.detail-location a {color: #999;}





.detail-intro {background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .1); padding: 20px; border-radius: 5px; display: -ms-flex; display: flex; align-items: flex-start;}
.detail-intro .img {width: 586px; position: relative; font-size: 0; margin-right: 20px;}
.detail-intro .img .space img {width: 100%;}
.detail-intro .img .imgbox {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20;}
.detail-intro .img .imgbox img {width: 100%; height: 100%; border-radius: 5px;}
.detail-intro .con {-ms-flex: 1; flex: 1; min-width: 0;}
.detail-intro .con .head {display: -ms-flex; display: flex; justify-content: space-between; align-items: center;}
.detail-intro .con .title {font-size: 28px; font-weight: bold; color: #010101; -ms-flex: 1; flex: 1; min-width: 0; padding-right: 20px;}
.detail-intro .con .head .state {font-size: 14px;}
.detail-intro .con .head .state span {display: block; padding-left: 25px;}
.detail-intro .con .head .state span.doing {background: url("../images/state-doing.png") no-repeat left center / 16px 16px; color: #8562ce;}

.detail-intro .con .share {display: -ms-flex; display: flex; align-items: center;}
.detail-intro .con .share .name {font-size: 14px; color: #333;}
.detail-intro .con .share .item {font-size: 0; padding-left: 10px;}
.detail-intro .con .share .item a {display: block;}
.detail-intro .con .share .item img {width: 24px; height: 24px;}
.detail-intro .con .note {padding-top: 20px;}
.detail-intro .con .note .phase {font-size: 0;}
.detail-intro .con .note .phase select {-webkit-appearance: none; appearance: none; width: 100%; height: 40px; box-sizing: border-box; background: url("../images/detail-select.png") no-repeat right center / auto 8px; border: 1px solid #ddd; border-radius: 5px; padding: 0 30px 0 15px; font-size: 14px; color: #000;}
.detail-intro .con .content {background: #f8f8f8; font-size: 14px; border-radius: 5px; padding: 8px 15px; margin-top: 20px; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.detail-intro .con .content .item {width: 100%; color: #000; padding: 5px 0;}
.detail-intro .con .content .item.row {width: 100%;}
.detail-intro .con .content .item span.tit {color: #a1a1a1;}
.detail-intro .con .content .item span.num {color: #8562ce;}



.detail-intro .con .foot {display: -ms-flex; display: flex; align-items: center; justify-content: space-between; padding-top: 20px;}
.detail-intro .con .foot .button a {display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; background: #8562ce; border-radius: 5px; font-size: 16px; color: #fff;}



.detail-wrap {padding: 30px 0;}
.detail-main {background: #fff; border: 1px solid #e2e2e2; border-radius: 5px;}
.detail-tabs {background: #f8f8f8; border-radius: 5px 5px 0 0; position: relative;}
.detail-tabs:after {content: ''; display: block; width: 100%; height: 1px; background: #e2e2e2; position: absolute; left: 0; bottom: 0;}
.detail-tabs .swiper-slide {width: auto; margin-right: 50px;}
.detail-tabs .swiper-slide:last-child {margin-right: 30px;}
.detail-tabs .swiper-slide:first-child {margin-left: 30px;}
.detail-tabs .swiper-slide a {display: block; line-height: 56px; font-size: 16px; font-weight: bold; color: #000; position: relative;}
.detail-tabs .swiper-slide a span {color: #858585;}
.detail-tabs .swiper-slide a.on {color: #8562ce;}
.detail-tabs .swiper-slide a.on:after {content: ''; display: block; width: 100%; height: 3px; background: #8562ce; position: absolute; left: 0; bottom: 0; z-index: 20;}

.detail-cons .infolist {display: none;}
.detail-cons .infolist.on {display: block;}


.detail-content {padding: 20px 30px; font-size: 15px; color: #a3a3a3; line-height: 2.5;}


.detail-menu {padding: 30px;}
.detail-menu .group {padding-top: 20px;}
.detail-menu .group:first-child {padding-top: 0;}
.detail-menu .group .name a {display: block; height: 44px; line-height: 44px; background: #f8f8f8; font-size: 16px; color: #000; border-radius: 5px; position: relative; padding: 0 55px 0 45px;}
.detail-menu .group .name a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.detail-menu .group .name a:before {content: ''; display: block; width: 18px; height: 18px; background: url("../images/detail-menu.png") no-repeat left / auto 100%; position: absolute; left: 18px; top: 50%; margin-top: -9px;}
.detail-menu .group .name a:after {content: ''; display: block; width: 14px; height: 8px; background: url("../images/detail-arrow.png") no-repeat center / 100% 100%; position: absolute; right: 20px; top: 50%; margin-top: -4px;}
.detail-menu .group .list {display: none; padding-top: 10px;}
.detail-menu .group .list .item {line-height: 44px; font-size: 15px; color: #858585; padding-left: 45px;}
.detail-menu .group .list .item a {color: #858585;}
.detail-menu .group .list .item {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.detail-menu .group.on .name a {color: #8562ce;}
.detail-menu .group.on .name a:before {background-position: right;}
.detail-menu .group.on .name a:after {-ms-transform: rotate(180deg); transform: rotate(180deg);}
.detail-menu .group.on .list {display: block;}



.sinoLevelStars {width: 84px; height: 16px; background: url("../images/comment-level.png") no-repeat top / 100% 600%; display: -ms-flex; display: flex;}
.sinoLevelStars .item {-ms-flex: 1; flex: 1; height: 100%;}
.sinoLevelStars .item a {display: block; width: 100%; height: 100%;}
.sinoLevelStars.l1 {background-position-y: -16px;}
.sinoLevelStars.l2 {background-position-y: -32px;}
.sinoLevelStars.l3 {background-position-y: -48px;}
.sinoLevelStars.l4 {background-position-y: -64px;}
.sinoLevelStars.l5 {background-position-y: -80px;}
@media all and (max-width: 420px) {
    .sinoLevelStars {width: 74px; height: 14px; background: url("../images/comment-level.png") no-repeat top / 100% 600%;}
    .sinoLevelStars.l1 {background-position-y: -14px;}
    .sinoLevelStars.l2 {background-position-y: -28px;}
    .sinoLevelStars.l3 {background-position-y: -42px;}
    .sinoLevelStars.l4 {background-position-y: -56px;}
    .sinoLevelStars.l5 {background-position-y: -70px;}
}


.detail-comment {padding: 0 30px;}
.detail-comment .group {padding: 30px 0; border-bottom: 1px solid #e2e2e2;}
.detail-comment .box {display: -ms-flex; display: flex;}
.detail-comment .box .img {width: 40px; font-size: 0; margin-right: 20px;}
.detail-comment .box .img a {display: block;}
.detail-comment .box .img img {width: 40px; height: 40px; border-radius: 50%;}
.detail-comment .box .con {-ms-flex: 1; flex: 1; min-width: 0;}
.detail-comment .box .con .head {display: -ms-flex; display: flex; align-items: center;}
.detail-comment .box .con .head .name {font-size: 14px; color: #333; margin-right: 10px;}
.detail-comment .box .con .head .name a {color: #333;}
.detail-comment .box .con .text {font-size: 14px; color: #666; padding-top: 10px;}
.detail-comment .box .con .note {display: -ms-flex; display: flex; justify-content: space-between; padding-top: 10px;}
.detail-comment .box .con .date {font-size: 14px; color: #999;}
.detail-comment .box .con .good {font-size: 14px; color: #999;}
.detail-comment .box .con .good a {display: block; color: #999; position: relative; padding-left: 20px;}
.detail-comment .box .con .good a:before {content: ''; display: block; width: 12px; height: 12px; background: url("../images/comment-good.png") no-repeat left / 200% 100%; position: absolute; left: 0; top: 50%; margin-top: -6px;}
.detail-comment .box .con .good a.on {color: #8562ce;}
.detail-comment .box .con .good a.on:before {background-position: right;}









@media all and (max-width: 1160px) {
    .detail-location {font-size: 14px;}
    .detail-intro .img {width: 50%;}
}
@media all and (max-width: 960px) {
    .detail-intro {padding: 15px;}
    .detail-intro .img {width: 40%;}
    .detail-intro .con .title {font-size: 24px;}
}
@media all and (max-width: 860px) {
    .detail-intro {display: block;}
    .detail-intro .img {width: auto; margin-right: 0;}
    .detail-intro .con {padding-top: 15px;}

    .detail-tabs .swiper-slide {margin-right: 30px;}
    .detail-tabs .swiper-slide:last-child {margin-right: 20px;}
    .detail-tabs .swiper-slide:first-child {margin-left: 20px;}
    .detail-tabs .swiper-slide a {font-size: 15px;}

    .detail-content {padding: 15px 20px; font-size: 14px;}
    .detail-menu {padding: 15px;}
    .detail-menu .group .name a {font-size: 14px; padding: 0 35px;}
    .detail-menu .group .name a:before {width: 16px; height: 16px; left: 12px; margin-top: -8px;}
    .detail-menu .group .name a:after {width: 10px; height: 6px; margin-top: -3px; right: 12px;}
    .detail-menu .group .list .item {font-size: 14px; padding-left: 35px;}

    .detail-comment {padding: 0 20px;}
    .detail-comment .group {padding: 20px 0;}
}
@media all and (max-width: 480px) {
    .detail-intro .con .note .phase select {font-size: 13px;}
    .detail-intro .con .foot .button a {font-size: 14px; width: 100px;}

    .detail-tabs .swiper-slide a {line-height: 50px; font-size: 14px;}

    .detail-menu {padding: 10px;}
    .detail-menu .group {padding-top: 10px;}
    .detail-menu .group.on .list {padding-top: 5px;}
    .detail-menu .group .list .item {font-size: 13px; line-height: 40px;}

    .detail-comment .box .img {width: 30px; margin-right: 10px;}
    .detail-comment .box .img img {width: 30px; height: 30px;}
    .detail-comment .box .con .date {font-size: 13px;}
    .detail-comment .box .con .good {font-size: 13px;}
}
@media all and (max-width: 420px) {
    .detail-intro {padding: 0; background: none; border-radius: 0; box-shadow: none;}
    .detail-intro .con .head {display: block;}
    .detail-intro .con .head .state {padding-top: 10px;}
    .detail-intro .con .note .phase select {font-size: 12px; background-size: auto 6px;}
    .detail-intro .con .content {padding: 5px 10px; font-size: 12px;}
    .detail-intro .con .foot .button a {height: 36px; line-height: 36px;}
    .detail-intro .con .share .name {font-size: 12px;}
    .detail-intro .con .share .item img {width: 20px; height: 20px;}

    .detail-wrap {padding: 20px 0;}
    .detail-tabs .swiper-slide {margin-right: 20px;}

    .detail-content {padding: 10px 15px;}

    .detail-comment {padding: 0 15px;}
    .detail-comment .group {padding: 15px 0;}
    .detail-comment .box .con .head .name {font-size: 13px;}
    .detail-comment .box .con .text {font-size: 13px; padding-top: 5px;}
    .detail-comment .box .con .note {padding-top: 5px;}
    .detail-comment .box .con .date {font-size: 12px;}
    .detail-comment .box .con .good {font-size: 12px;}
    .detail-comment .box .con .good a {padding-left: 18px;}
    .detail-comment .box .con .good a:before {width: 10px; height: 10px; margin-top: -5px;}
}






.play-page {padding-bottom: 50px;}
.play-wrap {background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .1); border-radius: 10px; padding: 0 30px;}
.play-head {display: -ms-flex; display: flex; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 0;}
.play-head .title {font-size: 30px; font-weight: bold; color: #010101; margin-right: 15px;}
.play-head .state {background: #8562ce; border-radius: 10px; padding: 0 12px; font-size: 16px; color: #fff;}
.play-head .state span {display: block; line-height: 28px; padding-left: 22px; position: relative;}
.play-head .state span:before {content: ''; display: block; width: 16px; height: 16px; position: absolute; left: 0; top: 50%; margin-top: -8px; background: url("../images/play-doing.png") no-repeat center / 100% 100%;}

.play-player {position: relative; padding-right: 45%;}
.play-player-box {font-size: 0;}
.play-player-box img {width: 100%;}
.play-player-nav {width: 45%; height: 100%; overflow: auto; position: absolute; right: 0; top: 0;}
.play-player-nav .padding {padding-left: 25px;}
.play-player-nav .group {padding-top: 8px;}
.play-player-nav .group:first-child {padding-top: 0;}
.play-player-nav .group .name a {display: block; height: 40px; line-height: 40px; background: #f8f8f8; font-size: 15px; color: #000; border-radius: 5px; position: relative; padding: 0 55px 0 45px;}
.play-player-nav .group .name a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.play-player-nav .group .name a:before {content: ''; display: block; width: 18px; height: 18px; background: url("../images/detail-menu.png") no-repeat left / auto 100%; position: absolute; left: 18px; top: 50%; margin-top: -9px;}
.play-player-nav .group .name a:after {content: ''; display: block; width: 14px; height: 8px; background: url("../images/detail-arrow.png") no-repeat center / 100% 100%; position: absolute; right: 20px; top: 50%; margin-top: -4px;}
.play-player-nav .group .list {display: none; padding-top: 8px;}
.play-player-nav .group .list .item {line-height: 40px; font-size: 14px; color: #858585; padding-left: 20px;}
.play-player-nav .group .list .item a {color: #858585; position: relative; padding-left: 25px;}
.play-player-nav .group .list .item a.on {color: #8562ce;}
.play-player-nav .group .list .item a.on:before {content: ''; display: block; width: 16px; height: 16px; background: url("../images/play-menu-on.png") no-repeat center / 100% 100%; position: absolute; left: 0; top: 50%; margin-top: -8px;}
.play-player-nav .group .list .item {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.play-player-nav .group.on .name a {color: #8562ce;}
.play-player-nav .group.on .name a:before {background-position: right;}
.play-player-nav .group.on .name a:after {-ms-transform: rotate(180deg); transform: rotate(180deg);}
.play-player-nav .group.on .list {display: block;}



.play-comment {padding: 40px 0;}
.play-comment-title {font-size: 18px; color: #000; font-weight: bold;}
.play-comment-note {padding-right: 0; padding-top: 15px;}
.play-comment-note .box {background: #f8f5fe; border: 1px solid #e0d5f7; border-radius: 10px; font-size: 14px; color: #8562ce; padding: 10px 15px;}
.play-comment-form {padding-top: 20px;}
.play-comment-form .flex {display: -ms-flex; display: flex; align-items: center;}
.play-comment-form-content {-ms-flex: 1; flex: 1; min-width: 0; display: -ms-flex; display: flex;}
.play-comment-form-content .img {width: 40px; font-size: 0; margin-right: 15px;}
.play-comment-form-content .img a {display: block;}
.play-comment-form-content .img img {width: 40px; height: 40px; border-radius: 50%;}
.play-comment-form-content .con {font-size: 0; -ms-flex: 1; flex: 1; min-width: 0;}
.play-comment-form-content .con textarea {width: 100%; height: 120px; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; padding: 10px 15px; font-size: 14px; color: #000;}
.play-comment-form-other {width: 140px; padding-left: 20px;}
.play-comment-form-other .level .tit {font-size: 16px; color: #000;}
.play-comment-form-other .level .box {padding-top: 10px;}
.play-comment-form-other .submit {padding-top: 15px;}
.play-comment-form-other .submit input.btn {display: block; width: 140px; height: 44px; text-align: center; line-height: 44px; cursor: pointer; background: #8562ce; border: 0 none; border-radius: 10px; font-size: 16px; color: #fff;}


@media all and (max-width: 1024px) {
    .play-wrap {padding: 0 20px;}
    .play-head {padding: 20px 0;}
    .play-head .title {font-size: 24px;}
    .play-head .state {font-size: 14px; border-radius: 7px;}
    .play-head .state span {padding-left: 15px; line-height: 24px;}
    .play-head .state span:before {width: 12px; height: 12px; margin-top: -6px;}

    .play-player {padding-right: 50%;}
    .play-player-nav {width: 50%;}
    .play-player-nav .padding {padding-left: 20px;}
}
@media all and (max-width: 960px) {
    .play-player {padding-right: 0;}
    .play-player-nav {position: relative; right: auto; top: auto; width: auto; height: auto;}
    .play-player-nav .padding {padding-left: 0; padding-top: 20px;}
}
@media all and (max-width: 720px) {
    .play-head .state {padding: 0 8px;}
    .play-player-nav .group .name a {font-size: 14px; padding: 0 35px;}
    .play-player-nav .group .name a:before {width: 16px; height: 16px; left: 12px; margin-top: -8px;}
    .play-player-nav .group .name a:after {width: 10px; height: 6px; margin-top: -3px; right: 12px;}
    .play-player-nav .group .list .item {font-size: 14px; padding-left: 15px;}
    .play-player-nav .group .list .item a {padding-left: 20px;}
    .play-player-nav .group .list .item a.on:before {width: 12px; height: 12px; margin-top: -6px;}

    .play-comment {padding: 30px 0;}
    .play-comment-note .box {font-size: 13px;}
    .play-comment-form-content .img {width: 32px; margin-right: 10px;}
    .play-comment-form-content .img img {width: 32px; height: 32px;}
    .play-comment-form-content .con textarea {padding: 6px 10px; border-radius: 8px;}
    .play-comment-form-other {width: 110px;}
    .play-comment-form-other .level .tit {font-size: 14px;}
    .play-comment-form-other .submit input.btn {width: 110px; height: 40px; line-height: 40px; font-size: 14px; border-radius: 8px;}
}
@media all and (max-width: 480px) {
    .play-wrap {padding: 0 15px;}
    .play-head {padding: 15px 0;}
    .play-head .title {font-size: 22px;}
    .play-head .state {padding: 0 5px; font-size: 12px; border-radius: 5px;}
    .play-head .state span {padding-left: 12px; line-height: 22px;}
    .play-head .state span:before {width: 10px; height: 10px; margin-top: -5px;}

    .play-comment-form .flex {display: block;}
    .play-comment-form-other {width: auto; padding-left: 42px; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; padding-top: 15px;}
    .play-comment-form-other .level {display: -ms-flex; display: flex; align-items: center;}
    .play-comment-form-other .level .tit {margin-right: 5px;}
    .play-comment-form-other .level .box {padding-top: 0;}
    .play-comment-form-other .submit {padding-top: 0;}
}
@media all and (max-width: 420px) {
    .play-page {padding-bottom: 20px;}
    .play-wrap {background: none; border-radius: 0; box-shadow: none; padding: 0;}
    .play-head {border-top: 1px solid #e2e2e2;}

    .play-comment {padding: 20px 0;}
    .play-comment-title {font-size: 16px;}
    .play-comment-note .box {font-size: 12px; padding: 5px 10px; border-radius: 5px;}
}
@media all and (max-width: 375px) {
    .play-comment-form-other .submit input.btn {width: 90px;}
}








.n-news {display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 20px; justify-content: space-between;}
.n-news .item {width: calc(50% - 15px); padding: 8px 0; line-height: 24px; font-size: 16px; color: #000; position: relative; padding-left: 20px; box-sizing: border-box;}
.n-news .item {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.n-news .item a {color: #000;}
.n-news .item a:before {content: ''; display: block; width: 4px; height: 4px; background: #d8d8d8; position: absolute; left: 2px; top: 50%; margin-top: -2px;}
.n-news .item a:hover:before {background: #8562ce;}

@media all and (max-width: 1080px) {
    .n-news {padding-top: 10px;}
    .n-news .item {font-size: 15px;}
}
@media all and (max-width: 800px) {
    .n-news .item {width: 100%;}
}
@media all and (max-width: 480px) {
    .n-news .item {font-size: 14px; padding-left: 15px;}
}




.newscon {border-top: 1px solid #e2e2e2; padding: 50px 0;}
.newscon-title {font-size: 30px; font-weight: bold; color: #000; text-align: center;}
.newscon-note {font-size: 14px; color: #999; text-align: center; padding-top: 10px;}
.newscon-content {font-size: 16px; line-height: 2.2; color: #333; padding-top: 20px;}
@media all and (max-width: 960px) {
    .newscon {padding: 30px 0;}
    .newscon-title {font-size: 24px;}
    .newscon-content {font-size: 14px;}
}
@media all and (max-width: 480px) {
    .newscon {padding: 20px 0;}
}
@media all and (max-width: 375px) {
    .newscon-title {font-size: 22px;}
}