#tabItem[data-v-886dad0d] {
    position: relative
}

#tabItem .tab-item-icon[data-v-886dad0d] {
    position: relative;
    width: 24px;
    height: 24px
}

#tabItem .tab-item-label[data-v-886dad0d] {
    width: 100%;
    text-align: center;
    position: relative
}

#tabItem.active[data-v-886dad0d] {
    color: var(--btn-text)
}

#tabItem[data-v-f394e2f4] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-f394e2f4] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-icon.big[data-v-f394e2f4] {
    font-size: 30px;
    height: 40px
}

#tabItem .tab-item-label[data-v-f394e2f4] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-f394e2f4] {
    color: var(--primary)
}

#tabItem[data-v-0e75ed2c] {
    position: relative
}

#tabItem .icon[data-v-0e75ed2c] {
    margin-top: -4px
}

#tabItem.active[data-v-0e75ed2c] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-label[data-v-0e75ed2c],
#tabItem[data-v-756f5b1f] {
    position: relative
}

#tabItem .icon[data-v-756f5b1f] {
    margin-top: -4px
}

#tabItem.active[data-v-756f5b1f] {
    color: #000
}

#tabItem.active .tab-item-label[data-v-756f5b1f] {
    position: relative
}

#tabItem[data-v-37cf0aa6] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-37cf0aa6] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-label[data-v-37cf0aa6] {
    position: relative;
    font-size: 12px;
    text-align: center
}

#tabItem.active[data-v-37cf0aa6] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-37cf0aa6] {
    width: 100%
}

#tabItem[data-v-16e26287] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-16e26287] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-label[data-v-16e26287] {
    position: relative;
    font-size: 12px;
    text-align: center
}

#tabItem.active[data-v-16e26287] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-16e26287] {
    width: 100%
}

#tabItem[data-v-0377266e] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-0377266e] {
    position: relative;
    font-size: 25px;
    height: 25px
}

#tabItem .tab-item-label[data-v-0377266e] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-0377266e] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-0377266e] {
    width: 100%;
    position: relative;
    z-index: 1
}

#tabItem[data-v-dd1d02fd] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-dd1d02fd] {
    position: relative;
    font-size: 25px;
    height: 25px
}

#tabItem .tab-item-label[data-v-dd1d02fd] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-dd1d02fd] {
    color: var(--btn-text)
}

#tabItem.active[data-v-dd1d02fd]:after {
    position: absolute;
    content: "";
    background: var(--primary-light) !important;
    border-radius: 50%;
    top: 5px;
    right: calc(50% - 12px);
    width: 20px;
    height: 20px;
    opacity: .5
}

#tabItem.active .tab-item-icon[data-v-dd1d02fd] {
    width: 100%;
    position: relative;
    z-index: 1
}

#tabItem[data-v-9c3707af] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-9c3707af] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-label[data-v-9c3707af] {
    position: relative;
    font-size: 12px;
    text-align: center
}

#tabItem.active[data-v-9c3707af] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-9c3707af] {
    width: 100%
}

#tabItem[data-v-fbf82ebd] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-fbf82ebd] {
    position: relative;
    font-size: 22px;
    height: 22px;
    width: 22px
}

#tabItem .tab-item-label[data-v-fbf82ebd] {
    position: relative;
    font-size: 12px;
    text-align: center
}

#tabItem.active[data-v-fbf82ebd] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-fbf82ebd] {
    width: 100%
}

#tabItem.active[data-v-fbf82ebd]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-card)
}

#tabItem[data-v-c637b856] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-img[data-v-c637b856] {
    position: relative;
    font-size: 22px;
    height: 22px;
    width: 100%
}

#tabItem .tab-item-img img[data-v-c637b856] {
    margin: 0 auto;
    width: 22px;
    height: 22px
}

#tabItem .label[data-v-c637b856] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-c637b856] {
    color: var(--btn-text)
}

#tabItem.active[data-v-c637b856]:after {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -17px;
    content: "";
    width: 35px;
    height: 4px;
    border-radius: 0 0 20px 20px;
    background: var(--btn-text)
}

#tabItem[data-v-4892a09d] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-4892a09d] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-label[data-v-4892a09d] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-4892a09d] {
    color: var(--primary)
}

#tabItem[data-v-52a97983] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-52a97983] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-label[data-v-52a97983] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-52a97983] {
    color: var(--btn-text)
}

