/* 온라인 강의 리스트  ================================================================================== */ 
.class_list_wrap								{position:relative;  display: grid; grid-template-columns: repeat(3, 1fr); gap:2em ;} 
.class_list_wrap li							{position:relative;border:1px solid #ddd; border-radius:5px;  overflow:hidden; transition:all 0.3s ease;}
.class_list_wrap li em					{position:absolute; top:0;z-index:1;}
.class_list_wrap li em span			{border-radius:0 0 5px 0 !important;  line-height:34px;  padding:0 12px; border:0; }
.class_list_wrap li .img					{position:relative; aspect-ratio:4/2.5; 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:20px ;}
.class_list_wrap li .cont	.tit			{position:relative;  font-size:1.1em;font-weight:700;color:#000;padding-bottom:5px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class_list_wrap li .cont	.txt			{}
.class_list_wrap li .cont	.txt p		{position:relative;color:#888;   font-size:0.9em;   }
/* .class_list_wrap li .cont	.txt p:before		{position:absolute; content:''; display:block; left:3px; top:10px; width:3px; height:3px; background:#999;} */

.class_list_wrap li .cont	.turn			{position:relative;  background:#666;   text-align:center;  font-size:0.85em;margin:17px 0 0 0; border-radius:3px;  }
.class_list_wrap li .cont	.turn dt		{display:inline-block;  background:url('./img/list_icon01.png') no-repeat 0 50%  ;color:#fff;line-height:42px; padding:0 8px 0 25px;}
.class_list_wrap li .cont	.turn dd		{display:inline-block;   color:#fff;line-height:42px;}
  
/*
.class_list_wrap li .cont	.turn			{position:relative;display:flex; justify-content:right; text-align:center;  font-size:0.85em;margin:15px 0 0 0;}
.class_list_wrap li .cont	.turn dt		{border:1px solid rgb(0,0,0,0.1);background:url('./img/list_icon01.png') no-repeat 10px 50% #555;color:#fff;line-height:34px; padding:0 12px 0 35px;}
.class_list_wrap li .cont	.turn dd		{border:1px solid #d9d9d9;background:#fff;color:#444;line-height:34px; padding:0 12px;}
*/
 
.class_list_wrap li:hover								{ border-color:var(--color1);  /* box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); */}
.class_list_wrap li:hover .img img				{transform: scale(1.07);  } 

@media screen and (max-width:1400px) { 
.class_list_wrap								{ gap:30px   ;}  
}
@media screen and (max-width:1200px) { 
.class_list_wrap								{ gap:30px 24px ;}  
}
@media screen and (max-width:1024px) { 
.class_list_wrap									{  gap:1.5em;  }
.class_list_wrap li .cont	.turn			{  font-size:0.85em; margin:14px 0 0 0;}
.class_list_wrap li .cont	.turn dt		{ line-height:36px;  }
.class_list_wrap li .cont	.turn dd		{ line-height:36px;  }
}
@media screen and (max-width:800px) { 
.class_list_wrap									{  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));  } 
 
}
 

/* 온라인 강의 리스트  ================================================================================== */

 



/* 온라인 강의 뷰페이지  ================================================================================== */ 
.class_view_wrap02										{position:relative; display:grid; grid-template-columns: auto 52% ;gap:40px; padding:30px; border:10px solid #eee;  margin-bottom:40px; }
.class_view_wrap02::after							{position:absolute;content:''; top:-10px; left:-10px; width:30px; height:30px; border-left:10px solid var(--color1); border-top:10px solid var(--color1); }

.class_view_wrap02 .img								{  overflow:hidden;  }
.class_view_wrap02 .img img						{width:100%;height:100%;object-fit:cover; }
.class_view_wrap02 .inner							{  }
.class_view_wrap02 .inner .tit						{position:relative; font-size:1.6em; font-weight:700; color:#000; line-height:1.3; border-bottom:1px solid #e3e3e3; padding-bottom:15px; margin-bottom:15px;}
.class_view_wrap02 .inner .tit strong			{display:block;padding:10px 0 0 0; font-weight:700;}
.class_view_wrap02 .inner .tit span			{line-height:34px; padding:0 10px; }
.class_view_wrap02 .inner .tit .state_not	{display:none;}
 
.class_view_wrap02 .inner dl						{position:relative;display:flex; gap:10px; font-size:0.95em;   padding:5px 0 ; color:#000;}
.class_view_wrap02 .inner dt						{position:relative;width:100px; padding:0 0 0 15px; color:#333;}
.class_view_wrap02 .inner dd						{flex:2; color:#777;}
.class_view_wrap02 .inner dt:before			{position:absolute; content:''; display:block; left:3px; top:10px; width:3px; height:3px; background:#888;}
.class_view_wrap02 .inner dt:after				{position:absolute; content:''; display:block; right:0; top:4px; width:1px; height:1em; background:rgb(0,0,0,0.15);}
  
.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:1200px) { 
.class_view_wrap02										{ gap:30px;  padding:30px; } 
}
@media screen and (max-width:1024px) { 
.class_view_wrap02										{  margin:0 0 30px 0; gap:30px;  padding:25px; } 
.class_view_wrap02 .inner .tit						{ font-size:1.5em; }
.class_view_wrap02 .inner .tit span			{line-height:30px; padding:0 8px; }
.class_view_wrap02 .inner dl						{ padding:3px 0;}
.class_view_wrap02 .inner dt						{width:90px;} 
}
@media screen and (max-width:800px) {  
	.class_view_wrap02									{  grid-template-columns: 1fr ;gap:20px;  padding:20px;border-width:8px;   margin-bottom:30px;}
	.class_view_wrap02::after						{width:24px; height:24px;top:-8px; left:-8px;border-left:8px solid var(--color1); border-top:8px solid var(--color1); } 

.class_view_wrap02 .inner .tit						{ font-size:1.3em;   margin-bottom:0; border-bottom:0; }
.class_view_wrap02 .inner dt						{width:80px;} 
.class_view_wrap02 .mydash						{ padding:15px 5px  ;}
.class_view_wrap02 .mydash dl					{padding:0 15px;font-size:0.9em; } 
}
/* 온라인 강의 뷰페이지  ================================================================================== */






/* 온라인 강의 커리큘럼 리스트 박스  ================================================================================== */
.class_curriculum_list							{position:relative; margin:0 0 50px 0; }

.class_curriculum_list .tw01					{width:80px; }
.class_curriculum_list .tw02					{width:100px; }
.class_curriculum_list .tw03					{width:16%; }
.class_curriculum_list .class_time			{display:none; }

.class_curriculum_list ul						{position:relative; border:1px solid #dfdfdf; }
.class_curriculum_list ul li						{position:relative; padding:15px 20px; border-top:1px solid #dfdfdf;  display: grid; grid-template-columns:40px auto 15% ;gap:20px; transition:all 0.3s ease; }
 .class_curriculum_list ul li:first-child	{border-top:0px;}	
.class_curriculum_list ul li	.no				{ text-align:center; }
.class_curriculum_list ul li	.no span		{display:inline-block;text-align:center; width:35px;height:35px;line-height:35px;background:#999;color:#fff; font-size:0.9em; border-radius:25px;}
.class_curriculum_list ul li	.tit				{line-height:35px;letter-spacing:-0.5px;}
.class_curriculum_list ul li	.time			{ line-height:35px;text-align:center;font-size:0.9em;color:#999; }
.class_curriculum_list ul li	.time i			{display:inline-block;padding:0 15px 0 0;color:#bbb;}

@media screen and (max-width:800px) {  
.class_curriculum_list .tw01					{width:60px; }
.class_curriculum_list .tw02					{width:80px; }
.class_curriculum_list .tw03					{width:110px; }
 
.class_curriculum_list ul li						{ padding:13px  ;  grid-template-columns:45px auto   ;gap:0;  }
.class_curriculum_list ul li	.no				{ text-align:left;grid-column: 1 / 2; grid-row: 1 / 3; } 
.class_curriculum_list ul li	.tit				{line-height:1.4; }
.class_curriculum_list ul li	.time			{text-align:left;  line-height:1.4;padding:4px 0 0 0;}
.class_curriculum_list ul li	.time i			{ padding:0 8px 0 0; }
}
@media screen and (max-width:600px) { 
.class_curriculum_list .tw01					{width:50px; }
.class_curriculum_list .tw02					{width:70px; }
.class_curriculum_list .tw03					{ display:none; }
.class_curriculum_list .class_time			{display:block; color:#999; font-size:0.9em; padding-top:3px;}
.class_curriculum_list .class_time i		{padding-right:5px;font-size:0.9em;  }
}
/* 온라인 강의 커리큘럼 리스트 박스  ================================================================================== */

 










/* 마이페이지 리스트  ================================================================================== */
.dashboard_wrap													{position:relative;background:#f5f5f5;  margin:0 0 50px 0; border:1px solid #e0e0e0;padding:30px 10px; border-radius:5px;  }  
.dashboard_wrap .infobox									{position:relative;padding:0 5px 20px 5px; margin:0 20px 25px 20px; border-bottom:1px dashed #ddd;  display: grid; grid-template-columns:auto 240px;  }
.dashboard_wrap .infobox .inner						{position:relative; padding:10px 0 0 0;   }
.dashboard_wrap .infobox .tit								{ font-size:1.3em;font-weight:700; color:#222;   padding:0 0 15px 0;}
.dashboard_wrap .infobox .tit span					{font-weight:700;color:var(--color1);}
.dashboard_wrap .infobox p								{position:relative;padding:0 0 5px 12px; color:#222; font-size:0.95em; }
.dashboard_wrap .infobox p:before					{position:absolute; content:''; display:block; left:2px; top:10px; width:3px; height:3px; background:#777; border-radius:5px;  }  
.dashboard_wrap .infobox .btn_box					{position:relative; display: grid; grid-template-columns: repeat(2, 1fr); gap:5px; }
.dashboard_wrap .infobox .btn_box .btn			{position:relative; text-align:center;color:#444; font-weight:500;font-size:0.85em;   padding:15px  0; border-radius:10px;} 
.dashboard_wrap .infobox .btn_box .icon1		{ height:55px; background:url('./img/mypage_icon05.png') no-repeat center 0; background-size:55px auto; }
.dashboard_wrap .infobox .btn_box .icon2		{ height:55px; background:url('./img/mypage_icon04.png') no-repeat center 0; background-size:55px auto; }
.dashboard_wrap .infobox .btn_box .btn:hover	{text-decoration:underline; background:#fff; }
  
.dashboard_wrap .summary								{ width:100%; display: grid; grid-template-columns: repeat(4, 1fr);  }
.dashboard_wrap .summary li								{position:relative;  padding: 0 30px;border-right:1px solid #e5e5e5; }  
.dashboard_wrap .summary li:last-child				{border-right:0;}  
.dashboard_wrap .summary li .txt						{position:relative; color:#333;font-weight:700;line-height:1.3;}
.dashboard_wrap .summary li .no						{font-size:1.6em;line-height:1.3;font-weight:700;color:var(--color1);padding:6px 0 0 0;}
.dashboard_wrap .summary li .no span				{font-size:0.7em;line-height:1.3;font-weight:700;color:var(--color1); }
   

@media screen and (max-width:1200px) {   
.dashboard_wrap													{ padding:30px 0;   } 
.dashboard_wrap .infobox									{   grid-template-columns:auto 220px;}
.dashboard_wrap .summary li .no						{font-size:1.5em;padding: 4px 0  0 0;} 
} 
@media screen and (max-width:800px) { 
.dashboard_wrap													{ padding:25px 0;   } 
.dashboard_wrap .infobox									{ padding-bottom:15px; margin:0 15px 25px 15px; grid-template-columns:1fr;}
.dashboard_wrap .infobox .inner						{ padding:0;   }
.dashboard_wrap .infobox .tit								{ font-size:1.2em;padding:0 0 10px 0;}
 
.dashboard_wrap .infobox .btn_box					{margin-top:10px;}
.dashboard_wrap .infobox .btn_box .btn			{ padding:6px 10px;  background:#fff; border-radius:5px; border:1px solid #dfdfdf;}
.dashboard_wrap .infobox .btn_box .btn .icon1,
.dashboard_wrap .infobox .btn_box .btn .icon2	{display:none; }

 
.dashboard_wrap .summary li								{ padding: 0 20px;}
.dashboard_wrap .summary li .no						{ font-size:1.4em;}
}
@media screen and (max-width:600px) {  
.dashboard_wrap													{ padding:20px 5px;margin:0 0 40px 0;   }
.dashboard_wrap .infobox									{  margin:5px 10px 20px 10px;} 
.dashboard_wrap .infobox .namebox				{   padding-bottom:5px;}
.dashboard_wrap .infobox .namebox .cate		{  font-size: 0.85rem; }
.dashboard_wrap .infobox .namebox .tit			{ display:block; padding-top:10px; }
.dashboard_wrap .infobox .namebox .tit b		{ font-size:1.1em;}
.dashboard_wrap .infobox p								{ padding:0 0 0 10px; font-size: 0.9em; } 
.dashboard_wrap  .summary								{  grid-template-columns: repeat(2, 1fr);  row-gap:20px;  } 
.dashboard_wrap .summary li								{ padding: 0 15px;display: flex; justify-content: space-between; }
.dashboard_wrap .summary li:nth-child(2)		{border-right:0;}  
.dashboard_wrap .summary li .txt						{font-size:0.9em;display: flex; flex-direction: column; justify-content:center; align-items:center;  } 
.dashboard_wrap .summary li .no						{padding:0;font-size:1.25em;}
.dashboard_wrap .summary li .no span				{font-size:0.75em; }
 
}




/* 마이페이지 리스트  ================================================================================== */ 
.mypage_list_wrap								{position:relative;  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em;margin:0 0 50px 0;} 
.mypage_list_wrap li								{position:relative; border:1px solid #ddd; border-radius:5px; overflow:hidden;  } 
.mypage_list_wrap li .img					{position:relative; aspect-ratio:3.4/2;overflow:hidden;  transition:all 0.5s ease;}
.mypage_list_wrap li .img img			{width:100%;height:100%;object-fit:cover;transition:all 0.5s ease;}
.mypage_list_wrap li .cont					{position:relative; padding:20px;}
.mypage_list_wrap li .cont .tit				{position:relative; font-size:1.1em;font-weight:700;color:#111; width:100%; padding-bottom:12px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mypage_list_wrap li .cont .txt			{ }
.mypage_list_wrap li .cont .txt p			{position:relative;color:#838383; padding:0 0 0 10px   ; font-size:0.9em;}
.mypage_list_wrap li .cont .txt p:after			{position:absolute; content:''; top:10px;left:0; background:#888; width:2px; height:2px;}
 
.mypage_list_wrap li .turn					{position:absolute; z-index:11;  }
.mypage_list_wrap li .turn span			{display:inline-block;font-size:0.9em;background:#ff5544;color:#fff;line-height:33px; padding:0 13px; border-radius:0 0 5px 0 ;}  /* 시청 중 상태 */
.mypage_list_wrap li .turn .end			{background:#39bcd0;}    /* 시청 완료 상태 */
.mypage_list_wrap li .turn .app			{background:#6b94e9;}   /* 승인 상태 */
.mypage_list_wrap li .turn .wait			{background:#88c01d;}   /* 승인 대기 상태 */


/**** 온라인인증강의 상태값과 동일하게 맞추기위해 추가 ****/
.mypage_list_wrap .tag {
    position: absolute;
    top: 0;
    left: 0;
    background: #7e7e7e;
    width: 74px;
    height: 36px;
    line-height: 36px;
    font-size: 0.85em;
    text-align: center;
    color: #fff;
    z-index: 2;
    border-radius: 0 0 5px 0;
}

.mypage_list_wrap .ing {
    background: #ff5544;
}

.mypage_list_wrap .end {
    background: #39bcd0;
}

.mypage_list_wrap .app {
    background: #6b94e9;
}



.mypage_list_wrap li:hover					{border-color:var(--color1); } 
.mypage_list_wrap li:hover .img img	{transform: scale(1.07); } 

.mypage_list_line									{border-top:1px solid #e3e3e3;height:60px;}

@media screen and (max-width:1200px) { 
	.mypage_list_wrap							{ gap:  1.5em;}  
}
@media screen and (max-width:800px) {  
	.mypage_list_wrap							{ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}   
}