@charset "UTF-8";

body,
html {
    font-size: 100px
}

#app {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
    cursor: url("../image/鼠标@1x.png"), default
}

#app::-webkit-scrollbar {
    width: 0 !important
}

.fullpage {
    height: 0;
    overflow: hidden;
    position: relative;
    touch-action: none;
    transform: translate3d(0, 0, 0);
    transition: all .5s cubic-bezier(.7, .04, .51, .8) 0s;
    left: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform-style: preserve-3d;
    transform-origin: center center
}

.container {
    position: relative
}

.container .content {
    width: 83.3%;
    height: 100%;
    margin: 0 auto;
    position: relative
}

.item1 .title {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
    font-size: 1.03rem;
    text-align: center
}

.item2 .content div {
    position: absolute;
    font-size: .20rem;
    font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
    line-height: .4rem;
    opacity: 0
}

.item2 .content div:first-child {
    top: 2.82rem;
    transition: all .8s ease-in .2s
}

.item2 .active div:first-child {
    top: 1.42rem
}

.item2 .content div:nth-child(2) {
    top: 3.06rem;
    transition: all .8s ease-in .5s
}

.item2 .active div:nth-child(2) {
    top: 2.4rem
}

.item2 .content div:nth-child(3) {
    top: 5.1rem;
    transition: all .8s ease-in .8s
}

.item2 .active div:nth-child(3) {
    top: 3.8rem
}

.item2 .content div:nth-child(4) {
    top: 7.35rem;
    transition: all .8s ease-in 1.1s
}

.item2 .active div:nth-child(4) {
    top: 4.8rem
}

.item2 .active div {
    opacity: 1
}

.item3 .content,
.item4 .content,
.item5 .content,
.item6 .content,
.item7 .content {
    display: flex;
    justify-content: space-between
}

.item3 .content .left,
.item4 .content .left,
.item5 .content .left,
.item6 .content .left,
.item7 .content .left {
    position: absolute;
    top: 1.18rem;
    color: #af1e2d;
    left: 0;
    opacity: 0
}

.item3 .content .left i,
.item4 .content .left i,
.item5 .content .left i,
.item6 .content .left i,
.item7 .content .left i {
    height: .63rem;
    font-size: .63rem;
    display: block
}

.item3 .content .left div,
.item4 .content .left div,
.item5 .content .left div,
.item6 .content .left div,
.item7 .content .left div {
    font-family: FZLTZHUNHJW--GB1-0, FZLTZHUNHJW--GB1;
    font-size: .32rem;
    margin-top: .18rem;
    line-height: .38rem;
    height: .42rem
}

.item3 .content .left div span:first-child,
.item4 .content .left div span:first-child,
.item5 .content .left div span:first-child,
.item6 .content .left div span:first-child,
.item7 .content .left div span:first-child {
    padding-right: .16rem;
    margin-right: .16rem;
    position: relative
}

.item3 .content .left div span:first-child::after,
.item4 .content .left div span:first-child::after,
.item5 .content .left div span:first-child::after,
.item6 .content .left div span:first-child::after,
.item7 .content .left div span:first-child::after {
    content: "";
    width: .02rem;
    height: .37rem;
    background: #af1e2d;
    right: 0;
    top: .03rem;
    position: absolute
}

.item3 .content .right,
.item4 .content .right,
.item5 .content .right,
.item6 .content .right,
.item7 .content .right {
    position: absolute;
    right: 0;
    top: 1.18rem;
    width: 2.5rem;
    height: 1.2rem;
    color: #af1e2d;
    text-align: center;
    line-height: 1.2rem;
    font-size: .84rem;
    border-radius: .68rem;
    border: .08rem solid #af1e2d;
    font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1;
    opacity: 0
}

.item3 .content .play,
.item4 .content .play,
.item5 .content .play,
.item6 .content .play,
.item7 .content .play {
    display: block;
    position: absolute;
    width: .86rem;
    height: .86rem;
    bottom: .88rem;
    right: 0;
    opacity: 1;
    transform: scale(1);
    border-radius: 50%;
    transition: all .3s
}

.item3 .content .play:hover,
.item4 .content .play:hover,
.item5 .content .play:hover,
.item6 .content .play:hover,
.item7 .content .play:hover {
    cursor: url("../image/手指@1x.png"), default;
    transform: scale(1.2)
}

