body {
   font-size: 14px;
   background: #F5F5F5;
   min-width: 1200px;
 }

 .main {
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
   padding-bottom: 100px;
 }

 .main-left-container {
   width: 880px;
   height: auto;

 }

 .main-left-container .nav-box {
   width: 100%;
   height: 51px;
   background: #FFFFFF;
   border-radius: 5px 5px 0px 0px;
 }

 .main-left-container .nav-bar {
   width: 100%;
   display: flex;
   align-items: center;
   color: #8F90A6;
 }

 .nav-search {
   padding: 0 16px;
   height: 100%;
   font-size: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #8F90A6;
 }

 .search-tips span {
   font-size: 14px;
   color: #1A8CFE;
 }

 .out-search {
   cursor: pointer;
   font-size: 14px;
   transition: color .5s;
 }

 .out-search:hover {
   color: #1A8CFE;
 }

 .nav-bar li {
   margin-left: 32px;
   height: 100%;
   line-height: 51px;
   position: relative;
   cursor: pointer;
 }

 .nav-bar li:before {
   content: "";
   display: inline-block;
   width: 0;
   height: 3px;
   transition: all .3s;
   position: absolute;
   bottom: 0;
   left: 50%;
   border-radius: 30px;
   transform: translateX(-50%);
   background: #1A8CFE;
 }

 .nav-bar .active:before {
   content: "";
   width: 100%;
   height: 3px;
 }

 .nav-bar-content {}

 .item-content {
   display: none;
   min-height: 300px;
 }

 .nav-bar-content .on {
   display: block;
 }

 .list {
   width: 100%;
   margin: 10px 0;
   padding: 24px 32px;
   background: #FFFFFF;
   border-radius: 5px;
 }

 .user-questions {
   width: 100%;
   /* border-bottom: 1px solid #F2F2F5; */
   display: flex;
   align-items: center;
 }

 .course-questions .user-questions {
   padding-bottom: 12px;
 }

 .user-img {
   width: 24px;
   height: 24px;
   border-radius: 50%;
 }

 .user-questions-text {
   font-weight: 500;
   font-size: 18px;
   color: #28293D;
   margin-left: 8px;
   word-break: break-all;
   font-weight: bold;
 }

 .que-content {
   padding: 8px 0;
   font-size: 14px;
   color: #555770; 
   border-bottom: 1px dashed #EBEBF0;
   line-height: 28px;
 }

 .teacher-info {
   display: flex;
   padding: 8px 0;
   align-items: center;
 }

 .teacher-img {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: block;
 }

 .teacher-info span {
   display: inline-block;
   font-size: 14px;
 }

 .teacher-info span:nth-of-type(1) {
   color: #555770;
   margin-right: 8px;
 }

 .teacher-info span:nth-of-type(2) {
   color: #28293D;
 }

 .teacher-info span:nth-of-type(3) {
   color: #8F90A6;
   margin-left: 8px;
 }

 .teacher-answers-box {
   padding-bottom: 21px;
 }

 .course-questions .teacher-answers-box {
   padding: 13px 0 21px;
 }

 .teacher-answer-info {
   display: flex;
 }

 .teacher-answers-text {
   width: 100%;
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;
   color: #555770;
   position: relative;
   overflow: hidden; 
   text-overflow: ellipsis;
 }
 .teacher-answers-text br:first-of-type,.teacher-answers-text br:last-of-type{
  display: none;
 }

 .teacher-answers-text img {
   display: block;
   max-width: 337px;
   /* height: 253px;
   object-fit: cover; */
   margin: 16px auto !important;
} 
 .attach_url {
   width: 96px;
   height: 72px;
   margin-left: 24px;
 }

 .attach_url img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: inline-block;
 }

 .teacher-answers-text span,
 .teacher-answers-text i,
 .teacher-answers-text a,
 .teacher-answers-text p {
   font-size: 14px !important;
 }

 .autoHeight {
   height: auto;
 }

 .answers-img {
   max-width: 395px !important;
   margin: 20px auto !important;
   display: block;
 }

 .zoom-mask-layer {
   z-index: 2062;
 }

 .textControls {
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
 }

 .line-clamp3 {
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   -webkit-box-orient: vertical;
 }
 .line-clamp4 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
 .shrinking-btn {
   min-width: 45px;
   height: 21px;
   position: absolute;
   right: 0;
   bottom: -21px;
   color: #AFAFAF;
   cursor: pointer;
   display: none;
   background-color: #fff;
 }

 .down::before {
   content: "...";
   color: #555770;
   margin-left: 2px;
 }

 .shrinking-btn::after {
   margin-left: 5px;
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
   background: url(../img/shranking-up.svg) center no-repeat;
   background-size: contain;
 }

 .down {
   color: #1A8CFE;
   font-size: 14px;
   bottom: 3px;
 }

 .down::after {
   background: url(../img/shrinking-down.svg) center no-repeat;
   background-size: contain;
 }

 .main-right-container {
   width: 300px;
 }

 .put-questions-box {
   width: 100%;
   padding: 24px;
   background: #FFFFFF;
   border-radius: 0px 0px 5px 5px;
   margin-bottom: 16px;
 }

 .input-container {
   background: #FAFAFC;
   border-radius: 5px;
   padding: 12px 12px 16px 12px;
   min-height: 127px;
 }

 .put-questions-title {
   padding-bottom: 16px;
   border-bottom: 2px solid #EBEBF0;
 }

 .put-questions-content {
   margin-top: 16px;
   height: 42px;
 }

 .put-upload-img {
   margin-top: 8px;
 }

 .put-upload {
   display: flex;
 }

 .upload-list-box {
   display: flex;
   align-items: center;
 }

 .addImageBtn {
   width: 48px;
   height: 48px;
   display: none;
   cursor: pointer;
   border: 1px solid #eeeeee;
   background-color: rgb(255, 255, 255);
   position: relative;
 }

 .addImageBtn .jc-uploadWrap {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
 }

 .addImageBtn img {
   width: 88%;
   height: 75%;
   margin: 0 auto;
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 .upload-list {
   width: 48px;
   height: 48px;
   position: relative;
   background: #E4E4EB; 
   margin:10px 10px 0 0;
 }

 .upload-list img {
   width: 48px;
   height: 48px;
   display: block;
   object-fit: cover;
 }

 .close-btn {
   position: absolute;
   width: 12px;
   height: 12px;
   right: 0;
   top: 0;
   background: url(../img/close.svg)center no-repeat;
   background-size: contain;
   cursor: pointer;
 }

 .put-questions-actions {
   height: 33px;
   margin-top: 12px;
   position: relative;
   display: block;
   text-align: right;
 }

 .put-questions-actions .fileInput {
   font-size: 0;
   color: transparent;
   width: 90px;
   height: 24px;
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 100;
   opacity: 0;
   cursor: pointer;
 }

 .put-questions-box .upload-btn {
   width: 24px;
   height: 24px;
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
 }

 .put-questions-box .upload-tips {
   position: absolute;
   left: 28px;
   top: 50%;
   transform: translateY(-50%);
   color: #8F90A6;
   font-size: 14px;
 }

 .questions-submit span {
   font-size: 12px;
   color: #C7C9D9;
 }

 .questions-submit .submit-btn {
   display: inline-block;
   width: 64px;
   height: 32px;
   line-height: 32px;
   border-radius: 4px;
   text-align: center;
   background: #C7C9D9;
   margin-left: 20px;
   color: #FFFFFF;
   font-size: 14px;
   cursor: pointer;
 }

 .questions-submit .submit-btn-active {
   background: #0063F7;
 }

 .searchBox {
   padding: 20px;
   width: 300px;
   height: 76px;
   background: #FFFFFF;
   margin-bottom: 16px;
   border-radius: 5px;
 }

 .list-container {
   min-height: 300px;
 }

 .searchInputBox {
   width: 100%;
   height: 100%;
   display: flex;
 }

 .search-result {
   padding: 0 12px;
   width: 182px;
   background: #FFFFFF;
   border: 1px solid #1A8CFE;
   z-index: 20;
   position: relative;
   top: -1px;
   display: none;
 }


 .search-result li {
   margin: 12px 0;
 }

 .search-result a {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
   font-size: 12px;
   color: #8F90A6;
 }

 .searchInputBox input {
   width: 182px;
   height: 100%;
   background: #FFFFFF;
   border: 1px solid #1A8CFE;
   padding-left: 12px;
   color: #8F90A6;
   font-size: 12px;
 }

 .searchInputBox .focus {
   border: 2px solid #1A8CFE;
   padding-left: 11px;
 }

 .keywords {
   color: #1A8CFE;
   font-size: 12px;
 }

 .searchInputBox .searchBtn {
   width: 76px;
   height: 36px;
   line-height: 36px;
   text-align: center;
   background: #1A8CFE;
   color: #fff;
   cursor: pointer;
 }

 .my-questions {
   width: 300px;
   height: 128px;
   padding: 0 20px;
   background: #FFFFFF;
   border-radius: 5px;
 }

 .my-questions a {
   padding: 20px 0;
   display: block;
   color: #28293D;
   position: relative;
 }

 .my-questions a::after {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   display: inline-block;
   content: "";
   width: 7px;
   height: 4px;
   background: url(../img/more.svg)center no-repeat;
   background-size: contain;
 }

 .ip_provice {
   color: #8F90A6;
   font-size: 12px;
   margin-left: 10px;
 }

 .my-questions a:first-of-type {
   border-bottom: 1px solid #F2F2F5;
 }

 .search-data {
   min-height: 300px;
 }

 #slide_box {
   width: 300px;
   height: 170px;
   border-radius: 5px;
   margin: 16px 0;
 }

 #slide_box img {
   width: 100%;
   height: 100%;
   display: block;
 }

 .swiper-pagination-bullet {
   width: 6px;
   height: 4px;
   background: #D9D9D9;
   border-radius: 2px;
 }

 .swiper-pagination-bullet-active {
   width: 12px;
   height: 4px;
   background: #FFB800;
 }

 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 2px;
 }

 .app-download {
   width: 300px;
   padding: 20px;
   background: #FFFFFF;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
 }

 .app-download-info p:first-of-type {
   color: #28293D;
   line-height: 24px;
 }

 .app-download-info p:last-of-type {
   color: #8F90A6;
   font-size: 12px;
   margin-top: 4px;
   line-height: 18px;
 }

 .app-download-code img {
   width: 80px;
 }

 .jc-pagination li:nth-of-type(1) {
   display: none;
 }

 .jc-paging {
   text-align: center;
 }

 .jc-paging ul {
   display: inline-block;
 }

 .course-questions .questions-source {
   display: flex;
   align-items: center;
   border-bottom: 1px solid #F2F2F5;
   padding-bottom: 12px;
   font-size: 12px;
   color: #8F90A6;
 }

 .course-source {
   color: #1A8CFE;
   font-size: 12px;
 }

 .questions-source i {
   width: 12px;
   height: 12px;
   background: url(../img/icon1.svg)center no-repeat;
   background-size: 100% 100%;
   margin-right: 8px;
   color: #8F90A6;

 }

 input {
   background: none;
   outline: none;
   border: none;
   width: 100%;
   color: #999999;
 }

 textarea { 
   border: none;
   outline: none;
   /*边线不显示*/
   resize: none;
   /*禁止拉伸*/
   background: none;
   appearance: none;
   width: 100%;
   height:100%;
   overflow: hidden;
   color: #909399;
 }

 .input-container {
   border: 2px solid #FAFAFC;
 }

 .input-container-focus {
   border: 2px solid #6AA1FF;
 }

 .input-container input::-webkit-input-placeholder {
   /* WebKit browsers */
   color: #8F90A6;
   font-size: 18px;
   font-weight: bold;
 }

 .input-container input:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: #8F90A6;
   font-size: 18px;
   font-weight: bold;
 }

 .input-container input::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: #8F90A6;
   font-size: 18px;
   font-weight: bold;
 }

 .input-container input:-ms-input-placeholder {
   /* Internet Explorer 10+ */
   color: #8F90A6;
   font-size: 18px;
   font-weight: bold;
 }

 .searchInputBox input::-webkit-input-placeholder {
   /* WebKit browsers */
   color: #555770;
   font-size: 12px;
 }

 .searchInputBox input:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: #555770;
   font-size: 12px;
 }


 .searchInputBox input:-ms-input-placeholder {
   /* Internet Explorer 10+ */
   color: #555770;
   font-size: 12px;
 }

 .upload_cover {
   width: 20px;
   height: 20px;
 }

 .put-questions-actions .jc-uploadWrap {
   width: 24px;
   height: 24px;
   display: inline-block;
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 100;
 }

 .ubtn {
   display: none;
 }

 #showCover {
   display: none;
 }

 .number-words i {
   font-size: 12px;
   color: #C7C9D9;
 }

 .questions-submit .text-active {
   color: #0063F7;
 }

 .questions-submit .text-error {
   color: #FF3B3B;
 }

 .disabled {
   opacity: .7;
   cursor: not-allowed !important;
 }

 textarea:-moz-placeholder {
   color: #8F90A6;
   font-size: 14px;
 }


 textarea:-ms-input-placeholder {
   color: #8F90A6;
   font-size: 14px;
 }


 textarea::-webkit-input-placeholder {
   color: #8F90A6;
   font-size: 14px;
 }

 i {
   font-style: normal;
 }

 button {
   border: none;
   background-color: transparent;
   outline: none;
   cursor: pointer;
 }

 .operation-group {
   display: flex;
   align-items: center;
   margin-top: 13px;
 }

 .operation-group span {
   display: inline-block;
   margin-right: 24px;
   font-size: 12px;
   color: #BABABA;
   display: flex;
   align-items: center;
   cursor: pointer;
 }

 .operation-group .yizan,
 .operation-group .collected {
   color: #FFB800;
 }

 .operation-group span:before {
   content: "";
   display: inline-block;
   width: 20px;
   height: 20px;
   margin-right: 5px;
 }

 .zan::before {
   background: url(../img/zan.svg)center no-repeat;
   background-size: contain;
 }

 .yizan::before {
   background: url(../img/yizan.svg?v1.0)center no-repeat;
   background-size: contain;
 }

 .comment::before {
   background: url(../img/pinglun.svg)center no-repeat;
   background-size: contain;
 }

 .collect::before {
   background: url(../img/collect.svg)center no-repeat;
   background-size: contain;
 }

 .collected::before {
   background: url(../img/collected.svg)center no-repeat;
   background-size: contain;
 }

 /* 弹窗 */
 .dialog {
   visibility: hidden;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 180;
   transition: visibility .3s;
 }

 .dialog .mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index: 190;
   transition: visibility .3s;
 }

 .dialog .box {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 200;
 }

 .dialog .dialog-wrapper {
   width: 415px;
   height: 228px;
   background-color: #fff;
   transform: scale(0);
   transition: all .3s;
   z-index: 220;
 }




 .dialog .scaleTo {
   animation: scaleTo .3s ease-in;
   -webkit-animation: scaleTo .3s;
 }

 .dialog .scaleFrom {
   animation: scaleFrom .3s ease-in;
   -webkit-animation: scaleFrom .3s;
 }



 .dialog_show .dialog-wrapper {
   transform: scale(1);
 }

 .dialog_show {
   visibility: visible;
 }

 /* 弹窗 */

 .notData {
   background: #fff;
   min-height: 300px;
 }

 .notData img {
   width: 274px;
   margin: 50px auto 16px auto;
   display: block;
 }

 .notData p {
   text-align: center;
   color: #8F90A6;
 }

 .toastBox {
   display: none;
   position: fixed;
   top: 50%;
   left: 0;
   text-align: center;
   width: 100%;
   transform: translateY(-50%);
   z-index: 999;
 }

 .toastBox .box {
   display: inline-block;
   padding: 8px 24px;
   color: white;
   font-size: 16px;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 3px;
   letter-spacing: 1px;
   cursor: default;
 }

 .jc-modal-button button {
   cursor: pointer;
 }

 .jc-paging ul li {
   padding: 0;
 }

 /*骨架屏*/
 .chiaroscuro {
   background: #e5e5e5 !important;
   animation-duration: 1.5s;
   animation-name: blink;
   animation-iteration-count: infinite;
 }

 /* footer */
 .course_footer {
   width: 100%;
   background: #303133;
   text-align: center;
   padding-top: 36px;
   padding-bottom: 32px;
 }

 .course_footer .wrap_img {
   opacity: 1;
 }

 .course_footer a {
   font-size: 12px;
   transition: color 0.5s;
 }

 .course_footer .wrap_img img {
   width: 178px;
 }

 .course_footer .p1 {
   margin: 12px 0px;
 }

 .course_footer a {
   font-size: 12px;
   transition: color 0.5s;
 }

 .course_footer a:hover {
   color: #fff;
   opacity: 1;
 }

 .text-overflow {
   overflow: hidden;
   /* 超出一行文字自动隐藏 */
   text-overflow: ellipsis;
   /* 文字隐藏后添加省略号 */
   white-space: nowrap;
   /* 强制文本不换行 */
 }

 /* footer */
 @keyframes blink {
   0% {
     opacity: .4;
   }

   50% {
     opacity: 1;
   }

   100% {
     opacity: .4;
   }
 }