@charset "UTF-8";
/* CSS Document */

.mainV{
	align-items:center;
	display:flex;
	height:600px;
	margin:0 0 50px 0;
	background:
	linear-gradient(100deg, #FF980033 0%,#e97c1d33 25%,#f98a2633 25%,#e3caa2 50%, #d8c3a0 50%,#dea33b5e 75%,#FF980033 75%, #FF980033 100%),
	linear-gradient(20deg, #f1f1ee 0%,#b1a56cc2 25%,#c8c8a9 25%,#d9d9c0 50%, #ccccaa 50%,#ccccaa 75%,#ccccaa 75%, #ccccaa 100%);
	position:relative;
}
.mainV img{
	width:80%;
	max-width:600px;
	height:fit-content;
	margin:auto;
	display:block;
	z-index:1
}
.scroll {
	width      : 100%;
	font-size  : 9rem;
	text-align : center;
	color      : #fff;
	overflow   : hidden;
	position:absolute;
	opacity:0.2;
	bottom:0;
	z-index:2;
}
.scroll span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 40s linear infinite;
}
.scroll.up {
	transform: rotate(180deg);
	top:0;
	bottom:unset;
	z-index:0;
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

.cont{
	max-width:700px;
	margin:auto;
}
.cont h1{
	font-size:1.23rem;
	margin:0 0 1em 0;
}
.cont h5 {
	display: flex;
    align-items: center;
	margin:0 0 1.5em 0;
}
.cont h5:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #aaaa;
	margin-left: 1rem;
}

/* ---- 599px ------- */
@media screen and (max-width: 599px) {
	.mainV{
		height:400px;
		padding:3vh 0;
	}
	.mainV img{
		height:unset;
	}
	.scroll {
		font-size  : 6rem;
	}
	.cont h1{
		text-align:center;
	}
	.cont h1 span{
		display:block;
	}
	.cont h5:before,
	.cont h5:after {
	    content: "";
	    height: 1px;
	    flex-grow: 1;
	    background-color: #666;
	}
	.cont h5:before {
	    margin-right: 1rem;
	}
	.cont h5:after {
	    margin-left: 1rem;
	}
}