/*small pc*/
@media (max-width: 1600px) {
    .auto-container-lg, .auto-container {
        max-width: 1200px; /*w=1120*/
    }

    .auto-container-md {
        max-width: 1060px;
    }

    .auto-container-xl {
        max-width: 1300px;
    }

    .btn {
        font-size: var(--size_18);
    }

        .btn.btn-more i {
            padding-left: 1.8rem;
            font-size: var(--size_20);
        }

    /*------header------*/
    :root {
        --header_h: 94px;
    }

    .main-header {
        padding: 1.2rem 4rem 0 4rem;
    }

    /*------index------*/
    .index_banner .inner-box h2 {
        font-size: 5rem;
    }

    .index_banner .inner-box h3 {
        font-size: var(--size_45);
    }

    .index_banner .inner-box p {
        font-size: var(--size_25);
    }

    /*exam*/
    .index_exam .block.row {
        margin-right: -3.5rem;
        margin-left: -3.5rem;
    }

    .index_exam .block .box {
        padding-left: 2rem;
        padding-right: 2rem;
    }

        .index_exam .block .box .box-inner .image-box {
            height: 12rem;
        }

        .index_exam .block .box .box-inner .block-content {
            padding: 1.8rem 1rem 0.8rem 1rem;
        }

            .index_exam .block .box .box-inner .block-content .block-title {
                font-size: var(--size_33);
            }

            .index_exam .block .box .box-inner .block-content .block-text {
                font-size: var(--size_22);
            }

    .index_exam .block .box-apply .box-inner .block-content .block-text ul li {
        font-size: var(--size_17);
    }

    .index_exam .block .box-apply .box-inner .block-content .block-text ul span {
        width: var(--size_24);
        height: var(--size_24);
    }

    /*invest*/
    .index_invest {
        padding: 4rem 0 7rem 0;
    }

        .index_invest .area-title,
        .index_exam .area-title {
            font-size: var(--size_45);
            margin-bottom: 8rem;
        }

        .index_invest .block .box .box-inner .block-content .block-title .floatup {
            font-size: var(--size_25);
            padding: 0.9rem 2.3rem;
        }

    .slide-indexinvest .chart-area {
        background: transparent;
        padding: 0;
        max-width: initial;
        transform: scale(0.72);
        margin: -4rem -6rem;
        min-height: 34rem;
    }

    .slide-indexinvest2 .swiper-wrapper .swiper-slide {
        height: 19rem;
    }

    .slide-indexinvest2 .chart-area {
        background: transparent;
        padding: 0;
        max-width: initial;
        transform: scale(0.56);
        margin: -8rem -10rem;
    }

    /*.chart*/
    .index_invest .chart-area .chart-title h2 {
        font-size: var(--size_27);
    }

    .index_invest .chart-area .bar-chart .bar-scope .bar-group .bar span {
        font-size: var(--size_20);
    }

    .index_invest .chart-area .number-scope span,
    .index_invest .chart-area .line-chart .dot-scope .dot-group .dot span,
    .index_invest .chart-area .line-chart .dot-scope .dot-group > label,
    .index_invest .chart-area .bar-chart .bar-scope .bar-group > label,
    .index_invest .chart-area .note {
        font-size: var(--size_19);
    }

    .index_invest .chart-area .chart-title .info,
    .index_invest .chart-area .chart-labelbox ul,
    .index_invest .chart-area .bar-chart.style2 .bar-scope .bar-group .bar span {
        font-size: var(--size_18);
    }

    .index_invest .chart-area .bar-chart.style2 .bar-scope .bar-group > label,
    .index_invest .chart-area .bar-chart.style2 .bar-scope .bar-group .bar label {
        font-size: var(--size_17);
    }

    .index_invest .chart-area .bar-chart.style2.single-color .bar-scope .bar-group > label {
        bottom: -166px;
    }

    /*------detail------*/
    .detail_area .area-title {
        font-size: 3.25rem;
    }

    .knowledge_list .youtubelist > li > a {
        font-size: var(--size_21);
        padding: 1.6rem 1.3rem;
    }

    .knowledge_list .block .box .box-inner .block-content .block-title {
        font-size: var(--size_26);
    }

    /*result*/
    .result_animal img {
        width: 60%;
        /*max-width: 620px;*/
    }

    .result_animal h2,
    .result_intro h2 {
        font-size: var(--size_45);
        margin-bottom: 3rem;
    }

    .result_score .area-title,
    .result_chart .area-title {
        font-size: var(--size_45);
        margin-bottom: 2rem;
    }

    .result_animal h3 {
        font-size: var(--size_30);
    }

    .result_animal p,
    .result_intro p,
    .excellent-box p,
    .result_chart p {
        font-size: var(--size_24);
    }

    .excellent-box {
        margin-top: -1rem;
    }

    .result_score .block .box .box-inner .block-content .block-title {
        font-size: var(--size_20);
        left: 2.6rem;
        right: 2.6rem;
    }

    .result_score .block .box .box-inner .block-content .block-text {
        font-size: var(--size_26);
    }

    .result_score .chart-area {
        background: none;
        padding: 0;
        transform: scale(0.84);
        margin: 0 -2.5rem;
    }

        .result_score .chart-area .bar-chart .bar-panel {
            min-height: 11rem;
        }

        .result_score .chart-area .bar-chart.horizontal .bar-scope .bar-group > label {
            font-size: var(--size_16);
        }

    .ranking-block {
        height: 26rem;
        margin-bottom: 10rem;
    }

        .ranking-block .panel {
            height: 85%;
            padding: 1.8rem 2rem;
        }

            .ranking-block .panel .subject img {
                width: 6.5rem;
                left: 5%;
            }

            .ranking-block .panel .subject {
                font-size: var(--size_32);
                margin-bottom: 1.5rem;
            }

            .ranking-block .panel .list li {
                font-size: var(--size_20);
            }

    .animal-total-block .box-inner {
        font-size: var(--size_27);
    }

    .animal-total-block .box {
        width: 28rem;
        height: 28rem;
    }

    /*invest*/
    .invest_panel {
        padding: 3rem;
    }

    .invest_inner .box.score-box {
        height: 15rem;
    }

    .invest_inner .box .title {
        font-size: var(--size_25);
        padding: 0.5rem 2rem 0.5rem 5rem;
    }

        .invest_inner .box .title:before {
            width: 5rem;
            height: 5rem;
        }

    .invest_inner .box .score-inner .name {
        font-size: var(--size_24);
    }

    .invest_inner .box .score-inner .score {
        font-size: 4rem;
    }

    .invest_inner .box .que-row ul li {
        font-size: var(--size_20);
    }

    .invest_inner .link-exam {
        font-size: var(--size_22);
    }

    .invest_inner .box.resultbar-box .que-name {
        font-size: var(--size_19);
    }

    .invest_inner .box.resultbar-box .quebar .bar {
        height: 2.6rem;
    }

        .invest_inner .box.resultbar-box .quebar .bar span {
            font-size: var(--size_20);
            font-weight: 500;
        }

    .invest_inner .box.resultbar-box .row {
        margin-top: 1rem;
    }
}

