/* =========================================================
   AJA OPTICAL FAQ PAGE
   Ueeshop Compatible Version
   ========================================================= */

.aj-faq-page{
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
    color:#111111;
    background:#ffffff;
}

.aj-faq-page *,
.aj-faq-page *:before,
.aj-faq-page *:after{
    box-sizing:border-box;
}

/* =========================
   BANNER
   ========================= */

.aj-faq-banner{
    width:100%;
    position:relative;
    overflow:hidden;
    background:#111111;
}

.aj-faq-banner img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}

.aj-faq-banner-content{
    position:absolute;
    left:6%;
    top:50%;
    transform:translateY(-50%);
    color:#ffffff;
    max-width:500px;
}

.aj-faq-banner-content .small-title{
    font-size:16px;
    font-weight:700;
    color:#E61E4A;
    margin-bottom:12px;
    letter-spacing:.5px;
}

.aj-faq-banner-content h1{
    font-size:48px;
    line-height:1.1;
    margin:0 0 15px;
    color:#ffffff;
    font-weight:800;
}

.aj-faq-banner-content p{
    font-size:20px;
    line-height:1.5;
    margin:0 0 25px;
    color:#ffffff;
}

.aj-faq-banner-btn{
    display:inline-block;
    background:#E61E4A;
    color:#ffffff !important;
    text-decoration:none !important;
    padding:14px 28px;
    font-size:14px;
    font-weight:700;
    border-radius:2px;
}

/* =========================
   FAQ MAIN
   ========================= */

.aj-faq-main{
    width:1200px;
    max-width:calc(100% - 40px);
    margin:70px auto 80px;
}

.aj-faq-layout{
    display:flex;
    align-items:flex-start;
    gap:38px;
}

/* =========================
   LEFT CATEGORY
   ========================= */

.aj-faq-sidebar{
    width:270px;
    min-width:270px;
    background:#ffffff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.aj-faq-tab{
    width:100%;
    min-height:82px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    gap:15px;
    border:0;
    border-bottom:1px solid #eeeeee;
    background:#ffffff;
    color:#111111;
    font-size:16px;
    line-height:1.4;
    text-align:left;
    cursor:pointer;
    transition:all .25s ease;
}

.aj-faq-tab:last-child{
    border-bottom:0;
}

.aj-faq-tab:hover{
    color:#E61E4A;
}

.aj-faq-tab.active{
    background:#E61E4A;
    color:#ffffff;
}

.aj-faq-tab-icon{
    width:22px;
    min-width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.aj-faq-tab-text{
    flex:1;
}

/* =========================
   RIGHT CONTENT
   ========================= */

.aj-faq-content{
    flex:1;
    min-width:0;
}

.aj-faq-panel{
    display:none;
    width:100%;
}

.aj-faq-panel.active{
    display:block;
}

.aj-faq-section-title{
    margin:0 0 30px;
    padding:0;
    font-size:36px;
    line-height:1.2;
    font-weight:800;
    color:#111111;
}

.aj-faq-section-title span{
    color:#E61E4A;
}

/* =========================
   FAQ ITEM
   ========================= */

.aj-faq-item{
    width:100%;
    margin-bottom:14px;
    background:#ffffff;
    border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.07);
    overflow:hidden;
}

.aj-faq-question{
    width:100%;
    min-height:72px;
    padding:20px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    cursor:pointer;
    background:#ffffff;
    border:0;
    text-align:left;
    color:#111111;
    font-size:16px;
    line-height:1.5;
    font-weight:700;
}

.aj-faq-question:hover{
    color:#E61E4A;
}

.aj-faq-question-left{
    display:flex;
    align-items:flex-start;
    gap:12px;
    flex:1;
}

.aj-faq-number{
    color:#E61E4A;
    font-weight:800;
    min-width:30px;
}

.aj-faq-question-text{
    flex:1;
}

.aj-faq-plus{
    width:28px;
    min-width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:400;
    color:#111111;
    transition:all .25s ease;
}

.aj-faq-item.open .aj-faq-plus{
    color:#E61E4A;
    transform:rotate(45deg);
}

.aj-faq-answer{
    display:none;
    padding:0 24px 25px 66px;
    color:#555555;
    font-size:14px;
    line-height:1.8;
}

.aj-faq-item.open .aj-faq-answer{
    display:block;
}

.aj-faq-answer p{
    margin:0 0 12px;
}

.aj-faq-answer p:last-child{
    margin-bottom:0;
}

