/* BASIC css start */ /* reset */ * {font-family:"Inter","Pretendard","AppleSDGothicNeo","Apple SD Gothic Neo","Apple SD 산돌고딕 Neo",sans-serif; word-wrap:break-word; word-break:keep-all;} .displaynone { display: none !important; } #header, #footer, .cafe24-main, .cafe24-category, .cafe24-search, .cafe24-detail { font-size: 10px; } /*html{font-size:10px} */ body {margin:0; padding:0; max-width:100%; width:100%; font-size:10px; background:#FAFAFA; } body.wait *, body.wait {cursor: wait !important;} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0;} /*article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}*/ /* #header, #footer { div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, form, fieldset, legend, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, a, summary, time, mark, audio, video, button { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.2; font-size: 1.8em; color: #000; font-family: "Inter", "Pretendard", "AppleSDGothicNeo", "Apple SD Gothic Neo", "Apple SD 산돌고딕 Neo", sans-serif; font-style: normal; font-weight: 400; } } */ .join-step li .icon{ aspect-ratio: 1 / 1; width: 100%; height:100%; line-height:auto !important; border-radius: 50%; background: var(--cw-color-10); display: flex; align-items: center; justify-content: center;} dl, ul, ol, li { list-style:none outside none; } legend {position:absolute; margin:0; padding:0; font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle} input, button {margin:0;padding:0;font-size:1.4em; -webkit-border-radius:0; -webkit-appearance:none;} button {cursor:pointer; background:none; } select::-ms-expand { display: none;} select {cursor:pointer; margin:0; -moz-appearance:none; -webkit-appearance:none; appearance:none; border:1px solid #e0e0e0; box-sizing:border-box; display:inline-block; } option {color:#000; font-weight:400} select:focus, input:focus{ outline: none; text-decoration:none;} p {word-wrap:break-word; word-break:keep-all; line-height:1.5} hr {display:none} pre {overflow-x:scroll; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } a { cursor: pointer; display:inline-block; } a:link, a:visited, a:hover, a:focus, a:active {text-decoration:none;} table {width:100%; margin-bottom: 0; /*table-layout: fixed;*/} table, td, th { border-collapse: collapse; } th, td {vertical-align:middle; word-wrap:break-word; /*word-break:keep-all;*/} input, select, option, textarea {font-weight:400; } caption {font-size:0; line-height:0; position:absolute; left:-9999px; top:-9999px} em, span, i, a, ins {font-size:inherit; color:inherit; font-weight:inherit; line-height:inherit; font-style: inherit;} strong, b {font-size:inherit; color:inherit; line-height:inherit; font-style: inherit; font-weight:bold;} /**/ input {border:none; -webkit-border-radius: 0; border-radius:0; -moz-appearance:none; -webkit-appearance:none; appearance:none; background-color:transparent} textarea:disabled, input:disabled {background:#fcfafa} textarea { display:inline-block; width:100%; border:none; color:#000; box-sizing:border-box; padding:16px; resize: none; font-size:1.6em; font-weight:400 } /*placeholder color*/ input::-webkit-input-placeholder { color:#b3b3b3 !important; font-weight:400 } input::-moz-placeholder { color:#b3b3b3 !important; font-weight:400 } input:-ms-input-placeholder { color:#b3b3b3 !important; font-weight:400 } input:-moz-placeholder { color:#b3b3b3 !important; font-weight:400 } textarea::-webkit-input-placeholder { color:#b3b3b3 !important; font-weight:400 } textarea::-moz-placeholder { color:#b3b3b3 !important; font-weight:400 } textarea:-ms-input-placeholder { color:#b3b3b3 !important; font-weight:400 } textarea:-moz-placeholder { color:#b3b3b3 !important; font-weight:400 } /*화살표 제거*/ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; } input[type="button"] {cursor:pointer} img {max-width:100%; } /*크롬 자동완성 백그라운드 제거 */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s;-webkit-transition: background-color 9999s ease-out;-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;-webkit-text-fill-color: #000 !important;} #skin_preview_wrap{display:none !important} @charset "utf-8"; .wrapper {position: relative;} .is_pc {display:block !important} .is_mo {display:none !important} @media all and (max-width:1024px) { .is_mo {display:block !important} .is_pc {display:none !important} } @media all and (max-width:740px) { /* font 수정 */ .BF { font-size:2.4em !important;} .MF {font-size:1.8em !important;} } .toparea {width:100%;display:flex;justify-content:space-between;align-items:center; z-index:11;} .toparea .toparea_state {display:flex; justify-content: flex-end; padding: 12.3px 20em;} .toparea .toparea_state {display:flex; gap:10px;} .toparea .toparea_state svg {width:20px; height:20px;} #header {text-align:center; z-index:100; width:100%; transition: all 0.3s; position:sticky; top:0; left:0; background: #fff; box-shadow: 0 8px 16px -8px rgba(0,0,0,0.15);} .header .wrapper {display:flex; justify-content: space-between; align-items: center; margin:0 20em; border-top:1px solid #D3D3D3;} .header .logo {font-size: 30px; font-weight:800; color:#fff;} .header .logo a {display:inline-block;} .header .logo .bk {color:#000;} .header .navi {position: relative;} .header .navi .dim { position: absolute; left: 0; top: 100%; width: 100%; height: 0; background: transparent; z-index: 5; pointer-events: none; box-shadow: 0 8px 16px -8px rgba(0,0,0,0.15); transition: height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s; opacity: 0;} .header .navi .cate_list {display:flex;justify-content: center; align-items: flex-start; gap:40px;} .header .navi .cate_list li {position: relative;} .header .navi .cate_list > li > a {display:inline-block; padding: 27.8px 0; font-size:1.8em; font-weight:600;} .header .navi .sub_cate_list { width:150px; height: auto !important; text-align: center; display:none; position:absolute; background:#fff; padding:20px 0; left:50%; margin-left:-75px; box-sizing:border-box;} .header .navi .sub_cate_list li {margin-bottom:4px; line-height:30px; background:#fff; } .header .navi .sub_cate_list li:last-child {margin-bottom: 0;} .header .navi .sub_cate_list li a {display:block; font-size:1.6em; color: #808080;} .header .navi .sub_cate_list li a:hover {color:#22362B; font-weight:700;} .headroom--not-top .header .navi.open .dim {height: 0px;} .aside_btn { position: absolute; left:0; top:0; margin-top:8px; opacity: 1; transition: opacity 0.2s linear; font-size:0;} .aside_btn .menu_btn { position: relative; width:26px; height:20px; border: 0;} .aside_btn .menu_btn span { display: block; width: 100%; height: 1px; background: #000; position: absolute; left: 0px; transition: transform .15s ease-out,opacity 0.3s ease;} .aside_btn .menu_btn .line01 { top: 0 } .aside_btn .menu_btn .line02 {top: 10px; } .aside_btn .menu_btn .line03 { top: 20px;} .aside_btn .menu_btn.open .line01 { top:9px; transform: rotate(45deg); width:26px !important; } .aside_btn .menu_btn.open .line02 { display: none;} .aside_btn .menu_btn.open .line03 { top:9px; transform: rotate(135deg); width:26px !important; } #aside { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; z-index: 500; } #aside:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; opacity: 0; transition: opacity 0.5s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);} #aside .wrapper { position: absolute; max-width: 280px; width: 70%; left: 0; top: 0; height: 100%; transform: translateX(-100%); z-index: 2; transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);} #aside .aside_btn {opacity: 0; transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.2s linear; padding:24px 0 24px 24px; left:0} #aside .aside_menu {position: absolute; width: 100%; height: 100%; background-color: #fff; overflow-y: auto;} #aside .aside_menu .cate_list li a {display:block; box-sizing: border-box} #aside .aside_menu .cate_list > li {border-bottom:1px solid #eee; box-sizing:border-box} #aside .aside_menu .cate_list > li .item { padding:26px 30px; font-size:1.8em; position: relative; } #aside .aside_menu .cate_list > li.has_sub .item:after {content: "\e944"; font-family: xeicon; display:inline-block; position: absolute; top: 50%; right: 30px; font-size: 1.4em; transform: translate(0, -50%); } #aside .aside_menu .cate_list > li.has_sub.active .item:after { content: "\e941";} #aside .aside_menu .sub_cate_list {display:none; } #aside .aside_menu .sub_cate_list li a { padding: 13px 30px; text-align: left; font-size:1.5em; line-height: 1.2; color: #666;} #aside .aside_menu .aside_global {display:flex; border-bottom:1px solid #dbdbdb;} #aside .aside_menu .aside_global a {width:100%; text-align:center; line-height:60px;} #aside.open {display: block; opacity: 1;} #aside.open:before {opacity:1;} #aside.open .wrapper {translate: none; rotate: none; scale: none; display: block; transform: translate(0px, 0px);} #aside.open .aside_btn {opacity: 1; transform: translateX(280px);} #aside.open .menu_btn span {background: #fff !important; } #header, #container, #footer { transition: transform 0.5s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);} html.is_open body {overflow: hidden;} html.is_open #header, html.is_open #container, html.is_open #footer{ transform: translateX(280px);} html.is_open #header .aside_btn {opacity: 0} #header {background:#fff;} #container {padding-top:191px} .company_bottom_bar { display: flex; align-items:flex-start; justify-content: space-between; margin-top:186px; } .company_bottom_bar a { display: flex; align-items:center; justify-content:center; height:148px; width:50%; color:#fff; background: #000; font-size: 4.8em; font-weight: 700; box-sizing: border-box; border-right: 1px solid #fff; } .company_bottom_bar a:last-child { border: none; } .company_bottom_bar a:hover { background: #470A68; color: #fff; } .mo_br {display:none;} @media all and (max-width:1500px) { .header .logo {position:absolute; left:0} .header .toparea_state {padding:10px 4%;} .header .wrapper { margin:0 4%; justify-content: flex-end;} .company_bottom_bar {margin-top:62px; } .company_bottom_bar a {font-size:2.4em; height:100px; } } @media all and (max-width:1024px) { #container {padding-top:70px} .header {padding:25px 0} .header .logo {margin:0; position:relative;} .header .logo img {height:20px} .headroom--not-top .header .logo {position:static; } .header .wrapper {justify-content: center; border-top:0;} .company_bottom_bar a {font-size:1.8em; height:60px; } } @media all and (max-width:768px){ .mo_br {display:block;} .company_bottom_bar a {font-size:1.6em; height:45px; } } @media all and (max-width:640px){ } @media all and (max-width:480px){ .company_bottom_bar a {font-size:1.4em; height:40px; } } .is_no_top #header, #header.active {background: #fff; transition: all 0.2s linear;} .is_no_top #header .logo a .bk, #header.active .logo a .bk {display: block;} .is_no_top #header .logo a .wh, #header.active .logo a .wh {display: none;} .is_no_top #header .cate_list a, #header.active .cate_list a {color:#000;} .is_no_top #header .sub_cate_list a, #header.active .sub_cate_list a {color:#808080;} .is_no_top .aside_btn .menu_btn span {background: #000;} #container {padding-top:0px !important;} #tabHoverImg { width: 100%; aspect-ratio: 16 / 9; background-color: #f1f1f1; /* 로딩 전 빈 공간 색상 */ border-radius: 8px; /* 심플하고 부드러운 느낌을 위한 곡선 처리 (선택) */ overflow: hidden; } #tabHoverImg iframe { width: 100%; height: 100%; border: none; } /* 전체적인 심플/모던 스타일 리셋 및 설정 */ .faq-list { list-style: none; padding: 0; margin: 0; } .faq-item { border-bottom: 1px solid #a0a0a0; /* 항목간 얇고 밝은 구분선 */ } .faq-item dl { margin: 0; } /* 질문 (Question) 영역 */ .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 10px; margin: 0; font-size: 16px; font-weight: 500; color: #333; cursor: pointer; transition: background-color 0.3s ease; } .faq-q:hover { background-color: #fafafa; } .faq-q em { font-style: normal; font-weight: 700; color: #111; margin-right: 12px; } .faq-icon { font-size: 18px; color: #888; transition: transform 0.3s ease; /* 화살표 회전 애니메이션 */ } /* 답변 (Answer) 영역 - CSS Grid를 활용한 모던한 슬라이드 효과 */ .faq-a { display: grid; grid-template-rows: 0fr; /* 기본적으로 닫혀있음 */ transition: grid-template-rows 0.3s ease; margin: 0; background-color: #fcfcfc; } .faq-a-inner { overflow: hidden; padding: 0 10px; /* 열리기 전에는 상하 패딩 0 */ font-size: 15px; line-height: 1.6; color: #555; text-align:left; } .faq-a-inner em { font-style: normal; font-weight: 700; color: #999; margin-right: 14px; } /* 클릭 시 활성화 (Open) 상태 */ .faq-item.active .faq-q { font-weight: 600; color: #111; } .faq-item.active .faq-icon { transform: rotate(180deg); /* 화살표 뒤집기 */ color: #111; } .faq-item.active .faq-a { grid-template-rows: 1fr; /* 답변 영역 열기 */ } .faq-item.active .faq-a-inner { padding: 10px 10px 30px 10px; /* 열렸을 때 상하 여백 생성 */ font-size:14px; border-top: 1px solid #a0a0a0; } .visual {height:auto; overflow:hidden; position:relative;} .visual .swiper, .visual .swiper-slide { height: 100%; } .visual .swiper .description {position:absolute; top:50%; transform:translate(0, -50%); color:#fff; left:5%; z-index:1;} .visual .swiper .description h2 {color:#fff; font-size:60px; font-weight:700;} .visual .swiper .description p {color:#fff; font-size:24px; font-weight:500; margin-top:10px;} .visualSwiper a {display:block; height: 100%;} .visualSwiper .swiper-slide img {width:100%; height: 100%; object-fit: cover;} .swiper-button-next, .swiper-button-prev {color:#fff !important;} .section {box-sizing:border-box; margin:25.3em 0} .section .wrapper {box-sizing:border-box; padding:0 20em; overflow:hidden;} .section.first { margin-top:9.9em; } .sect_tt .tt { font-weight:700; line-height:1.2; font-size:5em;} .sect_tt .big_tt { font-weight: 700; font-size:7em;} .sect_tt .des {font-weight:400; font-size:2em;} .sect_tt .more {display:flex; align-items: center; justify-content:center; width:114px; height:114px; box-sizing: border-box; background:#000; color:#fff; font-size:2.4em; font-weight:600; border-radius: 100%; transition: all 0.3s; border:1px solid #000} .sect_tt .more:hover {background:#fff; color: #000;} .sect_line h2 {text-align:center; font-weight:400; color:#22362B; position:relative; font-size:0;} .sect_line h2 span {font-family: "Playfair Display", serif; background:#fafafa; padding:0 30px; position:relative; z-index:1; display:inline-block; font-size:50px;} .sect_line h2 span:after, .sect_line h2 span:before {content:''; width:4px; height:4px; transform:rotate(45deg); background:#22362B; position:absolute; top:50%; margin-top:-2px;} .sect_line h2 span:after {left:0;} .sect_line h2 span:before {right:0;} .sect_line h2:after {content:''; top:50%; height:2px; width:100%; z-index:0; position:absolute; margin-top:-1px; left:0; background:#22362B;} .sect_line > span {text-align:center; display:block; color:#444444; margin-top:28px; font-size:1.7em;} .category_box {display:flex; justify-content: center; gap:0; margin-top:54px; margin-bottom:30px;} .category_box a {width:100%; line-height:36px; text-align:center; font-size:16px; background:#D5D5D5; color:#22362b;} .category_box a.active {background:#22362b; color:#fff;} .category_box_content > div {display:none;} .category_box_content > div.active {display:block;} #about .list {display:flex; margin-bottom:30px; justify-content: space-between;} #about .list h2 {font-size:24px; font-weight:600; line-height:32px; display:flex; gap:10px; width:50%;} #about .list h2 em {width:32px; height:32px; background:#000; color:#fff; border-radius:16px; display:inline-block; text-align:center;} #about .list .desc {width:50%; position:relative;} #about .list .desc img {width:100%;} #about .list .desc span {display:none; position:absolute; top:50%; left:9%; transform:translate(0, -50%); color:#fff; font-size:19px; line-height:29px;} #intro {text-align:center;} #intro p {font-size:20px; color:#333; margin-top:50px; font-weight:300;} #intro ul {margin-top:80px;} #intro ul li:last-child {margin-bottom:0;} #intro a { margin: 60px auto 0; display: block; width: 150px; text-align: center; padding: 15px 30px; background: #22362B; color: #fff; font-size: 1.8em; } #brand .sect_tt {margin-bottom: 174px;} #brand .sect_tt .wrapper {align-items: center; justify-content: space-between;} .brandSwiper {position: relative; overflow: hidden;} .brandSwiper .swiper-wrapper {transition-timing-function: linear !important;} .brandSwiper .swiper-slide {width: auto; flex-shrink: 0;} .brandSwiper .swiper-slide a {display:block; width:100%} .brandSwiper .swiper-slide img {display: block; width: 100%; height: auto;} .fingerSwiper {position: relative; overflow: hidden;} .fingerSwiper .swiper-wrapper {transition-timing-function: linear !important;} .fingerSwiper .swiper-slide {width: auto; flex-shrink: 0;} .fingerSwiper .swiper-slide a {display:block; width:100%} .fingerSwiper .swiper-slide img {display: block; width: 100%; height: auto;} .ec-base-product { margin:22px 0 0; } .ec-base-product .title { margin:0 0 17px; } .ec-base-product .title h2 { font-weight:normal; font-size:30px; color:#2e2e2e; text-align:center; } .ec-base-product .title h3 { font-weight:normal; color:#2e2e2e; text-align:center; } .ec-base-product img { vertical-align:middle; } .ec-base-product a[href^='/skin-skin1/product/detail.html']>img { border:1px solid #ececec; } .ec-base-product .prdList { margin:0 auto; text-align:left; font-size:0; line-height:0; } .ec-base-product .prdList>li { display:inline-block; margin:0; color:#757575; vertical-align:top; background:#fff; border-radius:20px; overflow:hidden; position:relative; } .ec-base-product .prdList .prdList__item { margin:0; overflow:hidden; } .ec-base-product .prdList .chk { position:absolute; top:-10px; left:0; right:0; display:block; margin:0 0 10px; } .ec-base-product .prdList .thumb,.ec-base-product .prdList .thumbnail { position:relative; text-align:center; width:auto; white-space:normal; } .ec-base-product .prdList .thumbnail a { display:block; } .ec-base-product .prdList .thumbnail a img { width:100%; max-width:none; aspect-ratio:1; } .ec-base-product .prdList .thumb { position:relative; margin:0 0 10px; } .ec-base-product .prdList .thumb .img img { width:100%; height:100%; } .ec-base-product .prdList .thumbnail { position:relative; margin:0; } .ec-base-product .prdList .thumbnail a img { width:100%; max-width:100%; box-sizing:border-box; } .ec-base-product .prdList .icon__box { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; } .ec-base-product .prdList .icon__box span+span { margin:12px 0 0; } .ec-base-product .prdList .wish { z-index:1; display:block; width:30px; cursor:pointer; } .ec-base-product .prdList .wish img { max-width:100%; } .ec-base-product .prdList .cart { z-index:1; display:block; width:30px; cursor:pointer; } .ec-base-product .prdList .cart img { max-width:100%; } .ec-base-product .prdList .thumbnail .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; } .ec-base-product .prdList .thumbnail .icon { vertical-align:middle; } .ec-base-product .prdList .thumbnail .icon:after { content:""; display:block; clear:both; } .ec-base-product .prdList .thumbnail .benefit { position:absolute; left:0; bottom:0; } .ec-base-product .prdList .icon { margin:14px 0 0; text-align:left; } .ec-base-product .prdList .icon img { margin:0 4px 0 0; max-height:23px; } .ec-base-product .prdList .description { margin:36px 24px 30px; padding:0; font-size:12px; line-height:18px; text-align:left; white-space:normal; } .ec-base-product .prdList .description p.cate { color:#22362B; font-size:12px; height:20px; line-height:20px; margin-bottom:5px; } .ec-base-product .prdList .description .name { display:block; text-align:left; font-weight:normal; } .ec-base-product .prdList .description .name a { } .ec-base-product .prdList .description .name a span { color:#22362B!important; ; font-size:22px!important; font-weight:600; } .ec-base-product .prdList .description span.grid { display:block; } .ec-base-product ul.prdList { display:grid; gap:30px 10px; } .ec-base-product ul.grid2 { grid-template-columns:repeat(2,1fr); } .ec-base-product ul.grid3 { grid-template-columns:repeat(3,1fr); } .ec-base-product ul.grid4 { grid-template-columns:repeat(4,1fr); } .ec-base-product ul.grid5 { grid-template-columns:repeat(5,1fr); } .ec-base-product ul.grid3 .color { max-width:230px; } .ec-base-product ul.grid4 .color { max-width:190px; } .ec-base-product ul.grid5 .color { max-width:130px; } .ec-base-product ul.grid2 li:after { content:""; display:block; clear:both; } .ec-base-product ul.grid2 li .thumbnail { text-align:left; margin:0; } .ec-base-product ul.grid2 li .description { padding:0; } .ec-base-product ul.grid2 li .description .chk { position:static; text-align:left; } .ec-base-product .spec { margin:15px 0 0; } .ec-base-product .spec>li { margin:0 0 14px; text-align:left; line-height:19px; } .ec-base-product .spec>li.custom_option1 { display:none; } .ec-base-product .spec>li.price { margin-bottom:14px; color:#000; font-size:16px; } .ec-base-product .spec>li.price ~ .sale { margin-bottom:14px; color:#000; font-size:16px; } .ec-base-product .spec .summary { color:#6d6d6d; font-size:12px; } .ec-base-product .spec .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; line-height:1; } .ec-base-product .spec .chips { display:inline-block; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; } .ec-base-product .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; } .ec-base-product .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; line-height:16px; color:#757575; letter-spacing:-1px; } .ec-base-product .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p strong span { font-size:11px; } .ec-base-product .prdList .shippingFee { position:relative; display:inline-block; } .ec-base-product .prdList .shippingFee .button { display:inline-block; float:none; } .ec-base-product .prdList .shippingFee .ec-base-tooltip { z-index:11; display:block; margin:0 0 0 -170px; width:360px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th { width:40px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th,.ec-base-product .prdList .shippingFee .ec-base-tooltip table td { padding:7px 10px 8px 10px; } .ec-base-product .btnTooltip { display:inline-block; } .differentialShipping { display:none; overflow:hidden; position:absolute; z-index:100; border:1px solid #000; background:#fff; } .differentialShipping h3.title { height:60px; margin:0 20px; padding:20px 0; font-size:16px; color:#000; box-sizing:border-box; border-bottom:1px solid #e5e5e5; } .differentialShipping .content { padding:12px 18px 14px 18px; border-top:0; text-align:center; background:#fff; } .differentialShipping .close { position:absolute; right:14px; top:16px; width:20px; height:20px; -webkit-transform:rotate(45deg); transform:rotate(45deg); } .differentialShipping .close a { position:relative; z-index:1; display:block; width:100%; height:100%; } .differentialShipping .close:before { content:""; position:absolute; top:0; right:10px; width:1px; height:21px; background:#000; } .differentialShipping .close:after { content:""; position:absolute; top:10px; right:0; width:21px; height:1px; background:#000; } .differentialShipping .close img { display:none; } .differentialShipping .content ul { color:#757575; line-height:25px; } .differentialShipping .content li { overflow:hidden; } .differentialShipping .content li strong { float:left; font-weight:normal; } .differentialShipping .content li span { float:right; color:#2e2e2e; } .differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #b0b1b3; color:#80aeef; text-align:right; } .ec-product-bgLT { background-position:left top; } .ec-product-bgLC { background-position:left center; } .ec-product-bgLB { background-position:left bottom; } .ec-product-bgRT { background-position:right top; } .ec-product-bgRC { background-position:right center; } .ec-product-bgRB { background-position:right bottom; } .ec-product-bgCT { background-position:center top; } .ec-product-bgCC { background-position:center center; } .ec-product-bgCB { background-position:center bottom; } @media all and (max-width:767px) { .ec-base-product ul.grid4 { grid-template-columns:repeat(2,1fr); } .ec-base-product ul.grid5 { grid-template-columns:repeat(2,1fr); } .ec-base-product .prdList { margin:0 -5px 0; } .ec-base-product .prdList .wish { width:22px; } } @media all and (max-width:1024px) { .ec-base-product .title h3 { margin:40px 0 20px; font-size:16px; } .ec-base-product ul.grid3 { grid-template-columns:repeat(1,1fr); } .ec-base-product ul.grid4 { grid-template-columns:repeat(2,1fr); } .ec-base-product ul.grid5 { grid-template-columns:repeat(2,1fr); } .ec-base-product .discountPeriod { position:static; } .ec-base-product .btnTooltip { position:static; } .differentialShipping { left:0; right:0; width:88%; margin:10px auto 0; } } @media all and (min-width:768px) and (max-width:1024px) { .ec-base-product ul.grid3 { grid-template-columns:repeat(1,1fr); } .ec-base-product ul.grid4 { grid-template-columns:repeat(2,1fr); } .ec-base-product ul.grid5 { grid-template-columns:repeat(2,1fr); } .ec-base-product .prdList { margin:0 auto; } } @media all and (min-width:1025px) { .RW{width:489px} .ec-base-product .title h3 { margin:50px 0 25px; font-size:20px; } .ec-base-product .layerDiscountPeriod { left:50%; top:26px; width:247px; margin:0 0 0 -124px; } .ec-base-product .btnTooltip { position:relative; } .differentialShipping { left:50%; top:17px; width:350px; margin: 0 0 0 -176px; } } #choice .sect_tt {text-align:center;} #choice .sect_tt .tt {color:#22362b;} #choice .sect_tt span {display:block; font-size:2em; color:#999; margin-bottom:15px; margin-top:20px;} #choice .category {display:flex; justify-content: center; gap: 10px; margin-top:30px; flex-wrap: wrap;} #choice .category a {line-height:36px; text-align:center; padding:0 20px; font-size:20px; background:#22362b; color:#fff; border-radius:18px;} #choice .banner {display:grid; gap:10px; grid-template-columns: 1fr 1fr 1fr; margin-top:50px;} #choice .banner a {} #choice .ec-base-product .prdList .description {position:absolute; bottom: -3px;; z-index:2;} #choice .ec-base-product .prdList .description .name a span {color:#fff!important; font-size:28px!important;} #choice .ec-base-product .spec > li.product_price span {color:#fff!important; font-size:24px!important; font-weight:400!important; padding-left:5px;} #choice .ec-base-product .prdList .thumbnail a {position:relative;} #choice .ec-base-product .prdList .thumbnail a:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); z-index:1;} #choice .ec-base-product .spec > li.product_price .m_item span:first-child:before {content:':'; position:relative; padding-right:5px;} #choice .ec-base-product .spec > li.product_price .m_item span:first-child:after {content:' 구성';} #product_item .sect_tt {text-align:center;} #product_item .sect_tt span {display:block; font-size:2em; color:#999; margin-bottom:15px; margin-top:20px;} #quality .wrapper {} #quality .sect_tt {text-align:center;} #quality .sect_tt span {display:block; font-size:0.34em; color:#999; margin-bottom:15px; font-weight:500;} #quality .tabs {overflow:hidden;} #quality .tabs ul {align-items: flex-start; gap: 16px; width: min-content; height: min-content; padding: 0; display: flex; position: relative; overflow: visible; margin: 0 auto; margin-top:80px;} #quality .tabs ul li {width:120px; line-height:36px; color:#22362B; background:#D5D5D5; border-radius:18px; cursor:pointer;} #quality .tabs ul li.active .thumb {background-color: rgb(251, 239, 222);} #quality .tabs ul li.active {color:#fff; background:#22362B;} #quality .tabs ul li .tit {text-align:center; display:block;} #quality .contents {margin-top:50px;} #quality .contents .list {display:none;} #quality .contents .list.active {display:block;} #quality .contents ul {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:30px;} #quality .contents ul li {border-radius:36px; overflow:hidden; background:#fff;} #quality .contents ul li {display:block;} #quality .contents ul li .image img {width:100%;} #quality .contents ul li .desc {padding:27px 36px 40px;} #quality .contents ul li .desc .category {color:#22362B; font-size:2em; font-weight:600;} #quality .contents ul li .desc h2 {color:#22362B; font-size:3.2em; font-weight:700; margin-top:15px;} #quality .contents ul li .desc h2 span {font-size: 0.628em;font-weight:500;} #quality .contents ul li .desc p {color:#444; margin-top:15px; font-size:2em;} #product {box-sizing:border-box; margin:13em 0 25em; } #product .sect_tt {margin-bottom: 174px;} #product .product_grid {display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; max-width: 2100px; margin: 0 auto;} #product .product_item {flex: 0 0 calc((100% - 80px) / 3); box-sizing: border-box; max-width: 500px;_font-size:1.8em; position:relative; overflow:hidden; border-radius:45px; aspect-ratio:4/3;} #product .swiper-initialized .product_item {flex:none;} #product .swiper-initialized .product_grid {flex-wrap:nowrap; gap:0; justify-content: flex-start;} #product .product_item a {display:block; width:100%; height:100%; position:relative;} #product .product_item a::before {content: ''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:1;} #product .product_img {position:relative; width:100%; height:100%; overflow:hidden;} #product .product_img img {display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;} #product .product_item .product_img {} #product .product_overlay {position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; pointer-events:none;} #product .product_overlay .korean {position:absolute; top:40px; left:40px; font-size:2.4em; font-weight:600; color:#fff; line-height:1.2; } #product .product_overlay .english {position:absolute; bottom:40px; left:40px; font-size:1.6em; font-weight:600; color:#fff; opacity:1; line-height:1.3; white-space: normal; font-weight:400;} #product .product_item:hover .product_overlay {background:#22362B;} #order {box-sizing:border-box; margin:13em 0 25em; } #order .sect_tt {margin-bottom: 174px;} #order .guide {max-width:1080px; margin:0 auto; background:#22362B;} #order .guide .sect_line h2 {color:#fff;} #order .guide .sect_line h2 span {background:#22362B;} #order .guide .sect_line > span {color:#fff;} #order .guide .sect_line h2:after {background:#fff;} #order .guide .sect_line h2 span:after, #order .guide .sect_line h2 span:before {background:#fff;} #order .guideWrap {padding:100px 100px 150px; position:relative; overflow:hidden;} #order .guideWrap:after {content:''; position:absolute; z-index:1; width:150%; height:100%; border-radius:100%; background:#E2D0CE; bottom:-70%; left:50%; margin-left:-75%;} #order .guideWrap .guideContainer {background:#fff; padding:2%; position:relative; z-index:2;} #order .guideWrap .guideContainer .logo {width:10%; position:absolute; top:0; left:50%; margin-left:-5%;} #order .guideWrap .guideContainer .line {border:2px solid #22362B; padding:160px 0 80px; text-align:center; display:flex; flex-direction: column; gap:50px; letter-spacing:-1px;} #order .guideWrap .guideContainer .line dt {color:#22362B; font-weight:800; font-size:30px;} #order .guideWrap .guideContainer .line dd {margin-top:10px; font-size:27px; line-height:1.4; color:#444;} #order .guideWrap .guideContainer .line dd strong {font-weight:600;} #order .guideWrap .guideContainer .line dd p {font-size:20px; margin-top:15px; color:#999;} #order .guide img {width:100%;} #order .guideStep {padding:150px 0 0; background:#fafafa;} #order .guideStep h2 {text-align:center; font-size:3.8em; font-weight:800; color:#22362B; position:relative;} #order .guideStep h2 span {background:#fafafa; padding:0 30px; position:relative; z-index:1; display:inline-block;} #order .guideStep h2 span:after, #order .guideStep h2 span:before {content:none; width:4px; height:4px; transform:rotate(45deg); background:#22362B; position:absolute; top:50%; margin-top:-2px;} #order .guideStep h2 span:after {left:0;} #order .guideStep h2 span:before {right:0;} #order .guideStep h2:after {content:none; top:50%; height:2px; width:100%; z-index:0; position:absolute; margin-top:-1px; left:0; background:#22362B;} #order .guideStep .subTitle {text-align:center; display:block; color:#444444; margin-top:30px; font-size:1.7em;} #order .guideStep .stepGuide {display:flex; justify-content: center; gap:50px; margin-top:40px; flex-wrap: wrap;} #order .guideStep .stepGuide > div {width:160px; text-align:center; position:relative;} #order .guideStep .stepGuide > div span {width:160px; height:160px; border-radius:100%; position:relative; display:block; background:#22362B; justify-content: center; align-content: center; align-items: center;} #order .guideStep .stepGuide > div span > svg {transform:scale(0.5);} #order .guideStep .stepGuide > div:first-child span > svg {padding-top:10%;} #order .guideStep .stepGuide .arrow {position:absolute; top:50%; right:-25px; width:10px; margin-top:-5px;} #order .guideStep .stepGuide .arrow svg {width:100%; height:auto;} #order .guideStep .stepGuide > div em {margin-top:20px; width:20px; height:20px; text-align:center; line-height:20px; background:#22362B; border-radius:10px; display:inline-block; color:#fff; font-size:10px;} #order .guideStep .stepGuide > div p {margin-top:5px; color:#22362B; font-size:16px;} #business {box-sizing:border-box; margin:13em 0 25em; } #business .sect_tt {margin-bottom: 174px;} #business .business_grid {display: flex; flex-wrap: wrap; justify-content: center; gap: 65px; max-width: 2100px; margin: 0 auto;} #business .business_item {flex: 0 0 calc((100% - 130px) / 3); box-sizing: border-box; max-width: 500px; font-size:1.8em; position:relative; overflow:hidden; border-radius:45px; aspect-ratio:500/450;} #business .business_item:hover {transform:scale(1.02);} #business .business_item a {display:block; width:100%; height:100%; position:relative;} #business .business_item a::before {content: ''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:1;} #business .business_img {position:relative; width:100%; height:100%; overflow:hidden;} #business .business_img img {display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;} #business .business_item:hover .business_img img {transform:scale(1.1);} #business .business_overlay {position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; pointer-events:none; display:none;} #business .business_overlay .korean {position:absolute; top:40px; left:40px; font-size:2.4em; font-weight:600; color:#fff; line-height:1.2; } #business .business_overlay .english {position:absolute; bottom:40px; left:40px; font-size:2.4em; font-weight:600; color:#fff; opacity:1; line-height:1.3; white-space: normal;} #affiliate .wrapper {display: flex; align-items:flex-start; justify-content: space-between; gap:20px;} #affiliate .sect_tt {flex-shrink: 0; position: sticky; top:0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin:0; width:45%; box-sizing: border-box; transition: top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);} #affiliate .sect_tt .sect_content { transform: translateY(0);} #affiliate .affiliate_box {width:100%;} #affiliate .affiliate_list li {margin-bottom:60px;} #affiliate .affiliate_list li:last-child {margin-bottom:0;} #affiliate .affiliate_list li .img {margin-top:30px; box-sizing: border-box; position:relative;} #affiliate .affiliate_list li .img span {position: absolute; top: 50%; left: 9%; transform: translate(0, -50%); color: #fff; font-size: 20px; line-height:1.5;} #affiliate .affiliate_list li .img img {border-radius:45px;} #affiliate .affiliate_list li .txt {display: flex; align-items:flex-start; justify-content: space-between;} #affiliate .affiliate_list li .txt .left .name {font-size:3em; font-weight: 600; letter-spacing: -0.02em; display:flex; gap:10px; align-items: center;} #affiliate .affiliate_list li .txt .left .name em {width: 32px; height: 32px; flex-shrink: 0; background: #000; color: #fff; border-radius: 16px; display: inline-block; text-align: center; font-size:16px; line-height:32px;} #affiliate .affiliate_list li .txt .left .sub {font-weight:400; font-size:1.8em;} #affiliate .affiliate_list li .txt .right a {display: inline-block; margin-left:30px; width: 30px;} #news {margin-top:12em !important; position: relative; z-index: 5;} #news .sect_tt {display: flex; align-items: center; justify-content: space-between; margin-bottom: 75px;} #news .sect_tt .mobile_tab {display: none;} #news .news_box {position: relative; display: flex; gap:70px;} #news .news_box .desktop_tab {display: flex; align-items: center; justify-content: flex-end; gap: 0; margin-bottom: 30px; width: 768px; margin-top: -153px;} #news .news_box .desktop_tab a {display: inline-block; font-size:3.6em; font-weight:600; color:#666; padding: 0 20px; border-right: 1px solid #666; line-height: 1; transition: color 0.5s ease;} #news .news_box .desktop_tab a.active {color:#000} #news .news_box .desktop_tab a:last-child {border-right: none;} #news .news_box .left {width:768px; position: relative;} /* #news .news_box .left .img {box-sizing:border-box; font-size:0; position: relative; padding-bottom: 73.6%; border-radius: 45px; overflow: hidden;} #news .news_box .left .img .hover_img {position:absolute; top:0; left:0; width: 100%; height:100%; opacity: 0; transition: opacity 0.6s ease; visibility: hidden; object-fit: contain;} #news .news_box .left .img .hover_img.active { opacity: 1; visibility: visible; } #news .news_box .left #boardHoverImg {display:none; position:absolute; top:0; left:0; width: 100%; height:100%; z-index: 10; background: #fff;} #news .news_box .left #boardHoverImg img {width: 100%; height: 100%; object-fit: cover; border-radius: 45px;} */ #news .news_box .right {width:calc(100% - 768px); box-sizing: border-box; /*padding-left:104px; */ text-align: right; padding-top: 0;} #news .news_box .right .board .board_list {border-top: 1px solid #bebebe; box-sizing:border-box; overflow:hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%;} #news .news_box .right .board .board_list li {border-bottom: 1px solid #bebebe; flex:1; display:flex;} #news .news_box .right .board .board_list li a {min-width: 0; display: flex; align-items: center; gap:30px; justify-content: flex-start; box-sizing: border-box; background: url(/renewSkin/img/icon_arrowR.png) no-repeat center right 16px / 19px auto; transition: all 0.3s ease;} #news .news_box .right .board .board_list li .date {white-space:nowrap; font-size:2.8em; color:#808080; font-weight:300; text-align: left} #news .news_box .right .board .board_list li .subject {font-size:2.8em; color:#000; font-weight: 600; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; text-align: left;} #news .news_box .right .board .board_list li .thumbnail {display:none;} #news .news_box .tab_con {display:none;} #news .news_box .tab_con.active {display:block; height:100%;} #news .news_box .tab_con.active .board {height:100%;} #contact {box-sizing:border-box;} #contact .sect_tt {text-align:center;} #contact .sect_tt h2 {font-size: 3.8em; font-weight: 800; color: #22362B;} #contact .sect_tt span {display: block; color: #444444; margin-top: 10px; font-size: 1.7em;} #contact .form {max-width:900px; margin:70px auto 0;} #contact .form h3 {background:#F5F3F6; color:#22362B; cursor:pointer; line-height:70px; border-radius:20px; background:#F5F3F6; font-weight:700; font-size:1.9em; text-align:center; display:flex; align-items: center; justify-content: center; gap: 10px;} #contact .form h3.active {background:none; justify-content: space-between;} #contact .form h3.active a {background:#22362B; color:#fff; border-radius: 20px; width:100%;} #contact .form h3.active span {padding:0 20px; background:#F5F3F6; color:#22362B; border-radius: 20px;} #contact .form .form_wrap {margin-top:80px;} #contact .form .form_wrap a {margin:60px auto 0; display:block; width:150px; text-align:center; padding:15px 30px; background:#22362B; color:#fff; font-size:1.8em;} #contact .form .form_wrap ul {display:flex; gap:40px; flex-direction: column;} #contact .form .form_wrap ul li {display:flex;} #contact .form .form_wrap ul li .title {width:180px; font-size:1.7em; line-height:40px; flex-shrink: 0;} #contact .form .form_wrap ul li .required {color:#f10; margin-left:5px;} #contact .form .form_wrap ul li .input {width:100%;} #contact .form .form_wrap ul li .input input, #contact .form .form_wrap ul li .input select, #contact .form .form_wrap ul li .input textarea {border-radius:10px; border:1px solid #D3D3D3;} #contact .form .form_wrap ul li .input input, #contact .form .form_wrap ul li .input select {width:100%; max-width:400px;} #store {margin-top:0} #store .wrapper {display: flex; align-items:flex-start; justify-content: space-between;} #store .sect_tt {display: flex; align-items: center; justify-content: space-between; margin-bottom: 72px;} #store .big_tt {font-size:5.0em;} #store .con {width:calc(50% - 62px)} #store .con .img a {position: relative; display: block; overflow: hidden;} #store .con .img img {display: block; width: 100%; /*position: absolute; height: 100%; top: 0; left: 0; */backface-visibility: hidden; transition: transform 0.9s cubic-bezier(0.18, 0.6, 0.33, 0.76);} #store .con:hover .img img {transform: scale3d(1.1, 1.1, 1);} /*#finger_category {margin:5em}*/ #finger_category .wrapper {display:flex; gap:15px; flex-wrap: wrap; text-align:center; justify-content: center; flex-direction: column;} .event-type { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; } .event-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 20px; border: 1px solid #e5e5e5; border-radius: 25px; line-height:50px; font-size: 24px; color: #333; text-decoration: none; background: #fff; transition: all 0.2s ease; } .event-btn:hover { border-color: #ff6f00; color: #ff6f00; background: #fff7f0; } .event-btn:active { transform: scale(0.97); } @media all and (max-width:1500px) { #affiliate .affiliate_list li .img span {font-size:1.4vw; } .visual .swiper .description h2 {font-size:4vw;} .visual .swiper .description p {font-size:1.6vw;} #about .list {flex-direction: column; gap:15px;} #about .list .desc {width:100%;} .section { margin:10em 0; } .section.first { margin-top:10em; } .section .wrapper { padding:0 4% } .sect_tt .tt { font-size:4vw; } .sect_tt .big_tt { font-size:3.8em; } .sect_tt .des { font-size:1.7vw; } .sect_tt .more { font-size:1.8em; width:90px; height:90px } #brand .sect_tt { margin-bottom:82px } #order .sect_tt { margin-bottom:82px } #business .sect_tt{ margin-bottom:82px } #business .business_grid { gap: 36px; } #business .business_item { flex: 0 0 calc((100% - 36px) / 2); } #business .business_overlay .korean { top:30px; left:30px; font-size:1.8em; } #business .business_overlay .english { bottom:30px; left:30px; font-size:1.8em; } #product .sect_tt{ margin-bottom:82px } #product .product_grid { gap: 36px; } #product .product_item { flex: 0 0 calc((100% - 36px) / 2); } #product .product_overlay .korean { top:30px; left:30px; font-size:1.8em; } #product .product_overlay .english { bottom:30px; left:30px; right:30px; font-size:1.6em; } #news { margin-top:12em !important; } #affiliate .sect_tt { width:50%; } #affiliate .affiliate_box { width:50% } #affiliate .affiliate_list li .txt .left .name { font-size:2.2em; letter-spacing: -0.02em; } #affiliate .affiliate_list li .txt .left .sub { font-size:1.4em; } #affiliate .affiliate_list li .txt .right a { margin-left: 10px } #news .news_box .tab_box { justify-content: center; margin-bottom: 42px; width: 100%; } #news .news_box .tab_box a { font-size:2.6em; } #news .news_box .left { width:50%; box-sizing: border-box } #news .news_box .right { width:50%; } #news .news_box .right .board .board_list li a { background-size:10px auto } #news .news_box .right .board .board_list li .date, #news .news_box .right .board .board_list li .subject { font-size:1.8em; } #news .news_box .right .board .board_list li .date { width:105px} #news .news_box .right .board .board_list li .subject {width: calc(100% - 140px);} #store .sect_tt { margin-bottom:32px; } #store .big_tt { font-size:3.8em; } #store .con { width: calc(50% - 32px); } #order .guideStep .stepGuide {max-width:750px; margin:50px auto 0;} #order .guideStep .stepGuide > div:nth-child(3) .arrow {display:none;} #quality .contents ul li .desc {padding:5% 7%;} #quality .contents ul li .desc .category {font-size:1vw;} #quality .contents ul li .desc h2 {font-size:2.3vw;} #quality .contents ul li .desc h2 span {font-size:1.2vw;} #quality .contents ul li .desc p {font-size:1.2vw;} } @media all and (max-width:1024px) { #quality .contents ul {grid-template-columns: 1fr 1fr} #quality .contents ul li .desc {padding:5% 7%;} #quality .contents ul li .desc .category {font-size:1.5vw;} #quality .contents ul li .desc h2 {font-size:3.3vw;} #quality .contents ul li .desc h2 span {font-size:2vw;} #quality .contents ul li .desc p {font-size:2vw;} .visual {height:auto; aspect-ratio: 360 / 577;} .visual .swiper .description h2 {font-size:5vw;} .visual .swiper .description p {font-size:1.9vw;} .visual .swiper .swiper-button-next, .visual .swiper .swiper-button-prev {display:none;} .section { margin: 6em 0 } .section.first { margin-top:15em; } #brand .sect_tt { margin-bottom:36px; } #news .news_box .right .board .board_list li .date { margin-right:20px } #choice .banner {grid-template-columns: 1fr;} #order .guideWrap {padding:10% 16px;} #order .guideWrap .guideContainer .line dt {font-size:25px;} #order .guideWrap .guideContainer .line dd {margin-top:10px; font-size:22px;} #order .guideWrap .guideContainer .line dd p {font-size:15px; margin-top:15px;} } @media all and (max-width:768px) { #intro a,#contact .form .form_wrap a{width: 210px;height: 51.9px;line-height: 51.9px; padding: 0;} #aside .aside_menu .aside_global a{font-size: 18px;} .sect_line h2 span {font-size:36px;} #quality .contents ul {grid-template-columns: 1fr} #quality .contents ul li .desc {padding:5% 7%;} #quality .contents ul li .desc .category {font-size:2vw;} #quality .contents ul li .desc h2 {font-size:4vw;} #quality .contents ul li .desc h2 span {font-size:2.5vw;} #quality .contents ul li .desc p {font-size:2.5vw;} #order .guideStep h2 {font-size:2.4em;} #order .guideStep .subTitle {font-size:1.6em;} #order .guideStep .stepGuide {gap:40px 20px; max-width:400px; } #order .guideStep .stepGuide > div {width:110px;} #order .guideStep .stepGuide > div span {width:100px; height:100px; margin:0 auto;} #order .guideStep .stepGuide > div span svg {width:70%; height:auto;} #order .guideStep .stepGuide > div p {font-size:12px;} #order .guideWrap .guideContainer .line {padding:80px 0 40px; gap:30px;} #order .guideWrap .guideContainer .line dt {font-size:20px;} #order .guideWrap .guideContainer .line dd {margin-top:10px; font-size:17px;} #order .guideWrap .guideContainer .line dd p {font-size:13px; margin-top:15px;} #contact .sect_tt h2 {font-size:2.4em;} #contact .sect_tt span {font-size:1.6em;} #contact .form {margin-top:30px;} #contact .form h3 {font-size:1.6em;} #contact .form .form_wrap {margin-top:40px;} #contact .form .form_wrap ul li .title {font-size:1.5em; width:100px;} .visual .swiper .description h2 {font-size:6vw;} .visual .swiper .description p {font-size:3vw;} .event-btn {line-height:36px; border-radius:18px; font-size:14px; padding:0 10px;} .section { margin: 10em 0 } .section.first { margin-top:15em; } .sect_tt .tt { font-size:3.0em; } .sect_tt .big_tt { font-size:3.0em; } .sect_tt .des { font-size:1.4em; } .sect_tt .more { width:62px; height:62px; font-size: 1.4em; } #business { margin:13em 0; } #business .sect_tt { margin-bottom:32px; } #business .business_overlay .korean { font-size:1.8em; } #business .business_overlay .english { font-size:1.8em; } #order .sect_tt { margin-bottom:32px } #affiliate .wrapper { flex-direction: column; } #affiliate .sect_tt { width:100%; position:static; height:auto; margin-bottom:32px; } #affiliate .sect_tt .sect_content { transform: translateY(0) !important; } #affiliate .affiliate_box { width:100% } #affiliate .affiliate_list li .img span {font-size:2.8vw;} #affiliate .affiliate_list li .txt .left .name { font-size:2.0em; letter-spacing: -0.02em; } #affiliate .affiliate_list li .txt .left .sub { font-size:1.2em; } #news .sect_tt { margin-bottom:32px; flex-wrap: wrap; gap: 15px; } #news .sect_tt .mobile_tab { display: flex; order: 2; align-items: center; gap: 0; margin-bottom: 0; width: auto; } #news .sect_tt .mobile_tab a { font-size:1.8em; font-weight:600; color:#666; padding: 0 15px; border-right: 1px solid #666; line-height: 1; transition: color 0.5s ease; } #news .sect_tt .mobile_tab a.active { color:#000; } #news .sect_tt .mobile_tab a:last-child { border-right: none; } #news .sect_tt .more { order: 3; } #news .news_box .right .board .board_list li a {padding:20px 0;} #news .news_box .desktop_tab { display: none; } #news .news_box:last-of-type { flex-direction: column; gap:20px } #news .news_box .left { width:100%; padding:0; } #news .news_box .right { width:100%; padding:0; margin-top: 42px; } #news .news_box .right .board .board_list li .date { margin-right: 16px } #store .wrapper { flex-direction: column; } #store .con { width:100%; } #store .con:last-child { margin-top:60px; } } @media all and (max-width:640px) { } @media all and (max-width:480px) { #brand .sect_tt .tt { font-size:2.4em; } #product .sect_tt{ margin-bottom: 32px; } #product .product_item { flex: 0 0 100%; border-radius: 30px; } #product .product_overlay .korean { font-size:1.6em; } #product .product_overlay .english { font-size:1.4em; } #business .sect_tt{ margin-bottom: 32px; } #business .business_item { flex: 0 0 100%; border-radius: 30px; } #business .business_overlay .korean { font-size:1.6em; } #business .business_overlay .english { font-size:1.6em; } #affiliate .affiliate_list li .txt .left .name { font-size:1.8em; letter-spacing: -0.02em; } #affiliate .affiliate_list li .txt .left .sub { font-size:1.4em; } #affiliate .affiliate_list li .txt .right a { width:auto; } #affiliate .affiliate_list li .txt .right a img { height:20px } #affiliate .affiliate_list li .img img { border-radius:30px } #news .news_box .tab_box { margin-bottom:32px; padding: 8px 16px; border-radius: 20px; } #news .news_box .tab_box a { font-size:1.6em; padding:0 8px; } #news .news_box .right { margin-top:16px; } #news .news_box .right .board .board_list li .date, #news .news_box .right .board .board_list li .subject { font-size: 1.4em; } #news .news_box .right .board .board_list li .date { width:80px; text-align: left} #news .news_box .right .board .board_list li .subject {width:calc(100% - 100px)} #news .news_box .right .board .board_list li a { background-size: 8px auto; padding: 10px 10px 10px 0; } #news .news_box .left .img { border-radius: 30px } #store .con .img a { height:auto; aspect-ratio: 1 / 1; } #store .big_tt { font-size:3.0em; } #order .guideStep .stepGuide .arrow {display:none;} } #reviewTopWrap { display: flex; min-height: 100vh; max-width: 1920px; margin: 0 auto; width: 100%; } .leftArea { position: relative; width: 50%; float: left; } .leftArea .review_gift { justify-content: center; align-items: center; display: flex; margin: 0 auto; margin: 0 auto; height: 100%; box-sizing: border-box; gap: 40px; } .rightArea { float: right; width: 50%; background: #fff; padding: 50px 50px; box-sizing: border-box; display: flex; align-items: center; } .rightArea #review_list { width: 100%; } .review_gift .image { overflow: hidden; width: 300px; } .review_gift .image img { width: 100%; } .gift_info h2 { font-size: 30px; font-family: "Playfair Display"; font-weight: 700; line-height: 40px; } .gift_info span { display: block; margin-top: 10px; font-size: 14px; } .gift_info .review_rank { margin-top: 40px; } .gift_info .review_rank h3 { font-size: 16px; font-weight: 600; color: #444; } .gift_info .review_rank ul { margin-top: 10px; font-weight: 300; } .gift_info .review_rank ul li { line-height: 24px; color: #444; font-weight: 400; display: flex; gap: 5px; font-size: 15px; } .gift_info .review_rank ul span { width: 30px; font-weight: 700; display: block; margin: 0; color: #000; } #review .tit-sch { padding-bottom: 5px; font-size: 18px; color: #202020; font-weight: bold } #review .table-sch { padding: 30px 0 30px 113px; text-align: center; border: 1px solid #e3e3e3 } #review .table-sch table { width: 857px } #review .table-sch th { font-size: 16px; color: #555; font-weight: normal } #review .table-sch td { padding: 10px 0 } #review .table-sch td p { padding-top: 9px } #review .table-sch td select[form=review_search] { width: 150px; height: 30px } #review .table-sch td select[name=branduid] { width: 563px } #review .table-sch td input { width: 563px; height: 28px; line-height: 28px; border: 1px solid #ddd } #review .table-sch td .btn_search { display: inline-block; width: 144px; height: 117px; font-size: 15px; color: #fff; text-align: center; line-height: 117px; border: 1px solid #000; background: #000; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #review .table-sch td .btn_search:hover { color: #000; background: #fff } #review .table-sch td .btn_search:active { position: relative; top: 1px } #review .table-review-info .score-icon { padding-top: 5px } #review .table-review-info { margin-top: 20px } #review .foot-msg { margin-top: 35px; font-size: 14px; color: #7b7b7b; line-height: 14px } #review .foot-msg span { color: #0e0d0d } #review .notice-list { width: 400px; } #review .notice-list li { word-wrap: break-word; } #review .btn-report { display: inline-block; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); color: #9d9d9d; font-size: 11px; } .table-type-2 td.review-tx { position: relative; } #review .table-review-info .d-block.writer > span { display: block; } .review_best .title { position: relative } .review_best .title h2 { font-size: 14px; font-weight: normal; line-height: 20px; } .review_best .title .desc { margin-top: 5px; } .review_best .title .desc li { color: #8B8B8B; line-height: 16px; font-size: 13px; } .review_best .review_rank { border-top: 1px solid #444; margin-top: 25px; padding-top: 30px; } .review_best .review_rank ul { display: flex; justify-content: center; margin-bottom: 30px; } .review_best .review_rank ul li { width: 210px; text-align: center; position: relative; } .review_best .review_rank ul li span { display: block; } .review_best .review_rank ul li:after { content: '¡¤'; line-height: 16px; top: 50%; margin-top: -8px; position: absolute; right: 0; } .review_best .review_rank ul li:last-child:after { content: none; } .review_all { padding: 30px 0 100px; } .review_table { border-top: 1px solid #444; padding-top: 30px; margin-top: 25px; } .review_table dl { display: flex; width: 100%; line-height: 16px; margin-bottom: 30px; } .review_table dl:last-child { margin-bottom: 0; } .review_table dl dt { width: 150px; flex-shrink: 0; text-align: center; color: #444; position: relative; font-size: 13px; line-height: 18px; } .review_table dl dt:after { content: ''; width: 1px; height: 16px; top: 0; background: #444; right: 0; position: absolute; } .review_table dl dd { padding-left: 50px; color: #444; font-size: 13px; vertical-align: top; line-height: 18px; } .review_table dl dd ol { margin-top: 18px; color: #A0A0A0; font-size: 10px; } .review_table dl dd ol li { padding-left: 10px; line-height: 18px; position: relative; } .review_table dl dd ol li:after { content: '-'; position: absolute; top: 0; left: 0; } .review_table_info { border-top: 1px solid #444; padding-top: 30px; margin-top: 25px; } .review_table_info dl { display: flex; width: 100%; line-height: 16px; margin-bottom: 30px; } .review_table_info dl:last-child { margin-bottom: 0; } .review_table_info dl dt { width: 150px; flex-shrink: 0; text-align: center; color: #A0A0A0; position: relative; vertical-align: top; font-size: 13px; line-height: 18px; } .review_table_info dl dt:after { content: ''; width: 1px; height: 16px; top: 0; background: #A0A0A0; right: 0; position: absolute; } .review_table_info dl dd { display: table-cell; padding-left: 50px; color: #000; font-size: 13px; vertical-align: top; } .review_table_info dl dd ol { color: #A0A0A0; font-size: 12px; } .review_table_info dl dd ol li { padding-left: 10px; line-height: 18px; position: relative; font-size: 13px; color: #A0A0A0; } .review_table_info dl dd ol li:after { content: '·'; position: absolute; top: 0; left: 0; } @media (max-width: 1280px) { .leftArea { text-align:center; } .leftArea .review_gift { flex-direction: column; } .gift_info .review_rank ul li { justify-content: center; } } @media (max-width: 1024px) { #container { padding-top:0!important; } #reviewTopWrap { flex-direction: column; height: auto; min-height: 0; } .leftArea,.rightArea { width: 100%; } .leftArea { padding: 50px 0; } .rightArea { padding: 50px 16px; } .review_table dl { flex-direction: column; } .review_table dl dt { width: auto; text-align: left; font-weight: 700; } .review_table dl dt:after { content: none; } .review_table dl dd { text-align: left; margin-top: 10px; padding: 0; } .review_table_info dl { flex-direction: column; } .review_table_info dl dt { width: auto; text-align: left; font-weight: 700; } .review_table_info dl dt:after { content: none; } .review_table_info dl dd { text-align: left; margin-top: 10px; padding: 0; } } .xans-board-search .form { display: flex; } .xans-board-search select,.xans-board-search input[type="text"],.xans-board-search a { margin-left: 10px; } @media all and (max-width: 1024px) { .xans-board-search { margin:10px 16px 0px 6px; } .xans-board-search .form { flex-wrap: wrap; } .xans-board-search select,.xans-board-search input[type="text"],.xans-board-search a { flex: 1; margin-top: 10px; } .xans-board-search #search { flex: 2; } .xans-board-search .category { display: flex; flex-wrap: wrap; } } @media all and (min-width: 1025px) { .xans-board-search { margin:20px -5px 0; } .xans-board-search select,.xans-board-search input[type="text"],.xans-board-search a { margin: 0 5px; } .xans-board-search #search_key { width: 110px; } .xans-board-search #search { width: 175px; } .ec-base-button.gBottom:not(.displaynone) + #boardSearchForm { margin: -60px 0 0; } .xans-board-search .category { margin: 0 0 10px 0; } } .xans-board-catemove { padding: 10px 16px; border-top: 1px solid #e5e5e5; } .xans-board-catemove .gColumn { display: inline-block; margin: 10px; } .xans-board-catemove #board_category_move { margin: 0 8px; } .xans-board-catemove select { width: 138px; } @media all and (min-width: 1025px) { .xans-board-catemove { padding:10px 0; } .xans-board-catemove .gColumn:first-of-type { margin-left: 0; } } .xans-board-function { padding: 10px 16px; border-top: 1px solid #e5e5e5; margin-top: 42px } .xans-board-function #boardGroup { margin: 0 8px; } .xans-board-function .gColumn { display: inline-block; margin: 10px; } .xans-board-function .ec-base-help { display: inline-block; position: relative; top: 4px; margin-left: 5px; background-position: 0 1px; } .xans-board-function select { width: 138px; } .xans-board-movement + form > .xans-board-function { margin-top: -20px; } .xans-board-listsgroup + form > .xans-board-function { padding-top: 0; border-top: 0; } @media all and (min-width: 1025px) { .xans-board-function { padding:10px 0; } .xans-board-function .gColumn:first-of-type { margin-left: 0; } } @media all and (max-width: 767px) { .RTI,.RTB,.RTIB { display:none !important; } .RMB { display: block !important; } .RMI { display: inline !important; } .RMIB { display: inline-block !important; } #header .navigation .btnNav { left: 16px; } #header .navigation__util { right: 16px; } body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } } @media all and (max-width: 1024px) { .RWI,.RW,.RWB,.RWIB { display:none !important; } .RTMB { display: block !important; } .RTMI { display: inline-block !important; } #capp-shop-new-product-optionselect-layer { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .bottom-nav { z-index: 901; position: fixed; bottom: 0; width: 100%; height: 52px; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform .3s linear,padding-bottom .3s linear; transition: transform .3s linear,padding-bottom .3s linear; } .bottom-nav--hide { -webkit-transform: translate3d(0,60px,0); transform: translate3d(0,60px,0); } .bottom-nav__tabBar { display: flex; justify-content: space-between; height: 52px; padding: 14px 26px 0; box-sizing: border-box; background: #fff; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform .3s linear,padding-bottom .3s linear; transition: transform .3s linear,padding-bottom .3s linear; } .bottom-nav__tabBar li a,.bottom-nav__tabBar li button { position: relative; display: block; white-space: nowrap; width: 24px; height: 24px; font-size: 1px; line-height: 1px; color: transparent; text-indent: 150%; vertical-align: top; background: none; } .bottom-nav__tabBar li button:focus { outline: 0; } .bottom-nav__tabBar .count { display: block; position: absolute; top: 12px; right: -5px; width: 16px; height: 16px; font-size: 11px; color: #fff; text-align: center; text-indent: 0; line-height: 15px; border-radius: 50%; background: #000; } .bottom-nav__top { opacity: 0; visibility: hidden; position: absolute; top: -72px; right: 16px; width: 54px; height: 54px; padding: 15px 0 0; font-size: 14px; border: 1px solid #e3e3e3; box-sizing: border-box; text-align: center; text-transform: uppercase; background: rgba(256,256,256,0.9); transition: .5s; } .bottom-nav__top a { display: block; } .bottom-nav__top .icon.icoArrowTop { display: block; margin: 0 auto; } .bottom-nav__top--show { opacity: 1; visibility: visible; } .bottom-nav__top span { display: block; margin: 4px 0 0; } #detail .bottom-nav { z-index: 401; } #detail .bottom-nav--hide .bottom-nav__top { opacity: 0; } .button--fixed .bottom-nav__tabBar { display: none; } .button--fixed #header.fixed { overflow: hidden; position: fixed; top: 0; width: 100%; height: 60px; z-index: 1000; transition: .5s; } .button--fixed #header.fixed .navigation { position: absolute; top: 0; left: 0; right: 0; background: #fff; } .xans-layout-mobileaction { position: absolute; top: 0; left: 16px; } .xans-layout-mobileaction a { overflow: hidden; display: block; text-indent: -150%; color: transparent; font-size: 1px; line-height: 1px; white-space: nowrap; } #detail .xans-layout-mobileaction { top: 16px; } #contents { margin: 0 auto; width: 100%; position: relative; } } @media all and (min-width: 768px) and (max-width:1024px) { .RMI,.RMB,.RMIB { display:none !important; } .RTI { display: inline !important; } .RTB { display: block !important; } .RTIB { display: inline-block !important; } #header .navigation .btnNav { left: 24px; } #header .navigation__util { right: 24px; } } @media all and (min-width: 1025px) { .RMI,.RMB,.RMIB,.RTI,.RTB,.RTIB,.RTMI,.RTMB { display:none !important; } .RWI { display: inline !important; } .RWB { display: block !important; } .RWIB { display: inline-block !important; } section.gInner { max-width: 1240px; margin: 0 auto; } #quick { z-index: 10; position: absolute; top: 284px; right: 50%; margin-right: -910px; width: 93px; background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); } #quick.fixed { position: fixed; top: 84px; } #quick .pageTop a { display: block; padding: 19px 0; text-align: center; font-size: 14px; text-transform: uppercase; } #quick .pageTop .icon { vertical-align: middle; } } @media all and (max-width: 1553px) { .content_wrapper { margin:auto 4%; } #quick { display: none; } } @media all and (min-width: 1921px) { body { margin:0 auto; } } #modalBackpanel { display: none; position: absolute; top: 0; left: 0; z-index: 10000; width: 100%; height: 100%; background: #000; } #modalContainer { display: none; position: absolute; top: 100px; left: 100px; z-index: 10001; width: 975px; height: 720px; border: 1px solid #333; background: #fff; } #modalContainer #modalContent { width: 100%; height: 100%; } .txtInfo { color: #868686; font-size: 12px; line-height: 22px; } p.txtInfo,ul.txtInfo { margin: 10px 0 0; } span.txtInfo { margin-left: 10px; } p.txtInfo.typeDot,.txtInfo.typeDot li { position: relative; padding: 0 0 0 14px; } p.txtInfo.typeDot:before,.txtInfo.typeDot li:before { content: ""; position: absolute; top: 8px; left: 0; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #868686; } .txtList { color: #868686; font-size: 13px; line-height: 20px; } p.txtList,ul.txtList { margin: 10px 0 0; } .txtWarn { color: var(--font-color-warn); } .txtEm { color: var(--font-color-primary); } .txtSecondary { color: var(--font-color-secondary); } .txtSuccess { color: var(--font-color-success); } .txtDel,.strike,.discount { text-decoration: line-through; font-weight: normal; } .strike strong,.discount strong { font-weight: normal; } .txtNormal { font-weight: normal; font-style: normal; } .txtNum { display: inline-block; font-size: 11px; color: #939393; word-break: normal; } .txt11 { font-size: 11px; } .txt12 { font-size: 12px; } .txt13 { font-size: 13px; } .txt14 { font-size: 14px; } .txt16 { font-size: 16px; } .txt18 { font-size: 18px; letter-spacing: -1px; } .txtIcon { font-size: 12px; font-style: normal; } .txtBreak { word-break: break-all; word-wrap: break-word; } html:lang(ja) .txt11,html:lang(zh) .txt11,html:lang(zh-tw) .txt11 { font-size: 12px; } .titleArea h2 { font-weight: normal; } .gBlank5 { display: block; margin-top: 5px; } .gBlank10 { display: block; margin-top: 10px; } .gBlank15 { display: block; margin-top: 15px; } .gBlank20 { display: block; margin-top: 20px; } .gBlank30 { display: block; margin-top: 30px; } .gIndent10 { margin-left: 10px; } .gIndent20 { margin-left: 20px; } .gSpace10 { margin-right: 10px; } .gSpace20 { margin-right: 20px; } .gMerge { position: relative; z-index: 1; margin-top: -1px; } svg.icon { display: block; } .icon.icoClose { display: block; position: relative; overflow: hidden; width: 15px; height: 15px; margin: 0 auto; font-size: 1px; line-height: 0; color: transparent; white-space: nowrap; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .icon.icoClose:before { content: ""; position: absolute; top: 0; right: 7px; width: 1px; height: 15px; background: #000; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .icon.icoClose:after { content: ""; position: absolute; top: 7px; right: 0; width: 15px; height: 1px; background: #000; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .icon.icoClose.white:before,.icon.icoClose.white:after { background: #fff; } .icon[class*="icoArrow"] { display: inline-block; overflow: hidden; width: 8px; height: 8px; text-indent: 120%; white-space: nowrap; border-left: 1px solid #000; border-bottom: 1px solid #000; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .icon.icoArrowRight { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .icon.icoArrowLeft { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .icon.icoArrowTop { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .icon.icoArrowBottom { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .icon[class*="icoArrow"].white { border-color: #fff; } .icon.icoNav { display: block; width: 20px; height: 2px; color: #000; background: currentColor; box-shadow: 0 14px 0; margin: -8px auto 0; position: relative; } .icon.icoNav:before { content: ""; position: absolute; top: 7px; left: 0; width: 20px; height: 2px; background: currentColor; } .icon.icoUser { overflow: hidden; display: inline-block; width: 22px; height: 22px; border-bottom: 2px solid #000; box-sizing: border-box; } .icon.icoUser:before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 1px; border-radius: 50%; border: 2px solid #000; } .icon.icoUser:after { content: ""; display: block; width: 18px; height: 16px; border-radius: 50%; border: 2px solid #000; } input[type=text],input[type=password] { height: 40px; line-height: 40px; padding: 2px 4px 2px 15px; border: 1px solid #e0e0e0; color: var(--font-color-base); font-size: 13px; box-sizing: border-box; outline: 1px; } input[type="button"],input[type="text"],input[type="password"],input[type="tel"],input[type="image"],textarea,select { -moz-appearance: none; -webkit-appearance: none; appearance: none; } input[type=text]:not(:disabled):focus,input[type=password]:not(:disabled):focus,input[type=text]:not(:disabled):hover,input[type=password]:not(:disabled):hover { border-color: #000; transition: .3s; } input[type=text]:disabled { background: #f9f9f9; } input[type=text][readonly] { background: #f9f9f9; } textarea { padding: 10px 15px; border: 1px solid #e0e0e0; line-height: 1.5; } input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #c1c1c1; } input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #c1c1c1; } input::-moz-placeholder,textarea::-moz-placeholder { color: #c1c1c1; opacity: 1; } input.gFull { width: 100%; } input[type="file"] { height: 40px; line-height: 40px; font-size: 13px; color: #7d7d7d; } input[type="file"]::file-selector-button,input[type="file"]::-webkit-file-upload-button { height: 40px; padding: 0 20px; font-size: 13px; color: #1c1c1c; border: 1px solid #bcbcbc; border-radius: 0; background: #fff; box-sizing: border-box; -webkit-appearance: none; } select { max-width: 100%; height: 40px; padding: 0 30px 0 15px; font-size: 13px; border: 1px solid #e0e0e0; box-sizing: border-box; background: #fff url("//img.echosting.cafe24.com/skin/skin/common/ico_select.png") no-repeat right 10px center; background-size: 14px 8px; } select::-ms-expand { display: none; } input[type="radio"] { position: relative; opacity: 1; width: 18px; height: 18px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; background: url("//img.echosting.cafe24.com/skin/skin/common/bg_radio.png") no-repeat 0 0; background-size: 18px 18px; outline: 0; } input[type="radio"]:checked { background-image: url("//img.echosting.cafe24.com/skin/skin/common/bg_radio_checked.png"); -webkit-transition: .2s ease-out; transition: .2s ease-out; } input[type="radio"]::-ms-check { border: 1px solid #000; background-color: #fff; } input[type="checkbox"] { position: relative; opacity: 1; cursor: pointer; width: 15px; height: 15px; vertical-align: text-top; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #000; background: #fff; outline: 0; } input[type="checkbox"]:checked { border: 0; background-image: url("//img.echosting.cafe24.com/skin/skin/common/bg_checkbox_checked.png"); background-size: 15px 15px; -webkit-transition: .2s ease-out; transition: .2s ease-out; } input[type="checkbox"]::-ms-check { border: 1px solid #ababab; background-color: #fff; } input[type="checkbox"]:checked::-ms-check { color: transparent; border: 0; background-image: url("//img.echosting.cafe24.com/skin/skin/common/bg_checkbox_checked.png"); background-size: 15px 15px; background-repeat: no-repeat; } label > input[type=radio],label > input[type=checkbox] { margin: 0 10px 0 0; vertical-align: middle; } label + label { margin-left: 15px; } input[type=radio] + label,input[type=checkbox] + label { margin: 0 15px 0 10px; vertical-align: middle; } legend { visibility: hidden; position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; line-height: 0; } table tr.radioType input,span.noBorder input { border: none !important; width: auto !important; height: auto !important; margin: 0 3px 0 0 !important; vertical-align: middle !important; background: none !important; } .gLabel { display: inline-block; } .gLabel label { margin-right: 20px; line-height: 22px; } .fWidthFull input[type=text] { width: 100%; height: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fWidthFull textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fWidthFull select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fList.typeHor .gLabel { margin-right: 20px; } .fList.typeVer .gLabel { display: block; } .ec-base-chk { display: inline-block; position: relative; margin: 0 8px 0 0; vertical-align: top; cursor: pointer; } .path { overflow: hidden; margin: 20px 0 0; height: 30px; line-height: 30px; } .path span { overflow: hidden; position: absolute; width: 0; height: 0; white-space: nowrap; text-indent: 100%; } .path ol { float: right; } .path li { display: inline-block; } .path li:not(:first-child):before { content: "/"; display: inline-block; margin: 0 4px 0 2px; color: #7d7d7d; vertical-align: top; } .path li:first-child { background: none; } .path li a { font-size: 12px; color: #7d7d7d; text-decoration: none; } .path li:last-child a,.path li strong,.path li strong a { color: #000; } .ec-base-field { display: -webkit-flex; display: -ms-flex; display: flex; } .ec-base-field input[type="text"],.ec-base-field input[type="password"] { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ec-base-field input ~ [class*='btn'] { margin-left: 5px; } .ec-base-field.code { margin: 0 -9px; align-items: center; } .ec-base-field.code input[type="text"],.ec-base-field.code input[type="password"] { margin: 0 9px; } .ec-base-radio.typeDelivery .ec-base-label { display: block; } .ec-base-qty { position: relative; display: inline-block; width: 103px; padding: 0 30px; vertical-align: top; box-sizing: border-box; } .ec-base-qty input[type="text"] { width: 45px; height: 30px; padding: 0; line-height: 28px; margin-left: -1px; border: 1px solid #e5e5e5; text-align: center; } .ec-base-qty input[type="text"]:focus,.ec-base-qty input[type="text"]:hover { border: 1px solid #e5e5e5; } .ec-base-qty img { position: absolute; top: 0; left: 0; opacity: .00001; width: 100%; height: 100%; z-index: 10; } .ec-base-qty .up { position: absolute; right: 0; top: 0; } .ec-base-qty .down { position: absolute; left: 0; top: 0; } .ec-base-qty a { width: 30px; height: 30px; border: 1px solid #e5e5e5; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-indent: 150%; color: transparent; font-size: 1px; line-height: 1px; } .ec-base-qty a:before { content: ''; position: absolute; left: 10px; top: 50%; width: 9px; height: 1px; background: #000; } .ec-base-qty .up:after { content: ''; position: absolute; left: 50%; top: 50%; width: 1px; height: 9px; margin: -4px 0 0 0; background: #000; } .ec-base-qty .qtyUp { position: absolute; right: 0; top: 0; } .ec-base-qty .qtyDown { position: absolute; left: 0; top: 0; } .ec-base-qty .qtyUp .up { position: static; left: auto; top: auto; } .ec-base-qty .qtyDown .down { position: static; left: auto; top: auto; } .ec-base-step { margin: 40px 0 50px; text-align: center; } .ec-base-step li { display: inline-block; font-size: 14px; color: #939393; } .ec-base-step li:not(:last-child):after { content: ""; display: inline-block; width: 8px; height: 8px; vertical-align: middle; border-left: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .ec-base-step .selected { color: #000; } @media all and (max-width: 767px) { .gInnerMargin { margin:0 16px; } .titleArea { margin: 40px 16px 30px; } } @media all and (max-width: 1024px) { .titleArea { text-align:center; } .titleArea h2 { display: inline-block; color: var(--font-color-heading); font-size: 22px; } .titleArea h3 { display: inline-block; color: var(--font-color-heading); font-size: 16px; } .titleArea--middle { margin: 0; padding: 27px 16px 12px; text-align: left; background: #f6f6f6; } .titleArea--middle h2 { display: inline-block; color: var(--font-color-heading); font-size: 16px; } .titleArea .desc { font-size: 12px; color: #6d6d6d; } .path { position: absolute; top: 0; left: 0; margin: 0; opacity: 0; overflow: hidden; width: 1px; height: 1px; font-size: 1px; line-height: 1px; white-space: nowrap; color: transparent; text-indent: 150%; } .ec-base-step li:not(:last-child):after { margin: -2px 15px 0; } } @media all and (min-width: 768px) and (max-width:1024px) { .gInnerMargin { margin:0 24px; } .titleArea { margin: 40px 24px 30px; } .titleArea--middle { margin: 0; } } @media all and (min-width: 1025px) { .titleArea { margin:45px 0 40px; text-align: center; } .titleArea h2 { display: inline-block; color: #000; color: var(--font-color-heading); font-size: 30px; } .titleArea h3 { color: #000; color: var(--font-color-heading); font-size: 16px; font-weight: normal; } .titleArea--middle { margin: 50px 0 20px; text-align: left; } .titleArea--middle h2 { color: #000; color: var(--font-color-heading); font-size: 16px; font-weight: normal; } .titleArea.titleArea--myshop { margin: 50px 0 20px; text-align: left; } .titleArea.titleArea--myshop h2 { color: #000; color: var(--font-color-heading); font-size: 16px; font-weight: normal; } .titleArea .desc { font-size: 13px; color: #6d6d6d; } .titleArea ul { padding: 5px 0; color: #939393; line-height: 18px; } .titleArea ul li { position: relative; padding: 0 0 0 9px; } .titleArea ul li:before { display: block; position: absolute; top: 50%; left: 0; content: ""; width: 2px; height: 2px; margin: -2px 0 0 0; background: #939393; } .path + .titleArea { margin-top: 55px; } .ec-base-step li:not(:last-child):after { margin: -2px 30px 0; } .memberArea { max-width: 898px; margin: 0 auto; } #capp-shop-new-product-optionselect-layer { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 458px !important; height: 100% !important; margin: 0 !important; } #capp-shop-new-product-optionselect-layer > iframe { z-index: 1111; position: relative; } #capp-shop-new-product-optionselect-layer:after { content: ""; display: block; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; background: #00000040; } #capp-shop-new-product-optionselect-backlayer { width: 100% !important; background: #000; } #capp-shop-new-product-optionselect-backlayer + #capp-shop-new-product-optionselect-layer:after { display: none; } } [class^='btnNormal'],a[class^='btnNormal'] { display: inline-block; padding: 12px 20px; height: 40px; font-size: 13px; box-sizing: border-box; border: 1px solid #bcbcbc; line-height: 1; font-weight: normal; text-decoration: none; vertical-align: middle; word-spacing: -0.5px; letter-spacing: 0; text-align: center; white-space: nowrap; color: #000; background-color: #fff; } [class^='btnSubmit'],a[class^='btnSubmit'] { display: inline-block; padding: 12px 20px; height: 40px; font-size: 13px; box-sizing: border-box; border: 1px solid transparent; line-height: 1; font-weight: bold; text-decoration: none; vertical-align: middle; word-spacing: -0.5px; letter-spacing: 0; text-align: center; white-space: nowrap; color: #fff; background-color: #000; } [class^='btnEm'],a[class^='btnEm'] { display: inline-block; box-sizing: border-box; padding: 2px 8px; border: 1px solid transparent; font-size: 12px; line-height: 18px; font-weight: normal; text-decoration: none; vertical-align: middle; word-spacing: -0.5px; letter-spacing: 0; text-align: center; white-space: nowrap; color: #fff; background-color: #737373; } [class^='btnBasic'],a[class^='btnBasic'] { display: inline-block; box-sizing: border-box; padding: 2px 8px; border: 1px solid #d1d1d1; font-size: 12px; line-height: 18px; font-weight: normal; text-decoration: none; vertical-align: middle; word-spacing: -0.5px; letter-spacing: 0; text-align: center; white-space: nowrap; color: #222; background-color: #f0f0f0; } [class^='btnNormal']:not(.disabled):hover,[class^='btnNormal']:not(.disabled).selected { border-color: #000; } [class^='btnEm']:not(.disabled):hover { background-color: #77797d; } [class^='btnBasic']:not(.disabled):hover { background-color: #e5e5e5; } [class^='btnNormal'].disabled { border-color: #e3e3e3; color: #999; } [class^='btnSubmit'].disabled { background-color: #9297a2; color: #f0f0f0; } [class^='btnEm'].disabled { background-color: #b5b6b9; color: #f0f0f0; } [class^='btnBasic'].disabled { color: #999; } [class^='btn'] + [class^='btn'] { margin-left: 6px; } [class^='btn'].sizeQty { padding: 9px 20px; height: 30px; margin-left: 6px; font-size: 12px; line-height: 12px; } .btnText { display: inline-block; font-size: 13px; line-height: 18px; text-decoration: underline; } [class^='btn'].gFull { width: 100%; } [class^='btn'].gFull + [class^='btn'].gFull { margin: 10px 0 0; } .xans-product-listmore { text-align: center; } .btnMore { display: inline-block; min-width: 220px; padding: 15px 0; border: 1px solid #222; text-align: center; transition: all 400ms; } .btnMore:hover { background: #222; border-color: #222; color: #fff; text-decoration: none; } .btnMore .icon { margin: -8px 0 0 10px; vertical-align: middle; } .btnMore:hover .icon { border-color: #fff; } .ec-base-button { margin: 20px 0; text-align: center; } .ec-base-button.justify { position: relative; } .ec-base-button:after { display: block; content: ""; clear: both; } .ec-base-button .gLeft { float: left; text-align: left; } .ec-base-button .gRight { float: right; text-align: right; } .ec-base-button.justify .gLeft { position: absolute; left: 0; } .ec-base-button.justify .gRight { position: absolute; right: 0; } .ec-base-button .text { margin: 0 6px 0 10px; color: #353535; line-height: 24px; } .ec-base-button.typeBorder { margin-top: -1px; padding: 10px 20px; border: 1px solid #d7d5d5; } .ec-base-button.gBottom { margin: 50px 0 0; } .ec-base-button.gBottom [class^='btn'] + [class^='btn'] { margin-left: 10px; } .ec-base-button[class*="gColumn"] { margin: 0 auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .ec-base-button[class*="gColumn"]:after { display: none; } .ec-base-button[class*="gColumn"] [class^='btn'] { margin: 0 5px; padding-left: 8px; padding-right: 8px; word-break: keep-all; word-wrap: break-word; white-space: normal; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .ec-base-button[class*="gColumn"] .gFlex2 { -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } .ec-base-button[class*="gColumn"] .gFlex3 { -webkit-flex: 3; -moz-flex: 3; -ms-flex: 3; flex: 3; } .ec-base-button[class*="gColumn"] .gFlex4 { -webkit-flex: 4; -moz-flex: 4; -ms-flex: 4; flex: 4; } .ec-base-button.gFixed { position: fixed; z-index: 990; left: 0; bottom: 0; max-width: 100%; width: 100%; margin: 0; box-sizing: border-box; background: #fff; } .ec-base-button.gFixed > .ec-base-button,.ec-base-button.gFixed > .ec-base-button[class*="gColumn"] { margin: 10px 11px; } @media all and (max-width: 767px) { .btnMore { display:block; } } @media all and (max-width: 1024px) { [class^='btn'].sizeS { padding:10px 20px; height: 32px; font-size: 12px; } [class^='btn'].sizeM { padding: 14px 20px; height: 45px; font-size: 13px; line-height: 18px; } [class^='btn'].sizeL { padding: 14px 26px; height: 50px; min-width: 80px; font-size: 14px; line-height: 18px; font-weight: bold; } [class^='btn'][class*='Fix'] { min-width: 72px; word-break: keep-all; word-wrap: break-word; } [class^='btn'][class*='Fix'].sizeS { min-width: 96px; } [class^='btn'][class*='Fix'].sizeM { min-width: 135px; padding-left: 15px; padding-right: 15px; } [class^='btn'][class*='Fix'].sizeL { min-width: 160px; padding-left: 8px; padding-right: 8px; } .ec-base-button { margin-left: 16px; margin-right: 16px; } .ec-base-button [class^='btn'] + [class^='btn'] { margin-left: 6px; } .ec-base-button.gBottom { display: flex; margin-left: 16px; margin-right: 16px; } .ec-base-button.gBottom .gLeft,.ec-base-button.gBottom .gRight { display: flex; flex: 1; } .ec-base-button.gBottom [class^='btn'] { flex: 1; } .ec-base-button.gBottom [class^='btn'] + [class^='btn'] { margin-left: 10px; } .ec-base-button.gBreak { flex-direction: column; } .ec-base-button.gBreak .gLeft + .gRight { margin: 10px 0 0; } .ec-base-button.gBreak .gBreak { flex-direction: column; } .ec-base-button.gBreak > [class^='btn'] + [class^='btn'],.ec-base-button.gBreak .gBreak [class^='btn'] + [class^='btn'] { margin: 10px 0 0; } .ec-base-button .ec-base-button[class*="gColumn"] { margin: 0 -5px; } .ec-base-button[class*="gMColumn"] { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; margin-left: 11px; margin-right: 11px; } .ec-base-button[class*="gMColumn"]:after { display: none; } .ec-base-button[class*="gMColumn"] [class^='btn'] { margin: 0 5px; padding-left: 8px; padding-right: 8px; word-break: keep-all; word-wrap: break-word; white-space: normal; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .ec-base-button[class*="gMColumn"] .gLeft,.ec-base-button[class*="gMColumn"] .gRight { float: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; width: 100%; } .gInnerMargin .ec-base-button,.gInnerMargin .ec-base-button.gBottom,.gInnerMargin.ec-base-button.gBottom { margin-left: 0; margin-right: 0; } } @media all and (min-width: 1025px) { [class^='btn'].sizeS { padding:10px 20px; height: 32px; font-size: 12px; } [class^='btn'].sizeM { padding: 13px 20px; height: 40px; font-size: 13px; } [class^='btn'].sizeL { padding: 14px 26px; height: 50px; min-width: 80px; font-size: 14px; line-height: 18px; font-weight: bold; } [class^='btn'][class*='Fix'] { min-width: 72px; word-break: keep-all; word-wrap: break-word; } [class^='btn'][class*='Fix'].sizeS { min-width: 96px; } [class^='btn'][class*='Fix'].sizeM { min-width: 135px; padding-left: 15px; padding-right: 15px; } [class^='btn'][class*='Fix'].sizeL { min-width: 160px; padding-left: 8px; padding-right: 8px; } } .ec-base-tab { position: relative; } .ec-base-tab .menu { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .ec-base-tab .menu:after { content: ""; display: block; clear: both; } .ec-base-tab .menu li a { display: inline-block; color: #6d6d6d; text-decoration: none; outline: 0; text-align: center; } .ec-base-tab .menu li.selected a { position: relative; } .ec-base-tab > .right { position: absolute; top: 8px; right: 10px; line-height: 24px; color: #909090; } .ec-base-tab.typeNav .menu { margin: 0 0 20px; border-bottom: 1px solid #868686; background: #fff; } .ec-base-tab.typeNav .menu li { background: #f6f6f6; } .ec-base-tab.typeNav .menu li a { border: 1px solid #e5e5e5; border-bottom: 0; color: #545454; background: #f6f6f6; } .ec-base-tab.typeNav .menu li.selected a { position: relative; border-color: #868686; color: #000; font-weight: bold; background: #fff; } .ec-base-tab.typeNav .menu li.selected a:after { content: ""; display: block; position: absolute; bottom: -1px; left: 0; right: 0; width: 100%; height: 1px; background: #fff; } .ec-base-tab.typeMenu { display: flex; margin: 10px 0; } .ec-base-tab.typeMenu ul { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto; } .ec-base-tab.typeMenu li { height: 30px; white-space: nowrap; float: none; } .ec-base-tab.typeMenu li a { line-height: 30px; color: #6d6d6d; } .ec-base-tab.typeMenu .button { display: inline-block; margin: 0 30px 0 10px; padding-bottom: 5px; } .ec-base-tab.typeMenu .button.active { position: relative; font-weight: bold; color: #000; } .ec-base-tab.typeMenu .button.active::after { content: ''; position: absolute; right: 0; left: 0; bottom: 0; height: 1px; background: #000; } .ec-base-tab.typeMenu ul > li { position: relative; } .ec-base-tab.typeMenu ul > li .iconWrap { display: block; position: relative; } .ec-base-tab.typeMenu ul > li .iconWrap:after { content: ""; position: absolute; top: -24px; right: 15px; display: inline-block; width: 7px; height: 7px; border: 1px solid #6d6d6d; border-left: 0; border-bottom: 0; transform: rotate(45deg) } .ec-base-tab.typeMenu ul > li > ul,.ec-base-tab.typeMenu ul > li > ul > li ul { position: absolute; top: 35px; left: 0; display: inline-block; border: 1px solid #e5e5e5; padding: 15px 0 15px 20px; background-color: #fff; } .ec-base-tab.typeMenu ul > li > ul > li { position: static; padding-right: 50px; } .ec-base-tab.typeMenu ul > li > ul > li .button { margin: 0; } .ec-base-tab.typeMenu ul > li > ul > li .iconWrap:after { top: -19px; right: -30px; } .ec-base-tab.typeMenu ul > li > ul > li ul { top: -1px; left: 100%; } .ec-base-tab.typeMenu ul > li > ul > li ul > li { padding-right: 50px; } .ec-base-tab.typeMenu ul > li > ul { display: none; } .ec-base-tab.typeMenu ul > li > ul > li ul { display: none; } .ec-base-tab.typeMenu ul > li > ul.active { display: inline-block; } .ec-base-tab.typeMenu ul > li > ul > li ul.active { display: inline-block; } .ec-base-tab.typeMenu .icoOpen { display: none; } .ec-base-tab.gScroll { overflow-x: auto; overflow-y: hidden; box-sizing: border-box; } @media all and (max-width: 1024px) { .ec-base-tab.typeNav .menu { display:flex; border-bottom: 1px solid #868686; } .ec-base-tab.typeNav .menu li { flex: 1; } .ec-base-tab.typeNav .menu li a { height: 100%; padding: 16px 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .ec-base-tab.typeNav .menu li a .count { align-self: flex-end; padding-left: 3px; } .ec-base-tab.typeMenu { position: relative; height: 40px; z-index: 1; } .ec-base-tab.typeMenu .menu { position: absolute; top: 0; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; } } @media all and (min-width: 1025px) { .ec-base-tab.typeNav .menu { margin:0 0 20px; } .ec-base-tab.typeNav .menu li { float: left; margin-left: -1px; } .ec-base-tab.typeNav .menu li a { min-width: 218px; padding: 16px 20px; } } .ec-base-tab.gFlex .menu { display: flex; } .ec-base-tab.gFlex .menu > li { display: flex; align-items: center; float: none; flex: 1; position: relative; margin-left: 0; } .ec-base-tab.gFlex .menu > li a { width: 100%; min-width: 0; word-break: break-all; } .ec-base-table th[scope*="row"] { text-align: left; } .ec-base-table .left { text-align: left; } .ec-base-table .center { text-align: center; } .ec-base-table .right { text-align: right; } .ec-base-table td.left { text-align: left; } .ec-base-table td.center { text-align: center; } .ec-base-table td.right { text-align: right; } .ec-base-table .top th,.ec-base-table .top td,.ec-base-table th.top,.ec-base-table td.top { vertical-align: top; } .ec-base-table .middle th,.ec-base-table .middle td,.ec-base-table th.middle,.ec-base-table td.middle { vertical-align: middle; } .ec-base-table .bottom th,.ec-base-table .bottom td,.ec-base-table th.bottom,.ec-base-table td.bottom { vertical-align: bottom; } .ec-base-table { border-top: 1px solid #000; } .ec-base-table th,.ec-base-table td { height: 29px; padding: 14px 20px; line-height: 22px; vertical-align: middle; word-break: break-word; } .ec-base-table th { border-bottom: 1px solid #e5e5e5; background-color: #f6f6f6; } .ec-base-table td { border-bottom: 1px solid #e5e5e5; } .ec-base-table th img.icon,.ec-base-table td img.icon { display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; } .ec-base-table td [class^="btn"],.ec-base-table td a[class^="btn"] { vertical-align: baseline; } .ec-base-table.gBorderClear { border-top: 0; } .ec-base-table td.gBorderClear { border-bottom: 0; } .ec-base-table .message { padding: 56px 0; border-bottom: 1px solid #e5e5e5; text-align: center; color: #6d6d6d; } .ec-base-table.typeWrite th,.ec-base-table.typeWrite td { height: auto; } .ec-base-table.typeWrite td [class^="btn"],.ec-base-table.typeWrite td a[class^="btn"] { vertical-align: middle; } .ec-base-table.typeWrite .formMultiple dl,.ec-base-table.typeWrite .formMultiple ul { width: 100%; } .ec-base-table.typeWrite .formMultiple dt { margin: 0 0 2px 0; } .ec-base-table.typeWrite .formMultiple li,.ec-base-table.typeWrite .formMultiple dd { margin: 0 0 10px 0; } .ec-base-table.typeWrite .formMultiple li:last-of-type,.ec-base-table.typeWrite .formMultiple dd:last-of-type { margin-bottom: 0; } .ec-base-table.typeWrite .formGroup input[type="text"],.ec-base-table.typeWrite .formGroup input[type="password"],.ec-base-table.typeWrite .formGroup select,.ec-base-table.typeWrite .formGroup [class^="btn"] { min-width: 0; margin: 0 5px; } .ec-base-table.typeWrite .formGroup input[type="text"] + [class^="btn"] { margin-left: 5px; } .ec-base-table.typeWrite .formGroup:not(td) { width: auto; margin-left: -5px; margin-right: -5px; } .ec-base-table.typeWrite .formGroup.code { font-size: 20px; color: #7f7f7f; } .ec-base-table.typeWrite td p.txtInfo,.ec-base-table.typeWrite td ul.txtInfo { width: 100%; } .ec-base-table.typeWrite td input[type="text"] + [class^='btn'],.ec-base-table.typeWrite td input[type="password"] + [class^='btn'],.ec-base-table.typeWrite td input[type="text"] + a[class^='btn'],.ec-base-table.typeWrite td input[type="password"] + a[class^='btn'] { margin-left: 10px; } .ec-base-table.typeWrite td label { line-height: 32px; } .ec-base-table.typeWrite .ec-address { width: 100%; } .ec-base-table.typeWrite .ec-address .btnBasic { display: inline-block; padding: 12px 20px; height: 40px; font-size: 13px; box-sizing: border-box; border: 1px solid #bcbcbc; line-height: 1; font-weight: normal; text-decoration: none; vertical-align: middle; word-spacing: -0.5px; letter-spacing: 0; text-align: center; white-space: nowrap; color: #000; background-color: #fff; } .ec-base-table.typeWrite .ec-address-area select { display: block; margin: 10px 0 0; } .ec-base-table.typeWrite .ec-address-area select:first-of-type { margin-top: 0; } @media all and (max-width: 1024px) { .ec-base-table .gFlow { display:inline-block; width: 100%; margin-top: 5px; } .ec-base-table tr.gBorderClear td { border-bottom: 0; } .ec-base-table.typeList tr.gBorderClear { border-bottom: 0; } .ec-base-table.typeWrite table { table-layout: auto; } .ec-base-table.typeWrite { padding: 10px 0; } .ec-base-table.typeWrite tr { display: block; } .ec-base-table.typeWrite th { display: block; padding: 6px 15px 0; border-bottom: 0; text-align: left; background-color: transparent; } .ec-base-table.typeWrite td { display: block; padding: 2px 15px 10px; border-bottom: 0; align-items: center; } .ec-base-table.typeWrite .formMultiple { padding-top: 10px; } .ec-base-table.typeWrite td.formGroup { padding-left: 10px; padding-right: 10px; } .ec-base-table.typeWrite td.formGroup.date { padding-left: 10px; padding-right: 15px; } .ec-base-table.typeWrite .formGroup { display: flex; flex-flow: wrap; box-sizing: border-box; align-items: center; } .ec-base-table.typeWrite .formGroup input[type="text"],.ec-base-table.typeWrite .formGroup input[type="password"],.ec-base-table.typeWrite .formGroup select { flex: 1; } .ec-base-table.typeWrite span.txtInfo { display: block; width: 100%; margin: 10px 0 0; } .ec-base-table.typeWrite td input[type="text"],.ec-base-table.typeWrite td input[type="password"],.ec-base-table.typeWrite td textarea,.ec-base-table.typeWrite td select { width: 100%; } .ec-address .ec-address-zipcode { display: flex; flex-flow: wrap; } .ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"] { flex: 1; } .ec-base-table.typeWrite .ec-address .ec-address-zipcode .ec-base-label { display: block; width: 100%; margin: 5px 0 0; } .ec-base-table.typeList thead { display: none; } .ec-base-table.typeList table,.ec-base-table.typeList tbody { display: block; } .ec-base-table.typeList tr { display: block; position: relative; padding: 20px 8px 19px; border-bottom: 1px solid #e5e5e5; text-align: left; } .ec-base-table.typeList tr:after { content: ""; display: block; clear: both; } .ec-base-table.typeList td { height: auto; display: block; float: left; padding: 3px 8px; border-bottom: 0; text-align: left; color: #6d6d6d; } .ec-base-table.typeList td a { color: #6d6d6d; } .ec-base-table.typeList td.chk { box-sizing: border-box; padding: 0; } .ec-base-table.typeList td.chk .boardChk { margin: 5px 8px 0 8px; } .ec-base-table.typeList td.chk:not(.no) .boardChk { margin: 5px 8px 0px 8px } .ec-base-table.typeList td.subject { float: none; box-sizing: border-box; } .ec-base-table.typeList td.subject a { color: #000; } .ec-base-table.typeList.gThumb td.thumb { overflow: hidden; position: absolute; top: 24px; left: 16px; width: 65px; max-height: 88px; padding: 0; } .ec-base-table.typeList.gThumb td.thumb a { display: block; height: 100%; text-align: center; } .ec-base-table.typeList.gThumb td.thumb img { max-width: 100%; max-height: 100%; } .ec-base-table.typeList.gThumb tr { min-height: 137px; padding-left: 90px; padding-right: 20px; box-sizing: border-box; } .ec-base-table.typeList.gThumb td.chk { z-index: 1; position: absolute; top: 16px; right: 16px; padding: 0; } .ec-base-table.typeList.gThumb td.chk .boardChk { margin: 0; } } @media all and (min-width: 1025px) { .ec-base-table .gFlow { width:100%; margin-left: 20px; } .ec-base-table tr.gBorderClear td { border-bottom: 0; } .ec-base-table th { padding: 14px 30px; } .ec-base-table.typeWrite th { padding: 10px 30px; } .ec-base-table.typeWrite th[scope*="row"] { padding-right: 15px; } .ec-base-table.typeWrite td { padding: 10px 20px; } .ec-base-table.typeWrite .formMultiple { padding-top: 22px; padding-bottom: 22px; } .ec-base-table.typeWrite td.formGroup { padding-left: 15px; padding-right: 15px; } .ec-base-table.typeWrite .formGroup input[type="text"],.ec-base-table.typeWrite .formGroup select { width: 190px; } .ec-base-table.typeWrite td input[type="text"],.ec-base-table.typeWrite td input[type="password"],.ec-base-table.typeWrite td select { width: 290px; } .ec-base-table.typeWrite td .ec-base-qty input[type="text"] { width: 45px; } .ec-base-table.typeWrite .ec-address input[type="text"],.ec-base-table.typeWrite .ec-address select { width: 450px; } .ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"] { width: 200px; } .ec-base-table.typeWrite .ec-address .ec-address-zipcode .ec-base-label { margin: 0 0 0 15px; line-height: 40px; } .ec-base-table.typeList { border-top: 0; } .ec-base-table.typeList th,.ec-base-table.typeList td { padding: 15px 10px 16px; } .ec-base-table.typeList th { border-bottom: 0; } .ec-base-table.typeList td.subject { padding-left: 20px; padding-right: 20px; } } .ec-base-tooltip { display: none; z-index: 999; position: absolute; top: inherit !important; left: 0 !important; right: 0 !important; padding: 14px 28px 14px 14px; text-align: left; border: 1px solid #ccc; border-radius: 2px; letter-spacing: normal; box-sizing: border-box; background-color: #fff; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip .title { display: block; padding: 0 20px 0 0; font-size: 15px; color: #000; line-height: 43px; background: #fff; } .ec-base-tooltip ul { color: #757575; } .ec-base-tooltip ul li { font-size: 13px; } .ec-base-tooltip .content table + .title { margin-top: 14px; } .ec-base-tooltip p { float: none; font-size: 12px; text-align: left; } .ec-base-tooltip p strong { font-weight: normal; font-size: 13px; } .ec-base-tooltip h3 { margin: 0 0 8px; font-size: 13px; border-bottom: 0; } .ec-base-tooltip h3 + p { margin: 0 5px 10px; } .ec-base-tooltip h4 { margin: 15px 10px 8px 5px; font-size: 12px; } .ec-base-tooltip h4:before { display: inline-block; content: ""; margin: 0 5px 0 0; width: 3px; height: 3px; background: #666; vertical-align: middle; } .ec-base-tooltip table th,.ec-base-tooltip table td { padding: 8px 10px 7px 10px; border: 1px solid #e8e8e8; line-height: 1.5em; } .ec-base-tooltip table th { padding-right: 0; background: #fbf9fa; } .ec-base-tooltip table thead th { text-align: center; } .ec-base-tooltip table tbody th { text-align: left; } .ec-base-tooltip table .left { text-align: left; } .ec-base-tooltip table .center { text-align: center; } .ec-base-tooltip table .right { text-align: right; } .ec-base-tooltip table .info { padding: 0; color: #757575; } .ec-base-tooltip table p.info:before,.ec-base-tooltip table ul.info li:before { display: inline-block; content: ""; margin: 0 3px 0 0; width: 4px; height: 1px; background: #757575; vertical-align: middle; } .ec-base-tooltip .info { padding: 10px 10px 0; margin: 5px 0 0; } .ec-base-tooltip p.bullet,.ec-base-tooltip ul.bullet { margin: 8px 10px; } .ec-base-tooltip p.bullet:before,.ec-base-tooltip ul.bullet li:before { display: inline-block; content: ""; margin: -3px 3px 0 0; width: 0; height: 0; border: solid transparent; border-left-color: #333; border-width: 2px 0 2px 2px; vertical-align: middle; } .ec-base-tooltip ul.bullet li { line-height: 1.5em; } .ec-base-tooltip .btnClose { position: absolute; right: 14px; top: 14px; padding: 10px; cursor: pointer; display: block; overflow: hidden; width: 17px; height: 17px; box-sizing: border-box; font-size: 1px; line-height: 0; text-indent: 150%; color: transparent; white-space: nowrap; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ec-base-tooltip .btnClose:before { content: ""; position: absolute; top: 0; right: 8px; width: 1px; height: 17px; background: #000; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .ec-base-tooltip .btnClose:after { content: ""; position: absolute; top: 8px; right: 0; width: 17px; height: 1px; background: #000; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .ec-base-tooltip .btnClose img { opacity: 0; } .ec-base-tooltip .edge { z-index: 20; position: absolute; left: 50%; top: -6px; display: block; margin: 0 0 0 -5px; width: 10px; height: 6px; } .ec-base-tooltip .edge:before,.ec-base-tooltip .edge:after { display: inline-block; content: ""; position: absolute; top: 0; width: 0; height: 0; border: solid transparent; } .ec-base-tooltip .edge:before { margin: 1px 0 0; border-bottom-color: #565960; border-width: 0 5px 5px 5px; } .ec-base-tooltip .edge:after { left: 1px; margin: 2px 0 0; border-bottom-color: #fff; border-width: 0 4px 4px 4px; } .ec-base-tooltip.typeUpper { position: absolute; left: -90px !important; bottom: 33px !important; width: 200px; margin: 0; padding: 14px 28px 14px 14px; border: 1px solid #ccc; border-radius: 2px; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip.typeUpper:before { content: ""; position: absolute; left: 40%; bottom: -5px; display: inline-block; width: 0; height: 0; margin: -3px 0 0; border-left: 5px solid transparent; border-top: 5px solid #ccc; border-right: 5px solid transparent; } .ec-base-tooltip.typeUpper:after { content: ""; position: absolute; left: 40%; bottom: -4px; display: inline-block; width: 0; height: 0; margin: -3px 0 0; border-left: 5px solid transparent; border-top: 5px solid #fff; border-right: 5px solid transparent; } .ec-base-tooltip.typeUpper .edge { top: auto; bottom: -6px; } .ec-base-tooltip.typeUpper .edge:before { margin: 0 0 -5px; border-top-color: #ccc; border-width: 5px 5px 0 5px; } .ec-base-tooltip.typeUpper .edge:after { left: 1px; margin: 0 0 -4px; border-top-color: #fff; border-width: 4px 4px 0 4px; } .shippingFee { display: inline-block; vertical-align: middle; color: #000; margin-left: 10px; } .shippingFee > a.btnNormal { margin: -3px 0 0 5px; } .shippingFee .wrap h3 { line-height: 36px; } .shippingFee .wrap h4 { position: relative; margin: 0 7px 7px; } .shippingFee .wrap h4:before { display: inline-block; content: ""; margin: 0 5px 0 0; width: 3px; height: 3px; background: #666; vertical-align: middle; } .shippingFee .wrap table + h4 { margin-top: 14px; } .shippingFee .wrap p strong { font-weight: normal; font-size: 13px; } .shippingFee .wrap table { background: #fff; } .shippingFee .wrap th,.shippingFee .wrap td { padding: 7px; border: 1px solid #d5d5d5; } .shippingFee .wrap th { width: 80px; border-right-width: 0; } .shippingFee .wrap td { white-space: normal; } .shippingFee .wrap .info { margin: 0; color: #7d7d7d; } .shippingFee .ec-base-button { text-align: center; } .shippingFee .btnStrong { display: inline-block; padding: 12px 20px; height: 40px; font-size: 13px; box-sizing: border-box; border: 1px solid transparent; line-height: 1; font-weight: normal; text-decoration: none; vertical-align: middle; word-spacing: -0.5px; letter-spacing: 0; text-align: center; white-space: nowrap; color: #fff; background-color: #000; } @media all and (max-width: 1024px) { .ec-base-tooltip { width:88%; margin: 5px auto 0; } .ec-base-tooltip .edge { display: none; } .shippingFee { position: static; } } @media all and (min-width: 1025px) { .shippingFee { position:relative; } .shippingFee .ec-base-tooltip { margin: 10px 0 0 -150px; width: 360px; } } span.ec-base-help,p.ec-base-help,ul.ec-base-help li { margin: 2px 0; padding: 1px 0 1px 22px; font-size: 12px; line-height: 19px; color: #6d6d6d; background: url('//img.echosting.cafe24.com/skin/skin/common/ico_info.svg') no-repeat 0 0; } div.ec-base-help { margin: 50px 0 20px; line-height: 18px; } div.ec-base-help > h2,div.ec-base-help > h3 { display: block; margin: 0 0 20px; font-size: 16px; color: #000; } div.ec-base-help .inner { padding: 20px; border: 1px solid #e5e5e5; border-top: 1px solid #000; } div.ec-base-help h4 { margin: 22px 0 -4px; color: #000; font-size: 12px; font-weight: normal; } div.ec-base-help h4:first-child { margin-top: 0; } div.ec-base-help p,div.ec-base-help ul,div.ec-base-help ol { margin: 15px 0 0 0; } div.ec-base-help p,div.ec-base-help li { color: #6d6d6d; font-size: 12px; line-height: 21px; } div.ec-base-help p,div.ec-base-help ul li { padding: 0 0 0 12px; } div.ec-base-help p:before,div.ec-base-help ul li:before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 7px 9px 0 -12px; vertical-align: top; border-radius: 50%; background: #6d6d6d; } @media all and (max-width: 1024px) { span.ec-base-help,p.ec-base-help,ul.ec-base-help li { margin:10px 0; } div.ec-base-help > h2,div.ec-base-help > h3 { padding: 0 15px; } } .ec-base-fold { position: relative; } .ec-base-fold > .title { position: relative; z-index: 1; overflow: hidden; cursor: pointer; font-size: 13px; line-height: 1.3; -webkit-tap-highlight-color: rgba(255,255,255,0); display: -webkit-flex; display: -ms-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .ec-base-fold > .title h2,.ec-base-fold > .title h3 { display: inline-block; font-size: 13px; line-height: 1.3; } .ec-base-fold > .title:after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 100%; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .ec-base-fold > .contents { display: none; } .ec-base-fold .ec-base-fold { border-width: 1px 0 0; } .ec-base-fold .ec-base-fold + .ec-base-fold { margin-top: 0; } .ec-base-fold.selected > .title:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .ec-base-fold.selected > .contents { display: block; } .ec-base-fold.theme1 { position: relative; } .ec-base-fold.theme1 > .title { border-top: 1px solid #000; } .ec-base-fold.theme1 > .title h2 { padding: 25px 0; font-weight: normal; } .ec-base-fold.theme1 > .title h3 { padding: 20px 0; font-size: 13px; } .ec-base-fold.theme1 > .title:after { content: ""; position: absolute; top: 20px; right: 5px; overflow: hidden; display: inline-block; width: 10px; height: 10px; border-left: 1px solid #000; border-bottom: 1px solid #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ec-base-fold.theme1.selected > .title:after { top: 25px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .ec-base-fold.theme1.gBottomLine > .title { border-top: 0; border-bottom: 1px solid #000; } .ec-base-fold.theme1.gClearLine > .title { border-top: 0; border-bottom: 1px solid transparent; } .ec-base-fold.theme1 + .ec-base-fold.theme1 { margin-top: 30px; } .ec-base-fold.theme1.gBottomLine > .contents .ec-base-table,.ec-base-fold.theme1.gBottomLine .ec-base-fold > .contents .ec-base-table { border: 0; } @media all and (max-width: 1024px) { .ec-base-fold.theme1.gMargin { margin-left:16px; margin-right: 16px; } .cw-simpleboard .post{ border-bottom: 1px solid #e5e5e5; padding: 20px 20px 19px;} .cw-simpleboard .post:nth-child(1){border-top:1px solid #e5e5e5} .ec-base-fold.theme1 > .title { padding: 0 16px; } .ec-base-fold.theme1 > .title h2 { font-size: 16px; } .ec-base-fold.theme1 > .title:after { right: 21px; } .ec-base-fold.theme1.selected > .title:after { top: 32px; } .ec-base-fold.theme1 .ec-base-table.typeList { border-color: #e5e5e5 } } @media all and (min-width: 1025px) { .ec-base-fold.theme1 .title > h2 { font-size:18px; } } .ec-base-box { padding: 20px; margin-left: auto; margin-right: auto; border: 5px solid #e5e5e5; } .ec-base-box.gHalf { position: relative; padding: 20px 0; } .ec-base-box.gHalf:before { position: absolute; top: 0; left: 50%; display: block; content: ""; width: 1px; height: 100%; background-color: #e6e6e6; } .ec-base-box.typeBg { background-color: #fbfafa; } .ec-base-box.typeThin { border-width: 1px; border-color: #e5e5e5; } .ec-base-box.typeThin h3.boxTitle { margin: 0 0 20px; font-size: 16px; font-weight: normal; text-align: center; } .ec-base-box.typeThinBg { border-width: 1px; border-color: #d7d5d5; background-color: #fbfafa; } .ec-base-box.center { text-align: center; } .ec-base-box .headDesc { margin: 0 0 40px; font-size: 16px; line-height: 22px; color: var(--font-color-heading); } .ec-base-box.typeThin > .agree { color: #6d6d6d; font-size: 12px; background: #fff; } .ec-base-box.typeThin > .agree p { padding: 0 0 30px; } .ec-base-box.typeMember { border-width: 1px; border-color: #e5e5e5; } .ec-base-box.typeMember h3.boxTitle { margin: 0 0 20px; font-size: 16px; font-weight: normal; text-align: center; } .ec-base-box.typeMember .content { margin: 0 auto; text-align: center; } .ec-base-box.typeMember input[type="text"],.ec-base-box.typeMember input[type="password"],.ec-base-box.typeMember select { width: 100%; } .ec-base-box.typeMember .info { font-size: 13px; line-height: 20px; color: #6d6d6d; } .ec-base-box.typeMember .information { display: table; table-layout: fixed; padding: 10px 0; width: 100%; box-sizing: border-box; } .ec-base-box.typeMember .information > .title,.ec-base-box.typeMember .information > .thumbnail { display: table-cell; padding: 0 15px; width: 70px; text-align: center; vertical-align: middle; } .ec-base-box.typeMember .information > .title { vertical-align: middle; } .ec-base-box.typeMember .information > .thumbnail img { max-width: 70px; } .ec-base-box.typeMember .information .description { display: table-cell; padding: 0 10px; width: auto; line-height: 1.5em; border-left: 1px solid #e8e8e8; vertical-align: middle; } .ec-base-box.typeMember.gMessage { border-width: 1px; border-color: #d7d5d5; } .ec-base-box.typeProduct { display: table; table-layout: fixed; padding: 10px; width: 100%; box-sizing: border-box; border: 10px solid #f6f6f6; } .ec-base-box.typeProduct .thumbnail,.ec-base-box.typeProduct .information { display: table-cell; vertical-align: top; position: relative; } .ec-base-box.typeProduct .thumbnail { width: 85px; } .ec-base-box.typeProduct .thumbnail img { max-width: 65px; } @media all and (max-width: 1024px) { .ec-base-box.gPadding { padding:50px 18px 40px; } .ec-base-box.typeMember { padding: 50px 18px 40px; } } @media all and (min-width: 768px) and (max-width:1024px) { .additionalInfo { margin:0 24px; } } @media all and (min-width: 1025px) { .ec-base-box.gPadding { padding:74px 0; } .ec-base-box.typeMember { padding: 74px 0; } .ec-base-box.typeMember .content { width: 421px; } } .ec-base-desc { overflow: hidden; text-align: left; } .ec-base-desc:after { content: ""; display: block; clear: both; } .ec-base-desc dt,.ec-base-desc .term { float: left; width: 100px; margin: 0 0 2px; padding: 0 4px 0 0; line-height: 22px; -webkit-box-sizing: border-box; -moz-webkit-box: border-box; box-sizing: border-box; font-weight: normal; } .ec-base-desc dd,.ec-base-desc .desc { display: block; margin: 0 0 2px; padding: 0 5px 0 100px; min-height: 22px; line-height: 22px; word-wrap: break-word; word-break: break-all; } .ec-base-desc dd:after,.ec-base-desc .desc:after { content: ""; display: block; clear: left; } .ec-base-desc.gSmall dt,.ec-base-desc.gSmall .term { width: 30%; } .ec-base-desc.gSmall dd,.ec-base-desc.gSmall .desc { padding-left: 30%; } .ec-base-desc.gMedium dt,.ec-base-desc.gMedium .term { width: 40%; } .ec-base-desc.gMedium dd,.ec-base-desc.gMedium .desc { padding-left: 40%; } .ec-base-desc.gLarge dt,.ec-base-desc.gLarge .term { width: 50%; } .ec-base-desc.gLarge dd,.ec-base-desc.gLarge .desc { padding: 0 0 0 50%; } .ec-base-desc.gVer dt,.ec-base-desc.gVer dd,.ec-base-desc.gVer .term,.ec-base-desc.gVer .desc { display: block; float: none; width: 100%; } .ec-base-desc.gVer dd,.ec-base-desc.gVer .desc { margin: 10px 0 20px; padding: 0; } .ec-base-desc.centerDT dt,.ec-base-desc.centerDD dd,.ec-base-desc.centerDT .term,.ec-base-desc.centerDD .desc,.ec-base-desc.center,.ec-base-desc .center { text-align: center; } .ec-base-desc.rightDT dt,.ec-base-desc.rightDD dd,.ec-base-desc.rightDT .term,.ec-base-desc.rightDD .desc,.ec-base-desc.right,.ec-base-desc .right { text-align: right; } .ec-base-desc.rightDD dd,.ec-base-desc.rightDD .desc { padding-right: 0; } .ec-base-desc.typeDot dt,.ec-base-desc.typeDot .term { position: relative; padding: 0 4px 0 10px; } .ec-base-desc.typeDot dt:before,.ec-base-desc.typeDot .term:before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 2px; height: 2px; margin: -2px 0 0 0; background: #383838; } .xans-product-listmore { margin: 60px 0 80px; } .ec-base-product { margin: 22px 0 0; } .ec-base-product .title { margin: 0 0 17px; } .ec-base-product .title h2 { font-weight: normal; font-size: 30px; color: #2e2e2e; text-align: center; } .ec-base-product .title h3 { font-weight: normal; color: #2e2e2e; text-align: center; } .ec-base-product img { vertical-align: middle; } .ec-base-product a[href^='/skin-skin1/product/detail.html'] > img { border: 1px solid #ececec; } .ec-base-product .prdList { margin: 0 auto; text-align: left; font-size: 0; line-height: 0; } .ec-base-product .prdList > li { display: inline-block; margin: 0; color: #757575; vertical-align: top; background: #fff; border-radius: 20px; overflow: hidden; position: relative; } .ec-base-product .prdList .prdList__item { margin: 0; overflow: hidden; } .ec-base-product .prdList .chk { position: absolute; top: -10px; left: 0; right: 0; display: block; margin: 0 0 10px; } .ec-base-product .prdList .thumb,.ec-base-product .prdList .thumbnail { position: relative; text-align: center; width: auto; white-space: normal; } .ec-base-product .prdList .thumbnail a { display: block; } .ec-base-product .prdList .thumbnail a img { width: 100%; max-width: none; aspect-ratio: 1; } .ec-base-product .prdList .thumb { position: relative; margin: 0 0 10px; } .ec-base-product .prdList .thumb .img img { width: 100%; height: 100%; } .ec-base-product .prdList .thumbnail { position: relative; margin: 0; } .ec-base-product .prdList .thumbnail a img { width: 100%; max-width: 100%; box-sizing: border-box; } .ec-base-product .prdList .icon__box { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; } .ec-base-product .prdList .icon__box span + span { margin: 12px 0 0; } .ec-base-product .prdList .wish { z-index: 1; display: block; width: 30px; cursor: pointer; } .ec-base-product .prdList .wish img { max-width: 100%; } .ec-base-product .prdList .cart { z-index: 1; display: block; width: 30px; cursor: pointer; } .ec-base-product .prdList .cart img { max-width: 100%; } .ec-base-product .prdList .thumbnail .prdIcon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; } .ec-base-product .prdList .thumbnail .icon { vertical-align: middle; } .ec-base-product .prdList .thumbnail .icon:after { content: ""; display: block; clear: both; } .ec-base-product .prdList .thumbnail .benefit { position: absolute; left: 0; bottom: 0; } .ec-base-product .prdList .icon { margin: 14px 0 0; text-align: left; } .ec-base-product .prdList .icon img { margin: 0 4px 0 0; max-height: 23px; } .ec-base-product .prdList .description { margin: 36px 24px 30px; padding: 0; font-size: 12px; line-height: 18px; text-align: left; white-space: normal; } .ec-base-product .prdList .description p.cate { color: #22362B; font-size: 12px; height: 20px; line-height: 20px; margin-bottom: 5px; } .ec-base-product .prdList .description .name { display: block; text-align: left; font-weight: normal; } .ec-base-product .prdList .description .name a { } .ec-base-product .prdList .description .name a span { color: #22362B!important; ;font-size: 22px!important; font-weight: 600; } .ec-base-product .prdList .description span.grid { display: block; } .ec-base-product ul.prdList { display: grid; gap: 30px 10px; } .ec-base-product ul.grid2 { grid-template-columns: repeat(2,1fr); } .ec-base-product ul.grid3 { grid-template-columns: repeat(3,1fr); } .ec-base-product ul.grid4 { grid-template-columns: repeat(4,1fr); } .ec-base-product ul.grid5 { grid-template-columns: repeat(5,1fr); } .ec-base-product ul.grid3 .color { max-width: 230px; } .ec-base-product ul.grid4 .color { max-width: 190px; } .ec-base-product ul.grid5 .color { max-width: 130px; } .ec-base-product ul.grid2 li:after { content: ""; display: block; clear: both; } .ec-base-product ul.grid2 li .thumbnail { text-align: left; margin: 0; } .ec-base-product ul.grid2 li .description { padding: 0; } .ec-base-product ul.grid2 li .description .chk { position: static; text-align: left; } .ec-base-product .spec { margin: 12px 0 0; } .ec-base-product .spec > li { margin: 0 0 14px; text-align: left; line-height: 19px; } .ec-base-product .spec > li.custom_option1 { display: none; } .ec-base-product .spec > li.price { margin-bottom: 14px; color: #000; font-size: 16px; } .ec-base-product .spec > li.price ~ .sale { margin-bottom: 14px; color: #000; font-size: 16px; } .ec-base-product .spec .summary { color: #6d6d6d; font-size: 12px; } .ec-base-product .spec .color { overflow: hidden; display: inline-block; margin: 3px 0 0 0; line-height: 1; } .ec-base-product .spec .chips { display: inline-block; width: 10px; height: 10px; margin: 0 2px 2px 0; border: 1px solid #e3e3e3; font-size: 0; line-height: 0; } .ec-base-product .discountPeriod { display: inline-block; z-index: 10; position: relative; width: 55px; height: 19px; vertical-align: middle; } .ec-base-product .layerDiscountPeriod strong.title { display: block; margin: 0 0 12px; padding: 0 35px 0 0; font-weight: bold; color: #2e2e2e; } .ec-base-product .layerDiscountPeriod .content p { margin: 2px 0 0; font-size: 11px; line-height: 16px; color: #757575; letter-spacing: -1px; } .ec-base-product .layerDiscountPeriod .content p strong { font-weight: normal; font-size: 12px; color: #2e2e2e; } .ec-base-product .layerDiscountPeriod .content p strong span { font-size: 11px; } .ec-base-product .prdList .shippingFee { position: relative; display: inline-block; } .ec-base-product .prdList .shippingFee .button { display: inline-block; float: none; } .ec-base-product .prdList .shippingFee .ec-base-tooltip { z-index: 11; display: block; margin: 0 0 0 -170px; width: 360px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th { width: 40px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th,.ec-base-product .prdList .shippingFee .ec-base-tooltip table td { padding: 7px 10px 8px 10px; } .ec-base-product .btnTooltip { display: inline-block; } .differentialShipping { display: none; overflow: hidden; position: absolute; z-index: 100; border: 1px solid #000; background: #fff; } .differentialShipping h3.title { height: 60px; margin: 0 20px; padding: 20px 0; font-size: 16px; color: #000; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; } .differentialShipping .content { padding: 12px 18px 14px 18px; border-top: 0; text-align: center; background: #fff; } .differentialShipping .close { position: absolute; right: 14px; top: 16px; width: 20px; height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .differentialShipping .close a { position: relative; z-index: 1; display: block; width: 100%; height: 100%; } .differentialShipping .close:before { content: ""; position: absolute; top: 0; right: 10px; width: 1px; height: 21px; background: #000; } .differentialShipping .close:after { content: ""; position: absolute; top: 10px; right: 0; width: 21px; height: 1px; background: #000; } .differentialShipping .close img { display: none; } .differentialShipping .content ul { color: #757575; line-height: 25px; } .differentialShipping .content li { overflow: hidden; } .differentialShipping .content li strong { float: left; font-weight: normal; } .differentialShipping .content li span { float: right; color: #2e2e2e; } .differentialShipping .content .info { margin: 7px 0 0; padding: 7px 0 0; border-top: 1px dotted #b0b1b3; color: #80aeef; text-align: right; } .ec-product-bgLT { background-position: left top; } .ec-product-bgLC { background-position: left center; } .ec-product-bgLB { background-position: left bottom; } .ec-product-bgRT { background-position: right top; } .ec-product-bgRC { background-position: right center; } .ec-product-bgRB { background-position: right bottom; } .ec-product-bgCT { background-position: center top; } .ec-product-bgCC { background-position: center center; } .ec-product-bgCB { background-position: center bottom; } @media all and (max-width: 767px) { .ec-base-product ul.grid4 { grid-template-columns: repeat(2,1fr); } .ec-base-product ul.grid5 { grid-template-columns: repeat(2,1fr); } .ec-base-product .prdList { margin: 0 -5px 0; } .ec-base-product .prdList .wish { width: 22px; } } @media all and (max-width: 1024px) { .ec-base-product .title h3 { margin:40px 0 20px; font-size: 16px; } .ec-base-product ul.grid3 { grid-template-columns: repeat(1,1fr); } .ec-base-product ul.grid4 { grid-template-columns: repeat(2,1fr); } .ec-base-product ul.grid5 { grid-template-columns: repeat(2,1fr); } .ec-base-product .discountPeriod { position: static; } .ec-base-product .btnTooltip { position: static; } .differentialShipping { left: 0; right: 0; width: 88%; margin: 10px auto 0; } } @media all and (min-width: 768px) and (max-width:1024px) { .ec-base-product ul.grid3 { grid-template-columns: repeat(1,1fr); } .ec-base-product ul.grid4 { grid-template-columns: repeat(2,1fr); } .ec-base-product ul.grid5 { grid-template-columns: repeat(2,1fr); } .ec-base-product .prdList { margin: 0 auto; } } @media all and (min-width: 1025px) { .ec-base-product .title h3 { margin:50px 0 25px; font-size: 20px; } .ec-base-product .layerDiscountPeriod { left: 50%; top: 26px; width: 247px; margin: 0 0 0 -124px; } .ec-base-product .btnTooltip { position: relative; } .differentialShipping { left: 50%; top: 17px; width: 350px; margin: 0 0 0 -176px; } } .ec-base-prdInfo { position: relative; border-bottom: 1px solid #ddd; box-sizing: border-box; background: #fff; } .ec-base-prdInfo .prdBox { display: -webkit-flex; display: -ms-flex; display: flex; flex: 1; flex-wrap: wrap; } .ec-base-prdInfo .check { display: inline-block; margin: 0 10px 0 0; } .ec-base-prdInfo .check label { margin: 0; } .ec-base-prdInfo .thumbnail { overflow: hidden; width: 83px; height: 83px; margin: 0 15px 0 0; border: 1px solid #d5d5d5; box-sizing: border-box; } .ec-base-prdInfo .thumbnail img { width: 100%; } .ec-base-prdInfo .description { -webkit-flex: 1; -ms-flex: 1; flex: 1; line-height: 18px; } .ec-base-prdInfo .description .prdName { display: block; margin: 0 0 3px; font-weight: normal; } .ec-base-prdInfo .description .prdName a { color: #000; } .ec-base-prdInfo .description .prdName .ec-set-product-name { display: block; margin: 0 0 3px; } .ec-base-prdInfo .description .prdName img { margin: 0 1px; vertical-align: middle; } .ec-base-prdInfo .description .price,.ec-base-prdInfo .description .price li { font-size: 13px; color: #000; line-height: 20px; } .ec-base-prdInfo .description .price strong { font-weight: normal; } .ec-base-prdInfo .description .price .refer { font-weight: normal; font-size: 11px; } .ec-base-prdInfo .description .price .discount { font-weight: normal; text-decoration: line-through; } .ec-base-prdInfo .description .price .strike { font-weight: normal; text-decoration: line-through; } .ec-base-prdInfo .description .price .strike strong { font-weight: normal; } .ec-base-prdInfo .description .info { margin: 5px 0 0; } .ec-base-prdInfo .description .info li { margin: 0 0 3px; font-size: 12px; color: #7d7d7d; } .ec-base-prdInfo .description .info a { color: #7d7d7d; } .ec-base-prdInfo .description .info .mileage { display: inline-block; } .ec-base-prdInfo .description .info .mileage img { vertical-align: text-top; } .ec-base-prdInfo .description input[type="number"] { max-width: 51px; } .ec-base-prdInfo .description .info .amount button { margin: 0; padding: 0; border: 0; } .ec-base-prdInfo .description .info .amount { width: 50px; } .ec-base-prdInfo .description .info input.amount { text-align: right; } .ec-base-prdInfo .description input[type="tel"] { text-align: right; } .ec-base-prdInfo .description .quantity input[type="tel"] { width: 51px; } .ec-base-prdInfo .sumPrice strong { font-size: 16px; } .ec-base-prdInfo .quantity { margin: 20px 0 0; padding: 0 0 0 98px; box-sizing: border-box; width: 100%; } .ec-base-prdInfo.gCheck .quantity { padding: 0 0 0 125px; } .ec-base-prdInfo .btnDelete { display: block; position: absolute; top: 20px; right: -5px; overflow: hidden; width: 30px; height: 30px; margin: 0 auto; font-size: 1px; line-height: 0; color: transparent; white-space: nowrap; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ec-base-prdInfo .btnDelete:before { content: ""; position: absolute; top: 4px; right: 14px; width: 1px; height: 21px; background: #b5b5b5; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .ec-base-prdInfo .btnDelete:after { content: ""; position: absolute; top: 14px; right: 4px; width: 21px; height: 1px; background: #b5b5b5; -webkit-transition: .3s ease-out; transition: .3s ease-out; } .ec-base-prdInfo .optionGroup { margin: 15px 0 0; } .ec-base-prdInfo .optionGroup:empty { margin-top: 0; } .ec-base-prdInfo .optionGroup li { margin: 5px 0 0; line-height: 20px; color: #7d7d7d; } .ec-base-prdInfo .optionGroup .optionName { line-height: 18px; word-break: break-all; } .ec-base-prdInfo .optionGroup li .product { display: block; margin: 8px 0 0; color: #000; } .ec-base-prdInfo .optionGroup li .change { margin: 0 0 0 5px; white-space: nowrap; } .ec-base-prdInfo .optionGroup .product.displaynone + .optionStr { display: inline-block; margin-right: 10px; color: #000; } .ec-base-prdInfo .optionGroup .product.displaynone + .optionStr:empty { margin-right: 0; } .ec-base-prdInfo .optionGroup li br { display: none; } .ec-base-prdInfo .optionGroup .file a { color: #07a4fd; text-decoration: underline; word-break: break-all; } .ec-base-prdInfo .optionSelect { padding: 10px 20px 20px; background: #f6f6f6; } .ec-base-prdInfo .optionSelect li { margin: 10px 0 0; } .ec-base-prdInfo .optionSelect select,.ec-base-prdInfo .optionSelect input { width: calc(100% - 258px); } .ec-base-prdInfo .optionSelect + .optionSelect { margin-top: -34px; padding-top: 0; } .ec-base-prdInfo .optionDesc { display: inline-block; width: 254px; color: #545454; } .ec-base-prdInfo .prdFoot { line-height: 26px; border-top: 1px solid #e5e5e5; } .ec-base-prdInfo .prdFoot:after { content: ''; display: block; clear: both; } .ec-base-prdInfo .prdFoot .gLeft { float: left; text-align: left; line-height: 32px; } .ec-base-prdInfo .prdFoot .gRight { float: right; text-align: right; } .ec-base-prdInfo .prdFoot .txtStatus { display: inline-block; margin-right: 10px; font-size: 16px; font-weight: bold; } .ec-base-prdInfo .prdFoot .store { color: #000; font-weight: normal; } .ec-base-prdInfo .prdFoot span span.discount { text-decoration: line-through; } .ec-base-prdInfo .prdFoot span span.discount strong { font-weight: normal; } .ec-base-prdInfo .optionModifyLayer { display: none; } .ec-base-prdInfo .optionModifyLayer .dimmed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.3); } .ec-base-prdInfo .optionModifyLayer .title { display: block; margin: 0 0 6px; font-size: 13px; } .ec-base-prdInfo .optionModifyLayer .prdInfo { font-size: 13px; } .ec-base-prdInfo .optionModifyLayer .prdInfo li { margin: 0 0 20px; } .ec-base-prdInfo .optionModifyLayer .prdInfo li:empty { margin: 0; } .ec-base-prdInfo .optionModifyLayer .prdModify li { display: flex; margin: 10px 0 0; } .ec-base-prdInfo .optionModifyLayer .prdModify li:first-child { margin-top: 0; } .ec-base-prdInfo .optionModifyLayer .prdModify .optionDesc { display: inline-block; width: 89px; padding: 11px 0 0; font-size: 13px; color: #545454; } .ec-base-prdInfo .optionModifyLayer .prdModify li select { flex: 1; width: 100%; } .ec-base-prdInfo .optionModifyLayer .prdModify li input[type=text] { flex: 1; width: 100%; } .orderArea .ec-base-fold .ec-base-prdInfo { border-bottom: 1px solid #d5d5d5; } .orderConfirmLayer .orderArea .ec-base-prdInfo { border-bottom: 0; } .orderArea .ec-base-prdInfo + .ec-base-prdInfo { border-top: 1px solid #d5d5d5; } .ec-base-prdEmpty { text-align: center; color: #6d6d6d; border-top: 1px solid #000; border-bottom: 1px solid #e5e5e5; } @media all and (max-width: 1024px) { .ec-base-prdInfo .prdBox { padding:24px 16px; } .ec-base-prdInfo .description { padding: 0 40px 0 0; } .ec-base-prdInfo .sumPrice { margin: 20px 0 0; padding: 0 0 0 98px; box-sizing: border-box; width: 100%; } .ec-base-prdInfo .buttonGroup { margin: 10px 0 0; padding: 0 0 0 98px; box-sizing: border-box; width: 100%; } .ec-base-prdInfo .buttonGroup [class^='btn'] { margin: 10px 5px 0 0; } .ec-base-prdInfo.gCheck .sumPrice,.ec-base-prdInfo.gCheck .quantity,.ec-base-prdInfo.gCheck .buttonGroup { padding: 0 0 0 125px; } .ec-base-prdInfo .btnDelete { right: 12px; } .ec-base-prdInfo .optionSelect { margin: 0 16px 24px; padding: 10px 20px 20px; } .ec-base-prdInfo .optionSelect li { margin: 10px 0 0; } .ec-base-prdInfo .optionSelect select,.ec-base-prdInfo .optionSelect input { width: 100%; } .ec-base-prdInfo .optionSelect + .optionSelect { margin-top: -34px; padding-top: 0; } .ec-base-prdInfo .optionDesc { display: block; margin: 0 0 10px; color: #545454; } .ec-base-prdInfo .prdFoot { padding: 18px 16px; } .optionModifyLayer .ec-base-button { display: flex; } .optionModifyLayer .ec-base-button [class*='Fix'] { flex: 1; min-width: auto; } .ec-base-prdEmpty { padding: 40px 0; } } @media all and (min-width: 1025px) { .ec-base-prdInfo .prdBox { position:relative; padding: 25px 0; } .ec-base-prdInfo .description { margin: 0 250px 0 0; } .ec-base-prdInfo .sumPrice { text-align: right; padding: 0 42px 0 0; } .ec-base-prdInfo .buttonGroup { position: absolute; bottom: 25px; right: 0; width: 300px; text-align: right; } .ec-base-prdInfo .btnDelete { right: -5px; } .ec-base-prdInfo .optionSelect { margin: 0 0 24px 98px; padding: 10px 20px 20px; } .ec-base-prdInfo .optionSelect li { margin: 10px 0 0; } .ec-base-prdInfo .optionSelect select,.ec-base-prdInfo .optionSelect input { width: calc(100% - 258px); } .ec-base-prdInfo .optionSelect + .optionSelect { margin-top: -34px; padding-top: 0; } .ec-base-prdInfo .optionDesc { width: 254px; } .ec-base-prdInfo .prdFoot { padding: 18px 0; } .optionModifyLayer .ec-base-layer { width: 485px; } .ec-base-prdEmpty { padding: 56px 0; } } .ec-base-paginate.typeList { margin: 60px 0; text-align: center; font-size: 0; line-height: 0; } .ec-base-paginate.typeList > a { display: inline-block; width: 40px; line-height: 40px; text-align: center; background: #fff; box-sizing: border-box; } .ec-base-paginate.typeList > a::after,.ec-base-paginate.typeList > a:first-child::before,.ec-base-paginate.typeList > a:last-child::before { content: ''; display: inline-block; width: 7px; height: 7px; border-width: 1px 1px 0 0; border-style: solid; border-color: #000; vertical-align: middle; transform: rotate(45deg); } .ec-base-paginate.typeList > a:first-child::before,.ec-base-paginate.typeList > a:last-child::before { margin: 0 -3px; } .ec-base-paginate.typeList > a:first-child::after,.ec-base-paginate.typeList > a:first-child::before,.ec-base-paginate.typeList > a:first-child + a::after { transform: rotate(-135deg); } .ec-base-paginate.typeList ol { display: inline-block; font-size: 0; line-height: 0; vertical-align: middle; } .ec-base-paginate.typeList li { display: inline-block; margin: 0 0 0 -1px; vertical-align: top; } .ec-base-paginate.typeList li:first-child { margin-left: 0; } .ec-base-paginate.typeList img { vertical-align: top; } .ec-base-paginate.typeList li a { display: block; width: 40px; padding: 12px 0; font-size: 12px; color: #6d6d6d; border: 1px solid #e5e5e5; line-height: 14px; background: #fff; box-sizing: border-box; } .ec-base-paginate.typeList a:hover { text-decoration: none; } .ec-base-paginate.typeList a.this { position: relative; z-index: 1; color: #000; border-color: #000; } .ec-base-paginate.typeList a.nolink { cursor: default; } .ec-base-paginate.typeSwipe { text-align: center; } .ec-base-paginate.typeSwipe .prev,.ec-base-paginate.typeSwipe .next { display: none; } .ec-base-paginate.typeSwipe [id*='swipe-button'] button { display: inline-block; margin: 0 7px; width: 8px; height: 8px; overflow: hidden; font-size: 1px; line-height: 0; text-indent: -9999px; border-radius: 100%; background: #000; opacity: .2; } .ec-base-paginate.typeSwipe [id*='swipe-button'] button.selected { opacity: 1; } @media all and (max-width: 767px) { .ec-base-paginate.typeList { display:flex; justify-content: center; margin-bottom: 50px; } .ec-base-paginate.typeList li { margin-bottom: 10px; } } /* BASIC css end */