@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
	font-family: 'SeoulNamsanM';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


:root {
    --main-color: rgb(196, 159, 105); /* 메인 컬러 #C49F69 */
    --main-hover: rgb(168, 134, 83); /* 메인 컬러 #A88653 */
    --sub-color: rgb(127, 0, 33); /* 서브 컬러 #7F0021 */
    --sub-hover: rgb(76, 0, 21); /* 서브 컬러 #4C0015 */
	--dark_grey: rgb(51, 51, 51); /* #333333 */
	--mid_grey: rgb(102, 102, 102); /* #666666 */
	--grey: rgb(153, 153, 153); /* #999999 */
	--light_grey: rgb(204, 204, 204); /* #cccccc */
	--white_grey: rgb(234, 234, 234); /* #eaeaea */
	--white: rgb(255, 255, 255); /* #ffffff */
	--black: rgb(0, 0, 0); /* #000000 */
	--text-color: var(--dark_grey);
	--placeholder-color: rgb(203, 203, 203); /* #cbcbcb */
	--box-shadow_dark: rgba(0, 0, 0, 0.6); /* #000000 */
	--box-shadow_light: rgba(0, 0, 0, 0.1); /* #000000 */
	--text_link_color: var(--main-color); /* 메인 컬러 #C49F69 */
	--table_hover: rgb(245, 245, 245); /* #F5F5F5 */
	--table_active: rgb(245, 245, 245); /* #F5F5F5 */
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    letter-spacing: -1px;
    font-family: 'Lora', 'Noto Sans KR', sans-serif, 'Malgun Gothic','Roboto', Dotum, '돋움', Gulim, Helvetica;
    -webkit-text-size-adjust: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--dark_grey);
    font-weight: 400;
}
a {
    text-decoration: none;
    color: var(--dark_grey);
}
a.hover-main:hover {
	color: var(--main-color);
}
a.hover-sub:hover {
	color: var(--sub-color);
}
strong {
	font-weight: 600;
}


/**********************************************/
/* 06. 공통 설정 - 페이지네이션 *******************/
/**********************************************/
.pagination {
	position: relative;
	text-align: center;
}
.pagination .user-pagination-wrap {
	display: inline-block;
}
.pagination .user-pagination-wrap > div {
	display: inline-block;
	position: relative;
	text-align: center;
}
.pagination .user-pagination-wrap > div a,
.pagination .user-pagination-wrap > div span {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0 0.5rem;
}
.pagination .user-pagination-wrap > div a i {
	line-height: 2rem;
}
.pagination .user-pagination-wrap > div:hover a,
.pagination .user-pagination-wrap > div:focus a {
	color: var(--sub-color);
}

/* 페이지네이션 st 01*/
.pagination.pagination-01 .user-pagination-wrap > div {
	width: 2.8rem;
	height: 2.8rem;
	line-height: 2.6rem;
}
.pagination.pagination-01 .user-pagination-wrap > div.on {
	background: var(--sub-color);
	color: var(--white);
	border: 2px solid var(--sub-color);
}
.pagination.pagination-01 .user-pagination-wrap > div a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0 0.5rem;
	border: 2px solid rgba(255,255,255,0);
	transition: all 0.3s;
}
.pagination.pagination-01 .user-pagination-wrap > div:hover a,
.pagination.pagination-01 .user-pagination-wrap > div:focus a {
	border: 2px solid var(--sub-color);
	color: var(--sub-color);
}

/* 페이지네이션 st 02 */
.pagination.pagination-02 .user-pagination-wrap > div.on span {
	background: none;
	color: var(--sub-color);
	border: none;
}
.pagination.pagination-02 .user-pagination-wrap > div:hover a,
.pagination.pagination-02 .user-pagination-wrap > div:focus a {
	border: none;
	color: var(--sub-color);
}
@media screen and (max-width: 768px) {
	.pagination.pagination-01 .user-pagination-wrap > div {
		width: 1.5rem;
		height: 2rem;
		line-height: 1.8rem;
	}
}


/**********************************************/
/* 본문 바로가기 & 스크롤 탑 **********************/
/**********************************************/
#skip-nav {
    position: fixed;
    left: 0;
    top: -41px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    background: var(--box-shadow_dark);
    border-bottom: 1px solid var(--white);
    z-index: 100000;
    transition: top 0.3s;
}
#skip-nav:focus {
    top: 0;
}




