/***font naumgothic CDN***/
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);


/****reset****/



/*html { width: 100%; height: 100%;  font-family: 'Nanum Gothic';   }*/


/*html { -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}*/
/*body { overflow-x: hidden; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}

input, textarea, select, button, h1, h2, h3, h4, h5 {font-size:14px; line-height:1.25em /* 20px */}
/*h1, h2, h3, h4, h5 {font-weight:normal;}
ul, ol, li, figure {list-style-type:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:''}
a {text-decoration:none}
button {margin:0; font:inherit; cursor:pointer; line-height:1}
button::-moz-focus-inner {margin: -1px; padding:0}
/*table {border-collapse:collapse; border-spacing:0; width:100%}*/
/*img, select, input, button {vertical-align:middle}
input, select {color:inherit; font:inherit; line-height:100%}
textarea {resize:none; font:inherit; overflow-y:auto}
.hid, legend, hr {position:absolute; left:-10000%; top:0; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-10000px}
caption {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
cite, blockqoute {display:block; font-style:normal;}
figcaption {display:none;}
strong { font-weight: 700; }
img { border: 0 solid transparent; }*/

.clfix:after {display:block; visibility:hidden; clear:both; height:0; content:""}
.clfix	{*zoom:1} 

.fl {float:left !important}
.fr {float:right !important}

.al {text-align:left !important}
.ac {text-align:center !important}
.ar {text-align:right !important}


/*전체영역*/

#wrap { width: 100%; overflow: hidden; }



/* 기존 클래스*/


/*.width-1085 { width: 1085px; margin: 40px auto; }*/





