/************ TABLE OF CONTENTS ***************
1. Base
2. Header
3. Popup
4. Footer
5. Block
6. Index
7. List
8. Detail
9. Other
10. Invest

/*** 
====================================================================
1	Base
====================================================================
***/
:root {
    --header_h: 100px;
    --text_black: #525252;
}

/*--基本頁面設定--*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-weight: normal;
}

body {
    background: #fff;
}

a,
a:hover,
a:focus,
a:active {
    color: var(--text_black);
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: all 400ms;
}

    a:hover, a:focus, a:active, a.active {
        color: var(--main_blue);
    }

    a.text-link {
        color: var(--main_blue);
        text-decoration: underline;
    }

        a.text-link:hover,
        a.text-link:focus,
        a.text-link:active,
        a.text-link.active {
            color: var(--dark_blue);
        }

    a.disabled {
        pointer-events: none;
        opacity: 0.5;
    }

.auto-container-sm {
    position: static;
    max-width: 780px; /*w=700*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container {
    position: static;
    max-width: 1405px; /*w=1325*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-md {
    position: static;
    max-width: 1220px; /*w=1140*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-lg {
    position: static;
    max-width: 1520px; /*w=1440*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-xl {
    position: static;
    max-width: 1600px; /*w=1520*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

    .auto-container:before, .auto-container-sm:before, .auto-container-md:before, .auto-container-lg:before, .auto-container-xl:before {
        display: table;
        content: " ";
    }

    .auto-container::after, .auto-container-sm::after, .auto-container-md::after, .auto-container-lg::after, .auto-container-xl:after {
        display: table;
        content: " ";
        clear: both;
    }

.btgrid {
    overflow: hidden;
}

    .btgrid img {
        max-width: 100%;
    }

/*------all------*/
.xl-view .lg-view, .lg-md-view {
    display: block !important;
}

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

/*.btn*/
.btn {
    font-size: var(--size_19);
    font-weight: 500;
    padding: 0.62rem 1.2rem 0.6rem 1.6rem;
}

    .btn:focus, .btn.focus {
        outline: 0;
        box-shadow: none;
    }

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

.btn-blue {
    border: 1px solid var(--main_blue);
    color: #fff;
    background: var(--main_blue);
}

    .btn-blue:hover, .btn-blue:focus {
        color: #fff;
        background: var(--main_blue);
    }

.btn-orange {
    border: 1px solid var(--main_orange);
    color: #fff;
    background: var(--main_orange);
}

    .btn-orange:hover, .btn-orange:focus {
        color: #fff !important;
        background: var(--main_orange) !important;
    }

.btn-outline-blue {
    border: 1px solid var(--main_blue);
    color: var(--main_blue);
    background: none;
}

    .btn-outline-blue:hover, .btn-outline-blue:focus {
        color: var(--main_blue);
        background: var(--light_blue);
        opacity: 1;
    }

.btn-outline-black {
    border: 1px solid var(--text_black);
    color: var(--text_black);
    background: none;
}

    .btn-outline-black:hover, .btn-outline-black:focus {
        color: var(--text_black);
        background: var(--light_blue);
        opacity: 1;
    }

.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
    background: none;
}

    .btn-outline-white:hover, .btn-outline-white:focus {
        color: #fff;
        background: var(--main_blue);
        opacity: 1;
    }

.btn-gradient {
    border: 2px solid #fff;
    color: #fff;
    background-color: var(--main_blue);
    background-image: linear-gradient(109deg, #178AAC 0%, #12A2A9 40%, #00BA9E 100%);
}

    .btn-gradient:hover, .btn-gradient:focus {
        color: #fff;
        background-image: none;
        opacity: 1;
    }

.btn-gradient-orange {
    border: 2px solid #fff;
    color: #fff;
    background: var(--main_orange);
    background-image: linear-gradient(109deg, #FC640D 0%, #F88E2C 40%, #EFD040 100%);
}

    .btn-gradient-orange:hover, .btn-gradient-orange:focus {
        color: #fff;
        background-image: none;
        opacity: 1;
    }

/*.dropdown*/
.dropdown-menu {
    box-shadow: 0px 0.2rem 0.375rem rgba(0, 0, 0, 0.15);
    border: none;
    z-index: 1030;
    max-height: 300px;
}

.dropdown-item {
    font-size: var(--size_16);
    color: var(--text_black);
    padding: 0.3rem 1.3rem;
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: #f7f7f7;
        color: var(--main_blue);
    }

    .dropdown-item.active { /*, .dropdown-item:active*/
        color: #fff;
        background: var(--main_blue);
    }

.dropdown-toggle::after {
    color: var(--main_blue);
    margin-left: 0.4em;
    vertical-align: 0.2em;
    border-top: 0.5em solid;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
}

.bootstrap-select .btn.dropdown-toggle {
    box-shadow: none !important;
    transition: none;
}

    .bootstrap-select .btn.dropdown-toggle:hover {
        background: transparent !important;
    }

.bootstrap-select.show .btn.dropdown-toggle {
    outline: #EEC552 dotted 5px !important;
}

.bootstrap-select .dropdown-menu {
    padding: 0;
}

.bootstrap-select .dropdown-item {
    white-space: normal;
}

    .bootstrap-select .dropdown-item:not(.btn):active,
    .bootstrap-select .dropdown-item:not(.btn).active {
        background-color: #4f99c6;
        color: #fff !important;
    }

.dropdown-item.disabled {
    opacity: 1;
}

.dropdown-item span.group {
    font-weight: bold;
    color: var(--text_black);
}

/*bg*/
.bg-gradient {
    background: transparent linear-gradient(180deg, #178AAC 0%, #12A2A9 40%, #00BA9E 100%) 0% 0% no-repeat padding-box;
}

.bg-building {
    position: relative;
}

    .bg-building::after {
        content: '';
        background-image: url('../img/bg-index-building.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: 80vh;
    }

.bg-dark {
    background-color: #324153 !important;
}

/*** 
====================================================================
2. Header 
====================================================================
***/
.main-header {
    padding: 1.5rem 6rem 0 6rem;
    height: var(--header_h);
    position: relative;
    z-index: 10;
}

    .main-header + * {
        margin-top: calc(var(--header_h) * -1);
    }

    /*
    .main-header.fixed-top {
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }*/
    .main-header .navbar {
        padding: 0 !important;
        height: var(--header_h);
    }

    .main-header .navbar-collapse {
        justify-content: flex-end;
    }

    .main-header .navbar-brand {
        position: absolute;
        display: block;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0 !important;
        padding: 1.25rem 0 !important;
    }

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

    .main-header .navbar-light .navbar-toggler {
        color: #fff;
        padding: 3px 5px;
        border: none;
        position: absolute;
        top: 18px;
        right: 0;
        z-index: 1001;
    }

/*---menu---*/
.main-menu.navbar-nav {
    position: relative;
    flex-direction: row;
}

.main-menu > li > a {
    padding: 0.7rem 0 !important;
    margin-left: 4rem;
    color: #fff !important;
    font-size: var(--size_18);
    font-weight: 400;
    border: 2px solid transparent;
}

    .main-menu > li > a:hover, .main-menu > li > a:focus {
        background-color: transparent;
        border-bottom: 2px solid var(--main_blue);
    }

    .main-menu > li > a::after {
        content: none;
    }

#collapsibleNavbar .menuClose, .collapse-logo {
    display: none;
}

.navbarClose {
    position: absolute;
    top: 1rem;
    right: -10%;
    display: none;
    color: #fff;
    border-color: #fff;
    font-size: var(--size_20);
    text-decoration: none !important;
}

.navbarMask {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
}

/*** 
====================================================================
3. Popup 
====================================================================
***/
.page-wrapper.pre {
    display: none !important;
}

#LoadingMask.pre {
    display: block !important;
    background-color: #fff;
}

#LoadingMask {
    display: none;
    z-index: 5000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .5;
    background-color: #fff;
    transition: opacity .15s linear;
}

.loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -22px;
    color: #666;
    text-align: center;
    padding: 0;
}

