.banner{
    width:100%;
    height:600px;
    background-image:url(images/lianxi.jpg);
    background-position: center bottom;
    background-size:100% 100%;
    overflow:hidden;
    
    
}

/*
.banner::before{
    position:absolute;
    left:0;
    top:0;
    right:0;
    background:url('images/mask.png') repeat 0 0;
    z-index:1;
    content:"";
    opacity: 0.2;
    height:600px;
}
*/ 

.main{
    width:1080px;
    margin:21px auto 30px;
    background:#fff;
    padding:2% 1% 3%;
    border-radius: 10px;
}

.main h3{
    font-weight:bold;
    text-align:left;
    margin:30px auto 5px;
    font-size:26px;
}
.main .layui-progress{
    margin-bottom:2em;
}

.main ul.yzjm{
    zoom:1;
}

/*业务联系*/
.main .ywlx li{
    margin-bottom: 10px;
    box-shadow:2px 2px 10px #d3cece;
    width:40%;
    float:left;
    margin:1% 3%;
    padding:2% 2%;
    border-radius: 4px;
    cursor:pointer; 
    height:130px;
    border-bottom:4px solid #2c8dfb;
    font-size:14px;
    color:#999;
    background:#fafafa;
}


.main .ywlx li:hover{
    background-color: #fff;
    border-bottom:4px solid #f60;
    color:#444;
}


.main .ywlx h5{
    font-size:20px;
    border-bottom:1px dashed #ccc;
    padding:5px 0;
    text-align:right;
}


.main .ywlx p{
    line-height:35px;
}



.main .ywlx1 li{
    margin-bottom: 10px;
    box-shadow:2px 2px 10px #d3cece;
    width:40%;
    float:left;
    margin:1% 3%;
    padding:2% 2%;
    border-radius: 4px;
    cursor:pointer; 
    height:190px;
    border-bottom:4px solid #2c8dfb;
    font-size:14px;
    color:#999;
    background:#fafafa;
}

.main .ywlx1 li:hover{
    background-color: #fff;
    border-bottom:4px solid #f60;
    color:#444;
}


.main .ywlx1 h5{
    font-size:20px;
    border-bottom:1px dashed #ccc;
    padding:5px 0;
    text-align:right;
    margin-bottom:10px;
}


.main .ywlx1 p{
    line-height:35px;
}


/*加油站加盟*/
.main .yzjm li{
    border:1px solid #eee;
    box-shadow:2px 2px 10px #d3cece;
    width:29%;
    float:left;
    margin:1%;
    padding:1%;
    margin-bottom: 40px;
    border-radius: 10px;
    cursor:pointer;
    transition:all linear 0.3s;
}

.main .yzjm li .imgbox{
    height:210px;
    background-size: cover;
    background-position: center;
    transition:all linear 0.3s;
}

.main .yzjm li .text{
    padding:10px 0 10px 0;
    height:80px;
}

.main .yzjm li p{
    line-height:1.5em;
    color:#666;
}

.main .yzjm li:hover{
    background:#2c8dfb;
    transition:all linear 0.2s;
}

.main .yzjm li:hover p{
    color:#fff;
    transition:all linear 0.2s;
}

.main .yzjm li:hover .imgbox{
    animation: animatedBackground 0.6s linear;
    animation-fill-mode:forwards;
}

/*行政联系*/
.main .contact_info{
    background:#2c8dfb;
    height:100%;
    width:100%;
    color:#fff;
    height:500px;
    border:1px solid #2c8dfb;
}

.main .contact_info ul{
    margin:80px 0 0 40px;
}

.main .contact_info li{
    font-size:16px;
    line-height:35px;
    position:relative;
    padding-left:2em;
}

.main .contact_info li a{
    color:#fff;
}

.main .contact_info li::before{
    font-size:25px;
    font-family: "iconfont";
    position:absolute;
    left:0;
    top:0px;
    width:30px;
}

.main .contact_info li:nth-child(1)::before{
    content:'\e628';
}

.main .contact_info li:nth-child(2)::before{
    content:'\e628';
}

.main .contact_info li:nth-child(3)::before{
    content:'\e630';
}

.main .contact_info li:nth-child(4)::before{
    content:'\e66f';
}

.main .contact_info li:nth-child(5)::before{
    content:'\e6c7';
}

.main .contact_info li:nth-child(6)::before{
    content:'\e676';
}
.main .contact_info li:nth-child(7)::before{
    content:'\e6c6';
}

@media (max-width:767px){
    .main{
        width:98%;
        margin-top:5px;
        padding-bottom:0px;
        margin-bottom:0px;
    }

    .banner{
        height:200px;
        background-size: cover;
    }

    .banner::before{
        display:none;
    }   

    .foot{
        margin-top:0px;
    }

    .main h3{
        margin-top:10px;
        font-size:20px;
    }

    .main .ywlx li{
        width:88%;
        height:130px;
        margin-bottom:20px;
    }

    .main .yzjm li{
        margin-bottom: 40px;
        border:1px solid #eee;
        box-shadow:2px 2px 10px #d3cece;
        width:80%;
        float:left;
        margin:5%;
        padding:5%;
        border-radius: 10px;
        cursor:pointer;
    }

    .main .ywlx1 li{
        margin-bottom: 40px;
        border:1px solid #eee;
        box-shadow:2px 2px 10px #d3cece;
        width:80%;
        float:left;
        margin:5%;
        padding:5%;
        border-radius: 10px;
        cursor:pointer;
    }
    
    .main .yzjm li .imgbox{
        height:auto;
    }

    .main .yzjm li .text{
        padding:10px 0 10px 0;
        min-height:80px;
        height:auto;
    }
}