html body {
    background: #3b3b3b;
    width: 100%;
    min-width: 1200px
}

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 20;
    font-size: 18px;
    color: #cfd1cc;
    z-index: 101
}

#loading .box {
    width: 100%;
    height: 1px;
    background: #414141;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    left: 0
}

#loading .box span {
    height: 1px;
    background: #c4c4c4;
    position: relative;
    top: 0;
    left: 0;
    display: block
}

#loading .box p {
    font-size: 16px;
    line-height: 30px;
    color: silver;
    text-align: center
}

.wrapper {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 40px
}

.wrapper .bg {
    width: 1920px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 0
}

.wrapper .bg div {
    width: 100%;
    display: none
}

/* .wrapper .bg .bg_1 {
    background: url("../images/bg_head.jpg") no-repeat 50% 0, url("../images/bg1_01.jpg") no-repeat 50% 1020px, url("../images/bg1_02.jpg") no-repeat 50% 2953px, url("../images/bg1_03.jpg") no-repeat 50% 4887px, url("../images/bg1_04.jpg") no-repeat 50% 6687px
} */

.wrapper .bg .bg_2 {
    background: url("../images/bg_01.jpg") no-repeat 50% 0, url("../images/bg_02.jpg") no-repeat 50% 1050px, url("../images/bg_03.jpg") no-repeat 50% 3000px, url("../images/bg_04.jpg") no-repeat 50% 5030px, url("../images/bg_05.jpg") no-repeat 50% 6648px, url("../images/bg_06.jpg") no-repeat 50% 8179px;
}


.wrapper .bg .bg_2 {
    display: block;
    height: 9815px
}

.wrapper .bg.on .bg_0 {
    display: block
}

.wrapper .bg.on .bg_1 {
    display: block
}

.wrapper .bg.on .bg_2 {
    display: block
}

.wrapper .main {
    position: relative;
    z-index: 2;
    height: 9815px;
}


.wrapper .main .con {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
    padding-top: 0px
}

.wrapper .main .con .logo {
    width: 170px;
    height: 62px;
    position: absolute;
    top:18px;
    z-index: 99999;
    left: 50%;
    background: url(../images/logo.png) no-repeat;
    margin-left: -550px;
}

.wrapper .main .con .conHead {
    height: 1020px;
    z-index: 18;
}

.wrapper .main .con .conHead #pp {
    width: 1920px;
    height: 1080px;
    left: calc(50% - 1920px/2);
    z-index: 2;
    pointer-events: none
}

.wrapper .main .con .conHead .mark {
    background: url(../images/mark.png) no-repeat;
    width: 1920px;
    height: 982px;
    left: calc(50% - 1920px/2);
    top: 0;
    z-index: 5;
}

.wrapper .main .con .conHead .slogan {
    background: url(../images/slogan.png) no-repeat;
    width: 805px;
    height: 422px;
    left: 50%;
    top: 190px;
    margin-left: -580px;
    z-index: 15;
}

.wrapper .main .con .conHead .npc1 {
    background: url(../images/npc-1.png) no-repeat;
    width: 445px;
    height: 952px;
    left: 50%;
    top: 32px;
    margin-left: 264px;
    z-index: 10;
}

.wrapper .main .con .conHead .npc2 {
    background: url(../images/npc-2.png) no-repeat;
    width: 386px;
    height: 492px;
    left: 50%;
    top: 479px;
    margin-left: -864px;
    z-index: 10;
}

.wrapper .main .con .conHead .npc3 {
    width: 762px;
    height: 732px;
    left: 50%;
    top: 218px;
    margin-left: -946px;
    z-index: 1;
}

.wrapper .main .con .conHead .npc3::after{
    content: "";
    position: absolute;
    background: url(../images/npc-3.png) no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: move1 5s linear infinite;
}


.wrapper .main .con .conHead .btnCon {
    width: 510px;
    height: 59px;
    top: 900px;
    left: calc(50% - 510px/2);
    z-index: 16;
}

