::-webkit-scrollbar {
    position: absolute;
    right: 0;
    top: 0
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-thumb {
    background: #ec6756;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

::-webkit-scrollbar-track {
    background: 0 0
}

@-webkit-keyframes Move {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

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

@-moz-keyframes Move {
    from {
        -moz-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

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

@-o-keyframes Move {
    from {
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

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

@keyframes Move {
    from {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }

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

@-webkit-keyframes playFrame {
    from {
        background-position: 0 0
    }

    to {
        background-position: 0 bottom
    }
}

@-moz-keyframes playFrame {
    from {
        background-position: 0 0
    }

    to {
        background-position: 0 bottom
    }
}

@-o-keyframes playFrame {
    from {
        background-position: 0 0
    }

    to {
        background-position: 0 bottom
    }
}

@keyframes playFrame {
    from {
        background-position: 0 0
    }

    to {
        background-position: 0 bottom
    }
}

@-webkit-keyframes Scale1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
        transform: scale(.2)
    }

    50% {
        opacity: 1
    }

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

@-moz-keyframes Scale1 {
    0% {
        opacity: 0;
        -moz-transform: scale(.2);
        transform: scale(.2)
    }

    50% {
        opacity: 1
    }

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

@-o-keyframes Scale1 {
    0% {
        opacity: 0;
        -o-transform: scale(.2);
        transform: scale(.2)
    }

    50% {
        opacity: 1
    }

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

@keyframes Scale1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
        -moz-transform: scale(.2);
        -o-transform: scale(.2);
        transform: scale(.2)
    }

    50% {
        opacity: 1
    }

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

#fixedNav ul li.active::after,
#fixedNav ul li::before,
.pop .content .close,
.wrapper1 .logo,
.wrapper1 .top-links,
.wrapper1::after,
.wrapper4 .swiper-btn{
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/icon.png?v=2024-10-30-11-09-16-573);
    background-repeat: no-repeat
}

.wrapper {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center top
}

.wrapper.wrapper1 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/1.jpg?v=2024-10-30-11-09-16-573)
}

.wrapper.wrapper2 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/2.jpg?v=2024-10-30-11-09-16-573)
}

.wrapper.wrapper3 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/3.jpg?v=2024-10-30-11-09-16-573)
}

.wrapper.wrapper4 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/4.jpg?v=5)
}

.wrapper.wrapper5 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/5.jpg?v=2025-10-30-11-09-16-573)
}

.wrapper.wrapper6 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/6.jpg?v=5)
}

.wrapper.wrapper7 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/7.jpg?v=2024-10-30-11-09-16-573)
}

.wrapper.wrapper8 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/8.jpg?v=5)
}

.wrapper.wrapper9 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/9.jpg?v=2024-10-30-11-09-16-573)
}

.wrapper1 {
    height: 1015px
}

.wrapper1 .logo {
    position: absolute;
    width: 118px;
    height: 112px;
    background-position: 0 0;
    left: 60px;
    top: 30px;
    z-index: 2
}

.wrapper1::before {
    position: absolute;
    content: "";
    width: 826px;
    height: 532px;
    background: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/slg.png?v=2024-10-30-11-09-16-573);
    left: 50%;
    margin-left: -403px;
    bottom: 84px;
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    -o-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

.wrapper1::after {
    position: absolute;
    content: "";
    width: 61px;
    height: 34px;
    left: 50%;
    margin-left: -30px;
    background-position: -530px 0;
    bottom:80px;
    -webkit-animation: Move 1.6s linear infinite;
    -moz-animation: Move 1.6s linear infinite;
    -o-animation: Move 1.6s linear infinite;
    animation: Move 1.6s linear infinite
}

.wrapper1 .top-links {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 146px;
    height: 35px;
    z-index: 2;
    right: 40px;
    top: 40px;
    background-position: -191px 0
}

.wrapper1 .top-links li {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
}

.wrapper1 .top-links li a {
    position: absolute;
    width: 100%;
    height: 100%
}

.wrapper2 {
    height: 641px
}

.wrapper3 {
    height: 695px
}



.wrapper4 {
    height: 861px
}

