/* 首页Banner */
.bg{width:100%;background:url(../images/bg.jpg) no-repeat;position: relative;background-size:cover; background-position: center center;}
/* 星球 */
.starstar{ width: 12%; position: absolute; left: 98%; top: -21%; animation: floatLeft 10s linear alternate infinite; -moz-animation: floatLeft 10s linear alternate infinite; -ms-animation: floatLeft 10s linear alternate infinite; -webkit-animation: floatLeft 10s linear alternate infinite;}

.island{width:100%; text-align: center; height: 100%;}

/* 流水 */

/* 塔 */
.pagoda{ width: 13.333%; position: absolute; left: 17.5%; top: 4.4%; z-index: 2;}
.pagode_mask{ width: 12.6%; position: absolute; left: 17.5%; top: 4.6%; z-index: 5;}
.pagode_mask2{ position: absolute; width: 12.6%; left: 17%; top: 4%; z-index: 4;}

.conveyor_h{ width: 52%; position: absolute; left: 23.8%; top: 15%; z-index: 3;}
.pagoda_r{ width: 11.58333%; position: absolute; right: 19.5%; top: -10.5%; z-index: 2;}
.gear1{ width: 25%; position: absolute; right: 18%; top: 48%; animation: circle 3s infinite linear; -moz-animation: circle 3s infinite linear; -webkit-animation: circle 3s infinite linear; -ms-animation: circle 3s infinite linear;}
.gear2{ width: 15%; position: absolute; right: 23%; top: 60%;animation: circle 3s infinite linear; -moz-animation: circle 3s infinite linear; -webkit-animation: circle 3s infinite linear; -ms-animation: circle 3s infinite linear;}
.iphone6{ width: 142%; position: absolute; left: -25%; top: -2%; z-index: 4;}
/* 开门 */
.door_1{ width: 65%; position: absolute; left: 5%; top: 65.2%; animation: opendoor 5s 3.5s linear infinite;}
/* 红旗飘飘 */
.flag_s{width: 4%; position: absolute; left: 22.9%; top: -2%; z-index: 5;}

.people5{ width: 6%;height: 7%; background: url(../images/3w_plus.png); background-position: 0% 0%; background-size: 100% auto; position: absolute; left: 52%; top: 50%;  animation: up 5s  linear infinite; z-index: 4; -moz-animation: up 5s  linear infinite; -ms-animation: up 5s  linear infinite; -webkit-animation: up 5s  linear infinite;}

/* 阴影 */
.shadow{ width: 88%; position: absolute; left: 11.5%; top: 6%;}
/* 控制台 */
.console{ width: 49.08%; position: absolute; top: -13.5%; left: 17.1%; z-index: 2;}
.rush{ width: 10%; position: absolute; left: 88.3%; top: 8%;}
.dou{ width: 43%; position: absolute; left: 53%; top: 7%;}

.lighting{ width: 11%; position: absolute; left: 38%; top: 17%; opacity: 0; animation: lighting 2s linear infinite alternate; z-index: 9; -moz-animation: lighting 2s linear infinite alternate; -webkit-animation: lighting 2s linear infinite alternate; -ms-animation: lighting 2s linear infinite alternate;}
.people7{ width: 13%; position: absolute; left: 65%; top: 1%;}
.erji_qian{ width: 8%; position: absolute; left: 69.5%; top: 1%; animation: erji_box 1s linear infinite alternate; -moz-animation: erji_box 1s linear infinite alternate; -ms-animation: erji_box 1s linear infinite alternate; -webkit-animation: erji_box 1s linear infinite alternate;}
.erji_hou{ width: 8%; position: absolute; left: 69%; top: 1%; animation: erji_box 1s linear infinite alternate; -moz-animation: erji_box 1s linear infinite alternate; -ms-animation: erji_box 1s linear infinite alternate; -webkit-animation: erji_box 1s linear infinite alternate;}
.yanjing1{ width: 0.8%; position: absolute; left: 70.5%; top: 15%; animation: yanjing1 0.5s linear infinite alternate; -moz-animation: yanjing1 0.5s linear infinite alternate; -ms-animation: yanjing1 0.5s linear infinite alternate; -webkit-animation: yanjing1 0.5s linear infinite alternate;}



