/*
* @Author: Robbin
* @Date:   2018-11-14 10:33:49
* @Last Modified by:   Robbin
* @Last Modified time: 2018-11-23 16:25:44
*/
html,
body {
    height: auto !important;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
menu {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

ol,
ul {
    list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

legend {
    color: #000
}

i {
    font-style: normal
}

html,
body {
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    vertical-align: middle;
    -webkit-user-select: none;
    font-size: 16px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, STHeiTi, 'Roboto Regular', Roboto, 'Droid Sans', 'Microsoft Yahei', sans-serif;
    margin: 0;
    padding: 0
}

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

a,
div {
    -webkit-tap-highlight-color: transparent
}

a,
a:active,
a:hover {
    color: #0057af;
    text-decoration: none
}

input:focus,
li:focus,
span:focus,
i:focus,
img:focus,
button:focus {
    outline: 0
}

input[type=text],
input[type=submit],
button,
textarea {
    -webkit-appearance: none
}

.icon-font {
    position: relative;
    font-family: mfont;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: -2px;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    speak: none
}

.z-mask-active:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .15)
}

.border-top:before,
.border-bottom:after {
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    border-top: 1px solid #e1e1e1;
    content: ' '
}

.border-top {
    position: relative
}

.border-top:before {
    top: 0
}

.border-bottom {
    position: relative
}

.border-bottom:after {
    bottom: 0
}

.f-border-1px {
    position: relative
}

.f-border-1px:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: scale(1);
    -webkit-transform-origin: 0 0;
    content: '';
    pointer-events: none
}

.page-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 200px;
    color: #444;
    background: #f4f4f4
}

.page-loading p {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #c8c8c8
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5) {

    .border-top:before,
    .border-bottom:after {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
        -webkit-transform-origin: left bottom
    }

    .border-top:before {
        -webkit-transform-origin: left top
    }

    .f-border-1px:after {
        right: -42.857%;
        bottom: -42.857%;
        -webkit-transform: scale(0.7)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {

    .border-top:before,
    .border-bottom:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5)
    }

    .f-border-1px:after {
        right: -100%;
        bottom: -100%;
        -webkit-transform: scale(0.5)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {

    .border-top:before,
    .border-bottom:after {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3)
    }

    .f-border-1px:after {
        right: -233.3%;
        bottom: -233.3%;
        -webkit-transform: scale(0.3)
    }
}

.f-allow-copy {
    -webkit-user-select: initial
}

@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) and (min-height:720px),
only screen and (device-width:414px) and (device-height:896px) and (min-height:724px) {
    .iphonex-has-bottombar {
        height: 100%;
        box-sizing: border-box;
        padding-bottom: 34px
    }

    .iphonex-has-bottombar:after {
        content: '';
        z-index: 9998;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 34px;
        background: #fff
    }

    .iphonex-gray:after {
        background: #efeff4
    }

    .iphonex-padding-bottom-fixed {
        padding-bottom: 104px
    }

    #global {}

    #global .iphonex-bottom-fixed {
        bottom: 34px
    }

    #global .iphonex-padding-bottom-34-fixed {
        padding-bottom: 34px
    }

    #global .iphonex-padding-bottom-34-height-fixed {
        padding-bottom: 34px;
        height: auto
    }

    #global .iphonex-padding-bottom-fixed {
        padding-bottom: 84px
    }

    #global .iphone-margin-top-44 {
        margin-top: 44px
    }

    #global #guideMask {
        bottom: 34px;
        height: auto
    }
}

.m-header {
    position: relative;
    top: 0;
    z-index: 10010;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #fff;
    -webkit-tap-highlight-color: transparent
}

.m-header .m-header__search {
    margin: 0 50px;
    padding: 8px 0
}

.m-header .m-header__search button {
    display: block;
    margin: 0;
    border: 0;
    border-radius: 6px;
    padding: 0;
    padding-left: 5px;
    width: 100%;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    color: #aaa;
    background-color: #eee
}

.m-header .m-header__search button i {
    display: inline-block;
    position: relative;
    top: 7px;
    margin-right: 3px;
    width: 16px;
    height: 16px;
    vertical-align: top
}

.m-header__logo {
    display: inline-block;
    position: absolute;
    margin-left: 8px;
    height: 45px;
    font-size: 0;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0)
}

.m-header__logo-pic {
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJDMjc1OTcyODRGNDExRTdBQkNERDk2NDM3OEQ0MzAwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJDMjc1OTczODRGNDExRTdBQkNERDk2NDM3OEQ0MzAwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkMyNzU5NzA4NEY0MTFFN0FCQ0REOTY0Mzc4RDQzMDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkMyNzU5NzE4NEY0MTFFN0FCQ0REOTY0Mzc4RDQzMDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz70TGt/AAAEdUlEQVR42uyad2hUWRTGz9hFQmyxskpWRIgVEyxsICKKa1nLimUXG0YiERUV9c/Egn9YV8W1oiiKQUXBtcQaCAgaTQRRo7KrsWCPdVdiI9nvzHyBUWbiK/c9R8mFH8NM3px3v3fuvadMAhUVFfI9jUC1oBgftVLOf1d6pIYP90gFZ0nqtyyoHlgO8kEvks/P6nm2h5ILPNlDKWAHSIry92IwERTGuodqgQVcXklVXJfEaxaC2rHqoSR6JcXm9wrpreJY8ZDamAuKHIipXJ5FtFHja3uoHdhu8PQ6AyaBm357KAAywSXDR3EqbWbyHr4I+gEcB+tBAw9OyAa0fZz38lSQbt7LoL8PAbk/7zXRC0HNwUHul3irxrMSRTJa41wOOBYVz3se5ByMHAqjuASa2p1NYY/Q660ykcUleNz/ufJYKZgG9jn1UGOQA/Y6ERM+fqwvshVRak4bkfrOD+amnEsO52ZL0EBwBYw1mZL83kJkT2eRnvGuTI3l3vrZiqA4sAkcAS292Omt6oqs6xDaX3E1nZsBRznXuGiC0hgDMpzGADtBbGgC1g+81aeRKzMZnHPa54KyQB5I9LMYS6gjsqK9yPy2rswkcu5Z4YJ6+VTsRX7UASNbtGe4oBFgNfC1wfDsA7zzt8jS267MfARLwPDK+kXHOzAbnGAJkOClEH1qh57iCd4Tef3RlanrTGYLop1yuaALOOmVmAd4dNNviCwqcSWmnCuqe7iYaHHoEc/4+eCDKSE6g92wPAYRpOCVK1N4FNKXK6rMamAtZzPjJ/CPWzGa+qSjHl11FzMod7VSN4OubLZE7QFUNS6AZLAOjLc7g8OloSW2/YHIe3fHzX0wBRwzWbF+rRbrLjATvLDapYnV8UQr1+RcORD+YdFAf9tYpoaK6EwxmmXvsfrFWPOQnn8zIGQn3//KWkyLuzF+tbF03DVg4yS9spP1zm6w32qlakqQxoHpTBCngn8d2HjDSnQAxNzTRFxCTcffnEzIzZK7CMZhEtck1M7djA17Wuz16YJ9ONjQPpwWEmvVptss1UnQXwZ6U8wwLrkNeP+Etck88LYKG295TRrFDAZX3YpxEod04hMwiXyu8zWfTaKEATAP3orW6w72smFDl1VD5mRWWlUB08e2btKuFDOEPYdxEYqtU5pZ4Lo76kWQDd6TbHq2OKxvYUXMOS88JMm5wZc/wCwrKRyYrHkXnmqT4L1yg60obZGsBOkWb6ttK20NP/MqsK5gmfHF7hVL4zUQUkYxA9ixsSKmlLFndKUYSx6y8yv41IWfvNWnv0qsdVL1sECKKt1sZAqZ/N4nY1O2d3FomwZCKxkwRjOLYp5r+w6MjCTGj8CqgXAQ20mvXdr6S0K/Aub4HYciHedbXJTuL1hraTx7bKL9Y2rc4abPtJECHQYdWfMYGabLB/XWRpbJeVVc95Ldml/AQ5MT8Koe0oyhHxPXNxE6S52YRRgfXhZ46q0/ubeOsIeWzkPkvlc39aPAu8VUyZdR/f9y1YJ8Hv8LMAC3bi/uZPgfuQAAAABJRU5ErkJggg==");
    background-size: cover;
    margin-top: 5px
}

.m-header__nav {
    position: absolute;
    top: 5px;
    right: 12px;
    border: 0;
    padding: 0;
    width: 24px;
    height: 35px;
    line-height: 20px;
    color: #000;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent
}

.m-header__nav i.i-list {
    font-size: 24px
}

.m-header__nav span {
    position: relative;
    top: -3px;
    left: 1px;
    font-size: 11px
}

.m-header__nav ul {
    display: none
}

.u-button {
    display: none
}

.u-search {
    position: relative;
    border-radius: 5px;
    background: #eeeff3
}

.u-search:after {
    border: 1px solid #a6a6a6;
    border-radius: 8px
}

.u-search .i-search {
    display: block;
    position: absolute;
    top: 6px;
    left: 9px;
    width: 15px;
    height: 15px;
    font-size: 15px;
    line-height: 15px;
    color: #a9a9a9
}

.m-header.z-input.in-search .u-search__reset {
    display: block
}

.u-search__input {
    display: block;
    margin-left: 28px;
    border: 0;
    border-radius: 0;
    padding-left: 2px;
    width: 75%;
    height: 28px;
    font-size: 14px;
    line-height: 16px;
    background: #eeeff3;
    outline: 0;
    pointer-events: none
}

.u-search__input::-webkit-input-placeholder {
    color: #bbb
}

.u-search__input.z-abled {
    pointer-events: auto
}

.u-search__input::-webkit-search-cancel-button {
    display: none
}

.u-search__reset {
    display: none
}

.u-search__reset-wrap {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 9px;
    width: 16px;
    height: 16px
}

.m-header.in-search .m-header__logo {
    display: none
}

.m-header.in-search .m-header__search {
    margin: 0 50px 0 10px
}

.m-header.in-search .m-header__nav {
    display: none
}

.m-header.in-search .u-search__btn {
    display: block
}

html,
body {
    position: relative;
    height: auto;
    min-height: auto;
    background: #efeff4
}

.iphone .wrap {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    /*padding-bottom: 50px;*/
    -webkit-overflow-scrolling: touch
}

.iphone .isuin:not(.z-top-show) .wrap {
    top: 0px
}

.iphone.qq-browser .wrap {
    padding-bottom: 98px
}

.android {
    padding-top: 0px;
    height: auto
}

.android .wrap {
    /*padding-bottom: 50px*/
}

.android .isuin:not(.z-top-show) {
    padding-top: 0px
}

.landscape {
    padding-top: 0
}

.landscape .isuin:not(.z-not-exist) {
    padding-top: 0
}

.top-tip {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10020
}

.iphone .top-tip {
    -webkit-transition: top .2s ease
}

.page-loading {
    z-index: 10
}

.tip.blue-tip {
    margin: 0;
    border-radius: 0;
    width: 100%
}

.tip.blue-tip .tip-bg {
    background: #e3f3ff
}

.tip.blue-tip span {
    color: #000
}

.sold-out {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 250px;
    background: #efeff4
}

.sold-out p {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center
}

.sold-out__link {
    font-size: 14px;
    line-height: 24px;
    color: #23b8ff
}

body .dialog-outer {
    z-index: 20000;
    top: 50%
}

.tips-ios-nonsupport {
    display: none;
    height: 100%;
    color: #909090;
    background: #fff;
    position: relative
}

.tips-ios-nonsupport .tips-ios-nonsupport__wording {
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center
}

.hide {
    display: none !important
}

.container {
    overflow: hidden
}

.container .tab-bar,
.container .section {
    background: #fff
}

#js-section-contents {
    margin-bottom: 10px
}

body .section-list .section {
    display: none;
    float: left;
    width: 100%
}

body .section-list .section .static-fix {
    position: relative
}

body .section-list .section .page-loading {
    background: #efeff4
}

.basic-info-list__check-all {
    float: right;
    padding-right: 32px;
    font-size: 12px;
    font-style: normal;
    line-height: 40px;
    color: #999
}

.i-v-right {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -12px;
    margin-right: -12px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    color: #999
}

.z-gap {
    margin-right: 20px
}

.header {
    position: relative;
    z-index: 20;
    margin: 0 auto;
    width: 100%
}

.header.no-filter .header__mask {
    background: rgba(0, 0, 0, .75)
}

.header .tvp_error_inner {
    padding-top: 10%;
    -webkit-justify-content: inherit;
    justify-content: inherit
}

.header.z-loading .title-bar,
.header.z-loading .header__status,
.header.z-loading .header__task,
.header.z-loading .header__audition {
    display: none
}

.header.z-loading .header__mask {
    background: #000
}

.header.z-loading .header__mask:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -36px;
    width: 72px;
    height: 72px;
    background: url(//9.url.cn/edu/mobilev2/img/video-loading.8e4e361.gif) no-repeat;
    background-size: 72px 72px;
    content: ""
}

.iphone .header {
    overflow: hidden
}

.iphone .header .vcp-fullscreen {
    z-index: 11010
}

.iphone.z-fullscreen .header {
    overflow: initial
}

.iphone.z-fullscreen .player {
    overflow: initial
}

.iphone.z-fullscreen .wrap {
    overflow: initial
}

.iphone.z-fullscreen .top-tip {
    display: none
}

.header__cover {
    display: block;
    margin: 0 -2%;
    width: 104%;
    height: 101%;
    -webkit-filter: blur(12px);
    filter: blur(12px)
}

.header__cover.z-ready {
    -webkit-filter: none;
    filter: none
}

.android .header__cover {
    margin: 0;
    width: 100%;
    height: 100%
}

.header__mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .8)
}

.header__desc {
    position: absolute;
    top: 32%;
    z-index: 10;
    width: 100%;
    height: 18px;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #ebebeb
}

.previewer-cnt {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    left: 0;
    z-index: 10003
}

.isUin .previewer-cnt {
    top: 95px
}

html.landscape .top-tip {
    display: none
}

html.landscape .wrap {
    top: 0;
    padding-bottom: 0;
    background-color: #000
}

html.landscape .bottom {
    display: none
}

.tvp_container.hideTvpExternalLayer .tvp_external_layer,
.tvp_container.hideTvpExternalLayer .tvp_layer_replay {
    opacity: 0
}

@charset "UTF-8";

.bottom {
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #fff
}

.bottom::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    content: ' '
}

.bottom__fav-wrap,
.bottom__contact-wrap {
    float: left;
    padding-top: 9px;
    width: 22px;
    height: 41px;
    text-align: center
}

.bottom__contact-wrap-box {
    float: left;
    padding-top: 9px;
    width: 22px;
    height: 41px;
    text-align: center;
    margin-left: 15px
}

.bottom__contact-wrap-box .bottom__contact {
    display: block
}

.bottom__contact-wrap-box .bottom__contact .icon-font {
    color: #777
}

.bottom__fav-wrap {
    margin-left: 15px
}

.bottom__contact-wrap {
    margin-left: 25px
}

.bottom__contact-wrap.z-active .bottom__contact:after {
    color: #b2b2b2
}

.bottom__contact-wrap.z-active .icon-font {
    color: #b2b2b2
}

.bottom__fav,
.bottom__contact {
    display: block;
    position: relative;
    border: 0;
    padding: 0;
    height: 41px;
    background: #fff;
    -webkit-appearance: none
}

.bottom__fav:after,
.bottom__contact:after {
    position: absolute;
    bottom: 3px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    color: #777
}

.bottom__fav:before,
.bottom__contact:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 50px;
    content: ''
}

.bottom__fav {
    width: 19px
}

.bottom__fav .icon-font {
    top: -12px;
    left: -3px;
    font-size: 24px;
    color: #777
}

.bottom__fav.z-on .icon-font:before {
    color: #ff6923
}

.bottom__fav:after {
    content: '收藏'
}

.bottom__fav:checked:after {
    content: '已收藏'
}

.bottom__contact {
    display: none;
    width: 22px
}

.bottom__contact .icon-font {
    top: -12px;
    left: -1px;
    font-size: 24px;
    color: #666
}

.bottom__contact:after {
    content: '咨询'
}

.bottom__contact .icon-font {
    display: inline-block;
    position: relative;
    top: -11px;
    left: -2px;
    width: 28px;
    height: 28px;
    background-size: 28px 28px
}

.bottom__btn {
    display: block;
    float: right;
    position: relative;
    width: 135px;
    height: 50px;
    font-size: 16px
}

.bottom__btn .course-action {
    font-size: 16px;
    padding: 0
}

.bottom__btn .course-action-left {
    left: -100%;
    color: #23b8ff;
    background: #fff;
    border-left: .5px solid #c8c7cc
}

.bottom__btn .course-action p {
    line-height: 1
}

.bottom__btn .course-action-txt {
    font-size: 14px;
    margin-top: 4px
}

.bottom__btn.z-big {
    font-size: 18px
}

