@charset "utf-8";
@import url('./board.css');



/* 공통 */

form.was-validated input:invalid {
  border-color: red;
}


/* ■ 목록 */
#bo_gall {}
.mview {display:none !important}
.bo_fx {display:none}
.chk_box {width:15px; position:absolute; left:5px; top:5px}
.sub_head_img {position:relative; width:100%; max-width:932px; margin:20px auto 0; padding:0 10px 0}
.sub_head_img:after {content:""; position:absolute; bottom:-40px; left:10px; height:1px; width:calc(100% - 24px); max-width:932px; background:#b2b2b2}
.sub_head_img > img {width:calc(100% - 4px); outline:1px solid #b2b2b2;}
.masonry {width:100%; height:auto; max-width:932px; margin:65px auto 0}
.masonry .item {display:inline-block; vertical-align:top; width:calc(25% - 1px); padding:10px}
.gall_img {position:relative; text-align:center; vertical-align:middle}
.gall_txt {margin:10px 0 5px}
.masonry .item img {display:inline-block; width:100%; vertical-align:middle; /* transition:all .5s */ }

/* 제품 크기 효과 */
.gall_img:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff}
.gall_img .img2 {position:absolute; top:30%; left:40%; width:30%; height:30%; z-index:9; opacity:0; font-size:0}
.gall_img.on .img2 {top:0; left:0; width:100%; height:100%; opacity:1; font-size:.92em}

/* 제품 순서 변경 */
.list_num {position:absolute; top:5px; right:5px; z-index:99999}
.list_num input {width:35px; height:20px; line-height:1; padding-left:5px; font-size:.84em}
.list_num span {font-size:.91em; color:#fff; font-weight:bold}
.bo_l_btns {text-align:right; margin-top:20px}

/* 수정 버튼 */
.masonry .btn_box {position:absolute; right:5px; bottom:33px;  z-index:99999}
.masonry .btn_box a {font-size:12px; color:#fff; background:#000; padding:2px 4px}

/* Project 상단이미지 수정버튼 */
.admin_btns {text-align:right; margin-top:15px}
.admin_btns p {line-height:28px}


/* 팝업 - 제품 큰이미지 보기 */
.popup_bg {overflow:hidden;  overflow:auto; z-index:77777}
.popup_bg .popup_body {position:relative; max-width:1140px; margin:0 auto 90px; border-top:1px solid #b2b2b2; z-index:88888}
.popup_head {position:relative; max-width:910px; height:98px; line-height:98px; font-size:1.4em; text-align:center; margin:0 auto}
.popup_bg .popup_close {position:absolute; right:0; top:34px; text-align:center; line-height:30px; cursor:pointer}
.popup_bg .popup_close img {width:15px; height:15px;}
.popup_title {font-size:1.2em}
.popup_body .flexslider {max-width:648px; margin:20px auto 0}
.popup_body .slides > li > a {cursor:default}

.slider_cont {display:none}
.flex-direction-nav a  {opacity:1}
.flex-direction-nav .flex-prev {left: -0px; top:50%}
.flex-direction-nav .flex-next {right: -0px; top:50%}
.flexslider:hover .flex-prev,
.flexslider:hover .flex-next {opacity: 1}
.popup_body .slides > li > a > img {border:1px solid #b2b2b2; box-shadow:2px 2px 20px #c0c0c0; max-width:650px; margin:0 auto}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {margin-top:-50px}



/* ■ 글쓰기 */
#bo_w {margin:0 0 0; font-family:'Malgun Gothic', dotum, sans-serif;}
#bo_w > form {margin:40px 0 0}
.wr_type .row {margin-bottom:0px; text-align:left;}
.wr_type .row:after {display: table; content: " "; clear: both; }
.wr_type label {display: block;width: 100%;color: white;line-height: 17px;vertical-align: middle; margin-bottom: 10px;}
.wr_type label span {display: inline-block; color: #f2f2f2;line-height: 17px; margin-bottom:5px;}
.wr_type label p {display: inline-block; color: #4b4b4b;line-height: 17px; margin-bottom:5px;}
.wr_type label input {width: 100%;border:1px solid #d2d2d2;height:30px; padding: 5px 10px;color:#666; box-sizing: border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.wr_type label textarea {border:1px solid #d2d2d2;box-sizing: border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.wr_type input[type="radio"]{ width:14px; height:14px;vertical-align:middle;border:0; margin:0; padding:0; cursor:pointer;}
.wr_type textArea:focus {outline: none;border-color:#e9510e}
.wr_type input:focus {outline: none;border-color:#e9510e}
.bo_w_flie input, #bo_w select {font-size:.82rem; color:#5f5f5f}
#bo_w .btn_submit {padding:0 20px; font-size:.87rem}
#bo_w .btn_cancel {border-radius:3px; font-size:.87rem}
.precautions h3 {margin-bottom:10px}
.precautions p {position:relative; padding:0 0 10px 25px}
.precautions input {position:absolute; left:0; top:12px}
.precautions label {}
.precautions img {margin:0 10px 7px 0; cursor:pointer}
.precautions span {color:#656565 !important; cursor:pointer; display:inline !important}
#bo_w_file_num0 .frm_input {display:none}



/* ■ 글읽기 */
#bo_v_atc {max-width:792px; margin:26px auto}
#bo_v #pg_head i {margin-top:7px; font-size:1.4em; color:#999}
.fa-angle-left {display:inline-block; padding-right:12px; position:relative; margin-right:10px}
.fa-angle-left:after {content:""; position:absolute; left:3px; top:50%; width:12px; height:1px; background:#999}
.fa-angle-right {display:inline-block; padding-left:12px; position:relative}
.fa-angle-right:after {content:""; position:absolute; right:3px; top:50%; width:12px; height:1px; background:#999}
#bo_v #pg_head a {color:#656565; font-weight:normal}
#bo_v #pg_head a:hover > .fa-angle-left,
#bo_v #pg_head a:hover > .fa-angle-right {color:#ff5500}
#bo_v #pg_head a:hover > .fa-angle-left:after,
#bo_v #pg_head a:hover > .fa-angle-right:after {background:#ff5500}
.pro_title {font-size:1em; margin-top:15px}

.flexslider {overflow:hidden}
.flexslider .slides img {height:auto !important}



@media screen and (max-width: 1024px)
{	
	.popup_bg .popup_close {right:15px}
}


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


@media screen and (max-width: 768px)
{	
	/* 목록 */		
	.pcview {display:none !important}
	.mview {display:block !important}
	.masonry .item {width:calc(50% - 2px)}	

	/* 글쓰기 */
	#bo_w .bo_w_flie .file_wr {height:60px}
	#bo_w .bo_w_flie .frm_file {width:100%}
	#bo_w .bo_w_flie .file_del {left:5px; top:35px; margin-left:5px; font-size:.78em}
}


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


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