/*modal 共用*/
.modal-content {
    border-radius: 0;
    padding: 2.5rem 2.8rem;
}

.modal-header {
    padding: 0 1.5rem 0 0;
    border: none;
    position: relative;
}

.modal-title {
    font-size: var(--size_30);
    color: var(--main_blue);
    font-weight: 700;
}

.modal button.close {
    opacity: 1;
    text-shadow: none;
    background: #fff;
    color: var(--main_blue) !important;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--size_29);
    height: var(--size_29);
}

    .modal button.close:not(:disabled):not(.disabled):hover,
    .modal button.close:not(:disabled):not(.disabled):focus {
        opacity: .75;
    }

.modal-body {
    padding: 0;
    font-size: var(--size_17);
}

/*.btn-box 共用*/
.btn-box {
    text-align: center;
    padding-top: 1.3rem;
}

    .btn-box .btn {
        margin: 0 1px 4px 1px;
    }

/*** 
====================================================================
4. Footer 
====================================================================
***/
.footer_area {
    padding: 2.3rem 0rem 1rem 4rem;
    background: #525252;
    font-size: var(--size_16);
    /*  word-break: keep-all;*/
    line-height: 2;
    color: #BFBFBF;
}

    .footer_area .footer-logo {
        display: inline-block;
        width: 15rem;
        margin-left: -3.5rem;
        margin-bottom: 0rem;
    }

        .footer_area .footer-logo img {
            display: block;
            width: 100%;
            max-width: 400px;
        }

    .footer_area .copyright {
        font-size: var(--size_15);
        margin-top: 2.2rem;
        text-align: center;
        display: block;
    }

    .footer_area a {
        color: #BFBFBF !important;
    }

        .footer_area a:hover {
            color: var(--middle_blue) !important;
        }

/*** 
====================================================================
5. Block  
====================================================================
***/
/*--block--*/
.block {
    margin-bottom: -10px;
}

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

    .block .box {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1.1rem;
        margin-bottom: 1.3rem;
    }

        .block .box:last-child {
            border-bottom: none;
        }

        .block .box .box-inner {
            position: relative;
            transition: all 400ms;
            border-radius: 0;
        }

            .block .box .box-inner .image-box {
                /*border-radius: 10px;*/
                overflow: hidden;
            }

    .block:not(.no-hover) .box .box-inner .image-box:hover img {
        opacity: 0.9;
        /*transform: scale(1.1);*/
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
    }

    .block .box .box-inner img {
        width: 100%;
    }

    /*box-rectangle */
    /*.block-shape .box .box-inner .image-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 0%;
    background: #eee;
}

    .block-shape .box .box-inner .image-box img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }*/

    /*--1:1--*/
    /*.shape-100 .image-box {
    padding-bottom: 100% !important;
}

    .shape-100 .image-box img.height-100 {
        width: auto !important;
        height: 100% !important;
    }*/

    /*--458:258--*/
    /*.shape-56 .image-box {
    padding-bottom: 56.332% !important;
}*/

    /*txt*/
    .block .box .box-inner .block-content {
        padding: 0.2rem 0;
        width: 100%;
        color: var(--text_black);
    }

        .block .box .box-inner .block-content .block-title {
            font-size: var(--size_18);
            font-weight: 500;
            line-height: 1.25;
            color: #525252;
            text-align: left;
            margin-bottom: 0.4rem;
            transition: all 400ms;
            /*one line*/
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            min-height: calc(1 * var(--size_18) + 0);
        }

        .block .box .box-inner .block-content a:hover .block-title {
            color: var(--main_blue);
        }

        .block .box .box-inner .block-content .block-text {
            font-size: var(--size_15);
            line-height: 1.6;
            margin-bottom: 0;
        }

    .block .box .box-inner .block-date {
        font-size: var(--size_18);
        font-weight: 500;
    }

/*** 
====================================================================
6. Index 
====================================================================
***/

/*---index_banner---*/
.index_banner {
    /*height: 73vh;*/
    height: 41.15vw;
    min-height: 400px;
    width: 100%;
    position: relative;
}

    .index_banner .banner-image {
        background-image: url('../img/bg-index-banner.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 0;
        width: 100%;
        height: 100%;
    }

    .index_banner .inner-box {
        position: absolute;
        top: 32%;
        left: 0;
        width: 100%;
        text-align: center;
    }

        .index_banner .inner-box h2 {
            font-size: 5.8125rem;
            font-weight: bold;
            text-shadow: 0px 0px 34px #000000F8;
            color: #fff;
            margin-bottom: 0;
            position: relative;
        }

        .index_banner .inner-box h3 {
            font-size: 3.4375rem;
            font-weight: bold;
            text-shadow: 0px 0px 34px #000000F8;
            color: #fff;
            margin-bottom: 3rem;
        }

        .index_banner .inner-box p {
            font-size: var(--size_28);
            display: inline-block;
            color: #fff;
            text-shadow: 0px 0px 34px #000000D1;
        }

/*---index_news---*/
.index_news {
    padding: 4rem 0 1.2rem 0;
    position: relative;
}

    .index_news > div {
        position: relative;
    }

    .index_news .area-title {
        color: var(--main_blue);
        font-size: 2.5625rem;
        font-weight: 700;
        letter-spacing: 0.14rem;
        position: absolute;
        top: 0;
        left: 40px;
        z-index: 1;
        padding: 0.6rem 0 0 1.7rem;
    }

    .index_news .area-subtitle {
        display: block;
        color: #84C5CF;
        font-weight: 700;
        font-size: var(--size_28);
        letter-spacing: 0;
        margin-left: -2rem;
        line-height: 1;
    }

    .index_news .area-title::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 7.125rem;
        width: 7.125rem;
        border-radius: 50%;
        background: var(--light_blue);
        z-index: -1;
    }

    .index_news .block {
        width: 68%;
        margin-left: auto;
        margin-top: 2rem;
        min-height: 18rem;
    }

    .index_news .btn-more {
        float: right;
    }

.bg-index-news {
    position: absolute;
    left: 40px;
    bottom: -1.2rem;
    width: 29.5%;
}

