/* 獨立使用在皇昌app下載頁面的 CSS 文件 */
/*app下載頁面路徑 ： D:\Bimfm_MertoCircularLineNorthSection\project\Bimfm_MertoCircularLineNorthSection\Views\Home\AppDownload.cshtml*/

/* Type Selectors */
p {
    margin-bottom: 0;
}

/* 图片样式 */
img {
    width: auto;
    height: 100%;
}

/* 通用样式 */
.android_qr_code,
.ios_qr_code,
.app_download_wrap,
.download_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

/* 内容容器样式 */
.body-content {
    padding: 0;
}

    /* 内容标题样式 */
    .body-content h2 {
        font-weight: 700;
    }

/* 导航栏样式 */
.hc_navbar {
    display: none !important;
}

/* 头部容器样式 */
.header_wrap {
    display: flex;
    justify-content: center;
    gap: 0 10px;
    background: var(---, #00bd5e);
    box-shadow: 9px 5px 10.7px -5px rgba(4, 139, 71, 0.25);
}

/* 头部标题样式 */
.header_wrap_title {
    display: flex;
    align-items: center;
    font-weight: 700;
}

/* 下载标题样式 */
.download_title {
    gap: 5px 0;
    margin-bottom: 30px;
}

    /* 下载标题中的文本样式 */
    .download_title span {
        color: #726A6A;
    }

/* 下载容器标题样式 */
.app_download_wrap .title {
    font-size: 20px;
    font-weight: 700;
    border: 2px solid #048b47;
    border-radius: 20px 20px 0px 0px;
    gap: 0 20px;
    background: #f4f4f4;
    padding: 20px;
}


    /* 下载容器标题中的文本样式 */
    .app_download_wrap .title p {
        color: #048B47;
    }


/* QR Code容器样式 */
.qr_code_wrap {
    display: flex;
    justify-content: center;
    border-right: 2px solid #048b47;
    border-bottom: 2px solid #048b47;
    border-left: 2px solid #048b47;
    border-radius: 0px 0px 20px 20px;
    gap: 0 20px;
    background: #e0e0e0;
    padding: 22px;
}

/* 安卓和iOSQR Code样式 */
.android_qr_code,
.ios_qr_code {
    gap: 30px 0;
}

/* 按钮样式 */
.qr_code_wrap button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #048b47;
    color: white;
    font-weight: 700;
    gap: 0 10px;
    padding: 10px 0;
}

    /* 鼠标悬停按钮样式 */
    .qr_code_wrap button:hover {
        background: #00BD5E;
    }

    /* 按钮内文本样式 */
    .qr_code_wrap button p {
        margin-bottom: 0;
    }


/* 响应式样式 */

/* 大屏幕样式 */
@media only screen and (min-width: 1200px) {
    .header_wrap {
        height: 100px;
        padding: 20px 0;
        margin-bottom: 60px;
    }

        .header_wrap .header_wrap_title {
            font-size: 40px;
        }

    .app_download_wrap {
        width: 406px;
    }

        .app_download_wrap .title {
            display: flex;
            align-items: center;
            justify-content: center;
        }


            .app_download_wrap .title img {
                width: 100px;
            }

    .qr_code_img {
        width: 170px;
    }

    .download_button {
        height: 50px;
    }

        .download_button p,
        .download_title span {
            font-size: 18px;
        }

    .download_icon_img {
        width: 20px;
        height: auto;
    }
}

/* 中等屏幕样式 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .header_wrap {
        height: 100px;
        padding: 20px 0;
        margin-bottom: 60px;
    }

        .header_wrap .header_wrap_title {
            font-size: 40px;
        }

    .app_download_wrap {
        width: 406px;
    }

        .app_download_wrap .title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .app_download_wrap .title img {
                width: 100px;
            }

    .download_button p {
        font-size: 16px;
    }

    .system_icon {
        width: 25px;
    }

    .download_icon_img {
        width: 20px;
        height: auto;
    }
}

/* 小屏幕样式 */
@media only screen and (max-width: 767px) {
    .header_wrap {
        height: 70px;
        padding: 18px 0;
        margin-bottom: 32px;
    }

        .header_wrap .header_wrap_title,
        .download_title span {
            font-size: 24px;
        }

    .app_download_wrap {
        width: max-content;
        padding: 0 5% 5%;
    }

    .download_title h2 {
        font-size: 40px;
    }

    .app_download_wrap .title img {
        width: 120px;
        margin-bottom: 20px;
    }

    .qr_code_wrap button {
        gap: 0 8px;
    }

    .qr_code_img {
        width: 135px;
    }

    .download_button p {
        font-size: 16px;
    }

    .system_icon {
        width: 25px;
    }

    .download_icon_img {
        width: 18px;
        height: auto;
    }
}