@media all and (min-width:501px) and (max-width:800px) {
	.info {
		position: absolute;
		right: -180px;
		top: 8px;
		display: flex;
		font-size: 12px
	}

	.info .loginout {
		margin-left: 10px;
		color: #516DB4;
		cursor: pointer
	}

	.seciton {
		margin: 10px auto;
		width: 96%
	}

	.header {
		user-select: none;
		width: 96%;
		margin: 20px auto 10px auto;
		display: flex
	}

	.header .head-left {
		min-width: 100px;
		height: 100px;
		overflow: hidden;
		margin-right: 20px
	}

	.header .head-left img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-img1 {
		font-size: 14px;
		display: flex;
		align-items: flex-end;
		color: #777c96;
		font-weight: 600;
		overflow: hidden
	}

	.header .head-right .r-img1 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-img1 .and {
		color: #e92322;
		margin: 0 5px
	}

	.header .head-right .r-center {
		display: flex;
		align-items: center;
		margin-top: 10px
	}

	.header .head-right .r-center .r-img2 {
		width: 52px;
		height: 30px;
		overflow: hidden;
		margin-right: 19px
	}

	.header .head-right .r-center .r-img2 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-center .r-img3 {
		width: 200px;
		height: 30px;
		overflow: hidden
	}

	.header .head-right .r-center .r-img3 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-bottom {
		display: flex;
		align-items: center;
		margin-top: 10px;
		font-weight: 600
	}

	.header .head-right .r-bottom .r-btn {
		padding: 5px 10px;
		color: #fff;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(178deg, #f36b27 0%, #f0592f 46%, #ee3f3d 100%);
		border-radius: 4px;
		margin-right: 20px
	}

	.header .head-right .r-bottom .year {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 10px;
		background-color: #516DB4;
		color: #fff;
		font-size: 12px;
		border-radius: 4px;
		margin-right: 10px
	}

	.header .head-right .r-bottom .month {
		color: #516DB4;
		margin-right: 10px;
		font-size: 12px
	}

	.tab-nav {
		user-select: none;
		width: 96%;
		padding: 5px 0;
		box-sizing: border-box;
		background: #516db4;
		color: #fff;
		font-size: 12px;
		margin: auto;
		display: flex;
		align-items: center;
		overflow-x: scroll
	}

	.tab-nav .grid-content {
		width: 200px;
		display: flex;
		flex: 1;
		align-items: center;
		margin-right: 10px;
		cursor: pointer
	}

	.tab-nav .start {
		margin-left: 6px
	}

	.tab-nav .end {
		margin-right: 0
	}

	.tab-nav .active {
		height: 30px;
		background-color: #fff;
		color: #516db4;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px;
		border-radius: 4px
	}
}

@media all and (min-width:100px) and (max-width:500px) {
	.info {
		position: absolute;
		right: 0;
		top: 40px;
		display: flex;
		font-size: 12px
	}

	.info .loginout {
		margin-left: 10px;
		color: #516DB4;
		cursor: pointer
	}

	.seciton {
		width: 96%;
		margin: 10px auto
	}

	.header {
		user-select: none;
		width: 96%;
		margin: 20px auto 10px auto;
		display: flex;
		flex-direction: column
	}

	.header .head-left {
		width: 140px;
		height: 140px;
		overflow: hidden;
		margin: 10px auto 10px auto
	}

	.header .head-left img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-img1 {
		font-size: 14px;
		display: flex;
		align-items: flex-end;
		color: #777c96;
		font-weight: 600;
		width: 100%;
		overflow: hidden
	}

	.header .head-right .r-img1 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-img1 .and {
		color: #e92322;
		margin: 0 5px
	}

	.header .head-right .r-center {
		display: flex;
		align-items: center;
		margin-top: 10px
	}

	.header .head-right .r-center .r-img2 {
		width: 52px;
		height: 30px;
		overflow: hidden;
		margin-right: 12px
	}

	.header .head-right .r-center .r-img2 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-center .r-img3 {
		width: 200px;
		height: 30px;
		overflow: hidden
	}

	.header .head-right .r-center .r-img3 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-bottom {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		font-weight: 600
	}

	.header .head-right .r-bottom .r-btn {
		padding: 5px 10px;
		color: #fff;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(178deg, #f36b27 0%, #f0592f 46%, #ee3f3d 100%);
		border-radius: 4px;
		margin-right: 20px;
		margin-bottom: 10px
	}

	.header .head-right .r-bottom .year {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 10px;
		background-color: #516DB4;
		color: #fff;
		font-size: 12px;
		border-radius: 4px;
		margin-right: 10px
	}

	.header .head-right .r-bottom .month {
		color: #516DB4;
		margin-right: 10px;
		font-size: 12px
	}

	.tab-nav {
		user-select: none;
		width: 96%;
		padding: 5px 0;
		box-sizing: border-box;
		background: #516db4;
		color: #fff;
		font-size: 12px;
		margin: auto;
		display: flex;
		align-items: center;
		overflow-x: scroll
	}

	.tab-nav .grid-content {
		width: 200px;
		display: flex;
		flex: 1;
		align-items: center;
		margin-right: 10px;
		cursor: pointer
	}

	.tab-nav .start {
		margin-left: 6px
	}

	.tab-nav .end {
		margin-right: 0
	}

	.tab-nav .active {
		background-color: #fff;
		color: #516db4;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 8px;
		border-radius: 4px
	}
}

