/* 대회 신청 관련 공통 스타일 */

#apply_check, #apply_check_result, #apply_complete { max-width: 800; margin: 40px auto; padding: 20px; }
.apply-container { width: 100%; max-width: 800px; margin: 40px auto; padding: 20px; }
.apply-full-container { width:100%; margin: 40px auto; padding: 20px; }

.apply-title { text-align:center; margin-bottom: 30px; font-size: 24px; font-weight: bold; }
.apply-box { border: 1px solid #ddd; padding: 30px; border-radius: 10px; background: #f9f9f9; }

.apply-form-group { margin-bottom: 15px; }
.apply-form-group:last-child { margin-bottom: 25px; }
.apply-form-label { display:block; margin-bottom: 5px; font-weight: bold; color: #333; }
.apply-form-input { width:100% !important; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
.apply-form-submit { width:100%; padding: 12px; background: #3366ff; color:#fff; border:none; border-radius: 5px; font-weight:bold; cursor:pointer; font-size: 16px; transition: background 0.2s; }
.apply-form-submit:hover { background: #2255ee; }

.apply-flex-header { display:flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.apply-flex-header h3 { margin: 0; font-size: 18px; }

.apply-btn { display:inline-block; padding: 8px 15px; text-decoration:none; border-radius: 5px; font-size:13px; cursor:pointer; text-align: center; border: none; font-family: inherit; }
.apply-btn-sm { padding: 4px 8px; font-size: 11px; border-radius:3px; margin-bottom: 2px; }

.apply-btn-gray { background: #666; color:#fff !important; }
.apply-btn-gray:hover { background: #555; }
.apply-btn-lightgray { background: #eee; color:#333 !important; }
.apply-btn-lightgray:hover { background: #ddd; }
.apply-btn-f2f2 { background: #f2f2f2; color:#666 !important; }
.apply-btn-f2f2:hover { background: #e9e9e9; }
.apply-btn-red { background: #ff4c4c; color:#fff !important; }
.apply-btn-red:hover { background: #ee3b3b; }
.apply-btn-blue { background: #007bff; color:#fff !important; }
.apply-btn-blue:hover { background: #0069d9; }
.apply-btn-black { background: #333; color:#fff !important; }
.apply-btn-black:hover { background: #111; }

.apply-empty-msg { text-align:center; padding: 60px; border: 1px solid #ddd; border-radius: 10px; background: #fff; }

.apply-table { width:100%; border-collapse: collapse; margin-top: 15px; border-top: 2px solid #333; background: #fff; }
.apply-table thead tr { background:#f2f2f2; }
.apply-table th, .apply-table td { padding: 12px 10px; border-bottom: 1px solid #ddd; }
.apply-text-center { text-align:center; }

/* apply_view.php 전용 스타일 */
.apply-view-article { width:100%;  margin: 20px auto; padding: 20px; background: #fff; border: 1px solid #ddd; border-top: 2px solid #333; }
.apply-view-header { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.apply-view-tit { font-size: 20px; color: #333; font-weight: bold; }
.apply-view-info { margin-bottom: 30px; }
.apply-view-date { color: #666; font-size: 13px; font-weight: bold; }

.apply-view-table { width: 100%; border-collapse: collapse; }
.apply-view-table th { text-align: left; padding: 12px; background: #f9f9f9; width: 150px; border-bottom: 1px solid #eee; }
.apply-view-table td { padding: 12px; border-bottom: 1px solid #eee; }
.apply-view-bt { text-align: center; margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }

/* apply_complete.php 전용 스타일 */
.apply-complete-wrap { text-align:center; padding: 50px 20px; }
.apply-complete-h2 { font-size:2em; color: #3366ff; margin-bottom: 20px; }
.apply-complete-p { font-size:1.2em; line-height: 1.6; }

.apply-details-box { max-width: 600px; margin: 40px auto; border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: #f9f9f9; text-align:left; }
.apply-details-list { list-style:none; padding:0; margin:0; }
.apply-details-list li { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.apply-details-list li:last-child { border-bottom: none; }




table.responsive-tb1 td:before{display: none!important;}

table.responsive-tb1 td span.th { 
	/* Now like a table header */
	display: inline-block;
	position: relative;
	width: 130px; 
	align-self: stretch;
	line-height:3rem;
	margin:-0.3rem 0.5rem -0.3rem 0; 
	padding-left: 0.5rem; 
	padding-right: 0.5rem;
	border-right: 1px solid #eee; 
	white-space: nowrap;
	background:#f7f7f7;
	font-weight:600;
}
table.responsive-tb1 tr.block-tr td{ 		
	
	width:100%;	
}

@media only screen and (max-width:991px) {
	.table-x.responsive-lg{border-top:1px solid #eee;border-left:0;border-right:0;}
	.table-x.responsive-lg td{border-left:0;border-right:0; padding:0.5rem 0;}
	.table-x.responsive-lg td{}
}

@media only screen and (max-width:768px) {

	
	table.responsive-tb1{border:none;}
	table.responsive-tb1 thead, table.responsive-tb1 tbody, table.responsive-tb1 th { 
		display: block; 
	}
	table.responsive-tb1 tr { 
		display: flex; 
		justify-content: flex-start;
		flex-wrap: wrap;
		border-top: 1px solid #ccc; 
		border-bottom: 1px solid #ccc; 
		margin-bottom:0.8rem; 		
	}	
	table.responsive-tb1 tr.tr-mid { 		
		border-bottom:0; 
		margin-bottom:0; 		
	}
	
	table.responsive-tb1 td { 		
		width:50%;		
	}
	table.responsive-tb1 td.block-td { 		
		width:100%;	
		border-right:0 !important;	
	}
	table.responsive-tb1 td img.thumb{ 		
		height:30px;
	}
	table.responsive-tb1 colgroup{display: none;visibility:collapse;}
	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsive-tb1 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsive-tb1 td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 						
	}
	table.responsive-tb1 td:not(.empty_table) { 		
		text-align: left;
		display: flex;
		justify-content: flex-start;	
		align-items: center;
		position: relative;
		padding:0.3rem 0.3rem 0.3rem 0; 		
		line-height:100%;
	}
	
	table.responsive-tb1 td:nth-child(odd) { 
		border-right: 1px solid #eee; 
	}
	table.responsive-tb1 td:not(.empty_table):before { 
		/* Now like a table header */
		display: inline-block!important;
		position: relative;
		width: 130px; 
		align-self: stretch;
		line-height:3rem;
		margin:-0.3rem 0.5rem -0.3rem 0; 
		padding-left: 0.5rem; 
		padding-right: 0.5rem;
		border-right: 1px solid #eee; 
		white-space: nowrap;
		background:#f7f7f7;
		font-weight:600;		
	}
    
	table.responsive-tb1 td.block-td:not(.empty_table):before { 
		/* Now like a table header */		
		width: 130px; 
	}
	
    table.responsive-tb1 td .td { 
		/* Now like a table header */		
		width: calc(100% - 140px);
	}
    
	table.responsive-tb1 td select,table.responsive-tb1 td input{max-width:100%; }
	/*
	Label the data
	*/
	
	table.responsive-tb2{border:none;}
	table.responsive-tb2 thead, table.responsive-tb2 tbody, table.responsive-tb2 th { 
		display: block; 
	}
	table.responsive-tb2 tr { 
		display: flex; 
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		
	}
	table.responsive-tb2 td { 
		display: flex; 
		align-items: center;
		width:100%;		
	}
	table.responsive-tb2 colgroup{display: none;}
	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsive-tb2 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsive-tb2 tr { 
	border-top: 1px solid #ccc; 
	border-bottom: 1px solid #ccc; 
	margin-bottom:0.8rem; 
	}
	table.responsive-tb2 td { 
		/* Behave  like a "row" */
		border: none !important ;
		border-bottom: 1px solid #eee!important; 			
		position: relative;
		padding:0.3rem 0.3rem 0.3rem 0; 
		text-align: left;
	}
	
	table.responsive-tb2 td:not(.empty_table):before { 
		/* Now like a table header */		
		position: relative;		
		display: inline-block;
		width: 120px;
		align-self: stretch;
		line-height:3rem;
		margin:-0.3rem 0.5rem -0.3rem 0; 
		padding-left: 0.5rem; 
		padding-right: 10px; 
		border-right: 1px solid #eee; 	
		white-space: nowrap;
		background:#f7f7f7;
		font-weight:600;
	}
	table.responsive-tb2 td.block-td:not(.empty_table):before { 
		/* Now like a table header */				
		width: 120px; 
	}
    
    table.responsive-tb2 td .td { 
		/* Now like a table header */		
		width: calc(100% - 130px);
	}
   

}

@media only screen and (max-width:576px) {
	
	table.responsive-tb1 thead, table.responsive-tb1 tbody, table.responsive-tb1 th { 
		display: block; 
	}
	table.responsive-tb1 tr { 
		display: flex; 
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		
	}
	table.responsive-tb1 td { 
		width:100%;		
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
	}
    table.responsive-tb1 td:not(.empty_table) { 
		display: flex; 
	}
    
    
	table.responsive-tb1 colgroup{display: none;}
	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsive-tb1 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsive-tb1 tr { border-bottom: 1px solid #ccc; }
	
	table.responsive-tb1 td { 
		/* Behave  like a "row" */
		border: none !important ;
		border-bottom: 1px solid #eee!important; 	
		
		position: relative;
		padding:0.3rem 0.3rem 0.3rem 0; 
		text-align: left;
	}
	
	table.responsive-tb1 td:not(.empty_table):before { 
		/* Now like a table header */		
		position: relative !important;		
		display: inline-block;
		width: 100px;		
		align-self: stretch;
		line-height:3rem;
		margin:-0.3rem 0.5rem -0.3rem 0; 
		padding-left: 0.5rem; 
		padding-right: 10px; 
		border-right: 1px solid #eee;
		
	}
	table.responsive-tb1 td.block-td:not(.empty_table):before { 
		/* Now like a table header */				
		width: 100px; 
	}
	table.responsive-tb1 td .td { 
		/* Now like a table header */		
		width: calc(100% - 100px);
	}
    
	table.responsive-tb1 td span.th { 
	/* Now like a table header */	
	width: 100px !important; 	
	}

	table.responsive-tb2 td:before { 		
		width: 100px;
		min-width:100px;
	}
	table.responsive-tb2 td.block-td:before { 
		/* Now like a table header */				
		width: 100px; 
	}

    table.responsive-tb2 td .td { 
		/* Now like a table header */		
		width: calc(100% - 100px);
	}



    table.responsive-form1 { 
		width:100%;		
        border-top: none;;
        
	}	
	table.responsive-form1 > thead, table.responsive-form1 >  tbody,
	table.responsive-form1 > tbody > tr > th, 
	table.responsive-form1 > tbody > tr ,
	table.responsive-form1 > tbody > tr > td,
	table.responsive-form1 > tr > th, 
	table.responsive-form1 > tr ,
	table.responsive-form1 > tr > td { 
		display: block; 	
		width:100%;		
	}	
    
	
	table.responsive-form1 > tbody > tr,table.responsive-form1 > tr { border-bottom: none; }
    
	table.responsive-form1 > tbody > tr > th,
	table.responsive-form1 > tr > th{ 
		text-align: left;
		display:flex;
		align-items: center;
        padding:0.7rem 0.0rem 0rem 0rem; 
		border:none;
		border-top: 1px solid #ccc;
        border-bottom:none;
	}
	table.responsive-form1 > tbody >  tr > td,
	table.responsive-form1 > tr > td{ 
		/* Behave  like a "row" */
		border: none;		
		position: relative;
		padding:0.3rem 0.0rem 1rem 0rem; 
		text-align: left;		
		height:auto;
		
	}
	
	colgroup{display:none;}
	table.responsive-form1 .grid1-head, table.responsive-form1 .grid2-head , table.responsive-form1 .grid3-head , table.responsive-form1 .grid4-head, table.responsive-form1 col {width:100%;}
		
}


.grid_1 {width:40px}
.grid_2 {width:100px}
.grid_3 {width:120px}
.grid_4 {width:190px}
.grid_5 {width:240px}
.grid_6 {width:290px}
.grid_7 {width:340px}
.grid_8 {width:390px}
.grid_9 {width:440px}
.grid_10 {width:490px}
.grid_11 {width:540px}
.grid_12 {width:590px}
.grid_13 {width:640px}
.grid_14 {width:690px}
.grid_15 {width:740px}
.grid_16 {width:790px}
.grid_17 {width:840px}
.grid_18 {width:890px}