#tabItem.active[data-v-52a97983]:after {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -17px;
    content: "";
    width: 35px;
    height: 4px;
    border-radius: 0 0 20px 20px;
    background: var(--btn-text)
}

#tabItem[data-v-d2e1d203] {
    position: relative;
    display: flex;
    align-items: center
}

#tabItem .tab-item-icon[data-v-d2e1d203] {
    position: relative;
    font-size: 22px;
    height: 22px
}

#tabItem .tab-item-icon.big[data-v-d2e1d203] {
    font-size: 30px;
    height: 40px
}

#tabItem .tab-item-label[data-v-d2e1d203] {
    position: relative;
    font-size: 13px;
    text-align: center
}

#tabItem.active[data-v-d2e1d203] {
    color: var(--primary)
}

#tabItem[data-v-4bb2d86e] {
    position: relative
}

#tabItem.active[data-v-4bb2d86e] {
    color: var(--primary)
}

#tabItem.active[data-v-4bb2d86e]:after {
    content: "";
    position: absolute;
    top: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bg-card);
    background: var(--bg);
    box-shadow: var(--box-shadow)
}

#tabItem.active .tab-item-icon[data-v-4bb2d86e] {
    position: relative;
    z-index: 1;
    color: var(--primary);
    margin-top: -6px;
    margin-bottom: 6px
}

#tabItem.active .tab-item-label[data-v-4bb2d86e] {
    position: relative;
    margin-top: 3px
}

#tabItem[data-v-7ea59e9b] {
    position: relative
}

#tabItem.active[data-v-7ea59e9b] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-7ea59e9b],
#tabItem.active .tab-item-label[data-v-7ea59e9b],
#tabItem[data-v-05593d5b] {
    position: relative
}

#tabItem.active[data-v-05593d5b] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-05593d5b],
#tabItem.active .tab-item-label[data-v-05593d5b] {
    position: relative
}

#tabItem.active[data-v-05593d5b]:before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    margin-top: -24px;
    left: 50%;
    margin-left: -24px;
    background: var(--primary);
    opacity: .25;
    border-radius: 8px
}

#tabItem[data-v-e13355f4] {
    position: relative;
    color: #ffffff80
}

#tabItem.active[data-v-e13355f4] {
    color: var(--text-white)
}

#tabItem.active .tab-item-icon[data-v-e13355f4] {
    position: relative;
    color: var(--text-white)
}

#tabItem.active .tab-item-label[data-v-e13355f4] {
    position: relative
}

#tabItem.active.c-5[data-v-e13355f4],
#tabItem.active.c-3[data-v-e13355f4],
#tabItem.active.c-5 .tab-item-icon[data-v-e13355f4],
#tabItem.active.c-3 .tab-item-icon[data-v-e13355f4] {
    color: #000
}

#tabItem.c-5[data-v-e13355f4],
#tabItem.c-3[data-v-e13355f4],
#tabItem.c-5 .tab-item-icon[data-v-e13355f4],
#tabItem.c-3 .tab-item-icon[data-v-e13355f4] {
    color: #00000080
}

#tabItem .tab-item-icon[data-v-e13355f4] {
    position: relative;
    color: #ffffff80
}

#tabItem[data-v-eb1aa3e2] {
    position: relative
}

#tabItem .tab-item-label[data-v-eb1aa3e2] {
    margin-top: 4px;
    color: #bbb
}

#tabItem .tab-item-icon[data-v-eb1aa3e2] {
    color: #bbb
}

#tabItem.active .tab-item-icon[data-v-eb1aa3e2] {
    position: relative;
    color: var(--text-black)
}

#tabItem.active .tab-item-label[data-v-eb1aa3e2] {
    position: relative;
    color: var(--btn-text)
}

#tabItem[data-v-68820e20] {
    position: relative;
    color: #ffffff80
}

#tabItem .tab-item-icon[data-v-68820e20] {
    color: #ffffff80
}

#tabItem .tab-item-label[data-v-68820e20] {
    margin-top: 2px
}

#tabItem.active[data-v-68820e20] {
    color: #fff
}

#tabItem.active .tab-item-icon[data-v-68820e20] {
    position: relative;
    color: #fff
}

#tabItem.active .tab-item-label[data-v-68820e20],
#tabItem[data-v-f08f8406] {
    position: relative
}

#tabItem.active[data-v-f08f8406] {
    color: var(--primary)
}

