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%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-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}
.wraper{width:100%;min-width:1200px;height:100%;position:relative;overflow:hidden;margin-top:40px}
.wraper .bg{width:1920px;position:absolute;left:50%;margin-left:-960px;top:0;background:url(../images/bg.jpg) no-repeat 50% 1082px;height:5600px;z-index:0;-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated}
.wraper .header{ width: 100%; height: 1082px; position: relative; overflow: hidden;}
.wraper .header .bgimg{width:1920px;height:100%;background:url(../images/body.jpg) no-repeat;top:0;left:calc(50% - 960px);z-index:2}
.wraper .header .mask{width:1920px;height:100%;background:url(../images/mask.png) no-repeat;top:0;left:calc(50% - 960px);z-index:5}
.wraper .header .npc{width:1920px;height:100%;background:url(../images/npc.png) no-repeat;top:0;left:calc(50% - 960px);z-index:4}
.wraper .header .tree{width:1920px;height:100%;background:url(../images/tree.png) no-repeat;top:0;left:calc(50% - 960px);z-index:4}
.wraper .header .sun{width:1920px;height:100%;background:url(../images/sun.png) no-repeat;top:0;left:calc(50% - 960px);z-index:4}
.wraper .header .slogan{width:1920px;height:100%;background:url(../images/slogan.png) no-repeat;top:0;left:calc(50% - 960px);z-index:7}
.wraper .header .logo{position:absolute;width:112px;height:106px;top:36px;left:calc(50% - 575px);text-indent:-999em;background:url(../images/sprite.png) no-repeat 0 0px;z-index:8}
.wraper .header .btn-video{ width: 200px; height: 170px; text-indent:-999em; background:url(../images/btn-video.png) no-repeat; top:785px;left:calc(50% - 100px);z-index:9}
.wraper .header .btn-video:hover{ filter: brightness(1.3);}
.wraper .section{position:relative;top:1180px; z-index:2;height:5566px}
.wraper .section .main{width:1200px;margin-left:auto;margin-right:auto;position:relative;z-index:2;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:0px}

.wraper .section .main .con .box{ width: 1200px; box-sizing:border-box;position:relative;}
.wraper .section .main .con .lbCon{ height: 744px;}
.wraper .section .main .con .lbCon::before{ content: ""; width: 1200px; height:744px; background:url(../images/c1.png) no-repeat center top; position: absolute; top:0;left:calc(50% - 614px);}
.wraper .section .main .con .lbCon::after{ content: ""; width: 323px; height:287px; background:url(../images/c1-mask.png) no-repeat center top; position: absolute; bottom:38px;right:-10px;}
.wraper .section .main .con .ddCon{ height: 966px;}
.wraper .section .main .con .ddCon::before{ content: ""; width: 1200px; height:815px; background:url(../images/c2.png) no-repeat center top; position: absolute; top:0;left:calc(50% - 572px);}
.wraper .section .main .con .ddCon::after{ content: ""; width: 336px; height:215px; background:url(../images/c2-mask.png) no-repeat center top; position: absolute; bottom:122px;right:-116px;}
.wraper .section .main .con .ddCon .imgBox{ width: 1150px; height: 550px; position:relative}
.wraper .section .main .con .ddCon .imgBox li{position:absolute;top:220px;left:45px;}
.wraper .section .main .con .ddCon .ibtn{ width: 137px; height: 500px; left: -60px; top: 230px;}
.wraper .section .main .con .ddCon .ibtn a{display:block;width:137px;height:137px; position: absolute; background:url(../images/c2-btn.png) no-repeat;text-indent:-999em}
.wraper .section .main .con .ddCon .ibtn a:nth-child(1){ top: 0; left: 50px; background-position-y:0}
.wraper .section .main .con .ddCon .ibtn a:nth-child(2){ top: 125px; left: 0; background-position-y:-137px}
.wraper .section .main .con .ddCon .ibtn a:nth-child(3){ top: 255px; left: 0; background-position-y:-274px}
.wraper .section .main .con .ddCon .ibtn a:nth-child(4){ top: 385px; left: 50px; background-position-y:-411px}
.wraper .section .main .con .ddCon .ibtn a.on{background-position-x:-137px;}