.wrapper .main .con .conHead .btnCon a {
    display: block;
    height: 59px;
    width: 235px;
    background: url(../images/navs.png) no-repeat;
    text-indent: -999em;
    float: left;
    margin: 0 10px;
}

.wrapper .main .con .conHead .btnCon a:nth-child(1) {
    background-position: 0px 0
}

.wrapper .main .con .conHead .btnCon a:nth-child(2) {
    background-position: -235px 0
}

.wrapper .main .con .conHead .btnCon a:nth-child(1).on,.wrapper .main .con .conHead .btnCon a:nth-child(1):hover {
    background-position: 0px -59px
}

.wrapper .main .con .conHead .btnCon a:nth-child(2).on,.wrapper .main .con .conHead .btnCon a:nth-child(2):hover {
    background-position: -235px -59px
}

/* .wrapper .main .con .pCon2 {
    display: none
} */

.wrapper .main .con .pCon2 div {
    width: 100%;
    box-sizing: border-box
}

.wrapper .main .con .pCon2 .con1 {
    height: 1947px;
    margin-bottom: 78px;
    padding-top: 637px;
}

.wrapper .main .con .pCon2 .con1 .xBtn {
    display: block;
    width: 280px;
    height: 63px;
    left: calc(50% + 80px / 2);
    text-indent: -999em;
    top: 206px;
}

.wrapper .main .con .pCon2 .con1 .xdCon {
    margin: 385px auto 0 auto;
    width: 1130px;
    height: 630px;
}

.wrapper .main .con .pCon2 .con1 .xdCon ul,.wrapper .main .con .pCon2 .con1 .xdCon li {
    width: 1130px;
    height: 630px;
    border: 2px solid #c2e2f2;
}

.wrapper .main .con .pCon2 .con1 .xdCon img {
    width: 100%;
    height: 100%
}

.wrapper .main .con .pCon2 .con1 .xdCon .nextBtn,.wrapper .main .con .pCon2 .con1 .xdCon .prevBtn {
    display: block;
    width: 81px;
    height: 140px;
    background: url(../images/arrow-1.png) no-repeat 0 0;
    position: absolute;
    top: 245px;
    z-index: 2;
    text-indent: -999em
}

.wrapper .main .con .pCon2 .con1 .xdCon .prevBtn {
    background-position: 0 0;
    left: -100px;
}

.wrapper .main .con .pCon2 .con1 .xdCon .nextBtn {
    background-position: -81px 0;
    right: -120px;
}

.wrapper .main .con .pCon2 .con2 {
    height: 930px;
    padding-top: 90px;
}


.wrapper .main .con .pCon2 .con2 .xdCon {
    margin: 105px auto 0 auto;
    width: 1130px;
    height: 410px;
}

.wrapper .main .con .pCon2 .con2 .xdCon ul,.wrapper .main .con .pCon2 .con2 .xdCon li {
    width: 1130px;
    height: 410px;
}

.wrapper .main .con .pCon2 .con2 .xdCon img {
    width: 100%;
    height: 100%
}

.wrapper .main .con .pCon2 .con2 .xdCon .nextBtn,.wrapper .main .con .pCon2 .con2 .xdCon .prevBtn {
    display: block;
    width: 81px;
    height: 140px;
    background: url(../images/arrow-1.png) no-repeat 0 0;
    position: absolute;
    top: 205px;
    z-index: 2;
    text-indent: -999em
}

.wrapper .main .con .pCon2 .con2 .xdCon .prevBtn {
    background-position: 0 0;
    left: -100px;
}

.wrapper .main .con .pCon2 .con2 .xdCon .nextBtn {
    background-position: -81px 0;
    right: -120px;
}

.wrapper .main .con .pCon2 .con2 .btn-rule {
    display: block;
    width: 380px;
    height: 90px;
    position: absolute;
    top: 630px;
    text-indent: -9999em;
    left: 50%;
    margin-left: -190px;
}
.wrapper .main .con .pCon2 .con3 {
    height: 1348px;
    padding-top: 250px;
}

