@charset "UTF-8";
/* CSS Document */


.loginbackground {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 0; background: url("../images/login.jpg") no-repeat center / cover;}
.loginwrap {width: 100%; min-height: 100%; display: -ms-flex; display: flex; justify-content: center; align-items: center; position: relative; z-index: 20;}
.loginbox {width: 960px; height: auto; padding: 40px 0;}
.loginhead {overflow: hidden; padding-bottom: 45px;}
.loginhead .logo {font-size: 0; float: left; margin-right: 20px;}
.loginhead .logo a {display: block;}
.loginhead .logo img {height: 44px;}
.loginhead .tag {height: 40px; line-height: 40px; margin-top: 1px; border: 1px solid #083b90; font-size: 22px; color: #083b90; float: left; border-radius: 6px; padding: 0 20px;}
.loginmain {background: #fff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, .1); overflow: hidden;}
.loginimg {width: 500px; height: auto; float: left; font-size: 0;}
.loginimg img {width: 100%; border-radius: 12px 0 0 12px;}
.logincon {width: 460px; height: auto; float: left;}
.logintitle {text-align: center; border-bottom: 1px solid #ddd; height: 80px;}
.logintitle span {display: inline-block; height: 80px; line-height: 80px; font-size: 24px; font-weight: bold; color: #083b90; position: relative;}
.logintitle span:after {content: ''; display: block; width: 100%; height: 4px; background: #083b90; position: absolute; left: 0; bottom: -1px;}
.loginform {padding: 10px 70px 0 70px;}
.loginform .item {margin-top: 30px; position: relative;}
.loginform .item .imgbox {width: 50px; height: 16px; font-size: 0; position: absolute; left: 0; top: 50%; margin-top: -8px; text-align: center;}
.loginform .item .imgbox img {width: 16px; height: 16px;}
.loginform .item .inpbox input.inp {width: 100%; height: 42px; font-size: 14px; color: #333; line-height: 16px; padding: 12px 12px 12px 50px; box-sizing: border-box; border: 1px solid #ddd;}
.loginform .item .inpbox2 {width: 200px; float: left;}
.loginform .item .yzmbox {width: auto; height: 40px; border: 1px solid #ddd; border-radius: 4px; float: right; font-size: 0;}
.loginform .item .yzmbox img {width: auto; height: 40px; border-radius: 4px; cursor: pointer;}
.loginform .item .btnbox .btn {width: 100%; height: 52px; line-height: 52px; text-align: center; background: #083b90; border-radius: 8px; font-size: 18px; color: #fff; cursor: pointer; border: 0 none; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
.loginform .remember {padding-top: 20px;}
.loginform .remember label {display: -ms-flex; display: flex; align-items: center; font-size: 16px; color: #666666; cursor: pointer;}
.loginform .remember label input {margin-right: 5px;}
.loginform .txtbox {font-size: 16px; color: #3493ee; padding-top: 20px; text-align: center;}




.header {width: 100%; height: 80px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .05); position: fixed; left: 0; top: 0; z-index: 999;}
.header .center {width: 1200px; margin: 0 auto;}
.header .logo {font-size: 0; float: left; padding: 22px 0; margin-right: 30px;}
.header .logo a {display: block;}
.header .logo img {height: 36px;}
.header .tag {width: auto; height: 28px; line-height: 28px; border: 1px solid #083b90; border-radius: 4px; padding: 0 10px; font-size: 16px; color: #083b90; margin-top: 25px; float: left;}
.header .r {float: right;}
.header .user {width: auto; height: auto; float: left; position: relative; margin-top: 20px;}
.header .user .head {width: auto; height: 40px;}
.header .user .head .box {display: block; height: 40px; padding-right: 30px; position: relative;}
.header .user .head .box:after {content: ''; display: block; width: 12px; height: 8px; background: url("../images/header-arrow.png") no-repeat right center / 12px 7px; position: absolute; right: 0; top: 50%; margin-top: -4px;}
.header .user .head .box .portrait {width: 40px; height: 40px; float: left; font-size: 0; margin-right: 10px;}
.header .user .head .box .portrait img {width: 40px; height: 40px; border-radius: 50%;}
.header .user .head .box .name {font-size: 16px; color: #333; float: left; line-height: 40px;}
.header .user .list {width: 100%; height: auto; position: absolute; left: 0; top: 100%; padding-top: 20px; display: none;}
.header .user .list ul {background: #fff; border-radius: 0 0 4px 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, .05);}
.header .user .list ul li {border-bottom: 1px solid #eee;}
.header .user .list ul li:last-child {border-bottom: 0 none;}
.header .user .list ul li a {display: block; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;}
.header .user:hover .list {display: block;}



.wrapper {width: 1200px; margin: 0 auto; padding-top: 80px;}
.wrapper-padding {padding: 30px 0;min-height: 600px;}


.footer {text-align: center; background: #444444; font-size: 14px; color: #fff; line-height: 30px; padding: 30px 0;}
.footer .center {width: 1200px; margin: 0 auto;}


.comRadioShadown {background: #fff; border-radius: 6px; box-shadow: 0 0 8px rgba(0, 0, 0, .05);}


.leftbar {width: 200px; height: auto; float: left;}
.baruser {text-align: center; padding: 30px 20px;}
.baruser .portrait {width: 72px; height: 72px; border-radius: 50%; font-size: 0; margin: 0 auto;}
.baruser .portrait a {display: block;}
.baruser .portrait img {width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 10px 20px rgba(164, 177, 186, .2)}
.baruser .name {font-size: 16px; font-weight: bold; color: #083b90; padding-top: 15px;}
.baruser .note {font-size: 14px; color: #496f99; padding-top: 5px;}
.barmenu {box-shadow: 0 -4px 8px rgba(0, 0, 0, .05); padding-bottom: 30px;}
.barmenu .item {height: 50px;}
.barmenu .item a {display: block; width: auto; height: 50px; line-height: 50px; font-size: 16px; color: #333333; text-align: center; position: relative;}
.barmenu .item a:before {content: ''; display: none; width: 4px; background: #083b90; height: 100%; position: absolute; left: 0; top: 0;}
.barmenu .item a span {display: inline-block; position: relative; padding-left: 30px;}
.barmenu .item a span:before {content: ''; display: block; width: 20px; height: 20px; background: url("../images/menus.png") no-repeat left top / auto 40px; position: absolute; left: 0; top: 50%; margin-top: -10px;}
.barmenu .item a span.icon-home:before {background-position-x: 0;}
.barmenu .item a span.icon-online:before {background-position-x: -20px;}
.barmenu .item a span.icon-down:before {background-position-x: -40px;}
.barmenu .item a span.icon-live:before {background-position-x: -60px;}
.barmenu .item a span.icon-notice:before {background-position-x: -80px;}
.barmenu .item a span.icon-safety:before {background-position-x: -100px;}

.barmenu .item a:hover {color: #083b90;}
.barmenu .item a:hover span:before {background-position-y: -20px;}

.barmenu .item a.on {background: #dae3f4; color: #083b90;}
.barmenu .item a.on:before {display: block;}
.barmenu .item a.on span:before {background-position-y: -20px;}





.conmain {width: 970px; height: auto; float: right;}

.intitle {width: auto; height: 50px; position: relative;}
.intitle:after {content: ''; display: block; width: 100%; height: 1px; background: #ddd; position: absolute; left: 0; bottom: 0;}
.intitle .name {width: auto; height: 50px; line-height: 50px; float: left; font-size: 18px; color: #333333; padding-left: 20px; position: relative;}
.intitle .name:before {content: ''; display: block; width: 4px; height: 16px; background: #083b90; position: absolute; left: 0; top: 50%; margin-top: -8px;}
.intitle .more {float: right; height: 50px; line-height: 50px; padding-right: 20px;}
.intitle .more a {font-size: 14px; color: #999999; background: url("../images/intitle-more.png") no-repeat right center / 6px 10px; padding-right: 15px;}

.inhead {padding-bottom: 20px;}

.innotice {width: calc(100% - 350px - 20px); height: 220px; float: left;}
.innotice-list {width: auto; height: auto; padding-top: 5px;}
.innotice-list .item {width: auto; height: 40px;}
.innotice-list .item .box {display: block; height: 40px; line-height: 40px; padding: 0 20px; font-size: 14px;}
.innotice-list .item .text {width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 40px; float: left; padding-left: 20px; box-sizing: border-box; position: relative; color: #333333;}
.innotice-list .item .text:before {content: ''; display: block; width: 6px; height: 6px; background: #083b90; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.innotice-list .item .note {width: auto; height: 40px; line-height: 40px; float: right; color: #999999;}
.innotice-list .item .box:hover {background: #f3f3f3;}
.innotice-list .item .box:hover .text {color: #083b90;}


.intotal {width: 350px; height: 220px; background: #fff; float: right; box-sizing: border-box; padding: 20px 0;}
.intotal .item {width: 50%; height: 180px; float: left; border-right: 1px solid #eee; box-sizing: border-box; text-align: center;}
.intotal .item:last-child {border-right: 0 none;}
.intotal .item .icon {font-size: 0; padding-top: 20px;}
.intotal .item .icon img {width: 40px; height: 40px;}
.intotal .item .note {font-size: 14px; color: #333333; padding-top: 25px;}
.intotal .item .text {font-size: 14px; color: #8393a6; padding-top: 20px;}
.intotal .item .text .unit {color: #8393a6;}
.intotal .item .text .number {font-size: 30px; font-weight: bold;}
.intotal .item .text .number.blue {color: #3493ee;}
.intotal .item .text .number.orange {color: #ff9900;}



.ntitle {width: auto; height: 60px; position: relative;}
.ntitle.margin {margin: 0 20px;}
.ntitle .name {width: auto; height: 60px; line-height: 60px; font-size: 16px; font-weight: bold; color: #083b90; position: relative; padding-left: 30px;}
.ntitle .name:before {content: ''; display: block; width: 20px; height: 20px; background: url("../images/menus.png") no-repeat left bottom / auto 40px; position: absolute; left: 0; top: 50%; margin-top: -10px;}
.ntitle .name.icon-home:before {background-position-x: 0;}
.ntitle .name.icon-online:before {background-position-x: -20px;}
.ntitle .name.icon-down:before {background-position-x: -40px;}
.ntitle .name.icon-live:before {background-position-x: -60px;}
.ntitle .name.icon-notice:before {background-position-x: -80px;}
.ntitle .name.icon-safety:before {background-position-x: -100px;}
.ntitle .back {position: absolute; right: 0; top: 50%; margin-top: -15px;}
.ntitle .back a {display: block; width: auto; height: 28px; line-height: 28px; padding: 0 12px; background: #eff3f7; border: 1px solid #cbd3de; border-radius: 15px;}
.ntitle .back a span {display: block; background: url("../images/ntitle-back.png") no-repeat left center / 14px 14px; padding-left: 20px; font-size: 14px; color: #7d92ac;}


.inmycourse {padding: 0 20px 30px 20px;}
.inmycourse .ntitle {height: 50px;}
.inmycourse .ntitle .name {height: 50px; line-height: 50px;}


.inmycourse-list .group {padding-bottom: 20px;}
.inmycourse-list .group:last-child {margin-bottom: 0;}

.courseItem {width: auto; height: auto;}
.courseItem-timebar {width: auto; height: 32px; background: #e6edfb; border-radius: 4px; line-height: 32px; font-size: 14px; color: #5880c6; padding: 0 15px; margin-bottom: 10px;}
.courseItem-timebar .l {float: left; position: relative; padding-left: 15px;}
.courseItem-timebar .l:before {content: ''; display: block; width: 6px; height: 6px; background: #5880c6; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.courseItem-timebar .r {float: right;}

.courseItem-box {width: auto; height: auto; border: 1px solid #cbd3de; border-radius: 4px;}
.courseItem-headbar {padding: 20px 0 20px 20px; overflow: hidden;}
.courseItem-headbar .l {width: calc(100% - 200px); height: 120px; float: left; box-sizing: border-box; border-right: 1px solid #cbd3de; padding-right: 40px;}
.courseItem-headbar .l .img {width: 200px; height: 120px; float: left; position: relative;}
.courseItem-headbar .l .img .imgbox {font-size: 0;}
.courseItem-headbar .l .img .imgbox a {display: block;}
.courseItem-headbar .l .img .imgbox img {width: 200px; height: 120px; border-radius: 6px;}
.courseItem-headbar .l .img .tagbox {width: 100%; height: 20px; position: absolute; left: 0; bottom: -10px; z-index: 20; text-align: center;}
.courseItem-headbar .l .img .tagbox span {display: inline-block; height: 20px; line-height: 20px; border-radius: 10px; font-size: 14px; color: #fff; padding: 0 10px;}
.courseItem-headbar .l .img .tagbox span.cyan {background: #2ec2c0;}
.courseItem-headbar .l .img .tagbox span.orange {background: #ffaf54;}
.courseItem-headbar .l .img .tagbox span.blue {background: #3493ee;}
.courseItem-headbar .l .img .tagbox span.gray {background: #adb3b8;}

.courseItem-headbar .l .con {width: calc(100% - 200px - 20px); height: 120px; float: right;}
.courseItem-headbar .l .con .tit {font-size: 16px; font-weight: bold; color: #333333;}
.courseItem-headbar .l .con .item { line-height: 26px;font-size: 14px;margin-top: 5px; color: #333333;}
.courseItem-headbar .l .con .tit a {color: #333333;}
.courseItem-headbar .l .con .txt {font-size: 14px; line-height: 24px; color: #999999; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px;}
.courseItem-headbar .l .con .txt.txt2 {-webkit-line-clamp: 2;}
.courseItem-headbar .l .con .txts {font-size: 14px; line-height: 30px; color: #999; padding-top: 10px;}
.courseItem-headbar .l .con .txts span {color: #333;}
.courseItem-headbar .l .con .not {font-size: 14px; color: #333333; padding-top: 15px;}

.courseItem-headbar .r {width: 200px; height: 120px; float: right;}
.courseItem-headbar .r .total {text-align: center; padding: 10px 0;}
.courseItem-headbar .r .total .number {font-size: 14px; color: #999999;}
.courseItem-headbar .r .total .sign {display:inline-block; border-radius: 20px;padding: 3px 15px;background: #2ec2c0; font-size: 14px; color: #fff;}
.courseItem-headbar .r .total .sign2 {display:inline-block; border-radius: 20px;padding: 3px 15px;background: #1bba31; font-size: 14px; color: #fff;}
.courseItem-headbar .r .total .sign3 {display:inline-block; border-radius: 20px;padding: 3px 15px;background: #c40860; font-size: 14px; color: #fff;}
.courseItem-headbar .r .total .no-sign {display:inline-block; border-radius: 20px; padding: 3px 15px; font-size: 14px; background: #999999; color: #fff;}

.courseItem-headbar .r .total .number span {color: #ff9900; font-weight: bold; font-size: 20px;}
.courseItem-headbar .r .total .note {font-size: 14px; color: #333333; padding-top: 5px;}
.courseItem-headbar .r .livenote {text-align: center; font-size: 14px; padding: 10px 0 15px 0;}
.courseItem-headbar .r .livenote .tit {color: #2ec2c0;}
.courseItem-headbar .r .livenote .tit span {display: inline-block; position: relative; padding: 0 10px;}
.courseItem-headbar .r .livenote .tit span:before,
.courseItem-headbar .r .livenote .tit span:after {content: ''; display: block; width: 10px; height: 2px; background: #2ec2c0; position: absolute; top: 50%; margin-top: -1px;}
.courseItem-headbar .r .livenote .tit span:before {right: 100%;}
.courseItem-headbar .r .livenote .tit span:after {left: 100%;}
.courseItem-headbar .r .livenote .txt {color: #333333; padding-top: 5px;}

.courseItem-headbar .r .btn a {display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #fff; border-radius: 6px; margin: 0 auto;}
.courseItem-headbar .r .btn a.blue {background: #3493ee; box-shadow: 0 5px 15px rgba(27, 126, 242, .15);}
.courseItem-headbar .r .btn a.cyan {background: #2ec2c0; box-shadow: 0 5px 15px rgba(46, 194, 192, .15);}
.courseItem-headbar .r .btn a.gray {background: #fff; border: 1px #b3b7b7 solid; color: #b3b7b7; box-shadow: 0 5px 15px rgba(236, 239, 239, 0.15);}
.courseItem-headbar .r .btn.btn2 {padding-top: 40px;}

.courseItem-headbar .r .btns .item {padding: 10px 0;}
.courseItem-headbar .r .btns .item a {display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #fff; border-radius: 6px; margin: 0 auto;}
.courseItem-headbar .r .btns .item a.blue {background: #3493ee; box-shadow: 0 5px 15px rgba(27, 126, 242, .15);}
.courseItem-headbar .r .btns .item a.cyan {background: #2ec2c0; box-shadow: 0 5px 15px rgba(46, 194, 192, .15);}
.courseItem-headbar .r .btns .item a.gray {background: #fff; border: 1px #b3b7b7 solid; color: #b3b7b7; box-shadow: 0 5px 15px rgba(236, 239, 239, 0.15);}



.liveItem-headbar {padding: 20px 0 20px 20px; overflow: hidden; border-bottom: 1px #eee dashed;}
.liveItem-headbar .l {width: calc(100% - 200px); height: 100px; float: left; box-sizing: border-box; border-right: 1px solid #cbd3de; padding-right: 40px;}
.liveItem-headbar .l .img {width: 170px; height: 100px; float: left; position: relative;}
.liveItem-headbar .l .img .imgbox {font-size: 0;}
.liveItem-headbar .l .img .imgbox a {display: block;}
.liveItem-headbar .l .img .imgbox img {width: 170px; height: 100px; border-radius: 6px;}
.liveItem-headbar .l .img .tagbox {width: 100%; height: 20px; position: absolute; left: 0; bottom: -10px; z-index: 20; text-align: center;}
.liveItem-headbar .l .img .tagbox span {display: inline-block; height: 20px; line-height: 20px; border-radius: 10px; font-size: 14px; color: #fff; padding: 0 10px;}
.liveItem-headbar .l .img .tagbox span.cyan {background: #2ec2c0;}
.liveItem-headbar .l .img .tagbox span.orange {background: #ffaf54;}
.liveItem-headbar .l .img .tagbox span.blue {background: #3493ee;}
.liveItem-headbar .l .img .tagbox span.gray {background: #adb3b8;}

.liveItem-headbar .l .con {width: calc(100% - 180px - 20px); height: 120px; float: right;}
.liveItem-headbar .l .con .tit {font-size: 16px; font-weight: normal; color: #333333;}
.liveItem-headbar .l .con .item { line-height: 26px;font-size: 14px;margin-top: 5px; color: #333333;}
.liveItem-headbar .l .con .tit a {color: #333333;}
.liveItem-headbar .l .con .txt {font-size: 14px; line-height: 24px; color: #999999; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px;}
.liveItem-headbar .l .con .txt.txt2 {-webkit-line-clamp: 2;}
.liveItem-headbar .l .con .txts {font-size: 14px; line-height: 30px; color: #999; padding-top: 10px;}
.liveItem-headbar .l .con .txts span {color: #333;}
.liveItem-headbar .l .con .not {font-size: 14px; color: #333333; padding-top: 15px;}

.liveItem-headbar .r {width: 200px; height: 100px; float: right;}
.liveItem-headbar .r .total {text-align: center; padding: 10px 0;}
.liveItem-headbar .r .total .number {font-size: 14px; color: #999999;}
.liveItem-headbar .r .total .sign {display:inline-block; border-radius: 20px;padding: 3px 15px;background: #2ec2c0; font-size: 14px; color: #fff;}
.liveItem-headbar .r .total .sign2 {display:inline-block; border-radius: 20px;padding: 3px 15px;background: #1bba31; font-size: 14px; color: #fff;}
.liveItem-headbar .r .total .sign3 {display:inline-block; border-radius: 20px;padding: 3px 15px;background: #c40860; font-size: 14px; color: #fff;}
.liveItem-headbar .r .total .no-sign {display:inline-block; border-radius: 20px; padding: 3px 15px; font-size: 14px; background: #999999; color: #fff;}
.liveItem-headbar .r .total .number span {color: #ff9900; font-weight: bold; font-size: 20px;}
.liveItem-headbar .r .total .note {font-size: 14px; color: #333333; padding-top: 5px;}
.liveItem-headbar .r .livenote {text-align: center; font-size: 14px; padding: 10px 0 10px 0;}
.liveItem-headbar .r .livenote .tit {color: #2ec2c0;}
.liveItem-headbar .r .livenote .tit span {display: inline-block; position: relative; padding: 0 10px;}
.liveItem-headbar .r .livenote .tit span:before,
.liveItem-headbar .r .livenote .tit span:after {content: ''; display: block; width: 10px; height: 2px; background: #2ec2c0; position: absolute; top: 50%; margin-top: -1px;}
.liveItem-headbar .r .livenote .tit span:before {right: 100%;}
.liveItem-headbar .r .livenote .tit span:after {left: 100%;}
.liveItem-headbar .r .livenote .txt {color: #333333; padding-top: 5px;}

.liveItem-headbar .r .btn a {display: block; width: 120px; height: 30px; line-height: 30px; text-align: center; font-size: 16px; color: #fff; border-radius: 6px; margin: 0 auto;}
.liveItem-headbar .r .btn a.blue {background: #3493ee; box-shadow: 0 5px 15px rgba(27, 126, 242, .15);}
.liveItem-headbar .r .btn a.cyan {background: #2ec2c0; box-shadow: 0 5px 15px rgba(46, 194, 192, .15);}
.liveItem-headbar .r .btn a.gray {background: #fff; border: 1px #b3b7b7 solid; color: #b3b7b7; box-shadow: 0 5px 15px rgba(236, 239, 239, 0.15);}
.liveItem-headbar .r .btn.btn2 {padding-top: 40px;}

.liveItem-headbar .r .btns .item {padding: 10px 0;}
.liveItem-headbar .r .btns .item a {display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #fff; border-radius: 6px; margin: 0 auto;}
.liveItem-headbar .r .btns .item a.blue {background: #3493ee; box-shadow: 0 5px 15px rgba(27, 126, 242, .15);}
.liveItem-headbar .r .btns .item a.cyan {background: #2ec2c0; box-shadow: 0 5px 15px rgba(46, 194, 192, .15);}
.liveItem-headbar .r .btns .item a.gray {background: #fff; border: 1px #b3b7b7 solid; color: #b3b7b7; box-shadow: 0 5px 15px rgba(236, 239, 239, 0.15);}



.courseItem-footbar {width: auto; height: 40px; border-top: 1px solid #cbd3de; background: #eff3f7; border-radius: 0 0 4px 4px; position: relative; padding-left: 110px; padding-right: 15px;}
.courseItem-footbar .name {position: absolute; left: -1px; top: -1px; width: 110px; height: 42px; background: #88a5c7; border-radius: 0 0 0 4px; text-align: center; line-height: 42px; font-size: 14px; color: #fff;}
.courseItem-footbar .text {float: left; height: 40px; line-height: 40px; font-size: 14px; color: #999;}
.courseItem-footbar .text a{ color: #333333;}
.courseItem-footbar .progress {height: 40px; float: right;}
.courseItem-footbar .progress .line {width: 200px; height: 10px; background: #c5d4e7; border-radius: 5px; float: left; margin: 15px 10px 0 0;}
.courseItem-footbar .progress .line span {display: block; width: 0; height: 10px; border-radius: 5px; background: #ffaf54;}
.courseItem-footbar .progress .note {height: 40px; line-height: 40px; float: left; font-size: 14px; color: #333333;}
.courseItem-footbar .progress .note span {color: #ff6600;}


.inmycourse-nodata {text-align: center; padding: 30px 0;}
.inmycourse-nodata .icon {font-size: 0;}
.inmycourse-nodata .icon img {width: 48px; height: 48px;}
.inmycourse-nodata .text {font-size: 14px; color: #a4a4a4; padding-top: 10px;}



.listTabs {position: relative; padding: 0 20px; overflow: hidden;}
.listTabs:after {content: ''; display: block; width: 100%; height: 1px; background: #ddd; position: absolute; left: 0; bottom: 0;}
.listTabs .item {margin-right: 40px; float: left;}
.listTabs .item a {display: block; position: relative; padding-bottom: 15px; font-size: 16px; font-weight: bold; color: #333333; position: relative;}
.listTabs .item a.on {color: #083b90;}
.listTabs .item a.on:after {content: ''; display: block; width: 100%; height: 4px; background: #083b90; position: absolute; left: 0; bottom: 0; z-index: 20;}
.listTabs .item a span{
    position: absolute;
    left: 62px;
    top:-6px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    background: #ff6600;
    line-height: 12px;
    border-radius: 10px;
    padding: 2px 6px;
}
.pages {text-align: right; padding: 30px 20px;}
.pages .box {display: inline-block; overflow: hidden;}
.pages .box .info {float: left; height: 40px; line-height: 40px; font-size: 14px; color: #333; margin-right: 10px;}
.pages .box .list {float: left; overflow: hidden;}
.pages .box .list a,
.pages .box .list b,
.pages .box .list span {display: block; width: auto; height: 40px; min-width: 40px; text-align: center; line-height: 40px; font-size: 16px; color: #333333; padding: 0 5px; border-radius: 4px; float: left; background: #f3f3f3; font-weight: normal; box-sizing: border-box; margin-left: 10px; position: relative;}
.pages .box .list b {background: #083b90; color: #fff;}
.pages .box .list a.prev:before,
.pages .box .list a.next:before {content: ''; display: block; width: 8px; height: 14px; background: url("../images/pages.png") no-repeat left center / auto 14px; position: absolute; left: 50%; margin-left: -4px; top: 50%; margin-top: -7px;}
.pages .box .list a.next:before {background-position: right;}


.ncourseList {padding: 0 20px;}
.ncourseList .group {padding-top: 20px;}


.noticeList {width: auto; height: auto;}
.noticeList .item {position: relative; height: 41px; margin-top: -1px; font-size: 0;}
.noticeList .item:first-child {margin-top: 0;}
.noticeList .item:after {content: ''; display: block; width: calc(100% - 40px); height: 1px; background: #ddd; position: absolute; left: 20px; bottom: 0;}
.noticeList .item .box {display: block; width: auto; height: 41px; line-height: 41px; position: relative; padding: 0 20px; z-index: 20; font-size: 14px;}
.noticeList .item .text {width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 40px; float: left; padding-left: 20px; box-sizing: border-box; position: relative; color: #333333;}
.noticeList .item .text:before {content: ''; display: block; width: 6px; height: 6px; background: #083b90; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.noticeList .item .note {width: auto; height: 40px; float: right; color: #999999;}

.noticeList .item:hover {position: relative; z-index: 20;}
.noticeList .item .box:hover {background: #f3f3f3;}
.noticeList .item .box:hover .text {color: #083b90;}



.noticeDetail {padding: 0 20px;}
.noticeDetail-title {font-size: 24px; color: #333333; font-weight: bold; text-align: center; padding: 25px 0;}
.noticeDetail-note {height: 40px; line-height: 40px; background: #eff3f7; text-align: center; font-size: 14px; color: #666666;}
.noticeDetail-content {font-size: 14px; color: #333333; line-height: 30px; padding: 20px 0 30px 0;}



.accountSafety {padding: 80px;}
.accountSafety .item {width: auto; height: auto; overflow: hidden; padding-bottom: 30px;}
.accountSafety .item .titbox {width: 210px; height: 30px; line-height: 30px; text-align: right; box-sizing: border-box; padding-right: 30px; float: left; font-size: 16px; color: #333333;}
.accountSafety .item .txtbox {height: 30px; line-height: 30px; font-size: 16px; color: #999999;}
.accountSafety .item .inpbox {float: left; margin-right: 20px;}
.accountSafety .item .inpbox input.inp {width: 240px; height: 30px; line-height: 16px; font-size: 14px; color: #333; padding: 6px 10px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px;}
.accountSafety .item .btnbox input.btn {width: 150px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #fff; background: #3493ee; border-radius: 6px; border: 0 none; cursor: pointer; box-shadow: 0 5px 15px rgba(27, 126, 242, .15);}


.ndetail {padding: 0 20px 20px 20px;}
.ndetail-intro {padding-bottom: 20px;}
.ndetail-wrap {border: 1px solid #cbd3de; border-radius: 4px;}
.ndetail-wrap .listTabs {padding-top: 15px;}

.ndetail-content {font-size: 14px; color: #333333; line-height: 30px; padding: 20px;}

.ndetail-menu {padding: 10px;}
.ndetail-menu .group {border: 1px solid #cbd3de; border-radius: 4px; margin-top: 10px;}
.ndetail-menu .group:first-child {margin-top: 0;}
.ndetail-menu .group .head {height: 40px;}
.ndetail-menu .group .head a {display: block; height: 40px; padding: 0 20px; line-height: 40px; background: #eff3f7; position: relative; font-size: 16px; color: #000; border-radius: 4px 4px 0 0;}
.ndetail-menu .group .head a:after {content: ''; display: block; width: 12px; height: 8px; background: url("../images/menu-arrow.png") no-repeat center / 12px 7px; position: absolute; right: 20px; top: 50%; margin-top: -6px;}
.ndetail-menu .group .list .item {border-bottom: 1px solid #cbd3de; height: 40px;}
.ndetail-menu .group .list .item:last-child {border-bottom: 0 none;}
.ndetail-menu .group .list .item .name {width: calc(100% - 300px); height: 40px; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #333333; position: relative; padding-left: 35px; float: left;}
.ndetail-menu .group .list .item .name:before {content: ''; display: block; width: 6px; height: 6px; background: #3493ee; border-radius: 50%; position: absolute; left: 20px; top: 50%; margin-top: -3px;}
.ndetail-menu .group .list .item .name a {color: #333;}
.ndetail-menu .group .list .item .note {float: left; width: 100px; text-align: center; font-size: 14px; color: #999999; height: 40px; line-height: 40px;}
.ndetail-menu .group .list .item .play {width: 80px; height: 28px; float: right; padding: 6px 15px;}
.ndetail-menu .group .list .item .play a {display: block; width: auto; height: 28px; line-height: 28px; background: #3493ee; border-radius: 15px; text-align: center; font-size: 14px; color: #fff;}
.ndetail-menu .group .list .item .play a span {display: inline-block; background: url("../images/menu-play.png") no-repeat left center / 16px 16px; padding-left: 20px;}

.ndetail-menu .group.hide .head a {border-radius: 4px;}
.ndetail-menu .group.hide .head a:after {-ms-transform: rotate(180deg); transform: rotate(180deg);}
.ndetail-menu .group.hide .list {display: none;}



.ndetail-files {padding: 5px 20px;}
.ndetail-files .item {height: 40px; border-bottom: 1px solid #cbd3de;}
.ndetail-files .item:last-child {border-bottom: 0 none;}
.ndetail-files .item .name {width: calc(100% - 120px); height: 40px; line-height: 40px; font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding-left: 15px; position: relative; float: left;}
.ndetail-files .item .name a {color: #333;}
.ndetail-files .item .name:before {content: ''; display: block; width: 6px; height: 6px; background: #1b7ef2; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.ndetail-files .item .down {width: 80px; height: 28px; float: right; padding: 6px 0;}
.ndetail-files .item .down a {display: block; width: auto; height: 28px; line-height: 28px; background: #3493ee; border-radius: 15px; text-align: center; font-size: 14px; color: #fff;}
.ndetail-files .item .down a span {display: inline-block; background: url("../images/detail-down.png") no-repeat left center / 14px 14px; padding-left: 20px;}

.notice {padding: 5px 20px;}
.notice .item { border-bottom: 1px solid #cbd3de;}
.notice .item .name {width: calc(100% - 380px); height: 40px; line-height: 40px; font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding-left: 15px; position: relative; float: left;}
.notice .item .date {width: 160px; height: 40px; line-height: 40px; font-size: 14px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding-left: 15px; position: relative; float: left;}
.notice .item .read{width: 80px; height: 40px; line-height: 40px; font-size: 14px; color: #1899b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding-left: 15px; position: relative; float: left;}
.notice .item .no-read{width: 80px; height: 40px; line-height: 40px; font-size: 14px; color: #dd3c0b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding-left: 15px; position: relative; float: left;}
.notice .item .name a {color: #333;}
.notice .item .name:before {content: ''; display: block; width: 6px; height: 6px; background: #1b7ef2; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.notice .item .down {width: 80px; height: 28px; float: right; padding: 6px 0;}
.notice .item .down a {display: block; width: auto; height: 28px; line-height: 28px; background: #3493ee; border-radius: 15px; text-align: center; font-size: 14px; color: #fff;}
.notice.item .down a span {display: inline-block; background: url("../images/detail-down.png") no-repeat left center / 14px 14px; padding-left: 20px;}



.sinoStars {width: 95px; height: 14px; background: url("../images/stars.png") no-repeat left top / 95px 84px; font-size: 0; overflow: hidden;}
.sinoStars.star1 {background-position-y: -14px;}
.sinoStars.star2 {background-position-y: -28px;}
.sinoStars.star3 {background-position-y: -42px;}
.sinoStars.star4 {background-position-y: -56px;}
.sinoStars.star5 {background-position-y: -70px;}
.sinoStars a {display: block; width: 15px; height: 14px; float: left; margin-right: 5px;}
.sinoStars a:last-child {margin-right: 0;}



.sinoStars.big {width: 133px; height: 20px; background: url("../images/stars2.png") no-repeat left top / 133px 120px;}
.sinoStars.big.star1 {background-position-y: -20px;}
.sinoStars.big.star2 {background-position-y: -40px;}
.sinoStars.big.star3 {background-position-y: -60px;}
.sinoStars.big.star4 {background-position-y: -80px;}
.sinoStars.big.star5 {background-position-y: -100px;}
.sinoStars.big a {display: block; width: 21px; height: 20px; float: left; margin-right: 7px;}
.sinoStars.big a:last-child {margin-right: 0;}



.ndetail-comment {padding: 20px;}
.ndetail-comment-button {overflow: hidden;}
.ndetail-comment-button a {display: block; width: 90px; height: 32px; line-height: 32px; text-align: center; float: right; font-size: 14px; color: #fff; background: #3493ee; border-radius: 4px;}
.ndetail-comment-list .item {padding: 20px 0; border-bottom: 1px solid #cbd3de; overflow: hidden;}
.ndetail-comment-list .item .portrait {width: 52px; height: 52px; float: left; font-size: 0;}
.ndetail-comment-list .item .portrait img {width: 52px; height: 52px; border-radius: 50%;}
.ndetail-comment-list .item .con {width: calc(100% - 52px); height: auto; float: right; min-height: 52px; position: relative; box-sizing: border-box; padding: 0 120px 0 15px;}
.ndetail-comment-list .item .con .sinoStars {position: absolute; right: 0; bottom: 0;}
.ndetail-comment-list .item .con .name {font-size: 16px; font-weight: bold; color: #333333;}
.ndetail-comment-list .item .con .note {font-size: 14px; color: #666666; padding-top: 5px;}
.ndetail-comment-list .item .con .text {font-size: 14px; color: #666666; padding-top: 15px;}



.study-l {width: 320px; float: left;}
.study-r {width: 850px; box-sizing: border-box; padding: 0 20px; float: right;}
.live {box-sizing: border-box; padding: 0 20px;}
.study-main {padding: 10px 0 30px 0;}

.study-menu .title {height: 60px; border-bottom: 1px solid #ddd; padding: 0 20px;}
.study-menu .title span {display: block; height: 60px; line-height: 60px; font-size: 16px; font-weight: bold; color: #333; background: url("../images/study-menu.png") no-repeat left center / auto 14px; padding-left: 34px;}
.study-menu .list .group {border-bottom: 1px solid #ddd;}
.study-menu .list .group:last-child {border-bottom: 0 none;}
.study-menu .list .group .name a {display: block; font-size: 16px; color: #333333; height: 50px; line-height: 50px; padding: 0 40px 0 20px; position: relative;}
.study-menu .list .group .name a:after {content: ''; display: block; width: 12px; height: 8px; position: absolute; right: 20px; top: 50%; margin-top: -4px; background: url("../images/menu-arrow.png") no-repeat center / 12px 7px;}
.study-menu .list .group .list {display: none; padding: 10px 20px;}
.study-menu .list .group .list .item{padding: 10px 0px;}
.study-menu .list .group .list .item a {display: block; line-height: 20px; font-size: 14px; color: #333; padding-left: 25px; position: relative;}
.study-menu .list .group .list .item a:before {content: ''; display: block; width: 20px; height: 20px; background: url("../images/menus.png") no-repeat -60px 0 / 120px 40px; position: absolute; left: 0; top: 50%; margin-top: -10px;}
.study-menu .list .group .list .item a.on {color: #083b90;}
.study-menu .list .group .list .item a.on:before {background-position-y: -20px;}
.study-menu .list .group .list .item span.learned{
    font-size: 12px; display:inline-block;background:#71d36f;margin-left: 10px;color: #fff;border-radius:3px;padding: 2px 3px;line-height: 12px;
}

.study-menu .list .group.on .name a {background: #eff3f7;}
.study-menu .list .group.on .name a:after {-ms-transform: rotate(180deg); transform: rotate(180deg);}
.study-menu .list .group.on .list {display: block;}


.study-player {font-size: 0; width: 810px; min-height: 400px; max-height: 600px;}
.study-player img {width: 100%; border-radius: 8px;}

.study-player .time-label{
    position: absolute;
    left: 50% ;top:50%;
    transform:translate(-50%,-50%);
    height: 40px;
    padding: 5px 50px;
    background: rgba(0,0,0,0.5);
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border-radius: 50px;
}
.study-player .video-time-label{
    position: absolute;
    left: 50% ;top:50%;
    transform:translate(-50%,-50%);
    height: 40px;
    padding: 5px 50px;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border-radius: 50px;
}
.study-player .video-time-label .count-label b{
    width: 30px;
    height: 50px;
    background: rgba(8, 59, 144, .8);
    color: #fff;
    padding: 0px 4px;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    margin: 0 5px;
    border-radius: 8px;
}

.study-form {padding-top: 20px; border-top: 1px solid #cbd3de;}
.study-form .portrait {width: 60px; height: 60px; font-size: 0; float: left;}
.study-form .portrait img {width: 60px; height: 60px; border-radius: 50%;}
.study-form .con {width: calc(100% - 60px); height: auto; float: right; box-sizing: border-box; padding-left: 20px;}
.study-form .con .txtbox {font-size: 0;}
.study-form .con .txtbox textarea {width: 100%; height: 140px; box-sizing: border-box; border: 1px solid #cbd3de; border-radius: 4px; padding: 8px 10px; font-size: 14px; color: #333;}
.study-form .con .btnbox {padding-top: 20px;}
.study-form .con .btnbox input.btn {width: 120px; height: 40px; float: right; line-height: 40px; background: #3493ee; border: 0 none; border-radius: 4px; font-size: 16px; color: #fff; box-shadow: 0 5px 15px rgba(27, 126, 242, .15);}


.study-ntit {position: relative;}
.study-ntit:after {content: ''; display: block; width: 100%; height: 1px; background: #ddd; position: absolute; left: 0; bottom: 0;}
.study-ntit span {display: inline-block; padding: 12px 0; font-size: 16px; color: #083b90; font-weight: bold; position: relative;}
.study-ntit span:after {content: ''; display: block; width: 100%; height: 4px; background: #083b90; position: absolute; left: 0; bottom: 0; z-index: 20;}
.study-ntit a.sino-btn{
    display: inline-block;
    float: right;
    width: 100px;
    background: #3493ee;
    color: #fff;
    border-radius: 3px;
    height: 28px;
    line-height: 28px;
    margin-top: 10px;
    text-align: center;
}
.study-mark {background: #eff3f7; border: 1px solid #cbd3de; border-radius: 6px; padding: 10px 20px; font-size: 14px; color: #5880c6; line-height: 24px; margin-top: 20px;}

.study-comment .group {border-bottom: 1px solid #cbd3de; padding: 20px 0; overflow: hidden;}
.study-comment .group .portrait {width: 50px; height: 50px; float: left; font-size: 0;}
.study-comment .group .portrait img {width: 50px; height: 50px; border-radius: 50%;}
.study-comment .group .con {width: calc(100% - 50px); height: auto; float: right; box-sizing: border-box; padding-left: 15px;}
.study-comment .group .con .name {font-size: 16px; font-weight: bold; color: #333;}
.study-comment .group .con .date {font-size: 14px; color: #666666; padding-top: 5px;}
.study-comment .group .con .text {font-size: 14px; color: #666666; padding-top: 10px;}
.study-comment .group .con .opera {overflow: hidden; padding-top: 10px;}
.study-comment .group .con .opera ul {float: right; overflow: hidden}
.study-comment .group .con .opera ul li {float: left; padding-left: 30px;}
.study-comment .group .con .opera ul li:first-child {padding-left: 0;}
.study-comment .group .con .opera ul li a {display: block; font-size: 14px; color: #5880c6; position: relative; padding-left: 20px;}
.study-comment .group .con .opera ul li a:before {content: ''; display: block; width: 14px; height: 14px; position: absolute; left: 0; top: 50%; margin-top: -7px; background: url("../images/study-comment.png") no-repeat left top / auto 28px;}
.study-comment .group .con .opera ul li a.icon-good:before {background-position-x: 0;}
.study-comment .group .con .opera ul li a.icon-reply:before {background-position-x: -14px;}
.study-comment .group .con .opera ul li a.icon-del:before {background-position-x: -28px;}
.study-comment .group .con .opera ul li a.on:before {background-position-y: -14px;}
.study-comment .group .con .reply {background: #eff3f7; border-radius: 6px; padding: 0 15px; margin-top: 10px;}
.study-comment .group .con .reply .item {padding: 15px 0; border-bottom: 1px solid #cbd3de;}
.study-comment .group .con .reply .item:last-child {border-bottom: 0 none;}
.study-comment .group .con .reply .item .reply-to {font-size: 14px; color: #666666;}
.study-comment .group .con .reply .item .reply-to span {color: #5880c6;}
.study-comment .group .con .reply .item .reply-to span.split {color: #999;margin: 0 5px;}
.study-comment .group .con .reply .item .foot {overflow: hidden;}
.study-comment .group .con .reply .item .foot .date {float: left;}
.study-comment .group .con .reply .item .foot .del {float: right;  margin-left: 10px;}
.study-comment .group .con .reply .item .foot .del a {display: block; font-size: 14px; color: #5880c6; position: relative; padding-left: 20px;}
.study-comment .group .con .reply .item .foot .del a:before {content: ''; display: block; width: 14px; height: 14px; position: absolute; left: 0; top: 50%; margin-top: -7px; background: url("../images/study-comment.png") no-repeat -28px top / auto 28px;}
.study-comment .group .con .reply .item .foot .rep {float: right;}
.study-comment .group .con .reply .item .foot .rep a {display: block; font-size: 14px; color: #5880c6; position: relative; padding-left: 20px;}
.study-comment .group .con .reply .item .foot .rep a:before {content: ''; display: block; width: 14px; height: 14px; position: absolute; left: 0; top: 50%; margin-top: -7px; background: url("../images/study-comment.png") no-repeat -14px top / auto 28px;}







.usdata-portrait {width: auto; height: auto; padding: 20px; position: relative; background: #ffffff; margin-top: 20px;}
.usdata-portrait .img {width: 116px; height: 116px; border-radius: 50%; box-sizing: border-box; font-size: 0; position: absolute; left: 20px; top: 20px; padding: 8px; background: #dfe6ec;}
.usdata-portrait .img img {width: 100px; height: 100px; border-radius: 50%;}
.usdata-portrait .con {width: auto; height: 116px; box-sizing: border-box; padding-left: 146px;}
.usdata-portrait .con .btn {width: auto; height: auto; padding-top: 22px;}
.usdata-portrait .con .btn a {display: block; width: 118px; height: 34px; line-height: 34px; font-size: 14px; color: #0072ff; border: 1px solid #0072ff; border-radius: 6px; text-align: center;}
.usdata-portrait .con .txt {width: auto; height: auto; font-size: 14px; color: #999999; line-height: 20px; padding-top: 15px;}
.