@charset "utf-8";

@import url('layout.css');
@import url('form.css');
@import url('fonts.css');
@import url('style.css');

:root {
	--color-main: 245, 123, 41; /* 메인 컬러 #F57B29 */
	--color-main--hover: 219, 91, 7; /* 메인 호버 #DB5B07 */
	--color-sub: 127, 0, 33; /* 서브 컬러 #7F0021 */
	--color-sub--hover: 76, 0, 21; /* 서브 컬러 #4C0015 */
	--color-dark_grey: 51, 51, 51; /* #444444 */
	--color-mid_grey: 102, 102, 102; /* #666666 */
	--color-grey: 170, 170, 170; /* #aaaaaa */
	--color-light_grey: 204, 204, 204; /* #cccccc */
	--color-white_grey: 234, 234, 234; /* #eaeaea */
	--color-white: 255, 255, 255; /* #ffffff */
	--color-black: 0, 0, 0; /* #000000 */
	--color-blue: 223, 237, 251; /* #dfedfb */
    --color-placeholder: 203, 203, 203; /* #cbcbcb */
    --color-box-shadow_dark: --color-dark_grey;
    --color-box-shadow_light:--color-dark_grey;
    --color-text: --color-dark_grey;
    --color-text_link: --color-main;
    --color-table_hover: 245, 245, 245; /* #F5F5F5 */
    --color-table_active: 245, 245, 245; /* #F5F5F5 */
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    letter-spacing: -1px;
    font-family: 'Pretendard', sans-serif, 'Malgun Gothic', Dotum, '돋움', Gulim, Helvetica;
    -webkit-text-size-adjust: none;
    font-size: 15px;
    line-height: 1.5;
    color: rgb(var(--color-text));
    font-weight: 400;
}
a {
    text-decoration: none;
    color: rgb(var(--color-text));
}
a.hover-main:hover {
    color: rgb(var(--color-main));
    transition: all 0.3s;
}
a.hover-sub:hover {
    color: rgb(var(--color-sub));
    transition: all 0.3s;
}
strong {
    font-weight: 600;
}
.clear:after {
	display: block;
	content: '';
	clear: both;
}
.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.empty-message {
	width: 100%;
	text-align: center;
	padding: 15rem 0;
}
.font--xs {
    font-size: 0.8rem;
}
.font--sm {
    font-size: 0.9rem;
}
.font--md {
	font-size: 1.2rem;
}
.font--lg {
	font-size: 1.5rem;
}
.font--xxl {
	font-size: 1.8rem;
}



/**********************************************/
/* 본문 바로가기 & 스크롤 탑 **********************/
/**********************************************/
#skip-nav {
    position: fixed;
    left: 0;
    top: -41px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: rgb(var(--color-white));
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgb(var(--color-white));
    z-index: 100000;
    transition: top 0.3s;
}
#skip-nav:focus {
    top: 0;
}
a#scroll-top {
    display: none;
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-radius: 50%;
    z-index: 99;
    color: rgb(var(--color-white));
    background: #777777;
    box-shadow: 1px 2px 9px rgba(0,0,0,0.3);
}



@media screen and (max-width: 768px) {
    html, body {
        font-size: 14px;
        line-height: 1.5;
    }
}

/**********************************************/
/* 01-01. 공통 - 디스플레이 & 플렉스 **************/
/**********************************************/
.relative {
    position: relative;
}
/* 디바이스별 디스플레이 */
.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;
    }
}

.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 */
}
.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--res-tablet,
.flex.flex--res-mobile {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.flex > .flex__item {
    flex-grow: 1;
    width: calc(100% - 1rem);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.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--res-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;
    }
    .flex.flex--res-tablet > .flex__item:not(:first-child) {
        margin-top: 1rem;
    }
}
@media screen and (max-width: 768px) {
    .flex.flex--res-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;
    }
    .flex.flex--res-mobile > .flex__item:not(:first-child) {
        margin-top: 2rem;
    }
}


/**********************************************/
/* 01-02. 공통 - 리스트 *************************/
/**********************************************/
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-depth > li.depth-icon > a:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	line-height: 1;
	font-family: 'xeicon';
	content: '\e942';
	font-size: 1.2rem;
	font-weight: 900;
}
ul.list-depth > li.depth-icon.on > a:after {
	content: '\e945';
}

/* 하이픈 리스트 */
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: '- ';
}

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


