html, body {
	height: 100%;
	font-family: NotoSansHans;
}

.index-top {
	height: 27vh;
	background-image: url(../images/index-top.webp);
	background-size: 100% 100%;
	background-color: #f3f3f4;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body[data-layout=detached] .content-page {
	padding-bottom: 0px;
}

.card-img-top {
	width: 80%;
	text-align: center;
}

.align-center-vertical {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
}

.sub-card {
	height: 100% !important;
	background-color: #F7FBFE;
	border-radius: .6rem;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
}

.sub-pointer{
	cursor: pointer;
}
.sub-pointer:focus,.sub-pointer:hover{
	-webkit-box-shadow: 0 0 15px 0 rgba(255, 113, 36, .45);
    box-shadow: 0 0 15px 0 rgba(255, 113, 36, .45);
}
.index-bottom {
	/* height: 73vh; */
	margin-top: 60px;
}

.sub-content .footer{
	border-top:none;
}
.sub-content-height {
	height: calc(73vh - 120px);
}

.container-fluid .sub-card {
	height: calc(100% - 24px);
}

.card-body .collapse {
	height: calc(100% - 70px);
}

.align-center-vertical {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
}
@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 1.6rem;
    }
}
@media ( min-width :1800px) {
	.index-bottom {
		margin-top: 70px;
	}
	.sub-content-height {
		height: calc(73vh - 160px);
	}
	.container-fluid .sub-card {
		height: calc(100% - 48px);
	}
	.count-num {
		font-size: 35px !important;
	}
	.text-muted {
		font-size: 15px !important;
	}
}

@media ( min-width : 2000px) {
	.index-bottom {
		margin-top: 80px;
	}
	.sub-content-height {
		height: calc(73vh - 100px);
	}
	.container-fluid .sub-card {
		height: calc(100% - 48px);
	}
	.count-num {
		font-size: 40px !important;
	}
	.text-muted {
		font-size: 24px !important;
	}
}

.hogName {
	font-size: 20px;
	color: #FFFFFF;
	padding-left: 3px;
}

.nav-user {
	background-color: transparent;
	border: none;
}

.index-top .index-big {
	/* width: 40vh; */
	width: 55vh;
	margin: 0 auto;
	padding-top: 14vh;
	text-align: center;
}

.index-top .index-big img {
	width: 40vh;
}

.index-top .index-title {
	/* width: 308px; */
	width: 368px;
	height: 35px;
	font-size: 26px;
	color: #FFFFFF;
	margin: 0 auto;
}

.count-title {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	height: 70px;
	background-color: #637390;
}

.count-title .title-icon {
	width: 48px;
	height: 48px;
	position: absolute;
	left: 35px;
	top: 13px;
}

.count-title a {
	width: 36px;
	height: 36px;
	position: absolute;
	right: 19px;
	top: 17px;
	background-image: url(../images/first-select.png);
	background-size: 100% 100%;
	border: 0px;
}

.count-title .name {
	font-size: 24px;
	font-weight: 400;
	line-height: 31px;
	color: #FFFFFF;
	opacity: 1;
	position: absolute;
	left: 89px;
	top: 14px;
}

.count-title .placeholder {
	font-size: 12px;
	line-height: 14px;
	color: #FFFFFF;
	opacity: 0.53;
	position: absolute;
	left: 89px;
	top: 45px;
	background-color: transparent;
}

.count-num {
	font-size: 30px;
	font-family: Arial;
	line-height: 34px;
	color: #FC691B;
	opacity: 1;
}