@import "https://img1.tiancitycdn.com/mh/homepage/v8/css/base.css";

html body {
    background: #383838;
    width: 100%;
    font-family: Microsoft Yahei
}

#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%;
    margin: 32px auto 0;
    min-width: 1200px;
    max-width: 1920px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.wraper .bg {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto
}

.wraper .bg div {
    width: 100%;
    height: 1000px;
    margin: 0 auto
}

.wraper.bg1 .bg2 {
    background: url(../images/bg1_img_02.jpg) repeat-y center top
}

.wraper.bg1 .bg3 {
    background: url(../images/bg1_img_03.jpg) repeat-y center top
}

.wraper.bg1 .bg4 {
    background: url(../images/bg1_img_04.jpg) repeat-y center top
}

.wraper.bg1 .bg5 {
    background: url(../images/bg1_img_05.jpg) repeat-y center top
}

.wraper.bg1 .bg6 {
    height: 368px;
    background: url(../images/bg1_img_06.jpg) repeat-y center top
}

.wraper.bg1 .content .btn {
    top: 4890px
}

.wraper.bg1 .content .btn a {
    margin: 0 89px 272px
}

.wraper.bg2 .bg2 {
    background: url(../images/bg2_img_02.jpg) repeat-y center top
}

.wraper.bg2 .bg3 {
    background: url(../images/bg2_img_03.jpg) repeat-y center top
}

.wraper.bg2 .bg4 {
    background: url(../images/bg2_img_04.jpg) repeat-y center top
}

.wraper.bg2 .bg5 {
    background: url(../images/bg2_img_05.jpg) repeat-y center top
}

.wraper.bg2 .bg6 {
    background: url(../images/bg2_img_06.jpg) repeat-y center top
}

.wraper.bg2 .bg7 {
    height: 818px;
    background: url(../images/bg2_img_07.jpg) repeat-y center top
}

.wraper.bg2 .content .btn {
    top: 4947px
}

.wraper.bg2 .content .btn a {
    width: 86px;
    height: 77px;
    margin: 0 97px 236px;
    background: none;
    text-indent: -9999px
}

.wraper #go_top {
    right: 1%;
    position: fixed;
    z-index: 20;
    top: 1200;
    box-sizing: border-box;
    width: 171px
}

.wraper #go_top .gbox {
    margin: 0 auto
}

.wraper #go_top .gbox a {
    width: 132px;
    height: 34px;
    line-height: 25px;
    margin: 0 auto 21px;
    display: flex;
    align-items: center;
    color: #508e61;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 11px;
    font-weight: bold
}

.wraper #go_top .gbox a.top {
    width: 61px;
    height: 61px;
    background: url(../images/top-btn.png) no-repeat;
    text-indent: -9999px
}

.wraper #go_top .gbox a:hover,
.wraper #go_top .gbox a.on {
    color: #fff;
    background: #ff7e00
}

.wraper #go_top .gbox a.top:hover {
    background: url(../images/top-btn.png) center bottom
}

.wraper #go_top.gt1 {
    width: 176px;
    height: 352px;
    background: url(../images/bg-top-1.png) no-repeat;
    padding-top: 58px;
    box-sizing: border-box
}

.wraper #go_top.gt2 {
    width: 206px;
    height: 557px;
    background: url(../images/bg-top-2.png) no-repeat;
    padding-top: 41px;
    box-sizing: border-box
}

.wraper #go_top.gt2 a {
    width: 164px
}

.wraper #go_top.gt2 a.g1,
.wraper #go_top.gt2 a.g4,
.wraper #go_top.gt2 a.g5,
.wraper #go_top.gt2 a.g6 {
    height: 58px
}

.wraper .content {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0
}

.wraper .content .btn {
    width: 1200px;
    margin-left: -600px;
    position: absolute;
    left: 50%;
    text-align: center
}

.wraper .content .btn a {
    width: 149px;
    height: 46px;
    line-height: 46px;
    display: inline-block;
    background: url(../images/btn-1.png) no-repeat;
    color: #801a00;
    font-size: 16px
}

.wraper .content .btn a:hover {
    background-position: center bottom;
    color: #fff
}

.wraper .header {
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    position: relative
}

.wraper .header .layer {
    width: 100%;
    margin: 0 auto;
    height: 1000px;
    position: relative;
    overflow: hidden
}

.wraper .nav {
    width: 700px;
    height: 114px;
    position: absolute;
    left: 50%;
    top: 778px;
    margin-left: -362px;
    z-index: 12
}

.wraper .nav a {
    width: 282px;
    height: 114px;
    display: block;
    float: left;
    text-indent: -9999px;
    margin: 0 33px
}

.wraper .nav a span {
    width: 322px;
    height: 114px;
    display: block;
    background: url(../images/nav.png) no-repeat;
    transition: margin .3s ease-in-out 0s
}

.wraper .nav a:nth-child(1) span {
    background-position: 0 0
}

.wraper .nav a:nth-child(2) span {
    background-position: -347px 0
}

.wraper .nav a:hover span {
    background-position-y: -130px;
    margin-top: -10px
}

.wraper .nav a.on span {
    background-position-y: -130px
}

.popdiv {
    width: 378px;
    display: none;
    text-align: center;
    font-size: 18px;
    color: #fff
}

.popdiv .close {
    width: 48px;
    height: 48px;
    background-image: url(about:blank);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 10px;
    top: 9px;
    cursor: pointer;
    text-indent: -9999px
}

#popdiv3 {
    width: 418px
}

#popdiv20 {
    width: 438px
}

#popdiv19,
#popdiv17,
#popdiv16,
#popdiv15,
#popdiv13,
#popdiv12,
#popdiv11 {
    width: 398px
}

#popdiv18 {
    width: 478px
}

#popdiv14 {
    width: 358px
}

.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
}

.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: 7
}

.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
}

#obindex {
    opacity: 0;
    filter: blur(10px)
}

.layer .bgimg,
.layer .grass,
.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 .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 .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
}