.wrapper4 ul {
    position: absolute;
    width: 436px;
    left: 50%;
    margin-left: -218px;
    top: 120px
}

.wrapper4 ul li {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/tab_ben.png);
    width: 202px;
    height: 61px;
    float: left;
    cursor: pointer;
}

.wrapper4 ul li.active {
    cursor: default
}

.wrapper4 ul li:nth-of-type(1) {
    background-position: 0 0;
    margin-right: 32px;
}

.wrapper4 ul li:nth-of-type(1).active {
    background-position: 0 -60px
}

.wrapper4 ul li:nth-of-type(2) {
    background-position: -234px 0
}

.wrapper4 ul li:nth-of-type(2).active {
    background-position: -234px -60px
}

.wrapper4 .img-wrapper {
    position: absolute;
    width: 726px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    margin-left: -363px;
    top: 160px;
}

.wrapper4 .img-wrapper div {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .1s;
    -moz-animation-duration: .1s;
    -o-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}
.wrapper4 .img-wrapper div.tab_pic1 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/tab_pic1.png);
    width: 701px;
    height: 691px;
    display: none;
}
.wrapper4 .img-wrapper div.tab_pic2 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/tab_pic2.png);
    width: 726px;
    height: 586px;
}

.wrapper4 .img-wrapper div.active {
    display: block
}

.wrapper4 .swiper-container {
    height: 331px;
    width: 607px;
    padding-top: 40px
}

.wrapper4 .swiper-container .swiper-slide {
    position: relative;
    background-repeat: no-repeat
}

.wrapper4 .swiper-container .swiper-slide.swiper-1 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/img-1.png?v=2024-10-30-11-09-16-573)
}

.wrapper4 .swiper-container .swiper-slide.swiper-2 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/img-2.png?v=2024-10-30-11-09-16-573)
}

.wrapper4 .swiper-container .swiper-slide img {
    position: absolute;
    left: 60px;
    top: 48px;
    width: 400px
}

.wrapper4 .swiper-btn {
    position: absolute;
    width: 34px;
    height: 61px;
    cursor: pointer;
    left: 50%;
    top:176px
}

.wrapper4 .swiper-btn.prev-btn {
    margin-left: -460px;
    background-position: -378px 0
}

.wrapper4 .swiper-btn.prev-btn:hover {
    background-position: -378px -75px
}

.wrapper4 .swiper-btn.next-btn {
    margin-left: 420px;
    background-position: -440px 0
}

.wrapper4 .swiper-btn.next-btn:hover {
    background-position: -440px -75px
}
.wrapper5 {
    height: 615px
}



.wrapper6 {
    height:741px
}
.wrapper6 a {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    bottom: 257px;
    margin-left: -466px
}
.wrapper7 {
    height:417px
}

.wrapper8 {
    height: 681px
}
.wrapper9 {
    height: 813px
}


.pop .content {
    background-color: transparent;
    -moz-background-size: cover;
    background-size: cover
}

.pop .content .close {
    width: 50px;
    height: 50px;
    border: none;
    background-position: -644px 0
}

#Pop1 .content {
    width: 936.7px;
    height: 739.5px;
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/pop-1.png?v=2024-10-30-11-09-16-573)
}

#Pop2 .content {
    width: 936.7px;
    height: 739.5px;
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/pop-2.png?v=2024-10-30-11-09-16-573)
}

#Pop2 .content .weapon {
    width: 273px;
    height: 273px;
    position: absolute;
    z-index: 1;
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/weapon.png?v=2024-10-30-11-09-16-573);
    -moz-background-size: 273px 2730px;
    background-size: 273px 2730px;
    -webkit-animation: playFrame 1s steps(9) infinite;
    -moz-animation: playFrame 1s steps(9) infinite;
    -o-animation: playFrame 1s steps(9) infinite;
    animation: playFrame 1s steps(9) infinite;
    left: 50%;
    margin-left: -135px;
    top: 350px
}

#Pop2 .content .circle {
    width: 60px;
    height: 60px;
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 50%;
    margin-left: 160px;
    top: 460px
}

