::-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
}

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

#fixed-nav .gotop,
#fixed-nav li,
#fixed-nav li em,
.icon,
.pop .content .close,
.wrapper1 .logo,
.wrapper1 .title,
.wrapper1 .top-links li a,
.wrapper2 ul li,
.wrapper4 .pointer,
.wrapper7 ul li {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/icon.png?v=2);
    background-repeat: no-repeat
}

@-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
    }
}

.wrapper1 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/1.jpg?v=2023-06-25-14-34-24-556);
    height: 1151px
}

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

.wrapper1 .top-links {
    position: absolute;
    z-index: 2;
    right: 60px;
    top: 30px;
    width: 477px;
    height: 43px;
    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
}

.wrapper1 .top-links li {
    width: 146px;
    height: 43px
}

.wrapper1 .top-links li a {
    display: block;
    width: 100%;
    height: 100%;
}

.wrapper1 .top-links li a.link1 {
    background-position: -167px -36px
}

.wrapper1 .top-links li a.link2 {
    background-position: -333px -36px
}
.wrapper1 .top-links li a.link3 {
    background-position: -498px -36px
}

.wrapper1 .title {
    width: 345px;
    height: 663px;
    background-position: -655px -337px;
    position: absolute;
    left: 50%;
    top: 120px;
    margin-left: -620px;
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    -o-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -o-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

.wrapper2 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/2.jpg);
    height: 964px
}

.wrapper2 ul {
    position: absolute;
    width: 585px;
    left: 50%;
    margin-left: -292px;
    bottom: 100px
}

.wrapper2 ul li {
    width: 163px;
    height: 163px;
    margin: 0 16px;
    float: left;
    cursor: pointer;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s
}

.wrapper2 ul li.active {
    cursor: default
}

.wrapper2 ul li:nth-of-type(1) {
    background-position: 0 -384px
}

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

.wrapper2 ul li:nth-of-type(2) {
    background-position: -169px -384px
}

.wrapper2 ul li:nth-of-type(2).active {
    background-position: -169px -568px
}

.wrapper2 ul li:nth-of-type(3) {
    background-position: -338px -384px
}

.wrapper2 ul li:nth-of-type(3).active {
    background-position: -338px -568px
}

.wrapper2 .img-wrapper {
    position: absolute;
    width: 920px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    margin-left: -460px;
    top: 240px;
    background: #502e20
}

.wrapper2 .img-wrapper img {
    display: none;
    width: 100%;
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

.wrapper2 .img-wrapper img.active {
    display: block
}

.wrapper3 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/3.jpg?v=1);
    height: 1061px
}
.wrapper3 .img-wrapper {
    position: absolute;
    width: 324px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    margin-left: -394px;
    top: 600px;
}

.wrapper3 .img-wrapper img {
    display: none;
    width: 100%;
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

.wrapper3 .img-wrapper img.active {
    display: block
}

.wrapper4 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/4.jpg?V=1);
    height: 1514px
}

.wrapper4 .pointer {
    position: absolute;
    left: 50%;
    cursor: pointer
}

.wrapper4 .pointer.pointer1 {
    width: 40px;
    height: 180px;
    margin-left: -436px;
    top:450px;
    background-position: 0 -778px
}

.wrapper4 .pointer.pointer1:hover {
    background-position: -253px -778px
}

.wrapper4 .pointer.pointer2 {
    width: 40px;
    height: 240px;
    margin-left: -200px;
    bottom: 365px;
    background-position: -66px -778px
}

.wrapper4 .pointer.pointer2:hover {
    background-position: -319px -778px
}

.wrapper4 .pointer.pointer3 {
    width: 40px;
    height: 240px;
    margin-left: 470px;
    top: 500px;
    background-position: -132px -778px
}

.wrapper4 .pointer.pointer3:hover {
    background-position: -385px -778px
}

.wrapper5 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/5.jpg);
    height: 1103px
}

.wrapper6 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/6.jpg?v=1);
    height: 1665px
}
.wrapper7 {
    background-image: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/7.jpg);
    height: 977px
}

#fixed-nav {
    width: 282px;
    right: 0;
    top: 50%;
    margin-top: -300px;
    z-index: 5;
    position: fixed;
    -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
}

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

#fixed-nav ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -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: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

#fixed-nav li {
    width: 217px;
    height: 60px;
    background-position: 0 -165px;
    display: -webkit-box;
    display: -webkit-flex;
    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;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 20px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition-property: width, height;
    -o-transition-property: width, height;
    -moz-transition-property: width, height;
    transition-property: width, height;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin-bottom: 2px
}

#fixed-nav li strong {
    font-weight: 700;
    font-size: 18px;
    color: rgba(255, 255, 255, .4);
    margin-right: 10px;
    font-style: italic
}

#fixed-nav li em {
    width: 10px;
    height: 10px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 6px;
    background-position: -343px -267px
}

#fixed-nav li h3 {
    color: #dcb997;
    font-size: 16px;
    margin-right: 20px;
}

#fixed-nav li.active {
    width: 282px;
    height: 90px;
    background-position: 0 -267px
}

#fixed-nav li.active strong {
    font-size: 40px;
    color: #000;
    font-weight: 700
}

#fixed-nav li.active em {
    display: none
}

#fixed-nav li.active h3 {
    margin-right: 40px;
    font-size: 26px;
    color: #fff1dc;
    font-weight: 700
}

#fixed-nav .gotop {
    position: absolute;
    width: 75px;
    height: 75px;
    right: 48px;
    bottom: -90px;
    cursor: pointer;
    background-position: -571px -267px
}

.pop .content {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    background-color: transparent
}

.pop .content .close {
    width: 57px;
    height: 57px;
    right: 50%;
    margin-right: -30px;
    top: auto;
    bottom: -66px;
    border: none;
    background-position: -482px -778px
}

#map1Pop .content {
    background-image: url(https://static.web.sdo.com/xcb/pic/xcb_act/20230625_NewArea/map1Pop.png?v=2023-06-25-14-34-24-556);
    width: 850px;
    height: 584px;
    margin-left: -425px;
    margin-top: -292px
}

#map2Pop .content {
    background-image: url(https://static.web.sdo.com/xcb/pic/xcb_act/20230625_NewArea/map2Pop.png?v=2023-06-25-14-34-24-556);
    width: 850px;
    height: 624px;
    margin-left: -425px;
    margin-top: -312px
}

#map3Pop .content {
    background-image: url(https://static.web.sdo.com/xcb/pic/xcb_act/20230625_NewArea/map3Pop.png?v=2023-06-25-14-34-24-556);
    width: 1039px;
    height: 590px;
    margin-left: -425px;
    margin-top: -312px
}

#map3Pop .content .close {
    margin-right: 65px
}

#codeCeil {
    position: fixed;
    width: 200px;
    height: 331px;
    background: url(https://static.web.sdo.com/db/pic/bao_act/20250515_NewArea/pop-code.png?v=2025-05-19-10-37-53-635);
    left: 40px;
    bottom: 60px;
    z-index: 2
}

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

#qy_pic {
    position: fixed;
    width: 185px;
    height:204px;
    background: url(https://static.web.sdo.com/db/pic/bao_act/20250822_NewArea/qy_pic.png?v=2025-05-19-10-37-53-635);
    right: 40px;
    bottom: 60px;
    z-index: 2
}