/**********************************************/
/* 01-03. 공통 레이아웃 - 테이블 *****************/
/**********************************************/
.table-wrap { /* 가로 사이즈 지정하여 테이블 가로 사이즈 컨트롤할 것 */
    width: auto;
    overflow: hidden;
}
.table-wrap > .table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-spacing: 0;
    /*border: none;*/
}
.table-wrap > .table caption {
    text-indent: -100000px;
    font-size: 0;
}
.table-wrap > .table tr {
    position: relative;
    transition: all 0.3s;
    border-bottom: 1px solid rgb(var(--color-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: rgb(var(--color-table_active));
}
.table-wrap > .table th {
    padding: 0.6rem 0.5rem;
    white-space: normal;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
}
.table-wrap > .table td {
    padding: 0.6rem 0.5rem;
    line-height: 1.2rem;
    white-space: normal;
    vertical-align: middle;
    text-align: center;
}
.table-wrap > .table tr.table-head__bdt,
.table-wrap > .table th.table-head__bdt,
.table-wrap > .table td.table-head__bdt {
	border-top: 1px solid rgb(var(--color-mid_grey));
}
.table-wrap > .table tr.table-head__bg,
.table-wrap > .table th.table-head__bg,
.table-wrap > .table td.table-head__bg {
	background: rgb(var(--color-white_grey));
}
.table-wrap > .table tr td a {
    transition: all 0.3s;
}
/*.table-wrap > .table tr:hover,*/
/*.table-wrap > .table tr:focus {*/
/*    background: rgba(var(--color-black), 0.05);*/
/*}*/
.table-wrap > .table tr:hover td a,
.table-wrap > .table tr:focus td a {
    color: rgb(var(--color-main));
}
.table-wrap > .table tr .table-emphasis {
	background: rgb(var(--color-blue));
}
.table-wrap > .table tr .table-caution {
	background: rgb(var(--color-main), 0.2);
}


/* table style ***************************************/
/* th row */
.table-wrap > .table.table--row.table--row-border {
    border-top: 2px solid rgb(var(--color-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 rgba(var(--color-black), 0.2);
}

/* th col */
.table-wrap > .table.table--col {
}
/*.table-wrap > .table.table--col.table--col-border {*/
/*    border-left: 2px solid rgb(var(--color-dark_grey));*/
/*}*/
.table-wrap > .table.table--col.table--col-border tr th:not(:first-of-type),
.table-wrap > .table.table--col.table--col-border tr td:not(:first-of-type) {
    border-top: 1px solid rgb(var(--color-light_grey));
	border-left: 1px solid rgb(var(--color-light_grey));
}
.table-wrap > .table.table--col.table--col-border tr td:not(:first-of-type) {
	border-left: 1px solid rgb(var(--color-light_grey));
}
/*.table-wrap > .table.table--col.table--col-border tr td:last-child {*/
/*    border-right: 1px solid rgb(var(--color-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: rgb(var(--color-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: rgb(var(--color-table_active));
}

/* table title */
.table-wrap > .table tr .num {
    width: 10%;
}
.table-wrap > .table tr .idx {
    width: 10%;
}
.table-wrap > .table tr .name {
    width: 30%;
}
.table-wrap > .table tr .model {
    width: 15%;
}
.table-wrap > .table tr .production {
    width: 15%;
}
.table-wrap > .table tr .date {
    width: 12%;
}
.table-wrap > .table tr .note {
    width: auto;
}
.table-wrap > .table tr .image img {
    width: 100%;
}
.table-wrap > .table tr .qrcode img {
    width: 100%;
}




@media screen and (max-width: 768px) {
    /* 테이블 가로사이즈 일정 값 이하일 때 가로 스크롤 발생 */
    .table-wrap.table-wrap--x-auto {
        overflow-x: auto;
    }
    .table-wrap.table-wrap--x-auto > .table {
        min-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 rgb(var(--color-grey));
        border-bottom: 1px solid rgb(var(--color-grey));
    }
    .table-wrap > .table.table--res tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgb(var(--color-white_grey));
        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;
    }

	.table.table--block thead {
		display: none;
	}
	.table.table--block tr {
		display:block;
		margin-bottom:10px;
		border-top:none;
	}
	.table.table--block th,
	.table.table--block td {
		display:block;
		position:relative;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left:50%;
		border-width:0 0 1px 0;
	}
	.table.table--block td:before {
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:50%;
		padding:10px 0;
		background:#ccc;
	}
	/* 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: rgb(var(--color-grey));
    }
    .table-wrap > .table.table--res .hit {
        display: none;
    }
}


/**********************************************/
/* 01-04. 공통 - 정렬 ***************************/
/**********************************************/
.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;
}

/* 텍스트 줄바꿈 */
.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;
}



/**********************************************/
/* 01-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-t-5 {
    margin-top: 5rem;
}
.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;
}



/**********************************************/
/* 01-06. 공통 - 버튼 ***************************/
/**********************************************/
/* 버튼 정렬 */
.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;
	line-height: 1.5;
    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: 1rem 1.8rem;
    font-size: 1.4rem;
}
.btn.btn--full {
    width: 100%;
    text-align: center;
}

/* 버튼 라운드 */
.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: rgb(var(--color-main)) !important;
    border-color: rgb(var(--color-main)) !important;
}
.btn--main:hover, .btn--main:focus {
    background-color: rgb(var(--color-main--hover)) !important;
}
.btn--sub {
    color: #ffffff !important;
    background-color:  rgb(var(--color-sub)) !important;
    border-color:  rgb(var(--color-sub)) !important;
}
.btn--sub:hover, .btn--sub:focus {
    background-color:  rgb(var(--color-sub--hover)) !important;
    border-color:  rgb(var(--color-sub--hover)) !important;
}
.bt-n-wh {
    color:  rgb(var(--color-main)) !important;
    background-color:  rgb(var(--color-white)) !important;
    border-color: rgb(var(--color-white)) !important;
}
.btn--wh:hover, .btn--wh:focus {
    color: rgb(var(--color-white)); !important;
    background-color: rgb(var(--color-main)) !important;
    border-color: rgb(var(--color-main)) !important;
}
.btn--gr {
    color: rgb(var(--color-white)); !important;
    background-color: rgb(var(--color-grey)); !important;
    border-color: rgb(var(--color-grey)); !important;
}
.btn-gr:hover, .btn-gr:focus {
    background-color: rgb(var(--color-grey)) !important;
    border-color: rgb(var(--color-grey)) !important;
}
.btn-ch {
    color: rgb(var(--color-white)); !important;
    background-color: rgb(var(--color-mid_grey)) !important;
    border-color: rgb(var(--color-white)); !important;
}
.btn--ch:hover, .btn--ch:focus {
    background-color: rgb(var(--color-mid_grey)) !important;
    border-color: rgb(var(--color-mid_grey)) !important;
}
.btn--outline-main {
    border: 1px solid rgb(var(--color-main)) !important;
    color: rgb(var(--color-main)) !important;
}
.btn--outline-main:hover, .btn--outline-main:focus {
    background: rgb(var(--color-main)) !important;
    color: rgb(var(--color-white)) !important;
}
.btn--outline-sub {
	border: 1px solid rgb(var(--color-sub)) !important;
	color: rgb(var(--color-sub)) !important;
}
.btn--outline-sub:hover, .btn--outline-sub:focus {
	background: rgb(var(--color-sub--hover)) !important;
	color: rgb(var(--color-white)) !important;
}
.btn--outline-gr {
    border: 1px solid rgb(var(--color-grey)) !important;
    color: rgb(var(--color-grey)) !important;
}
.btn--outline-gr:hover, .btn--outline-gr:focus {
    background: rgb(var(--color-grey)) !important;
    color: rgb(var(--color-white)) !important;
}
.btn--outline-ch {
    border: 1px solid rgb(var(--color-mid_grey)) !important;
    color: rgb(var(--color-mid_grey)) !important;
}
.btn--outline-ch:hover, .btn--outline-ch:focus {
    background: rgb(var(--color-mid_grey)) !important;
    color: rgb(var(--color-white)) !important;
}


