html {
    background: #fff;
}

body {
    color: #6a707c;
    background: linear-gradient(135deg, #f9fafb 30%, #fff4e6 100%);
}

.bd-header {
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #eee;
    background: #fff;
    z-index: 35;
    /*opacity: 0.9;*/
}

.navbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#navbar.is-active {
    position: absolute;
    right: 1rem;
    width: 10rem;
    padding: 1rem;
    margin-top: -6px;
    border: 1px solid #d6d9e0;
    border-radius: 1rem;
}

    #navbar.is-active a {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
    }

#navbar a.navbar-item:hover {
    background: #e0f6ff;
}

main {
    padding: 7.3rem 1rem 1rem;
}

.footer {
    line-height: 2rem;
    border-top: 1px solid #f0efee;
    background: #fff;
}

.grade1 {
    color: #15803d;
    background: #dcfce7;
}

.grade2 {
    color: #fff;
    background: #ff9500;
}

.grade3 {
    color: #fff;
    background: #ef4343;
}

.grade4 {
    color: #fff;
    background: #d24317;
}

.grade5 {
    color: #fff;
    background: #c52f21;
}

.table {
    font-size: 0.9rem;
    width: 100%;
    border-bottom: 1px solid #d6d9e0;
}

    .table thead th {
        border-bottom-width: 1px;
        background: #f9fafb;
    }

        .table td:not([align]), .table thead th:not(:first-child) {
            text-align: center;
        }

    .table td, .table th {
        padding-top: 14px;
        padding-bottom: 14px;
    }

button.is-small {
    color: #fff;
    font-weight: 700;
}

.bctitle svg {
    position: relative;
    top: 4px;
}

.ulist {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: 0.3s;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .ulist:hover {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 15px;
    }

    .ulist a {
        color: #6a707c;
    }

        .ulist a p {
            line-height: 2rem;
        }

    .ulist .title {
        color: #0697e0;
        font-weight: 700;
        line-height: 2rem;
    }

        .ulist .title svg {
            position: relative;
            top: 4px;
        }

    .ulist .ucol {
        float: left;
        font-size: 0.9rem;
        width: 100%;
        border-top: 1px dotted #ccc;
    }

        .ulist .ucol i {
            margin-right: 8px;
        }

    .ulist .rc {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #e6f7ff 0%, #1890ff 100%);
        opacity: 0.2;
        border-radius: 0px 0px 0px 70px;
    }

.ubox {
    border: 1px solid #f0f0f0;
}

    .ubox.highlight {
        border: 2px solid #d4e2fd;
    }

    .ubox .ulabel button {
        --bulma-button-border-width: max(2px,0.125em);
    }

    .ubox article {
        line-height: 2rem;
    }

    .ubox .t-c {
        color: #0697e0;
        font-weight: 700;
        line-height: 2rem;
    }

    .ubox .title {
        font-weight: 700;
        line-height: 2.5rem;
    }

        .ubox .title svg {
            position: relative;
            top: 5px;
        }

    .ubox .subp {
        line-height: 1.8rem;
    }

    .ubox .un {
        font-size: 64px;
        font-weight: 500;
    }

    .ubox .tag {
        font-weight: 700;
    }

    .ubox .uicon {
        color: #6a707c;
        font-size: 0.9rem;
    }

        .ubox .uicon i {
            margin-right: 8px;
        }

        .ubox .uicon .tag {
            color: #2a6df4;
        }

    .ubox .li, .ubox.li {
        border: 0;
        background: #fafbfb;
    }

    .ubox .scon {
        color: #15803d;
        line-height: 2rem;
        background: #e8f9ee;
    }

        .ubox .scon p {
            margin: 0.8rem 0;
        }

    .ubox .li svg {
        position: relative;
        top: 3px;
    }

    .ubox .li p {
        color: #6a707c;
        font-size: 0.9rem;
    }

    .ubox .li.dimension {
        background: #e9f0fe;
    }

        .ubox .li.dimension p {
            line-height: 1.8rem;
        }

    .ubox .warning {
        background: #fefaf3;
    }

    .ubox .tips {
        color: #ca8a04;
        line-height: 1.8rem;
    }

    .ubox .li ul {
        color: #ffb70f;
        list-style: disc;
    }

    .ubox .li li {
        font-size: 0.9rem;
        line-height: 2rem;
        padding: 6px 0;
    }

    .ubox .icon {
        width: 80px;
        height: 80px;
        text-align: center;
        border-radius: 50%;
        background: #e9f0fe;
    }

        .ubox .icon .fas {
            font-weight: normal;
        }

.ucard {
    position: relative;
    transition: 0.3s;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0) 0 0 0;
}

    .ucard:hover {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 15px;
    }

    .ucard .uicon {
        color: #6a707c;
        font-size: 0.9rem;
    }

    .ucard .card-header-title {
        color: #0697e0;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 2rem;
    }

    .ucard .uicon i {
        margin-right: 8px;
    }