#Pop2 .content .circle em {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-left: -10px;
    margin-top: -10px;
    z-index: 3;
    background-color: #ffe04f
}

#Pop2 .content .circle span {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation-name: Scale1;
    -moz-animation-name: Scale1;
    -o-animation-name: Scale1;
    animation-name: Scale1;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 1.2s;
    -moz-animation-duration: 1.2s;
    -o-animation-duration: 1.2s;
    animation-duration: 1.2s;
    border: 1px solid #ffe04f
}

#Pop2 .content .circle span:nth-child(1) {
    width: 28px;
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    background-color: rgba(255, 224, 79, .5)
}

#Pop2 .content .circle span:nth-child(2) {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    background-color: rgba(255, 224, 79, .3)
}

#Pop2 .content .circle span:nth-child(3) {
    width: 66px;
    height: 66px;
    margin-left: -33px;
    margin-top: -33px;
    background-color: rgba(255, 224, 79, .2)
}

#Pop2 .content .hover {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/hover.png?v=2024-10-30-11-09-16-573);
    width: 169px;
    height: 345px;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    left: 50%;
    margin-left: 260px;
    top: 300px;
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
}

#Pop2 .content .hover.show {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

#Pop3 .content {
    width: 936.7px;
    height: 739.5px;
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/pop-3.png?v=2024-10-30-11-09-16-573)
}

#Pop3 .content ul {
    padding: 250px 0;
    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-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#Pop3 .content ul li {
    width: 275px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-bottom: 30px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#Pop3 .content ul li .img-wrapper {
    width: 110px;
    height: 110px;
    margin-right: 15px;
    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;
    position: relative;
    overflow: hidden
}

#Pop3 .content ul li .img-wrapper::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/filter.png?v=2024-10-30-11-09-16-573)
}

#Pop3 .content ul li .img-wrapper img {
    width: 82px;
    height: 82px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

#Pop3 .content ul li .info-wrapper {
    width: 150px
}

#Pop3 .content ul li .info-wrapper h2 {
    color: #edcb81;
    font-size: 20px
}

#Pop3 .content ul li .info-wrapper p {
    color: #fff4f4;
    font-size: 14px
}

#Pop3 .content ul li .info-wrapper p strong {
    color: #edcb81;
    font-size: 16px
}

#fixedNav {
    background: url(https://static.web.sdo.com/db/pic/bao_act/20251030_NewArea/fixedNav.png?v=2024-10-30-11-09-16-573);
    width: 165px;
    height: 420px;
    right: 20px;
    top: 50%;
    margin-top: -210px;
    position: fixed;
    text-align: center;
    color: #ffc07c;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transform: translateX(120%);
    -moz-transform: translateX(120%);
    -ms-transform: translateX(120%);
    -o-transform: translateX(120%);
    transform: translateX(120%);
    opacity: 0
}

#fixedNav.show {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

#fixedNav ul {
    padding-top: 10px;
    width: 134px;
    margin: 0 auto;
    line-height: 40px
}

#fixedNav ul li {
    position: relative;
    cursor: pointer
}

#fixedNav ul li::before {
    position: absolute;
    content: "";
    width: 142px;
    height: 3px;
    background-position: -561px -97px;
    bottom: -2px;
    left: 50%;
    margin-left: -71px
}

#fixedNav ul li.active {
    color: #ffd8ad
}

#fixedNav ul li.active::after {
    position: absolute;
    content: "";
    width: 151px;
    height: 28px;
    background-position: -576px -133px;
    bottom: -2px;
    left: 50%;
    margin-left: -75px
}

#codeCeil {
    position: fixed;
    width: 200px;
    height: 331px;
    background: url(https://static.web.sdo.com/db/pic/bao_act/20241029_NewArea/pop-code.png?v=2024-10-30-11-09-16-573);
    left: 40px;
    bottom: 50px;
    z-index: 2
}

#codeCeil a {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 0;
    bottom: 24px
}

@media screen and (min-width:1920px) {
    #fixedNav {
        right: 50%;
        margin-right: -920px
    }

    #codeCeil {
        left: 50%;
        margin-left: -920px
    }
}