/* 온라인 강의 리스트  ================================================================================== */ 
.class_list_wrap							{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;} 
.class_list_wrap li							{position:relative; border:1px solid #ddd; border-radius:20px; overflow:hidden; transition:all 0.3s ease;}
.class_list_wrap li em						{position:absolute; left:0; bottom:0; z-index:1; }
.class_list_wrap li em span					{border-radius:0 5px 0 0 !important; line-height:34px; padding:0 15px; border:0; }
.class_list_wrap li .img					{position:relative; aspect-ratio:6 / 4; 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					{padding:25px 30px;}
.class_list_wrap li .cont .tit				{font-family:'Paperlogy'; font-size:1.1em; letter-spacing:0; font-weight:500; color:#000; margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.class_list_wrap li .txt p					{display:grid; grid-template-columns:45px auto; margin:2px 0; color:#666; font-size:0.95em;}
.class_list_wrap li .txt strong				{font-family:'Paperlogy'; color:#222; font-weight:500; letter-spacing:.5px;}
.class_list_wrap li .part					{display:grid; grid-template-columns:20px auto; font-family:'Paperlogy'; font-size:0.9em; line-height:1.45; color:var(--color1); font-weight:500; letter-spacing:0; margin-top:12px;}
.class_list_wrap li .part i					{margin:5px 5px 0 0;}
.class_list_wrap li:hover					{box-shadow:0 0 15px 1px rgba(0,0,0,0.07);}
.class_list_wrap li:hover .img img			{transform:scale(1.07);} 


@media screen and (max-width:1200px) { 
	.class_list_wrap				{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));}
}
@media screen and (max-width:1024px) {
	.class_list_wrap				{gap:1.5em;}
	.class_list_wrap li .cont		{padding:20px;}		
	.class_list_wrap li .cont .tit	{margin-bottom:7px;}
	.class_list_wrap li .txt p		{grid-template-columns:40px auto; margin:0;}
	.class_list_wrap li .part		{margin-top:10px;}
}


/* 온라인 강의 뷰페이지  ================================================================================== */ 
.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-bottom:40px;}
.class_curriculum_list ul					{position:relative; display:grid; gap:10px; }
.class_curriculum_list ul li				{position:relative; padding:15px 20px; border:1px solid #ddd; border-left-width:5px; display:grid; align-items:center; grid-template-columns:40px 12% auto 10%; gap:20px; transition:all 0.3s ease; }
.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:2px;}
.class_curriculum_list ul li .tit           {font-size:0.9em; color:#777; line-height:1.458;}
.class_curriculum_list ul li .tit b         {display:block; font-size:17px; font-weight:500; color:#333; margin-bottom:7px; }
.class_curriculum_list ul li .thum          {position:relative; overflow:hidden; aspect-ratio:6/3.5;}
.class_curriculum_list ul li .thum .vimeo_thumbnail {width:100%; height:100%;}
.class_curriculum_list ul li .thum i        {position:absolute; width:100%; height:100%; display:grid;justify-content:center; align-items:center; background:rgba(0,0,0,0.2); color:rgba(256,256,256,0.55); font-size:2em; z-index:1;}
.class_curriculum_list ul li .thum img      {width:100%; height:100%; object-fit:cover;}
.class_curriculum_list ul li .time			{text-align:center;font-size:0.9em;color:#999; }
.class_curriculum_list ul li .time i	    {display:inline-block; margin-right:5px; color:#bbb;}

@media screen and (max-width:1024px) {  
    .class_curriculum_list                  {margin-bottom:20px; gap:5px;}
    .class_curriculum_list ul li            {padding:10px; gap:10px; grid-template-columns:30px 15% auto 80px;}
    .class_curriculum_list ul li .no span   {width:28px; height:28px; line-height:28px;}
    .class_curriculum_list ul li .tit b        {font-size:16px; margin-bottom:5px;}
    .class_curriculum_list ul li .thum i    {font-size:1.4em;}
}

@media screen and (max-width:768px) {
    .class_curriculum_list ul li            {gap:10px 5px; grid-template-columns:35px auto;}
    .class_curriculum_list ul li .tit       {grid-column: 1 / 3;}
    .class_curriculum_list ul li .time      {grid-column: 1 / 3; text-align:right;}
}



/* 마이페이지 리스트  ================================================================================== */
.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));}   
}