﻿/*common*/
body,div,section,header,footer,h1,h2,h3,h4,p,ul,li,dd,dl,dt{
	padding:0;
	margin:0;
	font: 12px "microsoft yahei", Arial, Helvetica, sans-serif;
}

img{
	border:none;
}
a{
	text-decoration:none;}
ul,li{
	list-style:none;
	border:none;}
table { border-collapse:collapse; }
input,textarea { border:none; }
textarea { resize:none; overflow:auto; }
.bl{
	display:block;}
.hide{
	display:none;}
.fl{
	float:left;}
.fr{
	float:right;}

/*.clear{
	clear:both;
	}*/
.clear { zoom:1; }   /* 兼容IE浏览器清除浮动 */
.clear:after { content:''; display:block; clear:both;font-size: 0; }

body{
	position: fixed;
	width: 100%;
	overflow:hidden;
}
.zoom1{
	zoom: 0.65;
}
/*nav*/
#nav-right{
	width: 89px;
	height: 421px;
	background: #2C2625 url("../img/menu-bg.png") no-repeat left center;
	background-size: 9px;
	position:fixed;
	left:0;
	top:50%;
	z-index:20;
}
#nav-right li{
	display: block;
	width: 100%;
	height: 49px;
	margin-bottom: 5px;
	line-height: 22px;
	text-align: right;
	font-size: 14px;
	color: rgba(229, 229, 229, .5);
	cursor:pointer;
	/*overflow: hidden;*/
	position: relative;
}
#nav-right li:hover{
	color: #ffe032;
}
#nav-right li:last-child:hover{color:rgba(229, 229, 229, .5); }

.nr-ul{
	margin-top: 23px;
	padding: 0;
	overflow: hidden;
}

/*section*/
#section{
	width:100%;
	height:100%;
	position:relative;
}
#list{
	height:100%;
	width:100%;
	position:absolute;
}
#section .cont{
	width:100%;
	height:100%;
	position: relative;
	overflow: hidden;
}