.item3 .content .fadeOut,
.item4 .content .fadeOut,
.item5 .content .fadeOut,
.item6 .content .fadeOut,
.item7 .content .fadeOut {
    animation: fadeOut .3s ease-out .2s forwards
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.item4 .content .left {
    color: #46b4e6
}

.item4 .content .left div span:first-child::after {
    background: #46b4e6
}

.item4 .content .right {
    color: #46b4e6;
    border-color: #46b4e6
}

.item5 .content .left {
    color: #000
}

.item5 .content .left div {
    font-size: .32rem;
    font-family: FZLTZHUNHJW--GB1-0, FZLTZHUNHJW--GB1;
    font-weight: 400;
    color: #000;
    line-height: 38px;
    margin: 0
}

.item5 .content .right {
    color: #000;
    border-color: #000
}

.item6 .content .left,
.item7 .content .left {
    color: #000
}

.item6 .content .left div,
.item7 .content .left div {
    font-size: .32rem;
    font-family: FZLTZHUNHJW--GB1-0, FZLTZHUNHJW--GB1;
    font-weight: 400;
    color: #000;
    line-height: 38px;
    margin: 0
}

.item6 .content .left div span::after,
.item7 .content .left div span::after {
    display: none
}

.item6 .content .left div span:nth-child(2),
.item7 .content .left div span:nth-child(2) {
    margin-top: 38px
}

.item6 .content .right,
.item7 .content .right {
    color: #000;
    border-color: #000
}

.item6 .bg,
.item7 .bg {
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

@keyframes downIn {
    0% {
        opacity: 0;
        bottom: 116px
    }

    100% {
        opacity: 1;
        bottom: 46px
    }
}

@keyframes leftOut {
    0% {
        opacity: 1;
        left: 0
    }

    100% {
        opacity: 0;
        left: -100px
    }
}

@keyframes rightOut {
    0% {
        opacity: 1;
        left: 0
    }

    100% {
        opacity: 0;
        left: 200px
    }
}

.item8 .content {
    padding-top: 6.15%;
    box-sizing: border-box;
    position: relative
}

.item8 .content>div {
    width: 100%
}

.item8 .content .link {
    width: 84px;
    height: 84px;
    position: absolute;
    bottom: 134px;
    right: 0
}

.item8 .content .link img {
    width: 100%;
    height: 100%
}

.item8 .content .title {
    line-height: .38rem;
    color: #000;
    position: relative;
    display: flex
}

.item8 .content .title p {
    width: 44%;
    height: .04rem;
    background-color: #000;
    margin-top: .17rem
}

.item8 .content .title span {
    display: block;
    width: 1.8rem;
    height: .38rem;
    font-size: .32rem;
    text-align: center
}

.item8 .content .shopLeft .shop .box {
    width: 100%;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
    padding: .1rem 0 .5rem 0
}

.item8 .content .shopLeft .shop .box .prev {
    background: 0 0;
    cursor: url(../image/手指@1x.png), default;
    width: 31px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 9;
    transition: all .3s;
    opacity: 0
}

.item8 .content .shopLeft .shop .box .button {
    opacity: 0
}

.item8 .content .shopLeft .shop .box .button img {
    width: 100%;
    height: 100%;
    opacity: .4;
    transition: all .3s
}

.item8 .content .shopLeft .shop .box .button img:hover {
    opacity: 1
}

.item8 .content .shopLeft .shop .box .next {
    background: 0 0;
    cursor: url(../image/手指@1x.png), default;
    width: 31px;
    height: 54px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9;
    transition: all .3s
}

.item8 .content .shopLeft .shop .box .lists {
    width: 400%;
    height: 2.6rem;
    position: relative;
    transition: all .8s ease-in;
    overflow: hidden
}

.item8 .content .shopLeft .shop .box .lists .list {
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    float: left
}

.item8 .content .shopLeft .shop .box .lists .list .items {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly
}

.item8 .content .shopLeft .shop .box .lists .list .list-item {
    width: 2.2rem;
    height: 1rem;
    color: #000;
    margin-top: .35rem;
    position: relative
}

.item8 .content .shopLeft .shop .box .lists .list .list-item .dl {
    font-size: .22rem;
    font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
    font-weight: 400;
    line-height: .27rem;
    margin-bottom: .1rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal
}

.item8 .content .shopLeft .shop .box .lists .list .list-item .dl:hover {
    overflow: visible;
    white-space: pre-line;
    cursor: pointer;
    -webkit-line-clamp: 2
}

.item8 .content .shopLeft .shop .box .lists .list .list-item .dt {
    font-size: .16rem;
    font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
    font-weight: 400;
    line-height: .18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.item8 .content .shopLeft .shop .box .lists .list .list-item .dt:hover {
    width: 2.2rem;
    overflow: visible;
    white-space: pre-line;
    cursor: pointer;
    -webkit-line-clamp: 5;
    height: .5rem
}

.item8 .content .shopLeft .shop .box .lists .list .disabled {
    color: rgba(0, 0, 0, .4)
}

.item8 .content .shopLeft .shop .box .lists .list .disabled p {
    font-size: .12rem;
    line-height: .19rem;
    position: absolute;
    top: -.19rem
}

.item8 .content .shopRight {
    display: flex;
    justify-content: space-between
}

.item8 .content .shopRight .shop {
    width: 46%
}

.item8 .content .shopRight .shop .title {
    width: 100%;
    height: auto;
    margin-bottom: .4rem;
    opacity: 0
}

.item8 .content .shopRight .shop .list {
    display: flex;
    flex-wrap: wrap;
    opacity: 0
}

.item8 .content .shopRight .shop .list .list-item {
    width: 1.03rem;
    height: .8rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: block
}

.item8 .content .shopRight .shop .list .list-item .main {
    width: .7rem;
    height: .48rem;
    display: block;
    margin: 0 auto;
    transform: scale(1);
    transition: all .3s
}

.item8 .content .shopRight .shop .list .list-item .main:hover {
    transform: scale(1.1)
}

.item8 .content .shopRight .shop .list .list-item span {
    font-size: .14rem;
    height: .32rem;
    line-height: .32rem;
    font-family: FZLTZHUNHJW--GB1-0, FZLTZHUNHJW--GB1;
    font-weight: 400;
    color: #000;
    display: block
}

.item8 .content .shopRight .shop .list .list-item .sub {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1rem;
    background: #000;
    padding: 4px;
    border-radius: 4px;
    opacity: 0
}

.item8 .content .shopRight .shop .list .list-item .sub img {
    width: auto;
    height: 1.2rem
}

.item8 .content .shopRight .shop .list .list-item .sub span {
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    height: 20px
}

.item8 .content .shopRight .shop .list .list-item:hover .sub {
    opacity: 1
}

.item8 .content .shopRight .shop .list a:hover {
    cursor: url("../image/手指@1x.png"), default
}

.item8 .content .shopRight .shop:nth-child(2) .list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center
}

.item8 .content .shopRight .shop:nth-child(2) .list .list-item {
    width: 1.03rem;
    height: .53rem
}

.item8 .content .shopRight .shop:nth-child(2) .list .list-item .main {
    margin-top: 3px
}

.item8 .content .shopRight .shop:nth-child(2) .list .list-item .sub {
    top: -1.5rem
}

.item8 .content .shopRight .shop:nth-child(3) .list-item {
    font-size: .22rem;
    width: 50%;
    text-align: left
}

.item8 .content .shopRight .shop:nth-child(3) .list-item div {
    display: inline-block
}

.item8 .content .shopRight .shop:nth-child(3) .list-item div:first-child {
    padding-right: .1rem;
    font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
    color: #000
}

.item8 .content .shopRight .shop:nth-child(3) .list-item div:nth-child(2) {
    font-size: .16rem
}

.item8 .content .shopRight .process {
    display: flex;
    flex-direction: column;
}

.item8 .content .shopRight .process .process-item,
.item8 .content .shopRight .honor .honor-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
}

.item8 .content .shopRight .process .process-item .process-item-left,
.item8 .content .shopRight .honor .honor-item .honor-item-left {
    width: 100px;
}

.item8 .content .shopRight .process .process-item .process-item-left,
.process-item-right span,
.item8 .content .shopRight .honor .honor-item .honor-item-left,
.honor-item-right span {
    font-size: .16rem;
    font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
    font-weight: 400;
    line-height: .28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.item8 .content .gif {
    width: 56.25%;
    height: auto;
    position: absolute;
    bottom: .81rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .3s ease-in 1.2s
}

.item8 .content .gifActive {
    opacity: 1
}

.item8 .content>p {
    font-size: .12rem;
    font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
    font-weight: 400;
    color: #000;
    line-height: .14rem;
    padding: .17rem 0 .33rem 0;
    border-top: 2px solid #000;
    position: absolute;
    bottom: 0;
    width: 100%
}

.item8 .content>p a {
    text-decoration: none;
    color: #000
}

.video-bg {
    position: relative
}

video {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
}

.top {
    position: fixed;
    bottom: 21px;
    right: -36px;
    width: 36px;
    height: 36px;
    font-size: 36px
}

.top:hover {
    cursor: url("../image/手指@1x.png"), default
}

.showLeft {
    animation: showLeft .5s ease-in 1.2s forwards
}

@keyframes showLeft {
    0% {
        right: -36px
    }

    100% {
        right: 84px
    }
}

.hideLeft {
    animation: hideLeft .5s ease-out forwards
}

@keyframes hideLeft {
    0% {
        right: 84px
    }

    100% {
        right: -36px
    }
}

#nav {
    position: fixed;
    z-index: 9;
    left: 0;
    right: 0;
    width: 100%
}

#nav .nav {
    width: 83.3%;
    margin: 0 auto;
    height: 68px;
    display: flex;
    justify-content: space-between
}