.bottom__btn.z-big .course-action {
    font-size: 18px
}

.bottom__btn--share {
    display: none;
    font-family: Arial;
    line-height: 50px;
    text-align: center;
    margin-top: .5px;
    color: #fff;
    background: #23b8ff
}

.bottom__btn--share:link,
.bottom__btn--share:visited,
.bottom__btn--share:active,
.bottom__btn--share:hover {
    color: #fff
}

.content-mask-title {
    font-size: 18px;
    line-height: 24px
}

.content-mask-desc {
    font-size: 16px;
    line-height: 24px
}

@media only screen and (max-width:360px) {
    .bottom__btn {
        width: 128px
    }
}

@media only screen and (max-width:320px) {
    .bottom__btn {
        width: 110px;
        font-size: 14px
    }

    .bottom__btn.z-big .course-action {
        font-size: 16px
    }

    .bottom__btn .course-action {
        font-size: 14px
    }

    .bottom__contact-wrap {
        margin-left: 20px
    }
}

.layer-bg {
    position: fixed !important
}

.group-price__countdown {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 15px;
    font-size: 12px;
    line-height: 16px;
    text-align: right;
    color: #000
}

.group-card {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 16px 15px;
    border-top: .5px solid #e1e1e1;
    color: #000
}

.group-card__hd {
    max-width: 50%;
    padding: 2px 0;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center
}

.group-card__info {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    text-align: right;
    line-height: 14px
}

.group-card__avatar {
    width: 24px;
    height: 24px;
    background-size: cover;
    margin-right: 4px;
    border-radius: 50%
}

.group-card__name {
    flex: 1;
    -webkit-flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal
}

.group-card__remain {
    color: #23b8ff
}

.group-card__countdown-wrap {
    color: #777;
    line-height: 12px;
    margin-top: 2px
}

.group-card__countdown-wrap>span {
    transform: scale(0.9) translateX(5%);
    display: inline-block
}

.group-card__btn {
    width: 60px;
    height: 28px;
    margin-left: 8px;
    line-height: 28px;
    vertical-align: middle;
    color: #fff;
    background-color: #23b8ff;
    border: 0;
    border-radius: 3px
}

.z-bargain .title-bar__info-price {
    display: none
}

.z-bargain .bargain__wrapper {
    padding: 4.8vw 3.73333vw
}

.z-bargain .bargain__wrapper .bargain {
    background-color: rgba(255, 105, 35, .15);
    display: flex;
    height: 13.33333vw
}

.z-bargain .bargain__line {
    width: 1px;
    height: 8.53333vw;
    align-self: center;
    background-color: rgba(255, 105, 35, .4)
}

.z-bargain .bargain__time {
    align-self: center;
    flex: 1
}

.z-bargain .bargain__time p {
    text-align: center;
    font-size: 3.2vw;
    color: #f4621f
}

.z-bargain .bargain__time p:last-child {
    margin-top: .8vw
}

@media (min-width:375px) {
    .z-bargain .bargain__time .num {
        display: inline-block;
        background: #ff6923;
        border-radius: 2px;
        color: #fff;
        font-size: 10px;
        padding: 1px
    }

    .z-bargain .bargain__time .split {
        margin: 0 .53333vw
    }
}

.z-bargain .bargain__price {
    width: 72vw;
    overflow: hidden;
    display: flex;
    align-items: center
}

.z-bargain .bargain__price--current {
    font-size: 4.26667vw;
    color: #f4621f;
    margin-left: 2.66667vw
}

.z-bargain .bargain__price--base {
    color: #000;
    margin-left: 2.13333vw;
    font-size: 3.2vw;
    vertical-align: -1px
}

.z-bargain .bargain__price--source {
    color: #777;
    margin-left: 2.13333vw;
    font-size: 3.2vw;
    text-decoration: line-through;
    vertical-align: -1px
}

.tab-bar {
    overflow: hidden
}

.tab-bar:before {
    content: "";
    border-top: 3px solid #23b8ff;
    display: block;
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2
}

.tab-bar[data-cur-tab="1"]:before {
    left: 50%
}

.tab-bar.with-3-tabs:before {
    width: 33%
}

.tab-bar.with-3-tabs[data-cur-tab="1"]:before {
    left: 33%
}

.tab-bar.with-3-tabs[data-cur-tab="2"]:before {
    left: 66%
}

.animation .tab-bar:before {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    left: 0
}

.animation .tab-bar[data-cur-tab="0"]:before {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0)
}

.animation .tab-bar[data-cur-tab="1"]:before {
    left: 0;
    -webkit-transform: translate3d(100%, 0, 0)
}

.animation .tab-bar[data-cur-tab="2"]:before {
    left: 0;
    -webkit-transform: translate3d(200%, 0, 0)
}

.tab-bar__item {
    height: 45px;
    width: 50%;
    display: inline-block;
    float: left;
    line-height: 45px;
    text-align: center
}

.tab-bar.with-3-tabs .tab-bar__item {
    width: 33%
}

.tab-bar__item a:link,
.tab-bar__item a:visited,
.tab-bar__item a:active,
.tab-bar__item a:hover {
    color: gray
}

.tab-bar__item.z-active a:link,
.tab-bar__item.z-active a:visited,
.tab-bar__item.z-active a:active,
.tab-bar__item.z-active a:hover {
    color: #23b8ff
}

.section-list .section {
    position: relative;
    min-height: 100%
}

@charset "UTF-8";

.layer.service-ensure-wrap {
    top: auto;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    color: #000;
    background: #fff
}

.punishment__title,
.service-ensure__title {
    padding: 15px;
    font-size: 16px;
    line-height: 22px;
    text-align: center
}

.service-ensure__item {
    padding: 12px 15px
}

.service-ensure__tags {
    padding-bottom: 5px
}

.service-ensure__desc {
    padding-left: 22px;
    font-size: 12px;
    line-height: 12px;
    color: #595959
}

.layer-close {
    border-top: 15px solid #efeff4;
    padding: 15px;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    color: #23b8ff
}

.layer.layer--punishment {
    top: auto;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    color: #000;
    background: #fff
}

.punishment__body {
    padding: 20px;
    font-size: 14px;
    line-height: 21px
}

.header__audition,
.header__audition__tips {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 59;
    margin: 60px;
    text-align: center
}

.header__audition__tips {
    z-index: 101;
    margin: 0;
    padding: 70px 0;
    color: #fff;
    background: rgba(0, 0, 0, .6)
}

.header__audition__tips-text {
    font-size: 16px
}

.header__audition__tips .header__audition__tips-next,
.header__audition__tips .header__audition__tips-replay {
    display: block;
    margin-top: 18px;
    font-size: 12px;
    line-height: 16px;
    color: #fff
}

.header__audition__tips .header__audition__tips-next .text,
.header__audition__tips .header__audition__tips-replay .text {
    display: inline-block;
    vertical-align: middle
}

.header__audition__tips .header__audition__tips-next {
    display: none
}

.header__audition__tips.z-next .header__audition__tips-next {
    display: block
}

.header__audition__tips.z-next .header__audition__tips-replay {
    display: none
}

.header__audition__tips .icon-font {
    margin-right: 4px;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 2px;
    font-size: 8px;
    vertical-align: middle
}

.header__audition-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 1px solid #fff;
    border-radius: 24px;
    width: 122px;
    height: 48px;
    font-size: 18px;
    line-height: 48px;
    color: #fff;
    background-color: rgba(0, 0, 0, .8)
}

.header__audition-link.z-active {
    border-color: #2490eb
}

.header__audition-link:link,
.header__audition-link:visited,
.header__audition-link:active,
.header__audition-link:hover {
    color: #fff
}

.header__audition .text {
    display: inline-block;
    vertical-align: middle
}

.header__audition .i-play,
.header__audition .i-course-live {
    margin-right: 2px;
    font-size: 20px;
    vertical-align: middle
}

.header__audition .i-course-live {
    display: none
}

.header__audition.z-live .i-play {
    display: none
}

.header__audition.z-live .i-course-live {
    display: inline-block
}

.title-bar__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
    padding: 15px 25px 0 15px;
    font-size: 18px;
    line-height: 25px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #000;
    -webkit-line-clamp: 2
}

.title-bar__info-price .u-price {
    font-size: 20px;
    margin-right: 15px;
    color: #e85308
}

.title-bar__info-price .u-price.z-free {
    color: #9bef37
}

.title-bar__info-price .u-price .z-free {
    font-style: normal;
    color: #9bef37
}

.title-bar__info-static {
    overflow: hidden;
    height: 16px
}

.title-bar__info-static.z-free .u-message {
    border: 0;
    margin: 0
}

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

    .title-bar__info-static.z-free .u-message,
    .title-bar__info-static.z-free .title-bar__info-item--apply,
    .title-bar__info-static.z-free .u-comment {
        padding-right: 5px
    }
}

.title-bar__info {
    padding: 0 5px 0 15px
}

.title-bar__info .u-comment,
.title-bar__info .u-commun,
.title-bar__info .u-message {
    display: inline-block;
    margin: 0;
    padding-right: 15px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    color: #777
}

.title-bar__info .u-comment i,
.title-bar__info .u-commun i,
.title-bar__info .u-message i {
    position: relative;
    top: -1px;
    margin-right: 4px;
    font-size: 14px;
    line-height: 14px;
    color: #777
}

.title-bar__info .u-comment em,
.title-bar__info .u-commun em,
.title-bar__info .u-message em {
    font-style: normal
}

.title-bar__info .u-message {
    margin-right: 13px;
    border-right: 1px solid #ececec
}

.title-bar__info .u-commun {
    padding: 0
}

.title-bar__info-item--apply {
    padding-right: 15px
}

.title-bar__info-item--apply em {
    font-style: normal
}

.title-bar__info-price {
    position: relative;
    padding: 10px 0;
    line-height: 24px
}

.u-price-groupbuy {
    display: none;
    font-size: 16px;
    color: #ff4f23
}

.u-price-discount {
    display: none;
    margin-right: 10px;
    font-size: 20px;
    color: #e85308
}

.u-price-discount.z-free {
    color: #9bef37
}

.u-price-original {
    display: none;
    margin: 0 20px 0 0;
    font-size: 14px;
    text-decoration: line-through;
    color: #777
}

.title-bar__info-price .u-price-privilege {
    font-size: 14px;
    position: relative;
    display: inline-block;
    top: -2px
}

.title-bar__info-price .u-price-privilege a,
.title-bar__info-price .u-price-privilege i {
    color: #e85308
}

.title-bar__info-price .u-price-privilege .icon-font {
    position: absolute;
    right: -14px;
    font-size: 10px;
    top: 11px;
    display: inline-block
}

.z-active-groupbuy .u-price-groupbuy {
    display: inline
}

.z-active-groupbuy .u-price-original {
    font-size: 12px;
    display: inline
}

.z-active-groupbuy .u-price {
    display: none
}

.z-active-discount .u-price-discount,
.z-active-discount .u-price-original {
    display: inline
}

.z-active-discount .u-price {
    display: none
}

.z-vip-discount .u-price-discount,
.z-vip-discount .u-price-original {
    display: inline
}

.z-vip-discount .u-price {
    display: none
}

.title-bar__tags {
    position: relative;
    border-top: 10px solid #efeff4;
    padding: 0 25px 0 15px;
    font-size: 12px;
    color: #777
}

.title-bar__tags-item {
    display: inline-block;
    padding: 12px 10px 12px 0
}

.title-bar__tags-icon {
    display: inline-block;
    position: relative;
    border-radius: 2px;
    padding: 2px;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    background: #82bef5
}

.title-bar__tags-icon i {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    font-size: 7px;
    background: #539edf
}

.discount-tags__list {
    padding: 0 25px 0 15px;
    font-size: 12px;
    color: #e85308
}

.discount-tags__item {
    display: inline-block;
    margin: 10px 10px 10px 0;
    border: 1px solid #e85308;
    padding: 2px 7px
}

.discount-tags__detail {
    overflow: hidden;
    padding: 0 20px 0 15px;
    max-height: 48px
}

.discount-tags__detail-name {
    display: inline-block;
    margin: 10px 8px 12px 0;
    border: 1px solid #e85308;
    padding: 2px 7px;
    color: #e85308
}

.discount-tags__detail-countdown,
.discount-tags__detail-desc {
    display: inline-block;
    margin: 10px 10px 12px 0
}

.discount-tags__detail-count,
.discount-tags__detail-getvip {
    display: inline-block;
    margin: 10px 0 12px
}

.discount-tags__detail-getvip {
    display: inline-block;
    position: absolute;
    right: 15px;
    margin: 10px 0 12px;
    border-radius: 3px;
    padding: 4px 20px;
    font-size: 14px;
    color: #fff;
    background: #23b8ff
}

.layer.discount-detail-wrap {
    top: auto;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    color: #000;
    background: #fff
}

.layer.discount-detail-wrap .discount-detail__title {
    padding: 15px;
    font-size: 16px;
    line-height: 22px;
    text-align: center
}

.layer.discount-detail-wrap .discount-detail__list-item {
    padding: 8px 15px
}

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

    .title-bar__info .u-comment,
    .title-bar__info .u-message {
        padding-right: 10px
    }

    .title-bar__info .u-message {
        margin-right: 8px
    }
}

.title-bar.z-sec-kill .title-bar__seckill {
    display: block
}

.title-bar.z-sec-kill .title-bar__info-price {
    display: none
}

.title-bar.z-before-start .seckill__block {
    height: 50px;
    margin: 0 15px 16px;
    background: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/seckillbg_before@2x.b6af662.jpg) no-repeat;
    background-size: cover;
    font-size: 14px;
    line-height: 50px
}

.title-bar.z-before-start .title-bar__info-price,
.title-bar.z-before-start .seckill__sub-btn {
    display: block
}

.title-bar.z-before-start .seckill__tip,
.title-bar.z-before-start .seckill__start-time {
    display: inline
}

.title-bar.z-before-start .seckill__price-wrap,
.title-bar.z-before-start .seckill__info-wrap {
    display: none
}

.title-bar__seckill {
    display: none
}

.seckill__block {
    position: relative;
    height: 55px;
    margin: 10px 15px;
    background: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/seckillbg@2x.9a0d27e.jpg) no-repeat;
    background-size: cover;
    border-radius: 3px;
    font-size: 12px;
    line-height: 12px;
    color: #fff
}

.seckill__block.z-no-limit {
    height: 50px;
    line-height: 50px;
    background: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/seckillbg_before@2x.b6af662.jpg) no-repeat;
    background-size: cover
}

.seckill__block.z-no-limit .seckill__price-wrap {
    padding: 0;
    font-size: 0
}

.seckill__block.z-no-limit .seckill__price--dis {
    display: inline-block;
    margin: 0 10px;
    line-height: 50px;
    vertical-align: top
}

.seckill__block.z-no-limit .seckill__price--ori {
    display: inline-block;
    font-size: 12px;
    line-height: 50px
}

.seckill__block.z-no-limit .seckill__info-wrap {
    top: 0;
    padding: 0 10px;
    height: 50px;
    line-height: 50px
}

.seckill__block.z-no-limit .seckill__info-wrap:before {
    top: 19px;
    bottom: 19px
}

.seckill__block.z-no-limit .seckill__count {
    display: none
}

.seckill__tip {
    display: none;
    font-weight: 700;
    margin: 0 5px 0 10px
}

.seckill__start-time {
    display: none
}

.seckill__sub-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4343;
    width: 90px;
    height: 30px;
    border-radius: 3px;
    text-align: center;
    line-height: 30px
}

.seckill__sub-btn:link,
.seckill__sub-btn:visited,
.seckill__sub-btn:active,
.seckill__sub-btn:hover {
    color: #fff
}

.seckill__sub-btn:after {
    border: 1px solid #fff;
    border-radius: 3px
}

.seckill__sub-btn .i-remind2 {
    font-size: 21px;
    vertical-align: initial;
    position: relative;
    top: 1px
}

.seckill__sub-btn.z-done .seckill__sub-btn-word:before {
    content: '预约成功'
}

.seckill__sub-btn-word:before {
    content: '预约提醒'
}

.seckill__price-wrap {
    padding: 10px
}

.seckill__price-num {
    margin-left: 4px;
    text-decoration: line-through
}

.seckill__price--dis {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 3px
}

.seckill__price--ori {
    opacity: .6
}

.seckill__info-wrap {
    position: absolute;
    top: 11px;
    right: 10px;
    padding: 2px 0 2px 10px;
    height: 29px;
    text-align: right
}

.seckill__info-wrap:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-left: 1px solid #fff;
    content: ' ';
    -webkit-transform-origin: left top
}

.seckill__count {
    margin-top: 5px
}

.seckill__recent-info {
    font-size: 14px;
    line-height: 14px;
    color: #ff4343;
    margin: 0 0 15px 15px
}

