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

/* Input */
input							{width:100%; height:var(--iptbtnHeight); box-sizing:border-box; background-clip:padding-box; padding:0.375rem 0.75rem; font-size:var(--font-size); font-weight:600; line-height:1; color:#111; border-width:1px; border-color:#f4f4f6; border-style:solid; background:#f4f4f6; border-radius:3px; vertical-align:middle; -webkit-appearance:none; transition:all .3s; caret-color:var(--IDTcolor);}
input::placeholder				{font-size:var(--FS14); color:#BBB; letter-spacing:-0.05rem;}
input::-webkit-input-placeholder{font-size:var(--FS14); color:#BBB; letter-spacing:-0.05rem;}
input::-moz-placeholder			{font-size:var(--FS14); color:#BBB; letter-spacing:-0.05rem;}
input:-ms-input-placeholder		{font-size:var(--FS14); color:#BBB; letter-spacing:-0.05rem;}

input:focus						{border-width:2px; border-color:var(--IDTcolor) var(--IDTcolor) var(--IDTcolor) var(--IDTcolor); border-style:solid; 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:read-only					{border-width:1px; border-color:#E3E3E3; border-style:solid; background-color:#E3E3E3; cursor:not-allowed;}
input.brd						{border:1px solid #DDD; background-color:#FFF;}
input.idtbrd					{border:2px solid var(--IDTcolor); background-color:#FFF;}

@media (prefers-reduced-motion:reduce) {input{transition:none;}}

textarea						{min-width:200px; width:100%; min-height:250px; padding:10px; font-size:var(--font-size); 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;}

label.error						{font-size:11px; font-weight:900; line-height:22px; color:var(--IDTcolor); margin:5px 0 0 0; position:absolute; bottom:-10px; left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-color:#fff}


/* 인풋과 세트가 되는 버튼 (Add div class before input : 2023.01.17) */
.btnset_input						{position:relative; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch; width:100%; } 
.btnset_input input					{flex:1 1 auto; width:1%; border-top-left-radius:3px; border-top-right-radius:0px; border-bottom-right-radius:0px; border-bottom-left-radius:3px;}
.btnset_input input.leftSet			{flex:1 1 auto; width:1%; border-top-left-radius:0px; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:0px;}
.btnset_input button				{display:flex; align-items:center; padding:0.375rem 0.75rem; border-top-left-radius:0px; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:0px;}
.btnset_input .setbtn				{display:flex; align-items:center; padding:0.375rem 0.75rem; border-top-left-radius:0px; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:0px;}
.btnset_input label.error			{position:absolute; top:var(--iptbtnHeight); left:0px;}
.btnset_input button.btnset_middle	{border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-right-radius:0px; border-bottom-left-radius:0px; height: var(--iptbtnHeight);}
.btnset_input button.searchbtn		{padding:0.375rem 1rem;}

/* File attachment input : 2025.01.14 */
.input_file						{position:relative; display:flex; flex-direction:row; align-items:stretch; width:100%; }
.input_file .fakeFileTxt		{flex: 1 1 auto; width:1%; border-width:1px; border-color:#ced4da; border-style:solid; border-top-left-radius:3px; border-top-right-radius:0px; border-bottom-right-radius:0px; border-bottom-left-radius:3px;}
.input_file .buttonImg			{width:calc(100% + 1px); height:35px; background-color:var(--mygray); border:1px solid var(--mygray); color:#FFF; display:flex; align-items:center; margin-left:-1px; font-size:var(--FS14); font-weight:500; padding:0.375rem 0.75rem; border-top-left-radius:0px; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:0px;}
.input_file .realFile			{position:absolute; right:0px; top:0px; width:100%; cursor:pointer !important; opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0;}
.input_file input				{height:35px; font-size:var(--FS14); padding:0.375rem 0.75rem; border-top-left-radius:3px; border-bottom-left-radius:3px;}

/* File attachment input - add files : 2024.03.19 */
.li_files								{margin-bottom:10px; list-style:none; padding:0;}
.input_file	.fidx						{display:flex; align-items:center; justify-content:center; height:35px; width:35px; aspect-ratio:1 / 1; border:1px solid #DDD; background:#F2F2F2; text-align:center; font-size:var(--FS12); border-radius:0.25rem; margin-right:3px}
.input_file	.file_addbtn				{display:flex; align-items:center; min-width:60px; max-width:60px; height:35px; margin-left:0.3rem; font-size:var(--FS14); padding:0; border-radius:3px;}

.viewfileWRAP							{display:flex; flex-wrap:nowrap; align-items:center; margin-top:0.25rem}
.viewfileWRAP .addfile_maxwidth			{display:black; font-size:var(--FS13); font-weight:var(--FW500); min-width:240px; max-width:240px; padding:0.3rem 0.5rem; border:1px dashed #CCC; border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all}
.viewfileWRAP .addfile_maxwidth:hover	{color:#000; border:1px dashed #222;}
.viewfileWRAP .delete_attachment		{display:flex; align-items:center; margin-left:0.2rem; min-width:90px; font-size:var(--FS14)} 


/* Check Box */
input[type="checkbox"]					{position:relative; width:20px; height:20px !important; display:inline-block; padding:0; vertical-align:middle; 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; -webkit-transition: 0.15s ease all; transition: 0.15s ease all;}
input[type="checkbox"]:before			{width:20px; height:20px; border-radius:3px; border:1px solid #DADADA; background-color:rgba(102, 102, 102, 0.2);}
input[type="checkbox"]:after			{border-radius:0px; margin-top:6px; margin-left:5px; width:10px; height:6px; 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:1px solid 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; margin-right:1px;}
input[type="checkbox"]:checked + label	{color:#000}

/* Check Box (If Position absolute : Over the object) */
input[type="checkbox"].PA				{position:absolute; top:5px; left:5px; z-index:2; background-color:rgba(255, 255, 255, 0.3);}
input[type="checkbox"].PA:before		{background-color:rgba(255, 255, 255, 0.05);}
input[type="checkbox"].PA:after			{border-radius:0px; border-right:3px solid transparent; border-top:3px solid transparent;
										 -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
input[type="checkbox"].PA:checked:before{border:1px solid var(--IDTcolor); background-color:var(--IDTcolor);}
input[type="checkbox"].PA:checked:after	{border-right:3px solid #FFFFFF; border-top:3px solid #FFFFFF;}

/* Check Box 2 - Big */
input[type="checkbox"].big				{z-index:1; width:24px !important; height:24px !important; display:inline-block; padding:0; vertical-align:middle; margin-right:5px; border:0px none; cursor:pointer; outline:none;}
input[type="checkbox"].big:before		{width:24px; height:24px; border-radius:3px; border:1px solid #CECECE; background-color:#FFFFFF;}
input[type="checkbox"].big:after		{margin-top:6px; margin-left:6px; width:14px; height:8px; 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;}

/* Check Box 3 - Simple */
input[type="checkbox"].simple				{z-index:1; width:18px !important; height:18px !important; display:inline-block; padding:0; vertical-align:middle; margin-right:5px; border:0px none; cursor:pointer; outline:none;}
input[type="checkbox"].simple:before		{width:18px; height:18px; border-radius:2px; border:1px solid #CECECE; background-color:#FFFFFF;}
input[type="checkbox"].simple:after			{}
input[type="checkbox"].simple:checked:before{border:1px solid var(--IDTcolor); background-color:var(--IDTcolor);}
input[type="checkbox"].simple:checked:after	{margin-top:5px; margin-left:4px; border-right:3px solid var(--white); border-top:3px solid var(--white); 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; word-break:break-word; margin-right:5px;}
input[type="radio"]:checked	+ label	{color:#000}

@media screen and (max-width:980px) {
	input[type="radio"]	+ label		{line-height:2.2em;}
}

/* RADIO - Button Type : 24.10.02 */
.RDOBT									{display:flex; flex-wrap:wrap; width:100%;}
.RDOBT input[type="radio"]				{display:flex; align-items:center; width:auto; height:100%; color:rgba(0, 0, 0, 0.5); background-color:rgba(0, 0, 0, 0.1); margin:0px 5px 5px 0px; border-radius:4px; padding:8px 8px; transition:all 100ms linear; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; cursor:pointer; -moz-box-shadow:none; -webkit-box-shadow:none; -ms-box-shadow:none; box-shadow:none;}
.RDOBT input[type="radio"]:checked		{background-color:var(--IDTcolor); color:#FFF; border:0px !important}
.RDOBT input[type="radio"]:before		{content:attr(label); display:inline-block; text-align:center; width:100%;}
.RDOBT input[type="radio"]:first-child	{margin-left:0px;}
.RDOBT input[type="radio"]:last-child	{margin-right:0px;}


/* 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 : 2023.02.17 */
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; background-color:transparent;
												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 #FFF; background-color:#CCC;}
input[type="checkbox"].slide:after				{margin:2px 0 0 2px; width:20px; height:20px; background-color:#FFF; border:none !important; border-radius:100%;}

input[type="checkbox"].slide:checked:before		{background-color:var(--IDTcolor);}
input[type="checkbox"].slide:checked:after		{margin:2px 0 0 18px; background-color:#FFF;}
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)}


/* Slide CheckBox ON/OFF : 2024.04.18 */
input[type="checkbox"].slideonf					{position:relative; z-index:1; font-size:var(--FS09F); font-weight:800; letter-spacing:-0.2px; width:50px !important; height:26px !important; display:inline-block; padding:0; border:0px none; cursor:pointer; outline:none; background-color:transparent;}
input[type="checkbox"].slideonf:before, 
input[type="checkbox"].slideonf:after			{position:absolute; content:""; -webkit-transition: 0.15s ease all; transition:0.15s ease all;}
input[type="checkbox"].slideonf:before			{content:'OFF'; display:flex; align-items:center; justify-content:flex-end; color:#777; padding-right:0.2rem; width:50px; height:26px; border-radius:26px; background-color:#DDD;}
input[type="checkbox"].slideonf:after			{margin:2px 0 0 2px; width:22px; height:22px; background-color:#FFF; border:none !important; border-radius:100%; transform:none !important;}

input[type="checkbox"].slideonf:checked:before	{content:'ON'; display:flex; align-items:center; justify-content:flex-start; background-color:var(--IDTcolor); color:#FFF; padding-left:0.3rem}
input[type="checkbox"].slideonf:checked:after	{margin:2px 0 0 26px; background-color:#FFF;}
input[type="checkbox"].slideonf + label			{position:relative; top:-2px; cursor:pointer; font-size:var(--FS11F); font-weight:700;}
input[type="checkbox"].slideonf: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(/shop/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(/shop/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;}

.fixed_button		{position:sticky; left:0; bottom:0; padding:1px 10px; width:100%; z-index:200; box-sizing:border-box; background-color:rgba(0, 0, 0 ,0.6);}

/* 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 : 2023.12.05 */
select								{cursor:pointer; font-size:0.875rem; font-weight:500; outline:none;}
.select select::-ms-expand			{display:none;}
.select								{overflow:hidden; position:relative; background:#FFF; height:var(--iptbtnHeight); width:100%; min-width:60px; border-radius:2px; z-index:1;}
.select.maxwidth					{width:max-content;}
.select select						{position:relative; left:0; top:0; box-sizing:border-box; border:1px solid var(--ipt-color); height:100%; width:100%; color:#858585; letter-spacing:-1px; padding-left:10px; z-index:2 !important; background:none !important; }
.select select						{width:100%; -webkit-appearance:none; appearance:none; -moz-appearance:none; -webkit-user-select:none; padding-right:var(--iptbtnHeight); border-radius:2px; -webkit-border-radius:2px !important;}
.select .icons						{position:absolute; right:0; top:0; z-index:1; width:var(--iptbtnHeight); height:100%;}
.select .icons:before				{position:absolute; left:50%; top:calc(50% - 2px); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;}
.select select:focus				{border-style:solid; border-width:2px; border-color:var(--IDTcolor); color:#444 !important;}
.select select:focus+ .select_arrow:before	{left:50%; top:calc(50% + 2px); transform:translate(-50%, -50%) rotate(225deg); -webkit-transform:translate(-50%, -50%) rotate(225deg); border:2px solid var(--IDTcolor); border-top:none; border-left:none;}
.select_arrow:before				{content:''; position:absolute; width:10px; height:10px; border:2px solid #C4C4C4; border-top:none; border-left:none; transform:translate(-50%, -50%) rotate(45deg); -webkit-transform:translate(-50%, -50%) rotate(45deg);}

/* Basic Search Input : 2023.02.03
.search_input						{position:relative;}
.search_input .search_inputBtn  	{position:absolute; top:50%; right:15px; width:20px; height:20px; text-indent:-1000em; padding:0px; background:url('/dist/img/icon_search.svg') no-repeat; color:#ff9900;background-size:20px auto; border:0px; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
.search_input a.icon				{position:absolute; z-index:9; top:50%;right:40px; width:20px; height:20px; text-indent:-1000em; background:url('/web/img/common/icon_common.png') no-repeat -20px -40px; background-size:500px auto; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
.search_input .icon.close			{opacity:0; -webkit-transition:.3s; transition:.3s;}
#searchAction.active .icon.close	{opacity:1;} */

 /* 기본 배송지 설정, 수신동의 (Check박스의 Label) */
.infoOK								{margin:20px auto; font-size:13px; line-height:20px; color:#777;}


/* Datepicker */
.datepickerWrap						{display:flex; align-items:center; justify-content:space-between;}
.datepickerWrap	.datepickeript		{position:relative; flex-grow:1;}
.datepickerWrap .datepickeript i	{position:absolute; color:#AAA; top:50%; right:5px; width:16px; height:16px; padding:0px; border:0px; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
.datepickerWrap .fromto_day			{margin:0 5px; flex-shrink:0s;}
.daterange							{width:100%; min-width:140px;}
.daterange.wlimited					{min-width:140px;}					

@media screen and (max-width:980px) {	
	.daterange.wlimited				{max-width:100%;}
}

/*******************************************************************************************************************************************
*	Button Control - 2023.01.19 (Ver.4.0) : btnWRAP > class="multiBTN + btn + (wide / large/ middle) + color" : Setting
*******************************************************************************************************************************************/
.btnWRAP					{display:flex; /*flex-wrap:wrap;*/ flex-direction:row; justify-content:center; align-items:auto; align-content:start;}

.multiBTN					{flex:0 1 auto; margin:5px;}
.multiBTN:first-child		{margin-left:0px;} 
.multiBTN:last-child		{margin-right:0px;}

.btnWRAP.FJCSB p			{display:flex;}  /* 2개의 버튼 영역 양쪽 정렬시 P로 좌우분리 */
@media screen and (max-width:500px) {
	.btnWRAP.FJCSB				{display:flex; flex-direction:column;}
	.btnWRAP.FJCSB p			{display:flex; width:100%;}
	.btnWRAP.FJCSB:first-child	{margin-left:0px;} 
	.btnWRAP.FJCSB:last-child	{margin-right:0px;}
}

.multicolBTN				{flex:0 1 auto; margin:3px;} /* Vertical Type Button */

.btnWRAP.per100				{display:flex; margin-right:0px; margin-left:0px; justify-content:space-between; align-content:start; align-items:center; flex-wrap:wrap;}
.btnWRAP.per100	.multiBTN	{margin:3px 0px;}

.btn						{position:relative; display:flex; width:100%; align-items:center; align-content:center; justify-content:center; /*flex-wrap:wrap;*/ font-weight:500; height:var(--btnipt-height); text-align:center; vertical-align:middle; background-color:transparent; border:1px solid transparent; padding:0 0.75rem; letter-spacing:-0.03rem; text-decoration:none; 
							-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer;
							transition:filter 0.3s ease-in-out, background .2s ease, color .1s ease-in-out, border-color .1s ease, box-shadow .15s ease-in-out; overflow:hidden;}
.btn:after					{content:''; position:absolute; width:100%; height:100%; left:50%; top:50%; opacity:0.5; transition:.5s all; transform:translateX(-50%) translateY(-50%) scaleY(0.05);}
.btn:hover:after			{background:#000; transform:scale(2.5); opacity:0;}
/*.btn:empty				{display:none;} 버튼에 내용이 없을 시 버튼을 안보이게 */
.btn.disabled, .btn[disabled]{box-shadow:none; cursor:not-allowed; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=65); filter:alpha(opacity = 65); -webkit-opacity:.65; -khtml-opacity:.65; -moz-opacity:.65; opacity:.65;}
.btn.not					{pointer-events:none;} /* 버튼 효과없애기 a 대신 span으로 적용 시 */
.btn.not:hover:after		{background:none;transform:none; opacity:0;}


/*.btn:hover				{filter:brightness(92%); color:inherit;}*/
/* btn Hover boom type */
.btn.boom					{transition:all .15s ease;}
.btn.boom:after				{background:none;}
.btn.boom:hover				{box-shadow:0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); transform:translateY(-2px); -webkit-transform: translateY(-2px); text-decoration:none;}

.btn.form					{height:var(--iptbtnHeight); padding:0rem 0.65rem !important; font-size:var(--FS-basic); font-weight:600; border-radius:3px;}
.btn.wide					{height:var(--iptbtnHeight_Higher); padding:0rem 0.65rem !important; font-size:1.125rem; font-weight:600; border-radius:3px;}
.btn.large					{width:auto; padding:0rem 1rem !important; font-size:1rem; font-weight:600; border-radius:0.15rem;} /* Board */
.btn.basic					{width:auto; height:var(--iptbtnHeight); font-weight:600; border-radius:0.15rem;} /* INPUT Same Height Size */
.btn.medium					{width:auto; padding:0.5rem 0.5rem; font-size:var(--FS14); font-weight:600; border-radius:4px;}
.btn.middle					{width:auto; height:auto; padding:0.25rem 0.5rem !important; font-weight:600; border-radius:2px;}
.btn.small					{width:auto; height:auto; padding:0.25rem 0.5rem !important; font-size:0.750rem; font-weight:600; border-radius:2px;}
.btn.xsmall					{width:fit-content !important; height:auto; padding:0.25rem 0.4rem !important; font-size:0.750rem; font-weight:600; border-radius:2px;}
.btn.mini					{width:auto; height:auto; padding:0.25rem 0.25rem !important; font-size:var(--FS10); font-weight:700; border-radius:0.25rem; white-space:nowrap; line-height:1;}
.btn.coltype				{width:100%; height:auto; padding:0.4em 0.5em !important; font-size:0.825rem; font-weight:600; border-radius:2px;} /* Responsive use only if Vertical Type */
.btn.lstchk					{width:auto; height:auto; padding:0.25rem 0.25rem !important; color:#888; font-size:0.875rem; font-weight:100; border-radius:1px; margin:0 4px;} /* List All Check & Delete */

.btn.mm-medium				{width:100%; padding:0.5rem 0.5rem !important; font-size:var(--FS-mm-medium); font-weight:600; border-radius:4px;} /* 삭제예정*/

.btn[class*='round']		{border-radius:50px; padding-left:0.7rem !important; padding-right:0.7rem !important;}  /* Unconditionally border-radius 50px */
.btn[class*='per100']		{width:100% !important;} /* Unconditionally Width 100% */
.btn[class*='fit']			{width:fit-content !important;}  Unconditionally Width fit-content */
.btn[class*='disabled']		{opacity: .65;} /* Unconditionally Disabled */
.btn[class*='disabled']:after,		
.btn[class*='disabled']:hover:after	{opacity:0;}

@media screen and (max-width:980px){
	.btn[class*='rper100']		{width:100% !important;} /* Reaction */
}

.btn.focus, .btn:focus				{outline:0; box-shadow:none;}
.btn.disabled, .btn:disabled		{opacity:0.65; box-shadow:none;}
.btn:not(:disabled):not(.disabled)	{cursor:pointer;}
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {box-shadow:none;}
a.btn.disabled,
fieldset:disabled a.btn				{pointer-events:none; /*cursor: not-allowed;*/}

/* use in conjunction with other */
.btn i						{margin-right:5px; font-size:inherit; display:flex !important; align-items:center !important;}
.btn i.nomargin				{margin-right:0px; font-size:inherit; display:flex !important; align-items:center !important;}
.btn-group .btn i			{margin-right:0px; font-size:inherit;}


@media (prefers-reduced-motion: reduce) {
	.btn {transition:none;}
}

@media screen and (max-width:980px){
	.multiBTN					{flex:1 1 auto;}

	.multicolBTN:first-child	{margin-left:0px;} 
	.multicolBTN:last-child		{margin-right:0px;}
	.multicolBTN.btn.coltype	{flex:1 1 auto; width:auto;}

	.multiBTN.btn.middle		{flex:0 0 auto !important;}
}


/* meta_common으로 색상 통일하고 아래코드 삭제 예정 : 2024.01.15 */
.BIDcolor				{background:var(--IDTcolor) !important; border:1px solid var(--IDTcolor); color:#FFFFFF !important;}
.BIDcolor:hover 		{filter:brightness(0.95); !important;}

.BIDLcolor				{background:linear-gradient(to bottom,#FFFFFF 50%,#F4F4F4 50%) !important; border:1px solid var(--IDTcolor); color:var(--IDTcolor) !important;}
.BIDLcolor:hover 		{background:linear-gradient(to bottom,#F8F8F8 50%,#F1F1F1 50%) !important; border:1px solid var(--IDTcolor_dark); color:var(--IDTcolor_dark) !important;}

.Bdefault				{background:#FFFFFF; border:1px solid var(--ipt-color); color:#888888;} 
.Bdefault:hover 		{background:#F6F6F6; border:1px solid #b9bdc7; color:#555555;}

.Bwhite					{background:var(--white); border:1px solid var(--ipt-color); color:#666666;} /* Default */
.Bwhite:hover 			{background:#F6F6F6; border:1px solid #b9bdc7; color:#555555;}
.Bwhite:hover a			{color:#555555 !important;}

.Bgray					{background:var(--mygray); border:1px solid #616a7d; color:#FFFFFF;}  /* Input, File Add */
.Bgray:hover			{background:#5f687a; border:1px solid #5f687a; color:#FFFFFF;}

.Boff					{background:#BDBDBD; border:1px solid #BDBDBD; color:#FFFFFF;}  /* Button Off */
.Boff:hover				{background:#BDBDBD; border:1px solid #BDBDBD; color:#FFFFFF; cursor:not-allowed;}

.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;}  /* Detail Search  */
.Bhgray:hover			{background:#8894ae; border:1px solid #7b869d; color:#FFFFFF;}

.Bmgray_nohover			{background:#c0cadf; color:#FFFFFF;}  /* Input Set None Hover Button  */

.Blightgray				{background:#EEEEEE; border:1px solid var(--ipt-color); color:#666666;} /* List, Cancel, Del */
.Blightgray:hover 		{background:#EEEEEE; border:1px solid #b9bdc7; color:#333333;}
.Blightgray:hover a		{color:#555555 !important;}


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

.Blightgrayline			{background:#FFFFFF; border:1px solid #DDDDDD; color:#888888 !important; text-decoration:none;} /* Only One Button - Move List */
.Blightgrayline:hover 	{background:#FFFFFF; border:1px solid #DDDDDD; color:#888888 !important; text-decoration:none;}


/******************************************************************************************************************************************
*	BUTTON CSS - 2019.07.29 : FUNNY (Ver.3.0)
*******************************************************************************************************************************************/
/* 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; font-weight:500; line-height:24px; 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 */

/* 인풋과 세트가 되는 버튼 변경 및 삭제해야함 */
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; -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:var(--IDTcolor); 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;}