/*-----------------------------------------------------------------*/ /* CSS Table of Contents /*-----------------------------------------------------------------*/ /* 1. Reset 2. Globalprdimg 2-1. table 2-2. button 2-3. product 3. Layout 3-1. wrapper 3-2. header 3-3. content 3-4. footer 4. Page 4-1. 메인 4-2. 상점 4-3. 회원 4-4. 마이페이지 4-5. 추가페이지 5. ETC /*-----------------------------------------------------------------*/ /* 1. Reset /*-----------------------------------------------------------------*/ /* web font */ @import url(https://fonts.googleapis.com/css?family=DM+Sans:400,500,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800); @import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900); /* reset */ 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, input, button {margin:0; padding:0; border:0; outline:0; color:#333; font-family: "DM Sans", "Open Sans", "Noto Sans KR", sans-serif, Arial, Helvetica, "Helvetica Neue", Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, '돋움'; font-size:13px; 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;} .clearfix:after { content:''; display:block; clear:both; } .bc {display:block; margin-left:auto; margin-right:auto;} .p_color {color:#d53838 !important;} .p_cursor {cursor:pointer;} .i_info {display:inline-block; position:relative; top:4px; width:16px; height:16px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/icon_info.png') no-repeat center; font-style:normal; font-weight:normal; line-height:1;} /* input 기본 스타일 */ .form_input {height:34px; padding:4px 10px; border:1px solid #dcdcdc; background:#fff; color:#666; font-family: "DM Sans", "Open Sans", "Noto Sans KR", sans-serif, Arial, Helvetica, "Helvetica Neue", Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, '돋움'; font-size:12px; transition:all .3s ease;} .form_input:focus {border-color:#000; outline:none;} .form_input.block {width:100%;} .form_input:-ms-input-placeholder {color:#666; font-family: "DM Sans", "Open Sans", "Noto Sans KR", sans-serif, Arial, Helvetica, "Helvetica Neue", Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, '돋움';} .form_input::-webkit-input-placeholder {color:#666; font-family: "DM Sans", "Open Sans", "Noto Sans KR", sans-serif, Arial, Helvetica, "Helvetica Neue", Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, '돋움';} .form_input::-moz-placeholder {color:#666; font-family: "DM Sans", "Open Sans", "Noto Sans KR", sans-serif, Arial, Helvetica, "Helvetica Neue", Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, '돋움';} .form_input.readonly {background:#e0e0e0;} .form_input.gray {background:#fafafa;} .form_input.gray:focus {background:#fff;} textarea.form_input { height:auto;} .form_input.disabled{user-select:none; background-color:#e0e0e0;} /* 셀렉트 */ select {max-width:100%; height:34px; padding:4px 6px; border:1px solid #dcdcdc; background:#fff; color:#666; font:inherit;} select.block {width:100%;} select:focus {border-color:#000; outline:none;} /* 서브 페이지 타이틀 */ h2.subtitle {margin:95px 0 60px; font-size:30px; font-weight:300; text-align:center;text-transform: uppercase;} h2.subtitle2 {font-size:30px; font-weight:300; text-align:center;text-transform: uppercase;} h2.subtitle.my {margin:0 0 25px;} /* 페이지 내 타이틀 */ h3.title.first {margin-top:0;} h3.title {margin:30px 0 10px; color:#333; font-size:16px; font-weight:400;} /* 갯수 문단 */ .title_count {position:relative; top:-35px; height:0; color:#888; font-size:14px; font-weight:300;} .title_count strong {font-size:14px; font-weight:400;} /* 상품리스트 수량,정렬선택 */ .total_sort { overflow: hidden; height: 35px; margin: 20px 0 30px; } .total_sort .total { float: left; color: #888; font-size: 14px; line-height: 35px; } .total_sort .total strong { font-size: 18px; } .total_sort .sort { float: right; } .total_sort .sort select { min-width: 152px; height: 35px; line-height: 35px; } /* 페이징 */ .paging {margin-top:30px; font-size:0; text-align:center;} .paging * {vertical-align:middle;} .paging li {display:inline; color:#888; vertical-align:middle;} .paging li strong {display:inline-block; margin: 0 10px; padding:0 5px; height: 18px; border-bottom:1px solid #404040; background:#fff; color:#404040; font-size:14px; font-weight:600; line-height:18px;} .paging li a {display:inline-block; height:18px; margin: 0 10px; padding:0 5px; background:#fff; color:#888; font-size:14px; line-height:18px;} /* 박스 스타일 - 수량 */ .box_qty {display:inline-block; position:relative; vertical-align:top;} .box_qty .form_input {width:59px; padding-right:22px;} .box_qty .btn_ea {position:absolute; right:0; top:0; width:24px; height:34px;} .box_qty .btn_ea a {display:block; width:24px; height:17px; background-repeat:no-repeat; background-position:center;} .box_qty .btn_ea a.ea_up {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_arrow_up.png')} .box_qty .btn_ea a.ea_down {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_arrow_down.png')} /* 컬러칩 리스트 */ .color_option {font-size:0;} .color_option:after {display:block; clear:both; content:'';} .color_option li {float:left;} .color_option li a {display:block; width:17px; height:17px; margin:1px; border:1px solid #fff;} .color_option li a.selected {border:1px solid #fff; outline:1px solid #ff1111;} .color_option li a img {width:15px; height:15px;} .text_option {font-size:0;} .text_option:after {display:block; clear:both; content:'';} .text_option li {float:left; text-align:left;} .text_option li a {overflow:hidden; display:block; height:20px; margin:1px; padding:0 6px; border:1px solid #d8d8d8; line-height:20px; text-align:center;} .text_option li a.selected {border:1px solid #ff1111;} .text_option li a.soldout {background:#ff1111; color:#fff;} /* 하단 줄 */ .underline {display:inline-block; position:relative;} .underline:after {position:absolute; left:50%; bottom:-3px; width:0; height:1px; background:#333; content:''; transition:all .3s ease;} .underline:before { position:absolute; right:50%; bottom:-3px; width:0; height:1px; background:#333; content:''; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; } .underline:hover:after, .underline:hover:before {width:50%;} /* 상품후기 평점 */ .gradebox {display:inline-block; position:relative; width:154px; height:24px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/grade.png') no-repeat left top/cover; font-size:0;} .gradebox:after {display:block; position:absolute; left:0; top:0; height:100%; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/grade_over.png') no-repeat left top/cover; content:'';} .gradebox.small {width:95px; height:15px;} .gradebox.point1:after {width:20%;} .gradebox.point2:after {width:40%;} .gradebox.point3:after {width:60%;} .gradebox.point4:after {width:80%;} .gradebox.point5:after {width:100%;} .gradebox.write label {display:inline-block; position:relative; z-index:10; width:30.8px; height:100%; opacity:0; font-size:0; cursor:pointer;} .gradebox.write input {cursor:pointer;} /* 사은품 리스트 */ .list_gift h3 {padding-bottom:15px;} .list_gift ul {border:1px solid #e5e5e5; border-width:1px 0; font-size:0;} .list_gift ul > li {display:inline-block; width:25%; margin-bottom:-1px; padding:20px 0; border-bottom:1px solid #e5e5e5; text-align:left; vertical-align:middle;} .list_gift ul > li > .box {margin-left:20px; border-right:1px solid #e5e5e5;} .list_gift ul > li:last-child .box, .list_gift ul > li:nth-child(4n) .box {border-right:0;} .list_gift ul > li .box .img {display:table-cell; position:relative; width:100px; height:100px; border:1px solid #e5e5e5;} .list_gift ul > li .box .img img {position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; transform:translate(-50%, -50%);} .list_gift ul > li .box .name {display:table-cell; padding:0 20px 0 10px; vertical-align:middle;} /* 쿠폰 다운로드 리스트 */ .list_cpn_down .box {padding:0 30px 30px 30px; border:1px solid #dcdcdc;} .list_cpn_down .box ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap:wrap; } .list_cpn_down .box ul > li {width:25%; margin-top:30px; padding:0 20px; border-right:1px solid #eee; text-align:center; vertical-align:top;} .list_cpn_down .box ul > li:last-child, .list_cpn_down .box ul > li:nth-child(4n) {border-right:0;} .list_cpn_down .box ul > li .sale {display:inline-block; position:relative; min-width:100px; height:40px; padding:0 10px 0 26px; border:1px solid #999; font-size:14px; font-weight:bold; text-align:center; line-height:38px;} .list_cpn_down .box ul > li .sale:before {position:absolute; left:-5px; top:50%; width:10px; height:10px; margin-top:-5px; border:1px solid #999; border-radius:50%; border-bottom-color:transparent; border-left-color:transparent; background-color:#fff; transform:rotate(45deg); content:'';} .list_cpn_down .box ul > li .sale:after {position:absolute; left:16px; top:0; width:1px; height:100%; border-right:1px dashed #999; content:'';} .list_cpn_down .box ul > li .name {margin:10px 0; font-weight:bold;} .list_cpn_down .box ul > li .box_btn * {min-width:100px;} .list_cpn_down .box ul > li .fin {display:inline-block; min-width:100px; padding:4px 8px; border:1px solid #c3c3c3; outline:none; background:#fff; color:#666 ; line-height:1.4; white-space:nowrap;} /* box_timer */ .box_timer { display:inline-block; margin: 5px 0 0; border:1px solid #dcdcdc; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px; } .box_timer .title {display:inline-block; position:relative; padding:5px 10px; border-radius:20px; background-color:#333; color:#fff; font-size:11px; vertical-align:top;} .box_timer .title:before {content:''; display:inline-block; width:13px; height:13px; margin:2px 5px 0 0; border:1px solid #fff; border-radius:50%; vertical-align:top; } .box_timer .title:after { content:''; display:inline-block; position:absolute; left:13px; top:50%; width:4px; height:4px; margin-top:-4px; border:1px solid #fff; border-width:0 1px 1px 0;} .box_timer ._timesale_timer {display:inline-block; padding: 3px 10px 0; min-width: 80px; } .box_timer ._timesale_timer * {color:#333; font-size:12px; line-height:21px;} .box_timer ._timesale_timer > ._timer_num {font-weight:900;} .box_timer.big .title {padding: 8px 12px; font-size: inherit;} .box_timer.big .title:before {margin-top:3px;} .box_timer.big ._timesale_timer { padding: 5px 12px 0; min-width: 90px; } .box_timer.big ._timesale_timer * { font-size: inherit; line-height:30px;} #detail .box_timer { margin:10px 0;} /* event_timesale */ .event_timesale { overflow: hidden; position: fixed; bottom: 40px; right: 0; width: 280px; transform: translate(0,40px); -webkit-transform: translate(0,40px); -moz-transform: translate(0,40px); -ms-transform: translate(0,40px); -o-transform: translate(0,40px); transition: all 0.4s; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; z-index: 100; } .event_timesale .box_title { position: relative; height: 50px; border-radius: 10px 0 0 0; background: #f65634; } .event_timesale .box_title span { display: block; padding: 0 60px 0 26px; height: 50px; color: #fff; font-size: 18px; font-weight: 600; line-height: 50px; } .event_timesale .box_title .btn_fold { display: block; position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/timesale_close.png') no-repeat center; cursor: pointer; } .event_timesale.closed { bottom: 50px; transform: translate(0,100%); -webkit-transform: translate(0,100%); -moz-transform: translate(0,100%); -ms-transform: translate(0,100%); -o-transform: translate(0,100%); } .event_timesale.closed .box_title .btn_fold { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/timesale_open.png') no-repeat center; } .event_timesale .box_cnt { padding: 20px; border: 1px solid #f65634; background: #fff; } .event_timesale .item_slide { position: relative; padding: 20px 0 0; } .event_timesale .item_slide .slide_btn { position: absolute; top: 0; right: 0; width: 50px; height: 12px; } .event_timesale .item_slide .slide_btn .prev { float: left; width: 50%; height: 12px; border-right: 1px solid #ddd; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/timesale_prev.png') no-repeat left top; cursor: pointer; } .event_timesale .item_slide .slide_btn .next { float: right; width: 50%; height: 12px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/timesale_next.png') no-repeat right top; cursor: pointer; } .event_timesale .item_slide .slide { width: 100%; } .event_timesale .item_slide .slide .slideitem { width: 100%; } .event_timesale .item_slide .box { overflow: hidden; } .event_timesale .item_slide .img { position: relative; float: left; width: 80px; background: #000; } .event_timesale .item_slide .img a { display: block; } .event_timesale .item_slide .img img { width: 100%; height: auto; } .event_timesale .item_slide .info { margin: 0 0 0 100px; text-align: left; } .event_timesale .item_slide .info .brand { padding: 0 0 5px; font-weight: 600; line-height: 1; } .event_timesale .item_slide .info .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 300; } .event_timesale .item_slide .info a { color: inherit; font-size: inherit; line-height: inherit; } .event_timesale .item_slide .info .price { margin: 5px 0 0; } .event_timesale .item_slide .info .price .consumer { display: block; color: #888; text-decoration: line-through; } .event_timesale .item_slide .info .price .sell { font-size: 15px; font-weight: 700; } .event_timesale .item_slide .info .price .sale { margin: 0 0 0 5px; color: #f65634; font-weight: 600; } .event_timesale .timer { margin: 10px 0 0; } .event_timesale .timer span { color: #404040; font-size: 28px; font-weight: 700; } /*-----------------------------------------------------------------*/ /* 2-1. table /*-----------------------------------------------------------------*/ /* 테이블 스타일 - 가로 */ .tbl_col {table-layout:fixed; clear:both; width:100%; border-collapse:collapse;} .tbl_col caption {padding-bottom:20px; font-size:16px; font-weight:400; text-align:left; line-height:1;} .tbl_col > thead > tr > th {padding:15px 0 16px; border-top:1px solid #404040; border-bottom:1px solid #ddd; font-size:14px; font-weight:400; text-align:center; vertical-align:middle;} .tbl_col > tbody > tr > td {padding:8px 0 9px; border-bottom:1px solid #ddd; font-size:14px; text-align:center; vertical-align:middle;} .tbl_col > tbody > tr > td * {font-size:14px;} .tbl_col > tbody > tr > td.tal {padding-left:15px;} .tbl_col > tbody > tr > td.img img {width:100px; height:auto;} .tbl_col > tbody > tr > td.order_number a {font-weight:bold; text-decoration:underline;} /* 테이블 스타일 - 가로 - 장바구니, 재입고 알림 신청 내역 */ .tbl_col.prd tbody tr > td {padding:20px 0 25px;} .tbl_col.prd tbody tr > td.delete_wish {font-size:0;} .tbl_col.prd tbody tr > td.delete_wish a {display:inline-block; position:relative; padding:0 15px;} .tbl_col.prd tbody tr > td.delete_wish a:first-child:after {position:absolute; right:0; top:50%; width:1px; height:10px; margin-top:-5px; background:#ccc; content:'';} .tbl_col.prd tbody tr > td.tal { padding-left: 15px; } .tbl_col.prd tbody tr > td .brand_name, .tbl_col.prd tbody tr > td .brand_name * {color:#888; font-size:12px;} .tbl_col.prd tbody tr > td .prd_name {font-weight:300;} .tbl_col.prd tbody tr > td .opt {margin-top:33px; color:#888; font-weight:300;} .tbl_col.prd tbody tr > td .btn_edit {display:inline-block; *display:inline; *zoom:1; height:20px; border:1px solid #ccc; vertical-align:middle;} .tbl_col.prd tbody tr > td .btn_edit a {display:block; padding:0 10px; font-size:12px; line-height:18px;} .tbl_col.prd tbody tr > td .btn_delivery {margin:4px 0;} .tbl_col.prd tbody tr > td .box_qty {vertical-align:middle;} .tbl_col.prd tbody tr > td img {vertical-align:middle;} .tbl_col.prd .box_qty {width:90px; height:30px; border:1px solid #ccc;} .tbl_col.prd .box_qty .form_input {width:100%; height:28px; padding:0 27px; border:0; text-align:center; line-height:28px;} .tbl_col.prd .box_qty > a {position:absolute; top:0; width:27px; height:28px; background-repeat:no-repeat; background-position:center;} .tbl_col.prd .box_qty .ea_down {left:0; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/ea_down.png');} .tbl_col.prd .box_qty .ea_up {right:0; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/ea_up.png');} .tbl_col.prd tbody tr td span.stat1 {color:#111;} .tbl_col.prd tbody tr td span.stat2 {color:#2591bc;} .tbl_col.prd tbody tr td span.stat3 {color:#c05b5b;} .tbl_col.prd tbody tr td span.stat4 {color:#999;} /* 테이블 스타일 - 가로 - qna, review */ .tbl_col.board {border-top:1px solid #e0e0e0;} .tbl_col.board tbody tr td, .tbl_col.board tbody tr td * {color:#666; font-size:13px; font-weight:normal;} .tbl_col.board tbody tr td.notice_cnt {padding:0; border:0;} .tbl_col.board tbody tr td.notice_cnt .notice_cnt_frame {display:none; padding:15px; border-bottom:1px solid #e0e0e0; background:#fafafa; text-align:left; word-break:break-all; word-wrap:break-word;} .tbl_col.board tbody tr td.subject img {vertical-align:middle;} .tbl_col.board tbody tr td.subject a {cursor:pointer;} .tbl_col.board tbody tr td.subject .prd {padding-bottom:10px;} .tbl_col.board tbody tr td.subject .title, .tbl_col.board tbody tr td.subject .title * {color:#000; font-size:14px; font-weight:bold;} .tbl_col.board tbody tr td.subject .content {padding-top:10px;} .tbl_col.board tbody tr td.subject .more {display:inline-block; padding-top:10px; color:#666; font-weight:bold;} .tbl_col.board tbody tr td .best {display:inline-block; padding:0 3px; background:#f00; color:#fff;} .tbl_col.board .grade {padding-left:5px; font-size:16px; font-weight:bold;} /* 테이블 스타일 - 세로 */ .tbl_row {table-layout:fixed; width:100%; border-top:1px solid #e0e0e0;} .tbl_row caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_row th {padding:15px 0 15px 30px; border-bottom:1px solid #e0e0e0; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_row td {padding:15px 10px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle; word-break:break-all; word-wrap:break-word;} /* 테이블 스타일 - 주문서, 주문상세조회 */ .tbl_order {table-layout:fixed; width:100%; margin:0 auto; border-top:1px solid #e0e0e0;} .tbl_order caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_order th {padding:20px; border:1px solid #e0e0e0; border-width:0 1px 1px 0; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_order td {padding:20px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle;} .tbl_order td .form_input {width:260px;} .tbl_order td textarea.form_input {width:100%;} .tbl_order td .msg {color:#999; font-size:11px;} .tbl_order td .own_mileage, .tbl_order td .own_deposit {color:#d53838; line-height:35px;} .tbl_order td.edit {line-height:30px;} .tbl_order td.address p {margin-top:10px;} .tbl_order td.address p:first-child {margin-top:0;} .tbl_order td.address .zip .form_input {width:158px;} /* 테이블 스타일 - 주문서, 주문상세조회, 장바구니 */ .tbl_order2 {table-layout:fixed; width:100%; margin:0 auto;} .tbl_order2 caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_order2 th {padding:6px 0; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_order2 td {padding:6px 0; text-align:right; vertical-align:middle;} .tbl_order2.sale {margin:5px 0; border:1px solid #dcdcdc; border-width:1px 0;} .tbl_order2 .total td {position:relative;} .tbl_order2 .total td .view_info {display:none; margin-top:5px;} .tbl_order2 .total_price, .tbl_order2 .total_price * {color:#d53838;} /* 테이블 스타일 - 상품정보고시 */ .tbl_prdinfo {table-layout:fixed; width:100%; margin:20px 0;} .tbl_prdinfo caption {padding-bottom:20px; font-weight:bold; text-align:left;} .tbl_prdinfo th {padding:10px; border:1px solid #e0e0e0; background-color:#fafafa; font-weight:normal; text-align:left; vertical-align:middle;} .tbl_prdinfo td {padding:10px; border:1px solid #e0e0e0; text-align:left; vertical-align:middle;} /* 테이블 스타일 - 브랜드리스트 */ .tbl_brand_list {table-layout:fixed; width:100%;} .tbl_brand_list td {position:relative; padding:15px 30px 17px 20px; border-left:1px solid #eee; vertical-align:middle;} .tbl_brand_list td:first-child {padding-left:0; border-left:0;} .tbl_brand_list td, .tbl_brand_list td * {color:#888;font-size:14px;font-weight:300;line-height:20px;} .tbl_brand_list td .btn_brand_wish {position:absolute; top:50%; right:10px; margin-top:-5.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tbl_brand_list td.empty_cell + td.empty_cell {border-left:0;} /* 테이블 스타일 - 마이브랜드리스트 */ .tbl_mybrand_list {table-layout:fixed; width:100%;} .tbl_mybrand_list tr {border-bottom:1px solid #eee;} .tbl_mybrand_list td {position:relative; padding:25px 61px 8px 0; vertical-align:middle;} .tbl_mybrand_list td, .tbl_mybrand_list td * {color:#404040; font-size:14px; font-weight:300; line-height:20px;} .tbl_mybrand_list td .btn_brand_wish {position:absolute; top:50%; right:47px; margin-top:-5.5px;} /* 테이블 스타일 - 고객센터 게시글 리스트 */ .tbl_cs_board {table-layout:fixed; width:100%; border-top:1px solid #404040;} .tbl_cs_board td {padding:18px 0 16px; border-bottom:1px solid #ddd; text-align:center; vertical-align:middle;} .tbl_cs_board td, .tbl_cs_board td * {font-size:14px;} .tbl_cs_board td.date, .tbl_cs_board td.date * {color:#888;} /*-----------------------------------------------------------------*/ /* 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 #404040; outline:none; background:#404040; color:#fff; /*font-size:12px; font-family: "DM Sans", "Open Sans", "Noto Sans KR", sans-serif, Arial, Helvetica, "Helvetica Neue", Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, '돋움'; font-weight:normal;*/ text-align:center; vertical-align:middle; /*line-height:1.4;*/ white-space:nowrap; cursor:pointer; -webkit-appearance:none; transition:all .2s ease;} .box_btn > *:hover, .box_btn > *:active, .box_btn > *:focus {background:#000; border:1px solid #000;} /* 버튼스타일 - 크기 */ .box_btn.small > * {padding:4px 8px;} .box_btn.large > * {padding:12px 16px; font-size:14px;} .box_btn.huge > * {padding:16px 20px; font-size:16px;} /* 버튼스타일 - 가로길이 */ .box_btn.block {display:block;} .box_btn.block > * {width:100%;} .box_btn.w50 > * {width:50px;} .box_btn.w75 > * {width:75px;} .box_btn.w100 > * {width:100px;} .box_btn.w125 > * {width:125px;} .box_btn.w130 > * {width:130px;} .box_btn.w140 > * {width:140px;} .box_btn.w150 > * {width:150px;} .box_btn.w175 > * {width:175px;} .box_btn.w200 > * {width:200px;} .box_btn.w210 > * {width:210px;} .box_btn.w225 > * {width:225px;} .box_btn.w250 > * {width:250px;} .box_btn.w260 > * {width:260px;} .box_btn.w275 > * {width:275px;} .box_btn.w300 > * {width:300px;} .box_btn.w325 > * {width:325px;} .box_btn.w350 > * {width:350px;} /* 버튼스타일 - 색상 */ .box_btn.white > * {border:1px solid #ccc; background:#fff; color:#404040 !important;} .box_btn.white > *:hover, .box_btn.white > *:active, .box_btn.white > *:focus {border:1px solid #404040; background:#fff;} .box_btn.gray > * {border:1px solid #ccc; background:#ccc;} .box_btn.gray > *:hover, .box_btn.gray > *:active, .box_btn.gray > *:focus {border:1px solid #aaa; background:#aaa;} .box_btn.black > * {border: 1px solid #000; background:#000; color:#fff;} .box_btn.black:hover > *, .box_btn.black:active > *, .box_btn.black:focus > * {background:#555; border: 1px solid #555;} .box_btn.whitegray > * {border:1px solid #404040; background:#fff; color:#404040;} .box_btn.whitegray > *:hover, .box_btn.whitegray > *:active, .box_btn.whitegray > *:focus {border:1px solid #888; background:#888; color:#fff;} .box_btn.lightgray * {border:1px solid #404040; background:#f8f8f8; color:#4c4c4c;} .box_btn.lightgray > *:hover, .box_btn.lightgray > *:active, .box_btn.lightgray > *:focus {border:1px solid #404040; background:#fff; color:#4c4c4c;} .box_btn.point > * {border:1px solid #f65634; background:#f65634; color:#fff;} .box_btn.point > *:hover, .box_btn.point > *:active, .box_btn.point > *:focus {background:#fff; color:#f65634;} /* 버튼스타일 - 텍스트 */ .box_btn.strong * {font-weight:bold;} .box_btn.mt {margin-top:5px;} /* 버튼스타일 - 폰트사이즈 */ .box_btn.ft14 > * {font-size:14px;} .box_btn.ft18 > * {font-size:18px;} /* 버튼스타일 - 높이 */ .box_btn.h40 > * {height:40px; padding:0 12px; line-height:38px;} .box_btn.h50 > * {height:50px; padding:0 12px; line-height:48px;} .box_btn.h60 > * {height:60px; padding:0 12px; line-height:58px;} /* 나열 버튼 */ .btn_col {width:100%;} .btn_col:after {display:block; clear:both; content:'';} .btn_col > .box_btn {float:left; width:49%;} .btn_col > .box_btn:last-child {float:right;} /* 버튼스타일 - 브랜드 위시 */ .btn_brand_wish {display:inline-block; width:16px; height:16px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish.png') no-repeat center; color:transparent; font-size:0; cursor:pointer;} .btn_brand_wish.on {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish_on.png');} /* 버튼스타일 - 게시글 위시 */ .btn_board_wish {position:absolute; top:30px; right:0; display:inline-block; width:31px; height:25px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/board_wish.png') no-repeat center; color:transparent; font-size:0; cursor:pointer;} .btn_board_wish.on {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/board_wish_on.png');} /*-----------------------------------------------------------------*/ /* 2-3. product /*-----------------------------------------------------------------*/ /* 상품스타일 - 기본 */ .prd_basic {display: block; clear: both; font-size: 0; text-align: left;} .prd_basic > li { display: inline-block; padding: 0 0 60px 30px; vertical-align: top; } .prd_basic.col2 > li { width: 50%; } .prd_basic.col3 {margin-left:-30px;} .prd_basic.col3 > li { width: 33.33%; } .prd_basic.col4 { margin: 0 0 0 -30px; } .prd_basic.col4 > li { width: 25%; } .prd_basic.col5 {margin-left:-30px;} .prd_basic.col5 > li { width: 20%; } .prd_basic.col6 {margin-left:-30px;} .prd_basic.col6 > li {width:16.666%; padding-left:30px;} .prd_basic .box { position: relative; margin: 0 auto; } .prd_basic .box .img { overflow: hidden; position: relative; width: 100%; margin: 0 auto; text-align: center; z-index: 1; } .prd_basic .box .img .best_icon { display: none; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: #404040; color: #fff; font-size: 14px; text-align: center; line-height: 40px; z-index: 5; } .prd_basic .box .img .timesale_icon { display: none; position: absolute; top: 20px; left: 20px; z-index: 5; } .prd_basic .box .img .prdimgm { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .prd_basic .box .img .prdimg img { 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 .quick {display:none; position:absolute; left:0; top:50%; z-index:10; width:100%; margin-top:-25px; font-size:0; text-align:center;} .prd_basic .box .img .quick > li {display:inline-block; text-align:center; vertical-align:top;} .prd_basic .box .img .quick > li a {display:block; width:50px; height:50px; margin:0 10px; background:no-repeat center / cover transparent; text-indent:-9999px;} .prd_basic .box .img .quick > li.cart a {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_cart2.png');} .prd_basic .box .img .quick > li.wish a {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_wish2.png');} .prd_basic .box .img .quick > li.wish.on a {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_wish_on2.png');} .prd_basic .box .img .dimmed { display: none; position: absolute; top: 0; left: 0; z-index: 8; width:100%; height:100%; background:#000; opacity: 0.4; cursor: pointer; } .prd_basic .box .img:hover .quick, .prd_basic .box .img:hover .dimmed {display:block;} .prd_basic .box .info {margin: 20px 0 0;} .prd_basic .box .brand a { margin: 0 0 5px; font-size: 15px; font-weight: 600; line-height: 1; } .prd_basic .box .name { overflow: hidden; margin: 3px 0 0; font-size: 14px; font-weight: 300; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } .prd_basic .box .name a { color: inherit; font-size: inherit; line-height: inherit; word-break: keep-all; } .prd_basic .box .price {padding: 6px 0 0;} .prd_basic .box .price p {word-break:break-all; word-wrap:break-word;} .prd_basic .box .price .consumer { margin: 0 5px 0 0; color: #888; text-decoration:line-through; } .prd_basic .box .price .sell { font-size: 15px; } .prd_basic .box .price .sale { color: #f65634; font-size: 15px; font-weight: bold; margin: 0 0 0 10px; } .prd_basic .box .summary {padding-top:5px; color:#888; font-size:13px; /*word-break:break-all; word-wrap:break-word;*/ word-break: keep-all;} .prd_basic .box .count {padding-top:20px; font-size:0;} .prd_basic .box .count li {display:inline; position:relative; padding:0 10px; color:#888; font-size:11px;} .prd_basic .box .count li:after {position:absolute; left:0; top:3px; width:1px; height:10px; background:#d2d2d2; content:'';} .prd_basic .box .count li:first-child:after {display:none;} .prd_basic .box .icon {padding-top:20px;} .prd_basic .box .icon img {margin:0 2px; vertical-align:middle;} .prd_basic .box .today {display:inline-block; margin:15px auto 0; padding:3px; background-color:#ebebeb;} .prd_basic .box .today > span {padding-left:5px; color:#666;} /* 품절시 soldout 출력 */ .prd_basic .box .img .soldout { display: none; } .prd_basic .box.out .img { background: #000; } .prd_basic .box.out .img a { cursor: default; } .prd_basic .box.out .img .prdimg { opacity: 0.4; } .prd_basic .box.out .img .soldout { display: block; position: absolute; top: calc( 50% - 10px ); left:0; width: 100%; color: #fff; font-size: 16px; font-weight: 300; text-align: center; text-transform: uppercase; z-index: 5; } .prd_basic .box.out .img:hover .quick, .prd_basic .box.out .img:hover .dimmed { display: none; } .prd_basic .box.out .info a { cursor: default; } /* 상품스타일 - 기본 - 오버랩 */ .prd_basic.overlap > li {padding-bottom:30px; background:none;} .prd_basic.overlap .box {cursor:pointer;} .prd_basic.overlap .box .img .quick {padding:0 10px; text-align:center;} .prd_basic.overlap .box .img .quick > li a {width:40px; height:40px;} .prd_basic.overlap .box .info {display:none; position:absolute; left:0; bottom:0; margin: 0; padding: 0 20px 20px; width:100%; z-index:10;} .prd_basic.overlap .box .info * {color:#fff;} .prd_basic.overlap .box .info .brand { display: inline-block; font-size:15px;} .prd_basic.overlap .box .info .name {font-size:14px;} .prd_basic.overlap .box .info .colorchip {display:none;} .prd_basic.overlap .box .price .sale {display:none;} .prd_basic.overlap .box:hover .img {background:#000;} .prd_basic.overlap .box:hover .img .prdimg { opacity:.6; } .prd_basic.overlap .box:hover .img .quick {display:block;} .prd_basic.overlap .box:hover .info {display:block;} /* 상품스타일 - 기본 - 레이어 */ .prd_basic.mini {width:100%; text-align:center;} .prd_basic.mini .box .img .prdimg {transition:none;} .prd_basic.mini .box .img:hover .prdimg {-ms-transform:none; -webkit-transform:none; transform:none;} .prd_basic.mini .box .img .icon_best {position:absolute; left:10px; top:10px; width:40px; height:40px; border-radius:50%; background:#fff; line-height:40px;} .prd_basic.mini .box .info {display:none; position:absolute; left:50%; bottom:10px; z-index:5; width:100%; margin-left:-50%; background:transparent; text-align:center;} .prd_basic.mini .box:hover .info {display:block;} .prd_basic.mini .box:hover .img .prdimg { opacity: 0.3; } .prd_basic.mini .box .price .consumer, .prd_basic.mini .box .summary, .prd_basic.mini .box .count, .prd_basic.mini .box .icon, .prd_basic.mini .box .today {display:none;} /* 상품스타일 - 기본 - 레이어 - new 5% dc */ .prd_basic.mini.new .box .img, .prd_basic.mini.new .box .info {width:175px;} .prd_basic.mini.new .box .info {margin-left:-87.5px;} /* 상품스타일 - 기본 - 레이어 - 카테고리 추천 */ .prd_basic.mini.best .box .img, .prd_basic.mini.best .box .info {width:205px;} .prd_basic.mini.best .box .info {margin-left:-102.5px;} /* 상품스타일 - 기본 - 슬라이드 */ /* .prd_basic.slide {display:none;} */ .prd_basic.slide.slick-initialized {display:block;} .prd_basic.slide .slick-prev {position:absolute; left:-44px; top: calc( 50% - 58px ); width:30px; height:58px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_m_prev.png') no-repeat center;} .prd_basic.slide .slick-next {position:absolute; right:-44px; top: calc( 50% - 58px ); width:30px; height:58px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_m_next.png') no-repeat center;} .prd_basic.slide.col3 .slideitem {width:33.33%; padding-left:30px;} .prd_basic.slide.col4 .slideitem {width:25%; padding-left:30px;} .prd_basic.slide.col5 .slideitem {width:20%; padding-left:30px;} .prd_basic.slide.col6 .slideitem {width:16.666%; padding-left:30px;} /* 상품스타일 - 관심상품, 관련상품 */ .prd_related {table-layout:fixed; clear:both; width:100%; border-top:1px solid #e0e0e0; border-collapse:collapse;} .prd_related thead {display:none;} .prd_related tbody tr td {border-bottom:1px solid #e0e0e0; vertical-align:middle; text-align:center;} .prd_related tbody tr td.img img {width:120px; height:auto;} .prd_related tbody tr td.tal, .prd_related tbody tr td.opt {padding-left:15px; text-align:left;} .prd_related tbody tr td.opt select {display:block; min-width:130px; margin:5px 0;} .prd_related tbody tr td .soldout {display:none; color:#d53838; font-weight: 600;} .prd_related tbody tr td .summary {color:#888; font-size:11px;} .prd_related tbody tr.out td .soldout {display:block;} .prd_related tbody tr.out td.img { opacity: 0.4; } .prd_related tbody tr.out td.opt { display: none; } .prd_related tbody tr.out td input[type=checkbox] { display: none; } /* 상품스타일 - 랭크 */ .prd_rank {display:block; clear:both; font-size:0; text-align: left;} .prd_rank > li {margin-bottom:20px; background:#fff;} .prd_rank .box {overflow:hidden; position:relative;} .prd_rank .box .img {position:relative; float:left; z-index:1; max-width:120px;} .prd_rank .box .img .prdimg {transition:all .3s ease; text-align:center;} .prd_rank .box .img .prdimg img {width:auto; height:120px;} .prd_rank .box .img .soldout {display:none;} .prd_rank .box .img:hover {background:#000} .prd_rank .box .img:hover .quick {display:block;} .prd_rank .box .rank {position:absolute; top:10px; right:15px; z-index:5; width:60px; height:60px; border-radius:50%; background:#404040; color:#fff; text-align:center; line-height:60px;} .prd_rank .box .info {position:relative; min-height:120px; padding:0 85px 0 130px; text-align:left;} .prd_rank .box .info a {color:inherit; font-size:inherit; line-height:inherit;} .prd_rank .box .brand {padding-bottom:6px; font-size:15px; font-weight:600; line-height:1;} .prd_rank .box .name {font-size:14px; font-weight:300; line-height:22px;} .prd_rank .box .price {padding-top:8px;} .prd_rank .box .price > span {word-break:break-all; word-wrap:break-word;} .prd_rank .box .price .consumer {margin-right:10px; color:#888; text-decoration:line-through;} .prd_rank .box .price .sell {font-size:15px;} .prd_rank .box .price .sale {margin-left:8px; color:#f65634; font-size:15px; font-weight:600; line-height:18px;} .prd_rank .box .colorchip {padding-top:10px; font-size:0;} .prd_rank .box .colorchip img {width:12px; height:12px; margin:5px 5px 0 0; border:1px solid #ccc;} .prd_rank .box .icons {font-size:0; text-align:left;} .prd_rank .box .icons img {margin:10px 5px 0 0;} /* 품절시 soldout 출력 */ .prd_rank .out .img {background:#000;} .prd_rank .out .img .soldout {display:block; position:absolute; left:0; top:50%; z-index:5; width:100%; margin-top:-10px; color:#fff; font-size:16px; font-weight:300; text-align:center; line-height:20px; cursor:pointer;} .prd_rank .out .img .prdimg { opacity: 0.4;} @media screen and (max-width: 1460px) { .prd_basic.slide .slick-prev { left: 0; } .prd_basic.slide .slick-next { right: 0; } } /*-----------------------------------------------------------------*/ /* 3. Layout /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 3-1. wrapper /*-----------------------------------------------------------------*/ #wrapper {position:relative; min-width: 1280px; /*text-align:left;*/} #container {overflow:hidden;} /* 컨텐츠 사이즈 */ .wrap_inner { min-width: 1280px; width: 1320px; margin: 0 auto; } .wrap_inner2 { width: 1280px; margin: 0 auto; } @media screen and (max-width: 1460px) { .wrap_inner { width :1280px; } } /*-----------------------------------------------------------------*/ /* 3-2. header /*-----------------------------------------------------------------*/ /* top_banner */ .top_bnr { overflow: hidden; position: relative; } .top_bnr .inner { position: relative; text-align: center; width: 100%; max-height: 80px; } .top_bnr .inner img{ width: 100%; } .top_bnr .close { position: absolute; top: calc( 50% - 15px ); right: 80px; width: 30px; height: 30px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/top_bnr_close.png') no-repeat 50%; cursor: pointer; } #header {position: relative; /*border-bottom:1px solid #e0e0e0;*/ } #header .logo_area { position: relative; margin: 0 40px; } #header h1.logo{ padding: 25px 0; } #header h1.logo a{ width: 170px; height: 50px; display: block; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/logo/logo.png') no-repeat center; text-indent: -9999em; margin: 0 auto;} #header .family_site{ position: absolute; top: 40px; left: 0; padding: 0 0 25px; } #header .family_site > .now { display: block; padding: 0 20px 0 0; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/global_arr_down.png') no-repeat right center; color: #404040; line-height: 10px; cursor: pointer; } #header .family_site ul { display: none; position: absolute; top: 30px; left: -25px; z-index: 10; min-width: 165px; padding: 20px; border: 1px solid #888; background: #fff; text-align: left; } #header .family_site ul li { padding: 5px 0; } #header .family_site ul li a{ font-size: 13px; padding: 0 0 0 23px; } #header .family_site:hover > .now { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/global_arr_up.png') no-repeat right center; } #header .family_site:hover ul { display: block; } #header .family_site .celecon{ background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/favicon_c1.png') no-repeat; } #header .family_site .celeconc{ background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/favicon_c2.png') no-repeat; } #header .family_site .celeconh{ background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/favicon_c3.png') no-repeat; } #header .user_menu { position: absolute; top: 35px; right: 0; } #header .user_menu .menu_list > li { float:left; padding: 0 0 20px 20px; } #header .user_menu .menu_list > li > a { display: block; position: relative; width: 35px; height: 25px; } #header .user_menu li.calculator {padding:0;} #header .user_menu li.calculator button {display:inline-block; vertical-align:middle; position:relative; width:160px; height:40px; margin-top:-5px; border:#f0f0f0 solid 1px; border-radius:20px; background-color:#fff; cursor:pointer; transition:0.2s; -webkit-transition:0.2s;} #header .user_menu li.calculator button:hover {background-color:#f0f0f0;} #header .user_menu li.calculator button .cb_icon {display:inline-block; vertical-align:middle; position:absolute; left:19px; top:15px; width:3px; height:9px; border:#6f6f6f solid 1px; transition:0.2s; -webkit-transition:0.2s;} #header .user_menu li.calculator button .cb_icon:before {content:""; position:absolute; left:-5px; bottom:-1px; width:3px; height:6px; border:#6f6f6f solid 1px; transition:0.2s; -webkit-transition:0.2s;} #header .user_menu li.calculator button .cb_icon:after {content:""; position:absolute; right:-5px; bottom:-1px; width:3px; height:4px; border:#6f6f6f solid 1px; transition:0.2s; -webkit-transition:0.2s;} #header .user_menu li.calculator button:hover .cb_icon:before {height:9px;} #header .user_menu li.calculator button:hover .cb_icon:after {height:9px;} #header .user_menu li.calculator button span {display:block; position:relative; padding-left:40px; font-size:13px; color:#6f6f6f; letter-spacing:-0.5px; line-height:38px; text-align:center;} #header .user_menu li.calculator button span:before {content:""; position:absolute; left:40px; top:50%; width:1px; height:10px; margin-top:-5px; background-color:#e2e2e2;} #header .user_menu li.mypage > a { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/gnb_mypage.png') no-repeat center; } #header .user_menu li.mypage .sub { display: none; position: absolute; top: 35px; left: 50%; z-index: 10; width: 140px; margin-left: -67px; padding: 20px 19px; border: 1px solid #888; background: #fff; /*text-align: left;*/ } #header .user_menu li.mypage:hover .sub { display: block; } #header .user_menu li.mypage .sub ul > li a { display: block; font-size: 13px; line-height: 30px; } #header .user_menu li.mypage .sub .member { font-size: 13px; line-height: 1.3; } #header .user_menu li.mypage .sub .member strong { font-size: 15px; line-height: inherit; } #header .user_menu li.mypage .sub ul.center { margin: 10px 0; padding: 10px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } #header .user_menu li.mypage > a .on { position: absolute; top: 0; right: -10px; font-size: 10px; line-height: 1; } #header .user_menu li.cart > a { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/gnb_cart.png') no-repeat center; } #header .user_menu li.cart > a .ea_cart { position: absolute; top: 0; right: 0; font-size: 10px; line-height: 1; } #header .user_menu li.search > a { width: 20px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/gnb_search.png') no-repeat center; cursor: pointer; } #header .user_menu li.search > a.active { background-image: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/gnb_search_close.png'); } #header .user_menu li.search:hover > a.active + .keyword { display: none; } #header .user_menu li.search .keyword { display: none; position: absolute; top: 35px; right: -30px; z-index: 10; width: 215px; padding: 30px 19px; border: 1px solid #888; background: #fff; /*text-align: left;*/ } #header .user_menu li.search:hover .keyword { display: block; } #header .user_menu li.search .keyword .title { margin: 0 0 10px; font-size: 20px;line-height: 1; } #header .user_menu li.search .keyword .list { margin: 0 0 0 -7px; } #header .user_menu li.search .keyword .list > li { display: inline-block; margin: 7px 0 0 7px; vertical-align: top; } #header .user_menu li.search .keyword .list > li a { display: block; padding: 5px 8px; border: 1px solid #ddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color: #888; letter-spacing: -0.5px; line-height: 1; } /*#header .user_menu ul > li.viewsub > a {padding-right:20px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_arrow_down.png') no-repeat 90% center;} #header .user_menu ul > li.viewsub > .list {display:none; position:absolute; left:0; top:30px; width:100%; padding:5px 0; border:1px solid #e0e0e0;} #header .user_menu ul > li.viewsub > .list li {float:none;} #header .user_menu ul > li.viewsub > .list li a {display:inline-block; padding:5px 12px; color:#888; font-size:11px; line-height:normal; word-break:break-all;} #header .user_menu ul > li.viewsub > .list li a:hover{ text-decoration: underline; } #header .user_menu ul > li.viewsub:hover {background-color:#eeedec;} #header .user_menu ul > li.viewsub:hover > a {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_arrow_up.png');} #header .user_menu ul > li.viewsub:hover > .list {display:block;} #header .user_menu ul.favorite {float:left;} #header .user_menu ul.favorite > li:first-child > a {padding-left:0;} #header .user_menu ul.favorite > li.viewsub {display:none; width:150px;} #header .user_menu .fixed {position:fixed; left:0; top:0; z-index:20; width:100%; border-bottom:1px solid #e0e0e0; background:rgba(255,255,255,0.9);} */ #header .search_bar { display: none; position: absolute; top: 100px; left: 0; z-index: 5; width: 100%; height: 80px; background: #f3f6f7; } #header .search_bar form { display: block; text-align: center; } #header .search_bar form .box { position: relative; width: 1200px; margin: 0 auto; text-align: left; } #header .search_bar form .box .basic_search { height: 80px; padding: 0 40px; border: 0; background: transparent; font-size: 20px; font-weight: 300; text-align: center; line-height: 80px; } #header .search_bar form .box .btn { position: absolute; top: calc( 50% - 24px); right: 0; padding: 10px; } #header .gnb { position: relative; width: 100%; min-height:60px; background:#fff; box-shadow:0 1px 0 rgba(0, 0, 0, 0.08);} #header .gnb .hg_btn {display:inline-block; vertical-align:middle; position:relative; float:left; width:60px; height:60px; box-sizing:border-box; border:#fff solid 1px; border-bottom:none; background-color:#fff; cursor:pointer; transition:0.2s; -webkit-transition:0.2s;} #header .gnb .hg_btn:hover {border-color:#eaeaea; background-color:#f7f7f7;} #header .gnb .hg_btn i {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:16px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:1px; background-color:#333; transition:0.2s; -webkit-transition:0.2s;} #header .gnb .hg_btn i:before {content:""; position:absolute; left:0; top:-5px; width:100%; height:100%; border-radius:1px; background-color:#333; transition:0.2s; -webkit-transition:0.2s;} #header .gnb .hg_btn i:after {content:""; position:absolute; left:0; top:5px; width:100%; height:100%; border-radius:1px; background-color:#333; transition:0.2s; -webkit-transition:0.2s;} #header .gnb.on .hg_btn {border-color:#eaeaea; background-color:#f7f7f7;} #header .gnb.on .hg_btn i {background-color:transparent;} #header .gnb.on .hg_btn i:before {top:0; transform:rotate(45deg); -ms-transform:rotate(45deg);} #header .gnb.on .hg_btn i:after {top:0; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header .gnb .category {display:inline-block; vertical-align:middle; float:left; width:calc(100% - 60px); height:60px; overflow:hidden;} #header .gnb .category > li {display:inline-block; vertical-align:middle; float:left; position:relative; width:11.11%; text-align:center;} #header .gnb .category > li:before {content:""; position:absolute; right:0; top:50%; width:1px; height:12px; margin-top:-6px; background-color:rgba(0, 0, 0, 0.08);} #header .gnb .category > li a {display:inline-block; position:relative; padding:0 20px; color:#333; font-size:14px; line-height: 60px; text-transform: uppercase;} #header .gnb .category > li.hover_cate > a:after { display: none; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 10px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/cate_tail_gray.png') no-repeat center bottom; } /* #header .gnb .category > li a:hover {background:#f6f6f6; color:#000;} #header .gnb .category > li.active a {background:#f6f6f6; color:#000;} */ #header .gnb .category > li.active > a:after { display: block; z-index: 5; content: ''; } #header .gnb .category > li.line_after a { padding: 0 40px 0 20px; margin: 0 20px 0 0; } #header .gnb .category > li.line_after a::after { position:absolute; top: calc( 50% - 5px ); right:0; width:1px; height:10px; background:#e5e5e5; content:''; } #header .gnb .category > li.line_before a { padding: 0 20px 0 40px; margin: 0 0 0 20px; } #header .gnb .category > li.line_before a::before { position:absolute; top: calc( 50% - 5px ); left: 0; width:1px; height:10px; background:#e5e5e5; content:''; } #header .gnb .hg_menu {display:none; position:absolute; left:0; right:0; top:60px; z-index:999; padding:20px 0; background-color:#f6f6f6; box-shadow:0 100px 100px rgba(27, 28, 29, 0.3);} #header .gnb.on .hg_menu {display:block;} #header .gnb .hg_menu .wrap_inner {position:relative;} #header .gnb .hg_menu .wrap_inner:before {content:""; position:absolute; right:0; bottom:30px; width:250px; height:220px; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bg_gnb.png'); background-repeat:no-repeat; background-position:center;} #header .gnb .hg_menu h3 {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; font-size:35px; font-weight:200; color:#939597; line-height:50px; letter-spacing:-1px;} #header .gnb .hg_menu h3 strong {font-size:35px; font-weight:700; color:#939597; line-height:50px; letter-spacing:-1px;} #header .gnb .hg_menu .hgm_wrap {display:inline-block; vertical-align:middle; margin-left:480px;} #header .gnb .hg_menu ul {display:inline-block; vertical-align:middle; width:140px; float:left;} #header .gnb .hg_menu li {display:inline-block; vertical-align:middle; width:100%;} #header .gnb .hg_menu a {display:inline-block; vertical-align:middle; width:100%; font-size:13px; color:#939597; line-height:30px; text-indent:20px;} #header .gnb .hg_menu a:hover {font-weight:700; text-decoration:underline;} #header .cate_child{ background-color: #f6f6f6; position: absolute; top: 30px; width: 100%; z-index: 10; box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.2); /*border-top: 1px solid #e0e0e0;*/ margin: 30px 0 0; display: none;} #header .cate_child a:hover{ font-weight: bold; text-decoration: underline; } #header .cate_child_group{ width: 1320px; margin: 0 auto; overflow: hidden; } #header .cate_child_name { width: 250px; min-height: 240px; font-size: 30px; border-right: 1px solid #e0e0e0; margin: 30px 0 30px 100px; padding: 20px 0 0; float: left; line-height: 1; } #header .cate_child_name a{ display: block; margin: 10px 0 0; font-size: 14px; } #header .cate_child_2th{ position: relative; float: left; margin: 20px 25px; padding: 20px 25px; } #header .cate_child_2th a{ font-size: 14px; min-width: 200px; max-width: 300px; display: block; padding: 5px 0;} #header .cate_child_2th_name.on > a{ font-weight: bold; text-decoration: underline; } #header .cate_child_2th_name:hover .cate_child_3rd{ display: block; min-height: 280px; } #header .cate_child_3rd{ position: absolute; top: 0; left: 220px; display: none; padding: 20px 25px;} #header .cate_child_banner{ float: right; margin: 50px 0; } #header .cate_child_banner_img{ text-align: center; } #header .cate_child_banner_img img{ width: 250px; height: 170px; } #header .cate_child_banner_name{ margin: 10px 0 0; text-align: left; } #header .cate_child_banner_name a{ font-size: 14px; display: block; } #header .sub_4363 .cate_child_name { min-height: 280px; } /*#header .sub_1001 .cate_child_name { min-height: 440px; } #header .sub_4436 .cate_child_name { min-height: 340px; } #header .sub_4437 .cate_child_name { min-height: 370px; }*/ #header .h_category {background-color:#fff;} /* box-shadow:0 5px 10px rgba(27, 28, 29, 0.06); */ #header .h_category ul {display:inline-block; vertical-align:middle; width:100%;} #header .h_category li {display:inline-block; vertical-align:middle; float:left; width:8.333%; text-align:center;} #header .h_category a {display:inline-block; vertical-align:middle; width:100%; padding:15px 0 10px;} #header .h_category .hc_icon {display:inline-block; vertical-align:middle; position:relative; width:80px; height:80px; border-radius:30px; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/icon_category.png'); background-repeat:no-repeat;} #header .h_category .hc_icon:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; border:#6f6f6f solid 1px; border-radius:40px; opacity:0.1;} #header .h_category a:hover .hc_icon:before {border-width:5px;} #header .h_category .hc_icon.eyes {background-position:center 0;} #header .h_category .hc_icon.immunity {background-position:center -80px;} #header .h_category .hc_icon.diet {background-position:center -160px;} #header .h_category .hc_icon.intestine {background-position:center -240px;} #header .h_category .hc_icon.liver {background-position:center -320px;} #header .h_category .hc_icon.bone {background-position:center -400px;} #header .h_category .hc_icon.blood {background-position:center -480px;} #header .h_category .hc_icon.antioxidation {background-position:center -560px;} #header .h_category .hc_icon.man {background-position:center -640px;} #header .h_category .hc_icon.woman {background-position:center -720px;} #header .h_category .hc_icon.kids {background-position:center -800px;} #header .h_category .hc_icon.care {background-position:center -880px;} #header .h_category span {display:inline-block; vertical-align:middle; width:100%; height:30px; margin-top:5px; font-size:15px; color:#939597; line-height:30px;} #header .h_category a:hover span {font-weight:700; text-decoration:underline;} #header.fixed .logo a { position: fixed; top: 5px; left: 15px; padding: 0; width: 170px; height: 50px; background-size: 70%; z-index: 30; } #header.fixed .user_menu { position: fixed; top: 15px; right: 40px; z-index: 21; } #header.fixed .gnb {position: fixed; top: 0; left: 0; z-index: 20; width: 100%; text-align:center; /*border-bottom: 1px solid #e0e0e0; background: rgba(255,255,255,0.9);*/ } #header.fixed .gnb .toggle_search{ position: fixed; right: 400px; } #header.fixed .search_bar { position: fixed; top: 60px; } #header.fixed .search_bar form{ position: fixed; width: 100%; } #header.fixed .gnb .hg_btn {display:none;} #header.fixed .gnb .category {width:1100px; float:none;} #header.fixed .gnb .category li:first-child:after {content:""; position:absolute; left:0; top:50%; width:1px; height:12px; margin-top:-6px; background-color:rgba(0, 0, 0, 0.08);} @media screen and (max-width: 1600px){ #header .gnb .category > li a { padding: 0 10px; } #header .gnb .category > li.line_after a { padding: 0 20px 0 10px; margin: 0 10px 0 0; } #header .gnb .category > li.line_before a { padding: 0 10px 0 20px; margin: 0 0 0 10px; } #header.fixed .gnb .category {width:1100px; float:none;} #header.fixed .gnb .category li {width:100px;} } @media screen and (max-width: 1460px){ /* #header .gnb .category > li a { padding: 0 10px; } */ #header .gnb .hg_menu .hgm_wrap {margin-left:465px;} #header .gnb .hg_menu ul {width:135.5px;} #header.fixed .logo a{ left: 0; } #header.fixed .user_menu{ right: 10px; } #header.fixed .gnb .category {width:990px; float:none;} #header.fixed .gnb .category li {width:90px;} #header.fixed .gnb .category > li a {font-size:13px;} } /* @media screen and (max-width: 1300px){ #header.fixed .logo a{ left: 0; } #header.fixed .user_menu{ right: 0; } } */ /*-----------------------------------------------------------------*/ /* 3-3. content /*-----------------------------------------------------------------*/ #cnt { min-height:500px; } .cntbody {width:100%;} .cnt_mypage { overflow: hidden; width: 1200px; min-height: 800px; margin: 100px auto 0; } /*-----------------------------------------------------------------*/ /* 3-4. footer /*-----------------------------------------------------------------*/ #footer{ background:#f4f4f4; margin: 100px 0 0; } #footer * { color: #888; font-size: 13px; line-height: 2; } #footer h3{ color: #404040; font-size: 15px; font-weight: normal; } #footer a:hover{ text-decoration: underline; } #footer .fnb{ overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 50px 0 0; } #footer .about ul { margin: 10px 0 0; } #footer .center_info strong { color: #666; display: block; font-size: 26px; } #footer .center_link { margin: 20px 0 0; } #footer .center_link a { color: #404040; text-decoration: underline; } #footer .notice .list { margin: 10px 0 0; } #footer .notice .link { margin: 20px 0 0; } #footer .notice .link a { color: #404040; text-decoration: underline; } #footer .share { margin: 50px 0 0; } #footer .app li { display: inline-block; } #footer .app li:last-child { margin: 0 0 0 15px; } #footer .sns { text-align: center; } #footer .sns li { display: inline-block; width: 47px; height: 47px; margin: 0 0 0 15px; } #footer .sns li:first-child { margin: 0; } #footer .sns li a { display: block; width: 100%; height: 100%; } #footer .shop_info { margin: 72px 0 0; padding: 0 0 40px; border-top: 1px solid #ddd; } #footer .shop_info .info { margin: 23px 0 0; text-align: center; font-style: normal; } #footer .shop_info .info span { display: inline-block; margin: 0 0 0 20px; } #footer .genuine_product { text-align: center; } #footer .copyright { margin: 10px 0 0; text-align: center; } #footer .copyright span { text-transform: uppercase; } #footer .copyright a { color: #666; } #footer .copyright a:hover { text-decoration: none; } /*quick_side*/ #footer #quick_side{ display: none; position: fixed; right: 10px; top: 18%; z-index: 20; } #footer #quick_side > ul{ background: #fff; border: 1px solid #ddd; } #footer #quick_side > ul > li a{ display: block; width: 80px; min-height: 75px; padding: 45px 0 0; text-align: center; } #footer #quick_side .wish a { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/qs_wish.png') no-repeat center bottom 34px; } #footer #quick_side .recent { border-top: 1px solid #ddd; } #footer #quick_side .recent a{ background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/qs_recent.png') no-repeat center bottom 35px; } #footer #quick_side .recent_list{ margin: 10px 0 0; background: #fff; } #footer #quick_side .latest li img{ width: 100%; } #footer .recent_btn{ overflow: hidden; margin: 10px 0 0; border: 1px solid #ddd; } #footer .recent_btn .prev{ float: left; width: 50%; } #footer .recent_btn .prev a{ height: 40px; display: block; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_recent_up.png') no-repeat center; text-indent: -9999em; } #footer .recent_btn .next{ float: left; width: 50%; border-left: 1px solid #ddd; } #footer .recent_btn .next a{ height: 40px; display: block; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_recent_down.png') no-repeat center; text-indent: -9999em; } /*btn_scroll*/ #footer .btn_scroll { position: absolute; top: 130%; left: calc( 50% - 27px ); width: 55px; border:1px solid #ddd; } #footer .btn_scroll a { display:block; height: 55px; text-indent: -99999em; cursor: pointer; } #footer .btn_scroll a.up { background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_scrollup.png') no-repeat center #fff; } #footer .btn_scroll a.down { border-top:1px solid #ddd; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_scrolldown.png') no-repeat center #fff; } #footer .btn_scroll a:hover { background-color:#efefef;} @media screen and (max-width: 1360px) { #quick_side { -webkit-transform: translate(60px,0); -moz-transform: translate(60px,0); -ms-transform: translate(60px,0); -o-transform: translate(60px,0); transform: translate(60px,0); -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; } #quick_side:hover { -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } } /*-----------------------------------------------------------------*/ /* 4. Page /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ /* 4-1. 메인 /*-----------------------------------------------------------------*/ #main .visual_fade { overflow: hidden; position: relative; height: 650px; } #main .visual_fade .box { position: absolute; top: 0; left: calc( 50% - 950px ); width: 1900px; height: 650px;} #main .visual_fade .slick-dots {position:absolute; left:0; bottom:30px;} #main .visual_fade .slick-prev {position:absolute; top:calc( 50% - 40px); left:4%; z-index:5; width:41px; height:80px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_prev.png') no-repeat center;} #main .visual_fade .slick-next {position:absolute; top:calc( 50% - 40px); right:4%; z-index:5; width:41px; height:80px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_next.png') no-repeat center;} /* main all tab list */ #main .tab_subject { overflow: hidden; } #main .tab_subject .subtitle { float: left; margin: 0; } #main .tab_subject .list_tab { float: right; margin: 15px 0 0; } #main .tab_subject .list_tab li { display: inline-block; margin: 0 10px; } #main .tab_subject .list_tab li a { color: #888; font-size: 14px; } #main .tab_subject .list_tab li a.active { color: #404040; font-weight: bold; text-decoration: underline; } #main .list_tab_content{ margin: 40px 0 0; } #main .list_tab_content .prd_basic .slideitem { padding: 0 0 0 30px; } #main .trending { margin: 70px 0 0; } #main .best_seller { margin: 93px 0 0; } #main .sale_now { margin: 93px 0 0; } #main .only_celecon { margin: 95px 0 0; } #main .only_celecon .list_tab_content { margin: 50px 0 0; } /* main all tile banner */ #main .tile_banner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap:wrap; width: 1320px; } #main .tile_banner .list_box { width: 425px; margin: 0 0 60px 22px; } #main .tile_banner .list_box:first-child{ margin: 0 0 60px; } #main .tile_banner .list_box .preview_img { width: 100%; height: 558px; position: relative; overflow: hidden; } #main .tile_banner .list_box .preview_img a { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; } #main .tile_banner .list_box .preview_img img { max-height: 100%; position: absolute; top: 0; left: 0; margin-left: -217px; } #main .tile_banner .list_info { margin: 15px 0 0; } #main .tile_banner .list_info a { display: block; } #main .tile_banner .list_info h4 { font-size: 21px; } #main .tile_banner .list_info .txt_exp { font-size: 15px; } #main .tile_banner .list_info .bt_text { display: inline-block; margin: 15px 0 0; font-size: 14px; text-decoration: underline; transition: .2s all ease; } #main .tile_banner .list_info .bt_text:hover { text-decoration: none; } #main .tile_section_A { margin: 5px 0 0; } #main .tile_section_A .list_box:first-child { width: 873px;} #main .tile_section_A .list_box:nth-child(3n) { margin: 0 0 60px; } #main .tile_section_A .list_box:first-child .preview_img img { margin: 0; } #main .tile_section_B { margin: 90px 0 0; } #main .tile_section_C { margin: 90px 0 0; } #main .tile_section_C .list_box:first-child, #main .tile_section_C .list_box:nth-child(2) { width: 649px;} #main .tile_section_C .list_box:nth-child(3n) { margin: 0 0 60px; } #main .tile_section_C .list_box:first-child .preview_img img, #main .tile_section_C .list_box:nth-child(2) .preview_img img { margin-left: -108px; } #main .movie { height: 600px; margin: 52px 0 0; overflow: hidden; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/main/movie_bg.jpg') no-repeat center top / cover; background-attachment: fixed; } #main .movie .wrap_inner { position: relative; } #main .movie .obj_video { position: absolute; top: 116px; left: 0; width: 50%; padding-right: 11px; } #main .movie .frame { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.389%; background: #000; } #main .movie .frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #main .movie .obj_txt { position: absolute; top: 157px; left: 50%; padding: 0 0 0 84px; } #main .movie .obj_txt .t1 { margin: 0 0 20px; color: #fff; font-size: 20px; font-weight: 300;letter-spacing: 3px; } #main .movie .obj_txt .t2 strong { color: #fff; font-size: 68px; line-height: 72px; letter-spacing: 3px; } #main .movie .obj_txt .link { display: inline-block; margin: 50px 0 0; padding: 5px 122px 5px 0; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/movie_arr.png') no-repeat right center; color: #fff; font-size: 20px; font-weight: 100; } #main .magazine { margin: 90px 0 0; } /* #main .magazine .subtitle { margin: 50px 0 20px; } */ #main .magazine .magazine_list { overflow: hidden; margin: 23px 0 0 -30px; } #main .magazine .magazine_list li { float: left; width: 25%; padding: 0 0 0 30px; } #main .magazine .magazine_list li a { display: block; } #main .magazine .magazine_list li a img { width: 100%; height: auto; } #main .magazine .magazine_list li a .title { display: block; margin: 25px 0 0; font-size: 20px; } #main .magazine .magazine_list li .summary { display: block; margin: 10px 0 0; color: #000; font-size: 14px; font-weight: 300; letter-spacing: -0.5px; } /* review */ #main .review {padding-bottom:40px; background:#efefef;} #main .review:after {display:block; clear:both; content:'';} #main .review .list li {float:left; width:354px; margin-bottom:19px; padding:50px 0; background:#fff; text-align:center;} #main .review .list li:nth-child(3n-1) {margin:0 19px 19px 19px;} #main .review .list li .img {overflow:hidden; position:relative; width:186px; height:186px; margin:0 auto; border-radius:50%; background:#efefef;} #main .review .list li .img img {width:186px; height:auto;} #main .review .list li .img:after {position:absolute; bottom:0; left:50%; z-index:5; width:0; height:0; margin-left:-10px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #fff; content:''} #main .review .list li p {margin-top:10px;} #main .review .list li p.prd a {font-weight:bold;} #main .review .list li p.contents {overflow:hidden; height:38px; padding:0 70px;} #main .review .list li p.contents a {color:#999; font-size:11px;} #main .review .list li p.date {color:#666; font-size:11px;} /* instagram */ #main .instagram .link {position:relative; top:-30px;} #main .instagram .link a {color:#999;} #main .instagram .api {font-size:0;} #main .instagram .api > li {display:inline-block; width:20%;} #main .instagram .api > li img {max-width:100%; max-height:100%;} @media only screen and (max-width:1460px) { #main .visual_fade .slick-prev { left: 18%; } #main .visual_fade .slick-next { right: 18%; } } /*-----------------------------------------------------------------*/ /* 4-2. 상점 /*-----------------------------------------------------------------*/ /* 상품목록(/shop/big_section.php) */ #big_section { position: relative; width: 1460px; } /*상품목록 - pb상단 배너 슬라이드*/ #pb_page .pb_slide { overflow: hidden; width: 100%; height: 500px; } #pb_page .pb_slide .slick-prev { position: absolute; top: calc( 50% - 40px); left: 40px; width: 41px; height: 80px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/shop_slide_prev.png') no-repeat center; z-index: 5; } #pb_page .pb_slide .slick-next { position: absolute; top: calc( 50% - 40px); right: 40px; width: 41px; height: 80px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/shop_slide_next.png') no-repeat center; z-index: 5; } /* 상품목록 - 좌측카테고리 */ #snb_area { position: absolute; top: 100px; left: 0; width: 250px; height: 100%; } #shop_nav { position: absolute; top: 0; left: 0; width: 250px; height: 100%; z-index: 8; } #shop_nav.is_fix { position: fixed; top: 100px; left: auto; } #shop_nav .scrollwrap { height: 100%; } #shop_nav .scroll-wrapper .scroll-content { padding: 0 18px 100px 0; } #shop_nav .title a { font-size: 30px; font-weight: 400; line-height: 1; } #shop_nav .sub_cate { margin: 20px 0 0; } #shop_nav .cate_child_2th { overflow: hidden; border-bottom: 1px solid #eee; } #shop_nav .cate_child_2th > a { display: inline-block; position: relative; padding: 18px 0; color: #404040; font-size: 14px; line-height: 1; } #shop_nav .cate_child_2th > a:hover { text-decoration: underline; } #shop_nav .cate_child_2th.selected > a { color: #f65634; font-weight: 600; } #shop_nav .cate_child_2th .arr_down { float: right; width: 50%; height: 50px; text-indent: -9999rem; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/bullet_cate_arr_down.png') no-repeat center; background-position-x: 90%; cursor: pointer; } #shop_nav .cate_child_2th.is_open .arr_down { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/bullet_cate_arr_up.png') no-repeat center; background-position-x: 90%; } #shop_nav .cate_child_3rd { display: none; padding: 0 0 10px 10px; } #shop_nav .cate_child_3rd a { display: block; padding: 8px 0; color: #888; } #shop_nav .cate_child_3rd a:hover { color: #404040; } #shop_nav .cate_child_3rd > li.selected a { color: #404040; text-decoration: underline; } #shop_nav .brand_search { display: none; position: relative; padding: 30px 0; border-bottom: 1px solid #ddd; } #shop_nav .brand_search > .scrollwrap { height: 270px; } #shop_nav .brand_search h3 a { display: block; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/bullet_plus.png') no-repeat right center; font-size: 16px; font-weight: 600; } #shop_nav .brand_search .search_box { margin: 30px 0 0; } #shop_nav .brand_search .search_input { height: 30px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/icon_search.png') no-repeat 19px center #f7f7f7; } #shop_nav .brand_search .search_input .find { height: 30px; padding: 0 35px; background: inherit; text-align: center; line-height: 30px; } #shop_nav .brand_search .word { margin: 10px 0 0; } #shop_nav .brand_search .word ul { overflow: hidden; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } #shop_nav .brand_search .word ul > li { float: left; width: 10%; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; } #shop_nav .brand_search .word ul > li > span { display: block; height: 22px; color: #aaa; font-size: 10px; font-weight: 600; text-align: center; line-height: 22px; cursor: pointer; } #shop_nav .brand_search .word ul > li.etc { width: 20%; } #shop_nav .brand_search .word ul > li.wish { width: 20%; } #shop_nav .brand_search .word ul > li.wish > span { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish_s.png') no-repeat center;} #shop_nav .brand_search .word ul > li.top { width: 100%; } #shop_nav .brand_search .result_box { padding: 30px 0 0 0; } #shop_nav .brand_search .result_box h4 { font-size: 14px;font-weight: 600; line-height: 1; } #shop_nav .brand_search .result_box .list > li { position: relative; margin: 10px 0; padding-right: 20px; } #shop_nav .brand_search .result_box .list > li .btn_brand_wish { position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish.png') no-repeat center; } #shop_nav .brand_search .result_box .list > li .btn_brand_wish.on { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish_on.png') no-repeat center; } #shop_nav .brand_search .result_box .list > li p, #shop_nav .brand_search .result_box .list > li p * { color: #888; line-height: 1.4; } #shop_nav .hot_keyword { display: none; margin: 30px 0 0; } #shop_nav .hot_keyword h3 { font-size: 16px; font-weight: 600; line-height: 1; } #shop_nav .hot_keyword .list { overflow: hidden; margin: 15px 0 0 0; } #shop_nav .hot_keyword .list > li { float: left; margin: 8px 10px 0 0; } #shop_nav .hot_keyword .list > li a { display: block; padding: 5px 8px; border: 1px solid #ddd; color: #888; letter-spacing: -0.5px; line-height: 1; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; -ms-border-radius: 5px ; -o-border-radius: 5px ; border-radius: 5px; } #shop_nav .hot_keyword .list > li a:hover { border-color: #404040; background: #404040; color: #fff; } #shop_nav .discount_rate { display: none; margin: 30px 0 0; } #shop_nav .discount_rate h3 { font-size: 16px; font-weight: 600; line-height: 1; } #shop_nav .discount_rate ul { margin: 15px 0 0; } #shop_nav .discount_rate li { margin: 10px 0 0; } #shop_nav .discount_rate li label { margin: 0 0 0 5px; color: #888; font-size: 14px; font-weight: 300; vertical-align: middle; cursor: pointer; } /* 상품목록 - 콘텐츠 */ #cnt_area { padding: 100px 0 0 300px; min-height: 1000px; } #big_section .type1_big { display: none; } #big_section .title_area { position: relative; } #big_section .title_area h3 { font-size: 30px; font-weight: 300; line-height: 1; } #big_section .title_area .slide_btn { position: absolute; bottom: 7px; right: 0; width: 75px; height: 15px; } #big_section .title_area .prev { float: left; width: 50%; height: 15px; border-right: 1px solid #ddd; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_s_prev.png') no-repeat left top; cursor: pointer; text-indent: -9999rem; } #big_section .title_area .next { float: right; width: 50%; height: 15px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_s_next.png') no-repeat right top; cursor: pointer; text-indent: -9999rem; } #big_section .best_seller .prd_basic { margin: 40px 0 0 -30px; } #big_section .best_seller .prd_basic .box .img .best_icon { display: block; } #big_section .cate_banner { margin: 80px 0 0; } #big_section .cate_banner img { width: 100%; } #big_section .new_arrival { margin: 90px 0 0; } #big_section .list_tab { margin: 30px 0 0; } #big_section .list_tab li { display: inline-block; margin: 0 30px 0 0; } #big_section .list_tab li a { color: #888; font-size: 14px; } #big_section .list_tab li a.active { color: #404040; font-weight: 600; text-decoration: underline; } #big_section .list_tab_content { margin: 50px 0 0; } #big_section .recommend { margin: 90px 0 0; } #big_section .type1_sub { display: none; } #big_section .subtitle { line-height: 1; } #big_section .best_cate { margin: 60px 0 80px; } #big_section .type1_sub .title_area h3 { font-size: 25px; } #big_section .best_cate .prd_basic { margin: 40px 0 0 -30px; } #big_section .best_cate .prd_basic .box .img .best_icon { display: block; } /* 기획전 - 타임세일 */ #big_section .time_sale { display: none; margin:0 0 50px; padding:0 0 55px; border-bottom:1px solid #ddd;} #big_section .time_sale .title { margin: 0; font-size:30px; font-weight:300; text-align:center; line-height:1;} #big_section .time_sale .timer {margin:40px 0; font-size:0; text-align:center;} #big_section .time_sale .countdown {display:inline-block; vertical-align:top;} #big_section .time_sale .countdown .group {float:left; position:relative; padding:0 25px 0 29px; text-align:center;} #big_section .time_sale .countdown .group:before {display:block; position:absolute; left:-4px; top:0; height:100%; font-size:30px; line-height:60px; content:':';} #big_section .time_sale .countdown .group .count {font-size:60px; font-weight:600; line-height:60px;} #big_section .time_sale .countdown .group .caption {display:block; margin-top:10px; color:#888; font-size:14px; font-weight:400; line-height:1;} #big_section .time_sale .countdown .group.days {padding:0 27px 0 25px;} #big_section .time_sale .countdown .group.days:before {display:none; content:'';} #big_section .time_sale .countdown .group.days:after {display:block; position:absolute; right:0; top:22px; width:2px; height:16px; border-left:1px solid #ccc; background:#737373; content:'';} #big_section .time_sale .countdown .group.days .count, #big_section .time_sale .countdown .group.days .caption {color:#f65634;} #big_section .time_sale .countdown .group.hours {padding-left:25px;} #big_section .time_sale .countdown .group.hours:before {display:none; content:'';} #big_section .time_sale .product {position:relative;} #big_section .time_sale .product .slide_btn {bottom:auto; top:-55px;} #big_section .time_sale .product .prd_timesale .timesale_icon {display:block;} /*상품목록 - 브랜드페이지*/ #big_section.brand_page .brand_info{ margin: 50px 0 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #big_section.brand_page .brand_text{ width: 60%; padding: 50px 60px 50px 0; } #big_section.brand_page .name_eng{ font-size: 35px; font-weight: normal; line-height: 1.2; } #big_section.brand_page .name_kor{ font-size: 35px; font-weight: normal; line-height: 1.2; margin: 5px 0 0; } #big_section.brand_page .summary{ margin: 40px 0 0; font-size: 14px; } #big_section.brand_page .wish { overflow: hidden; margin: 10px 0 0; } #big_section.brand_page .wish .btn_wish { float: left; height: 25px; padding: 0 0 0 30px;background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish.png') no-repeat 10% 60% / 25px; } #big_section.brand_page .wish .btn_wish.on { background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/brand_wish_on.png') no-repeat 10% 60% / 25px; } #big_section.brand_page .wish .count { display: block; height: 25px; margin: 0 0 0 15px; border-bottom: 1px solid #333; font-size: 20px; font-weight: 300; line-height: 23px; } #big_section.brand_page .brand_img{ width: 40%; } /* #big_section.brand_page .brand_img .img{ height: 280px; } */ #big_section.brand_page .brand_img img{ width: 100%; /*height: 100%;*/ } /* 상품상세페이지(/shop/detail.php) */ #detail { margin-top: 90px;} #detail a { cursor: pointer; } #detail .wrap_prd { overflow: hidden; position: relative; } #detail .wrap_prd .area_left { float: left; width: 600px; } #detail .wrap_prd .prdimg .img { overflow: hidden; text-align: center; } #detail .wrap_prd .prdimg .img a { display: block; } #detail .wrap_prd .prdimg .img img { display: block; max-width: 100%; height: auto; max-height: 600px; margin: 0 auto; } #detail .wrap_prd .prdimg .addimg {margin-top:10px;} #detail .wrap_prd .prdimg .addimg .box_add_slide {overflow:hidden; width:100%;} #detail .wrap_prd .prdimg .addimg .add_slide {display:none; width:100%; padding:0 20px;} #detail .wrap_prd .prdimg .addimg .add_slide.slick-initialized {display:block;} #detail .wrap_prd .prdimg .addimg .add_slide.slick-initialized .slick-slide {text-align:center;} #detail .wrap_prd .prdimg .addimg .add_slide > div img {width:100%; height:auto; margin:0 auto; cursor:pointer; opacity: .5;} #detail .wrap_prd .prdimg .addimg .add_slide > div img:hover {opacity:1; transition:all 400ms;} #detail .wrap_prd .prdimg .addimg .add_slide .slick-prev {position:absolute; top: calc(50% - 15px); left:0; width:30px; height:30px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/addimg_prev.png') no-repeat left center; z-index:5;} #detail .wrap_prd .prdimg .addimg .add_slide .slick-next {position:absolute; top: calc(50% - 15px); right:0; width:30px; height:30px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/addimg_next.png') no-repeat right center; z-index:5;} #detail .wrap_prd .bnr_slide { position: relative; overflow: hidden; margin: 40px 0 0; } #detail .wrap_prd .bnr_slide .slide .slideitem {text-align:center;} #detail .wrap_prd .bnr_slide .slide .slideitem img {width:100%;} #detail .wrap_prd .bnr_slide .slick-dots {overflow:hidden; position:absolute; right:10px; top:20px; z-index:10; width:auto; text-align:center;} #detail .wrap_prd .bnr_slide .slick-dots li {margin:0 4px;} #detail .wrap_prd .bnr_slide .slick-dots li button {display:inline-block; width:10px; height:10px; border:1px solid #fff; border-radius:50%; background:transparent; cursor:pointer;} #detail .wrap_prd .bnr_slide .slick-dots li.slick-active button {background:#fff;} #detail .wrap_prd .area_right { float: right; width: 680px; } #detail .wrap_prd .info .brand a { font-size: 14px; font-weight: bold; } #detail .wrap_prd .info .brand a.btn_brand_wish { width: 14px; height: 11px; } #detail .wrap_prd .info h3 { font-size:24px; font-weight: 500; } #detail .wrap_prd .info h3 > img {margin:0 2px; vertical-align:middle;} #detail .wrap_prd .info .price{ margin: 20px 0 0; } #detail .wrap_prd .info .price dt{ display: inline-block; width: 120px; font-size: 14px; padding: 0 0 5px;} #detail .wrap_prd .info .price dd{ display: inline-block; } #detail .wrap_prd .info .price del {color:#888; font-size: 16px; line-height: 1; display: block;} #detail .wrap_prd .info .price .sale{ color: #f65634; font-size: 24px; font-weight: bold; margin: 0 10px;} #detail .wrap_prd .info .price .sell{color:#111; font-size:14px; } #detail .wrap_prd .info .price .sell strong {color:#111; font-size:24px;} #detail .wrap_prd .info .price .discount_coupon .sell, #detail .wrap_prd .info .price .discount_coupon .sell strong{ color: #f65634; } #detail .wrap_prd .info .price .coupon strong{ display: inline-block; margin: 0 0 0 15px; padding: 8px 40px 8px 20px; border: 1px solid #404040; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/cpn_down.png') no-repeat center right 15px; font-weight: 500; cursor: pointer; } #detail .wrap_prd .info .pop_coupon {display:none; position:fixed; left:50%; top:100px; z-index:1001; width:650px; margin-left:-325px; padding:40px; border:1px solid #d9d9d9; background:#fff;} #detail .wrap_prd .info .pop_coupon h2 {color:#000; font-size:22px; } #detail .wrap_prd .info .pop_coupon .count {margin-top:20px; padding:15px 20px; background:#fafafa;} #detail .wrap_prd .info .pop_coupon .list {overflow:auto; max-height:200px; margin-top:10px;} #detail .wrap_prd .info .pop_coupon .list li {display:table; position:relative; width:100%; padding:15px; border-bottom:1px solid #e0e0e0; text-align:left;} #detail .wrap_prd .info .pop_coupon .list > li:first-child {border-top:1px solid #e0e0e0;} #detail .wrap_prd .info .pop_coupon .list > li > div {display:table-cell; vertical-align:middle; line-height:28px;} #detail .wrap_prd .info .pop_coupon .list > li > div.name {width:40%; font-weight:bold;} #detail .wrap_prd .info .pop_coupon .list > li > div.price {width:40%;} #detail .wrap_prd .info .pop_coupon .list > li > div.btn {width:20%; text-align:center;} #detail .wrap_prd .info .pop_coupon .list > li > div.btn span.box_btn * {min-width:100px;} #detail .wrap_prd .info .pop_coupon .list > li > div.btn span.fin {display:inline-block; min-width:100px; padding:4px 8px; border:1px solid #676767; background-color:#fff; color:#000;} #detail .wrap_prd .info .pop_coupon .nonmember{ margin: 20px 0 0; } #detail .wrap_prd .info .pop_coupon .nonmember li{ display: inline-block; } #detail .wrap_prd .info .pop_coupon .nonmember a{ text-decoration: underline; } #detail .wrap_prd .info .pop_coupon .nonmember .login::before{ content: '/'; display: inline-block; margin: 0 5px 0 5px; } #detail .wrap_prd .info .pop_coupon .close {display:inline-block; position:absolute; right:20px; top:20px; width:21px; height:21px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} #detail .wrap_prd .info .summary {padding-top:20px; color:#888; word-break:break-all;} #detail .wrap_prd .info .today {margin:15px auto 0; padding:15px; border:1px solid #e5e5e5;} #detail .wrap_prd .info .today > span {color:#666;} #detail .wrap_prd .info .info_group { margin: 10px 0 0; padding: 20px 0 0; border-top: 1px solid #e0e0e0; } #detail .wrap_prd .info .list { table-layout: fixed; width: 100%; } #detail .wrap_prd .info .list tbody tr th {padding:5px 5px 5px 0;/* background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_check.png') no-repeat left center; */color:#666; font-weight:normal; font-size: 14px; text-align: left; vertical-align: middle;} #detail .wrap_prd .info .list tbody tr td {padding:5px 0; color:#404040; font-weight: 400; text-align: left; vertical-align:middle;} #detail .wrap_prd .info .list tbody tr td select {width:300px;} #detail .wrap_prd .info .list tbody tr td .box_qty .form_input {width:130px;} #detail .wrap_prd .info .list tbody tr td .box_info {display:inline-block; position:relative;} #detail .wrap_prd .info .list tbody tr td .box_info .info {display:none; position:absolute; left:20px; top:-8px; z-index:10; width:150px; padding:10px 15px; border:1px solid #dcdcdc; border-radius:5px; background:#fff;} /*#detail .wrap_prd > .info > .list > tbody > tr > td .box_info .info.delivery {width:230px;}*/ #detail .wrap_prd .info .list tbody tr td .box_info:hover .info {display:block;} #detail .wrap_prd .info .list tbody tr td .box_info.delivery { display:block; } #detail .wrap_prd .info .list tbody tr td .box_info.delivery > .i_info{ position: inherit; top: auto; margin: 0 0 7px; } #detail .wrap_prd .info .list tbody tr td .box_info.delivery .info { display: inline-block; width: auto; position: inherit; border: inherit; padding: 0; top: inherit; left: inherit; } #detail .wrap_prd .info .list tbody tr td .box_info.delivery .info .tbl_order2{ table-layout: auto; } #detail .wrap_prd .info .list tbody tr td .box_info.delivery .info .tbl_order2 th, #detail .wrap_prd .info .list tbody tr td .box_info.delivery .info .tbl_order2 td, #detail .wrap_prd .info .list tbody tr td .box_info.delivery .info .tbl_order2 td strong{ color: #888; } #detail .wrap_prd .info .list tbody .item_option + .item_qty{ display: none; } #detail .wrap_prd .info .restock {padding-top:20px;} #detail .wrap_prd .info .restock > p {float:left; font-size:11px;} #detail .wrap_prd .info .restock > a {/*display:inline-block;*/float:right; margin-right:5px; padding:2px 5px; border:1px solid #c3c3c3; font-size:11px; cursor:pointer;} #detail .wrap_prd .info .restock > a:hover {background-color:#f5f5f5;} #detail .wrap_prd .info .restock:after {display:block; clear:both; content:'';} #detail .wrap_prd .info .multi_opt {margin-top:20px;} #detail .wrap_prd .info .multi_opt .selected_list > li {position:relative; padding:15px 20px; border-top:1px solid #ebebeb; background:#fafafa;} #detail .wrap_prd .info .multi_opt .selected_list > li .name {display:inline-block; min-width: 180px; max-width:250px; word-break:break-all;} #detail .wrap_prd .info .multi_opt .selected_list > li .opt_price { position: absolute; right: 20px; top: calc(50% - 9.5px); } #detail .wrap_prd .info .multi_opt .selected_list > li .opt_price span {margin-left:30px;} #detail .wrap_prd .info .multi_opt .selected_list > li .opt_price span > span{ font-weight: bold; } #detail .wrap_prd .info .multi_opt .selected_list > li .opt_price .del img {margin-top:3px; vertical-align:top;} #detail .wrap_prd .info .multi_opt .selected_list > li .box_qty {position:absolute; right:180px; top:calc(50% - 17px);} #detail .wrap_prd .info .multi_opt .opt_total { padding: 15px 0; border-top: 2px solid #404040; overflow: hidden;} #detail .wrap_prd .info .multi_opt .opt_total .title { float: left; font-size: 22px; font-weight: 400; } #detail .wrap_prd .info .multi_opt .opt_total strong{color: #222; font-size: 14px; float: right; font-weight: normal;} #detail .wrap_prd .info .multi_opt .opt_total strong #detail_multi_option_prc, #detail .wrap_prd .info .multi_opt .opt_total strong .sell_prc_str_total{ font-size: 24px; font-weight: bold; } #detail .wrap_prd .info .multi_opt .opt_total .coupon {display:inline-block; margin-right:5px; padding:2px 20px 2px 5px; border:1px solid #c3c3c3; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/apply_coupon.png') no-repeat 90% center; font-size:11px; cursor:pointer;} #detail .wrap_prd .info .multi_opt .opt_total .coupon:hover {background-color:#f5f5f5;} #detail .wrap_prd .info .btn_area { position: relative; margin: 20px 0 0; min-height:240px;} #detail .wrap_prd .info .btn_area .btn { position: relative; } #detail .wrap_prd .info .btn_area .basic { overflow: hidden; padding: 0 140px 0 0; } #detail .wrap_prd .info .btn_area .basic li { float: left; width: 50%; } #detail .wrap_prd .info .btn_area .basic li a { height: 60px; line-height: 40px; font-size: 18px; } #detail .wrap_prd .info .soldout_btn { margin: 0 140px 0 0; height: 60px; line-height: 60px; background: #000; color: #fff; font-size: 18px; cursor: default; } #detail .wrap_prd .info .wish_chat { overflow: hidden; position: absolute; top: 0; right: 0; } #detail .wrap_prd .info .wish_chat li { float: left; position: relative; } #detail .wrap_prd .info .wish_chat li a { width: 60px; height: 60px; text-indent:-9999px; } #detail .wrap_prd .info .wish_chat li.wish { margin: 0 -1px 0 0; } #detail .wrap_prd .info .wish_chat li.wish a{ background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/det_wish.png') no-repeat center; } #detail .wrap_prd .info .wish_chat li.wish .on a{ background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/det_wish.png') no-repeat center; } #detail .wrap_prd .info .wish_chat li.chat a{ background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/det_chat.png') no-repeat center; } #detail .wrap_prd .info .count_share { float:left; } #detail .wrap_prd .info .count_share .count { overflow: hidden; } #detail .wrap_prd .info .count_share .count li { position: relative; float: left; padding: 0 15px 0 16px; font-size: 14px; font-weight: 300; cursor: pointer; } #detail .wrap_prd .info .count_share .count li:first-of-type { padding-left: 0; } #detail .wrap_prd .info .count_share .count .line::before { content: ''; display: block; position: absolute; top: calc( 50% - 5px ); left: 0; width: 1px; height: 10px; background: #ddd; } #detail .wrap_prd .info .count_share .count span { font-weight: bold; } #detail .wrap_prd .info .count_share .count span.arr { font-weight: normal; } #detail .wrap_prd .info .count_share .count span.arr::after { content: ''; display: block; position: absolute; top: calc( 50% - 10px ); right: 0; width: 16px; height: 19px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/det_bullet_arr.png') no-repeat right center; } #detail .wrap_prd .info .count_share .sns { overflow: hidden; margin: 20px 0 0; } #detail .wrap_prd .info .count_share .sns a { display: inline-block; margin: 0 5px 0 0; width: 35px; height: 35px;text-indent: -9999px; } #detail .wrap_prd .info .count_share .sns a.kakao { background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_kakao2.png') no-repeat center;} #detail .wrap_prd .info .count_share .sns a.kakaostory { background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_kakaostory2.png') no-repeat center;} #detail .wrap_prd .info .count_share .sns a.facebook {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_facebook2.png') no-repeat center;} #detail .wrap_prd .info .count_share .sns a.twitter {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_twitter2.png') no-repeat center;} #detail .wrap_prd .info .count_share .sns a.urlBtn {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_url2.png') no-repeat center;} #detail .wrap_prd .info .btn_area .pay {text-align:right;} #detail .wrap_prd .info .btn_area .etc { overflow: hidden; margin: 20px 0 0; } #detail .related_prd_list { margin: 80px auto 0; } #detail .related_prd_list .title { overflow: hidden; margin: 0 0 25px; } #detail .related_prd_list .title h3 { float: left; width: 60%; font-size: 25px; font-weight: 300; } #detail .related_prd_list .title a { float: right; width: 60px; height: 30px; border: 1px solid #ddd; color: #888; text-align: center; line-height: 30px; } #detail .related_prd_list .prd_basic.overlap .box .img .quick {top:35%;} #detail .wrap_info { margin: 60px 0 0; } #detail .wrap_info .tab_area .tab { height: 50px; text-align:center; line-height: 50px; border-bottom: 1px solid #ddd; } #detail .wrap_info .tab_area .tab li { display: inline-block; padding:0 25px; cursor: pointer; } #detail .wrap_info .tab_area .tab li a { display: block; height: 50px; color:#888; font-size:16px; line-height: 50px; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; } #detail .wrap_info .tab_area .tab li a.active, #detail .wrap_info .tab_area .tab li a:hover { color:#000; font-weight: 500; border-bottom: 1px solid #000; } #detail .wrap_info .tab_area .tab li a span { color:#888; } #detail .wrap_info .tab_area .tab.fixed { position: fixed; top:60px; left:0; width:100%; background:#fff; z-index: 1; } #detail .wrap_info .tabcnt_detail {padding:50px 0 0;} #detail .wrap_info .btn_bottom {margin-top:20px; text-align:right;} #detail .wrap_info .detail_info, #detail .wrap_info .common_info {word-break:break-all;} #detail .wrap_info .detail_info {margin-bottom:30px; text-align: center;} #detail .wrap_info .detail_info * {font-family:inherit; font-size:inherit; text-align:inherit; line-height:inherit;} #detail .wrap_info .detail_info img, #detail .wrap_info .common_info img {max-width:100%; height:auto; font-size:0; line-height:0;} #detail .wrap_info .title_related {padding:12px 0; font-style:italic; font-size:18px; font-weight:normal; text-align:center;} #detail .detail_qnarev .title_qnarev {position:relative; margin-top:40px; padding-bottom:25px; border-bottom:1px solid #333;} #detail .detail_qnarev .title_qnarev.none {border-bottom:0;} #detail .detail_qnarev .title_qnarev h3 { font-size:18px; font-weight: normal;} #detail .detail_qnarev .title_qnarev h3 span {color:#888; font-size:inherit;} #detail .detail_qnarev .title_qnarev .btn {position:absolute; right:0; top:5px; padding-top:0; font-size:0;} #detail .detail_qnarev .title_qnarev .btn a {display:inline-block; position:relative; padding-left:20px; color:#666; font-size:14px; background-repeat:no-repeat; background-position:left center;} #detail .detail_qnarev .title_qnarev .btn a:after {display:inline-block; width:1px; height:14px; margin:5px 10px 0 10px; background-color:#e5e5e5; vertical-align:top; content:'';} #detail .detail_qnarev .title_qnarev .btn a:last-child:after {display:none;} #detail .detail_qnarev .title_qnarev .btn a.write {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_write.png');} #detail .detail_qnarev .title_qnarev .btn a.list {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_list.png');} #detail .detail_qnarev .title_qnarev .sort {position:absolute; right:0; top:5px; font-size:0;} #detail .detail_qnarev .title_qnarev .sort >li {display:inline-block;} #detail .detail_qnarev .title_qnarev .sort > li:after {display:inline-block; width:1px; height:14px; margin:5px 10px 0 10px; background-color:#e5e5e5; vertical-align:top; content:'';} #detail .detail_qnarev .title_qnarev .sort > li:last-child:after {display:none;} #detail .detail_qnarev .title_qnarev .sort > li a {color:#666; font-size:14px;} #detail .detail_qnarev .title_qnarev .sort > li a.selected {padding-left:13px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_check.png') no-repeat left center; color:#333; font-weight:bold;} #detail .detail_qnarev .summary {margin-top:30px; padding:35px 0; background-color:#f6f6f6; font-size:0; text-align:center;} #detail .detail_qnarev .summary > div {display:inline-block; vertical-align:top;} #detail .detail_qnarev .summary > div:nth-child(2) {margin:0 140px;} #detail .detail_qnarev .summary > div > h4 {font-size:14px; font-weight:normal;} #detail .detail_qnarev .summary > div.count > p {margin-top:25px; padding-top:40px; font-size:20px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_review_count.png') no-repeat center top;} #detail .detail_qnarev .summary > div.count > p strong {font-size:30px;} #detail .detail_qnarev .summary > div.grade .icon {display:inline-block; position:relative; width:138px; height:21px; margin-top:35px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/grade_gray.png') no-repeat left top/cover;} #detail .detail_qnarev .summary > div.grade .icon > i {display:block; position:absolute; left:0; top:0; height:100%; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/grade_gray_over.png') no-repeat left top/cover;} #detail .detail_qnarev .summary > div.grade .average {margin-top:9px; color:#bebebe; font-size:30px;} #detail .detail_qnarev .summary > div.grade .average strong {color:#333; font-size:inherit;} #detail .detail_qnarev .summary > div.ratio .graph {margin-top:10px;} #detail .detail_qnarev .summary > div.ratio .graph > li {padding:1px 0; font-size:0;} #detail .detail_qnarev .summary > div.ratio .graph > li span {display:inline-block;} #detail .detail_qnarev .summary > div.ratio .graph > li .bar {width:190px; height:8px; margin:0 10px 0 20px; border-radius:5px; background-color:#d4d4d4; font-size:0; text-align:left;} #detail .detail_qnarev .summary > div.ratio .graph > li .bar > i {display:inline-block; height:100%; border-radius:inherit; background-color:#b8b7b7;} #detail .detail_qnarev .summary > div.ratio .graph > li .bar.max > i {background-color:#e35050;} #detail .detail_qnarev .summary > div.ratio .graph > li .bar.min > i {background-color:#b8b7b7;} #detail .detail_qnarev .summary > div.ratio .graph > li .count {min-width:30px; padding:0 5px; border-radius:5px; background-color:#fff; text-align:center; line-height:1.4;} #detail .detail_qnarev .summary > div.ratio .graph > li .count.max {background-color:#000; color:#fff;} #detail .detail_qnarev .list > li {display:table; width:100%; padding:25px 0; border-bottom:1px solid #e0e0e0;} #detail .detail_qnarev .list > li .info {display:table-cell; width:calc(100% - 106px); vertical-align:middle;} #detail .detail_qnarev .list > li .info .grade {padding-left:5px; font-size:16px; font-weight:bold;} #detail .detail_qnarev .list > li .info .name {padding-top:5px; color:#888;} #detail .detail_qnarev .list > li .info .title, #detail .detail_qnarev .list > li .info .title * {font-size:14px; font-weight:bold;} #detail .detail_qnarev .list > li .info .title {padding-top:10px;} #detail .detail_qnarev .list > li .info .title img {vertical-align:middle;} #detail .detail_qnarev .list > li .info .content {padding-top:5px;} #detail .detail_qnarev .list > li .info .content {padding-top:5px;} #detail .detail_qnarev .list > li .info .more {display:inline-block; padding-top:10px; color:#666; font-weight:bold;} #detail .detail_qnarev .list > li .upfile {display:table-cell; position:relative; width:106px; text-align:right; vertical-align:middle;} #detail .detail_qnarev .list > li .upfile > a {display:block; position:relative; overflow:hidden; width:96px; height:96px; border:1px solid #e0e0e0; /*vertical-align:middle;*/} #detail .detail_qnarev .list > li .upfile img {position:absolute; top:50%; left:50%; width:96px; height:auto; transform:translate(-50%, -50%);} #detail .detail_qnarev .list > li .upfile .count {display:block; position:absolute; bottom:0; right:0; width:20px; height:20px; background-color:rgba(0,0,0,0.5); color:#fff; text-align:center;} #detail .list_photo {position:relative; width:1100px; font-size:0;} #detail .list_photo .slick-arrow {position:absolute; top:-50px; z-index:10; width:30px; height:30px; border:1px solid #dcdcdc; background-color:#fff; text-align:center;} #detail .list_photo .slick-arrow:after {display:block; width:10px; height:10px; border:1px solid #a7a7a7; content:'';} #detail .list_photo .slick-arrow:hover {background-color:#f6f6f6;} #detail .list_photo .slick-arrow:hover:after {border-color:#e35050;} #detail .list_photo .slick-prev {right:29px;} #detail .list_photo .slick-prev:after {margin-left:12px; border-width:1px 0 0 1px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} #detail .list_photo .slick-next {right:0;} #detail .list_photo .slick-next:after {margin-left:5px; border-width:1px 1px 0 0; -webkit-transform:rotate(45deg); transform:rotate(45deg);} #detail .list_photo .slick-dots {margin-top:20px;} #detail .list_photo .box {display:block; position:relative; overflow:hidden; width:116px; height:116px; border:1px solid #e0e0e0; /*vertical-align:middle;*/} #detail .list_photo .box > img {position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%, -50%);} /* 상품상세페이지 - 관련상품*/ #detail .related_product .opt select { margin: 0 0 0 20px; min-width: 100px; } #detail .related_product .qty { margin: 5px 0 0; } #detail .related_product .qty p { display: inline-block; height: 34px; line-height: 34px; } #detail .related_product .qty .box_qty { margin: 0 0 0 20px; } #detail .related_product .qty .box_qty .form_input { width: 100px; } /* 상품상세페이지 - 개인결제 (/shop/detail_private.php) */ #detail.private .wrap_prd > .info {padding-top:100px; text-align:center;} #detail.private .wrap_prd > .info > .price .sell, #detail.private .wrap_prd > .info > .price .sell * {font-size:30px;} #detail.private .wrap_info {border-top:0;} /* 퀵프리뷰 - 팝업(/shop/detail_popup.php) */ #detail_pop {position:relative; padding:30px;} #detail_pop #detail {margin-top:0;} #detail_pop .close {display:inline-block; position:absolute; right:20px; top:20px; z-index:10; width:21px; height:21px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} @media only screen and (max-width: 1460px){ #detail .wrap_prd .area_left { width: 550px; } #detail .wrap_prd .area_right { width: 580px; } } /* 상품이미지줌 - 팝업(/shop/zoom.php) */ #zoomimg {text-align:center;} #zoomimg h2 {padding:10px 60px 10px 20px; background:#676767; color:#fff; font-size:14px; text-align:left;} #zoomimg .img {margin:40px auto 10px;} #zoomimg .img img {max-width:500px; max-height:500px;} #zoomimg .list {width:500px; margin:10px auto 0;} #zoomimg .list li {float:left; margin:0 0 10px 10px;} #zoomimg .list li:nth-child(5n+1) {margin-left:0;} #zoomimg .list li img {max-width:92px; max-height:92px;} #zoomimg .list:after {display:block; clear:both; content:'';} #zoomimg .box_btn {position:absolute; right:10px; top:7px;} /* 주문스텝 - 장바구니(/shop/cart.php), 주문서(/shop/order.php), 주문완료(/shop/order_finish.php) */ #order_step {padding:96px 0 67px; text-align:center;} #order_step li {display:inline-block; position:relative; padding:64px 103.5px 0; color:#888; font-size:25px; font-weight:100;} #order_step li:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 40px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_arrow.png') no-repeat center; } #order_step li:first-child:before {display:none;} #order_step li.cart {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_cart.png') no-repeat top center;} #order_step li.order {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_order.png') no-repeat top 7px center;} #order_step li.finish {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_finish.png') no-repeat top 12px center;} #order_step li.on {color:#404040;} #order_step li.cart.on {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_cart_on.png') no-repeat top center;} #order_step li.order.on {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_order_on.png') no-repeat top 7px center;} #order_step li.finish.on {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/orderstep_finish_on.png') no-repeat top 12px center;} /* 상품갯수 - 장바구니(/shop/cart.php), 주문서(/shop/order.php) */ .enterprise {padding-top:30px;} .enterprise.headY {padding-top:0;} .enterprise .msg_delivery {padding-bottom:5px;} .enterprise .msg_delivery strong {display:inline-block; padding-right:19px; font-size:16px; font-weight:400; vertical-align:middle;} .enterprise .msg_delivery span {display:inline-block; position:relative; padding-left:21px; color:#888; font-size:14px; font-weight:300; vertical-align:middle;} .enterprise .msg_delivery span:before { content: ''; display: block; position: absolute; top: calc(50% - 5px); left: 0; width: 1px; height: 10px; background: #888; } /* 주문합계 - 장바구니(/shop/cart.php) */ .wrap_list {display:table; width:100%; margin:0 auto;} .wrap_list li {display:table-cell; padding: 45px 0 40px; position:relative; width:33%; font-size:18px; font-weight:400; text-align:center;} .wrap_list li span { display: block; color:#888; font-size:16px; font-weight:300;} .wrap_list li strong {font-size:25px; font-weight:400;} .wrap_list li.plus {background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/cart_sum_plus.png') no-repeat left center;} .wrap_list li.equal {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/cart_sum_equal.png') no-repeat left center;} .wrap_list li.total_prc, .wrap_list li.total_prc * {color:#f65634;} /* 장바구니(/shop/cart.php) */ #cart { width: 1280px; margin: 0 auto; } #cart .cart_bottom { overflow: hidden; } #cart .pay { float: left; margin: 60px 0 0; } #cart .btn { float: right; margin: 60px 0 0; } #cart .btn .box_btn { margin: 0 0 0 10px; } #cart .btn .box_btn:first-of-type { margin: 0; } /* 장바구니 옵션 변경 */ .cart_change_option {width:480px; padding:40px 50px;} .cart_change_option h3 {font-size:20px; font-weight:normal;} .cart_change_option .opt {margin-bottom:15px; padding:5px 0 15px; border-bottom:1px solid #e0e0e0;} .cart_change_option .opt span {display:inline-block; padding:5px; border-radius:5px; background:#eee; color:#666;} .cart_change_option table {width:100%; table-layout:fixed;} .cart_change_option table > thead {display:none;} .cart_change_option table > tbody > tr > th {padding:5px 0 5px 23px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_check.png') no-repeat 7px center; font-weight:normal; text-align:left; line-height:34px;} .cart_change_option table > tbody > tr > td {padding:5px; vertical-align:middle;} .cart_change_option table > tbody > tr > td select {width:100%;} .cart_change_option table > tbody > tr > td .box_qty {width:100%;} .cart_change_option .total {position:relative; margin-top:15px; padding:15px 10px; border:1px solid #e0e0e0; border-width:1px 0;} .cart_change_option .total .price {position:absolute; right:15px; top:8px;} .cart_change_option .total .price strong {font-size:20px;} .cart_change_option .btns {margin-top:20px; text-align:center;} /* 장바구니 입점몰 계산 박스 */ .cart_sum {position:relative; top:-1px; margin-bottom:80px; background:#f7f7f7; font-size:0;} .cart_sum .delivery_msg {display:inline-block; position:relative; width:30%; padding-left:60px; font-size:18px; font-weight:300; letter-spacing:-0.5px; vertical-align:middle;} .cart_sum .delivery_msg:after {content:'';display:block; position:absolute; top: calc( 50% - 15px); right:0; width:1px; height:30px;background:#ccc;} .cart_sum .delivery_msg span { display: block; font-size: 18px; font-weight: 300; letter-spacing: -0.5px; } .cart_sum .wrap_list {display:inline-block; width:70%; vertical-align:middle;} .cart_sum .wrap_list li { display: inline-block; } .box.mim .wrap_list { border-top: 2px solid #404040; border-bottom:1px solid #404040;} .box.mim .wrap_list li strong { font-size: 30px; font-weight: 600; } .box.mim .total { overflow: hidden; margin-bottom:12px;} .box.mim .total .txt {float:left; font-size:30px;} .box.mim .total .btn {float:right;} .box.mim .total .btn .box_btn {margin-left:8px;} .box.mim .total .btn .box_btn:first-child {margin-left:0;} /* 장바구니 개별상품 쿠폰적용 */ #cart .cart_prc > .after {display:none;} #cart .cart_prc.is_sale > .before {text-decoration:line-through;} #cart .cart_prc.is_sale > .after {display:block;} /* 주문서(/shop/order.php) */ #order { overflow: hidden; width: 1200px; margin: 0 auto; } #order .guest {padding-bottom:40px;} #order .guest .agree_guest {padding-bottom:20px;} #order .guest .box_frame {border:1px solid #ebebeb;} #order .guest .box_frame iframe {width:100%; height:162px; border:0;} #order .print_receipt {padding-bottom:10px; text-align:right; line-height:30px;} #order .area_left {float:left; width:63%;} #order .area_right {float:right; margin-top:30px;} #order .area_right .inner.fixed {position:fixed; right:50%; top:60px; margin-right:-600px;} #order .area_right .box {width:360px; padding:40px; background:#f8f8f8;} #order .area_right .box .line {padding-top:30px; border-top:1px solid #dfdfdf;} #order .btn_cpn {padding:0 0 40px;} #order .btn_cpn .btn_col {padding-top:10px;} #order .coupon_list li {position:relative; margin-top:10px; padding-left:25px;} #order .coupon_list li:first-child {margin-top:0;} #order .coupon_list li .check {position:absolute; left:0; top:-2px;} #order .coupon_list li .name {font-weight:bold;} #order .coupon_list li .content {font-size:11px;} #order .offcpn #off_cpn_div2, #order .offcpn #off_cpn_img2 {display:none;} #order .offcpn #off_cpn_div2 p {margin-bottom:5px;} #order .offcpn #off_cpn_div2 .offbtn {text-align:right;} #order .offcpn .box_btn.small a {min-width:90px;} #order .title_delivery h3.title {display:inline-block; margin: 30px 0 0;} #order .title_delivery label { display: block; margin: 5px 0 10px; } #order .method > div {position:relative; padding:25px 0 10px 25px;} #order .method > div > label {position:absolute; left:0; top:0; cursor:pointer;} #order .method > div .msg_pay {padding:0; color:#999;} #order .method > div .bank_name {display:none;} #order .method > div #cash_reg {padding:5px 0;} #order .method > div #cash_reg span {color:#999;} #order .method > div select {width:100%; margin-bottom:5px;} #order .order_cancel_msg {color:#666;} #order .box_third_agree {margin-top:20px; padding:20px 0; border-top:1px solid #ddd;} #order .box_third_agree .agree_title {overflow: hidden; padding:0 0 15px 30px;} #order .box_third_agree .agree_title .chk {float:left; margin-left:-30px;} #order .box_third_agree .agree_title label {font-weight:500; cursor:pointer;} #order .box_third_agree .agree_title .partner {color:#888;} #order .box_third_agree .agree_content {overflow-y:auto; height:100px; padding:20px; border:1px solid #ddd; background:#fff;} #order .box_third_agree .agree_content table {table-layout:fixed; width:100%; border:1px solid #ddd; letter-spacing:-0.5px;} #order .box_third_agree .agree_content table caption {padding:0 0 3px; font-weight:500; text-align:left;} #order .box_third_agree .agree_content table th, #order .box_third_agree .agree_content table td {padding:3px 5px; border:1px solid #ddd; font-size:12px; font-weight:300; text-align:left;} #order #order1 .box_btn {margin-top:10px;} #order #order2 {display:none; clear:both; margin-top:30px; padding:50px 0; border:1px solid #dedede; background:#fff; text-align:center;} #order #order2 .total_info {font-size:16px; font-weight:bold;} #order #order2 .total_info strong, #order #order2 .total_info strong * {font-size:inherit;} #order #order2 .msg {padding:23px 0; color:#888;} #order #order3 {display:none; clear:both; margin-top:30px; padding:50px 0; border:1px solid #dedede; background:#fff; text-align:center;} #order #order3 .total_info {font-size:16px; font-weight:bold;} #order #order3 .total_info strong, #order #order3 .total_info strong * {font-size:inherit;} #order #order3 .msg {padding:23px 0; color:#888;} /* 주문완료(/shop/order_finish.php) */ #orderfin {width:850px; margin:0 auto; text-align:center;} #orderfin h3 { text-align:left;} #orderfin .box {margin-bottom:30px; padding:40px 80px; background:#f5f5f5;} #orderfin .info {padding-bottom:30px;} #orderfin .info .bank {padding-bottom:20px; color:#888;} #orderfin .info .email {color:#888;} #orderfin .box_gift .box_btn {margin-top:20px;} #orderfin .btn {padding-top:20px; text-align:center;} #orderfin .btn span { margin: 0 5px; } /* 상품검색(/shop/search_result.php) */ #search_result .research {position:relative; padding-right:60px; background:#fafafa;} #search_result .research:after {display:inline-block; position:absolute; right:60px; top:17px; width:1px; height:25px; background:#d5d5d5; content:'';} #search_result .research .form_input.search {height:60px; border-color:#fafafa; background:transparent; font-size:14px;} #search_result .research .btn {position:absolute; right:0; top:0; padding:17px;} #search_result .check {display:inline-block; padding:15px 0 5px;} #search_result .rank {position:relative; z-index:2; float:right; width:220px; margin-top:-40px; padding:16px 0;} #search_result .rank > ol {overflow:hidden; position:absolute; right:0; top:0px; width:124px; height:45px; padding:10px 0; border:1px solid #fff; background-color:#fff;} #search_result .rank > ol li {overflow:hidden; padding:5px 8px; text-overflow:ellipsis; white-space:nowrap;} #search_result .rank > ol li span {display:inline-block; width:18px; height:18px; margin-right:5px; border-radius:50%; background:#ebebeb; font-size:11px; font-weight:bold; text-align:center; line-height:18px;} #search_result .rank > ol:after {display:block; position:absolute; right:5px; top:20px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #000; content:'';} #search_result .rank > ol:hover {height:auto; border:1px solid #dcdcdc;} #search_result .rank > ol:hover:after {display:none;} #search_result .category {clear:both; border:1px solid #e0e0e0; background:#fff;} #search_result .result_cate {overflow:hidden; padding:0 25px; border-top:1px solid #e0e0e0;} #search_result .result_cate:first-child {border-top:0;} #search_result .result_cate:after {clear:both;} #search_result .result_cate > h3 {float:left; line-height:38px;} #search_result .result_cate > ul {width:85%; margin-left:15%; text-align:left;} #search_result .result_cate > ul > li {overflow:hidden; text-overflow:ellipsis; float:left; width:20%; height:40px; white-space:nowrap; line-height:38px;} #search_result .result_cate > ul > li a {color:#777; font-size:11px;} #search_result .result_cate > ul > li a.selected {font-weight:bold;} #search_result .result_cate > ul > li span {color:#aaa; font-size:11px;} /* 상품문의 & 상품후기 - 상품정보(/shop/product_review_list.php & /shop/product_qna_list.php) */ #qnarev_list_all .sort {padding-bottom:20px; text-align:right; font-size:0;} #qnarev_list_all .sort li {display:inline-block;} #qnarev_list_all .sort li:after {display:inline-block; width:1px; height:14px; margin:5px 10px 0 10px; background-color:#e5e5e5; vertical-align:top; content:'';} #qnarev_list_all .sort li:last-child:after {display:none;} #qnarev_list_all .sort li a {color:#666; font-size:14px;} #qnarev_list_all .sort li a.selected {padding-left:13px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_check.png') no-repeat left center; color:#333; font-weight:bold;} #qnarev_list_all > .btn {position:relative; bottom:-30px; height:0;} #qnarev_list_all > .btn .box_btn {position:absolute; right:0; top:0;} #qnarev_list_all .board_search {clear:both; text-align:center;} #qnarev_list_all .board_search form {display:inline-block; margin:30px auto 0; padding:5px; border:1px solid #dcdcdc; text-align:center;} #qnarev_list_all .board_search select {border:0;} #qnarev_list_all .board_search input.form_input.search {width:300px; border-width:0 1px;} #qnarev_list_all .board_search .btn_search {display:inline-block; width:34px; height:34px; border:0; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/search_s.png') no-repeat center; vertical-align:top; text-indent:-9999px; cursor:pointer;} /* 상품문의 & 상품후기 & 마이페이지 상품문의 & 마이페이지 상품후기 - 상품정보(/shop/product_review.php & /shop/product_qna.php) */ .qnarev_list .prd {overflow:hidden; position:relative; min-height:150px; padding:40px 50px; margin-bottom:32px; background:#fafbfb; color:#474645;} .qnarev_list .prd .img {float:left; width:150px;} .qnarev_list .prd .img img {width:150px; height:auto;} .qnarev_list .prd .info {float:left; padding-left:40px; text-align:left;} .qnarev_list .prd .info .name {padding-bottom:20px; font-weight:bold;} .qnarev_list .prd .info .name img {padding-right:5px; vertical-align:middle;} .qnarev_list .prd .info ul li {padding:5px 0; color:#666;} .qnarev_list .prd .info ul li .nprice {text-decoration:line-through;} .qnarev_list .prd .btn_related {padding-top:20px;} .qnarev_list .btn {padding-top:20px; text-align:right;} .qnarev_list .qnarev_cnt {padding:0; border:0;} .qnarev_list .qnarev_cnt > div {display:none; padding:40px; border-bottom:1px solid #e0e0e0; text-align:left; word-break:break-all; word-wrap:break-word;} .qnarev_list .qnarev_cnt .question, .qnarev_list .qnarev_cnt .answer {position:relative; min-height:40px; padding-left:50px;} .qnarev_list .qnarev_cnt .question {padding:0 0 20px 50px; border-bottom:1px solid #e5e5e5;} .qnarev_list .qnarev_cnt .question img {max-width:100%; height:auto;} .qnarev_list .qnarev_cnt .answer {margin-top:20px;} .qnarev_list .qnarev_cnt .icon {display:inline-block; position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:#777474; color:#fff; font-family:'arial'; text-align:center; line-height:28px;} .qnarev_list .qnarev_cnt .answer .icon {background:#ef6363;} .qnarev_list .qnarev_cnt .btn {text-align:left;} .qnarev_list .qnarev_cnt .comment {padding-top:20px;} /* 상품문의, 상품후기 - 비밀번호 확인 */ .pwbox_popup {position:fixed; left:50%; top:50%; z-index:100; margin:-131px 0 0 -570px; width:1140px; padding:0 60px;} #pwbox {padding:40px 0; border:1px solid #e0e0e0; background:#fafafa; text-align:center;} #pwbox h3 {padding-bottom:15px;} #pwbox p {margin-bottom:20px; color:#888;} #pwbox .form_input {width:330px; margin-bottom:20px;} /* 상품문의 & 상품후기 - 쓰기 */ .qnarev_write_popup {position:fixed; left:50%; top:50%; z-index:100; margin:-315px 0 0 -510px; width:1020px; height:630px;} .qnarev_write_popup .close {position:absolute; top:0; right:-60px; width:32px; height:32px; text-indent:-9999px;} .qnarev_write_popup .close:before {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .qnarev_write_popup .close:after {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .qnarev_write_popup .qnarev_write {padding:30px;} .qnarev_write {overflow:auto; width:100%; height:100%; margin:0 auto; background:#fff; text-align:center;} .qnarev_write form {display:inline-block; width:100%; text-align:left;} .qnarev_write fieldset > legend {display:block; width:100%; margin-bottom:25px; padding-bottom:25px; border-bottom:1px solid #000; font-size:18px; font-weight:bold;} .qnarev_write fieldset > div {position:relative; margin-top:10px;} .qnarev_write fieldset > div:last-child {margin-bottom:0;} .qnarev_write fieldset > div > label {display:none;} .qnarev_write fieldset > div.grade {margin-bottom:20px; border-bottom:1px solid #dcdcdc; padding-bottom:25px; text-align:center;} .qnarev_write fieldset > div.grade > .msg {padding-bottom:15px; font-size:16px; font-weight:bold;} .qnarev_write fieldset > div.name {min-height:34px; padding-right:100px; line-height:34px; font-weight:bold;} .qnarev_write fieldset > div.name .form_input {float:left; width:49%;} .qnarev_write fieldset > div.name .form_input.pw {float:right;} .qnarev_write fieldset > div.name .check {position:absolute; right:0; top:5px;} .qnarev_write fieldset > div.name.nopd {padding-right:0;} .qnarev_write fieldset > div.name:after {display:block; clear:both; content:'';} .qnarev_write fieldset > div.contents {background:#fff;} .qnarev_write fieldset > div.contents textarea {height:250px;} .qnarev_write fieldset > div.msg_milage {margin-top:-11px; padding:10px; border:1px solid #cbd5de; background-color:#e6f0f9; color:#666; text-align:center; vertical-align:middle;} .qnarev_write fieldset > div.msg_milage img {vertical-align:middle;} .qnarev_write fieldset > div.msg_milage:before {position:absolute; left:10px; top:-8px; width:15px; height:15px; border:1px solid #cbd5de; border-width:1px 0 0 1px; background-color:#e6f0f9; -webkit-transform: rotate(45deg); transform:rotate(45deg); content:'';} .qnarev_write fieldset > div #preview_attach_files {font-size:0;} .qnarev_write fieldset > div #preview_attach_files > li {display:inline-block; padding:0 5px;} .qnarev_write fieldset > div #preview_attach_files > li:first-child {padding-left:0;} .qnarev_write fieldset > div #preview_attach_files > li img {width:115px; height:115px;} .qnarev_write fieldset select {width:100%;} .qnarev_write .btn {padding:20px 0; text-align:center;} /* 상품문의 & 상품후기 - 수정 */ #qnarevmod .modi_pwd, #qnarevmod .modi_cnt {display:none;} #qnarevmod .modi_cnt .qnarev_write > form {padding:40px 0; text-align:left;} /* 상품후기 - 열람 레이어 */ .layer_review_list { position:fixed; top: calc( 50% - 315px ); left: calc( 50% - 510px ); width:1020px; height:630px; z-index:100;} .layer_review_list.upfile_cnt0 > .img {display:none;} .layer_review_list.upfile_cnt0 > .info {width:100%;} .layer_review_list .img {float:left; width:630px; height:100%; background-color:#f1f2f3;} .layer_review_list .img .box {display:flex; width:630px; height:630px; align-items:center; justify-content:center;} .layer_review_list .img .add_slide img {max-width:100%; max-height:100%;} .layer_review_list .img .add_slide .slick-arrow {position:absolute; top: calc( 50% - 20px ); width:40px; height:40px; margin:0 15px; background: #e1e1e1; border-radius:50%; z-index:10; } .layer_review_list .img .add_slide .slick-arrow.slick-prev {left:0;} .layer_review_list .img .add_slide .slick-arrow.slick-prev:before { content:'';position:absolute; top: calc( 50% - 5px ); left: calc( 50% - 6px ); width:12px; height:2px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .layer_review_list .img .add_slide .slick-arrow.slick-prev:after { content:'';position:absolute; top: calc( 50% + 3px ); left: calc( 50% - 6px ); width:12px; height:2px;background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);} .layer_review_list .img .add_slide .slick-arrow.slick-next {right:0;} .layer_review_list .img .add_slide .slick-arrow.slick-next:before { content:'';position:absolute; top: calc( 50% - 5px ); left: calc( 50% - 6px ); width:12px; height:2px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } .layer_review_list .img .add_slide .slick-arrow.slick-next:after { content:'';position:absolute; top: calc( 50% + 3px ); left: calc( 50% - 6px ); width:12px; height:2px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .layer_review_list .img .add_slide .slick-dots {position:absolute; left:0; bottom:20px; z-index:10;} .layer_review_list .info {overflow:auto; float:left; width:390px; height:100%; padding:30px; background-color:#fff;} .layer_review_list .info .prd {overflow: hidden; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;} .layer_review_list .info .prd h2 {float:right; width:calc(100% - 80px); padding-top:10px;} .layer_review_list .info .prd .img {float:left; width:60px; margin-right:20px;} .layer_review_list .info .prd .img img {width:60px; height:auto;} .layer_review_list .info .board {position:relative; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;} .layer_review_list .info .board .grade .score {font-size:16px; font-weight:bold;} .layer_review_list .info .board .name {margin-top:10px; color:#888;} .layer_review_list .info .board .subject {margin-top:20px; color:#333; font-size:14px; font-weight:bold;} .layer_review_list .info .board .content {margin-top:10px; color:#666; line-height:1.6; word-break:break-all;} .layer_review_list .info .board .recommend {margin-top:20px; color:#888; line-height:24px;} .layer_review_list .info .board .recommend > span {float:right;} .layer_review_list .info .board .recommend > span > a {display:inline-block; min-width:60px; min-height:24px; padding:0 10px 0 30px; border:1px solid #dcdcdc; border-radius:20px; background-repeat:no-repeat; background-position:7px center; background-color:#fff; color:#333; text-align:right; line-height:24px; cursor:pointer;} .layer_review_list .info .board .recommend > span > a.yes {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/recommend_yes.png');} .layer_review_list .info .board .recommend > span > a.no {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/recommend_no.png');} .layer_review_list .info .board .recommend > span > a:hover {background-color:#f1f2f3;} .layer_review_list .info .board .btn {position:absolute; right:0; top:0; font-size:0;} .layer_review_list .info .board .btn > a {display:inline-block; margin-left:-1px; padding:4px 8px; border:1px solid #dcdcdc; background-color:#fff; color:#888;} .layer_review_list .info .board .btn > a:hover {background-color:#f1f2f3;} .layer_review_list .info .comment .guest {padding:15px 20px; background-color:#fafafa; color:#666;} .layer_review_list .info .comment .guest > a {float:right; color:#333; font-size:13px; font-weight:bold; text-decoration:underline;} .layer_review_list .info .comment form .write {position:relative; padding-right:56px; border:1px solid #dcdcdc; background-color:#fff; text-align:left;} .layer_review_list .info .comment form .write textarea.form_input {min-height:40px; border:0;} .layer_review_list .info .comment form .write .btn_comment {display:inline-block; position:absolute; right:0; top:0; width:56px; height:100%; text-align:center; border:0; background-color:#fff; font-weight:bold; line-height:100%; cursor:pointer;} .layer_review_list .info .comment form .write:after {display:inline-block; position:absolute; right:56px; top:50%; width:1px; height:20px; margin-top:-10px; background-color:#dcdcdc; content:'';} .layer_review_list .info .comment .list {position:relative; margin-top:20px;} .layer_review_list .info .comment .list:before {position:absolute; left:20px; top:-6px; width:10px; height:10px; border:1px solid #dcdcdc; border-width:1px 1px 0 0; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list .info .comment .list > li {margin-top:-1px; padding:10px 15px; border:1px solid #dcdcdc;} .layer_review_list .info .comment .list > li > .date {display:block; position:relative; height:0; top:-16px; color:#888; text-align:right;} .layer_review_list .info .comment .list > li > .date img {vertical-align:middle;} .layer_review_list .info .comment .list > li > .content {padding-top:5px; color:#666; line-height:1.6; word-break:break-all;} .layer_review_list .move {position:absolute; top:50%; width:34px; height:34px; margin:-17px 12px 0 12px; text-indent:-9999px; cursor:pointer;} .layer_review_list .move.prev {left:-60px;} .layer_review_list .move.prev:before {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:-9px 0 0 -13px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list .move.prev:after {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:7px 0 0 -13px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .layer_review_list .move.next {right:-60px;} .layer_review_list .move.next:before {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:-9px 0 0 -13px; background-color:#fff; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} .layer_review_list .move.next:after {position:absolute; left:50%; top:50%; width:25px; height:4px; margin:7px 0 0 -13px; background-color:#fff; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list .move.end:before, .layer_review_list .move.end:after {background-color:#818181;} .layer_review_list .close {position:absolute; top: 10px; right: 10px; width:32px; height:32px; text-indent:-9999px; cursor: pointer;} .layer_review_list .close:before {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .layer_review_list .close:after {position:absolute; left:0; top:16px; width:32px; height:3px; background-color:#b7b7b7; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';} /* 설문조사(/shop/poll_list.php) */ #poll .subject {padding:15px 30px; border:1px solid #e0e0e0; border-width:1px 0; text-align:left;} #poll .subject strong {padding-left:40px;} #poll .box {padding:30px; border-bottom:1px solid #e0e0e0; background:#fbfbfb;} #poll .box .vote {margin-top:30px; padding:30px; border:1px solid #e0e0e0; background:#fff;} #poll .box .vote table {width:100%; margin:0 auto; table-layout:fixed;} #poll .box .vote table thead {display:none;} #poll .box .vote table tbody tr td {padding:2px 0;} #poll .box .vote table tbody tr td .graph {height:5px; background:#b1b1b1;} #poll .btn {margin:10px 0 40px 0; text-align:right;} #poll .commentdel {padding:20px 0; border:1px solid #e0e0e0; border-bottom:0; background:#fff; text-align:center;} #poll .commentdel .msg {padding-top:5px;} /* 퀵카트 */ .quickcart {position:relative;} .quickcart > a {display:inline-block; padding:0 10px; color:#666; font-size:11px; line-height:30px;} .quickcart > a:hover {color:#d53838;} .quickcart .list {position:absolute; right:0; z-index:20; width:300px; padding:10px; border:1px solid #e0e0e0; background:#fff;} .quickcart .list .frame {overflow:auto; max-height:300px;} .quickcart .list .frame table {table-layout:fixed; clear:both; width:100%; border-collapse:collapse;} .quickcart .list .frame table caption {padding:10px 0; color:#181818; font-weight:bold; text-align:left;} .quickcart .list .frame table thead {display:none;} .quickcart .list .frame table td {position:relative; padding:10px 0; border-top:1px solid #e0e0e0; text-align:center; vertical-align:middle;} .quickcart .list .frame table td.info {padding:0 10px; text-align:left;} .quickcart .list .frame table td.info .mall {font-size:11px;} .quickcart .list .frame table td .del {position:absolute; right:0; top:10px;} .quickcart .list .box_price {padding:10px; border:1px solid #e0e0e0; border-width:1px 0; background:#f8f8f8;} .quickcart .list .btn > span {margin-top:10px;} /* 개별상품쿠폰 레이어 */ #pop_coupon2 {position:relative; margin: 0 auto; padding:40px; width: 900px; height: 750px; border:1px solid #d9d9d9; background:#fff;} #pop_coupon2 h2 { color:#000; font-size:30px; font-weight: 400; } #pop_coupon2 .box { overflow-y: auto; margin: 30px 0 0; max-height:510px; } #pop_coupon2 .box .tbl_col .img { width: 70px; } #pop_coupon2 .box .tbl_col .img img { width: 100%; } #pop_coupon2 .box .usable_cpn {padding:8px 0; text-align:left;} #pop_coupon2 .box .usable_cpn > li {position:relative; padding:2px 70px 2px 0;} #pop_coupon2 .box .usable_cpn > li > label {display:inline-block; cursor:pointer;} #pop_coupon2 .box .usable_cpn > li > label > span {color:#df7e7e;} #pop_coupon2 .box .usable_cpn > li > .expiry {position:absolute; right:0; top:2px; color:#888;} #pop_coupon2 .btn { padding: 20px 0 0; border-top:1px solid #dbdbdb; text-align:center;} #pop_coupon2 .btn span { margin: 0 5px; } #pop_coupon2 .close {display:inline-block; position:absolute; right:20px; top:20px; width:21px; height:21px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} /* 재입고 알림 신청 레이어 */ #notify_restock {width:570px; margin-left:-285px; padding:40px; border:1px solid #d9d9d9; background-color:#fff;} #notify_restock .close {display:inline-block; position:absolute; right:20px; top:20px; width:21px; height:21px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} #notify_restock h2 {padding-bottom:10px; border-bottom:1px solid #dbdbdb; color:#000; font-size:22px;} #notify_restock .tbl_row {margin-top:-1px;} #notify_restock .tbl_row .opt th, #notify_restock .tbl_row .opt td {padding-top:8px; padding-bottom:8px; border-bottom:0;} #notify_restock .tbl_row .phone th, #notify_restock .tbl_row .phone td {border-top:1px solid #e0e0e0;} #notify_restock .agree {display:inline-block; margin-top:10px; cursor:pointer;} #notify_restock .btn {padding-top:20px; text-align:center;} /* 프로모션 기획전(/shop/promotion.php) */ .speical_group .menu_slide{ width: 1020px; margin: 0 auto; } .speical_group .menu_slide .slick-prev {position:absolute; top:calc( 50% - 15px ); left:-40px; z-index:5; width:24px; height:30px; /*margin:-44px 0 0 -600px;*/ background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_prev.png') no-repeat center;} .speical_group .menu_slide .slick-next {position:absolute; top:calc( 50% - 15px ); right:-40px; z-index:5; width:24px; height:30px; /*margin:-44px -600px 0 0;*/ background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_next.png') no-repeat center;} .speical_group .menu_slide .event_item{ margin: 0 30px 0 0; } .speical_group .menu_slide .event_item a{ display: block; } .speical_group .menu_slide .event_item .thumbnail{ overflow: hidden; display: block; } .speical_group .menu_slide .event_item .thumbnail img{ width: 100%; transition: all 0.3s ease; } .speical_group .menu_slide .event_title{ display: block; font-size: 15px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 5px 0 0; } .speical_group .menu_slide .sub_title{ display: block; } .speical_group .menu_slide .event_item a:hover img{ transform: scale(1.05); } /* .speical_group > .menu_slide .event_item a.active .event_title{ font-weight: bold; } */ .speical_group .intro{ margin: 50px 0 0; } .speical_group .intro .title {position:relative; padding:15px 0; border-bottom:1px solid #d2d2d2;} .speical_group .intro .title h3 {padding-right:160px; font-size:16px; font-weight:bold;} .speical_group .intro .title > span {position:absolute; right:0; top:50%; margin-top:-12px; color:#666; font-size:14px;} .speical_group .intro .summary {padding:30px 0; border-bottom:1px solid #d2d2d2;} .speical_group .intro .summary img{ width: 100%; } .speical_group .box {border-bottom:1px solid #d2d2d2; text-align:center;} .speical_group .box:last-child{ border-bottom: inherit; } .speical_group .box h4 {padding:40px 0 30px; font-size:19px;} .speical_group .box .img {padding-bottom:30px;} @media screen and (max-width: 1460px) { #big_section { width: 1200px; } } /*-----------------------------------------------------------------*/ /* 4-3. 회원 /*-----------------------------------------------------------------*/ /* 로그인 & 아이디 비밀번호 찾기 & 비밀번호 변경 */ .box_member {width: 1000px; margin:0 auto;} .box_member .wrap_area { overflow: hidden; } .box_member .left_area {float:left; width:420px;} .box_member .right_area {float:right; width:420px;} .box_member h3 {padding-bottom:17px; font-size:25px; font-weight:300;} .box_member fieldset .fld {margin-bottom:12px; font-size:0;} .box_member fieldset .fld label {display:none;} .box_member fieldset .savessl { overflow: hidden; margin:20px 0 40px;} .box_member fieldset .savessl label {font-size:14px; font-weight:400;} .box_member fieldset .savessl span {float:right;} .box_member .box_btn {margin-bottom:15px;} /* 로그인 & 아이디 비밀번호 찾기 & 비밀번호 변경 - 인풋 기본 스타일 */ .box_member .form_input.member {height:47px; padding:0; border:0; border-bottom:1px solid #e7e7e7; background:#fff; color:#404040; font-size:14px; line-height:45px;} .box_member .form_input.member:focus {border-color:#000;} .box_member .form_input.member.number_first {width:32%;} .box_member .form_input.member.number {width:33%; margin-left:1%;} .box_member .find_id_item_2, .box_member .find_id_item_3, .box_member .find_pw_item_2, .box_member .find_pw_item_3 {display:none;} .box_member.box_member_tab{width:375px;} .box_member.box_member_tab .tab_member{border-bottom: 1px solid #c5c5c5;} .box_member.box_member_tab .tab_member:after{content: ""; display: block; clear: both;} .box_member.box_member_tab .tab_member li{float: left; width: 50%;} .box_member.box_member_tab .tab_member li a{font-size: 14px; display: block; text-align: center; cursor: pointer; line-height: 48px; position: relative; color:#c5c5c5;} .box_member.box_member_tab .tab_member li a.active{color:#000;} .box_member.box_member_tab .tab_member li a.active:before{position: absolute; content: ""; display: block; height: 2px; width: 100%; bottom: -1px; left: 0; background-color: #000;} .box_member.box_member_tab .tabcnt_member{padding:30px 18px 0 18px;} .box_member.box_member_tab .tabcnt_member .description{font-size:14px; color:#000; text-align:center; margin-bottom:30px;} .box_member.box_member_tab .tabcnt_member .description .sub{color:#666; font-size:14px;} .box_member.box_member_tab .tabcnt_member .alert{color:#FF2C65; font-size:14px; margin-bottom:10px;} .box_member.box_member_tab .tabcnt_member .fld{margin-bottom:10px;} .box_member.box_member_tab .tabcnt_member .fld label{} .box_member.box_member_tab .tabcnt_member .fld input[type="text"], .box_member.box_member_tab .tabcnt_member .fld input[type="password"], .box_member.box_member_tab .tabcnt_member .fld input[type="tel"]{border:1px solid #C5C5C5; padding-left:14px;} .box_member.box_member_tab .tabcnt_member .fld input::placeholder{color: #C5C5C5; font-size: 14px;} .box_member.box_member_tab .tabcnt_member .fld input:focus, .box_member.box_member_tab .tabcnt_member .fld input:active{border-color:#333;} .box_member.box_member_tab .tabcnt_member .fld input:invalid{border-color:#DB1E00;} .box_member.box_member_tab .tabcnt_member .savessl{margin:16px 0 30px 0;} .box_member.box_member_tab .tabcnt_member .savessl:after{content: ""; display: block; clear: both;} .box_member.box_member_tab .tabcnt_member .savessl li{float: left; margin-left:15px;} .box_member.box_member_tab .tabcnt_member .savessl li:first-child{margin-left:0;} .box_member.box_member_tab .tabcnt_member .savessl li input[type="checkbox"]{} .box_member.box_member_tab .tabcnt_member .savessl li label{vertical-align:middle; margin-left:4px; color:#666;} /*.box_member.box_member_tab .tabcnt_member .savessl li.ssl{float: right;}*/ .box_member.box_member_tab .tabcnt_member .savessl li.idpw{float:right;} .box_member.box_member_tab .tabcnt_member .savessl li.idpw a{color:#666; font-size:14px;} .box_member.box_member_tab .tabcnt_member .box_btn{margin-bottom:15px;} .box_member.box_member_tab .tabcnt_member .box_btn > *{font-size: 16px; font-weight: 400; border-radius: 3px; text-align: center; padding:15px 16px;} .box_member.box_member_tab .tabcnt_member .box_btn.black > *{background-color: #333; color: #fff; border:1px solid #333;} .box_member.box_member_tab .tabcnt_member .box_btn.black > *:hover{background-color: #000; color: #fff; border:1px solid #000;} .box_member.box_member_tab .tabcnt_member .box_btn > *:disabled{background-color:#C5C5C5 !important; color:#fff !important; border:1px solid #C5C5C5 !important; cursor:not-allowed;} .box_member.box_member_tab .tabcnt_member .box_btn.white > *{background-color: #fff; color: #333 !important; border:1px solid #333;} .box_member.box_member_tab .tabcnt_member .box_btn.white > *:hover{background-color: #fff; color: #000 !important; border:1px solid #000;} .box_member.box_member_tab .tabcnt_member .box_btn .btn_join{font-size:14px;} .box_member.box_member_tab .tabcnt_member .box_btn .uline{text-decoration:underline; color:#333; font-size:14px;} .box_member.box_member_tab .tabcnt_member .btn_wrap:after{content:""; display:block; clear:both;} .box_member.box_member_tab .tabcnt_member .btn_wrap.col2 .box_btn{float:left; width: calc(50% - 5px);} .box_member.box_member_tab .tabcnt_member .btn_wrap.col2 .box_btn:last-child{float:right;} .box_member.box_member_tab .tabcnt_member .subtit{font-size:22px; text-align:center; font-weight:600; margin-bottom:30px;} /* 로그인(/member/login.php) */ #login .guest_order {margin-bottom:30px;} #login .fail {position:relative; margin-bottom:20px; padding:18px 10px; border-radius:10px; background:#fae4e8; color:#d53838; text-align:center;} #login .fail:after {position:absolute; left:50%; bottom:-6px; width:0; height:0; margin-left:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:6px solid #fae4e8; content:'';} #login .simple {margin:25px 0 0; text-align:center;} #login .simple p {padding-bottom:20px; color:#666;} #login .simple p strong {font-size:14px;} #login .simple a {display:inline-block; width:44px; height:44px; margin:0 5px; border-radius:50%; background-repeat:no-repeat; background-position:center; text-indent:-9999px; transition:all .3s ease;} #login .simple a.naver {background-color:#5ebc67; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_naver.png');} #login .simple a.naver:hover {border-radius:0; background-color:#519c58;} #login .simple a.facebook {background-color:#5e85bc; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_facebook.png');} #login .simple a.facebook:hover {border-radius:0; background-color:#4f709f;} #login .simple a.kakao {background-color:#f4cf50; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_kakao.png');} #login .simple a.kakao:hover {border-radius:0; background-color:#ddbc4b;} #login .simple a.apple {background-color:#000000; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_apple.png');} #login .simple a.apple:hover {border-radius:0; background-color:#000000;} #login .simple a.payco {background-color:#e72a2d; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_payco.png');} #login .simple a.payco:hover {border-radius:0; background-color:#d73a3c;} #login .simple a.wemake {border:1px solid #d0d0d0; background-color:#fff; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_wemake.png');} #login .simple a.wemake:hover {border-radius:0; background-color:#fafafa;} #login .joinfind { margin: 5px 0 0; text-align: center;} #login .joinfind p { display: inline-block; } #login .joinfind p a { display: block; font-size: 14px; font-weight: 400; } #login .joinfind .join { margin: 0 0 0 30px; } /* 아이디/비밀번호 찾기 레이어 */ .pop_find_id {position:fixed; top:100px; left: calc( 50% - 250px); width: 500px; border:1px solid #dcdcdc; background-color:#fff; z-index:1001;} .pop_find_id h1 {height:49px; padding:0 10px; background-color:#676767; color:#fff; font-size:16px; font-weight:normal; line-height:49px;} .pop_find_id .box {padding:30px;} .pop_find_id .box h2 {color:#333; font-size:20px; font-weight:normal;} .pop_find_id .box .msg {padding-top:15px;} .pop_find_id .box .input {position:relative; height:50px; margin-top:15px; padding-right:113px; background-color:#f5f5f5;} .pop_find_id .box .input:after {position:absolute; right:113px; top:50%; width:1px; height:22px; margin-top:-11px; background-color:#dbdbdb; content:'';} .pop_find_id .box .input > .input_number {width:100%; height:50px; padding:0 10px; border:0; background-color:transparent;} .pop_find_id .box .input > .btn {position:absolute; right:0; top:0; width:113px; height:50px; border:0; background-color:#f5f5f5; font-weight:bold; cursor:pointer;} .pop_find_id .box .form_input {height:50px; margin-top:10px;} .pop_find_id .box .box_btn {margin-top:20px;} .pop_find_id .box #limit_5 { margin: 10px 0 0; } .pop_find_id .box .pop_id_list {padding-top:25px;} .pop_find_id .box .pop_id_list .list {overflow:auto; max-height:100px; margin-top:10px; padding:5px 0; border:1px solid #d2d2d2; border-width:1px 0; background-color:#f5f5f5;} .pop_find_id .box .pop_id_list .list li {position:relative; padding:5px; text-align:left;} .pop_find_id .box .pop_id_list .btn {padding-top:20px; text-align:center;} .pop_find_id .box .pop_id_list .btn span { margin: 0 5px;} .pop_find_id .box .close {display:inline-block; position:absolute; right:14px; top:14px; width:21px; height:21px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;} /* 비밀번호 변경 */ /* #modify_pwd { width: 500px; } */ #modify_pwd .modify_id {padding-bottom:20px; font-size:14px; font-weight:bold;} #modify_pwd .msg_chgpw {border:1px dashed #000; margin: 0 0 20px; padding:10px; text-align:left;} #modify_pwd .msg_chgpw span { display: block; margin: 10px 0 0; } #modify_pwd .box_btn { margin: 30px 0 15px; } /* 회원가입 약관동의(/member/join_step1.php) */ #join_agree {width:640px; margin:0 auto; text-align:center;} #join_agree .check {padding-bottom:17px; text-align:left;} #join_agree .check label {font-weight:bold; cursor:pointer;} #join_agree iframe {width:100%; height:222px; margin-bottom:40px; border:1px solid #d9d9d9; background:#fff; text-align:left;} #join_agree .tbl_row {margin-bottom:20px;} #join_agree .member_type {padding:20px 0 30px;} #join_agree .member_type label {margin:0 10px;} #join_agree .btn {padding-top:20px; text-align:center;} #join_agree .btn span { margin: 0 5px; } #join_agree .simple {padding:30px 0; text-align:center;} #join_agree .simple a {display:inline-block; width:44px; height:44px; margin:0 5px; border-radius:50%; background-repeat:no-repeat; background-position:center; text-indent:-9999px; transition:all .3s ease;} #join_agree .simple a.naver {background-color:#5ebc67; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_naver.png');} #join_agree .simple a.naver:hover {border-radius:0; background-color:#519c58;} #join_agree .simple a.facebook {background-color:#5e85bc; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_facebook.png');} #join_agree .simple a.facebook:hover {border-radius:0; background-color:#4f709f;} #join_agree .simple a.kakao {background-color:#f4cf50; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_kakao.png');} #join_agree .simple a.kakao:hover {border-radius:0; background-color:#ddbc4b;} #join_agree .simple a.apple {background-color:#000000; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_apple.png');} #join_agree .simple a.apple:hover {border-radius:0; background-color:#000000;} #join_agree .simple a.payco {background-color:#e72a2d; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_payco.png');} #join_agree .simple a.payco:hover {border-radius:0; background-color:#d73a3c;} #join_agree .simple a.wemake {border:1px solid #d0d0d0; background-color:#fff; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/icon_wemake.png');} #join_agree .simple a.wemake:hover {border-radius:0; background-color:#fafafa;} /* 회원가입 정보입력(/member/join_frm.php) */ #join_input { margin: 60px auto 0; width:640px; } #join_input fieldset {margin: 0 0 30px;} #join_input fieldset legend {margin: 0 0 10px; font-size:14px; line-height:1;} #join_input fieldset .box {padding:30px 40px; background:#fafafa;} #join_input fieldset .box > div {position:relative; min-height:34px; margin: 0 0 10px; padding-left:100px;} #join_input fieldset .box > div:last-child {margin:0;} #join_input fieldset .box > div > label {display:block; position:absolute; top:8px; left:0; max-width:100px;} #join_input fieldset .box > div #join_name, #join_input fieldset .box > div #join_cell{padding:7px 10px;} #join_input fieldset .box > div input[type=checkbox], #join_input fieldset .box > div input[type=radio] {margin-top:2px;} #join_input fieldset .box .warning {display:none; position:relative; padding:5px; border-radius:5px; background:#fae4e8; color:#d53838;} #join_input fieldset .box .warning:after { content:''; position:absolute; top:-6px; left:7px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #fae4e8;} #join_input fieldset .box input:focus+.warning {display:block;} #join_input fieldset .box .type2 .authentication { position:absolute; top:8px; left:0; max-width:100px; } #join_input fieldset .box .msg {padding:5px 0 0; color:#999; font-size:11px;} #join_input fieldset .box .msg * {color:#999; font-size:11px;} #join_input fieldset .box .addbtn .check {display:inline-block; position:absolute; top:0; right:0; height:34px; padding:0 13px; font-weight:bold; line-height:35px;} #join_input fieldset .box .addbtn .check:hover {color:#d53838;} #join_input fieldset .box .addbtn .check:after {content:''; position:absolute; top:6px; left:0; width:1px; height:22px; background:#e5e5e5; } #join_input fieldset .box .addbtn .middle_address {margin:2px 0;} #join_input fieldset .box .email .form_input.first {width:30%;} #join_input fieldset .box .email .form_input.second {width:30%;} #join_input fieldset .box .email span {display:inline-block; width:5%; text-align:center; line-height:35px;} #join_input fieldset .box .email select {position:absolute; top:0; right:0; width:25%;} #join_input fieldset .box .birth {position:relative; margin-bottom:10px;} #join_input fieldset .box .birth select {width:20%;} #join_input fieldset .box .birth .sl {position:absolute; top:5px; right:0;} #join_input fieldset .box .line {margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #dcdcdc; box-sizing:content-box; -webkit-box-sizing:content-box;} #join_input fieldset .box .reg_type .select {position:relative; padding-right:60px; font-size:0;} #join_input fieldset .box .reg_type .select select {width:30%; vertical-align:top;} #join_input fieldset .box .reg_type .select .form_input {width:30%;} #join_input fieldset .box .reg_type .select .dash {display:inline-block; width:5%; text-align:center; line-height:35px;} #join_input fieldset .box .reg_type .select .transmit {position:absolute; right:0; top:0; width:50px; height:35px; background:#404040; color:#fff; text-align:center; line-height:35px; cursor:pointer;} #join_input fieldset .box .reg_type .select .transmit:hover {background:#222;} /* 회원가입 정보입력 - 기업회원추가입력 */ #join_input fieldset.biz .licensee_num .form_input {width:32%;} #join_input fieldset.biz .licensee_num .form_input.second {margin:0 2%;} /* 회원가입 정보입력 - 추가필드리스트 */ #join_input fieldset.addfd .box > div {margin-bottom:20px; padding-top:8px;} /* 회원가입 정보입력 - 버튼 */ #join_input .btn {margin-top:30px; text-align:center;} #join_input .btn span { margin: 0 5px; } /* 회원가입 정보입력 - sns회원가입 */ #join_input.simple fieldset .box > div {padding-left:0;} #join_input.simple fieldset .box > div > div {position:relative; padding-left:100px;} #join_input.simple fieldset .box > div > div > label {display:block; position:absolute; left:0; top:8px; max-width:100px;} #join_input.simple fieldset .box .name {position:relative; margin-bottom:10px;} /*#join_input.simple fieldset .box .name label {display:none;}*/ #join_input.simple fieldset .box .type2.line {margin-bottom:0; padding-bottom:0; border-bottom:0;} #join_input.simple fieldset .box div#join_email, #join_input.simple fieldset .box div#join_name{padding:7px 10px;} #join_input.simple fieldset .box .reg_type{padding-left:100px; margin-bottom:0;} #join_input.simple fieldset .box .reg_type .select{padding-left:0;} #join_input.simple fieldset .box .reg_type .select > label{position:static;} /* 회원가입완료(/member/join_step3.php) */ #join_finish {width:640px; margin:0 auto;} #join_finish h3 {margin-bottom:20px; font-size:13px;} #join_finish .box {padding:45px 0; border:1px solid #dedede; color:#888; text-align:center; line-height:3;} #join_finish .box .over_fourteen span{ display: block; color: #888; margin: 10px 0 10px; } #join_finish .box > .agree {width:80%; margin:0 auto; padding:15px; color:#666; background-color:#f0f0f0;} #join_finish .box > .agree > span {display:block;} #join_finish .box strong {font-size:14px;} #join_finish .box .document > a {display:inline-block; padding:20px 10px; font-weight:bold; text-decoration:underline;} #join_finish .btn {margin-top:30px; text-align:center;} /* 정보수정(/member/edit_step1.php), 정보수정완료(/member/edit_step3.php) */ .edit_info .box {padding:60px 0; background-color:#f5f5f5; text-align:center;} .edit_info .box > .msg {color:#666;} .edit_info .box > .agree {width:50%; margin:20px auto 0; padding:15px; color:#666; background-color:#fff;} .edit_info .box > .agree > span {display:block;} .edit_info .form_input {width:30%; margin:15px 0 0;} .edit_info .btn {margin:30px 0 0; text-align:center;} .edit_info .btn span { margin: 0 5px; } /* 우편번호 찾기(/common/zip_search.php) */ .zipcode {width:420px; padding:20px; text-align:center;} .zipcode h1 {padding-bottom:20px; font-size:20px; font-weight:bold;} .zipcode .tab {height:32px; text-align:center;} .zipcode .tab li {float:left; width:50%; vertical-align:bottom;} .zipcode .tab a {display:block; height:34px; margin:10px 0 0 -1px; border:1px solid #dcdcdc; background:#f8f8f8; color:#181818; line-height:34px;} .zipcode .tab a.selected {height:44px; margin-top:0; border-bottom:0; background:#fff; font-weight:bold; line-height:49px;} .zipcode .ex {clear:both; padding:20px 0; color:#666; text-align:left;} .zipcode .ex span {display:block; color:#888;} .zipcode .search {position:relative; padding-right:60px;} .zipcode .search .box_btn {position:absolute; right:0; top:0;} .zipcode table {table-layout:fixed; width:100%; margin-top:20px; border-top:1px solid #e0e0e0;} .zipcode table th {font-size:0;} .zipcode table td {padding:10px 0; border-bottom:1px solid #d7d7d7; color:#888; text-align:center; vertical-align:middle;} .zipcode table td.addr {text-align:left;} .zipcode table td font {color:#d53838;} /*-----------------------------------------------------------------*/ /* 4-4. 마이페이지 /*-----------------------------------------------------------------*/ /* 마이페이지 탭 & 회원정보 */ .tbl_mypage {width:100%; margin-bottom:40px; border:1px solid #d7d7d7;} .tbl_mypage thead th {padding:16px 0; border-right:1px solid #dadada; border-bottom:1px solid #dadada; color:#181818; font-weight:bold; text-align:center;} .tbl_mypage tbody td {padding:13px 0 17px 0; border-right:1px solid #dadada; text-align:center;} .tbl_mypage tbody td ul li {padding:5px 0;} .tbl_mypage tbody td ul li a { color:#888;} .tbl_mypage tbody td ul li a:hover {color:#333;} .tbl_mypage .last {border-right:0;} /* 마이페이지 공통 박스 */ .box_mp {margin-bottom:30px; padding:30px; background:#f8f8f8; text-align:center; line-height:35px;} .box_mp:after {display:block; clear:both; content:'';} .box_mp .have {color:#666;} .box_mp .have span {display:block; padding-top:5px; color:#333; font-family:'arial'; font-size:24px; font-weight:bold;} /* 마이페이지 좌측 카테고리 */ .my_page_snb { float: left; width: 220px; } .my_page_snb .title a { color: #404040; font-size: 30px; font-weight: 300; line-height: 1; } .my_page_snb dl { margin: 35px 0 0; } .my_page_snb dt { color: #404040; font-size: 18px; font-weight: 300; } .my_page_snb dd { margin: 10px 0 0; } .my_page_snb dd a { padding: 5px 0; color: #888; font-size: 14px; font-weight: 300; } .my_page_snb .selected { text-decoration:underline; } .my_page_snb .selected a { color:#333; font-weight:400; } /* 마이페이지 컨텐츠 공통 */ .my_page_contents { float: left; width: 980px; } /* 마이페이지 메인(/mypage/mypage.php) */ #mypage .my_info { overflow: hidden; background:#f7f7f7;} #mypage .my_info .name { position:relative; float:left; padding:30px 0 30px 50px; width:28%; font-size:25px; font-weight:100;} #mypage .my_info .name:after {content:''; display:block; position:absolute; top: calc( 50% - 25px ); right:0; width:1px; height:50px; background:#ccc;} #mypage .my_info .name span { display: block; font-size:25px; font-weight:100; } #mypage .my_info .name strong {font-size:25px; font-weight:400;} #mypage .my_info .own {float:left; width:72%;} #mypage .my_info ul {display:table; width:100%; margin:0 auto;} #mypage .my_info ul li {display:table-cell; position:relative; width:25%; padding:40px 0 35px; text-align:center;} #mypage .my_info ul li a {display:block; color:#888; font-size:16px; font-weight:300; letter-spacing:-1px;} #mypage .my_info ul li strong {display:block; padding: 5px 0 0; font-size:25px; font-weight:400;} #mypage .my_info ul li span {font-size:18px; font-weight:300;} #mypage .my_menu { overflow: hidden; margin: 20px 0 0; } #mypage .my_menu li {float:left; margin-left:20px;} #mypage .my_menu li:first-child {margin-left:0;} #mypage .my_menu li a {display:block; position:relative; width:313px; height:80px; padding:0 30px 0 57px; border:1px solid #ccc; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/mypage/my_menu_wish.gif') no-repeat left 30px center; font-size:18px; font-weight:300; line-height:78px;} #mypage .my_menu li .count {position:absolute; top: calc( 50% - 24px); right:30px; width:48px; height:48px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:#404040; color:#fff; font-size:20px; font-weight:300; text-align:center; line-height:48px;} #mypage .my_menu li.counsel a {padding-left:30px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/mypage/my_menu_arrow.gif') no-repeat right 30px center;} #mypage h3.title { margin: 80px 0 10px; } #mypage .latest {width:100%;} #mypage .latest li {display:inline-block; width:12%; margin-bottom:10px; text-align:center;} #mypage .latest li img {width:96%; height:auto;} /* 마이페이지 My Clip 메뉴 (/content/content.php?cont=mybrand & /content/content.php?cont=mycontents & /mypage/wish_list.php) */ .tab_clip { margin: 0 0 80px; } .tab_clip ul { text-align: center; } .tab_clip ul li { display: inline-block; margin:0 20px;} .tab_clip ul li a { display:inline-block; padding: 5px 10px 0; color:#888; font-size:14px; } .tab_clip ul li a.active { border-bottom:1px solid #404040; color:#404040; font-weight:600; } /* 주문내역조회(/mypage/order_list.php) */ #order_list { float: left; width: 980px; } #order_list .title_area { overflow: hidden; margin: 15px 0 10px; } #order_list h3 { float: left; color: #333; font-size: 16px; font-weight: 400; } #order_list .info { float: right; color: #888; font-size: 14px; font-weight: 300; } #order_list .search { text-align: right; } #order_list .search .date { display: inline-block; } #order_list .search .date p { display: inline-block; } #order_list .search .date p input[type="button"] { height: 34px; border: 0; background: transparent; outline: 0; } #order_list .search .date p input[type="button"]:hover { text-decoration: underline; cursor: pointer; } #order_list .search .date p.on input[type="button"] { text-decoration: underline; } #order_list .search .date_input {display:inline-block; margin: 0 0 0 10px; vertical-align:top; line-height:34px;} #order_list .search .date_input input[type=text] { width: 110px; } #order_list .search .box_btn { margin: 0 0 0 5px ; } /* 주문상세조회(/mypage/order_detail.php) */ #order_detail .stat {padding-bottom:20px; font-size:0; text-align:center;} #order_detail .stat li {display:inline; padding:0 5px;} #order_detail .trace {padding-top:20px;} #order_detail .trace .number {padding-left:10px; line-height:35px;} #order_detail .order_info { overflow: hidden; } #order_detail .area_left {float:left; width:63%;} #order_detail .area_right {float:right; margin: 30px 0 0;} #order_detail .area_right .box {width:360px; padding:40px; background:#f8f8f8;} #order_detail .area_right .box .line {padding: 30px 0 0; border-top:1px solid #dfdfdf;} #order_detail .total_price {font-size:14px;} #order_detail .backtolist {padding:30px 0; text-align:center;} #order_detail .crema-new-review-link { padding: 3px 5px; border: 1px solid #dcdcdc; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } #order_detail .crema-new-review-link:hover { background: #dcdcdc; } /* 주문상세조회(/mypage/order_detail.php) - 결제수단변경 레이어 */ .chg_paytype {overflow:auto; position:fixed; left:50%; top:50%; z-index:100; width:1100px; height:720px; margin:-360px 0 0 -550px; padding:20px 40px 40px 40px; background-color:#fff;} .chg_paytype h2 {padding-bottom:20px; border-bottom:1px solid #535353; font-size:18px; font-weight:bold;} .chg_paytype h3 {padding:30px 0 15px; font-size:13px; font-weight:bold;} .chg_paytype .explain {margin-bottom:30px; padding:20px 0; border-bottom:1px solid #dcdcdc;} .chg_paytype .explain > li {padding-left:25px; background:url('http://sw.wisaweb.co.kr/wm_engine_SW/_manage/image/common/icon_info.png') no-repeat left center; color:#888; line-height:2;} .chg_paytype .sum {float:left; width:58.82%; text-align:left;} .chg_paytype .select {float:right; width:35.29%; text-align:left;} .chg_paytype .select .type {padding:30px; background-color:#f5f5f5;} .chg_paytype .select .type > li {padding:5px 0;} .chg_paytype .select .type > li > label {color:#666; cursor:pointer;} .chg_paytype .select .type > li > label > input {position:relative; top:-3px;} .chg_paytype .select .msg {margin-top:20px; padding:20px; border:1px solid #e5e5e5;} .chg_paytype .select .msg > li {color:#888; letter-spacing:-1px;} .chg_paytype .select .btn {padding-top:10px;} .chg_paytype .select .btn > span {margin-top:10px;} .chg_paytype .sum table {table-layout:fixed; width:100%; margin:0 auto; border-top:1px solid #e0e0e0;} .chg_paytype .sum table * {font-size:13px;} .chg_paytype .sum table th {padding:15px; border:1px solid #e0e0e0; border-width:0 1px 1px 0; font-weight:normal; text-align:left; vertical-align:middle;} .chg_paytype .sum table td {padding:15px; border-bottom:1px solid #e0e0e0; text-align:left; vertical-align:middle;} .chg_paytype .sum table td .price {font-family:'arial'; font-size:16px;} .chg_paytype .select h3:first-child, .chg_paytype .sum h3:first-child {padding-top:0;} .chg_paytype .close {display:block; position:absolute; right:40px; top:20px; width:20px; height:20px; text-indent:-9999px; cursor:pointer;} .chg_paytype .close:before {position:absolute; right:0px; top:10px; width:20px; height:1px; background-color:#000; transform:rotate(45deg); content:'';} .chg_paytype .close:after {position:absolute; right:0px; top:10px; width:20px; height:1px; background-color:#000; transform:rotate(-45deg); content:'';} .chg_paytype:after {display:block; clear:both; content:'';} /* 쿠폰(/mypage/coupon_down_list.php) */ #coupon h3.title:first-child {padding-top:0;} /* 소셜쿠폰(/mypage/sccoupon.php) */ #sccoupon .box_mp .form_input {width:270px; margin-top:20px;} #sccoupon .btn {text-align:center;} #sccoupon .btn span { margin: 0 5px; } /* 관심상품(/mypage/wish_list.php) */ #wish_list .btn {padding-top:30px; font-size:0; text-align:left;} #wish_list .btn .box_btn {margin-right:5px;} #wish_list .btn .box_btn.fr {margin-right:0;} /* 1:1문의 내역(/mypage/counsel_list.php & /mypage/order_detail.php) */ #counsel .content {padding:30px; border-bottom:1px solid #aeaeae; text-align:left; word-break:break-all; word-wrap:break-word;} #counsel .content .question {padding-bottom:25px;} #counsel .none_style {margin:0; padding:0; border:0;} #counsel .cnt_hidden {display:none; overflow:hidden; padding:20px; border-bottom:1px solid #d7d7d7;} #counsel .cnt_hidden .qna_subject {clear:both; float:left; width:10%; padding:10px 0; color:#181818; font-weight:bold; text-align:left; vertical-align:top;} #counsel .cnt_hidden .qna_cnt {float:left; width:90%; padding:10px 0; text-align:left; vertical-align:top;} #counsel .btn {padding-top:30px; font-size:0; text-align:left;} #counsel .btn .box_btn {margin-right:5px;} #counsel .btn .box_btn.fr {margin-right:0;} /* 1:1문의 글쓰기(/mypage/counsel_step1.php) */ #counsel_write textarea {height:250px;} #counsel_write td .attachment_limit { display: block; margin: 5px 0 0;} #counsel_write .btn {margin-top:30px; text-align:center;} #counsel_write .btn span { margin: 0 5px; } /* 1:1문의 완료(/mypage/counsel_step2.php) */ #counsel_fin .box {padding:80px 0; border:1px solid #dedede; color:#888; font-size:14px; text-align:center; line-height:3;} #counsel_fin .box strong {font-size:inherit;} #counsel_fin .btn {margin-top:30px; text-align:center;} /* 출석체크(/mypage/attend_list.php) */ #attend .date {padding:25px 0; border:1px solid #dbdbdb; border-bottom:0; text-align:center; vertical-align:top;} #attend .date a {display:inline-block; width:18px; height:18px; border:1px solid #dbdbdb; background-repeat:no-repeat; background-position:center;} #attend .date a.prev {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_arrow_prev.png');} #attend .date a.next {background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_arrow_next.png');} #attend .date strong {padding:0 5px; color:#040404; font-family:'arial'; font-size:20px; line-height:20px; text-align:center; vertical-align:top;} #attend #calendar table {width:100%;} #attend #calendar table thead th {padding:10px 0; border:1px solid #dbdbdb; background:#fbfbfb; color:#666; font-family:'arial'; font-weight:normal; text-align:center;} #attend #calendar table thead th.sun {color:#d53838;} #attend #calendar table thead th.sat {color:#7cb4d1;} #attend #calendar table tbody td {height:100px; padding:10px; border:1px solid #dbdbdb; color:#040404; text-align:left; vertical-align:top;} #attend #calendar .attenY {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/mypage/attend_ok.png') no-repeat center;} #attend #calendar .attenR {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/mypage/attend_today.png') no-repeat center #fbf9ed; font-weight:bold; text-decoration:underline;} #attend .info {overflow:hidden; padding:30px 50px; border:1px solid #dbdbdb; border-top:0; background:#fbfbfb; text-align:left;} #attend .info .explain {float:left; text-align:left;} #attend .info .sum {float:right;} /* 회원탈퇴(/mypage/withdraw_step1.php), 회원탈퇴완료(/mypage/withdraw_step2.php) */ .withdraw .box {padding:60px 0; background:#f5f5f5; text-align:center;} .withdraw .msg {margin-bottom:10px; color:#666;} .withdraw .frame {width:50%; margin:0 auto;} .withdraw .frame textarea {height:250px; margin-top:10px;} .withdraw .btn {padding-top:30px; text-align:center;} .withdraw .btn span { margin: 0 5px; } /*-----------------------------------------------------------------*/ /* 4-5. 추가페이지 /*-----------------------------------------------------------------*/ /* 이용약관(/content/content.php?cont=uselaw) */ #uselaw li {color:#666; line-height:1.6;} #uselaw li * {color:inherit; font:inherit;} #uselaw > ol.inframe {padding:0 15px;} #uselaw > ol > li > dl > dt {padding:20px 0 10px; color:#404040; font-weight:bold;} #uselaw > ol > li > dl > dd {padding:0 0 10px 10px;} #uselaw > ol > li > dl > dd > ul, #uselaw > ol > li > dl > dd > ol {padding:5px 0 5px 15px;} #uselaw > ol > li > dl > dd li {padding:5px 0;} /* 개인정보취급방침(/content/content.php?cont=privacy) */ #privacy.inframe {padding:15px;} #privacy p, #privacy li {color:#666; line-height:1.6;} #privacy li * {color:inherit; font:inherit;} #privacy li > ol, #privacy li > ul {padding-left:10px;} #privacy > ol > li > dl > dt {padding:20px 0 10px; color:#404040; font-weight:bold;} #privacy > ol > li > dl > dd {padding:0 0 10px 10px;} #privacy > ol > li > dl > dd > ul, #privacy > ol > li > dl > dd > ol {padding:5px 0 5px 15px;} #privacy > ol > li > dl > dd li ul, #privacy > ol > li > dl > dd li ol {padding:5px 0 5px 10px;} #privacy > ol > li > dl > dd table {table-layout:fixed; width:100%; margin:10px 0;} #privacy > ol > li > dl > dd table th {padding:10px; border:1px solid #ddd; background:#f7f7f7; color:#404040; text-align:center; vertical-align:middle;} #privacy > ol > li > dl > dd table td {padding:10px; border:1px solid #ddd; background:#fff; font-size:12px; text-align:center; vertical-align:middle;} /* 이용안내(/content/content.php?cont=guide) */ #guide .tab {text-align:center;} #guide .tab li {display:inline;} #guide .tab li a {padding:0 15px;} #guide .tab li a:hover {text-decoration:underline;} #guide > dl > dt {padding:30px 0 10px; font-weight:bold;} #guide > dl > dd {padding-left:10px; color:#666;} #guide > dl > dd > ul, #guide > dl > dd > ol {padding-left:10px; color:#666;} /* 회사소개(/content/content.php?cont=company) */ #company {padding-top:300px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/company.jpg') no-repeat left top/100% auto; text-align:left;} #company:after {display:block; clear:both; content:'';} #company dl {float:left; width:30%;} #company dl:nth-child(2) {margin:0 5%;} #company dl > dt {padding:30px 0 10px; font-size:14px; font-weight:bold;} #company dl.location {clear:both; float:none; width:100%;} /* 고객센터(/content/customer.php) */ #customer .cs_menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } #customer .cs_menu li {width:224px; height:224px; border:1px solid #ccc; text-align:center;} #customer .cs_menu li a {display:block; padding:120px 0 70px; font-size:20px; font-weight:100;} #customer .cs_menu li.faq a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_faq.png') no-repeat top 77px center;} #customer .cs_menu li.news a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_news.png') no-repeat top 77px center;} #customer .cs_menu li.benefit a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_benefit.png') no-repeat top 77px center;} #customer .cs_menu li.counsel a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_counsel.png') no-repeat top 77px center;} #customer .cs_menu li.suggest a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_suggest.png') no-repeat top 77px center;} #customer .cs_menu li:hover {border-color:#404040;} #customer .cs_menu li:hover a {color:#fff;} #customer .cs_menu li.faq:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_faq_on.png') no-repeat top 77px center #404040;} #customer .cs_menu li.news:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_news_on.png') no-repeat top 77px center #404040;} #customer .cs_menu li.benefit:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_benefit_on.png') no-repeat top 77px center #404040;} #customer .cs_menu li.counsel:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_counsel_on.png') no-repeat top 77px center #404040;} #customer .cs_menu li.suggest:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_suggest_on.png') no-repeat top 77px center #404040;} #customer .teltime { margin: 70px 0 0; } #customer .teltime > p { text-align: center; } #customer .teltime .tel a { display: block; font-size: 25px; } #customer .teltime .time span {display:inline-block; position:relative; padding:0 10px; color:#888; font-size:16px; font-weight:300;} #customer .teltime .time .line::before { content:''; display:block; position:absolute; top: calc(50% - 5px); left:0; width:1px; height:10px; background:#b8b8b8; } #customer .genuine_product { font-size: 18px; } #customer .genuine_product strong { font-size: 18px; } #customer .wrap_area {overflow: hidden;} #customer .wrap_area .left_area { float: left; width:560px;} #customer .wrap_area .right_area { float: right; width:560px;} #customer .wrap_area .title { position: relative; margin:90px 0 0; padding: 0 0 15px; font-size:25px; font-weight:100; border-bottom: 1px solid #404040; } #customer .wrap_area .title .btn_more { display:inline-block; position:absolute; top: calc(50% - 13px); right:0; width:25px; height:25px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_more.png') no-repeat center; text-indent: -9999rem;} #customer .tbl_cs_board { border-top: 0; } #customer .bank {margin:100px 0 0; padding:0 40px; background:#f7f7f7;} #customer .bank .title {margin:0; padding:30px 0 15px; border-bottom: 0;} #customer .bank ul { overflow: hidden; padding: 0 0 25px; } #customer .bank li { float: left; padding: 0 0 10px; width:50%; } #customer .bank li .bank_name { display:inline-block; width:30%; font-size: 14px; font-weight:300; } #customer .bank .account_holder { font-size: 16px; font-weight: 500; } #customer .my_menu { overflow: hidden; margin-top:24px;} #customer .my_menu li { float:left; width:125px; height:125px; margin-left:20px; border:1px solid #f7f7f7; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; text-align:center; -ms-border-radius:100%; -o-border-radius:100%; } #customer .my_menu li:first-child {margin-left:0;} #customer .my_menu li a { display:block; padding:72px 0 29px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; font-size:14px; font-weight:300; -ms-border-radius:100%; -o-border-radius:100%; } #customer .my_menu li.order a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_order.png') no-repeat top 33px center;} #customer .my_menu li.return a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_return.png') no-repeat top 33px center;} #customer .my_menu li.nomember a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_nomember.png') no-repeat top 36px center;} #customer .my_menu li.point a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_point.png') no-repeat top 33px center;} #customer .my_menu li:hover {border-color:#404040;} #customer .my_menu li:hover a {color:#fff;} #customer .my_menu li.order:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_order_on.png') no-repeat top 33px center #404040;} #customer .my_menu li.return:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_return_on.png') no-repeat top 33px center #404040;} #customer .my_menu li.nomember:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_nomember_on.png') no-repeat top 36px center #404040;} #customer .my_menu li.point:hover a {background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/cs_menu_point_on.png') no-repeat top 33px center #404040;} /*-----------------------------------------------------------------*/ /* 5. ETC /*-----------------------------------------------------------------*/ /* 댓글 - 리스트(게시판, 상품리뷰) */ .list_comment {position:relative; text-align:left;} .list_comment ul {border:1px solid #e5e5e5; border-top:0;} .list_comment ul > li {clear:both; overflow:hidden; padding:15px 30px; border-top:1px solid #e5e5e5; color:#474645; word-break:break-all; word-wrap:break-word;} .list_comment ul > li .name {float:left; width:12%;} .list_comment ul > li .name a {color:inherit; font-size:inherit;} .list_comment ul > li .content {float:left; width:73%;} .list_comment ul > li .date {float:right; width:15%; text-align:right;} .list_comment ul > li .date span {padding-right:5px; color:#888;} .list_comment ul > li .date img {margin-top:3px;} /* 댓글 - 쓰기(게시판, 상품리뷰) */ .write_comment {overflow:hidden; margin-top:-1px; padding:20px; border:1px solid #e5e5e5; background:#fff;} .write_comment .user {overflow:auto; padding-bottom:10px; text-align:left;} .write_comment .user span {float:left; width:50%;} .write_comment .user span.name {padding-right:5px;} .write_comment .user span.pw {padding-left:5px;} .write_comment .inputbox {position:relative; padding-right:70px; border:1px solid #e2e2e2; background:#fafafa; text-align:left;} .write_comment .inputbox textarea.form_input {height:60px; border:0; border-right:1px solid #e2e2e2;} .write_comment .inputbox .btn_comment {display:inline-block; position:absolute; right:0; top:0; width:70px; height:100%; text-align:center; border:0; background:#fafafa; font-weight:bold; line-height:100%; cursor:pointer;} .cmtWrite + #boardlist{ margin: 60px 0 0; border-top: 1px solid #e0e0e0; padding: 30px 0 0; } /* 게시판 - 상품연동 - 검색 */ #product_search_frm {background:#fff;} #product_search_frm .frame {min-height:600px; margin:10px;} #product_search_frm .frame .search {padding-bottom:10px;} #product_search_frm .frame .btn {padding:15px 0 10px 0; text-align:center;} /* 게시판 - 상품연동 - 쓰기 */ .related_prd_write {padding:20px 0;} .related_prd_write > ul {margin:20px 0;} /* 게시판 - 상품연동 - 열람 */ .related_prd_view {border-bottom:1px solid #e0e0e0;} .related_prd_view > .title {padding:60px 0 30px; font-size:22px; font-weight:500; text-align:center;} /* 게시판 - 이벤트 (/board/?db=gallery_1) */ .gallery_1 { width: 1460px; margin: 0 auto; } /* 게시판 - COMMUNITY (/board/?db=gallery_2) */ .gallery_2 { width: 1460px; margin: 0 auto; } /* 게시판 - 매거진 메인 (/board/?db=gallery_3) */ .gallery_3 { width: 1460px; margin: 0 auto; } /* 게시판 - notice (/board/?db=basic_1) */ .basic_1 { width: 1320px; margin: 0 auto; } /* 게시판 - faq (/board/?db=basic_2) */ .basic_2 { width: 1320px; margin: 0 auto; } /* 게시판 - 당첨자발표 (/board/?db=basic_3) */ .basic_3 { width: 1320px; margin: 0 auto; } /* 게시판 - 제휴/입점문의 (/board/?db=basic_4) */ .basic_4 { width: 1320px; margin: 0 auto; } /* 게시판 - 제휴/입점문의 (/board/?db=basic_4) */ .basic_5 { width: 1320px; margin: 0 auto; } /* 게시판 - 제휴/입점문의 (/board/?db=basic_4) */ .basic_6 { width: 1320px; margin: 0 auto; } /* content - 회원등급 (/content/content.php?cont=membership) */ #membership h3 { font-size: 30px; font-weight: 300; text-align: center; } #membership .tbl_membership { margin: 25px 0 0; width: 100%; border-top: 2px solid #404040; } #membership .tbl_membership tbody th { border-bottom: 1px solid #ddd; background: #fbfbfb; font-size: 16px; font-weight: 300; text-align: center; vertical-align: middle; } #membership .tbl_membership tbody td { border-bottom: 1px solid #ddd; padding: 38px 0; color: #404040; font-size: 14px; text-align: center; vertical-align: middle; } #membership .tbl_membership tbody td .txt { display: block; font-size: 13px; line-height: 1.2; } #membership .notice dt { margin: 80px 0 25px; padding-left: 30px; background: url("http://www.celeconh.com/_skin/sw_kor_210518/img/mypage/membership_notice.png") no-repeat left 2px; font-size: 25px; font-weight: bold; line-height: 1; } #membership .notice dd { position: relative; padding: 5px 0 5px 15px; color: #888; font-size: 14px; line-height: 1.4; } #membership .notice dd:before { content: ''; display: block; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius: 50%; background: #888; } /* content - 브랜드 메인 (/content/content.php?cont=brand_main) */ #brand_main .brand_bnr .slick-slide{ width: 620px; } #brand_main .brand_bnr .slick-slide a{ position: relative; width: 100%; height: 100%; justify-content: center; align-items: center; display: block; } #brand_main .brand_bnr .slick-slide img{ width: 100%; height: 100%; } #brand_main .brand_bnr .slick-slide .brand_info{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: .3s all ease; } #brand_main .brand_bnr .slick-slide a .brand_info:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: block; content: ''; } #brand_main .brand_bnr .slick-slide .brand_info h4, #brand_main .brand_bnr .slick-slide .brand_info p{ position: relative; font-size: 16px; line-height: 20px; color: #fff; opacity: 0; z-index: 1; transition: .4s all ease; -webkit-transition: .4s all ease; -moz-transition: .4s all ease; -ms-transition: .4s all ease; -o-transition: .4s all ease; } #brand_main .brand_bnr .slick-slide .brand_info h4{ font-size: 24px; line-height: 31px; opacity: 1; transform: translateY(80px) skew(20deg); } #brand_main .brand_bnr .slick-slide .brand_info p{ width: 100%; height: 60px; overflow: hidden; margin-top: 10px; font-weight: 300; opacity: 1; transform: translateY(80px) skew(20deg); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } #brand_main .brand_bnr .slick-slide a:hover .brand_info{ opacity: 1; } #brand_main .brand_bnr .slick-slide a:hover .brand_info h4{ transform: translateY(0) skew(0deg); } #brand_main .brand_bnr .slick-slide a:hover .brand_info p{ transform: translateY(0) skew(0deg); -webkit-transform: translateY(0) skew(0deg); -moz-transform: translateY(0) skew(0deg); -ms-transform: translateY(0) skew(0deg); -o-transform: translateY(0) skew(0deg); } #brand_main .brand_bnr .slick-arrow { position:absolute; top: calc(50% - 40px); width:41px; height:80px; z-index:5; } #brand_main .brand_bnr .slick-prev {left: 5%; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_prev.png')no-repeat center;} #brand_main .brand_bnr .slick-next {right: 5%; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/slide_next.png')no-repeat center;} #brand_main .mysearch:after {display:block; clear:both; content:'';} #brand_main .mysearch .mybrand {float:left; width:350px;} #brand_main .mysearch .mybrand .title {margin-bottom:25px; padding-left:30px; background:url('http://www.celeconh.com/_skin/sw_kor_210518/img/shop/icon_wish.png') no-repeat left center; font-size:25px; font-weight:300; line-height:40px;} #brand_main .mysearch .mybrand .wrap_mybrand {height:120px; overflow-y: auto; /* Firefox scrollbar */ scrollbar-width: thin; scrollbar-color: #000 #ccc; } /* webkit scrollbar */ #brand_main .mysearch .mybrand .wrap_mybrand::-webkit-scrollbar { width: 10px;} #brand_main .mysearch .mybrand .wrap_mybrand::-webkit-scrollbar-thumb { background-color: #000; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } #brand_main .mysearch .mybrand .wrap_mybrand::-webkit-scrollbar-track { background-color: #ccc; border-radius: 10px; box-shadow: inset 0px 0px 5px white; } #brand_main .mysearch .mybrand .wrap_mybrand .msg p {padding:26px 0 14px; font-size:16px; font-weight:300;} #brand_main .mysearch .mybrand .wrap_mybrand .msg .box_btn * {height:40px; padding:0 16px; line-height:40px;} #brand_main .mysearch .mybrand .wrap_mybrand .tbl_brand_list tr {border-bottom:1px solid #eee;} #brand_main .mysearch .mybrand .wrap_mybrand .tbl_brand_list td {padding:10px 60px 10px 0; border-left:0;} #brand_main .mysearch .mybrand .wrap_mybrand .tbl_brand_list td, #brand_main .mysearch .mybrand .wrap_mybrand .tbl_brand_list td * {color:#404040;} #brand_main .mysearch .mybrand .wrap_mybrand .tbl_brand_list td .btn_brand_wish {right:30px;} #brand_main .mysearch .searchbrand {float:right; width:645px; text-align:right;} #brand_main .mysearch .searchbrand .search {display:inline-block; *display:inline; *zoom:1; vertical-align:bottom;} #brand_main .mysearch .searchbrand .search .box {position:relative; width:300px; height:49px; padding-left:20px; border-bottom:1px solid #000;} #brand_main .mysearch .searchbrand .search .box .form_input.basic_search {width:100%; height:48px; padding:0 15px; border:0; font-size:18px; font-weight:300; line-height:48px;} #brand_main .mysearch .searchbrand .search .box .btn {position:absolute; top:50%; left: 0; width:20px; height:23px; margin-top:-11.5px;} #brand_main .mysearch .searchbrand .topnewbrand {display:inline-block; *display:inline; *zoom:1; margin-left:75px; vertical-align:bottom;} #brand_main .mysearch .searchbrand .topnewbrand ul li {float:left; margin-left:30px; text-align:center;} #brand_main .mysearch .searchbrand .topnewbrand ul li:first-child {margin-left:0;} #brand_main .mysearch .searchbrand .topnewbrand ul li a {display:block; padding:27px 24px; border:1px solid #404040; font-size:20px; font-weight:300;} #brand_main .mysearch .searchbrand .topnewbrand ul li a:hover, #brand_main .mysearch .searchbrand .topnewbrand ul li a.active {background:#404040; color:#fff;} #brand_main .big_category {margin:96px 0 40px;} #brand_main .big_category ul {font-size:0; text-align:center;} #brand_main .big_category ul li {display:inline-block; padding:0 29px;} #brand_main .big_category ul li a {display:block; height:22px; color:#888; font-size:20px; font-weight:300; line-height:22px;} #brand_main .big_category ul li.active a {border-bottom:1px solid #404040; color:#404040; font-weight:400;} #brand_main .spelling_search {padding:24px 80px; background:#f7f7f7;} #brand_main .spelling_search .name_search {padding:10px 0;} #brand_main .spelling_search .name_search dl {font-size:0;} #brand_main .spelling_search .name_search dl dt {display:inline-block; position:relative; padding-right:21px; font-size:16px;} #brand_main .spelling_search .name_search dl dt:before {display:block; position:absolute; right:0; top:50%; width:1px; height:10px; margin-top:-3px; background:#404040; content:'';} #brand_main .spelling_search .name_search dl dd {display:inline-block; padding:0 10px;} #brand_main .spelling_search .name_search dl dd a {display:block; height:21px; line-height:21px;} #brand_main .spelling_search .name_search dl dd a.active {border-bottom:1px solid #404040;} #brand_main .spelling_search .eng_search dl dt {font-weight:600;} #brand_main .spelling_search .kor_search dl dt {font-weight:500;} #brand_main .brand_result_list .big_spelling {padding:51px 0 11px; font-size:20px; font-weight:600;} #brand_main .brand_result_list:first-child .big_spelling {padding-top:31px;} /* content - BEST100 (/content/content.php?cont=best100) */ #best100 .besttab {margin-bottom:80px;} #best100 .besttab ul {font-size:0; text-align:center;} #best100 .besttab ul li {display:inline-block; padding:0 29.5px;} #best100 .besttab ul li a {display:block; height:36px; font-size:20px; font-weight:600; line-height:36px;} #best100 .besttab ul li.mybrand a {padding-left:29px; background:url('https://celecon.com/_skin/celecon_kor_4/img/etc/best_mybrand.png') no-repeat left center;} #best100 .besttab ul li a.active {border-bottom:1px solid #404040;} #best100 .best_prd .best_toparea {margin-bottom:100px; padding-bottom:40px; background:#f7f7f7;} #best100 .best_prd .best_toparea .bigcate {padding:77px 0 40px;} #best100 .best_prd .best_toparea .bigcate ul:after {display:block; clear:both; content:'';} #best100 .best_prd .best_toparea .bigcate ul li {float:left; margin-left:59px;} #best100 .best_prd .best_toparea .bigcate ul li:first-child {margin-left:0;} #best100 .best_prd .best_toparea .bigcate ul li a {display:block; height:16px; color:#888; font-size:14px; line-height:16px;} #best100 .best_prd .best_toparea .bigcate ul li a.active {border-bottom:1px solid #6d6d6d; color:#404040; font-weight:600;} #best100 .list_bestprd .prd_basic > li {background:transparent;} #best100 .list_bestprd .prd_basic.col5 {margin-left:-30px;} #best100 .list_bestprd .prd_basic.col5 > li {padding-left:30px;} #best100 .list_bestprd .prd_basic .box .img .best_icon {display:block;} #best100 .list_bestprd .prd_basic.col3 .box .img .best_icon {width:60px; height:60px; font-size:20px; font-weight:300; line-height:60px;} #best100 .list_bestprd .prd_basic.col4 .box .name {padding-top:9px;} @media only screen and (max-width:1460px) { /* 게시판 - 이벤트 */ .gallery_1 { width: 1280px; } /* 게시판 - COMMUNITY */ .gallery_2 { width: 1280px; } /* 게시판 - 매거진 */ .gallery_3 { width: 1280px; } /* 게시판 - notice */ .basic_1 { width: 1280px; } /* 게시판 - faq */ .basic_2 { width: 1280px; } /* 게시판 - 당첨자발표 */ .basic_3 { width: 1280px; } /* 게시판 - 제휴/입점문의 */ .basic_4 { width: 1280px; } /* content - 브랜드 메인 */ /* #brand_main .spelling_search {padding:24.5px 120px;} #brand_main .mysearch .mybrand {width:612px;} #brand_main .mysearch .searchbrand {width:576px;} #brand_main .mysearch .searchbrand .search .box {width:240px;} #brand_main .mysearch .searchbrand .topnewbrand {margin-left:45px;} */ } #detail .wrap_info .detail_title { margin-bottom: 20px; padding: 20px 0; border-bottom: 1px solid #404040; font-size: 16px; font-weight: 400; text-align: left; line-height: 1; } /* 게시판 - noticeToggle */ #boardview .boxview .board_notice { padding: 60px 220px; background: #f4f4f4; } #boardview .boxview .board_notice h4 { position: relative; overflow: hidden; } #boardview .boxview .board_notice h4 a { padding: 0 0 0 25px; font-size: 20px; font-weight: 500; text-transform: uppercase; } #boardview .boxview .board_notice h4 a::before { content: ''; position: absolute; top: calc( 50% - 11px ); left: 0; width: 20px; height: 20px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/etc/membership_notice.png') no-repeat center/ 18px; } #boardview .boxview .board_notice h4 a:hover { border-bottom: 1px solid #404040; } #boardview .boxview .board_notice h4 a span { float: right; width: 20px; height: 20px; background: url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bullet_scrolldown.png') no-repeat center/ 18px; text-indent: -9999rem; } /* 공지사항 1개 일때 */ #boardview .boxview #boardcnt_notice { display: none; } #boardview .boxview #boardcnt_notice dl { margin: 20px 0 0; } #boardview .boxview #boardcnt_notice dt { font-size: 15px; } #boardview .boxview #boardcnt_notice dd { position: relative; margin: 5px 5px 0 5px; padding: 0 0 0 20px; font-size: 15px; } #boardview .boxview #boardcnt_notice dd::before { content: '•'; position: absolute; top: calc( 50% - 15px ); left: 0; width: 24px; height: 24px; font-size: 18px; } #boardview .boxview #boardcnt_notice ul { margin: 30px 0 0; } #boardview .boxview #boardcnt_notice li { margin: 5px 5px 0 5px; font-size: 15px; } #boardview .boxview #boardcnt_notice .primary { margin: 30px 0 0; font-size: 15px; } /* 공지사항 여러개개 일때 */ #boardview .boxview .notice_contents { display: none; } #boardview .boxview .notice_contents dl { margin: 20px 0 0; } #boardview .boxview .notice_contents dt { font-size: 15px; } #boardview .boxview .notice_contents dd { position: relative; margin: 5px 5px 0 5px; padding: 0 0 0 20px; font-size: 15px; } #boardview .boxview .notice_contents dd::before { content: '•'; position: absolute; top: calc( 50% - 15px ); left: 0; width: 24px; height: 24px; font-size: 18px; } #boardview .boxview .notice_contents ul { margin: 30px 0 0; } #boardview .boxview .notice_contents li { margin: 5px 5px 0 5px; font-size: 15px; } #boardview .boxview .notice_contents .primary { margin: 30px 0 0; font-size: 15px; } /* 공지사항 시작이 오픈 일때 */ #boardview .boxview .open_notice { display: block; } /*통합회원 메인*/ .integration{max-width:375px; margin:0 auto; padding:100px 18px 0 18px;} .integration .title{text-align: center;padding-bottom: 20px;} .integration .title .logo{font-size: 25px; color: #000;} .integration .title .txt{font-size: 25px; font-weight: 700; color: #000;} .integration .subtitle{font-size: 23px; text-align: center; color: #333; font-weight: 700; margin-bottom: 10px;} .integration .info{} .integration .info .image_wrap{text-align: center; padding:10px 0 20px 0;} .integration .info .image_wrap img{} .integration .description{text-align: center; margin-bottom: 30px; font-size: 15px; color: #333; line-height: 25px;} .integration .description .sub{color:#666; font-size:15px;} .integration .benefit{} .integration .benefit .bnf01{margin-top: 46px;} .integration .benefit .coupon01.col1{} .integration .benefit .coupon01.col1 ul{margin-left: 0;} .integration .benefit .coupon01.col1 li{float: none; width: 100%;} .integration .benefit .coupon01.col1 li > div{margin-left: 0; padding:0 55px;} .integration .benefit .coupon01.col1 li .box{height: 140px; padding:30px 0; background-color: #F9E571;} .integration .benefit .coupon01.col1 li .box .tit{font-size: 17px; font-weight: 500; color: #333; text-decoration: underline;} .integration .benefit .coupon01.col1 li .box .desc{font-size: 32px; color: #333;} .integration .benefit .coupon01{} .integration .benefit .coupon01 ul{margin-left: -10px;} .integration .benefit .coupon01 ul:after{content: ""; display: block; clear: both;} .integration .benefit .coupon01 li{float: left; width: 50%;} .integration .benefit .coupon01 li > div{margin-left: 10px;} .integration .benefit .coupon01 li .box{background-color: #000; border-radius: 5px; height: 100px; padding: 20px 0; user-select:none;} .integration .benefit .coupon01 li .box .tit{text-align: center; color: #fff; font-size: 12px; font-weight: 300; text-decoration: underline;} .integration .benefit .coupon01 li .box .desc{text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-top: 10px;} .integration .benefit .bnf02{margin-top: 46px;} .integration .benefit .coupon02{border-top: 2px solid #c5c5c5; border-bottom: 2px solid #c5c5c5; margin-bottom: 30px;} .integration .benefit .coupon02 ul{} .integration .benefit .coupon02 li{} .integration .benefit .coupon02 li > div{padding: 0 15px;} .integration .benefit .coupon02 li a{display: table; width: 100%; border-top: 1px solid #f2f2f2; height: 88px; position: relative;} .integration .benefit .coupon02 li a:before{content: "\276F"; position:absolute; top: 50%; right: 0; font-size: 13px; transform: translateY(-50%);} .integration .benefit .coupon02 li:first-child a{border-top: 0;} .integration .benefit .coupon02 li .txt{display: table-cell; width: 55%; font-size: 14px; color: #333; vertical-align: middle;} .integration .benefit .coupon02 li .txt span{font-size: 20px; font-weight: 700;} .integration .benefit .coupon02 li .img{display: table-cell; width: 45%; vertical-align: middle;} .integration .benefit .coupon02 li .img img{} .integration .notice{margin-top: 30px;} .integration .notice .tit{font-size: 16px; color: #333; margin-bottom: 10px;} .integration .notice .desc{} .integration .notice .desc ul{} .integration .notice .desc li{padding-left: 10px; position: relative; color: #333; font-size: 13px; line-height: 25px;} .integration .notice .desc li:before{content: ""; display: block; position: absolute; left: 0; top: 12px; width: 3px; height: 1px; background-color: #333;} .button_wrap{margin-top: 30px;} .button_wrap:after{content: ""; display: block; clear: both;} .button_wrap a{display: table; text-align: center; border-radius: 60px; border:1px solid #333; box-sizing: border-box; height:54px; width: 100%; overflow:hidden;} .button_wrap a > span{display: block; font-size: 16px; display: table-cell; vertical-align: middle; border-radius:60px;} .button_wrap a.sm > span{font-size: 14px; line-height: 18px;} .button_wrap a.black{border:1px solid #181824;} .button_wrap a.white{border:1px solid #333;} .button_wrap a.pink{border:1px solid #FF2C65;} .button_wrap a.primary{border:1px solid #181824;} .button_wrap a.black span{background-color: #181824; color: #fff;} .button_wrap a.white span{background-color: #fff; color: #333;} .button_wrap a.pink span{background-color: #FF2C65; color: #fff;} .button_wrap a.primary span{background-color: #181824; color: #fff;} .button_wrap input{display: block; text-align: center; border-radius: 60px; border:1px solid #333; box-sizing: border-box; height:54px; width: 100%; overflow:hidden; font-size: 16px; background-color:#333; cursor:pointer; color: #fff;} .button_wrap input.black{border:1px solid #181824; background-color: #181824; color: #fff;} .button_wrap input.white{border:1px solid #333; background-color: #fff; color: #333;} .button_wrap input.primary{border:1px solid #181824; background-color: #181824; color: #fff;} .button_wrap.col2 a, .button_wrap.col2 input{width: calc(50% - 5px); float: right;} .button_wrap.col2 a:first-child, .button_wrap.col2 input:first-child{float: left;} .button_wrap.row2 a, .button_wrap.row2 input{float: none; margin-top: 15px;} .button_wrap.row2 a:first-child, .button_wrap.row2 input:first-child{margin-top: 0;} .button_wrap .uline{font-size: inherit; text-decoration: underline;} .button_wrap > *:disabled{background-color: #c5c5c5 !important; color: #fff !important; border: 1px solid #c5c5c5 !important; cursor: not-allowed;} /*통합회원 약관*/ .chk_wrap{margin-top: 16px;} .chk_wrap:first-child{margin-top: 0;} .chk_wrap label{display: inline-block;} .chk_wrap label input[type="checkbox"]{vertical-align: middle; margin-right: 8px;} .chk_wrap label .txt{vertical-align: middle; font-size: 14px; color: #000;} .chk_wrap label .red{color: #FF2C65; font-size:14px;} .chk_wrap label .gray{color: #999999; font-size:14px;} .chk_wrap .btn_more{font-size: 14px; color: #000; font-weight: 500; border-bottom: 1px solid #000; float:right;} .integration .information{font-size: 12px; color: #999; word-break: keep-all; margin-top: 6px; margin-bottom: 20px;} .integration .agree_wrap{position:relative;} .integration .agree_wrap .agree_all{} .integration .agree_wrap .agree_all .chk_wrap label .txt{font-weight:700;} .integration .agree_wrap .agree_term{padding-top: 20px; border-top: 1px solid #ddd;} .integration .modal_term{position: absolute; top:-50px; left:0; z-index:1; width: 100%;} .integration .modal_term .btn_close{position: absolute; top: -30px; right: 0; width: 30px; height: 30px; background-color: #333; background-image: url('http://www.celeconh.com/_skin/sw_kor_210518/img/button/btn_close_white.png'); background-repeat: no-repeat; background-position: center;} .integration .modal_term .box{border:1px solid #333; padding:20px; background-color: #fff;;} .integration .modal_term .box .tit{font-size: 15px; color: #333; margin-bottom: 10px;} .integration .modal_term .box .textarea{white-space: pre-wrap; height: 225px; overflow-y: auto; background-color: #F9F9F9; font-size: 12px; color: #666; width:100%; /*padding:15px 20px;*/} /*통합회원 정보입력*/ #integration_form .table_wrap{margin-bottom: 50px;} .table_wrap{} .table_wrap table{width:100%; border-top:2px solid #000; border-bottom: 2px solid #000;} .table_wrap table thead{border-bottom: 2px solid #000;} .table_wrap table tbody{} .table_wrap table th, .table_wrap table td{height: 38px; text-align: center; vertical-align: middle; padding:9px 0;} .table_wrap table th{font-size: 14px; font-weight: 500; color: #333;} .table_wrap table td{border-top: 1px solid #C5C5C5; font-size: 13px;; font-weight: 400; color: #333;} .table_wrap table td .empty{color: #C5C5C5;} #integration_form .form_wrap{margin-top: 20px;} .inp_wrap{margin-top: 10px; position: relative;} .inp_wrap:after{content: ""; display: block; clear: both;} .inp_wrap:first-child{margin-top: 0;} .inp_wrap label{width: 95px; display: inline-block; vertical-align: middle; line-height: 48px; font-size: 14px; font-weight: 500; color: #333;} .inp_wrap input[type="text"], .inp_wrap input[type="email"], .inp_wrap input[type="password"], .inp_wrap input[type="tel"], .inp_wrap .form_input{width: 100%; display: inline-block; height: 48px; border:1px solid #c5c5c5; outline:0; padding: 14px; vertical-align:middle; font-size:14px;} .inp_wrap label + input[type="text"], .inp_wrap label + input[type="email"], .inp_wrap label + input[type="password"], .inp_wrap label + input[type="tel"], .inp_wrap label + .form_input {width: calc(100% - 95px);} .inp_wrap input[type="text"]:focus, .inp_wrap input[type="email"]:focus, .inp_wrap input[type="password"]:focus, .inp_wrap input[type="tel"]:focus{border-color:#333;} .inp_wrap input::placeholder{color: #c5c5c5;} .inp_wrap.addbtn{} .inp_wrap.addbtn input[type="text"], .inp_wrap.addbtn input[type="email"], .inp_wrap.addbtn input[type="password"], .inp_wrap.addbtn input[type="tel"], .inp_wrap.addbtn .form_input{width: calc(100% - 77px);} .inp_wrap.addbtn .btn_add{width: 70px; display: block; line-height: 46px; position: absolute; right: 0; top: 0; background-color: #181824; color: #fff; font-size: 14px; text-align: center; overflow: hidden; box-sizing: border-box; border:1px solid #181824; height: 48px; border-radius: 5px;} .inp_wrap.addbtn .btn_add.checked{font-size: 0; letter-spacing: -99999999px; background-repeat: no-repeat; background-position: center; background-image: url('http://www.celeconh.com/_skin/sw_kor_210518/img/member/btn_ok.png');} .inp_wrap.addbtn.addbtn2 .form_input{width:calc(100% - 123px);} .inp_wrap.addbtn.addbtn2 .btn_add{width:116px;} .inp_wrap .alert{font-size: 13px; color: #FF2C65; display: none; margin-top:5px;} .inp_wrap .inp_birthday{font-size:14px;} .inp_wrap .inp_birthday:after{content:""; display:block; clear:both;} .inp_wrap .inp_birthday .form_input{width:calc(33.3333% - 7px); float:left; margin-left:10px;} .inp_wrap .inp_birthday .form_input:first-child{margin-left:0;} .inp_wrap .inp_birthday .form_input:last-child{float:right;} .inp_wrap .inp_birthday select{width:calc(33.3333% - 7px); float:left; margin-left:10px; border:1px solid #c5c5c5; height:48px; padding-left: 10px;} .inp_wrap .inp_birthday select:focus{border:1px solid #333;} .inp_wrap .inp_birthday select:first-child{margin-left:0;} .inp_wrap .inp_birthday select:last-child{float:right;} .inp_wrap .inp_birthday select[disabled]{user-select: none; background-color: #E0E0DF;} /*통합회원가입*/ .integration#join_form{padding-top:0;} /* 마이페이 회원정보 입력 */ .cntbody.cnt_mypage h2.subtitle{margin-top: -5px;} .thirdtitle{font-size: 16px; font-weight: 500; color: #000; position: relative; padding-bottom: 8px; margin-bottom: 30px; margin-top: 50px;} .thirdtitle:first-child{margin-top: 0;} .thirdtitle:before{position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 2px; background-color: #000;} .radio_wrap, .check_wrap{} .radio_wrap .label_radio, .check_wrap .label_check{margin-left: 25px;} .radio_wrap .label_radio:first-child, .check_wrap .label_check:first-child{margin-left: 0;} .radio_wrap .label_radio input[type="radio"], .check_wrap .label_check input[type="checkbox"]{vertical-align: middle; margin-right: 5px;} .radio_wrap .label_radio input[type="radio"] + span, .check_wrap .label_check input[type="checkbox"] + span{font-size: 14px; color: #000; vertical-align: middle;} /* .form_wrap{margin-top: 50px;} .form_wrap:first-child{margin-top: 0;} */ .tbl1_wrap{} .tbl1_wrap .tr{display: table; width: 100%; border-top: 1px solid #E2E2E2;} .tbl1_wrap .tr:first-child{border-top: 0;} .tbl1_wrap .th{display: table-cell; width: 120px; font-size: 14px; color: #000; vertical-align: middle; height: 48px;} .tbl1_wrap .td{display: table-cell; font-size: 14px; color: #000; vertical-align: middle; height: 48px;} .radio_wrap_basic{} .radio_wrap_basic label{font-size: 14px; color: #000; vertical-align: middle; margin-left: 25px;} .radio_wrap_basic label:first-child{margin-left: 0;} .radio_wrap_basic label input[type="radio"]{vertical-align: middle; margin-right: 5px;} .inp_wrap.addbtn.addbtn2 .form_input{width:calc(100% - 123px);} .inp_wrap.addbtn.addbtn2 .btn_add{width:116px;} /* 약관 레이어 팝업 */ #skin_content_uselaw_big_div table #uselaw, #skin_content_privacy_big_div table #privacy{padding:15px 20px; min-width: auto; width: 100%;} /* loader */ #loadingImg{position:fixed; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.3);} .loader-40{width: 16px; height: 16px; border-radius: 50%; display: inline-block; position: absolute; background: #fff; box-shadow: -24px 0 #fff, 24px 0 #fff; animation: shadowPulse 2s linear infinite; top:50%; left:50%; transform:translate(-50%, -50%);} @keyframes shadowPulse { 33% { background: #fff; box-shadow: -24px 0 #ff3d00, 24px 0 #fff; } 66% { background: #ff3d00; box-shadow: -24px 0 #fff, 24px 0 #fff; } 100% { background: #fff; box-shadow: -24px 0 #fff, 24px 0 #ff3d00; } } #join_terms #privacy{width: 100%; min-width: auto;} /* 계산기 */ #calculator .c_btn, .c_btn.calculator_open {display:inline-block; vertical-align:middle; position:relative; width:270px; height:60px; background-color:#f65634; cursor:pointer; transition:0.2s; -webkit-transition:0.2s;} #calculator .c_btn:hover, .c_btn.calculator_open:hover {background-color:#515355;} #calculator .c_btn .cb_icon, .c_btn.calculator_open .cb_icon {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:60px; height:60px; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/icon_calculator.png'); background-repeat:no-repeat;} #calculator .c_btn .cb_icon:before, .c_btn.calculator_open .cb_icon:before {content:""; position:absolute; right:0; top:50%; width:1px; height:16px; margin-top:-8px; background-color:#fff; opacity:0.2;} #calculator .c_btn span, .c_btn.calculator_open span {display:block; position:relative; padding-left:60px; font-size:18px; color:#fff; letter-spacing:-0.5px; text-align:center;} .c_btn.calculator_open {position:absolute; left:0; bottom:0;} .c_btn.calculator_open.cart {position:relative; left:auto; bottom:auto; margin-right:10px;} .c_btn.calculator_open .cb_icon {background-position:center top;} #calculator .c_btn.calculator_send {width:250px; margin-top:40px; border-radius:30px; background-color:#f65634; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);} #calculator .c_btn.calculator_send .cb_icon {margin-left:10px; background-position:center;} #calculator .c_btn.calculator_send span {padding-left:90px; font-size:20px; text-align:left;} #calculator .c_btn.calculator_send span:after {content:""; position:absolute; right:20px; top:50%; width:10px; height:10px; margin-top:-5.5px; border-right:#fff solid 1px; border-bottom:#fff solid 1px; opacity:0.5; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #calculator .c_btn.calculator_re {width:250px; margin-top:20px; border-radius:30px; background-color:#f65634; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);} #calculator .c_btn.calculator_re .cb_icon {margin-left:10px; background-position:center bottom;} #calculator .c_btn.calculator_re span {padding-left:90px; font-size:20px; text-align:left;} #calculator .c_btn.calculator_re span:after {content:""; position:absolute; right:20px; top:50%; width:10px; height:10px; margin-top:-5.5px; border-right:#fff solid 1px; border-bottom:#fff solid 1px; opacity:0.5; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #calculator .c_popup {display:inline-block; vertical-align:middle; position:fixed; left:50%; top:-100%; z-index:999; width:1320px; height:500px; margin-top:-250px; margin-left:-660px; border-radius:5px 10px 10px 5px; background-color:#f6f6f6; box-shadow:0 50px 100px rgba(27, 28, 29, 0.3); opacity:0; transition:0.3s; -webkit-transition:0.3s;} #calculator.on .c_popup {top:50%; opacity:1;} #calculator .c_popup .cp_title {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; left:0; top:0; bottom:0; width:25%; padding:40px 50px;} #calculator .c_popup .cp_title:before {display:none; content:""; position:absolute; left:40px; right:40px; bottom:40px; height:190px; background-image:url('http://www.celeconh.com/_skin/sw_kor_210518/img/common/bg_calculator.png'); background-repeat:no-repeat; background-position:center;} #calculator .c_popup .cp_title:after {content:""; position:absolute; right:0; top:30px; bottom:30px; width:1px; background-color:#333; opacity:0.08;} #calculator .c_popup .cp_title h3 {display:inline-block; vertical-align:middle; font-size:35px; font-weight:200; color:#404040; line-height:50px; letter-spacing:-1px;} #calculator .c_popup .cp_title h3 strong {font-size:35px; font-weight:700; color:#404040; line-height:50px; letter-spacing:-1px;} #calculator .c_popup .cp_title p {position:relative; margin:40px 10px; font-size:14px; color:#404040; line-height:24px; letter-spacing:-0.5px; opacity:0.5;} #calculator .c_popup .cp_title p:before {content:"*"; position:absolute; left:-10px; top:0;} #calculator .c_popup .cp_close {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:-25px; z-index:9; width:50px; height:50px; margin-left:-25px; border-radius:25px; background-color:#333; cursor:pointer; transition:0.2s; -webkit-transition:0.2s;} #calculator .c_popup .cp_close:hover {transform:rotate(90deg); -ms-transform:rotate(90deg);} #calculator .c_popup .cp_close:before {content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:1px; background-color:#fff; transform:rotate(45deg); -ms-transform:rotate(45deg);} #calculator .c_popup .cp_close:after {content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:1px; background-color:#fff; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #calculator .c_popup .cp_close span {font-size:0; color:#515355;} #calculator .c_popup .cp_form {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; left:25%; top:0; bottom:0; overflow:auto; width:25%; padding:30px 40px;} #calculator .c_popup .cp_form .cpf_field {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:30px;} #calculator .c_popup .cp_form .cpf_field:first-child {margin-top:0;} #calculator .c_popup .cp_form .cpf_title {position:absolute; left:0; top:0;} #calculator .c_popup .cp_form .cpf_title label {font-size:15px; color:#404040; line-height:40px; letter-spacing:-0.5px; background:none;} #calculator .c_popup .cp_form .cpf_wrap {padding-left:50px;} #calculator .c_popup .cp_form .cpf_wrap input[type=input] {float:left; width:200px; height:40px; border-radius:20px; background-color:#fff; font-size:15px; color:#404040; line-height:40px; letter-spacing:-0.5px; text-indent:20px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);} #calculator .c_popup .cp_form .cpf_wrap.t1 input[type=input] {width:170px;} #calculator .c_popup .cp_form .cpf_wrap.t1 > span {float:left; padding-left:7px; font-size:13px; color:#404040; line-height:40px; letter-spacing:-1px;} #calculator .c_popup .cp_form .cpf_wrap input[type='checkbox'], #calculator .c_popup .cp_form .cpf_wrap input[type='radio'] {display:none;} #calculator .c_popup .cp_form .cpf_wrap label {cursor:pointer;} #calculator .c_popup .cp_form .cpf_wrap label i {display:inline-block; vertical-align:middle; position:relative; float:left; width:20px; height:20px; margin:10px 0; margin-right:7px; overflow:hidden; border-radius:10px; background-color:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1); transition:0.2s; -webkit-transition:0.2s;} #calculator .c_popup .cp_form .cpf_wrap label i:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:10px; height:10px; margin:5px; border-radius:5px; background-color:#f6f6f6; transition:0.2s; -webkit-transition:0.2s;} #calculator .c_popup .cp_form .cpf_wrap input:checked + label i:before {background-color:#404040;} #calculator .c_popup .cp_form .cpf_wrap label span {display:inline-block; vertical-align:middle; font-size:15px; color:#404040; line-height:40px; letter-spacing:-0.5px; opacity:0.6; transition:0.2s; -webkit-transition:0.2s;} #calculator .c_popup .cp_form .cpf_wrap label span:hover, #calculator .c_popup .cp_form .cpf_wrap input:checked + label span {opacity:1;} #calculator .c_popup .cp_form .cpf_wrap ul {display:inline-block; vertical-align:middle; width:100%;} #calculator .c_popup .cp_form .cpf_wrap li {display:inline-block; vertical-align:middle; float:left; width:50%;} #calculator .c_popup .cp_product {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; left:50%; right:0; top:0; bottom:0; border-radius:0 5px 5px 0; background-color:#fff;} #calculator .c_popup .cp_product h4 {display:inline-block; vertical-align:middle; width:100%; font-size:15px; font-weight:500; color:#404040; line-height:40px;} #calculator .c_popup .cp_product .owl-stage-outer {overflow:visible;} #calculator .c_popup .cp_product .owl-stage-outer:before {content:""; position:absolute; left:-80px; top:-20px; bottom:0; z-index:9; width:85px; background-color:#fff; opacity:0.8;} #calculator .c_popup .cp_product .owl-stage-outer:after {content:""; position:absolute; right:-80px; top:-20px; bottom:0; z-index:9; width:85px; background-color:#fff; opacity:0.8;} #calculator .c_popup .cp_select {display:inline-block; vertical-align:middle; overflow:hidden; box-sizing:border-box; position:absolute; left:0; right:0; top:0; bottom:180px; padding:30px 40px;} #calculator .c_popup .cp_select .cps_search {position:absolute; right:40px; top:30px;} #calculator .c_popup .cp_select .cps_search input {display:inline-block; vertical-align:middle; float:left; box-sizing:border-box; width:150px; height:40px; margin-right:5px; border:#f0f0f0 solid 1px; border-radius:20px; background:#fff; font-size:14px; font-weight:300; color:#404040; line-height:38px; text-indent:15px;} #calculator .c_popup .cp_select .cps_search button {display:inline-block; vertical-align:middle; float:left; box-sizing:border-box; width:60px; height:40px; border-radius:20px; background:#f65634; font-size:13px; font-weight:300; color:#fff; line-height:40px; text-align:center;} #calculator .c_popup .cp_selected h4 {display:none;} #calculator .c_popup .cp_selected {display:inline-block; vertical-align:middle; overflow:hidden; box-sizing:border-box; position:absolute; left:0; right:0; bottom:0; height:180px; padding:40px; box-shadow:inset 0 1px 0 #f6f6f6;} #calculator .c_popup .cp_selected .cp_wrap {margin:0;} #calculator .c_popup .cp_wrap {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; margin-top:20px; text-align:center;} #calculator .c_popup .cp_wrap ul {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; padding:0 40px;} #calculator .c_popup .cp_wrap li {display:inline-block; vertical-align:middle; position:relative; float:left; width:100%;} #calculator .c_popup .cp_wrap li a {display:inline-block; vertical-align:middle; position:absolute; right:5px; top:-10px; width:30px; height:30px; border-radius:15px; background-color:#515355; font-size:0; color:#515355; cursor:pointer; transition:0.2s; -webkit-transition:0.2s;} #calculator .c_popup .cp_wrap li a:hover {transform:rotate(90deg); -ms-transform:rotate(90deg);} #calculator .c_popup .cp_wrap li a:before {content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; margin-top:-1px; margin-left:-5px; border-radius:1px; background-color:#fff; transform:rotate(45deg); -ms-transform:rotate(45deg);} #calculator .c_popup .cp_wrap li a:after {content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; margin-top:-1px; margin-left:-5px; border-radius:1px; background-color:#fff; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #calculator .c_popup .cp_slide, #calculator .c_popup .cp_slide2 {display:inline-block; vertical-align:middle; padding:0 40px;} #calculator .c_popup .cp_pic {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100px; height:100px; border:#f0f0f0 solid 1px; border-radius:5px; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:80%; cursor:pointer;} #calculator .c_popup .cp_pic:hover {border-color:#9f9f9f;} #calculator .c_popup .cp_pic img {display:inline-block; vertical-align:middle; float:left; width:100%; height:auto;} #calculator .c_popup .cp_pic.cp_empty {border:#fff solid 2px; background-color:#9ea0a2;} #calculator .c_popup .cp_pic.cp_empty:before {content:"없음"; color:#fff; line-height:96px;} #calculator .c_popup .cp_pic.cp_add {border:#f0f0f0 solid 1px; background-color:#fff;} #calculator .c_popup .cp_pic.cp_add:before {content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; margin-top:-1px; margin-left:-8px; background-color:#d9d9d9;} #calculator .c_popup .cp_pic.cp_add:after {content:""; position:absolute; left:50%; top:50%; width:2px; height:16px; margin-top:-8px; margin-left:-1px; background-color:#d9d9d9;} #calculator .c_popup .cp_txt {display:inline-block; vertical-align:middle; width:105px; height:40px; margin:10px; font-size:13px; font-weight:300; color:#404040; line-height:20px; text-align:left; overflow:hidden; text-overflow:ellipsis; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; opacity:0.6;} #calculator .c_popup .item:hover .cp_txt {opacity:1;} #calculator .c_popup .cp_btn {display:inline-block; vertical-align:middle; width:100px; height:30px; border-radius:15px; background-color:#f7f7f7; font-size:13px; color:#404040; letter-spacing:-0.5px; line-height:30px; cursor:pointer;} #calculator .c_popup .cp_btn:hover {background-color:#404040; color:#fff;} #calculator .c_popup .owl-nav {font-size:0; text-indent:-9999px;} #calculator .c_popup .owl-nav .owl-prev {display:inline-block; vertical-align:middle; position:absolute; left:0; top:30px; z-index:99; width:40px; height:40px; border-radius:20px; background-color:#f7f7f7;} #calculator .c_popup .owl-nav .owl-prev:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:12px; height:12px; margin-top:-6px; margin-left:-3px; border-left:#404040 solid 2px; border-bottom:#404040 solid 2px; opacity:0.5; transform:rotate(45deg); -ms-transform:rotate(45deg);} #calculator .c_popup .owl-nav .owl-prev:before:hover {opacity:1;} #calculator .c_popup .owl-nav .owl-next {display:inline-block; vertical-align:middle; position:absolute; right:0; top:30px; z-index:99; width:40px; height:40px; border-radius:20px; background-color:#f7f7f7;} #calculator .c_popup .owl-nav .owl-next:before {content:""; display:inline-block; vertical-align:middle; position:absolute; right:50%; top:50%; width:12px; height:12px; margin-top:-6px; margin-right:-3px; border-right:#404040 solid 2px; border-bottom:#404040 solid 2px; opacity:0.5; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #calculator .c_popup .owl-nav .owl-next:before:hover {opacity:1;} #calculator .c_popup .cp_slide2 .cp_pic {width:230px; height:230px;} #calculator .c_popup .cp_slide2 .cp_txt {width:210px; height:50px; margin:0 25px; margin-top:20px; font-size:14px; line-height:25px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} #calculator .c_popup .cp_slide2 .owl-nav .owl-prev {top:115px;} #calculator .c_popup .cp_slide2 .owl-nav .owl-next {top:115px;} #calculator .c_popup .cp_graph {display:inline-block; vertical-align:middle; overflow:auto; box-sizing:border-box; position:absolute; left:25%; top:0; bottom:0; width:25%; padding:30px 40px; padding-right:0;} #calculator .c_popup .cp_graph .cpg_txt {display:inline-block; vertical-align:middle; box-sizing:border-box; position:relative; width:250px; padding-bottom:20px; font-size:15px; font-weight:500; color:#404040; line-height:30px;} #calculator .c_popup .cp_graph .cpg_txt:before {content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:#ececec;} #calculator .c_popup .cp_graph .cpg_unit {display:inline-block; vertical-align:middle; position:absolute; left:80px; right:0px; top:25px; height:20px; text-align:center; opacity:0.5;} #calculator .c_popup .cp_graph .cpg_unit span {display:inline-block; vertical-align:middle; font-size:11px; color:#404040; line-height:20px;} #calculator .c_popup .cp_graph .cpg_unit span:first-child {float:left;} #calculator .c_popup .cp_graph .cpg_unit span:last-child {float:right;} #calculator .c_popup .cp_graph .cpg_wrap {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:250px;} #calculator .c_popup .cp_graph .cpg_wrap > ul {display:inline-block; vertical-align:middle; width:100%; margin:20px 0;} #calculator .c_popup .cp_graph .cpg_wrap > ul > li {display:inline-block; vertical-align:middle; position:relative; width:100%;} #calculator .c_popup .cp_graph .cpg_wrap > ul > li > strong {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; font-size:15px; font-weight:500; color:#404040; line-height:30px;} #calculator .c_popup .cp_graph .cpg_wrap > ul > li:first-child > strong {margin-top:0;} #calculator .c_popup .cp_graph .cpgf_item {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%; padding-left:80px;} #calculator .c_popup .cp_graph .cpgf_item span {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; font-size:14px; font-weight:300; color:#404040; line-height:30px;} #calculator .c_popup .cp_graph .cpgf_item:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:80px; right:0; top:10px; z-index:-1; height:10px; border-radius:5px; background-color:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);} #calculator .c_popup .cp_graph .cpgf_item .cpgfi_fill {box-sizing:border-box; position:relative; z-index:1; height:10px; margin:10px 0; border:#fff solid 2px; border-radius:5px; background-color:#f65634;} #calculator .c_popup .cp_graph .cpgf_item .cpgfi_fill[style='width:0%;'] {width:10px !important;} /* #calculator .c_popup .cp_graph .cpgf_item .cpgfi_fill[style='width:100%;'] {background-color:#72cadd;} */ #calculator .c_popup .cp_graph .cpgf_item i {display:inline-block; vertical-align:middle; position:absolute; left:85px; right:5px; top:5px; z-index:9; height:20px; border-left:#000 solid 1px; border-right:#000 solid 1px; opacity:0.15;} #calculator .c_popup .cp_graph .cpgf_item i:before {content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background-color:#000;} #calculator .c_popup .cp_graph .cpgf_btn {display:inline-block; vertical-align:middle; width:100%; height:22px; margin:3px 0; border-radius:2px; background-color:#aaa; font-size:11px; color:#fff; line-height:22px; text-align:center; cursor:pointer;} #calculator .c_popup .cp_graph .cpgf_detail {display:none;} #calculator .c_popup .cp_graph .cpgf_detail.on {display:inline-block;} #calculator .c_popup .cp_graph .cpg_shortage {display:inline-block; vertical-align:middle; box-sizing:border-box; position:relative; width:250px; padding-top:20px; font-size:15px; font-weight:500; color:#404040; line-height:30px;} #calculator .c_popup .cp_graph .cpg_shortage:before {content:""; position:absolute; left:0; right:0; top:0; height:1px; background-color:#ececec;} #calculator .c_popup .cp_graph .cpg_shortage span {font-size:15px; font-weight:500; color:#404040; line-height:30px;} #calculator .c_popup .cp_graph .cpg_shortage span:after {content:",";} #calculator .c_popup .cp_graph .cpg_shortage span:last-child:after {content:"";} #calculator .c_popup .cp_recommend {display:inline-block; vertical-align:middle; box-sizing:border-box; position:absolute; left:50%; right:0; top:0; bottom:0; padding:40px; border-radius:0 5px 5px 0; background-color:#fff; text-align:center;} #calculator .c_popup .cp_recommend h4 {display:inline-block; vertical-align:middle; width:100%; font-size:15px; font-weight:500; color:#404040; line-height:20px; text-align:left;} #calculator .c_popup .cp_recommend h4 mark {margin:0; padding:0; font-size:15px; font-weight:500; color:#f65634; line-height:20px; background:none;}