@media only screen and (max-width:320px) {
    .title-bar.z-before-start .seckill__block {
        height: 55px;
        background: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/seckillbg@2x.9a0d27e.jpg) no-repeat;
        background-size: cover;
        line-height: 14px
    }

    .title-bar.z-before-start .seckill__tip {
        display: block;
        padding: 11px 0 5px 11px;
        margin: 0
    }

    .title-bar.z-before-start .seckill__start-time {
        margin-left: 10px
    }

    .seckill__sub-btn {
        top: 12px
    }

    .seckill__block.z-no-limit .seckill__price--dis {
        font-size: 16px
    }

    .seckill__block.z-no-limit .seckill__price--ori {
        font-size: 12px
    }

    .seckill__block.z-no-limit .seckill__info-wrap {
        padding: 0 0 0 10px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
    .seckill__info-wrap:before {
        -webkit-transform: scaleX(0.7)
    }

    .seckill__sub-btn:after {
        border-radius: 5px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .seckill__info-wrap:before {
        -webkit-transform: scaleX(0.5)
    }

    .seckill__sub-btn:after {
        border-radius: 6px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
    .seckill__info-wrap:before {
        -webkit-transform: scaleX(0.3)
    }

    .seckill__sub-btn:after {
        border-radius: 9px
    }
}

.coding-chapter-list {
    background: #efeff4;
    padding-top: 10px;
    position: relative;
    overflow: hidden
}

.coding-chapter {
    background: #fff
}

.coding-chapter-header {
    line-height: 40px;
    padding: 0 16px
}

.coding-chapter-title {
    font-size: 18px;
    color: #333;
    padding-right: 66px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 40px;
    white-space: nowrap
}

.coding-chapter-duration {
    font-size: 14px;
    color: #999;
    position: absolute;
    right: 14px;
    height: 40px;
    top: 0
}

.coding-chapter-duration .i-time {
    font-size: 14px;
    margin-right: 2px
}

.coding-chapter-duration span,
.coding-chapter-duration i {
    display: inline-block;
    vertical-align: middle
}

.coding-chapter-desc {
    padding: 16px;
    font-size: 14px;
    line-height: 22px;
    color: #666
}

@charset "UTF-8";

.tip.comment-tip {
    z-index: 100000
}

.comments-list-item {
    position: relative;
    padding-top: 15px;
    font-size: 14px;
    line-height: 16px
}

.comments-list-item:after {
    visibility: visible;
    position: absolute;
    border-bottom: 1px solid #ececec;
    width: 100%;
    height: 0;
    content: ""
}

.comments-list-item__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px
}

.comments-list-item__img {
    border-radius: 50%;
    width: 45px;
    height: 45px
}

.comments-list-item__info {
    position: relative;
    margin-bottom: 10px;
    padding-left: 105px;
    height: 45px;
    line-height: 20px;
    vertical-align: bottom
}

.comments-list-item__name {
    position: absolute;
    top: 12px;
    left: 62px;
    color: #000
}

.comments-list-item__date {
    position: absolute;
    top: 0;
    right: 0;
    color: #bbb
}

.comments-list-item__praise {
    position: absolute;
    top: 0;
    right: 0
}

.comments-list-item__praise svg {
    stroke: #B5B5B5;
    fill: #B5B5B5;
    width: 14px;
    height: 14px;
    vertical-align: -1px;
    margin-right: 2px
}

.comments-list-item__praise.active {
    color: #23B8FF
}

.comments-list-item__praise.active svg {
    stroke: #23B8FF;
    fill: #23B8FF
}

.comments-list-item__content {
    padding: 5px 0 15px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    word-wrap: break-word;
    color: #000
}

.comments-list-item__progress {
    position: relative;
    height: 16px;
    padding-bottom: 15px;
    color: #bbb
}

.comments-list-item__reply {
    margin-left: 10px;
    padding: 10px 0 15px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    word-wrap: break-word;
    color: #999
}

.comments-list-item__reply-date {
    margin-left: 10px;
    padding-bottom: 15px;
    font-size: 12px;
    color: #bbb
}

.comments-list-item-tag {
    position: absolute;
    right: -15px;
    top: 0;
    border-width: 19px;
    border-style: solid;
    border-color: #23B8FF #23B8FF transparent transparent
}

.comments-list-item-tag p {
    position: absolute;
    color: #fff;
    top: -15px;
    left: 0;
    font-size: 14px
}

.comments-list-item.quality-comment:before {
    content: '精';
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .comments-list-item:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: left top
    }
}

.star-list i {
    display: inline-block;
    margin: 0 2px;
    font-size: 20px;
    color: #ffae05;
    cursor: pointer
}

.star-list i.half-star {
    color: #ffae05
}

.star-list i.no-star {
    color: #ececec
}

.star-list .star-label {
    display: inline-block;
    position: relative;
    top: 1px;
    padding: 0 4px;
    font-size: 14px;
    vertical-align: middle;
    color: #ffae05
}

.star-list .star-label.star-label-gray {
    color: #999
}

.star-list i.no-event {
    cursor: auto
}

.star-list.z-in-animation i {
    width: 20px;
    height: 20px;
    color: #ffae05;
    background: url(//9.url.cn/edu/mobilev2/modules/Star/img/comment-star-animate.944b6ce.gif) no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto
}

.star-list.z-in-animation i.half-star {
    color: #ffae05;
    background-position: 0;
    background-size: 0
}

.star-list.z-in-animation i.no-star {
    color: #ececec;
    background-position: 0;
    background-size: 0
}

@charset "UTF-8";

body.pay-layer-open {
    position: fixed;
    width: 100%
}

body.pay-layer-open .wrap,
body.pay-layer-open .list-wrapper,
body.pay-layer-open .wrapper,
body.pay-layer-open .scroll-wrapper {
    position: fixed;
    overflow: hidden;
    width: 100%
}

.tip.click-tip {
    z-index: 100000
}

.l-pay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100000;
    overflow: hidden
}

.l-pay__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 117.33333vw;
    padding: 15px;
    overflow: hidden
}

.l-pay__content--package {
    height: 96vw
}

.l-pay__close {
    position: absolute;
    right: 4.26667vw;
    top: 4.26667vw;
    width: 3.73333vw;
    height: 3.73333vw;
    z-index: 100
}

.l-pay__user {
    position: relative;
    height: 14.93333vw
}

.l-pay__user--avatar {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 10.66667vw;
    height: 10.66667vw;
    background-size: 10.66667vw 10.66667vw
}

.l-pay__user--avatar::after {
    position: absolute;
    bottom: -1.6vw;
    right: -1.6vw;
    width: 6.4vw;
    height: 6.4vw
}

.l-pay__user--name {
    display: inline-block;
    vertical-align: middle;
    max-width: 26.66667vw;
    height: 10.66667vw;
    line-height: 10.66667vw
}

.l-pay__user--desc {
    display: inline-block;
    vertical-align: middle;
    height: 10.66667vw;
    line-height: 10.66667vw
}

.l-pay__user--info {
    position: absolute;
    top: 0vw;
    left: 13.33333vw
}

.l-pay__header {
    padding: 4vw 0
}

.l-pay__header--title {
    font-size: 4.8vw;
    width: 80vw
}

.l-pay__header .l-pay__price {
    margin-top: 2.66667vw
}

.l-pay__header .l-pay__price--desc {
    margin-top: 1.06667vw
}

.l-pay__header .l-pay__price--desc .icon-font {
    vertical-align: middle
}

.l-term {
    padding: 2.66667vw 0;
    margin-top: 1.33333vw
}

.l-addr,
.l-coupon,
.l-jd {
    padding: 2.66667vw 0
}

.l-select {
    height: 54.93333vw;
    overflow-y: scroll
}

.l-buy {
    position: fixed;
    bottom: 0;
    left: 4vw;
    right: 4vw;
    height: 17.06667vw;
    line-height: 17.06667vw;
    text-align: center
}

.l-addr__edit {
    position: absolute;
    right: 3.73333vw;
    top: 3.73333vw
}

.l-addr__edit .icon-font {
    font-size: 4.8vw
}

.l-jd__icon {
    display: inline-block;
    position: absolute;
    top: 1.6vw;
    left: 4.26667vw;
    width: 24px;
    height: 30px;
    background-size: 24px 30px;
    background-image: url(//9.url.cn/edu/mobilev2/img/icon-jd@2x.4a42f30.png)
}

.l-jd__content.icon {
    padding-left: 50px
}

.l-addr__content.multi {
    padding-top: 14px
}

.l-addr__block {
    margin-bottom: 2.66667vw
}

.c-term__title,
.c-addr__title,
.c-coupon__title,
.c-jd__title {
    font-size: 3.73333vw;
    color: #999
}

.c-addr__content,
.i-circle-check {
    display: none
}

.c-addr.select .i-edit2 {
    color: #23b8ff
}

.c-addr.select .i-circle {
    display: none
}

.c-addr.select .i-circle-check {
    display: inline-block
}

.c-addr.select .c-addr__content {
    display: block
}

.c-addr__title .icon-font {
    font-size: 5.33333vw;
    margin-right: 1.06667vw;
    vertical-align: -1px
}

.c-term__content--item,
.c-addr__content--item,
.c-coupon__content--item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 42px;
    line-height: 42px;
    margin-top: 2.66667vw;
    padding: 0 16px;
    font-size: 16px
}

.c-term__content--item.multi,
.c-addr__content--item.multi,
.c-coupon__content--item.multi {
    height: auto;
    line-height: inherit
}

.c-term__content--item::after,
.c-addr__content--item::after,
.c-coupon__content--item::after {
    border: 1px solid #c8c7cc;
    border-radius: 4px
}

.c-term__content--item .icon-font,
.c-addr__content--item .icon-font,
.c-coupon__content--item .icon-font {
    vertical-align: 0 !important
}

.c-jd__content--item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 42px;
    line-height: 42px;
    margin-top: 2.66667vw;
    padding: 0 16px;
    font-size: 16px;
    display: inline-block;
    margin-right: 2.66667vw
}

.c-jd__content--item.multi {
    height: auto;
    line-height: inherit
}

.c-jd__content--item::after {
    border: 1px solid #c8c7cc;
    border-radius: 4px
}

.c-term__content--item.active,
.c-addr__content--item.active,
.c-coupon__content--item.active,
.c-jd__content--item.active {
    color: #23b8ff
}

.c-term__content--item.active::after,
.c-addr__content--item.active::after,
.c-coupon__content--item.active::after,
.c-jd__content--item.active::after {
    border-color: #23b8ff
}

.c-pay {
    background-color: rgba(0, 0, 0, .5);
    color: #000;
    font-size: 4.26667vw
}

.c-pay__content {
    background-color: #fff
}

.c-pay__close .i-close {
    font-size: 3.73333vw;
    color: #777
}

.c-pay__user {
    border-bottom-color: #c8c7cc
}

.c-pay__user--avatar {
    border-radius: 50%;
    background-image: url(//9.url.cn/edu/mobilev2/img/user_visitor@2x.95cba91.png)
}

.c-pay__user--avatar::after {
    content: '';
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.c-pay__user--avatar.z-weixin:after {
    background-image: url(//9.url.cn/edu/mobilev2/img/user_wx@2x.1e921d3.png)
}

.c-pay__user--avatar.z-qq:after {
    background-image: url(//9.url.cn/edu/mobilev2/img/user_qq@2x.6517151.png)
}

.c-pay__user--name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-pay__header {
    border-bottom-color: #c8c7cc
}

.c-pay__header .l-pay__price {
    color: #ff4f23
}

.c-pay__header .l-pay__price--value {
    font-size: 5.33333vw
}

.c-pay__header .l-pay__price--value .icon-font {
    font-size: 5.33333vw;
    vertical-align: middle
}

.c-pay__header .l-pay__price--desc {
    font-size: 14px;
    vertical-align: middle
}

.c-pay__header .l-pay__price--desc .icon-font {
    font-size: 14px
}

.o-buy__ok {
    width: 100%;
    height: 11.73333vw;
    padding: 0;
    text-align: center;
    height: 11.73333vw;
    line-height: 11.73333vw;
    background-color: #23b8ff;
    font-size: 4.8vw;
    color: #fff;
    border: 0;
    border-radius: 4px
}

.c-term__inner--name {
    max-width: 34.66667vw;
    float: left;
    margin-right: 2.13333vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-term__inner--overflow {
    overflow: hidden
}

.c-term__inner--desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-pay__price--value {
    vertical-align: bottom
}

.c-pay__price--value .del {
    font-size: 14px;
    color: #777;
    padding-left: 2.13333vw;
    text-decoration: line-through
}

.c-pay__price--value .del .icon-font {
    font-size: 14px;
    vertical-align: middle
}

.c-coupon__inner {
    margin-right: 5.33333vw
}

.c-jd__tips {
    font-size: 3.73333vw;
    color: #777;
    margin: 4vw auto 2.66667vw;
    display: none
}

.c-jd__tips a {
    color: #23b8ff
}

.c-jd.select-jd .c-jd__tips {
    display: block
}

.c-addr__content--item.error {
    color: red
}

.c-addr__content--item.error::after {
    border-color: red
}

.c-addr__content--item.error .icon-font {
    color: red
}

.c-addr__block {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.c-pay__close,
.c-addr__edit {}

.c-pay__close::before,
.c-addr__edit::before {
    position: absolute;
    content: '';
    top: -2.66667vw;
    left: -2.66667vw;
    right: -2.66667vw;
    bottom: -2.66667vw
}

.icon-font {
    vertical-align: middle !important;
    margin-right: 1.06667vw
}

.c-coupon__content--item .icon-font {
    margin-right: 0
}

.dialog-outer {
    z-index: 100002 !important;
    top: 50% !important;
    border-radius: 10px !important
}

.dialog-bg {
    z-index: 100001 !important;
    background: rgba(0, 0, 0, .5) !important
}

.dialog-btn-group button {
    font-size: 18px !important
}

.wechat-share-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: 10020
}

.share__guide {
    background: url(//9.url.cn/edu/mobilev2/img/share-arrow.c7b54a6.png);
    position: absolute;
    right: 24px;
    top: 10px;
    width: 74px;
    height: 100px;
    background-size: 74px 100px
}

.share__txt {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 142px;
    font-size: 24px;
    color: #fff;
    text-align: center
}

.header__login,
.header__callQQ {
    display: inline-block;
    position: absolute;
    top: 28%;
    left: 50%;
    margin-left: -41px;
    border: 1px solid #fff;
    border-radius: 3px;
    width: 80px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    color: #fff
}

.header__login:link,
.header__login:visited,
.header__login:active,
.header__login:hover,
.header__callQQ:link,
.header__callQQ:visited,
.header__callQQ:active,
.header__callQQ:hover {
    color: #fff
}

.header__login--record {
    top: 21%;
    margin-left: -23px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 23px;
    width: 46px;
    height: 46px;
    font-size: 0;
    background: transparent;
    transform: none
}

.header__login--record:before {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 12px;
    left: 16px;
    margin: auto;
    box-sizing: border-box;
    border: 20px solid transparent;
    border-width: 10px 16px;
    border-left-color: #fff;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: ""
}

.header__callQQ {
    margin-left: -66px;
    width: 130px
}

.header__distinctCover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.header__distinctImg {
    width: 100%;
    height: 100%
}

.header__status .course-status {
    display: block;
    position: absolute;
    right: 15px;
    bottom: 0;
    z-index: 8;
    width: 97px;
    height: 75px;
    background: no-repeat 0 0;
    background-size: 97px 75px
}

.header__status .course-status.end {
    z-index: 100;
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/icon-hd-status-end@2x.68bfb42.png)
}

.header__status .course-status.pending {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/icon-hd-status-pending@2x.c738164.png)
}

.header__status .course-status.refunding {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/icon-hd-status-refunding@2x.1a51259.png)
}

.header__status .course-status.applied {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/icon-hd-status-applied@2x.dbf49d5.png)
}

body .tip.show {
    top: 45px
}

body .tip .i-map {
    top: 0;
    color: #29b1cc
}

.course-action {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    width: 100%;
    height: 50px;
    color: #fff;
    background: #2eb597
}

.course-action:focus {
    outline: 0
}

.course-action.active {
    color: #f1bca6;
    background: #e26410
}

.course-action:disabled,
.course-action.active:disabled {
    color: #ccc;
    background: #eee
}

.course-action.center {
    background: #23b8ff
}

.course-action.center.active {
    color: #a5c5ec;
    background: #0a7cd8
}

.course-action.red {
    background: #d12928
}

.course-action.red.active {
    background: #d12928
}

.course-action.partner {
    background-color: #23B8FF;
    color: #FFF;
    top: 0
}

.course-action.reset {
    background: #fff;
    color: #23b8ff;
    margin-top: .5px
}

.center {
    text-align: center
}

.layer.layer--course-share {
    top: auto;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    color: #000;
    background: #fff
}

.course-share__wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #000;
    background-color: #FFF
}

.course-share__main {
    margin: 0 auto
}

.course-share__imgListContainer {
    padding: 0 .04rem
}

.course-share__partnerFriendsList .course-share__iconContainer {
    vertical-align: middle;
    display: inline-block;
    margin-right: .04rem
}

.course-share__partnerFriendsList .course-share__moreDot {
    display: inline-block;
    margin-right: .04rem
}

.course-share__imgLogo {
    width: .32rem;
    height: .32rem;
    border-radius: .32rem
}

.course-share__shartBtn {
    width: 3.45rem;
    height: .4rem;
    background: #23B8FF;
    color: #FFF;
    margin: .2rem auto .15rem;
    border-radius: .04rem;
    font-size: .18rem
}

.course-share__buttonTxt {
    line-height: .26rem;
    padding-top: .07rem
}

.course-share__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 27px;
    height: 27px
}

