.mobile-show .TC_top_gnb {
    display: none
}

.mobile-show #wrapper {
    background-image: url(../public/image/page-3-mobile.jpg)
}

.mobile-show #wrapper .bicon2 {
    background-image: url(../public/image/box1-icon-mobile.png);
    -o-background-size: 7.71rem 11.39rem;
    background-size: 7.71rem 11.39rem;
    background-repeat: no-repeat
}

.mobile-show #wrapper .line ul .l-1 {
    right: 1.28rem
}

.mobile-show #wrapper .line ul .l-2 {
    top: 2.1rem;
    right: 0
}

.mobile-show #wrapper .line ul .l-3 {
    top: 2.07rem;
    right: 1.27rem
}

.mobile-show #wrapper .container .content {
    padding-right: 1.3rem
}

.mobile-show #wrapper .container .content .bot-box {
    height: 2rem
}

.mobile-show #wrapper .container .content .bot-box .index-shadow {
    height: 1.6rem;
    /* background-image: url(../public/image/index-shadow-mobile.png) */
}

.mobile-show #wrapper .container .content .bot-box .index-shadow .scroll {
    margin-top: .5rem
}

.mobile-show #wrapper .container .content .bot-box .box-shadow .scroll {
    margin-top: 10%
}

.mobile-show #wrapper .container .content .bot-box .box-shadow .scroll::after {
    top: -0.52rem
}

.mobile-show #wrapper .container .content .bot-box .box-shadow .scroll::before {
    top: -0.6rem
}

.mobile-show #wrapper .container .section .title-name {
    bottom: 1.25rem;
    left: .24rem
}

.mobile-show #wrapper .container .section .title {
    height: 100%;
    background: none
}

.mobile-show #wrapper .container .section .title ul {
    height: 100%;
    right: 0;
    top: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.mobile-show #wrapper .container .section .title ul .t1 {
    width: .4rem;
    right: .6rem;
    top: 2.3rem;
    line-height: .45rem;
    font-size: .4rem;
    text-shadow: .04rem 0 .04rem #000, .04rem .02rem .04rem #000
}

.mobile-show #wrapper .container .section .title ul .t2 {
    width: .3rem;
    right: .38rem;
    top: 2.34rem;
    font-size: .23rem
}

.mobile-show #wrapper .container .section .title ul .t2 span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.mobile-show #wrapper .container .section .title ul .t3 {
    bottom: 2.2rem;
    right: .4rem;
    top: auto;
    font-size: .6rem
}

.mobile-show #wrapper .container .section .title ul .t3 span::after {
    width: .7rem;
    height: .35rem;
    left: -0.1rem;
    bottom: .02rem
}

.mobile-show #wrapper .container .section .title ul .t4 {
    bottom: 2.1rem;
    right: .1rem;
    top: auto;
    font-size: .21rem
}

.mobile-show #wrapper .container .section .title ul .t4 span::after {
    display: none
}

.mobile-show #wrapper .container #box1 {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-image: url("../public/image/page-1-mobile.jpg")
}

.mobile-show #wrapper .container #box1 .subscribe-box {
    width: 10.8rem;
    height: 3.85rem;
    bottom: .4rem;
    -webkit-transform: translateX(-44%);
    -moz-transform: translateX(-44%);
    -ms-transform: translateX(-44%);
    -o-transform: translateX(-44%);
    transform: translateX(-44%);
    padding-top: 1.3rem
}

.mobile-show #wrapper .container #box1 .subscribe-box .bg-img {
    bottom: -1.8rem;
    background-position: center;
}

.mobile-show #wrapper .container #box1 .subscribe-box .btn {
    width: 8.58rem;
    height: 1.18rem
}

.mobile-show #wrapper .container #box1 .subscribe-box .btn-subscribe,
.mobile-show #wrapper .container #box1 .subscribe-box .btn-download {
    width: 4.29rem;
    height: 1.18rem
}

.mobile-show #wrapper .container #box1 .subscribe-box .subscribe-number {
    width: 5.07rem;
    height: .9rem;
    font-size: .37rem;
    background-image: url(../public/image/btn-di.png);
    margin-left: 2.865rem;
}

.mobile-show #wrapper .container #box1 .subscribe-box .btn-video {
    width: 1.49rem;
    height: 1.7rem;
    right: 50%;
    top: -0.5rem;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%)
}

.mobile-show #wrapper .container #box1 .contact-us {
    display: block;
    top: 5rem;
    right: .35rem;
}

.mobile-show #wrapper .container #box1 .contact-us a {
    height: 1rem;
}

.mobile-show #wrapper .container #box1 .contact-us a .iconfont {
    font-size: .7rem;
    color: #646464;
}

.mobile-show #wrapper .container #box1 .cadpa {
    top: 3.5rem;
    right: .1rem;
    width: 1.04rem;
    height: 1.32rem
}

.mobile-show #wrapper .container #box1 .btn-event {
    width: 1.93rem;
    height: 1.73rem;
    bottom: 5.1rem
}

.mobile-show #wrapper .container #box1 .bgbox::before {
    display: none
}

.mobile-show #wrapper .container #box1 .bgbox #bgvideo {
    display: none
}