/**********************************************/
/* 01-07. 공통 - 뱃지 ***************************/
/**********************************************/
.badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    margin: 0 0.1rem;
    text-align: center;
    font-weight: normal;
    border-radius: 4px;
    white-space: nowrap;
}
.badge--xs {
    padding: 0.2rem 0.3rem;
    font-size: 0.8rem;
    line-height: 1;
}
.badge--sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1.2;
}
.badge--md {
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    line-height: 1.2;
}
.badge--lg {
    padding: 0.6rem 1.4rem;
    font-size: 1.2rem;
    line-height: 1.2;
}
.badge--pill {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 20px;
}
.badge--pill.badge--xs {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.badge--w-02 {
    width: 2.2rem;
}
.badge--w-03 {
    width: 2.8rem;
}
.badge--w-04 {
    width: 3.4rem;
}
.badge--w-05 {
    width: 4rem;
}
.badge--w-06 {
    width: 4.6rem;
}
.badge--bl {
    background: #0c99d6;
    color: rgb(var(--color-white));
}
.badge--main {
    background: rgb(var(--color-main));
    color: rgb(var(--color-white));
}
.badge--sub {
	background: rgb(var(--color-sub));
	color: rgb(var(--color-white));
}
.badge--ch {
    background: var(--color-mid_grey);
    color: rgb(var(--color-white));
}
.badge--gr {
    background: rgb(var(--color-grey));
    color: rgb(var(--color-white));
}
.badge--grn {
    background: #28b2a5;
    color: rgb(var(--color-white));
}
.badge--yl {
    background: #ffc200;
    color: rgb(var(--color-white));
}
.badge--pk {
    background: #fc388b;
    color: rgb(var(--color-white));
}
.badge--wh {
    background: rgb(var(--color-white));
    color: rgb(var(--color-dark_grey));
}
.badge--outline-main {
    border: 1px solid var(--color-main);
    color: var(--color-main);
}
.badge--outline-bl {
    color: #0c99d6;
    border: 1px solid #0c99d6;
}
.badge--outline-ch {
    border: 1px solid var(--color-mid_grey);
    color: var(--color-mid_grey);
}
.badge-outline-gr {
    border: 1px solid rgb(var(--color-grey));
    color: rgb(var(--color-grey));
}
.badge--outline-grn {
    border: 1px solid #28b2a5;
    color: #28b2a5;
}
.badge--outline-yl {
    border: 1px solid #ffc200;
    color: #ffc200;
}
.badge--float {
    display: block;
    position: absolute;
    top: -0.7rem;
    left: -0.3rem;
    border-radius: 4px;
    box-shadow: 1px 1px 10px rgb(var(--color-light_grey));
}


/**********************************************/
/* 01-08. 공통 - 색상 ***************************/
/**********************************************/
.bg--color-white-grey {
    background: rgb(var(--color-white_grey));
}
.color--main {
    color: rgb(var(--color-main));
}
.color--sub {
    color: rgb(var(--color-sub));
}
.color--mid_grey {
	color: rgb(var(--color-mid_grey));
}
.color--grey {
    color: rgb(var(--color-grey));
}


/**********************************************/
/* 01-09. 공통 - 페이지네이션 ********************/
/**********************************************/
.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.7rem;
    font-weight: 600;
}
.pagination .user-pagination-wrap > div a i {
    line-height: 2rem;
}
.pagination .user-pagination-wrap > div.on {
    color: rgb(var(--color-main));
}
.pagination .user-pagination-wrap > div.on a,
.pagination .user-pagination-wrap > div:hover a,
.pagination .user-pagination-wrap > div:focus a {
    color: rgb(var(--color-main));
}
.pagination .user-pagination-wrap > div.on:after {
    display: block;
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'xeicon';
    content: '\e936';
}

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

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