.glass{ width: 31%; position: absolute; left: 59%; top: -11%;}
.imac{ width: 7%; position: absolute; left: 75%; top: 20%;}
.console_mask{ width: 16%; position: absolute; left: 33%; top: -4%; z-index: 4;}
/* 火箭发射台 */
.launch{ width: 9.583%; position: absolute; top: -7.5%; right: 27.7%; z-index: 1;}
.rocket{ width: 27%; position: absolute; left: 36%; top: 11%; z-index: 1; animation: rocket_up 3s 10s infinite; -ms-animation: rocket_up 3s 10s infinite; -webkit-animation: rocket_up 3s 10s infinite; -moz-animation: rocket_up 3s 10s infinite;}

.launch_mask{ width: 100%; position: absolute; left: -3%; top: 0%; z-index: 1;}

.conveyor_hou{ width: 12%; position: absolute; left: 68.6%; top: 4%; z-index: 1;}
.tree1{ width: 9%; position: absolute; left: 86%; top: 14%;}
.people1{ width: 5.8%; position: absolute; left: 79.1%; top: 8%; z-index: 4; transform-origin: bottom center; animation: people1_rotate 3s linear infinite alternate;}
.yanzhuzi1{ width: 20%; position: absolute; left: 52%; top: 17%; animation: yanzhuzi_rotate 5s linear infinite; transform-origin: center 25%; -moz-animation: yanzhuzi_rotate 5s linear infinite; -ms-animation: yanzhuzi_rotate 5s linear infinite; -webkit-animation: yanzhuzi_rotate 5s linear infinite; -webkit-transform-origin: 50% 34%; transform-origin: 50% 34%;-moz-transform-origin: 50% 34%; -ms-transform-origin: 50% 34%;}
.yanzhuzi2{ width: 20%; position: absolute; left: 18%; top: 18%;animation: yanzhuzi_rotate 5s linear infinite; transform-origin: center 25%;  -moz-animation: yanzhuzi_rotate 5s linear infinite; -ms-animation: yanzhuzi_rotate 5s linear infinite; -webkit-animation: yanzhuzi_rotate 5s linear infinite; -webkit-transform-origin: 50% 34%; transform-origin: 50% 34%;-moz-transform-origin: 50% 34%; -ms-transform-origin: 50% 34%;}


.orange_logo{ width: 48%; position: absolute; left: 23.5%; top: 65%; z-index: 6;}
.gear3{ width: 5%; position: absolute; left: 60.5%; top: 65%; z-index: 6; animation: circle 3s infinite linear; -moz-animation: circle 3s infinite linear; -webkit-animation: circle 3s infinite linear; -ms-animation: circle 3s infinite linear; transform-origin: 46% 49%; -moz-transform-origin: 46% 49%;-webkit-transform-origin: 46% 49%; -ms-transform-origin: 46% 49%;}
.gear3_show{ width: 5%; position: absolute; left: 60.8%; top: 66.5%; z-index: 2; }
.gear4{ width: 3%; position: absolute; left: 67%; top: 66.9%; z-index: 3; animation: circle 3s infinite linear; -moz-animation: circle 3s infinite linear; -webkit-animation: circle 3s infinite linear; -ms-animation: circle 3s infinite linear; transform-origin: 50.5% 50.7%; -moz-transform-origin: 50.5% 50.7%;-webkit-transform-origin: 50.5% 50.7%; -ms-transform-origin: 50.5% 50.7%;}
.people2{ width: 20%; position: absolute; left: 68.9%; top: 70.2%; z-index: 1; transform-origin: top left; animation: people_rotate 3s infinite linear alternate; -moz-animation: people_rotate 3s infinite linear alternate; -ms-animation: people_rotate 3s infinite linear alternate; -webkit-animation: people_rotate 3s infinite linear alternate;}
.p_people{width: 58%; position: absolute; left: 37.6%; top: 53.7%; }
.indicator{ width: 8%; position: absolute; left: 59.6%; top: 30.8%; z-index: 3;}
.tree2{ width: 5%; position: absolute; left: 46%; top: 20%; z-index: 5;}
.tree3{ width: 5%; position: absolute;left: 42%; top: -6%;}
.tree4{ width: 8.1%; position: absolute; left: 11.2%; top: 15.8%;}
.people3{ width: 9%; position: absolute; left: 14.8%; top: 3%; z-index: 5;}
.toufa{ width: 90%; position: absolute; left: -2%; top: 3%;}
.people3_hand{ width: 29%; position: absolute; left: -3%; top: 30%; transform-origin: right bottom; animation: hand_rotate 5s linear infinite alternate; transform: rotate(-30deg); -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; -ms-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-animation: hand_rotate 5s linear infinite alternate; transform: rotate(-30deg); -ms-animation: hand_rotate 5s linear infinite alternate; transform: rotate(-30deg); -webkit-animation: hand_rotate 5s linear infinite alternate; transform: rotate(-30deg);}


