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

body {
    background: #f5f7fa;
}
.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;
}
ul,ol,li {  list-style: none; margin-bottom: 0 }


.line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.line-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/* header */
.header-wrap {
    background: #9fd7ff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.header-wrap .head {
    height: 106px; display: flex; justify-content: space-between; align-items: center;
}

.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: #343C60;
    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: 680px;
}

.header-wrap .nav-item>li.active,
.header-wrap .nav-item>li:hover { transition: all 0s ease 0s;
    /* font-weight: bold; */
    color: #fff; background: #368bc7;
    opacity: 1;
}
.header-wrap .nav-item>li.active a,
.header-wrap .nav-item>li:hover a{color: #fff;}
.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: #368bc7;
    border-radius: 2px;
}

.header-wrap .nav-item>li {
    display: inline-block;
    font-size: 18px; padding: 0 15px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #343C60;
    opacity: 0.9;
    margin-left: 0px;
    height: 106px;
    line-height: 106px;
    cursor: pointer;
    position: relative;
}
.header-wrap .nav-item>li a{ color: #343C60; display: inline-block; width: 100%; height: 100%;}
.header-wrap .nav-item>li img {
    width: 12px;
    margin-left: 4px;
}

.header-wrap .search-box {
    margin-top: 33px;
}

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

.header-wrap .search-box .select-box {
    width: 92px;
    height: 40px;
    line-height: 40px;
    background: #F6F9FD;
    border-radius: 4px 0px 0px 4px;
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
    opacity: 0.9;
    position: relative;
}

.header-wrap .search-box .select-box>div {
    padding: 0px 4px;
    text-align: center;
    width: 70px;
    cursor: pointer;
}

.header-wrap .search-box .select-box img {
    display: block;
    width: 12px;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}
#toast-container.toast-bottom-center>div, #toast-container.toast-top-center>div{width: 400px !important; line-height: 40px;}
.header-wrap .search-box .search-input {
    width: 170px;
    height: 40px;
    background: #F6F9FD;
    border-radius: 0px 4px 4px 0px;
    margin-left: 1px;
    position: relative;
}

.header-wrap .search-box .search-input input {
    width: 170px;
    height: 100%;
    display: block;
    outline: none;
    border: 0;
    background: transparent;
    padding: 0 34px 0 10px;
	font-size: 14px;
}

.header-wrap .search-box .search-input img {
    position: absolute;
    width: 14px;
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.header-wrap .search-box .select-course-wrap {
    position: absolute;
    top: 40px;
    z-index: 10;
    display: none;
}

.header-wrap .search-box .select-course {
    position: relative;
    top: 10px;
    margin: 0;
    list-style: none;
    width: 113px;
    height: 189px;
    background: #FFFFFF;
    border: 1px solid #EAEDF6;
    border-radius: 10px;
}

.header-wrap .search-box .select-course:before,
.quality-courses:before,
.header-wrap .user-setting:before {
    box-sizing: content-box;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -16px;
    right: 41px;
    padding: 0;
    border-bottom: 8px solid #FFFFFF;
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    display: block;
    content: '';
    z-index: 12;
}
.app_box:before{
    box-sizing: content-box;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -16px;
    right:125px;
    padding: 0;
    border-bottom: 8px solid #FFFFFF;
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    display: block;
    content: '';
    z-index: 12;
}

.header-wrap .search-box .select-course:after,
.quality-courses:after,
.header-wrap .user-setting:after {
    box-sizing: content-box;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -18px;
    right: 40px;
    padding: 0;
    border-bottom: 9px solid #EAEDF6;
    border-top: 9px solid transparent;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    display: block;
    content: '';
    z-index: 10
}

.header-wrap .search-box .select-course li {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
    line-height: 37px;
    cursor: pointer;
}

.header-wrap .search-box .select-course li.slelct-actie {
    color: #4297FC;
}

.quality-courses {
    position: absolute;
    left: -60px;
    top: 81px;
    list-style: none;
    width: 690px;
    height: 230px;
    background: #FFFFFF;
    border: 1px solid #EAEDF6;
    border-radius: 10px;
    padding-top: 20px;
    z-index: 99;
    display: none;
}

.quality-courses:before {
    right: auto;
    left: 85px;
}

.quality-courses:after {
    right: auto;
    left: 84px;
}

.quality-courses span {
    width: 147px;
    height: 32px;
    line-height: 32px;
    background: #F6F9FD;
    border-radius: 16px;
    display: block;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
    float: left;
    text-align: center;
    margin: 0px 0px 20px 20px;
}

.quality-courses span:hover,
.quality-courses .active {
    color: #4297FC;
    background: rgba(66, 151, 252, .1);
}

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

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

.header-wrap .head .login-register .login {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
    cursor: pointer;
}

.header-wrap .head .login-register .register {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    cursor: pointer;
    color: #7F859C;
}

.header-wrap .head .login-register i {
    display: inline-block;
    margin: 0 8px;
    width: 1px;
    height: 14px;
    position: relative;
    top: 2px;
    opacity: 0.8;
    background: #7F859C;
}

.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: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
    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;
    height: 150px;
    background: #FFFFFF;
    border: 1px solid #EAEDF6;
    border-radius: 10px;
    position: absolute;
    top: 81px;
    right: -5px;
    display: none;
}

.header-wrap .user-setting span,.header-wrap .user-setting a {
    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,.header-wrap .user-setting a:hover {
    color: #4297FC;
    font-weight: 400;
}

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

.header-wrap .user-setting span:last-child,.header-wrap .user-setting a:last-child {
    border-top: 1px solid rgba(234, 237, 246, 1);
}

/* footer */
.footer-wrap {
    background: #FFFFFF;
    overflow: hidden;
}

.footer1-box {
    padding: 32px 0;
    border-bottom: 1px solid rgba(234, 237, 246, 1);
}

.footer1 {
    overflow: hidden;
}

.footer1 .logo {
    max-width: 140px;
    /* width: 54px;
    height: 54px; */
}
.footer1-left{ display: flex; justify-content: center; align-items: center;}
.footer1-left .text-box {
    margin-left: 20px; margin-top: 20px;
}

.footer1-left .text-box .name {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #343C60;
    line-height: 30px;
    padding: 14px 0;
}

.footer1-left .text-box .orter {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(52, 60, 96, 1);
    line-height: 22px;
}

.footer1-right ul {
    list-style: none;
}

.footer1-right ul li {
    margin-left: 50px;
    width: 64px;
    text-align: center;
    float: left;
}

.footer1-right ul li img {
    display: block;
    width: 64px;
    height: 64px;
    padding: 5px;
    border: 1px solid #EAEDF6;
}

.footer1-right ul li span {
    display: block;
    padding-top: 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
}

.footer2 {
    height: 58px;
    line-height: 58px;
}

.footer2-left li {
    list-style: none;
    display: inline-block;
    margin-right: 50px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(52, 60, 96, 1);
    cursor: pointer;
}

.footer2-left li.active,
.footer2-left li:hover
{
    color: #4297FC;
}

.footer2-right {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343C60;
}
#content-container{ margin-top: 120px;}
.app_box{
    display: none;
    width: 250px;
    background: #fff;
    flex-flow: column;
    align-items: flex-start;
    padding: 10px;
    box-shadow: 0px 3px 10px 5px rgb(34 35 40 / 30%);
    border-radius: 4px;
    position: absolute;
    top: 81px;
    height: 165px;
    left: 32px;
    margin: 0 auto;
    z-index: 11;
    margin-left: -125px;
}
.app-box::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #fff;
    right: 0;
    margin: auto;
    position: absolute;
    left: 0;
    top: -19px;
}
.app-box h4 {
    font-size: 16px;
    font-weight: 600;
}
.app {
    width: 100%;
    height: 100px;
}
.app-fl{
    width:100px;
    float:left;
}
.app-fr{
    width:120px;
    height:100px;
    float:right;
}
.android{
    overflow: hidden;
    display: block;
    width: 100%;
    height: 37px;
    padding: 0;
    position: relative;
    margin-bottom: auto;
    margin-top: 30px;
}
.ios{
    overflow: hidden;
    display: block;
    width: 100%;
    height: 37px;
    padding: 0;
    position: relative;
}
.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;
}
.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: #ffbf00;}
.color-FFCF4E{color: #FFCF4E;}
.color-FFC410{color: #FFC410;}
.color-lvse{color: #45E19F;}
.color-baise{color: #fff;}
.color-A4ABC7{color: #A4ABC7;}
/*width*/
.w100px{ width: 100px;}
.w150px{ width: 150px;}
.w200px{ width: 200px;}
.w10{ width: 10%;}
.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%;}
.w100 {	width: 100%;}
.lin30{ line-height: 30px;}
/*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: #7F859C; background: #F3F4F7; border: 1px solid #F3F4F7; margin: 2px 5px; border-radius: 4px;}
.btnpyd:hover{ color: #fff; background: #4297FC; border: 1px solid #4297FC;}
.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;}

.ui-paging-container{color:#666;font-size: 12px;}
.ui-paging-container ul{overflow: hidden;text-align: center;margin-bottom: 0;padding: 10px 0 40px;}
.ui-paging-container ul,.ui-paging-container li{list-style: none;}
.ui-paging-container li{display: inline-block;padding: 5px 10px;margin-left: 5px;color:#666;}
.ui-paging-container li.ui-pager{cursor: pointer; border:1px solid #fff; background-color: #fff; border-radius: 2px;}
.ui-paging-container li.ui-pager:hover,.ui-paging-container li.focus{background-color: #288df0;color:#FFFFFF;}
.ui-paging-container li.ui-paging-ellipse{border:none;}
.ui-paging-container li.ui-paging-toolbar{padding:0;}
.ui-paging-container li.ui-paging-toolbar select{height:26px;border:1px solid #ddd;color: #666;}
.ui-paging-container li.ui-paging-toolbar input{line-height: 26px; height:26px;padding:0;border:1px solid #ddd;text-align: center;width: 30px;margin:0 0 0 5px;}
.ui-paging-container li.ui-paging-toolbar a{vertical-align: middle; text-decoration: none;display: inline-block;height:26px;border:1px solid #ddd;vertical-align: top;border-radius: 2px;line-height: 26px;padding:0 3px;cursor: pointer;margin-left: 5px;color: #666;}
.ui-paging-container li.ui-pager-disabled,.ui-paging-container li.ui-pager-disabled:hover{background-color: #f6f6f6;;cursor: default;border:none;color:#7F859C;}