/* BASIC css start */ #productDetail{position:relative;margin:0 auto;;} /* 상단 */ #productDetail .detailArea {font-size:0; line-height:0; text-align:center; padding:0 0 20px 0;} #productDetail .detailArea:after {content:"";clear:both;display:block;} /******************************************** ============================================= 왼쪽 이미지영역 ============================================= ********************************************/ #imgArea{display:inline-block; vertical-align:top; position:relative; width:45%;} #imgArea img {max-width:100%;} #imgArea .bigImg {margin-bottom:5px;} #imgArea .keyImg{max-width:100%; margin:0 auto;} #imgArea .keyImg .thumbnail{display:inline-block; position:relative; max-width:100%;} #imgArea .keyImg .prdIcon{position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat;} #imgArea .keyImg img{max-width:100%; cursor:pointer;} /* 추가이미지 5개이하 */ #imgArea.addDot {display:inline-block; vertical-align:top; position:relative; width:45%;} #imgArea.addDot ul{font-size:0; line-height:0; letter-spacing:0; padding-bottom:25px;} #imgArea.addDot ul li{display:inline-block; vertical-align:middle; width:100%; margin:0;} #imgArea.addDot ul li img{max-width:100%;} #imgArea.addDot .flickity-page-dots{text-align:center; bottom:0;} #imgArea.addDot .flickity-page-dots li.dot{display:inline-block; width:5px; height:5px; background:#ececec; margin:0 5px; opacity:1;} #imgArea.addDot .flickity-page-dots li.dot.is-selected{background:#8a7c7c;} /* 추가이미지 5개이상 */ #imgArea .listImg{overflow:hidden; width:100%; margin:0 auto 0;} #imgArea .listImg ul{font-size:0; line-height:0; letter-spacing:0;} #imgArea .listImg li{display:inline-block; vertical-align:top; width:20%; margin-right:5px;} #imgArea .listImg li img{max-width:100%; cursor:pointer;} #imgArea .listImg .flickity-viewport {margin-bottom:5px;} #imgArea .carousel-addImg{position:relative;} #imgArea .carousel-addImg li{} #imgArea .carousel-addImg .flickity-prev-next-button{display:block; width:30px; height:100%; transition:all 0.25s ease-in-out; z-index:99 !important; position:absolute; top:0%; opacity:1 !important;} #imgArea .carousel-addImg .flickity-prev-next-button svg{display:none;} #imgArea .carousel-addImg .flickity-prev-next-button.previous{background:url('/design/preservedk/onedesign/images/btn_prev.png') no-repeat center; left:0px;} #imgArea .carousel-addImg .flickity-prev-next-button.next{background:url('/design/preservedk/onedesign/images/btn_next.png') no-repeat center; right:0px;} #imgArea .control{display:none; text-align:center; width:100%; box-sizing:border-box; border:1px solid #f3f3f3; margin-top:30px;} #imgArea .control:after{content:""; display:block; clear:both;} #imgArea .control a{display:block; font-size:21px; line-height:1; padding:15px;} #imgArea .control .prev{float:left; border-right:1px solid #f3f3f3;} #imgArea .control .next{float:right; border-left:1px solid #f3f3f3;} #imgArea .control .zoom{display:none;} #imgArea .xans-product-action{margin:20px auto 0; padding-bottom:23px; display:none;} #imgArea .btnThumb_wrap{position:absolute; top:30px; left:30px; padding-bottom:0; margin:0;} #imgArea .btnThumb{display:inline-block; vertical-align:top; background:rgba(75,75,75,0.4); width:40px; height:37px; box-sizing:border-box; padding:10px 0; border-radius:4px; text-align:center; margin-left:3px; font-size:12px; color:#eee;} #imgArea .btnThumb i{display:block; padding-top:1px; font-size:15px; color:#eee;} #imgArea .btnThumb.tease, #imgArea .btnThumb.bulk{width:auto; padding:10px;} /******************************************** ============================================= 오른쪽 정보영역 ============================================= ********************************************/ #infoArea{position:relative; float:right; width:55%; padding:20px 0 0 50px; 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;} #infoArea table tr.name td div {font-size:18px;line-height:24px;} #infoArea table tr.subname td{padding:0 0 20px !important;} .table-opt table td, .table-opt table td div {color:#666;font-size:12px;} #infoArea td.optionPrice div, #infoArea td.optionPrice div span{color: #c58876 !important; font-weight: 600;} /* 주문수량 */ #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 .prd-btns {padding-top:40px; /*border-top:1px solid #f3f3f3; */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;} #infoArea .prd-btns a:last-child{margin-right:0;} /*버튼크기*/ #infoArea .prd-btns .btn_white{width:20%;} #infoArea .prd-btns .btn_point.buy{width:58%; margin-right:0;} #infoArea .prd-btns .btn_point.sold{width:79%; margin-right:0;} /* 선택 */ .tb-left, .tb-center, .tb-right{padding:0;} #infoArea .table-opt .opt-wrap {width:100%; 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;} #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/preservedk/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;} #MK_innerOptTotal .MK_txt-total{} #MK_innerOptTotal .MK_txt-won, #MK_innerOptTotal .MK_total {font-family:Nunito; font-style:normal; font-size:17px; font-weight:300; letter-spacing:2px; color:#c58876;} /* 소리뷰 */ #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:15px; text-align:right;} #payco_order_btn {padding-top:15px; text-align:right;} /* 스크롤 시 고정영역 */ #btn_info{display:none; position:fixed; left:calc(14.8% - 20px); bottom:140px; width:20px; height:20px; padding:10px; z-index:100; color:#fff; font-size:18px; border-radius:40px; background:rgba(0,0,0,0.12); -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{transform:rotate(45deg);} .detailArea.scroll #infoArea{position:fixed; left:6%; bottom:160px; width:17.6%; min-width:320px; padding:40px 10px 40px 32px; background:#f9f9f9; border-radius:10px; z-index:99; opacity:1; visibility:visible; max-height:700px;-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; } .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:14px !important;} .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;} .detailArea.scroll #infoArea .table-opt .opt-wrap dt{width:85px;} .detailArea.scroll #infoArea .table-opt .opt-wrap dd{width:calc(100% - 85px);} .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;} .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%;} /* 텍스트가이드 있을 경우 */ .cont_guide h3 { padding: 20px 0; font-size:12px;} .cont_guide li {position:relative; padding-left:15px;} .cont_guide li:before { content: '-'; position: absolute; left:2px; top:-2px;} /* 관련상품 */ #prd-related .related-item{padding:0 0 70px 0;} #prd-related .related-item ul{} #prd-related .related-item ul li{display:inline-block; vertical-align:top; width:25%; margin-right:5px; font-size:11px; line-height:18px;} #prd-related .related-item .prd-subname{display:none;} #prd-related .prd-wrap .prd-info .prd-subname {display:none !important;} #prd-related .prd-wrap .prd-info {text-align:center;} #prd-related .prd-wrap .prd-info .prd-name {display: block;border-bottom:0;padding-bottom:5px;margin-bottom: 0;font-size: 12px;color: #666;} #prd-related .prd-wrap .prd-info p {margin-top:0;font-size:10px;line-height:16px;} /* 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/preservedk/onedesign/images/btn_prev.png') no-repeat 0 40%; left:0px;} .carousel-relation .flickity-prev-next-button.next{background:url('/design/preservedk/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:1000px !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 tr.cnt td .reply{background:#f9f9f9; padding:20px; box-sizing:border-box; margin:20px 0 10px; border-radius:10px;} #productDetail .table-slide tr.cnt td .reply img{opacity:0.5; margin:0 10px 0 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;} /* BASIC css end */