* {
    margin:0;
    padding:0;
    list-style:none;
}
img {
    max-width:100%;
}
html,body {
    width:100%;
    height:100%;
    overflow: hidden;

}
.container {
    position:relative;
    width:100%;
    height:100%;
    
    background-size:cover;
}
.bg1 {
    background:url(img/bg.jpg)center no-repeat;
}
.bg2 {
    background:url(img/bg2.jpg)center no-repeat;
}
.icon .introduce {
    cursor:pointer;
    top:20%;
    left:35%;
    width:30px;
}
.icon img {
    position:absolute;
}
.icon .logo {
    top:52px;
    left:64px;
}
.icon .logo-icon {
    bottom:50px;
    right:64px;
}
.icon .name {
    bottom:50px;
    left:64px;
}
.container .button {
    position:absolute;
    top:132px;
    right:260px;
}
.container .button a {
    display:block;
    position:absolute;
    width:180px;
    height:50px;
    bottom:8px;
    left:0;
    right:0;
    margin:auto;
}
.list {
   
}
.list .scene {
    position:absolute;
    top:20%;
    left:20%;
    width:50%;
    display:flex;
    justify-content:space-between;
    align-items: flex-start;
}
.list .scene a {
    width:30%;
}
.list .map {
    position:absolute;
    top:20%;
    right:5%;
    width:12%;
}
.list a {
    display:block;
}
.list a img {
    width:100%;
}
.right-aside {
    position:absolute;
    width:73px;
    right:64px;
    bottom:90px;
    display:flex;
    align-content:space-between;
    flex-direction: column;
    align-items: center;
}
.skip {
    display:block;
    position:absolute;
    z-index:22;
    bottom:60px;
    right:40px;
    width:221px;
    height:67px;
}
.wap {
    display:none;
}
.start-video {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:2;
}
.infos {
    position: absolute;
    left: 66px;
    bottom: 10px;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    /* background: rgb(78, 112, 140,0.5); */
    padding: 5px;
    border-radius: 5px;
}
.map {
    position:absolute;

}
@media screen and (max-width:600px) {
    .pc {
        display:none;
    }
    .wap {
        display:block;
    }
    .bg1 {
        background:url(img/wapbg.jpg)center no-repeat;
        background-size:auto 100%;
    }
    .Wap img {
        position:absolute;
    }
    .waplist img {
        position:absolute;
    }
    .wap .introduce {
        top:55%;
        left:37%;
        width:20px;
        z-index:99;
    }
    .wap .logo {
        width:17%;
        top:5vw;
        left:5.5vw;
    }
    .wap .museum {
        width:98.7%;
        top:50%;
        left:0;
        right:0;
        margin:auto;
    }
    .wap .theme {
        width:72%;
        top:30%;
        left:0;
        right:0;
        margin:auto;
    }
    .wap .name {
        width:18.5%;
        top:6.6vw;
        right:5.5vw;
    }
    .wap .list-name {
        width:23.6%;
        right:9.6vw;
        top:50%;
    }
    .wap .button {
        display:block;
        width:28%;
        bottom:20%;
        left:0;
        right:0;
        top:auto;
        margin:auto;
    }
    .wap .button img {
        width:100%;
    }
    .waplist {
        position:absolute;
        width:80%;
        left:0;
        right:0;
        top:10%;
        margin:auto;
    }
    .waplist img {
        position:relative;
    }
    .bottom-aside {
        position:absolute;
        width:100%;
        bottom:5%;
        display:flex;
        justify-content: center;
    }
    /* .bottom-aside a {
        display:block;
        font-size:0;
    } */
    .bottom-aside img {
        position:relative;
        width:18.3vw;
        height:auto;
        margin:0 2px;
    }
    .skip {
        width:30%;
        height:auto;
        bottom:10%;
        right:10%;

    }
    .infos {
        left:0;
        bottom:80px;
    }
    .navs {
        position:absolute;
        width:72%;
        left:0;
        right:0;
        margin:auto;
        bottom:20%;

    }
    .navs #map1 {
        position:absolute;
        width:100%;
        height:50%;
        left:0;
        top:50%;
    }
    .navs #map3 {
        position:absolute;
        width:100%;
        height:24%;
        left:62%;
        top:17%;
    }
    .navs #map4 {
        position:absolute;
        width:100%;
        height:15%;
        left:62%;
        top:0;
    }
}