body {
    background: #000000;
    overflow-x: hidden;
}

[v-cloak] {
    display: none !important;
}

.container {
    width: 100%;
    max-width: 1920px;
    margin: auto;
    background: rgb(22, 12, 11);
    position: relative;
}


.section {
    width: 100%;
    background: none no-repeat center center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    height: 100vh;

}

.section > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.s1 {
    background-image: url(https://img.youxi290.com/khm/dbfgc/bg1.jpg)
}

.s1-con {
    width: 1200px;
    margin: 0 auto;
    /* position: absolute; */
    /* margin: 0; */
    height: 529px;
    right: -210px !important;
}

.s1-con .title {
    width: 995px;
    height: 172px;
    background: url(https://img.youxi290.com/khm/dbfgc/slg.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
}

.s1-con .title1 {
    width: 688px;
    height: 45px;
    background: url(https://img.youxi290.com/khm/dbfgc/slg1.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto 25px;
    position: relative;
    top: -5px;
}

.s1-con .time {
    width: 754px;
    height: 57px;
    background: url(https://img.youxi290.com/khm/dbfgc/timebg.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto 70px;
    line-height: 57px;
    text-align: left;
    color: #f5f0ee;
    font-size: 24px;
    text-indent: 28px;
}

.s1-con .ul {
    font-size: 0;
    text-align: center;
    height: 167px;
    margin: 0 auto 50px;
}

.s1-con .li {
    width: 232px;
    display: inline-block;
    height: 167px;
}

.s1-con .li .img {
    width: 126px;
    height: 123px;
    background: url(https://img.youxi290.com/khm/dbfgc/icotop.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.s1-con .li .img img {
    float: left;
    width: 84%;
    margin: 8%;
    height: 84%;
}

.s1-con .li .name {
    width: 232px;
    height: 44px;
    background: url(https://img.youxi290.com/khm/dbfgc/wbg.png) no-repeat center;
    background-size: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    letter-spacing: -1px;
    color: #ffffff;
}

.s1-con .s1-btn {
    width: 233px;
    height: 94px;
    background: url(https://img.youxi290.com/khm/dbfgc/btna1.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
    line-height: 102px;
    text-align: center;
    font-size: 30px;
    color: #522e0d;
    text-shadow: 1px 1px 5px #ffe88e, -1px -1px 5px #ffe88e, -1px 1px 5px #ffe88e, 1px -1px 5px #ffe88e;
    font-weight: bold;
    cursor: pointer;
}

.s1-con .s1-btn.done {
    background-image: url(https://img.youxi290.com/khm/dbfgc/btna2.png);
    cursor: default;
}


.s2 {
    background-image: url(https://img.youxi290.com/khm/dbfgc/bg2.jpg)
}

.s2-con {
    width: 1315px;
    margin: 0 auto;
    height: 635px;
    top: -100px !important;
}

.s2-con .title {
    width: 455px;
    height: 142px;
    background: url(https://img.youxi290.com/khm/dbfgc/bt1.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
}

.s2-con .num {
    font-size: 24px;
    line-height: 24px;
    color: #585754;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto 50px;
}

.s2-con .num span {
    display: inline-block;
    width: 328px;
    height: 57px;
    background: url(https://img.youxi290.com/khm/dbfgc/numbg.png) no-repeat center;
    background-size: 100%;
    line-height: 57px;
    text-align: left;
    text-indent: 26px;
    color: #ffffff;
    vertical-align: middle;
    font-size: 24px;
}

.s2-con .num b {
    font-weight: bold;
    font-size: 34px;
    display: inline-block;
    min-width: 89px;
    text-align: right;
}

.s2-con .process {
    font-size: 0;
    text-align: center;
}

.s2-con .process-li {
    width: 197px;
    margin: 0 11px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.s2-con .process-li .number {
    font-size: 24px;
    color: #3d3b3a;
    font-weight: bold;
    text-align: center;
    margin: 0 auto 5px;
}

.s2-con .process-li .number b {
    font-size: 36px;
}

.s2-con .process-li .point {
    width: 18px;
    height: 18px;
    background: url(https://img.youxi290.com/khm/dbfgc/fk1.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto 14px;
}

.s2-con .process-li .line {
    position: absolute;
    top: 61px;
    right: -105px;
    width: 193px;
    height: 1px;
    background-color: rgba(61, 59, 58, 0.2);
}

.s2-con .process-li .frame {
    width: 197px;
    height: 272px;
    background: url(https://img.youxi290.com/khm/dbfgc/jlbg2.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 34px;
}

.s2-con .process-li.done .frame {
    background-image: url(https://img.youxi290.com/khm/dbfgc/jlbg1.png);
}

.s2-con .process-li .img {
    width: 126px;
    height: 123px;
    background: url(https://img.youxi290.com/khm/dbfgc/icotop.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.s2-con .process-li .img img {
    float: left;
    width: 84%;
    margin: 8%;
}

.s2-con .process-li .name {
    width: 100%;
    height: 45px;
    background-size: 100%;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    color: #3d3b3a;
    margin: 0 auto;
}

.s2-con .process-li .btn {
    width: 125px;
    height: 50px;
    background: none no-repeat center;
    background-size: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #4c3e34;
    margin: 0 auto;
    font-weight: bold;
}

.s2-con .process-li.checked .btn {
    background-image: url(https://img.youxi290.com/khm/dbfgc/btnb1.png);
    color: #232221;
    cursor: pointer;
}

.s2-con .process-li.done .btn {
    background-image: url(https://img.youxi290.com/khm/dbfgc/btnb2.png);
    color: #76685d;
    cursor: none;
}

.s2-con .process-li.checked .point::after,
.s2-con .process-li.done .point::after {
    content: "";
    float: left;
    width: 8px;
    height: 8px;
    margin: 5px;
    background: url(https://img.youxi290.com/khm/dbfgc/fk2.png) no-repeat center;
    background-size: 100%;
}

.s2-con .process-li.checked .line,
.s2-con .process-li.done .line {
    background-color: rgba(61, 59, 58, 1);
}


.s3 {

    background-image: url(https://img.youxi290.com/khm/dbfgc/bg3.jpg)
}

.s3-con {
    width: 1300px;
    margin: 0 auto;
    height: 720px;
}

.s3-con .title {
    width: 615px;
    height: 104px;
    background: url(https://img.youxi290.com/khm/dbfgc/bt2.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
}

.s3-con .title0 {
    width: 330px;
    height: 144px;
    background: url(https://img.youxi290.com/khm/dbfgc/bg10.png) no-repeat center;
    background-size: 100%;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: -2px;
    color: #ffffff;
    text-align: center;
    line-height: 165px;
    text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000;
    text-indent: 45px;
    position: relative;
    top: -50px;
}

.s3-con .title0 b {
    font-size: 58px;
}


.s3-con .ul {
    overflow: hidden;
    width: 1204px;
    margin: 0 auto;
    position: relative;
    top: -60px;
}

.s3-con .li {
    width: 172px;
    height: 245px;
    position: relative;
    float: left;
    box-sizing: border-box;
    padding-top: 16px;
}

.s3-con .li > div {
    position: relative;
    z-index: 2;
}

.s3-con .li .day {
    text-align: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 7px;
    line-height: 26px;
}

.s3-con .li:after {
    content: "";
    width: 172px;
    height: 180px;
    background: url(https://img.youxi290.com/khm/dbfgc/icobg.png) no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
}

.s3-con .li.over:after {
    opacity: 0.5;
}

.s3-con .li .img {
    width: 64px;
    height: 64px;
    background: url(https://img.youxi290.com/khm/dbfgc/icotop.png) no-repeat center;
    background-size: 100%;
    border: 2px solid transparent;
    position: relative;
    margin: 0 auto 32px;
}


.s3-con .li .img img {
    float: left;
    width: 100%;
    height: 100%;
}

.s3-con .li .name {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    height: 48px;
    margin: 0 auto;
    letter-spacing: -1px;
    color: #040000;
    text-align: center;
}

.s3-con .li .btn {
    width: 73px;
    height: 27px;
    border: solid 1px #7b7672;
    box-sizing: border-box;
    line-height: 25px;
    text-align: center;
    color: #7b7672;
    font-size: 16px;
    margin: 0 auto;
}

.s3-con .li.over .img::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: url(https://img.youxi290.com/khm/dbfgc/x.png) no-repeat center;
    background-size: 100%;
    bottom: -8px;
    right: -10px;
}

.s3-con .li.isget .img::after {
    content: "";
    position: absolute;
    width: 39px;
    height: 31px;
    background: url(https://img.youxi290.com/khm/dbfgc/V.png) no-repeat center;
    background-size: 100%;
    bottom: -8px;
    right: -10px;
}

.s3-con .li.current .img {
    border-color: white;
}

.s3-con .li.current .day {
    color: #ff0000;
}

.s3-con .li.over .btn {
    border-color: #7b7672;
    background: #7b7672;
    color: white;
}

.s3-con .li.isget .btn {
    border-color: #b77f52;
    background: #b77f52;
    color: white;
}

.s3-con .li.current .btn,
.s3-con .li.get .btn {
    border-color: #c32c27;
    background: #c32c27;
    color: white;
    cursor: pointer;
}


.s4 {
    background-image: url(https://img.youxi290.com/khm/dbfgc/bg4.jpg)
}

.s4-con {
    width: 1200px;
    margin: 0 auto;
    height: 800px;
}

.s4-con .title {
    width: 620px;
    height: 91px;
    background: url(https://img.youxi290.com/khm/dbfgc/bt3.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
}

.s4-con .s4-teams {
    width: 1070px;
    margin: auto;
    font-size: 0;
    text-align: center;
    padding-top: 42px;
}

.s4-con .team-li {
    width: 214px;
    height: 170px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.s4-con .team-li .img {
    width: 121px;
    height: 113px;
    background: url(https://img.youxi290.com/khm/dbfgc/facebg.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
}

.s4-con .team-li .img img {
    float: left;
    width: 88px;
    margin: 12px 0 0 16px;
    height: 88px;
    border-radius: 50%;
}

.s4-con .team-li .name {
    width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    margin: auto;
    overflow: hidden;
}

.s4-con .team-li.leader:after {
    content: "";
    display: block;
    position: absolute;
    top: -46px;
    right: 69px;
    width: 61px;
    height: 58px;
    background: url(https://img.youxi290.com/khm/dbfgc/dz.png) no-repeat center;
    background-size: 100%;
}

.s4-con .s4-btns {
    width: 100%;
    text-align: center;
    height: 94px;
    font-size: 0;
    margin: 0 auto 60px;
    color: #522e0d;
    text-shadow: 1px 1px 1px #ffe88e, -1px -1px 1px #ffe88e, -1px 1px 1px #ffe88e, 1px -1px 1px #ffe88e;
}

.s4-con .s4-btn {
    width: 233px;
    height: 94px;
    background: url(https://img.youxi290.com/khm/dbfgc/btna1.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto;
    line-height: 102px;
    text-align: center;
    font-size: 30px;
    color: #522e0d;
    font-weight: bold;
    cursor: pointer;
    margin: 0 10px;
    display: inline-block;
    text-shadow: 1px 1px 5px #ffe88e, -1px -1px 5px #ffe88e, -1px 1px 5px #ffe88e, 1px -1px 5px #ffe88e;
}

.s4-con .s4-btn:hover {
    background-image: url(https://img.youxi290.com/khm/dbfgc/btna2.png);
    text-shadow: 1px 1px 5px #cdcabe, -1px -1px 5px #cdcabe, -1px 1px 5px #cdcabe, 1px -1px 5px #cdcabe;

}

.s4-con .s4-mission {
    width: 1200px;
    height: 342px;
    background-color: #7d7c7a;
    border: solid 2px #000000;
    box-sizing: border-box;
    position: relative;
    padding: 20px 15px;
}

.s4-con .swiper-prev {
    width: 58px;
    height: 50px;
    background: url(https://img.youxi290.com/khm/dbfgc/lr1.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    left: -28px;
    top: 142px;
    cursor: pointer;
}

.s4-con .swiper-next {
    width: 58px;
    height: 50px;
    background: url(https://img.youxi290.com/khm/dbfgc/lr2.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    right: -28px;
    top: 142px;
    cursor: pointer;
}

.s4-con .swiper-bg {
    width: 1140px;
    height: 303px;
    margin: auto;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 0;
    width: 256px;
    height: 303px;
    background-color: #4e4b4a;
    display: block;
    box-sizing: border-box;
    padding-top: 36px;
    margin-right: 16px;
}

.s4-con .s-title {
    font-size: 24px;
    line-height: 26px;
    color: #ffffff;
    margin: 0 auto 32px;
    position: relative;
}
.s4-con .s-title span{
    position: absolute;
    left:0;
    top: 29px;
    color:red;
    text-align: center;
    width: 100%;
    font-size: 18px;
}
.s4-con .long .s-title {
    /* font-size: 18px; */
    /* margin-bottom: 20px; */
}

.s4-con .s-gifts {
    font-size: 0;
    text-align: center;
}

.s4-con .s-gift {
    width: 116px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}

.s4-con .s-gift .img {
    width: 82px;
    height: 82px;
    margin: 0 auto;
    /* background: url(https://img.youxi290.com/khm/dbfgc/facebg.png) no-repeat center; */
    background-size: 100%;
}

.s4-con .s-gift .img img {
    float: left;
    width: 100%;
    margin: 0;
    height: 100%;
}

.s4-con .s-gift .name {
    width: 100%;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    height: 40px;
    line-height: 18px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    margin: 8px auto 10px;
    font-weight: normal;
}

.s4-con .s4-mission .btn {
    width: 125px;
    height: 50px;
    background: url(https://img.youxi290.com/khm/dbfgc/btnb2.png) no-repeat center;
    background-size: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 22px;
    color: #130806;
    margin: 0 auto;
    font-weight: bold;
}

.s4-con .s4-mission .btn.checked {
    cursor: pointer;
    background-image: url(https://img.youxi290.com/khm/dbfgc/btnb1.png);
    /* color: #ffffff; */
}

.s4-con .s4-mission .btn.done {
    background-image: url(https://img.youxi290.com/khm/dbfgc/btnb2.png);
    color: #130806;
}

.swiper-slide.long {
    width: 419px;
    /* padding-top: 10px; */
}

.s4-con .sl-title {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 7px;
    color: #ffffff;
    height: 30px;
}

.s4-con .s1-ul {
    font-size: 0;
    text-align: center;
}

.s4-con .sl-li {
    /* display: inline-block; */
    /* width: 116px; */
}

.s4-con .sl-li {
    display: inline-block;
    width: 150px;
}

.s5 {
    background-image: url(https://img.youxi290.com/khm/dbfgc/bgx.jpg)
}


.s5-con {
    width: 1200px;
    margin: 0 auto;
    height: 800px;
}

.s5-con .title {
    width: 442px;
    height: 168px;
    background: url(https://img.youxi290.com/khm/dbfgc/btx.png) no-repeat center;
    background-size: 100%;
    margin: 0 auto 20px;
}

.s5-con .s5-bg {
    width: 1200px;
    height: 571px;
    background-color: rgba(0, 0, 0, 0.44);
    border: solid 2px #000000;
    box-sizing: border-box;
    padding-top: 28px;
}

.scroll-style::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll-style::-webkit-scrollbar-thumb {
    border-radius: 0px !important;
    box-shadow: none !important;
    background: #ecece4 !important;
}

/*滚动条轨道*/
.scroll-style::-webkit-scrollbar-track {
    border-radius: 0px !important;
    box-shadow: none !important;
    background: #3d3b39 !important;
}

.s5-con .sg-content {
    width: 1160px;
    height: 523px;
    /* background-color: rgba(0, 0, 0, 0.44); */
    box-sizing: border-box;
    padding: 0 14px;
    overflow: auto;
    margin: auto;
    color: white;
}
.s5-con .sg-content h3{
    font-size: 24px;
    line-height: 42px;
    margin-top: 20px;
    margin-bottom: 5px;
}
.s5-con .sg-content p{
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 8px;
}
.fixed-left {
    width: 176px;
    height: 583px;
    background: url(https://img.youxi290.com/khm/dbfgc/tabbg.png) no-repeat center;
    background-size: 100%;
    position: fixed;
    z-index: 5;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    display: none;
    box-sizing: border-box;
    padding: 93px 0 0 8px;
}

.fixed-left .fixed-li {
    width: 159px;
    height: 42px;
    background: none no-repeat center;
    background-size: 100%;
    text-align: center;
    cursor: pointer;
    margin: 0 0 6px;
    overflow: hidden;
}

.fixed-left .fixed-li img {
    height: 22px;
    margin: 10px auto;
}

.fixed-left .fixed-li.checked {
    background-image: url(https://img.youxi290.com/khm/dbfgc/tabbg1.png);
}

.fixed-left .fixed-top {
    width: 50px;
    height: 58px;
    background: url(https://img.youxi290.com/khm/dbfgc/topbtn.png) no-repeat center;
    background-size: 100%;
    margin: 120px 0 0 52px;
    cursor: pointer;
}

.alert-window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    display: block;
}

.alert-window .alert-bg {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}

.alert-window .alert-win {
    position: absolute;
    z-index: 2;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ede5dc;
    border: solid 1px #806c59;
    box-shadow: none;
    width: 442px;
    height: 236px;
    border-radius: 6px;
    padding-bottom: 17px;
    box-sizing: border-box;
    display: block;
}

.alert-window .close-btn {
    width: 30px;
    height: 30px;
    background: url(https://img.youxi290.com/khm/dbfgc/cbtn.png) no-repeat center center;
    background-size: 19px 19px;
    position: absolute;
    top: 7px;
    right: 5px;
    cursor: pointer;
}

.alert-window .title {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding-left: 18px;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    line-height: 49px;
    height: 49px;
    background-color: #806c59;
    border-radius: 4px 4px 0 0;
}

.alert-window .alert-msg {
    height: 179px;
}

.alert-msg .msg-con {
    padding: 47px 0;
    font-size: 33px;
    font-weight: bold;
    line-height: 33px;
    color: #806c59;
    text-align: center;
}

.alert-win .input-con .message {
    font-size: 18px;
    font-weight: bold;
    line-height: 64px;
    color: #806c59;
    height: 64px;
    text-align: center;
}

.alert-win .input-con .input-text {
    width: 364px;
    height: 41px;
    background-color: #ffffff;
    border: solid 1px #806c59;
    margin: 0 auto 27px;
    box-sizing: border-box;
    outline: 0;
    text-align: center;
    font-size: 18px;
    line-height: 41px;
    color: #2e2115;
    display: block;
    margin: 0 auto 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-win .alert-btns {
    width: 100%;
    text-align: center;
    font-size: 0;
    height: 38px;
}

.alert-win .alert-btn {
    width: 127px;
    height: 38px;
    background: #a12e1d;
    border-radius: 4px;
    border: solid 1px #a12e1d;
    box-sizing: border-box;
    line-height: 36px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #ffffff;
    display: inline-block;
    margin: 0 8px;
    cursor: pointer;
}
.alert-win .alert-btn.cancel {
    background: none;
    border-color: #806c59;
    color: #806c59;
}
.alert-window .alert-build {
    height: 170px;
}