/* ==========================================
    basic style 基本样式
   ========================================== */

body {
    font-family: 'Arial', "Times New Roman", "Noto Sans SC";
    /*英文字体在前，中文在后*/
    -webkit-font-smoothing: antialiased;
}

input::-ms-clear {
    display: none;
}

input[type="password"]::-ms-reveal {
    display: none;
}

button {
    outline: none;
}

a {
    color: #333333;
    cursor: pointer;
}

.nav > li > a:focus {
    background-color: #fff;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

h5 a:hover {
    color: #111;
}

.clear-fr-fl {
    padding-right: 0;
    padding-left: 0;
}

.cursor-stop {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.form-control-feedback-in-col {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}

hr {
    /*margin-top: 15px;*/
    width: 100%;
    height: 0;
    border-top: 1px solid #ccc;
    font-size: 0;
    overflow: hidden;
}

.hr-gray {
    border-color: #d0d6d9;
}

.hr-midgray {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    border-color: #e6e6e6;
}

.hr-lightgray {
    border-color: #edf1f2;
}

ol,
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.replace-tip {
    text-align: center;
    margin-top: 10px;
    color: #a3a3a3;
    font-size: 16px;
}

.modal-header {
    background: #29b078;
    color: #fff;
    border-radius: 5px 5px 0 0;
}

/* ==========================================
    修改密码
   ========================================== */

input:focus {
    outline: none;
}

input:required:invalid {
    box-shadow: none;
}

a {
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

li {
    list-style: none;
}

.change_top {
    overflow: hidden;
    margin-top: 40px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    box-shadow: 1px 2px 3px #eeeded;
}

.change_top span {
    display: block;
    float: left;
    height: 132px;
    width: 132px;
}

.change_top img {
    max-width: 92px;
    max-height: 92px;
    margin: 20px;
}

.change_top h5 {
    text-indent: 18px;
    padding: 33px 0 22px 0;
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/people.png) no-repeat 132px 35px;
    font-size: 18px;
    color: #29b078;
}

.change_top p {
    font-size: 12px;
    color: #666;
}

@media screen and (max-width: 686px) {
    .change_top h5,
    .change_top p {
        width: 50%;
    }
}

.chang_sidebar {
    margin-top: 25px;
    margin-bottom: 60px;
    padding: 63px 0;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 1px 2px 3px #eeeded;
    background: #fff;
}

.chang_sidebar li {
    width: 75px;
    margin: 0 auto;
    line-height: 52px;
    text-indent: 15px;
    color: #29b078;
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/bt1.png) no-repeat left 21px;
}

.chang_sidebar li:hover,
.chang_sidebar li:focus,
.chang_sidebar li:active {
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/bt2.png) no-repeat left 20px;
}

.chang_sidebar li a {
    color: #29b078;
}

.chang_sidebar li a:link,
.chang_sidebar li a:visited {
    color: #ff650e;
}

.chang_sidebar li a:hover,
.chang_sidebar li a:focus,
.chang_sidebar li a:active {
    color: #ff650e;
}

.chang_sidebar li.activeST {
    color: #ff650e;
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/bt2.png) no-repeat left 21px;
}

.password_title {
    margin-bottom: 40px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 5px;
}

@media screen and (max-width: 991px) {
    .password_title {
        margin-top: -10px;
    }
}

.password_title h5 {
    padding-left: 40px;
    line-height: 72px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #e8e8e8;
}

.password_list span {
    display: inline-block;
    width: 61px;
    margin-top: 42px;
    margin-left: 52px;
    text-align: right;
    border: none;
}

.password_list input {
    width: 65%;
    margin-left: 12px;
    height: 38px;
    padding-left: 15px;
    font-size: 12px;
    border: 1px solid #dedcdc;
    border-radius: 3px;
}

button {
    border: 0;
}

.savebutton {
    display: block;
    clear: both;
    width: 65%;
    height: 43px;
    line-height: 43px;
    margin-top: 33px;
    margin-left: 128px;
    margin-bottom: 45px;
    background: #ff650e;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.errorTip {
    width: 65%;
    margin-left: 128px;
    color: red;
}

.errorBox {
    padding-top: 15px;
}

@media screen and (max-width: 553px) {
    .password_list {
        width: 260px;
        margin: 0 auto;
    }

    .password_list input,
    .savebutton {
        width: 100%;
        margin-left: 0;
    }

    .errorTip {
        width: 100%;
        margin-left: 0;
        color: red;
    }

    .password_list span {
        display: block;
        margin-left: 0;
        margin-bottom: 5px;
        text-align: left;
    }
}

.savebutton:hover {
    background: #fa5c03;
}

.savebutton[disabled] {
    cursor: not-allowed;
    opacity: .65;
}

.password_list .form-control-feedback {
    top: 37px;
    right: 14%;
    width: 34px;
    margin-top: 0;
    margin-left: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .password_list .form-control-feedback {
        right: 10%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .password_list .form-control-feedback {
        right: 20%;
    }
}

@media only screen and (max-width: 767px) {
    .password_list .form-control-feedback {
        right: 20%;
    }
}

@media screen and (max-width: 553px) {
    .password_list .form-control-feedback {
        top: 28px;
        right: 5px;
    }
}

/*��������*/

.user-home {
    width: 491px;
    padding-top: 50px;
    padding-bottom: 180px;
}

.user-message {
    width: 100%;
    margin-bottom: 25px;
    padding-left: 70px;
}

.user-message span {
    clear: both;
    font-size: 14px;
    padding-right: 15px;
}

.user-message span i {
    clear: both;
    display: inline-block;
    width: 28px;
}

.user-message input {
    clear: both;
    float: right;
    width: 342px;
    height: 38px;
    padding-left: 15px;
    border: 1px solid #dedcdc;
    border-radius: 3px;
}

.save {
    width: 342px;
    height: 40px;
    margin-top: 15px;
    margin-left: 78px;
    font-size: 18px;
    color: #fff;
    background: #ff650e;
}

.img-box {
    width: 342px;
    height: 342px;
    margin-left: 78px;
    border: 1px solid #dedcdc;
    border-radius: 3px;
}

.img-box img {
    max-width: 340px;
    max-height: 340px;
}

.user-autograph span {
    vertical-align: top;
}

.upload-file {
    position: relative;
    padding-left: 30px;
}

.upload-file button,
.upload-file .upload-img {
    z-index: 1;
    width: 110px;
    height: 38px;
    margin-right: 5px;
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/btn_bgimg_03.png) repeat-x;
    border: 1px solid #dedcdc;
    border-radius: 3px;
    cursor: pointer;
}

.upload-file button span {
    padding-right: 0;
}

.upload-file .upload-img {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 30px;
    margin: 0;
    filter: alpha(opacity:0);
    opacity: 0;
}

.user-message textarea {
    width: 342px;
    height: 150px;
    padding-left: 15px;
    border: 1px solid #dedcdc;
    border-radius: 3px;
    resize: none;
}

.user-message b {
    margin-left: 78px;
    font-size: 14px;
    font-weight: normal;
    color: #a0a0a0;
}

.user-message strong {
    margin-left: 78px;
    color: red;
}

@media only screen and (max-width: 567px) {
    .user-message strong {
        margin-left: 0;
    }

    .user-home {
        width: 342px;
        margin: 0 auto;
    }

    .user-message {
        padding-left: 0;
    }

    .user-message span i {
        display: none;
    }

    .user-message input,
    .user-message textarea {
        display: block;
        margin-top: 5px;
    }

    .user-message b,
    .img-box,
    .save {
        margin-left: 0;
        margin-top: 5px;
    }

    .upload-file .upload-img {
        left: 0;
    }
}

@media only screen and (max-width: 422px) {
    .user-home {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .user-message input,
    .user-message textarea,
    .user-message b,
    .img-box,
    .save {
        width: 100%;
    }

    .img-box img {
        width: 98%;
        margin: 0 auto;
    }
}

.user-mobile {
    margin-bottom: 5px;
}

.user-mobile b {
    margin-left: 0;
}

.user-nick span {
    position: relative;
    top: 8px;
}

.user-nick b {
    position: relative;
    top: 8px;
    margin-left: 0;
}

.user-autograph b {
    position: relative;
    margin-left: 0;
}

.user-img b {
    display: inline-block;
    margin-left: 0;
    vertical-align: top;
}

/* ==========================================
   加入班级
   ========================================== */

.select {
    position: relative;
    float: right;
    width: 317px;
    margin-top: 76px;
}

.select_1,
.select_2 {
    width: 159px;
    float: right;
    border: 5px solid #29b078;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.select_1 {
    position: absolute;
    left: 10px;
    border: 5px solid #e8e8e8;
    /*z-index: -1;*/
}

.select_2 {
    z-index: 1;
}

.select ol {
    float: right;
    margin-top: 34px;
    width: 254px;
}

.select ol li {
    display: inline-block;
    width: 90px;
    font-size: 18px;
    font-family: SimHei, sans-serif;
    color: #29b078;
    text-align: center;
}

ol li.step_1 {
    margin-left: -20px;
    color: #99cfb9;
}

ol li.step_2 {
    margin-left: 60px;
    color: #29b078;
}

.circle_1 {
    position: absolute;
    left: 80px;
    top: -5px;
    width: 20px;
    background: #76c0a1;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
}

.circle_2 {
    position: absolute;
    left: 230px;
    top: -5px;
    width: 20px;
    background: #29b078;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
}

.start {
    height: auto;
    clear: both;
    margin-top: 56px;
    margin-bottom: 76px;
    color: #999;
    border: 2px solid #f3f3f3;
    border-radius: 10px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.start h5 {
    font-size: 20px;
    margin-top: 34px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.start p {
    margin-top: 20px;
    font-size: 18px;
    tab-index: 36px;
    line-height: 32px;
}

.btn-start {
    padding-top: 68px;
    padding-bottom: 60px;
}

.startButton {
    display: block;
    width: 200px;
    background: #ff650e;
    margin: 0 auto;
    border-radius: 3px;
}

.start .startButton a {
    display: block;
    color: #fff;
    font-size: 18px;
    line-height: 46px;
    text-align: center;
}

.start button {
    border: 0;
}

.start-join {
    background: none;
}

.feedback {
    width: 95%;
    margin: 0 auto;
}

.feedback-num-teacher {
    cursor: pointer;
}

.start .orange {
    color: #ff650e;
}

.student-feedback {
    width: 550px;
    margin: 80px auto;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.student-feedback span {
    font-size: 22px;
    line-height: 40px;
    vertical-align: top;
}

.student-feedback img {
    float: left;
    margin-right: 25px;
}

@media only screen and (max-width: 530px) {
    .student-feedback {
        width: 95%;
        display: block;
        text-align: center;
    }

    .student-feedback img {
        float: none;
        margin: 10px 0;
    }

    .student-feedback-info {
        display: block;
    }

    .feedback-num {
        display: block;
        width: 100%;
    }
}

.feedback-box {
    width: 93%;
    margin: 55px auto 40px auto;
    border: 4px solid #e6e6e6;
    border-radius: 3px;
    overflow: hidden;
}

.start .join-swear {
    position: relative;
}

.start .join-swear-content {
    display: block;
    width: 100%;
    margin-top: 45px;
    background: #fdfcfc;
    border: 1px solid #cfcccc;
    border-radius: 5px;
    word-break: break-all;
    color: #333;
}

.start .join-swear-num {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.start .button {
    margin: 0 auto;
    text-align: center;
}

.start .giveup {
    display: inline-block;
    width: 134px;
    border: 1px solid #ff8049;
    background: #fff;
    margin-top: 49px;
    margin-right: 30px;
    margin-bottom: 42px;
}

@media screen and (max-width: 356px) {
    .start .giveup {
        margin-right: 0 !important;
    }
}

.start .giveup a {
    display: block;
    color: #ff8049;
    font-size: 18px;
    line-height: 41px;
    text-align: center;
}

.start .sure {
    display: inline-block;
    width: 136px;
    color: #fff;
    font-size: 18px;
    line-height: 43px;
    background: #ff650e;
    margin-top: 49px;
    margin-bottom: 42px;
}

/*选择班级（9期内容）*/

/*选择班级（9期内容）*/

/*选择班级（9期内容）*/

/*选择班级（9期内容）*/

/*.join-nav{*/

/*width:25%;*/

/*display: inline-block;*/

/*}*/

/*!*.join-nav:first-child{*!*/

/*!*margin-left:0;*!*/

/*!*}*!*/

/*.join-nav-step{*/

/*width:95%;*/

/*height:40px;*/

/*background: #fd7222;*/

/*display: inline-block;*/

/*}*/

/*.join-nav-arrow{*/

/*width:0;*/

/*height: 0;*/

/*margin-left:-35px;*/

/*border:20px solid white;*/

/*border-left:20px solid #c8c8c8;*/

/*display: inline-block;*/

/*}*/

/*.join-nav-option{*/

/*margin-top: 85px;*/

/*}*/

/*.join-border{*/

/*border:1px solid #c8c8c8;*/

/*cursor: pointer;*/

/*}*/

/*.active{*/

/*border:1px solid #29b078;*/

/*}*/

/*.active2{*/

/*float: right;*/

/*background: #29b078;*/

/*}*/

/*.join-select-bgd{*/

/*width:100%;*/

/*height:160px;*/

/*background-repeat: no-repeat;*/

/*}*/

/*.join-select-bgd1{*/

/*background-image: url("/images/join-select_01.png");*/

/*}*/

/*.join-select-bgd2{*/

/*background-image: url("/images/join-select_02.png");*/

/*}*/

/*.join-select-bgd3{*/

/*background-image: url("/images/join-select_03.png");*/

/*}*/

/*.join-nav-option td{*/

/*height: 90px;*/

/*font-size: 14px;*/

/*border:1px solid #c8c8c8;*/

/*}*/

/*.join-nav-option th{*/

/*line-height: 50px;*/

/*font-size: 16px;*/

/*text-align: center;*/

/*}*/

/*.join-nav-option table{*/

/*width:100%;*/

/*border: 1px solid #c8c8c8;*/

/*}*/

/*.join-td-even{*/

/*width:35%;*/

/*text-align: center;*/

/*font-weight: bold;*/

/*color: #29b078;*/

/*}*/

/*.join-td-odd{*/

/*width:65%;*/

/*padding-left: 20px;*/

/*}*/

/*.join-td-odd p{*/

/*margin-bottom: 0;*/

/*}*/

/*.join-bgd1{*/

/*background:#dfffed;*/

/*}*/

/*.join-bgd2{*/

/*background:#f1fff7;*/

/*}*/

/*.join-bgd3{*/

/*background:#fff5e2;*/

/*}*/

/*.join-bgd4{*/

/*background:#fef8ed;*/

/*}*/

/*.join-bgd5{*/

/*background:#fee1e4;*/

/*}*/

/*.join-bgd6{*/

/*background:#ffebed;*/

/*}*/

/*.join-next{*/

/*text-align: center;*/

/*}*/

/*.join-next button{*/

/*width: 130px;*/

/*margin: auto;*/

/*margin-top: 45px;*/

/*border-radius: 5px;*/

/*line-height: 45px;*/

/*background: #ff4b00;*/

/*color:white;*/

/*font-size: 18px;*/

/*}*/

/* ==========================================
    我的师兄
   ========================================== */

.teacher {
    min-height: 252px;
    font-size: 14px;
    font-family: "Noto Sans SC";
}

.tea-inline {
    display: inline-block;
}

.teacher-item {
    padding: 38px 0 25px 30px;
}

.teacher-tips {
    margin: 10px 30px 0 30px;
    padding-left: 10px;
    background: #fff1d9;
    line-height: 40px;
    font-size: 12px;
}

.tea-tips-f {
    position: relative;
    display: inline;
}

.icon_02 {
    margin: 0 5px;
}

.real-name-arrow {
    position: absolute;
    top: -13px;
    left: 15px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid #e2e2e2;
}

.real-name-arrow:after {
    content: "";
    position: absolute;
    top: -3px;
    left: -5px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid white;
}

.teacher-real-name {
    position: absolute;
    top: 30px;
    left: -7px;
    opacity: 1;
    width: 120px;
    padding: 0 10px;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    line-height: 28px;
    font-size: 12px;
    color: black;
    background: white;
}

/*.tea-margin-top{*/

/*margin-top: 1px!important;*/

/*}*/

.teacher-level {
    left: -11px;
    width: 60px;
}

.teacher-green p span {
    color: #00ac6f;
}

.teacher-green-all {
    position: relative;
    color: #00ac6f;
}

.teacher-red p span {
    color: red;
}

.size16 {
    font-size: 16px;
}

.teacher-bold {
    font-weight: bold;
}

.teacher-list {
    /*padding: 30px 0 290px 30px;*/
    padding: 30px 0 0px 30px;
    /*min-height: 410px;*/
}

.teacher .margin-left {
    margin-left: -45px;
}

@media screen and (max-width: 1200px) {
    .teacher .margin-left {
        margin-left: -20px;
    }
}

@media screen and (max-width: 768px) {
    .teacher .margin-left {
        margin-left: 0px;
    }
}

.teacher .inline-b {
    /*display: inline-block;*/
}

.teacher p {
    margin-top: 13px;
}

.margin-top-1 {
    margin-top: 1px !important;
}

.teacher.icon2 {
    width: 16px;
}

.teacher .icon_04 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    cursor: pointer;
}

.teacher-none {
    min-height: 460px;
    padding-top: 90px;
    text-align: center;
}

.teacher-none p {
    text-align: center;
    width: 340px;
    margin: auto;
    padding: 20px 0 10px 0;
    font-size: 18px;
}

.teacher-none h5 {
    color: #999;
}

.teacher-none button {
    margin: 20px auto;
    width: 120px;
    border-radius: 3px;
    display: block;
    font-size: 14px;
    line-height: 38px;
    color: white;
    background: #ff4b00;
}

.class-none {
    min-height: 460px;
    padding-top: 90px;
    text-align: center;
}

/* ==========================================
    我的师弟
   ========================================== */

.student {
    min-height: 552px;
    position: relative;
    font-size: 14px;
    font-family: "Noto Sans SC";
}

.st-title span {
    display: inline-block;
    padding: 15px 30px 21px 30px;
    cursor: pointer;
    font-weight: bold;
    line-height: 16px;
    margin-bottom: -1px;
}

.st-title {
    padding: 0 3px 0 0;
    margin: 0;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
}

.student .title-icon {
    position: absolute;
    left: 85px;
}

.student .title-icon2 {
    position: absolute;
    left: 200px;
}

.st-tips-f {
    position: relative;
}

.st-arrow {
    position: absolute;
    top: -13px;
    left: -2px;
    display: block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid #e2e2e2;
}

.st-arrow:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid white;
    top: -3px;
    left: -0.4em;
    display: block;
}

.student-level {
    position: absolute;
    top: 32px;
    left: -6px;
    width: 60px;
    margin: 0 !important;
    padding: 0 10px;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    line-height: 25px;
    font-size: 12px;
    color: black !important;
    background: white;
}

.st-list {
    overflow: hidden;
    padding: 10px 17px 75px 17px;
}

.st-padding {
    padding: 0 !important;
}

/*@media screen and (max-width: 550px){*/

/*.col-550px{*/

/*float:left;*/

/*width:16.67%;*/

/*padding:0 15px;*/

/*}*/

/*}*/

@media (max-width: 500px) {
    .col-xs-550 {
        float: left;
        width: 100% !important;
        padding: 0 15px;
    }
}

.st-list .st-list-item {
    /*width:207px;*/
    height: 110px;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    margin: 10px 10px;
    display: flex;
    align-items: center;
    /*float: left;*/
}

.list-item-last:last-child {
    margin-bottom: 20px;
}

.st-bold {
    font-weight: bold;
}

.st-list-item span {
    margin: 0 3px 0 13px;
    color: #00ac6f;
}

.st-head {
    margin-left: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.page-change {
    /*float: right;*/
    /*padding: 0px 30px 0 0;*/
    position: absolute;
    bottom: 10px;
    right: 30px;
    margin-top: 40px;
}

.st-teacher-none {
    /*height: 400px;*/
    padding-top: 90px;
    text-align: center;
}

.st-teacher-none p {
    /*text-align: left;*/
    text-align: center;
    width: 340px;
    margin: auto;
    padding: 20px 0 30px 0;
}

/* ==========================================
    我的视频
   ========================================== */

.myVideo-title {
    padding: 5px 30px;
    margin-top: -5px;
    border-bottom: 1px solid #e2e2e2
}

/* ==========================================
    我的技能
   ========================================== */

.mySkill-progess img {
    margin-left: 10px;
}

.mySkill-progess-top {
    font-size: 15px;
    margin-left: 15px;
}

.right {
    margin-left: 20px;
}

.mySkill-progess-bottom {
    margin-top: 40px;
    margin-left: 40px;
    border-top: 8px solid forestgreen;
}

.mySkill-progess-bottom li {
    float: left;
    margin-left: 20px;
}

.step {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 15px;
    background-color: forestgreen;
    color: white;
    text-align: center;
    margin-top: -14px;
}

.value {
    text-align: center;
}

.mySkill-header {
    margin: 40px 0 55px 30px;
}

.mySkill-done h5 {
    margin: 40px 0 10px 30px;
    font-weight: 800;
}

.mySkill-done span {
    margin-right: 5px;
}

.mySkill-green {
    height: 12px;
    width: 250%;
    /*background-color:#d9d9d9;*/
    margin-bottom: 50px;
    /*overflow:hidden;*/
}

.white-bor {
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
}

.bg-darkgray {
    background-color: #d1d1d1;
}

.mySkill-pic {
    margin: 80px auto;
}

.mySkill-line-warp {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 20px;
}

.mySkill-line {
    position: relative;
    display: inline-block;
    width: 175px;
    height: 12px;
    background-color: #4bbd8e;
}

.mySkill-line-gray {
    position: relative;
    display: inline-block;
    width: 175px;
    height: 12px;
    background-color: #d9d9d9;
}

.mySkill-introduce {
    position: absolute;
    bottom: -45px;
    left: -56px;
}

.mgSkill-bingo {
    position: absolute;
    top: -9px;
    right: -15px;
    display: inline-block;
    color: white;
    width: 30px;
    height: 30px;
    line-height: 24px;
    background-color: #4bbd8e;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #a0dcc3;
    z-index: 3;
}

.mgSkill-number {
    position: absolute;
    top: -9px;
    right: -15px;
    display: inline-block;
    color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #d9d9d9;
    text-align: center;
    border-radius: 50%;
    z-index: 3;
}

.mySkill-progress-ball,
.mySkill-progress-ball2,
.mySkill-progress-ball3 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #a0dcc3;
    background: #4bbd8e;
    display: inline-block;
    text-align: center;
    position: absolute;
    z-index: 1;
    line-height: 23px;
    color: white;
}

.mySkill-progress-ball2 {
    background: #4bbd8e !important;
    border: 3px solid #4bbd8e !important;
}

.mySkill-progress-ball3 {
    background: #d9d9d9 !important;
    border: 3px solid #d9d9d9 !important;
}

.mySkill-progress-line {
    height: 12px;
    width: 100%;
    background: #4bbd8e;
    display: inline-block;
    top: 9px;
    left: 19%;
    position: absolute;
}

.mySkill-progress-open {
    width: 30px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: #ffffff;
    display: inline-block;
    text-align: center;
}

.mySkill-progress-date {
    position: absolute;
    top: 40px;
    left: -2px;
}

.bg-d9d9d9 {
    background: #d9d9d9 !important;
}

.mySkill-header-name {
    font-size: 14px;
    color: #fd8f2d;
}

.mySkill-header-money {
    color: #fd8f2d;
}

.mySkill-minder {
    position: relative;
    height: 615px;
    padding: 15px 0 15px 0;
    background: #ffffff;
}

/* ==========================================
    用户收藏
   ========================================== */

.collect-main {
    background-color: #ffffff;
    padding: 0 20px;
}

.collect-crumbs {
    height: 60px;
    font-size: 14px;
}

.collect-crumbs li {
    display: inline-block;
    line-height: 60px;
}

#collect-active {
    color: #f9a372;
}

.collect-crumbs li a {
    color: #000;
}

.collect-crumbs li a:after {
    content: '>';
    color: #000;
}

.collect-crumbs li a:hover {
    color: #f9a372;
    text-decoration: none;
}

.collect-crumbs li:last-child a:after {
    display: none;
}

.collect-well {
    padding: 0 15px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 2px 0 5px #e2e2e2;
}

.collect-link ul {
    /*list-style: square inside url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/circle.jpg");*/
    text-align: center;
}

.collect-link ul li {
    padding-top: 34px;
}

#collect-choose {
    /*list-style: square inside url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/circle-orange.jpg");*/
}

#collect-choose a {
    color: #f9a372;
}