.course-share__close-icon:before,
.course-share__close-icon:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66.7%;
    height: 1px;
    background: #333;
    content: ""
}

.course-share__close-icon:before {
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg)
}

.course-share__close-icon:after {
    transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg)
}

.course-share__title {
    padding: .16rem 0;
    height: .16rem;
    font-size: .14rem;
    line-height: .2rem;
    width: 100%;
    color: #777;
    text-align: center;
    border-bottom: .5px solid #eee
}

.course-share__tips {
    font-size: .16rem;
    line-height: 20px
}

.course-share__moreDot {
    vertical-align: middle;
    display: table
}

.course-share__dotContainer {
    display: table-cell;
    vertical-align: middle
}

.course-share__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    margin-right: 3px;
    float: left;
    background: #000
}

.course-share__mainTxt {
    margin-top: .24rem;
    font-size: .16rem;
    line-height: .24rem;
    margin-bottom: .16rem
}

.course-share__mainTxt.z-nofollow {
    margin-bottom: .24rem
}

.course-share__info {
    margin-top: 7px;
    font-size: 14px;
    line-height: 20px;
    color: #777
}

.course-share__btn {
    border-top: 10px solid #e0e0e0;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    color: #23b8ff
}

.layer.layer--course-share-wx {
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10100;
    margin: 0;
    width: 100%;
    height: 100%;
    color: #fff
}

.layer.layer--distribution-wx {
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, .6)
}

.course-share-wx-word {
    margin: 123px 55px;
    font-size: 24px;
    line-height: 36px;
    text-align: center
}

.course-share-wx-tip {
    color: #fe9455
}

.course-share-wx-icon,
.distribution-wx-icon {
    position: absolute;
    top: 8px;
    right: 22px;
    width: 74px;
    height: 100px;
    background: url(//9.url.cn/edu/mobilev2/img/share-arrow.c7b54a6.png) no-repeat 0 0;
    background-size: 74px 100px
}

.distribution-wx-icon {
    top: 0;
    right: 29px
}

.distribution-wx-word {
    float: right;
    margin: 102px 29px 0 0;
    font-size: 18px;
    line-height: 25px;
    color: #fff
}

.bottom__distribution-wrap {
    float: left;
    margin-left: 15px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #777
}

.bottom__distribution-price {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    color: #23b8ff
}

@media only screen and (max-width:360px) {
    .course-share-wx-word {
        margin: 123px 45px
    }
}

@media only screen and (max-width:320px) {
    .course-share-wx-word {
        margin-top: 106px;
        font-size: 20px;
        line-height: 34px
    }
}

.content-mask {
    text-align: center;
    height: 100%
}

#content-mask-fly {
    height: 100%;
    width: 60%;
    float: right
}

.content-mask-fly {
    width: 100%;
    height: 30%
}

.content-mask-fly1 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/partnerShare/1.23643a0.png)
}

.content-mask-fly2 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/partnerShare/2.bf70459.png)
}

.content-mask-fly3 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/partnerShare/3.4733b7b.png)
}

.basic-info-list__title-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    padding: 10px 16px 5px;
    line-height: 22px;
    white-space: normal;
    word-break: break-all;
    color: #000;
    -webkit-line-clamp: 2
}

.basic-info-list__title-info {
    padding: 0 16px 5px;
    line-height: 26px
}

.basic-info-list__title-info-item {
    display: inline-block;
    padding-right: 10px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    color: #666
}

.basic-info-list__title-info-item i {
    position: relative;
    top: -3px;
    margin-right: 4px;
    font-size: 14px;
    line-height: 14px
}

.basic-info-list__title-info-item em {
    font-style: normal
}

.header__task .header-task__player {
    display: none
}

.header__task.z-record-ready .header-task__player,
.header__task.z-live-ready .header-task__player {
    display: block
}

.header__task-nextlive,
.header-task__player {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    text-align: center
}

.header__task-nextlive.header-task__player-mask,
.header-task__player.header-task__player-mask {
    background: rgba(0, 0, 0, .7)
}

.header-task__player-cnt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 120px;
    height: 54px
}

.header-task__player-icon {
    display: block;
    margin: auto;
    border-radius: 35px;
    width: 54px;
    height: 54px;
    font-size: 24px;
    line-height: 54px;
    color: #fff;
    background-color: rgba(0, 0, 0, .4)
}

.header-task__player-icon.i-play {
    border: 4px solid #fff
}

.header-task__player-desc {
    padding-top: 6px;
    color: #fff
}

.header-task__living-gif {
    display: inline-block;
    padding-right: 4px;
    width: 14px;
    height: 14px;
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/task-live-gif.a430565.gif);
    background-repeat: no-repeat;
    background-position: 0 2px;
    background-size: 14px 14px
}

.header__task-tips {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 130px;
    height: 130px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    transform: translateY(-50%)
}

.header__task-tips i {
    position: absolute;
    top: 2px;
    right: 2px;
    color: rgba(255, 255, 255, .8)
}

.header__task-tips-wording {
    margin: 25px 10px 15px
}

.header__task-tips-button {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto
}

.header__task-nextlive {
    background: rgba(0, 0, 0, .6)
}

.header__task-nextlive-wrap {
    overflow: hidden;
    position: absolute;
    bottom: 50%;
    margin: 0 5%;
    width: 90%;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
}

.header__task-nextlive-title {
    padding-bottom: 10px
}

.section-contents .cur-term {
    padding: 0 16px;
    height: 40px;
    line-height: 40px
}

.section-contents .cur-term .value,
.section-contents .cur-term .tips {
    float: right
}

.section-contents .cur-term .value.z-zero {
    color: #909090
}

.section-contents .cur-term .tips {
    display: none;
    margin-top: 9px;
    margin-right: 10px;
    border: 1px solid #e85308;
    border-radius: 2px;
    width: 80px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #e85308
}

.section-contents .cur-term .tips.z-show {
    display: block
}

.section-contents .cur-term .tips.z-zero {
    border-color: #999;
    width: 55px;
    color: #999
}

.section-contents .cur-term .i-v-right {
    display: none;
    margin-top: -12px;
    margin-right: -14px;
    font-size: 20px
}

.section-contents .cur-term.clickable .value {
    margin-right: 20px
}

.section-contents .cur-term.clickable .i-v-right {
    display: block
}

.section-contents .full-screen-tip {
    min-height: 250px;
    background: #efeff4
}

.section-contents .sub-course-list-wrapper {
    position: relative;
    min-height: 46px
}

.section-contents .load-more-btn {
    font-size: 12px;
    background: #efeff4
}

.course-cnt__chapter-title {
    overflow: hidden;
    height: 46px;
    font-size: 16px;
    line-height: 46px;
    white-space: nowrap;
    text-indent: 16px;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #404040
}

.course-cnt__lesson-item {
    overflow: hidden
}

.course-cnt__lesson-item.z-hide .course-cnt__task-list {
    display: none
}

.course-cnt__lesson-item.z-hide .course-cnt__lesson-title-word {
    display: block;
    max-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.course-cnt__lesson-item.z-end .course-cnt__lesson-link {
    color: #bbb
}

.course-cnt__lesson-item .course-cnt__lesson-link .course-cnt__task-tips--free {
    display: block
}

.course-cnt__lesson-item.z-lesson-inclass .course-cnt__task-tips--live {
    display: block
}

.course-cnt__lesson-item.z-lesson-inclass .course-cnt__lesson-title-word {
    max-width: 52%
}

.course-cnt__lesson-item.z-lesson-inclass .z-free .course-cnt__lesson-title-word {
    max-width: 46%
}

.course-cnt__lesson-item.border-bottom:after {
    margin-left: 42px
}

.course-cnt__lesson-link {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 10px 0 10px 16px;
    max-height: 48px;
    font-size: 0;
    color: #404040
}

.course-cnt__lesson-link:link,
.course-cnt__lesson-link:visited,
.course-cnt__lesson-link:active,
.course-cnt__lesson-link:hover {
    color: #404040
}

.course-cnt__lesson-link .course-cnt__task-tips {
    display: none;
    float: left;
    top: 5px
}

.course-cnt__lesson-link.z-free .course-cnt__lesson-title-word {
    max-width: 52%
}

.course-cnt__lesson-no {
    display: block;
    float: left;
    position: relative;
    margin-right: 12px;
    font-size: 16px;
    line-height: 36px;
    color: #bbb;
    margin-left: 4%;
}

.course-cnt__lesson-title-word {
    display: -webkit-box;
    float: left;
    overflow: hidden;
    -webkit-box-orient: vertical;
    max-width: 70%;
    max-height: 52px;
    font-size: 16px;
    line-height: 26px;
    white-space: inherit;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2
}

.course-cnt__task-item:last-child .task-border-line {
    border-right: 1px solid #fff
}

.course-cnt__task-link {
    display: block;
    position: relative;
    padding: 8px 0 0 87px
}

.course-cnt__task-link.z-end .course-cnt__task-title,
.course-cnt__task-link.z-end .course-cnt__task-info {
    color: #bbb
}

.course-cnt__task-link.z-active {
    background-color: #e5e5e5
}

.course-cnt__task-link.z-active .task-border-line {
    border-color: #e5e5e5
}

.course-cnt__empty {
    display: none;
    padding-left: 15px;
    font-size: 14px;
    line-height: 20px;
    color: #666
}

.course-cnt__empty:last-child {
    display: block
}

.course-cnt__task-icon {
    top: 7px;
    left: 16px;
    width: 30px
}

.course-cnt__task-icon .icon-font {
    font-size: 20px;
    color: #d1e7fc
}

.course-cnt__task-cnt {
    padding-bottom: 18px;
    height: 42px
}

.course-cnt__task-cnt .icon-font {
    position: relative;
    top: 2px;
    font-size: 20px;
    vertical-align: inherit;
    color: #badefa
}

.course-cnt__task-cnt.z-inclass .course-cnt__task-tips--living {
    display: inline
}

.course-cnt__task-title {
    display: inline-block;
    overflow: hidden;
    max-width: 75%;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #404040
}

.course-cnt__task-tips {
    margin-left: 5px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: inherit;
    text-indent: 0;
    color: #e85308
}

.course-cnt__task-tips--living,
.course-cnt__task-tips--live,
.course-cnt__task-tips--free {
    display: inline-block;
    position: relative;
    top: 0;
    border: 1px solid #e85308;
    border-radius: 2px;
    padding: 0 3px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    color: #e85308
}

.course-cnt__task-tips--replay {
    border: 1px solid #e85308;
    border-radius: 2px;
    padding: 0 2px
}

.course-cnt__task-tips--living {
    display: none
}

.course-cnt__task-info {
    overflow: hidden;
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #909090
}

.icon-down-arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -12px;
    width: 24px;
    height: 24px;
    font-family: mfont;
    font-size: 16px;
    line-height: 24px;
    text-indent: 0;
    color: #a7a7a7;
    -webkit-font-smoothing: antialiased
}

.label {
    display: inline-block;
    text-align: center
}

.label.label-green {
    color: #fff;
    background: #6ab147
}

.task-border-line {
    display: none;
    position: absolute;
    top: 25px;
    left: 25px;
    border-right: 1px dashed #d9d9d9;
    width: 1px;
    height: 75px
}

.task-dot {
    position: absolute;
    top: 18px;
    left: 22px;
    border-radius: 5px;
    width: 9px;
    height: 9px;
    background: #d9d9d9
}

.section-contents .i-course-record,
.section-contents .i-course-live,
.section-contents .i-course-replay,
.section-contents .i-course-test,
.section-contents .i-course-data {
    display: block;
    position: absolute;
    top: 10px;
    left: 42px;
    width: 30px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 30px auto
}

.section-contents .i-course-record:before,
.section-contents .i-course-live:before,
.section-contents .i-course-replay:before,
.section-contents .i-course-test:before,
.section-contents .i-course-data:before {
    content: ""
}

.section-contents .i-course-record {
    background-image: url(../images/list-play.png)
}

.section-contents .i-course-live {
    background-image: url(../images/list-live.png)
}

.section-contents .i-course-replay {
    background-image: url(../images/list-play.png)
}

.section-contents .i-course-test {
    background-image: url(../images/list-play.png)
}

.section-contents .i-course-data {
    background-image: url(../images/list-play.png)
}

.section-contents .z-end .i-course-record {
    background-image: url(../images/list-play.png)
}

.section-contents .z-end .i-course-live {
    background-image: url(../images/list-live-gray.png)
}

.section-contents .z-end .i-course-replay {
    background-image: url(../images/list-play.png)
}

.section-contents .z-end .i-course-test {
    background-image: url(../images/list-play.png)
}

.section-contents .z-end .i-course-data {
    background-image: url(../images/list-play.png)
}

.sub-course-static {
    overflow: hidden;
    border-bottom: 10px solid #efeff4;
    padding: 0 16px 0 86px;
    max-height: 72px;
    font-size: 14px;
    line-height: 36px;
    color: #777
}

.sub-course-static .i-course-record,
.sub-course-static .i-course-live,
.sub-course-static .i-course-replay,
.sub-course-static .i-course-test,
.sub-course-static .i-course-data {
    display: inline-block;
    position: relative;
    top: 8px;
    left: 0;
    width: 32px;
    height: 20px;
    font-size: 18px;
    line-height: 20px;
    background-repeat: no-repeat;
    background-size: 26px auto
}

.sub-course-static__title {
    display: inline-block;
    position: absolute;
    left: 16px
}

.sub-course-static__cate {
    display: inline-block;
    padding: 0 10px
}

@media only screen and (max-width:375px) {
    .sub-course-static__cate {
        padding: 0 5px
    }
}

body .dialog-content {
    word-break: break-word
}

.sub-course-list.z-term-end .course-cnt__lesson-link {
    color: #bbb
}

.sub-course-list.z-term-end .course-cnt__task-title,
.sub-course-list.z-term-end .course-cnt__task-info {
    color: #bbb
}

.sub-course-list.z-term-end .i-course-record {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/task-video-gray@2x.7ab535e.png)
}

.sub-course-list.z-term-end .i-course-live {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/task-live-gray@2x.7dda23c.png)
}

.sub-course-list.z-term-end .i-course-replay {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/task-replay-gray@2x.2f0494a.png)
}

.sub-course-list.z-term-end .i-course-test {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/task-test-gray@2x.19af2a9.png)
}

.sub-course-list.z-term-end .i-course-data {
    background-image: url(//9.url.cn/edu/mobilev2/pages/courseDetail/img/task-file-gray@2x.ce5bccc.png)
}

.tip.comment-tip {
    z-index: 100000
}

.comments-list-item {
    position: relative;
    padding-top: 15px;
    font-size: 14px;
    line-height: 16px
}

.comments-list-item:after {
    visibility: visible;
    position: absolute;
    border-bottom: 1px solid #ececec;
    width: 100%;
    height: 0;
    content: ""
}

.comments-list-item__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px
}

.comments-list-item__img {
    border-radius: 50%;
    width: 45px;
    height: 45px
}

.comments-list-item__info {
    position: relative;
    margin-bottom: 10px;
    padding-left: 105px;
    height: 45px;
    line-height: 20px;
    vertical-align: bottom
}

.comments-list-item__name {
    position: absolute;
    top: 12px;
    left: 62px;
    color: #000
}

.comments-list-item__date {
    position: absolute;
    top: 0;
    right: 0;
    color: #bbb
}

.comments-list-item__praise {
    position: absolute;
    top: 0;
    right: 0
}

.comments-list-item__praise svg {
    stroke: #B5B5B5;
    fill: #B5B5B5;
    width: 14px;
    height: 14px;
    vertical-align: -1px;
    margin-right: 2px
}

.comments-list-item__praise.active {
    color: #23B8FF
}

.comments-list-item__praise.active svg {
    stroke: #23B8FF;
    fill: #23B8FF
}

.comments-list-item__content {
    padding: 5px 0 15px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    word-wrap: break-word;
    color: #000
}

.comments-list-item__progress {
    position: relative;
    height: 16px;
    padding-bottom: 15px;
    color: #bbb
}

.comments-list-item__reply {
    margin-left: 10px;
    padding: 10px 0 15px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    word-wrap: break-word;
    color: #999
}

.comments-list-item__reply-date {
    margin-left: 10px;
    padding-bottom: 15px;
    font-size: 12px;
    color: #bbb
}

.comments-list-item-tag {
    position: absolute;
    right: -15px;
    top: 0;
    border-width: 19px;
    border-style: solid;
    border-color: #23B8FF #23B8FF transparent transparent
}

