@charset "utf-8";
/* CSS Document */
body{margin:0; padding:0; font-family:"微软雅黑";}
*{margin:0; padding:0;}
ul,li,dl,dt,dd{list-style-type:none}
ul{margin:0;}
li{list-style: none;}
h1,h2,h3,h4,h5,h6{margin:0 !important; padding:0 !important}
a{text-decoration:none !important;line-height:none !important;cursor:pointer !important;}
a:focus{outline:none!important;}
.no-padding {padding: 0 !important;}
.no-margin {margin: 0 !important;}
.no-background{ background:none !important;}
.no-border{border:none !important;}
.overflow{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.container-fluid{max-width:1630px !important;padding: 0 !important;width: 100%;}
.container{max-width:1000px !important;padding:0;}
.sizeCover{background-position: 50% 50%; background-size: cover; }
.clearfix:before,.clearfix:after {display: table;content:'';}
.clearfix:after{clear: both;}
.clearfix{ *zoom:1;clear: both;}
.vertical_center{display: table-cell;vertical-align: middle;}
.wzduiqi{text-align-last: auto!important;}
/*.wzduiqi{text-align: justify!important;text-align-last: auto!important;}*/
.tr{transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;-webkit-transition:all 0.5s}
.tr1{transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;-webkit-transition:all 0.3s}
.tr2{transition:all 1s;-moz-transition:all 1s;-ms-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s}
.da{transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1)}
textarea:required,input:required{ -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}




/*大图轮播*/
.banner{margin-top: 80px;}
.banner .lb1,.lb1 img{width: 100%;cursor:col-resize;z-index: 0;min-height: 270px;height: 815px;}
.banner .swiper-button-next{height: 150px!important;margin-top: -70px!important;width: 100px!important;display: none}
.banner .swiper-button-prev{height: 150px!important;margin-top: -70px!important;width: 100px!important;display: none}
.banner .lb1:hover .swiper-button-next{display:block}
.banner .lb1:hover .swiper-button-prev{display:block}
.banner .swiper-pagination-bullet{width:10px!important;height: 10px!important;}


