juipvue/static/css/diy.css

@charset "UTF-8";
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.right_side_content .template-content {
  padding: 40px 40px 60px 40px;
  position: relative;
  padding-left: 153px;
}
.template-content .tip-box {
  width: 100%;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  border: 1px dashed #ccc;
  color: rgba(41, 43, 51, 0.6);
}
.template-content > div:not(:last-child) {
  margin-right: 40px;
}
.template-content > .module-panel {
  width: 90px;
  position: absolute;
  left: 260px;
  max-height: 500px;
  overflow-y: auto;
}
::-webkit-scrollbar{
	width: 5px;
}
::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background-color: rgba(0,0,0,.06);
}
.template-content > .module-panel > .desc {
  cursor: default;
  font-size: 12px;
  font-family: "PingFang SC Regular";
  color: rgba(41, 43, 51, 0.6);
  margin-bottom: 18px;
}
.template-content > .module-panel .module-item {
  width: 73px;
  height: 73px;
  background-color: rgba(0, 182, 242, 0.1);
  border-radius: 5px;
  margin-bottom: 15px;
  cursor: pointer;
}
.template-content > .module-panel .module-item:last-child {
  margin: 0;
}
.template-content > .module-panel .module-item.selected {
  background-color: #00b6f2;
}
.template-content > .module-panel .module-item.selected > p {
  color: #fff;
}
.template-content > .module-panel .module-item > p {
  font-size: 14px;
  line-height: 73px;
  color: #00B6F2;
  text-align: center;
}
.template-content > .module-panel .two-line-desc {
  padding-top: 20px;
}
.template-content > .module-panel .two-line-desc > p {
  line-height: 20px;
}
.template-content > .display-panel {
  border: 1px solid #ddd;
  width: 377px;
  position: relative;
  background: #F6F6F6;
  margin-left: 100px;
}
.template-content > .display-panel > div {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.template-content > .display-panel .header {
  height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px 17px 0;
  background-color: #22292C;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.template-content > .display-panel .header .cross-icon {
  width: 14px;
  height: 14px;
  background: url("../img/store/white-cross.png") no-repeat center/cover;
}
.template-content > .display-panel .header .ellipsis-icon {
  width: 16px;
  height: 4px;
  background: url("../img/store/white-ell.png") no-repeat center/cover;
}
.template-content > .display-panel .header > p {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}



.template-content > .display-panel .banner-box {
  padding-bottom: 5px;
}
.template-content > .display-panel .banner-box .banner-container {
  width: 375px;
  height: 210px;
}
.template-content > .display-panel .imagescontent-box .images-container {
  width: 375px;
  height: 139px;
}
.template-content > .display-panel .imagescontent-box .images-container img{
  width: 100%;
  height: 119px;
  padding: 0 10px;
}

.template-content > .display-panel .banner-box .banner-container > img {
  width: 100%;
  height: 100%;
}
.template-content > .display-panel .banner-indicator {
  width: 100%;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 8px;
}
.template-content > .display-panel .banner-box .banner-indicator .indicator {
  width: 4px;
  height: 4px;
  margin: 1px 5px 1px 0;
  border-radius: 50%;
  background-color: #aaa;
}
.template-content > .display-panel .banner-box .banner-indicator .indicator:first-child {
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.5);
}

.template-content > .display-panel .banner-box .showBig,.template-content > .display-panel .banner-box .showSmall{
  display: flex;
  width: 800px;
}
.template-content > .display-panel .banner-box .showSmall .banner-container{
  width: 321px;
  height: 180px;
  margin: 0 0 0 26px;
}
.template-content > .display-panel .banner-box .showSmall .banner-container img,#display_images{
  border-radius: 5px;
}