.comments-list-item-tag p {
    position: absolute;
    color: #fff;
    top: -15px;
    left: 0;
    font-size: 14px
}

.comments-list-item.quality-comment:before {
    content: '精';
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .comments-list-item:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: left top
    }
}

html {
    height: auto;
}

body {
    min-height: 100%;
    font-size: 14px;
    color: #777
}

.m-header {
    position: fixed;
    top: 0;
    left: 0
}

.icon-font {
    vertical-align: 1px
}

.mod-comments-info {
    position: relative;
    padding: 60px 0 10px;
    line-height: 20px;
    vertical-align: middle
}

.mod-comments-info__total {
    padding-left: 15px;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    color: #0A0A0A
}

.mod-comments-info__button {
    position: absolute;
    right: 0;
    bottom: 10px;
    padding-right: 10px;
    font-size: 16px;
    color: #23b8ff
}

.mod-comments-info__button i {
    font-size: 18px;
    vertical-align: 0
}

.mod-comments-info__button.disabled {
    color: #bbb
}

.mod-comments-classify {
    display: -webkit-box;
    padding: 0 10px
}

.mod-comments-classify__item {
    -webkit-box-flex: 1;
    width: 0;
    line-height: 22px;
    margin: 4px;
    text-align: center;
    color: #23B8FF;
    border: 1px solid #23B8FF;
    border-radius: 2px;
    font-size: 13px
}

.mod-comments-classify__item.z-in-active {
    color: #fff;
    background-color: #23B8FF
}

.mod-comments-classify__item.mod-comments-classify__bad {
    border: 1px solid #979797;
    color: #979797
}

.mod-comments-classify__item.mod-comments-classify__bad.z-in-active {
    color: #fff;
    background-color: #979797
}

.mod-comments-list__list {
    margin-top: 18px;
    min-height: 30px
}

.mod-comments-list__list .star-list__wrap {
    padding-top: 12px
}

.mod-comments-list__list .star-list__wrap i {
    font-size: 16px;
    vertical-align: 1px
}

.mod-comments-list__list .font-bold {
    display: inline-block;
    font-size: 15px;
    font-weight: 600
}

.mod-comments-list__wrap {
    margin: 0 15px
}

.mod-comments-list__wrap .mod-comments-list__empty {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 300px;
    text-align: center;
    background: #fff
}

.clear {
    clear: both
}

.refreshing-tip {
    display: none
}

body .full-screen-tip {
    top: 155px;
    background: #fff
}

.load-more-btn {
    font-size: 14px;
    color: #999
}

.page-loading {
    z-index: 1
}

.qq-level-sun {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(//9.url.cn/edu/mobilev2/pages/comment/img/qq-level-sun.32c28b2.png);
    background-size: cover
}

@media only screen and (max-width:320px) {
    .mod-comments-classify__item {
        font-size: 12px;
        letter-spacing: -1px
    }
}

.container .section.section-basic-info {
    background: #efeff4
}

.container .section.section-basic-info .preview-container {
    display: none;
    margin-bottom: 10px;
    min-height: 200px
}

.layer.layer--timetable {
    z-index: 10001;
    margin-top: -150px;
    border-radius: 5px;
    background-color: #fff
}

.border-line {
    display: block;
    position: absolute;
    right: 0;
    bottom: 246px;
    left: 0;
    height: 1px;
    background-color: #e1e1e1
}

.timetable-title {
    padding: 10px 40px
}

.timetable-title .timetable-title-cnt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    text-overflow: ellipsis;
    word-break: break-word;
    color: #333;
    -webkit-line-clamp: 3
}

.basic-info-list__item {
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    background: #fff
}

.basic-info-list__item.z-last {
    margin-bottom: 0
}

.basic-info-list__item-title {
    padding: 15px;
    font-size: 18px;
    line-height: 25px;
    color: #000
}

.basic-info-list__item-title-static {
    padding-left: 4px;
    font-size: 16px;
    color: #777
}

.title-bar__label {
    width: 100%;
    padding: 15px 0 0;
    position: relative
}

.title-bar__label-inner {
    font-size: 0;
    overflow: hidden;
    margin-right: 30px;
    height: 20px;
    max-height: 96px
}

.title-bar__label-inner .label-item {
    font-size: 12px;
    color: #999;
    background: #eee;
    padding: 3px 4px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 2px;
    margin-bottom: 5px;
    line-height: 14px
}

.title-bar__label .icon-more-label {
    font-size: 20px;
    position: absolute;
    top: 14px;
    right: 22px;
    transition: transform linear .1s;
    display: none;
    color: #999;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center
}

.unfold .title-bar__label-inner {
    height: auto
}

.unfold .icon-more-label {
    transform: rotateX(180deg)
}

.only-pkg-tips {
    padding-left: 15px;
    margin-bottom: 10px
}

.basic-info-list__item .i-v-right {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -11px;
    margin-right: -12px;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 25px;
    color: #999
}

.basic-info-list__item .basic-info-list__chapter-title,
.basic-info-list__item .basic-info-list__sub-title {
    overflow: hidden;
    padding-left: 16px;
    font-size: 12px;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #666
}

.basic-info-list__item .basic-info-list__check-all {
    float: right;
    padding-right: 18px;
    font-size: 14px;
    font-style: normal;
    line-height: 28px;
    color: #999
}

.mod-comments-list__list {
    margin: 0 15px;
    min-height: 0
}

.mod-detail-info {
    padding: 0 15px;
    background: #fff
}

.mod-detail-info.z-has-video .mod-di-title .mod-di-title-tip {
    display: inline
}

.mod-detail-info.z-has-video .mod-di-title .icon-font {
    display: block
}

.mod-detail-info.z-has-video .mod-di-content,
.mod-detail-info.z-has-video .mod-di-content__more {
    display: none
}

.mod-di-title {
    position: relative;
    padding: 15px 0 10px;
    font-size: 18px;
    line-height: 25px;
    color: #000
}

.mod-di-title .mod-di-title-tip {
    display: none;
    float: right;
    padding-right: 18px;
    font-size: 14px;
    font-style: normal;
    line-height: 22px;
    color: #999
}

.mod-di-title .icon-font {
    display: none;
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -11px;
    margin-right: -12px;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 25px;
    color: #999
}

.mod-di-content {
    overflow: hidden;
    padding-bottom: 12px;
    max-height: 1500px;
    font-size: 14px;
    line-height: 25px;
    word-break: break-word;
    color: #777
}

.mod-di-content img {
    display: inline-block;
    min-width: 1px;
    max-width: 100%;
    line-height: 1;
    vertical-align: top
}

.mod-di-content table {
    width: 100%
}

.mod-di-content.z-more {
    overflow-y: auto;
    height: auto;
    max-height: none
}

.mod-detail-info .mod-di-content__more {
    height: 50px
}

.mod-detail-info .mod-di-content__more.z-more .i-v-bottom {
    display: none
}

.mod-detail-info .mod-di-content__more.z-more .i-v-top {
    display: inline-block
}

.basic-info-list__item--teachers {
    padding-bottom: 15px
}

.basic-info-list__item--teachers .basic-info-list__item-title {
    padding-bottom: 0
}

.basic-info-list__teachers-list,
.basic-info-list__teachers-list-more {
    padding: 0 15px
}

.basic-info-list__teachers-list-item {
    position: relative;
    margin-top: 10px;
    /* height: 205px */
}

.basic-info-list__teachers-list-item:active {
    background-color: #efeff4
}

.basic-info-list__teachers-list-item:active .basic-info-list__teachers-list-top {
    background-color: #efeff4
}

.basic-info-list__teachers-list-item-link {
    display: block;
    position: relative;
    /* height: 100% */
}

.basic-info-list__teachers-list-mod {
    /* position: absolute; */
    margin-top: 50px;
    border: 1px solid #ddd;
    width: 100%;
    /* height: 170px */
}

.basic-info-list__teachers-list-top {
    overflow: hidden;
    position: absolute;
    top: -30px;
    right: 50%;
    padding: 0 10px 0 90px;
    height: 60px;
    background: #fff;
    -webkit-transform: translateX(50%);
    transform: translateX(50%)
}

.basic-info-list__teachers-list-item-img {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 10px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    width: 60px;
    height: 60px
}

.basic-info-list__teachers-list-item-img img {
    width: 100%;
    height: 100%
}

.basic-info-list__teachers-list-item-name {
    overflow: hidden;
    padding-top: 7px;
    width: 180px;
    font-size: 18px;
    line-height: 22px;
    /* white-space: nowrap; */
	max-height: 44px;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #333
}

.basic-info-list__teachers-list-item-static {
    padding-top: 7px;
    font-size: 14px;
    line-height: 14px;
    color: #777
}

.basic-info-list__teachers-list-item-info {
    /* display: -webkit-box; */
    /* overflow: hidden; */
    /* -webkit-box-orient: vertical; */
    padding: 42px 24px 20px;
    /* height: 66px; */
    font-size: 14px;
    /* line-height: 22px; */
    white-space: pre-wrap;
    text-overflow: ellipsis;
    word-break: break-word;
    color: #666;
    -webkit-line-clamp: 3
}

.mod-di-content__more,
.basic-info-list__teachers-more {
    text-align: center;
    color: #777
}

.mod-di-content__more i,
.basic-info-list__teachers-more i {
    font-size: 20px;
    line-height: 50px
}

.mod-di-content__more .i-v-top,
.basic-info-list__teachers-more .i-v-top {
    display: none
}

.basic-info-list__teachers-list-more {
    display: none
}

.basic-info-list__container {
    margin-top: 16px
}

.mod-di-content__container {
    padding-top: 16px
}

.basic-info-list__read-more {
    font-size: 14px;
    color: #009eef;
    margin-bottom: 0
}

.z-teachers-more .basic-info-list__teachers-list-more {
    display: block
}

.z-teachers-more .basic-info-list__teachers-more .i-v-bottom {
    display: none
}

.z-teachers-more .basic-info-list__teachers-more .i-v-top {
    display: inline-block
}

.basic-info-list__agency-hd {
    padding: 0 15px;
    height: 70px;
    display: block
}

.basic-info-list__agency-img {
    float: left;
    width: 70px;
    height: 70px
}

.basic-info-list__agency-hd-right {
    overflow: hidden;
    margin-left: 85px;
    padding-top: 4px;
    height: 22px
}

.basic-info-list__agency-name {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    height: 21px;
    font-size: 16px;
    line-height: 21px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-word;
    color: #23b8ff
}

.basic-info-list__agency-identification {
    display: inline-block;
    width: 57px;
    height: 21px;
    vertical-align: top
}

.basic-info-list__agency-comment-list {
    overflow: hidden;
    margin-left: 85px;
    padding-top: 8px
}

.basic-info-list__agency-comment-list-item {
    float: left;
    position: relative;
    padding: 0 14px;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #777
}

.basic-info-list__agency-comment-list-item:first-child {
    padding-left: 0
}

.basic-info-list__agency-comment-list-item:first-child:after {
    border-left: 0
}

.basic-info-list__agency-comment-list-item:last-child {
    padding-right: 0
}

.basic-info-list__agency-comment-list-item:after {
    position: absolute;
    top: 5px;
    left: 0;
    border-left: 1px solid #ececec;
    width: 1px;
    height: 20px;
    content: ''
}

.basic-info-list__agency-info {
    padding: 15px;
    font-size: 14px;
    line-height: 25px;
    white-space: pre-wrap;
    word-break: break-word
}

.mod-di-content__owner {
    margin-top: 12px;
    font-size: 12px;
    line-height: 22px;
    color: #bbb
}

.basic-info-list__agency-comment-list-item-hd {
    display: block;
    padding-top: 3px
}

.basic-info-list__item--package .basic-info-list__item-title {
    padding-bottom: 5px
}

.title-bar__punishment {
    display: none;
    position: relative;
    border-top: 1px solid #c8c7cc;
    padding-left: 15px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: #e80808
}

.title-bar__punishment .icon-alert {
    display: inline-block;
    border: 1px solid #e80808;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    vertical-align: middle
}

.title-bar__punishment-word {
    vertical-align: middle
}

.container .section.section-rel-class-list {
    background: #efeff4
}

.rel-class {
    min-height: 300px;
    color: #000
}

.vip-course,
.vip-course-new,
.teacher-recom,
.agency-hot {
    display: none;
    margin-bottom: 10px;
    background: #fff
}

.agency-hot {
    margin-bottom: 0
}

.rel-class__title {
    padding: 15px 15px 0;
    font-size: 18px;
    line-height: 25px;
    color: #000
}

.course {
    position: relative;
    padding: 15px 15px 15px 166px;
    height: 80px;
    line-height: 20px;
    background: #fff
}

.course.z-active {
    background-color: #e5e5e5
}

.course.single-line {
    padding-top: 18px;
    padding-bottom: 18px;
    height: 64px
}

.course .z-search-word {
    font-style: normal;
    color: red
}

.course:active {
    background-color: #e5e5e5
}

.course__cover {
    overflow: hidden;
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 4px;
    width: 140px;
    height: 80px;
    background: url(//9.url.cn/edu/mobilev2/img/default-img.3d1dd24.png) #fff no-repeat top left;
    background-size: 140px 80px
}

.course__cover .course__cover--tag-round,
.course__cover .course__cover--tag-triangle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding-left: 6px;
    font-size: 10px;
    line-height: 20px;
    color: #fff
}

.course__cover .course__cover--tag-round:before,
.course__cover .course__cover--tag-triangle:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: ""
}

.course__cover .course__cover--tag-round {
    width: 64px;
    height: 20px
}

.course__cover .course__cover--tag-round:before {
    border-bottom-right-radius: 20px;
    width: 64px;
    height: 20px;
    background: #e80808
}

