@tailwind base;
@tailwind components;
@tailwind utilities;

.li-img li {
	list-style: none;
	float: left;
	width: 25%; /*四列图片排列*/
	height: 175px;
	overflow: hidden;
}

.li-img li img {
	position: relative;
	width: 100%;
	height: auto;
	top: 50%; /*li高度的一半*/
	transform: translateY(-50%); /*再向上移动自身的50%*/
}

/*清除浮动*/
.clearfix:after {
	position: relative;
	content: '';
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
	clear: both;
}

#carousel {
	@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
}

#carousel img {
	position: absolute; /* 绝对定位 使图片堆叠 */
	width: auto; /* 设定大小 按比例缩放 */
	height: auto; /* 设定大小 按比例缩放 */
	transition: all .6s; /* 动画 */
	opacity: 0; /* 隐藏 */
}

.imgActive {
	opacity: 1 !important; /* 显示图片 最高优先级 */
}

/* 控制按钮的样式 */
#leftArrow,
#rightArrow {
	//position: absolute;
	//left: 5px;
	//top: 50%;
	//width: 25px;
	//height: 30px;
	//background-color: #eee;
	//display: flex;
	//justify-content: center;
	//align-items: center;
	//opacity: 0.7;
	//font-size: 20px;
	//cursor: pointer;
	//z-index: 1000;
	@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
}

#rightArrow {
	//left: auto;
	//right: 5px;
	@apply left-auto right-5;
}

#sliderBtn {
	//position: absolute;
	//width: 100%;
	//bottom: 0;
	//display: flex;
	//justify-content: flex-end;
	//z-index: 1000;
	@apply absolute w-full bottom-0 flex justify-end z-10;
}

.unitBtn {
	//width: 10px;
	//height: 10px;
	//background-color: #eee;
	//border-radius: 10px;
	//margin: 10px;
	//cursor: pointer;
	@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
}

.btnActive {
	background-color: #4C98F7;
}