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

@charset "UTF-8";

	/*=========================================================================
	* 01. GRID 가로 2 배열 - .jss-grid-container2	
	---------------------------------------------------------------------------
	* 02. GRID 가로 3 배열 - .jss-grid-container3
	---------------------------------------------------------------------------
	* 03. GRID 가로 4 배열 - .jss-grid-container4
	=========================================================================*/
	
	/**
	| -------------------------------------------------------------------------
	| @ 01. GRID 가로 2 배열 - .jss-grid-container2
	| -------------------------------------------------------------------------
	*/
	/* GRID LIST **/
	.jss-grid-container2 {
		width: 100%;
		border: 0px solid #000;
		margin: 0 0 0 0;
		display: -ms-grid;
		display: grid;
		/*grid-template-columns: 1fr 1fr;**/
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 30px;
		grid-row-gap: 0px;
		position: relative;
	}
	/* GRID LIST [ MS IE HACKS - 인터넷 익스플로러 경우 가로 2 고정 핵] **/
	.jss-grid-container2 {
		-ms-grid-columns: 48% 25px 48%;
		/*-ms-grid-rows: 
			auto 20px 
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto;**/
	}
	.jss-grid-container2 > *:nth-child(1)  { -ms-grid-row: 1;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(2)  { -ms-grid-row: 1;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(3)  { -ms-grid-row: 3;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(4)  { -ms-grid-row: 3;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(5)  { -ms-grid-row: 5;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(6)  { -ms-grid-row: 5;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(7)  { -ms-grid-row: 7;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(8)  { -ms-grid-row: 7;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(9)  { -ms-grid-row: 9;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(10) { -ms-grid-row: 9;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(11) { -ms-grid-row: 11;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(12) { -ms-grid-row: 11;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(13) { -ms-grid-row: 13;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(14) { -ms-grid-row: 13;  -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(15) { -ms-grid-row: 15;  -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(16) { -ms-grid-row: 15; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(17) { -ms-grid-row: 17; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(18) { -ms-grid-row: 17; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(19) { -ms-grid-row: 19; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(20) { -ms-grid-row: 19; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(21) { -ms-grid-row: 21; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(22) { -ms-grid-row: 21; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(23) { -ms-grid-row: 23; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(24) { -ms-grid-row: 23; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(25) { -ms-grid-row: 25; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(26) { -ms-grid-row: 25; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(27) { -ms-grid-row: 27; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(28) { -ms-grid-row: 27; -ms-grid-column: 3; }
	.jss-grid-container2 > *:nth-child(29) { -ms-grid-row: 29; -ms-grid-column: 1; }
	.jss-grid-container2 > *:nth-child(30) { -ms-grid-row: 29; -ms-grid-column: 3; }

	/* 그리드 item - 가로 2배열 **/
	.jss-grid-container2 .grid-item {
		width: 100%;
		min-height: 300px;
		margin: 0px;
		margin-bottom: 30px;
		padding: 30px;
		border: 1px solid #E4E4E4;
		text-align: center;
	}
		
	/**
	| -------------------------------------------------------------------------
	| @ 02. GRID 가로 3 배열 - .jss-grid-container3
	| -------------------------------------------------------------------------
	*/
	/* GRID LIST **/
	.jss-grid-container3 {
		width: 100%;
		border: 0px solid #000;
		margin: 0 0 0 0;
		display: -ms-grid;
		display: grid;
		/*grid-template-columns: 1fr 1fr 1fr;**/
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 40px;
		grid-row-gap: 0px;
		position: relative;
	}
	/* GRID LIST [ MS IE HACKS - 인터넷 익스플로러 경우 가로 3 고정 핵] **/
	.jss-grid-container3 {
		-ms-grid-columns: 32% 25px 32% 25px 32%;
		/*-ms-grid-rows: 
			auto 20px 
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto;**/
	}
	.jss-grid-container3 > *:nth-child(1)  { -ms-grid-row: 1;  -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(2)  { -ms-grid-row: 1;  -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(3)  { -ms-grid-row: 1;  -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(4)  { -ms-grid-row: 3;  -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(5)  { -ms-grid-row: 3;  -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(6)  { -ms-grid-row: 3;  -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(7)  { -ms-grid-row: 5;  -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(8)  { -ms-grid-row: 5;  -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(9)  { -ms-grid-row: 5;  -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(10) { -ms-grid-row: 7;  -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(11) { -ms-grid-row: 7;  -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(12) { -ms-grid-row: 7;  -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(13) { -ms-grid-row: 9;  -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(14) { -ms-grid-row: 9;  -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(15) { -ms-grid-row: 9;  -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(16) { -ms-grid-row: 11; -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(17) { -ms-grid-row: 11; -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(18) { -ms-grid-row: 11; -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(19) { -ms-grid-row: 13; -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(20) { -ms-grid-row: 13; -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(21) { -ms-grid-row: 13; -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(22) { -ms-grid-row: 15; -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(23) { -ms-grid-row: 15; -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(24) { -ms-grid-row: 15; -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(25) { -ms-grid-row: 17; -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(26) { -ms-grid-row: 17; -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(27) { -ms-grid-row: 17; -ms-grid-column: 5; }
	.jss-grid-container3 > *:nth-child(28) { -ms-grid-row: 19; -ms-grid-column: 1; }
	.jss-grid-container3 > *:nth-child(29) { -ms-grid-row: 19; -ms-grid-column: 3; }
	.jss-grid-container3 > *:nth-child(30) { -ms-grid-row: 19; -ms-grid-column: 5; }

	/* 그리드 item - 가로 3배열 **/
	.jss-grid-container3 .grid-item {
		width: 100%;
		min-height: 300px;
		margin: 0px;
		margin-bottom: 30px;
		padding: 30px;
		border: 1px solid #E4E4E4;
		text-align: center;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 03. GRID 가로 4 배열 - .jss-grid-container4
	| -------------------------------------------------------------------------
	*/
	/* GRID LIST **/
	.jss-grid-container4 {
		width: 100%;
		border: 0px solid #000;
		margin: 0 0 0 0;
		display: -ms-grid;
		display: grid;
		/*grid-template-columns: 1fr 1fr 1fr 1fr;**/
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 20px; /*30px;**/
		grid-row-gap: 0px;
		position: relative;
	}
	/* GRID LIST [ MS IE HACKS - 인터넷 익스플로러 경우 가로 4 고정 핵] **/
	.jss-grid-container4 {
		-ms-grid-columns: 23% 32px 23% 32px 23% 32px 23%;
		/*-ms-grid-rows: 
			auto 20px 
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto 20px
			auto;**/
	}
	.jss-grid-container4 > *:nth-child(1)  { -ms-grid-row: 1;  -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(2)  { -ms-grid-row: 1;  -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(3)  { -ms-grid-row: 1;  -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(4)  { -ms-grid-row: 1;  -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(5)  { -ms-grid-row: 5;  -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(6)  { -ms-grid-row: 5;  -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(7)  { -ms-grid-row: 5;  -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(8)  { -ms-grid-row: 5;  -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(9)  { -ms-grid-row: 9;  -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(10) { -ms-grid-row: 9;  -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(11) { -ms-grid-row: 9;  -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(12) { -ms-grid-row: 9;  -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(13) { -ms-grid-row: 13; -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(14) { -ms-grid-row: 13; -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(15) { -ms-grid-row: 13; -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(16) { -ms-grid-row: 13; -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(17) { -ms-grid-row: 17; -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(18) { -ms-grid-row: 17; -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(19) { -ms-grid-row: 17; -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(20) { -ms-grid-row: 17; -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(21) { -ms-grid-row: 21; -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(22) { -ms-grid-row: 21; -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(23) { -ms-grid-row: 21; -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(24) { -ms-grid-row: 21; -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(25) { -ms-grid-row: 25; -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(26) { -ms-grid-row: 25; -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(27) { -ms-grid-row: 25; -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(28) { -ms-grid-row: 25; -ms-grid-column: 7; }
	.jss-grid-container4 > *:nth-child(29) { -ms-grid-row: 29; -ms-grid-column: 1; }
	.jss-grid-container4 > *:nth-child(30) { -ms-grid-row: 29; -ms-grid-column: 3; }
	.jss-grid-container4 > *:nth-child(31) { -ms-grid-row: 29; -ms-grid-column: 5; }
	.jss-grid-container4 > *:nth-child(32) { -ms-grid-row: 29; -ms-grid-column: 7; }

	/* 그리드 item - 가로 4배열 **/
	.jss-grid-container4 .grid-item {
		width: 100%;
		min-height: 300px;
		margin: 0px;
		margin-bottom: 30px;
		padding: 20px; /*30px;**/
		border: 1px solid #E4E4E4;
		text-align: center;
	}