@charset "UTF-8";

/* ==========================================================================
   1. UTILITIES, LOADING & COMMON COMPONENTS
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.test {
    position: absolute;
}

.d-none {
    display: none !important;
}

.overhide {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overhide1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.overhide2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.overhide3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}

.cursor-pointer {
    cursor: pointer;
}

.error {
    color: #f95355;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
}

.linkval {
    border-bottom: 1px dashed #3d3d3d;
    cursor: pointer;
    text-decoration: none;
}


/* Scrollbars */

.no-scrollbar,
.scroll_wrapper::-webkit-scrollbar,
.wiki-nav-wrap::-webkit-scrollbar,
.workerTabs ::-webkit-scrollbar,
.rehwap ::-webkit-scrollbar,
.dealerWorker ::-webkit-scrollbar {
    display: none;
    opacity: 0;
    width: 0;
}

.scroll-related::-webkit-scrollbar {
    height: 6px;
}

.scroll-style::-webkit-scrollbar {
    display: block !important;
    height: 5px;
}

.scroll-style::-webkit-scrollbar-thumb,
.scroll-style:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .3);
}

.scroll-style::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 10px;
}


/* Loading & Empty States */

.loading[data-v-3fc3173f] {
    background: rgb(0 0 0 / .3);
    justify-content: center;
    left: 0;
    min-height: 400px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.loading .loading-p[data-v-3fc3173f],
.loading[data-v-3fc3173f] {
    align-items: center;
    display: flex;
}

.loading .loading-p .loading-text[data-v-3fc3173f] {
    color: #fff;
    font-size: 14px;
    padding: 0 10px;
}

.empty[data-v-f94c7b04] {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 52px;
}

.empty img[data-v-f94c7b04] {
    width: 224px;
}

.empty p[data-v-f94c7b04] {
    color: #3d3d3d;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 24px;
}

.no-data {
    align-items: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
}

.no-data .img {
    height: 200px;
    width: 250px;
}

.no-data .title {
    color: #ccc;
    font-family: PingFang SC;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

.no-data .comment {
    background: #ffd733;
    border-radius: 32px;
    box-sizing: border-box;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    line-height: 42px;
    margin-top: 16px;
    order: 2;
    padding: 10px 16px;
}


/* Animations */

@keyframes axisX {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes axisXreverse {
    0% {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes c_show-3e0a0cbe {
    0% {
        opacity: 0;
        transform: translateX(500px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes c_hid-3e0a0cbe {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(500px);
    }
}

@keyframes moveTop {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(25%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes loadtabing {
    0% {
        height: 0;
        opacity: .5;
    }
    to {
        height: 40px;
        opacity: 1;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(1turn);
    }
}

@keyframes dealerani {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: -448px 0;
    }
}

@keyframes trader {
    0% {
        top: 88px;
    }
    to {
        top: 0;
    }
}


/* ==========================================================================
   2. POPUPS, DIALOGS & OVERLAYS
   ========================================================================== */

.layui-layer,
.popmt4,
.popwebsite,
.popintro,
.popinformation,
.popziben,
.popsupvise,
.complaint-capital-jeff,
.iframe-show,
.dealer-module,
.dealer-mt,
.zizhi,
.promote-business,
.epc-pop,
.dealer-survey {
    background: url(https://resources1.interface003.com/Contentgj/images/pop_bg.png) repeat;
    align-items: center;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2001;
    height: 100%;
}

.layui-layer {
    background: rgb(0 0 0 / .1) !important;
    z-index: 2002 !important;
}

.complaint-capital-jeff,
.iframe-show,
.dealer-module,
.dealer-mt,
.zizhi,
.promote-business,
.epc-pop {
    background: rgb(0 0 0 / .5) !important;
}


/* Modals Base */

.layui-layer .layer-box,
.popmt4 .main,
.popwebsite .main,
.popintro .main,
.popinformation .main,
.popziben .main,
.popsupvise .main,
.conplaint-box-jeff,
.dealer-module-box,
.zzbox,
.business-box,
.mt-mode,
.survey-module {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 13px 0 rgb(0 0 0 / .08);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.popmt4 .main,
.popwebsite .main,
.popintro .main {
    width: 560px;
    max-width: 560px;
}

.popziben .main,
.popsupvise .main,
.popinformation .main {
    max-width: 760px;
}

.conplaint-box-jeff {
    width: 640px;
    padding-bottom: 45px;
}


/* Titles & Headers inside Popups */

.popmt4 .main .title,
.popwebsite .main .title,
.popintro .main .title,
.popziben .main .title,
.popsupvise .main .title,
.popinformation .main .title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    width: 90%;
    margin: 0 auto;
}

.icon-close,
.el-dialog__close,
.dealer-module-close,
.close {
    cursor: pointer;
    position: absolute;
    z-index: 10;
    color: #1d2129;
}


/* Element UI Dialog Resets */

.el-dialog__header {
    padding: 30px 40px 20px;
    align-items: center;
    display: flex;
    font-size: 20px;
    font-weight: 400;
}

.el-dialog__body {
    padding: 20px 30px;
    box-sizing: content-box;
}

.evaluate-dialog .el-dialog__header,
.software-module .el-dialog__header,
.risk-warning-dealer .el-dialog__header,
.hide-dialog .el-dialog__header,
.dealer-info-list .el-dialog__header {
    padding: 0;
    display: none;
}

.el-dialog__headerbtn {
    right: 20px;
    top: 20px;
    position: absolute;
}


/* ==========================================================================
   3. DEALER CARDS & LISTS (Jeff, Exposure, Article, Introduce, etc.)
   ========================================================================== */

.dealer-head-jeff,
.dealer-exposure-jeff,
.dealer-article,
.dealer-introduce,
.dealer-exposure,
.dealer-transaction,
.dealer-account,
.dealer-real,
.dealer-finance,
.dealer-market,
.dealer-primary-jeff,
.dealer-environment-new,
.dealer-transaction-new,
.dealer-primary-jaf-new,
.risk-manage_info {
    background: #fff;
    border: 1px solid rgb(0 0 0 / .05);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
    width: 100%;
}

.dealer-head-jeff {
    background: #313233;
    display: flex;
    justify-content: space-between;
    padding: 20px 24px;
}

.dealer-head-jeff .head-l {
    display: flex;
}

.dealer-head-jeff .head-l .l-logo {
    background: #fff;
    border: 1px solid rgb(0 0 0 / .05);
    border-radius: 6px;
    flex-shrink: 0;
    height: 132px;
    margin-right: 30px;
    overflow: hidden;
    position: relative;
    width: 220px;
}

.dealer-head-jeff .head-l .l-Info .Info-head {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    max-width: 524px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Labels & Badges */

.dealer-l-logo-label {
    background: #e45950;
    border-radius: 3px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    left: 2px;
    line-height: 24px;
    max-width: 100%;
    padding: 0 6px;
    position: absolute;
    top: 2px;
}

.score-num {
    color: #4c6d8d;
    display: flex;
    font-family: DIN-Medium;
    font-size: 48px;
    font-weight: 500;
    height: 58px;
    line-height: 58px;
    overflow: hidden;
}


/* Buttons & Tools */

.dealer-head-jeff .head-r .r-exposure {
    align-items: center;
    background: #3d55cc;
    border: 1px solid hsl(0 0% 100% / .05);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    height: 28px;
    padding: 0 12px;
}

.btn_tousu,
.btn_baoguang,
.btn_know {
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
}


/* Info Lists inside cards */

.dealer-info-list {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.dealer-info-list .dealer-info-ul {
    display: flex;
    height: 100%;
}

.dealer-info-box {
    background: hsl(0 0% 100% / .6);
    border: 1px solid rgb(0 0 0 / .05);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 251px;
    margin-right: 12px;
    padding: 8px 10px;
    width: 310px;
}


/* Exposures */

.list-exposures {
    background: #fff;
    border: 1px solid rgb(0 0 0 / .05);
    border-radius: 2px;
    box-sizing: border-box;
    height: 188px;
    width: 387px;
}

.list-exposures a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    width: 100%;
}


/* ==========================================================================
   4. DEALER JOHN & JP THEMES
   ========================================================================== */

.dealer-john {
    background: #fafafa;
}

.dealer-john .dealer-box {
    margin: 0 auto;
    padding-top: 20px;
    position: relative;
    width: 1200px;
}

.dealer-john .dealer-box .dealer-info {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}


/* Dealer JP specific reset */

.dealer-john-jp .dealer-box .dealer-info {
    padding-top: 40px;
}

.dealer-john-jp .dealer-epc,
.dealer-john-jp .dealer-ad-john,
.dealer-john-jp .dealer-regulatory,
.dealer-john-jp .dealer-exposure,
.dealer-john-jp .dealer-transaction,
.dealer-john-jp .dealer-finance,
.dealer-john-jp .dealer-market,
.dealer-john-jp .dealer-appraisal,
.dealer-john-jp .dealer-article,
.dealer-john-jp .dealer-account {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 50px !important;
}

.dealer-john-jp .primary-tit:before,
.dealer-john-jp .appraisal-tit:before,
.dealer-john-jp .dealer-introduce-title:before,
.dealer-john-jp .real-title:before {
    background: #301;
    content: "";
    display: flex;
    height: 26px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 6px;
}


/* Dealer Themes (Merged identical rules) */

.dealer-newhead-otherlang .dealer-black,
.dealer-newhead-otherlang .dealer-hs,
.dealer-newhead-otherlang .dealer-blue,
.dealer-newhead-otherlang .dealer-zs,
.dealer-newhead-otherlang .dealer-yellow,
.dealer-newhead-otherlang .dealer-lcs {
    border: 1px solid rgba(0, 0, 0, .05);
}


/* Apply White text to Dark themes */

.dealer-newhead-otherlang .dealer-black *,
.dealer-newhead-otherlang .dealer-hs * {
    color: #fff !important;
}

.dealer-newhead-otherlang .dealer-black {
    background: #313233;
}

.dealer-newhead-otherlang .dealer-hs {
    background: #477db2;
}

.dealer-newhead-otherlang .dealer-blue {
    background: #fff !important;
    border-color: rgba(71, 125, 178, .6);
}

.dealer-newhead-otherlang .dealer-zs {
    background: linear-gradient(180deg, #edf4f6, #fff) !important;
    border: 4px solid #3c8798;
}

.dealer-newhead-otherlang .dealer-yellow {
    background: linear-gradient(180deg, #f8ede1, #fff) !important;
    border: 4px solid #d39a57;
}

.dealer-newhead-otherlang .dealer-lcs {
    background: linear-gradient(180deg, #efeef2, #fff) !important;
    border: 4px solid #594a87;
}


/* Apply Theme Colors to Scores */

.dealer-newhead-otherlang .dealer-zs .head-l-score-num *,
.dealer-newhead-otherlang .dealer-zs .head-c-title-text {
    color: #3c8798 !important;
}

.dealer-newhead-otherlang .dealer-yellow .head-l-score-num *,
.dealer-newhead-otherlang .dealer-yellow .head-c-title-text {
    color: #d39a57 !important;
}

.dealer-newhead-otherlang .dealer-lcs .head-l-score-num *,
.dealer-newhead-otherlang .dealer-lcs .head-c-title-text {
    color: #594a87 !important;
}

.dealer-newhead-otherlang .dealer-blue .head-l-score-num *,
.dealer-newhead-otherlang .dealer-blue .head-c-title-text {
    color: #477db2 !important;
}


/* ==========================================================================
   5. MAPS, CHARTS, & CAROUSELS
   ========================================================================== */

.echarts-pie {
    position: relative;
    width: 100%;
}

.google-map-detail {
    height: 100vh;
    position: relative;
    width: 100vw;
}

.google-map-detail #googleMap {
    height: 100%;
    width: 100%;
}

.mt-sample {
    border-radius: 8px;
    color: #7a7a7a;
    height: 80px;
    transition: 1s linear;
}

.mt-sample .map-box {
    background: url(https://resources1.interface003.com/appuni/images/ping-bg.svg) no-repeat;
    height: 46px;
    margin: auto;
    overflow: hidden;
    padding: 2px;
    width: 40px;
    z-index: 99 !important;
}

.el-carousel__indicators {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.dealer-ad-john {
    border: 1px solid rgb(0 0 0 / .05);
    height: 200px;
}

.dealer-ad-john .dealer-ad-a img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (GROUPED & OPTIMIZED)
   ========================================================================== */

@media screen and (max-width: 1199px) {
    .dealer-john .dealer-box {
        width: 940px;
    }
    .dealer-john .dealer-box .dealer-info .dealer-l,
    .dealer-john-jp .dealer-box .dealer-info .dealer-l {
        width: 360px;
    }
    .dealer-john .dealer-box .dealer-info .dealer-r,
    .dealer-john-jp .dealer-box .dealer-info .dealer-r {
        width: 540px;
    }
    .dealer-environment .env-warp,
    .dealer-transaction .transaction {
        flex-direction: column;
    }
    .dealer-environment .warp-right,
    .dealer-transaction .transaction .transaction-r {
        width: 100%;
        margin-top: 30px;
    }
    .dealer-market .pie-echarts,
    .dealer-finance .finance-echart .finance-echart-info {
        flex-direction: column;
    }
    .list-exposures {
        width: 100%;
    }
}

@media screen and (max-width: 999px) {
    .dealer-john .dealer-box {
        width: 760px;
    }
    .dealer-john .dealer-box .dealer-info .dealer-l,
    .dealer-john-jp .dealer-box .dealer-info .dealer-l {
        width: 330px;
    }
    .dealer-john .dealer-box .dealer-info .dealer-r,
    .dealer-john-jp .dealer-box .dealer-info .dealer-r {
        width: 390px;
    }
    .dealer-environment .warp-left {
        width: 100%;
    }
    .layui-layer .layer-box,
    .layui-layer .layer-box .layer-con {
        width: 600px;
    }
    .machine-jeff .machine-con .Info .machine-con-list .machine-list {
        width: 346px;
    }
    .dealer-newhead-pc {
        min-height: 291px;
    }
    .dealer-newhead-pc .head-r {
        position: fixed;
        right: 1000px;
    }
    /* visually hide on md */
}

@media screen and (max-width: 799px) {
    .dealer-john .dealer-box,
    .dealer-john-jp .dealer-box {
        width: 100%;
        padding-top: 0;
    }
    .dealer-john .dealer-box .dealer-info,
    .dealer-john-jp .dealer-box .dealer-info {
        flex-direction: column;
        background: transparent;
        padding: 0;
    }
    .dealer-john .dealer-box .dealer-info .dealer-l,
    .dealer-john .dealer-box .dealer-info .dealer-r,
    .dealer-john-jp .dealer-box .dealer-info .dealer-l,
    .dealer-john-jp .dealer-box .dealer-info .dealer-r {
        width: 100%;
    }
    .dealer-exposure-jeff,
    .dealer-article,
    .dealer-introduce,
    .dealer-exposure,
    .dealer-transaction,
    .dealer-account,
    .dealer-real,
    .dealer-appraisal,
    .dealer-market,
    .dealer-finance,
    .dealer-primary-jeff,
    .dealer-environment-new,
    .dealer-transaction-new {
        padding: 20px 16px;
        margin-bottom: 16px;
        border: none;
    }
    .dealer-head-jeff {
        padding: 22px 12px;
        border-radius: 0;
    }
    .dealer-head-jeff .head-r {
        display: none;
    }
    .dealer-head-jeff .head-l .l-logo {
        height: 64px;
        width: 101px;
    }
    .dealer-head-jeff .head-l .l-Info .Info-head {
        font-size: 16px;
    }
    .layui-layer {
        padding: 0;
        background-color: #000 !important;
    }
    .layui-layer .layer-box,
    .layui-layer .layer-box .layer-con {
        width: 100%;
        height: 270px;
        border-radius: 0;
    }
    .popmt4 .main,
    .popwebsite .main,
    .popintro .main,
    .popinformation .main,
    .popziben .main,
    .popsupvise .main {
        width: 90% !important;
        max-width: 100%;
    }
    .dealer-survey-container .dealer-survery {
        display: none;
    }
    .dealer-survey-container .dealer-survery-mobile {
        display: block;
        padding: 0;
    }
    .dealer-ad-john,
    .dealer-ad-john .carousel .el-carousel__container {
        height: 90px !important;
    }
    .evaluate-dialog .dialog-content .el-dialog {
        height: 100vh;
        margin-top: 15vh !important;
    }
    .risk-popup-box .el-dialog__wrapper .el-dialog {
        border-radius: 16px 16px 0 0;
    }
}

@media screen and (max-width: 375px) {
    .dealer-survery-mobilebox {
        display: none !important;
    }
    .showSingle-box {
        display: block !important;
    }
}


/* ==========================================================================
   7. RTL OVERRIDES (Right-to-Left Support)
   ========================================================================== */

html[dir=rtl] .label-common .trader-list-add .list-add-label {
    margin-left: 4px;
    margin-right: 0;
}

html[dir=rtl] .label-common .trader-list-add {
    padding-left: 12px;
    padding-right: 0;
}

html[dir=rtl] .label-common .trader-list-add .iconfont {
    left: 0;
    right: unset;
}

html[dir=rtl] .dealer-head-jeff .head-l .l-logo {
    margin-left: 30px;
    margin-right: 0;
}

html[dir=rtl] .dealer-head-jeff .head-l .l-Info .Info-website .icon-xiala {
    margin-left: auto;
    margin-right: 30px;
    transform: rotate(90deg) scale(.8);
}

html[dir=rtl] .layui-layer .layer-box .close {
    left: 22.5px;
    right: unset;
}

html[dir=rtl] .machine-jeff .machine-head .more .iconfont {
    margin-left: 0;
    margin-right: 4px;
}

html[dir=rtl] .dealer-exposure a .head .head-title .text {
    padding: 0 8px;
}

html[dir=rtl] .dealer-exposure .exposure-head .head-r .head-r-a {
    margin-left: 8px;
    margin-right: unset;
}

html[dir=rtl] .popinformation .main .title .icon-close,
html[dir=rtl] .epc-pop .icon-close,
html[dir=rtl] .popwebsite .main .icon-close {
    left: 5px;
    right: auto;
}

html[dir=rtl] .dealer-transaction .transaction .transaction-l {
    margin-left: 30px;
    margin-right: 0;
}

html[dir=rtl] .dealer-finance .line-chart-pop .item-value .item-value-box .cicle {
    left: unset;
    right: 3px;
}

html[dir=rtl] .dealer-market .footer-inifo div {
    direction: ltr;
}

html[dir=rtl] .dealer-info-list .dealer-info-ul .dealer-info-box .dealer-info-db {
    left: 10px;
    right: unset;
}

html[dir=rtl] .dealer-account .sd-download table tbody tr td,
html[dir=rtl] .dealer-account .sd-download table thead tr th {
    text-align: right;
}

html[dir=rtl] .dealer-account .capital-ratio-top .capital-ratio-block .algorithm .first {
    margin-left: 18px;
    margin-right: unset;
}

html[dir=rtl] .new-percentageInf-container .country,
html[dir=rtl] .new-percentageInf-container .country2 {
    left: 570px;
    right: unset;
}

html[dir=rtl] .dealer-newhead-pc .head-l .head-l-logo .dealer-l-logo-seal {
    left: unset;
    right: 89px;
    transform: rotate(45deg);
}