/*  reset  */

body, p, h1, h2, h3, h4, h5, h6, dd, dl, dt, form, th, td, ul, li, ol {
	margin: 0;
	padding: 0;
}
input, select, textarea {
	vertical-align: middle;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td {
	border: 1px solid #ddd;
}
img {
	border: 0;
}
ul, ol, li {
	list-style-type: none;
}

body {
    background: #f9f9f9;
    font: 12px/21px "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
a{ text-decoration:none;}
header {
   position: fixed;
    background: #fff;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    width: 100%;
    top: 0;
    display: flex;
    padding: 0 20px;
    box-sizing: border-box;
	 
}

#logo {
    float: left;
    font-size:18px;
	 color:#333;
	 letter-spacing: 15px;
}

 

nav {
    float: right; 
}

nav a { 
    color: #333; 
    font-size: 1.2em;
    padding: 0 0 0 20px;
}
nav a:hover {
    color: #f08;
}

#url {      margin: 10px auto;
    display: block;
    width: 50%;
    border: 1px solid #ddd;
    line-height: 12px;
   
}

.container {
      margin: 40px 0 0 0;
    padding: 5px;
    overflow: hidden;
	
}
#main {
 flex-wrap: wrap;
     
    display: flex;

}
#main:after {
    content: '';
    flex-grow: 999999999;
    min-width: 200px;
    height: 0;
}
#main li{
  position: relative;
    transition: all .35s linear;
    flex-grow: 1;
   
    margin: 1px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; 
}
 
 #main li img{    min-width: 100%; min-height:100%; 
    height: auto; }
	
	
 #main li:after {
    position: absolute;
    content: '';
    width: 100%;
    bottom: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to bottom,rgba(0,0,0,0),#000 100%);
    opacity: 0;
    transition: all .35s linear;
}

 #main li:hover:after {
    opacity: 0.7;
}
 
.message{ display:none;    position: fixed; top:10%;
    left: 50%;
    transform: translate(-50%, 0);
    background: #393;
    padding: 5px 20px;
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    z-index: 999;}

.loader,.loader:after {
	border-radius:50%;
	width:5em;
	height:5em;
}
.loader {
	z-index:999;
	position:fixed;
	top:50%;
	left:50%;
	margin:-2.5em 0 0 -2.5em;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	border:0.5em solid #ddd;
	border-left:0.5em solid #f08;
	-webkit-animation:load8 1.1s infinite linear;
	animation:loader 1.1s infinite linear;
}


@media only screen and (min-width: 1024px){
 #main li{ height: 600px;  }

}

@media only screen and (max-width: 1023px){
 #main li{ min-width:100%;}

}


@-webkit-keyframes loader {
	0% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
}@keyframes loader {
	0% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
}