#tabItem.active[data-v-f08f8406]:after {
    content: "";
    position: absolute;
    top: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid var(--text-white);
    background: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-f08f8406] {
    position: relative;
    z-index: 1;
    color: var(--text-white);
    margin-top: -6px;
    margin-bottom: 6px
}

#tabItem.active .tab-item-label[data-v-f08f8406],
#tabItem[data-v-be83d529] {
    position: relative
}

#tabItem.active[data-v-be83d529] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-be83d529],
#tabItem.active .tab-item-label[data-v-be83d529] {
    position: relative
}

#tabItem.active[data-v-be83d529]:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    top: -10px;
    left: 50%;
    margin-left: -12px;
    background: var(--primary);
    border-radius: 9px
}

#tabItem[data-v-5483205b] {
    position: relative
}

#tabItem .tab-item-label[data-v-5483205b] {
    margin-top: 4px;
    color: #bbb
}

#tabItem .tab-item-icon[data-v-5483205b] {
    color: #bbb
}

#tabItem.active .tab-item-icon[data-v-5483205b] {
    position: relative;
    color: var(--text-black)
}

#tabItem.active .tab-item-label[data-v-5483205b] {
    position: relative;
    color: var(--btn-text2)
}

#tabItem.active[data-v-5483205b]:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: -5px;
    left: 50%;
    margin-left: -15px;
    background: var(--btn-light2);
    border-radius: 50%
}

#tabItem[data-v-e000d3f4] {
    position: relative;
    color: #ffffff80
}

#tabItem .tab-item-icon[data-v-e000d3f4] {
    color: #ffffff80
}

#tabItem .tab-item-label[data-v-e000d3f4] {
    margin-top: 2px
}

#tabItem.active[data-v-e000d3f4] {
    color: #fff
}

#tabItem.active .tab-item-icon[data-v-e000d3f4] {
    position: relative;
    color: #fff
}

#tabItem.active .tab-item-label[data-v-e000d3f4] {
    position: relative
}

#tabItem[data-v-6402e93f] {
    position: relative;
    color: #ffffff80
}

#tabItem.active[data-v-6402e93f] {
    color: var(--text-white)
}

#tabItem.active .tab-item-icon[data-v-6402e93f] {
    position: relative;
    color: var(--text-white)
}

#tabItem.active .tab-item-label[data-v-6402e93f] {
    position: relative
}

#tabItem .tab-item-icon[data-v-6402e93f] {
    position: relative;
    color: #ffffff80
}

#tabItem[data-v-292d816e] {
    position: relative
}

#tabItem .tab-item-label[data-v-292d816e] {
    position: relative;
    line-height: 12px;
    text-align: center
}

#tabItem.active[data-v-292d816e] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-292d816e],
#tabItem.active .tab-item-label[data-v-292d816e] {
    position: relative
}

#tabItem.active[data-v-292d816e]:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, .4);
    transform: rotate(180deg)
}

#tabItem[data-v-e26f19fc] {
    position: relative
}

#tabItem.active[data-v-e26f19fc] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-e26f19fc] {
    position: relative;
    color: var(--btn-text)
}

#tabItem.active .tab-item-label[data-v-e26f19fc],
#tabItem[data-v-7c26511b] {
    position: relative
}

#tabItem.active[data-v-7c26511b] {
    color: var(--tab-active)
}

#tabItem.active .tab-item-icon[data-v-7c26511b] {
    position: relative;
    color: var(--tab-active)
}

#tabItem.active .tab-item-label[data-v-7c26511b],
#tabItem6[data-v-5d7358fd] {
    position: relative
}

#tabItem6.active[data-v-5d7358fd] {
    color: var(--btn-text2)
}

#tabItem6.active .tab-item-icon[data-v-5d7358fd],
#tabItem6.active .tab-item-label[data-v-5d7358fd],
#tabItem[data-v-f3982708] {
    position: relative
}

#tabItem.active[data-v-f3982708] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-f3982708],
#tabItem.active .tab-item-label[data-v-f3982708] {
    position: relative
}

#tabItem.active[data-v-f3982708]:before {
    content: "";
    position: absolute;
    width: 48px;
    height: 55px;
    top: -10px;
    left: 50%;
    margin-left: -24px;
    background: var(--bg-card)
}

#tabItem[data-v-28fc348e] {
    position: relative
}

#tabItem .tab-item-label[data-v-28fc348e] {
    margin-top: 4px
}

