.hp_ss_container * {
	box-sizing: border-box;
}
.hp_ss_container {
	width: 100%;
	margin-bottom: 20px;
	overflow: visible;
	position: relative;
}
.hp_ss_container:after {
	content: "";
	display: table;
	clear: both;
}
	.hp_ss_container .arrow {
		position: absolute;
		top: calc(50% - (35px / 2));
		width: 30px;
		height: 35px;
		background-repeat: no-repeat;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.hp_ss_container .arrow.active {
		opacity: 0.5;
	}
	.hp_ss_container:hover .arrow {
		opacity: 0.75;
	}
	.hp_ss_container .arrow.left {
		left: 10px;
		background-image: url(/asset/img/scroll-left.png);
	}
	.hp_ss_container .arrow.right {
		right: 10px;
		background-image: url(/asset/img/scroll-right.png);
	}
	.hp_ss_container .slides_container {
		width: 100%;
		padding-top: 83.33333%; /* 300x250 ratio */
		position: relative;
		overflow: hidden;
		background: #fff url(/images/loading_24w.gif) no-repeat center center;
	}
	.hp_ss_container .slides {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
	}
		.hp_ss_container .slides a.slide {
			position: absolute;
			width: 100%;
			height: 100%;
			display: none;
			opacity: 0;
			background-size: cover;
			background-position: center center;
		}
		.hp_ss_container .slides a.slide:first-child {
			opacity: 1;
			display: block;
		}
		.hp_ss_container .slides a.slide:nth-child(2) {
			opacity: 0;
			/*display: block;*/
		}
			.hp_ss_container .slides a.slide .info {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				padding-bottom: 10px;
				/*background: rgba(0,0,0,0.25);*/
			}
			.hp_ss_container .slides a.slide .info.dark_back {
				background: rgba(0,0,0,0.5);
			}
				.hp_ss_container .slides a.slide .info .title {
					color: #fff;
					text-shadow: #000000 2px 2px 0;
					text-align: center;
					font-weight: bold;
					font-size: 18px;
					padding: 10px 5px 3px;
				}
					.hp_ss_container .slides a.slide .info a.title:hover {
						text-decoration: none;
					}
				.hp_ss_container .slides a.slide .info .byline {
					color: #fff;
					font-style: italic;
					font-size: 14px;
					text-align: center;
					padding: 0 5px 3px;
				}
				.hp_ss_container .slides a.slide .info .desc {
					color: #fff;
					font-size: 13px;
					text-align: center;
					padding: 0 5px 5px;
				}
				.hp_ss_container .slides a.slide .info .subtitle {
					color: #fff;
					font-size: 13px;
					text-align: center;
					padding: 0 5px 5px;
				}
					.hp_ss_container .slides a.slide .info .subtitle p {
						padding: 0;
						margin: 0;
					}
					.hp_ss_container .slides a.slide .info .subtitle ul,
					.hp_ss_container .slides a.slide .info .subtitle li {
						padding: 0;
						margin: 0;
						list-style: none;
					}
	.hp_ss_container .loading_bar {
		background: #e5e5e5;
		border: 1px solid #ccc;
		border-top: none;
		border-bottom: none;
		height: 3px;
		display: none; /* disabled */
	}
		.hp_ss_container .inner_bar {
			background: #b50012;
			height: 3px;
			width: 0px;
		}
	.hp_ss_container .navigation {
		background: #e5e5e5;
		border: 1px solid #ccc;
		overflow: visible;
		font-size: 12px;
		color: #dc0000;
		font-weight: bold;
		position: relative;
		width: 100%;
		float: left;
		display: none; /* disabled */
	}
		.hp_ss_container .navigation .play_pause {
			float: right;
			padding: 3px 5px;
			cursor: pointer;
			height: 20px;
		}
		.hp_ss_container .navigation .play_pause:hover {
			background: #ddd;
		}
		.hp_ss_container .navigation .buttons {
			float: left;
		}
			.hp_ss_container .navigation .buttons .button {
				float: left;
				width: 21px;
				text-align: center;
				padding: 3px 5px;
				cursor: pointer;
				border-right: 1px solid #ccc;
				height: 20px;
			}
			.hp_ss_container .navigation .buttons .button:hover {
				background: #ddd;
			}
			.hp_ss_container .navigation .buttons .button.active {
				background: #ccc;
			}
		.hp_ss_container .navigation .slide_preview {
			display: none;
			position: absolute;
			width: 150px;
			height: 100px;
			top: -114px;
			text-align: center;
			background: #fff;
		}
			.hp_ss_container .navigation .slide_preview .image {
				width: 100%;
				height: 100%;
				border: 5px solid #fff;
				overflow: hidden;
			}
				.hp_ss_container .navigation .slide_preview .image img {
					width: 100%;
					display: block;
				}
			.hp_ss_container .navigation .slide_preview .info {
				position: absolute;
				border: 5px solid #fff;
				border-top: none;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.25);
			}
				.hp_ss_container .navigation .slide_preview .info .title {
					color: #fff;
					text-align: center;
					font-weight: bold;
					font-size: 12px;
					padding: 4px;
				}
			.hp_ss_container .navigation .slide_preview .down_triangle {
				width:0;
				height:0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 10px solid #fff;
				position: absolute;
				bottom: -10px;
				left: calc(50% - 10px);
			}
		.hp_ss_container .navigation .active_arrow {
			width: 0;
			height: 0;
			position: absolute;
			bottom: 21px;
			left: 21px;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #ccc;
		}

@media only screen and (max-width: 767px){
	.hp_ss_container{
		width: 95%;
	}
}