/*----------------------------------------------------------------------------------------------------------------------------------
[LAYOUT GUIDE]
#wrapper	>	#container	>	(#regin)	>	#area	>	#section	>	#sector	>	#part	>	#box
<header>	:Defines a header for a document or a section
<nav>		:Defines a set of navigation links
<section>	:Defines a section in a document
<article>	:Defines an independent, self-contained content
<aside>		:Defines content aside from the content (like a sidebar)
<footer>	:Defines a footer for a document or a section
<details>	:Defines additional details that the user can open and close on demand
<summary>	:Defines a heading for the <details> element
GNB	(Global Navigation Bar)	:	사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바
LNB	(Local Navigation Bar)	:	현재 서비스 영역(Local)만 해당되는 네비게이션.서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바
SNB	(Side Navigation Bar)	:	메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바
FNB	(Foot Navigation Bar)	:	하단메뉴, 하단로고, 주소, 카피라이팅 영역

font-family: 'Montserrat';			font-weight: 400;	100	200	300	400	500	600	700	800	900
font-family: 'Noto Sans KR';		font-weight: 400;	100	200	300	400	500	600	700	800	900
font-family: 'Nanum Gothic';		font-weight: 400;				400			700	800
font-family: 'Nanum Barun Gothic';	font-weight: 400;		200	300	400			700
font-family: 'Roboto';				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: 'Open Sans';			font-weight: 400;			300	400	500	600	700	800
font-family: 'Montserrat', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', 'Raleway', 'Open Sans', 'Verdana', 'Sans-serif', 'Arial', 'Times New Roman', 'Trebuchet MS', 'Dotum', '돋움', 'Gulim', '굴림', 'AppleGothic';
font-style: oblique 14deg;

	word-break: keep-all;
	font-family: 'Montserrat';
	color: #171614;
	font-size: 0.84rem;
	font-weight: 400;
	letter-spacing: 0.2px;
	line-height: 1.24;

[scss to css]
https://velopert.com/		https://velog.io
https://www.sassmeister.com/
https://www.nextree.co.kr/p8468/
https://velog.io/@apro_xo/CSS-translate3d%EC%99%80-translateX-translateY%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://fe-j.tistory.com/entry/SCSS-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%9D%98%EB%AF%B8%ED%95%A9%EB%8B%88%EA%B9%8C
https://mine-it-record.tistory.com/593

[www.gadeokap-compe.kr]
main	#692282		rgba(105,34,130,0.5)
width	#fff		background-color: rgba(255,255,255,0.5);
green	#5CBAB3		rgba(92,186,179,0.5)		#24BEB6	rgba(36,190,182,0.1);
blue	#2394cd		rgba(35,148,205,0.5)
red		#e6228b		rgba(230,34,139,0.5)
#eb6ba3	rgb(235,107,163)
#e71787	rgb(231,23,135)
#b82689	712584
847d7b	e9e5d9	837f7e
eb6ba3	e71787	b82689	712584


winblue		#0078d7		rgba(0,120,215,0.5)
winred		#D70078		rgba(215,0,120,0.5)
wingreen	#00D75F		rgba(0,215,95,0.5)
winorange	#D75F00		rgba(215,95,0,0.5)
winblack	#202020		rgba(32,32,32,0.5)
wingray		#777777		rgba(119,119,119,0.5)



Titanium	HEX #878681 / RGB (135, 134, 129)
[Shades and Tints of #878681]
#050504		#0f0f0e		#191918		#232221		#2d2c2b		#373634		#41403e		#4b4a47		#555451
#5f5e5b		#696864		#73726e		#7d7c77		#878681		#91908b		#9a9995		#a4a39f		#adada9
#b7b6b3		#c0c0bd		#cacac7		#d4d3d1		#dddddb		#e7e6e5		#f0f0f0		#fafafa

[Platinum	Shades and Tints of #e5e4e2]	E5E4E2
#020202		#0c0c0b		#171614		#21201e		#2b2a27		#363430		#403e39		#4a4843		#55524c
#5f5c55		#69665f		#747068		#7e7a71		#88847b		#928d85		#9b978f		#a4a19a		#adaaa4
#b7b4ae		#c0bdb9		#c9c7c3		#d2d1cd		#dcdad8		#e5e4e2		#eeeeec		#f8f7f7


Titanium	color:	#797982;	rgb(121,121,130)		HEX #878681 / RGB (135, 134, 129)
Platinum	color:	#E5E4E2;	rgb(229,228,226)
sggreen		color:	#00c9b7;	rgb(0,201,183)		00c9b7
sgblue		color:	#1db4d3;	rgb(29,180,211)		00a1ba		0078d7	0078d7
sgred		color:	#eb2912; 	rgb(235,41,18)
Gold		HEX #FFD700 / RGB (255, 215, 0)

[Titanium	Shades and Tints of #797982]
#080808		#111112		#1a1a1c		#242427		#2d2d31		#37373b		#404045		#4a4a4f		#535359
#5d5d64		#66666e		#707078		#797982		#83838c		#8d8d95		#97979f		#a1a1a8		#acacb1
#b6b6bb		#c0c0c4		#cacace		#d4d4d7		#dedee1		#e9e9ea		#f3f3f4		#fdfdfd

----------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 1201px){	/*@media	1201px~	---------------------------------------*/
}	/*@media	1201px~	---------------------------------------*/
@media (max-width: 1200px) and (min-width: 801px){	/*@media	800px~1200px	---------------------------------------*/
}	/*@media	801px~1200px	---------------------------------------*/
@media (max-width: 800px){	/*@media	~799px	---------------------------------------*/
}	/*@media	~800px	---------------------------------------*/

@charset "utf-8";
/*----------------------------------------------------------------------
	COMMON
----------------------------------------------------------------------*/
/*ALIGN	*/
.wbka{word-break:keep-all;}
.wbba{word-break:break-all;}
table.wbba tr td{white-space:normal !important;}

.tac{text-align:center !important;}
.tal{text-align:left !important;}
.tar{text-align:right !important;}
.taj{text-align:justify !important;}

.vat{vertical-align:top !important;}
.vam{vertical-align:middle !important;}
.vab{vertical-align:bottom !important;}

.clear {
	clear: both;
	display: block;
	float: none;
	font-size: 0 !important;
	height: 0;
	line-height: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	padding: 0 !important;
	width: 100%;
}
/*.clear{clear:both;}*/

.cb{clear:both;}

.fl{float:left;}
.flw{float:left;width:100%;}
.fr{float:right;}
.fn{float:none;}
.oh{overflow:hidden;}
.disb{display:block !important;}
.disib{display:inline-block;}
.mauto{margin: 0 auto;}

/*
.un{display:inline-block; position:relative;}
.un:after{content:''; display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#555;}
*/

.hidden{position:absolute;overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:0;clip:rect(0 0 0 0);}
.hide{text-indent:-9999em;display:inline-block;position:absolute;left:-99999px;}
.hide_title{text-indent:-9999em;display:inline-block;position:absolute;left:-99999px;}
.none{display:none !important;}

.let{letter-spacing:-0.06em}
.let1{letter-spacing:-1px;}

.deco_uline{text-decoration: underline !important;}
.default_iframe{overflow: hidden;width: 100%;height: 100%;resize: none;border: 0px;padding: 0;margin: 0;}

/*IME MODE	*/
.imk{ime-mode:active;}				/*한글*/
.ime{ime-mode:inactive;}			/*영문*/
.imd{ime-mode:disabled;}			/*영문 Only*/