.wrapper .main .con .pCon2 .con3 a {
    display: block;
    width: 223px;
    height: 100px;
    position: absolute;
    top: 880px;
    left: calc(50% - -256px/2);
    text-indent: -9999em;
}

.wrapper .main .con .pCon2 .con3 .lCon {
    margin-left: 48px;
    width: 734px;
    height: 369px
}

.wrapper .main .con .pCon2 .con3 .lCon::before {
    display: block;
    content: '';
    width: 752px;
    height: 72px;
    position: absolute;
    background: url(../images/tips.png) no-repeat;
    top: -44px;
    left: -9px;
    z-index: 3;
    /* border: 2px solid #fff; */
}

.wrapper .main .con .pCon2 .con3 .lCon ul,.wrapper .main .con .pCon2 .con3 .lCon li {
    width: 730px;
    height: 365px;
    border: 2px solid #8daabc;
    /* box-shadow: 5px 3px 5px #6e8ca7; */
}

.wrapper .main .con .pCon2 .con3 .lCon img {
    width: 100%;
    height: 100%;
}

.wrapper .main .con .pCon2 .con3 .lCon .nextBtn,.wrapper .main .con .pCon2 .con3 .lCon .prevBtn {
    display: block;
    width: 48px;
    height: 59px;
    background: url(../images/arrow-2.png) no-repeat;
    position: absolute;
    top: 140px;
    z-index: 30;
    text-indent: -999em;
    transform: scale(0.8);
}

.wrapper .main .con .pCon2 .con3 .lCon .prevBtn {
    background-position: 0 0;
    left: -45px;
}

.wrapper .main .con .pCon2 .con3 .lCon .nextBtn {
    background-position: -48px 0;
    right: -45px;
    left: auto;
}

.wrapper .main .con .pCon2 .con3 .iCon {
    width: 120px;
    height: 68px;
    top: 300px;
    right: 145px;
}

.wrapper .main .con .pCon2 .con3 .dCon {
    width: 229px;
    height: 81px;
    top: 460px;
    right: 85px;
}

.wrapper .main .con .pCon2 .con4 {
    height: 1345px;
}



.wrapper .main .con .pCon2 .con5 {
    height: 845px;
}

.wrapper .main .con .pCon2 .con5 a {
    display: block;
    width: 280px;
    height: 60px;
    top: 639px;
    left: calc(50% - 280px / 2);
    position: relative;
    text-indent: -999em;
}

.wrapper .main .con .pCon2 .con6{
    height: 1110px;
}

.wrapper .main .con .pCon2 .con6 a {
    display: block;
    width: 280px;
    height: 65px;
    top: 520px;
    left: calc(50% - 280px / 2);
    position: relative;
    text-indent: -999em;
}

.wrapper .main .con .pCon1 .con1 {margin-top: 4188px;}

.wrapper .main .con .pCon1 .con1 .evt1 {
    display: block;
    position: absolute;
    text-indent: -999em;
    width: 200px;
    height: 50px;
    top: 1395px;
    left: calc(50% - 100px);
}
.wrapper .main .con .pCon1 .con1 .pop1 {
    display: block;
    position: absolute;
    text-indent: -999em;
    width: 80px;
    height: 30px;
    top: 503px;
    left: calc(50% + 180px);
}
.wrapper .main .con .pCon1 .con1 .pop2 {
    display: block;
    position: absolute;
    text-indent: -999em;
    width: 218px;
    height: 75px;
    top: 2567px;
    left: calc(50% + 127px);
}

.popdiv {
    width: 754px;
    display: none
}

.popdiv .close {
    width: 80px;
    height: 74px;
    text-indent: -9999px;
    position: absolute;
    top: 5px;
    right: 0;
    cursor: pointer
}

.popdiv .pop {
    width: 100%;
    display: inline-block
}

.popdiv .pop img {
    height: 100%
}


.popdivmap {width:684px;height:448px;}

.a-top {
    width: 84px;
    height: 84px;
    right: 20px;
    bottom: 210px;
    position: fixed;
    display: none;
    background: url(../images/top.png) no-repeat;
    z-index: 10
}