.mobile-show #wrapper .container #box2 .reward-box {
    width: 9.67rem;
    height: 13.47rem;
    background-image: url(../public/image/reward-box-mobile.png);
    top: -0.1rem;
    right: -0.3rem;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img {
    width: 4.42rem;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: -0.4rem;
    top: 0
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img span {
    display: block;
    position: absolute
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img .bird {
    top: 2.9rem;
    right: -0.1rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img .img {
    width: 4.42rem;
    height: 11.68rem;
    left: 0;
    top: .9rem;
    background-image: url(../public/image/box1-npc-2-bg-mobile.png)
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img .npc {
    width: 6.55rem;
    height: 11.66rem;
    top: 1.3rem;
    left: -0.8rem;
    background-image: url(../public/image/box1-npc-2-mobile.png)
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img .txt {
    left: 1.5rem;
    top: 8.7rem;
    width: 3.31rem;
    height: 3.45rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img .txt .name-1 {
    width: 3.31rem;
    height: 3.45rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-img .txt .name-2 {
    left: .6rem;
    top: .6rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list {
    position: absolute;
    top: 0;
    right: .6rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-title {
    width: 4.1rem;
    height: .7rem;
    border: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: initial;
    -webkit-align-items: initial;
    -moz-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
    margin-left: .09rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-title p {
    border-bottom: 1px solid #ae9577;
    padding-bottom: .08rem;
    margin-bottom: .05rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-title span {
    font-size: .14rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box {
    display: block;
    position: relative
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .give {
    width: 4.4rem;
    height: 1.95rem;
    background-image: url(../public/image/box1-icon-mobile.png);
    -o-background-size: 7.71rem 11.39rem;
    background-size: 7.71rem 11.39rem;
    background-repeat: no-repeat;
    background-position: -0.07rem 0;
    margin-left: 0;
    text-indent: -99.99rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list {
    width: 4.4rem;
    position: absolute
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li {
    width: 3.8rem;
    height: 1.89rem;
    float: left;
    text-indent: -99.99rem;
    background-image: url(../public/image/box1-icon-mobile.png);
    -o-background-size: 7.71rem 11.39rem;
    background-size: 7.71rem 11.39rem;
    background-repeat: no-repeat;
    position: relative
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(1) {
    background-position: -0.07rem -1.96rem;
    height: 1.8rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(1)::after {
    top: .15rem !important;
    left: 4.1rem !important;
    height: 1.45rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(2) {
    background-position: -0.07rem -3.77rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(3) {
    background-position: -0.07rem -5.66rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(4) {
    background-position: -0.07rem -7.55rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(5) {
    background-position: -0.07rem -9.44rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(5)::after {
    height: 1.56rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li::before {
    content: "";
    width: .52rem;
    height: .48rem;
    background-image: url(../public/image/box1-icon-mobile.png);
    -o-background-size: 7.71rem 11.39rem;
    background-size: 7.71rem 11.39rem;
    background-repeat: no-repeat;
    background-position: -4.71rem -1.46rem;
    position: absolute;
    top: 50%;
    left: 3.85rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(1) {
    background-position: -3.87rem -1.96rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(2) {
    background-position: -3.87rem -3.77rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(3) {
    background-position: -3.87rem -5.66rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(4) {
    background-position: -3.87rem -7.55rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(5) {
    background-position: -3.87rem -9.44rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on span::after {
    content: "";
    width: .9rem;
    height: .84rem;
    position: absolute;
    right: -0.15rem;
    top: -0.1rem;
    background-image: url(../public/image/box1-icon-mobile.png);
    -o-background-size: 7.71rem 11.39rem;
    background-size: 7.71rem 11.39rem;
    background-repeat: no-repeat;
    background-position: -4.52rem -0.13rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on::before {
    background-position: -4.71rem -0.98rem
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.on::after {
    content: "";
    width: .02rem;
    height: 1.68rem;
    position: absolute;
    top: 0;
    left: 4.1rem;
    background: #ffd07b;
    z-index: 1
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .list li.done::after {
    height: 100%
}

.mobile-show #wrapper .container #box2 .reward-box .reward-list .list-box .progress {
    width: .02rem;
    height: 9.02rem;
    position: absolute;
    left: 4.1rem;
    top: 2.07rem;
    background: #806f58
}

.mobile-show #wrapper .container #box3 .news-box {
    width: 10rem;
    height: 13rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    top: .19rem;
    right: -0.3rem;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.mobile-show #wrapper .container #box3 .news-box .news-con {
    margin-top: .5rem;
    width: 8.92rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-tab {
    width: 8.92rem;
    height: 1.02rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-tab a {
    width: 2.24rem;
    height: .66rem;
    font-size: .32rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-tab i {
    width: 2.24rem;
    height: .66rem;
    top: .16rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-more {
    width: 8.64rem;
    top: 7.4rem;
    padding-bottom: .2rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-more a {
    font-size: .3rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-list {
    width: 8.64rem;
    height: 5.1rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li {
    height: 1.1rem;
    line-height: 1.1rem;
    border-bottom: 1px dashed #8b7962;
    font-size: .28rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:nth-child(1) {
    width: .9rem
}

.mobile-show #wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:nth-child(2) p {
    width: 6.6rem
}

.mobile-show #wrapper .container #box3 .news-box .index-news-banner {
    width: 8.77rem;
    height: 5.35rem;
    background-image: url(../public/image/box-pic-mobile.png)
}

.mobile-show #wrapper .container #box3 .news-box .index-news-banner .main-banner {
    width: 8.65rem;
    height: 4.85rem;
    left: .06rem
}

.mobile-show #wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-wrapper::after {
    width: 8.77rem;
    height: 5.08rem
}

.mobile-show #wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-pagination {
    bottom: -0.73rem;
    left: .3rem
}

.mobile-show #wrapper .container #box4 .role-box {
    width: 9.51rem;
    height: 14.55rem;
    top: .11rem;
    right: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    background: none
}

.mobile-show #wrapper .container #box4 .role-box .role-menu {
    width: 1.28rem;
    right: -1.3rem;
    left: auto;
    top: 2.2rem;
    z-index: 8;
    padding: 3.6rem 0
}

.mobile-show #wrapper .container #box4 .role-box .role-menu a span {
    font-size: .2rem
}

.mobile-show #wrapper .container #box4 .role-box .role-menu a.current-menu-item {
    position: relative
}

.mobile-show #wrapper .container #box4 .role-box .role-menu a.current-menu-item::after {
    content: "";
    width: .07rem;
    height: .85rem;
    position: absolute;
    left: -0.04rem;
    top: .2rem;
    background: #ffd07b
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner {
    width: 100%;
    height: 100%
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .camp .tips {
    width: 8.66rem;
    height: .97rem;
    left: .45rem;
    top: .25rem;
    background-image: url(../public/image/role-box-bg-top-mobile.png)
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .camp .img {
    display: none
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab {
    position: relative
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live {
    width: 2.63rem;
    height: .68rem;
    top: 9.2rem;
    left: 6.5rem;
    font-size: .37rem;
    display: none
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live span {
    padding-left: .5rem;
    font-size: .35rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live span::after {
    border-width: .16rem .16rem .16rem .25rem;
    top: .15rem;
    right: .26rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-on span::after {
    width: .04rem;
    height: .26rem;
    top: .17rem;
    right: .6rem;
    border: none
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-on span::before {
    width: .04rem;
    height: .26rem;
    top: .17rem;
    right: .44rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-loading span::after {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    top: .16rem;
    right: .35rem;
    border: .02rem solid #ab9377
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live::after {
    display: none
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character {
    width: 20rem;
    height: 24rem;
    top: -0.8rem;
    left: -4.5rem;
    animation-delay: -0.1s !important
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-image {
    left: -6.03rem;
    overflow: hidden
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-image img {
    margin-left: 6.03rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-video img {
    width: 100%
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab::after {
    content: "";
    width: 20rem;
    height: 24rem;
    position: absolute;
    left: -10.5rem;
    top: 0;
    z-index: 11;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/character-box-shadow.png)
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info {
    width: 8.7rem;
    top: auto;
    bottom: 0;
    left: .45rem;
    right: auto;
    pointer-events: none
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit {
    width: 8.7rem;
    height: 1.3rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p {
    background-image: url(../public/image/info-tit-mobile.png);
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: self-end;
    -webkit-align-items: self-end;
    -moz-box-align: self-end;
    -ms-flex-align: self-end;
    align-items: self-end
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p .name {
    position: static;
    width: auto;
    height: 100%
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p .career {
    position: static;
    margin-bottom: .2rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-explain {
    height: 3.8rem;
    font-size: .25rem;
    color: #b7b1a8;
    width: 100%;
    line-height: .35rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab {
    animation: none !important
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t1 {
    width: 9.51rem;
    height: 12.55rem;
    left: 0;
    top: 0;
    background-image: url(../public/image/role-box-bg-xie-mobile-1.png)
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t2 {
    width: 6rem;
    height: 12.55rem;
    top: 0;
    left: -6.55rem;
    -webkit-transform: skewX(-35deg);
    -moz-transform: skewX(-35deg);
    -ms-transform: skewX(-35deg);
    -o-transform: skewX(-35deg);
    transform: skewX(-35deg)
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t2 span {
    width: 16.5rem;
    height: 2.5rem;
    -webkit-transform: skewX(35deg) rotate(90deg);
    -moz-transform: skewX(35deg) rotate(90deg);
    -ms-transform: skewX(35deg) rotate(90deg);
    -o-transform: skewX(35deg) rotate(90deg);
    transform: skewX(35deg) rotate(90deg);
    top: 8.4rem;
    left: 1.9rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t3 {
    width: 6rem;
    height: 12.55rem;
    top: 0;
    left: -0.55rem;
    -webkit-transform: skewX(-35deg);
    -moz-transform: skewX(-35deg);
    -ms-transform: skewX(-35deg);
    -o-transform: skewX(-35deg);
    transform: skewX(-35deg)
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t3 span {
    width: 16.5rem;
    height: 2.5rem;
    -webkit-transform: skewX(35deg) rotate(90deg);
    -moz-transform: skewX(35deg) rotate(90deg);
    -ms-transform: skewX(35deg) rotate(90deg);
    -o-transform: skewX(35deg) rotate(90deg);
    transform: skewX(35deg) rotate(90deg);
    top: 8.4rem;
    left: -4.1rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper {
    width: 7.65rem;
    height: 2.06rem;
    left: 1.1rem;
    bottom: -0.2rem;
    top: auto
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner {
    height: 1.73rem;
    width: 7.65rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner .swiper-wrapper .swiper-slide {
    width: 1.53rem;
    height: 1.73rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner .swiper-wrapper .swiper-slide img {
    width: 1.15rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner .swiper-wrapper .swiper-slide-thumb-active {
    background-image: url(../public/image/role-box-btn-2.png)
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-prev,
.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-next {
    width: .56rem;
    height: .56rem;
    margin-top: -0.45rem !important
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-prev {
    left: -0.6rem
}

.mobile-show #wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-next {
    right: -0.6rem
}

.mobile-show #wrapper .container #box5 .world-box {
    width: 9.67rem;
    height: 13.95rem;
    background-image: url(../public/image/world-box-mobile.png);
    top: -0.1rem;
    right: -0.3rem;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner {
    width: 8.09rem;
    height: 11.6rem;
    position: relative;
    top: .8rem;
    left: .8rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .image {
    margin: 0 0 .2rem 0
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info {
    margin: 0;
    width: 8.09rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-tit {
    width: 8.08rem;
    height: .86rem;
    margin-bottom: .25rem;
    background-image: url(../public/image/world-tit-bg-mobile.png)
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-tit p {
    font-size: .5rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-tit span {
    font-size: .3rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-explain {
    height: 4.5rem;
    font-size: .27rem;
    color: #b7b1a8;
    line-height: .4rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-explain p {
    margin-bottom: .3rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info i {
    width: 8.09rem;
    height: .68rem;
    background-image: url(../public/image/world-box-bg-bot-mobile.png)
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.slide-3 .info .info-tit span,
.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.slide-5 .info .info-tit span,
.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.slide-6 .info .info-tit span {
    font-size: .3rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination {
    width: 4.2rem;
    height: .4rem;
    left: 50%;
    top: 11.6rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -2.1rem;
    justify-content: center;
    transition: none
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet {
    width: .29rem;
    height: .31rem;
    opacity: 1;
    background: none;
    -o-background-size: .29rem .62rem;
    background-size: .29rem .62rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../public/image/btn-tab.png);
    cursor: pointer;
    text-indent: -99.99rem;
    border: none;
    transition: none
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet span {
    display: none
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet-active {
    background-position: center bottom
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .swiper-button-prev,
.mobile-show #wrapper .container #box5 .world-box .index-world-banner .swiper-button-next {
    width: .56rem;
    height: .56rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/btn-arr.png);
    margin-top: 5.3rem !important;
    display: block
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .swiper-button-prev::after,
.mobile-show #wrapper .container #box5 .world-box .index-world-banner .swiper-button-next::after {
    display: none
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .swiper-button-prev {
    left: 1.9rem
}

.mobile-show #wrapper .container #box5 .world-box .index-world-banner .swiper-button-next {
    right: 1.9rem;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.mobile-show #wrapper .container #box6 .media-box {
    width: 8.67rem;
    height: 13.47rem;
    top: .2rem;
    right: -0.3rem;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.mobile-show #wrapper .container #box6 .media-box ul {
    flex-direction: column
}

.mobile-show #wrapper .container #box6 .media-box ul li {
    width: 8.04rem;
    height: 4.23rem;
    margin-bottom: .2rem
}

.mobile-show #wrapper .container #box6 .media-box ul li::before {
    background-image: url(../public/image/media-nav-bg-mobile.png)
}

.mobile-show #wrapper .container #box6 .media-box ul li .media-img {
    width: 5.82rem;
    height: 3.72rem;
    transform: scale(1)
}

.mobile-show #wrapper .container #box6 .media-box ul li .media-img::before {
    opacity: 1
}

.mobile-show #wrapper .container #box6 .media-box ul li .media-tit {
    line-height: .4rem;
    bottom: .12rem
}

.mobile-show #wrapper .container #box6 .media-box ul li .media-tit span {
    font-size: .38rem;
    color: #ffd07b
}

.mobile-show #wrapper .container #box6 .media-box ul li .media-tit p {
    padding-left: .6rem;
    font-size: .5rem;
    color: #f5ede1
}

.mobile-show #wrapper .container #box6 .media-box ul li .media-tit p::before {
    width: .5rem;
    height: .5rem;
    opacity: 1
}

.mobile-show #wrapper .container #box6 .media-box ul li.video .media-img {
    left: 2.2rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.video .media-img::before {
    right: 6.97rem;
    top: .38rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper::before {
    transform: rotateY(180deg)
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper .media-img {
    left: 0
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper .media-img::before {
    right: -2.18rem;
    top: .38rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper .media-tit {
    left: 5rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper .media-tit span {
    padding-left: .2rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper .media-tit p {
    padding-left: 0
}

.mobile-show #wrapper .container #box6 .media-box ul li.wallpaper .media-tit p::before {
    left: 2.2rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.cartoon .media-img {
    left: 2.54rem
}

.mobile-show #wrapper .container #box6 .media-box ul li.cartoon .media-img::before {
    right: 7.31rem;
    top: .38rem
}

.mobile-show #wrapper .container #box6 .media-box ul li:hover::before {
    background-image: url(../public/image/media-nav-bg-mobile.png)
}

.mobile-show #wrapper .container #box7 .feature-box {
    width: 9.5rem;
    height: 9.4rem;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    top: 2.08rem;
    right: 0
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner {
    width: 9.5rem;
    height: 9.4rem
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide {
    width: 9.5rem !important;
    height: 5.36rem !important;
    -webkit-transform: translate(0, -50%) !important;
    -moz-transform: translate(0, -50%) !important;
    -ms-transform: translate(0, -50%) !important;
    -o-transform: translate(0, -50%) !important;
    transform: translate(0, -50%) !important;
    left: 0
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide span {
    opacity: 0 !important
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-active {
    width: 100% !important;
    z-index: 11;
    -webkit-transform: translate(0, -50%) !important;
    -moz-transform: translate(0, -50%) !important;
    -ms-transform: translate(0, -50%) !important;
    -o-transform: translate(0, -50%) !important;
    transform: translate(0, -50%) !important;
    opacity: 1 !important
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-active span {
    opacity: 1 !important;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-prev {
    -webkit-transform: translate(0, -87.5%) !important;
    -moz-transform: translate(0, -87.5%) !important;
    -ms-transform: translate(0, -87.5%) !important;
    -o-transform: translate(0, -87.5%) !important;
    transform: translate(0, -87.5%) !important;
    z-index: 10
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-next {
    -webkit-transform: translate(0, -12.5%) !important;
    -moz-transform: translate(0, -12.5%) !important;
    -ms-transform: translate(0, -12.5%) !important;
    -o-transform: translate(0, -12.5%) !important;
    transform: translate(0, -12.5%) !important;
    z-index: 10
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev,
.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next {
    width: 100%;
    height: 2rem;
    background-image: #000
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev::before,
.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next::before {
    width: .56rem;
    height: .56rem;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev {
    left: 0;
    margin-top: -6.68rem
}

.mobile-show #wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next {
    right: 0;
    margin-top: 4.67rem
}

.mobile-show #wrapper .container #box8 {
    background-image: url(../public/image/page-3-mobile.jpg);
    background-position: top;
    background-size: contain;
}

.mobile-show #wrapper .container #box8 .swiper-wrapper .swiper-slide-bg-1 {
    background-image: url(../public/image/tu1_1.jpg);
}

.mobile-show #wrapper .container #box8 .swiper-wrapper .swiper-slide-bg-2 {
    background-image: url(../public/image/tu2_1.jpg);
}

.mobile-show #wrapper .container #box8 .swiper-wrapper .swiper-slide-bg-3 {
    background-image: url(../public/image/tu3_1.jpg);
}

.mobile-show #wrapper .container #box8 .info {
    height: 9rem;
    width: 8.5rem;
    line-height: 1rem;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 10%);
    -moz-transform: translate(-50%, 10%);
    -ms-transform: translate(-50%, 10%);
    -o-transform: translate(-50%, 10%);
    transform: translate(-50%, 10%)
}

.mobile-show #wrapper .container #box8 .info .txt p {
    font-size: .7rem
}

.mobile-show #wrapper .container #box8 .info .txt span {
    font-size: .4rem
}

.fp-viewing-index #wrapper .header.show-1 .line ul .l-1 {
    animation-duration: 0ms
}

.fp-viewing-index #wrapper .header.show-1 .line ul .l-2 {
    animation-duration: 0ms
}

.fp-viewing-index #wrapper .header.show-1 .line ul .l-3 {
    animation-duration: 0ms
}

.load_complate .btn-video::after {
    -moz-animation: eff_op3 2s infinite 2s;
    -o-animation: eff_op3 2s infinite 2s;
    animation: eff_op3 2s infinite 2s;
    -webkit-animation: eff_op3 2s infinite 2s
}

.load_complate .scroll::after {
    -moz-animation: eff_up 2s infinite;
    -o-animation: eff_up 2s infinite;
    animation: eff_up 2s infinite;
    -webkit-animation: eff_up 2s infinite
}

.load_complate .scroll::before {
    -moz-animation: eff_up 2s infinite .1s;
    -o-animation: eff_up 2s infinite .1s;
    animation: eff_up 2s infinite .1s;
    -webkit-animation: eff_up 2s infinite .1s
}

.load_complate .media-img::before {
    animation: spin 5s infinite linear
}

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    font-size: 20px;
    color: #f5ede1;
    background-image: url(../public/image/page-3.jpg);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .cover {
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .icon {
    background-image: url(../public/image/icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat
}

#wrapper .bicon1 {
    background-image: url(../public/image/box1-icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat
}

#wrapper.show-1 .line ul .l-1 {
    animation: eff_move4 1.5s ease-in-out 0s both;
    -webkit-animation: eff_move4 1.5s ease-in-out 0s both;
    -moz-animation: eff_move4 1.5s ease-in-out 0s both;
    -ms-zoom-animation: eff_move4 1.5s ease-in-out 0s both;
    -o-animation: eff_move4 1.5s ease-in-out 0s both
}

#wrapper.show-1 .line ul .l-2 {
    animation: eff_move3 1.5s ease-in-out 0s both;
    -webkit-animation: eff_move3 1.5s ease-in-out 0s both;
    -moz-animation: eff_move3 1.5s ease-in-out 0s both;
    -ms-zoom-animation: eff_move3 1.5s ease-in-out 0s both;
    -o-animation: eff_move3 1.5s ease-in-out 0s both
}

#wrapper.show-1 .line ul .l-3 {
    animation: eff_op2 .1s ease-in-out 0s both;
    -webkit-animation: eff_op2 .1s ease-in-out 0s both;
    -moz-animation: eff_op2 .1s ease-in-out 0s both;
    -ms-zoom-animation: eff_op2 .1s ease-in-out 0s both;
    -o-animation: eff_op2 .1s ease-in-out 0s both
}

#wrapper.show-2 .line ul .l-1 {
    -webkit-animation: eff_move2 1.5s ease-in-out 0s both;
    -moz-animation: eff_move2 1.5s ease-in-out 0s both;
    -o-animation: eff_move2 1.5s ease-in-out 0s both;
    animation: eff_move2 1.5s ease-in-out 0s both
}

#wrapper.show-2 .line ul .l-2 {
    animation: eff_move1 1.5s ease-in-out 0s both;
    -webkit-animation: eff_move1 1.5s ease-in-out 0s both;
    -moz-animation: eff_move1 1.5s ease-in-out 0s both;
    -ms-zoom-animation: eff_move1 1.5s ease-in-out 0s both;
    -o-animation: eff_move1 1.5s ease-in-out 0s both
}

#wrapper.show-2 .line ul .l-3 {
    animation: eff_op1 1s ease-in-out 1s both;
    -webkit-animation: eff_op1 1s ease-in-out 1s both;
    -moz-animation: eff_op1 1s ease-in-out 1s both;
    -ms-zoom-animation: eff_op1 1s ease-in-out 1s both;
    -o-animation: eff_op1 1s ease-in-out 1s both
}

#wrapper .line ul li {
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s
}

#wrapper .line ul .l-1 {
    width: 1px;
    height: 100vh;
    background: #d1b15e;
    position: absolute;
    top: 0;
    right: 2.02rem;
    opacity: .3
}

#wrapper .line ul .l-2 {
    width: 100%;
    height: 1px;
    background: #d1b15e;
    position: absolute;
    top: 1.7rem;
    right: 0;
    opacity: .3
}

#wrapper .line ul .l-3 {
    width: .05rem;
    height: .05rem;
    background: #d1b15e;
    position: absolute;
    top: 1.68rem;
    right: 2rem;
    opacity: .7;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

#wrapper .header {
    width: 100%;
    z-index: 10;
    position: relative
}

#wrapper .container {
    position: relative;
    width: 100%;
    z-index: 3
}

#wrapper .container .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 2rem;
    padding-right: 1.73rem;
    padding-bottom: 2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#wrapper .container .content .con-box {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2
}

#wrapper .container .content .bot-box {
    width: 100%;
    height: 1.45rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10
}

#wrapper .container .content .bot-box .index-shadow {
    width: 100%;
    height: 1.08rem;
    position: absolute;
    bottom: 0;
    left: 0;
    /* background-image: url(../public/image/index-shadow.png); */
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container .content .bot-box .index-shadow .scroll {
    /* background-position: 0 -2.91rem; */
    margin-top: .4rem;
    color: #b47a21;
    font-family: "楷体", "楷体_GB2312";
    font-size: .3rem;
}

#wrapper .container .content .bot-box .index-shadow .scroll::after {
    background-image: url(../public/image/xiahua_2.png);
    background-repeat: no-repeat;
}

.mobile-show #wrapper .container .content .bot-box .index-shadow .scroll::after {
    background-image: url(../public/image/xiahua_1.png);
}

#wrapper .container .content .bot-box .index-shadow .scroll::before {
    background-image: url(../public/image/xiahua_1.png);
    background-repeat: no-repeat;
}

.mobile-show #wrapper .container .content .bot-box .index-shadow .scroll::before {
    background-image: url(../public/image/xiahua_2.png);
}

#wrapper .container .content .bot-box .box-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /* background-image: url(../public/image/box-shadow.png); */
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-top: 1px solid #5b4d32;
    z-index: 2
}

#wrapper .container .content .bot-box .box-shadow .scroll {
    background-position: 0 -2.12rem;
    margin-top: 4%
}

#wrapper .container .content .bot-box .box-shadow .scroll::after {
    /* background-position: 0 -1.8rem */
}

#wrapper .container .content .bot-box .box-shadow .scroll::before {
    /* background-position: 0 -1.64rem */
}

#wrapper .container .content .bot-box .scroll {
    width: 1.2rem;
    height: .16rem;
    display: block;
    margin: 0 auto;
    /* background-image: url(../public/image/icon.png); */
    /* -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat; */
    position: relative
}

#wrapper .container .content .bot-box .scroll::after,
#wrapper .container .content .bot-box .scroll::before {
    content: "";
    width: 100%;
    height: 1.16rem;
    position: absolute;
    right: -.38rem;
    /* background-image: url(../public/image/icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat */
}

#wrapper .container .content .bot-box .scroll::after {
    top: -0.4rem
}

#wrapper .container .content .bot-box .scroll::before {
    top: -0.5rem
}

.mobile-show #wrapper .container .content .bot-box .scroll::after {
    right: -.2rem;
    background-size: 70%;
    top: -1.4rem;
}

.mobile-show #wrapper .container .content .bot-box .scroll::before {
    right: -.2rem;
    background-size: 70%;
    top: -1.2rem
}

#wrapper .container .section {
    width: 100%;
    height: 100%;
    z-index: 8;
    overflow: hidden;
    position: relative;
    /* 修改为 relative */
    left: 0;
    top: 0;
    /* opacity: 0;
    transition: opacity 1.5s ease; */
    /* 添加过渡效果 */
}

#wrapper .container .section.active {
    z-index: 10;
    /* opacity: 1 */
}

#wrapper .container .section .title {
    width: 2.05rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
    background-image: url(../public/image/bg-title.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right
}

#wrapper .container .section .title ul {
    width: 100%;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    right: .38rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

#wrapper .container .section .title ul li {
    position: absolute;
    right: 0;
    opacity: 0;
    font-family: 'Didot'
}

#wrapper .container .section .title ul li.t1 span {
    font-family: 'SimSun', '宋体', serif
}

#wrapper .container .section .title ul li span {
    display: block
}

#wrapper .container .section .title ul .t1 {
    color: #f5ede1;
    font-size: .32rem;
    font-weight: bold;
    letter-spacing: .02rem;
    z-index: 4;
    text-shadow: 0 .04rem .04rem #000, .02rem .04rem .04rem #000
}

#wrapper .container .section .title ul .t2 {
    color: #ae9577;
    font-size: .17rem;
    top: .33rem;
    z-index: 3;
    font-weight: bold
}

#wrapper .container .section .title ul .t3 {
    width: .5rem;
    height: .5rem;
    color: #ffd07b;
    font-size: .6rem;
    top: .65rem;
    right: .03rem;
    font-weight: bold;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#wrapper .container .section .title ul .t3 span::after {
    content: "";
    width: .7rem;
    height: .4rem;
    position: absolute;
    left: -0.08rem;
    bottom: .02rem;
    -webkit-box-shadow: -0.04rem -0.15rem .1rem #000 inset;
    box-shadow: -0.04rem -0.15rem .1rem #000 inset
}

#wrapper .container .section .title ul .t4 {
    color: #f5ede1;
    font-size: .16rem;
    top: .95rem;
    right: -0.2rem;
    z-index: 2;
    letter-spacing: .04rem
}

#wrapper .container .section .title ul .t4 span {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8)
}

#wrapper .container .section .title ul .t4 span i {
    margin-right: .18rem;
    font-style: normal
}

#wrapper .container .section .title ul .t4 span::after {
    content: "";
    width: .02rem;
    height: .4rem;
    position: absolute;
    left: -0.1rem;
    bottom: 0;
    background: #fed27b;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg)
}

#wrapper .container .section .title ul.title-down .t1 {
    -webkit-animation: eff_up1 .5s ease-in-out 0s both;
    -moz-animation: eff_up1 .5s ease-in-out 0s both;
    -o-animation: eff_up1 .5s ease-in-out 0s both;
    animation: eff_up1 .5s ease-in-out 0s both
}

#wrapper .container .section .title ul.title-down .t2 {
    -webkit-animation: eff_up1 .5s ease-in-out .04s both;
    -moz-animation: eff_up1 .5s ease-in-out .04s both;
    -o-animation: eff_up1 .5s ease-in-out .04s both;
    animation: eff_up1 .5s ease-in-out .04s both
}

#wrapper .container .section .title ul.title-down .t3 {
    -webkit-animation: eff_up1 .5s ease-in-out .08s both;
    -moz-animation: eff_up1 .5s ease-in-out .08s both;
    -o-animation: eff_up1 .5s ease-in-out .08s both;
    animation: eff_up1 .5s ease-in-out .08s both
}

#wrapper .container .section .title ul.title-down .t4 {
    -webkit-animation: eff_up1 .5s ease-in-out .1s both;
    -moz-animation: eff_up1 .5s ease-in-out .1s both;
    -o-animation: eff_up1 .5s ease-in-out .1s both;
    animation: eff_up1 .5s ease-in-out .1s both
}

#wrapper .container .section .title ul.title-up .t4 {
    -webkit-animation: eff_up2 .5s ease-in-out 0s both;
    -moz-animation: eff_up2 .5s ease-in-out 0s both;
    -o-animation: eff_up2 .5s ease-in-out 0s both;
    animation: eff_up2 .5s ease-in-out 0s both
}

#wrapper .container .section .title ul.title-up .t3 {
    -webkit-animation: eff_up2 .5s ease-in-out .04s both;
    -moz-animation: eff_up2 .5s ease-in-out .04s both;
    -o-animation: eff_up2 .5s ease-in-out .04s both;
    animation: eff_up2 .5s ease-in-out .04s both
}

#wrapper .container .section .title ul.title-up .t2 {
    -webkit-animation: eff_up2 .5s ease-in-out .08s both;
    -moz-animation: eff_up2 .5s ease-in-out .08s both;
    -o-animation: eff_up2 .5s ease-in-out .08s both;
    animation: eff_up2 .5s ease-in-out .08s both
}

#wrapper .container .section .title ul.title-up .t1 {
    -webkit-animation: eff_up2 .5s ease-in-out .1s both;
    -moz-animation: eff_up2 .5s ease-in-out .1s both;
    -o-animation: eff_up2 .5s ease-in-out .1s both;
    animation: eff_up2 .5s ease-in-out .1s both
}

#wrapper .container .section .title-name {
    width: 6.2rem;
    height: .75rem;
    display: block;
    position: absolute;
    left: 1.24rem;
    top: 0;
    background-image: url(../public/image/icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat;
    text-indent: -99.99rem;
    z-index: 1
}

#wrapper .container #box1 {
    background-image: url(../public/image/page-3.jpg);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-position: center center
}

#wrapper .container #box1 .subscribe-box {
    width: 14.67rem;
    height: 2.72rem;
    position: absolute;
    bottom: -1rem;
    left: 50%;
    -webkit-transform: translateX(-44%);
    -moz-transform: translateX(-44%);
    -ms-transform: translateX(-44%);
    -o-transform: translateX(-44%);
    transform: translateX(-44%);
    /* background-image: url(../public/image/upper-box-mobile.png); */
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: .9rem
}

#wrapper .container #box1 .subscribe-box .bg-img {
    height: 2.72rem;
    width: 100%;
    background-image: url(../public/image/upper-box-mobile.png);
    margin: 0 auto;
    background-size: cover;
    position: absolute;
    bottom: -.6rem;
    pointer-events: none;
}

#wrapper .container #box1 .subscribe-box .btn {
    display: flex;
    width: 6.56rem;
    height: .89rem;
    margin: 0 auto;
}

#wrapper .container #box1 .subscribe-box .btn-subscribe {
    width: 3.6rem;
    height: .9rem;
    display: block;
    margin: 0 auto;
    text-indent: -99.99rem;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    background-image: url(../public/image/btn-subscribe.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box1 .subscribe-box .btn-subscribe:hover {
    -webkit-filter: contrast(130%);
    filter: contrast(130%)
}

#wrapper .container #box1 .subscribe-box .btn-download {
    width: 3.27rem;
    height: .9rem;
    display: block;
    margin: 0 auto;
    text-indent: -99.99rem;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    background-image: url(../public/image/btn-download.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box1 .subscribe-box .btn-download:hover {
    -webkit-filter: contrast(130%);
    filter: contrast(130%)
}

#wrapper .container #box1 .subscribe-box .subscribe-number {
    width: 3.6rem;
    height: .64rem;
    color: #f5ede1;
    font-weight: bold;
    background-image: url(../public/image/btn-di.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    text-shadow: 0 0 .1rem #000, 0 0 .1rem #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .25rem;
    letter-spacing: .01rem;
    margin-left: 5.535rem;
}

#wrapper .container #box1 .subscribe-box .subscribe-number .number {
    color: #ffd07b;
    margin: 0 .05rem
}

#wrapper .container #box1 .subscribe-box .btn-video {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    text-indent: -99.99rem;
    background-image: url(../public/image/btn-video-mobile.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: absolute;
    right: 6.53rem;
    top: -0.8rem;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box1 .subscribe-box .btn-video::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../public/image/btn-video-b-mobile.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box1 .subscribe-box .btn-video:hover {
    -webkit-filter: contrast(130%);
    filter: contrast(130%)
}

#wrapper .container #box1 .subscribe-box img {
    width: 100%
}

#wrapper .container #box1 .contact-us {
    width: .52rem;
    position: absolute;
    right: .525rem;
    bottom: 3.3rem;
    z-index: 2
}

#wrapper .container #box1 .contact-us a {
    width: .52rem;
    height: .53rem;
    float: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#wrapper .container #box1 .contact-us a .iconfont {
    color: #aea9a1;
    font-size: .3rem
}

#wrapper .container #box1 .contact-us a:hover .iconfont {
    color: #f5ede1
}

#wrapper .container #box1 .cadpa {
    width: .74rem;
    height: .94rem;
    position: absolute;
    right: .4rem;
    bottom: 2.15rem;
    z-index: 2
}

#wrapper .container #box1 .cadpa img {
    width: 100%
}

#wrapper .container #box1 .btn-event {
    position: absolute;
    right: .18rem;
    bottom: 5.55rem;
    width: 1.24rem;
    height: 1.08rem;
    text-indent: -99.99rem;
    background-image: url(../public/image/btn-event.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 2
}

#wrapper .container #box1 .bgbox {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden
}

#wrapper .container #box1 .bgbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../public/image/screen_tone.png) repeat;
    opacity: .15;
    z-index: 0
}

#wrapper .container #box1 .bgbox::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../public/image/heizhe2.png) center center / cover no-repeat;
    z-index: -1
}

#wrapper .container #box1 .bgbox #bgvideo {
    width: 100.1%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50.1%);
    z-index: -2;
    object-fit: cover
}

#wrapper .container #box2 .title-name {
    background-position: -3.81rem -9.26rem
}

#wrapper .container #box2 .reward-box {
    width: 17.24rem;
    height: 6.2rem;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url(../public/image/reward-box.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box2 .reward-box .reward-img {
    width: 6.7rem;
    height: 100%;
    position: relative
}

#wrapper .container #box2 .reward-box .reward-img span {
    display: block;
    position: absolute
}

#wrapper .container #box2 .reward-box .reward-img .img {
    width: 3.68rem;
    height: 5.49rem;
    top: .2rem;
    left: 1.9rem;
    background-image: url(../public/image/box1-npc-2-bg.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box2 .reward-box .reward-img .npc {
    width: 6.18rem;
    height: 9.27rem;
    top: .35rem;
    left: .45rem;
    background-image: url(../public/image/box1-npc-2.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box2 .reward-box .reward-img .bird {
    width: 2.75rem;
    height: 3.45rem;
    top: .9rem;
    right: 1.12rem;
    background-image: url(../public/image/reward-img.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 3
}

#wrapper .container #box2 .reward-box .reward-img .txt {
    width: 2.74rem;
    height: 2.84rem;
    position: absolute;
    left: .15rem;
    top: .2rem
}

#wrapper .container #box2 .reward-box .reward-img .txt .name-1 {
    width: 2.74rem;
    height: 2.84rem;
    top: 0;
    left: 0;
    background-image: url(../public/image/reward-name-1.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box2 .reward-box .reward-img .txt .name-2 {
    width: .4rem;
    height: 1.54rem;
    top: .3rem;
    left: .5rem;
    background-image: url(../public/image/reward-name-2.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box2 .reward-box .reward-list {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#wrapper .container #box2 .reward-box .reward-list .list-title {
    width: 9.72rem;
    height: .5rem;
    margin-top: .7rem;
    border-bottom: 1px solid #ae9577;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: self-end;
    -webkit-align-items: self-end;
    -moz-box-align: self-end;
    -ms-flex-align: self-end;
    align-items: self-end;
    font-family: 'SourceHanSerifCN-SemiBold';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: .05rem;
    margin-bottom: .1rem
}

#wrapper .container #box2 .reward-box .reward-list .list-title p {
    font-size: .25rem;
    color: #f5ede1
}

#wrapper .container #box2 .reward-box .reward-list .list-title span {
    font-size: .16rem;
    color: #ae9577;
    text-transform: uppercase;
    letter-spacing: .02rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#wrapper .container #box2 .reward-box .reward-list .list-box .give {
    width: 1.7rem;
    height: 4.05rem;
    background-image: url(../public/image/box1-icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-left: -0.15rem;
    text-indent: -99.99rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list {
    width: 8.3rem;
    z-index: 2
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li {
    width: 1.65rem;
    height: 3.43rem;
    float: left;
    text-indent: -99.99rem;
    background-image: url(../public/image/box1-icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat;
    position: relative
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(1) {
    background-position: -1.7rem 0
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(1)::after {
    left: .1rem !important;
    width: 1.45rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(2) {
    background-position: -3.35rem 0
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(3) {
    background-position: -5rem 0
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(4) {
    background-position: -6.65rem 0
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(5) {
    background-position: -8.3rem 0
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li:nth-child(5)::after {
    width: 1.56rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li::before {
    content: "";
    width: .52rem;
    height: .48rem;
    background-image: url(../public/image/box1-icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat;
    background-position: 0 -5.24rem;
    position: absolute;
    top: 3.48rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(1) {
    background-position: -1.7rem -3.43rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(2) {
    background-position: -3.35rem -3.43rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(3) {
    background-position: -5rem -3.43rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(4) {
    background-position: -6.65rem -3.43rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on:nth-child(5) {
    background-position: -8.3rem -3.43rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on span::after {
    content: "";
    width: .98rem;
    height: .84rem;
    position: absolute;
    right: -0.15rem;
    top: -0.1rem;
    background-image: url(../public/image/box1-icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat;
    background-position: 0 -4.17rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on::before {
    background-position: 0 -6.01rem
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.on::after {
    content: "";
    width: 1.56rem;
    height: .02rem;
    position: absolute;
    top: 3.7rem;
    left: 0;
    background: #ffd07b;
    z-index: 1
}

#wrapper .container #box2 .reward-box .reward-list .list-box .list li.done::after {
    width: 100%
}

#wrapper .container #box2 .reward-box .reward-list .list-box .progress {
    width: 8.05rem;
    height: .02rem;
    position: absolute;
    left: 1.66rem;
    top: 3.7rem;
    background: #806f58
}

#wrapper .container #box3 .title-name {
    background-position: -3.81rem -8.46rem
}

#wrapper .container #box3 .news-box {
    width: 17.24rem;
    height: 5.08rem;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 .22rem;
    display: flex;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box3 .news-box .index-news-banner {
    width: 8.75rem;
    height: 5.08rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/box-pic.png)
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner {
    width: 8.3rem;
    height: 4.65rem;
    position: relative;
    top: 0;
    left: .38rem
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-wrapper {
    pointer-events: none
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    border-radius: .05rem;
    overflow: hidden
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-wrapper .swiper-slide a {
    width: 100%;
    height: 100%;
    display: block
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-wrapper .swiper-slide a img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-wrapper::after {
    content: "";
    width: 8.39rem;
    height: 4.87rem;
    z-index: 5;
    position: absolute;
    left: -0.04rem;
    top: -0.1rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/img-mark.png)
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-pagination {
    width: 1.5rem;
    bottom: -0.63rem;
    text-align: left
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-pagination .swiper-pagination-bullet {
    width: .18rem;
    height: .19rem;
    opacity: 1;
    background: none;
    -o-background-size: .18rem .38rem;
    background-size: .18rem .38rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../public/image/btn-tab.png);
    cursor: pointer
}

#wrapper .container #box3 .news-box .index-news-banner .main-banner .swiper-pagination .swiper-pagination-bullet-active {
    background-position: center bottom
}

#wrapper .container #box3 .news-box .news-con {
    width: 7.51rem;
    position: relative
}

#wrapper .container #box3 .news-box .news-con .news-tab {
    margin: 0 auto;
    position: relative
}

#wrapper .container #box3 .news-box .news-con .news-tab .on {
    -webkit-transition: left .5s ease-in-out;
    -o-transition: left .5s ease-in-out;
    -moz-transition: left .5s ease-in-out;
    transition: left .5s ease-in-out
}

#wrapper .container #box3 .news-box .news-con .news-tab i {
    width: 1.86rem;
    height: .54rem;
    position: absolute;
    left: 1.3%;
    top: .15rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/btn-new-on.png);
    -webkit-transition: left .5s ease-in-out;
    -o-transition: left .5s ease-in-out;
    -moz-transition: left .5s ease-in-out;
    transition: left .5s ease-in-out
}

#wrapper .container #box3 .news-box .news-con .news-more {
    width: 7.23rem;
    height: .7rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: self-end;
    -webkit-align-items: self-end;
    -moz-box-align: self-end;
    -ms-flex-align: self-end;
    align-items: self-end;
    position: absolute;
    top: 4.37rem;
    left: .12rem;
    border-bottom: 1px solid #534a3d;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: .1rem
}

#wrapper .container #box3 .news-box .news-con .news-more a {
    font-size: .18rem;
    padding: .03rem .43rem;
    color: #ae9577;
    border: 1px solid #ae9577;
    border-radius: .7rem;
    font-weight: bold
}

#wrapper .container #box3 .news-box .news-con .news-more a:hover {
    color: #f5ede1;
    border: 1px solid #f5ede1
}

#wrapper .container #box3 .news-box .news-con .news-more span {
    font-size: .16rem;
    color: #ae9577;
    letter-spacing: .02rem;
    text-transform: uppercase
}

#wrapper .container #box3 .news-box .news-con .news-more::after,
#wrapper .container #box3 .news-box .news-con .news-more::before {
    content: "";
    width: .09rem;
    height: 100%;
    position: absolute;
    bottom: -1px;
    border-bottom: 1px solid #ffd07b
}

#wrapper .container #box3 .news-box .news-con .news-more::after {
    left: 0
}

#wrapper .container #box3 .news-box .news-con .news-more::before {
    right: 0
}

#wrapper .container #box3 .news-box .news-con .news-list {
    width: 7.23rem;
    height: 3.37rem;
    margin: 0 auto;
    position: relative
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li {
    height: .56rem;
    line-height: .56rem;
    border-bottom: 1px dashed #917c63;
    font-size: .16rem;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a {
    color: #b7b1a8
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:nth-child(1) {
    width: .65rem;
    color: #ffd07b;
    text-align: center
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:nth-child(2) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:nth-child(2) p {
    width: 5.6rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:nth-child(2) span {
    width: 1rem;
    text-align: center
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a.new,
#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul ul li a:hover {
    color: #f5ede1
}

#wrapper .container #box3 .news-box .news-con .news-list .news-list-ul.on {
    display: block
}

#wrapper .container #box4 .title-name {
    background-position: -3.81rem -7.66rem
}

#wrapper .container #box4 .role-box {
    width: 14.67rem;
    height: 6.2rem;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url(../public/image/role-box.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box4 .role-box .role-menu {
    width: 1.2rem;
    position: absolute;
    left: -1.6rem;
    top: .5rem;
    z-index: 2
}

#wrapper .container #box4 .role-box .role-menu a {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    margin-bottom: .15rem;
    opacity: .3;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box4 .role-box .role-menu a:nth-child(1) {
    background-image: url(../public/image/index-role-menu-1.png)
}

#wrapper .container #box4 .role-box .role-menu a:nth-child(2) {
    background-image: url(../public/image/index-role-menu-2.png)
}

#wrapper .container #box4 .role-box .role-menu a:nth-child(3) {
    background-image: url(../public/image/index-role-menu-3.png)
}

#wrapper .container #box4 .role-box .role-menu a:nth-child(4) {
    background-image: url(../public/image/index-role-menu-4.png)
}

#wrapper .container #box4 .role-box .role-menu a span {
    color: #ffd07b;
    font-size: .16rem;
    display: none;
    text-align: center;
    padding-top: .8rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#wrapper .container #box4 .role-box .role-menu a.current-menu-item {
    opacity: 1
}

#wrapper .container #box4 .role-box .role-menu a.current-menu-item span {
    display: block
}

#wrapper .container #box4 .role-box .index-role-banner {
    width: 14.67rem;
    height: 6.2rem;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner {
    width: 100%;
    height: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box {
    position: relative;
    z-index: 1
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .camp .tips {
    width: 3.7rem;
    height: .97rem;
    position: absolute;
    left: .55rem;
    top: .85rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/role-box-bg-top.png)
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .camp .img {
    width: 4.5rem;
    height: 4.5rem;
    position: absolute;
    right: .25rem;
    top: .25rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .camp .img img {
    width: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live {
    width: 1.5rem;
    height: .38rem;
    display: inline-block;
    position: absolute;
    top: 4.6rem;
    left: .6rem;
    z-index: 8
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live span {
    width: 100%;
    height: 100%;
    display: block;
    font-weight: bold;
    font-size: .21rem;
    border: 1px solid #ab9377;
    border-radius: .5rem;
    background: #1a1611;
    color: #ab9377;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .3rem;
    position: relative
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live span::after {
    content: "";
    width: 0;
    height: auto;
    border-width: .08rem .08rem .08rem .14rem;
    border-style: solid;
    border-color: transparent transparent transparent #ab9377;
    position: absolute;
    right: .16rem;
    top: .1rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live span::before {
    content: "";
    position: absolute;
    top: .1rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-on span {
    border-color: #f5ede1;
    color: #f5ede1
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-on span::after {
    width: .02rem;
    height: .15rem;
    background: #f5ede1;
    right: .35rem;
    border: none
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-on span::before {
    width: .02rem;
    height: .15rem;
    background: #f5ede1;
    right: .27rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live.btn-live-loading span::after {
    width: .18rem;
    height: .18rem;
    border-radius: 50%;
    top: .08rem;
    right: .21rem;
    border: .02rem solid #ab9377;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: sweep 1s linear alternate infinite, rota .8s linear infinite;
    -moz-animation: sweep 1s linear alternate infinite, rota .8s linear infinite;
    -o-animation: sweep 1s linear alternate infinite, rota .8s linear infinite;
    animation: sweep 1s linear alternate infinite, rota .8s linear infinite
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .btn-live::after {
    content: "";
    width: 1.46rem;
    height: .07rem;
    position: absolute;
    left: 50%;
    margin-left: -0.73rem;
    bottom: -0.22rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/role-box-bg-b.png)
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character {
    width: 12rem;
    height: 14.4rem;
    position: absolute;
    left: 0;
    top: -1.8rem;
    z-index: 5
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-image img {
    width: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-video {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .character-video video {
    width: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .character-box .character-tab .character .current-item {
    display: block
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info {
    width: 6.05rem;
    position: absolute;
    right: 0;
    top: .7rem;
    z-index: 6
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit {
    width: 5.46rem;
    height: 1.3rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p {
    width: 100%;
    height: 100%;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/info-tit.png);
    position: relative
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p .name {
    width: 4.8rem;
    height: 1.6rem;
    position: absolute;
    left: -0.43rem;
    top: -0.1rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p .name img {
    height: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p .career {
    width: 1.1rem;
    height: .6rem;
    position: absolute;
    right: 0;
    top: .64rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-tit p .career img {
    width: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-cv {
    height: .6rem;
    font-size: .25rem;
    position: relative
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-cv p {
    width: 100%;
    height: 100%;
    padding-left: .3rem;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-cv p span {
    color: #ffd07b
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-cv p::after {
    content: "";
    width: .24rem;
    height: .3rem;
    position: absolute;
    left: 0;
    top: .15rem;
    background-image: url(../public/image/icon.png);
    -o-background-size: 10rem 10rem;
    background-size: 10rem 10rem;
    background-repeat: no-repeat;
    background-position: 0 -4.92rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info .info-explain {
    width: 5.46rem;
    font-size: .18rem;
    color: #b7b1a8;
    line-height: .25rem
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t1 {
    width: 6.93rem;
    height: 5.44rem;
    position: absolute;
    top: .38rem;
    left: 1.9rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/role-box-bg-xie.png)
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t2 {
    width: 5rem;
    height: 5.5rem;
    position: absolute;
    top: .38rem;
    left: -1.53rem;
    overflow: hidden;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    transform: skewX(-30deg)
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t2 span {
    width: 6.6rem;
    height: 1rem;
    position: absolute;
    left: 2.6rem;
    top: 3.12rem;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    transform: skewX(30deg);
    display: block
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t2 span i {
    display: block
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t2 span i img {
    width: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t3 {
    width: 5rem;
    height: 5.5rem;
    position: absolute;
    top: .38rem;
    left: 3.46rem;
    overflow: hidden;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    transform: skewX(-30deg)
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t3 span {
    width: 6.6rem;
    height: 1rem;
    position: absolute;
    left: -2.39rem;
    top: 3.12rem;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    transform: skewX(30deg);
    display: block
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t3 span i {
    display: block
}

#wrapper .container #box4 .role-box .index-role-banner .main-banner .swiper-slide .info-box .info-tab .t3 span i img {
    width: 100%
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper {
    width: 4.8rem;
    height: 1.08rem;
    position: absolute;
    left: 8.45rem;
    top: 4.3rem
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner {
    width: 4.8rem;
    height: 1.08rem;
    overflow: hidden
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner .swiper-wrapper .swiper-slide {
    width: .96rem;
    height: 1.08rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/role-box-btn-1.png);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner .swiper-wrapper .swiper-slide img {
    width: .7rem
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .thumbnails-banner .swiper-wrapper .swiper-slide-thumb-active {
    background-image: url(../public/image/role-box-btn-2.png)
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-prev,
#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-next {
    width: .41rem;
    height: .41rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/btn-arr.png);
    margin-top: -0.2rem !important
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-prev::after,
#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-next::after {
    display: none
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-prev {
    left: -0.4rem
}

#wrapper .container #box4 .role-box .index-role-banner .thumbnails-banner-wrapper .swiper-button-next {
    right: -0.4rem;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

#wrapper .container #box4 .role-box .index-role-banner.current-item {
    opacity: 1
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-tab {
    -webkit-animation: eff_move8 .5s ease-in-out -0.1s both;
    -moz-animation: eff_move8 .5s ease-in-out -0.1s both;
    -o-animation: eff_move8 .5s ease-in-out -0.1s both;
    animation: eff_move8 .5s ease-in-out -0.1s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .character-box .character {
    -webkit-animation: eff_move9 .5s ease-in-out 0s both;
    -moz-animation: eff_move9 .5s ease-in-out 0s both;
    -o-animation: eff_move9 .5s ease-in-out 0s both;
    animation: eff_move9 .5s ease-in-out 0s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .character-box .btn-live {
    -webkit-animation: eff_move8 .5s ease-in-out .3s both;
    -moz-animation: eff_move8 .5s ease-in-out .3s both;
    -o-animation: eff_move8 .5s ease-in-out .3s both;
    animation: eff_move8 .5s ease-in-out .3s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-tab span i img {
    -webkit-animation: eff_move8 .5s ease-in-out .2s both;
    -moz-animation: eff_move8 .5s ease-in-out .2s both;
    -o-animation: eff_move8 .5s ease-in-out .2s both;
    animation: eff_move8 .5s ease-in-out .2s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-tit p {
    -webkit-animation: eff_move8 .5s ease-in-out .3s both;
    -moz-animation: eff_move8 .5s ease-in-out .3s both;
    -o-animation: eff_move8 .5s ease-in-out .3s both;
    animation: eff_move8 .5s ease-in-out .3s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-cv p {
    -webkit-animation: eff_move8 .5s ease-in-out .4s both;
    -moz-animation: eff_move8 .5s ease-in-out .4s both;
    -o-animation: eff_move8 .5s ease-in-out .4s both;
    animation: eff_move8 .5s ease-in-out .4s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-explain p:nth-child(1) {
    -webkit-animation: eff_move8 .5s ease-in-out .5s both;
    -moz-animation: eff_move8 .5s ease-in-out .5s both;
    -o-animation: eff_move8 .5s ease-in-out .5s both;
    animation: eff_move8 .5s ease-in-out .5s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-explain p:nth-child(2) {
    -webkit-animation: eff_move8 .5s ease-in-out .6s both;
    -moz-animation: eff_move8 .5s ease-in-out .6s both;
    -o-animation: eff_move8 .5s ease-in-out .6s both;
    animation: eff_move8 .5s ease-in-out .6s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-explain p:nth-child(3) {
    -webkit-animation: eff_move8 .5s ease-in-out .7s both;
    -moz-animation: eff_move8 .5s ease-in-out .7s both;
    -o-animation: eff_move8 .5s ease-in-out .7s both;
    animation: eff_move8 .5s ease-in-out .7s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-explain p:nth-child(4) {
    -webkit-animation: eff_move8 .5s ease-in-out .8s both;
    -moz-animation: eff_move8 .5s ease-in-out .8s both;
    -o-animation: eff_move8 .5s ease-in-out .8s both;
    animation: eff_move8 .5s ease-in-out .8s both
}

#wrapper .container #box4 .role-box .index-role-banner.current-item .main-banner .swiper-slide.swiper-slide-active .info-box .info-explain p:nth-child(5) {
    -webkit-animation: eff_move8 .5s ease-in-out .9s both;
    -moz-animation: eff_move8 .5s ease-in-out .9s both;
    -o-animation: eff_move8 .5s ease-in-out .9s both;
    animation: eff_move8 .5s ease-in-out .9s both
}

#wrapper .container #box5 .title-name {
    background-position: -3.81rem -6.87rem
}

#wrapper .container #box5 .world-box {
    width: 14.08rem;
    height: 5.43rem;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    background-image: url(../public/image/world-box.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

#wrapper .container #box5 .world-box .index-world-banner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner {
    width: 13.15rem;
    height: 4.7rem;
    position: relative;
    top: .4rem;
    left: .5rem
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .image {
    width: 8.09rem;
    height: 4.31rem;
    margin: .15rem 0 0 .2rem
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .image img {
    width: 100%;
    border-radius: .05rem .2rem .05rem .2rem;
    overflow: hidden;
    -webkit-box-shadow: 0 .05rem .18rem #000;
    box-shadow: 0 .05rem .18rem #000
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info {
    width: 3.82rem;
    margin: .13rem 0 0 .4rem
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-tit {
    width: 100%;
    height: .63rem;
    margin-bottom: .15rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: self-end;
    -webkit-align-items: self-end;
    -moz-box-align: self-end;
    -ms-flex-align: self-end;
    align-items: self-end;
    background-image: url(../public/image/world-tit-bg.png);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: .03rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: space-between
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-tit p {
    font-size: .4rem;
    color: #f5ede1;
    position: relative;
    font-weight: bold
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-tit span {
    font-size: .24rem;
    color: #ae9577;
    text-transform: uppercase;
    letter-spacing: .02rem;
    margin-left: -0.1rem;
    font-family: 'Didot'
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info .info-explain {
    height: 3.1rem;
    font-size: .18rem;
    line-height: .27rem;
    color: #b7b1a8
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info i {
    width: 3.77rem;
    height: .42rem;
    display: block;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/world-box-bg-bot.png)
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .image,
#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide .info {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    -moz-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0)
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.slide-3 .info .info-tit span,
#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.slide-5 .info .info-tit span,
#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.slide-6 .info .info-tit span {
    font-size: .16rem
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.swiper-slide-duplicate .image,
#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.swiper-slide-duplicate .info {
    opacity: 1 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.swiper-slide-active .image img {
    -webkit-animation: eff_move7 .5s ease-in-out 0s both;
    -moz-animation: eff_move7 .5s ease-in-out 0s both;
    -o-animation: eff_move7 .5s ease-in-out 0s both;
    animation: eff_move7 .5s ease-in-out 0s both
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.swiper-slide-active .info .info-tit {
    -webkit-animation: eff_move7 .5s ease-in-out .1s both;
    -moz-animation: eff_move7 .5s ease-in-out .1s both;
    -o-animation: eff_move7 .5s ease-in-out .1s both;
    animation: eff_move7 .5s ease-in-out .1s both
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.swiper-slide-active .info .info-explain {
    -webkit-animation: eff_move7 .5s ease-in-out .2s both;
    -moz-animation: eff_move7 .5s ease-in-out .2s both;
    -o-animation: eff_move7 .5s ease-in-out .2s both;
    animation: eff_move7 .5s ease-in-out .2s both
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-wrapper .swiper-slide.swiper-slide-active .info i {
    -webkit-animation: eff_move7 .5s ease-in-out .3s both;
    -moz-animation: eff_move7 .5s ease-in-out .3s both;
    -o-animation: eff_move7 .5s ease-in-out .3s both;
    animation: eff_move7 .5s ease-in-out .3s both
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination {
    width: 2.75rem;
    left: -3.2rem;
    top: 0
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet {
    width: 100%;
    height: .47rem;
    opacity: 1;
    background: none;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: self-end;
    -webkit-align-items: self-end;
    -moz-box-align: self-end;
    -ms-flex-align: self-end;
    align-items: self-end;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: .05rem;
    color: #909090;
    margin-bottom: .1rem;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet span {
    font-size: .25rem;
    font-weight: bold;
    position: relative
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet span::after {
    content: "";
    width: .05rem;
    height: .05rem;
    background: #ffd07b;
    position: absolute;
    left: -0.2rem;
    top: 50%;
    margin-top: -0.02rem;
    opacity: 0
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet i {
    font-size: .12rem;
    color: #ffd07b;
    text-transform: uppercase;
    font-style: normal;
    padding-bottom: .03rem;
    display: none
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet-active {
    border-bottom: 1px solid #ffd07b
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet-active span {
    color: #f5ede1;
    padding-left: .2rem;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet-active span::after {
    left: 0;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box5 .world-box .index-world-banner .main-banner .swiper-pagination .swiper-pagination-bullet-active i {
    display: block
}

#wrapper .container #box5 .world-box .index-world-banner .swiper-button-prev,
#wrapper .container #box5 .world-box .index-world-banner .swiper-button-next {
    display: none
}

#wrapper .container #box6 .title-name {
    background-position: -3.81rem -5.27rem
}

#wrapper .container #box6 .media-box {
    width: 15.9rem;
    height: 5rem;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box6 .media-box ul {
    display: flex
}

#wrapper .container #box6 .media-box ul li {
    width: 4.96rem;
    height: 3.96rem;
    position: relative
}

#wrapper .container #box6 .media-box ul li::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/media-nav-bg.png)
}

#wrapper .container #box6 .media-box ul li .media-img {
    width: 4.96rem;
    height: 3.18rem;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 2.1rem bottom;
    transform: scale(.9);
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box6 .media-box ul li .media-img img {
    width: 100%
}

#wrapper .container #box6 .media-box ul li .media-img::before {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: -0.1rem;
    top: .2rem;
    z-index: 3;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/media-btn-on.png);
    opacity: 0
}

#wrapper .container #box6 .media-box ul li .media-tit {
    position: absolute;
    left: .4rem;
    bottom: .05rem;
    line-height: .28rem;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box6 .media-box ul li .media-tit span {
    color: #ae9577;
    font-family: 'Didot';
    font-size: .27rem
}

#wrapper .container #box6 .media-box ul li .media-tit p {
    color: #b7b1a8;
    font-size: .34rem;
    font-weight: bold;
    position: relative;
    padding-left: .42rem
}

#wrapper .container #box6 .media-box ul li .media-tit p::before {
    content: "";
    width: .34rem;
    height: .34rem;
    position: absolute;
    left: -0.02rem;
    top: 0;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: .7
}

#wrapper .container #box6 .media-box ul li.video p::before {
    background-image: url(../public/image/media-nav-1-img.png)
}

#wrapper .container #box6 .media-box ul li.wallpaper p::before {
    background-image: url(../public/image/media-nav-2-img.png)
}

#wrapper .container #box6 .media-box ul li.cartoon p::before {
    background-image: url(../public/image/media-nav-3-img.png)
}

#wrapper .container #box6 .media-box ul li:hover::before {
    background-image: url(../public/image/media-nav-bg-on.png)
}

#wrapper .container #box6 .media-box ul li:hover .media-img {
    transform: scale(1)
}

#wrapper .container #box6 .media-box ul li:hover .media-img::before {
    opacity: 1
}

#wrapper .container #box6 .media-box ul li:hover .media-tit span {
    color: #ffd07b
}

#wrapper .container #box6 .media-box ul li:hover .media-tit p {
    color: #f5ede1
}

#wrapper .container #box6 .media-box ul li:hover .media-tit p::before {
    opacity: 1
}

#wrapper .container #box7 .title-name {
    background-position: -3.81rem -6.07rem
}

#wrapper .container #box7 .feature-box {
    width: 13.74rem;
    height: 6.39rem;
    position: absolute;
    top: 50%;
    right: 1.49rem;
    -webkit-transform: translateY(-52%);
    -moz-transform: translateY(-52%);
    -ms-transform: translateY(-52%);
    -o-transform: translateY(-52%);
    transform: translateY(-52%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner {
    width: 13.76rem;
    height: 6.41rem;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #000;
    border: 1px solid #5b4d32
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide {
    width: 11.32rem !important;
    height: 6.39rem !important;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    -o-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    background: #000
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide span img {
    width: 100%;
    border: 1px solid #fbd688;
    box-sizing: border-box;
    opacity: .5
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-active {
    width: 11.32rem !important;
    z-index: 4;
    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    -o-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-active img {
    opacity: 1 !important;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-prev {
    z-index: 3;
    -webkit-transform: translate(-60.8%, -50%) !important;
    -moz-transform: translate(-60.8%, -50%) !important;
    -ms-transform: translate(-60.8%, -50%) !important;
    -o-transform: translate(-60.8%, -50%) !important;
    transform: translate(-60.8%, -50%) !important
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-prev img {
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-next {
    z-index: 3;
    -webkit-transform: translate(-39.1%, -50%) !important;
    -moz-transform: translate(-39.1%, -50%) !important;
    -ms-transform: translate(-39.1%, -50%) !important;
    -o-transform: translate(-39.1%, -50%) !important;
    transform: translate(-39.1%, -50%) !important
}

#wrapper .container #box7 .feature-box .index-feature-banner .main-banner .swiper-wrapper .swiper-slide-next img {
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear
}

#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev,
#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next {
    width: 1.19rem;
    height: 6.41rem;
    margin-top: -3.19rem;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/feature-arr.png);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev::after,
#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next::after {
    display: none
}

#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev::before,
#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next::before {
    content: "";
    width: .41rem;
    height: .41rem;
    background: none;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../public/image/btn-arr.png);
    margin-top: -0.2rem !important
}

#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-prev {
    left: -1.18rem;
    border: 1px solid #5b4d32
}

#wrapper .container #box7 .feature-box .index-feature-banner .swiper-button-next {
    right: -1.2rem;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 1px solid #5b4d32
}

#wrapper .container #box8 {
    background-image: url(../public/image/page-3.jpg);
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-position: center center
}

#wrapper .container #box8 .swiper-wrapper .swiper-slide-bg-1 {
    background-image: url(../public/image/tu1_2.jpg);
    height: 100vh;
    width: 100vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top
}

#wrapper .container #box8 .swiper-wrapper .swiper-slide-bg-2 {
    background-image: url(../public/image/tu2_2.jpg);
    height: 100vh;
    width: 100vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top
}

#wrapper .container #box8 .swiper-wrapper .swiper-slide-bg-3 {
    background-image: url(../public/image/tu3_2.jpg);
    height: 100vh;
    width: 100vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top
}

#wrapper .container #box8 .info {
    width: 9.8rem;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -60%);
    -moz-transform: translate(-50%, -60%);
    -ms-transform: translate(-50%, -60%);
    -o-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-shadow: 0 0 .2rem #000;
    display: flex;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#wrapper .container #box8 .info .txt {
    text-align: center
}

#wrapper .container #box8 .info .txt p {
    font-weight: bold;
    font-size: .43rem;
    letter-spacing: .18rem;
    margin-bottom: .1rem
}

#wrapper .container #box8 .info .txt span {
    font-family: 'Didot';
    font-size: .28rem;
    letter-spacing: .01rem;
    font-style: italic;
    font-style: oblique
}

#wrapper .container #box8 .scroll {
    width: .95rem;
    height: .16rem;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: -0.8rem;
    left: 50%;
    margin-left: -0.5rem;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

#wrapper .container #box8 .scroll::after,
#wrapper .container #box8 .scroll::before {
    content: "";
    width: 100%;
    height: 1rem;
    position: absolute;
    right: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 50%;
}

.mobile-show #wrapper .container #box8 .scroll::after {
    background-size: 90%;
    top: -0.25rem;
}

.mobile-show #wrapper .container #box8 .scroll::before {
    background-size: 90%;
}

#wrapper .container #box8 .scroll::after {
    background-image: url(../public/image/xiahua_1.png);
    top: -0.3rem
}

#wrapper .container #box8 .scroll::before {
    background-image: url(../public/image/xiahua_2.png);
    top: -0.4rem
}

#wrapper .container #box8 .footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 2px solid #ffd07b;
    z-index: 2;
}

#pop_sc {
    opacity: .8 !important
}

@-moz-keyframes eff_op1 {
    0% {
        opacity: 0
    }

    100% {
        opacity: .7
    }
}

@-o-keyframes eff_op1 {
    0% {
        opacity: 0
    }

    100% {
        opacity: .7
    }
}

@keyframes eff_op1 {
    0% {
        opacity: 0
    }

    100% {
        opacity: .7
    }
}

@-webkit-keyframes eff_op1 {
    0% {
        opacity: 0
    }

    100% {
        opacity: .7
    }
}

@-moz-keyframes eff_op2 {
    0% {
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes eff_op2 {
    0% {
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@keyframes eff_op2 {
    0% {
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes eff_op2 {
    0% {
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes eff_op3 {

    0%,
    100% {
        opacity: 1;
        -moz-transform: scale(1)
    }

    50% {
        opacity: .7;
        -moz-transform: scale(1.3)
    }
}

@-o-keyframes eff_op3 {

    0%,
    100% {
        opacity: 1;
        -o-transform: scale(1)
    }

    50% {
        opacity: .7;
        -o-transform: scale(1.3)
    }
}

@keyframes eff_op3 {

    0%,
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    50% {
        opacity: .7;
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3)
    }
}

@-webkit-keyframes eff_op3 {

    0%,
    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }

    50% {
        opacity: .7;
        -webkit-transform: scale(1.3)
    }
}

@-moz-keyframes eff_up {

    0%,
    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

    50% {
        -moz-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 1
    }

    90% {
        -moz-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
}

@-o-keyframes eff_up {

    0%,
    100% {
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

    50% {
        -o-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 1
    }

    90% {
        -o-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
}

@keyframes eff_up {

    0%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

    50% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 1
    }

    90% {
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
}

@-webkit-keyframes eff_up {

    0%,
    100% {
        -webkit-transform: translateY(0);
        opacity: 0
    }

    50% {
        -webkit-transform: translateY(10px);
        opacity: 1
    }

    90% {
        -webkit-transform: translateY(20px);
        opacity: 0
    }
}

@-moz-keyframes eff_up1 {
    0% {
        opacity: 0;
        -moz-transform: translateY(85px);
        transform: translateY(85px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes eff_up1 {
    0% {
        opacity: 0;
        -o-transform: translateY(85px);
        transform: translateY(85px)
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes eff_up1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(85px);
        -moz-transform: translateY(85px);
        -o-transform: translateY(85px);
        transform: translateY(85px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes eff_up1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(85px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes eff_up2 {
    0% {
        opacity: 0;
        -moz-transform: translateY(-85px);
        transform: translateY(-85px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes eff_up2 {
    0% {
        opacity: 0;
        -o-transform: translateY(-85px);
        transform: translateY(-85px)
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes eff_up2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-85px);
        -moz-transform: translateY(-85px);
        -o-transform: translateY(-85px);
        transform: translateY(-85px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes eff_up2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-85px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-webkit-keyframes eff_move1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes eff_move1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes eff_move1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes eff_move1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes eff_move3 {
    0% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }
}

@-moz-keyframes eff_move3 {
    0% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }
}

@-o-keyframes eff_move3 {
    0% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }
}

@keyframes eff_move3 {
    0% {
        opacity: .3;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px)
    }
}

@-webkit-keyframes eff_move2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes eff_move2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-o-keyframes eff_move2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes eff_move2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes eff_move4 {
    0% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }
}

@-moz-keyframes eff_move4 {
    0% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }
}

@-o-keyframes eff_move4 {
    0% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }
}

@keyframes eff_move4 {
    0% {
        opacity: .3;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px)
    }
}

@-moz-keyframes eff_move5 {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(200px);
        transform: translateY(200px)
    }
}

@-o-keyframes eff_move5 {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -o-transform: translateY(200px);
        transform: translateY(200px)
    }
}

@keyframes eff_move5 {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -o-transform: translateY(200px);
        transform: translateY(200px)
    }
}

@-webkit-keyframes eff_move5 {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(200px)
    }
}

@-moz-keyframes eff_move6 {
    0% {
        opacity: 0;
        -moz-transform: translateY(200px);
        transform: translateY(200px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes eff_move6 {
    0% {
        opacity: 0;
        -o-transform: translateY(200px);
        transform: translateY(200px)
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes eff_move6 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -o-transform: translateY(200px);
        transform: translateY(200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes eff_move6 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-webkit-keyframes eff_move7 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes eff_move7 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-o-keyframes eff_move7 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes eff_move7 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes eff_move8 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes eff_move8 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-o-keyframes eff_move8 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes eff_move8 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes eff_move9 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes eff_move9 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-o-keyframes eff_move9 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes eff_move9 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rota {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes rota {
    from {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes rota {
    from {
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rota {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes sweep {
    0% {
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%)
    }

    50% {
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%);
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%)
    }

    100% {
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%);
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%)
    }
}

@-moz-keyframes sweep {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%)
    }

    50% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%)
    }

    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%)
    }
}

@-o-keyframes sweep {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%)
    }

    50% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%)
    }

    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%)
    }
}

@keyframes sweep {
    0% {
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%)
    }

    50% {
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%);
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%)
    }

    100% {
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%);
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%)
    }
}