.btn-wrap {
	position: relative;	text-align: center;	margin-top: 13px;
	&.inline {
		display: inline-block !important; margin-top: 0; vertical-align: middle;
	}
	&.block {
		display: block !important; margin: 5px 0 !important;
	}
	&:after {
		content: ''; display: block; clear: both;
	}
	&.pd-10 {
		padding-top: 10px;
	}
	&.pd-bot {
		padding-bottom: 25px;
	}
	&.mg-0 {
		margin-top: 0;
	}
	.btn-center {
		float: left; width: 100%; text-align: center;
	}
	.btn-left {
		float: left;
	}
	.btn-right {
		float: right;
	}

	.a-btn,
	button {
		padding: 6px 14px; border: 1px solid #e5e5e5; display: inline-block; font-size: 1.5rem; color: #797979; border-radius: 5px; transition: background .3s, border .3s; vertical-align: middle; font-weight: 500;
		&.s-pd {
			padding: 0 15px !important; font-size: 1.3rem !important; font-weight: 400;
		}
		&.bg-blue {
			border-color: var(--blue); color: #fff;
		
		}
		&.bg-theme {
			border-color: var(--theme); color: #fff;
		
		}
		&.bg-olive {
			border-color: var(--olive); background: var(--olive);  color: #fff;
		}
		&.bg-brown {
			border-color: var(--brown); background: var(--brown); color: #fff;
		}
		&.bg-pink {
			border-color: var(--pink); color: #fff;
		}
		&.bg-green {
			border-color: var(--green); color: #fff;
		}
		&.bg-navy {
			border-color: var(--navy); color: #fff;
		}
		&.bg-black {
			border-color: #000; background: #000; color: #fff;
		}
		&.bg-red {
			border-color: var(--red); color: #fff;
		}
		&.bg-light-black {
			background: #333; border-color: #333; color: #fff;
		}
		&.bg-light-gray {
			color: #333; border-color: #d5d5d5; background: #e9ecef;
		}
		&.bg-white {
			background: #fff; border: 1px solid #777; color: #222;
			&:hover {
				border-color: #bababa; color: #999;
			}
		}
		&.full-btn {
			width: 100%; height: 55px; line-height: 45px; font-size: 1.6rem; font-weight: 600;
			&.center {
				justify-content: center;
			}
		}
		&.border-none {
			border: none;
		}
		&:active {
			transform: scale(0.94);
		}
		&:disabled {
			opacity: .5; cursor: no-drop;
			&:active {
				transform: none;
			}
		}
		&.s-btn {
			line-height: 28px; height: 30px; padding: 0 10px; font-size: 1.3rem;
			&.down {
				line-height: 20px; height: 47px; padding: 3px 14px;
			} 
		}
		&.s-pd {
			padding: 0 10px;
		}
		&.disabled {
			opacity: .5; pointer-events: none;
		}
		&.md-btn {
			width: 300px; max-width: 100%; height: 50px; line-height: 37px;
		}
		&.arrow-btn {
            position: relative; padding: 6px 14px 6px 28px; background: #f2f2f2; font-weight: 700;
			&.search {
				padding: 6px 28px 6px 14px;
				&::after {
					left: auto; right: 10px; transform: scaleX(-1);
				}
			}
            // &:after {
            //     content: ''; width: 10px; height: 10px; background-image: url('@/static/img/board/back.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 12px; left: 10px; opacity: .6;
            // }
			&:hover {
				opacity: 0.8;
			}
        }
	}
}

@media (max-width: 680px) {
	.btn-wrap {
		.a-btn,
		button {
			margin: 1px; font-size: 1.3rem;
			&.full-btn {
				&.md-btn {
					width: 100%;  height: 45px; line-height: 30px; font-size: 1.4rem; 
				}
			}
		}
	}
}