@charset "utf-8";
/**
 * 
 * 官网公共样式
 */


/* 阴影 */
.box-shadow{
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=8);/*for ie6,7,8*/
	background-color: #eee;
	-moz-box-shadow:0px 0px 8px #969696;/*firefox*/
	-webkit-box-shadow:0px 0px 8px #969696;/*webkit*/
	box-shadow:0px 0px 8px #969696;/*opera或ie9*/
	zoom: 1;
}

/* 滚动条 */
.scroll{
	overflow-x: hidden;
}
.scroll::-webkit-scrollbar{
	width:4px;
	height:4px;
}  
.scroll::-webkit-scrollbar-track{
	background:#cecece;
	border-radius:2px;
}  
.scroll::-webkit-scrollbar-thumb{
	background: #747474;
	border-radius:2px;
}  
.scroll::-webkit-scrollbar-corner{
	background: #e6e6e6;
}

/* 字体颜色 */
.white{color: #fff;}
.skyblue{color: #27b7f7;}

/* 位置变化 */
.left0{left: 0 !important;}


/* 特效effect */
.effect{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 背景图片 */
.swiper-container-banner .swiper-slide:first-child .swiper-lazy{
	background-image: url('../images/02_banner/4.jpg');
}

.swiper-container-banner .swiper-slide:last-child .swiper-lazy{
	background-image: url('../images/02_banner/1.jpg');
}


/* .swiper-container-project .swiper-slide:first-child .swiper-lazy{
	background-image: url('../images/05_project/1.jpg');
}

.swiper-container-project .swiper-slide:first-child .swiper-lazy{
	background-image: url('../images/05_project/5.jpg');
} */

/* 特效1 */
.effect-1 .window{
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: content-box;
	width: 800px;
	height: 350px;
	border: 2000px solid rgba(0, 0, 0, .4);
	-webkit-transform: translate(-35%, -35%);
	-ms-transform: translate(-35%, -35%);
	-o-transform: translate(-35%, -35%);
	transform: translate(-35%, -35%);
}

.effect-1 .window .corner,
.effect-1 .window .edge{
	position: absolute;
	width: 100%;
	height: 100%;
}

.effect-1 .window .corner li,
.effect-1 .window .edge li{
	position: absolute;
	width: 24px;
	height: 24px;
	border-style: solid;
	border-color: #27b7f7;
}

.effect-1 .border{
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: content-box;
	width: 600px;
	height: 410px;
	border: 1px dashed #27b7f7;
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;
	-webkit-transform: translate(-50%, -50%) scale(0);
	-ms-transform: translate(-50%, -50%) scale(0);
	-o-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
}

/* 角 */
.effect-1 .corner li:nth-child(1){border-width: 5px 0 0 5px; top: 0; left: 0;}
.effect-1 .corner li:nth-child(2){border-width: 5px 5px 0 0; top: 0; right: 0;}
.effect-1 .corner li:nth-child(3){border-width: 0 5px 5px 0; bottom: 0; right: 0;}
.effect-1 .corner li:nth-child(4){border-width: 0 0 5px 5px; bottom: 0; left: 0;}

/* 边 */
.effect-1 .edge li{margin: auto;}
.effect-1 .edge li:nth-child(1){border-width: 5px 0 0 0; top: 0; left: 0; right: 0;}
.effect-1 .edge li:nth-child(2){border-width: 0 5px 0 0; top: 0; right: 0; bottom: 0;}
.effect-1 .edge li:nth-child(3){border-width: 0 0 5px 0; bottom: 0; right: 0; left: 0;}
.effect-1 .edge li:nth-child(4){border-width: 0 0 0 5px; bottom: 0; left: 0; top: 0;}

/* 特效2 */
.effect-2 .window{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 500%;
	margin: auto;
	background-color: rgba(0, 0, 0, .2);
}

.effect-2 .window:nth-child(1){
	-webkit-transform: translate(-150%, 0) rotate(45deg);
	-ms-transform: translate(-150%, 0) rotate(45deg);
	-o-transform: translate(-150%, 0) rotate(45deg);
	transform: translate(-150%, 0) rotate(45deg);
}

.effect-2 .window:nth-child(2){
	-webkit-transform: translate(150%, 0) rotate(45deg);
	-ms-transform: translate(150%, 0) rotate(45deg);
	-o-transform: translate(150%, 0) rotate(45deg);
	transform: translate(150%, 0) rotate(45deg);
}

/* 特效3 */
.effect-3 .window{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .4);
	-webkit-transform: translate(100%, 0%);
	-ms-transform: translate(100%, 0%);
	-o-transform: translate(100%, 0%);
	transform: translate(100%, 0%);
}

/* 特效4 */
.effect-4 .window{
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 50%;
	background-color: rgba(0, 0, 0, .2);
	-webkit-transform: translate(-25%, 50%) rotate(-75deg) rotateX(90deg);
	-ms-transform: translate(-25%, 50%) rotate(-75deg) rotateX(90deg);
	-o-transform: translate(-25%, 50%) rotate(-75deg) rotateX(90deg);
	transform: translate(-25%, 50%) rotate(-75deg) rotateX(90deg);
}


/* 变化后的特效1 */
.eff1-win-active{
	-webkit-transform: translate(-50%, -50%) !important;
	-ms-transform: translate(-50%, -50%) !important;
	-o-transform: translate(-50%, -50%) !important;
	transform: translate(-50%, -50%) !important;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: .7s;
	-o-transition-delay: .7s;
	transition-delay: .7s;
}

.eff1-bor-active{
	-webkit-transform: translate(-50%, -50%) scale(1) !important;
	-ms-transform: translate(-50%, -50%) scale(1) !important;
	-o-transform: translate(-50%, -50%) scale(1) !important;
	transform: translate(-50%, -50%) scale(1) !important;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s;
}

/* 变化后的特效2 */
.eff2-win1-active{
	-webkit-transform: translate(-20%, 0) rotate(45deg) !important;
	-ms-transform: translate(-20%, 0) rotate(45deg) !important;
	-o-transform: translate(-20%, 0) rotate(45deg) !important;
	transform: translate(-20%, 0) rotate(45deg) !important;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: .8s;
	-o-transition-delay: .8s;
	transition-delay: .8s;
}

.eff2-win2-active{
	-webkit-transform: translate(20%, 0) rotate(45deg) !important;
	-ms-transform: translate(20%, 0) rotate(45deg) !important;
	-o-transform: translate(20%, 0) rotate(45deg) !important;
	transform: translate(20%, 0) rotate(45deg) !important;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: .8s;
	-o-transition-delay: .8s;
	transition-delay: .8s;
}

/* 变化后的特效3 */
.eff3-win-active{
	-webkit-transform: translate(50%, 0%) !important;
	-ms-transform: translate(50%, 0%) !important;
	-o-transform: translate(50%, 0%) !important;
	transform: translate(50%, 0%) !important;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: .8s;
	-o-transition-delay: .8s;
	transition-delay: .8s;
}

/* 变化后的特效4 */
.eff4-win-active{
	-webkit-transform: translate(-25%, 50%) rotate(15deg) rotateX(0) !important;
	-ms-transform: translate(-25%, 50%) rotate(15deg) rotateX(0) !important;
	-o-transform: translate(-25%, 50%) rotate(15deg) rotateX(0) !important;
	transform: translate(-25%, 50%) rotate(15deg) rotateX(0) !important;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: .8s;
	-o-transition-delay: .8s;
	transition-delay: .8s;
}


/* animation */
	/* 上下循环运动 */
.ain-jump{
	-webkit-animation: jump 1s linear infinite alternate;
	-moz-animation:jump 1s linear infinite alternate;
	-o-animation: jump 1s linear infinite alternate;
	animation: jump 1s linear infinite alternate;
}

.ain-jump:hover{
  	-webkit-animation-play-state: paused;
  	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
  	animation-play-state: paused;
}

@keyframes jump {
	from {
		top: 88%;
		opacity: .3;
	}

	to {
		top: 90%;
		opacity: .8;
	}
}


	/* 左右抖动 */
.jitter:hover{
	-webkit-animation: jitter 1s ease;
	-moz-animation: jitter 1s ease;
	-o-animation: jitter 1s ease;
	animation: jitter 1s ease;
}

@keyframes jitter {
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);}
	10%,20%{
		-webkit-transform:scale(0.9) rotate(-3deg);
		transform:scale(0.9) rotate(-3deg);}	
	30%,50%,70%,90%{
		-webkit-transform:scale(1.1) rotate(3deg);
		transform:scale(1.1) rotate(3deg);}
	40%,60%,80%{
		-webkit-transform:scale(1.1) rotate(-3deg);
		transform:scale(1.1) rotate(-3deg);}
	100%{
		-webkit-transform:scale(1) rotate(0);
		transform:scale(1) rotate(0);}
}




/* .swiper-container-main > .swiper-wrapper section:nth-child(1){background-color: skyblue;} */
/* .swiper-container-main > .swiper-wrapper section:nth-child(2){background-color: blue;} */
/* .swiper-container-main > .swiper-wrapper section:nth-child(3){background-color: gray;} */
/* .swiper-container-main > .swiper-wrapper section:nth-child(4){background-color: gray;} */
/* .swiper-container-main > .swiper-wrapper section:nth-child(5){background-color: gray;} */
/* .swiper-container-main > .swiper-wrapper section:nth-child(6){background-color: gray;} */

/*.swiper-container-banner ul li:nth-child(1){background-color: pink;}/* 4 */
/*.swiper-container-banner ul li:nth-child(2){background-color: red;}/* 1 */
/*.swiper-container-banner ul li:nth-child(3){background-color: yellow;}/* 2 */
/*.swiper-container-banner ul li:nth-child(4){background-color: violet;}/* 3 */
/*.swiper-container-banner ul li:nth-child(5){background-color: pink;}/* 4 */
/*.swiper-container-banner ul li:nth-child(6){background-color: red;}/* 1 */