@charset "utf-8";
@import url("css3.css");
/* CSS Document */

/*初始化*/
body, ul, ol, li, p, dl, dt, dd, input, form, h1, h2, h3, h4, h5, h6{margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
img{border: none;}
ul{list-style: none;}
html{ height:100%; font-family:"微软雅黑"; }
a{text-decoration: none;color: #3cb4e4; cursor:pointer;}
a:hover{text-decoration:none;}

/*通用*/
.clear{clear: both;height: 0;overflow: hidden}
.jz{width:1200px; margin:0 auto;}

.logo { position:absolute; left:50%; top:45%; height:166px; width:142px; margin-top:-80px; margin-left:-71px;}
.logo .logo1 { width:100%; text-align:center; position:absolute; top:0;}
.logo .logo2 { float:left; width:50%; margin-top:44px;}
.logo .logo3 { float:right; width:50%; margin-top:44px;}

.name { position:absolute; left:50%; margin-left:-308px; top:10%;}
.name .name-left { float:left; margin-right:20px;}
.name .name-center { float:left; margin-top:8px;}
.name .name-right { float:left; margin-left:20px;}

.nav { position:absolute; top:45%; left:50%; margin-left:-400px; z-index:3; margin-top:-50px;}
.nav ul li { position:relative; float:left;}
.nav ul li a { position:absolute; top:1px; left:1px;}
.nav ul li a p { font-size:14px; color:#fff; text-align:center; margin-top:12px; font-weight:bold;}
/*.nav ul li .nav-border{-webkit-animation: z 15s linear 0s infinite;-moz-animation: z 15s linear 0s infinite;-ms-animation: z 15s linear 0s infinite;animation: z 15s linear 0s infinite;}
*/
.nav ul li a:hover img { -webkit-animation:rotateIn 1s .2s ease both; -moz-animation:rotateIn 1s .2s ease both;}

.line { width:100%; height:1px; position:absolute; top:45%; background:url(../images/line_02.png) no-repeat center center; z-index:2;}

.main53d{-webkit-transition: All 1s 0s;-moz-transition: All 1s 0s;-ms-transition: All 1s 0s; }
.main53d ul{margin: 0;padding: 0;/* -webkit-perspective: 1600px; *//* -webkit-transform-style: preserve-3d; *//* position: relative; */-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
.main53d ul li{list-style: none;position:fixed;width: 1200px;left: 50%;margin-left: -600px; top:-200px;}
.main53d ul li img{-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d; width:100%;}
.main53d ul li:nth-of-type(1){-webkit-transition: All 1.2s 0s;-moz-transition: All 1.2s 0s;-ms-transition: All 1.2s 0s;transition: All 1.2s 0s;-webkit-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
.main53d ul li:nth-of-type(1){-webkit-animation: z 15s linear 0s infinite;-moz-animation: z 15s linear 0s infinite;-ms-animation: z 15s linear 0s infinite;animation: z 85s linear 0s infinite;}
.main53d ul li:nth-of-type(2){-webkit-animation: y 20s linear 0s infinite;-moz-animation: y 20s linear 0s infinite;-ms-animation: y 20s linear 0s infinite;animation: y 60s linear 0s infinite;}
.main53d ul li:nth-of-type(3){-webkit-animation: z 10s linear 0s infinite;-moz-animation: z 10s linear 0s infinite;-ms-animation: z 10s linear 0s infinite;animation: z 100s linear 0s infinite;}

/*弹出层*/
.tc { background:url(../images/tc_03.png) no-repeat center center; position:absolute; left:50%; top:50%; width:838px; height:611px; margin-top:-315px; margin-left:-419px; z-index:99;}
.tc .tc-nav { margin-top:60px; margin-left:42px;}
.tc .tc-nav a { float:left; margin-right:36px; font-size:14px; color:#c5c5c5; }
.tc .tc-nav a img { float:left; margin-right:10px;}
.tc .tc-close { float:right; margin:20px;}
.tc .about { margin-top:20px;}
.tc .about p { font-size:14px; color:#c5c5c5; line-height:29px; margin-bottom:35px; padding:0 42px;}

.overlay-slideup{
  opacity:0;
  visibility: hidden;
  -webkit-transform: translateX(0px);
  transform: translateX(100%);
  -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: opacity 1.5s, transform 1.5s, visibility 1.5s;
}
 
.overlay-slideup.open{
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}
 

.overlay-rotate{
  opacity:0;
  visibility: hidden;
  -webkit-transform: rotateX(60deg);
  transform: rotateX(60deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, visibility 0.5s;
}
 
.overlay-rotate.open{
  opacity: 1;
  visibility: visible;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}

@media screen  and (max-height: 980px) {
	.main53d ul li{  top:-150px;}
	.nav { margin-left:-435px;}
	.nav ul .li1{ margin-right:30px;}
	.nav ul .li2{ margin-right:160px; margin-top:200px;}
	.nav ul .li3{ margin-right:140px ;margin-top:350px;}
	.nav ul .li4{ margin-top:200px;}
	.nav ul .li5{ margin-left:30px ;}
}
@media screen  and (max-height: 900px) {
	.main53d ul li{  width: 1100px; margin-left: -550px; margin-top:0px;}
}
@media screen  and (max-height: 720px) {
	.main53d ul li{ width: 900px;left: 50%;margin-left: -450px; top:-120px;}
	.nav { margin-left:-420px;}
	.nav ul .li3{ margin-right:140px ;margin-top:300px;}
}

@media screen  and (max-height: 670px) {
	.nav { margin-left:-420px;}
	.nav ul .li3{ margin-right:140px ;margin-top:280px;}
}
@media screen  and (max-height: 625px) {
	.main53d ul li{ width: 800px;left: 50%;margin-left: -400px; top:-110px;}
	.nav { margin-left:-420px;}
	.nav ul .li3{ margin-right:140px ;margin-top:250px;}
}
@media screen  and (max-height: 580px) {
	.main53d ul li{ top:-170px;}
	.nav ul .li2{ margin-right:160px; margin-top:150px;}
	.nav ul .li3{ margin-right:140px ;margin-top:230px;}
	.nav ul .li4{ margin-top:150px;}
}
@media screen  and (max-height: 540px) {
	.main53d ul li{ width: 800px;left: 50%;margin-left: -400px; top:-150px;}
	.nav { top:35%;  }
	.nav ul .li2{ margin-right:160px; margin-top:150px;}
	.nav ul .li3{ margin-right:140px ;margin-top:250px;}
	.nav ul .li4{ margin-top:150px;}
}



.canvas img:nth-of-type(1){
-webkit-backface-visibility:visible;
-webkit-transform-origin:center center;
-webkit-animation:demo 5s 0s infinite linear normal none ;
} @-webkit-keyframes demo{
0%{
-webkit-transform:rotate(deg);
} 100%{
-webkit-transform:rotate(360deg);
}
}.canvas div:nth-of-type(1){
-moz-backface-visibility:visible;
-moz-transform-origin:center center;
-moz-animation:demo 0.5s 0s infinite linear normal none ;
} @-moz-keyframes demo{
0%{
-moz-transform:rotate(deg);
} 100%{
-moz-transform:rotate(180deg);
}
}