/**
* =============================================================================
* @	file     : common-table-grid.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2018-06-25
* @ desc     : TABLE GRID css
* 
* =============================================================================
*/

@charset "UTF-8";

	/*=========================================================================
	* 01. ■ 테이타 상세 그리드
	---------------------------------------------------------------------------	
	* 01-1. TABLE DATA GRID .data-grid - [데이타 상세정보]["4면 BORDER", "th 컬러 GRAY, td 컬러 BLACK"]
		    [20%][80%]
	---------------------------------------------------------------------------
	* 01-2. TABLE DATA GRID .table-grid-dtl - [데이타 상세정보]["4면 BORDER", "th 컬러 GRAY, td 컬러 BLACK"]
			[15%][85%]
	---------------------------------------------------------------------------	
	* 01-3. TABLE DATA GRID .data-grid-reg - [데이타 입력]["top bottom BORDER", "th 컬러 GRAY, td 컬러 BLACK"]
			[20%][80%]
	---------------------------------------------------------------------------	
	* 01-4. TABLE DATA GRID .table-grid-reg - [데이타 입력]["top bottom BORDER", "td 컬러 BLACK"]
			[20%][80%]
	---------------------------------------------------------------------------		
	* 01-5. 01-5. TABLE DATA GRID .reg-doc - [데이타 입력][가로 문서형]
			[20%][80%]
	---------------------------------------------------------------------------	

	===========================================================================
	* 02. ■ 테이타 리스트 그리드
	---------------------------------------------------------------------------	
	* 02-1. TABLE GRID LIST .table-grid-list - ["4면 BORDER"]
	---------------------------------------------------------------------------	
	* 02-2.
	---------------------------------------------------------------------------	
	* 02-3.
	---------------------------------------------------------------------------	
	* 02-4.
	---------------------------------------------------------------------------	
	* 02-5.	
	=========================================================================*/
	
	/**
	| -------------------------------------------------------------------------
	| @ 01-1. TABLE DATA GRID .data-grid - [데이타 상세정보]["4면 BORDER", "th 컬러 GRAY, td 컬러 BLACK"]
	| -------------------------------------------------------------------------
	*/
    .data-grid-outline { /* 그리드 아웃라인 **/
    	border-top:1px solid #000;
    }
	table.data-grid {
		width: 100%;
		border-collapse: collapse;
	}
	table.data-grid > tbody > tr > th {
		width: 20%;
		border: 1px solid #e7e7e7;		
		background-color: #f6f6f6;
		padding: 10px 20px;
		text-align: left;
		vertical-align: middle;
		font-weight: normal;
		color: #636363;
		font-size: 12px;
	}
	table.data-grid > tbody > tr > td {
		width: *;
		border: 1px solid #e7e7e7;		
		background-color: #ffffff;
		text-align: left;
		padding:10px 20px;
		vertical-align: middle;
		color: #000;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 01-2. TABLE DATA GRID .table-grid-dtl - [데이타 상세정보]["4면 BORDER", "th 컬러 GRAY, td 컬러 BLACK"]
	| -------------------------------------------------------------------------
	*/
	table.table-grid-dtl {
		width: 100%;
		border-collapse: collapse;
	}
	table.table-grid-dtl > tbody > tr > th {
		width: 15%;
		border: 1px solid #e7e7e7;		
		background-color: #f6f6f6;
		padding: 19px 20px;
		text-align: left;
		vertical-align: middle;
		font-weight: normal;
		color: #636363;
	}
	table.table-grid-dtl > tbody > tr > td {
		width: *;
		border: 1px solid #e7e7e7;	
		background-color: #ffffff;
		text-align: left;
		padding: 10px 20px;
		vertical-align: middle;
		color: #000;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 01-3. TABLE DATA GRID .data-grid-reg - [데이타 입력]["top bottom BORDER", "th 컬러 GRAY, td 컬러 BLACK"]
	| -------------------------------------------------------------------------
	*/
    .data-grid-reg-outline { /* 그리드 아웃라인 **/
    	border-top:1px solid #000;
    }
	table.data-grid-reg {
		width: 100%;
		border-collapse: collapse;
	}
	table.data-grid-reg > tbody > tr > th {
		width: 20%;
		border: 1px solid #e7e7e7;
		border-left: 0px;	
		background-color: #f6f6f6;
		padding: 16.5px 20px; /*12px 20px;**/
		text-align: left;
		vertical-align: middle;
		font-weight: normal;
		color: #636363;
		font-size: 12px;
	}
	table.data-grid-reg > tbody > tr > td {
		width: *;
		border: 1px solid #e7e7e7;
		border-right: 0px;
		background-color: #ffffff;
		text-align: left;
		padding:10px 20px;
		vertical-align: middle;
		color: #000;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 01-4. TABLE DATA GRID .table-grid-reg - [데이타 입력]["top bottom BORDER", "td 컬러 BLACK"]
	| -------------------------------------------------------------------------
	*/
	div.table-grid {
		border-top: 1px solid #000000;
	}	
	table.table-grid-reg {
		width: 100%;
		border-collapse: collapse;
	}
	table.table-grid-reg > tbody > tr > td.title {
		border: 1px solid #e7e7e7;
		border-left: 0px;
		/*color: #000000; **/
		background-color: #f6f6f6;
		padding: 16.5px 10px 15px 20px;
		text-align: left;
		width: 20%;
	}	
	table.table-grid-reg > tbody > tr > td.content {
		border: 1px solid #e7e7e7;
		border-right: 0px;
		color: #000000;
		background-color: #ffffff;
		width: *;
		text-align: left;
		padding: 8px 10px 8px 20px;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 01-5. TABLE DATA GRID .reg-doc - [데이타 입력][가로 문서형]
	| -------------------------------------------------------------------------
	*/
	.reg-doc-outline {
		width: 100%;
		border: 1px solid #DFDFDF;
		border-radius: 4px;
		margin: 0;
		padding: 20px;
	}
	table.reg-doc {
		width: 100%;
	}
	table.reg-doc tbody tr td.title {
		width: 20%;
		height: 70px;
		margin: 0;
		padding: 15px 5px 15px 0px;
		vertical-align: middle;
		font-size: 14px;
	}
	table.reg-doc tbody tr td.bold {
		font-weight: bold;
	}
	table.reg-doc tbody tr td.content {
		width: *;
		padding: 15px 5px 15px 0px;
		vertical-align: middle;
		font-size: 14px;
	}
	table.reg-doc tbody tr td .hr {
		border: 0px;
		border-top: 1px dashed #C6C6C6;
		margin: 0; padding: 0;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 02-1. TABLE GRID LIST .table-grid-list - ["4면 BORDER"]
	| -------------------------------------------------------------------------
	*/
	div.table-grid-list {
		border-top: 1px solid #000000;
	}
	table.table-grid-list {
		width: 100%;
		border-collapse: collapse;
	}
	table.table-grid-list > thead > tr > th {
		border: 1px solid #e7e7e7;
		background-color: #f6f6f6;
		padding: 20px 5px;
		text-align: center;
	}	
	table.table-grid-list > tbody > tr > td {
		border: 1px solid #e7e7e7;
		background-color: #ffffff;
		padding: 20px 5px;
	}