/**********************************************/
/* 01-1. 공통 레이아웃 - 디스플레이 ***************/
/**********************************************/
.relative {
    position: relative;
}

/* 플렉스 */
.flex {
    display: -webkit-box; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
    display: -moz-box; /* firefox 19- */
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Chrome */
    display: flex;
    /*white-space: nowrap;*/
}
.flex.flex--wrap {
    flex-wrap: wrap;
}
.flex.flex--column { /* flex 요소를 세로로 배치 */
    -webkit-box-orient: vertical; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
    -moz-box-orient: vertical; /* firefox 19- */
    -ms-flex-direction: column; /* IE 10 */
    -webkit-flex-direction: column; /* Chrome */
    flex-direction: column;
}
.flex.flex--justify-center { /* 가로 정렬. 가운데로 */
    -webkit-box-pack: center; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-pack: center; /* Firefox 19- */
    -ms-flex-pack: center; /* IE10 */
    -webkit-justify-content: center; /* Chrome */
    justify-content: center;
}
.flex.flex--justify-between { /* 가로 정렬. 요소의 간격 동일하게 */
    -webkit-box-pack: justify; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-pack: justify; /* Firefox 19- */
    -ms-flex-pack: justify; /* IE10 */
    -webkit-justify-content: space-between; /* Chrome */
    justify-content: space-between;
}
.flex.flex--justify-start { /* 가로 정렬. 요소의 간격 동일하게 */
    -webkit-box-pack: start; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-pack: start; /* Firefox 19- */
    -ms-flex-pack: start; /* IE10 */
    -webkit-justify-content: flex-start; /* Chrome */
    justify-content: flex-start;
}
.flex.flex--justify-end {
    -webkit-box-pack: end; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-pack: end; /* Firefox 19- */
    -ms-flex-pack: end; /* IE10 */
    -webkit-justify-content: flex-end; /* Chrome */
    justify-content: flex-end;
}
.flex.flex--align-center {
    -webkit-box-align: center; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-align: center; /* Firefox 19- */
    -ms-flex-align: center; /* IE10 */
    -webkit-align-items: center; /* Chrome */
    align-items: center;
}
.flex.flex--align-end {
    -webkit-box-align: end; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-align: end; /* Firefox 19- */
    -ms-flex-align: end; /* IE10 */
    -webkit-align-items: flex-end; /* Chrome */
    align-items: end;
}
.flex.flex--align-start {
    -webkit-box-align: start; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-align: start; /* Firefox 19- */
    -ms-flex-align: start; /* IE10 */
    -webkit-align-items: flex-start; /* Chrome */
    align-items: flex-start;
}
.flex > .flex__item.flex__item--align-center {
    -webkit-box-align: center; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-align: center; /* Firefox 19- */
    -ms-flex-align: center; /* IE10 */
    -webkit-align-items: center; /* Chrome */
    align-items: center;
}
.flex > .flex__item.flex__item--align-start {
    align-self: flex-start;
}
.flex > .flex__item.flex__item--align-end {
    align-self: flex-end;
}
.flex > .flex__item.flex__item--align-center-right {
    align-self: center;
    margin-left: auto;
    text-align: right;
}

@media screen and (max-width: 1024px) {
    .flex.flex-responsive--tablet {
        -webkit-box-orient: vertical; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
        -moz-box-orient: vertical; /* firefox 19- */
        -ms-flex-direction: column; /* IE 10 */
        -webkit-flex-direction: column; /* Chrome */
        flex-direction: column;
        -webkit-box-align: start; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
        -moz-box-align: start; /* Firefox 19- */
        -ms-flex-align: start; /* IE10 */
        -webkit-align-items: flex-start; /* Chrome */
        align-items: flex-start;
    }
}

@media screen and (max-width: 768px) {
    .flex-responsive--mobile {
        -webkit-box-orient: vertical; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
        -moz-box-orient: vertical; /* firefox 19- */
        -ms-flex-direction: column; /* IE 10 */
        -webkit-flex-direction: column; /* Chrome */
        flex-direction: column;
        -webkit-box-align: start; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
        -moz-box-align: start; /* Firefox 19- */
        -ms-flex-align: start; /* IE10 */
        -webkit-align-items: flex-start; /* Chrome */
        align-items: flex-start;
    }
}