header .logo{padding:16px 0 !important;background: #fcfaf7;position:fixed;top:0;z-index:1;left: 0;right: 0;box-shadow: 0 0 16px #bfbfbf}
header .logo .img{padding-left:40px;}
header .logo .txt_box{padding-right: 22px;margin-top:6px;}
header .logo .txt_box span{font-size:24px;color: #000000;font-family: Courier New;line-height:40px;}
header .logo .ss_box{padding-right: 95px;margin-top: 13.5px;cursor: pointer;z-index:20;}
header .logo .ss_box .ss{width:20px;height:20px;}
header .logo .ss_box .ss img{width:100%;}
header .logo .ss_box .ss_gb{width: 45px;height: 45px;background: #c7c7c7;border-radius: 100%;color: aliceblue;font-size: 45px;text-align: center;line-height: 45px;transform:rotate(45deg);display: none;cursor: pointer;position: absolute;z-index: 10000;right:95px;top:41px;}
header .logo .ss_box .input{position: fixed;left: 0;right: 0;top:0;width: 100%;height: 100%;background:rgba(0,0,0,0.875);text-align: center;display: none;}
header .logo .ss_box .input form{width:50%;position: absolute;top:30%;left: 0;right: 0;margin: 0 auto;border: 0;}
header .logo .ss_box .input form input{padding-left: 5px;font-size:35px;color: aliceblue;width:calc(100% - 50px);background: fixed;border: 0;border-bottom: 1px solid #fff;}
header .logo .ss_box .input form button{width: 50px;height: 50px;font-size:40px;float: right;background: fixed;border: 0;color: #909090;}
header .logo .ss_box .input form button:hover{color: #fff;transition:all 0.5s;}



/*导航*/
header .nav{position: fixed;z-index:1;top:0;width:100%;padding: inherit;}
header .nav .sjdnav{display:none;width:512px;height:100%;position:absolute;right:0;top:0; background:rgba(0,0,0,0.87);padding: 80px 0 20px 0;z-index: 3;}
header .nav .sjdnav ul{padding:0; margin:0;}
header .nav .sjdnav li{width:100%;text-align:left;font-size:16px;line-height:55px;}
header .nav .sjdnav li a{display:block;color:#999999;padding-left: 60px;}
header .nav .sjdnav li a:hover{ background:rgba(255,255,255,0.2);color: aliceblue;}
header .nav .sjdnav li .active{ background:rgba(255,255,255,0.2);color: aliceblue;}
header .nav .ydd_btn{width:44px;height: 44px; cursor:pointer;position:absolute;top:19px;right:30px;padding: 14px 7px 10px 7px;border: 1px solid rgba(0,0,0,0);border-radius: 100%;z-index: 2;}
header .nav .ydd_btn span{display:block; width:100%; height:2px; background:#000000;}
header .nav .ydd_btn span.span02{margin:4px 0;}
header .nav .ydd_btn.click{background:none;background: #000000;z-index:4;}
header .nav .ydd_btn.click span{background:#fff;}
header .nav .ydd_btn.click span.span01{transform:rotate(45deg);-ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); position:relative;top:6px;margin-top:0px;} 
header .nav .ydd_btn.click span.span02{margin:4px 0;}
header .nav .ydd_btn.click span.span03{transform:rotate(-45deg);-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg);position:relative;top:-6px;margin-top:0px;}
header .nav .ydd_btn.click span.span02{ width:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;}




.main .box .box1{text-align:center;width: 50%;float: left;position: relative;overflow: hidden;}
.main .box .box2{text-align:center;width: 50%;float: right;position: relative;overflow: hidden;}
.main .box .box1 .hezi{position:relative;overflow: hidden;}
.main .box .box1 .hezi .img{height:400px;width: 50%;float: left;}
.main .box .box1 .hezi .img img{height:400px;}
.main .box .box1 .hezi .txt_box{height:400px;width: 50%;float: right;text-align: center;display: table;}
.main .box .box1 .hezi .txt_box h4{font-size: 26px;color: #000000;font-weight: bold;font-family: '楷体';}
.main .box .box1 .hezi .txt_box span{font-size:12px;color: #000000;display: block;font-family: Courier New;text-transform: uppercase;padding-top:5px;}
.main .box .box1 .hezi .txt_box .txt{padding:0 75px;font-size: 16px;color: #000000;line-height: 30px;text-align: center;height: 120px;overflow: hidden;margin: 15px 0 17px 0;}
.main .box .box1 .hezi a .xg{position: absolute;top:-100%;right:0;width: 100%; height: 100%;background: rgba(0,0,0,0.5);overflow: hidden;}

.main .box .box1 .hezi .xg .tit{color:aliceblue;position: absolute;top:50%;margin-top: -30px;left: 0;right: 0;}
.main .box .box1 .hezi .xg .tit h4{font-size:28px;font-family: '楷体';}
.main .box .box1 .hezi .xg .tit span{font-size:40px;border: 1px solid #fff;border-radius: 100%;width: 42px;height: 42px;display: block;line-height: 42px;margin: 0 auto;margin-top: 15px;}

.main .box .box1 .hezi:nth-child(2) .img{float:right;}
.main .box .box1 .hezi:nth-child(2) .txt_box{float:left;}
.main .box .box1 .hezi:nth-child(2) a .xg{position: absolute;bottom:-100%;top:inherit;width: 100%; height: 100%;background: rgba(0,0,0,0.5);overflow: hidden;}








.main .box .box2 .hezi .img{width:100%;}
.main .box .box2 .hezi .img{height:800px;}
.main .box .box2 .hezi .img img{height:800px;}
.main .box .box2 .hezi a .xg{position: absolute;bottom:0;top:inherit;right: -100%; width: 100%; height: 100%;background: rgba(0,0,0,0.5);overflow: hidden;}

.main .box .box2 .hezi .wenzi{position:absolute;left: 0;right: 0;top:60%;}
.main .box .box2 .hezi .wenzi .wz1{color: aliceblue;font-size: 36px;line-height: 42px;font-family: '楷体';}
.main .box .box2 .hezi .wenzi .wz2{color: aliceblue;font-size: 18px;font-family: 'Courier New';text-transform: uppercase;background: url(../images/bj1.png)no-repeat center;}




.main .box .box1 .hezi:nth-child(2) .txt_box img{transform:rotate(180deg) }
.main .box:nth-child(2) .box1 .hezi .txt_box img{transform:rotate(180deg) }
.main .box:nth-child(2) .box1 .hezi:nth-child(2) .txt_box img{transform:rotate(0deg) }

.main .box:nth-child(2) .box1{float:right;}
.main .box:nth-child(2) .box2{float:left;}
.main .box:nth-child(2) .box2 .hezi .wenzi .wz2{background: url(../images/bj2.png)no-repeat center;}


.main .box:nth-child(2) .box1 .hezi .txt_box{float:left;}
.main .box:nth-child(2) .box1 .hezi:nth-child(2) .txt_box{float:right;}



.box .open{text-align:center;padding: 75px 0 52px 0}
.box .open .bt{color:#fff;font-size: 30px;}
.box .open span{color:#fff;font-size: 18px;font-family: 'Courier New';text-transform: uppercase;display: block;line-height:35px;}


.main1 .box{background:#808283;}
.main1 .box  .lb2{max-width: 1380px;margin-bottom: 80px;z-index:0;}
.main1 .box  .lb2 .swiper-container{max-width: 1250px;padding-bottom: 2px;}
.main1 .box  .lb2 .swiper-container .img{border:1px solid #9d9fa1;cursor: pointer;}
.main1 .box  .lb2 .swiper-container .img:hover{border:1px solid #fff;}
.main1 .box  .lb2 .swiper-button-prev{background-image:url(../images/lb2.png);width: 22px;height: 40px;margin-top: -20px;background-size: contain;}
.main1 .box  .lb2 .swiper-button-next{background-image:url(../images/lb2.png);width: 22px;height: 40px;margin-top: -20px;background-size: contain;transform:rotate(180deg) }



.main2 .box .open{border-top: 1px solid #9d9fa1;}
.main2 .box{background:#6c6e6f;padding-bottom: 80px;}
.main2 .box .input{max-width:1100px;margin: 0 auto;}
.main2 .box .input form{}
.main2 .box .input .kuai{float: left;width: 33.33%;text-align: center;padding: 0 7px;margin-bottom:30px;}
.main2 .box .input .kuai input{width:100%;float:left;height: 40px;line-height: 40px; color: rgba(0,0,0,0.8);background: #fff;font-size: 12px;border: 0;margin-bottom: 12px;box-shadow: 0 0 5px #5c5b5b  inset;border-radius:4px;padding-left: 15px;}
.main2 .box .input .kuai textarea{width:100%;height: 40px;height: 92px;border: 0;box-shadow: 0 0 5px #5c5b5b  inset;border-radius:4px;padding-left: 15px;color: rgba(0,0,0,0.8);background: #fff;line-height: 40px;max-width: 100%;}
.main2 .box .input form button{color:aliceblue;font-size: 14px;width: 167px;line-height: 40px;margin: 0 auto;text-align: center;background: #787b7d;border: 0;display: block;border-radius:4px;}
.main2 .box .input form button:hover{text-decoration:underline;}




footer{background:#575a5d;padding: 76px 0 58px 0;text-align: center;}
footer ul{text-align:center;font-size: 0;}
footer ul li{font-size: 12px;color: #abacae;display: inline-block;padding: 0 13px;position: relative;line-height: 12px;margin-bottom: 10px;}
footer ul li:after{content:"";width: 1px;height: 12px;background: #abacae;position: absolute;left: 0;transform:rotate(18deg);}
footer ul li:hover{text-decoration: underline;}
footer ul a:first-of-type li:after{width:0;height: 0;display: none;}
footer .txt{color:#abacae;font-size: 14px;margin-bottom: 7px;padding: 13px 0;}
footer .bq{color:#abacae;font-size: 12px;margin-bottom: 7px;padding-top: 7px;}


.ny .box{background:#888585 !important;padding:60px 15px;}
.ny{}
.ny .box .open{padding-bottom: 30px;}
.ny .box .open .bt{font-weight: bold; color:#000000;font-family: 微软雅黑;}
.ny .box .open span{color:#000000;}

.ny .box .ul{font-size:0;text-align: center;margin-bottom:40px;}
.ny .box .ul li{font-size: 16px;color: #000000;display: inline-block;padding: 0 15px;line-height: 16px;position: relative;margin-bottom: 10px;}
.ny .box .ul li:after{content:"";width: 2px;height: 16px;background: #000000;border-left: 1px solid rgba(156,156,156,1);position: absolute;left:0;}
.ny .box .ul li:hover{text-decoration: underline;}
.ny .box .ul a:first-of-type li:after{width:0;height: 0;display: none;}
.ny .box .hezi{padding:0 7.5%;}
.ny .box .hezi .img{width:25%;float: left;padding: 0 14px;position: relative;overflow: hidden;margin-bottom: 28px;}
.ny .box .hezi .img a{position: relative;display: block;overflow: hidden;}

.ny .box .hezi .txt_box{position: absolute;width:90%;height: 90%;background:rgba(0,0,0,0.5);left: 0px;right: 0px; bottom:-100%;text-align: center;margin:auto;}
.ny .box .hezi .txt_box .txt{position: absolute;left: 0;right: 0;top:50%;margin-top: -10px;padding: 0 7px;}
.ny .box .hezi .txt_box .txt h4{font-size:18px;color: aliceblue;}
.ny .box .hezi .img:hover a .txt_box{bottom:5%;display: block;}



.ny .box .lxhezi{text-align:center;padding: 0 13%;}
.ny .box .lxhezi .txt{font-size:14px;color: #000000;}
.ny .box .lxhezi .hao{font-size:30px;line-height: 60px; color: #000000;margin: 30px 0;word-wrap: break-word;}
.ny .box .lxhezi .ditu{width:100%;text-align: center;margin-top:40px;height: 500px;}
.ny .box .lxhezi .ditu img{max-width: 100%;}


.ny .box .gyhezi{text-align:center;padding: 0 13%;}
.ny .box .gyhezi .txt{font-size:14px;color: #000000;line-height: 30px;margin-bottom: 25px;}
.ny .box .gyhezi .img{width:100%;text-align: center;margin-bottom: 25px;}
.ny .box .gyhezi .img img{max-width: 100%;}
.ny .box .gyhezi .txt span{font-size:18px;color:#000000;font-weight: bold;}



.ny .box .xq{text-align:center;}
.ny .box .xq .top2{font-size:19px;font-weight: bold;}
.ny .box .xq .shijian{font-size:12px;color: #B7B7B7;line-height: 25px;}
.ny .box .xq img{max-width:100%;text-align: center;margin:15px 0;}
.ny .box .xq .txt{color:#000000;line-height: 27px;font-size: 14px;margin: 5px 0;}




@media (min-width:992px){
	
.main .box .box1 .hezi a:hover .xg{display: block;top: 0;}
.main .box .box1 .hezi:nth-child(2) a:hover .xg{display: block;bottom: 0;top:inherit;}
.main .box .box2 .hezi a:hover .xg{display: block;bottom: inherit;top:inherit;right: 0;}



}

@media (max-width:1400px){
	.banner .lb1,.lb1 img{height: auto;}
}	


@media (max-width:1350px){
	
	.main .box .box1 .hezi .txt_box .txt{padding:0 50px;}
	.main1 .box .lb2 .swiper-button-next{display:none;}
	.main1 .box .lb2 .swiper-button-prev{display:none;}
	.main1 .box .lb2{width:92%;padding-bottom: 20px;}
	.container-fluid{padding:0!important;}
	header .logo{padding-left: 15px!important;}


}

@media (max-width:1200px){
	.main .box .box1 .hezi .txt_box .txt{padding:0 30px;}
	
	.main .box .box1 .hezi .img{height:300px;}
	.main .box .box1 .hezi .img img{height:300px;}
	.main .box .box1 .hezi .txt_box{height:300px;}
	.main .box .box2 .hezi .img{height:600px;}
	.main .box .box2 .hezi .img img{height:600px;}

}

@media (max-width:1100px){
.main .box .box1 .hezi .txt_box .txt{padding:0 18px;}
}



@media (max-width:991px){
	.main .box .box1{width: 100%;}
	
	.main .box .box1 .hezi .img{height:400px;}
	.main .box .box1 .hezi .img img{height:400px;}
	.main .box .box1 .hezi .txt_box{height:400px;}
	.main .box .box2 .hezi .img{height:auto;}
	.main .box .box2 .hezi .img img{height:auto;}
	
	.ny .box .gyhezi{padding: 0 4%;}
	
	.ny .box .open span{line-height:22px;}
	.ny .box .open{padding-bottom:22px;}
	
	.ny .box .hezi .img{width:33.33%;}



}

@media (max-width:767px){
	header .logo .txt_box{display:none;}
	header .logo .img img{height:37px;}
	header .logo .ss_box{margin-top:9px;padding-right:90px;}
	header .nav .ydd_btn{top:14px;}
	header .logo .img{padding-left:33px;}
	.banner{margin-top:69px;}
	header .nav .sjdnav{width:100%;}
	header .nav .container-fluid{padding:0;}
	header .nav .sjdnav{padding-top:69px;}
	.banner .lb1, .lb1 img{min-height: 222px;}
	
	.main .box .box1 .hezi .img{height:300px;}
	.main .box .box1 .hezi .img img{height:300px;}
	.main .box .box1 .hezi .txt_box{height:300px;}
	
	.main .box .box1 .hezi .xg .tit h4{font-size:19px;}
	.main .box .box1 .hezi .xg .tit span{font-size:26px;width: 33px;height: 33px;line-height: 33px;margin-top: 7px;}
	.main .box .box2 .hezi .wenzi .wz1{font-size:33px;line-height: 35px;}
	.main .box .box2 .hezi .wenzi{top:50%;margin-top: -30px;}
	
.box .open{padding: 45px 0 37px 0}
.box .open .bt{font-size: 27px;}
.box .open span{font-size: 18px;line-height:30px;}
.main1 .box .lb2{margin-bottom:55px;}
	
	.main2 .box .input .kuai{width:50%;margin-bottom: 0;}
	.main2 .box .input .kuai:nth-child(3){width:100%;padding-bottom: 11px;}
	.main2 .box{padding-bottom:38px;}
	
	footer{padding:53px 15px 37px 15px}
	
	
	header .logo .ss_box .ss_gb{right:33px;top:60px;}
	header .logo .ss_box .input form{width:90%;}
	header .logo .ss_box .input form input{font-size:22px;width: calc(100% - 30px);}
	header .logo .ss_box .input form button{font-size:26px;width: 30px;height: 30px;}
	header .logo .ss_box .ss_gb{width:30px;height: 30px;font-size:33px;line-height: 30px;}
	header .logo .ss_box .input form{top:0;margin-top: 40%;}

	.ny .box .hezi .img{width:50%;padding: 0 10px;margin-bottom: 20px;}
	.ny .box .hezi{padding:0 4%;}
	.ny .box .lxhezi{padding:0 4%;}
	.ny .box .ul{margin-bottom:25px;}
	
	
}

@media (max-width:600px){


}


@media (max-width:479px){
	header .logo{padding:15px 0 11px 0;}
	header .logo .img{padding:0;}
	header .logo .img img{height:30px;}
	.banner{margin-top:55px;}
	header .logo .ss_box{margin-top:6px;padding-right:76px;}
	header .nav .ydd_btn{right:20px;top:10px;}
	.banner .lb1, .lb1 img{min-height:145px;}
	

	.main .box .box1 .hezi .img{height:200px;}
	.main .box .box1 .hezi .img img{height:200px;}
	.main .box .box1 .hezi .txt_box{height:200px;}
	

.main .box .box1 .hezi .txt_box h4{font-size: 20px;}
.main .box .box1 .hezi .txt_box span{font-size:12px;padding-top:0px;line-height: 22px;}
.main .box .box1 .hezi .txt_box .txt{font-size: 14px;line-height:23px;height: 92px;margin:0;}
	
		.main .box .box2 .hezi .wenzi .wz1{font-size:26px;line-height:35px;}

	.box .open{padding: 30px 0 20px 0}
.box .open .bt{font-size: 22px;}
.box .open span{font-size: 15px;line-height:15px;padding-top: 4px;}
.main1 .box .lb2{margin-bottom:0px;}
	
	.main2 .box .open{border:0;}
	
	.main2 .box .input .kuai{width:100%;float: none;padding:0 15px;}
	.main2 .box .input .kuai:nth-child(3){width:100%;padding-bottom: 11px;}
	.main2 .box{padding-bottom:38px;}
	header .nav .sjdnav li{line-height:45px;}
	
	
	.ny .box .open span{padding-top:0;line-height: 18px;}
	.ny .box .gyhezi .txt{line-height:25px;}
	
	.ny .box .hezi .txt_box .txt h4{font-size:15px;}
	
	.ny .box .gyhezi{padding:0;}
	.ny .box .lxhezi{padding:0;}
	.ny .box .hezi{padding:0;margin: 0 -9px;}
	.ny .box .lxhezi .ditu{height:350px;}
	.ny .box .lxhezi .hao{font-size:20px;line-height: 36px;}
}



@media (max-width:350px){
	
		.main .box .box1 .hezi .img{height:150px;}
	.main .box .box1 .hezi .img img{height:150px;}
	.main .box .box1 .hezi .txt_box{height:150px;}
	

.main .box .box1 .hezi .txt_box h4{font-size:18px;}
.main .box .box1 .hezi .txt_box span{font-size:10px;line-height:11px;}
.main .box .box1 .hezi .txt_box .txt{font-size: 13px;line-height:19px;text-align: center;height:76px;}



}





#tabBar{ position: fixed; left:20px; bottom:20px; z-index: 99; width: calc(100% - 40px); height: 50px;}
	#tabBar.active{ animation: tabBarAnimation 3s 1s infinite linear;  }
	#tabBar .clickbtn{ position: absolute; right: 0; bottom: 0; z-index: 2; width:50px; height:50px; font-size: 0; line-height: 50px; background: rgba(255,255,255,0.8); border-radius: 50%; }
	#tabBar .clickbtn span{ display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; }
	#tabBar .clickbtn img{ width: 22px;}
	#tabBar .clickbtn.on{ animation:clickbtnAnimation 10s 0s infinite linear; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }
	#tabBar .clickbtn.on:before{ content: ""; position: absolute; left: 0; bottom: -5px; z-index: 1; width: 20px; height: 5px;}
	#tabBar .clickbtn.active{ background:url(../images/tabBar/xian2.png) rgba(110,209,207,1); background-size: 100% 100%; }
	#tabBar .clickbtn.active:before{ content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; border:solid 1px rgba(255,255,255,0.2); border-radius: 50%; }
	#tabBar .clickbtn.active > img{ opacity: 0;}
	#tabBar .clickbtn.active span{ opacity: 1; }
	#tabBar .navigation{ position: absolute; left:calc(100% - 100px); bottom: 0; z-index: 1; width:0; height: 50px; border-radius: 25px; transition: all 0.3s;}
	#tabBar .navigation:before{ content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border-radius: 25px; 
background:-moz-linear-gradient(left,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.6) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.6) 100%);background:linear-gradient(to right,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.6) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff',endColorstr='#99ffffff',GradientType=1 );}
	#tabBar .navigation ul{ position: relative; z-index: 2; padding: 0 60px 0 20px; }
	#tabBar .navigation ul li{ width: calc(100% / 3); font-size: 0; }
	#tabBar .navigation ul li a{ position: relative; left: 10px; display: inline-block; vertical-align: top; line-height: 50px;opacity: 0; }
	#tabBar .navigation ul li a .tab-icon{ margin-right: 5px;}
	#tabBar .navigation ul li a .tab-icon img{ width: 22px; }
	#tabBar .navigation ul li a .tab-title{ font-size: 12px;color: #333; }
	#tabBar .navigation.active{ box-shadow: 5px 5px 10px rgba(0,0,0,0.2); animation: navigationAnimation 0.5s 0s linear forwards; }
	#tabBar .navigation.active ul li:nth-child(1) a{animation:navigationAAnimation 0.3s 0.5s linear forwards; }
	#tabBar .navigation.active ul li:nth-child(2) a{animation:navigationAAnimation 0.3s 0.6s linear forwards; }
	#tabBar .navigation.active ul li:nth-child(3) a{animation:navigationAAnimation 0.3s 0.7s linear forwards; }		

	@keyframes tabBarAnimation{
		0%{transform:translate(0,0);}
		30%{transform:translate(0,5px);}
		50%{transform:translate(0,0);}
		70%{transform:translate(0,-5px);}
		100%{transform:translate(0,0);}
	}

	@keyframes navigationAnimation{
		0%{left:calc(100% - 100px); width: 0; }
		80%{ left: -10px; width:100%; }
		90%{ left:  5px; width:100%; }
		100%{ left: 0; width:100%; }
	}

	@keyframes navigationAAnimation{
		from{ left: -10px; opacity: 0; }
		to{ left: 0; opacity: 1; }
	}

	@keyframes clickbtnAnimation{
		0%{ transform: rotateY(0deg); }
		10%{transform: rotateY(270deg); }
		15%{transform: rotateY(180deg); }
		30%{transform: rotateY(0deg); }
		100%{transform: rotateY(0deg); }
}