*{
    margin:0;
    padding:0;
    /*border: 1px solid red;*/
}
html, body {
    height: 100%;
}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
    min-width: 320px;
    max-width: 640px;
    margin: 0px auto;
    position: relative;
    -webkit-text-size-adjust: none;
     
}
.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    overflow: hidden;
    Center: slide text vertically ;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.section1{background: url(../images/beijing_1.png);background-size: 100% 100%;}
.img1_1{
    position: absolute;
    top: -5%;
    left: 0%;
    width: 100%;
    height: 110%
}
.img1_2{
    position: absolute;
    top: 5%;
    left: 5%;
    bottom: 5%;
    right: 5%;
    width: 90%;
    height: 90%;
    opacity: 0.5;
}
.img1_3{
    position: absolute;
    top: 11%;
    /*left: 9%;*/
    bottom: 7%;
    right: 45%;
    width: 40%;
    /*height: 86%;*/
}
.img1_4{
    position: absolute;
    top: 29%;
    left: 15%;
    /*transform:rotate(50deg);*/
    width: 58%;
    height: 25%;
    /*opacity: 0;*/
}
.img1_5{
    position: absolute;
    top: 33%;
    left: -15%;
    transform:rotate(65deg);
    width: 40%;
    height: 25%;
}
@keyframes yezib{
    0% {
        top: 45%;
        left: -55%;
    }
    100% {
        top: 33%;
        left: -15%;
    }
}
.yezib{
    animation: yezib 2s;
}
.img1_6{
    position: absolute;
    left: 20%;
    bottom: 0%;
    transform:rotate(0deg);
    width: 45%;
    height: 25%;
}

