/*---- 웹폰트 ---*/
/*------------------------------------------------------------------------------------------------------*/
@font-face {
	font-family: 'NanumGothic';
	src:url('../fonts/NanumGothic.eot');
	src:url('../fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/NanumGothic.woff') format('woff'),
		url('../fonts/NanumGothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*---- 기본 스타일 ---*/
/*------------------------------------------------------------------------------------------------------*/
* 		{ margin:0; padding:0; }
body 	{ overflow-y: scroll; font-size:100%; }

/*---- 글자 스타일 ---*/
/*------------------------------------------------------------------------------------------------------*/
body, h1, h2, h3, h4 { font:bold 0.975em "NanumGothic"; }
#filtering-nav { font:normal 0.975em "NanumGothic"; }

p 	{ padding-bottom: 17px; /* same as leading = linebreak */  font:normal 0.975em "NanumGothic"; }
h3 	{ padding-bottom: 15px; /* same as leading = linebreak */ }
a img, img 	{ padding-bottom:3px; padding-top:3px; }

/*---- 링크 스타일 ---*/
/*------------------------------------------------------------------------------------------------------*/
a 			{ text-decoration:none; focus:none; }
a:hover 	{ text-decoration:none; focus:none; }
a img, img 	{ border:none; focus:none; }
a:focus, img:focus 	{ outline: none; }

/*---- 칼라 & 배경 ---*/
/*------------------------------------------------------------------------------------------------------*/
#filtering-nav li a { color:#fff; }
body			{ background: url(../imgs/dongwoo/bg.png) fixed;  color:#493E2C; }
header { background:#1b1c1e; }
footer { background:#1b1c1e; }
#menu, h1, h2, h3 	{ color:#493E2C; }
#filtering-nav li a:active,
#filtering-nav li a.selected { color:#a2e4b0; }

/*---- 레이아웃 영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
#content 	{ width:95%; margin:0 auto; /*display:none;*/ }
#fullbox { margin:0 auto; width:70%; background:#fff; border-radius:30px; overflow: hidden;
 -webkit-box-shadow:4px 3px 5px rgba(0,0,0,0.4);  -moz-box-shadow:4px 3px 5px rgba(0,0,0,0.4);
  -o-box-shadow:4px 3px 5px rgba(0,0,0,0.4); box-shadow:4px 3px 5px rgba(0,0,0,0.4); }
.wall 		{ overflow:visible; width:93%; margin:0 auto; }
footer { width:100%; padding:15px 20px; margin:0; }

/*---- 헤더 메뉴 영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
header { margin:0 0 20px 0; width:100%; padding:15px 0; }
header p { float:right; padding-right:20px; font-weight:bold; }
header p a{ color:#FFF; }
#filtering-nav { max-width:83%; margin:0 auto; padding-top:5px; }
#filtering-nav li { float:left; list-style:none; width:120px; height:20px; padding:0 1% 0; text-align:center; padding-top:10px; }
#filtering-nav li:nth-child(1) { margin-right:20px; }
#filtering-nav li a 		{ display:block; }
#filtering-nav li a:active 	{ text-decoration:none; }
#filtering-nav li a.selected, #filtering-nav li a.selected.everything	{ text-decoration:none; }
#filtering-nav li:nth-child(1) { width:57px; height:42px; background:url(../imgs/dongwoo/top_logo_1h.png) no-repeat; }
#filtering-nav li:nth-child(1) a.everything { width:57px; height:42px; }

/*---- 푸터 영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
footer p { color:#fff; }
  
/*---- 클리어 ---*/
/*------------------------------------------------------------------------------------------------------*/
.wall:after, #filtering-nav:after { content:''; display:block; height:0; clear:both; visibility:hidden; }
.clear { clear:both; }

/*---- 상품영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
.products { max-width: 99.5%; margin: 0 auto; }
.products_item { position:relative; float:left; border-radius:10px; overflow:hidden;  background-size:auto; width:100%; 
padding-bottom:25.23%; margin:0 .35% .78%;
-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.3);  -moz-box-shadow:0 0 2px 1px rgba(0,0,0,0.3);
 -o-box-shadow:0 0 2px 1px rgba(0,0,0,0.3); box-shadow:0 0 2px 1px rgba(0,0,0,0.3);
  }
.products_Inner { padding: 24.5% 0 0; }
.products_Inner:hover {-webkit-box-shadow:inset 0px 0px 80px 3px rgba(102,102,102,0.3);  -moz-box-shadow:inset 0px 0px 80px 3px rgba(102,102,102,0.3); -o-box-shadow:inset 0px 0px 80px 3px rgba(102,102,102,0.3); box-shadow:inset 0px 0px 80px 3px rgba(102,102,102,0.3); -webkit-transition:0.4s ease-in-out;
-moz-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; transition:0.4s ease-in-out; }
.products_Inner span { position:absolute; top:5px; right:5px; display:none; width:30px; height:30px; border-radius:30px;
background:#a2e5b0 url(../imgs/dongwoo/search.png) no-repeat center center;  }
.products_Inner:hover span{ display:block; } 
.products_Inner p { background:rgba(0,0,0,0.4); padding-top:9px; font:bold 14px "NanumGothic"; color:#FFF; text-align: center; }
p.bullet { background:url(../imgs/dongwoo/list-bullets.png) no-repeat 0 5px; padding-left:15px; }
span.product_solution { float:left; padding:0 35px 0; }
span.product_solution p { text-align:center; }
span.product_solution01 { float:left; padding:0 15px 0; }
span.product_solution01 p { text-align:center; }
span.product_solution02 { float:left; width:180px; }
span.product_solution02 img { margin-left:66px; }
span.product_solution02 p { text-align:center; }

p.pr_imgs { float:left; padding-left:30px; }
p.pr_mark { float:left; padding-left:30px; }

p.pr_imgs_01 { float:left; }/*---- 소변 세정기 상품설명 그림 영역 ---*/
p.pr_imgs_02 { float:left; margin-top:30px; } 
p.pr_imgs_03 { float:left; margin:80px 60px 0 40px; }/*---- 핸드 타월 상품설명 그림 영역 ---*/
.company_info { border-radius:10px; overflow:hidden;  background-size:auto; width:100%;
-webkit-box-shadow:0 3px 5px rgba(0,0,0,0.3);  -moz-box-shadow:0 3px 5px rgba(0,0,0,0.3);
 -o-box-shadow:0 3px 5px rgba(0,0,0,0.3); box-shadow:0 3px 5px rgba(0,0,0,0.3); 
 background: rgba(255,255,255,0.9);}

/*---- 회사소개 영역 ---*/
.company{ position:relative; float:left; border-radius:10px; overflow:hidden;  background-size:auto; width:100%;  margin:0 .35% 0 ;
-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.3);  -moz-box-shadow:0 0 2px 1px rgba(0,0,0,0.3); 
-o-box-shadow:0 0 2px 1px rgba(0,0,0,0.3); box-shadow:0 0 2px 1px rgba(0,0,0,0.3); 
 background:rgba(0,0,0,0.8); color:#fff; }
 .company01{ position:relative; float:left; border-radius:10px; overflow:hidden; height:285px; background-size:auto; width:100%;  margin:0 .35% 0 ;
-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.3);  -moz-box-shadow:0 0 2px 1px rgba(0,0,0,0.3); 
-o-box-shadow:0 0 2px 1px rgba(0,0,0,0.3); box-shadow:0 0 2px 1px rgba(0,0,0,0.3);  }
 
.info01 p { padding-bottom:0; }
.info02 h4, .info03 h4, info05 h4 { padding:10px 0 10px 10px; color:#fff; }
.info01 p img{ margin-left:20px; }
.info02 p, .info03 p, .info05 p { padding:10px; line-height:25px; }
.info05 h4 { margin-left: 10px; }

@-webkit-keyframes fadeIn { 
0% {
opacity:0
}
100% {
opacity:1
}
}

/*---- 상품 및 높이 영역 ---*/
.product_01 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/perfume_product.png) no-repeat center 20px; height:250px; }
.product_02 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/inko_cleaner.png)  no-repeat center 20px; height:210px; }
.product_03 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/foam_soap.png) no-repeat center 20px; height:200px; }
.product_04 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/jumboroll_01.png) no-repeat center 20px; height:190px; }
.product_05 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/inko_trap01.png) no-repeat center 20px; height:130px; }
.product_06 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/tierra_product01.png) no-repeat center 20px; height:240px; }
.product_07 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/grasse_cleaner.png) no-repeat center 20px; height:160px; }
.product_08 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/liquid_soap.png) no-repeat center 20px; height:190px; }
.product_09 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/handtowel_02.png) no-repeat center 20px; height:195px; }
.product_10 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/gel-freshener.png) no-repeat center 20px; height:210px; }
.product_11 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/envir_product01.png) no-repeat center 20px; height:240px; }
.product_12 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/urinal.png) no-repeat center 20px; height:130px; }
.product_13 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/fragrance_soap.png) no-repeat center 20px; height:180px; }
.product_14 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/handtowel_03.png) no-repeat center 20px; height:290px; }
.product_15 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/hand_dryer.png) no-repeat center 20px; height:160px; }
.product_16 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/premium_inko.png) no-repeat center 20px; height:200px; }
.product_17 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/toilet_cleaner.png) no-repeat center 20px; height:200px; }
.product_18 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/disinfectant.png) no-repeat center 20px; height:190px; }
.product_19 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/wall_napkin.png) no-repeat center 20px; height:190px; }
.product_20 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/insect_trap.png) no-repeat center 20px; height:110px; }
.product_21 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/spray_list.png) no-repeat center 20px; height:220px; }
.product_22 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/hand_cleaner01.png) no-repeat center 20px; height:200px; }
.product_23 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/table_napkin.png) no-repeat center 20px; height:150px; }
.product_24 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/deodorant_01.png) no-repeat center 20px; height:160px; }
.product_25 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/cocktail_napkin.png) no-repeat center 35px; height:120px; }
.product_26 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/any_goggle.png) no-repeat center 35px; height:190px; }
.product_27 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/tissue.png) no-repeat center 35px; height:140px; }
.product_28 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/watertissue.png) no-repeat center 35px; height:140px; }
.product_29 { background: rgba(255,255,255,0.9) url(../imgs/dongwoo/deodorizer.png) no-repeat center 35px; height:130px; }

