* { margin: 0; padding: 0; font-size: 16px; box-sizing: border-box; font-family: "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif; }
a { text-decoration: none; }
li { list-style: none; }
img { border: none; }
body { min-width: 1200px; }
.center { margin: 0 auto; width: 1200px; height: 100%; text-align: left; }
.transColor { transition: color 0.2s; }
.transColor:hover { color: rgba(26,140,254,1); }
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
.clearfix:after { content: ""; display: block; clear: both; }
/*工具箱*/
.tool { position: fixed; top: 0; left: 0; width: 100%; height: 30px; line-height: 30px; background: rgba(245,245,245,1); border-bottom: 1px solid rgba(220,223,230,1); z-index: 460; }
.tool a { margin-right: 30px; display: inline-block; height: 100%; font-size: 12px; font-weight: 400; line-height: 30px; color: rgba(144,147,153,1); }
.tool .old { float: right; color: rgba(250,85,85,1); }
.tool .old:hover { text-decoration: underline; }
.tool .studyApp .point { margin-left: 10px; width: 10px; height: 10px; transition: transform .4s; }
.tool .studyApp .rotate { transform: rotate(180deg); }
.tool .tip { float: right; height: 100%; color: rgba(144,147,153,1); font-size: 12px; }
.tool .tip span { color: rgba(144,147,153,1); font-size: 12px; }
.tool .center { position: relative; }
.tool .appBox { display: none; position: absolute; left: -20px; top: 40px; width: 315px; height: 178px; padding: 20px; background: #FFFFFF; border: 1px solid #EBEEF5; box-shadow: 0px 6px 12px rgba(99, 110, 155, 0.1); border-radius: 5px; }
.tool .appBox .radius { position: absolute; left: 50%; top: -6px; margin-left: -6px; width: 12px; height: 12px; border-left: 1px solid #EBEEF5; border-top: 1px solid #EBEEF5; transform: rotate(45deg); background: #FFFFFF; }
.tool .appBox .app { margin-bottom: 10px; float: left; width: 145px; height: 20px; line-height: 20px; font-size: 14px; cursor: pointer; }
.tool .appBox .app:nth-child(odd) { width: 115px; }
.tool .appBox .app:nth-child(even) { margin-right: 10px; }
.tool .appBox .app .appImg { float: left; margin-right: 8px; width: 20px; }
.tool .appBox .app .name { margin-top: 1px; float: left; font-size: 14px; transition: color .2s; cursor: pointer; }
.tool .appBox .app:hover .name { color: rgba(26,140,254,1); }
.tool .appBox .ewm { display: none; position: absolute; right: -125px; top: 0px; width: 110px; height: 110px; text-align: center; padding-top: 10px; background: #FFFFFF; border: 1px solid #EBEEF5; box-shadow: 0px 6px 12px rgba(99, 110, 155, 0.1); border-radius: 5px; }
.tool .appBox .ewm .radius { transform: rotate(-45deg); left: -1px; top: 20px; }
.tool .appBox .ewm .ewmImg { width: 69px; height: 69px; }
.tool .appBox .ewm .xz { font-size: 12px; color: #333444; line-height: 15px; }
/*导航栏*/
.nav { position: fixed; top: 30px; left: 0; width: 100%; height: 90px; line-height: 90px; background: rgba(255,255,255,1); box-shadow: 0px 6px 12px rgba(99,110,155,0.1); z-index: 450; }
.nav .fl { float: left; }
.nav .logo { vertical-align: middle; }
.nav .menu { float: left; margin-left: 60px; height: 100%; }
.nav .menu li { position: relative; margin-right: 22px; float: left; color: rgba(48,49,51,1); }
.nav .menu li a { color: rgba(48,49,51,1); transition: color 0.2s; }
.nav .menu li .old { margin-left: 20px; font-size: 14px; color: #999; }
.nav .menu li a:hover { color: rgba(26,140,254,1); }
.nav .menu .active::after { position: absolute; bottom: 0; left: 50%; margin-left: -44px; content: ""; width: 88px; height: 3px; background: rgba(26,140,254,1); border-radius: 2px; }
.nav .menu .active a { color: rgba(26,140,254,1); }
.nav .user { float: right; width: 280px; height: 100%; }
.nav .user .search { margin-top: 29px; float: left; vertical-align: middle; width: 80px; height: 30px; line-height: 30px; padding-left: 12px; font-size: 14px; background: rgba(245,245,245,1); color: rgba(144,147,153,1); border-radius: 25px; outline: none; border: none; cursor: pointer; transition: all 0.5s; }
.nav .user .search .icon_search { }
.nav .user .search:hover { color: rgba(26,140,254,1); background-color: #D9ECFF; color: #1A8CFE; }
.nav .user .notice { position: relative; margin-left: 24px; margin-right: 16px; cursor: pointer; }
.nav .user .hasNotice::before { position: absolute; top: 2px; right: 0px; content: ""; width: 6px; height: 6px; background: rgba(26,140,254,1); border: 1px solid rgba(255,255,255,1); border-radius: 50%; }
.nav .user .notLogin { display: none; float: right; }
.nav .user .notLogin span { color: rgba(48,49,51,1); transition: color 0.2s; cursor: pointer; }
.nav .user .notLogin span:hover { color: rgba(26,140,254,1); }
.nav .user .notLogin .login { margin-right: 10px; }
.nav .user .notLogin .register { margin-left: 10px; }
.nav .user .isLogin { display: none; float: right; }
.nav .user .notice img { vertical-align: middle; }
.nav .user .userImg { position: relative; display: inline-block; height: 100%; }
.nav .user .jp::after { position: absolute; bottom: 12px; right: -10px; display: block; content: ""; width: 20px; height: 18px; background: url('../images/icon_jp.png') no-repeat; }
.nav .user .bj::after { position: absolute; bottom: 12px; right: -10px; display: block; content: ""; width: 20px; height: 18px; background: url('../images/icon_bj.png') no-repeat; }
.nav .user .jz::after { position: absolute; bottom: 12px; right: -8px; display: block; content: ""; width: 20px; height: 18px; background: url('../images/icon_jz.png') no-repeat; }
.nav .user .gq::after { position: absolute; bottom: 12px; right: -8px; display: block; content: ""; width: 20px; height: 18px; background: url('../images/icon_gq.png') no-repeat; }
.nav .user .userImg .userHead { width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; }
.nav .user .userImg .point { margin-left: 8px; width: 10px; height: 10px; vertical-align: middle; }
.nav .user .upRank { margin-left: 10px; width: 76px; height: 32px; line-height: 32px; background: rgba(255,145,13,1); box-shadow: 0px 6px 16px rgba(255,145,13,0.5); cursor: pointer; border-radius: 5px; border: none; outline: none; font-size: 14px; color: rgba(255,255,255,1); }
/*大搜索框*/
.bigSearchBox { position: fixed; top: 100px; left: 50%; margin-left: -600px; padding: 50px 90px; width: 1200px; height: 575px; background: rgba(255,255,255,1); border-radius: 0px 0px 6px 6px; z-index: 445; transform: translateY(-575px); transition: transform .5s; opacity: 0; }
.bigSearchBox .head { font-size: 32px; font-weight: 400; color: rgba(48,49,51,1); }
.bigSearchBox .close { position: absolute; top: 50px; right: 50px; color: rgba(192,196,204,1); font-size: 24px; cursor: pointer; transition: all 0.4s; }
.bigSearchBox .close:hover { transform: rotate(180deg); color: rgba(26,140,254,1); }
.bigSearchBox .inputBox { position: relative; margin-top: 23px; width: 100%; height: auto; }
.bigSearchBox .realSearch { width: 850px; height: 60px; padding-left: 20px; font-size: 14px; font-weight: 400; line-height: 60px; color: #515151; background: rgba(255,255,255,1); border: 1px solid rgba(238,238,238,1); border-radius: 6px 0px 0px 6px; outline: none; }
.bigSearchBox .realSearch:focus { border: 1px solid #1A8CFE; }
.bigSearchBox .btnSearch { position: absolute; left: 848px; top: 0px; width: 150px; height: 60px; font-size: 22px; font-weight: 400; color: rgba(255,255,255,1); background: rgba(26,140,254,1); border-radius: 0px 6px 6px 0px; outline: none; border: none; cursor: pointer; }
.bigSearchBox .btnSearch .icon_search { margin-right: 10px; font-size: 28px; }
.bigSearchBox .tagBox { margin-top: 20px; width: 100%; height: auto; }
.bigSearchBox .tagBox a { display: inline-block; margin-right: 20px; margin-bottom: 20px; font-size: 14px; font-weight: 400; color: rgba(144,147,153,1); transition: color 0.2s; }
.bigSearchBox .tagBox a:hover { color: rgba(26,140,254,1); }
.bigSearchBox .hotBox { margin-top: 20px; width: 100%; height: auto; }
.bigSearchBox .hotBox .hotTitle { font-size: 20px; font-weight: 400; color: rgba(48,49,51,1); }
.bigSearchBox .hotBox .hotCourse { margin-top: 22px; width: 100%; height: auto; }
.hotCourse .course { position: relative; float: left; width: 220px; height: 222px; border-radius: 4px 4px 0px 0px; background: rgba(255,255,255,1); border: 1px solid rgba(243,243,243,1); overflow: hidden; transition: transform .2s; }
.hotCourse .course:not(:last-child) { margin-right: 40px; }
.hotCourse .course .imgBox { position: relative; margin-bottom: 10px; display: block; width: 100%; height: 124px; background-color: black; overflow: hidden; }
.hotCourse .course .imgBox .play { position: absolute; top: 50%; left: 50%; margin-left: -24px; margin-top: -24px; transform: scale(1.3); transition: all .3s; opacity: 0; }
.hotCourse .course .cover { width: 100%; height: 124px; transition: all .2s; }
.hotCourse .course .name { margin: 15px auto; width: 200px; height: 40px; font-size: 14px; font-weight: 400; line-height: 19px; color: rgba(48,49,51,1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hotCourse .course .other { margin: 0 auto; width: 200px; font-size: 12px; font-weight: 400; color: rgba(144,147,153,1); }
.hotCourse .course .tag { position: absolute; bottom: 10px; right: 10px; width: 52px; height: 18px; text-align: center; line-height: 18px; font-size: 12px; font-weight: 400; color: rgba(255,255,255,1); background: rgba(255,170,46,1); cursor: default; }
.hotCourse .course:hover .name { color: #409EFF; }
.hotCourse .course:hover .cover { transform: scale(1.05); opacity: 0.7; }
.hotCourse .course:hover .play { opacity: 1; transform: none; }
.hotCourse .course:hover { transform: translateY(-5px); }

/*右侧导航*/
.navRight { position: fixed; top: 50%; right: 10px; margin-top: -155px; width: 64px; height: 310px; background: rgba(255,255,255,1); border: 1px solid rgba(229,232,237,1); box-shadow: 0px 3px 6px rgba(99,110,155,0.1); border-radius: 6px; z-index: 200; }
.navRight .navMember, .navRight .navRegister { display: none; }
.navRight .navList { position: relative; width: 100%; height: 64px; text-align: center; font-size: 12px; font-weight: 400; cursor: pointer; }
.navRight .navList .uploadBox { visibility: hidden; position: absolute; top: 0px; left: -175px; width: 110px; height: 110px; line-height: 110px; text-align: center; padding: 20px 0; background: #ffffff; border: 1px solid #e4e7ed; border-radius: 6px; box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.06); z-index: 400; transition: transform .4s; overflow: initial; }
.navRight .navList .uploadBox .point { position: absolute; right: -6px; top: 20px; width: 12px; height: 12px; border-top: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed; transform: rotate(45deg); background: #ffffff; }
.navRight .navList .uploadBox img { width: 76px; height: 76px; }
.navRight .navList:hover .uploadBox { visibility: visible; transform: translateX(45px); }
.navRight .navList > img { margin-top: 10px; }
.navRight .navList p { margin-top: 3px; font-size: 12px; font-weight: 400; color: rgba(96,98,102,1); transition: color 0.2s; }
.navRight .navMember p, .navRight .navRegister p { color: rgba(255,136,0,1); }
.navRight .navList:hover p { color: rgba(255,136,0,1); }
.navRight .navList::after { position: absolute; content: ""; bottom: 0; left: 50%; margin-left: -20px; width: 40px; height: 1px; background: rgba(229,232,237,1); }
.navRight .returnTop { width: 100%; height: 50px; background: url('../images/icon_top.png') no-repeat center center; background-size: 24px 24px; cursor: pointer; overflow: hidden; }
.navRight .returnTop p { display: none; margin: 0 auto; margin-top: 10px; width: 30px; text-align: center; font-size: 12px; font-weight: 400; color: rgba(255,136,0,1); }
.navRight .returnTop:hover { background: none; }
.navRight .returnTop:hover p { display: block; }
/*底部*/
.foot { margin-top: 135px; width: 100%; height: 105px; padding: 32px; border-top: 1px solid rgba(235,238,245,1); background: rgba(255,255,255,1); }
.foot p { margin: 0 auto; width: 580px; font-size: 12px; line-height: 24px; text-align: center; color: rgba(144,147,153,1); }
.foot p a { font-size: 12px; color: #428bca; text-decoration: underline; }
/*面包屑导航*/
.content .crumb { margin-bottom: 16px; }
.content .crumb a { cursor: default; }
.content .crumb a span { font-size: 14px; font-weight: 400; color: rgba(192,196,204,1); transition: color 0.2s; letter-spacing: 1px; }
.content .crumb a span:hover { color: rgba(96,98,102,1); }
.content .crumb .allow span { cursor: pointer; }
.content .crumb .allow::after { position: relative; top: 4px; margin: 0 7px; display: inline-block; width: 18px; height: 18px; content: ""; background: url(../images/rightpoint.svg) center center; background-size: 100% 100%; color: rgba(192,196,204,1); }
.content .crumb .stop span { font-size: 14px; color: rgba(96,98,102,1); }
/*按钮效果*/
.btnColor { transition: background-color .2s; }
.btnColor:hover { background-color: #75B9FF !important; }
.btnColor:active { background-color: #1374D9 !important; }
/*toast*/
.toast { position: fixed; top: 50%; left: 50%; padding: 0 40px; letter-spacing: 1px; background-color: black; color: white; height: 36px; line-height: 36px; font-size: 14px; transform: translateX(-50%) translateY(-50%); border-radius: 5px; z-index: 99999; cursor: default; }
/*搜索框遮罩层*/
.searchMask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,1); opacity: 0.7; z-index: 400; }
/*图片遮罩层*/
.h-mark::after { content: ''; display: block; width: 100%; height: 100%; background-image: linear-gradient(180deg, rgba(0,0,0,0.01) 0, #000000 100%); position: absolute; left: 0; right: 0; top: 0; visibility: hidden; opacity: 0; transition: all .2s; }
.h-mark:hover::after { visibility: visible; transition: all .2s; opacity: .3; border-radius: 5px; }
/*分页控件*/
.paging { clear: both; margin-top: 36px; width: 100%; }
.paging ul { margin: 0 auto; width: 490px; height: 30px; }
.paging ul li { float: left; margin-right: 10px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 2px; border: 1px solid rgba(220,223,230,1); cursor: pointer; transition: background .2s; }
.paging ul li a { display: inline-block; width: 100%; height: 100%; color: black; transition: color .2s; }
.paging ul .active { border: none; background: #1989FA; color: #fff; cursor: default; }
.paging ul .active a { color: #ffffff; }
.paging ul li:hover { border: none; background: #1989FA; }
.paging ul li:hover a { color: #fff; }
/*骨架屏*/
.chiaroscuro { background: #e5e5e5 !important; animation-duration: 1.5s; animation-name: blink; animation-iteration-count: infinite; }
.chiaroscuroW15 { width: 15% !important; }
.chiaroscuroW25 { width: 25% !important; }

@keyframes blink {
    0% { opacity: .4; }
    50% { opacity: 1; }
    100% { opacity: .4; }
}