#collect-last {
    padding-bottom: 34px;
}

.collect-link li a {
    color: #29b078;
    font-size: 14px;
}

.collect-link ul li:hover {
    /*list-style: square inside url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/circle-orange.jpg");*/
}

.collect-link ul li:hover a {
    color: #f9a372;
    text-decoration: none;
}

.collect-content {
    position: relative;
    margin-bottom: 5.55%;
}

.collect-content-boxer {
    position: relative;
    margin-top: 25px;
    border: 1px solid #e6e6e6;
}

.collect-content-top {
    padding: 28px 23px;
}

.collect-content-top b {
    color: #29B078;
}

.collect-content hr {
    margin: 0 -23%;
}

.collect-door {
    margin-top: 25px;
    padding: 1px 33px;
    border: 1px solid #e2e2e2;
    background-color: #FFFFFF;
    overflow: hidden;
}

.recommend-collect-door {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background-color: #FFFFFF;
    overflow: hidden;
}

.recommend-collect-door2 {
    border-top: none;
}

@media screen and (max-width: 1091px) {
    .collect-door {
        margin-top: 20px;
    }
}

.collect-top {
    font-weight: 600;
    padding: 18px 0;
    text-align: left;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.user-collect-top {
    padding: 18px 20px;
    background-color: #fbfbfb;
    text-align: center;
}

.collect-top span {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.collect-middle {
    padding: 2% 0;
    text-align: left;
    border-top: 1px solid #e8e8e8;
}

.collect-middle1 {
    padding: 2% 0;
    text-align: left;
    border-top: 1px solid #e8e8e8;
}

.no-collect-middle {
    padding: 2% 0;
    text-align: center;
}

.collect-middle-one .collect-middle-one1 {
    border-top: none;
}

.collect-middle-one a {
    padding-top: 15px;
    text-align: center;
}

.collect-middle-one a:hover {
    color: #ff650e;
}

.collect-middle span {
    padding-top: 15px;
    text-align: center;
}

.collect-middle-one1 a {
    padding: 35px 15px 0 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.collect-middle1 span {
    padding: 35px 15px 0 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.collect-middle-lastspan {
    margin-top: -59px;
}

.collect-middle1 img {
    padding: 0;
    display: inline-block;
    height: 170px;
    vertical-align: middle;
}

.collect-main div:first-of-type {
    border-top: none;
}

.num {
    color: #666666;
}

.favorites-contribute {
    cursor: pointer;
}

.favorites-contribute:hover {
    cursor: pointer;
}

.favorites-ellipsis {
    padding: 15px 15px;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
}

.favorites-ellipsis:hover {
    color: #E6823B;
}

.recommend-collect-imgBoxer {
    text-align: center;
}

.recommend-collect-imgBoxer img {
    width: 70px;
    height: 90px;
}

.del {
    margin-top: 25px;
    color: #c8c8c8;
    background-color: #fff;
    cursor: pointer;
    border: none;
}

.del:hover {
    color: #ff700f;
}

.del1 {
    margin-top: -14px;
    color: #c8c8c8;
    background-color: #fff;
    cursor: pointer;
    border: none;
}

.del1:hover {
    color: #ff700f;
}

@media screen and (min-width: 1092px) {
    .collect-top {
        text-align: center;
    }

    .collect-middle {
        text-align: center;
    }
}

/* ==========================================
    资料搜索
   ========================================== */

.search-blank-padding {
    /*padding: 0 30px 15px 30px;*/
    padding: 0 30px 0px 30px;
    margin: 0;
}

.search-block {
    width: 100%;
    margin: 5px 0;
}

.search-block span {
    display: inline-block;
    width: 80px;
    padding-right: 15px;
    text-align: right;
    line-height: 40px;
    font-weight: bold;
    font-size: 14px;
    color: black !important;
}

.search-block input {
    width: 88%;
    height: 35px;
    border-radius: 5px;
}

.search-btn {
    width: 100%;
    overflow: hidden;
}

.search-btn button {
    float: right;
    width: 80px;
    margin: 30px 25px 0 5px;
    border-radius: 3px;
    line-height: 30px;
    font-size: 14px;
}

.search-btn button:first-child {
    border: none;
    background: #ff4b00;
    color: white;
}

.search-btn button:last-child {
    border: 1px solid #ff4b00;
    background: white;
    color: #ff4b00;
}

.title-blank-margin {
    margin-top: 30px;
}

.title-blank-margin h5 {
    vertical-align: middle;
    text-align: left;
}

.title-blank-margin h5 button {
    float: none !important;
}

/* ==========================================
    组件-page
   ========================================== */

.page {
    margin: 20px 0 40px 0;
    text-align: center;
}

.page li {
    display: inline-block;
    width: 5em;
}

.page li a {
    display: block;
    line-height: 24px;
    color: #85898d;
    cursor: pointer;
}

.page li.disabled a {
    cursor: not-allowed;
}

.modal-backdrop:focus {
    outline: none;
}

/* ==========================================
    组件-modal
   ========================================== */

.modal-backdrop {
    background: transparent !important;
}

.modal-open .modal {
    background: rgba(0, 0, 0, 0.5);
}

.modal-btn-fff {
    background-color: #fff;
    color: #29b078;
    border: 1px solid #29b078;
}

.modal-btn-fff:hover {
    color: #29b078;
    opacity: .8;
}

/* ==========================================
    header-top
   ========================================== */

.img-wrap img {
    padding-right: 15px;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .img-wrap img {
        padding-right: 3px;
    }
}

@keyframes imgAnimation {
    0% {
        background-position: 0 -27px
    }
    25% {
        background-position: 0 -20px
    }
    50% {
        background-position: 0 -13px
    }
    75% {
        background-position: 0 -6px
    }
    100% {
        background-position: 0 0
    }
}

@-webkit-keyframes imgAnimation {
    0% {
        background-position: 0 -27px
    }
    25% {
        background-position: 0 -20px
    }
    50% {
        background-position: 0 -13px
    }
    75% {
        background-position: 0 -6px
    }
    100% {
        background-position: 0 0
    }
}

#jnshu-mobile-img {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/icon-nav-mobile.png") no-repeat;
    width: 24px;
    height: 24px;
    background-size: 100%;
    display: inline-block;
}

#qq-share-img {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/qq.png") 0 no-repeat;
    width: 24px;
    height: 24px;
    background-size: 100%;
    display: inline-block;
}

#weixin-share-img {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/weixin.png") 0 no-repeat;
    width: 24px;
    height: 24px;
    background-size: 100%;
    display: inline-block;
}

#jnshu-mobile-img,
#qq-share-img,
#weibo-share-img,
#weixin-share-img {
    /*margin-top: 19px;*/
    margin-right: 22px;
    position: relative;
    top: 7px;
    /*right: 0;*/
}

#weibo-share-img {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/weibo.png") 0 no-repeat;
    width: 24px;
    height: 24px;
    background-size: 100%;
    display: inline-block;
}

#weibo-share-img:hover,
#jnshu-mobile-img:hover,
#qq-share-img:hover,
#weixin-share-img:hover {
    animation: imgAnimation 0.5s;
    -webkit-animation: imgAnimation 0.5s;
}

#share-weixin {
    position: absolute;
    right: -21px;
    left: -33px;
    display: none;
}

.share-weixin-pos {
    position: relative;
}

#share-qq {
    position: absolute;
    top: 45px;
    display: none;
}

#share-qq img {
    width: 110px;
    height: 110px;
}

#share-weixin img {
    width: 110px;
    height: 110px;
}

@media only screen and (max-width: 500px) {
    .header-login {
        /*display: block;*/
        text-align: right;
    }
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
    .hiddex-1130{
        display: none !important;
    }
}
.tel-word {
    float: left;
    line-height: 40px;
    /*color: #56a087;*/
    color: #333333;
}

@media screen and (min-width: 992px) and (max-width: 1130px) {
    .hiddex-1130 {
        display: none;
    }
}

.img-wrap {
    text-align: right;
    line-height: 40px;
}

.header-login a:hover {
    color: #52b277;
}

.header-notice {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/header-notice2.png") no-repeat center;
    height: 16px;
    width: 17px;
    display: inline-block;
    vertical-align: sub;
}

.header-notice:hover {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/header-notice.png") no-repeat center;
}

.header-user:hover {
    text-decoration: underline;
}

.header-dot {
    margin-left: 4px;
    color: #29b078;
    font-weight: normal;
}

.header-dot-333 {
    margin-right: 8px;
    margin-left: 8px;
    color: #333;
    font-size: 15px;
}

@media only screen and (max-width: 500px) {
    .header-dot-333 {
        margin-right: 2px;
        margin-left: 0px;
        color: #333;
        font-size: 15px;
    }

    .min-message {
        padding-right: 13px !important;
        padding-left: 6px;
    }
}

.message-number {
    position: absolute;
    margin-left: -8px;
    margin-top: 17px;
    border: 1px solid #fd9f0b;
    color: #fff;
    background-color: #fd9f0b;
    font-size: 12px;
    border-radius: 8px;
    text-align: center;
    min-width: 15px;
    padding: 1px 2px;
    line-height: 12px;
}

.message-circle span {
    display: inline-block;
    vertical-align: top;
    margin-top: 3px;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 3px;
}

/*message start*/

.message .message-circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 3px;
}

.ms-title {
    margin: 0 30px;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
}

.ms-title i {
    position: absolute;
    top: 20px;
}

.ms-title .unread {
    right: 14px;
}

.ms-title .unread2 {
    left: 224px;
}

.ms-title .unread3 {
    left: 348px;
}

.ms-title .unread4 {
    left: 471px;
}

.ms-title .unread5 {
    left: 590px;
}

.ms-title .unread6 {
    left: 720px;
}

@media screen and (max-width: 1200px) {
    .ms-title .unread6 {
        left: 100px;
        top: 70px;
    }
}

@media screen and (max-width: 711px) {
    .ms-title .unread5 {
        left: 100px;
        top: 70px;
    }

    .ms-title .unread6 {
        left: 224px;
        top: 70px;
    }
}

@media screen and (max-width: 587px) {
    .ms-title .unread4 {
        left: 100px;
        top: 70px;
    }

    .ms-title .unread5 {
        left: 224px;
        top: 70px;
    }

    .ms-title .unread6 {
        left: 348px;
        top: 70px;
    }
}

@media screen and (max-width: 463px) {
    .ms-title .unread3 {
        left: 100px;
        top: 70px;
    }

    .ms-title .unread4 {
        left: 224px;
        top: 70px;
    }

    .ms-title .unread5 {
        left: 100px;
        top: 120px;
    }

    .ms-title .unread6 {
        left: 224px;
        top: 120px;
    }
}

.active-circle {
    position: absolute;
    z-index: 10;
    left: 91px;
    top: 10px;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 3px;
}

.ms-title span {
    position: relative;
    display: inline-block;
    padding: 15px 30px 21px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    color: #666;
    line-height: 16px;
    margin-bottom: -1px;
}

.ms-title .tab-active {
    color: #00ac6f;
}

.ms-btn {
    margin-top: 5px;
}

.message .title-icon,
.message .title-icon2,
.message .title-icon3,
.message .title-icon4,
.message .title-icon5 {
    top: 0;
    color: #e8e8e8;
}

.message .title-icon {
    position: absolute;
    right: -30px;
}

.message .title-icon2 {
    position: absolute;
    left: 215px;
}

.message .title-icon3 {
    position: absolute;
    left: 340px;
}

.message .title-icon4 {
    position: absolute;
    left: 463px;
}

.message .title-icon5 {
    position: absolute;
    left: 586px;
}

@media screen and (max-width: 711px) {
    .message .title-icon5 {
        top: 50px;
        left: 94px;
    }
}

@media screen and (max-width: 587px) {
    .message .title-icon4 {
        top: 50px;
        left: 94px;
    }

    .message .title-icon5 {
        top: 50px;
        left: 215px;
    }
}

@media screen and (max-width: 463px) {
    .message .title-icon3 {
        top: 50px;
        left: 94px;
    }

    .message .title-icon4 {
        top: 50px;
        left: 215px;
    }

    .message .title-icon5 {
        top: 104px;
        left: 94px;
    }
}

@media screen and (max-width: 711px) {
    .message .title-icon5 {
        top: 50px;
        left: 94px;
    }
}

@media screen and (max-width: 587px) {
    .message .title-icon4 {
        top: 50px;
        left: 94px;
    }

    .message .title-icon5 {
        top: 50px;
        left: 215px;
    }
}

@media screen and (max-width: 463px) {
    .message .title-icon3 {
        top: 50px;
        left: 94px;
    }

    .message .title-icon4 {
        top: 50px;
        left: 215px;
    }

    .message .title-icon5 {
        top: 104px;
        left: 94px;
    }
}

/*message end*/

/* ==========================================
    header
   ========================================== */