/* 디바이스별 디스플레이 */
.dp--block {
    display: block !important;
}
.dp--inline-block {
    display: inline-block !important;
}
.dp--none {
    display: none !important;
}
.dp--tablet-start {
    display: none !important;
}
.dp--tablet-end {
    display: block !important;
}
.dp--mobile-start {
    display: none !important;
}
.dp--mobile-end {
    display: block !important;
}
.dp--pc-start {
	display: none !important;
}
.dp--pc-end {
    display: block !important;
}
@media screen and (max-width: 1200px) {
	.dp--pc-start {
		display: block !important;
	}
	.dp--pc-end {
        display: none !important;
    }
}
@media screen and (max-width: 1024px) {
    .dp--tablet-start {
        display: block !important;
    }
    .dp--tablet-end {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    .dp--mobile-start {
        display: block !important;
    }
    .dp--mobile-end {
        display: none !important;
    }
}




/**********************************************/
/* 01-2. 공통 레이아웃 - 리스트 *******************/
/**********************************************/
ol.reset-list,
ul.reset-list,
dl.reset-list dd {
    margin: 0;
    padding: 0;
}
ol.reset-list li,
ul.reset-list li {
    list-style: none;
}


/* 넘버링 리스트 */
.list-wrap > ol,
.list-wrap > ul {
    margin-top: 0.5rem;
}
.list-wrap > ol > li {
    margin-top: 1rem;
}
.list-wrap .con-wrap {
    margin-left: 0.5rem;
}
.con-wrap .con-txt {
    margin: 0.5rem 0;
}
ol.list-count-01 {
    counter-reset: ol-list-count-01;
}
ol.list-count-01 > li {
    position: relative;
    padding-left: 1rem;
    line-height: 1.5;
    counter-increment: ol-list-count-01;
}
ol.list-count-01 > li:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
    padding-right: 0.5rem;
    content: counter(ol-list-count-01)'.';
}
ol.list-count-01 > li:not(:first-of-type) {
    margin-top: 0.7rem;
}


ol.list-count-02 {
    counter-reset: ol-list-count-01;
}
ol.list-count-02 > li {
    position: relative;
    padding-left: 1rem;
    line-height: 1.5;
    counter-increment: ol-list-count-02;
}
ol.list-count-02 > li:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
    padding-right: 0.5rem;
    content: counter(ol-list-count-02)')';
}
ol.list-count-02 > li.font-sm:before {
    font-size: 0.9rem;
}
ol.list-count-02 > li.font-xs:before {
    font-size: 0.8rem;
}
ol.list-count-02 > li:not(:first-of-type) {
    margin-top: 0.7rem;
}


/* 하이픈 리스트 */
ul.list-hyphen > li {
    position: relative;
    padding-left: 0.7rem;
    line-height: 1.5;
}
ul.list-hyphen > li:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
    content: '- ';
}


/* 불릿 리스트 */
.list-bullet > li {
    position: relative;
}
.list-bullet > li:not(:first-child) {
    margin-left: 1rem;
}
.list-bullet > li:not(:first-child):before {
    display: block;
    position: absolute;
    top: 50%;
    left: -0.5rem;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: var(--text-color);
    border-radius: 3px;
    content: '';
}

/**********************************************/
/* 01-3. 공통 레이아웃 - 테이블 ******************/
/**********************************************/
.table-wrap { /* 가로 사이즈 지정하여 테이블 가로 사이즈 컨트롤할 것 */
    width: auto;
    overflow: hidden;
}
.table-wrap > .table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    /*border: none;*/
}
.table-wrap > .table caption {
    text-indent: -100000px;
    font-size: 0;
}
.table-wrap > .table thead {
    background: var(--white_grey);
}
.table-wrap > .table tr {
    position: relative;
    transition: all 0.3s;
    border-bottom: 1px solid var(--light_grey);
}
.table-wrap > .table.table-hover tbody tr.active,
.table-wrap > .table.table-hover tbody tr:hover,
.table-wrap > .table.table-hover tbody tr:focus {
    background: var(--table_active);
}
.table-wrap > .table tr th {
    padding: 1rem 0.5rem;
    white-space: normal;
    font-weight: 600;
	vertical-align: middle;
	text-align: center;
}
.table-wrap > .table tr td {
    padding: 0.8rem 0.5rem;
    line-height: 1.2rem;
    white-space: nowrap;
	vertical-align: middle;
	text-align: center;
}