#cont1{
	background: #000;
	/*background: url("../img/bg1.jpg") no-repeat center;*/
	background-size: 100% auto;
}
#cont2{
	background: url("../img/bg2.jpg") no-repeat center;
	background-size: 100% auto;
}
#cont3{
	background: url("../img/bg3.jpg") no-repeat center;
	background-size: 100% auto;
}
#cont4{
	background: url("../img/bg4.jpg") no-repeat center;
	background-size: 100% auto;
}
#cont5{
	background: url("../img/bg5.jpg") no-repeat center;
	background-size: 100% auto;
}
#cont6{
	background: url("../img/bg6.jpg") no-repeat center;
	background-size: 100% auto;
}
/*.cont{
	background-position-y: top;
	transition: all 2.3s;
}
.cont.active{
	background-position-y: bottom;
}*/
.b1{
	position: absolute;
	left: 50%;
	top: 0;
	width: 18.43%;
	height: 100%;
	margin-left: -177px;
}
.p1-1{
	position: absolute;
	right: 45%;
	top: 14%;
	height: 48.42%;
	transition: all 1.2s;
	opacity: 0;
	transform: translateY(150px);
}
.active .p1-1{
	opacity: 1;
	transform: translateY(0);
}
.p1-2{
	position: absolute;
	left: 56%;
	top: 14%;
	height: 35.46%;
	transition: all 1.2s;
	opacity: 0;
	transform: translateY(-150px);
}
.active .p1-2{
	opacity: 1;
	transform: translateY(0);
}
.b2{
	position: absolute;
	width: 354px;
	top: 75%;
	left: 50%;
	margin-left: -177px;
}
.b2 img{
	float: left;
}
.p1-3,.p1-4,.p1-5{
	margin-right: 9px;

}
.p1-3,.p1-4,.p1-5,.p1-6{
	transition: all 1.2s;
	opacity: 0;
	transform: translateY(50px);
}
.p1-4{
	transition-delay: 0.3s;
}
.p1-5{
	transition-delay: 0.6s;
}
.p1-6{
	transition-delay: 0.9s;
}
.active .p1-3,.active .p1-4,.active .p1-5,.active .p1-6{
	opacity: 1;
	transform: translateY(0);
}
.down{
	position: absolute;
	bottom: 2%;
	left: 50%;
	margin-left: -27px;
}
.b21{
	position: absolute;
	width: 520px;
	height: 800px;
	left: 22%;
	top: 20%;
}
.p2-1{
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1.2s;
	opacity: 0;
	transform: translate(-60px,-50px);
}
.active .p2-1{
	opacity: 1;
	transform: translate(0);
}
.p2-2{
	position: absolute;
	left: 80px;
	top: 64px;
	transition: all 1.2s ;
	opacity: 0;
	transform: translate(0,220px);
}
.active .p2-2{
	opacity: 1;
	transform: translate(0);
}
.p2-3{
	position: absolute;
	left: 105px;
	top: -10px;
	transition: all 1.2s ;
	opacity: 0;
	transform: translate(0,-100px);
}
.active .p2-3{
	opacity: 1;
	transform: translate(0);
}
.b22{
	position: absolute;
	width: 321px;
	left: 191px;
	top: 97px;
}
.b22 img{
	width: 100%;
}
.p2-4_01{
	transition: all 1s 0.4s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_01{
	opacity: 1;
	transform: translate(0);
}

.p2-4_02{
	transition: all 1s 0.5s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_02{
	opacity: 1;
	transform: translate(0);
}
.active .p2-4_03{
	opacity: 1;
	transform: translate(0);
}
.p2-4_03{
	transition: all 1s 0.6s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_03{
	opacity: 1;
	transform: translate(0);
}
.p2-4_04{
	transition: all 1s 0.7s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_04{
	opacity: 1;
	transform: translate(0);
}
.p2-4_05{
	transition: all 1s 0.8s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_05{
	opacity: 1;
	transform: translate(0);
}
.p2-4_06{
	transition: all 1s 0.9s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_06{
	opacity: 1;
	transform: translate(0);
}
.p2-4_07{
	transition: all 1s 1s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_07{
	opacity: 1;
	transform: translate(0);
}
.p2-4_08{
	transition: all 1s 1.1s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_08{
	opacity: 1;
	transform: translate(0);
}
.p2-4_09{
	transition: all 1s 1.2s;
	opacity: 0;
	transform: translate(200px,0);
}
.active .p2-4_09{
	opacity: 1;
	transform: translate(0);
}
.b31{
	position: absolute;
	width: 520px;
	height: 800px;
	left: 48%;
	top: 38%;
}
.p3-1{
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1.2s;
	opacity: 0;
	transform: translate(-60px,-50px);
}
.active .p3-1{
	opacity: 1;
	transform: translate(0);
}
.p3-2{
	position: absolute;
	left: -22px;
	top: -75px;
	transition: all 1.2s ;
	opacity: 0;
	transform: translate(0,220px);
}
.active .p3-2{
	opacity: 1;
	transform: translate(0);
}
.p3-3{
	position: absolute;
	left: 60px;
	top: -106px;
	transition: all 1.2s ;
	opacity: 0;
	transform: translate(0,-100px);
}
.active .p3-3{
	opacity: 1;
	transform: translate(0);
}
.b32{
	position: absolute;
	width: 233px;
	left: 184px;
	top: 0px;
}
.b32 img{
	width: 100%;
}
.b41{
	position: absolute;
	width: 520px;
	height: 800px;
	left: 48%;
	top: 38%;
}
.b42{
	position: absolute;
	width: 274px;
	left: 191px;
	top: 97px;
}
.b42 img{
	width: 100%;
}

.b51{
	position: absolute;
	width: 520px;
	height: 800px;
	left: 48%;
	top: 22%;
}
.b52{
	position: absolute;
	width: 473px;
	left: 191px;
	top: 97px;
}
.b52 img{
	width: 100%;
}
.p5-3{
	position: absolute;
	left: 105px;
	top: 74px;
	transition: all 1.2s ;
	opacity: 0;
	transform: translate(0,-100px);
}
.active .p5-3{
	opacity: 1;
	transform: translate(0);
}
.b61{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 810px;
}
.p6-1{
	float: left;
	transition: all 1.2s ;
	opacity: 0;
	/*transform: translate(0,-100px);*/
}
.active .p6-1{
	opacity: 1;
	/*transform: translate(0);*/
}
.b62{
	float: left;
	width: 688px;
	margin-left: 45px;
}
.b62>img,.b63{
	width: 100%;
}
.address,.weibo,.more{
	float: left;
	margin-right: 40px;
}
.b63{
	margin-top: 30px;
}
.address{
	transition: all 1s 1s;
	opacity: 0;
	transform: translate(100px,0px);
}
.active .address{
	opacity: 1;
	transform: translate(0);
}
.weibo{
	transition: all 1s 1.1s;
	opacity: 0;
	transform: translate(100px,0px);
}
.active .weibo{
	opacity: 1;
	transform: translate(0);
}
.more{
	transition: all 1s 1.2s;
	opacity: 0;
	transform: translate(100px,0px);
}
.active .more{
	opacity: 1;
	transform: translate(0);
}

.line-box{
	position: fixed;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.line1-1{
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	top:0;
	opacity: 0;
	background: #353535;
	transition: all 2.3s;
}
.line1-2{
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	top:0;
	opacity:0;
	background: #353535;
	transition: all 2.3s;
}
.line1-3{
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	top:0;
	opacity:0;
	background: #353535;
	transition: all 2.3s;
}
.line1-4{
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	top:0;
	opacity:0;
	background: #353535;
	transition: all 2.3s;
}
.line1-5{
	 position: absolute;
	 width: 1px;
	 height: 100%;
	 left: 0;
	 top:0;
	 opacity:0;
	 background: #353535;
	transition: all 2.3s;
}
.line1-6{
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	top:0;
	opacity:0;
	background: #353535;
	transition: all 2.3s;
}
/*.line1-7{
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	top:0;
	opacity:0;
	background: #353535;
	transition: all 2.3s;
}*/
.a0 .line1-1,.a0 .line1-2,.a0 .line1-3,.a0 .line1-4,.a0 .line1-5,.a0 .line1-6,.a0 .line1-7{
	left: 0;
	opacity: 0;
}
.a1 .line1-1{
	left: 45%;
	opacity: 1;
	transition: all 2.3s 1.5s;
}
.a1 .line1-2{
	left: 47.5%;
	opacity:1;
	transition: all 2.3s 1.2s;
}
.a1 .line1-3{
	left: 50%;
	opacity:1;
	transition: all 2.3s 0.9s;
}
.a1 .line1-4{
	left: 52.5%;
	opacity:1;
	transition: all 2.3s 0.6s;
}
.a1 .line1-5{
	left: 55%;
	opacity:1;
	transition: all 2.3s 0.3s;
}
.a1 .line1-6{
	left: 57.5%;
	opacity:1;
	transition: all 2.3s;
}

.a2 .line1-1,.a3 .line1-1{
	left: 0;
	opacity: 1;
	background: #FFFFFF;
}
.a2 .line1-2,.a3 .line1-2{
	left: 20%;
	opacity:1;
	background: #FFFFFF;
}
.a2 .line1-3,.a3 .line1-3{
	left: 40%;
	opacity:1;
	background: #FFFFFF;
}
.a2 .line1-4,.a3 .line1-4{
	left: 60%;
	opacity:1;
	background: #FFFFFF;
}
.a2 .line1-5,.a3 .line1-5{
	left: 80%;
	opacity:1;
	background: #FFFFFF;
}
.a2 .line1-6,.a3 .line1-6{
	left: 99.9%;
	opacity:1;
	background: #FFFFFF;
}

.a4 .line1-1{
	left: 0;
	opacity: 1;
	background: #B0B1B4;
}
.a4 .line1-2{
	left: 16.6%;
	opacity:1;
	background: #B0B1B4;
}
.a4 .line1-3{
	left: 33.3%;
	opacity:1;
	background: #B0B1B4;
}
.a4 .line1-4{
	left: 50%;
	opacity:1;
	background: #B0B1B4;
}
.a4 .line1-5{
	left: 66.6%;
	opacity:1;
	background: #B0B1B4;
}
.a4 .line1-6{
	left: 83.3%;
	opacity:1;
	background: #B0B1B4;
}
.a4 .line1-7{
	left: 99.9%;
	opacity:1;
	background: #B0B1B4;
}


.line2-1{
	position: absolute;
	width: 1px;
	height: 0;
	left: 100%;
	top: 55.9%;
	background: #fff;
	transition: all 2.3s;
	transform: rotate(60deg);
	 transform-origin: top center;
}
.a2 .line2-1{
	opacity: 1;
	height: 88.1%;
}
.line2-2{
	position: absolute;
	width: 1px;
	height: 0;
	left: 100%;
	top: 15.9%;
	background: #fff;
	transition: all 2.3s;
	transform: rotate(60deg);
	transform-origin: top center;
}
.a2 .line2-2{
	opacity: 1;
	height: 221.1%;
}
.line2-3{
	position: absolute;
	width: 1px;
	height: 0;
	left: 79%;
	top: 0;
	background: #fff;
	transition: all 2.3s;
	transform: rotate(60deg);
	transform-origin: top center;
}
.a2 .line2-3{
	opacity: 1;
	height: 201.1%;
}
.line2-4{
	position: absolute;
	width: 1px;
	height: 0;
	left: 43%;
	top: 0;
	background: #fff;
	transition: all 2.3s;
	transform: rotate(60deg);
	transform-origin: top center;
}
.a2 .line2-4{
	opacity: 1;
	height: 140.1%;
}


.line3-1{
	position: absolute;
	width: 0;
	height: 1px ;
	left: 0;
	top: 25%;
	background: #fff;
	transition: all 2.3s;
	transform-origin: left center;
}
.a3 .line3-1{
	opacity: 1;
	width: 100%;
}
.line3-2{
	position: absolute;
	width: 0;
	height: 1px ;
	right: 0;
	top: 50%;
	background: #fff;
	transition: all 2.3s;
	transform-origin: right center;
}
.a3 .line3-2{
	opacity: 1;
	width: 100%;
}
.line3-3{
	position: absolute;
	width: 0;
	height: 1px ;
	left: 0;
	top: 75%;
	background: #fff;
	transition: all 2.3s;
	transform-origin: left center;
}
.a3 .line3-3{
	opacity: 1;
	width: 100%;
}

.line4-1{
	position: absolute;
	width: 0;
	height: 1px;
	left: 33.3%;
	top: 25.1%;
	background: #B0B1B4;
	transition: all 2.3s;
	transform: rotateZ(140deg);
	transform-origin: left center;
}
.line4-2{
	position: absolute;
	width: 0;
	height: 1px;
	left: 66.6%;
	top: 25.1%;
	background: #B0B1B4;
	transition: all 2.3s;
	transform: rotateZ(140deg);
	transform-origin: left center;
}
.line4-3{
	position: absolute;
	width: 0;
	height: 1px;
	left: 100%;
	top: 25.1%;
	background: #B0B1B4;
	transition: all 2.3s;
	transform: rotateZ(140deg);
	transform-origin: left center;
}
.line4-4{
	position: absolute;
	width: 0;
	height: 1px;
	left: 0;
	top: 25.1%;
	background: #B0B1B4;
	transition: all 2.3s;
	transform: rotateZ(40deg);
	transform-origin: left center;
}
.line4-5{
	position: absolute;
	width: 0;
	height: 1px;
	left: 33.3%;
	top: 25.1%;
	background: #B0B1B4;
	transition: all 2.3s;
	transform: rotateZ(40deg);
	transform-origin: left center;
}
.line4-6{
	position: absolute;
	width: 0;
	height: 1px;
	left: 66.6%;
	top: 25.1%;
	background: #B0B1B4;
	transition: all 2.3s;
	transform: rotateZ(40deg);
	transform-origin: left center;
}
.a4 .line4-1,.a4 .line4-2,.a4 .line4-3,.a4 .line4-4,.a4 .line4-5,.a4 .line4-6{
	width: 43.5%;
}
.cont *{
	z-index: 1;
}



#nav-right .default1{
	margin: 3px 0;
	display: none;
	position: relative;
}

.active1{
	position: absolute;
	top: 0px;
	left:0;
	display: none;
}
#nav-right.hover .default1{
	display: block;
}
.hover .active .active1{
	display: block;
}
#nav-right{
	width: 29px;
	transition: all 0.15s;
}
#nav-right:hover{
	width: 89px;
}

.home_default,.home_cur{
	position: absolute;
	left: 4px;
	top: 14px;
}
.home_cur{
	display: none;
}
.active .home_cur{
	display: block;
}
.nav-block{
	position: absolute;
	width: 8px;
	height: 56px;
	left: 1px;
	top: 0;
	background: #CADCEF;
	display: none;
}

.active .nav-block{
	display: block;
}
.hover .nav-block{
	display: none;
}
.active .home_default,.active .back_default{
	display: none;
}
.active .home_cur{
	display: block;
}
.back_default{
	position: absolute;
	left: 5px;
	top: 17px;
}
#video1{
	position: absolute;
	left: 50%;
	top: 50%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%,-50%);
}

.p5{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
}
.p5-2-4{
	position: absolute;
	width: 15%;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.p5-2-3{
	position: absolute;
	right: 19.1%;
	top: 50%;
	transform: rotateZ(45deg);
	background: url("../img/p5-2-3.png") no-repeat;
	background-size: 100% 100%;
	background-color: #2C2625;
	transition: all 0.2s;
	cursor: pointer;
}
.p5-2-2{
	position: absolute;
	right: 47.4%;
	top: 50%;
	transform: rotateZ(45deg);
	background: url("../img/p5-2-2.png") no-repeat;
	background-size: 100% 100%;
	background-color: #2C2625;
	transition: all 0.2s;
	cursor: pointer;
}
.p5-2-1{
	position: absolute;
	right: 75.7%;
	top: 50%;
	transform: rotateZ(45deg);
	background: url("../img/p5-2-1.png") no-repeat;
	background-size: 100% 100%;
	background-color: #2C2625;
	transition: all 0.2s;
	cursor: pointer;
}
.p5-2-1:hover,.p5-2-2:hover,.p5-2-3:hover{
	background-color: #E87800;
	z-index: 2;
}
.p5-3-1{
	position: absolute;
	width: 50%;
	top: -50%;
	left: 0;
}
.p5-3-2{
	position: absolute;
	width: 50%;
	top: -50%;
	left: 50%;
}
.p5-3-3{
	position: absolute;
	width: 50%;
	top: 0%;
	left: 100%;
}
.p5-3-4{
	position: absolute;
	width: 50%;
	top: 50%;
	left: 100%;
}
.p5-2-1:hover img,.p5-2-2:hover img,.p5-2-3:hover img{
	display: block;
}
.p5-2-1 img,.p5-2-2 img,.p5-2-3 img{
	transform: scale(1);
	transition: all 0.2s;
	z-index: 0;
	display: none;
}
.p5-2-1 img:hover,.p5-2-2 img:hover,.p5-2-3 img:hover{
	z-index: 2;
	transform: scale(1.1);
}
.p5-3-5{
	position: absolute;
	width: 50%;
	top: 50%;
	left: -50%;
}
.p5-3-6{
	position: absolute;
	width: 50%;
	top: 100%;
	left: 0%;
}
.p5-3-7{
	position: absolute;
	width: 50%;
	top: -50%;
	left: 50%;
}
.p5-3-8{
	position: absolute;
	width: 50%;
	top: 0%;
	left: 100%;
}
.p5-3-9{
	position: absolute;
	width: 50%;
	top: -50%;
	left: 50%;
}
.p5-3-10{
	position: absolute;
	width: 50%;
	top: 0%;
	left: 100%;
}
.p5-mask1,.p5-1-close{
	position: absolute;
	left: 0%;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
	background: rgba(0,0,0,0.3);
}
.p5-img-box{
	position: absolute;
	width:  auto;
	height: 80%;
	top: 10%;
	left: 50%;
	-webkit-transform: translateX(-50%);
}
.p5-mask-img{
	height: 100%;
}
.mask-close{
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}
.to{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
	animation: to 2s linear infinite;
}
@keyframes to {
	from{
		opacity: 1;
	}
	50%{
		opacity: 0.2;
	}
	to{
		opacity: 1;
	}
}


/*p2*/
.p2{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	justify-content:center;
	background: url(../img/bg2.jpg) no-repeat center;
	background-size: 100% auto;
}
.p2>div:nth-child(1){
	border-left: 1px solid #353535;
}
.p2>div{
	height: 100%;
	width: 100px;
	border-right: 1px solid #353535;
	text-align: center;
	vertical-align: middle;
	position: relative;
	transition: all 0.5s;
	background: rgba(255,255,255,0.15);
}
.p2-4-1,.p2-4-2,.p2-4-3,.p2-4-4{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
	opacity: 1;
	transition: all 0.5s;
}
.p2-4-5,.p2-4-6,.p2-4-7,.p2-4-8{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
	opacity: 0;
}
.p2>div:hover{
	width: 410px;
	background: transparent;
}
.p2>div:hover img:nth-child(1){
	opacity: 0;
	transition: all 0.5s;
}
.p2>div:hover img:nth-child(2){
	opacity: 1;
	transition: all 0.5s 0.5s;
}
.p2>div:nth-child(1) div{
	position: absolute;
	width: 1px;
	height: 100%;
	left: -1px;
}
.p2>div:nth-child(1) div:after{
	content: '';
	display: block;
	width: 1000px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: white;
	opacity: 0.15;
	border: none;
	pointer-events: none;
}
.p2>div:nth-child(4) div{
	position: absolute;
	width: 1px;
	height: 100%;
	right: -1px;
}
.p2>div:nth-child(4) div:after{
	content: '';
	display: block;
	width: 1000px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: white;
	opacity: 0.15;
	border: none;
	pointer-events: none;
}
