*{
	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;
}
.bg-dark{
	background-color: #f2f3f5;
}
.pt-10{ padding-top: 10px; }
body{
    color: #303133;
    word-spacing: 1px;
    font-size: 14px;
}

a{
	text-decoration: none;
}
ol,
ul,
li{
	list-style: none;
}

.statistics{
	margin-top: 10px;
	padding: 0 10px;
}
.statistics ul{
	display: grid;
	grid-auto-columns: 1fr;
	grid-template-rows: 50px;
	place-items: center center;
	gap: 10px;
}
.statistics ul li{
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr 1fr;
	place-items: center center;
	grid-row: 1;
	box-shadow: 0 0 4px 1px #cecece;
}
.statistics ul li .txt{
	text-align: center;
	font-weight: bold;
}
.statistics ul li .number{
	width: 100%;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.statistics ul li .number img{
	display: block;
	width: 15px;
	height: 15px;
	margin-right: 3px;
}
.statistics ul li .number .item{
	display: flex;
	justify-content: center;
}
.statistics ul li .number > div{
	flex: 1;
	text-align: center;
	border-right: 1px solid #ccc;
	box-sizing: content-box;
	line-height: 13px;
}
.statistics ul li .number > div:last-child{
	border: 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{
	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;
}

/*
 * index
 */
body{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
	max-width: 450px;
	margin: 0 auto;
}

.page{
    width: 100%;
    height: calc(100vh - 71px);
    overflow-x: hidden;
    background-color: #ffffff;
}
.tabbar{
    width: 100%;
    height: 70px;
	position:fixed;
	bottom:0;
	z-index:999;
    background-color: var(--bg-w);
    overflow: hidden;
    border-top: 1px solid var(--border-lighter);
	align-items: center;
	max-width: 450px;
	margin: 0 auto;
}
.tabbar .tabbar-item{
    flex: 1;
    overflow: hidden;
}

.tabbar-item a{
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tabbar-item .text{
    font-size: 12px;
	height: 16px;
	line-height: 16px;
	margin-top: 3px;
    color: var(--primary-text);
}
.tabbar-item .iconPath,
.tabbar-item .selectedIconPath{
    width: 70px;
    height: 25px;
    box-sizing: border-box;
}
.tabbar-item .iconPath img,
.tabbar-item .selectedIconPath img{
	display: block;
    width: 25px;
    height: 25px;
	margin: 0 auto;
}
.tabbar-home .iconPath{
	height: 44px;
	width: 44px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.tabbar-home .iconPath img{
	display: block;
	width: 43px;
	height: 43px;
	box-sizing: border-box;
}
.tabbar-home .selectedIconPath{
	height: 45px;
}
.tabbar-home .selectedIconPath img{
	display: block;
	width: 45px;
	height: 45px;
}
.tabbar-item .selectedIconPath{
	display: none;
}
.tabbar-item.active .text{
	color: #003366;
}
.tabbar-item.active .iconPath{
	display: none !important;
}
.tabbar-item.active .selectedIconPath{
	display: block !important;
}
/*
 * swiper
 */
.green-box{
	width: 100%;
	height: 120px;
	background-color: #003366;
}
.oval-box{
	width: 100%;
	height: 30px;
	background-color: #003366;
	border-radius: 50%/10px;
	margin-top: -15px;
}
.index.swiper-container{
	width: calc(100% - 20px);
	margin: -130px auto 0;
	height: 200px;
	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;
}

/*
 * search
 */
.search-box{
    width: 100%;
    background-color: #003366;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
}
.search-box input{
    width: 100%;
    height: 36px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 36px;
    border-radius: 18px;
	margin-top: 0;
}
.search-box .icon-search{
    background-image: url(/public/app/img/search.png);
    width: 36px;
    height: 36px;
    background-size: 50%;
    position: absolute;
    top: 10px;
    right: 10px;
	border-radius: 18px;
	background-color: #eee;
}
.search-box input::-webkit-input-placeholder{
    color: #DDDDDD;
}
.search-box input::-moz-placeholder{
    color: #DDDDDD;
}
.search-box input::-ms-input-placeholder{
    color: #DDDDDD;
}
.search-box .icon-time{
	position: absolute;
	width: 36px;
	height: 36px;
	top: 10px;
	left: 10px;
	box-sizing: border-box;
	padding: 8px;
}

/*
 * menu-list
 */
.menu-list{
    width: calc(100% - 20px);
    margin: 15px auto;
    background-color: var(--bg-w);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 6px;
    padding: 10px 0;
	box-shadow: 0 0 4px #e9e9e9;
}
.menu-list .menu-item{
    flex-basis: calc(100% / 4);
    margin-bottom: 10px;
}
.menu-list .menu-item .menu-img{
    width: 34px;
    height: 34px;
    margin: 10px auto 5px;
}
.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;
}
/*
 * banner
 */
.banner{
	width: 100%;
	padding: 0 10px;
}
.banner img{
	width: 100%;
	border-radius: 8px;
}
/*
 * list
 */
.list-box{
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}
.list-box .list-title{
	width: 100%;
	height: 40px;
	padding: 10px 0px 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid var(--border-lighter);
}
.list-box .list-title .title{
	font-size: 20px;
	color: #003366;
	margin-right: 20px;
	font-weight: 400;
}
.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: 40%;
}
.list-box .list-item{
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid var(--border-lighter);
}
.list-box .list-item:last-child{
	border: none;
}
.list-box .list-item a{
	display: block;
}
.list-box .list-item a::after{
	clear: both;
	display: block;
	content: "";
}
.list-box .list-item .list-img{
	width: 120px;
	height: 80px;
	float: left;
	margin-right: 10px;
	overflow: hidden;
	border-radius: 8px;
}
.list-box .list-item .list-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.list-box .list-item .list-info{
	width: calc(100% - 130px);
	float: left;
	color: var(--regular-text);
	height: 80px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}
.list-box .list-item .list-info h3{
	font-weight: 500;
	color: var(--primary-text);
	margin-bottom: 6px;
	width: 100%;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.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 25px;
	background: url(/public/app/img/dingwei.png) no-repeat 5px center/15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list-box .list-item .list-info .base-publisher{
	line-height: 25px;
	font-size: 13px;
	padding: 0 0 0 25px;
	background: url(/public/app/img/people.png) no-repeat 3px center/19px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list-box .list-item .list-info .base-publish{
	line-height: 25px;
	font-size: 13px;
	padding: 0 0 0 25px;
	background: url(/public/app/img/publish.png) no-repeat 3px center/19px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list-box .list-item .list-info .base-time{
	line-height: 25px;
	font-size: 13px;
	padding: 0 0 0 25px;
	background: url(/public/app/img/time.png) no-repeat 3px 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;
}

/*
 * 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: #003366;
	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
 */
.article-content{
	min-height: 200px;
}
.order,
.already{
	width: 100%;
	height: 44px;
	border-top: 1px solid var(--border-light);
	margin-top: 10px;
}
/*
 * activityDetail.html
 */
.activity-swiper{
	width: 100%;
}
.activity-swiper .swiper-container{
	width: 100%;
	height: 285px;
}
.activity-swiper .swiper-container img{
	width: 100%;
	height: 100%;
}
.activity-info{
	width: 100%;
	box-sizing: border-box;
	padding: 10px 15px;
	position: relative;
	font-size: 16px;
}
.activity-info h3{
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
	color: #000000;
}
.activity-info .tag{
	padding: 5px 0;
}
.activity-info .tag dt{
	display: inline-block;
}
.activity-info .tag dd{
	display: inline-block;
	line-height: 24px;
	padding: 0 10px;
	/*background-color: #f0f0f0; */
	margin-right: 10px;
}
.activity-info .collect{
	position: absolute;
	right: 10px;
	bottom: 35px;
	cursor: pointer;
	width: 32px;
	height: 32px;
}

/*
 * 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);
	display: block;
	width: calc(100% - 80px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 5px;
}
.base-address{
	position: relative;
	padding:  8px 0;
}
.baseInfo .base-address p{
	line-height: 20px;
	background-image: url(/public/app/img/dingwei.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 a{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
}
.base-address .icon{
	display: block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	background-position: center;
	background-size: 20px;
	border: 1px solid #6d6e71;
	box-sizing: border-box;
	border-radius: 50%;
	margin-top: 0 !important;
}
.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{
	margin-top: 0px;
}
.plain .tab{
	width: 100%;
	height: 44px;
	display: flex;
	justify-content: space-between;
	line-height: 43px;
	box-sizing: border-box;
	padding: 0 20px;
	border-bottom: 1px solid var(--border-base);
}
.plain .tab .tab-item{
	text-align: center;
	width: 36%;
	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{
	padding: 10px 15px;
	line-height: 28px;
	display: none;
}

.plain .tab-content h4{
	font-size: 15px;
	text-align: center;
}
.plain .tab-content p{
	font-size: 14px;
	line-height: 28px;
	text-indent: 2em;
}
.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,
.already button{
	display: block;
	background-color: #ff9014;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	font-size: 14px;
	letter-spacing: 0.5em;
	font-weight: 500;
	line-height: 44px;
	border-radius: 4px;
}
/*
 * 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/dingwei.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: #003366;
}
.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 10px;
}
.my-menu .my-menu-title-bar{
	display: flex;
	align-items: center;
}
.my-menu .my-menu-title-bar > .my-menu-title{
	flex: 1;
}
.my-menu .my-menu-title-bar input[name=date]{
	display: block;
	width: 120px;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 2px;
	box-sizing: border-box;
	padding: 0 10px;
	text-align: center;
	background: url("/public/app/img/pulldown.png") no-repeat right 10px center/15px;
}
.my-menu .my-menu-title{
	font-size: 18px;
	line-height: 56px;
	color: #333;
}
.my-menu li{
	line-height: 46px;
	height: 46px;
	border-bottom: 1px solid #f5f5f5;
	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: 36px;
	height: 36px;
	box-sizing: border-box;
	padding: 6px;
	margin-right: 10px;
}
.my-menu li .img img{
	width: 100%;
	height: 100%;
}
.my-menu .text{
	flex: 1;
	color: #000;
	font-size: 14px;
}
.my-menu .status{
	font-size: 12px;
	color: #ff9014;
	width: 60px;
	text-align: center;
}
.my-menu .status.success{
	color: #003366;
}
.my-menu .value{
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 14px;
}
.my-menu .rise{
	color: #dc002e;
}
.my-menu .value img{
	display: block;
	width: 14px;
	height: 14px;
	margin-left: 5px;
}

.my-menu .icon-right{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url(/public/app/img/right.png);
	background-position: center;
	background-size: 16px 18px;
}
button.exit{
	display: block;
	width: 90%;
	height: 40px;
	margin: 20px auto;
	background-color: #ff9014;
	color: #FFFFFF;
	border-radius: 4px;
}

button.chose_user{
	display: block;
	width: 90%;
	height: 40px;
	margin: 20px auto;
	background-color: #003366;
	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;
	display: grid;
	grid-template-columns: 25% 50% 25%;
}
.form-group{
	margin: 20px 0;
	padding: 0 10px;
	box-sizing: border-box;
}
.form-group label{
	font-size: 14px;
	display: block;
	text-align: left;
	margin-bottom: 5px;
	color: #333;
	padding: 0 5px;
}
.form-group input{
	width: 100%;
	height: 38px;
	border: 1px solid #eee;
	outline: none;
	border-radius: 4px;
	padding-left: 5px;
	font-size: 13px;
	box-sizing: border-box;
}
.form-group button{
	width: 100%;
	height: 36px;
	text-align: center;
	line-height: 36px;
	background-color: #409eef;
	border-radius: 4px;
	color: #fff;
}

	.video-info{
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		position: relative;
	}
	.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;
	}
	.interact{
		position: absolute;
		bottom: 80px;
		right: 5px;
		height: 34px;
		width: 200px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.collect__btn{
		margin-right: 10px;
	}
	.view_num{
		display: flex;
		align-items: center;
		line-height: 30px;
		border: 1px solid #ccc;
		border-radius: 4px;
		margin-right: 10px;
		padding: 0 5px;
		box-sizing: border-box;
	}
	.view_num img{
		display: block;
		width: 17px;
		height: 17px;
		margin-right: 5px;
	}
	.collect__btn a{
		display: block;
		width: 32px;
		height: 32px;
		padding: 2px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	.collect__btn img{
		display: block;
		width: 100%;
		height: 100%
	}

	.collect__btn .collected{
		display: none;
	}

	.collect__btn.selected .uncollected{
		display: none;
	}

	.collect__btn.selected .collected{
		display: block;
	}
/* 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 / 30%);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 1s ease;
}

.dialog-card {
	width: calc(100% - 100px);
	min-height: 150px;
	box-sizing: border-box;
	padding: 40px 15px 40px;
	background-color: #ffffff;
	box-shadow: 0 0 10px #cccccc;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

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

.dialog-body {
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 0;
	right: 0;
	padding: 10px;
	display: flex;
	align-items: center;
	font-size: 16px;
}

.dialog-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	display: flex;
	border-top: 1px solid #EEEEEE;
	overflow: hidden;
}

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

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


/*
 * appHead
 */
.appHead{
	width: 100%;
	height: 45px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 100%;
	background-color: #003366;
	color: #fff;
	padding: 5px 10px 0;
	box-sizing: border-box;
}
.appHead > div{
	overflow: hidden
}
.appHead .left-operate{
	display: flex;
	flex-flow: row nowrap;
}
.left-operate a{
	display: block;
	width: 40px;
	height: 40px;
	padding: 5px;
	box-sizing: border-box;
}
.left-operate a img{
	display: block;
	width: 100%;
	height: 100%;
}
.appHead .right{
	display: flex;
	flex-flow: row nowrap;
}
.user-profile{
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
	line-height: 40px;
	justify-self: end;
}
.user-profile .user-avatar{
	width: 40px;
	height: 40px;
	padding: 5px;
	box-sizing: border-box;
}
.user-profile .user-avatar img{
	display: block;
	width: 100%;
	height: 100%;
	clip-path: circle(50%)
}
.user-profile .user-name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center
}
.user-profile .user-name a{
	display: inline-block;
	font-size: 13px;
	width: 4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	color: #ffffff;
}
.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: #003366;
	font-size: 15px;
	line-height: 20px;
}
.base-information .baseDate .date-item img{
	display: block;
	width: 20px;
	height: 20px;
	margin: 5px auto 0;
}

.btn.btn-red{
	background-color: #de002d;
	color: #ffffff
}
/* 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: #ff9014;
}
.btn-group a:last-child{
	background-color: #003366;
}
.btn-group .word{
	flex: 1;
	text-align: center;
	padding-right:10px;
}
.btn-group a img{
	display: block;
	width: 30px;
	height: 30px;
	padding: 2px;
}

.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: 100%;
	aspect-ratio: 16 / 9;
	background-color: rgba(0, 0, 0, .3);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.btn-warning{
	border: 1px solid #ff9014 !important;
	background-color: #ff9014 !important;
	box-sizing: border-box;
}
/*
 * comment
 */
 .subhead {
	font-size: 14px;
	width: calc(100% - 30px);
	margin: 0 auto;
}

.subcomment-card {
	width: calc(100% - 20px);
	background: #ffffff;
	margin: 10px auto;
	border-radius: 4px;
}

.subcomment-card.scroll {
	flex: 1;
	overflow: auto;
}

.subcomment-card .subcomment-item {
	padding: 10px 15px;
}

.subcomment-card .subcomment-item .commenter {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.subcomment-card .subcomment-item .commenter .reviewer {
	display: flex;
}

.subcomment-card .subcomment-item .commenter .reviewer .avatar img {
	display: block;
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.subcomment-card .subcomment-item .commenter .reviewer .reviewer-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.subcomment-card .subcomment-item .commenter .reviewer .reviewer-info .name {
	font-size: 13px;
}

.subcomment-card .subcomment-item .commenter .reviewer .reviewer-info .time {
	font-size: 12px;
	color: #999999;
	width: max-content;
}

.subcomment-card .subcomment-item .commenter .interaction {
	display: flex;
}

.subcomment-card .subcomment-item .commenter .interaction .inter-item img {
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
}

.subcomment-card .subcomment-item .commenter .interaction .inter-item img:nth-of-type(2) {
	display: none;
}

.subcomment-card .subcomment-item .commenter .interaction .inter-item.active img {
	display: none !important;
}

.subcomment-card .subcomment-item .commenter .interaction .inter-item.active img:nth-of-type(2) {
	display: block !important;
}

.subcomment-card .subcomment-item .comment-content {
	padding: 7px 0;
	font-size: 13px;
	border-bottom: 1px solid #eeeeee;
}

.subcomment-card .subcomment-item:last-child .comment-content {
	border-bottom: none;
}

.subcomment-card .subcomment-item .add {
	width: 100%;
	background: #f5f7fa;
	padding: 5px;
	box-sizing: border-box;
}

.subcomment-card .subcomment-item .add .publisher {
	color: #999999;
}

.comment-input {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;
	max-width: 450px;
	margin: 0 auto;
	height: 50px;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px -1px 1px #CCCCCC;
}

.comment-input input {
	flex: 1;
	overflow: hidden;
	height: 36px;
	padding: 0 5px;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	color: #999999;
	outline: none;
	background: #fafafa;
}

.comment-input button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	outline: none;
	display: block;
	height: 36px;
	width: 60px;
	text-align: center;
	color: #ffffff;
	background: #4099ef;
	border-radius: 4px;
	margin-left: 5px;
}

/*
 * progress
 */
.progress{
	width: 100%;
	padding: 0 10px 70px;
	box-sizing: border-box;
}
.progress .progress-title{
	width: 100%;
	height: 40px;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ebeef5;
}
.progress .progress-title .title{
	font-size: 20px;
    color: #003366;
    margin-right: 20px;
    font-weight: 400;
}
.progress .progress-title .subtitle{
	font-size: 12px;
	color: var(--secondary-text);
	flex: 1;
	overflow: hidden;
}
.progress .menu-nav{
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	padding: 10px 0;
	border-bottom: 1px solid #ebeef5;
}
.progress .menu-nav .menu-item{
	flex: 1;
	overflow: hidden;
	text-align: center;
}
.progress .menu-nav .menu-item a{
	display: block;
	line-height: 34px;
	height: 34px;
	width: 100px;
	margin: 0 auto;
	color: #303133;
	border-radius: 15px;
}
.progress .menu-nav .menu-item.active a{
	background-color: #003366;
	color: #fff;
}

.white-card{
	width: 100%;
	padding: 20px 30px;
	background: #fff;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	border: 1px solid #eee;
	margin-top: 10px;
}
.white-card .left{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 14px;
	color: #000;
}
.white-card .left span {
    display: inline-block;
    background-color: #ffaa00;
    color: #fff;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 10px;
}
.white-card .left .num {
    font-size: 28px;
    font-weight: bold;
}
.white-card > img {
    display: block;
    width: 100px;
    height: 100px;
}
.data-card{
	margin-top: 10px;
    background-color: #ffffff;
    border-radius: 4px;
	border: 1px solid #eee;
	box-sizing: border-box;
}
.data-card .title{
	height: 41px;
	line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
	font-size: 15px;
	padding: 0 10px;
	box-sizing: border-box;
	background: #003366;
    color: #fff;
	margin: 0 -1px 5px;
	border-radius: 4px 4px 0 0;
}
.data-card .data-list{
	padding: 5px 0;
}
.data-card .data-list .data-item{
	display: flex;
	align-items: center;
	height: 70px;
}
.data-card .data-list .data-item .pull-left{
	display: block;
    color: #fff;
    font-size: 12px;
    background: #003366;
    margin: 0px 30px 0 20px;
    height: 24px;
    line-height: 24px;
    border-radius: 14px;
    width: 44px;
    text-align: center;
}
.data-card .data-list .data-item .pull-right .info{
	flex: 1;
	font-size: 14px;
	color: #000
}
.data-card .data-list .data-item .pull-right .subTip{
	color: #888888;
    margin-top: 5px;
    font-size: 12px;
}
.evaluate-card {
    border-radius: 4px;
}
.evaluate-card .title{
	height: 41px;
	line-height: 40px;
	font-size: 16px;
	background-color: #003366;
	color: #fff;
	border-radius: 4px 4px 0 0;
	padding-left: 10px;
	margin: 0 -1px 0;
	width: 100%;
	box-sizing: border-box;
}
.evaluate-card .evaluate-list{
	font-size: 14px;
	border: 1px solid #eee;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0;
}
.evaluate-card .evaluate-list .evaluate-item{
	display: flex;
	padding-left: 5px;
	font-size: 14px;
	width: 50%;
	box-sizing: border-box;
	line-height: 40px;
	color: #666666;
}
.evaluate-card .evaluate-list .evaluate-item .index{
	color: #000;
	font-weight: bold;
	width: 70px;
	text-align: right;
}
.evaluate-map{
	border: 1px solid #eee;
	margin-top: 10px;
}
.physical{
	margin-top: 10px;
	border: 1px solid #eee;
}
.suggestion{
	margin-top: 10px;
	border: 1px solid #eee;
}
.physical-item::after{
	clear: both;
	display: block;
	content: ""
}
.physical-item{
	border-bottom: 1px solid #f3f3f3;
	padding: 0 0 10px;
}

.physical-item .item-status{
	display: flex;
	justify-content: space-between;
	height: 50px;
	align-items: center;
}
.physical-item .item-status .subject{
	font-size: 17px;
	color: #000000;
	display: flex;
	line-height: 30px;
	align-items: center;
}
.physical-item .item-status .subject .tag{
	display: block;
	font-size: 12px;
	color: #fff;
	display: block;
	padding: 0 4px;
	height: 20px;
	line-height: 20px;
	border-radius: 4px;
	margin-left: 10px;
}
.tag.primary{
	background-color: #40aafa;
}
.tag.warning{
	background-color: #fc9427;
}
.tag.danger{
	background-color: #f75050;
}
.physical-item .item-status .value{
	font-size: 13px;
}
.physical-item .item-status .value span{
	color: #dc002e;
}
.physical-item .score{
	float: left;
	width: 50%;
	height: 40px;
	box-sizing: border-box;
	font-size: 13px;
	line-height: 20px;
}
.physical-item .score span{
	color: #00baff;
}
.physical-item .suggest{
	float: right;
	width: 50%;
	height: 40px;
	line-height: 40px;
	text-align: right;
	box-sizing: border-box;
	font-size: 13px;
	color: #2284a3;
}
.physical-item .note{
	padding: 10px 0;
	box-sizing: border-box;
	line-height: 24px;
	min-height: 48px;
	display: none;
}

.rank-list .connor{
	background-color: #eedad9;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	height: 180px;
}
.connor .top{
	padding: 10px 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	font-size: 14px;
	color: #fff;
	border-radius: 4px 4px 0 0;
}
.connor .top img{
	display: block;
	width: 50px;
	height: 50px;
	clip-path: circle(50%);
}
.connor .top:first-child{
	order: 2;
	height: 160px;
	background-color: #003366;
}
.connor .top:nth-child(2){
	order: 1;
	height: 140px;
	background-color: #ff9014;
}
.connor .top:last-child{
	order: 3;
	height: 120px;
	background-color: #12518e;
}
.rank-list .ranking-item{
	display: flex;
	width: 100%;
	align-items: center;
	height: 70px;
	font-size: 13px;
}
.rank-list .ranking-item:nth-child(n + 2){
	border-top: 1px solid #ddd;
}
.rank-list .ranking-item .index{
	width: 70px;
	text-align: center;
	position: relative;
	color: #fff;
	height: 26px;
	line-height: 26px;
}
.rank-list .ranking-item .score{
	width: 80px;
}
.rank-list .ranking-item .name{
	flex: 1;
}
.rank-list .ranking-item .index::after{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 22px;
	width: 26px;
	height: 100%;
	background-color: #003366;
	z-index: -1;
	border-radius: 50%;
}
/*
 *
 */
.plr-10{
	padding: 0 10px;
	box-sizing: border-box;
}
.plr-10 .pageTitle{
	height: 61px;
	line-height: 40px;
	font-weight: 400;
	color: #003366;
	padding: 10px 0;
	font-size: 20px;
	display: grid;
	grid-template-columns: 25% 50% 25%;
}
.pageTitle .left{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
}
.pageTitle .pageName{
	text-align: center;
}
.pageTitle .left .icon {
	display: block;
	width: 22px;
	height: 22px;
}
.progress .user-profile .user-name a,
.plr-10 .pageTitle .user-name a{
	color: #333333;
	font-size: 13px;
	line-height: 40px;
	display: block;
}

/*
 * 	select2
 */
.select2-container--default .select2-selection--single{
	height: 38px !important;
	border: 1px solid #eee !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 38px !important;
	top: 0 !important;
}

/*
 * add
 */
.d-flex{
	display: flex;
}
.sport-data .sport-text{
	width: 40%;
	overflow: hidden;
}
.sport-data .sport-text .user-info{
	padding: 10px 0;
	text-align: center;
	align-items: center;
}
.sport-data .sport-text .user-info .avatar{
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin: 0px 5px 0 0;
}
.sport-data .sport-text .user-info .d-block{
	font-size: 16px;
	font-weight: bold;
	box-sizing: border-box;
	flex: 1;
	overflow: hidden;
}
.sport-data .sport-text .user-info .user-name{
	font-size: 18px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sport-data .sport-text .user-info .birthday{
	font-size: 12px;
	font-weight: normal;
	background-color: #2cabeb;
	color: #ffffff;
	padding: 1px 3px;
	border-radius: 20px;
	margin-top: 5px;
}
.sport-data .amount{
	line-height: 32px;
	font-size: 16px;
	color: #000;
}
.sport-data .amount .num{
	color: #31a1c6;
	font-weight: bold;
}
.sport-data .amount .num > span{
	font-weight: normal;
}
.sport-pic{
	width: 60%;
}
.sports-item{
	width: 50%;
	overflow: hidden;
}
.sports-item:first-of-type{
	background: url('../img/yellow-circle.png') no-repeat center 20px/80%;
	color: #fcc068;
}
.sports-item:last-of-type{
	background: url('../img/blue-circle.png') no-repeat center 20px/80%;
	color: #1bb6f3;
}
.sports-item .icon{
	display: block;
	width: 16px;
	height: 16px;
	margin: 32px auto 10px;
}
.sports-item div{
	line-height: 16px;
	text-align: center;
}
.sports-item .grade{
	font-size: 16px;
	margin-top: 15px;
	line-height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sports-item .grade img{
	display: block;
	width: 16px;
	height: 16px;
}


/*
 */
.sports-test .test-item{
	display: flex;
	align-items: center;
	height: 80px;
	box-sizing: border-box;
	padding: 10px 0;
	border-bottom: 1px solid #f3f3f3;
}
.sports-test .test-item .sport-img{
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 15px;
	object-fit: contain;
}
.sports-test .test-item .correctly{
	display: block;
	width: 20px;
	height: 20px;
}
.sports-test .test-item .test-name{
	font-size: 15px;
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000000;
}
.sports-test .test-item .value{
	display: block;
	width: 20%;
	margin-right: 10px;
	text-align: left;
}
.sports-test .test-item .value .nums{
	font-size: 15px;
	color: #000000;
}
.sports-test .test-item .value .date{
	color: #999999;
	margin-top: 7px;
}
.sports-test .test-item .analysis{
	width: 20px;
	height: 20px;
	padding: 0 10px;
}
.sports-test .test-item .analysis img{
	display: block;
	width: 100%;
	height: 100%;
}
.sports-test .test-item .unit{
	width: 15%;
	font-size: 15px;
	color: #000;
	text-align: left;
}
.sports-test .test-item .appraise{
	width: 10%;
	font-size: 15px;
	color: #000000;
}

.menu {
	width: calc(100% - 20px);
	height: 80px;
	margin: 10px auto;
	background: #ffffff;
	display: flex;
	align-items: center;
	border-radius: 4px;
}

.menu .menu-item {
	display: block;
	width: 50%;
	display: flex;
	align-items: center;
	margin: 10px 0;
	padding: 0 10px;
}

.menu .menu-item:first-child {
	border-right: 1px solid #eeeeee;
}

.menu .left {
	display: inline-block;
	border-radius: 50%;
	padding: 7px;
	margin-right: 10px;
}

.menu .left img {
	display: block;
	width: 25px;
	height: 25px;
}

.menu .left.blue {
	background: #1378fa;
}

.menu .left.red {
	background: #f14179;
}

.menu .right .title {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 5px;
}

.menu .right .subtitle {
	font-size: 13px;
	color: #666666;
}

.date-list {
	width: calc(100% - 20px);
	background: #ffffff;
	margin: 10px auto;
	overflow: hidden;
}

.date-list .date-item {
	padding: 5px;
	margin: 0 auto;
	border-bottom: 1px solid #eeeeee;
	color: #333333;
}

.date-list .date-item.hasNoChild .date-tab {
	background: none;
	padding: 0 10px;
}

.date-list .date-item.hasNoChild.active {
	background-color: #21A0F0;
	color: #FFFFFF;
}

.date-list .date-item.hasNoChild.active .stock {
	color: #FFFFFF;
}

.date-list .date-item .date-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: bold;
	transition: all ease 0.3s;
}

.date-list .date-item .date-tab .stock {
	font-size: 14px;
	color: #666666;
}

.date-list .date-item.expanded .date-tab .arrow{
	transform: rotate(90deg);
	transition: all 0.2s linear;
}

.date-list .date-item .time-room {
	display: none;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 5px;
	flex-wrap: wrap;
}

.date-list .date-item .time-room .time-item {
	display: flex;
	width: calc(50% - 5px);
	box-sizing: border-box;
	border: 1px solid #eeeeee;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 36px;
	line-height: 36px;
	border-radius: 4px;
	text-align: center;
	transition: all ease 0.5s;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20px;
}

.date-list .date-item .time-room .time-item small{
	color: #999999;
	transition: all ease 0.5s;
}

.date-list .date-item .time-room .time-item.active small{
	color: #ffffff;
}

.date-list .date-item .time-room .time-item:nth-child(even) {
	margin-right: 0;
}

.date-list .date-item .time-room .time-item.active {
	background: #21A0F0;
	color: #ffffff;
	border-color: #21A0F0;
}

.date-list .date-item.expanded .time-room {
	display: flex !important;
}

.date-list .date-item .arrow img{
	display: block;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 10px;
}

.btn.next {
	display: block;
	width: calc(100% - 20px);
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	text-align: center;
	margin: 10px auto;
	background: linear-gradient(to right, #0f3ef2 10%, #156df3 50%, #1aacf9 90%);
	color: #ffffff;
	border-radius: 4px;
}

.title-bar{
	border-bottom: 1px solid #eeeeee;
	line-height: 20px;
	padding: 10px 0 10px 10px;
	position: relative;
}

.title-bar::before{
	display: block;
	content: "";
	width: 4px;
	height: 20px;
	position: absolute;
	left: 0px;
	background: #0a60d6;
}

.form-card{
	width: calc(100% - 20px);
	margin: 10px auto;
	background-color: #ffffff;
}

form .form-group {
	margin-bottom: 10px;
	margin-top: 10px;
	clear: both;
}

form label {
	display: block;
	line-height: 28px;
	font-size: 14px;
}

form input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	height: 46px;
	border-radius: 4px;
	background: #eeeff4;
	box-sizing: border-box;
	padding: 0 10px;
	margin-top: 5px;
	outline: none;
}

.form-group::after{
	clear: both;
	display: block;
	content: '';
}

form .checkbox-item,
form .radio-item{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	float: left;
	padding: 10px 5px;
}

form input[type="checkbox"]{
	display: block;
	width: 15px;
	height: 15px;
	padding: 0;
	margin-top: 0;
	margin-right: 3px;
}

form input[type="checkbox"] + .relative,
form input[type="radio"] + .relative{
	margin-right: 10px;
}

/* datePicker */
.datePicker-container{
	display: block;
	width: 100%;
	height: 130px;
	background-color: #f3f3f6;
	overflow: auto;
}

.datePicker{
	display: block;
	width: max-content;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
}

.datePicker::after{ display: block; clear: both; content: ''}

.datePicker .datePicker__item{
	width: 80px;
	height: 100%;
	background-color: #fff;
	text-align: center;
	border-radius: 6px;
	box-shadow: 0 0 1px 4px #eee;
	padding: 10px 0;
	box-sizing: border-box;
	float: left;
	margin-right: 15px;
}

.datePicker .datePicker__item:last-child{
	margin: 0;
}

.datePicker .datePicker__item .weekName{
	font-size: 17px;
	color: #000;
	line-height: 20px;
	margin-bottom: 8px;
}

.datePicker .datePicker__item .date{
	font-size: 14px;
	color: #666666;
	margin-bottom: 8px;
}

.datePicker .datePicker__item .btn-order{
	font-size: 14px;
	display: inline-block;
	border: 1px solid #0a60d6;
	line-height: 24px;
	padding: 0 12px;
	border-radius: 12px;
	color: #0a60d6;
}

/*
 */
.page__head{
	width: 100%;
	height: 55px;
	position: relative;
	border-bottom: 1px solid #ccc;
}
.page_router{
	position: absolute;
	left: 10px;
	top: 10px;
	bottom: 10px;
	width: 35px;
	background: url(/public/default/img/left.png) no-repeat center/60%;
}
.page__title{
	width: 100%;
	line-height: 55px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.page-container{
	position: absolute;
	top: 56px;
	left: 0;
	width: 100%;
	height: calc(100% - 56px);
}

.datePicker2-container{
	width: 100%;
	overflow: auto;
}

.datePicker2{
	display: block;
	width: max-content;
	height: 58px;
	background-color: #f7f7f8;
	border-bottom: 3px solid #e7e7e8;
	box-sizing: border-box;
}

.datePicker2::after{ clear: both; display: block; content: "";}

.datePicker2 .datePicker2__item{
	float: left;
	display: block;
	width: 90px;
	height: 100%;
	text-align: center;
	border-right: 1px solid #eee;
	color: #000;
	border-bottom: 3px solid transparent;
}

.datePicker2 .datePicker2__item.active{
	border-bottom: 3px solid #0a60d6;
	color: #0a60d6;
	background-color: #ffffff;
	transition: all linear 0.3s;
}

.datePicker2 .datePicker2__item .weekName{
	line-height: 30px;
	font-size: 16px;
}

.datePicker2 .datePicker2__item .date{
	font-size: 14px;
}

.table-container{
	width: 100%;
	height: calc(100% - 230px);
	display: flex;
	overflow: auto;
	padding: 10px 0;
}

.table-container .timeBar{
	width: 60px;
	line-height: 40px;
	text-align: right;
	margin-top: 10px;
	padding-right: 5px;
	font-size: 14px;
	box-sizing: border-box;
}

.booking__scroll{
	flex: 1;
	height: max-content;
	overflow-x: auto;
	overflow-y: hidden;
}

.booking__table{
	border-collapse: collapse;
	table-layout: fixed;
	width: max-content;
}

.booking__table th,
.booking__table td{
	border: 2px solid transparent;
	width: 64px;
	height: 40px;
	overflow: hidden;
	word-break: break-all;
	box-sizing: border-box;
	text-align: center;
	color: #ffffff;
	border-radius: 6px;
}

.booking__table th{
	border: none;
	height: 30px;
	color: #333333;
}

.booking__table td.orderable{
	background-color: #5ea763;
}
.booking__table td.unOrderable{
	background-color: #cbcbcc;
}
.booking__table td.selected{
	background-color: #5a72f1;
}
.booking__table td.sold{
	background-color: red;
}

.choosen{
	padding: 10px;
	height: 82px;
	box-sizing: border-box;
}
.bottom-bar{
	width: 100%;
	box-sizing: border-box;
	height: 70px;
	border-top: 1px solid #eee;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px;

}
.bottom-bar .btn-submit{
	background-color: #5a72f1;
	color: #fff;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	border-radius: 25px;
	display: block;
	width: 100px;
	text-align: center;
}
.bottom-bar .price .num{
	font-size: 24px;
	color: #5a72f1;
	font-weight: bold;
}
.bottom-bar .price .tip{
	font-size: 12px;
	vertical-align: bottom;
}

.example{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 5px 0;
}
.example .example__item{
	display: block;
	width: 20%;
	text-align: center;
	font-size: 12px;
}
.example .example__item .example__item__pic{
	display: block;
	width: 60px;
	height: 25px;
	margin: 0 auto 5px;
	border-radius: 4px;
	background-color: #5ea763;
}

.example .example__item .example__item__pic.sold{
	background-color: red;
}
.example .example__item .example__item__pic.cannot{
	background-color: #c9c9cb;
}
.example .example__item .example__item__pic.selected{
	background-color: #5a72f1;
}

.selected-box{
	display: flex;
	align-items: center;
	margin-left: -5px;
	margin-right: -5px;
}
.selected-box .selected__item{
	display: block;
	width: 25%;
	font-size: 12px;
	padding: 0 5px;
	box-sizing: border-box;
}
.selected-box .selected__item .selected__item-border{
	border: 1px solid #0a60d6;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	line-height: 24px;
	text-align: center;
	color: #0a60d6;
}
.selected-box .selected__item .selected__item-border .time-quantum{
	background-color: #5a72f1;
	line-height: 24px;
	color: #ffffff;
	text-align: center;
}




/* orderList */
.order-list {
	width: 100%;
	background: #ffffff;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 10px 0;
}

.order-list .order-item {
	box-sizing: border-box;
	padding: 15px 0px;
	display: flex;
	align-items: center;
}

.order-list .order-item .left {
	padding: 12px;
	background: #c9edf6;
	border-radius: 50%;
	margin: 0 10px;
}

.order-list .order-item .left img {
	display: block;
	width: 30px;
	height: 30px;
}

.order-list .order-item .descr {
	flex: 1;
	overflow: hidden;
}

.order-list .order-item .descr .name {
	font-size: 17px;
	font-weight: bold;
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

.order-list .order-item .descr .name .tip {
	font-size: 14px;
	font-weight: normal;
	margin-left: 5px;
}

.order-list .order-item .descr .name .badge {
	display: block;
	width: 16px;
	height: 16px;
	margin-left: 5px;
}

.order-list .order-item .descr .name .badge.success {
	background: url(../img/success.png) no-repeat center/100% 100%;
}

.order-list .order-item .descr .name .badge.error {
	background: url(../img/error.png) no-repeat center/100% 100%;
}

.order-list .order-item .descr .status {
	font-size: 14px;
	color: #777777;
}

.order-list .order-item .descr .reason {
	display: inline-block;
	font-size: 14px;
	color: #bc4c41;
	background-color: rgba(241, 92, 16, 0.1);
	padding: 1px 3px;
}

.order-list .order-item .btn {
	display: inline-block;
	background: #e4eff8;
	border: 1px solid #409EFF;
	margin: 0 10px;
	padding: 2px 12px;
	text-decoration: none;
	border-radius: 4px;
	color: #409EFF;
}

.order-detail-list {
	margin-top: 10px;
	min-height: 80px;
	position: relative;
	border-radius: 2px;
}

.order-detail-list .order-detail-item {
	background-color: #ffffff;
	border-radius: 2px;
}

.order-detail-list .order-detail-item:nth-last-child(n + 2) {
	margin-bottom: 10px;
}

.order-detail-list .order-detail-item .order-head {
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eeeeee;
	padding: 0 10px;
}

.order-detail-list .order-detail-item .order-head .left {
	font-size: 18px;
	color: #333333;
}

.order-detail-list .order-detail-item .order-head .status {
	font-size: 14px;
	color: #FFFFFF;
	display: inline-block;
	padding: 1px 4px;
	border-radius: 4px;
}

.order-detail-list .order-detail-item .order-detail-info {
	padding: 0 10px;
}

.order-detail-list .order-detail-item .order-detail-info .infoBar {
	display: flex;
	align-items: center;
	height: 34px;
	color: #333333;
}


/*
 * index2
 */
.index2 .option-list {
	padding-top: 10px;
	margin-bottom: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid #EEEEEE;
}

.index2 a{
	color: #333333;
}

.index2 .options-content {
	display: none;
	background: #ffffff;
	padding: 8px 0;
}

.index2 .options-content.active {
	display: block;
}

.index2 .options-content .subOptions {
	display: flex;
}

.index2 .options-content .subOptions button {
	display: block;
	width: 70px;
	height: 40px;
	border-radius: 20px;
	border: none;
	background: #f2f2f2;
	font-size: 12px;
	margin: 0 5px;
}

.index2 .options-content .subOptions button.active {
	background: #e5687a;
	color: #ffffff;
}

.index2 .options-content .news-list {
	padding: 10px 15px 0;
}

.index2 .options-content .news-list .news-item {
	padding: 8px 0;
	display: flex;
	flex-wrap: wrap;
	color: #333;
}

.index2 .options-content .news-list .news-item:nth-last-child(n + 2) {
	border-bottom: 1px solid #eeeeee;
	margin-bottom: 10px;
}

.index2 .options-content .news-list .news-item .left img {
	margin-right: 10px;
	display: block;
}

.index2 .options-content .news-list .news-item .right {
	font-size: 14px;
	flex: 1;
	overflow: hidden;
}

.index2 .options-content .news-list .news-item .right>div {
	flex: 1;
	overflow: hidden;
	line-height: 30px;
}

.xcld .options-content .news-list .news-item .right>div {
	line-height: 22.5px;
	height: 22.5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1em;
	color: #333;
}
.index2 .options-content .news-list .news-item .right .attr{
	display: inline;
}
.index2 .options-content .news-list .news-item .right .val{
	display: inline;
}

.xcld .options-content .news-list .news-item .right .flex-line {
	width: 100%;
	display: flex;
	justify-content: space-between;
	color: #666666;
}

.index2 .options-content .news-list .news-item .time {
	font-size: 13px;
}

.index2 .options-content .news-list .news-item .operate{
	padding: 10px 0 0;
	width: 100%;
	text-align: center;
}


.option-list {
	width: 100%;
	display: flex;
	justify-content: center;
	background: #ffffff;
	padding-bottom: 5px;
	line-height: 24px;
	margin-bottom: 8px;
}

.option-list a {
	font-size: 14px;
	margin: 0 10px;
	border-bottom: 2px solid transparent;
	padding: 0 3px;
	color: #333;
}

.option-list a.active {
	color: #CE1113;
	border-color: #CE1113;
}

/* headBar */
.headBar {
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	height: 50px;
	background: #ffffff;
	display: flex;
	justify-content: space-between;
}

.headBar .left {
	display: flex;
	width: 30%;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	padding: 0 10px;
}

.headBar .left .icon {
	display: block;
	width: 22px;
	height: 22px;
}

.headBar .right {
	display: flex;
	width: 30%;
	justify-content: flex-end;
	align-items: center;
}

.headBar .right img {
	display: block;
	width: 30px;
	height: 30px;
	margin-right: 5px;
}

.headBar .right a.btn {
	margin-right: 10px;
	display: block;
	font-size: 12px;
	color: #FFFFFF;
	background: #e5687a;
	padding: 2px 6px;
	border-radius: 4px;
}
.headBar .right a{
	display: flex;
	align-items: center;
	padding-right: 10px;
}
.headBar .right .name{
	font-size: 12px;
	max-width: 4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.headBar .right .link {
	font-size: 13px;
	color: #e35f74;
	margin-right: 10px;
}

.headBar .center {
	font-size: 18px;
	font-weight: bold;
	line-height: 50px;
	flex: 1;
	text-align: center;
}

.suggestion__list{
	width: 100%;
	box-sizing: border-box;
	padding: 10px 5px;
	--border-color: #ddd;
	background-color: #eeeeee;
}

.suggestion__item{
	 width: 100%;
	 margin-bottom: 10px;
	 background-color: #ffffff;
	border-bottom: 1px solid #ccc;
 }

.suggestion__item .suggestion__item__head{
	border-bottom: 1px solid var(--border-color);
	height: 46px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	box-sizing: border-box;
}

.suggestion__item .suggestion__item__head .suggestion__item__title{
	font-size: 18px;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suggestion__item .suggestion__item__body{
	min-height: 80px;
	box-sizing: border-box;
	padding: 10px 10px 0;
	font-size: 15px;
	overflow: hidden;
}

.suggestion__item .suggestion__item__footer{
	line-height: 40px;
	text-align: right;
	padding-right: 15px;
}

.suggestion__item .suggestion__item__footer a{
	color: #333;
}

.icon-demo-content a{
	display: block;
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
}

.sportRecord__list{
	width: 100%;
	padding: 0px 15px;
	box-sizing: border-box;
}
.sportRecord__list .sportRecord__item{
	display: flex;
	align-items: center;
	height: 60px;
	border-bottom: 1px solid #eeeeee;
}

.sportRecord__list .sportRecord__item .sportRecord__item__name{
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
}

.sportRecord__list .sportRecord__item .sportRecord__item__time{
	color: #777;
	display: flex;
	align-items: center;
}

.sportRecord__list .sportRecord__item .sportRecord__item__time .year{
	margin-right: 10px;
}

/*
 * booked
 */
.booked .page__hd .page__title{
	height: 60px;
	line-height: 60px;
	padding: 0 10px;
	font-size: 20px;
	color: #003366;
	background-color: #fff;
	margin-bottom: 10px;
	font-weight: 500;
	font-weight: bold;
}
.venue__list{
	width: 100%;
}
.venue__list .venue__item{
	height: 60px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	display: flex;
}
.venue__item .booking-info{
	flex: 1;
	overflow: hidden;
	padding-left: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.venue__item .booking-info .venue__name{
	font-size: 15px;
}
.venue__item .booking-info .venue-book-time{
	font-size: 15px;
	color: #666;
}
.venue__item .booking-operate{
	width: 80px;
	height: 100%;
}
.venue__item .booking-operate .btn-addon{
	display: block;
	width: 60px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	border-left: 1px solid #eee;
	background-color: #f66969;
	color: #fff;
	margin: 13px 10px;
	border-radius: 4px;
}
.weui-form__control-area{
	background-color: #fff;
}

.page__body{
	position: absolute;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page__footer{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	border-top: 1px solid #ccc;
	line-height: 50px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0.2em;
}

.dialog-container{
	width: 90%;
	height: 60%;
	background-color: #fff;
	position: relative;
	border-radius: 4px;
}

.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 9999;
	max-width: 450px;
	margin: 0 auto;
	display: none;
}

.d-grid-center{
	display: grid;
	place-items: center;
}

.modal-content{
	width: 100%;
	height: 100%;
}

.modal-content .close{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9999;
	background-color: transparent;
}

.modal-content .close img{
	display: block;
	width: 30px;
	height: 30px;
}

.gallery{
	width: 100%;
	height: 75%;
	display: grid;
	place-items: center;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-y: contain;
}

.gallery img{
	display: block;
	width: 100%;
	height: auto;
}

/*
 * scancode ɨ��
 */
.rest-body{
	width: 100%;
	min-height: calc(100vh - 122px);
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.scancode-box{
	background-color: #ffffff;
	width: calc(100% - 56px);
	min-height: 430px;
	border-radius: 4px;
	box-shadow: 0 0 4px 2px #cecece;
	padding: 30px 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}
.scancode-box .sayhi{
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #333333;
}
.scancode-box .current-time{
	margin: 20px 0;
	font-size: 16px;
	text-align: center;
	color: #000;
}
.scancode-box .qrcode-container{
	border-top: 1px dashed #ccc;
	padding: 30px 50px;
}
.scancode-box .qrcode-container .qrcode-border{
	padding: 3px;
	box-sizing: border-box;
	border: 4px solid transparent;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.scancode-box .qrcode-container .qrcode-border::before{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 4px solid #595AD3;
	clip-path: polygon(0 0,0 100%, 10% 100%, 10% 90%, 0% 90%, 0 100%,0 0, 10% 0, 10% 10%, 0 10%, 0 0, 100% 0, 100% 10%, 90% 10%, 90% 0, 100% 0, 100% 100%, 90% 100%, 90% 90%, 100% 90%, 100% 0 );
}
.scancode-box .qrcode-container .qrcode-border img{
	display: block;
	width: 100%;
	height: auto;
}
.scancode-box .qrcode-container .tip{
	text-align: center;
	color: #333;
}

/* 专家预约 */
.order-item.specialist{
	align-items: flex-start;
}

.order-item .pull-left{
	margin-right: 7px;
}

.order-item .pull-left img{
	display: block;
	width: 80px;
	height: 120px;
	object-fit: cover;
}

.order-item .pull-right{
	flex: 1;
}

.order-item .pull-right .title{
	font-size: 20px;
	color: #000;
	font-weight: bold;
	margin-bottom: 5px;
	text-overflow: hidden;
}

.order-item .pull-right .category{
	font-size: 15px;
	color: #666666;
}

.order-item .pull-right .descr{
	font-size: 14px;
	color: #666666;
	overflow: hidden;
	line-height: 24px;
	max-height: 48px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.expert_detail .portrait{
	width: 100%;
	height: 120px;
	display: flex;
	align-items: center;
	background-color: #003366;
	padding: 15px;
	box-sizing: border-box;
}

.expert_detail .portrait .avatar{
	display: block;
	width: 64px;
	height: 80px;
	object-fit: cover;
	margin-right: 10px;
	border-radius: 4px;
}

.expert_detail .portrait .pull-right .name{
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 10px;
}

.expert_detail .portrait .pull-right .duty{
	font-size: 14px;
	color: #ffffff;
}

.expert_detail .introduce{
	padding: 15px 10px;
	box-sizing: border-box;
	color: #444;
	line-height: 24px;
	background-color: #ffffff;
	font-size: 14px;
}

.expert_detail .introduce .title{
	font-size: 15px;
	color: #000000;
	font-weight: bold;
	margin-bottom: 10px;
}

.order-list .order-item .left.square{
	padding: 0;
	background-color: transparent;
	border-radius: 0;
}

.order-list .order-item .left.square img{
	display: block;
	width: 60px;
	height: 80px;
	border-radius: 4px;
	object-fit: cover;
}

.order-list .order-item.portrait .descr .name{
	margin-bottom: 10px;
}

/*gpt*/
#app{
	height: calc(100vh - 70px);
	display: flex;
}

.app-content{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main{
	width: 100%;
	height: calc(100vh - 70px);
	min-height: 540px;
	max-height: 760px;
	background: #fff;
	box-sizing: border-box;
	box-shadow: 0 20px 40px 0 rgb(128 129 130 / 30%);
	border-radius: 6px;
	margin-bottom: 38px;
	overflow: hidden;
}

.header{
	height: 60px;
	padding: 0 24px;
	box-sizing: border-box;
	box-shadow: inset 0 -1px 0 0 #eaeff6;
	z-index: 99;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.login-container{
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 17px;
	color: #333;
	cursor: pointer;
}

.login-container img{
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.main-content{
	width: 100%;
	height: calc(100% - 51px);
	display: flex;
}

.main-chat{
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.main-side{
	width: 380px;
	border-left: 1px solid #eaeff6;
	display: flex;
	flex-direction: column;
}

/*
 * 布局
 */
.header h3{
	font-size: 20px;
	font-weight: normal;
	color: #28303d;
	margin: 0;
	line-height: 60px;
}

.chat-toolbar{
	height: 120px;
	background-color: #fff;
	display: flex;
	flex-flow: row nowrap;
}

.chat-toolbar textarea{
	flex: 1;
	overflow: hidden;
	padding: 0 16px;
	margin: 16px 0;
	outline: none;
	border: 0;
	resize: none;
	font-size: 14px;
	color: rgba(0,0,0,.65);
	line-height: 1.5;
	caret-color: #3d79ff;
	font-family: inherit;
}

.chat-toolbar button{
	outline: none;
	font-size: 14px;
	background-color: #3d79ff;
	color: #fff;
	height: 36px;
	margin: 16px 16px 0;
	border: 0;
	text-align: center;
	letter-spacing: 2px;
	width: 80px;
	border-radius: 18px;
	cursor: pointer;
}

.chat-scroll{
	flex: 1;
	overflow: hidden;
	background-color: #edf1f6;
}

.recordRightSide{
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.recordRightSide .recordRightSide-below{
	flex: 1;
	overflow: hidden auto;
}

.recordRightSide .recordRightSide-below .record-list{
	padding: 0 0 0 20px;
}

.recordRightSide .recordRightSide-below .record-list .record-item{
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 20px;
	box-shadow: inset 0 -1px 0 0 #eaeff6;
	padding-right: 10px;
}

.recordRightSide .recordRightSide-below .record-list .record-item img{
	display: block;
	width: 14px;
	height: 14px;
}

.recordRightSide .recordRightSide-below .record-list .record-item a{
	color: #28303d;
	font-size: 14px;
	cursor: pointer;
}

.recordRightSide .recordRightSide-below .record-list .record-item:hover a{
	color: #3d79ff;
	transition: color ease 0.5s;
}

/*
 * 会话
 */
.chat-scroll-behavior{
	width: 100%;
	height: 100%;
	overflow: hidden auto;
	scroll-behavior: smooth;
	box-sizing: border-box;
	padding: 20px 24px 0;
}

.chat-scroll-behavior .chatlayout{
	padding-bottom: 16px;
	display: flex;
	width: 100%;
}

.chatlayout-right{
	justify-content: flex-end;
}

.chatlayout-left{
	justify-content: flex-start;
}

.chatlayout-center{
	justify-content: center;
}

.chatlayout .chatrole[role=user]{
	background: #3d79ff;
	color: #fff;
	border-radius: 10px 0 10px 10px/10px 0 10px 10px;
	padding: 14px 12px;
	max-width: calc(100% - 116px);
	position: relative;
	white-space: normal;
	word-break: break-all;
}

.chatlayout .chatrole[role=assistant]{
	background: #fff;
	box-shadow: 0 3px 8px 0 rgba(61, 121, 255, .06);
	border-radius: 8px;
	white-space: normal;
	overflow: hidden;
	max-width: 400px;
	word-break: break-all;
}

.chatlayout .chatrole[role=time]{
	font-size: 12px;
	color: #6e7b8f;
	background: #d8dfe6;
	border-radius: 24px;
	padding: 8px 16px;
	text-align: center;
	user-select: none;
	display: flex;
	gap: 5px;
}

.chatlayout .chatrole .title{
	font-size: 15px;
	padding: 13px 18px 0;
	font-weight: bold;
}

.chatlayout .chatrole .content{
	padding: 10px 18px;
	line-height: 1.5;
}

.chatlayout .prompt{
	background: #fff;
	box-shadow: 0 3px 8px 0 rgba(61, 121, 255, .06);
	border-radius: 8px;
	white-space: normal;
	overflow: hidden;
	width: 400px;
	padding: 0 15px;
	box-sizing: border-box;
}

.chatlayout .prompt ul{
	padding: 12px 0;
	margin-left: 75px;
}

.chatlayout .prompt ul li{
	height: 40px;
	line-height: 20px;
	display: flex;
	align-items: center;
	box-shadow: inset 0 -1px 0 0 #eaeff6;
	cursor: pointer;
}

.chatlayout .prompt ul li span{
	font-size: 14px;
}

.chatlayout .prompt ul li:last-child{
	box-shadow: none;
}

.chatlayout .prompt ul li:hover{
	color: #3d79ff;
	transition: color ease 0.5s;
}

.mobile-chat-toolbar{
	display: none;
	height: 56px;
	padding: 0 10px;
	align-items: center;
	background: #edf1f6;
}

.mobile-chat-toolbar input{
	display: block;
	height: 40px;
	border: none;
	box-shadow: 0 0 1px #ccc;
	border-radius: 20px 0 0 20px;
	padding: 0 15px;
	flex: 1;
	width: 100%;
	outline: none;
	background-color: #ffffff;
}

.mobile-chat-toolbar button{
	display: block;
	height: 40px;
	background-color: #3d79ff;
	border: none;
	border-radius: 0 20px 20px 0;
	width: 60px;
	color: #ffffff;
}

.mobile-chat-toolbar input:focus ~ .navigator{
	width: 0;
	opacity: 0;
	visibility: hidden;
	margin: 0;
	transition: all ease 0.5s;
}

.navigator{
	margin-left: 10px;
	font-size: 14px;
	width: 30px;
	height: 30px;
	transition: width ease 0.2s;
}

.navigator img{
	display: block;
	width: 30px;
	height: 30px;
}

@keyframes slideUp {
	0%{
		transform: translateY(100px);
		opacity: 0.4;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}

	.main-side{
		display: none;
	}

	.main{
		height: calc(100vh - 70px);
		margin: 0;
		max-height: unset;
	}

	.chat-scroll-behavior{
		padding: 20px 15px 0;
	}

	.chatlayout .prompt ul li{
		padding: 5px 0;
	}

	.chat-toolbar{
		height: 67px;
		display: none;
	}

	.chat-toolbar textarea{
		line-height: 35px;
	}

	.mobile-chat-toolbar{
		display: flex;
	}

	.main-side{
		justify-content: flex-end;
		background-color: #0004;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.main-side.show{
		display: flex;
	}

	.main-side .recordRightSide{
		max-height: 70vh;
		background-color: #fff;
		border-radius: 10px 10px 0 0;
		animation: slideUp 0.2s ease;
	}
.recordRightSide .recordRightSide-above{
	height: 48px;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.recordRightSide .recordRightSide-above .recordRightSide-above-title{
	height: 25px;
	line-height: 25px;
	font-weight: bold;
	font-size: 18px;
	color: #28303d;
	letter-spacing: .64px;
	font-family: 'PingFang-SC-Bold';
}

.fac{
	width: 100%;
	padding: 10px 10px 0;
	box-sizing: border-box;
}
.fac img{
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
}


body {
	margin: 0;
	padding: 0;
	font-family: PingFang SC, Microsoft YaHei, Arial, Hiragino Sans GB,
	WenQuanYi Micro Hei, sans-serif;
	font-size: 16px;
	background-color: #f7f7f7;
	padding-bottom: 70px;
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

ul,
li,
ol,
p {
	margin: 0 ;
	padding: 0;
	list-style: none;
}

a {
	display: block;
	text-decoration: none;
	color: #333 ;
}

.bg-white {
	background-color: #ffffff;
}

.border-box {
	box-sizing: border-box;
}

.display-horizontal {
	display: flex;
	align-items: center;
	color: #333;
}

.btn{
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background-color: transparent;
	padding: 5px 12px;
	cursor: pointer;
}

.btn-danger{
	background-color: red;
	color:white;
	display: inline-block;
	padding: 5px 12px;
	border-radius: 4px;
	overflow: hidden;
	font-size: 14px;
}

/*
 *  页面设置
 *  页面宽度(pc) 1330px
 *  灰色背景 #f7f7f7
 */
:root {
	--wrap-width: 1330px;
	--bg-color: #f7f7f7;
	--link: #1890ff;
	--success: #52c41a;
	--warning: #faad14;
}
.color-link{ color: var(--link) }
.color-success{ color: var(--success) }
.color-warning{ color: var(--warning) }

/*
 * header 页面头部
 */
#header {
	width: 100%;
	height: 70px;
	background-color: #0450C0;
	display: flex;
	justify-content: center;
	box-shadow: 0 2px 8px #eee;
	position: sticky;
	top: 0;
	z-index: 99;
}

#header .header-wrap {
	width: var(--wrap-width);
	height: inherit;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#header .header-wrap .logo-container img {
	display: block;
	height: 50px;
	margin: 10px 0;
}

#header .header-nav {
	flex: 1;
	overflow: hidden;
}

#header .header-nav .nav-item {
	float: left;
	margin-left: 40px;
	position: relative;
	font-weight: bold;
}

#header .header-nav .nav-item a {
	display: block;
	line-height: 70px;
	transition: all linear 0.2s;
	font-size: 17px;
	color: #fff;
}
#header .header-nav .nav-item a:hover {
	color: #22B5F7;
}
#header .header-search form{
	padding-left: 65px;
	display: flex;
	align-items: center;
}
#header .header-search input {
	width: 240px;
	height: 40px;
	padding-left: 15px;
	border: 0;
	background-color: #ececec;
	font-size: 14px;
	line-height: 40px;
	color: #404040;
	outline: none;
	border-radius: 5px 0 0 5px;
	box-sizing: border-box;
}
#header .header-search .search-btn {
	display: block;
	width: 40px;
	height: 40px;
	background-color: #F5C14B;
	border-radius: 0 5px 5px 0;
	position: relative;
	border: none;
}
#header .header-search .search-btn::after {
	display: block;
	content: "";
	position: absolute;
	left: 0px;
	top: 0;
	width: 40px;
	height: 40px;
	background: url(../images/search.png) no-repeat center/ 20px 20px;
}
#header .login-container {
	margin-left: 60px;
}
#header .login-container .beforeLogin {
	height: 70px;
	display: flex;
	align-items: center;
}
#header .login-container .beforeLogin a {
	padding: 0 0.5em;
	font-size: 14px;
	height: 30px;
	text-align: center;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#FFFFFF;
}
#header .login-container .beforeLogin a img{
	display: block;
	width: 22px;
	height: 22px;
	margin-right: 5px;
}
#header .login-container .beforeLogin a.needLogin {
	margin-right: 10px;
	background-color: #F5C14B;
	color: #ffffff;
}
.afterLogin {
	height: 55px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #fff;
}
.afterLogin img {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-right: 7px;
	background-color: #eee;
}

/* swiper
 */
.swiper-container {
	padding: 30px 0;
}
.swiper {
	width: var(--wrap-width);
}
.swiper-pc{
	display: block;
}
.swiper-mobile{
	display: none;
}
.swiper .swiper-slide {
	border-radius: 8px;
	overflow: hidden;
}
.swiper img,
.swiper a {
	display: block;
	width: 100%;
}
.swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
	border-radius: 4px;
	transition: all 0.2s linear 0.2s;
}
.my-bullet-active {
	opacity: 1;
	width: 20px !important;
	background: #ffffff !important;
	border-radius: 4px !important;
}
.my-swiper-button {
	cursor: pointer;
	opacity: 1;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 25px);
	z-index: 99;
	transition: all 0.2s linear 0.2s;
	outline: none;
}
.my-swiper-button-next {
	background: rgb(0 0 0/0.1) url(../images/right.png) no-repeat center/50%;
	right: 10px;
}
.my-swiper-button-prev {
	background: rgb(0 0 0/0.1) url(../images/left.png) no-repeat center/50%;
	left: 10px;
}
.swiper:hover .my-swiper-button-next,
.swiper:hover .my-swiper-button-prev {
	opacity: 1;
}

/* list
 */
.project {
	padding: 5px 0;
}
.project-wrap {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}
.title-bar {
	width: 100%;
	height: 40px;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.title-bar .title-context {
	font-size: 24px;
	color: #333;
	font-weight: bold;
}
.title-bar a {
	font-size: 14px;
	color: #999;
}
.title-bar a:hover{
	color: #003366;
	transition: color linear 0.3s;
}
.project-list {
	display: flex;
	flex-wrap: wrap;
}
.project-list .project-item{
	width: calc(100% - 20px);
	margin: 0 10px 10px;
	background-color: #ffffff;
	overflow: hidden;
	position: relative;
	border-radius: 4px;
}
.project-list-custom .project-item{
	width: calc(50% - 20px);
}
.project-list .project-item.col-4{
	width: calc(100% / 3 - 20px);
}

.project-list .project-item.col-6{
	width: calc(100% / 2 - 20px);
}

.project-list .project-item .pro-link{
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 7;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #fff;
	padding: 30px;
	box-sizing: border-box;
	text-align: center;
}
.project-list-custom .project-item .pro-link{
	aspect-ratio: 16 / 7;
	font-size: 24px;
}

.project-list .project-item .pro-project{
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 5;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #fff;
	padding: 30px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
}

@supports not(aspect-ratio: 16 / 9){
	.project-list .project-item .pro-link{
		display: block;
		width: 100%;
		height: 178px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		font-weight: bold;
		letter-spacing: 0.1em;
		color: #fff;
	}
}

.project-list .project-item .title{
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	color: #0f0f0f;
	font-size: 16px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.project-list .project-item .countAndTags{
	height: 25px;
	line-height: 25px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom:10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.project-list .project-item .countAndTags .count{
	font-size: 14px;
	color: #b1b1b1;
}
.project-list .project-item:hover img.pro-link{
	filter: brightness(0.7);
	transition: filter ease 0.3s;
}
.project-list .project-item:hover .title{
	color: #003366;
	transition: color linear 0.3s;
}
.project-list .project-item:hover{
	box-shadow: 0 0 12px #aaa;
	transition: box-shadow linear 0.5s;
}

/*  project block-II */
.block-ii .project-type{
	width: 100%;
	height: 4em;
	line-height: 4em;
	text-align: center;
	background-color: #003366;
	color: #ffffff;
	font-size: 20px;
	letter-spacing: 0.2em;
}
.block-ii .project-status{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 2.5em;
	padding: 0 10px;
	font-size: 15px;
	color: #333;
}
.block-ii .project-status .project-process{
	display: flex;
	align-items: center;
}
.block-ii .project-status .project-process img{
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

/* footer
 */
#footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-top: 15px;
	background-color: #ffffff;
}
#footer .footer-wrap{
	width: var(--wrap-width);
	margin: 0 auto;
}
#footer .footer-wrap .copyright{
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	color: #909090;
	padding-bottom: 15px;
}
#footer .footer-wrap .copyright p{
	margin: 0;
	padding: 0;
}

/* 侧边工具栏 */
#tool{
	position: fixed;
	z-index: 99;
	top: 50%;
	right: 30px;
	width: 67px;
}
#tool .tool-wrap a{
	display: block;
	margin-bottom: 12px;
	color: #003366;
	background-color: #ffffff;
	border: 1px solid #DCDCDC;
	border-radius: 4px;
}
#tool .tool-wrap a:hover{
	border: 1px solid #003366;
	background-color: #f6f6f6;
	transition: all linear .2s;
}
#tool .tool-wrap a.sign{
	width: 100%;
	height: 72px;
	box-sizing: border-box;
	padding: 15px;
	font-size: 14px;
	text-align: center;
	line-height: 20px;
}
#tool .tool-wrap a{
	font-size: 12px;
	text-align: center;
	line-height: 28px;
	padding-bottom: 5px;
}
#tool .tool-wrap a img{
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 15px 0px;
}
#tool .qrcode-box{
	position: absolute;
	top: 100px;
	right: 80px;
	padding: 10px;
	box-sizing: border-box;
	background-color: #ffffff;
	box-shadow: 0 0 12px #ccc;
	font-size: 13px;
	text-align: center;
	color: #777777;
	display: none;
	left: unset;
}
#tool .qrcode-box img{
	display: block;
	width: 140px;
	height: 140px;
	margin-bottom: 15px;
}
#tool .showqrcode:hover ~ .qrcode-box{
	display: block;
}

