@charset "utf-8";

/* 분류 탭  ================================================================================== */
.manage2_tab								{margin-bottom:30px;}
.manage2_tab ul							{display:flex; flex-wrap:wrap; gap:8px;}
.manage2_tab li a							{display:block; padding:0 22px; line-height:42px; border:1px solid #d9dde3; border-radius:50px; background:#fff; color:#555; font-size:0.95em; font-weight:500; letter-spacing:-0.5px; transition:all 0.3s ease;}
.manage2_tab li a:focus,
.manage2_tab li a:hover					{border-color:var(--color1); color:var(--color1);}
.manage2_tab li.on a						{background:var(--color1); border-color:var(--color1); color:#fff; box-shadow:0 4px 12px rgba(0, 96, 169, 0.25);}

@media screen and (max-width:768px) {
	.manage2_tab							{margin-bottom:20px;}
	.manage2_tab ul						{flex-wrap:nowrap; gap:6px; overflow-x:auto; padding-bottom:6px;}
	.manage2_tab li						{flex:0 0 auto;}
	.manage2_tab li a						{padding:0 16px; line-height:36px; font-size:0.9em;}
	.manage2_tab li.on a					{box-shadow:none;}
}


/* 리스트  ================================================================================== */
.manage2_listbox								{position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1.4em;transition:all 0.3s ease;} 
.manage2_listbox li							{position:relative;  }
.manage2_listbox li a                      {display:block; height:100%; overflow:hidden; border:1px solid #cfcfcf; border-radius:0.7em;}
.manage2_listbox li figure					{position:relative; width:100%; aspect-ratio:4/2.6; overflow: hidden; }
.manage2_listbox li figure img			{width:100%; height:100%; object-fit:cover; transition:all 0.3s ease;   }
.manage2_listbox li:hover figure img   {transform: scale(1.12);  opacity:0.8; /*filter: brightness(0.6); */ }
.manage2_listbox 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:all 0.3s ease; opacity:0;z-index:1;} 
.manage2_listbox li .layer::before		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:28px; height:2px; background:#fff; border-radius:5px ;}
.manage2_listbox li .layer::after			{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); height:28px; width:2px; background:#fff;border-radius:5px ;}
.manage2_listbox li:hover .layer		{ opacity:1;width:80px;height:80px;}

.manage2_listbox .ing						{background:#e94d6a;}
.manage2_listbox .acc						{color:#e94d6a; border:1px solid #e94d6a; background:#fff;}
.manage2_listbox .end					{background:#737171;}
.manage2_listbox .cont					{padding:20px ; }
.manage2_listbox .tit						{font-size:1.2em; font-weight:600;  color:#000; margin-bottom:15px; /* overflow:hidden; text-overflow:ellipsis; white-space:nowrap; */transition:all 0.3s ease;}
.manage2_listbox dl						{position:relative;font-size:0.9em; display: flex; gap:8px;  }
.manage2_listbox dl dt					{position:relative; padding-left:12px;}
.manage2_listbox dl dt::before		{ position:absolute; content:''; left:1px; top:10px; width:3px; height:3px; background:#555; border-radius:5px; }
.manage2_listbox 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); */ }
.manage2_listbox dl dd					{ flex:2; color:#808080; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} 
.manage2_listbox .btn						{position:absolute;bottom:0; width:100%;text-align:center; color:#888;   border-top:1px solid #ebe8e8; line-height:55px; transition:all 0.3s ease;}
.manage2_listbox .more					{position:relative; display:inline-block; top:6px; margin-left:13px; width:26px; height:26px; background:var(--color1); border-radius:50%;cursor:pointer;}
.manage2_listbox .more:after		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:13px; height:2px; background:#fff;}
.manage2_listbox .more:before		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:2px; height:13px; background:#fff;}
.manage2_listbox li:focus a,
.manage2_listbox li:hover a				{ border:1px solid var(--color1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);} 
.manage2_listbox li:focus .btn,
.manage2_listbox li:hover .btn		{background:var(--color1); color:#fff;}
.manage2_listbox li:focus .more,
.manage2_listbox li:hover .more	{ background:rgb(255,255,255,0.4);  }
 
@media screen and (max-width:1200px) {
    .manage2_listbox								{ grid-template-columns:repeat(2, 1fr);  } 
    .manage2_listbox .tit						{font-size:1.15em; margin-bottom:10px; }
    .manage2_listbox .btn						{ line-height:52px; }
}
@media screen and (max-width:1024px) {
    .manage2_listbox								{ grid-template-columns:repeat(3, 1fr); gap:1.2em; } 
} 
@media screen and (max-width:768px) {  
    .manage2_listbox								{ grid-template-columns:repeat(2, 1fr);  }
	.manage2_listbox .tit					    {font-size:1.1em;  }
}
@media screen and (max-width:480px) {  
    .manage2_listbox								{ grid-template-columns:repeat(1, 1fr);  }
}


/* 상세 - 달력(좌) / 대관 일정(우)  ================================================================================== */
.manage2_calendar								{position:relative; margin-bottom:40px; display:grid; grid-template-columns:46% auto; border-top:2px solid #333; border-bottom:1px solid #ddd;}
.manage2_calendar .rt2							{padding:0; border-left:1px solid #ddd;}
.manage2_calendar h6							{margin:0 0 15px 0; background:#f5f5f5; padding:14px; text-align:center; color:#222; font-weight:600; font-size:0.95em;}
.manage2_calendar .lt2 .cont					{padding:0 1em 1em 0;}
.manage2_calendar .rt2 .cont					{padding:0 0 1em 1em;}

.manage2_calendar .room_calendar_top			{margin-bottom:0; padding-bottom:9px;}
.manage2_calendar .room_calendar_top span		{padding:0 5px; font-size:1.1em; color:#333; line-height:150%;}
.manage2_calendar .room_calendar_top i			{vertical-align:middle; padding:0 5px;}

.manage2_calendar .room_table thead th			{line-height:40px;}
.manage2_calendar .room_table tbody td			{border-color:#ddd; font-size:0.9em;}
.manage2_calendar .room_table tbody td .wrap2	{min-height:0;}
.manage2_calendar .room_table tbody td .wrap2 .days	{height:auto; padding:0; font-size:1em; line-height:46px;}
.manage2_calendar .room_table .notday .wrap2 .days::before	{top:23px;}

.manage2_calendar .room_table_time				{background:none; border:0; padding:0; margin:0;}

@media screen and (max-width:1200px) {
	.manage2_calendar							{font-size:0.95em;}
	.manage2_calendar .lt2 .cont				{padding:0 0.8em 0.8em;}
	.manage2_calendar .rt2 .cont				{padding:0 0 0.8em 0.8em;}
}
@media screen and (max-width:1024px) {
	.manage2_calendar							{display:block;}
	.manage2_calendar .lt2 .cont				{padding:0 0 20px 0;}
	.manage2_calendar .rt2						{border-left:0; border-top:2px solid #333;}
	.manage2_calendar .rt2 .cont				{padding:0 0 20px 0;}
}