@charset "utf-8";

/**
 * Symbicort 信必可 - 自定义补充样式
 * 
 * 原站 CSS (styles2f10.css / styles_t2f10.css / styles_m2f10.css)
 * 已处理所有基础样式。本文件仅包含：
 * 1. 对原站CSS中特定 class 的微调
 * 2. 手机导航菜单补丁
 * 3. loading页面样式
 */

/* ==========================================================================
   Header 卷动效果 (原站CSS未定义 header_current) 
   ========================================================================== */
/* .header_current {
    box-shadow: 0 2px 5px 0 rgba(50, 50, 50, 0.2) !important;
    height: 120px !important;
}
.header_current #logo {
    width: 90px !important;
}
.header_current .topmenu {
    top: 35px !important;
} */

/* ==========================================================================
   Top Banner 补丁
   ========================================================================== */
.top_banner .item img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   FAQ 手风琴补丁
   ========================================================================== */
.faq_item {
    clear: both;
    margin-bottom: 20px;
    padding: 15px 0;
}
.faq_left {
    float: left;
    width: 30%;
    max-width: 200px;
}
.faq_left img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.faq_right {
    float: left;
    width: 65%;
    padding-left: 5%;
}
.faq_q {
    font-size: 18px;
    font-weight: 600;
    color: #332567;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}
.faq_a {
    font-size: 16px;
    color: #58595b;
    line-height: 1.8;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq_item.open .faq_a {
    max-height: 800px;
    padding: 10px 0;
}

/* ==========================================================================
   手机导航补丁
   ========================================================================== */
.topmenu_m {
    display: none;
    position: absolute;
    right: 10px;
    top: 25px;
    z-index: 1000;
}
.topmenu_m img {
    width: 32px;
    height: auto;
}

@media screen and (max-width: 860px) {
    .topmenu_area {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .topmenu_area.open {
        max-height: 600px;
    }
    .topmenu_m {
        display: block;
    }
    .topmenu ul li {
        float: none !important;
        margin: 0 !important;
        border-bottom: 1px solid #eee;
    }
    .topmenu ul li a {
        padding: 14px 20px !important;
        display: block !important;
    }
    .topmenu ul li a.current,
    .topmenu ul li a:hover {
        border-bottom: none !important;
        background-color: #f5f5f5;
    }
}

/* ==========================================================================
   步骤补丁
   ========================================================================== */
.step_item {
    clear: both;
    margin-bottom: 30px;
    position: relative;
    padding-left: 80px;
    min-height: 60px;
}
.step_img {
    position: absolute;
    left: 0;
    top: 5px;
    width: 60px;
    height: 60px;
}
.step_img img {
    width: 100%;
    height: auto;
}
.step_text {
    padding-top: 5px;
}
.step_number {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #851B54;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    margin-right: 8px;
    font-size: 14px;
}
.step_text p {
    display: inline;
    font-size: 16px;
    color: #58595b;
}
.step_desc {
    display: block !important;
    color: #f90000 !important;
    font-weight: bold;
    margin-top: 5px;
    font-size: 14px !important;
}

/* ==========================================================================
   About 补丁
   ========================================================================== */
.about_img {
    text-align: center;
    margin: 30px 0;
}
.about_img img {
    max-width: 100%;
    height: auto;
}
.about_note {
    text-align: center;
    font-size: 16px;
    color: #58595b;
    margin-top: 20px;
}
.about2_left,
.about2_right {
    float: left;
    width: 45%;
    padding: 20px;
}
.about2_left h3,
.about2_right h3 {
    color: #332567;
    font-size: 22px;
    margin-bottom: 10px;
}
.about2_left p,
.about2_right p {
    color: #58595b;
    font-size: 16px;
    line-height: 1.8;
}

/* ==========================================================================
   Video 补丁
   ========================================================================== */
.video_container {
    text-align: center;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.video_poster {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.video_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.video_play img {
    width: 64px;
    height: auto;
}

/* ==========================================================================
   Sticker 补丁
   ========================================================================== */
.whatsticker_content_header {
    text-align: center;
}
/* .whatsticker_content_header img {
    height: 60px;
    margin-bottom: 10px;
} */
.whatsticker_content_header h2 {
    color: #332567;
    font-size: 36px;
}
.sticker_platforms {
    text-align: center;
}
.sticker_platform {
    float: left;
    width: 45%;
    padding: 20px;
    box-sizing: border-box;
}
.sticker_platform h3 {
    color: #332567;
    margin-bottom: 10px;
}
.sticker_platform img {
    width: 48px;
    margin-bottom: 10px;
}
.sticker_platform p {
    color: #58595b;
    font-size: 14px;
}
.sticker_main {
    clear: both;
    text-align: center;
    margin: 30px 0;
}
.sticker_main img {
    max-width: 100%;
    height: auto;
}
.sticker_qr {
    text-align: center;
}
.sticker_qr img {
    max-width: 200px;
}

/* ==========================================================================
   JoinUs 补丁
   ========================================================================== */
.joinus_desc {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
}
.joinus_desc p {
    font-size: 18px;
    color: #58595b;
    line-height: 1.8;
}
.joinus_btn {
    text-align: center;
}
.joinus_btn a {
    display: inline-block;
    padding: 14px 40px;
    background: #851B54;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 18px;
    transition: background 0.3s;
}
.joinus_btn a:hover {
    background: #332567;
    color: #fff;
}

/* ==========================================================================
   Contact 补丁
   ========================================================================== */
.contact_wrapper {
    max-width: 1000px;
    margin: auto;
}
.contact_left {
    float: left;
    width: 60%;
}
.contact_right {
    float: right;
    width: 35%;
}
.contact_right img {
    max-width: 100%;
    height: auto;
}
.table_contact td.title {
    width: 36px;
    text-align: center;
    vertical-align: top;
    padding-top: 8px;
}
.table_contact td.title img {
    width: 24px;
    height: auto;
}

/* ==========================================================================
   About Us 补丁
   ========================================================================== */
.about_content {
    text-align: center;
}
.about_content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.about_content p {
    font-size: 16px;
    color: #58595b;
    line-height: 1.8;
}

/* ==========================================================================
   响应式 - 平板 (861-1179)
   ========================================================================== */
@media screen and (min-width: 861px) and (max-width: 1179px) {
    .faq_left { width: 25%; }
    .faq_right { width: 70%; }
    .contact_left { float: none; width: 100%; }
    .contact_right { float: none; width: 100%; text-align: center; margin-top: 30px; }
}

/* ==========================================================================
   响应式 - 手机 (<=860)
   ========================================================================== */
@media screen and (max-width: 860px) {
    .faq_left { float: none; width: 100%; max-width: none; text-align: center; margin-bottom: 15px; }
    .faq_left img { max-width: 150px; }
    .faq_right { float: none; width: 100%; padding-left: 0; }
    .sticker_platform { float: none; width: 100%; margin-bottom: 20px; }
    .contact_left { float: none; width: 100%; }
    .contact_right { float: none; width: 100%; text-align: center; margin-top: 30px; }
    .about2_left, .about2_right { float: none; width: 100%; }
    .step_item { padding-left: 60px; }
    .step_img { width: 48px; height: 48px; }
}

/* ==========================================================================
   Loading
   ========================================================================== */
.loading_page,
.loading_page_m {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 99999; display: none;
}