/* 테이블 가로사이즈 일정 값 이하일 때 가로 스크롤 발생 */
.table-wrap.table-wrap--x-auto {
    overflow-x: auto;
}
.table-wrap.table-wrap--x-auto > .table {
    min-width: 976px; /* 상황에 따라 수정하여 사용 */
}


/* table style ***************************************/
/* th row */
.table-wrap > .table.table--row.table--row-border {
    border-top: 2px solid var(--mid_grey);
}
/*.table-wrap > .table.table--row tr th:not(:first-child),*/
/*.table-wrap > .table.table--row tr td:not(:first-child) {*/
/*    border-left: 1px solid var(--light_grey);*/
/*}*/


/* th col */
.table-wrap > .table.table--col {
}
.table-wrap > .table.table--col.table--col-border {
    border-left: 2px solid var(--dark_grey);
}
.table-wrap > .table.table--col.table--col-border tr th:first-of-type,
.table-wrap > .table.table--col.table--col-border tr:first-of-type td {
    border-top: 1px solid var(--light_grey);
}
.table-wrap > .table.table--col.table--col-border tr td {
    border-left: 1px solid var(--light_grey);
}
.table-wrap > .table.table--col.table--col-border tr td:last-child {
    border-right: 1px solid var(--light_grey);
}


/* table striped */
.table-wrap > .table.table--striped tr:nth-child(2n) th,
.table-wrap > .table.table--striped tr:nth-child(2n) td {
    background: var(--white_grey);
}
.table-wrap > .table.table--striped tbody tr:nth-child(2n).active,
.table-wrap > .table.table--striped tbody tr:nth-child(2n):hover,
.table-wrap > .table.table--striped tbody tr:nth-child(2n):focus {
    background: var(--table_active);
}

/* table title */
.table-wrap > .table .num {
    width: 8%;
}
.table-wrap > .table .idx {
    width: 8%;
}
.table-wrap > .table .category {
    width: 10%;
}
.table-wrap > .table .read {
    width: 8%;
}
.table-wrap > .table .file {
    width: 8%;
}
.table-wrap > .table .title {
    text-align: left;
}
.table-wrap > .table .title a {
    display: block;
    width: 100%;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.2s;
}
.table-wrap > .table .writer {
    width: 20%;
}
.table-wrap > .table .reply {
    width: 150px;
}
.table-wrap > .table .hit {
    width: 7%;
}
.table-wrap > .table .date {
    width: 90px;
    letter-spacing: -2px;
}
.table-wrap > .table .select {
    width: 5%;
    letter-spacing: -2px;
}
.table-wrap > .table tr.table-etc .name {
    text-align: center;
}
.table-wrap > .table tr.table-total {
    background: var(--light_grey);
}
.table-wrap > .table tr.table-total td {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-weight: 500;
}


