.header{--header-height:70px;--logo-width:70px;--logo-ratio:0.192;position:sticky;top:0;z-index:1000;display:flex;align-items:center;min-height:var(--header-height,70px);background-color:rgba(255,255,255,0.702);backdrop-filter:blur(23px) saturate(4.5);box-shadow:0 0 18px 2px rgba(0,0,0,0.102);padding:0 40px;gap:20px}
.header ul,.header li{list-style:none;margin:0;padding:0}
.header[data-pc]{}
@media screen and (max-width:768px){
    .header[data-pc]{overflow: hidden;opacity: 0;}
}
.header[data-pc] .mla{margin-inline-start:auto}
.header[data-pc] .header-item{flex-shrink:0;display:flex;align-items:center;height:var(--header-height);position:relative}
.header[data-pc] .logo{text-indent:-9999px;overflow:hidden;display:block; background:url(https://oss.boweixi.com/prod/bwx/logo.png) center no-repeat;background-size:contain;width:var(--logo-width);height:calc(var(--logo-width) * var(--logo-ratio));transition:opacity 0.2s;text-decoration:none}
.header[data-pc] .logo:hover{opacity:0.8}
.header[data-pc] .nav{flex-shrink:0;margin-inline-start:10px}
.header[data-pc] .nav .current{--underline-width:100% !important;--underline-color:var(--el-color-primary) !important;color:var(--el-color-primary) !important}
.header[data-pc] .nav-menus{display:flex;align-items:center;height:var(--header-height);gap:20px}
.header[data-pc] .nav-menus > li{position:relative}
.header[data-pc] .nav-menus > li.active .menu-item{color:var(--el-color-primary)}
.header[data-pc] .nav-menus > li.active .menu-item > .icon{transform:rotate(180deg)}
.header[data-pc] .nav-menus .menu-item{--underline-width:0%;--underline-color:transparent;display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;font-weight:600;cursor:pointer;height:var(--header-height);position:relative}
.header[data-pc] .nav-menus .menu-item::after{content:'';position:absolute;left:0;bottom:0;width:var(--underline-width);border-top:2px solid var(--underline-color);transition:width 0.3s ease}
.header[data-pc] .nav-menus .menu-item .icon{transition:transform 0.2s}
.header[data-pc] .nav-menus .menu-item:hover{color:var(--el-color-primary)}
.header[data-pc] .l2-menus{--l3-left:100%;position:absolute;top:var(--header-height);padding:10px 20px;background-color:#fff;box-shadow:2px 14px 14px #0000001a;border-radius:0 0 5px 5px;z-index:900;display:none;min-width: 200px;}
.header[data-pc] .l2-menus .l2-menu-item{--underline-width:0%;--underline-color:transparent;display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;border-bottom:2px solid transparent;font-weight:600;cursor:pointer;padding:7px 0;position:relative}
.header[data-pc] .l2-menus .l2-menu-item::after{content:'';position:absolute;left:0;bottom:0;width:var(--underline-width);border-top:2px solid var(--underline-color);transition:width 0.3s ease}
.header[data-pc] .l2-menus .l2-menu-item:hover{color:var(--el-color-primary)}
.header[data-pc] .l2-menus > li{position:relative}
.header[data-pc] .l2-menus > li.active .l2-menu-item{color:var(--el-color-primary)}
.header[data-pc] .l3-menus{position:absolute;top:0;padding:10px;background-color:#fff;box-shadow:2px 14px 14px #0000001a;border-radius:0 0 5px 5px;z-index:900;display:none;width:max-content;left:var(--l3-left);min-width: 200px;}
.header[data-pc] .l3-menus .l3-menu-item{--underline-width:0%;--underline-color:transparent;display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;border-bottom:2px solid transparent;font-weight:600;cursor:pointer;padding:7px 0;position:relative}
.header[data-pc] .l3-menus .l3-menu-item::after{content:'';position:absolute;left:0;bottom:0;width:var(--underline-width);border-top:2px solid var(--underline-color);transition:width 0.3s ease}
.header[data-pc] .l3-menus .l3-menu-item:hover{color:var(--el-color-primary)}
.header[data-pc] .user-fast-menu .ufm-dropdown-btn{display:none;align-items:center;cursor:pointer;height:100%}
.header[data-pc] .user-fast-menu .ufm-login-btn,.header[data-pc] .user-fast-menu .ufm-dropdown-btn > a{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;height:var(--header-height);color:inherit;text-decoration:none;font-weight:600;cursor:pointer;padding:7px 0}
.header[data-h5]{display:none;padding:0 10px;justify-content:space-between;background-color: #fff;}
@media screen and (max-width:768px){
    .header[data-h5]{display: flex;}
}
.header[data-h5] .header-item{flex-shrink:0;display:flex;align-items:center;height:var(--header-height);position:relative}
.header[data-h5] .btnNavToggle{cursor:pointer}
.header[data-h5] .btnNavToggle svg{font-size:24px}
.header[data-h5] .logo{text-indent:-9999px;overflow:hidden;display:block;background:url(https://oss.boweixi.com/prod/static/img/dataspider.ai_logo.svg) center no-repeat;background-size:contain;width:var(--logo-width);height:calc(var(--logo-width) * var(--logo-ratio));transition:opacity 0.2s;text-decoration:none}
.header[data-h5] .logo:hover{opacity:0.8}
.header[data-h5] .nav{position:absolute;top:var(--header-height);left:0;display:none;padding:10px 10px 10px 20px;background-color:#fff;box-shadow:2px 14px 14px #0000001a;border-radius:0 0 5px 5px;z-index:900;width:100%;max-height:calc(100vh - var(--header-height));overflow:hidden auto}
.header[data-h5] .nav .current{color:var(--el-color-primary) !important}
.header[data-h5] .nav .nav-menus{width:100%}
.header[data-h5] .nav .nav-menus .menu-item{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;font-weight:600;cursor:pointer;position:relative;padding:10px 0}
.header[data-h5] .nav .nav-menus .menu-item:not([href]){opacity:0.7}
.header[data-h5] .nav .l2-menus{padding-inline-start:30px;width:100%}
.header[data-h5] .nav .l2-menus .l2-menu-item{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;border-bottom:2px solid transparent;font-weight:600;cursor:pointer;padding:10px 0;position:relative}
.header[data-h5] .nav .l2-menus .l2-menu-item:not([href]){opacity:0.7}
.header[data-h5] .nav .l3-menus{padding-inline-start:30px;width:100%}
.header[data-h5] .nav .l3-menus .l3-menu-item{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;border-bottom:2px solid transparent;font-weight:600;cursor:pointer;padding:8px 0;position:relative}
.header[data-h5] .user-fast-menu .ufm-dropdown-btn{display:none;align-items:center;cursor:pointer;height:100%}
.header[data-h5] .user-fast-menu .ufm-login-btn,.header[data-h5] .user-fast-menu .ufm-dropdown-btn > a{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;height:var(--header-height);color:inherit;text-decoration:none;font-weight:600;cursor:pointer;padding:7px 0}
.header[data-h5] .user-fast-menu ~ .google-translate{margin-inline-start:20px}

/* google translate begin */
#google_translate_element{display:inline-flex}
.goog-te-gadget-simple{border-color:#ddd !important;border-radius:4px;display:inline-flex;align-items:center;padding:4px 0 4px 4px}
.goog-te-gadget-simple>img{display:none;transform:scale(.8)}
.goog-te-gadget-simple a span:last-child{opacity:.5}
.goog-te-gadget-simple a span:nth-child(3){display:none}
body>div.skiptranslate:first-child{display:none !important}
.goog-te-gadget-simple>span>a{display: inline-flex;align-items: center;white-space: nowrap;}

/* google translate end */

/* footer begin */
.footer{padding:30px 50px;font-size:13px}
.footer a:not(:hover,.link,.link-primary){color: inherit;}
.footer a:not(:hover){text-decoration:none}
@media screen and (max-width:1090px){
    .footer{padding:20px}
}
.footer .box{display:flex;align-items:flex-start;flex-wrap:wrap;gap:20px 50px;border-top:1px solid #d4d4d4;padding-top:20px;max-width: 100%;}
.footer-left{flex-shrink:0}
.footer-left .logo{flex-shrink:0;width:max-content;display:flex}
.footer-left .logo img{width:46px;height:auto}
.footer-left .email{display:flex;align-items:center;margin-block-start:10px;gap:5px}
.footer-left .email strong{color:#808080;font-weight:normal}
.footer-left .copyright{margin-block-start:10px;word-break:keep-all;color:#808080}
.footer-right{display:flex;align-items:flex-start;flex-wrap:wrap;gap:50px}
.footer-right ul{flex-shrink:0}
.footer-right ul li:first-child{font-weight:600;margin-block-end:20px}
.footer-right ul li:first-child a{text-decoration: none;color: inherit;}
.footer-right ul li:not(:first-child){margin-block-start:10px}
.footer-right .qrcode-tg{width:100px;height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;border: 1px solid var(--el-border-color);border-radius: 6px;margin-block-start: 10px;}
.footer-right .qrcode-tg img{width:100%;height:auto}

/* footer end */

/* right-aside-fixed begin */
.right-aside-fixed{--item-width:50px;--item-height:50px;position:fixed;right:16px;bottom:20vh;box-shadow:0px 0px 10px 1px rgba(175,195,207,0.3);background-color:#fff}
.right-aside-fixed .right-aside-item{display:flex;align-items:center;justify-content:center;width:var(--item-width);height:var(--item-height);background-color:#f5f5f5;border:2px solid #ffffff;font-size:26px;cursor:pointer;color: inherit;}
.right-aside-fixed .right-aside-item:hover{color:#fff !important;background-color:var(--el-color-primary)}
.right-aside-fixed .back-to-top{display:none}

/* right-aside-fixed end */

/* social-media begin */
.social-media {display: flex;align-items: center;gap: 25px;margin-block-start: 20px;}
.social-media a svg {font-size: 22px;}
/* social-media end */



/* user notification begin */
.notification-wrap {
    display: none;
}

.notification-wrap>.button {
    position: relative;
    padding-top: 8px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: white;
    margin-inline-start: 20px;
}

.notification-wrap>.button svg {
    font-size: 20px;
    pointer-events: none;
}

.notification-wrap>.button.is-read::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #d63939;
    border-radius: 50%;
}

.notification-card {
    display: none;
    position: absolute;
    top: 71px;
    right: 0;
    background-color: white;
    border: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1000;
    transition: opacity 1s ease, transform 1s ease;
    width: 500px;
    height: 405px;
    overflow: hidden;
}

.notification-card .notify-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.notification-card .notify-col {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.notification-card .notify-col label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.notification-card .notify-col:last-child {
    margin-inline-start: auto;
}

@media screen and (max-width:768px) {
    .notification-card {
        width: 90vw;
        height: 40vh;
    }
}

.notification-card .message-item {
    display: block;
    border-top: 1px solid #ddd;
    font-size: 12px;
    padding: 10px 0 10px 24px;
    position: relative;
}
.notification-card .message-item .dot {
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius:50%;
    background-color: #6c7a91;
}

.notification-card .message-item.unread .dot {
    background-color: #d63939;
}
.notification-card .message-item.unread .dot:before {
    animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
}
.notification-card .message-item.unread .dot:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    border-radius: inherit;
    opacity: .6;
}
@keyframes status-pulsate-tertiary {
    25% {
        transform: scale(1,1)
    }
    80% {
        transform: scale(3,3);
        opacity: 0
    }
    100% {
        transform: scale(3,3);
        opacity: 0
    }
}
.notification-card .message-item:hover {
    background-color: #f5f5f5;
}
.notification-card .message-item .subject {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    max-width: 100%;
}
.notification-card .message-item .subject:hover {
    text-decoration: underline;
    color: var(--el-color-primary);
}
.notification-card .message-item .snippet {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 18px;
    color: #6c7a91;
}
 
/* user notification end */