/*---- 글자 p 태그 위치 ---*/
.product_01 p { margin-top:215px; }
.product_02 p { margin-top:175px; }
.product_03 p { margin-top:165px; }
.product_04 p { margin-top:155px; }
.product_05 p { margin-top:95px; }
.product_06 p { margin-top:205px; }
.product_07 p { margin-top:125px; }
.product_08 p { margin-top:155px; }
.product_09 p { margin-top:160px; }
.product_10 p { margin-top:175px; }
.product_11 p { margin-top:205px; }
.product_12 p { margin-top:95px; }
.product_13 p { margin-top:145px; }
.product_14 p { margin-top:255px; }
.product_15 p { margin-top:125px; }
.product_16 p { margin-top:165px; }
.product_17 p { margin-top:165px; }
.product_18 p { margin-top:155px; }
.product_19 p { margin-top:155px; }
.product_20 p { margin-top:75px; }
.product_21 p { margin-top:185px; }
.product_22 p { margin-top:165px; }
.product_23 p { margin-top:115px; }
.product_24 p { margin-top:125px; }
.product_25 p { margin-top:85px; }
.product_26 p { margin-top:155px; }
.product_27 p { margin-top:105px; }
.product_28 p { margin-top:105px; }
.product_29 p { margin-top:95px; }

