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



/* 공통 */

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


/* 목록 */
#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:0;padding:5px;z-index:1}
#bo_gall .gall_box {position:relative;margin:0 0 50px 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 .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:50%}
.gall_row .col-gn-3 {width:33.33333333%}
.gall_row .col-gn-4 {width:25%}
.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_row li {height:23vw; max-height:285px}
.gall_li img {width:100%}
.gall_info {margin-top:6px; color:#656565; line-height:1.3}
.gall_info a {color:#656565}
.gall_info a:hover {color:#ff5500}

.bo_sch .sch_bar {margin-top:0}

/* 제품 순서 변경 */
.list_num {position:absolute; bottom:50px; right:5px; 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; color:#fff; font-weight:bold}




/* 글쓰기 */
#bo_w {margin:0 0 0; font-family:'Malgun Gothic', dotum, sans-serif;}
#bo_w > form {margin:40px 0 0}
#bo_w .bo_w_select select {border:1px solid #d0d3db;width:100%;height:30px;border-radius:3px}
.wr_type-wrap {width:100%; margin:20px auto 0px auto;overflow:hidden; text-align:center;box-sizing: border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px; background:#fafafa;border: 1px solid #dfdede;word-wrap:break-word;padding:30px 40px 20px;}
.wr_type .row {margin-bottom:0px; text-align:left;}
.wr_type .row:after {display: table; content: " "; clear: both; }
.wr_type .col_left {width:47.6%;margin-right: 2.4%; float:left; text-align:left;  }
.wr_type .col_right {width:47.6%;margin-left: 2.4%; float:left; text-align:left; }
.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 {margin:26px 0 30px}
#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}

#bo_v_detal li:first-child {width:49.1%; float:left}
#bo_v_detal li:first-child img {width:100%}
#bo_v_detal .pro_title {font-size:1.25em; color:#000}
#bo_v_detal .pro_cont {width:calc(50.9% - 20px); float:right}
#bo_v_detal .pro_img0 {position:relative; cursor:pointer}
#bo_v_detal .pro_img0 .btn_imgl {position:relative}
#bo_v_detal .pro_img0 .btn_zoom {display:none; position:absolute; left:50%; top:50%; margin:-15px 0 0 -16px; z-index:2}
#bo_v_detal .pro_img01 {position:relative; padding:15px 0 27px; border-bottom:1px solid #cecece}
#bo_v_detal .pro_img01 span {display:inline-block;  width:100%; max-width:12.571%; margin:2% 0 0 2%; float:left}
#bo_v_detal .pro_img01 span:nth-child(7n+1) {margin-left:0 }
#bo_v_detal .pro_img01 span img {width:100%; border:1px solid #cecece; padding:5px}
#bo_v_detal .pro_img01 span img:hover {border-color:red; cursor:pointer}
#bo_v_detal .pro_img01 .on {border:1px solid red}
#bo_v_detal .pro_img01 .btns {display:none}
#bo_v_detal .pro_img02 {margin-top:20px}
#bo_v_detal .pro_img02 img {width:100%; max-width:418px}
#bo_v_detal .pro_txt {margin-top:40px}
#bo_v_detal .pro_txt h3 {padding-bottom:10px; font-size:1.25em; color:#000}
#bo_v_detal .pro_txt p {line-height:1.6}
#bo_v_detal .pro_txt i {color:#999}
#bo_v_detal .pro_txt em {display:block; color:#12702e}
#bo_v_detal .pro_txt span.pattern {display:none}
#bo_v_detal .pro_txt .p01 span {margin-left:186px}
#bo_v_detal .pro_txt .p02 span {margin-left:198px}
#bo_v_detal .pro_txt .p03 span {margin-left:182px}
#bo_v_detal .pro_txt .p04 span {margin-left:140px}
#bo_v_detal .pro_txt .p04 em {margin-left:244px}
#bo_v_detal .pro_txt .p05 span {margin-left:195px}
#bo_v_detal .pro_txt .p06 span {margin-left:174px}

#bo_v_detal .pro_img01.type {border:0}
#bo_v_detal .pro_img02.type,
#bo_v_detal .pro_txt.type {display:none !important}

#bo_v_detal .pro_info {margin-top:30px; padding-top:30px; position:relative;}
/* #bo_v_detal .pro_info:after {content:""; position:absolute; left:0; top:0; width:203%; height:1px; background:#cecece} */
#bo_v_detal .pro_info1 h3 {padding-bottom:10px; font-size:1.25em; color:#000}
#bo_v_detal .pro_info1 p {line-height:1.6}
#bo_v_detal .pro_info1 i {color:#999}
#bo_v_detal .pro_info1 em {display:block; color:#12702e}
#bo_v_detal .pro_info1 span.pattern {display:none}
#bo_v_detal .pro_info1 .p01 span {margin-left:186px}
#bo_v_detal .pro_info1 .p02 span {margin-left:198px}
#bo_v_detal .pro_info1 .p03 span {margin-left:182px}
#bo_v_detal .pro_info1 .p04 span {margin-left:182px}
#bo_v_detal .pro_info1 .p04 em {margin-left:286px}
#bo_v_detal .pro_info1 .p05 span {margin-left:195px}
#bo_v_detal .pro_info1 .p06 span {margin-left:174px}

#bo_v_detal .pro_info2 {margin-top:20px}
#bo_v_detal .pro_info2 img {width:100%; max-width:418px}




/* 팝업 - 제품 큰이미지 보기 */
.popup_bg {overflow:hidden; min-height:1120px; z-index:777}
.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}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {margin-top:-50px}




@media screen and (max-width: 1024px)
{
	/* 목록 */
	.gall_row li {height:24vw}

	/* 글읽기 */
	#bo_v_detal .pro_txt .p01 span,	#bo_v_detal .pro_info1 .p01 span {margin-left:0} {margin-left:0}
	#bo_v_detal .pro_txt .p02 span,	#bo_v_detal .pro_info1 .p02 span {margin-left:0} {margin-left:0}
	#bo_v_detal .pro_txt .p03 span,	#bo_v_detal .pro_info1 .p03 span {margin-left:0} {margin-left:0}
	#bo_v_detal .pro_txt .p04 span,	#bo_v_detal .pro_info1 .p04 span {margin-left:0} {margin-left:0}
	#bo_v_detal .pro_txt .p04 em,	#bo_v_detal .pro_info1 .p04 em {margin-left:100px} {margin-left:100px}
	#bo_v_detal .pro_txt .p05 span,	#bo_v_detal .pro_info1 .p05 span {margin-left:0} {margin-left:0}
	#bo_v_detal .pro_txt .p06 span,	#bo_v_detal .pro_info1 .p06 span {margin-left:0} {margin-left:0}		

	.popup_bg .popup_close {right:15px}
}

@media screen and (max-width: 910px)
{	
	/* .popup_body .flexslider {width:97%} */
}


@media screen and (max-width: 768px)
{	
	/* 목록 */	
	#bo_v #pg_head {text-align:left}
	.gall_row li {width:50% !important; height:57vw;  min-height:200px !important; max-height:440px !important}	
	#bo_gall li.empty_list {width:100% !important}

	/* 글쓰기 */
	.wr_type .col_left {display: block;width:100% ; margin-right:0%}
	.wr_type .col_right {display: block;width: 100%;margin-left: 0%}
	#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}	

	/* 글읽기 */
	#bo_v_atc {margin:26px 0 10px}
	#bo_v_detal li:first-child,
	#bo_v_detal .pro_cont {width:100%; float:none; clear:both}
	#bo_v_detal .pro_title {margin-top:40px}
	#bo_v_detal .pro_img01 {padding-top:5px}
	#bo_v_detal .pro_img01 .img_hide {display:none}
	#bo_v_detal .pro_img01 .btns {position:relative; display:inline-block; z-index:3; background:#fff; }
	#bo_v_detal .pro_img01 .btn_less {display:none}
	#bo_v_detal .pro_img01.type {border-bottom:1px solid #cecece}
	#bo_v_detal .pro_img02.type,
	#bo_v_detal .pro_txt.type {display:block !important}
	#bo_v_detal .pro_info {display:none}
	#bo_v_detal .pro_txt h3 {clear:both; padding-bottom:10px}
	
	.pro_img01 .btn_more.show,
	.pro_img01 .btn_less.show {display:inline-block !important}
	.pro_img01 .img_hide.show {display:inline-block !important; animation: fade-in 1s; animation-fill-mode: forwards}

	.pro_img01 .btn_more.hide,
	.pro_img01 .btn_less.hide {display:none !important}
	.pro_img01 .img_hide.hide {display:inline-block !important; z-index:1; animation: fade-out 1s; animation-fill-mode: forwards}

	@keyframes fade-in {
	  from {
		opacity:0;	
	  }

	  to {
		opacity:1
	  }
	}

	@keyframes fade-out {
	  from {
		opacity:1;	
	  }

	  to {
		opacity:0; position:absolute; right:0; top:45%
	  }
	}



	/* 팝업 - 제품 큰이미지 보기 */
	.popup_bg .popup_body {margin:0 auto 60px}
	.popup_head {height:76px; line-height:76px}
	.popup_bg .popup_close {top:24px}
}


@media screen and (max-width: 600px)
{
	.wr_type-wrap {padding:0; border:0; background:none}
}


@media screen and (max-width: 450px)
{
	.gall_row li {height:62vw}	
}