﻿#QAPage {
    color: #717171;
}

    #QAPage .CategoryList {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    #QAPage .CategoryItem {
        padding: 12px;
        font-size: 1.125rem;
        cursor: pointer;
        text-align: center;
        position: relative;
    }

        #QAPage .CategoryItem.Selected::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 5px;
            background-color: #FF8900;
        }

    #QAPage .QuestionItem {
        display: grid;
        grid-template-columns: 35px auto 30px;
        gap: 18px;
        width: 100%;
        padding: 18px 18px 18px 70px;
        border-bottom: 1px solid #DBDCD8;
    }

        #QAPage .QuestionItem.Selected {
            font-weight: 900;
            color: #000;
        }

    #QAPage .ArrowIcon {
        line-height: 0.5;
        font-size: 2rem;
        transition: transform 0.5s;
    }

        #QAPage .ArrowIcon.Active {
            transform: rotateZ(-180deg);
        }

    #QAPage .AnswerContent {
        display: grid;
        grid-template-columns: 35px auto 30px;
        gap: 18px;
        padding: 10px 18px 18px 70px;
        word-break: break-all;
    }

    #QAPage .ImgList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

@media (max-width:1199px) {
    #Base_Visitor .Body {
        background-color: #fff;
    }

    #QAPage .MobileTitle {
        display: block;
        color: #333333;
        letter-spacing: 0.115em;
        font-weight: bolder;
        text-align: center;
    }

    #QAPage .MobileCategoryItem {
        display: grid;
        grid-template-columns: auto 24px;
        gap: 18px;
        padding: 15px 24px;
        border-bottom: 1px solid #FF8900;
    }

    #QAPage .MobileTitle,
    #QAPage .CategoryTitle {
        letter-spacing: 0.115em;
    }

    #QAPage .MoreIcon {
        display: block;
        height: 100%;
        width: 100%;
        content: "";
        position: relative;
    }

        #QAPage .MoreIcon .Line {
            display: block;
            width: 15px;
            height: 2px;
            background-color: #717171;
            border-radius: 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

            #QAPage .MoreIcon .Line:nth-of-type(2) {
                display: block;
                width: 15px;
                height: 2px;
                background-color: #717171;
                border-radius: 10px;
                transform: rotateZ(-90deg);
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                transition: transform 0.5s;
            }

        #QAPage .MoreIcon.Open .Line:nth-of-type(2) {
            transform: rotateZ(-180deg);
        }

    #QAPage .MobileQuestionPanel {
        border-bottom: 1px solid #e5e5e5;
    }

    #QAPage .MobileQuestionItem {
        display: grid;
        grid-template-columns: 35px auto 24px;
        gap: 16px;
        padding: 15px 24px;
    }

        #QAPage .MobileQuestionItem.Selected {
            font-weight: 900;
            color: #000;
        }

    #QAPage .QuestionTitle {
        letter-spacing: 0.1em;
    }

    #QAPage .ArrowIcon {
        font-size: 24px;
    }

    #QAPage .MobileAnswerContent {
        display: grid;
        grid-template-columns: 35px auto 24px;
        gap: 16px;
        padding: 0 24px 12px 24px;
        letter-spacing: 0.05em;
    }
}
