@charset "utf-8";
/** * @author https://www.cosmosfarm.com */

.sub_txt {margin-top:40px; font-size:12px; line-height:1.4; color:#888; text-align:center; word-break:keep-all;}

/*list*/
.board_tab_wrap {margin:40px 0;}
.beaf_tab {width:1440px; margin:0 auto; display:flex; flex-wrap:wrap; font-size:18px; line-height:1; letter-spacing:0;}
.beaf_tab:after {display:none;}
.beaf_tab li {position:relative; width:12.5%; transition:all .3s ease;}
.beaf_tab li a {display:block; padding:19px 0; color:#333; text-align:center;}
.beaf_tab li:before,
.beaf_tab li:after {content:''; position:absolute; z-index:1; left:0; width:100%; height:1px; background: linear-gradient(90deg, rgba(167, 160, 142, 0.00) 0%, #A7A08E 50%, rgba(167, 160, 142, 0.00) 100%); opacity:0; transition:all .3s ease;}
.beaf_tab li:before {top:0;}
.beaf_tab li:after {bottom:0;}

.beaf_tab li:hover,
.beaf_tab li.on {font-weight:700;}
.beaf_tab li.on:before,
.beaf_tab li.on:after,
.beaf_tab li:hover:before,
.beaf_tab li:hover:after {opacity:1;}


.before_after_board {display:flex; flex-wrap:wrap; margin:0; text-align:center; letter-spacing:0; gap:40px 20px;}
.before_after_board > li {position:relative; width:calc(33.33% - 13.5px);}
.before_after_board > li > a {display:block;}
.before_after_board > li > .board_btn_wrap {position:absolute; z-index:1; top:0; right:0; margin:0;}
/*
.before_after_board > li > a > div {display:flex;}*/
.before_after_board > li > a > strong {display:block; margin-top:16px; text-align:left; font-size:18px; line-height:1; color:#333}
.before_after_board .img {position:relative; width:200px; height:143px; overflow:hidden;}
.before_after_board .img > img {width:100%; height:100%; object-fit:cover;}

.before_after_board .two_imgbox {display:flex;}
.before_after_board .two_imgbox > div {position:relative; width:50%;}
.before_after_board .two_imgbox .before .txt {background:#311B15;}
.before_after_board .two_imgbox .after .txt {background:#C93E0C;}
.before_after_board .two_imgbox .txt {display:flex; align-items:center; justify-content:space-between; color:#fff; padding:10px 14px;}
.before_after_board .two_imgbox .txt .tit {font-size:14px; font-family: 'ZalandoSans'; font-weight: 400;}
.before_after_board .two_imgbox .txt .date {font-size:10px; font-weight:700;}

.before_after_board .before .txt_wrap {display:flex; align-items:center; justify-content:center; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; padding:14px; color:#fff; background:rgba(0,0,0,0.5); backdrop-filter:blur(15px);}
.before_after_board .before .txt_wrap .tit {display:block; font-size:18px; line-height:1;}
.before_after_board .before .txt_wrap .txt {margin-top:16px; font-size:14px; line-height:1.4;}
.before_after_board .before .txt_wrap .btn {display:inline-block; padding:11.5px 40px; margin-top:20px; font-size:12px; font-weight:700; line-height:1; background:#fff;}

.notice_wrap {margin-bottom:60px;}
.notice_wrap > p {font-family: 'ZalandoSans'; color:#fff; font-size:24px; text-align:center; background:#311B15; padding:20px 0;}
.notice_wrap > .before_after_board {border:1px solid #E0E0E0; padding:44px;}

/*.before_after_board .before > strong.tit,
.before_after_board .after .tit {display:block; position:absolute; z-index:1; left:0; bottom:0; width:100%; padding:14px; color:#fff; font-size:12px; line-height:1; background:rgba(0,0,0,0.3);}
*/
/*document*/
.beaf_document.basic_view .view_wrap {border-top:0; margin-top:100px;}
.beaf_document.basic_view .view_wrap .title {font-weight:700;}
.beaf_document.basic_view .before_after_board {margin:0;}
.beaf_document.basic_view .before_after_board .two_imgbox {width:100%; margin:0;}
.beaf_document.basic_view .before_after_board .two_imgbox .img {width:100%; height:auto;}
.beaf_document .before_after_board {display:block; padding-inline-start:0 !important;}
.beaf_document.basic_view .view_wrap .view_txt .before_after_board li {width:100%; margin:0; list-style:none !important;}
.beaf_document.basic_view .view_wrap .view_txt .before_after_board li a {text-decoration:none;}
.beaf_document .before_after_board li a {pointer-events: none; cursor: default;}

/*editor*/
.beaf_wrap .board_editor .edit_wrap .kboard-attr-row .attr-value .attr-value-option:first-child {display:none;}
.beaf_wrap .board_editor .edit_wrap .kboard-attr-row .attr-value .attr-value-option {font-size:16px;}

#kboard-default-editor { overflow: hidden; }
#kboard-default-editor form { margin: 0; padding: 0; }
#kboard-default-editor select { display: inline; margin: 0; padding: 0 5px; font-size: 14px; width: 30%; height: 28px; line-height: 28px; color: #666666; border-radius: 0; border: 0; border-bottom: 1px solid #dcdcdc; box-shadow: none; background: none; background-color: transparent; box-sizing: content-box; vertical-align: middle; text-indent: 0; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; }
#kboard-default-editor input[type=text],
#kboard-default-editor input[type=email],
#kboard-default-editor input[type=number],
#kboard-default-editor input[type=date],
#kboard-default-editor input[type=password] { display: inline; margin: 0; padding: 0 5px; width: 30%; height: 28px; line-height: 28px; font-size: 14px; color: #666666; border-radius: 0; border: 0; border-bottom: 1px solid #dcdcdc; box-shadow: none; background: none; background-color: transparent; box-sizing: content-box; vertical-align: middle; }
#kboard-default-editor input[type=checkbox] { width: auto; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; }
#kboard-default-editor input[type=radio] { width: auto; -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; }
#kboard-default-editor select:hover,
#kboard-default-editor input[type=text]:hover,
#kboard-default-editor input[type=email]:hover,
#kboard-default-editor input[type=number]:hover,
#kboard-default-editor input[type=date]:hover,
#kboard-default-editor input[type=password]:hover { border-bottom: 1px solid #9e9e9e; }
#kboard-default-editor select:focus,
#kboard-default-editor input[type=text]:focus,
#kboard-default-editor input[type=email]:focus,
#kboard-default-editor input[type=number]:focus,
#kboard-default-editor input[type=date]:focus,
#kboard-default-editor input[type=password]:focus { border-bottom: 2px solid #9e9e9e; }
#kboard-default-editor input[type=file] { display: inline; margin: 0; padding: 0; width: 30%; font-size: 13px; color: #666666; border-radius: 0; border: 0; box-shadow: none; background-color: transparent; }
#kboard-default-editor .kboard-attr-title input { width: 70%; }
#kboard-default-editor .kboard-attr-row { float: left; padding: 5px 0; width: 100%; background-color: white; }
#kboard-default-editor .kboard-attr-row .attr-name { display: inline; float: left; margin: 0; padding: 0 10px 0 10px; width: 120px; line-height: 30px; color: #545861; font-size: 14px; font-weight: bold; }
#kboard-default-editor .kboard-attr-row .attr-name img { display: inline; margin: 0; padding: 0; width: auto; max-width: 100%; vertical-align: middle; }
#kboard-default-editor .kboard-attr-row .attr-name .attr-required-text { color: red; font-weight: normal; font-size: 13px; }
#kboard-default-editor .kboard-attr-row.kboard-attr-content .attr-name { display: none; }
#kboard-default-editor .kboard-attr-row .attr-value { margin: 0 0 0 140px; padding: 0; line-height: 30px; font-size: 14px; }
#kboard-default-editor .kboard-attr-row .attr-value .attr-value-option { display: inline; padding-right: 20px; width: auto; font-size: 14px; cursor: pointer; }
#kboard-default-editor .kboard-attr-row .attr-value .attr-value-option input { cursor: pointer; }
#kboard-default-editor .kboard-attr-row .attr-value .attr-value-label { display: inline; padding-right: 5px; width: auto; cursor: pointer; }
#kboard-default-editor .kboard-attr-row .attr-value .attr-value-label input { cursor: pointer; }
#kboard-default-editor .kboard-attr-row .attr-value .description { margin: 0; color: #666666; }
#kboard-default-editor .kboard-attr-row .attr-value .kboard-tree-category-wrap { float: left; width: 100%; }
#kboard-default-editor .kboard-attr-row .attr-value .kboard-tree-category-wrap select { clear: both; float: left; margin-bottom: 5px; width: 30%; }
#kboard-default-editor .kboard-content { float: left; margin: 0; padding: 9px 0; width: 100%; background-color: white; }
#kboard-default-editor .kboard-content .editor-textarea { display: inline; margin: 0; padding: 5px; width: 100%; min-width: 100%; max-width: 100%; height: 250px; min-height: 0; font-size: 14px; border: 1px solid #dcdcdc; box-shadow: none; background: none; background-color: transparent; box-sizing: border-box; text-indent: 0; }
#kboard-default-editor .kboard-control { float: left; padding: 15px 0; width: 100%; }
#kboard-default-editor .kboard-control .left { position: static; float: left; }
#kboard-default-editor .kboard-control .right { position: static; float: right; width: 50%; text-align: right; }
#kboard-default-editor.confirm { margin: 100px auto; max-width: 590px; }
#kboard-default-editor.confirm input[type=password] { width: 100%; box-sizing: border-box; }

/*latest*/
#kboard-default-latest table { display: table; table-layout: fixed; width: 100%; border: 0; border-bottom: 1px solid #f1f1f1; }
#kboard-default-latest table tr { padding: 0; border: 0; }
#kboard-default-latest table th { padding: 5px 0; height: auto; border: 0; text-align: center; }
#kboard-default-latest table td { padding: 5px 0; height: auto; border: 0; border-top: 1px solid #f1f1f1; vertical-align: middle; }
#kboard-default-latest table td.kboard-latest-title { text-align: left; }
#kboard-default-latest table .kboard-latest-title { padding-left: 5px; font-size: 14px; }
#kboard-default-latest table .kboard-latest-title a { text-decoration: none; box-shadow: none; }
#kboard-default-latest table .kboard-latest-title img { display: inline; margin: 0; width: auto; height: auto; vertical-align: middle; max-width: 100%; }
#kboard-default-latest table .kboard-latest-title .kboard-comments-count { }
#kboard-default-latest table .kboard-latest-date { width: 80px; text-align: center; font-size: 14px; }

@media screen and (max-width: 1440px) {
	.board_tab_wrap .beaf_tab {width:100%; margin:0;}

	.before_after_board .img {width:100%; height:95px;}
}

@media screen and (max-width: 1199px) {
	/*list*/
	.board_tab_wrap .beaf_tab {font-size:16px;}
	.before_after_board .img {width:100%;}
}
@media screen and (max-width: 1024px) {
	.board_tab_wrap {margin-top:0; overflow-x:scroll; border-bottom:1px solid #E0E0E0;}
	.board_tab_wrap .beaf_tab {gap:40px; padding:0 30px; flex-wrap:nowrap; width:1054px;}
	.board_tab_wrap .beaf_tab li {width:auto;}
	.board_tab_wrap .beaf_tab li:before,
	.board_tab_wrap .beaf_tab li:after {display:none;}

	/*list*/
	.before_after_board {margin-right:0;}
	.before_after_board .img {height:auto;}
	.before_after_board > li {width:100%; margin-right:0;}

	.notice_wrap.wrapper07 {padding-left: 12px; padding-right: 12px;}
}
@media screen and (max-width: 640px) {
	.board_tab_wrap .beaf_tab {gap:14px; padding:0 14px; flex-wrap:nowrap; width:610px; font-size:10px;}

	.sub_txt {margin-top:32px; font-size:8px;}
	/*list*/
	.before_after_board {gap:40px}
	.before_after_board .two_imgbox .txt {padding:10px 14px;}
	.before_after_board .two_imgbox .txt .tit {font-size:12px;}
	.before_after_board .two_imgbox .txt .date {font-size:10px;}
	.before_after_board > li > a > strong {margin-top:12px; font-size:14px; color:#333;text-align: center;}

	.notice_wrap {margin-bottom:40px;}
	.notice_wrap > p {font-size:20px; line-height:1; padding:14px 0;}
	.notice_wrap .before_after_board {padding:24px 12px; gap:24px;}

	/*document*/
	.beaf_document.basic_view .view_wrap {border-top:0; margin-top:0;}
	.beaf_document.basic_view .before_after_board > li {display:block; max-width:400px; margin:0 auto;}
	.beaf_document.basic_view .before_after_board > li > div {width:100%;}

	/*editor*/
	#kboard-default-editor select,
	#kboard-default-editor input[type=text],
	#kboard-default-editor input[type=email],
	#kboard-default-editor input[type=number],
	#kboard-default-editor input[type=date],
	#kboard-default-editor input[type=password],
	#kboard-default-editor input[type=file] { width: 100% !important; box-sizing: border-box; }
	#kboard-default-editor .kboard-attr-row { padding: 10px 0; }
	#kboard-default-editor .kboard-attr-row .attr-name { padding: 0; width: 100%; font-size: 14px; }
	#kboard-default-editor .kboard-attr-row .attr-value { margin: 0; }
	#kboard-default-editor .kboard-attr-row .attr-value .kboard-tree-category-wrap select { margin-bottom: 10px; width: 100%; }
	#kboard-default-editor.confirm { max-width: none; }
}

@media screen and (max-width: 375px) {

	.before_after_board .img {height:118px;}
}