.MyRadar{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: yellow;
}

.card-body .CardSection{	
	height: 100%;
}

.StoreMark .CardSection{
	z-index: 5;
}

.TotalDataCountArea{
	font-size: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.StoreMark a{
  text-decoration:none;
}

.StoreMark[data-mode="SearchStoreXY"]{	
	color: #ffffff;
	background-color: #000;
	height: 100%;
}

.MapArea{
	z-index: 0;
	overflow: hidden;
}

.MapArea[data-mode="SearchStoreXY"] 
.MapPlanDiv{
	height: 250px;	
}

.CategoryBtnArea{
	position: absolute;
	z-index: 5;
	padding:3px;
}

.offcanvas.ShowViewCategory{
	width: 180px;
}

.offcanvas.ShotViewSotreInfor {    
    width: 320px;
}

.offcanvas.ShotViewSotreInfor .GotoStore{
	padding-left: 0px;
}

.FillterArea{
	
}

.ShopListArea{
	overflow: hidden;	
}

.ShopListRowSection{
	height: 100%;
}

/*
.PanelArea .storeList{	
	height: 60vmin;
	overflow: hidden;  
  overflow-x: auto;  
}
*/

.PanelArea .storeList{	
	height: 100%;
	overflow: hidden;  
  overflow-Y: auto;
  padding-bottom: 35px;
}

/*
.PanelArea[data-device="mobile"] .ShopListArea{		
	height: 230px;
  z-index: 5;
  background-color: rgb(255 255 255 / 85%);
}
*/

.PanelArea[data-device="mobile"] .ShopListArea{		
	  height: 100%;
    width: 80%;
    z-index: 100;
    right: 0px;
    background-color: rgb(255 255 255 / 85%);    
    position: absolute;
}


.PanelArea .storeList::-webkit-scrollbar{
  display:none;
}

.storeList .table tr:nth-last-child(1) > td{	
	border-style: none;
}

/*
.storeList .figure{
	width: 170px;
}
*/
.storeList .figure{
	width: 100%;
}

.StoreImg{	
	aspect-ratio: 1 / 0.6;  
  background-size: cover;
  background-position: center center;
  border: 1px solid rgba(247, 247, 247, 0);
  margin-bottom: 0px;
  transition: all 0.5s;
}



.StoreImg:hover{
	background-size: 110% auto;
}

.StoreImgArea{
	padding-top: 25px;
	padding-bottom: 25px;
}


.MyPosition{
	width:180px;
	padding:5px;
	text-align:center;
	border-radius: 50%;
}


.CustomMark.HotPlace .HotPlaceEffect{
	animation-delay:0s;
	animation-name: blingbling;
	animation-direction:normal;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	display: inline-table;
	width: 10px;
	aspect-ratio: 1/1;
	border-radius: 50%;	
}



.camperType .btn,
.CardSection .otherinfo{	
	text-shadow: 0px 0px 10px rgb(0 0 0), 1px 1px 10px rgb(0 0 0), -1px -1px 10px rgb(0 0 0);
}

.CardSection .otherinfo{
	font-size: 11px;
}


@keyframes blingbling{
	0% {	
		box-shadow: 0px 0px 0px 0px rgb(254 252 201 / 0%);
	}
	49% {	
			box-shadow: 30px  -25px 0px 0px rgb(254 252 201 / 0%), 
							   -45px  -33px 0px 0px rgb(254 252 201 / 0%), 
							    35px  -45px 0px 0px rgb(254 252 201 / 0%), 
							   -60px  -65px 0px 0px rgb(254 252 201 / 0%),
							    20px   45px 0px 0px rgb(254 252 201 / 0%),
							   -30px   60px 0px 0px rgb(254 252 201 / 0%),
							   -40px   20px 0px 0px rgb(254 252 201 / 0%),
							   -45px   25px 0px 0px rgb(254 252 201 / 0%),
							    65px   0px  0px 0px rgb(254 252 201 / 0%),
							    45px   0px  0px 0px rgb(254 252 201 / 0%);

	}
	50% {	
			box-shadow: 30px  -25px 0px 4px rgb(254 252 201 / 60%), 
							   -45px  -33px 0px 8px rgb(254 252 201 / 30%), 
							    35px  -45px 0px 3px rgb(254 252 201 / 60%), 
							   -60px  -65px 0px 1px rgb(254 252 201 / 30%),
							    20px   45px 0px 1px rgb(254 252 201 / 40%),
							   -30px   60px 0px 1px rgb(254 252 201 / 60%),
							   -40px   20px 0px 4px rgb(254 252 201 / 45%),
							   -45px   25px 0px 8px rgb(254 252 201 / 60%),
							    65px   0px  0px 0px rgb(254 252 201 / 70%),
							    45px   0px  0px 7px rgb(254 252 201 / 60%);

	}
	100% {
			box-shadow: 60px  -50px  0px 4px rgb(254 252 201 / 0%), 
								 -90px  -66px  0px 8px rgb(254 252 201 / 0%), 
								  70px  -90px  0px 3px rgb(254 252 201 / 0%), 
								 -120px -130px 0px 1px rgb(254 252 201 / 0%),
								  40px   90px  0px 2px rgb(254 252 201 / 0%),
								 -60px   120px 0px 1px rgb(254 252 201 / 0%),
								 -80px   40px  0px 4px rgb(254 252 201 / 0%), 
								 -90px   50px  0px 8px rgb(254 252 201 / 0%),
								  130px   0px  0px 0px rgb(254 252 201 / 0%),
								  90px    0px  0px 7px rgb(254 252 201 / 0%);
	}
}


@keyframes fire{	
	0% {		
		box-shadow:0 0 10px #fefcc9, 
						5px -5px 15px #feec85, 
						-10px -10px 20px #ffae34, 
						10px -20px 25px #ec760c, 
						-10px -30px 30px #cd4606, 
						0 -40px 35px #973716, 
						5px -45px 40px #451b0e;
	}	
	18% {
		box-shadow:0 0 15px #fefcc9, 
						-5px -5px 20px #feec85, 
						10px -10px 25px #ffae34, 
						-10px -20px 30px #ec760c, 
						10px -30px 35px #cd4606, 
						0 -40px 40px #973716, 
						-5px -45px 45px #451b0e;
	}
	25% {
		box-shadow:0 0 10px #fefcc9, 
						5px -10px 15px #feec85, 
						-10px -15px 20px #ffae34, 
						10px -25px 25px #ec760c, 
						-10px -35px 30px #cd4606, 
						0 -45px 35px #973716, 
						5px -50px 40px #451b0e;
	}
	32% {
		box-shadow:0 0 15px #fefcc9, 
						-5px -5px 20px #feec85, 
						10px -10px 25px #ffae34, 
						-10px -20px 30px #ec760c, 
						10px -30px 35px #cd4606, 
						0 -40px 40px #973716, 
						5px -45px 45px #451b0e;
	}


	50% {
		box-shadow:0 0 15px #fefcc9, 
						-5px -3px 20px #feec85, 
						10px -5px 25px #ffae34, 
						-10px -10px 30px #ec760c, 
						10px -15px 35px #cd4606, 
						0 -20px 40px #973716, 
						-5px -35px 45px #451b0e;
	}
	60% {
		box-shadow:0 0 10px #fefcc9, 
						5px -5px 15px #feec85, 
						-10px -10px 20px #ffae34, 
						10px -20px 25px #ec760c, 
						-10px -30px 30px #cd4606, 
						0 -40px 35px #973716, 
						5px -45px 40px #451b0e;
	}
	70% {
		box-shadow:0 0 15px #fefcc9, 
						-5px -3px 20px #feec85, 
						10px -5px 25px #ffae34, 
						-10px -10px 30px #ec760c, 
						10px -15px 35px #cd4606, 
						0 -20px 40px #973716, 
						5px -35px 45px #451b0e;
	}
	
	100% {
		box-shadow:0 0 10px #fefcc9, 
						5px -5px 15px #feec85, 
						-10px -10px 20px #ffae34, 
						10px -20px 25px #ec760c, 
						-10px -30px 30px #cd4606, 
						0 -40px 35px #973716, 
						5px -45px 40px #451b0e;
	}
}

@keyframes Rounding{	
	0% {		
		box-shadow: -2px -2px 13px 8px rgb(255 0 0 / 40%), 
								 2px 2px 13px 8px rgb(0 0 255 / 40%);
	}	
	100% {
		box-shadow: -2px -2px 13px 8px rgb(0 0 255 / 40%), 
							   2px 2px 13px 8px rgb(255 0 0 / 40%);
	}
}


@keyframes bling{	/*내 위치*/
	0% {		
		box-shadow: -1px -1px 10px 5px rgb(255 0 0 / 40%), 1px 1px 10px 5px rgb(255 0 0 / 40%);
	}	
	100% {
		box-shadow: -2px -2px 10px 5px rgb(255 0 0 / 70%), 2px 2px 10px 5px rgb(255 0 0 / 70%);
	}
}


.ShopListArea{
	/*padding-top: 30px;*/
	transition: all 0.5s;
}

.PanelArea .MapPlanDiv{	
	/*height: 130vmin;*/
	height: 100%;
}

.PanelArea[data-device="mobile"] .MapPlanDiv{
}

.PanelArea[data-where="checkin"]{	
	padding-bottom: 35px;
}

.PanelArea .MapPartArea,
.PanelArea[data-device="mobile"] .MapPartArea{
	padding-left: 0px;
	padding-right: 0px;
	min-height: 500px;
}
.PanelArea .MapPartArea{
	min-height: 240px;	
}


.StoreMark{	
	width: 15rem;
	height:170px;
	text-align:center;	
	padding:3px;	
}

.StoreMark.ApiDataMakerArea{
	height:200px;
}


.StoreMark[data-mode="NationalShowMaker"]{	
	height:190px;
}

.StoreMark .card-text{
	font-size: 11px;
}

.StoreMark .card-body{
	position: absolute;
	width: 100%;
	color: #fff;
	text-align: left;
	height: 100%;
	padding:15px;
}

.StoreMark .Heart{
	font-size: 11px;
}

.StoreMark .card-title,
.StoreMark .card-text,
.StoreMark .MasterMark,
.StoreMark .Heart{
	text-shadow: 0px 0px 10px rgb(0 0 0),
							 1px 1px 10px rgb(0 0 0),
							 -1px -1px 10px rgb(0 0 0);
}

/*
.StoreMark p{
	margin-bottom: 1.5rem;
}
*/

.CustomMark{
	width: 55px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-size: 250% auto;
	background-position: center center;	
	border: 3px solid #fff;	
	transition:all 4s;
}

.PicArea[data-noimg="1"]{
	border-radius: 0.25rem!important;
	border:1px solid #d8d8d8;
}

.CustomMark.NomalPlace{	
	
	box-shadow: -3px -3px 10px 5px rgb(0 0 0 / 40%),							 
							 3px 3px 10px 5px rgb(0 0 0 / 40%);	
	
}



.CustomMark.HotPlace{
	animation-delay:0s;
	animation-name: SwayLight;
	animation-direction:normal;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.69, 0.37, 0, 1.06);
	animation-iteration-count: infinite;
	box-shadow:0px 0px 12px 3px #fefcc9,
					   0px 0px 10px 2px #fefcc9,					   
					   0px 0px 10px 0px rgb(254 252 201 / 50%),
					   0px 0px 10px 0px rgb(255 182 0 / 50%),
					   0px 0px 20px 0px rgb(167 81 6 / 62%);
}


