/* **************************************** * ●●●●● 후기기능 개편 : 2020-04-24 : ARA * **************************************** */ /* ●●●●●●●●●● 노토체 */ @font-face { font-family: "Noto"; font-weight: 100; font-style: normal; src: url('webfont/NotoSansCJKkr-Thin.woff.eot'); src: url('webfont/NotoSansCJKkr-Thin.woff.eot?#iefix') format('embedded-opentype'), url('webfont/NotoSansCJKkr-Thin.woff2') format('woff2'), url('webfont/NotoSansCJKkr-Thin.woff') format('woff'); } @font-face { font-family: "Noto"; font-weight: 300; font-style: normal; src: url('webfont/NotoSansCJKkr-Light.woff.eot'); src: url('webfont/NotoSansCJKkr-Light.woff.eot?#iefix') format('embedded-opentype'), url('webfont/NotoSansCJKkr-Light.woff2') format('woff2'), url('webfont/NotoSansCJKkr-Light.woff') format('woff'); } @font-face { font-family: "Noto"; font-weight: 400; font-style: normal; src: url('webfont/NotoSansCJKkr-Regular.woff.eot'); src: url('webfont/NotoSansCJKkr-Regular.woff.eot?#iefix') format('embedded-opentype'), url('webfont/NotoSansCJKkr-Regular.woff2') format('woff2'), url('webfont/NotoSansCJKkr-Regular.woff') format('woff'), url('webfont/NotoSansCJKkr-Regular.ttf') format('truetype'); } @font-face { font-family: "Noto"; font-weight: 500; font-style: normal; src: url('webfont/NotoSansCJKkr-Medium.woff.eot'); src: url('webfont/NotoSansCJKkr-Medium.woff.eot?#iefix') format('embedded-opentype'), url('webfont/NotoSansCJKkr-Medium.woff2') format('woff2'), url('webfont/NotoSansCJKkr-Medium.woff') format('woff'); } @font-face { font-family: "Noto"; font-weight: 700; font-style: normal; src: url('webfont/NotoSansCJKkr-Bold.woff.eot'); src: url('webfont/NotoSansCJKkr-Bold.woff.eot?#iefix') format('embedded-opentype'), url('webfont/NotoSansCJKkr-Bold.woff2') format('woff2'), url('webfont/NotoSansCJKkr-Bold.woff') format('woff'); } @font-face { font-family: "Noto"; font-weight: 900; font-style: normal; src: url('webfont/NotoSansCJKkr-Black.woff.eot'); src: url('webfont/NotoSansCJKkr-Black.woff.eot?#iefix') format('embedded-opentype'), url('webfont/NotoSansCJKkr-Black.woff2') format('woff2'), url('webfont/NotoSansCJKkr-Black.woff') format('woff'); } /* 공통 */ .n20_rv {margin-top:-25px;} /* .n20_rv * {font-family:Noto Sans CJK KR,'Noto',Sans-serif;} */ /* 별점 공통 */ .rv_star {display:inline-block; background-repeat:no-repeat !important; background-position:left bottom !important; position:relative; overflow:hidden; text-align:left !important} .rv_mark {display:inline-block; background-repeat:no-repeat !important; background-position:left top !important; background-color:#fff !important; height:100%; width:100%;} /* 단락타이틀 */ .rv_tit {display:flex; align-items: center; margin-bottom:20px; position:relative;} .rv_tit img {margin-right:10px;} .rv_tit .tx {color:#000; font-size:25px; letter-spacing:-1px; font-weight:500; line-height:1;} .rv_tit .tx strong {color:#0ba2ff; font-family:"Manrope";} .rv_tit .tx em {font-family:"Manrope";} /* 내용없음 */ .rv_none {text-align:center; font-size:14px; color:#aaa; padding:30px; font-weight:300;} .rv_tit .rv_arrange {position:absolute; right:-20px; top:0;} .rv_arrange {display:inline-block;} .rv_arrange ul {overflow:hidden; display:inline-block;} .rv_arrange li {list-style:none; font-size:0px; display:inline-block; position:relative;} .rv_arrange li+ li:before {content:""; width:1px; height:12px; background:#ddd; position:absolute; left:0; top:50%; margin-top:-6px;} .rv_arrange .btn {font-size:14px; color:#aaa; letter-spacing:-1px; padding:5px 20px;} .rv_arrange .hit .btn {color:#000; font-weight:600;} /* **************************************** * ◆ 후기등록버튼 * **************************************** */ .n20_rv .rv_write {text-align:right;margin-right:5px;} .n20_rv .rv_write .btn_write {border:1px solid #000; background-color:#fff; padding:0 30px; border-radius:20px; } .n20_rv .rv_write .btn_write strong {height:40px; line-height:40px; color:#000; font-size:16px; letter-spacing:-1px; display:inline-block; padding-left:15px; font-weight:500; } .n20_rv .rv_write .btn_write strong {background:transparent url('../images/n_review/rv_write.png') left center no-repeat; padding-left:25px; } .n20_rv .rv_write .btn_write strong {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .n20_rv .rv_write .btn_write:hover {background:#000;} .n20_rv .rv_write .btn_write:hover strong {background:transparent url('../images/n_review/rv_write2.png') left center no-repeat; color:#fff;} /* .n20_rv .rv_write {text-align:right} .n20_rv .rv_write .btn_write {background:transparent url('../images/n_review/rv_write.png') left bottom no-repeat; padding-left:15px;} .n20_rv .rv_write .btn_write strong {height:30px; line-height:33px; color:#000; font-size:15px; letter-spacing:-1px; border-bottom:1px solid #000; display:inline-block; padding-left:15px; font-weight:500;} .n20_rv .rv_write .btn_write strong {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .n20_rv .rv_write .btn_write:hover strong {padding-left:25px;} */ /* **************************************** * ◆◆◆ 작성하기 클릭 * **************************************** */ .n20_rv .rp_form {position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000; background:rgba(0,0,0,0.5); display:none; justify-content: center; align-items: center;} .n20_rv .rp_form .inner {background:#fff; width:660px;} .n20_rv .rp_form .tit {background:#0ba2ff; height:70px; display:flex; align-items: center;} .n20_rv .rp_form .tit dt {padding-left:40px; color:#fff; font-size:23px; letter-spacing:-1px; font-weight:500; margin-right:auto;} .n20_rv .rp_form .tit dd {width:70px; margin-left: auto;} .n20_rv .rp_form .tit .btn_close {width:70px; height:70px; background:transparent url('../images/n_review/close_form.png') center center no-repeat; background-size:px;} .n20_rv .rp_form .form_box {margin-top:20px;} .n20_rv .rp_form .form_box dl {margin-top:20px; padding:0 40px;} .n20_rv .rp_form .form_box dt strong {color:#000; font-size:15px; line-height:1; letter-spacing:-0.5px; position:relative;} .n20_rv .rp_form .form_box .ess strong:before {content:"*"; position:absolute; left:-11px; top:3px; color:#ff5400; font-weight:500; font-size:20px;} .n20_rv .rp_form .form_box dd {margin-top:10px;} .n20_rv .rp_form .form_box .this_star {border-bottom:1px solid #ebebeb; padding-bottom:20px;} .n20_rv .rp_form .form_box textarea.design {box-sizing:border-box; width:100%; border:1px solid #ccc; padding:15px; font-size:15px; height:120px; color:#333; overflow-x:hidden; overflow-y:auto;} .n20_rv .rp_form .form_box textarea.design:focus {border-color:#0ba2ff;} .n20_rv .rp_form .star_list {background:transparent url('../images/n_review/star_form.png') left bottom no-repeat; height:38px; display:inline-block; font-size:0px; position:relative; overflow:hidden;} .n20_rv .rp_form .star_list ul {position:relative;} .n20_rv .rp_form .star_list li {float:left;} .n20_rv .rp_form .star_list .score_in {background:#fff url('../images/n_review/star_form.png') left top no-repeat; height:100%; width:0; position:absolute; left:0; top:0;} .n20_rv .rp_form .star_list.score_1 .score_in {width:20%;} .n20_rv .rp_form .star_list.score_2 .score_in {width:40%;} .n20_rv .rp_form .star_list.score_3 .score_in {width:60%;} .n20_rv .rp_form .star_list.score_4 .score_in {width:80%;} .n20_rv .rp_form .star_list.score_5 .score_in {width:100%;} .n20_rv .rp_form .star {display:block; float:none; width:50px; height:38px; overflow:hidden;} .n20_rv .rp_form .star input {position:absolute; left:50%; top:0; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); width:1px; height:1px;} .n20_rv .rp_form .type_list {overflow:hidden;} .n20_rv .rp_form .type_list li {float:left;} .n20_rv .rp_form .type_list li+ li {padding-left:10px;} .n20_rv .rp_form .type {display:block; float:none; position:relative;} .n20_rv .rp_form .type input {position:absolute; left:50%; top:0; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); width:1px; height:1px;} .n20_rv .rp_form .type .ti {color:#999; font-size:15px; display:block; border:1px solid #eaeaea; border-radius:3px; height:35px; line-height:33px; box-sizing:border-box; width:80px; text-align:center;} .n20_rv .rp_form .type .ti {background:#f5f5f5;} .n20_rv .rp_form .type input:checked+ .ti {border-color:#0ba2ff; color:#0ba2ff; background:#fff;} .n20_rv .rp_form .img_list {overflow:hidden;} .n20_rv .rp_form .img_list li {float:left; overflow:hidden;} /* .n20_rv .rp_form .img_list li+ li { padding-left:10px;} */ .n20_rv .rp_form .img_list .btn_add {width:60px; font-size:0px; background:#333 url('../images/n_review/ic_add.png') center center no-repeat;} .n20_rv .rp_form .img_list .btn_add img {width:100%;} .n20_rv .rp_form .img {position:relative; overflow:hidden; width:60px; height:60px; margin-right:10px;} .n20_rv .rp_form .img .btn_photo_box {box-sizing:border-box; position:absolute; left:0; top:0; width:100%; height:100%; z-index:3} .n20_rv .rp_form .img .input_photo {color:transparent; background:transparent; position:absolute; left:0; top:0; width:100%; z-index:555; visibility:hidden;} .n20_rv .rp_form .img .img_preview {width:60px !important;} .n20_rv .rp_form .img .thumb {border:1px dashed #ccc; box-sizing:border-box; display:block; position:relative; overflow:hidden; width:60px; height:60px;} .n20_rv .rp_form .img .thumb {background:#f3f3f3 url('../images/n_review/no_photo.png') center center no-repeat;} .n20_rv .rp_form .img .thumb img {width:100%; float:left; width:60px; height:60px;} .n20_rv .rp_form .img .thumb .before {position:absolute; left:0; top:50%; text-align:center; width:100%; font-size:30px; color:#ccc; margin-top:-15px; z-index:1} .n20_rv .rp_form .img .photo_box {overflow:hidden; font-size:0px; position:absolute; left:0; top:0; z-index:2} .n20_rv .rp_form .img .photo_box img {width:100%; float:left;} .n20_rv .rp_form .img .img_del {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5) url('../images/n_review/delete.png') center center no-repeat; display:none; z-index:10} .n20_rv .rp_form .img:hover .img_del {display:block;} .n20_rv .rp_form .btn_box {margin-top:25px;} .n20_rv .rp_form .btn_box ul {display:flex; border-top:1px solid #ddd;} .n20_rv .rp_form .btn_box li {flex:1;} .n20_rv .rp_form .btn_box li+ li {border-left:1px solid #ddd;} .n20_rv .rp_form .btn_box .btn {display:block; text-align:center; font-size:17px; color:#888; letter-spacing:-1px; height:60px; line-height:60px;} .n20_rv .rp_form .btn_box .btn.color {color:#000; font-weight:600;} .n20_rv .rp_form .btn_box .btn:hover {background:#f5f5f5;} .n20_rv .rp_form .tip {padding:0 40px; font-size:13px; color:#aaa; letter-spacing:-0.5px; margin-top:15px;} .n20_rv .rp_form .tip strong {color:#ff5400; font-weight:600; font-size:19px;} /* **************************************** * ◆◆◆ 후기통계 * **************************************** */ .n20_rv .rv_total {margin-top:15px;} .n20_rv .rv_total dl.box {display:table; width:94%; box-sizing:border-box; table-layout:fixed;} .n20_rv .rv_total dl.box .boxi {display:table-cell; vertical-align:middle; padding:0px 0;} .n20_rv .rv_total dt.boxi {text-align:center;} .n20_rv .rv_total .average {display:inline-block;} .n20_rv .rv_total .average .num {font-size:55px; font-weight:600; color:#000; line-height:1; margin-bottom:15px; font-family:"Manrope";} .n20_rv .rv_total .average .rv_star {background-image:url('../images/n_review/star_total.png'); height:25px; width:145px;} .n20_rv .rv_total .average .rv_mark {background-image:url('../images/n_review/star_total.png'); background-color:#fff !important;} .n20_rv .rv_total .average .who {margin-top:10px; color:#888; font-size:15px;} .n20_rv .rv_total .graph {display:inline-block;} .n20_rv .rv_total .graph .result {text-align:center; color:#333; font-size:15px;margin-top:10px; margin-bottom:10px; line-height:1; letter-spacing:-0.5px; font-weight:500;} .n20_rv .rv_total .graph dl {display:table;} .n20_rv .rv_total .graph dl dt, .n20_rv .rv_total .graph dl dd {display:table-cell; vertical-align:middle; padding:2px 5px; color:#888; font-size:12px;} .n20_rv .rv_total .graph .rv_star {background-image:url('../images/n_review/star_graph.png'); height:10px; width:58px; text-align:left !important} .n20_rv .rv_total .graph .rv_mark {background-image:url('../images/n_review/star_graph.png'); background-color:#f8f9fb !important;} .n20_rv .rv_total .graph .bar {display:inline-block; width:290px; height:4px; background:#e2e5ec;} .n20_rv .rv_total .graph .bar_in {background:#ffb400; width:100%; height:4px;} /* **************************************** * ◆◆◆ 포토후기 * **************************************** */ .n20_rv .rv_photo {margin-top:50px;} .n20_rv .rv_photo .rv_tit {margin-bottom:30px;} .n20_rv .rv_photo_list {margin:0 -12px;} .n20_rv .rv_photo_list ul {display:table; width:100%; box-sizing:border-box; table-layout:fixed; border-collapse:separate; border-spacing:12px 0;} .n20_rv .rv_photo_list li {display:table-cell; vertical-align:middle; position:relative;} .n20_rv .rv_photo_list .click_photo {display:block; border-radius:5px; overflow:hidden;} .n20_rv .rv_photo_list .click_photo .img {display:block; background-repeat:no-repeat !important; background-size:auto 100%; background-position:center center; position:relative;} .n20_rv .rv_photo_list .click_photo .img:before {content:""; width:100%; height:100%; background:rgba(0,0,0,0.05); position:absolute; left:0; top:0; z-index:1} .n20_rv .rv_photo_list .click_photo .img:before {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .n20_rv .rv_photo_list .click_photo img {width:100%;} .n20_rv .rv_photo_list .click_photo .icon {background:#fff; height:2px; width:0; position:absolute; left:50%; top:50%; z-index:2; margin-top:-1px;} .n20_rv .rv_photo_list .click_photo .icon {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .n20_rv .rv_photo_list .click_photo .icon2 {background:#fff; height:0; width:2px; position:absolute; left:50%; top:50%;z-index:2; margin-left:-1px;} .n20_rv .rv_photo_list .click_photo .icon2 {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .n20_rv .rv_photo_list .click_more {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; text-align:center; background:rgba(0,0,0,0.6); border-radius:5px; } .n20_rv .rv_photo_list .click_more {display:flex; align-items: center; justify-content: center; } .n20_rv .rv_photo_list .click_more strong {color:#fff; font-weight:600; font-size:27px; font-family:"Manrope";} .n20_rv .rv_photo_list .click_more+ .icon {display:none !important;} .n20_rv .rv_photo_list .click_more+ .icon+ .icon2 {display:none !important;} .n20_rv .rv_photo_list .click_photo:hover .img:before {background:rgba(0,0,0,0.6);;} .n20_rv .rv_photo_list .click_photo:hover .icon {width:41px; margin-left:-21px; } .n20_rv .rv_photo_list .click_photo:hover .icon2 {height:41px; margin-top:-21px; } /* **************************************** * ◆◆◆ 포토후기 전체클릭 * **************************************** */ .n20_rv .rp_all {position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000; background:rgba(0,0,0,0.5); display:flex; justify-content: center; align-items: center; display:none;} .n20_rv .rp_all .inner {background:#fff; width:1100px; height:700px; display:inline-block; position:relative;} .n20_rv .rp_all .btn_close {position:absolute; right:0; top:0; background:transparent url('../images/n_review/close_pop.png') center center no-repeat; width:60px; height:60px; margin:20px;} .n20_rv .rp_all .prevnext {position:absolute; top:50%; margin-top:-25px;} .n20_rv .rp_all .prevnext a {width:50px;} .n20_rv .rp_all .prevnext .icon {display:block; height:50px; } .n20_rv .rp_all .prevnext.prev {left:50%; margin-left:-600px;} .n20_rv .rp_all .prevnext.next {right:50%; margin-right:-600px;} .n20_rv .rp_all .prevnext.prev .icon {background:transparent url('../images/n_review/prev.png') left center no-repeat;} .n20_rv .rp_all .prevnext.next .icon {background:transparent url('../images/n_review/next.png') right center no-repeat;} .n20_rv .rp_all .prevnext.no_click {opacity: 0.2; filter: alpha(opacity=20); -ms-filter:alpha(opacity=20);} .n20_rv .rp_all .thumb_rolling {background:#111; width:740px; height:105px; position:absolute; left:0; bottom:0; text-align:center;} .n20_rv .rp_all .thumb_rolling .pagi {font-size:14px; font-weight:500; height:35px; display:flex; color:#666; align-items: center; justify-content: center; } .n20_rv .rp_all .thumb_rolling .pagi strong {color:#fff;} .n20_rv .rp_all .thumb_rolling .prevnext {top:35px; margin-top:0px;} .n20_rv .rp_all .thumb_rolling .prevnext a {width:30px;} .n20_rv .rp_all .thumb_rolling .prevnext .icon {display:block; height:55px; } .n20_rv .rp_all .thumb_rolling .prevnext.prev {left:20px; margin-left:0;} .n20_rv .rp_all .thumb_rolling .prevnext.next {right:20px; margin-right:0;} .n20_rv .rp_all .thumb_rolling .prevnext.prev .icon {background:transparent url('../images/n_review/thumb_prev.png') left center no-repeat;} .n20_rv .rp_all .thumb_rolling .prevnext.next .icon {background:transparent url('../images/n_review/thumb_next.png') right center no-repeat;} .n20_rv .rp_all .thumb_list {padding:0 40px;} .n20_rv .rp_all .thumb_list ul {display:table; width:100%; box-sizing:border-box; table-layout:fixed; border-collapse:separate; border-spacing:10px 0;} .n20_rv .rp_all .thumb_list li {display:table-cell; vertical-align:middle; background:#333;} .n20_rv .rp_all .thumb_list .click_photo {display:block; overflow:hidden;} .n20_rv .rp_all .thumb_list .click_photo .img {display:block; background-repeat:no-repeat !important; background-size:auto 100%; background-position:center center; position:relative;} .n20_rv .rp_all .thumb_list .click_photo .img:before {content:""; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0; z-index:1; box-sizing:border-box; -webkit-transform: translateZ(0)} .n20_rv .rp_all .thumb_list .click_photo img {width:100%;} .n20_rv .rp_all .thumb_list .active .click_photo .img:before {background:rgba(0,0,0,0); border:2px solid #0ba2ff;} .n20_rv .rp_all .thumb_list .click_photo:hover .img:before {background:rgba(0,0,0,0.1);} .n20_rv .rp_all .rpa_photo {float:left; background-color:#f2f2f2;} .n20_rv .rp_all .rpa_photo .img {width:740px; height:595px; overflow:hidden; background-size:auto 100% ; background-repeat:no-repeat; background-position:center center;} .n20_rv .rp_all .rpa_conts {float:right; width:360px; height:700px; display:flex; position:relative; overflow:hidden;} /* **************************************** * ◆◆◆ 전체후기 (베스트후기) * **************************************** */ .n20_rv .rv_rev {margin-top:50px;} .n20_rv .rv_rev .rv_photo_list {margin-top:15px;} .n20_rv .rv_rev .rv_photo_list ul {width:auto;} .n20_rv .rv_rev .rv_photo_list li {width:100px;} .n20_rv .rv_nor_list {} .n20_rv .rv_nor_list ul {} .n20_rv .rv_nor_list .li {border-top:1px solid #ebebeb; padding:25px 0;} /* 후기 한개 */ .n20_rv .rv_box {} .n20_rv .rv_box .first {display:table; width:100%; box-sizing:border-box; table-layout:fixed;} .n20_rv .rv_box .first dt, .n20_rv .rv_box .first dd {display:table-cell; vertical-align:top;} .n20_rv .rv_box .first dd {text-align:right} .n20_rv .rv_box .first .name {color:#000; font-weight:500; font-size:15px; margin-right:10px;} .n20_rv .rv_box .first .date {margin-top:10px; color:#aaa; font-size:13px;} .n20_rv .rv_box .first .user {display:flex; align-items: center; flex-direction:row; font-size:15px; color:#888; line-height:1;} .n20_rv .rv_box .first .user .sel+ .sel {padding-left:30px; position:relative;} .n20_rv .rv_box .first .user .sel+ .sel:before {content:""; width:1px; height:10px; background:#ddd; position:absolute; left:15px; top:50%; margin-top:-5px;} .n20_rv .rv_box .first .icon {padding-left:10px; font-size:0px;} .n20_rv .rv_box .first .icon strong {color:#fff; font-size:11px; font-weight:600; height:18px; line-height:18px; padding:0 8px; border-radius:100px; display:inline-block; margin-left:5px; font-family:"Manrope";} .n20_rv .rv_box .first .icon strong.new {background:#ff7200;} .n20_rv .rv_box .first .icon strong.re {background:#0ba2ff;} .n20_rv .rv_box .first .icon strong.best {background:#ff3000;} .n20_rv .rv_box .item {margin-top:10px; color:#aaa; font-size:13px;} .n20_rv .rv_box .rv_star {background-image:url('../images/n_review/star_conts.png'); height:13px; width:74px;} .n20_rv .rv_box .rv_mark {background-image:url('../images/n_review/star_conts.png');} .n20_rv .rv_box .conts {margin-top:10px; overflow:hidden; position:relative;} .n20_rv .rv_box .conts .text {color:#666; font-size:14px; line-height:22px;} .n20_rv .rv_box .conts .text {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; max-height:44px} .n20_rv .rv_box .conts .btn_all {height:30px;} .n20_rv .rv_box .conts .btn_all strong {color:#0ba2ff; font-weight:500; font-size:13px; border-bottom:1px solid #0ba2ff; margin-top:5px; display:block;} .n20_rv .rv_box .conts .btn_all strong:before {content:"···"; font-size:15px; letter-spacing:1px; font-weight:600;} .n20_rv .rv_box .conts .btn_all strong.before {display:block;} .n20_rv .rv_box .conts .btn_all strong.after {display:none;} .n20_rv .rv_box .reply {margin-top:10px; border:1px solid #ebebeb; padding:15px 25px; margin-bottom:20px; display:none;} .n20_rv .rv_box .reply .re_one+ .re_one {border-top:1px solid #ebebeb; margin-top:15px; padding-top:15px;} .n20_rv .rv_box .reply .re_one dl {display:table; width:100%; box-sizing:border-box; table-layout:fixed; border-collapse:separate; border-spacing:0 10px;} .n20_rv .rv_box .reply .re_one dt, .n20_rv .rv_box .reply .re_one dd {display:table-cell; vertical-align:top; box-sizing:border-box;} .n20_rv .rv_box .reply .re_one dt {width:210px; position:relative; padding-left:65px; } .n20_rv .rv_box .reply .re_one dd {padding-left:30px; color:#666; font-size:13px; border-left:1px solid #ebebeb;} .n20_rv .rv_box .reply .re_one .tag {width:35px; height:35px; box-sizing:border-box; border-radius:100px; background:#fff; border:1px solid #0ba2ff; line-height:33px; font-family:"Manrope"; text-align:center;} .n20_rv .rv_box .reply .re_one .tag {color:#0ba2ff; font-weight:500; position:absolute; left:15px; top:0;} .n20_rv .rv_box .reply .re_one .tag:before {content:""; width:10px; height:10px; border:1px solid #0ba2ff; border-top:0; border-right:0; position:absolute; left:-12px; top:7px;} .n20_rv .rv_box .reply .re_one .name {color:#0ba2ff; font-size:15px;} .n20_rv .rv_box .reply .re_one .date {color:#999;} .n20_rv .rv_box .reply .re_one.if_partner .name {color:#333;} .n20_rv .rv_box .reply .re_one.if_partner .tag {border-color:#333; color:#333;} .n20_rv .rv_box .reply .re_one.if_partner .tag:before {border-color:#333;} .n20_rv .rv_box .like {margin-top:15px;} .n20_rv .rv_box .like .like_it {background:#f5f5f5; border-radius:100px; padding:0 15px; border:1px solid #f5f5f5; box-sizing:border-box; display:inline-block;} .n20_rv .rv_box .like .like_it strong {color:#333; font-size:13px; height:32px; line-height:30px; background:transparent url('../images/n_review/like_conts.png') left center no-repeat; padding-left:20px; display:inline-block;} .n20_rv .rv_box .like .like_it.hit strong {background:transparent url('../images/n_review/like_conts_on.png') left center no-repeat; } .n20_rv .rv_box .like .like_it:hover {background:#fff; border-color:#ccc;} .n20_rv .rv_box .like .delete_it {background:#fff; border-radius:100px; padding:0 15px; border:1px solid #ebebeb; box-sizing:border-box; display:inline-block;} .n20_rv .rv_box .like .delete_it strong {color:#aaa; font-size:13px; height:32px; line-height:30px; display:inline-block;} /*.n20_rv .rv_rev.rv_best .rv_box .conts .text {max-height:500px; -webkit-line-clamp: 500;}*/ /* 전체후기에서 */ .n20_rv .rp_all .rv_box {} .n20_rv .rp_all .pop_scroll {padding:0 30px;box-sizing:border-box; height:595px;} .n20_rv .rp_all .rv_box .like {position:absolute; left:0; bottom:0; height:105px; width:100%; box-sizing:border-box; border-top:1px solid #ebebeb; background:#fff;} .n20_rv .rp_all .rv_box .like {box-sizing:border-box; padding:30px;} .n20_rv .rp_all .rv_box .like .login {position:absolute; right:30px; bottom:30px; color:#888; font-size:13px;} .n20_rv .rp_all .rv_box .like .login a {color:#0ba2ff; text-decoration:underline;} .n20_rv .rp_all .rv_box .like .like_it {border-radius:0px; border:0; padding:0px; background:#fff;} .n20_rv .rp_all .rv_box .like .like_it strong {background:transparent url('../images/n_review/like_pop.png') center top no-repeat; padding-top:30px; padding-left:0px; height:auto; line-height:1;} .n20_rv .rp_all .rv_box .like .like_it.hit strong {background:transparent url('../images/n_review/like_pop_on.png') center top no-repeat; } .n20_rv .rp_all .rv_box .first {margin-top:30px} .n20_rv .rp_all .rv_box .first dd {width:90px;} .n20_rv .rp_all .rv_box .first .user {font-size:13px; margin-top:7px;} .n20_rv .rp_all .rv_box .first .user .sel+ .sel {padding-left:18px;} .n20_rv .rp_all .rv_box .first .user .sel+ .sel:before {left:9px; margin-top:-3px;} .n20_rv .rp_all .rv_box .item {margin-top:15px; padding-top:10px; border-top:1px solid #ebebeb; font-size:14px;} .n20_rv .rp_all .rv_box .conts {margin-bottom:30px;} .n20_rv .rp_all .rv_box .conts .text {-webkit-line-clamp: 500; max-height:1000px; font-size:15px; line-height:1.5;} .n20_rv .rp_all .rv_box .reply {display:block; margin-top:0px; margin-bottom:30px; padding:0px; border-left:0; border-right:0; border-bottom:0;} .n20_rv .rp_all .rv_box .reply .re_one {margin-top:10px !importantx; padding-top:10px !important;} .n20_rv .rp_all .rv_box .reply .re_one dl {display:block; padding-left:40px; position:relative; } .n20_rv .rp_all .rv_box .reply .re_one dt, .n20_rv .rp_all .rv_box .reply .re_one dd {display:block; border:0; padding:0px; width:100%; position:static} .n20_rv .rp_all .rv_box .reply .re_one .tag {left:0; width:30px; height:30px; line-height:29px;} .n20_rv .rp_all .rv_box .reply .re_one .tag:before {display:none;} .n20_rv .rp_all .rv_box .reply .re_one .name {font-size:13px;} .n20_rv .rp_all .rv_box .reply .re_one dt {display:flex; margin-bottom:5px;} .n20_rv .rp_all .rv_box .reply .re_one .date {margin-left:10px;} /* 페이징 */ .rv_pagi {position:relative; border-top:1px solid #ebebeb;} .rv_pagi .rv_write {position:absolute; right:0; top:10px;} /* **************************************** * ◆◆◆ 포토후기 한개클릭 * **************************************** */ .n20_rv .rp_photo {position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000; background:rgba(0,0,0,0.5); display:flex; justify-content: center; align-items: center; display:none;} .n20_rv .rp_photo .inner {width:1100px; height:650px; display:inline-block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:auto 100%;} .n20_rv .rp_photo .btn_close {position:absolute; right:0; top:0; background:transparent url('../images/n_review/close_pop.png') center center no-repeat; width:60px; height:60px; margin:20px;} .n20_rv .rp_photo .prevnext {position:absolute; top:50%; margin-top:-25px;} .n20_rv .rp_photo .prevnext a {width:50px;} .n20_rv .rp_photo .prevnext .icon {display:block; height:50px; } .n20_rv .rp_photo .prevnext.prev {left:50%; margin-left:-600px;} .n20_rv .rp_photo .prevnext.next {right:50%; margin-right:-600px;} .n20_rv .rp_photo .prevnext.prev .icon {background:transparent url('../images/n_review/prev.png') left center no-repeat;} .n20_rv .rp_photo .prevnext.next .icon {background:transparent url('../images/n_review/next.png') right center no-repeat;} .n20_rv .rp_photo .prevnext.no_click {opacity: 0.2; filter: alpha(opacity=20); -ms-filter:alpha(opacity=20);} .n20_rv .rp_photo .pagi {position:absolute; left:0; top:50%; width:100%; text-align:center; margin-top:350px;} .n20_rv .rp_photo .pagi .num {background:#000; border-radius:100px; padding:8px 0; width:95px; font-size:18px; font-weight:500; color:#666;} .n20_rv .rp_photo .pagi .num strong {color:#fff;} .n20_rv .if_open_rpphoto .rp_photo {display:flex;} /* 클릭 시 조건들 */ .if_open_bodyfix {overflow:hidden !important;} .if_open_rpall.n20_rv .rp_all {display:flex;} .if_open_rpform.n20_rv .rp_form {display:flex;} .if_open_rvmore .rv_box .reply {display:block;} .if_open_rvmore .rv_box .conts {padding-bottom:0px;} .if_open_rvmore .rv_box .conts .text {max-height:500px; -webkit-line-clamp: 100;} .if_open_rvmore .rv_box .conts .btn_all {position:static;} .if_open_rvmore .rv_box .conts .btn_all strong.before {display:none;} .if_open_rvmore .rv_box .conts .btn_all strong.after {display:block;} /* 상품상세 공유하기 추가 */ .n20_vi_sns {position:relative; position:absolute; right:0; top:0; z-index:10} .n20_vi_sns * {font-family:Noto Sans CJK KR,'Noto',Sans-serif;} .n20_vi_sns .btn_share {display:flex; align-items: center; height:45px; align-items: center; border-radius:100px; border:1px solid #ddd; width:45px; box-sizing:border-box; float:left; margin-left:10px; font-size:0px;} .n20_vi_sns .btn_share {overflow:hidden; position:relative;} .n20_vi_sns .btn_share:hover {border-color:#999;} .n20_vi_sns .btn_share img {opacity: 0.5; filter: alpha(opacity=50); -ms-filter:alpha(opacity=50); margin-left:10px;} .n20_vi_sns .btn_share .on {display:none; opacity: 12; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} .n20_vi_sns .btn_share.hit .on {display:block;} .n20_vi_sns .btn_share.hit .off {display:none;} .n20_vi_sns .open_share {position:absolute; right:0; top:55px; z-index:100; box-sizing:border-box; height:0px; overflow:hidden;} .n20_vi_sns .open_share {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} .n20_vi_sns .open_share .share_inner {padding:20px; border:1px solid #000; background:#fff; height:165px; box-sizing:border-box;} .n20_vi_sns .open_share dl {display:flex; align-items: center; border-bottom:1px solid #e5e5e5; padding-bottom:10px;} .n20_vi_sns .open_share dl dt {color:#000; font-size:17px; font-weight:600; letter-spacing:-1px;} .n20_vi_sns .open_share dl dd {margin-left:auto;} .n20_vi_sns .open_share .btn_close {font-size:0px; padding:5px;} .n20_vi_sns .open_share ul {display:inline-flex; align-items: center; margin-top:15px;} .n20_vi_sns .open_share li+ li {margin-left:25px;} .n20_vi_sns .open_share .btn {background:#fff; font-size:0px; } .n20_vi_sns .open_share .title {display:inline-block; width:100%; text-align: center; color:#999; font-size: 12px;} .n20_vi_sns .open_share .url {display:flex; align-items: center; margin-top:15px;} .n20_vi_sns .open_share .url .input_url {height:35px; background:#f1f1f1; padding:10px; box-sizing:border-box; flex:1; color:#888 !important;} .n20_vi_sns .open_share .url .btn_copy {background:#333; color:#fff; font-size:13px; height:35px; padding:0 10px; line-height:35px;} .n20_vi_sns.if_open_vishare .open_share {height:167px;} /* 상품상세 기존 수정 */ .view_name {padding-right:130px;} .view_top .view_btn {padding-right:0px;}