@import "https://img1.tiancitycdn.com/mh/homepage/v8/css/base.css";
html body{background:#383838;width:100%;}
.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;}
.wraper{width:100%; height: 1080px; min-width: 1200px; max-width: 1920px; margin:0 auto; overflow: hidden;}
.wraper .layer { width: 100%; margin: 0 auto; height: 1080px; position: relative;}
.wraper #obindex{ width: 148px; height: 92px; position:absolute; top: 70px; left: 50%; margin-left: -74px; z-index: 10; text-indent:-999em; background: url(../images/logo.png) no-repeat;}
.wraper .bgimg{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/body.jpg) no-repeat center top; z-index: 1; }
.wraper .grass{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/grass.png) no-repeat center top;; z-index: 4; }
.wraper .flower{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/flower.png) no-repeat center top;; z-index: 6; pointer-events:none;}
.wraper .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 7; }
.wraper .npc1{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-1.png) no-repeat center top;; z-index: 3;}
.wraper .npc2{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-2.png) no-repeat center top;; z-index: 5;}
.wraper .npc3{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-3.png) no-repeat center top;; z-index: 2;}

.wraper .lv1 { position: absolute; right: -100px; top: 45%}
.wraper .lv2 { position: absolute; right: -100px; top: 20%}
.wraper .lv3 { position: absolute; right: -100px; top: 24%}
.wraper .lv4 { position: absolute; right: -100px; top: 28%}
.wraper .lv5 { position: absolute; right: -100px; top: 60%}
.wraper .lv6 { position: absolute; right: -100px; top: 53%}
.wraper .lv7 { position: absolute; right: -100px; top: 50%}
.wraper .lv8 { position: absolute; right: -100px; top: 65%}

.wraper .leave span{ z-index: 5;}

.wraper .nav{ width: 1200px; height: 157px; position: absolute; top: 815px; left: 50%; margin-left: -617px; z-index: 11; background: url(../images/bg-nav.png) no-repeat; box-sizing: border-box; padding: 15px 0 0 80px;}	
.wraper .nav a{ width: 223px; height: 122px; margin: 0 20px; float: left; text-indent: -9999px;}
.wraper .nav a span{ width: 100%; height: 100%; display: block; background: url(../images/btn-nav.png) no-repeat;}
.wraper .nav a:nth-child(1) span{ background-position: 0 7px;}
.wraper .nav a:nth-child(2) span{ background-position: -263px 7px;}
.wraper .nav a:nth-child(3) span{ background-position: -526px 7px;}
.wraper .nav a:nth-child(4) span{ background-position: -791px 7px;}
.wraper .nav a:hover span{ background-position-y: -122px;}

#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg,.layer .grass,.layer .flower,.layer .slogan{ opacity: 0; transform: scale(1.5);filter: blur(10px);} 
.content .nav{ opacity: 0; transform: scale(1.5) translate(0,150px);filter: blur(10px);} 
.layer .npc1{ transform: translate(-300px,0) scale(1.2); opacity: 0; filter: blur(10px);}
.layer .npc2,.layer .npc3{ transform: translate(300px,0) scale(1.2); opacity: 0; filter: blur(10px);}

.load_complate #obindex,.load_complate .layer .bgimg,.load_complate .layer .grass,.load_complate .layer .flower,.load_complate .layer .slogan,.load_complate .layer .npc1,.load_complate .layer .npc2,.load_complate .layer .npc3,.load_complate .content .nav{ filter: blur(0); transform: scale(1) translate(0,0); opacity: 1; transition: all 1s ease;}

.load_complate .layer .npc { transition-delay: .3s }
.load_complate .layer .slogan { transition-delay: .5s }
.load_complate .layer .bgimg { transition-delay: .1s }
.load_complate .layer .grass { transition-delay: .2s }
.load_complate .layer .flower { transition-delay: .3s }
.load_complate .content .nav{ transition-delay: .2s }
.load_complate .layer .npc1{ transition-delay: .4s }
.load_complate .layer .npc2{ transition-delay: .3s }
.load_complate .layer .npc3{ transition-delay: .2s }


#popdiv{ width: 700px; height: 500px; background: #000; display: none; z-index: 999;}
#popdiv .popbox{ width: 700px; height: 500px; overflow: hidden;}	
#popdiv .close{ width: 48px; height: 48px; position: absolute; top: 0; right: -50px; display: block; text-indent: -9999px; background: url(https://image.tiancity.com/player/images/close_btn.jpg) no-repeat; cursor: pointer;}