@charset "UTF-8";
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
    margin:0;
    padding:0
}
fieldset,img {
    border:0
}
:focus {
    outline:0
}
address,caption,cite,code,dfn,th,var,optgroup {
    font-style:normal;
    font-weight:400
}
strong {
    font-weight:400
}
em {
    font-style:normal
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:400;
    font-family:sans-serif
}
abbr,acronym {
    border:0;
    font-variant:normal
}
code,kbd,samp,tt {
    font-size:100%
}
input,button,textarea,select {
    *font-size:100%;
    border:0
}
body {
    background:#fff;
    color:#5e5e5e;
    font:14px/2em sans-serif,SimSun,Arial
}
ol,ul {
    list-style:none
}
table {
    border-collapse:collapse;
    border-spacing:0
}
caption,th {
    text-align:left
}
sup,sub {
    font-size:100%;
    vertical-align:baseline
}
:link,:visited,ins {
    text-decoration:none
}
blockquote,q {
    quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
    content:'';
    content:none
}
a:link,a:visited {
    color:#5e5e5e
}
/*a:hover {
    color:#c9394a
}*/
a:active {
    color:#666
}
.clearfix:after {
    content:'\0020';
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.clearfix {
    *zoom:1
}
.l {
    float:left
}
.r {
    float:right
}
.clear {
    height:0;
    overflow:hidden;
    clear:both
}
.hide {
    display:none
}
.btn.hide {
    display:none
}
a.hidefocus {
    outline:0
}
button.hidefocus::-moz-focus-inner {
    border:0
}
a:focus {
    outline:0;
    -moz-outline:0
}
input,textarea {
    outline:0
}
html {
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
[hidden],template {
    display:none
}
a {
    background-color:transparent
}
a:focus,a:active,a:hover {
    outline:0;
    -moz-outline:0
}
button,input,optgroup,select,textarea {
    color:inherit;
    font:inherit;
    margin:0
}
button {
    overflow:visible
}
button,select {
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled] {
    cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner {
    border:0;
    padding:0
}
input {
    line-height:normal
}
input[type=checkbox],input[type=radio] {
    box-sizing:border-box;
    padding:0
}
textarea {
    overflow:auto
}
table {
    border-collapse:collapse;
    border-spacing:0
}
.flex {
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    align-items:center
}
.ellipsis {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.wordbreak {
    word-break:break-all;
    word-wrap:break-word
}
header {
    width:100%;
    height:1.28rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    position:fixed;
    align-items:center;
    top:0;
    padding-left:.32rem;
    padding-right:.32rem;
    background:#07111b;
    z-index:99999;
    box-sizing:border-box
}
header.opacity {
    background:rgba(7,17,27,.4)
}
header .newheader {
    width:100%;
    font-size:.32rem;
    line-height:.53333333rem;
    color:#fff
}
header .newheader .logo {
    display:block;
    width: 3.24rem;
}
header .newheader .logo img {
    width:100%;
    vertical-align: -webkit-baseline-middle;
}
header .newheader .logo+.header-name:before {
    float:left;
    content:" ";
    border-left:1px solid #fff;
    opacity:.2;
    margin-right:.37333333rem;
    margin-top:.16rem;
    height:.53333333rem
}
header .newheader .goback {
    width:.42666667rem;
    height:.42666667rem;
    font-size:.42666667rem;
    line-height:.42666667rem;
    color:#fff;
    margin-top:.21333333rem
}
header .newheader .header-name {
    margin-left:.37333333rem;
    line-height:.88rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color: #fff;
    font-size: .41rem;
}
header .newheader .right-box {
    display:inline-block;
    color:inherit;
    width:.53333333rem;
    height:.53333333rem;
    border-radius:.29333333rem;
    margin-top:.1rem;
    font-size:0;
    overflow:hidden
}
header .newheader .right-box img {
    width:100%;
    height:100%
}
header .newheader .right-box i {
    font-size:20px
}
[data-dpr="2"] header .newheader .right-box i {
    font-size:40px
}
[data-dpr="2.5"] header .newheader .right-box i {
    font-size:50px
}
[data-dpr="2.75"] header .newheader .right-box i {
    font-size:55px
}
[data-dpr="3"] header .newheader .right-box i {
    font-size:60px
}
[data-dpr="4"] header .newheader .right-box i {
    font-size:80px
}
header .newheader .header-share,header .newheader .header-collection {
    display:inline-block;
    color:inherit;
    width:.48rem;
    height:.48rem;
    margin-top:.18666667rem;
    margin-right:.66666667rem;
    font-size:0;
    overflow:hidden
}
header .newheader .header-share i,header .newheader .header-collection i {
    font-size:18px
}
[data-dpr="2"] header .newheader .header-share i,[data-dpr="2"] header .newheader .header-collection i {
    font-size:36px
}
[data-dpr="2.5"] header .newheader .header-share i,[data-dpr="2.5"] header .newheader .header-collection i {
    font-size:45px
}
[data-dpr="2.75"] header .newheader .header-share i,[data-dpr="2.75"] header .newheader .header-collection i {
    font-size:50px
}
[data-dpr="3"] header .newheader .header-share i,[data-dpr="3"] header .newheader .header-collection i {
    font-size:54px
}
[data-dpr="4"] header .newheader .header-share i,[data-dpr="4"] header .newheader .header-collection i {
    font-size:72px
}
header .newheader .header-collection.active {
    color:#FF2D50
}
footer {
    width:100%;
    height:1.30666667rem;
    position:fixed;
    bottom:0;
    box-shadow:0 0 10px 1px rgba(7,17,27,.1);
    z-index:99999;
    font-size:0;
    box-sizing:border-box;
    background-color:#fff
}
footer .footer {
    height:100%;
    color:#93999f;
    text-align:center
}
footer .footer li {
    width:33.3%;
    float:left;
    height:100%
}
footer .footer li a {
    display:block;
    height:100%;
    color:inherit;
    box-sizing:border-box;
    padding-top:.17333333rem
}
footer .footer li i {
    display:block;
    font-size:24px;
    margin:auto
}
footer .footer li i img{
    width:.62rem;
    height:auto;
}
[data-dpr="2"] footer .footer li i {
    font-size:40px
}
[data-dpr="2.5"] footer .footer li i {
    font-size:60px
}
[data-dpr="2.75"] footer .footer li i {
    font-size:66px
}
[data-dpr="3"] footer .footer li i {
    font-size:72px
}
[data-dpr="4"] footer .footer li i {
    font-size:96px
}
footer .footer li span {
    display:inline-block;
    font-size:10px;
    line-height:.26666667rem;
    margin-top:.08rem
}
[data-dpr="2"] footer .footer li span {
    font-size:20px
}
[data-dpr="2.5"] footer .footer li span {
    font-size:25px
}
[data-dpr="2.75"] footer .footer li span {
    font-size:28px
}
[data-dpr="3"] footer .footer li span {
    font-size:30px
}
[data-dpr="4"] footer .footer li span {
    font-size:40px
}
footer .footer li.cur {
    color:#4068e4
}
footer .footer li.cur a {
    color:inherit
}
.mask-view {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99999;
    background-color:rgba(0,0,0,.35)
}
.share-box {
    z-index:100000;
    position:fixed;
    background:#f3f5f7;
    bottom:0;
    width:100%
}
.share-box ul {
    overflow:hidden
}
.share-box ul a {
    display:block
}
.share-box ul li {
    float:left;
    margin-top:.66666667rem;
    margin-bottom:.77333333rem;
    text-align:center;
    width:33%;
    font-size:1.2rem;
    color:#2b333b
}
.share-box ul li .imwap-qq_o {
    color:#5ca3e1
}
.share-box ul li .imwap-weibo_o {
    color:#f26868
}
.share-box ul li .imwap-wechat_o {
    font-size:1rem;
    color:#85d16d
}
.share-box ul li .imwap-friends {
    font-size:1rem;
    color:#ee769c
}
.share-box ul li span {
    display:block;
    font-size:12px;
    margin-top:.16rem;
    line-height:1
}
[data-dpr="2"] .share-box ul li span {
    font-size:24px
}
[data-dpr="2.5"] .share-box ul li span {
    font-size:30px
}
[data-dpr="2.75"] .share-box ul li span {
    font-size:33px
}
[data-dpr="3"] .share-box ul li span {
    font-size:36px
}
[data-dpr="4"] .share-box ul li span {
    font-size:48px
}
.share-box ul li.share-wechat,.share-box ul li.share-friends {
    margin-top:.8rem
}
.share-box ul li.share-wechat span,.share-box ul li.share-friends span {
    margin-top:.2rem
}
.share-box .btn-share-cancel {
    text-align:center;
    background:#fff;
    display:block;
    font-size:.48rem;
    line-height:1.33333333rem;
    color:#2b333b
}
.share-box-wx li {
    width:25%!important;
    font-size:1.2rem
}
#wrapper {
    margin-top:1.28rem;
    margin-bottom:1.30666667rem
}
#pages-container {
    padding-bottom:.64rem
}
.shizhan-course-rate {
    position:absolute;
    width:.74666667rem;
    height:.48rem;
    font-size:12px;
    line-height:.48rem;
    color:#fff;
    background-color:#2b333b;
    font-weight:200;
    text-align:center;
    right:-.10666667rem;
    top:.21333333rem;
    z-index:5;
    border-top-left-radius:.08rem;
    border-bottom-left-radius:.08rem
}
[data-dpr="2"] .shizhan-course-rate {
    font-size:24px
}
[data-dpr="2.5"] .shizhan-course-rate {
    font-size:30px
}
[data-dpr="2.75"] .shizhan-course-rate {
    font-size:33px
}
[data-dpr="3"] .shizhan-course-rate {
    font-size:36px
}
[data-dpr="4"] .shizhan-course-rate {
    font-size:48px
}
.shizhan-course-rate:after {
    position:absolute;
    content:'';
    width:0;
    height:0;
    overflow:hidden;
    border-top:4px solid #2b333b;
    border-right:4px solid transparent;
    border-width:.10666667rem;
    right:0;
    bottom:-.10666667rem
}
.loading {
    text-align:center
}
.loading img {
    width:1rem
}
.load-tip {
    text-align:center;
    font-size:12px
}
[data-dpr="2"] .load-tip {
    font-size:24px
}
[data-dpr="2.5"] .load-tip {
    font-size:30px
}
[data-dpr="2.75"] .load-tip {
    font-size:33px
}
[data-dpr="3"] .load-tip {
    font-size:36px
}
[data-dpr="4"] .load-tip {
    font-size:48px
}
.loading-more {
    display:block;
    width:4.8rem;
    height:.96rem;
    margin:auto;
    border-radius:.50666667rem;
    line-height:.96rem;
    text-align:center;
    border:1px solid #d9dde1;
    color:#71777d;
    font-size:12px
}
[data-dpr="2"] .loading-more {
    font-size:24px
}
[data-dpr="2.5"] .loading-more {
    font-size:30px
}
[data-dpr="2.75"] .loading-more {
    font-size:33px
}
[data-dpr="3"] .loading-more {
    font-size:36px
}
[data-dpr="4"] .loading-more {
    font-size:48px
}
.loading-more:hover {
    color:#71777d
}
.loading-more:visited {
    color:#71777d
}
.course-item {
    float:left;
    position:relative;
    width:4.53333333rem;
    height:4.76666667rem;
    margin-left:.32rem;
    margin-bottom:.32rem;
    box-shadow:0 0 10px 0 rgba(7,17,27,.1);
    color:#2b333b;
}
.course-item a {
    display:block;
    height:100%;
    color:inherit;
    background-color:#fff;
    border-radius:.13333333rem;
    overflow:hidden
}
.course-item .price {
    color:#4068e4;
}
.course-item .surface {
    width:100%;
    height:2.53333333rem;
    vertical-align:middle
}
.course-item .desc-box {
    position:relative;
    margin-top:.21333333rem;
    margin-left:.32rem;
    margin-right:.32rem
}
.course-item .desc-box .h2 {
    font-size:.36rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.course-item .desc-box .person-num {
    color:#b7bbbf
}
.course-item .desc-box .person-num em {
    margin-left:.06666667rem;
    margin-right:.06666667rem
}
.course-item .desc-box .detail {
    font-size:.3rem;
    margin: -5px 0;
}
.assistant-item .detail {
    font-size:.3rem;
    margin: -5px 0;
}
.assistant-item .detail .person-num {
    color:#b7bbbf;
    margin-top: -5px;
}
.coding-css {
    height:4.53333333rem
}
.coding-css .desc-box {
    height:1.65333333rem
}
.coding-css .desc-box .h2 {
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    white-space:normal
}
.coding-css .desc-box .detail {
    position:absolute;
    bottom:0;
    width:100%;
}
main {
    margin-top: 1.28rem;
    margin-bottom: 1.30666667rem;
}
@media screen and (min-width: 768px) {
    .course-item{
        width:4.33333333rem;
    }
    .assistant-item{
        width:4.33333333rem!important;
    }
    .assistant-item .detail,.teacher .pt1 .detail{
        margin-top:0;
        padding-bottom: .2rem;
    }
    .like.r p {
        margin-top: .1rem;
    }
    .course-item .desc-box .detail {
        padding-bottom: .1rem;
        margin-top: .1rem;
    }
    .vip .left h3{
        font-size:.38rem!important;
    }
    .vip .left{
        width:6rem!important;
    }
    .vip .left p{
        font-size:.32rem!important;
        margin: .2rem 0!important;
    }
    .vip .right p{
        font-size:.32rem!important;
        margin:-.2rem .2rem .35rem  0!important;
    }
    .answer-run dl dt span{
        width:0.4rem;height:0.4rem;
    }
    
}
[data-dpr="3"] body .course-item,[data-dpr="3"] body .assistant-item{
    width:4.533333333rem!important;
}
[data-dpr="3"] body .assistant-item .detail,[data-dpr="3"] body .teacher .pt1 .detail{    
    font-size: .3rem;
    margin: -5px 0;
    padding-bottom: 0;
}