#nav .nav .logo {
    height: 35px;
    margin-top: 14px
}

#nav .nav .navList {
    /* width: 60.3%; */
    display: flex;
    font-family: FZLTZHUNHJW--GB1-0, FZLTZHUNHJW--GB1;
    position: absolute;
    left: 50%;
    top: 14px;
    margin-left: 10px;
    transform: translateX(-50%)
}

#nav .nav .navList .navitem {
    width: 120px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 18px;
    text-align: center;
    color: #000;
    font-size: 18px;
    margin: 0 .05rem;
    transition: border .3s
}
#nav .navList-top {
    width: 80px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 18px;
    text-align: center;
    color: #000;
    font-size: 18px;
    margin: 0 .46rem;
    transition: border .3s
}
#nav .nav .navList .navitem:hover {
    border: 2px solid #000
}

#nav .nav .navList .navitem span {
    width: 100%;
    height: 32px;
    line-height: 32px;
    display: inline-block
}

#nav .nav .navList .navitem span:hover {
    cursor: url("../image/手指@1x.png"), default
}

#nav .nav .navList .navitem .child {
    display: none;
    margin-top: 9px
}

#nav .nav .navList .navitem .child li {
    height: 24px;
    line-height: 24px;
    margin-bottom: 6px
}

#nav .nav .navList .navitem .child li:hover {
    text-decoration: underline;
    cursor: url("../image/手指@1x.png"), default
}