@media screen and (max-width: 768px) {
    .table-wrap .table {
        table-layout: inherit;
    }
    .table-wrap > .table.table--res thead {
        display: none;
    }
    .table-wrap > .table.table--res {
        border-top: 1px solid #aaaaaa;
        border-bottom: 1px solid #aaaaaa;
    }
    .table-wrap > .table.table--res tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgb(204, 204, 204);
        padding: 10px 1rem 1px 0;
    }
    .table-wrap > .table.table--res tr td {
        display: inline-block;
        width: auto;
        padding: 0.5rem;
        border-bottom: none;
        text-align: left;
    }
    .table-wrap > .table.table--res tr:nth-child(n+2) td {
        border-top: none;
    }

    /* board 리스트 table ***************************************/
    .table-wrap > .table.table--res .num {
        display: none;
    }
    .table-wrap > .table.table--res .idx{
        display: none;
        /*text-align: left;*/
    }
    .table-wrap > .table.table--res .title {
        display: block;
        width: calc(100vw - 30px);
    }
    .table-wrap > .table.table--res .title a {
        height: 1.2rem;
    }
    .table-wrap > .table.table--res .reply {
        position: relative;
        width: auto;
        padding: 0.3rem 0.5rem 0.3rem 18px;
        font-size: 0.9rem;
        color: #999999;
    }
    .table-wrap > .table.table--res .reply:before {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        line-height: 1rem;
        color: #999999;
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
        content: '\f4ad';
    }
    .table-wrap > .table.table--res .read {
        position: relative;
        padding: 0.3rem 0.5rem 0.3rem 24px;
        font-size: 0.9rem;
    }
    .table-wrap > .table.table--res .writer {
        position: relative;
        padding: 0.3rem 0.5rem 0.3rem 22px;
        font-size: 0.9rem;
        color: #999999;
        /*
                position: absolute;
                top: 10px;
                left: 61px;
                padding: 0.5rem 0.5rem 0.5rem 32px;
        */
    }
    .table-wrap > .table.table--res .writer:before {
        display: block;
        position: absolute;
        top: 53%;
        left: 0.5rem;
        transform: translateY(-50%);
        line-height: 1rem;
        color: #999999;
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
        content: '\f007';
    }
    .table-wrap > .table.table--res .hit {
        position: relative;
        width: auto;
        padding: 0.3rem 0.5rem 0.3rem 26px;
        font-size: 0.9rem;
    }
    .table-wrap > .table.table--res .hit:before {
        display: block;
        position: absolute;
        top: 52%;
        left: 0.5rem;
        transform: translateY(-50%);
        line-height: 1rem;
        color: #999999;
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
        content: '\f06e';
    }
    .table-wrap > .table.table--res .date {
        position: relative;
        width: auto;
        padding: 0.3rem 0.5rem 0.3rem 24px;
        font-size: 0.9rem;
        color: #999999;
    }
    .table-wrap > .table.table--res .date:before {
        display: block;
        position: absolute;
        top: 49%;
        left: 0.5rem;
        transform: translateY(-50%);
        line-height: 1rem;
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
        content: '\f272';
    }
    .table-wrap > .table.table--res .file {
        position: relative;
        width: auto;
        padding: 0.3rem 0.5rem;
        font-size: 0.9rem;
        color: #aaaaaa;
    }
    .table-wrap > .table.table--res .hit {
        display: none;
    }
}


/**********************************************/
/* 02. 공통 설정 - 정렬 **************************/
/**********************************************/
.text-hidden {
    position: absolute;
    visibility: hidden;
    font-size: 0;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.align-middle {
    vertical-align: middle;
}


/**********************************************/
/* 03. 공통 설정 - 버튼 *************************/
/**********************************************/
/* 버튼 정렬 */
.btn-wrap {
    display: -webkit-box; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
    display: -moz-box; /* firefox 19- */
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Chrome */
    display: flex;
}
.btn-wrap.btn-wrap--column {
    -webkit-box-orient: vertical; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
    -moz-box-orient: vertical; /* firefox 19- */
    -ms-flex-direction: column; /* IE 10 */
    -webkit-flex-direction: column; /* Chrome */
    flex-direction: column;
}
.btn-wrap.btn-wrap--column .btn:not(:first-child) {
    margin-top: 0.5rem;
}
.btn-wrap.btn-wrap--justify-center {
    justify-content: center;
}
.btn-wrap.btn-wrap--justify-flex-end {
    -webkit-box-pack: end; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
    -moz-box-pack: end; /* Firefox 19- */
    -ms-flex-pack: end; /* IE10 */
    -webkit-justify-content: flex-end; /* Chrome */
    justify-content: flex-end;
}
.btn-wrap.btn-wrap--justify-between {
    justify-content: space-between;
}
.btn-wrap .btn:not(:first-child),
.btn-wrap .badge:not(:first-child) {
    margin-left: 0.5rem;
}
.btn-wrap .btn.btn--full:nth-child(n+2) {
    margin-left: 1rem;
}


/* 버튼 사이즈 */
.btn {
    display: inline-block;
    position: relative;
    padding: 0.3rem 0.4rem;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.3s;
    background: none;
    /*border-radius: 4px;*/
    border: 1px solid rgba(0,0,0,0);
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
}
.btn.btn-xxs {
    padding: 0.1rem 0.2rem;
    font-size: 0.8rem !important;
    line-height: 1.2;
}
.btn.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem !important;
    line-height: 1.4;
}
.btn.btn-sm {
    padding: 0.2rem 0.6rem;
}
.btn.btn-md {
    padding: 0.4rem 1rem;
}
.btn.btn-lg {
    padding: 0.6rem 3.4rem;
    font-size: 1.2rem;
}
.btn.btn-xl {
    padding: 0.8rem 1.8rem;
    font-size: 1.4rem;
}