/*(xl)*/
@media (max-width: 1199.98px) {

    .btn {
        font-size: var(--size_17);
    }

        .btn.btn-more i {
            font-size: var(--size_19);
            padding-left: 1rem;
        }

    /*------header------*/
    :root {
        --header_h: 80px;
    }

    .main-header {
        padding: 0.8rem 2rem 0 2rem;
    }

        .main-header .navbar-brand {
            padding: 1rem 0 0.8rem 0 !important;
        }

    .main-menu > li > a {
        margin-left: 3rem;
    }

    /*------index------*/
    .index_banner .inner-box h2 {
        font-size: 4.5rem;
    }

    .index_banner .inner-box h3 {
        font-size: var(--size_37);
    }

    .index_banner .inner-box p {
        font-size: var(--size_22);
    }

    .index_news .area-title {
        font-size: var(--size_37);
    }

    .index_news .area-subtitle {
        font-size: var(--size_26);
    }

    .index_news .area-title::after {
        height: 6.5rem;
        width: 6.5rem;
    }

    /*exam*/
    .index_exam .block.row {
        margin-right: -2rem;
        margin-left: -2rem;
    }

    .index_exam .block .box {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        max-width: 30rem;
    }

        .index_exam .block .box .box-inner .image-box {
            height: 10rem;
        }

        .index_exam .block .box .box-inner .block-content {
            padding: 1.8rem 0.8rem 0.8rem 0.8rem;
        }

            .index_exam .block .box .box-inner .block-content:before {
                width: 2.2rem;
                height: 3rem;
                left: -0.6rem;
            }

            .index_exam .block .box .box-inner .block-content:after {
                width: 2.2rem;
                height: 3rem;
                right: -0.6rem;
            }

            .index_exam .block .box .box-inner .block-content .block-title {
                font-size: var(--size_30);
            }

            .index_exam .block .box .box-inner .block-content .block-text {
                font-size: var(--size_19);
            }

    .index_exam .block .box-apply .box-inner .block-content .block-text ul li {
        font-size: var(--size_16);
    }

    .index_exam .block .box-apply .box-inner .block-content .block-text ul span {
        width: var(--size_24);
        height: var(--size_24);
    }

    .swiper-button-next, .swiper-button-prev {
        display: flex;
    }

    /*------detail------*/
    .detail_area {
        padding: 12rem 0 8rem 0;
    }

    .knowledge_list .youtubelist > li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

        .knowledge_list .youtubelist > li > a {
            font-size: var(--size_21);
            padding: 1.6rem 1.4rem;
        }

    .knowledge_list .block .box .box-inner .content {
        padding: 3rem 5rem;
    }

    /*result*/
    .result_animal img {
        width: 500px;
        max-width: 100%;
    }

    .result_animal h2,
    .result_intro h2,
    .result_score .area-title,
    .result_chart .area-title {
        font-size: var(--size_40);
        margin-bottom: 2.5rem;
    }

    .result_animal h3 {
        font-size: var(--size_28);
    }

    .result_animal p,
    .result_intro p,
    .excellent-box p,
    .result_chart p {
        font-size: var(--size_22);
    }

    .result_animal .person-info {
        font-size: var(--size_18);
    }

        .result_animal .person-info::before, .result_animal .person-info::after {
            top: 29%;
        }

    .result_score .block.row,
    .result_chart .block.row {
        margin-right: -1rem;
        margin-left: -1rem;
    }

    .result_score .block .box {
        max-width: 460px;
    }

    .result_chart .block .box {
        margin-bottom: 3rem;
    }

    .ranking-block .panel .subject img {
        width: 6rem;
        left: -2%;
    }

    .ranking-block .panel .subject {
        font-size: var(--size_29);
    }

    .ranking-block .panel .list {
        margin-left: 1rem;
    }

        .ranking-block .panel .list li {
            font-size: var(--size_19);
        }

    .animal-total-block {
        display: block;
    }

        .animal-total-block .box.box-1 {
            transform: translateY(-10%);
        }

        .animal-total-block .box.box-2 {
            transform: translateY(15%);
        }

        .animal-total-block .box.box-3 {
            transform: translateX(-5%);
        }

    /*----invest----*/
    .invest_panel .side_menu .btn {
        font-size: var(--size_17);
        width: 8rem;
        height: 8rem;
    }

        .invest_panel .side_menu .btn img {
            height: 4.2rem;
        }

    .invest_inner {
        padding: 0 0 0 1.5rem;
        width: calc(100% - 8rem);
    }

        .invest_inner .col.col-map {
            -ms-flex: 0 0 55%;
            flex: 0 0 55%;
            max-width: 55%;
        }

        .invest_inner .box {
            padding: 1.8rem;
        }

            .invest_inner .box.score-box {
                height: 14rem;
            }

            .invest_inner .box .title {
                font-size: var(--size_22);
                margin-bottom: 0.8rem;
                padding: 0.5rem 1.5rem 0.5rem 4.5rem;
            }

                .invest_inner .box .title:before {
                    width: 4.7rem;
                    height: 4.7rem;
                }

            .invest_inner .box .score-inner .name {
                font-size: var(--size_23);
            }

            .invest_inner .box .score-inner .score {
                font-size: 3.8rem;
            }

            .invest_inner .box .score-inner .unit {
                font-size: var(--size_32);
            }

            .invest_inner .box .que-row ul li {
                font-size: var(--size_18);
            }

    .survey-document .que_box .que_option > div.radio,
    .survey-document .que_box .que_option > div.checkbox {
        width: 250px;
    }

    .invest_inner .question-area .que-row {
        padding: 1.2rem 1.5rem;
    }

        .invest_inner .question-area .que-row .score-box .score {
            font-size: var(--size_48);
        }

    /*----apply----*/
    .btn.btn-applysave {
        width: 16rem;
        font-size: var(--size_24);
    }
}

