.words-gray{text-align: justify; color: #a699a6}
.words-red{text-align: justify;color: #f00;}
.words-hot{text-align: justify;color: #00af66;}
.font-bold{font-weight: bold;color: #000;}


.product-tit{padding: 8px 5px;width: 130px;text-align: center;background-color: #E2EAED;color: #000;margin: 0px !important}
.product-box{border-top:1px solid #ccc;min-width: 1300px;}
.product-menu{width: 18%;height: 700px;border-right: 1px solid #ccc;}
.product-setting{position: relative; padding: 0 10px; width: 32%;height: 700px;border-right: 1px solid #ccc;display: none;}
.product-class{padding: 0 10px;width: 50%;height: 700px;}



.product-menu{padding-top: 14px;}
.product-menu dl{padding-left: 30px;line-height: 26px;}
.product-menu dt{position: relative;padding-left: 18px;cursor: pointer;}
.product-menu dt:before{position: absolute;content: "";left: 0;top:50%;border-width: 6px;border-color: #ccc transparent transparent transparent;border-style: solid;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.product-menu .on:before{border-color: transparent transparent transparent #ccc ;}
/*.product-menu dd{padding-left: 32px;cursor: pointer;}*/
/*.product-menu dd:hover{color:#00af66;}*/
/*.product-menu dd.active{color: #00af66;}*/
.product-menu a{padding-left: 32px;cursor: pointer;}
.product-menu a:hover{color:#00af66;}
.product-menu a.active{color: #00af66;}

.product-edit{width: 100px;text-align: center;line-height: 28px; border:1px solid #ccc;border-radius: 3px;background-color: #fff; display: none;}
.product-edit li{cursor: pointer; border-bottom: 1px solid #ccc;}
.product-edit li:last-child{border-bottom: 0;}
.product-edit li:hover{background-color: #00af66;color: #fff;}

.setting-title{margin-top: 10px; line-height: 30px;}
.setting-title span{font-size: 18px;font-weight: bold;color: #000;}
.setting-title .preview,.add-class{color: #00af66;cursor: pointer;}
.setting-title label{margin-right: 20px;display: none;}
.setting-title label input{margin:0 5px 1px 0;vertical-align: middle}



.show-content{margin-top: 20px;}
.show-content em{display: inline-block;margin-left: 5px; width: 16px;height: 16px;font-size: 12px; text-align: center;line-height: 16px;font-weight: bold; background: #00af66;color: #fff;border-radius: 50%;cursor: pointer;}
.show-btn{position: relative; width: 50px;height: 16px;background-color: #e4e4e4;border-radius: 10px;cursor: pointer;}
.show-btn span{position: absolute; width: 20px;height: 20px;top: 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%); border-radius: 50%;}
.show-btn span.on{right: 8px;background-color: #00af66;}
.show-btn span.off{left: 8px;background-color: #ff6666;}
.set-user{margin-top: 10px; padding:5px 0; border:1px solid #ccc;}
.set-user label{padding-left: 8%; width: 50%;line-height: 30px;}
.set-user input,.add-class-box input{margin-right: 5px;margin-bottom: 3px; width: 14px;height: 14px;vertical-align: middle; border:1px solid #ccc;border-radius: 0;}
.show-content p.words-red{margin-top: 10px;}

.grade-name{margin-bottom: 10px; line-height: 30px; border-bottom: 1px solid #ccc;}
.class-name,.add-class-box label{margin:0 5px 10px 0; padding-left:5px;min-width: 114px;line-height: 24px;}
.class-name{ background-color: #f2f2f2;}
.class-name:hover{background-color: rgba(0,175,102,.2);}
.class-name em{width: 24px;font-size: 20px; text-align: center;cursor: pointer;}
.product-class dl{margin-top: 14px;}


.layer{position: fixed;left: 0;top:0;width: 100%;height: 100%;z-index: 6;display: none;}
.layer-shoadow{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.6);}
.layer-content{position: absolute;left: 50%;top:50%;width: 550px;height: 260px;transform:translate(-50%,-50%);background: #fff;}
.layer .layer-title{padding-left: 10px; height:36px;line-height: 36px;border-bottom: 1px solid #ccc;}
.layer .layer-title em{width: 48px;font-size: 30px;text-align: center;cursor: pointer;}
.layer-rename .layer-content,.layer-delete .layer-content{width: 360px;height: 200px;}
.new-name{margin-top: 30px;text-align: center;}
.new-name input{width: 200px;height: 30px;padding-left: 5px;}
.layer-btn{text-align: center;}
.layer-btn a{padding:5px 20px; margin-right: 10px;text-decoration: none; background-color: #00af66;color: #fff;}
.layer-btn a:hover{background-color: #048a52;}
.layer-btn button{padding:5px 20px; margin-right: 10px;text-decoration: none; background-color: #00af66;color: #fff;}
.layer-btn button:hover{background-color: #048a52;}
.layer-btn .cancel{margin-right: 0; background-color: #999;}
.rename-btn{margin-top: 60px;}
.layer-delete .new-name{margin-top: 50px;}

.product-preview{position: absolute;padding:0; left: 100%;top:0;width: 0;height: 700px;overflow: auto; background-color:#fff;border-left: 1px solid #ccc;}
.product-preview img{max-width: 100%;}
.product-preview h3{margin-top: 6px;line-height: 30px; font-size: 20px;border-bottom:1px solid #ccc;}
.close-tab{width: 30px;font-size: 30px; text-align: center;cursor: pointer;}
.tab-track .introduce{margin-top: 30px;}
.track-img {margin-top: 10px;}
.track-img img{max-width: 50%;vertical-align: middle;}
.introduce-content p{line-height: 20px;margin-top: 14px;}
.product-preview>div{display: none;}
.product-preview>div h3:first-child{margin-bottom:10px;}

.introduce-content h4{margin-top:10px;}
.introduce-content div p{padding-left: 52px;}
.sort-num{display: inline-block;width: 52px;font-weight: bold;color: #000;}



.student-words{margin-top:14px; text-align: center;}
.students-dis{width: 100%;}
.students-dis td{padding-left: 5px;height: 30px; border:1px solid #ccc;}

.grade-btn{margin-top: 30px;}
.add-class-box{display: none;}

.set-top-kps{margin-top: 10px; padding:5px 0; border:1px solid #ccc;padding-left: 6px;}
.set-top-kps label{padding-left: 8%;width:20%;line-height: 30px;padding-left:0px!important}
.set-top-kps input,.add-class-box input{margin-right: 5px;margin-bottom: 3px; width: 14px;height: 14px;vertical-align: middle; border:1px solid #ccc;border-radius: 0;}

.div-hide{display: none;}

.en-writing-input{
    width:60px!important;
    height: 30px!important;
}

.input-item {
    line-height: 30px
}