/*-----------------------------------------------------------------*/ /* CSS Table of Contents /*-----------------------------------------------------------------*/ /* 1. Reset 2. Global 2-1. table 2-2. button 2-3. product 3. Layout 3-1. wrapper 3-2. header 3-3. content 3-4. footer 4. Page 4-1. 메인 4-2. 상점 4-3. 회원 4-4. 마이페이지 4-5. 추가페이지 5. ETC /*-----------------------------------------------------------------*/ /* 1. Reset /*-----------------------------------------------------------------*/ /* webfont - Poppins */ @font-face { font-family:'Poppins'; font-weight:300; src:url('/asset/img/etc/Poppins-Light.eot'); src:local(※), url('/asset/img/etc/Poppins-Light.woff') format('woff'); } @font-face { font-family:'Poppins'; font-weight:400; src:url('/asset/img/etc/Poppins-Regular.eot'); src:local(※), url('/asset/img/etc/Poppins-Regular.woff') format('woff'); } @font-face { font-family:'Poppins'; font-weight:500; src:url('/asset/img/etc/Poppins-Medium.eot'); src:local(※), url('/asset/img/etc/Poppins-Medium.woff') format('woff'); } @font-face { font-family:'Poppins'; font-weight:600; src:url('/asset/img/etc/Poppins-SemiBold.eot'); src:local(※), url('/asset/img/etc/Poppins-SemiBold.woff') format('woff'); } @font-face { font-family:'Poppins'; font-weight:700; src:url('/asset/img/etc/Poppins-Bold.eot'); src:local(※), url('/asset/img/etc/Poppins-Bold.woff') format('woff'); } 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:#333; font-family:'Poppins', 'メイリオ', Meiryo, sans-serif; font-size:12px; 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;} *, *: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:100px 0 !important; 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:#ff8e77 !important;} .p_color2 {color:#8669FB !important;} .p_cursor {cursor:pointer;} .i_info {display:inline-block; position:relative; top:4px; width:16px; height:16px; background:url('/asset/img/common/icon_info.png') no-repeat center; font-style:normal; font-weight:normal; line-height:1;} /* input 기본 스타일 */ input[type="checkbox"] {-webkit-appearance:none; appearance:none; display:inline-block; *display:inline; *zoom:1; overflow:hidden; width:17px; height:17px; margin:0; padding:0; background:url('/asset/img/common/checkbox.gif') no-repeat center #fff;} input[type="checkbox"]:checked {background-image:url('/asset/img/common/checkbox_checked.gif');} input[type="radio"] {-webkit-appearance:none; appearance:none; display:inline-block; *display:inline; *zoom:1; overflow:hidden; width:17px; height:17px; margin:0; padding:0; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:url('/asset/img/common/radio.png') no-repeat center #fff;} input[type="radio"]:checked {background-image:url('/asset/img/common/radio_checked.png');} .form_input {height:34px; padding:4px 10px; border:1px solid #c5c5c5; background:#fff; color:#888; font-family:'Poppins', Malgun Gothic, '맑은 고딕', 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:#888; font-family:'Poppins', Malgun Gothic, '맑은 고딕', Dotum, '돋움', sans-serif;} .form_input::-webkit-input-placeholder {color:#888; font-family:'Poppins', Malgun Gothic, '맑은 고딕', Dotum, '돋움', sans-serif;} .form_input::-moz-placeholder {color:#888; font-family:'Poppins', Malgun Gothic, '맑은 고딕', 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:34px; padding:4px 6px; border:1px solid #dcdcdc; background:#fff; color:#888; font:inherit;} select:focus {border-color:#000; outline:none !important;} /* 서브 페이지 타이틀 */ h2.subtitle {padding:80px 0 50px; color:#282828; font-size:24px; font-weight:normal; text-align:center;} h1.subtitle {padding:80px 0 50px; color:#282828; font-size:24px; font-weight:normal; text-align:center;} /* 페이지 내 타이틀 */ h3.title.first {padding-top:0;} h3.title {position:relative; padding:60px 0 20px; color:#404040; font-size:18px; font-weight:400;} h3.title > a {display:inline-block; *display:inline; *zoom:1; position:absolute; right:0; top:65px; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px;} h1.title.first {padding-top:0;} h1.title {position:relative; padding:60px 0 20px; color:#404040; font-size:18px; font-weight:400;} h1.title > a {display:inline-block; *display:inline; *zoom:1; position:absolute; right:0; top:65px; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px;} /* 상품리스트 수량,정렬선택 */ .total_sort {clear:both; height:56px;} .total_sort .total {float:left; color:#a5a5a5; font-size:14px; line-height:56px;} .total_sort .total strong {color:#333; font-size:20px; font-weight:400;} .total_sort .sort {float:right; font-size:0;} .total_sort .sort > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} .total_sort .sort .except {} .total_sort .sort .except label {display:inline-block; *display:inline; *zoom:1; padding-left:3px; font-size:14px; vertical-align:middle;} .total_sort .sort select {height:56px; padding:0 10px; border:0; color:#a5a5a5; font-size:14px;} /* 페이징 */ .paging {margin-top:34px; font-size:0; text-align:center;} .paging > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} .paging > a {width:10px; height:10px; padding:0 11px; background-repeat:no-repeat; background-position:center; color:transparent; font-size:0; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .paging > a.first {background-image:url('/asset/img/common/paging_first.png');} .paging > a.last {background-image:url('/asset/img/common/paging_last.png');} .paging > a.prev {background-image:url('/asset/img/common/paging_prev.png');} .paging > a.next {background-image:url('/asset/img/common/paging_next.png');} .paging ol {padding:0 4px; font-size:0;} .paging ol li {display:inline-block; *display:inline; *zoom:1; padding:0 7px; vertical-align:middle;} .paging ol li a {display:inline-block; *display:inline; *zoom:1; padding:2px 6px; color:#888; font-size:13px; font-weight:300;} .paging ol li a.active {position:relative; color:#333; font-weight:400;} .paging ol li a.active:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:0px; background:#333; content:'';} /* 박스 스타일 - 수량 */ .box_qty {display:inline-block; position:relative; width:80px; height:30px; border:1px solid #e9e9e9; text-align:center; vertical-align:top;} .box_qty .form_input {width:78px; height:28px; padding:0 24px; border:0; color:#333; font-size:13px; line-height:28px; text-align:center;} .box_qty a {display:block; position:absolute; top:0; width:24px; height:28px; background-repeat:no-repeat; background-position:center;} .box_qty a.ea_down {left:0; background-image:url('/asset/img/shop/ea_down.png');} .box_qty a.ea_up {right:0; background-image:url('/asset/img/shop/ea_up.png');} /*-----------------------------------------------------------------*/ /* 2-1. table /*-----------------------------------------------------------------*/ /* 테이블 스타일 - 가로 */ .tbl_col {table-layout:fixed; clear:both; width:100%; border-collapse:collapse;} .tbl_col caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_col > thead > tr > th {padding:12px 0 16px; border-top:1px solid #333; border-bottom:1px solid #e9e9e9; color:#404040; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px; font-weight:bold; text-align:center; vertical-align:middle;} .tbl_col > thead > tr > th.tal {padding-left:79px !important;} .tbl_col > tbody > tr > td, .tbl_col > tbody > tr > td * {color:#404040; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} .tbl_col > tbody > tr > td {padding:13px 0 8px; border-bottom:1px solid #e9e9e9; text-align:center; vertical-align:middle;} .tbl_col > tbody > tr > td.tal {padding-left:19px !important;} .tbl_col > tbody > tr > td.tar {padding-right:20px !important;} .tbl_col > tbody > tr > td.no, .tbl_col > tbody > tr > td.date {color:#888 !important; font-family:'Poppins' !important; font-size:13px !important; font-weight:300 !important;} .tbl_col > tbody > tr > td.date2 {color:#888; font-family:'Poppins';} .tbl_col > tbody > tr > td.reply {color:#d8594a; font-size:13px;} .tbl_col > tbody > tr > td.used {color:#de3838;} .tbl_col > tbody > tr > td.used.tar {padding-right:58px !important;} .tbl_col > tbody > tr > td.save.tar {padding-right:48px !important;} .tbl_col > tbody > tr > td img {max-width:100%; height:auto; vertical-align:middle;} .tbl_col > tbody > tr > td.img img {width:100px; height:auto;} .tbl_col > tbody > tr > td.subject img {vertical-align:middle; margin-top: -1px;} .tbl_col > tbody > tr > td.order_number a {color:#888;} .tbl_col > tbody > tr > td.subject a {color:#2f2f2f;} .tbl_col > tbody > tr > td.stat a {color:inherit;} /* 테이블 스타일 - 가로 - 장바구니 */ .tbl_col.prd > tbody > tr > th *, .tbl_col.prd > tbody > tr > td * {color:inherit; font:inherit;} .tbl_col.prd > thead > tr > th {padding:16px 0 15px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; color:#333;} .tbl_col.prd > tbody > tr > td {padding:20px 0; border-bottom:1px solid #dbdbdb;} .tbl_col.prd > tbody > tr > td img {vertical-align:middle;} .tbl_col.prd > tbody > tr > td.tal {padding-left:20px !important;} .tbl_col.prd > tbody > tr > td.price del {color:#a9a9a9;} .tbl_col.prd > tbody > tr > td.price p {} .tbl_col.prd > tbody > tr > td.delete_wish a {display:inline-block; position:relative; margin:0 2px;} .tbl_col.prd > tbody > tr > td.img img {width:110px; height:auto;} .tbl_col.prd > tbody > tr > td .img {text-align:left;} .tbl_col.prd > tbody > tr > td .name a {color:#333;} .tbl_col.prd > tbody > tr > td .opt {color:#a9a9a9;} .tbl_col.prd > tbody > tr > td .opt_chg {padding-top:25px;} .tbl_col.prd > tbody > tr > td .opt_chg .box_btn > * {width:80px; height:30px; padding:0; font-size:12px; line-height:28px;} .tbl_col.prd > tbody > tr > td .opt_chg .soldout {display:inline-block; color:#d75a4a; font-size:12px; letter-spacing:-0.05em; text-decoration:underline;} .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 .check input {margin:0;} /* 테이블 스타일 - 가로 - 디테일 여성의류사이즈변환차트 */ .tbl_col.change_chart > thead > tr > th {border-left:1px solid #e5e5e5; background:#f7f7f7; color:#2f2f2f; font-size:13px; font-weight:500;} .tbl_col.change_chart > thead > tr > th:first-child {border-left:0;} .tbl_col.change_chart > tbody > tr > td, .tbl_col.change_chart > tbody > tr > td * {color:#888; font-family:'Poppins', Malgun Gothic, '맑은 고딕'; font-size:13px;} .tbl_col.change_chart > tbody > tr > td.size, .tbl_col.change_chart > tbody > tr > td.size * {color:#2f2f2f;} .tbl_col.change_chart > tbody > tr > td.size.kor, .tbl_col.change_chart > tbody > tr > td.size.kor * {font-family:Malgun Gothic, '맑은 고딕';} .tbl_col.change_chart > tbody > tr > td {border-left:1px solid #e5e5e5;} .tbl_col.change_chart > tbody > tr > td:first-child {border-left:0;} /* 테이블 스타일 - 가로 - 디테일 실시간구매재고안내 */ .tbl_col.stock > thead > tr > th {color:#2f2f2f; font-size:13px;} .tbl_col.stock > thead > tr > th.tal {padding-left:40px !important;} .tbl_col.stock > thead > tr > th.eng {font-weight:400;} .tbl_col.stock > tbody > tr > td, .tbl_col.stock > tbody > tr > td * {color:#333; font-size:13px;} .tbl_col.stock > tbody > tr > td.tal {padding-left:10px !important;} /* 테이블 스타일 - 가로 - 디테일 상품문의 (shop_detail.html) */ .tbl_col.board td.qnarev_cnt {padding:24px 0 25px; text-align:left;} .tbl_col.board td.qnarev_cnt .contents {padding:0 120px;} .tbl_col.board td.qnarev_cnt .answer {margin-top:30px; padding-top:30px; border-top:1px solid #e0e0e0;} .tbl_col.board td.qnarev_cnt .btn {padding:30px 120px 0;} /* 테이블 스타일 - 가로 - 주문완료 */ .tbl_col.finish > tbody > tr > td, .tbl_col.finish > tbody > tr > td * {color:#888;} .tbl_col.finish > tbody > tr > td {border-bottom:0;} .tbl_col.finish > tbody > tr > td.tal {padding-left:10px !important;} .tbl_col.finish > tbody > tr > td.tar {padding-right:0 !important;} .tbl_col.finish > tbody > tr > td .prc {color:#d0591f;} .tbl_col.finish > tbody > tr > td .prc span {color:inherit; font-size:18px; font-weight:700;} /* 테이블 스타일 - 가로 - 마이페이지 배송지 관리 */ .tbl_col.addr > tbody > tr.active > td.type {color:#ce5a1d;} .tbl_col.addr > tbody > tr.active > td.btn .del {display:none;} .tbl_col.addr > tbody > tr > td .box .name {font-weight:bold;} .tbl_col.addr > tbody > tr > td .box .tel, .tbl_col.addr > tbody > tr > td .box .tel * {font-family:'Poppins'; font-weight:300;} .tbl_col.addr > tbody > tr > td .box .tel span {position:relative; padding:0 2px 0 8px;} .tbl_col.addr > tbody > tr > td .box .tel span:after {display:block; position:absolute; left:0; top:0; color:#404040; font-size:14px; content:'/';} .tbl_col.addr > tbody > tr > td .box .tel span:first-child {padding-left:0;} .tbl_col.addr > tbody > tr > td .box .tel span:first-child:after {display:none;} .tbl_col.addr > tbody > tr > td .box .address p {color:#888; line-height:23px;} /* 테이블 스타일 - 가로 - 마이페이지 환불계좌 관리 */ .tbl_col.return > tbody > tr.active > td.type {color:#ce5a1d;} .tbl_col.return > tbody > tr.active > td.btn .del {display:none;} /* 테이블 스타일 - 가로 - 고객센터 입고지연상품, 미확인입금자 */ .tbl_col.cs > tbody > tr > td, .tbl_col.cs > tbody > tr > td * {font-family:Malgun Gothic, '맑은 고딕'; font-size:13px;} .tbl_col.cs > tbody > tr > td {padding:10px 0;} .tbl_col.cs > tbody > tr > td.tal {padding-left:10px !important;} .tbl_col.cs > tbody > tr > td.opt {color:#888;} .tbl_col.cs > tbody > tr > td.scheduled {color:#d8594a; font-family:'Poppins'; font-weight:300;} /* 테이블 스타일 - 가로 - 고객센터 faq 리스트 */ .tbl_col.faq > thead > tr > th {display:none;} .tbl_col.faq > tbody > tr:first-child > td {border-top:1px solid #e9e9e9;} .tbl_col.faq > tbody > tr > td.type {padding-left:7px !important;} .tbl_col.faq > tbody > tr > td.subject {padding-right:11px;} .tbl_col.faq > tbody > tr > td.subject a {display:block; padding-right:23px; background:url('/asset/img/common/arrow_bottom2.png') no-repeat right center;} .tbl_col.faq > tbody > tr > td.subject a.active {background-image:url('/asset/img/common/arrow_top2.png');} .tbl_col.faq .faqcnt td {padding:24px 0 25px;} .tbl_col.faq .faqcnt td .contents {color:#2f2f2f; font-size:13px; line-height:22px;} .tbl_col.faq .faqcnt td .btn {min-height:auto !important; margin-top:0 !important; padding:25px 0 5px !important;} .tbl_col.faq .faqcnt td .btn .box_btn {position:unset !important;} .tbl_col.faq .faqcnt td.tal {padding-left:158px !important;} /* 테이블 스타일 - 가로 - 주문서 */ .tbl_col.ord > tbody > tr > td {padding:0; color:#888;} .tbl_col.ord > tbody > tr > td a {color:#212121; font-size:14px;} .tbl_col.ord > tbody > tr > td.total_prc {color:#d0591f; font-weight:700;} /* 테이블 스타일 - 가로 - 주문서 쿠폰선택 */ .tbl_col.cpn > tbody > tr > td.tal {padding-left:10px !important;} /* 테이블 스타일 - 세로 */ .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 10px 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_row.size {margin-bottom:30px; border-top:1px solid #383838;} .tbl_row.size th {padding:20px 0 16px; border-bottom:1px solid #e9e9e9; background:#fbfbfb; font-size:13px; font-weight:700; text-align:center !important;} .tbl_row.size td {padding:18px 0 16px 20px; border-bottom:1px solid #e9e9e9; color:#888; font-size:14px;} /* 테이블 스타일 - 세로 - 상품상세설명 */ .tbl_row.det {border-top:1px solid #383838;} .tbl_row.det tr th {padding:16px 0; border:1px solid #e9e9e9; border-width:0 1px 1px 1px; background:#fbfbfb; font-size:14px; text-align:center;} .tbl_row.det tr th:first-of-type {border-left:0;} .tbl_row.det tr td {padding:16px 0 16px 26px; border:1px solid #e9e9e9; border-width:0 0 1px 1px; color:#888; font-size:14px;} .tbl_row.det tr td p {padding-left:18px; background:url('/asset/img/shop/icon_fabric.gif') no-repeat left center; color:#888; font-size:14px;} .tbl_row.det tr td p.active {background-image:url('/asset/img/shop/icon_fabric_checked.gif');} /* 테이블 스타일 - 세로 - 디테일 상품문의 */ .tbl_row.board tr th {padding:22px 0 22px 30px; color:#2f2f2f; font-size:13px; font-weight:700; vertical-align:top;} .tbl_row.board tr td {padding:10px 60px 10px 0;} .tbl_row.board tr td select {width:100%; height:35px;} .tbl_row.board tr td textarea.form_input {width:100%; height:470px; border:1px solid #dcdcdc;} /* 테이블 스타일 - 세로 - 쇼핑가이드 */ .tbl_row.guide {border-top:1px solid #e5e5e5;} .tbl_row.guide tr th {padding:35px 0; border-bottom:1px solid #e5e5e5; background:#f9f9f9; font-size:16px; text-align:center;} .tbl_row.guide tr td {padding:35px 0 35px 50px; border-bottom:1px solid #e5e5e5;} .tbl_row.guide tr td ul.paragraph {margin-top:31px;} .tbl_row.guide tr td ul li {position:relative; padding-left:16px; color:#888; font-size:14px; line-height:25px;} .tbl_row.guide tr td ul li:after {display:block; position:absolute; left:0; top:10px; width:3px; height:3px; background:white; content:'';} .tbl_row.guide tr td ul li strong {color:#333; font-size:inherit; font-weight:400;} .tbl_row.guide tr td p {margin-top:32px; padding-left:16px; font-size:14px;} /* 테이블 스타일 - 세로 - 마이페이지 주문상세 & 교환 반품 */ .tbl_col.ord_list {margin-top:50px;} .tbl_col.ord_list * {font-size:14px;} .tbl_col.ord_list caption {padding-bottom:10px; font-size:16px;} .tbl_col.ord_list > tbody > tr > td > select {min-width:70px;} .tbl_col.ord_list > tbody > tr > td.img img {width:80px; height:auto;} .tbl_col.ord_list > tbody > tr > td.name {padding-left:10px; text-align:left;} .tbl_col.ord_list > tbody > tr > td.name span {display:block; color:#a9a9a9;} .tbl_col.ord_list > tbody > tr > td.price > .nprice {display:block; color:#a9a9a9; text-decoration:line-through;} .tbl_col.ord_list > tbody > tr > td.opt select {width:115px; margin:2px 0;} /* 테이블 스타일 - 세로 - 마이페이지 주문상세 (mypage_order_detail.html) */ .tbl_row.ord_detail {margin-top:50px; border-top:1px solid #333;} .tbl_row.ord_detail.first {margin-top:0;} .tbl_row.ord_detail caption {position:relative; padding-bottom:10px; font-size:16px;} .tbl_row.ord_detail caption span {position:absolute; right:0; top:0; color:#888; font-size:13px; font-weight:normal;} .tbl_row.ord_detail > tbody > tr > th {font-size:13px; font-weight:bold; text-align:left;} .tbl_row.ord_detail > tbody > tr > td {padding-left:30px; color:#888; font-size:14px; text-align:left;} .tbl_row.ord_detail > tbody > tr > td.address .form_input {margin:2px 0;} .tbl_row.ord_detail > tbody > tr > td .form_input.name {width:274px;} .tbl_row.ord_detail > tbody > tr > td .form_input.tel {width:109px;} /* 테이블 스타일 - 세로 - 마이페이지 배송지&환불계좌 관리 */ .tbl_row.addr {border-top:1px solid #000;} .tbl_row.addr > tbody > tr > th, .tbl_row.addr > tbody > tr > th * {font-size:14px;} .tbl_row.addr > tbody > tr > th {padding:15px 0 15px 17px; border-bottom:1px solid #dbdbdb; background:#f7f7f7; text-align:left; vertical-align:top;} .tbl_row.addr > tbody > tr > td, .tbl_row.addr > tbody > tr > td * {font-size:14px;} .tbl_row.addr > tbody > tr > td {padding:15px 15px 15px 20px; border-bottom:1px solid #dbdbdb;} .tbl_row.addr > tbody > tr > td > div {font-size:0;} .tbl_row.addr > tbody > tr > td .form_input {height:35px; border:1px solid #dbdbdb; line-height:35px; vertical-align:middle;} .tbl_row.addr > tbody > tr > td .form_input.form_addrbrn {width:150px;} .tbl_row.addr > tbody > tr > td .form_input.form_name {width:257px;} .tbl_row.addr > tbody > tr > td .form_input.form_mobile {width:100px;} .tbl_row.addr > tbody > tr > td .form_input.form_email {width:183px;} .tbl_row.addr > tbody > tr > td .form_input.form_accoung {width:260px;} .tbl_row.addr > tbody > tr > td .bar {display:inline-block; *display:inline; *zoom:1; line-height:35px; vertical-align:middle;} .tbl_row.addr > tbody > tr > td .box_btn {margin-left:5px; vertical-align:middle;} .tbl_row.addr > tbody > tr > td.address > div {margin-top:7px;} .tbl_row.addr > tbody > tr > td.address > div:first-child {margin-top:0;} .tbl_row.addr > tbody > tr > td.mobile .bar {padding:0 4px; color:#dbdbdb;} .tbl_row.addr > tbody > tr > td.email .bar {padding:0 5px; color:#000; font-size:14px;} .tbl_row.addr > tbody > tr > td.email select {display:inline-block; *display:inline; *zoom:1; width:166px; height:35px; padding:0 10px; border:1px solid #dbdbdb; color:#000; font-size:14px; line-height:35px; vertical-align:middle;} .tbl_row.addr > tbody > tr > td.setting input[type="radio"] {margin:0;} .tbl_row.addr > tbody > tr > td.setting label {display:inline-block; *display:inline; *zoom:1; padding:0 40px 0 8px; vertical-align:middle;} /* 테이블 스타일 - 주문서, 주문상세조회 */ .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:10px 20px; border:1px solid #e0e0e0; border-width:0 1px 1px 0; font-size:14px; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_order td {padding:10px 20px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle;} .tbl_order td .check {display:inline-block; *display:inline; *zoom:1; margin-left:15px; line-height:35px; vertical-align:middle;} .tbl_order td .check label {color:#999; font-size:13px;} .tbl_order td .form_input {width:271px; height:35px; padding:0 10px; border:1px solid #dcdcdc; font-size:14px; line-height:35px; vertical-align:middle;} .tbl_order td .form_input.form_addr0 {width:120px;} .tbl_order td .msg {margin-top:14px; color:#999; font-size:13px;} .tbl_order td .own_mileage, .tbl_order td .own_deposit {color:#d53838; line-height:35px;} .tbl_order td .list_cpn li {padding:4px 0;} .tbl_order td .list_cpn li label {padding-left:8px; font-family:Malgun Gothic, '맑은 고딕'; color:#d0591f; font-size:14px; font-weight:700;} .tbl_order td .list_cpn li p {padding:8px 0 0 25px; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px;} .tbl_order td .addbtn {margin-bottom:10px;} .tbl_order td .radiobox {font-size:0;} .tbl_order td .radiobox label {display:inline-block; *display:inline; *zoom:1; padding:0 26px 0 5px; font-size:13px; vertical-align:middle;} .tbl_order td.coupon {position:relative; padding-right:130px;} .tbl_order td.coupon .more {position:absolute; right:0; top:158px; padding-right:15px; background:url('/asset/img/common/arrow_bottom3.png') no-repeat right center; text-align:right;} .tbl_order td.coupon .more span {position:relative; font-size:14px;} .tbl_order td.coupon .more span:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#333; content:'';} .tbl_order td.coupon .more.active {background-image:url('/asset/img/common/arrow_top3.png');} .tbl_order td.edit {line-height:30px;} .tbl_order td.address select {width:388px; height:35px; padding:0 10px; border:1px solid #dcdcdc; color:#888; font-size:14px;} /* 테이블 스타일 - 주문서 할인/혜택 */ .tbl_order.sale th {text-align:center;} .tbl_order.sale td > div {font-size:0;} .tbl_order.sale td > div > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} .tbl_order.sale td > div .count, .tbl_order.sale td > div .count * {font-family:Malgun Gothic, '맑은 고딕';} .tbl_order.sale td > div .count {color:#888; font-size:13px;} .tbl_order.sale td > div .count strong {font-size:14px; font-weight:700;} .tbl_order.sale td > div .apply {margin-left:20px;} .tbl_order.sale td > div .apply dl > * {display:inline-block; *display:inline; *zoom:1; font-size:13px; vertical-align:top;} .tbl_order.sale td > div .apply dl dt {color:#3e3e3e;} .tbl_order.sale td > div .apply dl dd {color:#888;} .tbl_order.sale td > div .box_input {margin-left:20px; color:#999; font-size:13px;} .tbl_order.sale td > div .box_input label {color:#999; font-size:13px; line-height:35px;} .tbl_order.sale td > div .box_input .form_input {width:130px; color:#999; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px; text-align:right;} .tbl_order.sale td > div .box_btn {margin-left:20px;} .tbl_order.sale td.milage > div .count, .tbl_order.sale td.emoney > div .count {width:130px;} .tbl_order.sale td.total_sale > div .count {margin-right:20px;} /* 테이블 스타일 - 주문서, 주문상세조회, 장바구니 */ .tbl_order2 {table-layout:fixed; width:100%; margin:0 auto;} .tbl_order2 caption {padding-bottom:13px; font-size:14px; font-weight:bold; text-align:left;} .tbl_order2 th {padding:3px 0; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_order2 td {padding:3px 0; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; text-align:right; vertical-align:middle;} .tbl_order2 td * {font:inherit;} .tbl_order2 .total th, .tbl_order2 .total td {padding:11px 0 26px;} .tbl_order2 .total td, .tbl_order2 .total td * {color:#cf591f; font-weight:bold;} /* 테이블 스타일 - 주문서 */ .tbl_order2.ord th {padding:8px 0;} .tbl_order2.ord td {padding:8px 0;} /* 테이블 스타일 - 주문완료 */ .tbl_finish {table-layout:fixed; width:100%;} .tbl_finish th, .tbl_finish td {padding:3px 0; color:#000; font-size:14px;} .tbl_finish th {padding-left:30px; font-weight:400;} .tbl_finish td {padding-right:40px; font-family:Malgun Gothic, '맑은 고딕'; font-weight:700;} /*-----------------------------------------------------------------*/ /* 2-2. button /*-----------------------------------------------------------------*/ /* 버튼스타일 - 기본 */ .box_btn {display:inline-block; text-align:center; vertical-align:top;} .box_btn > * {display:inline-block; margin:0; padding:8px 12px; border:1px solid #333; outline:none; background:#333; color:#fff !important; font-size:12px; font-family:'Poppins', Malgun Gothic, '맑은 고딕', 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:#333;} /* 버튼스타일 - 크기 */ .box_btn.small > * {padding:4px 8px;} .box_btn.large > * {padding:12px 16px; font-size:14px;} .box_btn.huge > * {padding:18px 20px; font-size:16px; font-weight:bold;} /* 버튼스타일 - 가로길이 */ .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.w95 > * {width:95px;} .box_btn.w100 > * {width:100px;} .box_btn.w110 > * {width:110px;} .box_btn.w115 > * {width:115px;} .box_btn.w125 > * {width:125px;} .box_btn.w130 > * {width:130px;} .box_btn.w135 > * {width:135px;} .box_btn.w136 > * {width:136px;} .box_btn.w144 > * {width:144px;} .box_btn.w150 > * {width:150px;} .box_btn.w160 > * {width:160px;} .box_btn.w165 > * {width:165px;} .box_btn.w175 > * {width:175px;} .box_btn.w180 > * {width:180px;} .box_btn.w189 > * {width:189px;} .box_btn.w200 > * {width:200px;} .box_btn.w211 > * {width:211px;} .box_btn.w224 > * {width:224px;} .box_btn.w225 > * {width:225px;} .box_btn.w250 > * {width:250px;} .box_btn.w275 > * {width:275px;} .box_btn.w300 > * {width:300px;} .box_btn.w305 > * {width:305px;} .box_btn.w325 > * {width:325px;} .box_btn.w350 > * {width:350px;} /* 버튼스타일 - 세로높이 */ .box_btn.h30 > * {height:30px; padding:0; line-height:28px;} .box_btn.h35 > * {height:35px; padding:0; line-height:33px;} .box_btn.h45 > * {height:45px; padding:0; line-height:43px;} .box_btn.h50 > * {height:50px; padding:0; line-height:48px;} /* 버튼스타일 - 색상 */ .box_btn.white * {border-color:#c3c3c3; background:#fff; color:#666 !important;} .box_btn.white:hover *, .box_btn.white:active *, .box_btn.white:focus * {background:#f5f5f5;} .box_btn.white2 * {border-color:#dbdbdb; background:#fff; color:#000 !important;} .box_btn.white2:hover *, .box_btn.white2:active *, .box_btn.white2:focus * {background:#f5f5f5;} .box_btn.white3 * {border-color:#dbdbdb; background:#fff; color:#333 !important;} .box_btn.white3:hover *, .box_btn.white3:active *, .box_btn.white3:focus * {background:#f5f5f5;} .box_btn.white4 * {border-color:#e9e9e9; background:#fff; color:#404040 !important;} .box_btn.white4:hover *, .box_btn.white4:active *, .box_btn.white4:focus * {background:#f5f5f5;} .box_btn.white5 * {border-color:#e9e9e9; background:#fff; color:#333 !important;} .box_btn.white5:hover *, .box_btn.white5:active *, .box_btn.white5:focus * {background:#f5f5f5;} .box_btn.white6 * {border-color:#dbdbdb; background:#fff; color:#333 !important;} .box_btn.white6:hover *, .box_btn.white6:active *, .box_btn.white6:focus * {background:#dbdbdb;} .box_btn.white7 * {border-color:#e5e5e5; background:#fff; color:#333 !important;} .box_btn.white7:hover *, .box_btn.white7:active *, .box_btn.white7:focus * {background:#e5e5e5;} .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:#f0f0f0; background:#f0f0f0; color:#333 !important;} .box_btn.gray2:hover *, .box_btn.gray2:active *, .box_btn.gray2:focus * {background:#dadada;} .box_btn.gray3 * {border-color:#f7f7f7; background:#f7f7f7; color:#333 !important;} .box_btn.gray3:hover *, .box_btn.gray3:active *, .box_btn.gray3:focus * {background:#f7f7f7;} .box_btn.gray4 * {border-color:#f8f8f8; background:#f8f8f8; color:#333 !important;} .box_btn.gray4:hover *, .box_btn.gray4:active *, .box_btn.gray4:focus * {background:#f8f8f8;} .box_btn.gray5 * {border-color:#e9e9e9; background:#e9e9e9; color:#333 !important;} .box_btn.gray5:hover *, .box_btn.gray5:active *, .box_btn.gray5:focus * {background:#e9e9e9;} .box_btn.skyblue * {border-color:#63cadd; background:#63cadd; color:#fff !important;} .box_btn.skyblue:hover *, .box_btn.skyblue:active *, .box_btn.skyblue:focus * {background:#63cadd;} /* 버튼스타일 - 폰트사이즈 */ .box_btn.fs12 > * {font-size:12px !important;} .box_btn.fs13 > * {font-size:13px !important;} .box_btn.fs14 > * {font-size:14px !important;} .box_btn.fs15 > * {font-size:15px !important;} .box_btn.fs18 > * {font-size:18px !important;} /* 버튼스타일 - 텍스트 */ .box_btn.light * {font-weight:300;} .box_btn.strong * {font-weight:bold;} .box_btn.mt {margin-top:5px;} /* 버튼스타일 - 정렬 */ .btn_col:after {display:block; clear:both; content:'';} .btn_col .box_btn {float:right; width:50%;} .btn_col .box_btn:first-child {float:left;} /*-----------------------------------------------------------------*/ /* 2-3. product /*-----------------------------------------------------------------*/ /* 상품스타일 - 기본 */ .prd_basic {display:table; width:100%; font-size:0; text-align:left !important;} .prd_basic > li {display:inline-block; padding-bottom:87px; text-align:center; vertical-align:top;} .prd_basic.col2 > li {width:50%;} .prd_basic.col3 > li {width:33.33%;} .prd_basic.col4 {width:1440px; margin-left:-40px;} .prd_basic.col4 > li {width:320px; margin-left:40px;} .prd_basic.col5 > li {width:20%;} .prd_basic .box {position:relative; width:320px; margin:0 auto;} .prd_basic .box .img {overflow:hidden; position:relative; z-index:1; width:100%; margin:0 auto; text-align:center;} .prd_basic .box .img .prdimg {transition:all .3s ease;} .prd_basic .box .img .prdimg img {max-width:100%; height:auto;} .prd_basic .box .img:hover .prdimg {-ms-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);} .prd_basic .box .img .check {position:absolute; left:10px; top:10px;} .prd_basic .box .img .sale {position:absolute; left:10px; top:11px; width:68px; height:68px; padding:12px 0; border:1px solid #fff; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background-color:rgba(255,255,255,0.4); font-weight:300; text-align:center;} .prd_basic .box .img .sale strong {font-size:17px; font-weight:700; line-height:1;} .prd_basic .box .img .layer_info {display:none; position:absolute; left:0; bottom:0; z-index:5; width:100%; padding:10px 0; background-color:rgba(255,255,255,0.9);} .prd_basic .box .img .layer_info .quick {font-size:0; text-align:center;} .prd_basic .box .img .layer_info .quick a {display:inline-block; *display:inline; *zoom:1; height:34px; margin-left:5px; padding:0 15px 0 47px; border:1px solid #adadad; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-repeat:no-repeat; background-position:left 22px center; line-height:34px; vertical-align:middle;} .prd_basic .box .img .layer_info .quick a:first-child {margin-left:0;} .prd_basic .box .img .layer_info .quick a.cart {background-image:url('/asset/img/button/icon_cart.png');} .prd_basic .box .img .layer_info .quick a.preview {background-image:url('/asset/img/button/icon_preview.png');} .prd_basic .box .img .layer_info .quick a.wish {width:35px; padding:0; background-image:url('/asset/img/button/icon_wish2.png'); background-position:center;} /*.prd_basic .box .img:hover .layer_info {display:block;}*/ .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.out .img .sale {display:none;} .prd_basic .box.out .img .layer_info {display:none;} .prd_basic .box .info {padding-top:19px; text-align:left;} .prd_basic .box .icon {margin-bottom:12px;} .prd_basic .box .icon img {margin-left:6px;} .prd_basic .box .icon img:first-child {margin-left:0;} .prd_basic .box .best_icon {display:none; font-size:20px; font-weight:600;} .prd_basic .box .name, .prd_basic .box .name * {color:#212121; font-size:14px; letter-spacing:-0.5px;} .prd_basic .box .name {/* overflow:hidden; margin-bottom:4px; white-space:nowrap; text-overflow:ellipsis; */margin-top: 5px;} .prd_basic .box .summary {overflow:hidden; margin-bottom:0px !important; color:#a8a8a8; letter-spacing:-0.2px; /* white-space:nowrap; */ /* word-break:break-all; word-wrap:break-word; */ text-overflow:ellipsis; overflow: hidden; height: 39px;} .prd_basic .box .price {font-size:0;} .prd_basic .box .price span {display:inline-block; *display:inline; *zoom:1; margin-left:9px; vertical-align:bottom; word-break:break-all; word-wrap:break-word;} .prd_basic .box .price span:first-child {margin-left:0;} .prd_basic .box .price .sell {font-size:15px;} .prd_basic .box .price .consumer {color:#888; font-size:13px; font-weight:300; text-decoration:line-through;} .prd_basic .box .price .percent {font-size:13px; font-weight:300;} .prd_basic .box .count {margin-top:12px; padding-top:15px; border-top:1px solid #dbdbdb; font-size:0;} .prd_basic .box .count span {display:inline-block; *display:inline; *zoom:1; position:relative; padding:0 6px 0 8px; vertical-align:middle;} .prd_basic .box .count span:after {display:block; position:absolute; right:-2px; top:0; color:#888; font-size:13px; font-weight:300; content:':';} .prd_basic .box .count span:first-child {padding-left:0;} .prd_basic .box .count span:last-child:after {display:none;} .prd_basic .box .count span strong {font-size:13px; font-weight:400;} /* 상품스타일 - 기본 - 마이페이지 최근본상품 */ .prd_basic.recent > li {padding-bottom:50px;} .prd_basic.recent.col4 {width:1000px; margin-left:-20px;} .prd_basic.recent.col4 > li {width:230px; margin-left:20px;} .prd_basic.recent .box {width:230px;} .prd_basic.recent .box .img .layer_info, .prd_basic.recent .box .img .sale, .prd_basic.recent .box .icon, .prd_basic.recent .box .summary, .prd_basic.recent .box .price .consumer, .prd_basic.recent .box .price .percent, .prd_basic.recent .box .count {} /* 상품스타일 - 기본 - 디테일 코디상품리스트 */ .prd_basic.coordi > li {padding-bottom:17px;} .prd_basic.coordi.col4 {width:696px; margin-left:-16px;} .prd_basic.coordi.col4 > li {width:160px; margin-left:5px;} .prd_basic.coordi.col4 > li.soldout .prdimg {opacity:0.2;} .prd_basic.coordi .box {width:160px;} .prd_basic.coordi .box .img .check {position:absolute; left:5px; top:5px;} .prd_basic.coordi .box .info {padding-top:6px;} .prd_basic.coordi .box .info .name, .prd_basic.coordi .box .info .name * {color:#333; font-size:13px;} .prd_basic.coordi .box .info .name {margin-bottom:0;} .prd_basic.coordi .box .info .price {margin-bottom:5px;} .prd_basic.coordi .box .info .price .sell {font-family:Malgun Gothic, '맑은 고딕'; font-size:13px; font-weight:700;} .prd_basic.coordi .box .info .opt {position:relative;} .prd_basic.coordi .box .info .opt > span {display:inline-block; *display:inline; *zoom:1; padding-right:16px; background:url('/asset/img/common/arrow_bottom3.png') no-repeat right center; color:#888; font-size:13px;} .prd_basic.coordi .box .info .opt > span.active {background-image:url('/asset/img/common/arrow_top3.png');} .prd_basic.coordi .box .info .opt .opt_layer {display:none; position:absolute; left:0; top:20px; z-index:20; width:100%; padding:4px 0 11px; background:#fff;} .prd_basic.coordi .box .info .opt .opt_layer select {width:100%; height:30px; margin-bottom:5px; padding:0 10px; border:1px solid #e9e9e9; line-height:30px;} .prd_basic.coordi .box .info .opt .opt_layer .box_qty {width:100%;} .prd_basic.coordi .box .info .opt .opt_layer .box_qty .form_input {width:158px;} /* 상품스타일 - 기본 - 슬라이드 */ .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('/asset/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('/asset/img/button/slide_next.png') no-repeat center;} .prd_basic.slide .slick-dots {position:absolute; left:0; bottom:0; width:100%; font-size:0; text-align:center;} .prd_basic.slide .slick-dots li {display:inline-block; *display:inline; *zoom:1; margin:0 5px;} .prd_basic.slide .slick-dots li button {width:10px; height:10px; padding:0; border:0; background:#e4e4e4; color:transparent; font-size:0; cursor:pointer;} .prd_basic.slide .slick-dots li.slick-active button {background:#333;} /* 상품스타일 - 기본 - 슬라이드 - 마이페이지 좋아요 */ .prd_basic.slide.like {padding-bottom:36px;} .prd_basic.slide.like .slick-cloned {display:none;} .prd_basic.slide.like .box {width:154px; margin-left:12px;} .prd_basic.slide.like .box .img .prdimg img {width:100%; height:auto;} .prd_basic.slide.like .box .info {padding-top:10px;} .prd_basic.slide.like .box .name {margin-bottom:1px; text-overflow:ellipsis;} .prd_basic.slide.like .box .img .sale, .prd_basic.slide.like .box .icon, .prd_basic.slide.like .box .summary, .prd_basic.slide.like .box .price .consumer, .prd_basic.slide.like .box .price .percent, .prd_basic.slide.like .box .count {display:none;} /* 상품스타일 - 기본 - 슬라이드 - 마이페이지 최근본상품 */ .prd_basic.slide.recent {padding-bottom:36px;} .prd_basic.slide.recent .slick-cloned {display:none;} .prd_basic.slide.recent .box {width:154px; margin-left:12px;} .prd_basic.slide.recent .box .img .prdimg img {width:100%; height:auto;} .prd_basic.slide.recent .box .info {padding-top:10px;} .prd_basic.slide.recent .box .name {margin-bottom:1px; text-overflow:ellipsis;} .prd_basic.slide.recent .box .img .sale, .prd_basic.slide.recent .box .icon, .prd_basic.slide.recent .box .summary, .prd_basic.slide.recent .box .price .consumer, .prd_basic.slide.recent .box .price .percent, .prd_basic.slide.recent .box .count {display:none;} /* 상품스타일 - 기본 - 슬라이드 - 장바구니 추천상품, 디테일 함께구매상품 */ .prd_basic.slide.rec {padding-bottom:40px;} .prd_basic.slide.rec .slick-slide, .prd_basic.slide.rec .slick-slide .box {width:188px;} .prd_basic.slide.rec .slick-slide img {width:100%;} .prd_basic.slide.rec .slick-slide .box .info {text-align:left;} .prd_basic.slide.rec .slick-slide .box .info .name {margin-bottom:2px; font-size:14px; letter-spacing:-0.06em;} .prd_basic.slide.rec .slick-slide .box .info .price, .prd_basic.slide.rec .slick-slide .box .info .price * {font-size:15px;} .prd_basic.slide.rec .box .img .sale, .prd_basic.slide.rec .box .icon, .prd_basic.slide.rec .box .summary, .prd_basic.slide.rec .box .price .consumer, .prd_basic.slide.rec .box .price .percent, .prd_basic.slide.rec .box .count {display:none;} /*-----------------------------------------------------------------*/ /* 3. Layout /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 3-1. wrapper /*-----------------------------------------------------------------*/ #wrapper {overflow:hidden; position:relative; min-width:1200px; text-align:left;} .wrap_inner {width:1200px; margin:0 auto;} /* 컨텐츠 사이즈 */ .wrap_inner2 {width:1400px; margin:0 auto;} /* 컨텐츠 사이즈 */ /*-----------------------------------------------------------------*/ /* 3-2. header /*-----------------------------------------------------------------*/ #header {width:100%; text-align:center;} #header .hd_top {position:relative; width:100%; max-width:1900px; margin:0 auto;} #header .hd_top h1 {padding:45px 0 24px;} #header .hd_top .search {position:absolute; top:59px; left:20px; z-index:5; width:290px; height:41px; border:1px solid #c5c5c5; border-radius:12px;} #header .hd_top .search .box {position:relative; padding-right:47px; text-align:left;} #header .hd_top .search .box .basic_search {height:39px; padding:0 0 0 18px; border:0; background:transparent; line-height:39px;} #header .hd_top .search .box .btn {position:absolute; right:0; top:0; width:47px; height:100%; margin:0; padding:0; border:0; background:url('/asset/img/common/hd_search.png') no-repeat center; color:transparent; text-indent:-9999px;} #header .hd_top .gnb {position:absolute; top:59px; right:21px; z-index:15;} #header .hd_top .gnb > li {float:left; position:relative; margin-left:11px;} #header .hd_top .gnb > li > a {display:block; height:41px; color:#888; font-size:13px; line-height:41px;} #header .hd_top .gnb > li > a.log:hover {text-decoration:underline;} #header .hd_top .gnb > li.viewsub > a {padding-right:12px; background:url('/asset/img/common/bullet_arrow_down.png') no-repeat right center;} #header .hd_top .gnb > li span.cnt {z-index:2; color:#888; position:absolute; display:inline-block; right:-10px; background:#ad96dc; color:#fff; border-radius:50%; width:21px; height:21px; line-height:21px; transform:scale(0.75); font-size:10px;} #header .hd_top .gnb > li a img {margin-top:5px;} #header .hd_top .gnb > li span.ico-book {margin-top:8px;} /* #header .hd_top .gnb > li.cart > a {padding-right:26px; background:url('/asset/img/common/hd_cart.png') no-repeat right center;} #header .hd_top .gnb > li.wish > a {padding-right:21px; background:url('/asset/img/common/hd_wish.png') no-repeat right center;} */ #header .hd_top .gnb > li.cart > a span, #header .hd_top .gnb > li.wish > a span {display:block; height:41px; color:inherit; line-height:41px;} #header .hd_top .gnb > li.viewsub > .list {display:none; position:absolute; top:39px; left:50%; z-index:15; width:118px; margin-left:-59px; padding:9px 0; border:1px solid #c5c5c5; background:#fff; text-align:left;} #header .hd_top .gnb > li.viewsub > .list li {float:none;} #header .hd_top .gnb > li.viewsub > .list li a {display:block; padding:6px 0 6px 18px; color:#333;} #header .hd_top .gnb > li.viewsub > .list2 {display:none; position:absolute; top:39px; left:50%; z-index:15; width:300px; margin-left:-150px; padding:20px; border:1px solid #c5c5c5; background:#fff;} #header .hd_top .gnb > li.viewsub > .list2 .title {height:40px; margin-bottom:12px; border:1px solid #dbdbdb; font-size:14px; font-weight:300; line-height:40px; text-align:center;} #header .hd_top .gnb > li.viewsub > .list2 ul {overflow:hidden; text-align:left;} #header .hd_top .gnb > li.viewsub > .list2 li {float:right; width:118px; padding:9px 0 11px; border-bottom:1px solid #dbdbdb;} #header .hd_top .gnb > li.viewsub > .list2 li.odd {clear:both; float:left;} #header .hd_top .gnb > li.viewsub > .list2 li a {display:block; color:#333;} #header .hd_top .gnb > li.viewsub:hover > .list, #header .hd_top .gnb > li.viewsub:hover > .list2 {display:block;} #header .lnb {width:1900px; height:90px;} #header .lnb .menu {position:relative; z-index:5; width:100%;} #header .lnb .logo {visibility:hidden; position:absolute; top:3px; left:20px; z-index:5; opacity:0; transition:all .3s ease;} #header .lnb .cart {visibility:hidden; position:absolute; top:13px; right:20px; z-index:5; opacity:0; transition:all .3s ease;} #header .lnb .menu .cart a {display:inline-block; background:url('/asset/img/common/hd_cart4.png') no-repeat right center; line-height:21px; width: 21px;height: 26px;background-size: cover;padding-right: 0;position: relative;} #header .lnb .menu .cart span {position: absolute;z-index: 2;color: #888;position: absolute;display: inline-block;right: -10px;background: #ad96dc;color: #fff;border-radius: 50%;width: 20px;height: 20px;line-height: 20px;transform: scale(0.8);font-size: 11px; color:#fff !Important;} #header .lnb .cate {font-size:0; text-align:center;} #header .lnb .cate > li {display:inline-block; padding:7px 10px; vertical-align:top;} #header .lnb .cate > li.view_sub {position:relative;} #header .lnb .cate > li.bar {position:relative; padding-left:38px;} #header .lnb .cate > li.bar:after {display:block; content:''; position:absolute; top:50%; left:13px; width:1px; height:12px; margin-top:-6px; background:#d9d9d9;} #header .lnb .cate > li > a {display:inline-block;} #header .lnb .cate > li.view_sub > a {padding-right:12px; background:url('/asset/img/common/arrow_bottom3.png') no-repeat right center;} #header .lnb .cate > li.view_sub > a span {padding:3px 20px; border-radius:15px; position:relative; top:2px; background:url('//atimg.sonyunara.com/attrangs/2020/self/more.png');} #header .lnb .cate > li.thema a {padding-right:0; background:none; border-bottom:0 !important;} #header .lnb .cate > li.thema a span img {position:relative; top:7.5px; left:5px;} #header .lnb .cate .sub_list {z-index:2;display:none; position:absolute; left:50%; top:0; width:218px; margin-left:-100px; margin-top: 30px; z-index: 10000;} #header .lnb .cate .sub_list ul {padding:12px 15px; border:1px solid #c8c8c8; background-color:rgba(255,255,255,0.9); text-align:left;} #header .lnb .cate .sub_list li a {display:block; padding:3px 0; font-size:14px;} /* #header .lnb .cate > li.view_sub:hover .sub_list {display:block;} */ #header .lnb .cate0 {padding:12px 0; border-bottom:1px solid #c5c5c5;} #header .lnb .cate0 > li > a {height:23px; font-size:13px; font-weight:300; line-height:23px;} #header .lnb .cate0 > li > a:hover {border-bottom:2px solid #adadad;} #header .lnb .cate0 > li > a.p_color:hover {border-bottom:2px solid #ff8e77;} #header .lnb .cate1 > li > a {height:42px; line-height:42px;} #header .lnb .cate1 > li > a.quick {padding-right:16px; background:url('/asset/img/common/hd_quick2.png') no-repeat right center;} #header .lnb .cate1 > li > a:hover {text-decoration:underline;} #header .lnb .cate li.all {width:23px; height:23px; padding:0; margin-right:12px; transition:all .3s ease;} #header .lnb .cate li.all a {width:23px; height:23px; background:url('/asset/img/common/all_menu.png') no-repeat center; color:transparent; text-indent:-9999px;} #header .lnb .cate li.all a:hover {border:0;} #header .lnb .menu.fixed {position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,0.92);} #header .lnb .menu.fixed .logo, #header .lnb .menu.fixed .cart {visibility:visible; opacity:1;} @media (max-width:1600px) { #header .lnb .menu.fixed {width:1600px;} } @media (max-width:1474px){ #header .lnb .cate0 {width:1900px; text-align:left;} } @media only screen and (max-width:1399px) { #header .lnb .menu .cate li.all {margin-right:6px;} #header .lnb .cate li {padding:0 6px;} #header .lnb .cate li.bar {padding-left:12px;} #header .lnb .cate li.bar:after {left:4px;} #header .lnb .menu.fixed .logo {left:10px;} #header .lnb .menu.fixed .cart {right:10px;} } /* 전체 메뉴 */ #all_menu {display:none; overflow-y:auto; position:fixed; left:0; top:0; z-index:35; width:100%; height:100%; background:rgba(255,255,255,0.95);} #all_menu .close {position:absolute; top:0; right:0; z-index:10; width:36px; height:36px; padding:40px; background:url('/asset/img/common/all_menu_close2.png') no-repeat center; color:transparent; text-indent:-9999px; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} #all_menu .inner {padding-bottom:100px;} #all_menu .logo {margin:108px 0 65px; text-align:center;} #all_menu .all_cate {overflow:hidden;} #all_menu .all_cate dl {float:left; width:170px; margin-right:22px; text-align:left;} #all_menu .all_cate dl dt {height:32px; margin:15px 0 20px; border-bottom:1px solid #fff; color:#fff; font-size:16px; line-height:31px;} #all_menu .all_cate dl dt a {display:block; height:31px; font-size:inherit; line-height:inherit; color:#fff; text-transform:uppercase;} #all_menu .all_cate dl dd {} #all_menu .all_cate dl dd.space {padding-bottom:18px;} #all_menu .all_cate dl dd a {display:block; padding:1px 0; color:#fff; font-size:13px; font-weight:300; text-transform:uppercase;} /*-----------------------------------------------------------------*/ /* 3-3. content /*-----------------------------------------------------------------*/ #cnt {padding-bottom:50px; min-height:500px;} #cnt .cntbody {width:1200px; margin:0 auto;} /* 레이어팝업 - 공통 */ .common_layer {display:none; position:fixed; left:50%; top:50%; z-index:45; background:#fff; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .common_layer .inner {position:relative; padding:0 54px;} .common_layer .inner .close {position:absolute; right:0; top:0; width:18px; height:18px; padding:30px; background:url('/asset/img/button/close.png') no-repeat center; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .common_layer .inner h3 {font-size:24px; font-weight:400; text-align:center;} .common_layer .inner .scroll_area {overflow-y:auto; max-height:546px;} .common_layer .inner .layer_info li, .common_layer .inner .layer_info li * {font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; line-height:29px; letter-spacing:-1px;} .common_layer .inner .layer_info li {position:relative; padding-left:13px; color:#888;} .common_layer .inner .layer_info li:after {display:block; position:absolute; left:0; top:13px; width:3px; height:3px; background:#333; content:'';} .common_layer .inner .layer_info li strong {color:#333;} /* 레이어팝업 - 적립금지급안내 (shop_detail.html & membership.html) */ .milage_layer {width:600px;} .milage_layer .inner {height:400px;} .milage_layer .inner h3 {padding:34px 0 24px !important; border-bottom:1px solid #383838;} .milage_layer .layer_info {padding:34px 0 44px;} /* 탭메뉴 - 공통 */ .common_tabmenu {height:60px; border-bottom:1px solid #333; text-align:center;} .common_tabmenu:after {display:block; clear:both; content:'';} .common_tabmenu > li {float:left;} .common_tabmenu > li > a {display:block; height:59px; border:1px solid #e9e9e9; border-bottom:0; background:#fff; font-size:15px; line-height:60px;} .common_tabmenu > li > a.active {height:60px; border-color:#333;} /*-----------------------------------------------------------------*/ /* 3-4. footer /*-----------------------------------------------------------------*/ #footer {clear:both; padding-top:70px; border-top:1px solid #c5c5c5; text-align:left;} #footer .ft_inner {clear:both; overflow:hidden; width:100%; max-width:1400px; min-width:1200px; margin:0 auto;} #footer .ft_inner.shopinfo {padding:12px 0 38px;} #footer .ft_inner * {color:#888; font-size:13px; font-weight:300; font-style:normal;} #footer .ft_inner p {line-height:2;} #footer .ft_inner p.first {line-height:1;} #footer .ft_inner h3 {position:relative; padding-bottom:28px; color:#333; font-size:14px; font-weight:300; line-height:1;} #footer .ft_inner.shopinfo h3 {padding-bottom:34px;} #footer .ft_inner h3 a {display:inline-block; position:absolute; top:0; right:0; z-index:5;} #footer .ft_inner .cs {float:left; width:36%; max-width:494px; padding-right:6%;} #footer .ft_inner .cs p {padding-bottom:21px;} #footer .ft_inner .offline {float:left; width:30%; max-width:412px;} #footer .ft_inner .offline .img {padding-bottom:19px;} #footer .ft_inner .offline .img img {width:100%;} #footer .ft_inner .notice {float:right; width:27%; max-width:367px;} #footer .ft_inner .notice li {border-bottom:1px solid #c5c5c5;} #footer .ft_inner .notice li a {display:block; overflow:hidden; position:relative; padding:10px 17px; font-family:Malgun Gothic, '맑은 고딕'; line-height:1; text-overflow:ellipsis; white-space:nowrap;} #footer .ft_inner .notice li a:before {display:block; content:'-'; position:absolute; top:10px; left:8px; color:#888;} #footer .ft_inner .notice p {padding:34px 7px 0; color:#333; font-family:Malgun Gothic, '맑은 고딕';} #footer .ft_inner .notice p a {color:inherit; font:inherit; text-decoration:underline;} #footer .ft_inner .info {float:left; width:75%;} #footer .ft_inner .info .menu {overflow:hidden;} #footer .ft_inner .info .menu li {float:left; padding-right:12px;} #footer .ft_inner .info .menu li a {display:block; height:24px; line-height:24px;} #footer .ft_inner .info address, #footer .ft_inner .info address * {font-family:Malgun Gothic, '맑은 고딕'; font-size:12px; line-height:2;} #footer .ft_inner .info address span {display:inline-block; position:relative; padding-right:10px;} #footer .ft_inner .info span:after {display:block; content:'/'; position:absolute; left:-8px; top:3px; color:#888; font-size:10px;} #footer .ft_inner .info address span.first:after {display:none;} #footer .ft_inner .info span.last:after {display:none;} #footer .ft_inner .etc {float:right; width:25%;} #footer .ft_inner .etc > div {float:left; width:50%;} #footer .ft_inner .etc a {display:inline-block; padding:3px 20px 3px 0; background:url('/asset/img/common/arrow_link.png') no-repeat right center; line-height:1;} #footer .copyright {clear:both; position:relative; border-top:1px solid #dbdbdb;} #footer .copyright .inner {position:relative; width:100%; max-width:1400px; min-width:1200px; margin:0 auto; padding:25px 0 35px; color:#888; font-weight:300; text-align:center; line-height:39px;} #footer .copyright strong {color:#333; font-weight:300;} #footer .copyright a {color:#888; font-weight:300;} #footer .copyright a strong, #footer .copyright a:hover {color:#25ace2;} #footer .copyright .apps {position:absolute; top:29px; left:0; z-index:5; font-size:0;} #footer .copyright .apps a {display:inline-block; margin-right:13px;} #footer .copyright .mark {position:absolute; top:25px; right:0; z-index:5; font-size:0;} #footer .copyright .mark a {display:inline-block; margin-left:13px;} #footer .btn_scroll {position:fixed; right:20px; bottom:20px; z-index:20; width:44px; border:1px solid #c5c5c5; border-bottom:0;} #footer .btn_scroll a {display:block; border-bottom:1px solid #c5c5c5; text-align:center; cursor:pointer;} #footer .quick_delivery {position:fixed; bottom:20px; left:20px; z-index:20; -webkit-animation:balloon 1.5s ease-in-out infinite; animation:balloon 1.5s ease-in-out infinite;} #dimmed {display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:40; background-color:rgba(0,0,0,0.7);} @-webkit-keyframes balloon { 0%,100% {-webkit-transform:translate(0, 5px);} 50% {-webkit-transform:translate(0, 0);} } @keyframes balloon { 0%,100% {transform:translate(0, 5px);} 50% {transform:translate(0, 0);} } /* 스마트 서치 */ #rightPanel {position:fixed; top:0; right:0; z-index:30; height:100%; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} #rightPanel .innerPanel {position:relative; width:629px; height:100%; margin-right:-629px; background:#fff;} #rightPanel .innerPanel:after {display:block; content:''; position:absolute; top:0; left:0; z-index:5; width:135px; height:100%; background:#e3e3e3;} #rightPanel .innerPanel .rightCon {position:relative;} #rightPanel .btn {display:block; overflow:hidden; position:absolute; top:34%; right:629px; width:55px; margin:-58px 0 0 0; transition:all .2s ease-in-out;} #rightPanel .close {display:none; overflow:hidden; position:absolute; top:184px; right:629px; width:55px; height:19px; padding-right:11px; text-align:right;} #rightPanel .search {position:relative; z-index:10; padding:28px 50px; background:#fff; text-align:left;} #rightPanel .search .box {position:relative; height:63px; padding:0 41px 0 172px; border-bottom:2px solid #333;} #rightPanel .search label {position:absolute; left:0; top:0; height:61px; font-size:18px; font-weight:bold; line-height:61px;} #rightPanel .search .basic_search {height:61px; padding:0; border:0; background:transparent; color:#888; font-size:14px; line-height:61px;} #rightPanel .search .btn {position:absolute; right:0; top:0; width:31px; height:100%; margin:0; padding:0; border:0; background:url('/asset/img/common/hd_search.png') no-repeat center; color:transparent; text-indent:-9999px;} #rightPanel .area {overflow:hidden; position:relative; z-index:10; border-top:1px solid #e3e3e3;} #rightPanel .area .tab_smart {float:left; width:135px; height:100%; background:none;} #rightPanel .area .tab_smart li a {display:block; height:80px; padding-left:20px; border-right:1px solid #dcdcdc; border-bottom:1px solid #fff; background:none; font-size:14px; line-height:80px; cursor:pointer;} #rightPanel .area .tab_smart li a.active {border-color:#fff; background:#fff;} #rightPanel .area .tab_smart li.refresh {padding-top:26px; text-align:center;} #rightPanel .area .tab_smart li.refresh a {width:55px; height:55px; margin:0 auto; padding:0; background:#fff url('/asset/img/common/refresh.png') no-repeat center; border:1px solid #a19892; border-radius:12px;} #rightPanel .area .inner {overflow-y:scroll; float:right; width:528px; padding:0 31px 0 39px;} #rightPanel .area .inner .box {padding:4px 0; border-bottom:1px solid #dfdfdf; text-align:left;} #rightPanel .area .inner .box .title {height:59px; background:no-repeat right center; background-image:url('/asset/img/common/arrow_bottom2.png'); font-size:16px; line-height:59px;} #rightPanel .area .inner .box .title.active {background-image:url('/asset/img/common/arrow_top2.png');} #rightPanel .area .inner .box .title span {color:#a5a5a5; font-size:11px;} #rightPanel .area .inner .box .list, #rightPanel .area .inner .box > ul.colors {margin-bottom:16px;} #rightPanel .area .inner .box > ul {font-size:0;} #rightPanel .area .inner .box > ul > li {display:inline-block; position:relative; margin-right: 10px; margin-bottom: 10px;} /* #rightPanel .area .inner .box > ul > li:first-child {margin-left:0;} */ #rightPanel .area .inner .box > ul > li > a {display:inline-block; text-align:center; cursor:pointer;} #rightPanel .area .inner .box > ul.list > li > a {min-width:51px; height:36px; padding:0 13px; border:1px solid #e3e3e3; border-radius:8px; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; line-height:33px; letter-spacing:-0.05em;} #rightPanel .area .inner .box > ul.list > li.on > a {background:#e3e3e3;} #rightPanel .area .inner .box > ul.colors > li > a {min-width:26px; height:26px; padding:0; border:1px solid #adadad; border-radius:0;} #rightPanel .area .inner .box > ul.colors > li.on > a > .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.76) url('/asset/img/common/check.png') no-repeat center;} #rightPanel .area .inner .prd_search {padding:30px 0;} #rightPanel .area .inner .tabcnt {display:none;} /* 딤드 레이어 */ .layer_dimmed {display:none; position:fixed; top:0; left:0; z-index:2000; width:100%; height:100%; background:rgba(0,0,0,0.3);} /*-----------------------------------------------------------------*/ /* 4. Page /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 4-1. 메인 /*-----------------------------------------------------------------*/ #main .visual_main {text-align:center;} #main .visual_main .slick-arrow {position:absolute; top:50%; z-index:5; width:70px; height:70px; margin-top:-35px; border:0; background-color:transparent; background-repeat:no-repeat; background-position:center; color:transparent; font-size:0; cursor:pointer;} #main .visual_main .slick-prev {left:0; background-image:url('/asset/img/button/slide_prev.png');} #main .visual_main .slick-next {right:0; background-image:url('/asset/img/button/slide_next.png');} #main .visual_main .slick-dots {bottom:-25px;} #main .slick-dots {position:absolute; left:0; bottom:0; width:100%; font-size:0; text-align:center;} #main .slick-dots li {display:inline-block; *display:inline; *zoom:1; margin:0 5px;} #main .slick-dots li button {width:10px; height:10px; padding:0; border:0; background:#e4e4e4; color:transparent; font-size:0; cursor:pointer;} #main .slick-dots li.slick-active button {background:#333;} #main h3 {padding:120px 0 30px; font-size:22px; font-weight:400; text-align:center;} #main .ourstory .slick_bnr {padding-bottom:30px;} #main .ourstory .slick_bnr .slick-slide ul:after {display:block; clear:both; content:'';} #main .ourstory .slick_bnr .slick-slide ul li {overflow:hidden; position:relative; z-index:1; float:left; margin-left:4px;} #main .ourstory .slick_bnr .slick-slide ul li:first-child {margin-left:0;} #main .ourstory .slick_bnr .slick-slide ul li .img {-webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease;} #main .ourstory .slick_bnr .slick-slide ul li .txt {position:absolute; left:40px; top:152px;} #main .ourstory .slick_bnr .slick-slide ul li .txt p {color:#fff;} #main .ourstory .slick_bnr .slick-slide ul li .txt .big {position:relative; padding-top:10px; font-size:20px; font-weight:700;} #main .ourstory .slick_bnr .slick-slide ul li .txt .big:after {display:block; position:absolute; left:0; top:0; width:76px; height:1px; background:#fff; content:'';} #main .ourstory .slick_bnr .slick-slide ul li .txt .small {padding-top:5px; font-size:13px;} #main .main_special {position:relative; min-width:1400px; margin:120px auto 0;} #main .main_special .prd_basic > li {padding-bottom:28px;} #main .main_special .prd_basic.col2 {width:560px; margin-left:-40px;} #main .main_special .prd_basic.col2 > li {width:240px; margin-left:40px;} #main .main_special .prd_basic .box {width:240px;} #main .main_special .prd_basic .box .info {padding-top:4px;} #main .main_special .prd_basic .box .name, #main .main_special .prd_basic .box .name * {color:#333; font-size:12px; letter-spacing:-0.7px;} #main .main_special .prd_basic .box .name {margin-bottom:3px;} #main .main_special .prd_basic .box .price .sell {font-size:12px; font-weight:500;} #main .main_special .prd_basic .box .icon, #main .main_special .prd_basic .box .summary, #main .main_special .prd_basic .box .price .consumer, #main .main_special .prd_basic .box .price .percent, #main .main_special .prd_basic .box .count {display:none;} #main .main_special .tab_special {position:absolute; left:13.15%; top:10.06%; width:36.84%; font-size:0;} #main .main_special .tab_special li {display:inline-block; *display:inline; *zoom:1; width:22.15%; margin-left:2.85%; text-align:center; vertical-align:middle;} #main .main_special .tab_special li:first-child {margin-left:0;} #main .main_special .tab_special li a {display:block; padding:14px 0 17px; border:1px solid #fff; background:transparent; color:#fff; font-size:14px;} #main .main_special .tab_special li a.active {background:#fff; color:#333;} #main .main_special .tabcnt_special {display:none;} #main .main_special .tabcnt_special0 {display:block;} #main .main_special .tabcnt_special:after {display:block; clear:both; content:'';} #main .main_special .left_area {float:left; width:55%;} #main .main_special .left_area img {width:100%; height:auto;} #main .main_special .right_area {float:left; width:45%; background:#ebebeb;} #main .main_special .prd {position:absolute; left:59.36%; top:7.06%;} #main .main_md h3 {padding-bottom:4px;} #main .main_md .tab_md {margin-bottom:29px; font-size:0; text-align:center;} #main .main_md .tab_md li {display:inline-block; *display:inline; *zoom:1; vertical-align:top;} #main .main_md .tab_md li a {display:block; padding:11px 18px; color:#888; font-size:14px;} #main .main_md .tab_md li a.active {position:relative; color:#333;} #main .main_md .tab_md li a.active:after {display:block; position:absolute; left:50%; bottom:0; width:13px; height:8px; margin-left:-6.5px; background:url('/asset/img/common/arrow_bottom.png') no-repeat center; content:'';} #main .main_md .tabcnt_md {display:none;} #main .main_md .tabcnt_md0 {display:block;} #main .main_md .prd_basic .box .img .sale, #main .main_md .prd_basic .box .icon {display:none;} #main .main_lightning h3 span {display:inline-block; *display:inline; *zoom:1; width:21px; height:21px; margin-left:7px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:url('/asset/img/main/icon_lightning.png') no-repeat center #cf591f; text-align:center; vertical-align:middle;} #main .col2_bnr {max-width:1900px; min-width:1400px; margin:30px auto 0;} #main .col2_bnr:after {display:block; clear:both; content:'';} #main .col2_bnr li {float:left; width:50%;} #main .col2_bnr li img {width:100%; height:auto;} /*-----------------------------------------------------------------*/ /* 4-2. 상점 /*-----------------------------------------------------------------*/ /* 상품목록 (shop_big_section.html) */ #big_section h3 {padding:49px 0 10px; font-size:26px; font-weight:500; text-align:center; letter-spacing:2px;} #big_section h1 {padding:49px 0 10px; font-size:26px; font-weight:500; text-align:center; letter-spacing:2px;} #big_section .best_area {margin-bottom:70px; background:#f9f9f9;} #big_section .best_area .prd_basic .box .info {padding-top:11px;} #big_section .best_area .prd_basic .box .best_icon {display:block;} /* #big_section .best_area .prd_basic .box .sale,#big_section .best_area .prd_basic .box .icon {display:none;} */ #big_section .subcate {padding-bottom:37px; font-size:0; text-align:center;} #big_section .subcate li {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #big_section .subcate li a {display:block; padding:0 18px; color:#888; font-size:14px;} #big_section .subcate li a.active {color:#333;} /* 상품상세페이지 (shop_detail.html) */ /* 레이어팝업 - 공유하기 */ #detail .share_layer {width:600px;} #detail .share_layer h3 {padding:31px 0 25px; border-bottom:1px solid #383838;} #detail .share_layer .msg {margin:30px 0 42px; padding:11px 0 9px; background:#f7f7f7; font-size:15px; text-align:center;} #detail .share_layer ul {padding-bottom:51px; font-size:0; text-align:center;} #detail .share_layer ul li {display:inline-block; *display:inline; *zoom:1; padding:0 23px;} #detail .share_layer ul li a {display:block; width:65px; height:65px; background-repeat:no-repeat; background-position:center; color:transparent; font-size:0;} #detail .share_layer ul li.facebook a {background-image:url('/asset/img/shop/sns_facebook.png');} #detail .share_layer ul li.naverblog a {background-image:url('/asset/img/shop/sns_naverblog.png');} #detail .share_layer ul li.kakaostory a {background-image:url('/asset/img/shop/sns_kakaostory.png');} #detail .share_layer ul li.link a {background-image:url('/asset/img/shop/sns_link.png');} /* 레이어팝업 - 실시간구매재고안내 */ #detail .stock_layer {width:900px;} #detail .stock_layer h3 {padding:53px 0 17px; color:#282828;} #detail .stock_layer .update {padding-bottom:6px; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px;} #detail .stock_layer .layer_info {padding:31px 0 45px;} /* 레이어팝업 - 코디상품 */ #detail .coordi_layer {width:1230px;} #detail .coordi_layer h3 {padding:37px 0 19px;} #detail .coordi_layer .bnr_area {float:left; width:415px;} #detail .coordi_layer .bnr_area .bnr_slide {padding-bottom:36px;} #detail .coordi_layer .bnr_area .slick-dots {position:absolute; left:0; bottom:0; width:100%; font-size:0; text-align:center;} #detail .coordi_layer .bnr_area .slick-dots li {display:inline-block; *display:inline; *zoom:1; margin:0 5px;} #detail .coordi_layer .bnr_area .slick-dots li button {width:10px; height:10px; padding:0; border:0; background:#e4e4e4; color:transparent; font-size:0;} #detail .coordi_layer .bnr_area .slick-dots li.slick-active button {background:#383533;} #detail .coordi_layer .prd_area {float:right; width:680px;} #detail .coordi_layer .total {clear:both; padding:16px 0 33px; border-top:1px solid #e9e9e9; text-align:center;} #detail .coordi_layer .total dl > * {display:inline;} #detail .coordi_layer .total dl * {font-family:Malgun Gothic, '맑은 고딕';} #detail .coordi_layer .total dl dt, #detail .coordi_layer .total dl dt * {font-size:14px;} #detail .coordi_layer .total dl dt span {color:#888;} #detail .coordi_layer .total dl dd, #detail .coordi_layer .total dl dd * {color:#cd5a1e;} #detail .coordi_layer .total dl dd {font-size:14px;} #detail .coordi_layer .total dl dd strong {font-size:16px;} #detail .coordi_layer .btn {padding-bottom:54px;} /* 레이어팝업 - 실측사이즈 안내 */ #detail .actual_size_layer {width:1038px;} #detail .actual_size_layer .inner {padding:0 50px 0 0;} #detail .actual_size_layer h3 {padding:43px 0 32px;} #detail .actual_size_layer .size_info .size_img {text-align:center;} /* 레이어팝업 - 사이즈변환표 */ #detail .change_chart_layer {width:1200px;} #detail .change_chart_layer .inner {padding-bottom:60px;} #detail .change_chart_layer h3 {padding:53px 0 32px;} /* 레이어팝업 - 신장별 사이즈표 */ #detail .height_chart_layer {width:1120px;} #detail .height_chart_layer h3 {padding:53px 0 40px;} #detail .height_chart_layer .tab_hchart {margin-bottom:60px; font-size:0; text-align:center;} #detail .height_chart_layer .tab_hchart li {display:inline-block; *display:inline; *zoom:1; margin-left:10px;} #detail .height_chart_layer .tab_hchart li:first-child {margin-left:0;} #detail .height_chart_layer .tab_hchart li a {display:inline-block; *display:inline; *zoom:1; width:170px; height:40px; border:1px solid #e9e9e9; background:#fff; font-size:15px; line-height:38px;} #detail .height_chart_layer .tab_hchart li a.active {border-color:#333; background:#333; color:#fff;} #detail .height_chart_layer .tabcnt_hchart {display:none; text-align:center;} #detail .height_chart_layer .tabcnt_hchart0 {display:block;} #detail .height_chart_layer .msg {padding:45px 0 56px;} #detail .height_chart_layer .msg p {display:inline-block; *display:inline; *zoom:1; padding-left:24px; background:url('/asset/img/common/i_notice_b.png') no-repeat left center; color:#888; font-size:13px; text-align:left; line-height:19px;} /* 실측사이즈안내 공통 */ #detail .size_info:after {display:block; clear:both; content:'';} #detail .size_info .size_img {float:left; width:38.5%;} #detail .size_info .size_txt {float:right; width:57.5%;} #detail .size_info .size_opt {margin-left:-6px; font-size:0;} #detail .size_info .size_opt li {display:inline-block; *display:inline; *zoom:1; margin:0 0 6px 6px; text-align:center;} #detail .size_info .size_opt li a {display:block; width:65px; height:35px; border:1px solid #e9e9e9; font-size:13px; line-height:33px;} #detail .size_info .size_opt li a.active {position:relative; border-color:#333;} #detail .size_info .size_opt li a.active:after {display:block; position:absolute; left:50%; top:50%; width:21px; height:15px; margin:-7.5px 0 0 -10.5px; background:url('/asset/img/shop/opt_checked.png') no-repeat center; content:'';} #detail .size_info .msg {padding:15px 0 24px; color:#888; font-size:13px; line-height:22px;} #detail {margin-top:50px;} #detail .wrap_prd {overflow:hidden; position:relative;} #detail .wrap_prd > .prdimg {float:left; width:640px;} #detail .wrap_prd > .prdimg .img {overflow:hidden; position:relative; width:640px; height:640px; text-align:center;} #detail .wrap_prd > .prdimg .img img {max-width:640px; max-height:640px;} #detail .wrap_prd > .prdimg .img .wish {position:absolute; right:0; top:0;z-index:1} #detail .wrap_prd > .prdimg .img .wish a {display:block; width:23px; height:22px; padding:20px; background:url('/asset/img/shop/btn_wish1.png') no-repeat center / 26px 22px; color:transparent; font-size:0; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} #detail .wrap_prd > .prdimg .img .wish a.on {background-image:url('/asset/img/shop/btn_wish_on1.png');} #detail .wrap_prd > .prdimg .addimg {margin-top:10px;} #detail .wrap_prd > .prdimg .addimg .box_add_slide {overflow:hidden; width:640px;} #detail .wrap_prd > .prdimg .addimg .add_slide {display:none; width:640px;} #detail .wrap_prd > .prdimg .addimg .add_slide.slick-initialized {display:block;} #detail .wrap_prd > .prdimg .addimg .add_slide > div img {width:126px; height:126px;} #detail .wrap_prd > .prdimg .addimg .add_slide .slick-arrow {position:absolute; top:0; z-index:10; width:30px; height:126px; border:0; background-repeat:no-repeat; background-position:center; background-color:transparent; color:transparent; font-size:0; cursor:pointer;} #detail .wrap_prd > .prdimg .addimg .add_slide .slick-prev {left:0; background-image:url('/asset/img/shop/addimg_prev.png');} #detail .wrap_prd > .prdimg .addimg .add_slide .slick-next {right:0; background-image:url('/asset/img/shop/addimg_next.png');} #detail .wrap_prd > .prdimg .banner {margin-top:30px;} #detail .wrap_prd > .info {float:right; width:470px;} #detail .wrap_prd > .info > h3 {font-size:22px;} #detail .wrap_prd > .info > h1 {font-size:24px;} #detail .wrap_prd > .info > .price .sell, #detail .wrap_prd > .info > .price .sell * {font-size:22px; font-weight:400;} #detail .wrap_prd > .info > .price .per {font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; letter-spacing:-1px;} #detail .wrap_prd > .info > .price .icon {padding-left:16px;} #detail .wrap_prd > .info > .price .icon img {padding-left:3px; vertical-align:middle;} #detail .wrap_prd > .info > .price .icon img:first-child {padding-left:0;} #detail .wrap_prd > .info > .summary {padding-top:20px; color:#888; font-size:14px; line-height:22px; letter-spacing:-1px; word-break:break-all;} #detail .wrap_prd > .info .btn_fix {display:none; position:fixed; right:50%; bottom:0; z-index:20; margin-right:-600px;} #detail .wrap_prd > .info .btn_fix > a {display:inline-block; *display:inline; *zoom:1; width:150px; height:45px; padding-right:18px; background:url('/asset/img/common/arrow_top_w.png') no-repeat right 22px center #333; color:#fff; font-size:14px; text-align:center; line-height:45px; letter-spacing:-1px;} #detail .wrap_prd > .info .btn_fix.close {bottom:334px;} #detail .wrap_prd > .info .btn_fix.close > a {background-image:url('/asset/img/common/arrow_bottom_w.png');} #detail .wrap_prd > .info .list {width:100%; border-bottom:1px solid #e9e9e9;} #detail .wrap_prd > .info .list th {padding:10px 0; font-size:14px; font-weight:normal; text-align:left; vertical-align:top; letter-spacing:-1px;} #detail .wrap_prd > .info .list td {padding:10px 0; text-align:left; vertical-align:middle;} #detail .wrap_prd > .info .list td.sell {color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; text-decoration:line-through;} #detail .wrap_prd > .info .list td.sale {font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} #detail .wrap_prd > .info .list td.colorchip {padding-left:0;} #detail .wrap_prd > .info .list td .coupon {display:inline-block; *display:inline; *zoom:1; position:relative; width:150px; height:24px; padding-right:26px; background:#333; color:#fff; text-align:center; line-height:24px; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} #detail .wrap_prd > .info .list td .coupon:after {display:block; position:absolute; right:0; top:0; width:26px; height:24px; background:url('/asset/img/shop/icon_download.png') no-repeat center #ff5151; content:'';} #detail .wrap_prd > .info .list td .benefit > a {display:inline-block; *display:inline; *zoom:1; min-width:102px; height:25px; padding:0 18px; border:1px solid #e9e9e9; color:#383838; font-size:13px; text-align:center; line-height:25px; letter-spacing:-1px;} #detail .wrap_prd > .info .list td .box_colorchip {overflow:hidden; position:relative; width:350px; padding:0 10px;} #detail .wrap_prd > .info .list td .box_colorchip .slick-slide > a {display:block; position:relative; width:50px; padding-bottom:14px;} #detail .wrap_prd > .info .list td .box_colorchip .slick-slide img {width:50px; height:50px; border:1px solid #e9e9e9;} #detail .wrap_prd > .info .list td .box_colorchip .slick-slide .txt {display:none; position:absolute; left:0; bottom:0; color:#888; font-weight:300; line-height:1;} #detail .wrap_prd > .info .list td .box_colorchip .slick-slide > a:hover .txt, #detail .wrap_prd > .info .list td .box_colorchip .slick-slide > a.active .txt {display:block;} #detail .wrap_prd > .info .list td .box_colorchip .slick-slide > a:hover img, #detail .wrap_prd > .info .list td .box_colorchip .slick-slide > a.active img {border-color:#333;} #detail .wrap_prd > .info .list td .box_colorchip .slick-slide > a.active:after {display:block; position:absolute; left:50%; top:50%; width:21px; height:15px; margin:-13.5px 0 0 -10.5px; background:url('/asset/img/shop/opt_checked.png') no-repeat center; content:'';} #detail .wrap_prd > .info .list td .box_colorchip .slick-arrow {position:absolute; top:17px; z-index:5; width:7px; height:13px; padding:0; border:0; background-repeat:no-repeat; background-position:center; background-color:transparent; color:transparent; font-size:0;} #detail .wrap_prd > .info .list td .box_colorchip .slick-prev {left:0; background-image:url('/asset/img/shop/colorchip_prev.png');} #detail .wrap_prd > .info .list td .box_colorchip .slick-next {right:0; background-image:url('/asset/img/shop/colorchip_next.png');} #detail .wrap_prd > .info .list td .size {margin-left:-6px;} #detail .wrap_prd > .info .list td .size:after {display:block; clear:both; content:'';} #detail .wrap_prd > .info .list td .size > li {float:left; width:50px; margin:0 0 5px 6px; text-align:center;} #detail .wrap_prd > .info .list td .size > li a {display:block; position:relative; height:52px; border:1px solid #e9e9e9; font-size:13px; line-height:52px; min-width: 52px;} #detail .wrap_prd > .info .list td .size > li a:hover, #detail .wrap_prd > .info .list td .size > li a.active {border-color:#333;} #detail .wrap_prd > .info .list td .size > li a.active:after {display:block; position:absolute; left:50%; top:50%; width:21px; height:15px; margin:-7.5px 0 0 -10.5px; background:url('/asset/img/shop/opt_checked2.png') no-repeat center; content:'';} #detail .wrap_prd > .info .list td .btn_actual_size {margin:12px 0; padding-left:39px; background:url('/asset/img/shop/icon_actual_size1.png') no-repeat left center / 35px auto; color:#383838; font-size:13px;} #detail .wrap_prd > .info .multi_opt .selected_list {margin:12.5px 0;} #detail .wrap_prd > .info .multi_opt .selected_list > li {position:relative; padding:12.5px 20px 12.5px 0;} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt_qty {font-size:0; word-break:break-all;} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt_qty > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt {max-width:70%; padding-right:44px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt > span {position:relative; padding:0 2px 0 8px; font-size:14px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt > span:first-child {padding-left:0;} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt > span:after {display:block; position:absolute; left:0; top:0; color:#333; font-size:14px; content:'/';} #detail .wrap_prd > .info .multi_opt .selected_list > li .opt > span:first-child:after {display:none;} #detail .wrap_prd > .info .multi_opt .selected_list > li .box_qty {width:90px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .box_qty .form_input {width:88px;} #detail .wrap_prd > .info .multi_opt .selected_list > li .box_qty a.ea_down {background-image:url('/asset/img/shop/ea_down2.png');} #detail .wrap_prd > .info .multi_opt .selected_list > li .box_qty a.ea_up {background-image:url('/asset/img/shop/ea_up2.png');} #detail .wrap_prd > .info .multi_opt .selected_list > li .del {position:absolute; right:0; top:50%; margin-top:-5.5px;} #detail .wrap_prd > .info .multi_opt .opt_total {padding:17px 0 22px; border:1px solid #e9e9e9; border-width:1px 0;} #detail .wrap_prd > .info .multi_opt .opt_total dl {font-size:0;} #detail .wrap_prd > .info .multi_opt .opt_total dl > * {display:inline-block; *display:inline; *zoom:1; width:50%; vertical-align:middle;} #detail .wrap_prd > .info .multi_opt .opt_total dl dt {font-size:14px; font-weight:700;} #detail .wrap_prd > .info .multi_opt .opt_total dl dd, #detail .wrap_prd > .info .multi_opt .opt_total dl dd * {color:#ff8e77;} #detail .wrap_prd > .info .multi_opt .opt_total dl dd {font-size:14px; font-weight:700; text-align:right;} #detail .wrap_prd > .info .multi_opt .opt_total dl dd strong {font-size:22px; font-weight:500;} #detail .wrap_prd > .info .btn {margin-top:20px; font-size:0;} #detail .wrap_prd > .info .btn .msg {margin-top:19px; color:#d0591f; font-size:14px; letter-spacing:-1px;} #detail .wrap_prd > .info .btn .btn_col {margin:23px 0 13px;} #detail .wrap_prd > .info .btn .pay {margin-bottom:28px; text-align:right;} #detail .wrap_prd > .info .btn .pay .npay {float:left;} #detail .wrap_prd > .info .btn .pay .kakaopay {float:right;} #detail .wrap_prd > .info .btn .pay:after {display:block; clear:both; content:'';} #detail .wrap_prd > .info .count_share {margin-top:20px; font-size:0; text-align:center;} #detail .wrap_prd > .info .count_share li {display:inline-block; *display:inline; *zoom:1; width:25%;} #detail .wrap_prd > .info .count_share li:first-child {margin-left:0;} #detail .wrap_prd > .info .count_share li a {display:inline-block; *display:inline; *zoom:1; padding-left:20px; background-repeat:no-repeat; background-position:left center; color:#383838; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px;} #detail .wrap_prd > .info .count_share li.like a {background-image:url('/asset/img/shop/icon_like.png');} #detail .wrap_prd > .info .count_share li.review a {background-image:url('/asset/img/shop/icon_review_s.png');} #detail .wrap_prd > .info .count_share li.share a {background-image:url('/asset/img/shop/icon_share.png');} #detail .wrap_prd > .info .count_share li.grade a {background-image:url('/asset/img/shop/icon_grade_s.png');} /* 바로구매하기 */ #detail .wrap_prd > .info .fix_area.fixed .inner {overflow-y:auto; position:fixed; left:50%; bottom:0; z-index:20; width:1200px; height:334px; margin-left:-600px; padding:0 100px; border:1px solid #333; background:#fff;} #detail .wrap_prd > .info .fix_area.fixed .left_area {float:left; width:366px;} #detail .wrap_prd > .info .fix_area.fixed .right_area {float:right; width:584px;} #detail .wrap_prd > .info .fix_area.fixed .list {margin-top:20px; border-bottom:0;} #detail .wrap_prd > .info .fix_area.fixed .list tr.cpn, #detail .wrap_prd > .info .fix_area.fixed .list tr.bef {display:none;} #detail .wrap_prd > .info .fix_area.fixed .multi_opt {clear:both;} #detail .wrap_info {clear:both; margin-top:123px;} #detail .wrap_info .photo_review > div {margin-top:29px;} #detail .wrap_info .related h3 {padding:90px 0 40px; font-size:20px; font-weight:400; text-align:center;} #detail .wrap_info .tab_area {margin:140px 0 40px;} #detail .wrap_info .common_tabmenu > li {width:20%;} #detail .wrap_info .detail_info, #detail .wrap_info .common_info {word-break:break-all;} #detail .wrap_info .detail_info {} #detail .wrap_info .detail_info * {font-family:inherit; font-size:inherit; text-align:inherit; line-height:inherit;} #detail .wrap_info .detail_info img {max-width:100%; height:auto; font-size:0; line-height:0;} #detail .wrap_info .detail_info2 .inner {width:990px; margin:0 auto;} #detail .wrap_info .detail_info2 h3 {margin:100px 0 40px; font-size:20px; font-weight:400; text-align:center;} #detail .wrap_info .detail_info2 .msg {margin-top:16px; color:#888; font-size:13px;} #detail .wrap_info .detail_info2 .size_info .btn_layer .box_btn {text-align:center;} #detail .wrap_info .detail_info2 .size_info .btn_layer .box_btn > * {line-height:43px !important;} #detail .wrap_info .detail_info2 .box_colorchip {font-size:0; text-align:center;} #detail .wrap_info .detail_info2 .box_colorchip li {display:inline-block; *display:inline; *zoom:1; vertical-align:top;} #detail .wrap_info .detail_info2 .box_colorchip li .txt {color:#888; font-size:14px;} #detail .wrap_info .detail_info2 .icon_season {margin-bottom:32px; font-size:0; text-align:center;} #detail .wrap_info .detail_info2 .icon_season li {display:inline-block; *display:inline; *zoom:1; width:131px; height:131px; margin-left:115px; padding-top:84px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background-repeat:no-repeat; background-position:center top; background-color:#fbfbfb; font-size:15px; vertical-align:middle;} #detail .wrap_info .detail_info2 .icon_season li:first-child {margin-left:0;} #detail .wrap_info .detail_info2 .icon_season li.spring {background-image:url('/asset/img/shop/icon_spring.png'); background-position:center top 35px;} #detail .wrap_info .detail_info2 .icon_season li.summer {background-image:url('/asset/img/shop/icon_summer.png'); background-position:center top 29px;} #detail .wrap_info .detail_info2 .icon_season li.fall {background-image:url('/asset/img/shop/icon_fall.png'); background-position:center top 28px;} #detail .wrap_info .detail_info2 .icon_season li.winter {background-image:url('/asset/img/shop/icon_winter.png'); background-position:center top 33px;} #detail .wrap_info .detail_info2 .box_select {border:1px solid #e9e9e9; font-size:0;} #detail .wrap_info .detail_info2 .box_select li {display:inline-block; *display:inline; *zoom:1;} #detail .wrap_info .detail_info2 .select_season {padding:0 30px;} #detail .wrap_info .detail_info2 .select_season li {width:9.09%; padding:25px 0 15px; text-align:center;} #detail .wrap_info .detail_info2 .select_season li.march {width:4.54%; text-align:left;} #detail .wrap_info .detail_info2 .select_season li.february {width:4.54%; text-align:right;} #detail .wrap_info .detail_info2 .select_season li .txt {padding-bottom:13px; font-family:Malgun Gothic, '맑은 고딕'; font-size:15px;} #detail .wrap_info .detail_info2 .select_season li .bar {height:6px; background:#f4f4f4;} #detail .wrap_info .detail_info2 .select_season li.active .bar {position:relative;} #detail .wrap_info .detail_info2 .select_season li.active .bar:after {display:block; position:absolute; left:0; top:0; width:100%; height:6px; background:#d75a48; content:'';} #detail .wrap_info .detail_info2 .select_season li.active .bar:before {display:none; position:absolute; left:50%; top:50%; z-index:5; width:12px; height:12px; margin:-6px 0 0 -6px; border:1px solid #adadad; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:#fff; content:'';} #detail .wrap_info .detail_info2 .select_season li.active.first .bar:after {left:auto; right:0; width:50%;} #detail .wrap_info .detail_info2 .select_season li.active.last .bar:after {width:50%;} #detail .wrap_info .detail_info2 .select_season li.active.first .bar:before, #detail .wrap_info .detail_info2 .select_season li.active.last .bar:before {display:block;} #detail .wrap_info .detail_info2 .select_season li.march.active.first .bar:after {left:0; right:auto; width:100%;} #detail .wrap_info .detail_info2 .select_season li.march.active.first .bar:before {left:0; margin-left:0;} #detail .wrap_info .detail_info2 .select_season li.february.active.last .bar:after {width:100%;} #detail .wrap_info .detail_info2 .select_season li.february.active.last .bar:before {left:auto; right:0; margin-left:0;} #detail .wrap_info .detail_info2 .select_season li.active.one .bar:after {display:none;} #detail .wrap_info .detail_info2 .select_season li.active.one .bar:before {display:block;} #detail .wrap_info .detail_info2 .select_size {text-align:center;} #detail .wrap_info .detail_info2 .select_size li {margin:24px 0 24px 108px; padding-left:20px; font-size:15px; font-weight:300;} #detail .wrap_info .detail_info2 .select_size li:first-child {margin-left:0;} #detail .wrap_info .detail_info2 .select_size li.active {background:url('/asset/img/shop/size_checked.png') no-repeat left center;} #detail .wrap_info .detail_info2 .gamma {font-size:0;} #detail .wrap_info .detail_info2 .gamma > * {display:inline-block; width:50%; vertical-align:middle;} #detail .wrap_info .detail_info2 .gamma .info {color:#888; font-size:14px; line-height:20px;} #detail .wrap_info .detail_info2 .washing_tip {display:inline-block; *display:inline; *zoom:1; padding:20px 0 20px 82px; background:url('/asset/img/shop/icon_dry.jpg') no-repeat left center; color:#888; font-size:14px; text-align:left; line-height:20px;} #detail .wrap_info .detail_info2 .model:after {display:block; clear:both; content:'';} #detail .wrap_info .detail_info2 .model li {position:relative; float:left; margin-bottom:3px;} #detail .wrap_info .detail_info2 .model li .info {position:absolute; left:0; bottom:0; width:100%; padding-left:44px; background-color:rgba(255,255,255,0.7);} #detail .wrap_info .detail_info2 .model li .info .name {padding:14px 0 1px; font-size:21px;} #detail .wrap_info .detail_info2 .model li .info .physical {margin-left:-10px; padding-bottom:13px;} #detail .wrap_info .detail_info2 .model li .info .physical span {padding-left:10px; font-size:14px; font-weight:300; line-height:23px;} #detail .wrap_info dl.cscenter {margin-bottom:40px; padding:0 40px; font-size:0;} #detail .wrap_info dl.cscenter > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #detail .wrap_info dl.cscenter dt {width:300px; padding:15px 0 20px 109px; background:url('/asset/img/shop/icon_cscenter.png') no-repeat left center; font-size:14px;} #detail .wrap_info dl.cscenter dt p {padding-top:4px; color:#d75a48; font-size:25px; line-height:1;} #detail .wrap_info dl.cscenter dd {width:820px; color:#888; font-size:14px; line-height:21px; letter-spacing:-1px;} /* 주문스텝 - 장바구니 (shop_cart.html), 주문서 (shop_order.html), 주문완료 (shop_order_finish.html) */ .order_step {padding-bottom:65px; font-size:0; text-align:center;} .order_step li {display:inline-block; *display:inline; *zoom:1; position:relative; padding:48px 54px 0; background-repeat:no-repeat; background-position:center top; color:#888; font-size:14px; vertical-align:middle;} .order_step li:after {display:block; position:absolute; left:-49px; top:18px; width:98px; height:1px; background:#dbdbdb; content:'';} .order_step li:first-child:after {display:none;} .order_step li span {color:inherit; font-size:inherit; font-weight:500;} .order_step li.cart {background-image:url('/asset/img/shop/order_step0.png');} .order_step li.order {background-image:url('/asset/img/shop/order_step1.png'); background-position:center top 3px;} .order_step li.finish {background-image:url('/asset/img/shop/order_step2.png');} .order_step li.active {color:#333; font-weight:700;} .order_step li.cart.active {background-image:url('/asset/img/shop/order_step0_on.png');} .order_step li.order.active {background-image:url('/asset/img/shop/order_step1_on.png');} .order_step li.finish.active {background-image:url('/asset/img/shop/order_step2_on.png');} /* 장바구니 (shop_cart.html) */ .check_all {padding-bottom:10px; text-align:left;} .check_all input {margin:0;} .check_all label {font-size:13px;} #cart .area_left {float:left; width:840px;} #cart .area_left .btn {padding-top:20px;} #cart .area_left .msg {margin-top:60px; padding-left:25px;} #cart .area_left .msg dt {padding-bottom:10px; font-weight:bold;} #cart .area_left .msg dd {color:#888; font-size:11px; line-height:1.8;} #cart .area_right {float:right; width:310px; margin-top:29px;} #cart .area_right .box {margin-bottom:3px; padding:40px 45px; background:#fbfbfb;} #cart .area_right .box .deliveryInfo {position:relative; padding:23px 0 31px; border-top:1px solid #dfdfdf; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; letter-spacing:-2px;} #cart .area_right .box .deliveryInfo span {font:inherit;} #cart .pay {text-align:center;} #cart .pay > a {display:block; margin-top:23px;} #cart .recommend {padding:140px 0 100px;} #cart .recommend h3 {padding-bottom:20px; font-size:20px; font-weight:normal; text-align:left;} #cart .recommend .slick-dots {padding-top:26px;} #cart .recommend .slick-dots li button {width:10px; height:10px; border:0; border-radius:0; background:#e4e4e4;} #cart .recommend .slick-dots li.slick-active button {background:#383533;} #cart .guide .tbl_guide {width:100%;} #cart .guide .tbl_guide th {padding:60px 0; border-top:1px solid #dbdbdb; font-size:20px; font-weight:normal; vertical-align:top;} #cart .guide .tbl_guide td {padding:60px 0; border-top:1px solid #dbdbdb; vertical-align:top;} #cart .guide .tbl_guide td ul li {position:relative; padding-left:9px; color:#888; font-size:13px; line-height:1.8;} #cart .guide .tbl_guide td ul li:after {display:block; content:'-'; position:absolute; top:0; left:0; color:#888; font-size:13px;} #cart .guide .tbl_guide td .box_btn * {width:165px; height:40px; padding:0; line-height:40px;} #cart .likePop {display:none; position:fixed; left:50%; top:50%; z-index:10; width:416px; height:175px; margin:-97px 0 0 -218px; padding:10px; border:2px solid #e0e0e0; background:#fff; text-align:center; line-height:14px;} #cart .likePop .closePop {height:56px; text-align:right;} #cart .likePop .txt {height:42px;} /* 주문서 (shop_order.html) */ #order:after {display:block; clear:both; content:'';} #order .area_left {float:left; width:63%;} #order .area_left {float:left; width:840px;} #order .area_right {float:right; width:310px; margin-top:39px;} #order .area_right .inner.fixed {position:fixed; right:50%; top:0; margin-right:-600px;} #order .area_right .box {width:310px; padding:30px 34px; background:#f8f8f8;} #order .area_right .box .line {margin-top:25px; border-top:1px solid #dfdfdf;} #order .total {padding-bottom:10px; font-size:16px; font-weight:700;} #order .total span {color:#d0591f; font-family:Malgun Gothic, '맑은 고딕'; font-size:inherit; font-weight:inherit;} #order h3.title {position:relative; padding:56px 0 13px; font-size:16px; font-weight:700;} #order p.title {padding:21px 0 9px; font-size:15px; font-weight:700;} #order p.title.first {padding-top:0;} #order p.title.line {border-top:1px solid #dfdfdf;} #order .total_ord_prc {margin-top:20px; padding-top:27px; border-top:1px solid #dfdfdf; font-size:0;} #order .total_ord_prc > * {display:inline-block; *display:inline; *zoom:1; width:50%;} #order .total_ord_prc dt {font-size:15px; font-weight:700;} #order .total_ord_prc dd {color:#d0591f; font-size:14px; font-weight:700; text-align:right;} #order .total_ord_prc dd strong {color:#d0591f; font-size:22px; font-weight:500;} #order .check {font-size:0;} #order .check label {display:inline-block; *display:inline; *zoom:1; padding-left:5px; color:#999; font-size:13px; font-weight:400; vertical-align:middle;} #order .area_right .btn {margin-top:20px;} #order .area_right .btn .box_btn {margin-bottom:10px;} #order .select {position:absolute; left:128px; top:60px;} #order .select label {padding:0 22px 0 4px; color:#666; font-size:14px;} #order .tab_method {border-top:1px solid #333; border-right:1px solid #e0e0e0;} #order .tab_method:after {display:block; clear:both; content:'';} #order .tab_method li {float:left; width:25%; border:1px solid #e0e0e0; border-width:0 0 1px 1px; text-align:center;} #order .tab_method li a {display:block; padding:101px 0 25px; background-position:center top; background-repeat:no-repeat; color:#3e3e3e; font-size:14px; font-weight:700;} #order .tab_method li.deposit a {background-image:url('/asset/img/shop/icon_method_deposit.png'); background-position:center top 39px;} #order .tab_method li.credit a {background-image:url('/asset/img/shop/icon_method_credit.png'); background-position:center top 39px;} #order .tab_method li.realtime a {background-image:url('/asset/img/shop/icon_method_realtime.png'); background-position:center top 37px;} #order .tab_method li.mobile a {background-image:url('/asset/img/shop/icon_method_mobile.png'); background-position:center top 31px;} #order .tab_method li.samsung a {background-image:url('/asset/img/shop/icon_method_samsung.png'); background-position:center top 34px;} #order .tab_method li.payco a {background-image:url('/asset/img/shop/icon_method_payco.png'); background-position:center top 50px;} #order .tab_method li.kakao a {background-image:url('/asset/img/shop/icon_method_kakao.png'); background-position:center top 47px;} #order .tab_method li.empty {padding:0 !important;} #order .tab_method li.empty a {color:transparent; cursor:default;} #order .tab_method li a.active {background-color:#3e3e3e; color:#fff;} #order .tab_method li.deposit a.active {background-image:url('/asset/img/shop/icon_method_deposit_active.png');} #order .tab_method li.credit a.active {background-image:url('/asset/img/shop/icon_method_credit_active.png');} #order .tab_method li.realtime a.active {background-image:url('/asset/img/shop/icon_method_realtime_active.png');} #order .tab_method li.mobile a.active {background-image:url('/asset/img/shop/icon_method_mobile_active.png');} #order .tab_method li.samsung a.active {background-image:url('/asset/img/shop/icon_method_samsung_active.png');} #order .tab_method li.payco a.active {background-image:url('/asset/img/shop/icon_method_payco_active.png');} #order .tab_method li.kakao a.active {background-image:url('/asset/img/shop/icon_method_kakao_active.png');} #order .tabcnt_method {display:none;} #order .method2 {padding-top:30px;} #order .method2 > div {padding:11px 0; border-bottom:1px solid #e0e0e0; font-size:0;} #order .method2 > div:first-child {border-top:1px solid #e0e0e0;} #order .method2 > div label {display:inline-block; *display:inline; *zoom:1; width:152px; padding-left:20px; font-size:14px; vertical-align:middle;} #order .method2 > div select {display:inline-block; *display:inline; *zoom:1; color:#333; font-size:14px; vertical-align:middle;} #order .method2 > div select.deposit {width:680px;} #order .method2 > div select.year {width:90px;} #order .method2 > div select.month, #order .method2 > div select.day {width:60px;} #order .method2 > div .form_input {vertical-align:middle;} #order .method2 > div .form_input.provider {width:305px;} #order .method2 > div .bar, #order .method2 > div .msg {display:inline-block; *display:inline; *zoom:1; color:#888; font-size:14px; vertical-align:middle; letter-spacing:-1px;} #order .method2 > div .msg {margin-left:15px; line-height:19px;} #order .method2 > div .bar {padding:0 10px;} #order .method2 .choice {padding-bottom:29px; color:#3e3e3e; font-size:14px;} #order .method2 .choice strong {font-size:14px;} #order .method2 .info_method li {padding:3px 0;} #order .method2 .info_method li dl {font-size:0;} #order .method2 .info_method li dl > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #order .method2 .info_method li dl dt {position:relative; width:140px; padding-left:10px; color:#3e3e3e; font-size:14px;} #order .method2 .info_method li dl dt:after {display:block; position:absolute; left:0; top:50%; width:2px; height:2px; margin-top:-1px; background:#333; content:'';} #order .method2 .info_method li dl dd {color:#888; font-size:14px;} /* 쿠폰선택 레이어 */ #order .cpn_layer {width:900px;} #order .cpn_layer h3 {padding:53px 0 20px;} #order .cpn_layer .inner {padding:0 50px 60px;} #order .cpn_layer .btn {margin-top:40px;} /* 주문완료 (shop_order_finish.html) */ #orderfin {width:700px; margin:0 auto;} #orderfin .info {margin-bottom:20px; padding:26px 0 22px; background:#f7f7f7; color:#282828; font-size:14px; text-align:center; line-height:31px;} #orderfin .info span {color:#d0591f; font-family:Malgun Gothic, '맑은 고딕'; font-size:inherit; font-weight:700;} #orderfin .detail_info {margin-top:30px; padding:22px 0; border:1px solid #dbdbdb;} #orderfin .msg {padding-top:22px; color:#888; font-size:14px; line-height:30px;} #orderfin .btn {margin-top:42px;} /* 상품문의 - 상품상세 상품문의 (shop_detail.html) & 마이페이지 상품문의 (mypage_qna_list.html) */ .qnarev_list h3.title .count {position:absolute; right:0; top:6px; font-size:0;} .qnarev_list h3.title .count li {display:inline-block; *display:inline; *zoom:1; margin-left:27px; color:#888; font-size:14px; vertical-align:middle;} .qnarev_list h3.title .count li:first-child {margin-left:0;} .qnarev_list h3.title .count li span {font-size:14px;} .qnarev_list .btn_top {position:relative; margin-bottom:21px; padding-right:140px; color:#888; font-size:14px; line-height:21px;} .qnarev_list .btn_top .box_btn {position:absolute; right:0; top:0;} .qnarev_list .btn_top .box_btn > * {padding-left:19px; background-image:url('/asset/img/shop/icon_qna_write.png'); background-repeat:no-repeat; background-position:left 28px center;} .qnarev_list .btn {text-align:right;margin:20px 0;} /* 상품문의 - 상품상세 상품문의 글쓰기 (shop_detail.html) */ .qnarev_write .btn {margin:20px 0 50px;} /*-----------------------------------------------------------------*/ /* 4-3. 회원 /*-----------------------------------------------------------------*/ /* 로그인 */ .box_member .form_box {padding-bottom:60px;} .box_member .form_login {float:left; width:420px;} .box_member .form_nomember {float:right; width:420px;} .box_member .join_suggest {clear:both;} .box_member fieldset {position:relative;} .box_member fieldset legend {padding:19px 0 28px; color:#282828; font-size:20px;} .box_member fieldset .fld {margin-bottom:20px; font-size:0;} .box_member fieldset .fld label {display:none;} .box_member fieldset .fld select {width:102px; height:44px; padding:0; border:0; border-bottom:1px solid #e9e9e9; color:#a9a9a9; font-size:13px; line-height:44px;} .box_member fieldset .fld.addbtn {position:relative;} .box_member fieldset .fld.addbtn .box_btn {position:absolute; right:-115px; bottom:0;} .box_member fieldset .savessl {margin-bottom:20px;} .box_member fieldset .savessl label {font-size:13px;} .box_member fieldset .savessl .ssl {-webkit-appearance:none; appearance:none; display:inline-block; *display:inline; *zoom:1; width:10px; height:14px; background:url('/asset/img/member/i_ssl.png') no-repeat center;} /* 로그인 & 아이디 비밀번호 찾기 & 비밀번호 변경 - 인풋 기본 스타일 */ .box_member .form_input.member {width:100%; height:44px; padding:0 3px; border:0; border-bottom:1px solid #e9e9e9; line-height:44px;} .box_member .form_input.form_cell1 {width:137px; margin:0 25px;} .box_member .form_input.form_cell2 {width:130px;} .box_member .form_input.member:focus {border-color:#000;} /* 로그인(member_login.html) */ #login {width:970px; margin:0 auto;} #login .guest_order {margin-bottom:30px;} #login .find_remove {padding-top:49px; font-size:0; text-align:center;} #login .find_remove li {display:inline-block; *display:inline; *zoom:1; position:relative;} #login .find_remove li:after {display:block; position:absolute; left:0; top:50%; width:1px; height:10px; margin-top:-5px; background:#e9e9e9; content:'';} #login .find_remove li:first-child:after {display:none;} #login .find_remove li a {display:block; padding:0 20px 0 16px; font-size:14px;} #login .sns_login dt {padding:51px 0 30px; color:#282828; font-size:20px;} #login .sns_login dd {font-size:0;} #login .sns_login dd a {display:inline-block; *display:inline; *zoom:1; width:45px; height:45px; margin-left:20px; background-repeat:no-repeat; background-position:center; color:transparent; font-size:0; vertical-align:middle;} #login .sns_login dd a:first-child {margin-left:0;} #login .sns_login dd a.kakao {background-image:url('/asset/img/member/icon_kakao.png');} #login .sns_login dd a.naver {background-image:url('/asset/img/member/icon_naver.png');} #login .sns_login dd a.facebook {background-image:url('/asset/img/member/icon_facebook.png');} #login .member_suggest {position:relative; padding-bottom:71px; border-top:1px solid #e9e9e9;} #login .member_suggest dl dt {padding:54px 0 13px; color:#282828; font-size:20px;} #login .member_suggest dl dd {color:#888; font-size:14px; line-height:22px;} #login .member_suggest .box_btn {position:absolute; right:0; top:81px;} #login .membership {padding-bottom:62px; border-top:1px solid #e9e9e9;} #login .membership .title {padding:84px 0 56px; color:#282828; font-size:20px;} #login .membership ul:after {display:block; clear:both; content:'';} #login .membership ul li {float:left; width:16.66%; padding-bottom:58px; text-align:center;} #login .membership ul li:nth-child(6n+1) {clear:both;} #login .membership ul li dl dt {padding:62px 0 8px; background-repeat:no-repeat; background-position:center top; color:#40372e; font-size:15px; font-weight:700;} #login .membership ul li dl dd {color:#a9a9a9; font-size:13px; line-height:19px;} #login .membership ul li.milage dl dt {background-image:url('/asset/img/etc/icon_milage.png'); background-position:center top 9px;} #login .membership ul li.bookmark dl dt {background-image:url('/asset/img/etc/icon_bookmark.png'); background-position:center top 9px;} #login .membership ul li.addinfo dl dt {background-image:url('/asset/img/etc/icon_addinfo.png'); background-position:center top 8px;} #login .membership ul li.day dl dt {background-image:url('/asset/img/etc/icon_day.png'); background-position:center top 8px;} #login .membership ul li.email dl dt {background-image:url('/asset/img/etc/icon_email.png'); background-position:center top 11px;} #login .membership ul li.birthday dl dt {background-image:url('/asset/img/etc/icon_birthday.png'); background-position:center top 5px;} #login .membership ul li.review dl dt {background-image:url('/asset/img/etc/icon_reviewmilage.png'); background-position:center top 6px;} #login .membership ul li.queen dl dt {background-image:url('/asset/img/etc/icon_queen.png'); background-position:center top 15px;} #login .membership ul li.attend dl dt {background-image:url('/asset/img/etc/icon_attend.png'); background-position:center top 4px;} #login .membership ul li.excellent dl dt {background-image:url('/asset/img/etc/icon_excellent.png'); background-position:center top 11px;} #login .membership ul li.size dl dt {background-image:url('/asset/img/etc/icon_size.png'); background-position:center top 6px;} #login .membership ul li.new dl dt {background-image:url('/asset/img/etc/icon_new.png');} /* 아이디,비밀번호 찾기 (member_find_step1.html) */ #find {width:420px; margin:0 auto;} #find .tab_find {margin-bottom:28px;} #find .tab_find:after {display:block; clear:both; content:'';} #find .tab_find li {float:left; margin-left:41px;} #find .tab_find li:first-child {margin-left:0;} #find .tab_find li a {display:block; padding-left:24px; background:url('/asset/img/common/radio.png') no-repeat left center; color:#282828; font-size:18px;} #find .tab_find li a.active {background-image:url('/asset/img/common/radio_checked.png');} #find .tabcnt_find {display:none;} #find .tabcnt_find0 {display:block;} /* 휴면계정해제 (member_dormant_account.html) */ #dormant {width:420px; margin:0 auto;} /* 회원가입 스텝 */ .join_step {padding-bottom:65px; font-size:0; text-align:center;} .join_step li {display:inline-block; *display:inline; *zoom:1; position:relative; padding:48px 40px 0; background-repeat:no-repeat; background-position:center top; color:#888; font-size:14px; vertical-align:middle;} .join_step li:after {display:block; position:absolute; left:-49px; top:18px; width:98px; height:1px; background:#dbdbdb; content:'';} .join_step li:first-child:after {display:none;} .join_step li span {color:inherit; font-size:inherit; font-weight:500;} .join_step li.agree {background-image:url('/asset/img/member/join_step0.png');} .join_step li.form {background-image:url('/asset/img/member/join_step1.png'); background-position:center top 3px;} .join_step li.finish {background-image:url('/asset/img/member/join_step2.png');} .join_step li.active {color:#333; font-weight:700;} .join_step li.agree.active {background-image:url('/asset/img/member/join_step0_on.png');} .join_step li.form.active {background-image:url('/asset/img/member/join_step1_on.png');} .join_step li.finish.active {background-image:url('/asset/img/member/join_step2_on.png');} /* 회원가입 약관동의(member_join_step1.html) */ #join_agree {width:980px; margin:0 auto;} #join_agree iframe {width:100%; height:520px; padding:25px 30px; border:1px solid #dbdbdb;} #join_agree .check {padding:15px 0; font-size:0;} #join_agree .check input[type="radio"] {margin:0;} #join_agree .check label {display:inline-block; *display:inline; *zoom:1; padding:0 31px 0 7px; font-size:14px; vertical-align:middle;} #join_agree .btn {padding-top:33px;} /* 회원가입 정보입력(member_join_frm.html) */ #join_input {width:980px; margin:0 auto;} #join_input fieldset {padding:37px 100px; border:1px solid #dbdbdb;} #join_input .box > div {margin-bottom:23px;} #join_input .box > div > label {display:inline-block; *display:inline; *zoom:1; width:184px; color:#888; font-size:14px; vertical-align:middle;} #join_input .box > div > label > span {color:#cf591f; font-size:inherit;} #join_input .box > div .form_input {display:inline-block; *display:inline; *zoom:1; height:35px; padding:0; border:0; border-bottom:1px solid #dbdbdb; font-size:14px; line-height:35px; vertical-align:middle;} #join_input .box > div .form_input.form_name, #join_input .box > div .form_input.form_id {width:330px;} #join_input .box > div .form_input.form_cell1, #join_input .box > div .form_input.form_cell2 {width:110px;} #join_input .box > div .form_input.form_cell1 {margin:0 17px;} #join_input .box > div .form_input.form_email {width:440px;} #join_input .box > div select {display:inline-block; *display:inline; *zoom:1; height:35px; padding:0; border:0; border-bottom:1px solid #dbdbdb; font-size:14px; line-height:35px; vertical-align:middle;} #join_input .box > div .check {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #join_input .box > div .check input[type="radio"] {margin:0;} #join_input .box > div .check label {display:inline-block; *display:inline; *zoom:1; padding:0 40px 0 8px; font-size:14px; vertical-align:middle;} #join_input .box > div .bar {display:inline-block; *display:inline; *zoom:1; padding:0 5px; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; vertical-align:middle;} #join_input .box .addbtn .box_btn {margin-left:12px;} #join_input .box .mobile select {width:70px;} #join_input .btn {margin-top:30px;} /* 회원가입완료(member_join_step3.html) */ #join_finish {width:980px; margin:0 auto; text-align:center;} #join_finish .box {border:1px solid #dbdbdb;} #join_finish .box .username {padding:54px 0 13px; font-size:18px;} #join_finish .box .icon {padding-bottom:23px;} #join_finish .box .msg {padding-bottom:63px; font-size:17px;} #join_finish .box .msg p {color:#d0591f; font-size:14px;} #join_finish .btn {margin-top:30px;} /*-----------------------------------------------------------------*/ /* 4-4. 마이페이지 /*-----------------------------------------------------------------*/ /* 마이페이지 좌측메뉴 */ #my_menu {position:absolute; left:0; top:0; width:160px;} #my_menu dl dt {padding:36px 0 7px 0; color:#404040; font-size:18px;} #my_menu dl:first-child dt {padding-top:0;} #my_menu dl dd, #my_menu dl dd * {color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} #my_menu dl dd a {display:inline-block; *display:inline; *zoom:1; padding:3px 0;} #my_menu dl dd a.active {position:relative; color:#333;} #my_menu dl dd a.active:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#333; content:'';} /* 마이페이지 회원정보 */ #my_info {margin-bottom:40px; background:#fbfbfb;} #my_info:after {display:block; clear:both; content:'';} #my_info .member {float:left; width:552px; padding:42px 0 47px 68px; font-size:0;} #my_info .member > div {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #my_info .member .icon {width:68px; margin-right:22px;} #my_info .member .text {width:326px;} #my_info .member .text .grade, #my_info .member .text .grade * {font-size:20px;} #my_info .member .text .grade {margin-bottom:13px;} #my_info .member .text .detail, #my_info .member .text .detail * {color:#888; font-size:14px; line-height:21px;} #my_info .member .text .detail strong {color:#333; font-weight:500;} #my_info .member .text .detail strong:first-of-type {font-family:Malgun Gothic, '맑은 고딕'; font-weight:700;} #my_info .count {position:relative; float:left; width:648px; padding-left:114px; font-size:0;} #my_info .count:after{display:block; position:absolute; left:0; top:50%; width:1px; height:82px; margin-top:-41px; background:#dbdbdb; content:'';} #my_info .count li {display:inline-block; *display:inline; *zoom:1; width:130px; vertical-align:middle;} #my_info .count li dl dt {padding-top:58px; font-size:16px;} #my_info .count li dl dd, #my_info .count li dl dd * {font-family:Malgun Gothic, '맑은 고딕';} #my_info .count li dl dd {padding-bottom:65px; font-size:14px;} #my_info .count li dl dd strong {font-size:20px; font-weight:400;} /* 마이페이지 공통 박스 */ .box_mp {margin-bottom:20px; padding:28px 0 25px; border:1px solid #e9e9e9;} .box_mp dl:after {display:block; clear:both; content:'';} .box_mp dl > * {float:left; width:50%;} .box_mp dl dt {padding-left:65px; background:url('/asset/img/mypage/icon_money.png') no-repeat left 40px center; color:#404040; font-size:14px; text-align:left;} .box_mp dl dd, .box_mp dl dd * {font-family:Malgun Gothic, '맑은 고딕';} .box_mp dl dd {padding-right:40px; font-size:14px; text-align:right;} .box_mp dl dd span {font-size:20px;} .msg_mp {position:relative; height:35px; margin-bottom:30px; font-size:15px; line-height:35px;} .msg_mp .btn {position:absolute; right:0; top:0;} .tab_mp {margin-bottom:30px;} .tab_mp li {width:50%;} .tabcnt_mp {display:none;} .tabcnt_mp0 {display:block;} .info_mp li {position:relative; padding-left:14px; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; line-height:29px;} .info_mp li:after {display:block; position:absolute; left:1px; top:13px; width:3px; height:3px; background:#333; content:'';} /* 마이페이지 주문내역 검색 */ .order_search {position:relative; padding-right:486px;} .order_search .selection {padding:6px 0 26px; font-size:0;} .order_search .selection li {display:inline-block; *display:inline; *zoom:1; margin-left:58px; vertical-align:middle;} .order_search .selection li:first-child {margin-left:0;} .order_search .selection li a {display:block; padding:1px 2px 3px; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:15px;} .order_search .selection li a.active {position:relative; color:#404040;} .order_search .selection li a.active:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#404040; content:'';} .order_search .calendar {position:absolute; right:0; top:0; font-size:0;} .order_search .calendar span {display:inline-block; *display:inline; *zoom:1; width:16px; text-align:center; line-height:40px; vertical-align:middle;} .order_search .calendar .form_input {width:185px; height:40px; padding:0 10px; line-height:40px; vertical-align:middle;} .order_search .calendar .btn {display:inline-block; *display:inline; *zoom:1; width:90px; height:40px; margin-left:10px; padding:0; border:0; background:#333; color:#fff; font-size:15px; line-height:40px; vertical-align:middle;} /* 마이페이지 메인 (mypage_mypage.html) */ #mypage .step {border:1px solid #e9e9e9;} #mypage .step:after {display:block; clear:both; content:'';} #mypage .step ul {float:left; width:712px; padding:54px 0 35px; font-size:0;} #mypage .step ul li {display:inline-block; *display:inline; *zoom:1; width:20%; text-align:center; vertical-align:middle;} #mypage .step ul li a {display:block; padding-top:49px; background-repeat:no-repeat; background-position:center top; color:#888; font-size:14px;} #mypage .step ul li.order a {background-image:url('/asset/img/mypage/icon_step_order.png');} #mypage .step ul li.pay a {background-image:url('/asset/img/mypage/icon_step_pay.png'); background-position:center top 4px;} #mypage .step ul li.ready a {background-image:url('/asset/img/mypage/icon_step_ready.png'); background-position:center top 1px;} #mypage .step ul li.ing a {background-image:url('/asset/img/mypage/icon_step_ing.png'); background-position:center top 4px;} #mypage .step ul li.finish a {background-image:url('/asset/img/mypage/icon_step_finish.png'); background-position:center top 1px;} #mypage .step ul li a span {position:relative; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} #mypage .step ul li a span:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#888; content:'';} #mypage .step .return {float:left; width:266px; padding:35px 72px 40px;} #mypage .step .return dl {font-size:0;} #mypage .step .return dl > * {display:inline-block; *display:inline; *zoom:1; width:50%; padding:6px 0; vertical-align:middle;} #mypage .step .return dl dt {color:#888; font-size:14px;} #mypage .step .return dl dd, #mypage .step .return dl dd * {font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} #mypage .step .return dl dd {text-align:right;} #mypage .step .return dl dd a {display:block;} #mypage .step .return dl dd span {display:inline-block; *display:inline; *zoom:1; position:relative;} #mypage .step .return dl dd span:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#333; content:'';} #mypage .my_review {padding:27px 40px 29px; border:1px solid #e9e9e9;} #mypage .my_review:after {display:block; clear:both; content:'';} #mypage .my_review > * {float:left; width:50%;} #mypage .my_review dt {padding-left:19px; background:url('/asset/img/mypage/icon_review.png') no-repeat left center; color:#404040; font-size:14px;} #mypage .my_review dd, #mypage .my_review dd * {color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} #mypage .my_review dd {text-align:right;} #mypage .my_review dd span {display:inline-block; *display:inline; *zoom:1; position:relative;} #mypage .my_review dd span:after {display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#888; content:'';} /* 마이페이지 주문상세정보 (mypage_order_detail.html) */ #mypage_order_detail > .box_price {margin-top:10px; padding:30px; background-color:#fbfbfb; font-size:14px; font-weight:bold; text-align:right;} #mypage_order_detail > .box_price > span {padding-left:20px; color:#cf591f; font-size:inherit; font-weight:bold;} #mypage_order_detail > .btn {padding-top:30px; text-align:center;} /* 마이페이지 교환반품신청 (mypage_exchange.html) */ #mypage_exchange > .reason {position:relative; padding:10px 0; border-bottom:1px solid #e9e9e9;} #mypage_exchange > .reason:after {display:block; clear:both; content:'';} #mypage_exchange > .reason > .title {position:absolute; left:30px; top:50%; margin-top:-14px; color:#404040; font-size:13px; font-weight:bold;} #mypage_exchange > .reason > .text {float:right; width:780px; border:0; padding:15px; background-color:#fbfbfb;} #mypage_exchange > .btn {padding-top:30px; text-align:center;} /* 적립금 (mypage_milage.html) */ #milage .box_mp:after {display:block; clear:both; content:'';} #milage .box_mp dl {float:left; width:50%;} /* 배송지&환불계좌 관리 (mypage_addr_return.html) */ .addr_return_layer {display:none; position:fixed; left:50%; top:50%; z-index:15; width:740px; background:#fff; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .addr_return_layer .inner {position:relative; padding:0 30px;} .addr_return_layer .title {padding:40px 0 20px; font-size:18px;} .addr_return_layer .btn {padding:20px 0 40px;} /* 쿠폰 (mypage_coupon.html) */ #coupon .cpn_down_list {margin-bottom:30px; font-size:0;} #coupon .cpn_down_list li {display:inline-block; *display:inline; *zoom:1; overflow:hidden; margin-left:20px; vertical-align:middle; position: relative;} #coupon .cpn_down_list li:first-child {margin-left:0;} #coupon .cpn_down_list li .box {width:220px; height:110px; border:1px solid #e9e9e9; font-size:0;} #coupon .cpn_down_list li .box > * {display:inline-block; *display:inline; *zoom:1; position:relative; vertical-align:top;} #coupon .cpn_down_list li .box > *:after {display:block; position:absolute; top:50%; width:8px; height:13px; margin-top:-6.5px; background-repeat:no-repeat; background-position:center; content:'';} #coupon .cpn_down_list li .box .name_per {position:relative; width:160px; padding:8px 13px 0 20px;} #coupon .cpn_down_list li .box .name_per:after {left:-1px; background-image:url('/asset/img/mypage/icon_cpn_left.png');} #coupon .cpn_down_list li .box .name_per p {color:#404040; line-height:normal; letter-spacing:-0.5px;} #coupon .cpn_down_list li .box .name {padding:19px 0 1px; font-size:14px;} #coupon .cpn_down_list li .box .per {padding-bottom:11px; font-size:23px;} #coupon .cpn_down_list li .box .period {width: 58px;padding: 31px 12px 26px 8px;border-left: 1px dashed #e9e9e9;background: #fafafa;color: #888;font-family: Malgun Gothic, '맑은 고딕';font-size: 13px;text-align: center;line-height: 17px;letter-spacing: -0.8px;position: absolute;right: 1px;top: 1px;} #coupon .cpn_down_list li .box .period:after {right:-1px; background-image:url('/asset/img/mypage/icon_cpn_right.png');} /* 회원정보수정 (mypage_edit_frm.html) */ #edit_input fieldset .box > div {margin-bottom:23px; font-size:0;} #edit_input fieldset .box > div label {display:inline-block; *display:inline; *zoom:1; font-size:14px; vertical-align:top;} #edit_input fieldset .box > div select {height:35px; padding:0; border:0; border-bottom:1px solid #dbdbdb; color:#333; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; line-height:35px;} #edit_input fieldset .box > div > label {width:183px; color:#888;} #edit_input fieldset .box > div > label span {font-size:14px;} #edit_input fieldset .box > div .bar {font-size:14px; line-height:35px;} #edit_input fieldset .box > div .check {display:inline-block; *display:inline; *zoom:1; width:797px; vertical-align:top;} #edit_input fieldset .box > div .check > label {padding:0 40px 0 8px;} #edit_input fieldset .box > div .list:after {display:block; clear:both; content:'';} #edit_input fieldset .box > div .list li {float:left; margin-bottom:20px;} #edit_input fieldset .box > div .list li label {padding-left:7px;} #edit_input fieldset .box > div .list_radio li label {padding-right:40px} #edit_input fieldset .box > div .list_checkbox li label {padding-right:25px;} #edit_input fieldset .box > div .form_input {height:35px; padding:0; border:0; border-bottom:1px solid #dbdbdb; color:#333; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; line-height:35px;} #edit_input fieldset .box > div .form_input.readonly {border:0; background:#fff !important;} #edit_input fieldset .box > div .form_input.form_name, #edit_input fieldset .box > div .form_input.form_nick, #edit_input fieldset .box > div .form_input.form_id {width:330px;} #edit_input fieldset .box > div .form_input.form_cell1, #edit_input fieldset .box > div .form_input.form_cell2 {width:110px;} #edit_input fieldset .box > div .form_input.form_cell1 {margin:0 20px;} #edit_input fieldset .box > div .form_input.form_addr0 {width:220px;} #edit_input fieldset .box > div .form_input.form_email {width:612px;} #edit_input fieldset .box > div .form_input.form_job {width:620px;} #edit_input fieldset .box > div .textarea {width:797px; margin:16px 0 0 183px;} #edit_input fieldset .box > div .textarea textarea.form_input {height:160px; padding:20px; border:1px solid #dbdbdb;} #edit_input fieldset .box .addbtn .box_btn {margin-left:15px;} #edit_input fieldset .box .mobile select {width:70px;} #edit_input fieldset .box .address {font-size:0;} #edit_input fieldset .box .address .addbtn {display:inline-block; *display:inline; *zoom:1; margin-left:0; font-size:0; vertical-align:top;} #edit_input fieldset .box .address > p {margin:0 0 23px 183px;} #edit_input fieldset .box .birth .bar {padding:0 29px 0 12px;} #edit_input fieldset .box .birth .msg {padding-left:6px; font-size:14px; line-height:35px;} #edit_input fieldset .box .marry .check p {display:inline-block; *display:inline; *zoom:1; vertical-align:top;} #edit_input .btn {margin-top:17px;} /* 출석체크(mypage_attend.html) */ #attend .bg {min-height:1267px; margin-top:63px; background:url('/asset/img/mypage/bg_attend.jpg') no-repeat left top;} #attend h3 {padding:59px 0 14px; text-align:center;} #attend .event_cpn, #attend .event_cpn * {color:#fff; font-family:Malgun Gothic, '맑은 고딕'; font-size:15px;} #attend .event_cpn {padding-bottom:28px; text-align:center;} #attend .event_cpn p {display:inline-block; *display:inline; *zoom:1; padding:3px 18px 5px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background-color:rgba(255,255,255,0.2);} #attend .number, #attend .number * {color:#fff;} #attend .number {padding-bottom:5px; text-align:center;} #attend .number .month {padding-right:16px; font-size:29px;} #attend .number .month strong {font-size:40px; font-weight:400;} #attend .number .day {font-size:20px;} #attend .number .day strong {font-size:28px; font-weight:400;} #attend .calendar {position:relative; width:1020px; margin:0 auto;} #attend .calendar .bg_icon {position:absolute; left:86px; top:-73px;} #attend .calendar table {table-layout:fixed; width:100%;} #attend .calendar table thead tr th {padding:17px 0 12px; border-left:1px solid rgba(255,255,255,0.2); border-bottom:2px solid #dbdbdb; background:#f4f4f4; font-size:22px; font-weight:700; text-align:center; vertical-align:middle;} #attend .calendar table thead tr th:first-child {border-left:0;} #attend .calendar table tbody {background:#fff;} #attend .calendar table tbody tr td {padding:5px 0 83px 11px; border:1px solid #e3dfd7; border-width:1px 0 0 1px; color:#cfcbc4; font-size:18px; font-weight:700; vertical-align:top;} #attend .calendar table tbody tr td:first-child {border-left:0;} #attend .calendar table tbody tr td.active {position:relative;} #attend .calendar table tbody tr td.active .icon {position:absolute; left:50%; top:50%; margin:-35px 0 0 -35px;} #attend .btn {padding-top:50px;} #attend .msg {margin-top:26px; padding-left:17px; background:url('/asset/img/common/i_notice.png') no-repeat left center; color:#888; font-size:13px;} /* 회원탈퇴 (mypage_withdraw.html) */ #withdraw .msg {margin-bottom:28px; color:#888; font-size:14px; line-height:24px;} #withdraw textarea {height:160px; padding:20px; border:1px solid #dbdbdb; color:#888; font-size:14px;} #withdraw .btn {margin-top:40px;} /*-----------------------------------------------------------------*/ /* 4-5. 추가페이지 /*-----------------------------------------------------------------*/ /* 이용안내 (guide.html) */ #guide .guide_menu {position:absolute; left:0; top:0;} #guide .guide_menu.fixed ul {position:fixed; top:0;} #guide .guide_menu ul li a {display:block; padding:4.5px 0; color:#282828; font-size:16px;} #guide > dl {padding-bottom:53px; border-top:1px solid #dbdbdb;} #guide > dl:first-of-type {border-top-color:#333;} #guide > dl > dt {padding:23px 0 8px; color:#282828; font-size:16px;} #guide > dl > dd {color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px; line-height:27px;} #guide > dl > dd.mg {margin-top:26px;} #guide > dl > dd > strong {color:#333; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; font-weight:normal;} /* 고객센터 상단메뉴 */ #cs_topmenu {margin-bottom:30px;} #cs_topmenu:after {display:block; clear:both; content:'';} #cs_topmenu li {float:left; width:187px; height:187px; margin-left:15px; border:1px solid #e9e9e9; background:#fff; text-align:center;} #cs_topmenu li:first-child {margin-left:0;} #cs_topmenu li dl dt {padding:86px 0 3px; background-repeat:no-repeat; background-position:center top 46px; font-size:16px;} #cs_topmenu li dl dd {color:#888; font-size:13px; line-height:20px;} #cs_topmenu li.faq dl dt {background-image:url('/asset/img/etc/icon_faq.png'); background-position:center top 40px;} #cs_topmenu li.notice dl dt {background-image:url('/asset/img/etc/icon_notice.png'); background-position:center top 42px;} #cs_topmenu li.qna dl dt {background-image:url('/asset/img/etc/icon_qna.png'); background-position:center top 43px;} #cs_topmenu li.membership dl dt {background-image:url('/asset/img/etc/icon_membership.png');} #cs_topmenu li.delay dl dt {background-image:url('/asset/img/etc/icon_delay.png'); background-position:center top 41px;} #cs_topmenu li.unconfirm dl dt {background-image:url('/asset/img/etc/icon_unconfirm.png');} #cs_topmenu li:hover {border-color:#f7f7f7; background:#f7f7f7;} /* 레이어팝업 - 고객센터 입고지연상품 */ #delay_layer {width:1000px;} #delay_layer .inner {padding:0 50px 54px;} #delay_layer h3 {padding:54px 0 21px; color:#282828;} #delay_layer .scroll_area {max-height:724px;} /* 레이어팝업 - 고객센터 미확인입금자 */ #unconfirm_layer {width:500px;} #unconfirm_layer .inner {padding:0 50px 54px;} #unconfirm_layer h3 {padding:54px 0 21px; color:#282828;} #unconfirm_layer .scroll_area {max-height:724px;} /* 고객센터 (cscenter.html) */ #cscenter .offline {position:relative; height:60px; margin-bottom:30px; padding-right:117px; background:#f7f7f7;} #cscenter .offline dl {font-size:0;} #cscenter .offline dl > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #cscenter .offline dl dt {width:136px; font-size:15px; font-weight:700; text-align:center; line-height:60px;} #cscenter .offline dl dd {width:947px; padding-left:17px; color:#999; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; line-height:60px;} #cscenter .offline .more {position:absolute; right:0; top:20px; width:117px; font-size:13px; text-align:center;} #cscenter .info_notice:after {display:block; clear:both; content:'';} #cscenter .info_notice .info {float:left; width:795px; border:1px solid #e9e9e9; font-size:0;} #cscenter .info_notice .info dl {display:inline-block; *display:inline; *zoom:1; padding-bottom:32px; vertical-align:top;} #cscenter .info_notice .info dl.cs {width:266px; padding-left:51px;} #cscenter .info_notice .info dl.bank {width:238px;} #cscenter .info_notice .info dl.return {width:289px;} #cscenter .info_notice .info dl dt {padding:35px 0 11px; font-size:15px; font-weight:700;} #cscenter .info_notice .info dl dd, #cscenter .info_notice .info dl dd * {color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:13px; line-height:24px;} #cscenter .info_notice .info dl dd.tel {font-family:'Poppins'; font-size:20px; font-weight:300;} #cscenter .info_notice .notice {float:right; width:368px;} #cscenter .info_notice .notice .title {position:relative; margin-bottom:3px; padding-bottom:12px; border-bottom:1px solid #333; font-size:15px; font-weight:700; line-height:1;} #cscenter .info_notice .notice .title .more {position:absolute; right:0; top:2px; color:#888; font-size:13px; font-weight:400;} #cscenter .list_board li {border-bottom:1px solid #e9e9e9;} #cscenter .list_board li .subject a {display:block; overflow:hidden; position:relative; padding:9px 17px 5px; color:#888; font-size:13px; text-overflow:ellipsis; white-space:nowrap;} #cscenter .list_board li .subject a:after {display:block; position:absolute; left:8px; top:24px; width:4px; height:1px; background:#888; content:'';} /* 멤버십 혜택 (membership.html) */ #membership .msg {margin-bottom:20px; padding:33px 0 34px; background:#fbfbfb; color:#888; font-size:14px; text-align:center; line-height:27px;} #membership table {table-layout:fixed; width:100%; border-top:1px solid #333;} #membership table > tbody > tr > th {padding:30px 0; border-bottom:1px solid #e9e9e9; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; font-weight:400; text-align:center; line-height:20px; vertical-align:middle;} #membership table > tbody > tr > td {padding:30px 0; border:1px solid #e9e9e9; border-width:0 0 1px 1px; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; text-align:center; vertical-align:middle;} #membership table > tbody > tr > td .icon {margin-bottom:14px;} #membership table > tbody > tr.grade > td {font-family:'Poppins'; font-size:15px;} #membership table > tbody > tr.free > td {font-size:13px;} #membership table > tbody > tr.quarter > td {font-size:13px;} #membership table > tbody > tr.birthday > td {font-size:13px;} #membership h3 {padding:94px 0 32px; color:#282828; font-size:24px; font-weight:400; text-align:center;} #membership h3 p {padding-top:4px; color:#888; font-size:13px;} #membership .benefit {padding-top:60px; border:1px solid #e9e9e9;} #membership .benefit:after {display:block; clear:both; content:'';} #membership .benefit li {float:left; width:16.66%; margin-bottom:58px; text-align:center;} #membership .benefit li:nth-child(6n+1) {clear:both;} #membership .benefit li dl dt {padding:57px 0 7px; background-repeat:no-repeat; background-position:center top; color:#40372e; font-size:15px;} #membership .benefit li dl dd {color:#a9a9a9; font-size:13px; line-height:19px;} #membership .benefit li.milage dl dt {background-image:url('/asset/img/etc/icon_milage.png'); background-position:center top 5px;} #membership .benefit li.bookmark dl dt {background-image:url('/asset/img/etc/icon_bookmark.png'); background-position:center top 5px;} #membership .benefit li.addinfo dl dt {background-image:url('/asset/img/etc/icon_addinfo.png'); background-position:center top 4px;} #membership .benefit li.day dl dt {background-image:url('/asset/img/etc/icon_day.png'); background-position:center top 4px;} #membership .benefit li.free dl dt {background-image:url('/asset/img/etc/icon_free.png'); background-position:center top 7px;} #membership .benefit li.birthday dl dt {background-image:url('/asset/img/etc/icon_birthday.png'); background-position:center top 1px;} #membership .benefit li.review dl dt {background-image:url('/asset/img/etc/icon_revmilage.png'); background-position:center top 6px;} #membership .benefit li.queen dl dt {background-image:url('/asset/img/etc/icon_queen.png'); background-position:center top 15px;} #membership .benefit li.attend dl dt {background-image:url('/asset/img/etc/icon_attend.png'); background-position:center top 4px;} #membership .benefit li.excellent dl dt {background-image:url('/asset/img/etc/icon_excellent.png'); background-position:center top 11px;} #membership .benefit li.size dl dt {background-image:url('/asset/img/etc/icon_size.png'); background-position:center top 6px;} #membership .benefit li.new dl dt {background-image:url('/asset/img/etc/icon_new.png');} #membership .benefit li:hover dl dt {color:#d0591f;} #membership .benefit li.milage:hover dl dt {background-image:url('/asset/img/etc/icon_milage_on.png');} #membership .benefit li.bookmark:hover dl dt {background-image:url('/asset/img/etc/icon_bookmark_on.png');} #membership .benefit li.addinfo:hover dl dt {background-image:url('/asset/img/etc/icon_addinfo_on.png');} #membership .benefit li.day:hover dl dt {background-image:url('/asset/img/etc/icon_day_on.png');} #membership .benefit li.free:hover dl dt {background-image:url('/asset/img/etc/icon_free_on.png');} #membership .benefit li.birthday:hover dl dt {background-image:url('/asset/img/etc/icon_birthday_on.png');} #membership .benefit li.review:hover dl dt {background-image:url('/asset/img/etc/icon_revmilage_on.png');} #membership .benefit li.queen:hover dl dt {background-image:url('/asset/img/etc/icon_queen_on.png');} #membership .benefit li.attend:hover dl dt {background-image:url('/asset/img/etc/icon_attend_on.png');} #membership .benefit li.excellent:hover dl dt {background-image:url('/asset/img/etc/icon_excellent_on.png');} #membership .benefit li.size:hover dl dt {background-image:url('/asset/img/etc/icon_size_on.png');} #membership .benefit li.new:hover dl dt {background-image:url('/asset/img/etc/icon_new_on.png');} /*-----------------------------------------------------------------*/ /* 5. ETC /*-----------------------------------------------------------------*/ /* 게시판 - 리스트 - 분류 */ #boardlist .cateList {display:table; width:100%; margin-bottom:30px; border-collapse:collapse; text-align:center;} #boardlist .cateList > ul {display:table-row;} #boardlist .cateList > ul > li {display:table-cell; width:5%; border:1px solid #e9e9e9; border-bottom-color:#333; vertical-align:top;} #boardlist .cateList > ul > li.active {border-color:#333; border-bottom-color:#fff;} #boardlist .cateList > ul > li > a {display:block; position:relative; height:60px; font-size:15px; line-height:60px;} /* 게시판 - 리스트 - 일반 (board_list.html) */ #boardlist .board_col {table-layout:fixed; width:100%;} #boardlist .board_col > thead > tr > th {padding:16px 0 17px; border-top:1px solid #333; border-bottom:1px solid #e5e5e5; color:#2f2f2f; font-size:13px; text-align:center; vertical-align:middle;} #boardlist .board_col > tbody > tr > td, #boardlist .board_col > tbody > tr > td * {color:#2f2f2f; font-size:14px;} #boardlist .board_col > tbody > tr > td {padding:16px 0; border-bottom:1px solid #e5e5e5; text-align:center; vertical-align:middle;} #boardlist .board_col > tbody > tr > td.tal {padding-left:30px !important;} #boardlist .board_col > tbody > tr > td.no {color:#888; font-size:13px; font-weight:300;} #boardlist .board_col > tbody > tr > td.date {color:#888; font-size:13px; font-weight:300;} #boardlist .board_col > tbody > tr > td.view {color:#888; font-size:13px; font-weight:300;} #boardlist .board_col > tbody > tr > td.stat {font-size:13px; font-weight:300;} #boardlist .btn {position:relative; min-height:40px; margin-top:20px; padding-right:200px;} #boardlist .btn .search {font-size:0;} #boardlist .btn .search > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #boardlist .btn .search select {width:130px; height:40px; padding:0 15px; border:1px solid #e9e9e9; color:#333; font-size:14px; line-height:40px;} #boardlist .btn .search .form_input.search {width:260px; height:40px; margin:0 10px; padding:0 15px; border:1px solid #e9e9e9; font-size:14px; line-height:40px;} #boardlist .btn .search .btn_search {width:18px; height:18px; border:0; background:url('/asset/img/board/btn_search.png') no-repeat center; color:transparent; font-size:0;} #boardlist .btn .box_btn {position:absolute; right:0; top:0;} /* 게시판 - 리스트 - 갤러리 (board_list_gallery.html) */ #boardlist .board_gallery {width:1230px; margin-left:-30px;} #boardlist .board_gallery > tbody > tr > td {padding:0 0 80px 30px; vertical-align:top;} #boardlist .board_gallery > tbody > tr > td .box {width:380px; margin:0 auto;} #boardlist .board_gallery > tbody > tr > td .box .subject, #boardlist .board_gallery > tbody > tr > td .box .subject * {color:#282828; font-size:16px;} #boardlist .board_gallery > tbody > tr > td .box .subject {padding:14px 0 3px;} #boardlist .board_gallery > tbody > tr > td .box .date_reply span {position:relative; padding:0 15px 0 13px; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px;} #boardlist .board_gallery > tbody > tr > td .box .date_reply span:first-child {padding-left:0;} #boardlist .board_gallery > tbody > tr > td .box .date_reply span:after {display:block; position:absolute; left:0; top:50%; width:1px; height:11px; margin-top:-5.5px; background:#dbdbdb; content:'';} #boardlist .board_gallery > tbody > tr > td .box .date_reply span:first-child:after {display:none;} #boardlist .board_gallery > tbody > tr > td .box .date {color:#888; } #boardlist .board_gallery > tbody > tr > td .box .reply {color:#d0581b;} /* 게시판 - 리스트 - FAQ (board_list_faq.html) */ .board_faq h3.title {padding:35px 0 14px; color:#333; font-size:20px;} .board_faq h3.title span {color:#888; font-size:13px;} .board_faq h3.title .more {position:absolute; right:0; top:40px; color:#888; font-size:13px; font-weight:400;} .board_faq .search_area {margin-bottom:25px; padding:32px 0 0 45px; border:1px solid #e9e9e9;} .board_faq .search_area .box {font-size:0;} .board_faq .search_area .box > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} .board_faq .search_area .box select {width:130px; height:45px; margin-right:10px; padding:0 16px; border:1px solid #e9e9e9; color:#333; font-size:14px; line-height:45px;} .board_faq .search_area .box .form_input {width:935px; height:45px; padding:0 15px; border:1px solid #e9e9e9; color:#888; font-size:14px; line-height:45px;} .board_faq .search_area .box .btn {width:78px; height:45px; margin:0 !important; padding:0 !important; border:0; background:url('/asset/img/button/search.png') no-repeat center; color:transparent; font-size:0;} .board_faq .search_area dl {padding:16px 0 26px; font-size:0;} .board_faq .search_area dl > * {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} .board_faq .search_area dl dt {width:130px; font-size:13px; font-weight:700;} .board_faq .search_area dl dd {width:935px; margin-left:10px;} .board_faq .search_area dl dd ul:after {display:block; clear:both; content:'';} .board_faq .search_area dl dd ul li {position:relative; float:left;} .board_faq .search_area dl dd ul li:after {display:block; position:absolute; left:0; top:50%; width:1px; height:9px; margin-top:-4.5px; background:#d2d2d2; content:'';} .board_faq .search_area dl dd ul li a {display:block; padding:0 21px 0 23px; font-size:13px;} .board_faq .search_area dl dd ul li:first-child:after {display:none;} .board_faq .search_area dl dd ul li:first-child a {padding-left:0;} .board_faq .tab_faq {margin-bottom:30px; text-align:center;} .board_faq .common_tabmenu > li {width:14.28%;} .board_faq .tabcnt_faq {display:none;} .board_faq .tabcnt_faq0 {display:block;} /* 게시판 - 읽기 (board_view.html) */ #boardview .board_row {table-layout:fixed; width:100%;} #boardview .board_row tr:first-child th, #boardview .board_row tr:first-child td {border-top:1px solid #333;} #boardview .board_row tr th {padding:11px 0 13px 30px; border-bottom:1px solid #e5e5e5; color:#2f2f2f; font-size:13px;} #boardview .board_row tr td {border-bottom:1px solid #e5e5e5; color:#2f2f2f; font-size:13px; text-align:left;} #boardview .board_row tr td.date {color:#888; font-weight:300;} #boardview .board_row.move tr:first-child th, #boardview .board_row.move tr:first-child td {border-top-color:#e5e5e5;} #boardview .board_row.move tr td a {color:#888;} #boardview .boxview {padding:50px 30px;} #boardview .btn {margin-top:20px; text-align:right;} #boardview .btn:after {display:block; clear:both; content:'';} #boardview .btn .modelete {float:left;} /* 게시판 - 쓰기 (board_write.html) */ #boardwrite .board_row {table-layout:fixed; width:100%; border-top:1px solid #333;} #boardwrite .board_row tr th {padding:10px 0 10px 30px; border-bottom:1px solid #e5e5e5; color:#2f2f2f; font-size:13px; vertical-align:middle;} #boardwrite .board_row tr td {padding:10px 0; border-bottom:1px solid #e5e5e5; vertical-align:middle;} #boardwrite .board_row tr td select {width:170px; height:35px; border:1px solid #dcdcdc;} #boardwrite .board_row tr td .form_input {height:35px; border:1px solid #dcdcdc;} #boardwrite .board_row tr td .form_input.subject {width:786px;} #boardwrite .board_row tr td .form_input.subject2 {width:586px;} #boardwrite .board_row tr td .form_input.writer {width:390px;} #boardwrite .board_row tr td .form_input.content {width:100%; height:300px;} #boardwrite .board_row tr td .msg {margin-top:5px; color:#888; font-size:13px;} #boardwrite .btn {margin-top:20px;} /* 게시판 - 수정 (board_edit.html) */ #boardedit .board_row {table-layout:fixed; width:100%; border-top:1px solid #333;} #boardedit .board_row tr th {padding:10px 0 10px 30px; border-bottom:1px solid #e5e5e5; color:#2f2f2f; font-size:13px; vertical-align:middle;} #boardedit .board_row tr td {padding:10px 0; border-bottom:1px solid #e5e5e5; vertical-align:middle;} #boardedit .board_row tr td select {width:170px; height:35px; border:1px solid #dcdcdc;} #boardedit .board_row tr td .form_input {height:35px; border:1px solid #dcdcdc;} #boardedit .board_row tr td .form_input.subject {width:786px;} #boardedit .board_row tr td .form_input.writer {width:390px;} #boardedit .board_row tr td .msg {margin-top:5px; color:#888; font-size:13px;} #boardedit .btn {margin-top:20px;} /* 댓글 - 리스트(게시판, 상품리뷰) */ .list_comment {margin-top:31px; text-align:left;} .list_comment > ul {position:relative; margin-top:10px; border:1px solid #e5e5e5; border-top:0;} .list_comment > ul:after {display:block; position:absolute; left:53px; top:-10px; width:16px; height:11px; background:url('/asset/img/bg/bg_list_comment.png') no-repeat center; content:'';} .list_comment > ul > li {clear:both; overflow:hidden; position:relative; padding:18px 57px 20px 30px; border-top:1px solid #e5e5e5; word-break:break-all; word-wrap:break-word;} .list_comment > ul > li .name {float:left; width:12%; font-size:13px;} .list_comment > ul > li .content {float:left; width:80%; font-size:13px;} .list_comment > ul > li .date {float:right; width:8%; color:#888; font-size:13px; font-weight:300; text-align:right;} .list_comment > ul > li .del {display:block; position:absolute; right:14px; top:18px; width:11px; height:11px; padding:4px; background:url('/asset/img/button/delete_s.png') no-repeat center; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .list_comment > ul > li .edit {display:block; position:absolute; right:36px; top:20px; width:15px; height:15px; background:url('/asset/img/button/edit.png') no-repeat center; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; background-size: contain; cursor: pointer;} /* 댓글 - 쓰기(게시판, 상품리뷰) */ .write_comment {overflow:hidden; margin-top:-1px; padding:20px 30px; 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:65px; border:1px solid #e2e2e2; background:#fafafa; text-align:left;} .write_comment .inputbox textarea.form_input {height:57px; border:0;} .write_comment .inputbox .btn_comment {display:inline-block; position:absolute; right:0; top:0; width:65px; height:100%; text-align:center; border:0; background:#fafafa; line-height:100%; cursor:pointer;} .write_comment .inputbox:after {display:block; position:absolute; right:65px; top:50%; width:1px; height:35px; margin-top:-17px; background:#e6e6e6; content:'';} /* 상품상세 - 추가 */ #detail .wrap_prd > .info .price .price-box {margin:5px 0 10px;} #detail .wrap_prd > .info .price .price-box .p1 {color:#ff8e77; font-size:25px; margin-right:10px;} #detail .wrap_prd > .info .price .price-box .p2 {color:#4b4b4b; font-size:25px; margin-right:10px; font-weight:500;} #detail .wrap_prd > .info .price .price-box .p2 em {font-style:inherit; font-size:14px;} #detail .wrap_prd > .info .price .price-box .p3 {color:#636363; font-size:16px; text-decoration:line-through;} #detail .wrap_prd > .info .price .price-box .p3 em {font-style:inherit; font-size:11px;} #detail .wrap_prd > .info .list td .benefit > a {border-color:#cacaca; border-radius:5px; margin-right:2px;} .box_colorchip .colorbox a {border-radius:5px; overflow:hidden; border:2px solid #E9E9E9;} .box_colorchip .colorbox a:hover, #detail .wrap_prd > .info .list td .size > li a:hover {border:1px solid #ad96dc !important;} .box_colorchip .colorbox a.active, #detail .wrap_prd > .info .list td .size > li a.active {border:2px solid #ad96dc !important; margin-top:-1px;} #detail .wrap_prd > .info .list td .size > li a {background:none; border-radius:5px; overflow:hidden;} .todayDelivery p {position:relative; top:-2px; font-size:16px; background:url('/asset/img/common/hd_quick3.png') no-repeat left 3px / 17px 17px; padding-left:21px;} .todayDelivery p span {font-size:16px; color:#9066ee;} .todayDelivery p small {display:inline-block; margin-left:5px;} .todayDelivery > div a {display:block; text-align:center; border:2px solid #d0d0d0; border-radius:5px; background:#f7f7f7; color:#696969; height:44px; line-height:43px; font-size:14px;} #detail .wrap_prd .cpn {margin:15px 0;} #detail .wrap_prd .cpn:before {display:block; width:100%; height:3px; background:#eeeeee; content:""; margin-bottom:18px;} #detail .wrap_prd .cpn:after {display:block; width:100%; height:3px; background:#eeeeee; content:""; margin-top:18px;} #detail .wrap_prd > .info .list td .coupon-a {color:#9164f2; display:inline-block; border:1px solid #9164f2; border-radius:5px; height:30px; line-height:30px; padding:0 14px; font-size:13px;} #detail .wrap_prd > .info .list td .coupon-a img {width:17px; position:relative; top:7px;} #detail .wrap_prd > .info .list td .sale-price {font-weight:500; color:#898989; font-size:14px;} #detail .wrap_prd > .info .list td .sale-price strike {color:#898989; font-size:14px; font-weight:100;} #detail .wrap_prd > .info .list td .sale-price span {font-size:14px; color:#ff8d78; display:inline-block; font-weight:100; margin-left:3px;} /* pop */ .att-pop {position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:9999999; display: none; background-color:rgba(0,0,0,0.3);} .att-pop .box {width:448px; padding:60px 10px 0; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:15px; border:1px solid #d7d5d6; background:#fff; box-shadow:-3px 3px 10px rgba(0,0,0,0.1) , 3px -3px 10px rgba(0,0,0,0.1);} .att-pop .box:after {display:block; content:""; position:absolute; top:-36px; left:50%; transform:translateX(-50%); width:70px; height:70px; border-radius:50%;} .att-pop .box#cart:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/1.png') center no-repeat; background-size:cover;} .att-pop .box#itemChoice:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/2.png') center no-repeat; background-size:cover;} .att-pop .box#update:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/3.png') center no-repeat; background-size:cover;} .att-pop .box#optionChange:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/4.png') center no-repeat; background-size:cover;} .att-pop .box#memberWish:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/5.png') center no-repeat; background-size:cover;} .att-pop .box#getChance:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/6.png') center no-repeat; background-size:cover;} .att-pop .box#memberLogin:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/7.png') center no-repeat; background-size:cover;} .att-pop .box#delete:after {background:url('//atimg.sonyunara.com/attrangs/2020/pop/8.png') center no-repeat; background-size:cover;} .att-pop .box p {text-align:center; color:#515151; font-weight:600; font-size:15px;} .att-pop .box p font {color:#8668fa;} .att-pop .box .button {margin:15px 0; text-align:right; padding-right:15px;} .att-pop .box .button a {font-size:15px; color:#9e9e9e; display:inline-block; font-weight:600; margin-left:10px;} .att-pop .box .button a:last-of-type {color:#8668fa;} #mypage h1.benefit-tit {text-align:center; color:#5c5c5c; font-size:20px; font-weight:400; text-indent:-153px; margin-bottom:40px;} #mypage .benefit-box {margin-bottom:70px;} #mypage .benefit-box h2 {color:#444444; font-size:17px; font-weight:400; margin-bottom:22px;} #mypage .benefit-box .member-grade {background:#eee; border-radius:15px; border:3px solid #eee;} #mypage .benefit-box .member-grade:after {display:block; clear:both; content:"";} #mypage .benefit-box .member-grade .pull-left {width:412px; float:left; position:relative; top:20px;} #mypage .benefit-box .member-grade .pull-left:after {display:block; clear:both; content:"";} #mypage .benefit-box .member-grade .pull-left .image {width:117px; float:left; text-align:right; position:relative; top:20px;} #mypage .benefit-box .member-grade .pull-left .image > img {width:75px;} #mypage .benefit-box .member-grade .pull-left .image > div {width:75px; color:#ff8e77; font-weight:600; font-size:15px; float:right; text-align:center; margin-top:13px;} #mypage .benefit-box .member-grade .pull-left .content {width:calc(100% - 117px); float:left; padding-left:50px; position:relative; top:5px;} #mypage .benefit-box .member-grade .pull-left .content > div {font-size:16px; color:#202020; font-weight:bold; margin-bottom:8px;} #mypage .benefit-box .member-grade .pull-left .content > div b {font-size:16px; color:#ff8e77; font-weight:600;} #mypage .benefit-box .member-grade .pull-left .content > ul li:after {display:block; clear:both; content:"";} #mypage .benefit-box .member-grade .pull-left .content > ul li > div {font-size:13px; color:#626262; font-weight:600;} #mypage .benefit-box .member-grade .pull-left .content > ul li > div p {font-size:13px; color:#626262; font-weight:500;} #mypage .benefit-box .member-grade .pull-left .content > ul li > div p span {font-size:12px; color:#626262; font-weight:600; display:inline-block; margin-left:3px;} #mypage .benefit-box .member-grade .pull-left .content > ul li > div:first-of-type {width:63px; float:left;} #mypage .benefit-box .member-grade .pull-left .content > ul li > div:last-of-type {width:calc(100% - 63px); float:left;} #mypage .benefit-box .member-grade .pull-right {width:calc(100% - 412px); height:178px; float:left; background:#fff; border-radius:15px; position:relative;} #mypage .benefit-box .member-grade .pull-right .top-text {text-align:center; font-size:14px; color:#444; font-weight:600; margin:35px 0 20px;} #mypage .benefit-box .member-grade .pull-right .top-text span {color:#9365ed; font-size:14px; font-weioght:600;} #mypage .benefit-box .member-grade .pull-right .graph {position:relative; margin:0 auto; border:2px solid #9365ed; border-radius:15px; max-width:516px; margin-bottom:15px;} #mypage .benefit-box .member-grade .pull-right .graph .bg {display:block; background:#9365ed; height:22px; border-radius:10px; box-sizing:border-box; position:relative; width: 0%;} #mypage .benefit-box .member-grade .pull-right .graph .bg:after {width:41px; height:34px; content:""; display:inline-block; position:absolute; right:-15px; top:40%; transform:translateY(-50%);} #mypage .benefit-box .member-grade .pull-right .bottom-text {margin:0 auto; max-width:600px; padding-left:25px;} #mypage .benefit-box .member-grade .pull-right .bottom-text ul li {font-size:12px; color:#999999;} #mypage .benefit-box .member-grade .pull-right .date {position:absolute; right:20px; bottom:5px; color:#a1a1a1; font-size:12px;} #mypage .benefit-box .member-grade .pull-right.member .top-text span {color:#75cb77;} #mypage .benefit-box .member-grade .pull-right.bronze .top-text span {color:#ca9283;} #mypage .benefit-box .member-grade .pull-right.silver .top-text span {color:#cbcbcb;} #mypage .benefit-box .member-grade .pull-right.gold .top-text span {color:#f2be61;} #mypage .benefit-box .member-grade .pull-right.platinum .top-text span {color:#e48894;} #mypage .benefit-box .member-grade .pull-right.diamond .top-text span {color:#c1e8ec;} #mypage .benefit-box .member-grade .pull-right.vip .top-text span {color:#82a3ed;} #mypage .benefit-box .member-grade .pull-right.vvip .top-text span {color:#a486fc;} #mypage .benefit-box .member-grade .pull-right.administrator .top-text span {color:#cb50ff;} #mypage .benefit-box .member-grade .pull-right.member .graph {border-color:#75cb77;} #mypage .benefit-box .member-grade .pull-right.bronze .graph {border-color:#ca9283;} #mypage .benefit-box .member-grade .pull-right.silver .graph {border-color:#cbcbcb;} #mypage .benefit-box .member-grade .pull-right.gold .graph {border-color:#f2be61;} #mypage .benefit-box .member-grade .pull-right.platinum .graph {border-color:#e48894;} #mypage .benefit-box .member-grade .pull-right.diamond .graph {border-color:#c1e8ec;} #mypage .benefit-box .member-grade .pull-right.vip .graph {border-color:#82a3ed;} #mypage .benefit-box .member-grade .pull-right.vvip .graph {border-color:#a486fc;} #mypage .benefit-box .member-grade .pull-right.administrator .graph {border-color:#cb50ff !important;} #mypage .benefit-box .member-grade .pull-right.member .graph .bg {background:#75cb77;} #mypage .benefit-box .member-grade .pull-right.bronze .graph .bg {background:#ca9283;} #mypage .benefit-box .member-grade .pull-right.silver .graph .bg {background:#cbcbcb;} #mypage .benefit-box .member-grade .pull-right.gold .graph .bg {background:#f2be61;} #mypage .benefit-box .member-grade .pull-right.platinum .graph .bg {background:#e48894;} #mypage .benefit-box .member-grade .pull-right.diamond .graph .bg {background:#c1e8ec;} #mypage .benefit-box .member-grade .pull-right.vip .graph .bg {background:#82a3ed;} #mypage .benefit-box .member-grade .pull-right.vvip .graph .bg {background:#a486fc;} #mypage .benefit-box .member-grade .pull-right.administrator .graph .bg {background:#cb50ff !important;} #mypage .benefit-box .member-grade .pull-right.member .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_member.png') left top no-repeat / 41px 34px;} #mypage .benefit-box .member-grade .pull-right.bronze .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_bronze.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.silver .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_silver.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.gold .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_gold.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.platinum .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_platinum.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.diamond .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_diamond.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.vip .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_vip.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.vvip .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_vvip.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .member-grade .pull-right.administrator .graph .bg:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/icon_administrator.png') no-repeat; background-size:100% 100%;} #mypage .benefit-box .tab {margin-bottom:12px;} #mypage .benefit-box .tab ul {display:table; table-layout:fixed; width:100%;} #mypage .benefit-box .tab ul li {display:table-cell; text-align:center; border:1px solid #919191; border-bottom:2px solid #9365ed; border-top-left-radius:10px; border-top-right-radius:10px; position:relative;} #mypage .benefit-box .tab ul li:first-of-type {right:-1px;} #mypage .benefit-box .tab ul li:last-of-type {left:-1px;} #mypage .benefit-box .tab ul li.on {z-index:2; border:2px solid #9365ed; border-bottom-color:#fff;} #mypage .benefit-box .tab ul li a {color:#908e8e; font-size:16px; display:block; height:53px; line-height:53px; font-weight:600;} #mypage .benefit-box .tab ul li.on a {color:#313030;} #mypage .benefit-box .tab-content {margin-bottom:35px;} #mypage .benefit-box .tab-content > ul > li {display:none;} #mypage .benefit-box .tab-content > ul > li.on {display:block;} #mypage .benefit-box .tab-content > ul > li .coupon .useForm {background:#eeee; text-align:center; padding:16px 0; margin-bottom:25px;} #mypage .benefit-box .tab-content > ul > li .coupon .useForm:after {display:block; clear:both; content:"";} #mypage .benefit-box .tab-content > ul > li .coupon .useForm span {display:inline-block; vertical-align:top; width:72px; height:26px; line-height:23px; font-size:12px; color:#5c5c5c;} #mypage .benefit-box .tab-content > ul > li .coupon .useForm input[type=text] {width:250px; height:26px; border:1px solid #919191; padding:0 10px;} #mypage .benefit-box .tab-content > ul > li .coupon .useForm button {width:90px; height:26px; vertical-align:top; line-height:23px; border:0; box-shadow:none; background:#919191; color:#fff; font-size:13px; cursor:pointer; margin-left:2px;} #mypage .benefit-box .tab-content > ul > li .coupon-list ul {margin-bottom:-9px;} #mypage .benefit-box .tab-content > ul > li .coupon-list ul:after {display:block; clear:both; content:"";} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li {width:154px; float:left; margin:0 4.5px 9px; border:2px solid #a2a2a2; border-radius:10px; height:123px;} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li img {width:100%;} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li .coupon-top {height:82px; text-align:center; position:relative;} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li .coupon-top img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li .coupon-top span {position:absolute; left:0; bottom:2.5px; width:100%; text-align:center; color:#ff8e77; font-weight:600;} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li .coupon-top:after {position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:80%; height:2px; background:#a2a2a2; content:"";} #mypage .benefit-box .tab-content > ul > li .coupon-list ul li .coupon-bottom {height:41px; line-height:41px; text-align:center; font-size:13px; color:#4b4b4b;} #mypage .benefit-box .tab-content > ul > li .coupon .right-text {margin-top:10px;text-align:right; margin-bottom:15px; font-size:13px; font-weight:600; color:#353535; padding-right:46px;} #mypage .benefit-box .tab-content > ul > li .coupon .right-text a {color:#9365ed; font-size:13px; font-weight:600;} #mypage .benefit-box .tab-content > ul > li .coupon table {border-top:2px solid #444444; width:100%;} #mypage .benefit-box .tab-content > ul > li .coupon table tr th {font-size:13px; color:#242424 !important; font-weight:600;} #mypage .benefit-box .tab-content > ul > li .coupon table tr th, #mypage .benefit-box .tab-content > ul > li .coupon table tr td {text-align:center; height:56px; vertical-align:middle; border-bottom:1px solid #bcbcbc; font-size:13px; color:#898989;} #mypage .benefit-box .tab-content > ul > li .coupon table tr:last-of-type td {border-bottom-color:#313030;} #mypage .benefit-box .tab-content > ul > li .coupon table tr td.black {color:#242424; font-weight:600;} #mypage .benefit-box .tab-content > ul > li .coupon table tr td small {display:block; color:#898989; font-size:11px;} #mypage .benefit-box .tab-content > ul > li .coupon table tr td a {color:#9365ed; font-weight:600; font-size:12px;} #mypage .benefit-box .tab-content > ul > li .coupon .usedForm {background:#eeee; text-align:center; padding:16px 0; margin-bottom:25px;} #mypage .benefit-box .tab-content > ul > li .coupon .usedForm a {display:inline-block; margin-right:3px; height:26px; line-height:26px; width:103px; text-align:center; vertical-align:top; border-radius:5px; font-size:12px; color:#353535; border:1px solid #353535; background:#fff;} #mypage .benefit-box .tab-content > ul > li .coupon .usedForm input[type=text] {height:26px; border:1px solid #5c5c5c; border-radius:5px; width:123px; background-image:url('//atimg.sonyunara.com/attrangs/2020/mypage/calendar.png'); background-repeat: no-repeat; background-position:95% center;cursor: pointer; font-size:14px; color:#353535;} #mypage .benefit-box .tab-content > ul > li .coupon .usedForm span {display:inline-block; height:26px; line-height:26px; text-align:center; width:30px; font-size:20px;} #mypage .benefit-box .tab-content > ul > li .coupon .usedForm button {background:#919191; height:26px; line-height:26px; text-align:center; width:81px; color:#fff; border-radius:5px; border:0; vertical-align:top; margin-left:5px;} #mypage .benefit-box .left-text {position:relative;} #mypage .benefit-box .left-text ul li {color:#9b9b9b; font-size:13px;} #mypage .benefit-box .left-text.black ul li {color:#151515; margin-bottom:3px;} #mypage .benefit-box .left-text > a {position:absolute; right:0; bottom:0; font-size:13px; color:#9b9b9b;} #mypage .benefit-box .grade-table {background:#f5f5f5; padding:12px 18px; margin-top:5px;} #mypage .benefit-box .grade-table ul:after {display:block; clear:both; content:"";} #mypage .benefit-box .grade-table ul li {width:12.5%; float:left; cursor:pointer;} #mypage .benefit-box .grade-table ul li .bg {border-radius:7px; height:782px;} #mypage .benefit-box .grade-table ul li.on .bg {background:#fff;} #mypage .benefit-box .grade-table ul li .bg .top {height:150px; text-align:center; position:relative; top:22px;} #mypage .benefit-box .grade-table ul li .bg .top .name {font-size:13px; color:#919191; font-weight:600; margin-top:18px;} #mypage .benefit-box .grade-table ul li .bg .top span {color:#13px; color:#919191;} #mypage .benefit-box .grade-table ul li .bg .puzzle {height:87px; padding:0 14px;} #mypage .benefit-box .grade-table ul li .bg .puzzle > div {position:relative; width:100%; height:59px; text-align:center; background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_basic_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li .bg .puzzle > div.none {background:none !important; line-height:59px;} #mypage .benefit-box .grade-table ul li .bg .puzzle > div > span {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; text-align:center; color:#151515; display:block;} #mypage .benefit-box .grade-table ul li .bg .puzzle > span {letter-spacing:-1px; display:block; font-size:10px; color:#2a2a2a; text-align:center; margin-top:2px;} #mypage .benefit-box .grade-table ul li.on .bg .puzzle > div > span {color:#fff;} #mypage .benefit-box .grade-table ul li.member.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_member_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.bronze.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_bro_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.silver.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_sil_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.gold.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_gold3_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.platinum.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_pla_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.diamond.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_dia_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.vip.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_vip_bg.png') left top no-repeat;} #mypage .benefit-box .grade-table ul li.vvip.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_vvip_bg.png') left top no-repeat;} #mypage .point-box {margin-bottom:10px; background:#fafafa; height:297px;} #mypage .point-box h2 {position:relative; top:37px; padding-left:22px; font-size:20px; color:#5c5c5c; font-weight:500; margin-bottom:100px;} #mypage .point-box ul:after {display:block; clear:both; content:"";} #mypage .point-box ul {width:971px; margin:0 auto;} #mypage .point-box ul li {position:relative; overflow:hidden; width:calc(50% - 20px); height:117px; background:#fff; float:left; margin:0 10px 15px; border:1px solid #cfcfcf; border-radius:20px; border-bottom-right-radius:0; padding:0 14px; box-sizing:border-box;} #mypage .point-box ul.coming li {border:0;} #mypage .point-box ul.coming li:after {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/comingsoon.png') left top no-repeat; position:absolute; left:0; top:0; width:100%; height:100%; content:""; background-size:100% 100%;} #mypage .point-box ul li:before {display:block; clear:both; content:"";} #mypage .point-box ul li .image {width:83px; float:left; margin-top:18px;} #mypage .point-box ul li .content {width:calc(100% - 83px); float:left; padding-left:14px; position:relative; top:30px;} #mypage .point-box ul li .content span {font-size:14px; color:#a2a2a2; display:block; margin-bottom:10px;} #mypage .point-box ul li .content p {color:#5c5c5c; font-size:15px;} #mypage .point-box ul li .content p b {color:#9265ee; font-size:16px; font-weight:600;} #mypage .point-text {margin-top:20px; padding-left:50px;} #mypage .point-text ul li {margin-bottom:4px; font-size:14px; color:#a2a2a2;} #mypage .detail-box {margin-bottom:60px;} #mypage .detail-box h2 {font-size:20px; color:#424242; font-weight:400; margin-bottom:25px;} #mypage .detail-box .list {border-top:3px solid #808080; margin-bottom:29px;} #mypage .detail-box .list li .list-head {border-bottom:1px solid #acacac;} #mypage .detail-box .list li .list-head:after {display:block; clear:both; content:"";} #mypage .detail-box .list li .list-head > div {float:left; height:57px; line-height:57px; font-size:15px; color:#5c5c5c;} #mypage .detail-box .list li .list-head > div:first-of-type {padding-left:18px;} #mypage .detail-box .list li .list-body {padding:29px 0;} #mypage .detail-box .list li .list-body form:after {display:block; clear:both; content:"";} #mypage .detail-box .list li .list-body form > div {position:relative; float:left; color:#424242; font-size:20px; font-weight:600; height:42px; line-height:42px;} #mypage .detail-box .list li .list-body form > div:first-of-type {padding-left:18px;} #mypage .detail-box .list li .list-body form > div span {font-size:20px; color:#424242; font-weight:600;} #mypage .detail-box .list li .list-body form > div input[type=text] {margin-right:5px; background:#fff; height:42px; padding:0 10px; border:1px solid #424242; border-radius:6px;} #mypage .detail-box .list li .list-body form > div input[type=text]::placeholder {color:#9e9e9e; font-size:12px;} #mypage .detail-box .list li .list-body form > div button {background:#808080; color:#fff; border-radius:6px; border:0; width:124px; text-align:center; height:42px; line-height:42px; font-size:14px; cursor:pointer;} #mypage .detail-box .list li .list-body form > div.hyphen:before {content:""; position:absolute; top:50%; left:-20%; transform:translateY(-50%); width:9px; height:2px; background:url('//atimg.sonyunara.com/attrangs/2020/mypage/hyphen.png') no-repeat left top; background-size:cover;} #mypage .detail-box .list li .list-body form > div.equal:before {content:""; position:absolute; top:50%; left:-22.5%; transform:translateY(-50%); width:10px; height:6px; background:url('//atimg.sonyunara.com/attrangs/2020/mypage/equal.png') no-repeat left top; background-size:cover;} #mypage .detail-box .list li .list-body form > div.arrow:before {content:""; position:absolute; top:50%; left:-50%; transform:translateY(-50%); width:20px; height:20px; background:url('//atimg.sonyunara.com/attrangs/2020/mypage/arrow.png') no-repeat left top; background-size:cover;} #mypage .detail-box .text ul li {font-size:15px; color:#adadad; line-height:1.5;} #mypage .detail-box .search {background:#fafafa; padding:30px 50px; text-align:center;} #mypage .detail-box .search:after {display:block; clear:both; content:"";} #mypage .detail-box .search > div:after {display:block; clear:both; content:"";} #mypage .detail-box .search > div:first-of-type {width:476px; float:left;} #mypage .detail-box .search > div:first-of-type a {display:block; width:128px; float:left; margin-right:18px; height:46px; line-height:46px; border:1px solid #939393; border-radius:5px; background:#fff; color:#919191; font-size:14px;} #mypage .detail-box .search > div:last-of-type input[type=text] {padding-left:15px; widtH:163px; float:left; height:46px; border-radius:5px; border:1px solid #939393; font-size:14px; background-image:url('//atimg.sonyunara.com/attrangs/2020/mypage/calendar.png'); background-repeat: no-repeat; background-position:95% center;} #mypage .detail-box .search > div:last-of-type span {display:block; float:left; width:35px; height:46px; line-height:46px; text-align:center; font-size:20px;} #mypage .detail-box .search > div:last-of-type button {width:100px; height:46px; line-height:46px; margin-left:10px; text-align:center; background:#7f7f7f; color:#fff; font-size:14px; border-radius:5px; box-shadow:none; border:0; cursor:pointer; float:left;} #mypage .detail-box .filter {margin-bottom:20px;} #mypage .detail-box .filter:after {display:block; clear:both; content:"";} #mypage .detail-box .filter .pull-left {display:inline-block; float:left;} #mypage .detail-box .filter .pull-left a {font-size:20px; color:#bfbfbf; display:inline-block; margin-right:50px;} #mypage .detail-box .filter .pull-left a.on {color:#424242;} #mypage .detail-box .filter .pull-right {display:inline-block; float:right;} #mypage .detail-box .filter .pull-right select {padding-right:20px; font-size:13px; color:#424242; border:0; appearance: none; -webkit-appearance: none; -moz-appearance: none; background:url('//atimg.sonyunara.com/attrangs/2020/mypage/more.png') no-repeat 95% 50%;} #mypage .detail-box .filter .pull-right select::-ms-expand { display:none; } #mypage .detail-box .table table {width:100%;} #mypage .detail-box .table table tr th {border-top:2px solid #b9b9b9; border-bottom:2px solid #b9b9b9; padding:30px 0; text-align:center; font-size:20px; color:#424242; font-weight:500;} #mypage .detail-box .table table tr th span {font-size:15px; display:inline-block; margin:0 3px; position:relative; top:-2px;} #mypage .detail-box .table table tr td {padding:30px 0; text-align:center; border-bottom:1px solid #e4e4e4; font-size:20px; color:#7f7f7f; font-weight:300;} #membership .msg {margin-bottom:20px; padding:33px 0 34px; background:#fbfbfb; color:#888; font-size:14px; text-align:center; line-height:27px;} #membership table {table-layout:fixed; width:100%; border-top:1px solid #333;} #membership table > tbody > tr > th {padding:30px 0; border-bottom:1px solid #e9e9e9; color:#888; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; font-weight:400; text-align:center; line-height:20px; vertical-align:middle;} #membership table > tbody > tr > td {padding:30px 0; border:1px solid #e9e9e9; border-width:0 0 1px 1px; font-family:Malgun Gothic, '맑은 고딕'; font-size:14px; text-align:center; vertical-align:middle;} #membership table > tbody > tr > td .icon {margin-bottom:14px;} #membership table > tbody > tr.grade > td {font-family:'Poppins'; font-size:15px;} #membership table > tbody > tr.free > td {font-size:13px;} #membership table > tbody > tr.quarter > td {font-size:13px;} #membership table > tbody > tr.birthday > td {font-size:13px;} #membership h3 {padding:94px 0 32px; color:#282828; font-size:24px; font-weight:400; text-align:center;} #membership h3 p {padding-top:4px; color:#888; font-size:13px;} #membership .benefit {padding-top:60px; border:1px solid #e9e9e9;} #membership .benefit:after {display:block; clear:both; content:'';} #membership .benefit li {float:left; width:16.66%; margin-bottom:58px; text-align:center;} #membership .benefit li:nth-child(6n+1) {clear:both;} #membership .benefit li dl dt {padding:57px 0 7px; background-repeat:no-repeat; background-position:center top; color:#40372e; font-size:15px;} #membership .benefit li dl dd {color:#a9a9a9; font-size:13px; line-height:19px;} #membership .benefit li.milage dl dt {background-image:url('/asset/img/etc/icon_milage.png'); background-position:center top 5px;} #membership .benefit li.bookmark dl dt {background-image:url('/asset/img/etc/icon_bookmark.png'); background-position:center top 5px;} #membership .benefit li.addinfo dl dt {background-image:url('/asset/img/etc/icon_addinfo.png'); background-position:center top 4px;} #membership .benefit li.day dl dt {background-image:url('/asset/img/etc/icon_day.png'); background-position:center top 4px;} #membership .benefit li.free dl dt {background-image:url('/asset/img/etc/icon_free2.png'); background-position:center top 7px;} #membership .benefit li.birthday dl dt {background-image:url('/asset/img/etc/icon_birthday.png'); background-position:center top 1px;} #membership .benefit li.review dl dt {background-image:url('/asset/img/etc/icon_revmilage.png'); background-position:center top 6px;} #membership .benefit li.queen dl dt {background-image:url('/asset/img/etc/icon_queen.png'); background-position:center top 15px;} #membership .benefit li.attend dl dt {background-image:url('/asset/img/etc/icon_attend.png'); background-position:center top 4px;} #membership .benefit li.excellent dl dt {background-image:url('/asset/img/etc/icon_excellent.png'); background-position:center top 11px;} #membership .benefit li.size dl dt {background-image:url('/asset/img/etc/icon_size.png'); background-position:center top 6px;} #membership .benefit li.new dl dt {background-image:url('/asset/img/etc/icon_new.png');} #membership .benefit li:hover dl dt {color:#d0591f;} #membership .benefit li.milage:hover dl dt {background-image:url('/asset/img/etc/icon_milage_on.png');} #membership .benefit li.bookmark:hover dl dt {background-image:url('/asset/img/etc/icon_bookmark_on.png');} #membership .benefit li.addinfo:hover dl dt {background-image:url('/asset/img/etc/icon_addinfo_on.png');} #membership .benefit li.day:hover dl dt {background-image:url('/asset/img/etc/icon_day_on.png');} #membership .benefit li.free:hover dl dt {background-image:url('/asset/img/etc/icon_free_on.png');} #membership .benefit li.birthday:hover dl dt {background-image:url('/asset/img/etc/icon_birthday_on.png');} #membership .benefit li.review:hover dl dt {background-image:url('/asset/img/etc/icon_revmilage_on.png');} #membership .benefit li.queen:hover dl dt {background-image:url('/asset/img/etc/icon_queen_on.png');} #membership .benefit li.attend:hover dl dt {background-image:url('/asset/img/etc/icon_attend_on.png');} #membership .benefit li.excellent:hover dl dt {background-image:url('/asset/img/etc/icon_excellent_on.png');} #membership .benefit li.size:hover dl dt {background-image:url('/asset/img/etc/icon_size_on.png');} #membership .benefit li.new:hover dl dt {background-image:url('/asset/img/etc/icon_new_on.png');} .membership .box {max-width:1400px; margin:0 auto;} .membership .main {background:#e6dcfa; padding:133px 0;} .membership .main:after {display:block; clear:both; content:"";} .membership .main .pull-left {width:calc(100% - 481px); height:338px; float:left; padding-left:147px; margin-top:30px;} .membership .main .pull-left p {line-height:1.3; color:#3f3f3f;} .membership .main .pull-left p:first-of-type {font-size:24px; font-weight:500;} .membership .main .pull-left p:nth-of-type(2) {font-size:30px; font-weight:600;} .membership .main .pull-left p:nth-of-type(3) {font-size:45px; font-weight:500; margin:89px 0 10px;} .membership .main .pull-left p:last-of-type {font-size:50px; font-weight:600;} .membership .main .pull-right {width:481px; float:left;} .membership .main .pull-right .bg {width:301px; height:338px; background:#fff; text-align:center; padding-top:40px; border-radius:15px;} .membership .main .pull-right .bg .member > p {font-size:25px; font-weight:500; color:#3f3f3f; line-height:1.2; margin-bottom:10px;} .membership .main .pull-right .bg .member .circle-wrap {width:130px; height:130px; margin:0 auto; position:relative;} .membership .main .pull-right .bg .member .circle-wrap img {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 50%;} .membership .main .pull-right .bg .member .content {position:relative; top:-15px; z-index:2;} .membership .main .pull-right .bg .member .content a {font-size:13px; color:#565656; border-bottom:1px solid #565656;} .membership .main .pull-right .bg .member .content p {color:#3f3f3f; font-size:17px; line-height:1.2; margin-top:10px;} .membership .main .pull-right .bg .member .content p b {color:#ff8e77; font-size:17px; font-weight:600;} .membership .main .pull-right .bg .nomember p {font-size:17px; font-weight:500; margin-bottom:30px;} .membership .main .pull-right .bg .nomember div img.join {margin-bottom:20px; margin-left:15px;} .membership .main .pull-right .bg .nomember div img.go {position:relative; top:4px;} .membership .main .pull-right .bg .nomember div a {font-size:15px;} .membership .main .pull-right .bg .nomember span {color:#ff8e77; font-size:15px;} .login-membership .content > ul:after {display:block; clear:both; content:"";} .login-membership .content > ul {max-width:1290px; margin:0 auto;} .login-membership .content > ul > li {width:20%; height:302px; background:#fff; float:left; text-align:center; position:relative;} .login-membership .content > ul > li > a {display:block; height:100%; cursor:auto;} .login-membership .content > ul > li:last-of-type {margin-right:0;} .login-membership .content > ul > li.active:hover {border-color:#ff8e77;} .login-membership .content > ul > li a > div p {color:#919191; font-size:14px; margin-bottom:5px;} .login-membership .content > ul > li a > div p:last-of-type {margin-bottom:0;} .login-membership .content > ul > li a > div p b {color:#4b4b4b; font-size:17px; font-weight:500;} .login-membership .content > ul > li.active:hover p {color:#4a4a4a;} .login-membership .content > ul > li.active:hover p b {font-weight:600;} .login-membership .content > ul > li a:before {display:block; width:99px; height:132px; content:""; margin:0 auto; margin-bottom:24px;} .login-membership .content > ul > li:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_day.png') center 40px no-repeat; background-size:74px 73px;} .login-membership .content > ul > li:nth-of-type(2) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attend.png') center 43px no-repeat; background-size:74px 69px;} .login-membership .content > ul > li:nth-of-type(3) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_free2.png') center 40px no-repeat; background-size:85px 82px;} .login-membership .content > ul > li:nth-of-type(4) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_new.png') center 30px no-repeat; background-size:89px 87px;} .login-membership .content > ul > li:nth-of-type(5) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_-birthday_acitve.png') center 30px no-repeat; background-size:86px 85px;} .login-membership .content > ul > li:nth-of-type(6) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_excellent_jp_acitve.png') center 40px no-repeat; background-size:94px 89px;} .login-membership .content > ul > li:nth-of-type(7) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_cp.png') center 33px no-repeat; background-size:78px 78px;} .login-membership .content > ul > li:nth-of-type(8){background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_milage.png') center 30px no-repeat; background-size:81px 91px;} .login-membership .content > ul > li:nth-of-type(9) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_revmilage.png') center 25px no-repeat; background-size:91px 90px;} .login-membership .content > ul > li:nth-of-type(10) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_queen.png') center 40px no-repeat; background-size:96px 88px;} .login-membership .content > ul > li:nth-of-type(11) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_addinfo.png') center 35px no-repeat; background-size:84px 83px;} .login-membership .content > ul > li:nth-of-type(12) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_bookmark.png') center 40px no-repeat; background-size:74px 73px;} .login-membership .content > ul > li:nth-of-type(13) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attpoint.png') center 40px no-repeat; background-size:74px 73px;} .login-membership .content > ul > li.active a {cursor:pointer !important;} .login-membership .content > ul > li.active:first-of-type:hover {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_day_on.png') center 40px no-repeat; background-size:74px 73px;} .login-membership .content > ul > li.active:hover:nth-of-type(2) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attend_on.png') center 43px no-repeat; background-size:74px 69px;} .login-membership .content > ul > li.active:hover:nth-of-type(3) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_free_on.png') center 40px no-repeat; background-size:85px 82px;} .login-membership .content > ul > li.active:hover:nth-of-type(4) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_new_on.png') center 30px no-repeat; background-size:89px 87px;} .login-membership .content > ul > li.active:hover:nth-of-type(5) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_birthday_on.png') center 30px no-repeat; background-size:86px 85px;} .login-membership .content > ul > li.active:hover:nth-of-type(6) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_excellent_on.png') center 40px no-repeat; background-size:94px 89px;} .login-membership .content > ul > li.active:hover:nth-of-type(7) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_cp_on.png') center 33px no-repeat; background-size:78px 78px;} .login-membership .content > ul > li.active:hover:nth-of-type(8){background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_milage_on.png') center 30px no-repeat; background-size:81px 91px;} .login-membership .content > ul > li.active:hover:nth-of-type(9) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_revmilage_on.png') center 25px no-repeat; background-size:91px 90px;} .login-membership .content > ul > li.active:hover:nth-of-type(10) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_queen_on.png') center 40px no-repeat; background-size:96px 88px;} .login-membership .content > ul > li.active:hover:nth-of-type(11) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_addinfo_on.png') center 35px no-repeat; background-size:84px 83px;} .login-membership .content > ul > li.active:hover:nth-of-type(12) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_bookmark_on.png') center 40px no-repeat; background-size:74px 73px;} .membership .scroll-tab ul {position:relative; background:#5e5e5e; border-radius:15px; margin-top:-68px;} .membership .scroll-tab ul:after {display:block; clear:both; content:"";} .membership .scroll-tab ul li {width:25%; float:left; position:relative; text-align:center; font-size:25px; color:#fff; height:137px; line-height:137px; cursor:pointer;} .membership .scroll-tab ul li:after {position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:78px; background:#fff; content:"";} .membership .scroll-tab ul li:last-of-type:after {display:none;} .membership .membership-box {padding:53px 0;} .membership .membership-box.gray {background:#f7f7f7;} .membership .membership-box .title {text-align:center; margin-bottom:73px;} .membership .membership-box .title small {font-size:15px; color:#c6a8e3;} .membership .membership-box .title h2 {font-size:30px; color:#111111; font-weight:500;} .membership .membership-box .title span {font-size:15px; color:#8e8e8e;} .membership .membership-box .text {text-align:right; margin-top:75px;} .membership .membership-box .text p {color:#979797; font-size:13px;} .membership .membership-box .content > ul:after {display:block; clear:both; content:"";} .membership .membership-box#scroll1 .content > ul {margin:0 auto; width:713px;} .membership .membership-box#scroll1 .content > ul > li {width:215px; cursor:auto !important; height:334px; float:left; margin-right:34px; background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/welcome_bg.png') left top no-repeat; background-size:cover;} .membership .membership-box#scroll1 .content > ul > li:last-of-type {margin-right:0;} .membership .membership-box#scroll1 .content > ul > li .content-top {text-align:center; height:223px; padding-top:52px;} .membership .membership-box#scroll1 .content > ul > li .content-top span {font-size:15px; color:#686868;} .membership .membership-box#scroll1 .content > ul > li .content-top p {font-size:40px; color:#c5a2e7; margin-top:20px;} .membership .membership-box#scroll1 .content > ul > li .content-top ul {margin-top:-3px;} .membership .membership-box#scroll1 .content > ul > li .content-top ul li {font-size:12px; color:#919191;} .membership .membership-box#scroll1 .content > ul > li .content-bottom {height:111px; padding-top:20px; padding-left:15px;} .membership .membership-box#scroll1 .content > ul > li .content-bottom ul li {text-align:left; font-size:14px; color:#919191;} .membership .membership-box.hover .content > ul {max-width:1032px; margin:0 auto -10px;} .membership .membership-box.hover .content > ul > li {width:248px; height:302px; background:#fff; float:left; margin-right:10px; border:2px solid #c6a8e3; margin-bottom:10px; border-radius:10px; text-align:center; position:relative;} .membership .membership-box.hover .content > ul > li > a {display:block; height:100%; cursor:auto;} .membership .membership-box.hover .content > ul > li:nth-of-type(5) {margin-left:133px;} .membership .membership-box.hover .content > ul > li:last-of-type {margin-right:0;} .membership .membership-box.hover .content > ul > li.active:hover {border-color:#ff8e77;} .membership .membership-box.hover .content > ul > li a > div p {color:#919191; font-size:15px; margin-bottom:5px;} .membership .membership-box.hover .content > ul > li a > div p:last-of-type {margin-bottom:0;} .membership .membership-box.hover .content > ul > li a > div p b {color:#4b4b4b; font-size:18px; font-weight:500;} .membership .membership-box.hover .content > ul > li.active:hover p {color:#4a4a4a;} .membership .membership-box.hover .content > ul > li.active:hover p b {font-weight:600;} .membership .membership-box.hover .content > ul > li a:before {display:block; width:99px; height:150px; content:""; margin:0 auto; border-bottom:2px solid #c6a8e3; margin-bottom:44px;} .membership .membership-box.hover .content > ul > li.active a:hover:before {border-color:#ff8e77;} .membership .membership-box .content > ul > li.active a {cursor:pointer;} .membership .membership-box#scroll2 .content > ul > li:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_day.png') center 50px no-repeat; background-size:74px 73px;} .membership .membership-box#scroll2 .content > ul > li:nth-of-type(2) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attend.png') center 53px no-repeat; background-size:74px 69px;} .membership .membership-box#scroll2 .content > ul > li:nth-of-type(3) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_free2.png') center 50px no-repeat; background-size:85px 82px;} .membership .membership-box#scroll2 .content > ul > li:nth-of-type(4) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_new.png') center 40px no-repeat; background-size:89px 87px;} .membership .membership-box#scroll2 .content > ul > li:nth-of-type(5) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_-birthday_acitve.png') center 40px no-repeat; background-size:86px 85px;} .membership .membership-box#scroll2 .content > ul > li:nth-of-type(6) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_excellent_jp_acitve.png') center 50px no-repeat; background-size:94px 89px;} .membership .membership-box#scroll2 .content > ul > li:nth-of-type(7) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_size_acitve.png') center 47px no-repeat; background-size:80px 80px;} .membership .membership-box#scroll2 .content > ul > li:last-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_cp.png') center 43px no-repeat; background-size:78px 78px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_day_on.png') center 50px no-repeat; background-size:74px 73px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:nth-of-type(2) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attend_on.png') center 53px no-repeat; background-size:74px 69px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:nth-of-type(3) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_free_on.png') center 50px no-repeat; background-size:85px 82px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:nth-of-type(4) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_new_on.png') center 40px no-repeat; background-size:89px 87px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:nth-of-type(5) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_birthday_on.png') center 40px no-repeat; background-size:86px 85px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:nth-of-type(6) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_excellent_on.png') center 50px no-repeat; background-size:94px 89px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:nth-of-type(7) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_size_on.png') center 47px no-repeat; background-size:80px 80px;} .membership .membership-box#scroll2 .content > ul > li.active:hover:last-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_cp_on.png') center 43px no-repeat; background-size:78px 78px;} .membership .membership-box#scroll3 .plus {position:relative;} .membership .membership-box#scroll3 .plus img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .membership .membership-box#scroll3 .content:after {display:block; clear:both; content:"";} .membership .membership-box#scroll3 .content > ul:first-of-type {width:774px; float:left;} .membership .membership-box#scroll3 .content > .plus {width:calc(100% - 1032px); height:624px; float:left;} .membership .membership-box#scroll3 .content > ul:last-of-type {width:258px; float:left;} .membership .membership-box#scroll3 .content > ul > li {width:248px; height:302px;} .membership .membership-box#scroll3 .content > ul > li a > div p {font-size:13px;} .membership .membership-box#scroll3 .content > ul > li a > div p b {font-size:16px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_milage.png') center 30px no-repeat; background-size:81px 91px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li:nth-of-type(2) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_revmilage.png') center 25px no-repeat; background-size:91px 90px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li:nth-of-type(3) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_queen.png') center 40px no-repeat; background-size:96px 88px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li:nth-of-type(4) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_addinfo.png') center 35px no-repeat; background-size:84px 83px; margin-left:131px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li:last-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_bookmark.png') center 40px no-repeat; background-size:74px 73px; margin-left:0; !important;} .membership .membership-box#scroll3 .content > ul:last-of-type > li:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_att.png') center 35px no-repeat; background-size:94px 94px;} .membership .membership-box#scroll3 .content > ul:last-of-type > li:last-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attq.png') center 35px no-repeat; background-size:94px 94px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li.active:hover:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_milage_on.png') center 30px no-repeat; background-size:81px 91px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li.active:hover:nth-of-type(2) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_revmilage_on.png') center 25px no-repeat; background-size:91px 90px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li.active:hover:nth-of-type(3) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_queen_on.png') center 40px no-repeat; background-size:96px 88px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li.active:hover:nth-of-type(4) {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_addinfo_on.png') center 35px no-repeat; background-size:84px 83px;} .membership .membership-box#scroll3 .content > ul:first-of-type > li.active:hover:last-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_bookmark_on.png') center 40px no-repeat; background-size:74px 73px;} .membership .membership-box#scroll3 .content > ul:last-of-type > li.active:hover:first-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_att_on.png') center 35px no-repeat; background-size:94px 94px;} .membership .membership-box#scroll3 .content > ul:last-of-type > li.active:hover:last-of-type {background:url('https://atimg.sonyunara.com/attrangs/2020/membership/pc/icon_attq_on.png') center 35px no-repeat; background-size:94px 94px;} .membership .grade-table {padding:12px 0; margin-top:5px;} .membership .grade-table ul:after {display:block; clear:both; content:"";} .membership .grade-table ul li {width:12.5%; float:left; cursor:pointer;} .membership .grade-table ul li .bg {border-radius:7px; height:715px;} .membership .grade-table ul li.on .bg {background:#fff;} .membership .grade-table ul li.on .bg {background:#fff;} .membership .grade-table ul li .bg .top {height:150px; text-align:center; position:relative; top:22px; margin-bottom:30px;} .membership .grade-table ul li .bg .top .name {font-size:16px; color:#919191; font-weight:600; margin-top:13px;} .membership .grade-table ul li .bg .top span {color:#13px; color:#919191;} .membership .grade-table ul li .bg .puzzle {height:105px; padding:0 14px;} .membership .grade-table ul li .bg .puzzle > div {position:relative; width:100%; height:79px; text-align:center; background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_basic_bg.png') left top no-repeat; background-size:cover !important;} .membership .grade-table ul li .bg .puzzle > div.none {background:none !important; line-height:79px;} .membership .grade-table ul li .bg .puzzle > div > span {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; text-align:center; color:#151515; display:block; font-size:14px;} .membership .grade-table ul li .bg .puzzle > span {display:block; font-size:12px; color:#2a2a2a; text-align:center; margin-top:2px;} .membership .grade-table ul li.on .bg .puzzle > div > span {color:#fff;} .membership .grade-table ul li.member.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_member_bg.png') left top no-repeat;} .membership .grade-table ul li.bronze.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_bro_bg.png') left top no-repeat;} .membership .grade-table ul li.silver.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_sil_bg.png') left top no-repeat;} .membership .grade-table ul li.gold.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_gold3_bg.png') left top no-repeat;} .membership .grade-table ul li.platinum.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_pla_bg.png') left top no-repeat;} .membership .grade-table ul li.diamond.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_dia_bg.png') left top no-repeat;} .membership .grade-table ul li.vip.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_vip_bg.png') left top no-repeat;} .membership .grade-table ul li.vvip.on .bg .puzzle > div {background:url('//atimg.sonyunara.com/attrangs/2020/mypage/mem_vvip_bg.png') left top no-repeat;} .membership .txt li {margin-bottom:3px; color:#3a3a3a; font-size:15px;} #my_info {margin-bottom:40px; background:#fbfbfb;} #my_info:after {display:block; clear:both; content:'';} #my_info .member {float:left; width:552px; padding:42px 0 47px 68px; font-size:0;} #my_info .member > div {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} #my_info .member .icon {width:68px; margin-right:22px;} #my_info .member .text {width:326px;} #my_info .member .text .grade, #my_info .member .text .grade * {font-size:20px;} #my_info .member .text .grade {margin-bottom:13px;} #my_info .member .text .detail, #my_info .member .text .detail * {color:#888; font-size:14px; line-height:21px;} #my_info .member .text .detail strong {color:#333; font-weight:500;} #my_info .member .text .detail strong:first-of-type {font-family:Malgun Gothic, '맑은 고딕'; font-weight:700;} #my_info .count {position:relative; float:left; width:648px; padding-left:114px; font-size:0;} #my_info .count:after{display:block; position:absolute; left:0; top:50%; width:1px; height:82px; margin-top:-41px; background:#dbdbdb; content:'';} #my_info .count li {display:inline-block; *display:inline; *zoom:1; width:130px; vertical-align:middle;} #my_info .count li dl dt {padding-top:58px; font-size:16px;} #my_info .count li dl dd, #my_info .count li dl dd * {font-family:Malgun Gothic, '맑은 고딕';} #my_info .count li dl dd {padding-bottom:65px; font-size:14px;} #my_info .count li dl dd strong {font-size:20px; font-weight:400;} .my_info_new {padding:33px 58px;} .my_info_new:after {display:block; clear:both; content:"";} .my_info_new .info {width:500px; float:left; position:relative;} .my_info_new .info:before {position:absolute; right:0; top:0; width:2px; height:100px; content:""; background:#e9e9e9;} .my_info_new .info:after {display:block; clear:both; content:"";} .my_info_new .info .info-grade {width:61px; float:left; position:relative; top:40px;} .my_info_new .info .info-text {width:calc(100% - 100px); float:left; margin-left:39px;} .my_info_new .info .info-text .date {font-size:18px; color:#585858;} .my_info_new .info .info-text .text {margin-bottom:5px;} .my_info_new .info .info-text .text p {font-size:20px; color:#585858;} .my_info_new .info .info-text .text p b {color:#ff8e77; font-size:22px; font-weight:500;} .my_info_new .info .info-text .small {color:#151515; font-size:12px;} .my_info_new .info .info-text .small a {color:#ff8e77; font-size:12px; display:inline-block; border-bottom:1px solid #ff8e77; /*margin-left:10px;*/} .my_info_new .state {width:calc(100% - 536px); float:left; padding-left:36px; margin-top:17px;} .my_info_new .state ul:after {display:block; clear:both; content:"";} .my_info_new .state ul li {width:25%; float:left;} .my_info_new .state ul li .state-tit {font-size:16px; color:#333333; margin-bottom:15px;} .my_info_new .state ul li .state-num {font-size:16px; color:#333333;} .my_info_new .state ul li .state-num b {font-size:16px; font-weight:500;} .my_info_new .state ul li .state-link {margin-top:15px;} .my_info_new .state ul li .state-link a {background:#ff8e77; color:#fff; display:inline-block; width:93px; height:27px; line-height:27px; text-align:center; font-size:12px; border-radius:5px;} .brand-from-wrap .visual {margin-bottom:80px;} .brand-from-wrap .from-top .box {max-width:1035px; margin:0 auto;} .brand-from-wrap .from-top .box .title {margin-bottom:60px;} .brand-from-wrap .from-top .box .title.first-title {height:101px; background:url('//atimg.sonyunara.com/attrangs/2020/self/from/from-title1_01.jpg') left top no-repeat; background-size:124px 101px;} .brand-from-wrap .from-top .box .title.second-title {height:107px; background:url('//atimg.sonyunara.com/attrangs/2020/self/from/from-title2.jpg') left top no-repeat; background-size:129px 107px;} .brand-from-wrap .from-top .update-date {width:580px; margin:0 auto; position:relative; top:-15px; left:60px;} .brand-from-wrap .from-top .update-date .date {text-align:center; font-size:25px; color:#727272; font-weight:100; margin:0 0 20px;} .brand-from-wrap .from-top .update-date ul li {text-align:center; cursor:pointer; position:relative; z-index:10;} .brand-from-wrap .from-top .update-date ul li span {display:block; text-align:center; font-size:18px; color:#b3b3b3; font-weight:100;} .brand-from-wrap .from-top .update-date ul li.on span {color:#c8b098;} .brand-from-wrap .from-top .update-date ul li.on span:last-of-type {display:inline-block; border-bottom:2px solid #c8b098;} .brand-from-wrap .from-top .update-list {margin-bottom:60px;} .brand-from-wrap .from-top .update-list ul {margin:0 -20px; display:none;} .brand-from-wrap .from-top .update-list ul:first-of-type {display:block;} .brand-from-wrap .from-top .update-list ul:after {display:block; clear:both; content:"";} .brand-from-wrap .from-top .update-list ul li {width:calc(25% - 40px); margin:0 20px 30px; float:left;} .brand-from-wrap .from-top .update-list ul li > div.image {position:relative; overflow:hidden; padding-bottom:295px;} .brand-from-wrap .from-top .update-list ul li > div.image a {display:block; position:absolute; left:0; top:0; width:100%; height:100%;} .brand-from-wrap .from-top .update-list ul li > div.image a img {width:100%;} .brand-from-wrap .from-top .update-list ul li > div.image:hover .open {display:block;} .brand-from-wrap .from-top .update-list ul li > div.image .open {display:none; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(200,176,152,0.9);} .brand-from-wrap .from-top .update-list ul li > div.image .open ul {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; text-align:center;} .brand-from-wrap .from-top .update-list ul li > div.image .open ul li {color:#fff; font-size:17px; margin-bottom:2px; display:block; width:100%;} .brand-from-wrap .from-top .update-list ul li > div.image .open ul li:last-of-type {margin-bottom:0;} .brand-from-wrap .from-top .update-list ul li > div.image .open > a {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:30px; text-align:center; color:#fff; font-size:20px;} .brand-from-wrap .from-top .update-list ul li > div.image .open > a span {font-size:25px; color:#fff; position:relative; top:2px;} .brand-from-wrap .from-top .update-list ul li > div.content {margin-top:17px;} .brand-from-wrap .from-top .update-list ul li > div.content .content-subject {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .brand-from-wrap .from-top .update-list ul li > div.content .content-subject a {color:#202020; font-size:16px; letter-spacing: -0.5px;} .brand-from-wrap .from-top .update-list ul li > div.content .content-detail {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#919191; font-size:14px;} .brand-from-wrap .from-bottom {margin-bottom:150px;} .brand-from-wrap .from-bottom .box {max-width:1035px; margin:0 auto;} .brand-from-wrap .from-bottom .best-from-list {margin:0 -10px -20px;} .brand-from-wrap .from-bottom .best-from-list li {position:relative; margin:0 0 20px; padding:0 10px;} .brand-from-wrap .from-bottom .best-from-list li .content {display:none; position:absolute; left:10px; bottom:0; width:calc(100% - 20px); background:rgba(255,255,255,0.7); padding:10px 0;} .brand-from-wrap .from-bottom .best-from-list li:hover .content {display:block;} .brand-from-wrap .from-bottom .best-from-list li .content .content-color {text-align:center;} .brand-from-wrap .from-bottom .best-from-list li .content .content-color span {display:inline-block; width:10px; height:10px; border-radius:50%;} .brand-from-wrap .from-bottom .best-from-list li .content .content-subject {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; margin-bottom:3px;} .brand-from-wrap .from-bottom .best-from-list li .content .content-subject a {color:#3f3f3f; font-size:15px; display:inline-block; border-bottom:1px solid #3f3f3f; padding-bottom:3px;} .brand-from-wrap .from-bottom .best-from-list li .content .content-price {text-align:center;} .brand-from-wrap .from-bottom .best-from-list li .content .content-price span {display:block;} .brand-from-wrap .from-bottom .best-from-list li .content .content-price span.p1 {color:#696969; font-size:16px; text-decoration:line-through;} .brand-from-wrap .from-bottom .best-from-list li .content .content-price span.p2 {color:#3f3f3f; font-size:16px;} .brand-from-wrap .from-bottom .best-from-list li .content .content-price span.p3 {color:#ff8e77; font-size:15px;} .brand-from-wrap .from-bottom .best-from-list li .icon {display:none; position:absolute; left:0; top:50%; transform:translateY(-50%); text-align:center; width:100%;} .brand-from-wrap .from-bottom .best-from-list li:hover .icon {display:block;} .brand-from-wrap .from-bottom .best-from-list li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-from-wrap .from-bottom .best-from-list li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/from/bag2.png') center 7px no-repeat; background-size:20px auto;} .brand-from-wrap .from-bottom .best-from-list li .icon a.play {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/from/play.png') 17px center no-repeat; background-size:15px auto;} .brand-from-wrap .from-bottom .best-from-list li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-from-wrap .from-bottom .best-from-list li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-from-wrap .from-bottom .best-from-list li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_on_m.png') center 10px no-repeat; background-size:26px auto;} .brand-from-wrap .from-banner {margin-bottom:150px;} .brand-from-wrap .from-banner img {display:block; margin:0 auto;} @keyframes scale3 { 0%{transform: scale(1);} 50%{transform: scale(1.5);} 100%{transform: scale(1);} } .brand-from-wrap .from-item {width:1277px; margin:0 auto;} .brand-from-wrap .from-item:after {display:block; clear:both; content:"";} .brand-from-wrap .from-item .left-from-item {width:136px; min-height:500px; float:left;} .brand-from-wrap .from-item .left-from-item ul {display:none; position:absolute;} .brand-from-wrap .from-item .left-from-item ul.on {position:fixed; left:312px; top:145px; display:block;} .brand-from-wrap .from-item .left-from-item ul li {margin-bottom:34px;} .brand-from-wrap .from-item .left-from-item ul li:last-of-type {margin-bottom:0;} .brand-from-wrap .from-item .left-from-item ul li a {color:#686868; font-size:18px; font-weight:100;} .brand-from-wrap .from-item .left-from-item ul li a.on {color:#000;} .brand-from-wrap .from-item .right-from-item {width:calc(100% - 136px); float:left;} .brand-from-wrap .from-item .right-from-item .category {margin-bottom:15px;} .brand-from-wrap .from-item .right-from-item .category ul:after {display:block; clear:both; content:"";} .brand-from-wrap .from-item .right-from-item .category ul li {display:inline-block; float:left; margin-right:25px;} .brand-from-wrap .from-item .right-from-item .category ul li a {color:#727272; font-size:16px;} .brand-from-wrap .from-item .right-from-item .category ul li a.on {color:#000;} .brand-from-wrap .from-item .right-from-item .total {text-align:right; color:#4c4c4c; font-size:16px; margin-bottom:14px;} .brand-from-wrap .from-item .right-from-item .list ul {margin:0 -25px; font-size:0;} .brand-from-wrap .from-item .right-from-item .list ul:after {display:block; clear:both; content:"";} .brand-from-wrap .from-item .right-from-item .list ul li {width:calc(33.33% - 50px); margin:0 25px 130px; display:inline-block; vertical-align:top;} .brand-from-wrap .from-item .right-from-item .list ul li .image {position:relative; overflow:hidden; padding-bottom:360px;} .brand-from-wrap .from-item .right-from-item .list ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-from-wrap .from-item .right-from-item .list ul li .image a img {width:100%;} .brand-from-wrap .from-item .right-from-item .list ul li .content {margin-top:30px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-subject {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; margin-bottom:5px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-subject a {font-size:15px; color:#000000;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-detail {text-align:center; color:#8e8e8e; font-size:15px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-detail span {display:block; color:#ff8e77; font-size:15px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-price span {display:block; text-align:center;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-price span.p1 {text-decoration:line-through; color:#939393; font-size:14px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-price span.p2 {color:#2d2d2d; font-size:15px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .content-sticker {margin-top:5px; text-align:center;} .brand-from-wrap .from-item .right-from-item .list ul li .icon {display:none; position:absolute; left:0; top:50%; transform:translateY(-50%); text-align:center; width:100%;} .brand-from-wrap .from-item .right-from-item .list ul li:hover .icon {display:block;} .brand-from-wrap .from-item .right-from-item .list ul li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-from-wrap .from-item .right-from-item .list ul li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/from/bag2.png') center 7px no-repeat; background-size:20px auto;} .brand-from-wrap .from-item .right-from-item .list ul li .icon a.play {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/from/play.png') 17px center no-repeat; background-size:15px auto;} .brand-from-wrap .from-item .right-from-item .list ul li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-from-wrap .from-item .right-from-item .list ul li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-from-wrap .from-item .right-from-item .list ul li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_on_m.png') center 10px no-repeat; background-size:26px auto;} .brand-from-wrap .from-item .right-from-item .list ul li .content .colorCodebox {text-align:center; margin-top:-15px;} .brand-from-wrap .from-item .right-from-item .list ul li .content .colorCodebox span {display:inline-block; width:15px; height:15px; border-radius:50%;} @keyframes scale3 { 0%{transform: scale(1);} 50%{transform: scale(1.5);} 100%{transform: scale(1);} } @font-face {font-family: 'Cafe24Oneprettynight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff'); font-weight: normal; font-style: normal; } .cafe-24 {font-family: 'Cafe24Oneprettynight' !important;} .brand-sm-wrap .sm-top .box {max-width:1484px; margin:0 auto;} .brand-sm-wrap .sm-top .top-box {margin:90px 0 70px; position:relative; height:71px; line-height:71px;} .brand-sm-wrap .sm-top .top-box:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-top .top-box .title {color:#4e4e4e; font-size:31px; line-height:0.5; position:relative; top:-10px;} .brand-sm-wrap .sm-top .top-box .title b {font-size:31px; color:#ea9c9c; font-weight:normal; font-weight:300;} .brand-sm-wrap .sm-top .top-box .date {position:absolute; bottom:0; left:50%; transform:translateX(-50%); color:#727272; font-size:35px; font-weight:normal; font-weight:100;} .brand-sm-wrap .sm-top .bottom-box .tab {margin:0 0 60px;} .brand-sm-wrap .sm-top .bottom-box .tab li {color:#b3b3b3; font-size:18px; text-align:center; cursor:pointer; height:50px; line-height:50px; border:1px solid #fff; border-bottom-color:#ea9c9c; box-sizing:border-box;} .brand-sm-wrap .sm-top .bottom-box .tab li.on {border:1px solid #ea9c9c; border-bottom-color:#fff; color:#ea9c9c;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul {margin:0 -10px; font-size:0;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li {width:calc(25% - 20px); display:inline-block; vertical-align:top; margin:0 10px 25px;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image {overflow:hidden; position:relative; padding-bottom:443px;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image a img {max-width:335px; width:100%;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image:hover .open {display:block;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image .open {display:none; position:absolute; left:0; top:0; width:101%; height:100%; background:rgba(227,201,200,0.8); z-index:2;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image .open ul {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; text-align:center;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image .open ul li {color:#fff; font-size:17px; margin-bottom:2px; display:block; width:100%;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image .open ul li:last-of-type {margin-bottom:0;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image .open > a {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:30px; text-align:center; color:#fff; font-size:20px;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .image .open > a span {font-size:25px; color:#fff; position:relative; top:2px;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .content {margin-top:15px;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .content .content-type {font-size:18px; font-weight:600;} .brand-sm-wrap .sm-top .bottom-box .tab-content ul li .content .content-subject a {font-size:12px;} .brand-sm-wrap .sm-best {margin-top:80px;} .brand-sm-wrap .sm-best .box {max-width:1484px; margin:0 auto;} .brand-sm-wrap .sm-best .title {color:#4e4e4e; font-size:31px; line-height:0.5; position:relative; top:-10px; padding-bottom:25px; font-weight:300;} .brand-sm-wrap .sm-best .title b {font-size:31px; color:#ea9c9c; font-weight:300;} .brand-sm-wrap .sm-best .list .list-slider:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-best .list .list-slider > div {width:50%; float:left;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li {width:100%; float:left; position:relative;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .bg {display:none;position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.5);} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li:hover .bg {display:block;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .image {position:relative; overflow:hidden; padding-bottom:742px;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .image a img {width:100%;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon {display:none; position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); text-align:center;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li:hover .icon {display:block;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/shopping.png') center 12px no-repeat; background-size:28px auto;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon a.search {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/search.png') 11px center no-repeat; background-size:26px auto;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/sm/like_on.png') center 10px no-repeat; background-size:26px auto;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .content {display:none; position:absolute; width:100%; left:0; bottom:0; text-align:center;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li:hover .content {display:block;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .content .colorCodebox {margin-bottom:3px;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .content .colorCodebox span {display:inline-block; width:20px; height:7px; border:1px solid #b2b2b2;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .content .content-subject {margin-bottom:5px; padding:0 10px;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .content .content-subject a {font-size:17px; color:#181818; font-weight:400;} .brand-sm-wrap .sm-best .list .list-slider > div.left-list ul li .content .content-price {padding-bottom:40px; color:#181818; font-size:17px; font-weight:300;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li {width:50%; float:left; position:relative;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .bg {display:none;position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.5);} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li:hover .bg {display:block;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .image {position:relative; overflow:hidden; padding-bottom:371px;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .image a img {width:100%;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon {display:none; position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); text-align:center;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li:hover .icon {display:block;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/shopping.png') center 12px no-repeat; background-size:28px auto;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon a.search {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/search.png') 11px center no-repeat; background-size:26px auto;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/sm/like_on.png') center 10px no-repeat; background-size:26px auto;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .content {display:none; position:absolute; width:100%; left:0; bottom:0; text-align:center;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li:hover .content {display:block;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .content .colorCodebox {margin-bottom:3px;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .content .colorCodebox span {display:inline-block; width:20px; height:7px; border:1px solid #b2b2b2;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .content .content-subject {margin-bottom:5px; padding:0 10px;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .content .content-subject a {font-size:17px; color:#181818; font-weight:400;} .brand-sm-wrap .sm-best .list .list-slider > div.right-list ul li .content .content-price {padding-bottom:40px; color:#181818; font-size:17px; font-weight:300;} .brand-sm-wrap .sm-banner {margin:150px auto;} .brand-sm-wrap .sm-banner img {display:block; margin:0 auto;} .brand-sm-wrap .sm-item .box {max-width:1484px; margin:0 auto; position:relative;} .brand-sm-wrap .sm-item .box:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-item .left-sm-item {width:136px; min-height:500px; float:left; position:absolute; top:0; left:-136px;} .brand-sm-wrap .sm-item .left-sm-item ul {display:none; position:absolute;} .brand-sm-wrap .sm-item .left-sm-item ul.on {position:fixed; left:75px; top:131px; display:block;} .brand-sm-wrap .sm-item .left-sm-item ul li {margin-bottom:24px;} .brand-sm-wrap .sm-item .left-sm-item ul li:last-of-type {margin-bottom:0;} .brand-sm-wrap .sm-item .left-sm-item ul li a {color:#c9c9c9; font-size:18px; font-weight:100; position:relative;} .brand-sm-wrap .sm-item .left-sm-item ul li a.on {color:#fe9898;} .brand-sm-wrap .sm-item .left-sm-item ul li a.on:before {position:absolute; left:-13px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:#fe9898; content:"";} .brand-sm-wrap .sm-item .right-sm-item {width:100%; float:left;} .brand-sm-wrap .sm-item .right-sm-item .top:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-item .right-sm-item .top .category {display:inline-block; float:left;} .brand-sm-wrap .sm-item .right-sm-item .top .category ul li {display:inline-block; margin-right:20px;} .brand-sm-wrap .sm-item .right-sm-item .top .category ul li a {font-size:18px; color:#c7c7c7;} .brand-sm-wrap .sm-item .right-sm-item .top .category ul li a.on {color:#fe9898; position:relative;} .brand-sm-wrap .sm-item .right-sm-item .top .category ul li a.on:before {position:absolute; left:50%; top:-9px; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#fe9898; content:"";} .brand-sm-wrap .sm-item .right-sm-item .total {display:block; margin-bottom:30px; text-align:right; color:#7b7b7b; font-size:20px;} .brand-sm-wrap .sm-item .right-sm-item .list ul {margin:0 -15px; font-size:0;} .brand-sm-wrap .sm-item .right-sm-item .list ul:after {display:block; clear:both; content:"";} .brand-sm-wrap .sm-item .right-sm-item .list ul li {width:calc(25% - 30px); display:inline-block; vertical-align:top; margin:0 15px 144px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .image {position:relative; overflow:hidden; padding-bottom:452px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .image a img {width:100%;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .bg {display:none;position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.5);} .brand-sm-wrap .sm-item .right-sm-item .list ul li:hover .bg {display:block;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon {display:none; position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); text-align:center;} .brand-sm-wrap .sm-item .right-sm-item .list ul li:hover .icon {display:block;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/shopping.png') center 12px no-repeat; background-size:28px auto;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon a.search {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/search.png') 11px center no-repeat; background-size:26px auto;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/sm/like_on.png') center 10px no-repeat; background-size:26px auto;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content {margin-top:15px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .content-subject {text-align:center; margin-bottom:5px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .content-subject a {color:#2e2e2e; font-size:17px; font-weight:400; letter-spacing:-0.8px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .colorCodebox {text-align:center; padding-bottom:14px; border-bottom:2px solid #ededed;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .colorCodebox span {display:inline-block; width:19px; height:6px; border:1px solid #d7d7d7;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .content-price {margin-top:10px; color:#1c1c1c; font-size:18px; text-align:center; font-weight:400;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .content-detail {text-align:center; font-size:13px; color:#919191; margin-top:5px; padding:0 20px;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .content-sticker {margin-top:35px; text-align:center;} .brand-sm-wrap .sm-item .right-sm-item .list ul li .content .content-sticker img {margin-bottom:5px;} .brand-atti-wrap .banner img {display:block; margin:0 auto;} .brand-atti-wrap .box {max-width:1200px; margin:0 auto;} .brand-atti-wrap .box .tit {text-align:center; color:#a18475; font-size:30px; margin-bottom:30px; font-weight:400;} .brand-atti-wrap .content-color span {display:inline-block; border:1px solid #cfcfcf !important; width:15px !important; height:7px !important;} .brand-atti-wrap .weekly {margin-top:100px;} .brand-atti-wrap .weekly .tit {margin-bottom:50px;} .brand-atti-wrap .weekly .tab {margin-bottom:20px;} .brand-atti-wrap .weekly .tab ul:after {display:block; clear:both; content:"";} .brand-atti-wrap .weekly .tab ul li {cursor:pointer; width:20%; height:40px; line-height:40px; background:#a18475; color:#fff; font-size:15px; font-weight:400; float:left; text-align:center;} .brand-atti-wrap .weekly .tab ul li.on {background:#fff; color:#a18475;} .brand-atti-wrap .weekly .tab-content ul {margin:0 -10px; font-size:0;} .brand-atti-wrap .weekly .tab-content ul:after {display:block; clear:both; content:"";} .brand-atti-wrap .weekly .tab-content ul li {width:calc(25% - 20px); display:inline-block; vertical-align:top; margin:0 10px 25px; overflow:hidden;} .brand-atti-wrap .weekly .tab-content ul li .image {overflow:hidden; position:relative; padding-bottom:378px;} .brand-atti-wrap .weekly .tab-content ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-atti-wrap .weekly .tab-content ul li .image a img {max-width:335px; width:100%;} .brand-atti-wrap .weekly .tab-content ul li .image:hover .open {display:block;} .brand-atti-wrap .weekly .tab-content ul li .image .open {display:none; position:absolute; left:0; top:0; width:101%; height:100%; background:rgba(161,132,117,0.8); z-index:2;} .brand-atti-wrap .weekly .tab-content ul li .image .open ul {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; text-align:center;} .brand-atti-wrap .weekly .tab-content ul li .image .open ul li {color:#fff; font-size:20px; margin-bottom:2px; display:block; width:100%;} .brand-atti-wrap .weekly .tab-content ul li .image .open ul li:last-of-type {margin-bottom:0;} .brand-atti-wrap .weekly .tab-content ul li .image .open > a {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:30px; text-align:center; color:#fff; font-size:20px;} .brand-atti-wrap .weekly .tab-content ul li .image .open > a span {font-size:25px; color:#fff; position:relative; top:2px;} .brand-atti-wrap .weekly .tab-content ul li .content {margin-top:5px;} .brand-atti-wrap .weekly .tab-content ul li .content .content-type {font-size:18px; font-weight:600;} .brand-atti-wrap .weekly .tab-content ul li .content .content-subject {padding:0 5px;} .brand-atti-wrap .weekly .tab-content ul li .content .content-subject a {font-weight:500; font-size:16px; color:#3c3030;} .brand-atti-wrap .weekly .tab-content ul li .content .content-detail {font-size:14px; color:#ababab; padding:0 5px;} .brand-atti-wrap .best {margin:100px 0;} .brand-atti-wrap .best:after {display:block; clear:both; content:"";} .brand-atti-wrap .best ul {font-size:0;} .brand-atti-wrap .best ul li {width:calc(25% - 10px); display:inline-block; vertical-align:top; padding:2.5px 5px; overflow:hidden; position:relative;} .brand-atti-wrap .best ul li .image {overflow:hidden; position:relative; padding-bottom:295px;} .brand-atti-wrap .best ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-atti-wrap .best ul li .image a img {width:100%;} .brand-atti-wrap .best ul li .icon {display:none; position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); text-align:center;} .brand-atti-wrap .best ul li:hover .icon {display:block;} .brand-atti-wrap .best ul li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-atti-wrap .best ul li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/shopping.png') center 12px no-repeat; background-size:28px auto;} .brand-atti-wrap .best ul li .icon a.search {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/search.png') 11px center no-repeat; background-size:26px auto;} .brand-atti-wrap .best ul li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-atti-wrap .best ul li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-atti-wrap .best ul li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/atti/like_on.png') center 10px no-repeat; background-size:26px auto;} .brand-atti-wrap .best ul li .content {display:none; position:absolute; bottom:20px; width:calc(100% - 40px); left:20px; background:rgba(255,255,255,0.7); text-align:center; border-radius:7px; padding:10px 0;} .brand-atti-wrap .best ul li:hover .content {display:block;} .brand-atti-wrap .best ul li .content .content-subject {padding:0 5px;} .brand-atti-wrap .best ul li .content .content-subject a {color:#434343; font-size:11px; font-weight:600;} .brand-atti-wrap .best ul li .content .content-subject a q {font-size:15px; color:#111; font-weight:500;} .brand-atti-wrap .best ul li .content .content-price span {display:inline-block;} .brand-atti-wrap .best ul li .content .content-price span.p1 strike {color:#747373; font-size:12px; font-weight:400;} .brand-atti-wrap .best ul li .content .content-price span.p2 {color:#2f2f2f; font-size:13px; margin-left:5px; font-weight:500;} .brand-atti-wrap .item {margin-top:115px;} .brand-atti-wrap .item .box {position:relative;} .brand-atti-wrap .item .item-category {position:absolute; left:0; top:-70px;} .brand-atti-wrap .item .item-category ul li {display:inline-block; margin-right:20px;} .brand-atti-wrap .item .item-category ul li a {color:#9e9e9e; font-size:19px; font-weight:400;} .brand-atti-wrap .item .item-category ul li.on a {color:#a18475; font-weight:500;} .brand-atti-wrap .item .item-category.on {position:fixed; left:205px; top:150px;} .brand-atti-wrap .item .item-category.on ul li {display:block; margin-bottom:5px; margin-right:0;} .brand-atti-wrap .item .item-list {margin-top:140px;} .brand-atti-wrap .item .item-list ul {font-size:0; margin:0 -9px;} .brand-atti-wrap .item .item-list ul li {width:calc(25% - 18px); margin:0 9px 40px; vertical-align:top; display:inline-block;} .brand-atti-wrap .item .item-list ul li .image {overflow:hidden; position:relative; padding-bottom:395px;} .brand-atti-wrap .item .item-list ul li .image a {position:absolute; left:0; top:0; width:100%; height:100%;} .brand-atti-wrap .item .item-list ul li .image a img {width:100%;} .brand-atti-wrap .item .item-list ul li:hover .image a img {opacity:0.6;} .brand-atti-wrap .item .item-list ul li .icon {display:none; position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); text-align:center;} .brand-atti-wrap .item .item-list ul li:hover .icon {display:block;} .brand-atti-wrap .item .item-list ul li .icon a {display:inline-block; width:45px; height:45px; background:rgba(255,255,255,0.7); border-radius:50%; margin:0 3px; position:relative;} .brand-atti-wrap .item .item-list ul li .icon a.bag {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/shopping.png') center 12px no-repeat; background-size:28px auto;} .brand-atti-wrap .item .item-list ul li .icon a.search {text-indent:-9999px; background:rgba(255,255,255,0.7) url('https://atimg.sonyunara.com/attrangs/2020/self/sm/search.png') 11px center no-repeat; background-size:26px auto;} .brand-atti-wrap .item .item-list ul li .icon a.heart {text-indent:-9999px; background:rgba(255,255,255,0.7);} .brand-atti-wrap .item .item-list ul li .icon a.heart span {width:100%; height:100%; background:url('https://atimg.sonyunara.com/attrangs/2020/self/from/like_m.png') center 10px no-repeat; background-size:26px auto; display:block; height:40px;} .brand-atti-wrap .item .item-list ul li .icon a.heart.on span {animation-name:scale3; animation-duration: 1s; background:url('https://atimg.sonyunara.com/attrangs/2020/self/atti/like_on.png') center 10px no-repeat; background-size:26px auto;} .brand-atti-wrap .item .item-list ul li .content {text-align:center; margin-top:8px;} .brand-atti-wrap .item .item-list ul li .content .content-subject a {color:#3c3030; font-size:14px; font-weight:600;} .brand-atti-wrap .item .item-list ul li .content .content-subject a q {color:#3c3030; font-size:13px; font-weight:600;} .brand-atti-wrap .item .item-list ul li .content .content-detail {font-size:11px; color:#a8a8a8; margin-bottom:5px;} .brand-atti-wrap .item .item-list ul li .content .content-price {margin-bottom:3px;} .brand-atti-wrap .item .item-list ul li .content .content-price span {display:block; font-size:13px;} .brand-atti-wrap .item .item-list ul li .content .content-price span.p1 strike {color:#6e6e6e; font-weight:300;} .brand-atti-wrap .item .item-list ul li .content .content-price span.p2 {color:#3a3a3a; font-weight:500;} .brand-atti-wrap .item .item-list ul li .content .content-price span.p3 {color:#ff8e77; font-size:15px; font-weight:400;} .brand-atti-wrap .item .item-list ul li .content .content-sticker img {margin-bottom:3px;}