section.insights {
    padding-top: calc(140 * var(--rpx-50));
    padding-bottom: calc(170 * var(--rpx-50));
}

.insights .section-title {
    text-align: center;
}

.filter-ctn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: calc(80 * var(--rpx-50));
}

.field-row {
    padding-top: calc(60 * var(--rpx-50));
    padding-bottom: calc(60 * var(--rpx-50));

    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.field-row .left {
    font-weight: bold;
}

.filter-row {
    display: flex;
    align-items: center;
}

.field-option{
    height: calc(50em / 16);
    width: calc(160em / 16);
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 2px;
    background-color: #fafbfd;
    font-weight: lighter;
    color: var(--theme-navy);

    display: flex;
    align-items: center;
    justify-content: center;
}

.field-option.active{
    color: #fff;
    background-color: var(--theme-navy);
    font-weight: bold;
}

.field-option.mini{
    width: calc(50em / 16);
}

.field-dropdown {
    border-radius: 2px;
    font-weight: lighter;
    margin-right: calc(10 * var(--rpx));
    line-height: calc(30em / 18);
    position: relative;
    padding: calc(10 * var(--rpx)) calc(28 * var(--rpx));
    cursor: pointer;
    background-color: #fafbfd;
    color: var(--theme-navy);
}

.field-dropdown:hover {
    background-color: #e2e5ee;
}

.field-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    top: 100%;
    border-top: var(--theme-navy) solid calc(9 * var(--rpx));
    border-left: transparent solid calc(11 * var(--rpx));
    border-right: transparent solid calc(11 * var(--rpx));
    opacity: 0;
}

.field-dropdown.active {
    color: #fff;
    background-color: var(--theme-navy);
}

.field-dropdown.active::before {
    opacity: 1;
}

