/*-----------------------------------------------------------------*/ /* CSS Table of Contents /*-----------------------------------------------------------------*/ /* 1. Reset 2. Globalprdimg 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 /*-----------------------------------------------------------------*/ /* NotoSansKR */ @font-face { font-family:'NotoSansKR'; font-weight:300; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Light.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Light.woff') format('woff'); } @font-face { font-family:'NotoSansKR'; font-weight:400; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Regular.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Regular.woff') format('woff'); } @font-face { font-family:'NotoSansKR'; font-weight:500; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Medium.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Medium.woff') format('woff'); } @font-face { font-family:'NotoSansKR'; font-weight:700; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Bold.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/NotoSansKR-Bold.woff') format('woff'); } /* Roboto */ @font-face { font-family:'Roboto'; font-weight:300; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Light.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Light.woff') format('woff'); } @font-face { font-family:'Roboto'; font-weight:400; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Regular.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Regular.woff') format('woff'); } @font-face { font-family:'Roboto'; font-weight:500; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Medium.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Medium.woff') format('woff'); } @font-face { font-family:'Roboto'; font-weight:700; src:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Bold.eot'); src:local(※), url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/Roboto-Bold.woff') format('woff'); } /* Pretendard */ @font-face { font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/PretendardVariable.woff2') format('woff2-variations'); } 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; outline:0; color:#1a1a1a; font-family:'Roboto','NotoSansKR', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:14px; line-height:1.6; vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} body {line-height:1.6;} 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;} img {vertical-align:top;} input[type=radio], input[type=checkbox] {vertical-align:middle;} input[type=text], input[type=email], input[type=password] {vertical-align:top;} a, a:hover, a:active, a:focus {text-decoration:none; cursor:pointer;} *, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} /*-----------------------------------------------------------------*/ /* 2. Global /*-----------------------------------------------------------------*/ .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;} .empty {padding:150px 0 !important; color:#999; font-size:16px; text-align:center;} .fl {float:left !important;} .fr {float:right !important;} .clear {clear:both;} .bc {display:block; margin-left:auto; margin-right:auto;} .p_color {color:#0971ce !important;} .p_cursor {cursor:pointer;} .i_info {display:inline-block; position:relative; top:4px; width:16px; height:16px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/icon_info.png') no-repeat center; font-style:normal; font-weight:normal; line-height:1;} /* input 기본 스타일 */ .form_input {height:40px; padding:4px 10px; border:1px solid #e6e6e6; background:#fff; color:#999; font-family:'Roboto','NotoSansKR', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-size:12px; transition:all .3s ease;} .form_input:focus {border-color:#000; outline:none !important;} .form_input.block {width:100% !important;} .form_input:-ms-input-placeholder {color:#999; font-family:'Roboto','NotoSansKR', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif;} .form_input::-webkit-input-placeholder {color:#999; font-family:'Roboto','NotoSansKR', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif;} .form_input::-moz-placeholder {color:#999; font-family:'Roboto','NotoSansKR', 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;} /* 셀렉트 */ select {max-width:100%; height:40px; padding:4px 6px; border:1px solid #e6e6e6; background:#fff; color:#999; font:inherit;} select.block {width:100%;} select:focus {border-color:#000; outline:none !important;} /* 서브 페이지 타이틀 */ h2.subtitle {padding:60px 0 50px; font-size:40px; font-weight:700; text-align:center;} h2.subtitle.list {padding-bottom:44px;} h2.subtitle.eng {font-weight:500;} /* 페이지 내 타이틀 */ h3.title.first {padding-top:0;} h3.title {padding:30px 0 20px;} /* 갯수 문단 */ .title_count {position:relative; top:-36px; height:0; color:#999; font-size:11px;} .title_count strong {color:#343434; font-size:11px;} /* 상품리스트 수량,정렬선택 */ .total_sort {clear:both; height:44px; margin:25px 0;} .total_sort .total {float:left; color:#1a1a1a; font-size:16px; line-height:44px; letter-spacing:-0.02rem;} .total_sort .total strong {font-size:inherit; font-weight:700;} .total_sort .sort {float:right;} .total_sort .sort select {height:44px; padding:0 40px 0 0; border:none; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/select_arrow.png') no-repeat right center; color:#1a1a1a; font-size:16px; -webkit-appearance:none; appearance:none;} /* 페이징 */ .paging * {vertical-align:middle;} .paging {margin-top:30px; font-size:0; text-align:center;} .paging li {display:inline; padding:0 10px; vertical-align:middle;} .paging li strong {display:inline-block; width:18px; height:28px; border-bottom:2px solid #1a1a1a; color:#1a1a1a; font-size:20px; font-weight:700; line-height:28px;} .paging li a {display:inline-block; width:18px; height:28px; color:#b2b2b2; font-size:20px; line-height:28px;} /* 박스 스타일 - 수량 */ .box_qty {display:inline-block; position:relative; vertical-align:top;} .box_qty .form_input {width:90px; height:34px; padding:0 30px; color:#1a1a1a; font-size:14px; text-align:center;} .box_qty .btn_ea a {display:block; position:absolute; top:0; width:30px; height:34px; background-repeat:no-repeat; background-position:center;} .box_qty .btn_ea a.ea_up {right:0; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_plus.png')} .box_qty .btn_ea a.ea_down {left:0; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_minus.png')} /* 컬러칩 리스트 */ .color_option {font-size:0;} .color_option:after {display:block; clear:both; content:'';} .color_option li {float:left; margin:0 8px 0 2px;} .color_option li a {display:block; position:relative; width:14px; height:14px; border:1px solid #9b9b9b; border-radius:50%;} .color_option li a.selected:after {position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:1px solid #9b9b9b; border-radius:50%; content:'';} .color_option li a img {width:14px; height:14px;} .text_option {font-size:0;} .text_option:after {display:block; clear:both; content:'';} .text_option li {float:left; text-align:left;} .text_option li a {overflow:hidden; display:block; height:20px; margin:1px; padding:0 6px; border:1px solid #d8d8d8; line-height:20px; text-align:center;} .text_option li a.selected {border:1px solid #ff1111;} .text_option li a.soldout {background:#ff1111; color:#fff;} /* 하단 줄 */ .underline {display:inline-block; position:relative;} .underline:after {position:absolute; left:50%; bottom:-3px; width:0; height:1px; background:#333; content:''; transition:all .3s ease;} .underline:before {position:absolute; right:50%; bottom:-3px; width:0; height:1px; background:#333; content:''; transition:all .3s ease;} .underline:hover:after, .underline:hover:before {width:50%;} /* 상품후기 평점 */ .gradebox {display:inline-block; position:relative; width:180px; height:30px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star_bg.png') no-repeat left top/cover; font-size:0;} .gradebox:after {display:block; position:absolute; left:0; top:0; height:100%; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star.png') no-repeat left top/auto 100%; content:'';} .gradebox.small {width:88px; height:15px;} .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%;} .gradebox.write label {display:inline-block !important; position:relative; z-index:10; width:36px; height:100%; opacity:0; font-size:0; cursor:pointer;} .gradebox.write input {width:auto; height:auto; margin:0; cursor:pointer;} /* 사은품 리스트 */ .list_gift > h3 {padding-bottom:15px;} .list_gift > ul {border:1px solid #e5e5e5; border-width:1px 0; font-size:0;} .list_gift > ul > li {display:inline-block; width:25%; margin-bottom:-1px; padding:20px 0; border-bottom:1px solid #e5e5e5; text-align:left; vertical-align:middle;} .list_gift > ul > li > .box {margin-left:20px; border-right:1px solid #e5e5e5;} .list_gift > ul > li:last-child > .box, .list_gift > ul > li:nth-child(4n) > .box {border-right:0;} .list_gift > ul > li > .box > .img {display:table-cell; position:relative; width:100px; height:100px; border:1px solid #e5e5e5;} .list_gift > ul > li > .box > .img img {position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; transform:translate(-50%, -50%);} .list_gift > ul > li > .box > .name {display:table-cell; padding:0 20px 0 10px; vertical-align:middle;} /* 쿠폰 다운로드 리스트 */ .list_cpn_down > .box {padding:0 30px 30px 30px; border:1px solid #dcdcdc;} .list_cpn_down > .box > ul {display:flex; flex-wrap:wrap;} .list_cpn_down > .box > ul > li {width:25%; margin-top:30px; padding:0 20px; border-right:1px solid #eee; text-align:center; vertical-align:top;} .list_cpn_down > .box > ul > li:last-child, .list_cpn_down > .box > ul > li:nth-child(4n) {border-right:0;} .list_cpn_down > .box > ul > li > .sale {display:inline-block; position:relative; min-width:100px; height:40px; padding:0 10px 0 26px; border:1px solid #999; font-size:14px; font-weight:bold; text-align:center; line-height:38px;} .list_cpn_down > .box > ul > li > .sale:before {position:absolute; left:-5px; top:50%; width:10px; height:10px; margin-top:-5px; border:1px solid #999; border-radius:50%; border-bottom-color:transparent; border-left-color:transparent; background-color:#fff; transform:rotate(45deg); content:'';} .list_cpn_down > .box > ul > li > .sale:after {position:absolute; left:16px; top:0; width:1px; height:100%; border-right:1px dashed #999; content:'';} .list_cpn_down > .box > ul > li > .name {margin:10px 0; font-weight:bold;} .list_cpn_down > .box > ul > li > .box_btn * {min-width:100px;} .list_cpn_down > .box > ul > li > .fin {display:inline-block; min-width:100px; padding:4px 8px; border:1px solid #c3c3c3; outline:none; background:#fff; color:#666 !important; line-height:1.4; white-space:nowrap;} /* 타이머 */ .box_timer {display:inline-block; margin-top:10px; border:1px solid #dcdcdc; border-radius:20px; font-size:0;} .box_timer > .title {display:inline-block; position:relative; padding:3px 10px; border-radius:20px; background-color:#333; color:#fff; font-size:11px; vertical-align:top;} .box_timer > .title:before {display:inline-block; width:13px; height:13px; margin:2px 5px 0 0; border:1px solid #fff; border-radius:50%; vertical-align:top; content:'';} .box_timer > .title:after {display:inline-block; position:absolute; left:13px; top:50%; width:4px; height:4px; margin-top:-4px; border:1px solid #fff; border-width:0 1px 1px 0; content:'';} .box_timer > ._timesale_timer {display:inline-block; padding:0 10px 0 7px;} .box_timer > ._timesale_timer * {color:#333; font-size:12px; line-height:21px;} .box_timer > ._timesale_timer > ._timer_num {font-weight:900;} .box_timer.big > .title {padding:5px 10px; font-size:12px;} .box_timer.big > .title:before {margin-top:3px;} .box_timer.big > ._timesale_timer * {font-size:13px; line-height:29px;} #detail .box_timer {float:right; margin-top:8px; border:none; border-radius:0;} #detail .box_timer > .title {padding:0 0 0 20px; border-radius:0; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_box_timer.png') no-repeat left center; color:#1a1a1a; font-size:16px; font-weight:500; vertical-align:middle;} #detail .box_timer > .title:before, #detail .box_timer > .title:after {display:none;} #detail .box_timer > ._timesale_timer {vertical-align:middle;} #detail .box_timer > ._timesale_timer * {color:#1a1a1a; font-size:16px; line-height:21px;} #detail .box_timer > ._timesale_timer > ._timer_num {font-weight:400;} /* 이메일 자동 완성 */ .auto_complete_dialog {display:none; position:absolute; z-index:10; width:100%; margin-top:-1px; padding:10px 0; border:1px solid #535353; background-color:#fff; word-break:break-all;} .auto_complete_dialog li {padding:5px 20px; font-size:14px; cursor:pointer;} .auto_complete_dialog li:hover, .auto_complete_dialog li.selected {background-color:#f0f2f6;} #join_input .auto_complete_dialog {width:460px;} /* 체크박스, 라디오 (input + label) */ .check_chg input[type=checkbox] {display:none;} .check_chg input[type=checkbox] + label {display:inline-block; min-height:23px; padding-left:34px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_cb.png') no-repeat left center; font-size:14px; vertical-align:top; cursor:pointer;} .check_chg input[type=checkbox]:checked + label {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_cb_checked.png');} .radio_chg input[type=radio] {display:none;} .radio_chg input[type=radio] + label {display:inline-block; min-height:23px; padding-left:34px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_radio.png') no-repeat left center; font-size:14px; vertical-align:top; cursor:pointer;} .radio_chg input[type=radio]:checked + label {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_radio_checked.png');} /* 체크박스, 라디오 (input) */ input[type=checkbox] {display:inline-block; overflow:hidden; width:23px; height:23px; margin:-1px 10px 0 0; border:0; background:no-repeat center; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_cb.png'); -webkit-appearance:none; -moz-appearance:none; vertical-align:middle; outline:0; cursor:pointer;} input[type=checkbox]::-ms-check {display:none;} input[type=checkbox]:checked {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_cb_checked.png');} input[type=radio] {display:inline-block; overflow:hidden; width:23px; height:23px; margin:-1px 10px 0 0; border:0; background:no-repeat center; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_radio.png'); vertical-align:middle; outline:0; -webkit-appearance:none; appearance:none; cursor:pointer;} input[type=radio]:checked {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_radio_checked.png');} /* 회원가입 step */ .join_step_view {padding-bottom:65px; font-size:0; text-align:center;} .join_step_view li {display:inline-block; position:relative; margin:0 25px; color:#b2b2b2; font-size:20px; font-weight:400; letter-spacing:-0.02rem; vertical-align:top;} .join_step_view li:after {display:inline-block; position:absolute; top:50%; right:-30px; width:11px; height:18px; margin-top:-9px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/join_step_arrow.png') no-repeat center; content:'';} .join_step_view li:last-child:after {display:none;} .join_step_view li span {color:inherit; font-size:inherit; font-weight:inherit;} .join_step_view li.active {border-bottom:3px solid #1a1a1a; color:#1a1a1a; font-weight:700;} .join_step_view li.active:after {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/join_step_arrow_active.png');} /* 네비게이터 */ .navigator {height:50px; border-bottom:1px solid #ededed;} .navigator p {min-width:1300px; max-width:1520px; margin:0 auto;height:49px; color:#b2b2b2; font-size:13px; letter-spacing:-0.02rem; line-height:49px;} .navigator p a {display:inline-block; position:relative; margin-left:20px; color:inherit; font:inherit;} .navigator p a:last-child {color:#1a1a1a;} .navigator p a:after {position:absolute; top:50%; left:-11px; width:5px; height:7px; margin-top:-4px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/navigator_arrow.png') no-repeat center; content:'';} .navigator p a.home {margin:0;} .navigator p a.home:after {display:none;} /* transition */ .ani_up {visibility:hidden; opacity:0; -webkit-transform:translate3d(0, 50px, 0); -moz-transform:translate3d(0, 50px, 0); -ms-transform:translate3d(0, 50px, 0); -o-transform:translate3d(0, 50px, 0); transform:translate3d(0, 50px, 0);} .ani_fade {visibility:hidden; opacity:0;} .active.ani, .transition.active .ani {visibility:visible; opacity:1; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);} .active.fade, .transition.active .fade {visibility:visible; opacity:1;} .active.s6, .transition.active .s6 {-webkit-transition:all .6s ease-in-out; -moz-transition:all .6s ease-in-out; -ms-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; transition:all .6s ease-in-out;} .active.s8, .transition.active .s8 {-webkit-transition:all .8s ease-in-out; -moz-transition:all .8s ease-in-out; -ms-transition:all .8s ease-in-out; -o-transition:all .8s ease-in-out; transition:all .8s ease-in-out;} .active.s10, .transition.active .s10 {-webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out;} /*-----------------------------------------------------------------*/ /* 2-1. table /*-----------------------------------------------------------------*/ /* 테이블 스타일 - 가로 */ .tbl_col {table-layout:fixed; clear:both; width:100%; border-top:3px solid #1a1a1a; border-collapse:collapse;} .tbl_col caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_col > thead > tr > th {padding:15px 0; border-bottom:1px solid #e5e5e5; font-size:16px; font-weight:500; text-align:center; vertical-align:middle;} .tbl_col > tbody > tr > td {padding:25px 0; border-bottom:1px solid #e5e5e5; font-size:16px; text-align:center; vertical-align:middle;} .tbl_col > tbody > tr > td * {font-size:16px;} .tbl_col > tbody > tr > td img {max-width:100%; height:auto; vertical-align:middle;} .tbl_col > tbody > tr > td input {margin:0;} .tbl_col > tbody > tr > td.tal {padding-left:25px !important;} .tbl_col > tbody > tr > td.img img {width:100px; height:auto;} .tbl_col > tbody > tr > td.order_number a {font-weight:500; text-decoration:underline;} .tbl_col > tbody > tr > td.order_prc {font-weight:500;} .tbl_col > tbody > tr > td.order_state {color:#0971ce;} /* 테이블 스타일 - 가로 - 장바구니, 재입고 알림 신청 내역 */ .tbl_col.prd > tbody > tr > td.delete_wish a {display:inline-block; position:relative;} .tbl_col.prd > tbody > tr > td.delete_wish a:first-child:after {position:absolute; right:0; top:8px; width:1px; height:15px; background:#e0e0e0; content:'';} .tbl_col.prd > tbody > tr > td.prc, .tbl_col.prd > tbody > tr > td.prc * {font-weight:500;} .tbl_col.prd > tbody > tr > td.mileage {font-weight:300;} .tbl_col.prd > tbody > tr > td .prd_img {background:#f7f7f7;} .tbl_col.prd > tbody > tr > td .name, .tbl_col.prd > tbody > tr > td .name * {font-size:18px; font-weight:500; letter-spacing:-0.02rem; line-height:30px;} .tbl_col.prd > tbody > tr > td .opt {padding:6px 0 13px; color:#999; font-size:15px; letter-spacing:-0.02rem; line-height:26px;} .tbl_col.prd > tbody > tr > td .btn_edit {display:inline-block; vertical-align:top;} .tbl_col.prd > tbody > tr > td .btn_edit a {font-size:11px; text-decoration:underline; line-height:35px;} .tbl_col.prd > tbody > tr > td .btn_delivery {margin:4px 0;} .tbl_col.prd > tbody > tr > td img {vertical-align:middle;} .tbl_col.prd > tbody > tr > td .today {padding-top:10px;} .tbl_col.prd > tbody > tr > td .today > span {display:block; color:#666;} .tbl_col.prd > tbody > tr > td .box_qty {margin-bottom:10px;} .tbl_col.prd > tbody > tr > td span.stat1 {color:#111;} .tbl_col.prd > tbody > tr > td span.stat2 {color:#2591bc;} .tbl_col.prd > tbody > tr > td span.stat3 {color:#c05b5b;} .tbl_col.prd > tbody > tr > td span.stat4 {color:#999;} /* 테이블 스타일 - 가로 - qna, review */ .tbl_col.board {border-top:3px solid #1a1a1a;} .tbl_col.board > thead {display:none;} .tbl_col.board > tbody > tr > td, .tbl_col.board > tbody > tr > td * {font-size:16px; font-weight:normal;} .tbl_col.board > tbody > tr > td.notice_cnt {padding:0; border:0;} .tbl_col.board > tbody > tr > td.notice_cnt .notice_cnt_frame {display:none; padding:15px; border-bottom:1px solid #e0e0e0; background:#fafafa; text-align:left; word-break:break-all; word-wrap:break-word;} .tbl_col.board > tbody > tr > td.subject img {vertical-align:middle;} .tbl_col.board > tbody > tr > td.subject .prd {padding-bottom:10px;} .tbl_col.board > tbody > tr > td.subject .prd a {color:#999; font-size:14px;} .tbl_col.board > tbody > tr > td.subject .title, .tbl_col.board > tbody > tr > td.subject .title * {font-size:18px; font-weight:700;} .tbl_col.board > tbody > tr > td.subject .title a {cursor:pointer;} .tbl_col.board > tbody > tr > td.subject .content {padding-top:10px;} .tbl_col.board > tbody > tr > td.subject .more {display:inline-block; padding-top:10px; color:#999; font-size:14px;} .tbl_col.board > tbody > tr > td.name img {width:auto; height:20px;} .tbl_col.board > tbody > tr > td.date {font-weight:300;} .tbl_col.board > tbody > tr > td.date2 {color:#999;} .tbl_col.board > tbody > tr > td .prd_img {overflow:hidden; width:120px; height:120px;} .tbl_col.board > tbody > tr > td .prd_img img {width:120px; height:auto;} .tbl_col.board > tbody > tr > td .prd_imgyes, .tbl_col.board > tbody > tr > td .rev_imgno {display:none;} .tbl_col.board > tbody > tr > td .best {display:inline-block; padding:0 3px; background:#f00; color:#fff !important;} .tbl_col.board .grade {padding-left:10px; color:#999;} /* 테이블 스타일 - 세로 */ .tbl_row {table-layout:fixed; width:100%; border-top:1px solid #e0e0e0;} .tbl_row caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_row th {padding:15px 0 15px 30px; border-bottom:1px solid #e0e0e0; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_row td {padding:15px 10px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle; word-break:break-all; word-wrap:break-word;} /* 테이블 스타일 - 주문서, 주문상세조회 */ .tbl_order {table-layout:fixed; width:100%; margin:0 auto; border-top:1px solid #e0e0e0;} .tbl_order caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_order th {padding:20px; border:1px solid #e0e0e0; border-width:0 1px 1px 0; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_order td {padding:20px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle;} .tbl_order td .form_input {width:260px; vertical-align:middle;} .tbl_order td .msg {color:#999; font-size:11px; vertical-align:middle;} .tbl_order td .own_mileage, .tbl_order td .own_deposit {color:#d53838; line-height:35px;} .tbl_order td.edit {line-height:30px;} .tbl_order td.address p {margin-top:10px;} .tbl_order td.address p:first-child {margin-top:0;} .tbl_order td.address .zip .form_input {width:158px;} /* 테이블 스타일 - 주문서, 주문상세조회, 장바구니 */ .tbl_order2 {table-layout:fixed; width:100%; margin:0 auto;} .tbl_order2 caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_order2 th {padding:6px 0; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_order2 td {padding:6px 0; text-align:right; vertical-align:middle;} .tbl_order2.sale {margin:5px 0; border:1px solid #dcdcdc; border-width:1px 0;} .tbl_order2 .total td {position:relative;} .tbl_order2 .total td .view_info {display:none; margin-top:5px;} .tbl_order2 .total_price, .tbl_order2 .total_price * {color:#d53838;} /* 테이블 스타일 - 상품정보고시 */ .tbl_prdinfo {table-layout:fixed; width:100%;} .tbl_prdinfo caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_prdinfo th {padding:8px 0 8px 30px; font-size:16px; font-weight:500; text-align:left; letter-spacing:-0.02rem; vertical-align:middle;} .tbl_prdinfo td {padding:8px 15px; color:#999; font-size:16px; text-align:left; line-height:26px; letter-spacing:-0.02rem; vertical-align:middle;} /*-----------------------------------------------------------------*/ /* 2-2. button /*-----------------------------------------------------------------*/ /* 버튼스타일 - 기본 */ .box_btn {display:inline-block; text-align:center; vertical-align:top;} .box_btn > * {display:inline-block; margin:0; padding:11px 12px; border:1px solid #1a1a1a; outline:none; background:#1a1a1a; color:#fff !important; font-size:12px; font-family:'Roboto','NotoSansKR', Malgun Gothic, '맑은 고딕', AppleGothic, Dotum, '돋움', sans-serif; font-weight:normal; text-align:center; vertical-align:middle; line-height:1.4; white-space:nowrap; cursor:pointer; -webkit-appearance:none; transition:all .2s ease;} .box_btn > *:hover, .box_btn > *:active, .box_btn > *:focus {background:#000;} /* 버튼스타일 - 크기 */ .box_btn.small > * {padding:6px 8px 7px; font-size:14px;} .box_btn.large > * {padding:12px 16px; font-size:14px;} .box_btn.huge > * {padding:20px; font-size:20px;} /* h70 */ /* 버튼스타일 - 가로길이 */ .box_btn.block {display:block;} .box_btn.block > * {width:100%;} .box_btn.w50 > * {width:50px;} .box_btn.w75 > * {width:75px;} .box_btn.w80 > * {width:80px;} .box_btn.w90 > * {width:90px;} .box_btn.w100 > * {width:100px;} .box_btn.w110 > * {width:110px;} .box_btn.w125 > * {width:125px;} .box_btn.w130 > * {width:130px;} .box_btn.w150 > * {width:150px;} .box_btn.w175 > * {width:175px;} .box_btn.w200 > * {width:200px;} .box_btn.w220 > * {width:220px;} .box_btn.w225 > * {width:225px;} .box_btn.w250 > * {width:250px;} .box_btn.w275 > * {width:275px;} .box_btn.w300 > * {width:300px;} .box_btn.w325 > * {width:325px;} .box_btn.w350 > * {width:350px;} .box_btn.w460 > * {width:460px;} /* 버튼스타일 - 색상 */ .box_btn.white * {border-color:#999; background:#fff; color:#1a1a1a !important;} .box_btn.white:hover *, .box_btn.white:active *, .box_btn.white:focus * {background:#f5f5f5;} .box_btn.white2 * {border-color:#1a1a1a; background:#fff; color:#1a1a1a !important;} .box_btn.white2:hover *, .box_btn.white2:active *, .box_btn.white2:focus * {background:#f5f5f5;} .box_btn.white3 * {border-color:#e6e6e6; background:#fff; color:#1a1a1a !important;} .box_btn.white3:hover *, .box_btn.white3:active *, .box_btn.white3:focus * {background:#f5f5f5;} .box_btn.gray * {border-color:#f5f5f5; background:#f5f5f5; color:#666 !important;} .box_btn.gray:hover *, .box_btn.gray:active *, .box_btn.gray:focus * {background:#dadada;} .box_btn.gray2 * {border-color:#dcdcdc; background:#eee; color:#666 !important;} .box_btn.gray2:hover *, .box_btn.gray2:active *, .box_btn.gray2:focus * {background:#dadada;} .box_btn.blue * {border-color:#0971ce; background:#0971ce; color:#fff !important;} .box_btn.blue:hover *, .box_btn.blue:active *, .box_btn.blue:focus * {background:#0964b6;} /* 버튼스타일 - 텍스트 */ .box_btn.strong * {font-weight:bold;} .box_btn.mt {margin-top:5px;} .box_btn.radius * {border-radius:35px;} /* 나열 버튼 */ .btn_col {width:100%;} .btn_col:after {display:block; clear:both; content:'';} .btn_col span {float:left; width:49%;} .btn_col span:last-child {float:right;} .btn_col.col3 span {float:left; width:32%;} .btn_col.col3 span:nth-child(3n-1) {margin:0 2%;} .btn_col2 {width:100%;} .btn_col2:after {display:block; clear:both; content:'';} .btn_col2 span {float:left; width:50%;} .btn_col2 span:last-child {float:right; position:relative; left:-1px;} /*-----------------------------------------------------------------*/ /* 2-3. product /*-----------------------------------------------------------------*/ /* 상품스타일 - 기본 */ .prd_basic {display:block; font-size:0; text-align:left !important;} .prd_basic > li {display:inline-block; padding-bottom:70px; text-align:center; vertical-align:top;} .prd_basic.col2 {margin-left:-10px;} .prd_basic.col2 > li {width:50%; padding-left:10px;} .prd_basic.col3 {margin-left:-10px;} .prd_basic.col3 > li {width:33.33%; padding-left:10px;} .prd_basic.col4 {margin-left:-20px;} .prd_basic.col4 > li {width:25%; padding-left:20px;} .prd_basic.col5 {margin-left:-20px;} .prd_basic.col5 > li {width:20%; padding-left:20px;} .prd_basic .box {position:relative; width:100%; margin:0 auto;} .prd_basic .box .img {position:relative; z-index:1; width:100%; margin:0 auto; background:#f7f7f7; text-align:center;} .prd_basic .box .img .prdimg img {width:100%; height:auto;} .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%; color:#000; font-size:14px; font-weight:bold; text-align:center; cursor:pointer;} /* 품절시 soldout 출력 */ .prd_basic .box .img .icon {position:absolute; top:12px; left:15px;} .prd_basic .box .img .icon img {display:block; margin-top:8px;} .prd_basic .box .info {text-align:center;} .prd_basic .box .name {margin-top:21px;} .prd_basic .box .name a {font-size:20px; font-weight:500; letter-spacing:-0.02rem; line-height:32px;} .prd_basic .box .sub {overflow:hidden; height:60px; margin-top:7px; color:#999; font-size:18px; letter-spacing:-0.02rem; line-height:30px;} .prd_basic .box .price {padding-top:3px; font-size:0;} .prd_basic .box .price span {display:inline-block; padding:0 5px; color:#0971ce; font-size:24px; font-weight:700; letter-spacing:-0.02rem; word-break:break-all; word-wrap:break-word;} .prd_basic .box .price .consumer {color:#b2b2b2; font-size:20px; font-weight:400; text-decoration:line-through;} .prd_basic .box .price .consumerY {display:none;} .prd_basic .box .price .sellY {color:#b2b2b2; font-size:20px; font-weight:400; text-decoration:line-through;} .prd_basic .box .price .discount {display:none;} .prd_basic .box .price .discountY {display:inline-block;} .prd_basic .box .rev_wrap {padding-top:20px;} .prd_basic .box .rev_wrap .gradebox_list {display:inline-block; position:relative; width:88px; height:25px; margin-right:3px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star_bg.png') no-repeat left center/auto 15px; vertical-align:middle;} .prd_basic .box .rev_wrap .gradebox_list > i {display:inline-block; position:absolute; left:0; top:0; height:100%; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star.png') no-repeat left center/auto 15px;} .prd_basic .box .rev_wrap .gradebox_list > i.point0 {width:0;} .prd_basic .box .rev_wrap .gradebox_list > i.point1 {width:20px;} .prd_basic .box .rev_wrap .gradebox_list > i.point2 {width:37px;} .prd_basic .box .rev_wrap .gradebox_list > i.point3 {width:54px;} .prd_basic .box .rev_wrap .gradebox_list > i.point4 {width:71px;} .prd_basic .box .rev_wrap .gradebox_list > i.point5 {width:88px;} .prd_basic .box .rev_wrap .count {display:inline-block; margin-top:2px; color:#999; font-size:16px; letter-spacing:-0.02rem; vertical-align:middle;} .prd_basic .box .rev_wrap .count .star {color:inherit; font:inherit;} .prd_basic .box .cart_btn {display:none; padding-top:7px;} .prd_basic .box .cart_btn a {display:inline-block; width:182px; height:48px; border:1px solid rgba(255,255,255,.6); border-radius:25px; color:#fff; font-size:16px; font-weight:500; text-align:center; letter-spacing:-0.02rem; line-height:48px;} .prd_basic .box .cart_btn a:hover {background:#fff; color:#1a1a1a !important;} .prd_basic .box .today {display:inline-block; margin:15px auto 0; padding:3px; background-color:#ebebeb;} .prd_basic .box .today > span {padding-left:5px; color:#666;} /* 상품스타일 - 기본 - 레이어 */ .prd_basic.mini {width:100%; text-align:center;} .prd_basic.mini .box .img .prdimg {transition:none;} .prd_basic.mini .box .img:hover .prdimg {-ms-transform:none; -webkit-transform:none; transform:none;} .prd_basic.mini .box .img .icon_best {position:absolute; left:10px; top:10px; width:40px; height:40px; border-radius:50%; background:#fff; line-height:40px;} .prd_basic.mini .box .info {display:none; position:absolute; left:50%; bottom:10px; z-index:5; width:100%; margin-left:-50%; background:transparent; text-align:center;} .prd_basic.mini .box:hover .info {display:block;} .prd_basic.mini .box:hover .img .prdimg {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity:.3;} .prd_basic.mini .box .price .consumer, .prd_basic.mini .box .summary, .prd_basic.mini .box .count, .prd_basic.mini .box .icon, .prd_basic.mini .box .today {display:none;} /* 상품스타일 - 기본 - 레이어 - new 5% dc */ .prd_basic.mini.new .box .img, .prd_basic.mini.new .box .info {width:175px;} .prd_basic.mini.new .box .info {margin-left:-87.5px;} /* 상품스타일 - 기본 - 레이어 - 카테고리 추천 */ .prd_basic.mini.best .box .img, .prd_basic.mini.best .box .info {width:205px;} .prd_basic.mini.best .box .info {margin-left:-102.5px;} /* 상품스타일 - 기본 - 슬라이드 */ .prd_basic.slide {display:none;} .prd_basic.slide.slick-initialized {display:block;} .prd_basic.slide .slick-prev {position:absolute; left:-44px; top:50%; width:24px; height:88px; margin-top:-44px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/slide_prev.png') no-repeat center;} .prd_basic.slide .slick-next {position:absolute; right:-44px; top:50%; width:24px; height:88px; margin-top:-44px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/slide_next.png') no-repeat center;} /* 상품스타일 - 관심상품, 관련상품 */ .prd_related {table-layout:fixed; clear:both; width:100%; border-top:3px solid #1a1a1a; border-collapse:collapse;} .prd_related > thead {display:none;} .prd_related > tbody > tr > td {border-bottom:1px solid #e0e0e0; vertical-align:middle; text-align:center;} .prd_related > tbody > tr > td.img img {width:120px; height:auto;} .prd_related > tbody > tr > td.tal, .prd_related > tbody > tr > td.opt {padding-left:15px; text-align:left;} .prd_related > tbody > tr > td.opt select {display:block; min-width:130px; margin:5px 0;} .prd_related > tbody > tr > td .soldout {display:none; color:#d53838;} .prd_related > tbody > tr > td .soldout.out {display:inline;} .prd_related > tbody > tr > td .summary {color:#888; font-size:11px;} /*-----------------------------------------------------------------*/ /* 3. Layout /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 3-1. wrapper /*-----------------------------------------------------------------*/ #wrapper {position:relative; min-width:1300px; text-align:left;} #container {overflow:hidden;} .wrap_inner {width:1300px; margin:0 auto;} /* 컨텐츠 사이즈 */ .wrap_inner2 {min-width:1300px; max-width:1520px; margin:0 auto;} /* 컨텐츠 사이즈 */ .wrap_inner3 {width:1220px; margin:0 auto;} /* store 컨텐츠 사이즈 */ /*-----------------------------------------------------------------*/ /* 3-2. header /*-----------------------------------------------------------------*/ #topbnr {position:relative; z-index:50; background:#f7f1eb; text-align:center;} #topbnr p a {display:inline-block; height:42px; padding-right:50px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/topbnr_arrow.png') no-repeat right 1px center; font-size:13px; line-height:42px;} #topbnr p a strong {color:#0971ce; font-weight:700;} #topbnr .close {display:inline-block; position:absolute; top:0; right:20px; width:42px; height:42px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/topbnr_close.png') no-repeat center; cursor:pointer;} #header {height:80px;} #header .fixed {position:relative; z-index:50; width:100%; height:80px; border-bottom:1px solid #ededed; background:#fff;} #header .fixed .hd_inner {position:relative; max-width:1660px; min-width:1300px; margin:0 auto;} #header .fixed h1 {position:absolute; top:26px; left:0; z-index:30;} #header .fixed .gnb {position:absolute; top:0; right:0; font-size:0; display:flex;} #header .fixed .gnb > li {display:inline-block; position:relative;} #header .fixed .gnb > li > a {display:inline-block; width:48px; height:80px; background:no-repeat center; color:transparent; font-size:0;} #header .fixed .gnb > li.btb > a {width:auto; margin-right:5px; color:rgb(26, 26, 26); font-size:20px; line-height:80px;} #header .fixed .gnb > li.mypage > a {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/hd_mypage.png');} #header .fixed .gnb > li.cart > a {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/hd_cart.png');} #header .fixed .gnb > li.cart > a .ea_cart {display:block; position:absolute; top:22px; right:4px; width:18px; height:18px; border-radius:50%; background:#0971ce; color:#fff; font-size:13px; text-align:center; line-height:18px;} #header .fixed .gnb > li.search > a {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/hd_search.png');} #header .fixed .gnb > li.allmenu > a {width:38px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/hd_allmenu.png') no-repeat right center;} #header .fixed .gnb > li .depth {display:none; position:absolute; top:80px; left:50%; z-index:45; width:150px; margin-left:-75px; padding:19px 25px; background:#fff;} #header .fixed .gnb > li:hover .depth {display:block;} #header .fixed .gnb > li .depth > li {padding:6px 0;} #header .fixed .gnb > li .depth > li a {font-size:15px; letter-spacing:-0.02rem;} #header .fixed .lnb {padding-left:130px; font-size:0;} #header .fixed .lnb > li {display:inline-block; margin-left:20px; padding:0 10px;} #header .fixed .lnb > li > a {display:inline-block; position:relative; height:80px; font-size:20px; line-height:80px;} #header .fixed .lnb > li > a:after {display:block; position:absolute; bottom:26px; left:0; width:0; height:2px; background:#333; transition:all .3s ease; content:'';} #header .fixed .lnb > li.active > a, #header .fixed .lnb > li > a:hover {font-weight:700;} #header .fixed .lnb > li.active > a:after, #header .fixed .lnb > li > a:hover:after {width:100%;} #header .fixed .box_search {display:none; position:absolute; top:0; left:0; z-index:20; width:100%; height:79px; padding:20px 0; background:#fff;} #header .fixed .box_search .close {display:inline-block; position:absolute; top:0; right:36px; width:48px; height:80px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/hd_search_close.png') no-repeat center; color:transparent; font-size:0; cursor:pointer;} #header .fixed .box_search .box {position:relative; width:464px; margin:0 auto; padding-right:40px; border-bottom:1px solid #1a1a1a;} #header .fixed .box_search .box .basic_search {height:39px; padding:0 9px; border:none; color:#999; font-size:16px; letter-spacing:-0.02rem;} #header .fixed .box_search .box .basic_search:-ms-input-placeholder {color:#999;} #header .fixed .box_search .box .basic_search::-webkit-input-placeholder {color:#999;} #header .fixed .box_search .box .basic_search::-moz-placeholder {color:#999;} #header .fixed .box_search .box .btn {position:absolute; top:50%; right:9px; margin-top:-11px; outline:0;} #header .depth_wrap {display:none; position:absolute; top:80px; left:0; z-index:50; width:100%; padding:50px 0 85px; background:#fff;} #header .depth_wrap .depth_inner {overflow:hidden; position:relative; min-width:1300px; max-width:1660px; margin:0 auto;} #header .depth_wrap .cate_name {display:none; position:absolute; top:0; left:0; z-index:5; height:45px; font-size:17px; font-weight:500; line-height:45px;} #header .depth_wrap .cate {position:relative; float:left; width:220px; vertical-align:top;} #header .depth_wrap .cate > li {padding-bottom:18px;} #header .depth_wrap .cate > li > a {display:block; font-size:24px; font-weight:300; letter-spacing:-0.01rem;} #header .depth_wrap .cate > li.selected > a {background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/depth_arrow.png') no-repeat right center; font-weight:700;} #header .depth_wrap .cate > li.selected .cate_depth {display:block;} #header .depth_wrap .cate > li .cate_depth {display:none; position:absolute; top:0; right:-220px; width:220px; height:100%; padding-left:40px;} #header .depth_wrap .cate > li .cate_depth > li {padding-bottom:18px;} #header .depth_wrap .cate > li .cate_depth > li > a {display:block; color:#333; font-size:20px; font-weight:300; letter-spacing:-0.01rem;} #header .depth_wrap .prd_cate {position:static;/* min-height:370px; */} #header .depth_wrap .prd_cate > li.selected .img_cate {display:block;} #header .depth_wrap .prd_cate .img_cate {display:none; position:absolute; top:0; left:220px; width:calc(100% - 220px); padding:0 50px 0 35px; font-size:0;} #header .depth_wrap .prd_cate .img_cate > li {display:inline-block; width:25%; padding-left:15px; vertical-align:top;} #header .depth_wrap .prd_cate .img_cate > li .img {padding-bottom:14px;} #header .depth_wrap .prd_cate .img_cate > li .img img {width:100%;} #header .depth_wrap .prd_cate .img_cate > li a {font-size:20px; letter-spacing:-0.02rem;} #header .depth_wrap .brand_cate .img_cate {display:none; position:absolute; top:0; left:540px; width:calc(100% - 540px); /* padding:0 50px 0 35px; */ font-size:0;} #header .depth_wrap .brand_cate .img_cate > li {display:inline-block; width:50%; padding-left:20px; text-align:left;} #header .depth_wrap .brand_cate .img_cate > li .img {padding-bottom:14px;} #header .depth_wrap .brand_cate .img_cate > li img {width:100%;} #header .depth_wrap .brand_cate .img_cate > li p {padding-top:15px; font-size:18px; letter-spacing:-0.02rem;} #header .depth_wrap .depth_bnr {float:right; width:calc(100% - 540px); font-size:0; text-align:right; vertical-align:top;} #header .depth_wrap .depth_bnr > li {display:inline-block; width:50%; padding-left:20px; text-align:left;} #header .depth_wrap .depth_bnr > li img {width:100%;} #header .depth_wrap .depth_bnr > li p {padding-top:15px; font-size:18px; letter-spacing:-0.02rem;} #header #depth_dimmed {display:none; position:fixed; top:0; left:0; z-index:30; width:100%; height:100%; background:rgba(0,0,0,.4);} #all_menu {visibility:hidden; overflow-y:scroll; position:fixed; top:0; right:-100%; z-index:60; width:100%; height:100%; background:#f7f7f7; transition:all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);} #all_menu .close {display:block; position:absolute; top:30px; right:6.77vw; width:18px; height:18px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/all_menu_close.png') no-repeat center; color:transparent; font-size:0; cursor:pointer; transition:0.5s;} #all_menu .close:hover {-webkit-transform:rotate(90deg); transform:rotate(90deg);} #all_menu .all_menu_table {display:table; width:100%; height:100%; padding:0 10.41vw;} #all_menu .all_menu_cnt {display:table-cell; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/all_menu_bg.png') no-repeat center right; vertical-align:middle;} #all_menu .cate_wrap {position:relative; width:410px;} #all_menu .cate_wrap > li {padding-bottom:36px;} #all_menu .cate_wrap > li > a {display:inline-block; position:relative; font-size:52px; font-weight:700; line-height:1.1; cursor:pointer;} #all_menu .cate_wrap > li > a.gray {color:#ccc;} #all_menu .cate_wrap > li > a.active {color:#1a1a1a;} #all_menu .cate_wrap > li > a:after {position:absolute; bottom:-3px; left:0; width:0; height:3px; background:#333; transition:all .3s ease; content:'';} #all_menu .cate_wrap > li > a.active:after {width:100%;} #all_menu .cate_wrap > li > .depth {display:none; position:absolute; top:0; left:410px; width:410px;height:100%;} #all_menu .cate_wrap > li > .depth > li {padding-bottom:24px;} #all_menu .cate_wrap > li > .depth > li a {font-size:24px; font-weight:300; letter-spacing:-0.02rem;} #all_menu .cate_wrap > li > .depth > li a:hover {font-weight:700;} #all_menu .sns {padding-top:124px; font-size:0;} #all_menu .sns li {display:inline-block; padding-right:23px; vertical-align:middle;} #all_menu.is_show {visibility:visible; right:0;} /* 조건부 (상단 고정) */ #header .fixed.fix {position:fixed; top:0; left:0;} /* 조건부 (페이지 중분류 active) */ #header.page_active {height:125px;} #header .fixed .lnb > li.page_active > a {font-weight:700 !important;} #header .fixed .lnb > li.page_active > a:after {width:100% !important;} #header .depth_wrap.page_active {display:block !important; z-index:40; height:45px; padding:0; border:1px solid #ededed; border-width:0 0 1px;} #header .depth_wrap.page_active .cate_name {display:block;} #header .depth_wrap.page_active .cate {float:none; width:100%; font-size:0; text-align:center;} #header .depth_wrap.page_active .cate.prd_cate {min-height:auto;} #header .depth_wrap.page_active .cate > li {display:inline-block; padding:0; margin:0 20px;} #header .depth_wrap.page_active .cate > li > a {display:inline-block; height:45px; background:none; font-size:17px; font-weight:400; line-height:45px;} #header .depth_wrap.page_active .cate > li.active > a {border-bottom:2px solid #333; font-weight:500;} #header .depth_wrap.page_active .cate > li > .img_cate {display:none;} #header .depth_wrap.page_active .depth_bnr {display:none;} /*-----------------------------------------------------------------*/ /* 3-3. content /*-----------------------------------------------------------------*/ #cnt {padding-bottom:140px; min-height:500px;} #cnt .cntbody {width:1300px; margin:0 auto;} /*-----------------------------------------------------------------*/ /* 3-4. footer /*-----------------------------------------------------------------*/ #footer {padding:60px 0 80px; background:#f7f7f7;} #footer .ft_wrap {overflow:hidden; max-width:1660px; min-width:1300px; margin:0 auto;} #footer .ft_wrap .quick_wrap {float:right;} #footer .ft_wrap .quick_wrap .quick {font-size:0;} #footer .ft_wrap .quick_wrap .quick > dl {display:inline-block; padding-left:75px; vertical-align:top;} #footer .ft_wrap .quick_wrap .quick > dl dt {padding-bottom:8px; font-size:14px; font-weight:500;} #footer .ft_wrap .quick_wrap .quick > dl dd a {font-size:13px; letter-spacing:-0.05rem; line-height:26px;} #footer .ft_wrap .quick_wrap .quick > dl dd.cs {color:#999; font-size:13px; letter-spacing:-0.02rem; line-height:21px;} #footer .ft_wrap .quick_wrap .quick > dl dd.cs strong {display:block; padding-bottom:10px; color:#1a1a1a; font-size:26px; letter-spacing:0.01rem; line-height:1.2;} #footer .ft_wrap .quick_wrap .sns {font-size:0; text-align:right;} #footer .ft_wrap .quick_wrap .sns li {display:inline-block; padding-left:14px; vertical-align:middle;} #footer .ft_wrap .shopinfo {float:left;} #footer .ft_wrap .shopinfo .logo {padding-bottom:35px;} #footer .ft_wrap .shopinfo .menu {padding-bottom:20px; font-size:0;} #footer .ft_wrap .shopinfo .menu > li {display:inline-block; position:relative; margin-right:13px; vertical-align:top;} #footer .ft_wrap .shopinfo .menu > li a {font-size:13px;} #footer .ft_wrap .shopinfo .menu > li a strong {font-size:inherit; font-weight:500;} #footer .ft_wrap .shopinfo .menu > li a.family {padding-right:15px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/family_open.png') no-repeat right center; color:#0971ce;} #footer .ft_wrap .shopinfo .menu > li a.family.active {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/family_close.png');} #footer .ft_wrap .shopinfo .menu > li .family_list {display:none; position:absolute; top:30px; left:-16px; z-index:5; width:150px; padding:5px 15px; background:#fff; border:1px solid #666;} #footer .ft_wrap .shopinfo .menu > li .family_list li {padding:3px 0;} #footer .ft_wrap .shopinfo .menu > li .family_list li a {display:block; font-size:13px;} #footer .ft_wrap .shopinfo .info, #footer .ft_wrap .shopinfo .info * {color:#999; font-size:13px; font-style:normal; letter-spacing:-0.02rem;} #footer .ft_wrap .shopinfo .info span {position:relative; padding-right:13px; line-height:21px;} #footer .ft_wrap .shopinfo .info span .company_comfirm {display:inline-block; margin-left:10px; padding:0 5px; border:1px solid #ccc; text-align:center;} #footer .ft_wrap .shopinfo .copyright {margin-top:31px; color:#999; font-size:14px;} #footer .ft_wrap .shopinfo .copyright a {color:#999; font-size:14px;} #footer .ft_wrap .shopinfo .copyright a strong, #footer .ft_wrap .shopinfo .copyright a:hover {color:#3fc0e5; font-size:14px;} #footer .btn_scroll {display:none; position:fixed; right:47px; bottom:50px; z-index:20;} #footer .btn_scroll a {display:block;} /*-----------------------------------------------------------------*/ /* 4. Page /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 4-1. 메인 /*-----------------------------------------------------------------*/ #main .visual_slide {overflow:hidden; position:relative; width:100%; height:810px;} #main .visual_slide .box {position:absolute; top:0; left:50%; width:1920px; height:810px; margin-left:-960px;} #main .visual_slide .box .slick-slide {text-align:center;} #main .visual_slide .box .slick-slide .txt {position:absolute; top:50%; left:50%; width:1520px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); text-align:left;} #main .visual_slide .box .slick-slide .txt.black * {color:#1a1a1a;} #main .visual_slide .box .slick-slide .txt h3 {color:#fff; font-size:60px; font-weight:700; letter-spacing:-0.02rem;} #main .visual_slide .box .slick-slide .txt p {padding-bottom:30px; color:#fff; font-size:18px; line-height:30px;} #main .visual_slide .box .slick-slide .txt a {display:inline-block; padding-right:15px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/visual_slide_more.png') no-repeat right center; color:#fff; font-size:16px; letter-spacing:-0.02rem; opacity:.5;} #main .visual_slide .slick-arrow {position:absolute; top:50%; margin-top:-29px;} #main .visual_slide .slick-prev {left:50%; z-index:5; width:57px; height:57px; margin-left:calc(-50% + 50px); background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/visual_slide_prev.png') no-repeat center;} #main .visual_slide .slick-next {right:50%; z-index:5; width:57px; height:57px; margin-right:calc(-50% + 50px); background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/visual_slide_next.png') no-repeat center;} #main .visual_slide .ctrl {position:absolute; bottom:44px; left:50%; width:200px; margin-left:-100px; padding:0 25px;} #main .visual_slide .ctrl .slick-dots li {display:none; position:static; margin:0;} #main .visual_slide .ctrl .slick-dots li.slick-active {display:block;} #main .visual_slide .ctrl .slick-dots li span {position:absolute; top:-6px; color:#fff; font-size:14px; font-weight:700; line-height:1;} #main .visual_slide .ctrl .slick-dots li span.now {left:0;} #main .visual_slide .ctrl .slick-dots li span.total {right:0;} #main .visual_slide .ctrl .visual_progress {display:block; overflow:hidden; width:100%; height:1px; background-color:rgba(255,255,255,.5); background-image:linear-gradient(to right, white, white); background-repeat:no-repeat; background-size:0 100%; transition:background-size 1s ease;} #main .visual_slide .ctrl .visual_progress_label {position:absolute; overflow:hidden; width:1px; height:1px; padding:0; margin:-1px; border:0; clip:rect(0,0,0,0);} #main .main_title {padding:174px 0 70px; text-align:center;} #main .main_title h3 {font-size:50px; font-weight:500; line-height:1;} #main .main_title p {padding-top:21px; font-size:20px; line-height:1;} #main .main_title p a {font:inherit;} #main .btn_more {padding-top:60px; text-align:center;} #main .btn_more a {display:inline-block; width:216px; height:52px; border:1px solid #1a1a1a; border-radius:25px; transition:all .3s ease;} #main .btn_more a span {display:inline-block; height:50px; padding-right:16px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/main_more_arrow.png') no-repeat right center; font-size:16px; letter-spacing:-0.02rem; line-height:50px; transition:all .3s ease;} #main .btn_more a:hover {background:#1a1a1a;} #main .btn_more a:hover span {color:#fff; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/main_more_arrow_w.png');} #main .btn_more.white a {border:2px solid #fff;} #main .btn_more.white a span {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/main_more_arrow_w.png'); color:#fff;} #main .btn_more.white a:hover {border-color:#fff; background:#fff;} #main .btn_more.white a:hover span {color:#1a1a1a; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/main_more_arrow.png');} #main .best {padding-bottom:180px;} #main .best .prd_basic > li {margin-top:0px; padding-bottom:0;} #main .best .prd_basic > li:nth-child(2) {margin-top:0;} #main .best .prd_basic > li .box {padding:40px 42px 65px; background-color:#f7f7f7 !important; cursor:pointer;} #main .best .prd_basic > li .box .img {background:none;} #main .best .prd_basic > li .box .icon {top:-28px; left:-27px;} #main .best .prd_basic > li .box .name {overflow:hidden; height:32px; white-space:nowrap; text-overflow:ellipsis;} #main .best .prd_basic > li .box .rev_wrap {display:none;} #main .best .prd_basic > li .box.active:hover {padding-bottom:51px; background-repeat:no-repeat; background-position:center; background-size:cover;} #main .best .prd_basic > li .box.active:hover .info * {color:#fff;} #main .best .prd_basic > li .box.active:hover .price {display:none;} #main .best .prd_basic > li .box.active:hover .cart_btn {display:block;} #main .brand_count {display:table; width:100%; max-width:1920px; height:500px; margin:0 auto; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/brand_count_bg2.jpg') no-repeat center; background-attachment:fixed;} #main .brand_count .txt {display:table-cell; text-align:center; vertical-align:middle;} #main .brand_count .txt p {padding-bottom:13px; color:#fff; font-size:22px; letter-spacing:-0.02rem;} #main .brand_count .txt p.date {font-size:16px;margin-bottom:6px;} #main .brand_count .txt h5 {padding-bottom:21px; color:#fff; font-size:120px; font-weight:700; letter-spacing:-0.025rem; line-height:1;} #main .brand_count .txt .btn_more {padding-top:0;} #main .event {position:relative;} #main .event .event_slide .box {font-size:0;} #main .event .event_slide .box .img {display:inline-block; width:880px; vertical-align:top;} #main .event .event_slide .box .img img {max-width:100%;} #main .event .event_slide .box .info {display:inline-block; width:420px; padding:110px 0 0 60px; vertical-align:top;} #main .event .event_slide .box .info .no {padding-bottom:12px; font-size:20px; font-weight:500; letter-spacing:0.2rem;} #main .event .event_slide .box .info .subject {} #main .event .event_slide .box .info .subject a {font-size:28px; font-weight:700; letter-spacing:-0.02rem;} #main .event .event_slide .box .info .sub {padding-top:2px; font-size:26px; letter-spacing:-0.02rem;} #main .event .event_slide .box .info .more {padding-top:45px;} #main .event .event_slide .box .info .more a {display:inline-block; padding-right:16px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/event_arrow.png') no-repeat right center; color:#999; font-size:16px; letter-spacing:-0.02rem;} #main .event .ctrl {position:absolute; bottom:0; left:740px; font-size:0;} #main .event .ctrl span {display:inline-block; width:70px; height:70px; background:no-repeat center; background-color:#fff; color:transparent; font-size:0; cursor:pointer;} #main .event .ctrl span.prev {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/event_prev.png');} #main .event .ctrl span.next {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/event_next.png');} #main .notice {margin-top:180px; border-top:1px solid #ededed;} #main .notice .notice_wrap {position:relative; width:680px; height:80px; margin:0 auto; padding:0 82px 0 110px;} #main .notice .main_title {position:absolute; top:0; left:0; height:80px; padding:0; font-size:18px; font-weight:500; letter-spacing:-0.02rem; line-height:80px;} #main .notice .more {position:absolute; top:50%; right:0; margin-top:-10px; border-bottom:1px solid #1a1a1a; font-size:16px; letter-spacing:-0.02rem; line-height:1.2;} #main .notice .notice_slide {} #main .notice .notice_slide .slick-slide {position:relative; padding-right:100px;} #main .notice .notice_slide .slick-slide a {display:inline-block; overflow:hidden; width:100%; height:80px; font-size:18px; letter-spacing:-0.02rem; line-height:80px; white-space:nowrap; text-overflow:ellipsis;} #main .notice .notice_slide .slick-slide span {display:inline-block; position:absolute; top:0; right:0; height:80px; color:#999; font-size:18px; letter-spacing:-0.02rem; line-height:80px;} #main .magazine {overflow:hidden; padding:180px 0; background:#f7f7f7;} #main .magazine .magazine_slide {width:1300px; margin:0 auto; text-align:right;} #main .magazine .magazine_slide .slick-slide {position:relative;} #main .magazine .magazine_slide .img {display:inline-block; width:820px;} #main .magazine .magazine_slide .img img {width:100%;} #main .magazine .magazine_slide .info {position:absolute; top:50%; left:0; z-index:1; width:650px; text-align:left; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); transform:translate(0,-50%);} #main .magazine .magazine_slide .info .date {padding-bottom:10px; font-size:22px; letter-spacing:-0.02rem;} #main .magazine .magazine_slide .info h5 {padding-bottom:24px;} #main .magazine .magazine_slide .info h5 a {display:inline-block; font-size:56px; font-weight:700; letter-spacing:-0.02rem; line-height:70px;} #main .magazine .magazine_slide .info .sub {padding-bottom:20px; color:#999; font-size:20px; letter-spacing:-0.02rem; line-height:30px;} #main .magazine .magazine_slide .info .more {padding-top:20px;} #main .magazine .magazine_slide .info .more a {padding-right:15px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/main_more_arrow.png') no-repeat right center; font-size:16px; font-weight:500; letter-spacing:-0.02rem;} #main .magazine .magazine_slide .slick-arrow {position:absolute; top:50%; z-index:10; width:16px; height:60px; margin-top:-30px; background:no-repeat center;} #main .magazine .magazine_slide .slick-prev {left:-170px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/magazine_slide_prev.png');} #main .magazine .magazine_slide .slick-next {right:-170px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/magazine_slide_next.png');} #main .our_prd .btn_more {padding-bottom:140px;} #main .video {margin-top:0px; padding-bottom:140px; background:#f7f7f7;} #main .video .main_title {padding-top:140px;} #main .video .frame {overflow:hidden; position:relative; height:0; padding-bottom:56.25%;} #main .video .frame iframe {position:absolute; top:0; bottom:0; left:0; width:100%; height:100%;} #main .review {overflow:hidden; background:#f7f7f7; padding-bottom:140px;} #main .review .review_slide .slick-list {overflow:visible;} #main .review .review_slide .slick-slide {padding:0 15px; opacity:0; transition:opacity 200ms ease-in-out; pointer-events:none;} #main .review .review_slide .slick-slide.slick-active {opacity:1; pointer-events:auto;} #main .review .review_slide .box {padding:30px 30px; background:#fff; font-size:0; box-shadow:4px 7px 31px 0px rgba(0, 0, 0, 0.06); cursor:pointer;} #main .review .review_slide .box .img {overflow:hidden; display:inline-block; width:250px; height:250px; vertical-align:middle;} #main .review .review_slide .box .img img {width:100%; height:auto;} #main .review .review_slide .box .info {display:inline-block; width:calc(100% - 250px); padding-left:25px; vertical-align:middle;} #main .review .review_slide .box .info .subject {overflow:hidden; max-height:64px; margin:24px 0 10px; font-size:20px; font-weight:500;} #main .review .review_slide .box .info .cnt {overflow:hidden; height:75px; font-size:15px; line-height:25px;} #main .review .review_slide .box .info .name_date {padding-top:20px; color:#999; font-size:15px; letter-spacing:-0.02rem;} #main .review .review_slide .box .info .name_date .name {padding-right:20px; color:inherit; font-size:inherit; font-weight:300;} #main .review .review_slide .slick-arrow {position:absolute; top:50%; z-index:10; width:16px; height:60px; margin-top:-30px; background:no-repeat center;} #main .review .review_slide .slick-disabled {opacity:.3;} #main .review .review_slide .slick-prev {left:-170px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/review_slide_prev.png');} #main .review .review_slide .slick-next {right:-170px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/review_slide_next.png');} #main .insta .insta_slide .slick-slide img {width:100%;} #main .insta .insta_slide .slick-arrow {position:absolute; top:50%; z-index:10; width:16px; height:60px; margin-top:-30px; background:no-repeat center;} #main .insta .insta_slide .slick-prev {left:130px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/insta_slide_prev.png');} #main .insta .insta_slide .slick-next {right:130px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/main/insta_slide_next.png');} /*-----------------------------------------------------------------*/ /* 4-2. 상점 /*-----------------------------------------------------------------*/ /* 상품목록(/shop/big_section.php) */ #big_section {overflow:hidden;} #big_section .cate_bnr img {width:100%;} #big_section .sub_category {padding-bottom:62px; font-size:0; text-align:center;} #big_section .sub_category li {display:inline-block; padding:0 30px;} #big_section .sub_category li a {display:inline-block; position:relative; border-bottom:3px solid transparent; color:#b2b2b2; font-size:24px; font-weight:700; letter-spacing:-0.02rem;} #big_section .sub_category li a:after {position:absolute; bottom:-3px; left:0; width:0; height:3px; background:#1a1a1a; transition:all .3s ease; content:'';} #big_section .sub_category li a:hover, #big_section .sub_category li.active a {color:#1a1a1a;} #big_section .sub_category li a:hover:after, #big_section .sub_category li.active a:after {width:100%;} #big_section .best_area {padding:17px 0 100px;} #big_section .best_area > h3 {padding-bottom:47px; font-size:30px; font-weight:500; text-align:center;} #big_section .best_slide .slick-slide {padding:0 5px;} #big_section .best_slide .box {padding:40px 42px 65px; background-color:#f7f7f7 !important; cursor:pointer;} #big_section .best_slide .box .img {background:none;} #big_section .best_slide .box .icon {top:-28px; left:-27px;} #big_section .best_slide .box .name {overflow:hidden; height:32px; white-space:nowrap; text-overflow:ellipsis;} #big_section .best_slide .box .rev_wrap {display:none;} #big_section .best_slide .box.active:hover {padding-bottom:45px; background-repeat:no-repeat; background-position:center; background-size:cover;} #big_section .best_slide .box.active:hover .info * {color:#fff;} #big_section .best_slide .box.active:hover .price {display:none;} #big_section .best_slide .box.active:hover .cart_btn {display:block;} #big_section .best_slide .slick-arrow {position:absolute; top:50%; z-index:10; width:30px; height:50px; margin-top:-25px; background:no-repeat center;} #big_section .best_slide .slick-prev {left:-65px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/best_slide_prev.png');} #big_section .best_slide .slick-next {right:-65px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/best_slide_next.png');} #big_section .video {padding-top:160px;} #big_section .video ul {font-size:0;} #big_section .video ul li {display:inline-block; width:50%; padding-left:10px;} #big_section .video ul li:first-child {padding:0 10px 0 0;} #big_section .video ul li .frame {overflow:hidden; position:relative; height:0; padding-bottom:56.25%;} #big_section .video ul li .frame iframe {position:absolute; top:0; bottom:0; left:0; width:100%; height:100%;} #big_section .prd_basic .box .name a {font-size:18px; font-weight: 400; line-height:normal;} #big_section .prd_basic .box .sub {font-size:14px;} #big_section .prd_basic .box .price span {font-size:20px;} #big_section .prd_basic .box .price .consumer {font-size:16px;} #big_section .prd_basic .box .price .sellY {font-size:16px;} #big_section .prd_basic .box .rev_wrap .count {font-size:14px;} /* 상품상세페이지(/shop/detail.php) */ #detail {overflow:hidden;} #detail .wrap_inner2:after {display:block; clear:both; content:'';} #detail .wrap_prd {position:relative; padding:140px 0 110px; background:#f7f7f7;} #detail .wrap_prd:after {display:block; clear:both; content:'';} #detail .wrap_prd .prdimg {position:relative; float:left; width:785px; padding-left:165px;} #detail .wrap_prd .prdimg .img {display:table-cell; overflow:hidden; position:relative; width:620px; height:620px; text-align:center; vertical-align:middle;} #detail .wrap_prd .prdimg .img img {max-width:620px; max-height:620px;} #detail .wrap_prd .prdimg .img .icon {position:absolute; top:20px; left:45px; z-index:5;} #detail .wrap_prd .prdimg .img .icon img {display:block; width:auto; height:auto; margin-bottom:8px;} #detail .wrap_prd .prdimg .addimg {overflow:hidden; position:absolute; top:0; left:0; width:90px; height:620px;} #detail .wrap_prd .prdimg .addimg .box_add_slide {overflow:hidden;} #detail .wrap_prd .prdimg .addimg .add_slide {display:none;} #detail .wrap_prd .prdimg .addimg .add_slide.slick-initialized {display:block;} #detail .wrap_prd .prdimg .addimg .add_slide .slick-slide {border:none;} #detail .wrap_prd .prdimg .addimg .add_slide .slick-slide img {width:90px; height:90px; margin-bottom:16px; border:1px solid #e6e6e6;} #detail .wrap_prd .prdimg .addimg .add_slide .slick-slide img:hover {border-color:#1a1a1a;} #detail .wrap_prd .prdimg .addimg .add_slide .slick-prev {position:absolute; left:0; top:0; z-index:5; width:100%; height:30px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/addimg_up.png') no-repeat center; background-color:rgba(0,0,0,0.2)} #detail .wrap_prd .prdimg .addimg .add_slide .slick-next {position:absolute; left:0; bottom:16px; z-index:5; width:100%; height:30px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/addimg_down.png') no-repeat center; background-color:rgba(0,0,0,0.2)} #detail .wrap_prd .prdimg .addimg .add_slide .slick-disabled {opacity:0;} #detail .wrap_prd .prdinfo {float:right; width:calc(100% - 785px); padding-left:8.254vw;} #detail .wrap_prd .prdinfo .icon_count {padding-bottom:52px;} #detail .wrap_prd .prdinfo .icon_count:after {display:block; clear:both; content:'';} #detail .wrap_prd .prdinfo .icon_count .wish_share {float:left; font-size:0;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li {display:inline-block; position:relative; margin-right:22px; vertical-align:top;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li > a {display:block; width:27px; height:25px; background:no-repeat center; color:transparent; font-size:0;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.wish > a {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_wish.png');} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.wish.on > a {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_wish_on.png');} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > a {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_share.png');} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns {display:none; position:absolute; top:50%; left:47px; min-width:125px; height:40px; margin-top:-20px; border-radius:25px; background:#fff; text-align:center;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a {display:inline-block; width:20px; height:40px; margin:0 10px; background-repeat:no-repeat; background-position:center; text-indent:-9999px;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a > span.kakao {display:block; height:100%; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_kakao.png') no-repeat center;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a.facebook {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_facebook.png');} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a.insta {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_insta.png');} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a.blog {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_blog.png');} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a > span.kakaostory {display:block; height:100%; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/icon_kakaostory.png') no-repeat center;} #detail .wrap_prd .prdinfo .icon_count .wish_share > li.share > .sns > a.twitter {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/icon_twitter.png');} #detail .wrap_prd .prdinfo .icon_count .count_review {float:right;} #detail .wrap_prd .prdinfo .icon_count .count_review .gradebox_list {display:inline-block; position:relative; width:88px; height:15px; margin-right:3px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star_bg.png') no-repeat left top/cover; vertical-align:middle;} #detail .wrap_prd .prdinfo .icon_count .count_review .gradebox_list > i {display:inline-block; position:absolute; left:0; top:0; height:100%; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star.png') no-repeat left top/auto 100%;} #detail .wrap_prd .prdinfo .icon_count .count_review .count {display:inline-block; color:#999; font-size:16px; letter-spacing:-0.02rem; vertical-align:middle;} #detail .wrap_prd .prdinfo .icon_count .count_review .count .star {color:inherit; font:inherit;} #detail .wrap_prd .prdinfo > h3.name {padding-bottom:21px; font-size:46px; font-weight:700; letter-spacing:-0.02rem; line-height:60px;} #detail .wrap_prd .prdinfo > .price > span {letter-spacing:-0.02rem; vertical-align:middle;} #detail .wrap_prd .prdinfo > .price .percent {padding-right:8px; color:#0971ce; font-size:24px; font-weight:700;} #detail .wrap_prd .prdinfo > .price .consumer {padding-right:3px; color:#b2b2b2; font-size:20px; text-decoration:line-through;} #detail .wrap_prd .prdinfo > .price .consumerY {display:none;} #detail .wrap_prd .prdinfo > .price .sell, #detail .wrap_prd .prdinfo > .price .sell * {color:#0971ce; font-size:24px;} #detail .wrap_prd .prdinfo > .price .sellY, #detail .wrap_prd .prdinfo > .price .sellY * {color:#b2b2b2; font-size:20px; font-weight:400; text-decoration:line-through;} #detail .wrap_prd .prdinfo > .price .discount, #detail .wrap_prd .prdinfo > .price .discount * {color:#0971ce; font-size:24px;} #detail .wrap_prd .prdinfo > .price .discount {display:none;} #detail .wrap_prd .prdinfo > .price .discountY {display:inline-block; padding-left:3px;} #detail .wrap_prd .prdinfo > .price .coupon {display:inline-block; margin-left:5px; padding-right:20px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/download_coupon.png') no-repeat 90% center #676767; cursor:pointer;} #detail .wrap_prd .prdinfo > .price .coupon strong {display:inline-block; padding:2px 5px; background:#363636; color:#fff; font-size:11px; font-weight:normal; letter-spacing:-1px;} #detail .wrap_prd .prdinfo .pop_coupon {display:none; position:fixed; left:50%; top:100px; z-index:1001; width:650px; margin-left:-325px; padding:40px; border:1px solid #d9d9d9; background:#fff;} #detail .wrap_prd .prdinfo .pop_coupon > h2 {color:#000; font-size:22px;} #detail .wrap_prd .prdinfo .pop_coupon > .count {margin-top:20px; padding:15px 20px; background:#fafafa;} #detail .wrap_prd .prdinfo .pop_coupon > .list {overflow:auto; max-height:200px; margin-top:10px;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li {display:table; position:relative; width:100%; padding:15px; border-bottom:1px solid #e0e0e0; text-align:left;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li:first-child {border-top:1px solid #e0e0e0;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li > div {display:table-cell; vertical-align:middle; line-height:28px;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li > div.name {width:40%; font-weight:bold;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li > div.price {width:40%;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li > div.btn {width:20%; text-align:center;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li > div.btn span.box_btn * {min-width:100px;} #detail .wrap_prd .prdinfo .pop_coupon > .list > li > div.btn span.fin {display:inline-block; min-width:100px; padding:4px 8px; border:1px solid #676767; background-color:#fff; color:#000;} #detail .wrap_prd .prdinfo .pop_coupon > .close {display:inline-block; position:absolute; right:20px; top:20px; width:21px; height:21px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} #detail .wrap_prd .prdinfo > .sbs {margin-top:15px; border:1px solid #e5e5e5; text-align:center;} #detail .wrap_prd .prdinfo > .sbs > label {display:inline-block; margin:0 15px; line-height:40px; cursor:pointer;} #detail .wrap_prd .prdinfo > .today {margin:15px auto 0; padding:15px; border:1px solid #e5e5e5;} #detail .wrap_prd .prdinfo > .today > span {color:#666;} #detail .wrap_prd .prdinfo > .opt_info {margin-top:23px; padding-top:20px; border-top:1px solid #e5e5e5;} #detail .wrap_prd .prdinfo > .opt_info table {width:100%;} #detail .wrap_prd .prdinfo > .opt_info table th {padding:6px 0; color:#999; font-size:16px; font-weight:400; text-align:left; letter-spacing:-0.02rem; vertical-align:middle;} #detail .wrap_prd .prdinfo > .opt_info table td {padding:6px 0; color:#1a1a1a; font-size:16px; text-align:left; letter-spacing:-0.02rem; vertical-align:middle;} #detail .wrap_prd .prdinfo > .opt_info table td select {width:287px; padding:0 40px 0 15px; background:#fff url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/select_arrow2.png') no-repeat right 15px center; color:#1a1a1a; font-size:15px; letter-spacing:-0.02rem; -webkit-appearance:none; appearance:none;} #detail .wrap_prd .prdinfo > .opt_info table td .box_info {display:inline-block; position:relative;} #detail .wrap_prd .prdinfo > .opt_info table td .box_info .info {display:none; position:absolute; left:20px; top:-8px; z-index:10; width:150px; padding:10px 15px; border:1px solid #dcdcdc; border-radius:5px; background:#fff;} #detail .wrap_prd .prdinfo > .opt_info table td .box_info .info.delivery {width:230px;} #detail .wrap_prd .prdinfo > .opt_info table td .box_info:hover .info {display:block;} #detail .wrap_prd .prdinfo > .multi_opt {margin-top:24px;} #detail .wrap_prd .prdinfo > .multi_opt .selected_list > li {position:relative; padding:35px 0; border-top:1px solid #e5e5e5;} #detail .wrap_prd .prdinfo > .multi_opt .selected_list > li .name {display:inline-block; width:48%; font-size:16px; letter-spacing:-0.02rem; word-break:break-all;} #detail .wrap_prd .prdinfo > .multi_opt .selected_list > li .price {float:right; margin-top:-4px;} #detail .wrap_prd .prdinfo > .multi_opt .selected_list > li .price span {margin-left:30px; font-size:20px; font-weight:700; letter-spacing:-0.02rem;} #detail .wrap_prd .prdinfo > .multi_opt .selected_list > li .price .del img {margin-top:10px; vertical-align:top;} #detail .wrap_prd .prdinfo > .multi_opt .selected_list > li .box_qty {position:absolute; left:50%; top:50%; margin-top:-17px;} #detail .wrap_prd .prdinfo > .multi_opt .opt_total {position:relative; padding:21px 0; border-top:2px solid #1a1a1a; text-align:right;} #detail .wrap_prd .prdinfo > .multi_opt .opt_total .title {position:absolute; left:0; top:50%; margin-top:-16px; font-size:20px; font-weight:500; letter-spacing:-0.02rem;} #detail .wrap_prd .prdinfo > .multi_opt .opt_total strong, #detail .wrap_prd .prdinfo > .multi_opt .opt_total strong * {font-size:40px;} #detail .wrap_prd .prdinfo > .multi_opt .opt_total .coupon {display:inline-block; margin-right:5px; padding:2px 20px 2px 5px; border:1px solid #c3c3c3; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/apply_coupon.png') no-repeat 90% center; font-size:11px; cursor:pointer;} #detail .wrap_prd .prdinfo > .multi_opt .opt_total .coupon:hover {background-color:#f5f5f5;} #detail .wrap_prd .prdinfo > .restock {padding-top:20px;} #detail .wrap_prd .prdinfo > .restock > p {float:left; font-size:11px;} #detail .wrap_prd .prdinfo > .restock > a {display:inline-block; float:right; margin-right:5px; padding:2px 5px; border:1px solid #c3c3c3; font-size:11px; cursor:pointer;} #detail .wrap_prd .prdinfo > .restock > a:hover {background-color:#f5f5f5;} #detail .wrap_prd .prdinfo > .restock:after {display:block; clear:both; content:'';} #detail .wrap_prd .prdinfo > .btn {margin-top:20px; font-size:0;} #detail .wrap_prd .prdinfo > .btn .box_btn * {font-weight:500;} #detail .wrap_prd .prdinfo > .btn .box_btn.white * {background:none;} #detail .wrap_prd .prdinfo > .btn .pay {text-align:right;} #detail .wrap_prd .prdinfo > .btn .pay > div {margin-top:25px;} #detail .wrap_info {clear:both; border-top:1px solid #ededed;} #detail .wrap_info .tab_area {height:79px;} #detail .wrap_info .tab_area > .tab {height:78px; border-bottom:1px solid #ededed; text-align:center; font-size:0;} #detail .wrap_info .tab_area > .tab li {display:inline-block; position:relative; padding:0 40px;} #detail .wrap_info .tab_area > .tab li a {display:block; height:77px; font-size:18px; line-height:79px; cursor:pointer;} #detail .wrap_info .tab_area > .tab li a.active, #detail .wrap_info .tab_area > .tab li a:hover {border-bottom:3px solid #1a1a1a; font-weight:700;} #detail .wrap_info .tab_area > .tab.fixed {position:fixed; left:0; top:80px; z-index:10; width:100%;background:#fff;} #detail .wrap_info .tabcnt_detail {margin-top:110px; padding-top:50px;} #detail .wrap_info .btn_bottom {margin-top:20px; text-align:right;} #detail .wrap_info .detail_info, #detail .wrap_info .common_info {word-break:break-all;} #detail .wrap_info .detail_info {margin-bottom:30px;} #detail .wrap_info .detail_info * {font-family:inherit; font-size:inherit; text-align:inherit; line-height:inherit;} #detail .wrap_info .detail_info img, #detail .wrap_info .common_info img {max-width:100%; height:auto; font-size:0; line-height:0;} #detail .wrap_info .custom_info dl {padding-bottom:50px;} #detail .wrap_info .custom_info dl dt {padding-bottom:18px; font-size:20px; font-weight:700; letter-spacing:-0.02rem;} #detail .wrap_info .custom_info dl dd {position:relative; padding-left:10px; color:#999; font-size:16px; letter-spacing:-0.02rem; line-height:28px;} #detail .wrap_info .custom_info dl dd:after {display:block; position:absolute; top:0; left:0; color:#999; font-size:16px; content:'-';} #detail .wrap_info .cnt_title {padding-bottom:47px; color:#000; font-size:50px; font-weight:500; text-align:center; letter-spacing:-0.02rem;} #detail .wrap_info .cnt_title.related {padding-top:140px} #detail .wrap_info .tbl_prdinfo_wrap {margin-top:124px; padding:47px 0; border:1px solid #e5e5e5; border-width:1px 0;} #detail .wrap_info .related_slide .slick-slide .box {padding:0 10px;} #detail .wrap_info .related_slide .slick-arrow {position:absolute; top:155px; z-index:10; width:30px; height:50px; background:no-repeat center;} #detail .wrap_info .related_slide .slick-prev {left:-65px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/best_slide_prev.png');} #detail .wrap_info .related_slide .slick-next {right:-65px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/best_slide_next.png');} #detail .detail_qnarev > .summary {margin-bottom:62px; padding:45px 0; background-color:#f7f7f7; font-size:0; text-align:center;} #detail .detail_qnarev > .summary > div {display:inline-block; margin:0 109px; vertical-align:middle;} #detail .detail_qnarev > .summary > div.grade .total {padding-bottom:16px; font-size:24px; font-weight:700; letter-spacing:-0.02rem;} #detail .detail_qnarev > .summary > div.grade .total strong {color:#0971ce; font:inherit;} #detail .detail_qnarev > .summary > div.grade .average {padding-bottom:16px; color:#b2b2b2; font-size:30px;} #detail .detail_qnarev > .summary > div.grade .average strong {color:#1a1a1a; font-size:36px; font-weight:500;} #detail .detail_qnarev > .summary > div.grade .icon {display:inline-block; position:relative; width:180px; height:30px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star_bg.png') no-repeat left top/cover;} #detail .detail_qnarev > .summary > div.grade .icon > i {display:block; position:absolute; left:0; top:0; height:100%; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/blue_star.png') no-repeat left top/180px 30px;} #detail .detail_qnarev > .summary > div.ratio .graph > li {padding:1px 0; font-size:0;} #detail .detail_qnarev > .summary > div.ratio .graph > li span {display:inline-block; font-size:16px;} #detail .detail_qnarev > .summary > div.ratio .graph > li .star {padding-left:25px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/detail_ratio_star.png') no-repeat left center;} #detail .detail_qnarev > .summary > div.ratio .graph > li .bar {width:300px; height:10px; margin:0 10px 0 20px; background-color:#e5e5e5; font-size:0; text-align:left;} #detail .detail_qnarev > .summary > div.ratio .graph > li .bar > i {display:inline-block; height:100%; background-color:#1a1a1a;} #detail .detail_qnarev > .summary > div.ratio .graph > li .count {min-width:30px; padding:0 5px; text-align:center; line-height:1.4;} #detail .detail_qnarev .title_qnarev {position:relative; padding:26px 0; border-bottom:3px solid #1a1a1a;} #detail .detail_qnarev .title_qnarev.none {padding:23px 0; border-bottom:0;} #detail .detail_qnarev .title_qnarev > h3 {font-size:20px;} #detail .detail_qnarev .title_qnarev > h3 > span {color:#0971ce; font-size:inherit;} #detail .detail_qnarev .title_qnarev > .msg {position:relative; padding-left:10px; color:#999; font-size:14px; letter-spacing:-0.03rem;} #detail .detail_qnarev .title_qnarev > .msg:after {position:absolute; top:50%; left:0; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:#999; content:'';} #detail .detail_qnarev .title_qnarev > .btn {position:absolute; right:0; top:50%; margin-top:-18px; padding-top:0; font-size:0;} #detail .detail_qnarev .title_qnarev > .btn .box_btn {margin-left:10px;} #detail .detail_qnarev .title_qnarev > .btn .box_btn * {padding:7px 0 8px; font-size:14px;} #detail .detail_qnarev .title_qnarev > .sort {position:absolute; right:0; top:50%; margin-top:-11px; font-size:0;} #detail .detail_qnarev .title_qnarev > .sort > li {display:inline-block; position:relative; padding:0 13px;} #detail .detail_qnarev .title_qnarev > .sort > li:after {display:inline-block; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background-color:#e5e5e5; vertical-align:top; content:'';} #detail .detail_qnarev .title_qnarev > .sort > li:first-child:after {display:none;} #detail .detail_qnarev .title_qnarev > .sort > li a {color:#b2b2b2; font-size:14px;} #detail .detail_qnarev .title_qnarev > .sort > li a.selected {color:#1a1a1a;} #detail .detail_qnarev .list {border-top:1px solid #e5e5e5;} #detail .detail_qnarev .list > li {display:table; width:100%; padding:25px 0; border-bottom:1px solid #e5e5e5;} #detail .detail_qnarev .list > li > .info {display:table-cell; width:calc(100% - 106px); vertical-align:middle;} #detail .detail_qnarev .list > li > .info .star_title .grade {padding-left:10px; color:#999; font-size:16px;} #detail .detail_qnarev .list > li > .info .star_title .title, #detail .detail_qnarev .list > li > .info .star_title .title * {font-size:16px; font-weight:700;} #detail .detail_qnarev .list > li > .info .star_title .title {padding-left:30px;} #detail .detail_qnarev .list > li > .info .star_title .title img {vertical-align:middle;} #detail .detail_qnarev .list > li > .info .name {padding-top:15px; color:#1a1a1a; font-size:14px;} #detail .detail_qnarev .list > li > .info .name * {color:#1a1a1a; font-size:14px;} #detail .detail_qnarev .list > li > .info .name img {width:auto; height:16px; margin-top:1px; vertical-align:top;} #detail .detail_qnarev .list > li > .info .name .date {position:relative; margin-left:10px; padding-left:10px; color:#999; font-size:14px;} #detail .detail_qnarev .list > li > .info .name .date:after {position:absolute; top:50%; left:0; width:1px; height:10px; margin-top:-5px; background:#e5e5e5; content:'';} #detail .detail_qnarev .list > li > .info .content {padding-top:18px; font-size:14px;} #detail .detail_qnarev .list > li > .info .more {display:inline-block; padding-top:10px; color:#999; font-size:14px;} #detail .detail_qnarev .list > li > .upfile {display:table-cell; position:relative; width:120px; text-align:right; vertical-align:middle;} #detail .detail_qnarev .list > li > .upfile > a {display:block; position:relative; overflow:hidden; width:120px; height:120px; vertical-align:middle;} #detail .detail_qnarev .list > li > .upfile img {position:absolute; top:50%; left:50%; width:120px; height:auto; transform:translate(-50%, -50%);} #detail .detail_qnarev .list > li > .upfile .count {display:block; position:absolute; bottom:0; right:0; width:30px; height:30px; background-color:rgba(0,0,0,0.3); color:#fff; font-size:14px; text-align:center; line-height:29px;} #detail .detail_qnarev .tbl_col {border-top:0;} #detail .detail_qnarev .tbl_col thead {display:table-header-group;} #detail .detail_qnarev .tbl_col > thead > tr > th {padding:12px 0; border-top:0;} #detail .detail_qnarev .tbl_col > tbody > tr > td {padding:12px 0; border-top:0;} #detail .detail_qnarev .tbl_col > tbody > tr > td.qnarev_cnt {padding:0;} #detail .detail_qnarev .paging {margin-top:40px;} #detail .list_photo {position:relative; width:1300px; margin-bottom:70px; font-size:0;} #detail .list_photo .slick-arrow {position:absolute; top:-50px; z-index:10; width:30px; height:30px; border:1px solid #dcdcdc; background-color:#fff; text-align:center;} #detail .list_photo .slick-arrow:after {display:block; width:10px; height:10px; border:1px solid #a7a7a7; content:'';} #detail .list_photo .slick-arrow:hover {background-color:#f6f6f6;} #detail .list_photo .slick-arrow:hover:after {border-color:#e35050;} #detail .list_photo .slick-prev {right:29px;} #detail .list_photo .slick-prev:after {margin-left:12px; border-width:1px 0 0 1px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} #detail .list_photo .slick-next {right:0;} #detail .list_photo .slick-next:after {margin-left:5px; border-width:1px 1px 0 0; -webkit-transform:rotate(45deg); transform:rotate(45deg);} #detail .list_photo .slick-dots {margin-top:20px;} #detail .list_photo .box {display:block; position:relative; overflow:hidden; width:147px; height:147px; vertical-align:middle;} #detail .list_photo .box > img {position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%, -50%);} #detail .asinfo {margin-bottom:160px;} #detail .asinfo .box > h4 {height:96px; border-bottom:3px solid #1a1a1a; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/asinfo_down.png') no-repeat right center; font-size:34px; font-weight:700; letter-spacing:-0.02rem; line-height:96px; cursor:pointer;} #detail .asinfo .box > h4.active {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/asinfo_up.png');} #detail .asinfo .box > .info_box {display:none; padding:56px 30px;} #detail .asinfo .box > .info_box dl + dl {padding-top:42px;} #detail .asinfo .box > .info_box dl dt {color:#1a1a1a; font-size:16px; font-weight:700; letter-spacing:-0.02rem; line-height:40px;} #detail .asinfo .box > .info_box dl dd {color:#999; font-size:16px; letter-spacing:-0.02rem; line-height:40px;} #detail .asinfo .box > .info_box ul li {color:#999; font-size:16px; letter-spacing:-0.02rem; line-height:40px;} /* 상품상세페이지 - 개인결제 (/shop/detail_private.php) */ #detail.private .wrap_prd > .info {padding-top:100px; text-align:center;} #detail.private .wrap_prd > .info > .price .sell, #detail.private .wrap_prd > .info > .price .sell * {font-size:30px;} #detail.private .wrap_info {border-top:0;} /* 퀵프리뷰 - 팝업(/shop/detail_popup.php) */ #detail_pop {position:relative;} #detail_pop #detail {margin-top:0;} #detail_pop .close {display:inline-block; position:absolute; right:20px; top:20px; z-index:10; width:21px; height:21px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} #detail_pop #detail .wrap_prd {padding:50px;} /* 상품이미지줌 - 팝업(/shop/zoom.php) */ #zoomimg {text-align:center;} #zoomimg h2 {padding:10px 60px 10px 20px; background:#676767; color:#fff; font-size:14px; text-align:left;} #zoomimg .img {margin:40px auto 10px;} #zoomimg .img img {max-width:500px; max-height:500px;} #zoomimg .list {width:500px; margin:10px auto 0;} #zoomimg .list li {float:left; margin:0 0 10px 10px;} #zoomimg .list li:nth-child(5n+1) {margin-left:0 !important;} #zoomimg .list li img {max-width:92px; max-height:92px;} #zoomimg .list:after {display:block; clear:both; content:'';} #zoomimg .box_btn {position:absolute; right:10px; top:7px;} /* 상품갯수 - 장바구니(/shop/cart.php), 주문서(/shop/order.php) */ .enterprise {padding-top:30px;} .enterprise.headY {padding-top:0;} .enterprise .msg_delivery {padding-bottom:10px;} /* 장바구니(/shop/cart.php) */ #cart .tab_sbs {margin-bottom:40px; font-size:0; text-align:center;} #cart .tab_sbs > li {display:inline-block; font-size:0;} #cart .tab_sbs > li > a {display:block; position:relative; width:180px; margin-left:-1px; padding:8px; border:1px solid #e0e0e0; color:#666; font-size:14px;} #cart .tab_sbs > li > a > span {color:#999;} #cart .tab_sbs > li.active > a {z-index:1; border-color:#333; color:#333;} #cart .flex_wrap {display:flex;} #cart .flex_wrap:after {display:block; clear:both; content:'';} #cart .flex_wrap > .cart_wrap {width:75%;} #cart .flex_wrap > .cart_wrap .btn {position:relative; margin-top:30px;} #cart .flex_wrap > .cart_wrap .btn .box_btn {margin-right:8px;} #cart .flex_wrap > .cart_wrap .btn .msg {position:absolute; top:50%; right:0; margin-top:-11px; padding-left:22px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/cart_msg.png') no-repeat left center; color:#999; font-size:14px; letter-spacing:-0.02rem;} #cart .flex_wrap > .cart_wrap .recent_prd {padding-top:93px;} #cart .flex_wrap > .cart_wrap .recent_prd > p.title {overflow:hidden; margin-bottom:32px; font-size:20px; font-weight:700; letter-spacing:-0.02rem;} #cart .flex_wrap > .cart_wrap .recent_prd > p.title a {display:inline-block; float:right; margin-top:6px; border-bottom:1px solid #999; color:#999; font-size:14px; font-weight:400; letter-spacing:-0.02rem;} #cart .flex_wrap > .cart_wrap .recent_prd .latest {margin-left:-17px; font-size:0;} #cart .flex_wrap > .cart_wrap .recent_prd .latest li {display:inline-block; width:14.2857%; padding-left:17px; margin-bottom:17px;} #cart .flex_wrap > .cart_wrap .recent_prd .latest li .img {background:#f7f7f7;} #cart .flex_wrap > .cart_wrap .recent_prd .latest li .img img {width:96%; height:auto;} #cart .flex_wrap > .total_wrap {width:22%; margin-left:3%;} #cart .flex_wrap > .total_wrap > .stick_box {position:sticky; position:-webkit-sticky; top:80px; width:100%;} #cart .flex_wrap > .total_wrap .box {padding-top:23px; border-top:3px solid #1a1a1a;} #cart .flex_wrap > .total_wrap .box .tbl_order2 tbody tr th {padding:3px 0; font-size:16px; font-weight:500; letter-spacing:-0.02rem;} #cart .flex_wrap > .total_wrap .box .tbl_order2 tbody tr td {padding:3px 0;} #cart .flex_wrap > .total_wrap .box .tbl_order2 tbody tr td, #cart .flex_wrap > .total_wrap .box .tbl_order2 tbody tr td * {font-size:16px; letter-spacing:-0.02rem;} #cart .flex_wrap > .total_wrap .box .tbl_order2 tbody tr:last-child th, #cart .flex_wrap > .total_wrap .box .tbl_order2 tbody tr:last-child td {padding-bottom:35px;} #cart .flex_wrap > .total_wrap .box .tbl_order2 tfoot tr th {padding:30px 0; border-top:1px solid #e5e5e5; font-size:18px; font-weight:500; letter-spacing:-0.02rem;} #cart .flex_wrap > .total_wrap .box .tbl_order2 tfoot tr td {padding:30px 0; border-top:1px solid #e5e5e5; } #cart .flex_wrap > .total_wrap .box .tbl_order2 tfoot tr td, #cart .flex_wrap > .total_wrap .box .tbl_order2 tfoot tr td * {color:#0971ce; font-size:24px; font-weight:700; letter-spacing:-0.02rem;} #cart .flex_wrap > .total_wrap .box .buy_btn {margin-top:8px;} #cart .flex_wrap > .total_wrap .box .buy_btn .box_btn {margin-top:10px;} #cart .flex_wrap > .total_wrap .box .pay {text-align:right;} #cart .flex_wrap > .total_wrap .box .pay > div {padding-top:10px;} /* 장바구니 옵션 변경 */ .cart_change_option {width:480px; padding:40px 50px;} .cart_change_option h3 {font-size:20px; font-weight:normal;} .cart_change_option .opt {margin-bottom:15px; padding:5px 0 15px; border-bottom:1px solid #e0e0e0;} .cart_change_option .opt span {display:inline-block; padding:5px; border-radius:5px; background:#eee; color:#666;} .cart_change_option table {width:100%; table-layout:fixed;} .cart_change_option table > thead {display:none;} .cart_change_option table > tbody > tr > th {padding:5px 0 5px 23px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_check.png') no-repeat 7px center; font-weight:normal; text-align:left; line-height:34px;} .cart_change_option table > tbody > tr > td {padding:5px; vertical-align:middle;} .cart_change_option table > tbody > tr > td select {width:100%;} .cart_change_option table > tbody > tr > td .box_qty {width:100%;} .cart_change_option .total {position:relative; margin-top:15px; padding:15px 10px; border:1px solid #e0e0e0; border-width:1px 0;} .cart_change_option .total .price {position:absolute; right:15px; top:8px;} .cart_change_option .total .price strong {font-size:20px;} .cart_change_option .btns {margin-top:20px; text-align:center;} /* 장바구니 입점몰 계산 박스 */ #cart .cart_sum {position:relative; padding:30px 60px; border-bottom:1px solid #dadada; background:#f8f8f8; text-align:right;} #cart .cart_sum:after {display:block; clear:both; content:'';} #cart .cart_sum .delivery_msg {position:absolute; left:30px; top:50%; z-index:10; margin-top:-7px; text-align:left; font-weight:bold;} #cart .cart_sum table {width:25%; float:right;} #cart .cart_sum table th {padding:5px 0; color:#666; font-weight:normal; text-align:left;} #cart .cart_sum table td {padding:5px 0; color:#666; text-align:right;} /* 장바구니 개별상품 쿠폰적용 */ #cart .cart_prc > .after {display:none;} #cart .cart_prc.is_sale > .before {text-decoration:line-through;} #cart .cart_prc.is_sale > .after {display:block;} /* 주문서(/shop/order.php) */ #order:after {display:block; clear:both; content:'';} #order .guest {padding-bottom:40px;} #order .guest .agree_guest {padding-bottom:20px;} #order .guest .box_frame {border:1px solid #ebebeb;} #order .guest .box_frame iframe {width:100%; height:162px; border:0;} #order .print_receipt {padding-bottom:10px; text-align:right; line-height:30px;} #order .ord_info {display:flex;} #order .ord_info * {font-size:16px;} #order .ord_info > .area_right {padding:30px 0 0 50px;} #order .ord_info > .area_right .inner {float:right; position:sticky; position:-webkit-sticky; top:30px;} #order .ord_info > .area_right .box {width:360px; padding:40px; background:#f8f8f8;} #order .ord_info > .area_right .box .line {margin-top:25px; border-top:1px solid #dfdfdf;} #order .coupon_list li {position:relative; margin-top:10px; padding-left:25px;} #order .coupon_list li:first-child {margin-top:0;} #order .coupon_list li .check {position:absolute; left:0; top:-2px;} #order .coupon_list li .name {font-weight:bold;} #order .coupon_list li .content {font-size:11px;} #order .offcpn #off_cpn_div2, #order .offcpn #off_cpn_img2 {display:none;} #order .offcpn #off_cpn_div2 p {margin-bottom:5px;} #order .offcpn #off_cpn_div2 .offbtn {text-align:right;} #order .offcpn .box_btn.small a {min-width:89px;} #order .title_delivery h3.title {display:inline-block;} #order .pay_sbs {margin-bottom:20px;} #order .pay_sbs:after {display:block; clear:both; content:'';} #order .pay_sbs > div {float:left; width:50%; margin-left:-1px;} #order .pay_sbs > div > input {display:none;} #order .pay_sbs > div > label {display:block; position:relative; padding:10px 5px; border:1px solid #dcdcdc; color:#888; text-align:center; cursor:pointer;} #order .pay_sbs > div > label:before {display:inline-block; width:9px; height:8px; margin-right:5px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_check.png') no-repeat center; content:'';} #order .pay_sbs > div > input:checked + label {z-index:5; border-color:#676767; background-color:#fff; color:#333;} #order .method > div {position:relative; padding:25px 0 10px 25px;} #order .method > div > label {position:absolute; left:0; top:0; cursor:pointer;} #order .method > div .msg_pay {padding:0 !important; color:#999 !important;} #order .method > div .bank_name {display:none;} #order .method > div #cash_reg {padding:5px 0 !important;} #order .method > div #cash_reg span {color:#999 !important;} #order .method > div select {width:100%; margin-bottom:5px;} #order .order_cancel_msg {color:#666;} #order .reconfirm {margin-top:25px; padding-top:25px; border-top:1px solid #dfdfdf;} #order .reconfirm > label {display:block; position:relative; padding:15px 15px 15px 40px; background-color:#e7e7e7; cursor:pointer;} #order .reconfirm > label > input {position:absolute; left:15px; top:15px;} #order #order1 .box_btn {margin-top:10px;} #order #order2 {display:none; clear:both; margin-top:30px; padding:50px 0; border:1px solid #dedede; text-align:center;} #order #order2 .total_info {font-size:16px; font-weight:bold;} #order #order2 .total_info strong, #order #order2 .total_info strong * {font-size:inherit;} #order #order2 .msg {padding:23px 0; color:#888;} /* 주문완료(/shop/order_finish.php) */ #orderfin {width:640px; margin:0 auto; text-align:center;} #orderfin h3 {padding:30px 0 20px; text-align:left;} #orderfin .box {margin-bottom:30px; padding:40px 80px; background:#f5f5f5;} #orderfin .info {padding-bottom:30px;} #orderfin .info .bank {padding-bottom:20px; color:#888;} #orderfin .info .email {color:#888;} #orderfin .box_gift .box_btn {margin-top:20px;} #orderfin .btn {padding-top:20px; text-align:center;} /* 상품검색(/shop/search_result.php) */ #search_result .research {position:relative; padding-right:60px; background:#fafafa;} #search_result .research:after {display:inline-block; position:absolute; right:60px; top:17px; width:1px; height:25px; background:#d5d5d5; content:'';} #search_result .research .form_input.search {height:60px; border-color:#fafafa; background:transparent; font-size:14px;} #search_result .research .btn {position:absolute; right:0; top:0; padding:17px;} #search_result .check {display:inline-block; padding:15px 0 5px;} #search_result .rank {position:relative; z-index:2; float:right; width:220px; margin-top:-40px; padding:16px 0;} #search_result .rank > ol {overflow:hidden; position:absolute; right:0; top:0px; width:124px; height:45px; padding:10px 0; border:1px solid #fff; background-color:#fff;} #search_result .rank > ol li {overflow:hidden; padding:5px 8px; text-overflow:ellipsis; white-space:nowrap;} #search_result .rank > ol li span {display:inline-block; width:18px; height:18px; margin-right:5px; border-radius:50%; background:#ebebeb; font-size:11px; font-weight:bold; text-align:center; line-height:18px;} #search_result .rank > ol:after {display:block; position:absolute; right:5px; top:20px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #000; content:'';} #search_result .rank > ol:hover {height:auto; border:1px solid #dcdcdc;} #search_result .rank > ol:hover:after {display:none;} #search_result .category {clear:both; border:1px solid #e0e0e0; background:#fff;} #search_result .result_cate {overflow:hidden; padding:0 25px; border-top:1px solid #e0e0e0;} #search_result .result_cate:first-child {border-top:0;} #search_result .result_cate:after {clear:both;} #search_result .result_cate > h3 {float:left; line-height:38px;} #search_result .result_cate > ul {width:85%; margin-left:15%; text-align:left;} #search_result .result_cate > ul > li {overflow:hidden; text-overflow:ellipsis; float:left; width:20%; height:40px; white-space:nowrap; line-height:38px;} #search_result .result_cate > ul > li a {color:#777; font-size:11px;} #search_result .result_cate > ul > li a.selected {font-weight:bold;} #search_result .result_cate > ul > li span {color:#aaa; font-size:11px;} /* 상품후기 - 상단 탭, 카테고리(/shop/product_review_list.php) */ #rev_tab {padding-bottom:65px; font-size:0; text-align:center;} #rev_tab li {display:inline-block; padding:0 30px;} #rev_tab li a {color:#b2b2b2; font-size:30px; font-weight:700; letter-spacing:-0.02rem; line-height:1;} #rev_tab li.active a {border-bottom:3px solid #1a1a1a; color:#1a1a1a;} #rev_cate {width:670px; margin:0 auto; padding-bottom:15px;} #rev_cate ul {font-size:0; text-align:center;} #rev_cate ul li {display:inline-block; padding:5px;} #rev_cate ul li a {display:inline-block; padding:12.5px 30px; border-radius:25px; background:#f7f7f7; font-size:20px; letter-spacing:-0.02rem; transition:all .3s ease;} #rev_cate ul li a:hover {background:#0971ce; color:#fff;} /* 상품문의 & 상품후기 - 상품정보(/shop/product_review_list.php & /shop/product_qna_list.php) */ #qnarev_list_all .msg_sort {position:relative; margin-top:100px;} #qnarev_list_all .msg {position:absolute; top:50%; left:0; margin-top:-11px; padding-left:10px; color:#999; font-size:14px; letter-spacing:-0.03rem;} #qnarev_list_all .msg:after {position:absolute; top:50%; left:0; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:#999; content:'';} #qnarev_list_all .sort {margin-bottom:30px; text-align:right; font-size:0;} #qnarev_list_all .sort li {display:inline-block;} #qnarev_list_all .sort li:after {display:inline-block; width:1px; height:12px; margin:4px 13px 0 13px; background-color:#e5e5e5; vertical-align:top; content:'';} #qnarev_list_all .sort li:last-child:after {display:none;} #qnarev_list_all .sort li a {color:#b2b2b2; font-size:14px; letter-spacing:-0.02rem;} #qnarev_list_all .sort li a.selected {color:#1a1a1a;} #qnarev_list_all > .btn {position:relative; bottom:-27px; height:0;} #qnarev_list_all > .btn .box_btn {position:absolute; right:0; top:0;} #qnarev_list_all .board_search {clear:both; margin-top:50px; text-align:center;} #qnarev_list_all .board_search form {display:inline-block; margin:0 auto 0; border:1px solid #e6e6e6; text-align:center;} #qnarev_list_all .board_search select {width:107px; height:42px; border:0; padding-left:20px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/select_arrow.png') no-repeat right center; color:#1a1a1a; font-size:16px; -webkit-appearance:none; appearance:none; vertical-align:middle;} #qnarev_list_all .board_search input.form_input.search {width:255px; height:42px; border:0; vertical-align:middle;} #qnarev_list_all .board_search .btn_search {display:inline-block; width:56px; height:42px; padding:0; border:0; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/search_s2.png') no-repeat center; vertical-align:middle; text-indent:-9999px; cursor:pointer;} #qnarev_list_all .board_search .clear {margin-left:20px; border-bottom:1px solid #1a1a1a; font-size:14px; letter-spacing:-0.02rem;} /* 상품문의 & 상품후기 & 마이페이지 상품문의 & 마이페이지 상품후기 - 상품정보(/shop/product_review.php & /shop/product_qna.php) */ .qnarev_list .prd {overflow:hidden; position:relative; min-height:150px; padding:40px 50px; margin-bottom:32px; background:#fafbfb; color:#474645;} .qnarev_list .prd .img {float:left; width:150px;} .qnarev_list .prd .img img {width:150px; height:auto;} .qnarev_list .prd .info {float:left; padding-left:40px; text-align:left;} .qnarev_list .prd .info .name {padding-bottom:20px; font-weight:bold;} .qnarev_list .prd .info .name img {padding-right:5px; vertical-align:middle;} .qnarev_list .prd .info ul li {padding:5px 0; color:#666;} .qnarev_list .prd .info ul li .nprice {text-decoration:line-through;} .qnarev_list .prd .btn_related {padding-top:20px;} .qnarev_list .btn {padding-top:20px; text-align:right;} .qnarev_list .qnarev_cnt {padding:0; border:0;} .qnarev_list .qnarev_cnt > div {display:none; padding:40px; border-bottom:1px solid #e0e0e0; text-align:left; word-break:break-all; word-wrap:break-word;} .qnarev_list .qnarev_cnt .question, .qnarev_list .qnarev_cnt .answer {position:relative; min-height:40px; padding-left:50px;} .qnarev_list .qnarev_cnt .question {padding:0 0 20px 50px; border-bottom:1px solid #e5e5e5;} .qnarev_list .qnarev_cnt .question img {max-width:100%; height:auto;} .qnarev_list .qnarev_cnt .answer {margin-top:20px;} .qnarev_list .qnarev_cnt .icon {display:inline-block; position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:#777474; color:#fff; font-family:'arial'; text-align:center; line-height:28px;} .qnarev_list .qnarev_cnt .answer .icon {background:#ef6363;} .qnarev_list .qnarev_cnt .btn {text-align:left;} .qnarev_list .qnarev_cnt .comment {padding-top:20px;} /* 상품문의, 상품후기 - 비밀번호 확인 */ .pwbox_popup {position:fixed; left:50%; top:50%; z-index:100; margin:-131px 0 0 -570px; width:1140px; padding:0 60px;} #pwbox {padding:40px 0; border:1px solid #e0e0e0; background:#fafafa; text-align:center !important;} #pwbox h3 {padding-bottom:15px;} #pwbox p {margin-bottom:20px; color:#888;} #pwbox .form_input {width:330px; margin-bottom:20px;} /* 상품문의 & 상품후기 - 쓰기 */ .qnarev_write_popup {position:fixed; left:50%; top:50%; z-index:100; margin:-315px 0 0 -510px; width:1020px; height:630px;} .qnarev_write_popup > .close {position:absolute; top:0; right:-60px; width:32px; height:32px; text-indent:-9999px;} .qnarev_write_popup > .close:before {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .qnarev_write_popup > .close:after {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .qnarev_write_popup .qnarev_write {padding:30px;} .qnarev_write {overflow:auto; width:100%; height:100%; margin:0 auto; background:#fff; text-align:center;} .qnarev_write form {display:inline-block; width:100%; text-align:left;} .qnarev_write fieldset > legend {display:block; width:100%; margin-bottom:25px; padding-bottom:25px; border-bottom:1px solid #000; font-size:18px; font-weight:bold;} .qnarev_write fieldset > div {position:relative; margin-top:10px;} .qnarev_write fieldset > div:last-child {margin-bottom:0;} .qnarev_write fieldset > div > label {display:none;} .qnarev_write fieldset > div.grade {margin-bottom:20px; border-bottom:1px solid #dcdcdc; padding-bottom:25px; text-align:center;} .qnarev_write fieldset > div.grade > .msg {padding-bottom:15px; font-size:16px; font-weight:bold;} .qnarev_write fieldset > div.name {min-height:34px; padding-right:100px; line-height:34px; font-weight:bold;} .qnarev_write fieldset > div.name .form_input {float:left; width:49%;} .qnarev_write fieldset > div.name .form_input.pw {float:right;} .qnarev_write fieldset > div.name .check {position:absolute; right:0; top:5px;} .qnarev_write fieldset > div.name.nopd {padding-right:0;} .qnarev_write fieldset > div.name:after {display:block; clear:both; content:'';} .qnarev_write fieldset > div.contents {background:#fff;} .qnarev_write fieldset > div.contents textarea {height:250px;} .qnarev_write fieldset > div.msg_milage {margin-top:-11px; padding:10px; border:1px solid #cbd5de; background-color:#e6f0f9; color:#666; text-align:center; vertical-align:middle;} .qnarev_write fieldset > div.msg_milage img {vertical-align:middle;} .qnarev_write fieldset > div.msg_milage:before {position:absolute; left:10px; top:-8px; width:15px; height:15px; border:1px solid #cbd5de; border-width:1px 0 0 1px; background-color:#e6f0f9; -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .qnarev_write fieldset > div #preview_attach_files {font-size:0;} .qnarev_write fieldset > div #preview_attach_files > li {display:inline-block; padding:0 5px;} .qnarev_write fieldset > div #preview_attach_files > li:first-child {padding-left:0;} .qnarev_write fieldset > div #preview_attach_files > li img {width:115px; height:115px;} .qnarev_write fieldset select {width:100%;} .qnarev_write .btn {padding:20px 0; text-align:center !important;} /* 상품문의 & 상품후기 - 수정 */ #qnarevmod .modi_pwd, #qnarevmod .modi_cnt {display:none;} #qnarevmod .modi_cnt .qnarev_write > form {padding:40px 0; text-align:left;} /* 상품후기 - 열람 레이어 */ .layer_review_list {position:fixed; left:50%; top:50%; z-index:100; margin:-315px 0 0 -510px; width:1020px; height:630px;} .layer_review_list:after {display:block; clear:both; content:'';} .layer_review_list.upfile_cnt0 > .img {display:none !important;} .layer_review_list.upfile_cnt0 > .info {width:100% !important;} .layer_review_list > .img {float:left; width:630px; height:100%; background-color:#f1f2f3;} .layer_review_list > .img .box {display:flex; width:630px; height:630px; align-items:center; justify-content:center;} .layer_review_list > .img > .add_slide img {max-width:100%; max-height:100%;} .layer_review_list > .img > .add_slide .slick-arrow {position:absolute; top:50%; z-index:10; width:40px; height:40px; margin:-20px 15px 0 15px; border-radius:50%;} .layer_review_list > .img > .add_slide .slick-arrow.slick-prev {left:0;} .layer_review_list > .img > .add_slide .slick-arrow.slick-prev:before {position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-5px 0 0 -6px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list > .img > .add_slide .slick-arrow.slick-prev:after {position:absolute; left:50%; top:50%; width:12px; height:2px; margin:3px 0 0 -6px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .layer_review_list > .img > .add_slide .slick-arrow.slick-next {right:0;} .layer_review_list > .img > .add_slide .slick-arrow.slick-next:before {position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-5px 0 0 -6px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .layer_review_list > .img > .add_slide .slick-arrow.slick-next:after {position:absolute; left:50%; top:50%; width:12px; height:2px; margin:3px 0 0 -6px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list > .img > .add_slide .slick-dots {position:absolute; left:0; bottom:20px; z-index:10;} .layer_review_list > .info {overflow:auto; float:left; width:390px; height:100%; padding:30px; background-color:#fff;} .layer_review_list > .info > .prd {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;} .layer_review_list > .info > .prd:after {display:block; clear:both; content:'';} .layer_review_list > .info > .prd > h2 {float:right; width:calc(100% - 80px); padding-top:10px;} .layer_review_list > .info > .prd > .img {float:left; width:60px; margin-right:20px;} .layer_review_list > .info > .prd > .img img {width:60px; height:auto;} .layer_review_list > .info > .board {position:relative; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;} .layer_review_list > .info > .board > .grade > .score {padding-left:5px; font-size:16px; font-weight:bold;} .layer_review_list > .info > .board > .name {margin-top:10px; color:#888;} .layer_review_list > .info > .board > .name img {width:auto; height:16px; margin-top:1px; vertical-align:top;} .layer_review_list > .info > .board > .subject {margin-top:20px; color:#333; font-size:14px; font-weight:bold;} .layer_review_list > .info > .board > .content {margin-top:10px; color:#666; line-height:1.6; word-break:break-all;} .layer_review_list > .info > .board > .recommend {margin-top:20px; color:#888; line-height:24px;} .layer_review_list > .info > .board > .recommend > span {float:right;} .layer_review_list > .info > .board > .recommend > span > a {display:inline-block; min-width:60px; min-height:24px; padding:0 10px 0 30px; border:1px solid #dcdcdc; border-radius:20px; background-repeat:no-repeat; background-position:7px center; background-color:#fff; color:#333; text-align:right; line-height:24px; cursor:pointer;} .layer_review_list > .info > .board > .recommend > span > a.yes {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/recommend_yes.png');} .layer_review_list > .info > .board > .recommend > span > a.no {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/shop/recommend_no.png');} .layer_review_list > .info > .board > .recommend > span > a:hover {background-color:#f1f2f3;} .layer_review_list > .info > .board > .btn {position:absolute; right:0; top:0; font-size:0;} .layer_review_list > .info > .board > .btn > a {display:inline-block; margin-left:-1px; padding:4px 8px; border:1px solid #dcdcdc; background-color:#fff; color:#888;} .layer_review_list > .info > .board > .btn > a:hover {background-color:#f1f2f3;} .layer_review_list > .info > .comment > .guest {padding:15px 20px; background-color:#fafafa; color:#666;} .layer_review_list > .info > .comment > .guest > a {float:right; color:#333; font-size:13px; font-weight:bold; text-decoration:underline;} .layer_review_list > .info > .comment > form .write {position:relative; padding-right:56px; border:1px solid #dcdcdc; background-color:#fff; text-align:left;} .layer_review_list > .info > .comment > form .write textarea.form_input {min-height:40px; border:0;} .layer_review_list > .info > .comment > form .write .btn_comment {display:inline-block; position:absolute; right:0; top:0; width:56px; height:100%; text-align:center; border:0; background-color:#fff; font-weight:bold; line-height:100%; cursor:pointer;} .layer_review_list > .info > .comment > form .write:after {display:inline-block; position:absolute; right:56px; top:50%; width:1px; height:20px; margin-top:-10px; background-color:#dcdcdc; content:'';} .layer_review_list > .info > .comment > .list {position:relative; margin-top:20px;} .layer_review_list > .info > .comment > .list:before {position:absolute; left:20px; top:-6px; width:10px; height:10px; border:1px solid #dcdcdc; border-width:1px 1px 0 0; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list > .info > .comment > .list > li {margin-top:-1px; padding:10px 15px; border:1px solid #dcdcdc;} .layer_review_list > .info > .comment > .list > li > .date {display:block; position:relative; height:0; top:-16px; color:#888; text-align:right;} .layer_review_list > .info > .comment > .list > li > .date img {vertical-align:middle;} .layer_review_list > .info > .comment > .list > li > .content {padding-top:5px; color:#666; line-height:1.6; word-break:break-all;} .layer_review_list > .move {position:absolute; top:50%; width:34px; height:34px; margin:-17px 12px 0 12px; text-indent:-9999px; cursor:pointer;} .layer_review_list > .move.prev {left:-60px;} .layer_review_list > .move.prev:before {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:-9px 0 0 -13px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list > .move.prev:after {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:7px 0 0 -13px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .layer_review_list > .move.next {right:-60px;} .layer_review_list > .move.next:before {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:-9px 0 0 -13px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .layer_review_list > .move.next:after {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:7px 0 0 -13px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list > .move.end:before, .layer_review_list > .move.end:after {background-color:#818181;} .layer_review_list > .close {position:absolute; top:0; right:-60px; width:32px; height:32px; text-indent:-9999px;} .layer_review_list > .close:before {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list > .close:after {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} /* 상품후기 - 커스텀(ul li col4 구조) */ .custom_review_list {padding-top:33px; border-top:3px solid #1a1a1a; font-size:0;} .custom_review_list > li {display:inline-block; width:calc(25% - 15px); margin-right:20px; margin-bottom:20px; vertical-align:top;} .custom_review_list > li:nth-child(4n) {margin-right:0;} .custom_review_list > li .box {border:1px solid #e6e6e6;} .custom_review_list > li .rev_img {overflow:hidden; height:308px; cursor:pointer;} .custom_review_list > li .rev_img .prdyes, .custom_review_list > li .rev_img .revno {display:none;} .custom_review_list > li .rev_img .revyes {display:block; height:100%;} .custom_review_list > li .rev_img img {width:100%; height:auto; cursor:pointer;} .custom_review_list > li .cnt {padding:20px 20px 30px;} .custom_review_list > li .cnt .title {overflow:hidden; margin-bottom:8px; font-size:18px; font-weight:700; letter-spacing:-0.01rem; white-space:nowrap; text-overflow:ellipsis;} .custom_review_list > li .cnt .title a {font:inherit;} .custom_review_list > li .cnt .title img {vertical-align:middle;} .custom_review_list > li .cnt .content {overflow:hidden; height:52px; margin-bottom:20px; font-size:16px; line-height:26px; letter-spacing:-0.02rem; cursor:pointer;} .custom_review_list > li .cnt .name {overflow:hidden; padding-bottom:22px; font-size:16px;} .custom_review_list > li .cnt .name .date {float:right; color:#999; font:inherit;} .custom_review_list > li .cnt .prd_info {overflow:hidden; min-height:68px; padding:20px 0 0; border-top:1px solid #e6e6e6;} .custom_review_list > li .cnt .prd_info .img {float:left; width:47px; height:47px; margin-right:15px;} .custom_review_list > li .cnt .prd_info .img > span.rev {display:inline-block; width:100%; height:100%;} .custom_review_list > li .cnt .prd_info .img img {width:100%; height:auto;} .custom_review_list > li .cnt .prd_info .prd_name {overflow:hidden; color:#999; font-size:14px; letter-spacing:-0.02rem; white-space:nowrap; text-overflow:ellipsis;} .custom_review_list > li .cnt .prd_info .prd_name a {color:inherit; font-size:inherit;} .custom_review_list > li .cnt .prd_info .star .grade {padding-left:5px; color:#999; font-size:16px;} /* 설문조사(/shop/poll_list.php) */ #poll .subject {padding:15px 30px; border:1px solid #e0e0e0; border-width:1px 0; text-align:left;} #poll .subject strong {padding-left:40px;} #poll .box {padding:30px; border-bottom:1px solid #e0e0e0; background:#fbfbfb;} #poll .box .vote {margin-top:30px; padding:30px; border:1px solid #e0e0e0; background:#fff;} #poll .box .vote table {width:100%; margin:0 auto; table-layout:fixed;} #poll .box .vote table > thead {display:none;} #poll .box .vote table > tbody > tr > td {padding:2px 0;} #poll .box .vote table > tbody > tr > td .graph {height:5px; background:#b1b1b1;} #poll .btn {margin:10px 0 40px 0; text-align:right;} #poll .commentdel {padding:20px 0; border:1px solid #e0e0e0; border-bottom:0; background:#fff; text-align:center;} #poll .commentdel .msg {padding-top:5px;} /* 퀵카트 */ .quickcart {position:relative;} .quickcart > a {display:inline-block; padding:0 10px; color:#666; font-size:11px; line-height:30px;} .quickcart > a:hover {color:#d53838;} .quickcart .list {position:absolute; right:0; z-index:20; width:300px; padding:10px; border:1px solid #e0e0e0; background:#fff;} .quickcart .list .frame {overflow:auto; max-height:300px;} .quickcart .list .frame table {table-layout:fixed; clear:both; width:100%; border-collapse:collapse;} .quickcart .list .frame table caption {padding:10px 0; color:#181818; font-weight:bold; text-align:left;} .quickcart .list .frame table thead {display:none;} .quickcart .list .frame table td {position:relative; padding:10px 0; border-top:1px solid #e0e0e0; text-align:center; vertical-align:middle;} .quickcart .list .frame table td.info {padding:0 10px; text-align:left;} .quickcart .list .frame table td.info .mall {font-size:11px;} .quickcart .list .frame table td .del {position:absolute; right:0; top:10px;} .quickcart .list .box_price {padding:10px; border:1px solid #e0e0e0; border-width:1px 0; background:#f8f8f8;} .quickcart .list .btn > span {margin-top:10px;} /* 개별상품쿠폰 레이어 */ #prdCouponArea {margin-left:-285px !important;} #pop_coupon2 {position:relative; width:570px; padding:40px; border:1px solid #d9d9d9; background:#fff;} #pop_coupon2 h2 {padding-bottom:10px; border-bottom:1px solid #dbdbdb; color:#000; font-size:22px;} #pop_coupon2 .box {overflow:auto; max-height:400px; margin:-1px 0;} #pop_coupon2 .box .tbl_col .img img {width:60px; height:auto;} #pop_coupon2 .box .usable_cpn {padding:8px 0; text-align:left;} #pop_coupon2 .box .usable_cpn > li {position:relative; padding:2px 60px 2px 0;} #pop_coupon2 .box .usable_cpn > li > label {display:inline-block; cursor:pointer;} #pop_coupon2 .box .usable_cpn > li > label > span {color:#df7e7e;} #pop_coupon2 .box .usable_cpn > li > .expiry {position:absolute; right:0; top:2px; color:#888;} #pop_coupon2 .btn {padding-top:30px; border-top:1px solid #dbdbdb; text-align:center;} #pop_coupon2 .close {display:inline-block; position:absolute; right:20px; top:20px; width:21px; height:21px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} /* 재입고 알림 신청 레이어 */ #notify_restock {width:570px; margin-left:-285px !important; padding:40px; border:1px solid #d9d9d9; background-color:#fff;} #notify_restock .close {display:inline-block; position:absolute; right:20px; top:20px; width:21px; height:21px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} #notify_restock h2 {padding-bottom:10px; border-bottom:1px solid #dbdbdb; color:#000; font-size:22px;} #notify_restock .tbl_row {margin-top:-1px;} #notify_restock .tbl_row .opt th, #notify_restock .tbl_row .opt td {padding-top:8px; padding-bottom:8px; border-bottom:0;} #notify_restock .tbl_row .phone th, #notify_restock .tbl_row .phone td {border-top:1px solid #e0e0e0;} #notify_restock .agree {display:inline-block; margin-top:10px; cursor:pointer;} #notify_restock .btn {padding-top:20px; text-align:center;} /* 프로모션 기획전(/shop/promotion.php) */ .speical_group {margin:1px 1px 0 0;} .speical_group > .menu {margin-bottom:20px; font-size:0;} .speical_group > .menu > li {display:inline-block; width:25%;} .speical_group > .menu > li > a {display:block; margin:-1px -1px 0 0; padding:10px; border:1px solid #d2d2d2; color:#666; text-align:center;} .speical_group > .menu > li > a:hover, .speical_group > .menu > li > a.active {position:relative; z-index:5; border:1px solid #535353; color:#333; font-weight:bold;} .speical_group > .intro > .title {position:relative; padding:15px 0; border-bottom:1px solid #d2d2d2;} .speical_group > .intro > .title > h3 {padding-right:160px; font-size:16px; font-weight:bold;} .speical_group > .intro > .title > span {position:absolute; right:0; top:50%; margin-top:-12px; color:#666; font-size:14px;} .speical_group > .intro > .summary {padding:30px 0; border-bottom:1px solid #d2d2d2;} .speical_group > .box {border-bottom:1px solid #d2d2d2; text-align:center;} .speical_group > .box > h4 {padding:40px 0 30px; font-size:20px;} .speical_group > .box > .img {padding-bottom:30px;} /* 정기배송 레이어 */ .layer_sbs {position:fixed; top:50%; left:50%; z-index:100; overflow:auto; width:1100px; height:640px; margin:-320px 0 0 -550px; background-color:#fff;} .layer_sbs .frame {padding:40px;} .layer_sbs .frame > h2 {padding-bottom:20px; border-bottom:1px solid #535353; font-size:18px; font-weight:bold; text-align:left;} .layer_sbs .delivery_info {float:left; width:740px; min-height:640px; border-right:1px solid #dcdcdc;} .layer_sbs .delivery_info .calendar {float:left; width:50%;} .layer_sbs .delivery_info .calendar > strong {display:block; padding-bottom:10px; font-size:14px;} .layer_sbs .delivery_info .calendar > strong * {font-size:inherit;} .layer_sbs .prd_info {float:right; width:361px; min-height:640px; margin-left:-1px; border-left:1px solid #dcdcdc;} .layer_sbs .prd_info > .prd {position:relative; margin-top:20px;} .layer_sbs .prd_info > .prd > .img {float:left; width:100px;} .layer_sbs .prd_info > .prd > .img > img {width:80px; height:auto;} .layer_sbs .prd_info > .prd > .info {float:left; width:180px; padding:10px 0;} .layer_sbs .prd_info > .prd:after {display:block; clear:both; content:'';} .layer_sbs .prd_info > .list {padding-top:20px;} .layer_sbs .prd_info > .list > li {margin:10px 0; color:#666; vertical-align:top;} .layer_sbs .prd_info > .list > li > p {float:right; color:#333;} .layer_sbs .prd_info > .list > li > p * {color:inherit;} .layer_sbs .prd_info > .list > li.ea_prc {margin-top:20px; padding-top:20px; border-top:1px solid #dcdcdc;} .layer_sbs .prd_info > .list > li.total_prc {margin-top:20px; padding-top:20px; border-top:1px solid #dcdcdc;} .layer_sbs .prd_info > .list > li.total_prc > span {font-size:11px;} .layer_sbs .prd_info > .list > li.total_prc > p {margin-top:-12px; font-size:16px; font-weight:bold;} .layer_sbs .prd_info > .list > li.total_prc > p * {font-size:16px; font-weight:bold;} .layer_sbs .prd_info > .btn {margin-top:20px; padding-top:20px; border-top:1px solid #dcdcdc;} .layer_sbs .prd_info > .btn:after {display:block; clear:both; content:'';} .layer_sbs .prd_info > .btn > span {float:left; width:50%;} .layer_sbs > .close {display:inline-block; position:absolute; right:10px; top:10px; width:21px; height:21px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} /*-----------------------------------------------------------------*/ /* 4-3. 회원 /*-----------------------------------------------------------------*/ /* 로그인 & 아이디 비밀번호 찾기 & 비밀번호 변경 */ .box_member {width:460px; margin:0 auto;} .box_member .tab_member {padding-bottom:40px; font-size:0;} .box_member .tab_member li {display:inline-block; width:50%;} .box_member .tab_member li a {display:block; height:40px; border-bottom:1px solid #e5e5e5; color:#b2b2b2; font-size:20px; text-align:center; letter-spacing:-0.02rem; cursor:pointer;} .box_member .tab_member li a.active {border-bottom:2px solid #1a1a1a; color:#1a1a1a; font-weight:500;} .box_member fieldset {position:relative;} .box_member fieldset legend {padding:25px 0; font-weight:bold;} .box_member fieldset .fld {margin-bottom:10px; font-size:0;} .box_member fieldset .fld label {display:none;} .box_member fieldset .savessl {overflow:hidden; padding:30px 0 60px;} .box_member fieldset .savessl label {display:inline-block; margin-right:40px; color:#999; font-size:14px; line-height:23px; letter-spacing:-0.02rem;} .box_member fieldset .savessl .ssl {float:right;} .box_member fieldset .savessl .ssl input {display:none;} .box_member fieldset .savessl .ssl label {margin:0; padding-left:13px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/login_ssl.png') no-repeat left center;} .box_member fieldset .select {margin-bottom:20px;} .box_member fieldset .select label {display:inline-block; margin-right:40px; color:#999; font-size:14px; line-height:23px; letter-spacing:-0.02rem;} /* 로그인 & 아이디 비밀번호 찾기 & 비밀번호 변경 - 인풋 기본 스타일 */ .box_member .form_input.member {height:50px; padding:0 20px; font-size:16px;} .box_member .form_input.member:focus {border-color:#000;} .box_member .form_input.member.number_first {width:32%;} .box_member .form_input.member.number {width:33%; margin-left:1%;} .box_member .find_id_item_2, .box_member .find_id_item_3, .box_member .find_pw_item_2, .box_member .find_pw_item_3 {display:none;} /* 로그인(/member/login.php) */ #login .guest_order {margin:20px 0 0;} #login .fail {position:relative; margin-bottom:20px; padding:18px 10px; border-radius:10px; background:#fae4e8; color:#d53838; text-align:center;} #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 .joinfind {padding-top:40px; font-size:0; text-align:center;} #login .joinfind li {display:inline-block; position:relative; padding:0 45px;} #login .joinfind li:after {position:absolute; top:50%; left:0; width:1px; height:10px; margin-top:-5px; background:#1a1a1a; content:'';} #login .joinfind li:first-child:after {display:none;} #login .joinfind li a {position:relative; font-size:14px; letter-spacing:-0.02rem;} #login .joinfind li a .join_point {display:block; position:absolute; top:20px; left:101%; width:66px; height:28px; margin-left:-33px; border-radius:5px; background:#1a1a1a; color:#fff; font-size:14px; text-align:center; letter-spacing:0.02rem; line-height:28px; -webkit-animation:updown 1s ease-in-out infinite; -moz-animation:updown 1s ease-in-out infinite; -o-animation:updown 1 ease-in-out infinite; animation:updown 1 ease-in-out infinite;} #login .joinfind li a .join_point:after {position:absolute; top:auto; bottom:-5px; left:50%; z-index:5; width:0; height:0; margin-left:-3px; border-left:3px solid transparent; border-right:3px solid transparent; border-top:5px solid #1a1a1a; content:''} #login .simple {padding:40px 0 0; font-size:0; text-align:center;} #login .simple a {display:inline-block; width:44px; height:44px; margin:0 5px; background-repeat:no-repeat; background-position:center; text-indent:-9999px; transition:all .3s ease;} #login .simple a.apple {background-color:#000; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_apple.png');} #login .simple a.apple:hover {border-radius:0;} #login .simple a.naver {background-color:#1ec800; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_naver.png');} #login .simple a.naver:hover {border-radius:0; background-color:#519c58;} #login .simple a.facebook {background-color:#4267b2; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_facebook.png');} #login .simple a.facebook:hover {border-radius:0; background-color:#4f709f;} #login .simple a.kakao {background-color:#ffe812; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_kakao.png');} #login .simple a.kakao:hover {border-radius:0; background-color:#ddbc4b;} #login .simple a.payco {background-color:#e72a2d; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_payco.png');} #login .simple a.payco:hover {border-radius:0; background-color:#d73a3c;} #login .simple a.wemake {border:1px solid #d0d0d0; background-color:#fff; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_wemake.png');} #login .simple a.wemake:hover {border-radius:0; background-color:#fafafa;} @-webkit-keyframes updown {0%,100%{-webkit-transform:translate(0, 2px);} 50%{-webkit-transform:translate(0, 0);}} @-moz-keyframes updown {0%,100%{-moz-transform:translate(0, 2px);} 50%{-moz-transform:translate(0, 0);}} @-o-keyframes updown {0%,100%{-o-transform:translate(0, 2px);} 50%{-o-transform:translate(0, 0);}} @keyframes updown {0%,100%{transform:translate(0, 2px);} 50%{transform:translate(0, 0);}} /* 아이디/비밀번호 찾기 레이어 */ .pop_find_id {position:fixed; left:50%; top:100px; z-index:1001; width:400px; border:1px solid #dcdcdc; margin-left:-200px; background-color:#fff;} .pop_find_id h1 {height:49px; padding:0 10px; background-color:#676767; 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('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} /* 비밀번호 변경 */ #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; text-align:left;} /* 회원가입 약관동의(/member/join_step1.php) */ #join_agree {width:460px; margin:0 auto; text-align:center;} #join_agree .all_chk {margin-bottom:30px; border-bottom:1px solid #1a1a1a;} #join_agree .check {padding-bottom:20px; text-align:left;} #join_agree .check > label {font-size:16px; font-weight:500; letter-spacing:-0.02rem;} #join_agree iframe {width:100%; height:150px; margin-bottom:30px; border:1px solid #e6e6e6; background-color:#fff;} #join_agree .scroll {overflow-y:scroll; width:100%; height:150px; margin-bottom:30px; padding:20px; border:1px solid #e6e6e6; background-color:#fff; text-align:left;} #join_agree .scroll dl dt {color:#1a1a1a; font-size:12px; font-weight:400; letter-spacing:-0.02rem; line-height:24px;} #join_agree .scroll dl dd {color:#b2b2b2; font-size:12px; font-weight:400; letter-spacing:-0.02rem; line-height:24px;} #join_agree .member_type {padding:20px 0 30px;} #join_agree .member_type label {margin:0 10px; font-size:15px;} #join_agree .btn {padding-top:20px; text-align:center;} #join_agree .simple {position:relative; margin-top:60px; text-align:center;} #join_agree .simple a {display:inline-block; width:44px; height:44px; margin:0 5px; background-repeat:no-repeat; background-position:center; text-indent:-9999px; transition:all .3s ease;} #join_agree .simple a.apple {background-color:#000; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_apple.png');} #join_agree .simple a.apple:hover {border-radius:0;} #join_agree .simple a.naver {background-color:#1ec800; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_naver.png');} #join_agree .simple a.naver:hover {border-radius:0; background-color:#519c58;} #join_agree .simple a.facebook {background-color:#4267b2; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_facebook.png');} #join_agree .simple a.facebook:hover {border-radius:0; background-color:#4f709f;} #join_agree .simple a.kakao {background-color:#ffe812; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_kakao.png');} #join_agree .simple a.kakao:hover {border-radius:0; background-color:#ddbc4b;} #join_agree .simple a.payco {background-color:#e72a2d; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_payco.png');} #join_agree .simple a.payco:hover {border-radius:0; background-color:#d73a3c;} #join_agree .simple a.wemake {border:1px solid #d0d0d0; background-color:#fff; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/icon_wemake.png');} #join_agree .simple a.wemake:hover {border-radius:0; background-color:#fafafa;} #join_agree .simple .join_point {display:block; position:absolute; top:-43px; left:31%; width:66px; height:28px; margin-left:-33px; border-radius:5px; background:#1a1a1a; color:#fff; font-size:14px; text-align:center; letter-spacing:0.02rem; line-height:28px; -webkit-animation:updown 1s ease-in-out infinite; -moz-animation:updown 1s ease-in-out infinite; -o-animation:updown 1 ease-in-out infinite; animation:updown 1 ease-in-out infinite;} #join_agree .simple .join_point:after {position:absolute; top:auto; bottom:-5px; left:50%; z-index:5; width:0; height:0; margin-left:-3px; border-left:3px solid transparent; border-right:3px solid transparent; border-top:5px solid #1a1a1a; content:''} /* 회원가입 정보입력(/member/join_frm.php) */ #join_input {width:750px; margin:0 auto;} #join_input fieldset {margin-top:50px;} #join_input fieldset:nth-of-type(1) {margin-top:-25px;} #join_input fieldset * {font-size:14px;} #join_input fieldset .form_input.invalid {border-color:#c41c1b; background-color:#fff5f6;} #join_input fieldset legend {display:block; position:relative; width:100%; padding-bottom:10px; border-bottom:1px solid #333; color:#333; font-size:20px;} #join_input fieldset legend > span {position:absolute; right:0; top:5px; color:#666;} #join_input fieldset legend > span > strong {color:#cc3a3a;} #join_input fieldset > .box {padding-top:20px;} #join_input fieldset > .box > div {display:table; position:relative; width:100%; padding:10px 0; padding-right:130px;} #join_input fieldset > .box > div > label {display:table-cell; width:160px; padding-right:10px; font-size:16px; font-weight:normal; text-align:left; letter-spacing:-0.02rem; vertical-align:middle;} #join_input fieldset > .box > div > .input_area {display:table-cell; height:50px; vertical-align:middle;} #join_input fieldset > .box > div > .input_area input {vertical-align:top;} #join_input fieldset > .box > div > .input_area input.form_input {width:458px; height:50px; padding:0 20px; font-size:16px;} #join_input fieldset > .box > div > .input_area label {margin-right:35px; font-size:15px;} #join_input fieldset > .box > div .msg {display:inline-block; position:absolute; right:-220px; top:10px; z-index:5; width:340px;} #join_input fieldset > .box > div .msg > p {padding-left:15px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_msg.png') no-repeat left center; color:#999; font-size:14px; line-height:25px;word-break:keep-all;} #join_input fieldset > .box > div .msg > p.warning {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_msg_warning.png'); color:#c41c1c;} #join_input fieldset > .box > div .msg.block {display:inline-block; position:static; width:100%; padding-left:0;} #join_input fieldset > .box > div .msg.addr_msg {top:70px;} #join_input fieldset > .box > div.required > label:after {color:#c41c1c; content:' *';} #join_input fieldset > .box > div.birth > .input_area, #join_input fieldset > .box > div.addr > .input_area {font-size:0;} #join_input fieldset > .box > div.birth select {width:26%; height:50px; padding-left:15px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/select_arrow.png') no-repeat right 15px center; color:#1a1a1a; font-size:16px; -webkit-appearance:none; appearance:none;} #join_input fieldset > .box > div.birth .txt {display:inline-block; width:7.33%; height:50px; text-align:center; line-height:50px;} #join_input fieldset > .box > div.addr .form_input:nth-of-type(1) {} #join_input fieldset > .box > div.addr .form_input:nth-of-type(2) {margin:10px 0;} #join_input fieldset > .box > div.addr .box_btn {position:absolute; top:10px; right:0;} #join_input fieldset > .box > div.addr .box_btn * {padding:14.5px 5px;} /* 회원가입 정보입력 - SNS */ #join_input.api {padding-top:40px;} #join_input.api fieldset > .box > div > .email_area .form_input {width:calc(100% - 91px) !important; margin-right:10px;} #join_input.api fieldset > .box > div > .email_area .box_btn * {padding:14.5px 12px;} /* 회원가입 정보입력 - dummy */ #join_input .dummy {position:absolute; left:0; top:0; width:0; height:0; font-size:0; line-height:0; opacity:0;} /* 회원가입 정보입력 - 기업회원추가입력 */ #join_input fieldset.biz > .box > div .form_input {height:50px; padding:0 20px; font-size:16px;} #join_input fieldset.biz > .box > div.licensee_num .form_input {width:32%;} #join_input fieldset.biz > .box > div.licensee_num .form_input.second {margin:0 2%;} /* 회원가입 정보입력 - 버튼 */ #join_input .btn {margin-top:50px; text-align:center;} /* 비밀번호 안전도 */ #join_input .password_security_lev {display:inline-block; position:relative; padding:7px 15px; border:1px solid #bfbfbf; background-color:#fff; color:#333; font-weight:bold; text-align:left;} #join_input .password_security_lev:before {position:absolute; left:-5px; top:8px; width:8px; height:8px; border:1px solid #bfbfbf; border-width:1px 0 0 1px; background-color:#fff; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} #join_input .password_security_lev > span {display:inline-block; position:relative; width:72px; height:4px; margin-top:7px; background-color:#e5e5e5; vertical-align:top;} #join_input .password_security_lev > span:before {display:inline-block; position:absolute; left:0; top:0; height:4px; content:'';} #join_input .password_security_lev > span:after{display:inline-block; position:absolute; left:0; top:0; width:inherit; height:inherit; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/safebar.gif') no-repeat center; content:'';} #join_input .password_security_lev > p {color:#888; font-size:11px; font-weight:normal;} #join_input .password_security_lev.password_security_1 > strong {color:#e60012;} #join_input .password_security_lev.password_security_1 > span:before {width:22px; background-color:#e60012;} #join_input .password_security_lev.password_security_2 > strong {color:#e7853c;} #join_input .password_security_lev.password_security_2 > span:before {width:47px; background-color:#e7853c;} #join_input .password_security_lev.password_security_3 > strong {color:#32b16c;} #join_input .password_security_lev.password_security_3 > span:before {width:72px; background-color:#32b16c;} /* 회원가입완료(/member/join_step3.php) */ #join_finish {text-align:center;} #join_finish h3 {padding-bottom:60px; font-size:48px; font-weight:400; line-height:74px; letter-spacing:-0.05rem;} #join_finish h3 strong {color:#0971ce; font-size:inherit; font-weight:700;} #join_finish .benefit {font-size:0;} #join_finish .benefit li {display:inline-block; margin:0 65px; padding-top:74px; background:no-repeat top center; color:#999; font-size:16px; line-height:28px; vertical-align:top;} #join_finish .benefit li span {display:block; color:#1a1a1a; font-size:18px; font-weight:500;} #join_finish .benefit li.no0 {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/join_benefit0.png');} #join_finish .benefit li.no1 {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/join_benefit1.png');} #join_finish .benefit li.no2 {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/member/join_benefit2.png');} #join_finish .document > p {padding-bottom:20px; font-size:16px;} #join_finish .document > a {display:inline-block; padding:0 10px; font-size:14px; font-weight:700; text-decoration:underline;} #join_finish .agree {width:750px; margin:70px auto 0; padding:25px 0; border:1px solid #e6e6e6;} #join_finish .agree p {color:#999; font-size:15px; line-height:27px; letter-spacing:-0.05rem;} #join_finish .agree p span {display:block; color:#1a1a1a; font-size:inherit; font-weight:700; line-height:inherit;} #join_finish .btn {margin-top:70px;} /* 정보수정(/member/edit_step1.php), 정보수정완료(/member/edit_step3.php) */ .edit_info .box {padding:60px 0; background-color:#f5f5f5; text-align:center;} .edit_info .box > .msg {color:#666;} .edit_info .box > .agree {width:50%; margin:20px auto 0; padding:15px; color:#666; background-color:#fff;} .edit_info .box > .agree > span {display:block;} .edit_info .form_input {width:50%; margin-top:15px;} .edit_info .btn {padding-top:30px; text-align:center;} /* 우편번호 찾기(/common/zip_search.php) */ .zipcode {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:60px;} .zipcode .search .box_btn {position:absolute; right:0; top: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:middle;} .zipcode table td.addr {text-align:left;} .zipcode table td font {color:#d53838;} /*-----------------------------------------------------------------*/ /* 4-4. 마이페이지 /*-----------------------------------------------------------------*/ /* 마이페이지 메뉴 & 회원정보 */ .mypage_menu {position:absolute; top:285px; left:0;} .mypage_menu h3 {width:300px; padding-bottom:32px; border-bottom:3px solid #1a1a1a; font-size:30px; font-weight:700; letter-spacing:-0.02rem; line-height:42px;} .mypage_menu dl {padding-top:43px;} .mypage_menu dl:nth-of-type(1) {padding-top:33px;} .mypage_menu dl dt {padding-bottom:15px; font-size:20px; font-weight:700; letter-spacing:-0.02rem;} .mypage_menu dl dd a {font-size:16px; letter-spacing:-0.02rem; line-height:34px;} /* 마이페이지 공통 박스 */ .box_mp {margin-bottom:30px; padding:30px; background:#f8f8f8; text-align:center; line-height:35px;} .box_mp:after {display:block; clear:both; content:'';} .box_mp .have {color:#666;} .box_mp .have span {display:block; padding-top:5px; color:#333; font-family:'arial'; font-size:24px; font-weight:bold;} /* 마이페이지 메인(/mypage/mypage.php) */ #mypage .my_info {margin-bottom:40px; padding:64px 70px 64px 60px; background:#f7f7f7; font-size:0;} #mypage .my_info .grade {display:inline-block; position:relative; width:355px; padding-right:130px; vertical-align:middle;} #mypage .my_info .grade p {font-size:24px; font-weight:500; letter-spacing:-0.02rem; line-height:36px;} #mypage .my_info .grade p strong {font-size:inherit; font-weight:700;} #mypage .my_info .grade .box_btn {position:absolute; top:50%; right:0; margin-top:-18px;} #mypage .my_info .grade .box_btn a {width:120px; padding:7px 0 8px; font-size:14px;} #mypage .my_info .state {display:inline-block; width:calc(100% - 355px); text-align:right; vertical-align:middle;} #mypage .my_info .state ul {display:inline-block; font-size:0;} #mypage .my_info .state ul li {display:inline-block; position:relative; text-align:center; line-height:1; vertical-align:middle;} #mypage .my_info .state ul li:after {position:absolute; top:50%; left:0; width:1px; height:20px; margin-top:-10px; background:#b2b2b2; content:'';} #mypage .my_info .state ul li:first-child:after {display:none;} #mypage .my_info .state ul li a {display:block; padding:0 50px; font-size:15px; letter-spacing:-0.02rem;} #mypage .my_info .state ul li a span {display:block; padding-bottom:5px; font-size:40px; font-weight:700; line-height:1;} #mypage h3.title {padding:53px 0 23px !important; font-size:20px; font-weight:700; letter-spacing:-0.02rem;} #mypage h3.title.last {margin-bottom:30px; border-bottom:3px solid #1a1a1a;} #mypage h3.title span {padding-left:15px; color:#999; font-size:14px; font-weight:400;} #mypage .title_count {top:-77px;} #mypage .title_count a {color:#999; font-size:14px;} #mypage .event_bnr {padding-top:60px;} #mypage .latest {margin-left:-17px; font-size:0;} #mypage .latest li {display:inline-block; width:14.2857%; padding-left:17px; margin-bottom:17px;} #mypage .latest li .img {background:#f7f7f7; } #mypage .latest li .img img {width:96%; height:auto;} @media all and (max-width:1370px) { #mypage .my_info .grade {width:300px; padding:0;} #mypage .my_info .grade .box_btn {position:static; margin-top:20px;} #mypage .my_info .state {width:calc(100% - 300px);} } /* 주문내역조회(/mypage/order_list.php) */ #order_list > .search {padding:30px; background-color:#f8f8f8; text-align:center;} #order_list > .search > .date {display:inline-block; font-size:0; vertical-align:top;} #order_list > .search > .date > span {margin-left:-1px;} #order_list > .search > .date > span > * {border-color:#dcdcdc;} #order_list > .search > .date > span.on * {background-color:#fff;} #order_list > .search > .date_input {display:inline-block; vertical-align:top; line-height:34px;} /* 주문상세조회(/mypage/order_detail.php) */ #order_detail .stat {padding-bottom:20px; font-size:0; text-align:center;} #order_detail .stat li {display:inline; padding:0 5px;} #order_detail .trace {padding-top:20px;} #order_detail .trace .number {padding-left:10px; line-height:35px;} #order_detail .area_left {float:left; width:63%;} #order_detail .area_right {float:right; margin-top:30px;} #order_detail .area_right .box {width:360px; padding:40px; background:#f8f8f8;} #order_detail .area_right .box .line {margin-top:25px; border-top:1px solid #dfdfdf;} #order_detail .total_price {font-size:14px;} #order_detail .backtolist {padding:30px 0; text-align:center;} /* 주문상세조회(/mypage/order_detail.php) - 정기배송주문상세조회 */ #order_detail .chgdelivery {position:relative; top:-46px; height:0; text-align:right;} #order_detail .area_right .box > .btn {margin-top:25px; padding-top:25px; border-top:1px solid #dfdfdf;} #order_detail .area_right .box > .btn > .box_btn {margin-top:10px;} #order_detail .area_right .box > .btn > .box_btn:first-child {margin-top:0;} #order_detail .sbs_schedule > .msg {position:relative; top:-41px; height:0; text-align:right;} /* 주문상세조회(/mypage/order_detail.php) - 결제수단변경 레이어 */ .chg_paytype {overflow:auto; position:fixed; left:50%; top:50%; z-index:100; width:1100px; height:720px; margin:-360px 0 0 -550px; padding:20px 40px 40px 40px; background-color:#fff;} .chg_paytype h2 {padding-bottom:20px; border-bottom:1px solid #535353; font-size:18px; font-weight:bold;} .chg_paytype h3 {padding:30px 0 15px; font-size:13px; font-weight:bold;} .chg_paytype .explain {margin-bottom:30px; padding:20px 0; border-bottom:1px solid #dcdcdc;} .chg_paytype .explain > li {padding-left:25px; background:url('http://sw.wisaweb.co.kr/wm_engine_SW/_manage/image/common/icon_info.png') no-repeat left center; color:#888; line-height:2;} .chg_paytype .sum {float:left; width:58.82%; text-align:left;} .chg_paytype .select {float:right; width:35.29%; text-align:left;} .chg_paytype .select > .type {padding:30px; background-color:#f5f5f5;} .chg_paytype .select > .type > li {padding:5px 0;} .chg_paytype .select > .type > li > label {color:#666; cursor:pointer;} .chg_paytype .select > .type > li > label > input {position:relative; top:-3px;} .chg_paytype .select > .msg {margin-top:20px; padding:20px; border:1px solid #e5e5e5;} .chg_paytype .select > .msg > li {color:#888; letter-spacing:-1px;} .chg_paytype .select > .btn {padding-top:10px;} .chg_paytype .select > .btn > span {margin-top:10px;} .chg_paytype .sum > table {table-layout:fixed; width:100%; margin:0 auto; border-top:1px solid #e0e0e0;} .chg_paytype .sum > table * {font-size:13px;} .chg_paytype .sum > table th {padding:15px; border:1px solid #e0e0e0; border-width:0 1px 1px 0; font-weight:normal; text-align:left; vertical-align:middle;} .chg_paytype .sum > table td {padding:15px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle;} .chg_paytype .sum > table td .price {font-family:'arial'; font-size:16px;} .chg_paytype .select h3:first-child, .chg_paytype .sum h3:first-child {padding-top:0;} .chg_paytype .close {display:block; position:absolute; right:40px; top:20px; width:20px; height:20px; text-indent:-9999px; cursor:pointer;} .chg_paytype .close:before {position:absolute; right:0px; top:10px; width:20px; height:1px; background-color:#000; transform:rotate(45deg); content:'';} .chg_paytype .close:after {position:absolute; right:0px; top:10px; width:20px; height:1px; background-color:#000; transform:rotate(-45deg); content:'';} .chg_paytype:after {display:block; clear:both; content:'';} /* 정기배송주문 배송지변경 */ .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;} /* 쿠폰(/mypage/coupon_down_list.php) */ #coupon h3.title:first-child {padding-top:0;} /* 소셜쿠폰(/mypage/sccoupon.php) */ #sccoupon .box_mp .form_input {width:270px; margin-top:20px;} #sccoupon .btn {text-align:center;} /* 관심상품(/mypage/wish_list.php) */ #wish_list .btn {padding-top:30px; font-size:0; text-align:left;} #wish_list .btn .box_btn {margin-right:5px;} #wish_list .btn .box_btn.fr {margin-right:0;} /* 1:1문의 내역(/mypage/counsel_list.php & /mypage/order_detail.php) */ #counsel {clear:both;} #counsel .content {padding:30px; border-bottom:1px solid #aeaeae; text-align:left; word-break:break-all; word-wrap:break-word;} #counsel .content .question {padding-bottom:25px;} #counsel .none_style {margin:0 !important; padding:0 !important; border:0 !important;} #counsel .cnt_hidden {display:none; overflow:hidden; padding:20px; border-bottom:1px solid #d7d7d7;} #counsel .cnt_hidden .qna_subject {clear:both; float:left; width:10%; padding:10px 0; color:#181818; font-weight:bold; text-align:left; vertical-align:top;} #counsel .cnt_hidden .qna_cnt {float:left; width:90%; padding:10px 0; text-align:left; vertical-align:top;} #counsel .btn {padding-top:30px; font-size:0; text-align:left;} #counsel .btn .box_btn {margin-right:5px;} #counsel .btn .box_btn.fr {margin-right:0;} /* 1:1문의 글쓰기(/mypage/counsel_step1.php) */ #counsel_write {width:100%; margin:20px 0; background:#f5f5f5; text-align:center;} #counsel_write > form {display:inline-block; width:72%; margin:0 auto; padding:40px 0; text-align:left;} #counsel_write fieldset > table {margin-bottom:-1px;} #counsel_write fieldset > div {position:relative; margin-bottom:10px; text-align:left;} #counsel_write fieldset > div.content {background-color:#fff;} #counsel_write fieldset > div:last-child {margin-bottom:0;} #counsel_write fieldset > div > label {display:none;} #counsel_write fieldset textarea {height:250px;} #counsel_write .btn {padding:20px 0; text-align:center !important;} /* 1:1문의 완료(/mypage/counsel_step2.php) */ #counsel_fin h3 {margin-bottom:20px; font-size:13px;} #counsel_fin .box {padding:80px 0; border:1px solid #dedede; color:#888; font-size:14px; text-align:center; line-height:3;} #counsel_fin .box strong {font-size:inherit;} #counsel_fin .btn {margin-top:30px; text-align:center;} /* 출석체크(/mypage/attend_list.php) */ #attend .date {padding:25px 0; border:1px solid #dbdbdb; border-bottom:0; text-align:center; vertical-align:top;} #attend .date a {display:inline-block; width:18px; height:18px; border:1px solid #dbdbdb; background-repeat:no-repeat; background-position:center;} #attend .date a.prev {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_arrow_prev.png');} #attend .date a.next {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/bullet_arrow_next.png');} #attend .date strong {padding:0 5px; color:#040404; font-family:'arial'; font-size:20px; line-height:20px; text-align:center; vertical-align:top;} #attend #calendar table {width:100%;} #attend #calendar table thead th {padding:10px 0; border:1px solid #dbdbdb; background:#fbfbfb; color:#666; font-family:'arial'; font-weight:normal; text-align:center;} #attend #calendar table thead th.sun {color:#d53838;} #attend #calendar table thead th.sat {color:#7cb4d1;} #attend #calendar table tbody td {height:100px; padding:10px; border:1px solid #dbdbdb; color:#040404; text-align:left; vertical-align:top;} #attend #calendar .attenY {background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/mypage/attend_ok.png') no-repeat center;} #attend #calendar .attenR {background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/mypage/attend_today.png') no-repeat center #fbf9ed; font-weight:bold; text-decoration:underline;} #attend .info {overflow:hidden; padding:30px 50px; border:1px solid #dbdbdb; border-top:0; background:#fbfbfb; text-align:left;} #attend .info .explain {float:left; text-align:left;} #attend .info .sum {float:right;} /* 회원탈퇴(/mypage/withdraw_step1.php), 회원탈퇴완료(/mypage/withdraw_step2.php) */ .withdraw .box {padding:60px 0; background:#f5f5f5; text-align:center;} .withdraw .msg {margin-bottom:10px; color:#666;} .withdraw .frame {width:50%; margin:0 auto;} .withdraw .frame textarea {height:250px; margin-top:10px;} .withdraw .btn {padding-top:30px; text-align:center;} /*-----------------------------------------------------------------*/ /* 4-5. 추가페이지 /*-----------------------------------------------------------------*/ /* 이용약관(/content/content.php?cont=uselaw) */ #uselaw {padding:10px;} #uselaw > ol > li > dl > dt {padding:30px 0 10px; font-weight:bold;} #uselaw > ol > li:nth-of-type(1) > dl > dt {padding-top:0;} #uselaw > ol > li > dl > dd {padding-left:10px; color:#666;} #uselaw > ol > li > dl > dd > ul, #uselaw > ol > li > dl > dd > ol {padding-left:10px; color:#666;} /* 개인정보취급방침(/content/content.php?cont=privacy) */ #privacy > ul > li > dl > dt {padding:30px 0 10px; font-weight:bold;} #privacy > ul > li > dl > dd {padding-left:10px; color:#666;} #privacy > ul > li > dl > dd > ul, #privacy > ul > li > dl > dd > ol {padding-left:10px; color:#666;} /* 이용안내(/content/content.php?cont=guide) */ #guide .tab {text-align:center;} #guide .tab li {display:inline;} #guide .tab li a {padding:0 15px;} #guide .tab li a:hover {text-decoration:underline;} #guide > dl > dt {padding:30px 0 10px; font-weight:bold;} #guide > dl > dd {padding-left:10px; color:#666;} #guide > dl > dd > ul, #guide > dl > dd > ol {padding-left:10px; color:#666;} /* 회사소개(/content/content.php?cont=company) */ #company {padding-top:300px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/company.jpg') no-repeat left top/100% auto; text-align:left;} #company:after {display:block; clear:both; content:'';} #company > dl {float:left; width:30%;} #company > dl:nth-child(2) {margin:0 5%;} #company > dl > dt {padding:30px 0 10px; font-size:14px; font-weight:bold;} #company > dl.location {clear:both; float:none; width:100%;} /* 고객센터(/content/customer.php) */ #customer .quick {width:100%; margin:0 0 35px 2px;} #customer .quick:after {display:block; clear:both; content:'';} #customer .quick > li {float:left; width:20%; margin-left:-1px; border:1px solid #dcdcdc;} #customer .quick > li > a {display:block; height:46px; padding:15px; text-align:center;} #customer .quick > li > a:hover {background:#f5f5f5;} #customer .search_faq {margin-bottom:35px; padding:20px 90px; background:#f5f5f5; text-align:center;} #customer .search_faq > h3 {padding-bottom:15px; font-size:18px; font-weight:normal;} #customer .search_faq > form {position:relative; margin:0 auto; background:#fff;} #customer .search_faq > form > .form_input {height:50px; padding-right:60px;} #customer .search_faq > form > .btn {display:block; position:absolute; right:0; top:0; width:50px; height:50px; border:0; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/button/hd_search.png') no-repeat center/18px; text-indent:-9999px; cursor:pointer;} #customer .search_faq > form:after {display:inline-block; position:absolute; right:50px; top:50%; width:1px; height:16px; margin-top:-8px; background:#e0e0e0; content:'';} #customer .latest {width:48%; margin-bottom:40px;} #customer .latest > h3 {position:relative; padding-bottom:20px; color:#333; font-size:18px; font-weight:normal;} #customer .latest > ul {border-top:1px solid #e0e0e0;} #customer .latest > h3 .more {display:block; position:absolute; right:0; top:2px; width:27px; height:27px; border:1px solid #c3c3c3; text-indent:-9999px;} #customer .latest > h3 .more:before {position:absolute; left:50%; top:50%; width:13px; height:1px; margin:-1px 0 0 -6px; background:#666; content:'';} #customer .latest > h3 .more:after {position:absolute; left:50%; top:50%; width:1px; height:13px; margin:-7px 0 0 0; background:#666; content:'';} #customer .latest.faq {float:left;} #customer .latest.faq > ul > li > div {position:relative; padding:15px 15px 15px 50px; border-bottom:1px solid #e0e0e0;} #customer .latest.faq > ul > li > div .icon {display:inline-block; position:absolute; left:15px; top:13px; width:24px; height:24px; margin-right:5px; border-radius:50%; background:#777474; color:#fff; font-family:'arial'; text-align:center; line-height:24px;} #customer .latest.faq > ul > li > div.question {cursor:pointer;} #customer .latest.faq > ul > li > div.answer {display:none; background:#f5f5f5; word-break:break-all;} #customer .latest.faq > ul > li > div.answer > .icon {background:#ef6363;} #customer .latest.notice {float:right;} #customer .latest.notice > ul > li {position:relative; padding:15px; border-bottom:1px solid #e0e0e0;} #customer .latest.notice > ul > li > span {position:absolute; right:15px; top:15px;} #customer .info {display:table; clear:both; width:100%; border:1px solid #dcdcdc;} #customer .info > .box {display:table-cell; position:relative; width:50%; padding:50px 20px; vertical-align:middle;} #customer .info > .box:last-child {border-left:1px solid #dcdcdc;} #customer .info > .box > .title {position:absolute; right:50%; top:50%; margin-top:-24px; padding:0 48px 0 50px; background-repeat:no-repeat; background-position:left center; color:#000; font-size:24px;} #customer .info > .box > .content {padding-left:50%;} /* 회사소개 (/content/introduction.php) */ #history .full_bnr img {width:100%;} #history .logo_wrap {margin-top:140px; text-align:center;} #history .logo_wrap p {padding-top:40px; font-size:18px; line-height:34px; letter-spacing:-0.02rem;} #history .logo_wrap p strong {font-size:inherit; letter-spacing:-0.02rem;} #history .keyword {margin-top:140px;} #history .keyword .img img {max-width:100%;} #history .keyword .txt {margin-top:-100px; padding:0 112px;} #history .keyword .txt .inner {position:relative; z-index:1; background:#fff; text-align:center;} #history .keyword .txt .inner .step li {position:relative; padding-top:115px; font-size:60px; font-weight:700; letter-spacing:-0.02rem;} #history .keyword .txt .inner .step li:after {display:block; position:absolute; top:28px; left:50%; width:54px; height:34px; margin-left:-27px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/history_keyword_arrow.png') no-repeat center; content:'';} #history .keyword .txt .inner .step li:first-child:after {display:none} #history .keyword .txt .inner > p {padding-top:78px; font-size:20px; line-height:32px;} #history .slogan {margin-top:200px;} #history .slogan .txt_wrap {position:relative; padding-right:46.87%;} #history .slogan .txt_wrap .img img {width:100%;} #history .slogan .txt_wrap .txt {position:absolute; top:70px; right:0; z-index:5; width:50%;} #history .slogan .txt_wrap .txt h2 {font-size:70px; font-weight:700; line-height:82px;} #history .slogan .txt_wrap .txt p {padding-top:35px; font-size:18px; line-height:34px; letter-spacing:-0.02rem;} #history .slogan .wrap_inner2 {margin-top:-90px; text-align:right;} #history .chronicle {margin-top:280px;} #history .chronicle .title_wrap {position:relative; padding-bottom:80px; text-align:center;} #history .chronicle .title_wrap:after {display:block; position:absolute; top:-72px; left:50%; z-index:1; color:#f7f7f7; font-size:150px; font-weight:700; letter-spacing:-0.02rem; line-height:1; content:'History'; -ms-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0);} #history .chronicle .title_wrap p {position:relative; z-index:5; padding-bottom:10px; font-size:30px; letter-spacing:-0.02rem;} #history .chronicle .title_wrap h2 {position:relative; z-index:5; font-size:54px; font-weight:700; letter-spacing:-0.02rem; line-height:50px; } #history .chronicle .year_box {padding-bottom:40px;} #history .chronicle .year_box > p {padding-bottom:24px; color:#0971ce; font-size:60px; font-weight:700; text-align:center; letter-spacing:-0.02rem; line-height:1;} #history .chronicle .year_box > ul {position:relative;} #history .chronicle .year_box > ul:after {display:block; position:absolute; top:0; left:50%; width:1px; height:10px; background:#fff; content:'';} #history .chronicle .year_box > ul li {padding-left:50%; text-align:left;} #history .chronicle .year_box > ul li .txt {position:relative; padding-left:60px; padding-bottom:10px; border-left:1px solid #1a1a1a; font-size:18px; letter-spacing:-0.02rem; line-height:30px;} #history .chronicle .year_box > ul li .txt.blod {font-weight:700;} #history .chronicle .year_box > ul li .txt:after {display:block; position:absolute; top:10px; left:-8px; width:15px; height:15px; border:2px solid #e5e5e5; border-radius:50%; background:#fff; content:''; transition:all .5s ease;} #history .chronicle .year_box > ul li .txt strong {display:block; color:#d6d6d6; font-size:34px; font-weight:700; letter-spacing:-0.02rem; line-height:1; transition:all .5s ease;} #history .chronicle .year_box > ul li:nth-child(2n) {padding-left:0; padding-right:calc(50% - 1px); text-align:right;} #history .chronicle .year_box > ul li:nth-child(2n) .txt {padding-left:0; padding-right:60px; border:none; border-right:1px solid #1a1a1a;} #history .chronicle .year_box > ul li:nth-child(2n) .txt:after {left:auto; right:-8px;} #history .chronicle .year_box.now > ul li .txt:after, #history .chronicle .year_box.active > ul li .txt:after {border:2px solid #1a1a1a;} #history .chronicle .year_box.now > ul li .txt strong, #history .chronicle .year_box.active > ul li .txt strong {color:#0971ce;} #history .chronicle .toggle_year {display:none;} #history .chronicle .more_year {padding:40px 0 70px; text-align:center;} #history .chronicle .more_year a {display:inline-block; padding-right:24px; border-bottom:3px solid #1a1a1a; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/history_year_open.png') no-repeat right center; font-size:20px; font-weight:500; letter-spacing:-0.03rem; line-height:1.4;} #history .chronicle .more_year a.active {background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/history_year_close.png');} #history .competition {margin-top:140px; background:#f7f7f7; padding:140px 0 70px; text-align:center;} #history .competition .inner {width:900px; margin:0 auto;} #history .competition h2 {padding-bottom:90px; font-size:50px; font-weight:700; letter-spacing:-0.02rem; line-height:48px;} #history .competition ul {font-size:0;} #history .competition ul li {display:inline-block; width:50%; margin-bottom:65px; font-size:0; padding-left:40px; text-align:left;} #history .competition ul li .icon {display:inline-block; width:67px; vertical-align:middle;} #history .competition ul li .txt {display:inline-block; width:calc(100% - 67px); padding-left:30px; font-size:24px; letter-spacing:-0.03rem; line-height:36px; vertical-align:middle;} #history .competition ul li .txt strong {font-size:inherit; font-weight:700;} #history .patent {margin-top:140px;} #history .patent h2 {padding-bottom:70px; font-size:50px; font-weight:700; text-align:center; letter-spacing:-0.02rem; line-height:1;} #history .patent p a {padding:70px; font-size:30px; font-weight:700; text-align:center; letter-spacing:-0.02rem; line-height:1;display:block;} #history .patent .list {padding-left:1px; font-size:0; text-align:left;} #history .patent .list > li {display:inline-block; width:calc(100%/4 + 1px); margin-left:-1px; margin-bottom:-1px; border:1px solid #e6e6e6; text-align:center;} #history .patent .list > li .img {display:table; width:100%; height:200px;} #history .patent .list > li .img span {display:table-cell; vertical-align:middle;} #history .patent .list > li .img span img {max-width:100%; max-height:100%;} #history .patent .list > li .txt {display:table; width:100%; height:130px; background:#f7f7f7;} #history .patent .list > li .txt p {display:table-cell; font-size:18px; letter-spacing:-0.02rem; line-height:30px; vertical-align:middle;} /* 브랜드 소개 (/content/brand.php) */ #brand .full_bnr img {width:100%;} #brand .meaning {margin-top:140px;} #brand .meaning .logo_motion {position:relative; width:560px; margin:0 auto;} #brand .meaning .logo_motion .after {font-size:0; text-align:center;} #brand .meaning .logo_motion .after span {display:inline-block; color:#e5e5e5; font-size:100px; font-weight:700; line-height:135px; transition:all 2s ease;} #brand .meaning .logo_motion .after span.left {margin-right:90px;} #brand .meaning .logo_motion .after span.right {margin-left:90px;} #brand .meaning .logo_motion .before {position:absolute; top:0; left:50%; margin-left:-237.5px; opacity:0; transition:all 2s ease;} #brand .meaning .logo_motion .after.active span {margin:0; opacity:0;} #brand .meaning .logo_motion .before.active {opacity:1;} #brand .meaning .text_img {margin-top:130px; text-align:center;} #brand .meaning .text_img p {padding-bottom:35px; font-size:20px; letter-spacing:-0.02rem; line-height:34px;} #brand .meaning .text_img p strong {font-size:inherit;} #brand .meaning .text_img p span {color:#0971ce; font:inherit;} #brand .meaning .text_img p img {vertical-align:middle;} #brand .meaning .text_img .reveal-holder {margin-top:40px;} #brand .step_info {overflow:hidden; margin-top:200px;} #brand .step_info .logo_motion {position:relative;} #brand .step_info .logo_motion .after {font-size:0; text-align:center;} #brand .step_info .logo_motion .after span {display:inline-block; transition:all 2s ease;} #brand .step_info .logo_motion .after span.left {margin-right:75px;} #brand .step_info .logo_motion .after span.right {margin-left:75px;} #brand .step_info .logo_motion .after span.center {position:absolute; top:0; right:50%; margin-right:-34px;} #brand .step_info .logo_motion .after.active span {margin:0 -67px; opacity:1;} #brand .step_info .logo_motion .after.active span.center {margin-right:-350px; opacity:0;} #brand .step_info .step {margin-top:200px; font-size:0; text-align:center;} #brand .step_info .step li {display:inline-block; margin:0 -9px; vertical-align:middle;} #brand .step_info .step li .circle {display:table; width:220px; height:220px; border-radius:50%; background:rgba(9,113,206,.7);} #brand .step_info .step li:nth-child(2n) .circle {background:rgba(9,113,206,.3);} #brand .step_info .step li .circle p {display:table-cell; color:#fff; font-size:23px; letter-spacing:-0.07rem; line-height:32px; vertical-align:middle;} #brand .step_info .step li .circle p span {display:block; padding-bottom:4px; color:inherit; font-size:26px; font-weight:700; letter-spacing:-0.03rem;} #brand .design {margin-top:180px; text-align:center;} #brand .design h2 {padding-bottom:42px; font-size:50px; font-weight:500;} #brand .design .img_wrap {font-size:0; padding-left:108px;} #brand .design .img_wrap .img {display:inline-block; vertical-align:middle;} #brand .design .img_wrap .text {display:inline-block; margin-left:-40px; vertical-align:middle;} #brand .design .img_wrap .text ul {text-align:left;} #brand .design .img_wrap .text ul li {font-size:18px; font-weight:500; letter-spacing:-0.02rem;} #brand .design .img_wrap .text ul li + li {margin-top:40px;} #brand .design .img_wrap .text ul li strong {display:block; padding-bottom:10px; color:#d6d6d6; font-size:36px; font-weight:700; letter-spacing:-0.02rem; line-height:1; transition:all .4s ease;} #brand .design .img_wrap .text ul li strong.active {color:#0971ce;} #brand .museum {overflow:hidden; margin-top:175px; text-align:center;} #brand .museum .wrap_inner {position:relative;} #brand .museum h2 {padding-bottom:70px; font-size:50px; font-weight:500;} #brand .museum .museum_slide {overflow:hidden;} #brand .museum .museum_slide .slick-list {width:108.3%;} #brand .museum .museum_slide .slick-slide {margin-right:20px;} #brand .museum .museum_slide .slick-slide img {width:100%;} #brand .museum .museum_arrow {display:block; position:absolute; top:50%; z-index:10; width:16px; height:28px; margin-top:-14px; background:no-repeat center; color:transparent; font-size:0; cursor:pointer;} #brand .museum .museum_prev {left:-50px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/museum_slide_prev.png');} #brand .museum .museum_next {right:-50px; background-image:url('https://www.pureal.co.kr/_skin/pureal_251201/img/etc/museum_slide_next.png');} #brand .bi {margin-top:140px; padding:120px 0 160px; background:#f8f8f8; text-align:center;} #brand .bi h2 {padding-bottom:47px; font-size:50px; font-weight:500;} #brand .bi .guideline {margin-top:35px;} #brand .bi .guideline .box {margin-top:95px;} #brand .bi .guideline .box > h3 {padding-bottom:10px; font-size:30px; font-weight:700;} #brand .bi .guideline .box > p {font-size:18px; letter-spacing:-0.02rem; line-height:30px;} #brand .bi .guideline .box_bi p {padding-bottom:42px;} #brand .bi .guideline .box_bi ul {margin-left:-20px; font-size:0;} #brand .bi .guideline .box_bi ul li {display:inline-block; padding-left:20px;} #brand .bi .guideline .box_bi ul li span {display:block; padding-top:15px; font-size:18px; font-weight:500; letter-spacing:-0.02rem;} #brand .bi .guideline .box_color .sec {margin-top:65px;} #brand .bi .guideline .box_color .img {padding-top:33px;} #brand .bi .guideline .box_color .img span {display:block; padding-top:15px; font-size:18px; font-weight:500; letter-spacing:-0.02rem;} #brand .bi .guideline .box_application h3 {padding-bottom:30px;} /* 브랜드 소개, 회사소개 모션 */ .reveal-holder {position:relative; display:inline-block; overflow:hidden;} .reveal-block {position:absolute; top:0; width:100%; height:101%; background:#fff;} .reveal-block::before {position:absolute; content:''; top:0; left:0; right:0; bottom:0; background:#992533; transition-property:transform; transition-duration:0.4s;} .reveal-block.brand::before {background:#0971ce;} .reveal-block.right::before {transform:scaleX(0); transform-origin:0% 100%;} .reveal-block.right.aos-animate::before {transform:scaleX(1);} .reveal-block.left::before {transform:scaleX(0); transform-origin:100% 0%;} .reveal-block.left.aos-animate::before {transform:scaleX(1);} [data-aos="reveal-right"] {transform:scaleX(1); transform-origin:0% 100%; transition-property:transform; transition-delay:0.4s;} [data-aos="reveal-right"].aos-animate {transform:scaleX(0);} [data-aos="reveal-left"] {transform:scaleX(1); transform-origin:100% 0%; transition-property:transform; transition-delay:0.4s;} [data-aos="reveal-left"].aos-animate {transform:scaleX(0);} /* [리뉴얼 251201] 브랜드 스토리 (/content/brandstory.php) */ #brand_story {overflow:hidden;} #brand_story .inner {width:100%; max-width:1260px; margin:0 auto;} #brand_story * {font-family:'Pretendard';} #brand_story .text {padding-top:100px; padding-bottom:220px; text-align:center;} #brand_story .text p + p {padding-top:60px;} #brand_story p.sub {color:#373737; font-size:37px; letter-spacing:-0.04rem; line-height:1.6;} #brand_story .visual {overflow:hidden; position:relative;} #brand_story .visual img {display:block; width:100%; height:auto;} #brand_story .visual .logo {display:block; width:180px; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} #brand_story .simple {padding-top:280px; } #brand_story .simple h2 {color:#395077; font-size:90px; font-weight:700; letter-spacing:-0.025rem; line-height:1.2;} #brand_story .simple h3 {padding-top:70px; color:#373737; font-size:45px; font-weight:400; letter-spacing:-0.04rem;} #brand_story .simple .img {margin-top:100px;} #brand_story .simple .img img {display:block; width:100%; height:auto;} #brand_story .words .box_wrap {width:100%; max-width:1140px; padding:210px 50px; margin:0 auto; /* background-color:#f0f0f0; */ background:linear-gradient( 152deg, rgba(243, 243, 242, 1) 0%, rgba(229, 229, 228, 1) 100%); text-align:center;} #brand_story .words .box h3 {color:#cbcbcb; font-size:60px; font-weight:700; letter-spacing:-0.025rem;} #brand_story .words .box .word_slide_wrap {display:inline-block; position:relative; width:340px; vertical-align:middle;} #brand_story .words .box .word_slide_wrap::before {content:'('; position:absolute; top:0; right:100%; color:#373737; font-size:60px; font-style:italic;} #brand_story .words .box .word_slide_wrap::after {content:')'; position:absolute; top:0; right:-5px; color:#373737; font-size:60px; font-style:italic;} #brand_story .words .box .word_slide {height:107px;} #brand_story .words .box .word_slide ul li {height:107px; color:#395077; font-size:67px; font-weight:700;} #brand_story .words .box strong {display:inline-block; margin-left:15px; color:#373737; font-size:67px; font-weight:700; letter-spacing:-0.025em; vertical-align:middle;} #brand_story .words .box p {padding-top:45px; font-size:30px; line-height:1.5;} #brand_story .words .box + .box {position:relative; margin-top:420px;} #brand_story .words .box + .box::before {content:''; position:absolute; top:-300px; width:5px; height:180px; background-color:#cbcbcb;} #brand_story .sec_left {padding-top:150px;} #brand_story .sec_left .img {padding-right:17%;} #brand_story .sec_left .img img {display:block; width:100%;} #brand_story .sec_left p.sub {font-size:30px;} #brand_story .iframe {position:relative; overflow:hidden; width:100%; height:0; padding-bottom:56.26%;} #brand_story .iframe iframe {display:block; position:absolute; top:0; left:0; width:100%; height:100%;} #brand_story .sec_right {position:relative; padding-top:290px;} #brand_story .sec_right::before {content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:calc(100% - 210px); background-color:#f2f2f2;} #brand_story .sec_right h3 {color:#373737; font-size:60px; letter-spacing:-0.025rem; line-height:1.5;} #brand_story .sec_right p {padding-top:45px; color:#373737; font-size:30px; letter-spacing:-0.04rem; line-height:1.45;} #brand_story .sec_right .img {margin-top:100px;} #brand_story .sec_right .img img {display:block; width:calc(100% + 330px);} #brand_story .sec_sbnr {padding-top:150px;} #brand_story .sec_sbnr ul li {display:flex;} #brand_story .sec_sbnr ul li + li {padding-top:90px;} #brand_story .sec_sbnr ul li .img {flex-shrink:0; width:570px;} #brand_story .sec_sbnr ul li .img img {display:block; width:100%; height:auto;} #brand_story .sec_sbnr ul li .info {display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; padding:0 40px 0 60px;} #brand_story .sec_sbnr ul li .info span {color:#373737; font-size:23px; font-weight:500; letter-spacing:-0.025rem;} #brand_story .sec_sbnr ul li .info h3 {padding-top:4px; color:#373737; font-size:37px; letter-spacing:-0.025rem; line-height:1.45;} #brand_story .sec_sbnr ul li .info p {padding-top:30px; color:#373737; font-size:20px; letter-spacing:-0.04rem; line-height:1.5;} #brand_story .sec_sbnr ul li:nth-child(2) {flex-direction:row-reverse;} #brand_story .awards {padding:280px 0 100px;} #brand_story .awards h2 {color:#373737; font-size:60px; font-weight:500; letter-spacing:-0.05rem;} #brand_story .awards .awd_slide {padding-top:90px;} #brand_story .awards .awd_slide ul {transition-timing-function:linear;} #brand_story .awards .awd_slide ul li {width:165px;} #brand_story .awards .awd_slide ul li img {display:block; width:100%; height:auto;} #brand_story .awards .btn {display:block; width:270px; margin:160px auto 0; padding:11px; border:1px solid #373737; color:#373737; font-size:22px; font-weight:500; letter-spacing:-0.05rem; text-align:center;} /* 마이페이지 나의 제품 관리 (/content/product_registration.php) */ #prd_registration h3.title {position:relative;} #prd_registration h3.title a {display:inline-block; position:absolute; bottom:19px; right:0; width:120px; padding:7px 0; border-radius:25px; background:#1a1a1a; color:#fff; font-size:14px; font-weight:400; text-align:center; letter-spacing:-0.02rem;} #prd_registration .tbl_col th {padding:11px 0;} #prd_registration .tbl_col td {padding:12px 0;} #prd_registration .tbl_col td .state {position:relative; color:#999; font-size:16px; font-weight:500; letter-spacing:-0.02rem;} #prd_registration .tbl_col td .state.after {color:#0971ce;} #prd_registration .tbl_col td .state .info {display:inline-block; width:13px; height:13px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/mypage/prd_registration_i.png') no-repeat center;} #prd_registration .tbl_col td .state .info_hover {display:none; position:absolute; top:28px; left:0; z-index:1; width:386px; padding:17px; border:1px solid #e6e6e6; border-radius:10px; background:#f7f7f7; color:#999; font-size:14px; font-weight:400; text-align:left; letter-spacing:-0.02rem; line-height:22px;} #prd_registration .tbl_col td .state:hover .info_hover {display:block;} #prd_registration .tbl_col td a {border-bottom:1px solid #000; font-size:14px;} #prd_registration .paging {margin-top:40px;} #registration_layer {display:none; position:fixed; top:0; left:0; z-index:60; width:100%; height:100%; background:rgba(0,0,0,.6);} #registration_layer .layer_inner {position:absolute; top:50%; left:50%; width:760px; height:526px; margin:-263px 0 0 -380px; padding:0 88px; border-radius:27px; background:#fff; text-align:center;} #registration_layer .layer_inner h3 {padding:61px 0 24px; font-size:30px; font-weight:700; letter-spacing:-0.02rem;} #registration_layer .layer_inner .close {display:block; position:absolute; top:0; right:0; width:78px; height:78px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/mypage/registration_layer_close.png') no-repeat center; color:transparent; font-size:0; cursor:pointer;} #registration_layer .layer_inner table {width:100%;} #registration_layer .layer_inner table th {padding:15px 0; font-size:20px; font-weight:400; text-align:left; vertical-align:middle; letter-spacing:-0.02rem;} #registration_layer .layer_inner table td {position:relative; padding:15px 0; text-align:left; vertical-align:middle;} #registration_layer .layer_inner table td select {height:50px; padding:0 50px 0 20px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/common/select_arrow.png') no-repeat right 20px center; color:#999; font-size:16px; letter-spacing:-0.02rem; -webkit-appearance:none; appearance:none;} #registration_layer .layer_inner table td .form_input {height:50px; padding:0 20px; font-size:16px; letter-spacing:-0.02rem;} #registration_layer .layer_inner table td .warning {position:absolute; top:-10px; left:10px; color:#0971ce; font-size:14px; letter-spacing:-0.02rem;} #registration_layer .layer_inner table td .warning_line {border:2px solid #0971ce;} #registration_layer .layer_inner .msg {margin:12px 0 0; padding-left:18px; background:url('https://www.pureal.co.kr/_skin/pureal_251201/img/mypage/registration_layer_msg.png') no-repeat left center; color:#999; font-size:14px; text-align:left; letter-spacing:-0.02rem;} #registration_layer .layer_inner .btn {width:370px; margin:55px auto 0;} #registration_layer .layer_inner .btn .box_btn * {padding:17px 0; font-size:20px;} /*-----------------------------------------------------------------*/ /* 5. ETC /*-----------------------------------------------------------------*/ /* 댓글 - 리스트(게시판, 상품리뷰) */ .list_comment {position:relative; text-align:left;} .list_comment > ul {border:1px solid #e5e5e5; border-top:0;} .list_comment > ul > li {clear:both; overflow:hidden; padding:15px 30px; border-top:1px solid #e5e5e5; color:#474645; word-break:break-all; word-wrap:break-word;} .list_comment > ul > li .name {float:left; width:12%;} .list_comment > ul > li .name a {color:inherit; font-size:inherit;} .list_comment > ul > li .content {float:left; width:73%;} .list_comment > ul > li .date {float:right; width:15%; text-align:right;} .list_comment > ul > li .date span {padding-right:5px; color:#888;} .list_comment > ul > li .date img {margin-top:3px;} /* 댓글 - 쓰기(게시판, 상품리뷰) */ .write_comment {overflow:hidden; margin-top:-1px; padding:20px; border:1px solid #e5e5e5; background:#fff;} .write_comment .user {overflow:auto; padding-bottom:10px; text-align:left;} .write_comment .user span {float:left; width:50%;} .write_comment .user span.name {padding-right:5px;} .write_comment .user span.pw {padding-left:5px;} .write_comment .inputbox {position:relative; padding-right:70px; border:1px solid #e2e2e2; background:#fafafa; text-align:left;} .write_comment .inputbox textarea.form_input {height:60px; border:0; border-right:1px solid #e2e2e2;} .write_comment .inputbox .btn_comment {display:inline-block; position:absolute; right:0; top:0; width:70px; height:100%; text-align:center; border:0; background:#fafafa; font-weight:bold; line-height:100%; cursor:pointer;} /* 게시판 - 상품연동 - 검색 */ #product_search_frm {background:#fff;} #product_search_frm .frame {min-height:600px; margin:10px;} #product_search_frm .frame .search {padding-bottom:10px;} #product_search_frm .frame .btn {padding:15px 0 10px 0; text-align:center;} /* 게시판 - 상품연동 - 쓰기 */ .related_prd_write {padding:20px 0;} .related_prd_write > ul {margin:20px 0;} /* 게시판 - 상품연동 - 열람 */ .related_prd_view {border-bottom:1px solid #e0e0e0;} .related_prd_view .title {display:inline-block; position:relative; padding:2px 10px; border-radius:20px; background-color:#333; color:#fff; font-size:11px; vertical-align:top;}