/*---index_exam---*/
.index_exam {
    padding: 7rem 0 4rem 0;
}

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

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

        .index_exam .block .box .box-inner .image-box {
            height: 17rem;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .index_exam .block .box.box-personal .box-inner .image-box,
        .index_exam .block .box.box-group .box-inner .image-box {
            padding: 0 2.5rem;
        }

        .index_exam .block .box .box-inner img {
            max-height: 100%;
        }

        .index_exam .block .box .box-inner .block-content {
            padding: 2rem 1rem 1rem 1rem;
            position: relative;
        }

        .index_exam .block .box.box-personal .box-inner .block-content {
            background: #b0e2e8;
        }

        .index_exam .block .box.box-group .box-inner .block-content {
            background: #f1cf35;
        }

        .index_exam .block .box.box-apply .box-inner .block-content {
            background: #faa2b6;
        }

        .index_exam .block .box .box-inner .block-content:before,
        .index_exam .block .box .box-inner .block-content:after {
            content: '';
            position: absolute;
            top: 37%;
            z-index: 1;
            background-repeat: no-repeat;
            background-size: contain;
            width: 2.8rem;
            height: 3.5rem;
            left: -0.9rem;
            background-image: url('../img/icon-left-hand.svg');
        }

        .index_exam .block .box .box-inner .block-content:after {
            left: initial;
            right: -0.9rem;
            background-image: url('../img/icon-right-hand.svg');
        }

        .index_exam .block .box .box-inner .block-content .block-title {
            text-align: center;
            font-size: 2.5625rem;
            color: #000;
            font-weight: 700;
            margin-bottom: 1.2rem;
        }

        .index_exam .block .box .box-inner .block-content .block-text {
            font-size: var(--size_24);
            color: #324153;
            line-height: 1.4;
            font-weight: 500;
            display: flex;
            justify-content: center;
        }

        .index_exam .block .box .btn.btn-more i {
            padding-left: 0.8rem;
        }

    .index_exam .block .box-apply .box-inner .block-content .block-text ul {
        list-style-type: none;
        padding-left: 1rem;
        margin-top: -0.5rem;
        margin-bottom: -0.7rem;
    }

        .index_exam .block .box-apply .box-inner .block-content .block-text ul li {
            margin-bottom: 2px;
            font-size: var(--size_18);
            font-weight: 500;
        }

        .index_exam .block .box-apply .box-inner .block-content .block-text ul span {
            color: #B73A56;
            background: #F7D7D7;
            border-radius: 50%;
            width: var(--size_27);
            height: var(--size_27);
            display: inline-block;
            text-align: center;
            margin-right: 0.5rem;
        }

/*----examModal----*/
#examModal .modal-dialog {
    margin-top: 4vw;
}

#examModal .index_exam {
    padding: 0;
}

    #examModal .index_exam .area-title {
        margin-top: 1.2rem;
        margin-bottom: 2rem;
    }

    #examModal .index_exam .block.row {
        margin-right: 0;
        margin-left: 0;
    }

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

/*----examModal----*/
#youtubeModal .modal-title {
    color: #fff;
    margin-bottom: 1rem;
}

/*---index_invest---*/
.index_invest {
    padding: 5rem 0 7rem 0;
    position: relative;
    z-index: 1;
}

    .index_invest .area-title,
    .index_exam .area-title {
        text-align: center;
        font-size: var(--size_48);
        font-weight: 700;
        color: #fff;
        margin-bottom: 10rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .index_invest .area-title span,
        .index_exam .area-title span {
            display: inline-block;
            position: relative;
            width: 18%;
            height: 2.1rem;
        }

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

            .index_invest .area-title span.left,
            .index_exam .area-title span.left {
                margin-right: 3rem;
                border-right: 4px solid #fff;
            }

            .index_invest .area-title span.right,
            .index_exam .area-title span.right {
                margin-left: 3rem;
                border-left: 4px solid #fff;
            }

            .index_invest .area-title span::before,
            .index_exam .area-title span::before {
                content: '';
                width: 100%;
                position: absolute;
                top: 51%;
                left: 0;
                border-top: 1px solid #fff;
            }

    .index_invest .area-subtitle {
        text-align: center;
        font-size: var(--size_27);
        font-weight: 700;
        color: #fff;
        margin: 4rem 0;
    }

    .index_invest .block .box .box-inner {
        border-radius: 1.875rem;
        background: #fff;
        text-align: center;
        height: 100%;
    }

        .index_invest .block .box .box-inner .block-content .block-title {
            overflow: visible;
            text-align: center;
            min-height: initial;
            display: block;
        }

            .index_invest .block .box .box-inner .block-content .block-title .floatup {
                display: inline-block;
                background: #447EC4;
                color: #fff;
                box-shadow: 0px 3px 6px #00000029;
                font-size: var(--size_27);
                padding: 0.9rem 2.6rem;
                margin-top: -2.5rem;
            }

    .index_invest .empty-chart img {
        width: 80% !important;
    }

    .index_invest .btn-box {
        position: relative;
        z-index: 1;
    }

.slide-indexinvest .swiper-wrapper .swiper-slide {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 550px;
    height: auto;
}

.slide-indexinvest .chart-area {
    background: transparent;
    padding: 0;
    max-width: initial;
    transform: scale(0.9);
}

.slide-indexinvest2 .swiper-wrapper .swiper-slide {
    -ms-flex: 0 0 33.3%;
    flex: 0 0 33.3%;
    max-width: 33.3%;
    min-width: 400px;
    height: 22rem;
}

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

.index_invest .chart-area .bar-chart.style2 {
    margin-top: 0;
}

    .index_invest .chart-area .bar-chart.style2.single-color .bar-scope {
        margin: 0;
        padding: 0;
    }

/*.chart*/
.index_invest .chart-area {
    display: none;
}

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

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

    .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_16);
    }

    .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_15);
    }

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

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

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

/*swiper*/
.swiper-container-initialized {
    position: relative;
}

.swiper-button-prev:after, .swiper-button-next:after {
    content: "\f137";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: #797979;
    font-size: var(--size_33);
    opacity: 0.34;
}

.swiper-button-next:after {
    content: "\f138";
}

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

.swiper-button-next {
    right: 0;
}

.swiper-button-prev {
    left: 0;
}

/*** 
====================================================================
7. List
====================================================================
***/
/*---news_list---*/
.news_list .block .box {
    border-bottom: 1px dashed #7f7f7f;
}

    .news_list .block .box .box-inner {
        display: flex;
        align-items: center;
    }

        .news_list .block .box .box-inner .block-content .block-title {
            margin-bottom: 0;
        }

        .news_list .block .box .box-inner .block-date {
            width: 11em;
            padding-left: 2rem;
        }


/*** 
====================================================================
8. Detail
====================================================================
***/