#nav .nav .navList .navitem:nth-child(2) {
    height: 32px;
    transition: all .5s;
    overflow: hidden
}

#nav .nav .navList .navitem:nth-child(2):hover {
    height: 145px
}

#nav .nav .navList .navitem:nth-child(2):hover span {
    text-decoration: underline
}

#nav .nav .navList .navitem:nth-child(2):hover .child {
    display: block
}

#nav .nav .right {
    margin-top: 15px;
    display: flex
}

#nav .nav .right a,
#nav .nav .right div {
    margin-left: 24px;
    width: 34px;
    height: 34px;
    position: relative;
    text-decoration: none;
    display: block
}

#nav .nav .right a:hover div,
#nav .nav .right div:hover div {
    display: block
}

#nav .nav .right a img,
#nav .nav .right div img {
    width: 100%;
    height: 100%;
    transition: all .3s
}

#nav .nav .right a div,
#nav .nav .right div div {
    display: none;
    position: absolute;
    left: -35px;
    top: 38px;
    width: 100px;
    height: 124px;
    background: #000;
    border-radius: 4px;
    margin: 0;
    text-align: center
}

#nav .nav .right a div img,
#nav .nav .right div div img {
    width: 92px;
    height: 92px;
    margin: 4px;
    margin-bottom: 2px
}