.header-nav-wrap,
.navbar {
    background: #29b078;
    height: 97px;
}

.navbar {
    margin-bottom: 0;
    border: 0;
}

.navbar-brand {
    max-width: 300px;
    margin-top: 0;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .navbar-brand {
        max-width: 217px;
    }
}

.navbar-nav {
    float: right;
}

.navbar-default .navbar-nav > li {
    padding: 0 25px;
    list-style-image: none;
}

.navbar-default .navbar-nav > li:last-child {
    padding: 0 0 0 25px;
}

.navbar-default .navbar-nav > li > a {
    display: block;
    height: 97px;
    padding: 0;
    font-size: 16px;
    line-height: 93px;
    color: #fff;
    text-align: center;
    border-bottom: 4px solid #29b078;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .navbar-default .navbar-nav > li > a {
        height: 68px;
        line-height: 72px;
    }
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
    border-bottom: 4px solid white;
    color: #fff;
    background: #29b078;
}

@media only screen and (max-width: 1200px) {
    .nav,
    .navbar {
        height: auto;
    }

    .navbar-default .navbar-nav > li,
    .navbar-default .navbar-nav > li:last-child {
        padding: 0;
    }

    .navbar-default .navbar-nav > li > a {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 767px) {
    .header-nav-wrap,
    .navbar {
        width: 100%;
        z-index: 9999;
    }

    .navbar-brand {
        width: 90%;
        margin-top: 10px;
    }

    .navbar-brand img {
        width: 80%;
    }

    .navbar-collapse {
        width: 100%;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .navbar-nav {
        float: none;
        width: 100%;
        height: 240px;
        margin: 0;
        background: #29b078;
        border: none;
    }

    .navbar-default .navbar-nav > li a {
        height: 40px;
        margin: 0;
        padding: 0;
        line-height: 40px;
        color: #fff;
        background: #29b078;
        filter: alpha(opacity:90);
        opacity: 0.9;
        z-index: 9999;
    }

    .navbar-default .navbar-nav > li.active > a {
        color: #fff;
        background: #38c58a;
        border: none;
    }

    .navbar-default .navbar-nav > li > a:hover {
        background: #38c58a;
        border: none;
    }

    .navbar-default .navbar-nav li.active a:hover {
        background: #38c58a !important;
    }

    .navbar .navbar-toggle {
        border: 0;
    }

    .navbar .navbar-toggle:hover {
        background: #fff;
    }
}

.navbar-btn {
    margin: 10px;
    background: #47d197;
}

.navbar .navbar-toggle:active,
.navbar .navbar-toggle:visited,
.navbar .navbar-toggle:focus {
    background: #47d197;
}

@media only screen and (max-width: 767px) {
    .navbar-btn {
        border: 0;
    }

    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:active {
        background: rgba(0, 0, 0, 0.2);
    }

    .navbar-brand {
        max-width: 200px;
        padding: 0;
        margin: 10px;
        height: 34px;
    }

    .navbar-brand img {
        width: auto;
        height: 100%;
    }
}

/* ==========================================
    footer
   ========================================== */

.footer {
    padding: 20px 0;
    background: #55a877;
    color: #ffffff;
}

.footer .lead {
    margin-bottom: 10px;
    font-size: 16px;
}

.footer a {
    color: #fff;
}

.footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer img {
    width: 92px;
}

.copyright {
    background: #55a877;
    border-top: 0.1rem solid #32c086;
    line-height: 27px;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
}

/* ==========================================
    快捷入口
   ========================================== */

.quick-siderbar {
    z-index: 99999;
    position: fixed;
    top: 50%;
    /*left: 0;*/
    left: 24px;
    /*margin-top: -123px;*/
    margin-top: -67px;
}

.quick-siderbar .side-bar-new-year {
    position: absolute;
    left: -64px;
    top: -191px;
    z-index: -1;
    width: 240px;
    height: 589px;
    max-width: none;
}

.left-bar-btn {
    display: none;
}

@media only screen and (max-width: 767px) {
    /*.quick-siderbar {*/
    /*display: none;*/
    /*}*/
    .quick-siderbar {
        left: -117px;
    }

    .left-bar-btn {
        display: block;
        position: absolute;
        right: -27px;
        top: 131px;
        width: 27px;
        height: 100px;
        padding: 7px;
        font-size: 12px;
        color: #fff;
        background: linear-gradient(#78cca9, #59c196);
        border: 1px solid #24a06c;
        border-left: none;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .quick-siderbar:hover {
        left: 0;
    }

    .left-bar-btn img:nth-of-type(2) {
        margin-right: 2px;
        transform: rotate(0deg);
    }

    .quick-siderbar:hover .left-bar-btn img:nth-of-type(2) {
        transform: rotate(180deg);
    }
}

.quick-logo {
    position: relative;
    width: 117px;
    height: 68px;
    margin-bottom: 14px;
    background: #29b078 url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/quick-logo.png") no-repeat center center;
    border-radius: 4px;
}

.quick-bar {
    z-index: 2;
    position: absolute;
    bottom: -15px;
    width: 7px;
    height: 26px;
}

.quick-bar i {
    display: block;
    width: 2px;
    height: 30px;
    margin: -4px auto;
    background: #29b078;
}

.quick-bar span {
    z-index: 1;
    display: block;
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
}

.quick-bar-left {
    left: 10px;
}

.quick-bar-right {
    right: 10px;
}

.quick-entry {
    width: 117px;
    padding: 5px 18px;
    /*background: #29b078;*/
    border-radius: 4px;
    font-size: 12px;
    /*line-height: 26px;*/
    line-height: 21px;
    color: #fff;
}

.quick-entry li a {
    display: inline-block;
    padding-left: 10px;
    color: #fff;
}

.quick-entry li i {
    width: 16px;
}

/* ==========================================
    侧方qq
   ========================================== */

.qq-left {
    position: fixed;
    top: 50%;
    margin-top: -80px;
    right: -137px;
    /*right: 0px;*/
    z-index: 9999;
    width: 137px;
    /*height: 196px;*/
    background: #59c196;
    text-align: center;
    border-radius: 5px;
}

@media only screen and (max-width: 767px) {
    .qq-left {
        display: none;
    }
}

.qq-left:hover {
    right: 0;
}

.right-bar {
    padding: 10px 0 20px;
    /*height: 285px;*/
    /*padding-top: 10px;*/
    background: #fff;
    border: 4px solid #59c196;
    border-radius: 8px;
}

.right-bar:nth-of-type(1) {
    border-bottom: 2px solid #59c196;
}

.right-bar:nth-of-type(2) {
    border-top: 2px solid #59c196;
}

.right-bar a img {
    margin-right: 7px;
}

.right-bar p {
    font-size: 14px;
    color: #59c196;
    margin: 10px 0 0;
}

.right-bar-qq {
    padding-top: 20px;
}

.right-bar-phone {
    background: #fff;
    border: 4px solid #59c196;
    border-radius: 8px;
}

.right-bar a p:nth-of-type(1) {
    margin-bottom: 10px;
}

.qq-left a {
    text-decoration: none;
}

.right-bar-btn {
    position: absolute;
    left: -27px;
    top: 40px;
    width: 27px;
    height: 116px;
    padding: 7px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(#78cca9, #59c196);
    border: 1px solid #24a06c;
    border-right: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.right-bar-btn img:nth-of-type(1) {
    margin-top: -2px;
    margin-left: -2px;
    margin-bottom: 4px;
}

.right-bar-btn img:nth-of-type(2) {
    margin-left: 2px;
    transform: rotate(180deg);
}

.qq-left:hover .right-bar-btn img:nth-of-type(2) {
    transform: rotate(0deg);
}

.right-bar-adviser {
    cursor: pointer;
}

.right-bar-adviser img {
    cursor: default;
}

.right-bar-adviser .adviser-icon {
    position: absolute;
    left: 1485px;
    top: -200px;
    height: 564px;
    max-width: none;
}

.right-bar.right-bar-adviser:hover .adviser-icon {
    left: -482px;
}

/* ==========================================
    scroll top 滚动到顶部
   ========================================== */

.scroll {
    position: fixed;
    right: 50px;
    width: 51px;
    height: 51px;
    border-radius: 6px;
    box-shadow: 1px 2px 3px #e0e0e0;
    cursor: pointer;
    z-index: 9999;
}

.scroll-top {
    bottom: 100px;
    background: #fff url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/toTop.png) no-repeat center center;
    background-size: 51px;
}

.scroll-bottom {
    bottom: 40px;
    background: #fff url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/toBottom.png) no-repeat center center;
    background-size: 51px;
}

/* ==========================================
    home page 首页
   ========================================== */

.banner {
    padding: 0;
    margin: 0;
}

.carousel-inner > .item {
    margin: 0;
}

@media screen and (min-width: 1921px) {
    .carousel-inner > .item > a {
        display: flex;
        justify-content: center;
    }
}

.carousel-inner > .item > img {
    width: 100%;
}

.home-tag {
    padding: 70px 0 58px 0;
    text-align: center;
}

.home-tag-icon {
    height: 45px;
}

.home-tag-help {
    /* 让图片垂直居中的hack */
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.home-tag-icon img {
    vertical-align: middle;
}

.home-tag p {
    font-size: 16px;
    color: #999999;
}

.home-tag-num {
    /*padding: 40px 0 40px 15px;*/
    margin: 70px 15px 58px 0px;
    /*text-align: left;*/
    border-left: 2px solid #f9f9f9;
    text-align: center;
    font-size: 16px;
    color: #999999;
}

.home-tag-num .text-num {
    font-size: 18px;
    color: #26a26f;
}

/*首页找个师兄带你入门*/

.teacher-brother-box {
    width: 100%;
    height: 256px;
    margin-top: 60px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.box-step1 {
    position: absolute;
    width: 30%;
    height: 100%;
    overflow: hidden;
}

.box-step {
    position: absolute;
    width: 34.7%;
    height: 100%;
    overflow: hidden;
}

.box-step1 > img,
.box-step > img {
    display: inline-block;
    width: 100%;
    height: 108.066666667%;
    margin-top: -17px;
}

.move-step-01 {
    left: 0;
    top: 0;
    z-index: 1;
}

.move-step-02 {
    left: 20.66666667%;
    top: 0;
    z-index: 10;
}

.move-step-03 {
    left: 46.166666667%;
    top: 0;
    z-index: 100;
}

.move-step-04 {
    left: 71.566667%;
    top: 0;
    z-index: 1000;
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .teacher-brother-box {
        width: 100%;
        height: 524px;
        margin-top: 60px;
        margin-bottom: 50px;
        position: relative;
        overflow: hidden;
    }

    .box-step1 {
        height: auto;
        width: 43%;
    }

    .box-step {
        position: absolute;
        width: 47.66666667%;
        height: 46%;
        overflow: hidden;
    }

    .move-step-02 {
        left: 50%;
        top: 0;
        z-index: 1;
    }

    .move-step-03 {
        left: 0;
        top: 282px;
        z-index: 100;
    }

    .move-step-04 {
        left: 54%;
        top: 282px;
        z-index: 100;
    }
}

@media screen and (max-width: 767px) {
    .teacher-brother-box {
        width: 100%;
        margin-top: 60px;
        margin-bottom: 50px;
        height: auto;
    }

    .box-step1 {
        position: relative;
        width: 55%;
        height: 242px;
        padding-top: 10px;
    }

    .box-step {
        position: inherit;
        display: block;
        width: 55%;
        height: 242px;
        margin: 20px auto;
        overflow: inherit;
    }

    .move-step-02 {
        left: 0;
        top: 0;
        z-index: 1;
    }

    .move-step-03 {
        left: 0;
        top: 0;
        z-index: 100;
    }

    .move-step-01 {
        left: 20%;
        top: 0;
        z-index: 100;
    }

    .move-step-04 {
        left: 17%;
        top: 0;
        z-index: 100;
    }
}

/*首页找个师兄带你入们*/

.home-section {
    /* 首页的大板块 */
    padding: 30px 0;
    position: relative;
}

.home-section > h4 {
    margin-bottom: 25px;
    text-align: center;
}

.home-section-tittle {
    margin-bottom: 25px;
    text-align: center;
}

.home-section > p {
    /*margin-bottom: 50px;*/
    text-align: center;
    color: #999;
    padding-bottom: 15px;
}

.home-section-info {
    text-align: center;
    color: #999;
    padding-bottom: 15px;
}

.part-content-tittle-other {
    padding-bottom: 5px !important;
    margin-bottom: 0px;
}

.part-content-tittle {
    display: inline-block;
    margin-left: 70px;
}

.home-video {
    text-align: right;
    margin-bottom: 5px;
    margin-right: 10px;
    color: #666 !important;
}

.home-section-special {
    padding: 40px 46px 0 46px;
    width: 100%;
    height: 200px;
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
}

.home-section-special-smallclass {
    width: 100%;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #e8e8e8;

}
.home-section-special-smallclass:hover{
    box-shadow: 1.5px 2.598px 13px 0px rgba(0, 0, 0, 0.2);
}


.home-section-special-smallclass div img {
    width: 100%;
    height: 160px;
}

.smallclass-p {
    margin: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
}

.home-section-special-smallclass p:last-child {
    margin: 0px 20px 20px 19px;
    font-size: 14px;
    color: #333333;

}

.home-section-special:hover,
.home-evaluate-card:hover {
    border: 1px solid transparent !important;
    box-shadow: 0px 0px 10px #e2e2e2;
}

.offline-why .home-section-special:hover {
    -webkit-box-shadow: 0 5px 10px 1px #c1c1c1;
    -moz-box-shadow: 0 5px 10px 1px #c1c1c1;
    box-shadow: 0 5px 10px 1px #c1c1c1;
}

@media screen and (min-width: 458px) and (max-width: 768px) {
    .home-section-special p {
        text-align: center;
    }
}

.home-section-special h5 {
    font-size: 16px;
    text-align: center;
}

.home-section-special p {
    margin-top: 30px;
    color: #999;
}

.home-section-occupation {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/man-icon.png") right top no-repeat;
}

.home-section-count {
    position: absolute;
    left: 20px;
    top: 12px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #fff;
}

.home-section-occupation h3 {
    display: table;
    overflow: hidden;
    margin-bottom: 20px;
    width: 100%;
    height: 200px;
    font-size: 22px;
    color: #ffffff;
}

.home-section-occupation h3 span {
    display: table-cell;
    vertical-align: middle;
}

.home-section-occupation button {
    display: block;
    width: 100%;
    line-height: 50px;
    background: #ffffff;
    border: 1px solid #d5d5d5;
    text-align: center;
}

.home-section-occupation a {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #ffffff;
    border: 1px solid #d5d5d5;
    text-align: center;
}

.home-section-occupation button:hover {
    border: 1px solid #ff650e;
    color: #ff650e;
}

.home-section-occupation a:hover {
    border: 1px solid #ff650e;
    color: #ff650e;
}

.home-section-method {
    display: table;
    width: 100%;
    background: #ffffff;
}

.home-section-method > div {
    display: table-cell;
    width: 50%;
}

.home-section-method-img {
    position: relative;
}

.home-section-method-img .triangle-left {
    position: absolute;
    right: 0;
    top: 120px;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 27px solid #FFFFFF;
    border-bottom: 25px solid transparent;
}

.home-section-method-img .triangle-right {
    position: absolute;
    left: 0;
    top: 120px;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 27px solid #FFFFFF;
    border-bottom: 25px solid transparent;
}

.home-section-method-text {
    text-align: center;
}

.home-section-method-text p {
    margin: 0 auto;
    max-width: 250px;
    text-align: left;
    color: #999999;
}

.home-section-method-button {
    text-align: center;
    margin: 54px 0 10px 0;
}

@media (max-width: 991px) {
    .home-section-method > div {
        width: 100%;
    }

    .home-section-method-text {
        padding: 20px 0;
    }
}

.home-section-student {
    margin-top: 5px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background-color: #fff;
}

.home-section-student:hover {
    border: 1px solid transparent !important;
    box-shadow: 0px 0px 10px #e2e2e2;
}

.home-section-student img {
    margin-top: 25px;
}

.home-section-student-btn {
}

.home-section-student button {
    display: block;
    line-height: 50px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #d5d5d5;
}

.home-section-student button:hover {
    border: 1px solid #ff650e;
    color: #ff650e;
}

.home-section-student a {
    display: inline-block;
    float: left;
    line-height: 50px;
    width: 50%;
    background: #ffffff;
    border-top: 1px solid #d5d5d5;
    border-radius: 0 0 3px 3px;
}

.home-section-student-btn:first-child {
    border-right: 1px solid #d5d5d5 !important;
}

.home-section-student a:hover {
    background: #ff650e;
    color: #fff;
}

.home-section-student > img {
    width: 108px;
    height: 108px;
    overflow: hidden;
    border-radius: 50%;
}

.home-section-student h4 {
    margin-top: 35px;
    margin-bottom: 20px;
    font-size: 18px;
}

.home-section-student p {
    margin-bottom: 20px;
    padding: 0 30px;
    min-height: 100px;
    color: #999999;
    font-size: 16px;
}

/*首页班级分类*/

.home-pack {
    text-align: center;
    margin-top: -20px;
    margin-bottom: 5px;
}



.home-title-line {
    width: 25px;
    display: inline-block;
    border-top: 3px solid #00ac6f;
}

.home-classify-circle {
    width: 90px;
    height: 90px;
    margin-right: 20px;
    border-radius: 45px;
    display: inline-block;
    text-align: center;
    /*vertical-align: middle;*/
    line-height: 90px;
    background: white;
}

.home-inline-block {
    /*display: inline-block;*/
    /*width:182px;*/
    /*color: #999;*/
    width: 100%;
    min-height: 200px;
    margin: auto;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    padding: 40px 40px 40px 40px;
    background: white;
    color: #999;
}

.home-inline-block:hover {
    color: #999;
}

.home-inline-block h5 {
    margin-bottom: 40px !important;
    text-align: center;
    font-size: 16px;
    /*font-weight: bold;*/
    color: black;
}

.home-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    text-align: center;
    line-height: 20px;
}

.span-width {
    width: 70px;
}

/* .span-width-79 {
    width: 79px;
} */

.home-flex-center .mock-button {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #ffffff;
    border: 1px solid #d5d5d5;
    text-align: center;
}

.home-flex-center .mock-button:hover {
    border: 1px solid #ff650e;
    color: #ff650e;
}

@media screen and (min-width: 403px) and (max-width: 992px) {
    .home-model {
        text-align: center;
    }
}

/*业界评价*/

.home-evaluate-btn {
    display: inline-block;
    width: 72px;
    /*height: 30px;*/
    line-height: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
    vertical-align: bottom;
}

.home-evaluate-btn:hover {
    color: #00a0ef;
    border: 1px solid #00a0ef;
}

.home-evaluate-btn:active {
    background-color: #00a0ef;
    border: 1px solid #00a0ef;
    color: #fff;
}

.choose-btn {
    background-color: #00a0ef;
    border: 1px solid #00a0ef;
    color: #fff;
}

.choose-btn:hover {
    color: #fff;
}

.evaluate-btn {
    /*display: inline-block;*/
    overflow: hidden;
    padding-bottom: 5px;
}

.evaluate-content {
    /*display: inline-block;*/
}

.home-evaluate-card {
    margin: 24px 0 0 0;
    padding: 40px 24px 20px 24px;
    width: 98%;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

.home-evaluate-card-data {
    padding: 18px 0;
    height: 84px;
    text-align: left;
    color: #999;
    clear: both;
}

.home-evaluate-card-img {
    position: relative;
    width: 146px;
    height: 146px;
    padding: 5px;
    margin: 0 auto;
    border: 1px solid #ffdfbd;
    border-radius: 50%;
    box-sizing: border-box;
}

.home-evaluate-card-img > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.audio-switch {
    position: absolute;
    width: 80px;
    left: 50%;
    top: 70%;
    margin-left: -40px;
    color: #fff;
    vertical-align: middle;
}

.audio-switch > img {
    width: 34%;
    vertical-align: middle;
    cursor: pointer;
}

.home-evaluate-card-name {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}

.home-section-model {
    padding: 52px 28px 0px 28px !important;
    /*margin-top: 30px;*/
}

.home-margin-top40 {
    /*margin-top: 40px;*/
}

.home-block {
    padding-bottom: 40px;
}

.home-section-process {
    /*padding: 0px 28px 0 28px;*/
    /*width: 100%;*/
    /*height: 145px;*/
    cursor: pointer;
}

.home-step a {
    overflow: hidden;
    /*padding: 0;*/
    /*height:auto;*/
}

.home-process-num {
    width: 55px;
    height: 40px;
    position: relative;
    margin: auto;
    overflow: hidden;
}

.home-process-num h2 {
    position: absolute;
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    color: #00ac6f;
    top: -13px;
}

.home-line {
    width: 50px;
    border-bottom: 2px #00ac6f solid;
    margin: auto;
    margin-top: 6px;
}

.home-line-first {
    width: 43px;
    /*margin-left: 34%!important;*/
    position: relative;
    left: -5px;
}

@media screen and(max-width: 1200px) {
    .home-line-first {
        /*margin-left: 41%!important;*/
    }
}

.home-section-process h5 {
    font-size: 16px;
    text-align: center;
}

.home-section-process p {
    text-align: center;
    color: #999;
}

.home-brother-wrap {
    padding-bottom: 160px;
}

.home-brother-box {
    position: relative;
    /*border: 1px solid red;*/
    margin: 0 auto;
    margin-top: 90px;
    width: 235px;
    height: 235px;
}

.home-brother-content {
    position: absolute;
    z-index: 999;
    width: 235px;
    color: white;
    text-align: center;
}

.home-brother-square {
    position: absolute;
    z-index: 99;
    top: 35px;
    left: 35px;
    width: 166px;
    height: 166px;
    border-radius: 12px;
    text-align: center;
    background-color: #29b078;
    /* Rotate div */
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* Internet Explorer */
    -moz-transform: rotate(45deg);
    /* Firefox */
    -webkit-transform: rotate(45deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(45deg);
    /* Opera */
}

.home-brother-number {
    padding: 44px 0 14px;
    font-size: 40px;
    line-height: 100%;
    font-weight: normal;
}

.home-brother-class {
    font-size: 24px;
    line-height: 24px;
}

@media (min-width: 1200px) {
    .col-lg-2-5 {
        float: left;
        width: 20%;
        padding: 0 6px;
    }
}

/* ==========================================
    basic left sidebar 左边栏基本样式
   ========================================== */

/* ==========================================
    basic right content 右边主体框基本样式
   ========================================== */

.content {
    margin: 25px 0;
    padding: 15px 15px 25px 15px;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    background: #ffffff;
    zoom: 1;
}

.content:after {
    clear: both;
    content: '.';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}

.content.blank {
    /* 没有左右内边距 */
    padding: 15px 0 15px 0;
}

.content > h4,
.content > h5 {
    line-height: 36px;
}

/*无数据展示页面*/

.data-none {
    margin: 150px auto 135px auto;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* ==========================================
    score 积分页面wanweina
   ========================================== */

/*积分页面的账户学分*/

.score-main {
    margin-top: 20px;
}

.score .content {
    position: relative;
}

.score-top {
    background-color: #ffa132;
}

.score-top #canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
}

.score-top .user-score {
    padding: 10px 0 10px 30px;
    color: white;
    font-size: 16px;
    z-index: 999;
}

.score-top .user-score img {
    margin: -5px 5px 0 0;
}

.score-top .user-score span {
    font-weight: bold;
    font-size: 45px;
    margin-left: 19px;
}

/*积分页面的积分记录展示*/

.score-main h5 {
    font-size: 16px;
}

.score-main h5 i {
    display: inline-block;
    margin-right: 5px;
}

.score-main h5 span {
    font-size: 14px;
}

.score-main .task-explain-content {
    padding: 26px 12px 26px 20px;
}

.score-main .task-explain-content a {
    color: #00ac6f;
}

.score-main .score-help {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 13px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #00ac6f;
    margin-right: 10px;
}

.score-main .score-help i {
    display: inline-block;
    font-size: 10px;
    margin: 0;
}

.score-main .title-icon {
    position: absolute;
    left: 85px;
}

.score-main .score-list,
.score-main .score-list-title {
    margin: 0 15px;
    padding: 0 30px;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
}

.score-main .score-list-hover:hover {
    background-color: #f5f5f5;
}

.score-main .score-list div {
    font-size: 14px;
    padding: 15px 0;
}

.score-list div {
    word-break: break-all;
}

.score-main .score-none {
    margin: 150px auto 135px auto;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.score-main .score-none img {
    display: inline-block;
    margin: 10px 0;
}

.score-main .score-none span {
    display: inline-block;
}

/*请假页面*/

.leave .task-explain-content {
    padding: 26px 29px;
}

.leave-top {
    padding: 15px 30px;
    font-size: 16px;
}

.leave-top .row div {
    line-height: 30px;
}

.leave-top .leave-name {
    cursor: pointer;
    color: #29b078;
}

.leave-top .leave-span {
    color: #999;
}

/* ==========================================
    task-footer-apply 底部报名入口
   ========================================== */

.task-footer-apply {
    margin-bottom: 20px;
    border: 1px solid #dddddd;
    border-bottom: 1px solid #d4d4d4;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/task-footer-apply.png") no-repeat center;
    background-size: cover;
}

.vis-hidden {
    visibility: hidden;
}

.apply-items-wrap {
    padding: 20px 24px 8px 0;
    max-width: 660px;
    width: 100%;
    text-align: center;
    /*background-color: red;*/
}

.apply-items-wrap > li > div {
    float: left;
    height: 64px;
    background-color: #fff;
}

.apply-item {
    margin-bottom: 12px;
    cursor: pointer;
}

.apply-items-wrap h4 {
    font-size: 15px;
    font-weight: bold;
}

.apply-items-wrap h5 {
    font-size: 14px;
}

.apply-items-wrap a {
    font-size: 16px;
    width: 120px;
    line-height: 50px;
    border-radius: 0 4px 4px 0;
}

.apply-items-wrap span {
    font-size: 28px;
    color: #ff8d4d;
}

.apply-items-wrap .apply-feature {
    width: 100%;
    max-width: 240px;
    /*border-radius: 4px;*/
}

.apply-feature {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.apply-items-wrap .apply-price {
    line-height: 64px;
    width: 280px;
}

.apply-items-wrap .apply-button-wrap {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.apply-button-wrap {
    border-radius: 0 4px 4px 0;
}

@media screen and (max-width: 720px) {
    .apply-items-wrap {
        padding: 20px 24px 8px 24px;
    }

    /*前人的响应式的圆角没写好，修改了一下*/
    .apply-feature {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .apply-items-wrap .apply-feature,
    .apply-price,
    .apply-button-wrap {
        width: 100% !important;
        max-width: 720px;
    }

    .apply-button-wrap {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .apply-items-wrap .apply-button-wrap {
        padding-bottom: 10px;
    }

    .apply-items-wrap a {
        line-height: 40px;
    }
}

/* ==========================================
    task-footer-apply 底部报名入口结束
   ========================================== */

.recommend-msg {
    float: left;
    width: 90px;
    padding: 0 5px 0 15px;
}

.row-p {
    padding: 10px 0;
}

.tab-title {
    float: left;
    width: 90px;
    padding: 0 0 0 15px;
}

.tab-label {
    line-height: 40px;
}

.tab-text {
    padding: 10px 0;
    margin: 0;
}

.title-blank-padding {
    padding: 0 30px 15px 30px;
    /*padding: 0 0px 15px 0px;*/
    margin: 0;
    border-bottom: 1px solid #e2e2e2;;
}

.btn-cancel {
    border: 1px solid #ccc;
    background-color: transparent;
}

.btn-cancel:hover {
    opacity: .7;
}

.title-blank-class span:hover {
    color: #3c763d;
    cursor: pointer;
}

/*.title-blank-padding span {*/

/*color: #3c763d;*/

/*}*/

.title-blank-padding-single {
    padding: 0 30px 0 30px;
    margin: 0;
}

.title-search-icon {
    position: absolute;
    top: 16px;
    left: 100%;
    margin-left: -60px;
    background: white;
    /*border-bottom: 1px solid #e2e2e2;*/
    /*border-left: 1px solid #e2e2e2;*/
    /*border-right: 1px solid #e2e2e2;*/
    width: 55px;
    height: 25px;
    font-size: 24px;
    color: #777;
    text-align: center;
    cursor: pointer;
}

.title-magnifier-icon {
    position: absolute;
    top: 16px;
    left: 100%;
    margin-left: -40px;
    background: white;
    font-size: 24px;
    color: #777;
    text-align: center;
    cursor: pointer;
}

.title-content {
    padding: 0 0 15px 10px;
    margin: 0;
    border-bottom: 1px dashed #d9d9d9;
}

.title-time {
    color: #00bb78;
    padding-right: 20px;
}

.Sort-name {
    width: 114px;
    text-indent: 30px;
    font-weight: bold;
    display: inline-block;
    color: black;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    position: relative;
}

.border-right {
    border-right: 1px solid #e8e8e8;
}

.Sort-name-up {
    position: absolute;
    top: 5px;
    right: 20px;
    color: #c5c3c3;
}

.Sort-name-down {
    position: absolute;
    top: 5px;
    right: 20px;
    color: #c5c3c3;
}

.sort-arrow-up {
    position: absolute;
    top: 18px;
    right: 25px;
    color: #c5c3c3;
}

.sort-arrow-down {
    position: absolute;
    top: 18px;
    right: 25px;
    color: #c5c3c3;
}

/* ==========================================
    recommend page 职业推荐
   ========================================== */

.hall-card {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #edf1f2;
    table-layout: fixed;
    height: 472px;
    cursor: pointer;
}

.hall-card tr {
    border-bottom: 1px solid #edf1f2;
}

.hall-card td {
    padding: 10px;
    min-height: 65px;
    color: #999999;
    font-size: 12px;
    /*vertical-align: top;*/
    border-right: 1px solid #edf1f2;
}

.hall-card td.ellipsis {
    overflow: hidden;
    max-width: 100%;
    text-overflow: clip;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
}

.hall-card td.ellipsis::after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 39px;
    background: #fff;
}

.hall-card tr:last-child,
.hall-card td:last-child {
    border: none;
}

.hall-card .thumb {
    float: left;
    margin-right: 15px;
    max-width: 138px;
    border: 1px solid #e8e8e8;
}

.hall-card h4,
.hall-card p {
    color: #333;
}

.hall-card span {
    color: #ff5b00;
}

.hall-card a {
    font-size: 14px;
    color: #fff;
}

.hall-card-student {
    position: absolute;
    right: 20px;
    top: 135px;
    padding-left: 20px;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/study-num_03.png") no-repeat left center;
}

.hall-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 67px;
}

.hall-card-basic {
    /*display: inline;*/
    /*height: 18px;*/
    /*line-height: 18px;*/
    width: 100%;
    height: 20px;
    overflow: hidden;
    zoom: 1;
}

.hall-card-basic .con {
    float: left;
    margin-right: 15px;
    overflow: hidden;
    height: 18px;
}

.hall-card-basic .dot {
    float: right;
    margin-top: -18px;
    width: 15px;
    height: 18px;
}

.hall-card-year {
    height: 76px;
}

.hall-card-year td {
    padding: 0;
}

.hall-card-year .row {
    padding: 10px;
    height: 38px;
    line-height: 18px;
}

.hall-card-year hr {
    margin: 0;
    height: 0;
    width: 100%;
    border-top: 0;
    border-bottom: 1px solid #edf1f2;
}

.hall-card-start {
    height: 55px;
}

.start-bg-29b078 {
    background: #29b078;
}

.start-bg-29b078:hover {
    background: #31bd81;
}

/* ==========================================
    小课堂相关
   ========================================== */

.arrange-list li {
    padding: 20px 0px;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
}

.arrange-list li:hover {
    background-color: #f4f4f4;
}

.arrange-list li h5 {
    margin: 12px 0 20px 0;
    font-size: 16px;
    cursor: pointer;
}

.arrange-list li a {
    display: flex;
    align-items: center;
}

.arrange-preview h5 {
    margin: 0 0 20px 0;
}

.arrange-preview h5 a {
    display: flex;
    align-items: center;
}

.arrangeList-previewImg {
    float: left;
    margin-right: 20px;
    width: 200px;
    height: 120px;
    background-size: 100% 100%;
}

.arrangeList-title {
    display: inline-block;
    max-width: 448px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-text {
    display: flex;
    align-items: center;
    padding-left: 6px;
    width: 42px;
    height: 18px;
    font-size: 12px;
    color: #fff;
    background: url(../images/offline/preview.png) no-repeat;
}

.arrange-list-data {
    font-size: 14px;
    color: #333;
    width: 100%;
}

.arrange-list-data div {
    line-height: 1;
    margin: 10px 0;
}

.arrange-list-data span {
    font-size: 12px;
    color: #999;
}

.arrange-ico {
    position: absolute;
    right: 0;
    top: 10px;
    margin-right: 10px;
    color: #666;
}

.arrange-ico-num {
    text-align: center;
    margin-right: 5px;
    display: inline-block;
}

.smallClass-upload-image {
    border-style: none;
    width: 200px;
    height: 120px;
    background: url("../images/offline/upload.png") no-repeat;
}

.smallClass-upload-image .uploader-box {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}

.smallClass-upload-image .uploader-box-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-size: 100% 100%;
}

.arrange-preview-title {
    padding: 6px 14px;
    color: #fff;
    background: #56b179;
}

.btn-switch-group {
    display: flex;
    justify-content: space-between;
    margin: -15px 0 0 0;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
}

.btn-switch {
    display: flex;
    width: 230px;
    font-size: 16px;
}

.btn-switch .btn-wrap {
    display: flex;
    justify-content: center;
    padding: 27px 0;
    width: 50%;
}

.btn-switch .btn-wrap.active {
    border-bottom: 1px solid #00bb78;
    color: #00bb78;
}

.btn-switch .btn-wrap button {
    width: 100%;
    background: transparent;
}

.btn-division-right {
    border-right: 1px solid #00bb78;
}

.btn-division-left {
    border-left: 1px solid #00bb78;
}

.join-offline {
    display: flex;
    align-items: center;
}

.schedule-search-form {
    padding-right: 15px;
    overflow: hidden;
}

.schedule-search-form h5 {
    display: flex;
    align-items: center;
}

.schedule-search-form h5 > div {
    flex-grow: 1;
}

.schedule-search-text {
    width: 100%;
    height: 30px;
    text-indent: 10px;
    outline-style: none;
    border-radius: 2px;
}

.schedule-search-form h5 span {
    padding: 0 11px 0 15px;
    font-weight: 400;
}

.schedule-search-group {
    justify-content: flex-end;
}

.schedule-search-group button {
    padding: 10px 30px;
    line-height: 1;
}

.schedule-title {
    display: flex;
    padding: 30px 15px;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
}

.schedule-title-today {
    display: flex;
    align-items: center;
}

.calendar {
    padding: 30px;
}

.fc-content-skeleton {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
}

.fc-content-skeleton table {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
}

.fc-content-skeleton table tbody tr td a {
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
}

.fc-title {
    display: block;
    padding: 0 10px 15px;
    font-size: 14px;
    word-break: break-all;
    word-wrap: break-word;
    box-sizing: border-box;
    line-height: 2;
}

.fc-center h2 {
    padding-top: 2px;
    font-size: 14px;
    font-weight: 400;
}

.fc-button {
    border: none;
    height: auto !important;
    background: transparent;
    box-shadow: none;
}

.fc-button:hover {
    color: #FF8D4D;
}

.fc-day-header {
    padding-top: 19px !important;
    border-left: none !important;
    border-right: none !important;
    height: 50px;
    background: #f8f8f8;
}

.fc-day-number {
    margin-right: 50% !important;
    transform: translateX(50%);
}

.fc-event-container {
    /* text-align: center; */
}

.fc-event-container a {
    border: none;
    border-radius: 0;
    color: #333;
    background: transparent;
}

.fc-event:hover {
    position: relative;
    z-index: 999;
    color: #333 !important;
    background: #ff8d4d;
    /* box-shadow: 0px 0px 13.8px 1.2px rgba(197, 197, 197, 0.85); */
}

.fc-content {
    line-height: 1.8;
    white-space: normal !important;
}

.fc-bgevent {
    position: relative;
    z-index: -1;
    opacity: 1;
}

/* modal */
.scheduleDetail-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================
    daily list page 日报列表
   ========================================== */

.daily-list {
}

.submit-btn {
    padding: 6px 26px;
}

.daily-list li {
    padding: 20px 0px;
    margin: 0 30px;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
}

.daily-list li:last-child {
    border-bottom: none;
}

.daily-list li .thumb {
    float: left;
    margin-right: 20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.daily-list li img {
    width: 85px;
    height: 85px;
}

.daily-list li h5 {
    padding: 13px 0 15px 0;
    font-size: 16px;
    cursor: pointer;
    margin: 0;
}

/*.daily-list li h5 span {*/

/*color: #333;*/

/*}*/

.daily-list li a {
    font-size: 16px;
    margin-left: -7px;
}

.daily-list li p.lead {
    font-size: 16px;
}

.daily-ico {
    position: absolute;
    right: 0;
    margin-right: 10px;
    color: #666;
}

.daily-ico-num {
    text-align: center;
    margin-right: 5px;
    display: inline-block;
}

.daily-ico-num1 {
    text-align: center;
    font-size: 10px;
    margin-right: 5px;
    display: inline-block;
}

.daily-seniors-tips {
    position: absolute;
    left: 30px;
    top: 65px;
    width: 250px;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px #e8e8e8;
    background: white;
    text-align: left;
    /*border: 1px solid gray;*/
}

.daily-seniors-tips:before {
    content: " ";
    position: absolute;
    top: -15px;
    left: 35px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #e8e8e8;
    border-right: 15px solid transparent;
}

.daily-seniors-tips:after {
    content: " ";
    position: absolute;
    top: -14px;
    left: 36px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-bottom: 14px solid #ffffff;
    border-right: 14px solid transparent;
}

/*.daily-seniors-level{*/

/*display:inline-block;*/

/*padding: 0 10px;*/

/*border-radius:15px;*/

/*color: #ffffff;*/

/*font-size:12px;*/

/*}*/

/*.daily-seniors-level-1{*/

/*background-color: #b6b6b6;*/

/*border: 2px solid #a4a4a4;*/

/*}*/

/*.daily-seniors-level-2{*/

/*background-color: #0cbbad;*/

/*border: 2px solid #009e91;*/

/*}*/

/*.daily-seniors-level-3{*/

/*background-color: #1cc069;*/

/*border: 2px solid #00a94f;*/

/*}*/

/*.daily-seniors-level-4{*/

/*background-color: #d37cf3;*/

/*border: 2px solid #c259e8;*/

/*}*/

/*.daily-seniors-level-5{*/

/*background-color: #f36363;*/

/*border: 2px solid #df4141;*/

/*}*/

/*.daily-seniors-level-6{*/

/*background-color: #ffb412;*/

/*border: 2px solid #e89f00;*/

/*}*/

.daily-list li p {
    /*padding-top: 5px;*/
    font-size: 12px;
    color: #666;
}

.daily-list li p span {
    color: #333;
}

.daily-list li:hover {
    background-color: #f4f4f4;
}

.daily-list .btn {
    margin-right: 5px;
}

/*.daily-list-minHeight {*/

/*min-height: 470px;*/

/*}*/

.daily-list-data {
    font-size: 12px;
    color: #666;
    width: 100%;
}

.daily-list-data span {
    color: #666 !important;
}

@media (max-width: 992px) {
    .clear-daily-float {
        float: none;
    }
}

.dailyList-padding-left--7 {
    padding-left: -7px;
}

.dailyList-judge {
    padding: 2px 8px !important;
    font-size: 16px !important;
}

.dailyList-mission {
    color: #999 !important;
}

.daily-color-green {
    color: #fff !important;
    font-size: 12px;
    border-radius: 3px;
    background-color: #29b078;
    padding: 2px 5px;
    display: inline-block;
}

.daily-color-orange {
    color: #fff !important;
    font-size: 12px;
    border-radius: 3px;
    background-color: #ff6f00;
    padding: 2px 5px;
    display: inline-block;
}

.daily-color-red {
    color: #fff !important;
    font-size: 12px;
    border-radius: 3px;
    background-color: #b5b5b5;
    padding: 2px 5px;
    display: inline-block;
}

.daily-student {
    line-height: 20px;
}

.daily-student .tab-span {
    padding: 0 36px 15px 36px !important;
}

/* ==========================================
    personal class page 个人班级页面
   ========================================== */

.class-guide {
    padding: 20px 0;
}

.class-guide h2 {
    color: #29B078;
    font-size: 26px;
    text-align: center;
}

.class-guide h3 {
    padding: 12px 0 64px 0;
    font-size: 20px;
    color: #666666;
    text-align: center;
}

.class-breadcrumb {
    margin-bottom: 30px;
    text-align: center;
}

.class-breadcrumb li:nth-child(odd) {
    display: inline-block;
    vertical-align: middle;
    color: #666666;
}

.class-breadcrumb li:nth-child(even) {
    display: inline-block;
    vertical-align: middle;
    color: #29b078;
    margin: 0 10px;
}

.class-breadcrumb li span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    color: #ffffff;
    background-color: #29b078;
}

@media screen and (max-width: 768px) {
    .class-breadcrumb li:nth-child(odd) {
        display: block;
        margin: 0 auto;
    }

    .class-breadcrumb li:nth-child(even) {
        display: block;
        padding-bottom: 15px;
        vertical-align: middle;
        color: #29b078;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        /* IE 9 */
        -moz-transform: rotate(90deg);
        /* Firefox */
        -webkit-transform: rotate(90deg);
        /* Safari and Chrome */
        -o-transform: rotate(90deg);
        /* Opera */
    }
}

.class-guide-intro {
    margin: 0 auto;
    padding: 48px 0;
    width: 80%;
    background-color: #f8f8f8;
    border: 1px solid #eeeded;
    border-radius: 4px;
}

.class-guide-intro-box {
    float: left;
    width: 50%;
    position: relative;
}

.class-guide-intro-box:first-child {
    border-right: 1px solid #eeeded;
}

.class-guide-intro-box .girl-code {
    max-width: 135px;
    position: absolute;
    left: 10px;
    top: 133px;
    z-index: 10;
}

.class-guide-intro-box img.girl {
    float: left;
    margin: 0 20px 0 40px;
    max-width: 91px;
    cursor: pointer;
}

.class-guide-intro-box .shy-girl {
    max-width: 81px !important;
}

.class-guide-intro-box h4 {
    margin: 5px 0 10px 0;
    font-size: 14px;
}

.class-guide-intro-box p {
    margin-bottom: 20px;
    font-size: 12px;
}

.class-guide-intro-box .class-guide-tip {
    color: #c1c1c1;
    padding-top: 10px;
    font-size: 12px;
}

.class-guide-intro-text {
    float: left;
}

.class-center-list {
    padding: 20px 15px;
    border-bottom: 1px #e2e1e1 dashed;
    margin: 0;
}

.class-center-list .class-info {
    cursor: pointer;
}

.class-center-list img {
    width: 90px;
    height: 90px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.class-center-list > div:not(:first-child) {
    padding-top: 20px;
}

.class-center-list p {
    margin-bottom: 10px;
}

.class-center-list p span {
    color: #66c097;
}

.class-center-dashed {
    padding: 15px 30px;
    border: 1px #e2e1e1 dashed;
    text-align: center;
}

.class-center-light > div {
    padding: 20px 0 0 60px;
}

.class-study-step {
    display: flex;
    justify-content: space-between;
    padding: 35px 25px 50px 25px;
}
.study-steps {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* align-items: center; */
}
.study-steps .three-steps {
    display: flex;
}
.study-steps .three-steps .steps-star {
    padding-top: 35px;
    margin-top: -5px;
    margin-left: 20px;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/star-empty.png") no-repeat top center / contain;
}
.steps-full-star {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/star-full.png") no-repeat top center / contain!important;
}
.steps-hint {
    position: relative;
}
.steps-hint-icon {
    margin-left: 30px;
    width: 16px;
    height: 16px;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/hint-icon.png") no-repeat center center / contain;
    cursor: pointer;
}
.steps-hint-content {
    position: absolute;
    left: -5px;
    top: 35px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 3px;
    width: 290px;
    box-shadow: 0 0 6px 3px #eee;
    background: #fff;
}
.steps-hint-content::after {
    content: "";
    position: absolute;
    left: 30px;
    top: -20px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #eee transparent; 
}
.steps-hint-content::before {
    content: "";
    position: absolute;
    left: 30px;
    top: -18px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    z-index: 10;
    border-color: transparent transparent #fff transparent; 
}
.study-step .deadline {
    
}
.class-study-step .buttons button {
    margin-right: 140px;
}
@media screen and (max-width: 768px) {
    .class-study-step {
        padding: 25px;
    }
    .study-steps {
        flex-direction: column;
    }
    .study-step .deadline {
        margin-top: 25px;
    }
    .class-study-step .buttons button {
        margin: 0;
    }
}

/* ==========================================
    occupation page 单个职业页面
   ========================================== */

.occupation-intro {
    padding: 30px;
}

.margin-top10 {
    margin-top: 9px;
}

.occupation-intro img {
    margin-right: 30px;
    width: 140px;
    height: 140px;
}

.occupation-intro p {
    line-height: 24px;
    color: #333;
    font-size: 12px;
}

.occupation-intro .inline-block {
    display: inline-block;
}

.occupation-intro p span,
.occupation-intro p i {
    color: #ff650e;
}

.occupation-intro-section {
    padding: 0 30px;
    position: relative;
}

.occupation-intro-section dt {
    width: 82px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: #29b078;
}

.occupation-intro-section dd {
    padding: 15px 0;
    border-top: 1px solid #29b078;
    font-size: 12px;
}

.occupation-intro-section-content {
    margin: 0;
    padding: 0;
    border: none;
    white-space: pre-wrap;
    background-color: #fff;
    font-family: "Noto Sans SC", Helvetica, Arial, FreeSans, Arimo;
    font-size: 12px;
    line-height: 1.6;
}

.occupation-intro p .occupation-pay-time,
.occupation-intro p .occupation-pay-salary {
    color: #333;
}

/*图表*/

.charts-form {
    position: absolute;
    top: 16%;
    left: 7.5%;
    font-size: 14px;
}

.charts-form-width01 {
    display: inline-block;
    width: 20px;
}

.charts-form-width02 {
    display: inline-block;
    width: 10px;
}

.charts-select {
    width: 70px;
    height: 25px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid #d9d9d9;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/charts-select-icon.png") no-repeat right;
}

.charts-btns {
    margin-left: 90px;
}

.charts-btn {
    background: #fff;
    color: #ff4b00;
    width: 65px;
    height: 26px;
    text-align: center;
    padding: 0;
    border: 1px solid #ff4b00;
    margin: 20px 20px 0 0;
    border-radius: 3px;
}

.charts-btn-active {
    background: #ff4b00;
    color: #fff;
}

/* ==========================================
    task page 职业任务页面
   ========================================== */

.task-failReason {
    background-color: #fdf4d2;
    margin-bottom: 0;
    border: 1px solid #fbe17f;
    padding-bottom: 15px;
}

.task-failReason span {
    text-decoration: underline;
    color: #ef602f;
    cursor: pointer;
}

.task-detail-title {
    position: relative;
    overflow: hidden;
    margin-top: 0;
}

.task-detail-description {
    margin-bottom: 10px;
    margin-top: 20px;
}

.color-red {
    color: red !important;
}

.task-tab .nav-tabs {
    margin-top: -15px;
}

.task-tab .nav-tabs {
    background: #f5f5f5;
}

@media screen and (max-width: 768px) {
    .task-tab .nav-tabs > li {
        width: 100%;
        text-align: center;
    }
}

.task-tab .nav-tabs > li:first-child {
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.task-tab .nav-tabs > li > a {
    padding: 10px 40px;
    line-height: 40px;
    color: #999;
    background: transparent;
    border-radius: 0;
}

.task-tab .nav-tabs > li > a:hover {
    border-color: transparent;
}

.task-tab .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    color: #1db276;
    background: #fff;
    /*background: #00d079;*/
    border: 1px solid transparent;
}

.task-section {
    margin: 0 40px;
    padding: 40px 0;
    border-bottom: 1px dashed #e2e2e2;
}

.task-section i {
    font-size: 16px;
}

.task-section-table {
    margin: 30px 0;
}

.task-section-table-th {
    text-align: center;
    font-size: 20px;
    color: #666;
}

.task-section-table-td {
    height: 48px;
    text-align: left;
    padding: 0 20px 0 70px;
}

.task-section .table-color {
    background-color: #f6f9f9;
}

.task-section:last-child {
    border-bottom: none;
}

.task-section-btn {
    color: #29b078;
}

.task-section-more {
    margin-left: 10px;
    color: #4792fd;
    display: inline-block;
}

.task-section-more:hover {
    color: #4792ff;
}

.task-section-btn:hover {
    color: #29b078;
    border-bottom: 1px solid #29b078;
}

.task-section h5 {
    margin-left: -10px;
    padding-left: 7px;
    border-left: 3px solid #1db276;
    line-height: 1em;
    font-weight: bold;
}

.task-section p {
    line-height: 26px;
}

.task-section .task-line {
    padding-left: 0;
}

.task-section .task-index {
    display: inline-block;
    width: 30px;
}

.task-section .btn-green {
    width: 60px;
    padding: 5px;
    background-color: #29b078 !important;
    color: #fff;
    border-radius: 3px;
}

.task-section .task-answer {
    margin-left: 30px;
}

.task-style-list {
}

.task-style-list dl {
    margin-top: 20px;
}

.task-style-list dd {
    position: relative;
    padding-left: 8px;
    /*display: inline-block;*/
    margin: 10px 0 0 0
}

.task-style-list-true {
    position: absolute;
    right: 0;
    font-weight: bold;
    color: #1db276;
}

.task-style-list dd:before {
    content: '';
    position: absolute;
    left: 0;
    top: 40%;
    width: 4px;
    height: 4px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #1db276;
}

.task-styless-list {
    overflow: hidden;
    zoom: 1;
}

.task-styless-list li {
    margin-right: 20px;
    float: left;
}

.task-styless-list li a {
    margin: 10px 20px 0 0;
}

.task-styless-list li a:hover {
    color: #1da96e;
}

.task-card {
    position: relative;
    height: 268px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
}

.task-card:hover {
    -webkit-box-shadow: 0 0 10px #eee;
    -moz-box-shadow: 0 0 10px #eee;
    box-shadow: 0 0 10px #eee;
    cursor: pointer;
}

.task-card h6 {
    height: 57px;
    padding: 20px 20px 0 20px;
    font-size: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    word-break: break-all;
}

.task-card p {
    margin-bottom: 15px;
    line-height: 1.4em;
    height: 5.6em;
    overflow: hidden;
    word-break: break-all;
}

.task-card .foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 20px;
    text-align: right;
    height: 40px;
    line-height: 40px;
    background: #f7f7f7;
    border-radius: 0 0 5px 5px;
}

.task-person {
    position: relative;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid #eee;
    overflow: hidden;
    zoom: 1;
    cursor: pointer;
}

.task-person .tag {
    position: absolute;
    top: 0;
    right: 8px;
    width: 1.4em;
    height: 1.5em;
    text-align: center;
    color: #fff;
}

.task-person .tag::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 0;
    border-top: 3px solid #ddd;
    border-right: 0.6em solid #fff;
    border-left: none;
}

.task-person .tag::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 0;
    height: 0;
    border-top: 3px solid #ddd;
    border-left: 0.6em solid #fff;
    border-right: none;
}

.task-person .green.tag,
.task-person .green.tag::before,
.task-person .green.tag::after {
    background: #1db276;
    border-top-color: #1db276;
}

.task-person .grey.tag,
.task-person .grey.tag::before,
.task-person .grey.tag::after {
    background: #999;
    border-top-color: #999;
}

.task-person .red.tag,
.task-person .red.tag::before,
.task-person .red.tag::after {
    background: #ff5d03;
    border-top-color: #ff5d03;
}

.task-person .blue.tag,
.task-person .blue.tag::before,
.task-person .blue.tag::after {
    background: #39a8d1;
    border-top-color: #39a8d1;
}

.task-person .img {
    float: left;
    width: 70px;
    height: 90px;
    line-height: 90px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.task-person p {
    margin: 15px 0 0 80px;
}

.task-person p:last-child {
    margin: 5px 0 0 80px;
}

.time-line-title:first-child {
    padding-top: 0;
    border-top: 0;
}

.task-line-section {
    border-top: 1px solid #e2e2e2;
}

.task-line-section:first-child {
    border-top: 0;
}

.time-line-description {
    padding: 30px 85px 20px 30px;
    line-height: 2;
}

.task-line {
    padding: 30px 30px 30px 90px;
}

.task-line li {
    position: relative;
    padding: 0 0 30px 20px;
    border-left: 1px solid #bbb;
    line-height: 1.2em;
}

.task-line .line-last {
    border-left: none;
}

.task-line li::after {
    position: absolute;
    content: '';
    left: -9px;
    top: -1px;
    width: 18px;
    height: 18px;
    border: 1px solid #bbb;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
}

.task-line li:last-child {
    padding: 0 0 0 20px;
}

.task-line-add {
    padding: 15px 20px 15px 15px;
    color: #00bb78;
}

.task-explain {
    position: relative;
    color: rgb(130, 199, 156);
}

.task-explain:hover {
    color: #00bb78;
}

/*19期需求*/
.occupationSurvey {
    padding: 0 0 20px 0;
}

.occupationSurveyPie {
    display: inline-block;
    padding: 0 10px 0 20px;
}

.occupationPie {
    padding: 0 10px 0 10px;
    margin-top: -10px;
    text-align: center;
    font-size: 12px;
}

.oidDataSummary {
    display: inline-block;
    float: left;
    width: 75px;
}

.oidDataSummaryText {
    float: left;
    width: calc(100% - 75px);
    line-height: 23px;
}

.taskSurvey {
    margin: 20px 0;
    border: 1px solid #e8e8e8;
    background: #ffffff;
    border-radius: 5px;
}

.taskSurvey-top {
    padding: 10px 20px 0;
}

.taskSurvey-title-left {
    padding: 20px 0;
    font-size: 16px;
    font-weight: bold;
}

.taskSurvey-title-right {
    padding: 20px 0;
    color: #999;
    text-align: right;
}

.taskSurvey-content {
    padding: 0 10px 20px;
}

.taskSurveyCard {
    display: inline-block;
    position: relative;
    height: 270px;
    margin: 15px 10px;
    border-radius: 8px;
    text-align: left;
    box-shadow: -1px 7px 20px 3px #e8e8e8;
    vertical-align: top;
    cursor: pointer;
}

canvas {
    cursor: pointer;
}

.task-current-status {
    margin: 0;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

.taskIntro {
    height: 60px;
    padding: 20px 20px 0;
    margin: 0;
}

.taskPie {
    display: inline-block;
    float: left;
    width: 39%;
    padding: 0;
    cursor: pointer;
    text-align: -webkit-center;
}

.taskIntroDetail {
    display: inline-block;
    width: calc(100% - 39%);
    padding: 0 20px 0 5px;
    margin-top: 10px;
    color: #999;
    vertical-align: top;
    font-size: 14px;
}

.Lv {
    padding: 0 5px 2px 2px;
}

.taskPieNum {
    position: absolute;
    top: 10px;
    left: -120px;
    padding: 15px 20px;
    background: #ffffff;
    font-size: 12px;
    box-shadow: 0 0 2px 2px #e8e8e8;
    border-radius: 10px;
    text-align: left;
    z-index: 99;
}

.taskPieNumStep1, .taskPieNumStep2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.taskPieNumStep1 {
    background: #00c37e;
}

.taskPieNumStep2 {
    background: #dfdfdf;
}

.taskSurveyFooter {
    position: absolute;
    width: 100%;
    padding: 10px 20px 20px;
    background: #ffffff;
    box-shadow: -5px 0 8px -7px #ccc, /*左边阴影*/ /*0 -5px 5px -5px #ccc, !*顶部阴影*!*/ 0 5px 10px -5px #ccc, /*底部阴影*/ 3px 0 7px -5px #ccc; /*右边阴影*/
    border-radius: 0 0 5px 5px;
    z-index: 100;
}

/*.taskSurveyFooter:active {*/
/*box-shadow: -5px 0 4px -7px #ccc, !*左边阴影*!*/
/*!*0 -5px 5px -5px #ccc, !*顶部阴影*!*!*/
/*0 5px 5px -5px #ccc,!*底部阴影*!*/
/*3px 0 6px -5px #ccc;!*右边阴影*!*/
/*}*/
.taskDescription {
    display: none;
    border-top: 1px dashed #ccc;
    line-height: 20px;
    padding: 20px 0;
    margin: 0;
    background: #ffffff;
    font-size: 14px;
}

.taskSurveyBtn {
    background: #ffffff;
}

.taskDetailBtn {
    width: 100%;
    height: 40px;
    background: #ffffff;
    color: rgba(255, 75, 0, 1);
    border: 1px solid rgba(255, 75, 0, 1);
}

.taskDetailBtn.active {
    width: 48%;
}

.taskDetailBtn:hover {
    color: rgba(255, 75, 0, 0.6);
    border: 1px solid rgba(255, 75, 0, 0.6);
}

.getTaskAction {
    float: right;
    width: 48%;
    height: 40px;
    background: rgba(255, 75, 0, 1);
    color: #ffffff;
}

.getTaskAction:hover {
    background: rgba(255, 75, 0, 0.6);
}

.apply-price-del {
    display: inline-block;
    width: 45px;
}

.apply-price-line {
    display: inline-block;
    padding-left: 5px;
    width: 100px;
    text-align: left;
}

.taskSurveyPeroration {
    margin: 20px 0;
    padding: 30px 20px;
    border: 1px solid #e8e8e8;
    background: #ffffff;
    border-radius: 5px;
    line-height: 26px;
}

/*任务描述动画效果*/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        opacity: 0.7; /*中间状态 透明度为0*/
    }
    75% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}

.taskDescription {
    -webkit-animation-name: fadeIn; /*动画名称*/
    -webkit-animation-duration: 0.6s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    -webkit-animation-delay: 0s; /*延迟时间*/
}

@media (max-width: 736px) {
    .taskSurveyCard {
        width: 100%;
    }
}

@media screen and (min-width: 736px) and (max-width: 1200px) {
    .taskSurveyCard {
        width: 47%;
    }
}

@media (min-width: 1200px) {
    .taskSurveyCard {
        width: 31%;
    }
}

/*审核说明的shadow加三角效果*/

.task-explain-content {
    position: absolute;
    right: -19px;
    top: 60px;
    width: 395px;
    padding: 26px;
    line-height: 20px;
    /*border: 1px solid #666;*/
    border-radius: 5px;
    background-color: white;
    z-index: 10;
    box-shadow: 0 0 10px 2px #e8e8e8;
    text-align: left;
}

.task-explain-content:before {
    content: " ";
    position: absolute;
    top: -15px;
    right: 35px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #e8e8e8;
    border-right: 15px solid transparent;
}

.task-explain-content:after {
    content: " ";
    position: absolute;
    top: -14px;
    right: 36px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-bottom: 14px solid #ffffff;
    border-right: 14px solid transparent;
}

.more {
    margin: 10px 0 4px;
    float: right;
}

/*职业概况*/
.border-shade-left {
    /*渐变的边框*/
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: -webkit-linear-gradient(top, #ffffff 30%, #c2c2c2 56%, #fafafa 100%);
    background: -moz-linear-gradient(top, #ffffff 30%, #c2c2c2 56%, #fafafa 100%);
    background: linear-gradient(top, #ffffff 30%, #c2c2c2 56%, #fafafa 100%);
    background: -o-linear-gradient(top, #ffffff 30%, #c2c2c2 56%, #fafafa 100%);
}

.border-shade-left {
    left: 0;
}

/*结语*/
.text-indent {
    text-indent: 28px;
}

/*任务图标*/

.task-status {
    position: absolute;
    left: -25px;
    top: -8px;
    display: inline-block;
    padding: 20px 15px 5px;
    /*border: 1px solid #000000;*/
    line-height: 1;
    transform: rotate(-45deg);
    font-size: 13px;
}

.taskList {
    display: flex;
}

.task-status-msg {
    /*width:60%;*/
    display: inline-block;
    font-weight: normal;
    font-family: "Noto Sans SC", sans-serif;
    margin-top: 15px;
    z-index: 0;
}

/*未领取*/
.task-status-bgColor1 {
    /*background-color: #dedede;*/
    background-color: #00c37e;
    color: white;
}

/*已领取*/
.task-status-bgColor2 {
    /*background-color: #6697f1;*/
    background: #00b0ff;
    color: white;
}

/*审核中*/
.task-status-bgColor3 {
    /*background-color: #f0642e;*/
    background: #00b0ff;
    color: white;
}

/*未通过*/
.task-status-bgColor4 {
    /*background-color: #ed6256;*/
    background: #ff0000;
    color: white;
}

/*已完成*/
.task-status-bgColor5 {
    /*background-color: #52b377;*/
    background: #6fe6bb;
    color: white;
    z-index: 0;
}

.task-footer-content {
    margin-bottom: 25px;
    height: 151px;
    width: 100%;
    cursor: pointer;
}

.time-line-btn {

    text-align: right;
}

@media screen and (max-width: 768px) {
    .content > h5 {
        line-height: 34px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .time-line-btn {
        display: block;
        text-align: right;
    }

    .time-line-btn button {
        /*float: none !important;*/
        /*display: inline-block;*/
    }

    .time-line-description {
        padding: 15px 30px 15px 30px;
    }
}

/* ==========================================
    task detail carousel 任务后轮播图
   ========================================== */

.task-detail-student-work {
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 0 10px #eee;
    overflow: hidden;
}

@media (max-width: 992px) {
    .task-detail-student-work {
        width: 210px;
        margin: 0 auto;
    }
}

.task-detail-carousel-left {
    position: absolute;
    left: -10px;
    top: 40%;
}

.task-detail-carousel-right {
    position: absolute;
    right: -10px;
    top: 40%;
}

.task-detail-carousel-right:hover,
.task-detail-carousel-left:hover {
    box-shadow: 0 0 10px #eee;
}

.clear-margin-bottom {
    margin-bottom: 0;
}

/* ==========================================
    skill material 技能推荐文档
   ========================================== */

.material-card {
    position: relative;
    height: 268px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 5px;
    background: #fff;
}

.material-card:hover {
    text-decoration: none;
    box-shadow: 0px 0px 10px #e2e2e2;;
}

/*.material-card:hover .intro {*/

/*color: #29b078;*/

/*}*/

.material-card .title {
    padding: 20px 20px 0 20px;
    font-size: 16px;
    /*min-height: 50px;*/
    height: 64px;
    overflow: hidden !important;
    word-break: break-all;
}

.material-card .intro {
    display: block;
    padding: 5px 20px 0 20px;
    height: 100px;
    overflow: hidden;
    line-height: 20px;
    word-break: break-all;
}

.material-card .intro img {
    width: 100%;
}

.material-card .intro b {
    display: block;
    height: 100px;
    text-align: center;
}

.material-card .intro i {
    line-height: 100px;
    font-size: 80px;
}

.material-card .author {
    padding: 5px 20px 0 20px;
    max-height: 45px;
    overflow: hidden;
}

.text-muted-from {
    padding: 5px 20px 0 20px;
    max-height: 45px;
    overflow: hidden !important;
}

.material-card .foot {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 20px 0 0 0;
    padding: 0 20px;
    line-height: 40px;
    background: #f7f7f7;
}

/* ==========================================
    skillMaterial页面已完成本技能用户列表
   ========================================== */

.material-user-card {
    position: relative;
    height: 90px;
    max-width: 264px;
    margin: 40px 0px 10px 0;
    border: 1px solid #e8e8e8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
}

.material-user-card:hover {
    cursor: pointer;
}

.material-user-card-img {
    float: left;
    margin: 16px 20px 16px 20px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
}

.material-user-card-msg {
    margin-top: 25px;
    float: left;
    /*float:left;*/
}

.material-h {
    border-bottom: 1px solid #e2e2e2;
    padding: 0 40px;
    margin: 0;
    line-height: 60px !important;
    font-weight: bold
}

.material-content {
    padding: 0;
    margin: 0 0 15px 0;
}

.material-btn {
    margin-top: 13px;
    padding: 0 35px;
    line-height: 34px;
}

.material-padding {
    padding: 40px;
}

.material-video {
    padding: 20px 0 0 0;
    height: 295px;
}

.material-video-img {
    display: block;
    padding: 0 15px
}

/* ==========================================
    skill tree page 技能详情页面
   ========================================== */

.skill-tree {
    padding: 0 30px;
    border-bottom: 1px solid #e2e2e2;
}

.skill-tree:last-child {
    border: 0;
}

.skill-tree dl {
    position: relative;
    padding: 10px 0 10px 90px;
}

.skill-tree dt {
    position: absolute;
    margin-top: -15px;
    top: 50%;
    left: 0;
    height: 32px;
    line-height: 32px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 0 10px;
    border-radius: 5px;
}

.skill-tree dt::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 100%;
    right: -60px;
    height: 0;
    border-top: 1px solid #ccc;
}

.skill-tree dd {
    position: relative;
    padding: 5px 0 0 30px;
    width: 100px;
    line-height: 40px;
    border-left: 1px solid #ccc;
    background: #fff;
}

.skill-tree dd::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1px;
    width: 30px;
    height: 0;
    border-top: 1px solid #ccc;
    background: #fff;
}

.skill-tree dd::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -1px;
    width: 30px;
    height: 0;
    border-top: 1px solid #ccc;
    background: #fff;
}

.skill-tree dd:first-of-type::before {
    top: 0;
    height: 25px;
    border-top: 0;
    border-bottom: 1px solid #ccc;
}

.skill-tree dd:last-of-type::after {
    bottom: 0;
    height: 25px;
    border-top: 1px solid #ccc;
    border-bottom: 0;
}

.skill-tree dd p {
    margin: 0;
    padding: 0 8px;
    width: 280px;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 40px;
    cursor: pointer;
}

.skill-tree dd p:hover {
    background: rgba(192, 192, 192, 0.22);
    transition: all 300ms linear;
}

.skill-tree dd p a i {
    color: #ccc;
}

.skill-tree dd p:hover a i {
    color: #aaa;
    transition: all 300ms linear;
}

.skill-tree dd span {
    display: inline-block;
    width: 160px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000000;
}

.skill-tree dd a {
    color: #ff650e;
    cursor: pointer;
}

.skill-tree dd a i {
    color: #ccc;
}

.skill-tree dd a:hover {
    text-decoration: none;
    color: #fd9f0b;
}

/* ==========================================
    完成任务的人数
   ========================================== */

.skill-bg {
    position: relative;
    margin: 10px 0 40px 0;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    box-sizing: border-box;
    background: #fff;
}

.skill-bg-h {
    margin: 0;
    line-height: 60px;
    padding: 0 40px;
    font-size: 14px;
    border-bottom: 1px solid #e2e2e2;
}

.skill-bg-btn {
    position: absolute;
    right: 0;
    margin-right: 40px;
    cursor: pointer;
}

.skill-bg-main {
    padding: 40px 50px 40px 50px;
}

.skill-bg-main > ul > li {
    padding: 0 5px 10px !important;
}

.skill-bg-main-item {
    border: 1px solid #e2e2e2;
    overflow: hidden;
    padding: 15px 12px 15px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.skill-bg-main-item:hover {
    background-color: #f4f4f4;
}

.skill-bg-main-item .thumb {
    float: left;
    margin-right: 15px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.skill-bg-main-item-text {
    color: #666;
    font-size: 16px;
}

.skill-bg-main-item p {
    margin: 10px 0 0 0;
}

/* ==========================================
    task solution list page 有问题请教谁页面
   ========================================== */

.task-solution-list {
    position: relative;
    height: 88px;
    margin: 0 -10px;
    color: #999;
    border: 1px solid #e8e8e8;
}

.border-bottom-orange {
    color: #ff5c00;
    border-bottom: 1px solid #ff5c00 !important;
    padding-bottom: 2px;
    display: inline-block;
}

.border-bottom-green {
    color: #1db276;
    border-bottom: 1px solid #1db276 !important;
    padding-bottom: 2px;
    display: inline-block;
    cursor: pointer;
}

.task-solution-list img {
    float: left;
    margin: 9px;
    height: 70px;
    width: 70px;
}

.task-solution-list p {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 24px;
    color: #999;
}

@media (max-width: 992px) {
    .task-solution-list p {
        text-align: center;
    }
}

.task-solution-list .task-solution-flag {
    position: absolute;
    right: 10px;
    top: 0;
    width: 20px;
    height: 17px;
    background-color: #1db176;
    color: #fff;
    text-align: center;
}

.task-solution-list .task-solution-flag:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: -2px;
    width: 0;
    height: 0px;
    border-left: 10px solid #1db176;
    border-right: 10px solid #1db176;
    border-bottom: 3px solid transparent;
}

/* ==========================================
    class list page 班级列表页面
   ========================================== */

.class-list {
}

.class-list-title {
    margin: 0 30px;
    font-size: 14px;
    line-height: 40px;
    border-bottom: 1px dashed #ccc;
}

.class-list-title p {
    float: right;
    color: #999;
    font-size: 12px;
}

.class-list-title p span {
    color: red;
}

.class-list ul {
    overflow: hidden;
    padding-top: 30px;
    width: 100%;
}

.class-list li {
    float: left;
    width: 33%;
}

.class-list-box {
    margin: 0 30px 0 30px;
    padding: 0 1%;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    height: 210px;
    position: relative;
}

/*分院图标*/

.school-status {
    position: absolute;
    right: -40px;
    top: 10px;
    display: inline-block;
    padding: 10px 50px 10px;
    /*border: 1px solid #000000;*/
    line-height: 1;
    transform: rotate(45deg);
    font-size: 13px;
    background-color: #00bb78;
    color: #fbfbfb;
}

.class-list-box p {
    position: relative;
    line-height: 50px;
    text-align: center;
}

/*.class-list-box p */

.class-list-box-num {
    position: absolute;
    right: 10px;
    top: 60px;
    font-size: 14px;
}

.class-list-box > div {
    float: left;
    margin-bottom: 10px;
    width: 33.33%;
    height: 64px;
    text-align: center;
    overflow: hidden;
}

.class-list-box > div img {
    width: 90%;
    height: 100%;
}

.class-list-box .class-daily {
    line-height: 120px;
    font-size: 20px;
    position: relative;
}

.class-list-box .class-daily-num {
    color: #ff4b00;
    font-size: 58px;
}

.class-list-box .class-daily-text {
    position: absolute;
    color: #000;
    font-size: 16px;
    font-weight: normal;
}

.class-list-btn {
    margin: 0 30px 20px 30px;
}

.class-list-btn .btn {
    color: #fff;
}

@media (max-width: 767px) {
    .class-list li {
        width: 100%;
    }

    /*.class-list-box .class-daily-num {*/
    /*color: red;*/
    /*font-size: 50px;*/
    /*}*/
}

@media (min-width: 768px) and (max-width: 979px) {
    .class-list li {
        width: 50%;
    }

    /*.class-list-box .class-daily-num {*/
    /*color: red;*/
    /*font-size: 50px;*/
    /*}*/
}

/* ==========================================
    material list page 学习资料推荐文档列表页面
   ========================================== */

.material {
    table-layout: fixed;
}

.material img {
    width: 70px;
    max-height: 90px;
}

.mater-orderby-th {
    position: relative;
    /*width: 114px;*/
}

.fa-arrow-down {
    right: 20%;
}

.fa-arrow-up {
    right: 20%;
}

@media only screen and (max-width: 767px) {
    .fa-arrow-down {
        right: 6%;
    }
}

@media only screen and (max-width: 400px) {
    .fa-arrow-down {
        right: -4%;
    }
}

.table.material th {
    position: relative;
    text-align: center;
    padding: 15px 3px;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle;
}

.table.material td {
    text-align: center;
    padding: 15px 3px;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle;
}

.material-skill {
    position: relative;
}

.material-skill-detail {
    display: inline-block;
    vertical-align: middle;
}

.material-skill-detail-div {
    height: 20px;
    overflow: hidden;
    background: #29B078;
    border-radius: 2px;
    margin-right: 10px;
    display: inline-block;
    margin-top: 5px;
}

.textarea {
    width: 100%;
    min-height: 30px;
    max-height: 65px;
    position: absolute;
    top: 10px;
    margin-left: auto;
    margin-right: auto;
    outline: 0;
    border: 1px solid grey;
    font-size: 12px;
    line-height: 24px;
    padding: 2px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
}

.material-skill-detail-span {
    display: inline-block;
    text-indent: 5px;
    line-height: 20px;
    padding-right: 2px;
    top: -3px;
}

.material-skill-detail-i {
    float: right;
    margin-right: 4px;
    margin-top: 3px;
}

.material-skill-input {
    width: 100%;
    height: 30px;
    text-indent: 5px;
    /*background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/cloudServer/carj1.png") no-repeat right center;*/
}

.material-skill-add {
    cursor: pointer;
    width: 29px;
    height: 28px;
    vertical-align: middle;
}

.material-button-null {
    padding: 14px 28px;
}

.material-img-close {
    padding: 12px 0
}

/* ==========================================
    class page 班级页面
   ========================================== */

.class-intro {
    padding: 20px 0 0 20px;
    line-height: 65px;
}

.class-intro span {
    color: #999999;
}

.class-mate {
    margin-top: 20px;
    padding: 20px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    *zoom: 1;
}

.class-mate::after {
    display: table;
    clear: both;
    content: "";
}

.class-mate-top {
    position: absolute;
    top: 20px;
    left: 10px;
    z-index: 3;
    color: #fff;
}

.class-mate::before {
    position: absolute;
    content: '';
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/link-title.jpg");
    left: -3px;
    top: 20px;
    width: 92px;
    height: 25px;
    line-height: 23px;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.class-mate-title {
    padding: 30px 0 0 0;
    color: #999;
}

.class-mate-text {
    height: 70px;
    line-height: 24px;
    overflow: hidden;
    word-break: break-all
}

.class-mate-link {
    display: block;
    padding-top: 10px;
    text-align: right;
    color: #999;
}

.class-mate .thumb {
    width: 38px;
    height: 38px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* ==========================================
    banner
   ========================================== */

.my-banner {
    position: relative;
    margin: 25px 0 0 0;
    padding: 0 0 20px 0;
    /*background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/userMessageBg.png");*/
    /*-webkit-background-size: cover;*/
    /*background-size: cover;*/
    /*background-color:#f9f9f9;*/
    background: url('../images/offline/user-nav.png') no-repeat center center / 100% 100%;
    overflow: hidden;
    filter: drop-shadow(0 0 17px #dedede);
    min-height: 198px;
    /*width:170px;*/
    text-align: center;
    box-sizing: border-box;
}

.my-banner:hover {
    cursor: pointer;
}

.my-banner-graduated {
    position: absolute;
    top: 10px;
    left: -42px;
    background: #ff7800;
    color: #ffffff;
    padding: 4px 47px;
    font-size: 14px;
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

.my-banner-cityRight {
    position: absolute;
    top: 13px;
    right: -46px;
    background: #00bb78;
    color: #ffffff;
    padding: 4px 47px;
    font-size: 14px;
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

@media (max-width: 768px) {
    .my-banner-declare {
        /*display: none;*/
    }
}

.my-banner-declare {
    height: 74px;
    word-break: break-all;
    margin-top: 35px;
    color: #fff;
    line-height: 24px;
}

/*.my-banner .my-banner-text img {*/

/*float: left;*/

/*display: inline-block;*/

/*margin-right: 30px;*/

/*width: 90px;*/

/*height: 90px;*/

/*-webkit-border-radius: 50%;*/

/*-moz-border-radius: 50%;*/

/*border-radius: 50%;*/

/*}*/

.my-banner-thumb {
    /*float: left;*/
    /*display: inline-block;*/
    margin-top: 30px;
    /*margin-left:-10px;*/
    width: 80px;
    height: 80px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.my-banner-share {
    margin-top: 40px;
    display: inline-block;
    position: relative;
}

.my-banner .my-banner-share-icon:hover {
    cursor: pointer;
}

.my-banner .my-banner-share-icon:hover + .my-banner-weixin-content {
    display: block;
}

.my-banner-weixin-content {
    position: absolute;
    top: 40px;
    left: -85px;
    width: 210px;
    height: 190px;
    padding-top: 20px;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    text-align: center;
    display: none;
    z-index: 10;
}

.my-banner-activity-weixin {
    margin-bottom: 10px;
}

.my-banner-triangle-1 {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #e8e8e8;
}

.my-banner-triangle-2 {
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #fff;
}

.my-banner-city {
    margin: 0 10px;
}

.my-banner-text {
    display: block;
    /*padding:0 22px;*/
    color: #fff;
    /*line-height: 24px;*/
    text-align: center;
}

.my-banner-text-msg {
    margin-left: 10px;
    margin-right: 10px;
}

.my-banner-icon {
    margin-left: 4px;
}

/* ==========================================
    我的学院底部banner
   ========================================== */

.school-footer {
    position: relative;
}

.school-footer-content {
    margin-bottom: 25px;
    height: 150px;
    width: 100%;
    cursor: pointer;
    text-align: center;
}

.school-footer-close {
    position: absolute;
    top: 5px;
    right: 5px;
}

.close {
    display: none;
}

/* ==========================================
    my data 个人资料页上传图片
   ========================================== */

.uploader-box {
    position: relative;
    width: 130px;
    height: 130px;
    overflow: hidden;
    border: 1px solid #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.uploader-box::after {
    content: '';
    display: block;
    margin-top: 100%;
}

.uploader-box-img {
    width: 130px;
    height: 130px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.uploader-box p,
.uploader-box span {
    position: absolute;
    margin: 0;
    padding-top: 45%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    background: rgba(255, 255, 255, 0.3);
    text-align: center;
    cursor: pointer;
}

.uploader-box:hover p {
    display: block;
}

.uploader-box span {
    display: block;
}

.uploader-box img {
    width: 100%;
}

.uploader-box-box {
    width: 130px;
    height: 130px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* ==========================================
    contact page 等级介绍
   ========================================== */

.level h4 {
    color: #333;
}

.level-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-bottom: 3px;
    vertical-align: middle;
}

.level p {
    font-size: 14px;
    color: #666;
    line-height: 2;
    text-indent: 28px;;
}

.level-icon-1 {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/level/level.png") no-repeat;
    background-position: 0 0;
}

.level-icon-2 {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/level/level.png") no-repeat;
    background-position: 0 -30px;
}

.level-icon-3 {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/level/level.png") no-repeat;
    background-position: 0 -60px;
}

.level-icon-4 {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/level/level.png") no-repeat;
    background-position: 0 -90px;
}

.level-icon-5 {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/level/level.png") no-repeat;
    background-position: 0 -120px;
}

.level-icon-6 {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/level/level.png") no-repeat;
    background-position: 0 -150px;
}

/* ==========================================
    contact page 联系我们
   ========================================== */

.contact_list ul {
    margin-top: 40px;
    text-align: center;
}

.contact_list ul li {
    display: inline-block;
    color: #999;
}

.contact_list ul li i {
    color: #666;
}

.contact_list img {
    max-width: 100px;
    margin-bottom: 15px;
}

@media screen and (max-width: 1199px) {
    .list_mail {
        width: 150px;
    }

    .list_mail i {
        display: block;
        margin-top: 5px;
    }
}

.contact_map {
    margin-top: 50px;
    text-align: center;
}

.contact_map p {
    height: 20px;
    margin-top: 10px;
    margin-left: 55px;
    text-align: left;
    color: #999;
}

.contact_map p i {
    color: #333;
}

.contact_map img {
    width: 85%;
    margin-top: 18px;
    margin-bottom: 28px;
}

.contact_map p s {
    display: inline-block;
    width: 25px;
}

.contact-tel {
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/tel_03.png) no-repeat 10px center;
}

.contact-email {
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/email_03.png) no-repeat 10px center;
}

.contact-address {
    background: url(http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/addr_03.png) no-repeat 13px center;
    white-space: nowrap;
}

@media screen and (max-width: 419px) {
    .contact_map p {
        margin-left: 10px;
    }
}

/* ==========================================
    新人必读
   ========================================== */

.tip-title {
    width: 82px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: white;
    font-weight: bold;
    display: block;
    border-radius: 3px;
    background: #29b078;
}

.question .text-muted {
    line-height: 2;
}

.us .text-muted {
    line-height: 2.4;
}

/* ==========================================
    sidebar 左边栏
   ========================================== */

.sidebar {
    text-align: center;
    margin: 25px 0;
    padding: 35px 0;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
}

.sidebar li.active {
    background-color: #eee;
    border-left: 5px solid #29b078;
    color: #000;
}

.sidebar li.focus {
    background-color: #eee !important;
}

.sidebar li.active a {
    padding-left: 10px;
    color: #29b078;
}

.sidebar.sub {
    text-align: left;
}

.nav li > a.active {
    color: #29b078;
}

.nav:first-child > li > a:hover {
    color: #29b078;
}

.nav-sub li a {
    padding-left: 40px;
}

.nav-sub li > a.active {
    background: #eee;
    border-left: 5px solid #29b078;
    color: #000;
    padding-left: 35px;
}

.sidebar .nav > li > a:focus {
    /* background-color: #eee !important; */
}

.nav .arrow:before {
    content: "\f107";
    margin-left: 5px;
}

.nav li > a.active > .arrow:before {
    content: "\f106";
    margin-left: 5px;
}

/* ==========================================
    daily 写日报看日报
   ========================================== */

.daily-task {
    z-index: 9999;
    position: absolute;
    padding: 0;
    top: 43px;
    left: 15px;
    right: 15px;
    background: #fff;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
    overflow: hidden;
}

.daily-task li {
    position: relative;
    float: left;
    width: 33.3%;
    height: 40px;
    line-height: 40px;
    color: #cfcccc;
    text-align: center;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
}

.daily-task li span {
    top: 3px;
    left: 20px;
    color: black;
}

.daily-comment {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f2;
}

.daily-comment-status {
    position: absolute;
    top: 5px;
    left: -15px;
    /*width: 80px;*/
}

.daily-comment-teacher {
    position: absolute;
    left: -9px;
    top: 57px;
    display: block;
    padding: 0 5px;
}

/*.daily-comment-teacher:after{*/

/*position: absolute;*/

/*right:0;*/

/*top:0;*/

/*display: block;*/

/*content: '';*/

/*width: 0;*/

/*height: 0;*/

/*border-top:10px solid transparent;*/

/*border-left:10px solid transparent;*/

/*border-right:10px solid #fff;*/

/*border-bottom:10px solid transparent;*/

/*}*/

.daily-comment-over {
    position: absolute;
    top: 20%;
    display: block;
    transform: rotate(-45deg);
}

.daily-comment > img {
    float: left;
    max-width: 60px;
    max-height: 60px;
}

.daily-comment > div {
    padding-left: 80px;
}

.daily-comment > div img {
    max-width: 100px;
    max-height: 100px;
    vertical-align: baseline;
    cursor: pointer;
}

.daily-banner-thumb {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}

.ueditor-content * {
    white-space: inherit !important;
    word-break: break-all;
}

.edui-editor-body * {
    white-space: inherit !important;
}

.reply-content ol,
.ueditor-content ol,
.edui-editor-body ol {
    padding-inline-start: 1em;
    list-style: decimal;
}

.reply-content ul,
.ueditor-content ul,
.edui-editor-body ul {
    padding-inline-start: 1em;
    list-style: disc;
}

.reply-content li,
.ueditor-content li,
.edui-editor-body li {
    list-style: inherit;
}

.daily-url:hover {
    color: #29b078;
    border-bottom: 1px solid #29b078;
}

/*补充样式*/

.ueditor-content td {
    border: 1px solid #999 !important;
    text-align: center;
}

.message-del {
    padding: 0 10px;
    line-height: 20px;
}

.bread-crumb {
    padding: 0 30px 15px 30px;
    border-bottom: 1px solid #e2e2e2;
    line-height: 34px
}

.daily-bread-crumb {
    display: inline-block;
    padding: 0 30px;
}

.dailyDetail-cursor {
    cursor: pointer;
}

.text-hover span:hover {
    text-decoration: underline !important;
}

.dropdown-menu {
    z-index: 10000 !important;
}

.cancel-icon {
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/cloudServer/cancel-icon.png");
    width: 12px;
    height: 12px;
    display: inline-block;
}

.btn-info-border-color {
    border-color: #2196f3;
}

.height-70px {
    height: 70px;
}

/*提交任务弹窗*/

.taskSubmit-bg {
    margin: 38vh auto 0 auto;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.28) !important;
    border: 0;
}

/*推荐弹窗*/

.recommend-bg {
    margin: 12vh auto 0 auto;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.28) !important;
    border: 0 !important;
    border-radius: 5px;
}

/*审核失败弹窗*/

.failReason-bg {
    margin: 20vh auto 0 auto;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.28) !important;
    border: 0;
}

.failReason-bg-no {
    background-color: #f7f7f7;
    font-family: Noto Sans SC, sans-serif;
    padding: 25px 0;
}

.failReason-wrap {
    display: inline-block;
    margin-left: 33%;
}

@media screen and (max-width: 767px) {
    .failReason-bg-no {
        text-align: center;
    }

    .failReason-wrap {
        margin-left: 0;
    }
}

.circle-fork {
    font-size: 42px;
    margin-right: 12px;
    vertical-align: middle;
    text-align: left;
}

.failReason-bg-wrap {
    display: inline-block;
    height: 43px;
    vertical-align: middle;
    text-align: left;
}

.failReason-bg-title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    vertical-align: top;
}

.failReason-bg-main {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    vertical-align: bottom;
    color: #666;
}

.failReason-bg-detial {
    padding-bottom: 20px;
    overflow: hidden;
    font-family: Noto Sans SC, sans-serif;
}

.failReason-bg-detial ul {
    margin: 35px 0 0 60px;
    list-style: none;
    margin-bottom: 15px;
    font-size: 14px;
}

.failReason-bg-detial button {
    margin-bottom: 10px;
}

/*任务列表页领取任务的提示弹窗*/
.claimTask-bg {
    max-width: 400px;
    margin: 20vh auto 0 auto;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.28) !important;
    border: 0;
}

/*师弟日报详情页评级弹窗*/

.dailyGrate-header {
    max-width: 500px;
    background: white;
    margin: 33vh auto 0 auto;
    border-radius: 7px !important;
    font-size: 18px;
    box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.28);
    /*禁止双击选中*/
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.modal-header-padd {
    padding: 10px 30px;
}

.dailyGrate-close {
    float: right;
    margin-top: 6px;
    padding-right: 7px;
}

.dailyGrate-main {
    color: #666;
    padding: 30px 30px 20px 30px;
}

.dailyGrate-btn {
    font-size: 16px;
    height: 30px;
    width: 70px;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
}

.dailyGrate-main-p {
    padding-top: 10px;
    /*padding-bottom: 32px;*/
    font-size: 16px;
}

.grateStyle {
    color: #29a972;
    border: 1px solid #00bb79;
}

.dailyGrate-bottom {
    text-align: right;
}

.dailyGrate-bottom button[disabled] {
    background-color: grey !important;
    color: #fff !important;
    border-color: grey !important;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.dailyGrate-bottom-btn {
    font-size: 14px;
    color: #29a972;
    background-color: #fff;
    width: 90px;
    height: 30px;
    border: 1px solid #00bb79;
    border-radius: 3px;
}

.dailyGrate-bottom-btn:first-child {
    margin-right: 10px;
}

.dailyGrate-bottom-btn:hover {
    opacity: .8;
    color: #29a972;
}

.dailyGrate-bottom-btn2 {
    font-size: 14px;
    color: #fff;
    background-color: #29a972;
    width: 90px;
    height: 30px;
    border: 1px solid #00bb79;
    border-radius: 3px;
}

.dailyGrate-bottom-btn2:hover {
    opacity: .8;
}

.dailyGrate-bg {
    background: transparent !important;
}

.modal-open {
    overflow: scroll;
}

/*消息列表*/
.read-message {
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden
}

.read-message p {
    margin: 0 0 0 26px !important;
    line-height: 54px;
    color: #999999;
}

.message-top-padding.row-p .font-orange {
    color: #3ec578 !important;
}

.message-item {
    position: relative;
    padding: 14px 0 14px 26px;
    font-size: 0;
}

.message-ico {
    padding-right: 10px;
    font-size: 14px;
}

.message-text {
    font-size: 0;
}

.message-text i {
    font-size: 16px;
    padding-right: 10px;
}

.message-text-h {
    font-size: 16px;
    color: #333 !important;
}

.message-top-padding {
    padding: 14px 0 14px 0;
    font-size: 0;
}

.message-time {
    color: #999;
    font-size: 14px;
    padding: 15px 0 15px 0;
}

/*消息列表底部分页插件*/

.message-pagination {
    margin-right: 30px;
    margin-top: 30px;
}

.message-pagination li:last-child {
    display: none;
}

.message-pagination > li > button {
    color: #666;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-size: 14px;
}

.message-pagination > li > button:hover {
    background-color: #00d097;
}

.bgd-00d097[disabled] {
    background: #00d097 !important;
    color: white !important;
}

/*dailyList-右边侧边栏*/

.dailyList-nav {
    position: relative;
    overflow: hidden;
    /* width: 200px; */
    /* border: 1px solid #e2e2e2; */
    /* border-radius: 5px; */
    margin: 25px 0;
    padding: 40px 20px 24px 20px;
    cursor: pointer;
    background: url('../images/offline/user-nav.png') no-repeat center center / 100% 100%;
    filter: drop-shadow(0 0 17px #dedede);
}
.dailyList-nav-search-border {
    position: relative;
    overflow: hidden;
    /* border: 1px solid #e2e2e2; */
    /* border-radius: 5px; */
    margin: 25px 0;
    padding: 40px 20px 24px 20px;
    cursor: pointer;
    background: url('../images/offline/user-nav.png') no-repeat center center / 100% 100%;
    filter: drop-shadow(0 0 17px #dedede);
}

.dailyList-pin {
    padding: 25px 20px;
    width: 200px;
    font-size: 13px;
    background: url('http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/dailyDetail/pin.png') no-repeat center center / 100% 100%;
}
.dailyList-pin > p {
    margin: 0;
    line-height: 22px;
}
.dailyList-pin > p:first-child {
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 25px;
}
.dailyList-pin > p:last-child {
    padding-bottom: 14px;
}

.dailyList-nav-graduated {
    position: absolute;
    top: 13px;
    left: -35px;
    background: #ff7800;
    color: #ffffff;
    padding: 6px 47px;
    font-size: 14px;
    transform: rotate(-45deg)
}

.dailyList-nav-city {
    position: absolute;
    top: 14px;
    right: -46px;
    background: #00bb78;
    color: #ffffff;
    padding: 6px 47px;
    font-size: 14px;
    transform: rotate(45deg)
}

.dailyList-navBtn {
    padding: 7px 15px !important;
}

.dailyList-navBtn1 {
    padding: 7px 15px !important;
    background: #658ff4;
    border: 1px solid #658ff4;
    color: #fff;
}

.dailyList-navBtn1:hover {
    opacity: .8;
    color: #fff;
}

.dailyList-top-title {
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    /*width: 58px;*/
}

.dailyList-top-text {
    text-align: center;
    font-weight: bold;
    color: #777;
}

.dailyList-top-fill {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 34px 10px 0;
    padding: 10px 0;
    color: #29b078;
}

/*搜索师兄*/

.search-icon {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 40px;
    text-align: center;
    pointer-events: none;
    font-size: 18px;
    color: #bababa;
}

.datepicker {
    min-width: 320px !important;
}

.search-input {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
}

.search-text-input {
    width: 405px;
    min-width: 160px;
    height: 30px;
    text-indent: 5px;
}

@media screen and (max-width: 768px) {
    .search-text-input {
        width: 200px;
    }
}

.search-min-height {
    min-height: 289px;
}

/*线上学习-前言*/

/*前言-介绍*/

/*前言-特色 */

.preface-characteristic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 2px 30px;
    position: relative;
    overflow: hidden;
}

.preface-characteristic .col-lg-2-5 {
    padding: 0;
    position: relative;
}

.preface-characteristic-item {
    height: 185px;
    border: 1px solid #e8e8e8;
    flex-grow: 1;
    position: relative;
    margin: -1px;
    overflow: hidden;
}

.preface-characteristic-item p {
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 15px;
    margin: 0;
    justify-content: center;
}

.preface-characteristic-item p:nth-child(1) {
    font-size: 24px;
    font-weight: 700;
    color: #666;
}

.preface-characteristic-item :nth-child(2) {
    background: #52b277;
    color: #fff;
}

/*前言-课程*/

/*前言-流程*/

.preface-title {
    clear: both;
    text-align: center;
    margin: 30px 0 20px 0;
    font-size: 20px;
    color: #52b277;
    font-weight: bold;
}

.preface-player {
    overflow: hidden;
    position: relative;
    padding: 0 30px;
}

.preface-player video::-internal-media-controls-download-button {
    display:none;
}
.preface-player video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
.preface-player video::-internal-media-controls-overflow-button {
    display: none;
}
.preface-player video::-webkit-media-controls-play-button,
.preface-player video::-webkit-media-controls-mute-button,
.preface-player video::-webkit-media-controls-volume-slider,
.preface-player video::-webkit-media-controls-fullscreen-button,
.preface-player video::-webkit-media-controls-timeline {
    cursor: pointer;
}
.preface-player video::-internal-media-controls-button-panel,
.preface-player video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}
.preface-player video::-webkit-media-controls [pseudo="-webkit-media-controls-panel"] [pseudo="-internal-media-controls-overflow-button"] {
    display: none;
}
.preface-player video::-webkit-media-controls-overlay-play-button {
    display:none;
}
.preface-player video::-webkit-media-controls {
    overflow: hidden !important;
}
.preface-player video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

.preface-player .preface-clip-01 {
    position: absolute;
    left: 0;
    top: 0;
    width: 31px;
    height: 100%;
    z-index: 999;
    background: #fff;
}

.preface-player .preface-clip-02 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    z-index: 999;
    background: #fff;
}

.preface-player .preface-clip-03 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    z-index: 999;
    background: #fff;
}

.preface-player .preface-video {
    position: relative;
    float: left;
}

.preface-player .preface-video-wrap {
    position: relative;
    width: 500px;
}

.preface-video-shade {
    position: absolute;
    width: 100%;
    height: 99%;
    z-index: 1;
    background: rgba(0%, 0%, 0%, 10%);
}

.preface-video-wrap img {
    position: absolute;
    width: 100%;
    height: 281px;
}

.preface-player .video-play {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
    text-align: center;
    transform: translateY(-50%);
    z-index: 1;
}

.preface-player .video-play img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
    z-index: 2;
    cursor: pointer;
}

.preface-player .preface-intro {
    float: right;
    box-sizing: content-box;
    padding: 3.5px 0 3px 0;
    width: calc(100% - 500px);
    height: 281px;
    background-color: #dcfff2;
    background-clip: content-box;
}

.preface-intro p {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
}

.preface-intro i {
    font-size: 20px;
    font-style: normal;
}

.preface-intro .preface-detail-01 {
    padding: 59px 57px 25px;
}

.preface-intro .preface-detail-02 {
    padding: 0 57px;
}

.enlarge {
    position: fixed!important;
    left: 50%;
    top: 50%;
    width: 1000px!important;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .3s ease-in-out;
}

.preface-shade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
#preface-shade-close {
    position: absolute;
    z-index: 99999;
    left: calc(100% + 18px);
    top: 0;
    width: 42px;
    height: 42px;
    background: url(../images/offline/player-close.png) no-repeat;
    cursor: pointer;
}

@media screen and (max-width: 1200px) {
    .preface-player {
        flex-direction: column;
    }
    .preface-player .preface-video-wrap {
        position: relative;
        width: 100%;
    }
    .preface-player .preface-intro {
        position: relative;
        width: 100%;
        height: auto;
    }
    .preface-intro .preface-detail-02 {
        padding: 0 57px 59px;
    }
    .enlarge {
        position: fixed!important;
        left: 50%;
        top: 50%;
        width: 85%!important;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width .3s ease-in-out;
    }
    .preface-video-wrap img {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .preface-player .preface-intro {
        float: right;
        box-sizing: content-box;
        padding: 3.5px 0 3px 0;
        width: 100%;
        height: auto;
        background-color: #dcfff2;
        background-clip: content-box;
    }
    .preface-intro .preface-detail-01 {
        padding: 20px;
    }
    .preface-intro .preface-detail-02 {
        padding: 0 20px 20px;
    }
}

.preface-title-l,
.preface-title-r {
    height: 3px;
    width: 140px;
    vertical-align: middle;
    display: inline-block;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/offline/title-l.png") center no-repeat;
}

.preface-title-r {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);;
}

.preface-view-task {
    position: relative;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/1/c46d5ab7-84a8-467e-bfee-cda08bcf0537.jpg") no-repeat 75%;
    background-size: cover;
    height: 240px;
}

.preface-view-task button {
    position: absolute;
    font-size: 16px;
    bottom: 15%;
    left: 37%;
    background: #55a877 !important;
}

.preface-view-task img {
    position: absolute;
    /*max-height: 30%;*/
    bottom: 35%;
    max-width: 40%;
    left: 23%;
}

@media screen and (max-width: 768px) {
    .preface-view-task img {
        position: absolute;
        max-height: 30%;
        bottom: 35%;
        max-width: 55%;
        left: 20%;
    }
    .preface-title-media {
        display: none;
    }
}

/*前言-成效*/

.preface-result .preface-branch .active {
    color: #fff !important;
    border-color: #55a877;
    background: #55a877;
}

.preface-branch-button {
    margin-bottom: 10px;
    padding: 5px 18px;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    color: #666;
    background: #fff;
    margin-right: 10px;
    font-size: 16px;
}

.preface-branch-button:hover {
    color: #55a877;
    border-color: #55a877;
}

.preface-branch-button:active,
.preface-branch-button:focus {
    color: #fff !important;
    border-color: #55a877;
    background: #55a877;
}

.preface-result {
    margin-bottom: -10px;
}

.preface-result-user-wrap {
    padding-bottom: 30px;
}

.preface-result-user-wrap .not-fond {
    text-align: center;
    color: #999;
    line-height: 80px;
}

.preface-result .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.preface-result .offline-bgd-gray {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    margin-bottom: 10px;
}

.preface-result .offline-bgd-gray:hover {
    border-color: #55a877
}

.wrap {
    padding: 10px 0;
    overflow: hidden;
    box-sizing: border-box;
}

.flow-content {
    position: relative;
    overflow: hidden;
    width: 23%;
    height: 220px;
    float: left;
    border: solid #e8e8e8 1px;
    margin-left: 1.6%;
    margin-bottom: 30px;
    padding: 33px 15px;
    border-radius: 4px;
}

.flow-content:hover {
    border: solid #00bb78 1px;
}

@media screen and (max-width: 768px) {
    .flow-content {
        width: 92%;
        margin-left: 4%;
    }
}

.preface-blank {
    padding: 0;
}

.flow-title-font {
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
}

.flow-content-font {
    font-size: 14px;
    color: #666666;
}

.flow-time {
    position: absolute;
    bottom: 12px;
    line-height: 14px;
}

.flow-time img {
    margin-right: 10px;
    margin-top: -3px;
    vertical-align: middle;
}

.my-banner-preface {
    position: absolute;
    top: 13px;
    right: -45px;
    /*background: #00bb78;*/
    color: #ffffff;
    padding: 4px 53.75px;
    font-size: 14px;
    transform: rotate(46deg);
}

.offline-color {
    background: #999999;
}

.online-color {
    background: #ff4b00;
}

.outline-color {
    background: #00bb78;
}

.flow-space {
    clear: both;
    float: left;
    margin-top: 40px;
}

.step-space-title {
    /* padding-top: 25px;
    padding-bottom: 25px; */
    /* padding-left: 20px; */
    font-size: 16px;
    border-right: 1px dashed #55a877;
}

.step-space-title-first {
    padding-left: 20px;
    /* margin-top: 25px;
    padding-bottom: 25px; */
    font-size: 16px;
    border-right: 1px dashed #55a877;
}

.step-space-title-last {
    padding-left: 20px;
    /* padding-top: 25px;
    margin-bottom: 25px; */
    font-size: 16px;
    border-right: 1px dashed #55a877;
}

.home-step hr {
    margin-top: 0;
    margin-bottom: 0;
    border-top-color: #55a877;
    border-top-style: dashed;
}

.step-space-title-first h5,
.step-space-title-last h5,
.step-space-title h5 {
    height: 117px;
    line-height: 117px;
    color: #666666;
    margin: 0;
    text-align: center;
    font-size: 16px;
    /* padding-top: 5px; */
    font-weight: bold;
}

.step-space {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 118px;
    /* margin-top: 25px;
    margin-bottom: 25px; */
    font-size: 15px;
}
.step-space:hover {
    /* border: 1px dashed #55a877;
    box-shadow: 0 0 1px 1px #55a877; */
    background: #dfffea;
}
.home-step-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00bb78;
}

.step-space h5 {
    color: #666666;
    font-weight: bold;
}

.preface-skip {
    cursor: pointer;
}

.flow-skipNone {
    cursor: default;
}

/*================*/

/*官网公告部分*/

/*公告轮播*/

.notice {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 0;
    /*background: #e8e8e8;*/
}

.notice-carousel {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    color: #666;
    overflow: hidden;
    text-align: left;
}

.notice-carousel li {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-carousel li:hover {
    color: #55a877;
}

.notice span {
    flex-shrink: 0;
    padding-left: 20px;
    color: #ed6f44;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/notice.gif") left center no-repeat;
}

.notice a {
    flex-shrink: 0;
}

.notice-more {
    color: #666;
    text-align: right;
}

.notice-more:hover {
    color: #55a877;
}

.notice-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}

.notice-nav {
    padding-top: 20px;
    padding-bottom: 20px;
    color: #55a877 !important;
}

.notice-nav a {
    color: #55a877;
}

.notice-content {
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    background: #fff;
}

/*轮播结束*/

/*公告列表*/

.notice-wrap hr {
    border-color: #e8e8e8;
}

.notice-title,
.notice-list,
.notice-detail {
    padding-left: 25px;
    padding-right: 25px;
}

.notice-list,
.notice-detail {
    min-height: 500px;
}

.notice-list-wrap,
.notice-detail-wrap {
    padding-bottom: 20px;
}

.notice-list-wrap h5 {
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/notice-page.png") no-repeat left center;
    background-size: 17px 16px;
    font-size: 16px !important;
    margin-top: 0;
    margin-bottom: 0;
}

.notice-list-row {
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    border-bottom: 1px solid #e8e8e8;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/notice-list.png") no-repeat left center;
}

.notice-list-row:hover {
    color: #52b277;
    background: url("http://ks3-cn-beijing.ksyun.com/jns.img.bucket/skill/skill_html/images/notice-list-hover.png") no-repeat left center;
}

.notice-list-row:hover a {
    color: #52b277;
}

/*公告详情*/

.notice-detail-title {
    padding: 30px 25px;
}

.notice-detail-title h5 {
    font-size: 16px !important;
}

.notice-detail {
    font-size: 16px;
}

.notice-detail td {
    border: 1px solid;
    text-align: center;
}

.notice-detail table {
    max-width: 100%;
    margin: 0 auto !important;
}

/*==================*/

/*资料预览*/

/*sidebar选中状态*/

.preactive {
    color: #00bb78 !important;
    background: #eee;
    border-left: 5px solid #29b078;
    padding-left: 35px !important;
    box-sizing: border-box;
}

.breadcrumb .active {
    color: #29b078 !important;
}

.nav-style {
    padding: 10px 30px !important;
    font-weight: bold;
}

.opacity-0 {
    opacity: 0;
}

.one-word {
    text-align: center;
    color: #999;
    font-size: 16px;
}

/*底部栏不吸底的问题，给予最小高度*/

.stay-bottom {
    min-height: 59vh;
    background: #fafafa;
}

/*2017年4月14日15:53:53  setMeal*/

.hover-bg :hover {
    background: #f4f4f4;
}

/*a标签跳转下划线*/

.a-underline {
    color: #ff5c00;
    border-bottom: 1px solid #ff5c00;
}

@media screen and (min-width: 992px) {
    .col-md-20 {
        float: left;
        width: 20%;
        box-sizing: border-box;
    }
}

.hover-green:hover {
    color: #29b078;
}

.text-bottom {
    display: inline-block;
    vertical-align: bottom;
    padding-top: 15px;
    color: #666;
}

.iconfont-icon {
    width: 32px;
    height: 32px;
    padding-left: 10px;
    font-weight: bolder;
    color: #29b078;
    vertical-align: -10px;
    fill: currentColor;
    overflow: hidden;
}

/*小红点*/
.red-dot {
    display: inline-block;
    vertical-align: top;
    margin-top: 3px;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 3px;
}

.active-circle {
    position: absolute;
    z-index: 10;
    left: 92px;
    top: 10px;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 3px;
}

/*私信*/

.padding-0-30px {
    padding: 21px 30px;
}

.private-tab-btn {
    padding: 0 25px 10px 25px;
}

.margin-left-25 {
    margin-left: 25px;
}

.private-thumb {
    padding-top: 20px;
    float: left;
    margin-right: 20px;
    padding-bottom: 16px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.private-list {
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
    padding: 15px 30px;
}

.private-list :last-child {
    border-bottom: none !important;
}

.privateDetail-list {
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
    padding: 15px 10px;
}

.private-list-ul :last-child {
    border-bottom: none;
}

.private-tab-color {
    color: #29b078;
}

.private-tab-color1 {
    color: #29b078;
    border-bottom: 2px solid #00ac6f;
}

.private-fontbold {
    font-weight: bold;
}

.private-circle {
    position: absolute;
    left: 85px;
    top: 10px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    height: 16px;
    width: 16px;
    line-height: 16px;
}

.private-list-ul {
}

.private-list-ul li:hover {
    background: #f4f4f4;
}

.private-list-ul li:hover .private-haveNewMsg {
    font-weight: bold;
}

.private-no-data {
    height: 80px;
    margin: 30px 0 20px 0;
}

.private-list-p {
    padding: 5px 0 10px 0;
    font-size: 0;
}

.margin-left-10px {
    margin-left: 10px;
}

.margin-left-20px {
    margin-left: 20px;
}

.privateDetail-textarea {
    box-sizing: border-box;
    resize: none;
    width: 100%;
    height: 220px;
    border-radius: 3px;
    border: 1px solid #e2e2e2;
    padding: 5px 5px 20px 5px
}

.privateDetail-content {
    border-radius: 3px;
    width: 100%;
    padding: 0;
    margin-top: 10px
}

.privateDetail-h5 {
    padding: 0 40px;
    font-size: 16px;
    margin: 0;
    line-height: 55px;
    border-bottom: 1px solid #e2e2e2
}

.private-back:hover {
    text-decoration: underline;
}

.private-main {
}

.noborder-bottom {
    border-bottom: none !important;
}

/*padding-left 15px*/
.left15px {
    padding-left: 15px;
    text-align: left;
}

.material-top-fill {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 34px 10px 0;
    padding: 10px 0;
    color: #999;
}

.task-tip {
    padding: 10px 15px;
    background-color: #FFF3E2;
}

.test::before {
    content: url("images/task_warn.png");
}

.filialeNumber {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.6);
}

.filialeNumber-img {
    width: 100%;
    height: 200px;
    cursor: pointer;
}

.filialeBox {
    position: relative;
    padding: 10px 0;
}

.filialeNumber-img:hover {
    box-shadow: 0px 0px 15px 1px rgba(202, 202, 202, 0.85);
}

.disply-inline-block-top {
    display: inline-block;
    vertical-align: top;
}

/*小课堂*/
.small-title {
    width: 1200px;
    max-width: none;
    margin: 0 auto;
}

.class-making {
    background-color: #f9f9f9;
}

.class-header {
    margin-top: 50px;
    height: 103px;
    text-align: center;
}

.class-header div:first-child {
    font-size: 19px;
    font-weight: bold;
}

.class-header div:last-child {
    font-size: 14px;
    color: #999999;
}

.class-progressbar {
    background: url("../images/offline/progress-bar.jpg") no-repeat center 49.3%;
    background-size: 82%;
}
.progressbar-green2,.progressbar-green1,.progressbar-green{
    display: none;
}
.sm-title {
    font-weight: bold;
    font-size: 19px;
}

.sm-content {
    font-size: 13px;
    color: #666666;
    text-align: left;
}

.smallclass {
    position: relative;
}

.smallclass > div {
    float: left;
    width: 14.1%;
    height: 400px;
}

.first, .third, .fifth, .seven {
    padding-top: 155px;
    text-align: center;
}
.first {
    padding-left: 30px;
}

.odd {
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    position: absolute;
    background-color: #00bb78;
    border-radius: 50%;
    margin-left: -17px;
    margin-top: -50px;
}

.even {
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    position: absolute;
    background-color: #00bb78;
    border-radius: 50%;
    margin-left: -18px;
    margin-top: 85px;
}

.second, .fourth, .sixth {
    padding-top: 20px;
    text-align: center;
}

.progressbar-green {
    display: none;
}

.progressbar-green1 {
    display: none;
}

@media screen and (max-width: 1200px) {
    .small-title {
        width: 100%;
    }

    .class-header {
        margin-bottom: 40px;
    }

    .class-progressbar {
        background: none;
    }

    .sm-content {
        font-size: 13px;
        color: #666666;
        text-align: center;
    }

    .first, .third, .fifth, .seven {
        padding-top: 1px;
        text-align: center;
    }

    .first {
        padding: 0;
    }

    .second, .fourth, .sixth {
        padding-top: 1px;
        text-align: center;
    }

    .progressbar-green2 {
        display: block;
        position: absolute;
        width: 100% !important;
        margin-top: 52px;
        background: url("../images/offline/progressbar-sm.jpg") no-repeat 30% center;
        background-size: 100% 1px;
    }

    .progressbar-green {
        display: block;
        position: absolute;
        width: 100% !important;
        margin-top: 158px;
        background: url("../images/offline/progressbar-sm.jpg") no-repeat 30% bottom;
        background-size: 100% 1px;
    }

    .progressbar-green1 {
        display: block;
        position: absolute;
        width: 100% !important;
        margin-top: 472px;
        background: url("../images/offline/progressbar-sm.jpg") no-repeat 30% 44%;
        background-size: 100% 1px;
    }

    .second > span {
        margin-top: -55px;
        margin-left: -15px;
    }

    .first > span {
        margin-top: -55px;
        z-index: 100;
    }

    .third > span {
        margin-top: -55px;
    }

    .fourth > span {
        margin-top: -50px;
    }

    .sixth > span {
        margin-top: -50px;
    }

    .smallclass {
        text-align: center;
    }

    .smallclass > div {
        width: 32%;
        margin-left: 1%;
        height: 200px;
    }
}

/* 28期 */
.study-progress {
    padding: 20px 30px 20px 15px;
    overflow: hidden;
}
.warn-green {
    color: #00bb78;
}
.warn-orange {
    color: #ff9b00;
}
.warn-redorange {
    display: inline-block;
    width: 70px;
    text-align: center;
    color: #ff4a00;
}@media screen and (max-width: 768px) {
    .home-width {
        width: 100%!important;
    }
}