@charset "utf-8";

/* -------- button -------- */
.btn { 
	display: inline-block;
	padding: 0.64rem 1.6rem;
	line-height: 1;
	font-size: 10.25pt;
	font-weight: 500;
	color: #fff;
	background-color: #595757;
	border: 0.06rem solid transparent;
	letter-spacing: 0;
	cursor: pointer;
}

/* 라운드 */
._round_l { 
	border-radius: 0.4em; 
}
._round { 
	border-radius: 5em; 
}

/* 라인 */
._border { 
	/* padding: 0.64rem 1.6rem; */
	color: #3e3a39;
	background-color: transparent;
	border-color: #3e3a39; 
}

/* 호버 - 기본형 사용 시 */
.btn._hover:hover { 
	background-color: #747171;
}

/* 호버 - 라인 사용 시 */
.btn._border._hover:hover { 
	color: #000;
	background-color: transparent; 
	border-color: #000;
}

/* transition */
._tran { 
	transition: .3s; 
}

/* size */
._mini { 
	padding: 0.36rem 0.8rem;
	font-size: 9pt;
}
._small { 
	padding: 0.625rem 1.2rem;
}
._medium { 
	padding: 0.8rem 2.4rem;
}
._big { 
	padding: 1rem 3.2rem;
}

/* badge */
._badge { 
	margin: 0 0.1rem;
	padding: 0;
	width: 21px; height: 21px;
	line-height: 3.6ex;
	font-size: 7.5pt;
	font-weight: 700;
}

/* -------- 색테마 - 기본형 사용 시 -------- */
/* 배경 */
._rose { background-color: #f7534f; }
._rose:hover { background-color: #f96c67; }
._dark._rose:hover { background-color: #f53a37; }

._pink { background-color: #f06292; } 
._pink:hover { background-color: #f580b3; }
._dark._pink:hover { background-color: #eb4471; }

._orchidpink { background-color: #ab47bc; }
._orchidpink:hover { background-color: #c45cd0; }
._dark._orchidpink:hover { background-color: #9232a8; }

._bluepurple { background-color: #7e57c2; }
._bluepurple:hover { background-color: #a471d4; }
._dark._bluepurple:hover { background-color: #583db0; }

._cobaltblue { background-color: #5c6bc0; }
._cobaltblue:hover { background-color: #788bd3; }
._dark._cobaltblue:hover { background-color: #404bad; }

._serenity { background-color: #42a5f5; }
._serenity:hover { background-color: #56c0f8; }
._dark._serenity:hover { background-color: #2e8af2; }

._skyblue { background-color: #29b6f6; }
._skyblue:hover { background-color: #35ccf9; }
._dark._skyblue:hover { background-color: #1da0f3; }

._aquablue { background-color: #26c6da; }
._aquablue:hover { background-color: #31d7e5; }
._dark._aquablue:hover { background-color: #1bb5cf; }

._turquoise { background-color: #26a69a; }
._turquoise:hover { background-color: #31c1b8; }
._dark._turquoise:hover { background-color: #1b8b7c; }

._applegreen { background-color: #66bb6a; }
_applegreen:hover { background-color: #85d08a; }
._dark._applegreen:hover { background-color: #47a64a; }

._springgreen { background-color: #9ccc65; }
._springgreen:hover { background-color: #badb83; }
._dark._springgreen:hover { background-color: #7ebd47; }

._radishgreen { background-color: #d4e157; }
._radishgreen:hover { background-color: #e1ea71; }
._dark._radishgreen:hover { background-color: #c7d83d; }

._lemon { background-color: #ffee58; }
._lemon:hover { background-color: #fff373; }
._dark._lemon:hover { background-color: #ffe93d; }

._tangerine { background-color: #ffa726; }
._tangerine:hover { background-color: #ffc231; }
._dark._tangerine:hover { background-color: #ff8c1b; }

._orange { background-color: #ff7043; }
._orange:hover { background-color: #ff9257; }
._dark._orange:hover { background-color: #ff4e2f; }

._camel { background-color: #8d6e63; }
._camel:hover { background-color: #af8f81; }
._dark._camel:hover { background-color: #6b4d45; }

._cement { background-color: #c8c9ca; }
._cement:hover { background-color: #d9d9da; }
._dark._cement:hover { background-color: #b7b9ba; }

._gray { background-color: #b4b4b5; }
._gray:hover { background-color: #cbcbcb; }
._dark._gray:hover { background-color: #9d9d9f; }

._slategray { background-color: #717071; }
._slategray:hover { background-color: #939293; }
._dark._slategray:hover { background-color: #4f4e4f; }

._charcoal { background-color: #595757; }
._charcoal:hover { background-color: #747171; }
._dark._charcoal:hover { background-color: #3e3d3d; }

/* 라인 */
._bd_rose { color: #f7534f; border-color: #f7534f; }
._bd_pink { color: #f06292; border-color: #f06292; } 
._bd_orchidpink { color: #ab47bc; border-color: #ab47bc; }
._bd_bluepurple { color: #7e57c2; border-color: #7e57c2; }
._bd_cobaltblue { color: #5c6bc0; border-color: #5c6bc0; }
._bd_serenity { color: #42a5f5; border-color: #42a5f5; }
._bd_skyblue { color: #29b6f6; border-color: #29b6f6; }
._bd_aquablue { color: #26c6da; border-color: #26c6da; }
._bd_turquoise { color: #26a69a; border-color: #26a69a; }
._bd_applegreen { color: #66bb6a; border-color: #66bb6a; }
._bd_springgreen { color: #9ccc65; border-color: #9ccc65; }
._bd_radishgreen { color: #d4e157; border-color: #d4e157; }
._bd_lemon { color: #ffee58; border-color: #ffee58; }
._bd_tangerine { color: #ffa726; border-color: #ffa726; }
._bd_orange { color: #ff7043; border-color: #ff7043; }
._bd_camel { color: #8d6e63; border-color: #8d6e63; }
._bd_cement { color: #c8c9ca; border-color: #c8c9ca; }
._bd_gray { color: #b4b4b5; border-color: #b4b4b5; }
._bd_slategray { color: #717071; border-color: #717071; }
._bd_charcoal { color: #595757; border-color: #595757; }


/* -------- with icon -------- */
i.ml1 { margin-left: 4px; }
i.ml2 { margin-left: 8px; }
i.ml3 { margin-left: 16px; }
i.mr1 { margin-right: 4px; }
i.mr2 { margin-right: 8px; }
i.mr3 { margin-right: 16px; }