#topVid1 {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -960px;
    width: 1920px;
    height: 1080px;
    z-index: 16;
}

#p1Con {
    margin: 1590px auto 0;
    width: 950px;
}

#p1Con .prevBtn,#p1Con .nextBtn {
    width: 176px;
    height: 57px;
    position: absolute;
    top: 530px;
}

#p1Con .prevBtn {
    background: url(../images/btn_prev.png) no-repeat;
    left: 250px;
    text-indent: -9999em;
}

#p1Con .nextBtn {
    background: url(../images/btn_next.png) no-repeat;
    left: 490px;
    text-indent: -9999em;
}

#p1Con .prevBtn:hover,#p1Con .nextBtn:hover {
    transform: scale(1.02);
}

.s_tc {
    display: none;
    z-index: 10;
}

.tc_video,.tc_video #video {
    width: 960px;
    height: 540px;
}

.tc_video .close_btn {
    display: block;
    width: 43px;
    height: 43px;
    background: url(https://img1.tiancitycdn.com/project5/fs2/event/2020/fs201217cs/images/btn_close.jpg) no-repeat;
    position: absolute;
    top: 0;
    right: -45px;
    z-index: 101;
}

#snow {
    position: absolute;
    width: 1920px;
    height: 1000px;
    z-index: 15;
    top: 0;
    left: 0;
    margin-left: -320px;
}



/*p1*/
.wrapper .con .feature{
    width:1075px;
    height: 700px;
    margin:0 auto;
}

.wrapper .con .feature .adPic {
    width: 1075px;
    height: 667px;
    position: relative;
    z-index: 1
}

.wrapper .con .feature .adPic .btn-detail {
    width:109px;height:66px;
    top:230px;left:865px;
    background: url(../images/btn-detail.png) no-repeat 0 0;
}


.wrapper .con .feature .prevBtn,
.wrapper .con .feature .nextBtn {
    display: block;
    width: 66px;
    height: 59px;
    position: absolute;
    top: 265px;
    z-index: 2;
    text-indent: -999em
}

.wrapper .con .feature .prevBtn {
    background: url(../images/arrow-1.png) no-repeat 0 0;
    left: -70px;
}

.wrapper .con .feature .nextBtn {
    background: url(../images/arrow-1.png) no-repeat -66px 0;
    right: -70px;
}


.wrapper .con .feature .adBtn {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -187px;
    width: 375px;
    display: flex;
    justify-content: space-between;
}

.wrapper .con .feature .adBtn a {
    display: block;
    width: 85px;
    height: 16px;
    text-indent: -999em;
    background: #832721;
    border-radius: 8px;
}

.wrapper .con .feature .adBtn a.on {
    background: #ff6157;
}

/*p2*/
.wrapper .con .feature2{
    width:1075px;
    height: 700px;
    margin:1025px auto 0;
}

.wrapper .con .feature2 .adPic {
    width: 1075px;
    height: 667px;
    position: relative;
    z-index: 1
}

.wrapper .con .feature2 .adPic .btn-detail {
    width:109px;height:66px;
    top:230px;left:865px;
    background: url(../images/btn-detail.png) no-repeat 0 0;
}


.wrapper .con .feature2 .prevBtn,
.wrapper .con .feature2 .nextBtn {
    display: block;
    width: 66px;
    height: 59px;
    position: absolute;
    top: 265px;
    z-index: 2;
    text-indent: -999em
}

.wrapper .con .feature2 .prevBtn {
    background: url(../images/arrow-1.png) no-repeat 0 0;
    left: -70px;
}

.wrapper .con .feature2 .nextBtn {
    background: url(../images/arrow-1.png) no-repeat -66px 0;
    right: -70px;
}


.wrapper .con .feature2 .adBtn {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -187px;
    width: 375px;
    display: flex;
    justify-content: space-between;
}

.wrapper .con .feature2 .adBtn a {
    display: block;
    width: 85px;
    height: 16px;
    text-indent: -999em;
    background: #832721;
    border-radius: 8px;
}

.wrapper .con .feature2 .adBtn a.on {
    background: #ff6157;
}

