@charset "utf-8"; 

html							{font-size:18px;}
@media screen and (max-width:1024px) {
html							{font-size:16px;} 
}

.web_size						{position:relative; max-width:1000px; margin:0 auto;} 

/* HEADER  ================================================================================== */
.header							{position:fixed; width:100%; background:#343a40;; z-index:999; height:60px; }
.header h1						{height:60px; line-height:50px; margin:0;padding:0 0 0 10px;}
.header h1 img					{height:45px; vertical-align:middle !important;  }
.header .btn					{position:absolute; top:12px; right:5px; line-height:30px; border-radius:2px; font-size:0.8em; color:#fff; border:1px solid #fff; padding:0 12px; font-weight:500; z-index:1; opacity:.8;}
.header .btn:hover				{opacity:1;}


/* Layout  ================================================================================== */
.main_container, .sub_container	{padding:100px 20px;} 

@media screen and (max-width:1024px) {
	.main_container, .sub_container		{padding:80px 20px;} 
}


/* Design  ================================================================================== */ 
h4						{font-family: 'GmarketSansMedium'; position:relative;font-size:1.4em;line-height:1.3; padding:0 0 20px 17px; color:#000; letter-spacing:-1.75px; } 
h4::after				{position:absolute; top:3px; left:0; content:''; width:5px; height:0.9em; background:#0057b8; border-radius:5px;}
h4 span					{font-size:18px; color:#777; letter-spacing:-1px; margin-left:10px;} 
h5						{font-family: 'GmarketSansMedium'; font-size:1.2em; color:#0057b8; letter-spacing:-1px; line-height:1.2; margin-bottom:20px;}
.sub_txtline			{font-weight:700; box-shadow: inset 0 -10px 0 #ddecff; padding:0 3px; color:#333;}

@media screen and (max-width:1024px) {
	h4					{font-size:1.2em; padding:0 0 10px 13px; letter-spacing:-1px;}
	h4::after			{height:0.9em; top:3px; width:4px;}
	h4 span				{font-size:16px;}
	h5					{font-size:1.05em; margin-bottom:12px;}
} 

.list_wrap						{display:grid; gap:15px;}
.list_wrap li					{position:relative; border:2px solid #4675cd; border-left-width:8px; border-radius:10px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; overflow:hidden;}
.list_wrap .status				{width:110px; text-align:center;}
.list_wrap .status span			{font-family: 'GmarketSansMedium'; display:inline-block; width:60px; height:26px; line-height:28px; border-radius:5px; font-size:0.8em; background:#4675cd; color:#fff;}
.list_wrap .status i			{font-size:25px; display:block; color:#4675cd; margin-bottom:3px;}
.list_wrap .info				{flex:1; padding:15px 0;}
.list_wrap .info .date			{color:#a2a2a2; font-size:0.95em; line-height:1.25;}
.list_wrap .info .tit			{color:#111; font-size:1.1em; font-family: 'GmarketSansMedium'; margin:7px 0 10px 0;}
.list_wrap .info .place			{font-family: 'GmarketSansMedium'; color:#797979; font-size:0.95em;}
.list_wrap .btn					{width:50px; height:100%; display:grid; align-items:center;text-align:center; cursor:pointer; background:#e9e9e9; color:#87919b;}
.list_wrap .btn p				{font-family: 'GmarketSansMedium';}
.list_wrap .btn:hover			{background:#4675cd; color:#fff;}
 

@media screen and (max-width:1024px) {
	.list_wrap					{gap:10px;}
	.list_wrap li				{gap:10px; border-width:1px; border-left-width:6px;}
	.list_wrap .status			{width:85px;}
	.list_wrap .status span		{height:24px; line-height:26px;}
	.list_wrap .status i		{font-size:20px; margin-bottom:0;}
	.list_wrap .info			{padding:10px 0;}
	.list_wrap .info .tit		{font-size:1.05em; margin:5px 0;}
	.list_wrap .btn				{width:40px; font-size:0.9em;}
}
@media screen and (max-width:768px) {
	.list_wrap li				{display:grid; grid-template-columns:auto 35px;}
	.list_wrap .status			{width:100%; text-align:left; padding:12px 0 0 20px;}
	.list_wrap .status i		{vertical-align:middle; display:inline-block; margin:0 7px 0 0;}
	.list_wrap .status span		{text-align:Center;}
	.list_wrap .info			{padding:0 0 10px 20px; grid-column:2 / 1; }
	.list_wrap .btn				{width:100%; grid-column:2 / 3; grid-row: 1 / 3;}
}


.state_ing,
.state_acc,
.state_not,
.state_wait,
.state_end,
.state_finish,
.state_return,
.state_member,
.state_cancel							{position:relative; display: inline-block; text-align:center; vertical-align:middle; min-width:70px; padding:0 4px; line-height:30px;letter-spacing:-1px; border:1px solid rgba(0,0,0,0.1); border-radius:2px; font-size:0.9rem !important; color:#fff;}  

.state_ing								{background:#4ec8ce;} /* 민트색 : 접수중 */
.state_acc								{background:#ff577e;} /* 핑크 : 접수완료 */
.state_not								{background:#ffffff;color:#444;} /* 하얀색 : 신청불가 */
.state_wait								{background:#88c01d;} /* 연두색 : 대기 */
.state_end								{background:#c3c2c2;} /* 회색 : 완료 */
.state_finish							{background:#e9ba6d;} /* 노란색 : 재승인대기 */
.state_return							{background:#e77987;} /* 적색 : 반려 */
.state_cancel							{background:#5a5a5a;} /* 짙은회색 : 취소 */  
.state_member						{color:#444;}