@charset "UTF-8";


/***** btn (default) ******/
button.btn {
	display:inline-block; border-radius:8px; 
	min-width:100px; height:30px; line-height:30px; font-size:12px;
	background-color:var(--color-G2); color:var(--color-G7); border:0px; 
	text-align:center; cursor:pointer; overflow: hidden;
	padding:0px 8px;
}
button.btn:disabled {
	cursor:not-allowed; 
	background-color:var(--color-G2) !important; color:var(--color-G4) !important;
}
button.btn.disabled2 {
	background-color:var(--color-G3) !important; color:var(--color-G4) !important;
}
button:focus {
	outline:none !important; box-shadow:none !important
}

/* btn - style */
button.btn.btn1 { background-color:var(--color-A5); color:#fff; border:0px; }
button.btn.btn2 { background-color:var(--color-B5); color:#fff; border:0px; }
button.btn.btn3 { background-color:var(--color-A1); color:var(--color-A5); border:0px; }
button.btn.btn4 { background-color:var(--color-B1); color:var(--color-B5); border:0px; }
button.btn.btn5 { background-color:var(--color-WH); color:var(--color-BL); border:0px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); }
button.btn.btn5:disabled { box-shadow:none; }
button.btn.btn6 { background-color:var(--color-WH); color:var(--color-G8); border:1px solid var(--color-G3); border-radius:30px }
button.btn.btn7 { background-color:var(--color-WH); color:var(--color-G8); border:1px solid var(--color-G3); }
button.btn.btn8 { background-color:#E5FBEE; color:#01B574; }

/* btn - size */
button.btn.tiny    { min-width:64px;  height:27px; line-height:27px; font-size:12px; font-weight:bold; }
button.btn.small   { min-width:64px;  height:34px; line-height:34px; font-size:12px; font-weight:bold; }
button.btn.small2  { min-width:120px; height:38px; line-height:38px; font-size:12px; font-weight:800;  }
button.btn.medium  { min-width:120px; height:38px; line-height:38px; font-size:12px; font-weight:800;  }
button.btn.medium2 { min-width:99px;  height:40px; line-height:40px; font-size:14px; font-weight:bold; }
button.btn.medium3 { min-width:144px; height:42px; line-height:42px; font-size:16px; font-weight:bold; }
button.btn.medium4 { min-width:168px; height:46px; line-height:46px; font-size:14px; font-weight:800;  }
button.btn.large   { min-width:160px; height:50px; line-height:50px; font-size:14px; font-weight:800;  }
button.btn.large2  { min-width:166px; height:54px; line-height:54px; font-size:16px; font-weight:bold; }

/* btn - width */
button.btn.auto   { min-width:auto; width:auto;  }
button.btn.full   { min-width:auto; width:100%;  }
button.btn.half   { min-width:auto; width:50%;   }
button.btn.triple { min-width:auto; width:33.3%; }
button.btn.qurter { min-width:auto; width:25%;   }

/* btn - align */
button.btn.center { text-align:center }
button.btn.left   { text-align:left   }
button.btn.right  { text-align:right  }

/* btn - border-radius */
button.btn.r5     { border-radius:5px }
button.btn.r6     { border-radius:6px }
button.btn.r7     { border-radius:7px }
button.btn.r8     { border-radius:8px }
button.btn.r9     { border-radius:9px }
button.btn.r10    { border-radius:10px }
button.btn.r20    { border-radius:20px }
button.btn.r30    { border-radius:30px }


/* btn_warp */
.btn_wrap { font-size:0px; white-space: nowrap; }
.btn_wrap button.btn { margin:0px 4px }
.btn_wrap button.btn.half   { width:calc((100% - 7px * 1) / 2) }
.btn_wrap button.btn.triple { width:calc((100% - 7px * 2) / 3) }
.btn_wrap button.btn.qurter { width:calc((100% - 7px * 3) / 4) }
.btn_wrap button.btn:first-child { margin-left:0px; }
.btn_wrap button.btn:last-child  { margin-right:0px; }

/* btn_warp_v */
.btn_wrap_v { text-align:center; }
.btn_wrap_v button.btn { margin:4px 0px; }
.btn_wrap_v button.btn:first-child { margin-top:0px; }
.btn_wrap_v button.btn:last-child  { margin-bottom:0px; }

/* option */
button.btn.FAB   { width:56px !important; min-width:56px !important; height:56px !important; line-height:56px !important; border-radius:100% }
button.btn.FAB.small { width:44px !important; min-width:44px !important; height:44px !important; line-height:44px !important; border-radius:100%; overflow:hidden }
button.btn.FAB2  { width:36px !important; min-width:36px !important; height:36px !important; line-height:36px !important; border-radius:12px }