.people4{ width: 4%; position: absolute; left: 54%; top: 23%; z-index: 2;}
.island_mask{ width: 19.6%; position: absolute; left: 42%; top: 58.5%; z-index: 5;}

.people6{ width: 12%; position: absolute; left: 1.5%; top: 17%;}
.fishing{ width: 17%; position: absolute; left: -14%; top: 52%; transform-origin: right top; animation: fishing_rotate 5s linear alternate infinite; -moz-animation: fishing_rotate 5s linear alternate infinite; -ms-animation: fishing_rotate 5s linear alternate infinite; -webkit-animation: fishing_rotate 5s linear alternate infinite;}

.iphone6_mask{ width: 10.7%; position: absolute; left: 66.5%; top: 5.3%; z-index: 5;}

.people8{ width: 8%; position: absolute; left: 36%; top: 20%; z-index: 4;}
.people9{ width: 5%; position: absolute; left: 31%; top: 22%; z-index: 4;}
.eye1{ width: 7%; position: absolute; left: 27%; top: 47%; animation: eye_rotate1 2s linear infinite alternate; -moz-animation: eye_rotate1 2s linear infinite alternate; -ms-animation: eye_rotate1 2s linear infinite alternate; -webkit-animation: eye_rotate1 2s linear infinite alternate;}
.eye2{ width: 7%; position: absolute; left: 55%; top: 47%; animation: eye_rotate1 2s linear infinite alternate; -moz-animation: eye_rotate1 2s linear infinite alternate; -ms-animation: eye_rotate1 2s linear infinite alternate; -webkit-animation: eye_rotate1 2s linear infinite alternate;}
.eye3{ width: 5%; position: absolute; left: 31%; top: 54%; animation: eye_rotate2 2s 3s linear infinite alternate;  -moz-animation: eye_rotate2 2s 3s linear infinite alternate; -ms-animation: eye_rotate2 2s 3s linear infinite alternate; -webkit-animation: eye_rotate2 2s 3s linear infinite alternate;}
.eye4{ width: 6%; position: absolute; left: 50%; top: 54%; animation: eye_rotate2 2s 3s linear infinite alternate;  -moz-animation: eye_rotate2 2s 3s linear infinite alternate; -ms-animation: eye_rotate2 2s 3s linear infinite alternate; -webkit-animation: eye_rotate2 2s 3s linear infinite alternate;}



.hand1{ width: 45%; position: absolute; left: 35%; top: 64%; transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; animation: hand_rotate 1s 0.2s linear infinite alternate; -moz-animation: hand_rotate 1s 0.2s linear infinite alternate; -ms-animation: hand_rotate 1s 0.2s linear infinite alternate; -webkit-animation: hand_rotate 1s 0.2s linear infinite alternate;}

.hand2{ width: 2%; position: absolute; left: 30.5%; top: 28%; transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; animation: hand_rotate 1s 0.2s linear infinite alternate; -moz-animation: hand_rotate 1s 0.2s linear infinite alternate; -ms-animation: hand_rotate 1s 0.2s linear infinite alternate; -webkit-animation: hand_rotate 1s 0.2s linear infinite alternate;}

.hand3{ width: 41%; position: absolute; left: 32.5%; top: 68%; transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; animation: hand_rotate 1s 0.5s  linear infinite alternate; -moz-animation: hand_rotate 1s 0.5s  linear infinite alternate; -ms-animation: hand_rotate 1s 0.5s  linear infinite alternate; -webkit-animation: hand_rotate 1s 0.5s  linear infinite alternate;}

.hand4{ width: 2%; position: absolute; left: 35.4%; top: 31%;transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; animation: hand_rotate 1s 0.5s  linear infinite alternate; -moz-animation: hand_rotate 1s 0.5s linear infinite alternate; -ms-animation: hand_rotate 1s 0.5s  linear infinite alternate; -webkit-animation: hand_rotate 1s 0.5s  linear infinite alternate;}



