@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);

html,body{margin:0px;padding:0px;width:100%;//font-size:10px;font-family:'NanumSquare', '맑은 고딕', '돋움',Dotum,AppleGothic,sans-serif;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased}


.grid_2 {
	position: relative;
	clear: both;
	margin: 0 auto;
	//padding: 1em 0 4em;
	max-width: 1200px;
	list-style: none;
	height:auto;
	//text-align:center;

}

.latest_title_3 {
	display: block;
	width:100%;
	margin-top:50px;
	text-align:center;
	line-height:40px;
	font-size:25px;
	color:#333;
	font-weight:500
}

.latest_desc {
	display: block;
	width:100%;
	text-align:center;
	line-height:30px;
	font-size:15px;
	color:#555;
	font-weight:300
}

/* Common style */
.grid_2 figure {
	display:inline-block;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1.38%;
	width: 290px;
	height: 250px;
	//width: 375px;
	//height: 265px;
	zoom:0.92;
}

.grid_2 figure img {

    width:100%;
    height:100%;
	opacity: 1;
	object-fit:cover;
}

.shop_box {
	opacity: 0.9;
}
.shop_box .name{
	width: 100%; height: 20%;
	padding-top:18px;
    bottom: 50px; left: 0;
	position: absolute;
	word-spacing: -0.15em;
	font-weight: 700;
	color: #fff;
	font-size: 1.8em;
	opacity: 1;
	background-color: rgba(0,0,0,0.4);
  	padding-left:10px; 
	border-bottom:1px solid #fff;

}

.shop_box .course{
	padding-left:10px;
	padding-top:12px;
	width: 100%; height: 50px;
    bottom: 0; left: 0;
	position: absolute;
	word-spacing: -0.15em;
	font-weight: 500;
	color: #fff;
	font-size: 1.2em;
	background-color: rgba(0,0,0,0.4);

}

.shop_box .price{
	padding-left:10px;
	width: 100%; height: 20%;
    bottom: 0; right: 0;
	position: absolute;
	word-spacing: -0.15em;
	font-weight: 600;
	color: #fff;
	font-size: 1.8em;
	text-align:right;
	padding-right:10px;
	padding-top:12px;
}

.shop_box .distance{
	width: 100%; height: 20%;
	padding-top:25px;
    bottom: 50px; left: 0;
	position: absolute;
	word-spacing: -0.15em;
	font-weight: 500;
	color: #fff;
	font-size: 1.3em;
	opacity: 1;
  	padding-left:10px; 
	text-align:right;
	padding-right:10px;
	color: yellow;

}

.hover_box {
	opacity: 0;
}

.hover_box .name{
	width: 100%; height: 100%;
	padding-top:60px;
    top: 0; left: 0;
	position: absolute;
	word-spacing: -0.15em;
	font-weight: 700;
	color: #fff;
	font-size: 2.8em;
	border-bottom:1px solid #fff;
	text-align:center;
	background-color: rgba(0,0,0,0.6);

}

.hover_box .addr{
	width: 100%; height: 100%;
	padding-top:105px;
    top: 0; left: 0;
	position: absolute;
	word-spacing: -0.15em;
	font-weight: 500;
	color: #fff;
	font-size: 1.5em;
	text-align:center;

}

.hover_box .detail{
	position: absolute;
	width:80px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:1.1em;
	color:#fff;
	border:1px solid #fff;
	top:160px;
	left:105px;

}

.grid_2 figure figcaption h4{
	width: 100%; height: 100%;
	top: 0; left: 0;
	position: absolute;
	line-height: 100px;
	background-color: rgba(0,0,0,0.3);
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0; /* 처음에 안보이게 처리 */
	transition: 0.3s; /* 변화되는 CSS에 시간차를 줌 */

}
/* 테두리 */
.grid_2 figure figcaption h4:after {
	  content: ''; /* 비워둠 */
	  display: block;
	  width: calc(100% - 40px);
	  height: calc(100% - 40px);
	  border: 1px solid #fff;
	  box-sizing: border-box;
	  position: absolute;
	  left: 0; right: 0; top: 0; bottom: 0;
	  margin: auto; /* 기준에서 정가운데 오도록 처리 */
}

.grid_2 figure:hover .hover_box, .grid_2 figure:focus .hover_box{
  opacity: 1;
  transition: all ease 0.5s 0s;
}

.grid_2 figure:hover .shop_box, .grid_2 figure:focus .shop_box{
  display:none;
}
/*
.grid figure:hover figcaption h4, .grid figure:focus figcaption h4{
  opacity: 1;
}

.grid figure:hover figcaption div, .grid figure:focus figcaption div{
  opacity: 1;
}

.grid figure:hover figcaption h2, .grid figure:focus figcaption h2{
  display:none;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}
*/

.grid_2 figure figcaption,
.grid_2 figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid_2 figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}



/*---------------*/
/***** Duke *****/
/*---------------*/
/*
figure.effect-duke {
	background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
	background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	object-fit:cover;

}

figure.effect-duke:hover img {
	opacity: 0.1;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
}



figure.effect-duke p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 20px;
	padding: 30px;
	border: 2px solid #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% -100%;
	transform-origin: 50% -100%;
}

*/
/* Media queries 
@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}*/