.aj-faq-answer ul{
    margin:8px 0 12px;
    padding-left:20px;
}

.aj-faq-answer li{
    margin-bottom:6px;
}

.aj-faq-check{
    color:#E61E4A;
    font-weight:700;
}

/* =========================
   BOTTOM CONTACT
   ========================= */

.aj-faq-contact{

    max-width:1300px;
    margin:80px auto;

}


.aj-faq-contact-inner{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

}



/* 三张图片 */

.aj-faq-contact-images{

    width:750px;

    display:flex;

    gap:15px;

    flex-shrink:0;

}


.aj-faq-contact-images img{

    width:230px;

    height:330px;

    object-fit:cover;

    border-radius:10px;

}



/* 右侧 */

.aj-faq-contact-info{

    flex:1;

}


.aj-faq-contact-small{

    color:#e91e4d;

    font-size:14px;

    margin-bottom:20px;

}


.aj-faq-contact-title{

    font-size:36px;

    margin:0 0 20px;

}


.aj-faq-contact-title span{

    color:#e91e4d;

}


.aj-faq-contact-desc{

    line-height:1.8;

    color:#555;

}



.aj-faq-contact-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin:30px 0;

}


.aj-faq-contact-list span{

    color:#e91e4d;

    margin-right:10px;

}



.aj-faq-contact-buttons{

    display:flex;

    gap:15px;

}


.aj-faq-btn-primary{

    background:#e91e4d;

    color:white;

    padding:15px 35px;

    text-decoration:none;

}



.aj-faq-btn-secondary{

    border:1px solid #ccc;

    color:#222;

    padding:15px 35px;

    text-decoration:none;

}

/* =========================
   MOBILE
   ========================= */

@media screen and (max-width:768px){

    .aj-faq-banner-content{
        left:25px;
        right:25px;
        max-width:none;
    }

    .aj-faq-banner-content .small-title{
        font-size:11px;
        margin-bottom:7px;
    }

    .aj-faq-banner-content h1{
        font-size:28px;
        margin-bottom:8px;
    }

    .aj-faq-banner-content p{
        font-size:13px;
        line-height:1.4;
        margin-bottom:15px;
    }

    .aj-faq-banner-btn{
        padding:10px 18px;
        font-size:11px;
    }

    .aj-faq-main{
        max-width:calc(100% - 30px);
        margin:40px auto 50px;
    }

    .aj-faq-layout{
        display:block;
    }

    .aj-faq-sidebar{
        width:100%;
        min-width:0;
        margin-bottom:35px;
        border-radius:6px;
    }

    .aj-faq-tab{
        min-height:58px;
        padding:15px 16px;
        font-size:14px;
    }

    .aj-faq-tab-icon{
        width:20px;
        min-width:20px;
        font-size:16px;
    }

    .aj-faq-section-title{
        font-size:27px;
        margin-bottom:20px;
    }

    .aj-faq-question{
        min-height:62px;
        padding:17px 15px;
        font-size:14px;
    }

    .aj-faq-question-left{
        gap:7px;
    }

    .aj-faq-number{
        min-width:27px;
    }

    .aj-faq-answer{
        padding:0 15px 20px 49px;
        font-size:13px;
        line-height:1.7;
    }

    .aj-faq-contact{
        padding:45px 0;
    }

    .aj-faq-contact-inner{
        max-width:calc(100% - 30px);
        display:block;
    }

    .aj-faq-contact-images{
        width:100%;
        margin-bottom:30px;
        gap:8px;
    }

    .aj-faq-contact-title{
        font-size:28px;
    }

    .aj-faq-contact-desc{
        font-size:14px;
    }

    .aj-faq-contact-list{
        grid-template-columns:1fr;
        gap:8px;
    }

    .aj-faq-contact-buttons{
        display:block;
    }

    .aj-faq-btn-primary,
    .aj-faq-btn-secondary{
        display:block;
        text-align:center;
        margin-bottom:10px;
        width:100%;
    }
}

/* SMALL MOBILE */

@media screen and (max-width:480px){

    .aj-faq-banner-content{
        left:18px;
        right:18px;
    }

    .aj-faq-banner-content h1{
        font-size:23px;
    }

    .aj-faq-banner-content p{
        font-size:11px;
        max-width:280px;
    }

    .aj-faq-main{
        max-width:calc(100% - 20px);
    }

    .aj-faq-contact-inner{
        max-width:calc(100% - 20px);
    }
}