/*후가공*/
.processing_wrap { width: 80%; border-bottom: 1px solid #dcdcdc; }
.processing_wrap .processing { width: 1085px; }
.processing_wrap .processing table { text-align: left; }
.processing_wrap .processing table td { box-sizing: border-box; font-size: 13px; color: #282929; }

.processing_wrap .processing table span { margin-right: 4px; vertical-align: middle; }
.caution_text { clear: both; color: #ef543b !important; font-size: 12px !important; font-weight: bold !important;  }


.processing_wrap .processing select { border: 1px solid #cfcfcf; padding: 10px; box-sizing: border-box;  }
.processing_wrap .processing .blue { color: #127df2; font-weight: 700; padding-left: 4px; }
.processing_wrap .processing strong { padding-left: 2px; }
.processing_wrap .processing .top { vertical-align: top; }

.processing_wrap .processing .perforation_quantity table { text-align: center; }


/*수치조절 인풋박스 디자인*/

input[type=range] { -webkit-appearance: none; width: 200px;  background: transparent; padding-left: 4px; }

input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; border:1px solid #b0b0b0; height:18px; width:18px; border-radius:50%; background:#fff; cursor:pointer; margin-top:-5px; -webkit-box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; }

/* Firefox */
input[type=range]::-moz-range-thumb{ box-shadow:1px 1px 1px #ddd,0 0 1px #ddd;border:1px solid #b0b0b0; height:20px; width:20px; border-radius:50%; background:#fff; cursor:pointer; }

/* IE */
input[type=range]::-ms-thumb{ box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; border:1px solid #b0b0b0; height:20px; width:20px; border-radius:50%; background:#fff; cursor:pointer; margin-top:1px; }
input[type=range]::-webkit-slider-runnable-track{ width:100%; height:8px; cursor:pointer; -webkit-box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; box-shadow:1px 1px 1px #ddd,0 0 1px #ddd;background:#ddd; border-radius:6px; border:transparent; }
input[type=range]:focus::-webkit-slider-runnable-track{background:#ddd; }
input[type=range]::-moz-range-track{ width:100%; height:8px; cursor:pointer; box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; background:#ddd; border-radius:6px; border:transparent; }
input[type=range]::-ms-fill-lower{ background:#ddd; border: transparent; border-radius:6px; box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; }
input[type=range]:focus::-ms-fill-lower{ background:#ddd; }
input[type=range]::-ms-fill-upper{ background:#ddd; border: transparent; border-radius:6px; box-shadow:1px 1px 1px #ddd,0 0 1px #ddd; }
input[type=range]:focus::-ms-fill-upper{ background:#ddd; }







/*후가공 선택*/
.round_canvas { position: relative; float: left; }
.round_canvas [type=checkbox] { display: none; }
.round_canvas { padding-left: 5px; }
.cb { clear: both; }


.round_select { width: 500px; height: 150px; padding: 10px 0 30px 0; }
 .round_canvas { position: relative; }
 .round_canvas .inner_01 { position: absolute; left: -27px; top: 0;  }
 .round_canvas .inner_02 { position: absolute; right: -27px; top: 0;  }
 .round_canvas .inner_03 { position: absolute; left: -27px; bottom: 0;  }
 .round_canvas .inner_04 { position: absolute; right: -27px; bottom: 0;  }

 .round_canvas canvas { border: 1px solid #dcdcdc; background: #ededed; }

 .round_canvas span { display: block; position: absolute; left: 50%; top: 21px; text-align: center;  font-size: 11px; line-height: 15px; }

 .round_canvas .text_left { margin-left: -10px; }
 .round_canvas .text_right { margin-left: -15px; }




 .round_canvas [type=checkbox]+label { display: inline-block;  width: 17px; height: 17px; background: #fff; border: 1px solid #e5e5e5; cursor: pointer;  vertical-align: top;  }


 .round_canvas input[type=checkbox]:checked+label { /*border-width: 0 3px 3px 0; */ 
    background: #0075ff url("../img/checked.png") no-repeat;  }




/*물음표 버튼*/
.question_mark { padding-left: 5px; vertical-align: middle; }


/*타공*/
.processing table {}
.perforation_img li { float: left; padding: 20px 0 20px 0; margin-left: 10px; }
.perforation_img li:first-child { margin-left: 0; }
.perforation_img li:hover {  }
.perforation_img img {width:auto;}

.perforation_quantity table { width: 110px; height: 110px; border: 1px solid #2c83e9; text-align: center; padding: 5px; box-sizing: border-box; 
  margin: 15px 0 15px 0;  background: #d9e7fd; }

.perforation_quantity table td { width: 25px; height: 25px; border-top : 1px solid #2c83e9; border-left : 1px solid #2c83e9; 
    font-size: 13px; font-weight: bold; }



.perforation_quantity table .input_style { width: 23px!important; height: 23px!important; border: 0!important;
    border-radius: 50px;  -webkit-appearance: none;  -moz-appearance: none; appearance: none; background: #2c83e9;
    cursor: pointer; color: #fff!important;  background-position: center center; padding: 0 !important; text-align: center;   }


/*탭*/

#tab { width: 100%;  border-bottom: 1px solid #e0e0e0;  padding: 15px;
    box-sizing: border-box;  }
#tab .inner { width: 1085px; margin: 0 auto; text-align: center; }
#tab .inner ul { display: inline-block;  }
#tab .inner ul li { float: left; display: inline-block; padding: 0 20px; cursor: pointer;  }
#tab .inner ul li span { display: inline-block; font-size: 15px; color: #535353; font-weight: 600; }
#tab .inner ul li span:hover { color: #2c83e9; }



#tab.fixed { position: fixed; left: 0; top: 0; width: 100%; z-index: 9999999; background: #fff; }




/*제작샘플*/

.production_sample { width: 80%; margin: 0 auto;  position: relative; overflow: hidden;  }
.production_sample .inner { width: 1085px; margin: 30px auto; text-align: center;  position: relative;  }
.production_sample .inner .top_text { padding-top: 20px; text-align:center;}
.production_sample .inner .top_text h3 { font-size: 20px; color: #282929; font-weight: 700; }
.production_sample .inner .top_text p { color: #808080; font-size: 15px; padding-top: 7px; }

    
/*슬라이드*/
    
.swiper-container { width: 1085px; position: static!important; }
.swiper-container a { color: #535353; }
.swiper-container .text { margin-top: 20px; text-align: left;  }
.swiper-container .text h3 { color:#282929; font-size: 15px; font-weight: bold;  }
.swiper-container .text ul { margin-top: 6px; }
.swiper-container .text ul li { color: #808080; font-size: 13px; line-height: 18px;  }

.swiper-slide { text-align:center; display:flex;  align-items: start !important;  margin-top: 30px; }
.swiper-slide ul li { width: 256px;  }
.swiper-slide img { max-width:100%; }

.swiper-button-next, .swiper-button-prev { margin-left: -55px!important; background: url(../img/re_prev.png) no-repeat !important; top: 54% !important; }
.swiper-button-next, .swiper-button-next { margin-right: -55px!important;  background: url(../img/re_next.png) no-repeat !important;  top: 54% !important;}



/*소재종류*/
.sample { width: 100%; margin: 0 auto;  position: relative;  overflow: hidden; } 
.sample .inner { position: relative;  width: 1085px; margin: 30px auto; text-align: center; }
.sample .inner .top_text { padding-top: 20px; text-align:center;}
.sample .inner .top_text h3 { font-size: 20px; color: #282929; font-weight: 700; }
.sample .inner .top_text p { color: #808080; font-size: 15px; padding-top: 7px; }


/*후가공*/

.processing { width: 80%; margin: 0 auto;  position: relative; overflow: hidden;  }
.processing .inner { position: relative;  width: 1087px; margin: 30px auto; text-align: center; }
.processing .inner .top_text { padding-top: 20px; text-align:center;}
.processing .inner .top_text h3 { font-size: 20px; color: #282929; font-weight: 700; }
.processing .inner .top_text p { color: #808080; font-size: 15px; padding-top: 7px; }



/*후가공 제작방법*/
.post_processing { width: 80%; overflow: hidden; padding-bottom: 75px; }
.post_product { padding-bottom:0;}
.post_processing .inner { width: 1085px; margin: 0 auto; text-align: left; }
.post_processing .inner .top_text { padding-top: 20px; text-align:center;}
.post_processing .inner .top_text h3 { font-size: 20px; color: #282929; font-weight: 700; }
.post_processing .inner .top_text p { color: #808080; font-size: 15px; padding-top: 7px; }
.product_method{ padding-bottom:50px;}

/*사진 및 이미지*/
.post_processing .inner .first_zone { position: relative; width: 1085px; margin: 0 auto; overflow: hidden; }
.post_processing .inner .first_zone .img_box { margin: 20px 30px 0 0; float: left; width: 454px; height: 268px;  }
.post_processing .inner .first_zone .text_box { float: left; width: 600px; margin: 20px 0 0 0; }
.post_processing .inner .first_zone .text_box h3 { font-size: 18px; color:#282929; font-weight: 700; position: relative; padding-bottom: 5px; }
.post_processing .inner .first_zone .text_box h3::after { position: absolute; content: ""; width: 49px; height: 3px;
    background: #388aea; top: 28px; left: 0; }
.post_processing .inner .first_zone .text_box p { font-size: 14px; color:#282929; margin-top: 15px; } 
.post_processing .inner .first_zone .text_box ul { margin-top: 25px; }
.post_processing .inner .first_zone .text_box ul li h3 { font-size:15px; font-weight: bold; margin-left: 5px; }
.post_processing .inner .first_zone .text_box ul li h3::after { background: none!important; }
.post_processing .inner .first_zone .text_box ul li h3 .number {  display: inline-block; background: #282929; width: 20px; height: 20px; border-radius: 50px;
margin-right: 6px; color: #fff;  text-align: center; font-size: 12px; line-height: 20px; }

.post_processing .inner .first_zone .text_box ul li ul { margin: 3px 0 0 28px; }
.post_processing .inner .first_zone .text_box ul li ul li { font-size: 13px; line-height: 21px; }

.post_processing .inner .second_zone { width: 100%; }
/*.post_processing .inner .second_zone_wrap { position: relative; width: 1085px; margin: 0 auto;  }*/
.post_processing .inner .second_zone_wrap { position: relative; width: 1105px; margin: 0 auto;  }
/*.post_processing .inner .second_zone .box { float: left; width:256px; height: 209px; margin-left: 20px;  }*/
.post_processing .inner .second_zone .box { float: left; width:auto; height: auto; margin-right: 20px;  }
.post_processing .inner .second_zone .box2 {float: left; width:256px; height: 209px; margin-left: 20px; margin-top:60px;}
.post_processing .inner .second_zone .box:first-child { margin-left: 0; }
.post_processing .inner .second_zone .box2:first-child { margin-left: 0; }
.post_processing .inner .second_zone .box ul li { color: #282929; font-size: 13px; margin-top: 13px; line-height: 18px;  }
.post_processing .inner .second_zone .box2 ul li { color: #282929; font-size: 13px; margin-top: 13px; line-height: 18px;  }
.post_processing .inner .second_zone h3 { font-size:15px; font-weight: bold; }
.post_processing .inner .second_zone h3 .number {  display: inline-block; background: #282929; width: 20px; height: 20px; border-radius: 50px;
 color: #fff;  text-align: center; font-size: 12px; line-height: 20px; margin: 20px 0 20px 0; margin-right: 6px;  }






/*관련상품*/s
.related_products { width: 80%; background:#f0efef; overflow: hidden; padding-bottom:50px; }
.related_products .inner { width: 1085px; margin: 0 auto; text-align: center; }
.related_products .inner .top_text { padding-top: 30px; text-align:center;}
.related_products .inner .top_text h3 { font-size: 20px; color: #282929; font-weight: 700; }
.related_products .inner .top_text p { color: #808080; font-size: 15px; padding-top: 7px; }

.related_products .products_zone { width: 1105px; margin: 30px auto; }
/*.related_products .products_zone div:first-child { margin: 0; }*/
.related_products .products_zone .products { width: 255px; height: 330px; float: left; margin-right: 20px; box-sizing: 
    border-box; background: #fff; position: relative;  }
.related_products .products_zone .products a { color: #282929; }
.related_products .products_zone .products img { width: 255px; height: 225px; }
.related_products .products_zone .products .text_box { padding: 12px 20px 20px 20px;  text-align: left; }
.related_products .products_zone .products .text_box span { font-size: 12px; color:#889393; font-weight: bold;  }
.related_products .products_zone .products .text_box .point { display: inline-block; font-size: 15px; font-weight: 700; color: #2c83e9; padding-top: 4px; }
.related_products .products_zone .products .text_box h3 { font-size: 15px; font-weight: 700; margin-top: 7px; }