.field-dropdown::after {
    content: "";
    width: calc(11 * var(--rpx));
    height: calc(6 * var(--rpx));
    background: url("../images/global/icon_angle_down.svg") center/contain no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin-top: calc(-2 * var(--rpx));
    margin-left: calc(8 * var(--rpx));
    filter: url(#navy-overlay);
}

.field-dropdown.active::after {
    filter: url(#white-overlay);
}

.filter-row .left {
    width: calc(160 * var(--rpx));
    flex: 0 0 auto;
    padding-left: calc(40 * var(--rpx-50));
}

.filter-row .right {
    width: calc(100% - 120 * var(--rpx));
    padding-left: calc(40 * var(--rpx-50));

    display: flex;
}

.filter-panels {
    width: 100%;
    position: relative;
    top: calc(-20 * var(--rpx));
}

.filter-panel {
    position: absolute;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
    transform: translateY(calc(20 * var(--rpx)));
    padding: 0 calc(40 * var(--rpx-50));
}

.filter-panel.active {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transform: none;
    z-index: 240;
}

.filter-ctn .btn-ctn {
    display: flex;
    justify-content: center;
    padding: calc(20 * var(--rpx-50)) 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.filter-ctn .btn-apply{
    height: calc(40 * var(--rpx-75));
    width: calc(220 * var(--rpx-75));
    padding-right: calc(40 * var(--rpx-75));
    text-align: center;
    line-height: calc(40 * var(--rpx-75));
    text-transform: uppercase;
    color: var(--theme-navy);
    background-color: #f6f7fc;
    position: relative;
    font-weight: bold;
    cursor: pointer;
}

.filter-ctn .btn-apply::after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: calc(40 * var(--rpx-75));
    background: url("../images/global/icon_arr_right_white.svg") center/calc(12 * var(--rpx-75)) auto no-repeat var(--theme-navy);
}

.filter-ctn .btn-apply:hover{
    background-color: #e2e5ee;
}

.option-pool {
    display: flex;
    flex-wrap: wrap;
    padding: calc(30 * var(--rpx-50)) 0;
    gap: 0 calc(30 * var(--rpx-50));
    color: var(--theme-navy);
    position: relative;
    z-index: 270;
}

.option-pool .option {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    width: calc((100% - 60 * var(--rpx-50)) / 3);
    flex: 0 0 auto;
}

.option-pool .option-inner {
    flex: 0 0 auto;
    cursor: pointer;
    height: calc(40em / 16);
    display: flex;
    align-items: center;
    font-weight: lighter;
    position: relative;
    z-index: 260;
    padding-left: calc(10em / 16);
    padding-right: calc(10em / 16);
}

.option-pool .option-inner:hover {
    background-color: #fafbfd;
    border-radius: calc(3 * var(--rpx));
}

.option-pool .option-inner::before{
    content: "";
    width: calc(20em / 16);
    height: calc(20em / 16);
    border-radius: 3px;
    background-color: #e6e9f3;
    margin-right: calc(10em / 16);
    transition: .3s background-color;
}

.option-pool .option.active .option-inner::before{
    background: url("../images/global/icon_tick.svg") center/calc(11em / 16) auto no-repeat var(--theme-beige);
}

.option-group{
    display: flex;
    align-items: stretch;
    width: calc(320 * var(--rpx));
}

.filter-conditions .left,
.option-group .left{
    line-height: 1.5em;
    padding-top: .5em;
    width: calc(120 * var(--rpx));
    flex: 0 0 auto;
}

.filter-conditions{
    background-color: #e6e9f3;
    padding: 0 calc(40 * var(--rpx-50));
    font-weight: lighter;
}

.filter-conditions .filter-rows{
    padding-top: calc(40 * var(--rpx-50));
    padding-bottom: calc(40 * var(--rpx-50));
}
.filter-conditions .filter-row{
    margin-bottom: calc(10 * var(--rpx));
}

.filter-conditions .right{
    gap: calc(10 * var(--rpx));
}

.filter-conditions .selected{
    height: calc(40em / 16);
    border-radius: calc(20em / 16);
    display: flex;
    align-items: center;
    padding-left: calc(20em / 16);
    padding-right: calc(20em / 16);
    flex: 0 0 auto;
    cursor: pointer;
    color: var(--theme-navy);
    background: linear-gradient(to right, #fff 0%, #fff 50%, #e2e5ee 100%) 0 0/200% 100% no-repeat;
    transition: .4s background-position cubic-bezier(0.15, 1, 0.336, 1);
}

.filter-conditions .selected:hover{
    background-position: 100% 0;
}

.filter-conditions .selected::after{
    content: "";
    width: calc(11em / 16);
    height: calc(11em / 16);
    margin-left: calc(8em / 16);
    flex: 0 0 auto;
    background: url("../images/global/icon_close.svg") center/contain no-repeat;
}

.filter-ctn .btn-clear{
    height: calc(40 * var(--rpx-75));
    width: calc(160 * var(--rpx-75));
    text-align: center;
    line-height: calc(40 * var(--rpx-75));
    color: var(--theme-navy);
    text-decoration: underline;
    background-color: transparent;
    position: relative;
    font-weight: bold;
    cursor: pointer;
}
.filter-ctn .btn-clear:hover{
    background-color: #e2e5ee;
}

.pr-select.active .pr-option-list{
    z-index: 500;
}

.news-list a.news{
    /* max-width: unset; */
}

.news-list.flex-box{
    gap: var(--gap);
}

@media (max-width: 750px) {
    .filter-row{
        display: flex;
        flex-direction: column;
        gap: calc(10 * var(--rpx));
        font-size: 0.875rem;
    }
    .filter-row>.left,
    .filter-row>.right{
        width: 100%;
        padding-left: 0;
    }
    .filter-conditions{
        padding-left: calc(20 * var(--rpx));
        padding-right: calc(20 * var(--rpx));
    }
    .filter-conditions .right{
        overflow: auto;
    }

    .option-pool .option{
        width: 100%;
        flex: 0 0 auto;
    }

    .option-pool .option-inner{
        padding-left: 0;
        padding-right: 0;
    }

    .field-dropdown{
        padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
    }

    .filter-panel{
        padding-left: calc(20 * var(--rpx));
        padding-right: calc(20 * var(--rpx));
    }
}