#tabItem.active[data-v-28fc348e] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-28fc348e],
#tabItem.active .tab-item-label[data-v-28fc348e] {
    position: relative
}

#tabItem.active[data-v-28fc348e]:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: -5px;
    left: 50%;
    margin-left: -15px;
    background: var(--btn-light);
    border: 1px solid var(--primary);
    opacity: .4;
    border-radius: 50%
}

#tabItem[data-v-d22add7c] {
    position: relative
}

#tabItem.active[data-v-d22add7c] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-d22add7c],
#tabItem.active .tab-item-label[data-v-d22add7c] {
    position: relative
}

#tabItem.active[data-v-d22add7c]:after {
    content: "";
    position: absolute;
    width: 48px;
    height: 2px;
    top: -10px;
    left: 50%;
    margin-left: -24px;
    background: var(--primary);
    border-radius: 8px
}

#tabItem[data-v-768ed7e1] {
    position: relative
}

#tabItem.active[data-v-768ed7e1] {
    color: var(--primary)
}

#tabItem.active .tab-item-icon[data-v-768ed7e1],
#tabItem.active .tab-item-label[data-v-768ed7e1] {
    position: relative
}

#tabItem.active[data-v-768ed7e1]:before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    margin-top: -24px;
    left: 50%;
    margin-left: -24px;
    background: var(--primary);
    opacity: .25;
    border-radius: 8px
}

#tabItem[data-v-035dc607] {
    position: relative
}

#tabItem.active[data-v-035dc607] {
    color: var(--btn-text)
}

#tabItem.active .tab-item-icon[data-v-035dc607],
#tabItem.active .tab-item-label[data-v-035dc607] {
    position: relative
}

#tabItem.active[data-v-035dc607]:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
    background: var(--bg-card);
    opacity: .8;
    border-radius: 50%
}

.tab-bar-wrap {
    z-index: 1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 55px
}

.tab-bar-wrap .tab-bar {
    width: 720px;
    height: 100%;
    display: flex;
    background: var(--bg-tab);
    border-left: none;
    border-right: none
}

.tab-bar-wrap .tab-bar .tab-item {
    width: var(--5a111c98);
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.tab-bar-wrap .tab-bar .tab-item .tab-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--text-gray);
    position: relative
}

.tab-bar-wrap .tab-bar .tab-item .tab-item-inner .tab-item-icon {
    width: 100%;
    flex-shrink: 0;
    height: 20px;
    display: flex;
    justify-content: center;
    font-size: 20px
}

.tab-bar-wrap .tab-bar .tab-item .tab-item-inner .tab-item-label {
    line-height: 14px;
    font-size: 12px
}

.tab-bar-wrap .tab-bar .tab-item .active {
    height: 100%;
    color: var(--primary)
}

#navBarItem21 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

#navBarItem21 .no-login-part .base-help-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 5px
}

#navBarItem21 .base-lang-wrap {
    background: var(--bg-card);
    border-radius: 5px;
    margin-right: 0;
    padding: 4px 8px 4px 6px
}

#navBarItem21 .left {
    position: relative;
    z-index: 1
}

#navBarItem21 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem21 .name {
    color: var(--btn-text);
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem21 .name .small-logo {
    margin-right: 5px;
    max-width: 40px;
    max-height: 40px;
    flex-shrink: 0
}

#navBarItem21 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

#navBarItem32 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 50px
}

#navBarItem32 .left {
    position: relative;
    z-index: 1
}

#navBarItem32 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem32 .name {
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem32 .name .small-logo {
    margin-right: 5px;
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    flex-shrink: 0
}

#navBarItem32 .name .small-logo .site-img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#navBarItem32 .base-help-btn,
#navBarItem32 .base-alarm-logo-btn,
#navBarItem32 .base-lang-wrap {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem32 .base-help-btn svg,
#navBarItem32 .base-alarm-logo-btn svg,
#navBarItem32 .base-lang-wrap svg {
    font-size: 18px
}

#navBarItem32 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem31 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 50px
}

#navBarItem31 .left {
    position: relative;
    z-index: 1
}

#navBarItem31 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem31 .name {
    color: var(--primary);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem31 .name .small-logo {
    margin-right: 5px;
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    flex-shrink: 0
}

#navBarItem31 .name .small-logo .site-img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#navBarItem31 .base-help-btn,
#navBarItem31 .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem31 .base-help-btn svg,
#navBarItem31 .base-alarm-logo-btn svg {
    font-size: 18px
}

