.B-background-color {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebe8f3), to(#fff));
    background-image: -webkit-linear-gradient(#ebe8f3, #fff);
    background-image: -o-linear-gradient(#ebe8f3, #fff);
    background-image: linear-gradient(#ebe8f3, #fff)
}

.start-loading {
    margin-top: 2.13333rem;
    text-align: center
}

.head-img {
    margin-top: 2.13333rem;
    width: auto;
    height: 2.13333rem
}

.qn-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 1.06667rem;
    width: 13.86667rem
}

.qn-panel {
    position: relative;
    width: 6.4rem;
    margin: 1.06667rem 0;
    border-radius: .64rem;
    background-color: #fff;
    padding-bottom: .64rem;
    -webkit-box-shadow: var(--card-thin-box-shadow);
    box-shadow: var(--card-thin-box-shadow);
    padding-top: .64rem
}

.qn-panel-three {
    width: auto;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    margin: 1.06667rem .128rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.three-middle-qn {
    -webkit-flex: 1.5 0 0;
    -ms-flex: 1.5 0 0;
    flex: 1.5 0 0
}

.qn-panel:hover, .selected-qn {
    -webkit-box-shadow: var(--button-strong-box-shadow);
    box-shadow: var(--button-strong-box-shadow)
}

.selected-qn {
    background: -webkit-gradient(linear, right top, left top, from(var(--secondary-color)), to(var(--primary-color)));
    background: -webkit-linear-gradient(right, var(--secondary-color), var(--primary-color));
    background: -o-linear-gradient(right, var(--secondary-color), var(--primary-color));
    background: linear-gradient(to left, var(--secondary-color), var(--primary-color));
    color: #fff
}

.selected-qn .qn-desc, .selected-qn .qn-header {
    color: #fff
}

.qn-icon {
    font-size: 2.13333rem;
    line-height: 1;
    margin-bottom: 1.06667rem
}

.qn-icon-img {
    width: 2.13333rem;
    height: 2.13333rem
}

.qn-header {
    font-size: 1.024rem
}

.qn-p {
    font-size: .68267rem;
    margin-top: .21333rem
}

.qn-info {
    font-size: .42667rem;
    margin: .21333rem .42667rem 0;
    text-align: center;
    color: #d3d3d3
}

.qn-info-s {
    font-size: .34133rem
}

.begin-button {
    width: 13.86667rem;
    height: 1.70667rem;
    border-radius: .85333rem;
    line-height: 1.70667rem;
    text-align: right;
    background-color: var(--primary-color);
    -webkit-box-shadow: var(--button-strong-box-shadow);
    box-shadow: var(--button-strong-box-shadow);
    border: 0;
    color: #fff;
    margin-top: 1.70667rem;
    margin-bottom: .53333rem
}

.begin-button-placeholder {
    height: 5.54667rem
}

.at-loading {
    width: 1.28rem;
    height: 1.28rem;
    margin-top: .21333rem
}

.at-loading__ring {
    border-color: #ddd #0000 #0000
}

.qn-desc {
    margin: .21333rem;
    font-size: .512rem;
    font-weight: 400;
    text-align: left;
    color: #666;
    line-height: .59733rem;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media only screen and (min-width: 728px) {
    :root {
        --card-width: 17.06667rem
    }

    .index {
        width: 17.06667rem
    }

    .head-img {
        margin-top: .64rem;
        margin-bottom: .21333rem;
        width: auto;
        height: 1.28rem
    }

    .at-article__h1 {
        font-size: .68267rem;
        margin-top: .21333rem
    }

    .qn-container {
        margin-top: 0
    }

    .qn-panel {
        padding-bottom: .42667rem
    }

    .qn-icon {
        margin-bottom: .32rem
    }

    .qn-header {
        font-size: .59733rem
    }

    .qn-p {
        font-size: .42667rem
    }

    .qn-desc {
        margin: .21333rem;
        font-size: .29867rem;
        font-weight: 400;
        text-align: center;
        color: #666;
        line-height: .42667rem
    }

    .selected-qn .qn-desc {
        color: #fff
    }

    .qn-info {
        font-size: .34133rem
    }

    .qn-info-s {
        font-size: .256rem
    }

    .begin-button {
        font-size: .42667rem;
        height: 1.28rem;
        line-height: 1.28rem;
        margin-top: .85333rem
    }

    .at-loading {
        width: .85333rem;
        height: .85333rem;
        margin-top: .21333rem
    }
}

.content2_p {
    margin: 0
}

.at-article__p {
    font-size: .49067rem
}

.mbti-detail-wrapper {
    width: 14.67733rem;
    margin-top: -.85333rem
}

.mbti-detail-wrapper .mbti-detail-section, .mbti-detail-wrapper .mbti-detail-section .mbti-section-title {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.mbti-detail-wrapper .mbti-detail-section {
    width: 100%;
    border-radius: .34133rem;
    padding: .64rem .68267rem;
    background: #fff;
    margin: .34133rem 0;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-title {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-title .mbti-section-title-content {
    height: .704rem;
    font-size: .59733rem;
    font-weight: 500;
    text-align: center;
    color: #8965cf;
    line-height: .704rem;
    margin: 0 .21333rem
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-title .mbti-section-title-l, .mbti-detail-wrapper .mbti-detail-section .mbti-section-title .mbti-section-title-r {
    width: .81067rem;
    height: .29867rem
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-img-jung {
    width: 5.33333rem;
    height: 3.73333rem
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box {
    margin-top: .34133rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box .mbti-section-img-box {
    width: 6.61333rem;
    height: 4.39467rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #e5e5e5;
    border-radius: .256rem
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box .mbti-section-img-box .mbti-section-img {
    width: 6.31467rem;
    height: 3.47733rem
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box .mbti-section-img-txt {
    margin-top: .17067rem;
    font-size: .34133rem;
    font-weight: 400;
    text-align: left;
    color: #666
}

.mbti-detail-wrapper .mbti-detail-section .mbti-section-txt {
    font-size: .384rem;
    font-weight: 400;
    text-align: left;
    color: #333;
    line-height: 2;
    white-space: normal;
    margin-top: .42667rem
}

@media only screen and (max-width: 728px) {
    .mbti-detail-wrapper {
        margin-top: -.42667rem
    }

    .mbti-detail-wrapper .mbti-detail-section, .mbti-detail-wrapper .mbti-detail-section .mbti-section-title {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

    .mbti-detail-wrapper .mbti-detail-section {
        width: 100%;
        border-radius: .68267rem;
        padding: .85333rem .72533rem;
        background: #fff;
        margin: .68267rem 0;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-title {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-title .mbti-section-title-content {
        height: 1.408rem;
        font-size: .81067rem;
        font-weight: 500;
        text-align: center;
        color: #8965cf;
        line-height: 1.408rem;
        margin: 0 .42667rem
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-title .mbti-section-title-l, .mbti-detail-wrapper .mbti-detail-section .mbti-section-title .mbti-section-title-r {
        width: 1.62133rem;
        height: .59733rem
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-img-jung {
        width: 10.66667rem;
        height: 7.46667rem;
        margin: .64rem 0
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box {
        margin-top: .68267rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box .mbti-section-img-box {
        width: 13.22667rem;
        height: 8.78933rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        background: #e5e5e5;
        border-radius: .512rem
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box .mbti-section-img-box .mbti-section-img {
        width: 12.62933rem;
        height: 6.95467rem
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-img-outer-box .mbti-section-img-txt {
        margin-top: .34133rem;
        font-size: .512rem;
        font-weight: 400;
        text-align: left;
        color: #666
    }

    .mbti-detail-wrapper .mbti-detail-section .mbti-section-txt {
        font-size: .55467rem;
        font-weight: 400;
        text-align: left;
        color: #333;
        line-height: 1.6;
        white-space: normal;
        margin-top: .42667rem
    }
}