/* 공통  ================================================================================== */ 
.glikebtn												{position:relative;cursor:pointer;user-select: none;} 
.glikebtn::before								{font-weight: 400; font-family:"Font Awesome 6 Free";content:"\f004";padding-right:10px;}
.glikebtn.on::before							{font-weight: 900;} 

.glikebundle										{position:relative;cursor:pointer;user-select: none;} 
.glikebundle::before							{font-weight: 400; font-family:"Font Awesome 6 Free";content:"\f004";padding-right:10px;}
.glikebundle.on::before					{font-weight: 900;}



/* 리스트  ================================================================================== */ 
.class_list_wrap									{position:relative;  display: grid; grid-template-columns:repeat(3, 1fr); gap:1.5em  ;} 
.class_list_wrap li								{position:relative;border:1px solid #dfdfdf;   border-radius:0.7em; overflow:hidden;transition:all 0.3s ease;}
.class_list_wrap li a							{position:relative;  transition:all 0.3s ease;}
.class_list_wrap li figure					{overflow:hidden; width:100%; aspect-ratio:3/2; transition:all 0.3s ease;}
.class_list_wrap li figure img			{width:100%;height:100%; object-fit:cover;transition:all 0.3s ease;}  
.class_list_wrap li .cont						{position:relative;  padding:1em; }
.class_list_wrap li .cont	.tit				{position:relative;  font-size:1.1em;font-weight:bold;color:#000; padding-bottom:12px ; line-height:1.25;  }
.class_list_wrap li .cont	.tit .cate_wrap		{ padding:0 0 5px 0;  } 
.class_list_wrap li .cont	.tit .cate_wrap span		{  position:relative; top:-2px;display:inline-block ; color:#fff; line-height:25px;padding:0 12px 1px 11px; font-size:0.85rem; border-radius:50px; margin-right:1px;  } 
.class_list_wrap li .cont	.tit .cate		{  background:#ac7c70;   } 
.class_list_wrap li .cont	.txt				{ line-height:1.2;}
.class_list_wrap li .cont	.txt p			{position:relative;color:#888; padding:0 0 7px 12px; font-size:0.9em;}
.class_list_wrap li .cont	.txt p:before		{position:absolute; content:'';   left:2px; top:6px; width:3px; height:3px; background:#999; border-radius:5px; }
.class_list_wrap li .like						{position:absolute; bottom:17px; font-size:0.85em; color:#aaa; padding-left:5px; }
.class_list_wrap li .like i						{color:#ccc;}
.class_list_wrap li em						{position:absolute;left:0;top:0; width:100%;     z-index:1;}
.class_list_wrap li em span				{position:relative;  font-size:0.95rem !important;padding:0 15px; line-height:35px;border-radius:0  0 10px 0; overflow:hidden; }
.class_list_wrap li em span.state_acc	{ }
.class_list_wrap li em span.state_ing	{  }
.class_list_wrap li em span.state_not	{display:none;}


.class_list_wrap li .program_ptype01		{background:#ff6600;}
.class_list_wrap li .program_ptype02		{background:#0a9e77; }  /* 녹색*/
.class_list_wrap li .program_max01		{ background:#393939;  }
.class_list_wrap li .program_max02		{ background:#777;  }


.class_list_wrap li .cont	.turn			{position:relative;display:flex;text-align:center;  font-size:0.85em;margin:15px 0 0 0;}
.class_list_wrap li .cont	.turn dt		{border:1px solid #222;background:#333;color:#fff;line-height:34px; padding:0 13px;}
.class_list_wrap li .cont	.turn dd		{border:1px solid #d9d9d9;background:#fff;color:#444;line-height:34px; padding:0 13px;}
.class_list_wrap li .cont	.turn dt i		{margin-right:5px;}

.class_list_wrap li:hover					{border-color:var(--color1);box-shadow:3px 3px 15px rgba(0, 0, 0, 0.12);}
.class_list_wrap li:hover figure img	{transform: scale(1.07);filter; } 


@media screen and (max-width:1200px) {   
.class_list_wrap									{ grid-template-columns:repeat(2, 1fr);  } 
.class_list_wrap li .cont	.turn dt		{ line-height:32px; padding:0 10px; }
.class_list_wrap li .cont	.turn dd		{ line-height:32px; padding:0 10px; }
}
@media screen and (max-width:1024px) {   
.class_list_wrap li .cont	.turn dt		{ line-height:30px; padding:0 10px 1px 10px; }
.class_list_wrap li .cont	.turn dd		{ line-height:30px;padding:0 10px 1px 10px; }
.class_list_wrap li .cont	.turn			{  font-size:0.85em;margin:10px 0 0 0;}
}
@media screen and (max-width:768px) {    
.class_list_wrap									{  gap:1em  ;}    
}
@media screen and (max-width:580px) {    
.class_list_wrap         							{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.class_list_wrap li em span				{ padding:0 12px;   }
.class_list_wrap li .cont	.txt p			{ padding-bottom:5px;  }
}

/* 리스트  ================================================================================== */