@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');


@import url('style.css');

:root {
	--color-main: 255, 199, 75 ; /* 메인 컬러 #FFC74B */
	--color-main--hover: 234, 176, 49 ; /* 메인 호버 #EAB031 */
	--color-second: 239, 68, 82; /* 세컨드 컬러 ##EF4452 */
	--color-second--hover: 214, 46, 60; /* 세컨드 호버 #D62E3C */
    --color-third: 80, 201, 195; /* 써드 컬러 #50C9C3 */
    --color-third--hover: 80, 201, 195; /* 써드 호버 #50C9C3 */
	--color-dark_grey: 51, 51, 51; /* #333333 */
	--color-mid_grey: 118, 118, 118; /* #767676*/
	--color-grey: 147, 147, 147; /* #939393 */
	--color-light_grey: 208, 206, 206; /* #d0cece */
	--color-white_grey: 235, 235, 235; /* #ebebeb */
	--color-white: 255, 255, 255; /* #ffffff */
	--color-black: 0, 0, 0; /* #000000 */
    --color-placeholder: 203, 203, 203; /* #cbcbcb */
    --color-box-shadow_dark: --color-dark_grey;
    --color-box-shadow_light:--color-dark_grey;
    --color-text:  51, 51, 51; /* #333333 */
    --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;
	touch-action: manipulation;
}
html, body {
    height: 100%;
    letter-spacing: 0;
    font-family: 'Pretendard','Noto Sans KR', 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: 500;
}
body {
    background: rgb(255, 255, 255);
    min-width: 320px;
    height: 100%;
    -webkit-text-size-adjust: none;
    word-wrap: break-word;
    word-break: break-all;
}
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-second));
    transition: all 0.3s;
}
strong {
    font-weight: 600;
}
.clear:after {
	display: block;
	content: '';
	clear: both;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.empty-message {
	width: 100%;
	text-align: center;
	padding: 8rem 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;
}





/**********************************************/
/* 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--gap1 {
    gap: 1rem;
}
.flex.flex--gap05 {
    gap: 0.6rem;
}
.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 > div: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 > div {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.5;
    counter-increment: 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 > div:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 1.5;
    border-radius: 100%;
    content: '';
    background: rgb(var(--color-black));
}
ol.list-count-02 > li > div {
    position: relative;
    padding-left: 2rem;
    line-height: 1.5;
    counter-increment: ol-list-count-01;
}
ol.list-count-02 > li > div:after {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0.5rem;
    line-height: 1.5;
    padding-right: 0.5rem;
    content: counter(ol-list-count-01);
    color: rgb(var(--color-white));
}
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 thead {
    background: rgb(var(--color-white_grey));
}
.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 tr th {
    padding: 0.6rem 0.5rem;
    white-space: normal;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
	background: rgb(var(--color-white_grey));
}
.table-wrap > .table tr td {
    padding: 0.6rem 0.5rem;
    line-height: 1.2rem;
    white-space: normal;
    vertical-align: middle;
}
.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 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 {
}
.btn-wrap .btn:not(:first-child) {
    margin-top: 0.5rem;
}

/* 버튼 사이즈 */
.btn {
    display: inline-block;
    position: relative;
    padding: 0.3rem 0.4rem;
    font-weight: 400;
    letter-spacing: -1px;
    white-space: nowrap;
    transition: all 0.3s;
    background: none;
    border-radius: 0.5rem;
    border: 1px solid rgba(0,0,0,0);
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    color: rgb(var(--color-white));
}
.btn.radius01 {
    border-radius: 1rem;
}
.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 1.4rem;
    font-size: 1.2rem;
}
.btn.btn--xl {
    padding: 1rem 1.8rem;
    font-size: 1.4rem;
}
.btn.btn--xxl {
    padding: 2rem 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: #000000 !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--hover-main {
	color: #000000 !important;
	background-color:  rgb(var(--color-white)) !important;
	border-color: rgb(var(--color-dark_grey)) !important;
}
.btn--hover-main:hover, .btn--hover-main:focus {
	background-color: rgb(var(--color-main)) !important;
}
.btn--custom-mc {
	color: #000000 !important;
	background-color: rgb(var(--color-main)) !important;
	border-color: rgb(var(--color-main)) !important;
}
.btn--custom-mc:hover, .btn--custom-mc:hover {
	color: rgb(var(--color-white)) !important;
	background-color: rgb(var(--color-dark_grey)) !important;
	border-color: rgb(var(--color-dark_grey)) !important;
}
.btn--sub {
    color: #ffffff !important;
    background-color:  rgb(var(--color-second)) !important;
    border-color:  rgb(var(--color-second)) !important;
}
.btn--sub:hover, .btn--sub:focus {
    background-color:  rgb(var(--color-second--hover)) !important;
    border-color:  rgb(var(--color-second--hover)) !important;
}
.btn--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-light_grey)); !important;
    border-color: rgb(var(--color-light_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-second)) !important;
	color: rgb(var(--color-second)) !important;
}
.btn--outline-sub:hover, .btn--outline-sub:focus {
	background: rgb(var(--color-second--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-dark_grey)) !important;
    color: rgb(var(--color-dark_grey)) !important;
}
.btn--outline-ch:hover, .btn--outline-ch:focus {
    background: rgb(var(--color-dark_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: #0E0E0E;
}
.badge--sub {
	background: rgb(var(--color-second));
	color: rgb(var(--color-white));
}
.badge--ch {
    background: rgb(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 rgb(var(--color-main));
    color: rgb(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 #4BA657;
    color: #4BA657;
}
.badge--outline-pp {
    border: 1px solid #6b179c;
    color: #6b179c;
}
.badge--outline-br {
    border: 1px solid #6c0e0e;
    color: #6c0e0e;
}
.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-second));
}
.color--mid_grey {
	color: rgb(var(--color-mid_grey));
}
.color--grey {
    color: rgb(var(--color-grey));
}
.highlighter {
    position: relative;
    z-index: 1
}
.highlighter:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 1rem;
    background-color: rgb(var(--color-main), 0.3);
    content: '';
    z-index: -1;
}
.highlighter--bold:before {
    height: 1.4rem;
}



