@charset "UTF-8";

@media screen and (max-width: 900px){
	#mv {
	    width: 100%;
		height: 65vh;
	}
	#mv:after {
	    background: none;
	}
	#mv .mv_pointer{
		width: 0;
		position: absolute;
		bottom: calc(50% - 80px);
		left: auto;
		right: 10%;
		padding: 0;
		text-align: center;
	}
	#mv .mv_pointer{
		width: 100%;
		height: auto;
		position: absolute;
		top: 100px;
		bottom:auto;
		left: 0;
		padding: 0;
	}
	#mv .mv_pointer li{
		display: block;
		height: 40px;
		margin: 0;
		counter-increment: mvImg;
	}
	#mv .mv_pointer li:after{
		content: "0" counter(mvImg);
		position: absolute;
		left: 100px;
		opacity: 0.5;
		transition: 0.8s ease-in-out;
		font-size: 0.9em;
		letter-spacing: 0.2rem;
		color: rgba(0, 0, 0, 0.6);
	}
	#mv .mv_pointer li.current:after{
		opacity: 1;
		font-weight: bold;
	}
	#mv .mv_pointer li:before{
		background: rgba(0, 0, 0, 0.35);
		width: 40px;
		height: 1px;
		position:absolute;
		transition: all 0.8s cubic-bezier(0.47, 0, 0.745, 0.715);
		margin-top: 13px;
	}
	#mv .mv_pointer li.current:before{
		width: 80px;
		background: rgba(0, 0, 0, 0.15);
	}
	#mv .mv_arrow {
		display: none;
	}
	#mv_outer{
		padding-top: 0;
	}
	#mv::before{
		background-size: 80%;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_pointer{
		top: 60px;
	}
}
@media screen and (max-width: 650px){
	#mv:after,
	#mv .mv_img li{
		width: 85%;
		margin-left: 15%;
	}
}
@media screen and (max-width: 600px){
	#mv .mv_pointer li:before{
		width: 0px;
	}
	#mv .mv_pointer li.current:before{
		width: 10px;
	}
	#mv .mv_pointer li:after{
		left: 20px;
	}
}