/* topbaord(roll) */ #topbaord { position:relative; padding:0 40px; height:40px; text-align:center; clear:both; overflow:hidden; z-index:99; } #topbaord .swiper-slide > a { display:block; line-height:40px; font-size:12px; text-decoration:underline; text-underline-offset:3px; word-break:break-word; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } /* topbaord(closedBtn common) */ .topclose { position:absolute; right:0; top:0; width:40px; height:40px; cursor:pointer; z-index:1; } .topclose a { position:Relative; display:block; width:100%; height:100%; } .topclose a:before, .topclose a:after { content:""; position:absolute; left:50%; top:50%; width:14px; height:1px; background-color:#fff; } .topclose a:before { transform:translate(-50%, -50%) rotate(45deg); } .topclose a:after { transform:translate(-50%, -50%) rotate(-45deg); } /* Logo */ #header .inner .logotop { margin:20px auto; text-align:center; } #header .inner .logotop a { position:relative; display:inline-block; margin:0 auto; width:130px; height:102px; transition:all 0.3s; } #header .inner .logotop img { position:absolute; top:0; left:0; right:0; margin:0 auto; width:100%; height:100%; } #header .inner .logotop .logo2 { opacity:0; visibility:hidden; } body#main #header .inner .logotop .logo1 { opacity:0; visibility:hidden; } body#main #header .inner .logotop .logo2 { opacity:1; visibility:visible; } body#main #header.on .inner .logotop .logo1 { opacity:1; visibility:visible; } body#main #header.on .inner .logotop .logo2 { opacity:0; visibility:hidden; } body#main #header.on .inner .logotop a, body#layout #header.fixed .inner .logotop a, body#userStyle #header.fixed .inner .logotop a { width:80px; height:63px; } /* topLeft,topRight common */ #header .inner .topLeft { position:absolute; top:0; left:25px; z-index:1; } #header .inner .topRight { position:absolute; top:0; right:25px; z-index:1; } #header .inner > div > ul { display:flex; } #header .inner > div > ul > li { position:relative; display:inline-block; margin:0 15px; vertical-align:top; box-sizing:border-box; } #header .inner > div > ul > li > a { position:relative; line-height:40px; font-size:14px; color:#000; word-spacing:-1px; } body#main #header .inner > div > ul > li > a { color:#fff; } body#main #header.on .inner > div > ul > li > a { color:#000; } #header .inner > div > ul > li.category { margin:0; } #header .inner > div > ul > li.category > a { display:block; width:40px; height:40px; } #header .inner > div > ul > li.shop { margin:0; } #header .inner > div > ul > li.bag { margin:0; } #header .inner > div > ul > li.bag a { display:block; width:40px; height:40px; } #header .inner > div > ul > li.bag .count { position:absolute; right:3px; bottom:8px; width:14px; height:14px; line-height:14px; font-size:11px; border-radius:50%; text-align:center; } #header .inner > div > ul > li.global img { margin-right:5px; width:auto; height:auto; max-height:15px; vertical-align:middle; } /* submenu */ #header .submenu:hover .subbox { display:block; } #header .submenu .subbox { display:none; position:absolute; top:40px; left:50%; transform:translateX(-50%); width:120px; padding:15px 0; background:#fff; border:1px #000 solid; box-sizing:border-box; z-index:10; } #header .submenu .subbox a { display:block; padding:3px 15px; line-height:1.5; font-size:12px; color:#000; word-spacing:-1px; } body#main #header .subbox { display:none; } body#main #header.on .submenu:hover .subbox { display:block; } /******************************************** icon common ********************************************/ /* toggle */ .plain-menu { position:relative; top:20px; margin:0 auto; display:block; transform:scale(1); box-sizing:border-box; } .plain-menu, .plain-menu::after, .plain-menu::before { position:relative; display:block; margin:0 auto; width:20px; height:1px; background:currentColor; border-radius:0; box-sizing:border-box; transition:transform .3s; } .plain-menu::after, .plain-menu::before { content:""; position:absolute; top:-6px; } .plain-menu::after { top:6px; } #header .category a.select .plain-menu { background:transparent; } #header .category a.select .plain-menu::before { top:0; transform:rotate(45deg); } #header .category a.select .plain-menu::after { top:0; transform:rotate(-45deg); } /* search */ .plain-search { position:relative; top:11px; margin:0 auto; display:block; width:20px; height:20px; transform:scale(0.8); box-sizing:border-box; } .plain-search::before, .plain-search::after { content:""; margin:0 auto; display:block; box-sizing:border-box; } .plain-search::before { width:16px; height:16px; border:1px solid; border-radius:50%; } .plain-search::after { position:absolute; top:12px; left:18px; width:1px; height:8px; background:currentColor; border-radius:1px; transform:rotate(-45deg); } /* user */ .plain-user { position:relative; top:10px; margin:0 auto; display:block; width:20px; height:20px; transform:scale(0.9); box-sizing:border-box; } .plain-user::before, .plain-user::after { content:""; margin:0 auto; display:block; border:1px solid; box-sizing:border-box; } .plain-user::before { width:10px; height:10px; border-radius:50%; } .plain-user::after { position:absolute; top:9px; width:20px; height:10px; border-bottom:0; border-top-left-radius:10px; border-top-right-radius:10px; } /* bag */ .plain-bag { position:relative; top:9px; margin:0 auto; display:block; width:16px; height:16px; transform:scale(1); box-sizing:border-box; } .plain-bag::before, .plain-bag::after { content:""; margin:0 auto; display:block; border:1px solid; box-sizing:border-box; } .plain-bag::before { width:8px; height:6px; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom:0; } .plain-bag::after { position:absolute; top:3px; width:16px; height:16px; border-radius:0; box-sizing:border-box; } /******************************************** Mobile ********************************************/ @media all and (min-width:0px) and (max-width:1024px) { /* topPopup */ #topPopup a , #topbaord .swiper-slide > a { font-size:11px; } /* Logo */ #header .inner .logotop { margin:10px auto; } #header .inner .logotop a { width:80px; height:63px; } body#main #header.on .inner .logotop a, body#layout #header.fixed .inner .logotop a, body#userStyle #header.fixed .inner .logotop a { width:60px; height:47px; } /* topLeft,topRight common */ #header .inner .topLeft { left:0; } #header .inner .topRight { right:0; } /* topLeft,topRight menu displaynone */ #header .inner > div > ul > li { display:none; } /* category toggle */ #header .inner > div > ul > li.category { display:inline-block; } /* bag */ #header .inner > div > ul > li.bag { display:inline-block; } } #header #category { } #header #category .position > ul > li { position:relative; display:inline-block; margin:0 15px; } #header #category .position > ul > li > a { position:relative; line-height:40px; font-size:14px; color:#000; word-spacing:-1px; } #header #category .position > ul > li > a:hover, #header #category .position > ul > li.selected > a, #header #category .position > ul > li.on > a { } body#main #header #category .position > ul > li > a { color:#fff; } body#main #header.on #category .position > ul > li > a { color:#000; } #header #category .sub-category { position:absolute; top:40px; left:50%; transform:translateX(-50%); width:120px; padding:15px; background:#fff; border:1px #000 solid; box-sizing:border-box; z-index:10; } #header #category .sub-category ul { position:relative; } #header #category .sub-category li { } #header #category .sub-category a { display:block; padding:3px 0; line-height:1.5; font-size:12px; color:#000; word-spacing:-1px; } #header #category .sub-category a:hover, #header #category .sub-category li.selected a { } body#main #header #category .sub-category { display:none !important; } body#main #header.on #category .sub-category { display:block !important; } #sidebar .categoryList .sub-category { display:none !important; } /** * Slide Menu */ /* Layout */ #sidebar { display:block; position:fixed; top:0; left:0; width:80%; max-width:350px; height:100%; background:#fff; transform:translateX(-100%); transition:transform 0.6s ease; overflow-x:hidden; -webkit-overflow-scrolling:touch; z-index:999; } #sidebar.on { transform:translateX(0); } #sidebar .sidebar { position:relative; height:100%; } #sidebar .sidebar .inner { display:flex; flex-direction:column; justify-content:space-between; height:100%; padding:80px 30px; line-height:1.5; word-spacing:-1px; box-sizing:border-box; } /* ClosedBtn */ .sidebarOFF { position:absolute; right:15px; top:15px; width:40px; height:40px; cursor:pointer; z-index:1; } .sidebarOFF span { position:Relative; display:block; width:100%; height:100%; } .sidebarOFF span:before, .sidebarOFF span:after { content:""; position:absolute; left:50%; top:50%; width:20px; height:2px; background-color:#000; } .sidebarOFF span:before { transform:translate(-50%, -50%) rotate(45deg); } .sidebarOFF span:after { transform:translate(-50%, -50%) rotate(-45deg); } /* Background Dummy */ .sidebarBG { display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.35); opacity:0; visibility:hidden; transition:opacity 0.6s ease,visibility 0.6s ease; z-index:998; } .sidebarBG.on { opacity:1; visibility:visible; } /* Login Menu */ #sidebar .member ul { margin:0 0 40px; } #sidebar .member ul:last-child { margin:0; } #sidebar .member ul li { padding:2px 0; } #sidebar .member ul li a { position:relative; font-size:14px; font-weight:300; color:#000; } #sidebar .member ul.snslink a { font-size:0; } #sidebar .member ul.snslink i { font-size:16px; } /* Join Bubble */ #sidebar .member .join_point { position:absolute; top:0; left:60px; padding:0; text-align:center; -webkit-animation:Animation 1s 0.2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; } #sidebar .member .join_point:before { content:""; position:absolute; left:-10px; top:3px; margin:0 auto; width:0px; height:0px; border:6px solid transparent; border-left:6px solid transparent; border-right:6px #888 solid; z-index:-1; } #sidebar .member .join_point .text { display:block; width:50px; height:18px; line-height:18px; margin:0; font-size:10px; font-weight:normal; text-align:center; color:#fff; background:#888; border-radius:8px; } @-webkit-keyframes Animation { 0% { -webkit-transform: translate(4px,0px); } 30% { -webkit-transform: translate(0px,0px); } 100% { -webkit-transform: translate(4px,0px); } } .xans-layout-searchheader { } .xans-layout-searchheader fieldset { position:relative; margin:0 auto; padding:0 30px 0 0; border:0; border-bottom:1px #000 solid; } .xans-layout-searchheader #keyword { width:100%; height:30px; line-height:30px; padding:0; border:0; font-size:12px; color:#555; background:transparent; } .xans-layout-searchheader i { position:absolute; right:0; top:0; display:inline-block; width:30px; height:30px; line-height:30px !important; color:#aaa; font-size:14px; text-align:right; cursor:pointer; } .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; } /* footer common */ .xans-layout-footer { position:relative; margin:0 auto; } .xans-layout-footer h2 { font-size:14px; font-weight:500; } /* Title */ .xans-layout-footer h3 { font-size:14px; font-weight:500; } /* No. */ .xans-layout-footer .escrow a { text-decoration:underline; text-underline-offset:3px; } .xans-layout-footer ul { position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; margin:0 auto; padding:40px 0; line-height:2; font-size:11px; border-top:1px #e5e5e5 solid; text-align:center; } .xans-layout-footer ul li { padding:0 2%; min-width:80px; } .xans-layout-footer ul.address { display:block; width:100%; font-size:10px; } .xans-layout-footer ul.address span { margin:0 10px; } .xans-layout-footer ul.address span:first-child { margin-left:0; } .xans-layout-footer ul.address span:last-child { margin-right:0; } .xans-layout-footer .footerPC { display:block; } .xans-layout-footer .footerMO { display:none; } .xans-layout-footer .snslink i { display:none; } /* footerMO Accodian */ .xans-layout-footer .footerMO .accodian { margin:0; } .xans-layout-footer .footerMO .accodian .menu-title { padding:12px 15px; font-size:12px; font-weight:600; border-top:1px #000 solid; } .xans-layout-footer .footerMO .accodian .accBtn:before, .xans-layout-footer .footerMO .accodian .accBtn:after { right:20px; } .xans-layout-footer .footerMO .accodian .accBtn:after { right:16px; } .xans-layout-footer .footerMO .accodian .sect a { display:inline-block; padding:0; font-size:12px; } .xans-layout-footer .footerMO .accodian .sect.foot6 { font-size:10px; } .xans-layout-footer .footerMO .accodian .sect.foot6 a { font-size:10px; } /* Up and Down */ #gotop { position:fixed; right:5px; bottom:20px; width:40px; text-align:center; opacity:0; visibility:hidden; transition:all 0.3s ease-in-out; z-index:90; } #gotop.on { opacity:1; visibility:visible; } #gotop a { display:block; margin:0 auto 5px; line-height:40px; font-size:18px; color:#000; cursor:pointer; } #gotop > p a { font-size:24px; color:#fff; background:#000066; border-radius:50%; } #gotop img { width:100%; height:auto; cursor:pointer; } /******************************************** Mobile ********************************************/ @media all and (min-width:0px) and (max-width:1024px) { .xans-layout-footer .footerPC { display:none; } .xans-layout-footer .footerMO { display:block; } } @charset "utf-8"; /* **************************** Do not delete. **************************** */ /* 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:0.75em 'Pretendard',Microsoft YaHei, STHeiti, simsun, Arial, sans-serif; font-weight:300; color:#000; background:#fff; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; } body { min-width:0; } 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; } button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; outline:none; font-family:'Pretendard',Microsoft YaHei, STHeiti, simsun, Arial, sans-serif; } hr.layout { display:none; } a { text-decoration:none; color:#000; } a:hover { text-decoration:none; } 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; } table.nneditor-table { width:auto !important; } /* Payment progress */ #progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; } #progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; } #progressPaybarView .box { height:180px; background:url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; } #progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;} #progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; } #progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; } div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; } /* 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); } /* **************************** Do not delete. **************************** */ ::selection { background:#000; color:#fff; text-shadow:none; } ::-moz-selection { background:#000; color:#fff; text-shadow:none; } ::-webkit-selection { background:#000; color:#fff; text-shadow:none; } b, strong { } @charset "utf-8"; /******************************************** Common ********************************************/ /* Layout */ #wrap { position:relative; margin:0 auto; } #header { position:relative; margin:0 auto; height:210px; z-index:99; } #header .header { position:fixed; left:0; top:0; width:100%; margin:0 auto; padding:0 !important; background:rgba(255,255,255,1); box-sizing:border-box; } #header .inner { position:relative; margin:0 auto; padding:0 40px; *zoom:1; } #header .inner:after { content:""; display:block; clear:both; } #header.fixed .header { border-bottom:1px #000 solid; } body#main #header { height:auto; } body#main #header .header { background:transparent; } body#main #header.on .header { background:rgba(255,255,255,1); border-bottom:1px #000 solid; } #container { position:relative; margin:0 auto; *zoom:1; } #container:after { content:""; display:block; clear:both; } #contents { position:relative; margin:0 auto; max-width:1500px; min-height:50vh; padding:0 40px; } body#main #contents { max-width:100%; } #footer { position:relative; margin:100px auto 0; clear:both; overflow:hidden; } body#main #footer { margin:0 auto; } /* Sidebar, mobileFooter, decoGuide accodianMenu(common) */ .accodian { margin:0 0 40px; line-height:2; } .accodian .menu-title { position:relative; font-size:15px; color:#000; cursor:pointer; } .accodian .menu-title a { display:block; width:100%; height:100%; } .accodian .accBtn:before, .accodian .accBtn:after { content:""; position:absolute; top:50%; right:4px; display:block; width:7px; height:1px; border-radius:0; background:#aaa; transform-origin:50% 50%; } .accodian .accBtn:before { transform:rotate(45deg); } .accodian .accBtn:after { right:0; transform:rotate(135deg); } .accodian .accBtn.active:before { transform:rotate(-45deg); } .accodian .accBtn.active:after { transform:rotate(-135deg); } .accodian .sect { display:none; position:relative; padding:0 15px 15px; } .accodian .sect a { position:relative; display:block; font-size:15px; color:#000; } .accodian .sect .sub-category { position:relative; padding:0 15px 15px; } .accodian .sect .sub-category ul li a { font-size:13px !important; } /* path */ .path { display:none; position:absolute; right:0; top:0; height:30px; line-height:30px; text-transform:lowercase; opacity:0.8; overflow:hidden; *zoom:1; z-index:10; } .path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path ol { float:right; } .path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#555; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 11px; } .path li:first-child { background:none; } .path li a { color:#888; } .path li strong, .path li strong a { color:#000; font-weight:normal; } /* Title */ .titleArea { position:relative; margin:50px auto; line-height:1.5; text-align:center; } .titleArea h2 { font-size:18px; font-weight:500; color:#000; line-height:30px; text-transform:uppercase; } .titleArea h2 font { color:#000 !important; } .titleArea .likeButton { position:absolute; left:10px; top:10px; line-height:30px; font-size:13px; color:#555; letter-spacing:-1px; cursor:pointer; } .titleArea .likeButton span { color:#aaa; } .titleArea .likeButton.selected span { color:#000; } .titleArea .likeButton img { position:relative; top:-1px; margin-right:5px; width:16px; vertical-align:middle; } .titleArea p { font-size:13px; color:#888; } .titleArea ul { font-size:13px; color:#888; } .titleArea ul li { position:relative; } p.imgArea { margin:0 auto; text-align:center; } .titleArea h2 img, p.imgArea img { max-width:100%; width:auto; height:auto; margin:0 auto 50px; } /* Board Navigation */ .boardnavi { margin:30px auto; padding:0; text-align:center; clear:both; overflow:hidden; } .boardnavi:after { content:""; display:block; clear:both; } .boardnavi a { position:relative; display:inline-block; padding:5px 15px; font-size:13px; color:var(--5th-color); } .boardnavi a:before { content:""; position:absolute; top:9px; left:-1px; display:inline-block; width:1px; height:11px; background:var(--1th-color); } .boardnavi a.navi01:before { display:none; } .boardnavi a.on { font-weight:bold; color:var(--black-color); } /* QNA iconType */ .subnavi { display:none; margin:30px -10px; padding:0; text-align:center; clear:both; overflow:hidden; } .subnavi:after { content:""; display:block; clear:both; } .subnavi a { display:inline-block; width:14%; } .subnavi a span { position:relative; display:block; margin:10px; padding:10px 10px 20px; border:1px var(--2th-color) solid; color:var(--black-color); font-size:13px; font-weight:bold; } .subnavi a span:before { display:block; content:""; width:60px; height:65px; margin:0 auto; padding:0; background:url("//cn.2dreamers.co.kr/web/upload/plain/pc/sfix_icon_shopMain.png") no-repeat 0 0; opacity:0.3; } .subnavi a.qna01 span:before { background-position:-190px -87px; } .subnavi a.qna02 span:before { background-position:-292px -189px; } .subnavi a.qna03 span:before { background-position:-105px -183px; } .subnavi a.qna04 span:before { background-position:-95px -297px; } .subnavi a.qna05 span:before { background-position:12px -189px; } .subnavi a.qna06 span:before { background-position:11px 9px; } /* Quickview modal */ #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%; } /******************************************** Mobile ********************************************/ @media all and (min-width:0px) and (max-width:1024px) { #header { height:120px; } #header .inner { padding:0 10px; } body#main #header { height:auto; } #contents { padding:0 10px; } #footer { margin:50px auto 0; } } @charset "utf-8"; /***************************************************************************************************** ### 사용설명서 입니다. 본 소스는 21 ~ 35번째줄에 있습니다. ▶ 핵사값으로 사용하기 background:# 샵 뒤 원하는 컬러번호 6자리를 입력하면 됩니다. background:# 컬러번호 앞 # 샵이 있어야 웹상에서 컬러로 인식됩니다. background:# 컬러번호 뒤 ; 세미콜론은 태그 마침표 입니다. 예제) #topbaord { background:#e1eaed; } ### 컬러번호는 포토샵,일러스트 등에서 배경색/전경색을 통해 확인 할 수 있습니다. ### color는 글자색상입니다. ### 수정 후 우측상단 [모두저장] 버튼 클릭한 뒤 홈페이지에서 새로고침하여 확인하세요. *****************************************************************************************************/ /* 최상단띠문구 배경색 */ #topbaord { background:#000000; } /* 최상단띠문구 글자색 */ #topbaord a { color:#ffffff; } /* 상단 장바구니 카운트 배경색, 글자색 */ #header .inner > div > ul > li.bag .count { background:#000000; color:#ffffff; } /* 분류별 추천상품,신상품 뱃지 아이콘 배경색, 글자색 */ .ec-base-product .prdList .thumbnail .bestcon, .ec-base-product .prdList .thumbnail .newcon { background:#000000; color:#ffffff; } /* Font */ .txtInfo { color:#757575; } .txtWarn { color:#e1662b; } .txtEm { color:#aaa; } .txtBlack { color:#000; } .txtRed { color:#f76560; } .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:#999; word-break:normal; } .txt10 { font-size:10px !important; } .txt11 { font-size:11px !important; } .txt12 { font-size:12px !important; } .txt13 { font-size:13px !important; } .txt14 { font-size:14px !important; } .txt15 { font-size:15px !important; } .txt16 { font-size:16px !important; } .txt17 { font-size:17px !important; } .txt18 { font-size:18px !important; 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; } /* 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; } .gBlank25 { display:block; margin-top:25px; } .gBlank30 { display:block; margin-top:30px; } .gIndent5 { margin-left:5px; } .gIndent10 { margin-left:10px; } .gIndent20 { margin-left:20px; } .gSpace5 { margin-right:5px; } .gSpace10 { margin-right:10px; } .gSpace20 { margin-right:20px; } .gMerge { position:relative; z-index:1; margin-top:-1px; } /* ec-base-qty */ /* ec-base-qty */ .ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; } .ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; } .ec-base-qty .up { position:absolute; left:27px; top:0; } .ec-base-qty .down { position:absolute; left:27px; bottom:0; } .ec-base-qty .qtyUp {position:absolute; left:27px; top:0;} .ec-base-qty .qtyDown { position:absolute; left:27px; bottom: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-chk */ .ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; width:22px; height:22px; vertical-align:top; cursor:pointer; } .ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; } .ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("//cn.2dreamers.co.kr/web/upload/plain/pc/bg_join_check.png") no-repeat 0 0; } .ec-base-chk input:checked + .checkbox { background-position:-34px 0; } input[type="checkbox"] { width:15px !important; height:15px !important; background:url("//cn.2dreamers.co.kr/web/upload/plain/pc/bg_checkbox.png") no-repeat 0 0; /*//img.echosting.cafe24.com/skin/mobile/common/bg_checkbox.png*/ background-size:cover; -webkit-appearance:none; } input[type="checkbox"]:checked { background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/bg_checkbox_checked.png"); /*//img.echosting.cafe24.com/skin/skin/common/bg_checkbox_checked.png*/ -webkit-appearance:none; } input[type="radio"] { border-radius:50%; background:url("//img.echosting.cafe24.com/skin/skin/common/bg_radio.png") no-repeat 0 0; background-size:cover; -webkit-appearance:none; } input[type="radio"]:checked { background-image:url("//img.echosting.cafe24.com/skin/skin/common/bg_radio_checked.png"); -webkit-appearance:none; } /* Form */ input,select,textarea { font-size:100%; font-family:'Pretendard',Microsoft YaHei, STHeiti, simsun, Arial, sans-serif; color:#353535; background:transparent; vertical-align:middle; outline:none; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; cursor:pointer; } input[type=text], input[type=password] { height:22px; line-height:24px; padding:2px 4px; border:1px solid #e3e3e3; color:#353535; font-size:12px; } input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; } input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px white inset; } select { display:inline-block; min-width:100px; height:28px; line-height:27px; padding:0 0 0 5px; color:#353535; border:1px #e3e3e3 solid; -webkit-appearance:none; -moz-appearance:none; background:transparent url("//cn.2dreamers.co.kr/web/upload/plain/pc/arrow-down.svg") 95% 50%/10px no-repeat; } select::-ms-expand { display:none; } textarea { padding:5px 6px; border:1px solid #e3e3e3; 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; } 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-radio */ .ec-base-radio.typeDelivery .ec-base-label{display:block;} .icoRequired { display:inline-block; width:6px; height:6px; margin:-2px 0 0; vertical-align:middle; text-indent:150%; font-size:0; line-height:0; white-space:nowrap; background:url("//cn.2dreamers.co.kr/web/upload/plain/pc/bg_required_point.png") no-repeat 0 0; background-size:cover; } .fr-view blockquote:not([class]), .fr-view h4:not([class]), .fr-view ol:not([class]), .fr-view p:not([class]), .fr-view ul:not([class]) { line-height:1.8; } .ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #565960; background:#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 h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; } .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 .btnClose { position:absolute; right:14px; top:14px; } .ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; } .ec-base-tooltip .edge:before, .ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; } .ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; } .ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; } .ec-base-tooltip 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 .txtEm { color:#aaa; } .ec-base-tooltip .txtWarn { color:#d98a64; } /* typeUpper */ .ec-base-tooltip.typeUpper { top:auto; bottom:34px; } .ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; } .ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; 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; } span.ec-base-help, p.ec-base-help, ul.ec-base-help li { margin:2px 0; padding:1px 0 1px 20px; line-height:1.4; background:url("//cn.2dreamers.co.kr/web/upload/plain/pc/ico_info.gif") no-repeat 0 2px; } div.ec-base-help { margin:20px 0; line-height:18px; } div.ec-base-help > h2, div.ec-base-help > h3 { padding:9px 0 6px; color:#000; font-size:14px; font-weight:300; } div.ec-base-help .inner { padding:0 0 12px; } div.ec-base-help h4 { margin:22px 0 -4px; color:#000; font-size:12px; font-weight:300; } div.ec-base-help h4:first-child { margin-top:13px; } div.ec-base-help p { margin:15px 0 0 10px; color:#707070; } div.ec-base-help ul, div.ec-base-help ol { margin:15px 0 0; } div.ec-base-help li { color:#707070; } /* number div.ec-base-help ol li { padding:0 0 0 25px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; } div.ec-base-help ol .item1 { background-position:-484px 0; } div.ec-base-help ol .item2 { background-position:-434px -100px; } div.ec-base-help ol .item3 { background-position:-384px -200px; } div.ec-base-help ol .item4 { background-position:-334px -300px; } div.ec-base-help ol .item5 { background-position:-284px -400px; } div.ec-base-help ol .item6 { background-position:-234px -500px; } div.ec-base-help ol .item7 { background-position:-184px -600px; } div.ec-base-help ol .item8 { background-position:-134px -700px; } div.ec-base-help ol .item9 { background-position:-84px -800px; } div.ec-base-help ol .item10 { background-position:-34px -900px; } */ /* typeDash */ div.ec-base-help ul li { padding:0 0 0 11px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px; } .ec-base-help.typeDash li { padding:0 0 0 11px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px; } .ec-base-tooltip .ec-base-help.typeDash li { margin:2px 0; } .ec-base-product { position:relative; margin:0 auto; } .ec-base-product > .title { margin:50px auto; line-height:1.5; text-align:center; } .ec-base-product > .title h2 { position:relative; font-size:18px; font-weight:500; color:#000; } .ec-base-product > .title p { margin:5px 0 0; font-size:12px; color:#888; } .ec-base-product img { vertical-align:middle; } .ec-base-product a[href^='/product/detail.html'] > img { } .ec-base-product .prdList { margin:0 auto; font-size:0; line-height:0; } .ec-base-product .prdList > li { position:relative; display:inline-block; margin:0 0 50px; color:#555; vertical-align:top; *display:inline; *zoom:1; } .ec-base-product .prdList > li .box { position:relative; margin:0 10px; } .ec-base-product .prdList .chk { position:absolute; top:10px; right:10px; display:block; } .ec-base-product .prdList .thumbnail { position:relative; margin:0 0 15px; text-align:center; overflow:hidden; } .ec-base-product .prdList .thumbnail img { max-width:100%; box-sizing:border-box; } .ec-base-product .prdList .thumbnail .thumb { width:100%; } .ec-base-product .prdList .thumbnail .thumbover { position:absolute; top:0; bottom:0; left:0; right:0; opacity:0; width:100%; transition:all 0.5s ease; } .ec-base-product .prdList > li:hover .thumbnail .thumbover { opacity:1; } .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 .bestcon, .ec-base-product .prdList .thumbnail .newcon { display:none; position:absolute; right:5px; top:5px; width:50px; height:50px; line-height:50px; font-size:13px; border-radius:50%; transform:scale(0.9); } .ec-base-product .prdList .thumbnail .quickicon { opacity:0; visibility:hidden; position:absolute; left:0; right:0; bottom:-50px; padding:20px 1%; text-align:center; cursor:pointer; box-sizing:border-box; transition:all 0.3s; } .ec-base-product .prdList .thumbnail:hover .quickicon { opacity:1; visibility:visible; bottom:0; } .ec-base-product .prdList .thumbnail .quickicon > div { display:inline-block; width:48%; text-align:left; } .ec-base-product .prdList .thumbnail .quickicon > div.right { text-align:right; } .ec-base-product .prdList .thumbnail .quickicon > div.right > span { margin:0 0 0 10px; } .ec-base-product .prdList .thumbnail .quickicon span.zoom { position:relative; top:2px; display:inline-block; } .ec-base-product .prdList .thumbnail .quickicon span.zoom:before { content:'+ もっと見る'; display:block; position:absolute; top:9px; left:0; font-size:13px; font-weight:500; color:#fff; } .ec-base-product .prdList .thumbnail .quickicon span.zoom img { opacity:0; width:50px; height:18px; } .ec-base-product .prdList .description { position:relative; margin:0 auto; padding:0; font-size:11px; line-height:1.5; text-align:left; } .ec-base-product .prdList .description .name { display:block; margin:0 0 10px; } .ec-base-product .prdList .description .summary { display:block; margin:0 0 2px; font-size:11px; color:#aaa; } .ec-base-product .prdList .description .mileage { display:block; } .ec-base-product .prdList .description span.grid { display:block; } .ec-base-product .prdList .description .promotion { margin:10px 0 0; } .ec-base-product .prdList .description .promotion img { margin:0 2px 2px 0; vertical-align:middle; max-width:100%; } .ec-base-product .prdList .description .reviewcount { display:block; margin:5px 0; font-size:11px; color:#555; } /* typeHover */ .ec-base-product.typeHover .prdList > li { margin:0; } .ec-base-product.typeHover .prdList li .box { overflow:hidden; } .ec-base-product.typeHover .prdList li .box .thumbnail { margin:0; } .ec-base-product.typeHover .prdList li .box .description { opacity:0; visibility:hidden; position:absolute; left:5%; right:5%; bottom:5%; padding:10px; background:rgba(255,255,255,0.85); cursor:pointer; box-sizing:border-box; transition:all 0.3s; } .ec-base-product.typeHover .prdList li:hover .box .description { opacity:1; visibility:visible; } /* Main product */ #main .ec-base-product { margin:100px auto; } /* listrecommend */ .xans-product-listrecommend { margin:50px auto 100px; } .xans-product-listrecommend .prdList .thumbnail .bestcon { display:block; z-index:1; } /* listnew */ .xans-product-listnew { margin:50px auto 100px; } .xans-product-listnew .prdList .thumbnail .newcon { display:block; z-index:1; } /* prdroll(common) */ .ec-base-product.prdroll .prdList > li { display:inline-block; width:25%; } /* grid */ .ec-base-product ul.grid1 > li { display:block; width:100%; } .ec-base-product ul.grid2 > li { width:50%; } .ec-base-product ul.grid3 > li { width:33.33%; } .ec-base-product ul.grid4 > li { width:25%; } .ec-base-product ul.grid5 > li { width:20%; } .ec-base-product ul.grid6 > li { width:16.66%; } .ec-base-product ul.grid3 > li .color { } .ec-base-product ul.grid4 > li .color { } .ec-base-product ul.grid5 > li .color { } /* module="product_ListItem" */ .ec-base-product .spec { margin:0; } .ec-base-product .spec li { display:block; } .ec-base-product .spec [rel="消费价格"] { } .ec-base-product .spec [rel="销售价格"] { } .ec-base-product .spec [rel="优惠价格"] { } .ec-base-product .spec [rel="商品概要说明"], .ec-base-product .spec [rel="商品简要说明"] { display:block; margin:12px 0; } .ec-base-product .spec li .title { font-weight:normal; vertical-align:top; } .ec-base-product .spec li .title span { vertical-align:top; } .ec-base-product .color { overflow:hidden; display:block; margin:10px 0 8px; font-size:0; line-height:0; } .ec-base-product .chips { display:inline-block; width:10px; height:3px; margin:0 2px 2px 0; border:1px solid rgba(190,190,190,0.4); box-sizing:border-box; } .ec-base-product .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; } .ec-base-product .layerDiscountPeriod { left:50%; top:26px; width:247px; margin:0 0 0 -124px; } .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 { position:relative; display:inline-block; } .differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; } .differentialShipping h3.title { margin:0; height:35px; padding:0 35px 0 19px; border:0; color:#fff; font-size:14px; line-height:35px; background:#495164; } .differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #757575; border-top:0; text-align:center; background:#fff; } .differentialShipping .close { position:absolute; right:14px; top:12px; } .differentialShipping .close img { cursor:pointer; } .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 (min-width:0px) and (max-width:1024px) { /* Main Product */ #main .ec-base-product { margin:50px auto; } .ec-base-product .prdList > li .box { margin:0 5px; } .ec-base-product .prdList .thumbnail .bestcon, .ec-base-product .prdList .thumbnail .newcon { right:0; top:0; transform:scale(0.7); } .ec-base-product .prdList .description .name { margin:0 0 5px; } .ec-base-product .prdList .description .name span, .ec-base-product .spec li span, .ec-base-product .prdList .description .reviewcount { font-size:11px !important; } .ec-base-product .spec [rel="商品概要说明"] { margin:5px 0; } .ec-base-product .spec [rel="商品简要说明"] span { font-size:10px !important; } .ec-base-product ul.grid2 > li, .ec-base-product ul.grid3 > li, .ec-base-product ul.grid4 > li, .ec-base-product ul.grid5 > li { width:50%; } } .ec-base-paginate { padding:50px 0 30px; text-align:center; font-size:0; line-height:0; } .ec-base-paginate ol { margin:0 3px; } .ec-base-paginate ol, .ec-base-paginate ol li { display:inline-block; vertical-align:top; } .ec-base-paginate ol li:not(:first-child) { margin:0 0 0 3px; } .ec-base-paginate ol li a { display:inline-block; width:25px; height:25px; line-height:24px; font-size:14px; color:#000; vertical-align:middle; } .ec-base-paginate ol li .this { color:#000; text-decoration:underline; } .ec-base-paginate a.nolink { cursor:default; } .ec-base-paginate [class*='btn'] { display:inline-block; overflow:hidden; width:25px; height:25px; font-size:1px; line-height:0; text-indent:-9999em; vertical-align:middle; background-repeat:no-repeat; background-position:50% 50%; background-size:18px auto; } .ec-base-paginate .btnFirst { background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/btn_page_first.png"); } .ec-base-paginate .btnPrev { background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/btn_page_prev.png"); } .ec-base-paginate .btnNext { background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/btn_page_next.png"); } .ec-base-paginate .btnLast { background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/btn_page_last.png"); } /* typeSub .ec-base-paginate.typeSub ol { margin:0 15px; vertical-align:middle; } .ec-base-paginate.typeSub li { font-size:12px; border:0; } .ec-base-paginate.typeSub img { vertical-align:middle; opacity:1; } .ec-base-paginate.typeSub li a { width:auto; margin:0 5px 0; padding:2px; color:#999; background:none; } .ec-base-paginate.typeSub li a.this { color:#222; text-decoration:underline; border:0; } .ec-base-paginate.typeSub .first { margin-right:3px; } .ec-base-paginate.typeSub .last { margin-left:3px; } */ /* 콜렉션 페이징 */ .ec-base-paginate.arrow { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); margin:0 auto; } .ec-base-paginate.arrow .btnFirst { display:none; } .ec-base-paginate.arrow .btnLast { display:none; } .ec-base-paginate.arrow ol { display:none; } .ec-base-paginate.arrow [class*='btn'] { width:25px; height:48px; background-size:100% auto; } .ec-base-paginate.arrow .btnPrev { position:absolute; left:2.5%; top:0; background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/prev_white.png"); } .ec-base-paginate.arrow .btnNext { position:absolute; right:2.5%; top:0; background-image:url("//cn.2dreamers.co.kr/web/upload/plain/pc/next_white.png"); } .ec-base-tab { position:relative; } .ec-base-tab .menu { margin:0 0 20px; font-size:0; line-height:0; border-bottom:1px #e5e5e5 solid; 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 { position:relative; display:inline-block; vertical-align:top; } .ec-base-tab .menu li a { position:relative; display:block; min-width:auto; margin:0 0 0 -1px; padding:15px 12px 14px; font-size:13px; color:#aaa; line-height:1.5; text-decoration:none; outline:0; text-align:center; } .ec-base-tab .menu li:first-child a { margin-left:0; padding-left:0; } .ec-base-tab .menu li.selected a { position:relative; top:0; left:-2px; margin:0 0 -1px; color:#000; font-weight:500; } .ec-base-tab .menu li.selected a:before { content:""; position:absolute; left:0; right:0; bottom:-1px; display:block; width:100%; height:1px; background:#353535; } .ec-base-tab .menu li.selected:first-child a { left:-1px; } .ec-base-tab > .right { position:absolute; top:8px; right:0; line-height:24px; color:#aaa; } /* typeLight */ .ec-base-tab.typeLight .menu li.selected a { margin:0 0 -2px; color:#353535; } /* grid (2~7) */ .ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; } .ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; } .ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; margin:0; padding:11px 0; border:0; } .ec-base-tab[class*="grid"] .menu li.selected { position:relative; top:0; right:-1px; border:1px solid #e5e5e5; border-bottom:0; background:#fff; } .ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; } .ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; } .ec-base-tab.grid2 .menu li { width:50.5%; } .ec-base-tab.grid3 .menu li { width:34%; } .ec-base-tab.grid4 .menu li { width:25.5%; } .ec-base-tab.grid5 .menu li { width:20.5%; } .ec-base-tab.grid6 .menu li { width:17%; } .ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; } .ec-base-tab.grid7 .menu li:first-child { width:13% \0/; } /* gFlex */ .ec-base-tab.gFlex .menu { display:flex; border-right:0; } .ec-base-tab.gFlex .menu li { float:none; flex:1; } .ec-base-tab.gFlex .menu:after { display:none; } .ec-base-tab.gFlex .menu li.selected a { left:0; margin:0 0 -1px -1px; } /* tabLogin */ .ec-base-tabLogin { position:relative; } .ec-base-tabLogin .menu { margin:0 0 10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .ec-base-tabLogin .menu:after { content:""; display:block; clear:both; } .ec-base-tabLogin .menu li { float:left; width:50%; } .ec-base-tabLogin .menu li a { display:block; width:100%; height:50px; line-height:50px; font-size:14px; font-weight:300; color:#000; border-bottom:2px solid #d7d5d5; text-decoration:none; outline:0; text-align:center; } .ec-base-tabLogin .menu li.on a { border-color:#000; } /* button */ .btnNormal,.btnSubmit,.btnEm,.btnBasic { font-family:'Pretendard',Microsoft YaHei, STHeiti, simsun, Arial, sans-serif; text-transform:uppercase; } [class^='btnNormal'], a[class^='btnNormal'] { display:inline-block; box-sizing:border-box; padding:4px 8px; border:1px solid #d5d5d5; border-radius:2px; 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:#000; background-color:#fff; } [class^='btnSubmit'], a[class^='btnSubmit'] { display:inline-block; box-sizing:border-box; padding:4px 8px; border:1px solid transparent; border-radius:2px; 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:#000; } [class^='btnEm'], a[class^='btnEm'] { display:inline-block; box-sizing:border-box; padding:4px 8px; border:1px solid transparent; border-radius:2px; 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:#aaa; } [class^='btnBasic'], a[class^='btnBasic'] { display:inline-block; box-sizing:border-box; padding:4px 8px; border:1px solid #efefef; border-radius:2px; 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:#000; background-color:#efefef; } [class^='btnNormal']:not(.disabled):hover { } [class^='btnSubmit']:not(.disabled):hover { } [class^='btnEm']:not(.disabled):hover { } [class^='btnBasic']:not(.disabled):hover { } [class^='btnNormal'].disabled { border-color:#e3e3e3; color:#999; } [class^='btnSubmit'].disabled { background-color:#b5b6b9; color:#f0f0f0; } [class^='btnEm'].disabled { background-color:#b5b6b9; color:#f0f0f0; } [class^='btnBasic'].disabled { border-color:#e3e3e3; color:#999; } /* mini */ [class*="btn"].mini { padding:1px 8px; font-size:11px; } /* size */ [class^='btn'].sizeS { padding:8px 10px; font-size:13px; } [class^='btn'].sizeM { padding:10px 16px; font-size:13px; } [class^='btn'].sizeL { padding:14px 16px; font-size:14px; min-width:80px; } [class^='btn'].sizeXL { padding:14px 16px; font-size:15px; } /* width Fix */ [class^='btn'][class*='Fix'] { width:72px; word-break:keep-all; word-wrap:break-word; } [class^='btn'][class*='Fix'].sizeS { width:96px; } [class^='btn'][class*='Fix'].sizeM { width:120px; padding-left:8px; padding-right:8px; } [class^='btn'][class*='Fix'].sizeL { width:160px; padding-left:8px; padding-right:8px; } [class^='btn'][class*='Fix'].sizeXL { width:180px; padding-left:8px; padding-right:8px; font-size:15px; } /* point */ [class^='btnSubmit'].point { background-color:#000066; } [class^='btnNormal'].border { border-color:#666; } /* icon button */ a.btnLink { color:#353535; } a.btnLink:hover { text-decoration:none; color:#aaa; /*-webkit-box-shadow:0 1px 0 0 #222; -moz-box-shadow:0 1px 0 0 #222; box-shadow:0 1px 0 0 #222;*/ } a.btnLink:after { content:""; display:inline-block; margin:-2px -2px 0 3px; vertical-align:middle; border:0 0 0 10px; border-style:solid; border-color:transparent transparent transparent #77797d; } [class^='btn'] i { display:none \0/IE8; } [class^='btn'] .icoArrow { display:inline-block; width:3px; height:3px; margin:-2px 1px 0 1px; border:2px solid #77797d; border-width:0 2px 2px 0; vertical-align:middle; transform:rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); } [class^='btnSubmit'] .icoArrow, [class^='btnEm'] .icoArrow { border-color:#f0f0f0; } [class^='btn'] .icoDelete { position:relative; overflow:hidden; display:inline-block; width:10px; height:10px; margin:-2px 2px 0 0; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); } [class^='btn'] .icoDelete:before { content:""; position:absolute; top:0; right:4px; width:2px; height:10px; background:#77797d; } [class^='btn'] .icoDelete:after { content:""; position:absolute; top:4px; right:0; width:10px; height:2px; background:#77797d; } [class^='btnSubmit'] .icoDelete:before, [class^='btnSubmit'] .icoDelete:after, [class^='btnEm'] .icoDelete:before, [class^='btnEm'] .icoDelete:after { background:#f0f0f0; } [class^='btn'] .icoAdd, [class^='btn'] .icoRemove { position:relative; overflow:hidden; display:inline-block; width:8px; height:8px; margin:-2px 2px 0 0; vertical-align:middle; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoAdd:after, [class^='btn'] .icoRemove:before { content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px; background:#77797d; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoRemove:before { height:2px; margin:-1px 0 0 -4px; } [class^='btn'] .icoAdd:after { width:2px; margin:-4px 0 0 -1px; } [class^='btn'] img { margin:-2px 1px 0; vertical-align:middle; } [class^='btn'].addWidth { padding:2px 20px; } /* unique */ .btnLogin, a.btnLogin { display:inline-block; box-sizing:border-box; width:100px; height:70px; line-height:70px; border-radius:2px; text-align:center; font-size:12px; font-weight:bold; text-decoration:none; color:#fff; background-color:#353535; } .btnLogin:hover { background-color:#555; } .btnAgree, a.btnAgree { display:inline-block; box-sizing:border-box; width:80px; height:70px; line-height:70px; border:1px solid #e5e5e5; border-radius:2px; text-align:center; font-size:12px; font-weight:bold; color:#353535; text-decoration:none; background-color:#fff; } .btnAgree:hover { background-color:#f3f3f3; } .btnToggle { display:inline-block; font-size:0; line-height:0; } .btnToggle button { display:inline-block; box-sizing:border-box; border:1px solid #d1d1d1; margin:0 -1px 0 0; padding:0 7px; height:24px; line-height:24px; text-align:center; font-size:12px; outline:0; text-decoration:none; color:#353535; background:#fff; } .btnToggle button:first-child { border-radius:2px 0 0 2px; } .btnToggle button:last-child { border-radius:0 2px 2px 0; } .btnToggle button.selected { position:relative; border:1px solid #858585; color:#fff; background:#858585; } /* ec-base-button */ .ec-base-button { padding:10px 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 #e5e5e5; } .ec-base-button.typeBG { padding:10px 20px; border:1px solid #e5e5e5; } /* 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 2px; padding-left:8px; padding-right:8px; word-break:keep-all; word-wrap:break-word; white-space:normal; -webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; align-items:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; } .ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] { -webkit-flex:none; -moz-flex:none; -ms-flex:none; flex:none; } /* 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; } /* gFull */ .ec-base-button.gFull { margin-bottom:3px; } .ec-base-button.gFull [class*="btn"], [class*="btn"].gFull { width:100%; } .ec-base-button.gFull [class*="btn"] { margin:0 0 7px; } /* base */ .ec-base-box { padding:20px; margin-left:auto; margin-right:auto; border:1px solid #e5e5e5; color:#000; } .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:#e5e5e5; } .ec-base-box.typeBg { background-color:#fafbfb; } .ec-base-box.typeThin { border-width:1px; border-color:#e5e5e5; } .ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:14px; text-align:center; } .ec-base-box.typeThinBg { border-width:1px; border-color:#e5e5e5; background-color:#fafafa; } .ec-base-box.center { text-align:center; } .ec-base-box.typeThinBg > .agree { padding:20px; border:1px solid #e5e5e5; background:#fff; } .ec-base-box.typeThinBg > .agree p { padding:0 0 17px; } /* typeMember */ .ec-base-box.typeMember { padding:0; } .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; border-right:1px #eee solid; 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 20px; width:auto; line-height:1.5em; /*border-left:1px solid #e5e5e5;*/ vertical-align:middle; } .ec-base-box.typeMember.gMessage { border-width:1px; border-color:#e5e5e5; } .ec-base-box .message { display:block; padding:10px 0 10px 35px; border-bottom:1px solid #e5e5e5; background:#fafafa url("//cn.2dreamers.co.kr/web/upload/plain/pc/ico_info.gif") no-repeat 10px center; } /* typeProduct */ .ec-base-box.typeProduct { display:table; table-layout:fixed; padding:15px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; padding:0 20px; vertical-align:middle; } .ec-base-box.typeProduct .thumbnail { width:100px; } .ec-base-box.typeProduct .thumbnail img { max-width:90px; } .ec-base-box.typeProduct .information { padding-left:0; } .ec-base-table table { position:relative; margin:10px 0 0; line-height:1.5; font-size:12px; color:#fff; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; } .ec-base-table.gLayoutFixed table { table-layout:fixed; } .ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout:auto; } .ec-base-table table:before { /*position:absolute; top:0; left:0; display:block; content:""; width:100%; height:1px; background:#e5e5e5;*/ } .ec-base-table thead th { padding:15px 0 14px; /*border-left:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;*/ color:#000; vertical-align:middle; font-size:13px; font-weight:400; background:transparent; } .ec-base-table tbody th { padding:15px 0 14px 18px; border:1px solid #e5e5e5; border-right-width:0; border-bottom-width:0; color:#000; text-align:left; vertical-align:middle; font-weight:400; background-color:transparent; } .ec-base-table th { word-break:break-all; word-wrap:break-word; } .ec-base-table th:first-child { border-left:0; } .ec-base-table td { position:relative; padding:11px 10px 10px; border-top:1px solid #e5e5e5; color:#000; vertical-align:middle; word-break:break-all; word-wrap:break-word; } .ec-base-table td.clear { padding:0 !important; border:0 !important; } .ec-base-table tr.payDetail td { padding:21px 10px 20px 0; } .ec-base-table td.subject img { margin:0 2px 2px 0; max-height:16px; } /* horizontal */ /* typeWrite */ .ec-base-table.typeWrite th { } .ec-base-table.typeWrite td { padding:15px 10px 14px; } .ec-base-table.typeWrite img { max-width:100% !important; height:auto !important; } /* vertical */ /* typeList */ .ec-base-table.typeList table { border-top:1px solid #e5e5e5; } .ec-base-table.typeList table:before { display:none; } .ec-base-table.typeList td { padding:15px 10px; } .ec-base-table.typeList tfoot td { padding:15px 10px; } .ec-base-table .message { border:1px solid #e5e5e5; border-left:0; border-right:0; padding:50px 0; text-align:center; color:#aaa; } .ec-base-table table + .message { margin:-1px 0 0; } .ec-base-table table td.message { padding:50px 0; } .ec-base-table .scroll .message { border:0; } /* scroll */ .ec-base-table.typeList .head td { padding:11px 0 10px; border-left:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; color:#000; vertical-align:middle; text-align:center; } .ec-base-table.typeList .head td:first-child { border-left:0; } .ec-base-table.typeList .scroll { position:relative; overflow-x:hidden; overflow-y:scroll; max-height:185px; min-height:100px; border:1px solid #e5e5e5; border-top-width:0; margin-top:-1px; } .ec-base-table.typeList .scroll table { border:0; margin:0; } .ec-base-table.typeList .scroll table:before { display:none; } .ec-base-table.typeList .scroll .message { border:0; } /* thead - blind */ .ec-base-table thead.blind, .ec-base-table thead.blind th { display:none; } .ec-base-table thead.blind + tbody tr:first-child th, .ec-base-table thead.blind + tbody tr:first-child td { border-top-width:0; } /* Line */ .ec-base-table.typeList.gLine table { border-width:0; border-bottom-width:1px; } /* common */ /* border, background style none */ .ec-base-table.typeClear table:before { display:none; } .ec-base-table.typeClear table, .ec-base-table.typeClear th, .ec-base-table.typeClear td { border:0 none; } .ec-base-table.typeClear th { font-weight:bold; } /* border */ .ec-base-table.gBorder td { border-left:1px solid #e5e5e5; } .ec-base-table.gBorder td:first-child { border-left:0; } .ec-base-table.gBorder td.gClearLine { border-left:0; } .ec-base-table.typeList.gBorder tbody td { border-color:#e5e5e5; } /* align */ .ec-base-table .left { text-align:left; } .ec-base-table .center { text-align:center; } .ec-base-table .right { text-align:right; } .ec-base-table.typeList .center td, .ec-base-table.typeList td.center { padding-left:0; padding-right:0; } .ec-base-table.typeList .center td.left { padding-left:10px; } .ec-base-table.typeList .center td.right { padding-right:10px; } .ec-base-table .top th, .ec-base-table th.top, .ec-base-table .top td, .ec-base-table td.top { vertical-align:top; } .ec-base-table .middle th, .ec-base-table th.middle, .ec-base-table .middle td, .ec-base-table td.middle { vertical-align:middle; } /* form */ .ec-base-table img { vertical-align:middle; } /* address */ .ec-base-table .ec-address { margin:-9px -10px -7px; } .ec-base-table .ec-address > li { padding:5px 10px 4px; /*border-top:1px solid #e5e5e5;*/ } .ec-base-table .ec-address > li input[type="text"] { width:373px; } .ec-base-table .ec-address > li select { width:383px; } .ec-base-table .ec-address .ec-base-help { margin-left:0; } .ec-base-table .ec-address .ec-address-area select { display:block; } .ec-base-table .ec-address .ec-address-area select:not(:first-child) { margin-top:6px; } .ec-base-table .ec-address .ec-address-zipcode input[type="text"] { width:80px; margin-right:3px; } .ec-base-table .ec-address .ec-address-zipcode .btnBasic { margin-right:4px; } @media print { .ec-base-table table:before { display:none; } } .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%; } /* 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; } /* typeBullet */ .ec-base-desc.typeBullet dt, .ec-base-desc.typeBullet .term { padding:0 4px 0 10px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; } /* 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; } /** * Swiper 5.2.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 16, 2019 */ @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));outline:none;opacity:0.8;}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.25;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:34px;);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:15px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:10px;height:10px;display:inline-block;border-radius:100%;background:#ddd;opacity:.8;outline:none;}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#000;}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 3px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:2px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:2px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:#555;border-radius:2px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} /* css custom */ .swiper-pagination.shape > span { border-radius:0; } .swiper-pagination.square .swiper-pagination-bullet { width:15px; height:3px; border-radius:3px; transition:width 0.3s ease-out; } .swiper-pagination.square .swiper-pagination-bullet.swiper-pagination-bullet-active { width:25px; } .swiper-pagination.borderline .swiper-pagination-bullet { width:7px; height:7px; background:transparent; border:1px rgba(255,255,255,0.8) solid; } .swiper-pagination.borderline .swiper-pagination-bullet.swiper-pagination-bullet-active { background:rgba(255,255,255,0.8); } .swiper-pagination.text > span { width:10px; height:1px; line-height:1px; font-size:12px; font-weight:600; background:transparent; color:#fff; border-radius:0; vertical-align:top; } .swiper-pagination.text > span.swiper-pagination-bullet-active { font-size:0; background:#fff; } .swiper-pagination.tabline { position:relative; bottom:0; margin:0 auto 20px; text-align:center; } .swiper-pagination.tabline > span { position:relative; margin:0 5px; padding:5px 5px; width:auto; height:auto; line-height:1.5; font-size:11px; color:#888; background:transparent; border:0; border-radius:0; opacity:1; box-sizing:border-box; white-space:nowrap; text-overflow:ellipsis; overflow:hidden } .swiper-pagination.tabline > span:before { content:""; position:absolute; left:0; right:0; bottom:0; margin:0 auto; display:block; width:0; height:2px; transition:width 0.3s; } .swiper-pagination.tabline > span.swiper-pagination-bullet-active { color:#000; } .swiper-pagination.tabline > span.swiper-pagination-bullet-active:before { width:100%; background:#333; } .swiper-pagination.tabbox { position:relative; bottom:0; margin:0 auto 30px; text-align:center; } .swiper-pagination.tabbox > span { position:relative; display:inline-block; padding:4px 10px; margin:0 5px; width:auto; min-width:80px; height:18px; line-height:18px; font-size:13px; background:#fff; color:#999; border:1px #ddd solid; border-radius:15px; opacity:1; } .swiper-pagination.tabbox > span.swiper-pagination-bullet-active { color:#000; font-weight:600; } .swiper-pagination.fraction { position:relative; bottom:-20px; font-size:17px; font-weight:400; text-align:left; color:#555; } .swiper-pagination.fraction .swiper-pagination-current { color:#aaa; } .swiper-pagination.fraction .swiper-pagination-total { } .swiper-pagination.fractionbox { display:inline-block; /*left:initial;*/ left:50%; transform:translateX(-50%); width:auto; min-width:60px; margin:0 auto; padding:5px 10px; font-size:12px; line-height:1.5; color:#fff; background:rgba(0,0,0,0.3); border-radius:30px; } .swiper-pagination.fractionbox > span { width:auto; height:auto; margin:0; background:transparent; transition:none; } .swiper-pagination.scrollbar { position:relative; left:0; right:0; bottom:0; display:flex; justify-content:space-between; text-align:center; } .swiper-pagination.scrollbar > span { width:100%; height:2px; margin:0 !important; border-radius:0; } .swiper-pagination.scrollbar > span.swiper-pagination-bullet-active { height:2px; } /* scrollbar */ .swiper-scrollbar.scrollbar { position:absolute; left:0; right:0; bottom:0; width:auto; height:1px; background:#ddd; } .swiper-scrollbar.scrollbar .swiper-scrollbar-drag { top:-1px; background:#000; height:3px; border-radius:3px; } /* arrow */ .swiper-button-prev.swiper-button-gray, .swiper-button-next.swiper-button-gray { color:#555; } .swiper-button-prev.swiper-button-white.gray, .swiper-button-next.swiper-button-white.gray { margin-top:-5%; background-color:rgba(170,170,170,0.6); width:40px; height:40px; background-size:13px auto; border-radius:50%; } .swiper-button-prev.swiper-button-none i, .swiper-button-next.swiper-button-none i { font-size:24px; color:#000; vertical-align:middle; } .swiper-button-prev.swiper-button-none:after, .swiper-button-next.swiper-button-none:after { display:none; } /******************************************** Banner Common ********************************************/ .gridinner { margin:0 auto; /*width:90%; max-width:1500px;*/ clear:both; overflow:hidden; } .gridimg { margin:10px -10px; text-align:center; font-size:0; line-height:0; } .gridimg > div { display:inline-block; padding:10px; box-sizing:border-box; vertical-align:top; } .gridimg img { width:100%; height:auto; } .gridimg.grid1 { margin:0 auto; } .gridimg.grid1 > div { display:block; padding:0; } .gridimg.grid2 > div { width:50%; } .gridimg.grid3 > div { width:33.33%; } .gridimg.grid4 > div { width:25%; } .gridimg.grid5 > div { width:20%; } /******************************************** Main ********************************************/ /* visualArea */ #visualArea { position:relative; margin:0 -40px; overflow:hidden; } /* visual(Roll,Basic common) */ .visual { position:relative; margin:0 auto; overflow:hidden; } .visual > div > a, .visual .swiper-slide > a { position:relative; content:""; display:block; width:100%; height:100vh; } .visual img { position:absolute; top:0; object-fit:cover; width:100%; height:100%; } .visual .txt { position:absolute; left:0; right:0; bottom:50px; /*top:50%; transform:translateY(-50%);*/ line-height:1.5; font-size:15px; font-weight:300; color:#fff; text-align:center; text-decoration:underline; text-underline-offset:3px; word-break:break-word; } .visual .swiper-button-prev { left:50px !important; } .visual .swiper-button-next { right:50px !important; } .visual .swiper-pagination { bottom:10px; left:0; right:0; } /******************************************** Aboutpage ********************************************/ #about { position:relative; margin:0 auto; text-align:center; } #about img { width:auto; height:auto; max-width:100%; } #about > div { margin:0 auto 50px; } #about > div:last-child { margin:0 auto; } /******************************************** decopage ********************************************/ /* prdRelated */ #prdRelated .swiper-wrapper { display:inline-flex; width:auto; margin:0 auto; } #prdRelated .swiper-button-prev, #prdRelated .swiper-button-next { margin-top:-48px; } #prdRelated .swiper-button-next.swiper-button-disabled, #prdRelated .swiper-button-prev.swiper-button-disabled { opacity:0; } /******************************************** Mobile ********************************************/ @media all and (min-width:0px) and (max-width:1024px) { #visualArea { margin:0 -10px; } .visual .txt { font-size:14px; } } /* reset */ li { list-style:none; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } h1, h3 { margin:0; } /* common */ .ec-base-layer { position:absolute; z-index:100; border:1px solid #666; background:#fff; } .ec-base-layer .header { padding:10px 35px 8px 19px; color:#000; } .ec-base-layer .header > h1, .ec-base-layer .header > h3 { font-size:14px; font-weight:500; line-height:1.5; } .ec-base-layer .content { padding:10px 20px 20px; font-size:12px; } .ec-base-layer div.ec-base-help { margin-top:0; } .ec-base-layer .ec-base-button { padding:9px; text-align:center; } .ec-base-layer .close { position:absolute; right:0; top:0; padding:15px; cursor:pointer; } /* popup */ #popup .ec-base-layer { position:relative; border:0; } #popup .ec-base-layer .header { padding:12px 35px 12px 19px; } #popup .ec-base-layer .close { top:5px; } /* ec-base-table */ .ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; } .ec-base-layer .ec-base-table table { line-height:1.4; } .ec-base-layer .ec-base-table thead th { padding:9px 0 8px; } .ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; } .ec-base-layer .ec-base-table td { padding:9px 10px 8px; } /* horizontal - typeWrite */ .ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; } /* vertical - typeList */ .ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; } /* typeBorder */ .ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; } /* address */ .ec-base-layer .ec-base-table .ec-address { margin:-6px -10px -4px; } .ec-base-layer .ec-base-table .ec-address > li { padding:5px 10px 4px; } .xans-layout-multishopshipping { display:none; } .xans-layout-multishopshipping .worldshipLayer { top:303px; left:50%; width:448px; margin:0 0 0 -225px; } .xans-layout-multishopshipping .worldshipLayer .content { padding:153px 20px 30px; line-height:1.8; background:url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat; } .xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; } .xans-layout-multishopshipping .worldshipLayer .select { margin:10px 0 0; } .xans-layout-multishopshipping .worldshipLayer .select select { width:100%; } .xans-layout-conversionpc { background:#fff; padding:45px; text-align:center; } .xans-layout-conversionpc a { margin:20px; padding:20px 40px 20px 110px; font-size:68px; color:#63666e; text-decoration:none; text-align:center; border:4px solid #9d9db0; border-radius:10px; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%; }