
body{
	overflow:hidden
}
.e5z-animate0{
	opacity: 0;
	filter: alpha(opacity=0);
	transform: scale(2) translatex(60%);
	transition: transform 0.8s cubic-bezier(0.42, 0, 1, 0.68),opacity 1s;
}
.e5z-animate0.animate {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1) translatex(0);
}
/* .e5x-page .animate .delay3{
	transition-delay: .3s;
}
.e5x-page .animate .delay4{
	transition-delay: .4s;
}
.e5x-page .animate .delay5{
	transition-delay: .5s;
}
.e5x-page .animate .delay6{
	transition-delay: .6s;
}
.e5x-page .animate .delay7{
	transition-delay: .7s;
} */

.main .section{
	position: relative;
	z-index: 3;
}
.main .box1{
	width: 100%;
	height: calc(100vh - 134px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position:relative;
	z-index: 1;
}
.opa0-img{
	width: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
}

.main .box1 .pro-banner{
	height: 100%;
}
.main .box1 .pro-banner-txts{
	position: absolute;
	right:20%;
	top: 12.6%;
	width: 410px;
}
.main .box1 .banner-txts {
    position: relative;
    width:282px;
    height: 84px;
    margin: 0 auto;
}

.main .box1 .banner-txts img {
    display: block;
    position: absolute;
    height: 84px;
    width: auto;
    top: 0;
}

.main .box1 .banner-txts .pro-cn1 {
    left: 0;
}

.main .box1 .banner-txts .pro-cn2 {
    left: 24.468%
}

.main .box1 .banner-txts .pro-cn3 {
    left:48.226%
}

.main .box1 .banner-txts .pro-cn4 {
    left: 75.53%
}


.main .box1 .pro-banner-txts .pro-con{
	color: #444;
	margin-top: 32px;
	text-align: center;
}



.main .box2{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.main .box2 .box2-img{
	width:61.46%;
	position:absolute;
	bottom: 0;
	right:12%;
}
.main .box2 .box2-img img{
	width:100%;
}
.main .box2 .pro-img2{
	position:absolute;
	top:0;
	left:0;
	width:70%;
	z-index: 5;
}
.main .box2 .box2-text{
	position:absolute;
	top:37%;
	left:16.6%;
	text-align:center;
	z-index: 10;
}
.main .box2 .box2-text .pro-tit{
	color:#000;
}
.main .box2 .box2-text .pro-con{
	color:#8b704c;
}
.main .box3{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.main .box3 .box3-img{
	width:78.125%;
	position:absolute;
	bottom: 0;
	left:0%;
}
.main .box3 .box3-img img{
	width:100%;
}
.main .box3 .box3-text{
	position:absolute;
	top:19.56%;
	right:21.875%;
	text-align:center;
	z-index: 10;
}
.main .box3 .box3-text .pro-tit{
	color:#fff;
}
.main .box3 .box3-text .pro-con{
	color:#fff;
}
.main .box9{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
	overflow:hidden
}
.main .box9 .box9-img{
	position:absolute;
	left:39.06%;
	bottom:0;
	width:31.8%;
}
.main .box9 .box9-img img{
	width:100%;
	
}

.main .box9 .box9-img .pro-img1{
	position:absolute;
	width:18%;
	bottom:13%;
	left:31.8%;
	opacity:0;
	transition:all 0.3s;
}
.main .boxfade .box9-img .pro-img1{
	opacity:1
}
.main .box9 .box9-img .pro-img2{
	position:absolute;
	width:10.8%;
	bottom:42.1%;
	left:31.2%;
	opacity:0;
	transition:all 0.3s 0.3s;
}
.main .boxfade .box9-img .pro-img2{
	opacity:1
}
.main .box9 .box9-img .pro-img3{
	position:absolute;
	width:10.8%;
	top:20.6%;
	left:31.2%;
	opacity:0;
	transition:all 0.3s 0.5s;
}
.main .boxfade .box9-img .pro-img3{
	opacity:1
}
.main .box9 .pro-tit1{
	position:absolute;
	font-size:22px;
	color:#333333;
	top: 21.9%;
    right: 14.6%;
    opacity:0;
    transition:all 0.3s 0.7s;
}
.main .boxfade .pro-tit1{
	opacity:1;
}
.main .box9 .pro-tit1 .box9-span{
	width:310px;
	height:60px;
	position:relative;
}
.main .box9 .pro-tit1 span.span1{
	width:10px;
	height:10px;
	border-radius: 50%;
	background-color: #c0c0bf;
	display:inline-block;
	    position: absolute;
    top: 0;
    left: 0;
}
.main .box9 .pro-tit1 span.span2{
	position:absolute;
	top:5px;
	height:1px;
	background-color:#c0c0bf;
	content:"";
	left:10px;
	width:300px;
}
.main .box9 .pro-tit1 span.span3{
	position:absolute;
	top:5px;
	width:1px;
	background-color:#c0c0bf;
	content:"";
	left:310px;
	height:50px;
}
.main .box9 .pro-tit1 .tit{
	font-size:22px;
	color:#333333;
	margin-top: 14px;
	padding-left: 280px;
}
.main .box9 .pro-tit2{
	position:absolute;
	font-size:22px;
	color:#333333;
	top: 46.7%;
    left: 23%;
    width:360px;
    opacity:0;
    transition:all 0.3s 1s;
}
.main .boxfade .pro-tit2{
	opacity:1
}
.main .box9 .pro-tit2 .box9-span{
	width:226px;
	height:130px;
	position:relative;
	margin-left: 134px;
}
.main .box9 .pro-tit2 span.span1{
	width:10px;
	height:10px;
	border-radius: 50%;
	background-color: #c0c0bf;
	display:inline-block;
	    position: absolute;
    top: 0;
    right: 0;
}
.main .box9 .pro-tit2 span.span2{
	position:absolute;
	top:5px;
	height:1px;
	background-color:#c0c0bf;
	content:"";
	right:10px;
	width:216px;
}
.main .box9 .pro-tit2 span.span3{
	position:absolute;
	top:5px;
	width:1px;
	background-color:#c0c0bf;
	content:"";
	right:226px;
	height:125px;
}
.main .box9 .pro-tit2 .tit{
	font-size:22px;
	color:#333333;
	margin-top: 14px;
}
.main .box10{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.main .box10 .box10-img{
	position:absolute;
	width:82.447%;
	bottom:0;
	left:0;
}
.main .box10 .box10-img img{
	width:100%;
}
.main .box10 .box10-text{
	position:absolute;
	top:34.7%;
	right:18.2%;
	text-align:center
}
.main .box10 .box10-text .pro-tit{
	color:#000000;
} 
.main .box10 .box10-text .pro-con{
	color:#735226
}
.main .box31{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.main .box31 .box11-img{
	position:absolute;
	top:0;
	right:0;
	/* width:62.8%; */
	height: 100%;
} 
.main .box31 .box11-img img{
	width:auto;
	height: 100%;
}
.main .box31 .box11-text{
	position:absolute;
	top:40%;
	left:16.6%;
	text-align:left;
}
.main .box31 .box11-text .pro-tit{
	color:#000;
}
.main .box31 .box11-text .pro-con{
	color:#8b704c;
}
.main .box32{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.main .box32 .box12-img{
	position:absolute;
	top:0;
	left:16.6%;
	width:53.2%;
} 
.main .box32 .box12-img img{
	width:100%;
}
.main .box32 .box12-text{
	position:absolute;
	top:5.7%;
	right:13.8%;
	text-align:right;
	z-index: 10;
}
.main .box32 .box12-text.pro1{
	text-align:left;
	left:31.8%;
	right:auto;
	bottom:13%;
	top:auto;
}
.main .box32 .box12-text .pro-tit{
	color:#fff;
}
.main .box32 .box12-text .pro-con{
	color:#fff;
}
.main .box33{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.main .box33 .box13-img{
	position:absolute;
	top:50%;
	transform:translatey(-50%);
	left:19.8%;
	width:56%;
} 
.main .box33 .box13-img img{
	width:100%;
}
.main .box33 .box13-text{
	position:absolute;
	top:37.5%;
	right:16.6%;
	text-align:right;
	z-index: 10;
}
.main .box33 .box13-text .pro-tit{
	color:#fff;
}
.main .box33 .box13-text .pro-con{
	color:#fff;
}
.main .box34{
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 10;
	overflow: hidden;
}
.main .box34 .box14-img{
	position:absolute;
	top:0%;
	right:0%;
	height: 100%;
	/* width:54.4%; */
} 
.main .box34 .box14-img img{
	width:auto;
	height: 100%;
}
.main .box34 .box14-text{
	position:absolute;
	top:40%;
    left:16.6%;
	text-align:left;
	z-index: 10;
}
.main .box34 .box14-text .pro-tit{
	color:#000;
}
.main .box34 .box14-text .pro-con{
	color:#8b704c;
}
.b_box9{
	padding-top: 0;
	overflow: hidden;
	height:1000px;
	background:  no-repeat center;
    background-size: cover;
}
.b_box9 .k09 {
    width: 750px;
    height: 820px;
    margin: 0 auto;
    margin-top: 45px;
    position: relative;
    left: 160px;
}
.b_box9 .k09 img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
}
.b_box9 .k09 .nkwen{
	width: 570px;
    height: 130px;
}
.b_box9 .k09 .nkwen01 {
    position: absolute;
    top: 200px;
    right: -56px;
}
.b_box9 .k09 .nkwen02 {
    width: 480px;
    height: 200px;
    position: absolute;
    right: -55px;
    top: 414px;
}
.b_box9 .k09 .nkwen .wen {
    line-height: 30px;
    color: #333333;
    font-size: 22px;
}
.b_box9 .k09 .nkwen01 .wen {
    width: 290px;
    height: 60px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.b_box9 .k09 .nkwen02 .wen {
    width: 290px;
    height: 60px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.b_box9 .k09 .nkwen01 .span {
    width: 313px;
    height: 56px;
    position: absolute;
}
.b_box9 .k09 .nkwen01 .span .span01 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #c1bfbc;
    top: 1px;
    left: 3px;
}
.b_box9 .k09 .nkwen01 .span .span02 {
    /* background: #c1bfbc; */
    width: 300px;
    height: 1px;
    top: 5px;
    left: 8px;
}
.b_box9 .k09 .nkwen01 .span .span03 {
    /* background: #c1bfbc; */
    width: 1px;
    height: 50px;
    bottom: 0;
    right: 5px;
}
.b_box9 .k09 .nkwen02 .span {
    width: 230px;
    height: 100%;
    position: absolute;
}
.b_box9 .k09 .nkwen02 .span span {
    display: block;
    position: absolute;
}
.b_box9 .k09 .nkwen02 .span .span01 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #c1bfbc;
    top: 1px;
    left: 3px;
}
.b_box9 .k09 .nkwen02 .span .span02 {
    /* background: #c1bfbc; */
    width: 217px;
    height: 1px;
    top: 5px;
    left: 8px;
}
.b_box9 .k09 .nkwen02 .span .span03 {
    /* background: #c1bfbc; */
    width: 1px;
    height: 125px;
    top: 5px;
    right: 4px;
}
.kbspan3:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    background: #c1bfbc;
    left: 0;
    top: 0;
    transition: all .8s linear;
}
.kbspan4:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    background: #c1bfbc;
    left: 0;
    top: 0;
    transition: all .8s linear;
    transition-delay: .8s;
}
.b_box9 .k09 .nkwen01 .span span{
	display: block;
    position: absolute;
}
.b_box9 .k09 .nkwen01 .span .span01 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #c1bfbc;
    top: 1px;
    left: 3px;
}
.animate .kbspan3:after {
    width: 100%;
    transition: all .8s linear;
}
.animate .kbspan4:after {
    width: 100%;
    transition: all .8s linear;
    transition-delay: .8s;
}


@media (max-width: 1600px){
	/* .main .box1 .banner-txts{
		transform: scale(.8);
	} */
	.main .box1 .pro-banner-txts .pro-con{
		margin-top: 20px;
	}
	.main .box31 .box11-text{
		left: 5%;
	}
	.main .box34 .box14-text{
		left: 5%;
	}
}

@media (max-width: 1200px){
	.b_box9 .k09{
		left: 80px;
	}
	.b_box9 .k09 .nkwen .wen{
		font-size: 20px;
	}
	

}
@media (max-width: 1024px){
	.main .box1{
		height:50vh;
	}
	.main .box1 .pro-banner-txts{
		right: 14.5%;
	}
	.main .box2{
		height:50vh;
	}
	.main .box2 .box2-text{
		top: 32%;
    	left: 7.6%;
	}
	.main .box3{
		height:50vh;
	}
	.main .box10{
		height:50vh;
	}
	.main .box10 .box10-text{
		right: 6.2%;
	}
	.main .box31{
		height:50vh
	}
	.main .box31 .box11-text{
		top: 54%;
		z-index: 10;
	}
	.main .box32{
		height:50vh
	}
	.main .box32 .box12-img{
		left: 8.6%;
	}
	.main .box32 .box12-text{
		top: 10.7%;
	    right: 7.8%;
	}
	.main .box32 .box12-text.pro1{
		left: 27.8%;
	    bottom: 18%;
	}
	.main .box33{
		height:50vh
	}
	.main .box34{
		height:50vh
	}
	.main .box34 .box14-text{
		left: 10.6%;
	}
	.b_box9 .k09 {
	    width: 720px;
	    height: auto;
	}
}
@media (max-width: 992px){
	.main .box1 .banner-txts{
		transform: scale(.7);
	}
	.main .box1 .pro-banner-txts .pro-con{
		margin-top: 0;
	}
	
	.main .box1 .pro-banner-txts{
		    right: 5.5%;
	}
	.main .box2 .box2-img{
		right: 3%;
	}
	.b_box9{
		height:800px;
	}
	.main .box10 .box10-img{
		left: -5%;
	}
	.main .box10 .box10-text{
		top: 10.7%;
		    right: 2.2%;
	}
	.main .box32 .box12-img{
		left:0;
	}
	.main .box34 .box14-text{
		left: 5.6%;
	}
	.b_box9 .k09 {
	    width: 500px;
	    left: auto;
	}
	.b_box9 .k09 .nkwen01 {
	    /* right: 22%; */
	    width: 230px;
	    height: 107px;
	    right: 75px;
	    top: 179px;
	}
	.b_box9 .k09 .nkwen02 {
	    width: 200px;
	    right: 44px;
	    top: 369px;
	}
	.b_box9 .k09 .nkwen01 .span {
	    width: 145px;
	}
	.b_box9 .k09 .nkwen01 .span .span02 {
	    width: 132px;
	}
	.b_box9 .k09 .nkwen02 {
	    width: 200px;
	    right: 44px;
	    top: 369px;
	}
	.b_box9 .k09 .nkwen02 .span .span02 {
	    width: 148px;
	}
	.b_box9 .k09 .nkwen02 .span {
	    width: 160px;
	}
	.b_box9 .k09 .nkwen01 .wen {
	    width: 135px;
	    line-height: 20px;
	}
	.b_box9 .k09 .nkwen02 .wen {
	    right: -10%;
	    line-height: 20px;
	    width: 150px;
	}
	.b_box9 .k09 .nkwen02 .wen {
	    right: -10%;
	    line-height: 20px;
	}
	.b_box9 .k09 .nkwen .wen{
		font-size: 14px;
	}
}

@media (max-width: 480px){
	.main .box1 .pro-banner-txts{
		margin-top: 0;
		right: -20%;
		top: 0;
	}
	.main .box1 .banner-txts{
		transform: scale(.7);

	}

	.main .box1 .pro-banner-txts .pro-con{
		/* font-size: 14px;
		line-height: 20px; */
		margin-top: -10px;
	}

	
	.main .box1{
		height: 70vh;
	}
	.main .box2{
		height: 70vh;
	}
	.main .box2 .box2-img{
		width: 90%;
		right: 5%;
	}
	.main .box2 .box2-text{
		left: 0;
		top: 10%;
		width: 100%;
	}
	.b_box9{
		height: 500px;
	}
	.main .box3{
		height: 70vh;
	}
	.main .box3 .box3-img{
		width: 100%;
	    left: -10%;
	}
	.main .box3 .box3-text{
		top: 10%;
		right: 0;
		width: 100%;
	}
	.main .box10{
		height: 70vh;
	}
	.main .box10 .box10-text{
		right: 0;
		top: 10%;
		width: 100%;
	}
	.main .box10 .box10-img{
		left: -5%;
		width: 140%;
	}
	.main .box31{
		height: 70vh;
	}
	.main .box31 .box11-img,
	.main .box31 .box11-img img{
		width: 100%;
		height: auto;
	}
	.main .box31 .box11-text{
		top: 60%;
	}
	.main .box32{
		height: 70vh;
	}
	.main .box32 .box12-img{
		width: 100%;
		top: 20%;
	}
	.main .box32 .box12-text{
		top: 5%;
	}
	.main .box32 .box12-text.pro1{
		bottom: 10%;
	}
	.main .box33{
		height: 70vh;
	}
	.main .box33 .box13-img{
		top: 15%;
	    transform: translatey(0);
	    left: 10%;
	    width: 90%;
	}
	.main .box33 .box13-text{
		right: 0;
		text-align: center;
		top: 70%;
		width: 100%;
	}
	.main .box34{
		height: auto;
	}
	.main .box34 .box14-img,
	.main .box34 .box14-img img{
		position: static;
		width: 100%;
		height: auto;
	}
	.main .box34 .box14-text{
		position: static;
		padding: 30px 0;
		text-align: center;
	}
	.b_box9 .k09 {
	    width: 300px;
	    margin: auto 0;
	}
	.b_box9 .k09 .nkwen01 {
	    right: -45px;
	    top: 110px;
	    height: 95px;
	}
	.b_box9 .k09 .nkwen02 {
	    right: -28px;
	    top: 212px;
	}
	.b_box9 .k09 .nkwen .wen{
		font-size: 12px;
		height: auto;
	}
	.b_box9 .k09 .nkwen02{
		height: 110px;
	}
	.b_box9 .k09 .nkwen02 .span .span03{
		height: 40%;
	}
	.b_box9 .k09 .nkwen02 .wen {
	    width: 50%;
	    right: 0;
	}
}

@media (min-width: 1025px){

}