/**********************************************/
/* 01-09. 공통 - 페이지네이션 ********************/
/**********************************************/
.pagination {
    position: relative;
    text-align: center;
}
.pagination .user-pagination-wrap {
    display: inline-flex;
    gap: 0.4rem;
}
.pagination .user-pagination-wrap > div {
    display: inline-block;
    position: relative;
    text-align: center;
}
.pagination .user-pagination-wrap > div a {
    display: block;
    position: relative;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-weight: 600;
    color: #0E0E0E;
    border-radius: 4px;
    border: 1px solid rgba(var(--color-main) 0);
}
.pagination .user-pagination-wrap > div.arrow a {
    border: 1px solid #DFDFEE;
    border-radius: 4px;
}
.pagination .user-pagination-wrap > div.on a {
    background: rgb(var(--color-main));
    border: 1px solid rgba(var(--color-main) 1);
}




/**********************************************/
/* 01-10. 공통 - 썸네일 박스 *********************/
/**********************************************/

/* 썸네일 - thumbnail__col */
.thumbnail.thumbnail--border {
    border: 1px solid rgba(var(--color-light_grey));
}
.thumbnail.thumbnail--border:hover {
    border: 1px solid rgba(var(--color-main));
    transition: all 0.3s;
}

.thumbnail .thumbnail__img {
    position: relative;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
}
.thumbnail .thumbnail__img img {
    display: block;
}
.thumbnail .thumbnail__img.thumbnail__img--center {
    height: 0;
    padding-top: 65%
}
.thumbnail .thumbnail__img.thumbnail__img--center img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.thumbnail .thumbnail__img.hover-img:hover img,
.thumbnail .thumbnail__img.hover-img:focus img {
    transform: scale(1.1);
    transition: all 0.5s;
}
.thumbnail .thumbnail__img .thumbnail__badge {
    display: block;
    position: absolute;
    z-index: 1;
}
.thumbnail .thumbnail__main {
    padding: 1rem;
    /*margin-left: 1.5rem;*/
}
.thumbnail .thumbnail__main.thumbnail__main--border {
    border-top: 1px solid rgba(var(--color-light_grey));
}
.thumbnail .thumbnail__main .thumbnail__title h2 {
    font-weight: bold;
    font-size: 1.2rem;
}


/* 썸네일 - thumbnail__row */
.thumbnail.thumbnail__row {
    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;
    width: 100%;
    align-items: flex-start;   /* 썸네일 기준 위 정렬 */
    gap: 1rem;
}

.thumbnail.thumbnail__row .thumbnail__img {
    flex: 0 0 120px;
    width: 120px;
}
.thumbnail.thumbnail__row .thumbnail__img img {
    width: 100%;
    height: auto;
    display: block;
}
.thumbnail.thumbnail__row .thumbnail__main {
    flex: 1;                   /* 남은 영역 전부 사용 */
    min-width: 0;              /* ★ 중요 : 말줄임/줄바꿈 안정화 */
    padding: 0;
}
.thumbnail.thumbnail__row .thumbnail__tool > ul {
    margin-top: 0.3rem;
}




@media screen and (max-width: 1024px) {
    /*	.thumbnail.flex--res-mobile .thumbnail__main {*/
    /*		margin-top: 1rem;*/
    /*		margin-left: 0;*/
    /*	}*/
    /*}*/
}
@media screen and (max-width: 768px) {
    .thumbnail.flex--res-mobile .thumbnail__img {
        width: 100%;
        padding-top: 250px;
    }
    .thumbnail.flex--res-mobile .thumbnail__main {
        width: 100%;
        margin-top: 1rem;
        margin-left: 0;
    }
}



.image-wrap.radius {
    overflow: hidden;
    border-radius: 1rem;
}
.image-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;*/
}