.CustomMark.HotPlace.active,
.CustomMark.NomalPlace.active{
	box-shadow: 0px 0px 10px 10px rgb(254 252 201 / 70%);
	transition: all 0.2s;
}

@keyframes SwayLight{
	50% {		
	box-shadow:0px 0px 12px 6px #fefcc9, 
					   0px 0px 10px 4px #fefcc9,
					   0px -20px 10px 0px rgb(254 252 201 / 50%),
					   0px -30px 10px 0px rgb(255 182 0 / 50%),
					   0px -35px 20px 0px rgb(167 81 6 / 62%);
	}

	100% {		
	box-shadow:0px 0px 12px 3px #fefcc9, 
					   0px 0px 10px 2px #fefcc9,
					   0px 0px 10px 0px rgb(254 252 201 / 50%),
					   0px 0px 10px 0px rgb(255 182 0 / 50%),
					   0px 0px 20px 0px rgb(167 81 6 / 62%);
					   
	}
}



.CustomMyPositonMark{
		padding:0px;
		width: 15px;
		aspect-ratio: 1/1;
		border-radius: 50%;
		background-color: rgb(255 0 0 / 90%);
		border: 2px solid #fff;
		box-shadow: -1px -1px 10px 5px rgb(255 0 0 / 40%), 1px 1px 10px 5px rgb(255 0 0 / 40%);
}

