/*-----------------------------------------------------------------*/ /* CSS Table of Contents /*-----------------------------------------------------------------*/ /* 1. Reset 2. Global 2-1. table 2-2. button 2-3. product 3. Layout 3-1. wrapper 3-2. header 3-3. content 3-4. footer 4. Page: 4-1. 메인 4-2. 상점 4-3. 회원 4-4. 마이페이지 4-5. 추가페이지 5. ETC /*-----------------------------------------------------------------*/ /* 1. Reset /*-----------------------------------------------------------------*/ @font-face { font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/PretendardVariable.woff2') format('woff2-variations'); } html {color:#000; font-size:12px; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; line-height:1.6; -ms-content-zooming: none; -ms-touch-action: pan-x pan-y;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ *, *::before, *::after {box-sizing:border-box; color:inherit; letter-spacing:-0.02em;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} body {height:100%; margin:0; padding:0; overflow:auto; word-break:break-all; -webkit-text-size-adjust:none; /*overscroll-behavior:none;*/} ol, ul, li {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} table {border-collapse:collapse; border-spacing:0;} a, a:hover, a:active, a:focus {text-decoration:none; cursor:pointer;} h1, h2, h3, h4, button, input, label {line-height:1.1;} h1, h2, h3, h4 {text-wrap:balance;} img {height:auto;} input, button, textarea, select {color:inherit; font:inherit;} input[type=text], input[type=password], input[type=submit], input[type=button], input[type=search], input[type=tel], input[type=number], input[type=email], textarea, select {-webkit-appearance:none;} input[type=checkbox] {-webkit-border-radius:0;} textarea:not([rows]) {min-height:10em;} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none; margin: 0;} /*-----------------------------------------------------------------*/ /* 2. Global /*-----------------------------------------------------------------*/ #qdBackground {width:100% !important;} #ui-datepicker-div {z-index:10 !important;} .dn {display:none !important;} .hidden {visibility:hidden; overflow:hidden; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; font-size:0; line-height:0;} .tac {text-align:center !important;} .tal {text-align:left !important;} .tar {text-align:right !important;} .fl {float:left !important;} .fr {float:right !important;} .clear {clear:both;} .bc {display:block; margin-left:auto; margin-right:auto;} .p_color {color:#D50C0C !important;} .p_cursor {cursor:pointer;} .i_info {display:inline-block; position:relative; width:16px; height:16px; margin:-2px 0 0 2px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_info.png') no-repeat center/16px auto; font-style:normal; font-weight:normal; line-height:1; vertical-align:middle;} /* 신규 */ .i_alert {padding-top:8px; color:#D50C0C; font-size:1.083rem; line-height:1.3; vertical-align:middle; word-break:keep-all;} .i_alert::before {content:''; display:inline-block; width:14px; height:14px; margin:-1px 4px 0 0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_alert.png') no-repeat center /contain; vertical-align:middle;} /* 신규 */ .empty {padding:80px 0 !important; text-align:center; color:#ccc; font-size:1.25rem;} @media all and (max-width:767px) { .empty {padding:60px 0 !important; font-size:1.167rem;} } /* input 기본 스타일 */ .form_input {display:inline-flex; height:48px; padding:0 14px; border:1px solid #E5E5E5; border-radius:6px; background:#fff; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:1.25rem; letter-spacing:-0.01em; transition:all .3s ease;} .form_input:focus {position:relative; z-index:1; border-color:#000; outline:none !important;} .form_input.block {display:flex; width:100% !important;} .form_input:-ms-input-placeholder {color:#999; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif;} .form_input::-webkit-input-placeholder {color:#999; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif;} .form_input::-moz-placeholder {color:#999; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif;} .form_input.readonly {background:#e0e0e0 !important;} .form_input.gray {background:#fafafa;} .form_input.gray:focus {background:#fff;} textarea.form_input {height:auto; padding:14px;} input[type=file].form_input {padding:10px 14px;} @media all and (max-width:767px) { .form_input {font-size:1.167rem;} } /* 셀렉트 */ select {max-width:100%; height:48px; padding:0 30px 0 15px; border:1px solid #E5E5E5; border-radius:6px; font-family:inherit; font-size:1.25rem; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:#fff url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_select.png') no-repeat right 5px center /30px auto; cursor:pointer;} select.block {width:100%;} select:focus {outline:none !important;} @media all and (max-width:767px) { select {height:44px; font-size:1.167rem;} } /* 서브 페이지 타이틀 */ h2.subtitle {padding:55px 0 40px; text-align:center; font-size:2.33rem; font-weight:600; letter-spacing:-0.01em;} @media all and (max-width:1023px) { h2.subtitle {font-size:1.833rem; font-weight:400;} } @media all and (max-width:767px) { h2.subtitle {padding:23px 0; font-size:1.667rem;} } /* 페이지 내 타이틀 */ h3.title.first {margin-top:0 !important;} h3.title {margin-top:40px; padding-bottom:20px; font-size:1.833rem; font-weight:600;} h3.title.line {border-bottom:1px solid #000;} @media all and (max-width:1023px) { h3.title {margin-top:20px; font-size:1.5rem;} h3.title.my {margin-top:20px !important;} } @media all and (max-width:767px) { h3.title {padding-bottom:15px; font-size:1.33rem;} } /* 갯수 문단 */ .title_count {padding-bottom:10px; font-size:1.167rem;} /* 상품리스트 수량,정렬선택,상품후기리스트 정렬*/ .total_sort {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;} .total_sort .total {font-size:1.25rem;} .total_sort select {height:30px; padding:6px 28px 6px 6px; background-position:right 0 center; border:none; line-height:normal;} .total_sort .sort input[type=radio] {margin-left:15px;} @media all and (max-width:767px) { .total_sort .total {font-size:1.083rem;} .total_sort select {font-size:1.083rem;} .total_sort .sort input[type=radio] {margin-left:10px;} } /* 페이징 */ .paging {margin-top:30px; font-size:0; text-align:center;} .paging li {display:inline-block; margin:0 15px; color:#888; font-size:1.25rem; vertical-align:middle;} .paging li strong {color:#000; font-weight:600;} .paging li a.arrow {display:block; width:17px; height:17px; background-repeat:no-repeat; background-position:center; background-size:8px auto; color:transparent; font-size:0;} .paging li a.prev {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/paging_prev.png');} .paging li a.next {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/paging_next.png');} /* 박스 스타일 - 수량 */ .box_qty {display:inline-block; position:relative;} .box_qty .form_input {width:100%; height:40px; padding:0 34px; text-align:center;} .box_qty .btn_ea > a {display:inline-block; position:absolute; top:50%; z-index:1; width:34px; height:40px; margin-top:-20px; background-repeat:no-repeat; background-position:center; background-size:24px auto;} .box_qty .btn_ea > a.ea_down {left:0; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ea_down.png');} .box_qty .btn_ea > a.ea_up {right:0; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ea_up.png');} /* 컬러칩 리스트 */ .color_option {display:flex; align-items:center; gap:6px;} .color_option li a {display:block; overflow:hidden; width:25px; height:25px; border-radius:4px; border:1px solid #E5E5E5;} .color_option li a.selected {border:1px solid #fff; outline:1px solid #000;} .color_option li a img {display:block; width:100%; height:100%; object-fit:cover;} .text_option {display:flex; align-items:center; flex-wrap:wrap; gap:8px;} .text_option li a {display:block; padding:10px; font-size:1.167rem; border-radius:6px; color:#666; border:1px solid #e5e5e5; text-align:center; line-height:1;} .text_option li a.selected {border:1px solid #000;} .text_option li a.soldout {background:#ff1111; color:#fff;} .colorlist {display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:10px;} .colorlist li {overflow:hidden; width:16px; height:16px; border-radius:4px; border:1px solid #E5E5E5;} .colorlist li span {display:block; width:100%; height:100%;} .colorlist li img {display:block; width:100%; height:100%; object-fit:cover;} /* 상품후기 평점 */ .gradebox {display:inline-block; position:relative; width:124px; height:22px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/grade.png') no-repeat left top/auto 100%; font-size:0; vertical-align:middle;} .gradebox:after {display:block; position:absolute; left:0; top:0; height:100%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/grade_over.png') no-repeat left top/auto 100%; content:'';} .gradebox.small {width:79px; height:14px; margin-top:-3px;} .gradebox.point1:after {width:20%;} .gradebox.point2:after {width:40%;} .gradebox.point3:after {width:60%;} .gradebox.point4:after {width:80%;} .gradebox.point5:after {width:100%;} /* 사은품 리스트 */ .gift_list h5 {padding:20px 0 14px; font-size:1.25rem; font-weight:400;} .gift_list ul {border-top:1px solid #EFEFEF;} .gift_list ul li {border-bottom:1px solid #EFEFEF;} .gift_list ul li .box {display:flex; align-items:center; gap:20px; font-size:1.083rem;} .gift_list ul li .chk {padding-left:20px;} .gift_list ul li .chk input {margin:0;} .gift_list ul li .img img {display:block; width:65px;} .gift_list .btn_col {margin-top:20px;} @media all and (max-width:767px) { .gift_list h5 {font-size:1.167rem;} .gift_list ul li .img img {width:55px;} } /* 검색창 공통화 - 검색결과, 게시판 관련상품 선택 레이어 */ .search_box {position:relative; width:100%; max-width:600px; margin:0 auto;} .search_box .form_input {border:none; background-color:#F6F6F6; padding-right:45px;} .search_box .btn_search {display:inline-block; position:absolute; top:0; right:0; z-index:5; width:42px; height:100%; border:0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_search.png') no-repeat center /22px; color:transparent; font-size:0; cursor:pointer;} @media all and (max-width:767px) { .search_box .form_input {height:44px;} } /* 상품검색(/shop/search_result.php) */ #search_result .rank_wrap {display:flex; align-items:center; justify-content:space-between; margin-top:60px;} #search_result .rank_wrap .rank {position:relative;} #search_result .rank_wrap .rank .box {display:flex; align-items:center; gap:20px; position:relative; width:280px; cursor:pointer;} #search_result .rank_wrap .rank .box h3 {min-width:72px; font-size:1.25rem; font-weight:600;} #search_result .rank_wrap .rank .box ul li {font-size:1.25rem; line-height:1.5rem;} #search_result .rank_wrap .rank .box ul li span {display:inline-block; margin-right:10px; color:#999; font-weight:600;} #search_result .rank_wrap .rank .box ul li font {display:inline-block; width:70%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle;} #search_result .rank_wrap .rank .box .rank_slide {height:1.5rem; margin:0;} #search_result .rank_wrap .rank .box .rank_slide ul li {width:206px; height:100% !important;} #search_result .rank_wrap .rank .box .all {display:none;} #search_result .rank_wrap .rank .box .rankbox {display:none; position:absolute; overflow:hidden; top:-24px; right:0; z-index:5; width:280px; height:auto; padding:24px 20px; border:1px solid #000; background-color:#fff;} #search_result .rank_wrap .rank .box .rankbox ul {display:block;} #search_result .rank_wrap .rank .box .rankbox ul li {padding-top:12px;} #search_result .rank_wrap .rank.on .box .rankbox {display:block;} #search_result .category {margin-top:15px; border-top:1px solid #000;} #search_result .result_cate {display:flex; padding:20px 0;} #search_result .result_cate h3 {width:13%; font-size:1.25rem; font-weight:600; line-height:1rem;} #search_result .result_cate ul {display:flex; flex-wrap:wrap; gap:20px 0; width:87%; line-height:1rem;} #search_result .result_cate ul li {width:20%; font-size:1.167rem;} #search_result .result_cate ul li a.selected {font-weight:600;} #search_result .result_cate ul li span {color:#666;} #search_result .total_sort {margin-top:40px;} @media all and (max-width:1023px) { #search_result .rank_wrap {margin-top:45px;} #search_result .result_cate ul li {width:33.33%;} #search_result .total_sort {display:block;} #search_result .total_sort p {margin-bottom:20px;} } @media all and (max-width:767px) { #search_result .rank_wrap {display:block; margin-top:30px;} #search_result .rank_wrap .rank {margin-top:15px; height:1.5rem;} #search_result .rank_wrap .rank .box {width:100%;} #search_result .rank_wrap .rank .box h3 {min-width:63px; font-size:1.167rem;} #search_result .rank_wrap .rank .box ul li {font-size:1.167rem;} #search_result .rank_wrap .rank .box .rank_slide {} #search_result .rank_wrap .rank .box .all {display:inline-block; position:absolute; right:0;} #search_result .rank_wrap .rank .box .rankbox {top:0; width:100%; padding:20px;} #search_result .category {margin-top:10px;} #search_result .result_cate {display:block;} #search_result .result_cate h3 {padding-bottom:15px; width:100%; font-size:1.167rem;} #search_result .result_cate ul {width: 100%; gap:15px 0;} #search_result .result_cate ul li {width:50%; font-size:1.083rem;} } /* 글쓰기 - 주문서,1:1문의 */ .write {margin-bottom:40px;} .write > div {margin:10px 0; text-align:left; font-size:1.25rem;} .write .box {margin:0 0 20px; padding:24px; border-radius:6px; background:#F5F6F8;} .write .box * {font-size:1.167rem; line-height:24px; letter-spacing:-0.28px;} .write .box .point * {color:#D50C0C; font-weight:600;} .write > div:last-child {margin-bottom:0;} .write > div.line {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #dcdcdc;} .write > div > label {display:none;} .write > .msg {margin-bottom:10px; line-height:34px;} .write > .msg * {vertical-align:middle;} .write .tbl_col.prd {margin-bottom:20px;} .write .tbl_col.prd > .thead > li {text-align:center;} .write .tbl_col.prd > .tbody > li {text-align:center;} .write .tbl_col.prd > .tbody > li.prdimg .img {display:flex; align-items:center; justify-content:space-between;} .write .tbl_col.prd > .tbody > li.prdimg .img img {width:74px;} .write .file .filebox {position:relative; display:inline-block; margin:0 18px 10px 0;} .write .file .filebox .icon {display:inline-block; position:static; width:70px; height:45px; margin-top:0; border-radius:6px; border:1px solid #E5E5E5; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_file.png') no-repeat center /20px auto; color:transparent; font-size:0;} .write .file .filebox .upload_name {display:inline-block; margin-left:10px; color:#666; font-size:1.167rem;} .write .file .filebox .upload_name label {margin-left:8px; font-size:inherit;} .write .file .filebox .upload_name label input {margin-right:3px;} .write .file .filebox .file_input {display:none;} @media all and (max-width:767px) { .write .tbl_col.prd > .tbody > li {margin-left:125px; text-align:left;} } /* 타이머 */ .box_timer {display:inline-block; overflow:hidden; position:absolute; top:14px; left:14px; z-index:5; max-width:calc(100% - 28px); padding:5px 12px; border-radius:30px; background-color:#fff; text-overflow:ellipsis; white-space:nowrap;} .box_timer span {font-size:1.167rem; font-weight:600;} .box_timer span.title:before {content:''; display:inline-block; width:17px; height:17px; margin:-2px 5px 0 0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_timer.png') no-repeat left center /17px; vertical-align:middle;} .box_timer.big {display:flex; flex-direction:column; top:20px; left:20px; padding:0; border-radius:6px; text-align:center;} .box_timer.big > span {padding:5px 12px 7px;} .box_timer.big > span.title {padding:7px 12px; border-bottom:1px dashed #e5e5e5;} @media all and (max-width:1023px) { .box_timer {top:10px; left:10px; max-width:calc(100% - 20px); padding:6px 10px;} .box_timer span {font-size:1.083rem;} .box_timer span.title {height:26px; font-size:0; vertical-align:middle;} .box_timer span.title:before {width:15px; height:15px; background-size:15px;} } /* 오픈타이머 */ .box_open_timer {display:inline-flex; align-items:center; position:absolute; top:50%; left:50%; z-index:5; max-width:94%; height:31px; transform:translate3d(calc(-50% + 0.5px), calc(-50% + 0.5px), 0); padding:0 12px; border-radius:30px; background-color:#D50C0C; white-space:nowrap;} .box_open_timer span.title {display:inline-block; overflow:hidden; text-overflow:ellipsis; padding-left:22px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_bell.png') no-repeat left center /16px; color:#fff; font-size:1.167rem; font-weight:600; white-space:nowrap;} #detail .wrap_prd .box_open_timer {left:20px; top:20px; transform:none;} @media all and (max-width:1023px) { .box_open_timer {padding:6px 10px;} .box_open_timer span.title {font-size:1.083rem;} } /* 이메일 자동 완성 */ .auto_complete_dialog {display:none; position:absolute; z-index:10; width:100%; margin-top:-1px; border:1px solid #000; background-color:#fff; word-break:break-all;} .auto_complete_dialog li {padding:5px 20px; font-size:1.167rem; cursor:pointer;} .auto_complete_dialog li:hover, .auto_complete_dialog li.selected {background-color:#f0f2f6;} /* 체크박스, 라디오 */ input[type=checkbox] {width:20px; height:20px; margin:0 5px 0 0; outline:0; background:no-repeat left center /20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ckbox.png') no-repeat center /20px; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; vertical-align:middle; transition:background .2s;} input[type=checkbox]::-ms-check {display:none;} input[type=checkbox]:checked {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ckbox_on.png');} input[type=checkbox][disabled] {opacity:.5;} input[type=radio] {display:inline-block; width:20px; height:20px; margin:0 5px 0 0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/radio.png') no-repeat left center /20px; border:none; vertical-align:middle; appearance:none;-webkit-appearance:none; -moz-appearance:none; outline:none; transition:background .2s;} input[type=radio]:checked {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/radio_on.png');} label {display:inline-block; font-size:1.25rem; line-height:20px; letter-spacing:-0.01em; vertical-align:middle; cursor:pointer;} label:has(input:disabled){opacity:.5; cursor:default;} @media all and (max-width:767px) { label {font-size:1.167rem;} } /* 스크롤바 없애기 */ .noscroll::-webkit-scrollbar {display:none;} .noscroll {-ms-overflow-style: none; scrollbar-width: none;} /* 레이어팝업(모달레이어) member_join_step1.wsr/member_order_delivery_frm.wsr/member_order_coupon_frm.wsr/mypage_order_paytype.wsr/common_product_select.wsr/shop_cart_chgOption.wsr/shop_detail_prdcpn.wsr/shop_detail_subscription.wsr */ .pop_layer {position:fixed; top:150px; left:50%; z-index:100; width:575px; margin-left:-287.5px; padding:45px 0 0; background-color:#fff;} .pop_layer h3.title {margin:0 35px; font-size:1.667rem;} .pop_layer h3.pop_title {margin:0 35px; padding-bottom:20px; font-size:1.667rem; border-bottom: 1px solid #000; font-weight:600;} .pop_layer .btn_close {display:block; position:absolute; top:24px; right:24px; width:22px; height:22px; z-index:30; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_close.png') no-repeat center /22px; color:transparent; font-size:0;} .pop_layer .inner {overflow-y:auto; height:100%; max-height:490px; padding:0 35px 45px; overscroll-behavior:none;} .pop_layer .btn_col {margin-top:30px;} @media all and (max-width:1023px) { .pop_layer {top:0; left:0; width:100% !important; height:100%; margin-left:0 !important; padding:60px 0 0;} .pop_layer h3.title {margin:0 45px;} .pop_layer h3.pop_title {margin:0 45px;} .pop_layer .btn_close {top:18px; right:18px;} .pop_layer .inner {max-height:calc(100% - 43px) !important; padding:0 45px 45px;} .pop_layer .btn_col {margin:30px 0;} } @media all and (max-width:767px) { .pop_layer {padding:60px 0 0;} .pop_layer h3.title {margin:0 4.26%;} .pop_layer h3.pop_title {margin:0 4.26%;} .pop_layer .btn_close {top:19px; right:12px;} .pop_layer .inner {padding:0 4.26% 45px;} } /* 쿠폰다운로드 레이어 */ .pop_coupon {display:none; width:465px; margin-left:-232.5px;} .pop_coupon .count {padding:25px 35px; font-size:1.167rem; letter-spacing:-0.28px;} .pop_coupon .count > strong {color:#d50c0c; font-weight:700;} .pop_coupon .inner {max-height:345px; text-align:center;} .pop_coupon .inner .box_btn {margin:0 auto; padding-top:30px;} .pop_coupon .inner .box_btn > * {width:166px;} .pop_coupon .list {margin-top:0; border:0;} .pop_coupon .list > li {position:relative; padding:22px; border-radius:4px; border:1px solid #ebebeb; text-align:left;} .pop_coupon .list > li.on {border:1px solid #000;} .pop_coupon .list > li + li {margin-top:13px;} .pop_coupon .list > li .cpn_price {padding-bottom:12px;} .pop_coupon .list > li .cpn_price > span {color:#d50c0c; font-size:1.417rem; font-weight:600; line-height:16px;} .pop_coupon .list > li > div {padding-bottom:8px; color:#000; font-size:1.167rem; letter-spacing:-0.28px;} .pop_coupon .list > li > div.btn {position:absolute; right:10px; top:24px; z-index:10; padding-top:0;} .pop_coupon .list > li > div.btn span {font-size:1.083rem;} .pop_coupon .list > li > div.btn span.down {cursor:pointer;} .pop_coupon .list > li > div.btn span.down > a {display:block; width:30px; height:30px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/cpn_download.png') no-repeat center/30px auto; text-indent:-9999px;} .pop_coupon .list > li > div.btn span.fin {padding:7px 30px 7px 0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/cpn_finish.png')no-repeat center right /30px;} .pop_coupon .list > li > div.price {color:#666;} @media all and (max-width:1023px) { .pop_coupon .count {padding:25px 45px;} .pop_layer.pop_coupon .inner {max-height:calc(100% - 107px) !important;} } @media all and (max-width:767px) { .pop_coupon .count {padding:25px 4.26%;} } /* 개별상품쿠폰 레이어 */ .prdcpn_layer {width:465px; margin-left:-232.5px;} .prdcpn_layer .inner {max-height:345px;} .prdcpn_layer .inner .box_btn {width:100%; margin:0 auto; padding-top:30px;} .prdcpn_layer .inner .box_btn > * {width:115px;} .prdcpn_layer .tbl_toggle.cpn_list {border-top:0;} .prdcpn_layer .tbl_toggle.cpn_list > .table > li {width:auto; padding:15px 0;} .prdcpn_layer .tbl_toggle.cpn_list > .table.first > li {font-size:1.167rem;} .prdcpn_layer .tbl_toggle.cpn_list > .table > li * {font-size:1.083rem;} .prdcpn_layer .tbl_toggle.cpn_list > .table > li.tal {width:30%; padding-left:20px;} .prdcpn_layer .tbl_toggle.cpn_list > .table > li.prdimg {width:50px !important;} .prdcpn_layer .tbl_toggle.cpn_list > .table > li .name {color:#333; font-size:1.083rem; letter-spacing:-0.26px;} .prdcpn_layer .tbl_toggle.cpn_list > .table > li .m_txt {display:none;} .prdcpn_layer .tbl_toggle .content.usable_cpn_box {display:block; text-align:left; border:0; background:#fff;} .prdcpn_layer .tbl_toggle .content.usable_cpn_box ul {padding:15px 0; border-bottom:1px solid #EFEFEF;} .prdcpn_layer .tbl_toggle .content.usable_cpn_box ul > li, .prdcpn_layer .tbl_toggle .content.usable_cpn_box ul > li * {color:#333; font-size:1.167rem; letter-spacing:-0.26px; word-break:keep-all;} .prdcpn_layer .tbl_toggle .content.usable_cpn_box ul > li + li {padding-top:8px;} .prdcpn_layer .tbl_toggle .content.usable_cpn_box ul > li label > span {color:#d50c0c;} @media all and (max-width:767px) { .prdcpn_layer .tbl_toggle.cpn_list .table {display:table; padding:0; table-layout:fixed; border-collapse:collapse;} .prdcpn_layer .tbl_toggle.cpn_list .table > li {display:table-cell; float:none; text-align:center; vertical-align:middle;} } /* 정기배송 레이어 */ .layer_sbs {width:900px; margin-left:-450px;} .layer_sbs .sbs_wrap.inner {display:grid; grid-template-columns:1fr 315px; gap:45px; padding-top:0;} .layer_sbs .delivery_info > .info_list {padding:0;} .layer_sbs .delivery_info > .info_list > dl {padding:14px 0; border-bottom:1px solid #efefef;} .layer_sbs .delivery_info > .info_list > dl dt {flex:0 0 15%; color:#333;} .layer_sbs .delivery_info > .info_list > dl dd {gap:5px 20px; color:#666;} .layer_sbs .delivery_info > .info_list > dl dd.times {display:block;} .layer_sbs .delivery_info > .info_list > dl dd label {margin:0;} .layer_sbs .delivery_info > .info_list > dl dd .calendar {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; width:100%;} .layer_sbs .delivery_info > .info_list > dl dd .calendar .text {flex:0 0 90px;} .layer_sbs .delivery_info > .info_list > dl dd .calendar .date {width:100%; max-width:150px;} .layer_sbs .delivery_info > .info_list > dl dd .calendar .date > span {display:block; height:42px; padding:0 12px; border-radius:6px; border:1px solid #e5e5e5; font-size:1.25rem; line-height:42px;} .layer_sbs .delivery_info > .info_list > dl dd .calendar .date .date_text {height:42px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_calendar.png') no-repeat right 7px center/24px auto; cursor:pointer;} .layer_sbs .delivery_info > .info_list > dl dd .calendar .date .date_text:hover {border-color:#000;} .layer_sbs .delivery_info .prd_info {padding-top:40px;} .layer_sbs .delivery_info .prd_info .prd_title {padding-bottom:15px; font-size:1.5rem; font-weight:600; letter-spacing:-0.36px; line-height:normal;} .layer_sbs .delivery_info .prd_info .prd_info_list {display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:24px 0; border:solid #efefef; border-width:1px 0;} .layer_sbs .delivery_info .prd_info .prd_info_list .box {display:flex; align-items: center; gap:16px;} .layer_sbs .delivery_info .prd_info .prd_info_list .box .img {flex:0 0 94px;} .layer_sbs .delivery_info .prd_info .prd_info_list .box .img img {width:100%; height:auto; max-height:94px;} .layer_sbs .delivery_info .prd_info .prd_info_list .box .info > p {display:block; font-size:1.167rem; letter-spacing:-0.28px;} .layer_sbs .delivery_info .prd_info .prd_info_list .box .info > p.opt {padding-top:5px; color:#666; font-size:1.083rem;} .layer_sbs .delivery_info .prd_info .prd_info_list .info_list {padding:0;} .layer_sbs .delivery_info .prd_info .prd_info_list .info_list > dl {padding:0 0 12px; justify-content:space-between; line-height:14px;} .layer_sbs .delivery_info .prd_info .prd_info_list .info_list > dl:last-child {padding:0;} .layer_sbs .delivery_info .prd_info .prd_info_list .info_list > dl dt {flex:1;} .layer_sbs .delivery_info .prd_info .prd_info_list .info_list > dl dd {width:auto;} .layer_sbs .sbs_info {margin-top:20px;} .layer_sbs .sbs_info .sbs_info_box {padding:28px 30px 42px; border-radius:6px; background:#f5f6f8;} .layer_sbs .sbs_info .sbs_info_box .sbs_title {font-size:1.667rem; font-weight:600; line-height:normal; letter-spacing:-0.4px;} .layer_sbs .sbs_info .sbs_info_box .info_list {padding:24px 0 15px; border-bottom:1px solid #fff;} .layer_sbs .sbs_info .sbs_info_box .info_list > dl {gap:30px; padding-top:0; padding-bottom:13px; line-height:16px;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .info_list > dl dt, .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .info_list > dl dd {font-size:1.083rem; letter-spacing:-0.26px;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .info_list > dl dt {color:#000;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .info_list > dl dd .point_color {color:#d50c0c; font-weight:600;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .info_list > dl dd strong {font-weight:400;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .total_prc_box {display:flex; justify-content:space-between; align-items:flex-start; padding-top:30px;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .total_prc_box .total_prc_text {font-size:1.25rem; letter-spacing:-0.3px; line-height:13px;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .total_prc_box .total_prc_text > span {display:block; padding-top:8px; color:#666; font-size:1rem; letter-spacing:-0.24px;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .total_prc_box .total_prc {color:#d50c0c; font-size:1.5rem; font-weight:700; line-height:14px;} .layer_sbs .sbs_wrap .sbs_info .sbs_info_box .total_prc_box .total_prc > * {color:inherit; font:inherit;} .layer_sbs .sbs_wrap .sbs_info .box_btn {width:50%;} .layer_sbs .sbs_wrap .sbs_info .box_btn > * {width:100%;} @media all and (max-width:1023px) { .layer_sbs .sbs_wrap.inner {grid-template-columns:repeat(1 , 1fr); gap:40px;} .layer_sbs .sbs_wrap .delivery_info .prd_info .prd_info_list {grid-template-columns:repeat(1 , 1fr); gap:20px;} .layer_sbs .sbs_info {margin-top:0;} } @media all and (max-width:767px) { .layer_sbs .delivery_info > .info_list > dl dd {gap:10px;} .layer_sbs .delivery_info > .info_list > dl dd .calendar {justify-content:flex-start; gap:4px 10px;} .layer_sbs .delivery_info > .info_list > dl dd .calendar .text {flex:0 0 100%;} } /* 재입고알림 레이어 */ .restock_layer {width:470px; margin-left:-235px;} .restock_layer .info_list > dl {padding-top:14px;} .restock_layer .info_list > dl:first-child {padding-top:24px;} .restock_layer .info_list > dl:last-child {padding-bottom:24px;} .restock_layer .info_list > dl.cell {padding-top:10px;} .restock_layer .info_list > dl dd select {height:44px;} .restock_layer label {width:100%; padding-top:15px; border-top:1px solid #efefef;} .restock_layer .box_btn > * {width:138px;} /* datepicker - 이후 엔진에서 수정 필요 - datepicker 플러그인 변경/사용하는 방법도 고려 */ .ui-datepicker {width:260px !important; padding:20px 12px 15px !important; border-color:#E5E5E5; border-radius:4px !important; box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.03);} .ui-datepicker .ui-widget-header {padding:0 !important; background:none !important; border:none !important; font-weight:normal;} .ui-datepicker .ui-datepicker-title select {height:30px; margin:0 5px !important; padding:0 30px 0 10px; border-radius:4px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_cal_select.png') no-repeat right center /30px auto; font-family:'Pretendard', Malgun Gothic,'맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:1.083rem !important;} .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top:50% !important; width:24px !important; height:24px !important; margin-top:-12px !important;} .ui-datepicker .ui-datepicker-prev {left:0 !important;} .ui-datepicker .ui-datepicker-next {right:0 !important;} .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {position:static !important; width:100% !important; height:100% !important; margin:0 !important; } .ui-datepicker .ui-datepicker-prev span {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_cal_prev.png') no-repeat center /24px !important;} .ui-datepicker .ui-datepicker-next span {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_cal_next.png') no-repeat center /24px !important;} .ui-datepicker .ui-state-hover {border:1px solid #eee !important; background-color:#eee !important;} .ui-datepicker .ui-datepicker-prev-hover span, .ui-datepicker .ui-datepicker-next-hover span {position:static !important;} .ui-datepicker select.ui-datepicker-month {width:65px !important;} .ui-datepicker select.ui-datepicker-year {width:90px !important;} .ui-datepicker table {margin:15px 0 0 0 !important;} .ui-datepicker th {padding:6px 0 !important;} .ui-datepicker th span {color:#000 !important; font-size:1.083rem !important; font-weight:400 !important;} .ui-datepicker td {padding:1px !important;} .ui-datepicker td a {padding:4px 0 !important; border-color:#fff !important; border-radius:4px; background:#fff !important; color:#000 !important; font-size:1rem; text-align:center !important; letter-spacing:-0.24px;} .ui-datepicker td a.ui-state-highlight {color:#fff !important; background-color:#000 !important;} .ui-datepicker .ui-datepicker-buttonpane {border:none !important;} .ui-datepicker .ui-datepicker-buttonpane button {margin:0 !important; padding:8px 14px !important; background-color:#fff; border-radius:4px; border-color:#EFEFEF !important; color:#000 !important; font-family:'Pretendard', Malgun Gothic,'맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:1.083rem !important; font-weight:400 !important; opacity:1 !important;} .ui-datepicker button.ui-state-hover {border:1px solid #eee !important; background-color:#eee !important;} /*-----------------------------------------------------------------*/ /* 2-1. table /*-----------------------------------------------------------------*/ /* 테이블 가로 */ .tbl_row {padding:10px 15px; border:1px solid #eaecf0;} .tbl_row > li {display:flex; align-items:center;} .tbl_row > li + li {margin-top:15px;} /* 테이블 스타일 - 세로 */ .tbl_col {display:table; width:100%; table-layout:fixed; border-collapse:collapse; border-top:1px solid #000; text-align:center;} .tbl_col > .thead {display:table-row; border-bottom:1px solid #EFEFEF;} .tbl_col > .thead > li {display:table-cell; padding:15px 0; font-size:1.25rem; vertical-align:middle;} .tbl_col > .thead > li.fake {display:none;} .tbl_col > .thead > li.fake.on {display:table-cell;} .tbl_col > .tbody {display:table-row; position:relative; border-bottom:1px solid #EFEFEF;} .tbl_col > .tbody > li {display:table-cell; padding:18px 0; font-size:1.167rem; vertical-align:middle;} .tbl_col > .tbody > li.fake {display:none;} .tbl_col > .tbody > li.fake.on {display:table-cell;} .tbl_col > .tbody > li.tal {padding-left:20px;} .tbl_col > .tbody > li .txt_gray {color:#666; word-break:keep-all;} .tbl_col > .tbody .m_txt {display:none;} .tbl_col.sbs {display:block; width:100%;} .tbl_col.sbs > .thead {display:grid; grid-template-columns: 0 1fr 10% 7% 10% 14% 70px; align-items:center; border-bottom:1px solid #EFEFEF;} .tbl_col.sbs > .thead > li {display:inline-block;} .tbl_col.sbs > .tbody {display:grid; grid-template-columns: 125px 1fr 10% 7% 10% 14% 70px; align-items:center; border:none;} .tbl_col.sbs.type2 > .thead {grid-template-columns: 0 1fr 10% 7% 15% ; } .tbl_col.sbs.type2 > .tbody {grid-template-columns: 90px 1fr 10% 7% 15%;} .tbl_col.sbs > .tbody > li {display:inline-block;} .tbl_col.sbs > .tbody > li.prd .btn_del > a {top:0 !important;} .tbl_col.sbs .time {padding:20px 40px; border:1px solid #EFEFEF; border-width:1px 0; background:#F5F6F8;} .tbl_col.sbs .time dl {display:flex; justify-content:space-between; padding:6px 0;} .tbl_col.sbs .time dl * {line-height:14px; font-size:1.167rem;} @media all and (max-width:767px) { .tbl_col {display:block; text-align:left;} .tbl_col > .thead {display:none; padding:18px 0;} .tbl_col > .tbody {display:block; padding:18px 0;} .tbl_col > .thead > li {display:block; padding:0;} .tbl_col > .tbody > li {display:block; padding:0;} .tbl_col > .tbody > li + li {margin-top:2px;} .tbl_col > .tbody > li.tal {padding-left:0;} .tbl_col > .tbody > li .m_txt {display:inline-block;} .tbl_col.sbs > .thead {display:none;} .tbl_col.sbs > .tbody {display:block;} .tbl_col.sbs > .tbody > li {display:block;} .tbl_col.sbs .time {padding:20px;} .tbl_col.sbs .time dl * {font-size:1.083rem;} } /* 테이블 스타일 - 상품형 주문서, 주문상세조회 */ .tbl_col.prd > .tbody > li.prdimg .img {position:relative;} .tbl_col.prd > .tbody > li.prdimg .img img {display:block; width:90px; height:auto;} .tbl_col.prd > .tbody > li.prd .name {font-size:1.25rem;} .tbl_col.prd > .tbody > li.prd p {margin-bottom:2px;} .tbl_col.prd > .tbody > li.prd .today {display:inline-block; margin:8px auto 10px; padding-left:16px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_today.png')no-repeat left center/12px; color:#067DFD; font-size:1rem;} .tbl_col.prd > .tbody > li.prd .today span {padding-left:5px; color:#666; font-weight:500; font-size:1rem;} .tbl_col.prd > .tbody > li.prd .prc {color:#333;} .tbl_col.prd > .tbody > li.ord_state p strong {font-size:1.417rem; font-weight:600;} .tbl_col.prd > .tbody > li.ord_state p + p {margin-top:5px;} .tbl_col.prd > .tbody > li.ord_state p span {color:#375FFF;} /* 세트상품 */ .tbl_col.prd > .tbody.set > li.prdimg .img {padding-left:15px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_set.png') no-repeat left center;} .tbl_col.prd > .tbody.set > li.prdimg .img img {width:75px;} @media all and (max-width:767px) { .tbl_col.prd > .tbody > li {margin-left:95px; font-size:1.083rem;} .tbl_col.prd > .tbody > li.prdimg {margin-left:0 !important;} .tbl_col.prd > .tbody > li.prdimg .img {float:left;} .tbl_col.prd > .tbody > li.prdimg .img img {width:80px;} .tbl_col.prd > .tbody > li.prd {margin-top:0;} .tbl_col.prd > .tbody > li.prd .name {font-size:1.167rem;} .tbl_col.prd > .tbody > li.sbscr {margin:0 !important; padding-top:15px; clear:both;} .tbl_col.prd > .tbody > li.sbscr > div {padding:14px; background-color:#F5F6F8;} .tbl_col.prd > .tbody > li.sbscr > div p {display:flex; justify-content:space-between; padding:2px 0;} .tbl_col.prd > .tbody > li.total {margin:0 !important; padding-top:15px; clear:both;} .tbl_col.prd > .tbody > li.total > div {display:flex; align-items:center; justify-content:space-between; padding:14px; background-color:#F5F6F8;} .tbl_col.prd > .tbody > li.total > div.cart {margin-left:30px;} .tbl_col.prd > .tbody > li.sbscr + li.total {padding-top:0; border-top:1px solid #EFEFEF;} .tbl_col.prd > .tbody > li.ord_btn {position:absolute; bottom:18px; right:0; margin-left:0; text-align:right;} .tbl_col.prd > .tbody > li.ord_state {margin:15px 0 0 0; padding-right:90px;} .tbl_col.prd > .tbody:not(.set) + .tbody.set {margin-top:-1px; border-top:1px solid #EFEFEF;} .tbl_col.prd > .tbody.set > li.prdimg .img img {width:65px;} .tbl_col.prd > .tbody.set > li.total {margin-left:15px !important;} } /* 테이블 스타일 - 적립금 & 예치금 */ .tbl_col.my > .tbody > li {vertical-align:top;} .tbl_col.my > .tbody > li .txt_gray {color:#888;} .tbl_col.my > .tbody > li .prc_state {color:#999; font-weight:600;} @media all and (max-width:767px) { .tbl_col.my > .tbody {position:relative; padding-right:100px;} .tbl_col.my > .tbody > li.info {margin-top:14px;} .tbl_col.my > .tbody > li.state {position:absolute; top:18px; right:0;} .tbl_col.my > .tbody > li.total {position:absolute; top:50px; right:0; margin-top:0; font-size:1.083rem;} .tbl_col.my > .tbody > li p {margin-bottom:2px;} } /* 테이블 스타일 - 1:1문의 내역 (/mypage/counsel_list.php & /mypage/order_detail.php) & 마이페이지 상품문의 (/mypage/qna_list.php) & 상품문의 상세 (/shop/product_qna.php) */ .tbl_toggle {margin-bottom:20px; border-top:1px solid #000;} .tbl_toggle .table {display:table; width:100%; padding:0; table-layout:fixed; border-collapse:collapse;} .tbl_toggle .table > li {display:table-cell; width:8.5%; padding:15px 0; border-bottom:1px solid #EFEFEF; font-size:1.167rem; text-align:center; vertical-align:middle;} .tbl_toggle .table.first > li {font-size:1.25rem;} .tbl_toggle .table > li.num {width:68px;} .tbl_toggle .table > li.subject {width:auto; padding-left:20px; text-align:left;} .tbl_toggle .table > li.subject * {font-weight:400; cursor:pointer;} .tbl_toggle .table > li img {width:auto; height:19px; vertical-align:middle;} .tbl_toggle .table > li .img img {width:100%; height:auto;} .tbl_toggle .table > li.date {width:12%;} .tbl_toggle .table > li.stat {width:12%;} .tbl_toggle .content {display:none; border-bottom:1px solid #EFEFEF; background-color:#fff;} .tbl_toggle .content * {font-size:1.167rem !important;} .tbl_toggle .content .form_input {width:100%; margin-bottom:20px;} .tbl_toggle .content h3 {padding:3px 0 10px; font-style:normal; font-weight:400; line-height:17px; letter-spacing:-0.28px;} .tbl_toggle .content p {margin-bottom:20px; color:#666; font-size:1.083rem; line-height:20px; letter-spacing:-0.26px;} .tbl_toggle .content .question {position:relative; padding:30px 62px; background:#fff;} .tbl_toggle .content .question::before {content:'Q'; position:absolute; top:30px; left:30px; font-size:1.33rem; font-weight:700;} .tbl_toggle .content .question > div {padding-bottom:15px;} .tbl_toggle .content .question > div + div {padding-top:10px;} .tbl_toggle .content .question img {max-width:100%; height:auto;} .tbl_toggle .content .question #pwbox > div .box_btn > * {width:112px; height:44px; line-height:44px;} .tbl_toggle .content .answer {position:relative; padding:30px 62px; background:#F6F6F6;} .tbl_toggle .content .answer::before {content:'A'; position:absolute; top:30px; left:30px; font-size:1.33rem; font-weight:700;} .tbl_toggle .content .btn {margin-top:0; font-size:0;} .tbl_toggle .content .btn_col {justify-content:flex-end;} #mypage_qna_list .tbl_toggle .table > li.subject, #qna_list .tbl_toggle .table > li.subject {cursor:pointer;} @media all and (max-width:1023px) { .tbl_toggle .content .question {padding:20px 52px;} .tbl_toggle .content .question::before {left:20px; top:20px;} .tbl_toggle .content .answer {padding:20px 52px;} .tbl_toggle .content .answer::before {left:20px; top:20px;} } @media all and (max-width:767px) { .tbl_toggle .table.first {display:none;} .tbl_toggle .table {overflow:hidden; display:block; padding:18px 0; border-bottom:1px solid #EFEFEF} .tbl_toggle .table > li {display:inline-block; float:left; width:auto !important; padding:0; border-bottom:none; font-size:1.083rem; vertical-align:top;} .tbl_toggle .table > li.num {margin-right:10px;} .tbl_toggle .table > li.cate {margin:0 5px 5px 0;} .tbl_toggle .table > li.subject {margin-bottom:5px; padding:0;} .tbl_toggle .table > li.subject + li {clear:both;} .tbl_toggle .table > li.subject ~ li {position:relative;} .tbl_toggle .table > li.subject ~ li + li {margin-left:16px;} .tbl_toggle .table > li.subject ~ li + li::after {content:''; position:absolute; top:50%; left:-8px; width:1px; height:10px; margin-top:-5px; background-color:#E5E5E5;} .tbl_toggle .content * {font-size:1.083rem;} .tbl_toggle .content .question::before, .tbl_toggle .content .answer::before {font-size:1.25rem;} } /* 테이블 스타일(table 구조) - 주문상세조회, 주문완료 */ .tbl_col_og {table-layout:fixed; clear:both; width:100%; border-collapse:collapse; border-top:1px solid #000; border-bottom:1px solid #EFEFEF; text-align:center;} .tbl_col_og > thead > tr > th {padding:14px 0; border-bottom:1px solid #EFEFEF; font-size:1.167rem; font-weight:400; vertical-align:middle;} .tbl_col_og > tbody > tr > th, .tbl_col_og > tbody > tr > td {padding:14px 0; border-bottom:1px solid #EFEFEF; font-size:1.083rem; font-weight:400; vertical-align:middle;} .tbl_col_og > tbody > tr .tal {padding-left:14px;} .tbl_col_og.ord {text-align:left;} .tbl_col_og.ord > tbody > tr > th, .tbl_col_og.ord > tbody > tr > td {padding:10px 0; font-size:1.167rem; border-bottom:none; vertical-align:top;} .tbl_col_og.ord > tbody > tr:first-child > th, .tbl_col_og.ord > tbody > tr:first-child > td {padding-top:20px;} .tbl_col_og.ord > tbody > tr:last-child > th, .tbl_col_og.ord > tbody > tr:last-child > td {padding-bottom:20px;} /* 리스트 스타일 - 가로 */ .list_col {border-top:1px solid #000;} .list_col > li {display:flex; position:relative; gap:12px; align-items:flex-start; padding:20px 0; border-bottom:1px solid #EFEFEF;} .list_col > li .ckbox input {margin:0;} .list_col > li .img img {width:70px; height:auto;} /* 결제금액 스타일 - 장바구니, 주문서, 주문상세조회 */ .prc_order {position:relative; margin-bottom:6px; padding:25px 25px 20px; background-color:#F5F6F8;} .prc_order.member_off {margin-bottom:15px;} .prc_order::after {content:''; position:absolute; left:0; top:100%; width:100%; height:10px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/prc_order_bg.png') top left;} .prc_order dl {display:flex; gap:10px; align-items:center; justify-content:space-between; padding:3px 0; font-size:1.25rem;} .prc_order dl > * {flex:1;} .prc_order dl dd {text-align:right;} .prc_order .view_info {display:none; padding-bottom:4px;} .prc_order .view_info dl {padding:0; color:#999; font-size:1.167rem;} .prc_order .view_info dl dt, .prc_order .view_info dl dd {padding:2px 0;} .prc_order .total_prc {margin-top:15px; padding-top:15px; border-top:1px solid #fff;} .prc_order .total_prc dl dd {font-size:1.667rem; font-weight:700;} .prc_order .total_prc dl.sbs_pay dd {color:#000 !important;} .prc_order .total_prc .ref {margin-top:-5px; font-size:1.083rem; font-weight:400; text-align:right;} .quick_order {position:relative; padding:16px 25px 0;} .quick_order dl {display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:1.083rem; line-height:15px;} .quick_order dl dd {text-align:right;} .quick_order dl.total {margin-top:16px; padding:20px 0; border-top:1px dashed #D0D0D0;} .quick_order dl.total dt {font-size:1.333rem; font-weight:600; line-height:17px; letter-spacing: -0.32px;} .quick_order dl.total dd {font-size:1.333rem; font-weight:600; line-height:17px; letter-spacing: -0.32px;} @media all and (max-width:767px) { .prc_order {padding:20px 16px;} .prc_order dl {font-size:1.167rem;} .prc_order .view_info dl {font-size:1.083rem;} .prc_order .total_prc dl dd {font-size:1.5rem;} } /* 결제금액 적립금 스타일 - 장바구니, 주문서 */ .milage_box {margin-top:26px; border-radius:6px; background:#FDF7F7;} .milage_box dl {display:flex; align-items:center; justify-content:space-between; padding:12px 20px; font-size:1.167rem; letter-spacing:-0.28px;} .milage_box dl + dl {padding:0 20px 12px;} .milage_box dl dd {text-align:right;} .milage_box .view_info {display:none;} .milage_box .view_info dl {padding:0 20px; color:#999; font-size:1.167rem;} .milage_box .view_info dl:last-child {padding-bottom:12px;} .milage_box .view_info dl dt, .milage_box .view_info dl dd {padding:2px 0;} @media all and (max-width:767px) { .milage_box dl {padding:12px 16px;} .milage_box .view_info dl {padding:0 16px; font-size:1.083rem;} } /* 리스트 스타일 - 재입고알림레이어, 정기배송레이어 */ .info_list > dl {display:flex; align-items:center; gap:50px; padding-top:20px;} .info_list > dl:last-child {padding-bottom:20px;} .info_list > dl dt, .info_list > dl dd {font-size:1.167rem; letter-spacing:-0.28px;} .info_list > dl dt {flex:0 0 20%; color:#666;} .info_list > dl dd {display:flex; flex-wrap:wrap; align-items:center; width:100%; color:#000;} .info_list > dl dd select {width:100%;} .info_list > dl dd input[type="text"] {width:100%;} .info_list > dl dd label {margin-right:20px;} @media all and (max-width:1023px) { .info_list > dl {gap:20px; padding-top:14px;} .info_list > dl dt, .info_list > dl dd {font-size:1.083rem; letter-spacing:-0.26px;} } /*-----------------------------------------------------------------*/ /* 2-2. button /*-----------------------------------------------------------------*/ /* 버튼스타일 - 기본 */ .box_btn {display:inline-block; text-align:center;} .box_btn > * {display:inline-flex; align-items:center; justify-content:center; min-width:70px; height:44px; margin:0; padding:0 10px; border:1px solid #000; border-radius:6px; outline:none; background-color:#000; color:#fff; font-size:1.25rem; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-weight:normal; line-height:44px; white-space:nowrap; cursor:pointer; -webkit-appearance:none; transition:all .2s ease;} .box_btn > *:hover, .box_btn > *:active, .box_btn > *:focus {background:#222;} @media all and (max-width:767px) { .box_btn > * {font-size:1.167rem;} } /* 버튼스타일 - 라운드 */ .box_btn.radius > * {min-width:auto; height:38px; padding:0 15px; border-radius:30px; font-size:1.167rem; line-height:38px;} .box_btn.radius.mini > * {height:30px; line-height:30px;} @media all and (max-width:767px) { .box_btn.radius > * {height:34px; font-size:1.083rem; line-height:34px;} } /* 버튼스타일 - 크기 */ .box_btn.mini > * {height:36px; font-size:1.167rem; line-height:36px;} .box_btn.small > * {height:40px; line-height:40px;} .box_btn.large > * {height:48px; line-height:48px;} .box_btn.huge > * {height:54px; font-size:1.417rem !important; font-weight:600; line-height:54px;} @media all and (max-width:767px) { .box_btn.mini > * {font-size:1.083rem !important;} .box_btn.small > * {font-size:1.167rem !important;} .box_btn.large > * {height:50px; font-size:1.167rem !important; line-height:50px;} .box_btn.huge > * {height:50px; font-size:1.33rem !important; line-height:50px;} } /* 버튼스타일 - 가로길이 */ .box_btn.block {display:block;} .box_btn.block > * {width:100%;} .box_btn.w50 > * {width:50px; min-width:50px;} .box_btn.w90 > * {width:90px;} .box_btn.w110 > * {width:110px;} .box_btn.w115 > * {width:115px;} .box_btn.w150 > * {width:150px;} .box_btn.w160 > * {width:160px;} .box_btn.w200 > * {width:200px;} .box_btn.w300 > * {width:300px;} /* 버튼스타일 - 색상 */ .box_btn.white > * {border-color:#000; background-color:#fff; color:#000;} .box_btn.white:hover > *, .box_btn.white:active > *, .box_btn.white:focus > * {background-color:#000; color:#fff;} .box_btn.gray > * {border-color:#F5F6F8; background-color:#F5F6F8; color:#333;} .box_btn.gray:hover > *, .box_btn.gray:active > *, .box_btn.gray:focus > * {border-color:#000; background-color:#fff; color:#000;} .box_btn.grline > * {border-color:#E5E5E5; background-color:#fff; color:#333;} .box_btn.grline:hover > *, .box_btn.grline:active > *, .box_btn.grline:focus > * {background-color:#f6f6f6;} .box_btn.lightgray > * {border-color:#e4e4e4; background-color:#e4e4e4; color:#fff;} /* 나열 버튼 */ .btn_col {display:flex; gap:10px; align-items:center; justify-content:center;} .btn_col2 {display:flex; gap:10px; align-items:center; justify-content:center; width:100%; margin:0 auto;} .btn_col2 .box_btn {width:50%;} .btn_col2 .box_btn > * {width:100%;} .btn_col2.nogap {gap:0;} .box_btn.mt {margin-top:5px;} /*-----------------------------------------------------------------*/ /* 2-3. product /*-----------------------------------------------------------------*/ /* 상품스타일 - 기본 */ .prd_basic {text-align:left !important;} .prd_basic > li {padding-bottom:50px; vertical-align:top;} .prd_basic .box .num {display:none;} .prd_basic .box .img {overflow:hidden; position:relative; z-index:1;} .prd_basic .box .img .prdimg {transition:all .3s ease;} .prd_basic .box .img .prdimg img {display:block; width:100%; height:auto;} .prd_basic .box:hover .img .prdimg {-ms-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);} .prd_basic .box .img .soldout {display:none;} .prd_basic .box.out .img .prdimg {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity:.3;} .prd_basic .box.out .img .soldout {display:block; position:absolute; left:0; top:50%; z-index:5; width:100%; font-size:1.167rem; font-weight:bold; text-align:center; cursor:pointer; transform:translateY(-50%);} /* 품절시 soldout 출력 */ .prd_basic .box .info {position:relative;} .prd_basic .box .quick {opacity:0; visibility:hidden; display:flex; gap:10px; align-items:center; justify-content:center; position:absolute; bottom:100%; left:0; z-index:5; width:100%; height:40px; background-color:rgba(0,0,0,.3); transition:all .3s ease;} .prd_basic .box:hover .quick {opacity:1; visibility:visible;} .prd_basic .box .quick li a {display:block; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:24px auto; color:transparent; font-size:0;} .prd_basic .box .quick li.cart a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_cart.png');} .prd_basic .box .quick li.wish a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_wish.png');} .prd_basic .box .quick li.wish a.wish_on {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_wish_on.png');} .prd_basic .box .name {padding-top:20px; color:#333; font-size:1.25rem; letter-spacing:-0.3px; line-height:normal; word-break:keep-all;} .prd_basic .box .name a {color:inherit; font:inherit;} .prd_basic .box .summary {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; text-overflow:ellipsis; margin-top:5px; color:#999; font-size:1.167rem; line-height:1.4; letter-spacing:-0.28px;} .prd_basic .box .price {padding-top:10px;} .prd_basic .box .price p {display:inline-block; margin-right:4px; font-size:1.167rem;} .prd_basic .box .price p.textY {font-size:0 !important;} .prd_basic .box .price p.textY span {font-size:1.167rem;} .prd_basic .box .price .prc_before p {color:#999; font-size:1.083rem; text-decoration:line-through;} .prd_basic .box .price .prc_before .sell {display:none;} .prd_basic .box .price .prc_before .consumerY {display:none;} .prd_basic .box .price .prc_before .sellY {display:inline-block;} .prd_basic .box .price .prc_after .disc {color:#D50C0C; font-weight:700;} .prd_basic .box .price .prc_after .discount {display:none;} .prd_basic .box .price .prc_after .sellY {display:none;} .prd_basic .box .price .prc_after .discountY {display:inline-block;} .prd_basic .box .icon {display:flex; flex-wrap:wrap; align-items:flex-end; gap:3px; padding-top:20px;} .prd_basic .box .icon img {width:auto; height:19px;} .prd_basic .box .today {display:inline-block; margin:8px auto 0; padding-left:16px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_today.png')no-repeat left center/12px; color:#067DFD;} .prd_basic .box .today > span {padding-left:5px; color:#666; font-weight:500;} @media all and (max-width:1023px) { .prd_basic .box:hover .img .prdimg {transform:none;} .prd_basic .box .quick {opacity:1; visibility:visible; gap:8px; justify-content:flex-end; height:50px; padding:10px; background-color:transparent;} .prd_basic .box .quick li a {display:block; width:30px; height:30px; background-size:100% auto;} .prd_basic .box .quick li.cart {display:none;} .prd_basic .box .quick li.cart a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/m_icon_cart.png');} .prd_basic .box .quick li.wish a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/m_icon_wish.png');} .prd_basic .box .quick li.wish a.wish_on {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/m_icon_wish_on.png');} } @media all and (max-width:767px) { .prd_basic > li {padding-bottom:40px;} .prd_basic .box .name {padding-top:15px;font-size:1.083rem;} .prd_basic .box .summary {font-size:1rem;} .prd_basic .box .price .prc_before p {font-size:1rem;} .prd_basic .box .icon {padding-top:10px;} .prd_basic .box .today {margin:10px auto 0px; font-size:0.917rem;} } /* 상품스타일 - 보기갯수 (상품리스트) */ .prd_basic.col_grid {display:grid; gap:0 2.777%; grid-template-columns:repeat(4, minmax(22.917%,22.917%));} .prd_basic.col_grid > li {width:100%;} @media all and (max-width:1023px) { .prd_basic.col_grid {grid-template-columns:repeat(3, minmax(31.481%,31.481%));} } @media all and (max-width:767px) { .prd_basic.col_grid {gap:0 4%; grid-template-columns:repeat(2, minmax(48%,48%));} } /* 상품스타일 - 가로형 (최근 본 상품) */ .prd_basic.col_list {border-top:1px solid #000;} .prd_basic.col_list > li {padding:20px 0; border-bottom:1px solid #EFEFEF;} .prd_basic.col_list .box {display:flex; align-items:center; gap:16px; position:relative;} .prd_basic.col_list .box .img {width:100px; flex-shrink:0; height:auto;} .prd_basic.col_list .box:hover .img .prdimg {transform:none;} .prd_basic.col_list .box .info {position:static; width:100%; padding-right:50px; text-align:left;} .prd_basic.col_list .box .quick {opacity:1; visibility:visible; bottom:auto; left:auto; top:0; right:0; width:auto; height:auto; background:none;} .prd_basic.col_list .box .quick li.cart {display:none;} .prd_basic.col_list .box .quick li.wish a {display:block; width:24px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_shop_wish.png') no-repeat center /100% auto;} .prd_basic.col_list .box .quick li.wish a.wish_on {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_shop_wish_on.png');} .prd_basic.col_list .box .name {padding-top:0; font-size:1.167rem;} .prd_basic.col_list .box .summary {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.2em; max-height:2.4em; font-size:1.083rem;} .prd_basic.col_list .box .img .box_open_timer, .prd_basic.col_list .box .img .box_timer, .prd_basic.col_list .box .icon {display:none;} @media all and (max-width:1023px) { .prd_basic.col_list .box .quick {padding:0;} } /* 상품스타일 - 관련상품 */ .prd_related {display:table; width:100%; border-collapse:collapse;} .prd_related > li {display:table-row; width:100%; padding:0; border-bottom:1px solid #efefef;} .prd_related > li > div {display:table-cell; padding:20px 0 20px 15px; text-align:left; vertical-align:middle;} .prd_related > li .chk {width:20px; padding:0;} .prd_related > li .chk input[type=checkbox] {margin:0 20px 0 0;} .prd_related > li .box {width:130px;} .prd_related > li .prdimg {display:flex; align-items: center; gap:20px; padding:20px 0;} .prd_related > li .prdimg .img {width:90px;} .prd_related > li .prdimg img {display:block; width:100%; height:auto; max-height:90px;} .prd_related > li .subject {width:36%;} .prd_related > li .subject p {padding-bottom:5px;} .prd_related > li .subject .name {font-size:1.25rem; letter-spacing:-0.3px;} .prd_related > li .subject .soldout {display:none; color:#d53838;} .prd_related > li .subject .soldout.out {display:inline;} .prd_related > li .subject .summary {color:#999; font-size:1.167rem; letter-spacing:-0.28px; word-break:keep-all;} .prd_related > li .prc {min-width:120px; text-align:center;} .prd_related > li .prcY {font-size:0; text-align:center;} .prd_related > li .prcY span {font-size:1.167rem;} .prd_related > li .prc strong {font-size:1.167rem; font-weight:600;} .prd_related > li .opt {width:25%;} .prd_related > li .opt > p {display:flex; flex-wrap:wrap; gap:7px 10px;} .prd_related > li .opt select {display:block; width:100%; max-width:344px;} .prd_related > li .opt input[type="text"] {width:100%; max-width:344px;} .prd_related > li .opt label {/* margin:3px 10px 3px 0 */;} .prd_related > li .qty {width:11%; max-width:115px; margin-top:5px;} @media all and (max-width:1023px) { .prd_related {display:block; table-layout:fixed;} .prd_related > li {overflow:hidden; display:block; position:relative;} .prd_related > li > div {display:block; margin-left:102px; padding:0; text-align:left;} .prd_related > li .box {float:left; width:90px; margin:0;} .prd_related > li .prdimg {gap:10px; padding:22px 0;} .prd_related > li .prdimg .img {width:60px;} .prd_related > li .subject {width:auto; padding-top:22px;} .prd_related > li .prc, .prd_related > li .prcY {text-align:left;} .prd_related > li .opt {width:calc(100% - 102px); max-width:344px; padding-top:7px;} .prd_related > li .qty {width:90px; padding-bottom:22px;} } /*-----------------------------------------------------------------*/ /* 3. Layout /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 3-1. wrapper /*-----------------------------------------------------------------*/ body.view_nav {overflow:hidden;} body.view_nav #dimmed {display:block;} body.view_detail {overflow:hidden;} body.view_detail #dimmed {display:block;} body.dimmed_on {overflow:hidden;} body.dimmed_on #dimmed {display:block; z-index:55;} #wrapper {position:relative; text-align:left;} .wrap_inner, .wrap_inner2 {width:100%; max-width:1200px; margin:0 auto;} @media all and (max-width:1200px) { .wrap_inner, .wrap_inner2 {padding:0 3.16%;} } @media all and (max-width:1023px) { .wrap_inner {padding:0 3.16% 3.16%;} .wrap_inner2 {padding:0 3.16%;} } @media all and (max-width:767px) { .wrap_inner {padding:0px 4.26% 4.26%;} .wrap_inner2 {padding:0 4.26%;} } /*-----------------------------------------------------------------*/ /* 3-2. header /*-----------------------------------------------------------------*/ .gnb_top {height:34px; background-color:#000;} .gnb_top .text {display:block; position:relative; padding:0 12px; color:#fff; font-size:1.166rem; line-height:34px;} .gnb_top .text > a {display:block;} .gnb_top .btn_close {display:block; position: absolute; top:0; right:0; z-index:5; width:32px; height:34px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ad_close_w.png') no-repeat center / 9px; color:transparent; font-size: 0;} header {width:100%; height:101px; text-align:center;} header.top_none {height:67px;} header .gnb_wrap {position:fixed; top:0; left:0; width:100%; z-index:55; background-color:#fff; transition:top .2s;} header .gnb_box .gnb {position:relative; max-width:1720px; margin:0 auto;} header .gnb_box .gnb .gnb_left {display:flex; position:absolute; top:0; left:20px;} header .gnb_box .gnb .gnb_left h1 {display:inline-block; padding:18px 0;} header .gnb_box .gnb .gnb_left h1 img {width:122px; height:auto;} header .gnb_box .gnb .gnb_left .category {display:none;} header .gnb_box .gnb > .category {opacity:0; transition:opacity .2s; display:flex; justify-content:center; flex-wrap:wrap; max-width:1500px; width:100%; height:67px; margin:0 auto; padding:0 200px;} header .gnb_box .gnb > .category > li {position:relative; padding:0 12px;} header .gnb_box .gnb > .category > li:hover::after {content:''; position:absolute; left:50%; bottom:0; width:48px; height:2px; margin-left:-24px; background-color:#fff; transition:.2s;} header .gnb_box .gnb > .category > li a {display:block; padding:21px 0; color:#000; font-size:1.333rem; font-weight:500;} header .gnb_box .gnb > .category > li .depth {visibility:hidden; opacity:0; position:absolute; top:100%; left:50%; z-index:5; min-width:136px; padding:10px 15px; border:1px solid #ddd; background-color:#fff; transform:translateX(-50%); text-align:left; transition:.2s;} header .gnb_box .gnb > .category > li .depth > li a {display:block; padding:8px 0; color:#000; font-size:1.167rem;} header .gnb_box .gnb > .category > li:hover::after {background-color:#000;} header .gnb_box .gnb > .category > li:hover .depth {visibility:visible; opacity:1;} header .gnb_box .gnb .gnb_right {display:flex; position:absolute; top:0; right:0;} header .gnb_box .gnb .gnb_right li {position:relative; margin:0 10px;} header .gnb_box .gnb .gnb_right li > a {display:block; width:32px; height:64px; background-repeat:no-repeat; background-position:center; background-size:32px; color:transparent; font-size:0;} header .gnb_box .gnb .gnb_right li.del {position:absolute; top:10px; right:0; width:20px !important;} header .gnb_box .gnb .gnb_right li.del a {display:inline-block; width:20px !important; height:20px; padding:8px;} header .gnb_box .gnb .gnb_right li.search {position:relative;} header .gnb_box .gnb .gnb_right li.search.mo {display:none;} header .gnb_box .gnb .gnb_right li.search a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_search.png');} header .gnb_box .gnb .gnb_right li.login a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_login.png');} header .gnb_box .gnb .gnb_right li.logout a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_login.png');} header .gnb_box .gnb .gnb_right li.join a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_join.png');} header .gnb_box .gnb .gnb_right li.mypage a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_mypage.png');} header .gnb_box .gnb .gnb_right li.wish a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_wish.png');} header .gnb_box .gnb .gnb_right li.cart + li.cart {display:none;} header .gnb_box .gnb .gnb_right li.cart > a {position:relative; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_cart.png');} header .gnb_box .gnb .gnb_right li.cart > a .ea_cart {position:absolute; top:12px; right:-5px; width:20px; height:20px; border-radius:50%; background:#000; color:#fff; font-size:1rem; font-weight:500; letter-spacing:-0.05em; line-height:20px;;} header .gnb_box .gnb .box_search {display:none; position:absolute; right:0; top:50%; margin-top:-16px;} header .gnb_box .gnb .box_search .box {position:relative; width:145px; border-bottom:1px solid #000;} header .gnb_box .gnb .box_search .box .basic_search {height:32px; padding-right:30px; border:none;} header .gnb_box .gnb .box_search .box .btn {position:absolute; top:0; right:0; z-index:10; width:32px; height:auto;} header .gnb_box .gnb .allmenu {display:none; position:absolute; top:100%; left:0; z-index:5; width:100%; background-color:#fff; box-shadow:0px 10px 10px #0000001A;} header .gnb_box .gnb .allmenu .inner {max-width:1100px; margin:0 auto;} header .gnb_box .gnb .allmenu .list {display:flex; padding:30px 0 55px; text-align:left;} header .gnb_box .gnb .allmenu .list > li {flex-basis:16.66%; padding:0 20px; border-left:1px solid #eee;} header .gnb_box .gnb .allmenu .list > li > a {display:block; margin-bottom:20px;} header .gnb_box .gnb .allmenu .list > li > a span {display:inline-block; padding-right:14px; color:#000; font-size:1.167rem; font-weight:500;} header .gnb_box .gnb .allmenu .list > li.first {border-left:none;} header .gnb_box .gnb .allmenu .list > li.first > a span, header .gnb_box .gnb .allmenu .list > li:hover > a span {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_more_m.png') no-repeat right center /8px auto;} header .gnb_box .gnb .allmenu .list > li ul li:not(:last-child) {margin-bottom:15px;} header .gnb_box .gnb .allmenu .list > li ul li a {display:block; color:#999; font-size:1.167rem;} @media all and (max-width:1023px) { header {height:98px;} header.top_none {height:64px;} header .gnb_box {display:none;} header .gnb_box {display:block;} header .gnb_top {padding:0 10px;} header .gnb_box .gnb {display:flex; justify-content:space-between; position:relative; height:64px; padding:0 10px;} header .gnb_box .gnb .gnb_left {display:flex;} header .gnb_box .gnb .gnb_left .category {display:block; width:32px; height:64px; margin-right:20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_menu.png')no-repeat center /32px; color:transparent; font-size:0;} header .gnb_box .gnb .gnb_left .category.active {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_close.png');} header .gnb_box .gnb .gnb_left h1 {padding:19px 0;} header .gnb_box .gnb .gnb_left h1 img {width:100px; height:auto;} header .gnb_box .gnb > .category {display:none;} header .gnb_box .gnb .gnb_right {display:flex;} header .gnb_box .gnb .gnb_right > li {margin:0 9px;} header .gnb_box .gnb .gnb_right > li > a {display:block; width:32px; height:64px; background-repeat:no-repeat; background-position:center; background-size:32px; color:transparent; font-size:0;} header .gnb_box .gnb .gnb_right > li.search a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_search_m.png');} header .gnb_box .gnb .gnb_right > li.mypage a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_mypage.png');} header .gnb_box .gnb .gnb_right > li.wish a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_wish.png');} header .gnb_box .gnb .gnb_right > li.cart > a {position:relative; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_cart_m.png');} header .gnb_box .gnb .gnb_right > li.cart > a .ea_cart {position:absolute; top:15px; right:-7px; width:20px; height:20px; border-radius:50%; background:#000; color:#fff; font-size:1rem; font-weight:500; letter-spacing:-0.05em;} header .gnb_box .gnb .gnb_right > li.search a.active {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_close.png');} header .gnb_box .gnb .gnb_right > li.cart + li.cart {display:none;} header .gnb_box .gnb .gnb_right > li.cart a .ea_cart {top:12px; right:-5px;} header .gnb_box .gnb .gnb_right > li.search.pc {display:none;} header .gnb_box .gnb .gnb_right > li.search.mo {display:block;} header .gnb_box .gnb .gnb_right > li.search a, header .gnb_box .gnb .gnb_right > li.search a.active {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_search.png');} header .gnb_box .gnb .gnb_right > li.mypage, header .gnb_box .gnb .gnb_right > li.wish {display:block;} header .gnb_box .gnb .box_search {display:none; position:absolute; top:100%; left:0; width:100%; padding:20px 40px; background-color:#fff;} header .gnb_box .gnb .box_search .box {position:relative; width:100%; max-width:480px; margin:0 auto; padding-right:35px; border-bottom:1px solid #333;} header .gnb_box .gnb .box_search .box .basic_search {border:none;} header .gnb_box .gnb .box_search .box .btn {position:absolute; right:0; top:50%; width:32px; margin-top:-16px; height:auto;} header .gnb_box .gnb .box_search .btn_close {display:none;} header .gnb_box .gnb .box_search {padding:50px;} header .gnb_box .gnb .box_search .box .basic_search {height:40px;} header .gnb_box .gnb .box_search .btn_close {display:block; position:absolute; left:50%; bottom:-74px; margin-left:-27px; width:54px; height:54px; border-radius:50%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_close_w.png') no-repeat center /32px rgba(0,0,0,0.6); color:transparent; font-size:0;} header .gnb_box .hd_sub {position:relative; height:50px;} header .gnb_box .hd_sub .btn_back {display:block; position:absolute; left:2%; width:24px; height:100%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_back.png') no-repeat center /24px; color:transparent; font-size:0;} header .gnb_box .hd_sub h2.subtitle {display:flex; align-items:center; justify-content:center; height:100%; padding:0 40px; text-align:center;} } @media all and (max-width:767px) { header {height:82px;} header.top_none {height:48px;} header .gnb_top {justify-content:center;} header .gnb_box .gnb {height:48px;} header .gnb_box .gnb .gnb_left {position:static;} header .gnb_box .gnb .gnb_left .category {display:block; width:32px; height:48px; margin-right:5px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_menu_m.png') no-repeat center /32px; color:transparent; font-size:0;} header .gnb_box .gnb .gnb_left h1 {padding:6px 0;} header .gnb_box .gnb .gnb_left h1 img {width:82px; margin-top:7px;} header .gnb_box .gnb .gnb_right {position:static;} header .gnb_box .gnb .gnb_right > li {margin:0 2px;} header .gnb_box .gnb .gnb_right > li > a {height:48px;} header .gnb_box .gnb .gnb_right > li.search a.active {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_close.png');} header .gnb_box .gnb .gnb_right > li.cart a .ea_cart {top:7px; right:-5px;} header .gnb_box .gnb .gnb_right > li.mypage, header .gnb_box .gnb .gnb_right > li.wish {display:none;} header .gnb_box .gnb .gnb_right > li.login {display:none;} header .gnb_box .gnb .gnb_right > li.join {display:none;} header .gnb_box .gnb .box_search {display:none; position:absolute; top:134%; left:0; width:100%; padding:20px 40px; background-color:#fff;} header .gnb_box .gnb .box_search .box {position:relative; width:100%; max-width:480px; margin:0 auto; padding-right:35px; border-bottom:1px solid #333;} header .gnb_box .gnb .box_search .box .basic_search {border:none;} header .gnb_box .gnb .box_search .box .btn {position:absolute; right:0; top:50%; width:32px; margin-top:-16px; height:auto;} header .gnb_box .gnb .box_search .btn_close {display:none;} } /*-----------------------------------------------------------------*/ /* 3-3. nav /*-----------------------------------------------------------------*/ nav {visibility:hidden; overflow:auto; position:fixed; top:98px; left:-384px; width:310px; height:calc(100% - 96px); padding:0 20px; background-color:#fff; transition:all 0.3s ease-in-out; -webkit-overflow-scrolling:touch; text-align:left;} header.top_none nav {top:64px; height:calc(100% - 64px);} nav .btn_close {display:none; visibility:visible; position:fixed; top:116px; left:330px; width:54px; height:54px; border-radius:50%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_close_w.png') no-repeat center /32px rgba(0,0,0,0.6); color:transparent; font-size:0; transition:all 0.3s ease-in-out;} nav .login {display:flex; gap:24px; border-bottom: 1px solid #E5E5E5;} nav .login li a {display:block; padding:20px 0; font-size:1.167rem; line-height:18px;} nav .cate {padding-top:19px;} nav .cate > li > a {display:block; padding:19px 0; font-size:1.416rem; font-weight:600; line-height:18px;} nav .cate > li.big > a {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_toggle_down.png')no-repeat right center/15px;} nav .cate > li > a span {display:inline-block; color:#000; font-size:1.5rem; font-weight:500;} nav .cate > li > a.selected {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_toggle_up.png');} nav .cate > li > a.selected span {font-weight:700; text-decoration:underline;} nav .cate > li ul {display:none; padding:3px 22px 10px;} nav .cate > li ul li a {display:block; padding:13px 0; color:#666; font-size:1.25rem; line-height:18px;} nav .nav_top {margin-top:19px; padding-top:19px; border-top:1px solid #DDDDDD;} nav .nav_top > li > a {display:block; padding:19px 0; font-size:1.416rem; font-weight:600; line-height:18px;} nav .nav_top > li.big > a {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_toggle_down.png')no-repeat right center/15px;} nav .nav_top > li > a span {display:inline-block; color:#000; font-size:1.5rem; font-weight:500;} nav .nav_top > li > a.selected {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_toggle_up.png');} nav .nav_top > li > a.selected span {font-weight:700; text-decoration:underline;} nav .nav_top > li ul {display:none; padding:3px 22px 5px;} nav .nav_top > li ul li a {display:block; padding:13px 0; color:#666; font-size:1.25rem; line-height:18px;} nav.is_show {visibility:visible; left:0;} @media all and (max-width:767px) { nav {top:82px; height: calc(100dvh - 82px);} header.top_none nav {top:48px; height: calc(100% - 48px);} nav .btn_close {display:none;} nav .cate {padding-top:17px;} nav .cate > li > a {padding:17px 0;} nav .cate > li ul li a {padding:10px 0; font-size:1.167rem;} nav .nav_top {margin-top:17px; padding-top:19px;} nav .nav_top > li ul li a {padding:10px 0; font-size:1.167rem;} } /*-----------------------------------------------------------------*/ /* 3-3. content /*-----------------------------------------------------------------*/ #cnt {padding-bottom:50px; min-height:500px;} #cnt .cntbody {width:100%; max-width:1200px; margin:0 auto;} @media all and (max-width:1023px) { #cnt {min-height:300px;} } /*-----------------------------------------------------------------*/ /* 3-4. footer /*-----------------------------------------------------------------*/ footer {margin-top:100px; padding:54px 20px; background-color: #F5F6F8;} footer .ft_wrap {width:100%; max-width:1700px; margin:0 auto;} footer .ft_wrap:after {display:block; clear:both; content:'';} footer .shop_info {display:flex; float: right; width:50%; justify-content:flex-end;} footer .shop_info > .box {flex-shrink:0; padding:0 0 0 5vw; border-top:none;} footer .shop_info > .box h3 {color:#000; font-size:1.167rem; font-weight:600; line-height:14px;} footer .shop_info > .box > div {display:block; padding-top:12px; padding-bottom:35px;} footer .shop_info > .box p {margin:4px 0 10px; padding-bottom:0; color:#000; font-size:1.167rem; font-weight:500;} footer .shop_info > .box p > a {display:block; color:#000; font-size:1.5rem; font-weight:700; line-height:18px;} footer .shop_info > .box ul li {color:#777; font-size:1.083rem; line-height:24px; vertical-align:middle;} footer .shop_info > .box ul.time li span {position:relative; font:inherit; margin-left:16px; color:#000;} footer .shop_info > .box dl {display:flex; padding-top:15px;} footer .shop_info > .box dl dt {color:#777; font-size:1rem; line-height:1.8;} footer .shop_info > .box dl dd {position:relative; margin-left:15px; color:#777; font-size:1rem; line-height:1.8;} footer .shop_info > .box dl dd::before {content:''; position:absolute; top:50%; left:-8px; width:1px; height:10px; margin-top:-5px; background-color:#DCDDDD;} footer .shop_info > .box > div .sns {display:flex; justify-content:flex-start; align-items:center; gap:12px;} footer .shop_info > .box > div .sns li a {display:block;} footer .shop_info > .box > div .sns li img {width:22px; height:auto; vertical-align:middle;} footer .company_info {float:left; width:50%; padding:0;} footer .company_info .logo {display:none; padding-top:20px;} footer .company_info .logo img {width:108px; height:auto;} footer .company_info .menu {display:flex;} footer .company_info .menu li + li {margin-left:15px;} footer .company_info .menu li a {display:block; color:#000; font-size:1.083rem; line-height:24px; letter-spacing:-0.26px;} footer .company_info address {padding-top:14px; font-style:normal; font-size:0;} footer .company_info address br {display:none;} footer .company_info address br.pc {display:block;} footer .company_info address span {position:relative; display:inline-block; margin-right:10px; color:#555; font-size:1.083rem; line-height:24px; letter-spacing:-0.26px;} footer .company_info address span span {margin-right:0; color:#555; font-size:inherit; line-height:24px; letter-spacing:-0.26px;} footer .company_info address span.box_link a {display:inline-flex; justify-content:center; align-items:center; gap:10px; margin-left:10px; padding:6px 8px; border-radius:4px; border:1px solid #CFCFCF; color:#666; font-size:1rem; line-height:12px;} footer .company_info address span.box_link span a {padding:0; margin:0; border:0; color:#555; font-size:1.083rem; line-height:24px; letter-spacing:-0.26px;} footer .company_info address span.box_link a:hover {border:1px solid #000; color:#000;} footer .company_info .copyright, footer .company_info .copyright * {padding-top:10px; font-size:1.083rem; color:#555; line-height:24px;} footer .company_info .copyright a strong, footer .company_info .copyright a:hover {color:#3fc0e5;} footer .quick_pc {position:fixed; right:20px; bottom:150px; z-index:35;} footer .quick_mo {display:none;} .dock {position:fixed; right:20px; bottom:62px; z-index:55; text-align:right;} .dock > li {margin-top:5px; font-size:0;} .dock > li > a {display:inline-block; width:48px; height:48px; border:1px solid #DDDDDD; border-radius:50%; background-color:rgba(255, 255, 255, .8); background-repeat:no-repeat; background-position:center; background-size:32px; box-shadow:0px 2px 4px #0000001A; color:transparent; font-size:0;} .dock > li.home {display:none;} .dock > li.wish {display:none;} .dock > li.mypage {display:none;} .dock > li.qna a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_qna.png');} .dock > li.history a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_history.png');} .dock > li.top a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_top.png');} .dock > li.cart.pc .quickcart2 > a {display:inline-block; position:relative; width:48px; height:48px; z-index:1; border-radius:50%; border:1px solid #DDDDDD; background:rgba(255, 255, 255, .8) url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_cart.png')no-repeat center/32px; box-shadow:0px 2px 4px #0000001A; color:transparent; font-size:0;} .dock > li.cart.mo > a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_cart.png');} .dock > li.cart .ea_cart {position:absolute; top:13px; right:6px; width:18px; height:18px; z-index:1; border-radius:50%; background:#000; color:#fff; font-size:1rem; font-weight:500; letter-spacing:-0.05em; text-align:center; line-height:18px;} .dock > li.cart.mo {display:none;} @media all and (max-width:1023px) { footer {margin-top:160px; padding:40px 32px 50px;} footer .shop_info {justify-content:start; gap:80px; float:none; width:100%;} footer .shop_info > .box {padding:0;} footer .shop_info > .box h3 {color:#000; font-size:1.166rem; font-weight:600; line-height:14px;} footer .shop_info > .box > div {padding-bottom:35px;} footer .shop_info > .box ul li {} footer .shop_info > .box ul.time li span {margin-left:20px; color:inherit;} footer .shop_info > .box dl {display:block; padding-top:40px;} footer .shop_info > .box dl dt, footer .shop_info > .box dl dd {margin-left:0; color:#000; font-size:2rem;} footer .shop_info > .box dl dd::before {display:none;} footer .company_info {float:none; width:100%; padding:5px 0 0;} footer .company_info .menu li + li {margin-left:12px;} footer .company_info address br.pc {display:none;} footer .company_info address br.ta {display:block;} } @media all and (max-width:767px) { footer {margin-top:100px; padding:40px 18px 55px;} footer .shop_info {display:block;} footer .shop_info > .box > div {padding-bottom:20px;} footer .shop_info > .box p {font-size:1.5rem;} footer .shop_info > .box ul li {font-size:1.167rem;} footer .shop_info > .box dl {padding-top:20px;} footer .shop_info > .box dl dt, footer .shop_info > .box dl dd {font-size:1.167rem;} footer .company_info {padding:20px 0 0;} footer .company_info .menu li a {font-size:1.167rem;} footer .company_info address span {margin-right:15px; font-size:1.167rem;} footer .company_info address br.pc {display:none;} footer .company_info address br.ta {display:none;} footer .company_info address br.mo {display:block;} footer .company_info .sns {padding-top:25px;} footer .company_info .sns li img {width:36px; height:auto;} .dock {display:flex; justify-content:space-between; right:0; bottom:0; z-index:45; width:100%; padding:0 20px; background-color:#fff; box-shadow:0px 0px 6px #0000001A;} .dock.nav {z-index:50;} .dock.down {bottom:-100%; transition:all 0.3s ease-in-out;} .dock.scroll_f {bottom:0 !important;} .dock > li {margin-top:0;} .dock > li > a {display:block; width:32px; height:48px; border:0; box-shadow:none; background-repeat:no-repeat; background-position:center; background-size:32px; color:transparent; font-size:0;} .dock > li.home {display:block;} .dock > li.home > a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_home.png');} .dock > li.wish {display:block;} .dock > li.wish > a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_wish.png');} .dock > li.mypage {display:block;} .dock > li.mypage > a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_mypage.png');} .dock > li.history > a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_history.png');} .dock > li.qna > a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_qna.png');} .dock > li.top {position:fixed; right:15px; bottom:80px; z-index:20;} .dock > li.top a {width:48px;} .dock > li.cart a {position:relative;} .dock > li.cart .ea_cart {top:11px; right:-1px; width:16px; height:16px; line-height:16px;} .dock > li.cart.pc {display:none;} .dock > li.cart.mo {display:block;} } #dimmed {display:none; position:fixed; left:0; top:0; z-index:15; width:100%; height:100%; background:rgba(0,0,0,0.5);} #dimmed.nav {z-index:50;} /*-----------------------------------------------------------------*/ /* 4. Page /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 4-1. 메인 /*-----------------------------------------------------------------*/ #main .swiper-button-next:after, #main .swiper-button-prev:after {display:none;} #main .swiper-pagination-progressbar {display:none;} #main .subtitle {display:block; padding:0 0 20px; text-align:left; font-size:2.667rem; font-weight:bold;} #main .subtitle a {display:inline-block; color:inherit; font:inherit; line-height:1.6;} #main .wrap_inner {max-width:1400px; padding:0 20px;} #main .visual {position:relative; overflow:hidden; max-width:1920px; margin:0 auto;} #main .visual .swiper_visual .tb, #main .visual .swiper_visual .mobile {display:none;} #main .visual .swiper_visual .swiper-slide img {width:100%; height:auto;} #main .visual .swiper_visual .swiper-slide .text {opacity:0; position:absolute; left:0; bottom:13.7%; width:100%; text-align:center; transform:translateY(20%); transition:.7s; transition-delay:.3s;} #main .visual .swiper_visual .swiper-slide-active .text {opacity:1; transform:translateY(0);} #main .visual .swiper_visual .swiper-slide .text p {color:#fff; font-size:1.667rem; font-weight:700;} #main .visual .swiper_visual .swiper-pagination.num {bottom:5%;} #main .swiper-pagination.num .swiper-pagination-bullet {opacity:1; width:auto; height:auto; border-radius:0; background:none;} #main .visual .swiper_visual .swiper-pagination.num .swiper-pagination-bullet span {display:inline-block; margin:0 6px; color:#fff; font-style:italic; font-size:1.167rem; line-height:1.2;} #main .swiper-pagination.num .swiper-pagination-bullet {margin:0 6px;} #main .swiper-pagination.num .swiper-pagination-bullet-active span {border-bottom: 1px solid #000;} #main .visual .swiper_visual .swiper-pagination.num .swiper-pagination-bullet-active span {border-color:#fff;} #main .visual .arrow > div {position:absolute; top:50%; z-index:5; width:64px; height:64px; margin-top:-32px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:100% auto; cursor:pointer;} #main .visual .arrow .swiper-button-prev {left:20px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/main/main_prev.png');} #main .visual .arrow .swiper-button-next {right:92px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/main/main_next.png');} #main .visual .arrow .btn_pause {right:20px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/main/main_pause.png'); background-color:transparent;} #main .visual .arrow > div:hover {background-color:rgba(0,0,0,.3);} #main .promo {width:100%; max-width:1400px; margin:0 auto; padding:80px 20px 0;} #main .promo ul {display:flex; flex-wrap:wrap; justify-content:space-between;} #main .promo ul li {width:24%;} #main .promo ul li img {width:100%; height:auto;} #main .promo ul li .title {padding-right:10px;} #main .promo ul li .title h3 {padding-top:16px; font-size:1.5rem;} #main .promo ul li .title p {padding-top:6px; color:#999; font-size:1.167rem; word-break:keep-all;} #main .new {overflow:hidden; padding-top:80px;} #main .pick {overflow:hidden; margin-top:110px;} #main .pick .wrap_inner {display:flex; max-width:1400px; padding:0 20px;} #main .pick .subtitle {width:410px; flex-shrink:0; padding-bottom:20px;} #main .pick .subtitle p {display:block; padding-top:12px; font-size:1.167rem; font-weight:500; letter-spacing:-0.025rem; line-height:1.6;} #main .pick .pick_slide_wrap {position:relative; width:calc(100% - 410px);} #main .pick .pick_slide .swiper-slide {transition:transform .2s;} #main .pick .prd_basic .box .info {visibility:hidden; opacity:0; display:flex; position:absolute; left:0; bottom:0; z-index:5; width:100%; height:100%; padding:30px; background:rgba(0,0,0,.6); transition:opacity .2s; align-items:center; justify-content:center; text-align:center; cursor:pointer;} #main .pick .prd_basic .box .price p.sell, #main .pick .prd_basic .box .price p.discount {color:#fff;} #main .pick .prd_basic .box .colorlist {padding-top:0; justify-content:center;} #main .pick .prd_basic .box .num {display:none;} #main .pick .prd_basic .box .name {padding-right:0; color:#fff;} #main .pick .prd_basic .box .summary {color:rgba(255,255,255,.6);} #main .pick .prd_basic .box .prc_bottom span {color:#fff;} #main .pick .prd_basic .box .today > span {color:rgba(255,255,255,.6);} #main .pick .prd_basic .box .count {position:static; padding-top:25px; justify-content:center;} #main .pick .prd_basic .box .icon {display:none;} #main .pick .prd_basic .box:hover .img::after, #main .pick .prd_basic .box:hover .info {visibility:visible; opacity:1;} #main .pick .prd_basic .box .img:hover .prdimg {transform:none;} #main .pick .prd_basic .box.out .info {display:none;} #main .banner {position:relative; margin-top:160px;} #main .banner .tb, #main .banner .mobile {display:none;} #main .banner img {width:100%;} #main .banner .swiper-pagination.num {position:static; margin-top:24px;} #main .arrow.themw > div {position:absolute; top:50%; z-index:5; width:64px; height:64px; margin-top:-32px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:100% auto; background-color:transparent; transition:background-color .1s; cursor:pointer;} #main .best {overflow:hidden; padding-top:160px;} #main .best .prd_basic > li .num {display:block; font-size:1.33rem; font-weight:700;} #main .best_review {position:relative; margin-top:109px; padding:120px 0; background-color:#FBFBFB;} #main .best_review .wrap_inner {position:relative; max-width:1400px; width:100%; margin:0 auto; padding:0 20px;} #main .best_review .swiper-pagination.num {top:20px; right:20px; left:auto; bottom:auto; width:auto;} #main .swiper-pagination.num .swiper-pagination-bullet {opacity:1; width:auto; height:auto; border-radius:0; background:none;} #main .best_review .review_slide .swiper-slide .img img {width:100%; height:auto;} #main .best_review .review_slide .swiper-slide .info {padding:15px 10px 0 0;} #main .best_review .review_slide .swiper-slide .info .prd {margin-top:5px;} #main .best_review .review_slide .swiper-slide .info .prd a {padding-top:15px; font-size:1.167rem; font-weight:500;} #main .best_review .review_slide .swiper-slide .info .date {padding-top:10px;} #main .best_review .review_slide .swiper-slide .info .date span {display:inline-block; position:relative; margin-right:16px; color:#999; font-size:0.833rem; vertical-align:top;} #main .best_review .review_slide .swiper-slide .info .contents, #main .best_review .review_slide .swiper-slide .info .date span {color:#999; font-size:1.167rem;} #main .best_review .review_slide .swiper-slide .info .date span:first-child:after {content:''; position:absolute; top:50%; right:-8px; width:1px; height:8px; margin-top:-4px; background-color:#999;} #main .best_review .arrow.themw > div {position:absolute; top:40%; z-index:5; width:64px; height:64px; margin-top:-32px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:100% auto; background-color:transparent; transition:background-color .1s; cursor:pointer;} #main .arrow.themw > div:hover {background-color:rgba(255,255,255,.5);} #main .arrow.themw .swiper-button-prev {left:40px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_prev.png');} #main .arrow.themw .swiper-button-next {right:40px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_next.png');} #main .acc {padding-top:160px;} #main .instagram {margin-top:60px;} #main .instagram h2.subtitle .btn_link {display:inline-block; float:right; margin-top:25px; padding-right:0; background:none; color:#000; font-size:1.167rem; font-weight:400; text-decoration:underline;} #main .instagram img {max-width:100%; max-height:100%;} #main .instagram video {max-width:100%; max-height:100%; vertical-align:top;} @media all and (max-width:1023px) { #main .prd_basic.col_grid {grid-template-columns:repeat(2, minmax(48.612%,48.612%));} #main .swiper-pagination.prgs {display:block; position:static; overflow:hidden; height:2px; margin-top:30px; border-radius:4px; background-color:#DDDDDD;} #main .visual .swiper_visual .tb {display:block;} #main .visual .swiper_visual .pc, #main .visual .swiper_visual .mobile {display:none;} #main .visual .arrow > div {background-color:rgba(0,0,0,.3);} #main .visual .arrow .btn_pause {background-color:rgba(0,0,0,.3);} #main .promo {padding-top:50px;} #main .promo ul li {width:48.7%; padding-bottom:80px;} #main .promo ul li .title h3 {padding-top:10px;} #main .best {padding-top:50px;} #main .pick {margin-top:50px;} #main .pick .wrap_inner {display:block; overflow:visible;} #main .pick .subtitle p {display:none;} #main .pick .pick_slide {overflow:visible;} #main .pick .pick_slide_wrap {position:relative; width:100%;} #main .pick .pick_slide .swiper-slide {transform:scale(0.8); transition:transform .2s;} #main .pick .pick_slide .swiper-slide-active {transform:scale(1);} #main .banner {margin-top:50px;} #main .banner .tb {display:block;} #main .banner .pc, #main .banner .mobile {display:none;} #main .banner span img {width:100%;} #main .arrow.themw > div {display:none;} #main .best_review {margin-top:50px; padding:50px 0 60px;} #main .best_review .review_slide .swiper-slide .info .contents, #main .best_review .review_slide .swiper-slide .info .date span {padding-top:0;} #main .best_review .swiper-pagination.num {display:none;} #main .best_review .arrow.themw > div {display:none;} #main .acc {padding-top:50px;} #main .instagram {margin-top:50px;} } @media all and (max-width:767px) { #main .prd_basic.col_grid {grid-template-columns:repeat(2, minmax(48%,48%));} #main .subtitle {font-size:2rem;} #main .subtitle a {display:inline-block; padding-right:26px;} #main .wrap_inner {padding:4.68% 10px;} #main .visual .swiper_visual .mobile {display:block;} #main .visual .swiper_visual .pc, #main .visual .swiper_visual .tb {display:none;} #main .visual .swiper_visual .swiper-slide .text {bottom:20%;} #main .visual .swiper_visual .swiper-slide .text p {font-size:1.5rem;} #main .visual .swiper_visual .swiper-pagination.num {bottom:10%;} #main .visual .arrow .btn_pause {display:none;} #main .visual .arrow > div {background-color:rgba(0, 0, 0,0);} #main .visual .arrow .swiper-button-prev {left:0;} #main .visual .arrow .swiper-button-next {right:0;} #main .promo {padding:50px 10px 0;} #main .promo ul li {width:49.8%; padding-bottom:60px;} #main .promo ul li .title h3 {padding-top:8px; font-size:1.167rem;} #main .promo ul li .title p {padding-top:4px; font-size:1rem;} #main .pick .prd_basic .box:hover .img::after, #main .pick .prd_basic .box:hover .info {visibility:hidden; opacity:0;} #main .banner .mobile {display:block;} #main .banner .pc, #main .banner .tb {display:none;} #main .banner .swiper-pagination.num {display:none;} #main .best_review .subtitle {padding-bottom:0px;} #main .best_review .wrap_inner {padding:0 10px;} #main .best_review > .wrap_inner {padding:4.68% 10px;} #main .best_review .review_slide .swiper-slide .info .contents {padding-top:5px; color:#999; font-size:0.917rem;} #main .best_review .review_slide .swiper-slide .info .date span {margin-right:16px; font-size:0.833rem;} #main .instagram {margin-top:0;} #main .instagram h2.subtitle {padding-bottom:0;} #main .instagram h2.subtitle .btn_link {display:none;} #main .instagram .swiper-container {padding:0 10px;} } /*-----------------------------------------------------------------*/ /* 4-2. 상점 /*-----------------------------------------------------------------*/ /* 상품리스트(/shop/big_section.php) */ #big_section {overflow:hidden;} #big_section .best_area {clear:both; margin-bottom:30px; padding-bottom:50px;} #big_section .best_area .swiper-wrapper {padding-bottom:50px;} #big_section .best_area .prd_basic .box .img .box_open_timer, #big_section .best_area .prd_basic .box .img .box_timer, #big_section .best_area .prd_basic .box .summary {display:none;} @media all and (max-width:767px) { #big_section .best_area {padding-bottom:30px;} } /* 카테고리 메뉴 공통 상품리스트 & 프로모션 기획전 */ .sub_category_wrap {margin-bottom:40px;} .sub_category_wrap ul {width:100%; font-size:0; text-align:center;} .sub_category_wrap ul li {display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; max-width:100%; margin:0 5px; margin-bottom:10px;} .sub_category_wrap ul li a {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; width:100%; height:35px; padding:0 20px; border-radius:999px; border:1px solid #E5E5E5; background-color:#fff; color:#333; font-size:1.33rem; line-height:34px; transition:.2s;} .sub_category_wrap ul li:hover a {background-color:#f6f6f6;} .sub_category_wrap ul li a.active {border:1px solid #000; background-color:#000; color:#fff; font-weight:600;} @media all and (max-width:1023px) { .sub_category_wrap {overflow-x:auto; margin:0 -3.16%; padding:0 3.16%; margin-bottom:40px;} .sub_category_wrap ul {white-space:nowrap;} .sub_category_wrap ul li:last-child a {margin-right:10px;} } @media all and (max-width:767px) { .sub_category_wrap {margin:0 -4.26%; padding:0 4.26%; margin-bottom:40px;} .sub_category_wrap ul li {margin:0 3px;} .sub_category_wrap ul li a {height:33px; font-size:1.167rem;} } /* 개인결제 상품리스트 (/shop/big_section.php?cno1=private) */ #private_list {padding:52px 0 90px; background-color:#D6DADE;} #private_list .private_box {overflow:hidden; max-width:1200px; margin:0 auto; border-radius:20px; background-color:#fff;} #private_list .private_title {height:56px; padding:0 57px; background:#000 url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/listtitle_img.png')no-repeat left 24px center; color:#fff; font-size:1.5rem; line-height:56px;} #private_list .list_wrap {padding:58px 8.3% 80px;} #private_list .list_wrap ul.list {min-height:400px;} #private_list .list_wrap ul.list li {display:flex; gap:24px; align-items:center; padding:25px 0; border-bottom:1px solid #EFEFEF;} #private_list .list_wrap ul.list li:first-child {border-top:1px solid #EFEFEF;} #private_list .list_wrap ul.list li .img {flex-shrink:0; overflow:hidden; width:80px; border-radius:10px;} #private_list .list_wrap ul.list li .img img {display:block; width:100%; height:auto;} #private_list .list_wrap ul.list li .info {display:flex; align-items:center; gap:20px; justify-content:space-between; width:calc(100% - 104px);} #private_list .list_wrap ul.list li .info .name {font-size:1.333rem; letter-spacing:-0.32px; line-height:1.3;} #private_list .list_wrap ul.list li .info .summary {padding-top:4px; color:#888; font-size:1.167rem; letter-spacing:-0.28px; line-height:1.3;} #private_list .list_wrap ul.list li .info .price {display:flex; align-items:center; flex-shrink:0; font-size:1.417rem; font-weight:600;} @media all and (max-width:1023px) { #private_list {padding:40px 0 80px;} #private_list .private_title {height:50px; font-size:1.417rem; line-height:50px;} #private_list .list_wrap {padding:40px 30px 62px;} #private_list .list_wrap ul.list {min-height:300px;} #private_list .list_wrap ul.list li {gap:20px; align-items:flex-start;} #private_list .list_wrap ul.list li .info {display:block; width:calc(100% - 100px);} #private_list .list_wrap ul.list li .info .name {font-size:1.25rem;} #private_list .list_wrap ul.list li .info .summary {font-size:1.083rem;} #private_list .list_wrap ul.list li .info .price {padding-top:14px; font-size:1.25rem;} } @media all and (max-width:767px) { #private_list {padding:26px 0 54px;} #private_list .private_title {padding:0 52px; background-size:22px; font-size:1.333rem;} #private_list .list_wrap {padding:30px 20px 40px;} #private_list .list_wrap ul.list li {gap:18px; padding:22px 0;} #private_list .list_wrap ul.list li .info {width:calc(100% - 98px);} #private_list .list_wrap ul.list li .info .name {font-size:1.167rem; letter-spacing:-0.28px;} #private_list .list_wrap ul.list li .info .summary {font-size:1.083rem;} #private_list .list_wrap ul.list li .info .price {padding-top:10px; font-size:1.083rem;} } /* 상품상세페이지(/shop/detail.php) */ #detail .wrap_prd {display:grid; grid-template-columns:560px 1fr; justify-items:start; gap:4%; position:relative; margin-top:33px;} #detail .wrap_prd .prdimg {position:relative; width:100%; margin:0 auto;} #detail .wrap_prd .prdimg img {display:block; max-width:none; width:100%; height:auto;} #detail .wrap_prd .prdimg .swiper-slide img {width:100%; height:auto;} #detail .wrap_prd .prdimg .addimg #product_add_image_list {position:relative;} #detail .wrap_prd .prdimg .addimg .swiper_ctrl {opacity:0; width:50px; height:50px; margin-top:-50px; transition:.3s ease all;} #detail .wrap_prd .prdimg .addimg .swiper_ctrl:after {display:none;} #detail .wrap_prd .prdimg .addimg:hover .swiper_ctrl {opacity:1;} #detail .wrap_prd .prdimg .addimg:hover .swiper_ctrl.swiper-button-disabled {opacity:0;} #detail .wrap_prd .prdimg .addimg .swiper_ctrl.swiper-button-prev {left:0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_arrow_left.png')no-repeat center/50px auto;} #detail .wrap_prd .prdimg .addimg .swiper_ctrl.swiper-button-next {right:0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_arrow_right.png')no-repeat center/50px auto;} #detail .wrap_prd .prdimg .addimg .slide_top .swiper-pagination {display:none;} #detail .wrap_prd .prdimg .addimg .slide_bottom {padding-top:20px;} #detail .wrap_prd .prdimg .addimg .slide_bottom .swiper-slide {overflow:hidden; width:72px; border-radius:4px; border:1px solid #fff; cursor:pointer;} #detail .wrap_prd .prdimg .addimg .slide_bottom .swiper-slide img {display:block; width:100%; height:70px; object-fit:cover;} #detail .wrap_prd .prdimg .addimg .slide_bottom .swiper-slide.swiper-slide-thumb-active {border:1px solid #000;} #detail .wrap_prd > .info {position:relative; width:100%;} #detail.payon .wrap_prd > .info {padding-bottom:100px;} #detail .wrap_prd > .info .share {position:absolute; right:0; top:0;} #detail .wrap_prd > .info .share > .icon {display:block; width:26px; height:28px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_icon_share.png')no-repeat center/25px auto;} #detail .wrap_prd > .info .share > .share_list {display:none; position:relative;} #detail .wrap_prd > .info .share > .share_list .list {display:flex; align-items:center; position:absolute; top:10px; left:50%; transform:translateX(-50%); margin:0; padding:10px 5px; background:#fff; border-radius:6px; border:1px solid #e5e5e5; text-align:left;} #detail .wrap_prd > .info .share > .share_list .list:before {content:''; display:block; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; z-index:0; border-style: solid; border-width: 0 6px 6px 6px; border-color:#e5e5e5 transparent;} #detail .wrap_prd > .info .share > .share_list .list:after {content:''; display:block; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:0; z-index:1; border-style:solid; border-width: 0 6px 6px 6px; border-color:#FFF transparent;} #detail .wrap_prd > .info .share > .share_list > .list > li a {display:block; width:22px; height:20px; margin:0 5px; background-repeat:no-repeat; background-position:center; background-size:22px; text-indent:-9999px; color:transparent; font-size:0;} #detail .wrap_prd > .info .share > .share_list > .list > li.kakao a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/share_kakao.png');} #detail .wrap_prd > .info .share > .share_list > .list > li.kakaostory a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/share_kakaostory.png');} #detail .wrap_prd > .info .share > .share_list > .list > li.facebook a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/share_facebook.png');} #detail .wrap_prd > .info .share > .share_list > .list > li.twitter a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/share_twitter2.png');} #detail .wrap_prd > .info .share > .share_list > .list > li.url a {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/share_url.png');} #detail .wrap_prd > .info > .icon img {width:auto; height:19px; margin:0 4px 10px 0;} #detail .wrap_prd > .info > h3 {padding-right:30px; font-size:2.333rem; font-weight:600; letter-spacing:-0.56px; word-break:break-all; line-height:1.2;} #detail .wrap_prd > .info .summary {padding-top:10px; color:#888; font-size:1.167rem; letter-spacing:-0.28px;} #detail .wrap_prd > .info .review_count {display:flex; align-items:center; gap:8px; padding:10px 0 30px;} #detail .wrap_prd > .info .review_count .grade {position:relative; width:79px; height:14px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/grade.png') no-repeat left top/cover;} #detail .wrap_prd > .info .review_count .grade > i {display:block; height:100%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/grade_over.png') no-repeat left top/79px 14px;} #detail .wrap_prd > .info .review_count .count > a {color:#666; font-size:1.083rem; text-decoration:underline;} #detail .wrap_prd > .info > .price {position:relative; padding-right:120px; line-height:1;} #detail .wrap_prd > .info > .price .per {margin-right:8px; color:#d50c0c; font-size:1.833rem; font-weight:700;} #detail .wrap_prd > .info > .price .discount {display:none;} #detail .wrap_prd > .info > .price .consumerY {display:none;} #detail .wrap_prd > .info > .price .sell, #detail .wrap_prd > .info > .price .discountY {display:inline-block; font-size:1.833rem; font-weight:400;} #detail .wrap_prd > .info > .price .sell strong, #detail .wrap_prd > .info > .price .discountY strong {font-size:inherit; font-weight:700;} #detail .wrap_prd > .info > .price .sellY, #detail .wrap_prd > .info > .price .consumer {display:block; padding-top:7px; color:#999; font-size:1.417rem; font-weight:400; text-decoration:line-through;} #detail .wrap_prd > .info > .price .consumerY {display:none;} #detail .wrap_prd > .info > .price .sellY strong, #detail .wrap_prd > .info > .price .consumer strong {color:inherit; font:inherit;} #detail .wrap_prd > .info > .price .coupon {overflow:hidden; position:absolute; right:0; top:50%; width:110px; margin-top:-18.5px; padding:5px 10px; border-radius:4px; border:1px solid #d50c0c; text-align:left; cursor:pointer;} #detail .wrap_prd > .info > .price .coupon strong {padding-right:35px; color:#d50c0c; font-size:1.167rem; font-weight:400; line-height:25px;} #detail .wrap_prd > .info > .price .coupon strong:after {content:''; display:block; position:absolute; right:0; top:0; width:35px; height:35px; background-repeat:no-repeat; background-position:center; background-color:#d50c0c; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/cpn_download_w.png');} #detail .wrap_prd > .info > .sbs {display:flex; justify-content:center; align-items:center; gap:30px; margin-top:18px; padding:10px 0; background:#F5F6F8; border-radius:6px;} #detail .wrap_prd > .info > .today {display:inline-block; margin:20px auto 0; padding-left:18px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_today.png')no-repeat left top 4px /14px; color:#067DFD; font-size:1.166rem;} #detail .wrap_prd > .info > .today span {padding-left:5px; color:#666; font-weight:500; font-size:1.166rem;} #detail .wrap_prd > .info .list {margin-top:20px; border-top:1px solid #efefef;} #detail .wrap_prd > .info .list > dl {display:flex; align-items:center; gap:0 50px; padding:6px 0;} #detail .wrap_prd > .info .list > dl:first-of-type {padding-top:20px;} #detail .wrap_prd > .info .list > dl:last-child {padding-bottom:12px;} #detail .wrap_prd > .info .list > dl dt, #detail .wrap_prd > .info .list > dl dd {font-size:1.167rem; letter-spacing:-0.28px;} #detail .wrap_prd > .info .list > dl dt {flex:0 0 20%; color:#666;} #detail .wrap_prd > .info .list > dl dd {width:100%;} #detail .wrap_prd > .info .list > dl dd input[type=text] {width:100%;} #detail .wrap_prd > .info .list > dl dd .exp {padding-top:3px; color:#666; font-size:1.083rem;} #detail .wrap_prd > .info .list > dl dd .delivery_fee {padding-right:2px;} #detail .wrap_prd > .info .list > dl dd .box_info {display:inline-block; position:relative; vertical-align:middle;} #detail .wrap_prd > .info .list > dl dd .box_info .info {display:none; position:absolute; left:20px; top:50%; z-index:10; width:150px; margin-top:-22px; padding:10px 15px; border:1px solid #dcdcdc; border-radius:5px; background:#fff;} #detail .wrap_prd > .info .list > dl dd .box_info .info.delivery .tbl_row {padding:0; border:0;} #detail .wrap_prd > .info .list > dl dd .box_info .info.delivery .tbl_row .td {padding-left:5px;} #detail .wrap_prd > .info .list > dl dd .box_info:hover .info {display:block;} #detail .wrap_prd > .info .list > dl dd .box_qty {max-width:120px;} #detail .wrap_prd > .info .list > dl dd select {width:100%; max-width:256px;} #detail .wrap_prd > .info .list > dl dd label {margin:3px 20px 3px 0;} #detail .wrap_prd > .info .list.remove {margin:0; border:0;} #detail .wrap_prd > .info .list.remove dl:first-of-type {padding-top:6px;} #detail .wrap_prd > .info .list.set_table {margin-top:-1px; padding:0;} #detail .wrap_prd > .info .list.set_table > dl {border:0;} #detail .wrap_prd > .info .list.opt_list > dl:last-child {padding-bottom:0;} #detail .wrap_prd > .info .opt_toggle {display:block; overflow:hidden; width:100%;} #detail .wrap_prd > .info .opt_toggle .btn_close {display:none;} #detail .wrap_prd > .info .multi_opt {margin-top:8px;} #detail .wrap_prd > .info .multi_opt .selected_list > li {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:15px; padding:20px; background:#f5f6f8; border-radius:6px;} #detail .wrap_prd > .info .multi_opt .selected_list > li + li {margin-top:10px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .name {width:40%; font-size:1.25rem; letter-spacing:-0.3px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .wrap {display:flex; justify-content:space-between; align-items:center; width:60%;} #detail .wrap_prd > .info .multi_opt .selected_list > li .wrap .box_qty {flex-shrink:0; max-width:120px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .wrap .price {text-align:right;} #detail .wrap_prd > .info .multi_opt .selected_list > li .wrap .price span {font-size:1.25rem;} #detail .wrap_prd > .info .multi_opt .selected_list > li .wrap .del {padding:8px;} #detail .wrap_prd > .info .multi_opt .selected_list > li.stock {position:relative; background-color:#FDF7F7; margin-bottom:50px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .msg {position:absolute; left:0; top:100%; color:#D50C0C;} #detail .wrap_prd > .info .multi_opt .opt_total {display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding:15.5px 0; border-top:1px solid #efefef;} #detail .wrap_prd > .info .multi_opt .opt_total .title {font-size:1.5rem; font-weight:600; letter-spacing:-0.36px;} #detail .wrap_prd > .info .multi_opt .opt_total > div, #detail .wrap_prd > .info .multi_opt .opt_total > div strong {font-size:1.667rem; font-weight:400;} #detail .wrap_prd > .info .multi_opt .opt_total > div strong * {font-weight:700;} #detail .wrap_prd > .info .multi_opt .opt_total > div > .coupon {display:inline-block; margin:-2px 5px 0; padding-right:20px; color:#d50c0c; font-size:1.083rem; font-weight:600; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/cpn_check.png')no-repeat center right/15px auto; letter-spacing:-0.26px; vertical-align:middle; cursor:pointer;} #detail .wrap_prd > .info .restock {display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;} #detail .wrap_prd > .info .restock > p {color:#666; font-size:1.167rem; letter-spacing:-0.28px;} #detail .wrap_prd > .info .restock .i_info {margin:0 2px 0 0;} #detail .wrap_prd > .info .list_set {margin-top:14px; border-bottom:1px solid #efefef; text-align:left;} #detail .wrap_prd > .info .list_set.select {margin-top:-1px;} #detail .wrap_prd > .info .list_set > h3 {padding:20px 0 10px; border:1px solid #efefef; border-width:1px 0; font-size:1.25rem; font-weight:600; letter-spacing:-0.3px;} #detail .wrap_prd > .info .list_set > .box {overflow:auto; max-height:335px;} #detail .wrap_prd > .info .list_set > .box > ul > li {overflow:hidden; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px; position:relative; padding:20px 0; border-top:1px solid #efefef;} #detail .wrap_prd > .info .list_set > .box > ul > li:first-child {border-top:0;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.img {flex:0 0 70px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.img img {width:100%; height:auto; max-height:83px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.info {flex:1 0 auto; width:12%;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.info > p.name {font-size:1.25rem; line-height:16px; letter-spacing:-0.3px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.info > p.price {padding-top:5px; font-size:1.167rem; line-height:normal;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.opt input[type=text], #detail .wrap_prd > .info .list_set > .box > ul > li > div.opt select {display:block; width:100%; margin:10px 0;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.opt label {margin-right:20px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.btn {flex:1 0 auto; text-align:right;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.btn .box_btn a {letter-spacing:-0.15px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.btn .quick {margin-right:6px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.btn .quick a {min-width:40px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_icon_quick.png')no-repeat center center; text-indent:-9999px;} #detail .wrap_prd > .info .pay {position:absolute; bottom:0; left:0; width:100%; margin-top:10px; text-align:right;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn {padding:10px 0 0;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn_fake {display:none;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn {display:flex; align-items:center; gap:7px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.wish {flex:0 0 56px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.wish > * {display:block; min-width:100%; height:56px; padding:0; background-repeat:no-repeat; background-position:center; background-size:30px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/icon_wish.png'); text-indent:-9999px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.wish.on > * {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/icon_wish_on.png');} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.npay {width:50px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.npay > * {display:block; min-width:56px; width:56px; height:50px; padding:0; border:0; background-repeat:no-repeat; background-position:left center; background-size:50px; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/icon_npay.png'); text-indent:-9999px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .btn_col {display:inline-flex; flex:1; gap:7px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn {width:50%;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.soldout {width:100%;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn > * {width:100%; height:56px; font-size:1.5rem; font-weight:600;} #detail .wrap_info {margin-top:90px;} #detail .wrap_info .tab_area {height:62px;} #detail .wrap_info .tab_area > .tab {display:flex; justify-content:center; align-items:center; border:solid #e5e5e5; border-width:1px 0;} #detail .wrap_info .tab_area > .tab li {text-align:center;} #detail .wrap_info .tab_area > .tab li a {display:flex; align-items:center; justify-content:center; min-width:230px; height:60px; color:#999; font-size:1.417rem; letter-spacing:-0.34px; text-align:center; line-height:1.2;} #detail .wrap_info .tab_area > .tab li a.active {border-bottom:2px solid #000; color:#000; font-weight:600;} #detail .wrap_info .tab_area > .tab.fixed {position:fixed; left:0; top:0; z-index:10; width:100%; background:#fff; border-top:0;} #detail .wrap_info .tabcnt_detail {padding-top:100px;} #detail .wrap_info .tabcnt_detail.tabcnt_detail0 * {line-height:normal;} #detail .wrap_info .tabcnt_detail .ref_prd {padding-top:100px;} #detail .wrap_info .prdinfo {margin-top:80px;} #detail .wrap_info .prdinfo h3 {position:relative; padding-bottom:22px; font-size:1.833rem; font-weight:600; line-height:16px; letter-spacing:-0.44px;} #detail .wrap_info .prdinfo div {padding-top:20px; border-top:1px solid #000;} #detail .wrap_info .prdinfo dl {display:flex; border:1px solid #E5E5E5; border-width:1px 1px 0px 1px;} #detail .wrap_info .prdinfo dl:last-child {border-bottom:1px solid #E5E5E5;} #detail .wrap_info .prdinfo dl dt {width:290px; padding:14px 20px; border-right:1px solid #E5E5E5; background:#F5F6F8; font-size:1.167rem; font-weight:500; letter-spacing:-0.28px;} #detail .wrap_info .prdinfo dl dd {width:calc(100% - 290px); padding:14px 20px; font-size:1.167rem; letter-spacing:-0.28px;} #detail .wrap_info .detail_info {text-align:center;} #detail .wrap_info .detail_info .wing-detail-more-cover {background:none;} #detail .wrap_info .detail_info * {font-family:inherit; font-size:inherit; text-align:inherit; line-height:inherit;} #detail .wrap_info .detail_info img {max-width:100%; height:auto; font-size:0; line-height:0;} #detail .wrap_info .tabcnt_detail .btn {margin-top:20px; text-align:right;} #detail .wrap_info .tabcnt_detail .btn.btn_col {justify-content:flex-end;} #detail .tabcnt_detail h3 {position:relative; padding-bottom:22px; font-size:1.833rem; font-weight:600; line-height:16px; letter-spacing:-0.44px;} #detail .tabcnt_detail h3 a {position:absolute; top:8px; right:0; font-size:1.25rem; font-weight:400; letter-spacing:-0.32px;} #detail .tabcnt_detail .tabcnt_detail_box {border-top:1px solid #000;} #detail .tabcnt_detail .tabcnt_detail_box dl {margin-bottom:5px; padding-top:30px;} #detail .tabcnt_detail .tabcnt_detail_box dl br {display:none;} #detail .tabcnt_detail .tabcnt_detail_box dl dt {margin-bottom:10px; font-size:16px; font-weight:600; line-height:20px; letter-spacing:-0.32px;} #detail .tabcnt_detail .tabcnt_detail_box dl dd {color:#666; font-size:14px; font-weight:400; line-height:24px; letter-spacing:-0.28px;} #detail .tabcnt_detail .tabcnt_detail_box dl dd.br {margin-bottom:10px;} #detail .tabcnt_detail .tabcnt_detail_box dl dd.hyphen {position:relative; padding-left:9px;} #detail .tabcnt_detail .tabcnt_detail_box dl dd.hyphen:after {position:absolute; top:0; left:0; color:#666; font-size:14px; font-weight:400; line-height:24px; letter-spacing:-0.28px; content:'-';} #detail .tabcnt_detail .tabcnt_detail_box img {max-width:100%;} #detail .detail_qnarev .title_qnarev {position:relative;} #detail .detail_qnarev h4 {font-size:16px; font-style:normal; font-weight:400; line-height:18px; letter-spacing:-0.32px;} #detail .detail_qnarev h4 span {font-weight:700;} #detail .detail_qnarev h4 + select {position:absolute; top:-4px; right:-12px; z-index:2; width:112px; height:28px; padding:0 31px 0 6px; border:none; background-color:unset; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_select.png'); background-size:12px auto; background-position:right 15px center; font-size:0;} #detail .detail_qnarev h4 + select option {font-size:16px;} #detail .detail_qnarev h4 + select + .text {position:absolute; top:-4px; right:-12px; z-index:1; width:112px; height:28px; padding:0 31px 0 6px; font-size:16px;} #detail .detail_qnarev > .summary {margin-bottom:44px; padding-top:30px; border-top:1px solid #000;} #detail .detail_qnarev > .summary .box {display:flex; justify-content:center; padding:28px 0; border-radius:6px; background:#F5F6F8; text-align:center;} #detail .detail_qnarev > .summary .box h4 {font-size:1.167rem; font-weight:400; line-height:17px;} #detail .detail_qnarev > .summary .box > div.count {margin:0 213px;} #detail .detail_qnarev > .summary .box > div.count > p {margin-top:20px; padding-top:42px; font-size:20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_review_count.png') no-repeat center top/30px; line-height:34px;} #detail .detail_qnarev > .summary .box > div.count > p strong {font-size:2.333rem; line-height:34px;} #detail .detail_qnarev > .summary .box > div {font-size:0;} #detail .detail_qnarev > .summary .box > div.grade .icon {display:inline-block; position:relative; width:124px; height:22px; margin-top:20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/grade.png') no-repeat left top/cover;} #detail .detail_qnarev > .summary .box > div.grade .icon > i {display:block; position:absolute; left:0; top:0; height:100%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/grade_over.png') no-repeat left top/124px 22px;} #detail .detail_qnarev > .summary .box > div.grade .average {margin-top:20px; color:#C2C2C2; font-size:2.333rem; line-height:34px;} #detail .detail_qnarev > .summary .box > div.grade .average strong {color:#000; font-size:inherit;} #detail .detail_qnarev > .summary .box > div.ratio .graph {margin-top:6px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li {display:inline-block; padding:1px 10px; text-align:center;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li span {display:block; font-size:13px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .bar {display:flex; align-items:flex-end; width:6px; height:50px; margin:3px auto 5px; border-radius:5px; background-color:#d4d4d4; font-size:0; text-align:left; line-height:14px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .bar > i {display:inline-block; height:0; border-radius:inherit; background-color:#D9D9D9;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .bar.min > i {background-color:#D9D9D9;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .bar.max > i {background-color:#e35050;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .count {min-width:20px; height:14px; padding:0 5px; border-radius:5px; background-color:#fff; font-size:11px; text-align:center; line-height:14px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .count.max {background-color:#e35050; color:#fff;} #detail .detail_qnarev #detail_review_ajax_list .list {margin-top:19px; border-top:1px solid #000;} #detail .detail_qnarev .list > li {display:flex; width:100%; padding:20px 0; border-bottom:1px solid #e0e0e0;} #detail .detail_qnarev .list > li > .data {width:147px; font-size:0;} #detail .detail_qnarev .list > li > .data .point {display:block; font-size:0;} #detail .detail_qnarev .list > li > .data .grade {display:inline-block; margin-bottom:12.5px; padding-left:5px; font-size:1.083rem; font-weight:400; line-height:14px; vertical-align:top;} #detail .detail_qnarev .list > li > .data .name {display:inline-block; margin-top:1px; font-size:1.083rem; font-weight:400; line-height:14px; vertical-align:top;} #detail .detail_qnarev .list > li > .data .name p {color:#999; font-size:1.083rem; font-weight:400; line-height:14px;} #detail .detail_qnarev .list > li > .data .name p + p {margin-top:3px; line-height:16px;} #detail .detail_qnarev .list > li > .info {width:calc(100% - 147px);} #detail .detail_qnarev .list > li > .info .prd_name {padding-top:10px;} #detail .detail_qnarev .list > li > .info .prd_name a {color:#555; font-size:14px;} #detail .detail_qnarev .list > li > .info .title {display:block; font-size:1.25rem; font-weight:600; line-height:18px;} #detail .detail_qnarev .list > li > .info .title img {width:auto; max-height:19px; vertical-align:middle;} #detail .detail_qnarev .list > li > .info .content {margin-top:10px; color:#333; font-size:1.167rem; font-style:normal; font-weight:400; line-height:18px; letter-spacing:-0.28px;} #detail .detail_qnarev .list > li > .info .more {display:inline-block; margin-top:16px; padding-right:15px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_detailmore.png')no-repeat right center /6px auto; color:#666; font-size:13px; font-weight:400; line-height:16px; letter-spacing:-0.26px;} #detail .detail_qnarev .list > li .upfile {position:relative; width:70px; margin-top:16px; text-align:right; vertical-align:middle;} #detail .detail_qnarev .list > li .upfile > a {display:block; position:relative; overflow:hidden; width:70px; height:70px; vertical-align:middle;} #detail .detail_qnarev .list > li .upfile img {position:absolute; top:50%; left:50%; width:96px; height:auto; transform:translate(-50%, -50%);} #detail .detail_qnarev .list > li .upfile .count {display:block; position:absolute; bottom:0; right:0; width:20px; height:20px; background-color:rgba(0,0,0,0.5); color:#fff; text-align:center;} #detail .detail_qnarev {position:relative;} #detail .detail_qnarev .paging {margin-top:47px; text-align:center;} #detail .detail_qnarev .write {display:inline-block; position:absolute; bottom:8px; right:0; width:76px; height:40px; margin-bottom:0; border:1px solid #000; border-radius:6px; font-size: 15px; font-weight:400; line-height:38px; text-align:center; letter-spacing:-0.15px;} #detail .paging {margin-bottom:115px;} .msg_box {opacity:0; visibility:hidden; position:fixed; top:50%; left:50%; z-index:9999; width:450px; height:150px; margin:-75px 0 0 -225px; border:1px solid #000; background:#fff; font-size:1.25rem; text-align:center; line-height:150px;} .msg_box.on {opacity:1; visibility:visible;} .ui-dialog {width:100% !important; max-width:400px;} @media all and (max-width:1023px) { #detail.payon .wrap_prd > .info {padding-bottom:0 !important;} #detail .wrap_prd {grid-template-columns:repeat(1, 1fr); gap:30px; margin-top:0;} #detail .wrap_prd .prdimg {max-width:100%;} #detail .wrap_prd .prdimg .swiper-slide {width:100% !important;} #detail .wrap_prd .prdimg .addimg .slide_top .swiper_ctrl {display:none;} #detail .wrap_prd .prdimg .addimg .slide_top .swiper-pagination {display:inline-block; left:50%; transform:translateX(-50%); bottom:20px; width:auto; padding:0 10px; border-radius:30px; background:rgba(0,0,0,0.3); color:#fff; font-weight:400;} #detail .wrap_prd .prdimg .addimg .slide_top .swiper-pagination * {color:#fff; font-weight:400;} #detail .wrap_prd .prdimg .addimg .swiper_ctrl {top:50%; margin-top:-25px;} #detail .wrap_prd .prdimg .addimg_element {display:none;} #detail .wrap_prd.wrap_inner2 {padding:0;} #detail .wrap_prd > .info {padding:0 3.16%;} #detail .wrap_prd > .info .share {right:3.16%;} #detail .wrap_prd > .info .share > .share_list .list {display:flex; top:-33px; left:auto; right:0; z-index:10;} #detail .wrap_prd > .info .share > .share_list .list:before {left:auto; right:-10px; top:16px; transform:rotate(90deg);} #detail .wrap_prd > .info .share > .share_list .list:after {left:auto; right:-9px; top:16px; transform:rotate(90deg);} #detail .wrap_prd > .info > h3 {font-size:1.667rem; letter-spacing:-0.4px;} #detail .wrap_prd > .info .summary {font-size:1.083rem; letter-spacing:-0.26px;} #detail .wrap_prd > .info .review_count {padding:10px 0 20px;} #detail .wrap_prd > .info > .price .per {font-size:1.5rem;} #detail .wrap_prd > .info > .price .sell, #detail .wrap_prd > .info > .price .discountY {font-size:1.5rem;} #detail .wrap_prd > .info > .price .sellY, #detail .wrap_prd > .info > .price .consumer {font-size:1.167rem; } #detail .wrap_prd > .info > .price .pop_layer .count {padding:25px 45px;} #detail .wrap_prd > .info .list.opt {margin-top:14px;} #detail .wrap_prd > .info .list > dl {padding:5px 0; gap:0 20px;} #detail .wrap_prd > .info .multi_opt .selected_list > li {display:block; position:relative; margin-top:5px; padding:12px 12px 16px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .name {display:block; width:100%; margin-bottom:8px; font-size:1.083rem; line-height:24px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .wrap {width:100%;} #detail .wrap_prd > .info .multi_opt .selected_list > li .box_qty {width:110px; height:36px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .box_qty .form_input {height:36px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .price span {font-size:1.167rem;} #detail .wrap_prd > .info .multi_opt .opt_total {margin-top:20px; padding:14px 0;} #detail .wrap_prd > .info .list_set > .box {max-height:fit-content;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.info {flex:1; width:auto;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.info > p.name {padding-right:120px; font-size:1.167rem;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.info > p.price {font-size:1.083rem;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.btn .quick {display:none;} #detail .wrap_prd > .info .pay {position:static; margin-bottom:10px;} #detail .wrap_prd > .info .opt_toggle_wrap {width:100%; background:#fff;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn_fake {display:none;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn_real {display:block;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn > * {position:relative; height:50px;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn .p_icon_wrap {position:absolute; top:3px; left:20px;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn .p_icon_wrap span {display:inline-block; width:30px; height:30px;} #detail .wrap_prd .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.wish {flex: 0 0 50px;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn.wish > * {width:50px; height:50px;} /* 스크롤 바텀 고정 */ #detail .wrap_prd > .info .opt_toggle {display:none; position:fixed; left:0; bottom:70px; z-index:45; width:100%; max-height:60dvh; padding:30px 10px 0; background:#fff; border-radius:10px 10px 0 0;} #detail .wrap_prd > .info .opt_toggle .btn_close {display:block; position:absolute; top:0; left:0; z-index:5; width:100%; height:30px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/btn_layer_down.png') no-repeat center/34px auto; font-size:0;} #detail .wrap_prd > .info .opt_toggle_wrap {position:fixed; left:0; bottom:0; z-index:45; width:100%; background:#fff;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn {padding:10px;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn_real {display:none;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn_fake {display:block;} #detail .wrap_prd > .info .opt_toggle .opt_toggle_inner {overflow-y:auto; max-height:calc(60dvh - 30px);} #detail .wrap_info {margin-top:25px;} #detail .wrap_info .tab_area > .tab.scroll_event.fixed.down {top:0; transition: all 0.3s ease-in-out;} #detail .wrap_info .tab_area > .tab li {width:25%;} #detail .wrap_info .tab_area > .tab li a {min-width:auto; font-size:1.25rem;} #detail .wrap_info .tabcnt_detail {padding-top:65px;} #detail .wrap_info .tabcnt_detail .ref_prd {padding-top:65px;} #detail .tabcnt_detail h3 {padding-bottom:18px; font-size:1.333rem;} #detail .tabcnt_detail h3 a {top:0; font-size:1.167rem;} #detail .tabcnt_detail .tabcnt_detail_box dl {padding-top:25px;} #detail .tabcnt_detail .tabcnt_detail_box dl dt {margin-bottom:11px; font-size:13px; line-height:20px; letter-spacing:-0.26px;} #detail .tabcnt_detail .tabcnt_detail_box dl dd {font-size:13px; line-height:21px; letter-spacing:-0.26px;} #detail .tabcnt_detail .tabcnt_detail_box dl dd.br {margin-bottom:20px;} #detail .tabcnt_detail .tabcnt_detail_box dl.type2 dd.hyphen {padding-left:0;} #detail .tabcnt_detail .tabcnt_detail_box dl.type2 dd.hyphen:after {display:none;} #detail .detail_qnarev select {right:0; width:76px; height:28px; background-size:15px; background-position:right 6px center;} #detail .detail_qnarev > .summary .box {justify-content: space-evenly; padding:24px 10px;} #detail .detail_qnarev > .summary .box > div {padding:0 15px;} #detail .detail_qnarev > .summary .box > div.count {display:none;} #detail .detail_qnarev > .summary .box > div.grade .icon {width:104px; height:19px; margin-top:26px;} #detail .detail_qnarev > .summary .box > div.grade .icon > i {background-size:104px 19px;} #detail .detail_qnarev > .summary .box > div.grade .average {margin-top:22px; font-size:2rem; line-height:29px;} #detail .detail_qnarev > .summary .box > div.ratio .graph {margin-top:16px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li {padding:0 5px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .bar {width:6px; height:44px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li span {line-height:19px;} #detail .detail_qnarev > .summary .box > div.ratio .graph > li .count {min-width:18px;} #detail .detail_qnarev select {width:100%; height:48px;} #detail .detail_qnarev .list > li {display:block;} #detail .detail_qnarev .list > li > .data {width:100%; margin-bottom:14px;} #detail .detail_qnarev .list > li > .data .grade {margin:-2px 0 0;} #detail .detail_qnarev .list > li > .info {width:100%;} #detail .detail_qnarev .list > li > .data .name * {display:inline-block; margin-right:3px;} #detail .detail_qnarev .list > li > .data .name p + p {margin-top:9.5px;} #detail .detail_qnarev .list > li > .info .title {font-size:1.167rem;} #detail .detail_qnarev .list > li > .info .content {font-size:1.083rem;} #detail .detail_qnarev .list > li > .info .more {background-size:5.6px;} } @media all and (max-width:767px) { #detail .wrap_prd > .info > .price .pop_layer .count {padding:25px 4.26%;} #detail .wrap_prd > .info .multi_opt .opt_total .title {font-size:1.167rem;} #detail .wrap_prd > .info .multi_opt .opt_total > div, #detail .wrap_prd > .info .multi_opt .opt_total > div strong {font-size:1.167rem;} #detail .wrap_prd > .info .list_set > .box > ul > li {flex-wrap:wrap; gap:0 16px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.opt {width:100%; margin-top:12px;} #detail .wrap_prd > .info .list_set > .box > ul > li > div.btn {position:absolute; right:0; top:30px;} #detail .wrap_prd > .info .pay {text-align:center;} #detail .wrap_prd > .info .opt_toggle_wrap .opt_toggle_btn .btn .box_btn > * {font-size:1.333rem;} /* 스크롤 */ #detail .wrap_prd > .info .opt_toggle.scroll_fix {padding:30px 17px 0;} #detail .wrap_info .tab_area > .tab li a {font-size:1.167rem;} #detail .wrap_info .tab_area > .tab li a.active {border-bottom:2px solid #000;} #detail.top_none .wrap_info .tab_area > .tab.fixed {top:48px;} #detail .wrap_info .prdinfo h3 {padding-bottom:18px; font-size:1.333rem;} #detail .wrap_info .prdinfo div {padding-top:20px; border-top:1px solid #000;} #detail .wrap_info .prdinfo dl {display:flex; border:1px solid #E5E5E5; border-width:1px 1px 0px 1px;} #detail .wrap_info .prdinfo dl:last-child {border-bottom:1px solid #E5E5E5;} #detail .wrap_info .prdinfo dl dt {width:160px; padding:14px 20px; border-right:1px solid #E5E5E5; background:#F5F6F8; font-size:1.083rem; font-weight:500; letter-spacing:-0.28px;} #detail .wrap_info .prdinfo dl dd {width:calc(100% - 160px); padding:14px 20px; font-size:1.083rem; letter-spacing:-0.28px;} #detail .paging {margin-bottom:20px;} .msg_box {top:50%; left:50%; width:80vw; height:150px; margin:-75px 0 0 -40vw;} } /* 상품상세페이지 - 개인결제 (/shop/detail_private.php) */ #detail.private {padding:52px 0 90px; background-color:#D6DADE;} #detail.private .private_box {overflow:hidden; max-width:1200px; margin:0 auto; border-radius:20px; background-color:#fff;} #detail.private .private_title {height:56px; padding:0 57px; background:#000 url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/listtitle_img.png')no-repeat left 24px center; color:#fff; font-size:1.5rem; line-height:56px;} #detail.private .wrap_prd {align-items:center; gap:0; grid-template-columns:repeat(2, 1fr); margin-top:0; padding:50px 10.8% 73px;} #detail.private .wrap_prd:after {content:''; position:absolute; top:50%; right:-17px; z-index:1; width:34px; height:34px; margin-top:-17px; border-radius:50%; background-color:#D6DADE;} #detail.private .wrap_prd > .info {padding-right:28%;} #detail.private .wrap_prd > .info > h3 {padding-right:0; font-size:2.833rem; letter-spacing:-0.68px; text-wrap:auto; word-break:keep-all;} #detail.private .wrap_prd > .info > .price {padding-top:10px; padding-right:0;} #detail.private .wrap_prd > .info > .price .sell {font-weight:600;} #detail.private .wrap_prd > .info > .btn {padding-top:48px;} #detail.private .wrap_prd > .info > .btn .box_btn + .box_btn {margin-top:10px;} #detail.private .wrap_prd > .info > .btn .box_btn > * {width:100%; height:60px; font-size:1.5rem; font-weight:600;} #detail.private .wrap_prd > .info > .btn .btn_order > * {background-color:#222;} #detail.private .wrap_prd > .info > .btn .btn_order:hover > * {background-color:#000; box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.20);} #detail.private .wrap_prd > .info > .btn .btn_cart:hover > * {background-color:#fff; border-color:#000;} #detail.private .wrap_prd > .info > .btn .btn_order span {display:inline-block; padding-right:34px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/private_buy.png') no-repeat right center;} #detail.private .wrap_prd > .info > .btn .btn_cart span {display:inline-block; padding-right:34px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/private_cart.png') no-repeat right center;} @media all and (max-width:1023px) { #detail.private {padding:40px 0 80px;} #detail.private .private_title {height:50px; font-size:1.417rem; line-height:50px;} #detail.private .wrap_prd {padding:70px 35px 59px;} #detail.private .wrap_prd:after {right:-14px; width:28px; height:28px; margin-top:-14px;} #detail.private .wrap_prd > .info {padding-right:16%;} #detail.private .wrap_prd > .info > h3 {font-size:1.833rem; letter-spacing:-0.44px;} #detail.private .wrap_prd > .info > .btn {padding-top:34px;} #detail.private .wrap_prd > .info > .btn .box_btn > * {height:54px; font-size:1.417rem;} } @media all and (max-width:767px) { #detail.private {padding:26px 0 54px;} #detail.private .private_title {padding:0 52px; background-size:22px; font-size:1.333rem;} #detail.private .wrap_prd {display:block; padding:40px 30px 52px;} #detail.private .wrap_prd:after {right:-12px; width:24px; height:24px; margin-top:-12px;} #detail.private .wrap_prd > .info {padding:0 10px 40px;} #detail.private .wrap_prd > .info > .icon, #detail.private .wrap_prd > .info > h3, #detail.private .wrap_prd > .info .summary, #detail.private .wrap_prd > .info > .price {padding-left:10px; padding-right:10px;} #detail.private .wrap_prd > .info > .btn {padding-top:30px;} #detail.private .wrap_prd > .info > .btn .box_btn > * {font-size:1.33rem;} } /* 퀵프리뷰 - 팝업(/shop/detail_popup.php) */ #preview_popup {position:relative; width:1100px; background:none !important;} #detail_pop.pop_layer {position:absolute; width:100%; margin-left:0; transform:translateX(-50%); padding:65px 0 0; z-index:99;} #detail_pop.pop_layer .inner {max-height:610px;} #preview_popup.qd1_scroll2 #detail_pop.pop_layer .inner {max-height:100%;} #detail_pop.pop_layer .btn_col {margin:0;} #detail_pop #detail .wrap_prd {margin:0;} #detail_pop #detail .wrap_prd > .info .share > .share_list .list {z-index:30;} #detail_pop #detail .wrap_prd > .info .share > .share_list .list > li {padding:2px 0;} #detail_pop #detail .wrap_prd > .info > .price {padding-top:20px;} #detail_pop #detail .wrap_prd > .info .multi_opt .selected_list > li .name {flex:0 0 100px; width:100px;} #detail_pop #detail .wrap_prd > .info .multi_opt .selected_list > li .price {width:110px;} #detail_pop.private {overflow-y:auto; position:fixed; top:50%; left:50%; max-height:100dvh; transform:translate3d(calc(-50% + 0.5px), calc(-50% + 0.5px), 0);} #detail_pop.private .private {padding:0; background-color:transparent;} #detail_pop.private .close {display:inline-block; position:absolute; top:15px; right:15px; width:24px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ad_close_w.png') no-repeat center / 18px; cursor:pointer;} #detail_pop.private .wrap_prd:after {display:none;} @media all and (max-width:1023px) { #preview_popup {width:100% !important;} #detail_pop.private {width:92% !important;} #detail_pop.pop_layer {height:100dvh;} #detail_pop.pop_layer .inner {max-height:100% !important;} } #review_list .list {margin:19px 0; border-top:1px solid #000;} #review_list .list > li {display:flex; width:100%; padding:20px 0; border-bottom:1px solid #e0e0e0;} #review_list .list > li > .data {width:147px; font-size:0;} #review_list .list > li > .data .point {display:block; font-size:0;} #review_list .list > li > .data .grade {display:inline-block; margin-bottom:12.5px; padding-left:5px; font-size:1.083rem; font-weight:400; line-height:14px; vertical-align:top;} #review_list .list > li > .data .name {display:inline-block; margin-top:1px; font-size:1.083rem; font-weight:400; line-height:14px; vertical-align:top;} #review_list .list > li > .data .name p {color:#999; font-size:1.083rem; font-weight:400; line-height:14px;} #review_list .list > li > .data .name p + p {margin-top:3px; line-height:16px;} #review_list .list > li > .info {width:calc(100% - 147px);} #review_list .list > li > .info .prd_name {padding-top:10px;} #review_list .list > li > .info .prd_name a {color:#555; font-size:14px;} #review_list .list > li > .info .title {display:block; font-size:1.25rem; font-weight:600; line-height:18px;} #review_list .list > li > .info .title img {width:auto; max-height:18px; vertical-align:middle;} #review_list .list > li > .info .content {margin-top:10px; color:#333; font-size:1.167rem; font-style:normal; font-weight:400; line-height:18px; letter-spacing:-0.28px;} #review_list .list > li > .info .more {display:inline-block; margin-top:16px; padding-right:15px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/btn_more.png')no-repeat right center; color:#666; font-size:13px; font-weight:400; line-height:16px; letter-spacing:-0.26px;} #review_list .list > li .upfile {position:relative; width:70px; margin-top:16px; text-align:right; vertical-align:middle;} #review_list .list > li .upfile > a {display:block; position:relative; overflow:hidden; width:70px; height:70px; vertical-align:middle;} #review_list .list > li .upfile img {position:absolute; top:50%; left:50%; width:96px; height:auto; transform:translate(-50%, -50%);} #review_list .list > li .upfile .count {display:block; position:absolute; bottom:0; right:0; width:20px; height:20px; background-color:rgba(0,0,0,0.5); color:#fff; text-align:center;} @media all and (max-width:1023px) { #review_list .list > li {display:block;} #review_list .list > li > .data {width:100%; margin-bottom:14px;} #review_list .list > li > .data .grade {margin:-2px 0 0;} #review_list .list > li > .info {width:100%;} #review_list .list > li > .data .name * {display:inline-block; margin-right:3px;} #review_list .list > li > .data .name p + p {margin-top:9.5px;} #review_list .list > li > .info .title {font-size:1.167rem;} #review_list .list > li > .info .content {font-size:1.083rem;} #review_list .list > li > .info .more {background-size:5.6px;} } /* 상품이미지줌 - 팝업(/shop/zoom.php) */ #__booster_zoom_layer {position:fixed; top:120px; left:10%; z-index:100;} #zoomimg {position:relative; width:600px; max-width:40vw; border-radius:0px 0px 10px 10px; background:#fff; border:1px solid #E5E5E5; background:#FFF; box-shadow:6px 6px 6px 0px rgba(0, 0, 0, 0.05);} #zoomimg h2 {height:56px; padding:0 60px 0 20px; background:#000; color:#fff; font-size:1.417rem; font-weight:600; text-align:left; line-height:56px;} #zoomimg .inner {overflow-y:auto; max-height:70vh; overscroll-behavior:none;} #zoomimg .img {margin:20px 20px 10px; text-align:center;} #zoomimg .img #mimg_div {position:relative; width:100%; height:0; padding-bottom:100%;} #zoomimg .img img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;} #zoomimg .list {overflow:hidden; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 20px; padding-bottom:30px;} #zoomimg .list li {width:92px; height:92px;} #zoomimg .list li img {display:block; width:100%; height:100%; object-fit:cover;} #zoomimg span {position:absolute; right:24px; top:16px; z-index:5; background:none;} #zoomimg span > * {display:block; width:20px; height:20px; min-height:auto; padding:0; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/ad_close.png')no-repeat center; font-size:0;} #zoom_img {z-index:5;} @media all and (max-width:1023px) { #zoomimg {display:none !important; top:0; left:0; width:100%; height:100%; max-height:100%; z-index:50;} #zoom_img {display:none;} #zoom_cursor {display:none;} } /* 입점사,무료배송안내 - 장바구니(/shop/cart.php) */ .enterprise {padding-top:40px;} .enterprise.head {padding-top:20px;} .enterprise.headY {padding-top:0;} .enterprise .msg_delivery {margin-bottom:20px; padding:10px 20px 10px 45px; border-radius:6px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_cart_delivery.png') no-repeat left 20px center /17px auto #FAFBFC; font-size:1.083rem;} .enterprise .msg_delivery strong {font-weight:600;} @media all and (max-width:1023px) { .enterprise {padding-top:30px;} } /* 장바구니(/shop/cart.php) */ #cart h3.title {margin-top:70px;} #cart .tab_sbs {display:flex; margin-bottom:40px;} #cart .tab_sbs li {flex:1;} #cart .tab_sbs li a {display:flex; align-items:center; justify-content:center; height:54px; border:1px solid #ECECEC; border-radius:6px 0 0 6px; background-color:#F5F6F8; color:#999; font-size:1.417rem;} #cart .tab_sbs li:last-child a {border-radius:0 6px 6px 0;} #cart .tab_sbs li.active a {border-color:#000; background-color:#fff; color:#000; font-weight:600;} #cart .tab_sbs li a span {display:inline-block; margin-left:5px;} #cart .cart_wrap {display:flex;} #cart .area_left {width:70%; padding-right:4%;} #cart .cart_chk {display:flex; align-items:center; justify-content:space-between; padding:18px 0;} #cart .cart_chk label {font-size:1.33rem; font-weight:600;} #cart .cart_chk .btn_chk_del {display:inline-block; padding-right:20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_del_sml.png') no-repeat right center /10px; color:#666; font-size:1.25rem;} #cart .tbl_col.prd > .tbody > li.prdimg .img {display:flex; align-items:center; justify-content:space-between;} #cart .tbl_col.prd > .tbody > li.prdimg .img .btn_wish {display:block; position:absolute; right:7px; bottom:7px;} #cart .tbl_col.prd > .tbody > li.prdimg .img .btn_wish a {display:block; width:24px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_shop_wish.png') no-repeat center /24px auto; color:transparent; font-size:0;} #cart .tbl_col.prd > .tbody > li.prdimg .img .btn_wish a.wish_on {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_shop_wish_on.png');} #cart .tbl_col.prd > .tbody > li.prd {position:relative; padding-right:28px;} #cart .tbl_col.prd > .tbody > li.prd .btn_del > a {display:inline-block; position:absolute; top:18px; right:0; width:28px; height:28px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_del.png') no-repeat center /28px; color:transparent; font-size:0;} #cart .tbl_col.prd > .tbody > li.btn span + span {margin-top:6px;} #cart .tbl_col.prd > .tbody > li.total .before {display:none;} #cart .tbl_col.prd > .tbody > li.total.is_sale .before {display:block; color:#999; font-weight:400; text-decoration:line-through;} #cart .tbl_col.prd > .tbody.set > li.prdimg .img {padding-left:55px; background-position:left 40px center;} #cart .cart_btn {padding-top:20px;} #cart .cart_btn .msg {padding-top:20px; color:#888; font-size:1.167rem;} #cart .cart_btn .msg > p {position: relative; padding-left: 10px;} #cart .cart_btn .msg > p::after {position: absolute; left: 0; top: 0; color: #888; font-size: 1.167rem; content: '-';} #cart .area_right {flex-shrink:0; width:30%; max-width:360px;} #cart .area_right .inner {position:sticky; top:101px;} #cart .area_right .box {padding:30px 22px 25px; border:1px solid #EFEFEF; border-radius:6px 6px 0 0; background-color:#fff;} #cart .area_right .btn .box_btn > * {border-radius:0;} #cart .area_right .btn_cpn {margin-top:20px;} #cart .area_right .btn_cpn > * {height:44px; border:1px solid #d50c0c; background:#fff; color:#d50c0c; font-size:1.333rem; letter-spacing:-0.32px;} #cart .area_right .btn_order > * {border-radius:0 0 6px 6px;} #cart .area_right .pay {margin-top:20px; text-align:right;} #cart .related {width:calc(100% - 360px); padding-right:48px;} #cart .related .relate_slide {position:relative; padding-bottom:60px;} #cart .related .relate_slide.prd_basic .box .name a {padding-top:15px;} #cart .related .relate_slide.prd_basic .box .price {padding-top:8px;} #cart .related .relate_slide .relate_ctrl {top:auto; bottom:0; width:30px; height:30px; border-radius:4px; border:1px solid #E5E5E5;} #cart .related .relate_slide .swiper-button-prev {left:auto; right:50%; margin-right:30px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_arrow_left.png')no-repeat center/30px;} #cart .related .relate_slide .swiper-button-prev:after {display:none;} #cart .related .relate_slide .swiper-button-next {left:50%; right:auto; margin-left:30px;background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/detail_arrow_right.png')no-repeat center/30px;} #cart .related .relate_slide .swiper-button-next:after {display:none;} #cart .related .relate_slide .swiper-pagination {bottom:5px;} #cart .related .relate_slide .swiper-pagination * {font-size:1.083rem;} #cart .related .relate_slide .swiper-pagination .swiper-pagination-total {color:#999;} @media all and (max-width:1023px) { #cart .tab_sbs {margin-bottom:30px;} #cart .cart_wrap {display:block;} #cart .area_left {width:100%; padding-right:0;} #cart .cart_chk label {font-size:1.25rem;} #cart .cart_btn .msg {font-size:1.083rem;} #cart .cart_btn .msg > p::after {font-size: 1.083rem;} #cart .area_right {width:100%; max-width:100%; margin-top:50px;} #cart .area_right .inner {position:static;} #cart .area_right .btn_order.fixed {position:fixed; left:0; bottom:0; z-index:45; width:100%;} #cart .area_right .btn_order.fixed > * {height:60px; border-radius:0;} #cart .related {width:100%; padding-right:0;} } @media all and (max-width:767px) { #cart .tab_sbs li a {height:42px; font-size:1.167rem;} #cart .cart_chk {padding:30px 0 14px;} #cart .cart_chk label, #cart .cart_chk .btn_chk_del {font-size:1.167rem;} #cart .tbl_col.prd > .tbody:not(.set) {border-color:#000;} #cart .tbl_col.prd > .tbody:last-child:not(.set) {border-color:#EFEFEF;} #cart .tbl_col.prd > .tbody > li {margin-left:125px;} #cart .tbl_col.prd > .tbody > li.prdimg .img {width:110px;} #cart .tbl_col.prd > .tbody > li.prd .btn_del > a {top:0;} #cart .tbl_col.prd > .tbody > li.btn {display:flex; gap:8px; margin-left:0; margin-top:15px;} #cart .tbl_col.prd > .tbody > li.btn span + span {margin-top:0;} #cart .tbl_col.prd > .tbody > li.btn .box_btn {flex:1;} #cart .tbl_col.prd > .tbody > li.total.is_sale .before {display:inline-block;} #cart .tbl_col.prd > .tbody.set > li.prdimg .img {padding-left:45px; background-position:left 30px center;} #cart .tbl_col.prd > .tbody.set > li.total, #cart .tbl_col.prd > .tbody.set > li.btn {margin-left:45px !important;} #cart .cart_btn .msg {font-size:1rem;} #cart .cart_btn .msg > p::after {font-size: 1rem;} #cart .relate_slide {margin:0 -4.26%; padding:0 4.26%;} } /* 장바구니 입점몰 계산 박스 */ #cart .cart_sum {display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #EFEFEF;} #cart .cart_sum .delivery_msg {font-size:1.167rem; font-weight:600;} #cart .cart_sum .prc_order {width:280px; margin-bottom:0; padding:24px 0; background:none;} #cart .cart_sum .prc_order::after {display:none;} #cart .cart_sum .prc_order dl {font-size:1.167rem;} #cart .cart_sum .prc_order .total.sbs_pay dd {color:#000 !important;} @media all and (max-width:767px) { #cart .cart_sum .delivery_msg {width:40%; font-size:1.083rem;} #cart .cart_sum .prc_order {width:60%;} #cart .cart_sum .prc_order dl {font-size:1.083rem;} } /* 장바구니 옵션 변경 */ #option_change_layer {position:fixed; left:0; top:0; z-index:15; width:100%; height:100%; z-index:100; background:rgba(0,0,0,0.5);} .cart_change_option {width:410px; margin-left:-205px;} .cart_change_option .inner {max-height:340px;} .cart_change_option .opt {padding:22px 0;} .cart_change_option .opt span {display:inline-block; width:100%; padding:5px 0; font-size:1.167rem;} .cart_change_option .box {padding-bottom:20px;} .cart_change_option .box:first-child {padding-top:28px;} .cart_change_option .box + .box {padding-top:20px; border-top:1px solid #EFEFEF;} .cart_change_option .box > h5 {font-size:1.25rem; font-weight:400; letter-spacing:-0.3px; line-height:normal;} .cart_change_option .box select {width:100%; height:44px; color:#666;} .cart_change_option .box .box_qty {width:100%; margin-top:15px;} .cart_change_option .box .form_input {width:100%; height:44px;} .cart_change_option .box ul li {margin-top:15px;} .cart_change_option .box ul li label {margin-right:15px; color:#666;} .cart_change_option .btn {margin-top:20px;} /* 주문서(/shop/order.php) */ #order h3.title {display:flex; align-items:center; gap:8px; position:relative; margin-top:55px;} #order h3.title.pay_methods {display:none;} #order h3.title > span {color:#999;} #order h3.title > span.name {font-size:1.25rem;} #order h3.title > .btr {position:absolute; top:-5px; right:40px;} #order h3.title > .box_btn {right:0;} #order p.msg {color:#999; font-size:1.083rem;} #order .ord_wrap {display:flex;} #order .area_left {width:70%; padding-right:4%;} #order .guest {margin-bottom:55px;} #order .guest .ckbox {color:#666; font-size:1.167rem;} #order .guest .box {margin-top:15px; padding-top:20px; border-top:1px solid #000;} #order .guest .box dl {font-size:1.167rem;} #order .guest .box dl + dl {padding-top:10px;} #order .guest .box dl dd {color:#999;} #order .btn_toggle {position:relative; cursor:pointer;} #order .btn_toggle::after {content:''; position:absolute; top:0; right:0; width:30px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_toggle_up.png') no-repeat right center /30px auto; cursor:pointer; transition:.2s;} #order .btn_toggle.active::after {transform:rotate(180deg);} #order .btn_toggle .name {color:#888; font-size:1.25rem; font-weight:500; letter-spacing:-0.3px;} #order .box_cart .tbl_col {border-top:none;} #order .box_cart .cart_btn {display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-top:10px;} #order .box_cart .cart_btn .btn {margin-left:auto;} #order .box_cart .enterprise.headY {margin-top:20px;} #order .box_cart .enterprise .tbl_col {border-top:1px solid #EFEFEF;} #order .benefit_wrap {padding:10px 0; border-bottom:1px solid #EFEFEF;} #order .benefit_wrap .input_wrap {padding:10px 0; border-bottom:0;} #order .input_wrap {padding:20px 0; border-bottom:1px solid #EFEFEF;} #order .input_wrap > li {position:relative; padding-left:140px; font-size:1.25rem;} #order .input_wrap > li + li {margin-top:8px;} #order .input_wrap > li .label {display:flex; align-items:center; position:absolute; top:0; left:0; width:140px; height:48px; padding-right:10px; color:#333; font-size:1.25rem;} #order .input_wrap > li.center .label {top:50%; margin-top:-20px;} #order .input_wrap > li .input_box {display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; width:100%; max-width:420px; min-height:48px;} #order .input_wrap > li .input_box + .input_box {margin-top:8px;} #order .input_wrap > li .msg {padding-top:10px; color:#999; font-size:1.083rem;} #order .input_wrap.benefit > li .input_box {max-width:100%;} #order .input_wrap.benefit > li .input_box .form_input {width:306px;} #order .input_wrap.benefit > li .input_box .has {color:#999; font-size:1.167rem;} #order .input_wrap > li .input_box.nowrap {flex-wrap:nowrap;} #order .input_wrap > li .ckbox {padding:10px 0;} #order .input_wrap > li .order_dlv_msg {position:relative;} #order .input_wrap > li .order_dlv_msg .form_input {position:relative; padding-right:45px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_select.png') no-repeat right 5px center /30px auto; cursor:pointer;} #order .input_wrap > li .order_dlv_msg ul {position:absolute; left:0; top:100%; width:100%; z-index:5; padding:10px 0; border:1px solid #E5E5E5; border-radius:6px; background-color:#fff;} #order .input_wrap > li .order_dlv_msg ul li {font-size:1.25rem; padding:5px 15px; cursor:pointer;} #order .input_wrap > li .order_dlv_msg ul li:hover {background-color:#F5F6F8;} #order .input_wrap > li.country select {width:100%;} #order .input_wrap > li.addfd .input_box input[type="text"] {height:46px; padding:0 14px; border:1px solid #E5E5E5; border-radius:6px; background:#fff; font-size:1.25rem; letter-spacing:-0.01em; transition:all .3s ease;} #order .input_wrap > li.addfd .input_box input[type="text"]:focus {border-color:#000; outline:none !important;} #order .input_wrap > li .addr_def p {margin-bottom:10px; line-height:14px;} #order .input_wrap > li .addr_def p#default_addr {margin-bottom:30px;} #order .input_wrap > li .addr_def p strong {font-size:1.333rem; font-weight:600; letter-spacing:-0.32px;} #order .input_wrap > li .addr_def p .tag {display:inline-block; margin-left:8px; width:68px; height:28px; border-radius:2px; background-color:#F5F6F8; color:#000; font-size:1.083rem; font-weight:400; line-height:28px; text-align:center;} #order .input_wrap > li .addr_def .addr_msg {display:inline-block; margin-top:7px; font-size:1.25rem;} #order .oncpn .used_cpn_list li {margin-top:10px;} #order .oncpn .used_cpn_list li p {display:inline-block; padding:6px 10px 6px 30px; border-radius:4px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_red_ck.png') no-repeat left 10px center /11.5px auto #FDF7F7; color:#D50C0C; font-size:1.083rem;} #order .oncpn .used_cpn_list li p strong {font:inherit;} #order .offcpn #off_cpn_div2, #order .offcpn #off_cpn_img2 {display:none;} #order .offcpn #off_cpn_div2[style*='display: block'] {display:flex !important; gap:30px;} #order .method.pay_methods {display:none;} #order .method .pay_type_list {display:flex; gap:10px; flex-wrap:wrap; padding:30px 0; border-bottom:1px solid #EFEFEF;} #order .method .pay_type_list li {width:190px; padding-top:0;} #order .method .pay_type_list li input {display:none;} #order .method .pay_type_list li label {display:flex; align-items:center; justify-content:center; gap:5px; height:46px; margin-right:0; border:1px solid #E5E5E5; border-radius:4px; cursor:pointer; transition: all .2s ease;} #order .method .pay_type_list li label:hover {background:#f6f6f6;} #order .method .pay_type_list li input:checked + label {border-color:#000;} #order .method .pay_type_list li label input {display:none;} #order .method .pay_type_list li.simple label {background-repeat:no-repeat; background-position:center; color:transparent; font-size:0;} #order .method .pay_type_list li label[for="pay_type1"] {gap:10px;} /* 신용카드 */ #order .method .pay_type_list li label[for="pay_type1"]::before {width:24px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_card.png')no-repeat center/cover; content:'';} /* 신용카드 */ #order .method .pay_type_list li label[for="pay_type2"] {gap:10px;} /* 무통장입금 */ #order .method .pay_type_list li label[for="pay_type2"]::before {width:24px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_bank.png')no-repeat center/cover; content:'';} /* 무통장입금 */ #order .method .pay_type_list li label[for="pay_type7"] {gap:10px;} /* 휴대폰 */ #order .method .pay_type_list li label[for="pay_type7"]::before {width:15px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_phon.png')no-repeat center/cover; content:'';} /* 휴대폰 */ #order .method .pay_type_list li label[for="pay_type4"] {gap:10px;} /* 계좌이체 */ #order .method .pay_type_list li label[for="pay_type4"]::before {width:24px; height:18px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_account.png')no-repeat center/cover; content:'';} /* 계좌이체 */ #order .method .pay_type_list li label[for="pay_type5"] {gap:10px;} /* 가상계좌 */ #order .method .pay_type_list li label[for="pay_type5"]::before {width:24px; height:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_transfer.png')no-repeat center/cover; content:'';} /* 가상계좌 */ #order .method .pay_type_list li.ptype22 label {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_toss.png'); background-size:88px;} #order .method .pay_type_list li.ptype25 label {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_naver.png'); background-size:52px;} /* 네이버페이 */ #order .method .pay_type_list li.ptype27 label {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_payco.png'); background-size:52px;} /* 페이코 */ #order .method .pay_type_list li.ptype28 label {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_samsung.png'); background-size:116px;} /* 삼성페이 */ #order .method .pay_type_list li.ptype17 label {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_payco.png'); background-size:52px;} #order .method .pay_type_list li.ptype12 label {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_pay_kakao.png')no-repeat center/52px;} #order .method .pay_type_list li.mix label {font-size:0.917rem;} /* 네이버페이 아이콘 + 텍스트 형 */ #order .method .pay_type_list li.mix label img {width:60px;} /* 네이버페이 아이콘 + 텍스트 형 */ #order .method #bank_list_span {display:block; width:100%;} #order .method #bank_list_span select {width:100%;} #order .method p.msg {padding-top:10px;} #order .method p.msg + p.msg {padding-top:2px;} #order .area_right {width:30%; max-width:360px;} #order .area_right .inner {position:sticky; top:101px;} #order .area_right .box {padding:30px 22px 0; border:1px solid #EFEFEF; border-radius:6px 6px 0 0; background-color:#fff;} #order .area_right .box .reconfirm {display:block; padding:20px 0 40px; letter-spacing:-0.02em;} #order .area_right #order3 .btn_pay > * {height:60px; border-radius:0 0 6px 6px;} @media all and (max-width:1023px) { #order h3.title > .box_btn.btr * {width:91px; height:34px;} #order h3.title > span.name {font-size:1.167rem;} #order h3.title > .btr {top:-9px;} #order .ord_wrap {display:block;} #order .area_left {width:100%; padding-right:0;} #order .input_wrap > li .input_box {min-height:46px;} #order .input_wrap > li .label, #order .input_wrap > li .input_box .form_input, #order .input_wrap > li .input_box select {height:46px;} #order .input_wrap > li .input_box .box_btn.gray > * {height:46px;} #order .input_wrap.benefit > li .input_box .form_input {width:206px;} #order .benefit_wrap {padding:14px 0;} #order .benefit_wrap .input_wrap {padding:6px 0;} #order .input_wrap > li .addr_def p {font-size:1.167rem;} #order .input_wrap > li .addr_def p strong {font-size:1.25rem;} #order .input_wrap > li .addr_def p#default_addr {margin-bottom:18px;} #order .method .pay_type_list li {width:130px;} #order .method .pay_type_list li label[for="pay_type1"] {gap:8px;} /* 신용카드 */ #order .method .pay_type_list li label[for="pay_type2"] {gap:8px;} /* 무통장입금 */ #order .method .pay_type_list li label[for="pay_type4"] {gap:5px;} /* 계좌이체 */ #order .method .pay_type_list li label[for="pay_type5"] {gap:6px;} /* 가상계좌 */ #order .area_right {width:100%; max-width:100%; margin-top:50px;} #order .area_right .inner {position:static;} #order .area_right #order3 .btn_pay.fixed {position:fixed; left:0; bottom:0; z-index:50; width:100%;} #order .area_right #order3 .btn_pay.fixed > * {height:60px; border-radius:0;} } @media all and (max-width:767px) { #order h3.title {margin-top:40px;} #order h3.title > span.name {font-size:1.083rem;} #order h3.title > .btr {top:-12px;} #order p.msg {font-size:1rem;} #order .guest .ckbox {font-size:1.083rem;} #order .guest .box dl {font-size:1.083rem;} #order .input_wrap > li {padding-left:80px;} #order .input_wrap > li .label {width:80px; height:40px; font-size:1.083rem;} #order .input_wrap > li .input_box {min-height:40px;} #order .input_wrap > li .input_box .form_input, #order .input_wrap > li .input_box select {height:40px; font-size:1.083rem;} #order .input_wrap > li .input_box .box_btn.gray > * {height:40px;} #order .input_wrap > li .input_box.cash {flex-wrap:wrap;} #order .input_wrap > li .input_box.cash select {width:100%;} #order .benefit_wrap {padding:9px 0;} #order .benefit_wrap .input_wrap {padding:11px 0;} #order .input_wrap > li .addr_def p {font-size:1.083rem;} #order .input_wrap > li .addr_def p strong {font-size:1.167rem;} #order .input_wrap > li .addr_def p#default_addr {margin-bottom:22px;} #order .input_wrap > li .addr_def .addr_msg {margin-top:0; font-size:1.167rem;} #order .input_wrap.benefit > li .input_box .form_input {width:calc(100% - 74px);} #order .input_wrap.benefit > li .input_box .has {font-size:1.083rem;} #order .input_wrap.benefit > li .box_btn.gray > * {width:64px; min-width:64px;} #order .input_wrap > li .order_dlv_msg ul li {font-size:1.083rem;} #order .method .pay_type_list {padding:20px 0;} #order .method .pay_type_list li {width:100%;} #order .method .pay_type_list li label {height:42px;} #order .method .pay_type_list li label[for="pay_type4"] {gap:6px;} /* 계좌이체 */ #order .area_right h3.title {font-size:1.5rem;} #order .area_right .box .reconfirm {padding:25px 0 35px; font-size:1.083rem;} } /* 주문서 통합 쿠폰 레이어 */ #pop_order_cpn_list {width:570px; margin-left:-285px;} #pop_order_cpn_list h5 {margin-top:30px; font-size:1.33rem; font-weight:400;} #pop_order_cpn_list h5 span {color:#666;} #pop_order_cpn_list .common_cpn_list {margin-top:20px;} @media all and (max-width:767px) { #pop_order_cpn_list h5 {font-size:1.167rem;} } /* 주문완료(/shop/order_finish.php) */ #orderfin {width:100%; max-width:700px;} #orderfin .mo_br {display: none;} #orderfin .box_mp .num {padding-bottom:15px; font-size:1.833rem;} #orderfin .box_mp .msg {color:#666;} #orderfin .box_mp .msg strong {color:#000;} #orderfin h3.title {display:flex; align-items:flex-end; justify-content:space-between;} #orderfin .box_addr {padding:20px 0; border-bottom:1px solid #EFEFEF;} #orderfin .box_addr p {color:#333; font-size:1.167rem;} #orderfin .box_addr p + p {margin-top:3px;} #orderfin .tbl_col_og {border-top:none;} #orderfin .tbl_col_og > tbody > tr > th, #orderfin .tbl_col_og > tbody > tr > td {padding:4px 0;} #orderfin .tbl_col_og > tbody > tr:first-child > th, #orderfin .tbl_col_og > tbody > tr:first-child > td {padding-top:20px;} #orderfin .tbl_col_og > tbody > tr:last-child > th, #orderfin .tbl_col_og > tbody > tr:last-child > td {padding-bottom:20px;} #orderfin .btn {width:100%; max-width:370px; margin-top:40px;} @media all and (max-width:1023px) { #orderfin .box_mp .num {font-size:1.667rem;} } @media all and (max-width:767px) { #orderfin .mo_br {display: block;} #orderfin .box_mp .num {font-size:1.33rem;} #orderfin .box_addr p {font-size:1.083rem;} } /* 프로모션 기획전(/shop/promotion.php) */ .speical_group > .intro > .title {display:flex; align-items:center; justify-content:space-between; margin-bottom:35px; padding-bottom:15px; border-bottom:1px solid #000;} .speical_group > .intro > .title > h3 {font-size:1.33rem; font-weight:400;} .speical_group > .intro > .title > span {color:#666; font-size:1.167rem;} .speical_group > .intro > .summary {margin-bottom:40px;} .speical_group > .intro > .summary img {max-width:100%;} .speical_group > .box {text-align:center;} .speical_group > .box > h4 {padding-bottom:15px; font-size:1.583rem; text-align:left;} .speical_group > .box > .img {margin-bottom:30px;} .speical_group > .box > .img img {max-width:100%;} .speical_group > .box > .img.mobile {display:none;} @media all and (max-width:767px) { .speical_group > .intro > .title {margin-bottom:20px;} .speical_group > .intro > .title > h3 {font-size:1.167rem;} .speical_group > .intro > .title > span {font-size:1.083rem;} .speical_group > .intro > .summary {margin-bottom:20px;} .speical_group > .box > h4 {font-size:1.25rem;} .speical_group > .box > .img.pc {display:none;} .speical_group > .box > .img.mobile {display:block;} } /* 상품문의 & 마이페이지 상품문의 (/shop/product_qna.php & /shop/product_review.php & /mypage/qna_list.php) */ .qnarev_list .btn_col {gap:4px; padding:15px 0; text-align:right;} .qnarev_list .btn {text-align:right;} .qnarev_list > .prd_wrap {margin-bottom:30px; padding:30px; background:#F5F6F8; border-radius:6px;} .qnarev_list > .prd_wrap .prd_inner {display:flex; justify-content:center; align-items:center; gap:30px; position:relative; max-width:475px; margin:0 auto;} .qnarev_list > .prd_wrap .img {flex:0 0 140px;} .qnarev_list > .prd_wrap .img img {width:100%; height:auto;} .qnarev_list > .prd_wrap .info {flex:1 1 auto; min-height:140px;} .qnarev_list > .prd_wrap .info .name {padding-bottom:10px; font-size:1.167rem; letter-spacing:-0.14px;} .qnarev_list > .prd_wrap .info .name img {max-height:19px; margin-right:2px; vertical-align:middle;} .qnarev_list > .prd_wrap .info ul li {color:#666; font-size:1.083rem; letter-spacing:-0.13px;} .qnarev_list > .prd_wrap .info ul li * {color:inherit; font:inherit;} .qnarev_list > .prd_wrap .info ul li .nprice {text-decoration:line-through;} .qnarev_list > .prd_wrap .info ul li strong {color:#000;} .qnarev_list > .prd_wrap .info > .btn_col {gap:4px; position:absolute; right:-15px; bottom:-15px; padding-top:15px;} .qnarev_list > .tbl_toggle .content .box_btn * {font-size:1.167rem;} @media all and (max-width:767px) { .qnarev_list .btn_col {justify-content:flex-start;} .qnarev_list > .prd_wrap {justify-content:flex-start; padding:20px;} .qnarev_list > .prd_wrap .prd_inner {padding-bottom:48px;} .qnarev_list > .prd_wrap .img {flex:0 0 100px;} .qnarev_list > .prd_wrap .info {min-height:auto;} .qnarev_list > .prd_wrap .info > .btn_col {right:auto; left:0;} } /* 상품문의 & 상품후기 - 리스트 (/shop/product_review_list.php & /shop/product_qna_list.php) */ #qnarev_list_all .board_search {padding-bottom:35px;} #qnarev_list_all .board_search form {display:flex; justify-content:center; gap:9px;} #qnarev_list_all .board_search select {padding-right:43px; border-color:#F6F6F6; background-color:#F6F6F6;} #qnarev_list_all .board_search .search_box {max-width:400px; margin:0;} #qnarev_list_all .total_sort {margin:0; padding-bottom:20px;} #qnarev_list_all .total_sort select {min-width:88px; line-height:normal;} #qnarev_list_all .btn {margin-top:20px; text-align:right;} .tbl_qnarev {border-top:1px solid #000;} .tbl_qnarev .table > li {display:flex; align-items:center; gap:25px; padding:20px 0; border-bottom:1px solid #efefef;} .tbl_qnarev .table > li .img {flex:0 0 65px;} .tbl_qnarev .table > li .img img {width:100%; height:auto;} .tbl_qnarev .table > li .box {display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;} .tbl_qnarev .table > li .box .subject {flex:1;} .tbl_qnarev .table > li .box .subject .prd {line-height:normal;} .tbl_qnarev .table > li .box .subject .prd a {color:#666; font-size:1.167rem; letter-spacing:-0.28px;} .tbl_qnarev .table > li .box .subject .title {padding-top:10px; font-size:1.25rem; font-weight:600; letter-spacing:-0.3px;} .tbl_qnarev .table > li .box .subject .title * {max-height:14px; font:inherit; vertical-align:middle;} .tbl_qnarev .table > li .box .subject .title img {max-height:19px; height:19px;} .tbl_qnarev .table > li .box .subject .content {padding:3px 0 9px; color:#333; font-size:1.167rem; letter-spacing:-0.28px;} .tbl_qnarev .table > li .box .subject .content * {color:inherit; font:inherit;} .tbl_qnarev .table > li .box .subject .more {display:inline-block; padding-right:15px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/btn_more.png')no-repeat right center; color:#666; font-size:1.083rem; letter-spacing:-0.26px;} .tbl_qnarev .table > li .box .grade_point .gradebox {margin-right:5px; vertical-align:middle;} .tbl_qnarev .table > li .box .grade_point .grade {font-size:1.083rem; vertical-align:middle;} .tbl_qnarev .table > li .box .stat {font-size:1.167rem;} .tbl_qnarev .table > li .box > p {flex-shrink:0; width:100px; font-size:1.167rem; letter-spacing:-0.28px; text-align:center;} .tbl_qnarev .table > li.notice .subject .title {padding:0; font-size:1.333rem; letter-spacing:-0.32px;} .tbl_qnarev .table > li.notice .subject .title * {font-size:inherit; font-weight:400;} .tbl_qnarev .table > li.notice .subject .title strong {font-weight:700;} .tbl_qnarev .table > li.notice .subject .title a {font-weight:400;} .tbl_qnarev .table > li.notice .subject .admin {padding-top:10px; color:#666; font-size:1.167rem;} .tbl_qnarev .table > li.notice .subject .admin span {margin:0 3px; color:#e5e5e5;} .tbl_qnarev > .content {display:none; padding:30px; border-bottom:1px solid #efefef;} @media all and (max-width:1023px) { .tbl_qnarev .table > li {gap:16px;} .tbl_qnarev .table > li .box .subject .prd a {font-size:1.083rem;} .tbl_qnarev .table > li .box .subject .title {padding-top:10px; font-size:1.167rem;} .tbl_qnarev .table > li .box .subject .content {padding:6px 0 10px; font-size:1.083rem;} .tbl_qnarev .table > li .box .subject .more {font-size:1rem;} .tbl_qnarev .table > li .box > p {width:75px; font-size:1.083rem;} } @media all and (max-width:767px) { .tbl_qnarev .table > li {padding:12px 0;} .tbl_qnarev .table > li .img {float:left;} .tbl_qnarev .table > li .box {display:block; width:auto; font-size:0;} .tbl_qnarev .table > li .box .subject {padding-bottom:14px;} .tbl_qnarev .table > li .box .grade_point {padding-bottom:10px; line-height:normal;} .tbl_qnarev .table > li .box > p {display:inline-block; width:auto; margin-right:10px; vertical-align:middle; line-height:normal;} } /* 포토후기 */ .total_review_list {display:grid; grid-template-columns:repeat(4 , minmax(calc(25% - 20.25px),calc(25% - 20.25px))); gap:27px;} .total_review_list > li {padding:15px; border-radius:6px; border:1px solid #efefef;} .total_review_list > li .box {display:flex; flex-direction:column; justify-content:space-between; height:100%;} .total_review_list > li .box .img_wrap {width:100%;} .total_review_list > li .box .img_wrap .img img {width:100%; height:auto;} .total_review_list > li .box .img_wrap .title {overflow:hidden; display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1; padding-top:15px; font-size:1.25rem; font-weight:600; letter-spacing:-0.3px;} .total_review_list > li .box .img_wrap .title img {width:auto; max-height:19px; height:19px; vertical-align:middle;} .total_review_list > li .box .img_wrap .content {overflow:hidden; padding-top:10px; color:#333; font-size:1.167rem; letter-spacing:-0.28px; word-break:break-all; word-wrap:break-word;} .total_review_list > li .box .info_wrap {padding-top:16px;} .total_review_list > li .box .info_wrap .date {color:#999; font-size:1.083rem;} .total_review_list > li .box .info_wrap .prd_info {display:flex; align-items:center; gap:5px 10px; margin-top:20px; padding-top:20px; border-top:1px solid #efefef;} .total_review_list > li .box .info_wrap .prd_info .name a {font-size:1.083rem; letter-spacing:-0.13px;} .total_review_list > li .box .info_wrap .prd_info .star {padding-top:5px;} .total_review_list > li .box .info_wrap .prd_info .star * {font-size:1.083rem;} @media all and (max-width:1023px) { .total_review_list {gap:22px; grid-template-columns:repeat(3, minmax(calc(33.33% - 18.67px),calc(33.33% - 18.67px)));} .total_review_list > li {padding:18px;} .total_review_list > li .box .img_wrap .title {font-size:1.167rem;} .total_review_list > li .box .img_wrap .content {font-size:1.083rem; line-height:1.5;} .total_review_list > li .box .info_wrap .date {font-size:1rem;} .total_review_list > li .box .info_wrap .prd_info .img img {width:30px;} .total_review_list > li .box .info_wrap .prd_info .name a {font-size:1rem;} } @media all and (max-width:767px) { .total_review_list {gap:20px 4%; grid-template-columns:repeat(2, minmax(48%,48%));} .total_review_list > li {padding:14px;} .total_review_list > li .box .info_wrap .prd_info {flex-wrap:wrap;} } /* 상품후기 - 열람 레이어 */ .layer_review_list {position:fixed; top:50%; left:50%; transform:translate(-50% , -50%); width:100%; max-width:1235px; z-index:100; background:transparent;} .layer_review_list h3 {display:none;} .layer_review_list .inner {overflow-y:scroll; position:relative; width:calc(100% - 120px); height:650px; margin:0 auto; background:#fff;} .layer_review_list .inner .btn_close {display:block; position:absolute; top:24px; right:24px; width:22px; height:22px; z-index:30; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_close.png') no-repeat center/22px; color:transparent; font-size:0;} .layer_review_list .inner .review_list_wrap {display:grid; grid-template-columns:650px 1fr; height:100%;} .layer_review_list .inner .rev_img {position:relative; width:100%; max-height:650px; height:100%; background-color:#f1f2f3;} .layer_review_list .inner .rev_img > .add_slide {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:auto;} .layer_review_list .inner .rev_img > .add_slide .swiper-slide {width:100% !important;} .layer_review_list .inner .rev_img > .add_slide img {width:100%; height:auto;} .layer_review_list .inner .info {width:100%; padding:52px 30px; background-color:#fff;} .layer_review_list .inner .info > .prd {display:flex; align-items:center; gap:16px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #efefef;} .layer_review_list .inner .info > .prd > h2 {font-size:1.167rem; font-weight:400; letter-spacing:-0.14px;} .layer_review_list .inner .info > .prd > .img {flex:0 0 65px; height:65px;} .layer_review_list .inner .info > .prd > .img img {width:100%; height:100%; max-height:65px;} .layer_review_list .inner .info > .board {position:relative; padding-bottom:15px; border-bottom:1px solid #efefef;} .layer_review_list .inner .info > .board .btn_col {margin:0; gap:5px;} .layer_review_list .inner .info > .board > .btn_col {position:absolute; right:0; top:20px;} .layer_review_list .inner .info > .board > .grade > .score {font-size:1.083rem; vertical-align:middle;} .layer_review_list .inner .info > .board > .name {padding-top:12px; color:#999; font-size:1.083rem;} .layer_review_list .inner .info > .board > .subject {padding-top:30px; font-size:1.25rem; font-weight:600; letter-spacing:-0.3px;} .layer_review_list .inner .info > .board > .content {padding-top:10px; color:#333; font-size:1.167rem; letter-spacing:-0.28px;} .layer_review_list .inner .info > .board > .content * {color:inherit; font:inherit;} .layer_review_list .inner .info > .board > .recommend {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding-top:78px; color:#888; font-size:1.167rem; letter-spacing:-0.28px;} .layer_review_list .inner .info > .board > .recommend > .btn_col {float:right;} .layer_review_list .inner .info > .board > .recommend .box_btn a {min-width:74px; padding:0 10px 0 46px; background-repeat:no-repeat; background-position:14px center; font-size:1.083rem; letter-spacing:-0.28px;} .layer_review_list .inner .info > .board > .recommend .box_btn a.yes {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/recommend_yes.png');} .layer_review_list .inner .info > .board > .recommend .box_btn a.no {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/recommend_no.png');} .layer_review_list .inner .info > .comment {margin:15px 0;} .layer_review_list .inner .info > .comment > .guest {width:100%; margin-top:5px; padding:15px 20px; background:#F5F6F8; color:#666; font-size:1.167rem; text-align:center; letter-spacing:-0.28px;} .layer_review_list .inner .info > .comment > .guest > a {margin-left:16px; color:#000; font-weight:600;} .layer_review_list .inner .info > .comment > form .write {overflow:hidden; position:relative; margin-top:10px; padding-right:66px; border-radius:6px; border:1px solid #E5E5E5; background-color:#fff; text-align:left;} .layer_review_list .inner .info > .comment > form .write textarea.form_input {height:50px; min-height:50px; border:0; font-size:1.167rem; letter-spacing:-0.14px;} .layer_review_list .inner .info > .comment > form .write .btn_comment {display:inline-block; position:absolute; right:0; top:0; width:66px; height:100%; text-align:center; border:0; background-color:#000; color:#fff; font-size:1.25rem; font-weight:bold; line-height:100%; cursor:pointer; letter-spacing: -0.15px;} .layer_review_list .inner .info > .comment > .list {position:relative; margin-top:20px;} .layer_review_list .inner .info > .comment > .list > li {position:relative; margin-top:5px; padding:15px 20px; border-radius:6px; background:#F6F6F6;} .layer_review_list .inner .info > .comment > .list > li > .cnt {display:block; padding-bottom:3px;} .layer_review_list .inner .info > .comment > .list > li > .cnt strong {display:inline-block; max-width:calc(100% - 110px); font-size:1.167rem; font-weight:600; letter-spacing:-0.14px;} .layer_review_list .inner .info > .comment > .list > li > .cnt .content {flex:auto; font-size:1.167rem; word-break:break-all; letter-spacing:-0.14px;} .layer_review_list .inner .info > .comment > .list > li > .date {display:block; position:absolute; top:12px; right:10px; padding-right:32px; color:#888; font-size:1.083rem; text-align:right; line-height:28px; letter-spacing:-0.13px;} .layer_review_list .inner .info > .comment > .list > li > .date a {position:absolute; right:0; top:50%; margin-top:-14px; height:28px;} .layer_review_list .inner .info > .comment > .list > li > .date img {width:28px; height:auto;} .layer_review_list .move {position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; background-repeat:no-repeat; background-position:center; text-indent:-9999px; cursor:pointer;} .layer_review_list .move.prev {left:0; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/review_arrow_left.png');} .layer_review_list .move.next {right:0; background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/review_arrow_right.png');} .layer_review_list .move.end:before, .layer_review_list .move.end:after {background-color:#818181;} .layer_review_list.upfile_cnt0 {max-width:930px;} .layer_review_list.upfile_cnt0 h3 {display:block;} .layer_review_list.upfile_cnt0 .inner {height:auto; max-height:100svh; padding:45px 35px;} .layer_review_list.upfile_cnt0 .inner .review_list_wrap {grid-template-columns:1fr;} .layer_review_list.upfile_cnt0 .inner .rev_img {display:none !important;} .layer_review_list.upfile_cnt0 .inner .info {padding:20px 0 0;} .layer_review_list.upfile_cnt2 .inner .rev_img > .add_slide {height:100%;} @media all and (max-width:1235px) { .layer_review_list .inner .review_list_wrap {grid-template-columns:1fr 1fr;} } @media all and (max-width:1023px) { .layer_review_list {top:0; left:0; width:100% !important; height:100% !important; transform:none; padding-top:100px; background:#fff;} .layer_review_list .inner {width:100%; height:100%; padding:0 45px;} .layer_review_list .inner .btn_close {position:fixed; top:0; right:45px; height:100px;} .layer_review_list .inner .review_list_wrap {display:block; height:auto;} .layer_review_list .inner .rev_img {overflow:hidden; height:auto;} .layer_review_list .inner .rev_img > .add_slide {position:static; transform:none;} .layer_review_list .inner .info {padding:0;} .layer_review_list .inner .info > .prd {position:fixed; left:0; top:0; width:100%; padding:20px 45px; background:#fff;} .layer_review_list .inner .info > .prd > .img {flex:0 0 50px; height:50px;} .layer_review_list .inner .info > .prd > .img img {max-height:50px;} .layer_review_list .inner .info > .board {margin:0; padding:25px 0 15px; border-width:0 0 1px 0;} .layer_review_list .inner .info > .board > .subject {padding-top:20px; font-size:1.167rem;} .layer_review_list .inner .info > .board > .content {font-size:1.083rem;} .layer_review_list .inner .info > .board > .recommend {padding-top:90px; font-size:1.083rem;} .layer_review_list .move {display:none;} .layer_review_list.upfile_cnt0 {max-width:100%; padding-top:0;} .layer_review_list.upfile_cnt0 .inner {height:100%; padding:65px 45px;} .layer_review_list.upfile_cnt0 .inner .info > .prd {position:static; padding:0 0 20px 0;} .layer_review_list.upfile_cnt0 .inner .info > .board {border-width:1px 0;} } @media all and (max-width:767px) { .layer_review_list {padding-top:90px;} .layer_review_list .inner {padding:0 4.26%;} .layer_review_list .inner .btn_close {top:17px; right:4.26%; height:24px;} .layer_review_list .inner .info > .prd {padding:20px 50px 20px 4.26%;} .layer_review_list.upfile_cnt0 .inner {padding:65px 4.26%;} } /* 설문조사 */ #poll .subject {padding:24px 0; border-top:1px solid #000; font-size:1.5rem; font-weight:600; line-height:21px; letter-spacing:-0.36px;} #poll .box {margin-bottom:40px; padding:50px; background:#F5F6F8;} #poll .box .inner {padding:0 50px; background:#fff;} #poll .box .inner img {max-width:100%;} #poll .box .inner p.name {padding:50px 0 30px; color:#333; font-size:2rem; font-weight:600; text-align:center; line-height:29px; letter-spacing:-0.48px;} #poll .box .inner .vote {margin-top:40px;} #poll .box .inner .vote .poll_list {padding:22px 0; border-bottom:1px solid #EFEFEF;} #poll .box .inner .vote .poll_list .top {margin-bottom:8px; font-size:1.25rem; font-weight:400; line-height:14px; letter-spacing:-0.3px;} #poll .box .inner .vote .poll_list .bottom {display:flex; position:relative; width:180px;} #poll .box .inner .vote .poll_list .graph_wrap {width:150px; margin-left:30px; padding:5px 0;} #poll .box .inner .vote .poll_list .graph_wrap .graph {height:7px; border-radius:30px; background:#000;} #poll .box .inner .vote .poll_list .text {position:absolute; top:0; width:93px; margin-left:30px;} #poll .box .inner .vote .poll_list .text span {display:inline-block; margin-right:8px; font-size:1.167rem; font-weight:400; line-height:14px; letter-spacing:-0.28px;} #poll .box .inner .btn {padding:40px 0 50px; font-size:1.333rem; text-align:center;} #poll .box .inner .btn .box_btn * {width:300px; height:50px; font-size:1.333rem; line-height:50px;} #poll .box .inner .btn .box_btn wisamall {display:none;} #poll .comment_box {margin-bottom:40px; padding:30px; border-radius:6px; border:1px solid #EFEFEF; background:#FFF;} #poll .write_comment .user {gap:8px; padding-bottom:12px;} #poll .write_comment .user * {width:242px;} #poll .tbl_col > .tbody > li.tal {font-weight:600;} @media all and (max-width:1023px) { #poll {padding:0 38px;} #poll .box {padding:30px;} #poll .box .inner {padding:0 30px;} #poll .box .inner p.name {padding:40px 0 20px; font-size:1.667rem;} #poll .box .inner .btn {padding:40px 0;} #poll .write_comment .user * {width:200px;} } @media all and (max-width:767px) { #poll {padding:0 20px;} #poll .subject {font-size:1.333rem;} #poll .box {padding:20px;} #poll .box .inner {padding:0 20px;} #poll .box .inner p.name {padding:30px 0 20px; font-size:1.5rem;} #poll .box .inner .vote .poll_list .top {font-size:1.167rem;} #poll .box .inner .vote .poll_list .text span {font-size:1.083rem;} #poll .box .inner .btn {padding:40px 0 30px;} #poll .box .inner .btn .box_btn {width:100%;} #poll .box .inner .btn .box_btn * {width:100%;} #poll .comment_box {padding:20px;} #poll .write_comment .user {gap:6px;} #poll .write_comment .user * {width:calc(50% - 3px);} #poll .tbl_col > .tbody > li.m_none {display:none;} #poll .tbl_col > .tbody > li.m_inline {display:inline-block;} #poll .tbl_col > .tbody > li.m_inline + li {position:relative; padding-left:18px;} #poll .tbl_col > .tbody > li.m_inline + li:after {position:absolute; top:6px; left:8px; width:1px; height:11px; background:#E5E5E5; content:'';} } /* 퀵카트 */ .wing_quick_cart_layer1 {display:none; position:relative;} .wing_quick_cart_layer1:after {position:absolute; top:-8px; right:6px; z-index:100; width:17px; height:12px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/quick_after2.png')no-repeat; content:'';} .quickcart {position:relative;} .quickcart h3 {position:relative; padding:27px 20px 14px; font-size:1.417rem; font-weight:600; line-height:20px; text-align:left;} .quickcart h3 a {display:inline-block; position:absolute; top:24px; right:20px; width:20px; height:20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_close.png')no-repeat center/16px;} .quickcart .quick_btn {display:block; padding:0 20px} .quickcart .quick_btn * {display:block; width:100%; height:37px; border-radius:6px; border:1px solid #E5E5E5;; font-weight:400; font-size:1.167rem; line-height:37px; letter-spacing:-0.14px;} .quickcart .quick_btn *:hover {border-color:#000;} .quickcart > a {display:inline-block; position:relative; width:32px; height:64px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_cart.png')no-repeat center/32px; padding:0 10px; color:#666; font-size:0; line-height:30px;} .quickcart > a:hover {color:#d53838;} .quickcart .list {overflow:hidden; position:absolute; right:0; z-index:99; width:300px; border-radius:6px; background:#fff; box-shadow:0px 19px 40px 0px rgba(0, 0, 0, 0.2);} .quickcart_col {overflow-y:auto; width:100%; max-height:35svh; padding:0 20px; table-layout:fixed; border-collapse:collapse; text-align:center;} .quickcart_col ul {display:flex; align-items:center; position:relative; padding:10px 0; border-bottom:1px solid #e6e6e6;} .quickcart_col ul li {width:calc(100% - 110px); text-align:left; padding:10px 0;} .quickcart_col ul li + li {width:100%; margin:0;} .quickcart_col ul li.prdimg {width:56px; margin:0 10px 0 0 !important;} .quickcart_col ul.set .prdimg {width:76px; padding-left:20px;} .quickcart_col ul.set .prdimg {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_set.png') no-repeat left center;} .quickcart_col ul li.prdimg .img {position:relative;} .quickcart_col ul li.prdimg .img > a > img {width:56px; height:auto;} .quickcart_col ul li.prdimg .img .del {position:absolute; top:10px; right:10px;} .quickcart_col ul li p {width:calc(100% - 50px); margin-bottom:2px; font-size:1.083rem;} .quickcart_col ul li p a {font-size:1.083rem;} .quickcart_col ul li p.name a {font-size:1.167rem;} .quickcart .list .box_price {padding:30px; padding-bottom:0; border-top:1px solid #000; background:#fff;} .quickcart .list .btn * {border-radius:0px;} .quickcart .list .btn > span {margin-top:10px;} .quick_cart_cnt {position:absolute; top:12px; right:-5px; width:20px; height:20px; border-radius:50%; background:#000; color:#fff; font-size:1rem; font-weight:500; letter-spacing:-0.05em; line-height:20px; text-align:center;} .wing_quick_cart_layer2 {display:none; position:fixed; top:0; left:0; z-index:21; width:100%; height:100svh;} .wing_quick_cart_layer2 .list {height:100svh;} .quick_button {position:fixed; top:50%; right:0;} .quickcart2 > a {display:inline-block; position:relative; z-index:10; width:48px; height:48px;} .quickcart2 .quick_wrap {padding:0 25px 85px; background:#fff;} .quickcart2 .quick_toggle {overflow:auto; position:fixed; top:0; z-index:40; width:100%; height:100%; background-color:rgba(0,0,0,0.4); transition:all 0.3s ease-in-out; color:#000;} .quickcart2 .quick_toggle .quick_box {float:right; width:390px; height:100svh; padding:26px 0 165px; background-color:#fff;} .quickcart2 .quick_toggle h3.title {position:relative; padding-bottom:26px; color:#000; font-size:1.833rem; text-align:left;} .quickcart2 .quick_btn {display:block; margin-top:20px; text-align:center;} .quickcart2 .quick_btn * {display:block; width:100%; height:40px; border-radius:6px; border:1px solid #E5E5E5; color:#000; font-weight:400; font-size:1.25rem; line-height:40px; letter-spacing:-0.14px;} .quickcart2 .quick_btn *:hover {border-color:#000;} .quickcart2 .quick_toggle .btn_close {display:block; position:absolute; right:0; top:0; width:22px; height:22px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_close.png') no-repeat center/22px; color:transparent; font-size:0;} .quickcart2 .quick_toggle .empty {display:flex; align-items:center; justify-content:center; height:96%; color:#222 !important;} .quickcart2 .quick_toggle .prd_basic {border-top:none;} .quickcart2 .quick_toggle .prd_basic > li {display:flex; align-items:center; gap:20px; padding:0; padding:20px 0; border:none; border-bottom:1px solid #EFEFEF;} .quickcart2 .quick_toggle .prd_basic .box {position:relative;} .quickcart2 .quick_toggle .prd_basic .box.set .prdimg {padding-left:20px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_set.png') no-repeat left center;} .quickcart2 .quick_toggle .prd_basic .box .del {display:inline-block; position:absolute; top:20px; right:8px; width:20px; height:20px; padding:8px;} .quickcart2 .quick_toggle .prd_basic .box .name {padding-top:0;} .quickcart2 .quick_toggle .prd_basic .box .price {padding-top:8px; font-size:1.167rem;} .quickcart2 .quick_toggle .prd_basic .box {font-size:1rem;} .quickcart2 .quick_toggle .prd_basic .box .img {width:110px;} .quickcart2 .quick_toggle .prd_basic .box .info {width:calc(100% - 110px); padding-right:30px;} .quickcart2 .quick_toggle .prd_basic .box .name a {font-size:1.25rem; font-weight:500;} .quickcart2 .quick_toggle .prd_basic .box .opt {padding-top:3px; color:#616161;} .quickcart2 .quick_toggle .box_price {margin-top:20px;} .quickcart2 .quick_toggle .btn {overflow:auto; position:fixed; bottom:0; z-index:40; width:390px; background-color:#fff; transition:all 0.3s ease-in-out;} .quickcart2 .quick_toggle .btn > span {margin-top:6px;} .quickcart2 .quick_toggle .btn > span * {height:60px; border-radius:0; font-size:1.5rem; line-height:60px;} .quickcart2 .quick_toggle.is_show, .quickcart2 .quick_toggle.is_show .btn {visibility:visible; right:0;} .quickcart2 .quick_order {padding:19px 25px; background:#F5F6F8;} .quickcart2 .quick_order dl {padding:6px 0; font-size:1.25rem;} @media all and (max-width:1023px) { .quickcart .list {right:-19px; width:100vw;} .quickcart_col ul {gap:10px;} } @media all and (max-width:767px) { .quickcart > a {height:48px;} .quickcart .list {right:-12px;} .quickcart2 {width:32px;} .quickcart2 > a {width:32px;} .quickcart2 .quick_toggle .quick_box {width:100%;} .quickcart2 .quick_toggle .btn_close {top:-6px;} .quickcart2 .quick_simple {position:relative; width:32px; height:48px; border:0; background: url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_cart.png')no-repeat center / 32px;} .quickcart2 .quick_simple h3 {display:none; width:30px; padding:10px; border-radius:10px 0 0 10px; text-align:center;} .quickcart2 .quick_simple > div {display:none;} .quickcart2 .quick_toggle .btn {width:100%;} } /* 상품문의 & 상품후기 - 쓰기 */ .qnarev_write_popup {position:fixed; left:50%; top:50%; max-width:700px; width:100%; height:880px; z-index:100; margin:-440px 0 0 -350px; background:#fff;} .qnarev_write_popup > .tit_wrap {position:relative; width:100%; padding:45px 35px 0;} .qnarev_write_popup > .tit_wrap .qnarev_write_title {padding-bottom:20px; border-bottom:1px solid #000; color:#000; font-size:1.833rem; font-weight:600; line-height:26px; letter-spacing:-0.22px;} .qnarev_write_popup > .tit_wrap .close {position:absolute; top:24px; right:24px; width:22px; height:22px; z-index:101; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_close.png')no-repeat center/22px;} .qnarev_write_popup > .qnarev_write {overflow-y:auto; height:100%; max-height:788px; padding:0 35px 25px;} .qnarev_write_popup > .qnarev_write fieldset > legend {display:none;} .qnarev_write form {display:inline-block; width:100%; text-align:left;} .qnarev_write fieldset > legend {display:block; width:100%; padding-bottom:20px; border-bottom:1px solid #000; font-size:1.833rem; font-weight:bold; line-height:26px;} .qnarev_write fieldset > div {position:relative; margin-top:10px; padding-left:110px; font-size:1.167rem;} .qnarev_write fieldset > div .fake_input {height:48px; padding:0 14px; border:1px solid #E5E5E5; border-radius:6px; line-height:48px;} .qnarev_write fieldset > div .check {display:block; margin-top:10px;} .qnarev_write fieldset > div textarea {line-height:1.6; height:200px;} .qnarev_write fieldset > div > label {position:absolute; left:0; top:50%; margin-top:-10px; font-size:1.167rem; letter-spacing:-0.28px;} .qnarev_write fieldset > div > select {width:100%; height:45px; color:#666; line-height:1;} .qnarev_write fieldset > div > input {width:100%; height:45px;} .qnarev_write fieldset > div > input::placerholder {color:#666; font-size:1.167rem;} .qnarev_write fieldset > div.grade {margin-top:0; padding:0 0 20px 0; text-align:center;} .qnarev_write fieldset > div.grade .msg {padding:30px 0 11px; font-size:1.333rem; font-weight:600; line-height:normal; letter-spacing:-0.32px; line-height:19px;} .qnarev_write fieldset > div.grade .gradebox {width:160px; height:29px; margin:0; cursor:pointer;} .qnarev_write fieldset > div.grade .gradebox:after {z-index:1;} .qnarev_write fieldset > div.grade label {position:relative; z-index:20; margin:0; cursor:pointer; vertical-align:top;} .qnarev_write fieldset > div.grade input {opacity:0; width:32px; height:28px; margin:0; cursor:pointer;} .qnarev_write fieldset > div .box {padding:10px 0; padding-left:49px; border-radius:6px; background:#F5F6F8 url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/review_point.png')no-repeat left 15px center; line-height:normal;} .qnarev_write fieldset > div .box p {margin-bottom:1px; font-size:1.083rem; font-weight:600; line-height:normal; letter-spacing:-0.26px;} .qnarev_write fieldset > div .box span {font-size:1.083rem; font-weight:400; line-height:normal; letter-spacing:-0.24px;} .qnarev_write fieldset > div.file {line-height:48px;} .qnarev_write fieldset > div.file .filebox {position:relative; display:inline-block; margin:0 18px 0 0;} .qnarev_write fieldset > div.file .filebox .icon {display:inline-block; position:static; width:70px; height:45px; margin-top:0; border-radius:6px; border:1px solid #E5E5E5; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_file.png') no-repeat center /20px auto; color:transparent; font-size:0;} .qnarev_write fieldset > div.file .filebox .upload_name {display:inline-block; margin-left:10px; color:#666; font-size:1.167rem;} .qnarev_write fieldset > div.file .filebox .upload_name label {margin-left:8px; font-size:inherit;} .qnarev_write fieldset > div.file .filebox .upload_name label input {margin-right:3px;} .qnarev_write fieldset > div.file .filebox .file_input {/* display:none; */} .qnarev_write .btn {padding:30px 0; font-size:0; text-align:center !important;} .qnarev_write .btn .box_btn * {width:115px; height:40px; margin:0 5px; font-size:1.167rem; line-height:40px;} @media all and (max-width:1023px) { .qnarev_write_popup {left:0; top:0; z-index:100; margin:0; max-width:100%; height:100dvh;} .qnarev_write_popup > .tit_wrap {position:fixed; top:0; left:0; height:90px; z-index:30; padding:0 38px; background:#fff;} .qnarev_write_popup > .tit_wrap .qnarev_write_title {padding-bottom:40px; font-weight:400; line-height:50px; text-align:center;} .qnarev_write_popup > .tit_wrap .close {right:auto; top:0; left:16px; z-index:35; width:24px; height:50px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/hd_back.png')no-repeat center / 24px; color:transparent; font-size:0;} .qnarev_write_popup > .qnarev_write {max-height:100%; padding:90px 38px 25px;} .qnarev_write fieldset > div {margin-top:12px; padding-left:132px;} .qnarev_write fieldset > div > input {height:48px;} .qnarev_write fieldset > div > select {height:48px;} .qnarev_write fieldset > div textarea {height:150px;} .qnarev_write fieldset > div .box {margin:-2px 0 8px;} .qnarev_write fieldset > div .box p {font-size:1rem;} .qnarev_write fieldset > div .box span {font-size:1rem;} .qnarev_write fieldset > div.file .filebox .icon {height:55px;} .qnarev_write .btn .box_btn * {width:112px; height:44px; margin:0 5px; font-size:1.25rem; line-height:44px;} } @media all and (max-width:767px) { .qnarev_write_popup > .tit_wrap {position:static; height:auto; padding:63px 17px 0;} .qnarev_write_popup > .tit_wrap .qnarev_write_title {padding-bottom:20px; font-size:1.667rem; font-weight:600; text-align:left; line-height:24px; letter-spacing:-0.2px;} .qnarev_write_popup > .tit_wrap .close {position:absolute; left:auto; top:19px; right:12px; width:22px; height:22px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_close.png')no-repeat center/22px;} .qnarev_write_popup > .qnarev_write {max-height:calc(100% - 108px); padding:0 17px 25px;} .qnarev_write fieldset > div {min-height:auto; margin-top:24px; padding:24px 0 0;} .qnarev_write fieldset > div > label {top:0; margin:0; line-height:14px;} .qnarev_write fieldset > div .box {margin:-38px 0 0;} .qnarev_write fieldset > div.file .filebox {margin:0 18px 18px 0;} } /* 상품문의, 상품후기 - 비밀번호 확인 */ .pwbox_popup {position:fixed; left:50%; top:50%; z-index:100; margin:-131px 0 0 -570px; width:1140px; padding:0 60px;} #pwbox h3 {padding:3px 0 10px; font-weight:400; line-height:17px; letter-spacing:-0.28px;} #pwbox p {margin-bottom:20px; color:#666; font-size:1.083rem; line-height:20px; letter-spacing:-0.26px;} #pwbox .form_input {width:100%; max-width:300px; margin-bottom:20px;} .pwbox_popup #pwbox {padding:40px 0; border-radius:6px; border:1px solid #F5F6F8; background:#F5F6F8; text-align:center !important;} @media all and (max-width:1023px) { .pwbox_popup {left:0; width:100%; margin:-130px 0 0 0; padding:0 30px;} } /* 상품문의 & 상품후기 - 수정 */ #qnarevmod .modi_pwd, #qnarevmod .modi_cnt {display:none;} /* 마이페이지 상품후기 */ #mypage_review_list.tbl_qnarev {border-top:0;} #mypage_review_list.tbl_qnarev .table {border-top:1px solid #000;} /* 주문서 나의 주소록 레이어 (주문서, 주문완료, 주문상세) */ #pop_addr_list {width:470px; margin-left:-235px;} #pop_addr_list form {height:100%;} #pop_addr_list .tab_addr_list {display:flex; margin-top:20px; padding:0 34px;} #pop_addr_list .tab_addr_list li {width:33.33%; flex-shrink: 1;} #pop_addr_list .tab_addr_list li:nth-child(2) {width:33.44%;} #pop_addr_list .tab_addr_list li:nth-child(2) a {border-width:1px 0;} #pop_addr_list .tab_addr_list li a {display:block; width:100%; border:1px solid #E5E5E5; color:#333; font-size:1.167rem; line-height:42px; text-align:center; letter-spacing:-0.28px;} #pop_addr_list .tab_addr_list li a.active {border-width:1px; border-color:#000; font-weight:600;} #pop_addr_list .tab_addr_list li:first-child a {border-radius: 6px 0px 0px 6px;} #pop_addr_list .tab_addr_list li:last-child a {border-radius: 0px 6px 6px 0px;} #pop_addr_list .tabcnt_addr_list {height:100%;} #pop_addr_list .tabcnt_addr_list li a {color:#333; border:1px #000; font-size:1.167rem; letter-spacing:-0.28px;} #pop_addr_list .inner {max-height:570px;} #pop_addr_list .btn {margin-top:30px;} #pop_addr_list .btn_new {margin-top:20px;} #pop_addr_list .btn_new .add {display:inline-block; padding-left:23px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_add.png') no-repeat left center /13.5px; font-size:1.25rem; font-weight:500;} #pop_addr_list .tabcnt_addr_list .addr_list {margin-top:20px; border-top:1px solid #EFEFEF;} #pop_addr_list .tabcnt_addr_list .addr_list li {position:relative; border-bottom:1px solid #EFEFEF;} #pop_addr_list .tabcnt_addr_list .addr_list li label {display:block; position:relative; padding:22px 120px 25px 30px;} #pop_addr_list .tabcnt_addr_list .addr_list li label input {position:absolute; top:25px; left:0;} #pop_addr_list .tabcnt_addr_list .addr_list li label p {color:#333; font-size:1.167rem;} #pop_addr_list .tabcnt_addr_list .addr_list li label p + p {margin-top:2px;} #pop_addr_list .tabcnt_addr_list .addr_list li label p.name {font-size:1.25rem; font-weight:600;} #pop_addr_list .tabcnt_addr_list .addr_list li label p.name .addr_def {display:none;} #pop_addr_list .tabcnt_addr_list .addr_list li label p.name.def .addr_def {display:inline-block; margin-left:8px; padding:3px 6px; border-radius:2px; background-color:#F5F6F8; color:#000; font-size:1.083rem; font-weight:400;} #pop_addr_list .tabcnt_addr_list .addr_list li .btn_del {position:absolute; top:22px; right:0;} #pop_addr_list .tabcnt_addr_list .addr_list li .btn_del .box_btn > * {height:30px; border:1px solid #e5e5e5;} #pop_addr_list .tabcnt_addr_list.addr_recent .addr_list li label {padding:22px 30px 25px;} #pop_addr_list .input_wrap {margin-top:20px;} #pop_addr_list .input_wrap > li {position:relative; padding-left:100px; font-size:1.167rem;} #pop_addr_list .input_wrap > li + li {margin-top:8px;} #pop_addr_list .input_wrap > li .label {display:flex; align-items:center; position:absolute; top:0; left:0; width:100px; height:48px; color:#333;} #pop_addr_list .input_wrap > li .label.required::after {content:' *'; padding-left:3px; color:#D50C0C; font-size:1.167rem;} #pop_addr_list .input_wrap > li .input_box {display:flex; align-items:center; gap:10px; width:100%; max-width:410px; min-height:48px;} #pop_addr_list .input_wrap > li .input_box + .input_box {margin-top:8px;} #pop_addr_list .input_wrap > li .btn_cb {padding:10px 0;} #pop_addr_list .input_wrap > li .btn_cb label {margin-right:10px; font-size:1.167rem;} #pop_addr_list .input_wrap > li.country select {width:100%;} @media all and (max-width:1023px) { #pop_addr_list .tab_addr_list {padding:0 45px;} #pop_addr_list .input_wrap > li .label {height:46px;} #pop_addr_list .input_wrap > li .input_box {min-height:46px;} #pop_addr_list .input_wrap > li .input_box .form_input, #pop_addr_list .input_wrap > li .input_box select, #pop_addr_list .input_wrap > li .input_box .box_btn.gray > * {height:46px;} } @media all and (max-width:767px) { #pop_addr_list .tab_addr_list {padding:0 4.26%;} #pop_addr_list .addr_my ul li label {padding-right:60px !important;} #pop_addr_list .addr_my ul li label p {font-size:1.083rem;} #pop_addr_list .addr_my ul li label p.name {font-size:1.167rem;} #pop_addr_list .addr_my ul li .btn_del .box_btn {display:block; margin-bottom:4px;} #pop_addr_list .input_wrap > li {padding-left:80px;} #pop_addr_list .input_wrap > li .label {width:80px; height:40px; font-size:1.083rem;} #pop_addr_list .input_wrap > li .input_box {min-height:40px;} #pop_addr_list .input_wrap > li .input_box .form_input, #pop_addr_list .input_wrap > li .input_box select, #pop_addr_list .input_wrap > li .input_box .box_btn.gray > * {height:40px;} #pop_addr_list .input_wrap > li .btn_cb label {font-size:1.083rem;} } /*-----------------------------------------------------------------*/ /* 4-3. 회원 /*-----------------------------------------------------------------*/ /* 로그인 & 아이디 비밀번호 찾기 & 비밀번호 변경 */ .box_member {max-width:400px; margin:0 auto; text-align:center;} .box_member .tab_member {display:flex; gap:30px; align-items:center; justify-content:center; margin-bottom:20px;} .box_member .tab_member > li a {color:#999; font-size:1.5rem;} .box_member .tab_member > li a.active {color:#000;} .box_member fieldset .fld {position:relative; margin-top:-1px;} .box_member fieldset .fld .form_input {height:54px; border-radius:0; font-size:1.33rem;} .box_member fieldset .fld.first .form_input {border-radius:4px 4px 0 0;} .box_member fieldset .fld.last .form_input {border-radius:0 0 4px 4px;} .box_member fieldset .fld .show_icon {display:block; position:absolute; top:0; right:15px; z-index:1; width:22px; height:100%; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_pwd_active.png') no-repeat center /22px; cursor:pointer;} .box_member fieldset .fld .show_icon.active {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_pwd.png');} .box_member fieldset .savessl {display:none;} .box_member fieldset .select {padding-bottom:13px; text-align:left;} .box_member fieldset .select label {margin-right:14px; font-size:1.25rem;} .box_member .btn {margin-top:25px;} .box_member .btn .box_btn {margin-bottom:10px;} .box_member .wrap + .wrap {padding-top:30px;} /* SNS계정으로 회원가입 */ .simple {padding-top:35px;} .simple h5 {position:relative; padding:0 27%; font-size:1.25rem; font-weight:500; text-align:center;} .simple h5::before {content:''; position:absolute; top:50%; left:0; width:27%; height:1px; background-color:#E5E5E5;} .simple h5::after {content:''; position:absolute; top:50%; right:0; width:27%; height:1px; background-color:#E5E5E5;} .simple ul {display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; padding-top:20px;} .simple ul li a {display:block; width:48px; height:48px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:transparent; font-size:0;} .simple ul li a.naver {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_naver.png');} .simple ul li a.kakao {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_kakao.png');} .simple ul li a.facebook {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_facebook.png');} .simple ul li a.apple {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_apple.png');} .simple ul li a.payco {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_payco.png');} .simple ul li a.wemake {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_wemake.png');} /* 로그인(/member/login.php) */ #login .fail {position:relative; margin-bottom:20px; padding:18px 10px; border-radius:10px; background:#fae4e8; color:#d53838; text-align:center; font-size:1.038rem;} #login .fail:after {position:absolute; left:50%; bottom:-6px; width:0; height:0; margin-left:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:6px solid #fae4e8; content:'';} #login .adult_msg {margin-bottom:20px; padding-top:75px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/adult_warning.png') no-repeat top center; font-size:1.167rem; text-align:center;} #login .autologin {padding-top:10px; text-align:left;} #login .joinfind {display:flex; gap:50px; align-items:center; justify-content:center; padding:20px 0;} #login .joinfind li a {color:#777; font-size:1.25rem; letter-spacing:-0.01em;} #login .adult_certify {margin-top:30px; padding-top:35px; border-top:1px solid #E5E5E5; text-align:center;} #login .adult_certify h5 {padding-bottom:5px; font-size:18px; font-weight:400;} #login .adult_certify p {padding-bottom:20px; color:#888;} #login .adult_certify > a {display:block; height:50px; margin-top:10px; border-radius:6px; background:#aaa9a9;} #login .adult_certify > a span {display:inline-block; height:50px; padding-left:25px; background:no-repeat left center; color:#fff; font-size:14px; font-weight:700; line-height:50px;} #login .adult_certify > a.ipincheckplususe span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/adult_phone.png');} #login .adult_certify > a.ipinuse span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/adult_ipin.png');} /* 아이디/비밀번호 찾기 레이어 */ .pop_find_id {position:fixed; left:50%; top:100px; z-index:1001; width:400px; margin-left:-200px; border-radius:3px; background-color:#fff;} .pop_find_id h1 {height:49px; padding:0 10px; background-color:#000; color:#fff; font-size:16px; font-weight:normal; line-height:49px;} .pop_find_id > .box {padding:30px;} .pop_find_id > .box > h2 {color:#333; font-size:20px; font-weight:normal;} .pop_find_id > .box > .msg {padding-top:15px;} .pop_find_id > .box > .input {position:relative; height:50px; margin-top:15px; padding-right:113px; background-color:#f5f5f5;} .pop_find_id > .box > .input:after {position:absolute; right:113px; top:50%; width:1px; height:22px; margin-top:-11px; background-color:#dbdbdb; content:'';} .pop_find_id > .box > .input > .input_number {width:100%; height:50px; padding:0 10px; border:0; background-color:transparent;} .pop_find_id > .box > .input > .btn {position:absolute; right:0; top:0; width:113px; height:50px; border:0; background-color:#f5f5f5; font-weight:bold; cursor:pointer;} .pop_find_id > .box > .form_input {height:50px; margin-top:10px;} .pop_find_id > .box > .box_btn {margin-top:20px;} .pop_find_id > .box > .pop_id_list {padding-top:25px;} .pop_find_id > .box > .pop_id_list .list {overflow:auto; max-height:100px; margin-top:10px; padding:5px 0; border:1px solid #d2d2d2; border-width:1px 0; background-color:#f5f5f5;} .pop_find_id > .box > .pop_id_list .list li {position:relative; padding:5px; text-align:left;} .pop_find_id > .box > .pop_id_list .btn {padding-top:20px; text-align:center;} .pop_find_id > .box > .close {display:inline-block; position:absolute; right:14px; top:14px; width:21px; height:21px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} @media all and (max-width:767px) { .pop_find_id {width:98%; margin-left:-49%;} } /* 비밀번호 변경 */ #modify_pwd .modify_id {padding-bottom:20px; font-size:14px; font-weight:bold;} #modify_pwd .msg_chgpw {border:1px dashed #000; margin-bottom:20px; padding:10px;} /* 회원가입 약관 & 회원가입폼 */ .box_join {max-width:460px; margin:0 auto;} .box_join fieldset {margin-bottom:60px;} .box_join .box .input_area input[type="text"] {width:100%;} .box_join .box .input_area label {margin-right:20px;} .box_join .btn {margin-top:45px; text-align:center;} /* 회원가입 약관동의(/member/join_step1.php) */ #join_agree .all_chk h3 label {font-size:1.417rem;} #join_agree .all_chk p {padding-top:10px; color:#666; font-size:1.167rem; word-break:keep-all;} #join_agree .check {margin-top:18px; padding:12px 0; border:1px solid #E5E5E5; border-width:1px 0;} #join_agree .check li {position:relative; padding:10px 0;} #join_agree .check li a {display:inline-block; margin-left:10px; color:#666; font-size:1.083rem; text-decoration:underline;} #join_agree .pop_layer .inner {height:55vh;} #join_agree .pop_layer .iframe iframe {width:100%; height:55vh; padding:0 35px;} #join_agree .pop_layer .privacy dl dt {padding:25px 0 10px; font-size:1.25rem; font-weight:600;} #join_agree .pop_layer .privacy dl dd {color:#666; font-size:1.167rem;} #join_agree .member_type {padding-top:30px; text-align:center;} #join_agree .member_type label + label {margin-left:20px;} #join_agree .simple {padding-top:70px;} #skin_content_join_rull_big_div {padding-bottom:45px;} #pop_rull.pop_layer .inner {max-height:100% !important; padding:0;} @media all and (max-width:1023px) { #join_agree .pop_layer .inner {height:100%;} #join_agree .pop_layer .iframe iframe {height:100%; padding:0 45px;} } @media all and (max-width:767px) { #join_agree .all_chk h3 label {font-size:1.33rem;} #join_agree .all_chk p {font-size:1.083rem;} #join_agree .pop_layer .iframe iframe {padding:0 4.26%;} #join_agree .pop_layer .privacy dl dd {font-size:1.083rem;} } /* 회원가입 정보입력(/member/join_frm.php) */ #join_input fieldset h3.title {font-size:1.667rem;} #join_input fieldset > .box > div {padding-top:24px;} #join_input fieldset > .box > div > label {display:block; padding-bottom:10px; font-size:1.25rem;} #join_input fieldset > .box.join_info > div {padding-top:36px;} #join_input fieldset > .box.join_info > div > label {padding-bottom:18px;} #join_input fieldset > .box > div.required > label:after {color:#D50C0C; content:' *'; font-size:1.167rem;} #join_input fieldset > .box > div .msg {padding-top:10px;} #join_input fieldset > .box > div .msg > p {padding-left:22px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_info.png')no-repeat left center/16px auto; color:#999; font-size:1.083rem; line-height:17px;} #join_input fieldset > .box > div.email .input_area {display:flex; align-items:center; gap:6px;} #join_input fieldset > .box > div.email .input_area .form_input {width:31.7%;} #join_input fieldset > .box > div.email .input_area span {display:inline-block; color:#666; font-size:1.25rem;} #join_input fieldset > .box > div.email .input_area select {width:29%;} #join_input fieldset > .box > div.birth .input_area {display:flex; gap:10px; align-items:center;} #join_input fieldset > .box > div.birth .input_area select {flex:1;} #join_input fieldset > .box > div.addr .radio_wrap {margin-bottom:10px;} #join_input fieldset > .box > div.addr .form_input.block {margin-top:10px;} #join_input fieldset > .box > div.addr .input_wrap {display:flex; align-items:center;} #join_input fieldset > .box > div.addr .input_wrap .form_input {width:calc(100% - 114px);} #join_input fieldset > .box > div.addr .input_wrap .box_btn {margin-left:auto;} #join_input fieldset > .box > div.addr .input_wrap .box_btn > * {width:104px;} #join_input fieldset > .box .input_area label + label {margin-left:20px;} #join_input fieldset > .box .input_area.event {display:flex; flex-wrap:wrap; gap:10px 20px;} #join_input fieldset > .box .input_area.event label {margin:0;} #join_input fieldset > .box .addfld select {width:32.7% !important;} #join_input fieldset > .box .addfld input[type=file] {font-size:1.25rem; letter-spacing:-0.15px; color:#000 !important;} #join_input fieldset > .box .addfld input[type=file]::file-selector-button {width:76px; height:38px; margin-right:15px; padding:8px 5px; background:#fff; border:1px solid #000; border-radius:6px; font-family:'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:1.25rem; color:#000; cursor:pointer;} #join_input fieldset > .box .addfld input[type=file]::file-selector-button:hover {background-color:#000; border-color:#000; color:#fff;} #join_input fieldset > .box > div.sns .integrate {display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px 24px;} #join_input fieldset > .box > div.sns .integrate > li {text-align:center;} #join_input fieldset > .box > div.sns .integrate > li .name {width:36px; height:36px; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:36px; text-indent:-9999px;} #join_input fieldset > .box > div.sns .integrate > li .name.nameKA {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_kakao.png');} #join_input fieldset > .box > div.sns .integrate > li .name.nameNA {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_naver.png');} #join_input fieldset > .box > div.sns .integrate > li .name.nameFB {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_facebook.png');} #join_input fieldset > .box > div.sns .integrate > li .name.namePC {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_payco.png');} #join_input fieldset > .box > div.sns .integrate > li .name.nameWN {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_wemake.png');} #join_input fieldset > .box > div.sns .integrate > li .name.nameAP {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_apple.png');} #join_input fieldset > .box > div.sns .integrate > li .box_btn {margin:10px 0;} #join_input fieldset > .box > div.sns .integrate > li .box_btn > * {min-width:45px; height:31px; padding:7px 10px; color:#000; font-size:1.167rem; letter-spacing:-0.14px;} #join_input fieldset > .box > div.sns .integrate > li .box_btn.connect > * {border-color:#858585; background:#858585; color:#fff;} #join_input fieldset > .box > div.sns .integrate > li .state span {color:#999; line-height:16px;} /* 회원가입 정보입력 - 기업회원추가입력 */ #join_input fieldset > .box > div.licensee_num .input_wrap {display:flex; gap:10px; align-items:center;} #join_input fieldset > .box > div.licensee_num .input_wrap .form_input {width:calc(33.33% - 20px/3);} /* 회원가입 정보입력 - SNS */ #join_input.api {margin-top:60px;} #join_input.api fieldset > .box > div > .email_area {position:relative;} #join_input.api fieldset > .box > div > .email_area .form_input {width:calc(100% - 80px) !important; margin-right:4px;} #join_input.api fieldset > .box > div > .input_area .api_agree {padding-top:10px;} #join_input.api fieldset > .box > div > .email_area .auto_complete_dialog {width:calc(100% - 80px); margin-top:-2px; border-radius:6px;} /* 휴대폰번호 가입인증 팝업 */ #front__Popup .pop__msg strong {font:inherit;} @media all and (max-width:767px) { #join_input fieldset > .box > div.email .input_area select {height:48px;} } /* 회원가입완료(/member/join_step3.php) */ #join_finish .box_join {max-width:400px; text-align:center;} #join_finish h3 {margin:30px 0; padding-top:100px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/member/icon_join_finish.png') no-repeat top center /70px; font-size:2.083rem; font-weight:400; line-height:40px; letter-spacing:-0.5px;} #join_finish .box .document > a {display:inline-block; padding:20px 10px; font-weight:bold; text-decoration:underline;} #join_finish .agree {padding:15px; color:#666; background-color:#f0f0f0;} #join_finish .agree span {display:block;} /* 우편번호 찾기(/common/zip_search.php) */ .zipcode {width:100%; max-width:420px; padding:20px; text-align:center;} .zipcode h1 {padding-bottom:20px; font-size:20px; font-weight:bold;} .zipcode .tab {height:32px; text-align:center;} .zipcode .tab li {float:left; width:50%; vertical-align:bottom;} .zipcode .tab a {display:block; height:34px; margin:10px 0 0 -1px; border:1px solid #dcdcdc; background:#f8f8f8; color:#181818; line-height:34px;} .zipcode .tab a.selected {height:44px; margin-top:0; border-bottom:0; background:#fff; font-weight:bold; line-height:49px;} .zipcode .ex {clear:both; padding:20px 0; color:#666; text-align:left;} .zipcode .ex span {display:block; color:#888;} .zipcode .search {position:relative; padding-right:70px;} .zipcode .search .form_input.block {border-radius:6px 0 0 6px;} .zipcode .search .box_btn {position:absolute; right:0; top:0;} .zipcode .search .box_btn input[type="submit"] {height:48px; border-radius:0px 6px 6px 0;} .zipcode table {table-layout:fixed; width:100%; margin-top:20px; border-top:1px solid #e0e0e0;} .zipcode table th {font-size:0;} .zipcode table td {padding:10px 0; border-bottom:1px solid #d7d7d7; color:#888; text-align:center; vertical-align:top;} .zipcode table td.addr {text-align:left;} .zipcode table td.addr p {display:inline-block; padding:0 4px 0 23px; border-radius:3px; background:#ffeded url('http://www.mollayo.co.kr/_skin/rsp_booster/img/shop/icon_addrwarring.png')no-repeat top 4px left 4px; color:#d83838; font-weight:600; letter-spacing:-0.05rem;} .zipcode table td font {color:#d53838;} /*-----------------------------------------------------------------*/ /* 4-4. 마이페이지 /*-----------------------------------------------------------------*/ /* 마이페이지 메뉴 */ .mypage_menu {position:absolute; top:60px; left:0; width:240px; padding-right:50px;} .mypage_menu h2.subtitle {display:block; padding:0; text-align:left; line-height:1;} .mypage_menu dl {padding-top:30px;} .mypage_menu dl dt {padding-bottom:10px; font-size:1.5rem; font-weight:600;} .mypage_menu dl dd a {display:block; color:#555; font-size:1.25rem; line-height:2.1;} @media all and (max-width:1023px) { .mypage_menu {/*display:none;*/ position:static; top:auto; bottom:0; width:100%;} .mypage_menu.my_main {display:block;} .mypage_menu h2.subtitle {display:none;} .mypage_menu dl {padding-top:50px;} .mypage_menu dl dt {padding-bottom:10px; border-bottom:1px solid #000; font-size:1.5rem;} .mypage_menu dl dd a {padding:12px 18px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/mypage/icon_menu_arrow.png') no-repeat right 18px center /8px auto; font-size:1.33rem; border-bottom:1px solid #EFEFEF;} } @media all and (max-width:767px) { .mypage_menu {padding:0;} .mypage_menu dl dt {padding:0 4.26% 10px; font-size:1.33rem;} .mypage_menu dl dd a {padding:12px 4.26%; background-position:right 4.26% center; font-size:1.167rem;} } /* 마이페이지 공통 박스 */ .box_mp {margin-bottom:40px; padding:55px 20px; border-radius:6px; background-color:#F5F6F8; text-align:center;} .box_mp > h5 {font-size:1.25rem; font-weight:400;} .box_mp > span {font-size:2rem; font-weight:700;} .box_mp .msg {font-size:1.167rem; word-break:keep-all;} .box_mp > h5 + .msg {padding-top:15px;} .box_mp .mo_br {display: none;} .box_mp .form_input {width:100%; max-width:450px; margin:20px auto 0;} .box_mp .form_input + .form_input {margin-top:10px;} .box_mp.sml {padding:30px;} @media all and (max-width:1023px) { .box_mp {margin-bottom:35px;} .box_mp .mo_br {display: block;} .box_mp > h5 {font-size:1.167rem;} .box_mp > span {font-size:1.5rem;} .box_mp.sml {padding:18px;} #edit_pw .title {display: none;} } /* 정보수정(/member/edit_step1.php), 정보수정완료(/member/edit_step3.php) */ .edit_info .agree {width:100%; max-width:450px; margin:20px auto 0; padding:15px; color:#666; background-color:#fff;} .edit_info .agree > span {display:block;} /* 쿠폰 다운로드 리스트(/mypage/coupon_down_list.php) */ .list_cpn_down {padding-bottom:40px;} .list_cpn_down .cpn_slide .box {position:relative; padding:25px 20px; border:1px solid #EBEBEB; border-radius:6px;} .list_cpn_down .cpn_slide .box .top {display:flex; align-items:center; justify-content:space-between;} .list_cpn_down .cpn_slide .box .top .benefit {font-size:1.667rem; font-weight:600;} .list_cpn_down .cpn_slide .box .top span {color:#666; font-size:1.167rem;} .list_cpn_down .cpn_slide .box .top span a {display:inline-block; padding-right:24px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/mypage/icon_cpn_down.png') no-repeat right center /16px; color:inherit; font:inherit;} .list_cpn_down .cpn_slide .box .name {margin-top:18px; padding-top:18px; border-top:1px dashed #EBEBEB; font-size:1.25rem;} .list_cpn_down .cpn_slide .swiper-pagination {position:static; width:112px; height:2px; margin:30px auto 0; background-color:#EBEBEB;} @media all and (max-width:1023px) { .list_cpn_down {padding-bottom:15px;} } /* 쿠폰(/mypage/coupon_down_list.php), 소셜쿠폰(/mypage/sccoupon_list.php), 개별상품 쿠폰(module/order_prd_cpn_use_list.wsm) */ .common_cpn_list li {position:relative; margin-bottom:12px; padding:16px 20px; border-radius:6px; border:1px solid #EBEBEB;} .common_cpn_list li:has(input[type=radio]:checked) {border-color:#000;} .common_cpn_list li p {color:#666; font-size:1.083rem;} .common_cpn_list li p + p {margin-top:2px;} .common_cpn_list li .benefit {padding-bottom:5px; font-size:1.417rem; font-weight:600;} .common_cpn_list li .benefit a {color:inherit; font:inherit;} .common_cpn_list li .benefit strong {color:#000; font-size:1.167rem; font-weight:400;} .common_cpn_list li .name {color:#000; font-size:1.167rem;} .common_cpn_list li label {display:block;} .common_cpn_list li label .date {position:absolute; top:18px; right:18px; padding:4px 10px; border-radius:2px; background-color:rgba(213, 12, 12, 0.03);} .common_cpn_list li > .usable_cpn {padding-bottom:20px;} .common_cpn_list li .box {display:flex; align-items:center; gap:14px;} .common_cpn_list li .box .img {width:50px;} .common_cpn_list li .box .img img {width:100%; height:auto;} .common_cpn_list li .box .info p {color:#000; font-size:1.083rem;} .common_cpn_list li .box .info p.name {color:#333;} .common_cpn_list li .box .info p.name .opt {color:inherit; font:inherit;} .common_cpn_list li > .date {display:inline-block; margin-top:8px; padding:2px 10px; background-color:#FDF7F7; color:#D50C0C;} .common_cpn_list li.used .benefit {color:#888 !important;} .common_cpn_list li.used > .date {background-color:#F5F5F5; color:#666;} /* 마이페이지 메인(/mypage/mypage.php) */ #mypage .my_info {display:flex; align-items:center; justify-content:space-between; background-color:#F5F6F8; padding:55px 3.33%; border-radius:6px;} #mypage .my_info .name {display:flex; gap:20px; align-items:center; width:45%;} #mypage .my_info .name .img {width:74px; height:74px; flex-shrink:0;} #mypage .my_info .name .img img {width:100%; height:100%; object-fit:contain;} #mypage .my_info .name p {font-size:2rem; line-height:1.5;} #mypage .my_info .name p strong {font-weight:600;} #mypage .my_info ul {display:flex; align-items:center;} #mypage .my_info ul li {min-width:140px; padding:0 1.66%; text-align:center;} #mypage .my_info ul li + li {border-left:1px solid #E5E5E5;} #mypage .my_info ul li a {display:block;} #mypage .my_info ul li h5 {padding-bottom:5px; font-size:1.25rem; font-weight:400;} #mypage .my_info ul li span {font-size:2rem; font-weight:700; letter-spacing:-0.01em;} #mypage h3.title {display:flex; align-items:center; margin-bottom:40px;} #mypage h3.title span {color:#999; margin-left:10px; font-size:1.25rem; font-weight:400;} #mypage h3.title a {margin-left:auto; font-size:1.33rem; font-weight:400;} #mypage .list_order ul.state {display:flex; gap:28px; align-items:center; justify-content:flex-end; margin-top:40px;} #mypage .list_order ul.state li {color:#999; font-size:1.33rem;} #mypage .list_order ul.state li.on {color:#000;} #mypage .list_3ord {padding:24px 0 20px;} #mypage .list_3ord .tbl_col {border-top-color:#EFEFEF;} #mypage .list_3ord .tbl_col > .tbody:nth-of-type(n + 4) {display:none;} #mypage .list_3ord .tbl_col > .tbody > li:nth-child(1), #mypage .list_3ord .tbl_col > .tbody > li:nth-child(5), #mypage .list_3ord .tbl_col > .tbody > li:nth-child(6) {width:12%;} #mypage .list_3ord .tbl_col > .tbody > li:nth-child(2) {width:17%;} #mypage .list_3ord .tbl_col > .tbody > li:nth-child(3) {width:60px;} #mypage .list_3ord .tbl_col > .tbody > li.prdimg .img {width:60px; height:60px;} #mypage .list_3ord .tbl_col > .tbody > li.prdimg .img img {width:100%; height:100%; object-fit:cover;} @media all and (max-width:1023px) { #mypage .my_info {margin:0 -3.16%; border:0;} #mypage .my_info .name p {font-size:1.667rem;} #mypage .my_info ul li {min-width:100px;} #mypage .my_info ul li span {font-size:1.667rem;} #mypage h3.title {margin-bottom:30px;} #mypage h3.title span {font-size:1.083rem;} #mypage h3.title a {font-size:1.167rem;} #mypage .list_order h3.title {padding:0; border:none;} #mypage .list_order ul.state {gap:0; border:1px solid #E5E5E5; border-radius:4px;} #mypage .list_order ul.state li {flex:1; text-align:center; padding:10px 0;} #mypage .list_order ul.state li a {padding:10px; font-size:1.25rem; text-align:center;} #mypage .list_order ul.state li + li {border-left:1px solid #E5E5E5;} #mypage .list_wish .wish_slide {margin:0 -3.16%; padding:0 3.16%;} } @media all and (max-width:767px) { #mypage .my_info {display:block; margin:0 -4.26%; padding:0; background:none; border-bottom:10px solid #F5F6F8;} #mypage .my_info .name {width:100%; padding:28px 20px; background-color:#F5F6F8;} #mypage .my_info ul {width:100%; padding:30px 20px;} #mypage .my_info ul li {flex:1; min-width:auto;} #mypage .my_info ul li h5 {font-size:1.167rem;} #mypage .my_info ul li span {font-size:1.5rem;} #mypage h3.title {margin:30px 0 20px;} #mypage .list_order ul.state {margin-top:20px;} #mypage .list_3ord .tbl_col > .tbody {padding-right:90px; padding-bottom:38px;} #mypage .list_3ord .tbl_col > .tbody > li {width:auto !important; margin-left:74px;} #mypage .list_3ord .tbl_col > .tbody > li.ord_date {display:inline-block; margin:0 15px 0 0; font-size:1.167rem;} #mypage .list_3ord .tbl_col > .tbody > li.ord_num {display:inline-block; margin:0; font-size:1.167rem;} #mypage .list_3ord .tbl_col > .tbody > li.prdimg {margin-top:20px;} #mypage .list_wish {margin:0 -4.26%;} #mypage .list_wish h3.title {padding:0 4.26% 10px;} #mypage .list_wish .wish_slide {margin:0; padding:0 4.26%;} } /* 주문상태 - 마이페이지 메인 & 주문상세조회 */ .ord_process {display:flex; align-items:flex-start; justify-content:center; gap:4.4%;} .ord_process li {position:relative; width:13%; height:0; padding-bottom:13%; flex-shrink:0;} .ord_process li + li::before {content:''; position:absolute; top:50%; right:100%; width:33%; height:24px; margin-top:-12px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/mypage/icon_arrow.png') no-repeat center /24px;} .ord_process li a {cursor:default;} .ord_process li p {display:flex; flex-shrink:0; flex-direction:column; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #E5E5E5; border-radius:50%; text-align:center;} .ord_process li p strong {color:#aaa; font-size:2.833rem; font-weight:600; line-height:1.1;} .ord_process li p span {color:#999; font-size:1.33rem; font-weight:600;} .ord_process li.on a {cursor:pointer;} .ord_process li.on p {background-color:#000;} .ord_process li.on p strong, .ord_process li.on p span {color:#fff;} @media all and (max-width:1023px) { .ord_process {gap:0;} .ord_process li {width:16.66%; height:auto; padding-bottom:0;} .ord_process li p {position:static; border-radius:0; border:none;} .ord_process li::before {display:none;} .ord_process li p strong {font-size:1.667rem; line-height:1.6;} .ord_process li p span {font-size:1.167rem;} .ord_process li.on p {background:none;} .ord_process li.on p strong, .ord_process li.on p span {color:#000;} } /* 주문내역조회(/mypage/order_list.php) */ #order_list h3.title {padding-bottom:0;} #order_list .msg {margin-bottom:15px; color:#999; font-size:1.167rem;} #order_list > .search {display:flex; flex-wrap:wrap; justify-content:center; gap:14px 20px; margin-bottom:30px; padding:30px 4%; background-color:#F5F6F8; text-align:center; font-size:0;} #order_list > .search > .date {display:flex;} #order_list > .search > .date > span {margin-left:-1px;} #order_list > .search > .date > span > * {min-width:auto; padding:0 18px; border-radius:0;} #order_list > .search > .date > span:first-child > * {border-radius:6px 0 0 6px;} #order_list > .search > .date > span:last-child > * {border-radius:0 6px 6px 0;} #order_list > .search > .date > span.on * {position:relative; border-color:#000; font-weight:600;} #order_list > .search > .input_wrap {display:flex; flex-wrap:wrap; justify-content:center; gap:10px 8px;} #order_list > .search > .input_wrap .date_input {display:flex;} #order_list > .search > .input_wrap .date_input .form_input {padding-right:40px; width:150px; height:44px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_calendar.png') no-repeat right 10px center /24.5px auto #fff; cursor:pointer;} #order_list > .search > .input_wrap .date_input span {display:inline-block; padding:0 4px; line-height:44px; font-size:1.25rem;} #order_list > .search > .input_wrap .box_btn > * {width:90px;} #order_list > .tbl_col > .tbody > li.prdimg .img {width:60px; height:60px;} #order_list > .tbl_col > .tbody > li.prdimg .img img {width:100%; height:100%; object-fit:cover;} @media all and (max-width:767px) { #order_list h3.title {padding-bottom:15px;} #order_list .msg {display:none; margin-bottom:10px;} #order_list > .search > .date > span > * {padding:0 3vw;} #order_list > .search > .input_wrap .date_input .form_input {width:39vw; max-width:140px;} #order_list > .tbl_col > .tbody {padding-right:90px;} #order_list > .tbl_col > .tbody > li {margin-left:74px;} #order_list > .tbl_col > .tbody > li.ord_date {display:inline-block; margin:0 15px 0 0; font-size:1.167rem;} #order_list > .tbl_col > .tbody > li.ord_num {display:inline-block; margin:0; font-size:1.167rem;} #order_list > .tbl_col > .tbody > li.prdimg {margin-top:20px;} /* 정기배송 주문내역 */ #order_list.sbscr > .tbl_col > .tbody {padding-bottom:38px;} } /* 주문상세조회(/mypage/order_detail.php) */ #order_detail .info_num {display:flex; gap:5px 20px; flex-wrap:wrap; padding:20px 0 30px;} #order_detail .info_num span {font-size:1.25rem;} #order_detail h3.title {display:flex; align-items:flex-end; justify-content:space-between;} #order_detail .area_wrap {display:flex; gap:50px; justify-content:space-between;} #order_detail .area_left {width:560px;} #order_detail .area_right {width:318px;} #order_detail .area_right .prc_order.member_off {margin-bottom:15px;} #order_detail .area_right .prc_order:after {display:none;} #order_detail .area_right .prc_order .box_btn {margin-top:24px;} #order_detail .area_right .prc_order .box_btn > * {font-size:1.25rem; letter-spacing:-0.15px;} #order_detail .area_right .btn {margin-top:35px;} #order_detail .area_right .btn input {border:0; background:0;} #order_detail #counsel .btn {display:flex; flex-wrap:wrap; gap:5px;} #order_detail #counsel .btn > li.back {margin-left:auto;} @media all and (max-width:1023px) { #order_detail .area_wrap {display:block;} #order_detail .area_left {width:100%;} #order_detail .area_right {width:100%;} } @media all and (max-width:767px) { #order_detail .btn > li {width:calc(50% - 5px/2);} #order_detail .btn > li * {width:100%;} } /* 주문상세조회(/mypage/order_detail.php) - 정기배송주문상세조회 */ #order_detail .sbs_schedule .msg {margin-bottom:15px; color:#999; font-size:1.167rem;} /* 주문상세조회(/mypage/order_detail.php) - 결제수단변경 레이어 */ .chg_paytype {width:822px; margin-left:-411px;} .chg_paytype form {height:100%;} .chg_paytype .inner {max-height:495px;} .chg_paytype h2 {padding-bottom:20px; border-bottom:1px solid #000; font-size:1.833rem; font-weight:600; letter-spacing:-0.22px;} .chg_paytype .explain {margin:20px 0 30px;} .chg_paytype .explain > li {padding:0 0 8px 12px; color:#888; font-size:1.167rem; line-height:normal; letter-spacing:-0.28px;} .chg_paytype .explain > li:before {display:inline-block; content:'-'; width:12px; margin-left:-12px;} .chg_paytype .paytype_form {display:flex; justify-content:space-between; align-items:flex-start; gap:30px;} .chg_paytype h3 {padding-bottom:15px; border-bottom:1px solid #efefef; font-size:1.5rem; font-weight:600; letter-spacing:-0.36px;} .chg_paytype .sum {flex:1;} .chg_paytype .sum .sum_box {padding-bottom:20px; border-bottom:1px solid #efefef;} .chg_paytype .sum .sum_box + .sum_box {margin-top:30px;} .chg_paytype .sum_box dl {display:flex; align-items:center; gap:70px; padding-top:20px; line-height:14px;} .chg_paytype .sum_box dl + dl {padding-top:15px;} .chg_paytype .sum_box dl dt {color:#333; flex:0 0 23%; font-size:1.167rem; letter-spacing:-0.28px;} .chg_paytype .sum_box dl dd {color:#333; font-size:1.167rem;} .chg_paytype .sum_box dl dd.bold {font-weight:600;} .chg_paytype .select {flex:0 0 316px;} .chg_paytype .select_box {padding:30px; border-radius:6px; background-color:#f5f6f8;} .chg_paytype .select_box h3 {border:0; font-size:1.667rem;} .chg_paytype .select_box > .type {padding-top:9px;} .chg_paytype .select_box > .type > li {padding:5px 0;} .chg_paytype .select_box > .type > li > label {color:#666; font-size:1.167rem; cursor:pointer;} .chg_paytype .select > .msg {margin-top:20px; padding:20px; border-radius:6px; border:1px solid #efefef;} .chg_paytype .select > .msg > li {padding-left:12px; color:#888; font-size:1.167rem; letter-spacing:-0.28px;} .chg_paytype .select > .msg > li:before {display:inline-block; width:12px; margin-left:-12px; content:'-';} .chg_paytype .select > .btn_col {margin:20px 0 0;} .chg_paytype .select > .btn_col > span {width:100%;} @media all and (max-width:1023px) { .chg_paytype .paytype_form {display:block;} .chg_paytype .select {margin-top:30px;} .chg_paytype .select_box {padding:26px 30px;} } @media all and (max-width:767px) { .chg_paytype .explain > li {font-size:1.083rem; letter-spacing:-0.26px; line-height:20px;} .chg_paytype h3 {font-size:1.333rem; letter-spacing:-0.32px;} .chg_paytype .select_box h3 {font-size:1.5rem;} } /* 정기배송주문 배송지변경 !!수정필요!!*/ .sbs_address {width:600px; padding:30px;} .sbs_address > table > caption {font-size:20px; font-weight:bold;} .sbs_address .zip {width:285px !important;} .sbs_address .middle_address {margin:5px 0;} .sbs_address > .btn {padding-top:20px; text-align:center;} /* 1:1문의 내역(/mypage/counsel_list.php & /mypage/order_detail.php) */ @media all and (max-width:767px) { #counsel .tbl_toggle .table > li.num {display:none;} } /* 1:1문의 완료(/mypage/counsel_step2.php) */ /* 마이페이지 적립금(/mypage/milage.php) */ #milage .mile_menu_wrap {margin-bottom:24px;} #milage .mile_menu_wrap .mile_menu {font-size:0;} #milage .mile_menu_wrap .mile_menu li {display:inline-block; margin-right:10px;} #milage .mile_menu_wrap .mile_menu li a {display:flex; align-items:center; justify-content:center; height:35px; padding:0 20px; border-radius:999px; border:1px solid #E5E5E5; background-color:#fff; font-size:1.33rem; letter-spacing:-0.01em; transition:.2s;} #milage .mile_menu_wrap .mile_menu li a.active {background-color:#000; color:#fff; font-weight:600;} @media all and (max-width:1023px) { #milage .mile_menu_wrap {overflow-x:auto;} #milage .mile_menu_wrap .mile_menu {white-space:nowrap;} #milage .mile_menu_wrap .mile_menu li:last-child a {margin-right:10px;} } @media all and (max-width:767px) { #milage .mile_menu_wrap .mile_menu li {margin:0 3px;} #milage .mile_menu_wrap .mile_menu li a {height:33px; font-size:1.167rem;} } /* 관심상품(/mypage/wish_list.php) */ #wish_list .list_col > li {padding-right:50px;} #wish_list .list_col > li .chk input {margin:0;} #wish_list .list_col > li .subject p {padding-bottom:2px; font-size:1.083rem;} #wish_list .list_col > li .subject .name a {font-size:1.167rem;} #wish_list .list_col > li .subject .soldout {display:none; color:inherit; font:inherit;} #wish_list .list_col > li .subject .soldout.out {display:inline;} #wish_list .list_col > li .subject .opt {display:flex; gap:5px; flex-wrap:wrap;} #wish_list .list_col > li .subject .opt select {height:33px; padding:0 34px 0 10px; font-size:1.167rem;} #wish_list .list_col > li .subject .opt input {width:auto; height:33px; max-width:80%; font-size:1.167rem;} #wish_list .list_col > li .btn_del {display:block; position:absolute; top:20px; right:0; width:28px; height:28px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/btn_del.png') no-repeat center /28px; color:transparent; font-size:0;} #wish_list .btn {padding-top:40px;} @media all and (max-width:1023px) { #wish_list .btn {padding-top:30px;} } /* 출석체크(/mypage/attend_list.php) */ #attend .date {display:flex; gap:10px; justify-content:center;} #attend .date span {font-size:1.667rem; font-weight:700;} #attend .date a {display:inline-block; width:20px;} #attend .date a.prev {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_attend_prev.png') no-repeat left center /10px auto;} #attend .date a.next {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_attend_next.png') no-repeat right center /10px auto;} #attend #calendar table {width:100%; margin:25px 0 35px;} #attend #calendar table thead th {padding:15px 0; border-bottom:1px solid #000; font-size:1.167rem; font-weight:600; text-align:center;} #attend #calendar table tbody td {height:90px; padding:10px; border-bottom:1px solid #EFEFEF; font-size:1.167rem; text-align:left; vertical-align:top;} #attend #calendar table tbody td font {color:#FE5D41 !important;} #attend #calendar .attenY {background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/mypage/attend_ok.png') no-repeat top 60% center /40px;} #attend #calendar .attenR {position:relative; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/mypage/attend_ok_g.png') no-repeat top 60% center /40px; font-weight:700; text-decoration:underline;} @media all and (max-width:1023px) { #attend #calendar table {margin:20px 0 30px;} #attend #calendar table tbody td {height:84px; font-size:1.083rem; background-size:34px !important;} } @media all and (max-width:767px) { #attend #calendar table thead th {font-size:1.083rem;} #attend #calendar table tbody td {height:70px; padding:8px; font-size:1rem; background-size:24px !important;} #attend .info .msg {font-size:1.083rem;} } /* 재입고 알림 신청 내역(/mypage/notify_restock.php) */ #restock .box_btn > * {min-width:54px;} @media all and (max-width:767px) { #restock .tbl_col.prd > .tbody {padding-right:70px;} #restock .tbl_col.prd > .tbody > li.prd {font-size:1.167rem;} #restock .tbl_col.prd > .tbody > li.date {margin-top:15px;} #restock .tbl_col.prd > .tbody > li .box_btn {position:absolute; right:0; bottom:18px;} } /*-----------------------------------------------------------------*/ /* 4-5. 추가페이지 /*-----------------------------------------------------------------*/ /* 이용약관(/content/content.php?cont=uselaw) */ #uselaw * {color:#666; font-size:1.167rem;} #uselaw > ol > li > dl > dt {padding:25px 0 10px; color:#000; font-size:1.25rem; font-weight:600; letter-spacing:-0.01em;} #uselaw > ol > li > dl > dd > ul, #uselaw > ol > li > dl > dd > ol {padding-left:10px;} @media all and (max-width:767px) { #uselaw * {font-size:1.083rem;} } /* 개인정보취급방침(/content/content.php?cont=privacy) */ #privacy * {color:#666; font-size:1.167rem;} #privacy > ul > li > dl > dt {padding:36px 0 6px; color:#000; font-size:1.25rem; font-weight:600; line-height:23px; letter-spacing:-0.01em;} .privacy_ul_list {width:100% !important;} .privacy_ul_list li {padding:12px 0; border:1px solid #E8E8E8; border-width:1px 0 0;} .privacy_ul_list li:first-child {border-top:0;} .privacy_ul_list li:last-child {border-width:1px 0 1px;} .privacy_ul_list .privacy_li_title {margin-bottom:5px; color:#000 !important; font-weight:700; line-height:23px;} .privacy_ul_list .privacy_li_sub {font-weight:400; line-height:23px;} @media all and (max-width:767px) { #privacy * {font-size:1.083rem;} } /* 이용안내(/content/content.php?cont=guide) */ #guide * {color:#666; font-size:1.167rem;} #guide > dl > dt {padding:25px 0 10px; color:#000; font-size:1.25rem; font-weight:600; letter-spacing:-0.01em;} #guide > dl > dt a {color:inherit; font:inherit;} #guide > dl > dd {padding-left:10px; color:#666; word-break:keep-all;} #guide > dl > dd > ul, #guide > dl > dd > ol {padding-left:10px; color:#666;} @media all and (max-width:767px) { #guide * {font-size:1.083rem;} } /* 회사소개(/content/content.php?cont=company) */ #company {text-align:center;} #company .banner .tablet, #company .banner .mobile {display:none;} #company .banner img {width:100%; height:auto;} #company .box {padding-top:60px;} #company h5 {padding-bottom:16px; font-size:1.667rem; font-weight:500; letter-spacing:0.02em;} #company p {color:#666; font-size:1.25rem; line-height:1.6;} #company p strong {display:block; padding-bottom:10px; color: #000; font-size:2rem; font-weight:500; line-height:1.4;} #company ul {display:flex; gap:40px; align-items:center; justify-content:center; padding-top:30px;} #company ul li {padding-top:70px; background-repeat:no-repeat; background-position:top center; background-size:60px; font-size:1.25rem;} #company ul li.vision01 {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/company_icon01.png');} #company ul li.vision02 {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/company_icon02.png');} #company ul li.vision03 {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/company_icon03.png');} #company .location {padding-top:90px;} #company .location h5 {padding-bottom:30px;} #company .location iframe {height:526px;} @media all and (max-width:1023px) { #company .banner .pc {display:none;} #company .banner .tablet {display:block;} #company h5 {font-size:1.25rem;} #company p {font-size:1.167rem;} #company p strong {padding-bottom:20px; font-size:1.667rem;} #company .location iframe {height:260px;} } @media all and (max-width:767px) { #company .banner .tablet {display:none;} #company .banner .mobile {display:block;} #company ul {gap:35px;} #company ul li {font-size:1.083rem;} } /* 고객센터 */ #customer {padding-bottom:100px;} #customer .quick {display:flex; justify-content:center; margin-bottom:60px; padding:0 20px;} #customer .quick .swiper-wrapper {display:block; text-align:center;} #customer .quick .swiper-slide {display:inline-block; width:auto; margin-right:20px;} #customer .quick .swiper-slide a {display:flex; width:150px; height:140px; padding:40px 0px; justify-content:center; align-items:center; gap:10px; border-radius:6px; border:1px solid #E5E5E5; background:#FFF;} #customer .quick .swiper-slide a span {display:block; padding-top:44px; font-size:1.25rem; line-height:18px; letter-spacing:-0.3px; background-repeat:no-repeat; background-position:top center; background-size:34px;} #customer .quick .swiper-slide:hover a {border:0; background-color:#000;} #customer .quick .swiper-slide:hover a span {color:#fff;} #customer .quick .noti a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_noti.png');} #customer .quick .qna a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_counsel.png');} #customer .quick .counsel a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_1to1.png');} #customer .quick .order a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_order.png');} #customer .quick .review a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_review.png');} #customer .quick .noti:hover a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_noti_o.png');} #customer .quick .qna:hover a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_counsel_o.png');} #customer .quick .counsel:hover a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_1to1_o.png');} #customer .quick .order:hover a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_order_o.png');} #customer .quick .review:hover a span {background-image:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_review_o.png');} #customer .latest {width:calc(50% - 16px); margin-bottom:55px;} #customer .latest > h3 a {display:block; position:relative; padding-bottom:18px; color:#333; font-size:1.5rem; font-weight:600; line-height:21px;} #customer .latest > ul {border-top:1px solid #e0e0e0;} #customer .latest > h3 .more {display:block; position:absolute; right:0; top:2px; width:17px; height:17px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/etc/cs_more.png')no-repeat center; text-indent:-9999px;} #customer .latest_wrap {display:flex; gap:32px;} #customer .latest > ul {border-top:1px solid #000;} #customer .latest > ul > li {position:relative; border-bottom:1px solid #e0e0e0;} #customer .latest > ul > li a {display:block; padding:17.4px 0; font-size:1.167rem;} #customer .latest > ul > li > span {position:absolute; right:15px; top:15px;} #customer .info {display:flex; justify-content:space-between; clear:both; width:100%;} #customer .info > .box {display:flex; gap:30px; justify-content:center; align-items:center; position:relative; width:calc(50% - 16px); margin-bottom:43px; padding:42px 20px; border-radius:6px; background:#F5F6F8; vertical-align:middle;} #customer .info > .box > .title {font-size:27px; font-weight:700; letter-spacing:-0.54px;} #customer .info > .box > .content {color:#333; font-size:1.167rem; line-height:19px; letter-spacing:-0.28px;} @media all and (max-width:1023px) { #customer {padding:0 0 93px;} #customer > * {padding:0 38px;} #customer .quick {width:100%; padding:0 36px;} #customer .quick .swiper-slide {margin-right:14px; margin-bottom:14px;} #customer .quick .swiper-slide a {width:128px; height:120px;} #customer .latest_wrap {display:block;} #customer .latest {width:100%; margin-bottom:40px;} #customer .latest > h3 a {padding-bottom:16px; font-size:1.333rem; line-height:19px;} #customer .info {display:block; margin-top:10px;} #customer .info .box {width:100%; margin-bottom:22px;} #customer .info > .box > .title {margin-bottom:9px; font-size:2rem;} } @media all and (max-width:767px) { #customer {padding:0 0 57px;} #customer > * {padding:0 17px;} #customer .quick {margin-bottom:50px; padding:0 17px;} #customer .quick .swiper-wrapper {display:flex;} #customer .quick .swiper-slide {margin-right:12px; margin-bottom:0;} #customer .quick .swiper-slide a {width:100px; height:90px;} #customer .info {margin-top:0;} #customer .info .box {display:block; text-align:center;} #customer .info > .box {padding:18.5px 10px 19px;} #customer .info > .box > .title {margin-bottom:18px; font-size:1.667rem; line-height:24px;} #customer .info > .box > .content {font-size:1.083rem; line-height:20px;} } /*-----------------------------------------------------------------*/ /* 5. ETC /*-----------------------------------------------------------------*/ /* 댓글 - 리스트, 쓰기 (게시판, 상품리뷰) */ .comment_wrap {margin-top:100px; padding:30px; border:1px solid #EFEFEF; border-radius:6px;} .list_comment {position:relative; text-align:left;} .list_comment > ul > li {display:flex; gap:5px; align-items:flex-start; padding:14px 20px; border-radius:6px; background-color:#F6F6F6; word-break:break-all; word-wrap:break-word;} .list_comment > ul > li + li {margin-top:4px;} .list_comment > ul > li .name {display:block; width:70px; flex-shrink:0; font-size:1.167rem; font-weight:600;} .list_comment > ul > li .content {width:100%; font-size:1.167rem;} .list_comment > ul > li .date {width:140px; flex-shrink:0; margin-left:auto; text-align:right;} .list_comment > ul > li .date span {padding-right:5px; color:#888; font-size:1.083rem;} .list_comment > ul > li .date img {margin-top:3px;} .write_comment {margin-top:10px; padding:30px; border:1px solid #EFEFEF; border-radius:6px;} .write_comment .user {display:flex; gap:5px; overflow:auto; padding-bottom:10px; text-align:left;} .write_comment .inputbox {overflow:hidden; position:relative; padding-right:88px;} .write_comment .inputbox textarea.form_input {min-height:80px; border-radius:6px 0 0 6px;} .write_comment .inputbox .btn_comment {display:block; position:absolute; right:0; top:0; width:88px; height:100%; text-align:center; border:1px solid #000; border-radius:0 6px 6px 0; background-color:#000; color:#fff; font-size:1.33rem; cursor:pointer;} @media all and (max-width:1023px) { .comment_wrap {margin-top:0; padding:25px;} .write_comment {padding:25px;} } @media all and (max-width:767px) { .comment_wrap {padding:20px;} .list_comment > ul > li {display:block; position:relative;} .list_comment > ul > li .name {width:100%; padding-right:140px;} .list_comment > ul > li .content {padding-top:5px; font-size:1.083rem;} .list_comment > ul > li .date {position:absolute; top:14px; right:20px;} .list_comment > ul > li .date span {font-size:1rem;} .write_comment {padding:20px;} .write_comment .inputbox {padding-right:60px;} .write_comment .inputbox .btn_comment {width:60px; font-size:1.25rem;} } /* 게시판 - 상품연동 - 검색 */ #product_search_frm {width:100% !important; background:#fff;} #product_search_frm .pop_layer {width:560px; margin-left:-280px;} #product_search_frm .pop_layer .inner {max-height:620px;} #product_search_frm .pop_layer .frame {margin-top:20px;} #product_search_frm .frame .search_box {margin-bottom:20px;} /* 게시판 - 상품연동 - 쓰기 */ .related_prd_write .box_btn > a > span {display:inline-block; padding-right:18px; background:url('http://www.mollayo.co.kr/_skin/rsp_booster/img/common/icon_arrow_right.png') no-repeat right center /6px auto;} .related_prd_write > .prd_basic {padding-top:20px;} .related_prd_write > .prd_basic .box .name a {padding-top:12px;} .related_prd_write > .prd_basic .box .price {padding-top:0;} .related_prd_write > .prd_basic .box .box_btn {margin-top:10px;} /* 게시판 - 상품연동 - 열람 */ .related_prd_view {border-bottom:1px solid #e0e0e0;} .related_prd_view > h3.title {padding:60px 0 30px; font-size:22px; font-weight:500; text-align:center;} /* 관리자 - 인용구 */ blockquote.se2_quote1 {_zoom:1; margin:0 15px 30px 20px; padding:0 8px; border-left:2px solid #ccc; color:#888;} blockquote.se2_quote1 * {color:inherit;} blockquote.se2_quote2 {_zoom:1; margin:0 0 30px 13px; padding:0 8px 0 16px; background:url(http://static.se2.naver.com/static/img/bg_quote2.gif) 0 3px no-repeat; color:#888;} blockquote.se2_quote2 * {color:inherit;} blockquote.se2_quote3 {_zoom:1; margin:0 0 30px 0; padding:10px; border:1px dashed #ccc; color:#888;} blockquote.se2_quote3 * {color:inherit;} blockquote.se2_quote4 {_zoom:1; margin:0 0 30px 0; padding:10px; border:1px dashed #66b246; color:#888;} blockquote.se2_quote4 * {color:inherit;} blockquote.se2_quote5 {_zoom:1; margin:0 0 30px 0; padding:10px; border:1px dashed #ccc; background:url(http://static.se2.naver.com/static/img/bg_b1.png) repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.se2.naver.com/static/img/bg_b1.png',sizingMethod='scale'); color:#888;} blockquote.se2_quote5 * {color:inherit;} blockquote.se2_quote6 {_zoom:1; margin:0 0 30px 0; padding:10px ;border:1px solid #e5e5e5; color:#888;} blockquote.se2_quote6 * {color:inherit;} blockquote.se2_quote7 {_zoom:1; margin:0 0 30px 0; padding:10px; border:1px solid #66b246; color:#888;} blockquote.se2_quote7 * {color:inherit;} blockquote.se2_quote8 {_zoom:1; margin:0 0 30px 0; padding:10px; border:1px solid #e5e5e5; background:url(http://static.se2.naver.com/static/img/bg_b1.png) repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.se2.naver.com/static/img/bg_b1.png',sizingMethod='scale'); color:#888;} blockquote.se2_quote8 * {color:inherit;} blockquote.se2_quote9 {_zoom:1; margin:0 0 30px 0; padding:10px; border:2px solid #e5e5e5; color:#888;} blockquote.se2_quote9 * {color:inherit;} blockquote.se2_quote10 {_zoom:1; margin:0 0 30px 0; padding:10px; border:2px solid #e5e5e5; background:url(http://static.se2.naver.com/static/img/bg_b1.png) repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.se2.naver.com/static/img/bg_b1.png',sizingMethod='scale'); color:#888;} blockquote.se2_quote10 * {color:inherit;} /* 관리자 - 에디터 폰트 스타일 */ b, b *, u, u *, i, i *, strike, strike * {color:inherit; font-size:inherit;} /* 기본 ui 수정 */ .ui-draggable * {font-family: 'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif;} .ui-draggable .ui-dialog-titlebar {display:none;} .ui-widget-content {border-color:#333; border-radius:0;} .ui-dialog {width:450px !important; padding:0 !important;} .ui-dialog .ui-dialog-titlebar {height:45px; padding:0.9em 1em !important; border:0; background:#f1f1f1 !important; text-align:center !important;} .ui-dialog .ui-dialog-titlebar .ui-dialog-title {font-size:14px !important; font-weight:500 !important;} .ui-dialog .ui-dialog-titlebar-close {top:10px; right:10px; margin:0;} .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border:none; background:none;} .ui-state-default .ui-icon {margin-left:-10px; width:20px; height:20px;} .ui-state-default .ui-icon {background-image:url('/_skin/sw_kor_bcc/img/button/alert_close.png') !important; background-position:center;} .ui-dialog .ui-dialog-content {display:table; width:100% !important; height:120px !important; padding:2.5em 0 !important; font-size:15px; text-align:center; letter-spacing:-0.05rem;} .ui-dialog .ui-dialog-content > span {display:table-cell; font-size:14px; vertical-align:middle;} .ui-dialog .ui-dialog-buttonpane {margin:0 !important; margin-bottom:40px !important; padding:0 !important; border:0;} .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float:inherit !important; height:45px !important; text-align:center;} .ui-dialog .ui-dialog-buttonpane button {width:150px; height:45px; margin:0 5px !important; border:0; border-radius:6px; background:#000; color:#fff; font-family: 'Pretendard', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:14px !important;} .ui-dialog .ui-dialog-buttonpane button span {padding:10px; background:#aaa; color:#fff; font-size:13px;} .ui-dialog .ui-dialog-buttonpane button:nth-child(2) {border:1px solid #000 !important; background:#fff !important; color:#000 !important;} /* tooltip 스타일 */ [data-tooltip] {position:relative;} [data-tooltip]::after {visibility:hidden; display:flex; align-items:center; justify-content:center; position:absolute; top:100%; left:0; z-index:10; height:28px; padding:0 6px; border-radius:4px; background:#000; color:#fff; font-size:1rem; text-indent:0; white-space:pre; transform:translateY(-10px); opacity:0; content:attr(data-tooltip);} [data-tooltip]:hover::after {visibility:visible; margin-top:5px; opacity:1; transform:translateY(0); transition:all 0.4s;} [data-tooltip][fix]::after {left:50%; transform:translate(-50% , -10px); margin-top:-14px;} [data-tooltip][fix]:hover::after {transform:translate(-50% , 0);} [data-tooltip][top]:after {top:0;} [data-tooltip][top]:hover::after {transform:translateY(-100%);} [data-tooltip][right]::after {left:auto; right:0;} [data-tooltip][high] {z-index:15;} [data-tooltip][leftOut]::after {top:50%; left:auto; right:100%; margin-top:-14px;} @media all and (max-width:1023px) { [data-tooltip]::after {display:none;} } /* 아이폰 safe area 대응 (가로모드) */ body.ios-safe-area-landscape { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } body.ios-safe-area-landscape .gnb_top .btn_close { right: env(safe-area-inset-right); } body.ios-safe-area-landscape header .gnb_box .gnb .gnb_left { left: env(safe-area-inset-left); } body.ios-safe-area-landscape header .gnb_box .gnb .gnb_right { right: env(safe-area-inset-right); } body.ios-safe-area-landscape .iphone_common_env { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } body.ios-safe-area-landscape .dock { right: env(safe-area-inset-right); } body.ios-safe-area-landscape nav { padding-left: env(safe-area-inset-left); } body.ios-safe-area-landscape #detail .wrap_prd > .info .opt_toggle { max-height: 40dvh; } body.ios-safe-area-landscape #detail .wrap_prd > .info .opt_toggle .opt_toggle_inner { max-height: calc(40dvh - 30px); }