@charset "utf-8";

/* base */
body { min-width: 1200px; background: #f4f4f4; }
a { color: #333; }
a:hover { color: #03b3b2; text-decoration: none; }
a:focus { color: #333; text-decoration: none; }
ul, li { list-style: none; margin: 0; padding: 0; }
h2 { font-size: 30px }
.clearfix { clear: both }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
.has-error .form-control, .has-error .form-control:focus { border-color: #ff5949; }
.has-error .help-block { color: #ff5949; }
.has-success .form-control, .has-success .form-control:focus { border-color: #03b3b2; background: #f0fcff; }
.has-success .help-block { color: #03b3b2; }
.text-orange { color: #ff5949; }
.icon-wechat { display: inline-block; vertical-align: middle; margin-top: -2px; width: 1em; height: 1em; background: url(../img/mss/wechat.png) no-repeat center center; background-size: contain; }
.text-info { color: #2673dd; }
.text-primary { color: #03b3b2; }
.text-muted { color: #9d9d9d; }
.btn { min-width: 140px; border-radius: 3px; }
.btn + .btn { margin-left: 10px; }
.btn-group-lg>.btn, .btn-lg { padding: 8px 34px; }
.btn-group-lg>.btn, .btn-lg { padding: 8px 34px; }
.btn-group-big>.btn, .btn-big { min-width: 180px; font-size: 20px; font-weight: bold; }
.btn-default, .btn-default:focus { color: #03b3b2; border-color: #03b3b2; }
.btn-default:hover { color: #fff; background-color: #03b3b2; border: 0; }
.btn-primary, .btn-primary:focus { color: #fff; background: #03b3b2; border-color: #03b3b2; }
.btn-primary:hover { color: #fff; background-color: #0c9b9a !important; }
.btn-danger, .btn-danger:focus { color: #fff; background: #ff5949; border-color: #ff5949; }
.btn-danger:hover { color: #fff; background: #ff5949; border-color: #ff5949; }
.btn-gray, .btn-gray:focus { color: #333; background: #ededed; border-color: #ededed; }
.btn-gray:hover { color: #333; background: #dadada; border-color: #dadada; }

/* common */
.app-wrapper { width: 1200px; margin: 0 auto; clear: both; }
.app-wrapper:before { display: table; content: " "; }
.app-wrapper:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
.app-section { margin: 20px 0; }
.app-section-header { padding: 0 20px; width: 100%; border-bottom: 1px solid #ebebeb; }
.app-section-header-container { float: left; }
.app-section-header-container h3 { color: #ff5949; font-weight: bold; font-size: 20px; line-height: 1; margin: 16px 0; }
.app-section-header-container h3:before { content: ''; display: inline-block; vertical-align: middle; width: 4px; height: 1em; margin: -2px 10px 0 0; background: #ff5949; }
.app-section-footer .text-muted { text-align: center; padding: 20px 0; }

.app-breadcrumb > .breadcrumb { margin: 0; display: inline; background: none; padding: 0; }
.app-breadcrumb > .breadcrumb > li, .app-breadcrumb > .breadcrumb > li > a { color: #9d9d9d; display: inline;}
.app-breadcrumb > .breadcrumb>li+li:before { padding: 0 4px 0 2px; content: ">"; }
.app-section-header-side { float: right; }
.app-section-header-side .btn-more { color: #9d9d9d; font-size: 16px; line-height: 50px; }
.app-section-header-side .btn-more:hover { color: #03b3b2; }
.app-page-title { margin: 40px 0; }
.app-page-title h2 { text-align: center; font-size: 34px; }
.app-divider { display: inline-block; width: 1px; height: 1em; vertical-align: middle; background: #e6e6e6; margin: -2px 0.75em 0; }
.app-cate-card { padding: 30px 20px 6px; }
.app-cate-box { overflow: hidden; }
.app-cate-box .app-cate-label { float: left; width: 70px; line-height: 30px; color: #9d9d9d; }
.app-cate-box .app-cate-list { margin-left: 80px; position: relative; }
.app-cate-box .app-cate-item { float: left; font-size: 16px; height: 30px; line-height: 30px; min-width: 78px; padding: 0 10px; border-radius: 3px; margin: 0 20px 24px 0; text-align: center; cursor: pointer; }
.app-cate-box .app-cate-item:hover, .app-cate-box .app-cate-item.active { color: #03b3b2; background: #f4f4f4; }
.app-course-list { position: relative; }
.app-course-list:before { content: ''; height: 1px; background: #dadada; position: absolute; left: 10px; right: 10px; top: 41px; }
.app-course-item { width: 280px; float: left; text-align: center; padding-bottom: 26px; margin: 0 10px; }
.course-live-date { height: 30px; border-radius: 15px; background: #f4f4f4; display: inline-block; line-height: 30px; padding: 0 15px; font-size: 14px; }
.course-live-date:before { content: ''; background: url('../img/mss/play_icon.png') no-repeat; display: inline-block; width: 11px; height: 13px; vertical-align: middle; margin: -2px 5px 0 0; }
.app-course-item .course-cover { width: 280px; height: 160px; background: #eee; border-radius: 5px; overflow: hidden; }
.app-course-item .course-title { margin: 16px 0; line-height: 1; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-course-item .course-live-date { margin-bottom: 30px; }
.app-course-item:hover .course-live-date { background: #ff5949; color: #fff; }
.app-course-item:hover .course-live-date:before { background: url('../img/mss/play_w_icon.png') no-repeat; }
.app-cover { position: relative; width: inherit; height: inherit; text-align: center; display: table-cell; vertical-align: middle; background-size: 100% auto; }
.app-cover.app-cover-school-tag::before { content: ''; position: absolute; background: url(../img/mss/live_icon.png) no-repeat; right: 0; top: 0; width: 158px; height: 31px; }
.app-cover .cover-title { font-size: 26px; line-height: 38px; color: #fff; font-weight: bold; text-shadow: 0 5px 4px rgba(0, 0, 0, .4); max-height: 76px; overflow: hidden; margin: 20px 20px 0; }
.app-cover.shopee-theme-orange { background-image: url('../img/mss/shopee_theme_orange.png'); }
.app-cover.shopee-theme-blue { background-image: url('../img/mss/shopee_theme_blue.png'); }
.app-cover.shopee-theme-pink { background-image: url('../img/mss/shopee_theme_pink.png'); }
.app-cover.shopee-theme-purple { background-image: url('../img/mss/shopee_theme_purple.png'); }
.app-cover[class*='share-theme'] { padding: 0 20px; text-align: left; color: #333;}
.app-cover[class*='text-theme'] .cover-title { margin: 0; text-shadow: none; font-size: 22px; line-height: 30px; max-height: 100%; color: inherit; }
.app-cover.share-theme-1 { background-image: url('../img/mss/share_theme_1.png'); }
.app-cover.share-theme-2 { background-image: url('../img/mss/share_theme_2.png'); }
.app-cover.share-theme-3 { background-image: url('../img/mss/share_theme_3.png'); }
.app-cover.share-theme-4 { background-image: url('../img/mss/share_theme_4.png'); }
.app-cover.share-theme-5 { background-image: url('../img/mss/share_theme_5.png'); }
.app-cover.icon-theme-1:after { content: ''; display: block; width: 70px; height: 70px; background: url('../img/mss/share_theme_1_icon.png') no-repeat; position: absolute; right: 10px; top: 50%; margin-top: -35px; }
.app-cover.icon-theme-3:after { content: ''; display: block; width: 78px; height: 80px; background: url('../img/mss/share_theme_3_icon.png') no-repeat; position: absolute; right: 10px; top: 50%; margin-top: -40px; z-index: 1; }
.app-cover.text-theme-1 { padding-right: 80px; }
.app-cover.text-theme-2 { padding-right: 50px; }
.app-cover.text-theme-3 { padding-right: 50px; }
.app-cover.text-theme-2 .cover-sub-title { font-size: 12px; line-height: 24px; padding: 0 6px; border-radius: 3px; display: inline-block; margin-top: 5px; }
.app-cover.text-theme-3 .cover-title {position: relative; z-index: 2;}
.app-cover.text-theme-3 .cover-sub-title { font-size: 12px; line-height: 24px; padding: 0 6px; border-width: 1px; border-style: solid; display: inline-block; margin-top: 5px; box-sizing: border-box; position: relative; z-index: 2;}
.app-cover.text-theme-4 .cover-title { border-bottom: 1px solid; padding-bottom: 5px; display: inline-block; }
.app-cover.text-theme-4 .cover-sub-title { font-size: 16px; display: block; }
.app-cover.text-theme-5 .cover-sub-title { font-size: 22px; font-weight: bold; display: block; }
.app-cover-small { width: 160px; height: 90px; border-radius: 5px; overflow: hidden; }
.app-cover-small[class*='share-theme'] { padding: 0 10px;}
.app-cover-small[class*='text-theme'] .cover-title {font-size: 16px; line-height: 20px; }
.app-cover-small.share-theme-1 { padding-right: 56px; }
.app-cover-small.share-theme-2 { padding-right: 35px; }
.app-cover-small.icon-theme-1:after { width: 50px; height: 50px; margin-top: -25px; background-size: contain;}
.app-cover-small.icon-theme-3:after { width: 54px; height: 56px; margin-top: -28px; background-size: contain;}
.app-cover-small.text-theme-4 .cover-sub-title { font-size: 12px; }
.app-cover-small.text-theme-5 .cover-sub-title { font-size: 16px; font-weight: bold; display: block; }
.app-block-course-list { margin: -15px -5px; }
.app-block-course-item { float: left; width: 595px; margin: 15px 5px; background: #fff; transition: all .5s; }
.app-block-course-item:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 3px 3px rgba(0, 0, 0, .1); }
.app-block-course-item .course-cover { float: left; width: 290px; height: 218px; background: #eee; border: 1px solid #eee; }
.app-block-course-item .course-info { float: right; width: 305px; height: 218px; padding: 20px; line-height: 24px; color: #9d9d9d; }
.app-block-course-item .course-info .course-title { font-size: 18px; line-height: 38px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-block-course-item .course-info .course-desc { margin: 5px 0; max-height: 48px; overflow: hidden; }
.app-block-course-item .course-info .course-footer { margin-top: 60px; vertical-align: bottom; }
.app-block-course-item .course-info .course-type { float: right; color: #ff5949; font-size: 16px; }
.app-inside-course-list { padding: 24px 0 0 17px; overflow: hidden; }
.app-inside-course-item { width: 290px; float: left; margin-right: 17px; margin-bottom: 30px; }
.app-inside-course-item .course-cover,.app-inside-course-item img { width: 290px; height: 218px; }
.app-inside-course-item .app-cover:hover { opacity: .7; }
.app-inside-course-item .course-info .course-title { font-size: 18px; line-height: 38px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-inside-course-item .course-info .course-footer { vertical-align: bottom; height: 20px; line-height: 20px; color: #9d9d9d; }
.app-inside-course-item .course-info .course-type { float: right; color: #ff5949; font-size: 16px; }
.app-inside-pagination { text-align: right; padding: 0 20px; }
.app-video-cover { display: block; width: inherit; height: inherit; position: relative; }
.app-video-cover::before { content: ''; position: absolute; left: 0; top: 0; width: inherit; height: inherit; background: rgba(0, 0, 0, .3); z-index: 1; opacity: 0; transition: all .5s; }
.app-video-cover::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: url(../img/mss/play.png) no-repeat center center; z-index: 10; -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); opacity: 0; transition: all .5s; }
.app-video-cover:hover::before { opacity: 1; }
.app-video-cover:hover::after { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
.app-video-cover > img { width: inherit; height: inherit; }
.app-line-course-item { padding: 20px; border-bottom: 1px solid #ebebeb; }
.app-line-course-item:hover { background: #fafafa; }
.app-line-course-item .course-cover { width: 230px; height: 130px; float: left; }
.app-line-course-item .app-cover .cover-title { margin-top: 0; }
.app-line-course-item .app-cover:hover { opacity: .7; }
.app-line-course-item .course-info { margin-left: 260px; position: relative; height: 130px; }
.app-line-course-item .course-title { margin: 0; font-size: 18px; padding-top: 14px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-line-course-item .app-detail-info-bar { margin-top: 70px; }
.app-detail-info-bar { color: #9d9d9d; }
.app-detail-info-bar > span { margin-right: 30px; }
.app-detail-info-bar > span > .fa { margin-right: 5px; }
.course-cover-sm { width: 110px; height: 62px; }
.course-cover-sm .app-cover .cover-title { font-size: 12px; line-height: 1.5; margin: 0 }
.app-line-course-item .btn { position: absolute; right: 20px; bottom: 14px; }
.app-lecturer-item { background: #fff; padding: 30px 50px 30px 40px; margin: 20px 0px; }
.app-lecturer-item + .app-lecturer-item { margin-top: 60px; }
.app-lecturer-item .lecturer-cover { float: left; width: 210px; height: 210px; }
.app-lecturer-item .lecturer-cover > img { display: block; width: inherit; height: 260px; margin-top: -50px;border-radius: 5px }
.app-lecturer-item .lecturer-info { position: relative; margin-left: 260px; height: 210px; color: #5d5d5d; }
.app-lecturer-item .lecturer-title { margin: 0; font-size: 28px; max-height: 28px; overflow: hidden; }
.app-lecturer-item .lecturer-tag { display: inline-block; font-size: 16px; padding: 0 10px; line-height: 36px; background: #f9f9f9; margin: 10px 0 12px; max-height: 36px; overflow: hidden; }
.app-lecturer-item .lecturer-desc { line-height: 30px; max-height: 120px; overflow: hidden; }
.app-card { background: #fff; border: 1px solid #ebebeb; }
.app-tag { display: inline-block; color: #03b3b2; background: #c1f3f6; border-radius: 3px; padding: 0 7px; font-size: 16px; }
.app-tag-danger { color: #fff; background: #ff5949; }
.app-tag-black { color: #fff; background: #000; }
.app-tag-sm { font-size: 12px; height: 18px; line-height: 18px; }
.app-inside-layout { min-height: calc(100vh - 675px); background: url('../img/mss/member_bg.jpg') repeat-y center center; }
.app-inside-side { float: left; width: 240px; min-height: calc(100vh - 675px); margin-right: 20px; }
.app-inside-container { position: relative; margin-left: 260px; min-height: calc(100vh - 675px); }
.app-inside-menu { text-align: center; font-size: 16px; }
.app-inside-menu > ul { padding: 20px 0; }
.app-inside-menu > ul > li { line-height: 56px; height: 56px; }
.app-inside-menu > ul > li > a:hover { color: #fa5930; }
.app-inside-menu .active-menu { font-weight: bold; }
.app-inside-menu .active-menu a { color: #fa5930; }
.app-order-list-header { font-size: 16px; color: #9d9d9d; padding: 20px 0; border-bottom: 1px solid #eee; }
.app-order-row { overflow: hidden; }
.app-order-row .app-order-col { float: left; padding: 0 20px; width: 20%; text-align: center; }
.app-order-row .app-order-col:first-child { width: 60%; text-align: left; }
.app-order-item { border-bottom: 1px solid #eee; }
.app-order-item .app-order-col { line-height: 76px; }
.app-order-item .app-order-col:first-child { max-height: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-empty { min-height: 540px; background-repeat: no-repeat; background-position: center 60px; text-align: center; overflow: hidden; }
.app-empty > .empty-text { display: block; margin-top: 230px; color: #ddd; }
.app-empty.empty-order { background-image: url('../img/mss/empty_order.png'); }
.app-empty.empty-book { background-image: url('../img/mss/empty_book.png'); }
.app-empty.empty-video { background-image: url('../img/mss/empty_video.png'); }
.app-countdown { display: inline-block; }
.app-countdown-number { display: inline-block; width: 24px; height: 34px; text-align: center; line-height: 34px; background: #eee; border-radius: 3px; font-weight: bold; color: #ff5949; }
.app-detail-box { margin-top: 30px; }
.app-detail-box > .media-body { width: 900px; padding: 0 20px; }
.app-detail-box > .media-body .app-section-header-container { width: 100%; }
.app-detail-box .app-detail-main { margin: 10px 0 20px; }
.app-detail-box .media-right { width: 300px; padding: 0 10px 0 0; }
.app-detail-box .media-right .app-inside-course-list { padding: 0; }
.app-detail-box .media-right .app-inside-course-item { margin: 0 0 20px 0; }
.app-detail-box .app-section-header { padding: 0; margin-bottom: 10px; }
.app-detail-main-header { margin-bottom: 50px; }
.app-detail-main-header > h2 { margin: 25px 0 15px; font-size: 20px; line-height: 30px; }
.app-detail-footer { padding: 20px 0; background: #f4f4f4; margin-top: 50px; }
.app-detail-footer .course-cover { width: 160px; height: 90px; border-radius: 5px; overflow: hidden; }
.app-detail-footer .media { margin-top: 0; }
.app-detail-footer .media:first-child { border-right: 1px solid #dadada; }
.app-detail-footer .media:first-child .media-body { text-align: right; }
.app-detail-footer .media-left { padding: 0 0 0 45px; }
.app-detail-footer .media-right { padding: 0 45px 0 0; }
.app-detail-footer .media-body { padding: 0 20px; }
.app-detail-footer .media-body > span { display: block; margin: 5px 0 10px; font-size: 16px; }
.app-detail-footer .media-body > p { line-height: 1.5; height: 3em; overflow: hidden; }

/* app_topbar */
.app-topbar { min-height: 36px; border-bottom: 1px solid #dadada; background: #f5f5f5; }
.app-topbar-left { line-height: 36px; color: #797979; float: left; }
.app-topbar-right { line-height: 36px; color: #797979; float: right; }
.app-topbar-button { color: #797979; }
.app-topbar-button .icon-wechat { font-size: 16px; margin-right: 5px; }
.app-topbar-button.text-orange { color: #ff5949; }

/* app-header */
.app-header { background: #fff; min-height: 84px; box-shadow: rgba(146, 157, 154, .3) 0 4px 10px 0; }
.app-header-logo { margin: 0; padding-top: 20px; float: left; }
.app-header-logo img { display: block; width: 225px; height: 44px; }
.app-header-slogan { padding-top: 12px; float: right; }
.app-header-slogan img { display: block; width: 760px; height: 60px; border-radius: 60px; }

/* app-container */
.app-container { min-height: calc(100vh - 455px); margin: 30px 0; }

/* app-footer */
.app-footer { color: #fff; background-color: #363636; border-bottom: 10px solid #03b3b2; }
.app-footer h2 { text-align: center; }
.app-footer .address { margin-top: 10px; color: #797979; text-align: center; }
.app-footer .about>div h4 { color: #dcdcdc; font-size: 14px; margin-bottom: 10px; }
.app-footer .about>div>ul>li { color: #797979; padding-top: 5px; padding-bottom: 5px; }
.app-footer .copyright { margin-top: 5px; margin-bottom: 10px; text-align: center; color: #797979; }
.app-footer .copyright a { color: #797979; }

/* page_index */
.index-banner-box { float: left; width: 890px; height: 320px; }
.index-account-box { float: right; width: 300px; height: 320px; background: #fff; border: 1px solid #eee; }
.index-account-box .account-avatar { display: inline-block; width: 90px; height: 90px; border-radius: 50%; border: 4px solid #fff; }
.index-account-box .account-avatar img { width: 82px; height: 82px; }
.index-account-login-box { text-align: center; }
.index-account-login-box .account-avatar { margin-top: 50px; }
.index-account-login-box .login-text { font-size: 16px; color: #797979; margin: 20px 0 0 0; }
.index-account-login-box > .btn { margin: 40px 0; }
.index-account-info-box { background: url('../img/mss/account_info_bg.jpg') no-repeat top center; text-align: center; padding: 8px; }
.index-account-info-box .account-avatar { margin-top: 40px; }
.index-account-info-box .account-name { font-size: 18px; line-height: 1; margin: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-account-info-box .account-learn-info { margin-top: 12px; }
.index-account-info-box .account-learn-info-box { float: left; width: 140px; height: 100px; border-radius: 5px; line-height: 1; padding-top: 24px; }
.index-account-info-box .account-learn-info-box:hover { background: #ff5949; }
.index-account-info-box .account-learn-info-box:hover * { color: #fff; }
.index-account-info-box .account-learn-info-box span { font-size: 16px; color: #797979; }
.index-account-info-box .account-learn-info-box em { font-style: normal; }
.index-account-info-box .account-learn-info-box p { margin-top: 16px; font-size: 18px; }
.index-live-section .app-wrapper { background: #fff; }
.index-share-course .app-wrapper { background: #fff; }
.index-share-course .app-section-header { border-bottom: 1px solid #ebebeb; }

/* page_personal_center */
.personal-info-box { margin: 0 0 10px; position: relative; }
.personal-info-box .personal-avatar { float: left; margin: 24px 30px; width: 94px; height: 94px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); }
.personal-info-box .personal-avatar > img { width: 86px; height: 86px; }
.personal-info-box .personal-info { margin-left: 154px; font-size: 16px; position: relative; height: 198px; }
.personal-info-box .personal-info-item { float: left; margin-right: 60px; padding-top: 50px; line-height: 24px; }
.personal-info-box .personal-info-item .btn { vertical-align: middle; margin-top: -3px; padding: 0; min-width: 80px;}
.personal-info-box .personal-name { margin: 0; font-size: 18px; line-height: 24px; max-width: 420px; max-height: 72px; overflow: hidden; }
.personal-info-box .personal-setting { position: absolute; right: 20px; top: 20px; width: 38px; height: 30px; background: #ededed; text-align: center; line-height: 30px; color: #424242; }
.personal-info-box .personal-setting:hover { background: #dadada; }
.personal-center-container .app-section-header { border-bottom: 1px solid #ededed; overflow: hidden; }
.personal-center-container .app-block-course-list { overflow: hidden; }

/* page_reservation_detail */
.reservation-info-box { position: relative; margin-top: 20px; padding: 24px 20px; }
.reservation-info-box .media-left { position: relative; }
.reservation-info-box .media-left > .app-tag { position: absolute; right: 20px; bottom: 10px; font-size: 14px; height: 28px; line-height: 28px; border-radius: 0; }
.reservation-info-box .reservation-cover { display: block; width: 400px; height: 300px; }
.reservation-info-box .reservation-info { margin-left: 76px; }
.reservation-info-item:nth-child(2) { margin-top: 48px; }
.reservation-info-item .app-countdown { margin-left: 10px; }
.course—info-box .reservation-info-item:first-child { margin-top: 30px; }
.course—info-box .reservation-info-item:nth-child(2) { margin-top: 0; }
.reservation-info-box .reservation-title { display: inline-block; vertical-align: middle; margin-top: -2px; margin-bottom: 0; max-width: 560px; height: 1.1em; overflow: hidden; font-weight: 600; }
.reservation-info-box .reservation-desc { margin-top: 12px; line-height: 24px; height: 72px; padding-right: 230px; overflow: hidden; }
.reservation-info-line { margin-bottom: 15px; }
.reservation-info-line > span { margin-right: 40px; }
.reservation-info-line > span .fa { margin-right: 5px; }
.reservation-qrcode { position: absolute; right: 20px; bottom: 20px; width: 120px; height: 150px; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, .1); text-align: center; }
.reservation-qrcode > img { display: block; width: 100px; height: 100px; margin: 10px; }
.reservation-price-box .text-orange { font-size: 30px; color: #ff5949; margin-bottom: 5px; }
.reservation-price-box .text-muted { margin-bottom: 10px; }
.reservation-price-box .text-muted del { margin-right: 20px; }
.reservation-modal .modal-body, .reservation-modal .modal-footer { text-align: center; }
.reservation-modal .modal-footer { border: 0; padding-bottom: 30px; }
.reservation-modal .modal-footer .btn { width: 100px; font-size: 16px; }
.reservation-modal .modal-body > img { margin: 15px 0 10px; }
.reservation-modal .modal-body > .text-orange { margin: 10px 0 25px; font-size: 34px; }
.advisory-modal .modal-content { width: 402px; height: 577px; background: url('../img/mss/advisory_bg.png') no-repeat; box-shadow: none; border: 0; margin: 0 auto; padding: 10px 16px; }
.advisory-modal .modal-header { border: 0; }
.advisory-modal .modal-body img { display: block; width: 320px; height: 320px; margin: 0 auto; }

/* page-phone-bind */
.phone-bind-form { width: 280px; margin: 0 auto; }
.phone-bind-form  > .form-group { position: relative; }
.phone-bind-form  > .form-group.is-require::before { content: '*'; position: absolute; left: -15px; top: 10px; font-size: 16px; color: #ff5949; }
.phone-bind-form  > .form-group  .help-block { position: absolute; left: 100%; top: 0; line-height: 40px; width: 400px; margin: -2px 0 0 20px; }
.phone-bind-form  > .form-group .verify-code { position: absolute; right: 2px; top: 2px; width: 80px; height: 30px; }
.phone-bind-box { padding-bottom: 50px; }
.phone-bind-box > h3 { text-align: center; font-size: 24px; margin: 70px 0 30px; }
.phone-bind-form .get-code { position: absolute; right: 5px; top: 2px; line-height: 30px; cursor: pointer }
.phone-bind-form .get-code:hover { text-decoration: underline; }
.phone-bind-form .btn { width: 100%; margin-top: 20px; font-weight: bold; font-size: 20px; }
.phone-bind-form-bottom { text-align: right; }
.phone-bind-form-bottom > a:hover { color: #2673dd; text-decoration: underline; }

/* page-video-detail */
.video-detail .app-detail-main { margin: 0; }
.video-detail .app-detail-main-header { margin-bottom: 10px; }
.video-detail .video-detail-player { height: 482px; }
.video-detail .video-detail-player iframe { height: inherit; }

/* common */
.app-wrapper { width: 1200px; margin: 0 auto; clear: both; }
.app-wrapper:before { display: table; content: " "; }
.app-wrapper:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
.app-menu-category {font-size: 16px; height: 50px; line-height: 50px; border-bottom: 1px solid #ececec; cursor: pointer;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
.app-menu-category:hover { background-color: rgb(230, 230, 230);}
.app-menu-category.active { background-color: rgb(243, 243, 243); }
.app-menu-category a {width: 100%;display: inline-block}
.app-menu-category a.active {color: #03b3b2}
.app-menu-toggle {display: none; }
.app-menu-toggle-active {display: block;}
.app-menu-toggle>div {padding-left: 40px; }
.app-menu-dropdown-icon {transform: rotate(-90deg); transition: transform 0.1s linear; float: right;margin-top: 15px;margin-right: 10px; width: 20px; height: 20px;background-size: 100%; background-image: url('../img/mss/dropdown_icon.png');background-repeat: no-repeat; background-position: center center;}
.app-menu-dropdown-active { transform: rotate(0deg);}
.myself-btn:active:focus,.myself-btn:focus {outline: none !important;}

/* app-header */
.app-header { background: #fff; min-height: 84px; padding-bottom: 15px;}
.app-header .app-flex-box { display: flex; justify-content: space-between;}
.app-header-logo { margin: 0; padding-top: 20px;  }
.app-header-logo img { display: block; width: 225px; height: 44px; }
.app-header-search-box {  padding-top: 20px;}
.app-header-search-group { min-width: 600px;border-radius: 5px; background-color:#F5F5F5; overflow: hidden; }
.app-header-search { min-width: 500px; height: 44px;background-color: #F5F5F5; border: none; outline: none; padding-left: 10px;}
.app-header-search-btn { min-width: 100px; border-color: #03b3b2; background-color: #03b3b2; outline: none;height: 44px; vertical-align: top; color: white; font-size: 18px;}
.app-header-search-btn:focus, .app-header-search-btn:hover { border-color: #01c4c4; background-color: #01c4c4;outline: none; color: white; }
.app-header-userInfo-box {   padding-top: 23px;margin-left: 0px;}
.app-header-userInfo-btn { width: 75px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;text-align: left;}
.app-header-userInfo-btn:hover { color: #DDA560; }
.app-header-userInfo-btn,.app-header-userInfo-btn:focus { border: none; background-color: white; }
.btn-group.open .dropdown-toggle{-webkit-box-shadow:none ;box-shadow:none}
.app-header-user-icon{ width: 36px; height: 36px; border-radius: 50%; vertical-align: middle; }
.app-header-search-history { margin-top: 10px;}
.app-header-search-history > ul > li { float: left; cursor:pointer;}
.app-header-search-history > ul > li:hover { color: #DDA560;}
.app-header-search-history > ul > li:first-child a { color: #d99941;}
.app-header-search-history > ul > li + li { margin-left: 20px;}
.app-header-msApp-box { position: relative;  height: 22px; margin-top: 33px; cursor: pointer;}
.app-header-msApp-box .app-header-msApp-icon { display: inline-block; width: 22px; vertical-align: middle; height: 22px; background-image: url('../img/mss/gengduogongneng-02.png'); background-size: 100%; background-repeat: no-repeat;}
.app-header-msApp-box .app-header-msApp-title { font-size: 16px; vertical-align: middle;}
.app-header-msApp-box .app-header-msApp-info { display: block; position: absolute;top: 33px; left: -280px; z-index: 10; width: 655px; height: 405px;  background-color: white; border-radius: 3px; box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);padding: 35px; padding-bottom: 15px;}
.app-header-msApp-ident:hover .app-header-msApp-icon{ background-image: url('../img/mss/gengduogongneng-01.png');}
.app-header-msApp-ident:hover .app-header-msApp-title{color: #03b3b2;}

.app-header-login-btn { background-color: #03b3b2; min-width: 102px; border-radius: 20px; color: white; height: 40px;}
.app-header-login-btn:hover,.app-header-login-btn:focus { color: white;border-color: #01c4c4; background-color: #01c4c4; }
.app-container { min-height: calc(100vh - 455px); margin: 10px 0; }
.dropdown-menu{ min-width: 125px; text-align: center;transform: translateX(-40px) translateY(5px);}
.dropdown-menu li { padding-top: 10px; padding-bottom: 10px; }
.dropdown-menu li:hover { background-color:#f5f5f5 ; }
.app-header-dropdown-icon {display: inline-block;width: 10px;height: 10px;background-image: url('../img/mss/dropdown_icon.png');background-size: 100%;}
.app-header-dropdown-icon.active {background-image: url('../img/mss/drop_down_golden_icon.png');}
/* app-navbar */
.app-navbar { background-color: #03b3b2; height: 44px; margin-bottom: 10px;}
.app-navbar-box > li { float: left; font-size: 16px; color: white; cursor:pointer;}
.app-navbar-box > li a { display:inline-block; color: white; padding: 10px 14px;  }
.app-navbar-box > li.active { background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); }
.app-navbar-box > li:hover {background-color: #04c0c0;}
/* app-banner */
.app-banner img { width: 100%; height: 320px;}
.swiper-container{
    --swiper-pagination-color:white;/* 两种都可以 */
    --swiper-navigation-color: white;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 20px;/* 设置按钮大小 */
}
.swiper-pagination-bullet{ border: 1px solid white; }
.swiper-button-pri {padding:15px 17px 15px 13px; border-radius: 50%;}
.swiper-button-prev {padding:15px 17px 15px 13px;}
.swiper-button-next {padding:15px 13px 15px 17px;}
.swiper-button-pri:hover {background-color: rgba(0, 0, 0, 0.219);}

/* app-live */
.app-live { margin-bottom: 10px;}
.app-live-box {  width: 100%;margin-top: 20px; }
.app-live-item { width: 232px; display: inline-block;vertical-align: top; border-radius: 5px; position: relative;background-color: white; transition: transform 0.1s linear; cursor: pointer;}
.app-live-item + .app-live-item { margin-left: 5.5px; margin-bottom: 10px;}
.app-live-item:nth-of-type(5n - 4) {margin-left: 0;}
.app-live-item .app-live-imgbox {overflow: hidden}
.app-live-item .app-live-item-img {transition: all 0.5s ease}
.app-live .app-live-item:hover .app-live-item-img {transform: scale(1.15);}
.app-live .app-live-item:hover .app-live-play {opacity: 1;}
.app-live-tips { position: absolute; min-width: 80px; height: 25px; background-color: #ff5949; z-index: 9; border-top-left-radius: 5px;border-bottom-right-radius: 10px; top: -5px; padding: 0 8px;}
.app-live-tips-ending {background-color: #9d9d9d;}
.app-live-tips-ending .app-live-tips-icon {  width: 15px;}
.app-live-tips-icon { width: 20px; }
.app-live-tips-status { font-size: 12px; color: white;vertical-align: middle;}
.app-live-item-img {width: 100%;height: 130px; border-radius: 5px;}
.app-live-item-info {padding: 4px; height: 80px;}
.app-live-item-title { height: 42px; font-size: 14px; margin-bottom: 0px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;  display: -webkit-box;}
.app-live-item-other {height: 30px; font-size: 0;}
.app-live-item-talker { color:#ccc; font-size: 12px; display: inline-block;margin-top: 5px;width:120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.app-live-item-btn { width: 70px; height: 30px; font-size: 14px; color: white; background-color: #03b3b2; border: none; outline: none; border-radius: 5px; float: right; }
.app-live-item-subscribe { color: #03b3b2; background-color: white; border: 0.5px solid #ccc; outline: none;}
.app-live-item-subscribe:hover { background-color: #03b3b2; color: white; border: none;}

.app-live-imgbox {position: relative;cursor: pointer;}
.app-live-play {transition: opacity 0.2s linear; opacity: 0; position: absolute; width: 40px; height: 40px; background-image: url('../img/mss/icon.png'); background-position: -3px 44px;  line-height: 40px;left: 0; top: 0; right: 0; bottom: 0;margin: auto; border-radius: 50%; background-color: white;}
.app-live-item-other .app-live-item-price,.app-live-item-other .app-live-item-studynum { display: inline-block;width:112px;line-height: 30px;}
.app-live-item-price {color: tomato; font-size: 14px;  vertical-align: bottom; }
.app-live-item-studynum {color: #ccc; text-align: right;font-size: 14px; }
.app-more {float: right; font-size: 12px; color: rgb(131, 131, 131);margin-top: 10px;}



/* app-help */
.app-help-box {padding: 0 10px;margin-top: 20px;}
.app-help-item { width: 290px; margin-bottom: 65px; display: inline-block; vertical-align: top;}
.app-help-item + .app-help-item { margin-left: 148px;}
.app-help-box .app-help-item:nth-of-type(3n-2) {margin-left: 0;}
.app-help-divider {width: 100%; height: 3px;background-color: #03b3b2;}
.app-help-title { color: #03b3b2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.app-help-list { height: 250px; }
.app-help-list li { padding: 5px 0; width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;}
.app-help-list li:hover { color: #DDA560;}
.app-help-list li::before { content: ''; display: inline-block; width: 4px; height: 4px; background-color: #03b3b2; vertical-align: middle;margin-right: 5px;}

/* app-breadcrumb */
.app-breadcrumb-list {height: 21px; display: inline-block;}
.app-breadcrumb-list li {float: left;}
.app-breadcrumb-list li+li::before { content:'>'; display: inline;margin-right: 10px;margin-left: 10px;}

/* app-personal */
.app-personal-main {margin-top: 10px;margin-bottom: 30px; min-height: 80vh; display: flex; justify-content: space-between;}
.app-personal-left {  flex-basis: 280px; background-color: white; padding: 10px;padding-top: 15px;}
.app-personal-header .app-personal-icon { width: 60px; height:60px; border-radius: 50%;}
.app-personal-header .app-personal-name { font-size: 16px;}
.app-personal-header .app-personal-setting { border: 1px solid #03b3b2; background-color: white; color: #03b3b2; width: 50px; height: 24px; line-height: 20px; border-radius: 5px;margin-left: 85px;}
.app-personal-menu { margin-top: 10px; }
.app-personal-header .app-personal-setting:hover { background-color: #03b3b2; color: white;}

.app-personal-menu-item { padding-left: 20px;}

.app-personal-study-history {margin-top: 0; min-height: 680px;}
.app-personal-study-item { width:210px; border: 1px solid rgb(236, 236, 236); margin-bottom: 10px;}
.app-personal-study-item + .app-personal-study-item { margin-left: 11px;}
.app-personal-study-item:nth-of-type(4n - 3) {margin-left: 0;}
.app-personal-study-item:hover { box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.164); }
.app-personal-study-item .app-live-item-title { margin-bottom: 7px;}
.app-live-item-time {color: #ccc; font-size: 12px;display: inline-block; width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.app-personal-right { flex-basis: 910px;background-color: white; padding: 10px;}

/* app-school-content */
.app-school-tag-box { background-color: white;padding: 5px 10px; margin-top: 10px;}
.app-school-tag-box .active {color: white; background-color: #DDA560;}
.app-school-tag { display: inline-block; color:rgb(99, 99, 99); background-color:#F7F7F7; padding: 5px 15px; border-radius: 40px; cursor: pointer; margin: 10px 15px;}
.app-school-tag:hover { background-color: #DDA560; color: #FFF; }

.pagination{margin: 10px 0;}
.pagination_box{text-align: center;}
.pagination>li>a, .pagination>li>span {background-color: rgba(255, 255, 255, 0);border: none; color: rgb(136, 136, 136);}
.pagination>li>a:hover,.pagination>li>a:focus,.pagination>li.active>a,.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {background-color: #03b3b2; color: white;}
.page-bus { display: inline-block;line-height: 34px; margin-left: 10px;}
.page-input { width: 30px; height: 25px; border: 0.5px solid #ccc; vertical-align: middle;}
.page-input:active:focus,.page-input:focus{outline: none;}

/* app-products */
.app-products { background-color: white; padding: 10px 0 5px;}
.app-products-link:hover { transform: translateY(-2px); box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.329); }
.app-products-item>span { padding: 0 10px; color: #646464;}
.app-products-name { color:#03b3b2}
.app-products-link { display: inline-block; height: 45px;border: 1px solid rgb(228, 228, 228); overflow: hidden; margin-right: 30px;}
.app-products-logo { width: 45px;height: 45px; vertical-align: middle;}


/* app-footer */
.app-footer { color: #fff; background-color: #363636; border-bottom: 10px solid #03b3b2; }
.app-footer h2 { text-align: center; }
.app-footer .address { margin-top: 10px; color: #797979; text-align: center; }
.app-footer .about>div h4 { color: #dcdcdc; font-size: 14px; margin-bottom: 10px; }
.app-footer .about>div>ul>li { color: #797979; padding-top: 5px; padding-bottom: 5px; }
.app-footer .copyright { margin-top: 5px; margin-bottom: 10px; text-align: center; color: #797979; }
.app-footer .copyright a { color: #797979; }

/* fixed-toolbar */
.fixed-toolbar { position: fixed; right: 1%; bottom: 50px; font-size: 24px; z-index: 99999 }
.fixed-toolbar.xpzs>img { width: 65px;}
.fixed-toolbar>div { display: block; margin-bottom: 2px; background-color: #ababab; color: #eee; font-size: 25px; line-height: 50px; text-align: center; text-decoration: none; bottom: 20px; right: 20px; width: 50px; height: 50px; border: none; opacity: .8; border-radius: 4px; }
.fixed-toolbar.xpzs > div { height: auto; background: white; box-shadow: #9e9fb8 2px 2px 10px; width: 100%; border-radius: 0; margin-top: -1px; opacity: 1; }
.fixed-toolbar.xpzs > div > div { border: 1px solid #ececec; width: 65px; height: 70px; cursor: pointer; color: #383e5c; position: relative; transition: background-color 0.3s ease, color 0.3s ease; }
.fixed-toolbar.xpzs > div > div:hover { background-color: #fa5930; color: white; }
.fixed-toolbar.xpzs > div > div:hover>span{ color: white; }
.fixed-toolbar.xpzs > div  span { display: inline-block; margin-top: 27px; font-size: 16px; color: #666}
.fixed-toolbar.xpzs .cos { background: url(../img/xpzs/cos.png) center 20% no-repeat; background-size: 45%; }
.fixed-toolbar.xpzs .cos:hover { background-image: url(../img/xpzs/cos-w.png); }
.fixed-toolbar.xpzs .users { background: url(../img/xpzs/users.png) center 20% no-repeat; background-size: 45%; }
.fixed-toolbar.xpzs .users:hover { background-image: url(../img/xpzs/users-w.png); }
.fixed-toolbar.xpzs .top { background: url(../img/xpzs/top.png) center 20% no-repeat; background-size: 30%; }
.fixed-toolbar.xpzs .top:hover { background-image: url(../img/xpzs/top-w.png); }
.fixed-toolbar.xpzs .phone { background: url(../img/xpzs/phone.png) center 20% no-repeat; background-size: 40%; }
.fixed-toolbar.xpzs .phone:hover { background-image: url(../img/xpzs/phone-w.png); }
.fixed-toolbar.xpzs .toolbar-tips { position: absolute; top: 0; left: -185px; width: 180px; background: white; box-shadow: 0 0 5px #ccc; font-size: 16px; text-align: center; border-radius: 5px; color: #383e5c; display: none; transition: all 0.1s ease; }
.fixed-toolbar.xpzs .toolbar-tips-header { border-bottom: solid 1px #eee; line-height: 35px; }
.fixed-toolbar.xpzs .toolbar-tips .btn { color: white; background: #fa5930; width: 160px; height: 38px; line-height: 25px; display: inline-block; }
.fixed-toolbar.xpzs .toolbar-tips img { width: 90%; }
.fixed-toolbar.xpzs > div > div:hover .toolbar-tips { display: inline-block; }
.navbar-nav-dd .btn-nav { padding: 8px 25px !important; }

/* page-video_detail */
.app-video-info-header { padding: 10px; background-color: white; transition: all 0.5s ease}
.app-video-info-header.play-video { padding: 0}
.app-video-info-header > div {display: inline-block;}
.app-video-info-img{ width: 45%; vertical-align: top; transition: all 0.5s ease}
.play-video .app-video-info-img{ width: 100%;}
.app-video-img{width: 100%;}
.app-video{width: 100%;}
.app-video-info-header .app-live-play { opacity: 1;}
.app-video-info-desc{ min-width: 45%; padding-left: 30px; transition: all 0.5s ease}
.play-video .app-video-info-desc{ width: 100%;}
.app-video-info-desc>h3 { margin-top: 33px;margin-bottom: 12px;}
.app-video-info-tag { padding: 1px 12px; border: 1px solid tomato; color: tomato; border-radius: 5px;}
.app-video-info-timer{margin-top: 27px; font-size: 18px; transition: all 0.5s ease}
.app-video-info-talker{font-size: 18px; transition: all 0.5s ease}
.play-video .app-video-info-timer,.play-video .app-video-info-talker{font-size: 16px; display: inline-block; margin: 5px 20px}
.app-video-info-article { margin-top: 15px;}

.app-video-info-main { background-color: white; margin-top: 20px;margin-bottom: 30px; min-height: 500px; padding: 10px 20px;}
.app-video-info-tabbar::after{content: '';clear: both;}
.app-video-info-tabbar > li{ float: left; padding: 15px; background-color: white; font-size: 18px; cursor: pointer;}
.app-video-info-tabbar > li.active { border-bottom: 2px solid #DDA560; color: #DDA560; font-weight: bold;}
.app-video-info-tabbar:hover {color: #DDA560;}
.app-video-info-tab-pane { display: none; margin-top: 60px;padding-top: 10px;}
.app-video-info-tab-pane-box .active {display: block;}
.app-video-info-list {padding: 10px 18px; background-color: rgb(245, 245, 245);margin-bottom: 10px; cursor: pointer;}
.app-video-info-list:hover {color: #DDA560;}
.app-video-info-list-timer {float: right;color: #999999;margin-right: 23px;}
.app-video-info-list-play { float: right;padding: 0px 10px;border: 1px solid #03b3b2;border-radius: 5px;color: #03b3b2; margin-left: 10px; width: 68px;}
.app-video-info-list-play span{ display: inline-block; width: 12px;height: 16px;vertical-align: middle;  background-image: url('../img/mss/player.png');background-size: 100%;background-repeat: no-repeat;margin-right: 0px;}
.app-video-info-list-play:hover {background-color: #03b3b2;color: white;}
.app-video-info-list-play:hover span { background-image: url('../img/mss/player_white.png');}
.app-video-info-list.active { color: #DDA560;}
.app-video-info-list.active .app-video-info-list-play {background-color: #03b3b2;color: white;padding: 0 5px;}
.app-video-info-list.active img {display: none;}

/* page-article_detail */
.app-article-main {margin:0 0 10px; height: 80vh; display: flex; justify-content: space-between;}
.app-article-left { width: 280px; background-color: white; padding: 10px; overflow-y: auto;}
.app-article-right { width: 910px;background-color: white; padding: 20px; }
.app-article-right h3 { margin: 0;margin-bottom: 10px; padding: 0;padding-bottom: 10px; border-bottom: 2px solid #03b3b2;}
.app-article-img-detail { width:100%; height: calc(80vh - 80px);overflow-y: auto;}
.app-article-img-detail img { max-width: 100%; height: auto !important;}

/* apge-search */
.app-search-num { float:right; margin: 0;}
.app-search-num .search-text,.app-search-num .search-result-num { color: #DDA560; }
.search-result-item { height: 50px; margin-bottom: 2px; background-color: white;line-height: 50px;padding-left: 10px; z-index: 1; position: relative;}
.search-result-tag { padding: 5px 11px; border-radius: 20px; background-color: #FFF4E5; color: #DDA560; margin-right: 10px; vertical-align: middle;}
.search-result-tag-video { background-color: #DDA560; color: #FFF4E5;}
.search-result-title { display: inline-block; width: 560px; margin-right: 180px; white-space: nowrap; overflow: hidden; vertical-align: middle; text-overflow: ellipsis;}
.search-result-price { font-size: 12px; color: tomato;}
.search-result-heat { font-size: 12px; color: #9D9D9D;}
.search-result-item:hover { box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);color: #DDA560; cursor: pointer;z-index: 2;}
.search-result-item .app-video-info-list-play { height: 25px;line-height: 24px; margin-top: 12px;margin-right: 10px;}
.search-result-item a { width: 100%;height: 100%;display: inline-block;}
.search-result-is-article { padding: 0; text-align: center;}
.search-result-box .app-video-info-list-play span{ background-position-y: 5px;height: 25px;}
.search-text-highlight { color: #03b3b2; }
.app-personal-study-history .search-result-title {width: 435px}
/* page-video-list */
.video-list .app-live-box{
    margin-top: 0;
}

.h3, h3 {
    font-size: 24px;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}
.h4, h4 {
    font-size: 18px;
}
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
p {
    margin: 0 0 10px;
}