/******************************************************************************************************************************************
*	Author		: FUNNY
*	Caution		: CORE 스크립트에는 URL 추적 코드가 압축되어 있으며, 파일 호출 시 해당 URL이 Google Analytics에 Referral 됩니다.
				  Referral에 기록된 IP와 URL은 철저하게 감시하여 저작권 침해시,
				  "대한변리사회" (응용미술저작물) 침해로 처벌 될 수 있으니 유의하시기 바랍니다.
*******************************************************************************************************************************************/
@charset "utf-8";

/* Input */
input							{width:100%; height:42px; padding:0px 5px 0px 6px; font-size:14px; font-weight:500; line-height:42px; color:#333; caret-color:var(--IDTcolor) !important; border-width:1px; border-color:#DDD; border-style:solid; background:#F9F9F9; letter-spacing:0em; border-radius:3px; vertical-align:middle;}
input::-webkit-input-placeholder{font-size:13px; line-height:42px; font-weight:400; color:#BBB; letter-spacing:-0.75px;}
input::-moz-placeholder			{font-size:13px; line-height:42px; font-weight:400; color:#BBB; letter-spacing:-0.75px;}
input:-moz-placeholder			{font-size:13px; line-height:42px; font-weight:400; color:#BBB; letter-spacing:-0.75px;}
input:-ms-input-placeholder		{font-size:13px; line-height:42px; font-weight:400; color:#BBB; letter-spacing:-0.75px;}
input::placeholder				{font-size:13px; line-height:42px; font-weight:400; color:#BBB; letter-spacing:-0.75px;}
input:-o-placeholder			{font-size:13px; line-height:42px; font-weight:400; color:#BBB; letter-spacing:-0.75px;}
input:focus						{border-width:1px; border-color:var(--IDTcolor) var(--IDTcolor) var(--IDTcolor) var(--IDTcolor); border-style:solid; background:#FFF;
								-webkit-transition:border-color ease-in-out .45s; -o-transition:border-color ease-in-out .45s; transition:border-color ease-in-out .45s;}
input:hover						{background-color:#FFF; -webkit-transition:border-color ease-in-out .45s; -o-transition:border-color ease-in-out .45s; transition:border-color ease-in-out .45s;}		

input.act						{height:32px; padding:0px 10px 0px 11px; font:12px/34px NanumSquareR; color:#333; border-width:1px; border-color:#d57757 #f6a589 #f6a589 #d57757; border-style:solid; background:#fec8c2; letter-spacing:0em; border-radius:2px; vertical-align:middle;}

textarea						{max-width:1213px; min-width:200px; width:100%; min-height:250px; padding:10px; font-size:14px; line-height:25px; letter-spacing:0em; color:#333; border-width:1px; border-color:#DDD; border-style:solid; background:#F4F4F4; border-radius:2px;}
textarea:focus					{border-width:1px; border-color:var(--IDTcolor) var(--IDTcolor) var(--IDTcolor) var(--IDTcolor); border-style:solid; background:#FFF;
								-webkit-transition:border-color ease-in-out .45s; -o-transition:border-color ease-in-out .45s; transition:border-color ease-in-out .45s;}

/* Check Box */
input[type="checkbox"]					{z-index:1; width:18px; height:18px; display:inline-block; padding:0; vertical-align:middle; vertical-align:-3px; margin-right:3px; border:0px none; cursor:pointer; outline:none;}
input[type="checkbox"]:before, 
input[type="checkbox"]:after			{position:absolute; content: ""; outline: 0.1px solid transparent; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-transition: 0.15s ease all; transition: 0.15s ease all;}
input[type="checkbox"]:before			{width:18px; height:18px; border-radius:3px; border:1px solid #DADADA; background-color:#DFDFDF;}
input[type="checkbox"]:after			{border-radius:0px; margin-top:5px; margin-left:5px; width:8px; height:4px; border-right:3px solid #FFFFFF; border-top:3px solid #FFFFFF; 
										 -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
input[type="checkbox"]:checked:before	{border-width:1px; border-style:solid; border-color:var(--IDTcolor); background-color:var(--IDTcolor);}
input[type="checkbox"]:checked:after	{border-right:3px solid #FFFFFF; border-top:3px solid #FFFFFF;}
input[type="checkbox"] + label			{cursor:pointer; font-weight:500;}
input[type="checkbox"]:checked + label	{color:#000}

/* Check Box 2 - Big */
input[type="checkbox"].big				{z-index:1; width:22px; height:22px; display:inline-block; padding:0; vertical-align:middle; vertical-align:-5px; margin-right:3px; border:0px none; cursor:pointer; outline:none;}
input[type="checkbox"].big:before		{width:22px; height:22px; border-radius:3px; border:1px solid #CECECE; background-color:#FFFFFF;}
input[type="checkbox"].big:after		{margin-top:6px; margin-left:6px; width:10px; height:6px; border-right:3px solid #CECECE; border-top:3px solid #CECECE; border-radius:2px;
										 -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
input[type="checkbox"].big:checked:before{border:1px solid var(--IDTcolor); background-color:#FFF;}
input[type="checkbox"].big:checked:after{border-right:3px solid var(--IDTcolor); border-top:3px solid var(--IDTcolor); border-radius:2px;}

/* RADIO */
input[type="radio"]					{z-index:99; width:18px; height:18px; border-radius:50%; padding:0; margin-left:1px; margin-right:4px; border-style:none !important; cursor:pointer; outline:none; -webkit-transition: 0.15s ease all; transition: 0.15s ease all;}
input[type="radio"]					{background:#fff; -moz-box-shadow:0 0 0 0.1em #DDD; -webkit-box-shadow:0 0 0 0.1em #DDD; -ms-box-shadow:0 0 0 0.1em #DDD; box-shadow:0 0 0 0.1em #DDD;}
input[type="radio"]:checked 		{content:''; background:#FFF; -moz-box-shadow:0 0 0 0.2em #FFF inset; -webkit-box-shadow:0 0 0 0.2em #FFF inset; -ms-box-shadow:0 0 0 0.2em #FFF inset; box-shadow:0 0 0 0.2em #FFF inset; border:5px solid var(--IDTcolor) !important;}
input[type="radio"]	+ label			{cursor:pointer; font-weight:500;}
input[type="radio"]:checked	+ label	{color:#000}

/* RADIO Choose between 2 (Tab Type) */
.radio-wrap							{display:inline-block; letter-spacing:-1px}
.radio-wrap label					{display:inline-block}
.radio-wrap label:first-child span	{border-radius:0}
.radio-wrap label:last-child span	{border-radius:0}
.radio-wrap label+label span		{margin-left:-1px}
.radio-wrap input					{display:none}
.radio-wrap input+span				{position:relative; display:block; padding:0 20px; min-width:62px; height:34px; background-image:none; background:#fff; font-size:13px; line-height:32px; color:#666; text-align:center; border-width:1px; border-style:solid; border-color:#CCC; cursor:pointer}
.radio-wrap input+span.check		{padding:0 20px; min-width:62px; color:#FFF;  border-width:1px; border-style:solid; z-index:1} /* [[THEME_COLOR]] */
.radio-wrap input:disabled+span		{background:#f5f5f5; color:#999; border:1px solid #bbb; pointer-events:none; cursor:default}
.radio-wrap+.inline.num-box			{margin-left:10px}
.radio-wrap+.com-list-box			{margin-top:10px}
.radio-wrap.yn label+label span.check {background:#999; color:#fff; border-color:#999}

/* Slide CheckBox */
input[type="checkbox"].slide					{z-index:1; position:relative; top:-4px; display:inline-block; padding:0; margin:0 28px 0 0; border:0px none; cursor:pointer; outline:none; 
												box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box;}
input[type="checkbox"].slide:before, 
input[type="checkbox"].slide:after				{position:absolute; content: ""; -webkit-transition: 0.15s ease all; transition: 0.15s ease all;}
input[type="checkbox"].slide:before				{width:40px; height:24px; border-radius:24px; border:1px solid #DDD; background-color:#FFFFFF;}
input[type="checkbox"].slide:after				{margin:1px 0 0 0; width:24px; height:24px; background-color:#AAA; border:none !important; border-radius:100%;}

input[type="checkbox"].slide:checked:before		{background-color:#FFFFFF;}
input[type="checkbox"].slide:checked:after		{margin:1px 0 0 17px; background-color:var(--IDTcolor);}
input[type="checkbox"].slide + label			{position:relative; top:-2px; cursor:pointer; font-size:13px; font-weight:700;}
input[type="checkbox"].slide:checked + label	{color:var(--IDTcolor)}


/* Check Box (BIG) + Label Text */
input[type=checkbox].css-checkbox						{position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr	{padding-left:30px; height:26px; display:inline-block; background-repeat:no-repeat; background-position:0 0; font:14px/25px celmonKr_bold; letter-spacing:-0.07em; vertical-align:middle; cursor:pointer; }
input[type=checkbox].css-checkbox:checked + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.chk	{background-position: 0 -26px; }
label.css-label											{background-image:url(/img/icon/checkBox_big.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

/* Check Box (MIDDLE) + Label Text */
input[type=checkbox].mid-checkbox						{position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=checkbox].mid-checkbox + label.mid-label,
input[type=checkbox].mid-checkbox + label.mid-label.clr	{padding-left:25px; height:20px; display:inline-block; background-repeat:no-repeat; background-position:0 0; vertical-align:middle; cursor:pointer;}
input[type=checkbox].mid-checkbox:checked + label.mid-label,
input[type=checkbox].mid-checkbox + label.mid-label.chk	{background-position: 0 -20px; }
label.mid-label											{background-image:url(/img/icon/checkBox.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

/* FILE INPUT */
.input_file							{display:inline-block; overflow:hidden; position:relative; vertical-align:middle; width:100%; margin:0px;}
.input_file .fakeFileTxt			{background:#fff; width:100%; border:0; box-sizing:border-box; border:1px solid #e4e4e4; color:#777;}
.input_file .buttonImg				{background:#5f687a; width:80px; padding:0px; line-height:36px; position:absolute; top:0px; right:0px; color:#FFF; border:0; box-sizing:border-box; letter-spacing:-1px;}
.input_file .realFile				{cursor:pointer !important; opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0;}
.input_file .realFile				{position:absolute; right:0px; top:0px; width:100%;}
.viewimgWRAP						{position:relative; margin:5px auto;}

@media screen and (max-width:980px) {
.input_file .buttonImg				{top:1px;}
}


/* File Input */
.file_input label					{position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; width:100px; height:38px; background:#5db626; border-radius:2px 0 0 2px; font-size:14px; line-height:38px; color:#FFF; text-align:center;}
.file_input label input				{position:absolute; width:0; height:0; overflow:hidden; display:none !important;}
.file_input input[type=text]		{margin-left:-3px; vertical-align:middle; display:inline-block; height:38px; width:calc(100% - 97px) !important; padding:0px 10px 0px 10px; font-size:14px; line-height:38px; color:#888; border-width:1px; border-color:#b1b2b3 #e4e4e4 #e4e4e4 #b1b2b3; border-style:solid; background:#F4F4F4; letter-spacing:0em; border-radius:2px;}

/* SELECT */
select								{cursor:pointer; font-size:inherit !important; font-family:inherit !important; outline:none;}
.select								{overflow:hidden; position:relative; background:#FFF; height:42px; width:100%; min-width:120px; border-radius:2px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.select select						{box-sizing:border-box; border:1px solid #dbdde2; line-height:40px; height:100%; width:100%; color:#858585; letter-spacing:-1px; padding-left:10px; position:absolute; left:0; top:0; z-index:2; background:none !important; }
.select select						{width:100%; -webkit-appearance:none; appearance:none; -moz-appearance:none; -webkit-user-select:none; padding-right:40px; border-radius:0; -webkit-border-radius:0 !important;}
.select select::-ms-expand			{display:none;}
.select .icons						{height:100%; position:absolute; border-left:1px solid #EDEDED; right:0; top:0; z-index:1; text-align:center; width:40px; height:42px; line-height:40px; font-size:0.85em;}
.select .icons:before				{position:absolute; left:14px; top:14px; width:10px; height:10px; line-height:36px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.select select:focus				{border-color:var(--IDTcolor); color:#444 !important;}
.select select:focus+ .icons:before	{transform: rotate(225deg); -webkit-transform: rotate(225deg); top:18px; border:2px solid var(--IDTcolor); border-top:none; border-left:none;}
.select_arrow:before				{content:''; position:absolute; border:2px solid #C4C4C4; border-top:none; border-left:none; -webkit-transform:rotate(45deg); transform:rotate(45deg);}

/******************************************************************************************************************************************
*	BUTTON CSS - 2019.07.29 : FUNNY (Ver.3.0)
*******************************************************************************************************************************************/
/* COMMON BUTTON AREA TYPE CONTROL */
.buttonWrap						{display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; align-items:auto; align-content:start; /*width:100%*/; margin:10px auto; text-align:center; box-sizing:border-box;}
.buttonWrap a					{margin:0 5px;}
.buttonWrap a:first-child		{margin-left:0px;}
.buttonWrap a:last-child		{margin-right:0px;}

/* Button Size */
.btnSD							{display:inline-block; padding:0em .3em 0em .3em !important; text-align:center; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; font-size:11px; line-height:20px; letter-spacing:-1px; cursor:pointer; text-decoration:none;}
.btnMD							{display:inline-block; padding:0px 7px !important; text-align:center; font-size:12px; line-height:24px; letter-spacing:-1px; cursor:pointer; text-decoration:none;}
.btnLD							{display:inline-block; padding:0px 30px !important; font-size:15px; font-weight:400; line-height:40px; text-align:center; vertical-align:middle; cursor:pointer; text-decoration:none;} /* 게시판 */
.btnED							{display:inline-block; width:100%; margin:3px 0; text-align:center; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; font-size:18px; font-weight:500; line-height:43px; letter-spacing:-1px; cursor:pointer; text-decoration:none;} /* 양식제출, 페이지 */
.btnIPT							{display:inline-block; padding:0 12px; margin-left:-2px; height:42px; font:13px/42px NanumSquareR; letter-spacing:-0.07em; text-align:center; vertical-align:middle; border-radius:2px; text-decoration:none; cursor:pointer; } /* Input */

@media screen and (max-width:980px) {
.buttonWrap						{justify-content:space-between;}
.buttonWrap.num_1 a,
.buttonWrap.num_1 button		{width:calc(100% - 0px);}
.buttonWrap.num_2 a,			
.buttonWrap.num_2 button		{width:calc(50% - 5px);}
.buttonWrap.num_3 a,			
.buttonWrap.num_3 button		{width:calc(33.333% - 7px);}
.buttonWrap.num_4 a,			
.buttonWrap.num_4 button		{width:calc(25% - 4px);}

.btnLD							{display:inline-block; width:100%; margin:3px 0; text-align:center; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; font-size:17px; line-height:40px; letter-spacing:-1px; font-weight:500; letter-spacing:-1.5px; cursor:pointer; text-decoration:none;}
}
.btn					{display:inline-block; box-sizing:border-box; line-height:1.5; margin:0 0 0 2px; cursor:pointer; text-decoration:none !important; text-align:center; transition: all .15s ease;}
.btn.bnR				{font-size:13px; line-height:34px; font-weight:400; letter-spacing:-1px; padding:0rem .75rem !important; border-radius:0rem; vertical-align:middle}
/* Responsive Width */
.Rper100-50per			{display:inline-block !important; width:50% !important; margin:0px !important;}

@media screen and (max-width:980px) {
.Rper100-50per			{width:calc(100% - 100px) !important;}
}
/* Button Color - 2018.04.24 : FUNNY */
.BIDcolor				{background:var(--IDTcolor) !important; border:1px solid var(--IDTcolor); color:#FFFFFF !important; text-decoration:none;} /* Save, Modify */
.BIDcolor:hover 		{background:var(--IDTcolor-darker) !important; border:1px solid var(--IDTcolor-darker); color:#FFFFFF !important; text-decoration:none;}

.Bdarkgray				{background:#444444 !important; border:1px solid #444444; color:#FFFFFF !important; text-decoration:none;} /* Gate(Point) Page */
.Bdarkgray:hover 		{background:#333333 !important; border:1px solid #000000; color:#FFFFFF !important; text-decoration:none;}

.Bhgray					{background:#97a4c1; border:1px solid #8b98b2; color:#FFFFFF; text-decoration:none;}  /* Detail Search  */
.Bhgray:hover			{background:#8894ae; border:1px solid #7b869d; color:#FFFFFF; text-decoration:none;}

.Bdefault				{background:#FFFFFF; border:1px solid #dbdde2; color:#666666; text-decoration:none;} /* Default */
.Bdefault:hover 		{background:#F6F6F6; border:1px solid #b9bdc7; color:#555555; text-decoration:none;}
.Bdefault:hover a		{color:#555555 !important; text-decoration:none;}

.Blightgray				{background:#EEEEEE; border:1px solid #dbdde2; color:#666666; text-decoration:none;} /* List, Cancel, Del */
.Blightgray:hover 		{background:#EEEEEE; border:1px solid #b9bdc7; color:#333333; text-decoration:none;}
.Blightgray:hover a		{color:#555555 !important; text-decoration:none;}

.Bgray					{background:#6d778c; border:1px solid #616a7d; color:#FFFFFF; text-decoration:none;}  /* Input, File Add */
.Bgray:hover			{background:#5f687a; border:1px solid #5f687a; color:#FFFFFF; text-decoration:none;}

.Bflugreen				{background:#00c73c; border:1px solid #00ae34; color:#FFFFFF; text-decoration:none;} /* Only Excel */
.Bflugreen:hover		{background:#00ae34; border:1px solid #007022; color:#FFFFFF; text-decoration:none;}


/* 인풋과 세트가 되는 버튼 */
a.iptBTN, .iptBTN 					{cursor:pointer; display:inline-block; margin-left:2px; height:42px; padding:0 12px; font-size:14px; font-weight:500; line-height:40px; text-align:center; vertical-align:middle; border-radius:2px; text-decoration:none;}
a.iptBTN.basic, .iptBTN.basic		{background:#F5F5F5; color:#555555; border:1px solid #DDDDDD}
a.iptBTN.darkgray, .iptBTN.darkgray	{background:#848f9a; color:#FFFFFF; border:1px solid #737d86;}



/* Board List Top Area Section Control */
.listPageview					{position:relative; width:100%; margin-bottom:5px;}
.listPageview ul				{float:left; display:inline-block;}
.listPageview li				{display:inline-block; float:left; padding:0 10px 0 0; font-size:11px; line-height:34px; letter-spacing:0em; color:#777;}


/* Button Animation : 2020.08.18 */
.hvr-float-shadow				{display:inline-block; position:relative; vertical-align:middle; /* transform:translateZ(0); */-webkit-transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0);
								-webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-property:transform; transition-property:transform;}
.hvr-float-shadow:before		{pointer-events:none; position:absolute; z-index:-1; content:''; top:100%; left:5%; height:10px; width:90%; opacity:0;
								background:-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
								background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
								/* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity;}
.hvr-float-shadow:hover, 
.hvr-float-shadow:focus, 
.hvr-float-shadow:active		{-webkit-transform: translateY(-5px);transform: translateY(-5px);/* move the element up by 5px */}
.hvr-float-shadow:hover:before, 
.hvr-float-shadow:focus:before, 
.hvr-float-shadow:active:before {opacity: 1;-webkit-transform: translateY(5px);transform: translateY(5px);/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */}

/* Buzz Out (Review & Question : 2020.08.18) */
.hvr-buzz-out					{display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing: grayscale; /* transform:perspective(1px) translateZ(0); */}
.hvr-buzz-out:hover, 
.hvr-buzz-out:focus, 
.hvr-buzz-out:active			{-webkit-animation-name:hvr-buzz-out; animation-name:hvr-buzz-out; -webkit-animation-duration:0.75s; animation-duration:0.75s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:1; animation-iteration-count:1;}
@-webkit-keyframes hvr-buzz-out	{
	10%	{-webkit-transform:translateX(3px) rotate(2deg); transform:translateX(3px) rotate(2deg);}
	20%	{-webkit-transform:translateX(-3px) rotate(-2deg); transform:translateX(-3px) rotate(-2deg);}
	30%	{-webkit-transform:translateX(3px) rotate(2deg); transform:translateX(3px) rotate(2deg);}
	40%	{-webkit-transform:translateX(-3px) rotate(-2deg); transform:translateX(-3px) rotate(-2deg);}
	50%	{-webkit-transform:translateX(2px) rotate(1deg); transform:translateX(2px) rotate(1deg);}
	60%	{-webkit-transform:translateX(-2px) rotate(-1deg); transform:translateX(-2px) rotate(-1deg);}
	70%	{-webkit-transform:translateX(2px) rotate(1deg); transform:translateX(2px) rotate(1deg);}
	80%	{-webkit-transform:translateX(-2px) rotate(-1deg); transform:translateX(-2px) rotate(-1deg);}
	90%	{-webkit-transform:translateX(1px) rotate(0); transform:translateX(1px) rotate(0);}
	100%{-webkit-transform:translateX(-1px) rotate(0); transform:translateX(-1px) rotate(0);}
}
@keyframes hvr-buzz-out			{
	10% {-webkit-transform:translateX(3px) rotate(2deg); transform:translateX(3px) rotate(2deg);}
	20% {-webkit-transform:translateX(-3px) rotate(-2deg); transform:translateX(-3px) rotate(-2deg);}
	30% {-webkit-transform:translateX(3px) rotate(2deg); transform:translateX(3px) rotate(2deg);}
	40% {-webkit-transform:translateX(-3px) rotate(-2deg); transform:translateX(-3px) rotate(-2deg);}
	50% {-webkit-transform:translateX(2px) rotate(1deg); transform:translateX(2px) rotate(1deg);}
	60% {-webkit-transform:translateX(-2px) rotate(-1deg); transform:translateX(-2px) rotate(-1deg);}
	70% {-webkit-transform:translateX(2px) rotate(1deg); transform:translateX(2px) rotate(1deg);}
	80% {-webkit-transform:translateX(-2px) rotate(-1deg); transform:translateX(-2px) rotate(-1deg);}
	90% {-webkit-transform:translateX(1px) rotate(0); transform:translateX(1px) rotate(0);}
	100%{-webkit-transform:translateX(-1px) rotate(0); transform:translateX(-1px) rotate(0);}
}

/* Underline From Left (common.css - gnbmenu Hover : 2020.08.18)*/
.hvr-underline-from-left				{display:inline-block; vertical-align:middle; position:relative; overflow:hidden; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0);}
.hvr-underline-from-left:before			{content: ""; position:absolute; z-index:-1; left:0; right:100%; bottom:0; background:var(--IDTcolor); height:2px;
										-webkit-transition-property:right; transition-property:right; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out;}
.hvr-underline-from-left:hover:before, 
.hvr-underline-from-left:focus:before, 
.hvr-underline-from-left:active:before	{right:0px;/*right:20px;*/}

/* Reveal (goods.css - pageCategoryWRAP Hover : 2020.08.18)*/
.hvr-reveal								{display:inline-block; vertical-align:middle; position:relative; overflow:hidden; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0);}
.hvr-reveal:before						{content: ""; position:absolute; z-index:-1; left:0; right:0; top:0; bottom: 0; border-color:#5db626; border-radius:3px; border-style:solid; border-width:0;
										-webkit-transition-property:border-width; transition-property:border-width; -webkit-transition-duration:0.1s; transition-duration:0.1s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out;}
.hvr-reveal:hover:before, 
.hvr-reveal:focus:before, 
.hvr-reveal:active:before				{-webkit-transform: translateY(0); transform: translateY(0); border-width:3px;}