#navBarItem31 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem20 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 0 10px
}

#navBarItem20 .left {
    position: relative;
    z-index: 1
}

#navBarItem20 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem20 .name {
    color: var(--text-white);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem20 .name .small-logo {
    margin-right: 5px;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0
}

#navBarItem20 .name .small-logo .site-img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#navBarItem20 .base-help-btn,
#navBarItem20 .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem20 .base-help-btn svg,
#navBarItem20 .base-alarm-logo-btn svg {
    font-size: 18px
}

#navBarItem20 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem20 .base-lang-wrap {
    padding: 0 6px;
    border-radius: 15px 0 0 15px
}

#navBarItem20 .base-lang-wrap span {
    display: block;
    max-width: 58px;
    line-height: 12px
}

#navBarItem19 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px
}

#navBarItem19 .left {
    position: relative;
    z-index: 1
}

#navBarItem19 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem19 .name {
    color: var(--text-white);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem19 .name .small-logo {
    margin-right: 5px;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0
}

#navBarItem19 .name .small-logo .site-img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#navBarItem19 .base-help-btn,
#navBarItem19 .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem19 .base-help-btn svg,
#navBarItem19 .base-alarm-logo-btn svg {
    font-size: 18px
}

#navBarItem19 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem19 .base-lang-wrap {
    padding: 0 6px;
    border-radius: 15px
}

#navBarItem19 .base-lang-wrap span {
    display: block;
    max-width: 58px;
    line-height: 12px
}

#navBarItem18 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 0 10px
}

#navBarItem18 .left {
    position: relative;
    z-index: 1
}

#navBarItem18 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem18 .name {
    color: var(--text-white);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem18 .name .small-logo {
    margin-right: 5px;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0
}

#navBarItem18 .name .small-logo .site-img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#navBarItem18 .base-help-btn,
#navBarItem18 .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem18 .base-help-btn svg,
#navBarItem18 .base-alarm-logo-btn svg {
    font-size: 18px
}

#navBarItem18 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem18 .base-lang-wrap {
    padding: 0 6px;
    border-radius: 15px 0 0 15px
}

#navBarItem18 .base-lang-wrap span {
    display: block;
    max-width: 58px;
    line-height: 12px
}

#navBarItem16 {
    position: relative
}

#navBarItem16 .left {
    position: relative;
    z-index: 1;
    margin-right: 0
}

#navBarItem16 .left .base-help-btn {
    margin-right: 8px
}

#navBarItem16 .left .base-help-btn svg {
    color: var(--btn-text2)
}

#navBarItem16 .left .base-alarm-logo-btn svg {
    color: var(--btn-text2)
}

#navBarItem16 .right {
    position: relative;
    z-index: 1
}

#navBarItem16 .right .base-lang-wrap {
    border-radius: 38px
}

#navBarItem16 .name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin-left: -12px;
    color: var(--btn-text2);
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

#navBarItem16 .name .small-logo {
    margin-right: 5px;
    max-width: 32px;
    max-height: 32px
}

#navBarItem16 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

#navBarItem15 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

#navBarItem15 .left {
    position: relative;
    z-index: 1
}

#navBarItem15 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem15 .name {
    color: var(--btn-text2);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700
}

#navBarItem14 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px
}

#navBarItem14 .left {
    position: relative;
    z-index: 1
}

#navBarItem14 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem14 .name {
    color: var(--text-white);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem14 .name .small-logo {
    margin-right: 5px;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0
}

#navBarItem14 .name .small-logo .site-img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#navBarItem14 .base-help-btn,
#navBarItem14 .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem14 .base-help-btn svg,
#navBarItem14 .base-alarm-logo-btn svg {
    font-size: 18px
}

#navBarItem14 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem13 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px
}

#navBarItem13.is-mine .name,
#navBarItem13.is-mine .base-lang-wrap {
    color: var(--text-white)
}

#navBarItem13 .left {
    position: relative;
    z-index: 1
}

#navBarItem13 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem13 .name {
    color: var(--btn-text);
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1
}

#navBarItem13 .name .small-logo {
    margin-right: 5px;
    flex-shrink: 0
}

#navBarItem13 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

#navBarItem13 .base-lang-wrap {
    margin-right: -20px
}

#navBarItem13 .base-help-btn,
#navBarItem13 .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight)
}

