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


/* ■ 목록 */
#bo_gall #gall_ul {margin:20px -10px 0;padding:0;list-style:none;zoom:1}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_gall .gall_li .gall_chk {position:absolute;top:0;left:30px;padding:5px;z-index:1}
#bo_gall .gall_box {position:relative; margin:0 0 60px 0;border-radius:0 0 2px 2px}
#bo_gall .gall_con {position:relative}
#bo_gall .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.825em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:baseline}

.gall_row {max-width:1200px; margin:60px auto 0 !important}
.gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10 {position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
.gall_row .col-gn-0,.gall_row .col-gn-1 {width:100%}
.gall_row .col-gn-2 {width:calc(50% - 40px); margin:0 20px}
.gall_row .col-gn-3 {width:33.33333333%}
.gall_row .col-gn-4 {width:25%; padding:0 !important; text-align:center}
.gall_row .col-gn-5 {width:20%}
.gall_row .col-gn-6 {width:16.66666667%}
.gall_row .col-gn-7 {width:14.28571428%}
.gall_row .col-gn-8 {width:12.5%}
.gall_row .col-gn-9 {width:11.11111111%}
.gall_row .col-gn-10 {width:10%}
.gall_row .box_clear {clear:both}

.gall_img {position:relative}
.gall_img > a > img {display:inline-block; width:calc(100% - 60px) !important; margin:0 30px;  outline:1px solid #cecece; box-shadow:2px 2px 7px #ccc}
.gall_info {margin-top:20px; color:#656565; line-height:1.3}
.gall_info .title {display:inline-block; width:100%; text-align:center; font-size:.92em}
.bo_sch .sch_bar {margin-top:0}

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

/* 수정 버튼 */
.gall_img .btn_box {position:absolute; right:35px; bottom:7px;  z-index:9}
.gall_img .btn_box a {font-size:12px; color:#fff; background:#000; padding:2px 6px}

/* 마우스 오버시 효과 */
.gall_img > a .line {position:absolute; left:30px; top:0; width:calc(100% - 60px); height:100%; transition:all .5s;}
.gall_img > a .line:before {content:""; position:absolute; left:10%; top:10%;  display:inline-block; width:0; height:2px; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.gall_img > a .line:after {content:""; position:absolute; left:10%; bottom:10%;  display:inline-block; width:0; height:2px; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.gall_img > a .line > em {opacity:0; position:absolute; left:50%; top:50%; margin:-21px 0 0 -21px; transition:all .5s;}
.gall_img > a .line > span:before {content:""; position:absolute; left:10%; top:10%;  display:inline-block; width:2px; height:0; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.gall_img > a .line > span:after {content:""; position:absolute; right:10%; top:10%;  display:inline-block; width:2px; height:0; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.gall_img > a > img {width:90%}
.gall_img > a:hover .line:before {width:80%}
.gall_img > a:hover .line:after {width:80%}
.gall_img > a:hover .line > span:before {height:80%}
.gall_img > a:hover .line > span:after {height:80%}
.gall_img > a:hover .line {background:rgba(0,0,0, 0.7)}
.gall_img > a:hover .line > em {opacity:1}

/* 팝업 - 제품 큰이미지 보기 */
.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:910px; 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}
.flex-direction-nav .flex-next {right: -0px}
.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}
#bo_w .tx_title {line-height: 17px; margin-bottom:5px}

.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}





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


@media screen and (max-width: 768px)
{	
	/* ■ 목록 */		
	#bo_gall .gall_box {margin-bottom:35px}
	.gall_row {margin-top:40px !important}
	.gall_row li {width:100% !important; }
	.gall_row .col-gn-4 {width:50% !important}
	.gall_li img {width:calc(100% - 20px); ; margin:0 10px;}
	.gall_img > a .line > em {margin:-21px 0 0 -31px}

	/* 팝업 - 제품 큰이미지 보기 */
	.popup_bg .popup_body {margin:0 auto 60px}
	.popup_head {height:76px; line-height:76px}
	.popup_bg .popup_close {top:24px; right:3%}
	.popup_body .slides > li > a > img {width:94%; border:1px solid #b2b2b2; box-shadow:2px 2px 7px #ccc;}
	.flex-direction-nav .flex-next {margin-right:calc(3% + 1px)}
	.flex-direction-nav .flex-prev {margin-left:calc(3% + 1px)}	


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