.template-content > .display-panel .search-box {
  padding: 5px 15px;
}
.template-content > .display-panel .search-box .search {
  width: 100%;
  height: 30px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.template-content > .display-panel .search-box .search .search-icon {
  width: 16px;
  height: 16px;
  background: url("../img/store/search.png") no-repeat center/cover;
}
.template-content > .display-panel .search-box .search .search-text {
  line-height: 30px;
  color: rgba(41, 43, 51, 0.4);
  font-size: 14px;
}
.template-content > .display-panel .mui-slider-indicator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.template-content > .display-panel .mui-table-view::before,
.template-content > .display-panel .mui-table-view::after {
  display: none;
}
.template-content > .display-panel .listcontent-box {
  padding: 15px 0;
}

.template-content > .display-panel .listcontent-box.withtitle {
  padding: 0 0 15px 0;
}

.template-content > .display-panel .imagescontent-box {
  padding: 15px 0;
}

.template-content > .display-panel .imagescontent-box.withtitle {
  padding: 0 0 15px 0;
}
/* .template-content > .display-panel .listcontent-box > */
.course-box,.live-box,.images-box{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 50px;
  /* padding: 0 15px; */
  background-color: #fff;
}
/* .template-content > .display-panel .listcontent-box  */
 .course-box > p,.live-box > p,.images-box > p {
  font-size: 18px;
  line-height: 50px;
  color: #292b33;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.template-content > .display-panel .imagescontent-box > .images-list > .images-item {
  width: calc(49% - 9px);
  margin: 4px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: wrap;
  padding: 0 6px;
}
.template-content > .display-panel .imagescontent-box > .images-list > .images-item > img{
  width: 170px;
  max-height: 96px;
  border-radius: 5px;
}

/* .template-content > .display-panel .listcontent-box >  */
.course-box > a ,.live-box a,.live-box-more a,.course-box-more a,.images-box a,.images-box-more a{
  font-size: 12px;
  color: rgba(41, 43, 51, 0.4);
  line-height: 46px;
}

/*直播开始*/


.template-content > .display-panel .listcontent-box > .course-list,.livecontent-box > .live-list,.imagescontent-box > .images-list{
  padding-bottom: 15px;
  width: 98%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between;
}
.livecontent-box >.live-list > li {
  width: calc(49% - 10px);
  margin: 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: wrap;
  padding: 0 6px;


  /*height: 60px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 15px;
  margin-bottom: 15px;*/
}
.course-list > li:last-child,.livecontent-box > .live-list>li:last-child,.imagescontent-box > .images-list>li:last-child {
  margin: 0;
}
.live-list > li .teacher-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.live-list > li .teacher-box > img{
  width: 170px;
  height: 95px;
  border-radius: 5px;
}
.live-list > li .teacher-box .live-time-box{
  width: 100%;
  position: absolute;
  display: flex;
  font-size: 14px;
  bottom: 0;
  justify-content: space-between;
  background: linear-gradient(rgba(87,87,87,0),rgba(0,0,0,.5));
  padding:0 10px;
  border-radius:5px;
}
.live-list > li .teacher-box .live-state.liveback{
  background:#0ed646;
}
.live-list > li .teacher-box .live-state.living{
  background:#0486FE;
}
.live-list > li .teacher-box .live-state.livewait{
  background:#F56C6C;
}
.live-list > li .teacher-box .live-state.liveend{
  background:#CCCCCC;
}
.live-list > li .teacher-box .live-state{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 50px;
  height: 14px;
  line-height: 14px;
  border-radius: 7px;
  text-align: center;
  color: #FFFFFF;
  font-size: 10px;
}
.live-list > li .content {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 60%;
  flex: 1 0 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 6px;
  height: 47px;
}
.livecontent-box .live-list > li .content > p {
  width: auto;
  font-size: 14px;
  margin: 0;
  margin-bottom: 5px;
  color: #292b33;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.course-list > li .content > span,.live-list > li .content > span {
  width: 210px;
  font-size: 12px;
  color: rgba(41, 43, 51, 0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.course-list > li .content > i,.live-list > li .content > i {
  width: 100%;
  float: left;
  font-size: 12px;
  font-style: normal;
  color: rgba(41, 43, 51, 0.4);
}
.live-list > li .price {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  color: #00B6F2;
  font-size: 16px;
  text-align: right;
  margin-top: -30px;
}
.live-item .teacher-box .live-time-main{
  color: #FFF;
  font-size: 10px;
  line-height: 23px;
}
.live-item .teacher-box .live-price{
  color: #FFF;
  font-weight: 400;
}
/*直播结束*/


.template-content > .display-panel .border-box {
  padding: 5px 0;
}
.template-content > .display-panel .border-box .border-light {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.template-content > .display-panel .border-box .border-heavy {
  height: 12px;
  background-color: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.03);
}
.template-content > .display-panel .text-box {
  padding: 60px;
  line-height: 1.5em;
}
.template-content > .display-panel .text-box > *:not(:last-child) {
  margin-bottom: 15px;
}
.template-content > .display-panel .text-box img {
  max-width: 100%;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .template-content > .display-panel .border-light, .template-content > .display-panel .border-heavy {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3) {
  .template-content > .display-panel .border-light, .template-content > .display-panel .border-heavy {
    -webkit-transform: scaleY(0.33);
    transform: scaleY(0.33);
  }
}
.template-content > .display-panel .grazy_worker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px 0;
  background: #F5F5F5;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 0 50px 0;
  position: relative;
}
.template-content > .display-panel .grazy_worker i {
  font-size: 12px;
  color: rgba(41, 43, 51, 0.2);
}
.template-content > .display-panel .menuNav {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 102;
  background: #fbfbfb;
  border-top: 1px solid rgba(41, 43, 51, 0.12);
}
.template-content > .display-panel .menuNav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.template-content > .display-panel .menuNav ul li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 20%;
  flex: 1 1 20%;
  height: 50px;
}
.template-content > .display-panel .menuNav .navcontent {
  width: 100%;
  height: 100%;
  text-align: center;
}
.template-content > .display-panel .menuNav .navcontent a {
  float: left;
  width: 100%;
  height: 100%;
  padding-top: 5px;
}
.template-content > .display-panel .menuNav .navcontent a .bottom-tab-icon {
  height: 24px;
  display: block;
  margin: 0 auto;
}
.template-content > .display-panel .menuNav .navcontent a .index-icon {
  background: url("../img/store/1.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .navcontent a .course-icon {
  background: url("../img/store/2.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .navcontent a .quiz-icon {
  background: url("../img/store/3.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .navcontent a .discuss-icon {
  background: url("../img/store/4.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .navcontent a .info-icon {
  background: url("../img/store/5.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .navcontent a span {
  float: left;
  width: 100%;
  text-align: center;
  color: rgba(41, 43, 51, 0.4);
  font-size: 12px;
}
.template-content > .display-panel .menuNav .NavActive a .index-icon {
  background: url("../img/store/1a.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .NavActive a .course-icon {
  background: url("../img/store/2a.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .NavActive a .quiz-icon {
  background: url("../img/store/3a.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .NavActive a .discuss-icon {
  background: url("../img/store/4a.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .NavActive a .info-icon {
  background: url("../img/store/5a.png") no-repeat center/24px;
}
.template-content > .display-panel .menuNav .NavActive a span {
  color: #292b33;
}
.template-content > .display-panel .editable {
  cursor: pointer;
  background: #FFF;
  margin-top: 0;
   overflow: hidden;
}
.template-content > .display-panel .mask {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.template-content > .setting-panel {
  width: 412px;
  padding: 24px 20px;
  background-color: #FAFAFA;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: fixed;
  right: 50px;
  top: 300px;
  -webkit-transition: top 1s;
  transition: top 1s;

}
.template-content > .setting-panel .panel-name {
  font-size: 18px;
  color: #292b33;
  margin-bottom: 18px;

}
.template-content > .setting-panel .banner-setting .setting-item, .images-setting .setting-item {
  padding: 15px;
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  position: relative;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box, .images-setting .setting-item .img-box{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 106px;
  flex: 0 0 106px;
  height: 60px;
  margin-right: 15px;
  position: relative;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box input, .images-setting .setting-item .img-box input {
  width: 100%;
  height: 100%;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask,  .images-setting .setting-item .img-box > .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FAFAFA;
  cursor: pointer;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > p, .images-setting .setting-item .img-box > .mask > p {
  text-align: center;
  line-height: 60px;
  color: #00b6f2;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box ,.images-setting .setting-item .img-box > .mask > .img-add-box {
  display: none;
  width: 100%;
  height: 100%;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box > img , .images-setting .setting-item .img-box > .mask > .img-add-box > img {
  width: 100%;
  height: 100%;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box::after,.images-setting .setting-item .img-box > .mask > .img-add-box::after{
  content: "修改";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  line-height: 60px;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
}
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box:hover::after, .images-setting .setting-item .img-box > .mask > .img-add-box:hover::after {
  display: block;
}
.template-content > .setting-panel .banner-setting .add-btn, .images-setting .add-btn {
  height: 40px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #F5F5F5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 18px;
  cursor: pointer;
}
.template-content > .setting-panel .banner-setting .add-btn > .add-icon, .images-setting .add-btn > .add-icon {
  width: 20px;
  height: 20px;
  background: url("../img/store/add.png") no-repeat center/cover;
}
.template-content > .setting-panel .banner-setting .add-btn > p, .images-setting .add-btn > p {
  font-size: 14px;
  line-height: 14px;
  color: rgba(41, 43, 51, 0.6);
}
.template-content > .setting-panel .banner-setting .info p , .images-setting .info p {
  font-size: 12px;
  line-height: 17px;
  color: rgba(41, 43, 51, 0.4);
}
.template-content > .setting-panel .listcontent-setting {
/*   display: none; */
}
.template-content > .setting-panel .listcontent-setting h4 ,.livecontent-setting h4 {
  font-weight: 400;
  color: #292b33;
  font-size: 18px;
  margin-bottom: 18px;
}
.template-content > .setting-panel .listcontent-setting > .course-setting,.livecontent-setting > .live-setting {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.template-content > .setting-panel .listcontent-setting > .course-setting .choose-course > p,.livecontent-setting > .live-setting .choose-live > p {
  cursor: pointer;
  font-size: 14px;
  color: #00B6F2;
  line-height: 18px;
}
.template-content > .setting-panel .listcontent-setting > .caption-setting,.livecontent-setting > .caption-setting {
  padding-top: 24px;
}
.template-content > .setting-panel .listcontent-setting > .caption-setting > .row:first-of-type,.livecontent-setting > .caption-setting > .row:first-of-type {
  margin-bottom: 0;
}
.template-content > .setting-panel .listcontent-setting > .caption-setting .caption-content > input,.livecontent-setting > .caption-setting .caption-content > input,.more-url {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 15px;
  border: 2px solid #f5f5f5;
}
.more-url{

}
.template-content > .setting-panel .listcontent-setting > .caption-setting .info,.livecontent-setting > .caption-setting .info {
  padding-left: 78px;
  font-size: 12px;
  color: rgba(41, 43, 51, 0.4);
  margin: 8px 0 18px;
}
.template-content > .setting-panel .listcontent-setting .panel-name,.template-content > .setting-panel .livecontent-setting .panel-name {
  font-size: 14px;
  line-height: 18px;
  color: rgba(41, 43, 51, 0.6);
  margin-right: 22px;
  margin-bottom: 0;
}
.template-content > .setting-panel .listcontent-setting .row,.livecontent-setting .row {
  display: flex;
  align-items: center;
}
.template-content > .setting-panel .listcontent-setting .row:not(:last-child),.livecontent-setting .row:not(:last-child) {
  margin-bottom: 18px;
}
.template-content > .setting-panel .listcontent-setting .row > .content,.livecontent-setting .row > .content {
  overflow: visible;
  width: auto;
  flex: 1;
  flex-direction: row;
    justify-content: flex-start;
}
.template-content > .setting-panel .listcontent-setting .row > .content .select-box,.livecontent-setting .row > .content .select-box {
  background-color: #fff;
}
.template-content > .setting-panel .listcontent-setting .row > .content .select-box > .placeholder-box,.livecontent-setting .row > .content .select-box > .placeholder-box {
  color: rgba(41, 43, 51, 0.8);
}
.template-content > .setting-panel .listcontent-setting .row > .content .checkbox ,.livecontent-setting .row > .content .checkbox{
  width: 16px;
  height: 16px;
  border: 2px solid #f5f5f5;
  background-color: #fff;
  border-radius: 4px;
}
.template-content > .setting-panel .listcontent-setting .row > .content .checkbox.checked,.livecontent-setting .row > .content .checkbox.checked {
  border: 0;
  background: #00B6F2 url("../img/store/checked-tick.png") no-repeat center/8px 6px;
}
.template-content > .setting-panel .border-setting {
/*   display: none; */
}
.template-content > .setting-panel .border-setting > h4 {
  font-weight: 400;
  color: #292b33;
  font-size: 18px;
  margin-bottom: 18px;
}
.template-content > .setting-panel .border-setting > .row {
  display: flex;
  align-items: center;
}
.template-content > .setting-panel .border-setting > .row > .content {
  overflow: visible;
  width: auto;
  flex: 1;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box {
  background-color: #fff;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box > .placeholder-box {
  background-color: rgba(0, 0, 0, 0.05);
}
.template-content > .setting-panel .border-setting > .row > .content .select-box > .placeholder-box.light {
  height: 1px;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box > .placeholder-box.heavy {
  height: 12px;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item {
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item > div {
  background-color: rgba(0, 0, 0, 0.05);
  flex: 1;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item .light-weight {
  height: 1px;
}
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item .heavy-weight {
  height: 12px;
}
.template-content > .setting-panel .border-setting .panel-name {
  font-size: 14px;
  line-height: 18px;
  color: rgba(41, 43, 51, 0.6);
  margin-right: 22px;
  margin-bottom: 0;
}
.template-content > .setting-panel .text-setting {
  display: none;
  line-height: 1.5em;
}
.template-content > .setting-panel .text-setting img {
  max-width: 100%;
}
.template-content > .setting-panel .link-box {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.template-content > .setting-panel .link-box > p {
  font-size: 14px;
  line-height: 20px;
  color: rgba(41, 43, 51, 0.8);
  margin-bottom: 10px;
}
.template-content > .setting-panel .link-box .select-box {
  width: 100%;
  height: 30px;
  border: 2px solid #F5F5F5;
  padding: 6px 3px 6px 8px;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}
.template-content > .setting-panel .link-box .select-box > .slide-box {
  display: none;
  position: absolute;
  z-index: 1;
  top: 33px;
  left: 0;
  width: 100%;
  padding: 5px 0;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.template-content > .setting-panel .link-box .select-box > .slide-box > .slide-item {
  width: 100%;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  color: rgba(41, 43, 51, 0.8);
  padding-left: 10px;
  cursor: pointer;
}
.template-content > .setting-panel .link-box .select-box > .slide-box > .slide-item:hover {
  background-color: #F2F2F2;
}
.template-content > .setting-panel .link-box .select-box.already-selected {
  border: 0;
  padding: 0;
}
.template-content > .setting-panel .link-box .select-box > .placeholder-box {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  font-size: 14px;
  line-height: 14px;
  color: rgba(41, 43, 51, 0.3);
  cursor: default;
}
.template-content > .setting-panel .link-box .select-box .slide-icon {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20px;
  flex: 0 0 20px;
  height: 20px;
  background: url("../img/store/gray_arrow@2x.png") no-repeat center/cover;
  cursor: pointer;
}
.template-content > .setting-panel .link-box .select-box .selected-box {
  background-color: #6897B1;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 200px;
  display: none;
}
.template-content > .setting-panel .link-box .select-box .selected-box > p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 12px;
  color: #fff;
  padding: 9px 26px 9px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.template-content > .setting-panel .link-box .select-box .selected-box > .cross-icon {
  width: 33px;
  height: 30px;
  background: url("../img/store/white-close.png") no-repeat center/14px;
  cursor: pointer;
}
.template-content .editing {
  cursor: move;
}
.template-content .editing .edit-btn {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 5px;
  background-color: #00B6F2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  border-radius: 50%;
}
.template-content .editing .moveup-btn {
  display: none;
  background-image: url("../img/store/up_arrow.png");
  right: 114px;
  cursor: pointer;
}
.template-content .editing .movedown-btn {
  display: none;
  background-image: url("../img/store/down_arrow.png");
  right: 80px;
  cursor: pointer;
}
.template-content .editing .draggable-btn {
  display: none;
  background-image: url("../img/store/drag_handle.png");
  right: 46px;
  cursor:move;
}
.template-content .editing.moveable .draggable-btn {
  display: block;
}
.template-content .editing .delete-btn {
  display: none;
  background-image: url("../img/store/delete.png");
  right: 12px; 
cursor:pointer;
}
.template-content .editing.editable:not(.banner-box) .delete-btn {
  display: block;
}
.template-content .editing.editable:not(.banner-box) .delete-btn, .template-content .editing.editable:not(.banner-box) .moveup-btn, .template-content .editing.editable:not(.banner-box) .movedown-btn {
  display: block;
}
.template-content .editing .editing-box {
  position: absolute;
  z-index: 1000;
  top: 0px;
  left: 0px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 98%;
 height: 98%; /*  94 */
  border: 3px dashed #00B6F2;
}

.dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
}

.operation-panel {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.05);
  position: fixed;
  z-index: 103;
  bottom: 0;
  left: 260;
  /* display: flex; */
  align-items: center;
  padding-left: 60px;
}
.operation-panel > .save-btn {
  width: 100px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #00B6F2;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 20px;
}
.operation-panel > .showqr {
  font-size: 14px;
  color: #00B6F2;
}
.row{
	margin:0;
}

.template-content {
  padding: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
 

.right_side_content .operation-panel {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.05);
  position: fixed;
  z-index: 1009;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 60px;
}
.operation-panel > .save-btn {
  width: 100px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #00B6F2;
  border-radius: 18px;
  cursor: pointer;
  margin-right: 20px;
}
.operation-panel > .showqr {
  font-size: 14px;
  color: #00B6F2;
  cursor: pointer;
}
::webkit-scrollbar {
	display: none;
}

.template-content > .display-panel .bundle-box {
  padding: 15px 0;
  height:250px;
}
.template-content > .display-panel .bundle-box.withtitle {
  padding: 0 0 15px 0;
}
.template-content > .display-panel .bundle-box > .bundle-title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding: 0 15px;
  background-color: #fff;
}
.template-content > .display-panel .bundle-box > .bundle-title-box > p {
  font-size: 18px;
  line-height: 50px;
  color: #292b33;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.template-content > .display-panel .bundle-box > .bundle-title-box > a {
  font-size: 12px;
  color: rgba(41, 43, 51, 0.4);
  line-height: 60px;
}

.template-content > .setting-panel .bundle-setting {
/*   display: none; */
}
.template-content > .setting-panel .bundle-setting h4 {
  font-weight: 400;
  color: #292b33;
  font-size: 18px;
  margin-bottom: 18px;
}
.template-content > .setting-panel .bundle-setting > .course-setting {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.template-content > .setting-panel .bundle-setting > .course-setting .row{
  align-items: center !important;
}
.template-content > .setting-panel .bundle-setting > .course-setting .choose-course > span {
  font-size: 15px;
  color: rgba(41, 43, 51, 0.8);
  margin-right: 10px;
}
.template-content > .setting-panel .bundle-setting > .course-setting .choose-course > p {
  cursor: pointer;
  font-size: 14px;
  color: #00B6F2;
  line-height: 18px;
}
.template-content > .setting-panel .bundle-setting > .caption-setting {
  padding-top: 24px;
}
.template-content > .setting-panel .bundle-setting > .caption-setting > .row:first-of-type {
  margin-bottom: 0;
}
.template-content > .setting-panel .bundle-setting > .caption-setting .caption-content > input {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 15px;
  border: 2px solid #f5f5f5;
}
.template-content > .setting-panel .bundle-setting > .caption-setting .info {
  padding-left: 78px;
  font-size: 12px;
  color: rgba(41, 43, 51, 0.4);
  margin: 8px 0 18px;
}
.template-content > .setting-panel .bundle-setting .panel-name {
  font-size: 14px;
  line-height: 18px;
  color: rgba(41, 43, 51, 0.6);
  margin-right: 22px;
  margin-bottom: 0;
}
.template-content > .setting-panel .bundle-setting .row {
  display: flex;
  align-items: center;
}
.template-content > .setting-panel .bundle-setting .row:not(:last-child) {
  margin-bottom: 18px;
}
.template-content > .setting-panel .bundle-setting .row > .content {
  overflow: visible;
  width: auto;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
}
.template-content > .setting-panel .bundle-setting .row > .content .checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #f5f5f5;
  background-color: #fff;
  border-radius: 4px;
}
.template-content > .setting-panel .bundle-setting .row > .content .checkbox.checked {
  border: 0;
  background: #00B6F2 url("../img/store/checked-tick.png") no-repeat center/8px 6px;
}
/*直播展示面板-直播list样式增加*/
.live-item{
	display: flex;
	align-items: center;
}
.live-item .content{
	
}
.live-item .content>span{
	display: block;
}
.live-item .content>span.live-price{
	color: #00B6F2;
}
.live-time-content{
	flex: 1;
	display: flex;
	justify-content:flex-end;
	align-items: center;
	align-self: flex-end;
}
.live-time-content i.live-time-icon{
	display: block;
	width: 11px;
  height: 11px;
  margin-right: 5px;
	background: url(../img/store/live-time@2x.png) no-repeat center/cover;
	background-size: 11px;
}
.live-time-content>span.live-time-main{
	font-size: 11px;
	color: rgba(41,43,51,.3);
}
.course-list > li .content >i{
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.course-list > li .content >i.tag-video{
  background: url(../img/store/tag-video@3x.png) no-repeat center/cover;
}
.course-list > li .content >i.tag-audio{
  background: url(../img/store/tag-audio@3x.png) no-repeat center/cover;
}


.banner-row{
  display: flex;

}
.banner-row .panel-name{
  margin-right: 22px;
  font-size: 14px!important;
  width: 20%;
  line-height: 26px;
}
.banner-row .content.show-method{
  width: 100%;
  overflow: inherit;
}
.banner-border{
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,.05);
}
.setting-box.banner-settingbox{
  margin-top: 20px;
}


.course-list > .smallList {
  height: 70px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 15px;
  margin-bottom: 15px;
}
 .course-list > .smallList .teacher-box {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 125px;
  flex: 0 0 125px;
  margin-right: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

 .course-list > .smallList .teacher-box > img{
  width: 125px;
  height: 70px;
  border-radius: 5px;
}

.course-list > .smallList .content > p{
  padding-left: 20px;
  width: auto;
  height: 40px;
  font-size: 14px;
  margin: 0;
  margin-bottom: 5px;
  color: #303133;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-list > .smallList .studybox{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;

}

.course-list > .smallList .studybox i{
  font-size: 12px;
  color:#C0C4CC;
}

.course-list > .smallList .studybox .price{
  font-size: 14px;
  color: #0486FE;
}

.bc {
  width: 98%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between;
}

 .bigList {
  width: calc(49% - 9px);
  margin: 4px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: wrap;
  padding: 0 6px;
}

.longItem {
    /* width: calc(49% - 9px); */
    margin: 4px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: wrap;
    padding: 0 6px;
  }

 .longItem .teacher-box {
    width: 100%;
    height: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  .longItem .teacher-box img{
    width: 100%;
    height: 200px;
    border-radius: 5px;
  }

.bigList .teacher-box {
  width: 100%;
  height: 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

 .bigList .teacher-box > img{
  width: 170px;
  height: 96px;
  border-radius: 5px;
}

.bigList .content > p{
  width: auto;
  height: 40px;
  font-size: 14px;
  margin: 0;
  margin-bottom: 5px;
  color: #303133;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bigList .studybox{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;

}

.course-list > .bigList .studybox i{
  font-size: 12px;
  color:#C0C4CC;
}

.course-list > .bigList .studybox .price{
  font-size: 14px;
  color: #0486FE;
}
.nav-section{
  height: 90px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #FFFFFF;
}
.nav-li img{
  display: block;
  width: 42px;
  height: 42px;
}
.nav-li p{
  color: #666666;
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
}
.template-content > .display-panel .bundle-box{
  overflow: hidden;
}
.template-content > .display-panel .bundle-box > .morebundle{
  float: left;
  width: 8000px;
}
.template-content > .display-panel .bundle-box > .onebundle{
  width: 100%;
  height: 260px;
  margin: 0 auto;
  padding:0 12px;
}
.template-content > .display-panel .bundle-box > .onebundle > li img{
  width:350px;
  height: 198px;
}
.template-content > .display-panel .bundle-box .content{
  margin: 4px 0;
}
.template-content > .display-panel .bundle-box .content h1{
  font-size: 14px;
  line-height: 20px;
  color: #303133;
}
.template-content > .display-panel .bundle-box .infoBox{
  display: flex;
  justify-content: space-between;
}

.template-content > .display-panel .bundle-box .infoBox .courseNum{
  font-size: 12px;
  color: #909399;
}
.template-content > .display-panel .bundle-box .infoBox .price{
  font-size: 14px;
  color: #0486FE;
}
.template-content > .display-panel .bundle-box .content .h1{
  font-size: 16px;
  font-weight: 400;
  color: rgb(41, 43, 51);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0px;
  overflow: hidden;
}

.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(1){
  float:left;
  width:270px;
  margin:0 15px;
}
.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(2){
  float:left;
  width:270px;
}

.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(1) img{
  width:270px;
  height: 152px;
}
.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(2) img{
  width:270px;
  height: 152px;
}
.template-content > .display-panel .bundle-box {
  padding: 15px 0;
  /*height: 269px;*/
}
.template-content > .display-panel .bundle-box.withtitle {
  padding: 0 0 15px 0;
}
.template-content > .display-panel .bundle-box > .bundle-title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding: 0 15px;
  background-color: #fff;
}
.template-content > .display-panel .bundle-box > .bundle-title-box > p {
  font-size: 18px;
  line-height: 50px;
  color: #292b33;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.template-content > .display-panel .bundle-box > .bundle-title-box > a {
  font-size: 12px;
  color: rgba(41, 43, 51, 0.4);
  line-height: 50px;
}


.course-title i{
  display: inline-block;
  width: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 16px;
  vertical-align: middle;
}
i.tag-audio{
  background: url(../img/store/tag-audio@3x.png) no-repeat center/cover;
}
i.tag-video{
  background: url(../img/store/tag-video@3x.png) no-repeat center/cover;
}
.course-title {
  color: #303133;
  overflow:hidden;
  position: relative;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size: 14px;
}
.course-title p{
  padding-left: 20px;
}