@charset "utf-8";
* {
	font-family: 'Spoqa Han Sans Neo', "맑은 고딕", sans-serif;
}
html { font-size: 15px; }
b,
h1,
h2,
h3,
h4,
h5,
h6,
th { font-weight: 400; }
body { /* overflow-y: scroll; */ position: relative; background-color: #fff; overflow-x: hidden; color: #000; font-size: 1rem; font-weight: 400; word-wrap: break-word; word-spacing: -1px; letter-spacing: 0px; overflow-wrap: break-word; }
/*body { opacity: 0; } */
/* Before JS load */
.JS body { opacity: 1; }
/* modal lock scroll */
.LS { overflow: hidden; }
/* ouline disabled */
.OL { outline: 0!important; }
/* clear */
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.visible { overflow: visible !important; }
/* hide */
.he { overflow: hidden; position: absolute; width: 1px; height: 1px; border: none; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
/* :focus {outline:2px solid #f00 !important} */
/* text align */
.alignL { text-align: left !important; }
.alignC { text-align: center !important; }
.alignR { text-align: right !important; }
/* text color */
.disabled { color: #949494 !important; }
.color01 { color: #949494 !important; }
.color02 { color: #d44634 !important; }
.color03 { color: #666666 !important; }
/* font */
.fontT { font-weight: 400 !important; }
.fontL { font-weight: 400 !important; }
.fontR { font-weight: 400 !important; }
.fontM { font-weight: 400 !important; }
.fontB { font-weight: 600 !important; }
.fontBB { font-weight: 600 !important; }

/* imgWrap */
.imgWrap { margin-bottom: 25px; }
.togglePlus { position: relative; width: 16px; height: 16px; }
.togglePlus:before,
.togglePlus:after { content: ""; position: absolute; background-color: #000; transition: transform .25s ease-out; }
.togglePlus:before { top: 0; left: 50%; width: 4px; height: 100%; margin-left: -2px; }
.togglePlus:after { top: 50%; left: 0; width: 100%; height: 4px; margin-top: -2px; }
.active .togglePlus:before { transform: rotate(90deg); }
.active .togglePlus:after { transform: rotate(180deg); }

/* skipContent */
/* skipContent */
.skipToContent {
	position: absolute;
	top: -60px;
	right: 0;
	left: 0;
	z-index: 1000;
	min-width: 320px;
	height: 60px;
	color: #666;
	font-size: 30px;
	text-align: center;
	letter-spacing: -1.5px;
	line-height: 60px;
	background-color: #000;
	background-color: rgba(0,0,0,.8);
	transition: .1s ease-in-out;
	display:block !important
}
.skipToContent:focus,
.skipToContent:hover {
	top: 0;
	color: #fff;
	text-decoration: none;
}
/* 스킵네비 */
#skipNav { height: 0; } 
#skipNav dt { overflow: hidden; position: absolute !important; width: 1px; height: 1px; } 
#skipNav dd a { overflow: hidden; display: block; position: absolute; top: -10000px; left: 0; z-index: 999999; width: 100%; font-size: 16px; text-align: center; } 
#skipNav dd a.on { overflow: hidden; position: absolute; top: 0; left: 0; padding: 15px 0; background: #272727; font-weight: 600; color: #fff; } 

/* MOB */
@media screen and (max-width:940px) {
	body {
		font-size: 0.867rem; /* 3px */
	}
}

/* 아이콘 */
[class*=icon]:first-child { margin-left: 0; }
[class*=icon]:last-child { margin-right: 0; }
[class*=icon] { display: inline-block; margin: 0 3px; vertical-align: middle; }
.icon.headphon { width: 25px; height: 22px; background: url('../images/contents/icon_headphon.svg') no-repeat 0 0 / 20px auto; }

/* 버튼 */
/* 기본 버튼 */
.btn:first-child { margin-left: 0; }
.btn:last-child { margin-right: 0; }
.btn { display: inline-block; position: relative; vertical-align: middle; min-width: 100px; max-width: 100%; height: 48px; margin: 0 4px; padding: 0 35px; border: 1px solid #000; border-radius: 24px; color: #000; text-align: center; line-height: 46px; background: #fff; overflow: hidden; cursor: pointer;  -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; -khtml-user-select: none; }
.btn[disabled] { color: #999; }
.btn span { display: inline-block; vertical-align: middle; }
.btn .icon + span { vertical-align: top; margin-left: 4px; }
/* 버튼 정렬 */
.btnWrap.right { display: flex; justify-content: flex-end; }
/* 버튼 라인색 */
.btn[class*=border] { border-color: inherit; background-color: #fff; }
.btn.border01 { color: #827554; border-color: #827554; }
/* 버튼 배경색 */
.btn[class*=bg] { border: 0; color: #fff; }
.btn.bg01 { background-color: #000; }
/* 버튼 검색 */
.btn.search { padding: 0; width: 40px; min-width: 0; height: 40px; background: url(https://dummyimage.com/20x20/ffcccc/fff) no-repeat 50% 50% #777; }
.btn.search.sizeS { width: 30px; height: 30px; }
@media screen and (max-width:940px) {
	.btn { padding: 0 15px; height: 40px; line-height: 38px; }
}

/* 팝업 */
.dialogWrap { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); overflow: auto; z-index: 100; }
.dialogWrap[data-dimmed='none'] { background-color: transparent; }
.dialogWrap[data-dimmed='none'] .dialog { border: 1px solid #000; box-shadow: 0 0 5px rgba(0, 0, 0, .5); }
dialog > .dialogBody { margin-top: 45px; }
.dialog { position: relative; margin: 5% auto; padding: 40px;  background-color: #fff; border-radius: 1rem; } /*2022-01-19 수정*/
.dialog[data-align='center'] { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
.dialog .close { position: absolute; top: 28px; right: 20px; width: 50px; height: 50px; background: url(../images/common/icon_x.png) no-repeat center center; cursor: pointer; }
.dialogHead { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #000; }
.dialogHead .title { display: inline-block; max-width: 95%; font-weight: 600; font-size: 1.333rem; }
.dialogBody { padding: 0; }
.dialogBody .boardHead { margin-top: 0; }
.dialogBodyInner { max-height: 70vh; overflow-y: auto; overflow-x: hidden; }
.dialog .detailBody > .bodySection { border-top: 0; }
/* MOB */
@media all and ( max-width: 980px ) {
	.dialog  { margin: 0; padding: 15px 15px 15px; width: 90% !important; }
	.dialogHead { /*position: fixed; top: 0; right: 0; left: 0;*/ margin: 0 0 10px; padding: 10px 0; z-index: 5; }
	.dialog .close { position: fixed; top:10px; right: 0; z-index: 10; }
	.dialogBody { overflow-y: scroll; }
}

/* paging */
.pagingWrap {
	position: relative;
	margin-top: 50px;
	text-align: center;
}
.paging {
	display: inline-block;
}
.paging .first,
.paging .prev,
.paging .next,
.paging .last,
.paging strong,
.paging a {
	display: inline-block;
	vertical-align: middle;
	width: 38px;
	height: 38px;
	margin: 0 5px;
	color: #949494;
	text-align: center;
	line-height: 36px;
}
.paging .icon:before {
	content:'';
	display: inline-block;
	width: 12px;
	height: 12px;
	background:url(../../images/common/icon_paging.svg) no-repeat 0 0;
}
.paging strong {
	color: #000;
}
.paging button {
	cursor: pointer;
}
.paging .next:before,
.paging .prev:before {
	content: '';
}
.paging .first.icon {
	transform: rotate(-180deg);
	margin-right: 10px;
}
.paging .prev.icon {
	background-position: -39px 0;
}
.paging .next.icon {
	background-position: -78px 0;
}
.paging .last.icon {
	margin-left: 10px;
	background-position: -117px 0;
}

/* 공통 변경 12.09 */
.paging .first.icon,
.paging .last.icon {
	transform:none;
}
.paging .first:before,
.paging .last:before {
	width:16px;
	height:14px;
}
.paging .prev:before,
.paging .next:before {
	transform:none;
	width:9px;
	height:14px;
}

.paging .first:before {
	background:url(../images/common/icon_paging_first.png) no-repeat 0 0;
}
.paging .prev:before {
	background:url(../images/common/icon_paging_prev.png) no-repeat 0 0;
}
.paging .next:before {
	background:url(../images/common/icon_paging_next.png) no-repeat 0 0;
}
.paging .last:before {
	background:url(../images/common/icon_paging_last.png) no-repeat 0 0;
}
.paging .first.active:before {
	background:url(../images/common/icon_paging_first_active.png) no-repeat 0 0;
}
.paging .prev.active:before {
	background:url(../images/common/icon_paging_prev_active.png) no-repeat 0 0;
}
.paging .next.active:before {
	background:url(../images/common/icon_paging_next_active.png) no-repeat 0 0;
}
.paging .last.active:before {
	background:url(../images/common/icon_paging_last_active.png) no-repeat 0 0;
}


@media screen and (max-width:940px) {
	.pagingWrap {margin-top:30px}
	.paging .first, .paging .prev, .paging .next, .paging .last, .paging strong, .paging a {
		width: auto;
		margin: 0 10px
	}
}

/* 디자인스크롤 */
.mCustomScrollbar {
	-ms-touch-action: pinch-zoom;
	touch-action: pinch-zoom; /* direct pointer events to js */
  }
  .mCustomScrollbar.mCS_no_scrollbar,
  .mCustomScrollbar.mCS_touch_action {
	-ms-touch-action: auto;
	touch-action: auto;
  }
  .mCustomScrollBox {
	position: relative;
	overflow: hidden;
	height: 100%;
	max-width: 100%;
	outline: none;
	direction: ltr;
  }
  .mCSB_container {
	overflow: hidden;
	width: auto;
	height: auto;
  }
  /*.mCSB_inside > .mCSB_container {}*/
  .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
	margin-right: 0;
  }
  .mCS-dir-rtl > .mCSB_inside > .mCSB_container {
	margin-right: 0;
	margin-left: 30px;
  }
  .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
	margin-left: 0;
  }
  .mCSB_scrollTools {
	position: absolute;
	width: 100%;
	height: 20px;
	left: auto;
	top: inherit;
	right: 0;
	bottom: 0;
  }
  .mCSB_outside + .mCSB_scrollTools {
	right: -26px;
  }
  .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
  .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
	right: auto;
	left: 0;
  }
  .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
	left: -26px;
  }
  .mCSB_scrollTools .mCSB_draggerContainer {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: auto;
  }
  .mCSB_scrollTools a + .mCSB_draggerContainer {
	margin: 20px 0;
  }
  .mCSB_scrollTools .mCSB_draggerRail {
	width: 100%;
	height: 20px;
	margin: 0 auto;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
  }
  .mCSB_scrollTools .mCSB_dragger {
	cursor: pointer;
	width: 100%;
	height: 30px;
	z-index: 1;
	background: #ddd;
  }
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	position: relative;
	width: 4px;
	height: 100%;
	margin: 0 auto;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	text-align: center;
  }
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
	width: 12px; /* auto-expanded scrollbar */
  }
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
	width: 8px; /* auto-expanded scrollbar */
  }
  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown {
	display: block;
	position: absolute;
	height: 20px;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	cursor: pointer;
  }
  .mCSB_scrollTools .mCSB_buttonDown {
	bottom: 0;
  }