/*(lg) pad*/
@media (max-width: 991.98px) {
    /*------all------*/
    .xl-view {
        display: none !important;
    }

    .lg-md-sm-view {
        display: block !important;
    }

    .btn {
        font-size: var(--size_16);
    }

    /*------header------*/
    :root {
        --header_h: 72px;
    }

    /*animate*/
    #collapsibleNavbar {
        position: fixed;
        top: 0;
        left: 0;
        /* right: 0; */
        width: 70%;
        height: 100vh !important;
        transition: none;
        transition: all 0.3s;
        transform: translateX(0);
        z-index: 1040;
        background: #fff;
        padding: 1rem 2rem;
    }

        #collapsibleNavbar.collapsing {
            overflow: initial;
            transform: translateX(-100%);
        }

        #collapsibleNavbar.show + .navbarMask,
        #collapsibleNavbar.show .collapse-logo {
            display: block;
            z-index: 1039;
        }

        #collapsibleNavbar.show .navbarClose {
            display: flex !important;
        }

    /*menu*/
    .main-header {
        padding: 0.5rem 2rem 0 2rem;
    }

        .main-header .navbar-brand {
            top: 0;
            position: relative;
            z-index: 1000;
        }

            .main-header .navbar-brand img {
                width: auto;
                height: 100%;
            }

    #collapsibleNavbar .collapse-logo {
        display: block;
        width: 70%;
        max-width: 14rem;
    }

        #collapsibleNavbar .collapse-logo img {
            width: 100%;
        }

    .main-menu.navbar-nav {
        display: block;
        padding: 2rem 0 0 0;
    }

    .main-menu > li > a {
        margin-right: 0;
        margin-left: 0;
        padding: 0.7rem 0 !important;
        color: #525252 !important;
        border-bottom: 1px solid #EAEAEA !important;
        font-size: var(--size_16);
        font-weight: 400;
        position: relative;
    }

        .main-menu > li > a:after {
            content: "\f061";
            font-family: "Font Awesome 5 Pro";
            font-size: var(--size_14);
            float: right;
            line-height: 1.8;
        }

    /*------banner------*/
    .index_banner {
        height: 60vh;
    }

        /*------index------*/
        .index_banner .inner-box h2 {
            font-size: 4rem;
        }

        .index_banner .inner-box h3 {
            font-size: var(--size_33)
        }

        .index_banner .inner-box p {
            font-size: var(--size_20);
        }

    /*news*/
    .index_news {
        padding: 3rem 0 1.2rem 0;
    }

        .index_news .area-title {
            position: relative;
            left: 10px;
        }

        .index_news .block {
            width: 100%;
            margin-top: 3rem;
            min-height: initial;
        }

    .bg-index-news {
        position: relative;
        left: 0;
        width: 48%;
        max-width: 20rem;
        margin-top: -1rem;
    }

    /*exam*/
    .index_exam {
        padding: 6rem 0 2rem 0;
    }

    #examModal .index_exam .block .box {
        margin-bottom: 3.5rem;
        max-width: 25rem;
    }

    /*invest*/
    .index_invest .block .box .box-inner .block-content .block-title .floatup {
        font-size: var(--size_23);
    }

    .index_invest .area-title,
    .index_exam .area-title {
        font-size: var(--size_37);
        margin-bottom: 7rem;
    }

    /*------list------*/
    .news_list .block .box .box-inner .block-date {
        width: 10em;
        padding-left: 1rem;
    }

    .index_exam .area-title span {
        width: 20%;
    }

    /*------detail------*/
    .detail_area {
        padding: 10rem 0 7rem 0;
    }

        .detail_area .area-title {
            font-size: var(--size_48);
            margin-bottom: 3rem;
        }

        .detail_area .content p {
            margin-bottom: 1.3rem;
        }

    .knowledge_list .youtubelist > li > a {
        font-size: var(--size_19);
        padding: 1.4rem 1.2rem;
    }

    .knowledge_list .block .box .box-inner .content {
        padding: 2rem 4rem;
    }

    .knowledge_list .block .box .box-inner .block-content .block-title {
        font-size: var(--size_24);
    }

        .knowledge_list .block .box .box-inner .block-content .block-title i {
            font-size: var(--size_24);
            width: 2.1rem;
            height: 2.1rem;
        }

    /*result*/
    .result_animal::before {
        content: none;
    }

    .result_animal::after {
        background-size: 90% 70%;
    }

    .result_animal h2 br {
        display: block;
    }

    .result_animal h2 span {
        margin-top: 0.5rem;
    }

    .result_animal p br,
    .result_chart p br {
        display: none;
    }

    .result_score .block .box {
        max-width: 420px;
    }

    .ranking-block > img.people-left {
        left: 0;
        width: auto;
        height: 18rem;
    }

    .ranking-block > img.people-right {
        right: 6%;
        width: auto;
        height: 20rem;
    }

    .ranking-block .panel {
        width: 60%;
        left: 20%;
        height: 92%;
    }

    .animal-total-block .box {
        transform: none !important;
    }

    /*----invest----*/
    .invest_panel {
        padding: 2.7rem;
        flex-direction: column;
    }

        .invest_panel .side_menu {
            width: 100%;
            display: flex;
            margin: 0 -3px;
        }

            .invest_panel .side_menu .btn {
                box-shadow: none;
                width: auto;
                height: auto;
                flex-basis: 20%;
                margin: 0 3px;
                padding: 0.8rem;
            }

    .invest_inner {
        padding: 2rem 0 0 0;
        width: 100%;
    }

        .invest_inner .col.col-map {
            -ms-flex: 0 0 58%;
            flex: 0 0 58%;
            max-width: 58%;
        }

        .invest_inner .box {
            padding: 1.5rem 1.3rem;
        }

            .invest_inner .box .title:before {
                width: 4.6rem;
                height: 4.6rem;
            }

            .invest_inner .box .que-row ul li {
                font-size: var(--size_16);
            }

            .invest_inner .box .que-row .bar span {
                height: 1.8rem;
            }

            .invest_inner .box .que-row .bar {
                margin-top: -0.9rem;
            }

        .invest_inner .link-exam {
            font-size: var(--size_20);
        }

        .invest_inner .box.resultbar-box .que-name {
            font-size: var(--size_18);
        }

        .invest_inner .box.resultbar-box .quebar .bar {
            height: 2.4rem;
        }

            .invest_inner .box.resultbar-box .quebar .bar span {
                font-size: var(--size_18);
            }

        .invest_inner .box.resultbar-box .row {
            margin-top: 0.8rem;
        }

    .search-local .bootstrap-select .dropdown-menu > li > a {
        font-size: var(--size_16);
    }
}