#navBarItem13 .base-help-btn svg,
#navBarItem13 .base-alarm-logo-btn svg {
    font-size: 18px
}

#navBarItem13 .base-alarm-logo-btn svg {
    font-size: 14px
}

#navBarItem12 {
    position: relative
}

#navBarItem12 .left {
    position: relative;
    z-index: 1;
    margin-right: 0
}

#navBarItem12 .left .base-help-btn {
    margin-right: 8px;
    box-shadow: var(--inner-shadow)
}

#navBarItem12 .left .base-help-btn svg {
    color: var(--btn-text2)
}

#navBarItem12 .left .base-alarm-logo-btn {
    box-shadow: var(--inner-shadow)
}

#navBarItem12 .left .base-alarm-logo-btn svg {
    color: var(--btn-text2)
}

#navBarItem12 .right {
    position: relative;
    z-index: 1
}

#navBarItem12 .right .base-lang-wrap {
    box-shadow: var(--inner-shadow);
    border-radius: 38px
}

#navBarItem12 .name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin-left: -12px;
    color: var(--btn-text2);
    font-size: 60px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

#navBarItem12 .name .small-logo {
    margin-right: 5px;
    width: calc(var(--4a5bf3ef));
    height: calc(var(--4a5bf3ef));
    max-width: 40px;
    max-height: 40px
}

#navBarItem12 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

#navBarItem11.no-logo .left {
    opacity: 0
}

#navBarItem11 .base-help-btn {
    width: 32px;
    height: 32px
}

#navBarItem11 .right {
    position: relative;
    z-index: 4
}

#navBarItem9 {
    position: relative
}

#navBarItem9 .left {
    position: relative;
    z-index: 1;
    margin-right: 0
}

#navBarItem9 .left .base-help-btn {
    margin-right: 8px;
    border: 1px solid var(--border-color)
}

#navBarItem9 .left .base-help-btn .svg-icon {
    color: var(--text-nav) !important
}

#navBarItem9 .left .base-alarm-logo-btn {
    border: 1px solid var(--border-color)
}

#navBarItem9 .left .base-alarm-logo-btn .svg-icon {
    color: var(--text-nav) !important
}

#navBarItem9 .right {
    position: relative;
    z-index: 1
}

#navBarItem9 .right .base-lang-wrap {
    border-radius: var(--btn-radius);
    background: var(--bg-nav);
    border: 1px solid var(--text-nav);
    color: var(--text-nav) !important;
    padding: 0 6px
}

#navBarItem9 .right .base-lang-wrap span {
    display: block;
    max-width: 48px;
    line-height: 12px
}

#navBarItem9 .name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: var(--text-nav);
    font-size: 60px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 30px
}

#navBarItem9 .name .small-logo {
    margin-right: 5px;
    width: calc(var(--74b9c13a));
    height: calc(var(--74b9c13a));
    max-width: 40px;
    max-height: 40px
}

#navBarItem9 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

#navBarItem8 {
    position: relative
}

#navBarItem8 .left {
    position: relative;
    z-index: 1;
    margin-right: 0
}

#navBarItem8 .left .base-help-btn {
    margin-right: 8px;
    border: 1px solid var(--btn-text)
}

#navBarItem8 .left .base-help-btn .svg-icon {
    color: var(--btn-text4) !important
}

#navBarItem8 .left .base-alarm-logo-btn {
    border: 1px solid var(--btn-text)
}

#navBarItem8 .left .base-alarm-logo-btn .svg-icon {
    color: var(--btn-text4) !important
}

#navBarItem8 .right {
    position: relative;
    z-index: 1
}

#navBarItem8 .right .base-lang-wrap {
    border-radius: var(--btn-radius);
    background: var(--bg-weight);
    border: 1px solid var(--btn-text);
    color: var(--btn-text4) !important;
    padding: 0 6px
}

#navBarItem8 .right .base-lang-wrap span {
    display: block;
    max-width: 48px;
    line-height: 12px
}

#navBarItem8 .name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: var(--bg-weight);
    font-size: 60px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 30px
}

#navBarItem8 .name .small-logo {
    margin-right: 5px;
    width: calc(var(--73a779c1));
    height: calc(var(--73a779c1));
    max-width: 40px;
    max-height: 40px
}

#navBarItem8 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

.nav-bar-item7.no-bg .left {
    background: transparent !important
}

.nav-bar-item7.no-bg .right {
    margin-right: -10px
}