.course__cover .course__cover--tag-triangle {
    width: 30px;
    height: 36px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.course__cover .course__cover--tag-triangle:before {
    border: 18px solid #e80808;
    border-right-color: transparent;
    border-bottom-color: transparent;
    width: 0;
    height: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.course__cover .course__cover--tag-triangle.z-free:before {
    border-color: #5fb41b;
    border-right-color: transparent;
    border-bottom-color: transparent
}

.course__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    max-height: 40px;
    font-size: 16px;
    line-height: 20px;
    white-space: inherit;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2
}

.course__agency {
    overflow: hidden;
    margin-top: 6px;
    max-height: 16px;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #bbb
}

.course__info {
    overflow: hidden;
    margin: 1px 0;
    max-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all
}

.u-price {
    font-size: 16px;
    color: #e85308
}

.u-price.z-free {
    color: #5fb41b
}

.u-message {
    display: inline-block;
    margin-right: 20px;
    height: 12px;
    font-size: 12px;
    line-height: 12px;
    color: #bbb
}

.u-message .icon-font {
    margin-right: 5px;
    font-size: 16px;
    line-height: 16px;
    vertical-align: inherit;
    color: #bbb
}

.u-message em {
    font-style: normal
}

.course__cover--tag-active {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 5px;
    padding: 0 5px;
    width: 40px;
    height: 17px;
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: 50px 17px
}

.course__cover-tips {
    position: absolute;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    color: #fff;
    background-color: rgba(0, 0, 0, .7)
}

.course__cover-tips--audition {
    top: 0;
    right: 0;
    left: auto;
    width: 40px;
    font-size: 12px;
    text-align: center
}

.course__cover-tips--status {
    bottom: 0;
    left: 0;
    width: 100%;
    text-indent: 4px
}

.course__cover-tips--live {
    right: 0;
    bottom: 0;
    width: 36px;
    text-align: center;
    background-color: rgba(232, 83, 8, .9)
}

.vip-course__list .course {
    float: left;
    overflow: hidden;
    padding: 0;
    width: 50%;
    height: auto
}

.vip-course__list .course.z-not-free .z-active i {
    color: #e80808
}

.vip-course__list .course-wrap {
    padding: 10px 10px 20px 15px
}

.vip-course__list .course__cover {
    position: relative;
    top: 0;
    left: 0;
    border-radius: 0;
    padding-top: 56%;
    width: 100%;
    height: 0;
    background-size: 100% 100%
}

.vip-course__list .course__name {
    padding-top: 7px
}

.vip-course__list .course__type-list {
    padding-top: 4px;
    padding-right: 10px;
    text-align: center
}

.vip-course__list .course__type-item {
    display: block;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
    max-width: 100%;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #999
}

.vip-course__list .course__type-item i {
    padding-right: 6px;
    color: rgba(255, 255, 255, 0)
}

.vip-course__list .course__type-item.z-active {
    color: #000
}

.vip-course__list .course__type-item.z-active i {
    display: inline-block;
    color: #5fb41b
}

.vip-course__list-new .course__type-list {
    padding: 0 15px 10px
}

.vip-course__list-new .course__type-item {
    display: inline-block;
    font-size: 14px;
    color: #333;
    line-height: 30px;
    margin-right: 3px
}

.vip-course__list-new .i-right {
    color: #23B8FF;
    margin-right: 2px
}

.dialog-bg {
    position: fixed;
    top: -100%;
    right: 0;
    bottom: -100%;
    left: 0;
    z-index: 1001;
    width: 100%;
    background: rgba(0, 0, 0, .4)
}

.dialog-outer {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 1005;
    margin-left: -135px;
    border-radius: 5px;
    padding-top: 18px;
    width: 270px;
    background: #fff
}

.dialog-outer.position-top {
    top: 10px
}

.dialog-close {
    display: block;
    width: 24px;
    height: 24px;
    background: url(//9.url.cn/edu/mobilev2/modules/dialog/img/icon-close-normal@2x.058c218.png) no-repeat;
    background-size: 24px auto
}

.dialog-close-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 105;
    border: 0;
    width: 70px;
    height: 52px;
    background: transparent;
    -webkit-appearance: none
}

.dialog-close-button .dialog-close {
    position: absolute;
    top: 6px;
    right: 6px;
    margin: auto
}

.dialog-close-button.active .dialog-close {
    background-image: url(//9.url.cn/edu/mobilev2/modules/dialog/img/icon-close-pressed@2x.0226c0b.png)
}

.dialog-close-button:focus {
    outline: 0
}

.dialog-userInfo {
    position: relative;
    padding-left: 60px;
    height: 42px;
    text-align: left
}

.dialog-userInfo .dialog-userPic {
    position: absolute;
    top: 0;
    left: 10px;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    background-size: 100% 100%
}

.dialog-userInfo .dialog-userName {
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000
}

.dialog-userInfo .dialog-payTip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.dialog-userInfo .dialog-userDesc {
    overflow: hidden;
    position: relative;
    top: 50%;
    left: 0;
    padding-right: 10px;
    font-size: 11px;
    color: #777;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.dialog-userPic:after {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 30PX;
    height: 23px;
    background-size: 100% 100%;
    content: ""
}

.dialog-userPic.z-weixin:after {
    background-image: url(//9.url.cn/edu/mobilev2/modules/dialog/img/usertype_wx.5d65373.png)
}

.dialog-userPic.z-qq:after {
    background-image: url(//9.url.cn/edu/mobilev2/modules/dialog/img/usertype_qq.b2b6179.png)
}

.dialog-title {
    position: relative;
    font-weight: 700;
    padding: 0 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    text-align: center
}

.dialog-title i.succ,
.dialog-title i.warn {
    display: inline-block;
    position: relative;
    top: 5px;
    margin-right: 5px;
    width: 22px;
    height: 22px;
    background: url(//9.url.cn/edu/mobilev2/modules/dialog/img/icon-succ-normal@2x.1f68a33.png) no-repeat center;
    background-size: 22px 22px
}

.dialog-title i.warn {
    background-image: url(//9.url.cn/edu/mobilev2/modules/dialog/img/common-tips-icon-caution@2x.a150c3e.png)
}

.dialog-title.dialog-title-small {
    padding: 0;
    height: 30px;
    font-size: 11px;
    line-height: 30px;
    color: #777
}

.dialog-content {
    margin: 16px 0;
    padding: 0 16px;
    min-height: 45px;
    font-size: 14px;
    line-height: 22px;
    word-break: break-all
}

.dialog-btn-group {
    position: relative;
    z-index: 110
}

.dialog-btn-group button {
    float: left;
    z-index: 120;
    border: 0;
    width: 135px;
    height: 44px;
    font-size: 17px;
    line-height: 44px;
    text-align: center;
    color: #23b8ff;
    background: transparent
}

.dialog-btn-group button span {
    width: 135px
}

.dialog-btn-group button:focus {
    outline: 0
}

.dialog-btn-group button.active {
    background: #e2e2e2
}

.dialog-btn-group .dialog-btn-wapper:after {
    display: inline-block;
    position: absolute;
    top: -50%;
    width: 1px;
    height: 200%;
    background-color: #e1e1e1;
    -webkit-transform: scale(0.5);
    content: ""
}

.dialog-btn-group .dialog-btn-wapper:first-child button {
    border-bottom-left-radius: 5px
}

.dialog-btn-group .dialog-btn-wapper:last-child button {
    border-bottom-right-radius: 5px
}

.dialog-btn-group .dialog-btn-wapper:last-child:after {
    display: none
}

.dialog-btn-group.single button {
    width: 100%
}

.layer-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 200
}

.layer {
    width: 90%;
    position: fixed;
    top: 40%;
    left: 50%;
    margin-left: -45%;
    z-index: 205
}

a.package {
    position: relative;
    display: block;
    color: #000;
    margin: 0 10px;
    padding: 15px 0 15px 150px;
    height: 80px;
    line-height: 20px;
    background: #fff
}

a.package .package__cover-wrap {
    position: absolute;
    top: 15px;
    left: 0;
    width: 140px;
    height: 80px
}

a.package .package__cover-wrap .package__cover {
    background: url(//9.url.cn/edu/mobilev2/img/default-img.3d1dd24.png) #fff no-repeat top left;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 4px;
    width: 140px;
    height: 80px;
    background-size: 140px 80px
}

a.package .package__cover-wrap .package__cover .package__cover-tips {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    text-indent: 4px;
    color: #fff;
    background-color: rgba(0, 0, 0, .7)
}

a.package .package__content {
    font-size: 16px
}

a.package .package__content .package__name {
    display: -webkit-box;
    overflow: hidden;
    overflow: hidden;
    -webkit-box-orient: vertical;
    padding-top: 10px;
    height: auto;
    max-height: 20px;
    line-height: 20px;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 1
}

a.package .package__content .package__name .z-search-word {
    font-style: normal;
    color: red
}

a.package .package__content .package__info {
    padding-top: 22px;
    color: #e85308
}

a.package .package__content .package__info .u-price.z-free {
    color: #5fb41b
}

a.package .package__content .package__info .package__course-num {
    display: inline-block;
    float: right;
    position: absolute;
    right: 6px;
    padding: 3px 6px;
    min-width: 44px;
    font-size: 14px;
    line-height: 14px;
    z-index: 0
}

a.package .package__content .package__info .package__course-num .package__course-num-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 1px solid;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-align: center;
    background: #fff
}

a.package .package__content .package__info .package__course-num .package__course-num-2 {
    position: absolute;
    top: -2px;
    left: 2px;
    z-index: 0;
    border: 1px solid;
    border-radius: 2px;
    width: 100%;
    height: 100%
}

@media screen and (max-width:320px) {
    a.package {
        padding: 10px 0 10px 130px;
        height: 70px
    }

    a.package .package__cover-wrap {
        top: 10px;
        width: 120px;
        height: 70px
    }

    a.package .package__cover-wrap .package__cover {
        width: 120px;
        height: 70px
    }

    a.package .package__content .package__name {
        padding-top: 6px;
        max-height: 18px;
        font-size: 14px;
        line-height: 18px
    }

    a.package .package__content .package__info {
        padding-top: 18px
    }

    a.package .package__content .package__info .u-price {
        font-size: 14px
    }
}

a.course {
    position: relative;
    display: block;
    color: #000;
    line-height: 20px;
    margin: 0 10px;
    padding: 15px 0 15px 150px;
    height: 80px;
    background: #fff
}

a.course.z-active {
    background-color: #e5e5e5
}

a.course.single-line {
    padding-top: 18px;
    padding-bottom: 18px;
    height: 64px
}

a.course .z-search-word {
    font-style: normal;
    color: red
}

a.course:after {
    right: -10px
}

a.course .course__cover-wrap {
    position: absolute;
    top: 15px;
    left: 0;
    width: 140px;
    height: 80px
}

a.course .course__cover-wrap .course__cover {
    background: url(//9.url.cn/edu/mobilev2/img/default-img.3d1dd24.png) #fff no-repeat top left;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 4px;
    width: 140px;
    height: 80px;
    background-size: 140px 80px;
    border-radius: 0
}

a.course .course__cover-wrap .course__cover .course__cover-audition {
    display: block;
    position: absolute;
    top: 11px;
    left: -20px;
    z-index: 1;
    width: 74px;
    height: 14px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background-color: #5fb41b;
    -webkit-transform: rotate(-45deg)
}

a.course .course__cover-wrap .course__cover .course__cover--tag-round,
a.course .course__cover-wrap .course__cover .course__cover--tag-triangle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding-left: 3px;
    font-size: 10px;
    line-height: 20px;
    color: #fff
}

a.course .course__cover-wrap .course__cover .course__cover--tag-round:before,
a.course .course__cover-wrap .course__cover .course__cover--tag-triangle:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: ''
}

a.course .course__cover-wrap .course__cover .course__cover--tag-round {
    width: 64px;
    height: 20px
}

a.course .course__cover-wrap .course__cover .course__cover--tag-round:before {
    border-bottom-right-radius: 20px;
    width: 64px;
    height: 20px;
    background: #ff7200
}

a.course .course__cover-wrap .course__cover .course__cover--tag-triangle {
    width: 30px;
    height: 30px
}

a.course .course__cover-wrap .course__cover .course__cover--tag-triangle:before {
    border: 15px solid #ff7200;
    border-right-color: transparent;
    border-bottom-color: transparent;
    width: 0;
    height: 0
}

a.course .course__cover-wrap .course__cover .course__cover--tag-active {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 5px;
    padding: 0 5px;
    width: 40px;
    height: 17px;
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: 50px 17px
}

a.course .course__cover-wrap .course__cover .course__cover--patag-active {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 26px;
    background-repeat: no-repeat;
    background-size: cover
}

a.course .course__cover-wrap .course__cover .course__cover-tips {
    position: absolute;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    background-color: rgba(0, 0, 0, .7)
}

a.course .course__cover-wrap .course__cover .course__cover-tips--live {
    left: 0;
    bottom: 0;
    text-indent: 4px;
    padding-right: 4px;
    background-color: rgba(232, 83, 8, .9);
    right: auto;
    width: auto
}

a.course .course__cover-wrap .course__cover .course__cover-tips--audition {
    top: 0;
    right: 0;
    left: auto;
    width: 40px;
    font-size: 12px;
    text-align: center
}

a.course .course__cover-wrap .course__cover .course__cover-tips--status {
    bottom: 0;
    left: 0;
    width: 100%;
    text-indent: 4px
}

a.course .course__cover-wrap .course__cover .course__cover-sale-tips {
    position: absolute;
    right: 0;
    top: 0;
    background: #ff4343;
    line-height: 20px;
    color: #fff;
    font-size: 12px
}

a.course .course__cover-wrap .course__cover .course__cover-sale-tips::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 10px solid rgba(255, 67, 67, .8);
    border-bottom: 10px solid rgba(255, 67, 67, .8);
    border-right: 8px solid #ff4343;
    position: absolute;
    top: 0;
    left: -16px
}

a.course .course__cover-wrap .course__cover .course__cover-sale-tips::after {
    content: attr(title);
    -webkit-transform: scale(0.8);
    padding-right: 3px
}

a.course .course__content {
    position: relative;
    top: auto;
    bottom: auto;
    margin-top: -2px;
    height: 82px;
    left: 0;
    width: 100%;
    transform: none
}

a.course .course__content .course__name {
    line-height: 20px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word
}

a.course .course__content .course__name .i-map {
    position: relative;
    top: -4px;
    margin-right: 3px;
    font-size: 14px;
    color: #29b1cc
}

a.course .course__content .course__info {
    line-height: 16px;
    margin-top: 6px;
    width: 100%;
    height: 16px;
    overflow: hidden;
    max-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all
}

a.course .course__content .course__info.z-last {
    position: absolute;
    bottom: 0
}

a.course .course__content .u-message,
a.course .course__content .u-comment {
    display: inline-block;
    margin: 0 12px 0 0;
    height: 16px;
    line-height: 16px;
    color: #777;
    font-size: 12px
}

a.course .course__content .u-message .icon-font,
a.course .course__content .u-comment .icon-font {
    margin-right: 5px;
    font-size: 16px;
    line-height: 16px;
    vertical-align: inherit;
    color: #bbb
}

a.course .course__content .u-message em,
a.course .course__content .u-comment em {
    font-style: normal
}

a.course .course__content .u-message i,
a.course .course__content .u-comment i {
    margin-right: 4px;
    color: #777
}

a.course .course__content .u-comment {
    margin-right: 2px
}

a.course .course__content .course__t-list {
    margin-top: 4px;
    height: 16px;
    font-size: 0;
    line-height: 16px
}

a.course .course__content .course__t-list .course__t-list-item {
    padding: 1px 2px 0;
    width: auto;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #73b3e7;
    height: 14px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #73b3e7
}

a.course .course__content .course__t-list .course__t-list-item:last-child {
    margin-right: 0
}

a.course .course__content .u-price {
    margin-top: 9px;
    margin-right: 10px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #e85308
}

a.course .course__content .u-price.z-free {
    color: #5fb41b
}

a.course .course__content .u-price-orignal {
    font-size: 14px;
    text-decoration: line-through;
    color: #777
}

@media screen and (max-width:320px) {
    a.course {
        padding: 10px 0 10px 130px;
        height: 70px
    }

    a.course .course__cover-wrap {
        top: 10px;
        width: 120px;
        height: 70px
    }

    a.course .course__cover-wrap .course__cover {
        bottom: auto;
        width: 120px;
        height: 70px
    }

    a.course .course__content {
        height: 72px
    }

    a.course .course__content .course__name {
        font-size: 14px;
        line-height: 18px
    }

    a.course .course__content .course__info {
        height: 15px
    }

    a.course .course__content .u-message em,
    a.course .course__content .u-comment em {
        font-size: 10px
    }

    a.course .course__content .u-message i,
    a.course .course__content .u-comment i {
        margin-right: 3px;
        font-size: 14px
    }

    a.course .course__content .u-message {
        margin-right: 9px
    }

    a.course .course__content .u-comment {
        margin-right: 0
    }

    a.course .course__content .course__t-list {
        margin-top: 4px;
        height: 13px;
        font-size: 10px;
        line-height: 13px
    }

    a.course .course__content .course__t-list .course__t-list-item {
        height: 11px;
        font-size: 10px;
        line-height: 11px
    }

    a.course .course__content .u-price {
        margin-right: 6px;
        font-size: 14px;
        line-height: 15px
    }
}

.load-more-btn {
    display: block;
    background-color: #fff;
    text-align: center;
    margin: 0;
    padding: 8px 0;
    font-size: 16px;
    width: 100%;
    border: 0
}

.load-more-btn.loading:before {
    width: 16px;
    height: 16px;
    content: "";
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 2px
}

.refreshing-tip {
    max-height: 40px;
    text-align: center;
    padding: 8px 0;
    line-height: 20px;
    color: gray;
    background: #F0F0F0;
    font-size: 12px;
    overflow: hidden;
    -webkit-transition: all .4s ease
}

.full-screen-tip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 14px;
    display: none
}

.full-screen-tip p {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    text-align: center;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #c8c8c8;
    word-break: break-all
}

.full-screen-tip--loading p {
    margin-top: -100px;
    padding-top: 75px;
    background: url(//9.url.cn/edu/mobilev2/modules/full-screen-tip/img/loading-animate@2x.8abbdd8.gif) no-repeat center top;
    background-size: 72px 72px
}

.full-screen-tip--loading2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3)
}

.full-screen-tip--loading2 p {
    margin-top: -16px;
    padding-top: 75px;
    background: url(//9.url.cn/edu/mobilev2/modules/full-screen-tip/img/loading.50c5e3e.gif) no-repeat center top;
    background-size: 16px 16px
}

.full-screen-tip--empty p {
    margin-top: -100px;
    padding-top: 125px;
    background: url(//9.url.cn/edu/mobilev2/modules/full-screen-tip/img/result-empty@2x.1f18ac0.png) no-repeat center top;
    background-size: 125px 125px
}

.full-screen-tip--retry p {
    line-height: 30px;
    margin-top: -100px;
    padding-top: 70px;
    background: url(//9.url.cn/edu/mobilev2/modules/full-screen-tip/img/icon-big-warning@2x.7174350.png) no-repeat center top;
    background-size: 70px 70px
}

.tip {
    width: 96%;
    height: 40px;
    margin: 0 2%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: -44px;
    text-align: center;
    overflow: hidden;
    z-index: 1000;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -webkit-transition: top .2s ease-out;
    font-size: .875em;
    line-height: 40px
}

.tip .tip-bg {
    background: #000;
    opacity: .8;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
}

.tip span {
    color: #fff;
    z-index: 1
}

.tip.show {
    top: 0;
    -webkit-transition: top .2s ease-out
}

.tip.blue-tip .icon-font.empty {
    color: #23b8ff
}

.tip .icon-font {
    margin-right: 3px;
    font-size: 16px;
    line-height: 40px;
    vertical-align: inherit;
    color: #65d521
}

.tip .i-alert {
    color: #e85308
}

.tip.black-tip {
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: left
}

.tip.black-tip .tip-bg {
    padding: 0 12px;
    opacity: .7
}

.tip.black-tip .icon-font {
    margin-right: 6px;
    font-size: 20px;
    line-height: 44px;
    color: #fff
}

.tip.black-tip .icon-font.empty {
    color: #fe6c6c
}

.tip.black-tip span {
    font-size: 16px
}

.m-header__nav ul {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    border-radius: 4px;
    padding: 5px 16px;
    width: 140px;
    text-align: left;
    color: #000;
    background-color: #fff
}

.m-header__nav ul li {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.m-header__nav ul li i {
    margin-right: 10px;
    font-size: 22px
}

.m-header__nav ul:before {
    display: block;
    position: absolute;
    top: -8px;
    right: 10px;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
    border-left: 6px solid transparent;
    width: 0;
    height: 0;
    content: ""
}

.m-header__nav.z-spread ul {
    display: block
}

.m-header__nav:before {
    display: none;
    position: absolute;
    top: -2px;
    right: -4px;
    border-radius: 9px;
    width: 9px;
    height: 9px;
    background-color: #ff3b30;
    content: ""
}

.m-header__nav.z-noread:before {
    display: block
}

.m-header__nav:after {
    position: absolute;
    top: -5px;
    right: -9px;
    bottom: -3px;
    left: -6px;
    content: ""
}

.m-header__nav-item {
    display: inline-block;
    margin-left: 9px
}

.m-header__nav-link {
    display: inline-block;
    padding: 0 8px;
    height: 45px
}

.m-header__nav-link .icon-font {
    font-size: 28px;
    color: #777
}

.m-header__nav-link span {
    position: relative;
    top: 1px;
    font-size: 16px;
    line-height: 45px
}

.m-header__nav-link:before {
    display: none;
    position: absolute;
    top: 0;
    right: -16px;
    bottom: 0;
    left: -16px;
    background-color: #eee;
    content: ""
}

.m-header__nav-link.z-active:before {
    display: block
}

.m-header__nav-link .i-red-point {
    display: none;
    position: relative;
    top: -1px;
    margin-right: 0;
    margin-left: 7px
}

.m-header__nav-link.z-noread .i-red-point {
    display: inline-block
}

.m-header.z-hide-bbs .m-header__nav-link[data-jump=bbs] {
    display: none
}

.u-search__reset {
    border-radius: 8px;
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #8e8e93
}

.u-button {
    display: inline-block;
    border-radius: 3px;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: #23b8ff;
    background: #fff
}

.u-button:after {
    border: 1px solid #0079ff;
    border-radius: 6px
}

.u-button.z-active {
    color: #fff;
    background: #0079ff
}

.u-button[disabled] {
    color: #a6a6a6;
    background: #fff;
    opacity: .6;
    pointer-events: none
}

.u-search__btn {
    display: none;
    float: right;
    position: relative;
    margin: 7px 5px 4px 8px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 2px
}

.u-search__btn:before {
    display: block;
    position: absolute;
    top: -9px;
    left: -10px;
    width: 75px;
    height: 48px;
    content: ""
}

.i-red-point {
    display: inline-block;
    border-radius: 9px;
    width: 9px;
    height: 9px;
    background-color: #ff3b30
}

#global .m-header__mask {
    z-index: 10006
}

.mask {
    position: fixed;
    top: -100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background: rgba(0, 0, 0, .4);
    z-index: 20000
}

.pull-to-refresh {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    visibility: hidden
}

.pull-to-refresh .icon-refresh {
    position: absolute;
    width: 15px;
    height: 18px;
    background: url() no-repeat;
    background-size: 100%
}

.pull-to-refresh .spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    background: url() no-repeat;
    background-size: 100%;
    display: none
}

.pull-to-refresh-canvas {
    width: 90px;
    height: 180px;
    display: inline
}

.app-load {
    display: none;
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 0;
    font-size: 15px;
    background: #fff1f1;
    align-items: center
}

.app-load .app-load__left {
    position: relative;
    display: flex;
    flex: 1;
    width: 1%;
    padding-left: 14px;
    padding-right: 10px;
    height: 100%;
    align-items: center
}

.app-load .app-load__left .app-load-red-envelop {
    display: none;
    width: 28px;
    height: 36px;
    margin-right: 10px
}

.app-load .app-load__left .app-load-tip {
    flex: 1;
    width: 1%
}

.app-load .app-load__left .app-load-tip h2 {
    position: relative;
    width: 100%;
    height: 16px;
    color: #000;
    font-size: 15px;
    line-height: 16px;
    overflow: hidden
}

.app-load .app-load__left .app-load-tip p {
    margin-top: 3px;
    height: 12px;
    font-size: 11px;
    line-height: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #999;
    overflow: hidden
}

.app-load .app-load__right {
    height: 30px
}

.app-load .app-load__right li {
    float: right;
    position: relative;
    height: 100%
}

.app-load .app-load__right li a {
    display: none;
    overflow: hidden;
    position: relative;
    margin-right: 14px;
    border: 1px solid #23baff;
    border-radius: 3px;
    width: 68px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background-color: #23baff;
    color: #fff;
    white-space: nowrap
}

.app-load .app-load__right li a[data-jump=download-app] {
    color: #23baff;
    background-color: #fff
}

.app-load .app-load__right li a[data-jump=download-app] .js-downing {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #23baff;
    background-color: #fff;
    z-index: 1;
    content: '下载'
}

.app-load .app-load__right li a[data-jump=download-app] .js-downing.z-active {
    color: #f7f7f8;
    background-color: #23baff
}

.app-load .app-load__right li a[data-jump=download-app] .js-downing.download {
    background-image: none;
    -webkit-text-fill-color: #23b8ff
}

.app-load .app-load__right li a[data-jump=download-app] .js-downing.open {
    color: #fff;
    background-color: #23b8ff;
    background-image: #23b8ff;
    -webkit-text-fill-color: #fff
}

.app-load .app-load__right li a[data-jump=download-app] .js-downing.downloading {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.app-load .app-load__right li a[data-jump=download-app] i {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #23baff;
    z-index: 0
}

.app-load .app-load__right li a[data-jump=download-app].z-active {
    color: #23baff;
    background-color: #fff
}

.app-load .app-load__right li a[data-jump=download-app].open {
    background-color: #23b8ff
}

.app-load .app-load__right li a[data-jump=open-app].z-active {
    color: #fff;
    background-color: #23baff
}

.app-load .app-load__right li:nth-child(2) a {
    display: block
}

.all .app-load__right li a {
    display: block
}

.app-load__left.first-down .app-load-red-envelop {
    display: block
}

.app-load__left.first-down .app-load-tip {
    position: relative
}

.down .app-load__right li:nth-child(1) a {
    display: none
}

.down .app-load__right li:nth-child(2) a {
    display: block
}

.open .app-load__right li:nth-child(1) a {
    display: block
}

.open .app-load__right li:nth-child(2) a {
    display: none
}

.multiwords-width .app-load__right li a {
    width: 96px
}

.courseList .app-load {
    border-top: 0
}

.isuin .app-load {
    display: flex;
    height: 50px
}

.isuin .m-header {
    position: relative
}

.isuin .m-header2 {
    position: relative
}

.animation .app-load {
    -webkit-transition: height .2s ease
}

.animation .isuin .wrapper,
.animation .isuin .wrap {
    -webkit-transition: top .2s ease
}

.animation.android .isuin {
    -webkit-transition: padding-top .2s ease
}

.u-search__btn.active {
    color: #fff;
    background: #0079ff
}

.u-button[disabled]:after {
    border-color: #a6a6a6
}

.m-search-page,
.m-search-input-list {
    display: block;
    overflow: hidden;
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 10001;
    margin-left: -9999em;
    border-top: 1px solid #eaebec;
    width: 100%;
    background-color: #f2f2f4
}

.m-search-page.z-open,
.m-search-input-list.z-open {
    margin-left: 0
}

.m-search-input-list {
    z-index: 10005;
    bottom: 50px;
    background-color: unset
}

.animation .m-search-page,
.animation .m-search-input-list {
    -webkit-transition: -webkit-transform .2s ease;
    -webkit-transform: translate3d(0, -100%, 0)
}

.animation .m-search-page.z-open,
.animation .m-search-input-list.z-open {
    -webkit-transform: translate3d(0, 0, 0)
}

.m-search-list__title {
    overflow: hidden;
    position: relative;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    white-space: nowrap;
    text-indent: 15px;
    text-overflow: ellipsis;
    word-wrap: normal;
    color: #404040;
    background-color: #fff
}

.m-search-list__title:after {
    border-top-color: #eaebec
}

.m-search-list__title .i-v-right {
    position: absolute;
    top: 16px;
    right: 3px;
    margin: 0;
    width: auto;
    font-size: 16px;
    line-height: 1
}

.m-search-list__title .i-search {
    position: relative;
    top: -3px;
    margin-right: 2px;
    color: #a9a9a9
}

.m-search-list__title-word-inner {
    color: #0079ff
}

.m-search-page__b,
.m-search-list__b {
    padding-left: 15px;
    background-color: #fff
}

.m-search-page__b.z-first,
.m-search-list__b.z-first {
    margin-top: 0
}

.m-search-page__h {
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: #909090
}

.m-search-page__h .icon-font {
    line-height: 40px;
    margin-right: 5px;
    vertical-align: baseline
}

.m-search-page__hotlist {
    padding: 0 0 2px;
    overflow: hidden
}

.m-search-page__hotitem {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #d2deec;
    border-radius: 11px;
    padding: 0 16px;
    height: 23px;
    font-size: 14px;
    line-height: 23px;
    color: #404040
}

.m-search-page__hotitem__link {
    float: left;
    color: inherit
}

.m-search-page__hotitem__link:active,
.m-search-page__hotitem__link:hover {
    color: inherit
}

.m-search-page__hotitem[cmd=uJump] {
    color: red
}

.m-search-page__hisitem,
.m-search-list__word-item {
    overflow: hidden;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    color: #404040
}

.m-search-page__hisitem:after,
.m-search-list__word-item:after {
    border-top-color: #eaebec
}

.m-search-page__hisitem.z-active,
.m-search-list__word-item.z-active {
    background-color: #e5e5e5
}

.m-search-page__hisitem {
    padding-right: 40px;
    position: relative
}

.m-search-page__hisitem__link {
    color: inherit
}

.m-search-page__hisitem__link:active,
.m-search-page__hisitem__link:hover {
    color: inherit
}

.m-search-page__hisdel {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 50px;
    line-height: 50px;
    text-align: center
}

.m-search-page__hisdel .i-close {
    line-height: 50px;
    color: #fff;
    background: #8e8e93;
    border-radius: 50%;
    font-size: 12;
    padding: 2px
}

.m-search-list__word-item em {
    font-style: normal;
    color: #0079ff
}

.m-search-page__clear {
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    color: #23b8ff
}

.m-search-mask {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .3)
}

.search-mask {
    z-index: 10000
}

.search-mask .search-box {
    z-index: 10001
}

.search-mask .section {
    z-index: 10000
}

.dialog-time-selector .dialog-content {
    margin: 0;
    padding: 0
}

.dialog-time-selector .term-list {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 218px;
    -webkit-overflow-scrolling: touch
}

.dialog-time-selector .term {
    position: relative;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding: 10px 16px;
    min-height: 20px;
    line-height: 20px
}

.dialog-time-selector .term .term-tips {
    display: inline-block;
    margin-left: 5px;
    border: 1px solid #e85308;
    border-radius: 2px;
    width: 80px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #e85308
}

.dialog-time-selector .term .term-tips.z-zero {
    border-color: #999;
    width: 55px;
    color: #999
}

.dialog-time-selector .term .term-description {
    font-size: 13px;
    color: #909090
}

.dialog-time-selector .term .term-description .term-status {
    margin-left: 5px;
    color: #bbb
}

.dialog-time-selector .term .term-description .term-status.z-inclass {
    color: #e85308
}

.dialog-time-selector .term .term-description .term-status.z-paid {
    color: #23b8ff
}

.dialog-time-selector .term .term-description .term-status.z-audition {
    color: #6ab147
}

.dialog-time-selector .term .term-price .u-price {
    font-size: 13px
}

.dialog-time-selector .term .term-price .u-price--origin {
    display: none;
    margin-left: 5px;
    text-decoration: line-through;
    color: #666
}

.dialog-time-selector .term .term-price--vip .u-price--origin {
    display: inline
}

.dialog-time-selector .term.selected {
    border-top-color: #67b30e;
    border-bottom-color: #67b30e
}

.dialog-time-selector .term.selected:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 4px solid #67b30e;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #67b30e;
    width: 0;
    height: 0;
    content: " "
}

.dialog-time-selector .term.disabled {
    display: none
}

.dialog-time-selector .dialog-btn-group button {
    border-color: #c8c8c8
}

.dialog-time-selector .dialog-cancel-btn {
    color: gray
}

#dialog-coupon-list:after {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    height: 0;
    content: ""
}

.dialog-outer.dialog-coupon-selector,
.dialog-outer.dialog-total-selector {
    position: fixed;
    top: 40%;
    left: 50%;
    margin-left: -150px;
    border-radius: 5px;
    padding-top: 10px;
    width: 300px;
    background: #fff
}

.dialog-outer.dialog-coupon-selector .dialog-title,
.dialog-outer.dialog-total-selector .dialog-title {
    font-size: 18px;
    font-weight: 700;
    color: #404040
}

.dialog-outer.dialog-coupon-selector .dialog-btn-group button,
.dialog-outer.dialog-total-selector .dialog-btn-group button {
    border-color: #e1e1e1;
    width: 50%
}

.dialog-outer.dialog-coupon-selector .dialog-btn-group .dialog-cancel-btn,
.dialog-outer.dialog-total-selector .dialog-btn-group .dialog-cancel-btn {
    color: gray
}

.dialog-total-selector .dialog-content {
    margin: 0;
    padding: 0
}

.dialog-total-selector .payInfo-list li {
    padding: 0 16px
}

.dialog-total-selector .term .term-description {
    margin-right: 14px;
    font-size: 13px;
    color: #909090
}

.dialog-total-selector .selected-coupon,
.dialog-total-selector .selected-term {
    position: relative;
    min-height: 54px
}

.dialog-total-selector .selected-coupon .i-v-right,
.dialog-total-selector .selected-term .i-v-right {
    right: 20px
}

.dialog-total-selector .selected-term.singleTerm .i-v-right {
    display: none
}

.dialog-total-selector .payInfo-list .selected-term {
    padding: 5px 16px;
    min-height: 44px
}

.dialog-total-selector .selected-coupon {
    font-size: 0
}

.dialog-total-selector .selected-coupon.disUsed .coupon-wrapper {
    display: none
}

.dialog-total-selector .selected-coupon .pay-total {
    margin-top: 12px
}

.dialog-total-selector .selected-coupon--cash .coupon-wrapper {
    background: #d7443d
}

.dialog-total-selector .coupon-wrapper {
    top: 3px
}

.dialog-total-selector .coupon-selected-info {
    top: 0;
    font-size: 14px;
    line-height: 54px;
    color: #000
}

.dialog-total-selector .pay-total {
    line-height: 38px;
    text-align: right
}

.dialog-total-selector .pay-total .pay-cost {
    font-size: 18px;
    color: #e85308
}

.dialog-total-selector .pay-total .pay-text,
.dialog-total-selector .pay-total .pay-preCost {
    font-size: 11px;
    color: #909090
}

body .goToTop {
    z-index: 100
}

.blueTip {
    width: 100%;
    text-align: center;
    height: 0;
    overflow: hidden;
    line-height: 44px;
    font-size: 14px;
    background-color: #e3f3ff;
    -webkit-transition: all .4s ease
}

.blueTip i.warning,
.blueTip i.ok {
    margin-right: 3px;
    font-size: 22px;
    line-height: 44px
}

.blueTip.z-show {
    height: 44px
}

i.warning {
    color: #23b8ff
}

i.ok {
    color: #65d521
}

.dialog-video-selector .dialog-content {
    padding: 0;
    margin: 0
}

.dialog-video-selector .video-list {
    max-height: 168px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

.dialog-video-selector .video-term {
    min-height: 20px;
    line-height: 20px;
    padding: 10px 16px;
    position: relative;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #e1e1e1
}

.dialog-video-selector .video-term .video-name {
    margin-bottom: 5px
}

.dialog-video-selector .video-term .video-description {
    font-size: 13px;
    color: #909090
}

.dialog-video-selector .video-term.selected {
    border-top-color: #67b30e;
    border-bottom-color: #67b30e
}

.dialog-video-selector .video-term.selected:before {
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-top: 4px solid #67b30e;
    border-left: 4px solid #67b30e;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    top: 0;
    left: 0
}

.dialog-video-selector .video-term.disabled {
    display: none
}

.dialog-video-selector .dialog-btn-group button {
    border-color: #c8c8c8
}

#vfcode-ipt {
    -webkit-appearance: none;
    margin-top: 5px;
    height: 34px;
    width: 130px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #a6a6a6;
    border-radius: 0
}

.vfcode-dialog .dialog-content {
    margin-bottom: 10px
}

.vfcode-dialog .red {
    color: red
}

.player__description {
    position: absolute;
    top: 0;
    margin-top: 25px;
    padding-top: 35px;
    width: 100%;
    font-size: 14px;
    text-align: center;
    color: #ebebeb;
    background: url() no-repeat center top;
    background-size: 135px
}

.player__description a,
.player__description a:active,
.player__description a:hover {
    text-decoration: none;
    color: #23b8ff
}

@media all and (min-width:360px) {
    .player__description {
        top: 23%;
        margin-top: 0
    }
}

.player {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    height: 0
}

.player .tvp_video {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.player .tvp_controls {
    z-index: 40
}

.player .tvp_overlay_poster {
    background: #fff
}

.player .tvp_overlay_poster:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    content: " "
}

.player .tvp_overlay_poster .tvp_poster_img {
    display: block;
    position: relative;
    margin: 0 -2%;
    width: 104%;
    max-width: initial;
    height: 101%;
    max-height: initial;
    -webkit-filter: blur(12px);
    filter: blur(12px)
}

.player .tvp_overlay_loading {
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -36px;
    width: 72px;
    height: 72px;
    background: url() no-repeat;
    background-size: 72px 72px;
    -webkit-transform: none;
    transform: none
}

.player .tvp_fullscreen_mode .tvp_overlay_play {
    margin-top: -20px
}

.player .tvp_overlay_refresh {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 10;
    margin-top: 28px;
    width: 100%;
    text-align: center
}

.player .tvp_overlay_refresh a {
    color: #fff
}

.player .tvp_overlay_refresh .underline {
    border-bottom: 1px solid #fff
}

.player .tvp_player_error .tvp_player_error_content .text {
    vertical-align: initial
}

.header.no-filter .tvp_overlay_poster:after {
    background: rgba(0, 0, 0, .75)
}

.player .tvp_overlay_play {
    margin-top: -46px;
    margin-left: -23px;
    border: 2px solid #fff;
    border-radius: 23px;
    width: 46px;
    height: 46px;
    background: transparent;
    -webkit-transform: none;
    transform: none
}

.player .tvp_overlay_play .tvp_button_play {
    top: 12px;
    left: 16px;
    border-width: 10px 16px
}

.player .tvp_overlay_play .tvp_button_play {
    top: 12px;
    left: 16px;
    border-width: 10px 16px
}

.player.havingClass .tvp_overlay_play {
    margin-left: -58px;
    border-radius: 3px;
    width: 116px;
    height: 38px;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    background: transparent
}

.player .tvp_container .tvp_overlay_loading {
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -36px;
    width: 72px;
    height: 72px;
    background: url() no-repeat;
    background-size: 72px 72px;
    -webkit-transform: none;
    transform: none
}

.android .player.clicked .tvp_overlay_play {
    margin-top: -44px;
    margin-left: -30px;
    margin-left: -58px;
    border: 0;
    border: 2px solid #fff;
    border-radius: 2px;
    border-radius: 3px;
    width: 60px;
    width: 116px;
    height: 44px;
    height: 38px;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    background: transparent;
    background-color: rgba(26, 26, 26, .7);
    -webkit-transform: none;
    transform: none
}

.android .player.clicked .tvp_button_play {
    display: inline-block;
    overflow: hidden;
    position: relative;
    top: 12px;
    left: 23px;
    border: 20px solid transparent;
    border-width: 11px 19px;
    border-left-color: #fff;
    width: 0;
    height: 0;
    vertical-align: top
}

.icon-refresh {
    display: inline-block;
    margin-top: 5px;
    width: 18px;
    height: 18px;
    background: url() no-repeat 0 -35px;
    background-size: 20px auto
}

.preview-container {
    overflow: auto;
    padding: 10px;
    font-size: 14px;
    background: #fff;
    word-break: break-word
}

.preview-container img {
    display: inline-block;
    min-width: 1px;
    max-width: 100%;
    line-height: 1;
    vertical-align: -2px
}

#dialog-coupon-list:after {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    height: 0;
    content: ""
}