#nav .nav .right a div span,
#nav .nav .right div div span {
    display: block;
    height: 13px;
    line-height: 13px;
    color: #fff;
    font-size: 11px;
    display: block;
    margin-top: 8px
}

#nav .nav .right a:hover {
    cursor: url("../image/手指@1x.png"), default
}

#nav .nav .right div:nth-child(3) {
    width: 58px;
    height: 34px
}

.commonUpIn {
    animation: commonUpIn .8s ease-in-out .2s forwards
}

@keyframes commonUpIn {
    0% {
        opacity: 0;
        top: 2.98rem
    }

    100% {
        opacity: 1;
        top: 1.18rem
    }
}

.commonUpOut {
    animation: commonUpOut .3s cubic-bezier(.7, .04, .51, .8) forwards
}

@keyframes commonUpOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.centerUpIn {
    animation: centerUpIn .8s cubic-bezier(.7, .04, .51, .8) .72s forwards
}

@keyframes centerUpIn {
    0% {
        opacity: 0;
        top: 60%
    }

    100% {
        opacity: 1;
        top: 50%
    }
}

.swiperLeftIn {
    animation: swiperLeftIn .8s ease-in-out .5s forwards
}

@keyframes swiperLeftIn {
    0% {
        opacity: 0;
        left: 10.5%
    }

    100% {
        opacity: 1;
        left: 7.5%
    }
}

.shopLeftIn {
    animation: shopLeftIn .8s ease-in-out .5s forwards
}

@keyframes shopLeftIn {
    0% {
        opacity: 0;
        left: 2%
    }

    100% {
        opacity: 1;
        left: 0
    }
}

.swiperRightIn {
    animation: swiperRightIn .8s ease-in-out .5s forwards
}

@keyframes swiperRightIn {
    0% {
        opacity: 0;
        right: 10.5%
    }

    100% {
        opacity: 1;
        right: 7.5%
    }
}

.shopRightIn {
    animation: shopRightIn .8s ease-in-out .5s forwards
}

@keyframes shopRightIn {
    0% {
        opacity: 0;
        right: 2%
    }

    100% {
        opacity: 1;
        right: 0
    }
}

.swiperLeftOut {
    animation: swiperLeftOut .5s ease-in-out 0s forwards
}

@keyframes swiperLeftOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.shopLeftOut {
    animation: shopLeftOut .5s ease-in-out 0s forwards
}

@keyframes shopLeftOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.swiperRightOut {
    animation: swiperRightOut .5s ease-in-out 0s forwards
}

@keyframes swiperRightOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.shopRightOut {
    animation: shopRightOut .5s ease-in-out 0s forwards
}

@keyframes shopRightOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.centerUpIn {
    animation: centerUpIn .8s ease-in-out .2s forwards
}

@keyframes centerUpIn {
    0% {
        opacity: 0;
        padding-top: 42px
    }

    100% {
        opacity: 1;
        padding-top: 0
    }
}

.centerBoxUpIn {
    animation: centerBoxUpIn 1.1s ease-in-out .4s forwards
}

@keyframes centerBoxUpIn {
    0% {
        opacity: 0;
        top: 60%
    }

    100% {
        opacity: 1;
        top: 50%
    }
}

.centerFadeOut {
    animation: centerFadeOut .3s ease-in-out forwards
}

@keyframes centerFadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.twoUpIn {
    transition: all .8s ease-in .2s
}

.twoUpIn {
    transition: all .8s ease-in .2s
}

.line1UpIn {
    animation: line1UpIn .8s ease-in-out .32s forwards
}

@keyframes line1UpIn {
    0% {
        padding-top: 60px;
        opacity: 0
    }

    100% {
        padding-top: 0;
        opacity: 1
    }
}

.line2UpIn {
    animation: line2UpIn .8s ease-in-out .48s forwards
}

@keyframes line2UpIn {
    0% {
        padding-top: 60px;
        opacity: 0
    }

    100% {
        padding-top: 0;
        opacity: 1
    }
}

.lineFadeOut {
    animation: lineFadeOut .8s ease-out 0 forwards
}

@keyframes lineFadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}