.xmfshow-view { height:990px; background:url(./1-0.jpg) center center no-repeat #FBD554; background-size:cover; position:relative; }
.xmfshow-view > * { position:absolute; left:50%; }
.xmfshow-view .phone { width:324px; height:580px; padding:115px 0 0 45px; background:url(./1-1.png) 0 0 no-repeat; top:90px; margin:0 0 0 130px; }
.xmfshow-view .phone img { display:block; width:276px; height:471px; }
.xmfshow-view .headset { width:138px; height:250px; background:url(./1-3.png) 0 0 no-repeat; top:0; margin:0 0 0 480px; }
.xmfshow-view .headset img { position:absolute; left:5px; bottom:-173px; }
.xmfshow-view .cloud1 { top:140px; margin:0 0 0 -600px; -webkit-animation:10s ease-in-out 3s alternate none infinite running small-cloud-animation-3; animation:10s ease-in-out 3s alternate none infinite running small-cloud-animation-3; }
.xmfshow-view .cloud2 { top:50px; margin:0 0 0 -400px; -webkit-animation:10s ease-in-out 2s alternate none infinite running small-cloud-animation-2; animation:10s ease-in-out 2s alternate none infinite running small-cloud-animation-2; }
.xmfshow-view .cloud3 { top:100px; margin:0 0 0 -100px; -webkit-animation:10s ease-in-out 2s alternate none infinite running small-cloud-animation-1; animation:10s ease-in-out 2s alternate none infinite running small-cloud-animation-1; }
.xmfshow-view .cloud4 { width:100%; height:220px; left:0; bottom:0; overflow:hidden; z-index:5; }
.xmfshow-view .cloud4 img { display:block; width:3848px; height:218px; -webkit-animation:cloud-move 24s linear infinite; animation:cloud-move 24s linear infinite; }
.xmfshow-view .title { top:260px; margin:0 0 0 -580px; }
.xmfshow-view .windmill { width:60px; height:240px; background:url(./1-10.png) center 0 no-repeat; bottom:80px; margin:0 0 0 -90px; z-index:2; }
.xmfshow-view .windmill img { position:absolute; left:-140px; top:-170px; width:340px; height:340px; -webkit-animation:windmill-rotate 5s linear infinite; animation:windmill-rotate 5s linear infinite; }
.xmfshow-view .dot { width:18px; height:18px; background:#ffc83c; border-radius:50%; z-index:1; }
.xmfshow-view .dot1 { margin:0 0 0 -390px; bottom:220px; -webkit-animation:0.8s linear 0s alternate none infinite running windmill-dot-animation; }
.xmfshow-view .dot2 { margin:0 0 0 -330px; bottom:250px; -webkit-animation:0.8s linear 0.3s alternate none infinite running windmill-dot-animation; }
.xmfshow-view .dot3 { margin:0 0 0 -270px; bottom:220px; -webkit-animation:0.8s linear 0.6s alternate none infinite running windmill-dot-animation; }
.xmfshow-view .dot4 { margin:0 0 0 -210px; bottom:250px; -webkit-animation:0.8s linear 0.9s alternate none infinite running windmill-dot-animation; }
.xmfshow-view .dot5 { margin:0 0 0 -150px; bottom:220px; -webkit-animation:0.8s linear 1.2s alternate none infinite running windmill-dot-animation; }

.xmfshow-advantage { padding:60px 0 0; background:url(./2-0.png) center center repeat #efefef; }
.xmfshow-advantage .head { text-align:center; margin-bottom:50px; }
.xmfshow-advantage .head img { height:70px; }
.xmfshow-advantage .main { position:relative; height:700px; overflow:hidden; }
.xmfshow-advantage .prev,
.xmfshow-advantage .next { position:absolute; top:300px; width:60px; height:130px; background:url(./2-2.png) 0 0 no-repeat; cursor:pointer; display:none; }
.xmfshow-advantage .prev { left:60px; background-position:0 0; }
.xmfshow-advantage .next { right:60px; background-position:-60px -130px; }
.xmfshow-advantage .prev:hover { background-position:-60px 0; }
.xmfshow-advantage .next:hover { background-position:0 -130px; }
.xmfshow-advantage .list { height:700px; }
.xmfshow-advantage .list dd { position:absolute; left:0; top:0; width:100%; height:700px; display:none; }
.xmfshow-advantage .list dd:first-child { display:block; }
.xmfshow-advantage .list img { display:block; }

.xmfshow-adv-1 { }
.xmfshow-adv-1 .title { position:absolute; left:0; top:250px; }
.xmfshow-adv-1 .phone { position:absolute; right:0; bottom:0px; }
.xmfshow-adv-1 .dot { position:absolute; }
.xmfshow-adv-1 .dot-1 { right:600px; bottom:100px; }
.xmfshow-adv-1 .dot-2 { right:650px; bottom:200px; }
.xmfshow-adv-1 .dot-3 { right:650px; bottom:300px; }
.xmfshow-adv-1 .dot-4 { right:620px; bottom:400px; }
.xmfshow-adv-1 .dot-5 { right:570px; bottom:500px; }
.xmfshow-adv-1 .dot-6 { right:470px; bottom:550px; }
.xmfshow-adv-1 .dot-7 { right:360px; bottom:550px; }
.xmfshow-adv-1 .dot-8 { right:260px; bottom:550px; }
.xmfshow-adv-1 .dot-9 { right:160px; bottom:500px; }
.xmfshow-adv-1 .dot-10 { right:80px; bottom:420px; }
.xmfshow-adv-1 .dot-11 { right:30px; bottom:320px; }

.xmfshow-adv-2 { }
.xmfshow-adv-2 .title { position:absolute; left:0; top:250px; }
.xmfshow-adv-2 .phone { position:absolute; right:0; bottom:0px; }

.xmfshow-adv-3 { }
.xmfshow-adv-3 .title { position:absolute; left:0; top:250px; }
.xmfshow-adv-3 .phone { position:absolute; right:0; bottom:0px; }

.xmfshow-adv-4 {  }
.xmfshow-adv-4 .title { position:absolute; left:0; top:250px; }
.xmfshow-adv-4 .phone { position:absolute; right:0; bottom:0px; }


.xmfshow-case { height:900px; padding:95px 0 0; background:url(./3-0.jpg) center center no-repeat #292929; background-size:cover; border-bottom:200px solid #f4f4f4;  }
.xmfshow-case .head { text-align:center; margin-bottom:50px; }
.xmfshow-case .head img { height:70px; }
.xmfshow-case .menu { height:45px; text-align:center; margin-bottom:60px; }
.xmfshow-case .menu li { display:inline-block; +display:inline; +zoom:1; font-size:16px; color:#ccc; padding:0 30px; margin:0 15px; cursor:pointer; }
.xmfshow-case .menu li.current { height:45px; line-height:45px; background:#fbd657; color:#333; border-radius:30px; }
.xmfshow-case .main { width:1200px; margin:0 auto 40px; }
.xmfshow-case .list { width:100%; display:none; }
.xmfshow-case .list:first-child { display:block; }
.xmfshow-case .list dd { float:left; width:299px; height:252px; position:relative; border:1px solid #000; margin:0 -1px -1px 0; }
.xmfshow-case .list .img { display:block; width:300px; height:252px; }
.xmfshow-case .list .shadow { position:absolute; left:0; top:0; right:0; bottom:0; z-index:2; background:#fbd657; display:none; overflow:hidden; }
.xmfshow-case .list .shadow img { display:block; width:120px; height:120px; padding:10px; background:#FFF; margin:40px auto 0; -webkit-animation:fade-in-down .5s ease both; animation:fade-in-down .5s ease both; }
.xmfshow-case .list .shadow h3 { text-align:center; font-size:16px; font-weight:normal; line-height:40px; -webkit-animation:fade-in-up .5s ease both; }
.xmfshow-case .list dd:hover .shadow { display:block; }
.xmfshow-case .more { }
.xmfshow-case .more a { display:block; margin:0 auto; width:180px; height:60px; line-height:60px; border-radius:30px; border:2px solid #fbd75c; color:#fbd75c; font-size:18px; text-align:center; }
.xmfshow-case .more a:hover { width:240px; background:#fbd75c; color:#333; }





@-webkit-keyframes fade-in-up {
	0% {
		-webkit-transform: translateY(50px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@keyframes fade-in-up {
	0% {
		-webkit-transform: translateY(50px);
		   -moz-transform: translateY(50px);
			-ms-transform: translateY(50px);
				transform: translateY(50px);
	}
	100% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
	}
}

@-webkit-keyframes fade-in-down {
	0% {
		-webkit-transform: translateY(-250px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@keyframes fade-in-down {
	0% {
		-webkit-transform: translateY(-250px);
		   -moz-transform: translateY(-250px);
			-ms-transform: translateY(-250px);
				transform: translateY(-250px);
	}
	100% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
	}
}

@-webkit-keyframes cloud-move {
	0% {
		-webkit-transform: translateX(0px);
	}
	100% {
		-webkit-transform: translateX(-1924px);
	}
}
@keyframes cloud-move {
	0% {
		-webkit-transform: translateX(0px);
		   -moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
				transform: translateX(0px);
	}
	100% {
		-webkit-transform: translateX(-1924px);
		   -moz-transform: translateX(-1924px);
			-ms-transform: translateX(-1924px);
				transform: translateX(-1924px);
	}
}

@-webkit-keyframes windmill-rotate {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes windmill-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
				transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		   -moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
				transform: rotate(360deg);
	}
}

@-webkit-keyframes small-cloud-animation-1 {
	0%, 20% {
		-webkit-transform: translateX(0px);
	}
	80%, 100% {
		-webkit-transform: translateX(-120px);
	}
}
@keyframes small-cloud-animation-1 {
	0%, 20% {
		-webkit-transform: translateX(0px);
		   -moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
				transform: translateX(0px);
	}
	80%, 100% {
		-webkit-transform: translateX(-120px);
		   -moz-transform: translateX(-120px);
			-ms-transform: translateX(-120px);
				transform: translateX(-120px);
	}
}

@-webkit-keyframes small-cloud-animation-2 {
	0%, 20% {
		-webkit-transform: translateX(0px);
	}
	80%, 100% {
		-webkit-transform: translateX(-80px);
	}
}
@keyframes small-cloud-animation-2 {
	0%, 20% {
		-webkit-transform: translateX(0px);
		   -moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
				transform: translateX(0px);
	}
	80%, 100% {
		-webkit-transform: translateX(-80px);
		   -moz-transform: translateX(-80px);
			-ms-transform: translateX(-80px);
				transform: translateX(-80px);
	}
}

@-webkit-keyframes small-cloud-animation-3 {
	0%, 20% {
		-webkit-transform: translateX(0px);
	}
	80%, 100% {
		-webkit-transform: translateX(-40px);
	}
}
@keyframes small-cloud-animation-3 {
	0%, 20% {
		-webkit-transform: translateX(0px);
		   -moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
				transform: translateX(0px);
	}
	80%, 100% {
		-webkit-transform: translateX(-40px);
		   -moz-transform: translateX(-40px);
			-ms-transform: translateX(-40px);
				transform: translateX(-40px);
	}
}

@-webkit-keyframes windmill-dot-animation {
	0%, 20% {
		-webkit-transform: scale3d(1, 1, 1);
	}
	80%, 100% {
		-webkit-transform: scale3d(0.2, 0.2, 0.2);
	}
}
@keyframes windmill-dot-animation {
	0%, 20% {
		-webkit-transform: scale3d(1, 1, 1);
		   -moz-transform: scale3d(1, 1, 1);
			-ms-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1);
	}
	80%, 100% {
		-webkit-transform: scale3d(0.2, 0.2, 0.2);
		   -moz-transform: scale3d(0.2, 0.2, 0.2);
			-ms-transform: scale3d(0.2, 0.2, 0.2);
				transform: scale3d(0.2, 0.2, 0.2);
	}
}