.nav-bar-item7.no-bg .right .base-alarm-logo-btn,
.nav-bar-item7.no-bg .right .base-help-btn,
.nav-bar-item7.no-bg .right .base-lang-wrap {
    background: transparent !important
}

.nav-bar-item7 .left {
    background: rgba(0, 0, 0, .5) !important;
    color: var(--text-white) !important;
    border-radius: 100px var(--card-radius) var(--card-radius) 100px;
    margin-right: 0;
    padding-right: 8px
}

.nav-bar-item7 .left .base-logo img {
    border-radius: 10px
}

.nav-bar-item7 .left .name {
    color: var(--text-white) !important
}

.nav-bar-item7 .base-alarm-logo-btn,
.nav-bar-item7 .base-help-btn {
    border-radius: 0 !important;
    background: rgba(0, 0, 0, .5) !important;
    color: var(--text-white) !important
}

.nav-bar-item7 .base-lang-wrap span {
    display: block;
    max-width: 48px;
    line-height: 12px
}

#navBarItem6 .left {
    flex: 1;
    min-width: none
}

#navBarItem6 .left .name {
    flex: 1;
    color: var(--text-site)
}

#navBarItem6 .right {
    flex-shrink: 0
}

#navBarItem6 .right .base-alarm-logo-btn,
#navBarItem6 .right .base-help-btn {
    background: transparent
}

#navBarItem6 .right .base-alarm-logo-btn svg,
#navBarItem6 .right .base-help-btn svg {
    color: var(--btn-text2)
}

#navBarItem6 .right .base-alarm-logo-btn {
    margin-right: 2px
}

#navBarItem6 .right .base-help-btn {
    margin-right: 0
}

#navBarItem6 .right .base-lang-wrap {
    padding-right: 9px
}

#navBarItem5 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

#navBarItem5 .left {
    position: relative;
    z-index: 1
}

#navBarItem5 .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

#navBarItem5 .name {
    color: var(--btn-text2);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700
}

#navBarItem2 {
    position: relative
}

#navBarItem2 .left {
    position: relative;
    z-index: 1;
    margin-right: 0
}

#navBarItem2 .left .base-help-btn {
    margin-right: 8px
}

#navBarItem2 .right {
    position: relative;
    z-index: 1
}

#navBarItem2 .name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: var(--btn-text2);
    font-size: 60px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

#navBarItem2 .name .small-logo {
    margin-right: 5px;
    width: calc(var(--581816f6));
    height: calc(var(--581816f6));
    max-width: 40px;
    max-height: 40px
}

#navBarItem2 .name .small-logo .site-img {
    width: 100%;
    height: 100%
}

.nav-bar-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mg) 0;
    transition: padding .2s;
    box-sizing: border-box
}

.nav-bar-wrap.is-scroll-state {
    padding: 10px 0;
    overflow: hidden
}

.nav-bar-wrap:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    width: 100%;
    max-width: 720px;
    height: 100%;
    background: var(--bg-tab);
    opacity: var(--4142284f);
    transition: opacity .3s
}

.nav-bar-wrap .nav-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    height: 100%
}

.nav-bar-wrap .nav-bar .nav-bar-content {
    padding: 0 var(--mg);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.nav-bar-wrap .nav-bar .nav-bar-content .left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px
}

.nav-bar-wrap .nav-bar .nav-bar-content .base-logo {
    width: 32px;
    height: 32px;
    margin-right: 6px
}

.nav-bar-wrap .nav-bar .nav-bar-content .name {
    color: var(--btn-text);
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.nav-bar-wrap .nav-bar .nav-bar-content .base-help-btn,
.nav-bar-wrap .nav-bar .nav-bar-content .base-alarm-logo-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-weight);
    margin-right: 8px
}

.nav-bar-wrap .nav-bar .nav-bar-content .base-help-btn svg,
.nav-bar-wrap .nav-bar .nav-bar-content .base-alarm-logo-btn svg {
    font-size: 18px
}

.nav-bar-wrap .nav-bar .nav-bar-content .base-alarm-logo-btn svg {
    font-size: 14px
}

.nav-bar-wrap .nav-bar .nav-bar-content .right {
    display: flex;
    align-items: center
}

.nav-bar-wrap .nav-bar .nav-bar-content .right .base-help-btn {
    margin-right: 12px
}

.layout-tab-bar[data-v-2d156be6] {
    padding-top: calc(45px + var(--mg))
}