/*  播放页面
 */

.stream{
	width: 100%;
	padding: 30px 0;
}

.stream-wrap{
	width: var(--wrap-width);
	margin: 0 auto;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	--sidebar-width: 330px;
	--video-width: calc(var(--wrap-width) - var(--sidebar-width) - 10px);
	flex-wrap: wrap;
}

.stream-wrap .stream-container{
	width: var(--video-width);
	box-shadow: 0 0 12px #cecece;
	border-radius: 4px;
	overflow: hidden;
}

.video-container{
	width: var(--video-width);
	height: calc(var(--video-width) * 0.5625);
	background: #000 url("../images/play.png") no-repeat center/50px;
}

.stream-current-information{
	width: 100%;
	height: 80px;
	background-color: #1e2432;
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	padding: 10px;
}
.stream-current-information .stream-cover{
	width: 90px;
	height: 100%;
	background-color: #fff;
	margin-right: 10px;
}
.stream-current-information .stream-cover img{
	display: block;
	width: 100%;
	height: 100%;
}
.stream-current-information .stream-text{
	color: #fff;
	flex: 1;
	overflow: hidden;
}
.stream-current-information .stream-text .stream-title{
	font-size: 17px;
	letter-spacing: 0.1em;
	line-height: 30px;
}
.stream-current-information .stream-text .strean-user{
	font-size: 14px;
	line-height: 30px;
	margin-left: -13px;
}
.stream-current-information .stream-text .strean-user span{
	padding: 0 15px;
}
.stream-current-information .pull-right{
	display: flex;
	gap: 15px;
	height: 100%;
	align-items: flex-end;
	font-size: 14px;
}
.stream-current-information .pull-right > a{
	color: #ffffff;
	display: flex;
	gap: 2px;
	align-items: center;
}
.stream-current-information .pull-right img{
	display: block;
	width: 15px;
	height: 15px;
}

