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


@media screen and (min-width: 120px) and (max-width:1440px) {

/*about 通用*/
.about_menu{display:flex; width:520px}
.about_menu a{flex:1; max-width:20%; font-size:15px; color:#8f8f8f; line-height: 52px; font-weight:bold;}
.about_menu a.on, .about_menu a:hover{color:#5c5c5c;}
.about_box{width:100%;}

/*范围:about*/
.about .left{width:520px; float:left;}
.about .left .content{padding-top:50px; font-size:13px; line-height:24px; color:#6b6b6b;}
.about .left .content img{max-width:100%;}
.about .right{width:440px; float:right; margin-top:-35px;}
.about .right img{width:100%;}

/*范围:organization*/
.organization .build{text-align:center; height:600px;}
.organization .build img{margin-top:100px;}

/*范围:honour*/
.honour .box{width:1050px; padding:30px 0 20px; overflow:hidden;}
.honour .box a{display:block; float:left; width:230px; height:158px; margin:30px 27px 30px 0; overflow:hidden;}
.honour .box a i{display:block; width:100%; height:100%; position:relative; top:0; left:0; background-size:cover !important; background-position: top center !important; transition:all 0.3s;}
.honour .box a:hover{box-shadow: 0 0 20px rgba(102,102,102,0.3);}
.honour .box a:hover i{width:104%; height:104%; top:-1%; left:-2%;}
.honour .box a img{width:100%;}
.honour .line{padding-top:50px;}

/*范围:news*/
.news .left{width:460px; float:left;}
.news .left .news_list{padding:15px 0; margin-top:30px; border-top:1px solid #959595; border-bottom:1px solid #959595;}
.news .left .news_list a{display:block; border-radius:8px; position:relative; left:0; background:#fff; padding:14px; height:38px; margin:18px 0; transition:all 0.5s;}
.news .left .news_list .time{width:60px; float:left; line-height: 28px; height:28px; margin:6px 0; color:#bdbdbd; font-size:18px; border-right:2px solid #959595;}
.news .left .news_list .text{font-size:13px; color:#5c5c5c; line-height: 20px; float:left; padding-left:20px;}
.news .left .news_list .next{float:right; padding-right:10px;margin:4px 0;}
.news .left .news_list .next i{display:block; color:#5c5c5c; width:40px; height:40px; border-radius:50%; line-height: 40px; background:#fff; text-align:center; font-size: 24px;}
.news .left .news_list a:hover,.news .left .news_list a.on{background:#f7f7f7; left:20px;}
.news .left .news_list a:hover .time,.news .left .news_list a.on .time{color:#aabe94;}
.news .left .news_list a:hover .text,.news .left .news_list a.on .text{font-weight:bold;}
.news .left .line{padding:30px 0;}
.news .right{width:500px; float:right; margin-top:-52px; background:#f7f7f7; padding:20px 0 20px;}
.news .right .h1{color:#7b7c7c; font-size:16px; text-align:center; line-height: 40px;}
.news .right .scroll{}
.news .right .scroll .content{padding:0 10px 0 30px; font-size:13px; color:#a7a7a7; line-height: 24px;}
.news .right .scroll img{max-width:100%;}

/*项目列表*/
.workerList{}
.workerList .menu{width:100%; position:relative;}
.workerList .menu p{display:block; font-size:16px; color:#5d5d5d; line-height: 14px; padding:23px 0; text-align:center;}
.workerList .menu p em,.workerList .menu p i{padding:0 8px; height:14px; display:inline-block;}
.workerList .menu p em{border-left:1px solid #666;}
.workerList .menu a{position:absolute; top:23px; left:0; width:40px; height:14px; line-height: 14px; }
.workerList .menu a i{font-size:20px; color:#333; position:absolute; left:0;}
.workerList .menu a i:nth-child(2n){left:8px;}

.workerList .search{width:320px; padding-bottom:20px; margin-right:20px; float:left;}
.workerList .search .sbg{width:100%; height:36px; background:#cecece; border-radius:6px; display:flex;}
.workerList .search .sbg input{flex:1; line-height: 36px; background:transparent; text-indent:15px; font-size:16px;}
.workerList .search .sbg .sbtn{width:36px; line-height: 36px; font-size:20px; color:#fff; cursor:pointer; transition:width 0.5s;}
.workerList .search .sbg .sbtn:hover{width:50px;}
.workerList .searchText{width:320px; line-height:36px; float:left; padding-bottom:20px; font-size:15px; color:#737373;}

.workerList .box{width:100%;}
.workerList .content{width:1050px; overflow:hidden;}
.workerList .content a{display:block; position:relative; float:left; width:320px; height:178px; margin:6px 20px 20px 0; overflow:hidden;}
.workerList .content a i{display:block; width:100%; height:100%; position:relative; top:0; left:0; transition:all 0.5s;}
.workerList .content a img{width:100%;}
.workerList .content a span{display:table; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index: 1; background:rgba(0,0,0,0);  opacity: 0; text-align:center; transition:all 0.5s;}
.workerList .content a span em{display:table-cell; vertical-align: middle; color:#fff; font-size:14px;}
.workerList .content a:hover{box-shadow: 0 0 20px rgba(102,102,102,0.3);}
.workerList .content a:hover i{width:104%; height:104%; top:-1%; left:-2%;}
.workerList .content a:hover span{background:rgba(0,0,0,0.5);  opacity: 1;}
.workerList .line{padding-top:20px;}

.wScroll{height:320px;}

}

@media screen and (min-width: 1441px) and (max-width:1600px) {

/*about 通用*/
.about_menu{display:flex; width:600px}
.about_menu a{flex:1; max-width:20%; font-size:16px; color:#8f8f8f; line-height: 52px; font-weight:bold;}
.about_menu a.on, .about_menu a:hover{color:#5c5c5c;}
.about_box{width:100%;}

/*范围:about*/
.about .left{width:600px; float:left;}
.about .left .content{padding-top:60px; font-size:14px; line-height:24px; color:#6b6b6b;}
.about .left .content img{max-width:100%;}
.about .right{width:560px; float:right; margin-top:-35px;}
.about .right img{width:100%;}

/*范围:organization*/
.organization .build{text-align:center; height:600px;}
.organization .build img{margin-top:100px;}

/*范围:honour*/
.honour .box{width:1250px; padding:40px 0 30px; overflow:hidden;}
.honour .box a{display:block; float:left; width:270px; height:186px; margin:30px 40px 30px 0; overflow:hidden;}
.honour .box a i{display:block; width:100%; height:100%; position:relative; top:0; left:0; background-size:cover !important; background-position: top center !important; transition:all 0.3s;}
.honour .box a:hover{box-shadow: 0 0 20px rgba(102,102,102,0.3);}
.honour .box a:hover i{width:104%; height:104%; top:-1%; left:-2%;}
.honour .box a img{width:100%;}
.honour .line{padding-top:50px;}

/*范围:news*/
.news .left{width:560px; float:left;}
.news .left .news_list{padding:20px 0; margin-top:30px; border-top:1px solid #959595; border-bottom:1px solid #959595;}
.news .left .news_list a{display:block; border-radius:8px; position:relative; left:0; background:#fff; padding:16px; height:48px; margin:20px 0; transition:all 0.5s;}
.news .left .news_list .time{width:70px; float:left; line-height: 32px; height:36px; margin:6px 0; color:#bdbdbd; font-size:22px; border-right:2px solid #959595;}
.news .left .news_list .text{font-size:14px; color:#5c5c5c; line-height: 24px; float:left; padding-left:20px;}
.news .left .news_list .next{float:right; padding-right:10px;margin:4px 0;}
.news .left .news_list .next i{display:block; color:#5c5c5c; width:40px; height:40px; border-radius:50%; line-height: 40px; background:#fff; text-align:center; font-size: 24px;}
.news .left .news_list a:hover,.news .left .news_list a.on{background:#f7f7f7; left:20px;}
.news .left .news_list a:hover .time,.news .left .news_list a.on .time{color:#aabe94;}
.news .left .news_list a:hover .text,.news .left .news_list a.on .text{font-weight:bold;}
.news .left .line{padding:30px 0;}
.news .right{width:560px; float:right; margin-top:-52px; background:#f7f7f7; padding:20px 0 30px;}
.news .right .h1{color:#7b7c7c; font-size:16px; text-align:center; line-height: 40px;}
.news .right .scroll{}
.news .right .scroll .content{padding:0 20px 0 40px; font-size:14px; color:#a7a7a7; line-height: 32px;}
.news .right .scroll img{max-width:100%;}

/*项目列表*/
.workerList{}
.workerList .menu{width:100%; position:relative;}
.workerList .menu p{display:block; font-size:18px; color:#5d5d5d; line-height: 14px; padding:23px 0; text-align:center;}
.workerList .menu p em,.workerList .menu p i{padding:0 8px; height:14px; display:inline-block;}
.workerList .menu p em{border-left:1px solid #666;}
.workerList .menu a{position:absolute; top:23px; left:0; width:40px; height:14px; line-height: 14px; }
.workerList .menu a i{font-size:22px; color:#333; position:absolute; left:0;}
.workerList .menu a i:nth-child(2n){left:8px;}

.workerList .search{width:386px; padding-bottom:20px; margin-right:21px; float:left;}
.workerList .search .sbg{width:100%; height:40px; background:#cecece; border-radius:6px; display:flex;}
.workerList .search .sbg input{flex:1; line-height: 40px; background:transparent; text-indent:15px; font-size:18px;}
.workerList .search .sbg .sbtn{width:40px; line-height: 40px; font-size:24px; color:#fff; cursor:pointer; transition:width 0.5s;}
.workerList .search .sbg .sbtn:hover{width:50px;}
.workerList .searchText{width:386px; line-height:40px; float:left; padding-bottom:20px; font-size:16px; color:#737373;}

.workerList .box{width:100%;}
.workerList .content{width:1250px; overflow:hidden;}
.workerList .content a{display:block; position:relative; float:left; width:386px; height:214px; margin:10px 21px 20px 0; overflow:hidden;}
.workerList .content a i{display:block; width:100%; height:100%; position:relative; top:0; left:0; transition:all 0.5s;}
.workerList .content a img{width:100%;}
.workerList .content a span{display:table; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index: 1; background:rgba(0,0,0,0);  opacity: 0; text-align:center; transition:all 0.5s;}
.workerList .content a span em{display:table-cell; vertical-align: middle; color:#fff; font-size:16px;}
.workerList .content a:hover{box-shadow: 0 0 20px rgba(102,102,102,0.3);}
.workerList .content a:hover i{width:104%; height:104%; top:-1%; left:-2%;}
.workerList .content a:hover span{background:rgba(0,0,0,0.5);  opacity: 1;}
.workerList .line{padding-top:20px;}

.wScroll{height:380px;}

}

@media screen and (min-width: 1601px) {



/*about 通用*/
.about_menu{display:flex; width:660px}
.about_menu a{flex:1; max-width:20%; font-size:18px; color:#8f8f8f; line-height: 52px; font-weight:bold;}
.about_menu a.on, .about_menu a:hover{color:#5c5c5c;}
.about_box{width:100%;}

/*范围:about通用*/
.about .left{width:660px; float:left;}
.about .left .content{padding-top:70px; font-size:14px; line-height:26px; color:#6b6b6b;}
.about .left .content img{max-width:100%;}
.about .right{width:660px; float:right; margin-top:-35px;}
.about .right img{width:100%;}

/*范围:organization*/
.organization .build{text-align:center; height:500px;}
.organization .build img{margin-top:100px;}

/*范围:honour*/
.honour .box{width:1500px; padding:50px 0 30px; overflow:hidden;}
.honour .box a{display:block; float:left; width:320px; height:220px; margin:30px 53px 40px 0; overflow:hidden;}
.honour .box a i{display:block; width:100%; height:100%; position:relative; top:0; left:0; background-size:cover !important; background-position: top center !important; transition:all 0.3s;}
.honour .box a:hover{box-shadow: 0 0 20px rgba(102,102,102,0.3);}
.honour .box a:hover i{width:104%; height:104%; top:-1%; left:-2%;}
.honour .box a img{width:100%;}
.honour .line{padding-top:50px;}

/*范围:news*/
.news .left{width:660px; float:left;}
.news .left .news_list{padding:20px 0; margin-top:30px; border-top:1px solid #959595; border-bottom:1px solid #959595;}
.news .left .news_list a{display:block; border-radius:8px; position:relative; left:0; background:#fff; padding:16px; height:48px; margin:20px 0; transition:all 0.5s;}
.news .left .news_list .time{width:70px; float:left; line-height: 32px; height:36px; margin:6px 0; color:#bdbdbd; font-size:22px; border-right:2px solid #959595;}
.news .left .news_list .text{font-size:14px; color:#5c5c5c; line-height: 24px; float:left; padding-left:20px;}
.news .left .news_list .next{float:right; padding-right:10px;margin:4px 0;}
.news .left .news_list .next i{display:block; color:#5c5c5c; width:40px; height:40px; border-radius:50%; line-height: 40px; background:#fff; text-align:center; font-size: 24px;}
.news .left .news_list a:hover,.news .left .news_list a.on{background:#f7f7f7; left:20px;}
.news .left .news_list a:hover .time,.news .left .news_list a.on .time{color:#aabe94;}
.news .left .news_list a:hover .text,.news .left .news_list a.on .text{font-weight:bold;}
.news .left .line{padding:30px 0;}
.news .right{width:660px; float:right; margin-top:-52px; background:#f7f7f7; padding:30px 0 40px;}
.news .right .h1{color:#7b7c7c; font-size:16px; text-align:center; line-height: 40px;}
.news .right .scroll{}
.news .right .scroll .content{padding:0 40px 0 60px; font-size:14px; color:#a7a7a7; line-height: 32px;}
.news .right .scroll img{max-width:100%;}

/*项目列表*/
.workerList{}
.workerList .menu{width:100%; position:relative;}
.workerList .menu p{display:block; font-size:18px; color:#5d5d5d; line-height: 14px; padding:23px 0; text-align:center;}
.workerList .menu p em,.workerList .menu p i{padding:0 8px; height:14px; display:inline-block;}
.workerList .menu p em{border-left:1px solid #666;}
.workerList .menu a{position:absolute; top:23px; left:0; width:40px; height:14px; line-height: 14px;}
.workerList .menu a i{font-size:22px; color:#333; position:absolute; left:0;}
.workerList .menu a i:nth-child(2n){left:8px;}

.workerList .search{width:460px; padding-bottom:20px; margin-right:30px; float:left;}
.workerList .search .sbg{width:100%; height:40px; background:#cecece; border-radius:6px; display:flex;}
.workerList .search .sbg input{flex:1; line-height: 40px; background:transparent; text-indent:15px; font-size:18px;}
.workerList .search .sbg .sbtn{width:40px; line-height: 40px; font-size:24px; color:#fff; cursor:pointer; transition:width 0.5s;}
.workerList .search .sbg .sbtn:hover{width:50px;}
.workerList .searchText{width:460px; line-height:40px; float:left; padding-bottom:20px; font-size:16px; color:#737373;}

.workerList .box{width:100%;}
.workerList .content{width:1500px; overflow:hidden;}
.workerList .content a{display:block; position:relative; float:left; width:460px; height:250px; margin:10px 30px 30px 0; overflow:hidden;}
.workerList .content a i{display:block; width:100%; height:100%; position:relative; top:0; left:0; transition:all 0.5s;}
.workerList .content a img{width:100%;}
.workerList .content a span{display:table; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index: 1; background:rgba(0,0,0,0);  opacity: 0; text-align:center; transition:all 0.5s;}
.workerList .content a span em{display:table-cell; vertical-align: middle; color:#fff; font-size:16px;}
.workerList .content a:hover{box-shadow: 0 0 20px rgba(102,102,102,0.3);}
.workerList .content a:hover i{width:104%; height:104%; top:-1%; left:-2%;}
.workerList .content a:hover span{background:rgba(0,0,0,0.5);  opacity: 1;}
.workerList .line{padding-top:20px;}


.wScroll{height:420px;}

}


/**范围:首页*/
.hScroll_add{position:absolute; width:46px; height:46px; left:0; right:0; bottom:-300px; margin:auto; z-index: 8; transition:bottom 0.8s;}
.hScroll_add.on{bottom:80px;}
.hScroll_add span{font-size:46px; color:#fff; opacity:0.6; cursor:pointer; transition:all 0.6s;}
.hScroll_add:hover span{opacity:1;}

.hBanner{position:absolute; top:0px; bottom:0px; z-index: 1; width:100%; height:100%;}
.hBanner .swiper-container,.hBanner .swiper-wrapper{height:100%;}
.hBanner .swiper-wrapper .swiper-slide a{display:block; width: 100%; height: 100%; background-size:cover !important; background-position: center !important;}

.hBanner .swiper-button-prev,.hBanner .swiper-button-next{width:70px; height:70px; top:46%; color:#fff; font-size:58px; background:none;}
.hBanner .swiper-button-prev{left:60px;}
.hBanner .swiper-button-next{right:60px;}


/**范围:worker*/
.worker{position:absolute; top:0px; bottom:0px; z-index: 1; width:100%; height:100%;}
.wBanner{position:relative; z-index: 1; width:100%; height:100%;}
.wBanner .img,.wBanner .img a{display:block; width:100%; height:100%;}
.wBanner .img{position:relative;}
.wBanner .img a{background-size:cover !important; background-position:center !important; position:absolute; z-index: 1; opacity: 0; transition:all 0.8s;}
.wBanner .img a.on{z-index: 2; opacity: 1;}

.wBox{display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:2; min-width:1920px; transition:left 0.5s;}
.wBox a{flex:1; height:100%; border-right:1px solid #fff; position:relative; text-align:center;}
.wBox a .bg{width:100%; height: 100%; background:rgba(0,0,0,0.4); transition:all 0.3s;}
.wBox a .text{height:254px; width:100%; position:absolute; bottom:0px; transition:height 0.5s;}
.wBox a .text span{writing-mode: vertical-rl;  writing-mode: tb-rl; color:#fff; margin: 0 auto; height:180px; text-align:left;}
.wBox a .text span i{font-size:18px; line-height: 24px;}
.wBox a .text span em{font-size:20px; line-height: 40px; letter-spacing: 4px;}
.wBox a:hover .bg{width:0%;}
.wBox a:hover .text{height:280px;}


/********科技成果*********/
.technology .content{padding-top:30px !important;}
.technology .line{padding:30px 0;}
.technology .about_table{border:none; border-collapse:collapse; border-spacing:10px 50px;}
.technology .about_table thead tr{background:#959595; color:#fff; line-height: 30px; color:#e6e6e6; text-align:center;}
.technology .about_table thead tr td{font-size:14px !important;}
.technology .about_table tbody tr{background:#f7f7f7; line-height: 36px; color:#aeaeae; transition:background 0.5s;}
.technology .about_table tbody tr:hover{background:#e5e5e5;}
.technology .about_table tr td{padding:6px 4px; text-align:center; font-size:12px;}
.technology .about_table tr td:nth-child(1){width:8%;}
.technology .about_table tr td:nth-child(2){width:18%;}
.technology .about_table tr td:nth-child(3){width:40%; line-height: 18px;}
.technology .about_table tr td:nth-child(4){width:18%;}
.technology .about_table tr td:nth-child(5){width:16%;}

/********科技成果2*********/
.technology2 .content{padding-top:30px !important;}
.technology2 .line{padding:30px 0;}

.technology2 .about_table .row{overflow:hidden;}
.technology2 .about_table .row span{width:25%; display:block; float:left; text-align:center; line-height: 46px;}
.technology2 .about_table .row span:nth-child(1){width:15%;}
.technology2 .about_table .row span:nth-child(2){width:35%;}
.technology2 .about_table .title .row{background:#959595; color:#e6e6e6; font-size:16px;}
.technology2 .about_table .text .row{background:#f0f0f0; color:#999; font-size:15px; transition:background 0.5s;}
.technology2 .about_table .text:hover .row{background:#e5e5e5;}
.technology2 .about_table .text .bar{height:0; line-height: 40px; overflow:hidden; padding:0 20px; background:#f9f9f9; color:#aaa; font-size:13px; transition:all 0.5s;}
.technology2 .about_table .text:hover .bar{height:40px;}


/*recruit 通用*/
.recruit{}
.recruit .title{text-align:center; font-size:16px; }
.recruit .title a{display:inline-block; margin:0 30px; padding:4px 10px;}
.recruit .title a.on{background:#aabe94; color:#fff;}
.recruit .body{padding:50px 0 150px; height:550px; text-align:center; font-size:0；}
.recruit .bodyIn{position:relative; padding:0px; display:inline-block; width:60px; border-left:1px solid #666; height:550px; margin-right:-4px;
	vertical-align: center; cursor:pointer; overflow:hidden; transition:all 0.5s;}
.recruit .bodyIn:nth-last-of-type(1){border-right:1px solid #666;}
.recruit .bodyIn .stitle{padding-top:210px; writing-mode: vertical-rl;  writing-mode: tb-rl; color:#545454; font-size:16px; text-align:left; transition:all 0.8s;}
.recruit .bodyIn .text{font-size:13px; line-height: 24px; color:#666; letter-spacing:2px; opacity:0; width:500px; 
	animation-delay:3s; -webkit-animation-delay:3s; /* Safari 和 Chrome */ transition:opacity 1.5s;}

.recruit .bodyIn.on{width:500px; padding:0 20px; text-align:left;}
.recruit .bodyIn.on .stitle{padding-top:0px; line-height:70px; writing-mode: lr-tb;  writing-mode: lr-tb; color:#000;}
.recruit .bodyIn.on .text{opacity:1;}
.recruit .bodyIn .stitle.on{padding-top:190px;}


/*项目详情*/
.workerShow{}
.workerShow .menu{width:100%; position:relative;}
.workerShow .menu p{display:block; font-size:18px; color:#5d5d5d; line-height: 14px; padding:23px 0 0 40px;}
.workerShow .menu p em,.workerShow .menu p i{padding:0 8px; height:14px; display:inline-block;}
.workerShow .menu p em{border-left:1px solid #666;}
.workerShow .menu a{position:absolute; top:23px; left:0; width:40px; height:14px; line-height: 14px; }
.workerShow .menu a i{font-size:18px; color:#333; position:absolute; left:0;}
.workerShow .menu a i:nth-child(2n){left:8px;}
.workerShow .box{padding:48px;}
.workerShow .content{border-left:1px solid #666; padding-left:16px; overflow:hidden;}
.workerShow .content .title{font-size:16px; color:#333; line-height: 20px; font-weight:bold; letter-spacing: 2px;}
.workerShow .content .text{font-size:15px; color:#666; line-height: 30px; letter-spacing: 2px; padding-top:26px;}



.wScroll .swiper-button-prev,.wScroll .swiper-button-next{width:60px; height:60px; line-height: 60px; top:45%; border-radius:10px; color:#fff; font-size:50px; text-align:center; background:rgba(0,0,0,0.5); }
.wScroll .swiper-button-prev{left:10%;}
.wScroll .swiper-button-next{right:10%;}
.wScroll .swiper-wrapper .swiper-slide{overflow:hidden; box-sizing:border-box; width:auto;}
.wScroll .swiper-wrapper .swiper-slide img{height:100%;}

.wsButton{width:100%; overflow:hidden; padding:40px 0; text-align:center;}
.wsButton div{display:inline-block; width:64px; height:64px; border:1px solid #fff; overflow:hidden; background-size:cover !important; cursor:pointer;}
.wsButton div:hover,.wsButton div.on{box-shadow: 0 0 20px rgba(102,102,102,0.3);}


/********图片层********/
.layerBox{width:0%; height:0%; background:rgba(0,0,0,0); position:fixed; top:0; left:0; z-index:99999; transition: opacity,background 1s; overflow:hidden;}
.layerBox .layerIn{width:300px; height:200px; position:absolute; left: 0; right:0; top:0; bottom:0; background:#fff; margin: auto; transition:all 0.5s;}
.layerBox .layerClose{width:70px; height:70px; background:#eee; position:absolute; top:0; right:-70px; cursor:pointer;}
.layerBox .layerClose i{display:block; width:70px; height:70px; position:relative; line-height: 70px; text-align: center; font-size:30px; transition:all 0.3s;}
.layerBox .layerClose i:hover{transform: rotate(180deg);}
.layerBox .layerRotate{width:50px; height:50px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 1;}
.layerBox .layerRotate i{display:block; width:50px; line-height:50px; font-size:50px; text-align:center; color:#666; animation:rotate 1s infinite; -webkit-animation:rotate 1s infinite}
.layerBox .layerContent{width:100%; height:100%; background:#fff; text-align:center; overflow:hidden; position:relative; z-index: 2; opacity:0; transition:all 0.5s;}
.layerBox .layerContent.on{opacity:1;}
.layerBox .layerContent img{width:100%;}
.layerBox .layerTitle{width:100%; height:70px; line-height: 70px; z-index: 3; font-size:18px; color:#5d5d5d; text-align:center; background:#e0e0e0; position:absolute; left:0; bottom:0px;}
.layerBox.on{width:100%; height:100%; background:rgba(0,0,0,0.6);}

@keyframes rotate
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

@-webkit-keyframes ratote /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}