/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html,body{
	height:100%;
	overflow:hidden;
	color:#000000;
}



body{
	background:url(../img/bg.jpg) repeat;
	margin:0;
	padding:0;
	font-family:"Microsoft YaHei",Arial, Helvetica, sans-serif;
}

h1,h2,h3{
	margin:0 0;
}

h1{
	font-size:30px;
	line-height:32px;
}

h2{
	font-size:14px;
	line-height:16px;
}



.tt1{
	padding:0 5px !important;
	margin:0 !important;
	width:325px !important;
	height:37px !important;
	border:1px solid #999999 !important;
	-webkit-border-radius:10px !important;
}


.ta1{
	padding:5px 5px !important;
	margin:0 !important;
	width:325px !important;
	height:157px !important;
	border:1px solid #999999 !important;
	-webkit-border-radius:10px !important;
	resize:none;
	overflow-y:auto !important;
}



#loading { 
	width:100%; /* Full Width */
	height:100%;
	background:#fff;
	top:0;
	lefft:0;
	position:absolute;
	z-index:9001;
}


#loading .load_rocket{
	width:155px;
	height:289px;
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-145px;
	margin-left:-77px;
	z-index:9002;
}


#loading .cloud_box{
	width:390px;
	height:330px;
	z-index:9005;
	position:relative;
	top:50%;
	left:50%;
	margin-top:-165px;
	margin-left:-195px;
	overflow:hidden;
}

#loading .cloud_box .clouds{
	width:390px;
	height:330px;
	top:-1470px;
	position:relative;
}


#loading .cloud_box .clouds .cloud1{
	width:184px;
	height:67px;
	margin-top:50px;
	padding-top:34px;
	text-align:center;
	font-weight:bold;
	background:url(../img/loading_cloud1.png) no-repeat left center;
}

#loading .cloud_box .clouds .cloud2{
	width:169px;
	height:59px;
	padding:34px 0 0 209px;
	margin-top:50px;
	text-align:center;
	font-weight:bold;
	background:url(../img/loading_cloud2.png) no-repeat right center;
}



.logo{
	width: 256px;
	height: 100px;
	position: absolute;
	z-index: 100;
	bottom: 35px;
	left: 30px;
}

.copyright{
	width: 200px;
	height: 20px;
	text-align: right;
	position: absolute;
	z-index: 100;
	bottom: 30px;
	right: 30px;
}

.copyright a{
	text-decoration:none;
	color:#000000;
	font-size:18px;
}


nav{
	width:375px;
	height:386px;
	position:absolute;
	z-index:90;
	top:50%;
	left:50%;
	margin-top:-200px;
	margin-left:-200px;
}



nav div{
	width:72px;
	height:76px;
	position: absolute;
	top:-90px;
	left:50%;
	margin-left:-36px;
	transform-origin :50% 283px;
	-webkit-transform-origin:50% 283px;
	-ms-transform-origin:50% 283px;
	-moz-transform-origin:50% 283px;
	-o-transform-origin:50% 283px;
	z-index: 100;
}


nav div#nav1{
	z-index:150;
}

nav div p{
	display: block;
}

nav div img{
	cursor: pointer;
}

nav div span{
	display: none;
	width:124px;
	height:61px;
	background:url(../img/tips-bg.png) no-repeat;
	position:absolute;
	margin-top:-70px;
	margin-left:-25px;
	text-align: center;
	line-height: 50px;
	z-index: 200;
}


.star{
	width:1920px;
	height:1200px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-600px;
	margin-left:-960px;
}

.bg1{
	background:url(../img/star_1.png) no-repeat;
	z-index:2;
}

.bg2{
	background:url(../img/star_2.png) no-repeat;
	z-index:3;
}

.bg3{
	background:url(../img/star_3.png) no-repeat;
	z-index:4;
}


#top_earth{
	position:absolute;
	width:731px;
	height:750px;
	top:-100%;
	left:50%;
	margin-left:-365px;
}

#earth_robot{
	margin-top:-87px;
	margin-left:323px;
	position:absolute;
	z-index:5;
}

