/*@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/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 {
    display: flex;
    flex-wrap: wrap;
    //gap: 10px;
}
.latest_title {
	display: block;
	width:100%;
	margin-top:50px;
	text-align:center;
	line-height:40px;
	font-size:30px;
	color:#333;
	font-weight:600
}
.latest_title_2 {
	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 figure {
    flex: 1 1 auto;
    box-shadow: 5px 0px 5px -5px black;
    width: 100%;
    height: 250px;
    box-sizing: border-box; /* 패딩, 보더 포함 계산 */
	margin: 10px 10px 0px 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.grid figure2 {
    flex: 1 1 auto;
    box-shadow: 5px 0px 5px -5px black;
	overflow: hidden;
    box-sizing: border-box; /* 패딩, 보더 포함 계산 */
	margin: 0px 10px 0px 10px;
	padding:8px;
	//height: auto;
	//border:solid 1px  gray;
	//border-top: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 0px 0px 7px #888;
	/*box-shadow: 0px 0px 50px #ccc;*/

	//width: 375px;
	//height: 265px;
	//zoom:1.25;
}
.grid figure img {

    width:100%;
    height:100%;
	opacity: 1;
	object-fit:cover;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.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;

}
*/
.detail_box {
	width: 100%; height: 50px;
	margin:auto 0;
	margin-top:15px;

	text-align:center;
	display:inline-block;
	position: absolute;
	line-height:30px;
	text-align:center;
	font-size:1.1em;
	color:#fff;
	top:150px;
}

.detail_box .detail{
	width: 100px; height: 40px;
	padding:10px;
	text-align:center;

	position: relative;
	line-height:30px;
	text-align:center;
	font-size:1.1em;
	color:#fff;
	border:1px solid #fff;


}

.grid 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 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 figure:hover .hover_box, .grid figure:focus .hover_box{
  opacity: 1;
  transition: all ease 0.5s 0s;
}

.grid figure:hover .shop_box, .grid 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 figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.figcaption_off {
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background:#000;opacity:0.5;
	color:#fff;
	line-height:250px;
	text-align:center;
	font-size:1.3rem;
	font-weight:600;
}

.grid figure figcaption2 {
	position: absolute;
	top: 250px;
	left: 0;
	width: 2000px;
	height: 2000px;
	color:#fff;
	border:solid 1px;
	background:red;
	z-index:9999;
}


/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid 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%;
	}
}*/


.vip_desc_box {
width:100%;
border:solid 1px;
}

.bo_tit_vip {padding:1px 0 6px 0px;//height:100%;//margin:0px 4px 0 4px}
.bo_tit_vip strong{display:inline-block;font-family: 'NanumSquare';font-size:1.3rem;font-weight:800;padding:0px 0 0 10px;letter-spacing: 0px;color:#333;//opacity:0.8}

.shop_info_posvr_list_vip{
//display:none;
display: flex;
align-items: center;
border-bottom:1px #ddd solid;
font-size:1.3rem;
padding:0px 0 10px 10px;
margin-bottom:2px;
height:auto;
opacity:0.7;
}
.shop_info_posvr_list_vip2{
//display:none;
display: flex;
align-items: center;
border-bottom:1px #ddd solid;
font-size:1.3rem;
padding:0px 0 2px 0px;
margin-bottom:10px;
height:auto;
//opacity:0.7;
}

.shop_info_posvr_list_txt_vip{
font-family:'sans-serif';display:inline-block;margin:2px;height:23px;
font-size:0.8rem;color:#E00000;font-weight:500;opacity:1;zoom:1;line-height:19px;
border:1px solid red; padding:2px 4px 2px 4px;text-align:center;
}
.shop_info_posvr_list_txt_vip2{
font-family:'NanumSquare';display:inline-block;margin:2px;//height:15px;
font-size: 0.8rem;color:#000;font-weight:400;opacity:1;zoom:1;//line-height:12px;
//border:1px solid red; padding:2px 4px 2px 4px;text-align:center;
white-space: nowrap;
overflow: hidden;
}

.shop_price_list_box_vip > li .menu-box .percent
{
    font-size: 0.7rem;
    font-weight: 700;
	margin-right: 5px;

    display: inline-block;
	//box-shadow: inset 0 0 10px red, 0 0 10px blue;
    //height: 28px;
    padding: 3px 4px 3px 4px;

    color: #fff;
    border-radius: 4px;
    background-color: #ff1800;

    //align-items: center;
}

.shop_price_list_box_vip > li .menu-box
{
    width: 100%;
    //margin: 0 10px;
    //padding: 20px;

    text-align: right;

    //border-radius: 20px;
    //background-color: #f8f9fb;
}

.shop_price_list_box_vip > li .menu-box .price_origin
{
    font-size: 1rem;
    height: 12px;
    margin-bottom: 5px;
	margin-right: 1px;
    text-decoration: line-through gray;
	//opacity:0.7;
    color: gray;
}

.shop_price_list_box_vip > li .menu-box .course
{
    font-size: 1rem;
    height: 12px;
    margin-bottom: 5px;
	margin-right: 5px;
    //text-decoration: line-through gray;
	//opacity:0.7;
    color: gray;
}

.shop_price_list_box_vip > li .menu-box .area
{
    display: flex;
	margin-top:0px;
    min-height: 20px;

    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.shop_price_list_box_vip > li .menu-box .area .type
{
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block;
    //margin-bottom: 20px;
}

.shop_price_list_box_vip > li .menu-box .area .price
{
	font-family:NanumSquare;
	font-size: 1.3rem;
    font-weight: 600;
    display: inline-block;
    margin-left: 7px;

    color: #000;
}