.CustomMark.NomalPlace:hover{	
	animation-name: Rounding;		
	animation-duration: 1s;	
}

.CustomMark.HotPlace:hover{		
	animation-duration: 4s;		
}

.CustomMyPositonMark{
	animation-name: bling;	
	animation-duration: 2s;
}

.CustomMark,
.CustomMyPositonMark{		
	animation-iteration-count: infinite;
	animation-direction:alternate;
}

.FestivalMarkView[data-mode="0"] span:after{
	content: '축제 켬';
}
.FestivalMarkView[data-mode="1"] span:after{
	content: '축제 끔';
}

@media (min-width: 768px){
	.offcanvas.ShotViewSotreInfor {    
	    width: 45%;
	}

	.PanelArea[data-device="mobile"] .MapPlanDiv {				
	    /*height: 90vmin;*/
	}

	/*
	.PanelArea[data-device="mobile"] .ShopListArea{				
		height: 260px;
	}
	*/

	.PanelArea[data-device="mobile"] .ShopListArea{				
		width: 300px;
		height: 90vmin;
	}

	.PanelArea[data-device="mobile"] .SearchControlArea{
		padding-bottom: 0px;		
		/*height: 9vmin;*/
	}
	.PanelArea[data-device="mobile"] .storeList {	    	    
		/*padding-top: 25px;*/
    /*height: 26vmin;*/
	}

	.SiteInforArea {
		padding-top: 45px;
		padding-bottom: 45px;
	}

	/*
	.storeList .figure{
		width: 200px;
	}
	*/
}



@media (min-width: 1320px){
	
	.PanelArea .MapPlanDiv{		
		/*height: 90vmin;*/
	}
	.PanelArea .SearchControlArea{
		height: auto;
	}
	.PanelArea .storeList{
		/*height: 100%;*/
		overflow-x: unset;
		overflow-y: auto;
	}

	.storeList .figure{
		width: 100%;		
	}
}

@media (min-width: 1680px){
	.offcanvas.ShotViewSotreInfor {    
	    width: 35%;
	}

	.PanelArea .storeList{
		padding-bottom: 40px;
	}
}