/* ==================== ROOT VARIABLES ==================== */
:root {
    --bs-body-bg: rgba(255,255,255,.5);
    --bs-body-color: rgba(0, 0, 0, .8);
    --header-bg: rgba(255, 255, 255, 1);
    --box-shadow: rgba(190, 214, 240, 0.75);
    --header-border-color: rgba(190, 214, 240, 0.85);
    --header-scrolled-shadow: rgba(190, 214, 240, 0.75);
    --header-scrolled-bg: rgba(255, 255, 255, 0.75);
    --header-scrolled-border: rgba(255, 255, 255, 0.1);
    --header-color: rgba(5, 40, 101, 1);
    --header-color-hover: rgba(0, 0, 0, .8);
    --body-path: rgb(0 134 253 / 20%);
    --body-path-color: rgba(0,0,0,.3);
    --body-childmenu: rgba(0, 0, 0, 0.1);
    --bs-dark-rgb: rgba(0, 0, 0, .8);
    --footer-bg: rgba(245, 247, 250, 1);
    --footer-color: rgba(51, 51, 51, 1);
    --footer-a-hover: rgba(102, 102, 102, 1);
    --navbar-toggler-color-hover: rgba(12, 74, 140, .8);
    --navbar-toggler-bg-hover: rgba(12, 74, 140, .3);
    --navbar-toggler-border-hover: rgba(12, 74, 140, .8);
    --headermuen-bg: rgba(255, 255, 255, .9);
    --headermuen-hover: rgba(0, 0, 0, .2);
    --headermenu-hover-bg: rgba(208, 223, 237, 1);
    /* PAGINATION */
    --pagination-ul: #f7f7f7;
    --pagination-ul-color: #217097;
    --pagination-border: #ced4da;
    --pagination-ul-active-bg: #217097;
    --pagination-ul-active-border: #0f5679;
    --pagination-ul-active-color: #ffffff;
    --pagination-title: #7fa3b4;
    /* HLPE*/
    --help-body-bg: rgba(255, 255, 255, 1);
    --help-default-bg: rgba(248,248, 255, 1);
    --help-search-left-bg: rgba(169, 124, 196, 0.33);
    --help-search-right-bg: rgba(117, 219, 255, 0.33);
    --help-search-bottom-bg: rgb(238, 234, 243);
    --help-search-top-bg: rgb(238, 234, 243);
    /* LIST PAGE*/
    --list-color: rgba(0,0,0,.5);
    --list-hover-color: rgba(0,0,0,1);
    /* ARTICLE PAGE*/
    --article-bg: rgba(255,255,255,1);
    --article-tag-hover-color: rgba(0,0,0,1);
    --article-tag-color: rgba(0,0,0,.7);
    --article-abstract-bg: rgba(255,255,255,1);
    --article-abstract-border: 1px solid rgba(0,0,0,.08);
    /* */
    --process-primary: rgba(1, 200, 205, 1);
    --process-secondary: rgba(255, 130, 60, 1);
    --process-tertiary: rgba(0, 125, 255, 1);
    --process-quaternary: rgba(13, 180, 121, 1);
    --text-dark: rgba(var(--bs-dark-rgb));
    --text-light: rgba(255, 255, 255, 1);
    --text-muted: rgba(0, 0, 0, 0.6);
    --shadow-light: 0 0 0.25rem 0.25rem #eeeeee80;
    --shadow-medium: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
    --border-radius: 0.75rem;
    --transition: all 0.2s ease-in-out;
}