/* stream-sidebar camera-container
 */
.stream-sidebar{
	width: var(--sidebar-width);
	box-sizing: border-box;
	box-shadow: 0 0 12px #cecece;
	border-radius: 4px;
	overflow: hidden;
}
.camera-container{
	width: var(--sidebar-width);
	height: calc(var(--sidebar-width) * 0.5625);
	background-color: #000;
}
.stream-sidebar .stream-tab{
	display: flex;
	flex-direction: column;
	height: calc(var(--video-width) * 0.5625 -  var(--sidebar-width) * 0.5625 + 80px);
}
.stream-sidebar .stream-tab > :first-child{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-around;
	box-sizing: border-box;
}

.stream-sidebar .stream-tab .tab-item{
	line-height: 47px;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	padding: 0 15px;
	border-bottom: 5px solid transparent;
}

.stream-sidebar .stream-tab .tab-item.active{
	color: #003366;
	border-bottom: 3px solid #003366;
	transition: all ease 0.3s;
}

.stream-sidebar .stream-tab > :last-child{
	width: 100%;
	flex: 1;
	background-color: #eee;
	overflow: hidden;
}

.stream-sidebar .stream-tab .tab-content{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	border-top: 1px solid #eee;
}
.stream-sidebar .stream-tab .tab-content::-webkit-scrollbar{
	width: 5px;
}