.dialog-outer.dialog-coupon-selector {
    position: fixed;
    top: 40%;
    left: 50%;
    margin-left: -150px;
    border-radius: 5px;
    padding-top: 10px;
    width: 300px;
    background: #fff
}

.dialog-outer.dialog-coupon-selector .dialog-title {
    font-size: 18px;
    font-weight: 700;
    color: #404040
}

.dialog-outer.dialog-coupon-selector .dialog-btn-group button {
    border-color: #e1e1e1;
    width: 50%
}

.dialog-outer.dialog-coupon-selector .dialog-btn-group .dialog-cancel-btn {
    color: gray
}

.dialog-coupon-selector .dialog-content {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 252px;
    -webkit-overflow-scrolling: touch
}

.dialog-coupon-selector .dialog-content .couponBtn .cancel-coupon-btn {
    font-size: 13px;
    line-height: 42px;
    text-align: center;
    color: #404040
}

.dialog-coupon-selector .dialog-content .coupon,
.dialog-coupon-selector .dialog-content .couponBtn {
    display: block;
    position: relative;
    border: 1px solid #fff;
    padding: 6px 16px;
    height: 40px;
    font-size: 0
}

.dialog-coupon-selector .dialog-content .coupon.selected,
.dialog-coupon-selector .dialog-content .couponBtn.selected {
    border: 1px solid #23b8ff
}