/*---- masonry css영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
.box { margin:0px 0px 8px 0px; float:left; }
.col1 { width:90px; }
.col2 { width:200px; }
.col3 { width:250px; }
.col4 { width:420px; }
.col5 { width:530px; }

/*---- Modal 영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
.fade { opacity: 0;  -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear;  -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; }
.fade.in { opacity: 1; }
.close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; color:#a2e4b0; text-shadow: 0 1px 0 #ffffff; opacity: 0.8;
  filter: alpha(opacity=20); }
.close:hover, .close:focus {  color:#a2e4b0; text-decoration: none; cursor: pointer; opacity: 1; filter: alpha(opacity=40); }
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; outline:none; }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background:rgba(0,0,0,0.5); }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); }
.modal { position: fixed; top: 15%; left: 43%; z-index: 1050; width: 800px; margin-left: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; }
.modal.fade { top: -25%; -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out; }
.modal.fade.in { top: 10%; }
.modal-header { padding: 9px 15px; border-top-left-radius:15px; border-top-right-radius:15px; background:#1b1c1e; -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.3);  -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.3);  -o-box-shadow:0px 0px 7px rgba(0,0,0,0.3); box-shadow:0px 0px 7px rgba(0,0,0,0.3); }
.modal-header .close { margin-top: 2px; }
.modal-header h3 { margin: 0; line-height: 30px; color:#fff; }
.modal-body { position: relative;height:auto; padding: 15px; overflow-y: auto; }
.modal-body p { line-height:20px; }
.modal-body p img { max-width:100%;}
.modal-body .img { float:left; width:300px; }
.modal-body .note { float:right; width:400px; } 
.modal-form { margin-bottom: 0; }

.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }

/*---- 미디어쿼리 ---*/
/*------------------------------------------------------------------------------------------------------*/
@media (max-width: 1260px) {
#fullbox { width:85%; }
.wall { width:80%; }
#filtering-nav { max-width:83%; margin:0 auto; padding-top:5px; }
#filtering-nav li { float:left; list-style:none; width:120px; height:20px; padding:0; text-align:center; padding-top:10px; }
}