.wrapper .con .btn-1 {width: 236px;height:50px;background: url(../images/btn1.png) no-repeat 0 0;top: 795px;left:50%;margin-left: -257px;}
.wrapper .con .btn-2 {width: 236px;height:50px;background: url(../images/btn2.png) no-repeat 0 0;top: 795px;left:50%;margin-left: 20px;}

.wrapper .con .btn-1:hover,
.wrapper .con .btn-2:hover,
.wrapper .con .btn-detail:hover {
    filter: brightness(1.2)
}


.pop-1 {
    width:774px;height: 800px;
    background: url(../images/pop-1.png) no-repeat 0 0;
    display: none;
}

.pop-2 {
    width:774px;height: 680px;
    background: url(../images/pop-2.png) no-repeat 0 0;
    display: none;
}
.pop-1 .btn_close,
.pop-2 .btn_close {width:60px;height: 60px;top:10px;right:0;}

.pop-3 {
    width:714px;height: 378px;
    background: url(../images/pop-3.png) no-repeat 0 0;
    display: none;
}
.pop-3 .btn_close {width:60px;height: 60px;top:0;right:0;}

.pop-4 {
    width:752px;height: 396px;
    background: url(../images/pop-4.png) no-repeat 0 0;
    display: none;
}
.pop-4 .btn_close {width:60px;height: 60px;top:0;right:0;}

/* .pp-1 {width: 345px; height: 275px; top: 245px; left: calc(50% - 1350px/2); animation: hm1 .3s .15s ease-in-out forwards; opacity: 0;}
.pp-2 {background: url(../images/pp2.png) no-repeat; width: 200px; height: 200px; top: 95px; left: calc(50% - -485px/2); animation: hm1 .3s .3s ease-in-out forwards; opacity: 0;}
.pp-3 {width: 275px; height: 192px; top: 555px; left: calc(50% - -865px/2); animation: hm1 .3s .3s ease-in-out forwards; opacity: 0;}
@keyframes hm1 {
    0%   {transform: scale(0); opacity: 0;}
    100% {transform: scale(1); opacity: 1;}
}

.pp-1::before {display: block; content: ''; background: url(../images/pp-1-wuqi.png) no-repeat; width: 345px; height: 275px; animation: hm2 2.5s ease-in-out infinite;}
.pp-2::before {display: block; content: ''; background: url(../images/pp-2-wuqi.png) no-repeat; width: 154px; height: 82px; position: absolute; top: 52px; left: 40px; animation: hm2 2.5s ease-in-out infinite;}
.pp-3::before {display: block; content: ''; background: url(../images/pp-2-wuqi.png) no-repeat; width: 275px; height: 192px; animation: hm2 2.5s ease-in-out infinite;}
@keyframes hm2 {
    0%   {transform: translateY(0);}
    50%  {transform: translateY(-10px);}   
    100% {transform: translateY(0);}
} */

.a-video {display: block;width: 98px;height: 103px;top: 210px;left: 540px;z-index: 16; background: url(../images/btn-video.png);}
.a-video:hover {filter: drop-shadow(0 0 10px #11372d);}
.tc_s {display: none; z-index: 20; }
.tc_video,.tc_video #video {width: 1280px; height: 720px;}
.tc_video .close_btn {display: block;width: 43px;height: 43px; background: url(https://img1.tiancitycdn.com/project5/fs2/event/2020/fs201217cs/images/btn_close.jpg) no-repeat; position: absolute;top: 0;right: -45px;z-index: 101;}


.d-fc {position: fixed; top: 45%; right: 10px; z-index: 20; width: 272px; height: 268px;}
.d-fc a {display: block; background: url(../images/fc.png) no-repeat; width: 272px; height: 268px;}
.d-fc a.a-fc1 {background-position: 0 0;}
/* .d-fc a.a-fc2 {background-position: 0 -71px;} */
.d-fc a:hover {filter: brightness(1.2);}






@keyframes move1 {
	0%,100%{ transform: translate(0);}
	50% {transform: translate(-30px,-10px);;}
}