/* 공통  ================================================================================== */ 
.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;}



/* 결제타이머  ================================================================================== */ 
.gbox_help .timerbox					{position:absolute; top:20px; right:20px; width: 90px; padding: 10px; background: #fff;}					
.gbox_help .timerbox span				{margin-left:5px; font-weight:500; color:#333;}
.gbox_help .timerbox i					{color:#006edd;}

@media screen and (max-width:680px) {
	.gbox_help .timerbox				{position:relative; top:10px; right:0px;}		
}



/* 리스트  ================================================================================== */ 
.class_list_wrap									{position:relative;  display: grid; grid-template-columns: 1fr; gap:1.5em  ;} 
.class_list_wrap li								{position:relative;border:1px solid #ddd; padding:1em; overflow:hidden; border-radius:1em; transition:all 0.3s ease;}
.class_list_wrap li a							{position:relative; display: grid; grid-template-columns:33% auto;gap:30px;  transition:all 0.3s ease;}
.class_list_wrap li figure					{overflow:hidden; 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 .img						{position:relative; height:200px;overflow:hidden;  transition:all 0.5s ease;}
.class_list_wrap li .img img				{width:100%;height:100%;object-fit:cover;transition:all 0.5s ease; }
.class_list_wrap li .cont						{position:relative;  padding-bottom:20px ; }
.class_list_wrap li .cont	.tit				{position:relative;  font-size:1.4em;font-weight:700;color:#000; padding:15px 0 0 0;  border-bottom:0 solid  #e4e4e4;   }
.class_list_wrap li .cont	.tit .cate_wrap		{display:inline-block ;  margin-left:5px; } 
.class_list_wrap li .cont	.tit .cate_wrap span		{  position:relative; top:-3px;display:inline-block ; color:#fff; line-height:25px;padding:0 10px; font-size:0.85rem; border-radius:3px; margin-right:1px;  } 
.class_list_wrap li .cont	.tit .cate		{  background:#ac7c70;   } 
.class_list_wrap li .cont	.txt				{padding:20px 0; display: flex; flex-direction: column; gap:8px; }
.class_list_wrap li .cont	.txt p			{position:relative;color:#777; padding:0 0 0 15px; font-size:0.95em; line-height:1.3; }
.class_list_wrap li .cont	.txt p:before		{position:absolute; content:''; display:block; left:4px; top:7px; width:3px; height:3px; background:#999;}
.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;right:5px;  bottom:15px; z-index:1; }
.class_list_wrap li em span				{position:relative;  font-size:0.95rem !important; min-width:110px;line-height:110px;border-radius:100px; 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 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								{ padding:0.8em;  }
.class_list_wrap li a							{ grid-template-columns:30% auto;gap:20px; }
.class_list_wrap li .cont	.tit				{   font-size:1.3em;  padding:  10px 0 0 0 ;}
.class_list_wrap li .cont	.txt				{padding:15px 0;  }

.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;}
.class_list_wrap li em span				{  min-width:100px;line-height:100px; }
}
@media screen and (max-width:800px) {    
.class_list_wrap li								{ padding:10px;  border-radius:0.7em; }
.class_list_wrap li em						{ bottom:10px;  }
.class_list_wrap li em span				{  min-width:90px;line-height:90px; }
}
@media screen and (max-width:600px) {    
.class_list_wrap li a							{ grid-template-columns:1fr;gap:20px;  } 
.class_list_wrap li .cont						{ padding:0 10px 45px 10px; }
.class_list_wrap li .cont	.tit				{ font-size:1.25em; padding:  0; line-height:1.4em;}  
.class_list_wrap li .cont	.txt				{gap:6px;}
.class_list_wrap li .cont	.txt p			{  padding:0 0 0 11px; }
.class_list_wrap li .cont	.txt p:before		{  left:2px; top:7px;  } 
.class_list_wrap li em						{ bottom:5px;width:calc(100% - 10px);} 
.class_list_wrap li em span				{ line-height:40px;  width:100%;} 
}

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





/* 온라인 강의 뷰페이지  ================================================================================== */ 
.class_view_wrap02										{position:relative; border:8px solid #f1f1f1; overflow:hidden;  display: grid; grid-template-columns:45% auto; margin-bottom:40px; border-radius:1.2em;   } 
  
.class_view_wrap02 figure							{position:relative; width:100%; height:100%;  } 
.class_view_wrap02 figure img					{width:100%;height:100%;object-fit:cover;  } 
.class_view_wrap02 .inner							{ padding:30px 40px; } 
.class_view_wrap02 .inner .tit						{position:relative; font-size:1.55em; font-weight:600; color:#000;  line-height:1.3;padding-bottom:20px;}
.class_view_wrap02 .inner .tit strong			{display:block;padding:6px 0 0 0;}
.class_view_wrap02 .inner .tit .state_not	{display:none;}

.class_view_wrap02 .info							{position:relative; padding: 20px 0 0 0 ;border-top:1px solid #e5e5e5;display: flex; flex-direction: column; gap:10px; transition:all 0.3s ease;}
.class_view_wrap02 .info dl 					{position:relative;  overflow:hidden;  display: grid; grid-template-columns: 100px auto; gap:15px; line-height:1.3; }
.class_view_wrap02 .info dl dt				{  position:relative; color:#333; padding-left:15px; font-weight:500;   }
.class_view_wrap02 .info dl dt::before	{ position:absolute; content:''; top:9px;left:5px;width:3px;height:3px;  background:#666;  border-radius:5px;  }
.class_view_wrap02 .info dl dt::after		{ position:absolute; content:''; top:3px;right:0;width:1px;height:1em;  background:#e6e6e6;    }  
.class_view_wrap02 .info dl dd				{   }
.class_view_wrap02 .info dl dd	b			{font-weight:bold; color:#000;}
  
.class_view_wrap02 .file li							{font-size:0.9em;color:#000;}
.class_view_wrap02 .fpilsu							{font-size:0.9em;color:#000 !important;}

@media screen and (max-width:1400px) {   
	.class_view_wrap02								{ border-width:8px ;  } 
	.class_view_wrap02 .inner					{ padding:25px 30px  ; }
	.class_view_wrap02 .inner .tit				{ padding-bottom:15px; } 
	.class_view_wrap02 .info						{ gap:10px; } 
} 
@media screen and (max-width:1024px) {  
	.class_view_wrap02									{ grid-template-columns:40% auto;margin-bottom:30px; border-width:6px; }
	.class_view_wrap02 .inner						{ padding:20px  ; }
	.class_view_wrap02 .inner .tit 				{ font-size:1.4em;padding-bottom:15px;} 
	.class_view_wrap02 .info							{ padding:15px 0 0 0; gap:8px; }
	.class_view_wrap02 .info dl 					{ font-size:0.95em;   grid-template-columns:85px auto; gap:10px; } 
	.class_view_wrap02 .info dl dt				{ padding-left:13px;     } 
	.class_view_wrap02 .info dl dt::before	{  top:6px;left:3px;   } 
	.class_view_wrap02 .info dl dt::after		{   top:2px;}
}
@media screen and (max-width:800px) {
	.class_view_wrap02									{  grid-template-columns:1fr; border-radius:1em;  border-width:5px;  }  
	.class_view_wrap02 figure						{ aspect-ratio:4/2.7;  } 
	.class_view_wrap02 .inner .tit					{  padding-bottom:12px;} 
	.class_view_wrap02 .info dl 					{ grid-template-columns:80px auto;   }    
}
@media screen and (max-width:600px) {   
.class_view_wrap02 .mydash						{ padding:15px 5px  ;}
.class_view_wrap02 .mydash dl					{padding:0 15px;font-size:0.9em; } 
}
/* 온라인 강의 뷰페이지  ================================================================================== */