/*(md)*/
@media (max-width: 767.98px) {
    /*------all------*/
    .lg-view {
        display: none !important;
    }


    .lg-md-view, .md-sm-view {
        display: block !important;
    }

    .btn {
        font-size: var(--size_15);
        padding: 0.47rem 1rem 0.45rem 1.2rem;
    }

        .btn.btn-more i {
            font-size: var(--size_16);
        }

    .btn-box {
        padding-top: 1rem;
    }

    /*------header------*/
    :root {
        --header_h: 60px;
    }

    .main-header {
        padding: 0 20px;
    }

        .main-header .navbar-brand {
            padding: 1rem 0 0.5rem 0 !important;
        }

    /*------footer------*/
    .footer_area {
        padding: 2.5rem 1rem 4.7rem 3rem;
        font-size: var(--size_14);
    }

        .footer_area .footer-logo {
            padding: 0 1rem;
        }

        .footer_area .copyright {
            font-size: var(--size_14);
            background: #6E6E6E;
            padding: 4px 0;
            width: 100vw;
            position: absolute;
            left: 0;
            bottom: 0;
        }

    /*------block------*/
    .block .box {
        padding-bottom: 0.5rem;
        margin-bottom: 0.9rem;
    }

        .block .box .box-inner .block-content .block-title {
            font-size: var(--size_16);
            min-height: calc(1* var(--size_16));
        }

        .block .box .box-inner .block-date {
            font-size: var(--size_16);
        }

    /*------index------*/
    .index_banner .inner-box h2 {
        font-size: var(--size_37);
    }

    .index_banner .inner-box h3 {
        font-size: var(--size_21);
        margin-bottom: 1.2rem;
    }

    .index_banner .inner-box p {
        font-size: var(--size_16);
    }

    /*news*/
    .index_news {
        padding: 2rem 0 1.2rem 0;
    }

        .index_news .block {
            margin-top: 2rem;
        }

        .index_news .area-title {
            font-size: var(--size_24);
        }

        .index_news .area-subtitle {
            font-size: var(--size_17);
        }

        .index_news .area-title::after {
            height: 4.5rem;
            width: 4.5rem;
        }

    /*exam*/
    .index_exam {
        padding: 4rem 0 2rem 0;
    }

        .index_exam .block.row {
            margin-right: -3rem;
            margin-left: -3rem;
        }

        .index_exam .block .box {
            padding-left: 3rem;
            padding-right: 3rem;
            margin-bottom: 3.5rem;
            max-width: 28rem;
        }

            .index_exam .block .box .box-inner .block-content {
                padding: 1.5rem 0.8rem 0.5rem 0.8rem;
            }

                .index_exam .block .box .box-inner .block-content .block-title {
                    font-size: var(--size_26);
                }

                .index_exam .block .box .box-inner .block-content .block-text {
                    font-size: var(--size_16);
                }

        .index_exam .block .box-apply .box-inner .block-content .block-text ul li {
            font-size: var(--size_15);
        }

        .index_exam .block .box-apply .box-inner .block-content .block-text ul span {
            width: var(--size_23);
            height: var(--size_23);
        }

    #examModal .index_exam .block .box {
        padding-left: 0;
        padding-right: 0;
    }

    /*invest*/
    .index_invest {
        padding: 2rem 0 5rem 0;
    }

        .index_invest .area-title,
        .index_exam .area-title {
            font-size: var(--size_33);
        }

            .index_invest .area-title span,
            .index_exam .area-title span {
                height: 1.4rem;
            }

                .index_invest .area-title span.left,
                .index_exam .area-title span.left {
                    margin-right: 2rem;
                }

                .index_invest .area-title span.right,
                .index_exam .area-title span.right {
                    margin-left: 2rem;
                }

        .index_invest .block .box .box-inner .block-content .block-title .floatup {
            font-size: var(--size_18);
        }

    .slide-indexinvest .chart-area {
        background: transparent;
        padding: 0;
        transform: scale(0.65);
        max-width: initial;
        margin: -6rem -11rem;
    }

    .index_invest .area-subtitle {
        font-size: var(--size_24);
    }

    .slide-indexinvest .swiper-wrapper .swiper-slide {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
        min-width: 500px;
    }

    .slide-indexinvest2 .swiper-wrapper .swiper-slide {
        height: 20rem;
    }

    .slide-indexinvest2 .swiper-wrapper .swiper-slide {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
        min-width: 500px;
    }

    .swiper-button-prev:after, .swiper-button-next:after {
        font-size: var(--size_28);
    }

    .swiper-button-next, .swiper-button-prev {
        top: 45%;
    }

    /*.chart*/
    .index_invest .chart-area .chart-title h2 {
        font-size: var(--size_30);
    }

    .index_invest .chart-area .bar-chart .bar-scope .bar-group .bar span {
        font-size: var(--size_23);
    }

    .index_invest .chart-area .number-scope span,
    .index_invest .chart-area .line-chart .dot-scope .dot-group .dot span,
    .index_invest .chart-area .line-chart .dot-scope .dot-group > label,
    .index_invest .chart-area .bar-chart .bar-scope .bar-group > label,
    .index_invest .chart-area .note {
        font-size: var(--size_22);
    }

    .index_invest .chart-area .chart-title .info,
    .index_invest .chart-area .chart-labelbox ul {
        font-size: var(--size_23);
    }

    .index_invest .chart-area .bar-chart.style2 .bar-scope .bar-group .bar span {
        font-size: var(--size_19);
    }

    .index_invest .chart-area .bar-chart.style2 .bar-scope .bar-group > label,
    .index_invest .chart-area .bar-chart.style2 .bar-scope .bar-group .bar label {
        font-size: var(--size_19);
    }

    .index_invest .chart-area .line-chart .dot-scope .dot-group .dot span {
        top: -24px;
    }

    /*------list------*/

    .news_list .block .box .box-inner {
        display: block;
    }

        .news_list .block .box .box-inner .block-date {
            padding-left: 0;
        }

    /*------detail------*/
    .detail_area {
        padding: 9rem 0 6rem 0;
    }

        .detail_area .area-title {
            font-size: var(--size_40);
        }

    .knowledge_list .youtubelist > li {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

        .knowledge_list .youtubelist > li > a {
            font-size: var(--size_18);
            padding: 1.3rem 1.2rem;
        }

    .knowledge_list .block .box .box-inner .content {
        padding: 2rem 3rem;
    }

    .knowledge_list .block .box .box-inner .block-content .block-title {
        font-size: var(--size_21);
    }

        .knowledge_list .block .box .box-inner .block-content .block-title span {
            padding: 1.2rem 3rem 1.2rem 0.8rem;
        }

            .knowledge_list .block .box .box-inner .block-content .block-title span.num {
                padding-left: 5.2rem;
                padding-right: 2rem;
            }

                .knowledge_list .block .box .box-inner .block-content .block-title span.num:before {
                    width: 3.2rem;
                    height: 3.2rem;
                    left: 1.5rem;
                }

    /*result*/
    .result_animal {
        position: relative;
        text-align: center;
        color: #fff;
        padding: 3.5rem 0 5rem 0;
    }

        .result_animal::after {
            background-size: 600px 60%;
        }

        .result_animal h2,
        .result_intro h2,
        .result_score .area-title,
        .result_chart .area-title {
            font-size: var(--size_34);
            margin-bottom: 1.5rem;
        }

        .result_animal h3 {
            font-size: var(--size_24);
        }

        .result_animal p,
        .result_intro p,
        .result_chart p {
            font-size: var(--size_20);
            padding: 0 1rem;
        }

    .result_intro .content {
        flex-direction: column-reverse;
        text-align: center;
        padding: 0 0 2.5rem 0;
    }

    .excellent-box p {
        font-size: var(--size_20);
    }

    .result_animal .person-info {
        font-size: var(--size_16);
    }

    .result_score,
    .result_chart {
        padding-bottom: 4rem;
    }

        .result_score .block .box {
            margin-bottom: 2.5rem;
        }

    .tooltip-inner {
        padding: 1.3rem;
    }

    .result_intro {
        padding: 6rem 0 3rem 0;
    }

    .ranking-block {
        height: 33rem;
        margin-bottom: 6rem;
    }

        .ranking-block > img.people-left {
            left: -11%;
        }

        .ranking-block > img.people-right {
            right: -1%;
        }

        .ranking-block .panel {
            width: 80%;
            left: 10%;
            bottom: 5%;
            padding: 1.5rem 2rem;
            border-radius: 1.5rem;
        }

            .ranking-block .panel .list {
                margin-left: 20%;
            }

            .ranking-block .panel .subject img {
                width: 5.5rem;
                left: -2rem;
                top: -4%;
            }

            .ranking-block .panel .subject {
                font-size: var(--size_23);
                padding-left: 0.3rem;
            }

            .ranking-block .panel .list li {
                flex: 100%;
                max-width: 100%;
                font-size: var(--size_18);
                padding-bottom: 0.8rem;
            }

    .animal-total-block .box {
        width: 25rem;
        height: 25rem;
        max-width: 100%;
    }

    .animal-total-block .box-inner {
        font-size: var(--size_21);
    }

    /*----invest----*/
    .search-box {
        align-items: center;
        margin-top: -1rem;
    }

        .search-box label {
            display: none;
        }

        .search-box select {
            font-size: var(--size_16);
        }

        .search-box .btn-search {
            width: 3.3rem;
            height: 3.3rem;
            font-size: var(--size_25);
        }

        .search-box .column-group.year {
            flex: 0 0 8rem;
        }

        .search-box .column-group.search {
            flex: 0 0 4rem;
        }

        .search-box .column-group.survey {
            flex: 0 0 calc(100% - 12rem);
        }

        .search-box select {
            height: 3.5rem;
        }

        .search-box .column-group.year select {
            border-radius: 1.75rem 0 0 1.75rem;
        }

        .search-box .column-group.survey select {
            border-radius: 0 1.75rem 1.75rem 0;
        }

        .search-box .date-icon select {
            padding-left: 3rem;
        }

        .search-box .date-icon:before {
            left: 1rem;
            height: 1.5rem;
            width: 1.5rem;
        }

    .default-select::after {
        right: 0.8rem;
    }

    .invest_panel {
        border-radius: 0.8rem;
        margin-top: 1.2rem;
        padding: 1rem 1rem;
    }

        .invest_panel .side_menu .btn {
            font-size: var(--size_13);
            margin: 0 1.5px;
            padding: 0.5rem;
        }

            .invest_panel .side_menu .btn img {
                height: 2.2rem;
            }

        .invest_panel .chart-area.analysis .bar-group .note {
            margin-left: -15%;
            width: calc(100vw - 120px);
        }

    .invest_inner {
        padding: 1.3rem 0 0 0;
    }

        .invest_inner .col.col-map {
            display: none;
        }

        .invest_inner .box.score-box,
        .invest_inner .box.option-box {
            height: auto;
        }

        .invest_inner, .invest_inner p {
            font-size: var(--size_18);
        }

            .invest_inner .box .title:before {
                width: 4.4rem;
                height: 4.4rem;
            }

    .search-local .column-group {
        flex: 0 0 50%;
        margin-bottom: 0.3rem;
    }

        .search-local .column-group.question {
            flex: 0 0 calc(100% - 5rem);
            max-width: calc(100% - 5rem);
        }

        .search-local .column-group.level,
        .search-local .column-group.classify {
            flex: 0 0 calc(50% - 5rem);
            max-width: calc(50% - 5rem);
        }

    .search-local {
        flex-wrap: wrap;
    }

        .search-local label {
            font-size: var(--size_14);
            margin-bottom: 0.2rem;
        }

        .search-local select {
            font-size: var(--size_13);
            height: 40px;
        }

    .invest_inner .intro {
        font-size: var(--size_16);
        line-height: 1.6;
    }

    .invest_inner .box.resultbar-box .que-name {
        font-size: var(--size_17);
    }

    .invest_inner .box.resultbar-box .quebar .bar {
        height: 2.2rem;
    }

        .invest_inner .box.resultbar-box .quebar .bar span {
            font-size: var(--size_15);
        }

    .invest_inner .box.resultbar-box .quebar .num {
        font-size: var(--size_12);
        margin-bottom: 1rem;
    }

    .invest_inner .box.resultbar-box .row {
        margin-top: 0.8rem;
        display: block;
    }

    .invest_inner .box.resultbar-box .color-info {
        font-size: var(--size_13);
        max-width: 100%;
        padding-left: 0.6rem;
        text-align: center;
    }

        .invest_inner .box.resultbar-box .color-info div {
            display: inline-block;
            padding-right: 3px;
        }

    .search-local .bootstrap-select.dropdown-100 .dropdown-menu > li > a {
        width: 85vw;
    }

    .invest_inner .question-area .que-row {
        padding: 1rem 0;
        display: block;
    }

        .invest_inner .question-area .que-row .txt-box,
        .invest_inner .question-area .que-row .score-box {
            width: 100%;
            padding: 0;
        }

        .invest_inner .question-area .que-row .score-box {
            text-align: center;
            padding-top: 20px;
        }

    .invest_inner .question-area .title-row {
        height: auto;
        display: flex;
        align-items: center;
    }

        .invest_inner .question-area .title-row h6 {
            padding-left: 1rem;
            padding-right: 1rem;
            width: 27%;
            text-align: center;
            font-size: var(--size_15);
        }

        .invest_inner .question-area .title-row span {
            padding-left: 25px;
            width: 73%;
            display: block;
            line-height: 1.2;
            font-size: var(--size_15);
        }

        .invest_inner .question-area .title-row h6:before {
            right: -20px;
            width: 20px;
        }

        .invest_inner .question-area .title-row h6:after {
            right: -20px;
        }

    /*----apply----*/
    .btn.btn-applysave {
        font-size: var(--size_22);
        width: 14rem;
        padding: 0.65rem 1.5rem;
    }

    .contract-box {
        padding: 1.5rem 1rem;
        margin: 2rem 0 1rem 0;
    }

        .contract-box .content {
            padding: 0.5rem 1rem;
        }

        .contract-box .checkbox label {
            font-size: var(--size_17);
        }

        .contract-box .checkbox input[type=checkbox] {
            width: var(--size_27);
            height: var(--size_27);
        }
}