/*-----detail-----*/
.bg-cloud::before {
    content: '';
    background-image: url('../img/bg-knowkedge-cloud.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 10%;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.bg-cloud > div {
    position: relative;
    z-index: 1;
}

.detail_area {
    padding: 13rem 0 9rem 0;
    line-height: 1.8;
}

    .detail_area .area-title {
        text-align: center;
        font-size: 3.375rem;
        font-weight: 600;
        margin-bottom: 3.5rem;
        color: #fff;
    }

    .detail_area .auto-container {
        position: relative;
    }

    .detail_area .intro {
        font-size: var(--size_18);
        font-weight: 500;
        line-height: 1.8;
        margin-bottom: 3rem;
    }

    /*----一般內容----*/
    .detail_area img {
        max-width: 100%;
    }

    .detail_area .content,
    .detail_area .content p {
        font-size: var(--size_18);
        font-weight: 500;
        color: #324153;
        line-height: 2;
    }

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

            .detail_area .content p:last-child {
                margin-bottom: 0;
            }

        .detail_area .content h1,
        .detail_area .content h2,
        .detail_area .content h3,
        .detail_area .content h4,
        .detail_area .content h5,
        .detail_area .content h6 {
            color: var(--main_blue);
            font-weight: 700;
            margin-bottom: 1.2rem;
        }

        .detail_area .content h1 {
            font-size: var(--size_40);
        }

        .detail_area .content h2 {
            font-size: var(--size_32);
        }

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

        .detail_area .content h4 {
            font-size: var(--size_25);
        }

        .detail_area .content h5 {
            font-size: var(--size_22);
        }

        .detail_area .content h6 {
            font-size: var(--size_18);
        }

        .detail_area .content hr {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid #BFBFBF;
        }

        .detail_area .content strong {
            font-weight: bold;
        }

        .detail_area .content a {
            color: var(--main_blue);
            text-decoration: none;
        }

            .detail_area .content a:hover {
                opacity: 0.8;
            }

        .detail_area .content ul {
            list-style-type: none;
            padding-left: 2.2rem;
            color: #525252;
            font-weight: 400;
            margin-bottom: 1.5rem;
        }

            .detail_area .content ul li {
                position: relative;
                margin-bottom: 0.3rem;
            }

                .detail_area .content ul li:before {
                    content: '';
                    position: absolute;
                    background-image: url(../img/icon-result-affection.svg);
                    background-repeat: no-repeat;
                    background-size: contain;
                    left: -2.3rem;
                    width: 2rem;
                    height: 2rem;
                }

        .detail_area .content figcaption {
            text-align: center;
        }

.knowledge_list .reference {
    color: #525252;
    font-weight: 400;
    line-height: 1.5;
    font-size: var(--size_17);
}

.knowledge_list .youtubelist { /*.row*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0 -0.4rem 1rem -0.4rem;
    padding: 0;
}

    .knowledge_list .youtubelist > li {
        color #000;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding: 0 0.4rem 0.8rem 0.4rem;
        /*1/3*/
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

        .knowledge_list .youtubelist > li > a {
            background: #70BDC7;
            color: #000;
            font-weight: 500;
            font-size: var(--size_22);
            /*white-space: nowrap;*/
            border-radius: 0.4rem;
            padding: 1.8rem 1.5rem;
            display: block;
        }

        .knowledge_list .youtubelist > li:nth-child(3n-1) > a {
            background: #F1CF35;
        }

        .knowledge_list .youtubelist > li:nth-child(3n) > a {
            background: #FF9BC2;
        }

        .knowledge_list .youtubelist > li > a::after {
            content: "\f061";
            font-family: "Font Awesome 5 Pro";
            font-weight: 400;
            float: right;
            font-size: 110%;
        }

.knowledge_list .block {
    margin-bottom: -5rem;
}

    .knowledge_list .block .box {
        margin-bottom: 0;
        padding: 0.5rem 0 0 0;
    }

        .knowledge_list .block .box .box-inner .content {
            border-radius: 1.875rem;
            background: #fff;
            padding: 3rem 6.3rem;
        }

        .knowledge_list .block .box .box-inner .block-content .block-title {
            font-size: var(--size_27);
            font-weight: 700;
            color: var(--text_black);
            width: auto;
            background: #ffffff;
            border-radius: 2.4rem;
            position: relative;
            text-overflow: initial;
            overflow: initial;
            display: flex;
            margin-bottom: 0.7rem;
            cursor: pointer;
        }

            .knowledge_list .block .box .box-inner .block-content .block-title span {
                font-weight: 700;
                padding: 1.3rem 4rem 1.3rem 1rem;
                display: inline-block;
            }

                .knowledge_list .block .box .box-inner .block-content .block-title span.num {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    font-weight: 700;
                    background: #FB8D25;
                    white-space: nowrap;
                    height: 100%;
                    width: auto;
                    border-radius: 2.4rem;
                    padding-left: 6.5rem;
                    padding-right: 2.5rem;
                }

                    .knowledge_list .block .box .box-inner .block-content .block-title span.num:before {
                        content: '';
                        position: absolute;
                        left: 2rem;
                        top: 0.5rem;
                        bottom: 0.5rem;
                        background-image: url(../img/icon-result-knowledge.svg);
                        background-repeat: no-repeat;
                        background-size: contain;
                        display: inline-block;
                        width: 3.7rem;
                        height: 3.7rem;
                    }

    /*collapse*/
    .knowledge_list .block .collapse,
    .knowledge_list .block .collapsing {
        transition: none !important;
        height: auto !important;
    }

    .knowledge_list .block .box .box-inner .block-content .block-title i {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: var(--main_blue);
        width: 2.2rem;
        height: 2.2rem;
        font-size: var(--size_28);
        color: #fff;
        position: absolute;
        top: 1.2rem;
        right: 1rem;
        padding-top: 1px;
    }

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

    .result_animal::before {
        content: '';
        background-image: url('../img/bg-result-star.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }

    .result_animal::after {
        content: '';
        background-repeat: no-repeat;
        background-size: 90% 75%;
        background-position: center top;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }

    .result_animal.type1::after {
        background-image: url('../img/pic-result-wolf-cloud.svg');
    }

    .result_animal.type2::after {
        background-image: url('../img/pic-result-chimpanzees-cloud.svg');
    }

    .result_animal.type3::after {
        background-image: url('../img/bg-result-seacreatures.svg');
    }

    .result_animal img {
        position: relative;
        width: 80%;
        margin-bottom: 2.5%;
    }

    .result_animal.type2 img {
        padding: 0;
        margin: 8% 0 4% 2%;
    }

    .result_animal.type3 img {
        padding: 4%;
        margin: 3% 0 -2.5% 1%;
    }

    .result_animal h2,
    .result_intro h2 {
        font-size: var(--size_48);
        font-weight: 700;
        margin-bottom: 4rem;
        position: relative;
        z-index: 2;
        line-height: 1.5;
    }

        .result_animal h2 br {
            display: none;
        }

        .result_animal h2 span.tag {
            color: #68B83A;
            display: inline-block;
            background: #fff;
            font-weight: 900;
            border-radius: 1.5rem;
            padding: 0 0.8rem;
        }

    .result_animal h3 {
        font-size: var(--size_34);
        font-weight: 700;
        margin-bottom: 2rem;
        line-height: 1.5;
        position: relative;
        z-index: 2;
    }

        .result_animal h3 span {
            font-weight: inherit;
        }

    .result_animal .person-info {
        position: relative;
        display: inline-block;
        background: linear-gradient(103deg, #1A92AB 0%, #1A6EAB 49%, #1B94AB 100%);
        font-size: var(--size_22);
        border-radius: 5rem;
        padding: 0.6rem 3.6rem;
        margin-top: -1.5rem;
        margin-bottom: 1.2rem;
        z-index: 1;
    }

        .result_animal .person-info::before,
        .result_animal .person-info::after {
            content: '';
            background-image: url('../img/bg-screw.svg');
            background-repeat: no-repeat;
            background-size: contain;
            width: 2.3rem;
            height: 2.3rem;
            position: absolute;
            left: 0.8rem;
            top: 32%;
        }

        .result_animal .person-info::after {
            left: initial;
            right: 0.8rem;
            transform: scaleX(-1);
        }

    .result_animal p,
    .result_intro p,
    .result_chart p {
        font-size: var(--size_26);
        line-height: 2;
        text-align: center;
        color: #fff;
    }

.result_intro {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 12rem 0 3.5rem 0;
}

    .result_intro .content {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 0 2.8rem 4rem 2.8rem;
    }

        .result_intro .content img {
            margin-right: 0.5rem;
        }

.text-orange-stroke {
    font-size: 1.8em;
    font-weight: 900;
    color: #FF6200;
    text-shadow: -0.05em -0.05em 0 white, -0.05em 0.05em 0 white, 0.05em -0.05em 0 white, 0.05em 0.05em 0 white, -0.05em 0 0 white, 0.05em 0 0 white, 0 -0.05em 0 white, 0 0.05em 0 white;
    transform: translateY(4%);
    display: inline-block;
    margin: 0 !important;
}

.ranking-block {
    position: relative;
    height: 27rem;
    width: 100%;
    margin-bottom: 12rem;
}

    .ranking-block > img {
        position: absolute;
        bottom: 0;
        margin-bottom: 0 !important;
        z-index: 1001;
    }

        .ranking-block > img.people-left {
            left: -2%;
            width: 50%;
            max-height: 100%;
        }

        .ranking-block > img.people-right {
            right: 3%;
            width: 10%;
            max-height: 85%;
        }

    .ranking-block .panel {
        background-color: var(--light_blue);
        color: var(--text_black);
        border-radius: 2rem;
        width: 45%;
        height: 88%;
        position: absolute;
        left: 38%;
        bottom: 0;
        padding: 2rem 2.5rem;
        z-index: 1000;
    }

        .ranking-block .panel .panel-inner {
            overflow-y: scroll;
            height: 100%;
        }

            .ranking-block .panel .panel-inner::-webkit-scrollbar {
                height: 10px;
                width: 10px;
            }

            .ranking-block .panel .panel-inner::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 0px 1px #ededed;
                border-radius: 9px;
                background: #daedf0;
            }

            .ranking-block .panel .panel-inner::-webkit-scrollbar-thumb {
                border-radius: 9px;
                background: #9db9c3;
                border: 2px solid #daedf0;
            }

        .ranking-block .panel .subject {
            font-size: var(--size_33);
            font-weight: 900;
            margin-bottom: 1.8rem;
            padding-left: 0.5rem;
        }

            .ranking-block .panel .subject img {
                width: 7rem;
                margin: 0;
                position: absolute;
                left: 10%;
                top: -10%;
            }

        .ranking-block .panel .list {
            display: flex;
            flex-wrap: wrap;
            margin-left: 3rem;
        }

            .ranking-block .panel .list li {
                flex: 0 0 50%;
                max-width: 50%;
                padding-bottom: 0.9rem;
                text-align: left;
                font-size: var(--size_21);
                font-weight: 900;
            }

                .ranking-block .panel .list li span {
                    font-weight: 900;
                    display: inline-block;
                    position: relative;
                    width: 1.875rem;
                    height: 1.875rem;
                    background: #EAEAEA;
                    border-radius: 50%
                }

.result_animal img.no-mvp {
    margin-bottom: 1.5rem;
}

[data-aos="custom-slide-right"] {
    transform: translate3d(-30%, 0, 0);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

    [data-aos="custom-slide-right"].aos-animate {
        transform: translate3d(0, 0, 0);
    }

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

    .animal-total-block .box {
        width: 31.5rem;
        height: 31.5rem;
        position: relative;
        display: inline-block;
    }

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

        .animal-total-block .box::before {
            content: '';
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
        }

        .animal-total-block .box.box-1::before {
            background-image: url('../img/pic-animal-type-wolf.png');
        }

        .animal-total-block .box.box-2::before {
            background-image: url('../img/pic-animal-type-Orangutan.png');
        }

        .animal-total-block .box.box-3::before {
            background-image: url('../img/pic-animal-type-dolphin.png');
        }

    .animal-total-block .box-inner {
        font-size: var(--size_30);
        line-height: 1.1;
        font-weight: 500;
        width: 100%;
        position: absolute;
        bottom: 2.2rem;
        left: 0;
    }

        .animal-total-block .box-inner span {
            font-size: 2em;
            font-weight: 600;
        }

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

    .result_score .area-title,
    .result_chart .area-title {
        font-size: var(--size_48);
        font-weight: 700;
        color: #fff;
        text-align: center;
        margin-bottom: 3rem;
    }

        .result_score .area-title small {
            display: block;
            font-size: 55%;
            margin-bottom: 0.4rem;
        }

    .result_score .btn-box {
        width: 100%;
    }

        .result_score .btn-box .btn {
            box-shadow: 6px 5px 6px #00000029;
            font-size: var(--size_22);
            min-width: 17rem;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            margin: 0px 4px 8px 4px;
        }

/*bar-chart.horizontal*/
.chart-area .bar-chart.horizontal .bar-scope {
    margin-left: 81px;
    margin-bottom: 0;
}

    .chart-area .bar-chart.horizontal .bar-scope .bar-group {
        width: 100%;
        margin: 10px 0 0 0;
    }

        .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar {
            height: 100%;
            border-radius: 30px;
        }

            .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar span {
                top: 0;
                left: initial;
                right: 8px;
                width: auto;
                color: #000;
                font-size: 15px;
            }

        .chart-area .bar-chart.horizontal .bar-scope .bar-group > label {
            bottom: 0;
            left: -90px;
        }

.chart-area .bar-chart.horizontal .number-scope {
    top: 0;
    left: calc(80px - 4px);
    width: 100%;
    height: 100%;
    text-align: left;
}

    .chart-area .bar-chart.horizontal .number-scope span {
        width: 78px;
        height: 100%;
        display: inline-block;
        float: left;
        margin: 0;
    }

        .chart-area .bar-chart.horizontal .number-scope span:after {
            border-left: 1px solid;
            border-bottom: none;
            width: calc(100% - 35px);
            height: calc(100% - 30px);
            top: 25px;
            left: 4px;
        }

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

.result_score .block .box,
.result_chart .block .box {
    padding-left: 1rem;
    padding-right: 1rem;
    top: 1.5rem;
}

.result_score .chart-area {
    background: none;
    padding: 0;
    min-height: initial;
}

    .result_score .chart-area .bar-chart {
        margin-top: 0;
    }

        .result_score .chart-area .bar-chart .bar-panel {
            background: none !important;
            padding: 0 2rem;
            margin-top: 0;
            min-height: 12rem;
            display: flex;
            align-items: center;
        }

        .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_14);
            color: #324153;
            font-weight: 500;
        }

        .result_score .chart-area .bar-chart.horizontal .bar-scope .bar-group > label {
            text-align: right;
            width: 5.2rem;
        }

        .result_score .chart-area .bar-chart .bar-scope {
            font-size: var(--size_12);
        }

        .result_score .chart-area .bar-chart.horizontal .bar-scope .bar-group > label i {
            font-size: var(--size_17);
            margin-left: 2px;
        }


.result_score .block .box .box-inner {
    border-radius: 1rem;
}

.result_score .block .box.box-type1 .box-inner {
    background: #F1CF35;
}

.result_score .block .box.box-type2 .box-inner {
    background: #FF9BC2;
}

.result_score .block .box.box-type3 .box-inner {
    background: #8CDCE6;
}

.result_score .block .box .box-inner .block-content .block-title,
.result_chart .block .box .box-inner .block-content .block-title {
    font-size: var(--size_23);
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: -0.7rem;
    left: 4rem;
    right: 4rem;
    border-radius: 4rem;
    padding: 1rem 1rem 1rem 4rem;
    overflow: initial;
}

.result_score .block .box.box-type1 .box-inner .block-content .block-title {
    background: #FB8D25;
}

.result_score .block .box.box-type2 .box-inner .block-content .block-title {
    background: #B73A56;
}

.result_score .block .box.box-type3 .box-inner .block-content .block-title {
    background: #179BAC;
}

.result_chart .block .box .box-inner .block-content .block-title {
    background: #447EC4;
    z-index: 1;
    width: 12rem;
    text-align: center;
    padding-left: 3rem;
    margin-left: auto;
    margin-right: auto;
}

    .result_score .block .box .box-inner .block-content .block-title:before,
    .result_chart .block .box .box-inner .block-content .block-title:before {
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        top: -0.8rem;
        left: -0.8rem;
        width: 5rem;
        height: 5rem;
    }

    .result_score .block .box.box-type1 .box-inner .block-content .block-title:before,
    .result_chart .block .box .box-inner .block-content .block-title:before {
        background-image: url('../img/icon-result-knowledge.svg');
    }

.result_score .block .box.box-type2 .box-inner .block-content .block-title:before {
    background-image: url('../img/icon-result-affection.svg');
}

.result_score .block .box.box-type3 .box-inner .block-content .block-title:before {
    background-image: url('../img/icon-result-hug.svg');
    background-size: 95%;
    background-position: bottom;
}

.result_score .block .box .box-inner .block-content .block-text {
    font-size: var(--size_29);
    text-align: center;
    font-weight: 500;
    color: #000;
    padding: 3.8rem 0 0 0;
}

    .result_score .block .box .box-inner .block-content .block-text b {
        font-weight: 900;
    }


.result_score .box.box-type1 .chart-area .number-scope span {
    color: #FB8D25;
}

.result_score .box.box-type2 .chart-area .number-scope span {
    color: #B73A56;
}

.result_score .box.box-type3 .chart-area .number-scope span {
    color: #179BAC;
}

.result_score .box.box-type1 .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar {
    background: #FB8D25;
}

.result_score .box.box-type2 .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar {
    background: #FFD9E8;
}

.result_score .box.box-type3 .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar {
    background: #179BAC;
}

.result_score .box.box-type1 .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar span {
    color: #000;
}

.result_score .box.box-type2 .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar span {
    color: #B73A56;
}

.result_score .box.box-type3 .chart-area .bar-chart.horizontal .bar-scope .bar-group .bar span {
    color: #fff;
}

.result_score .box.box-type1 .chart-area .bar-chart.horizontal .bar-scope .bar-group > label i {
    color: #B73A56;
    opacity: 0.61;
}

.result_score .box.box-type2 .chart-area .bar-chart.horizontal .bar-scope .bar-group > label i {
    color: #B73A56;
    opacity: 0.61;
}

.result_score .box.box-type3 .chart-area .bar-chart.horizontal .bar-scope .bar-group > label i {
    color: #324153;
    opacity: 0.61;
}

.result_score .box.box-type1 .chart-area .bar-chart.horizontal .number-scope span:after {
    border-left-color: #FCB246;
}

.result_score .box.box-type2 .chart-area .bar-chart.horizontal .number-scope span:after {
    border-left-color: #FEE4D5;
}

.result_score .box.box-type3 .chart-area .bar-chart.horizontal .number-scope span:after {
    border-left-color: #269BAC;
}

.result_chart .block .box .box-inner {
    background: #fff;
    border-radius: 10px;
    height: 100%
}

.result_chart .chart-area {
    padding: 0;
    transform: scale(0.95);
    min-height: 29rem;
}

    .result_chart .chart-area .bar-chart .bar-panel {
        padding: 25px 20px 25px 30px;
    }

/*excellent*/
.excellent-box {
    text-align: center;
}

    .excellent-box img {
        max-width: 45vw;
    }

    .excellent-box p {
        font-size: var(--size_26);
        color: #fff;
        line-height: 1.8;
        padding: 1rem 4rem 1rem 4rem;
    }

/*.tooltip*/
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    max-width: 320px;
    padding: 1.625rem 1.5rem;
    text-align: left;
    background-color: #525252;
    font-size: var(--size_15);
    border-radius: 0.43rem;
}

.tooltip .arrow {
    height: 0.5rem;
}

.bs-tooltip-top .arrow::before {
    border-width: 0.5rem 0.5rem 0;
    border-top-color: #525252;
}

.bs-tooltip-bottom .arrow::before {
    border-width: 0 0.5rem 0.5rem;
    border-bottom-color: #525252;
}

.bs-tooltip-right .arrow::before {
    right: 0;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: #525252;
}

.bs-tooltip-left .arrow::before {
    left: 0;
    border-width: 0.5rem 0 0.5rem 0.5rem;
    border-left-color: #525252;
}

/*----mail-content----*/
.mail-content a {
    color: #fff;
}

    .mail-content a:hover, .mail-content a:focus, .mail-content a:active {
        color: var(--middle_blue);
    }

/*** 
====================================================================
9. Other
====================================================================
***/
/*Captcha*/
.imgverifycode {
    float: left;
}

.btnnewcode, .btnreadcode {
    padding: 0.7rem 0.5rem;
    display: inline-block;
    font-size: var(--size_18);
    color: #fff;
}

    .btnnewcode:hover, .btnnewcode:focus,
    .btnreadcode:hover, .btnreadcode:focus {
        color: var(--middle_blue);
    }

    .btnreadcode i {
        font-size: 105%;
        position: relative;
        top: 1px;
    }

/*---無障礙---*/
a.accesskey {
    color: transparent !important;
    float: left;
}

    a.accesskey:focus-visible {
        color: #fff !important;
    }

.accesskey.main {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

    .accesskey.main:focus {
        opacity: 1;
    }

:focus-visible,
:target a.accordion_color,
.bootstrap-select .dropdown-toggle:focus {
    outline: #EEC552 dotted 5px !important
}

/*** 
====================================================================
10. Invest
====================================================================
***/

.search-box {
    display: flex;
    align-items: flex-end;
    margin-top: -2.5rem;
}

    .search-box label {
        font-size: var(--size_18);
        color: #fff;
        padding: 0 1.2rem;
    }

    .search-box select {
        font-size: var(--size_20);
        color: var(--text_black);
        height: 3.75rem;
    }

    .search-box .btn-search {
        width: 4.25rem;
        height: 4.25rem;
        border-radius: 50%;
        font-size: var(--size_36);
        background: #fff;
        color: var(--main_blue);
        padding: 0;
        margin: 0;
        line-height: 1;
    }

        .search-box .btn-search:hover {
            background: #fff;
            color: var(--main_blue);
        }

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

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

    .search-box .column-group.search {
        flex: 0 0 5rem;
        text-align: right;
    }

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

    .search-box .column-group.survey select {
        margin-left: 2px;
        border-radius: 0 2rem 2rem 0;
    }

    .search-box .date-icon:before {
        top: 1rem;
        left: 1.5rem;
        background-image: url(../img/icon-search-calendar.svg);
        height: 1.75rem;
        width: 1.7rem;
    }

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

/*--default-select--*/
.default-select {
    position: relative;
}

    .default-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 1.5rem;
    }

    .default-select::after {
        content: '';
        position: absolute;
        right: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        border: solid transparent;
        border-width: 0.5rem 0.375rem 0 0.375rem;
        border-top-color: #84C5CF;
    }

/*--invest_panel--*/
.invest_panel {
    background: #fff;
    border-radius: 2rem;
    margin-top: 1.5rem;
    padding: 4rem 4rem;
    display: flex;
}

    .invest_panel .side_menu {
        width: 9rem;
        margin-bottom: -0.6rem;
    }

        .invest_panel .side_menu .btn {
            color: #fff;
            background: var(--main_blue);
            font-size: var(--size_18);
            border: none;
            margin: 0 0 0.6rem 0;
            border-radius: 0.8rem;
            box-shadow: 4px 4px 3px #00000045;
            width: 9rem;
            height: 9rem;
            white-space: nowrap;
        }

            .invest_panel .side_menu .btn.active {
                background: var(--main_orange);
                opacity: 1;
                cursor: initial;
            }

            .invest_panel .side_menu .btn span {
                display: block;
                text-align: center;
                margin-top: 0.3rem;
            }

    .invest_panel .chart-area .bar-group .note {
        position: absolute;
        left: -85%;
        bottom: -50px;
    }

    .invest_panel .chart-area.analysis .bar-group .note {
        margin-left: -2rem;
    }

/*---invest_inner---*/
.invest_inner {
    padding: 0 0 0 3rem;
    width: calc(100% - 9rem);
}

    .invest_inner, .invest_inner p {
        font-size: var(--size_20);
        color: var(--text_black);
        line-height: 1.6;
        max-width: initial;
    }

.search-local {
    display: flex;
    align-items: flex-end;
    margin: 0 -0.2rem;
}

    .search-local .column-group {
        padding: 0 0.2rem;
        flex: 0 0 8rem;
    }

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

        .search-local .column-group.search {
            flex: 0 0 5rem;
        }

    .search-local label {
        color: #324153;
        font-size: var(--size_16);
        margin-bottom: 0.4rem;
    }

    .search-local select,
    .search-local .btn.dropdown-toggle {
        font-size: var(--size_15);
        border-color: #D8D8E4;
        padding: 0.7rem 1rem;
        height: 2.8rem;
    }

    .search-local .btn {
        font-size: var(--size_16);
        font-weight: 400;
        padding: 0.6rem 1.2rem;
        border-radius: 2rem;
        margin: 0;
    }

.dashed-border {
    /*background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/
    background-image: url(../img/dashed-border.svg);
}

.dashed-line {
    height: 3px;
    background-image: repeating-linear-gradient( to right, white, white 8px, transparent 8px, transparent 16px );
    background-position: center;
}

/*.invest_inner*/
.invest_inner .row {
    margin-right: -0.6rem;
    margin-left: -0.6rem;
    margin-top: 1.2rem;
}

.invest_inner .col {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
}

    .invest_inner .col.col-map {
        max-width: 450px;
    }

.invest_inner .box {
    border-radius: 30px;
    background: var(--light_blue);
    background-image: url('../img/dashed-border.svg');
    padding: 2rem;
}

.invest_inner .map-box {
    text-align: center;
}

    .invest_inner .map-box svg {
        width: 100%;
    }

        .invest_inner .map-box svg g {
            fill: #fff;
            transition: all 300ms;
        }

    .invest_inner .map-box path:hover {
        filter: brightness(0.9);
    }

    .invest_inner .map-box g.active,
    .invest_inner .map-box path.active {
        fill: var(--main_orange) !important;
    }

.map-tooltip {
    pointer-events: none;
    z-index: 1000;
}

    .map-tooltip .tooltip-inner {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }

.invest_inner .map-box .colorbar {
    margin-top: 1rem;
}

    .invest_inner .map-box .colorbar .num {
        color: #797979;
        font-size: var(--size_12);
        list-style-type: none;
        padding: 0;
        margin: 0 -0.8rem 0.4rem -0.8rem;
        display: flex;
    }

        .invest_inner .map-box .colorbar .num li {
            flex-basis: 0;
            flex-grow: 1;
            position: relative;
        }

            .invest_inner .map-box .colorbar .num li:after {
                content: '';
                border-left: 1px solid #fff;
                height: 1rem;
                position: absolute;
                left: 50%;
                top: calc(100% + 0.8rem);
            }

            .invest_inner .map-box .colorbar .num li:first-child:after,
            .invest_inner .map-box .colorbar .num li:last-child:after {
                content: none;
            }

    .invest_inner .map-box .colorbar .bar {
        display: block;
        height: 1.75rem;
        border-radius: 0.9rem;
        background: transparent linear-gradient(270deg, #1C9BAC 0%, #80C8D1 59%, #EFD040 100%) 0% 0% no-repeat padding-box;
    }

/*score*/
.invest_inner .box .title {
    font-size: var(--size_27);
    color: var(--main_blue);
    font-weight: 700;
    background: #fff;
    border-radius: 4.5rem;
    padding: 0.6rem 2.3rem 0.6rem 5.4rem;
    margin-bottom: 1rem;
    display: inline-block;
    position: relative;
}

    .invest_inner .box .title:before {
        content: '';
        position: absolute;
        background-image: url(../img/icon-result-knowledge.svg);
        background-repeat: no-repeat;
        background-size: contain;
        top: -0.8rem;
        left: -0.2rem;
        width: 5.4rem;
        height: 5.4rem;
    }

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

.invest_inner .box.option-box {
    margin-top: 1.2rem;
}

.invest_inner .box .score-inner {
    width: 14rem;
    margin-left: calc(50% - 6rem);
}

    .invest_inner .box .score-inner .name {
        color: var(--text_black);
        font-size: var(--size_26);
        font-weight: 700;
    }

    .invest_inner .box .score-inner .score {
        color: var(--main_blue);
        font-size: 4.25rem;
        font-weight: 900;
        line-height: 1;
    }

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

.custom-scrollbars {
    overflow-y: auto;
}

/*que-row*/
.invest_inner .box .que-row ul {
    margin-top: 0.5rem;
    margin-bottom: -0.8rem;
    list-style: none;
    width: 58%;
    padding-left: 2rem;
}

    .invest_inner .box .que-row ul li {
        font-size: var(--size_21);
        color: var(--text_black);
        margin-bottom: 0.8rem;
        position: relative;
    }

        .invest_inner .box .que-row ul li.check {
            color: var(--main_blue);
        }

            .invest_inner .box .que-row ul li.check:before {
                content: '✔';
                position: absolute;
                left: -1.7rem;
                top: -2px;
                transform: rotate(14deg);
                font-weight: 600;
                font-size: var(--size_25);
            }

.invest_inner .box .que-row .bar {
    position: absolute;
    top: 50%;
    margin-top: -1.125rem;
    left: 110%;
    width: 60%;
}

    .invest_inner .box .que-row .bar span {
        background: #65C8CD;
        border-radius: 0 10px 10px 0px;
        display: inline-block;
        height: 2.25rem;
    }

.invest_inner .box .que-row ul li.check .bar span {
    background: var(--main_blue);
}

.invest_inner .box .que-row .bar label {
    margin-left: calc(100% + 3px);
    font-size: 95%;
}

/*.survey-document*/
.survey-document .page-title {
    font-weight: 500;
}

.survey-document h4 {
    font-weight: 500;
}

.survey-document .que_box .que_subject,
.survey-document .que_box .que_subject .sort {
    font-size: var(--size_17);
    font-weight: 500;
    padding-bottom: 5px;
}

.survey-document .que_box .que_option > div.radio,
.survey-document .que_box .que_option > div.checkbox {
    width: 33%;
    padding: 0 4px 4px 0;
}

.survey-document .que_box .que_option .lbl {
    width: calc(100% - 27px);
    font-size: var(--size_16);
}

.invest_inner .link-exam {
    font-size: var(--size_23);
    padding: 0.5rem 2.5rem 0.5rem 1.6rem;
    border-radius: 2rem 0 0 2rem;
    position: relative;
    margin: 0;
    margin-right: 1.5rem;
}

    .invest_inner .link-exam span {
        position: absolute;
        font-size: 105%;
        font-weight: 700;
        background: var(--main_blue);
        top: 50%;
        right: -1.6rem;
        margin-top: -1.8rem;
        width: 3.6rem;
        height: 3.6rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


/*resultbar-box*/
.bg-green {
    background: #68B83A;
}

.text-green {
    color: #68B83A;
}

.bg-red {
    background: #C41009;
}

.text-red {
    color: #C41009;
}

.bg-yellow {
    background: #E6B30A;
}

.text-yellow {
    color: #E6B30A;
}

.bg-gray {
    background: #797979;
}

.text-gray {
    color: #797979;
}

.invest_inner .intro {
    font-size: var(--size_18);
    line-height: 1.8;
    margin: 0.7rem 0 1rem 0;
}

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

    .invest_inner .box.resultbar-box .que-name {
        color: #324153;
        font-weight: 500;
    }

    .invest_inner .box.resultbar-box .quebar .bar {
        border-radius: 0.7rem;
        display: flex;
        overflow: hidden;
        height: 2.8rem;
    }

        .invest_inner .box.resultbar-box .quebar .bar span {
            color: #fff;
            font-size: var(--size_21);
            font-weight: 600;
            text-align: center;
            line-height: 1;
            padding: 0.7rem 0;
        }

    .invest_inner .box.resultbar-box .quebar .num {
        list-style: none;
        display: flex;
        font-size: var(--size_14);
        font-weight: 500;
        color: #819AB2;
        padding: 0;
        margin: 0.3rem -4.6% -0.3rem -4.6%;
        text-align: center;
    }

        .invest_inner .box.resultbar-box .quebar .num li {
            flex-basis: 0;
            flex-grow: 1;
            position: relative;
        }

    .invest_inner .box.resultbar-box .color-info {
        font-size: var(--size_16);
        flex-basis: 7rem;
        max-width: 7rem;
        padding-left: 1.5rem;
        margin-top: -0.8rem;
    }

.invest_inner .question-area .que-row {
    padding: 1.8rem 2rem;
}

    .invest_inner .question-area .que-row .score-box .score {
        font-size: 4rem;
    }

.invest_inner .btn-export {
    margin: 0;
    color: var(--main_blue);
    background: var(--light_blue);
    border: 1px solid;
    border-radius: 2rem;
    position: relative;
    padding-right: 3rem;
    z-index: 1;
}

    .invest_inner .btn-export i {
        color: #84C5CF;
        font-size: 150%;
        position: absolute;
        right: 0.6rem;
        top: 0.62rem;
    }

/*---form-group---*/
.form-group .small {
    color: #FFDCB2;
    margin-top: 0.2rem;
}

.fileuploader-input {
    background: #FAFDFD;
    border: 1px dashed #86C5CE;
    border-radius: 0.3rem;
    text-align: center;
    padding: 0.8rem;
}

    .fileuploader-input .pickfiles .btn {
        color: #84C5CF;
        font-size: 3.8rem;
        padding: 0;
        line-height: 1;
    }

    .fileuploader-input .pickfiles .txt {
        display: block;
        color: var(--text_black);
        font-size: var(--size_18);
        font-weight: 500;
    }

    .fileuploader-input .text-memo {
        color: var(--main_blue);
        font-size: var(--size_14)
    }

    .fileuploader-input .mainFile {
        height: 0;
        float: left;
        visibility: hidden
    }

/*---contract-box--*/
.contract-box {
    border-radius: 0.9rem;
    background: #fff;
    padding: 2rem 3rem 1.5rem 3rem;
    margin: 4rem 0 1.5rem 0;
    color: #324153;
}

    .contract-box .area-title {
        font-size: var(--size_22) !important;
        color: var(--main_blue);
        margin-bottom: 0 !important;
        line-height: 1;
    }

    .contract-box .area-subtitle {
        font-size: var(--size_14);
    }

    .contract-box .content {
        height: 360px;
        overflow-y: scroll;
        border: 1px solid #BFBFBF;
        margin: 0.4rem 0 1.5rem;
        padding: 0.8rem 1.5rem;
    }

        .contract-box .content, .contract-box .content p {
            font-size: var(--size_15);
            line-height: 1.8;
        }

    .contract-box .checkbox label {
        font-size: var(--size_20);
        font-weight: 500;
        line-height: 1.5;
    }

    .contract-box .checkbox input[type=checkbox] {
        border-radius: 50%;
        width: var(--size_30);
        height: var(--size_30);
        border-color: var(--main_blue);
    }

        .contract-box .checkbox input[type=checkbox]:checked:before {
            border-color: var(--main_blue);
            background: var(--main_blue);
        }

.btn.btn-applysave {
    font-size: var(--size_26);
    box-shadow: 6px 5px 6px #00000029;
    width: 20.5rem;
    text-align: left;
    border-radius: 2rem;
    padding: 0.85rem 2rem;
    margin-bottom: 2rem;
}

    .btn.btn-applysave i {
        float: right;
        line-height: 1.4;
        font-size: 105%;
    }