/* ------------------------------------------------------- */
.relation-icon-box{
    width: 100%;
    overflow: hidden;
    padding: 100px 0;
}

.relation-icon{
    width: 1280px;
    margin: 0 auto;
}

.relation-icon ul li{
    width: 25%;
    overflow: hidden;
    float: left;
    text-align: center;
    padding: 0 12px;
}


.relation-icon ul li h6{
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 2px solid #ccc;
    text-align: center;
    transition: all .4s;
}
.relation-icon ul li:hover h6{
    border: 2px solid #046fcd;
    background-color: #046fcd;

}
.relation-icon ul li h6 i{
    display: inline-block;
    background-repeat: no-repeat;
    transition: all .6s;
}
.relation-icon ul li p{
    font-size: 16px;
    color: #333;
    margin-top: 34px;
}
.relation-icon ul li h5{
    font-size: 14px;
    color: #666;
    margin-top: 12px;
}
.relation-icon ul li h5:hover{
    color: #046fcd;
}
.relation-icon ul li:nth-child(1) h6 i{
    width: 28px;
    height: 39px;
    background-image: url('../img/re_ic1.png');
    margin-top: 20.5px;
}
.relation-icon ul li:nth-child(1):hover h6 i{ background-image: url('../img/re_ic1H.png');}

.relation-icon ul li:nth-child(2) h6 i{
    width: 35px;
    height: 35px;
    background-image: url('../img/re_ic2.png');
    margin-top: 22.5px;
}
.relation-icon ul li:nth-child(2):hover h6 i{ background-image: url('../img/re_ic2H.png');}

.relation-icon ul li:nth-child(3) h6 i{
    width: 35px;
    height: 35px;
    background-image: url('../img/re_ic3.png');
    margin-top: 22.5px;
}
.relation-icon ul li:nth-child(3):hover h6 i{ background-image: url('../img/re_ic3H.png');}

.relation-icon ul li:nth-child(4) h6 i{
    width: 35px;
    height: 27px;
    background-image: url('../img/re_ic4.png');
    margin-top: 26.5px;
}
.relation-icon ul li:nth-child(4):hover h6 i{ background-image: url('../img/re_ic4H.png');}



.relation-form-box{
    width: 100%;
    overflow: hidden;
}
.relation-form{
    width: 1280px;
    margin: 0 auto;
    border: 1px solid #e5e5e5;
    padding: 30px 20px;
}

.relation-form ul{
    width: 100%;
    overflow: hidden;
    margin-left: -1%;
}
.relation-form ul li{
    width: 23%;
    margin-left: 2%;
    float: left;
}
.relation-form ul li p{
    font-size: 16px;
    color: #333;
}
.relation-form ul li p span{color: #ff1200;}
.relation-form ul li input{
    display: block;
    height: 40px;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    width: 100%;
    font-size: 16px;
    color: #333;
    margin-top: 12px;
    padding: 0 10px;
}

.relation-form-words{
    width: 98%;
    margin-left: 1%;
    overflow: hidden;
    margin-top: 28px;
}
.relation-form-words p{
    font-size: 16px;
    color: #333;
}
.relation-form-words textarea{
    display: block;
    height: 220px;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    width: 100%;
    font-size: 16px;
    color: #333;
    margin-top: 12px;
    padding: 10px;
}

.relation-form-code{
    width: 98%;
    margin-left: 1%;
    overflow: hidden;
    margin-top: 28px; 
}
.relation-form-code p{
    font-size: 16px;
    color: #333;
}
.relation-form-code input{
    display: block;
    height: 40px;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    width: 200px;
    font-size: 16px;
    color: #333;
    margin-top: 12px;
    padding: 0 10px;
    float: left;
}
.relation-form-code span{
    display: block;
    width: 160px;
    height: 40px;
    margin: 12px 0 0 10px;
    float: left;
}
.relation-form-code span img{
    width: 100%;
    height: 100%;
}

.relation-form-hint{
    width: 98%;
    margin-left: 1%;
    overflow: hidden;
    margin-top: 16px;
}
.relation-form-hint p{
    color: #888;
    font-size: 14px;
}
.relation-form-hint p a{
    text-decoration: underline;
}
.relation-form-hint p a:hover{
    color: #046fcd;
}

.relation-form-click{
    width: 98%;
    margin-left: 1%;
    overflow: hidden;
    margin-top: 20px; 
    text-align: right;
}
.relation-form-click button{
    display: inline-block;
    width: 220px;
    height: 40px;
    font-size: 18px;
    color: #333;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    cursor: pointer;
    transition: all .4s;
}
.relation-form-click button:hover{
    border: 1px solid #046fcd;
    background-color: #046fcd;
    color: #fff;
}

.relation-map-box{
    width: 100%;
    overflow: hidden;
    margin-top: 80px;
}
#allmap{
    width: 100%;
    height: 486px;
}





@media all and (max-width:1380px) {
    .relation-icon {
        width: 94%;
        margin-left: 3%;
    }
    .relation-form {
        width: 94%;
        margin-left: 3%;
    }
}

@media all and (max-width:1300px) {
    .relation-icon-box {
        padding: 60px 0;
    }
}

@media all and (max-width:1280px) {}

@media all and (max-width:1200px) {}


/* ------------------------手机�-------------------------- */

@media all and (max-width:1000px) {
    .relation-icon-box {
        padding: 24px 0;
    }
    .relation-icon ul li {
        width: 50%;
        margin-top: 16px;
    }
    .relation-icon ul li p {
        margin-top: 24px;
    }
    .relation-icon ul li h5 {
        height: 57px;
        overflow: hidden;
        word-wrap: break-word;
    }
    .relation-form ul{
        margin-left: 0%;
    }
    .relation-form ul li {
        width: 100%;
        margin-left: 0%;
        margin-top: 16px;
    }
    .relation-form {
        padding: 12px 16px 28px 16px;
    }
    .relation-form-words{
        width: 100%;
        margin-left: 0%;
        margin-top: 20px;
    }
    .relation-form-code {
        width: 100%;
        margin-left: 0%;
        margin-top: 20px;
    }
    .relation-form-code input {
        width: 120px;
    }
    .relation-form-code span {
        width: 120px;
    }
    .relation-form-click button {
        width: 100%;
    }
    .relation-map-box {
        margin-top: 28px;
    }
    #allmap {
        height: 300px;
    }
}