/* 버튼 색상 */
/* 버튼 라운드 */
.btn--pill {
	border-radius: 50px;
	padding-left: 1rem;
	padding-right: 1rem;
}
.btn-xxs.btn--pill {
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}
.btn-xs.btn--pill {
	padding-left: 0.6rem !important;
	padding-right: 0.6rem !important;
}
.btn-sm.btn--pill {
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}
.btn-md.btn-pill {
	padding-left: 1.3rem;
	padding-right: 1.3rem;
}
.btn-lg.btn-pill {
	padding-left: 3rem;
	padding-right: 3rem;
}
.btn-xl.btn--pill {
	padding-left: 5rem;
	padding-right: 5rem;
}
.btn-main {
    color: #ffffff !important;
    /*background: linear-gradient(135deg, #f17b1c 1%, #f82f2f 100%) !important;*/
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}
.btn-main:hover, .btn-main:focus {
	color: var(--main-color) !important;
    background: none;
}
.btn-sub {
    color: #ffffff !important;
    background-color: var(--sub-color) !important;
    border-color: var(--sub-color) !important;
}
.btn-sub:hover, .btn-sub:focus {
    background-color: var(--sub-hover) !important;
    border-color: var(--sub-hover) !important;
}
.btn-wh {
    color: var(--main-color) !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
.btn-wh:hover, .btn-wh:focus {
    color: #ffffff !important;
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}
.btn-gr {
    color: #ffffff !important;
    background-color: #aaaaaa !important;
    border-color: #aaaaaa !important;
}
.btn-gr:hover, .btn-gr:focus {
    background-color: #8b8a8a !important;
    border-color: #8b8a8a !important;
}
.btn-ch {
    color: #ffffff !important;
    background-color: #666666 !important;
    border-color: #666666 !important;
}
.btn-ch:hover, .btn-ch:focus {
    background-color: #444444 !important;
    border-color: #444444 !important;
}
.btn-outline-main {
    border: 1px solid var(--main-color);
    color: var(--main-color);
}
.btn-outline-main:hover, .btn-outline-main:focus {
    background: var(--main-color);
    color: #ffffff;
}


/* 텍스트 줄바꿈 */
.line-clamp {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.line-clamp--02 {
    display: -webkit-box;
    white-space: normal;
    line-height: 1.2;
    height: 2.4rem;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.line-clamp--03 {
    display: -webkit-box;
    white-space: normal;
    line-height: 1.2;
    height: 3.6rem;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.line-clamp--07 {
    display: -webkit-box;
    white-space: normal;
    line-height: 1.2;
    height: 8.4rem;
    word-wrap: break-word;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

/**********************************************/
/* 04. 공통 설정 - 색상 *************************/
/**********************************************/
.bg--white-grey {
    background: var(--white_grey);
}
.color-main {
	color: var(--main-color);
}
.color-sub {
	color: var(--sub-color);
}
.color-grey {
	color: var(--grey);
}

/**********************************************/
/* 05. 공통 설정 - 마진 패딩 보더 *****************/
/**********************************************/
/* 마진 */
.mg-t-05 {
    margin-top: 0.5rem;
}
.mg-t-1 {
    margin-top: 1rem;
}
.mg-t-15 {
    margin-top: 1.5rem;
}
.mg-t-2 {
    margin-top: 2rem;
}
.mg-t-3 {
    margin-top: 3rem;
}
.mg-b-05 {
    margin-bottom: 0.5rem;
}
.mg-b-1 {
    margin-bottom: 1rem;
}
.mg-b-2 {
    margin-bottom: 2rem;
}
.mg-b-3 {
    margin-bottom: 3rem;
}
.mg-b-4 {
    margin-bottom: 4rem;
}
.mg-l-03 {
    margin-left: 0.3rem;
}
.mg-l-05 {
    margin-left: 0.5rem;
}
.mg-l-1 {
    margin-left: 1rem;
}
.mg-l-2 {
    margin-left: 2rem;
}
.mg-l-4 {
    margin-left: 4rem;
}
.mg-r-03 {
    margin-right: 0.3rem;
}
.mg-r-05 {
    margin-right: 0.5rem;
}
.mg-r-1 {
    margin-right: 1rem;
}
.mg-r-2 {
    margin-right: 2rem;
}
.remove-mg {
    margin: 0 !important;
}