@charset "utf-8";

.index-banner-layer .banner-intro-title,
.sys-layer-head .layer-head-title,.sys-web-head .top-user-name{font-family: 'MiSans-Medium';font-weight: 500;}

/* 简单文字提示 */
.sys-simple-tips{display: inline-block;background-color: #000;color: #fff;font-size: 16px; border-radius: 4px;padding: 5px 12px;}

/* ------------------------------ 页眉 ------------------------------- */
.sys-web-head{width: 100%;position: fixed;left: 0;top: 0;z-index: 3;}
.sys-web-head .web-head-layer{ padding: 18px 0;background-color: #fff;z-index: 3;position: relative;}
.sys-web-head .head-layout{display: flex;align-items: center;padding: 0 32px;}
.sys-web-head .head-logo,
.sys-web-head .head-nav,
.sys-web-head .head-search{display: inline-block;vertical-align: middle;}
.sys-web-head .head-logo{margin-right: 14px;}
.sys-web-head .head-logo .logo-img{width: auto;height: 28px;}
.sys-web-head .head-search{width: 400px;}
.sys-web-head .head-search-form{position: relative;display: flex;align-items: center;padding: 4px 4px 4px 24px;background-color: #F2F3F5;border-radius: 3em;}
.sys-web-head .head-search .head-search-ipt{display: block;height: 36px; line-height: 36px;border: 0;outline: 0;font-size: 13px;background: none;min-width: 0;flex: 1;}
.head-search-ipt:focus::-webkit-input-placeholder{color:rgba(0,0,0,0);}
.head-search-ipt:focus::-moz-placeholder{color:rgba(0,0,0,0);}
.head-search-ipt:focus:-ms-input-placeholder{color:rgba(0,0,0,0);}
input.head-search-ipt:focus:-moz-placeholder{color:rgba(0,0,0,0);}
.sys-web-head .head-search .head-search-btn{width: 36px;height: 36px;border-radius: 50%;background-color: #0056d2;background-repeat: no-repeat;background-position: center;background-size: 66.6667% auto; background-image: url(../img/head-search-ico.png);outline: 0;border: 0;}
.sys-web-head .head-right{text-align: right;flex: 1;min-width: 0;}
.sys-web-head .head-login{}
.sys-web-head .head-login-btn,.sys-web-head .head-reg-btn{display: inline-block;vertical-align: middle; line-height: 36px;border-radius: 8px;padding: 0 22px;}
.sys-web-head .head-reg-btn{color: #fff; background-color: #0056d2;}
.sys-web-head .head-reg-btn{position: relative;overflow: hidden;transform: scale(1);}
.sys-web-head .head-reg-btn::before,
.sys-web-head .head-reg-btn::after{content: '';display: block;position: absolute;transition: all 0.4s ease;}
.sys-web-head .head-reg-btn::before{width: 31px;height: 31px;background: rgba(26, 107, 219, 0.9);border-radius: 50%;left: -5%;bottom: 60%; z-index: -1;}
.sys-web-head .head-reg-btn::after{width: 69px;height: 69px;background: rgba(26, 107, 219, 0.6);border-radius: 50%;right: -5%;top: 40%; z-index: -1;}
.sys-web-head .head-reg-btn:hover::before{transform: scale(8);background: #0056d2;}
.sys-web-head .head-reg-btn:hover::after{transform: scale(3);background: #0056d2;}
.sys-web-head .user-nav-quicks{display: flex;justify-content: flex-end;align-items: center;position: relative;}
.sys-web-head .user-quick-item+.user-quick-item{margin-left: 12px;}
.sys-web-head .user-quick-item .quick-item-btn{display: block;margin: -15px 0;padding:15px 4px;}
.sys-web-head .user-quick-msg-ico{display: inline-block;width: 36px;height: 36px;background-repeat: no-repeat;background-position: center; background-size: 28px auto;background-image: url(../img/head-ico-msg.png);position: relative;cursor: pointer;}
.sys-web-head .user-quick-msg-ico::before{content: '';display: block;width: 6px;height: 6px;border: 2px solid #fff;background-color: #EB5959; border-radius: 50%;position: absolute;right: 6px;top: 5px;}
.sys-web-head .user-quick-avatar{display: block;cursor: pointer}
.sys-web-head .user-quick-avatar,
.sys-web-head .user-quick-avatar img{border-radius: 50%;width: 36px;height: 36px;}
.sys-web-head .top-quicks-drop{background-color: #fff;position: absolute;right: 0;top: 100%;margin-top: 16px;border: 1px solid #e3e3e3;box-shadow: 4px 6px 24px rgba(73, 87, 107, 0.4);padding: 16px 20px;border-radius: 8px;text-align: left;opacity: 0;visibility: hidden;transition: all 0.3s ease;pointer-events: none;}
.sys-web-head .user-quick-item:hover .top-quicks-drop{opacity: 1;visibility: visible;pointer-events: inherit;}
/* 消息下拉 */
.sys-web-head .top-msg-drop{padding: 10px 0;width: 460px;}
.sys-web-head .top-msg-inner{padding: 0 16px;overflow: hidden;overflow-y: auto;max-height: calc(80vh - 121px);}
.sys-web-head .top-msg-list{}
.sys-web-head .top-msg-item{padding: 16px 0 12px 14px;}
.sys-web-head .top-msg-item+.top-msg-item{border-top: 1px solid #e3e3e3;}
.sys-web-head .top-msg-item:hover .top-msg-tit::before{background-color: #F56342;}
.sys-web-head .top-msg-tit{font-size: 15px;position: relative;}
.sys-web-head .top-msg-tit a{display: inline-block;vertical-align: middle;}
.sys-web-head .top-msg-tit::before{content: '';display: block;width: 5px;height: 5px;background-color: #ccc;border-radius: 50%;margin-left: -14px;top: 8px; position: absolute;transition: all 0.3s ease;}
.sys-web-head .top-msg-desc,.sys-web-head .top-msg-desc a{color: #444;}
.sys-web-head .top-msg-time{text-align: right;color: #999;}
/* 用户信息下拉 */
.sys-web-head .user-nav-drop{width: 220px;}
.sys-web-head .top-user-box{text-align: center;margin-bottom: 12px;}
.sys-web-head .top-user-box .top-user-avatar{margin: 0 auto;}
.sys-web-head .top-user-box .top-user-avatar,
.sys-web-head .top-user-box .top-user-avatar img{width: 48px;height: 48px;border-radius: 50%;}
.sys-web-head .top-user-box .top-user-name{font-size: 15px;margin-top: 8px;}
.sys-web-head .top-user-menu li{line-height: 25px;}
.sys-web-head .top-user-menu li a{display: block;padding: 5px 0;}
.sys-web-head .user-nav-foot{border-top: 1px solid #ddd;padding-top: 10px;margin-top: 10px;}
.sys-web-head .user-nav-logout{display: inline-flex;align-items: center;padding: 0 1em 0 0;}
.sys-web-head .user-nav-logout::before{content: '';display: inline-block;width: 12px;height: 12px;background-repeat: no-repeat;background-position: center;background-size: contain;background-image: url(../img/head-ico-logout.png);margin-right: 10px;}
/* 美化滚动条 */
.sys-web-head .top-msg-inner::-webkit-scrollbar { width: 8px;background-color: #f9f9f9;}
.sys-web-head .top-msg-inner::-webkit-scrollbar-thumb {background-color: #e3e3e3; border-radius: 6px; border: 2px solid #fff;}
.sys-web-head .top-msg-inner::-webkit-scrollbar-track {background-color: #fff;border-radius: 6px;}
/* 顶部导航下拉菜单 */
.sys-web-head .head-nav{position: relative;}
.sys-web-head .head-nav-toggle{display: inline-flex;align-items: center; color: #617CAD; line-height: 30px;font-size: 13px;padding: 0 10px; vertical-align: middle;border: 1px solid;border-radius: 8px;margin-right: 32px;cursor: pointer;transition: all 0.3s ease;}
.sys-web-head .toggle-ico-down{display: inline-flex;width: 11px;height: 11px;position: relative;margin-left: 6px;}
.sys-web-head .toggle-ico-down::before{content: '';display: block;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: contain;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAC7SURBVCiRpc+9DcIwEIbh95wFMoJHyAqMgLKAYQM6FFEQCRAlE4BrJJQRskpGYICQo+IvgDHwtvfpkU7Gs0OliNVWhn49bPgyV+wzMUmtSumX+cYokoJmknS1m1b2FwxIUY4ARlsZoTQI9hv0HhMo/Sr3AALgppWVpKsRLEqjJzMIvd/Htot8frnJdRSJhrAHMAb9hD2BITQGewm+REUnguw+YW/BJ/Q2DmJBsI/GYFG5eZW6Yp/9Df3aGQR2fGgXgY4fAAAAAElFTkSuQmCC); transition: all 0.3s ease;}
.sys-web-head .head-nav-active .head-nav-toggle,
.sys-web-head .head-nav-toggle:hover{background-color: #617CAD;color: #fff;}
.sys-web-head .head-nav-active .head-nav-toggle .toggle-ico-down::before,
.sys-web-head .head-nav-toggle:hover .toggle-ico-down::before{ filter: brightness(0%) invert(100%);}
.head-cate-drop{width: 1104px;border: 1px solid #e3e3e3;box-shadow: 4px 6px 24px rgba(73, 87, 107, 0.4);background-color: #fff; padding: 16px 20px;border-radius: 8px;padding: 8px 0 8px 0;min-height: 30vh;z-index: 3;position: absolute;left: 0;top: 100%;margin-top: 16px;transition: all 0.15s ease;}
.head-cate-drop .cate-drop-inner{display: flex;overflow: hidden;overflow-y: auto;}
.head-cate-drop .cate-nav-tabs{width: 72px;padding:0 16px;display: flex;flex-direction: column;align-items: center;}
.head-cate-drop .cate-nav-tab-item{padding: 12px 4px;opacity: 0.5;display: flex;align-items: center;cursor: pointer;flex: 1;display: flex;align-items: center;}
.head-cate-drop .cate-nav-tab-item .tab-item-inner{display: flex;flex-direction: column;align-items: center;}
.head-cate-drop .cate-nav-tab-item .tab-item-ico{display: block;width: 32px;height: 32px;background-repeat: no-repeat;background-position: center;background-size: contain;}
.head-cate-drop .cate-nav-tab-item .tab-ico-online{background-image: url(../img/index/index-layer-ico-online.png);}
.head-cate-drop .cate-nav-tab-item .tab-ico-train{background-image: url(../img/index/index-layer-ico-train.png);}
.head-cate-drop .cate-nav-tab-item .tab-item-txt{width: 18px;font-size: 18px;width: 18px;line-height: 1.3;margin: 5px auto;}
.head-cate-drop .cate-nav-tab-item.tab-item-active{opacity: 1;}
.head-cate-drop .cate-nav-tab-item+.cate-nav-tab-item{border-top: 2px solid #ddd;}
.head-cate-drop .cate-nav-body{flex: 1;min-width: 0;display: flex;}
.head-cate-drop .cate-nav-items{width: 228px;border-radius: 12px;background-color: #EDF0F5;;padding: 24px 16px;}
.head-cate-drop .cate-nav-item-inner{display: block;padding: 8px;border-radius: 8px;display: flex;align-items: center;}
.head-cate-drop .cate-nav-item+.cate-nav-item{margin-top: 16px;}
.head-cate-drop .cate-nav-item .cate-item-img,
.head-cate-drop .cate-nav-item .cate-item-img img{width: 32px;height: 32px;border-radius: 50%;}
.head-cate-drop .cate-nav-item .cate-item-img{margin-right: 10px;}
.head-cate-drop .cate-nav-item .cate-item-txt{flex: 1;min-width: 0;font-size: 16px;}
.head-cate-drop .cate-nav-item.item-active .cate-nav-item-inner,
.head-cate-drop .cate-nav-item:hover .cate-nav-item-inner{background-color: #fff;color: inherit;}
.head-cate-drop .cate-item-menus{padding:0 24px 16px 24px; flex: 1;min-width: 0;}
.head-cate-drop .cate-menus-head{display: flex;align-items: center;justify-content: space-between;padding: 16px 0;}
.head-cate-drop .cate-menus-head .menus-head-title{font-size: 22px;font-weight: bold;}
.head-cate-drop .cate-menus-head .sys-btn-plain{line-height: 1.9em;}
.head-cate-drop .cate-menus-cells{display: flex;flex-wrap: wrap;margin: 0 -20px;}
.head-cate-drop .cate-menus-cell{width: 33.33333333%;padding: 12px 20px;}
.head-cate-drop .cate-menus-cell-hd{font-size: 16px;font-weight: bold; border-bottom: 1px solid #ddd;padding-bottom: 8px;margin-bottom: 8px;}
.head-cate-drop .cate-menus-cell-list{}
.head-cate-drop .cate-menus-cell-list .menu-cell-item{margin: 0 -8px;padding: 3px 0;}
.head-cate-drop .cate-menus-cell-list .menu-cell-inner{display: flex;width: 100%;align-items: center;padding: 8px;border-radius: 8px;transition: all 0.3s ease;}
.head-cate-drop .cate-menus-cell-list .menu-cell-inner:hover{background-color: #EDF0F5;}
.head-cate-drop .cate-menus-cell-list .menu-cell-img,
.head-cate-drop .cate-menus-cell-list .menu-cell-img img{width: 32px;height: 32px;border-radius: 4px;}
.head-cate-drop .cate-menus-cell-list .menu-cell-tit{padding-left: 8px;flex: 1;min-width: 0;max-height: 3em;line-height: 1.5em;overflow: hidden;isplay: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}
.head-cate-drop .cate-menu-foot{padding:8px 0 16px 33.33333333%;}
.head-cate-drop .cate-menu-foot .sys-btn{margin-left: 12px;color: #EDF0F5;}
.head-cate-drop{opacity: 0;visibility: hidden;}
.head-nav-active .head-cate-drop{opacity: 1;visibility: visible;}
.sys-web-head::before{content: '';display: block;width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 2;background-color: rgba(0,0,0,0.5);opacity: 0;visibility: hidden;transition: all 0.3s ease;}



/* ------------------------------ 页底 ------------------------------- */
.sys-web-foot {padding: 88px 0 40px;border-top: 1px solid #e3e3e3;}
.sys-web-foot .foot-inner{display: flex;padding: 0 16px;width: 100%;justify-content: space-between;}
.sys-web-foot .foot-nav-item{display: inline-block;vertical-align: top;}
.sys-web-foot .foot-left{width: 30.3%;}
.sys-web-foot .foot-logo{margin-bottom: 45px;}
.sys-web-foot .foot-logo .logo-img{width: auto;height: 38px;}
.sys-web-foot .foot-contact-item{display: flex;font-weight: 500;margin-bottom: 20px;}
.sys-web-foot .foot-contact-item .contact-item-ico{display: inline-block;width: 14px;height: 14px;background-repeat: no-repeat;background-size: contain;margin-top: 4px;}
.sys-web-foot .foot-contact-item .contact-ico-email{background-image: url(../img/foot-ico-email.png);}
.sys-web-foot .foot-contact-item .contact-ico-telphone{background-image: url(../img/foot-ico-telphone.png);}
.sys-web-foot .foot-contact-item .contact-item-txt{flex: 1;min-width: 0;padding-left: 9px;font-weight: 600;}
.sys-web-foot .foot-nav{float: left;flex: 1;min-width: 0;max-width: 60%;padding-right: 8%;}
.sys-web-foot .foot-nav-item{width: 30%;padding-right: 3%;}
.sys-web-foot .foot-nav-tit{font-size: 16px;margin-bottom: 2em;}
.sys-web-foot .foot-nav-menu li{margin-bottom: 0.5em;}
.sys-web-foot .foot-nav-menu li a{display: inline-block;line-height: 1.8em;position: relative; vertical-align: middle;padding-right: 0.6em;}
.sys-web-foot .foot-nav-menu li a::after{content: '';display: block;width: 0%;height: 1px;position: absolute;right: 0;bottom: 0;transition: all 0.3s ease;background-color: currentColor;}
.sys-web-foot .foot-nav-menu li a:hover::after{width: 100%;left: 0;right: auto;}
.sys-web-foot .foot-qrcodes{float: right;display: flex;}
.sys-web-foot .foot-qrcode-item{width: 100px;text-align: center;display: inline-block;vertical-align: top;}
.sys-web-foot .foot-qrcode-item+.foot-qrcode-item{margin-left: 40px;}
.sys-web-foot .foot-qrcode-item .qrcode-item-img{border: 1px solid #d3d3d3;}
.sys-web-foot .foot-qrcode-item .qrcode-item-txt{margin-top: 8px;}
.sys-web-foot .foot-copyright{clear: both;width: 100%;text-align: center;margin-top: 60px;}
.sys-web-foot .foot-copyright,
.sys-web-foot .foot-copyright a{color: rgba(0,0,0,0.4);}
.sys-web-foot .foot-copyright a:hover{color: #0056D2;}



/* ------------------------------ 登录弹窗 ------------------------------- */
.login-pop{width: 100%;height: 100%;background-color: rgba(0,0,0,0.6);position: fixed;left: 0;top: 0;z-index: 9;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.login-pop-wrap{ width: 1080px;margin: 0 auto;display: flex;align-items: center;background-color: #fff;border-radius: 16px;overflow: hidden;}
.login-pop-wrap .login-pop-left{width: 57.59%;}
.login-pop-wrap .login-pop-img{width: 100%;height: auto;float: left;}
.login-pop-wrap .login-pop-main{padding: 5%;text-align: center;float: right;flex: 1;min-width: 0;}
.login-pop-wrap .login-pop-title{font-size: 2.1428em;margin-bottom: 44px;text-align: center;display: flex;justify-content: center;align-items: center;margin-bottom: 44px;font-family: 'MiSans-Medium';}
.login-pop-wrap .login-pop-title::before{content: '';display: inline-block;width: 28px;height: 28px;background-repeat: no-repeat;background-position: center;background-size: contain;background-image: url(../img/login-qrcode-ico.png);margin-right: 9px;}
.login-pop-wrap .login-qrcode-box{}
.login-pop-wrap .login-qrcode-box .qrcode-box-img{border: 1px solid #ddd;border-radius: 4px;width: 208px;margin: 0 auto 8px;}
.login-pop-wrap .login-qrcode-box .qrcode-box-txt{color: #999;}
.login-pop-wrap .login-pop-agree{margin-top: 63px;text-align: center;color: #666;display: flex;justify-content: center;align-items: center;}
.login-pop-wrap .login-pop-agree a{color: #0056D2;}
.login-pop-wrap .login-pop-agree input{margin-right: 0.3em;vertical-align: middle;}
.login-pop.pop-active{opacity: 1;visibility: visible;}
.login-pop.pop-active .login-pop-wrap{transform: none;}



/* ==============================================
                                * PAGE: 首页
                                ---------------------------------------------- */
.index-layer{margin-bottom: 88px;}

/* 首屏 */
.index-banner-layer .banner-layer-inner{display: flex;align-items: center;width: 100%;justify-content: space-between;}
.index-banner-layer .banner-layer-intro{width: 39%;float: left;}
.index-banner-layer .banner-layer-intro .banner-intro-title{font-size: 4em; line-height: 1.32;margin-bottom: 6px;}
.index-banner-layer .banner-layer-intro .banner-intro-desc{min-height: 6em;margin-bottom: 1.35em;}
.index-banner-layer .banner-layer-intro .banner-qrcode-img{width: auto;height: 100px;vertical-align: middle;}
.index-banner-layer .banner-layer-slider{width: 53.125%;float: right;padding: 0 12px 12px 0;}
.index-banner-layer .banner-slider-inner{position: relative;}
.index-banner-layer .banner-slider-inner::before{content: '';display: block;width: 100%;height: 100%;position: absolute;right: -12px;bottom: -12px;background-color: #D5DBE3;border: 1px solid #ddd;border-radius: 16px;}
.index-banner-layer .banner-slider-wrap{border-radius: 16px;overflow: hidden;position: relative;z-index: 1;}
.index-banner-layer .banner-slider-img{width: 100%;padding: 59% 0 0;position: relative; }
.index-banner-layer .banner-slider-img img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;transition: all 0.9s ease;}
.index-banner-layer .banner-slider-img:hover img{transform: scale(1.05);}

/* 标题栏 */
.sys-layer-head{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1em;}
.sys-layer-head .layer-head-left{float: left;display: inline-flex;align-items: center;}
.sys-layer-head .layer-head-ico{display: inline-block;width: 32px;height: 32px;background-repeat: no-repeat;background-position: center;background-size: contain;vertical-align: middle;margin-right: 8px;}
.sys-layer-head .layer-ico-online{background-image: url(../img/index/index-layer-ico-online.png);}
.sys-layer-head .layer-ico-train{background-image: url(../img/index/index-layer-ico-train.png);}
.sys-layer-head .layer-ico-tag{background-image: url(../img/index/index-layer-ico-tag.png);}
.sys-layer-head .layer-head-title{display: inline; font-size: 2.2857em;}
.sys-layer-head .layer-head-right{float: right;}
.sys-layer-body{clear: both;}


/* 课程推荐 */
.sys-course-items{display: flex;flex-wrap: wrap;margin: 0 -10px;}
.sys-course-item{width: 25%;float: left;display: flex;padding: 8px;}
.sys-course-item .course-item-inner,
.sys-course-item .course-item-img,
.sys-course-item .course-item-img img{border-radius: 16px;}
.sys-course-item .course-item-img a{display: block;}
.sys-course-item .course-item-inner{width: 100%; background-color:#fff;border: 1px solid #e3e3e3;padding: 5px;transition: all 0.3s ease;position: relative;}
.sys-course-item .course-item-inner::before{content: '';display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-image: linear-gradient(to bottom,#F8F9FB,#F2F4F7);transition: all 0.3s ease;border-radius: 16px;}
.sys-course-item .course-item-inner:hover{background: #fff;border-color: #0056D2;box-shadow:4px 6px 24px  rgba(73,87,107,0.2);transform: scale(1.03);}
.sys-course-item .course-item-inner:hover::before{opacity: 0;}
.sys-course-item .course-item-img,
.sys-course-item .course-item-cont{position: relative;z-index: 1;}
.sys-course-item .course-item-img{padding: 63% 0 0;position: relative;}
.sys-course-item .course-item-img img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.sys-course-item .course-item-cont{padding: 16px 11px 11px;}
.sys-course-item .course-item-info{min-height: 85px;padding-bottom: 18px;}
.sys-course-item .course-item-tit{font-size: 1.2857em;line-height: 1.3em;max-height: 2.6em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;margin-bottom: 6px;font-weight: bold;}
.sys-course-item .course-item-desc,.sys-course-item .course-item-desc a{color: #666;}
.sys-course-item .sys-course-tag{margin-bottom: 0;}

/* tag */
.sys-course-tags{margin:0 -10x -10px 0;}
.sys-course-tag{display: inline-flex;align-items: center; vertical-align: middle;background-color: #A5B1C7;color: #fff; border-radius: 2em;padding: 2px 8px;margin: 0 10px 10px 0;}
.sys-course-tag .tag-ico{display: inline-block;vertical-align: middle; width: 16px;height: 16px;background-repeat: no-repeat;background-position: center;background-size: contain;margin-right: 5px;}
.sys-course-tag .tag-ico-online{background-image: url(../img/tag-ico-online.png);}
.sys-course-tag .tag-ico-train{background-image: url(../img/tag-ico-train.png);}

/* 热门标签 */
.sys-tags-panel{background-color: #414E63;border-radius: 16px;padding: 35px 0;position: relative;overflow: hidden;}
.sys-tags-panel .tags-marquee-list{display: flex;padding: 5px 0;}
.sys-tags-panel .tags-marquee-wrap{height: 88px;position: relative;overflow: hidden}
.sys-tags-panel .tags-marquee-wrap+.tags-marquee-wrap{margin-top: 18px;}
.sys-tags-panel .tags-marquee-item{ width: 320px; height: 78px;float: left;background-color: rgba(255,255,255,0.2); border-radius: 8px;margin-right: 20px;overflow: hidden;transition: all 0.3s ease; box-shadow: 0 0 0 6px #414E63;}
.sys-tags-panel .tags-marquee-item .tag-item-inner{display: flex;align-items: center;}
.sys-tags-panel .tags-marquee-item .tag-item-img{width: 100px;height: 78px;}
.sys-tags-panel .tags-marquee-item .tag-item-img img{height: 100%;height: 78px;object-fit: cover;}
.sys-tags-panel .tags-marquee-item .tag-item-info{padding:8px 18px;flex: 1;min-width: 0;}
.sys-tags-panel .tags-marquee-item .tag-item-tit {width: 100%; font-size: 1.42857em;height: 1.3em;line-height: 1.3em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500;}
.sys-tags-panel .tags-marquee-item .tag-item-tit,
.sys-tags-panel .tags-marquee-item .tag-item-tit a{color: #fff;}
.sys-tags-panel .tags-marquee-item .tag-item-desc{color: rgba(255,255,255,0.7);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.sys-tags-panel .tags-marquee-item:hover{box-shadow: 0 0 0 1px rgba(255,255,255,1);}
.tags-marquee-inner {display: flex;flex-wrap: nowrap;}


/* ==============================================
                                * PAGE: 课程列表
                                ---------------------------------------------- */
.page-course-list{background-color: #EDF0F5;background-image: linear-gradient(to right,#EDF0F5,#EDF0F5 50%,#fff 50%);padding-top: 121px;}
.page-course-list .page-body{display: flex;justify-content: space-between;}
.page-course-list .sys-web-foot{background-color: #fff;margin-left: 280px;}
.page-course-list .foot-layout{width: 100%;padding: 0 8.6%;max-width: 100%;}
.page-course-list .sys-web-foot .foot-inner{padding: 0 8px;}
.page-course-list .sys-web-foot .foot-left{width: 28.5%;}
.page-course-list .sys-web-foot .foot-nav{padding-right: 3.2%;}

/* 面包屑 */
.sys-breadcrumb {padding: 8px;line-height: 24px;background-color: #F7F9FC;border-top: 1px solid #e3e3e3;}
.sys-breadcrumb .breadcrumb-nav{padding-left: 32px;}
.sys-breadcrumb .breadcrumb-nav .breadcrumb-item,.sys-breadcrumb .breadcrumb-nav .breadcrumb-item a{color: #5C769E;}
.sys-breadcrumb .breadcrumb-nav a:hover{color: var(--color-primary);}
.breadcrumb-nav{display: flex;}
.breadcrumb-nav .breadcrumb-item{padding-right: 10px;display: inline;}
.breadcrumb-nav .breadcrumb-item+.breadcrumb-item{margin-left: -2px;}
.breadcrumb-nav .breadcrumb-item+.breadcrumb-item:before{content: '>';padding-right: 10px;display: inline-block;vertical-align: top;transform: scale(0.8,1.2);}
.breadcrumb-nav .breadcrumb-item,.breadcrumb-nav .breadcrumb-item a{color: #666;}


/* 左侧栏 */
.course-list-aside{width: 280px;}
.course-list-nav-item{margin-bottom: 12px;border-radius: 8px;position: relative;overflow: hidden;}
.course-list-nav-item .list-nav-item-hd{display: flex;align-items: center;padding:12px 12px;transition: all 0.3s ease;}
.course-list-nav-item .list-nav-item-hd:hover{color: #000;background-color: rgba(255,255,255,0.6);}
.course-list-nav-item .list-nav-item-img,
.course-list-nav-item .list-nav-item-img img{width: 40px;height: 40px;border-radius: 50%;}
.course-list-nav-item .list-nav-item-tit{flex: 1;min-width: 0;font-size: 16px;font-weight: 500; padding-left: 12px;}
.course-list-nav-item .list-nav-item-menu{line-height: 35px;display: none;padding:0 10px 10px;margin-top: -10px;}
.course-list-nav-item .list-nav-item-menu,
.course-list-nav-item .list-nav-item-menu a{color: #666;}
.course-list-nav-item .list-nav-item-menu a{display: block;position: relative;}
.course-list-nav-item .list-nav-item-menu a::before{content: '';display: block;width: 4px;height: 4px;position: absolute;left: -12px;top: 15px;border-radius: 50%;}
.course-list-nav-item .list-nav-item-menu a:hover{color: #000;}
.course-list-nav-item .list-nav-item-menu li{margin-left: 54px;}
.course-list-nav-item .list-nav-item-menu li.menu-active {font-weight: bold;}
.course-list-nav-item .list-nav-item-menu li.menu-active a{color: #000;}
.course-list-nav-item .list-nav-item-menu li.menu-active a::before{background-color: #0056D2;}
.course-list-nav-item.nav-item-active{background-color: #fff;}
.course-list-nav-item.nav-item-active .list-nav-item-menu{display: block;}
.page-course-list .list-aside-inner{padding: 20px;width: 280px;}
.fixed-aside{position: relative;}
.aside-scroll-wrap{overflow: hidden;overflow-y: auto;z-index: 2;}
.fixed-aside .aside-scroll-wrap{position: fixed;}

/* 右侧课程列表 */
.course-list-main{width: calc(100% - 280px);background-color: #fff;min-height: 90vh;padding: 0 7.114% 56px;}
.course-list-main .couse-list-layer{padding: 16px 0;}
.course-list-main .sys-layer-head{margin-bottom: 0;}
.course-list-main .sys-course-item{width: 33.33333333%;padding: 16px 8px;}
.course-list-main .list-load-more{text-align: center;padding: 16px 0;}
.course-list-main .list-load-more .sys-btn-plain{font-size: 16px;}
.course-list-main .main-banner-layer{margin-bottom: 16px;padding: 8px 0;}
.course-list-main .main-banner-layer,
.course-list-main .main-banner-img{border-radius: 16px;}
.course-list-main .main-banner-img{width: 100%;height: auto;}


/* ==============================================
                                * PAGE: 课程详情
                                ---------------------------------------------- */
.page-course-detail{background-color: #f8f9f8;}
.course-layer{margin-bottom: 88px;}
.course-layout{display: flex;}
.course-layer .course-detail-title{font-size: 28px;margin-bottom: 12px;}

/* 课程信息 */
.course-detail-head{background: linear-gradient(180deg, #F7F9FC 0%, #E8F0FC 100%);margin-bottom: 48px;}
.course-detail-head .sys-layout{display: flex;align-items: center;justify-content: space-between;padding: 32px 0 44px;background-position: center 0;background-repeat: no-repeat;background-size: auto 85%;background-image: url(../img/detail-head-bg.png);}
.course-detail-head .detail-head-left{flex: 1;min-width: 0;padding-right: 18%;}
.course-detail-head .detail-head-title{font-size: 40px;line-height: 1.3;margin-bottom: 8px;}
.course-detail-head .detail-head-metas{margin-bottom: 40px;display: flex;}
.course-detail-head .detail-head-metas .sys-course-tag{margin-bottom: 0;}
.course-detail-head .detail-head-metas .breadcrumb-nav{font-size: 16px;padding-left: 15px;}
.course-detail-head .detail-head-buttons{display: flex;align-items: center;}
.course-detail-head .detail-head-buttons .sys-button-wave{margin-right: 24px;}
.course-detail-head .btn-add-fav{margin-right: 8px;}
.course-detail-head .btn-ico-fav{display: inline-block;width: 15px;height: 15px;margin-right: 3px;vertical-align: middle; background-repeat: no-repeat;background-position: center;position: relative;}
.course-detail-head .btn-ico-fav::before,
.course-detail-head .btn-ico-fav::after{content: '';display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-size: contain;}
.course-detail-head .btn-ico-fav::before{background-size: contain;background-image: url(../img/sys-ico-fav.png);}
.course-detail-head .btn-ico-fav::after{background-size: contain;background-image: url(../img/sys-ico-fav-active.png);opacity: 0;visibility: hidden;}
.course-detail-head .btn-fav-active .btn-ico-fav::before{opacity: 0;visibility: hidden;}
.course-detail-head .btn-fav-active .btn-ico-fav::after{opacity: 1;visibility: visible;}
.course-detail-head .course-info-panel{width: 472px; background-color: #fff;display: flex;flex-wrap: wrap;padding: 18px 0 18px 44px;box-shadow: 4px 6px 24px  rgba( 83, 129, 194,0.2);border-radius: 14px;}
.course-detail-head .course-info-cell{flex: 1;min-width: 33.33333333%;padding: 10px 8px 10px 0;}
.course-detail-head .course-info-cell .info-cell-ico{display: block;width: 28px;height: 28px;margin-bottom: 10px;background-size: contain;}
.course-detail-head .course-info-cell .info-ico-text{background-image: url(../img/detail-ico-text.png);}
.course-detail-head .course-info-cell .info-ico-time{background-image: url(../img/detail-ico-time.png);}
.course-detail-head .course-info-cell .info-ico-date{background-image: url(../img/detail-ico-date.png);}
.course-detail-head .course-info-cell .info-cell-tit{display: block;font-size: 18px;margin-bottom: 2px;font-weight: bold;}
.course-detail-head .course-info-cell .info-cell-label{display: block;color: #666;}

/* 课程介绍 */
.course-detail-main{flex: 1;min-width: 0;padding-right: 19px;}
.course-detail-main .course-detail-intro{background-color: #fff;border-radius: 14px;border: 1px solid #e3e3e3;}
.course-detail-main .course-detail-summary{padding: 24px 28px;border-bottom: 1px solid #e3e3e3;}
.course-detail-main .course-detail-summary .course-summary-title{font-size: 18px;margin-bottom: 8px;}
.course-detail-main .course-detail-summary .course-summary-desc{line-height: 1.55em;}
.course-detail-main .course-detail-summary .chapter-num{font-size: 24px;}
.course-detail-main .course-chapter-list{padding: 0 28px;}
.course-chapter-list .course-chapter-item+.course-chapter-item{border-top: 1px solid #e3e3e3;}
.course-chapter-item{padding: 25px 40px;}
.course-chapter-item .chapter-item-hd{margin-bottom: 4px;}
.course-chapter-item .chapter-item-title{font-size: 20px;line-height: 1.3em;position: relative;font-weight: bold;}
.course-chapter-item .chapter-item-ico{display: inline-block;min-width: 24px;height: 24px;line-height: 24px;text-align: center;color: #fff;border-radius: 50%; background-color: var(--color-primary);font-size: 16px;font-weight: 600;font-family: "微软雅黑","Microsoft YaHei";  position: absolute;margin-left: -32px;}
.course-chapter-item .chapter-item-metas{display: flex;flex-wrap: wrap;}
.course-chapter-item .chapter-item-metas,
.course-chapter-item .chapter-item-metas a{color: #666;}
.course-chapter-item .chapter-item-meta{margin-right: 12px;}
.course-chapter-item .chapter-item-meta+.chapter-item-meta::before{content: '';display: inline-block;width: 4px;height: 4px;background-color: #999;border-radius: 50%;margin-right: 12px;vertical-align: middle;}

/* 右侧讲师 */
.course-detail-aside{width: 23.828%;}
.course-detail-aside .course-aside-wiget{padding: 5px;background-color: #fff;border-radius: 16px;border: 1px solid #e3e3e3;}
.course-detail-aside .course-aside-thumb {position: relative;overflow: hidden;}
.course-detail-aside .course-aside-thumb,
.course-detail-aside .course-aside-thumb img{display: block;width: 100%;height: auto;border-radius: 16px;}
.course-detail-aside .course-aside-body{padding: 16px 24px;}
.course-detail-aside .course-aside-title{font-size: 22px;margin-bottom: 8px;}
.course-detail-aside .course-lecturer-item{padding: 8px 0;display: flex;align-items: center;}
.course-detail-aside .lecturer-item-img,
.course-detail-aside .lecturer-item-img img{width: 48px;height: 48px;border-radius: 50%;}
.course-detail-aside .lecturer-item-info{padding-left: 16px;flex: 1;min-width: 0;}
.course-detail-aside .lecturer-item-name{font-size: 16px;font-weight: bold;}
.course-detail-aside .lecturer-item-desc{color: #666;}





/* ==============================================
                                * PAGE: 课程详情-学习
                                ---------------------------------------------- */
.page-course-learn{padding: 121px 0 80px;background-color: #F8F9FB;}
.page-course-learn .learn-layout{display: flex;justify-content: space-between;margin-top: 16px;}
.page-course-learn .course-learn-main{flex: 1;min-width: 0;padding-right: 24px;}
.page-course-learn .course-learn-panel{border: 1px solid #e3e3e3;border-radius: 16px;background-color: #fff;padding: 28px;margin-bottom: 24px;}

/* 图标 */
.small-ico-sucess,
.small-ico-video,
.small-ico-txt,
.small-ico-lock,
.small-ico-unlock{display: inline-block;width: 18px;height: 18px;background-repeat: no-repeat;background-position: center;background-size: contain;vertical-align: middle;}
.small-ico-sucess{background-image: url(../img/learn-ico-sucess.png);}
.small-ico-video{background-image: url(../img/learn-ico-video.png);}
.small-ico-txt{background-image: url(../img/learn-ico-txt.png);}
.small-ico-lock{background-image: url(../img/learn-ico-lock.png);}
.small-ico-unlock{background-image: url(../img/learn-ico-unlock.png);}

/* 简介 */
.course-learn-intro .course-intro-cells{width: 100%;display: flex;}
.course-learn-intro .course-intro-cover{width: 293px;}
.course-learn-intro .course-intro-cover .course-cover-img,
.course-learn-intro .course-intro-cover .course-cover-img img{border-radius: 16px;}
.course-learn-intro .course-intro-cover .course-cover-img{padding: 63% 0 0;position: relative;}
.course-learn-intro .course-intro-cover .course-cover-img img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.course-learn-intro .course-intro-main{margin-left: 24px;flex: 1;min-width: 0;;display: flex;border-bottom: 1px solid #e3e3e3;display: flex;}
.course-learn-intro .course-intro-info{display: flex;flex-direction: column;justify-content: space-between;flex: 1;}
.course-learn-intro .course-intro-titbox{flex: 1;margin-bottom: 8px;}
.course-learn-intro .course-intro-title{font-size: 32px;line-height: 1.3;}
.course-learn-intro .course-intro-titbox .breadcrumb-nav{font-size: 16px;margin-top: 8px;}
.course-learn-intro .course-intro-desc{margin-top: 20px;}
.course-learn-intro .course-intro-lecturers{width: 208px;padding-left: 16px;margin-top: -16px;padding-bottom: 16px;position: relative;}
.course-learn-intro .course-intro-lecturers::before{content: '';display: block;width: 1px;position: absolute;left: 0;top: 5px; bottom: 16px;background-color: #e3e3e3;}
.course-learn-intro .course-lecturers-hd{margin-bottom: 8px;}
.course-learn-intro .course-lecturers-title{font-size: 16px;color: #666;font-weight: normal;}
.course-learn-intro .course-lecturers-bd{max-height: 152px;overflow: hidden;overflow-y: auto;}
.course-learn-intro .course-lecturers-list{height: 152px;overflow: hidden;overflow-y: auto;}
.course-learn-intro .course-lecturers-list a:hover{color: inherit;}
.course-learn-intro .course-lecturers-item{display: flex;align-items: center;padding: 5px 0;transition: all 0.3s ease;border-radius: 4px;}
.course-learn-intro .course-lecturers-item:hover{background-color: #F7F9FC;}
.course-learn-intro .course-lecturers-item .lecturers-item-avatar,
.course-learn-intro .course-lecturers-item .lecturers-item-avatar img{width: 28px;height: 28px;border-radius: 50%;}
.course-learn-intro .course-lecturers-item .lecturers-item-name{padding-left: 8px;flex: 1;min-width: 0;line-height: 1.3;}
.course-learn-intro ::-webkit-scrollbar { width: 8px;background-color: #fff;}
.course-learn-intro ::-webkit-scrollbar-thumb {background-color: #e6e6e6; border-radius: 6px; border: 2px solid #fff;}
.course-learn-intro ::-webkit-scrollbar-track {background-color: #fff;border-radius: 6px;}

/* 章节 */
.course-chapter-section .chapter-section-head{display: flex;width: 100%;}
.course-chapter-section .chapter-section-head .course-chapter-item{flex: 1;min-width: 0;padding: 0 5% 24px 40px;}
.course-chapter-section .chapter-section-head .chapter-learn-status{line-height: 26px;padding-right: 16px;}
.course-chapter-section .chapter-section-head .learn-status-txt{padding-left: 4px;}
.course-chapter-section .chapter-section-head .learn-status-tips{color: #999;}
.course-chapter-section .chapter-section-head .learn-status-label{display: inline;position: relative;bottom: 0.05em;}
.course-chapter-section .chapter-section-head .learn-status-num{display: inline;font-size: 24px;padding-left: 4px;}
.course-chapter-section .chapter-section-body{border-top: 1px solid #e3e3e3;padding-top: 16px;}
.course-chapter-section .chapter-cell-box{padding: 13px 16px 13px 10px;line-height: 22px;display: flex;flex-wrap: nowrap;align-items: center; width: 100%;border-radius: 8px; transition: all 0.3s ease;position: relative;}
.course-chapter-section .chapter-cell-hd{width: 32px;}
.course-chapter-section .chapter-cell-bd{flex: 1;min-width: 0;display: flex;align-items: center;}
.course-chapter-section .chapter-cell-titbox{margin-left: 6px;flex: 1;min-width: 0;}
.course-chapter-section .chapter-cell-title{display: inline-block;vertical-align: middle;position: relative;font-size: 16px;font-weight: normal;}
.course-chapter-section .chapter-cell-title::before{content: '';display: block;width: 0%;height: 1px;background-color: currentColor;position: absolute;right: 0;bottom: 0;transition: all 0.15s ease;}
.course-chapter-section .chapter-cell-ft{color: #999;padding-left: 5%;}
.course-chapter-section .chapter-cell-box:hover{background-color: #F7F9FC;text-decoration: none;color: inherit;}
.course-chapter-section .chapter-cell-box:hover .chapter-cell-title::before{width: 100%;left: 0;right: auto;}
.course-chapter-section .sys-simple-tips{position: absolute;left: 50%;bottom: 35%;transform: translateX(-50%);opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.course-chapter-section .chapter-cell-box:hover .sys-simple-tips{opacity: 1;visibility: visible;}

/* 右侧栏 */
.page-course-learn .course-learn-aside,
.page-course-learn .course-aside-inner{width: 300px;}
.page-course-learn .course-learn-aside{padding-bottom: 3em;}
.page-course-learn .course-aside-inner{position: fixed;}
.page-course-learn .aisde-quicks-head{margin-bottom: 24px;}
.page-course-learn .aisde-quicks-title{font-size: 18px;line-height: 1.3;}
.page-course-learn .aside-scroll-wrap{padding-right: 10px;margin-right: -10px;}
.page-course-learn .aisde-quicks-item {width: 100%;}
.page-course-learn .aisde-quicks-box{display: flex;width: 100%;align-items: center; line-height: 20px;padding: 14px 16px;font-size: 15px;border-radius: 8px;cursor: pointer;margin-bottom: 8px;transition: all 0.3s ease;}
.page-course-learn .aisde-quicks-item .quick-item-left{width: 24px;display: flex;align-items: center;}
.page-course-learn .aisde-quicks-item .quick-item-left:empty::before{content: '';display: inline-block;width: 8px;height: 8px;background-color: #A5B1C7;border-radius: 50%;margin-left: 4px;transition: all 0.3s ease;}
.page-course-learn .aisde-quicks-item .quick-item-num{display: inline-block;font-size: 13px; min-width: 16px;height: 16px;line-height: 16px;border-radius: 50%; color: #fff;font-family: "微软雅黑","Microsoft YaHei"; text-align: center;background-color: #A5B1C7;transition: all 0.3s ease;}
.page-course-learn .aisde-quicks-item .quick-item-cont{flex: 1;min-width: 0;}
.page-course-learn .aisde-quicks-item .quick-item-title{font-size: 15px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.page-course-learn .aisde-quicks-item .quick-item-right{color: #c4c4c4;font-size: 15px;padding-left: 10px;}
.page-course-learn .aisde-quicks-item .num-active{color: var(--color-primary);}
.page-course-learn .aisde-quicks-item.item-active .quick-item-left:empty::before{background-color: var(--color-primary);}
.page-course-learn .aisde-quicks-item.item-active .aisde-quicks-box{background-color: #fff;box-shadow: 2px 2px 6px  rgba(73, 87, 107, 0.2);}
.page-course-learn .aisde-quicks-item.item-active .quick-item-num,
.page-course-learn .aisde-quicks-item:hover .quick-item-num{background-color: var(--color-primary);}
.page-course-learn .aisde-quicks-item:hover a{color: inherit;}



/* ------------------------------ 视频弹窗 ------------------------------- */
.sys-video-pop{width: 100%;height: 100%;background-color: rgba(20,26,30,.7);position: fixed;left: 0;top: 0;z-index: 11;
display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
opacity: 0;visibility: hidden;pointer-events: none;}
.sys-video-pop .video-pop-wrap,
.sys-video-pop .video-obj-box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.sys-video-pop .video-pop-wrap{background-color: #fff;border-radius: 8px;padding: 15px;max-width: 1280px;max-height: 92%;position: relative;}
.sys-video-pop .video-obj-box{justify-content: center;position: relative;z-index: 2;}
.sys-video-pop .video-obj-box,
.sys-video-pop .video-obj-box video{border-radius: 5px;overflow:hidden;max-width: 1280px;max-height: 90vh;}
.sys-video-pop .video-obj-box video{display: block; opacity: 0;}
.sys-video-pop .sys-video-btn{position: absolute;left: 50%;top: 50%;z-index: 3; transform: translate(-50%,-50%); background-color: rgba(0,0,0,.4); border-radius: 50%;padding: 10px;width: auto;height: auto;opacity: 0;visibility: hidden;transition: all .6s ease;cursor: pointer;}
.sys-video-pop .sys-video-btn .video-ico{ vertical-align: middle;background-size: auto 90%;background-image: url(../img/sys-ico-video-white.png);}
.sys-video-pop .sys-video-btn:hover{background-color: rgba(0,0,0,.76);}
.sys-video-pop .loader-ico{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.sys-video-pop .sys-video-btn{display: none;}
.sys-video-pop .video-obj-loaded .sys-video-btn{opacity: 1;visibility: visible;display: block;}
.sys-video-pop .video-play-active .sys-video-btn{opacity: 0;visibility: hidden;}
.sys-video-pop .video-obj-loaded .video-obj-box video{opacity: 1;}
.video-pop-active .sys-video-pop{opacity: 1;visibility: visible; pointer-events:auto;}
.sys-video-btn,
.sys-video-btn .video-ico{display: inline-block;width: 75px;height: 75px;-webkit-tap-highlight-color:transparent;}
.sys-video-btn .video-ico{background-repeat: no-repeat;background-position: center;background-image: url(../img/sys_ico_video.png);}
.sys-video-btn::before,.sys-video-btn::after{content:'';display:block;width:100%;height:100%;border-radius:50%; box-shadow: 0 0 8px rgba(255,255,255,.03);position:absolute;left:0;top:0;}
.sys-video-btn:hover::before{animation:vdBtnWave 1.2s linear infinite;animation-fill-mode:forwards;}
.sys-video-btn:hover::after{animation:vdBtnWave 1.2s linear infinite;animation-fill-mode:forwards;animation-delay:.6s;}
.vdBtnWave{animation-name:vdBtnWave}
@keyframes vdBtnWave{0%{box-shadow: 0 0 0 0 rgba(255,255,255,.1);}50%{box-shadow: 0 0 0 18px rgba(255,255,255,.15);}100%{box-shadow: 0 0 0 30px rgba(255,255,255,0);}}
/* loder-ico */
.loading-mask{width:100%;height:100%;line-height:1.5;position:absolute;left:0;top:0;z-index:2;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;transition:all .4s ease;opacity:0;visibility:hidden; background-color: rgba(255,255,255,1);}
.loading-active{opacity:1;visibility:visible;}
.loading-mask .loader-txt{display:block;color:rgba(255,255,255,.8);padding-top:.2em;text-align:center;}
.loader-box{display:inline-block;padding:.5em;border-radius:.15em;margin:0 auto;text-align:center;}
.loader-ico{font-size: 90px!important;}
.loader-ico,.loader-ico>i{display: block; position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 auto;}
.loader-ico{display:block;font-size:0;color:#333;}
.loader-ico.la-dark{color:#333}
.loader-ico>i{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}
.loader-ico{width:.35em;height:.35em}
.loader-ico>i{position:absolute;top:50%;left:50%;width:.08em;height:.08em;margin-top:-.04em;margin-left:-.04em;border-radius:100%;-webkit-animation:loaderIco 1.5s infinite linear;-moz-animation:loaderIco 1.5s infinite linear;-o-animation:loaderIco 1.5s infinite linear;animation:loaderIco 1.5s infinite linear}
.loader-ico>i:nth-child(1){top:5%;left:50%;-webkit-animation-delay:-.875s;-moz-animation-delay:-.875s;-o-animation-delay:-.875s;animation-delay:-.875s}
.loader-ico>i:nth-child(2){top:18.1801948466%;left:81.8198051534%;-webkit-animation-delay:-.75s;-moz-animation-delay:-.75s;-o-animation-delay:-.75s;animation-delay:-.75s}
.loader-ico>i:nth-child(3){top:50%;left:95%;-webkit-animation-delay:-.625s;-moz-animation-delay:-.625s;-o-animation-delay:-.625s;animation-delay:-.625s}
.loader-ico>i:nth-child(4){top:81.8198051534%;left:81.8198051534%;-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}
.loader-ico>i:nth-child(5){top:94.9999999966%;left:50.0000000005%;-webkit-animation-delay:-.375s;-moz-animation-delay:-.375s;-o-animation-delay:-.375s;animation-delay:-.375s}
.loader-ico>i:nth-child(6){top:81.8198046966%;left:18.1801949248%;-webkit-animation-delay:-.25s;-moz-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.25s}
.loader-ico>i:nth-child(7){top:49.9999750815%;left:5.0000051215%;-webkit-animation-delay:-.125s;-moz-animation-delay:-.125s;-o-animation-delay:-.125s;animation-delay:-.125s}
.loader-ico>i:nth-child(8){top:18.179464974%;left:18.1803700518%;-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}
@-webkit-keyframes loaderIco{50%{opacity:.25;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes loaderIco{50%{opacity:.25;-moz-transform:scale(0.5);transform:scale(0.5)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes loaderIco{50%{opacity:.25;-o-transform:scale(0.5);transform:scale(0.5)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes loaderIco{50%{opacity:.25;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}


/* ------------------------------ PDF弹窗 ------------------------------- */
.sys-pdf-pop{width: 100%;height: 100%;background-color: rgba(20,26,30,.7);position: fixed;left: 0;top: 0;z-index: 9;
display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;}
.sys-pdf-pop .pdf-pop-wrap,
.sys-pdf-pop .pdf-iframe-box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.sys-pdf-pop .pdf-pop-wrap{background-color: #fff;border-radius: 8px;padding: 15px;min-width: 68%;width: 1280px; height: 88%;position: relative;}
.sys-pdf-pop .pdf-iframe-box{justify-content: center;position: relative;z-index: 2;display: flex;border-radius: 5px;overflow:hidden;width: 100%;}
.sys-pdf-pop .pdf-iframe-box iframe{display: block;width: 100%; height: 100%;border: 0;border-radius: 5px;}
.sys-pdf-pop .loader-ico{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
:fullscreen html,:fullscreen body{height: 100%;overflow: hidden;}
.win-fullscreen .sys-pdf-pop {padding-right: 40px;}
.win-fullscreen .sys-pdf-pop .pdf-pop-wrap{height: 100%;width: 100%;}

/* 弹窗按钮 */
.sys-pop-controls{width: 42px;padding: 0.35em 0 0.35em; position: absolute;left: 100%; margin-left: -10px; top: 0;background-color: #fff;border-radius: 0 8px 8px 0;}
.sys-pop-controls .pop-control-item{position: relative;}
.sys-pop-controls .pop-control-item:hover{z-index: 2;}
.sys-pop-controls .pop-control-item+.pop-control-item::before{content: '';display: block;width: 16px;height: 1px;background-color: #e3e3e3;position: absolute;left: 50%;margin-left: -8px;top: 0;}
.sys-pop-controls .pop-control-btn{display: block;padding: 1em 0;cursor: pointer;border-radius: 4px;}
.sys-pop-controls .pop-control-ico{display: block;width: 15px;height: 15px;margin: 0 auto;background-repeat: no-repeat;background-size: contain;}
.sys-pop-controls .pop-control-ico-close{background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjg2NDc2NjE3OTExIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNDIgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0NzMiIHdpZHRoPSIzMi41NjI1IiBoZWlnaHQ9IjMyIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTkzNC45NTY1MjIgODI4LjEwNDM0OCA2MTQuNCA1MDcuNTQ3ODI2bDMyMC41NTY1MjItMzIwLjU1NjUyMmMyNi43MTMwNDMtMjYuNzEzMDQzIDI2LjcxMzA0My03MS4yMzQ3ODMgMC05Ny45NDc4MjYtMjYuNzEzMDQzLTI2LjcxMzA0My03MS4yMzQ3ODMtMjYuNzEzMDQzLTk3Ljk0NzgyNiAwbDAgMEw1MDcuNTQ3ODI2IDQwOS42IDE4Ni45OTEzMDQgODAuMTM5MTNDMTYwLjI3ODI2MSA1My40MjYwODcgMTE1Ljc1NjUyMiA1My40MjYwODcgODkuMDQzNDc4IDgwLjEzOTEzYzAgMCAwIDAgMCAwQzYyLjMzMDQzNSAxMTUuNzU2NTIyIDYyLjMzMDQzNSAxNjAuMjc4MjYxIDg5LjA0MzQ3OCAxODYuOTkxMzA0bDMyMC41NTY1MjIgMzIwLjU1NjUyMkw4OS4wNDM0NzggODI4LjEwNDM0OGMtMjYuNzEzMDQzIDI2LjcxMzA0My0yNi43MTMwNDMgNzEuMjM0NzgzIDAgOTcuOTQ3ODI2IDI2LjcxMzA0MyAyNi43MTMwNDMgNzEuMjM0NzgzIDI2LjcxMzA0MyA5Ny45NDc4MjYgMCAwIDAgMCAwIDAgMGwzMjAuNTU2NTIyLTMyMC41NTY1MjIgMzIwLjU1NjUyMiAzMjAuNTU2NTIyYzI2LjcxMzA0MyAyNi43MTMwNDMgNzEuMjM0NzgzIDI2LjcxMzA0MyA5Ny45NDc4MjYgMCAwIDAgMCAwIDAgMEM5NjEuNjY5NTY1IDg5OS4zMzkxMyA5NjEuNjY5NTY1IDg1NC44MTczOTEgOTM0Ljk1NjUyMiA4MjguMTA0MzQ4eiIgcC1pZD0iMTQ3NCI+PC9wYXRoPjwvc3ZnPg==);}
.sys-pop-controls .pop-control-ico-fullscreen{background-image: url(../img/pop-ico-fullscreen.png);}
.win-fullscreen .pop-control-ico-fullscreen{background-image: url(../img/pop-ico-fullscreen-out.png);}
.sys-pop-controls .pop-control-btn:before{content: '';display: inline-block;background-color: #000;padding: 0.06em 0.36em;border-radius: 4px;position: absolute;left: 80%;top: 60%;font-size: 13px;color: #fff;
white-space: nowrap;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.sys-pop-controls .pop-control-btn:hover:before{opacity: 1;visibility: visible;}
.sys-pop-controls .video-pop-close:before{content: '关闭';}
.sys-pop-controls .pdf-pop-close:before{content: '关闭';}
.sys-pop-controls .btn-set-fullscreen:before{content: '全屏';}
.win-fullscreen .sys-pop-controls .pop-control-btn:before{width: 1em; padding: 0.3em; left: 50%;transform: translateX(-50%);top: 100%;white-space: inherit;line-height: 1.1;font-size: 14px;}
.win-fullscreen .sys-pop-controls .btn-set-fullscreen:before{content: '退出全屏';}
.win-fullscreen .sys-pop-controls .pop-control-ico{width: 18px;height: 18px;}