*{
	margin: 0;
	padding: 0;
}
:root{
    --primary: #4099ef;
    --success: #67c23a;
    --primary-text: #303133;
    --regular-text: #606266;
	--secondary-text: #909399;
    --border-base: #dcdfe6;
    --border-light: #e4e7ed;
    --border-lighter: #ebeef5;
    --bg-b: #000000;
    --bg-w: #ffffff;
    --theme-color: #45c595;
	--list-title: #6691f5;
}
body{
    color: #303133;
    word-spacing: 1px;
    font-size: 14px;
	max-width: 450px;
	margin-inline: auto;
}

a{
	text-decoration: none;
}
ol,
ul,
li{
	list-style: none;
}
input{
	background: none;
	outline: none;
	border: none;
}
button{
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
	outline: none;
}
.ellipsis{
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ellipsiss{
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.bg-white{
	background-color: var(--bg-w) !important;
}
.bg-grey{background-color: #EEEEEE;}
.bg{
	background: #f9f9f9 !important;
}
img{
	display: block;
}
.border-box{
	box-sizing: border-box;
}
.content-box{
	box-sizing: content-box;
}
.clearfix{
	clear: both;
}
.float-left{
	float: left;
}
.float-right{
	float: right;
}
.flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.mt-10{
	margin-top: 10px !important;
}
.mt-20{
    margin-top: 20px !important;
}
.mt-30{
    margin-top: 30px !important;
}
.icon{
    display: block;
    background-position: center;
    background-repeat: no-repeat;
}
.relative{
	position: relative;
}
.d-flex{display: flex;}
.justify-content-between{justify-content: space-between;}
.align-items-center{ align-items: center; }
.btn-color-red{ color: #ffffff; background-color: #2573D5; padding: 3px 12px; border-radius: 4px; }
/*
 * index
 */
body{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

.page{
    width: 100%;
    height: calc(100vh - 61px);
    overflow-x: hidden;
	background-color: #F5F5F5;
}
.gradual{
	background: linear-gradient(to bottom, #b0e1ef00 0%, #f5f5f5 30%),
	linear-gradient(to right, #b4e1f0, #bbc0e2);
}
.tabbar{
    width: 100%;
    height: 60px;
	position:fixed;
	bottom:0;
	z-index:999;
    background-color: var(--bg-w);
    overflow: hidden;
    border-top: 1px solid var(--border-lighter);
	max-width: 450px;
}
.tabbar .tabbar-item{
    flex: 1;
    overflow: hidden;
}
.tabbar-item a{
    display: block;
    width: 50px;
    height: 50px;
    margin: 5px auto;
    text-align: center;
    padding: 5px 0;
    box-sizing: border-box;
}
.tabbar-item .text{
    font-size: 12px;
    color: var(--primary-text);
    line-height: 20px;
}
.tabbar-item .iconPath,
.tabbar-item .selectedIconPath{
    width: 50px;
    height: 24px;
    padding: 0 13px;
    box-sizing: border-box;
}
.tabbar-item .iconPath img,
.tabbar-item .selectedIconPath img{
    width: 100%;
    height: 100%;
}
.tabbar-item .selectedIconPath{
	display: none;
}
.tabbar-item.active .text{
	color: #2573D5;
}
.tabbar-item.active .iconPath{
	display: none !important;
}
.tabbar-item.active .selectedIconPath{
	display: block !important;
}
/*
 * swiper
 */
.green-box{
	width: 100%;
	height: 120px;
}
.oval-box{
	width: 100%;
	height: 30px;
	border-radius: 50%/10px;
	margin-top: -15px;
}
.index.swiper-container{
	width: calc(100% - 20px);
	margin: -130px auto 0;
	height: 100px;
	border-radius: 8px;
}
.index.swiper-slide,
.index.swiper-wrapper,
.index.swiper-slide a{
	width: 100%;
}
.index.swiper-container img{
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}

/*
 * search
 */
.search-box{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
	display: flex;
	justify-content: space-between;
	background: #2573D5;
}
.search-box form{
	display: block;
	width: 60%;
}
.search-box .title{
	font-size: 16px;
	color: #ffffff;
	line-height: 30px;
	font-family: 宋体;
	font-weight: bold;
	margin-right: 10px;
}
.search-box input{
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 30px 0 15px;
    border-radius: 18px;
}
.search-box .icon-search{
    background-image: url(/public/app/img/search.png);
    width: 30px;
    height: 30px;
    background-size: 55%;
    position: absolute;
    top: 10px;
    right: 10px;
	border-radius: 18px;
	background-color: transparent;
}
.search-box input::-webkit-input-placeholder{
    color: #DDDDDD;
}
.search-box input::-moz-placeholder{
    color: #DDDDDD;
}
.search-box input::-ms-input-placeholder{
    color: #DDDDDD;
}

/*
 * menu-list
 */
.menu-list{
    width: calc(100% - 20px);
    margin: 10px auto;
    background-color: var(--bg-w);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 6px;
    padding: 10px 0 0;
	box-shadow: 0 0 4px #cecece;
}
.menu-list .menu-item{
    flex-basis: 20%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
}
.menu-list .menu-item a{
	width: 50px;
}
.menu-list .menu-item .menu-img{
    width: 50px;
    height: 50px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 19px;
}
.menu-list .menu-item .menu-img img{
    width: 100%;
    height: 100%;
}
.menu-list .menu-item .text{
    font-size: 12px;
    color: var(--primary-text);
    text-align: center;
    line-height: 24px;
}
.menu-list .menu-item:first-child .menu-img{
	background-color: #2572d4;
}
.menu-list .menu-item:nth-child(2) .menu-img{
	background-color: #fc6e21;
}
.menu-list .menu-item:nth-child(3) .menu-img{
	background-color: #f8bd20;
}
.menu-list .menu-item:nth-child(4) .menu-img{
	background-color: #2a2f4c;
}
.menu-list .menu-item:nth-child(5) .menu-img{
	background-color: #a196f1;
}
.menu-list .menu-item:nth-child(6) .menu-img{
	background-color: #75c1f0;
}
.menu-list .menu-item:nth-child(7) .menu-img{
	background-color: #9bd555;
}
.menu-list .menu-item:nth-child(8) .menu-img{
	background-color: #dd7543;
}
.menu-list .menu-item:nth-child(9) .menu-img{
	background-color: #5dd3dd;
}
.menu-list .menu-item:nth-child(10) .menu-img{
	background-color: #59a5d7;
}
/*
 * banner
 */
.banner{
	width: 100%;
	padding: 0 10px;
	margin-bottom: 5px;
}
.banner img{
	width: 100%;
	border-radius: 8px;
}
/*
 * list
 */
.list-box{
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}
.list-box .list-title{
	height: 40px;
	padding: 0 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.list-box .list{
	width: 100%;
	margin-inline: auto;
	padding: 10px;
	box-sizing: border-box;
}
#train-list{
	width: 100%;
}
.list-box .list-title-new{
	padding: 0;
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border-lighter);
	padding: 10px 0 10px;
}
.list-box .list-title .title{
	font-size: 16px;
	color: #2573D5;
	margin-right: 10px;
	font-family: 宋体;
	font-weight: bold;
}
.list-box .list-title-new .title{
	font-size: 18px;
	color: #0075ff;
	margin-right: 20px;
	font-weight: 400;
	position: relative;
	padding-left: 10px;
	line-height: 20px;
}
.list-box .list-title-new .title::before{
	display: block;
	content: "";
	clear: both;
	position: absolute;
	left: 0;
	top: 1px;
	width: 4px;
	height: 18px;
	background-color: #0075ff;
}
.list-box .list-title .subtitle{
	font-size: 12px;
	color: var(--secondary-text);
	flex: 1;
	overflow: hidden;
}
.list-box .list-title .icon-right{
	width: 40px;
	height: 40px;
	background-image: url(/public/app/img/right.png);
	background-size: 30%;
}
.list-box .list-item{
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
	background-color: #ffffff;
}
.list.list-course{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.list-course.list-course .list-item{
	width: calc(50% - 5px);
	margin-bottom: 0;
	border-radius: 4px;
	overflow: hidden;
}
.list-course.list-course .list-item a{

}
.list-box .list-item:last-child{
	border: none;
	margin-bottom: 0;
}
.list-box .list-item a{
	display: block;
}
.list-box .list-item a::after{
	clear: both;
	display: block;
	content: "";
}
.list-course.list-course .list-item .list-img{
	width: 100%;
	margin-right: 10px;
	position: relative;
}
.cover-text{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	font-weight: bold;
}
.list-course.list-course .list-item .list-img img{
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	display: block;
}
.list-box .list-item .list-img{
	width: 100%;
}
.list-box .list-item .list-img img{
	width: 100%;
	height: 120px;
	object-fit: cover;
	object-position: center;
}
.list-box .list-item .list-info{
	width: 100%;
}
.list-box .list-item .list-info h3{
	font-weight: normal;
	width: 100%;
	color: #0f0f0f;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 24px;
}
.list-box .list-item .list-custom.list-custom{
	padding: 5px;
	box-sizing: border-box;
}
.list-box .list-item .list-custom.list-custom h3{
	width: 100%;
	margin-bottom: 5px;
}
.list-box .list-item .list-info .publish-time{
	line-height: 25px;
	font-size: 13px;
}
.list-box .list-item .list-info .base-address{
	line-height: 25px;
	font-size: 13px;
	padding: 0 0 0 16px;
	background: url(/public/app/img/base.png) no-repeat 0 center/15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list-box .list-item .list-info .base-address-custom{
	display: flex;
	align-items: center;
	line-height: 25px;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333333;
}
.list-box .list-item .list-info .base-address-custom img{
	display: block;
	width: 15px;
	height: 15px;
	margin-right: 3px;
}
.list-box .list-item .list-info .base-publisher{
	line-height: 25px;
	font-size: 13px;
	padding: 0 0 0 20px;
	background: url(/public/app/img/people.png) no-repeat 0 center/19px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333333;
}
.list-box .list-item .list-info .base-publisher-custom{
	display: flex;
	align-items: center;
	line-height: 25px;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333333;
}
.list-box .list-item .list-info .base-publisher-custom img{
	display: block;
	width: 19px;
	height: 19px;
	margin-right: 3px;
}
.list-box .list-item .list-info .base-publish{
	line-height: 25px;
	font-size: 13px;
	padding: 0 0 0 20px;
	background: url(/public/app/img/publish.png) no-repeat 0 center/19px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list-box .list-item .list-info .description{
	width: 100%;
	height: 42px;
	line-height: 21px;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 12px;
}
.list-box .watcher{
	/*width: 55px;*/
	display: flex;
	align-items: center;
	color: #555555;
	font-size:12px;
}
.list-box .watcher img{
	display: block;
	width: 16px;
	height: 16px;
	margin-right: 3px;
}
.list-news .list-item a{
	display: flex;
	align-items: center;
}
.list-news .list-item{
	box-sizing: border-box;
	padding: 10px;
}
.list-news .list-item .list-img{
	width: 120px;
	margin-right: 10px;
}
.list-news .list-item .list-img img{
	display: block;
	width: 100%;
	height: 80px;
	border-radius: 4px;
}
.list-news .list-item .list-info{
	flex: 1;
	overflow: hidden;
}
.list-news .list-item .list-info h3{
	line-height: 24px;
	height: 24px;
	border: none;
	margin-bottom: 5px;
}
.list-news .list-item .list-info .description{
	color: #333333;
}
/* list-institution*/
.list-institution .list-item{
	padding-bottom: 5px;
	border-bottom: 1px solid #eeeeee;
	margin-bottom: 5px;
}
.list-institution .list-item a{
	display: flex;
}
.list-institution .list-item .list-img{
	width: 120px;
	height: 80px;
	flex-shrink: 0;
	margin-right: 10px;
}
.list-institution .list-item .list-img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}
.list-institution .list-item .list-info{
	flex: 1;
	overflow: hidden;
	padding: 5px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}
.list-institution .list-item .list-info h3{
	margin-bottom: 5px;
}
.list-institution .list-item .list-info .base-address{ color: #333333; }

/*
 * base-grid
 */
.base-grid .list .list-item{
	width: 49% !important;
	float: left;
	margin-right: 2%;
	border: none;
}
.base-grid .list .list-item:nth-child(2n){
	margin-right: 0;
}
.base-grid .list::after{
	clear: both;
	display: block;
	content: "";
}
.base-grid .list .list-img{
	clear: both;
	width: 100%;
	margin-right: 0;
	height: 130px;
	border-radius: 8px;
	border: 1px solid #eee;
	box-sizing: border-box;
}
.base-grid .list .list-info{
	clear: both;
	width: 100%;
}
.base-grid .list .list-info h3{
	margin-bottom: 0;
	font-weight: 400;
	line-height: 24px;
	height: 24px;
}
.base-grid .list .list-info p{
	font-size: 12px;
}

/*
 * menu-bar
 */
.menu-bar{
	width: 100%;
	height: 30px;
	line-height: 30px;
	padding: 10px 0;
	overflow-x: auto;
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--border-lighter);
}
.menu-bar .scroll-bar{
	width: max-content;
	padding: 0 10px;
}
.menu-bar .menu-item{
	padding: 0 20px;
	float: left;
}
.menu-bar .menu-item.active a{
	color: #fff;
}
.menu-bar .menu-item.active{
	background: red;
	border-radius: 15px;
}
.menu-bar .menu-item a{
	color: var(--primary-text);
}
.base-list .list-item .list-info .base-address{
	height: 25px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * order
 */
.order{
	width: 100%;
	height: 50px;
	border-top: 1px solid var(--border-light);
}
.already{
	width: 100%;
	height: 50px;
	border-top: 1px solid var(--border-light);
}
/*
 * trainDetail.html
 */
.train-swiper{
	width: 100%;
}
.train-swiper .swiper-container{
	width: 100%;
	height: 285px;
}
.train-swiper .swiper-container img{
	width: 100%;
	height: 100%;
}
.train-info{
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	/*border-bottom: 1px solid var(--border-base);*/
}
.train-info h3{
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 10px;
	color: #000000;
}
.train-info .tag{
	padding: 5px 0;
}
.train-info .tag dt{
	display: inline-block;
}
.train-info .tag dd{
	display: inline-block;
	line-height: 24px;
	padding: 0 10px;
	/*background-color: #f0f0f0; */
	margin-right: 10px;
}
.train_info{
	line-height: 40px;
	background-color: #fff;
	margin-bottom: 10px;
}
.train_info_text img{
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}
.train_info .title,
.qrcode .title{
	border-bottom: 1px solid #efefef;
	height: 51px;
	padding: 15px 10px;
	box-sizing: border-box;
	line-height: 20px;
}
.train_info .title span,
.qrcode .title span{
	display: block;
	border-left: 5px solid #2573D5;
	padding-left: 10px;
}
.train_info .info-item{
	display: flex;
	align-items: center;
	font-size: 14px;

}
.train_info .info-item .attr{
	color: #666666;
	width: 80px;
}
.train_info .content{
	padding: 10px;
}
.qrcode{
	background-color: #fff;
}
.qrcode .qrcode-box{
	width: 100%;
	min-height: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/*
 * baseInfo
 */
.baseInfo{
	box-sizing: border-box;
	padding: 0 10px;
	background-color: #efefef !important;
}
.base-name{
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 71px;
	box-sizing: border-box;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-lighter);
}
.base-name .base-img{
	height: 100%;
	margin-right: 10px;
}
.base-name .base-img img{
	height: 100%;
}
.base-name .more{
	width: 90px;
	height: 20px;
	text-align: center;
	color: var(--secondary-text);
	padding-right: 10px;
	box-sizing: border-box;
	background-image: url(/public/app/img/right.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: 20%;
}
.base-name .name{
	flex: 1;
	overflow: hidden;
	font-size: 15px;
	color: var(--primary-text);
}
.baseInfo .base-address h4{
	font-size: 15px;
	font-weight: normal;
	color: var(--primary-color);
	height: 30px;
	line-height: 30px;
	display: block;
	width: calc(100% - 80px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.base-address{
	position: relative;
	padding: 10px 0;
}
.baseInfo .base-address p{
	line-height: 20px;
	background-image: url(/public/app/img/base.png);
	background-repeat: no-repeat;
	background-position: 2px 3px;
	background-size: 14px 14px;
	font-size: 12px;
	padding-left: 18px;
	display: block;
	width: calc(100% - 80px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}
.base-address .icon{
	position: absolute;
	top: 10px;
	width: 30px;
	height: 30px;
	background-position: center;
	background-size: 20px;
	border: 1px solid #6d6e71;
	box-sizing: border-box;
	border-radius: 50%;
}
.base-address .icon-service{
	margin-top: 10px;
	right: 50px;
	background-image: url(/public/app/img/servicer.png);
}
.base-address .icon-location{
	margin-top: 10px;
	right: 10px;
	background-image: url(/public/app/img/location.png);
}
/*
 * plain
 */
.plain .tab{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	line-height: 50px;
	box-sizing: border-box;
	padding: 0 10px;
}
.plain .tab .tab-item{
	text-align: center;
	width: 20%;
	font-size: 15px;
	color: var(--regular-text);
}
.plain .tab .tab-item.active{
	color: #ff9014;
	border-bottom: 2px solid #ff9014;
}
.plain .tab-content.active{
	display: block;
}
.plain .tab-content{
	display: none;
	padding: 10px;
	line-height: 28px;
}
.plain .tab-content .list-box .list{
	padding: 0;
}
.plain .tab-content:last-child{
	padding: 0;
}
.plain .tab-content h4{
	font-size: 15px;
	text-align: center;
}
.plain .tab-content p{
	font-size: 15px;
	line-height: 28px;
}
.plain .tab-content .arrange{
	border-left: 1px solid #7cd9fd;
	padding-left: 20px;
	box-sizing: border-box;
	margin-bottom: 10px;
	position: relative;
}
.plain .tab-content .arrange .time{
	font-size: 14px;
	margin-bottom: 10px;
	color: #7cd9fd;
	font-weight: bold;
}
.plain .tab-content .arrange::before{
	position: absolute;
	left: -8px;
	top: 0;
	width: 16px;
	height: 16px;
	content: "";
	display: block;
	background-color: #7cd9fd;
	border-radius: 50%;
}
.order button{
	background-color: #ff9014;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: 0.5em;
	font-weight: bold;
}
.already button{
	background-color: #ff9014;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: 0.5em;
	font-weight: bold;
}
/*
 * baseDetail
 */
.detail{
	height: 100% !important;
}
.base-information{
	margin-top: 10px;
	padding: 10px;
	box-sizing: border-box;
}
.base-information .left-img{
	width: 90px;
	height: 60px;
	float: left;
}
.base-information .left-img img{
	width: 100%;
	height: 100%;
}
.base-information .bottom{
	clear: both;
}
.base-information .right h4{
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	color: #000;
}
.base-information .right p{
	line-height: 30px;
	font-size: 15px;
	color: var(--secondary-text);
}
.baseName{
	width: 100%;
	padding-left: 30px;
	box-sizing: border-box;
	background: url(/public/app/img/organization.png) no-repeat 5px 5px/20px;
}
.baseName h4{
	line-height: 30px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.base-information .bottom{
	line-height: 30px;
	padding-left: 30px;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: 6px 6px;
	background-size: 18px 18px;
}
.base-information .bottom.address{
	background-image: url(/public/app/img/base.png);
	grid-area: address;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.base-information .bottom.phone{
	background-image: url(/public/app/img/phone-fill.png);
	grid-area: phone;
}

/*
 * my.html
 */
.presonal{
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	background-image: url(/public/app/img/banner1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
	padding: 0 20px;
	background-color: #2573D5;
}
.presonal .avatar{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
}
.presonal .avatar img{
	width: 100%;
	height: 100%;
}
.presonal .personal-info{
	height: 60px;
}
.presonal .personal-info a{
	font-size: 18px;
	color: #fff;
	line-height: 30px;
}
.presonal .personal-info p{
	font-size: 14px;
	color: #fff;
	line-height: 30px;
}
.presonal .right-conp{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}
.presonal .right-conp a{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 4px 8px;
	border-radius: 4px;
	width: max-content;
	color: #fff;
}
.presonal .right-conp a img{
	display: block;
	width: 12px;
	height: 12px;
}

.my-menu{
	background-color: #FFFFFF;
	width: 100%;
	box-sizing: border-box;
	padding: 0 15px;
}
.my-menu li{
	line-height: 40px;
	height: 40px;
	border-bottom: 1px solid var(--border-lighter);
	padding: 5px 0;
}
.my-menu li:last-child{
	border: none;
}
.my-menu li a{
	color: #666666;
	font-size: 15px;
	display: block;
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.my-menu li .img{
	display: block;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 9px;
	margin-right: 5px;
}
.my-menu li .img img{
	width: 100%;
	height: 100%;
}
.my-menu .text{
	flex: 1;
	color: #000000;
}
.my-menu .icon-right{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url(/public/app/img/right.png);
	background-position: center;
	background-size: 30%;
}
button.exit{
	display: block;
	width: 90%;
	height: 40px;
	margin: 20px auto;
	background-color: #ff9014;
	color: #FFFFFF;
	border-radius: 8px;
}

button.chose_user{
	display: block;
	width: 90%;
	height: 40px;
	margin: 20px auto;
	background-color: #2573D5;
	color: #FFFFFF;
	border-radius: 8px;
}


/*
 */
.pageTitle{
	width: 100%;
	height: 51px;
	line-height: 50px;
	font-size: 17px;
	font-weight: bold;
	color: #333;
	padding: 0 10px;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.form-group{
	margin: 20px 0;
	padding: 0 10px;
	box-sizing: border-box;
}
.form-group label{
	font-size: 16px;
	display: block;
	text-align: left;
	margin-bottom: 5px;
	color: #333;
	line-height: 24px;
}
.form-group input{
	width: 100%;
	height: 40px;
	border: 1px solid #D9D9D9;
	outline: none;
	border-radius: 4px;
	padding: 0 7px;
	font-size: 15px;
	box-sizing: border-box;
}
.form-group select{
	display: block;
	border: 1px solid #D9D9D9;
	border-radius: 4px;
}
.form-group button{
	width: 100%;
	height: 34px;
	text-align: center;
	line-height: 34px;
	background-color: #2572d4;
	border-radius: 4px;
	color: #fff;
}

.video-container{
	width: 100%;
	height: 250px;
	position: fixed;
	top: 0;
	background-color: #eeeeee !important;
}
.video-info{
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.video-info h3{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #000000;
}
.video-info .startTime,
.video-info .endTime{
	padding: 5px 0;
}
.video-info .startTime span,
.video-info .endTime span{
	line-height: 24px;
	margin-right: 10px;
}
.video-brief{
	padding: 10px;
	box-sizing: border-box;
}
.video-brief .title{
	font-size: 16px;
	font-weight: bold;
	color: #000;
	border-left: 4px solid #333;
	padding-left: 10px;
	margin-bottom: 10px;
}
.video-brief .content p{
	font-size: 15px;
	line-height: 24px;
}

/* actionSheet */
.model {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .3);
	z-index: 99;
	max-width: 450px;
	margin: 0 auto;
}

.actionSheet {
	position: fixed;
	bottom: 0;
	width: calc(100% - 30px);
	margin: 0 15px 15px;
	max-width: 420px;
	z-index: 99;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.actionSheet .body {
	background: #ffffff;
	padding: 30px 15px;
	line-height: 24px;
	text-align: center;
}

.actionSheet .footer .btn {
	background-color: #ffffff;
	line-height: 50px;
	text-align: center;

}

.actionSheet .footer .btn:first-of-type {
	border-top: 1px solid #EEEEEE;
}

.actionSheet .footer .btn:last-of-type {
	margin-top: 8px;
	border-radius: 4px;
}

.dialog-model {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgb(0 0 0 / 90%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.dialog-card {
	width: calc(100% - 20px);
	min-height: calc(100% - 120px);
	box-sizing: border-box;
	background-color: #ffffff;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.dialog-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	display: flex;
	line-height: 40px;
	box-sizing: border-box;
	padding: 0 15px;
}

.dialog-body {
	position: absolute;
	top: 0;
	bottom: 50px;
	left: 0;
	right: 0;
	padding: 10px;
	font-size: 14px;
}

.dialog-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	display: flex;
	border-top: 1px solid #EEEEEE;
	overflow: hidden;
	font-size: 15px;
	color: #0075ff;
	font-weight: bold;
}

.dialog-footer .btn {
	flex: 1;
	overflow: hidden;
	text-align: center;
	height: 50px;
	line-height: 50px;
}

.dialog-footer .btn:first-child {
	border-right: 1px solid #eeeeee;
}


/*
 * appHead
 */
.appHead{
	width: 100%;
	height: 45px;
	display: flex;
	color: #fff;
	padding: 5px 10px 0;
	box-sizing: border-box;
}
.appHead .left-operate{
	flex: 1;
	overflow: hidden;
	margin-right: auto;
}
.left-operate a{
	display: block;
	height: 40px;
	padding: 5px;
	box-sizing: border-box;
}
.left-operate a img{
	display: block;
	height: 100%;
	object-fit: cover;
}
.appHead .right{
	display: flex;
	flex-flow: row nowrap;
}
.appHead .right .user-profile{
	display: flex;
	flex-flow: row nowrap;
	line-height: 40px;
}
.appHead .right .user-profile .user-avatar{
	width: 40px;
	height: 40px;
	padding: 5px;
	box-sizing: border-box;
}
.appHead .right .user-profile .user-avatar img{
	display: block;
	width: 100%;
	height: 100%;
	clip-path: circle(50%)
}
.appHead .right .user-profile .user-name{
	max-width: 4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.appHead .right .user-profile .user-name a{
	max-width: 4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
}
.appHead .right .switchover{
	white-space: nowrap;
	width: max-content;
	display: flex;
	align-items: center;
	padding: 0 5px 0 10px;
}
.appHead .right .switchover > a{
	display: block;
	width: 2em;
	text-align: center;
	border-radius: 2px;
	font-size: 12px;
	color: #fff;
	background-color: #bababa;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.appHead .right .switchover a > img{
	display: block;
	width: 20px;
	height: 20px;
}

.base-img-container{
	width: 100%;
	position: relative;
}
.base-img-container .baseName{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 10px;
	background: rgba(0, 0, 0, .6);
	text-align: center;
	color: #fff;
}
.base-img-container .baseName h4{
	padding: 2px 0;
	text-overflow: unset;
	overflow: unset;
	white-space: unset;
}

.base-information{
	width: 100%;
	display: grid;
	grid-template-areas: 'address baseDate'
						'phone baseDate';
	grid-template-columns: 1fr 140px;
	grid-template-rows: 30px;
}
.base-information .baseDate{
	min-width: 20px;
	height: 60px;
	grid-area: baseDate;
	display: flex;
	align-items: center;
	gap: 5px;
}
.base-information .baseDate .date-item{
	width: 70px;
	height: 55px;
	padding: 5px;
	box-sizing: border-box;
	background-color: #efefef;
	border-radius: 4px;
	border: 1px solid #ccc;
}
.base-information .baseDate .date-item .num{
	text-align: center;
	color: #2573D5;
	font-size: 15px;
	line-height: 20px;
}
.base-information .baseDate .date-item img{
	display: block;
	width: 20px;
	height: 20px;
	margin: 5px auto 0;
}

/* btn-group */
.btn-group{
	width: calc(100% - 20px);
	height: 68px;
	margin: 10px auto;
	display: flex;
	flex-flow: row nowrap;
	gap: 10px;
}
.btn-group a{
	flex: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-radius: 4px;
	color: #fff;
	font-size: 17px;
	font-weight: bold;
}
.btn-group a:first-child{
	background-color: #2572d4;
}
.btn-group a:last-child{
	background-color: #fc6e21;
}
.btn-group .word{
	flex: 1;
	text-align: center;
	padding-right:20px;
}
.btn-group a img{
	display: block;
	width: 30px;
	height: 30px;
	padding: 10px;
}

.baseContent{
	width: 100%;
	line-height: 28px;
}
.baseContent p {
	text-indent: 2em;
}
.baseContent img{
	display: block;
	width: 100% !important;
	height: auto !important;
	margin-bottom: 5px;
}

.mask{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 250px;
	background-color: rgba(0, 0, 0, .3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-begin{
	background-color: #2573D5;
	color: #fff;
	border-radius: 4px;
	padding: 0 15px;
	border: 0;
	line-height: 40px;
	font-size: 15px;
}

.custom-title{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding: 0 15px;
	box-sizing: border-box;
}
.surface img{
	display: block;
	width: 100%;
	height: 175px;
	object-fit: cover;
}
.sponsor{
	display: flex;
	justify-content: space-between;
	height: 56px;
	line-height: 56px;
	padding: 0 10px;
	color: #000000A6;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	background-color: #ffffff;
}
.sponsor .sponsor-name{
	width: 70%;
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 24px;
	color: #000000E0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sponsor .sponsor-name img{
	display: block;
	width: 18px;
	height: 18px;
	margin-right: 5px;
}
.sponsor .watcher{
	width: 55px;
	display: flex;
	align-items: center;
	line-height: 21px;
}
.sponsor .watcher img{
	display: block;
	width: 21px;
	height: 21px;
	margin-right: 5px;
}
.sponsor .watcher .text{
	flex: 1;
	text-align: center;
}
.institution{
	background-color: #ffffff;
	display: flex;
	height: 70px;
}
.institution .pull-left{
	flex: 1;
	overflow: hidden;
	padding: 5px 0;
}
.institution .pull-left .institution-name{
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	padding: 0 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.institution .pull-left .institution-address{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	height: 25px;
	line-height: 25px;
}
.institution .pull-left .institution-address img{
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 3px 0 10px;
}
.institution .pull-left .institution-address .text{
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.institution .pull-right{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 10px;
}
.institution .pull-right a{
	border: 1px solid #777777;
	border-radius: 50%;
	padding: 4px;
}
.institution .pull-right a img{
	width: 26px;
	height: 26px;
}
.classList{
	padding: 10px;
	box-sizing: border-box;
}
.classList .noclass{
	width: 100%;
	height: 140px;
	display: grid;
	place-items: center;
	font-size: 17px;
	font-weight: bold;
	color: #00000040;
}
.classList .classItem{
	width: 100%;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 4px;
	border-bottom: 1px solid #eeeeee;
	box-shadow: 0 0 4px #cccccc;
}
.classList.caption{
	padding: 5px 10px 0;
}
.classList.caption .classItem{
	box-shadow: 0 0 4px #cccccc;
	margin-bottom: 12px;
	border-radius: 4px;
	padding: 0 10px;
	overflow: hidden;
}
.classList .classItem:last-child{
	margin-bottom: 0;
	border-bottom: none;
}
.classList .classItem .class-f .name{
	font-size: 17px;
	line-height: 24px;
	height: 40px;
	display: flex;
	align-items: center;
	color: #000000E0;
	font-weight: bold;
}
.classList .classItem .class-s,
.classList .classItem .class-t{
	display: grid;
	grid: 40px / repeat(2, 1fr);
	line-height: 40px;
	color: #000000A6;
	font-size: 15px;
}
.classList .classItem .class-rule{
	padding: 10px 0;
	line-height: 20px;
	color: #000000A6;
	font-size: 15px;
}
.classList .classItem .class-all{
	width: 100%;
	line-height: 40px;
	color: #000000A6;
	font-size: 15px;
}
.classList .classItem .drop-inner{
	border-top: 1px solid #0505050F;
	box-sizing: border-box;
	height: 51px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.classList .classItem .drop-inner .desc{
	display: flex;
	align-items: center;
	gap: 7px;
	line-height: 16px;
	color: #666666;
}
.classList .classItem .drop-inner .desc img{
	display: block;
	width: 16px;
	height: 16px;
}
.classList .classItem .drop a{
	display: block;
	width: 90px;
	color: #ffffff;
	background-color: #2572d4;
	border-radius: 4px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
}
.explain{
	border-bottom: 1px solid #eeeeee;
	margin: 10px 0 0;
	padding: 0 10px;
}
.explain .explain-item{
	height: 46px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	box-sizing: border-box;
	font-size: 15px;
	background-color: #ffffff;
	box-shadow: 0 0 4px #cccccc;
	border-radius: 4px;
}
.explain .explain-item .attr{
	width: 90px;
	text-align: center;
}
.explain .explain-item .val{
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apartment{
	width: 100%;
	margin-bottom: 10px;
}
.plain .title,
.apartment .title{
	font-size: 15px;
	position: relative;
	line-height: 30px;
	padding: 10px 20px 10px 25px;
}
.plain .title::after,
.apartment .title::after{
	display: block;
	content: "";
	clear: both;
	width: 4px;
	height: 20px;
	background-color: #2573D5;
	position: absolute;
	top: 15px;
	left: 10px;
}
.apartment .content{
	width: calc(100% - 20px);
	padding: 10px;
	box-sizing: border-box;
	background-color: #ffffff;
	box-shadow: 0 0 4px #cccccc;
	border-radius: 4px;
	margin: 0 auto;
}

/* 学分 */
.white-card{
	width: calc(100% - 20px);
	margin: 10px auto;
	border: 1px solid #eeeeee;
	display: grid;
	grid-template-columns: 1fr auto;
	border-radius: 4px;
	padding: 10px;
	box-sizing: border-box;
}
.white-card .pull-right img{
	display: block;
	width: 100px;
}

.white-card .pull-right{
	display: grid;
	place-items: center;
}

.white-card .pull-left{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 10px 0;
	gap: 10px;
}

.white-card .pull-left .line{
	font-size: 16px;
	font-weight: bold;
}

.white-card .pull-left .line span{
	color: #ffffff;
	background-color: #ff9014;
	border-radius: 10px;
	padding: 0 4px;
	font-size: 14px;
	margin-left: 3px;
}

.white-card .pull-left .num{
	font-size: 20px;
	font-weight: bold;
}

.current-score{
	font-size: 15px;
	color: #333333;
	font-weight: bold;
}

.btn-group-line{
	display: grid;
	grid: 90px / repeat(2, 1fr);
	place-items: center;
	box-sizing: border-box;
	padding: 0 10px;
	gap: 10px;
}

.btn-group-line .btn{
	padding: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	color: #ffffff;
	text-align: center;
	display: grid;
	grid: 100% / auto 1fr;
	place-items: center;
	background-color: #0075ff;
}

.btn-group-line .btn img{
	display: block;
	width: 60px;
	height: 60px;
	padding: 0 15px;
}

.btn-group-line .btn .info{
	display: flex;
	align-items: center;
}

.btn-group-line .btn.active{
	background-color: #ff9014;
}

.btn-group-line .btn .info .num{
	font-size: 20px;
}

.btn-group-line .btn .info .title{
	font-size: 20px;
}

.column-title-bar{
	line-height: 46px;
	padding: 0 0 0 15px;
	border-bottom: 1px solid #eeeeee;
	font-size: 15px;
	color: #333;
	display: grid;
	grid: 100% / 1fr 70px;
}

.border-left{
	border-left: 1px solid #eeeeee;
	text-align: center;
}

.column-item{
	width: calc(100% - 20px);
	margin: 10px auto 0;
	border: 1px solid #eeeeee;
	border-radius: 4px;
}

.column-item .column-content .column-content-item{
	display: grid;
	grid-template-columns: 70px 1fr 70px;
	grid-template-rows: 100%;
	place-items: center;
	height: 50px;
	border-bottom: 1px solid #eee;
	color: #333;
}

.column-item .column-content .column-content-item:last-child{
	border-bottom: none;
}

.column-item .column-content .column-content-item .cate{
	background-color: #ff9014;
	color: #ffffff;
	padding: 3px 6px;
	border-radius: 4px;
	font-size: 14px;
}

.column-item .column-content .column-content-item .title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	place-self: center flex-start ;
	display: block;
	width: 100%;
}

.column-item .column-content .column-content-item .score{
	font-size: 24px;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}
.btn-group-line{
	grid: 50px / repeat(2, 1fr);
}

.btn-group-line .btn{
	grid: 100% / 1fr;
	padding: 0 10px;
	box-sizing: border-box;
	background-color: #0075ff;
}

.btn-group-line .btn img{
	width: 34px;
	height: 34px;
	display: none;
}
.btn-group-line .btn .info .num{
	font-size: 17px;
}

.btn-group-line .btn .info .title{
	font-size: 15px;
}

/*
 * pagination
 */

#pagination {
	margin: 30px 0;
	width: 100%;
}

#pagination .pagination-wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

#pagination .pagination-wrap ul {
	list-style: none;
	display: flex;
	border: solid #eeeeee;
	border-width: 1px 0 0 1px;
	border-radius: 4px;
	overflow: hidden;
	background-color: #ffffff;
}

#pagination .pagination-wrap ul li {
	display: block;
	border: solid #eeeeee;
	border-width: 0 1px 1px 0;
}

#pagination .pagination-wrap ul li.active {
	background-color: #0075ff;
}

#pagination .pagination-wrap ul li:first-of-type {
	border-radius: 4px 0 0 4px;
}

#pagination .pagination-wrap ul li:last-of-type {
	border-radius: 0 4px 4px 0;
}

#pagination .pagination-wrap ul li.active a {
	color: #ffffff;
}

#pagination .pagination-wrap a {
	display: block;
	line-height: 36px;
	padding: 0 15px;
	color: #0075ff;
	transition: all linear .2s;
	white-space: nowrap;
}

#pagination .pagination-wrap ul li:hover a {
	color: #fff;
	background-color: #0075ff;
}

/* dropdown */
.dropdown{
	width: 100%;
	height: 40px;
	display: flex;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	background-color: #ffffff;
}
.dropdown .left-container,
.dropdown .right-container{
	flex: 1;
}
.dropdown .left-container{
	border-right: 1px solid #eeeeee;
}
.selectric.selectric{ background: transparent; color: #333333; }
/* course-list */
.course-list{
	padding: 0 10px;
}
.course-list .course-item{
	width: 100%;
	box-shadow: 0 0 4px #ccc;
	margin-bottom: 15px;
	border-radius: 4px;
	overflow: hidden;
}
.course-list .course-item a{
	display: block;
	width: 100%;
	height: 100%;
	color: #333333;
}
.course-list .course-item .list-img img{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 4px 4px 0 0;
}
.course-list .course-item .list-info h3{
	font-size: 16px;
	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}
.course-list .course-item .list-info .description{
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	color: #666666;
	padding: 0 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.fix-purchase{
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	position: fixed;
	bottom: 50px;
	display: flex;
}
.fix-purchase .zw{
	font-size: 17px;
	font-weight: bold;
	line-height: 50px;
	padding: 0 0 0 20px;
}
.fix-purchase .price{
	width: 40%;
	font-size: 16px;
	line-height: 50px;
	text-align: center;
	padding-right: 20px;
	box-sizing: border-box;
}
.fix-purchase .price .unit{
	font-size: 18px;
}
.fix-purchase .price .num{
	font-size: 24px;
	color: red;
	font-weight: bold;
}
.fix-purchase .btn-purchase{
	flex: 1;
	overflow: hidden;
	background-color: #2573D5;
	line-height: 50px;
	text-align: center;
	color: #ffffff;
	font-size: 17px;
}
/*
 *	headbar
 */
.headbar{
	width: 100%;
	height: 46px;
	line-height: 46px;
	background-color: #FFFFFF;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.headbar .bar-left,
.headbar .bar-right{
	width: auto;
}
.headbar .bar-middle{
	width: 50%;
	text-align: center;
	font-size: 15px;
	color: #111A38;
}
.headbar img{
	width: 16px;
	height: 16px;
}
.headbar .bar-left{
	display: flex;
	align-items: center;
	justify-content: left;
}
.headbar .bar-left a{
	margin-left: 15px;
}
.headbar .bar-right{
	display: flex;
	justify-content: right;
	align-items: center;
	font-size: 12px;
}
.headbar .bar-right .login{
	display: flex;
	align-items: center;
	margin-right: 5px;
}
.headbar .bar-right .login img{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-right: 5px;
}
.headbar .bar-right .login .name{
	width: 4em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.headbar .bar-right .switchover{
	display: flex;
	height: 26px;
	align-items: center;
	margin-right: 5px;
	background-color: rgb(0 0 0/0.1);
	padding: 0 0.1875rem;
	border-radius: 2px;
}
.data-table{
	padding: 0;
}
.data-table .data-table-line{
	border-bottom: 1px solid #f1f2f3;
	width: 100%;
	line-height: 50px;
	height: 51px;
	display: flex;
}
.data-table .attr{
	display: block;
	width: 25%;
	border-right: 1px solid #f1f2f3;
	font-size: 14px;
	color: #333;
	box-sizing: border-box;
	padding-left: 15px;
}
.data-table .value{
	display: block;
	flex: 1;
	padding: 0 0 0 5px;
	box-sizing: border-box;
}
.data-table .value input{
	display: inline-block;
	width: 60%;
	height: 36px;
	padding: 0;
	margin: 2px 0;
	border: none !important;
	outline: none;
}
.data-table .value .getcode{
	display: inline-block;
	width: 38%;
	border-left: 1px solid #F1F2F3;
	text-align: center;
	color: #333;
}
.yzm-container{
	position: relative;
}
.getcode.getcode.getcode{
	position: absolute;
	right: 0;
	top: 0;
	width: 90px;
	height: 100%;
	display: grid;
	place-items: center;
	background-color: #2573D5;
	border-radius: 0 4px 4px 0;
	color: #ffffff;
	cursor: pointer;
}
.yzm-container .se_num{
	background-color: #99999980 !important;
	cursor: default;
}
/*filter-module*/
.filter-module{
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	height: 40px;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 0 15px;
	z-index: 999;
	border-bottom: 1px solid #eeeeee;
}
.filter-module .filter-s{
	height: 40px;
	font-size: 14px;
	color: #515151;
	display: flex;
	align-items: center;
	gap: 5px;
}
.filter-module .filter-s > img{
	display: block;
	width: 22px;
	height: 22px;
}
.filter-box{
	background-color: #ffffff;
	border-radius: 0;
	position: absolute;
	top: 90px;
	width: calc( 75% );
	height: calc(100vh - 140px);
	z-index: 99;
	box-shadow: 0 0 4px #cccccc;
	margin-left: -400px;
	padding: 10px;
	box-sizing: border-box;
}
.filter-box.show{
	animation: down linear 0.2s forwards;
}
@keyframes down {
	from{
		transform: translateX(0px);
	}
	to{
		transform: translateX(400px);
	}
}
.filter-item{
	width: 100%;
	margin-bottom: 12px;
}
.filter-item .filter-title{
	font-size: 14px;
	color: #000;
	margin-bottom: 8px;
	font-weight: bold;
}
.filter-item .filter-content{
	width: 100%;
	display: grid;
	grid: auto / repeat(3, 1fr);
	grid-gap: 8px;
}
.filter-item .filter-content .item{
	width: 100%;
	height: 32px;
	line-height: 32px;
	text-align: center;
	overflow: hidden;
	background-color: #f4f4f5;
	font-size: 13px;
	border-radius: 2px;
}
.filter-item .filter-content .item.active{
	color: #dc002e;
	background-color: rgba(220, 0, 46, 0.1);
}
.filter-body{
	width: 100%;
	height: 100%;
	overflow: auto;
}
.filter-footer{
	display: grid;
	grid: auto / repeat(2, 1fr);
	grid-gap: 10px;
	padding-top: 10px;
}
.filter-footer > a{
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 100%;
	display: block;
	overflow: hidden;
	background-color: #f4f4f5;
	color: #000000;
	border-radius: 4px;
}
.filter-footer a.submit{
	background-color: rgba(220, 0, 46);
	color: #ffffff;
}
.filter-head-title{
	font-size: 17px;
	font-weight: bold;
	line-height: 25px;
	margin-bottom: 10px;
}
.apply{
	position: absolute;
	width: 100%;
	height: 51px;
	bottom: 61px;
	left: 0;
	right: 0;
	background-color: #ffffff;
	display: flex;
	align-items: stretch;
}
.apply .price{
	width: 70%;
	overflow: hidden;
	font-size: 18px;
	line-height: 50px;
	font-weight: bold;
	padding: 0 10px;
	box-sizing: border-box;
	color: #2573D5;
	border-top: 1px solid #cccccc;
}
.apply .pay{
	width: 30%;
	background-color: #2573D5;
	color: #ffffff;
	line-height: 50px;
	text-align: center;
	border-top: 1px solid #2573D5;
}
.contract{
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	box-sizing: border-box;
	gap: 5px;
	font-size: 13px;
	color: #0075ff;
}
.contract input[type=checkbox]{
	border-radius: 50%;
}
.btn-pay{
	display: block;
	width: calc(100% - 30px);
	height: 40px;
	line-height: 40px;
	margin: 10px auto 20px;
	background-color: #ff9014;
	color: #ffffff;
	border-radius: 4px;
	text-align: center;
}

.head{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #D9D9D9FF;
	z-index: 9999;
}
.head .pull-left{
	width: 25%;
	padding-left: 10px;
	box-sizing: border-box;
}
.head .pull-left img{
	display: block;
	width: 15px;
	height: 15px;
}
.head .title{
	width: 50%;
	line-height: 50px;
	font-size: 16px;
	color: #000000A6;
	overflow: hidden;
	text-align: center;
}
.head .avatar{
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
}
.head .avatar img{
	display: block;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	border-radius: 50%;
	object-fit: cover;
}
.head .avatar a{
	color: #333333;
	font-size: 13px;
}
.rounded-none{ border-radius: 0 !important; }
.pr-0{ padding-right: 0; }
.notice{
	display: flex;
	align-items: center;
	height: 40px;
	width: calc(100% - 20px);
	margin: 10px auto;
	box-shadow: 0 0 4px #cecece;
	border-radius: 4px;
	padding: 0 7px;
	box-sizing: border-box;
	color: #111A38;
	font-size: 12px;
	background-color: #ffffff;
}
.notice .icon-notice img{
	display: block;
	width: 26px;

	height: 26px;
	margin-right: 5px;
}
.trainhtml{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	box-sizing: border-box;
}
.rounded{ border-radius: 4px; }
.list-container{
	width: 100%;
	overflow: auto;
	background-color: #F5F5F5;
}
.loading.loading{
	width: 100%;
}
.display-none{
	display: none !important;
}
.base-img-container img{
	height: 200px;
	object-fit: cover;
}
.navigation{
	position: absolute;
	bottom: 80px;
	right: 10px;
	border-radius: 50%;
	box-shadow: 0 0 4px #777;
}
.navigation img{
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* 12.18 */
.main-content-title{
	height: 55px;
	line-height: 55px;
	border-bottom: 1px solid #eee;
	display: grid;
	font-size: 18px;
	padding: 0;
	grid-template-columns: 100px auto 100px;
	grid-template-rows: 100%;
	justify-items: center;
}
.reback{
	display: block;
	justify-self: start;
}
.headbar-login{
	display: flex;
}
.display-horizontal {
	display: flex;
	align-items: center;
	color: #333;
}
.temp-container{
	min-height: calc(100vh - 116px);
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #f2f3f5;
}
.temp-card{
	width: calc(100% - 20px);
	background-color: #fff;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 4px;
}
.status-name{
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: bold;
}
.temp-card .sponsor{
	font-size: 14px;
	color: #777777;
	text-align: center;
	padding: 10px 0 15px;
}
.status-time{ font-family: 'Courier New', Courier, monospace; font-size: 15px; text-align: right; margin-right: 10px; margin-bottom: 10px; }
.d-flex{ display: flex; }
.align-item-center{ align-items: center; }
.btn-homepage{ display: block; width: 80px; height: 36px; margin: 0 auto; color: #4099EF; font-size: 15px;
	background-color: transparent; text-align: center; line-height: 36px; margin-top: 10px;
	border-radius: 4px;
}
.temp-text{ text-align: center; margin-top: 20px; font-size: 18px; margin-bottom: 10px; }
.sign-title{ font-size: 20px; margin-top: 20px; padding: 0 15px; text-align: center; margin-bottom: 10px; }
.afterLogin {
	height: 56px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0 10px;
	border-radius: 4px;
}
.afterLogin .userName{
	color: #333333;
}
.afterLogin img {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-right: 10px;
}
.sign-status{ height: 160px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: bold; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; }
.sign-status img{ display: block; width: 40px; height: 40px; }
.sign-sponsor{
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
}
.sign-status select{
	display: block;
	width: calc(100% - 30px);
	height: 40px;
	line-height: 38px;
	border-radius: 4px;
	border: 1px solid #cccccc;
	outline: none;
	padding-left: 5px;
	text-align: center;
	font-size: 16px;
}
.temp-card .button{
	display: block;
	width: 90px;
	height: 36px;
	line-height: 36px;
	background-color: #ff9014;
	color: #ffffff;
	border-radius: 4px;
	margin: 0 auto;
}
.temp-card form{
	padding-bottom: 10px;
}