*{ margin:0px; padding:0px; box-sizing:border-box; }

body {
    background: url(../images/dnbj.png) no-repeat top center;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    
    display: flex;
    
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    max-height: 100%;
    background-size: 100% 100%;
    justify-content: center;
    align-content: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    
    
}a {
    text-decoration: none;
    outline: none;
    color: inherit;
}
ul,li{ list-style:none; }
img{ max-width:100%;  max-height:100%; }
.wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: #f7f2ee;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column; 
    flex-direction: column;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    height: 100vh;
    align-items: center;
    box-sizing: border-box;
    background-size:100% auto; 
     
    
}
.top 
{
    width:100%; 
    height:60vh;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column; 
    flex-direction: column;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    
    display: flex; 
    
	-webkit-justify-content:space-between;
    justify-content: space-between ;
    
    background:url(../images/top.png) no-repeat top center; 
    
    background-size:100% 100%; 
}
.logo { width: 100%; text-align:center; padding:2% 0px; border-bottom:1px solid #fff;  height:12%; background:#efe5db;    }
.logo img{ }
.wz { width: 100%;  text-align:center;  height:20%;  }
    
    
.model { width: 100%;  text-align:center;  height:62%;  } 
    
    
.wz img{}

.bottom 
{
    width:100%; 
    height:44vh; 
    background:url(../images/bottom.png) no-repeat top center;
    background-size:100% 100%; 
    margin-top: -4vh;  
    
     
	padding-top:9vh; 
}
.bottom ul
{
    padding:0px 12%; 
    
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    
	-webkit-justify-content:center;
    justify-content: center ;
    
    
    -webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
    }
.bottom ul li 
{
    width:42%;
    background:url(../images/jrgw_02.png); 
    background-size:100% 100%;  
    text-align:center;
	margin:0px 1%
     
}
 
.bottom ul li.li1
{ 
    background:url(../images/jrgw_02.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 108%;
     
}
.bottom ul li.li1:hover
{ 
    background:url(../images/jrgw_01.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 0;
     
}
.bottom ul li.li2
{ 
    background:url(../images/appxz_02.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 108%;
}
.bottom ul li.li2:hover
{ 
    background:url(../images/appxz_01.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 0;
}
.bottom ul li.li3
{ 
    background:url(../images/yhdt_02.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 111%;
}
.bottom ul li.li3:hover
{ 
    background:url(../images/yhdt_01.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 0;
}
.bottom ul li.li4
{ 
    background:url(../images/zzzx_02.png) no-repeat; 
    background-size:100% 100%; 
    background-position:0 111%;  
}
.bottom ul li.li4:hover
{ 
    background:url(../images/zzzx_01.png) no-repeat; 
    background-size:100% 100%; 
    background-position:0 0;  
}
.bottom ul li.li5
{ 
    background:url(../images/zxkf_02.png) no-repeat; 
    background-size:100% 100%; 
    background-position:0 108%;  
}
.bottom ul li.li5:hover
{ 
    background:url(../images/zxkf_01.png) no-repeat; 
    background-size:100% 100%; 
    background-position:0 0;  
}
.bottom ul li.li6
{ 
    background:url(../images/jsdc_02.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 108%; 
}
.bottom ul li.li6:hover
{ 
    background:url(../images/jsdc_01.png) no-repeat; 
    background-size:100% 100%;   
    background-position:0 0; 
}
.bottom ul li a
{
   opacity: 0;
   display:block;
}
.copy{ position:absolute; left:0px; right:0px; bottom:0px; width:100%; padding:4px 0px; text-align:center; background:rgba(0,0,0,0.5); text-align:center; font-size:10px; color:#fff; }


#alert{ z-index:9999999999999; background:rgba(0,0,0,0.8);  width:100%; position:absolute; top:0px; height:100vh; left:0px; display:none; align-items: center; justify-content:center;align-content:center;  }
#alert1{ z-index:9999999999999; background:rgba(0,0,0,0.8);  width:100%; position:absolute; top:0px; height:100vh; left:0px; display:none; align-items: center; justify-content:center;align-content:center;  }



.list{ width:80%; max-width:600px; }
.list p{ color:#efd68d; text-align:center; margin-bottom:20px; }
.list ul li{ position:relative;  }
.list ul li .info{ position:absolute; display:flex; left:0px; width:100%; top:0px;  align-items: center; justify-content:center;align-content:center; height:100%; font-size:1.5em;  }
.list ul li .info .min{ width:20%; text-align:center;}
.list ul li .info .xianlu{ width:60%; text-align:center; color:#f0d991; }
.list ul li .info .go{ width:20%; text-align:center; color:#f0d991; }
.list ul li .info .go a{ display:block; }

#clo1{ display:flex; align-items: center; justify-content:center;align-content:center; margin:40px 0px 20px; cursor:pointer;  }
#clo1 img{ width:155px; }

#clo2{ display:flex; align-items: center; justify-content:center;align-content:center; margin:40px 0px 20px; cursor:pointer;  }
#clo2 img{ width:155px; }
@media all and (max-width: 749px) {}

@media all and (max-width: 575px) 
{
    
    
    .bottom ul li {
    width: 48%;
    background: url(../images/jrgw_02.png);
    background-size: 100% 100%;
    text-align: center;
}

    .list ul li .info{ font-size:1em;  }
    #clo1 img{ width:90px; }
    #clo2 img{ width:90px; }
    .menu{ width:7em; right:-7em; }
    .foot{ font-size: 0.8em; }
    .list{ width:88%; max-width:600px; }

}