@charset "utf-8";
/* ############# prd_view 상세페이지 디자인 ############# */
.view_design_wrap{ position:relative; overflow:hidden; margin:0 auto; max-width:1000px  }
.view_design_wrap:after{ content:""; display:block; clear:both;  }

/* 연출컷 */
.img_1_box{ position:relative; width:100%; height:800px; overflow:hidden; margin:0 auto; text-align:center;  }
.img_1_box:after{ position:absolute; top:4%; right:2%; content:""; background:url(/img/logo_onnuri.png) no-repeat; width:102px; height:80px; background-size:100%; opacity:.9  }
.img_1_box img{ position:absolute; left: 50%; transform: translateX(-50%); top:0; bottom:0; margin-top:auto; margin-bottom:auto; /* top:0;  margin-top:auto; margin-bottom:auto; */ /* 사방중앙정렬 */ } 

.title_1_box{ position:relative; text-align:center; padding:80px 0; }
.title_1_box:before{ content:""; display:block; clear:both;  }
.title_1_box:after{ content:""; display:block; clear:both;  }
.title_1_box .category{ display:inline-block; border:solid 3px #ddd; padding:3px 20px; color:#333; font:600 18px/24px 'Noto Sans KR','Malgun gothic'; border-radius:30px; text-transform: uppercase }
.title_1_box h1{  font:600 45px/70px 'Noto Sans KR','Malgun gothic'; color:#111; letter-spacing:-2px;  }
.title_1_box p{ font:400 18px/24px 'Noto Sans KR','Malgun gothic'; color:#999; }

/* float 해제 */
.img_both_box{ position:relative; overflow:hidden }
.img_both_box:after{ content:""; clear:both; display:block;  }
.clear_both{ position:relative; overflow:hidden; clear:both;  }
.clear_both:after{ content:""; display:block; clear:both; }

/* 누끼이미지 + 제품 스펙 */
.img_2_box{ position:relative; background:url(/img/bg_pattern_25.png); box-sizing:border-box;  overflow:hidden; /*  border:double 1px #f1f1f1;  */ }
.img_2_box:after{ content:""; clear:both; display:block;  }
.img_2_box .img_wrap{ float:left; width:50%; height:500px; position:relative;  vertical-align:middle }
.img_2_box .img_wrap img{ height:500px !important; /* width:100%; position:absolute;  left: 50%; transform: translateX(-50%); top:0; bottom:0; margin-top:auto; margin-bottom:auto; */  transition:.2s ease; vertical-align:middle  }

.img_2_box .spec_wrap{ float:right; width:50%; text-align:left; box-sizing:border-box;  padding:50px 5%; }
.img_2_box .spec_wrap:after{ content:""; clear:both; display:block;  }
.img_2_box .spec_wrap table{  }
.img_2_box .spec_wrap table caption{ color:#6a493a; font:300 32px/54px 'Noto Sans KR','Malgun gothic'; text-align:left; border-bottom:dotted 2px #6f605c; margin-bottom:20px  }
.img_2_box .spec_wrap table th{ color:#8d654f; font:500 16px/24px 'Noto Sans KR','Malgun gothic'; padding:10px 0 10px 10px; text-align:justify; text-align-last:justify }
.img_2_box .spec_wrap table td{ color:#402d28; font:600 15px/24px 'NanumGothic','Malgun gothic'; padding:10px 0; opacity:.7 }
.img_2_box .delivery_memo{ display:inline-block; border:solid 2px #cbb5af; font:500 15px/22px 'Noto Sans KR','Malgun gothic'; color:#8e5300; padding:5px 20px; margin:10px 0; border-radius:30px; word-break:keep-all }
/* .img_2_box:hover .img_wrap img{ scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);} */

/* 컬러별 BG */
.img_2_box.blue{ background:#1a2e53;  border-color:#16284a  }
.img_2_box.blue .spec_wrap table caption{ color:#5e93ff; border-color:#4c79d2; }
.img_2_box.blue .spec_wrap table th{ color:#5e93ff; }
.img_2_box.blue .spec_wrap table td{ color:#fff; }
.img_2_box.blue .delivery_memo{  color:#5e93ff;  border-color:#4c79d2; }

.img_2_box.brown{ background:#77513b;   }
.img_2_box.brown .spec_wrap table caption{ color:#e3a682; border-color:#c49071; }
.img_2_box.brown .spec_wrap table th{ color:#e3a682; }
.img_2_box.brown .spec_wrap table td{ color:#fff; }
.img_2_box.brown .delivery_memo{  color:#e3a682;  border-color:#c49071; }


.img_2_box.brown{ background:#242424;   }
.img_2_box.brown .spec_wrap table caption{ color:#e3a682; border-color:#c49071; }
.img_2_box.brown .spec_wrap table th{ color:#e3a682; }
.img_2_box.brown .spec_wrap table td{ color:#fff; }
.img_2_box.brown .delivery_memo{  color:#e3a682;  border-color:#c49071; }

/* 정면컷 */
.img_3_box{ position:relative; margin:5px auto; width:100%; height:770px; overflow:hidden;   }
.img_3_box:before{ position:absolute; top:0; right:0; width:90px; height:120px; display:inline-block;  padding:50px 2% 0 2%;content:"정면"; box-sizing:border-box; font:400 22px/22px 'Malgun gothic'; letter-spacing:3px; background:url(/img/black_70.png); z-index:1; color:#fff;  }
.img_3_box:after{ position:absolute; top:80px; width:60px; right:15px; content:"FRONT"; color:#f2b72d; box-sizing:border-box; display:inline-block; border-top:dotted 1px #fff;  font:400 14px/22px 'Malgun gothic';  z-index:2; }
.img_3_box img{ position:absolute; left: 50%; transform: translateX(-50%); top:0; bottom:0; margin-top:auto; margin-bottom:auto;  }

/* 작은 뒷면컷 */
.img_4_box{ position:relative; float:left; width:49.75%; height:600px; overflow:hidden;  }
.img_4_box:before{ position:absolute; top:0; right:0; width:90px; height:120px; display:inline-block;  padding:50px 2% 0 2%;content:"뒷면"; box-sizing:border-box; font:400 22px/22px 'Malgun gothic'; letter-spacing:3px; background:url(/img/black_70.png); z-index:1; color:#fff;  }
.img_4_box:after{ position:absolute; top:80px; width:60px; right:15px; content:"BACK"; color:#f9bc2b; box-sizing:border-box; display:inline-block; border-top:dotted 1px #fff;  font:400 14px/22px 'Malgun gothic'; z-index:2; letter-spacing:2px; }
.img_4_box img{  height:100%; position:absolute; left: 50%; transform: translateX(-50%); transition:.3s ease  }
.img_4_box:hover img{ height:120%; top:0;  }

/* 작은 측면컷 */
.img_5_box{ position:relative; float:right; width:49.75%; height:600px; overflow:hidden;  }
.img_5_box:before{ position:absolute; top:0; right:0; width:90px; height:120px; display:inline-block;  padding:50px 2% 0 2%;content:"측면"; box-sizing:border-box; font:400 22px/22px 'Malgun gothic'; letter-spacing:3px; background:url(/img/black_70.png); z-index:1; color:#fff;  }
.img_5_box:after{ position:absolute; top:80px; width:60px; right:15px; content:"SIDE"; color:#f9bc2b; box-sizing:border-box; display:inline-block; border-top:dotted 1px #fff;  font:400 14px/22px 'Malgun gothic'; z-index:2; letter-spacing:4px; }
.img_5_box img{  height:100%; position:absolute; left: 50%; transform: translateX(-50%); transition:.3s ease  }
.img_5_box:hover img{ height:120%; top:0;  }

/* 큰 측면컷 */
.img_6_box{ position:relative; float:right; width:100%; height:800px; margin:5px auto; overflow:hidden;  }
.img_6_box:before{ position:absolute; top:0; right:0; width:90px; height:120px; display:inline-block;  padding:50px 2% 0 2%;content:"측면"; box-sizing:border-box; font:400 22px/22px 'Malgun gothic'; letter-spacing:3px; background:url(/img/black_70.png); z-index:1; color:#fff;  }
.img_6_box:after{ position:absolute; top:80px; width:60px; right:15px; content:"SIDE"; color:#f9bc2b; box-sizing:border-box; display:inline-block; border-top:dotted 1px #fff;  font:400 14px/22px 'Malgun gothic'; z-index:2;letter-spacing:4px;  }
.img_6_box img{ position:absolute; left: 50%; transform: translateX(-50%); top:0; bottom:0; margin-top:auto; margin-bottom:auto;  }

/* 작은 확대컷 */
.img_7_box{ position:relative; float:left; width:49.75%; height:700px; overflow:hidden;  }
.img_7_box:before{ position:absolute; top:0; right:0; width:90px; height:120px; display:inline-block;  padding:50px 2% 0 2%;content:"확대"; box-sizing:border-box; font:400 22px/22px 'Malgun gothic'; letter-spacing:3px; background:url(/img/black_70.png); z-index:1; color:#fff;  }
.img_7_box:after{ position:absolute; top:80px; width:60px; right:15px; content:"ZOOM"; color:#f9bc2b; box-sizing:border-box; display:inline-block; border-top:dotted 1px #fff;  font:400 14px/22px 'Malgun gothic'; z-index:2;  }
.img_7_box img{  height:100%; position:absolute; left: 50%; transform: translateX(-50%); transition:.3s ease  }
.img_7_box:hover img{ height:130%; left: 10%; top:0; bottom:0; margin-top:auto; margin-bottom:auto; } 

/* 작은 확대컷 */
.img_8_box{ position:relative; float:right; width:49.75%; height:700px; overflow:hidden;  }
.img_8_box:before{ position:absolute; top:0; right:0; width:90px; height:120px; display:inline-block;  padding:50px 2% 0 2%;content:"확대"; box-sizing:border-box; font:400 22px/22px 'Malgun gothic'; letter-spacing:3px; background:url(/img/black_70.png); z-index:1; color:#fff;  }
.img_8_box:after{ position:absolute; top:80px; width:60px; right:15px; content:"ZOOM"; color:#f9bc2b; box-sizing:border-box; display:inline-block; border-top:dotted 1px #fff;  font:400 14px/22px 'Malgun gothic'; z-index:2;  }
.img_8_box img{  height:100%; position:absolute; left: 50%; transform: translateX(-50%); transition:.3s ease  }
.img_8_box:hover img{ position:absolute; left: 0; transform: translateX(0); } 

/* 케이스컷 */
.img_9_box{ position:relative; width:100%; height:750px; overflow:hidden; margin:5px auto; text-align:center; clear:both;  }
.img_9_box:after{ position:absolute; top:3%; right:3%; content:""; background:url(/img/logo_onnuri.png) no-repeat; width:102px; height:80px; background-size:100%; opacity:.8 }
.img_9_box img{  position:absolute; left: 50%; transform: translateX(-50%); top:0; bottom:0; margin-top:auto; margin-bottom:auto; /* 사방중앙정렬 */ } 

/* 배송정보 */
.delivery_box{ position:relative; margin:90px auto; display:inline-block; vertical-align:top; font:500 18px/20px 'Noto Sans KR','Malgun gothic'; letter-spacing:-1px; padding:0 100px; text-align:center  }
.delivery_box b{ color:#965c31; }
.delivery_box:before{ content:''; position:absolute; top:-20px; left:0px; background:url(/img/ddaom_1.png) no-repeat; width:50px; height:42px; }
.delivery_box:after{ content:''; position:absolute; top:0; right:0px; background:url(/img/ddaom_2.png) no-repeat; width:50px; height:42px;  }

/* 케이스컷 */
.img_10_box{ position:relative; /* width:600px; height:600px;  */width:100%; height:750px; overflow:hidden; margin:30px auto 0; text-align:center; clear:both;  }
.img_10_box:after{ position:absolute; bottom:3%; right:3%; content:""; background:url(/img/logo_onnuri_s.png) no-repeat; width:207px; height:44px; background-size:100%; opacity:.8 }
.img_10_box img{  position:absolute; left: 50%; transform: translateX(-50%); top:0; bottom:0; margin-top:auto; margin-bottom:auto; /* 사방중앙정렬 */ }