body{
	margin: 0px
}

.cp-packery .des{
	display: inline-block;
	color:#787878;
	/*padding-bottom: 70px;*/
    min-height: 350px;
}

.cp-packery .des h3{
	font-size: 32px;
	font-weight: normal;
}

.cp-packery .des p{
	font-size: 12px;
	line-height: 24px;
}

.packery,.cp-packery{
	margin: 0 auto;
	max-width: 1304px;
}
.packery{
	margin-top: 8px !important;
}
.content{
	max-width: 1304px;
	margin:0 auto;
}

.packery,.cp-packery{
	margin: 0 auto;
	max-width: 1305px;
}

.packery .box{
	width: 420px;
	height: 420px;
}

.grid-sizer {
  width: 427px;
}

.packery .box{
    /*height: auto !important;*/
}
.packery .box img{
	width: 100%;
}

.cp-packery .box-small{
	height: auto !important;
}

.grid-small-sizer{

}

.hidden{
	display: none;
}


.box .wrap{
	width:100%;
	height:100%;
	/*background:url('static/img/03-bg.png');*/
	background-size:cover;
	backgrond-attachment:fixed;
	background-position:center;
}

.box,.box-small{
	cursor: pointer;
	background: gray();
	overflow: hidden;
}

.packery .box .range{
	position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
   
    height: 100%;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background: url('../img/mh-bg.png');
    background-color: rgba(0,0,0,.8);
    background-repeat: no-repeat;
    background-position: center;
}

.gone{
	max-width: 1300px;
	background: url('../img/08-btn.png');
	background-position: center;
	background-repeat: no-repeat;
	height: 111px;
	margin:111px auto;
}

.packery .box .range h1{
	color:#ffe100;
	font-weight: normal;
	font-size: 1.6rem;
    margin: 40px 25px 20px 25px;
}

.packery .box .range h3{
	color:#ffe100;
	font-weight: normal;
	font-size: 16px;
    margin: 0px 25px;
}

.packery .box .range h3{
	color:#ffe100;
	font-weight: normal;
	font-size: 16px;
    margin: 0px 23px;
}

.packery .box .range p{
    color: #fff;
    /* padding: 10px; */
    font-weight: normal;
    font-size: 12px;
    border: 1px solid #fff;
    /* margin: 10px; */
    position: absolute;
    bottom: 40px;
    left: 25px;
    right: 25px;
    padding: 10px 0px;
    border-left: 0px;
    border-right: 0px;
}

a{
	text-decoration: none;
}

.box:hover>.range{
	opacity: 1;
}

/* IE 10 */
@-ms-viewport{
	width: device-width;
}


@media screen and (max-width:500px) and (min-width:100px){
	.packery .size2x2 h3{
		display: block !important;
	}

	.packery .box .range h3{
		display: none;
	}
}

@media screen and (max-width:768px) and (min-width:100px ){

	.packery .box .range{
		
	    background: url('../img/mh-bg.png');
	    background-size: 30px 30px;
	    background-color: rgba(0,0,0,.8);
	    background-repeat: no-repeat;
	    background-position: center;
	}
	.packery .box .range h1{
		color:#ffe100;
		font-weight: normal;
		font-size: 16px;
	    margin: 25px 23px 0px 25px;
	}

	.packery .box .range h3{
		color:#ffe100;
		font-weight: normal;
		font-size: 14px;
	    margin: 20px 25px;
	}
	.packery .box .range p{
	    color: #fff;
	    /* padding: 10px; */
	    font-weight: normal;
	    font-size: 12px;
	    border: 1px solid #fff;
	    /* margin: 10px; */
	    position: absolute;
	    bottom: 10px;
	    left: 25px;
	    right: 25px;
	    padding: 6px 0px;
	    border-left: 0px;
	    border-right: 0px;
	}

}


@media screen and (min-width:120px) and (max-width:1304px){
	.panel {
	    color: #787878;
	    padding: 0px 20px;
	}
}

@media screen and (min-width:120px) and (max-width:800px){

	.cp-packery .des{
		display: inline-block;
		color:#787878;
		padding-bottom: 70px;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

}


.add,.go-top{
	margin: 8px auto;
	background-position: center;
	background-repeat: no-repeat;
	height: 160px;
	max-width: 1304px;
	cursor: pointer;
}

.add{
	background-image: url('../img/add-icon-df.png');
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.go-top{
	background-image: url('../img/go-top.png');
	cursor: pointer;
}
.add:hover{
	background-color: #ffe100;
	background-image: url('../img/add-icon.png');
}

.go-top:hover{
	background-image: url('../img/go-top-active.png');
}