.section1 {
    position: relative;
    background: url(../images/back1.jpg) no-repeat center;
    background-size: cover;
}
.section2 {
    position: relative;
    background: url(../images/back2.png) no-repeat center;
    background-size: cover;
}
.section3 {
    position: relative;
    background: url(../images/back3.png) no-repeat center;
    background-size: cover;
}
.main {
    position: absolute;
    width: 1000px;
    height: 100%;
    left: 50%;
    margin-left: -500px;
}
.section3 .main{
    width: 1230px;margin-left: -615px;
}
.section1 .main .title {
    background: url(../images/main.png) no-repeat center;
    width: 807px;
    height: 255px;
    position: absolute;
    left:50%;
    top:16.8%;
    margin-left: -403px;
    animation: slideIn 1s linear;
    animation-fill-mode: forwards;
}
.section1 .main .button{
    background: url(../images/arrow.png) no-repeat center;
    width: 151px;
    height: 130px;
    position: absolute;
    left:50%;
    bottom: 3.9%;
    margin-left: -75px;
    animation: upDown 1s linear alternate infinite;
    animation-delay: 2s;
    opacity: 0;
}
.section2 .title{
    background: url(../images/title.png) no-repeat center;
    width: 864px;
    height: 200px;
    position: absolute;
    left:50%;
    top: 9%;
    margin-left: -432px;
}
.video{
    width: 1082px;
    height: 609px;
    position: absolute;
    left:50%;
    top: 31%;
    margin-left: -541px;
    box-shadow: -1px 4px 13px 0 rgb(0 0 0 / 50%);
}
.yshx{
    background: url(../images/yshx.png) no-repeat center;
    width: 171px;
    height: 370px;
    position: absolute;
    right:30px;
    top: 50px;
    z-index: 2;
}
@keyframes upDown {
    from{
        opacity: 1;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(-10px);
    }
}
@keyframes slideIn{
    0% {
        opacity:0;
        transform: scale(.6);
    }
    50%{
        opacity:1;
        transform: scale(.8);
    }
    100% {
        opacity:1;
        transform: scale(1);
    }
}
@-webkit-keyframes slideIn{
    0% {
        opacity:0;
        transform: scale(.6);
    }
    50%{
        opacity:1;
        transform: scale(.8);
    }
    100% {
        opacity:1;
        transform: scale(1);
    }
}
.carousel-container {
	position: absolute;
    left: 50%;
    top: 50%;
	height: 740px;
	width: 1230px;
	margin-left: -615px;
    margin-top: -370px;
}

.carousel-container #carousel {
	height: 740px;
	overflow: visible !important
}

.carousel-container #carousel .cloud9-item {
	position: relative;
	cursor: pointer
}

.carousel-container #carousel .cloud9-item a {
	display: block
}

.carousel-container #carousel .cloud9-item img {
	width: 507px;
	height: 726px;
	border:7px solid #ffffff;
    border-radius: 10px;
    box-shadow: -1px 4px 13px 0 rgb(0 0 0 / 50%);
}
.carousel-container #carousel .cloud9-item .kua{
    height: 250px;
    position: absolute;
    left: 7px;
    bottom: 7px;
    right: 7px;
    background: url(../images/eyes_look_mask.png) no-repeat;
}
.carousel-container #carousel .cloud9-item .txt {
	width: 425px;
    margin: 30px auto 15px;
    font-size: 30px;
    color: #fff9cd;
    line-height: 1.2;
}

.carousel-container #carousel .cloud9-item .intro {
	width: 425px;
    margin: 0 auto;
    font-size: 18px;
    color: #fff;
    line-height: 1.3;
}

.carousel-container #buttons {
	position: absolute;
	z-index: 10;
	width: 100%;
	left: 0;
	top: 0;
}

.carousel-container #buttons button {
	cursor: pointer
}

.carousel-container #buttons button.left {
	position: absolute;
	left: -10px;
	top: 321px;
	border: none;
	background: url(../images/left.png) no-repeat center;
	width: 52px;
	height: 77px;
	outline: 0
}

.carousel-container #buttons button.right {
	position: absolute;
	right: -10px;
	top: 321px;
	border: none;
	background: url(../images/right.png) no-repeat center;
	width: 52px;
	height: 77px;
	outline: 0
}