@charset "utf-8";


/*********************************************
	SUB PAGE
**********************************************/

#page_sub h2	{ text-align: center; }
#page_sub .sub-visual	{
	background-size: cover;
	background-repeat: no-remeat;
	background-position: 50% 50%;
}
#page_sub .sub-visual img	{
	display: block;
	margin: 0 auto;
}

/*** Board Search */
.board-search	{ 
	position: relative;
	padding: 0.5em;
	border: 1px solid #dedede;
}
.board-search fieldset	{
	position: relative;
}
.board-search input	{
	display: block;
	width: 100%;
	font-size: 1.2em;
	line-height: 2.0em;
	padding: 0 0.5em;
	border: none;
	outline: 0;
	box-sizing: border-box;
}
.board-search button	{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1%;
	box-sizing: border-box;
	background: transparent;
	cursor: pointer;
}
.board-search button img	{
	display: block;
	max-height: 100%;
}

.board-search.multiple		{
	border: none;
	padding: 1.5em 0;
}
.board-search.multiple	fieldset	{
	padding-left: 30%;
	padding-right: 15%;
}
.board-search.multiple input,
.board-search.multiple select	{
	font-size: 1.2em;
	line-height: 2.0em;
	padding: 0 0.5em;
	border: 1px solid #dedede;
	outline: 0;
	box-sizing: border-box;
	height: 2.0em;
}
.board-search.multiple select	{
	position: absolute;
	top: 0;
	left: 0;
	width: 28%;
}
.board-search.multiple button	{
	width: 15%;
	height: 2.4em;
	line-height: 2.2em;
	background: #444444;
	color: #fff;
	text-align: center;
	font-size: 1.0em;
	right: 0;
}

.board-category	{ 
	padding: 1.5em 0;
}
.board-category select	{
	display: block;
	width: 100%;
	font-size: 1.2em;
	line-height: 2.0em;
	padding: 0 0.5em;
	border: 1px solid #dedede;
	outline: 0;
	box-sizing: border-box;
	height: 2.0em;
}



/*** Board Page */

/*#board_page	{ padding-bottom: 50px; }*/
#board_page.bo-top	{ border-top: none; }
#board_page.bo-top:before	{ 
	content: "";
	display: block;
	position: relative;
	clear: both;
	height: 2px;
	background: #424242
}


.board-page-box	{
	padding: 2.0em 0;
	text-align: center;
	overflow: hidden;
}
.board-page-box a,
.board-page-box strong	{
	display: inline-block;
	max-width: 11%;
	line-height: 2.0em;
	min-width: 2.0em;
	padding: 0 0.2em;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	border-radius: 2px;
	border: 1px solid #d8d8d8;
	color: #333;
}
.board-page-box strong	{
	border-color: #373737;
	background: #373737;
	color: #fff;
}

