body{
    background: #fff;
}
*{
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #666;
}
li{
    list-style: none;
}

a{
    text-decoration: none;
}

#navbar{
    width:100vw;
    height:8vh;
    background: #fff;
    box-shadow: 0px 0px 3px #ccc;
    position: fixed;
}

#navbar .logo{
    float: left;
    height: 100%;
    width: auto;
    box-sizing: border-box;
    padding: 5px;
    padding-top: 10px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#navbar .logo img{
    width: 120px;
    /* vertical-align:5px; */
    margin-top: -6px;
}

#navbar .nav{
    float: right;
    height: 100%;
    width: 15vw;
    box-sizing: border-box;
    padding:5px ;
    padding-top: 10px;
    cursor: pointer;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#navbar .nav img{
    display: inline-block;
    width: 30px;
    height: auto;
    margin-left: 5px;
}
#choose{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color:rgba(255,255,255,0.9);
    box-sizing: border-box;
    padding: 10vw;
    padding-top: 10vh;
    position: relative;
    left:0;
    top: 40vh;
    transition: all 0.5s;
    height: 0;
    opacity: 0;
    
    display: none;
}
#choose>ul>li{
    margin-top:15px;
    height: 4vh;
    overflow: hidden;
    transition: all 0.3s;
}
#choose>ul>li>span{
    font-size: 18px;
}
#choose>ul>li>a>span,#choose>ul>li>span{
    font-size: 18px;
}
/* #choose>ul>li>a>span::after{
  content: '';
  display:inline-block;
  width: 20px;
  height: 20px;
  background:url(../../images/加号.png) no-repeat;
  background-size: 80%;
  vertical-align: middle;
} */
/* #choose>ul>li>.open>img{
    width: 14px;
    float: right;
    transition: all 0.3s;
} */

/* #choose>ul>li>.list{
    margin-top: 15px;
}
#choose>ul>li>.list .box{
    line-height: 28px;
}
#choose>ul>li>.list .box a{
    font-size: 14px;
    color: #999;
} */


#save{
    position: fixed;
    left: 88%;
    top: 1.5%;
    transform: rotate(45deg);
}


/* 底部 */

#btm {
    width: 100vw;
    height: auto;
    box-sizing: border-box;
    padding:3vw;
    padding-bottom: 8vh;
    background: #333333;
}

#btm p{
    color: #fff;
    line-height: 1.8;
}


/* 以上导航+菜单栏 */


/* 导航图 */

#navimg{
    width: 100vw;
    height: auto;
    padding-top: 8vh;
}
#navimg img{
    width:  100%;
    height: auto;
}



/* find us */
#find{
    width: 100vw;
    height: 7vh;
    background:rgba(51,51,51,0.8);
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    box-sizing: border-box;
    position: fixed ;
    bottom: 0;
    left: 0;
}

#find button{
    padding: 2vw;
    padding-left: 10vw;
    padding-right: 10vw;
    background: #ce3334;
    border: none;
}
#find button:nth-of-type(1){
    margin-right: 5vw;
}
#find button span{
    color: #fff;
}
#find button  a{
    color: #fff;
}
#find  .weixin{
    width:35vw;
    height:35vw;
    position: absolute;
    right: 0vw;
    bottom: 13vw;
    /* background: #000; */
    background-image: url(../../images/宋总微信.png);
    background-position: center center;
    background-size: 100% 100%;
    opacity: 0;
    display:none;
    transition:all 0.4s;
}

#close {
    position: fixed;
    right: 3vw;
    top: 3vw;
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.8s;
    z-index: -1;
}

#close img{
    width: 8vw;
    height: 8vw;
}



/* start */
#case{
    width:100vw;
    height:auto;
    box-sizing: border-box;
    padding-bottom: 3vh;
}
#case .title {
    width:100vw;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#case .title img{
    width:40vw;
    height:auto;
}

#content{
    width:90vw;
    height:auto;
    margin:0 auto;
}

.casebox{
    width:100%;
    height:auto;
    margin-bottom: 2vh;
}

.casebox span{
    display:inline-block;
    width:100%;
    height:30vh;
    /* background:#000; */
    overflow: hidden;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.casebox:nth-of-type(1) span{
    background-image: url(https://ae01.alicdn.com/kf/H5e25ba4e4eeb4e18b0cf22e60c052c3dg.jpg);
}
.casebox:nth-of-type(2) span{
    background-image:url(https://i.loli.net/2020/04/08/Z8eoIQrpmV2CHxa.jpg);
}
.casebox:nth-of-type(3) span{
    background-image:url(http://道维文旅.com/images/case2.jpg);
}
.casebox:nth-of-type(4) span{
    background-image:url(https://ae01.alicdn.com/kf/H83eae123f3394e7497b107ebc9bd637cd.jpg);
}
.casebox:nth-of-type(5) span{
    background-image:url(https://ae01.alicdn.com/kf/H2bd5dfab06d547439c3b306837a4d251H.jpg);
}
.casebox:nth-of-type(6) span{
    background-image:url(https://ae01.alicdn.com/kf/H111b1c278d764d4184e7ed33121d7e16K.jpg);
}
.casebox:nth-of-type(7) span{
    background-image:url(https://ae01.alicdn.com/kf/H651f93d38a4b494595848ba241f8b2feO.jpg);
}
.casebox:nth-of-type(8) span{
    background-image:url(https://ae01.alicdn.com/kf/He643c60b19994a68bc691f25ec867469c.jpg);
}
.casebox:nth-of-type(9) span{
    background-image:url(https://ae01.alicdn.com/kf/Hf48072b0871041af8c4c0ac624f14332m.jpg);
}
.casebox:nth-of-type(10) span{
    background-image:url(https://ae01.alicdn.com/kf/H567eb518a3d04a2196d63f22e08fd2d8u.jpg);
}


.casebox p {
    width: 100%;
    padding:2vw;
    box-sizing: border-box;
    background: #ce3334;
    color: #fff;
}

.caseboxx{
    position:fixed;
    left:100vw;
    top: 0;
    box-sizing: border-box;
    width: 100vw;
    height:100vh;
    padding:10vw;
    padding-top:10vh;
    padding-bottom: 12vw;
    background:#333;
    overflow-x: auto;
    opacity: 0;
    transition: all 0.8s;
}

.caseboxx h2{
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 2;
}

.caseboxx span{
    color: #fff;
    line-height: 1.8;
}

.caseboxx  img{
    width: 100%;
    margin-top: 2vw;
}