@charset "UTF-8";
.clearaft:after {
  content: '';
  display: block;
  clear: both;
}

.color8A8B99 {
  color: #8A8B99;
}

.color131B26 {
  color: #131B26;
}
.color3A8BFF {
  color: #3A8BFF;
}

.mg-r4 {
  margin-right: 4px;
}

.font-DIN {
  font-family: D-DIN;
}
.big-ipt{
  min-height: 60px;
  display: inline-block;
  font-size: 14px;
  width: calc(100% - 30px);
  margin: 14px;
  vertical-align: middle;
  color: #000;
  border: 0;
  outline: none;
}

/*评论列表 --start */
.comment-list-wrapper {
  width: 100%;
  background: #fff;
  /*图片*/
  /*录音*/
}
.comment-list-wrapper .wrapper-list {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.comment-list-wrapper .wrapper-list.hover-style:hover {
  background: #F0F6FF;
  cursor: pointer;
}.comment-list-wrapper .wrapper-list:after {
   content: '';
   border-bottom: 1px solid #F2F2F2;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   position: absolute;
   left: 56px;
   right: 30px;
   bottom: 0;
 }
.comment-list-wrapper .wrapper-list:last-child:after {
  display:none;
}
.comment-list-wrapper .wrapper-list:first-child:after {
  /*display:block;*/
}
.comment-list-wrapper .wrapper-list.line1:after {
  left: 84px;
}
.comment-list-wrapper .wrapper-list.line2:after {
  left: 84px;
}
.comment-list-wrapper .wrapper-list .avatar-part {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  float: left;
  border: 1px solid #ebebeb;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.comment-list-wrapper .wrapper-list .avatar-part img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.comment-list-wrapper .wrapper-list .content-part {
  width: calc(100% - 56px);
  float: left;
  margin-left: 14px;
}
.comment-list-wrapper .wrapper-list .content-part .name-score {
  position: relative;
  width: 100%;
  height: 42px;
  overflow: hidden;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .user-info {
  height: 42px;
  line-height: 42px;
  width: auto;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .user-info .name-txt {
  display: inline-block;
  vertical-align: middle;
  color: #474C59;
  font-size: 14px;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .user-info .handman {
  border-radius: 4px;
  border: 1px solid #ffbe7b;
  border-radius: 4px;
  padding: 0 5px;
  line-height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 12px;
  color: #f28c24;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .user-info .mark-me {
  border-radius: 4px;
  background-color: #86D9B0;
  padding: 0 6px;
  line-height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 12px;
  color: #fff;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .scores {
  float: right;
  font-size: 14px;
  line-height: 42px;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .r-box {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  vertical-align: middle;
  z-index: 10;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .scores .icon-edit2 {
  color: #3A8BFF;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 2px;
}
.comment-list-wrapper .wrapper-list .content-part .name-score .scores .icon-arrow-right {
  font-size: 12px;
  cursor: pointer;
  margin-left: 2px;
}
.comment-list-wrapper .wrapper-list .content-part .content-part-info .score-info-lists {
  margin-top: 3px;
  margin-bottom: 14px;
}
.comment-list-wrapper .wrapper-list .content-part .content-part-info .score-info-lists .score-info-list {
  margin-bottom: 14px;
  color: #131B26;
  line-height: 20px;
}
.comment-list-wrapper .wrapper-list .content-part .content-part-info .score-info-lists .score-info-list:last-child {
  margin-bottom: 0;
}
.comment-list-wrapper .wrapper-list .content-part .content-part-info .score-info-lists .score-info-list .txt {
  max-width: 80%;
}
.comment-list-wrapper .wrapper-list .content-part .content-part-info .info-detail {
  padding: 16px 20px;
  background-color: #F7F8FA;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 14px;
}
.comment-list-wrapper .wrapper-list .content-part .content-part-info .info-detail .teacher-dec {
  color: #474C59;
  line-height: 20px;
  font-size: 14px;
}
.comment-list-wrapper .img-lists li {
  float: left;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 8px;
  margin-top: 14px;
  border-bottom: none;
  padding: 0;
}
.comment-list-wrapper .img-lists li img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.comment-list-wrapper .record-lists li {
  margin-top: 14px;
  background: #F7F8FA;
  border-radius: 4px;
  padding: 16px 16px 16px 72px;
  position: relative;
  border: 1px solid #E6ECF5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.comment-list-wrapper .record-lists li:hover {
  background: #F0F6FF;
  border: 1px solid #E6ECF5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.comment-list-wrapper .record-lists li:hover .title-box .title {
  color: #3A8BFF;
}
.comment-list-wrapper .record-lists li .icon-voice {
  font-size: 42px;
  color: #0399FF;
  position: absolute;
  left: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.comment-list-wrapper .record-lists li .title-box .title {
  font-size: 14px;
  color: #131B26;
  line-height: 20px;
}
.comment-list-wrapper .record-lists li .hint {
  margin-top: 4px;
  font-size: 12px;
  color: #8A8B99;
  line-height: 16px;
}

.comment-table-box {
  margin-top: 3px;
}

.comment-table-box table {
  border-color: #E4E9EE;
  border-radius: 4px;
  text-align: left;
}

.comment-table-box table th {
  padding: 7px 16px;
  line-height: 16px;
  background: #F2F4F7;
  font-size: 12px;
  color: #8A8B99;
}

.comment-table-box table td {
  padding: 10px 16px;
  font-size: 14px;
  color: #131B26;
  line-height: 20px;
}


.no-more-tip {
  font-size: 14px;
  color: #8A8B99;
  line-height: 60px;
  text-align: center;
}

/*组间互评下拉 start*/
.group-comment-lists .group-bder-box {
  margin: 16px 30px;
  border: 1px solid #E8E8E8;
  padding: 20px 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
}
.group-comment-lists .group-bder-box.no-bder {
  border: 0;
  margin: 0;
  padding: 0;
}

.group-comment-lists .g-item .js-load-comment-list {
  margin-top: 10px;
}
.group-comment-lists .g-item .it-left {
  display: inline-block;
  font-size: 14px;
  color: #131B26;
  line-height: 20px;
  /*margin-bottom: 10px;*/
  margin-left: 30px;
  cursor: pointer;
}
.group-comment-lists .g-item .it-left .g-name {
  font-weight: 500;
}
.group-comment-lists .g-item .it-left .icon {
  font-size: 12px;
  margin-left: 4px;
}
.group-comment-lists .g-item .it-left .icon.rotate180 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.group-comment-lists .title-sum {
  position: relative;
  height: 20px;
  margin-right: 30px;
}
.group-comment-lists .title-sum .posiRelative {
  position: relative;
}
.group-comment-lists .title-sum .icon-warning {
  font-size: 14px;
  color: #ACB4BF;
  line-height: 20px;
  margin-left: 6px;
  cursor: pointer;
}
.group-comment-lists .title-sum .icon-warning:hover {
  color: #3A8BFF;
}
.group-comment-lists .title-sum .icon-warning:hover + .bubble {
  display: block;
}
.group-comment-lists .title-sum .bubble {
  width: 240px;
  padding: 10px 16px;
  background: rgba(24, 30, 51, 0.8);
  left: 50%;
  bottom: 30px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.group-comment-lists .title-sum .bubble:after {
  height: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  margin-left: 0;
  margin-top: 0;
}

.hover-pull-down {
  display: inline-block;
  height: 31px;
  vertical-align: top;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  color: #3A8BFF;
  line-height: 20px;
}
.hover-pull-down:hover .person-icon {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
.hover-pull-down:hover .pull-down-list {
  display: block;
}
.hover-pull-down .person-icon {
  display: inline-block;
  font-size: 12px;
  margin-left: 4px;
}
.hover-pull-down .pull-down-list {
  width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  position: absolute;
  top: 30px;
  left: 0;
  background: #FFFFFF;
  -webkit-box-shadow: 0 2px 12px 0 rgba(175, 187, 204, 0.75);
  box-shadow: 0 2px 12px 0 rgba(175, 187, 204, 0.75);
  border-radius: 8px;
  z-index: 7;
  display: none;
}
.hover-pull-down .pull-down-list .tip {
  font-size: 14px;
  font-weight: 500;
  color: #131B26;
  line-height: 20px;
  padding: 10px 20px 4px;
}
.hover-pull-down .pull-down-list .person-wrapper {
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 60px;
}
.hover-pull-down .pull-down-list .person-wrapper:hover {
  background: #F0F6FF;
}
.hover-pull-down .pull-down-list .person-wrapper .person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  float: left;
}
.hover-pull-down .pull-down-list .person-wrapper .person-avatar img {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.hover-pull-down .pull-down-list .person-wrapper .person-name {
  width: calc(100% - 46px);
  line-height: 36px;
  font-size: 14px;
  color: #131B26;
  letter-spacing: 0.27px;
}
.hover-pull-down .pull-down-list .person-wrapper .person-name-1 {
  width: calc(100% - 46px);
  line-height: 20px;
  font-size: 14px;
  color: #131B26;
  letter-spacing: 0.27px;
}
.hover-pull-down .pull-down-list .person-wrapper .person-hint {
  width: calc(100% - 46px);
  margin-top: 2px;
  font-size: 12px;
  color: #8A8B99;
  letter-spacing: 0.27px;
}
.hover-pull-down .pull-down-list .group-wrapper {
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.hover-pull-down .pull-down-list .group-wrapper:hover {
  background: #F0F6FF;
}
.hover-pull-down .pull-down-list .group-wrapper .group-icon {
  font-size: 16px;
  color: #8A8B99;
  margin-right: 10px;
  line-height: 20px;
  float: left;
}
.hover-pull-down .pull-down-list .group-wrapper .group-name {
  margin-left: 26px;
  font-size: 14px;
  line-height: 20px;
  color: #131B26;
}
/*现在用的*/
.hover-pull-down .pull-down-list .group-wrapper-li {
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.hover-pull-down .pull-down-list .group-wrapper-li:hover {
  background: #F0F6FF;
}
.hover-pull-down .pull-down-list .group-wrapper-li .group-icon {
  font-size: 16px;
  color: #8A8B99;
  margin-right: 10px;
  line-height: 20px;
  float: left;
}
.hover-pull-down .pull-down-list .group-wrapper-li .group-name {
  margin-left: 26px;
  font-size: 14px;
  line-height: 20px;
  color: #131B26;
}

/*组间互评下拉 end*/
.null-data {
  font-size: 14px;
  color: #8A8B99;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*评论列表 --end */
.hide-score{
  position: relative;
  top: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 26px
}