.dialog-coupon-selector .dialog-content .coupon.selected .coupon-selected-info,
.dialog-coupon-selector .dialog-content .couponBtn.selected .coupon-selected-info {
    color: #23b8ff
}

.dialog-coupon-selector .dialog-content .coupon {
    margin-bottom: 2px
}

.dialog-coupon-selector .dialog-content .couponBtn .coupon-wrapper {
    background: #bbb
}

.dialog-coupon-selector .dialog-content .couponBtn .coupon-wrapper .coupon-cost {
    font-size: 13px
}

.dialog-coupon-selector .dialog-content .couponBtn .coupon-selected-info {
    top: 0
}

.coupon--cash .coupon-wrapper {
    background: #d7443d
}

.coupon-selected-info {
    position: relative;
    top: -3px;
    font-size: 14px;
    line-height: 40px;
    color: #666
}

.coupon-wrapper {
    display: inline-block;
    position: relative;
    margin-right: 16px;
    border-radius: 2px;
    padding: 9px 0;
    width: 94px;
    height: 22px;
    font-size: 0;
    line-height: 22px;
    text-align: center;
    color: #fff;
    background: #f7b13c
}

.coupon-wrapper .coupon-pu {
    position: relative;
    top: -4px;
    font-size: 10px;
    line-height: 22px
}

.coupon-wrapper .coupon-cost {
    position: relative;
    top: 2px;
    margin-right: 1px;
    font-size: 20px;
    line-height: 20px
}

.coupon-wrapper .coupon-text {
    position: relative;
    top: -4px;
    left: 1px;
    font-size: 10px;
    line-height: 22px
}

.coupon-wrapper:before,
.coupon-wrapper:after {
    position: absolute;
    top: 50%;
    margin-top: -4px;
    border-radius: 8px;
    width: 8px;
    height: 8px;
    background: #fff;
    content: ""
}

.coupon-wrapper:before {
    left: -4px
}

.coupon-wrapper:after {
    right: -4px
}

.iphone .coupon-wrapper .coupon-pu {
    top: -6px
}

.iphone .coupon-wrapper .coupon-cost {
    top: 0
}

.iphone .coupon-wrapper .coupon-text {
    top: -6px
}

.goToTop {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: fixed;
    right: 10px;
    bottom: 80px;
    background-color: rgba(0, 0, 0, .7);
    font-size: 26px;
    color: #fff;
    line-height: 40px;
    text-align: center
}

.goToTop:link,
.goToTop:visited,
.goToTop:active,
.goToTop:hover {
    color: #fff
}

.goToTop.z-showBlock {
    display: block
}

#global .goToTop.z-showBlock {
    display: block
}

.animation .goToTop.z-show {
    -webkit-animation: fadeIn .3s ease
}

.animation .goToTop.z-hide {
    -webkit-animation: fadeOut .3s ease
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.815)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.185)
    }
}

.previewer {
    background: #fff
}

.previewer__cnt {
    overflow-y: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    background: #fff;
    -webkit-overflow-scrolling: touch
}

.previewer__nav {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px
}

.previewer__nav.z-showBlock {
    display: block
}

.previewer__nav .goToTop {
    position: static;
    right: 0;
    bottom: 0
}

.previewer__nav-item {
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, .7)
}

.previewer__nav-item:link,
.previewer__nav-item:visited,
.previewer__nav-item:active,
.previewer__nav-item:hover {
    color: #fff
}

.previewer__nav-item.z-active {
    background-color: rgba(0, 0, 0, .4)
}

.previewer__nav-item[data-op=fullscreen] {
    font-size: 14px;
    line-height: 40px
}

.previewer__nav-item[data-op=out-fullscreen] {
    padding-top: 6px;
    height: 34px;
    font-size: 12px;
    line-height: 14px
}

.previewer__nav-item[data-op=top] {
    display: none
}

#global .previewer__nav.z-showBlock {
    display: block
}

#global .full-screen-tip--previewer p {
    margin-top: -47px
}

.show-pic {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    z-index: 10000
}

.show-pic__wrap {
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    -webkit-transform: translate(0, -50%)
}

.show-pic__wrap img {
    width: 100%
}
.vcp-player {
    position: relative;
    z-index: 0;
    font-family: Tahoma, '\5FAE\8F6F\96C5\9ED1', \u5b8b\u4f53,Verdana,Arial,sans-serif;
    background-color: black;
}
.vcp-player video{
    display: block;
    overflow: hidden;
}
.vcp-fullscreen.vcp-player, .vcp-fullscreen video {
    width: 100%!important;
    height: 100%!important;
}
/* 伪全屏 */
body.vcp-full-window {
    width: 100%!important;
    height: 100%!important;
    overflow-y: auto;
}
.vcp-full-window .vcp-player {
    position: fixed;
    left: 0;
    top: 0;
}

/* chrome flash 成功加载到DOM之前会闪白屏，所以加个黑屏遮一遮 */
.vcp-pre-flash {
    z-index: 1000; background: black; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.vcp-controls-panel {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    height: 3em;
    z-index: 1000;
}
.vcp-controls-panel.show{
    -webkit-animation: fadeIn ease 0.8s;
    animation: fadeIn ease 0.8s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.vcp-controls-panel.hide{
    -webkit-animation: fadeOut ease 0.8s;
    animation: fadeOut ease 0.8s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.vcp-panel-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(36, 36, 36);
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 1000;
}

.vcp-playtoggle {
    cursor: pointer;
    position: relative;
    z-index: 1001;
    width: 3em;
    height: 100%;
    float: left;
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/play_btn.png);
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/play_btn.svg), none;
}
.vcp-playtoggle:hover, .vcp-playtoggle:focus {
    background-color: slategray;
    opacity: 0.9;
    filter: alpha(opacity=90);
}
.touchable .vcp-playtoggle:hover {
    background-color: transparent;
    opacity: 1;
}
.vcp-playing .vcp-playtoggle {
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/stop_btn.png);
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/stop_btn.svg), none;
}
.vcp-bigplay {
    width: 100%;
    height: 80%; /*会遮住原生控制栏*/
    position: absolute;
    background-color: white\0;
    filter: alpha(opacity=0); /*奇怪的IE8/9鼠标事件穿透*/
    opacity: 0;
    z-index: 1000;
    top: 0;
    left: 0;
}

.vcp-slider {
    position: relative;
    z-index: 1001;
    float: left;
    background: rgb(196, 196, 196);
    height: 10px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: pointer;
}
.vcp-slider .vcp-slider-track {
    width: 0;
    height: 100%;
    margin-top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: dodgerblue; /*beautiful blue*/
}
.vcp-slider .vcp-slider-thumb {
    cursor: pointer;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1em!important;
    height: 10px;
    margin-left: -5px;
    width: 10px;
}

.vcp-slider-vertical {
    position: relative;
    width: 0.5em;
    height: 8em;
    top: -5.6em;
    z-index: 1001;
    background-color: rgb(28, 28, 28);
    opacity: 0.9;
    filter: alpha(opacity=90);
    cursor: pointer;
}
.vcp-slider-vertical .vcp-slider-track {
    background-color: rgb(18, 117, 207);
    width: 0.5em;
    height: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.vcp-slider-vertical .vcp-slider-thumb {
    cursor: pointer;
    position: absolute;
    background-color: aliceblue;
    width: 0.8em;
    height: 0.8em;
    border-radius: 0.8em!important;
    margin-top: -0.4em;
    top: 0;
    left: -0.15em;
}
/* 时间线/进度条 */
.vcp-timeline {
    top: -10px;
    left: 0;
    height: 10px;
    position: absolute;
    z-index: 1001;
    width: 100%;
}
.vcp-timeline .vcp-slider-thumb {
    top: -4px;
}
.vcp-timeline .vcp-slider {
    margin-top: 8px;
    height: 2px;
    width: 100%;
}
.vcp-timeline:hover .vcp-slider {
    margin-top: 0;
    height: 10px;
}
.vcp-timeline:hover .vcp-slider-thumb {
    display: block;
    width: 16px;
    height: 16px;
    top: -3px;
    margin-left: -8px;
}
/* 时间展示 */
.vcp-timelabel {
    display: inline-block;
    line-height: 3em;
    height: 3em;
    /*width: 3em;*/
    float: left;
    color: white;
    padding: 0 9px;
    z-index: 1001;
    position: relative;
}
/* 音量控制 */
.vcp-volume {
    height: 3em;
    width: 3em;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    float: right;
    background-color: transparent;
    opacity: 0.9;
    filter: alpha(opacity=90);
}
.vcp-volume-icon {
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/volume.png);
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/volume.svg), none;
    display: inline-block;
    width: 3em;
    height: 3em;
    position: absolute;
    left: 0;
    top: 0;
}
.vcp-volume-muted .vcp-volume-icon {
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/muted.png);
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/muted.svg), none;
}
.vcp-volume .vcp-slider-vertical {
    top: -8.4em;
    left: 1em;
    display: none;
}
.vcp-volume .vcp-slider-track {
    position: absolute;
    bottom: 0;
}
.vcp-volume:hover .vcp-slider-vertical {
    display: block;
}
.vcp-volume .vcp-volume-bg {
    height: 8.8em;
    width: 2em;
    position: absolute;
    left: 0.25em;
    top: -8.8em;
    background: rgb(36,36,36);
    display: none;
}
.vcp-volume:hover .vcp-volume-bg, .vcp-volume:hover .vcp-slider-vertical {
    display: block;
}
/* 全屏控件 */
.vcp-fullscreen-toggle {
    position: relative;
    width: 3em;
    height: 3em;
    float: right;
    cursor: pointer;
    z-index: 1001;
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen.png);
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen.svg), none;
}
.vcp-fullscreen .vcp-fullscreen-toggle {
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen_exit.png);
    background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen_exit.svg), none;
}

.vcp-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -3em;
    display: none;
}

.vcp-poster {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: none;
}
.vcp-poster-pic {
    position: relative;
}
.vcp-poster-pic.default{
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Safari */
    transform: translate(-50%, -50%);
}
.vcp-poster-pic.cover{
    width: 100%;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Safari */
    transform: translate(-50%, -50%);
}
.vcp-poster-pic.stretch{
    width: 100%;
    height: 100%;
}

.vcp-error-tips {
    position: absolute;
    z-index: 1001;
    width: 100%;
    height: 4.5em;
    left: 0;
    top: 50%;
    color: orangered;
    margin-top: -5.25em;
    text-align: center;
    display: none;
}

.vcp-clarityswitcher{
    height: 3em;
    width: 3em;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    float: right;
    background-color: transparent;
    opacity: 0.9;
}
.vcp-vertical-switcher-container{
    width: 3em;
    position: absolute;
    left: 0em;
    bottom: 2.4em;
    background: rgb(36,36,36);
    display: none;
}
.vcp-vertical-switcher-current{
    display: block;
    color: #fff;
    text-align: center;
    line-height:3em;
}
.vcp-vertical-switcher-item{
    display: block;
    color: #fff;
    text-align: center;
    line-height:2em;
}
.vcp-vertical-switcher-item.current{
    color: #888;
}
/* animations */
@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation: fadeOut ease 0.8s;
    animation: fadeOut ease 0.8s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation: fadeIn ease 0.8s;
    animation: fadeIn ease 0.8s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.subjects-item{
	margin-top:20px;
	padding: 0 15px 0 10px;
	white-space: nowrap;
    text-overflow: ellipsis;
	overflow:hidden;
}
.subjects-item:last-child{
	margin-bottom:20px;
}
.subjects-item img{
	vertical-align:middle;
	width:7px;
	margin-left:7px;
}

.subjects-item a,.subjects-item a:hover,.subjects-item a:active{
	color:#404040;
}

.advertisement-item{
	margin-top:10px;
	padding: 0;
	display: flex;
	align-items: center;
	white-space: normal;
}
.advertisement-item img{
	vertical-align:middle;
	width:7px;
	height:7px;
	margin:0 5px;
	line-height:7px;
}