@media (max-width: 1024px){
#fullbox { width:79%; }
.wall { width:70%; }
.modal { position: fixed; top: 20px; right: 20px; left: 20px; width: auto; margin: 0; }
.modal .note { clear:right; max-width:100%; }

}

@media (max-width: 768px) {
#fullbox { width:95%; }
.wall { width:79%; }
.modal { position: fixed; top: 20px; right: 20px; left: 20px; width: auto; margin: 0; }
.modal.fade { top: -100px; }
.modal.fade.in { top: 20px; }
.modal .img { clear:both;max-width:100%; }
.modal .note { clear:both; max-width:100%; }
span.product_solution02 { float:left; width:150px; }
span.product_solution02 img { margin-left:54px; }
span.product_solution02 p { text-align:center; }
}

@media (max-width: 480px) {
#fullbox { width:90%; }
.wall { width:75%; }
#filtering-nav li:nth-child(1) { margin-left:45%; }
#filtering-nav li:nth-child(2) { clear:both;}
.modal { top: 10px; right: 10px; left: 10px; }
.modal-header .close { padding: 10px; margin: -10px; }
.modal .img { clear:both;max-width:100%; }
.modal .note { clear:right; max-width:100%; max-width:100%; }
span.product_solution02 { float:left; width:120px; }
span.product_solution02 img { margin-left:37px; }
span.product_solution02 p { text-align:center; }
}


@media (max-width: 320px) {
#fullbox { width:95%; }
.wall { width:93%; }
#filtering-nav li:nth-child(1) { margin-left:40%; }
#filtering-nav li:nth-child(2) { clear:both;}
.modal .img { clear:both;max-width:100%; }
.modal .note { clear:both; max-width:100%; }
}