.p5-carousel{
	.p5-carousel-box{
		width: 100%;
		height: 200px;
		overflow: hidden;
		position: relative;
		&:hover{
			.p5-carousel-arrow{
				display: block;
			}
		}
		.p5-carousel-list{
			&:after{
				content: "";
				clear: both;
			}
		}
		.p5-carousel-arrow{
			width: 100%;
			height: 100%;
			position: relative;
			display: none;
			.p5-carousel-arrow-l, .p5-carousel-arrow-r{
				position: absolute;
				top: 50%;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin-top: -20px;
				text-align: center;
				color: #fff;
				background: rgba(31,45,61,.3);
				border-radius: 50%;
				cursor: pointer;
				&:before{
					content: "";
					width: 10px;
					height: 10px;
					border: 1px solid #fff;
					display: block;
					position: absolute;
					top:50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border-left: none;
					border-bottom: none;
				}
			}
			.p5-carousel-arrow-l{
				left: 10px;
				&:before{
					transform-origin: center center;
					transform: translate(-50%, -50%) rotate(-135deg);
				}
			}
			.p5-carousel-arrow-r{
				right: 10px;
				&:before{
					transform-origin: center center;
					transform: translate(-50%, -50%) rotate(45deg) ;
				}
			}
		}
		.p5-carousel-dot{
			position: absolute;
			bottom: 2%;
			width: 100%;
			text-align: center;
			.p5-carousel-dot-ul{
				margin-left: -10px;
			}
			.p5-carousel-dot-li{
				display: inline-block;
				margin-left: 10px;
				padding: 10px 0;
				cursor: pointer;
				button{
					width: 20px;
					height: 4px;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 100px;
					border: none;
					display: block;
				}
				&:hover, &.p5-carousel-dot-li-active{
					button{
						background: #fff;
					}
				}
			}
		}
	}
}

// item
.p5-carouselitem-container{
	float: left;
}