RailwayTwo/public/assets/css/join.css

.banner-wrapper{
    width: 100%;
    height: 448px;
    background: url(../img/blog/bg.jpg) no-repeat;
}
.contro{
    width: 50%;
    height: auto;
    top: 90px;
    left: 25%;
    position: absolute;
}
@media(max-width:700px ) {
    .contro{
        width: 90%;
        height: auto;
        top: 90px;
        left: 5%;
        position: absolute;
    }
    .contro button {

        width: 40%;

        margin: 20px 30%;
    }
    .ionwrapper{
        margin: auto;
        width: 100%;
        height: auto;
    }
    .small-title{
        font-size: 14px;
    }

    /*.joinwrapper {*/
        /*width: 100%;*/
        /*margin: 10px auto 20px auto;*/
    /*}*/
    .joinwrapper{
        width: 100%;
        margin: 10px auto 20px auto;
    }
    .joinwrapper form{
        width: 80%;
        margin: 0 10%;
    }

}
@media only screen and (min-width: 700px) and (max-width: 966px) {
    .contro button {

        width: 40%;

        margin: 20px 30%;
    }
}
@media (min-width:700px){
    .contro button {

        width: 18%;

        margin: 20px 41%;
    }
    .ionwrapper,.ionwrapper2{
        margin: auto;
        width: 48%;
        height: auto;
    }

    .ionwrapper3{
        margin: auto;
        width: 60%;
        height: auto;
    }

    .small-title{
        font-size: 18px;
    }
    .joinwrapper{
        width: 80%;
        margin: 10px auto 20px auto;
    }
    .joinwrapper form{
        margin: 0 30%;
    }

}
.contro p:first-child{
    font-size: 30px;
    color: #7FBA00;
    text-align: center;
}
.advert{
    font-size: 30px;
    color: #FFF100;
    font-weight: 600;
    text-align: center;
    border-top:2px solid #FFFFFF ;
    border-bottom: 2px solid #FFFFFF ;
}
.contro button{
    border: 1px solid #FFFFFF;
    border-radius: 3px;
    background-color: #7FBA00;
    font-size: 18px;
    color: #FFFFFF;

    height: 40px;

}
.analysis{
    width: 100%;
    height: 448px;
    background: url(../img/blog/joinbg.jpg) no-repeat;
    background-size: cover;

}
.arti{
    padding: 15px;
}
.arti p{
    color: #91908F;
    text-align: center;
}
.tit{
    width: 220px;
    height: auto;
    color: #7FBA00 ;
    font-size: 30px;
    border-bottom: 1px solid  #7FBA00;
    text-align: center;
    padding-top: 30px;
    margin: auto;


}
.advantage{
    width: 100%;
    height: auto;

}
.advantage img{
    width: 60%;
    height: auto;
    margin: 10px 20% 0 20%;
}
.chance{
    width: 100%;
    padding-bottom: 20px;
    color: #FFFFFF;
    background-color:#7FBA00 ;
    text-align: center;
}
.chance>p:first-child{
    font-size: 30px;
    padding-top: 20px;

}
.advantage2{
    width: 100%;
    height: 400px;
}

.ionwrapper div{
    float: left;
    width:30% ;
    margin-left: 3%;
    text-align: center;
}
.ionwrapper2 div{
    margin:10px 0;
}
.ionwrapper3 div{
    margin:10px 0;
    height: 170px;
}
.ionwrapper3 p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.ionwrapper3 p img{
    width: 40%;
}

.ionwrapper div img{
    margin: auto;
    width: 60%;
}
.chance,.agence{
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 20px;
}

.need{
    width: 100%;
    padding-bottom: 20px;
    color: #FFFFFF;
    background-color:#7FBA00 ;
    float: left;
    margin-top: 20px;
}

.article{
    width: 60%;
    height: auto;
    margin:0 20% 0 20%;
    text-align: center;
}
.article p:first-child{
    font-size: 30px;
    padding-top: 30px;
}
.join{
    width: 100%;
    height: auto;
}

.jointit{
    font-size: 30px;
    text-align: center;
}
.joinwrapper div>input{
    /*width: 60%;*/
    height: 30px;
    border: 1px solid #999;
    margin-top: 5px;
    margin-bottom: 5px;
}
.joinbtn{
    width: 30%;
    height: 40px;
    margin: 20px 37%;
    background-color: #7FBA00;
    color: #FFFFFF;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
}