* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    background: #F5F6F7;
    color: #333;
}

.scorll-body {
    height: 150vh;
}

.main {
    opacity: 1;
    min-height: calc(100vh - 3rem);
    display: none;
}

.main-active {
    display: block;
    opacity: 0;
}

.main-content {
    max-width: 12rem;
    padding: 0 0.2rem;
    width: calc(100% - 0.4rem);
    margin: 0 auto;
    min-width: 300px;
}

.website-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: .8rem;
    background: rgba(255, 255, 255, 0);
    z-index: 100;
    font-size: 0;
    color: rgba(255, 255, 255, 0.8);
    transition: color, background 0.8s;
}

.website-header-fixed {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    color: #333;
}

.website-header-alpha {
    display: inline-block;
    padding: .22rem 0 0 .4rem;
    width: 1.92rem;
    font-size: 0;
}

.website-header-alpha .logo {
    width: 100%;
    height: calc(100% * 36 / 192);
}

.website-header-beta {
    float: right;
    padding: 0.18rem 0.2rem 0 0;
    font-size: 0;
    position: relative;
}

.website-header-beta .line-box {
    position: absolute;
    width: 0.72rem;
    height: 4px;
    padding: 0 0.2rem;
    left: 0;
    bottom: 0.15rem;
    z-index: -1;


}

.website-header-beta .line-animate {
    transition-property: transform;
    transition-duration: 0.5s;
}


.website-header-beta .line-move {
    width: 0.2rem;
    height: 4px;
    background: #fff;
    margin: 0 auto;
    transition-property: background;
    transition-duration: 0.5s;
}

.website-header-fixed .line-move {
    background: #0063B1;
}

.website-header-beta .menu-item {
    position: relative;
    display: inline-block;
    width: .72rem;
    height: 0.38rem;
    padding: 0.1rem 0.2rem 0.15rem;
    text-align: center;
    font-size: 0.18rem;
}

/* .website-header-beta .second-menu {
    cursor: default;
}
.website-header-beta .third-menu {
    cursor: default;
} */
.website-header-beta .menu-item .menu-dialog {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 4;
    opacity: 0;
    transform: translate(-50%, 0);
    /* transform-origin: top center; */

}

.menu-dialog-content {
    padding: 0.2rem 0.2rem 0.1rem;
    margin: 0.05rem 0 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.menu-dialog-content .cateogry-item .theme {
    font-size: .16rem;
    color: #0063B1;
    padding: 0 0 0.1rem;
}

.programme-dialog-content {
    width: 2.22rem;
}

.programme-dialog-content .cateogry-item:nth-child(1) {
    padding: 0 0 0.1rem;
}

.programme-dialog-content .cateogry-item .menu-item-second {
    display: inline-block;
}

.website-header-beta .menu-item .menu-dialog .menu-item-second {
    width: 1.06rem;
    height: .4rem;
    line-height: .4rem;
    background: #F6F8FA;
    font-size: 0.16rem;
    color: #666;
    margin: 0 0 0.1rem;
    cursor: pointer;
    transition: all 0.5s;
}

.programme-dialog-content .cateogry-item .odd-item {
    margin-right: 0.1rem !important;
}

.programme-dialog-content .finance-item {
    display: block !important;
    width: 2.22rem !important;
}

.website-header-beta .menu-item .menu-dialog .menu-item-second:hover {
    color: #fff;
    background: #0063B1;
}

.website-header-beta .menu-item .theme {
    white-space: nowrap;
}

.website-header-beta .line {
    width: 0.2rem;
    height: 4px;
    background: #fff;
    margin: 10px auto 0;
    display: none;
}

/* 点击选中 加粗 显示横线 */
.website-header-beta .active .theme {
    font-weight: bold;
}

.website-header-beta .active .line {
    display: block;
}

.website-header-fixed .active .line {
    background: #0063B1;
}

.website-header-beta .menu-item:hover>.theme {
    cursor: pointer;
    color: #fff;
    transition: all 0.5s;
}

.website-header-fixed .menu-item:hover>.theme {
    cursor: pointer;
    color: #0063B1;
    transition: all 0.5s;
}

.website-header-fixed .menu-item:hover {
    color: #0063B1;
}

/* .website-header-beta .menu-item:nth-child(2):hover > .menu-dialog {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s linear;
} */

/* .website-header-beta .menu-item:nth-child(3):hover > .menu-dialog {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s linear;
} */
.website-header-beta .second-menu:hover {
    cursor: default !important;
}

.website-header-beta .-menu:hover {
    cursor: default !important;
}

.website-header-beta .second-menu:hover .theme {
    cursor: default !important;
}

.website-header-beta .third-menu:hover .theme {
    cursor: default !important;
}

.website-header-beta .second-menu:hover>.menu-dialog {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s linear;
}

.website-header-beta .third-menu:hover>.menu-dialog {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s linear;
}

.website-header-beta .menu-active .theme {
    font-weight: bold;
    color: #fff;
    transition: all 0.5s;
}

.website-header-beta .menu-active .line {
    display: block;
    transition: all 0.5s;
}

.website-header-fixed .menu-active .theme {
    color: #0063B1;
}

.website-header-fixed .menu-active .line {
    background: #0063B1;
}

.page-fade-out {
    opacity: 0;
    animation: page-fade-out 1s;
}

.page-fade-in {
    opacity: 1;
    animation: page-fade-in 1s;
}

.blank {
    width: 100%;
}

.scroll-banner {
    position: fixed !important;
    left: 0;
    width: 100%;
    z-index: 1;
    top: 0.8rem;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform 0.7s cubic-bezier(0.05, .2, .1, 1);
}

.scroll-body {
    position: fixed !important;
    left: 0;
    width: 100%;
    z-index: 3;
    top: 4.76rem;
    transform: translate3d(0, 0, 0);
    background: #F5F6F7;
    will-change: transform;
    transition: all 0.7s cubic-bezier(0.05, .2, .1, 1);
}
/* .elastic-effect {
    transition: all 0.7s cubic-bezier(0.05, .2, .1, 1);
} */
.scroll-footer {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    top: 0;
}

.goTop {
    display: none;
    position: fixed;
    right: 0.6rem;
    bottom: 3.6rem;
    width: 0.6rem;
    height: 0.6rem;
    z-index: 101;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.5s;
}

.goTop:hover {
    background: #0063B1;
}

.goTop .arrow-top {
    width: 0.16rem;
    margin: 0.16rem auto 0;
    display: block;
    opacity: 0.6;
    transform: rotate(-90deg);
    transition: opacity 0.5s;
}

.goTop:hover .arrow-top {
    opacity: 1;
}

@keyframes page-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes page-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        display: block;
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: block;
    }
}