@charset "UTF-8";
/* 버튼 기본 설정 */
.button__wrap {width: 100%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;}
.button__wrap.center {justify-content: center;}
.button {
	cursor: pointer;border: inherit;background: inherit;transition: 0.15s ease-in-out;margin: 0;
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;
	-webkit-box-pack: center;-moz-box-justify-content: center;-ms-flex-pack: center;justify-content: center;
	-webkit-box-align: center;-moz-align-items: center;-ms-flex-align: center;align-items: center;
}

.button.write {
    width: 223px;
    height: 53px;
    border-radius: 4px;
    border: 1px solid var(--color-board-gray1);
    background-color: var(--color-white);
    color: var(--color-black);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.0em;
    letter-spacing: -0.1em;
}
.button.write:hover {
	border: 1px solid var(--color-black);;
}
@media screen and (max-width: 1200px) {
	.button.write {
		width: 200px;
		height: 48px;
		font-size: 19px;
	}
}
@media screen and (max-width: 1024px) {
	.button.write {
		width: 180px;
		height: 45px;
		font-size: 18px;
	}
}
@media screen and (max-width: 768px) {
	.button.write {
		width: 90px;
		height: 40px;
		font-size: 16px;
	}
}

.button.btn__xs {height: 35px;font-size: 13px;padding: 0 7px;border-radius: 3px;line-height: 1.1em;}
.button.btn__sm {height: 25px;font-size: 12px;padding: 0 10px;border-radius: 3px;}
.button.btn__md {height: 30px;font-size: 14px;padding: 0 20px;border-radius: 3px;}
.button.btn__lg {height: 35px;font-size: 15px;padding: 0 20px;border-radius: 3px;}
.button.btn__xl {height: 38px;font-size: 15px;padding: 0 20px;border-radius: 3px;}

.button.color__orange {background: var(--color-orange);border: 1px solid var(--color-orange);color: var(--color-white);}
.button.color__orange:hover {background: var(--color-orange-dark);}
.button.color__navy {background: var(--color-navy);border: 1px solid var(--color-navy);color: var(--color-white);}
.button.line__gray {background: var(--color-white);border: 1px solid var(--color-gray-3);color: var(--color-gray-3);}
.button.line__gray:hover {border: 1px solid var(--color-def);color: var(--color-def);}
.button.line__navy {background: var(--color-white);border: 1px solid var(--color-navy);color: var(--color-navy);}
.button.line__navy:hover {background-color: var(--color-navy);color: var(--color-white);}
.button.line__orange {background: var(--color-white);border: 1px solid var(--color-orange);color: var(--color-orange);}
.button.line__orange:hover {background-color: var(--color-orange);color: var(--color-white);}

.button.margin__left {margin-left: 5px;}

/* 페이징 */
.paging {display: flex;justify-content: center;text-align: center;align-items: center;padding: 0 0 50px 0;}
.paging > * {display: inline-block;height: 28px;min-width: 28px;line-height: 28px;vertical-align: middle;overflow: hidden;box-sizing: border-box;margin: 0 4px;font-size: 18px;font-weight: 500;border-radius: 8px;cursor:pointer}
.paging .page {text-align: left;text-indent: -9999px;position: relative;border: 1px solid #dedede;}
.paging .first:after {background: url(http://kim1074.cdn1.cafe24.com/img/ico/angles-left-solid.png) center center no-repeat;background-size: 10px 10px;}
.paging .prev:after {background: url(http://kim1074.cdn1.cafe24.com/img/ico/angle-left-solid.png) center center no-repeat;background-size: 6px 10px;}
.paging .next:after {background: url(http://kim1074.cdn1.cafe24.com/img/ico/angle-right-solid.png) center center no-repeat;background-size: 6px 10px;}
.paging .last:after {background: url(http://kim1074.cdn1.cafe24.com/img/ico/angles-right-solid.png) center center no-repeat;background-size: 10px 10px;}
.paging .page:after {display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;content: '';}
.paging .prev{margin-right:20px;}
.paging .next{margin-left:20px;}
.paging .page:hover{border-color: #545656;}
.paging .page:after{display:block;width:100%;height:100%;position:absolute;left:0;top:0;content:'';}
.paging .current{background-color:#545656; color:#fff; font-weight:bold;cursor:default}
@media screen and (max-width: 768px) {
	.paging > * {font-size: 16px;height: 26px;min-width: 26px;line-height: 26px;}
}
@media screen and (max-width: 500px) {
	.paging .prev{margin-right:2px;}
	.paging .next{margin-left:2px;}
	.paging > * {margin: 0 2px;font-size: 14px;height: 24px;min-width: 24px;line-height: 24px;}
}
/* //페이징 */

h3.color__navy {color: var(--color-navy-nav)}