.board-page-box .btn	{
	text-align: left;
	text-indent: -999px;
	overflow: hidden;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.board-page-box .btn.first	{ background-image: url('/m/images/board/ico_page_first.png'); }
.board-page-box .btn.prev	{ background-image: url('/m/images/board/ico_page_prev.png'); }
.board-page-box .btn.next	{ background-image: url('/m/images/board/ico_page_next.png'); }
.board-page-box .btn.last	{ background-image: url('/m/images/board/ico_page_last.png'); }



/*** Board List */

.board-list	{ 
	display: block;
	position: relative;
}
.board-list li	{
	position: relative;
	padding: 1.5em 1.0em;
	border-bottom: 1px solid #d8d8d8;
}

.board-list li a	{
	display: block;
	position: relative;
}

.board-list li em,
.board-list li span	{ display: block; }
.board-list li em,
.board-list li em * {
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.board-list li em	{ padding-bottom: 10px; }
.board-list li em strong	{
	font-weight: 400;
	color: #000;
	font-size: 1.2em;
	vertical-align: middle;
}

.board-list li span	{
	color: #767676;
	font-size: 1.0em;
}
.board-list li span i	{
	font-style: normal;
	padding: 0 0.8em;
	color: #bebebe;
}

.board-list li.notice	{
	background: #f3f3f3;
}

.board-list .empty	{
	text-align: center;
	line-height: 3.0em;
	color: #555555;
}

.board-list.has-state li a		{ padding-right: 25%; }
.board-list.has-state li a > i	{
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -1.0em;
	font-style: normal;
	font-size: 1.0em;
	width: 20%;
	text-align: center;
	line-height: 2.0em;
	background: #838587;
	color: #fff;
}
.board-list.has-state li a > i.com	{ background: #483865; }


.board-gallery	{
	display: block;
	position: relative;
	overflow: hidden;
}

.board-gallery ul	{
	display: block;
	margin: 0 -4px;
}

.board-gallery li	{
	display: block;
	position: relative;
	width: 50%;
	float: left;
	padding: 4px;
	box-sizing: border-box;
}

.board-gallery li a	{
	display: block;
	position: relative;
}

.board-gallery li a em	{
	display: block;
	position: relative;
	overflow: hidden;
}
.board-gallery li a em:before	{
	content: "";
	display: block;
	position: relative;
	padding-top: 70%;
}

.board-gallery li a em img	{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	max-width: 300%;
	width: auto !important;
	height: auto !important;
}

.board-gallery li a span	{
	display: block;
	position: relative;
	padding: 1.0em 0;
	border-bottom: 1px solid #dadada;
	margin-bottom: 1.5em;
}
.board-gallery li a span > *	{
	display: block;
	position: relative;
	color: #333;
	font-size: 1.1em;
	line-height: 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.board-gallery li a span sup	{
	font-size: 0.9em;
	color: #999;
}


/*** Board View */

.board-view		{
	position: relative;
}
.board-view .title	{
	display: block;
	position: relative;
	padding: 1.5em 0;
	border-bottom: 1px solid #c1c1c2;
}
.board-view .title.no-border	{ border-bottom: none; }

.board-view .title em	{
	display: block;
	position: relative;
	background: #efefef;
	padding: 1.0em;
	line-height: 1.5em;
}
.board-view .title em strong	{
	font-size: 1.0em;
	font-weight: 400;
	word-break: normal;
	word-wrap: normal;
	vertical-align: middle;
}

.board-view .title span	{
	display: block;
	position: relative;
	padding: 1.0em 1.0em 0;
	color: #999999;
	font-size: 1.0em;
}
.board-view .title span i	{
	font-style: normal;
	padding: 0 0.8em;
	color: #bebebe;
}

.board-view .title i.icon	{
	display: block;
	position: absolute;
	bottom: 0.85em;
	right: 0.5em;
	font-style: normal;
	font-size: 1.0em;
	width: 20%;
	text-align: center;
	line-height: 2.0em;
	background: #838587;
	color: #fff;
}
.board-view .title i.icon.com	{ background: #483865; }

.board-view .duble-box	{ 
	border-top: 1px solid #cfd1d4;
	padding: 1.5em 0;
	margin-top: 1.5em;
}

.board-view .thumb-title	{
	position: relative;
	padding-left: 45%;
	margin-bottom: 1.5em;
}
.board-view .thumb-title > *	{ display: block; }
.board-view .thumb-title .thumb	{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	background: #cfd1d4;
	border: 1px solid #cfd1d4;
	box-sizing: border-box;
	overflow: hidden;
}
.board-view .thumb-title .thumb img	{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.board-view .thumb-title em strong	{
	display: block;
	color: #444444;
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 0.3em 0 0.8em;
}
.board-view .thumb-title span	{
	color: #424242;
	font-size: 1.0em;
	margin-top: 0.4em;
}

.board-view .gallery-title	{
	display: block;
	position: relative;
}
.board-view .gallery-title .video-box	{
	position: relative;
	margin-top: 1.5em;
}


.board-view .gallery-title .thumb	{
	display: block;
	position: relative;
	background: #d8d8d8;
	margin-top: 1.5em;
}
.board-view .gallery-title .thumb:before	{
	content: "";
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('/m/images/board/ico_play.svg') no-repeat 50% 50%;
	background-size: auto 50%;
	z-index: 1;
}
.board-view .gallery-title .thumb img	{
	display: block;
}
.board-view .gallery-title strong	{
	display: block;
	color: #444;
}


.board-view .descript	{
	padding: 1.0em;
	font-size: 0.9em;
	line-height: 1.6em;
	background: #f7f7f7;
	color: #838587;

	word-break: normal;
	word-wrap: normal;
}
.board-view .descript li	{
	position: relative;
	padding-left: 1.0em;
}
.board-view .descript li + li	{
	margin-top: 0.5em;
}
.board-view .descript li:before	{
	content: "";
	display:block;
	position: absolute;
	width: 0.35em;
	height: 0.35em;
	top: 0.5em;
	left: 0;
	background: #838587;
}


.board-view .content	{
	display: block;
	position: relative;
	padding: 2.0em 1.0em;
	border-bottom: 1px solid #c1c1c2;
	line-height: 1.5em;
	font-size: 1.0em;
	color: #424242;
	overflow: hidden;

	word-break: normal;
	word-wrap: normal;
}
.board-view .content * {
	word-break: normal;
	word-wrap: normal;
}

.board-view .content img	{
	width: auto !important;
	height: auto !important;
}

.board-view .content .thumb	{
	display: block;
	float: left;
	max-width: 45%;
	margin: 0 1.0em 1.0em 0;
}
.board-view .content .thumb img	{ display: block; }

@media all and (max-width: 470px) {
	.board-view .content .thumb	{
		float: none;
		max-width: 100%;
		margin: 0 0 1.0em 0;
	}
	.board-view .content .thumb img	{
		margin: 0 auto;
	}
}

.board-view .reply	{
	background: #efefef;
	border-bottom: 0;
}
.board-view .reply .re-title	{
	text-align: left;
	font-size: 1.1em;
	padding-bottom: 0.5em;
	vertical-align: middle;
}

.board-view .reply .re-title strong	{
	vertical-align: middle;
	font-weight: 400;
}

.bo-link	{
	display: table;
	table-layout: fixed;
	width: 100%;
}
.bo-link dl	{
	display: table-row;
	width: 100%;
}
.bo-link dl dt,
.bo-link dl dd	{
	display: table-cell;
	border-bottom: 1px solid #c1c1c2;
}
.bo-link dl dt	{ 
	width: 25%;
	padding: 1.0em 1.0em;
	color: #424242;
}
.bo-link dl dd > *	{ 
	display: block;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #838587;
}

.button-group	{
	padding: 1.5em 0;
	overflow: hidden;
}
.button-group > *	{
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	border: 1px solid #cfd1d4;
	background: #fff;
	color: #000;
	padding: 0.8em;
	font-size: 1.1em;
	line-height: 1.2em;
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: middle;
}

.button-group > * + *	{ margin-top: 15px; }

.button-group > *.point		{ background: #483865; color: #fff; border-color: #483865; }
.button-group > *.point2	{ background: #ec008c; color: #fff; }
.button-group > *.point3	{ background: #f4f4f4; color: #000; }

.board-list + .button-group		{ padding: 2.0em 0; }
.button-group + .board-page-box	{ padding-top: 0; }
.button-group > *.right	{
	float: right;
}

.button-group.col-2 > *	{
	width: 48.5%;
	float: left;
}
.button-group.col-2 > * + *	{
	margin-top: 0px;
	margin-left: 1.5%;
}

.button-group.col-3 > *	{
	width: 31.83%;
	float: left;
}
.button-group.col-3 > * + *	{
	margin-top: 0px;
	margin-left: 1.5%;
}

	

.board-password		{
	margin: 20px 0;
	padding: 1.0em 1.5em;
	/*background: #efefef;*/
}


.board-password fieldset	{
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0 2.0em 1.0em;
}
.board-password p	{
	margin: 1.5em 0;
	text-align: center;
	color: #555555;
}
.board-password.talk p	{ margin-bottom: 0; }
.board-password input	{
	display: block;
	width: 100%;
	font-size: 1.2em;
	line-height: 2.0em;
	padding: 0 0.5em;
	border: 1px solid #aaaaaa;
	outline: 0;
	box-sizing: border-box;
}


/*** Board Write **/

.scroll-box	{
	border: 1px solid #dddddd;
	margin: 20px 0;
	padding: 20px;
	height: 180px;
	overflow-y: auto;
	line-height: 1.5em;
	color: #555555;
	background: #f4f4f4;
}

.board-write p	{
	margin-bottom: 0.5em;
	line-height: 1.5em;
}

.board-write input[type="radio"],
.board-write input[type="checkbox"]	{ display: none; }
.board-write input[type="radio"] + label,
.board-write input[type="checkbox"] + label	{
	display: inline-block;
	vertical-align: middle;
	margin-right: 1.5em;
	line-height: 1.5em;
	cursor: pointer;
}

.board-write input[type="radio"] + label i,
.board-write input[type="checkbox"] + label	i	{
	display: inline-block;
	position: relative;
	vertical-align: middle;
	border: 1px solid #dddddd;
	border-radius: 0.3em;
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.3em;
	background: #fff;
}

.board-write input[type="radio"]:checked + label i,
.board-write input[type="checkbox"]:checked + label	i	{
	background: url('/m/images/board/ico_check.svg') no-repeat 50% 50%;
	background-size: 80% auto;
}



.board-form p	{
	color: #555555;
	margin-bottom: 0;
}

table.form		{
	margin-top: 1.5em;
	margin-bottom: 1.0em;
	width: 100%;
	border-top: 1px solid #c1c1c2;
	table-layout: fixed;
}
table.form th,
table.form td	{ border-bottom: 1px solid #c1c1c2; }
table.form th	{
	width: 26%;
	background: #efefef;
	text-align: left;
	padding: 0 1.0em;
	font-weight: 400;
}
table.form td	{ padding: 1.0em; }
table.form td input[type="text"],
table.form td input[type="password"],
table.form td input[type="tel"],
table.form td select	{
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 2.0em;
	font-size: 1.0em;
}
table.form td input[type="text"],
table.form td input[type="password"],
table.form td input[type="tel"]		{
	padding: 0 0.3em;
}
table.form td textarea	{
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 5.0em;
	font-size: 1.0em;
	line-height: 1.5em;
	padding: 0.3em;
	font-family: 'Arial', 'Nanum Gothic';
}

table.form td p.warring	{
	padding: 0.5em 0;
	color: #ff0707;
}

table.form td .ui-btn	{
	display: block;
	width: 100%;
	cursor: pointer;
	font-size: 1.0em;
	height: 2.0em;
	line-height: 2.0em;
	background: #373737;
	color: #fff;
}

table.form td .frm-tell	{ 
	position: relative;
	float: left;
	width: 31%;
	box-sizing: border-box;
}
table.form td .frm-tell + .frm-tell	{
	padding-left: 5%;
	width: 34.5%;
}
table.form td .frm-tell + .frm-tell:before	{
	content: "-";
	display: block;
	position: absolute;
	width: 14%;
	line-height: 2.0em;
	text-align: center;
	left: 0;
	top: 0;
	bottom: 0;
}

table.form td .frm-callendar	{
	display: block;
	position: relative;
	padding-right: 15%;
}
table.form td .frm-callendar button	{
	display: block;
	position: absolute;
	top: 5px;
	bottom: 5px;
	right: 0;
	width: 15%;
	background: url('/m/images/board/ico_calendar.svg') no-repeat 50% 50%;
	background-size: contain;
	text-indent: -999px;
	overflow: hidden;
	cursor: pointer;
}
table.form td .frm-callendar + .frm-callendar {
	padding-right: 0;
	margin-top: 0.5em;
}

table.form td .frm-default + .frm-default { margin-top: 0.5em; }
table.form td fieldset + .frm-clear { clear: both; padding-top: 0.8em; }


table.form td .frm-birth	{
	display: block;
	position: relative;
	float: left;
	width: 33%;
	padding-right: 7%;
	box-sizing: border-box;
}

table.form td .frm-birth:before	{
	display: block;
	position: absolute;
	width: 21%;
	line-height: 2.0em;
	text-align: center;
	right: 0;
	top: 0;
	bottom: 0;
}
table.form td .frm-birth + .frm-birth	{
	padding-left: 2%;
}
table.form td .frm-birth.year:before	{ content: "년"; }
table.form td .frm-birth.month:before	{ content: "월"; }
table.form td .frm-birth.day:before		{ content: "일"; }

table.form td .frm-email	{
	display: block;
	position: relative;
	width: 33%;
	padding-right: 7%;
	float: left;
	box-sizing: border-box;
}
table.form td .frm-email:before	{ 
	content: "@";
	display: block;
	position: absolute;
	width: 21%;
	line-height: 2.0em;
	text-align: center;
	right: 0;
	top: 0;
	bottom: 0;
}
table.form td .frm-email + .frm-email				{ padding-right: 2px; }
table.form td .frm-email + .frm-email:before		{ display: none; }
table.form td .frm-email + .frm-email + .frm-email	{ width: 34%; }

table.form td .frm-addr	{
	display: block;
	position: relative;
	box-sizing: border-box;
}
table.form td .frm-addr + .frm-addr	{ margin-top: 5px; }
table.form td .frm-addr.zip input	{
	width: 33.33%;
	float: left;
}
table.form td .frm-addr.zip .ui-btn	{
	width: 40%;
	float: left;
	text-align: center;
	margin-left: 3px;
}

.video-box video	{ width: 100%; }

i.board-bullet	{
	display: inline-block;
	min-width: 3.0em;
	text-align: center;
	line-height: 1.6em;
	font-size: 0.9em;
	font-style: normal;
	padding: 0 0.3em;
	vertical-align: middle;
	margin-right: 0.5em;
	color: #fff;
}

i.board-bullet[data-cate="NEW"]	{ background: #483865; }
i.board-bullet[data-cate="답변"]	{ background: #483865; }
i.board-bullet[data-cate="공지"]	{ background: #483865; }
i.board-bullet[data-cate="이벤트"]	{ background: #53234b; }


/** 첨부파일

.attech-list		{ padding: 25px 15px 0; }
.attech-list li		{ margin: 5px 0; }
.attech-list li a	{ 
	display: block;
	position: relative;
	padding: 10px 20px;
	background: #f7f7f7;
	border-radius: 5px;
	color: #333;
}
.attech-list li a:before	{
	content: url('/images/board/ico_board_download.png');
	vertical-align: middle;
	margin-right: 10px;
}



.bo-link	{
	display: table;
	table-layout: fixed;
	width: 100%;
}
.bo-link dl	{
	display: table-row;
	width: 100%;
}
.bo-link dl dt,
.bo-link dl dd	{
	display: table-cell;
	border-bottom: 1px solid #c1c1c2;
}
.bo-link dl dt	{ 
	width: 120px;
	padding: 1.0em 1.0em;
	color: #424242;
}
.bo-link dl dd a,
.bo-link dl dd span	{ 
	display: block;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #838587;
}
 */


.double-thumb-list li	{
	display: block;
	position: relative;
	padding: 1.0em;
	border-bottom: 1px solid #cfd1d4;
}
.double-thumb-list li:first-child	{ border-top: 2px solid #373737; }

.double-thumb-list li a	{
	display: block;
	position: relative;
}
.double-thumb-list li a em	{
	display: block;
	position: relative;
	overflow: hidden;
}

.double-thumb-list li span	{
	display: block;
	position: relative;
	color: #333;
	padding: 1.0em 0 0;
}
.double-thumb-list li span strong	{
	display: block;
	color: #000;
	overflow: hidden;
	font-size: 1.1em;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.double-thumb-list li span sup	{
	display: block;
	color: #383838;
	padding-top: 0.5em;
	font-size: 1.0em;
	line-height: 1.8em;
	overflow: hidden;
}

.before-after-thumb-box	{
	display: block;
	margin: 0 -4px;
}
.before-after-thumb-box i	{
	display: block;
	position: relative;
	width: 50%;
	padding: 0 4px;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
}
.before-after-thumb-box i:before	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	right: 4px;
	background-size: cover;
	background-position: 0 0;
	background-repeat: no-repeat;
	z-index: 1;
}
.before-after-thumb-box i:after	{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right: 4px;
	left: 4px;
	top: 0;
	background: url('/m/images/board/bak_common_mask.png') no-repeat 100% 100%;
	background-size: cover;
	z-index: 1;
}
.before-after-thumb-box i.before:before	{ background-image: url('/m/images/board/bak_before_mask.png'); }
.before-after-thumb-box i.after:before	{ background-image: url('/m/images/board/bak_after_mask.png'); }

.before-after-thumb-box i img	{
	display: block;
	width: 100% !important;
	height: auto !important;
}

.box .before-after-thumb-box	{ 
	display: block;
	width: auto;
	overflow: hidden;
	margin: 0 -4px;
}
.box .before-after-thumb-box i	{
	width: 50%;
	height: auto;
	padding: 0 4px;
	box-sizing: border-box;
	margin: 0;
}
.box .before-after-thumb-box img		{ width: 100%; }