/* 온라인  리스트  ================================================================================== */ 
.class_list_wrap						{position:relative;} 
.class_list_wrap>li						{padding:20px 10px; border-bottom:1px solid #ddd;}
.class_list_wrap>li:first-child			{border-top:1px solid #ddd;}
.class_list_wrap>li	a					{display:grid; grid-template-columns:240px auto; gap:0 40px;}
.class_list_wrap figure					{position:relative; overflow:hidden; aspect-ratio:6 / 3.5; border-radius:10px; border:1px solid #eaeaea;}
.class_list_wrap figure img				{width:100%; height:100%; object-fit:cover; transition:all .5s ease;}
.class_list_wrap figure i				{display:none; align-items:center; height:100%; position:absolute; width:100%; color:#fff;background:rgba(0,0,0,0.45); z-index:1; text-align:center; font-size:36px;}
.class_list_wrap .tit					{font-family: 'S-Core Dream'; font-size:1.1em; color:#111; font-weight:500; letter-spacing:-0.75px; margin-bottom:15px;}
.class_list_wrap .tit span				{margin-right:15px;}
.class_list_wrap .cate					{margin:0 7px 15px 0; display:inline-block; color:var(--color1); border:1px solid var(--color1);padding:0 12px; height:26px; line-height:24px; text-align:center; font-size:15px;}
.class_list_wrap .info					{padding-top:10px;}
.class_list_wrap .info ul				{display:grid; grid-template-columns:repeat(2, 1fr); gap:3px 10px;}
.class_list_wrap .info ul li			{display:grid; grid-template-columns:90px auto;  color:#777;}
.class_list_wrap .info ul li strong		{font-family: 'S-Core Dream'; color:#333; font-size:0.9em;}

.class_list_wrap>li:hover figure		{box-shadow:0 5px 20px 0 rgba(0, 0, 0, .1);}
.class_list_wrap>li:hover figure i		{display:grid;}
.class_list_wrap>li:hover figure img	{transform: scale(1.05);}



@media screen and (max-width:1024px) {
	.class_list_wrap>li				{padding:15px 0;}
	.class_list_wrap>li a			{display:block;}
	.class_list_wrap figure			{height:auto;}	
	.class_list_wrap .cate			{font-size:14px; margin-bottom:5px;}
	.class_list_wrap .tit			{font-size:1.05em; margin-bottom:10px;}
	.class_list_wrap .tit span		{margin-right:7px;}
	.class_list_wrap .info ul		{margin-top:10px; grid-template-columns:1fr; gap:0;}
	.class_list_wrap figure i		{height:100%; line-height:1.2;}
}



/* 온라인 강의 커리큘럼 리스트 박스  ================================================================================== */
.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); }
}