/* ==================== DARK MODE ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-bg: rgba(33,37,41,.85);
        --bs-body-color: rgba(156,170,185,1);
        --header-bg: rgba(3, 22, 51, 1);
        --box-shadow: rgba(0, 0, 0, 0.5);
        --header-border-color: rgba(0, 0, 0, .8);
        --header-scrolled-shadow: rgba(0, 0, 0, .4);
        --header-scrolled-bg: rgba(5, 40, 101, .75);
        --header-scrolled-border: rgba(255, 255, 255, 0.13);
        --header-color: rgba(158, 197, 254, 1);
        --header-color-hover: rgba(200, 210, 226, 1);
        --body-path: rgba(255, 255, 255, 0.1);
        --body-path-color: rgba(255, 255, 255,.5);
        --body-childmenu: rgba(0, 0, 0, 0.15);
        --bs-dark-rgb: rgba(158, 197, 254, 1);
        --footer-bg: rgba(3, 22, 51, 1);
        --footer-color: rgba(138,180,248, 1);
        --navbar-toggler-color-hover: rgba(154, 193, 248, .9);
        --navbar-toggler-bg-hover: rgba(154, 193, 248, .5);
        --navbar-toggler-border-hover: rgba(154, 193, 248, .6);
        --headermuen-bg: rgba(0, 0, 0, .7);
        --headermuen-hover: rgba(0, 0, 0, .4);
        --headermenu-hover-bg: rgba(100, 131, 159, 1);
        /* PAGINATION */
        --pagination-ul: rgba(255,255,255,.35);
        --pagination-ul-color: rgba(0, 0, 0, .5);
        --pagination-border: rgba(255,255,255,.2);
        --pagination-ul-active-bg: rgba(255,255,255,.1);
        --pagination-ul-active-border: rgba(255,255,255,.15);
        --pagination-ul-active-color: rgba(255,255,255,.7);
        --pagination-title: rgba(155,168,180,1);
        /* HLPE*/
        --help-body-bg: rgba(255, 255, 255, .08);
        --help-default-bg: rgba(248,248, 255, .1);
        --help-search-left-bg: rgba(70, 30, 95, .7);
        --help-search-right-bg: rgba(0, 40, 50, .7);
        --help-search-bottom-bg: rgb(150, 150, 150);
        --help-search-top-bg: rgb(0, 0, 1);
        /* LIST PAGE*/
        --list-color: rgba(255,255,255,.5);
        --list-hover-color: rgba(255,255,255,1);
        /* ARTICLE PAGE*/
        --article-bg: rgba(255,255,255,.1);
        --article-tag-hover-color: rgba(255,255,255,8);
        --article-tag-color: rgba(255,255,255,.6);
        --article-abstract-bg: rgba(0,0,0,.2);
        --article-abstract-border: rgba(255,255,255,.15);
        /* */
        --process-primary: rgba(1, 200, 205, 1);
        --process-secondary: rgba(255, 130, 60, 1);
        --process-tertiary: rgba(0, 125, 255, 1);
        --process-quaternary: rgba(13, 180, 121, 1);
        --text-dark: rgba(var(--bs-dark-rgb));
        --text-light: rgba(255, 255, 255, 1);
        --text-muted: rgba(0, 0, 0, 0.6);
        --shadow-light: 0 0 0.25rem 0.25rem #eeeeee80;
        --shadow-medium: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
        --border-radius: 0.75rem;
        --transition: all 0.2s ease-in-out;
    }

    .appicon {
        opacity: .8;
    }

        .footerlogo[data-language="zh-CN"], .appicon[data-language="zh-CN"] {
            content: url(../img/appdarkallicon.png);
        }

        .footerlogo[data-language="en-US"], .appicon[data-language="en-US"] {
            content: url(../img/endarkstaricon.png);
        }

        .footerlogo[data-language="id-ID"], .appicon[data-language="id-ID"] {
            content: url(../img/endarkstaricon.png);
        }

    footer .text-dark {
        color: var(--bs-dark-rgb) !important;
    }

    .default-first {
        filter: brightness(0.9);
        color: rgba(3, 22, 51, .8)
    }
}
/* ==================== BASE STYLES ==================== */
html, body, header, footer {
    width: 100%;
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

dl, ol, ul {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* ==================== LOADING OVERLAY ==================== */
.loading-page {
    --loading-bg: rgba(0, 0, 0, 0.43);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--loading-bg);
    display: none;
    opacity: 0;
    align-items: center;
    justify-content: space-around;
    transition: opacity 0.5s ease;
    z-index: 9999;
    pointer-events: none;
}

    .loading-page.show {
        display: flex;
        opacity: 1;
    }

.loader {
    --loader-border: rgba(243, 243, 243, 1);
    --loader-border-top: rgba(52, 152, 219, 1);
    position: relative;
    display: block;
    border: 5px solid var(--loader-border);
    border-top: 5px solid var(--loader-border-top);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==================== LANGUAGE SELECTOR ==================== */
.language {
    position: relative;
    display: inline-block;
    padding: 0;
    width: 100%;
}

    .language .currentlanguage {
        display: block;
        padding: .375rem .5rem;
        cursor: pointer;
        margin: 0 .5rem;
        border-radius: .5rem;
        transition: background-color 0.2s ease;
        color: var(--bs-dark-rgb);
    }

    .language.show .currentlanguage {
        background: var(--headermenu-hover-bg);
        color: var(--header-color-hover);
    }

    .language .selectlanguage {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        min-width: 7.5rem;
        padding: .5rem 0;
        margin: 0 .5rem;
        opacity: 0;
        visibility: hidden;
    }

        .language .selectlanguage ul {
            background: white;
            border-radius: .5rem;
            box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: .5rem;
        }

        .language .selectlanguage span {
            position: absolute;
            height: .5rem;
        }

        .language .selectlanguage.top span {
            top: 0;
        }

        .language .selectlanguage.bottom span {
            bottom: 0;
        }

        .language .selectlanguage.top span:before {
            content: "";
            width: 0;
            border-left: .5rem solid transparent;
            border-right: .5rem solid transparent;
            border-bottom: .5rem solid #adbdce;
            display: block;
            margin: auto;
        }

        .language .selectlanguage.bottom span:before {
            content: "";
            width: 0;
            border-left: .5rem solid transparent;
            border-right: .5rem solid transparent;
            border-top: .5rem solid #adbdce;
            border-bottom: 0px;
            display: block;
        }

        .language .selectlanguage.right {
            left: auto;
            right: 0;
        }

        .language .selectlanguage.left span {
            left: 20%;
        }

        .language .selectlanguage.right span {
            right: 20%;
        }

        .language .selectlanguage.top {
            bottom: auto;
        }

        .language .selectlanguage.bottom {
            top: auto;
        }

        .language .selectlanguage.visible {
            opacity: 0;
            visibility: hidden;
        }

        .language .selectlanguage.show {
            opacity: 1;
            visibility: visible;
            display: block;
        }

        .language .selectlanguage ul li {
            display: block;
            padding: .5rem .9375rem;
            white-space: nowrap;
            line-height: normal;
            list-style: none;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
            border-radius: .5rem;
        }

            .language .selectlanguage ul li:hover {
                background: var(--headermenu-hover-bg);
                color: rgba(0, 0, 0, 0.7);
            }

/* ==================== PAGINATION STYLES ==================== */
.listpagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .25rem;
    display: flex;
    align-items: center;
    font-size: .875rem;
}

.pagination-container {
    border-radius: .3rem;
    padding: 0 .2rem
}

.listpagination .form-select {
    border: 1px solid var(--pagination-border);
    color: var(--pagination-ul-color);
    background-color: var(--pagination-ul);
}

.pagination-container ul span, .pagination-container ul li a {
    display: inline-block;
    width: 1.9rem;
    padding: .25rem .375rem;
    text-align: center;
    text-decoration: none;
    color: var(--pagination-ul-color);
    background: var(--pagination-ul);
}

.pagination-container ul li > * {
    border: 1px solid var(--pagination-border);
}

.pagination-container ul li:not(:last-child) > a {
    border-right: 0;
}

.pagination-container ul li.active + li > a {
    border-left: 0;
}

.pagination-container ul .active > * {
    background: var(--pagination-ul-active-bg);
    border: 1px solid var(--pagination-ul-active-border);
    color: var(--pagination-ul-active-color);
}

.pagination-container ul li:first-child > * {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.pagination-container ul li:last-child > * {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.pagination-number .title {
    color: var(--pagination-title);
    font-style: oblique;
    padding: 0 .25rem
}

/* ==================== HEADER STYLES ==================== */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-bg);
    border: 1px solid transparent;
    box-shadow: 0 0 0.875rem 0.25rem var(--box-shadow);
    transition: all 0.4s ease-out;
    white-space: nowrap;
    isolation: isolate;
    margin: 0 auto;
    left: 0;
    right: 0;
    transform: translateZ(0);
    will-change: transform;
    border-radius: 0;
    border-bottom: 1px solid var(--header-border-color);
}

    header .navbar {
        padding: .5rem .75rem
    }

    header.scrolled {
        top: 1rem;
        width: calc(100% - 2rem);
        background: var(--header-scrolled-bg);
        backdrop-filter: blur(.25rem);
        -webkit-backdrop-filter: blur(.25rem);
        border-radius: .75rem;
        border-color: var(--header-scrolled-border);
        box-shadow: 0 2px 10px var(--header-scrolled-shadow);
    }

        header.scrolled .appicon {
            border-top-left-radius: .5rem;
            border-bottom-left-radius: .5rem;
        }
    /*
        header.scrolled .navbar {
            padding: .25rem .5rem;
        }*/

    header a.text-dark:hover,
    header button.text-dark:hover,
    header [class*="text-dark"]:hover {
        color: var(--header-color-hover) !important;
        transition: color 0.15s ease-in-out;
    }

    header .btn {
        border-radius: .5rem;
    }

    header .text-dark,
    header .navbar-light .navbar-toggler {
        color: var(--bs-dark-rgb) !important;
    }

    header .nav-item {
        padding: 0 .5rem;
        border-radius: .5rem;
    }

        header .nav-item:hover {
            background: rgba(0, 0, 0, .3);
        }

    header .navbar-light .navbar-toggler {
        border-color: var(--header-border-color);
    }

        header .navbar-light .navbar-toggler:hover {
            color: var(--navbar-toggler-color-hover) !important;
            background: var(--navbar-toggler-bg-hover);
            border-color: var(--navbar-toggler-border-hover);
        }

        header .navbar-light .navbar-toggler[aria-expanded="true"] .bi-list::before {
            content: "\f62a";
        }

/* ==================== RENDERBODY STYLES ==================== */
.pagePath .container {
    margin: .375rem auto;
    padding: .375rem .75rem;
    font-size: .875rem;
    color: var(--body-path-color);
}

.pagePath a {
    color: var(--bs-dark-rgb);
}

    .pagePath a:hover {
        color: var(--header-color-hover);
    }

/* ==================== MENU STYLES ==================== */

.childmenu {
    position: relative;
    display: block;
}

    .childmenu a {
        color: rgba(var(--bs-dark-rgb));
    }

    .childmenu span, [class*="childmenu_"] > span {
        padding: .25rem .875rem;
        display: block;
    }

[class*="childmenu_"] span:hover {
    background: var(--headermenu-hover-bg);
}

    [class*="childmenu_"] span:hover a {
        color: rgba(3, 22, 51, 1)
    }

.childmenu span i {
    display: inline-block;
    position: absolute;
    padding: 0 .375rem;
    right: 0;
    cursor: pointer;
}

.childmenu .childgroup {
    position: relative;
    background: var(--body-childmenu);
    border-top: 1px solid var(--body-childmenu);
}


.childmenu [class*=childgroup_] {
    display: none;
}

.childmenu span.show + [class*=childgroup] {
    display: block;
}

.childmenu .bi-chevron-down {
    transition: transform 0.5s;
}

.childmenu .rotate-180 {
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.5s;
}

.firstmenu {
    padding: .5rem .875rem;
    background: linear-gradient(136deg, #76ebff 50%, #6da9ff 100%);
}

    .firstmenu a {
        font-weight: bold;
        color: #000
    }

.headermuen {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

    .headermuen .childmenu span i {
        position: relative;
    }

    .headermuen .childmenu .childgroup {
        background: var(--headermuen-bg);
        box-shadow: 0 0 0.25rem 0.25rem var(--box-shadow);
        padding: .375rem;
        border-radius: .5rem;
        /*position: absolute;*/
    }

    .headermuen .childmenu {
        padding: 0 .5rem;
    }

/* ==================== FOOTER STYLES ==================== */

footer {
    padding: .875rem 0 2.5rem 0;
    font-size: .875rem;
    line-height: 1.75rem;
    color: var(--footer-color);
    border-top: 1px solid var(--header-border-color);
    background: var(--footer-bg);
}

    footer .footerlogo {
        margin: .5rem 0;
    }

    footer .language, footer .language .currentlanguage {
        margin: 0;
        padding: 0
    }

        footer .language.show .currentlanguage {
            background: transparent;
            color: var(--footer-a-hover);
        }

    footer .container {
        margin: 0 auto;
    }

.footerlogo, .appicon {
    opacity: .85;
}

footer .navbar-nav {
    flex-direction: row;
}

footer ul.navbar-nav li {
    flex: 1 0 0%;
}

footer .text-dark {
    color: var(--footer-color) !important;
}

    footer .text-dark:hover {
        color: var(--footer-a-hover) !important;
    }

footer .foot-menu {
    display: flex;
    justify-content: space-around;
}

    footer .foot-menu .childmenu .childgroup {
        display: block;
        background: transparent;
        border-top-color: transparent;
    }

    footer .foot-menu .childmenu .bi-chevron-down {
        display: none
    }

    footer .foot-menu .childmenu .childgroup {
        opacity: .6;
    }

footer .foot-service img {
    max-width: clamp(2rem,8.85vw,10.625rem);
    margin-top: .75rem;
}

footer .foot-icp {
    display: flex;
    align-items: center;
    padding: .5rem;
}

    footer .foot-icp > * {
        padding-right: 1.5rem
    }
/* ==================== HELP PAGE STYLES ==================== */
.helpdefault {
    background: var(--help-default-bg);
}

.helpleftmenu, .docmenu {
    margin-top: .25rem
}

    .helpleftmenu .childmenu,
    .docmenu .childmenu {
        background: var(--body-childmenu);
        margin-bottom: .125rem
    }

.helpsearch {
    display: flex;
    margin: 0 0 .75rem 0;
    padding: 1rem;
    height: 12rem;
    align-items: center;
    background: linear-gradient(90.71deg, var(--help-search-left-bg) 1.08%, var(--help-search-right-bg) 100%), linear-gradient(0deg, var(--help-search-bottom-bg), var(--help-search-top-bg));
}

    .helpsearch h1 {
        text-align: center;
        padding-bottom: .5rem;
    }

    .helpsearch .helpsearchform,
    .docbody .docsearchform {
        display: flex;
        padding: 0 20%;
    }

.docbody .docsearchform {
    padding: .5rem;
}

    .helpsearch .helpsearchform .form-control,
    .docbody .docsearchform .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 1.2rem;
    }

    .helpsearch .helpsearchform .btn-primary,
    .docbody .docsearchform .btn-primary {
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .helpsearch .helpsearchform .btn-primary,
    .docbody .docsearchform .btn-primary {
        border-color: #ced4da;
        border-left: 0;
    }


.helpdefault .container,
.docdefault .container {
    display: flex;
    padding: 0 .75rem;
}

.helpdefault .helpbody {
    position: relative;
    margin: .25rem 0 .25rem .25rem;
    background: var(--help-body-bg);
    padding: .25rem;
    padding-bottom: 2.5rem;
}

.docdefault .docbody {
    background: var(--help-default-bg);
    margin: .25rem .45rem;
    padding-bottom: 2.8rem;
    position: relative;
}

.helpdefault .helpbody .helplist,
.docfault .docbody .doclist {
    padding: .75rem 0
}

    .helpdefault .helpbody .helplist li:before,
    .docdefault .docbody .doclist li:before {
        font-family: "bootstrap-icons";
        content: "\f234";
        vertical-align: bottom;
    }

    .helpdefault .helpbody .helplist li a,
    .docdefault .docbody .doclist li a {
        color: var(--list-color);
    }

        .helpdefault .helpbody .helplist li a:hover,
        .docfault .docbody .doclist li a:hover {
            color: var(--list-hover-color);
        }

    .helpdefault .helpbody .helplist li:hover,
    .docdefault .docbody .doclist li:hover {
        background: rgba(0,0,0,.03);
        color: var(--list-hover-color);
    }

        .helpdefault .helpbody .helplist li:hover a,
        .docdefault .docbody .doclist li:hover a {
            color: var(--list-hover-color);
        }

    .helpdefault .helpbody .helplist li,
    .docdefault .docbody .doclist li {
        list-style: none;
        font-size: .875rem;
        padding: .25rem .75rem;
        border-bottom: 1px solid rgba(0,0,0,.1);
        margin: .25rem .5rem;
        color: var(--list-color);
    }

/* ==================== ERROR PAGE STYLES ==================== */
.NotPageBody, .ErrorBody {
    position: relative;
    padding: 12px;
    text-align: center;
    top: 20%;
    height: 50%;
    width: 100%;
}

.NotPageTitle, .ErrorTitle {
    display: flex;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}

    .NotPageTitle > *, .ErrorTitle > * {
        padding: 0 20px;
        color: var(--bs-dark-rgb);
        font-size: calc((0.5*0.4)*60vh);
    }

    .NotPageTitle i, .ErrorTitle i {
        text-align: right;
    }

    .NotPageTitle h1, .ErrorTitle h1 {
        text-align: left;
        margin: 0;
    }

.NotPageMsg, .ErrorMsg {
    font-weight: 100;
}

    .NotPageMsg h2, .ErrorMsg h2 {
        padding: 8px;
        font-size: 28px;
    }

    .NotPageMsg h3, .ErrorMsg h3 {
        padding: 6px;
        font-size: 16px;
        color: #777c89;
    }
/* ==================== TOOLS PAGE STYLES ==================== */

.toolssort {
    min-height: 15rem;
    margin-bottom: .5rem;
    /*    background: rgba(255, 255, 255, 0.1);*/
    border-radius: .5rem;
}

.toolspage .sorttitle, .doctitle h1 {
    position: relative;
    margin: 0;
    padding: 2rem;
    font-weight: bold;
    text-align: right;
    border-radius: 1.2rem;
    overflow: hidden
}

.toolssort .sorttitle {
    color: rgb(68 129 159);
    background: linear-gradient(120deg,rgba(229, 252, 253, 1) 30%,rgba(247,231, 255, 1));
}

.sortssort .sorttitle {
    color: rgb(223 245 255);
    background: linear-gradient(120deg, rgba(36,125,179,1) 30%, rgba(204,102,255,1));
}

.doctitle h1 {
    color: rgba(16,60,121,1);
    background: linear-gradient(120deg, rgba(16,60,121,1) 30%, rgba(251,207,160,1));
    margin-top: .875rem;
    text-shadow: 0.125rem 0.125rem 0.25rem #385175, -0.125rem -0.125rem 0.25rem #f5f5f5;
}

.sortssort .starbg, .newssort .starbg, .doctitle .starbg {
    opacity: .5
}

.sortssort .sorttitle {
    color: rgb(223 245 255);
    background: linear-gradient(120deg, rgba(36,125,179,1) 30%, rgba(204,102,255,1));
}

.newssort .sorttitle {
    background: linear-gradient(120deg, rgba(7,0,61,1) 30%, rgba(194,87,247,1));
}

.toolspage .sorttitle .starbg, .doctitle .starbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 290px;
    aspect-ratio: 1 / .5652;
    background: url(../img/starbg.png) no-repeat;
    background-size: cover;
}

.toolspage .sorttitle:after, .doctitle h1:after {
    font-family: "bootstrap-icons";
    content: "\f144";
    font-size: 1rem;
    font-weight: 300;
    vertical-align: top;
}

.toolspage .toolssortcontext {
    margin: 1rem auto;
}
/* ==================== RESPONSIVE STYLES ==================== */
@media (max-width: 767.98px) {
    header .container {
        min-width: 100%;
    }

    header.scrolled {
        left: 1rem;
        right: 1rem;
    }

    header .d-grid {
        padding: 0 .5rem;
        padding-top: .5rem
    }

    .language {
        margin: 0;
    }

        .language .currentlanguage {
            margin: 0;
        }

    footer .language .currentlanguage {
        padding: 0;
    }
}

@media (min-width: 768px) {
    header .container {
        min-width: 720px;
    }

    header.scrolled {
        width: 720px;
    }

    .language {
        margin: 0 .5rem;
        width: auto;
    }

    .headermuen {
        flex: 1 0 auto;
        display: flex;
        flex-direction: row;
    }

        .headermuen .childmenu .childgroup {
            position: absolute;
            display: none;
            box-shadow: 0 0 0.25rem 0.25rem var(--box-shadow);
        }

        .headermuen .childmenu:hover {
            background: var(--headermenu-hover-bg);
            border-radius: .5rem;
        }
}

@media (min-width: 992px) {
    header .container {
        min-width: 960px;
    }

    header.scrolled {
        width: 960px;
    }
}

@media (min-width: 1200px) {
    header .container {
        min-width: 1140px;
    }

    header.scrolled {
        width: 1140px;
    }
}


/* ==================== DEFAULT PAGE SECTION STYLE ==================== */
.default-first {
    padding: clamp(1rem,13vw,15.9rem) 0;
    text-align: center;
    background: url(../img/default/bannerbg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 90vh;
    width: 100%;
}

    .default-first .container {
        /*max-height: clamp(1rem,5.4167vw, 6.5rem);*/
    }

    .default-first h1 {
        margin-bottom: clamp(.2rem, .2rem, 1rem);
        font-size: clamp(.75rem, 3vw, 3.6rem);
        font-weight: bold;
    }

    .default-first h4 {
        font-size: clamp(.5rem, 2vw, 1.5rem);
    }

    .default-first .default-more {
        padding: clamp(.25rem, 1.5vw, .5625rem) clamp(1rem, 3vw, 3rem);
        margin-top: clamp(.125rem, 2.4vw, 2.875rem);
        border: 2px solid rgba(65, 172, 255, 1);
        border-radius: 1.5rem;
        background: transparent;
        color: rgba(65, 172, 255, 1);
        font-size: clamp(.5rem, 1vw, 1rem);
        transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
    }

        .default-first .default-more:hover {
            border-color: rgba(102, 16, 242, 1);
            color: rgba(102, 16, 242, 1);
        }

/* ==================== DEFAULT VIDEO TOOLS STYLE ==================== */
.default-video {
    padding: 3.125vw;
}

    .default-video .container {
        position: relative;
        z-index: 2;
    }

        .default-video .container .floatball {
            width: clamp(5vw, 12.45vw, 15rem);
            display: block;
            left: clamp(-11.125rem,-9.2vw,-.5rem);
            bottom: clamp(-8.4375rem,-7.0vw,-1rem);
            aspect-ratio: 1 / 1;
            position: absolute;
            background: url(../img/default/ball.png);
            background-size: contain;
            z-index: 1;
        }

    .default-video .video-header {
        align-items: center;
    }

    .default-video h1 {
        display: flex;
        flex-direction: column;
    }

        .default-video h1 .video-title {
            margin-bottom: clamp(.125rem,.625vw, .75rem);
            font-size: clamp(.75rem, 2.5vw, 3.1rem);
            font-weight: bold;
        }

        .default-video h1 i {
            position: absolute;
            font-size: clamp(.25rem,1.25vw, 1.5rem);
        }

        .default-video h1 .video-discription {
            font-size: clamp(.5rem,.83vw, 1rem);
            color: var(--bs-dark-rgb);
            font-size: clamp(.75rem, .83vw, 1.1rem);
        }

    .default-video .title-item {
        display: flex;
        list-style: none;
        font-size: clamp(.75rem, .83vw, 1.1rem);
        width: auto !important;
    }

        .default-video .title-item li {
            width: auto;
            height: auto;
            white-space: nowrap;
            padding: .5rem;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            color: var(--bs-dark-rgb);
            opacity: .7;
        }

            .default-video .title-item li.swiper-pagination-bullet {
                background: transparent;
            }

            .default-video .title-item li.swiper-pagination-bullet-active {
                color: var(--bs-dark-rgb);
                border-color: var(--bs-body-color);
                background: transparent;
                border-radius: 0;
                opacity: 1;
            }

            .default-video .title-item li:hover {
                color: var(--bs-dark-rgb);
            }

    .default-video .sampleshow {
        overflow: hidden;
        margin: clamp(.25rem,1.042vw, 1.25rem) 0;
    }

        .default-video .sampleshow .swiper-slide > div {
            height: clamp(1rem, 28.854vw, 34.625rem);
            border-radius: 1rem;
            background: rgba(255, 255, 255, .95);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: clamp(.5rem, 2.08vw, 2.5rem);
            flex-direction: column;
            overflow: hidden
        }

            .default-video .sampleshow .swiper-slide > div p {
                margin-top: clamp(.25rem,1.41vw, 1.7rem);
                margin-bottom: clamp(.25rem,.83vw, 1rem);
                font-size: clamp(.5rem,1.1458vw, 1.4rem);
                font-weight: bold;
            }

                .default-video .sampleshow .swiper-slide > div p span {
                    padding: .25rem 1rem;
                    border-radius: 2rem;
                    margin: 0 clamp(.25rem,8.34vw, 10rem);
                    color: rgba(13,110,253,1);
                    border: 2px solid rgba(13,110,253,1);
                }

                    .default-video .sampleshow .swiper-slide > div p span:first-child {
                        background: rgba(209,230,255,1);
                        color: rgba(0,0,0,1);
                        border-color: rgba(209,230,255,1);
                    }

        .default-video .sampleshow .swiper-slide img {
            height: 90%;
        }

        .default-video .sampleshow .blue {
            background: rgba(10,88,202,1);
        }

        .default-video .sampleshow .indigo {
            background: rgba(133,64,245,1);
        }

        .default-video .sampleshow .green {
            background: rgba(25,135,84,1);
        }

/* ==================== DEFAULT FUNCTION STYLE ==================== */
.default-function {
    padding: clamp(.25rem,3.3vw,3.96rem);
}

    .default-function .container .function-header {
        margin-bottom: clamp(.25rem, 4.69vw,5.628rem);
    }

        .default-function .container .function-header h1 {
            font-size: clamp(.75rem, 2.5vw, 3.1rem);
            font-weight: bold;
        }

            .default-function .container .function-header h1 i {
                position: absolute;
                font-size: clamp(.25rem,1.25vw, 1.5rem);
            }

        .default-function .container .function-header span {
            color: rgba(var(--bs-dark-rgb));
            font-size: clamp(.75rem, .83vw, 1.1rem);
        }

    .default-function .functionshow {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow: hidden;
    }

        .default-function .functionshow .swiper-wrapper {
            display: flex;
            height: auto;
            flex-wrap: nowrap;
            align-items: stretch;
        }

        .default-function .functionshow .function-item {
            /*height: clamp(1rem, 22.396vw, 26.875rem);*/
            width: clamp(1rem, 18.7571vw, 22.5084rem);
            padding: clamp(.25rem, 1.36vw, 1.625rem);
            /* aspect-ratio: 1/1.194;*/
            border: 2px solid transparent;
            border-radius: 1.25rem;
            background: rgba(235,242,250,1);
            transition: all .5s ease-in-out;
        }

            .default-function .functionshow .function-item:hover {
                border-color: rgba(13,110,253,1);
                background: rgba(255, 255, 255, .8);
                transition: all .5s ease-in-out;
            }

    .default-function .function-transbutton {
        display: flex;
        justify-content: flex-end;
    }

        .default-function .function-transbutton i, .default-function .swiper-button-next, .default-function .swiper-button-prev {
            margin: 1.5vw 0 0 1vw;
            font-size: clamp(.75rem, 1.5vw, 2rem);
            height: clamp(1rem, 2.61vw, 3.125rem);
            aspect-ratio: 1 / 1;
            border-radius: 100%;
            display: flex;
            border: 2px solid;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

            .default-function .function-transbutton i:hover {
                border-color: rgba(13,110,253,1);
                color: rgba(13,110,253,1);
                transition: all .5s ease-in-out;
            }

    .default-function .function-item .function-icon {
        width: clamp(1rem, 3.75vw, 4.5rem);
        aspect-ratio: 1 / 1;
        background: linear-gradient(to top, #1b75de, #658ffb);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        font-size: clamp(1rem, 1.75vw, 2rem);
        color: #FFF;
    }

    .default-function .function-item h2 {
        margin: clamp(.25rem,1.67vw,2rem);
        margin-left: 0;
        color: #1b75de;
        font-weight: bold;
        font-size: clamp(1rem,1.5625vw,2rem)
    }

    .default-function .function-item .function-discription {
        color: rgba(0,0,0,.6);
        margin-bottom: clamp(1rem, 5.5vw, 6.8rem);
        font-size: clamp(.75rem,.84vw,1rem);
    }

    .default-function .function-item .function-more {
        position: absolute;
        bottom: 0;
        left: clamp(.5rem,.84vw,1rem);
        right: clamp(.5rem,.84vw,1rem);
        padding: clamp(.25rem,.42vw,.5rem);
        margin-bottom: clamp(.25rem, 1.36vw, 1.625rem);
        background: #ffffff2e;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0,0,0,.3);
        font-size: clamp(.75rem,.84vw,1rem);
    }

        .default-function .function-item .function-more i {
            color: #1b75de;
        }
/* ==================== DEFAULT CORE STYLE ==================== */

.default-core {
    padding: 2.9vw 0;
    background: url(../img/default/hexinbg.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
}

    .default-core .container {
        position: relative;
    }

    .default-core .coreball {
        width: clamp(5vw, 12.45vw, 15rem);
        top: 0;
        right: clamp(-10.81rem,-9vw,-1rem);
        display: block;
        aspect-ratio: 1 / 1;
        position: absolute;
        background: url(../img/default/ball.png);
        background-size: contain;
        z-index: 1;
    }

    .default-core .container .core-header {
        margin-bottom: clamp(.25rem, 4.69vw,5.628rem);
    }

        .default-core .container .core-header h1 {
            font-size: clamp(.75rem, 2.5vw, 3.1rem);
            font-weight: bold;
        }

            .default-core .container .core-header h1 i {
                position: absolute;
                font-size: clamp(.25rem,1.25vw, 1.5rem);
            }

        .default-core .container .core-header span {
            color: rgba(var(--bs-dark-rgb));
            font-size: clamp(.75rem, .83vw, 1.1rem);
        }

    .default-core .container .coreshow {
        /*height: clamp(1rem,31.25vw,38.4rem);*/
        background: rgb(27 117 222);
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: clamp(.25rem, 1.67vw, 2rem);
    }

        .default-core .container .coreshow .core-item {
            width: clamp(1rem,16.15vw,19.8rem);
            /*aspect-ratio: 1/1.42;*/
            background: linear-gradient(to top,rgb(205 218 255),rgb(255 255 255));
            border-radius: 1rem;
            border: 1px solid rgba(255,255,255,.5);
            overflow: hidden;
        }

            .default-core .container .coreshow .core-item:hover {
                background: rgb(255 255 255);
            }


/**  动态百分比效果 */
.coreshow .gauge {
    width: clamp(1rem,8.95vw,10.75rem);
    aspect-ratio: 1/1;
    position: relative;
    margin: clamp(.25rem, 3.125vw, 3.75rem) auto;
    margin-bottom: clamp(.25rem, 1.875vw, 2.25rem);
}

.coreshow .gauge-body {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0.26vw 0.26vw #00000014;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coreshow .gauge-fill {
    position: absolute;
    width: calc(100% - clamp(.5rem, 1.275vw, 1.625rem));
    aspect-ratio: 1/1;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(.5rem, 2.08vw, 2.5rem);
}

.coreshow .gauge-value {
    font-size: clamp(.25rem, 2.34vw, 2.8125rem);
    font-weight: bold;
}

.coreshow .gauge-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient( #2d5cff 0% 0%, rgba(255, 255, 255, 0.1) 0% 100% );
    transition: background 1s ease-out;
    mask: radial-gradient(circle, transparent clamp(.25rem, 3.8vw, 4.5rem), black 0%);
}

    /* 起点圆球 */
    .coreshow .gauge-bar::before, .coreshow .end-ball::before {
        content: '';
        position: absolute;
        width: clamp(.25rem, .6375vw, 0.785rem);
        aspect-ratio: 1/1;
        background: #2d5cff;
        border-radius: 100%;
        top: 50%;
        right: clamp(.0625rem,.31875vw, .4rem);
        transform: translate(50%, -50%);
        z-index: 15;
    }

/* 终点圆球 */
.coreshow .end-ball {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    transition: transform .0s ease-out;
    z-index: 15;
}

    .coreshow .end-ball::before {
        background: #13b4fb;
    }

.coreshow .gauge-fill {
    box-shadow: inset 0 0 0.26vw 0.26vw rgba(19,180,251,.28);
}

.coreshow :nth-child(2) .gauge-fill {
    box-shadow: inset 0 0 0.26vw 0.26vw rgba(241,176,125,.28);
}

.coreshow :nth-child(3) .gauge-fill {
    box-shadow: inset 0 0 0.26vw 0.26vw rgba(39,215,160,.28);
}
/* 不同颜色 */
.coreshow :nth-child(2) .gauge-bar {
    background: conic-gradient( #fe782c 0% 0%, rgba(255, 255, 255, 0.1) 0% 100% );
}

    .coreshow :nth-child(2) .gauge-bar::before {
        background: #fe782c;
    }

.coreshow :nth-child(2) .end-ball::before {
    background: #f1ad73;
}

.coreshow :nth-child(3) .gauge-bar {
    background: conic-gradient( #05b67d 0% 0%, rgba(255, 255, 255, 0.1) 0% 100% );
}

    .coreshow :nth-child(3) .gauge-bar::before {
        background: #05b67d;
    }

.coreshow :nth-child(3) .end-ball::before {
    background: #27d7a0;
}

.coreshow .core-item .core-title {
    font-size: clamp(.75rem,1.66vw,2rem);
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: clamp(.25rem, 1.5625vw,1.875rem);
}

.coreshow .core-item .core-focus {
    display: none;
    position: absolute;
    padding: 1.5%;
    font-size: clamp(.25rem,.85vw,1rem);
}

.coreshow .core-item:hover .core-focus {
    display: inline-block;
}

.coreshow .core-item:hover .core-title span {
    border-bottom: 1px solid rgba(0,0,0,1);
    padding-bottom: .25rem;
}

.coreshow .core-item .core-discription {
    margin: 0 clamp(.25rem, 1.5625vw,1.875rem) clamp(.5rem, 3vw,3.2rem) clamp(.25rem, 1.5625vw,1.875rem);
    color: rgba(0,0,0,.6);
    font-size: clamp(.75rem, .84vw, 1rem);
}

/* ==================== DEFAULT PROCESS STYLE ==================== */
.default-process {
    padding: 3vw 0;
}

    .default-process .container {
        position: relative;
    }

    .default-process .process-header h1 {
        font-size: clamp(0.75rem, 2.5vw, 3.1rem);
        font-weight: bold;
        position: relative;
    }

        .default-process .process-header h1 i {
            position: absolute;
            font-size: clamp(0.25rem, 1.25vw, 1.5rem);
        }

    .default-process .process-header span {
        color: var(--text-dark);
        font-size: clamp(0.75rem, 0.83vw, 1.1rem);
    }

    .default-process .process-show {
        padding: clamp(0.25rem, 1.67vw, 2rem) 0;
        display: flex;
        gap: 2rem; /* 替换margin-right方式 */
        align-items: stretch;
    }

    .default-process .process-item {
        flex: 1 0 0%;
        background: rgba(255, 255, 255, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: var(--shadow-light);
        border-radius: var(--border-radius);
        transition: var(--transition);
    }

        .default-process .process-item:hover {
            box-shadow: var(--shadow-medium);
        }

        .default-process .process-item ul {
            flex-grow: 1;
        }

        .default-process .process-item header {
            all: revert;
            font-size: clamp(0.75rem, 1.66vw, 2rem);
            font-weight: bold;
            padding: 1.5rem; /* 减少内边距 */
            text-align: center;
            background: rgba(242, 247, 253, 1);
            margin: 1rem 0;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            text-shadow: 0.25rem 0.25rem 4px #ddd, -0.25rem -0.25rem 4px #fff;
            border-right: 2px solid transparent; /* 为所有设置默认值 */
        }

        .default-process .process-item li {
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

            .default-process .process-item li h2 {
                font-size: clamp(0.5rem, 1.1458vw, 1.4rem);
                height: 4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--text-light);
            }

            .default-process .process-item li p {
                padding: 0.5rem 0.5rem 2rem 0.5rem; /* 减少底部内边距 */
                flex-grow: 1;
                color: var(--text-muted);
                font-size: clamp(0.75rem, 0.83vw, 1.1rem);
                border-radius: 0 0 var(--border-radius) var(--border-radius);
            }

        /* 使用数据属性替代:nth-child选择器，提高可维护性 */
        .default-process .process-item[data-process="1"] header {
            color: var(--process-primary);
            border-right-color: var(--process-secondary);
        }

        .default-process .process-item[data-process="1"] li h2 {
            background: var(--process-primary);
        }

        .default-process .process-item[data-process="1"] li p {
            background: rgba(243, 254, 255, 1);
        }

        .default-process .process-item[data-process="2"] header {
            color: var(--process-secondary);
            border-right-color: var(--process-tertiary);
        }

        .default-process .process-item[data-process="2"] li h2 {
            background: var(--process-secondary);
        }

        .default-process .process-item[data-process="2"] li p {
            background: rgba(255, 247, 244, 1);
        }

        .default-process .process-item[data-process="3"] header {
            color: var(--process-tertiary);
            border-right-color: var(--process-quaternary);
        }

        .default-process .process-item[data-process="3"] li h2 {
            background: var(--process-tertiary);
        }

        .default-process .process-item[data-process="3"] li p {
            background: rgba(241, 247, 255, 1);
        }

        .default-process .process-item[data-process="4"] header {
            color: var(--process-quaternary);
            border-right-color: var(--process-primary);
        }

        .default-process .process-item[data-process="4"] li h2 {
            background: var(--process-quaternary);
        }

        .default-process .process-item[data-process="4"] li p {
            background: rgba(246, 255, 246, 1);
        }

    .default-process .processball {
        width: clamp(5vw, 12.45vw, 15rem);
        display: block;
        left: clamp(-12.125rem, -9.9vw, -1rem);
        bottom: clamp(-8.8rem, -7.3vw, -1rem);
        aspect-ratio: 1 / 1;
        position: absolute;
        background: url(../img/default/ball.png);
        background-size: contain;
        z-index: 1;
    }

/* 响应式设计改进 */
@media (max-width: 992px) {
    .default-process .process-show {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .default-process .process-item {
        flex: 1 0 calc(50% - 1.5rem);
        min-width: 250px;
    }

        .default-process .process-item:not(:last-child) {
            margin-right: 0;
        }
}

@media (max-width: 576px) {
    .default-process .process-show {
        flex-direction: column;
    }

    .default-process .process-item {
        flex: 1 0 100%;
    }

    .default-process .processball {
        display: none; /* 在小屏幕上隐藏装饰元素 */
    }
}

/* ==================== DEFAULT CUSTOMER STYLE ==================== */
.default-customer {
    padding: clamp(2rem,5.5vw,6.6rem) 0;
    background: url(../img/default/customerbg.png) no-repeat;
    background-size: cover;
    max-height: 56.875rem;
}

    .default-customer .customer-header h1 {
        font-size: clamp(.75rem, 2.5vw, 3.1rem);
        font-weight: bold;
    }

        .default-customer .customer-header h1 i {
            position: absolute;
            font-size: clamp(.25rem,1.25vw, 1.5rem);
        }

    .default-customer .customer-header span {
        color: rgba(var(--bs-dark-rgb));
        font-size: clamp(.75rem, .83vw, 1.1rem);
    }

    .default-customer .customershow {
        /* height: clamp(1rem,29.6875vw,35.625rem);*/
        background: rgba(255,255,255,.8);
        border-radius: 1.04vw;
        margin-top: clamp(.25rem, 2.8vw,3.375rem);
        box-shadow: 0 0 .26vw .26vw rgba(0, 0, 0, .01);
        overflow: hidden;
    }

.customer-group {
    margin: clamp(.25rem, 2.7083vw, 3.25rem) clamp(.25rem, 1.98vw, 2.375rem);
    /*height: clamp(1rem,15.3646vw,18.4375rem);*/
    position: relative;
    display: flex;
    margin-bottom: clamp(.25rem,2.2vw,2.6875rem);
    border-radius: .65vw;
    overflow: hidden;
}

    .customer-group .swiper-wrapper {
        height: auto;
    }

.customer-item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: clamp(1rem,3.3vw,4rem);
    background: radial-gradient(30% 100% at 90% 130%, rgba(129,82,227,1) 40%, rgba(27,117,222,1));
    border-radius: .65vw;
    color: rgba(255,255,255,1);
}

    .customer-item h3 {
        font-weight: bold;
        font-size: clamp(.75rem,1.4583vw,1.75rem);
        margin-bottom: clamp(.25rem,.83vw,1rem);
    }

    .customer-item p {
        font-size: clamp(.75rem,1vw,1.2rem);
    }

.customer-groupbut {
    height: clamp(.25rem, 6.77vw,8.125rem) !important;
    margin: clamp(.25rem, 1.075vw,1.3125rem) clamp(.25rem,1.875vw,2.25rem);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    width: auto !important;
}

    .customer-groupbut li {
        flex: 1 0 auto;
        box-shadow: 0 0 .26vw .26vw rgba(0, 0, 0, .04);
        list-style: none;
        border-radius: .5vw !important;
        height: clamp(1rem, 5.99vw,7.1875rem) !important;
        border: 2px solid transparent;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background: rgba(255,255,255,1);
        opacity: .6;
    }

        .customer-groupbut li:not(:first-child) {
            margin-left: clamp(.25rem, 1.3vw,1.5625rem) !important;
        }

        .customer-groupbut li i {
            position: absolute;
            top: clamp(-.96rem,-.8vw,-.125rem);
            left: 50%;
            height: clamp(.125rem,.8vw,.96rem);
            aspect-ratio: 1 / .5;
            background: rgba(13, 110, 253, 1);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            margin-left: clamp(-.96rem,-.8vw,-.125rem);
            display: none;
        }

        .customer-groupbut li:hover {
            border-color: rgba(13, 110, 253, .3);
            opacity: 1
        }

        .customer-groupbut li.swiper-pagination-bullet-active i {
            display: block;
        }

        .customer-groupbut li.swiper-pagination-bullet-active {
            border-color: rgba(13, 110, 253, 1);
            opacity: 1;
        }

        .customer-groupbut li:hover:not(.swiper-pagination-bullet-active) i {
            display: block;
            background: rgba(13, 110, 253, .3);
        }

.customer-group .customer-item:nth-child(2) {
    background: radial-gradient(30% 100% at 90% 130%, rgba(140,101,153,1) 40%, rgba(118,142,177,1));
}

.customer-group .customer-item:nth-child(3) {
    background: radial-gradient(30% 100% at 90% 130%, rgba(139,57,8,1) 40%, rgba(147,109,64,1));
}

.customer-group .customer-item:nth-child(4) {
    background: radial-gradient(30% 100% at 90% 130%, rgba(11,88,115,1) 40%, rgba(16,129,107,1));
}

.default-try {
    background: rgba(0,0,0,1);
}

    .default-try .container {
        background: url(../img/default/bottom-bg-01.png) no-repeat right;
        height: clamp(1rem, 8.33vw, 10rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(255,255,255,1);
    }

        .default-try .container > * {
            font-size: clamp(.25rem, 1vw, 1.2rem);
        }

        .default-try .container .btn {
            border-radius: 2rem;
            padding: .25rem 1.5rem;
        }

/* ==================== ARTICLE STYLE ==================== */
.articlepage {
    margin-bottom: 1rem;
}

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

    .articlepage .container {
        background: rgba(180,180,180,.1);
        padding: 1rem;
    }

    /** 不继承所有 header */
    .articlepage header {
        all: revert;
        text-align: center;
    }

        .articlepage header h1 {
            line-height: 1.8;
        }

        .articlepage header h2 {
            opacity: .6
        }

        .articlepage header .tags {
            font-size: .785rem;
            text-align: right;
            opacity: .7;
        }

            .articlepage header .tags span {
                padding: .25rem;
                display: inline-block;
            }

                .articlepage header .tags span a {
                    color: var(--article-tag-color);
                }

                    .articlepage header .tags span a:hover {
                        color: var(--article-tag-hover-color);
                    }

        .articlepage header .abstract:not(:empty) {
            text-align: left;
            font-size: .785rem;
            opacity: .7;
            padding: .5rem 1rem;
            border: 1px solid var(--article-abstract-border);
            background: var(--article-abstract-bg);
            border-radius: .5rem
        }

    .articlepage .content {
        padding: 1rem;
        background: var(--article-bg);
        margin: 1rem 0;
        border-radius: .5rem;
        overflow: hidden;
    }


/*** FUNCTION TOOLS 1010101 *****/
.video-function .video-function-title {
    padding: 3em 0 5em 0;
    position: relative;
    text-align: center;
    background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1));
}

    .video-function .video-function-title .starbg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 290px;
        aspect-ratio: 1 / .5652;
        background: url(../../img/starbg.png) no-repeat;
        background-size: cover;
    }


    .video-function .video-function-title h1 {
        font-size: clamp(.25rem, 3vw, 3.6rem);
        font-weight: bold;
    }

    .video-function .video-function-title h4 {
        font-size: clamp(.25rem, 2vw, 1.5rem);
        opacity: .6;
    }

.video-funciton-show {
    margin-top: clamp(.25rem, 3.9583vw, 4.75rem);
}


.video-funciton-item {
    padding: clamp(.125rem, 2.5vw, 3rem) clamp(.125rem, 3.64583vw, 4.375rem) 0 0;
    display: flex;
    position: relative;
    height: clamp(.25rem, 22.91666vw, 27.5rem);
}

    .video-funciton-item:nth-child(2n+1) {
        padding: clamp(.125rem, 2.5vw, 3rem) 0 0 clamp(.125rem, 3.64583vw, 4.375rem);
    }

    .video-funciton-item span {
        position: absolute;
        top: clamp(-.125rem, -2.5vw, -3rem);
        right: clamp(-.125rem, -3.64583vw, -4.375rem);
    }

        .video-funciton-item span img {
            height: clamp(.25rem, 22.91666vw, 27.5rem);
            border-radius: .75em;
        }

    .video-funciton-item:nth-child(2n+1) span {
        top: clamp(-.125rem, -2.5vw, -3rem);
        left: clamp(-.125rem, -3.64583vw, -4.375rem);
    }

    .video-funciton-item .video-funciton-discription {
        background: linear-gradient(346deg, #dffaff 30%, #fff5f0 100%);
        height: clamp(.25rem, 18vw, 22.5rem);
        border-radius: .75rem;
        width: 100%;
    }

    .video-funciton-item:nth-child(2n+1) .video-funciton-discription {
        background: linear-gradient(45deg, #ffeffe 50%, #eefdf8 100%);
    }

    .video-funciton-item .video-funciton-discription p,
    .video-funciton-item .video-funciton-discription h4 {
        /*padding: clamp(.125rem, 2.06vw, 2.5rem);*/
        opacity: .7;
        padding: 5% 50% 0 5%;
        line-height: 190%;
    }

    .video-funciton-item:nth-child(2n+1) p,
    .video-funciton-item:nth-child(2n+1) h4 {
        padding: 5% 5% 0 50%
    }

    .video-funciton-item .video-funciton-discription p {
        font-size: clamp(.25rem, .84vw, 1rem);
        opacity: .5;
        padding-top: .25%
    }

    .video-funciton-item:not(:first-child) {
        margin-top: clamp(.25rem, 3.25vw, 4.5rem);
    }

.video-function .video-function-title h5 {
    margin-top: clamp(.25rem, 3.3854vw, 4.0625rem);
    opacity: .6;
    padding: 0 clamp(.25rem, 3.6458vw, 5em);
    line-height: clamp(.25rem, 150%, 2em);
    font-size: clamp(.25em,.9375vw,1.125em);
}

/** FUNCTION TOOLS 1010102 ****/
.video-ad-03 .video-ad-title h1 {
    font-size: clamp(.25rem, 3vw, 3.6rem);
    font-weight: bold;
}

.video-ad-03 .video-ad-title h4 {
    font-size: clamp(.25rem, 2vw, 1.5rem);
    opacity: .6;
}

.video-ad-03 .video-ad-title {
    text-align: center;
}


.video-ad-03 .video-ad-title {
    padding: 3em 0 5em 0;
    position: relative;
    text-align: center;
    background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1));
}

    .video-ad-03 .video-ad-title .starbg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 290px;
        aspect-ratio: 1 / .5652;
        background: url(../../img/starbg.png) no-repeat;
        background-size: cover;
    }

.video-ad-03 .video-ad-show {
    margin-top: clamp(1rem, 5.729vw, 6.875rem);
    display: flex;
    flex-wrap: wrap;
    background: url(../../img/bgicon.png) no-repeat center center;
}

    .video-ad-03 .video-ad-show h4 {
        padding: 1em 0 .5em 0;
    }

    .video-ad-03 .video-ad-show p {
        color: rgba(0,0,0,.4)
    }

.video-ad-03 .video-ad-item.col-5 {
    padding: 1.25em;
    background: white;
    box-shadow: 0 0 .5em 0.25em rgba(210, 210, 210, .3);
    border-radius: .75em;
    margin-bottom: 4em;
    transition: all 0.3s ease-in-out;
}

    .video-ad-03 .video-ad-item.col-5:hover {
        box-shadow: 0 0 .5em 0.25em rgba(210, 100, 180, .3);
        transition: all 0.3s ease-in-out;
    }

    .video-ad-03 .video-ad-item.col-5 span {
        display: block;
        overflow: hidden;
        border-radius: .75em
    }

        .video-ad-03 .video-ad-item.col-5 span img {
            width: 100%;
        }

.video-ad-04 {
    padding: clamp(1rem, 5.729vw, 6.875rem) 0;
    display: block;
    background: rgba(210,210,210,.3);
    text-align: center;
    overflow: hidden;
}

    .video-ad-04 .video-ad-title h1 {
        font-size: clamp(.25rem, 3vw, 3.6rem);
        font-weight: bold;
    }

    .video-ad-04 .video-ad-show {
        margin-top: clamp(.25rem, 2.729vw, 3.875rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .video-ad-04 .video-ad-show .video-ad-item {
            background: rgba(255,255,255,1);
            border-radius: .75em;
            padding: 1.5em;
            width: 50%;
            margin: 0 1em;
            transition: all 0.3s ease-in-out;
        }

            .video-ad-04 .video-ad-show .video-ad-item:hover {
                box-shadow: 0 0 .75em .5em rgba(100,100,220,.08);
            }

            .video-ad-04 .video-ad-show .video-ad-item h1 {
                font-size: clamp(.25rem, 3vw, 3.6rem);
                font-weight: bold;
                color: rgba(110,80,220,1);
                transition: all 0.3s ease-in-out;
            }

            .video-ad-04 .video-ad-show .video-ad-item p {
                color: rgba(0,0,0,.4)
            }

/** FUNCTION TOOLS 1010103 ****/

.video-banner {
    background: linear-gradient(120deg,rgba(229, 252, 253, 1) 30%,rgba(247,231, 255, 1));
    display: block;
}

    .video-banner .container {
        padding-top: clamp(1rem, 5.729vw, 6.875rem);
    }

        .video-banner .container .video-banner-header {
            text-align: center;
        }

            .video-banner .container .video-banner-header h1 {
                font-size: clamp(.25rem, 3vw, 3.6rem);
                font-weight: bold;
                margin-bottom: clamp(.2rem, .5vw, 1rem);
            }

            .video-banner .container .video-banner-header h4 {
                font-size: clamp(.25rem, 2vw, 1.5rem);
                opacity: .6;
            }

        .video-banner .container .video-banner-show {
            margin-top: clamp(.25rem, 2.9vw, 3.5rem);
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

            .video-banner .container .video-banner-show .col-6 {
                display: flex;
            }

            .video-banner .container .video-banner-show .video-banner-item > div {
                background: #FFF;
                border-radius: 1.5em;
                overflow: hidden;
                margin: 1em;
                padding: clamp(.25rem, 1.5625vw, 2rem);
                flex-grow: 1;
            }

            .video-banner .container .video-banner-show .video-item-icon {
                margin: clamp(.25rem, 1.5625vw, 2rem) auto;
                display: block;
                text-align: center;
            }

                .video-banner .container .video-banner-show .video-item-icon img {
                    height: clamp(.125rem,5.2084vw,6.25rem);
                }

            .video-banner .container .video-banner-show h2 {
                font-weight: bold;
                font-size: clamp(.25rem, 1.5625vw, 2rem);
                text-align: center;
            }

            .video-banner .container .video-banner-show p {
                font-size: clamp(.25rem, .84vw, 1rem);
                padding: clamp(.125rem, .62vw, .75rem) clamp(.125rem, 1.03vw, 1.25rem);
                opacity: .7;
            }

.video-banner-ad {
    background: rgba(210,210,210,.08);
    text-align: center;
    padding: clamp(.25rem, 3vw, 3.6rem);
}

    .video-banner-ad .container {
        padding-top: 0
    }

    .video-banner-ad .video-ad-show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .video-banner-ad .video-ad-title h1 {
        font-size: clamp(.25rem, 3vw, 3.6rem);
        font-weight: bold;
    }

    .video-banner-ad .video-ad-title h4 {
        opacity: .6;
    }

    .video-banner-ad .video-ad-item {
        margin: 1em;
        width: 50%;
        padding: clamp(.25rem, 3vw, 3.6rem);
        background: rgba(20,117,220,.8);
        color: white;
    }

        .video-banner-ad .video-ad-item h1 {
            padding: .5em;
            font-weight: bold;
            border-radius: clamp(.25rem, .6vw, 0.875rem);
            background: rgb(255 255 255);
            color: rgba(66,140,220,.9);
            font-size: clamp(.25rem, 3vw, 3.6rem);
        }

.toolssort .sorttitle {
    display: none
}

/*** FUNCTION TOOLS 1010104 *****/
.video-ad-05 {
    /*padding:clamp(.25rem, 3vw, 3.6rem);*/
}

    .video-ad-05 .video-ad-title {
        position: relative;
        text-align: center;
        background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1));
        padding: clamp(.25rem, .75vw, 1em);
    }

        .video-ad-05 .video-ad-title h4 {
            padding: clamp(.25rem, .75vw, 1em);
            color: rgba(0,0,0,.6);
        }

        .video-ad-05 .video-ad-title p {
            padding: clamp(.25rem, 1.5vw, 2.5em) clamp(.25rem, 7.5vw, 10em);
            color: rgba(0,0,0,.5);
            background: azure;
        }

        .video-ad-05 .video-ad-title h1 {
            font-size: clamp(.25rem, 3vw, 3.6rem);
            font-weight: bold;
        }

    .video-ad-05 .video-ad-show .video-ad-item > div {
        padding: clamp(.25rem, 1.25vw, 1.6em);
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        border-radius: .75em;
    }

    .video-ad-05 .video-ad-show {
        display: flex;
        gap: 1rem;
        margin-top: clamp(.25rem, 2.25vw, 2.875rem);
    }

    /* 默认所有卡片都收缩状态 */
    .video-ad-05 .video-ad-item {
        flex: 1;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        padding: clamp(.25rem, 3.5vw, 4.2em) clamp(.25rem, 1.25vw, 1.6em);
        background: rgba(0, 0, 0, 0.07);
        border-radius: .75em;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(255, 255, 255, 0.5);
        cursor: pointer;
        overflow: hidden;
        position: relative;
        min-width: 0;
        opacity: .4;
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(0);
    }

        .video-ad-05 .video-ad-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #0064cd, #8a2be2);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        /* 图标样式 */
        .video-ad-05 .video-ad-item i {
            display: grid;
            aspect-ratio: 1 / 1;
            margin: clamp(.25rem, 1.5vw, 2.5em) 0;
            padding: clamp(.125rem, 0.375vw, .5rem);
            font-size: clamp(1.5rem, 2.25vw, 2.875rem);
            transition: all 0.3s ease;
        }

        /* 标题样式 */
        .video-ad-05 .video-ad-item h4 {
            padding: clamp(.125rem, 0.375vw, .5rem) 0;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        /* 段落样式 */
        .video-ad-05 .video-ad-item p {
            transition: all 0.3s ease;
            margin-top: 0.5rem;
            overflow: hidden;
            visibility: hidden;
            height: clamp(.125rem, 5.2083vw, 7.142em)
        }

    /* 默认第一个卡片展开 */
    .video-ad-05 .video-ad-show:not(:hover) .video-ad-item:first-child {
        flex: 2;
        background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1));
        box-shadow: 0 0 .75em .5em rgba(232, 222, 239, 0.67);
        border-color: rgba(255, 255, 255, 0.8);
        opacity: 1 !important;
    }

    .video-ad-05 .video-ad-show .video-ad-item:first-child::before {
        transform: scaleX(1);
    }

    .video-ad-05 .video-ad-show .video-ad-item:first-child i {
        color: rgba(0, 100, 205, 1);
        background: rgba(255, 255, 255, 0.8);
        border-radius: .25em;
    }

    /* 悬停时改变布局 - 提高优先级 */
    .video-ad-05 .video-ad-item:hover {
        flex: 2 !important;
        background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1)) !important;
        box-shadow: 0 0 .75em .5em rgba(232, 222, 239, 0.67) !important;
        border-color: rgba(255, 255, 255, 0.8) !important;
        z-index: 2;
        opacity: 1 !important;
    }

        .video-ad-05 .video-ad-item:hover::before {
            transform: scaleX(1) !important;
        }

        .video-ad-05 .video-ad-item:hover i {
            color: rgba(0, 100, 205, 1) !important;
            background: rgba(255, 255, 255, 0.8) !important;
            border-radius: .25em !important;
        }

    /* 当有卡片悬停时，第一个卡片恢复收缩状态 */
    .video-ad-05 .video-ad-show:hover .video-ad-item:first-child:not(:hover) {
        flex: 1;
        background: rgba(0, 0, 0, 0.07);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(0);
    }

        .video-ad-05 .video-ad-show:hover .video-ad-item:first-child:not(:hover)::before {
            transform: scaleX(0);
        }

        .video-ad-05 .video-ad-show:hover .video-ad-item:first-child:not(:hover) i {
            color: rgba(0, 0, 0, 1);
            background: transparent;
            border-radius: 0;
        }

    .video-ad-05 .video-ad-item:hover p,
    .video-ad-05 .video-ad-show:not(:hover) .video-ad-item:first-child p {
        visibility: visible;
        height: auto;
    }

    .video-ad-05 .video-ad-title .starbg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 290px;
        aspect-ratio: 1 / .5652;
        background: url(../../img/starbg.png) no-repeat;
        background-size: cover;
        z-index: 1
    }
/*** FUNCTION TOOLS 1010105 *****/
.video-ad-06{
	margin-bottom:2em
}
.video-ad-06 .video-ad-title h1 {
    font-size: clamp(.25rem, 3vw, 3.6rem);
    font-weight: bold;
}

.video-ad-06 .video-ad-title h4 {
    font-size: clamp(.25rem, 2vw, 1.5rem);
    opacity: .6;
}

.video-ad-06 .video-ad-title {
    padding:clamp(.25em, 2.1875vw, 3em) 0 clamp(.25em, 3.6458vw, 5em) 0;
    position: relative;
    text-align: center;
    background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1));
	overflow: hidden;
}

.video-ad-06 .video-ad-title .starbg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 290px;
    aspect-ratio: 1 / .5652;
    background: url(../../img/starbg.png) no-repeat;
    background-size: cover;
    z-index: 1;
}

