.container {
}
:focus {
    outline: none;
}
.app-detail-wrap {
    /* text-align: center; */
    position: relative;
    clear: both
}
.osp-project-title {
    height: 50px;
    margin-top: -25px;
    margin-bottom: 49px;
}
.osp-project-title h2 {
    margin: 0;
    padding-left: 36px;
    padding-right: 16px;
    line-height: 50px;
    color: rgba(75, 71, 72, 1);
    font-size: 16px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.osp-tree-container.pc-show {
    width: calc((100% - 1030px) / 2);
    max-width: 258px;
    max-height: calc(100vh - 148px);
    display: inline-block;
    /* float: left; */
    vertical-align: top;
    margin-left: calc((100vw - 1030px) / 2 - 285px);
    margin-right: 27px;
    /* border: 1px solid rgba(220, 220, 220, 1); */
    overflow-y: auto;
    z-index: 2;
    max-height: 500px;
    overflow-y: scroll;
}
.osp-tree-container {
    position: absolute;
}
.osp-tree-container.static-block {
    position: static;
}
.osp-tree-container .first-category,
.osp-tree-container .second-category,
.osp-tree-container .third-category,
.osp-tree-container .fourth-category {
    width: 100%;
    display: block;
}
.osp-tree-container .first-category {
    height: auto;
    background-color: rgba(255, 255, 255, 1);
}
.osp-tree-container .second-category,
.osp-tree-container .third-category,
.osp-tree-container .fourth-category {
    margin: 1px 0 0;
}
.osp-tree-container .first-category>a,
.osp-tree-container .first-category>p,
.osp-tree-container .second-category>a,
.osp-tree-container .second-category>p,
.osp-tree-container .third-category>a,
.osp-tree-container .third-category>p,
.osp-tree-container .fourth-category>a,
.osp-tree-container .fourth-category>p {
    display: block;
    color: #333333!important;
    font-size: 13px;
    line-height: 18px;
    font-weight: 300;
    border-left: 4px solid transparent;
    cursor: pointer;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.osp-tree-container .first-category>p,
.osp-tree-container .first-category>a {
    padding: 14px 10px 12px 6px;
    line-height: 16px;
    /* color: rgba(88, 88, 90, 1); */
    cursor: default;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #001E41;
    /* border-bottom: 1px solid rgba(220, 220, 220, 1); */
    color: #ffffff !important;
}
.osp-tree-container .fourth-category>a,
.osp-tree-container .fourth-category>p {
    font-size: 12px;
}
.osp-tree-container .second-category.active {
    color: #39A9E2;
    border-left: 4px solid #39A9E2;
}
.osp-tree-container .second-category.active>a {
    color: #39A9E2!important;
}
.osp-nav .nav>li {
    margin-bottom: 1px;
    min-width: 100px;
    max-width: 106px;
    height: auto;
}
.osp-nav .nav>li>a {
    font-size: 13px;
    width: 100%;
    height: auto;
    line-height: 25px;
    color: #fff;
    background: #bfbfbf;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    border-radius: 2px;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    white-space: inherit;
}
.ie-osp-nav .nav>li {
    height: 35px;
}
.ie-osp-nav .nav>li>a {
    white-space: nowrap;
    height: 35px;
}
.osp-tree-container .second-category {
    padding: 10px 6px 9px 28px;
    background-color: rgba(237, 237, 237, 1);
}
.osp-tree-container .second-category>a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
    padding: 0!important;
    background-color: unset;
}
.ie-osp-tree-container .second-category>a {
    white-space: nowrap;
}
.osp-tree-container .first-category>a.active,
.osp-tree-container .first-category>p.active,
/* .osp-tree-container .second-category>a.active, */
.osp-tree-container .second-category>p.active,
.osp-tree-container .third-category>a.active,
.osp-tree-container .third-category>p.active,
.osp-tree-container .fourth-category>a.active,
.osp-tree-container .fourth-category>p.active {
    /* font-weight: bolder; */
    color: #39A9E2!important;
    border-left-color: #39A9E2;
}
.osp-tree-container .second-category>p,
.osp-tree-container .second-category>a {
    padding: 10px 6px 9px 28px;
    background-color: rgba(237, 237, 237, 1);
}
.osp-tree-container .third-category>p,
.osp-tree-container .third-category>a {
    padding: 6px 6px 6px 42px;
    background-color: rgba(230, 230, 230, 1);
}
.osp-tree-container .fourth-category>p,
.osp-tree-container .fourth-category>a {
    padding: 6px 6px 6px 56px;
    background-color: rgba(219, 219, 219, 1);
}
.categories-toggled-up,
.categories-toggled-down {
    background-repeat: no-repeat;
    background-position-x: 8px;
    background-position-y: center;
}
.categories-toggled-up {
    background-image: url('../../../img/arrow_down_03.png');
}
.categories-toggled-down {
    background-image: url('../../../img/arrow_up_03.png');
}
.second-category .categories-toggled-up,
.second-category .categories-toggled-down {
    background-position-x: 8px;
}
.third-category .categories-toggled-up,
.third-category .categories-toggled-down {
    background-position-x: 24px;
}
.fourth-category .categories-toggled-up,
.fourth-category .categories-toggled-down {
    background-position-x: 40px;
}
.osp-content-container {
    min-height: 500px;
    display: block;
    margin: auto;
    text-align: left;
    vertical-align: top;
}
.osp-content-container ul,.osp-content-container ol {
    padding-left: 1.2em;
}
.osp-content-container li {
    list-style-type: disc;
}
.osp-project-title .course-nav-item {
    margin-top: 0;
    margin-bottom: 0;
}
.osp-project-title .course-nav-item li {
    margin: 2px 20px 6px 0;
}
.osp-project-title .course-nav-item li a {
    border: none;
}
.course-nav-item li a.current-osp-project {
    color: #3CB4E6;
}
.osp-project-title .course-nav-item li a:hover {
    color: #3CB4E6;
    border: none;
}
.course-nav-item li a.btn:active {
    box-shadow: none;
}
@media screen and (min-width: 992px) {
    .mobile-show {
        display: none !important;
    }
}
@media screen and (max-width: 1600px) {
    .osp-tree-container.pc-show {
        margin-left: 0;
        margin-right: 8px;
    }
}
@media screen and (max-width: 1300px) {
    .osp-tree-container.pc-show {
        width: 178px;
    }
    .osp-content-container {
        width: 800px;
    }
}
@media screen and (max-width: 991px) {
    .pc-show {
        display: none !important;
    }
    .mobile-show {
        display: block;
    }
    .osp-content-container {
        width: 100%;
        margin: auto;
    }
    .osp-tree-container.mobile-show {
        width: calc(100% - 28px);
        margin-left: -1px;
        position: absolute;
        background-color: #ffffff;
        border: 1px solid rgba(220, 220, 220, 1);
        z-index: 2;
    }
    .osp-project-title  {
        height: auto;
        margin-top: 0;
        position: relative;
    }
    .osp-project-title h2 {
        padding-left: 14px;
        font-size: 15px;
    }
    .mobile-osp-tree-btn {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 15px;
        right: 30px;
        font-size: 10px;
        border-radius: 21px;
        vertical-align: top;
    }
    .mobile-osp-tree-btn.categories-toggled-up,
    .mobile-osp-tree-btn.categories-toggled-down {
        background-color: #1890FF;
        background-position: center center;
        border: none;
        outline: none;
    }
    .mobile-osp-tree-btn.categories-toggled-up {
        background-image: url('../../../img/arrow_down_03white_03.png');
    }
    .mobile-osp-tree-btn.categories-toggled-down {
        background-image: url('../../../img/arrow_up_03white_03.png');
    }
    .mobile-osp-tree-btn.categories-toggled-up:active,
    .mobile-osp-tree-btn.categories-toggled-up:focus,
    .mobile-osp-tree-btn.categories-toggled-down:active,
    .mobile-osp-tree-btn.categories-toggled-down:focus {
        border: none;
        box-shadow: none;
        outline: none;
    }
    .osp-content-container {
        display: block;
    }
    .osp-content-container * {
        max-width: 100%;
        word-break: break-word;
    }
    .course-nav-item a {
        padding: 5px 28px;
        font-size: 14px;
        line-height: 20px;
    }
}
@media screen and (max-width: 375px) {
    .osp-project-title h2 {
        padding-right: 50px;
    }
    .osp-project-title h2 p.mobile-show {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}