@charset "UTF-8";

.btn_list_box {}
.btn_list_box .list_inner {text-align:center}
.btn_list_box .li {display:inline-block;vertical-align:top}
.btn_list_box .li.block {display:block}
.btn_list_box {margin:20px auto 10px auto}
.btn_list_box.mt0 {margin-top:0}
.btn_list_box.mb0 {margin-bottom:0} 

/* 기본 버튼 */
.btn_default {display:inline-flex;align-items:center;justify-content:center;padding:11px 10px 10px 10px;text-align:center;font-weight:500;color:#fff;border:1px solid var(--colorMain);background-color:var(--colorMain);box-sizing:border-box;transition:0.2s}
.btn_default .text {}
.btn_default:not(.disabled):hover, 
.btn_default:not(.disabled):focus, 
.btn_default.on {border-color:var(--colorMainHover);background-color:var(--colorMainHover)}
.btn_default.disabled {cursor:inherit !important;color:#767676 !important;border-color:#e1e1e1 !important;background-color:#f5f5f5 !important}
.btn_default.small {padding:3px 10px;font-size:13px}
.btn_default.large {min-width:100px;padding-top:13px;padding-bottom:13px}
.btn_default.min_w {min-width:100px}
.btn_default .icon {margin-right:5px}
.btn_default .icon.lf {margin:0 0 0 5px}
.btn_default .icon.img {max-width:13px}

.btn_default.white {color:#212121;background-color:#fff;border-color:#fff}
.btn_default.black {background-color:#212121;border-color:#212121}
.btn_default.dgray {background-color:#616161;border-color:#616161}
.btn_default.fgray {background-color:#767676;border-color:#767676}
.btn_default.blue {background-color:#0062E5;border-color:#0062E5}
.btn_default.red {background-color:#eb3e3a;border-color:#eb3e3a}

/* 기본 버튼 hover, focus */
.btn_default.white:hover, 
.btn_default.white:focus {background-color:#f5f5f5;border-color:#f5f5f5}
.btn_default.black:hover, 
.btn_default.black:focus {background-color:#424242;border-color:#424242}
.btn_default.dgray:hover, 
.btn_default.dgray:focus {background-color:#313336;border-color:#313336}
.btn_default.fgray:hover, 
.btn_default.fgray:focus {background-color:#525252;border-color:#525252}
.btn_default.blue:hover, 
.btn_default.blue:focus {background-color:#004baf;border-color:#004baf}
.btn_default.red:hover, 
.btn_default.red:focus {background-color:#b92929;border-color:#b92929}

/* 기본 버튼 outline */
.btn_default.line {background-color:#fff !important;color:var(--colorMain)}
.btn_default.line.black {background-color:#fff !important;color:#212121}
.btn_default.line.dgray {background-color:#fff !important;color:#616161}
.btn_default.line.fgray {background-color:#fff !important;color:#767676}
.btn_default.line.blue {background-color:#fff !important;color:#0062E5}
.btn_default.line.red {background-color:#fff !important;color:#eb3e3a}

/* 기본 버튼 outline hover, focus*/
.btn_default.line:hover,
.btn_default.line:focus {color:var(--colorMainHover)}
.btn_default.line.white:hover, 
.btn_default.line.white:focus {color:#f5f5f5}
.btn_default.line.black:hover, 
.btn_default.line.black:focus {color:#424242}
.btn_default.line.dgray:hover, 
.btn_default.line.dgray:focus {color:#313336}
.btn_default.line.fgray:hover, 
.btn_default.line.fgray:focus {color:#525252}
.btn_default.line.blue:hover, 
.btn_default.line.blue:focus {color:#004baf}
.btn_default.line.red:hover, 
.btn_default.line.red:focus {color:#b92929}

/* 링크 버튼 */
.btn_link {}
.btn_link .icon {color:#0062E5}
.btn_link:not(.disabled):hover, 
.btn_link:not(.disabled):focus, 
.btn_link.on {color:#0062E5}
.btn_link:not(.disabled):hover .text, 
.btn_link:not(.disabled):focus .text, 
.btn_link.on .text {text-decoration:underline}

/* 작은 버튼  */
.btn_small {display:inline-block;padding:0 8px;font-size:15px;line-height:22px;color:#191919;background-color:#fff;border:1px solid #616161;border-radius:5px}
.btn_small.red {color:#eb3e3a;border-color:#eb3e3a}
.btn_small.blue {color:#428be9;border-color:#428be9}
.btn_small.green {color:var(--colorMain);border-color:var(--colorMain)}
.btn_small .icon {display:inline-block;vertical-align:middle;transform:translateY(-2px)}
.btn_small:hover, 
.btn_small:focus, 
.btn_small.on {color:#fff;background-color:#191919}
.btn_small.red:hover, 
.btn_small.red:focus, 
.btn_small.red.on {color:#fff;background-color:#eb3e3a}
.btn_small.blue:hover, 
.btn_small.blue:focus, 
.btn_small.blue.on {color:#fff;background-color:#004baf}
.btn_small.green:hover, 
.btn_small.green:focus, 
.btn_small.green.on {color:#fff;background-color:var(--colorMain)}

.btn_icon {display:inline-block;font-size:18px}
.btn_icon .icon {}
.btn_icon:hover {opacity:0.7}


/* 다크모드 */
.gray .btn_default {border-color:var(--colorMainHover);background-color:var(--colorMainHover)}
.gray .btn_default:hover, 
.gray .btn_default:focus, 
.gray .btn_default.on {border-color:var(--colorMain);background-color:var(--colorMain)}
.gray .btn_default.disabled {color:#bbb !important;border-color:#424242 !important;background-color:#555 !important}

.gray .btn_default.white {color:#212121;background-color:#fff;border-color:#fff}
.gray .btn_default.black {background-color:#212121;border-color:#212121}
.gray .btn_default.dgray {background-color:#616161;border-color:#616161}
.gray .btn_default.fgray {background-color:#767676;border-color:#767676}
.gray .btn_default.blue {background-color:#0062E5;border-color:#0062E5}
.gray .btn_default.red {background-color:#eb3e3a;border-color:#eb3e3a}
.gray .btn_default.white:hover, 
.gray .btn_default.white:focus {background-color:#f5f5f5;border-color:#f5f5f5}
.gray .btn_default.black:hover, 
.gray .btn_default.black:focus {background-color:#424242;border-color:#424242}
.gray .btn_default.dgray:hover, 
.gray .btn_default.dgray:focus {background-color:#313336;border-color:#313336}
.gray .btn_default.fgray:hover, 
.gray .btn_default.fgray:focus {background-color:#525252;border-color:#525252}
.gray .btn_default.blue:hover, 
.gray .btn_default.blue:focus {background-color:#004baf;border-color:#004baf}
.gray .btn_default.red:hover, 
.gray .btn_default.red:focus {background-color:#b92929;border-color:#b92929}

.gray .btn_default.line {color:var(--colorMain);background-color:#121212 !important}
.gray .btn_default.line.black {background-color:#121212 !important;color:#212121}
.gray .btn_default.line.dgray {background-color:#121212 !important;color:#616161}
.gray .btn_default.line.fgray {background-color:#121212 !important;color:#767676}
.gray .btn_default.line.blue {background-color:#121212 !important;color:#0062E5} 
.gray .btn_default.line.red {background-color:#121212 !important;color:#FF8585}
.gray .btn_default.line:hover,
.gray .btn_default.line:focus {color:var(--colorMainHover);border-color:var(--colorMainHover)}
.gray .btn_default.line.white:hover, 
.gray .btn_default.line.white:focus {color:#f5f5f5}
.gray .btn_default.line.black:hover, 
.gray .btn_default.line.black:focus {color:#ccc;border-color:#ccc}
.gray .btn_default.line.dgray:hover, 
.gray .btn_default.line.dgray:focus {color:#767676;border-color:#767676}
.gray .btn_default.line.fgray:hover, 
.gray .btn_default.line.fgray:focus {color:#999;border-color:#999}
.gray .btn_default.line.blue:hover, 
.gray .btn_default.line.blue:focus {color:#4a97ff;border-color:#4a97ff}
.gray .btn_default.line.red:hover, 
.gray .btn_default.line.red:focus {color:#FF8585;border-color:#FF8585}
.gray .btn_small {color:#fff;background-color:#121212}
.gray .btn_small.red {color:#FF8585;border-color:#FF8585}
.gray .btn_small.blue {color:#428be9;border-color:#428be9}
.gray .btn_small:hover, 
.gray .btn_small:focus, 
.gray .btn_small.on {color:#fff;background-color:#191919}
.gray .btn_small.red:hover, 
.gray .btn_small.red:focus, 
.gray .btn_small.red.on {color:#fff;background-color:#FF8585}
.gray .btn_small.blue:hover, 
.gray .btn_small.blue:focus, 
.gray .btn_small.blue.on {color:#fff;background-color:#428be9}


@media screen and (max-width:1080px){
	.btn_default {padding:8px 10px 7px 10px}
	.btn_small {font-size:14px;border-radius:3px}
	
}