@charset "utf-8";

/**********************************************************************
- Board Style
-----------------------------------------------------------------------
* Descript : 해당 사이트의 게시판 레이아웃 스타일
             게시판 리스트, 상세, 작성 페이지 스타일을 정의.
-----------------------------------------------------------------------
* 최초작성일 :
* 최초작성자 :

* 최후작성일 :
* 최후작성자 :
--
* 기본 가로 사이즈 :


**********************************************************************/

.scroll-box		{ background: #f7f7f7; height: 150px; overflow: auto; padding: 20px; font-family: 'Dotum'; line-height: 1.8em; color: #555555; border: 1px solid #c8c8c8; font-size: 13px; }

.agree-box		{ margin-top: 20px; font-size: 13px; }

.board-title	{ text-align: center; padding: 50px 0; font-size: 36px; font-weight: 800;}

.board-btn-group							{ margin-bottom: 80px; padding-top: 30px; border-top: 1px solid #cfd1d4; }
.board-list-bottom-box						{ margin-top: 0 !important; }
.board-list-bottom-box .board-btn-group		{ margin-bottom: 0px; border-top: none; margin-top: 0 !important; }


#b_mem_personal	{ width: 100%; }
#b_mem_personal + fieldset	{ padding-top: 20px; }

.board-category	{
	position: relative;
	clear: both;
	margin-bottom: 30px;
}
.board-category:after	{
	content: "";
	display: block;
	clear: both;
}

.board-category li	{ float: left; }
.board-category.category-col-1 li	{ width: 100%; float: none; }
.board-category.category-col-2 li	{ width: 50%; }
.board-category.category-col-3 li	{ width: 33.33%; }
.board-category.category-col-4 li	{ width: 25%; }
.board-category.category-col-5 li	{ width: 20%; }
.board-category.category-col-6 li	{ width: 16.66%; }
.board-category.category-col-7 li	{ width: 14.285%; }

.board-category li a	{
	display: block;
	margin: 1px;
	text-align: center;
	line-height: 50px;
	background: #eaeaef;
	color: #555555;
}
.board-category li.on a	{
	position: relative;
	background: #faa635;
	color: #fff;
}
.board-category li.on a:after	{
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-top-color: #faa635;
	border-bottom-width: 0;

	left: 50%;
	bottom: -7px;
	margin-left: -7px;
}


/************************************************************
	Icon
*************************************************************/

.ico	{
	display: inline-block;
	position: relative;
	padding: 5px 8px;
	line-height: 1.0em;
	font-size: 11px;
	border-radius: 2px;
	margin-right: 5px;
	background: #eaeaea;
	color: #333;
	vertical-align: middle;
	font-family: 'Dotum';
}

.ico.new		{ display: inline-block; padding: 0; font-size: 1.0em; margin-left: 5px; background: none; color: #faa635; font-family: 'Nanum Gothic'; font-weight: 800; }
.ico.new:before	{  }
.ico.file	{ background: #1b678e; color: #fff; }
.ico.notice	{ background: #939598; color: #fff; }
.ico.best	{ background: #faa635; color: #f4dc86; }
.ico.secret	{ background: #7f7f7f; color: #fff; }
.ico.reply	{
	overflow: hidden;
	text-indent: -999px;
	width: 19px;
	height: 19px;
	padding: 0;
	background: transparent;
	box-sizing: content-box;
}
.ico.reply:before	{
	content: "R";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 19px;
	line-height: 19px;
	text-align: center;
	text-indent: 0;
	background: #5d7fcd;
	color: #fff;
	border-radius: 2px;
	z-index: 1;
}
.ico.reply:after	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 9px;
	border: 1px dashed #aaaaaa;
	border-top-width: 0;
	border-right-width: 0;
	z-index: 0;
}
.ico.reply.dept-2	{ padding-left: 15px; }
.ico.reply.dept-3	{ padding-left: 30px; }
.ico.reply.dept-4	{ padding-left: 45px; }
.ico.reply.dept-5	{ padding-left: 60px; }


/************************************************************
	Layout
*************************************************************/

.board-list-bottom-box					{ position: relative; clear: both; margin: 30px 0; }
.board-list-bottom-box .board-btn-group	{ text-align: right; }
.board-list-bottom-box .board-btn-group a + a	{ margin-left: 5px; }


/*** Paging Style */

.paging-box	{
	text-align: center;
	overflow: hidden;
}
.paging	{
	display: block;
	position: relative;
	overflow: hidden;
}
.paging a,
.paging strong	{
	display: inline-block;
	max-width: 7%;
	line-height: 38px;
	min-width: 38px;
	padding: 0 0.2em;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	border-radius: 2px;
	border: 1px solid #d8d8d8;
	color: #333333;
}
.paging strong	{
	border-color: #373737;
	background: #373737;
	color: #fff;
}

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


/*** Board Page */

.board-page-box	{
	text-align: center;
	overflow: hidden;
}
.board-page-box a,
.board-page-box strong	{
	display: inline-block;
	max-width: 7%;
	line-height: 38px;
	min-width: 38px;
	padding: 0 0.2em;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	border-radius: 2px;
	border: 1px solid #d8d8d8;
	color: #333333;
}
.board-page-box strong	{
	border-color: #5b5b5b;
	background: #5b5b5b;
	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('/images/board/ico_page_first.png'); }
.board-page-box .btn.prev	{ background-image: url('/images/board/ico_page_prev.png'); }
.board-page-box .btn.next	{ background-image: url('/images/board/ico_page_next.png'); }
.board-page-box .btn.last	{ background-image: url('/images/board/ico_page_last.png'); }

/** 첨부파일 */

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




/************************************************************
	LIST
*************************************************************/

.board-list	{
	position: relative;
	clear: both;
	width: 100%;
}

.basic-list	{ font-size: 13px; border-top: 2px solid #6b6b6b; }
.basic-list th,
.basic-list td	{
	height: 40px;
	padding: 8px 15px;
	text-align: center;
	border-bottom: 1px solid #cfd1d4;
}
.basic-list thead th	{
	background: #f8f8f8;
	font-weight: 600;
}
.basic-list tr:hover > *	{ background: #f1f1f1; }
.basic-list td				{ color: #555555; font-size: 13px; }
.basic-list td a			{ display: inline-block; vertical-align: middle; color: #333; }
.basic-list td .secret		{ vertical-align: middle; margin-left: 5px; }

.board-list td .state	{
	display: inline-block;
	color: #fff;
	font-style: normal;
	background: #faa635;
	padding: 5px 10px;
	min-width: 80px;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid transparent;
}
.board-list td .state.ready	{ background: #aaaaaa; }

.board-list td .sec	{
	display: inline-block;
	color: #aaaaaa;
	font-style: normal;
	border: 1px solid #aaaaaa;
	padding: 5px 10px;
	min-width: 80px;
	text-align: center;
	box-sizing: border-box;
}
.board-list td .sec.on	{ border-color: #faa635; color: #faa635; }


.board-gallery	{
	display: block;
	overflow: hidden;
}
.board-gallery .list	{ margin: 0 -15px; }
.board-gallery li	{
	display: block;
	position: relative;
	width: 33.33%;
	padding: 15px;
	float: left;
	box-sizing: border-box;
}
.board-gallery li a	{
	display: block;
	position: relative;
	height: 400px;
}
.board-gallery li em	{
	display: block;
	position: relative;
	height: 300px;
	overflow: hidden;
}
.board-gallery li em img	{
	max-width: 300%;
	min-height: 300px;
}
.board-gallery li span	{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100px;
	padding: 25px;
	box-sizing: border-box;
	background: #f4f4f4;
}
.board-gallery li span strong	{
	display: block;
	position: relative;
	color: #000;
	font-size: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.board-gallery li span sup	{
	display: block;
	font-size: 16px;
	color: #383838;
	padding-top: 10px;
}





/************************************************************
	View
*************************************************************/

.board-link	{
	display: table;
	table-layout: fixed;
	width: 100%;
	font-size: 13px;
	border-top: 1px solid #c1c1c2;
}
.board-link + .board-btn-group	{ border-top: none; margin-top: 0!important; }
.board-link dl	{
	display: table-row;
	width: 100%;
}
.board-link dl dt,
.board-link dl dd	{
	display: table-cell;
	border-bottom: 1px solid #c1c1c2;
}
.board-link dl dt	{
	width: 120px;
	padding: 1.0em 1.0em;
	color: #424242;
}
.board-link dl dd > *	{
	display: block;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #838587;
}


.board-content		{
	padding: 45px 15px;
	font-size: 13px;
	line-height: 1.6em;
	color: #383838;
	/*border-bottom: 1px solid #cfd1d4;*/
}
.board-content img	{ max-width: 100%; width: auto !important; height: auto !important; }
.board-content.reply	{
	padding: 20px 40px 50px;
	background: #f7f7f7;
}
.board-content .reply-title		{
	margin-bottom: 20px;
	font-size: 15px;
	color: #000;
	font-weight: 600;
}
.board-content .reply-title i	{
	display: inline-block;
	height: 25px;
	padding: 0 15px;
	line-height: 25px;
	min-width: 55px;
	text-align: center;
	box-sizing: border-box;
	font-size: 15px;
	color: #fff;
	background: #444444;
	vertical-align: middle;
	margin-right: 10px;
}


.sarch	{
	display: block;
	position: relative;
	margin: 30px 0 100px;
	text-align: center;
}
.sarch input[type="text"],
.sarch select	{
	display: inline-block;
	height: 35px;
	box-sizing: border-box;
	vertical-align: middle;
}
.sarch input[type="text"]	{
	width: 100%;
	max-width: 400px;
}
.sarch .ui-btn	{ height: 35px; vertical-align: middle; background: #5b5b5b; min-width: 80px; border-color: #5b5b5b; }


/************************************************************
	Write
*************************************************************/

.board-form		{
	width: 100%;
	border-top: 2px solid #6b6b6b;
	table-layout: fixed;
	font-size: 13px;
}
.board-form th,
.board-form td	{ border-bottom: 1px solid #c1c1c2; height: 40px; }
.board-form th	{
	width: 110px;
	background: #efefef;
	text-align: center;
	padding: 0 1.0em;
	font-weight: 600;
}
.board-form td	{ padding: 1.0em; }
.board-form td input[type="text"],
.board-form td input[type="password"],
.board-form td input[type="tel"],
.board-form td select	{
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.board-form td textarea	{
	display: block;
	width: 100%;
	min-height: 250px;
	box-sizing: border-box;
	line-height: 1.5em;
	font-family: 'Arial', 'Nanum Gothic';
}

.board-form td p.warring	{
	padding: 0.5em 0;
}

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

.board-form td .frm-tell	{
	position: relative;
	float: left;
	width: 31%;
	box-sizing: border-box;
}
.board-form td .frm-tell + .frm-tell	{
	padding-left: 5%;
	width: 34.5%;
}
.board-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;
}

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

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


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

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

.board-form td .frm-email	{
	display: block;
	position: relative;
	width: 33%;
	padding-right: 7%;
	float: left;
	box-sizing: border-box;
}
.board-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;
}
.board-form td .frm-email + .frm-email				{ padding-right: 2px; }
.board-form td .frm-email + .frm-email:before		{ display: none; }
.board-form td .frm-email + .frm-email + .frm-email	{ width: 34%; }

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

.board-form td .default		{ width: 150px !important; }
.board-form td .small		{ width: 100px !important; }

.board-form td .sec	{
	display: inline-block;
	color: #aaaaaa;
	font-style: normal;
	border: 1px solid #aaaaaa;
	padding: 5px 10px;
	min-width: 80px;
	text-align: center;
	box-sizing: border-box;
}
.board-form td .sec.on	{ border-color: #faa635; color: #faa635; }

.form-group input[type="text"],
.form-group input[type="password"],
.form-group select	{ display: inline-block !important; }




/************************************************************
	Password
*************************************************************/



.password-bx		{ position: relative; max-width: 480px; height: 260px; margin: 50px auto; padding-top: 44px; box-sizing: border-box; }
.password-bx h3		{ position: absolute; top: 0; left: 0; right: 0; color: #fff; background: #faa635; line-height: 44px; font-size: 14px; padding: 0 25px; }
.password-bx h3 img	{ vertical-align: middle; }
.password-bx .pass-bx		{ height: 100%; box-sizing: border-box; border: 1px solid #bfbfbf; background: #f8f8f8; padding: 30px 75px 0; text-align: center; border-top-width: 0; }
.password-bx .pass-bx p		{ padding-bottom: 15px; font-sizE: 14px; }
.password-bx .pass-bx input[type="password"]		{ box-sizing: border-box; width: 100%; height: 42px; }
.password-bx .pass-bx .board-btn-group				{ padding-top: 20px; padding-top: 0; border-top: none; }





/* 시술전후사진 */

.before_main		{ background-color:#f4f4f7;text-align:center;box-sizing:border-box;padding:90px; }

.before_main_member { position:relative; text-align:center; box-sizing:border-box; overflow: hidden; border-top: 3px solid #faa635; }


.before_border{display:inline-block;width:618px;box-sizing:border-box;border:solid 1px #fff;margin:0 0 50px 0;padding:17px;}
.before_border > div {display:inline-block;width:580px;background-color:#fff;box-sizing:border-box;padding:37px 0;font-size:25px;}
.before_border > div p {font-size:15px;color:#444}
.before_border > div em	{ display: block; position: relative; height: 500px; overflow: hidden; }
.before_list_wrap {margin-top:40px}
.before_list_wrap .list_before li {float:left;width:324px;height:210px;margin-right:16px;background-color:#ebeef7;text-align:center;box-sizing:border-box;padding-top:22px;border:solid 5px #ebeef7;margin-bottom:20px;}
.before_list_wrap .list_before li:nth-child(3n) {margin-right:0}
.before_list_wrap .list_before li:hover {border:solid 5px #2f2772}
.before_list_wrap .before_sttl {margin:28px 0 22px 0}
.before_list_wrap .list_before button {font-size:12px;}
.before_list_wrap_member { margin-top:40px }
.before_list_wrap_member .list_before li {float:left;position:relative;width:324px;margin-right:14px;text-align:center;box-sizing:border-box;margin-bottom:20px;}
.before_list_wrap_member .list_before li:nth-child(3n) {margin-right:0}

.before_list_wrap_member .list_before li i	{
	display: block;
	float: left;
	width: 50%;
	height: 130px;
	overflow: hidden;
}

.before_main_member > div		{ position: relative; width:50%; float:left; overflow: hidden; }
.before_main_member > div p		{ position: absolute; top: 50%; margin-top: -19px; height:38px; font-size:15px; color:#fff; box-sizing:border-box; line-height: 38px; z-index: 1; min-width: 100px; text-align: center; }
.before_main_member > div em	{ display: block; position: relative; height: 500px; background: no-repeat 50% 50%; background-size: cover; z-index: 0; }

.before_before		{ background-color:#aaa; right: 0; }
.before_after		{ background-color:#faa635; left: 0; }

.before_main_member .kind_before	{ position: relative; clear: both; width: 100%; height:68px; line-height: 68px; border:solid 1px #cfd1d4; text-align:center; box-sizing:border-box; background-color:#f4f4f4; font-size:20px; font-weight:bold; padding: 0; }
.before_list_wrap_member .list_before li .kind_before {width:100%;height:36px;border:solid 1px #cfd1d4;text-align:center;box-sizing:border-box;background-color:#f4f4f4;padding-top:8px;}
.before_main_member .before_logo {position:absolute;left:50%;margin-left:-70px;top:262px;width:141px; height: 35px;}
.before_list_wrap_member .list_before li > div,
.before_list_wrap_member .list_before li > a > div {float:left;width:50%;height:175px;}
.before_list_wrap_member .list_before .before_left {background-color:#bdc2c5}
.before_list_wrap_member .list_before .before_right {background-color:#cacfd2}
/* community end */



.board-webzin-gallery						{ position: relative; overflow: hidden; margin: 0 -10px; }
.board-webzin-gallery .item					{ position: relative; width: 33.33%; float: left; box-sizing: border-box; padding: 15px 10px; }
.board-webzin-gallery .item a				{ display: block; position: relative; height: 100%; }
.board-webzin-gallery .item .mask			{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(0, 0, 0, .5); opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; }
.board-webzin-gallery .item a:hover .mask	{ opacity: 1; }
.board-webzin-gallery .item .mask i			{ display: block; position: absolute; border: 1px solid #faa635; color: #faa635; font-size: 14px; width: 120px; height: 40px; line-height: 40px; text-align: center; top: 50%; left: 50%; margin-top: -20px; margin-left: -60px; }
.board-webzin-gallery .item .thumb			{ display: block; position: relative; height: 250px; overflow: hidden; background: no-repeat 50% 50%; background-size: cover;}
.board-webzin-gallery .item .noimg			{ background:#f8f8f8 url('/images/board/no_image.png') no-repeat center center;}
.board-webzin-gallery .item .con			{ display: block; margin-top: 5px; border: 1px solid #eaeaea; height: 150px; overflow: hidden; padding: 15px; }
.board-webzin-gallery .item .con strong		{ display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 15px; }
.board-webzin-gallery .item .con span		{ display: block; font-size: 14px; line-height: 20px; height: 60px; overflow: hidden; }
.board-webzin-gallery .item .con span:after	{ content: "..."; }
.board-webzin-gallery .item .con sup		{ display: block; text-align: right; font-size: 14px; color: #777; padding-top: 10px; }
.board-webzin-gallery .no-data				{ padding: 10px; line-height: 200px; text-align: center; }

.board-webzin-gallery2						{ position: relative; overflow: hidden; margin: 0 -10px; }
.board-webzin-gallery2 .item					{ position: relative; width: 33.33%; float: left; box-sizing: border-box; padding: 15px 10px; }
.board-webzin-gallery2 .item a				{ display: block; position: relative; height: 100%; }
.board-webzin-gallery2 .item .mask			{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(0, 0, 0, .5); opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; }
.board-webzin-gallery2 .item a:hover .mask	{ opacity: 1; }
.board-webzin-gallery2 .item .mask i			{ display: block; position: absolute; border: 1px solid #faa635; color: #faa635; font-size: 14px; width: 120px; height: 40px; line-height: 40px; text-align: center; top: 50%; left: 50%; margin-top: -20px; margin-left: -60px; }
.board-webzin-gallery2 .item .thumb			{ display: block; position: relative; height: 250px; overflow: hidden; background: no-repeat; background-size: cover; }
.board-webzin-gallery2 .item .noimg			{ background:#f8f8f8 url('/images/board/no_image.png') no-repeat center center; }
.board-webzin-gallery2 .item .con			{ display: block; margin-top: 5px; border: 1px solid #eaeaea; height: 150px; overflow: hidden; padding: 15px; }
.board-webzin-gallery2 .item .con strong		{ display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 15px; }
.board-webzin-gallery2 .item .con span		{ display: block; font-size: 14px; line-height: 20px; height: 60px; overflow: hidden; }
.board-webzin-gallery2 .item .con span:after	{ content: "..."; }
.board-webzin-gallery2 .item .con sup		{ display: block; text-align: right; font-size: 14px; color: #777; padding-top: 10px; }
.board-webzin-gallery2 .no-data				{ padding: 10px; line-height: 200px; text-align: center; }