.course-list{
	width: 100%;
	min-height: 100%;
	background-color: #fff;
	padding: 0 10px;
	box-sizing: border-box;
	overflow: auto;
}
.course-list .course-list-title{
	font-size: 15px;
	border-left: 4px solid #003366;
	margin: 10px 0 15px;
	padding-left: 5px;
}
.course-list .course-item{
	display: flex;
	width: 100%;
	height: 2.6em;
	box-sizing: border-box;
	margin-bottom: 10px;
	align-items: center;
	background-color: #eee;
	padding: 0 10px;
	border-radius: 2px;
}
.course-list .course-item .circle{
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #666;
	margin-right: 5px;
}
.course-list .course-item .play img{
	display: block;
	width: 16px;
	height: 16px;
}
.course-list .course-item .title{
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	color: #666666;
}
.chatroom{
	overflow: hidden;
	position: relative;
}
.chatroom .chat-area{
	width: 100%;
	height: calc(100% - 100px);
	overflow: auto;
	background-color: #fff;
	box-sizing: border-box;
	padding: 10px;
}
.chatroom .chat-area::-webkit-scrollbar{
	width: 2px;
}
.chatroom .chat-area::-webkit-scrollbar-thumb{
	width: 2px;
	background-color: #999;
}
.chatroom .chat-area .title{
	font-size: 14px;
	margin-bottom: 15px;
}
.chatroom .chat-area .chat-item{
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
}
.chatroom .chat-area .chat-item .chater{
	display: flex;
	align-items: center;
	width: 100%;
	height: 40px;
	margin-bottom: 10px;
}
.chat-item .chater .avatar{
	margin-right: 10px;
}
.chat-item .chater .avatar img{
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #eee;
}
.chat-item .chater .chater-info{
	height: 100%;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 20px;
}
.chat-item .chater .chater-info .time{
	font-size: 13px;
	color: #999999;
}
.chat-item .chater .leaveMessage img{
	display: block;
	width: 14px;
	height: 14px;
	padding-right: 10px;
}
.chat-item .chat-content{
	font-size: 14px;
	line-height: 24px;
}
.chat-item .sub-chat-content{
	line-height: 24px;
	font-size: 14px;
	background-color: #f5f7fa;
	padding: 5px;
	margin: 5px 0;
}
.chat-item .sub-chat-content span{
	color: #003366;
}
.chat-tool{
	width: 100%;
	height: 100px;
	background-color: #2f3243;
	box-sizing: border-box;
	padding: 10px;
}
.chat-tool .line-one,
.chat-tool .line-two{
	height: 40px;
}
.chat-tool .line-one{
	padding: 5px 0;
	box-sizing: border-box;
}
.chat-tool .line-one .emoji{
	height: 100%;
	cursor: pointer;
}
.chat-tool .line-one .emoji img{
	display: block;
	height: 100%;
}
.chat-tool .line-two form{
	height: 100%;
	display: flex;
	border-radius: 4px;
	overflow: hidden;
}
.chat-tool .line-two input{
	height: 100%;
	width: calc(100% - 50px);
	padding: 0 10px;
	box-sizing: border-box;
	border: none;
	outline: none;
	background-color: #1e2432;
	color: #ffffff;
}
.chat-tool .line-two button{
	height: 100%;
	border: none;
	box-sizing: border-box;
	width: 50px;
	background-color: #003366;
	color: #fff;
	cursor: pointer;
}

