@charset "utf-8";
/* CSS Document */


body,html,div,img,ul,li,table,tr,td,p,h3,a{ border:0; margin:0; padding:0;}
body,html{ font-size:13px; color:#666; font-family:'微软雅黑'; overflow-x:hidden}
li{ list-style:none;}
a{ text-decoration:none; }



.head{  height:80px; position:relative; z-index:1000000; background:rgba(255,255,255,0.5)}
.head_main{ width:1200px; margin:0 auto; height:70px; position:relative}
.head_main .logo{ height:50px; margin:15px 0;}
.head_main ul{ height:50px; margin:15px 0; margin-top:20px; position:absolute; right:20px;}
.head_main ul li{ height:50px; line-height:20px; float:left; width:120px; text-align:center;}
.head_main ul li a{ color:#fff;transition:all 0.3s ease; display:block; width:100%; font-size:12px; height:100%;transition:all 0.3s ease;}
.head_main ul li a:hover{ color:#FFCC00;}
.head .head_main ul li .on{ color:#FFCC00;}
.inner{ background:none; border-bottom:1px solid #D7D7D7}
.inner .head_main  ul li a{ color:#999;transition:all 0.3s ease; display:block; width:100%; font-size:12px; height:100%;transition:all 0.3s ease;}
.inner .head_main  ul li a:hover{ color:#FFCC00;}
.head_main ul li a span{ font-size:11px;}


.my_div_main{ width:1200px; margin:0 auto; padding:20px 0; padding-top:50px;}
.my_div .div_head{ height:50px; text-align:center;}
.my_div .div_head h3{ font-size:22px; font-weight:lighter; color:#666666; }
.my_div .div_head h3 b{font-size:13px;font-weight:lighter; margin:10px 20px; color:#999999;}
.my_div .div_head span{ padding:1px 100px;  border-bottom:1px dashed #ccc; line-height:10px; position:relative; top:-10px;}
.pro_div{ overflow:hidden; margin-top:50px; }


@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0 {top:0}
20% {top:-15px}
50% {top:0px}
70% {top:-9px}
80% {top:0px}
90% {top:-3px}
100% {top:0px}
}

.pro_div .pro{ width:230px; margin:20px 35px; float:left; text-align:center;}

.pro_div .pro img{ width:100px; position:relative}
.pro_div .pro h3{ margin:20px 0; font-size:17px; font-weight:lighter; color:#333333;}
.pro_div .pro p{ margin:20px 0; font-size:12px; color:#999999; line-height:30px; text-align:left;}
.my_div .view{ width:150px; margin:20px 525px; height:36px; border:1px solid #F45A5C; color:#F45A5C; border-radius:36px; display:block; text-align:center; line-height:36px; transition:all 0.3s ease}
.my_div .view:hover{ text-shadow:1px 1px 2px rgba(0,0,0,0.3); box-shadow:1px 1px 2px rgba(0,0,0,0.3)}

.my_div2 .pro_div .pro img{ width:230px; height:153px; display:block}
.my_div2 .pro_div .pro{ overflow:hidden; transition:all 0.5s ease; position:relative; height:344px;}
.my_div2 .pro_div .pro:hover{ box-shadow:3px 3px 5px rgba(0,0,0,0.3)}
.my_div2 .pro_div .pro .details{ height:344px; background:rgba(0,0,0,0.6); width:100%; position:absolute; left:0; top:344px;transition:all 0.3s ease; }
.my_div2 .pro_div .pro p{ padding: 0 10px; line-height:26px;}
.my_div2 .pro_div .pro .details img{ width:180px; height:180px; margin:50px 25px;}
.my_div2 .pro_div .pro .details span{ margin:20px 0; text-align:center; color:#fff;}



.main{ width:1000px; height:500px; position:relative; margin:0 auto;}
.stage{ width:420px; height:400px; position:absolute;  left:-30px; top:90px;}
.stage img{ position:absolute;
-webkit-transition:all 2s cubic-bezier(.17,.67,.18,1) 0s;
opacity:.5

}
#img11{
left:-23px; top:-130px;
 z-index:0; opacity:0;
 margin-top:50px;
	}
.img1{ left:120px; top:21px;
-webkit-transform:rotate(90deg);
-webkit-transform-origin:60% 80%;
}
.img2{ left:-483px; top:95px;
-webkit-transform:rotate(-80deg);
-webkit-transform-origin:0% 70%;
}
.img3{ left:-630px; top:-580px;
-webkit-transform:rotate(100deg);
-webkit-transform-origin:0% 0%;

}
.img4{ left:-582px; top:56px;
-webkit-transform:rotate(100deg);
-webkit-transform-origin:0% 0%;
}
.img5{ left:257px; top:-689px;

-webkit-transform:rotate(100deg);
-webkit-transform-origin:100% 100%;

}
.img6{ left:-63px; top:-600px;


-webkit-transform:rotate(-150deg);
-webkit-transform-origin:100% 130%;
}
.img7{ left:-467px; top:110px;

-webkit-transform:rotate(-130deg);
-webkit-transform-origin:150% 100%;


}
.img8{ left:311px; top:-40px;
-webkit-transform:rotate(-130deg);
-webkit-transform-origin:100% 100%;
}
#img9{ left:66px; top:230px;
}
#img10{ left:66px; top:344px;-webkit-transition:all 2s cubic-bezier(.17,.67,.18,1) 2s;}
.main .s_details{ width:500px; position:absolute; right:-100px; top:40px; text-align:left; transition:all 1s ease 1s; -webkit-transform:scale(0,0); -webkit-transform-origin:left center}
.main .s_details p { padding-left:30px; margin:20px 0; font-size:12px; color:#999999; line-height:24px;}
.main .s_details p b{ font-size:18px; font-weight:lighter; color:#666666;}
.main .s_details p span{ padding:0px 5px; margin-left:-30px; margin-right:10px; line-height:0; border-radius:50%; color:#fff; background:#72D38C}

.my_div_main .ll_con{ width:400px; float:left; text-align:center}
.my_div_main .ll_con img{margin-top: 60px;    height: 60px;}
.my_div_main .l_con{ width:400px;  float:left; padding:30px 0;}
.my_div_main .l_con p{ line-height:30px;}
.my_div_main .r_con{width:398px; text-align:center; float:left;}
.my_div_main .r_con img{ width:120px; margin-top:30px;}
.my_div_main .contact{ overflow:hidden}


/*内页*/
.inner_div{ padding:30px 0; min-height:400px;}
.inner_div { width:1000px; margin:0 auto;
}
.inner_div h3{ height:30px; line-height:30px;  font-size:16px;}
.inner_div p{ line-height:30px; font-size:12px; padding:5px 0}
.inner_div p span{ padding:2px 12px;}

.inner_img{ width:120px; float:left; margin-right:30px;}
.inner_text{ border-bottom:1px dotted #ccc; overflow:hidden; padding:20px;}


.mark{ width:100%; height:100%; position:fixed; left:0; top:0; background:url(../img/mark.png); display:none; z-index:1000000}
.tip_div{ width:300px; height:180px; background:#fff; border-radius:10px; text-align:center; display:none;
 position:fixed; left:50%; top:50%; margin-left:-150px; margin-top:-90px; z-index:2000000; box-shadow:3px 3px 3px #E7E7E7}
 .tip_div a{ width:100px; height:34px; float:left;transition:all 0.5s ease; line-height:34px; border-radius:8px; display:block; color:#999999; margin:0 20px; border:1px solid #999999;}
 .tip_div a:hover{ opacity:0.7}
  .tip_div p{ margin:55px 0; padding:0 15px; text-align:left; line-height:20px;}
 .tip_div div{ overflow:hidden; margin-left:10px;}