.img1_7{
    position: absolute;
    right: 3%;
    bottom: 0%;
    width: 45%;
    
}
@keyframes yezid{
    0% {
        right: 3%;
        bottom: -50%;
    }
    100% {
        right: 3%;
        bottom: 0;
    }
}
.yezid{
    animation: yezid 3s;
}
.img1_8{
    position: absolute;
    right: -10%;
    bottom: 0;
    transform:rotate(0deg);
    width: 40%;

}
@keyframes yezie{
    0% {
        right: -50%;
        bottom: 0;
    }
    100% {
        right: -10%;
        bottom: 0;
    }
}
.yezie{
    animation: yezie 2.5s;
}
.img1_9{
    position: absolute;
    left: 25%;
    width: 50%;
    top: 16%;
    display: none;
}
/*.img1_10{
    position: absolute;
    bottom: 17%;
    left: 15%;
    width: 70%;
    display: none;
}*/
.img1_10{
    position: fixed;
    /*bottom: 55px;*/
    left: 2%;
    width: 96%;
    height:30%;
    display: none;
    /*background:url("../picture/juxing.png") no-repeat;*/
    /*background-size: 100% 100%;*/
    /*color:#F7F8FB;*/
    color:#666;
    text-align: left;
    /*padding-left: 20px;*/
    padding-top:20px;
    padding-bottom: 20px;
    /*font-size: 15px;*/
    text-align: center;
}
.fx_ios{bottom:17%;}
.fx_anzhuo{bottom:18%;}
.img1_11{
    position: absolute;
    bottom: 20%;
    left: 25%;
    width: 50%;
    display: none;
}
@keyframes tu{
    0% {
        top: 107%;
    }
    100% {
        top: 7%;
    }
}
.tu1{
    animation: tu 1s;
}
.img2_1{
    position: absolute;
    width: 240%;
    height: 106%;
    left: 0%;
}
.img2_2{
    position: absolute;
    width: 60%;
    height: 106%;
    left: 75%;
    background-color: rgb(35,25,77);
    transform:rotate(-2deg);
    display: none;
}
.img2_3{
    position: absolute;
    left: 60%;
    top: 20%;
    background-color: rgb(35,25,77);
    font-size: 12px;
    color: rgba(222, 184, 129, 0.843137);
    /*display: none;*/
}
#content1{
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: rgba(222, 184, 129, 0.843137);
}
.img2_4{
    position: absolute;
    left: 100%;
    bottom: -15%;
    width: 70%;
    height: 42%;
    animation:circle 10s infinite linear;
}
@-webkit-keyframes circle{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
.img3_1{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}
.img3_2{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    text-align: center;
}
.img3_2 ul{
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    text-align: center;
}
.img3_2 ul li{
    /*position: absolute;*/
    opacity: 0;
    width: 100%;
    /*height: 10%;*/
}
#content2{
    /*position: absolute;*/
    width: 8.4%;
    height: 100%;
    font-size: 16px;
    color: rgba(222, 184, 129, 0.843137);
}
.img3_2 ul li:last-child{
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 20%;
    opacity: 1;
}
.img3_3{
    width: 100%;
    height: 100%;
}
.img4_1{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}
.img4_2{
    position: absolute;
    top: 5%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    opacity: 0;
    text-align: left;
    /*background-color: red;*/
}
.img4_3{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    opacity: 0;
    text-align: left;
    /*background-color: red;*/
}
@-webkit-keyframes leftin1{
    0% {
        left: -50%;
    }
    100% {
        left: 10%;
    }
}
.leftin1{
    animation: leftin1 1s ease-out;
    /*animation-timing-function:ease-out;*/
}
.img4_4{
    position: absolute;
    top: 15%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: left;
    /*background-color: red;*/
}
.img4_5{
    position: absolute;
    top: 20%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: left;
    opacity: 0;
    /*background-color: red;*/
}
@-webkit-keyframes leftin2{
    0% {
        left: -50%;
    }
    100% {
        left: 10%;
    }
}
.leftin2{
    animation: leftin2 1s ease-out;
    /*animation-delay: 1s;*/
    /*animation-timing-function:ease-out;*/
}
.img4_6{
    position: absolute;
    top: 25%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 8%;
    text-align: left;
    opacity: 0;
    /*background-color: red;*/
}
@-webkit-keyframes leftin3{
    0% {
        left: -50%;
    }
    100% {
        left: 10%;
    }
}
.leftin3{
    animation: leftin2 1s ease-out;
    /*animation-delay: 1.5s;*/
    /*animation-timing-function:ease-out;*/
}
.img4_7{
    position: absolute;
    top: 33%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: left;
    /*background-color: red;*/
}
.img4_8{
    position: absolute;
    top: 38%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: left;
    opacity: 0;
    /*background-color: red;*/
}
.img4_9{
    position: absolute;
    top: 43%;
    left: 10%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: left;
    opacity: 0;
    /*background-color: red;*/
}
@-webkit-keyframes leftin4{
    0% {
        left: -50%;
    }
    100% {
        left: 10%;
    }
}
.leftin4{
    animation: leftin4 1s ease-out;
    /*animation-delay: 2s;*/
    /*animation-timing-function:ease-out;*/
}
.img4_10{
    position: absolute;
    top: 62%;
    left: -8%;
    width: 110%;
    height: 50%;
    transform: rotate(-8deg);
    opacity: 0;
}
@-webkit-keyframes rightin1{
    0% {
        left: 32%;
    }
    100% {
        left: -8%;
    }
}
.rightin1{
    animation: rightin1 1s ease-out;
}
.img4_11{
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 50%;
    opacity: 0;
}
@-webkit-keyframes rightin2{
    0% {
        left: 45%;
    }
    100% {
        left: 5%;
    }
}
.rightin2{
    animation: rightin2 1s ease-out;
    /*animation-delay: 2s;*/
    /*animation-timing-function:ease-out;*/
}
.img5_1{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}
.img5_2{
    position: absolute;
    top: 5%;
    left: 0%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    opacity: 0;
    text-align: center;
    /*background-color: red;*/
}
.img5_3{
    position: absolute;
    top: 10%;
    left: 0%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    opacity: 0;
    text-align: center;
    /*background-color: red;*/
}
.img5_4{
    position: absolute;
    top: 15%;
    left: 0%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: center;
    /*opacity: 0;*/
    /*background-color: red;*/
}
.img5_5{
    position: absolute;
    top: 20%;
    left: 0%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: center;
    opacity: 0;
    /*background-color: red;*/
}
.img5_6{
    position: absolute;
    top: 28%;
    left: 0%;
    width: 100%;
    font-size: 20px;
    height: 8%;
    text-align: center;
    /*opacity: 0;*/
    /*background-color: red;*/
}
.img5_7{
    position: absolute;
    top: 33%;
    left: 0%;
    width: 100%;
    font-size: 20px;
    height: 5%;
    text-align: center;
    opacity: 0;
    /*background-color: red;*/
}
.img5_8{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    height: 50%;
    text-align: center;
    opacity: 0;
    /*background-color: red;*/
}
.img6_2{
    position: absolute;
    top: 20%;
    left: -13%;
    width: 80%;
    height: 80%;
    /*text-align: right;*/
    opacity: 0;
    /*background-color: red;*/
}
.img6_3{
    position: absolute;
    top: 5%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img6_4{
    position: absolute;
    top: 10%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img6_5{
    position: absolute;
    top: 15%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    /*opacity: 0;*/
    /*background-color: red;*/
}
.img6_6{
    position: absolute;
    top: 20%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img6_7{
    position: absolute;
    top: 28%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    /*opacity: 0;*/
    /*background-color: red;*/
}
.img6_8{
    position: absolute;
    top: 33%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img6_9{
    position: absolute;
    top: 38%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img6_10{
    position: absolute;
    top: 43%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img6_11{
    position: absolute;
    top: 48%;
    right: 15%;
    width: 80%;
    height: 80%;
    text-align: right;
    opacity: 0;
    /*background-color: red;*/
}
.img7_1{
    position: absolute;
    top: 45%;
    right: 4%;
    width: 85%;
    height: 55%;
    opacity: 0;
    /*background-color: red;*/
}
.img7_2{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 5%;
    left: 0%;
    opacity: 0;
}
.img7_3{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 10%;
    left: 0%;
    opacity: 0;
}
.img7_4{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 15%;
    left: 0%;
    /*opacity: 0;*/
}
.img7_5{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20%;
    left: 0%;
    opacity: 0;
}
.img7_6{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 27%;
    left: 0%;
    /*opacity: 0;*/
}
.img7_7{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 32%;
    left: 0%;
    opacity: 0;
}
.section8{background: url(../images/beijing_1.png);background-size: 100% 100%;}
.img8_1{
    position: absolute;
    top: -5%;
    left: 0%;
    width: 100%;
    height: 110%
}
.img8_2{
    position: absolute;
    top: 5%;
    left: 5%;
    bottom: 5%;
    right: 5%;
    width: 90%;
    height: 90%;
    opacity: 0.5;
}
.img8_3{
    position: absolute;
    top: 7%;
    left: 9%;
    bottom: 7%;
    right: 9%;
    width: 82%;
    height: 86%;
}
.img8_4{
    position: absolute;
    top: 23%;
    left: -18%;
    transform:rotate(140deg);
    width: 40%;
    height: 25%;
    /*opacity: 0;*/
}
.img8_5{
    position: absolute;
    top: 33%;
    left: -15%;
    transform:rotate(125deg);
    width: 40%;
    height: 25%;
}

.img8_6{
    position: absolute;
    left: 27%;
    bottom: 0;
    transform:rotate(0deg);
    width: 45%;
    height: 25%;
}

.img8_7{
    position: absolute;
    right: -7%;
    bottom: 0;
    width: 45%;
    height: 25%;
}
@keyframes yezia{
    0% {
        left: -50%;
    }
    100% {
        left: 15%;
    }
}
.yezia{
    animation: yezia 1.5s;
}
@keyframes yezib{
    0% {
        top: 45%;
        left: -55%;
    }
    100% {
        top: 33%;
        left: -15%;
    }
}
.yezib{
    animation: yezib 2s;
}
@keyframes yezic{
    0% {
        left: 20%;
        bottom: -50%;
    }
    100% {
        left: 20%;
        bottom: 0;
    }
}
.yezic{
    animation: yezic 3.5s;
}
@keyframes yezicfx{
    0% {
        left: 27%;
        bottom: -50%;
    }
    100% {
        left: 27%;
        bottom: 0;
    }
}
.yezicfx{
    animation: yezicfx 3.5s;
}
@keyframes yezif{
    0% {
        right: -7%;
        bottom: -50%;
    }
    100% {
        right: -7%;
        bottom: 0;
    }
}
.yezif{
    animation: yezif 3s;
}
/*.img8_8{
    position: absolute;
    right: -10%;
    bottom: 10%;
    transform:rotate(-130deg);
    width: 40%;
    height: 20%;
}*/
/*@keyframes yezie{
    0% {
        right: -50%;
        bottom: 10%;
    }
    100% {
        right: -10%;
        bottom: 10%;
    }
}*/
/*.yezie{
    animation: yezie 2.5s;
}
@keyframes biankuang{
    0% {
        top: -100%;
        left: 5%;
    }
    100% {
        top: 5%;
        left: 5%;
        bottom: 5%;
        right: 5%;
    }
}*/
.biankuang{
    animation: biankuang 1s;
}
@keyframes tu{
    0% {
        top: 107%;
    }
    100% {
        top: 11%;
    }
}
.tu1{
    animation: tu 1s;
}
.wenzi1{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
    /*white-space: pre;*/
    /*line-height: 100%;*/
}
.wenzi8_1{
    position: relative;
    width: 50px;
    font-size: 60px;
    color: #fff;
    top: 15%;
}
.wenzi2{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
    /*white-space: pre;*/
    /*line-height: 100%;*/
}
.wenzi8_2{
    position: relative;
    width: 50px;
    font-size: 25px;
    color: #fff;
    top: 15%;
    /*opacity: 0;*/
}
.img8_9{
    position: absolute;
    width: 50%;
    height: 10%;
    top: 15%;
    left: 25%;
    opacity: 0;
}
.img8_10{
    position: absolute;
    width: 220%;
    height: 25%;
    top: 25%;
    left: 10%;
    opacity: 0;
}
.img8_11{
    /*background: url(../images/daoxibeijing.jpg);*/
    position: absolute;
    width: 80%;
    height: 25%;
    top: 37%;
    left: 10%;
    opacity: 0;
}
.img8_11_1{
    position: absolute;
    width: 100%;
    height: 90%;
    top: 0%;
    left: 0%;
    /*opacity: 0;*/
}
.img_hengxian1{
    background: url(../images/hengxian.png);
    background-size: 100% 100%;
    position: absolute;
    width: 70%;
    height: 5%;
    top: 32%;
    left: 15%;
    opacity: 0;
}
.img_hengxian2{
    background: url(../images/hengxian.png);
    background-size: 100% 100%;
    position: absolute;
    width: 70%;
    height: 5%;
    top: 58%;
    left: 15%;
    opacity: 0;
}
.wenzi3{
    position: absolute;
    width: 100%;
    height: 10%;
    top: 67%;
    left: 0%;
    text-align: center;
    font-size: 16px;
    color: #fff;
    opacity: 0;
}
.btn{
    background: url(../images/bgmbtn.svg);
    background-size: 100% 100%;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 6%;
    right: 6%;
    z-index: 999;
}
.btnonclick{
    animation:circle 1s infinite linear;
}
/***底部菜单***/
/*@media screen and (max-width:770px){*/
    ul li{list-style: none;}
 .fx_dibu{display:block;}
 .footnav{margin:0; position:fixed; bottom:0px; background:#1f1d1d; border-top:1px solid #1f1d1d; height:50px; overflow:hidden; width:100%; max-width:640px; z-index:111}
 .footnav li{ float:left; width:25%; text-align:center;}
 .footnav li a{ display:block; height:50px; color:#999999;text-decoration:none;}
 .footnav li i{ width:100%; height:18px; display:block; margin:0 auto; margin-top:5px; margin-bottom:5px;}
/* .footnav li.nav-1 i{ background:url(../../images/icon_03.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-2 i{ background:url(../../images/icon_11.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-3 i{ background:url(../../images/icon_06.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-4 i{ background:url(../../images/icon_08.png) no-repeat center; background-size:auto 100%;}
 .footnav li:hover a,.footnav li.on a{color:#FFA72C;}
 .footnav li.nav-1:hover i,.footnav li.nav-1.on i{ background:url(../../images/icon_17.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-2:hover i,.footnav li.nav-2.on i{ background:url(../../images/icon_20.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-3:hover i,.footnav li.nav-3.on i{ background:url(../../images/icon_18.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-4:hover i,.footnav li.nav-4.on i{ background:url(../../images/icon_19.png) no-repeat center; background-size:auto 100%;}*/
 .footnav li.nav-1 i{ background:url(../../images/woshi.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-2 i{ background:url(../../images/wokan.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-3 i{ background:url(../../images/woyao.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-4 i{ background:url(../../images/wode.png) no-repeat center; background-size:auto 100%;}
 .footnav li:hover a,.footnav li.on a{color:#d1aa6f;}
 .footnav li.nav-1:hover i,.footnav li.nav-1.on i{ background:url(../../images/woshi_on.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-2:hover i,.footnav li.nav-2.on i{ background:url(../../images/wokan_on.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-3:hover i,.footnav li.nav-3.on i{ background:url(../../images/woyao_on.png) no-repeat center; background-size:auto 100%;}
 .footnav li.nav-4:hover i,.footnav li.nav-4.on i{ background:url(../../images/wode_on.png) no-repeat center; background-size:auto 100%;}
/*}*/
.erji{
    display: inline-block;
    width:11vw;
    max-width: 70px;
    height:11vw;
    max-height: 70px;
    background:url(../picture/index-erji.png) no-repeat;
    background-size:100%;
    /*margin-bottom: 15px;*/
    position:absolute;
    left: 106%;
    top: -66%;
}