.invisibility-wrap{
	width: var(--wrap-width);
	margin: 10px auto;
	--sidebar-width: 330px;
	--video-width: calc(1330px - var(--sidebar-width));
	display: flex;
	flex-wrap: wrap;
}
.video-introduce{
	width: calc(var(--video-width) - 10px);
	background-color: #fff;
	box-sizing: border-box;
	min-height: 200px;
	box-shadow: 0 0 4px #cecece;
	margin-right: 10px;
	border-radius: 4px;
}
.QRcode-container{
	width: var(--sidebar-width);
	background-color: #fff;
	box-sizing: border-box;
	min-height: 200px;
	box-shadow: 0 0 4px #cccccc;
	border-radius: 4px;
}
.QRcode-container .content{
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	color: #999;
	font-size: 15px;
}
.QRcode-container .content img{
	display: block;
	width: 200px;
	height: 200px;
	margin: 0 auto 10px;
}
.section-title{
	font-size: 17px;
	line-height: 50px;
	height: 50px;
	padding: 0 10px;
	border-bottom: 1px solid #eee;
}

/* 专题
 */
.subject{
	padding: 30px 0;
}

.subject-wrap{
	width: var(--wrap-width);
	margin: 0 auto;
	border-radius: 8px;
	background-color: #ffffff;
	height: 340px;
	display: flex;
	--subject-pic: 50%;
	--subject-info: calc(var(--wrap-width) - var(--subject-pic));
	box-shadow: 0 0 12px #cccccc;
	overflow: hidden;
}
.subject-wrap .pull-left{
	height: 100%;
	width: var(--subject-pic);
}
.subject-wrap .pull-left img{
	display: block;
	width: 100%;
	height: 100%;
}
.subject-wrap .pull-right{
	padding: 15px;
	box-sizing: border-box;
	flex: 1;
	overflow: hidden;
}
.subject-wrap .pull-right .subject-title{
	font-size: 22px;
	color: #000;
	line-height: 30px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin-bottom: 10px;
}
.subject-wrap .pull-right .item{
	display: flex;
	height: 30px;
	align-items: center;
	margin-bottom: 5px;
}
.subject-wrap .pull-right .item img{
	display: block;
	width: 30px;
	height: 30px;
	padding: 6px;
	box-sizing: border-box;
	margin-right: 10px;
}
.subject-wrap .pull-right .status{
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.subject-wrap .pull-right .status .status-item{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.subject-wrap .pull-right .status .status-item img{
	display: block;
	width: 50px;
	height: 50px;
}
.subject-wrap .pull-right .status .status-item > div{
	line-height: 40px;
	font-size: 20px;
	color: #666;
}

/* user-page
 */
.user-page{
	padding: 30px 0;
}
.user-wrap{
	width: var(--wrap-width);
	margin: 0 auto;
	min-height: 300px;
	display: flex;
	justify-content: space-between;
	--user-sidebar: 240px;
	--user-main: calc(var(--wrap-width) - var(--user-sidebar) - 10px)
}
.user-wrap .sidebar{
	width: var(--user-sidebar);
	min-height: 700px;
	background-color: #ffffff;
	box-shadow: 0 0 12px 1px #ededed;
	border-radius: 4px;
	box-sizing: border-box;
}
.user-wrap .main-content{
	width: var(--user-main);
	min-height: 700px;
	background-color: #ffffff;
	box-shadow: 0 0 12px 1px #ededed;
	border-radius: 4px;
}
.user-wrap .sidebar .user-list .user-item{
	height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	color: #333;
}
.user-wrap .sidebar .user-list .user-item img{
	display: block;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	padding: 13px;
}
.main-content-title{
	height: 55px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	font-size: 18px;
	padding: 0 15px;
}
/* .reback, */
.reback,
.headbar-login{
	display: none;
}
.reback img{
	display: block;
	width: 55px;
	height: 55px;
	padding: 18px;
	box-sizing: border-box;
}

.userinfo-show{
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	display: flex;
	align-items: center;
}
.userinfo-show .avatar{
	margin-right: 10px;
}
.userinfo-show .avatar img{
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}
.userinfo-show .userinfo-text .userName{
	font-size: 20px;
	line-height: 40px;
}
.userinfo-show .userinfo-text .time{
	color: #777777;
	font-size: 15px;
	line-height: 28px;
}

/*
 * login
 */
.login-area {
	min-height: 760px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-box {
	width: 800px;
	height: 490px;
	background-color: #fff;
	box-shadow: 0 0 12px #ccc;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
}

.login-box .pull-left,
.login-box .pull-right {
	width: 50%;
	height: 100%;
	overflow: hidden;
}

.login-box .pull-left img {
	display: block;
	width: 100%;
	height: 100%;
}

.login-password,
.login-scan {
	width: 100%;
	height: 100%;
	padding: 60px 40px;
	box-sizing: border-box;
	position: relative;
}

.login-title {
	color: #333333;
	font-weight: 700;
	font-size: 20px;
	user-select: none;
	font-family: "pingFang SC";

}

.login-box form {
	margin-top: 40px;
}

.login-box .form-group {
	margin: 25px 0;
	position: relative;
}

.form-group input[type=text],
.form-group input[type=password] {
	height: 40px;
	width: 100%;
	outline: none;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid #d4d9e2;
	border-radius: 4px;
	line-height: 38px;
	font-size: 15px;
}

.form-group input[type=checkbox] {
	vertical-align: middle;
}

.form-group input::-webkit-input-placeholder {
	color: #999;
}

.form-group .verify{
	position: absolute;
	top: 0; right:0;
	width: 90px;
	height: 40px;
	border: none;
	outline: none;
	background-color: #003366;
	color: #fff;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
}
.form-group .time{
	background-color: #999;
	cursor: auto;
}
.form-group .btn-secondary{
	position: absolute;
	right: 1px; bottom: 1px;
	height: 38px;
	width: 80px;
	border-left: 1px solid #eee;
}
.form-group .btn-secondary img{
	display: block;
	width: 100%;
	height: 100%;
}

.justify-between {
	justify-content: space-between;
}

.forget {
	font-size: 15px;
}

.forget:hover {
	color: #d10b2c;
}

.login-box form .btn-submit {
	background-color: #003366;
	color: #fff;
	display: block;
	border-radius: 4px;
	bottom: 60px;
	left: 40px;
	right: 40px;
	font-size: 15px;
	width: 100%;
	line-height: 30px;
}
.login-box .btn-register{
	width: 100%;
	box-sizing: border-box;
	color: #fff;
	display: block;
	border-radius: 4px;
	font-size: 15px;
	text-align: center;
	margin-top: 25px;
}

.position-switch {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	height: 72px;
	align-items: center;
}

.position-switch .switch-img img {
	display: block;
	width: 72px;
	height: 72px;
	box-sizing: border-box;
	padding: 10px;
	background-color: #e8f1ff;
	clip-path: polygon(10% 0, 100% 0, 100% 90%);
	cursor: pointer;
	user-select: none;
}

.position-switch .tipbg {
	font-size: 14px;
	width: 100px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: url("../images/tipbg.png") no-repeat center/contain;
	color: #003366;
}

.login-scan {
	width: 100%;
	height: 100%;
	position: relative;
}

.login-scan .login-qrcode-img-border {
	margin: 30px auto;
	width: 196px;
	height: 196px;
	background: url("../images/qrcode-border.png") no-repeat center/cover;
	box-sizing: border-box;
	padding: 5px;
}

.login-scan .login-qrcode-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.login-scan .tips {
	color: #999999;
	text-align: center;
}

.user-center{
	display: none;
}
.info-show{
	padding: 15px 0;
	display: block;
	margin: 0 auto;
}
.info-show .info-item{
	display: flex;
	align-items: center;
	font-size: 15px;
	margin: 15px 0;
}
.info-show .info-item .attr{
	width: 450px;
	text-align: right;
	margin-right: 40px;
	color: #666;
	padding-right: 30px;
	line-height: 34px;
	font-size: 15px;
}
.change-btn{
	display: block;
	margin: 40px auto;
	width: 160px;
	height: 40px;
	line-height: 40px;
	background-color: #003366;
	border-radius: 5px;
	text-align: center;
	color: #ffffff;
	font-size: 14px;
}
.info-show .val input[type='text'],
.info-show .val select{
	display: block;
	height: 40px;
	width: 360px;
	border: 1px solid #ccc;
	padding-left: 10px;
	border-radius: 4px;
	outline: none;
	box-sizing: border-box;
}
.info-show .val label{
	display: flex;
	align-items: center;
}
.info-show .val input[type='radio'],
.info-show .val input[type='checkbox']{
	margin: 0 5px 0;
	width: unset;
}
.info-show .val input::-webkit-input-placeholder{
	color: #DDDDDD;
}
.info-show .val textarea{
	width: 360px;
	height: 80px;
}

/* mycollect
 */
.mycollect-list{
	padding: 10px;
	height: calc(100% - 70px);
	box-sizing: border-box;
	/* background-color: #e8f1ff; */
}

.mycollect-list .project-item{
	border: 1px solid #eee;
	box-sizing: border-box;
}
/*  mycollect-ii
 */
.teletext-list{
	width: 100%;
}
.teletext-list .teletext-item{
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.teletext-list .teletext-item a{
	display: flex;
}
.teletext-list .teletext-item a img{
	display: block;
	width: 10em;
	height: 6em;
	margin-right: 10px;
}
.teletext-list .teletext-item .txt-wrap{
	flex: 1;
	overflow: hidden;
}
.teletext-list .teletext-item .txt-wrap .news-title{
	font-size: 18px;
	font-weight: bold;
	line-height: 2em;
}
.teletext-list .teletext-item .txt-wrap .descr{
	font-size: 15px;
	color: #666666;
	max-height: 4em;
	line-height: 2em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*
 * 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: #003366;
}
#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: #003366;
	transition: all linear .2s;
}
#pagination .pagination-wrap ul li:hover a{
	color: #fff;
	background-color: #003366;
}

/* news 新闻列表
 */
.news{
	margin: 0px 0 60px;
}
.news .news-wrap{
	width: var(--wrap-width);
	margin: 0 auto;
}
.news .news-wrap .news-list{
	padding: 0 35px 35px;
	box-sizing: border-box;
}
.news .news-wrap .news-list .news-item{
	padding: 25px 0;
}
.news .news-wrap .news-list .news-item a{
	display: flex;
}
.news .news-wrap .news-list .news-item img{
	display: block;
	width: 310px;
	height: 180px;
	margin-left: -10px;
	border-radius: 2px;
	overflow: hidden;
}
.news .news-wrap .news-list .news-item .txt-wrap{
	flex: 1;
	overflow: hidden;
	margin-right: -10px;
	padding-left: 20px;
}
.news .news-wrap .news-list .news-item .txt-wrap .news-title{
	font-size: 20px;
	font-weight: bold;
	height: 40px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear .2s;
}
.news .news-wrap .news-list .news-item .txt-wrap .descr{
	height: 90px;
	font-size: 16px;
	color: #6e7175;
	line-height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.news .news-wrap .news-list .news-item .txt-wrap .publish-item{
	margin-top: 10px;
	line-height: 25px;
	padding-left: 25px;
	background: url(../images/time.png) no-repeat left/18px;
	font-size: 14px;
	font-weight: bold;
	color: #777777;
}
.news .news-wrap .news-list .news-item:nth-child(n+2){
	border-top: 1px solid #eeeeee;
}
.news .news-wrap .news-list .news-item:hover .txt-wrap .news-title{
	color: #003366;
}
/* newsDetail */
.newsContent{
	padding: 15px;
	border-radius: 4px;
}
.newsContent .title-wrap{
	border-bottom: 1px solid #eeeeee;
	padding: 10px 0 20px;
	text-align: center;
}
.newsContent .title-wrap .title{
	font-size: 24px;
	line-height: 46px;
	color: #000;
	font-weight:600;
	margin-bottom: 20px;
}
.newsContent .news-textWrap{
	padding: 20px 0;
	line-height: 28px;
}
.newsContent .news-textWrap img{
	display: inline-block;
	max-width: 100%;
	margin: 0 auto;
}

/* publisher
 */
.common-wrap{
	width: 100%;
	max-width: 450px;
	margin: 10px auto 10px;
}
.crumbs{
	height: 50px;
	line-height: 50px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #333;
	padding-left: 10px;
}
.crumbs span{
	padding: 0 10px;
}
.crumbs a[href]{
	color: #666666;
}
.crumbs a[href]:hover{
	color: #003366;
	transition: color ease .2s;
}
.select-options{
	font-size: 15px;
	margin-top: 10px;
	width: 100%;
	background-color: #ffffff;
	padding: .1em 0;
}
.select-options dl{
	display: flex;
}
.select-options dl dd{
	display: block;
	padding: 0.4em .8em;
	border-radius: 4px;
}
.select-options dl dd.active{
	background-color: #003366;
}
.select-options dl dd.active a{
	color: #ffffff;
}
.project-item .school-logo-container{
	padding: 20px 0;
}
.project-item .school-logo{
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto;
}
/*
 */
.publisher-banner{
	width: 100%;
	height: 270px;
	background: url("../images/bg.jpg") no-repeat center/cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.publisher-banner .publisher-avatar img{
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.publisher-banner .publisher-name{
	color: #115aec;
	font-size: 18px;
	margin: 15px 0;
	text-align: center;
}
.publisher-banner .publish-status{
	color: #fff;
	font-size: 15px;
	display: flex;
	gap: 25px;
}
.publisher-banner .publish-status .status-item{
	display: flex;
	align-items: center;
}
.publisher-banner .publish-status .status-item img{
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

/*  publisher-main
 */
.common-wrap{
	--sidebar-width: 310px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.publisher-sidebar{
	width: var(--sidebar-width)
}
.publish-main-wrap{
	width: calc(var(--wrap-width) - var(--sidebar-width) - 20px);
}


/*
 * activityDetail
 */
.activityDetail{
	margin: 0 0 35px;
	border-radius: 4px;
}
.activityDetail .activityDetail-wrap{
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	position: relative;
}
.activityDetail .activityDetail-wrap .activityDetail-leftPane{
	width: 100%;
}
.activityDetail .activityDetail-wrap .activityDetail-titleAndImg{
	background-color: #fff;
	width: 100%;
	box-shadow: 0 0 4px #ccc;
	position: relative;
}
.activityDetail .activityDetail-wrap .activityDetail-titleAndImg::after{
	clear: both;
	display: block;
	content: "";
}
.activityDetail .activityDetail-wrap .activityDetail-titleAndImg .title{
	line-height: 80px;
	font-size: 22px;
	color: #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 30px;
}
.vip{
	padding-left: 80px !important;
	background: url("../images/left-corner.png") no-repeat top left/70px;
}

.corner{
	display: flex;
	padding-left: 0 !important;
	align-items: center;
	justify-content: flex-start;
}

.corner .mark{
	width: 0;
	height: 0;
	border-width: 40px;
	border-color: #e0620d;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	border-style: solid;
}

.activityDetail .activityDetail-wrap .activityDetail-titleAndImg .img-container{
	width: 100%;
	padding: 0;
	float: unset;
	clear: both;
	position: relative;
}
.activityDetail .activityDetail-wrap .activityDetail-titleAndImg .img-container img{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: 100%;
	border-radius: 4px;
}

@supports not (aspect-ratio: 16 / 9){
	.activityDetail .activityDetail-wrap .activityDetail-titleAndImg .img-container img{
		height: 220px;
	}
}

.position-absolute{
	position: absolute;
	top: 0;
	left: 0;
}

.w-100{
	width: 100%;
}

.h-100{
	height: 100%;
}

.center{
	display: flex;
	justify-content: center;
	align-items: center;
}

.custom-title{
	color: #fff;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding: 50px;
	box-sizing: border-box;
	text-align: center;
	aspect-ratio: 16 / 9;
	position: relative;
}

.activityDetail .activityDetail-wrap .activityDetail-titleAndImg .activity-info{
	padding: 0;
	width: 100%;
	float: unset;
	clear: both;
	padding: 10px;
}
.activityDetail-titleAndImg .activity-info > div{
	font-size: 16px;
	line-height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.activityDetail-titleAndImg .activity-info > div > img{
	display: block;
	width: 40px;
	height: 40px;
	float: left;
	padding: 10px;
	box-sizing: border-box;
}
.active_nums{
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 14px;
	color: #7c8287;
}
.detail-container{
	width: 100%;
	margin-top: 10px;
	border-radius: 4px;
}
.detail-container .title{
	font-size: 16px;
	color: #000;
	line-height: 49px;
	border-bottom: 1px solid #f2f2f2;
	font-weight: normal;
	padding-left: 30px;
	box-sizing: border-box;
}
.detail-container .content{
	padding: 30px;
}
.detail-container .detail-table{
	width: 100%;
	border-collapse: collapse;
}
.detail-container .detail-table th,
.detail-container .detail-table td{
	border: 1px solid #ddd;
	line-height: 36px;
	box-sizing: border-box;
	text-align: center;
	padding: 10px 0;
}

.apply{
	height: 80px;
	padding: 20px 0;
	box-sizing: border-box;
	line-height: 26px !important;
}

.btn-primary{
	display: inline;
	background-color: #0450C0;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 14px;
	line-height: 24px;
	cursor: pointer;
}

.btn-warning{
	display: inline;
	background-color: #E2A653;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 14px;
	line-height: 24px;
	cursor: pointer;
}

.btn-white{
	display: inline;
	background-color: #fff;
	color: #000;
	border: 1px solid #ccc;
	text-align: center;
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 14px;
	line-height: 24px;
	cursor: pointer;
}

.btn-success{
	display: inline;
	background-color: #40A9EE;
	color: #fff;
	padding: 5px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}
.btn-search{
	display: inline;
	background-color: #003399;
	color: #fff;
	padding: 5px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}
.form-box{
	margin: 0 auto;
	font-size: 15px;
}
.form-box .form-group{
	display: flex;
	padding: 10px 0;
	align-items: center;
	justify-content: flex-start;
}

.form-box input[type=text]{
	display: block;
	width: 460px;
	height: 34px;
	border-radius: 4px;
	border: 1px solid #999;
	outline: none;
	padding-left: 5px;
}

.table-btn-group{
	display: flex;
	justify-content: flex-end;
	padding: 10px 0;
}
.table-btn-group .btn-apply{
	display: block;
	padding: 0.8em 1em;
	border: none;
	color: #ffffff;
	background-color: #003366;
	border-radius: 4px;
}
/* go_file
 */
.upload-body{
	min-width: 660px;
}
.d-flex{
	display: flex;
}
.justify-content-center{
	justify-content: center;
}
.align-items-center{
	align-items: center;
}
.upload-body .form-group{
	display: flex;
	min-height: 55px;
	align-items: center;
}
.form-group .col-sm-2{
	width: calc(100% / 6)
}
.form-group .col-sm-10{
	width: calc(100% / 6 * 5);
}
.text-danger{
	color: red
}
progress{
	width: 300px !important;
	margin-right: 10px;
	-webkit-appearance: none;
	border-radius: 8px;
	overflow: hidden;
}

::-webkit-progress-bar {
	background-color: #c0c0c0;
	color: #00aa00;
}
::-webkit-progress-value{
	background-image: repeating-linear-gradient(-60deg, #c1e07c 7px, #c1e07c 9px, #8ac23f 10px, #8ac23f 17px, #c1e07c 18px, #c1e07c 20px)
}

/* .stars 赛项等级 - project */
.stars{
	width: 88px !important;
	height: auto !important;
	display: flex !important;
	gap: 2px;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
}

.stars img{
	display: block;
	width: 16px;
	height: 16px;
}

/* new login */
.mobile{
	display: none;
}

.login-btn-group{
	min-height: 200px;
	display: grid;
	grid: auto / 100%;
	place-items: center;
}

.login-btn-group a {
	display: block;
	width: 100%;
}

.btn-authorize{
	width: 100%;
	height: 40px;
	background-color: #fc9427;
	color: #ffffff;
	border-radius: 4px;
	border: none;
	outline: none;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
	padding: 0 !important;
	font-size: 14px;
}

.login-scan .tips{
	color: #999999;
	text-align: center;
	font-size: 14px;
}

@media screen and (max-width: 768px){
	.mobile-hidden{
		display: none;
	}

	.mobile{
		display: block;
	}
}

.project-item .school-logo-container{
	padding: 0;
}

.project-item .school-logo{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 3;
	margin: 0 auto;
}

@supports not(aspect-ratio: 16 / 9){
	.project-item .school-logo{
		height: 120px;
	}
}

.project-item .school-name{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	padding: 0 30px;
	color: #ffffff;
	display: grid;
	place-items: center;
	font-size: 17px;
	font-weight: bold;
	box-sizing: border-box;
	text-align: center;
}

.publisher-banner {
	width: 100%;
	height: 270px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	gap: 20px;
	margin-top:15px;
	position: relative;
}

.publisher-banner .publisher-avatar img {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.publisher-banner .publisher-name {
	color: #ffffff;
	font-size: 24px;
	line-height:35px;
	margin: 15px;
	text-align: center;
}

.publisher-banner .publish-status {
	color: #fff;
	font-size: 15px;
	display: flex;
	gap: 25px;
}

.publisher-banner .publish-status .status-item {
	display: flex;
	align-items: center;
}

.publisher-banner .publish-status .status-item img {
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

.topic-qrcode{
	position: absolute;
	top: 10px;
	right: 10px;
}
.topic-qrcode .topic-qrcode-btn{
	color: #ffffff;
	font-size: 14px;
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
	border-radius: 4px;
	cursor: pointer;
	width: 110px;
	box-sizing: border-box;
	text-align: center;
}
.topic-qrcode .topic-qrcode-btn:hover{
	background-color: #4099EFEE;
}
.topic-qrcode .topic-qrcode-container .qrcode-container img{
	display: block;
	width: 100px;
	height: 100px;
}
.topic-qrcode .topic-qrcode-container .qrcode-container{
	position: absolute;
	right: 0;
	top: 44px;
	display: none;
	animation: showIn 1s;
}
.topic-qrcode .topic-qrcode-btn:hover + .topic-qrcode-container .qrcode-container{
	display: block;
}
@keyframes showIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.apply-table{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: auto;
}
.apply-table table{
	border-collapse: collapse;
	width: 100%;
	min-width: 1000px;
	font-size: 15px;
}
.apply-table table th,
.apply-table table td{
	border: 1px solid #ddd;
	padding: 8px 5px;
	text-align: center;
}

.apply-table table th:nth-last-child(2),
.apply-table table th:last-child{
	width: 95px;
}

.changeInfo .info-show{
	width: 600px;
	margin: 0 auto;
}

.changeInfo .info-show .info-item .attr{
	width: 120px;
}

.input-group{
	position: relative;
}

.input-group-append{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
}

.input-group-append .btn{
	display: block;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	line-height: 40px;
	border-radius: 0 4px 4px 0;
}

.input-group-append .btn.display{
	display: none;
}

.setIndex{
	padding: 0;
}
.setIndex .teletext-list{
	display: grid;
	grid: auto / 1fr 1fr;
	gap: 20px;
}
.setIndex .teletext-item{
	background-color: #FFFFFF;
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	margin-bottom: 0px;
	border-bottom: 0;
}
.setIndex .teletext-item .txt-wrap .news-title{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.setIndex .teletext-item a{
	height: 100%;
}

.setIndex .teletext-item a > img{
	display: block;
	width: 14em;
	height: 9em;
	object-fit: cover;
	margin-right: 0;
}
.setIndex .teletext-item .txt-wrap{
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-around;
	box-sizing: border-box;
	padding: 10px 10px 10px 0;
}
.setIndex .teletext-item .txt-wrap .time{
	height: 30px;
	line-height: 30px;
	display: flex;
	align-items: center;
	font-size: 15px;
	color: #555555;
}
.setIndex .teletext-item .txt-wrap .time img{
	display: block;
	width: 18px;
	height: 18px;
}
.setIndex .teletext-item:hover{
	box-shadow: 0 0 12px #aaaaaa;
	transition: all ease 0.5s;
}
.setIndex .teletext-item:hover img{
	filter: brightness(0.5);
	transition: all linear 0.5s;
}
.setIndex .teletext-item:hover .news-title{
	color: #003366;
}
.btn-logined-custom{
	border-radius: 4px;
	color: #ffffff;
	height: 30px;
	line-height: 30px;
	padding: 0 5px;
}

.btn-info:disabled{
	background-color: #7c8c8f;
	border-color: #7c8c8f;
	color: #ffffff;
	width: 86px;
	height: 40px;
	line-height: 20px;
	padding: 10px 0;
}

.btn-info{
	background-color: #17a2b8;
	border-color: #17a2b8;
	color: #ffffff;
	width: 86px;
	height: 40px;
	line-height: 20px;
	padding: 10px 0 !important;
}

.upload-container{
	display: flex;
	justify-content: center;
}

.upload-child{
	width: 200px;
}

.webuploader-pick{
	line-height: 20px;
}

.progress {
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 70px);
	overflow: hidden;
	font-size: .75rem;
	background-color: #e9ecef;
	border-radius: .25rem;
	box-sizing: border-box;
}

.progress-bar {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	background-color: #007bff;
	transition: width .6s ease
}

.progress-bar-striped {
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-size: 1rem 1rem
}

.progress-bar-animated {
	-webkit-animation: progress-bar-stripes 1s linear infinite;
	animation: progress-bar-stripes 1s linear infinite
}

.certificate-list{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 10px;
}

.certificate-item{
	width: calc(33.333333% - 20px);
	margin: 10px;
	height: 140px;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
}

.certificate-item a{
	color: #ffffff;
	display: flex;
	height: 100%;
}

.certificate-item .line-one{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.certificate-item .line-one .title{
	font-size: 18px;
}

.certificate-item .line-one .tag{
	font-size: 15px;
	padding: 2px 8px;
	background-color: #0004;
	border-radius: 10px;
}
.certificate-item .cate{
	font-size: 14px;
}
.certificate-item .line-two{
	font-size: 14px;
	color: #eeeeee;
}

.flex-direction-column{
	flex-direction: column;
}
.justify-content-around{
	justify-content: space-around;
}

.myCert{
	box-sizing: border-box;
	width: 100%;
	border-radius: 4px;
}
.myCert > .title{
	background-color: #ffffff;
	height: 60px;
	padding: 10px;
	line-height: 20px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	box-sizing: border-box;
	text-align: center;
}
.myCert .user{
	display: flex;
	flex-flow: row nowrap;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
}
.myCert .user .user-info{
	flex: 1;
	overflow: hidden;
	color: #000000;
}
.myCert .user .avatar{
	display: block;
	width: 90px;
	height: 120px;
	margin-right: 10px;
	object-fit: cover;
	object-position: center;
}
.myCert .user .user-info{
	font-size: 15px;
}
.myCert .user .user-info .user-info-item{
	line-height: 30px;
	display: flex;
	align-items: center;
}
.myCert .user .user-info .user-info-item .val{
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.myCert .user .user-info .user-info-item .attr{
	width: 3em;
	text-align-last: justify;
}
.myCert .user .user-info .user-info-item .user_type{
	background-color: #f9d747;
	color: #ffffff;
	height: 18px;
	line-height: 18px;
	border-radius: 4px;
	font-size: 12px;
	padding: 0 5px;
	display: block;
}

.myCert .match-info{
	background-color: #ffffff;
	margin-top: 10px;
	padding: 10px;
	box-sizing: border-box;
	font-size: 15px;
	min-height: 140px;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
}
.myCert .match-info .title{
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.myCert .match-info .match-info-item{
	display: flex;
	align-items: center;
	line-height: 24px;
}
.myCert .match-info .match-info-item .attr{
	width: 4em;
	text-align-last: justify;
}
.qrcode-box{
	background-color: #ffffff;
	padding: 10px;
	margin-top: 10px;
}
.qrcode-box .qrcode-container .number{
	width: 140px;
	text-align: center;
	margin: 5px auto 0;
	font-size: 14px;
	color: #666666;
}
.applyInfo{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.applyInfo .info-item{
	margin: 0;
}
.applyInfo .info-item .attr{
	width: 200px;
	padding: 0;
	margin-right: 20px;
	font-weight: bold;
	color: #333333;
	letter-spacing: 0.2em;
	font-size: 17px;
}
.applyInfo .info-item .val{
	flex: 1;
	color: #555555;
	font-size: 16px;
}
.applyInfo .val input[type='text'],
.applyInfo .val select{
	width: 100%;
}
.aIn{
	padding: 0 20px 20px;
}

/* special */
.page-wrap{
	width: 100%;
}
.page-wrap .special-title{
	font-size: 17px;
	font-weight: bold;
	color: #2a9fec;
	background-color: #f5f5f6;
	text-align: center;
	line-height: 24px;
	padding: 18px 15px;
}
.page-wrap .special-info{
	background-color: #ffffff;
}
.page-wrap .special-info .base{
	display: flex;
	border-bottom: 1px solid #cecece;
}
.page-wrap .special-info .base .localtion{
	border-right: 1px solid #cecece;
}
.page-wrap .special-info .base .localtion,
.page-wrap .special-info .base .date{
	width: 50%;
	text-align: center;
	padding: 10px;
	font-size: 15px;
}
.page-wrap .special-info .base .type{
	font-size: 12px;
	color: #666666;
}
.page-wrap .special-info .duration{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}
.page-wrap .special-info .duration .start,
.page-wrap .special-info .duration .end{
	display: flex;
	height: 60px;
	align-items: center;
	gap: 5px;
}
.page-wrap .special-info .duration .name{
	font-size: 14px;
	text-align: center;
	width: 55px;
}
.other-info{ margin-top: 10px; background-color: #ffffff; }
.other-info .headline{
	line-height: 50px;
	height: 50px;
	color: #2a9fec;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #dbdbdc;
}
.other-info .text{ padding: 20px 15px; }
.other-info .text img{
	display: block;
	width: 100%;
}
.fixed-postiion{
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #2a9fea;
	color: #ffffff;
	height: 50px;
	line-height: 50px;
	text-align: center;
	z-index: 999;
	max-width: 450px;
}
.fixed-postiion a{ color: #ffffff; }


.activity_info{
	display: block;
	background-color: #ffffff;
	margin-bottom: 10px;
}
.activity_info .title{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #eeeeee;
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 10px;
	vertical-align: middle;
}
.activity_info .leftBar{
	display: block;
	width: 4px;
	height: 20px;
	background-color: #777777;
}
.activity_info .info-item {
	display: flex;
	align-items: center;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
}

.activity_info .info-item .attr {
	width: 100px;
	text-align: right;
	margin-right: 20px;
	color: #666;
}
.btn-block{
	display: block;
	width: calc(100% - 20px);
	margin: 0 auto;
	height: 40px;
}

#form1{
	margin-left: -10px;
	margin-right: -10px;
}
#form1 .weui-cell{
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
}
#form1 .weui-label{
	width: 90px;
}
#form1 .weui-cell__hd{
	padding-left: 15px;
	padding-right: 15px;
}
#form1 .weui-cell__bd{
	flex: 1;
	overflow: hidden;
	padding: 15px;
	box-sizing: border-box;
}
#form1 .weui-check__label{
	padding-left: 60px;
	padding-right: 30px;
}
#form1 input[type=text]{
	width: 100%;
	border: none;
}
.baseContent .subtitle{
	display: flex;
	padding: 10px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.baseContent .subtitle .collect__btn a{
	border: none;
}