#screen{
	position:absolute;
	z-index:10;
	top:-2000px;
}

#rocket_box{
	width: 202px;
	height: 110px;
	text-align:right;
	position: absolute;
	z-index: 9;	
	top:50%;
	left:50%;
}



#rocket_fire{
	width: 40px;
	height:56px;
}

.pa{
	position:absolute;
}

#pa1{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

#pa2{
	transform: rotate(-72deg);
	-webkit-transform: rotate(-72deg);
	-moz-transform: rotate(-72deg);
	-ms-transform: rotate(-72deg);
	-o-transform: rotate(-72deg);
}

#pa3{
	transform: rotate(-144deg);
	-webkit-transform: rotate(-144deg);
	-moz-transform: rotate(-144deg);
	-ms-transform: rotate(-144deg);
	-o-transform: rotate(-144deg);
}

#pa4{
	transform: rotate(-216deg);
	-webkit-transform: rotate(-216deg);
	-moz-transform: rotate(-216deg);
	-ms-transform: rotate(-216deg);
	-o-transform: rotate(-216deg);
}

#pa5{
	transform: rotate(-288deg);
	-webkit-transform: rotate(-288deg);
	-moz-transform: rotate(-288deg);
	-ms-transform: rotate(-288deg);
	-o-transform: rotate(-288deg);
}

.container{
	width:1200px;
	overflow:hidden;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-600px;
	padding-top:65px;
}


#about-box{
	width:900px;
	height:646px;
	margin:0 auto;
	background:url(../img/about-bg.png) no-repeat;
	position: relative;
}

#about-rocket{
	position:absolute;
	left:50%;
	margin-left:-450px;
	top:50%;
	margin-top:-1000px;
	z-index:9999;
	z-index:500;
}

#about-robot{
	position:absolute;
	left:50%;
	margin-left:-300px;
	top:50%;
	margin-top:-1000px;
	z-index:505;
}

#movie{
	top:46px;
	left:325px;
	position: absolute;
	z-index: 55;
}

#about-bowl-part1{
	width: 211px;
	height:9px;
	background: url(../img/bowl-part1.png) no-repeat;
	position: absolute;
	z-index: 50;
	top:193px;
	left:352px;
}

#about-bowl-part2{
	width: 256px;
	height:198px;
	background: url(../img/bowl-part2.png) no-repeat;
	position: absolute;
	z-index: 60;
	top:200px;
	left:330px;
}

#about-water-part1{
	width:259px;
	height:39px;
	background: url(../img/butter-part1.png) no-repeat;
	position: absolute;
	z-index:53;
	top:252px;
	left:328px;
}

#about-water-part2{
	width:266px;
	height:133px;
	background: url(../img/butter-part2.png) no-repeat;
	position: absolute;
	z-index:55;
	top:270px;
	left:328px;
}


#about-switch{
	width:20px;
	height:20px;
	background: url(../img/switch.png) no-repeat;
	position: absolute;
	z-index: 460;
	top:420px;
	left:450px;
	cursor:pointer;
}


#about-canvas{
	width:262px;
	height:352px;
}

#about-text{
	width:254px;
	height:95px;
	background:url(../img/about-text-bg.png) no-repeat;
	color:#000;
	position:absolute;
	top:30px;
	left:330px;
	z-index:70;
	display:none;
}

#about-text img{
	vertical-align:middle;
	height:100%;
	width:1px;
}


#about-text p{
	width:253px;
	text-align:center;
	vertical-align:middle;
	display:inline-block;
}

.canvas-img{
	display: none;
}

#about-pad{
	width:469px;
	height:555px;
	background:url(../img/about-pad.png) no-repeat;
	position:absolute;
	z-index:42;
	top:-60px;
	left:220px;
}

#about-pad-snow{
	width:390px;
	height:360px;
	background:#000;/*url(../img/snow.gif) repeat*/
	position:absolute;
	z-index:413;
	top:0px;
	left:260px;
	text-align:center;
	padding-top:70px;
	font-size:24px;
	font-weight:bold;
	color:#CCC;
}

