.page-wrap {
    min-width: 1340px;
}

body {
    background: #ebf2fb;
}
.img-responsive{max-width: 100%}
.page-wrap>.container-wrap>.container-box>div,
.page-wrap>header>div,
.page-wrap>.footer-wrap>div>div {
    width: 1300px;
    margin: 0 auto;
}
* {transition: all 0.1s ease 0s;}

a {text-decoration: none; }
a:link{ text-decoration:none; } a:visited{ text-decoration:none; } a:hover{ text-decoration:none; }

* {
    margin: 0;
    padding: 0;
}
.fl {
    float: left;
}

.fr {
    float: right;
}
ul,ol,li {  list-style: none; margin-bottom: 0 }
.form-group{position: relative;}
/* header */
.header-wrap {
    background: #FFFFFF;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.header-wrap .head {
    height: 106px;
}

.header-wrap .head .logo {
    height: 106px;
    line-height: 106px;
}

.header-wrap .head .logo img {
    display: inline-block;
    width: 54px;
    height: 54px;
}

.header-wrap .head .logo span {
    margin-left: 8px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #fff;
    position: relative;
    top: 2px;
}

.header-wrap .head>div {
    float: left;
}

.header-wrap .nav-box {
    margin-left: 45px;
}

.header-wrap .nav-item {
    margin: 0;
    height: 106px;
    width: 480px;
}

.header-wrap .nav-item>li.active,
.header-wrap .nav-item>li:hover { transition: all 0s ease 0s;
    font-weight: bold;
    color: #4297FC;
    opacity: 1;
}

.header-wrap .nav-item>li.active::after,
.header-wrap .nav-item>li:hover::after {transition: all 0s ease 0s;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: #4297FC;
    border-radius: 2px;
}

.header-wrap .nav-item>li {
    display: inline-block;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
    opacity: 0.9;
    margin-left: 28px;
    height: 106px;
    line-height: 106px;
    cursor: pointer;
    position: relative;
}

.header-wrap .nav-item>li img {
    width: 12px;
    margin-left: 4px;
}

.header-wrap .head .login-register-box {
    float: right;
}

.header-wrap .head .user-info-box {
    cursor: pointer;
    position: relative;
    height: 106px;
}

.header-wrap .head .user-info-box .user-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    line-height: 106px;
}

.header-wrap .head .user-info-box>span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fff;
    margin: 0 4px 0 10px;
    line-height: 106px;
}

.header-wrap .head .user-info-box .arrow {
    width: 12px;
    line-height: 106px;
}

.header-wrap .user-setting {
    width: 99px;
    background: #FFFFFF;
    border: 1px solid #EAEDF6;
    border-radius: 10px;
    position: absolute;
    top: 81px;
    right: -5px;
    display: none;
}

.header-wrap .user-setting span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: rgba(52, 60, 96, 1);
    line-height: 42px;
}

.header-wrap .user-setting span:hover {
    color: #4297FC;
    font-weight: 400;
}

.header-wrap .user-setting span:first-child {
    margin-top: 10px;
}

.header-wrap .user-setting span:last-child {
    border-top: 1px solid rgba(234, 237, 246, 1);
}
.stydy-page-wrap .container-wrap>div>.content-box,
.stydy-page-wrap .header-wrap .head {
    padding: 0 20px;
    width: 100%;
}

.stydy-page-wrap .header-wrap .head,
.stydy-page-wrap .header-wrap .head .logo,
.stydy-page-wrap .header-wrap .head .login-register-box .user-info-box,
.stydy-page-wrap .header-wrap .head .user-info-box>span,
.stydy-page-wrap .header-wrap .head .login-register {
    height: 70px;
    line-height: 70px;
}

.stydy-page-wrap .header-wrap .head .logo img {
    position: relative;
    top: -6px;
}

.stydy-page-wrap .header-wrap .user-setting {
    top: 60px;
}

.stydy-page-wrap .header-wrap .head {
    background: linear-gradient(120deg, rgb(15, 117, 255) 60%, rgb(45, 220, 211) 100%);
    /*background: #021132;*/
    border-bottom: 1px solid #2c3b41;
    box-shadow: 0px 6px 22px 0px rgba(66, 151, 252, 0.1);
}

.stydy-page-wrap .container-personal-center .personal-center {
    padding: 0;
}

.stydy-page-wrap .container-personal-center .content-box {
    display: flex;
    height: 100vh;
    justify-content: space-between;
}

.container-personal-center .personal-center .content-box {
    position: relative;
}

