@charset "utf-8";

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.4s ease-in-out;
	
}
.button:disabled{
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.white[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.grey[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.blue[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.navy[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.green[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.red[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button.orange[disabled] {
	background-color: #d8d8d8 !important;
    border-color: #c6c6c6 !important;
    color: #717171 !important;
    cursor: default;
}
.button img{
	padding-right: 5px;
}
/* size */
.button.xsm {
    height: 20px;
    padding: 0 7px;
    border-radius: 2px;
    font-size: 11px;
}
.button.sm {
    height: 24px;
    padding: 0rem 0.5rem;
    margin: 0rem 0.5rem;
    border-radius: 2px;
    font-size: 12px;
}
.button.md {
    height: 32px;
    padding: 0rem 1rem;
    border-radius: 2px;
    font-size: 14px;
}
.button.lg {
    height: 42px;
    padding: 0 25px;
    border-radius: 2px;
    font-size: 16px;
}
.button.xlg {
    height: 50px;
    padding: 0 30px;
    border-radius: 2px;
    font-size: 18px;
}
.button.full {
	width: 100%;
}

/* color */
.button.white {
    background-color: #fff;
    border: 1px solid #1d1d1d;
    color: #000b17;
}
.button.white:hover {
    background-color: #2b2c2f;
    border-color: #2b2c2f;
    color: #fff;
}
.button.cobalt_l {
    background-color: #fff;
    border: 1px solid #4671dd;
    color: #4671dd;
}
.button.cobalt_l:hover {
    background-color: #4671dd;
	color: #fff;
}
.button.cobalt_l_on {
	border: 1px solid #4671dd;
    background-color: #4671dd;
	color: #fff;
}
.button.grey {
    background-color: #717171;
    border: 1px solid #717171;
    color: #fff;
}
.button.grey:hover {
    background-color: #2b2c2f;
}

.button.blue {
    background-color: #246beb;
    border: 1px solid #246beb;
    color: #fff;
}
.button.blue:hover {
    background-color: #2b2c2f;
    border-color: #2b2c2f;
}
.button.navy {
    background-color: #232ea3;
    border: 1px solid #232ea3;
    color: #fff;
}
.button.navy:hover {
    background-color: #2b2c2f;
    border-color: #2b2c2f;
}
.button.search {
    background-color: #0576c4;
    border: 1px solid #0576c4;
    color: #fff;
}
.button.search:hover {
    background-color: #105b8f;
}
.button.reset {
    background-color: #cb212e;
    border: 1px solid #cb212e;
    color: #fff;
}
.button.green {
    background-color: #008000;
    border: 1px solid #008000;
    color: #fff;
}
.button.green:hover {background-color: #2b2c2f;border-color: #2b2c2f;}
.button.red {
    background-color: #ee0000;
    border: 1px solid #ee0000;
    color: #fff;
}
.button.red:hover {background-color: #2b2c2f;border-color: #2b2c2f;}
.button.orange {
    background-color: #ff4500;
    border: 1px solid #ff4500;
    color: #fff;
}
.button.orange:hover {background-color: #2b2c2f;border-color: #2b2c2f;}
.button.skyblue {
    background-color: #768491;
    border: 1px solid #768491;
    color: #fff;
}
.button.skyblue:hover {
    background-color: #56616b;
}
.button.cobalt {
    background-color: #4671dd;
    border: 1px solid #4671dd;
    color: #fff;
}
.button.cobalt:hover {
    background-color: #2f5ed5;
}
.button.blueline {
    background-color: #fff;
    border: 1px solid #3c6bd2;
    color: #396ef2;
}
.button.blueline:hover {
    background-color: #f8f8f8;
}
.button.open{
	position: absolute;
	right: 8px;
	top: 14px;
	background: #103fb3;
    font-size: 12px;
    padding: 4px 5px;
    border-radius: 3px;
	color: #fff;
}
/* 모바일 */
@media (max-width:768px) {

	
}