android-cloud-H5/microserviceUserH5/static/css/company/main.css

@media only screen and (min-width: 375px) and (max-width: 451px) {
    .container-inner{
        width: 80%;
        padding: 3rem 3rem;
    }
    .bottom-con{
        width: 80%;
        font-size: 12px;
    }
}
@media only screen and (min-width: 330px) and (max-width: 374px) {
    .container-inner{
        width: 90%;
        padding: 3rem 2rem;
    }
    .bottom-con{
        width: 90%;
        font-size: 12px;
    }
    .bottom-left{
        flex: 0.3!important;
    }
    .bottom-right {
        flex: 1.7!important;
    }
}
@media only screen and (max-width: 331px) {
    .container-inner{
        width: 90%;
        padding: 3rem 2rem;
    }
    .bottom-con{
        width: 90%;
        font-size: 12px;
    }
}
@media only screen and (max-width: 451px) {
    .top-title {
        font-size: 17px;
        letter-spacing: 2px;
    }
    .top-font {
        font-size: 14px;
        line-height: 2.5rem;
        padding: 2rem 0;
        letter-spacing: 1px;
    }
    .recv-btn {
        margin: 2.5rem 0;
    }
    .code-con{
        margin: 0;
    }
    .code-font {
        font-size: 12px;
    }
    .code-item {
        width: 40%;
    }
    .code-item img {
        width: 75%;
    }
    .bottom-item {
        padding-right: 0;
    }
}
@media only screen and (min-width: 451px) {
    .container-inner {
        width: 60%;
        padding: 3rem 6rem;
    }
    .top-title {
        font-size: 3rem;
        letter-spacing: 4px;
    }
    .top-font {
        font-size: 2rem;
        line-height: 3.5rem;
        padding: 3rem 0;
        letter-spacing: 3px;
    }
    .recv-btn {
        margin: 3.5rem 0;
    }
    .code-con {
        margin: 3rem 0;
    }
    .code-font {
        font-size: 1.5rem;
    }
    .code-item {
        width: 30%;
    }
    .code-item img {
        width: 75%;
    }
    .bottom-con {
        width: 60%;
        font-size: 2rem;
    }
    .bottom-item {
        padding-right: 50px;
    }
}
.top-icon-con {
    font-size: 2rem;margin-bottom: 4rem;text-align: left;
}
.code-font {
    margin-top: 10px;
}
.code-item {
    display: inline-block;
}
.container-inner {
    background-color: rgba(225, 223, 244, 0.08);
    margin: 0 auto;
    text-align: center;
}
.container{
    width: 100%;
    overflow: hidden;
    position: relative;
    color: white;
    background-image: url(../../img/company/background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bottom-con {
    background-color: rgba(105, 91, 214, 0.36);
    padding: 2.5rem;
    margin: 0 auto;
    display: flex
}
.bottom-right p{
    text-align:left;
}
.bottom-item {
    text-align: center;
}
.top-title {
    padding: 5px 0;
    background-color: rgba(71, 148, 254, 0.66);
}
.recv-ipt{
    width: 100%;
    border-radius: 2rem;
    text-align: center;
    color: #BBBBBB;
    background-color: white;
    border: none;
}
.recv-btn {
    border-radius: 5rem;
    width: 100%;
    border:none;
    background-color: #daba04;
    color: #ffffff;
}
.recv-btn a:hover{
    color: #ffffff;
    background-color: #daba04;
    text-decoration: none;
}
.recv-btn a:active{
    text-decoration: none;
    background-color: #daba04;
}
.recv-btn a:visited{
    background-color: #daba04;
    text-decoration: none;
}
@media only screen and (min-width: 375px) and (max-width: 451px) {
    .bottom-left {
        flex:0.3;text-align: right
    }
    .bottom-right {
        flex:1.7;
    }
}
@media only screen and (min-width: 300px) and (max-width: 374px) {
    .bottom-left {
        flex:0.15;text-align: right
    }
    .bottom-right {
        flex:1.85;
    }
}
@media only screen and (min-width: 450px) and (max-width: 1368px) {
    .bottom-left {
        flex:0.9;text-align: right
    }
    .bottom-right {
        flex:2.1;
    }
}
@media only screen and (min-width: 1368px) {
    .bottom-left {
        flex:1.1;text-align: right
    }
    .bottom-right {
        flex:1.9;
    }
}