.container-personal-center .content-box .menu {

    border: 1px solid #2c3b41;
    border-radius: 0;
   border-top: 1px; border-left: 0;
    margin-top: 70px;     background: #021132;
    flex: 1;
    padding-top: 6px;
    position: fixed;
z-index: 999;
   min-width: 240px; max-width: 240px;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom:80px;
    display: flex;; flex-direction: column;
    top: 0;
    left: 0;
    bottom: 0;

}
.container-personal-center .content-box .menu::-webkit-scrollbar {

width: 4px;
    height: 4px;
}

.container-personal-center .content-box .menu::-webkit-scrollbar-button {

width: 4px;
    height: 4px;
}

.container-personal-center .content-box .menu::-webkit-scrollbar-track {

background: #eee;
    border-radius: 0px;
}

.container-personal-center .content-box .menu::-webkit-scrollbar-track-piece {

background: #f5f5f5;
    border-radius: 0px;
}

.container-personal-center .content-box .menu::-webkit-scrollbar-thumb {

background: #D8D8D8;
    border-radius: 0px;
}

.container-personal-center .content-box .menu::-webkit-scrollbar-corner {

background: #fff;
}


.container-personal-center .content-box .menu li {
    width: 100%;
    line-height: 52px;
    left: 52px;
    margin: 0 auto;
    font-size: 14px;
    cursor: pointer;
}

