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



/* 리스트  ================================================================================== */ 
.exper_list_wrap									{position:relative;  display: grid; grid-template-columns: 1fr; gap:1.5em  ;} 
.exper_list_wrap li								    {position:relative;border:1px solid #cfcfcf; border-radius:0.7em; overflow:hidden; transition:var(--transition1);   }
.exper_list_wrap li a							    {position:relative; display: grid; grid-template-columns:30% auto;gap:25px; padding:1em;   transition:var(--transition1);   }
.exper_list_wrap li figure					    {position:relative;overflow:hidden;  transition:var(--transition1);   }
.exper_list_wrap li figure img			    {width:100%;height:100%; object-fit:cover; transition:var(--transition1);   }

.exper_list_wrap li:hover figure img   {transform: scale(1.12);  opacity:0.8; /*filter: brightness(0.6); */ }
.exper_list_wrap li .layer					{position:absolute;top:50%;left:50%; width:0;height:0; border-radius:100%;box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);transform:translate(-50%, -50%);background:#444; transition:var(--transition1); opacity:0;z-index:1;} 
.exper_list_wrap li .layer::before		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:28px; height:2px; background:#fff; border-radius:5px ;}
.exper_list_wrap li .layer::after			{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); height:28px; width:2px; background:#fff;border-radius:5px ;}
.exper_list_wrap li:hover .layer		{ opacity:1;width:80px;height:80px;}

.exper_list_wrap li .cont						{position:relative;  padding-bottom:60px; }
.exper_list_wrap li .cont .tit				{position:relative;  font-size:1.2em;font-weight:600;color:#000; padding:5px 0 15px 0;   }
.exper_list_wrap li .cont .tit .cate_wrap		{ padding:0 0 5px 0;  } 
.exper_list_wrap li .cont .tit .cate_wrap span		{  position:relative; top:-2px;display:inline-block ; color:#fff; line-height:26px;padding:0 12px 1px 12px; font-size:0.85rem; border-radius:50px; margin-right:1px; font-weight:500; } 
.exper_list_wrap li .cont .tit .cate		{  background:#ac7c70;   } 
.exper_list_wrap li .cont .txt				{padding-bottom:8px; border-bottom:1px solid  #e4e4e4;  } 
.exper_list_wrap li dl						{position:relative;font-size:0.9em; display: flex; gap:8px; padding-bottom:8px; line-height:1.2; }
.exper_list_wrap li dl dt					{position:relative; padding-left:12px;}
.exper_list_wrap li dl dt::before		{ position:absolute; content:''; left:1px; top:6px; width:3px; height:3px; background:#555; border-radius:5px; }
.exper_list_wrap li dl dt::after			{position:relative; content:':';  right:0; top:-1px; margin-left:5px; /* top:5px; width:1px; height:1em; background:rgb(0,0,0,0.15); */ }
.exper_list_wrap li dl dd					{ flex:2; color:#808080; /* overflow:hidden; text-overflow:ellipsis; white-space:nowrap; */ } 
 
.exper_list_wrap li .like						    {position:absolute; top:0; right:5px; font-size:0.85em; color:#aaa; padding-left:5px; }
.exper_list_wrap li .like i						{color:#ccc;}
.exper_list_wrap li .tag						    {position:absolute;right:0; bottom:2px; z-index:1;}
.exper_list_wrap li .tag span				{position:relative;  font-size:0.95rem !important;padding:0 20px;min-width:140px;line-height:45px;border-radius:50px; overflow:hidden; }
.exper_list_wrap li .tag span.state_acc	{ }
.exper_list_wrap li .tag span.state_ing	{  }
.exper_list_wrap li .tag span.state_not	{display:none;}


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


.exper_list_wrap li .cont .turn			{position:relative;display:flex;text-align:center;  font-size:0.85em;margin:15px 0 0 0;}
.exper_list_wrap li .cont .turn dt		{border:1px solid #222;background:#333;color:#fff;line-height:34px; padding:0 13px;}
.exper_list_wrap li .cont .turn dd		{border:1px solid #d9d9d9;background:#fff;color:#444;line-height:34px; padding:0 13px;}
.exper_list_wrap li .cont .turn dt i		{margin-right:5px;}
 
.exper_list_wrap li:focus,
.exper_list_wrap li:hover				{ border:1px solid var(--color1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);} 

@media screen and (max-width:1200px) {   
    .exper_list_wrap li .tag span				{ line-height:40px;  } 
    .exper_list_wrap li .cont .turn dt		{ line-height:32px; padding:0 10px; }
    .exper_list_wrap li .cont .turn dd		{ line-height:32px; padding:0 10px; }
}
@media screen and (max-width:1024px) {   
    .exper_list_wrap li .cont .tit				{ font-size:1.15em;}
    .exper_list_wrap li .cont .turn dt		{ line-height:30px; padding:0 10px 1px 10px; }
    .exper_list_wrap li .cont .turn dd		{ line-height:30px;padding:0 10px 1px 10px; }
    .exper_list_wrap li .cont .turn			{  font-size:0.85em;margin:10px 0 0 0;}
}
@media screen and (max-width:768px) {    
    .exper_list_wrap li a 								{ padding:0.75em;} 
}
@media screen and (max-width:600px) {    
    .exper_list_wrap li a							    { grid-template-columns:1fr;gap:1em;  } 
    .exper_list_wrap li .cont						{ padding:0 0 60px 5px; }
    .exper_list_wrap li .cont .tit				{ font-size:1.1em; padding:0 0 10px 0; line-height:1.4em;}   
    .exper_list_wrap li dl						{ padding-bottom:6px;}
    .exper_list_wrap li .tag						    {text-align:center;bottom:5px; right:initial;left:50%; transform: translateX(-50%); } 
}

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


 

/* 온라인 강의 뷰페이지  ================================================================================== */ 

.exper_view_wrap									{  position: relative;  }    
.exper_view_wrap .info_top					    {position:relative;padding:1.7em ; margin-bottom:40px;  border-radius:1em; display: grid; grid-template-columns:43% auto;  gap:4%; } 
.exper_view_wrap .info_top::before           {position:absolute;content:''; top:0; left:0; width:100%; height:100%; background:var(--color1); opacity:0.05;border-radius:1em;z-index:-1; }
.exper_view_wrap .info_top::after              {position:absolute;content:''; top:0; left:0; width:100%; height:100%; border:1px solid var(--color1); opacity:0.27;border-radius:1em;z-index:-1;} 
.exper_view_wrap .info_top .img			    {position:relative; transition:var(--transition1);}  
.exper_view_wrap .info_top .img figure   { display: flex;  border:1px solid #ddd;  }
.exper_view_wrap .info_top .img img		{width:100%; }
  
.exper_view_wrap .info_top .inner			    { position:relative;  }
.exper_view_wrap .info_top .tit		                {position:relative; font-size:1.5em; line-height:1.4; font-weight:700; color:#000;border-bottom:1px solid rgb(0,0,0,0.1);padding-bottom:10px; margin-bottom:20px; } 
.exper_view_wrap .info_top .cate					{position:relative; top:-2px;display:inline-block;font-size:0.7em;line-height:1.2;  padding:5px 10px 6px 10px; color:#fff; background:var(--color2); margin-right:10px;  border-radius:5px; }
.exper_view_wrap .info_top .cont                { display: flex; flex-direction: column; gap:10px; }
.exper_view_wrap .info_top .cont dl            {position:relative; display: grid; grid-template-columns:100px auto; gap:12px; font-size:0.95em; line-height:1.3;  }
.exper_view_wrap .info_top .cont dl dt        { position:relative;  padding-left:12px; color:#111; }
.exper_view_wrap .info_top .cont dl dt::before	 {position:absolute; content:'';   left:2px; top:6px; width:3px; height:3px; background:var(--color1);  border-radius:50%;}
.exper_view_wrap .info_top .cont dl dt::after	 {position:absolute; content:'';   right:0; top:1px; width:1px; height:1em; background:rgb(0,0,0,0.1);   }
.exper_view_wrap .info_top .cont dl dd       {position:relative; }
.exper_view_wrap .info_top .cont dl .site     {padding-right:35px; }
 
.exper_view_wrap .info_top .cont .site_link         {position:absolute;display:inline-block; right:0;top:-5px; width:28px; height:28px; border-radius:50px; background:var(--color2); color:#fff; cursor:pointer; display: flex;  justify-content:center;  align-items:center; text-align:center; }
.exper_view_wrap .info_top .cont .site_link i       {font-size:0.7em; }

 
.exper_view_wrap .file                             {display: flex; flex-direction: column; gap:4px;}
.exper_view_wrap .file li							{position:relative; font-size:0.9em;color:#111; text-align:left; padding-left:16px;}
.exper_view_wrap .file li::before            {position:absolute;left:0;   font-weight: 400; font-family: "Font Awesome 6 Free"; content: "\f15c";   color:#444; }
.exper_view_wrap .file li button				{ position:relative; text-align:left;  }
.exper_view_wrap .file li i                        {margin-right:5px; }
.exper_view_wrap .file a:hover               {text-decoration:underline;           }
.exper_view_wrap .fpilsu							{font-size:0.9em;color:inherit !important;}


@media screen and (max-width:1024px) {   
    .exper_view_wrap .info_top						 {padding:1.4em;  gap:1.5em; } 
    .exper_view_wrap .info_top .tit		             {font-size:1.4em; padding-bottom:10px; margin-bottom:15px;   }
}
@media screen and (max-width:768px) {   
    .exper_view_wrap .info_top						    {padding:1.2em; margin-bottom:30px;   grid-template-columns:1fr; gap:15px; }  
    .exper_view_wrap .info_top .tit		                {font-size:1.3em; }
    .exper_view_wrap .info_top .cont                {   gap:6px; }
    .exper_view_wrap .info_top .cont dl            { grid-template-columns:85px auto;  gap:10px; font-size:0.9em;}
    
    .exper_view_wrap .info_top .cont .site_link         { top:-5px; width:24px; height:24px;  }
    .exper_view_wrap .info_top .cont .site_link i       {font-size:0.65em; }
}





/* 온라인 강의 뷰페이지  ================================================================================== */