aside {
	margin: 0 auto;
	max-width: 1024px;
}

.electronic-catalog-top {
	background: url('https://megiauction.oss-cn-beijing.aliyuncs.com/guanwang-image/electronic-catalog-top.png');
	background-size: 100% 100%;
}

.card {
	padding: 20px;
	background: url('https://megiauction.oss-cn-beijing.aliyuncs.com/guanwang-image/electronic-catalog-card.png');
}

.card-list {
	min-height: 730px;
}

.card-list .list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.card-list .list > a {
	max-width: calc(25% - 15px);
	flex: 0 0 calc(25% - 15px);
	background-color: #ffffff;
}

.card-list .list > a > div:nth-child(1) {
	min-height: 240px;
}

.card-list .list > a > div:nth-child(1) > img {
	width: 100%;
	height: 100%;
}

.card-list .list > a > div:nth-child(2) {
	padding: 15px 20px;
	color: #494949;
}

.card-list .list > a > div:nth-child(2) > div:nth-child(1) {
	font-size: 16px;
}

.card-list .list > a > div:nth-child(2) > div:nth-child(2) {
	margin-top: 2px;
	font-size: 18px;
}

.card-list .list > a > div:nth-child(2) > div:nth-child(3) {
	margin-top: 20px;
	font-size: 12px;
}

.card-list .list > a > div:nth-child(2) .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 32px;
	border-radius: 5px;
	color: #9F8353;
	border: 1px solid #9F8353;
}

.card-list .list > a > div:nth-child(2) .button.is-disabled{
	color: #666666;
	border: 1px solid #666666;
}

.pager-list {
	padding: 30px 0 0 0;
}

#is-details {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 300px;
	.title {
		text-align: center;
		font-size: 24px;
	}
	.subtitle {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 60%;
		.company{
			color: #475C88;
		}
		.is-date {
			font-size: 14px;
			color: #A8A8A8;
		}
	}
	.approval {
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
		max-width: 60%;
		> div {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 281px;
			min-height: 380px;
			max-width: calc(50% - 12px);
			flex: 0 0 calc(50% - 12px);
			border: 1px solid #8D8D8D;
			> img {
				width: 100%;
				z-index: 9;
			}
			&::before {
				position: absolute;
				display: block;
				content: "";
				width: 30px;
				height: 30px;
				background: url('https://megiauction.oss-cn-beijing.aliyuncs.com/guanwang-image/loading.png');
				background-repeat: no-repeat;
				background-size: cover;
				
				animation-name: rotate; /* 指定要应用的动画名称 */
			    animation-duration: 2s; /* 设置动画持续时间 */
			    animation-iteration-count: infinite; /* 无限次重复动画 */
			    animation-timing-function: linear; /* 线性变化速度函数 */
			} 
			/* 加载中 */
			&::after {
				position: absolute;
				padding-top: 50px;
				display: block;
				content: '加载中...';
				font-size: 14px;
			}
		}
	}
	.content {
		margin: 0 auto;
		width: 60%;
		.content-title-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #BC8457;
			font-size: 12px;
			.is-nabla{
				display: inline-block;
				width: 18px;
				height: 18px;
				&::before{
					display: flex;
					margin-top: 4px;
					content: "";
					border-top:12px solid #BC8457;
					border-left:9px solid transparent;
					border-right:9px solid transparent;
				}
			}
		}
	
		.content-img {
			padding-top: 10px;
			> img {
				width: 100%;
			}
		}
		
		.content-subtitle {
			color: #9F876A;
			margin: 20px 0 20px 20px;
			border-left: 3px solid #BC8457;
			.content-data {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-left: 20px;
				background-color: #FEFBF6;
				padding: 20px;
				.content-is-content {
					margin-top: 12px;
				}
			}
		}
	}
}

#is-content-bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 20px 0 20px 0;
	padding: 20px;
	background-color: #F1E3D2;
	width: calc(100% - 40px);
	height: 120px;
	border-radius: 6px;
	.is-left {
		cursor: pointer;
		gap: 10px;
		display: flex;    
		align-items: flex-end;
		flex-direction: column;
		justify-content: center;
		> div:nth-child(2) {
			line-height: 30px;
			> div:nth-child(2) {
				text-align: right;
			}
		}
	}
	> div {
		&:nth-child(2) {
			width: 2px;
			height: 100%;
			background-color: #DCC3A4;
		}
	}
	.is-right {
		cursor: pointer;
		gap: 10px;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		justify-content: center;
		> div:nth-child(2) {
			line-height: 30px;
			> div:nth-child(2) {
				text-align: right;
			}
		}
	}
	.is-no {
		cursor: no-drop;
		color: #8D8D8D;
	}
}

/* 定义旋转动画 */
@keyframes rotate {
  0% { transform: rotate(0deg); } /* 初始状态为不旋转 */
  100% { transform: rotate(360deg); } /* 结束状态为完全旋转一周（360度）*/
}