* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
}

.yebox_max {
	width: 100%;
	height: 100%;
	background: #ccc;
	overflow: hidden;
}

.line {
	width: 100%;
	height: 3px;
	position: relative;
	top: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.line .ll,
.line .rl {
	width: 30%;
	height: 1px;
	background: #FFF;
}

.rad {
	/*width: 50px;*/
	margin: 0 50px 0 50px;
	transition: 1s all .3s ease;
}

.yebox_min {
	width: 800%;
	height: 100%;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	position: relative;
	left: 0;
	transition: 1s all;
}

.yebox_min .year {
	width: 100%;
	height: 100%;
	-webkit-background-size: 100% 100% !important;
	background-size: 100% 100% !important;
}

.fimg {
	width: 100%;
	height: 55%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fimg img {
	width: auto;
	opacity: 0;
	transition: 1s all 1s;
}

.sh {
	opacity: 1 !important;
}

.yebox_min .year .tyear {
	width: 100%;
	height: 55%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.yebox_min .year .tyear .ytext {
	font-size: 15vw;
	font-weight: bold;
	color: #FDF5DE;
	font-family: "BIG JOHN","Open Sans","Arial","Microsoft yahei";
}

.ctrl {
	height: 10%;
	position: relative;
	top: -45%;
	left: 0px;
	z-index: 1;
	transition: 1s all;
}

.ctrl>* {
	width: 100px;
	height: 100%;
	font-size: 40px;
	font-weight: bold;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-left: 20px;
}
.ctrl div:hover{
	color:#d8cba7;
	transition: 0s;
}
.prev {
    margin-left: 45px;
}
.next,
.prev {
	cursor: pointer;
	transition: 1s all ease;
	font-family:"BIG JOHN","Open Sans","Arial","Microsoft yahei";
}

.r {
	color: rgba(0, 0, 0, 0);
}

.ani {
	opacity: 1;
	animation: ani 1s ease forwards;
}

.anii {
	opacity: 0;
	animation: anii 1s ease forwards;
	font-family:"BIG JOHN","Open Sans","Arial","Microsoft yahei";
}
@media screen and (min-width:992px) and (max-width:1200px){

    .line .ll, .line .rl {
        width: 20%;
        height: 1px;
        background: #FFF;
    }
}
@media screen and (min-width:768px) and (max-width:992px){

    .line .ll, .line .rl {
        width: 10%;
        height: 1px;
        background: #FFF;
	}
	.prev{
		margin-left: 16px;
	}
}
@media screen and (max-width:768px){
	.yebox_min .year .tyear .ytext {
		font-size: 31vw;
		font-weight: bold;
		color: #FDF5DE;
		font-family: "BIG JOHN","Open Sans","Arial","Microsoft yahei";
	}
	.fimg img {
		width: 100%;
		/* opacity: 0; */
		transition: 1s all 1s;
	}
    .line .ll, .line .rl {
        width: 0;
	}
	.prev{
		margin-left: 10px;
	}
	.prev img{
		width: 100%
	}
	.ctrl img {
		width:100%;
	}
	.next {
		margin-left: 40px;
	}
}
@keyframes ani {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anii {
	0% {
		opacity: 0;
	}
	80% {
		opacity: .2;
	}
	100% {
		opacity: 1;
	}
}