.video-ad-06 .video-ad-show {
    display: flex;
    gap: 1rem;
    margin-top: clamp(.25rem, 2.25vw, 2.875rem);
}

.video-ad-06 .video-ad-item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(193,220,255,.8) 20%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 100%);
    border-radius: .75em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.8);
	text-align: center;
    box-shadow: 0 0 .75em .25em rgba(180,180,180,.25);
    border-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    overflow: hidden;
}

.video-ad-06 .video-ad-show h4{
    padding: clamp(.25rem, 1vw, 1.25rem);
    background: rgba(108, 152, 197, .8);
	font-size: clamp(.25rem, 2vw, 1.5rem);
	font-weight: bold;
	color:rgba(255,255,255,1);
}

.video-ad-06 .video-ad-show i{
	font-size: clamp(.25rem, 2.5vw, 3.12rem);
	padding:clamp(.25rem, 1.25vw, .5em);
	color:rgba(0, 100, 159, 1);
}

.video-ad-06 .video-ad-show p{
	padding: clamp(.25rem, 1.75vw, 2.25rem);
	font-size: clamp(.25em, .83333vw, 1.14em);
	opacity: .6;
}

/*** FUNCTION TOOLS 1010106 *****/
.video-ad-07 .video-ad-title {
    padding: clamp(.25em, 2.1875vw, 3em) 0 clamp(.25em, 3.6458vw, 5em) 0;
    position: relative;
    text-align: center;
    background: linear-gradient(120deg, rgba(229, 252, 253, 1) 30%, rgba(247, 231, 255, 1));
    overflow: hidden;
}