/* gif */
.windmill{ width: 15%; position: absolute; left: -3%; top: -28%; animation: floatUp1 3s linear infinite alternate; -moz-animation: floatUp1 3s linear infinite alternate; -ms-animation: floatUp1 3s linear infinite alternate; -webkit-animation: floatUp1 3s linear infinite alternate;}
.windmill_w{ width: 15%; position: absolute; left: -15%; top: -26%; animation: floatUp2 3s linear infinite alternate; -ms-animation: floatUp2 3s linear infinite alternate; -moz-animation: floatUp2 3s linear infinite alternate; -webkit-animation: floatUp2 3s linear infinite alternate;}

.run_box{background: url(../images/box_plus.png);background-position: 0% 0%;  background-size: 100% auto; width: 4.2%; height: 6%; position: absolute; left: 19%; top: 20%; z-index: 4; animation: run 8s linear forwards infinite; -moz-animation: run 8s linear forwards infinite; -ms-animation: run 8s linear forwards infinite; -webkit-animation: run 8s linear forwards infinite;}
.run_box2{ width: 1%; position: absolute; left: 44%; top: 5.6%; z-index: 2; animation: run2 3s linear forwards infinite; -moz-animation: run2 3s linear forwards infinite; -webkit-animation: run2 3s linear forwards infinite; -ms-animation: run2 3s linear forwards infinite;}
.run_box3{ background: url(../images/box_plus.png);background-position: 0% 0%;  background-size: 100% auto;width: 4.2%;height: 6%; position: absolute; left: 19%; top: 20%; z-index: 4; animation: run 8s 2s linear forwards infinite; -moz-animation: run 8s 2s linear forwards infinite; -ms-animation: run 8s 2s linear forwards infinite; -webkit-animation: run 8s 2s linear forwards infinite;}
.run_box4{background: url(../images/box_plus.png);background-position: 0% 0%;  background-size: 100% auto; width: 4.2%;height: 6%; position: absolute; left: 19%; top: 20%; z-index: 4; animation: run 8s 4s linear forwards infinite; -moz-animation: run 8s 4s linear forwards infinite; -ms-animation: run 8s 4s linear forwards infinite; -webkit-animation: run 8s 4s linear forwards infinite;}
.run_box5{background: url(../images/box_plus.png);background-position: 0% 0%;  background-size: 100% auto; width: 4.2%;height: 6%; position: absolute; left: 19%; top: 20%; z-index: 4; animation: run 8s 6s linear forwards infinite; -moz-animation: run 8s 6s linear forwards infinite; -ms-animation: run 8s 6s linear forwards infinite; -webkit-animation: run 8s 6s linear forwards infinite;}

.cloud1{ width: 10%; position: absolute; right: 10%; bottom: 10%; animation: cloud_float 3s linear alternate infinite; -webkit-animation: cloud_float 3s linear alternate infinite; -ms-animation: cloud_float 3s linear alternate infinite; -moz-animation: cloud_float 3s linear alternate infinite;}
.cloud2{ width: 10%; position: absolute; left: -5%; bottom: 5%; animation: cloud_float 3s 1s linear alternate infinite; -moz-animation: cloud_float 3s 1s linear alternate infinite; -ms-animation: cloud_float 3s 1s linear alternate infinite; -webkit-animation: cloud_float 3s 1s linear alternate infinite;}
.cloud3{ width: 5%; position: absolute; left: 5%; top: 20%; animation: cloud_float 3s 2s linear alternate infinite; -moz-animation: cloud_float 3s 2s linear alternate infinite; -ms-animation: cloud_float 3s 2s linear alternate infinite; -webkit-animation: cloud_float 3s 2s linear alternate infinite;}



@media only screen and (min-width:1680px) {
	.factory{width:1200px;  position: absolute; bottom: 10%;}
}
@media only screen and (min-width: 1440px) and (max-width: 1679px) {
	.factory{width:1000px;  position: absolute; bottom: 10%;}
}
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
	.factory{ width:800px;  position: absolute; bottom: 5%;}
}
/* 平板 */
@media only screen and (min-width: 640px) and (max-width: 1199px) {
	.factory{ width:600px;  position: absolute; bottom: 5%;}
}
@media only screen and (min-width: 0px) and (max-width: 639px) {
	.factory{ width:600px;  position: absolute; bottom: 10%;}
}