@charset "utf-8";

.wrapper{ width:1200px; margin:0 auto;}

/*-------------------------------  ■ index 首页---------------------------------*/

/*-----首页 banner-----*/
.index_focus {position: relative;width: 100%;height:720px;margin: 0 auto;overflow: hidden;}
.index_focus .bd li {  display: none;position: absolute;left: 0;top: 0; width:100%; text-align:center;}
.index_focus_post {z-index: 10;}
.index_focus .pic {height:720px;display: block; text-align:center;}
.index_focus .pic:hover {text-decoration: none;}
.index_focus .slide_nav {position: absolute; left:40%; bottom:2%; width:100%;  position: absolute; z-index:9999999; }
.index_focus .slide_nav a {cursor:pointer;f/loat:left;font-size:40px;font-family: arial;color: #fff;padding:5px;}
.index_focus .slide_nav li:hover,.index_focus .slide_nav .on{text-decoration: none;color: #09B14C;opacity:0.9;}
.index_focus_pre,.index_focus_next {position: absolute;top: 50%;margin-top: -36px;width:38px;height:80px;text-indent: 100%;white-space: nowrap;overflow: hidden;z-index: 10;}

.index_focus_pre {left: 30px;background-position: 0 0;background:url(../images/jt1.png) no-repeat;}
.index_focus_pre:hover {left: 30px;background-position: 0 0;background:url(../images/jt1.png) no-repeat;}
.index_focus_next {right: 30px;background-position: 0 0;background:url(../images/jt2.png) no-repeat;}
.index_focus_next:hover {right: 30px;background-position: 0 0;background:url(../images/jt2.png) no-repeat;}


/* 本例子css */
.slideBox{ width:100%; height:460px; overflow:hidden; position:relative; }
.slideBox .hd{ overflow:hidden; position:absolute; right:5px; bottom:15px; width:100%; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; text-align:center; height:25px;}
.slideBox .hd ul li{ display:inline; margin-right:2px; padding:10px; font-size:0; text-align:center; color:#ffef00; cursor:pointer; background:url(../images/qqq02.jpg) no-repeat center center;}
.slideBox .hd ul li.on{color:#fff;background:url(../images/qqq01.jpg) no-repeat center center; padding:10px 20px;}

.slideBox .bd{ position:relative; height:100%; z-index:0;   }
.slideBox .bd li{ zoom:1; vertical-align:middle; }



/*-----首页 大按钮


.cccc{ position:relative; height:790px; background:url(../images/bg01.jpg) no-repeat top center; color:#3a414b;}
-----*/
.cccc{ width:100%; background:url(../images/ser02.jpg) no-repeat bottom center fixed;}
.wrappers{ width:1320px; margin:0 auto; overflow:hidden; text-align:center;}
.bigbtn{ padding: 50px 30px; overflow: hidden; visibility:hidden;}
.bigbtn01{ position: relative; float: left; width: 250px;margin-left:5px; margin-right:5px; height: 230px; overflow: hidden; visibility:hidden;}
.bigbtn02{ position: absolute; top: 0; left: 0; width: 100%; text-align: center; }

.bigbtn03{ margin: 0 auto; width: 120px; height:100px; font-size: 24px; text-align: center; color: #fff; font-weight: bold; line-height: 28px; border: #fff solid 2px; border-radius:100%; text-align:center; padding-top:20px; margin-top: 25px; }

.bigbtn03a{ margin: 0 auto; width: 120px; height:120px; font-size: 24px; text-align: center; color: #fff; font-weight: bold; line-height: 28px; border: #fff solid 6px; border-radius:100%; text-align:center; margin-top: 25px; }
.bigbtn03a img{ border-radius:100%;}

.bigbtn04{ text-align: center; line-height:22px; font-size:26px; padding-left:10px; padding-right:10px; color:#fff; margin-top: 30px; }
.bigbtn04a{ text-align: center; line-height:22px; font-size:26px; padding-left:10px; padding-right:10px; color:#09B14C; margin-top: 30px; }


/*-----首页 案例区域-----*/
.index_case{ height: 595px;  background:url(../images/dcp.jpg) no-repeat bottom center fixed; padding-top:75px;}
.index_case01{ float: left; width:400px; height: 520px; overflow: hidden; visibility:hidden;}
.index_case02{ height: 260px; padding-left:30px; color:#8A8A8A; padding-right:30px; line-height:22px; font-size:13px; background: #fff; text-align: center; }
.index_case02 span{ display: block; background:url(../images/case01.jpg) no-repeat bottom center; line-height: 37px; font-size: 26px; color: #333; padding:58px 0 10px;}
.index_case02 a{ display: block; color: #fff; background: #e0a92a; width: 82px; line-height: 24px; text-align: center; margin: 20px auto; -moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.index_case02 a:hover{ border-radius:10px;}
.index_case03{}




/*-----首页 重点产品-----*/
.index_pro{ position:relative; height:650px;background:url(../images/bbj.jpg) left top no-repeat;}
.index_pro01{ position:absolute; top:0; left:0;}
.index_pro01 h2{ font-size:45px; color:#fff;}
.index_pro01 h2 span{ display:block; font-size:25px; font-family:Arial, Helvetica, sans-serif;}

.index_pro02{ position:absolute; top:50px; left:42%; margin-left:-510px; color:#fff; visibility:hidden; z-index:200;}
.index_pro02 h2{ font-size:20px; font-weight:normal; background:url(../images/xx.jpg) right bottom no-repeat; padding-bottom:10px;}
.index_pro02 h2 span{ display:block; margin-top:10px; font-size:55px; font-weight:bold; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;}

.index_pro02 h3{ font-size:25px; font-weight:normal; padding-bottom:20px; color:rgba(255,255,255,1);}

.index_pro02 dl{ float:left; width:135px; position:relative; padding-left:25px;-moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.index_pro02 dl:hover{ padding-top:20px; color:#fff;}
.index_pro02 dl dt{ margin:0 auto; overflow:hidden; background:url(../images/pro02.png) no-repeat bottom center;-moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s; text-align:center;}
.index_pro02 dl dt img{ display:block; margin:7px auto; border-radius:50%;}
.index_pro02 dl dd{ font-size:16px; color:#000; line-height:26px; height:55px; overflow:hidden;}
.index_pro02 dl dd span{ font-size:13px; text-transform:uppercase; color:#ADADAD;}

.index_pro02 dl:hover dt{-webkit-transform: rotateZ(180deg);-moz-transform: rotateZ(180deg);-o-transform: rotateZ(180deg);-ms-transform: rotateZ(180deg);transform: rotateZ(180deg);}


.index_pro03{ margin-left:150px; width:100%; height:700px; top:-50px; background:#37BD4E url(../images/ab1.png)140px 80px no-repeat; z-index:99;}
.index_pro04{ width:445px; margin-left:120px; padding-top:60px; text-align:justify; height:400px; color:rgba(255,255,255,0.9); font-size:14px; line-height:26px;}

.index_pro05 a{text-align:center; border-radius:50px; width:156px; height:38px; display:block; margin-top:25px;  font-size:14px;  color:#FFF; line-height:38px; border:1px solid rgba(255,255,255,0.5);}
.index_pro05 a:hover{background:#FF9600; color:#ffffff;}


/*-----首页 生产车间-----*/
.chejian{ position:relative; color:#333; background:url(../images/cpbj.jpg) top center repeat-y;}


/*-----首页 优势-----*/
.youshi{ height:762px; background:url(../images/youshi.jpg) no-repeat top center fixed; text-align:center;}
.youshi01{ padding-top:150px; visibility:hidden;}
.youshi02{ background:#e0a92a; line-height:59px; font-size:26px; color:#fff; font-weight:bold; margin-top:20px; visibility:hidden;}
.youshi03{ color:#000204; font-size:18px; line-height:30px; margin-top:20px; visibility:hidden;}

.youshi04{ padding-top:75px; overflow:hidden; visibility:hidden;}
.youshi04 dl{ position:relative; float:left; width:142px; height:142px; overflow:hidden; border-radius:50%; margin:0 20px;-moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.youshi04 dl:hover{ margin-top:20px;}
.youshi04 dl dt{ width:142px; height:142px; overflow:hidden; border-radius:50%;}
.youshi04 dl dd{ position:absolute; top:75px; left:0; width:100%; color:#fff; background:url(../images/ys03.png) repeat; line-height:33px; height:33px; overflow:hidden; font-size:16px;}




/*-----首页 新闻-----*/

.index_xinwen{ position:relative; padding-bottom:60px;}
.news06{ text-align:center; font-size:35px; color:#333; padding-top:60px; padding-bottom:40px;}
.news06 span{ display:block; font-size:18px; color:#999;}

.index_xinwen02{ width:1260px; margin:auto;}
.index_xinwen02 dl{ width:365px; height:400px; margin-left:30px; margin-right:20px; overflow:hidden; float:left;}
.index_xinwen02 dl dt{ height:226px; overflow:hidden;}
.index_xinwen02 dl dt:hover img{ height:246px; width:375px; margin-left:-8px; margin-top:-4px;-moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.index_xinwen02 dl dd{ height:156px; padding-top:20px; border-top:none; background:#ffffff;}
.index_xinwen02 dl dd h2 a{ text-transform:uppercase; display:block; font-size:16px; line-height:30px; height:30px; color:#2c353c; font-weight:bold;}
.index_xinwen02 dl dd h2 a:hover{ color:#09B14C;}
.index_xinwen02 dl dd span{ margin:5px 0 13px; display:block; line-height:21px; font-size:12px; color:#616e77; line-height:21px; height:42px; overflow:hidden;}
.index_xinwen03{ font-size:14px; color:#2c353c; width:120px; height:32px; margin-top:20px; border:1px solid #CCC; display:block; text-align:center; line-height:32px;}
.index_xinwen03:hover{ color:#ffffff; background:#09B14C;}




.flip-container {perspective: 1000;
-webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}
.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1; width:267px; height:180px;}
.flip-container, .front, .back {wi/dth: 283px;he/ight: 283px;}
.flipper {transition:transform 0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
display:block;position: relative;}
.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;width:267px; height:180px; }
/*.front img, .back img{ width:283px; height:283px; overflow:hidden;}
*/.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}






















/*-----产品介绍动画部分-----*/
.pro_animate01{-webkit-animation: left01 1s 0s both; -moz-animation: left01 1s 0s both; -ms-animation: left01 1s 0s both; -o-animation: left01 1s 0s both; animation: left01 1s 0s both;visibility:visible;}
.pro_animate02{-webkit-animation: left01 1s 0.5s both; -moz-animation: left01 1s 0.5s both; -ms-animation: left01 1s 0.5s both; -o-animation: left01 1s 0.5s both; animation: left01 1s 0.5s both;visibility:visible;}
.pro_animate03{-webkit-animation: left01 1s 1s both; -moz-animation: left01 1s 1s both; -ms-animation: left01 1s 1s both; -o-animation: left01 1s 1s both; animation: left01 1s 1s both;visibility:visible;}
.pro_animate04{-webkit-animation: left01 1s 1.5s both; -moz-animation: left01 1s 1.5s both; -ms-animation: left01 1s 1.5s both; -o-animation: left01 1s 1.5s both; animation: left01 1s 1.5s both;visibility:visible both;visibility:visible;}
.pro_animate05{-webkit-animation: left01 1s 2s both; -moz-animation: left01 1s 2s both; -ms-animation: left01 1s 2s both; -o-animation: left01 1s 2s both; animation: left01 1s 2s both;visibility:visible;}
.pro_animate06{-webkit-animation: left01 1s 2.5s both; -moz-animation: left01 1s 2.5s both; -ms-animation: left01 1s 2.5s both; -o-animation: left01 1s 2.5s both; animation: left01 1s 2.5s both;visibility:visible;}
.pro_animate07{-webkit-animation: left01 1s 3s both; -moz-animation: left01 1s 3s both; -ms-animation: left01 1s 3s both; -o-animation: left01 1s 3s both; animation: left01 1s 3s both;visibility:visible;}
.pro_animate08{-webkit-animation: left01 1s 3.5s both; -moz-animation: left01 1s 3.5s both; -ms-animation: left01 1s 3.5s both; -o-animation: left01 1s 3.5s both; animation: left01 1s 3.5s both;visibility:visible;}

@keyframes left01 {
    0% {opacity: 0;-webkit-transform: translateX(-25%);} 
    100% {opacity: 1;-webkit-transform: translateX(0%);} 
}
@-webkit-keyframes left01 {
    0% {opacity: 0;-webkit-transform: translateX(-25%);} 
    100% {opacity: 1;-webkit-transform: translateX(0%);}
}





















/*-----111111111111111-----*/
.slide01{
	-webkit-animation: slide01 1s both; -moz-animation: slide01 1s both; -ms-animation: slide01 1s both; -o-animation: slide01 1s both; animation: slide01 1s both;
    visibility: visible; 
}
@keyframes slide01 {
    0% {opacity: 0;-webkit-transform: translateX(50%);} 
    100% {opacity: 1;-webkit-transform: translateX(0%);} 
}
@-webkit-keyframes slide01 {
    0% {opacity: 0;-webkit-transform: translateX(50%);} 
    100% {opacity: 1;-webkit-transform: translateX(0%);}
}




/*-----222222222-----*/
.slide02{
   -webkit-animation: slide02 1s both; -moz-animation: slide02 1s both; -ms-animation: slide02 1s both; -o-animation: slide02 1s both; animation: slide02 1s both; visibility:visible;
}
@keyframes slide02 {
    0% {opacity: 0;-webkit-transform: translateX(-20%);} 
    100% {opacity: 1;-webkit-transform: translateX(0%);} 
}
@-webkit-keyframes slide02 {
    0% {opacity: 0;-webkit-transform: translateX(-20%);} 
    100% {opacity: 1;-webkit-transform: translateX(0%);}
}






/*-----33333333333-----*/
.slide03{
   -webkit-animation: slide03 1s both; -moz-animation: slide03 1s both; -ms-animation: slide03 1s both; -o-animation: slide03 1s both; animation: slide03 1s both;
    visibility: visible; 
}
@keyframes slide03 {
    0% {opacity: 0;-webkit-transform: translateY(50%);} 
    100% {opacity: 1;-webkit-transform: translateY(0%);} 
}
@-webkit-keyframes slide03 {
    0% {opacity: 0;-webkit-transform: translateY(50%);} 
    100% {opacity: 1;-webkit-transform: translateY(0%);}
}



/*-----33333333333-----*/
.slide04{
   -webkit-animation: slide04 1s both; -moz-animation: slide04 1s both; -ms-animation: slide04 1s both; -o-animation: slide04 1s both; animation: slide04 1s both;
    visibility: visible; 
}
@keyframes slide04 {
    0% {opacity: 0;-webkit-transform: translateY(-50%);} 
    100% {opacity: 1;-webkit-transform: translateY(0%);} 
}
@-webkit-keyframes slide04 {
    0% {opacity: 0;-webkit-transform: translateY(-50%);} 
    100% {opacity: 1;-webkit-transform: translateY(0%);}
}