.video-ad-07 .video-ad-title .starbg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 290px;
    aspect-ratio: 1 / .5652;
    background: url(../../img/starbg.png) no-repeat;
    background-size: cover;
    z-index: 1;
}

.video-ad-07 .video-ad-title h1 {
    font-size: clamp(.25rem, 3vw, 3.6rem);
    font-weight: bold;
}

.video-ad-07 .video-ad-title h4 {
    font-size: clamp(.25rem, 2vw, 1.5rem);
    opacity: .6;
}

.video-ad-07 .video-ad-show{
	margin-top: clamp(.25rem, 2.25vw, 2.875rem);
	display:flex;
	flex-wrap: wrap;
}
.video-ad-07 .video-ad-item{
	flex: 1 0 40%;
    margin: clamp(.25em, .83333vw, 1.14em);
    background: rgba(255,255,255,.3);
    padding: clamp(.25em, .83333vw, 1.14em);
    border-radius: .5em;
	display: flex;
	box-shadow:0 0 .5em .5em rgba(210,210,210,.3)
}

.video-ad-07 .video-ad-item > *{
	max-width: 50%;
    overflow: hidden;
}

.video-ad-07 .video-ad-item h4{
	color: var(--bs-dark-rgb);
	padding: clamp(.25rem, 1vw, 1.25rem);
    font-size: clamp(.25rem, 2vw, 1.5rem);
    font-weight: bold;
}

.video-ad-07 .video-ad-item p{
    font-size: clamp(.25em, .83333vw, 1.14em);
	padding:0 clamp(.25rem, 1vw, 1.25rem);
	opacity: .6;
}