/* 온라인 강의 리스트  ================================================================================== */ 
.class_list_wrap								{position:relative;  display: grid; grid-template-columns: repeat(4, 1fr); gap:50px 25px  ;} 
.class_list_wrap li							{position:relative;border:1px solid #e9e9e9; }
.class_list_wrap li em					{position:absolute; top:0;z-index:1;}
.class_list_wrap li em span			{border-radius:0px !important; }
.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:55px 12px 25px 12px  ;}
.class_list_wrap li .cont	.tit			{position:absolute;  top:0;font-size:1.1em;font-weight:500;color:#000;line-height:60px;width:calc(100% - 20px);padding:0  5px; letter-spacing:-1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class_list_wrap li .cont	.txt			{padding:0 5px;}
.class_list_wrap li .cont	.txt p		{position:relative;color:#888; padding:0 0 4px 14px; 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;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								{ box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);}
.class_list_wrap li:hover .img img				{transform: scale(1.07);filter: brightness(0.6); } 

@media screen and (max-width:1200px) { 
.class_list_wrap								{ grid-template-columns: repeat(3, 1fr); gap:40px 20px;}
.class_list_wrap li .cont					{ padding:50px 15px 25px 15px  ;}
.class_list_wrap li .cont	.tit			{ font-size:1.05em;}
.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									{ grid-template-columns: repeat(2, 1fr); gap:40px  20px;}
.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:600px) { 
.class_list_wrap									{ grid-template-columns: repeat(1, 1fr); gap:30px;}
.class_list_wrap li .cont						{ padding:45px 13px 20px 13px  ;}
.class_list_wrap li .cont	.tit				{top:-5px;}
}

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

 



/* 온라인 강의 커리큘럼 리스트 박스  ================================================================================== */
.class_curriculum_list							{position:relative; margin:0 0 50px 0; }
.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 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; }
}
/* 온라인 강의 커리큘럼 리스트 박스  ================================================================================== */