.wraper .section .main .con .jnCon{ height: 1130px;}
.wraper .section .main .con .jnCon::before{ content: ""; width: 1200px; height:1043px; background:url(../images/c3.png) no-repeat center top; position: absolute; top:0;left:calc(50% - 600px);}
.wraper .section .main .con .jnCon .imgBox { width: 1030px; height: 542px; position: absolute; left: 83px; top: 286px;}
.wraper .section .main .con .jnCon .imgBox li{ height: 1030px; height: 542px;}
.wraper .section .main .con .jnCon .imgBox li video{-o-object-fit:cover;object-fit:cover;border-radius:20px}

.wraper .section .main .con .jnCon .imgBox li::after{display:block;content:"";width:968px;height:178px;position:absolute;pointer-events:none;background:url(../images/c3-wen.png) no-repeat;left:calc(50% - 460px);top:563px}

.wraper .section .main .con .jnCon .imgBox .jn1::after{background-position-y:30px}
.wraper .section .main .con .jnCon .imgBox .jn2::after{background-position-y:-150px}
.wraper .section .main .con .jnCon .imgBox .jn3::after{background-position-y:-334px}
.wraper .section .main .con .jnCon .imgBox .jn4::after{background-position-y:-506px}
.wraper .section .main .con .jnCon .imgBox .jn5::after{background-position-y:-684px}

.wraper .section .main .con .yzCon{ height: 1060px;}
.wraper .section .main .con .yzCon::before{ content: ""; width: 1216px; height:1038px; background:url(../images/c4.png) no-repeat center top; position: absolute; top:0;left:calc(50% - 608px);}
.wraper .section .main .con .yzCon::after{ content: ""; width: 123px; height:120px; background:url(../images/c4-mask.png) no-repeat center top; position: absolute; top:170px;right:94px;}
.wraper .section .main .con .yzCon .imgBox { width: 1022px; height: 542px; position: absolute; left: 101px; top: 250px;}
.wraper .section .main .con .yzCon .imgBox li{ height: 1022px; height: 542px;}
.wraper .section .main .con .yzCon .imgBox li video{-o-object-fit:cover;object-fit:cover;border-radius:12px}
.wraper .section .main .con .yzCon .imgBox li::after{display:block;content:"";width:356px;height:64px;position:absolute;pointer-events:none;background:url(../images/c4-wen.png) no-repeat;left:calc(50% - 192px);top:569px}
.wraper .section .main .con .yzCon .imgBox .yz1::after{background-position-y:0px}
.wraper .section .main .con .yzCon .imgBox .yz2::after{background-position-y:-64px}
.wraper .section .main .con .yzCon .imgBox .yz3::after{background-position-y:-128px}
.wraper .section .main .con .yzCon .imgBox .yz4::after{background-position-y:-192px}

.wraper .section .main .con .tsCon{ width: 1200px; height: 151px; margin: 0 auto; background: url(../images/c5.png) no-repeat;}

.wraper .section .main .con .pnBtn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;}
.wraper .section .main .con .pnBtn a{display:block;background:url(../images/sprite.png) no-repeat;background-position-y:-110px;width:98px;height:131px;text-indent:-999em}
.wraper .section .main .con .pnBtn a:hover{ filter: brightness(1.1);}
.wraper .section .main .con .pnBtn .ImgNext{ background-position-x:-98px}
.wraper .section .main .con .jnCon .pnBtn{ width:1230px !important;left:calc(50% - 615px);top:calc(50% - 74px);}
.wraper .section .main .con .yzCon .pnBtn{ width:1030px !important;left:calc(50% - 502px);top:calc(50% - 45px);}

.popdiv{ width:850px; display:none; text-align: center; color: #000; font-size: 16px; }
.popdiv .close{ width:31px; height:31px; background: url(../images/close.png) no-repeat; text-indent: -9999px; position: absolute; top: 0; right: -35px; cursor: pointer;}
.popdiv #video{width: 100%; height: 100%; -o-object-fit:cover; object-fit:cover;}
#popvd{ width:850px; height:480px; background:#000;}