/* ¡ý¡ý¡ý¡ý¡ý¡ý¡ý general class ¡ý¡ý¡ý¡ý¡ý¡ý¡ý */
.fl { float: left; }
.fr { float: right; }
.clearfix::after { content: ""; display: block; clear: both; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; text-align-last: justify; }

.single-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disable-select {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}


/*  */
.hljs, .ace_gutter, .ace-monokai { background-color: #201e2f !important; }


/* ¡ý¡ý¡ý¡ý¡ý¡ý¡ý header minicourse ¡ý¡ý¡ý¡ý¡ý¡ý¡ý */
#course_header { box-sizing: content-box; min-width: 1024px; height: 48px; background-color: #fff; border-bottom: 1px solid #ededed; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); line-height: 48px; }
#course_header .header-layout { height: 100%; padding: 0 20px; }
#course_header .header-l .logo { box-sizing: border-box; height: 48px; padding: 6px 0; }
#course_header .header-r .header-app { margin: 12px 15px 0 0; }
#course_header .header-r > .sig-box .dropdown-content { top: 92%; left: -65px; }
#course_header .header-r > .sig-box .dropdown-content > .j { left: 53%; }
#course_header .header-r > .header-app > .qrcode-box { left: -182px; }
#course_header .header-r > .header-app > .qrcode-box > .j { left: 64%; }
#course_header .header-menu li a, #course_header .sig-box a { line-height: 1; }


/* ¡ý¡ý¡ý¡ý¡ý¡ý¡ý footer minicourse ¡ý¡ý¡ý¡ý¡ý¡ý¡ý */
#course_footer { padding: 20px 0; font-size: 14px; line-height: 35px; color: #666; text-align: center; }


/* ¡ý¡ý¡ý¡ý¡ý¡ý¡ý  ¡ý¡ý¡ý¡ý¡ý¡ý¡ý */
/*  */
#course_mini_header { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99; height: 48px; padding: 0 52px; background-color: #fff; line-height: 48px; color: #212121; font-size: 18px; }
#course_mini_header > a { position: absolute; top: 0; left: 20px; color: inherit; }
#course_mini_header > a > .icon { vertical-align: baseline; }
@media1 (max-width: 1024px) {
    #course_header, .play-breadcrumb { display: none; }
    #course_mini_header { display: block; }
    #layout-wrap { padding-top: 48px; }
}

/*  */
.play-breadcrumb { position: fixed; left: 220px; top: 15px; font-size: 15px; }
.play-breadcrumb .link > a { color: #333; }
.play-breadcrumb .link > a:hover { color: #31285d; }
.play-breadcrumb .link a > .icon { margin-right: 4px; font-size: 20px; color: #675f8f; }
.play-breadcrumb .separator { margin: 0 4px; }

/*  */
.play-catalog { padding: 0 8px; color: #31285d; }
.play-catalog .icon { color: #675f8f; }
.play-catalog-title { padding: 15px 0; font-size: 16px; text-align: center; }
.play-catalog-title > a { display: inline-block; color: #31285d; }
.play-catalog-title span { display: inline-block; vertical-align: middle; }
.play-catalog-title span.img { height: 48px; margin: 0 7px; border-radius: 4px; overflow: hidden; }
.play-catalog-title span.word { margin: 7px 0; }

.play-catalog-list > .chapter-item { padding-bottom: 24px; }
.play-catalog-list .chapter-title { position: relative; height: 42px; padding: 0 40px 0 12px; border-radius: 4px; line-height: 42px; font-size: 15px; font-weight: 600; background-color: #dbe7f9; cursor: pointer; }
.play-catalog-list .chapter-title .icon { position: absolute; top: 13px; right: 12px; font-size: 16px; transition: transform .4s; }
.play-catalog-list .chapter-title.r .icon { transform: rotate(180deg); }
.play-catalog-list .chapter-list { padding: 8px 10px 0; }
.play-catalog-list .chapter-list li { line-height: 48px; }
.play-catalog-list .chapter-list li > a { position: relative; display: block; font-size: 14px; color: #31285d; border-bottom: 1px dashed #ddd; }
.play-catalog-list .chapter-list li > a > .icon { font-size: 18px; }
.play-catalog-list .chapter-list li > a > .icon
.play-catalog-list .chapter-list li > a > .icon.i-icon-locked { position: absolute; top: 50%; right: 0; margin-top: -7px; font-size: 14px; }
.play-catalog-list .chapter-list li > a > .word { margin-left: 8px; }
.play-catalog-list .chapter-list li .learning { position: absolute; top: 0; right: 0; color: #4caf50; }
.play-catalog-list .chapter-list li .learning > .icon { margin-left: 7px; color: #4caf50; vertical-align: baseline; }

/*  */
#play-footer { left: 0; right: 0; bottom: 0; z-index: 99; height: 55px; background-color: #f9f9f9; border-top: 1px solid #ddd; color: #31285d; font-size: 15px; line-height: 55px; }
#play-footer > .play-catalog-switch { box-sizing: border-box; width: 340px; padding: 0 32px; }
#play-footer > .play-catalog-switch > .switch-btn { cursor: pointer; }
#play-footer > .play-catalog-switch > .switch-btn > .icon { margin-bottom: 2px; font-size: 24px; }
#play-footer > .play-catalog-switch > .switch-btn > .switch-word { padding-left: 10px; }
#play-footer > .play-user-active { padding: 0 32px; }
#play-footer > .play-user-active > .cell + .cell { margin-left: 32px; }
#play-footer > .play-user-active a { color: #31285d; }
#play-footer > .play-user-active a > .icon { font-size: 20px; vertical-align: text-top; }
#play-footer > .play-user-active a > .word { margin-left: 4px; font-size: 15px; }
#play-footer > .play-nav > .play-nav-box { width: 340px; margin: 0 auto; }
#play-footer > .play-nav > .play-nav-box > div { display: inline; }
#play-footer > .play-nav > .play-nav-box .icon { font-size: 40px; cursor: pointer; color: #4caf50; }



@font-face {
    font-family: "custom-font";
    src: url("t.eot"),  /* IE9+ */
         url("t.ttf") format("truetype");
}
.icon { display: inline-block; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

/* */
.i-icon { font-family: 'custom-font' !important; }
.i-icon-menu1:before { content: "\e60d"; }
.i-icon-topic:before { content: "\e629"; }
.i-icon-note:before { content: "\e602"; }
.i-icon-play:before { content: "\e696"; }
.i-icon-locked:before { content: "\e630"; }
.i-icon-play:before { content: "\e696"; }
.i-icon-delete:before { content: "\e62a"; }
.i-icon-close:before { content: "\e650"; }
.i-icon-correct:before { content: "\e8af"; }
.i-icon-date:before { content: "\e6ff"; }
.i-icon-expand:before { content: "\e6db"; }
.i-icon-refresh:before { content: "\e600"; }
.i-icon-help:before { content: "\e60f"; }
.i-icon-comment:before { content: "\e64e"; }
.i-icon-prev:before { content: "\e772"; }
.i-icon-arrow-down:before { content: "\e953"; }
.i-icon-prev-section:before { content: "\e952"; }
.i-icon-next-section:before { content: "\e63b"; }