/*---------------------------------------------------------------------------
	[LAYOUT GUIDE]
	#wrapper	>	#container	>	(#regin)	>	#area	>	#section	>	#box	>	#sector
	GNB	(Global Navigation Bar)	:	사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바
	LNB	(Local Navigation Bar)	:	현재 서비스 영역(Local)만 해당되는 네비게이션.서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바
	SNB	(Side Navigation Bar)	:	메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바
	FNB	(Foot Navigation Bar)	:	하단메뉴, 하단로고, 주소, 카피라이팅 영역

	font-family: 'Nanum Barun Gothic';	font-weight: 400;		200	300	400			700
	font-family: 'Noto Sans KR';		font-weight: 400;	100		300	400	500		700		900
	font-family: 'Raleway';				font-weight: 400;	100	200	300	400	500	600	700	800	900
	font-family: 'Roboto';				font-weight: 400;	100		300	400	500		700		900
	font-family: 'NanumBarunGothic';	font-weight: 400;		200	300	400			700
	font-family: 'Nanum Barun Gothic', 'Noto Sans KR', 'NanumBarunGothic', 'Roboto', 'Raleway', 'Sans-serif', 'Verdana', 'Arial', 'Times New Roman', 'Trebuchet MS', '돋움', 'Dotum', '돋움', 'Gulim', '굴림', 'AppleGothic';

	[olympiad]
	olympiad_blue	:	#066CB0		(6, 108, 176)
	olympiad_red	:	#DB1D3A
	olympiad_green	:	#05753C
	olympiad_yellow	:	#FAA519
	olympiad_black	:	#231F20
	olympiad_grey	:	#a3a5a8

	#####	Shades and Tints of #a7a9ac	:	PLATINUM	:	TEXT
	#030303		#0c0d0d		#161617		#1f2021		#292a2b		#323435		#3c3d3f		#45474a		#4f5154
	#585b5e		#626468		#6b6e72		#75787c		#7f8286		#898b8f		#939599		#9d9fa2		#a7a9ac
	#b1b3b6		#bbbdbf		#c5c7c9		#cfd0d2		#d9dadc		#e4e4e5		#eeeeef		#f8f8f8


	SG_RED	:	#ff350a
	SG_BLUE	:	#0080ff

	focus		#0096a0
	logo_color	#004e53
	logo_red	#ed1c24
	logo_black	#231f20		(35, 31, 32)
	logo_gray	#58585b		(88, 88, 91)
	logo_silver	#a7a9ab		(167, 169, 171)
	logo_gold	#ac8a1b		(172, 138, 27)


	olympiad			#58a9fa		(88, 169, 250)
	olympiad_black		#231F20
	olympiad_navy1		#066CB0
	olympiad_navy2		#0b66bc
	olympiad_navy3		#0c66bc
	olympiad_red		#DB1D3A
	olympiad_green		#05753C
	olympiad_yellow		#FAA519

	#####	Shades and Tints of #004e53	:	LOGO
	#000405		#001718		#00292c		#003c3f		#004e53		#006067		#00737a		#00858e		#0098a1
	#00aab5		#00bdc9		#00cfdc		#00e1f0		#05f0ff		#18f1ff		#2cf2ff		#3ff3ff		#53f5ff
	#67f6ff		#7af7ff		#8ef8ff		#a1f9ff		#b5fbff		#c9fcff		#dcfdff		#f0feff
	[Tones of #004e53]
	#262c2d		#232f30		#203233		#1d3536		#1a3839		#163a3d		#133d40		#104043		#0d4346
	#0a4649		#06484d		#034b50		#004e53





	#####	Shades and Tints of #262c2d	(38, 44, 45)	:	TABLE	color
	#020202		#0b0d0d		#141718		#1d2222		#262c2d		#2f3638		#384142		#414b4d		#4a5658
	#536062		#5c6a6d		#657577		#6e7f82		#77898c		#829395		#8c9c9e		#97a5a7		#a2aeb0
	#acb7b9		#b7c1c2		#c2cacb		#ccd3d4		#d7dcdd		#e2e5e6		#ecefef		#f7f8f8



	#####	Shades and Tints of #a7a9ab	:	logo_silver	:	text
	#020202		#0c0c0c		#151616		#1f2020		#292a2a		#323335		#3c3d3f		#454749		#4f5153
	#585b5d		#626467		#6c6e71		#75787b		#7f8285		#898c8e		#939598		#9d9fa1		#a7a9ab
	#b1b3b5		#bbbdbe		#c5c6c8		#cfd0d1		#d9dadb		#e3e4e4		#edeeee		#f7f7f8






	#####	Shades and Tints of #ed1c24	:	logo_red
	#090101		#1b0203		#2e0405		#400507		#520609		#64080b		#76090e		#880b10		#9b0c12
	#ad0e14		#bf0f16		#d11118		#e3121a		#ed1c24		#ee2e36		#f04047		#f15359		#f3656a
	#f4777c		#f6898d		#f79b9f		#f9adb0		#fac0c2		#fbd2d3		#fde4e5		#fef6f6





	[Shades and Tints of #00caf5]
	#00080a		#00181d		#002831		#003844		#004958		#00596c		#00697f		#007993		#0089a7
	#0099ba		#00aace		#00bae1		#00caf5		#0ad4ff		#1dd7ff		#31dbff		#44deff		#58e2ff
	#6ce5ff		#7fe9ff		#93ecff		#a7efff		#baf3ff		#cef6ff		#e1faff		#f5fdff

	[Shades and Tints of #718184]
	#040505		#0d0f10		#171a1a		#202425		#292e2f		#32393a		#3b4345		#444d4f		#4d585a
	#566264		#5f6c6f		#687779		#718184		#7b8b8e		#859497		#909da0		#9aa7a9		#a5b0b2
	#b0b9bb		#bac3c4		#c5cccd		#cfd5d6		#dadedf		#e4e8e8		#eff1f1		#fafafa

	####	Shades and Tints of #ff350a	:	SG	RED
	#0a0200		#1e0500		#310900		#450c00		#581000		#6c1300		#801600		#931a00		#a71d00
	#bb2100		#ce2400		#e22800		#f52b00		#ff350a		#ff451e		#ff5531		#ff6645		#ff7658
	#ff866c		#ff9680		#ffa693		#ffb6a7		#ffc7bb		#ffd7ce		#ffe7e2		#fff7f5
---------------------------------------------------------------------------*/
@charset "utf-8";
@media (min-width: 861px){	/*@media	-------------------------------------------------*/
}	/*@media	-------------------------------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	-------------------------------------------------*/
}	/*@media	-------------------------------------------------*/
@media (max-width: 480px){	/*@media	-------------------------------------------------*/
}	/*@media	-------------------------------------------------*/

