.xans-product-menupackage { margin:0 0 27px; }
.xans-product-menupackage .title { min-height:30px; margin:10px 0 20px; }
.xans-product-menupackage .title .banner { margin:0 0 20px; }
.xans-product-menupackage .title h2 { color:#4a5164; font-size:16px; }
.xans-product-menupackage .title h2,
.xans-product-menupackage .title .likeButton { display:inline-block; vertical-align:middle; }
.xans-product-menupackage .title .likeButton button { margin:0 0 0 10px; padding:0 0 0 20px; height:16px; font-family:verdana; color:#9a9a9a; letter-spacing:-1px; background:none; }
.xans-product-menupackage .title .likeButton.selected button { color:#353535; }
.xans-product-menupackage .menuCategory { border:1px solid #d7d5d5; font-size:0; line-height:0; }
.xans-product-menupackage .menuCategory > li { display:inline-block; width:175px; margin:15px 0 15px 20px; padding:0 5px 0 0; font-size:12px; line-height:14px; vertical-align:top; }
.xans-product-menupackage .menuCategory > li > a { padding:0 13px 0 0; font-weight:bold; color:#2e2e2e; background:url("//img.echosting.cafe24.com/skin/base_ko_KR/product/ico_menu_category.gif") no-repeat 100% 5px; }
.xans-product-menupackage .menuCategory > li > a:hover { color:#008bcc; text-decoration:none; background-position:100% -95px }
.xans-product-menupackage .menuCategory > li.selected > a { color:#008bcc; }
.xans-product-menupackage .menuCategory > li .count { font-weight:normal; }
.xans-product-menupackage .menuCategory > li > ul { padding:6px 0 0 0; }
.xans-product-menupackage .menuCategory > li > ul > li { margin:8px 0 0 0; line-height:14px; }
.xans-product-menupackage .menuCategory > li > ul > li > a { color:#575a63; }
.xans-product-menupackage .menuCategory > li > ul > li > a:hover,
.xans-product-menupackage .menuCategory > li > ul > li.selected > a { color:#008bcc; }
.xans-product-menupackage .menuCategory > li > ul > li > .button { display:inline-block; position:relative; width:9px; height:14px; margin:1px 0 0 3px; vertical-align:top; }
.xans-product-menupackage .subCategory { display:none; position:absolute; left:50%; top:13px; z-index:11; width:300px; margin:0 0 0 -151px; padding:6px 0; border:1px solid #565960; font-size:0; line-height:0; background:#fff url("//img.echosting.cafe24.com/skin/base_ko_KR/product/bg_sub_category_line.gif") repeat-y 150px 0; }
.xans-product-menupackage .subCategory li { display:inline-block; width:130px; margin:8px 0 8px 18px; font-size:12px; line-height:14px; vertical-align:top; }
.xans-product-menupackage .subCategory li a { color:#575a63; }
.xans-product-menupackage .subCategory li a:hover,
.xans-product-menupackage .subCategory li.selected a { color:#008bcc; }
.xans-product-menupackage .menuCategory .button.selected { z-index:11; }
.xans-product-menupackage .menuCategory .button.selected .subCategory { display:block; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
.xans-product-menupackage .gInner {margin: 0 16px;}
}
/********************* Tablet *********************/
@media all and (min-width:768px) {
.xans-product-menupackage .gInner {margin: 0 24px;}
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.xans-product-menupackage { margin:0 0 27px; }
}
.xans-product-normalmenu .function { overflow:hidden; text-align:right; line-height:38px; }
.xans-product-normalmenu .function .btnCompare { display:inline-block; padding:0 12px; border-left:1px solid #d7d5d5; }
.xans-product-normalmenu .function .btnCompare:hover { text-decoration:none; }
.xans-product-normalmenu .prdCount { float:left; color:#7d7d7d; font-size:16px; line-height:normal; }
.xans-product-normalmenu .prdCount strong { margin-left:8px; }
.xans-product-normalmenu fieldset { margin:20px 0 0; padding:10px 16px; text-align:right; background:#fbf9fa; }
.xans-product-normalmenu .discoutPeriod:hover { transform:translate(5px 5px); }
.xans-product-listnormal .discountPeriod:hover .layerDiscountPeriod {display:block !important;}
/********************* Mobile *********************/
@media all and (max-width:767px) {
.xans-product-normalmenu {padding: 0 16px;}
.xans-product-normalpackage .product_area {margin: 0 16px;}
.xans-product-normalmenu .prdCount { font-size:14px; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.xans-product-normalmenu { margin:40px 0 0; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width: 1024px){
.xans-product-normalmenu { padding:20px 24px 0; }
.xans-product-normalpackage .product_area { margin:0 24px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.xans-product-normalmenu { margin:40px 0 0; padding:40px 0 0; }
#container #contents { max-width:1280px; }
}
@charset "utf-8";
/* **************************** //필수 CSS ìˆ˜ì • ë° ì‚ì œ 불가 **************************** */
/* tag reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
html { width:100%; height:100%; }
body,code { font-size:13px; font-family: "Noto-Sans-CJK-KR","Segoe-UI","ë§‘ì€ ê³ ë”•","malgun gothic","ë‹ì›€","dotum",sans-serif; color:#000; color:var(--font-color-base); background:#fff; }
body { min-width:360px; max-width:1920px; }
body#popup { min-width:0; }
li { list-style:none; }
img,fieldset { border:none; vertical-align:top; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
input,select,textarea { font-size:100%; font-family:"Noto-Sans-CJK-KR","Segoe-UI","ë§‘ì€ ê³ ë”•","malgun gothic","ë‹ì›€","dotum",sans-serif; color:#000; color:var(--font-color-base); vertical-align:middle; border-radius:0; box-sizing:border-box; }
button { font-family:"Noto-Sans-CJK-KR","Segoe-UI","ë§‘ì€ ê³ ë”•","malgun gothic","ë‹ì›€","dotum",sans-serif; overflow:visible; padding:0; margin:0; border:0; cursor:pointer; background:none; }
hr.layout { display:none; }
a { text-decoration:none; color:#000; color:var(--font-color-base); }
a:hover { text-decoration:underline; }
a:active { text-decoration:none; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
#content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; }
#content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; }
#content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; }
#progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=40); opacity:0.3; background-color:#000; }
#progressPaybarView { position:fixed; z-index:100; top:50%; left:0; right:0; transform:translateY(-50%); }
#progressPaybarView h3 { font-size:32px; color:#444b59; }
#progressPaybarView .box { width:586px; margin:0 auto; padding:67px 0; text-align:center; background:#fff; }
#progressPaybarView .box .txt { margin:8px 0 36px; font-size:15px; line-height:26px; color:#667084; }
/* contents */
#skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;}
#skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;}
#skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;}
#skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;}
.displaynone { display:none; }
.dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); }
.blind { display: block; overflow: hidden; position: absolute; font-size: 1px; line-height: 0; color: transparent; text-indent: -150%; white-space: nowrap;}
/* IE Not Supoorted */
:root {
--font-color-base:#000;
--font-color-heading:#000;
--font-color-primary:#000;
--font-color-secondary:#ef441f;
--font-color-warn:#ec2a1d;
--font-color-success:#0985df;
}
/* **************************** 필수 CSS ìˆ˜ì • ë° ì‚ì œ 불가 **************************** */
@charset "utf-8";
/* Layout */
#header { box-sizing:border-box; }
.searchExpand #header { background:#fff; box-shadow: 0 2px 3px rgba(0,0,0,0.1) }
#header .topArea { position:relative; }
#header .navigation .btnNav { overflow:hidden; white-space:nowrap; font-size:1px; color:transparent; line-height:1px; width:24px; height:24px; background:none; }
#header .navigation__util .menu { display:inline-block; overflow:hidden; width:24px; height:24px; margin-left:15px; font-size:1px; line-height:1px; color:transparent; white-space:nowrap; text-indent:150%; vertical-align:top; background:none; }
#topBanner { position:relative; overflow:hidden; height:38px; text-align:center; background:#000; }
#topBanner .desc { overflow:hidden; height:16px; margin:11px 56px; font-size:12px; color:#fff; box-sizing:border-box; }
#topBanner .btnClose { position:absolute; right:50px; top:10px; width:13px; height:13px; background:none; overflow:hidden; white-space:nowrap; text-indent:150%; font-size:1px; color:transparent; line-height:1px; }
#topBanner.hidden { display:none; }
#footer { background:#f6f6f6; }
#footer .inner { overflow:hidden; position:relative; }
.dimmed { display:none; z-index:1000; position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
/********************* Mobile *********************/
@media all and (max-width:767px) {
/* responsive class */
.RTI, .RTB, .RTIB { display:none !important; }
.RMB { display:block !important; }
.RMI { display:inline !important; }
.RMIB { display:inline-block !important; }
header#header { position:static; height:60px; background:#fff; }
#header { height:60px; background:#fff; border-bottom:1px solid #e5e5e5; transition:0.3s;}
#header .navigation__util { right:16px; }
#header .navigation .btnNav { top:20px; }
#main #header.fixed { position:fixed; background:#fff; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
/* responsive class */
.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; }
#header { width:100%; height:80px; top:0; z-index:11; }
#main #header { position:absolute; background:transparent; border-bottom:0; }
#header { background:#fff; border-bottom:1px solid #e5e5e5; }
#header .navigation .btnNav { position:absolute; right:18px; z-index:22;}
#header .navigation__util { position:absolute; top:18px; display:none; }
.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,0,0); transform: translate3d(0,0,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: -20px; right:16px; width:40px; height:40px; padding:7px 0 0; font-size:14px; border:1px solid #e3e3e3; border-radius:50%; box-sizing:border-box; text-align:center; text-transform: uppercase; background:rgba(256,256,256,0.3); transition:.5s; cursor:pointer; }
.bottom-nav__top:hover { background:rgba(0,0,0,0.05); }
.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; }
#contents { position:relative; padding:0 0 100px 0; }
main#contents { padding-bottom:0; }
#footer { padding:0 0 42px; }
#topBanner { height:auto; }
#topBanner .desc { overflow:visible; height:auto; line-height:1.67; }
#topBanner .btnClose { right:16px; top:12px; }
.xans-layout-mobileaction { position:absolute; top:100px; left:-150px; }
.xans-layout-mobileaction a { overflow:hidden; display:block; text-indent:-150%; color:transparent; font-size:1px; line-height:1px; white-space:nowrap; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
/* responsive class */
.RMI, .RMB, .RMIB { display:none !important; }
.RTI { display:inline !important; }
.RTB { display:block !important; }
.RTIB { display:inline-block !important; }
#header { height:80px; }
#header .navigation__util { display:none; }
#header .navigation .btnNav { top:28px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
/* responsive class */
.RMI, .RMB, .RMIB, .RTI, .RTB, .RTIB, .RTMI, .RTMB { display:none !important; }
.RWI { display:inline !important; }
.RWB { display:block !important; }
.RWIB { display:inline-block !important; }
#main.searchExpand #header.fixed { background:#fff; box-shadow: 0 2px 3px rgba(0,0,0,0.1); }
#main #contents { padding:0 }
#header { position:absolute; top:0; width:100%; height:100px; background:#transparent; transition: .5s; z-index:1002; }
#main #header { padding-top:10px; height:120px; }
#main #header.fixed { position:fixed; height:100px; padding-top:0px; background:#fff; border:none; box-shadow:none; }
#main #header:hover { background:#fff; }
#main #header::after { visibility:hidden; opacity:0; }
#main #header:hover::after { visibility:visible; opacity:1; }
#main #header .navigation__util { top:45px; transition:0.5s; }
#main #header.fixed .navigation__util { top:35px; }
#main #header .navigation__category { padding-top:10px; transition:0.4s; }
#main #header.fixed .navigation__category { padding-top:0; }
#main #header .navigation__category li ul { top:104px; }
#main #header.fixed .navigation__category li ul { top:94px; }
#header::after { content:''; visibility:visible; position:absolute; bottom:0; width:100%; height:1px; background:#e5e5e5; opacity:1; transition:0.4s; }
#header .navigation { position:absolute; top:5px; left:49px; right:49px; z-index:22; }
#header .navigation__category li a { font-size:16px; }
#header .navigation .btnNav { display:none; position:absolute; left:0; top:20px; }
#header .navigation__util { position:absolute; right:50px; top:35px; }
#contents { max-width:1280px; min-height:700px; padding:100px 50px 200px; margin:0 auto; }
main#contents { max-width:100%; margin:0 50px; padding:0; }
#container { overflow: hidden; }
#contents { padding:100px 0; }
section.gInner { max-width:1240px; margin:0 auto; }
#footer { padding:40px 0 33px; }
#footer .inner { max-width:1280px; margin:0 auto; padding:0 50px; }
#footer .inner .xans-layout-footer:before { content:""; display:block; position:absolute; bottom:42px; left:0; right:0; border-top:1px solid #e0e0e0; }
#quick { z-index:10; opacity:0; position:absolute; right:50px; bottom:40px; height:51px; width:51px; border-radius: 50%; border:1px solid #999; background:rgba(255,255,255,0.3); transition: all 0.5s; }
#quick.fixed {position:fixed; display:block; opacity:1; bottom:100px; }
#quick:hover { background:rgba(0,0,0,0.05); }
#quick .pageTop a { display:block; padding:19px 0; text-align:center; font-size:14px; text-transform:uppercase; overflow:hidden; }
#quick .pageTop .icon { vertical-align:text-top; }
}
/********************* PC *********************/
@media all and (max-width:1553px) {
}
#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%; }
@font-face {
font-weight: 500;
font-family: 'Noto-Sans-CJK-KR';
font-style: normal;
src: url("//adgoods.net/fonts/Noto-Sans-CJK-KR-Regular.woff2") format("woff2"),url("//adgoods.net/fonts/Noto-Sans-CJK-KR-Regular.woff") format("woff");
font-display: swap;
}
@font-face {
font-weight: 700;
font-family: 'Noto-Sans-CJK-KR';
font-style: normal;
src: url("//adgoods.net/fonts/Noto-Sans-CJK-KR-Bold.woff2") format("woff2"),url("//adgoods.net/fonts/Noto-Sans-CJK-KR-Bold.woff") format("woff");
font-display: swap;
}
@font-face {
font-weight: 500;
font-family: 'Segoe-UI';
font-style: normal;
src: url("//adgoods.net/fonts/Segoe-UI-Regular.woff2") format("woff2"),url("//adgoods.net/fonts/Segoe-UI-Regular.woff") format("woff");
font-display: swap;
}
@font-face {
font-weight: 500;
font-family: 'Segoe-UI';
font-style: normal;
src: url("//adgoods.net/fonts/Segoe-UI-Bold.woff2") format("woff2"),url("//adgoods.net/fonts/Segoe-UI-Bold.woff") format("woff");
font-display: swap;
}
/* Font */
.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; }
/* JP, TW, CN */
html:lang(ja) .txt11,
html:lang(zh) .txt11,
html:lang(zh-tw) .txt11 { font-size:12px; }
.titleArea h2 {font-weight: normal;}
/* grid */
.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 */
svg.icon { display:block; }
/* css icon */
.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[class*="icoDirection"] { display:inline-block; width:10px; height:10px; 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[class*="icoDirection"]::after { content:''; display:block; position:absolute; width:1px; height:17px; background:#000; -webkit-transform:translate(5px, -4px) rotate(45deg); transform: translate(5px, -4px) rotate(45deg);}
.icon.icoDirectionRight { -webkit-transform:rotate(-135deg); transform:rotate(-135deg); }
.icon.icoDirectionLeft { -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.icon.icoDirectionTop { -webkit-transform:rotate(135deg); transform:rotate(135deg); }
.icon.icoDirectionBottom { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.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; }
/* Form */
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%; }
/* file */
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 */
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; }
/* radio */
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; }
/* checkbox */
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; }
/* ie support */
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 */
.ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; vertical-align:top; cursor:pointer; }
/* path */
.path { overflow:hidden; margin:30px 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; font-size:12px; }
.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:#666; text-decoration:none; }
.path ol li.second a { color:#666; }
.path li:nth-child(n+2) a { color:#000; }
.path li:last-child a,
.path li strong,
.path li strong a { color:#000; }
/* ec-base-field */
.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 */
.ec-base-radio.typeDelivery .ec-base-label{display:block;}
/* ec-base-qty */
.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 */
.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; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
.gInnerMargin { margin:0 16px; }
.titleArea { margin:40px 16px 0px; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
/* titleArea */
.titleArea { text-align:center; }
.titleArea h2 { display:inline-block; color:var(--font-color-heading); font-size:24px; font-weight:bold; }
.titleArea h3 { display:inline-block; color:var(--font-color-heading); font-size:16px; }
.titleArea--middle { margin:0; padding:42px 16px 12px; text-align:left; }
.titleArea--middle h2 { display:inline-block; color:var(--font-color-heading); font-size:16px; }
.titleArea--myshop { margin-bottom:40px; }
.titleArea .desc { font-size:12px; color:#6d6d6d; }
/* path */
.path { 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; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
.gInnerMargin { margin:0 24px; }
.titleArea { margin:40px 24px 30px; }
.titleArea--middle { margin:0; }
.path { margin:0 24px; }
}
/********************* PC *********************/
@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:36px; font-weight:bold; }
.titleArea h3 { color:#000; color:var(--font-color-heading); font-size:16px; font-weight:normal; }
.titleArea--middle { position:relative; margin:50px 0 20px; text-align:left; }
.myshopMain .titleArea--middle { position:relative; margin:50px 0 14px; text-align:left; }
.titleArea--middle h2 { color:#000; color:var(--font-color-heading); font-size:16px; font-weight:normal; }
.titleArea--middle h3 { font-weight:bold; }
.titleArea--middle .btnDetail { position:absolute; right:0; bottom:0; }
.titleArea.titleArea--myshop { margin:50px 0 100px; text-align:center; padding-right:22%; }
.titleArea.titleArea--myshop h2 { color:#000; color:var(--font-color-heading); font-size:36px; font-weight:bold; }
.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:45px; }
.ec-base-step li:not(:last-child):after { margin:-2px 30px 0; }
/* memberArea */
.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; }
}
/* button */
[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; }
/* sizeQty */
[class^='btn'].sizeQty { padding:8px 20px; height:30px; margin-left:6px; font-size:12px; line-height:12px; }
/* btnText */
.btnText { display:inline-block; font-size:13px; line-height:18px; text-decoration:underline; }
/* width full */
[class^='btn'].gFull { width:100%; }
[class^='btn'].gFull + [class^='btn'].gFull { margin:10px 0 0; }
/* btnMore */
.xans-product-listmore { text-align:center; }
.btnMore { display:inline-block; min-width: 220px; font-size:14px; font-weight:bold; padding: 15px 0; border:1px solid #222; text-align:center; transition: all 400ms; box-sizing:border-box;}
.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;}
.btnOverlay { position:relative; overflow:hidden; }
.btnOverlay:hover { background:transparent; color: #fff;}
.btnOverlay .overlay { display:block; position:absolute; width:0; height:0; background:#222222; border-radius:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); z-index:-1; }
.btnOverlay:hover .overlay { width:250%; height:800%; -webkit-transition: width .3s cubic-bezier(0, 0, 0.58, 0.32), height .3s cubic-bezier(0, 0, 0.58, 0.32); transition: width .3s cubic-bezier(0, 0, 0.58, 0.32), height .3s cubic-bezier(0, 0, 0.58, 0.32); }
/* ec-base-button */
.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; }
/* type */
.ec-base-button.typeBorder { margin-top:-1px; padding:10px 20px; border:1px solid #d7d5d5; }
/* gBottom */
.ec-base-button.gBottom { margin:50px 0 0; }
.ec-base-button.gBottom [class^='btn'] + [class^='btn'] { margin-left:10px; }
/* gColumn */
.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; }
/* gFlex */
.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; }
/* gFixed */
.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; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
.btnMore {display: block; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
/* size */
[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; }
/* width Fix */
[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 */
.ec-base-button { margin-left:16px; margin-right:16px; }
.ec-base-button [class^='btn'] + [class^='btn'] { margin-left:6px; }
/* gBottom */
.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; }
/* gBreak */
.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; }
/* gColumnM (mobile only flex) */
.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%; }
/* reset */
.gInnerMargin .ec-base-button,
.gInnerMargin .ec-base-button.gBottom,
.gInnerMargin.ec-base-button.gBottom { margin-left:0; margin-right:0; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
/* size */
[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:15px; line-height:18px; font-weight:bold; }
/* width Fix */
[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 {
margin:0 -320px 20px; border-bottom:1px solid #e5e5e5;
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; }
/* typeNav */
.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 { background:#fff; }
.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; }
/* typeMenu */
.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; }
/* gScroll */
.ec-base-tab.gScroll{ overflow-x: auto; overflow-y: hidden; box-sizing: border-box; }
/* gFlex */
.ec-base-tab.gFlex .menu { display:flex; border-right:0; }
.ec-base-tab.gFlex .menu:after { display:none; }
.ec-base-tab.gFlex .menu li { display:flex; align-items: center; float:none; flex:1; position:relative; }
.ec-base-tab.gFlex .menu li a { width:100%; min-width:0; background:none; word-break:break-all; }
.ec-base-tab.gFlex .menu li a:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; }
.ec-base-tab.gFlex .menu li.selected { border:1px solid #292929; border-bottom:0; }
.ec-base-tab.gFlex .menu li.selected a { left:0; margin:0 0 -1px; border:0; position: initial;}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
/* typeNav */
.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; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
/* typeNav */
.ec-base-tab { margin:100px 0 30px; }
.ec-base-tab.typeNav .menu { margin:0 0 20px; }
.ec-base-tab.typeNav .menu li { float:left; }
.ec-base-tab.typeNav .menu li a { font-size:14px; padding:16px; }
.ec-base-tab.gFlex .cont,
.ec-base-tab.gFlex .board { padding:60px 330px 0; }
}
/* Align */
.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; }
/* Table */
.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; }
.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; }
/* gBorderClear */
.ec-base-table.gBorderClear { border-top:0; }
.ec-base-table td.gBorderClear { border-bottom:0; }
/* Table - Empty */
.ec-base-table .message { padding:56px 0; border-bottom:1px solid #e5e5e5; text-align:center; color:#6d6d6d; }
/* Table - typeWrite */
.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; }
/* formMultiple */
.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; }
/* formGroup */
.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; }
/* txtInfo */
.ec-base-table.typeWrite td p.txtInfo,
.ec-base-table.typeWrite td ul.txtInfo { width:100%; }
/* form */
.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; }
/* address */
.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; }
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
/* gFlow */
.ec-base-table .gFlow { display:inline-block; width:100%; margin-top:5px; }
/* gBorderClear */
.ec-base-table tr.gBorderClear td { border-bottom:0; }
.ec-base-table.typeList tr.gBorderClear { border-bottom:0; }
/* Table - typeWrite */
.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; }
/* formMultiple */
.ec-base-table.typeWrite .formMultiple { padding-top:10px; }
/* formGroup */
.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; }
/* txtInfo */
.ec-base-table.typeWrite span.txtInfo { display:block; width:100%; margin:10px 0 0; }
/* form */
.ec-base-table.typeWrite td input[type="text"],
.ec-base-table.typeWrite td input[type="password"],
.ec-base-table.typeWrite td select { width:100%; }
/* address */
.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; }
/* Table - typeList */
.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; height:calc(100% - 45px); 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 { padding-left:90px; padding-right:20px; }
.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; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
/* gFlow */
.ec-base-table .gFlow { width:100%; margin-left:20px; }
/* gBorderClear */
.ec-base-table tr.gBorderClear td { border-bottom:0; }
/* Table */
.ec-base-table th { padding:14px 30px; }
/* Table - typeWrite */
.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; }
/* formMultiple */
.ec-base-table.typeWrite .formMultiple { padding-top:22px; padding-bottom:22px; }
/* formGroup */
.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; }
/* form */
.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; }
/* address */
.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; }
/* Table - typeList */
.ec-base-table.typeList { border-top:0; }
.ec-base-table.typeList th,
.ec-base-table.typeList td { padding:15px 10px 16px; font-weight:normal;}
.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; }
/* typeUpper */
.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 */
.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; }
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.ec-base-tooltip { width:88%; margin:5px auto 0; }
.ec-base-tooltip .edge { display:none; }
.shippingFee { position:static; }
.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; }
}
/********************* PC *********************/
@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 3px; }
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; }
/********************* Mobile / Tablet *********************/
@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; background:#fff; }
.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; }
/* theme1 */
.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:15px; }
.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-table */
.ec-base-fold.theme1.gBottomLine > .contents .ec-base-table,
.ec-base-fold.theme1.gBottomLine .ec-base-fold > .contents .ec-base-table { border:0; }
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.ec-base-fold.theme1.gMargin { margin-left:16px; margin-right:16px; }
.ec-base-fold.theme1 > .title { padding:0 16px; }
.ec-base-fold.theme1 > .title h2 { font-size:16px; }
.ec-base-fold.theme1 > .title h3 { font-size:13px; }
.ec-base-fold.theme1 > .title:after { right:21px; }
.ec-base-fold.theme1.selected > .title:after { top:32px; }
/* ec-base-table */
.ec-base-fold.theme1 .ec-base-table.typeList { border-color:#e5e5e5 }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.ec-base-fold.theme1 .title > h2 { font-size:18px; }
}
/* base */
.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; line-height:20px; background:#fff; }
.ec-base-box.typeThin > .agree p { padding:0 0 30px; }
/* typeMember */
.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; }
/* typeProduct */
.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; }
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.ec-base-box.gPadding { padding:50px 18px 40px; }
/* typeMember */
.ec-base-box.typeMember { padding:50px 18px 40px; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
.additionalInfo { margin:0 24px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.ec-base-box.gPadding { padding:74px 0; }
/* typeMember */
.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; }
/* size */
.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%; }
/* gVer */
.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; }
/* align */
.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; }
/* typeDot */
.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; }
.ec-base-product { margin:20px 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^='/product/detail.html'] > img { border:1px solid #ececec; }
.ec-base-product .prdList.grid3 { display:flex; flex-wrap:wrap; margin:0;}
.ec-base-product .prdList.grid3 .thumbnail { text-align:left; max-width: 408px;}
.ec-base-product .prdList.grid3 .prdList__item { width:100%; margin:0; }
.ec-base-product .prdList { margin:0 -10px 0; text-align: left; font-size:0; line-height:0; }
.ec-base-product .prdList > li { display:inline-block; margin:0 0 46px; color:#757575; vertical-align:top; }
.ec-base-product .prdList .prdList__item{margin: 0 20px 0 10px; width:430px; }
.ec-base-product .prdList .prdList__item img { }
/* .ec-base-product .prdList > li:nth-child(n+10) { display:none; }*/
.ec-base-product .prdList .chk { position:absolute; top:4px; right:15px; display:block; }
.ec-base-product .prdList .thumb,
.ec-base-product .prdList .thumbnail{ position: relative; text-align: center; width: auto; white-space:normal; background:#000; }
.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 a:hover img { opacity:0.9; }
.ec-base-product .prdList .thumbnail a img { width: 100%; max-width:100%; box-sizing:border-box; opacity:1; -webkit-transition:0.3s opacity; -o-transition:0.3s opacity; transition:0.3s opacity; }
.ec-base-product .prdList .icon__box{position: absolute; bottom: -44px; right: 0px; display: flex; }
.ec-base-product .prdList .icon__box span + span{ margin: 7px 0 0;}
.ec-base-product .prdList .wish { z-index:1; display: block; width:26px; padding-top:8px; margin-right:10px; cursor:pointer; }
.ec-base-product .prdList .wish img{ max-width: 100%; }
.ec-base-product .prdList .cart { z-index:1; display: block; width:26px; 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.grid3 { margin-right:-28px; }
.ec-base-product .prdList.grid3 > li .thumbnail { margin-right:28px; }
.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 { position:relative; margin:20px 20px 0 0; padding: 0; font-size:12px; line-height:18px; text-align:left; white-space:normal; }
.ec-base-product .prdList .description .name { display:block; text-align:left; font-weight:normal; }
.ec-base-product .prdList .description .name a { color:#000; font-size:13px; }
.ec-base-product .prdList .description span.grid { display:block; }
/* grid */
.ec-base-product ul.grid2 > li { width:50%; }
.ec-base-product ul.grid3 > li { width:33.3334%; }
.ec-base-product ul.grid4 > li { width:25%; }
.ec-base-product ul.grid5 > li { width:20%; }
.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; }
/* right display */
.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; }
/* module="product_ListItem" */
.ec-base-product .spec { margin:12px 0 0; }
.ec-base-product .spec > li { text-align:left; line-height:19px; }
.ec-base-product .spec > li.price {margin-bottom: 14px; color: #000; font-size: 16px; }
.ec-base-product .spec > li.price.sale{text-decoration: line-through; }
.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; }
/* Thumbnail icon position */
.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; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
#contents { padding: 0 0 120px 0; }
.ec-base-product { margin:16px 0 0; }
.ec-base-product ul.grid5 > li {width: 50%;}
.ec-base-product .prdList{margin: 0 -5px 0;}
.ec-base-product .prdList > li { margin-bottom:20px; }
.ec-base-product ul.prdList > li { width:50%; }
.ec-base-product .prdList .wish{ width: 22px; }
.ec-base-product .prdList .description { margin-top:18px; }
.ec-base-product .prdList .prdList__item{ margin: 0 6px; }
.ec-base-product .prdList .prdList__item .thumbnail { min-width:158px; }
.ec-base-product .prdList .description .name a { font-size: 14px; }
.ec-base-product .prdList .description .name a span { font-size:14px !important; }
.ec-base-product .spec { margin-top:10px; }
.ec-base-product .spec > li span { font-size:14px !important; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.ec-base-product .title h3 { margin:40px 0 20px; font-size:16px; }
.ec-base-product ul.grid4 > li{width: 50%; }
.ec-base-product .prdList .chk { right:0; }
.ec-base-product .prdList.grid3 { margin-right:-12px; }
.ec-base-product .prdList.grid3 > li .thumbnail { margin-right:12px; }
.ec-base-product .discountPeriod { position:static; }
.ec-base-product .btnTooltip { position:static; }
.differentialShipping { left:0; right:0; width:88%; margin:10px auto 0; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
.ec-base-product ul.grid5 > li{width: 33.33%;}
.ec-base-product ul.grid4 > li{width: 33.33%; }
.ec-base-product .prdList{margin: 0 -8px 80px;}
.ec-base-product .prdList .prdList__item{margin: 0 8px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.xans-product-listmore { margin-top:40px; }
.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-size:14px; font-weight:bold; }
.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:14px; color:#000; line-height:20px; margin: 0 0 4px; }
.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 .mileage { display:none; }
.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:23px; right:-5px; overflow:hidden; width:30px; height:30px; margin:0 auto; font-size:1px; line-height:0; text-indent:-150px; 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; font-size:14px; 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 li .name a { margin-left:15px; }
.ec-base-prdInfo .optionGroup li .name a.btnText { font-size:14px; }
.ec-base-prdInfo .optionGroup .product.displaynone + .optionStr { display:inline-block; margin-right:2px; color:#999; }
.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%; }
/* order_result.html > orderArea > ec-base-prdInfo */
.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 */
.ec-base-prdEmpty { text-align:center; color:#6d6d6d; border-top:1px solid #000; border-bottom:1px solid #e5e5e5; }
/********************* Mobile / Tablet *********************/
@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 .description .prdName,
.ec-base-prdInfo .description .price li { font-size:13px; }
.ec-base-prdInfo .sumPrice { margin:20px 0 0; padding:0 0 0 98px; box-sizing:border-box; width:100%; }
.ec-base-prdInfo.gCheck .sumPrice { width:85%; position:absolute; bottom:23px; left:0; padding:16px; margin-left:40px; background:#f6f6f6; }
.ec-base-prdInfo .sumPrice .prdPrice { display:block; float:left; }
.ec-base-prdInfo .sumPrice .info li { text-align:left; color:#999999; margin-top:8px; }
.ec-base-prdInfo .sumPrice .info li::after {content:''; display:block; clear:bothl;}
.ec-base-prdInfo .sumPrice .info li span { float:right; }
.ec-base-prdInfo .buttonGroup { margin:20px 0 0; padding:0 0 0 98px; box-sizing:border-box; width:100%; }
/* gCheck */
.ec-base-prdInfo.gCheck .buttonGroup { padding:0 0 0 125px; }
.ec-base-prdInfo.gCheck .sumPrice { text-align:right; }
.ec-base-prdInfo.gCheck .quantity { padding:20px 0 20px 28px; margin:0 0 23px; }
.ec-base-prdInfo .btnDelete { right:12px; top:18px; }
.ec-base-prdInfo .optionGroup { margin: 50px 0 0 -98px; }
.ec-base-prdInfo .optionGroup .name { font-size:13px; }
.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 */
.ec-base-prdEmpty { padding:40px 0; }
}
/********************* PC *********************/
@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 .sumPrice .info { margin:15px 0 0; font-size:14px; color:#999999; }
.ec-base-prdInfo .sumPrice .prdPrice { display:none; }
.ec-base-prdInfo .buttonGroup { position:absolute; bottom:25px; right:40px; 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 */
.ec-base-prdEmpty { padding:56px 0; }
}
/* typeList */
.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; }
/* typeSwipe */
.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; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
.xans-layout-logotop { padding:20px 16px; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.xans-layout-logotop { position:absolute; text-align:left; z-index:22; }
.xans-layout-logotop a { font-size:27px; line-height:1; color:#000; font-weight:bold; text-decoration:none; font-style:normal; }
.xans-layout-logotop img { max-width:800px; max-height:21px; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
.xans-layout-logotop { padding: 28px 24px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.xans-layout-logotop { position:absolute; min-width:220px; padding:18px 30px; text-align:left; z-index:24; }
.xans-layout-logotop a { font-size:35px; color:#000; font-weight:bold; text-decoration:none; font-style:normal; }
.xans-layout-logotop img { max-width:800px; max-height:70px; }
}
.topArea__statelogon { position:absolute; right:142px; top:42px; z-index:24; }
.topArea__statelogon a { display:inline-block; margin-left:25px; font-size:12px; color:#1e1e1e; text-transform:uppercase; text-decoration:none; }
.topArea__statelogon .count { display:; min-width:24px; padding:3px 0; font-size:13px; text-align:center; box-sizing:border-box; }
.navigation__category { margin:0 150px; text-align:center; }
.navigation__category li { display:inline-block; position:relative; margin:0 19px; padding:38px 0; }
.navigation__category li a { display:inline-block; font-size:13px; line-height:20px; }
.navigation__category li a:hover { text-decoration:none; }
.navigation__category li a:after { content: ""; position: relative; display: block; bottom: 0; width: 100%; height: 1px; background-color: #000;
-webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0);
-webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0;
-webkit-transition: -webkit-transform .3s cubic-bezier(.45,.46,.05,.96);
-o-transition: transform .3s cubic-bezier(.45,.46,.05,.96);
transition: transform .3s cubic-bezier(.45,.46,.05,.96);
transition: transform .3s cubic-bezier(.45,.46,.05,.96),-webkit-transform .3s cubic-bezier(.45,.46,.05,.96);
}
.navigation__category li a:hover:after {
-webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);
-webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0;
-webkit-transition: -webkit-transform .5s cubic-bezier(.45,.46,.05,.96);
-o-transition: transform .5s cubic-bezier(.45,.46,.05,.96);
transition: transform .5s cubic-bezier(.45,.46,.05,.96);
transition: transform .5s cubic-bezier(.45,.46,.05,.96),-webkit-transform .5s cubic-bezier(.45,.46,.05,.96);
}
.navigation__category li ul { visibility:hidden; opacity:0; position:absolute; top:94px; left:-50%; padding:15px 31px; background: #fff; border:solid 1px #e5e5e5; -webkit-transition: all 0.3s; transition: all 0.3s; }
.navigation__category li ul li { display:block; padding:10px 0; margin:0; }
.navigation__category > ul > li:hover > ul { opacity:1; visibility:visible; }
body { position:relative; left:0; transition:left 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
body.expand { overflow-x:hidden; }
body.expand #aside { visibility:visible; overflow-x:hidden; right:0; }
body.expand #layoutDimmed { display:block; }
#aside { z-index:1001; visibility:hidden; position:fixed; top:0px; bottom:0; overflow:auto; overflow-x:hidden; min-width:225px; width:458px; background-color:#fff; transition:500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#aside .btnClose { position:absolute; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap; }
.navigation-menu__member { border-bottom:1px solid #e5e5e5; }
.navigation-menu__member a { display:inline-block; text-decoration:none; }
.navigation-menu__category .categoryList ul { display:none; }
.navigation-menu__category .categoryList li { position:relative; }
.navigation-menu__category .categoryList li.selected > ul { display:block; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu { padding:0 0 0 10px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu a.view { color: #595959; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul { padding:0 0 0 20px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul a.view { color: #929292; }
.navigation-menu__category .categoryList a.cate,
.navigation-menu__project .icoCategory { position:absolute; right:0; top:0; word-wrap:break-word;overflow:hidden; width:48px; height:48px; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap; }
.navigation-menu__category .categoryList a.cate:before,
.navigation-menu__project .icoCategory:before { content:""; display:block; width:10px; height:10px; margin:18px auto 0; border-left:1px solid #929292; border-bottom:1px solid #929292; -webkit-transition:.3s ease-out; transition:.3s ease-out;-webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.navigation-menu__category .categoryList li.selected > a.cate:before,
.navigation-menu__project .selected .icoCategory:before { margin-top:22px; -webkit-transform:rotate(135deg); transform:rotate(135deg); }
.navigation-menu__category .categoryList li.noChild > a.cate { display:none; }
.navigation-menu__category .icoBookmark { display:none; }
.navigation-menu__project { border-top:1px solid #ebebeb; }
.navigation-menu__project .title { position:relative; display:block; padding:15px 0; font-size:18px; }
.navigation-menu__board { border-top:1px solid #ebebeb; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
#aside { left:0; width:100%; transition:none;}
#aside .btnClose { top:34px; right:20px; width:18px; height:18px; display:none; }
.expand #aside .btnClose { display:block; }
#aside .btnClose .icon { width:23px; height:23px; margin: -2px 0 0 -2px; }
#aside .btnClose .icon:before { right:11px; height:23px; }
#aside .btnClose .icon:after {top:11px; width:23px; }
#aside .searchField .btnSearch { right: 44px}
#aside .searchField #keyword { height:81px; }
.navigation-menu__member { padding:30px 0 24px 24px; }
.navigation-menu__member a { margin:0 10px 0 0; font-size:16px; }
.navigation-menu__member__bottom { padding:0 20px; }
.navigation-menu__board,
.navigation-menu__category,
.navigation-menu__project { padding:13px 16px 30px; }
.navigation-menu__board .menu a { display:block; padding:15px 0; font-size:16px; text-decoration:none; }
.navigation-menu__category .view,
.navigation-menu__project .view { display:block; padding:15px 0; font-size:16px; text-decoration:none; }
.navigation-menu .menu { margin:2px 0; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.navigation-menu__member .count { display:inline-block; min-width:24px; padding:0 4px; font-size:16px; text-align:center; box-sizing:border-box; }
#aside .searchField { width:100%; height:0; }
#aside .searchField #keyword { display:none; position: absolute; width: calc(100% + 24px); top:0; left:0; border:none; border-bottom: solid 1px #e5e5e5; font-size:18px; }
#aside .searchField .btnSearch { position: absolute; width:20px; top: 34px; opacity:1; transition: opacity 0.2s; }
#aside .searchField .btnSearch img { width:20px; }
#aside .searchField .btnSearch.actived { opacity:0; left:24px; top:70px; transition: all 0.3s; }
#aside .searchField.active #keyword{ display:block; padding: 0 0 0 65px; }
#aside .searchField.active .btnSearch { opacity:0; }
#aside .searchField.active .btnSearch.actived { top:32px; opacity:1; }
.navigation-menu__member__bottom a { display:block; font-size:16px; margin-bottom:20px; color:#464646;}
.navigation-menu__board .menu { border-bottom: 1px solid #e5e5e5; }
.navigation-menu__board .menu > a { display:block; padding:30px 0; font-size:18px; text-decoration:none; }
.navigation-menu__board .menu li { margin-bottom: 20px; padding-left: 20px; }
.navigation-menu__board .menu li:last-child { margin-bottom:30px; }
.navigation-menu__board .menu li a { color:#666666; padding:0; font-size:16px; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
#aside { right:-458px; width:458px; }
#aside .searchField #keyword { height:85px; }
#aside .searchField .btnSearch { right: 56px; }
}
/********************* Tablet / PC *********************/
@media all and (min-width:768px) {
#aside .btnClose { top:31px; right:50px; width:17px; height:17px; }
#aside .btnClose .icon { width:30px; height:30px; margin: -2px 0 0 -2px;}
#aside .btnClose .icon:before { right:11px; height:23px; }
#aside .btnClose .icon:after {top:11px; width:23px; }
.navigation-menu__member { padding:30px 0 28px 24px; }
.navigation-menu__member a { margin:0 18px 0 0; font-size:16px; }
.navigation-menu__member__bottom { padding:30px 20px; }
.navigation-menu .menu { margin:2px 0; }
.navigation-menu__category,
.navigation-menu__project { padding:23px 38px 25px 50px; }
.navigation-menu__category .view,
.navigation-menu__project .view { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
.navigation-menu__board { padding:0px 25px; }
.navigation-menu__board .menu { border-bottom: 1px solid #e5e5e5; }
.navigation-menu__board .menu > a { display:block; padding:30px 0; font-size:18px; text-decoration:none; }
.navigation-menu__board .menu li { margin-bottom: 20px; padding-left: 20px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
body.expand { left:458px; }
#aside { left:-458px; width:458px; }
}
.xans-layout-orderbasketcount { overflow:hidden; padding:15px 13px; text-align:center; border-bottom:1px solid #d9d9d9; }
.xans-layout-orderbasketcount a { line-height:16px; font-size:12px; text-decoration:none; text-transform:uppercase; }
.xans-layout-orderbasketcount .count { display:inline-block; min-width:24px; margin: 0 0 0 6px; padding:3px 4px 3px; font-size:13px; text-align:center; border:1px solid #000; border-radius:20px; box-sizing:border-box; }
.xans-layout-productrecent { padding:14px 12px 0; text-align:center; border-bottom:1px solid #d9d9d9; }
.xans-layout-productrecent .title a { display:block; padding:3px 0; font-size:12px; line-height:17px; font-weight:normal; color:#2e2e2e; text-transform:uppercase; }
.xans-layout-productrecent ul { width:69px; }
.xans-layout-productrecent li { margin:10px 0 0; }
.xans-layout-productrecent li img { max-width:69px; }
.xans-layout-productrecent .player { display:flex; margin:0 -12px; }
.xans-layout-productrecent .player button { height:40px; flex:1; overflow:hidden; white-space:nowrap; font-size:1px; line-height:1px; color:transparent; background:none; text-indent:150%; }
.xans-layout-productrecent .player .icon { display:block; margin:0 auto; border-color:#7d7d7d; }
.xans-layout-footer { position:relative; }
.xans-layout-footer .util { overflow:hidden; }
.xans-layout-footer .util li { display:inline-block; }
.xans-layout-footer .util li a { color:#666; text-transform:uppercase; }
.xans-layout-footer .info__address { color:#757575; line-height:24px; }
.xans-layout-footer .info__address span { display:inline-block; padding:0 10px 0 0; color:#6d6d6d; }
.xans-layout-footer .info__address span a { color:#6d6d6d; }
.xans-layout-footer .info__customer .runtime::before { content:"/"; display:inline-block; color:#000; }
.xans-layout-footer .sns { position:absolute; }
.xans-layout-footer .sns a { overflow:hidden; display:inline-block; width:20px; height:20px; margin-right:18px; white-space:nowrap; font-size:1px; line-height:1px; color:transparent; text-indent:150%; vertical-align:top; }
.xans-layout-footer .copyright { color:#6d6d6d; }
.xans-layout-footer .hosting { color:#000; }
.xans-layout-footer .info__customer .content li:last-child { color:#666; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
.xans-layout-footer { padding:0 16px; }
.xans-layout-footer .util { overflow:hidden; margin:20px 0 15px; padding:0 0 25px; }
.xans-layout-footer .util li { margin:0 17px 0 0; }
.xans-layout-footer .util li a { display:block; font-size:14px; line-height:34px; }
.xans-layout-footer .info__address span { display:inline-block; font-size:13px; line-height:19px; word-break: keep-all; }
.xans-layout-footer .info__customer .content li { display:inline; }
.xans-layout-footer .info__customer .content li:first-child { display:block; }
.xans-layout-footer .info__customer .runtime { margin:10px 0 0; font-size:16px; line-height:20px; }
.xans-layout-footer .info__customer .runtime::before { display:none; }
.xans-layout-footer div.sns { left:16px; bottom:38px; }
.xans-layout-footer .copyright { margin:65px 0 0; font-size:12px; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.xans-layout-footer .sns { bottom:0; right:0;}
.xans-layout-footer .util { border-bottom: 1px solid #e5e5e5; }
.xans-layout-footer .info { display:flex; flex-direction:column-reverse; }
.xans-layout-footer .info__customer { margin:0 -24px; padding:30px 24px; border-top:1px solid #e0e0e0; }
.xans-layout-footer .info__customer .heading { position:relative; }
.xans-layout-footer .info__customer .toggle { position:absolute; top:0; width:100%; height:100%; overflow:hidden; white-space:nowrap; text-indent:150%; font-size:1px; color:transparent; line-height:1px; }
.xans-layout-footer .info__customer .toggle .icon { position:absolute; top:5px; right:5px; }
.xans-layout-footer .info__customer .tel { font-size:16px; }
.xans-layout-footer .info__customer.selected .toggle .icon { margin-top:3px; transform: rotate(135deg); }
.xans-layout-footer .info__customer.selected .content { visibility:visible; height:auto; margin:20px 0 0; }
}
/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
.xans-layout-footer { padding:0 24px; }
.xans-layout-footer .util { overflow:hidden; padding:30px 0; }
.xans-layout-footer .util li { margin:0 20px 0 0; }
.xans-layout-footer .util li a { font-size:14px; line-height:30px; }
.xans-layout-footer .info__address span { display:inline-block; font-size:14px; line-height:25px; word-break: keep-all; }
.xans-layout-footer .info__customer .runtime { margin:14px 0 0; line-height:30px; }
.xans-layout-footer .info__customer .content li { display:inline-block; font-size:16px;}
.xans-layout-footer .copyright { margin:30px 0 0; font-size:14px; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.xans-layout-footer .util { position:absolute; right:-30px; bottom:-8px; color:#666; }
.xans-layout-footer .util li a { display:block; margin-right:30px; font-size:14px; line-height:30px; }
.xans-layout-footer .info { display:flex; margin:25px 0 0; }
.xans-layout-footer .info .title { display:block; color:#000; margin:0 0 24px; font-size:16px; }
.xans-layout-footer .info__address { flex:1; padding:0 20px 0 0; }
.xans-layout-footer .info__address span { padding:0 10px 0 0; font-size:13px; }
.xans-layout-footer .info__customer .toggle { display:none; }
.xans-layout-footer .info__customer li { font-size:16px; display:inline-block; }
.xans-layout-footer .info__community a { display:block; margin:2px 0; padding:6px 0; font-size:14px; color:#6d6d6d; }
.xans-layout-footer .sns { top:0; right:0; }
.xans-layout-footer .copyright { margin:50px 0 0; font-size:13px; }
}
.xans-layout-searchheader { z-index:1001; position:fixed; left:0; right:0; top:90px; background:#fff; opacity:0; visibility:hidden;transform: translate3d(0,-100%,0);transition: opacity .5s ease,transform .5s ease,visibility 0s linear .5s; }
.searchExpand .xans-layout-searchheader { opacity: 1; visibility: visible; transition: opacity .5s ease,transform .5s ease,visibility 0s linear 0s; transform: translateZ(0); }
.searchExpand .dimmed { display:block; }
.xans-layout-searchheader .title { font-weight:normal; }
.xans-layout-searchheader .btnSearch { background:none; overflow:hidden; white-space:nowrap; text-indent:150%; font-size:1px; color:transparent; line-height:1px; }
.xans-layout-searchheader .btnClose { position:absolute; overflow:hidden; white-space:nowrap; text-indent:150%; font-size:1px; color:transparent; line-height:1px; }
.xans-layout-searchheader fieldset .autoDrop { display:none; border:1px solid #565960; position:absolute; width: 187px; text-align:left; background:#fff; z-index:20; overflow:hidden; overflow-y:auto; max-height:100px;}
.xans-layout-searchheader fieldset .autoDrop li a { display:block; padding:6px 10px; font-size:11px; color:#1c1c1c; font-family:GulimChe,Gulim; }
.xans-layout-searchheader fieldset .autoDrop li a:hover,
.xans-layout-searchheader fieldset .autoDrop li.selected a { text-decoration:none; color:#fff; background:#a1a4ae; }
/********************* Mobile *********************/
@media all and (max-width:767px) {
.xans-layout-searchheader { height:322px; }
.xans-layout-searchheader .title { margin:100px 0 29px; display:block; font-size:30px; text-align:center; }
.xans-layout-searchheader fieldset { display:flex; margin:0 16px; border-bottom:1px solid #000; }
.xans-layout-searchheader #keyword { width:100%; height:58px; padding:19px 0; flex:1; font-size:15px; box-sizing:border-box; border:0; background:#fff; }
.xans-layout-searchheader .btnSearch { width:25px; height:25px; margin:19px 0 0; }
.xans-layout-searchheader .btnSearch .icon { width:25px; height:25px; }
.xans-layout-searchheader .btnClose { top:12px; right:12px; }
.xans-layout-searchheader .icon.icoClose { width:25px; height:25px;}
.xans-layout-searchheader .icon.icoClose:before { right: 12px; height:25px; }
.xans-layout-searchheader .icon.icoClose:after { top: 12px; width:25px; }
}
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.xans-layout-searchheader { top:0; }
}
/********************* Tablet / PC *********************/
@media all and (min-width:768px) {
.xans-layout-searchheader { height:389px; }
.xans-layout-searchheader .title { margin:103px 0 54px; display:block; font-size:45px; text-align:center; }
.xans-layout-searchheader fieldset { display:flex; width:650px; margin:0 auto; border-bottom:1px solid #000; }
.xans-layout-searchheader #keyword { width:100%; height:54px; padding:15px 0; flex:1; font-size:18px; box-sizing:border-box; border:0; background:#fff; }
.xans-layout-searchheader .btnSearch { width:28px; height:28px; margin:15px 0 0; }
.xans-layout-searchheader .btnSearch .icon { width:28px; height:28px; }
.xans-layout-searchheader .btnClose { top:35px; right:50px; }
.xans-layout-searchheader .icon.icoClose { width: 35px; height: 35px;}
.xans-layout-searchheader .icon.icoClose:before { right: 17px; height: 35px; }
.xans-layout-searchheader .icon.icoClose:after { top: 17px; width: 35px; }
}
/* reset */
li { list-style:none; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
h1, h3 { margin:0; }
.ec-base-layer-area { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 1000; }
.ec-base-layer { z-index:1001; border:1px solid #000; background:#fff; box-sizing:border-box; }
.ec-base-layer .header { margin:0 20px; padding:20px 0; color:#000; border-bottom:1px solid #e5e5e5; }
.ec-base-layer > .header > h1,
.ec-base-layer > .header > h3,
.ec-base-layer > .header > h5 { font-size:16px; font-weight: normal; }
.ec-base-layer > .content { padding: 20px; font-size:13px; line-height: 22px; min-height: 90px; box-sizing:border-box; }
.ec-base-layer div.ec-base-help { margin-top:0; }
.ec-base-layer .btnClose { position:absolute; right:7px; top:7px; padding:10px; cursor:pointer; display:block; overflow:hidden; width:20px; height:20px; font-size:1px; line-height:0; color:transparent; white-space:nowrap; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.ec-base-layer .btnClose:before { content:""; position:absolute; top:0; right:10px; width:1px; height:21px; margin:10px 10px 0 0; background:#000; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.ec-base-layer .btnClose:after { content:""; position:absolute; top:10px; right:0; width:21px; height:1px; margin:10px 10px 0 0; background:#000; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
/* typeModal */
.ec-base-layer.typeModal { position:fixed; top:50%; left:0; right:0; margin:0 auto; transform:translateY(calc(-50% + 0.5px)); }
/* typeLayer */
.ec-base-layer.typeLayer { position:absolute; margin-top:10px; }
/* typeSide */
.ec-base-layer.typeSide { position:fixed; display: flex; flex-direction: column; height:100%; border: 0; }
.ec-base-layer.typeSide .header { padding: 74px 16px 10px; margin: 0; border: 0; }
.ec-base-layer.typeSide .header h2 { font-size: 18px; font-weight:normal; }
.ec-base-layer.typeSide .content { position: relative; padding: 0; flex: 1; overflow: auto; height:100%; }
.ec-base-layer.typeSide .ec-base-button[class*="gColumn"] {margin: 25px 16px; }
.ec-base-layer.typeSide .btnClose { top:5px; width:24px; height:24px; padding: 20px 17px; }
.ec-base-layer.typeSide .btnClose:before {right:12px; height:25px; }
.ec-base-layer.typeSide .btnClose:after {top:12px; width:25px;}
/* gAlert */
.ec-base-layer.gAlert > .header { display: block; overflow: hidden; position: absolute; font-size: 1px; line-height: 0; color: transparent; text-indent: -150%; white-space: nowrap; padding: 0; color: transparent; border: 0; }
.ec-base-layer.gAlert > .content { padding:45px 0 25px; text-align:center; }
/* gScroll */
.ec-base-layer.gScroll { height:auto; }
.ec-base-layer.gScroll > .content { overflow:auto; height:auto; max-height:70vh; }
/* popup */
#popup { padding:0 0 30px; }
#popup .ec-base-layer { border:0; }
#popup .ec-base-layer .btnClose { top:5px; }
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.ec-base-layer { position:fixed; top:50%; left:0; right:0; min-width:320px; width:calc(100% - 32px); margin:0 auto; transform:translateY(calc(-50% + 0.5px)); }
.ec-base-layer.typeSide {top: 0; left: 0; bottom: 0; width: 100%; transform: initial; }
#popup .ec-base-layer { position:relative; top:auto; left:auto; width:100%; border:0; transform: initial; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
.ec-base-layer { min-width:308px; }
.ec-base-layer.typeSide { top: 0; right: 0; left: auto; bottom: 0; width: 458px; }
.ec-base-layer.gAlert { width:360px; }
}
.xans-layout-multishopshipping { display:none; }
.xans-layout-multishopshipping .worldshipLayer { width:448px; }
.xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; }
.xans-layout-multishopshipping .worldshipLayer select { width:100%; margin:10px 0 0; }
/* 검색&ìƒí’ˆë¶„류 */
.xans-product-searchdata .searchField { padding:50px 0 ; }
.xans-product-searchdata .searchField fieldset { position:relative; display:table; margin:0 auto 10px; text-align:center; }
.xans-product-searchdata .searchField fieldset .searchInput { position:relative; display:inline-block; width:100%; border-bottom:1px solid #000; font-size: 0;}
.xans-product-searchdata .searchField fieldset .searchInput input { padding-left:0; }
.xans-product-searchdata .searchField fieldset .btnDelete { position:absolute; right:42px; top:16px; width:24px; height:24px; border:0; cursor:pointer; overflow:hidden; text-indent:100%; font-size:0; white-space:nowrap; background:url("//img.echosting.cafe24.com/skinTheme/business/ko_KR/main/btn_delete.png") no-repeat 0 0; background-size:24px 24px; }
.xans-product-searchdata .searchField fieldset .autoDrop { display:none; z-index:2; position:absolute; top:100%; left:-1px; overflow:hidden; overflow-y:auto; max-height:100px; width:100%; border:1px solid #565960; text-align:left; background:#fff; }
.xans-product-searchdata .searchField fieldset .autoDrop li a { display:block; padding:6px 10px; font-size:11px; color:#000; }
.xans-product-searchdata .searchField fieldset .autoDrop li a:hover,
.xans-product-searchdata .searchField fieldset .autoDrop li.selected a { text-decoration:none; color:#fff; background:#a1a4ae; }
.xans-product-searchdata .searchField fieldset .btnSearchOption { margin:0 0 0 7px; padding:3px 14px 3px 0; vertical-align:middle; color:#2e2e2e; font-size:12px; letter-spacing:-1px; outline:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow2.gif") no-repeat 100% 50%; }
.xans-product-searchdata .searchField .keyword { border:0; width:100%; height:54px; outline:0; font-size:18px; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.xans-product-searchdata .searchField .btnSearch { position:absolute; bottom:12px; right:0; outline:0; }
.xans-product-searchdata .searchField .keywordArea .list { display:inline-block; }
.xans-product-searchdata .searchField .keywordArea .list li { display:inline; margin:0 0 0 8px; }
.xans-product-searchdata .searchField .keywordArea .list li a { display:inline-block; padding: 6px 10px; word-break:break-all; word-wrap:break-word; color:#545454; background:#f4f4f4; }
.xans-product-searchdata .xans-product-searchconditiondata { position:relative; padding:2px 8px 9px 127px; border:1px solid #d7d5d5; font-size:0; line-height:0; }
#searchContent.xans-product-searchdata .xans-product-searchconditiondata { border-top:0; }
.xans-product-searchdata .xans-product-searchconditiondata .list { display:inline; }
.xans-product-searchdata .xans-product-searchconditiondata .list li { display:inline-block; height:14px; line-height:14px; margin:7px 5px 0 0; padding:4px 3px 4px 8px; border:1px solid #dadada; border-radius:24px; vertical-align:top; font-size:11px; color:#508bed; word-break:break-all; word-wrap:break-word; background:#fff; box-sizing:unset; -moz-box-sizing:unset; -webkit-box-sizing:unset; }
.xans-product-searchdata .xans-product-searchconditiondata .btnSearchDelete { width:22px; height:22px; margin:-4px 0; font-size:0; line-height:0; outline:0; vertical-align:top; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_delete2.gif") no-repeat center center; }
.xans-product-searchdata .xans-product-searchconditiondata .icoColor { display:inline-block; overflow:hidden; width:14px; height:14px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; border-radius:16px; vertical-align:top; }
.xans-product-searchdata .xans-product-searchconditiondata .btnRefresh { position:absolute; left:19px; top:13px; padding:0 0 0 20px; text-align:left; outline:0; line-height:20px; color:#525252; background:url("//img.echosting.cafe24.com/skin/base/product/btn_refresh.gif") no-repeat 0 0; }
.xans-product-searchdata .xans-product-searchconditiondata .btnRefresh:after { content:''; position:absolute; right:-17px; top:2px; width:1px; height:11px; background:#d3d1d2; }
.xans-product-searchdata .xans-product-categoryhashtag { display:table; table-layout:fixed; padding:10px; font-family:GulimChe,Gulim; }
.xans-product-searchdata .xans-product-categoryhashtag .heading { display:table-cell; width:41px; vertical-align:top; }
.xans-product-searchdata .xans-product-categoryhashtag .heading > strong { display:inline-block; padding:3px 5px; border:1px solid #cbcbcb; color:#525252; font-size:11px; font-weight:normal; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.xans-product-searchdata .xans-product-categoryhashtag .list { display:table-cell; width:auto; vertical-align:top; font-size:0; line-height:0; }
.xans-product-searchdata .xans-product-categoryhashtag .list li { display:inline-block; margin:4px 10px 2px 0; }
.xans-product-searchdata .xans-product-categoryhashtag .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; text-decoration:underline; color:#525252; font-size:11px; line-height:14px; }
.xans-product-searchdata .searchResult { padding:18px 0 0; overflow:hidden; text-align:right; line-height:38px; }
.xans-product-searchdata .searchResult .record { float:left; color:#7d7d7d; font-size:16px; text-indent:-4px; }
.xans-product-searchdata .searchResult .record strong { display:inline-block; margin-left:8px; }
.xans-product-searchdata .searchResult .xans-product-searchorderby { display:inline; margin:0 4px 0 0; }
.xans-product-searchdata .searchResult .xans-product-searchorderby::after{content:''; 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;
transform: rotate(-45deg);
}
.xans-product-searchdata .searchResult .xans-product-searchorderby li { display:inline; padding:0 6px 0 10px; color:#2e2e2e; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/base/product/bg_result_type.gif") no-repeat 0 50%; }
.xans-product-searchdata .searchResult .xans-product-searchorderby li:hover { color:#008bcc; text-decoration:none; }
.xans-product-searchdata .searchResult .xans-product-searchorderby li:first-child { background:none; }
.xans-product-searchdata .xans-product-searchconditiondata + .searchResult { margin-top:53px; }
.xans-product-searchdata .noData { padding:100px 0; margin:4px 0 0; text-align:center; line-height:1.8em; border: 1px solid #e5e5e5; }
.xans-product-searchdata .noData .icon { margin:0 auto 24px; }
.xans-product-searchdata .noData h3 { font-size:16px; }
.xans-product-searchdata .noData .desc { font-size:16px; margin:5px 0 13px; }
.xans-product-searchdata .noData .subDesc { font-size:12px; color:#666; line-height:22px; }
.xans-product-searchdata .noData > strong { display:block; color:#000; }
.xans-product-searchdata .noData > strong.warning { display:block; color:#008bcc; }
.xans-product-searchdata .noData ul { margin:10px 0 0; }
/* 검색옵션 ë ˆì´ì–´íŒì—… */
.searchOption { display:none; top:40px; width:460px; left:50%; margin: 0 0 0 -231px; text-align:left; }
.searchOption.ec-base-layer .content { padding:15px; }
.searchOption .boardWrite { position:relative; margin:10px 0 0; color:#353535; line-height:1.4; }
.searchOption .boardWrite:first-child { margin-top:0; }
.searchOption .boardWrite tbody th { padding:9px 0 8px 10px; text-align:left; word-break:break-all; word-wrap:break-word; }
.searchOption .boardWrite td { padding:5px 10px 4px; vertical-align:middle; word-wrap:break-word; word-break:break-all; }
.searchOption .boardWrite input[type=text] { width:309px; }
.searchOption .desc { margin:7px 0 0; color:#919399; font-size:11px; }
/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
.xans-product-searchdata .searchField { padding:50px 16px 0; }
.xans-product-searchdata .searchField .keywordArea { margin:25px auto 0; }
.xans-product-searchdata .searchField .keywordArea .heading { display:none; }
.xans-product-searchdata .searchField .keywordArea .list { overflow:auto; width:100%; white-space:nowrap; }
.xans-product-searchdata .searchField .keywordArea .list li { margin:0 10px 0 0; }
.xans-product-searchdata .searchField .keywordArea .list li a { font-size:13px; }
.xans-product-searchdata .searchField fieldset .btnSearch{ width:20px; bottom:18px; }
.xans-product-searchdata .searchField fieldset .btnDelete { width:20px; height:20px; top:16px; right:32px; background-size:20px 20px; }
.xans-product-searchdata .searchResult .record { font-size:14px; }
.xans-product-searchdata .noData { margin: 4px 16px 0px;}
.xans-product-searchdata .noData .desc { font-size:13px; }
.xans-product-searchdata .searchResult { padding:32px 16px 0; }
}
/********************* PC *********************/
@media all and (min-width:1025px) {
#container #contents { padding-bottom: 200px; max-width:1280px; }
.xans-product-searchdata .searchField fieldset .searchInput { width:600px; padding:0 36px 0 0; box-sizing:border-box; }
.xans-product-searchdata .searchField .keywordArea { max-width:600px; margin:25px auto 0; text-align:center; }
.xans-product-searchdata .searchField .keywordArea .heading { display:inline-block; margin: 0 10px 0 0; color:#000; font-size:14px; font-weight:bold; }
.xans-product-searchdata .searchField .keywordArea .list li a { font-size:14px; }
}
/* ìƒì„¸ê²€ìƒ‰ 사ì´ë“œë°”(#searchSidebar), PC ê³ ì •í˜•(#searchSticky) */
#searchSidebar.searchData { z-index:1001; position:fixed; top:0; left:-231px; width:230px; bottom:0; border-right:1px solid #c6cbd6; color:#2e2e2e; background:#f3f3f3; }
#searchSticky.searchData { z-index:100; width:180px; margin:-15px 0 0; background:#fff; }
#searchSticky.sticky { position:fixed; top:0; }
#searchSidebar.searchData.opened { left:0; }
#searchSidebar .btnSearch { position:absolute; top:195px; right:-28px; padding:0 7px 0 9px; width:27px; outline:0; color:#e5e5e5; font-size:12px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar.png") no-repeat 0 0; }
#searchSidebar.gRight { left:inherit; right:-231px; border-right-width:0; border-left:1px solid #c6cbd6; }
#searchSidebar.gRight.opened { left:inherit; right:0; }
#searchSidebar.gRight .btnSearch { left:-28px; right:inherit; }
#searchSidebar .btnSearch:before { position:absolute; top:-44px; left:0; display:block; content:""; width:27px; height:44px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before.png") no-repeat 0 0; }
#searchSidebar .btnSearch:after { position:absolute; top:100%; left:0; display:block; content:""; width:27px; height:29px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after.png") no-repeat 0 0; }
#searchSidebar.gRight .btnSearch { right:auto; left:-28px; background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_right.png"); }
#searchSidebar.gRight .btnSearch:before { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before_right.png"); }
#searchSidebar.gRight .btnSearch:after { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after_right.png"); }
#searchSidebar.searchData .searchCondition { overflow:hidden; }
#searchSidebar.searchData .searchArea { overflow-y:scroll; position:relative; width:217px; padding:20px 15px; }
#searchSidebar.searchData .searchArea { position:relative; padding:20px 15px; }
#searchSticky.searchData .searchArea { position:relative; }
#searchSidebar.searchData .searchArea > .title { border-bottom:1px solid #565960; padding:0 0 17px; text-align:center; font-family:arial, sans-serif; font-size:18px; color:#131313; }
#searchSticky.searchData .searchArea > .title { border-bottom:1px solid #565960; padding:4px 0 10px 2px; font-family:arial, sans-serif; font-size:14px; color:#0e0e0e; }
#searchSticky.searchData .xans-product-searchfilterlist:last-of-type { margin:0 0 30px 0; }
.searchData .xans-product-searchfilterlist { border-bottom:1px solid #d5d5d5; }
.searchData .xans-product-searchfilterlist .title { position:relative; padding:10px 19px 10px 5px; text-transform:uppercase; font-size:12px; cursor:pointer; }
#searchSticky.searchData .xans-product-searchfilterlist .title { position:relative; padding:10px 19px 10px 5px; text-transform:uppercase; font-size:12px; color:#444; cursor:pointer; }
.searchData .xans-product-searchfilterlist .title:after { display:block; content:""; position:absolute; top:50%; right:6px; width:7px; height:5px; margin:-3px 0 0; background:url("//img.echosting.cafe24.com/skin/base/product/bg_search_toggle_title.gif") no-repeat 0 0; }
.searchData .xans-product-searchfilterlist .content { display:none; margin:0 0 13px; }
.searchData .xans-product-searchfilterlist.selected .content { display:block; }
/* ì²´í¬ë°•ìŠ¤ */
#searchSidebar.searchData .xans-product-searchfilterlist .check .xans-product-filterform { overflow:hidden; overflow-y:auto; max-height:100px; border:1px solid #dfdfdf; background:#fff; }
#searchSticky.searchData .xans-product-searchfilterlist .check .xans-product-filterform { overflow:hidden; overflow-y:auto; max-height:90px; }
#searchSidebar.searchData .xans-product-searchfilterlist .check li { margin:0 10px 7px 27px; line-height:14px; color:#525252; word-break:break-all; word-wrap:break-word; }
#searchSticky.searchData .xans-product-searchfilterlist .check li { margin:0 10px 9px 27px; line-height:14px; color:#525252; word-break:break-all; word-wrap:break-word; }
#searchSidebar.searchData .xans-product-searchfilterlist .check li:first-child { padding-top:10px; }
#searchSticky.searchData .xans-product-searchfilterlist .check li:first-child { padding-top:7px; }
.searchData .xans-product-searchfilterlist .check li.disabled { color:#d7d7d8; }
.searchData .xans-product-searchfilterlist .check li label { cursor:pointer; vertical-align:top; }
.searchData .xans-product-searchfilterlist .check li.disabled label { cursor:default; }
.searchData .xans-product-searchfilterlist .check li input { margin:0 0 0 -17px; vertical-align:top; }
.searchData .xans-product-searchfilterlist .check .icoColor { display:inline-block; margin:0 4px 0 0; width:12px; height:12px; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png"); background-repeat:no-repeat; background-position:0 0; }
/* í…스트버튼 */
.searchData .xans-product-searchfilterlist .button .xans-product-filterform { margin:-6px 0 0 -5px; font-size:0; line-height:0; }
.searchData .xans-product-searchfilterlist .button li { display:inline-block; padding:6px 0 0 5px; min-width:50%; max-width:100%; vertical-align:top; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.searchData .xans-product-searchfilterlist .button li button { display:inline-block; width:100%; border:1px solid #ccc; padding:6px; outline:0; font-size:12px; line-height:16px; color:#525252; word-break:break-all; word-wrap:break-word; background:#fff; }
.searchData .xans-product-searchfilterlist .button li:hover button { border-color:#508bed; color:#508bed; }
.searchData .xans-product-searchfilterlist .button li.disabled button { border-color:#d7d7d8; color:#d7d7d8; cursor:default; }
.searchData .xans-product-searchfilterlist .button li.selected button { border:2px solid #508bed; padding:5px; color:#508bed; }
/* í…스트버튼 풀타입 */
.searchData .xans-product-searchfilterlist .button.full .xans-product-filterform { margin:0; border-top:1px solid #ccc; }
.searchData .xans-product-searchfilterlist .button.full li { width:100%; padding:0; }
.searchData .xans-product-searchfilterlist .button.full li button { border-top:0; }
.searchData .xans-product-searchfilterlist .button.full li:hover button { margin-top:-1px; border-top:1px solid #508bed; }
.searchData .xans-product-searchfilterlist .button.full li.disabled button { position:relative; margin-top:-1px; border-top:1px solid #d7d7d8; }
.searchData .xans-product-searchfilterlist .button.full li.selected button { position:relative; margin:-1px 0 0; padding:5px; border:2px solid #508bed; }
/* í…스트버튼 해시태그 */
.searchData .xans-product-searchfilterlist .button.hashtag li { min-width:inherit; }
/* 컬러칩 */
#searchSidebar.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform { padding:3px 5px; margin:-8px 0 0; font-size:0; line-height:0; }
#searchSticky.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform { padding:6px 5px 0; margin:-8px 0 0; font-size:0; line-height:0; }
.searchData .xans-product-searchfilterlist .colorChip li { position:relative; display:inline-block; width:20%; margin:8px 0 0; text-align:center; vertical-align:middle; }
#searchSidebar.searchData .xans-product-searchfilterlist .colorChip li .circle { display:inline-block; width:25px; height:25px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle.png"); background-repeat:no-repeat; background-position:0 0; }
#searchSticky.searchData .xans-product-searchfilterlist .colorChip li .circle { display:inline-block; width:29px; height:29px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_29.png"); background-repeat:no-repeat; background-position:0 0; }
#searchSidebar.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:18px; height:15px; margin:-7px 0 0 -9px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0; }
#searchSticky.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:18px; height:15px; margin:-8px 0 0 -9px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0; }
.searchData .xans-product-searchfilterlist .colorChip li.disabled .circle { opacity:0.1; filter:alpha(opacity=10); cursor:default; }
.searchData .xans-product-searchfilterlist .colorChip li.disabled:after { position:absolute; top:50%; left:50%; display:block; content:""; width:14px; height:14px; margin:-8px 0 0 -6px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0; }
#searchSticky.searchData .xans-product-searchfilterlist .colorChip li.disabled:after { margin:-7px 0 0 -7px; }
/* 가격 금액 ìž…ë ¥ */
.searchData .xans-product-searchfilterlist .button .priceInput { margin:9px 0 0; }
.searchData .xans-product-searchfilterlist .button .priceInput > input[type="text"] { width:47px; padding:5px 4px; margin:0 4px 0 0; }
#searchSticky.searchData .xans-product-searchfilterlist .button .priceInput { position:relative; height:30px; padding-right:32px; }
#searchSticky.searchData .xans-product-searchfilterlist .button .btnPriceSearch { position:absolute; right:0; top:0; }
/* 가격 범위 ì§€ì • */
.searchData .xans-product-searchfilterlist .priceSlide .slider { position:relative; padding:0 0 5px; margin:7px 5px 5px 8px; }
.searchData .xans-product-searchfilterlist .priceSlide .range { position:static; margin:0 0 0 0; border-radius:9px; border:1px solid #d9d9d8; height:9px; background:#e7e7e7; }
.searchData .xans-product-searchfilterlist .priceSlide .noUi-base { position:static; }
.searchData .xans-product-searchfilterlist .priceSlide .noUi-connect { position:absolute; top:-1px; height:9px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; font-size:0; line-height:0; background:#508bed; }
.searchData .xans-product-searchfilterlist .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 12px; width:12px; height:21px; border:0; border-radius:0; box-shadow:none; cursor:pointer; font-size:0; line-height:0; outline:0; background:url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0; }
.searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:before, .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:after { display:none; }
.searchData .xans-product-searchfilterlist .priceSlide .value { overflow:hidden; margin:0 0 0 3px; text-align:right; font-size:11px; }
.searchData .xans-product-searchfilterlist .priceSlide .value .minPrice { float:left; }
/* ìƒì„¸ê²€ìƒ‰ ìƒë‹¨í˜• */
#searchContent { position:relative; margin:-2px 0 0; }
#searchContent .searchArea { position:relative; border:1px solid #9fa4ac; }
#searchContent th { padding:13px 18px; border-top:1px solid #dfdfdf; border-right:1px solid #d7d5d5; font-size:12px; color:#2e2e2e; text-align:left; text-transform:uppercase; vertical-align:top; background:#f2f2f2; }
#searchContent tr td { padding:2px 6px; border-top:1px solid #eee; }
#searchContent tr:first-child th,
#searchContent tr:first-child td { border-top:0; }
#searchContent tr .extend { position:absolute; right:0; top:6px; bottom:6px; border-left:1px solid #eee; }
#searchContent tr .btnExtend { width:10px; height:10px; margin:-2px -6px 0 0; padding:15px 18px 14px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:#fff url("//img.echosting.cafe24.com/skin/base/product/btn_search_extend.png") no-repeat 50%; }
#searchContent tr.selected .btnExtend { background:#fff url("//img.echosting.cafe24.com/skin/base/product/btn_search_fold.png") no-repeat 50%; }
#searchContent tr .cell { position:relative; overflow:hidden; height:37px; }
#searchContent tr .priceSlide .cell { height:45px; }
#searchContent tr.selected .cell { height:auto; }
#searchContent tr .content { width:700px; }
#searchContent tr .colorChip .content { width:594px; margin:0 0 0 9px; }
#searchContent tr .colorChip .check { height:25px; }
#searchContent .btnAllExtend { overflow:hidden; position:absolute; right:-1px; bottom:-17px; z-index:1; width:53px; height:17px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:transparent url("//img.echosting.cafe24.com/skin/base/product/btn_all_extend.png") no-repeat 0 0; }
#searchContent .btnAllExtend.open { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_all_extend_open.png"); }
/* ì²´í¬ë°•ìŠ¤ */
#searchContent tr .check li { display:inline-block; margin:7px 5px; word-break:break-all; word-wrap:break-word; vertical-align:top; }
#searchContent tr .check li label { display:inline-block; height:23px; padding:0 7px; line-height:24px; color:#525252; cursor:pointer; vertical-align:top; }
#searchContent tr .check li.disabled label { color:#d7d7d8; cursor:default; }
/* 컬러칩 */
#searchContent tr .colorChip .xans-product-filterform { font-size:0; line-height:0; }
#searchContent tr .colorChip li { position:relative; display:inline-block; margin:7px 5px; text-align:center; vertical-align:middle; }
#searchContent tr .colorChip li .circle { display:inline-block; width:23px; height:23px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_23.png"); background-repeat:no-repeat; background-position:0 0; }
#searchContent tr .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:13px; height:10px; margin:-5px 0 0 -6px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected2.png") no-repeat 0 0; }
#searchContent tr .colorChip li.disabled .circle { opacity:0.1; filter:alpha(opacity=10); cursor:default; }
#searchContent tr .colorChip li.disabled:after { position:absolute; top:50%; left:50%; display:block; content:""; width:14px; height:14px; margin:-7px 0 0 -7px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0; }
#searchContent tr .check .icoColor { display:inline-block; margin:6px 4px 0 0; width:12px; height:12px; vertical-align:top; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png"); background-repeat:no-repeat; background-position:0 0; }
/* í…스트버튼 */
#searchContent tr .button li { display:inline-block; margin:7px 5px; word-break:break-all; word-wrap:break-word; vertical-align:top; }
#searchContent tr .button li button { display:inline-block; height:23px; padding:0 7px; line-height:24px; color:#525252; cursor:pointer; vertical-align:top; background:transparent; }
#searchContent tr .button li.selected button { border-radius:23px; color:#fff; background:#508bed; }
#searchContent tr .button li.disabled button { color:#d7d7d8; cursor:default; outline:0; }
/* 가격 */
#searchContent tr .button.full .xans-product-filterform { font-size:0; line-height:0; }
#searchContent tr .button.full li { display:inline-block; margin:7px 5px; }
#searchContent tr .button.full li button { display:inline-block; padding:0 7px; outline:0; font-size:12px; line-height:23px; color:#525252; word-break:break-all; word-wrap:break-word; letter-spacing:-0.06em; background:transparent; }
#searchContent tr .button.full li:hover button { border-color:#508bed; color:#508bed; }
#searchContent tr .button.full li.disabled button { border-color:#d7d7d8; color:#d7d7d8; cursor:default; }
#searchContent tr .button.full li.selected button { color:#508bed; }
#searchContent .button.full .content { width:450px; }
#searchContent tr.selected .button.full .content { width:806px; }
#searchContent tr.selected .button .priceInput { display:inline-block; position:static; }
#searchContent tr .button .priceInput { position:absolute; right:83px; top:0; margin:7px 0 7px 12px; line-height:22px; }
#searchContent tr .button .priceInput > input[type="text"] { width:63px; padding:2px 5px; margin:0 4px 0 0; border-color:#d9d9d9; border-radius:2px; }
#searchContent tr .button .btnPriceSearch img { display:none; }
#searchContent tr .button .btnPriceSearch #ec-product-searchdata-submit { display:inline-block; width:48px; height:22px; margin:0 0 0 4px; border:1px solid #b4b4b4; border-radius:2px; line-height:24px; color:#2e2e2e; text-align:center; vertical-align:top; }
#searchContent tr .button .btnPriceSearch a:hover { text-decoration:none; }
/* 가격 범위 ì§€ì • */
#searchContent tr .priceSlide .slider { position:relative; width:500px; padding:0 0 5px; margin:7px 5px 5px 15px; }
#searchContent tr .priceSlide .range { position:static; margin:0 0 0 0; border:0; border-radius:9px; border:1px solid #d9d9d8; height:9px; background:#e7e7e7; }
#searchContent tr .priceSlide .noUi-base { position:static; }
#searchContent tr .priceSlide .noUi-connect { position:absolute; top:-1px; height:9px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; font-size:0; line-height:0; background:#508bed; }
#searchContent tr .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 12px; width:12px; height:21px; border:0; border-radius:0; box-shadow:none; cursor:pointer; font-size:0; line-height:0; outline:0; background:url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0; }
#searchContent tr .priceSlide .noUi-handle:before, #searchContent tr .priceSlide .noUi-handle:after { display:none; }
#searchContent tr .priceSlide .value { overflow:hidden; width:512px; margin:0 0 0 9px; text-align:right; font-size:11px; }
#searchContent tr .priceSlide .value .minPrice { float:left; }
/* 결과 내 검색 */
.searchData .searchForm { position:relative; height:34px; }
.searchData .keyword { width:100%; height:34px; padding:0 44px 0 8px; box-sizing:border-box; border-radius:2px; border:1px solid #d8d8d8; }
.searchData .btnResearch { overflow:hidden; position:absolute; right:1px; top:1px; width:34px; height:32px; border-left:1px solid #d8d8d8; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:url('//img.echosting.cafe24.com/skin/base/product/btn_research.gif') no-repeat 0 0; }
.searchData .suggest ul { display:none; position:absolute; top:33px; z-index:10; width:100%; border:1px solid #d8d8d8; box-sizing:border-box; background:#fff; }
.searchData .suggest li { overflow:hidden; height:28px; padding:0 8px; color:#525252; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
.searchData .suggest li:hover, .searchData .suggest li.selected { cursor:pointer; background:#f1f1f1; }
/* ìƒë‹¨í˜• ê²°ê³¼ ë‚´ 검색 */
#searchContent tr .search { padding:9px 6px 9px 9px; }
#searchContent tr .search .cell { overflow:inherit; height:24px; }
#searchContent .searchForm { position:relative; }
#searchContent .keyword { display:inline-block; width:257px; height:24px; padding:0 8px ; box-sizing:border-box; border-radius:2px; border:1px solid #d9d9d9; vertical-align:top; }
#searchContent .btnResearch { display:inline-block; height:24px; padding:0 12px; border:1px solid #b4b4b4; border-radius:2px; line-height:24px; color:#2e2e2e; vertical-align:top; background:#fff; }
#searchContent .suggest ul { display:none; position:absolute; top:23px; z-index:10; width:257px; border:1px solid #d9d9d9; box-sizing:border-box; background:#fff; }
#searchContent .suggest li { overflow:hidden; height:28px; padding:0 8px; color:#525252; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
#searchContent .suggest li:hover, #searchContent .suggest li.selected { cursor:pointer; background:#f1f1f1; }