/*----------------------------------------------------------------------------------------------------------------------------------
	COMMON	BUTTON
	Cancel: #94B0B3;	Check: #00A9BD;		Copy: #004e53;		Delete: #281812;	Delete completely: #BF3131;		Excel: #217346;
	Find: #692282;		List: #324B4F;		Login: #692282;		Post: #eb2912;		Registration: #FF8A43;			Save: #ee3423;
	Search: #617C7E;	Title: #222831;
----------------------------------------------------------------------------------------------------------------------------------*/
button{
	--height: 40px;
	--font-family: 'Montserrat';
	--color: #fff;
	--font-size: 0.78rem;
	--font-weight: 400;
	--letter-spacing: 0px;
	--line-height: 1.3;

	--sgcolor-gold: #FFD700;
	--sgcolor-platinum: #E5E4E2;
	--sgcolor-titanium: #878681;
	--sgcolor-winblue: #0078d7;
	--sgcolor-wingreen: #00D75F;
	--sgcolor-winred: #D70078;
	--sgcolor-winorange: #D75F00;
	--sgcolor-winblack: #202020;
	--sgcolor-wingray: #777777;

	--sgcolor-sgblue: #1db4d3;
	--sgcolor-sggreen: #00c9b7;
	--sgcolor-sgred: #eb2912;

	--sgcolor-cancel: #94b0b3;
	--sgcolor-check: #00a9bd;
	--sgcolor-contents: #004e53;
	--sgcolor-copy: #004e53;
	--sgcolor-delete: #281812;
	--sgcolor-delete-completely: #bf3131;
	--sgcolor-excel: #217346;
	--sgcolor-find: #0078d7;
	--sgcolor-list: #324b4f;
	--sgcolor-login: #004e53;
	--sgcolor-post: #eb2912;
	--sgcolor-registration: #ff8a43;
	--sgcolor-save: #ee3423;
	--sgcolor-search: #617c7e;
	--sgcolor-title: #222831;
	--sgcolor-login_newtro: #531218;
	/*	gadeokap-compe.kr	*/
	--sgcolor-login_gadeokap: #692282;
}
/*------------------------------------------------------------------
<button type="button" onfocus="this.blur();" onclick="fnc_default('search');" class="flip-down flip-down_search"/>
	Search<div class="front">Search</div><div class="back">Search</div>
</button>
------------------------------------------------------------------*/
button.flip-down {
	height: var(--height);
	color: transparent;
	border: none;
	border-radius: 0;
	perspective: 500px;
	transition: 0.4s;

	padding: 0 17px 0 17px;
	word-break:nowrap;
	word-wrap:normal;
	font-family: var(--font-family);
	color: var(--color);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	letter-spacing: var(--letter-spacing);
	&:active{
		-webkit-transition: 300ms ease all;
		transition: 300ms ease all;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}
button.flip-down:hover {1
	color: transparent;
	background-color: transparent;
}
button.flip-down .front,
button.flip-down .back {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
button.flip-down .front {
	color: var(--color);
	background-color: var(--sgcolor-sgblue);
	transition: 0.4s;
	transform-origin: center center calc(var(--height) / -2);
}
button.flip-down .back {
	color: var(--color);
	background-color: var(--sgcolor-sggreen);
	transform: rotateX(88deg);
	transform-origin: center center calc(var(--height) / -2);
	transition: 0.4s;
}
button.flip-down:hover .front {
	transform: rotateX(-90deg);
}
button.flip-down:hover .back {
	transform: rotateX(0deg);
}
/*	button.flip-down	custom	*/
button.flip-down_cancel	.front {background-color: var(--sgcolor-cancel);}
button.flip-down_check	.front {background-color: var(--sgcolor-check);}
button.flip-down_copy	.front {background-color: var(--sgcolor-copy);}
button.flip-down_delete	.front {background-color: var(--sgcolor-delete);}
button.flip-down_delete-completely	.front {background-color: var(--sgcolor-delete-completely);}
button.flip-down_excel	.front {background-color: var(--sgcolor-excel);}
button.flip-down_find	.front {background-color: var(--sgcolor-find);}
button.flip-down_list	.front {background-color: var(--sgcolor-list);}
button.flip-down_login	.front {background-color: var(--sgcolor-login);}
button.flip-down_post	.front {background: var(--sgcolor-post);}
button.flip-down_registration	.front {background-color: var(--sgcolor-registration);}
button.flip-down_save	.front {background-color: var(--sgcolor-save);}
button.flip-down_search	.front {background-color: var(--sgcolor-search);}
button.flip-down_title	.front {background-color: var(--sgcolor-title);}

/*------------------------------------------------------------------
<span class="pl10 pr10 pt10 pb10">
	<button onclick="fnc_default('list');" onfocus="this.blur();" class="submit submit_list">List</button>
</span>
------------------------------------------------------------------*/
button.submit{
	background-color: var(--sgcolor-sgblue);
	border: none;
	color: var(--color);
	cursor: pointer;
	display: inline-block;
	outline: none;
	position: relative;
	padding: 12px 24px 12px 24px;

	font-family: var(--font-family);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	letter-spacing: var(--letter-spacing);
	line-height: var(--line-height);
	&:active{
		-webkit-transition: 300ms ease all;
		transition: 300ms ease all;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}
button.submit:before,
button.submit::after{
	border-color: transparent;
	-webkit-transition: all 0.25s;
	transition: all 0.25s;
	border-style: solid;
	border-width: 0;
	content: '';
	height: 24px;
	width: 24px;
	position: absolute;
}
button.submit:before{
	border-color: var(--sgcolor-sgblue);
	border-right-width: 2px;
	border-top-width: 2px;
	right: -5px;
	top: -5px;
}
button.submit:after{
	border-color: var(--sgcolor-sgblue);
	border-bottom-width: 2px;
	border-left-width: 2px;
	bottom: -5px;
	left: -5px;
}
button.submit:hover{
	background-color: var(--sgcolor-sgblue);
}
button.submit:hover:before,
button.submit:hover:after{
	height: 100%;
	width: 100%;
}
/*	button.submit_cancel	*/
button.submit_cancel{background-color: var(--sgcolor-cancel);}
button.submit_cancel:before{border-color: var(--sgcolor-cancel);}
button.submit_cancel:after{border-color: var(--sgcolor-cancel);}
button.submit_cancel:hover,button.submit_cancel.hover{background-color: var(--sgcolor-cancel);}
/*	button.submit_delete	*/
button.submit_delete{background-color: var(--sgcolor-delete);}
button.submit_delete:before{border-color: var(--sgcolor-delete);}
button.submit_delete:after{border-color: var(--sgcolor-delete);}
button.submit_delete:hover,button.submit_delete.hover{background-color: var(--sgcolor-delete);}
/*	button.submit_list	*/
button.submit_list{background-color: var(--sgcolor-list);}
button.submit_list:before{border-color: var(--sgcolor-list);}
button.submit_list:after{border-color: var(--sgcolor-list);}
button.submit_list:hover,button.submit_list.hover{background-color: var(--sgcolor-list);}
/*	button.submit_find	*/
button.submit_find{background-color: var(--sgcolor-find);}
button.submit_find:before{border-color: var(--sgcolor-find);}
button.submit_find:after{border-color: var(--sgcolor-find);}
button.submit_find:hover,button.submit_find.hover{background-color: var(--sgcolor-find);}
/*	button.submit_post	*/
button.submit_post{background-color: var(--sgcolor-post);}
button.submit_post:before{border-color: var(--sgcolor-post);}
button.submit_post:after{border-color: var(--sgcolor-post);}
button.submit_post:hover,button.submit_post.hover{background-color: var(--sgcolor-post);}
/*	button.submit_registration	*/
button.submit_registration{background-color: var(--sgcolor-registration);}
button.submit_registration:before{border-color: var(--sgcolor-registration);}
button.submit_registration:after{border-color: var(--sgcolor-registration);}
button.submit_registration:hover,button.submit_reg.hover{background-color: var(--sgcolor-registration);}
/*	button.submit_save	*/
button.submit_save{background-color: var(--sgcolor-save);}
button.submit_save:before{border-color: var(--sgcolor-save);}
button.submit_save:after{border-color: var(--sgcolor-save);}
button.submit_save:hover,button.submit_save.hover{background-color: var(--sgcolor-save);}
/*	button.submit_search	*/
button.submit_search{background-color: var(--sgcolor-search);}
button.submit_search:before{border-color: var(--sgcolor-search);}
button.submit_search:after{border-color: var(--sgcolor-search);}
button.submit_search:hover{background-color: var(--sgcolor-search);}
/*	button.submit_contents	*/
button.submit_contents{background-color: var(--sgcolor-contents);}
button.submit_contents:before{border-color: var(--sgcolor-contents);}
button.submit_contents:after{border-color: var(--sgcolor-contents);}
button.submit_contents:hover,button.submit_contents.hover{background-color: var(--sgcolor-contents);}

/*------------------------------------------------------------------
<button type="button" onfocus="this.blur();" onclick="fnc_default('search');" class="horizon horizon_search">Search</button>
------------------------------------------------------------------*/
button.horizon{
	background-color: var(--sgcolor-sgblue);
	border:none;
	position:relative;
	font-family: var(--font-family);
	color: var(--color);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	letter-spacing: var(--letter-spacing);
	transition: 400ms ease all;
	height: var(--height);
	padding: 0 15px 0 15px;
	&:active{
		-webkit-transition: 300ms ease all;
		transition: 300ms ease all;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}
button.horizon:hover{
	background-color: transparent;
	color: var(--sgcolor-sgblue);
}
button.horizon:before,
button.horizon:after{
	content:'';
	position: absolute;
	top: 0;
	right: 0;
	height: 1px;
	width: 0;
	background-color: var(--sgcolor-sgblue);
	transition: 400ms ease all;
}
button.horizon:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
}
button.horizon:hover:before,
button.horizon:hover:after{
	width:100%;
	transition: 600ms ease all;
}
/*	button.horizon_cancel	*/
button.horizon_cancel{background-color: var(--sgcolor-cancel);}
button.horizon_cancel:hover{color: var(--sgcolor-cancel);}
button.horizon_cancel:before,button.horizon_cancel:after{background-color: var(--sgcolor-cancel);}
/*	button.horizon_check	*/
button.horizon_check{background-color: var(--sgcolor-check);}
button.horizon_check:hover{color: var(--sgcolor-check);}
button.horizon_check:before,button.horizon_check:after{background-color: var(--sgcolor-check);}
/*	button.horizon_contents	*/
button.horizon_contents{background-color: var(--sgcolor-contents);}
button.horizon_contents:hover{color: var(--sgcolor-contents);}
button.horizon_contents:before,button.horizon_contents:after{background-color: var(--sgcolor-contents);}
/*	button.horizon_copy	*/
button.horizon_copy{background-color: var(--sgcolor-copy);}
button.horizon_copy:hover{color: var(--sgcolor-copy);}
button.horizon_copy:before,button.horizon_copy:after{background-color: var(--sgcolor-copy);}
/*	button.horizon_delete	*/
button.horizon_delete{background-color: var(--sgcolor-copy);}
button.horizon_delete:hover{color: var(--sgcolor-copy);}
button.horizon_delete:before,button.horizon_delete:after{background-color: var(--sgcolor-copy);}
/*	button.horizon_delete-completely	*/
button.horizon_delete-completely{background-color: var(--sgcolor-delete-completely);}
button.horizon_delete-completely:hover{color: var(--sgcolor-delete-completely);}
button.horizon_delete-completely:before,button.horizon_delete-completely:after{background-color: var(--sgcolor-delete-completely);}
/*	button.horizon_excel	*/
button.horizon_excel{background-color: var(--sgcolor-excel);}
button.horizon_excel:hover{color: var(--sgcolor-excel);}
button.horizon_excel:before,button.horizon_excel:after{background-color: var(--sgcolor-excel);}
/*	button.horizon_find	*/
button.horizon_find{background-color: var(--sgcolor-find);}
button.horizon_find:hover{color: var(--sgcolor-find);}
button.horizon_find:before,button.horizon_find:after{background-color: var(--sgcolor-find);}
/*	button.horizon_list	*/
button.horizon_list{background-color: var(--sgcolor-list);}
button.horizon_list:hover{color: var(--sgcolor-list);}
button.horizon_list:before,button.horizon_list:after{background-color: var(--sgcolor-list);}
/*	button.horizon_login	*/
button.horizon_login{background-color: var(--sgcolor-login);}
button.horizon_login:hover{color: var(--sgcolor-login);}
button.horizon_login:before,button.horizon_login:after{background-color: var(--sgcolor-login);}
/*	button.horizon_login_newtro	*/
button.horizon_login_newtro{background-color: var(--sgcolor-login_newtro);width: 100%;height: 120px;font-family: 'Raleway';font-size: 18px;}
button.horizon_login_newtro:hover{color: var(--sgcolor-login_newtro);}
button.horizon_login_newtro:before,button.horizon_login_newtro:after{background-color: var(--sgcolor-login_newtro);}
/*	button.horizon_login_gadeokap	*/
button.horizon_login_gadeokap{background-color: var(--sgcolor-login_gadeokap);width: 100%;height: 120px;font-family: 'Raleway';font-size: 18px;}
button.horizon_login_gadeokap:hover{color: var(--sgcolor-login_gadeokap);}
button.horizon_login_gadeokap:before,button.horizon_login_gadeokap:after{background-color: var(--sgcolor-login_gadeokap);}
/*	button.horizon_post	*/
button.horizon_post{background-color: var(--sgcolor-post);}
button.horizon_post:hover{color: var(--sgcolor-post);}
button.horizon_post:before,button.horizon_post:after{background-color: var(--sgcolor-post);}
/*	button.horizon_registration	*/
button.horizon_registration{background-color: var(--sgcolor-registration);}
button.horizon_registration:hover{color: var(--sgcolor-registration);}
button.horizon_registration:before,button.horizon_registration:after{background-color: var(--sgcolor-registration);}
/*	button.horizon_save	*/
button.horizon_save{background-color: var(--sgcolor-save);}
button.horizon_save:hover{color: var(--sgcolor-save);}
button.horizon_save:before,button.horizon_save:after{background-color: var(--sgcolor-save);}
/*	button.horizon_search	*/
button.horizon_search{background-color: var(--sgcolor-search);}
button.horizon_search:hover{color: var(--sgcolor-search);}
button.horizon_search:before,button.horizon_search:after{background-color: var(--sgcolor-search);}
/*	button.horizon_title	*/
button.horizon_title{background-color: var(--sgcolor-title);}
button.horizon_title:hover{color: var(--sgcolor-title);}
button.horizon_title:before,button.horizon_title:after{background-color: var(--sgcolor-title);}







/*------------------------------------------------------------------
<button type="button" onfocus="this.blur();" onclick="fnc_default('search');" class="doubleframe doubleframe_search">Search</button>
------------------------------------------------------------------*/
button.doubleframe {
	position: relative;
	z-index: 2;
	height: var(--height);
	padding: 0 20px 0 20px;
	background-color: var(--sgcolor-sgblue);
	border: 1px solid var(--sgcolor-sgblue);

	font-family: var(--font-family);
	color: var(--color);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	letter-spacing: var(--letter-spacing);
	line-height: var(--height);
	&:active{
		-webkit-transition: 300ms ease all;
		transition: 300ms ease all;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}
button.doubleframe:hover{
	border: none;
	background: transparent;
	color: var(--sgcolor-sgblue);
}
button.doubleframe:before,
button.doubleframe:after {
	position: absolute;
	content: '';
	width: 0%;
	height: 0%;
	border: 1px solid;
	z-index: -1;
	transition: all 0.4s ease;
}
button.doubleframe:before {
	top: 0;
	left: 0;
	border-bottom-color: transparent;
	border-right-color: transparent;
}
button.doubleframe:after{
	bottom: 0;
	right: 0;
	border-top-color: transparent;
	border-left-color: transparent;
}
button.doubleframe:hover:before,
button.doubleframe:hover:after {
	background-color: transparent;
	width: 102.5%;
	height: 104.5%;
	border: 1px solid var(--sgcolor-sgblue);
}
/*	button.doubleframe_cancel	*/
button.doubleframe_cancel {background-color: var(--sgcolor-cancel);border: 1px solid var(--sgcolor-cancel);}
button.doubleframe_cancel:hover{color: var(--sgcolor-cancel);}
button.doubleframe_cancel:hover:before,button.doubleframe_cancel:hover:after {border: 1px solid var(--sgcolor-cancel);}
/*	button.doubleframe_check	*/
button.doubleframe_check {background-color: var(--sgcolor-check);border: 1px solid var(--sgcolor-check);}
button.doubleframe_check:hover{color: var(--sgcolor-check);}
button.doubleframe_check:hover:before,button.doubleframe_check:hover:after {border: 1px solid var(--sgcolor-check);}
/*	button.doubleframe_contents	*/
button.doubleframe_contents {background-color: var(--sgcolor-contents);border: 1px solid var(--sgcolor-contents);}
button.doubleframe_contents:hover{color: var(--sgcolor-contents);}
button.doubleframe_contents:hover:before,button.doubleframe_contents:hover:after {border: 1px solid var(--sgcolor-contents);}
/*	button.doubleframe_copy	*/
button.doubleframe_copy {background-color: var(--sgcolor-copy);border: 1px solid var(--sgcolor-copy);}
button.doubleframe_copy:hover{color: var(--sgcolor-copy);}
button.doubleframe_copy:hover:before,button.doubleframe_copy:hover:after {border: 1px solid var(--sgcolor-copy);}
/*	button.doubleframe_delete	*/
button.doubleframe_delete {background-color: var(--sgcolor-delete);border: 1px solid var(--sgcolor-delete);}
button.doubleframe_delete:hover{color: var(--sgcolor-delete);}
button.doubleframe_delete:hover:before,button.doubleframe_delete:hover:after {border: 1px solid var(--sgcolor-delete);}
/*	button.doubleframe_delete-completely	*/
button.doubleframe_delete-completely {background-color: var(--sgcolor-delete-completely);border: 1px solid var(--sgcolor-delete-completely);}
button.doubleframe_delete-completely:hover{color: var(--sgcolor-delete-completely);}
button.doubleframe_delete-completely:hover:before,button.doubleframe_delete-completely:hover:after {border: 1px solid var(--sgcolor-delete-completely);}
/*	button.doubleframe_excel	*/
button.doubleframe_excel {background-color: var(--sgcolor-excel);border: 1px solid var(--sgcolor-excel);}
button.doubleframe_excel:hover{color: var(--sgcolor-excel);}
button.doubleframe_excel:hover:before,button.doubleframe_excel:hover:after {border: 1px solid var(--sgcolor-excel);}
/*	button.doubleframe_find	*/
button.doubleframe_find {background-color: var(--sgcolor-find);border: 1px solid var(--sgcolor-find);}
button.doubleframe_find:hover{color: var(--sgcolor-find);}
button.doubleframe_find:hover:before,button.doubleframe_find:hover:after {border: 1px solid var(--sgcolor-find);}
/*	button.doubleframe_list	*/
button.doubleframe_list {background-color: var(--sgcolor-list);border: 1px solid var(--sgcolor-list);}
button.doubleframe_list:hover{color: var(--sgcolor-list);}
button.doubleframe_list:hover:before,button.doubleframe_list:hover:after {border: 1px solid var(--sgcolor-list);}
/*	button.doubleframe_login	*/
button.doubleframe_login {background-color: var(--sgcolor-login);border: 1px solid var(--sgcolor-login);}
button.doubleframe_login:hover{color: var(--sgcolor-login);}
button.doubleframe_login:hover:before,button.doubleframe_login:hover:after {border: 1px solid var(--sgcolor-login);}
/*	button.doubleframe_post	*/
button.doubleframe_post {background-color: var(--sgcolor-post);border: 1px solid var(--sgcolor-post);}
button.doubleframe_post:hover{color: var(--sgcolor-post);}
button.doubleframe_post:hover:before,button.doubleframe_post:hover:after {border: 1px solid var(--sgcolor-post);}
/*	button.doubleframe_registration	*/
button.doubleframe_registration {background-color: var(--sgcolor-registration);border: 1px solid var(--sgcolor-registration);}
button.doubleframe_registration:hover{color: var(--sgcolor-registration);}
button.doubleframe_registration:hover:before,button.doubleframe_registration:hover:after {border: 1px solid var(--sgcolor-registration);}
/*	button.doubleframe_save	*/
button.doubleframe_save {background-color: var(--sgcolor-save);border: 1px solid var(--sgcolor-save);}
button.doubleframe_save:hover{color: var(--sgcolor-save);}
button.doubleframe_save:hover:before,button.doubleframe_save:hover:after {border: 1px solid var(--sgcolor-save);}
/*	button.doubleframe_search	*/
button.doubleframe_search {background-color: var(--sgcolor-search);border: 1px solid var(--sgcolor-search);}
button.doubleframe_search:hover{color: var(--sgcolor-search);}
button.doubleframe_search:hover:before,button.doubleframe_search:hover:after {border: 1px solid var(--sgcolor-search);}
/*	button.doubleframe_title	*/
button.doubleframe_title {background-color: var(--sgcolor-title);border: 1px solid var(--sgcolor-title);}
button.doubleframe_title:hover{color: var(--sgcolor-title);}
button.doubleframe_title:hover:before,button.doubleframe_title:hover:after {border: 1px solid var(--sgcolor-title);}







/*------------------------------------------------------------------
<button type="button" onclick="fnc_default('search');" class="cubic">Search</button>
------------------------------------------------------------------*/
button.cubic {
	height: var(--height);
	font-family: var(--font-family);
	color: var(--color);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	letter-spacing: var(--letter-spacing);

	padding: 0 17px 0 17px;
	background-color: var(--sgcolor-sgblue);	/*-------------	top*/
	border-top: 1px solid var(--sgcolor-sgblue);
	border-left: 1px solid var(--sgcolor-sgblue);
	border-right: 1px solid var(--sgcolor-platinum);
	border-bottom: 1px solid var(--sgcolor-platinum);
	transform-style: preserve-3d;
	transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
	&::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--sgcolor-sgblue);	/*-------------	middle*/
		transform: translate3d(3px, 3px, -10px);	/*-------------	middle*/
		border-top: 1px solid var(--sgcolor-sgblue);
		border-left: 1px solid var(--sgcolor-sgblue);
		border-right: 1px solid var(--sgcolor-platinum);
		border-bottom: 1px solid var(--sgcolor-platinum);
		box-shadow: 3px 3px 0 0px var(--sgcolor-sgblue);	/*-------------	bottom*/
		transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
	}
	&:hover {
		transform: translate(0, -3px);	/*X축으로 x만큼, Y축으로 y만큼 이동시킴*/
		background-color: var(--sgcolor-sggreen);	/*-------------	top*/
		border-top: 1px solid var(--sgcolor-sggreen);
		border-left: 1px solid var(--sgcolor-sggreen);
		&::before {
			background-color: var(--sgcolor-sggreen);	/*-------------	middle*/
			transform: translate3d(3px, 3px, -10px);	/*-------------	middle*/
			border-top: 1px solid var(--sgcolor-sggreen);
			border-left: 1px solid var(--sgcolor-sggreen);
			box-shadow: 3px 3px 0 0px var(--sgcolor-sggreen);	/*-------------	bottom*/
		}
	}
	&:active {
		transform: translate(0, 2px);	/*X축으로 x만큼, Y축으로 y만큼 이동시킴*/
		background-color: var(--sgcolor-sggreen);
		&::before {
			background-color: var(--sgcolor-sggreen);	/*-------------	middle*/
			transform: translate3d(1px, 1px, -10px);	/*-------------	middle*/
			box-shadow: 1px 1px 0 0px var(--sgcolor-sggreen);	/*-------------	bottom*/
		}
	}
}
/*	button.cubic_cancel	*/
button.cubic_cancel {background-color: var(--sgcolor-cancel);border-top: 1px solid var(--sgcolor-cancel);border-left: 1px solid var(--sgcolor-cancel);	&::before {background-color: var(--sgcolor-cancel);border-top: 1px solid var(--sgcolor-cancel);border-left: 1px solid var(--sgcolor-cancel);box-shadow: 3px 3px 0 0px var(--sgcolor-cancel);}}
/*	button.cubic_search	*/
button.cubic_search {background-color: var(--sgcolor-search);border-top: 1px solid var(--sgcolor-search);border-left: 1px solid var(--sgcolor-search);	&::before {background-color: var(--sgcolor-search);border-top: 1px solid var(--sgcolor-search);border-left: 1px solid var(--sgcolor-search);box-shadow: 3px 3px 0 0px var(--sgcolor-search);}}
/*	button.cubic_save	*/
button.cubic_save {background-color: var(--sgcolor-save);border-top: 1px solid var(--sgcolor-save);border-left: 1px solid var(--sgcolor-save);	&::before {background-color: var(--sgcolor-save);border-top: 1px solid var(--sgcolor-save);border-left: 1px solid var(--sgcolor-save);box-shadow: 3px 3px 0 0px var(--sgcolor-save);}}










/*------------------------------------------------------------------
FRAME(창틀)	BUTTON
<a class="crossframe crossframe_search" href="JavaScript:void(0);" onclick="fnc_default('search');">
	<span class="crossframe__outline crossframe__outline--tall">
		<span class="crossframe__line crossframe__line--tall"></span>
		<span class="crossframe__line crossframe__line--flat"></span>
	</span>
	<span class="crossframe__outline crossframe__outline--flat">
		<span class="crossframe__line crossframe__line--tall"></span>
		<span class="crossframe__line crossframe__line--flat"></span>
	</span>
	<span class="crossframe__solid"></span>
	<span class="crossframe__text">Mailbox Management</span>
</a>
------------------------------------------------------------------*/
.crossframe{
	margin-top: 0px;line-height: var(--line-height);display: inline-block;padding: 16px 24px 16px 24px;text-decoration: none;position: relative;font-family: var(--font-family);text-align: center;font-size: var(--font-size);letter-spacing: var(--letter-spacing);
	&:active{
		-webkit-transition: 300ms ease all;
		transition: 300ms ease all;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}
.crossframe__text{font-weight: var(--font-weight);transition: 300ms ease;position: relative;color: #eb2912;}
.crossframe:hover .crossframe__text{color: #fff;}
.crossframe__solid{position: absolute;top: 0;left: 0;margin: 10px;width: calc(100% - (5px * 4));height: calc(100% - (5px * 4));transform-origin: 50%;transform: scale(0.85);opacity: 0;transition: 500ms cubic-bezier(0.165, 0.84, 0.44, 1);background-color: #eb2912;}
.crossframe:hover .crossframe__solid{opacity: 1;transform: scale(1);}
.crossframe__outline{position: absolute;top: 0;left: 0;}
.crossframe__outline--tall{margin: 0 5px;width: calc(100% - (5px * 2));height: 100%;}
.crossframe__outline--flat{margin: 5px 0;height: calc(100% - (5px * 2));width: 100%;}
.crossframe__line {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.crossframe__line--tall:before, .crossframe__line--tall:after{height: 100%;width: 1px;top: 0;}
.crossframe:hover .crossframe__outline--flat .crossframe__line--tall:before, .crossframe:hover .crossframe__outline--flat .crossframe__line--tall:after{transform: scaleY(0);}
.crossframe:hover .crossframe__outline--tall .crossframe__line--tall:before, .crossframe:hover .crossframe__outline--tall .crossframe__line--tall:after{margin: 5px 0;height: calc(100% - (5px * 2));}
.crossframe__line--tall:before{left: 0;}
.crossframe__line--tall:after{right: 0;}
.crossframe__line--flat:before, .crossframe__line--flat:after{width: 100%;height: 1px;left: 0;}
.crossframe:hover .crossframe__outline--tall .crossframe__line--flat:before, .crossframe:hover .crossframe__outline--tall .crossframe__line--flat:after{transform: scaleX(0);}
.crossframe:hover .crossframe__outline--flat .crossframe__line--flat:before, .crossframe:hover .crossframe__outline--flat .crossframe__line--flat:after{margin: 0 5px;width: calc(100% - (5px * 2));}
.crossframe__line--flat:before {top: 0;}
.crossframe__line--flat:after{bottom: 0;}
.crossframe__line:before, .crossframe__line:after{content: '';display: block;position: absolute;transition: 800ms cubic-bezier(0.165, 0.84, 0.44, 1);	background-color: #eb2912;}
.crossframe:hover .crossframe__line:before, .crossframe:hover .crossframe__line:after{transition: 400ms cubic-bezier(0.165, 0.84, 0.44, 1);}
/*	crossframe_search	*/
.crossframe_search .crossframe__text{color: #617c7e;}
.crossframe_search .crossframe__solid{background-color: #617c7e;}
.crossframe_search .crossframe__line:before, .crossframe_search .crossframe__line:after{background-color: #617c7e;}












































/*----------------------------------------------------------------------
	CONTROLS
----------------------------------------------------------------------*/
/*INPUT*/
input.ctl_h40_w100_tal{height: 40px !important;width: 100% !important;font-size: 0.84rem !important;text-align: left !important;}
input.ctl_h40_w100_f13_tal{height: 40px !important;width: 100% !important;font-size: 13px !important;text-align: left !important;}

/*TEXTAREA*/
textarea.ctl_area_w100{width: 100% !important;font-size: 0.84rem !important;}
textarea.ctl_area_w100_f13{width: 100% !important;font-size: 13px !important;}

/*	button.ctl_horizon	*/
button.ctl_horizon{
	background-color:#4eb7cd;
	color:#fff;
	border:none;
	position:relative;
	font-family: 'Raleway';
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: -0.1px;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
	height: 40px;
	padding-left: 12px;
	padding-right: 12px;
}
button.ctl_horizon:hover{
	background-color:#fff;
	color:#4eb7cd;
}
button.ctl_horizon:before,
button.ctl_horizon:after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:1px;
	width:0;
	background-color: #4eb7cd;
	transition:400ms ease all;
}
button.ctl_horizon:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
}
button.ctl_horizon:hover:before,
button.ctl_horizon:hover:after{
	width:100%;
	transition:800ms ease all;
}
/*	button.ctl_horizon_title	*/
button.ctl_horizon_title{background-color:#222831;padding-left: 24px;padding-right: 24px;}
button.ctl_horizon_title:hover{color:#222831;}
button.ctl_horizon_title:before,button.ctl_horizon_title:after{background-color:#222831;}
/*	button.ctl_horizon_delete	*/
button.ctl_horizon_delete{background-color:#45566D;}
button.ctl_horizon_delete:hover{color:#45566D;}
button.ctl_horizon_delete:before,button.ctl_horizon_delete:after{background-color:#45566D;}
/*	button.ctl_horizon_deletecompletely	*/
button.ctl_horizon_deletecompletely{background-color:#BF3131;}
button.ctl_horizon_deletecompletely:hover{color:#BF3131;}
button.ctl_horizon_deletecompletely:before,button.ctl_horizon_deletecompletely:after{background-color:#BF3131;}
/*	button.ctl_horizon_save	*/
button.ctl_horizon_save{background-color:#E74646;}
button.ctl_horizon_save:hover{color:#E74646;}
button.ctl_horizon_save:before,button.ctl_horizon_save:after{background-color:#E74646;}
/*	button.ctl_horizon_excel	*/
button.ctl_horizon_excel{background-color:#217346;}
button.ctl_horizon_excel:hover{color:#217346;}
button.ctl_horizon_excel:before,button.ctl_horizon_excel:after{background-color:#217346;}
/*	button.ctl_horizon_search	*/
button.ctl_horizon_search{background-color:#A7ADB6;}
button.ctl_horizon_search:hover{color:#A7ADB6;}
button.ctl_horizon_search:before,button.ctl_horizon_search:after{background-color:#A7ADB6;}
/*	button.ctl_horizon_reg	*/
button.ctl_horizon_reg{background-color:#00c9b7;}
button.ctl_horizon_reg:hover{color:#00c9b7;}
button.ctl_horizon_reg:before,button.ctl_horizon_reg:after{background-color:#00c9b7;}
/*	button.ctl_horizon_list	*/
button.ctl_horizon_list{background-color:#6E7888;}
button.ctl_horizon_list:hover{color:#6E7888;}
button.ctl_horizon_list:before,button.ctl_horizon_list:after{background-color:#6E7888;}



/*	button.ctl_submit	*/
button.ctl_submit{
	background-color: #ff350a;
	border: none;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	outline: none;
	position: relative;
	padding: 12px 30px 12px 30px;
	font-family: 'Montserrat';
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: -0.0px;
	line-height: 1.0;
}
button.ctl_submit:before,
button:after{
	border-color: transparent;
	-webkit-transition: all 0.25s;
	transition: all 0.25s;
	border-style: solid;
	border-width: 0;
	content: '';
	height: 24px;
	width: 24px;
	position: absolute;
}
button.ctl_submit:before{
	border-color: #ff350a;
	border-right-width: 2px;
	border-top-width: 2px;
	right: -5px;
	top: -5px;
}
button.ctl_submit:after{
	border-color: #ff350a;
	border-bottom-width: 2px;
	border-left-width: 2px;
	bottom: -5px;
	left: -5px;
}
button.ctl_submit:hover,
button.ctl_submit.hover{
	background-color: #ff350a;
}
button.ctl_submit:hover:before,
button.ctl_submit.hover:before,
button.ctl_submit:hover:after,
button.ctl_submit.hover:after{
	height: 100%;
	width: 100%;
}
/*	button.ctl_submit_save	*/
button.ctl_submit_save{background-color: #ee3423;}
button.ctl_submit_save:before{border-color: #ee3423;}
button.ctl_submit_save:after{border-color: #ee3423;}
button.ctl_submit_save:hover,button.ctl_submit_save.hover{background-color: #ee3423;}
/*	button.ctl_submit_copy	*/
button.ctl_submit_copy{background-color: #004e53;}
button.ctl_submit_copy:before{border-color: #004e53;}
button.ctl_submit_copy:after{border-color: #004e53;}
button.ctl_submit_copy:hover,button.ctl_submit_copy.hover{background-color: #004e53;}



/*----------------------------------------------------------------
FRAME(창틀)	BUTTON
<a class="frame_ctl frame_ctl_item" href="JavaScript:void(0);" onclick="fnc_default('reg', '0', '<%=frame_num%>');eventCancel(event);">
	<span class="frame_ctl__outline frame_ctl__outline--tall"><span class="frame_ctl__line frame_ctl__line--tall"></span><span class="frame_ctl__line frame_ctl__line--flat"></span></span><span class="frame_ctl__outline frame_ctl__outline--flat"><span class="frame_ctl__line frame_ctl__line--tall"></span><span class="frame_ctl__line frame_ctl__line--flat"></span></span><span class="frame_ctl__solid"></span>
	<span class="frame_ctl__text">Item Registration</span>
</a>
----------------------------------------------------------------*/
.frame_ctl{margin-top: 0px;line-height: 1.26;display: inline-block;padding: 16px 20px 16px 20px;text-decoration: none;position: relative;
	font-family: 'Montserrat';text-align: center;font-size: 0.78rem;letter-spacing: 0;}
.frame_ctl__text{
	font-weight: 400;transition: 300ms ease;position: relative;
	color: #eb2912;}	/*------------------color*/
.frame_ctl:hover .frame_ctl__text{color: white;}
.frame_ctl__solid{
	position: absolute;top: 0;left: 0;margin: 10px;width: calc(100% - (5px * 4));height: calc(100% - (5px * 4));transform-origin: 50%;transform: scale(0.85);opacity: 0;transition: 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
	background-color: #eb2912;}	/*------------------color*/
.frame_ctl:hover .frame_ctl__solid{opacity: 1;transform: scale(1);}
.frame_ctl__outline{position: absolute;top: 0;left: 0;}
.frame_ctl__outline--tall{margin: 0 5px;width: calc(100% - (5px * 2));height: 100%;}
.frame_ctl__outline--flat{margin: 5px 0;height: calc(100% - (5px * 2));width: 100%;}
.frame_ctl__line {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.frame_ctl__line--tall:before, .frame_ctl__line--tall:after{height: 100%;width: 1px;top: 0;}
.frame_ctl:hover .frame_ctl__outline--flat .frame_ctl__line--tall:before, .frame_ctl:hover .frame_ctl__outline--flat .frame_ctl__line--tall:after{ transform: scaleY(0);}
.frame_ctl:hover .frame_ctl__outline--tall .frame_ctl__line--tall:before, .frame_ctl:hover .frame_ctl__outline--tall .frame_ctl__line--tall:after{margin: 5px 0;height: calc(100% - (5px * 2));}
.frame_ctl__line--tall:before{left: 0;}
.frame_ctl__line--tall:after{right: 0;}
.frame_ctl__line--flat:before, .frame_ctl__line--flat:after{width: 100%;height: 1px;left: 0;}
.frame_ctl:hover .frame_ctl__outline--tall .frame_ctl__line--flat:before, .frame_ctl:hover .frame_ctl__outline--tall .frame_ctl__line--flat:after{		transform: scaleX(0);}
.frame_ctl:hover .frame_ctl__outline--flat .frame_ctl__line--flat:before, .frame_ctl:hover .frame_ctl__outline--flat .frame_ctl__line--flat:after{margin: 0 5px;width: calc(100% - (5px * 2));}
.frame_ctl__line--flat:before {top: 0;}
.frame_ctl__line--flat:after{bottom: 0;}
.frame_ctl__line:before, .frame_ctl__line:after{
	content: '';display: block;position: absolute;transition: 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
	background-color: #eb2912;}	/*------------------color*/
.frame_ctl:hover .frame_ctl__line:before, .frame_ctl:hover .frame_ctl__line:after{transition: 400ms cubic-bezier(0.165, 0.84, 0.44, 1);}
/*	frame_ctl_item	----------------------------------------*/
.frame_ctl_item .frame_ctl__text{color: #00a1ba;}
.frame_ctl_item .frame_ctl__solid{background-color: #00a1ba;}
.frame_ctl_item .frame_ctl__line:before, .frame_ctl_item .frame_ctl__line:after{background-color: #00a1ba;}











/*--------------------------------------------------------------------------------
	button	horizon
--------------------------------------------------------------------------------*/
button.btn_horizon{
	background-color:#4eb7cd;
	color:#fff;
	border:none;
	position:relative;
	font-family: 'Raleway';
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: -0.1px;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
	height: 40px;
	padding-left: 12px;
	padding-right: 12px;
}
button.btn_horizon:hover{
	background-color:#fff;
	color:#4eb7cd;
}
button.btn_horizon:before,
button.btn_horizon:after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:1px;
	width:0;
	background-color: #4eb7cd;
	transition:400ms ease all;
}
button.btn_horizon:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
}
button.btn_horizon:hover:before,
button.btn_horizon:hover:after{
	width:100%;
	transition:800ms ease all;
}
/*	button.btn_horizon_search	*/
button.btn_horizon_search{background-color:#6490ac;padding-left: 10px;padding-right: 10px;}
button.btn_horizon_search:hover{color:#6490ac;}
button.btn_horizon_search:before,button.btn_horizon_search:after{background-color:#6490ac;}
/*	button.btn_horizon_reg	*/
button.btn_horizon_reg{background-color:#00A9BD;padding-left: 10px;padding-right: 10px;}
button.btn_horizon_reg:hover{color:#00A9BD;}
button.btn_horizon_reg:before,button.btn_horizon_reg:after{background-color:#00A9BD;}
/*	button.btn_horizon_addrto	*/
button.btn_horizon_addrto{background-color:#007BFF;}
button.btn_horizon_addrto:hover{color:#007BFF;}
button.btn_horizon_addrto:before,button.btn_horizon_addrto:after{background-color:#007BFF;}
/*	button.btn_horizon_addrcc	*/
button.btn_horizon_addrcc{background-color:#009349;}
button.btn_horizon_addrcc:hover{color:#009349;}
button.btn_horizon_addrcc:before,button.btn_horizon_addrcc:after{background-color:#009349;}
/*	button.btn_horizon_addrbcc	*/
button.btn_horizon_addrbcc{background-color:#497E91;}
button.btn_horizon_addrbcc:hover{color:#497E91;}
button.btn_horizon_addrbcc:before,button.btn_horizon_addrbcc:after{background-color:#497E91;}
/*	button.btn_horizon_post	*/
button.btn_horizon_post{background-color:#00a1ba;width: 200px;height: 58px;font-size: 0.88rem;}
button.btn_horizon_post:hover{color:#00a1ba;}
button.btn_horizon_post:before,button.btn_horizon_post:after{background-color:#00a1ba;}
/*	button.btn_horizon_title	*/
button.btn_horizon_title{background-color:#222831;padding-left: 24px;padding-right: 24px;}
button.btn_horizon_title:hover{color:#222831;}
button.btn_horizon_title:before,button.btn_horizon_title:after{background-color:#222831;}


















/*--------------------------------------------------------------------------------
	SG	MAIL
--------------------------------------------------------------------------------*/
/*INPUT*/
input.input_h40_w100_f13_tal{height: 40px !important;width: 100% !important;font-size: 13px !important;text-align: left !important;}
input.input_h40_w100_f14_tal{height: 40px !important;width: 100% !important;font-size: 14px !important;text-align: left !important;}
input.input_h40_w100_f14_tac{height: 40px !important;width: 100% !important;font-size: 14px !important;text-align: center !important;}
/*TEXTAREA*/
textarea.textarea_w100_f13{width: 100% !important;font-size: 13px !important;}





button.basic{
	background-color:#004e53;
	color:#fff;
	border:none;
	position:relative;
	font-family: 'Nanum Barun Gothic';
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.3px;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
	height: 40px;
	padding-left: 20px;
	padding-right: 20px;
}
button.basic:hover{
	background-color:#fff;
	color:#004e53;
}
button.basic:before,
button.basic:after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:1px;
	width:0;
	background-color: #004e53;
	transition:400ms ease all;
}
button.basic:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
}
button.basic:hover:before,
button.basic:hover:after{
	width:100%;
	transition:800ms ease all;
}

/*	button.basic_check	*/
button.basic_check{background-color:#00A9BD;}
button.basic_check:hover{color:#00A9BD;}
button.basic_check:before,button.basic_check:after{background-color: #00A9BD;}

/*	button.basic_login	*/
button.basic_login{background-color: #692282;width: 100%;height: 120px;font-family: 'Raleway';font-size: 18px;}
button.basic_login:hover{color: #692282;}
button.basic_login:before,button.basic_login:after{background-color: #692282;}

/*	button.find_pwd	*/
button.find_pwd{background-color: #692282;width: 100%;height: 56px;font-family: 'Montserrat';font-size: 14px;}
button.find_pwd:hover{color: #692282;}
button.find_pwd:before,button.find_pwd:after{background-color: #692282;}
/*	button.find_pwd_newtro	*/
button.find_pwd_newtro{background-color: #531218;width: 100%;height: 56px;font-family: 'Montserrat';font-size: 14px;}
button.find_pwd_newtro:hover{color: #531218;}
button.find_pwd_newtro:before,button.find_pwd_newtro:after{background-color: #531218;}















/*--------------------------------------------------
	COLOR DEFINITION
--------------------------------------------------*/
/*	code	*/
span.deco_sgred				{color: #eb2912 !important;}
input.deco_sgred			{color: #eb2912 !important;border-color: #eb2912 !important;}
textarea.deco_sgred			{color: #eb2912 !important;border-color: #eb2912 !important;}
span.deco_sgblue			{color: #1db4d3 !important;}
span.deco_sggreen			{color: #00c9b7 !important;}


span.deco_name				{color: #9DB2BF !important;}
input.deco_name				{color: #9DB2BF !important;border-color: #9DB2BF !important;}
textarea.deco_name			{color: #9DB2BF !important;border-color: #9DB2BF !important;}

span.deco_kname				{color: #212A3E !important;}
input.deco_kname			{color: #212A3E !important;border-color: #212A3E !important;}
textarea.deco_kname			{color: #212A3E !important;border-color: #212A3E !important;}
th.deco_kname				{color: #212A3E !important;}
a.deco_kname				{color: #212A3E !important;}

span.deco_ename				{color: #0766AD !important;}
input.deco_ename			{color: #0766AD !important;border-color: #0766AD !important;}
textarea.deco_ename			{color: #0766AD !important;border-color: #0766AD !important;}
th.deco_ename				{color: #0766AD !important;}
a.deco_ename				{color: #0766AD !important;}

span.deco_back				{color: #F05941 !important;}
input.deco_back				{color: #F05941 !important;border-color: #F05941 !important;}
textarea.deco_back			{color: #F05941 !important;border-color: #F05941 !important;}

span.deco_code				{color: #E74646 !important;}
input.deco_code				{color: #E74646 !important;border-color: #E74646 !important;}
th.deco_code				{color: #E74646 !important;}
a.deco_code					{color: #E74646 !important;}

span.deco_ref				{color: #83A2FF !important;}
input.deco_ref				{color: #83A2FF !important;border-color: #83A2FF !important;}
th.deco_ref					{color: #83A2FF !important;}
a.deco_ref					{color: #83A2FF !important;}

span.deco_order				{color: #FA7070 !important;}
input.deco_order			{color: #FA7070 !important;border-color: #FA7070 !important;}
th.deco_order				{color: #FA7070 !important;}
a.deco_order				{color: #FA7070 !important;}

span.deco_depth				{color: #609966 !important;}
input.deco_depth			{color: #609966 !important;border-color: #609966 !important;}

span.deco_level				{color: #2D9596 !important;}
input.deco_level			{color: #2D9596 !important;border-color: #2D9596 !important;}

span.deco_path				{color: #EC8F5E !important;}
input.deco_path				{color: #EC8F5E !important;border-color: #EC8F5E !important;}

span.deco_item				{color: #19A7CE !important;}
input.deco_item				{color: #19A7CE !important;border-color: #19A7CE !important;}

span.deco_desc				{color: #9DB2BF !important;}
input.deco_desc				{color: #9DB2BF !important;border-color: #9DB2BF !important;}
textarea.deco_desc			{color: #9DB2BF !important;border-color: #9DB2BF !important;}

span.deco_str				{color: #BDCDD6 !important;}
input.deco_str				{color: #BDCDD6 !important;border-color: #BDCDD6 !important;}
textarea.deco_str			{color: #BDCDD6 !important;border-color: #BDCDD6 !important;}

span.deco_txt				{color: #C8B6A6 !important;}
input.deco_txt				{color: #C8B6A6 !important;border-color: #C8B6A6 !important;}
textarea.deco_txt			{color: #C8B6A6 !important;border-color: #C8B6A6 !important;}

/*	language	*/

span.deco_lang				{color: #457F8B !important;}
input.deco_lang				{color: #457F8B !important;border-color: #457F8B !important;}
textarea.deco_lang			{color: #457F8B !important;border-color: #457F8B !important;}

span.deco_korean			{color: #2F4858 !important;}
input.deco_korean			{color: #2F4858 !important;border-color: #2F4858 !important;}
textarea.deco_korean		{color: #2F4858 !important;border-color: #2F4858 !important;}

span.deco_english			{color: #0066A2 !important;}
input.deco_english			{color: #0066A2 !important;border-color: #0066A2 !important;}
textarea.deco_english		{color: #0066A2 !important;border-color: #0066A2 !important;}

span.deco_japan				{color: #006A7C !important;}
input.deco_japan			{color: #006A7C !important;border-color: #006A7C !important;}
textarea.deco_japan			{color: #006A7C !important;border-color: #006A7C !important;}




sup.required				{color: #ef4024 !important;font-weight: bold !important;font-size: 13px !important;font-family: 'Roboto' !important;}
sup.optional				{color: #58a9fa !important;font-weight: bold !important;font-size: 13px !important;font-family: 'Roboto' !important;}

span.bold					{font-weight: 700 !important;}
span.lighter				{font-weight: 300 !important;}
span.emphasis				{font-weight: 700 !important;}
span.deco_grade_family		{color: #0188cc !important;}
span.deco_wowpress_black	{color: #313040 !important;}
span.necessary				{color: #ef4024 !important;font-weight: bold !important;font-size: 11px !important;}

span.deco_black				{color: #000000 !important;}
span.deco_blue				{color: #0000ff !important;}
span.deco_blueviolet		{color: #8a2be2 !important;}
span.deco_brown				{color: #a52a2a !important;}
span.deco_burlywood			{color: #deb887 !important;}
span.deco_cadetblue			{color: #5f9ea0 !important;}
span.deco_chocolate			{color: #d2691e !important;}
span.deco_coral				{color: #ff7f50 !important;}
span.deco_cornflowerblue	{color: #6495ed !important;}
span.deco_crimson			{color: #dc143c !important;}
span.deco_darkblue			{color: #00008b !important;}
span.deco_darkcyan			{color: #008b8b !important;}
span.deco_darkgoldenrod		{color: #b8860b !important;}
span.deco_darkgray			{color: #a9a9a9 !important;}
span.deco_darkgreen			{color: #006400 !important;}
span.deco_darkkhaki			{color: #bdb76b !important;}
span.deco_darkmagenta		{color: #8b008b !important;}
span.deco_darkolivegreen	{color: #556b2f !important;}
span.deco_darkorange		{color: #ff8c00 !important;}
span.deco_darkorchid		{color: #9932cc !important;}
span.deco_darkred			{color: #8b0000 !important;}
span.deco_darkseagreen		{color: #8fbc8f !important;}
span.deco_darkslateblue		{color: #483d8b !important;}
span.deco_darkslategray		{color: #2f4f4f !important;}
span.deco_darkturquoise		{color: #00ced1 !important;}
span.deco_darkviolet		{color: #9400d3 !important;}
span.deco_deepskyblue		{color: #00bfff !important;}
span.deco_deeppink			{color: #ff1493 !important;}
span.deco_dimgray			{color: #696969 !important;}
span.deco_dodgerblue		{color: #1e90ff !important;}
span.deco_firebrick			{color: #b22222 !important;}
span.deco_forestgreen		{color: #228b22 !important;}
span.deco_gainsboro			{color: #dcdcdc !important;}
span.deco_gold				{color: #ffd700 !important;}
span.deco_goldenrod			{color: #daa520 !important;}
span.deco_green				{color: #008000 !important;}
span.deco_gray				{color: #808080 !important;}
span.deco_indianred			{color: #cd5c5c !important;}
span.deco_indigo			{color: #4b0082 !important;}
span.deco_lightblue			{color: #add8e6 !important;}
span.deco_lightcoral		{color: #f08080 !important;}
span.deco_lightgrey			{color: #d3d3d3 !important;}
span.deco_lightseagreen		{color: #20b2aa !important;}
span.deco_lightskyblue		{color: #87cefa !important;}
span.deco_lightsteelblue	{color: #b0c4de !important;}
span.deco_limegreen			{color: #32cd32 !important;}
span.deco_maroon			{color: #800000 !important;}
span.deco_mediumblue		{color: #0000cd !important;}
span.deco_mediumorchid		{color: #ba55d3 !important;}
span.deco_mediumpurple		{color: #9370db !important;}
span.deco_mediumseagreen	{color: #3cb371 !important;}
span.deco_mediumvioletred	{color: #c71585 !important;}
span.deco_midnightblue		{color: #191970 !important;}
span.deco_navy				{color: #000080 !important;}
span.deco_olive				{color: #808000 !important;}
span.deco_olivedrab			{color: #6b8e23 !important;}
span.deco_orange			{color: #ffa500 !important;}
span.deco_orangered			{color: #ff4500 !important;}
span.deco_orchid			{color: #da70d6 !important;}
span.deco_palevioletred		{color: #db7093 !important;}
span.deco_peru				{color: #cd853f !important;}
span.deco_purple			{color: #800080 !important;}
span.deco_red				{color: #ef4024 !important;}
span.deco_rosybrown			{color: #bc8f8f !important;}
span.deco_royalblue			{color: #4169e1 !important;}
span.deco_saddlebrown		{color: #8b4513 !important;}
span.deco_salmon			{color: #fa8072 !important;}
span.deco_seagreen			{color: #2e8b57 !important;}
span.deco_sienna			{color: #a0522d !important;}
span.deco_silver			{color: #c0c0c0 !important;}
span.deco_skyblue			{color: #87ceeb !important;}
span.deco_slategray			{color: #708090 !important;}
span.deco_steelblue			{color: #4682b4 !important;}
span.deco_tan				{color: #d2b48c !important;}
span.deco_teal				{color: #008080 !important;}
span.deco_tomato			{color: #ff6347 !important;}
span.deco_violet			{color: #ee82ee !important;}
span.deco_yellow			{color: #ffff00 !important;}



/*	custom	*/
input.s_key					{color: #004080 !important;border-color: #004080 !important;}
input.deco_default			{color: #333 !important;border-color: #cfcfcf !important;}

input.deco_black			{color: #000000 !important;border-color: #000000 !important;}
input.deco_blue				{color: #0000ff !important;border-color: #0000ff !important;}
input.deco_coral			{color: #ff7f50 !important;border-color: #ff7f50 !important;}
input.deco_crimson			{color: #dc143c !important;border-color: #dc143c !important;}
input.deco_darkorange		{color: #ff8c00 !important;border-color: #ff8c00 !important;}
input.deco_darkseagreen		{color: #8fbc8f !important;border-color: #8fbc8f !important;}
input.deco_darkcyan			{color: #008b8b !important;border-color: #008b8b !important;}
input.deco_dodgerblue		{color: #1e90ff !important;border-color: #1e90ff !important;}
input.deco_green			{color: #008000 !important;border-color: #008000 !important;}
input.deco_gray				{color: #808080 !important;border-color: #808080 !important;}
input.deco_midnightblue		{color: #191970 !important;border-color: #191970 !important;}
input.deco_navy				{color: #000080 !important;border-color: #000080 !important;}
input.deco_orange			{color: #ffa500 !important;border-color: #ffa500 !important;}
input.deco_orangered		{color: #ff4500 !important;border-color: #ff4500 !important;}
input.deco_royalblue		{color: #4169e1 !important;border-color: #4169e1 !important;}
input.deco_red				{color: #ef4024 !important;border-color: #ef4024 !important;}
input.deco_silver			{color: #c0c0c0 !important;border-color: #c0c0c0 !important;}
input.deco_steelblue		{color: #4682b4 !important;border-color: #4682b4 !important;}
input.deco_teal				{color: #008080 !important;border-color: #008080 !important;}
input.deco_violet			{color: #ee82ee !important;border-color: #ee82ee !important;}
input.deco_yellow			{color: #ffff00 !important;border-color: #ffff00 !important;}





input.input_h32_w100_f13_tac	{height: 32px !important;width: 100% !important;font-size: 13px !important;text-align: center !important;}
input.input_h30_w100_f12_tal	{height: 30px !important;width: 100% !important;font-size: 12px !important;text-align: left !important;}






input.deco_h50_w100_f16_tal	{color: #231f20 !important;border-color: #e7e7e9 !important;height: 50px !important;width: 100% !important;font-size: 16px !important;text-align: left !important;}
input.deco_h40_w100_f14_tal	{height: 40px !important;width: 100% !important;font-size: 14px !important;color: #333 !important;border-color: #d9d9d9 !important;text-align: left !important;}
input.deco_h50_w100_f13_tal	{color: #333 !important;border-color: #d9d9d9 !important;height: 50px !important;width: 100% !important;font-size: 13px !important;text-align: left !important;}
input.deco_h50_w100_f15_tal	{color: #333 !important;border-color: #d9d9d9 !important;height: 50px !important;width: 100% !important;font-size: 15px !important;text-align: left !important;}
input.deco_h50_w100_f15_tac	{color: #333 !important;border-color: #d9d9d9 !important;height: 50px !important;width: 100% !important;font-size: 15px !important;text-align: center !important;padding: 0px !important;}
input.deco_h50_w100_f15_tal_b0	{color: #333 !important;height: 50px !important;line-height: 50px !important;width: 100% !important;font-size: 15px !important;text-align: left !important;border: none !important;padding: 0 !important;}
input.deco_h40_w100_f15_tal_b0	{color: #333 !important;height: 40px !important;line-height: 40px !important;width: 100% !important;font-size: 15px !important;text-align: left !important;border: none !important;padding: 0 !important;}

input.deco_h60_w100_f16_tal	{color: #333 !important;border-color: #d9d9d9 !important;height: 60px !important;width: 100% !important;font-size: 16px !important;text-align: left !important;}


input.deco_h50				{color: #333 !important;border-color: #d9d9d9 !important;font-size: 15px !important;height: 50px !important;}
input.deco_h50_w100			{color: #333 !important;border-color: #d9d9d9 !important;font-size: 15px !important;height: 50px !important;width: 100% !important;}
input.deco_h50_w100_f13		{color: #333 !important;border-color: #d9d9d9 !important;font-size: 13px !important;height: 50px !important;width: 100% !important;}
input.deco_h50_w100_f14		{color: #333 !important;border-color: #d9d9d9 !important;font-size: 14px !important;height: 50px !important;width: 100% !important;}
input.deco_h50_w100_f15		{color: #333 !important;border-color: #d9d9d9 !important;font-size: 15px !important;height: 50px !important;width: 100% !important;}
input.deco_h40_w100			{color: #333 !important;border-color: #d9d9d9 !important;font-size: 14px !important;height: 40px !important;width: 100% !important;}
input.deco_h30				{color: #3f3f3f !important;border-color: #d9d9d9 !important;height: 30px !important;}
input.deco_front			{color: #3f3f3f !important;border-color: #d9d9d9 !important;}
input.deco_front_w100		{color: #3f3f3f !important;border-color: #d9d9d9 !important;width: 100% !important;}
input.deco_search			{color: #3f3f3f !important;border-color: #d9d9d9 !important;height: 35px !important;}
input.emphasis				{font-weight: bold !important;}
input.readonly				{background-color: #f5f5f5 !important;}
input.readonly_grey			{background-color: #999999 !important;}
input.deco_login			{color: #3f3f3f !important;border-color: #d9d9d9 !important;height: 50px !important;}


input.calendar_h40_w130_f13{
	height: 40px;
	width: 130px;
	border-color: #fd5515;
	text-align: left;
	padding-left: 9px;
	padding-top: 0;
	padding-bottom: 0;
	cursor: pointer;
	background-image: url('/backoffice/sgcontrols/sgimages/common/date.png');
	background-repeat: no-repeat;
	background-position: 95px, 0px;

	font-size: 13px;
	color: #fd5515;
	font-weight: 300;
}
input.calendar_h40_w120_f13{
	height: 40px;
	width: 120px;
	border-color: #fd5515;
	text-align: left;
	padding-left: 9px;
	padding-top: 0;
	padding-bottom: 0;
	cursor: pointer;
	background-image: url('/backoffice/sgcontrols/sgimages/common/date.png');
	background-repeat: no-repeat;
	background-position: 85px, 0px;

	font-size: 13px;
	color: #fd5515;
	font-weight: 300;
}
input.calendar_h40_w120_f14{
	height: 40px;
	width: 120px;
	font-size: 14px;
	text-align: left;
	padding-left: 9px;
	padding-top: 0;
	padding-bottom: 0;
	cursor: pointer;
	background-image: url('/backoffice/sgcontrols/sgimages/common/date.png');
	background-repeat: no-repeat;
	background-position: 91px, 0px;
}
input.calendar_h50_w130_f15{
	height: 50px;
	width: 130px;
	font-size: 15px;
	text-align: left;
	padding-left: 10px;
	padding-top: 0;
	padding-bottom: 0;
	cursor: pointer;
	background-image: url('/backoffice/sgcontrols/sgimages/common/date.png');
	background-repeat: no-repeat;
	background-position: 100px, top;
	/*
	background-position-x: right 10px;
	background-position-y: top 15px;
	*/
}
input.calendar_h50_w100_f15{
	height: 50px;
	width: 100%;
	font-size: 15px;
	text-align: left;
	padding-left: 10px;
	padding-top: 0;
	padding-bottom: 0;
	cursor: pointer;
	background-image: url('/backoffice/sgcontrols/sgimages/common/date.png');
	background-repeat: no-repeat;
	background-position-x: right 10px;
	background-position-y: top 15px;
}
input.calendar{
	width: 150px;
	height: 35px;
	text-align: left;
	cursor: pointer;
	background-image: url('/backoffice/sgcontrols/sgimages/common/date.png');
	background-repeat: no-repeat;
	background-position: 120px, 6px;
}


textarea.deco_black			{color: #000000 !important;border-color: #000000 !important;}
textarea.deco_blue			{color: #0000ff !important;border-color: #0000ff !important;}
textarea.deco_dodgerblue	{color: #1e90ff !important;border-color: #1e90ff !important;}
textarea.deco_green			{color: #008000 !important;border-color: #008000 !important;}
textarea.deco_gray			{color: #808080 !important;border-color: #808080 !important;}
textarea.deco_navy			{color: #000080 !important;border-color: #000080 !important;}
textarea.deco_orange		{color: #ffa500 !important;border-color: #ffa500 !important;}
textarea.deco_red			{color: #ef4024 !important;border-color: #ef4024 !important;}
textarea.deco_royalblue		{color: #4169e1 !important;border-color: #4169e1 !important;}
textarea.deco_steelblue		{color: #4682b4 !important;border-color: #4682b4 !important;}
textarea.deco_teal			{color: #008080 !important;border-color: #008080 !important;}
textarea.deco_violet		{color: #ee82ee !important;border-color: #ee82ee !important;}
textarea.deco_yellow		{color: #ffff00 !important;border-color: #ffff00 !important;}


textarea.deco_w100_f15		{color: #3f3f3f !important;border-color: #d9d9d9 !important;width: 100% !important;font-size: 15px !important;}
textarea.deco_w100			{color: #3f3f3f !important;border-color: #d9d9d9 !important;width: 100% !important;}
textarea.deco_front			{color: #3f3f3f !important;border-color: #d9d9d9 !important;}
textarea.deco_front_w100	{color: #3f3f3f !important;border-color: #d9d9d9 !important;width: 100% !important;}
textarea.emphasis			{font-weight: bold !important;}



button.deco_black			{background-color: #000000 !important;}
button.deco_blue			{background-color: #0000ff !important;}
button.deco_darkcyan		{background-color: #008b8b !important;}
button.deco_darkgray		{background-color: #a9a9a9 !important;}
button.deco_dodgerblue		{background-color: #1e90ff !important;}
button.deco_gray			{background-color: #808080 !important;}
button.deco_green			{background-color: #008000 !important;}
button.deco_navy			{background-color: #000080 !important;}
button.deco_orange			{background-color: #ffa500 !important;}
button.deco_red				{background-color: #ef4024 !important;}
button.deco_royalblue		{background-color: #4169e1 !important;}
button.deco_silver			{background-color: #c0c0c0 !important;}
button.deco_tomato			{background-color: #ff6347 !important;}
button.deco_violet			{background-color: #ee82ee !important;}
button.deco_yellow			{background-color: #ffff00 !important;}















label.deco_black			{color: #000000 !important;}
label.deco_blue				{color: #0000ff !important;}
label.deco_green			{color: #008000 !important;}
label.deco_gray				{color: #808080 !important;}
label.deco_navy				{color: #000080 !important;}
label.deco_orange			{color: #ffa500 !important;}
label.deco_red				{color: #ef4024 !important;}
label.deco_violet			{color: #ee82ee !important;}
label.deco_yellow			{color: #ffff00 !important;}




/*--------------------------------------------------
	COMMON
--------------------------------------------------*/
/*FONT SIZE PIXEL	*/
.fz13{font-size:13px !important;}
.fz14{font-size:14px !important;}
.fz15{font-size:15px !important;}
.fz15 *{ font-size:15px !important;}
.fz16{font-size:16px !important;}
.fz17{font-size:17px !important;}
.fz19{font-size:19px !important;}
.fz20{font-size:20px !important;}
.fz21{font-size:21px !important;}
.fz24{font-size:24px !important;}

.fs6{font-size:6px !important;}
.fs7{font-size:7px !important;}
.fs8{font-size:8px !important;}
.fs9{font-size:9px !important;}
.fs10{font-size:10px !important;}
.fs11{font-size:11px !important;}
.fs12{font-size:12px !important;}
.fs13{font-size:13px !important;}
.fs14{font-size:14px !important;}
.fs15{font-size:15px !important;}
.fs16{font-size:16px !important;}
.fs17{font-size:17px !important;}
.fs18{font-size:18px !important;}
.fs19{font-size:19px !important;}
.fs20{font-size:20px !important;}
.fs21{font-size:21px !important;}
.fs22{font-size:22px !important;}
.fs23{font-size:23px !important;}
.fs24{font-size:24px !important;}
.fs25{font-size:25px !important;}
.fs26{font-size:26px !important;}
.fs27{font-size:27px !important;}
.fs28{font-size:28px !important;}
.fs29{font-size:29px !important;}
.fs30{font-size:30px !important;}
.fs31{font-size:31px !important;}
.fs32{font-size:32px !important;}
.fs33{font-size:33px !important;}
.fs34{font-size:34px !important;}
.fs35{font-size:35px !important;}
.fs36{font-size:36px !important;}
.fs37{font-size:37px !important;}
.fs38{font-size:38px !important;}
.fs39{font-size:39px !important;}
.fs40{font-size:40px !important;}



/*WIDTH PERCENT	*/
.wp1{width:0% !important;}
.wp1{width:1% !important;}
.wp2{width:2% !important;}
.wp3{width:3% !important;}
.wp4{width:4% !important;}
.wp5{width:5% !important;}
.wp6{width:6% !important;}
.wp7{width:7% !important;}
.wp8{width:8% !important;}
.wp9{width:9% !important;}
.wp10{width:10% !important;}
.wp11{width:11% !important;}
.wp12{width:12% !important;}
.wp13{width:13% !important;}
.wp14{width:14% !important;}
.wp15{width:15% !important;}
.wp16{width:16% !important;}
.wp17{width:17% !important;}
.wp18{width:18% !important;}
.wp19{width:19% !important;}
.wp20{width:20% !important;}
.wp21{width:21% !important;}
.wp22{width:22% !important;}
.wp23{width:23% !important;}
.wp24{width:24% !important;}
.wp25{width:25% !important;}
.wp26{width:26% !important;}
.wp27{width:27% !important;}
.wp28{width:28% !important;}
.wp29{width:29% !important;}
.wp30{width:30% !important;}
.wp31{width:31% !important;}
.wp32{width:32% !important;}
.wp33{width:33% !important;}
.wp34{width:34% !important;}
.wp35{width:35% !important;}
.wp36{width:36% !important;}
.wp37{width:37% !important;}
.wp38{width:38% !important;}
.wp39{width:39% !important;}
.wp40{width:40% !important;}
.wp41{width:41% !important;}
.wp42{width:42% !important;}
.wp43{width:43% !important;}
.wp44{width:44% !important;}
.wp45{width:45% !important;}
.wp46{width:46% !important;}
.wp47{width:47% !important;}
.wp48{width:48% !important;}
.wp49{width:49% !important;}
.wp50{width:50% !important;}
.wp51{width:51% !important;}
.wp52{width:52% !important;}
.wp53{width:53% !important;}
.wp54{width:54% !important;}
.wp55{width:55% !important;}
.wp56{width:56% !important;}
.wp57{width:57% !important;}
.wp58{width:58% !important;}
.wp59{width:59% !important;}
.wp60{width:60% !important;}
.wp61{width:61% !important;}
.wp62{width:62% !important;}
.wp63{width:63% !important;}
.wp64{width:64% !important;}
.wp65{width:65% !important;}
.wp66{width:66% !important;}
.wp67{width:67% !important;}
.wp68{width:68% !important;}
.wp69{width:69% !important;}
.wp70{width:70% !important;}
.wp71{width:71% !important;}
.wp72{width:72% !important;}
.wp73{width:73% !important;}
.wp74{width:74% !important;}
.wp75{width:75% !important;}
.wp76{width:76% !important;}
.wp77{width:77% !important;}
.wp78{width:78% !important;}
.wp79{width:79% !important;}
.wp80{width:80% !important;}
.wp81{width:81% !important;}
.wp82{width:82% !important;}
.wp83{width:83% !important;}
.wp84{width:84% !important;}
.wp85{width:85% !important;}
.wp86{width:86% !important;}
.wp87{width:87% !important;}
.wp88{width:88% !important;}
.wp89{width:89% !important;}
.wp90{width:90% !important;}
.wp91{width:91% !important;}
.wp92{width:92% !important;}
.wp93{width:93% !important;}
.wp94{width:94% !important;}
.wp95{width:95% !important;}
.wp96{width:96% !important;}
.wp97{width:97% !important;}
.wp98{width:98% !important;}
.wp99{width:99% !important;}
.wp100{width:100% !important;}


/*WIDTH PIXEL	*/
.wpx0{width:0px !important;}
.wpx1{width:1px !important;}
.wpx2{width:2px !important;}
.wpx3{width:3px !important;}
.wpx4{width:4px !important;}
.wpx5{width:5px !important;}
.wpx6{width:6px !important;}
.wpx7{width:7px !important;}
.wpx8{width:8px !important;}
.wpx9{width:9px !important;}
.wpx10{width:10px !important;}
.wpx15{width:15px !important;}
.wpx20{width:20px !important;}
.wpx25{width:25px !important;}
.wpx30{width:30px !important;}
.wpx40{width:40px !important;}
.wpx50{width:50px !important;}
.wpx55{width:55px !important;}
.wpx60{width:60px !important;}
.wpx65{width:65px !important;}
.wpx70{width:70px !important;}
.wpx75{width:75px !important;}
.wpx80{width:80px !important;}
.wpx85{width:85px !important;}
.wpx90{width:90px !important;}
.wpx95{width:95px !important;}
.wpx100{width:100px !important;}
.wpx105{width:105px !important;}
.wpx110{width:110px !important;}
.wpx115{width:115px !important;}
.wpx120{width:120px !important;}
.wpx125{width:125px !important;}
.wpx130{width:130px !important;}
.wpx140{width:140px !important;}
.wpx150{width:150px !important;}
.wpx160{width:160px !important;}
.wpx170{width:170px !important;}
.wpx180{width:180px !important;}
.wpx190{width:190px !important;}
.wpx200{width:200px !important;}
.wpx210{width:210px !important;}
.wpx220{width:220px !important;}
.wpx230{width:230px !important;}
.wpx240{width:240px !important;}
.wpx250{width:250px !important;}
.wpx260{width:260px !important;}
.wpx270{width:270px !important;}
.wpx280{width:280px !important;}
.wpx290{width:290px !important;}
.wpx300{width:300px !important;}
.wpx310{width:310px !important;}
.wpx320{width:320px !important;}
.wpx330{width:330px !important;}
.wpx340{width:340px !important;}
.wpx350{width:350px !important;}
.wpx360{width:360px !important;}
.wpx370{width:370px !important;}
.wpx380{width:380px !important;}
.wpx390{width:390px !important;}
.wpx400{width:400px !important;}
.wpx410{width:410px !important;}
.wpx420{width:420px !important;}
.wpx430{width:430px !important;}
.wpx440{width:440px !important;}
.wpx450{width:450px !important;}
.wpx460{width:460px !important;}
.wpx470{width:470px !important;}
.wpx480{width:480px !important;}
.wpx490{width:490px !important;}
.wpx500{width:500px !important;}
.wpx510{width:510px !important;}
.wpx520{width:520px !important;}
.wpx530{width:530px !important;}
.wpx540{width:540px !important;}
.wpx550{width:550px !important;}
.wpx560{width:560px !important;}
.wpx570{width:570px !important;}
.wpx580{width:580px !important;}
.wpx590{width:590px !important;}
.wpx600{width:600px !important;}
.wpx610{width:610px !important;}
.wpx614{width:614px !important;}
.wpx620{width:620px !important;}
.wpx630{width:630px !important;}
.wpx640{width:640px !important;}
.wpx650{width:650px !important;}
.wpx660{width:660px !important;}
.wpx670{width:670px !important;}
.wpx680{width:680px !important;}
.wpx690{width:690px !important;}
.wpx700{width:700px !important;}
.wpx710{width:710px !important;}
.wpx720{width:720px !important;}
.wpx730{width:730px !important;}
.wpx740{width:740px !important;}
.wpx750{width:750px !important;}
.wpx760{width:760px !important;}
.wpx765{width:765px !important;}
.wpx770{width:770px !important;}
.wpx780{width:780px !important;}
.wpx790{width:790px !important;}
.wpx800{width:800px !important;}
.wpx810{width:810px !important;}
.wpx820{width:820px !important;}
.wpx830{width:830px !important;}
.wpx840{width:840px !important;}
.wpx850{width:850px !important;}
.wpx860{width:860px !important;}
.wpx870{width:870px !important;}
.wpx880{width:880px !important;}
.wpx890{width:890px !important;}
.wpx900{width:900px !important;}
.wpx910{width:910px !important;}
.wpx920{width:920px !important;}
.wpx930{width:930px !important;}
.wpx940{width:940px !important;}
.wpx950{width:950px !important;}
.wpx960{width:960px !important;}
.wpx970{width:970px !important;}
.wpx980{width:980px !important;}
.wpx990{width:990px !important;}
.wpx1000{width:1000px !important;}
.wpx1010{width:1010px !important;}
.wpx1020{width:1020px !important;}
.wpx1030{width:1030px !important;}
.wpx1040{width:1040px !important;}
.wpx1050{width:1050px !important;}
.wpx1060{width:1060px !important;}
.wpx1070{width:1070px !important;}
.wpx1080{width:1080px !important;}
.wpx1090{width:1090px !important;}
.wpx1100{width:1100px !important;}
.wpx1110{width:1110px !important;}
.wpx1120{width:1120px !important;}
.wpx1130{width:1130px !important;}
.wpx1140{width:1140px !important;}
.wpx1150{width:1150px !important;}
.wpx1160{width:1160px !important;}
.wpx1170{width:1170px !important;}
.wpx1180{width:1180px !important;}
.wpx1190{width:1190px !important;}
.wpx1200{width:1200px !important;}
.wpx1400{width:1400px !important;}


/*MIN-WIDTH PIXEL	*/
.minwpx50{min-width:50px !important;}
.minwpx100{min-width:100px !important;}
.minwpx150{min-width:150px !important;}
.minwpx200{min-width:200px !important;}
.minwpx250{min-width:250px !important;}
.minwpx300{min-width:300px !important;}
.minwpx350{min-width:350px !important;}
.minwpx400{min-width:400px !important;}
.minwpx450{min-width:450px !important;}
.minwpx500{min-width:500px !important;}
.minwpx550{min-width:550px !important;}
.minwpx600{min-width:600px !important;}
.minwpx650{min-width:650px !important;}
.minwpx700{min-width:700px !important;}
.minwpx750{min-width:750px !important;}
.minwpx800{min-width:800px !important;}
.minwpx850{min-width:850px !important;}
.minwpx900{min-width:900px !important;}
.minwpx950{min-width:950px !important;}
.minwpx1000{min-width:1000px !important;}


/*MARGIN TOP PIXEL	*/
.mt0{margin-top:0px !important;}
.mt1{margin-top:1px !important;}
.mt2{margin-top:2px !important;}
.mt3{margin-top:3px !important;}
.mt4{margin-top:4px !important;}
.mt5{margin-top:5px !important;}
.mt6{margin-top:6px !important;}
.mt7{margin-top:7px !important;}
.mt8{margin-top:8px !important;}
.mt9{margin-top:9px !important;}
.mt10{margin-top:10px !important;}
.mt11{margin-top:11px !important;}
.mt12{margin-top:12px !important;}
.mt13{margin-top:13px !important;}
.mt14{margin-top:14px !important;}
.mt15{margin-top:15px !important;}
.mt16{margin-top:16px !important;}
.mt17{margin-top:17px !important;}
.mt18{margin-top:18px !important;}
.mt19{margin-top:19px !important;}
.mt20{margin-top:20px !important;}
.mt21{margin-top:21px !important;}
.mt22{margin-top:22px !important;}
.mt23{margin-top:23px !important;}
.mt24{margin-top:24px !important;}
.mt25{margin-top:25px !important;}
.mt26{margin-top:26px !important;}
.mt27{margin-top:27px !important;}
.mt28{margin-top:28px !important;}
.mt29{margin-top:29px !important;}
.mt30{margin-top:30px !important;}
.mt31{margin-top:31px !important;}
.mt32{margin-top:32px !important;}
.mt33{margin-top:33px !important;}
.mt34{margin-top:34px !important;}
.mt35{margin-top:35px !important;}
.mt36{margin-top:36px !important;}
.mt37{margin-top:37px !important;}
.mt38{margin-top:38px !important;}
.mt39{margin-top:39px !important;}
.mt40{margin-top:40px !important;}
.mt41{margin-top:41px !important;}
.mt42{margin-top:42px !important;}
.mt43{margin-top:43px !important;}
.mt44{margin-top:44px !important;}
.mt45{margin-top:45px !important;}
.mt46{margin-top:46px !important;}
.mt47{margin-top:47px !important;}
.mt48{margin-top:48px !important;}
.mt49{margin-top:49px !important;}
.mt50{margin-top:50px !important;}
.mt51{margin-top:51px !important;}
.mt52{margin-top:52px !important;}
.mt53{margin-top:53px !important;}
.mt54{margin-top:54px !important;}
.mt55{margin-top:55px !important;}
.mt56{margin-top:56px !important;}
.mt57{margin-top:57px !important;}
.mt58{margin-top:58px !important;}
.mt59{margin-top:59px !important;}
.mt60{margin-top:60px !important;}
.mt61{margin-top:61px !important;}
.mt62{margin-top:62px !important;}
.mt63{margin-top:63px !important;}
.mt64{margin-top:64px !important;}
.mt65{margin-top:65px !important;}
.mt66{margin-top:66px !important;}
.mt67{margin-top:67px !important;}
.mt68{margin-top:68px !important;}
.mt69{margin-top:69px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}
.mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;}
.mt110{margin-top:110px !important;}
.mt120{margin-top:120px !important;}
.mt130{margin-top:130px !important}
.mt200{margin-top:200px !important}
.mt300{margin-top:300px !important}
.mt400{margin-top:400px !important}
.mt500{margin-top:500px !important}
.mt600{margin-top:600px !important}
.mt700{margin-top:700px !important}
.mt780{margin-top:780px !important}
.mt800{margin-top:800px !important}
.mt900{margin-top:900px !important}

/*MARGIN BOTTOM PIXEL	*/
.mb0{margin-bottom:0px !important;}
.mb1{margin-bottom:1px !important;}
.mb2{margin-bottom:2px !important;}
.mb3{margin-bottom:3px !important;}
.mb4{margin-bottom:4px !important;}
.mb5{margin-bottom:5px !important;}
.mb6{margin-bottom:6px !important;}
.mb7{margin-bottom:7px !important;}
.mb8{margin-bottom:8px !important;}
.mb9{margin-bottom:9px !important;}
.mb10{margin-bottom:10px !important;}
.mb11{margin-bottom:11px !important;}
.mb12{margin-bottom:12px !important;}
.mb13{margin-bottom:13px !important;}
.mb14{margin-bottom:14px !important;}
.mb15{margin-bottom:15px !important;}
.mb16{margin-bottom:16px !important;}
.mb17{margin-bottom:17px !important;}
.mb18{margin-bottom:18px !important;}
.mb19{margin-bottom:19px !important;}
.mb20{margin-bottom:20px !important;}
.mb21{margin-bottom:21px !important;}
.mb22{margin-bottom:22px !important;}
.mb23{margin-bottom:23px !important;}
.mb24{margin-bottom:24px !important;}
.mb25{margin-bottom:25px !important;}
.mb26{margin-bottom:26px !important;}
.mb27{margin-bottom:27px !important;}
.mb28{margin-bottom:28px !important;}
.mb29{margin-bottom:29px !important;}
.mb30{margin-bottom:30px !important;}
.mb31{margin-bottom:31px !important;}
.mb32{margin-bottom:32px !important;}
.mb33{margin-bottom:33px !important;}
.mb34{margin-bottom:34px !important;}
.mb35{margin-bottom:35px !important;}
.mb36{margin-bottom:36px !important;}
.mb37{margin-bottom:37px !important;}
.mb38{margin-bottom:38px !important;}
.mb39{margin-bottom:39px !important;}
.mb40{margin-bottom:40px !important;}
.mb41{margin-bottom:41px !important;}
.mb42{margin-bottom:42px !important;}
.mb43{margin-bottom:43px !important;}
.mb44{margin-bottom:44px !important;}
.mb45{margin-bottom:45px !important;}
.mb46{margin-bottom:46px !important;}
.mb47{margin-bottom:47px !important;}
.mb48{margin-bottom:48px !important;}
.mb49{margin-bottom:49px !important;}
.mb50{margin-bottom:50px !important;}
.mb51{margin-bottom:51px !important;}
.mb52{margin-bottom:52px !important;}
.mb53{margin-bottom:53px !important;}
.mb54{margin-bottom:54px !important;}
.mb55{margin-bottom:55px !important;}
.mb56{margin-bottom:56px !important;}
.mb57{margin-bottom:57px !important;}
.mb58{margin-bottom:58px !important;}
.mb59{margin-bottom:59px !important;}
.mb60{margin-bottom:60px !important;}
.mb61{margin-bottom:61px !important;}
.mb62{margin-bottom:62px !important;}
.mb63{margin-bottom:63px !important;}
.mb64{margin-bottom:64px !important;}
.mb65{margin-bottom:65px !important;}
.mb66{margin-bottom:66px !important;}
.mb67{margin-bottom:67px !important;}
.mb68{margin-bottom:68px !important;}
.mb69{margin-bottom:69px !important;}
.mb70{margin-bottom:70px !important;}
.mb71{margin-bottom:71px !important;}
.mb72{margin-bottom:72px !important;}
.mb73{margin-bottom:73px !important;}
.mb74{margin-bottom:74px !important;}
.mb75{margin-bottom:75px !important;}
.mb76{margin-bottom:76px !important;}
.mb77{margin-bottom:77px !important;}
.mb78{margin-bottom:78px !important;}
.mb79{margin-bottom:79px !important;}
.mb80{margin-bottom:80px !important;}


/*MARGIN LEFT PIXEL	*/
.m0{margin:0 !important;}
.ml0{margin-left:0px !important;}
.ml1{margin-left:1px !important;}
.ml2{margin-left:2px !important;}
.ml3{margin-left:3px !important;}
.ml4{margin-left:4px !important;}
.ml5{margin-left:5px !important;}
.ml6{margin-left:6px !important;}
.ml7{margin-left:7px !important;}
.ml8{margin-left:8px !important;}
.ml9{margin-left:9px !important;}
.ml10{margin-left:10px !important;}
.ml11{margin-left:11px !important;}
.ml12{margin-left:12px !important;}
.ml13{margin-left:13px !important;}
.ml14{margin-left:14px !important;}
.ml15{margin-left:15px !important;}
.ml16{margin-left:16px !important;}
.ml17{margin-left:17px !important;}
.ml18{margin-left:18px !important;}
.ml19{margin-left:19px !important;}
.ml20{margin-left:20px !important;}
.ml21{margin-left:21px !important;}
.ml22{margin-left:22px !important;}
.ml23{margin-left:23px !important;}
.ml24{margin-left:24px !important;}
.ml25{margin-left:25px !important;}
.ml26{margin-left:26px !important;}
.ml27{margin-left:27px !important;}
.ml28{margin-left:28px !important;}
.ml29{margin-left:29px !important;}
.ml30{margin-left:30px !important;}
.ml31{margin-left:31px !important;}
.ml32{margin-left:32px !important;}
.ml33{margin-left:33px !important;}
.ml34{margin-left:34px !important;}
.ml35{margin-left:35px !important;}
.ml36{margin-left:36px !important;}
.ml37{margin-left:37px !important;}
.ml38{margin-left:38px !important;}
.ml39{margin-left:39px !important;}
.ml40{margin-left:40px !important;}
.ml41{margin-left:41px !important;}
.ml42{margin-left:42px !important;}
.ml43{margin-left:43px !important;}
.ml44{margin-left:44px !important;}
.ml45{margin-left:45px !important;}
.ml46{margin-left:46px !important;}
.ml47{margin-left:47px !important;}
.ml48{margin-left:48px !important;}
.ml49{margin-left:49px !important;}
.ml50{margin-left:50px !important;}
.ml51{margin-left:51px !important;}
.ml52{margin-left:52px !important;}
.ml53{margin-left:53px !important;}
.ml54{margin-left:54px !important;}
.ml55{margin-left:55px !important;}
.ml56{margin-left:56px !important;}
.ml57{margin-left:57px !important;}
.ml58{margin-left:58px !important;}
.ml59{margin-left:59px !important;}
.ml60{margin-left:60px !important;}
.ml61{margin-left:61px !important;}
.ml62{margin-left:62px !important;}
.ml63{margin-left:63px !important;}
.ml64{margin-left:64px !important;}
.ml65{margin-left:65px !important;}
.ml66{margin-left:66px !important;}
.ml67{margin-left:67px !important;}
.ml68{margin-left:68px !important;}
.ml69{margin-left:69px !important;}
.ml70{margin-left:70px !important;}
.ml71{margin-left:71px !important;}
.ml72{margin-left:72px !important;}
.ml73{margin-left:73px !important;}
.ml74{margin-left:74px !important;}
.ml75{margin-left:75px !important;}
.ml76{margin-left:76px !important;}
.ml77{margin-left:77px !important;}
.ml78{margin-left:78px !important;}
.ml79{margin-left:79px !important;}
.ml80{margin-left:80px !important;}
.ml81{margin-left:81px !important;}
.ml82{margin-left:82px !important;}
.ml83{margin-left:83px !important;}
.ml84{margin-left:84px !important;}
.ml85{margin-left:85px !important;}
.ml86{margin-left:86px !important;}
.ml87{margin-left:87px !important;}
.ml88{margin-left:88px !important;}
.ml89{margin-left:89px !important;}
.ml90{margin-left:90px !important;}
.ml100{margin-left:100px !important;}
.ml200{margin-left:200px !important;}
.ml300{margin-left:300px !important;}
.ml400{margin-left:400px !important;}
.ml410{margin-left:410px !important;}
.ml420{margin-left:420px !important;}
.ml430{margin-left:430px !important;}
.ml440{margin-left:440px !important;}
.ml450{margin-left:450px !important;}
.ml460{margin-left:460px !important;}
.ml470{margin-left:470px !important;}
.ml480{margin-left:480px !important;}
.ml490{margin-left:490px !important;}
.ml500{margin-left:500px !important;}
.ml510{margin-left:510px !important;}
.ml520{margin-left:520px !important;}
.ml530{margin-left:530px !important;}
.ml540{margin-left:540px !important;}
.ml550{margin-left:550px !important;}
.ml560{margin-left:560px !important;}
.ml570{margin-left:570px !important;}
.ml580{margin-left:580px !important;}
.ml590{margin-left:590px !important;}
.ml600{margin-left:600px !important;}

/*MARGIN RIGHT PIXEL	*/
.mr0{margin-right:0px !important;}
.mr1{margin-right:1px !important;}
.mr2{margin-right:2px !important;}
.mr3{margin-right:3px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr6{margin-right:6px !important;}
.mr7{margin-right:7px !important;}
.mr8{margin-right:8px !important;}
.mr9{margin-right:9px !important;}
.mr10{margin-right:10px !important;}
.mr11{margin-right:11px !important;}
.mr12{margin-right:12px !important;}
.mr13{margin-right:13px !important;}
.mr14{margin-right:14px !important;}
.mr15{margin-right:15px !important;}
.mr16{margin-right:16px !important;}
.mr17{margin-right:17px !important;}
.mr18{margin-right:18px !important;}
.mr19{margin-right:19px !important;}
.mr20{margin-right:20px !important;}
.mr21{margin-right:21px !important;}
.mr22{margin-right:22px !important;}
.mr23{margin-right:23px !important;}
.mr24{margin-right:24px !important;}
.mr25{margin-right:25px !important;}
.mr26{margin-right:26px !important;}
.mr27{margin-right:27px !important;}
.mr28{margin-right:28px !important;}
.mr29{margin-right:29px !important;}
.mr30{margin-right:30px !important;}
.mr31{margin-right:31px !important;}
.mr32{margin-right:32px !important;}
.mr33{margin-right:33px !important;}
.mr34{margin-right:34px !important;}
.mr35{margin-right:35px !important;}
.mr36{margin-right:36px !important;}
.mr37{margin-right:37px !important;}
.mr38{margin-right:38px !important;}
.mr39{margin-right:39px !important;}
.mr40{margin-right:40px !important;}
.mr41{margin-right:41px !important;}
.mr42{margin-right:42px !important;}
.mr43{margin-right:43px !important;}
.mr44{margin-right:44px !important;}
.mr45{margin-right:45px !important;}
.mr46{margin-right:46px !important;}
.mr47{margin-right:47px !important;}
.mr48{margin-right:48px !important;}
.mr49{margin-right:49px !important;}
.mr50{margin-right:50px !important;}
.mr51{margin-right:51px !important;}
.mr52{margin-right:52px !important;}
.mr53{margin-right:53px !important;}
.mr54{margin-right:54px !important;}
.mr55{margin-right:55px !important;}
.mr56{margin-right:56px !important;}
.mr57{margin-right:57px !important;}
.mr58{margin-right:58px !important;}
.mr59{margin-right:59px !important;}
.mr60{margin-right:60px !important;}
.mr61{margin-right:61px !important;}
.mr62{margin-right:62px !important;}
.mr63{margin-right:63px !important;}
.mr64{margin-right:64px !important;}
.mr65{margin-right:65px !important;}
.mr66{margin-right:66px !important;}
.mr67{margin-right:67px !important;}
.mr68{margin-right:68px !important;}
.mr69{margin-right:69px !important;}
.mr70{margin-right:70px !important;}
.mr80{margin-right:80px !important;}
.mr90{margin-right:90px !important;}
.mr95{margin-right:95px !important;}
.mr100{margin-right:100px !important;}

/*PADDING TOP PIXEL	*/
.pt0{padding-top:0px !important;}
.pt1{padding-top:1px !important;}
.pt2{padding-top:2px !important;}
.pt3{padding-top:3px !important;}
.pt4{padding-top:4px !important;}
.pt5{padding-top:5px !important;}
.pt6{padding-top:6px !important;}
.pt7{padding-top:7px !important;}
.pt8{padding-top:8px !important;}
.pt9{padding-top:9px !important;}
.pt10{padding-top:10px !important;}
.pt11{padding-top:11px !important;}
.pt12{padding-top:12px !important;}
.pt13{padding-top:13px !important;}
.pt14{padding-top:14px !important;}
.pt15{padding-top:15px !important;}
.pt16{padding-top:16px !important;}
.pt17{padding-top:17px !important;}
.pt18{padding-top:18px !important;}
.pt19{padding-top:19px !important;}
.pt20{padding-top:20px !important;}
.pt21{padding-top:21px !important;}
.pt22{padding-top:22px !important;}
.pt23{padding-top:23px !important;}
.pt24{padding-top:24px !important;}
.pt25{padding-top:25px !important;}
.pt26{padding-top:26px !important;}
.pt27{padding-top:27px !important;}
.pt28{padding-top:28px !important;}
.pt29{padding-top:29px !important;}
.pt30{padding-top:30px !important;}
.pt31{padding-top:31px !important;}
.pt32{padding-top:32px !important;}
.pt33{padding-top:33px !important;}
.pt34{padding-top:34px !important;}
.pt35{padding-top:35px !important;}
.pt36{padding-top:36px !important;}
.pt37{padding-top:37px !important;}
.pt38{padding-top:38px !important;}
.pt39{padding-top:39px !important;}
.pt40{padding-top:40px !important;}
.pt41{padding-top:41px !important;}
.pt42{padding-top:42px !important;}
.pt43{padding-top:43px !important;}
.pt44{padding-top:44px !important;}
.pt45{padding-top:45px !important;}
.pt46{padding-top:46px !important;}
.pt47{padding-top:47px !important;}
.pt48{padding-top:48px !important;}
.pt49{padding-top:49px !important;}
.pt50{padding-top:50px !important;}
.pt51{padding-top:51px !important;}
.pt52{padding-top:52px !important;}
.pt53{padding-top:53px !important;}
.pt54{padding-top:54px !important;}
.pt55{padding-top:55px !important;}
.pt56{padding-top:56px !important;}
.pt57{padding-top:57px !important;}
.pt58{padding-top:58px !important;}
.pt59{padding-top:59px !important;}
.pt60{padding-top:60px !important;}
.pt61{padding-top:61px !important;}
.pt62{padding-top:62px !important;}
.pt63{padding-top:63px !important;}
.pt64{padding-top:64px !important;}
.pt65{padding-top:65px !important;}
.pt66{padding-top:66px !important;}
.pt67{padding-top:67px !important;}
.pt68{padding-top:68px !important;}
.pt69{padding-top:69px !important;}
.pt70{padding-top:70px !important;}
.pt71{padding-top:71px !important;}
.pt72{padding-top:72px !important;}
.pt73{padding-top:73px !important;}
.pt74{padding-top:74px !important;}
.pt75{padding-top:75px !important;}
.pt76{padding-top:76px !important;}
.pt77{padding-top:77px !important;}
.pt78{padding-top:78px !important;}
.pt79{padding-top:79px !important;}
.pt80{padding-top:80px !important;}
.pt81{padding-top:81px !important;}
.pt82{padding-top:82px !important;}
.pt83{padding-top:83px !important;}
.pt84{padding-top:84px !important;}
.pt85{padding-top:85px !important;}
.pt86{padding-top:86px !important;}
.pt87{padding-top:87px !important;}
.pt88{padding-top:88px !important;}
.pt89{padding-top:89px !important;}
.pt90{padding-top:90px !important;}
.pt91{padding-top:91px !important;}
.pt92{padding-top:92px !important;}
.pt93{padding-top:93px !important;}
.pt94{padding-top:94px !important;}
.pt95{padding-top:95px !important;}
.pt96{padding-top:96px !important;}
.pt97{padding-top:97px !important;}
.pt98{padding-top:98px !important;}
.pt99{padding-top:99px !important;}
.pt100{padding-top:100px !important;}
.pt110{padding-top:110px !important;}
.pt120{padding-top:120px !important;}
.pt130{padding-top:130px !important;}
.pt140{padding-top:140px !important;}
.pt150{padding-top:150px !important;}
.pt160{padding-top:160px !important;}
.pt170{padding-top:170px !important;}
.pt180{padding-top:180px !important;}
.pt190{padding-top:190px !important;}
.pt200{padding-top:200px !important;}
.pt300{padding-top:300px !important;}

/*PADDING BOTTOM PIXEL	*/
.pb0{padding-bottom:0px !important;}
.pb1{padding-bottom:1px !important;}
.pb2{padding-bottom:2px !important;}
.pb3{padding-bottom:3px !important;}
.pb4{padding-bottom:4px !important;}
.pb5{padding-bottom:5px !important;}
.pb6{padding-bottom:6px !important;}
.pb7{padding-bottom:7px !important;}
.pb8{padding-bottom:8px !important;}
.pb9{padding-bottom:9px !important;}
.pb10{padding-bottom:10px !important;}
.pb11{padding-bottom:11px !important;}
.pb12{padding-bottom:12px !important;}
.pb13{padding-bottom:13px !important;}
.pb14{padding-bottom:14px !important;}
.pb15{padding-bottom:15px !important;}
.pb16{padding-bottom:16px !important;}
.pb17{padding-bottom:17px !important;}
.pb18{padding-bottom:18px !important;}
.pb19{padding-bottom:19px !important;}
.pb20{padding-bottom:20px !important;}
.pb21{padding-bottom:21px !important;}
.pb22{padding-bottom:22px !important;}
.pb23{padding-bottom:23px !important;}
.pb24{padding-bottom:24px !important;}
.pb25{padding-bottom:25px !important;}
.pb26{padding-bottom:26px !important;}
.pb27{padding-bottom:27px !important;}
.pb28{padding-bottom:28px !important;}
.pb29{padding-bottom:29px !important;}
.pb30{padding-bottom:30px !important;}
.pb31{padding-bottom:31px !important;}
.pb32{padding-bottom:32px !important;}
.pb33{padding-bottom:33px !important;}
.pb34{padding-bottom:34px !important;}
.pb35{padding-bottom:35px !important;}
.pb36{padding-bottom:36px !important;}
.pb37{padding-bottom:37px !important;}
.pb38{padding-bottom:38px !important;}
.pb39{padding-bottom:39px !important;}
.pb40{padding-bottom:40px !important;}
.pb41{padding-bottom:41px !important;}
.pb42{padding-bottom:42px !important;}
.pb43{padding-bottom:43px !important;}
.pb44{padding-bottom:44px !important;}
.pb45{padding-bottom:45px !important;}
.pb46{padding-bottom:46px !important;}
.pb47{padding-bottom:47px !important;}
.pb48{padding-bottom:48px !important;}
.pb49{padding-bottom:49px !important;}
.pb50{padding-bottom:50px !important;}
.pb51{padding-bottom:51px !important;}
.pb52{padding-bottom:52px !important;}
.pb53{padding-bottom:53px !important;}
.pb54{padding-bottom:54px !important;}
.pb55{padding-bottom:55px !important;}
.pb56{padding-bottom:56px !important;}
.pb57{padding-bottom:57px !important;}
.pb58{padding-bottom:58px !important;}
.pb59{padding-bottom:59px !important;}
.pb60{padding-bottom:60px !important;}
.pb61{padding-bottom:61px !important;}
.pb62{padding-bottom:62px !important;}
.pb63{padding-bottom:63px !important;}
.pb64{padding-bottom:64px !important;}
.pb65{padding-bottom:65px !important;}
.pb66{padding-bottom:66px !important;}
.pb67{padding-bottom:67px !important;}
.pb68{padding-bottom:68px !important;}
.pb69{padding-bottom:69px !important;}
.pb70{padding-bottom:70px !important;}
.pb71{padding-bottom:71px !important;}
.pb72{padding-bottom:72px !important;}
.pb73{padding-bottom:73px !important;}
.pb74{padding-bottom:74px !important;}
.pb75{padding-bottom:75px !important;}
.pb76{padding-bottom:76px !important;}
.pb77{padding-bottom:77px !important;}
.pb78{padding-bottom:78px !important;}
.pb79{padding-bottom:79px !important;}
.pb80{padding-bottom:80px !important;}
.pb81{padding-bottom:81px !important;}
.pb82{padding-bottom:82px !important;}
.pb83{padding-bottom:83px !important;}
.pb84{padding-bottom:84px !important;}
.pb85{padding-bottom:85px !important;}
.pb86{padding-bottom:86px !important;}
.pb87{padding-bottom:87px !important;}
.pb88{padding-bottom:88px !important;}
.pb89{padding-bottom:89px !important;}
.pb90{padding-bottom:90px !important;}
.pb91{padding-bottom:91px !important;}
.pb92{padding-bottom:92px !important;}
.pb93{padding-bottom:93px !important;}
.pb94{padding-bottom:94px !important;}
.pb95{padding-bottom:95px !important;}
.pb96{padding-bottom:96px !important;}
.pb97{padding-bottom:97px !important;}
.pb98{padding-bottom:98px !important;}
.pb99{padding-bottom:99px !important;}
.pb100{padding-bottom:100px !important;}
.pb110{padding-bottom:110px !important;}
.pb120{padding-bottom:120px !important;}
.pb130{padding-bottom:130px !important;}
.pb140{padding-bottom:140px !important;}
.pb150{padding-bottom:150px !important;}
.pb160{padding-bottom:160px !important;}
.pb170{padding-bottom:170px !important;}
.pb180{padding-bottom:180px !important;}
.pb190{padding-bottom:190px !important;}
.pb200{padding-bottom:200px !important;}
.pb300{padding-bottom:300px !important;}
.pb400{padding-bottom:400px !important;}
.pb500{padding-bottom:500px !important;}
.pb600{padding-bottom:600px !important;}
.pb700{padding-bottom:700px !important;}
.pb800{padding-bottom:800px !important;}
.pb900{padding-bottom:900px !important;}
.pb1000{padding-bottom:1000px !important;}
.pb2000{padding-bottom:2000px !important;}
.pb5000{padding-bottom:5000px !important;}

/*PADDING LEFT PIXEL	*/
.p0{padding:0 !important;}
.pl0{padding-left:0px !important;}
.pl1{padding-left:1px !important;}
.pl2{padding-left:2px !important;}
.pl3{padding-left:3px !important;}
.pl4{padding-left:4px !important;}
.pl5{padding-left:5px !important;}
.pl6{padding-left:6px !important;}
.pl7{padding-left:7px !important;}
.pl8{padding-left:8px !important;}
.pl9{padding-left:9px !important;}
.pl10{padding-left:10px !important;}
.pl11{padding-left:11px !important;}
.pl12{padding-left:12px !important;}
.pl13{padding-left:13px !important;}
.pl14{padding-left:14px !important;}
.pl15{padding-left:15px !important;}
.pl16{padding-left:16px !important;}
.pl17{padding-left:17px !important;}
.pl18{padding-left:18px !important;}
.pl19{padding-left:19px !important;}
.pl20{padding-left:20px !important;}
.pl21{padding-left:21px !important;}
.pl22{padding-left:22px !important;}
.pl23{padding-left:23px !important;}
.pl24{padding-left:24px !important;}
.pl25{padding-left:25px !important;}
.pl26{padding-left:26px !important;}
.pl27{padding-left:27px !important;}
.pl28{padding-left:28px !important;}
.pl29{padding-left:29px !important;}
.pl30{padding-left:30px !important;}
.pl31{padding-left:31px !important;}
.pl32{padding-left:32px !important;}
.pl33{padding-left:33px !important;}
.pl34{padding-left:34px !important;}
.pl35{padding-left:35px !important;}
.pl36{padding-left:36px !important;}
.pl37{padding-left:37px !important;}
.pl38{padding-left:38px !important;}
.pl39{padding-left:39px !important;}
.pl40{padding-left:40px !important;}
.pl41{padding-left:41px !important;}
.pl42{padding-left:42px !important;}
.pl43{padding-left:43px !important;}
.pl44{padding-left:44px !important;}
.pl45{padding-left:45px !important;}
.pl46{padding-left:46px !important;}
.pl47{padding-left:47px !important;}
.pl48{padding-left:48px !important;}
.pl49{padding-left:49px !important;}
.pl50{padding-left:50px !important;}
.pl51{padding-left:51px !important;}
.pl52{padding-left:52px !important;}
.pl53{padding-left:53px !important;}
.pl54{padding-left:54px !important;}
.pl55{padding-left:55px !important;}
.pl56{padding-left:56px !important;}
.pl57{padding-left:57px !important;}
.pl58{padding-left:58px !important;}
.pl59{padding-left:59px !important;}
.pl60{padding-left:60px !important;}
.pl61{padding-left:61px !important;}
.pl62{padding-left:62px !important;}
.pl63{padding-left:63px !important;}
.pl64{padding-left:64px !important;}
.pl65{padding-left:65px !important;}
.pl66{padding-left:66px !important;}
.pl67{padding-left:67px !important;}
.pl68{padding-left:68px !important;}
.pl69{padding-left:69px !important;}
.pl70{padding-left:70px !important;}
.pl71{padding-left:71px !important;}
.pl72{padding-left:72px !important;}
.pl73{padding-left:73px !important;}
.pl74{padding-left:74px !important;}
.pl75{padding-left:75px !important;}
.pl76{padding-left:76px !important;}
.pl77{padding-left:77px !important;}
.pl78{padding-left:78px !important;}
.pl79{padding-left:79px !important;}
.pl80{padding-left:80px !important;}
.pl81{padding-left:81px !important;}
.pl82{padding-left:82px !important;}
.pl83{padding-left:83px !important;}
.pl84{padding-left:84px !important;}
.pl85{padding-left:85px !important;}
.pl86{padding-left:86px !important;}
.pl87{padding-left:87px !important;}
.pl88{padding-left:88px !important;}
.pl89{padding-left:89px !important;}
.pl90{padding-left:90px !important;}
.pl91{padding-left:91px !important;}
.pl92{padding-left:92px !important;}
.pl93{padding-left:93px !important;}
.pl94{padding-left:94px !important;}
.pl95{padding-left:95px !important;}
.pl96{padding-left:96px !important;}
.pl97{padding-left:97px !important;}
.pl98{padding-left:98px !important;}
.pl99{padding-left:99px !important;}
.pl100{padding-left:100px !important;}
.pl110{padding-left:110px !important;}
.pl120{padding-left:120px !important;}
.pl130{padding-left:130px !important;}
.pl135{padding-left:135px !important;}
.pl140{padding-left:140px !important;}
.pl150{padding-left:150px !important;}
.pl160{padding-left:150px !important;}
.pl200{padding-left:200px !important;}
.pl240{padding-left:240px !important;}
.pl360{padding-left:360px !important;}
.pl400{padding-left:400px !important;}
.pl410{padding-left:410px !important;}
.pl420{padding-left:420px !important;}
.pl480{padding-left:480px !important;}
.pl500{padding-left:500px !important;}
.pl590{padding-left:590px !important;}
.pl600{padding-left:600px !important;}

/*PADDING RIGHT PIXEL	*/
.pr0{padding-right:0px !important;}
.pr1{padding-right:1px !important;}
.pr2{padding-right:2px !important;}
.pr3{padding-right:3px !important;}
.pr4{padding-right:4px !important;}
.pr5{padding-right:5px !important;}
.pr6{padding-right:6px !important;}
.pr7{padding-right:7px !important;}
.pr8{padding-right:8px !important;}
.pr9{padding-right:9px !important;}
.pr10{padding-right:10px !important;}
.pr11{padding-right:11px !important;}
.pr12{padding-right:12px !important;}
.pr13{padding-right:13px !important;}
.pr14{padding-right:14px !important;}
.pr15{padding-right:15px !important;}
.pr16{padding-right:16px !important;}
.pr17{padding-right:17px !important;}
.pr18{padding-right:18px !important;}
.pr19{padding-right:19px !important;}
.pr20{padding-right:20px !important;}
.pr21{padding-right:21px !important;}
.pr22{padding-right:22px !important;}
.pr23{padding-right:23px !important;}
.pr24{padding-right:24px !important;}
.pr25{padding-right:25px !important;}
.pr26{padding-right:26px !important;}
.pr27{padding-right:27px !important;}
.pr28{padding-right:28px !important;}
.pr29{padding-right:29px !important;}
.pr30{padding-right:30px !important;}
.pr31{padding-right:31px !important;}
.pr32{padding-right:32px !important;}
.pr33{padding-right:33px !important;}
.pr34{padding-right:34px !important;}
.pr35{padding-right:35px !important;}
.pr36{padding-right:36px !important;}
.pr37{padding-right:37px !important;}
.pr38{padding-right:38px !important;}
.pr39{padding-right:39px !important;}
.pr40{padding-right:40px !important;}
.pr41{padding-right:41px !important;}
.pr42{padding-right:42px !important;}
.pr43{padding-right:43px !important;}
.pr44{padding-right:44px !important;}
.pr45{padding-right:45px !important;}
.pr46{padding-right:46px !important;}
.pr47{padding-right:47px !important;}
.pr48{padding-right:48px !important;}
.pr49{padding-right:49px !important;}
.pr50{padding-right:50px !important;}
.pr51{padding-right:51px !important;}
.pr52{padding-right:52px !important;}
.pr53{padding-right:53px !important;}
.pr54{padding-right:54px !important;}
.pr55{padding-right:55px !important;}
.pr56{padding-right:56px !important;}
.pr57{padding-right:57px !important;}
.pr58{padding-right:58px !important;}
.pr59{padding-right:59px !important;}
.pr60{padding-right:60px !important;}
.pr61{padding-right:61px !important;}
.pr62{padding-right:62px !important;}
.pr63{padding-right:63px !important;}
.pr64{padding-right:64px !important;}
.pr65{padding-right:65px !important;}
.pr66{padding-right:66px !important;}
.pr67{padding-right:67px !important;}
.pr68{padding-right:68px !important;}
.pr69{padding-right:69px !important;}
.pr70{padding-right:70px !important;}
.pr71{padding-right:71px !important;}
.pr72{padding-right:72px !important;}
.pr73{padding-right:73px !important;}
.pr74{padding-right:74px !important;}
.pr75{padding-right:75px !important;}
.pr76{padding-right:76px !important;}
.pr77{padding-right:77px !important;}
.pr78{padding-right:78px !important;}
.pr79{padding-right:79px !important;}
.pr80{padding-right:80px !important;}
.pr81{padding-right:81px !important;}
.pr82{padding-right:82px !important;}
.pr83{padding-right:83px !important;}
.pr84{padding-right:84px !important;}
.pr85{padding-right:85px !important;}
.pr86{padding-right:86px !important;}
.pr87{padding-right:87px !important;}
.pr88{padding-right:88px !important;}
.pr89{padding-right:89px !important;}
.pr90{padding-right:90px !important;}
.pr91{padding-right:91px !important;}
.pr92{padding-right:92px !important;}
.pr93{padding-right:93px !important;}
.pr94{padding-right:94px !important;}
.pr95{padding-right:95px !important;}
.pr96{padding-right:96px !important;}
.pr97{padding-right:97px !important;}
.pr98{padding-right:98px !important;}
.pr99{padding-right:99px !important;}
.pr100{padding-right:100px !important;}
.pr150{padding-right:150px !important;}
.pr200{padding-right:200px !important;}

/*LINE HEIGHT PERCENT	*/
.lh100 {line-height:100% !important;}
.lh110 {line-height:110% !important;}
.lh120 {line-height:120% !important;}
.lh130 {line-height:130% !important;}
.lh140 {line-height:140% !important;}
.lh150 {line-height:150% !important;}
.lh160 {line-height:160% !important;}
.lh170 {line-height:170% !important;}
.lh180 {line-height:180% !important;}
.lh190 {line-height:190% !important;}
.lh200 {line-height:200% !important;}
.lh210 {line-height:210% !important;}
.lh220 {line-height:220% !important;}
.lh230 {line-height:230% !important;}
.lh240 {line-height:240% !important;}
.lh250 {line-height:250% !important;}
.lh260 {line-height:260% !important;}
.lh270 {line-height:270% !important;}
.lh280 {line-height:280% !important;}
.lh290 {line-height:290% !important;}
.lh300 {line-height:300% !important;}
.lh310 {line-height:310% !important;}
.lh320 {line-height:320% !important;}
.lh330 {line-height:330% !important;}
.lh340 {line-height:340% !important;}
.lh350 {line-height:350% !important;}
.lh360 {line-height:360% !important;}


/*HEIGHT PIXEL	*/
.hp100 {height:100% !important;}
.hpx30 {height:30px !important;}
.hpx32 {height:32px !important;}
.hpx34 {height:34px !important;}
.hpx36 {height:36px !important;}
.hpx38 {height:38px !important;}
.hpx40 {height:40px !important;}
.hpx42 {height:42px !important;}
.hpx44 {height:44px !important;}
.hpx46 {height:46px !important;}
.hpx48 {height:48px !important;}
.hpx50 {height:50px !important;}
.hpx54 {height:54px !important;}
.hpx56 {height:56px !important;}
.hpx58 {height:58px !important;}
.hpx60 {height:60px !important;}
.hpx65 {height:65px !important;}
.hpx70 {height:70px !important;}
.hpx90 {height:90px !important;}
.hpx100 {height:90px !important;}
.hpx120 {height:120px !important;}
.hpx140 {height:140px !important;}
.hpx150 {height:150px !important;}
.hpx160 {height:160px !important;}
.hpx180 {height:180px !important;}
.hpx190 {height:190px !important;}
.hpx200 {height:200px !important;}
.hpx210 {height:210px !important;}
.hpx220 {height:220px !important;}
.hpx230 {height:230px !important;}
.hpx240 {height:240px !important;}
.hpx280 {height:280px !important;}
.hpx288 {height:288px !important;}
.hpx320 {height:320px !important;}
.hpx340 {height:340px !important;}
.hpx360 {height:360px !important;}
.hpx380 {height:380px !important;}
.hpx400 {height:400px !important;}
.hpx420 {height:420px !important;}
.hpx430 {height:430px !important;}
.hpx460 {height:460px !important;}
.hpx480 {height:480px !important;}
.hpx500 {height:500px !important;}
.hpx520 {height:520px !important;}
.hpx600 {height:600px !important;}
.hpx630 {height:630px !important;}
.hpx710 {height:710px !important;}
.hpx800 {height:800px !important;}
.mhpx240 {max-height:240px !important;}







/*----------------------------------------------------------------------------------------------------------------------------------
	reference
------------------------------------------------------------------------------------------------------------------------------------

[	example	]---------------------------------------------------------------------------------------
	list-style: inside url('/_elearning/images/common/mark_dotg.gif');
	width: calc(100vw - 160px);
	li:nth-of-type(1)
	li:nth-of-type(2n)
	li:nth-last-child(-n+2)
	li:last-child

	상속 (Inheritance)
	----------------------------------------------------------------
	color	/	font-family
	inherit	/	initial		/	unset or revert
	color: green;
	color: inherit;
	color: initial;
	color: unset;
	.fix-this{all: unset;}

	cascade
	----------------------------------------------------------------
	!important	>	id	> class
	/선택자(*)	/결합자(+, >, ~, ' ')	/부정 pseudo-class(:not)

	font
	----------------------------------------------------------------
	text-indent: -0.81rem;margin-left: 1.81rem;

	:where()	/	:is()	/	:not()	/	:has()
	----------------------------------------------------------------
	:where(section, article, aside, nav) :where(h1, h2, h3, h4, h5, h6) {color: #BADA55;}
	:is(header.is, main.is, footer.is) p {color: orange;}
	ul li:not(:last-of-type){margin-bottom: 20px;}
	a:has(img){}		:a 요소가 자손으로 img를 가지고 있을 경우
	a:has(> img){}		:a 요소가 자식으로 img를 가지고 있을 경우
	h3:has(+ p) {}		:h3 요소가 형제로 p를 가지고 있을 경우
	article:has(h3, p){}:article 요소가 자손으로 h3 그리고 p를 가지고 있을 경우 (and 논리)
	div.section1:not(:has(h3)) {color: red;}	:div 요소가 자손으로 h3을 가지고 있지 않을 경우 전체 칼라 적용
	div.section2:has(:not(h3)) {color: blue;}	:div 요소의 자손이 h3이 아닌 요소가 있을 경우 전체 칼라 적용




	highlight
	----------------------------------------------------------------
	display: inline;
	inset | offset-x | offset-y | color
	box-shadow: inset 0 -17px 0 rgba(6, 108, 176, 0.36);

	arrow
	----------------------------------------------------------------
	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;
	}
	span.arrow:after{
		margin-top: -2px;transform: rotate(315deg);-webkit-transform: rotate(315deg);
	}

	plusminus
	----------------------------------------------------------------
	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;height: 3px;}
		}
		&:before, &:after{
			content: '';display: block;background-color: #DB1D3A;position: absolute;top: 50%;left: 0;transition: .35s;width: 100%;height: 1px;
		}
		&:before{transform: translatey(-50%);}
		&:after{transform: translatey(-50%) rotate(90deg);}
	}

	transform
	----------------------------------------------------------------
	transform: scale(1.03);-o-transform: scale(1.03);-moz-transform: scale(1.03);-webkit-transform: scale(1.03);
	transform: rotate(135deg);-webkit-transform: rotate(135deg);
	position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

	background-image
	----------------------------------------------------------------
	background-image: url('/mobile/images/common/ico_recome.png');
	background-repeat: no-repeat;
	background-position: center;
	background-position-x: 10px;
	background-position-y: 10px;
    background-size: 100% 140px;
    background-size: 28%;
		#section_01{
			position: relative;
			background-color: transparent;
			background-image: url('/images/main/main_001.jpg');
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		#section_01::before{
			position: absolute;
			content: '';
			top:0px;
			left:0px;
			width: 100%;
			height: 100%;
			background-color: rgba(255,255,255,0.7);
		}



	radius:	좌상단	우상단	우하단	좌하단
	----------------------------------------------------------------
	border-top-left-radius: 35px;
	border-top-right-radius: 35px;
	border-bottom-right-radius: 35px;
	border-bottom-left-radius: 35px;

	라인수:	line-height 가 1.3em 이고 3라인을 자르기 때문에 height는 1.3em * 3 = 3.9rem
	----------------------------------------------------------------
	overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;word-wrap:break-word; 
	line-height: 1.3rem;
	height: 3.8rem;

	Center slide text vertically
	----------------------------------------------------------------
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;


[	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



[	box-sizing	word-wrap	]-----------------------------------------------------------------------
	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> 사용


[	height	center	]-------------------------------------------------------------------------------
	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;
	}


[	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);
		}
	}




[	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);
	}







----------------------------------------------------------------------------------------------------------------------------------*/