#final-text{
	position:absolute;
	top:150px;
	z-index:100;
	line-height:36px;
	width: 380px;
	text-align: center;
	display: block;
	display:none;
}


#about-pad-frame{
	width:469px;
	height:555px;
	background:url(../img/about-pad-frame.png) no-repeat;
	position:absolute;
	z-index:415;
	top:-56px;
	left:220px;
}


.contact_info{
	padding:0 0 20px 220px;
	font-size:36px;
	line-height:45px;
}

.contact_info span{
	display:inline-block;
	color:#bdbdbd;
	margin-right:10px;
}


.form_div{
	text-indent:-125px;
	padding-left:125px;
	margin-bottom:15px;
	width:900px;
}

.form_submit{
	position:absolute;
	top:220px;
	left:640px;
	z-index:100;
}


.form_div label{
	width:125px !important;
	height:39px !important;
	text-align:right !important;
	padding-right:22px !important;
	float:left;
}


.form_div input{
	margin-left:147px;
}

#service{
	width:1000px;
	height:500px;
	position:relative;
	margin:0 auto;
	overflow: hidden;
}

#service-box{
	width: 1000px;
	height:9999px;
	position: relative;
}


#service #service-box .info-box{
	width:1000px;
	height:500px;
	overflow: hidden;
}


#service #service-box .info-box .pic{
	float:left;
	width:399px;
	height:465px;
	padding-right:50px; 
}

#service #service-box .info-box .text{
	float: left;
	width:550px;
	line-height:26px;
	padding-top:100px;
}

#service #service-box .info-box .text h3{
	font-size: 36px;
	line-height:50px;
	margin-bottom: 20px;
}


ul#service-nav{
	margin: 0;
	padding: 0;
	width:50px;
	height:300px;
	position: absolute;
	top:50%;
	right:0px;
	margin-top:-150px;
}

ul#service-nav li{
	list-style-type: none;
	width:50px;
	height:50px;
	background: url(../img/service-nav-off.png) no-repeat center center;
	cursor: pointer;
}

ul#service-nav li.on{
	background: url(../img/service-nav-on.png) no-repeat center center;
}




#options{
	
}

#options ul{
}

#options ul li{
	list-style-type:none;
	float:left;
	margin:0 10px;

}

#filters{
	margin-bottom:15px;
}

#filters img{
	margin-right:10px;
}


#case-list-box{
	width:1110px;
	height:500px;
	
}


#case-list{
	position:absolute;
	width:1110px;
	margin:0 auto;
}





#case-list div{
	margin-bottom:15px;
}


.case-hover{
	display:block;
	width:215px;
	height:0;
	overflow: hidden;
	z-index:80;
	padding:0 15px;
	background:url(../img/case-hover.png) no-repeat;
	color:#FFF;
	bottom: 8px;
	cursor: pointer;
	text-align:center;
}


.case-hover a{
	color:#FFF;
	text-decoration:underline;
	position:absolute;
	right:5px;
	bottom:5px;
}

.element .frame-border{
	display:block;
	width:263px;
	height:200px;
	position:absolute;
	z-index:70;
	top:0;
	left:0;
	background:url(../img/case-frame.png) no-repeat;
}


#scrollbar1 { width: 1130px; clear: both; margin: 20px 0 10px}
#scrollbar1 .viewport { width: 1090px; height: 415px; overflow: hidden; position: relative}
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0}
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background:url(../img/handle.png) no-repeat;width:30px;height:30px !important}
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px}
#scrollbar1 .track { background:url(../img/track.png) no-repeat center top; height: 100%; width:30px; position: relative; padding: 0 1px}
#scrollbar1 .thumb { width: 30px; cursor: pointer; overflow: hidden; position: absolute; top: 0}
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px}
#scrollbar1 .disable{ display: none}



/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope{
	
}


.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


.element {
  width: 252px;
  height: 190px;
  margin-right:15px;
  padding:10px 0 0 10px;
  float: left;
  overflow: hidden;
  position: relative;
}


.element * {
  position: absolute;
  margin: 0;
}





/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}