.modal input[name="cdkey"] {
    text-transform: uppercase;
}

.modal input {
    margin-top: 24px 0 0;
}

.modal .tips {
    height: 24px;
}

.modal .modal-card-head {
    background: #f9fafb;
}

.modal .modal-card-body p {
    line-height: 2rem;
}

.ubtn button {
    color: #fff;
}

.utable {
    border-bottom: 0;
}

    .utable th:not([width]) {
        width: 25%;
        border-bottom: 0;
    }

    .utable .noline {
        line-height: 1.6rem;
        border-bottom: 0;
    }

.utag {
    font-size: 0.9rem;
    text-align: center;
    padding: 0.5rem 0.35rem 0.7rem;
}

    .utag i {
        font-size: 1.5rem;
        font-weight: 500;
        font-style: normal;
    }

    .utag.link {
        color: #4258ff;
        border: 1px solid #4258ff;
    }

    .utag.warning {
        color: #db9a00;
        border: 1px solid #db9a00;
    }

    .utag.success {
        color: #48c78e;
        border: 1px solid #48c78e;
    }

.utab button svg {
    position: relative;
    top: 2px;
}

.utab .tab {
    display: none;
}

    .utab .tab .title {
        line-height: 2rem;
    }

.share .notification {
    color: #ca8a04;
    font-size: 0.9rem;
    line-height: 1.6rem;
}

.share .modal-card-title svg {
    position: relative;
    top: 1px;
}

.share .buttons {
    gap: 0.25rem;
}

.sharePanel {
    position: fixed;
    top: -9999px;
    z-index: 0;
}

    .sharePanel .table {
        border-bottom: 0;
    }

        .sharePanel .table .tag {
            padding-bottom: 2px;
        }

    .sharePanel.ubox .title svg {
        position: relative;
        top: 2px;
    }

.sharebutton {
    position: fixed;
    width: 60px;
    height: 60px;
    right: 17px;
    bottom: 30px;
    z-index: 36;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px;
}

.ubox.recommend {
    color: #6a707c;
    border: 1px solid #b6cdfa;
    background: #f3f7fd;
}

    .ubox.recommend .icon {
        width: 64px;
        height: 64px;
    }

    .ubox.recommend h4, .ubox.recommend p {
        line-height: 2rem;
    }

.service {
    height: 500px;
}

    .service p {
        margin: 1.5rem 0;
    }

.u404, .u404 body {
    background: #f9fafb;
}

    .u404 h1 {
        color: #e5e7eb;
        font-size: 9.5rem;
        font-weight: 700;
    }

    .u404 .line {
        height: 4px;
        width: 100px;
        margin: 0 auto;
        border-radius: 4px;
        background: #3b82f6;
    }

    .u404 p {
        font-size: 1.2rem;
        line-height: 2.4rem;
    }

    .u404 .container {
        padding: 5rem 0;
    }

    .u404 .i1 {
        position: absolute;
        top: 8rem;
        left: 5rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background: #60a5fa;
        opacity: 0.4;
    }

    .u404 .i2 {
        position: absolute;
        top: 12rem;
        right: 8rem;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: #c084fc;
        opacity: 0.3;
    }

    .u404 .i3 {
        position: absolute;
        bottom: 10rem;
        left: 25%;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        border: 3px solid #34d399;
        opacity: 0.5;
    }

    .u404 .i4 {
        position: absolute;
        bottom: 8rem;
        right: 5rem;
        width: 3rem;
        height: 3rem;
        border-radius: 9999px;
        border: 4px solid #60a5fa;
        opacity: 0.3;
    }

    .u404 .i5 {
        position: absolute;
        top: 25%;
        left: 4rem;
        color: #d1d5db;
        font-size: 3.75rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0.2;
    }

    .u404 .i6 {
        position: absolute;
        top: 33.3333%;
        right: 6rem;
        color: #d1d5db;
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 2.5rem;
        opacity: 0.3;
    }

    .u404 .i7 {
        position: absolute;
        bottom: 25%;
        right: 33.3333%;
        color: #d1d5db;
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0.25;
    }