@content-width: 1150px;

body{
	background-color: #f3f3f3;
}

.header-box{
	text-align: center;
	background-image: url(/static/image/header_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 564px;

	.header-content{
		max-width: @content-width;
		width: 100%;
		height: 120px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		align-items: center;

		.login-btn{
			// background: #fff;
			height: 36px;
			width: 96px;
			line-height: 36px;
			text-align: center;
			border-radius: 20px;
			font-size: 14px;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			a {
				color: #333;
				display: inline-block;
				width: 86px;
				// height: 100%;
				line-height: 26px;
				text-align: center;
				background-color: #1d9fe8;
				color: #fff;
				border-radius: 20px;
				border: 4px solid #fff;
				&:hover{
					opacity: 0.7;
				}
			}
			&:active{
				opacity: 0.8;
			}

			&:hover a {
				text-decoration: none;
			}
		}
	}
}


.index_container {
	max-width: @content-width;
	width: 100%;
	min-height: calc(100vh - 120px - 150px);
	margin: 0 auto;
	display: flex;
	background: transparent;
	margin-top: calc(120px - 564px);
	border-radius: 12px 12px 0 0;
	gap: 20px;

	.con-left{
		flex: 1;
		width: 0;
		background-color: #fff;
		border-radius: 12px;
		padding: 0 30px;

		.title{
			height: 60px;
			display: flex;
			align-items: center;
			.title-img{
				height: 36px;
			}
		}
	}

	.con-right{
		background-color: #fff;
		width: 400px;
		min-height: calc(100vh - 120px - 150px);
		// margin-left: 20px;
		border-radius: 12px;
		padding: 0 30px;
		padding-bottom: 10px;
    display: flex;
    flex-direction: column;

		.title{
			height: 60px;
			display: flex;
			align-items: center;
			.title-img{
				height: 36px;
			}
		}

		.notice-content{
			width: 100%;
			height: 0;
			flex: 1;
			.notice-item{
				height: 56px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-bottom: 1px dashed #f5f5f5;

				.notice-name{
					padding-left: 10px;
					line-height: 1;
					font-size: 14px;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					position: relative;
					cursor: pointer;

					a{ 
						color: #333;
					}

					&::before{
						content: ".";
						position: absolute;
						left: 0;
						top: -7px;
						font-size: 20px;
						color: #333;
					}

					&:hover{
						a {
							color: #1780FE;
						}
						&::before{
							color: #1780FE;
						}
					}
				}
			}

			.tip-row{
				display: flex;
				color:#aaaaaa;
				font-size: 12px;
				justify-content: space-between;
				cursor: pointer;
				margin-top: 5px;
				// border-bottom: 1px dashed #f5f5f5;
				a{
					color: #aaaaaa;
				}
			}

		}
		
	}

}


.tabs-container {
	.tabs-content{
		ul{
			list-style-type: none;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding-left: 0;
  		margin-left: 0;
			padding-top: 20px;
			li {
				list-style: none;
				flex-basis: 33.33%;
				color: #333;
				height: 50px;
				line-height: 50px;
				font-size: 14px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				.self-built{
					margin-right: 5px;
					width: 12px;
					// height: 14px;
				}

				a{
					color: #333;
				}

				&:hover a{
					color: #1780FE;
				}

			}
		}
	}

}


.footer-box{
	max-width: @content-width;
	height: 150px;
	margin: 20px auto 0;
	border-radius: 20px 20px 0 0;
	.footer-bg{
		position: relative;
		border-radius: 10px;
		height: 100px;
		background-image: url(/static/image/footer_bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;

		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			cursor: pointer;
		}
	}

	.footer-content{
		max-width: @content-width;
		height: 50px;
		margin: 0 auto;

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

			.text{
				padding-left: 20px;
				padding-right: 20px;
				font-size: 14px;
				line-height: 1;
				display: inline-block;
				text-decoration: unset;
				color: #333;
				.beian{
					margin-right: 4px;
				}
				.link{
					cursor: pointer;
					text-decoration: unset;
					color: #333;
					&:hover{
						color: #000;
						text-decoration: underline;
					}
				}
				&.a{
					cursor: pointer;
					&:hover{
						color: #000;
					}
				}

				& + .text{
					border-left: 1px solid #333;
				}
			}
		}
	}
}


@media screen and (max-width: 768px) {
	.header-box{
		background-position: -352px 0px;
		.header-content {
			.login-btn{
				display: none;
			}
		}
	}
  .index_container {
		flex-direction: column;
		padding: 15px;
		.con-left{
			width: 100%;
			padding: 0 15px;
		}
		.con-right{
			height: auto;
			width: 100%;
			padding: 0 15px 15px;
			.pagination{
				.page{
					display: none!important;
				}
			}
		}
		.tabs-header{
			display: none;
		}
		.tabs-container {
			.tabs-content {
				ul {
					padding-top: 0;
					li{
						flex-basis: 100%;
						font-size: 16px;
					}
				}
			}
		}
  }
	.footer-box {
		height: 68px;
		padding: 0 15px;
		margin: 0;
		.footer-bg{
			height: 100%;
			background-position: left center;
		}
		.footer-content {
			height: auto;
			.flex{
				flex-direction: column;
				align-items: center;
				padding: 15px 0;
				gap: 10px;
				.text{
					border-left: unset!important;
					font-size: 16px;
				}
			}
		}
	}
}