/* BASIC css start */ #content {width:1260px; min-width:1260px;} #productDetail{position:relative; margin:86px auto 0;} /* 상단 */ #productDetail .detailArea {font-size:0; line-height:0; text-align:center; padding:0 0 20px 0;} /******************************************** ============================================= 왼쪽 이미지영역 ============================================= ********************************************/ #imgArea{display:inline-block; vertical-align:top; position:relative; width:45%;} #imgArea ul{font-size:0; line-height:0; letter-spacing:0; padding-bottom:7px;} #imgArea ul li{display:inline-block; vertical-align:middle; width:100%; margin:0;} #imgArea ul li img{width:100%;} #imgArea .flickity-page-dots{text-align:center; bottom:0;} #imgArea .flickity-page-dots li.dot{display:inline-block; width:5px; height:5px; background:#ececec; margin:0 5px; opacity:1;} #imgArea .flickity-page-dots li.dot.is-selected{background:#8a7c7c;} #imgArea .addImg {} #imgArea .addImg ul {font-size:0;line-height:0;letter-spacing:0;} #imgArea .addImg ul li {display:inline-block;vertical-align:middle;width:19%;margin-right:1.25%;margin-bottom:1.25%;} #imgArea .addImg ul li:nth-child(5n) {margin-right:0;} #imgArea .addImg ul li img {width:100%;} /******************************************** ============================================= 오른쪽 정보영역 ============================================= ********************************************/ #infoArea{position:relative; display:inline-block; width:55%; padding:20px 0 0 150px; box-sizing:border-box; text-align:left; line-height:16px; letter-spacing:0.3px} #infoArea table{} #infoArea th, #infoArea td{font-weight:normal; padding:3px 0; text-align:left; vertical-align:middle; font-size:11px; line-height:20px;} #infoArea th{width:130px;} #infoArea td{} #infoArea img{vertical-align:middle;} #infoArea td input[type=text]{width:40%;} #infoArea select{width:100%; font-size:11px;} /* 이름, 간략설명 간격 */ #infoArea table tr.name td{padding:0 0 25px !important; font-weight:300 !important; letter-spacing:1.5px; font-size:17px;} #infoArea table tr.name td div {line-height:1.5} #infoArea table tr.subname td{padding:0 0 20px !important; color:#bdbdbd;} /* 주문수량 */ #goods_amount{width:26px !important; height:100% !important;} #infoArea .table-opt .opt-btns{position:relative; display:inline-block; width:40px; height:20px; margin-bottom:3px;} #infoArea .table-opt .opt-btns a img{display:block;} #infoArea .table-opt .opt-btns .btn-up, #infoArea .table-opt .opt-btns .btn-dw{position:absolute; right:0; display:block;} #infoArea .table-opt .opt-btns .btn-up{top:0;} #infoArea .table-opt .opt-btns .btn-dw{bottom:0;} #infoArea .table-opt .opt-spin{position:relative; width:52px; height:15px; border:1px solid #acacac;} #infoArea .table-opt .opt-spin .txt-spin, #infoArea .table-opt .opt-spin .btns{float:left;} #infoArea .table-opt .opt-spin .txt-spin{width:41px; height:13px; padding-left:2px padding-top:2px; border:0; font-size:11px;} #infoArea .table-opt .opt-spin .btns{width:17px; height:15px; border-left:1px solid #aaa;} #infoArea .table-opt .opt-spin .btns a{overflow:hidden; float:left; width:100%; height:8px; text-indent:-999px; background:none;} #infoArea .table-opt .opt-spin .btns a.btn-up{border-bottom:1px solid #aaa; background:url(/images/d3/modern_simple/btn/btn_h5_spin_up.gif) no-repeat 50% 50%;} #infoArea .table-opt .opt-spin .btns a.btn-dw{background:url(/images/d3/modern_simple/btn/btn_h5_spin_dw.gif) no-repeat 50% 50%;} #infoArea td.color span {display:inline-block; float: left; width:15px; height:15px; border:1px solid #dddddd; margin-right: 5px;margin-bottom:5px } /* 구입버튼 */ #infoArea .prd-btns {padding-top:40px; font-size:0; line-height:0; letter-spacing:0; box-sizing:border-box;} #infoArea .prd-btns a {display:inline-block; vertical-align:top; margin-right:1%; padding:11px 0; line-height:20px; box-sizing:border-box; letter-spacing:2px; font-weight:300; text-align:center; border-color:#000; color:#000} #infoArea .prd-btns a:last-child{margin-right:0;} /*버튼크기*/ #infoArea .prd-btns .btn_white{width:20%;} #infoArea .prd-btns .btn_point.buy{width:35%; background:#000; color:#fff;} #infoArea .prd-btns .btn_point.sold{width:79%;background:#000; color:#fff;} /* 선택 */ .tb-left, .tb-center, .tb-right{padding:0;} #infoArea .table-opt .opt-wrap {width:75%; border-top:1px solid #f3f3f3; margin-top:17px;} #infoArea .table-opt .opt-wrap .tit {font-size:0; line-height:0;} #infoArea .table-opt .opt-wrap dl {font-size:0; line-height:0; letter-spacing:0; border-bottom:1px solid #f3f3f3;} #infoArea .table-opt .opt-wrap dt, #infoArea .table-opt .opt-wrap dd{display:inline-block; padding:5px 0; font-size:11px; line-height:20px; vertical-align:middle;} #infoArea .table-opt .opt-wrap dt {width:130px;} #infoArea .table-opt .opt-wrap dd {width:calc(100% - 130px);} #infoArea .table-opt .opt-wrap dd select{border:0; background:#f3f3f3;} #infoArea .table-opt .opt-wrap .selWrap{text-align:right; margin-top:10px;} #infoArea .table-opt .opt-wrap .selWrap .sel-btn{margin:0; background:#efefef;} #infoArea .table-opt .opt-wrap select{width:100%;} #infoArea .table-opt .opt-wrap .opt-btns{position:relative; width:65px; height:23px} #infoArea .table-opt .opt-wrap .opt-btns input{position:absolute; top:0; left:0; width:40px; height:17px; border:1px solid #f3f3f3; text-align:right;} #infoArea .table-opt .opt-wrap .opt-btns .btn-up{position:absolute; top:2px; right:0;} #infoArea .table-opt .opt-wrap .opt-btns .btn-dw{position:absolute; bottom:2px; right:0;} #infoArea .table-opt .opt-wrap dl .opt-count select{float:left; width:180px;} #infoArea .table-opt .opt-wrap dl .opt-count .opt-btns{float:left; width:56px; margin-left:5px;} /* 상품 상세 옵션 */ .MK_not_choice{color:red;} .MK_optAddWrap{margin:0; padding:0;} .MK_optAddWrap{} .MK_optAddWrap li{list-style:none;} /* 옵션선택 */ #MK_optAddList{overflow:hidden; *zoom:1;} #MK_optAddList li{float:left; width:100%; margin-top:5px;} #MK_optAddList .MK_tit, #MK_optAddList .MK_div, #MK_optAddList .MK_st{float:left;} #MK_optAddList .MK_tit, #MK_optAddList .MK_div{font-size:11px; line-height:16px;} #MK_optAddList .MK_tit{width:65px; margin-right:5px;} #MK_optAddList .MK_div{width:5px; text-align:center;} #MK_optAddList .MK_st{width:205px;} #MK_optAddList .MK_st .MK_btn-add{cursor:pointer;} #MK_optAddList .MK_st select{margin-left:5px; width:195px; height:18px;} /* 옵션선택 */ #MK_optAddListPP{overflow:hidden; *zoom:1;} #MK_optAddListPP .MK_tit, #MK_optAddListPP .MK_st{float:left; width:auto;} #MK_optAddListPP .MK_tit{margin-right:5px; margin-top:3px;} /* 옵션 선택 결과 리스트 */ #MK_innerOptWrap{margin-top:10px;} #MK_innerOptWrap #MK_innerOptScroll{background:#f9f9f9; border-radius:10px; width:415px;} #MK_innerOptWrap #MK_innerOptScroll.limit{position:relative; height:150px; overflow-y:auto;} #MK_innerOptWrap .MK_inner-opt-cm li{padding:5px 0; border-top:1px solid #f3f3f3; word-wrap:break-word; word-break:break-all; position:relative; font-size:0; line-height:0; letter-spacing:0;} #MK_innerOptWrap .MK_inner-opt-cm li:first-child{padding-top:15px; border-top:0;} #MK_innerOptWrap .MK_inner-opt-cm li:last-child{padding-bottom:15px;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name, #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl, #MK_innerOptWrap .MK_inner-opt-cm li .MK_price, #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del{display:inline-block; vertical-align:middle; width:20%; font-size:11px; line-height:24px; letter-spacing:0.3px; font-weight:300; box-sizing:border-box; position:relative;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name{width:calc(100% - 200px); text-align:left; font-weight:400; padding-left:20px;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl{width:40px;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_price{width:120px; text-align:right;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del{width:40px; text-align:right; padding-right:20px;} /* 수량 */ #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl .basic_option{width:24px; height:20px;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a{display:block; height:9px;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a img{display:block;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a.MK_btn-up, #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a.MK_btn-dw{position:absolute; right:0;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a.MK_btn-up{top:0;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a.MK_btn-dw{bottom:0;} /* 삭제버튼 */ #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del img{opacity:0;} #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del:before{content:""; width:20px; height:20px; position:absolute; left:0; top:0; background:url('/design/grey82/onedesign/images/btn_del.png') no-repeat center; opacity:1;} /* 사용자 입력 인풋박스 (color, size )*/ .MK_optAddWrap .MK_inner-opt-cm li .MK_txt_uinput{width:200px;} /* 기본옵션 */ #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl input.MK_count{width:30px; height:16px; line-height:16px; padding:2px 0 0 2px;} /* 개별옵션 */ #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl input.MK_count{width:30px; height:16px; line-height:16px; padding:2px 0 0 2px;} /* 총합계 */ #MK_innerOptTotal{padding:15px 0; color:#666; font-size:0; text-align:right; border-top: 1px solid #f3f3f3; width:75%;} #MK_innerOptTotal .MK_txt-total{} #MK_innerOptTotal .MK_txt-won {color:#666; letter-spacing:1px; font-size:15px; font-weight:normal;} #MK_innerOptTotal .MK_total {font-family:Nunito; font-style:normal; font-size:17px; font-weight:300; letter-spacing:2px; color:#dab799;} /* 소리뷰 */ #sorivu{position:relative; margin-top:40px;} /* 상품 일반정보(상품정보제공 고시) */ #productWrap{margin:10px 0;} #productWrap h3.tb-tit{margin-bottom:10px; text-align:left;} #productWrap table{width:100%; font-size:12px; border-collapse:collapse; border-width:1px 0 1px 0; border-color:#b4b4b4; border-style:solid; table-layout:fixed;} #productWrap table th{border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; background-color:#f9f9f9; color:#3b3b3d; text-align:left; padding:10px 0 10px 15px;} #productWrap table td{color:#8b8b8b; border-bottom:1px solid #e0e0e0; word-break:break-all; text-align:left; padding:10px 0 10px 17px;} #nhn_btn {padding-top:40px; padding-bottom:30px;} #payco_order_btn {padding-top:10px;} /* 스크롤 시 고정영역 */ #btn_info{ display: none; position: fixed; right:160px; bottom: 110px; width:140px; height: 28px; padding: 10px; z-index: 100; border-radius: 40px; border: 1px solid #000; background: #000; color: #fff; font-size: 10px; line-height: 28px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; text-align: center;} #btn_info i {transform:rotate(0);display:inline-block;line-height:28px;-webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;} #btn_info.show i {transform:rotate(45deg);-webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;} .detailArea.scroll #infoArea{position:fixed; right:70px; bottom:200px; width:300px; min-width:343px; padding:40px 10px 40px 32px; background:#f9f9f9; border-radius:10px; z-index:99;max-height:528px; -webkit-transition:opacity 0.3s ease-in-out; -moz-transition:opacity 0.3s ease-in-out; -o-transition:opacity 0.3s ease-in-out; transition:opacity 0.3s ease-in-out;opacity:0;visibility:hidden;} .detailArea.scroll #infoArea.show {opacity:1;visibility:visible;} .detailArea.scroll #infoArea.mCS_no_scrollbar{padding:35px;} .detailArea.scroll #infoArea.hide{opacity:0; visibility:hidden;} .detailArea.scroll #infoArea th, .detailArea.scroll #infoArea td{line-height:18px;} .detailArea.scroll #infoArea table tr.name td{padding-bottom:20px !important; font-size:12px !important;letter-spacing:0;} .detailArea.scroll #infoArea table tr.subname td{padding-bottom:15px !important;} .detailArea.scroll #infoArea .table-opt table colgroup col:first-child{width:75px;} .detailArea.scroll #infoArea .table-opt .opt-wrap{margin-top:12px;width:100%;} .detailArea.scroll #infoArea .table-opt .opt-wrap dt{width:75px;} .detailArea.scroll #infoArea .table-opt .opt-wrap dd{width:calc(100% - 75px);} .detailArea.scroll #infoArea .prd-btns a{display:block; width:100% !important; margin:5px 0 0 0; font-size:10px;} .detailArea.scroll #infoArea #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name{padding-left:0; width:65%;} .detailArea.scroll #infoArea #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl{display:none;} .detailArea.scroll #infoArea #MK_innerOptWrap .MK_inner-opt-cm li .MK_price{width:35%;} .detailArea.scroll #infoArea #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del{display:none;} .detailArea.scroll #infoArea #MK_innerOptTotal{padding:5px 0;width:100%;} .detailArea.scroll #infoArea td input[type=text]{width:80%;} .detailArea.scroll #infoArea .table-opt .opt-btns{padding-left:10px;} /******************************************** ============================================= 하단 ============================================= ********************************************/ /* 탭 */ #productDetail .detailTab{padding-top:50px; margin-bottom:50px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-size:0; line-height:0; letter-spacing:0; border-bottom:1px solid #f4f4f4; text-align:left;} #productDetail .detailTab li{display:inline-block; vertical-align:middle; font-size:11px; line-height:20px;} #productDetail .detailTab li a{display:block; padding:10px 60px 10px 0; text-decoration:none; text-align:left; letter-spacing:1px; color:#d8d8d8; text-transform:uppercase; font-weight:300; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out;} #productDetail .detailTab li.selected a{position:relative; color:#666; box-sizing:border-box; letter-spacing:2px;} #productDetail .detailTab li.selected a:before{content:""; position:absolute; background-color:#afafaf; width:15px; height:1px; left:0px; top:-2px;} #productDetail .detailTab li a:hover{color:#afafaf;} #prd-review .detailTab, #prd-qna .detailTab{margin-bottom:0;} /* 상품 상세정보 */ #productDetail #prd-detail{margin:50px 0 140px; width:100%; text-align:center;} #productDetail #prd-detail table{table-layout:auto;} #productDetail #prd-detail img{max-width:100%;} /* 관련상품 */ #productDetail .related-item{padding:70px 0;} #productDetail .related-item ul{} #productDetail .related-item ul li{display:inline-block; vertical-align:top; width:18%; margin-right:5px; font-size:11px; line-height:18px;} #productDetail .related-item .prd-subname{display:none;} /* 5개 이상일 때 */ .carousel-relation{position:relative; box-sizing:border-box;} .carousel-relation.pd{padding:0 40px;} .carousel-relation li{} .carousel-relation .flickity-prev-next-button{display:block; width:40px; height:100%; transition:all 0.25s ease-in-out; z-index:99 !important; position:absolute; top:0%; opacity:1 !important;} .carousel-relation .flickity-prev-next-button svg{display:none;} .carousel-relation .flickity-prev-next-button.previous{background:url('/design/grey82/onedesign/images/btn_prev.png') no-repeat 0 40%; left:0px;} .carousel-relation .flickity-prev-next-button.next{background:url('/design/grey82/onedesign/images/btn_next.png') no-repeat 100% 40%; right:0px;} /* 평점형리뷰 */ /* #productDetail .review-write{margin-bottom:70px;} #productDetail .review-write th, #productDetail .review-write td{padding:10px; border-bottom:1px solid #f3f3f3;} #productDetail .review-write td .point input{margin-left:5px;} #productDetail .review-write th{font-weight:normal;} textarea.MS_review_content_box{width:1070px !important; height: 80px;} .review-write a.btn_point{width:90px; margin-left:10px; height:85px; line-height:85px;} #productDetail .review-list tr td.btns, #productDetail .review-list tr:last-child td{border-bottom:0;} */ /* 테이블 */ #productDetail .table-slide {} #productDetail .table-slide td .nodata{padding:10px 0;} #productDetail .table-slide tr.cnt{display:none;} #productDetail .table-slide tr.cnt td{cursor:default; padding:20px 0;} #productDetail .table-slide tr.cnt td img{max-width:100%; margin-bottom:10px;} #productDetail .table-slide tr.nbg td{background-image:none;} #productDetail .table-slide tr.reply .tb-txt{padding-left:30px; background:url(/images/d3/modern_simple/common/bull_reply.gif) no-repeat 10px 0;} #productDetail .table-slide .btns{text-align:right; font-size:0; line-height:0; margin-top:10px;} #productDetail .table-slide .btns a {display:inline-block; padding:4px 12px 2px; line-height:20px; letter-spacing:0.5px; font-size:11px; margin-left:10px;} /* 통옵 추가 구성 상품 */ .table-opt td.add-option-tit { padding:15px 0 0; border-top:1px solid #e4e4e5; color:#000; font-size:14px; } .table-opt tr.add-option-start > td .add-option-img, .table-opt tr.add-option-start > td .add-option-wrap { border-bottom:1px dashed #e4e4e5; } .table-opt td.add-option-img { padding-top:10px; border-bottom:1px solid #e4e4e5; vertical-align:top; } .table-opt td.add-option-img .thumb-s img { max-width:100%; } .table-opt td.add-option-wrap { padding-top:10px; border-bottom:1px solid #e4e4e5; } .table-opt td.add-option-wrap .prd-icon, .table-opt td.add-option-wrap .tit-prd { padding-left:20px; padding-top:0; } .table-opt td.add-option-wrap .table-opt { padding-left:20px; } .table-opt td.add-option-wrap .table-opt td select.basic_option, .table-opt td.add-option-wrap .table-opt td select.addition_option { width:310px; } .table-opt td.add-option-wrap .table-opt td input.basic_option, .table-opt td.add-option-wrap .table-opt td input.addition_option { width:306px; height:22px; line-height:24px; } .table-opt td.add-option-wrap .table-opt td .opt-wrap { padding:5px 0 0 0; } .table-opt td.add-option-wrap .table-opt td .opt-wrap .tit { display:none; } .table-opt td.add-option-wrap .table-opt td .opt-wrap dd { width: 110px; } .table-opt td.add-option-wrap .table-opt td .opt-wrap select { width: 100px; } .table-opt td.add-option-wrap .table-opt td .opt-wrap input { width: 205px; } .table-opt tr.add-option-end .MK_p-tit { display:block; width:90%; height:100%; line-height:12px; color:#000; font-weight:bold; } .table-opt tr.add-option-end .MK_price { top:40px; right:0; } .table-opt tr.add-option-end .MK_btn-del { top:0; } #imgArea .addImg {display:none; } #infoArea {padding-top:0} /* 상세 썸네일 수정 */ #imgArea {width:567px} #infoArea {width:693px; padding-left:150px} iframe[src^="https://player.vimeo.com"] {display: none; } /* BASIC css end */