@media all and (min-width:801px) and (max-width:3000px) {
	.info {
		position: absolute;
		right: -180px;
		top: 8px;
		display: flex;
		font-size: 12px
	}

	.info .loginout {
		margin-left: 10px;
		color: #516DB4;
		cursor: pointer
	}

	.seciton {
		padding-bottom: 20px;
		margin: 25px auto;
		width: 1200px
	}

	.header {
		user-select: none;
		width: 1200px;
		margin: 20px auto;
		display: flex
	}

	.header .head-left {
		width: 234px;
		height: 234px;
		overflow: hidden;
		margin-right: 50px
	}

	.header .head-left img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-img1 {
		font-size: 19px;
		display: flex;
		align-items: flex-end;
		color: #777c96;
		font-weight: 600;
		margin-left: 30px;
		width: 700px;
		height: 35px;
		overflow: hidden
	}

	.header .head-right .r-img1 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-img1 .and {
		color: #e92322;
		margin: 0 5px
	}

	.header .head-right .r-center {
		display: flex;
		align-items: center;
		margin-top: 10px
	}

	.header .head-right .r-center .r-img2 {
		width: 162px;
		height: 100px;
		overflow: hidden;
		margin-right: 19px
	}

	.header .head-right .r-center .r-img2 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-center .r-img3 {
		width: 550px;
		height: 94px;
		overflow: hidden
	}

	.header .head-right .r-center .r-img3 img {
		width: 100%;
		height: 100%
	}

	.header .head-right .r-bottom {
		display: flex;
		align-items: center;
		margin-top: 40px;
		font-weight: 600
	}

	.header .head-right .r-bottom .r-btn {
		width: 227px;
		height: 32px;
		color: #fff;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(178deg, #f36b27 0%, #f0592f 46%, #ee3f3d 100%);
		border-radius: 6px;
		margin-right: 20px
	}

	.header .head-right .r-bottom .year {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 32px;
		background-color: #516DB4;
		color: #fff;
		font-size: 19px;
		padding: 0 5px;
		border-radius: 6px;
		margin-right: 10px
	}

	.header .head-right .r-bottom .month {
		color: #516DB4;
		margin-right: 10px;
		font-size: 19px
	}

	.tab-nav {
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		height: 69px;
		background: #516db4;
		color: #fff;
		font-size: 17px;
		margin: auto;
		display: flex;
		align-items: center;
		place-content: center
	}

	.tab-nav .grid-content {
		display: flex;
		align-items: center;
		margin-right: 25px;
		cursor: pointer
	}

	.tab-nav .start {
		margin-left: 16px
	}

	.tab-nav .end {
		margin-right: 0
	}

	.tab-nav .active {
		height: 50px;
		background-color: #fff;
		color: #516db4;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px;
		border-radius: 10px
	}
}