@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/* reset */
.bd {font-family:Hevetica, sans-serif !important; padding:0; font-weight:normal; overflow-x:hidden; font-size: 100%;  background:transparent; line-height:1.6} .bd, .bd .clear {display:block;position:relative;clear:both;*zoom:1}
.bd:after, .bd .clear:after {content:"";display:block;clear:both}.bd table {width:100%; border-collapse:collapse}
.bd p,.bd h1,.bd h2,.bd h3,.bd h4,.bd h5,.bd h6,.bd ul,.bd ol,.bd li,.bd dl,.bd dt,.bd dd,.bd table,.bd th,.bd td,.bd form,.bd fieldset,.bd legend,.bd input,.bd textarea,.bd button,.bd select {margin:0; padding:0; -webkit-text-size-adjust:none}
.bd input,.bd textarea,.bd select,.bd button,.bd table {font-size: 12px; border-collapse:collapse; -webkit-font-smoothing: antialiased}
.bd img,.bd fieldset,.bd button {border: 0; outline:0}.bd ul,.bd ol {list-style: none}.bd em,.bd address {font-style: normal}.bd a {text-decoration: none; color:#555} .bd .blind {overflow: hidden; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height:0}.bd input[type="checkbox"],.bd input[type="radio"] {display:none; visibility:hidden}.bd input[type="checkbox"] + label, .bd input[type="radio"] + label {cursor:default; font-size:12px; font-weight:700; color:#999; transition:border-color 0.3s ease-in-out, background-color 0.3s ease-in-out}.bd input[type="checkbox"] + label:before, .bd input[type="radio"] + label:before {display:inline-block; content:""; margin:1px 4px 0; width:14px; height:14px; background-color:rgba(0,0,0,0.1); border:none; vertical-align:-3px} .bd input[type="checkbox"]:checked + label:before, .bd input[type="radio"]:checked + label:before {background-color:#9cb3c9; background-repeat:no-repeat; background-position:50% 50%; -webkit-background-size:10px auto; -moz-background-size:10px auto; -o-background-size:10px auto; background-size:10px auto; background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDIwIDE1Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy4xNDMsMTQuOTM4IDAsNy43OTYgMi4wMjEsNS43NzYgNy4xNDMsMTAuODk4IDE3Ljk3OSwwLjA2MiAyMCwyLjA4MiAiLz4NCjwvc3ZnPg0K');}  .xefu-list input[type=checkbox] {display:inline !important; visibility:visible !important}
.bd .cf:before, .bd .cf:after {content: ""; display: table} .bd .cf:after {clear: both} .bd input:focus, .bd select:focus, .bd button:focus, .bd textarea:focus {outline:none !important}

/* property */
.bd .fw_b {font-weight:700} .bd .fw_l {font-weight:400}
.bd  .or_txt {display:inline-block; overflow:hidden; word-break:break-all; text-overflow:ellipsis; white-space:nowrap} .bd  .bdr_r {border-radius:3px} .bd .bdr_50 {border-radius:50%} .bd .bdr_n {border:none} .bd .h_100 {height:100%} .bd .w_100 {width:100%} .bd .p_m_0 {padding:0; margin:0}
.bd .bxsd {-webkit-box-shadow:1px 3px 4px rgba(100,100,100,.1); -moz-box-shadow:1px 3px 4px rgba(100,100,100,.1); -o-box-shadow:1px 3px 4px rgba(100,100,100,.1); -ms-box-shadow: 1px 3px 4px rgba(100,100,100,.1); box-shadow: 1px 3px 4px rgba(100,100,100,.1)}
.bd .bxs {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box} .bd .trs {-webkit-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease}
.bd .mrg_b {margin-bottom:4px} .bd .mrg_t {margin-top:4px} .bd .mrg_r {margin-right:4px} .bd .mrg_l {margin-left:4px} .bd .mrg_at {margin-left:auto; margin-right:auto} .bd .fl {float:left} .bd .fr {float:right} .bd .cs_p {cursor:pointer}
.bd .d_n {display:none !important} .bd .t_c {text-align:center} .bd .p_fx {position:fixed} .bd .p_rt {position:relative} .bd .p_as {position:absolute}
@media only screen and (min-width: 1024px) {.bd .dt_hide {display:none}} @media only screen and (max-width: 479px) {.bd .cs_p {cursor:default}}
div.divider {height:3px; width:3px; background:#dadada; margin:0 2px 3px; display:inline-block}
span.mrk {font-size:10px !important; text-align:center; display:inline-block; width:14px; height:14px; line-height:14px; vertical-align:1px; padding:0;}
.material-icons {font-size:inherit; vertical-align:-2px} .extraimages {vertical-align:-1px} .bd .xe_content {font-size:14px}
.extraimages > .upd, .extraimages > .new {display:inline-block; margin-right:4px; width:14px; height:14px; font-size:10px; font-weight:700; vertical-align:1px; color:#fff; text-align:center; line-height:14px}
.extraimages > .upd {background:#91dfc5}
.extraimages > .new {background:#ffa4a4}
/*
* button property
* 클래스에 fl 또는 fr, ,bxs, bdr_r, trs를 같이 입력
* height, line-height, width, padding, font-size 좌우 값은 각 엘리먼트 영역에 따로 설정
*/

.bs_btn {display:inline-block; text-align:center}
.bs_btn:focus {outline:none} .bs_btn:active {transform: translateY(2px); -ms-transform: translateY(2px); -moz-transform: translateY(2px); -webkit-transform: translateY(2px);}
.bs_btn > i {color:#999; font-size:16px; vertical-align:-3px}


/* list.html */
/* board title */
.rd_wrapp, .bd_lst_wrp, .fdbArea, .rd_sign {border:none}
.bd_lst_wrp {background:transparent}
.brd_title {background-image:url(../img/3acbad0f.png); background-repeat:repeat; display:block; padding:0}

/* hd_img */
.hd_prf {width:100%}
.hd_prf > img {width:100%}

/* Title */
.bd_tl {padding:24px 48px; background:rgba(0,0,0,0.015)}
.bd_tl a {font-size:16px; color:#575757}
.bd_tl h5 {font-size:11px; color:#bbb}

/* Category & Sort & Tag & Search */
.func_wrap {padding:4px 12px !important; background:#fff}
.func_wrap > div > span, .func_wrap > div > a {color:#999; font-size:13px; font-weight:bold; display:inline-block; height:32px; line-height:32px}
.func_wrap .ddform {padding:0; margin-left:6px; margin-right:12px}
.func_wrap .ddform > i {font-size:15px; color:#999; vertical-align:-3px; margin-left:16px; margin-right:-4px}
.func_wrap .ddform:hover, .func_wrap .ddform:hover > i {color:#0174AD}

.func_wrap > div.hd_ico {text-align:right}
.func_wrap > div.fr > span, .func_wrap > div.fr > a {width:36px}
.func_wrap > div.fr span > i, .func_wrap > div.fr > a > i {font-size:16px; vertical-align:-4px; color:#cacaca}
.func_wrap > div.fr > span.pup > i {font-size:18px; vertical-align:-5px}
.func_wrap > div.fr span:hover > i, .func_wrap > div.fr > a:hover > i {color:#0174AD}

.ctpup {position:fixed; z-index:400; left:0; top:0; height:100%; width:100%; background-color:rgba(0,0,0,0.45); opacity:0; visibility:hidden; -webkit-transition:opacity 0.05s 0s, visibility 0s 0.05s; -moz-transition:opacity 0.05s 0s, visibility 0s 0.05s; transition:opacity 0.05s 0s, visibility 0s 0.05s}
.ctpup.is-visible {opacity:1; visibility:visible; -webkit-transition:opacity 0.2s 0s, visibility 0s 0s; -moz-transition:opacity 0.2s 0s, visibility 0s 0s; transition:opacity 0.2s 0s, visibility 0s 0s}
.ctpup_window {position:absolute; box-sizing:border-box; overflow-y:scroll; top:calc((100vh - 360px)/2); left:calc((100vw - 300px)/2); background:#fff; width:300px; max-height:360px; height:auto; padding:0; -webkit-backface-visibility:hidden}
.ctpup_window li {padding:16px 24px; border-bottom:1px solid #f5f5ff; font-size:14px}

.hd_sch_layer {display:none; z-index:2; padding:4px 12px; top:0; left:0}
.ip_opt {font-size:13px; padding-left:8px; display:inline-block; background:transparent}
.hd_sch_layer form {background:#fafaff}
.hd_sch_layer select {font-size:14px; height:34px; padding-left:8px; line-height:34px; width:100px}
.hd_sch_layer input {font-size:14px; height:34px; line-height:34px; width:calc(100% - 140px); padding:0 12px 0 24px}
.hd_sch_layer span.close {display:inline-block; height:34px; padding:0 4px; text-align:center; cursor:pointer}
span.close > i {margin:6px 4px 2px;}

.func_cate2 {padding:0 48px 12px; font-size:12px}
.func_cate2 > a {padding:8px 12px; margin-right:4px; border:1px solid #e5e5e5}
.func_cate2 > a.on {background:#868686; color:#fff}

/* 메인 리스트를 감싼다 */
.lst_wrap {padding: 0}

/* 리스트 푸터 메뉴 */
.ft_lst_menu {padding:24px 48px 12px}
.ft_lst_menu > a {height:30px; background-color: #fff; line-height:32px; border:1px solid #e5e5e5; font-size:12px; color:#888; padding:0 12px}

/* pagination */
.bd .bd_pg {padding:0 48px 24px} /* 푸터 메뉴를 사용하지 않으면 padding-top이 24px로 변경*/
.bd_pg > fieldset > div > a, .bd_pg > fieldset > div > span, .bd_pg > fieldset > div > strong {min-width:32px; height:32px; line-height:32px; color:#999; margin-right:2px; margin-bottom:2px; border:1px solid #efefef; background:#fff; text-decoration:none !important; display:inline-block; padding:0; font-weight:bold; font-size:12px; letter-spacing:-1px}
.bd_pg .this, .bd_pg fieldset a:hover, .bd_pg fieldset a:focus {background:rgba(0,0,0,0.07) !important; color:#282828}
.bd_pg div.fr > a > i, .bd_pg div > strong > i {vertical-align:-5px; font-size:20px}
.bd_pg div.fr > strong > i {color:#ddd}


/* read.html */
.rd {margin:0 0 16px; padding:0}
.rd_wrapp {padding:0; background:#fff}

/* read header */
.rd_hd{padding:12px 0 0}
.rd_hd small{color:#aaa}
.rd_hd .board {padding:0 48px 24px}
.rd_hd .board .top_area{padding:0}
.rd_hd .board h1 {line-height:1.1}
.rd_hd .board h1 > span {background: #f5f5f5; color: #a9a9a9; font-weight: bold; border-radius: 2px; margin-left:-3px; padding: 3px 5px; font-size: 12px}
.rd_hd .board h2{padding:8px 0}
.rd_hd .board h2 > a {color:#555; font-size:18px; margin-left:-2px}
.rd_hd .board .img{width:18px; height:auto; margin-right:4px; padding:0; border-radius:50%}
.rd_hd .board .btm_area{padding:0; position:static}
.rd_hd .board .btm_area span{letter-spacing:-1px; padding:0; font-size:13px; color:#888}
.rd_hd .board .btm_area span > i {color:#cacaca; vertical-align:-2px; margin-right:2px}
.rd_hd .board .side{display:inline-block; padding:0}
.rd_hd .board .side > a {font-size:13px; color:#777}
.rd_hd .board .side > i.divider {width:1px; height:1px; padding:1px; background:#dadada; margin:0 2px 3px}


	/* Extra Var */
	.bd .bd_wrt .et_vars {width:100%; margin:8px 0}
	.et_vars td > p {margin-top:8px; font-size:13px}
	.bd .et_vars{background:#f9f9f9; width:calc(100% - 96px); margin:4px 48px 24px}
	.et_vars tr {border-bottom:8px solid #fff}
	.et_vars th,.et_vars td{padding:8px 16px; text-align:left; word-break:break-all; word-wrap:break-word}
	.et_vars td > input, .et_vars td > textarea {border:none; padding:8px 12px; max-width:300px}
	.et_vars td > input:focus, .et_vars td > textarea:focus {outline:none}
	.et_vars th{min-width:60px; border-right:8px solid #fff; white-space:nowrap}
	.et_vars td{width:100%}

	/* Extra Form */
	.exForm{display:block}
	.exForm caption{padding:8px 4px 2px; text-align:left;font-size:13px}
	.exForm th,.exForm td{background:#FFF}
	.exForm td{padding:6px}
	.exForm .bd_btn{vertical-align:top}
	.exForm .text,.exForm .email_address,.exForm .homepage{width:100%}
	.exForm .tel{width:40px}
	.exForm .date{width:120px}
	.exForm p{margin:2px 0 0 0;font-size:11px}
	.exForm ul{margin:0;padding:0}
	.exForm li{display:inline;list-style:none}
	.exForm input[type=radio],.exForm input[type=checkbox]{margin:0 4px 0 0;vertical-align:middle}
	.exForm li label{margin:0 15px 0 0;vertical-align:middle}

	/* read body */
		.rd_body{padding:16px 48px; border-top:1px solid #efefef; border-bottom:1px solid #efefef}
		.rd_body .xe_content {font-size:14px; word-wrap:break-word}
		.rd_body .xe_content > p {font-size:14px}
		.rd_gallery img{margin:5px}

		/* File, Etc */
			.rd_file {margin-bottom:16px}
			.rd_file td{width:100%}
			.rd_file li{float:left; margin-right:8px}
			.rd_file li:last-child {margin-right:0}
			.fnt_count{font-size:12px}
			.rd_file a{color:#999; font-size:12px}

		/* Tag */
			.rd_tag {margin-top:8px; height:auto; padding-bottom:8px 16px}
			.rd_tag ul{float:left}
			.rd_tag li{display:inline-block; margin:4px 4px 0 0; padding:5px 10px; background:#f5f5f5}
			.rd_tag li:hover > a {color:#7e7e7e}
			.rd_tag li > a {font-size:12px; color:#a5a5a5; font-weight:bold}
			.rd_tag li > a > span {font-size:14px; vertical-align:-0.5px; margin-right:2px}
			.rd li:last-child .comma{display:none}

	/* Function (Vote & Share & Nav) */
		.rd_vote {width:100%; background:#fff; padding:24px 48px; text-align:center; margin:0 auto}
		.rd_vote > a {border:1px solid #efefef}
		.rd_vote > a > span {margin-left:2px; font-size:14px}
		.rd_vote > a > i {font-size:20px; vertical-align:-5px}
		.rd_vote > a.favorite > i {color:#f4446d}
		.rd_vote > a.favorite.update > i {color:#f4446d}
		.rd_vote > a.blamed.update > i {color:#494949}

		.rd_vote > a, .rd_share, .doc_more {cursor:pointer; background:#fff; text-align:center; padding:8px 12px; font-size:14px}
		.rd_vote .bs_btn > i {color:#bbb}

		.doc_more > i {font-size:22px; vertical-align:-7px}
		.rd_share > i {font-size:18px; vertical-align:-5px}

		#rd_share img {width:24px; height:24px; float:left; margin:8px 0 0 8px; border-radius:50%}
		.dropdown-content.to_sns li > a {padding:0 4px 0 0}
		.dropdown-content.to_sns li > a > span {box-sizing:border-box; padding:0 8px; font-size:12px}


	/* 이전글 다음글 */
	.r_p_n {background:#fff; padding:12px 48px 24px}
	.r_p_n > a, .r_p_n > div {display:inline-block; padding:0 6px; cursor:pointer; min-width:32px; text-align:center; height:32px; line-height:32px; background:#f6f6f6; font-weight:700; color:#999; border:none !important}
	.r_p_n > a > i , .r_p_n > div > i {font-size:20px; color:#b7b7b7; vertical-align:-5px}
	.r_p_n > a {margin-left:4px}
	.r_p_n > div {margin-right:4px}
	a#prevDocBtn.disabled, a#nextDocBtn.disabled {display:none}


	/* Sign */
		.bd .rd_sign {position:relative; width:100%; margin-top:16px; padding:0; background:#fff}
		.rd_sign .swiper-slide {padding:24px 48px; box-sizing:border-box}
		.bd .rd_sign .swiper-pagination {top:26px; left:auto; right:48px; width:28px; height:28px}
		.rd_sign .swiper-pagination-bullet {border-radius:0; background:rgba(0,0,0,0.4); margin:0 3px 1px !important; width:8px; height:8px}
		.rd_sign .swiper-pagination-bullet-active {opacity:1; background: #777}

		.rd_sign h4{position:relative; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #efefef; font-weight:700; font-size:15px; color:#666}
		.rd_sign h4 > i {font-size:18px; vertical-align:-4px}
		.sign_content  span.a {margin-bottom:12px; width:calc(100% - 78px); margin-right:8px; font-size:14px}
		.sign_content  span.b {display:inline-block; width:70px; text-align:right; font-size:13px}

		.sign_content .img{width:60px; height:60px; line-height:60px; border-radius:50%}
		.sign_content .get_sign{height:100%; padding:12px; width:calc(100% - 68px); word-wrap:break-word; font-size:13px; background:#fafafa; color:#888}

	/* feedBack */
		.fdbArea {margin:16px 0 0; padding:24px 0; background:#fff}

		/*cmt_editor */
			.cmt_editor{padding:0 48px 16px}
			.fdb_tag {font-size:16px; padding-bottom:8px}
			.simple_wrt{position:relative; margin:0; background:#fff; border:1px solid #ddd}
			.simple_wrt .text {width:100%}
				.simple_wrt .text > .tArea {display:block; width:100%; border:none; min-height:80px !important; font-size:14px; padding:16px; background:#fcfcfc}
				.simple_wrt .text > .tArea:focus, .simple_wrt .text > .tArea:hover {outline:0; background:#f7f7f7}

			.simple_wrt > .text_ft {width:100%; height:30px; line-height:30px; border-top:1px solid #ddd}
			.simple_wrt > .text_ft > label {display:inline-block; height:30px; vertical-align:4px; padding:0 8px}
			.simple_wrt .editor_use, .wysiwyg {display:inline-block; height:30px; padding:3px 11px 6px; border-left:1px solid #efefef; width:40px; text-align:center}
			.simple_wrt .editor_use > i, .wysiwyg > i {font-size:18px}
			.simple_wrt .bd_btn {box-sizing:border-box; position:relative; font-size:12px; cursor:pointer; width:120px; height:30px; line-height:30px; outline:none; color:#676767; background:#fff; border:none; border-left:1px solid #efefef; margin:0; padding:0}
				.simple_wrt .bd_btn:hover {background:#f1f1f1}
				.simple_wrt .bd_btn:focus {background:#ebebeb}

			.edit_opt {}
			.opt_wrp {position: relative; border-top:1px solid #efefef; display:inline-block; width:50%; font-size:12px}
			.opt_wrp:first-of-type {border-right:1px solid #efefef}
			.opt_wrp > input {display:inline-block; width:100%; background:#fafafa; height:30px; padding:0 12px; line-height:30px; border:none}

		/* cmt_position */
		#cmtPosition {padding:0 48px; background:#fff}

			/* comment area */
			#cmtPosition .cmt_lst {padding:0; background:#fff;  padding:12px 0 16px}
			#cmtPosition .cmt_lst > i {position:absolute; top:19px; left:-20px; font-size:18px; color:#c5c5c5}
			#cArea .cmt_lst.re svg {position:absolute; left:-20px; width:14px; height:14px; fill:#bbb; top:23px}
			#cmtPosition .cmt_lst div.prof_img {width:36px; margin-right:8px}
				.prof_img > span, .prof_img > img {width:36px; height:36px; line-height:36px; border-radius:50%}

			/* _comment.html */
			.cmt_lst .cmt_area {background:#fafafa; margin-left:44px; width:calc(100% - 44px)}
			.cmt_lst .cmt_area div.meta {width:100%; padding:0; background:rgba(0,0,0,0.015)}
			div.meta > div.fl {height:36px; line-height:36px; padding:0 12px}
			div.meta .secret > i {font-size:18px; vertical-align:-4px}
			div.meta > div.fl a {font-size:13px; color:#444; font-weight:bold}
			div.meta > div span {font-size:13px; color:#666}
			div.meta > div span.date {font-size:12px}
			.cm_vote > a {display:inline-block; height:36px; line-height:36px; min-width:36px}
			.cm_vote > a > i {font-size:20px; vertical-align:-5px}
			.cm_vote > a:hover > i {color:#4F9CE5}
			#cmtPosition .cmt_lst .cmt_area .xe_content {float:left; box-sizing:border-box; width:100%; font-size:14px; padding:8px 12px}
			.cmt_set {width:100%; padding:8px 12px 12px}
			.cmt_set > a {background:#fff; min-width:28px; padding:0 4px; height:24px; line-height:26px; font-size:12px}

			/*_comment_b.html */
			#cmtPosition .cmt_lst.cmt_styleB > i {position:absolute; top:20px; left:-20px; font-size:16px}
			#cmtPosition .cmt_lst.cmt_styleB div.prof_img {width:30px; margin-top:2px; margin-right:12px}
				.cmt_styleB .prof_img > span, .cmt_styleB .prof_img > img {width:30px; height:30px; line-height:30px; border-radius:50%}

			#cmtPosition .cmt_styleB {border-top:1px solid #ececec; padding:12px 0 !important}
			.cmt_lst .cmt_area_b {width:100%}
			#cArea .cmt_styleB.re svg {top:24px}
			.cmt_area_b .meta_b {width:100%; margin-bottom:4px; position:relative; color:#a5a5a5; font-size:13px; height:24px; line-height:24px}
			.cmt_area_b .meta_b .fl > a {font-weight:bold; color:#163377}
			.meta_b .secret > i {font-size:16px; vertical-align:-3px; color:#444}
			.cm_vote_b > a {margin-right:10px; margin-top:-1px; font-size:14px; line-height:24px}
			.cm_vote_b > a > i {font-size:15px; color:#c7c7c7; vertical-align:-3px}
			.meta_b  span.date {letter-spacing:-1px}
			.bd .cm_pg {padding-top:8px}
			.bd .cm_pg > a, .bd .cm_pg > strong {color:#aaa; font-size:12px; display:inline-block; height:24px; min-width:24px; text-align:center; line-height:24px; background:#f4f4f4}
			.bd .cm_pg > strong.this {color:#666}
/* write_form.html */
.bd_wrt {width:100%; background:#fff; padding:8px !important}
	.wrt_hd {margin-bottom:4px}
	.wrt_hd input, .wrt_hd button {padding:0 8px}
	.wrt_hd input, .wrt_hd select {vertical-align:2px}
	.wrt_hd input, .wrt_hd select, .wrt_hd button, .wrt_ft input, .wrt_ft button {border:1px solid #efefef; background:#fafafa; outline:none;  box-sizing:border-box}

		.doc_ct {width:100px; height:32px; line-height:32px; margin-right:4px}
			.doc_ct > select {width:100px; height:100%; color:#999}
		.doc_tt {width:calc(100% - 104px); height:32px; line-height:32px}
			.doc_tt > input {width:100%; height:32px}

		.doc_opt {padding:8px 0; border-bottom:1px solid #efefef}
			.opt_a, .opt_b {height:24px; line-height:24px}
			.opt_a:after {font-size:11px; content:"/"; margin:0 12px 0 0; color:#ccc}
			.opt_a span.col_pck {line-height:15px}
				.opt_a span.col_pck .Icon {height:16px; width:16px}
			.opt_a label {margin-right:8px}
			.opt_a label:before, .opt_b label:before {vertical-align:-5px !important}
				.opt_a > .col_pck > input {display:none}
				.opt_a > .col_pck > label {font-size:12px; font-weight:bold; color:#999}
			.opt_b > label {margin-left:8px}
			.opt_c > button, .opt_c > input {vertical-align:middle; height:24px; color:#999}

	.wrt_bd .cke_chrome {box-shadow:inherit; border:1px solid #efefef}
	.wrt_ft .doc_tag {height:40px}
	.wrt_ft .doc_tag > input {width:100%; height:100%; padding:0 8px; line-height:40px}

	.wrt_ft .doc_submit {margin-top:8px}
	.wrt_ft .doc_submit > input, .wrt_ft .doc_submit > button {width:80px; height:32px; line-height:32px}
	.wrt_ft .doc_submit > input {background:#9cb3c9; color:#fff}

	div#doctArea {width:100%; min-height:200px; margin:8px 0; border:1px solid #efefef; padding:16px}
	div#doctArea:focus {outline:none}

/* Recomment */
#re_cmt{display:none;margin:15px 0 0;padding:15px 0 0; border-top:1px solid #efefef}
#re_cmt .close{margin-bottom:8px}


/* 등록된 글이나 검색 결과가 없을 때 출력 */
.no_doc {width:100%; height:120px; line-height:120px; text-align:center; color:#999; font-size:16px; font-weight:bold}
.no_doc > i {vertical-align:-6px; margin-right:4px; font-size:22px}


/* _list_a.html */
table.bd_lst_tb {margin:0; width:100%; font-size:13px}
.bd_lst_tb thead a, .bd_lst_tb thead span {color:#888}
.bd_lst_tb tr {height:40px; background:#fafafa; border-bottom:1px solid #eceeef}
.bd_lst_tb tr.notice {background:#f2f2f2 !important}
.bd_lst_tb thead th {background-color: #f9f9ff; border-top:1px solid #eceeef; border-bottom:1px solid #eceeef; text-align:center}
.bd_lst_tb tbody tr:nth-child(2n) {background-color: #fdfdff}
.bd_lst_tb tbody tr.select i {color:#606d71; font-size:16px}

.bd_lst_tb th.title {padding:0 8px}
.bd_lst_tb th.vote,.bd_lst_tb th.read,.bd_lst_tb th.date,.bd_lst_tb th.no {text-align:center; width:64px}
.bd_lst_tb tbody td {text-align:left; padding:2px 8px}
.bd_lst_tb tbody td:not(.title) {text-align:center}
.bd_lst_tb tbody td.title > a > i {font-size:16px; vertical-align:-4px}
.bd_lst_tb td.title > span.cate {margin-right:6px; font-size:11px; vertical-align:0.5px; padding:2px 4px 3px; font-weight:bold; color:#888; background:#efefef}
.bd_lst_tb a.tt_cm {font-weight:bold; margin-left:4px; color:#0174AD}
.bd_lst_tb td.title label {margin-left:4px}

/* _list_b.html && _list_c_html */
.bd_lst{background:#f1f1f1; list-style:none}
.bd_lst .lst_nm_c {width:calc(100% - 96px); padding:16px; margin:0 48px 12px; border:1px solid #eee}
.lst_nm_c .lst_tmb > span {background:#f1f1f1; border:none}
.bd_lst .lst_nm_c.ntc {padding:16px; background-color: #fafafa}
.lst_nm {width:100%; padding:16px 48px; border-top:1px solid #efefef;  background:#fff}
.lst_nm:last-of-type  {border-bottom:1px solid #efefef}
	.lst_nm .lst_tmb {width:80px; margin-left:16px}
	.lst_tmb > span {width:80px; height:80px; line-height:80px; border-radius:2px; border:1px solid #efefef}
	.lst_tmb > img {width:80px; height:100%; border-radius:2px}

	.lst_nm .lst_r {font-size:16px; width:calc(100% - 96px); height:100%}
	.lst_nm.ntc {padding:24px 48px; background:#fbfbfb}
	.lst_nm.ntc .lst_r {width: 100%}

	.tt label {vertical-align:1px}
	.lst_r div.tt > a.title {color:#282828; word-break:break-all; line-height:1.5}
	.lst_r div.tt > a.title > i, .lst_r div.tt > span.notice > i {font-size:18px; vertical-align:-4px} /* secret, notice icon */
	.lst_r span.category {margin-right:4px; background:#f4f4f4; color:#a9a9a9; padding:2px 5px; font-size:12px}
	.lst_r div.tt > span.notice {color:#282828}
	.lst_r div.tt > a.reply {margin:0 4px}
	.lst_r div.tt > span.new {background:#ffacae; color:#fff}
	.lst_r div.tt > span.update {background:#97edc1; color:#fff}

	.lst_r div.sum > span {color:#a5a5a5; word-break:break-all; line-height:1.5; padding-top:4px}
	.lst_r div.sum > span,.lst_r .meta > span,.lst_r .meta > a {font-size:13px}
	.lst_r .meta {padding-top:4px}
	.lst_r .meta > span {color:#a0a0a0}
	.lst_r .meta > a {color:#444}

	.lst_nm.select .hx {background:rgba(0,0,0,0.03)}
	.lst_nm .hx {display:inline-block; width:100%; height:100%; top:0; position:absolute; left:0; z-index:10}
	.lst_nm .hx:hover {background:rgba(0,0,0,.02)}
	.lst_nm .checkb {z-index:99}

/* _list_card.html */
.card_wrap {margin:0 40px; width:calc(100% - 80px)}
.bd_card {overflow:hidden; margin:0 auto; padding:0}
.bd_card > div.card_el {float:left; padding:0; border:1px solid #efefef; margin:0 8px 24px; background:#FFF}
.bd_card > div.card_el > a.hx {width:100%; height:100%; position:absolute; top:0; left:0; z-index:10}
.bd_card .card_content {padding:0}
.bd_card .tmb_wrp{width:100%}
.bd_card .tmb_wrp > span {height:120px; line-height:120px}
.bd_card .tmb_wrp > img {width:100%; height:100%}

.bd_card p {padding:8px 12px 2px 13px}
.bd_card p > span {font-size:12px; color:#aaa; margin-right:8px}
.bd_card p > span.cate {color:#7db3fd}
.card_ct_b p > span.cate {color:#afbcc5; letter-spacing: -1px; font-size: 11px}
.bd_card h3 {padding:0 12px 4px}
.bd_card h3 > a {font-size:16px; color:#666; font-weight:bold; word-break: break-all}
.bd_card .cnt {padding:4px 12px 8px; letter-spacing:-1px; color:#888; line-height:1.4; font-size:12px}

.bd_card .info{padding:8px 12px; background:#fafafa; margin-top:4px; font-size:13px}
.bd_card .info > img, .bd_card .info > span {display:inline-block; vertical-align:middle; height:32px; line-height:32px}
.bd_card .info > img {width:32px; height:32px; border-radius:50%; margin-right: 2px}
.bd_card .info > span.no_img {width:32px; height:32px; line-height:24px; border-radius:50%}
.bd_card .info > span {color:#bababa}
.bd_card .info > span > i {font-size:15px; margin-left:8px; vertical-align:-3px; margin-right:2px}

.card_b div.card_el {border:none}
.card_b .tmb_wrp > span {height:200px; line-height:200px}
.card_ct_b > p {padding:2px 12px 0}
.card_ct_b > p  > a  {font-weight:700; color:#fff}
.card_ct_b {position:absolute; bottom:0; left:0; z-index:2; padding-top:12px; width:100%; background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(70,70,70,0.8) 100%);background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(70,70,70,0.8) 100%);background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(70,70,70,0.8) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#cc464646',GradientType=0 )}
.card_ct_b .info > img {width:24px; height:24px}
.card_ct_b .info > span.no_img {width:24px; height:24px; line-height:24px; background:#eee; border-radius:50%}
.card_ct_b .info {background:transparent; padding:4px 12px; margin-top:0}
.card_ct_b .info > span, .card_ct_b a {color:#ddd}

@media screen and (max-width: 479px) {.bd_card > div.card_el {width:calc(100% - 16px)}}
@media (max-width: 1023px) and (min-width: 480px) {.bd_card > div.card_el {width:calc(50% - 16px)}}
@media (max-width: 1366px) and (min-width: 1024px) {.bd_card > div.card_el {width:calc(33.33333% - 16px)}}
@media screen and (min-width: 1367px) {.bd_card > div.card_el {width:calc(25% - 16px)}}


/* Timeline A */
.bd_time {width:calc(100% - 96px); margin:0 auto; font-size:14px}
#t_tArea {height:100px; max-height:100px; padding:12px; overflow-y:auto; background:#f7f7f7}
#t_tArea:focus {outline:none; background:#fafafa}
.bd_time .t_write {margin-bottom:36px; border:1px solid #efefef}
.t_write .tags {background:#f7f7f7; border-top:1px dashed #efefef; height:auto; min-height:32px; padding:4px 8px; width: 100%}
.tags .lang_tag {color:#999; font-size:12px}
.tags li.tagAdd, .tags #tags-field {height:32px; line-height:32px; padding-left:4px; border:none; font-size:13px; background:transparent}
.tags li.addedTag {margin:4px; padding:0 4px; height:24px; display: block; background:#ddd}
.addedTag > span {vertical-align:7px; font-size:13px; color:#686868; margin-right:3px}
.tags .tagRemove {display:inline; cursor:pointer; height:16px; width:16px; margin:4px 0}
.t_write_opt {height:30px; border-top:1px solid #efefef}
.t_write_opt .section > label {padding-left:12px}
.t_write_opt .section {padding:0; width:calc(100% - 124px); height:30px; line-height:30px}
.t_write_opt .t_file_upload {background:#fff; border-left:1px solid #efefef; width:34px; height:30px; padding:5px}
.t_file_upload > i {color:#606060; font-size:20px}

.t_write_opt .sbm {height:30px;font-size:13px; cursor:pointer; line-height:30px; padding:0 48px; text-align:center; background:#fff; border-left:1px solid #efefef}
.sbm:focus {outline:none; background:#eaeaea}
.t_doc_edt  .cke_contents {height:200px !important} .t_doc_edt .cke {border:none; box-shadow:inherit} .t_doc_edt .xefu-container {border:none; margin:0} .bd_time .t_doc_edt span.cke_bottom, .t_doc_edt #zbutton {display:none} .t_doc_edt .xpress_xeditor_editing_area_container {height:100px; max-height:200px} .t_doc_edt .imgur_url, .t_doc_edt .drop_str {display:none} .t_doc_edt .xpress-editor .fileUploader {padding-top:0}
.t_doc_edt .xpress-editor #smart_content, .t_doc_edt #drag {border:none; margin:0} .t_doc_edt #output {border:none; background:#f6f6f6; margin-top:-15px} .bd_time .t_doc_edt .tool {padding:8px 10px; background:#f6f6f6; border-bottom:1px solid #efefef}
.t_content {border:1px solid #efefef; margin-bottom:24px;}
.t_content_hd {border-bottom:1px solid #efefef; padding:15px 12px; height:61px; line-height:30px}
.t_content_hd > span.no_img {width:30px; height:30px; border-radius:50%; margin-right:8px}
.t_content_hd > img {float:left; width:30px; height:30px; margin-right:8px; border-radius:50%}
.t_content_hd > span {font-size:13px; color:#a5a5a5; letter-spacing:-1px}
.t_content_hd > span.fr {margin-left:8px}
.t_content_hd > a, .t_content_hd > b {color:#0d3c5f; font-weight:600; font-size:15px}
.t_content_bd {padding:12px}

.t_cmt_ct {font-size:13px; padding:10px 12px 8px; background:#f7f7f7; border-top:1px solid #efefef}
.t_c_vote > i {vertical-align:-2px; margin-right:2px; font-size:14px; color:#bababa}
.t_cmt_ct > .cf {margin-bottom:4px}
.t_cmt_ct .fr > a {margin-left:8px}
.t_cmt_ct .fl > a {color:#0d3c5f; font-weight:600}
.t_cmt_ct .fl > span {color:#a9a9a9; font-size:12px; margin-left:4px}
.t_cmt_ct .bs_btn {border:none}
.t_cForm {border-top:1px solid #efefef}
.t_cForm > .tArea {width:calc(100% - 149px); margin:0 89px 0 60px; max-height:40px; overflow:hidden; white-space:nowrap; height:40px; line-height:40px; padding:0 4px}
.t_cForm > .tArea:focus {outline:none}
.t_cForm > .bs_btn.favorite {left:0; right:auto}
.t_cForm > .favorite > i  {color:#fb5d73 !important}
.t_cForm > .favorite > span {margin-left:2px; font-size:15px; vertical-align:-2px; color:#999}
.t_cForm > .bs_btn {position:absolute; top:0; right:0; height:38px; line-height:38px; border:none; padding:0 12px; background:#fff}
.t_cForm > .bs_btn  > i, .t_cForm > .bs_btn  > i {vertical-align:-7px; font-size:20px; color:#ccc}

/* Thumb */
.no_img{display:block; overflow:hidden; position:relative; margin:0 auto; background:#eee; font-size:13px; color:#aaa; font-weight:bold; text-align:center; white-space:nowrap}

/* IE8- Fix */
.dummy_ie{display:none;*display:block;*width:1px}
.ie8_only{display:none}

/* Toggle */
.tg_cnt2{display:none}
.tg_blur2,.bd .blur{position:absolute;top:0;left:0;border:0;background:none;width:1px;height:1px;overflow:hidden}
.bd .tg_close2,#install_ng2 .tg_close2{position:absolute;top:0;right:0;border:0;background:transparent;font-size:20px; color:#999}

/* PjaxLoading */
.preload {position:fixed; background:transparent; top:0; left:0; z-index:9999; width:100%; height:100%}
.circular{animation: rotate 2s linear infinite; height:50px; width: 50px; position: fixed; top:calc((100% - 20px)/2); left: calc((100% - 50px)/2);}
.path {stroke-dasharray: 1,200; stroke-dashoffset: 0; animation:  dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; stroke:#ff7777}
@keyframes rotate{100%{transform: rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray: 1,200; stroke-dashoffset: 0} 50%{stroke-dasharray: 89,200; stroke-dashoffset: -35} 100%{stroke-dasharray: 89,200; stroke-dashoffset: -124}}

.bdLoad {position:fixed; width:100%; height:100%; background:#fff; top:0; left:0; z-index:9999}
.loader {position: absolute; top: 300px; left: 40%; margin-left: 10%; transform: translate3d(-50%, -50%, 0)}
#c_shape {animation: loader 1.5s linear infinite; transform-origin: 62.1px 60.3px; animation-play-state: running!important}
@keyframes loader {100% { transform: rotate(360deg)}}#loader rect {animation: none 1.5s linear infinite; display: inline-block; animation-play-state: running!important}#loader rect:nth-child(1) {animation-name: loader1}#loader rect:nth-child(2) {animation-name: loader2}#loader rect:nth-child(3) {animation-name: loader3}#loader rect:nth-child(4) {animation-name: loader4}#loader rect:nth-child(5) {animation-name: loader5}
@keyframes loader1 {0% { fill: #3E2C53;}  33.3333% { fill: #AC2B61;}  66.6666% { fill: #F3E3B4;}}@keyframes loader2 {0% { fill: #3F577A;} 33.3333% { fill: #E33D5F;} 66.6666% { fill: #BADCC8;}}@keyframes loader3 {0% { fill: #4C8FA2;} 33.3333% { fill: #EF7C5E;} 66.6666% { fill: #7FC7BF;}}@keyframes loader4 {0% { fill: #7BB594;} 33.3333% { fill: #F9C65F;} 66.6666% { fill: #EE7B73;}}@keyframes loader5 {0% { fill: #DBD17F;} 33.3333% { fill: #F5EF9E;} 66.6666% { fill: #D4385F;}}
@-moz-keyframes slide {0% { transform: scale(1)} 50% {opacity: 0.3; transform: scale(2)} 100% {transform: scale(1)}}@-webkit-keyframes slide {0% {transform: scale(1)} 50% {opacity: 0.3; transform: scale(2)} 100% {transform: scale(1)}}@-o-keyframes slide {0% {transform: scale(1)} 50% {opacity: 0.3;  transform: scale(2)} 100% {transform: scale(1)}}@keyframes slide {0% {transform: scale(1)} 50% {opacity: 0.3; transform: scale(2)} 100% {transform: scale(1)}}

/* Dropdown */
.dropdown-content {box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); background-color: #fff; margin: 0; display: none; min-width: 160px; max-height: 650px; overflow-y: auto; opacity: 0; position: absolute; z-index: 999; will-change: width, height}
.dropdown-content li {clear: both; color: rgba(0, 0, 0, 0.87); cursor: pointer; min-height: 40px; width: 100%; text-align: left; text-transform: none}
.dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected {background-color: #eee}
.dropdown-content li.active.selected {background-color: #e1e1e1}
.dropdown-content li.divider {min-height: 0; height: 1px}
.dropdown-content li > a, .dropdown-content li > span, .dropdown-content li > label {font-size: 12px; font-weight:normal !important; color: #777; display: block; line-height: 40px; padding: 0 16px}
.dropdown-content li > label:before {display:none !important}

.etc_content {padding:24px 48px 48px; text-align:center; background:#fff}
.bd h2.etc_info {margin-bottom:16px; color:#777}

/* File Attach Editor */
#mUpload{display:none; margin-top:1px; border-top:1px solid #efefef}
#mUpload ul{list-style:none; min-height:32px; margin:0; padding:2%}
#mUpload li{position:relative; float:left; width:8%; margin-right:2%; padding-top:8%; text-align:center}
#mUpload li > div {display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:cover}
#mUpload li > div > i {position:absolute; font-size:16px; top:2px; right:2px; color:#fff}
#mUpload a {display:block; position:absolute; bottom:1px; left:1px; line-height:12px; border-radius: 50%; background-color: rgba(0,0,0,0.3); width:16px; height:16px}
#mUpload a > i {font-size:12px; color:#fff}
#mUpload .insert_file {left:auto; right:1px}
#mUpload .type2:before{display: block;  position: absolute; top: 0; width: 100%; height: 100%; font-weight: 700; font-size: 32px; background: #686868; color: #fff}
#mUpload .music:before{content:"♪"; font-size:36px}
#mUpload .media:before{content:"▶"}
#mUpload .etc:before{content:"?"}
#mUpload li small{position:absolute; left:0; margin-top:1px; letter-spacing:-0.5px; font-size:11px; width: 100%; height: 20px; color: #aaa}


#mUpload #loading{display:none;width:86px;height:86px;background:url(../img/loading.gif) 50% 50% no-repeat;box-shadow:none}
#mUpload .info{float:none; width:auto; height:auto; margin:0; padding:0}
#mUpload .is_img>span,#mUpload .info div{display:none}
#mUpload .is_img div{display:block;margin-top:4px}
#mUpload .is_img div *{vertical-align:middle}
#mUpload .is_img div .bd_btn{padding:4px 8px}
#mUpload .is_img div .bd_btn span:last-child,
#mUpload .is_img div .on span:nth-child(2){display:none}
#mUpload .is_img div .on span:last-child{display:inline}

#doctArea img {max-width:100%}


/* no_authority */

.bd .no_authority {height:300px; padding:130px; text-align:center}
.no_authority > h3 {margin-bottom:16px}
.no_authority > input.password {height:30px; line-height:30px; background:#eee; border:none; vertical-align: 2px; padding:0 8px}
.no_authority > a, .no_authority > button, .no_authority > input[type=submit] {font-size: 14px; border:1px solid #efefef; background-color: #fafafa; height:30px; line-height:30px; padding:0 12px}



.xe_content > p.vid {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.xe_content > p.vid iframe,
.xe_content > p.vid embed,
.xe_content > p.vid object,
.xe_content > p.vid embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* mobile */
@media screen and (max-width: 479px) {
.func_wrap > div > span, .func_wrap > div > a {line-height:34px}
	.bd_time {width:calc(100% - 24px); margin:0 12px;}
	.dt_hide {display:block} .dropdown-content li {cursor: default} .m_no {display:none !important}	#cke_58 {display:none !important;}
	.hd_sch_layer span.close, .func_wrap > span, .func_wrap > a, .rd_vote > a, .rd_share, .r_p_n > a, .r_p_n > div {cursor:default}
	.ft_lst_menu, .lst_nm, .func_cate2, .bd_tl, .hd_sch_layer, .rd_vote, .r_p_n, .func_wrap, .lst_nm.ntc, .bd .bd_pg, .rd_hd .board, .rd_body, .rd_sign .swiper-slide, .cmt_editor, #cmtPosition {padding-right:12px; padding-left:12px}
	.card_wrap {margin:0 4px; width:calc(100% - 8px)}
	.lst_nm.ntc, .lst_nm {padding-top:10px; padding-bottom:10px}
	.opt_wrp {width:100%}
	.lst_r span.category {margin-right:4px; background:#f4f4f4; color:#a9a9a9; padding:3px 5px 2px}
	.lst_r div.sum > span,.lst_r .meta > span,.lst_r .meta > a {font-size:12px}	.lst_nm .lst_r {font-size:14px}
	.bd .rd_sign .swiper-pagination {right:9px}
	.bd_lst .lst_nm_c {width:calc(100% - 24px); padding:12px; margin:0 12px 8px; background:#fcfcfc}
	.bd_lst .lst_nm_c.ntc {padding:12px; background:#fcfcfc}
	table.bd_lst_tb, .bd .et_vars {margin-right:12px; margin-left:12px; width:calc(100% - 24px)}
	.rd_hd .board h2 > a {font-size:20px}
	span.mrk {line-height:18px; vertical-align:2px}
	#cmtPosition .cmt_lst .cmt_area .xe_content {float:left; box-sizing:border-box; width:100%; font-size:14px; padding:4px 12px}
	#cmtPosition .cmt_lst {padding:0; background:#fff;  padding:4px 0 16px}
	.bd .et_vars{background:#f9f9f9; margin-bottom:24px; margin-top:8px}
	#cmtPosition .cmt_lst > i	{top:12px; font-size: 16px; color:#a5a5a5}
	#cmtPosition .cmt_lst div.prof_img {width:36px; margin-right:8px}
	.prof_img > span, .prof_img > img {width:36px; height:36px; line-height:36px}
	.cmt_lst .cmt_area {background:#fafafa; margin-left:44px; width:calc(100% - 44px)}
	.bd_pg > fieldset > div > a, .bd_pg > fieldset > div > span, .bd_pg > fieldset > div > strong {min-width:28px; height:28px; line-height:28px}
	.bd_pg div.fr > a > i, .bd_pg div > strong > i {vertical-align:-6px}
	.bd .bd_wrt .et_vars	 {width:100%}
	.et_vars td > input, .et_vars td > textarea {border:none; padding:8px 12px; width:calc(100% - 24px)}
	#mUpload li{width:18%; margin-right:2%; padding-top:18%}
}

/* tablet */
@media (max-width: 1023px) and (min-width: 480px) {

}