/* 마이페이지 리스트  ================================================================================== */
.dashboard_wrap													{position:relative;background:#f5f5f5;  margin:0 0 70px 0; border:1px solid #e0e0e0;  }
.dashboard_wrap .dashboard_date						{background:#eaeaea; border-bottom:1px solid #e0e0e0; padding:20px ; text-align:center; font-size:1.2em;color:#222;font-weight:700;  letter-spacing:-1px; }
.dashboard_wrap .dashboard_date	 span			{font-size:0.8em;color:#777;}
.dashboard_wrap .summary								{max-width:1200px; width:100%; margin:auto;margin-top:50px; margin-bottom:50px; display: grid; grid-template-columns: repeat(4, 1fr);  }
.dashboard_wrap .summary li								{position:relative;  padding: 0 30px;border-right:1px solid #e5e5e5;display: flex; gap:30px; } 
.dashboard_wrap .summary li:last-child				{border-right:0;} 
.dashboard_wrap .summary li .img					{position:relative;width:90px;height:90px; border-radius:50px; }
.dashboard_wrap .summary li .txt						{position:relative;flex:2; color:#333;letter-spacing:-1px;font-weight:500;line-height:1.3;}
.dashboard_wrap .summary li .no						{font-size:2em;line-height:1.3;font-weight:700;color:#be1824;padding:10px 0 0 0;}
.dashboard_wrap .summary li .no span				{font-size:1.15rem;line-height:1.3;font-weight:700;color:#be1824; }

.dashboard_wrap .summary li .icon01				{ background:url('./img/mypage_icon01.png') no-repeat center 50% #fff; }
.dashboard_wrap .summary li .icon02				{ background:url('./img/mypage_icon02.png') no-repeat center 50% #fff; }
.dashboard_wrap .summary li .icon03				{ background:url('./img/mypage_icon03.png') no-repeat center 50% #fff; }
.dashboard_wrap .summary li .icon04				{ background:url('./img/mypage_icon04.png') no-repeat center 50% #fff; } 

.dashboard_wrap .summary02							{ position:relative; background:#fff;}
.dashboard_wrap .summary02 ul						{position:relative;max-width:1200px; padding:35px  ;width:100%; margin:auto; display: grid; grid-template-columns: repeat(2, 1fr);  gap:60px;}
.dashboard_wrap .summary02 ul li						{color:#888;}
.dashboard_wrap .summary02 ul li p					{position:relative;color:#222; font-size:1.05em;font-weight:700;padding:0 0 10px 0; letter-spacing:-1px; }
.dashboard_wrap .summary02 ul li p:after		{position:absolute; content:''; display:block; left:-13px; top:5px; width:3px; height:15px; background:#be1824;}
.dashboard_wrap .summary02 ul li span			{color:#000; font-size:1.2em;font-weight:700;  }
 

@media screen and (max-width:1200px) {  
.dashboard_wrap  .summary								{margin-top:30px; margin-bottom:30px; }
.dashboard_wrap .summary li								{text-align:center;  flex-direction: column;gap:10px; } 
.dashboard_wrap .summary li .img					{width:70px;height:70px;margin:auto; }
.dashboard_wrap .summary li .no						{font-size:1.8em;padding: 5px 0  0 0;}
.dashboard_wrap .summary li .icon01,
.dashboard_wrap .summary li .icon02,
.dashboard_wrap .summary li .icon03,
.dashboard_wrap .summary li .icon04				{ background-size:45px; }
}

@media screen and (max-width:800px) { 
.dashboard_wrap													{margin:0 0 60px 0;  }
.dashboard_wrap  .summary								{margin-top:20px; margin-bottom:20px; grid-template-columns: repeat(2, 1fr);row-gap:30px;  }
.dashboard_wrap .summary li								{padding: 0 10px;  } 
.dashboard_wrap .summary li .no						{display:inline-block;padding:0 0 0 10px;font-size:1.6em;}
.dashboard_wrap .summary li .no span				{font-size:1rem; }
.dashboard_wrap .summary02 ul						{padding:30px 30px 30px 50px; grid-template-columns: repeat(1, 1fr);  gap:20px;}
}
@media screen and (max-width:600px) { 
.dashboard_wrap  .summary								{ row-gap:20px;  }
.dashboard_wrap .dashboard_date	 					{padding:15px ; font-size:1.1em;}
.dashboard_wrap .dashboard_date	 span			{display:block;}
.dashboard_wrap .summary li .txt						{font-size:0.9em; }
.dashboard_wrap .summary li .no						{font-size:1.5em;}
.dashboard_wrap .summary02 ul						{padding:20px 20px 30px 30px; }
}




/* 마이페이지 리스트  ================================================================================== */ 
.mypage_list_wrap								{position:relative;  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;margin:0 0 50px 0;} 
.mypage_list_wrap li								{position:relative;  } 
.mypage_list_wrap li .img					{position:relative; height:200px;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; }
.mypage_list_wrap li .cont .tit				{position:absolute; font-size:1.1em;font-weight:600;color:#111; width:100%; padding: 15px 0 15px 0;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mypage_list_wrap li .cont .txt			{padding:55px 0 0 0;}
.mypage_list_wrap li .cont .txt p			{position:relative;color:#838383; padding:0 0 2px 10px   ; font-size:0.9em;}
.mypage_list_wrap li .cont .txt p:after			{position:absolute; content:''; top:10px;left:2px; 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;}  /* 시청 중 상태 */
.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 li:hover .img img			{transform: scale(1.07);filter: brightness(0.6); } 

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

@media screen and (max-width:1200px) { 
.mypage_list_wrap								{ gap:  20px;}  
}
@media screen and (max-width:1024px) { 
.mypage_list_wrap								{ grid-template-columns: repeat(2, 1fr); gap:   30px 20px;}  
.mypage_list_wrap li .cont .txt			{padding:50px 0 10px 0;}
}
@media screen and (max-width:600px) { 
.mypage_list_wrap								{ grid-template-columns: repeat(1, 1fr); }
}