html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; */
}

html {
    font-size: 16px;
}

body {
    background-color: #293657;
    display: flex;
    flex-direction: column;
}

.logo {
    height: auto;
    align-self: center;
    width: 7.4rem;
}

.flex-grow {
    flex-grow: 1;
}

.content-wrap {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 2.5rem;
}

.content-wrap .btns-group {
    display: flex;
    flex-direction: column;
}

.content-wrap .btns {
    width: 25.2rem;
    height: 5.3rem;
    color: #ffffff;
    display: flex;
    font-size: 1.3rem;
    align-items: center;
    text-decoration: none;
}

.content-wrap .btns.ios {
    border: solid 0.1rem #009cff;
    color: #009cff;
}

.content-wrap .btns.android {
    border: solid 0.1rem #adce05;
    color: #adce05;
}

.content-wrap .btns.h5 {
    border: solid 0.1rem #ffffff;
    color: #ffffff;
}

.content-wrap .btns:not(:first-child) {
    margin-top: 2.9rem;
}

.content-wrap .btns .icon {
    width: 43%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.content-wrap .btns .icon img {
    width: 1.8rem;
    margin-right: 16.6%;
}

.footer {
    color: #836a3a;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 0.4rem;
    padding-bottom: 1rem;
}

.footer.flex-grow {
    height: 0;
    width: 100%;
}

.footer>div {
    text-align: center;
}

@media (orientation: portrait) {
    body {
        background: url("../imgs/m-bg@2x.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 100% 100%;
        width: 100%;
        height: 100%;
    }
    .logo {
        width: 11.9rem;
    }
    .content-wrap {
        margin-top: 7.5rem;
    }
    .content-wrap>.sample-image {
        display: none;
    }
    .content-wrap .btns {
        border-radius: 0.5rem;
    }
    .content-wrap .btns .icon img {
        width: 2.5rem;
    }
    .footer {
        font-size: 0.9rem;
    }
}

@media (orientation: landscape) {
    body {
        background: url("../imgs/lc-bg@2x.jpg");
        background-size: 100% 100%;
        background-position: 100% 100%;
        width: 100%;
        height: 100%;
    }
    .logo {
        width: 7.4rem;
    }
    .content-wrap {
        margin-top: 2.5rem;
    }
    .content-wrap>.sample-image {
        width: 18rem;
        height: 8.9rem;
    }
    .content-wrap .btns-group {
        margin-left: 3.1rem;
    }
    .content-wrap .btns {
        width: 6.8rem;
        height: 2.1rem;
        font-size: 0.6rem;
        border-radius: 0.2rem;
    }
    .content-wrap .btns:not(:first-child) {
        margin-top: 1.4rem;
    }
    .content-wrap .btns .icon img {
        width: 0.8rem;
        margin-right: 9.2%;
    }
    .footer-content {
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width:320px) {
    html {
        font-size: 10px;
    }
}

@media screen and (min-width:321px) and (max-width:423px) {
    html {
        font-size: 11px;
    }
}

@media screen and (min-width:424px) and (max-width:846px) {
    html {
        font-size: 12px;
    }
}

@media screen and (min-width:847px) and (max-width:962px) {
    html {
        font-size: 13px;
    }
}

@media screen and (min-width:963px) and (max-width:1024px) {
    html {
        font-size: 15px;
    }
}

@media screen and (min-width:1025px) and (max-width:1280px) {
    html {
        font-size: 20px;
    }
}

@media screen and (min-width:1281px) and (max-width:1366px) {
    html {
        font-size: 25px;
    }
}

@media screen and (min-width:1367px) and (max-width:1440px) {
    html {
        font-size: 30px;
    }
}

@media screen and (min-width:1441px) and (max-width:1600px) {
    html {
        font-size: 35px;
    }
}

@media screen and (min-width:1601px) and (max-width:1920px) {
    html {
        font-size: 40px;
    }
}


/* @media screen and (min-width:1921px) {
    html {
        font-size: 35px;
    }
} */