.img-wrap img {
    display: block;
    width: 100%;
}

/**********************************************/
/* 01-99. 라이브러리 ****************************/
/**********************************************/
/* nice-select ********************************/
.nice-select {
    /*position: relative;*/
    /*padding: 0.3rem 2rem 0.3rem 1rem;*/
    /*height: inherit;*/
    /*line-height: inherit;*/
    /*!*border-radius: 1.5rem;*!*/
    /*font-size: 1rem;*/
    border: 1px solid rgb(var(--color-mid_grey));
}
.nice-select:hover {
    border-color: rgb(var(--color-main));
}
.nice-select:hover .current {
    color: rgb(var(--color-main));
}
.nice-select:hover:after,
.nice-select:focus:after {
    border-bottom: 2px solid rgb(var(--color-main));
    border-right: 2px solid rgb(var(--color-main));
}
.nice-select.open:after{
    border-bottom: 2px solid rgb(var(--color-main));
    border-right: 2px solid rgb(var(--color-main));
}
.nice-select .list {
    z-index: 100;
    min-width: 100%;
    max-height: 180px;
    overflow-y: auto;
}
.nice-select.open .list {
    width: 100%;
}
.nice-select .option {
    padding-left: 1rem;
    padding-right: 1rem;
    /*text-align: center;*/
}

/* swal ***************************************/
.swal-button {
    background-color: rgb(var(--color-main));
}
.swal-button:not([disabled]):hover {
    background-color: rgb(var(--color-main--hover));
}
.swal-button--cancel {
    color: rgb(var(--color-white));
    background: rgb(var(--color-grey));
}