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

/* s: 240222 게시판 작업 */
.board_tab.type02 li a em {display:none;}
.before_after02 {margin-top:75px; display:flex; align-items:stretch;}
.before_after02 .main {width:670px; margin-bottom:0;}
.before_after02 .main .img_box {position:relative;}
.before_after02 .main .img_box li {display:flex; width:100%; height:100%; opacity:0;}
.before_after02 .main .img_box li .board_btn_wrap {position:absolute; z-index:1; bottom:5px; right:5px; margin:0;}
.before_after02 .main .img_box li .board_btn_wrap a {color:#333; background:#fff;}
.before_after02 .main .img_box li .board_btn_wrap a + a {margin-left:5px;}
.before_after02 .main .img_box li:not(.on) {position:absolute; z-index:1; top:0; left:0;}
.before_after02 .main .img_box li.on {opacity:1;}
.before_after02 .main .img_box li.on .board_btn_wrap {z-index:10;}
.before_after02 .main .img_box li > div {flex:1; position:relative;}
.before_after02 .main .img_box li > div > .img {position:relative; height:100%;}
.before_after02 .main .img_box li > div > .img p {width:100%; height:100%; opacity:0;}
.before_after02 .main .img_box li > div > .img p:not(.show) {position:absolute; z-index:1; top:0; left:0;}
.before_after02 .main .img_box li > div > .img p.show {opacity:1;}
.before_after02 .main .img_box li > div > .img p img {width:100%; height:100%; object-fit:cover;}
.before_after02 .main .img_box li > div > .tag {display:inline-block; position:absolute; z-index:10; top:0; left:0; padding:16px 24px; color:#fff; font-weight:700; line-height:1; letter-spacing:0; background-color:rgba(51,51,51,.5);}
.before_after02 .main .img_box li > p {display:none;}
.before_after02 .main .txt_box {display:flex; justify-content:space-between; align-items:center; padding:24px 36px; background-color:#F6F6F6;}
.before_after02 .main .txt_box .left {display:flex; align-items:center; margin-right:24px;}
.before_after02 .main .txt_box .left > strong {display:inline-block; color:#000; font-size:17px; line-height:1; letter-spacing:0;}
.before_after02 .main .txt_box .left > div {margin-left:16px; color:#666; font-size:17px; line-height:1;}
/*
.before_after02 .main .txt_box .left > div span::after {content:','; display:inline-block; color:#666; font-size:17px; line-height:1;}
.before_after02 .main .txt_box .left > div span:last-of-type::after {opacity:0;}*/

.before_after02 .main .txt_box .right {display:flex; align-items:center; border:1px solid #ddd;}
.before_after02 .main .txt_box .right label input {position:absolute; z-index:-1; left:-9999px; width:0; height:0; overflow:hidden; clip:rect(0,0,0,0);}
.before_after02 .main .txt_box .right label span {display:block; padding:12px 28px; color:#aaa; font-weight:700; line-height:1; text-align:center; letter-spacing:0; border:1px solid #fff; border-left:1px solid #ddd; background-color:#fff; transition:all .3s ease;}
.before_after02 .main .txt_box .right label:first-of-type span {border-left:1px solid #fff;}
.before_after02 .main .txt_box .right label input:checked + span {color:#143045; box-shadow:0 4px 15px rgba(0,0,0,.08); border-color:#143045;}

.before_after02 .sub {width:calc(100% - 670px); padding-left:30px;}
.before_after02 .sub .img_box {display:flex; flex-wrap:wrap; margin:-14px -14px;}
.before_after02 .sub .img_box li {flex:0 1 calc(50% - 24px); display:flex; position:relative; margin:14px 12px; cursor:pointer;}
.before_after02 .sub .img_box li::after {content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; opacity:.65; background-color:#DBDBDB; transition:opacity .3s ease;}
.before_after02 .sub .img_box li.on::after {opacity:0;}
.before_after02 .sub .img_box li > div > .img p:not(:first-of-type) {display:none;}
.before_after02 .sub .img_box li > div > .tag {display:none;}
.before_after02 .sub .img_box li > p {display:none;}
.before_after02 .sub .img_box li .board_btn_wrap {display:none;}

.basic_view .before_after02 ul,
.basic_view .before_after02 ol {padding-inline-start:0 !important;}
/*editor*/
#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; }

@media all and (max-width:1200px){
	.before_after02 .main {width:55%;}
	.before_after02 .sub {width:45%;}
}
@media all and (max-width:1024px){
	.before_after02 {display:block; margin-top:60px;}
	.before_after02 .main {margin-bottom:40px; width:100%;}
	.before_after02 .sub {width:100%;}

	.before_after02 .main .txt_box {display:block; padding:20px 24px;}
	.before_after02 .main .txt_box .left {margin-right:0;}
	.before_after02 .main .txt_box .left > strong {font-size:16px;}
	.before_after02 .main .txt_box .left > div {font-size:16px;}

	.before_after02 .main .txt_box .right {margin-top:24px;}
	.before_after02 .main .txt_box .right label {flex:1;}

	.before_after02 .sub {padding-left:0;}
	.before_after02 .sub .img_box {margin:-12px -10px;}
	.before_after02 .sub .img_box li {flex:0 1 calc(33.33% - 20px);  margin:12px 10px;}
}

@media all and (max-width:768px){
	.board_tab.type02 li {height:auto;}
	.board_tab.type02 li a {height:auto; padding:16px 22px;}
	
	.before_after02 {margin-top:40px;}
	.before_after02 .main {margin-bottom:32px;}
	.before_after02 .main .img_box li > div > .tag {padding:16px 20px; font-size:14px;}

	.before_after02 .main .txt_box .left > strong {margin-top:0; font-size:14px;}
	.before_after02 .main .txt_box .left > div {margin-left:12px; font-size:14px;}

	.before_after02 .main .txt_box .right label span {padding:12px 24px; font-size:14px;}

	.before_after02 .sub .img_box {margin:-10px -8px;}
	.before_after02 .sub .img_box li {flex:0 1 calc(33.33% - 16px);  margin:10px 8px;}
}

@media all and (max-width:640px){
	.board_tab.type02 li a {padding:12px 16px;}

	.before_after02 {margin-top:32px;}
	.before_after02 .main {margin-bottom:24px;}
	.before_after02 .main .img_box li > div > .tag {padding:12px 16px; font-size:12px;}

	.before_after02 .main .txt_box {padding:20px 16px;}
	.before_after02 .main .txt_box .left > strong {/*margin-top:3.5px; */font-size:13px;}
	.before_after02 .main .txt_box .left > div {font-size:13px;}

	.before_after02 .main .txt_box .right {margin-top:20px;}
	.before_after02 .main .txt_box .right label span {padding:10px; font-size:13px;}

	.before_after02 .sub .img_box {margin:-8px -5px;}
	.before_after02 .sub .img_box li {flex:0 1 calc(33.33% - 10px);  margin:8px 5px;}

	/*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 all and (max-width:374px){
	.before_after02 .main .img_box li > div > .tag {padding:10px 12px; font-size:10px;}

	.before_after02 .main .txt_box {padding:16px;}
	.before_after02 .main .txt_box .left > strong {font-size:12px;}
	.before_after02 .main .txt_box .left > div {font-size:12px;}

	.before_after02 .main .txt_box .right label span {font-size:12px;}

	.before_after02 .sub .img_box {margin:-6px -4px;}
	.before_after02 .sub .img_box li {flex:0 1 calc(33.33% - 8px);  margin:6px 4px;}
}