.container-personal-center .content-box .menu li a{display: inline-block; width: 100% ;  padding-left: 65px; color: #fff;}
.menu > li > a{ border-bottom: 1px solid #20233d;}
.container-personal-center .content-box .menu li .icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    margin-top: 12px;
    float: right;
    margin-right: 20px;
}

.container-personal-center .content-box .menu li img {
    width:16px;
    margin: 0px; margin-right: 5px;
    position: relative;
    top: -2px;
}

.container-personal-center .content-box .menu > li.active,
.container-personal-center .content-box .menu > li:hover {
    background: rgba(66, 151, 252, .1);
    /*font-weight: bold;*/
    color: #4297FC;
}
 .content-box .menu > li.active > a,
 .content-box .menu > li:hover > a{ color: #4297FC; font-weight: bold}
 .content-box .content {
     padding: 15px;
    padding-left: 260px;
    min-height: 400px;
}
.menu-nav{  padding-left:30px; display: none; border-bottom: 1px solid #20233d;}
.container-personal-center .content-box .menu li .menu-nav li:hover a,
.container-personal-center .content-box .menu li .menu-nav li.active a{ color: #4297FC;}
.container-personal-center .content-box .menu li .menu-nav li{ line-height: 40px;}
.stydy-page-wrap .container-personal-center .content-box .menu li .active-icon {
    display: none;
}

.stydy-page-wrap .container-personal-center .content-box .menu > li:hover .active-icon,
.stydy-page-wrap .container-personal-center .content-box .menu > li.active .active-icon {
    display: inline-block;
}

.stydy-page-wrap .container-personal-center .content-box .menu > li:hover .default-icon,
.stydy-page-wrap .container-personal-center .content-box .menu > li.active .default-icon {
    display: none;
}

.stydy-page-wrap .content-box .content {
    margin-top: 70px; width: 100%;
    flex: 1;
}

.stydy-page-wrap .course-infor-wrap {

    margin-bottom: 26px;
    border-bottom: 1px solid #2c3b41;
}

.stydy-page-wrap .course-infor {
    margin: 26px 26px 0;
    border: 1px solid #EAEDF6;
    border-radius: 10px;
}

.stydy-page-wrap .course-infor>img {
    width: 100%;
    height: 100px;
    border-radius: 10px 10px 0px 0px;
    object-fit: cover;
    overflow: hidden;
}

.stydy-page-wrap .course-infor-text {
    padding: 20px 16px; text-align: center;
}

.stydy-page-wrap .course-infor-text .title {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 22px;
}

.stydy-page-wrap .course-infor-text .stars>img {
    display: inline-block;
    width: 16px;
}

.stydy-page-wrap .course-infor-text .stars span {
    font-size: 16px;
    font-weight: 400;
    color: #FFCF4F;
    line-height: 22px;
}

.stydy-page-wrap .course-infor-text .info {
    font-size: 14px;
    font-weight: 400;
    color: #7F859C;
    line-height: 22px;
}

.stydy-page-wrap .container-personal-center .content-box .menu > li.active,
.stydy-page-wrap .container-personal-center .content-box .menu > li:hover {
    background: transparent;
}

.stydy-page-wrap .content-box .content .personalCenterCourse-content .study-content {
    background: #fff;
    border: 1px solid #EAEDF6;
    border-radius: 10px;
}

.header-wrap .nav-item>li .img-responsive{
    width:100px;
    height: auto;
}
.header-wrap .nav-item>li .android>img{
    position: absolute;
    top: -484px;
    left: 0;
    width: 135px;
}
.header-wrap .nav-item>li .ios>img{
    position: absolute;
    top: -430px;
    left: 0;
    width: 135px;
}


.more {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #7F859C;
    cursor: pointer;
}

.more:hover {
    color: #4297FC;
}

.course-wrap {
    overflow: hidden;
    padding-bottom: 30px;
}

.course-box {
    width: calc(100% - 330px);
}

.com-head {
    margin-top:10px;
    overflow: hidden;
}

.com-head .title {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #343C60;
    position: relative;
    margin-right: 20px;
}

.com-head .title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: '';
    width: 80px;
    height: 8px;
    background: #4297FC;
    opacity: 0.6;
    border-radius: 4px;
}
.zuoye-tit > div{ min-width: 60px; text-align: center;}
.zuoye-tit >div:first-child,.zuoye-tit >div:nth-child(2){text-align: left;}
/*btns*/
.btnqxb{ display: inline-block; padding: 8px 40px; border-radius: 100px; border: 1px solid #4397FC; color: #4397FC; margin: 5px 10px;}
.btnqdb{ display: inline-block; padding: 8px 40px; border-radius: 100px; border: 1px solid transparent;  background-color: #68abff; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, #68abff , #5f63ff); color: #fff;  margin: 5px 10px;}

.abbtnqxa{ display: inline-block; padding: 8px 40px; border-radius: 100px; position: absolute; right: 10px; top: 10px; border: 1px solid #4397FC; color: #4397FC; margin: 5px 10px;}
.abbtnqxb{ display: inline-block;  padding: 8px 40px;  position: absolute; right: 10px; top: 10px;  border-radius: 100px; border: 1px solid #4397FC;
    background-color: #68abff; /* 不支持线性的时候显示 */ background-image: linear-gradient(to right, #68abff , #5f63ff); color: #fff;  margin: 5px 10px;}
.btnpya{ display: inline-block; padding: 5px 15px; color: #45E19F;   border: 1px solid #45E19F; margin: 2px 5px; border-radius: 4px;}
.btnpya:hover{ color: #fff; background: #45E19F;}

.btnpyc{ display: inline-block; padding: 5px 15px; color: #1b91ff;   border: 1px solid #1b91ff; margin: 2px 5px; border-radius: 4px;}
.btnpyc:hover{ color: #fff; background: #1b91ff;}


.btnpyb{ display: inline-block; padding: 5px 15px; color: #fff; background: #4297FC; border: 1px solid #4297FC; margin: 2px 5px; border-radius: 4px;}
.btnpyb:hover{ color: #fff; background: #3489EE;}
.btnpyd{ display: inline-block; padding: 5px 15px; color: #fff; background: #c81010; border: 1px solid #c81010; margin: 2px 5px; border-radius: 4px;}
.btnpyd:hover{ color: #fff; background: #ff0000; border: 1px solid #ff0000;}
.btnpyd a{color: #fff}
.btnpy{ display: inline-block; padding: 5px 15px; color: #7F859C; border: 1px solid #F3F4F7; margin: 2px 5px; border-radius: 4px;}
.btnpy:hover{ color: #fff; background: #4297FC; border: 1px solid #4297FC;}


.btnqx{ display: inline-block; padding: 5px 15px; background-color: #EAEDF6; border: 1px solid #EAEDF6; border-left: 2px; border-right: 2px; margin: 2px 5px; border-radius: 4px;}
.btnqx:hover{ color: #fff; background: #1b91ff;}

.btnqxcz{ display: inline-block; padding: 5px 15px; background-color: #fff; border: 1px solid #C5CDEB; margin: 2px 5px; border-radius: 4px;}
.btnqxcz:hover{ color: #fff; background: #1b91ff;}


.btnyuana{ display: inline-block; padding: 5px 15px; color: #fff; background: #1b91ff; border: 1px solid #1b91ff;  margin: 2px 5px; border-radius: 100px;}
.btnyuanb{ display: inline-block; padding: 5px 15px; color: #1b91ff; background: #fff; border: 1px solid #1b91ff; margin: 2px 5px; border-radius: 100px;}






/*public*/
.fenyeys{ float:left; width:100%; display: inline-block; padding: 20px 10px; text-align:center;  font-size: 12px; font-family: "微软雅黑";}
.fenyeys span{  margin:2px 6px; border-radius:25px;  padding:5px 10px; background:#1B59A6; color:#fff; }
.fenyeys a{ margin:2px 6px; border-radius:25px; padding:5px 10px; background:#ccc; color:#fff; }
.fenyeys a:hover{ background:#1B59A6;}
.nyright-con .col-md-12{margin: 0px; padding: 0px;}












.p0{padding-left: 0; padding-right: 0;}
.p0{ padding-left: 0px; padding-right: 0px;}
.pl0 {	padding-left:0;}
.pr0 {	padding-right:0;}

.p8{padding-right: 8px;
    padding-left:8px;}
.p15{ padding-left: 15px; padding-right: 15px;}
.ml0 {	margin-left:0 ;}
.mr0 {	margin-right:0;}
.mt0{ margin-top: 0;}
.ml100 {	margin-left:100px ;}
.fl {	float: left;}
.fr {	float: right;}
.f12{font-size: 12px;}
.f14{font-size: 14px}
.f16{font-size: 16px}
.f18{font-size: 18px}
.f24{ font-size: 24px}
.f30{ font-size: 30px}
.font-w{font-weight: bold;}
.mt10 {	margin-top: 10px !important;}
.mt20 {	margin-top: 20px;}
.mt30 {	margin-top: 30px;}
.mt40{ margin-top: 40px;}
.mt6 {	margin-top: 6px;}
.m10{ margin: 0px 10px;}
.mt60 {	margin-top: 60px;}
.tac {	text-align: center;}
.pl20{ padding-left: 20px;}
.plr80{ padding-left: 80px; padding-right: 80px;}
.pb10 {	padding-bottom: 10px;}
.borderb1 {	border-bottom:1px solid #d4d4d4;}
.plr10{padding-left: 10px; padding-right: 10px;}

.plr20{padding-left: 20px; padding-right: 20px;}

.bor1{ border: 1px solid #ddd;}
.rela{position: relative}
.ba-f5f5f5{ background: #f5f5f5;}
.ba-fff{background: #fff;}
.ba-e5{ background: #e5e5e5}
.bg-ecf5ff{ background-color: #ecf5ff;}
.bg-EAEDF6{ background-color: #EAEDF6}
.bg-F5F7FA{background: #F5F7FA;}
.nobord{ border: 0;}
.nobord-b{border-bottom: 0;}

/*color*/
.color-red{color: #ff0000}
.color-redn{color: #FF8788;}
.color-chengse{color: #f7704e}
.color-zhuse{color: #4397FC}
.color-zhusen{color: #4297FC;}
.color-huise{color: #999}
.color-heise{color: #343C60;}
.color-EAEDF6{color: #EAEDF6;}
.color-7F859C{color: #7F859C}
.color-huise2{color: #91a0b5}
.color-daochu{color: #91a0b5}
.color-iconhui{color: #cad5e6}
.color-zhuse2{color: #55b0ed;}
.color-huangse{color: #0dad7e;}
.color-9999CC{color: #9999CC;}
.color-FFC410{color: #FFC410;}
.color-lvse{color: #00CCCC;}
.color-baise{color: #fff;}
.color-A4ABC7{color: #A4ABC7;}
.color-FFCC00{color:#FFCC00; }

.zuoye-tag .color-red{ border: 1px solid #FF0000;}
.zuoye-tag .color-chengse{ border: 1px solid #f7704e;}
.zuoye-tag .color-lvse{ border: 1px solid #00CCCC;}
.zuoye-tag .color-A4ABC7{ border: 1px solid #A4ABC7;}
.zuoye-tag .color-535387{ border: 1px solid #535387;}
.zuoye-tag .color-zhuse{ border: 1px solid #4397FC;}
.zuoye-tag .color-huise{ border: 1px solid #999;}
.zuoye-tag .color-heise{ border: 1px solid #343C60;}
.zuoye-tag .color-huangse{ border: 1px solid #0dad7e;}
.zuoye-tag .color-chengse{ border: 1px solid #f7704e;}
.zuoye-tag .color-9999CC{ border: 1px solid #9999CC;}
.zuoye-tag .color-CC0099{ border: 1px solid #CC0099;}
.zuoye-tag .color-FFCC00{ border: 1px solid #FFCC00;}
/*width*/
.w100px{ width: 100px;}
.w150px{ width: 150px;}
.w200px{ width: 200px;}
.w10{ width: 10%;}
.w5{ width: 5%;}
.w15{ width: 15%;}
.w35{ width: 35%;}
.w20{ width: 20%;}
.w25{ width: 25%;}
.w30{ width: 30%;}
.w40{ width: 40%;}
.w50{ width: 50%;}
.w60{ width: 60%;}
.w70{ width: 70%;}
.w80{ width: 80%;}
.w90 {	width: 90%;}
.w100 {	width: 100%;}
.lin30{ line-height: 30px;}