/*-------------------------------------------------
	SUB COMMON
-------------------------------------------------*/
	.kswrap{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		padding-left: 1.0rem;
		padding-right: 1.0rem;
	}
	.elearning_box{
		display: block;
		position: relative;
		width: 100%;
		padding-bottom: 1.0rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.92rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.elearning_box > div{
		margin-left: 0.98rem;
		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.92rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
		padding-top: 0.30rem;
		padding-bottom: 0.30rem;
	}
	.elearning_box > div:nth-of-type(1){
		padding-top: 0.00rem;
	}
	.elearning_box > .title{
		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 1.12rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.elearning_box > div.img{
		clear: both;
		display: block;
		position: relative;
		max-width: 500px;
		margin: 0 auto;
		padding-top: 0.72rem;
		padding-bottom: 0.72rem;
	}
	.elearning_box > div.img > img{
		max-width: 100%;
	}

	.elearning_box > ul{
		display: block;
		position: relative;
		width: 100%;
	}
	.elearning_box > ul > li{
		list-style-position: outside;
		list-style-type: square;
		padding-bottom: 0.52rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.88rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.wrap_elearning{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		padding-left: 1.0rem;
		padding-right: 1.0rem;
	}



	.remember{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 0.46rem;
	}
	.remember > ul{
		margin-left: 1.11rem;
	}
	.remember > ul > li{
		list-style-position: outside;
		list-style-type: square;
		padding-bottom: 0.72rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.92rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}



	.knowledge_check{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.knowledge_check > ul{
		display: block;
		position: relative;
		width: 100%;
		margin-left: 0.22rem;
	}
	.knowledge_check > ul > li{
		list-style: inside url('/_elearning/images/common/mark_dotg.gif');
		
		padding-bottom: 1.92rem;
		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 0.92rem;
		font-weight: 500;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.knowledge_check > ul > li > ul{
		display: block;
		position: relative;
		width: 100%;
		margin-left: 2.11rem;
	}
	.knowledge_check > ul > li > ul > li{
		padding-top: 0.92rem;
		padding-bottom: 0.32rem;
		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}











	.wrap_example{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.wrap_example > ul{
		margin-left: 1.11rem;
	}
	.wrap_example > ul > li{
		list-style-position: outside;
		list-style-type: decimal;
		padding-bottom: 3.02rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 1.22rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.wrap_example > ul > li .content_box{
		margin-left: 1.11rem;
	}
	.wrap_example > ul > li .content_box > .txt{
		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.90rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 2.0;
	}
	.wrap_example > ul > li .content_box > .list{
		display: block;
		position: relative;
		width: 100%;
	}
	.wrap_example > ul > li .content_box > .list > ul{
		margin-left: 2.11rem;
	}
	.wrap_example > ul > li .content_box > .list > ul > li{
		list-style-position: outside;
		list-style-type: square;
		padding-top: 0.42rem;
		padding-bottom: 0.42rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.88rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}




	.example_box{
		clear: both;
		display: block;
		position: relative;

		padding-left: 1.12rem;
		padding-right: 1.12rem;
		border: 1px solid #ddd;
	}
	.example_box_on{
		border-left: 3px solid #066CB0;
	}
	.example_box > .box_title{
		padding-top: 1.11rem;
		padding-bottom: 1.11rem;
		cursor: pointer;
		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 0.92rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.example_box > .box_title > span.plusminus{
		float: right;
		width: 17px;		/*가로크기	*/
		height: 17px;		/*세로크기	*/
		margin-top: 3px;
		&.active{
			&:before{
				transform: translatey(-50%) rotate(-90deg);
				opacity: 0;
			}
			&:after{
				transform: translatey(-50%) rotate(0);
				background-color: #066CB0;		/*color*/
				height: 3px;	/*두께	*/
			}
		}
		&:before, &:after{
			content: '';
			display: block;
			background-color: #DB1D3A;		/*color*/
			position: absolute;
			top: 50%; left: 0;
			transition: .35s;
			width: 100%;
			height: 1px;	/*두께	*/
		}
		&:before{
			transform: translatey(-50%);
		}
		&:after{
			transform: translatey(-50%) rotate(90deg);
		}
	}
	.example_box > .box_desc{
		display: none;
		padding-bottom: 1.11rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.example_box > .box_desc > div{
		padding-bottom: 1.12rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}



/*----------------------------------------------------
	main
----------------------------------------------------*/
@media (min-width: 1201px){	/*@media	-------------------------------------------------*/
	.kswrap_main{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		padding-top: 5.00rem;
		padding-left: 200px;
		padding-right: 200px;
	}
}	/*@media	-------------------------------------------------*/
@media (max-width: 1200px){	/*@media	-------------------------------------------------*/
	.kswrap_main{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		padding-top: 5.00rem;
		padding-left: calc(100vw - 920px);
		padding-right: calc(100vw - 920px);
	}
}	/*@media	-------------------------------------------------*/
	.kswrap_main > .main_title{
		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #fff;
		font-size: 2.42rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.7;

		/*형광팬 효과		*/
		display: inline;
		box-shadow: inset 0 -3.42rem 0 rgba(6, 108, 176, 0.96);
		padding-left: 0.76rem;
		padding-right: 0.76rem;
		/*
		padding-bottom: 1.44rem;
		*/
	}
	.kswrap_main > .main_desc{
		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 1.08rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
		padding-top: 2.94rem;
		padding-bottom: 0.04rem;
	}









/*----------------------------------------------------
	what
	표준이란 무엇인가?		>	표준이란 무엇인가?
----------------------------------------------------*/
	.elearning_video{
		clear: both;
		display: inline-block;
		position: relative;
	}






/*----------------------------------------------------
	what
	표준이란 무엇인가?		>	표준 사용방법
----------------------------------------------------*/
	.what{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		padding-left: 1.0rem;
		padding-right: 1.0rem;
	}
	.what_box{
		display: block;
		position: relative;
		width: 100%;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.90rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.what_method{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.what_method > ul{
	}
	.what_method > ul > li{
		display: block;
		position: relative;
		border-bottom: 1px solid #e4e4e5;
		cursor: pointer;
	}
	.what_method > ul > li > .method_title{
		display: block;
		position: relative;
		width: 100%;
		padding-top: 0.8rem;
		padding-bottom: 0.3rem;
	}
	.what_method > ul > li > .method_title > ul{
		display: inline-table;
		position: relative;
		width: 100%;
	}
	.what_method > ul > li > .method_title > ul > li{
		display: table-cell;
		vertical-align: middle;

		font-family: 'Noto Sans KR';
		font-size: 0.96rem;
		color: #3c3d3f;
		font-weight: 500;
		letter-spacing: -0.2px;
		line-height: 1.7;
	}
	.what_method > ul > li > .method_title > ul > li:nth-of-type(1){
		text-align: left;
		line-height: 1.5;
	}
	.what_method > ul > li > .method_title > ul > li:nth-of-type(2){
		width: 20px;
	}
	.what_method > ul > li > .method_title > ul > li > span.arrow{
	}
	.what_method > ul > li > .method_title > ul > li > span.arrow:after{
		position: absolute;
		top: 0;
		right: 0;
		content: '';
		width: 8px;						/*가로크기	*/
		height: 8px;					/*세로크기	*/
		margin-top: -6px;
		margin-right: 10px;
		border-width: 1px 1px 0 0;		/*두께	*/
		border-style: solid;
		border-color: #066CB0;
		transform: rotate(135deg);		/*시계방향 회줜	*/
		-webkit-transform: rotate(135deg);
		z-index: 20;
	}
	.what_method > ul > li.on > .method_title > ul > li > span.arrow:after{
		margin-top: -2px;
		transform: rotate(315deg);		/*시계방향 회줜	*/
		-webkit-transform: rotate(315deg);
	}

	.what_method > ul > li > .method_content{
		display: none;
		position: relative;
		width: 100%;
		background-color: rgba(6, 108, 176, 0.04);
		padding-top: 1.1rem;
		padding-bottom: 2.6rem;
		border-top: 1px solid #e4e4e5;
	}
	.what_method > ul > li > .method_content > ul{
		display: inline-table;
		position: relative;
		width: 100%;
	}
	.what_method > ul > li > .method_content > ul > li{
		display: table-cell;
		vertical-align: top;

		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.86rem;
		font-weight: 400;
		letter-spacing: 0.2px;
		line-height: 1.8;
	}
	.what_method > ul > li > .method_content > ul > li:nth-of-type(1){
		padding-left: 1.11rem;
		padding-right: 1.11rem;
		text-align: left;
	}
	.what_method > ul > li > .method_content > ul > li div{
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		line-height: 1.7;
	}
	.what_method .flowchart{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.what_method .flowchart > .box_blue{
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.33rem;
		
		width: 14.00rem;
		height: 5.00rem;
		background-color: #066CB0;
		text-align: center;

		color: #fff;
	}
	.what_method .flowchart > .box_red{
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.33rem;

		width: 14.00rem;
		height: 5.00rem;
		background-color: #DB1D3A;
		text-align: center;

		color: #fff;
	}
	.what_method .flowchart > .sign{
		font-family: 'Noto Sans KR';
		color: #000;
		font-size: 1.84rem;
		font-weight: 700;
	}





/*----------------------------------------------------
	what
	표준이란 무엇인가?		>	표준의 역사
----------------------------------------------------*/
	.what_history{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.what_history > ul{
		width: 100%;
		border-top:1px solid #ddd;
		clear: both;
	}
	.what_history > ul > li{
		float: left;
		padding-top: 1.11rem;
		padding-bottom: 1.11rem;
	}
	.what_history > ul > li:nth-of-type(1){
		width: 25%;
		border-top: 2px solid #066CB0;
	}
	.what_history > ul > li:nth-of-type(2){
		width: 75%;
		border: none;
	}
	.what_history > ul > li > .year{
		font-family: 'Roboto';
		font-size: 1.63rem;
		font-weight: 700;
		letter-spacing: -0.2px;
		line-height: 1.7;
		font-style: oblique;
		color: #DB1D3A;
	}
	.what_history > ul > li > .subject{
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		font-size: 1.02rem;
		font-weight: 700;
		letter-spacing: -0.5px;
		line-height: 1.7;
		color: #333;
	}
	.what_history > ul > li > .txt{
		font-family: 'Nanum Barun Gothic';
		font-size: 1.01rem;
		font-weight: 700;
		letter-spacing: -0.2px;
		line-height: 1.7;
		color: #333;
	}

	.what_history > ul > li > ul{
		width: 100%;
	}
	.what_history > ul > li > ul > li{
		list-style: inside url('/_elearning/images/common/mark_dotb.gif');
		padding-bottom: 0.56rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		line-height: 1.8;
		letter-spacing: 0.6px;
		font-size: 0.88rem;
		color: #666;
		text-indent: -0.81rem;
		margin-left: 1.81rem;
	}














/*----------------------------------------------------
	why	:	표준이 중요한 이유는?
	국제무역 촉진
----------------------------------------------------*/
	.why{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		padding-left: 1.0rem;
		padding-right: 1.0rem;
	}
	.why_box{
		display: block;
		position: relative;
		width: 100%;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.90rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.why_box > .title{
		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 1.08rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}





/*----------------------------------------------------
	why	:	표준이 중요한 이유는?
	혁신 확산
----------------------------------------------------*/
	.why_innovation{
	}
	.flowchart_innovation{
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;			/*줄바품*/
	}
	.flowchart_innovation > .box{
		display: flex;
		flex-direction: column;

		width: 11.00rem;
		text-align: center;
		color: #fff;
		padding-bottom: 1.00rem;
	}
	.flowchart_innovation > .box > .box_head{
		box-sizing: content-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 3.00rem;
		background-color: rgba(6, 108, 176, 0.9);
		border-radius: 0.33rem 0.33rem 0.00rem 0.00rem;
	}
	.flowchart_innovation > .box > .box_body{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		height: 7.00rem;
		border-left: 1px solid rgba(6, 108, 176, 0.18);
		border-right: 1px solid rgba(6, 108, 176, 0.18);
		border-bottom: 1px solid rgba(6, 108, 176, 0.18);
		padding: 0.56rem;
		border-radius: 0.00rem 0.00rem 0.33rem 0.33rem;

		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.flowchart_innovation > .sign{
		padding-left: 1.11rem;
		padding-right: 1.11rem;
		font-family: 'Noto Sans KR';
		color: #000;
		font-size: 1.84rem;
		font-weight: 700;
	}





/*----------------------------------------------------
	why	:	표준이 중요한 이유는?
	소비자 보호 강화
----------------------------------------------------*/
	.why_consumer{
	}






/*----------------------------------------------------
	why	:	표준이 중요한 이유는?
	정부정책 제공
----------------------------------------------------*/
	.why_policy{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.why_policy > ul{
	}
	.why_policy > ul > li{
		list-style-position: outside;
		list-style-type: decimal;
		padding-bottom: 2.00rem;
		margin-left: 2.00rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 1.22rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.why_policy > ul > li .content_box{
		margin-left: 0.22rem;
	}
	.why_policy > ul > li .content_box > .txt{
		padding-top: 0.12rem;
		padding-bottom: 0.52rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.90rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}




/*----------------------------------------------------
	who	:	표준은 누가 만드는 것인가?
	표준개발 프로세스
----------------------------------------------------*/
	.who_process{
		display: block;
		position: relative;
		width: 100%;
		margin-top: 80px;
		/*
		padding-left: 2.0rem;
		*/
	}
	.circle{
		height: 720px;
		width: 720px;
		z-index: 1;
		position: relative;
		margin: 0 auto;
	}
	.circle dl{
		z-index: 2;
		position: relative;
		top: -470px;
		left: 280px;
		list-style-type: none;
	}
	.circle dd{
		position: absolute;
		width: 180px;
		height: 180px;
		background-color: rgba(6, 108, 176, 0.92);
		border-radius: 50%;
		padding: 1px;
		overflow: hidden;
		display: table;
		padding-left: 0.96rem;
		padding-right: 0.96rem;
	}
	.circle dd:nth-of-type(1){
		width: 240px;
		height: 240px;
		padding-left: 1.40rem;
		padding-right: 1.40rem;
		margin-top: -28px;
		margin-left: -28px;
	}
	.circle dd div{
		/*
		width: 160px;
		*/
		text-align: center;
		display: block;
		margin: 0 auto;
		margin-top: 10px;
		line-height: 12px;
		font-size: 12px;
		vertical-align: middle;
		display: table-cell;
	}
	.circle dd div span.title{
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #fff;
		font-size: 1.48rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 2.4;
	}
	.circle dd div span.desc{
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #fff;
		font-size: 0.86rem;
		font-weight: 400;
		letter-spacing: -0.4px;
		line-height: 1.6;
	}





/*----------------------------------------------------
	who	:	표준은 누가 만드는 것인가?
	KSA의 역할
----------------------------------------------------*/
	.flowchart_role{
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;			/*줄바품*/
	}
	.flowchart_role > .box{
		display: flex;
		flex-direction: column;

		width: 12.00rem;
		text-align: center;
		color: #fff;
		padding-bottom: 1.00rem;
	}
	.flowchart_role > .box > .box_head{
		box-sizing: content-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 4.00rem;
		background-color: rgba(6, 108, 176, 0.9);
		border-radius: 0.33rem 0.33rem 0.00rem 0.00rem;
	}
	.flowchart_role > .box > .box_body{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		height: 8.00rem;
		border-left: 1px solid rgba(6, 108, 176, 0.18);
		border-right: 1px solid rgba(6, 108, 176, 0.18);
		border-bottom: 1px solid rgba(6, 108, 176, 0.18);
		padding: 0.56rem;
		border-radius: 0.00rem 0.00rem 0.33rem 0.33rem;

		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.flowchart_role > .sign{
		padding-left: 1.00rem;
		padding-right: 1.00rem;
		font-family: 'Noto Sans KR';
		color: #000;
		font-size: 1.84rem;
		font-weight: 700;
	}




/*----------------------------------------------------
	who	:	표준은 누가 만드는 것인가?
	사람들이 표준개발에 참여하는 이유
----------------------------------------------------*/
	.who_people{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.who_people > ul{
	}
	.who_people > ul > li{
		list-style-position: outside;
		list-style-type: decimal;
		padding-bottom: 2.00rem;
		margin-left: 2.00rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 1.22rem;
		font-weight: 700;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.who_people > ul > li .content_box{
		margin-left: 0.22rem;
	}
	.who_people > ul > li .content_box > div{
		padding-top: 0.12rem;
		padding-bottom: 0.52rem;

		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #45474a;
		font-size: 0.90rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.who_people > ul > li .content_box > .quote{
		font-style: oblique;
		font-size: 0.88rem;
		color: #1f2021;
	}
	.who_people > ul > li .content_box > .author{
		font-family: 'Roboto';
		font-weight: 600;
		background-image: url('/_elearning/images/common/mark_vbar.gif');
		background-repeat: no-repeat;
		background-position: left 0px top 4px;
		text-indent: 10px;

	}




/*----------------------------------------------------
	rate	:	교육 과정 평가
----------------------------------------------------*/
	.rate_course{
		display: block;
		position: relative;
		width: 100%;
		padding-left: 1.0rem;
	}
	.rate_course > ul{
		display: block;
		position: relative;
		width: 100%;
		margin-left: 0.22rem;
	}
	.rate_course > ul > li{
		padding-bottom: 1.92rem;
		list-style-position: outside;
		list-style-type: decimal;

		text-align: left;
		word-break: keep-all;
		font-family: 'Noto Sans KR';
		color: #323435;
		font-size: 0.92rem;
		font-weight: 500;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}
	.rate_course > ul > li > ul{
		display: block;
		position: relative;
		width: 100%;
		margin-left: 2.11rem;
	}
	.rate_course > ul > li > ul > li{
		padding-top: 0.92rem;
		padding-bottom: 0.32rem;
		text-align: left;
		word-break: keep-all;
		font-family: 'Nanum Barun Gothic';
		color: #323435;
		font-size: 0.84rem;
		font-weight: 400;
		letter-spacing: 0.4px;
		line-height: 1.8;
	}

	.rate_textarea{
		clear: both;
		display: block;
		position: relative;
		height: fit-content;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing: border-box;
		min-width:70px;
		background:#ffffff;
	}
	.rate_textarea > textarea{
		width: 100%;
		height: 100%;
		border: 1px solid #dcdad8;
		background: transparent;
		padding-top: 24px;

		line-height: 1.6;
		font-size: 0.84rem;
		color: #171614;
	}
	.rate_textarea > textarea:focus{
		border: 1px solid #0080ff;
	}
	.rate_textarea > label{
		position: absolute;
		left: 0%;
		top: 0;
		width: 100%;
		height: 100%;
		text-align: left;
		pointer-events: none;
	}
	.rate_textarea > label span{
		position: absolute;
		left: 10px;
		top: 18px;
		transition: all .2s ease-in;

		font-size: 0.88rem;
		color: #5f5c55;
		font-weight: 400;
		font-style: oblique;
	}
	.rate_textarea > label::after{
		content: '';
		position: absolute;
		left: 0;
		top: 1px;
		width: 0;
		height: 100%;
	}
	.rate_textarea textarea:focus + label span,
	.rate_textarea textarea:valid + label span{
		transform: translateY(-76%);
		font-size: 0.76rem;
		color: #0080ff;
		font-weight: 600;
	}
	.rate_textarea textarea:focus + label::after,
	.rate_textarea textarea:valid + label::after{
		width: 100%;
		transform: translateX(0);
	}













/*----------------------------------------------------
	rate	:	추가 정보
----------------------------------------------------*/
	.elearning_info_subject{
		clear: both;
		display: block;
		position: relative;
		padding-bottom: 10px;
		text-align: left;

		font-size: 21px;
		font-weight: bold;
		color: #000;
		line-height: 1.0;
		letter-spacing: -0.5px;
	}
	.elearning_info_subject div{
		display: inline;
		box-shadow: inset 0 -17px 0 rgba(6, 108, 176, 0.36);
		padding-left: 4px;
		padding-right: 4px;
		padding-bottom: 1px;
	}



	.elearning_info{
		clear: both;
		display: block;
		position: relative;
		padding-bottom: 40px;
	}
	.elearning_info > ul{
		display: inline-block;
		position: relative;
		width: 100%;
	}
	.elearning_info > ul > li{
		float: left;
		width: 24%;
		padding-right: 2%;
		padding-bottom: 3%;
		box-sizing: content-box;			/*	border-box : 테두리를 기준으로 크기를 정합니다.
											content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
											initial : 기본값으로 설정합니다.
											inherit : 부모 요소의 속성값을 상속받습니다.
										*/
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
	}
	.elearning_info > ul > li:nth-of-type(4n){
		padding-right: 0;
	}
	.elearning_info > ul > li > .box{
		clear: both;
		display: block;
		position: relative;
		text-align: center;
		border: 1px solid #efefef;
		background-color: #fff;
		cursor: pointer;

		-moz-box-shadow: 3px 3px 3px #a7a9ac;
		-webkit-box-shadow: 3px 3px 3px #a7a9ac;
		box-shadow: 3px 3px 3px #a7a9ac;
	}
	.elearning_info > ul > li > .box:hover{
		border: 1px solid #40b1fe;
		-moz-box-shadow: 3px 3px 3px #40b1fe;
		-webkit-box-shadow: 3px 3px 3px #40b1fe;
		box-shadow: 3px 3px 3px #40b1fe;
	}
	.elearning_info > ul > li > .box > .logo{
		position: relative;
		text-align: center;
		width: 100%;
		height: 150px;
	}
	.elearning_info > ul > li > .box > .logo > img{
		position: absolute;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border: none;
	}
	.elearning_info > ul > li > .box > .title{
		clear: both;
		display: block;
		position: relative;
		margin: 0 auto;
		height: 50px;
		width: 80%;
		border-top: 1px solid #e7e7e9;
	}
	.elearning_info > ul > li > .box > .title > div{
		width: 150px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		font-weight: normal;
		font-size: 13px;
		line-height: 1.2;
	}
	.elearning_info > ul > li > .box:hover > .title > div{
		text-shadow: -1px 1px 5px #40b1fe, 1px -1px 5px #40b1fe;
	}











/*----------------------------------------------------
	LOGIN
----------------------------------------------------*/
	.login_section{
		clear: both;
		display: block;
		position: relative;
		width: 70%;
		margin: 0 auto;
		border-top: 1px solid #e4e4e5;
		border-bottom: 1px solid #e4e4e5;
		border-left: 5px solid #066CB0;
		border-right: 5px solid #066CB0;
		padding-top: 50px;
		padding-bottom: 50px;
		/*
		padding-left: 50px;
		*/
	}
	.login_section > .login_box{
		clear: both;
		display: block;
		position: relative;
		width: 85%;
		margin: 0 auto;
	}
	.login_section > .login_box > ul{
		clear: both;
		display: inline-block;
	}
	.login_section > .login_box > ul > li{
		float: left;
		margin: 0;
		padding: 0;
	}
	.login_section > .login_box > ul > li:nth-of-type(1){
		width: 65%;
	}
	.login_section > .login_box > ul > li:nth-of-type(2){
		width: 30%;
		margin-left: 10px;
		margin-top: 5px;
	}
	.login_section > .login_box > ul > li > table{
		width: 100%;
		table-layout: fixed;
		border-collapse: separate;	/*	separate	: 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
										collapse	: 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
										initial		: 기본값으로 설정합니다.
										inherit		: 부모 요소의 속성값을 상속받습니다.
									*/
		border-spacing: 0;
	}
	.login_section > .login_box > ul > li > table > tbody{
	}
	.login_section > .login_box > ul > li > table > tbody > tr{
	}
	.login_section > .login_box > ul > li > table > tbody > tr > th{
		vertical-align: middle;

		font-family: 'Raleway';
		font-size: 16px;
		font-weight: normal;
		color: #231f20;
	}
	.login_section > .login_box > ul > li > table > tbody > tr > td{
		vertical-align: middle;
		padding-top: 5px;
		padding-bottom: 5px;
	}


/*--------------------------------------------------
	회원가입
--------------------------------------------------*/
	.member_tbl_frm{
		clear: both;
		display: block;
		position: relative;
	}
	.member_tbl_frm > table{
		width: 100%;
		table-layout: fixed;
		border-collapse: separate;	/*	separate	: 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
										collapse	: 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
										initial		: 기본값으로 설정합니다.
										inherit		: 부모 요소의 속성값을 상속받습니다.
									*/
		border-spacing: 0;
		border-top: 1px solid #487099;
	}
	.member_tbl_frm > table > thead > tr > th{
		text-align: left;
		vertical-align: middle;
		background-color: #a2aeb0;
		border-bottom: 1px solid #ecefef;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 7px;
		padding-right: 7px;
		line-height: 1.2;

		font-family: 'Noto Sans KR';
		font-size: 15px;
		color: #1f2021;
		font-weight: 600;
	}
	.member_tbl_frm > table > thead > tr > td{
		text-align: left;
		vertical-align: middle;
		background-color: #f1f1f1;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 15px;
		padding-right: 15px;
	}


	.member_tbl_frm > table > tbody > tr > th{
		text-align: left;
		vertical-align: middle;
		background-color: #d7dcdd;
		border-bottom: 1px solid #ecefef;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 7px;
		padding-right: 7px;
		line-height: 1.3;

		font-family: 'Nanum Barun Gothic';
		font-size: 13px;
		color: #323435;
		font-weight: 400;
	}
	.member_tbl_frm > table > tbody > tr > td{
		text-align: left;
		vertical-align: middle;
		border-bottom: 1px solid #ecefef;
		border-left: 1px solid #ecefef;
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 7px;
		padding-right: 7px;
		line-height: 1.4;

		font-family: 'Nanum Barun Gothic';
		font-size: 13px;
		color: #323435;
		font-weight: 300;
	}
	.member_tbl_frm > table > tbody > tr > td:first-child{
		border-left: 0px;
	}
	.member_tbl_frm > table > tbody > tr > td a.download{
		font-size: 13px;
		color: #447ca0;
		font-weight: 400;
	}

	.member_tbl_frm > table > tbody > tr > td > .contents_read{
		clear: both;
		display: block;
		position: relative;
		line-height: 1.6rem;
		padding: 1.0rem 1.0rem 1.0rem 1.0rem;
		word-break: break-word;
	}
	.member_tbl_frm > table > tbody > tr > td > .contents_read img{
		max-width: 99%;
		height: auto !important;
	}


	.member_tbl_frm > table > tbody > tr > td > ul.result{
		display: inline-block;
		position: relative;
		width: 100%;
	}
	.member_tbl_frm > table > tbody > tr > td > ul.result > li{
		float: left;
		width: 46.0%;
		padding-right: 8.0%;
		padding-bottom: 1.5%;
		box-sizing: content-box;			/*	border-box : 테두리를 기준으로 크기를 정합니다.
											content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
											initial : 기본값으로 설정합니다.
											inherit : 부모 요소의 속성값을 상속받습니다.
										*/
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
	}
	.member_tbl_frm > table > tbody > tr > td > ul.result > li:nth-of-type(2n){
		padding-right: 0;
	}









/*--------------------------------------------------
	이용자 동의 및 개인정보보호지침
--------------------------------------------------*/
	.privacy{
		clear: both;
		display: block;
		padding: 0;
		margin: 0;
	}
	.privacy > .privacy_box{
		margin: 0;
	}
	.privacy > .privacy_box > h5{
		font-size: 14px;
		color: #fff;
		background: #474747;
		margin: 0px 0px 8px 0px;
		padding: 3px 10px 4px 10px;
		/*
		height: 35px;
		text-indent: 10px;
		line-height: 25px;
		*/
	}
	.privacy > .privacy_box > .box_contents{
		overflow: hidden;
		padding: 5px 15px 15px 15px;
		border: 1px solid #dad9d7;
	}
	.privacy > .privacy_box > .box_contents > .contents_scroll{
		margin: 0;
		padding: 0;
	}
	.privacy > .privacy_box > .box_contents > .contents_scroll > .agreement{
		display: block;
		word-wrap: break-word;
		word-break: break-all;
	}
	.privacy > .privacy_box > .box_contents > .contents_scroll > .agreement > pre{
		display: block;
		width: 100%;
		font-size: 13px;
		color: #400000;
		white-space: pre-wrap;
		letter-spacing: -0.5px;
		line-height: 20px;
	}

	.agreement > ul{
		display: block;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 40px;
	}
	.agreement > ul > li{
		width: 100%;
		font-size: 13px;
		font-weight: bold;
		list-style-type: square;
		list-style-position: inside;
		padding-top: 20px;
		letter-spacing: -0.5px;
	}
	.agreement > ul > li > ul{
		width: 100%;
	}
	.agreement > ul > li > ul > li{
		width: 100%;
		font-size: 12px;
		font-weight: normal;
		list-style-type: none;
		list-style-position: inside;
		padding-left: 20px;
		letter-spacing: -0.5px;
	}
	.agreement > ul > li > ul > li > table{
		width: 100%;
		border-collapse: separate;
		border-spacing: 2px;
	}
	.agreement > ul > li > ul > li > table > thead > tr > th{
		font-size: 12px;
		font-weight: bold;
		background-color: #eff5ef;
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.agreement > ul > li > ul > li > table > tbody > tr > td{
		font-size: 12px;
		font-weight: normal;
		background-color: #f0f0f0;
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.agreement > ul > li > ul > li > table > tbody > tr > td > a{
		font-size: 12px;
		font-weight: normal;
		text-decoration: none;
	}



	.agreement > ul > li > ul > li > ul{
		width: 100%;
	}
	.agreement > ul > li > ul > li > ul > li{
		width: 100%;
		font-size: 12px;
		font-weight: normal;
		list-style-type: circle;
		list-style-position: inside;
		padding-left: 20px;
		letter-spacing: -0.5px;
	}
	.agreement > ul > li > ul > li > ul > li > ul{
		width: 100%;
	}
	.agreement > ul > li > ul > li > ul > li > ul > li{
		width: 100%;
		font-size: 12px;
		font-weight: normal;
		list-style-type: none;
		list-style-position: inside;
		padding-left: 20px;
		letter-spacing: -0.5px;
	}














/*--------------------------------------------------
	Reference
--------------------------------------------------
	width: calc(100vw - 160px);
	GRID	-------------------------------------------------------------------------------------------
	.container {
		display: grid;
		display: inline-grid;

		//그리드 형태 정의
		grid-template-columns: 200px 200px 500px;
		grid-template-columns: 1fr 1fr 1fr
		grid-template-columns: repeat(3, 1fr)
		grid-template-columns: 200px 1fr
		grid-template-columns: 100px 200px auto

		grid-template-rows: 200px 200px 500px;
		grid-template-rows: 1fr 1fr 1fr
		grid-template-rows: repeat(3, 1fr)
		grid-template-rows: 200px 1fr
		grid-template-rows: 100px 200px auto


		//repeat(반복횟수, 반복값)
		grid-template-columns: repeat(5, 1fr);
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr

		//minmax(100px, auto)
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, minmax(100px, auto));

		//auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.
		grid-template-columns: repeat(auto-fill, minmax(20%, auto));

		//간격 만들기
		row-gap: 10px;	//row의 간격을 10px로
		column-gap: 20px;	//column의 간격을 20px로
		gap: 10px 20px;		//row-gap: 10px; column-gap: 20px;
		gap: 20px;		//row-gap: 20px; column-gap: 20px;


		//그리드 형태를 자동으로 정의	grid-auto-columns	grid-auto-rows
		grid-auto-rows: minmax(100px, auto);
	}

	//각 셀의 영역 지정	grid-column-start	grid-column-end	grid-column	grid-row-start	grid-row-end	grid-row
	.item:nth-child(1) {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		//동일
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.item:nth-child(1) {
		grid-column: 1 / span 2;	// 1번 라인에서 2칸
		grid-row: 1 / span 3;		// 1번 라인에서 3칸
	}


	.container {
		grid-template-columns: 50px;
		grid-auto-columns: 1fr 2fr;
	}
	.item:nth-child(1) { grid-column: 2; }
	.item:nth-child(2) { grid-column: 3; }
	.item:nth-child(3) { grid-column: 4; }
	.item:nth-child(4) { grid-column: 5; }
	.item:nth-child(5) { grid-column: 6; }
	.item:nth-child(6) { grid-column: 7; }
	//end를 생략하면 그냥 한 칸임




	.container {
			grid-template-areas:
				"header header header"
				"   a    main    b   "
				"   .     .      .   "
				"footer footer footer";
	}

	//이름 값에 따옴표가 없는 것에 주의하세요
	.header { grid-area: header; }
	.sidebar-a { grid-area: a; }
	.main-content { grid-area: main; }
	.sidebar-b { grid-area: b; }
	.footer { grid-area: footer; }


	//dense는 기본적으로 빈 셀을 채우는 알고리즘이며, row와 column에 따라 기준이 달라집니다.
	.container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(25%, auto));
		grid-template-rows: repeat(5, minmax(50px,auto));
		grid-auto-flow: dense;
	}
	item:nth-child(2) { grid-column: auto / span 3; }
	item:nth-child(5) { grid-column: auto / span 3; }
	item:nth-child(7) { grid-column: auto / span 2; }



	.container {
		//세로 방향 정렬	align-items
		align-items: stretch;
		align-items: start;
		align-items: center;
		align-items: end;

		가로 방향 정렬	justify-items
		justify-items: stretch;
		justify-items: start;
		justify-items: center;
		justify-items: end;

		place-items: center start;


		//아이템 그룹 세로 정렬	align-content
		align-content: stretch;
		align-content: start;
		align-content: center;
		align-content: end;
		align-content: space-between;
		align-content: space-around;
		align-content: space-evenly;

		//아이템 그룹 가로 정렬	justify-content
		justify-content: stretch;
		justify-content: start;
		justify-content: center;
		justify-content: end;
		justify-content: space-between;
		justify-content: space-around;
		justify-content: space-evenly;

		place-content: space-between center;
	}

	
	.item {
		//개별 아이템 세로 정렬	align-self
		align-self: stretch;
		align-self: start;
		align-self: center;
		align-self: end;

		//개별 아이템 가로 정렬	justify-self
		justify-self: stretch;
		justify-self: start;
		justify-self: center;
		justify-self: end;

		place-self: start center;
	}

	//배치 순서	order
	.item:nth-child(1) { order: 3; } //A
	.item:nth-child(2) { order: 1; } //B
	.item:nth-child(3) { order: 2; } //C

	//z-index	z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다
	.item:nth-child(5) {
		z-index: 1;
		transform: scale(2);
	}










	FLEX	-------------------------------------------------------------------------------------------
	.container {//컨테이너에 적용하는 속성
		display: flex;
		display: inline-flex;

		//배치 방향 설정
		flex-direction: row;				→
		flex-direction: column;				↓
		flex-direction: row-reverse;		←
		flex-direction: column-reverse;		↑

		//줄넘김 처리 설정
		flex-wrap: nowrap;			//줄바품
		flex-wrap: wrap;
		flex-wrap: wrap-reverse;

		//flex-direction & flex-wrap을 한꺼번에 지정
		flex-flow: row wrap;



		//메인축 방향 정렬	justify(←→)
		justify-content: flex-start;
		justify-content: flex-end;
		justify-content: center;
		justify-content: space-between;
		justify-content: space-around;
		justify-content: space-evenly;


		//수직축 방향 정렬	align(↑↓)
		align-items: stretch;
		align-items: flex-start;
		align-items: flex-end;
		align-items: center;
		align-items: baseline;

		//여러 행 정렬
		flex-wrap: wrap;
		align-content: stretch;
		align-content: flex-start;
		align-content: flex-end;
		align-content: center;
		align-content: space-between;
		align-content: space-around;
		align-content: space-evenly;
	}

	.item {// 아이템에 적용하는 속성
		//유연한 박스의 기본 영역
		flex-basis: auto;
		flex-basis: 0;
		flex-basis: 50%;
		flex-basis: 300px;
		flex-basis: 10rem;
		flex-basis: content;

		//유연하게 늘리기
		flex-grow: 1;
		flex-grow: 0;	//기본값

		//유연하게 줄이기
		flex-basis: 150px;
		flex-shrink: 1;	//기본값

		//수직축으로 아이템 정렬
		align-self: auto;
		align-self: stretch;
		align-self: flex-start;
		align-self: flex-end;
		align-self: center;
		align-self: baseline;

		//배치 순서	order
		.item:nth-child(1) { order: 3; }	//A
		.item:nth-child(2) { order: 1; }	//B
		.item:nth-child(3) { order: 2; }	//C
			> BCA

		//z-index
		.item:nth-child(2) {
			z-index: 1;
			transform: scale(2);
		}
	}



	-------------------------------------------------------------------------------------------
	//box-sizing
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;

		border-box		: 테두리를 기준으로 크기를 정합니다.
		content-box		: 콘텐트 영역을 기준으로 크기를 정합니다.
		initial			: 기본값으로 설정합니다.
		inherit			: 부모 요소의 속성값을 상속받습니다.


	//border-collapse: separate;
		separate	: 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
		collapse	: 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
		initial		: 기본값으로 설정합니다.
		inherit		: 부모 요소의 속성값을 상속받습니다.



	//word-wrap:	[비아시아언어]박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.
		break-word	: 가로사이즈나 엘리먼트에 맞춰서 강제 줄바꿈 해준다.
		normal		: 기본값으로 줄바꿈을 안함.

	//word-break:	[아시아언어]단어의 분리를 어떻게 할 것인지 결정한다.
		break-all	: 글자단위 줄바꿈(특수문자를 제외하고 강제로 줄바꿈)
		break-word	: 특수문자를 포함하고 강제 줄바꿈 
		keep-all	: 단어단위 줄바꿈(영문)
		nowrap		: 줄바꿈 하지 않음

	//white-Space:	공백문자를 어떻게 할 것인지 설정.(띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등)
		normal		: 기본값. 연속 공백과 줄바꿈 등을 통합해서 표현
		pre			: normal과 반대. 원문 그대로 출력
		pre-wrap	: 마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다(pre-line)
		nowrap		: 스페이스를 막 눌러서 들어가는 연속공백은 통합되지만(normal의 효과) 줄바꿈은 인정함(pre의 효과)

	//text-overflow:	긴 문자열을 잘라주는 형태를 지정
		clip		: 엘리먼트의 테두리에 맞춰서 글자를 자른다.
		ellipsis	:	잘라지는 끝부분에 자동으로 '...'을 넣어준다. ie6 이상에서만 지원 가능, 파폭은 안됨
						width 값이 지정되어야 함 / 높이를 정해주거나 white-space-nowrap; 속성 사용해야 함. / <nobr> 사용



	//세로 가운데 정렬
		1. 인라인구조 가운데 정렬	: 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
			- 부모요소(인라인구조)	: text-align: center;line-height: (height값과 동일하게);

		2. 블록구조 가운데 정렬	: 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
			- 요소(블록구조)	: margin: 0 auto;width값 설정;line-height: (height값과 동일하게);

		3. 요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
			- 부모요소	: display: table;
			- 자식요소	: display: table-cell;text-align: center;vertical-align: middle;

		4. 절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
			- 부모요소	: position: relative;
			- 자식요소	: position: absolute;top: 50%;left: 50%;margin-top: -(자식 요소 높이값의 반);margin-left: -(자식 요소 가로값의 반);

		5. 만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
			- 부모요소	: position: relative;
			- 자식요소	: position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

		6. 절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
			- 부모요소	: position: relative;
			- 자식요소	: position: absolute;top: 0;left: 0;top: 0;right: 0;margin: auto;

		7. CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
			- 부모요소	: height 값 설정
			- 자식요소	: display: flex;justify-content: center;align-items: center;

		.wrapper {
			height: 100%;
			text-align: center;
		}
		.wrapper:before {
			content: "";
			display: inline-block;
			width: 1px;
			height: 100%;
			margin-right: 0;
			vertical-align: middle;
		}

	//gradient
		background: linear-gradient(180deg, #ccc, #fff);		//Standard syntax
		background: -webkit-linear-gradient(180deg, #ccc, #fff);	//For Safari 5.1 to 6.0
		background: -o-linear-gradient(180deg, #ccc, #fff);		//For Opera 11.1 to 12.0
		background: -moz-linear-gradient(180deg, #ccc, #fff);		//For Firefox 3.6 to 15
*/