html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
      
    }
    .header-con{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	z-index:50;
    }
    .footer-con{
    	
    }
    
    .nav-con{
    	position:absolute;
    	top:52px;
    	left:0;
    	width:100%;
    	z-index:2;
    }
    .nav-con nav.navbar{
    	border-radius:0;
    	background:rgba(0,0,0,0);
    	padding:0;
    }
    .nav-con nav .fuel_gas li a{
    	color:#fff;
    }
    .banner-con{
    	position:absolute;
    	left:0;
    	right:0;
    	bottom:0;
    	top:52px;
    	
    }
    .banner-con .swiper-slide {
        
    }
    .swiper-pagination-bullet{
    	width:28px;
    	margin:0 10px;
    	border-radius:4px;
    	background:#fff;
    	opacity:1;
    }
    .swiper-pagination-bullet-active{
    	background:#3cb309;
    }
   	.swiper-container-horizontal > .swiper-pagination-bullets{
   		bottom:28px;
   	}
    
    .banner-con .img-mask{
    	width:100%;
    	height:100%;
    	background:rgba(0,0,0,.3);
    	position:absolute;
    	top:0;
    	left:0;
    	text-align: center;
        font-size: 18px;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    	
    }
    .banner-con .img-box{
    	width:100%;
    	height:100%;
    	background:url(/static/image/500265791.jpg) center center no-repeat;
    	background-size:cover;
    }
   
  
    .banner-con .keyWord{
    	color:#fff;
    }
    .keyWord h4{
    	font-size:40px;
    	word-spacing:25px;
    	
    }
    .keyWord .text{
    	font-size:20px;
    	line-height:40px;
    	margin-top:40px;
    }
    .keyWord .btn{
    	display:inline-block;
    	width:140px;
    	height:40px;
    	border:solid 1px #fff;
    	border-radius:0px;
    	color:#fff;
    	font-size:16px;
    	line-height:40px;
    	padding:0;
    	margin-top:30px;
    	
    }
    
    .swiper2-con{
    	position:relative;
    	height:100%;
    }
    .swiper2-con .fun-con{
    	position:absolute;
    	top:50px;
    	bottom:180px;
    	width:100%;
    }
    .fun-con a{
    	display:block;
    	height:100%;
    }
    .fun-con .item1{
    	position:absolute;
    	top:0;
    	bottom:50%;
    	left:0;
    	right:33.3333%;
    	background:#eaf6ff;
    	border-bottom:solid 4px #fff;
    	
    }
    .fun-con .item2{
    	position:absolute;
    	top:0;
    	bottom:0%;
    	left:66.6666%;
    	right:0%;
    	background:#f0f0f0;
    	border-left:solid 4px #fff;
    }
    .fun-con .item3{
    	position:absolute;
    	top:50%;
    	bottom:0;
    	left:0;
    	right:66.6666%;
    	background:#fff9e9;
    	border-right:solid 2px #fff;
    	
    }
    .fun-con .item4{
    	position:absolute;
    	top:50%;
    	bottom:0;
    	left:33.3333%;
    	right:33.3333%;
    	background:#eaffea;
    	border-left:solid 2px #fff;
    }
    .swiper2-con .footer-con{
    	position:absolute;
    	bottom:0;
    	left:0;
    	width:100%;
    	height:180px;
    	background:#555;
    
    }
    .fun-con .img-con{
    	position:absolute;
    	top:50%;
    	left:50%;
    	height:80%;
    	transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%); 	/* IE 9 */
		-moz-transform:translate(-50%,-50%); 	/* Firefox */
		-webkit-transform:translate(-50%,-50%); /* Safari ºÍ Chrome */
		-o-transform:translate(-50%,-50%)	/* Opera */
    }
    .fun-con .img-con img{
    	width:auto;
    	height:100%;
    }
    .items .mask{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	background:#fff;
    	opacity:0;
    }
    .items:hover .mask{
    	opacity:0.2;
    }
    
    .banner-con .img-box .button{
    	width:100px;
    	height:30px;
    	position:absolute;
    	top:50%;
    	left:50%;
    	margin-left:-50px;
    	color:#fff;
    	border:solid 2px #fff;
    	text-align:center;
    	line-height:30px;
    }
    .banner-con .img-box .button.button1:hover{
    	color:#3cb309;
    	border-color:#3cb309;
    }