.section-4 {
	position: relative;
	background-color: #F2F2F2;
}

	.section-4 .section-4-title {
		position: absolute;
		right: 0;
		color: #E9E9E9;
		font-weight: bold;
		font-size: 6em;
		margin-top: -0.6em;
	}

	.section-4 .section-4-arrow {
		position: absolute;
		width: 75px;
		bottom: -20px;
		right: -100px;
		z-index: 1;
	}

	.section-4 .section-4-fake-arrow {
		position: absolute;
		width: 100px;
		height: 100px;
		bottom: -20px;
		right: -200px;
		background-color: #F2F2F2;
	}

		.section-4 .section-4-fake-arrow.on {
			-webkit-animation: slide-arrow 3s; /* Safari, Chrome and Opera > 12.1 */
			-moz-animation: slide-arrow 3s; /* Firefox < 16 */
			-ms-animation: slide-arrow 3s; /* Internet Explorer */
			-o-animation: slide-arrow 3s; /* Opera < 12.1 */
			animation: slide-arrow 3s;
			opacity: 0;
		}

	.section-4 .section-4-link {
		float: right;
		padding: 3em 1em 1em;
		font-weight: 800;
		font-size: 1.4em;
	}

.section-4-link a, .section-4-link a:link, .section-4-link a:visited, .section-4-link a:hover, .section-4-link a:active {
	text-decoration: none;
	color: inherit;
}

.section-content-4 {
	overflow-x: scroll;
	overflow-y: hidden;
	min-width: 100%;
	height: 60vh;
	max-height: 450px;
	position: relative;
	white-space: nowrap;
	display: flex;
	justify-content: unset;
	align-items: center;
	text-align: center;
	-ms-overflow-style: none;
	/* Hides the scrollbar. */
	-ms-scroll-chaining: none;
	/* Prevents Metro from swiping to the next tab or app. */
	-ms-scroll-snap-type: mandatory;
	/* Forces a snap scroll behavior on your images. */
	-ms-scroll-snap-points-x: snapInterval(0%, 100%);
	/* Defines the y and x intervals to snap to when scrolling. */
	user-select: none;
	cursor: grab;
	cursor: -webkit-grab;
}

@-moz-document url-prefix() {
	.section-content-4 {
		overflow-x: hidden;
	}
}

.section-content-4::-webkit-scrollbar {
	width: 0 !important
}

.notice {
	position: relative;
	display: inline;
	margin: 0 10%;
	min-width: 650px;
	height: 320px;
}

	.notice i, .notice .newspaper {
		position: absolute;
		top: 6.5%;
		left: 4%;
		font-size: 200%;
		z-index: 3;
	}

	.notice .notice-text {
		position: absolute;
		top: 0;
		left: 0;
		width: 65%;
		height: auto;
		padding: 3em;
		z-index: 2;
		background-color: white;
		white-space: normal;
		text-align: left;
	}

		.notice .notice-text h1 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; /* number of lines to show */
			line-height: 35px;
			max-height: 105px;
		}

			.notice .notice-text h1 p {
				padding: 0px;
				margin: 0px;
			}

	.notice .notice-image {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 70%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: cover;
	}

.newspaper {
	width: 34px;
	height: 30px;
}

@media (max-width:800px) {
	.notice {
		min-width: 80%;
		height: 50%;
		margin-left: 10%;
	}

		.notice .notice-text {
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.8);
		}

		.notice .notice-image {
			width: 100%;
			height: 100%;
		}

	.section-4 .section-4-arrow {
		bottom: -100px;
		right: 0;
	}

	.section-4 .section-4-fake-arrow {
		bottom: -100px;
		right: 0;
	}

		.section-4 .section-4-fake-arrow.on {
			-webkit-animation: slide-arrow-xs 3s; /* Safari, Chrome and Opera > 12.1 */
			-moz-animation: slide-arrow-xs 3s; /* Firefox < 16 */
			-ms-animation: slide-arrow-xs 3s; /* Internet Explorer */
			-o-animation: slide-arrow-xs 3s; /* Opera < 12.1 */
			animation: slide-arrow-xs 3s;
			opacity: 0;
		}
}

@media (max-width:500px) {
	.section-4 .section-4-title {
		font-size: 3em;
	}

	.section-4 .section-4-link, .notice .notice-text h1 {
		font-size: 1em;
	}
}

@media screen and (min-width:500px) and (max-width:700px) {
	.section-4 .section-4-title {
		font-size: 4em;
	}

	.section-4 .section-4-link, .notice .notice-text h1 {
		font-size: 1.2em;
	}
}

@media screen and (min-width:700px) and (max-width:900px) {
	.section-4 .section-4-title {
		font-size: 5em;
	}

	.section-4 .section-4-link, .notice .notice-text h1 {
		font-size: 1.3em;
	}
}

@media (min-width:900px) {
	.section-4 .section-4-link, .notice .notice-text h1 {
		font-size: 1.4em;
	}
}


@keyframes slide-arrow {
	from {
		opacity: 1;
		right: -200px;
	}

	to {
		opacity: 0;
		right: -400px;
	}
}

@keyframes slide-arrow-xs {
	from {
		opacity: 1;
		right: 0;
	}

	to {
		opacity: 0;
		right: -200px;
	}
}