﻿.container
{
	width:56vw;
	height:80vh;
	display:flex;
	justify-content:center;
	align-items:center;
	float: right;
}

.slider
{
	height:375px;
	width:100vw;
	display:flex;
	perspective:1000px;
	position:relative;
	align-items:center;
}

.box1
{
	background:url(../image/lunbo1.jpg);
	background-size:cover;
	background-position:center center;
}

.box2
{
	background:url(../image/lunbo2.jpg);
	background-size:cover;
	background-position:center center;
}

.box3
{
	background:url(../image/lunbo3.jpg);
	background-size:cover;
	background-position:center center;
}

.box4
{
	background:url(../image/lunbo4.jpg);
	background-size:cover;
	background-position:center center;
}

.box5
{
	background:url(../image/lunbo5.jpg);
	background-size:cover;
	background-position:center center;
}

.box6
{
	background:url(../image/lunbo6.jpg);
	background-size:cover;
	background-position:center center;
}
.box7
{
	background:url(../image/lunbo1.jpg);
	background-size:cover;
	background-position:center center;
}


.slider [class*=box]
{
	overflow:hidden;
	border-radius:20px;
	transition:all 1s cubic-bezier(0.68,-0.6,0.32,1.6);
	position:absolute;
}

.slider [class*=box]:nth-child(7),.slider [class*=box]:nth-child(1)
{
	width:50vh;
	height:40vh;
	transform:scale(0.2) translate(-50%,-50%);
	top:10%;
	z-index:1;
}

.slider [class*=box]:nth-child(2),.slider [class*=box]:nth-child(6)
{
	width:50vh;
	height:40vh;
	transform:scale(0.4) translate(-50%,-50%);
	top:20%;
	z-index:2;
}

.slider [class*=box]:nth-child(3),.slider [class*=box]:nth-child(5)
{
	width:50vh;
	height:40vh;
	transform:scale(0.6) translate(-50%,-50%);
	top:30%;
	z-index:3;
}

.slider [class*=box]:nth-child(4)
{
	width:30vw;
	height:40vh;
	color:#fff;
	transform:scale(1) translate(-50%,-50%);
	top:50%;
	z-index:4;
	left:50%;
	border-color:#c92026;
}

.slider [class*=box]:nth-child(1)
{
	left:-13%;
}

.slider [class*=box]:nth-child(2)
{
	left:-5%;
}

.slider [class*=box]:nth-child(3)
{
	left:10%;
}

.slider [class*=box]:nth-child(5)
{
	left:71%;
}

.slider [class*=box]:nth-child(6)
{
	left:85%;
}

.slider [class*=box]:nth-child(7)
{
	left:100%;
}

.slider .firstSlide
{
	-webkit-animation:firstChild 1s;
	animation:firstChild 1s;
}

100%
{
	left:-13%;
	transform:scale(0.2) translate(-50%,-50%);
}