body,html{
    font-size: 16px;
    background-color: #f8f9fa;

    font-weight: normal;
}
input::-webkit-input-placeholder {
    color: #999;
}
input::-moz-placeholder {
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}
input::-webkit-input-placeholder {
    color: #999;
}
input::placeholder {
    color: #999;
}

a {text-decoration:none; color: #333}
a:link { text-decoration:none;}
a:active{text-decoration:none; }
a:visited {text-decoration:none;}
a:hover { text-decoration:none;color: #111}
p,li,ul,dt,dd{ margin : 0px ;padding: 0px }
input,button,select,textarea{outline:none}
ul,li{ list-style: none; }
div{
    box-sizing: border-box;
}

.fwb{ font-weight: bold; }
.fz-12{ font-size: 12px; }
.fz-13{ font-size: 13px; }
.fz-14{ font-size: 14px; }
.fz-15{ font-size: 15px; }
.fz-16{ font-size: 16px; }
.fz-17{ font-size: 17px; }
.fz-18{ font-size: 18px; }
.fz-19{ font-size: 19px; }
.fz-20{ font-size: 20px; }
.fz-21{ font-size: 21px; }
.fz-22{ font-size: 22px; }
.fz-23{ font-size: 23px; }
.fz-24{ font-size: 24px; }
.fz-25{ font-size: 25px; }
.fz-26{ font-size: 26px; }
.fz-27{ font-size: 27px; }
.fz-28{ font-size: 28px; }

.t_hide{ overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }

.bg_f2{ background-color: #f2f2f2; }
.color_697{ color: #6970FF; }
.color_697:hover { color:#6970FF  }

.shadow-md{
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
}


.color-orange{

    color: #ff6633
}
.border-bottom-50{
    border-bottom: 1px solid rgba(225,225,225,0.5)
}
.border-50{
    border: 1px solid rgba(225,225,225,0.5)
}
.border-right-50{
    border-right: 1px solid rgba(225,225,225,0.5)
}
.border-left-50{
    border-left: 1px solid rgba(225,225,225,0.5)
}
.border-top-50{
    border-top: 1px solid rgba(225,225,225,0.5)
}
.shadow-md{
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
}
.rounded-lg {
    border-radius: 5px;
}
.overflow-hidden{
    overflow: hidden;;
}

.btn-save { background:#6970FF; color: #fff;  }
.btn-save:hover { background:#6970FF; color: #fff;  }

.btn-save-outline { border:1px #6970FF solid; background: none; color: #6970FF;  }
.btn-save-outline:hover {  border:1px #6970FF solid; background: none; color: #6970FF;  }


@media screen and (max-width: 880px) {


    body{
        font-size: 14px;
    }

}

.flex-1{ flex: 1;}
.text-333{ color: #333;}
.text-999{ color: #999;}
.text-666{ color: #666;}
.text-ccc{ color: #ccc;}
.text-ddd{ color: #ddd;}
.text-red { color:#FF4A50; }
.text-orange { color:#FF771A;}


.bg-orange { background-color: #FF771A;}
.bg-purple { background: linear-gradient(to right, #6c79f9 , #495aff);}
.bg-darkblue { background-color: #4b4f74 !important;}

.w2020 { width: 20px;  height: 20px;}
.w2525 { width: 25px;  height: 25px;}
.w3030{ width: 30px; height: 30px;}
.w3232{ width: 32px; height: 32px;}
.w3535{ width: 35px; height: 35px;}
.w4040{ width: 40px; height: 40px;}
.w5050{ width: 50px; height: 50px;}
.w6060{ width: 60px; height: 60px;}
.w7070{ width: 70px; height: 70px;}
.w100100{ width: 100px; height: 100px;}
.w150150{ width: 150px; height: 150px;}
.boc-f0{ border-color: #f0f0f0 !important;}
.boc-000{ border-color: #000 !important;}
.boc-333{ border-color: #333 !important;}
.boc-red { border-color: #dc3545 !important;}

.picwork {
    box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .1);
    transition: 0.3s;
}
.picwork:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);

}

.a-j-c{ align-items: center; justify-content: center;}


.table-active, .table-active > th, .table-active > td{ background-color: rgba(0, 0, 0, 0.03) !important;}

.scont_nav a{ display: inline-block; padding: 0 10px 10px; border-bottom: 2px rgba(0,0,0,0) solid; margin-right: 10px; color: #333; font-size: 12px; }
.scont_nav a.on{ border-color: #333; }


.ui-sortable-helper{ box-shadow: 1px 1px 4px #333 !important; background: #fff; }


.layui-layer-btn0{ background: #333 !important; color: #fff !important; font-size: 12px !important; border-color: #333 !important;  }
.layui-layer-btn1{ font-size: 12px !important; }



.btn-dark:hover{ background-color: #777 !important; border-color: #777 !important; }
.btn-dark:not(:disabled):not(.disabled):active{  background-color: #000 !important; border-color: #000 !important;  }


.table thead th{ font-weight: normal; font-size: 14px; }

.table .thead-light th{ padding: 0.7rem; background-color: #eee; }

.table th, .table td{ vertical-align: middle; font-size: 14px; }


.shadow-move{  box-shadow:0 1px 2px 0 rgba(0,0,0,.01), 0 6px 12px 0 rgba(0,0,0,.06);transition:transform .3s ease-in-out;}
.shadow-move:hover{  box-shadow:0 4px 8px 0 rgba(0,0,0,.06), 0 20px 40px 0 rgba(0,0,0,.06);transform:translate3d(0,-8px,0);}


.lesson_card_v2{  display: block;   }

.lesson_card_v2 .head{ position: relative; }
.lesson_card_v2 .head .tip_1{  position: absolute; top: 7px; right: 58px; display: block; color: #fff; font-size: 12px; border-radius: 4px; background: #000; padding: 2px 8px;  }
.lesson_card_v2 .head .tip_2{ position: absolute; top: 7px; right: 8px; display: block; color: #fff; font-size: 12px; border-radius: 4px; background: #cc3333; padding: 2px 8px;  }
.lesson_card_v2 .head .timetip{ font-size: 12px; left: 0; right: 0; bottom: 0; height: 30px; line-height: 30px; color: #fff; background: rgba(0,0,0,0.5); text-align: center; position: absolute; }

.lesson_card_v2 .showtitle { display: flex; align-items: center; padding: 12px; }
.lesson_card_v2 .showtitle > span{  border-radius: 5px; padding: 1px 8px; color: #fff; font-size: 12px; margin-right: 10px; font-weight: 200; }
.lesson_card_v2 .showtitle > p { flex:1; overflow: hidden; word-break: break-all;white-space: nowrap;text-overflow: ellipsis; font-size: 16px; color: #222; font-weight: bold;}
.lesson_card_v2 .showtitle .banhui{ background-color: #e99854; }
.lesson_card_v2 .showtitle .shouhui{ background-color: #9bc143;  }
.lesson_card_v2 .showtitle .ipad{ background-color: #6d7ced;  }

.lesson_card_v2 .timetip2{ background: #ECFCE3; height: 32px; margin: 10px; color: #5A6E46; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.lesson_card_v2 .showprice { padding: 0 12px 12px; border-bottom: 1px #f0f0f0 solid; display: flex; justify-content: space-between;}
.lesson_card_v2 .showprice .shichang { font-size: 12px; color: #666;}
.lesson_card_v2 .showprice .price { font-size: 16px; color: #f94c47;}

.lesson_card_v2 .showteacher { display: flex; padding: 12px;}
.lesson_card_v2 .showteacher .face { width: 40px; height: 40px; border-radius: 100%;}
.lesson_card_v2 .showteacher .info { padding-left: 20px; display: flex; flex-direction: column; width: 80%;}
.lesson_card_v2 .showteacher .info .name { font-size: 14px; color: #999;}
.lesson_card_v2 .showteacher .info .intro { font-size: 12px; color: #999;overflow: hidden; word-break: break-all;white-space: nowrap;text-overflow: ellipsis; width:100%;}