body { min-width: 1200px; background: #333}
#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: #c0c0c0; text-align: center}
.wrapper { overflow: hidden; position: relative; text-align: center; z-index: 1; zoom: 1; margin: 40px auto 0; max-width: 1920px; min-width: 1200px}
.wrapper .bg { width: 100%; margin: 0 auto}
.wrapper .bg div { background-position: center top !important; background-repeat: no-repeat !important; height: 1000px}
.wrapper .bg .bg_2 { background: url(../images/bg_02.jpg)}
.wrapper .bg .bg_3 { background: url(../images/bg_03.jpg)}
.wrapper .bg .bg_4 { background: url(../images/bg_04.jpg)}
.wrapper .bg .bg_5 { background: url(../images/bg_05.jpg)}
.wrapper .bg .bg_6 { height: 850px; background: url(../images/bg_06.jpg)}

.wrapper .section { width: 100%; min-height: 2000px; margin: 0 auto; position: relative; box-sizing: border-box}
.wrapper .header { width: 100%; height: 1000px; margin: 0 auto; position: absolute; top: 0; left: 0; overflow: hidden}
.wrapper .header .layer { width: 100%; height: 1000px}
.wrapper .header .layer .logo { width: 188px; height: 112px; position: absolute; top: 20px; margin-left: 400px; left: 50%; background: url(../images/logo.png) no-repeat; z-index: 10}
.wrapper .header .layer .slogan { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 7}
.wrapper .header .layer .bgimg { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/bg_01.jpg) no-repeat; z-index: 1}
.wrapper .header .layer .mask { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/mask.png) no-repeat; z-index: 6}
.wrapper .header .layer .npc1 { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-1.png) no-repeat; z-index: 4}
.wrapper .header .layer .npc2 { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-2.png) no-repeat; z-index: 3}
.wrapper .header .layer .npc3 { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/npc-3.png) no-repeat; z-index: 2}
.wrapper .header .layer #myCanvas { width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; z-index: 5}

.wrapper .btnBox { width: 1240px; position: absolute; left: 50%; top: 5013px; margin-left: -622px;}
.wrapper .btnBox a{ width: 272px; height: 268px; display: inline-block; margin: 0 17px 64px; text-indent: -9999px;}
.wrapper .btnBox .btn-3{ margin-right: 22px;}

.popdiv {width:396px;display: none}
.popdiv img{ width: 100%;}
.popdiv .btn_close{ width: 27px; height: 27px; background: url(../images/btn-close.png) no-repeat; position: absolute; right: -27px; top: 0; cursor: pointer; text-indent: -9999px;}


#popdiv4{ width: 410px;}
#popdiv5,#popdiv6{ width: 408px;}
#popdiv7{ width: 378px;}