/*(sm) phone*/
@media (max-width: 575.98px) {

    /*------all------*/
    .auto-container, .auto-container-sm, .auto-container-md, .auto-container-lg, .auto-container-xl {
        padding: 0px 15px;
    }

    .lg-view, .lg-md-view {
        display: none !important;
    }

    .md-sm-view, .sm-view {
        display: block !important;
    }

    /*------banner------*/
    .index_banner {
        height: 400px;
        min-height: initial;
    }

    /*------index------*/
    .index_invest .area-title,
    .index_exam .area-title {
        font-size: var(--size_28);
        margin-bottom: 5rem;
    }

    .index_invest .block .box .box-inner .block-content .block-title .floatup {
        font-size: var(--size_16);
        font-weight: normal;
    }

    .index_invest .area-subtitle {
        font-size: var(--size_19);
    }

    .slide-indexinvest .chart-area {
        transform: scale(0.4);
        margin: -11.8rem -14rem;
        min-height: 40rem;
    }

    .slide-indexinvest .swiper-wrapper .swiper-slide {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
        min-width: 340px;
        height: 20rem;
    }

    .slide-indexinvest2 .chart-area {
        transform: scale(0.48);
        margin: -9rem -12.2rem;
    }

    .slide-indexinvest2 .swiper-wrapper .swiper-slide {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
        min-width: 340px;
        height: 17.5rem;
    }

    .index_invest .chart-area .bar-chart.style2.single-color .bar-scope .bar-group > label {
        bottom: -175px;
    }

    /*------detail------*/
    .detail_area {
        padding: 8rem 0 4rem 0;
    }

        .detail_area .area-title {
            font-size: var(--size_37);
            margin-bottom: 3rem;
        }

        .detail_area .content, .detail_area .content p {
            font-size: var(--size_17);
        }

    .knowledge_list .reference {
        font-size: var(--size_16);
    }

    .knowledge_list .block .box .box-inner .content {
        padding: 1.5rem 2rem;
    }

    .knowledge_list .block .box .box-inner .block-content .block-title {
        font-size: var(--size_18);
    }

        .knowledge_list .block .box .box-inner .block-content .block-title span {
            padding: 1rem 3rem 1rem 0.7rem;
        }

            .knowledge_list .block .box .box-inner .block-content .block-title span.num {
                padding-left: 4.3rem;
                padding-right: 1.4rem;
            }

                .knowledge_list .block .box .box-inner .block-content .block-title span.num:before {
                    width: 2.6rem;
                    height: 2.6rem;
                    left: 1.3rem;
                }

        .knowledge_list .block .box .box-inner .block-content .block-title i {
            top: 0.8rem;
            font-size: var(--size_23);
            width: 2rem;
            height: 2rem;
        }


    /*result*/
    .result_animal h2,
    .result_intro h2,
    .result_score .area-title,
    .result_chart .area-title {
        font-size: var(--size_32);
    }

    .result_animal h3 {
        font-size: var(--size_20);
    }

    .result_animal p,
    .result_intro p,
    .excellent-box p,
    .result_chart p {
        font-size: var(--size_16);
    }

    .result_animal .person-info {
        font-size: var(--size_15);
        margin-top: -1rem;
        margin-bottom: 1rem;
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }

        .result_animal .person-info::before, .result_animal .person-info::after {
            width: 2rem;
            height: 2rem;
        }

    .result_score .block .box .box-inner .block-content .block-title {
        font-size: var(--size_17);
        left: 3rem;
        right: 3rem;
        padding: 0.9rem 0.9rem 0.9rem 4rem;
    }

        .result_score .block .box .box-inner .block-content .block-title:before {
            top: -0.6rem;
            left: -0.5rem;
            width: 4.2rem;
            height: 4.2rem;
        }

    .result_score .block .box .box-inner .block-content .block-text {
        font-size: var(--size_20);
        padding: 3rem 0 0 0;
    }

    .result_score .chart-area {
        transform: scale(0.75);
        margin: -0.5rem -3.3rem;
    }

        .result_score .chart-area .bar-chart.horizontal .bar-scope .bar-group > label, .result_score .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar span {
            font-size: var(--size_17);
        }

    .result_chart .chart-area.chart-1 {
        transform: scale(0.7);
        margin: -4rem -3rem;
        width: 128%;
        max-width: initial;
    }

        .result_chart .chart-area.chart-1 .bar-chart .bar-scope .bar-group > label,
        .result_chart .chart-area.chart-1 .note {
            font-size: var(--size_19);
        }

        .result_chart .chart-area.chart-1 .bar-chart .bar-scope .bar-group .bar span {
            top: -30px;
            font-size: var(--size_20);
        }

    .tooltip-inner {
        max-width: 280px;
    }

    .invest_panel .side_menu .btn {
        max-width: 20%;
    }

    .invest_panel .chart-area {
        transform: scale(0.7);
        margin: -3rem -4.5rem;
        max-width: initial;
    }

        .invest_panel .chart-area.analysis {
            transform: scale(0.8);
            margin: -6rem -3.5rem;
        }

        .invest_panel .chart-area .chart-labelbox {
            margin: 0 -3rem;
        }

        .invest_panel .chart-area.analysis .chart-labelbox {
            margin: 0 -0.5rem;
        }

        .invest_panel .chart-area.analysis .bar-chart.style2.single-color .bar-scope .bar-group {
            min-width: 160px;
        }

        .invest_panel .chart-area.analysis .bar-group .note {
            margin-left: -40%;
            width: 90vw;
        }

        .invest_panel .chart-area .chart-scroll {
            width: auto;
            margin: 0px -3rem;
        }

        .invest_panel .chart-area .chart-labelbox ul,
        .invest_panel .chart-area .bar-chart .bar-scope .bar-group > label,
        .invest_panel .chart-area .note,
        .invest_panel .chart-area .number-scope span {
            font-size: var(--size_17);
        }

        .invest_panel .chart-area .bar-chart.style2 .bar-scope .bar-group .bar label {
            font-size: var(--size_16);
        }

        .invest_panel .chart-area .bar-chart .bar-scope .bar-group .bar span {
            font-size: var(--size_18);
        }
}

/*-----*/
/*not phone*/
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1500px) {
    .col-xxl-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .col-xxl-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }
}