/*//////////////////////////////////////////////////////////////////////////////

book.css
	
//////////////////////////////////////////////////////////////////////////////*/
#main{
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
	border-bottom:6px solid #fff;
}
.cover{
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
	border-top: 6px solid #fff;
	border-left: 6px solid #fff;
	border-right: 6px solid #fff;
	
	height:400px;
	min-width:750px;
	background-size:cover;
	position:relative;
}
.end{
	border-bottom:none;
}
.cover {
	position:relative;
	overflow:hidden;
}
.cover dl{
	position:absolute;
	width:50%;
	text-align:center;
}
.cover dt{
	font-size:16px;
	line-height:1;
}
.cover dd{
	font-family: 'Lato', Arial, serif; font-weight: 300;
	font-size:13px;
	margin-top:10px;
}
.grids img{
	max-width:none;
    height: auto;
    display: block;
	position:absolute;
}
.bgRight img{
	right:0;
}
.bgLeft img{
	left:0;
}
.bgLeft dl{
	left:50%;
}

.cover dt.pink{
	line-height:1.4;
}

a.white{
  color: #fff !important;
}

/* MouseAction
-----------------------------*/
#main a{
	width:100%;
	color:#555;
}
.cover img {
    -moz-transition: -moz-transform 2s;
    -webkit-transition: -webkit-transform 2s;
    -o-transition: -o-transform 2s;
    -ms-transition: -ms-transform 2s;
    transition: transform 2s;
}
.cover img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* Responsive Styles
   ========================================================================== */
@media screen and (max-width:1024px) {
	
}
@media screen and (max-width: 768px) {	
	#main{
		border: 3px solid #fff;
	}
	.cover{
		border-top: 0;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
		border-bottom: 6px solid #fff;
		min-width:100%;
		height:250px;
	}
	.end{
		border-bottom:3px solid #fff;
	}
	.grids img{
		max-width:none;
		width:auto;
		height:250px;
	}
	.cover dl{
		position:absolute;
		width:45%;
		text-align:center;
	}
	.bgLeft dl{
		left:55%;
	}
	.cover dt{
		line-height:1.4;
	}
	.cover dt.pink{
	font-size:12px;
}
}
@media screen and (max-width: 480px) {	
	.cover{
		min-width:100%;
		height:150px;
	}
	.grids img{
		max-width:none;
		width:auto;
		height:150px;
	}
	.cover dt{
		font-size:13px;
	}
	.cover dd{
		font-size:10px;
	}
}