#header { position:relative; width:100%; background:#fff; font-family: 'Nanum Gothic';} /** 헤더01 **/ #header_01 { position:relative; z-index:30; width:100%; height:40px; background:rgba(238,238,238,1)/* BAR 컬러 */; background:#f4f4f4 \9/* BAR 컬러 익스플로러9이하 */; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } #header_01 .header_01_inner { height:40px; } /* 스크롤시 */ #header_01.fixed { position:fixed; top:0px; background:rgba(238,238,238,0.97)/* BAR 컬러 */; background:#f4f4f4 \9/* BAR 컬러 익스플로러9이하 */; } /** 헤더02 **/ #header_02 { position:relative; height:130px; margin:0 auto; } #header_02.fixed { margin:42px auto 0; } /* 로고 */ #header_02 .logo { position:relative; width:480px; margin-left:210px; height:110px; padding:20px 0 0 0px; font-size:0; line-height:0; text-align:center; } #header_02 .logo a { font-family:verdana, '맑은 고딕', malgungothic, sans-serif; font-size:40px; color:#008bcc; font-weight:bold; text-decoration:none; font-style:normal; } #header_02 .logo img { position:absolute; } /** 헤더03 **/ #header_03 { position:relative; z-index:29; width:100%; height:50px; line-height:50px; background:#a1a1a1/* BAR 배경 및 컬러 */; box-shadow:none; transition:box-shadow 1s ease; -webkit-transition:box-shadow 1s ease; } #header_03 .header_03_inner { height:50px; } /* 스크롤 */ #header_03.fixed { position:fixed; top:0px; box-shadow:0 3px 4px rgba(0,0,0,0.15); } /* 슬라이드 홈버튼 */ #header_home_wrap { position:relative; z-index:20; top:0; left:50%; width:0px; height:0px; } #header_home { position:absolute; display:none; z-index:15; top:0px; left:-630px; width:50px; height:50px; cursor:pointer; } /* 1265px 이하 */ @media all and (max-width:1265px){ #header_home { left:-490px; } #header_02 .logo { position:relative; width:280px; margin-left:200px; height:110px; padding:20px 0 0 0px; font-size:0; line-height:0; text-align:center; } } #header_topm2 { position:relative; float:left; background:#fff; border-right:1px solid #ddd; border-left:1px solid #ddd; } #header_topm2 a { display:block; text-decoration:none; } #header_topm2 > li { position:relative; float:left; margin:0 0 0 -1px; background:url("http://eusafety.co.kr/_webi/img/bar_ddd.gif") no-repeat 0 17px; } #header_topm2 > li a { display:block; height:41px; line-height:41px; padding:0 19px 0 20px; font-size:12px; color:#555; } #header_topm2 > li a:hover { color:#000; font-weight:700; } #header_topm2 > li a i { position:relative; top:3px; font-size:16px; } #header_01.fixed #header_topm2 > li a { height:40px; } .sns_icon { position:relative; float:left; top:6px; margin:0 0 0 5px; } .sns_icon li { position:relative; float:left; height:40px; margin:0 2px; } .sns_icon li a { display:block; width:27px; height:28px; /*background:#b9bbba; border-radius:100%;*/ font-size:20px; text-align:center; text-decoration:none; transition:all .7s ease; -webkit-transition:all .7s ease; } .sns_icon li:hover a { transition:all .3s ease; -webkit-transition:all .3s ease; /*transform:rotate(30deg); -webkit-transform:rotate(30deg);*/ /*transform:scale(1.12,1.12);*/ } .sns_icon li a i { line-height:27px; color:#333; filter:alpha(opacity=80); opacity:.8; -webkit-opacity:.8; } .sns_icon li a img { line-height:27px; width:18px; margin:5px 0 0; opacity:.8; -webkit-opacity:.8; } /** 상단 메뉴 **/ #JS_topm { position:relative; float:right; z-index:10; } #JS_topm a { display:block; text-decoration:none; } #JS_topm .d1 { position:relative; top:-1px; float:left; background:url("http://eusafety.co.kr/_webi/img/bar_ddd.gif") 0 17px no-repeat; } #JS_topm .d1:first-child { background:none; } #JS_topm .d1 > a { height:38px; line-height:39px; padding:0 8px 0 10px; border-top:0px solid #ddd; font-size:11px; color:#333/*마우스아웃 메뉴컬러*/; letter-spacing:0.08em; transition:all .3s ease; -webkit-transition:all .3s ease; } #JS_topm .d1 > a:hover, #JS_topm .d1.on > a { border-top:0px solid #111; font-size:12px; font-weight:bold; color:#000; } #JS_topm .d1 .count { margin:0 0 0 3px; padding:3px 5px; background:#777; border-radius:4px; text-align:center; color:#fff; font-size:10px; font-weight:400; } #JS_topm .d2_step { display:none; position:absolute; top:37px; width:100px; left:50%; margin:0 0 0 -61%; padding:7px 0; border:1px solid #ddd; background:#fff; } #JS_topm .d2_step .d2 { position:relative; display:block; } #JS_topm .d2_step .d2:first-child { } #JS_topm .d2_step .d2 > a { height:22px; padding:0 15px; line-height:23px; color:#555; font-size:11px; white-space:nostep; } #JS_topm .d2_step .d2 > a:hover, #JS_topm .d2_step .d2.on > a { background:#f4f4f4; color:#111; } /* #JS_topm .d2_step .d2.arrow > a{background:url("http://eusafety.co.kr/_webi/img/arrow.png") no-repeat 90% center #ffffff} #JS_topm .d2_step .d2.arrow.on > a{background:url("http://eusafety.co.kr/_webi/img/arrow_on.png") no-repeat 90% center #8b0000} */ #JS_topm .d3_step { display:none; position:absolute; top:5px; left:90px; width:100px; padding:7px 0; border:1px solid #ddd; background:#fff; } #JS_topm .d3_step li { display:block; } #JS_topm .d3_step li:first-child { } #JS_topm .d3_step li a { height:22px; padding:0 0 0 10px; line-height:23px; color:#555; font-size:11px; } #JS_topm .d3_step li a:hover, #JS_topm .d3_step li.on a { background:#f4f4f4; color:#111; } /* 멀티쇼핑몰 */ #JS_topm ._multishop img { position:relative; top:14px; margin:0 7px 0 0; } #JS_topm ._multishop > .d2_step { z-index:10; width:150px!important; } #JS_topm ._multishop > .d2_step > li.selected { background:#f4f4f4; } #JS_topm ._multishop > .d2_step a img { top:5px!important; } #JS_topm ._multishop > .d2_step .name { display:inline-block; width:70px; } #JS_topm ._multishop > .d2_step .unit { display:inline-block; width:25px; font-size:10px; } /* 움직이는 적립금 아이콘 */ #MV_icon { position:relative; z-index:1; } #MV_icon .MV_icon_1 { position:absolute; top:32px; left:1px; width:60px; height:23px; line-height:23px; background:rgb(51,51,51); background:url("http://eusafety.co.kr/_webi/img/mileage_bg.png") no-repeat \9; border-radius:5px; font-weight:bold; font-size:10px; letter-spacing:0; text-align:center; color:#fff; filter:alpha(opacity=100); opacity:1; -webkit-opacity:1; transition:opacity .8s .5s, top .8s .5s ease; -webkit-transition:opacity .8s .5s, top .8s .5s ease; } #header_01.fixed #MV_icon .MV_icon_1 { top:5px; filter:alpha(opacity=0); opacity:0; -webkit-opacity:0; } .JS_topm1 { position:absolute; left:0; top:20px; width:220px; height:110px; } /*.JS_topm1 {width:220px; height:110px; position:relative; overflow:hidden; padding-top:10px;}*/ .JS_topm1 .img{position:relative; height:100%} .JS_topm1 .img li{position:absolute; width:100%;height:100%;left:100%} .JS_topm1 .img li:first-child{left:0} .JS_topm1 .btn{position:absolute; top:10px; width:195px; text-align:right; font-size:0; } .JS_topm1 .btn li{display:inline-block; cursor:pointer; margin-right:3px; width:15px; height:5px; background:#e1e3e2; text-indent:-9999px; border-radius:10px;} .JS_topm1 .btn li.on{background:#c24436/*오버시버튼색상*/;} .JS_topm1 .arrow{position:absolute; top:50%; margin-top:-20px; cursor:pointer} .JS_topm1 .prev{left:5px} .JS_topm1 .next{right:5px} .JS_topm1 .auto{position:absolute;bottom:10px;left:83px;cursor:pointer} .search_section { position:absolute; top:40px; /*right:450px;*/right:0px; } .search_section .search_form { position:relative; float:right; } .search_section .search_form fieldset { } .search_section .search_form #keyword { width:220px; height:38px; padding:0 15px; background:#fff; border:1px solid #282828/* 검색창테두리 색상*/; border-radius:14px 0 0 14px; vertical-align:middle; font-size:13px; color:#111; line-height:37px; font-family:'Nanum Gothic'; } .search_section .search_form #keyword:focus { width:220px; background:#eee; } .search_section .search_form input[type=image] { position:relative; top:0px; } .search_section input[type=image] { width:60px; height:40px; border:0; background:#282828/* 버튼색상 */; color:#fff; cursor:pointer; border-radius:0 14px 14px 0; } /* 인기검색어 */ .serch_keyword { dispaly:block; margin:10px 0 0 0; } .serch_keyword:after { content:""; display:block; clear:both; *zoom:1; } .serch_keyword .tit { margin:0 5px 0 0; padding:0 8px; border-radius:3px; -webkit-border-radius:3px; background:#333; color:#fff; font-size:10px; } .serch_keyword li { float:left; background:url("http://eusafety.co.kr/_webi/img/bar_ddd.gif") no-repeat 0 8px; line-height:22px; } .serch_keyword li.first { background:none; } .serch_keyword li a { display:block; color:#555; padding:0 8px; font-size:12px; } .serch_keyword li a:hover { color:#7848a3/*인기검색어폰트오버*/; text-decoration:none; font-weight:700; } /* 1265px 이상 */ @media all and (max-width:1265px){ .search_section .search_form #keyword { width:154px; } .search_section .search_form #keyword:focus { width:150px; background:#eee; } .serch_keyword li a { display:block; color:#555; padding:0 8px; font-size:11px; } } /** 추가메뉴1 **/ .categorySub.m01 { position:absolute; width:1100px; top:0px; left:210px; } .categorySub.m01 a { display:block; color:#333; font-size:12px; white-space:nowrap; } .categorySub.m01 a:hover { color:#000; text-decoration:none; } .categorySub.m01 { margin:0 0 0 5px; } /* 1depth */ .categorySub.m01 .d1 { position:relative; float:left; } .categorySub.m01 .d1:first-child { background:none; } .categorySub.m01 .d1 > a { padding:0 36px;/*대분류폭*/ font-size:16px;/*대분류폰트사이즈*/ font-weight:bold; line-height:50px; color:#fff; /*transition:all .3s ease; -webkit-transition:all .3s ease;*/ } .categorySub.m01 .d1 > a:hover, .categorySub.m01 .d1.on > a { /*background:rgba(0,0,0,.2);*/ color:#f5cf5d/*마우스오버시 컬러*/; } /* 2depth */ .categorySub.m01 .d2_wrap { display:none; position:absolute; top:45px/*서브위치*/; left:50%; width:85%; margin:0 0 0 -44%; padding:10px 0; border:1px solid #ddd; background:#fff; } .categorySub.m01 .d2_wrap .d2 { position:relative; display:block; } .categorySub.m01 .d2_wrap .d2:first-child { } .categorySub.m01 .d2_wrap .d2 > a { line-height:27px; padding:0 20px 0 15px; } .categorySub.m01 .d2_wrap .d2 > a:hover, .categorySub.m01 .d2_wrap .d2.on > a { background:#f4f4f4; color:#111; } /* 3depth */ .categorySub.m01 .d3_wrap { display:none; position:absolute; top:-3px; right:-145px; min-width:150px; padding:7px 0; border:1px solid #ddd; background:#fff; } .categorySub.m01 .d3_wrap li { display:block; } .categorySub.m01 .d3_wrap li:first-child { } .categorySub.m01 .d3_wrap li a { line-height:27px; padding:0 0 0 15px; color:#555; } .categorySub.m01 .d3_wrap li a:hover, .categorySub.m01 .d3_wrap li.on a { background:#f4f4f4; color:#111; } /* 1265px 이하 */ @media all and (max-width:1265px){ .categorySub.m01 .d1 > a { padding:0 23px;/*대분류폭*/ font-size:13px;/*대분류폰트사이즈*/ } } /** 추가메뉴3 **/ .categorySub.m03 { position:absolute; z-index:9; right:0; top:0; height:50px; border-left:1px solid #746554; background:#867563/* 배경색 */; } .categorySub.m03 .d1 { position:relative; float:left; border-right:1px solid #746554; } .categorySub.m03 .d1 > a { position:relative; z-index:3; display:block; padding:0 15px;/*대분류폭*/ background:url("http://eusafety.co.kr/_webi/img/bg_slash_b.png"); font-size:13px;/*대분류폰트사이즈*/ line-height:50px; color:#fff; text-align:center; transition:all .3s ease; -webkit-transition:all .3s ease; } .categorySub.m03 .d1 > a:hover, .categorySub.m03 .d1.on > a { background-color:#746554; font-weight:bold; color:#fff; text-decoration:none; } .categorySub.m03 .d2_wrap { display:none; position:absolute; z-index:4; top:45px; width:300px; margin:0 0 0 -200px; background:#fff; border:1px solid #333; text-align:left; } /*d_cate_wrap*/ .d_cate_wrap{width:100%; z-index:1;/*border-bottom:1px solid #ddd*/;} .d_cate_wrap:after{display:block; content:''; clear:both;} .d_cate_wrap a{display:block;} .d_cate_wrap *{box-sizing:border-box;} /*d_fullCate*/ .d_fullCate{ display:table-cell; width:200px;} .d_fullCate .toggle{position:relative;width:200px;height:50px;border-left:0px solid #ddd;border-right:0px solid #ddd; overflow:hidden; padding-top:10px; background:#282828/*배경*/; } .d_fullCate .toggle span{ position:absolute; top:0px; left:65px; color:#fff; font-size:16px; } .d_fullCate .toggle:before{display:block;content:'';width:20px;margin:6px 0 0 25px;height:1px;background:#fff;transition:0.3s;} .d_fullCate .toggle:after{display:block;content:'';width:20px;margin:6px 0 0 25px;height:1px;background:#fff;transition:0.3s;} .d_fullCate .toggle i{display:block; width:20px;margin:6px 0 0 25px;height:1px;background:#fff;transition:0.3s;} .d_fullCate.on{} .d_fullCate.on .toggle:before{transform:translateY(7px) rotate(45deg);} .d_fullCate.on .toggle:after{transform:translateY(-7px) rotate(-45deg);} .d_fullCate.on .toggle i{opacity:0} .d_fullCate .position{ display:none; position:absolute; left:0; width:100%; z-index:10; background:#fff; border:1px solid #ccc; max-height:500px; overflow:auto;} .d_fullCate .inner_area{display:table;width:100%;} .d_fullCate .inner_area .d1_wrap{display:table-cell;padding:0 10px;} .d_fullCate .inner_area .cs_wrap{display:table-cell;width:180px;background:#f5f5f5;vertical-align:top;padding:10px 5px;} .d_fullCate .inner_area .cs_wrap a{line-height:24px;padding:0 10px;} .d_fullCate .d1_wrap{font-size:0;} .d_fullCate .d1_wrap .d1{display:inline-block;position:relative;width:20%;vertical-align:top;padding:5px 5px;} .d_fullCate .d1_wrap .d1 > a{font-size:12px;font-weight:700;padding:0px 10px;border-bottom:1px solid #ddd; text-decoration:none;} .d_fullCate .d1_wrap .d1 > a:hover, .d_fullCate .d1_wrap .d1.on > a{color:red;} .d_fullCate .d2_wrap{padding:5px 0} .d_fullCate .d2_wrap > ul{margin:0;padding:0;border:0} .d_fullCate .d2_wrap .d2{position:relative;padding:0} .d_fullCate .d2_wrap .d2 > a{font-size:12px;color:#666;line-height:24px;padding:0 10px} .d_fullCate .d2_wrap .d2 > a:hover, .d_fullCate .d2_wrap .d2.on > a{background:#eee} .d_fullCate .d2_wrap .d2.be:after {display:block;content:'';position:absolute;right:5px;top:10px;width:3px;height:3px;border-radius:50%;background:#ccc} .d_fullCate .d2_wrap .d2.on.be:after {background:#555} .d_fullCate .d2_wrap .img{display:none} .d_fullCate .d3_wrap{position:absolute;left:100%;top:-6px;display:none;background:#fff;border:1px solid #ddd;width:180px;padding:5px 0} .d_fullCate .d3_wrap .d3{position:relative} .d_fullCate .d3_wrap .d3 > a{font-size:12px;color:#666;line-height:24px;padding:0 10px} .d_fullCate .d3_wrap .d3 > a:hover, .d_fullCate .d3_wrap .d3.on > a{background:#eee} .d_fullCate .d3_wrap .d3.be:after {display:block;content:'';position:absolute;right:5px;top:10px;width:3px;height:3px;border-radius:50%;background:#ccc} .d_fullCate .d2_wrap .d3.on.be:after {background:#555} .d_fullCate .d4_wrap{position:absolute;left:100%;top:-6px;display:none;background:#fff;border:1px solid #ddd;width:180px;padding:5px 0} .d_fullCate .d4_wrap .d4{} .d_fullCate .d4_wrap .d4 > a{font-size:12px;color:#666;line-height:24px;padding:0 10px} .d_fullCate .d4_wrap .d4 > a:hover, .d_fullCate .d4_wrap .d4.on > a{background:#eee} #nav { position:absolute; z-index:20; left:50%; width:200px; margin:0 0 0 -630px; } /* 1265px 이하 */ @media all and (max-width:1265px){ #nav { margin:0 0 0 -490px;; } } /*d_sideCate*/ .d_sideCate{position:relative;width:200px;height:470px/*원래세팅높이*/;background:#ebebeb; padding-top:10px;} .d_sideCate .position{position:relative; z-index:20; height:100%; padding-bottom:20px; background:#ebebeb; overflow:hidden;} .d_sideCate .position:hover{height:auto; min-height:560px/*길어지는높이*/; overflow:visible;} .d_sideCate .position:hover .add_arrow span{transform:rotate(180deg); } .d_sideCate .position .add_arrow{/*display:none;*/ position:absolute; left:0; bottom:0; width:100%; height:24px;line-height:24px; font-size:14px; color:#fff; text-align:center; background:#a1a1a1/*화살표배경색상*/; border-top:1px solid #ddd;} .d_sideCate .position .add_arrow span{display:inline-block} .d_sideCate .position .add_arrow.on {display:block} .d_sideCate .d1_wrap > li{position:relative} .d_sideCate .d1_wrap > li.be:after{display: block;content: '';position: absolute;right:10px;top:12px;width: 3px;height: 3px;border-radius: 50%;background: #ccc;} .d_sideCate .d1_wrap > li > a{display:block; height:45px; font-size:14px;/*대분류폰트사이즈*/ font-weight:bold; line-height:45px; padding:0 10px; border-bottom:1px solid #cccccc; } .d_sideCate .d1_wrap > li:hover > a{background:#a1a1a1/*오버시 1차배경*/; color:#fff; text-decoration:none;} .d_sideCate .d1_wrap > li:hover .d2_wrap{/*display:block*/} .d_sideCate .d1_wrap > li.be:hover:after{background:#666;} .d_sideCate .d2_wrap{display:none;position:absolute;left:100%;top:-1px;border:1px solid #ddd;background:#fff;width:180px} .d_sideCate .d2_wrap > ul > li{position:relative} .d_sideCate .d2_wrap > ul > li.be:after{display: block;content: '';position: absolute;right:10px;top:12px;width: 3px;height: 3px;border-radius: 50%;background: #ccc} .d_sideCate .d2_wrap > ul > li > a{display:block;height:30px;line-height:30px;padding:0 10px} .d_sideCate .d2_wrap > ul > li:hover > a{background:#eee} .d_sideCate .d2_wrap > ul > li:hover .d3_wrap{/*display:block*/} .d_sideCate .d2_wrap > ul > li.be:hover:after{background:#666} .d_sideCate .d3_wrap{display:none;position:absolute;left:100%;top:-1px;border:1px solid #ddd;background:#fff;width:180px} .d_sideCate .d3_wrap > li{position:relative} .d_sideCate .d3_wrap > li.be:after{display: block;content: '';position: absolute;right:10px;top:12px;width: 3px;height: 3px;border-radius: 50%;background: #ccc} .d_sideCate .d3_wrap > li > a{display:block;height:30px;line-height:30px;padding:0 10px} .d_sideCate .d3_wrap > li:hover > a{background:#eee} .d_sideCate .d3_wrap > li:hover .d4_wrap{/*display:block*/} .d_sideCate .d3_wrap > li.be:hover:after{background:#666} .d_sideCate .d4_wrap{display:none;position:absolute;left:100%;top:-1px;border:1px solid #ddd;background:#fff;width:180px} .d_sideCate .d4_wrap > li{position:relative} .d_sideCate .d4_wrap > li.be:after{display: block;content: '';position: absolute;right:10px;top:12px;width: 3px;height: 3px;border-radius: 50%;background: #ccc} .d_sideCate .d4_wrap > li > a{display:block;height:30px;line-height:30px;padding:0 10px} .d_sideCate .d4_wrap > li:hover > a{background:#eee} .JS_mainsc_01 {width:100%; height:500px; position:relative; overflow:hidden; display:block;} .JS_mainsc_01 .img{position:relative; height:100%;} .JS_mainsc_01 .img li{position:absolute;width:100%;height:100%;left:100%; text-align:center; } .JS_mainsc_01 .img li:first-child{left:0;} .JS_mainsc_01 .img li a{display:block; height:100%} .JS_mainsc_01 .btn {position:absolute;bottom:30px;width:100%;text-align:center;} .JS_mainsc_01 .btn li{position:relative;display:inline-block;cursor:pointer;margin:0 2px;width:60px;height:4px;background:#fff} .JS_mainsc_01 .btn li span{position:absolute;left:0;display:block;width:0;height:100%;background:#000;text-indent:-9999px} .JS_mainsc_01 .btn li.on{background:#888} .JS_mainsc_01 .arrow{position:absolute;top:50%;margin-top:-20px;width:60px;height:60px;border-radius:50px;text-indent:-9999px;opacity:0.5;transition:0.3s;cursor:pointer} .JS_mainsc_01 .prev{background:url("http://eusafety.co.kr/_webi/img/arrowL_50.gif") no-repeat center ;left:30px} .JS_mainsc_01 .next{background:url("http://eusafety.co.kr/_webi/img/arrowR_50.gif") no-repeat center ;right:30px} .JS_mainsc_01:hover .prev{opacity:1;left:20px} .JS_mainsc_01:hover .next{opacity:1;right:20px} /* 1265px 이하 */ @media all and (max-width:1265px){ .JS_mainsc_01 .img li { margin-left:0px; } } .SD_mbanner_01 { margin:0 auto 40px; padding:20px 0 20px 0;} .SD_mbanner_01:after { content:""; display:block; *zoom:1; clear:both; } .SD_mbanner_01 > span { float:left; width:25%; } .SD_mbanner_01 > span > a { display:block; } .SD_mbanner_01 > span img { width:100%; transition:all .5s ease; -webkit-transition:all .5s ease; } .SD_mbanner_01 > span img:hover { filter:alpha(opacity=50); opacity:.6; -webkit-opacity:.6; } .xans-product-3 { position:relative; float:left; margin:10px 0 30px 0px; background:#fff; width:1260px;height:350px; padding:0px; z-index:2; border:1px #e7e7e7 solid;} .xans-product-3:after {content:""; display:block; clear:both; } .xans-product-3 h2{ margin:12px auto; height:30px; width:200px; background:#fff; font-size:24px; text-align:center; /*border-bottom:1px solid #ccc;*/ color:#282828; padding-bottom:6px; } .xans-product-3 .show {width:1220px; margin:0 0 0 19px; /*heigth:200px;*/overflow:hidden;} .xans-product-3 .show ul.prdList { clear:both; zoom:1;width:18300px ; zoom:1;padding:5px 0 0 0;overflow:hidden;} .xans-product-3 .show ul:after {content:""; display:block; clear:both; } .xans-product-3 .show ul li { float:left;width:204px;height:288px;color:#555; text-align:center;} .xans-product-3 .scroll_box {width:860px;margin:0 auto;height:194px;position:relative;flowover:hidden;} .xans-product-3 .scroll_show {margin:0 auto;width:840px;padding:0 8px 0 7px;height:190px;overflow:hidden;} .xans-product-3 .scroll_show ul {margin: 0 ;width:} .xans-product-3 .scroll_show li {float:left;width:171px;height:194px;color:#555;} .xans-product-3 .scroll_show li:after {content:"";display:block;clear:both;} .xans-product-3 .toolbar1 {width:20px; position: absolute; display:inline; float:left; top:105px; left:2px; cursor:pointer; height:100px;} .xans-product-3 .toolbar2 {width:20px; position: absolute; display:inline; float:left; top:105px; left:1240px; cursor:pointer; height:100px;} .xans-product-3 ul .prdImg { display:block;width:198px;margin:0 auto;} .xans-product-3 ul .prdImg img { display:block;width:190px; padding:0px 0px; /*border-radius:80px; color:#737373;*/} .xans-product-3 ul .zoom { float:right; padding:7px 0 0; cursor:pointer; } .xans-product-3 ul .name { padding:4px 0; line-height:20px; } .xans-product-3 ul .icon { display:block; clear:both; } .xans-product-3 ul .price { display:block; clear:both; color:#bb2c1c; font-size:16px; } .xans-product-3 ul .mileage { display:block; clear:both; } .xans-product-3 ul .mileage img { vertical-align:middle; } .xans-product-3 ul .btns { overflow:hidden; zoom:1; } .xans-product-3 ul .btns img { cursor:pointer; margin:10px 4px 0 0; } .xans-product-3 ul .btns .bag { float:center; padding:17px 10px 0 0; } .xans-product-3 ul .btns .option { float:center; padding:17px 0 0; } .xans-product-3 ul .custom {text-decoration:line-through; } .xans-product-3 ul .manu { display:block; } .xans-product-3 ul .btn { display:block; text-align:center; } .xans-product-3 .prdList ul.prdColor { margin:5px 0; } .xans-product-3 .prdList ul.prdColor li { width:8px; height:8px; padding:0; margin:0 2px 2px 0; border:1px solid #969696; } .xans-product-3 .prdList ul.prdColor li span { display:block; height:100%; } /* 1265px 이하 */ @media all and (max-width:1265px){ .xans-product-3 { position:relative; float:left; margin:10px 0 10px 0px; background:#fff; width:980px;height:350px; padding:0px; z-index:2;} .xans-product-3 .show {width:940px; margin:0 0 0 19px; /*heigth:200px;*/overflow:hidden;} .xans-product-3 .toolbar2 {width:20px; position: absolute; display:inline; float:left; top:105px; left:960px; cursor:pointer; height:100px;} } /** footer **/ .footer_wrap { position:relative; z-index:10; width:100%; margin:40px 0 0; border-top:1px solid #333; background:#fff; line-height:20px; font-size:11px; } .footer_wrap:after { content:""; display:block; clear:both; } #footer h3 { margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:0.1em; } #footer .h3_line { width:435px; height:1px; margin:0 0 20px; border-bottom:1px solid #555; line-height:0px; font-size:0; } #footer h4 { margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:0.1em; } #footer .h4_line { width:195px; height:1px; margin:0 0 20px; border-bottom:1px solid #555; line-height:0px; font-size:0; } #footer ._section { min-height:180px; background:url("http://eusafety.co.kr/_webi/img/footer_section_bar.gif") no-repeat 80% 0; } #footer ._line { width:100%; height:0; line-height:0; margin:15px 0 25px; border-top:1px solid #eee; } /* 하단 메뉴 */ #footer .footer_menu { width:100%; margin:0px 0 30px 0; padding-bottom:5px; border-bottom:1px solid #eee; background:#eee;} #footer .footer_menu ul { font-size:0; line-height:0; letter-spacing:-4px; margin-left:20px;} #footer .footer_menu li { display:inline-block; *display:inline; *zoom:1; height:20px; margin:10px 0 0 0px; padding:0px 15px; background:url("http://eusafety.co.kr/_webi/img/bar_ddd.gif") 0 5px no-repeat; font-size:12px; line-height:19px; letter-spacing:0; } #footer .footer_menu li.home { padding-left:0; background:none; } #footer .footer_menu li a { color:#333; } #footer .footer_menu li a:hover { color:#000; text-decoration:none; font-weight:700; } /* 콜센터 */ #footer .call_center { float:left; width:27%; } #footer .call_center .phone { margin:0 0 15px; font-size:25px; font-weight:700; letter-spacing:0.03em; } #footer .call_center span { padding-right:10px; color:#999; } /* 은행정보 */ #footer .bank_account { float:left; width:27%; } #footer .bank_account li { letter-spacing:0.1em; } #footer .bank_account span { display:inline-block; width:60px; } #footer .bank_account .bank_list { width:160px; margin:10px 0 0; } /* 회사정보 */ #footer .footer_info { float:right; width:100%; height:60px; } #footer .footer_info li { letter-spacing:0.04em; } #footer .footer_info span { padding-right:5px; color:#aaa; } #footer .footer_return { float:left; width:40%; margin:0 0 15px 25px; } #footer .footer_return strong { padding:0 10px 0 0; } /* 아이콘 */ #footer .footer_ico { float:right; width:45%; margin:0 0 15px; font-size:0; line-height:0; } #footer .footer_ico li { display:inline-block; *display:inline; *zoom:1; margin:5px 10px 0 0; } #footer .footer_ico li img{ border-radius:10%; } /* 카피라이터 */ .footer_end { display:block; clear:both; height:45px; margin:30px 0 0; background:url("http://eusafety.co.kr/_webi/img/bg_slash_w.png") #222; font-size:11px; text-align:center; line-height:45px; color:#fff; letter-spacing:0.08em; } .footer_end .copyright { float:left; } .footer_end .warning { float:right; } /* 1265px 이하 */ @media all and (max-width:1265px){ #footer ._section { background:url("http://eusafety.co.kr/_webi/img/footer_section_bar.gif") no-repeat 90% 0; } } /* 모바일 화면보기 버튼 속성 */ .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("http://img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%; } #go { position:fixed; z-index:300; top:0; right:0; width:0; height:0; z-index:999; } #go .btn { position:fixed; right:-50px; width:40px; height:28px; padding:12px 0 0; background:rgba(0,0,0,.05); border-radius:5px; cursor:pointer; color:#000; font-size:15px; text-align:center; filter:alpha(opacity=0); opacity:0; -webkit-opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; } #go.fixed .btn { right:10px; filter:alpha(opacity=100); opacity:1; -webkit-opacity:1; } #go .btn:hover { background:rgba(0,0,0,.1); } #go .btn.top { bottom:60px; } #go .btn.down { bottom:10px; } .footer_insta { position:relative; width:940px; margin:40px auto 50px; overflow:hidden; } .footer_insta .title { display:block; height:26px; line-height:26px; margin:0 0 15px; text-align:center; } .footer_insta .title .tit { color:#333; } .footer_insta .title .tag { position:absolute; right:5px; } .footer_insta .title a { color:#666; font-size:12px; } .footer_insta .title a:hover { color:#111; text-decoration:none; } .footer_insta iframe { border:none; overflow:hidden; width:100%; height:175px } /* 하단 배너 */ .footer_bnr { display:block; margin:0 auto; padding:40px 0 0; border-top:1px solid #eee; } .footer_bnr ul { font-size:0; line-height:0; letter-spacing:-5px; } .footer_bnr ul li { display:inline-block; *display:inline; *zoom:1; width:100%/*배너 개수에 따라 퍼센트 달리할수 있음*/; text-align:center; } .footer_bnr ul li img { width:95.24%; filter:alpha(opacity=100); opacity:1.0; -webkit-opacity:1.0; transition:opacity .3s ease; -webkit-transition:opacity .3s ease; } .footer_bnr ul li img:hover { filter:alpha(opacity=70); opacity:0.7; -webkit-opacity:0.7; } .xans-layout-productrecent {position:fixed !important; z-index:50; left:0; top:50%; margin-top:-9%; width:88px; background:#fff; border-radius:5px; padding:10px 0px 0px 0; opacity:.6; border-bottom:1px solid #d5d5d5; border-top:1px solid #d5d5d5;border-right:1px solid #d5d5d5;} .xans-layout-productrecent:after { content:""; display:block; *zoom:1; clear:both; } .xans-layout-productrecent:hover { filter:alpha(opacity=100); opacity:1; -webkit-opacity:1; } .xans-layout-productrecent h2 a { width:80px; margin:0 0 10px 15px; color:#111; font-family:'나눔고딕','arial'; font-weight:700; font-size:12px; line-height:14px; text-align:center; letter-spacing:0; } .xans-layout-productrecent ul { width:76px; margin:0 auto 10px; text-align:center; padding-top:10px; } .xans-layout-productrecent li a { color:#2e2e2e; } .xans-layout-productrecent li img { max-width:56px; } .xans-layout-productrecent li span { display:block; padding:2px 0; line-height:16px; font-family:'나눔고딕','arial'; font-weight:700; font-size:11px; line-height:14px;} .xans-layout-productrecent .player { overflow:hidden; *zoom:1; } .xans-layout-productrecent .player img { float:left; } body.lightbox { overflow:hidden /*!important 스크롤 사용안함 */; } .w_lightbox { display:none !important /*!important 라이트박스 사용안함 */; position:fixed; z-index:299; left:0; top:0px; width:100%; height:100%; background:rgba(0,0,0,.5); } .r_float.right { display:none; position:fixed; z-index:300; width:170px; height:100%; right:0px; top:0; background:rgba(255,255,255,1)/* 배경색상 */; box-shadow:-2px 0px 4px rgba(0,0,0,0.1); } .r_float.right .position { position:relative; z-index:1; top:0; transition:top .1s .1s ease; -webkit-transition:top .1s .1s ease; } /* 버튼 */ .r_float.right .toggle { position:absolute; z-index:200; top:50%; left:-35px; width:35px; height:60px; /*background:url("http://eusafety.co.kr/_webi/img/arrow.gif") no-repeat 10px 15px #f5f5f5;*/ margin-top:-30px; border-radius:5px 0 0 5px; background:#282828/*버튼색상*/; box-shadow:-2px 0px 4px rgba(0,0,0,0); cursor:pointer; transition:all .1s 0.2s ease; -webkit-transition:all .1s 0.2s ease; } .r_float.right .toggle.on { background:#fff; box-shadow:-2px 0px 4px rgba(0,0,0,0.1); } /* bar 공통 */ .r_float.right .toggle .bar { display:block; position:absolute; left:10px; width:10px; height:1px; background:#fff; transition:all .1s 0.2s ease; -webkit-transition:all .1s 0.2s ease; } .r_float.right .toggle.on .bar { background:#000; } /* 1 */ .r_float.right .toggle .bar.w01 { top:26px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } .r_float.right .toggle.on .bar.w01 { transform:rotate(225deg); -webkit-transform:rotate(225deg); } /* 2 */ .r_float.right .toggle .bar.w02 { top:33px; transform:rotate(225deg); -webkit-transform:rotate(225deg); } .r_float.right .toggle.on .w02 { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }*/ /* 1265px 이하 */ @media all and (min-height:1000px){ .r_float.right .position { top:10%; } } .h4 { margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:0.1em; } .h4_line { width:147px; height:1px; margin:0 0 10px; border-bottom:1px solid #555; line-height:0px; font-size:0; } ._section1 { min-height:130px; /*background:url("http://eusafety.co.kr/_webi/img/footer_section_bar.gif") no-repeat 80% 0;*/ } ._line { width:100%; height:0; line-height:0; margin:15px 0 25px; border-top:1px solid #eee; } /* 콜센터 */ .quick_call_center { float:left; width:98%; padding-left:10px; } .quick_call_center .phone { margin:0 0 10px; font-size:22px; font-weight:700; letter-spacing:-0.05em; } .quick_call_center span { padding-right:2px; color:#999; font-size:11px;} /* 은행정보 */ .quick_bank_account { float:left; width:98%; padding-left:10px; } .quick_bank_account li { letter-spacing:0.1em; line-height:19px;} .quick_bank_account span { display:inline-block; width:160px; font-size:13px; font-weight:700;} .quick_bank_account .bank_list { width:160px; margin:10px 0 0; } .quickmenu { width:175px; margin:0 auto 30px; overflow:hidden; } .quickmenu:after { content:""; display:block; *zoom:1; clear:both; } .quickmenu ul { display:block; width:175px; letter-spacing:-4px; padding-top:150px; padding-left:10px;} .quickmenu li { display:inline-block; margin:0 5px 5px 0; font-size:11px; color:#333; text-align:center; letter-spacing:0; } .quickmenu li a { display:block; width:75px; height:26px; padding-top:10px; margin:0 0 0px 0; background:#f4f4f4; font-size:12px; border-radius:6px; -webkit-border-radius:6px; color:#333; transition:all .3s ease; -webkit-transition:all .3s ease; text-decoration:none; } .quickmenu li a i { line-height:55px; color:#777; } .quickmenu li:hover a { background:#ddd; } .quickmenu li:hover a i { color:#111; } .DB_m_slide01 {width:100%;height:250px;position:relative;overflow:hidden;margin:20px 0} .DB_m_slide01 .img{position:relative;height:100%} .DB_m_slide01 .img li{position:absolute;width:100%;height:100%;left:100%} .DB_m_slide01 .img li:first-child{left:0} .DB_m_slide01 .img li a{display:block;height:100%} .DB_m_slide01 .btn {position:absolute;bottom:30px;width:100%;text-align:center} .DB_m_slide01 .btn li{position:relative;display:inline-block;cursor:pointer;margin:0 2px;width:60px;height:4px;background:#fff} .DB_m_slide01 .btn li span{position:absolute;left:0;display:block;width:0;height:100%;background:#000;text-indent:-9999px} .DB_m_slide01 .btn li.on{background:#888} .DB_m_slide01 .arrow{position:absolute;top:50%;margin-top:-20px;width:60px;height:60px;border-radius:50px;text-indent:-9999px;opacity:0.5;transition:0.3s;cursor:pointer} .DB_m_slide01 .prev{background:url("http://eusafety.co.kr/_webi/img/arrowL_b02.gif") no-repeat center #fff;left:30px} .DB_m_slide01 .next{background:url("http://eusafety.co.kr/_webi/img/arrowR_b02.gif") no-repeat center #fff;right:30px} .DB_m_slide01:hover .prev{opacity:1;left:20px} .DB_m_slide01:hover .next{opacity:1;right:20px} /* 1265px 이하 */ @media all and (max-width:1265px){ .DB_m_slide01 .img li { margin-left:-300px; } } /* .DB_m_slide01 { position:relative; width:100%; height:250px; margin:0 0 70px; overflow:hidden; } .DB_m_slide01 .DB_img { position:relative; } .DB_m_slide01 .DB_img li { position:absolute; top:0; left:50%; width:2000px/*필수/; height:250px/*필수/; margin-left:-1000px/*이미지의 절반/; } /* 버튼 .DB_m_slide01 .DB_menu { position:absolute; z-index:3; left:5px; width:100%; bottom:5px; text-align:center; letter-spacing:-5px; font-size:0; line-height:0; } .DB_m_slide01 .DB_menu li { display:inline-block; *display:inline; *zoom:1; height:15px; margin:0 3px; padding:15px 0 0; cursor:pointer; font-size:0; } .DB_m_slide01 .DB_menu li span { display:block; width:22px; height:2px; background:#aaa; } .DB_m_slide01 .DB_menu li:hover span, .DB_m_slide01 .DB_menu li.DB_select span { width:40px; background:#333; } .DB_m_slide01 .DB_dir { position:absolute; top:0; cursor:pointer; } .DB_m_slide01 .DB_prev { left:5px; } .DB_m_slide01 .DB_next { right:5px; } */ /* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */ /*** common.css ***/ 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 { list-style:none; margin:0; padding:0; } body,code { font:0.75em Nanum Gothic,Verdana,Dotum,AppleGothic,sans-serif,xeicon !important; color:#333 !important; } body { min-width:1265px !important; height:100% !important; overflow-y:scroll !important; background:#fff !important; } /* 1265px 이하 */ @media all and (max-width:1265px){ body { min-width:1000px !important; } } input,select,textarea,button { outline:none !important; } /* 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 Verdana,Dotum,AppleGothic,sans-serif; color:#353535; background:#fff; } body { min-width:1480px; } 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:"돋움", Dotum; color:#353535; vertical-align:middle; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; } input[type=text], input[type=password] { height:18px; line-height:20px; padding:2px 4px; border:1px solid #d5d5d5; color:#353535; font-size:12px; } input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; } select { height:24px; border:1px solid #d5d5d5; } textarea { padding:5px 6px; border:1px solid #d5d5d5; 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; } button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; } hr.layout { display:none; } a { text-decoration:none; color:#000; } a:hover { text-decoration:underline; } a:active { text-decoration:none; } .objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width: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; } #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; } .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-webkit-box:border-box; box-sizing:border-box; } .fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; } /* 결제진행바 */ #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); } /* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */ @charset "utf-8"; /* Layout */ #header { background:none; } #wrap { position:relative; width:100%; margin:0; } #wrap.fixed { margin:55px 0 0; } #container { position:relative; width:100%; min-height:700px; *zoom:1; } #container:after { content:""; display:block; clear:both; } #contents_main { position:relative; width:100%; margin:0 auto;} #contents_product { position:relative; width:1260px; margin:0 auto; padding-left:1px; } #contents { position:relative; left:50%; width:1030px; margin:0 0 0 -400px; padding:0 0 30px; } /* 1265px 이하 */ @media all and (max-width:1265px){ #contents_product { width:980px; } #contents { width:760px; margin:0 0 0 -270px; } } /* Main */ #boardArea { overflow:hidden; margin:50px 0 0; border-top:1px solid #d8d8d8; } #bannerArea { margin:22px 0 0; } #bannerArea h2 { margin:0 0 16px; font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; } /* 탐색경로바 */ .path { overflow:hidden; height:30px; line-height:30px; padding:10px 0 0; *zoom:1; } .path ol { float:right; } .path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("http://img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } .path li:first-child { padding-left:0; margin-left:0; background:none; } .path li a { color:#757575; } .path li strong, .path li strong a { color:#2e2e2e; } /* 타이틀 */ .titleArea { min-height:30px; margin:10px 0 20px; border-bottom:1px solid #e8e8e8; } .titleArea h2 { display:inline-block; padding:0 0 0 12px; color:#2e2e2e; font-size:16px; *display:inline; *zoom:1; background:url("http://img.echosting.cafe24.com/skin/base/layout/ico_heading.gif") 0 50% no-repeat; } .titleArea p { display:inline-block; margin:0 0 0 6px; padding:0 0 0 10px; color:#939393; background:url("http://img.echosting.cafe24.com/skin/base/layout/ico_bar.gif") no-repeat 0 0; *display:inline; *zoom:1; } .titleArea ul { padding:5px 0; color:#939393; line-height:18px; } .titleArea ul li { padding:0 0 0 9px; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_square2.gif") no-repeat 4px 7px; } /* 게시판 메인 */ .boardMain { overflow:hidden; *zoom:1; } .boardMain td img { vertical-align:middle; margin:1px; } .boardMain .board { position:relative; margin:0 0 65px; } .boardMain .leftArea { float:left; width:50%; } .boardMain .leftArea .board { margin:0 23px 65px 0; } .boardMain .rightArea { float:right; width:50%; } .boardMain .rightArea .board { margin:0 0 65px 23px; } .boardMain .board h3 { margin:0 0 13px; height:28px; font-size:16px; color:#2e2e2e; border-bottom:2px solid #626672; } .boardMain .board .btnLink { position:absolute; top:3px; right:0; } .boardMain .board .ec-base-table.typeList td { color:#a4a4a4; } .boardMain .board .ec-base-table.typeList td.title a, .boardMain .board .ec-base-table.typeList td.title a:hover { color:#4f4f4f; } .boardMain .board .galleryList { overflow:hidden; } .boardMain .board .galleryList ul { overflow:hidden; margin:0 -10px; } .boardMain .board .galleryList li { float:left; position:relative; width:20%; padding:0 0 12px 0; word-break:break-all; } .boardMain .board .galleryList li span { display:block; margin:0 10px; font-size:11px; color:#a4a4a4; } .boardMain .board .galleryList li .imgLink, .boardMain .board .galleryList li .imgLink:hover { display:block; margin:0 10px 5px; font-size:12px; } .boardMain .board .galleryList li .imgLink img { width:100%; max-height:110px; border:1px solid #ededed; } /* 퀵뷰 모달 */ #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 */ .txtInfo { color:#707070; } .txtWarn { color:#f76560; } .txtEm { color:#008bcc; } .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; } .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; } /* grid */ .gBlank5 { display:block; margin-top:5px; } .gBlank10 { display:block; margin-top:10px; } .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; } /* 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("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0; } .ec-base-chk input:checked + .checkbox { background-position:-34px 0; } /* Form */ input,select,textarea { font-size:100%; font-family:"돋움", Dotum; color:#353535; vertical-align:middle; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; } input[type=text], input[type=password] { height:18px; line-height:20px; padding:2px 4px; border:1px solid #d5d5d5; color:#353535; font-size:12px; } input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; } select { height:24px; border:1px solid #d5d5d5; } textarea { padding:5px 6px; border:1px solid #d5d5d5; 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;} .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:#008bcc; } .ec-base-tooltip .txtWarn { color:#f65b54; } /* 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 9px; padding:1px 0 1px 20px; line-height:1.4; background:url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; } div.ec-base-help { margin:20px 0; border:1px solid #d6d4d4; line-height:18px; } div.ec-base-help > h2, div.ec-base-help > h3 { padding:9px 0 6px 10px; border-bottom:1px solid #e8e7e7; color:#101010; font-size:12px; background:#fbfbfb; } div.ec-base-help .inner { padding:0 9px 12px; } div.ec-base-help h4 { margin:22px 0 -4px; color:#404040; font-size:12px; font-weight:normal; } 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 11px; } 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; width:1260px; margin:0 auto 50px; } /* 1265px 이하 */ @media all and (max-width:1265px){ .ec-base-product { width:980px; } } /*.ec-base-product { margin:22px 0 0; }*/ .ec-base-product .title { margin:0 0 17px; } .ec-base-product .title h2 { font-weight:normal; font-family: 'Nanum Gothic'; font-size:28px; line-height:42px; color:#2e2e2e; text-align:center; } .ec-base-product .title h3 { font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; } .ec-base-product .title h4 { font-weight:normal; font-size:16px; color:#959595; 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 { width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; } .ec-base-product .prdList > li { position:relative; display:inline-block; margin:30px 0 20px; color:#757575; vertical-align:top; } .ec-base-product .prdList .chk { position:absolute; top:-10px; left:0; right:0; display:block; margin:0 0 10px; } .ec-base-product .prdList .thumbnail { position:relative; margin:10px 7px; text-align:center; } .ec-base-product .prdList .thumbnail .prdImg { position:relative; } .ec-base-product .prdList .thumbnail a img { max-width:100%; box-sizing:border-box; } .ec-base-product .prdList .thumbnail .wish { position:absolute; right:3px; bottom:4px; z-index:1; cursor:pointer; } .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 { margin:10px 0 0; border-bottom:1px solid #e8e8e8; vertical-align:middle; } .ec-base-product .prdList .thumbnail .icon:after { content:""; display:block; clear:both; } .ec-base-product .prdList .thumbnail .promotion { float:left; margin:0 0 4px; text-align:left; } .ec-base-product .prdList .thumbnail .promotion img { margin:0 4px 0 0; } .ec-base-product .prdList .thumbnail .button { float:right; margin:0 0 4px; } .ec-base-product .prdList .thumbnail .button img { margin:0 2px 0 0; cursor:pointer; } .ec-base-product .prdList .thumbnail .button .option { display:inline; position:relative; } .ec-base-product .prdList .thumbnail .button .likeButton { display:inline-block; margin:0 5px; } .ec-base-product .prdList .thumbnail .button .likeButton button { font-family:verdana; color:#9a9a9a; letter-spacing:-1px; background:none; } .ec-base-product .prdList .thumbnail .button .likeButton button img { margin:0; vertical-align:middle; } .ec-base-product .prdList .thumbnail .button .likeButton button strong {height:16px; vertical-align:middle; } .ec-base-product .prdList .thumbnail .button .likeButton.selected button { color:#353535; } .ec-base-product .prdList .description { margin:0 auto; padding:0 7px; font-size:12px; line-height:18px; text-align:center; } .ec-base-product .prdList .description .name { display:block; text-align:left; font-weight:normal; } .ec-base-product .prdList .description .name a { color:#2e2e2e; } .ec-base-product .prdList .description .mileage { display:block; } .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.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.6%; } .ec-base-product ul.grid3 > li .color { max-width:230px; } .ec-base-product ul.grid4 > li .color { max-width:190px; } .ec-base-product ul.grid5 > li .color { max-width:130px; } .ec-base-product ul.grid6 > li .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 { float:left; width:220px; text-align:left; margin:0; } .ec-base-product ul.grid2 li .description { float:left; width:247px; padding:0 20px; } .ec-base-product ul.grid2 li .description .chk { position:static; text-align:left; } /* module="product_ListItem" */ .ec-base-product .spec { margin:0; } .ec-base-product .spec li { text-align:left; } .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 .spec li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; } .ec-base-product .spec li .chips { float:left; 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 { 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; } .ec-base-paginate { margin:30px 0; text-align:center; font-size:0; line-height:0; } .ec-base-paginate ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; } .ec-base-paginate li { display:inline-block; margin:0 0 0 -1px; border:1px solid #d7d5d5; font-size:12px; color:#757575; vertical-align:top; *display:inline; *zoom:1; } .ec-base-paginate li:first-child { margin-left:0; } .ec-base-paginate img { vertical-align:top; } .ec-base-paginate li a { display:block; width:33px; padding:9px 0; font-weight:bold; color:#939393; line-height:14px; background:#fff; } .ec-base-paginate li a:hover { text-decoration:none; background:#f0f2f2; } .ec-base-paginate li a.this { padding-bottom:6px; border-bottom:3px solid #495164; color:#495164; } .ec-base-paginate a.nolink { cursor:default; } /* 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; } .ec-base-paginate.typeSub li a { width:auto; margin:0 5px 0; padding:2px; color:#353535; background:none; } .ec-base-paginate.typeSub li a.this { color:#008bcc; text-decoration:underline; border:0; } .ec-base-paginate.typeSub .first { margin-right:3px; } .ec-base-paginate.typeSub .last { margin-left:3px; } .ec-base-tab { position:relative; } .ec-base-tab .menu { margin:0 0 20px; border:1px solid #cbcdce; border-bottom-color:#202020; border-left:0; background:#f2f2f2; 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 { float:left; border-left:1px solid #cbcdce; background:#f2f2f2; } .ec-base-tab .menu li a { display:block; min-width:187px; margin:0 0 0 -1px; padding:12px 5px 11px; border-right:1px solid #cbcdce; color:#707070; text-decoration:none; outline:0; text-align:center; background:#f2f2f2; } .ec-base-tab .menu li:first-child a { margin-left:0; } .ec-base-tab .menu li.selected a { position:relative; top:-1px; left:-2px; margin:0 0 -1px; border:1px solid #202020; border-bottom:0; color:#fff; font-weight:bold; background:#4a5164; } .ec-base-tab .menu li.selected:first-child a { left:-1px; } .ec-base-tab > .right { position:absolute; top:8px; right:10px; line-height:24px; color:#909090; } /* typeLight */ .ec-base-tab.typeLight .menu li.selected a { margin:0 0 -2px; border-bottom:1px solid #fff; color:#404040; background:#fff; } /* 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 #292929; border-bottom:0; background:#4a5164; } .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: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:last-child { border-right:1px solid #cbcdce; } .ec-base-tab.gFlex .menu li a { width:100%; min-width:0; border-right: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 #a1a1a1; border-bottom:0; background:#a1a1a1; } .ec-base-tab.gFlex .menu li.selected a { left:0; margin:0 0 -1px -1px; background:#a1a1a1; border:0; position: initial;} /* button */ [class^='btnNormal'], a[class^='btnNormal'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #d1d1d1; border-radius:2px; font-family:"굴림",Gulim; 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:#fff; } [class^='btnSubmit'], a[class^='btnSubmit'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid transparent; border-radius:2px; font-family:"굴림",Gulim; 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:#4a5164; } [class^='btnEm'], a[class^='btnEm'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid transparent; border-radius:2px; font-family:"굴림",Gulim; 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:#84868b; } [class^='btnBasic'], a[class^='btnBasic'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #d1d1d1; border-radius:2px; font-family:"굴림",Gulim; 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 { background-color:#f3f3f3; } [class^='btnSubmit']:not(.disabled):hover { background-color:#43495a; } [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; } /* size */ [class^='btn'].sizeS { padding:6px 8px; } [class^='btn'].sizeM { padding:10px 16px; } [class^='btn'].sizeL { padding:14px 16px; min-width:80px; font-weight:bold; } /* 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; } /* icon button */ a.btnLink { color:#222; } a.btnLink:hover { text-decoration:none; -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-family:"굴림",Gulim; font-size:12px; font-weight:bold; text-decoration:none; color:#fff; background-color:#4a5164; } .btnLogin:hover { background-color:#43495a; } .btnAgree, a.btnAgree { display:inline-block; box-sizing:border-box; width:80px; height:70px; line-height:70px; border:1px solid #d1d1d1; border-radius:2px; text-align:center; font-family:"굴림",Gulim; font-size:12px; font-weight:bold; color:#222; 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-family:"굴림",Gulim; font-size:12px; outline:0; text-decoration:none; color:#222; 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 #84868b; color:#fff; background:#84868b; } /* 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 #d7d5d5; } .ec-base-button.typeBG { padding:10px 20px; border:1px solid #d7d5d5; background:#fbfafa; } /* 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; } /* base */ .ec-base-box { padding:20px; margin-left:auto; margin-right:auto; border:5px solid #e8e8e8; color:#404040; } .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:#d7d5d5; } .ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:20px; 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.typeThinBg > .agree { padding:20px; border:1px solid #e6e6e6; 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; text-align:center; vertical-align:middle; } .ec-base-box.typeMember .information > .title { vertical-align:middle; } .ec-base-box.typeMember .information > .thumbnail img { max-width:70px; } .ec-base-box.typeMember .information .description { display:table-cell; padding:0 10px; width:auto; line-height:1.5em; border-left:1px solid #e8e8e8; vertical-align:middle; } .ec-base-box.typeMember.gMessage { border-width:1px; border-color:#d7d5d5; } .ec-base-box .message { display:block; padding:10px 0 10px 35px; border-bottom:1px solid #e8e7e7; background:#fbfbfb url("//img.echosting.cafe24.com/skin/base/common/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; border:1px solid #d7d5d5; } .ec-base-box.typeProduct .information { padding-left:0; } .ec-base-table table { position:relative; margin:10px 0 0; border:1px solid #d7d5d5; border-top:0; color:#fff; line-height:1.5; } .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:#d7d5d5; } .ec-base-table thead th { padding:11px 0 10px; border-left:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; font-weight:normal; background:#fbfafa; } .ec-base-table tbody th { padding:11px 0 10px 18px; border:1px solid #dfdfdf; border-bottom-width:0; color:#353535; text-align:left; font-weight:normal; background-color:#fbfafa; } .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 { padding:11px 10px 10px; border-top:1px solid #dfdfdf; color:#353535; 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; background:#fbfafa; } /* horizontal */ /* typeWrite */ .ec-base-table.typeWrite td { padding:8px 10px 7px; } .ec-base-table.typeWrite img { max-width:100% !important; height:auto !important; } /* vertical */ /* typeList */ .ec-base-table.typeList table { border-top:1px solid #d7d5d5; } .ec-base-table.typeList table:before { display:none; } .ec-base-table.typeList td { padding:8px 10px 7px; } .ec-base-table.typeList tfoot td { padding:15px 10px 17px; background:#fbfafa; } .ec-base-table .message { border:1px solid #d7d5d5; padding:50px 0; text-align:center; color:#757575; font-weight:bold; } .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 #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; text-align:center; background:#fbfafa; } .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 #d7d5d5; 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; background:none; } .ec-base-table.typeClear th { font-weight:bold; } /* border */ .ec-base-table.gBorder td { border-left:1px solid #dfdfdf; } .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:#eee; } /* 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:8px 10px 7px; border-top:1px solid #dfdfdf; } .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; } /********************************************************************************************************************************************************************** 기본제공된 CSS를 추가 / 수정한 파일입니다. 해당 소스를 수정하시면 디자인이 깨질수 있습니다. **********************************************************************************************************************************************************************/ /*** main.css ( 마이쇼핑 ) ***/ #myshopMain { margin:30px 0 0; border-top:1px solid #333; border-bottom:1px solid #333; } #myshopMain .shopMain, #myshopMain .shopMain.order, #myshopMain .shopMain.profile, #myshopMain .shopMain.wishlist, #myshopMain .shopMain.mileage, #myshopMain .shopMain.deposits, #myshopMain .shopMain.consult, #myshopMain .shopMain.coupon, #myshopMain .shopMain.board, #myshopMain .shopMain.address, #myshopMain .shopMain.inquiry, #myshopMain .shopMain.likeIt { background:url("http://eusafety.co.kr/_webi/img/arrowR_35.gif") no-repeat 98% 50% !important; } /*#myshopMain { margin:30px 0 0; border-top:3px solid #333; border-bottom:3px solid #333; } #myshopMain .shopMain { height:90px; padding:27px 0 0 30px; border-bottom:1px solid #eee; } #myshopMain .shopMain h3 { padding:0 0 5px; font-size:12px; color:#333; font-weight:normal; } #myshopMain .shopMain h3 strong { font-size:18px; padding:0 8px 0 0; } #myshopMain .shopMain h3 a:hover { text-decoration:none; } #myshopMain .shopMain p a { font-size:12px; line-height:18px; color:#8f8f8f; }*/ /*** optionPreview.css ( 옵션미리보기창 ) ***/ .xans-product-optionpreview { display:inline; } .xans-product-optionpreview .prdOption { position:absolute; left:50% !important; top:20px !important; z-index:20; width:240px !important; margin:0 0 0 -119px !important; } .xans-product-optionpreview .prdOption .inner { padding:20px 15px 15px !important; border:1px solid #333 !important; color:#333 !important; background:#fff; } .xans-product-optionpreview .prdOption li { display:block; padding:10px 0 3px 3px !important; border-top:none !important; border-bottom:1px solid #eee !important; text-align:left !important; line-height:17px !important; font-size:11px !important; letter-spacing:-0.05em; } .xans-product-optionpreview .prdOption li:first-child { border:0; } .xans-product-optionpreview .prdOption .close { position:absolute; right:14px; top:14px; } .xans-product-optionpreview .prdOption .ico { position:absolute; left:50%; top:-5px; width:9px; height:6px; margin:0 0 0 -7px !important; } /** 체크박스 **/ .-chk input[type="checkbox"] { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow: hidden; clip:rect(0,0,0,0); border:0; } /* 실제 체크박스는 화면에서 숨김 */ .-chk input[type="checkbox"] + label { position: relative; display:inline-block; cursor:pointer; -webkit-user-select:none; } .-chk input[type="checkbox"] + label:before { content: ''; display:inline-block; width:25px;/* 체크박스의 너비를 지정 */ height:25px;/* 체크박스의 높이를 지정 */ line-height:25px;/* 세로정렬을 위해 높이값과 일치 */ text-align:center; vertical-align:middle; background:#fff; border:1px solid #555; box-shadow:0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); } /* 가짜 체크박스 */ .-chk input[type="checkbox"] + label:active:before, .-chk input[type="checkbox"]:checked + label:active:before { box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } /* 체크박스를 체크했을때 */ .-chk input[type="checkbox"]:checked + label:before { content:'\2714';/* 체크표시 유니코드 사용 */ color:#111; background:#f4f4f4; border:1px solid #555; box-shadow:0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); } .-chk label:after { content:'오늘하루 열지않음'; position:absolute; left:-116px; top:0; width:105px; height:25px; padding:0 0 0 10px; visibility:hidden; background:#ddd; border:1px solid #ccc; border-right:0; font-size:12px; color:#111; line-height:25px; } .-chk input[type="checkbox"]:checked + label:after { visibility:visible; } .-chk input[type="checkbox"]:hover + label:after { visibility:visible; } /** 좋아요 버튼 **/ .-likeButton { position:absolute; z-index:10; bottom:10px; right:-8px; max-width:74px; height:16px; padding:8px 0 0; background:url("http://eusafety.co.kr/_webi/img/like_shadow.gif") no-repeat right top; visibility:hidden; filter:alpha(opacity=0); opacity:0; -webkit-opacity:0; } .item:hover .-likeButton { bottom:15px; visibility:visible; filter: filter:alpha(opacity=100); opacity:1.0; -webkit-opacity:1.0; } .-likeButton:hover { color:#f71f4d; } .-likeButton button { padding:2px 5px; background:#fff; border:1px solid #f4f4f4; color:inherit; box-shadow:-1px 1px 2px rgba(0,0,0,0.2); line-height:16px; } .-likeButton button .likePrdIcon { width:14px!important; margin:1px 3px 0 0; } .-likeButton button .likePrdCount { font-weight:400; color:inherit; font-size:11px; } .-likeButton.selected { bottom:20px!important; right:-8px!important; visibility:visible; filter:alpha(opacity=100); opacity:1.0; -webkit-opacity:1.0; } .-likeButton.selected button { background:#f7345e; border:1px solid #d63138; color:#fff; } .-likeButton.selected button:before { content:'LIKE'; position:relative; display:inline-block; margin:0 4px 0 0; font-size:10px; } /** 팝업텍스트 **/ .-pTxt { display:block; position:absolute; z-index:1; top:/*각디자인에서 설정 */; left:50px; padding:5px 10px; background:#333; border-radius:3px; font-size:11px; color:#fff; letter-spacing:0; white-space:nowrap; filter:alpha(opacity=0); opacity:0; -webkit-opacity:0; transition:all .3s ease; -webkit-transition:all .3s ease; } li:hover .-pTxt { top:/*각디자인에서 설정 */; filter:alpha(opacity=100); opacity:1; -webkit-opacity:1; } /** 추가수정 **/ /* 구매 스텝 */ .orderStep { display:block; } /* 1265px 이하 */ @media all and (max-width:1265px){ .orderStep img { width:100%; } } /* 게시판 타이틀 이미지 */ .xans-board-title p.imgArea img { width:100%; } /** font **/ @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v17/PN_3Rfi-oW3hYwmKDpxS7F_D-djY.woff) format('woff'); } @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 700; src: local('NanumGothic Bold'), local('NanumGothic-Bold'), url(https://fonts.gstatic.com/s/nanumgothic/v17/PN_oRfi-oW3hYwmKDpxS7F_LQv3LyVsg.woff) format('woff'); } @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 800; src: local('NanumGothic ExtraBold'), local('NanumGothic-ExtraBold'), url(https://fonts.gstatic.com/s/nanumgothic/v17/PN_oRfi-oW3hYwmKDpxS7F_LXv7LyVsg.woff) format('woff'); } /************************************************************************************************* 웹아이디자인 추가 CSS *************************************************************************************************/ body#main { background:#fff; } .-frame { position:relative; width:1260px; margin:0 auto; *zoom:1; } .-frame:after { content:""; display:block; clear:both; *zoom:1; } /* 1265px 이하 */ @media all and (max-width:1265px){ .-frame { width:980px; } } .displaynone { display:none; } .divClear { position:relative; display:block; clear:both; } .divClear:after { content:""; display:block; clear:both; *zoom:1; } .-mov { -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .-mov:hover { -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .d_clear { clear:both; } /** 가격할인 - 해당 할인 부분을 사용을 안할 경우 display:block 를 dispaly:none 로 변경해주세요. **/ .discount_rate { position:absolute; z-index:5; display:block; top:-7px; right:-3px; width:40px; height:40px; background:rgba(20,20,20,.9)/* 아이콘 배경색상 */; background:#333 \9/* ie9이하 배경색상 */; box-shadow:-1px 1px 2px rgba(0,0,0,0.2); line-height:40px; text-align:center; vertical-align:middle; font-family:'arial'; font-size:14px; color:#fff; font-weight:bold; letter-spacing:-0.02em; cursor:pointer; filter:alpha(opacity=0); opacity:.0; -webkit-opacity:.0; } .discount_rate span { margin-left:0px; font-size:11px; font-weight:normal; } .item:hover .discount_rate { top:-3px; filter:alpha(opacity=100); opacity:1.0; -webkit-opacity:1.0; } .discount_rate1 { position:absolute; z-index:5; display:block; top:0px; right:0px; width:45px; height:45px; -webkit-border-radius:100%; border-radius:100%; background:#333/* ie9이하 배경색상 */; background:rgba(0,0,0,.8)/* 아이콘 배경색상 */; font-family:'arial'; font-size:15px; font-weight:bold; color:#fff; cursor:pointer; line-height:45px; text-align:center; } .discount_rate_detail_wrap { position:relative; height:0; } /* 세일 */ .discount_rate_sale { position:absolute; z-index:5; display:block; top:15px; left:15px; width:60px; height:60px; -webkit-border-radius:5px; border-radius:5px; background:#333/* ie9이하 배경색상 */; background:rgba(0,0,0,.8)/* 아이콘 배경색상 */; font-family:'arial'; font-size:20px; font-weight:bold; color:#fff; cursor:pointer; line-height:60px; text-align:center; } .discount_rate_sale span { font-size:12px; } /* 상품상세 */ .discount_rate_detail { position:absolute; z-index:5; display:block; top:-6px; right:20px; width:37px; height:42px; padding:10px 0 0; line-height:12px; text-align:center; background:url("http://eusafety.co.kr/_wg/img/detail_sale_ico.png") no-repeat; font-family:'tahoma'; font-size:12px; font-weight:700; color:#fff; } .discount_rate_detail span { margin-left:2px; font-size:10px; font-weight:400; } .rate0 { display:none; } /** 멀티팝업 공통 **/ .multipop { position:relative; background:#fff; } .multipop .img { position:relative; overflow:hidden; } .multipop .img ul { position:relative; } .multipop .img ul li { position:absolute; width:100%; height:100%; } .multipop .arrow.prev { left:-5px; background:url("http://eusafety.co.kr/_webi/img/arrowL_35.gif") no-repeat 50% 50% rgba(255,255,255,.5); filter:alpha(opacity=0); opacity:0; -webkit-opacity:0; } .multipop .img:hover .arrow.prev { left:0; filter:alpha(opacity=100); opacity:1; -webkit-opacity:1; } .multipop .arrow.next { right:-5px; background:url("http://eusafety.co.kr/_webi/img/arrowR_35.gif") no-repeat 50% 50% rgba(255,255,255,.5); filter:alpha(opacity=0); opacity:0; -webkit-opacity:0; } .multipop .img:hover .arrow.DB_next { right:0; filter:alpha(opacity=100); opacity:1; -webkit-opacity:1; } .multipop .arrow { position:absolute; top:50%; width:45px; height:70px; margin-top:-35px; cursor:pointer; transition:all .3s ease; -webkit-transition:all .3s ease; } /* 버튼 */ .multipop .menu { position:relative; } .multipop .menu ul li { float:left; margin:0 -1px -1px 0; border:1px solid #ddd; background:#eee; cursor:pointer; color:#999; font-size:11px; line-height:17px; text-align:center; transition:all .5s ease; -webkit-transition:all .5s ease; } .multipop .menu ul li:hover { background:#fafafa; } .multipop .menu ul li.select { background:#fff; color:#333; font-weight:bold; } .multipop .menu ul li p { position:relative; } .multipop .menu .box { position:absolute; top:0; left:0; margin:0; padding:0; border:1px solid #888/*박스컬러*/; } /* 팝업하단 */ .popup_footer { position:fixed; bottom:0; width:100% !important; } .popup_footer > div { width:100% !important; height:30px !important; padding:0 !important; overflow:hidden !important; background:#555 !important; font-family:'Nanum Gothic' !important; } .popup_footer > div > span { position:relative; display:inline-block; float:left; padding:0 0 0 15px; text-indent:20px; font-size:11px; color:#eee; line-height:30px; } .popup_footer > div > span > input { position:absolute; left:10px; top:6px; line-height:30px; width:18px; height:18px; } .popup_footer > div > span + span { display:inline-block; float:right; padding:0 15px 0 0; background:#333 !important; font-size:11px; color:#fff; line-height:30px; } .popup_footer > div > span + span:hover { background:#000 !important; color:#fff; } /** 멀티팝업 base_1 **/ .multipop.base_1 { width:302px; height:469px; padding:8px; border:1px solid #ccc; } .multipop.base_1 .img { width:299px; height:380px; margin-bottom:5px; border:1px solid #ddd; } .multipop.base_1 .menu ul li { width:99px; height:80px; } .multipop.base_1 .menu ul li p { top:30%; } .multipop.base_1 .menu .box { width:99px; height:80px; } /** 멀티팝업 base_2 **/ .multipop.base_2 { width:298px; height:462px; } .multipop.base_2 .img { width:298px; height:380px; } .multipop.base_2 .menu ul li { width:98px; height:80px; } .multipop.base_2 .menu ul li p { top:30%; } .multipop.base_2 .menu .DB_box { display:none/*박스사용X*/; width:98px; height:80px; } /** 멀티팝업 base_3 **/ .multipop.base_3 { width:302px; height:550px; padding:8px; border:1px solid #ccc; } .multipop.base_3 .img { width:299px; height:380px; margin-bottom:5px; border:1px solid #ddd; } .multipop.base_3 .menu ul li { width:99px; height:80px; } .multipop.base_3 .menu ul li p { top:30%; } .multipop.base_3 .menu .box { width:99px; height:80px; } /** 멀티팝업 base_4 **/ .multipop.base_4 { width:298px; height:543px; } .multipop.base_4 .img { width:298px; height:380px; } .multipop.base_4 .menu ul li { width:98px; height:80px; } .multipop.base_4 .menu ul li p { top:30%; } .multipop.base_4 .menu .box { display:none/*박스사용X*/; width:98px; height:80px; } /** 멀티팝업 vertical_1 **/ .multipop.vertical_1 { width:302px; height:511px; padding:8px; border:1px solid #ccc; } .multipop.vertical_1 .img { width:299px; height:380px; margin-bottom:5px; border:1px solid #ddd; } .multipop.vertical_1 .menu ul li { display:block; width:299px; height:40px; } .multipop.vertical_1 .menu ul li p { top:30%; } .multipop.vertical_1 .menu .box { width:299px; height:40px; } /** 멀티팝업 vertical_2 **/ .multipop.vertical_2 { width:298px; height:504px; } .multipop.vertical_2 .img { width:298px; height:380px; } .multipop.vertical_2 .menu ul li { display:block; width:296px; height:40px; } .multipop.vertical_2 .menu ul li p { top:30%; } .multipop.vertical_2 .menu .box { display:none/*박스사용X*/; } /** 멀티팝업 extend_1 **/ .multipop.extend_1 { width:539px; height:301px; padding:8px; border:1px solid #ccc; } .multipop.extend_1 .img { float:left; width:420px; height:299px; margin:0 5px 0 0; border:1px solid #ddd; } .multipop.extend_1 .menu { position:relative; float:left; width:112px; } .multipop.extend_1 .menu ul li { display:block; width:110px; height:74px; } .multipop.extend_1 .menu ul li p { top:27%; } .multipop.extend_1 .menu .box { width:110px; height:74px; } /** 멀티팝업 extend_2 **/ .multipop.extend_2 { width:532px; height:297px; } .multipop.extend_2 .img { float:left; width:420px; height:297px; } .multipop.extend_2 .img ul li {width:420px !important; height:300px !important; } .multipop.extend_2 .menu { position:relative; float:left; width:112px; } .multipop.extend_2 .menu ul li { display:block; width:110px; height:73px; } .multipop.extend_2 .menu ul li p { top:27%; } .multipop.extend_2 .menu .box { display:none/*박스사용X*/; } /** 멀티팝업 number **/ .multipop.number { width:302px; height:415px; padding:8px; border:1px solid #ccc; } .multipop.number .img { width:299px; height:380px; margin-bottom:5px; border:1px solid #ddd; } /* 버튼 */ .multipop.number .menu ul li { width:25px; height:25px; line-height:24px; margin:0 5px 0 0; border-radius:10%; } .multipop.number .menu .box { display:none; } /* 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 #757575; background:#fff; } .ec-base-layer .header { padding:7px 35px 7px 19px; color:#fff; background:#495164; } .ec-base-layer .header > h1, .ec-base-layer .header > h3 { font-size:14px; line-height:1.5; } .ec-base-layer .content { padding:20px; font-size:12px; } .ec-base-layer div.ec-base-help { margin-top:0; } .ec-base-layer .ec-base-button { padding:9px; border-top:1px solid #d7d5d5; text-align:center; background:#fbfafa; } .ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 20px; 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%; } /* 검색&상품분류 */ .xans-product-searchdata .searchField { padding:22px 0; margin:0 0 -1px; background:url("//img.echosting.cafe24.com/skin/base/product/bg_search_field.gif") repeat-x 0 100%; } .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:262px; padding:0 36px 0 0; border:1px solid #565960; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; } .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:#1c1c1c; } .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; padding:0 10px; width:100%; height:32px; line-height:32px; outline:0; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .xans-product-searchdata .searchField .btnSearch { position:absolute; top:0; right:0; outline:0; } .xans-product-searchdata .searchField .keywordArea { max-width:600px; margin:3px auto 0; text-align:center; } .xans-product-searchdata .searchField .keywordArea .heading { 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 .searchField .keywordArea .list { display:inline; } .xans-product-searchdata .searchField .keywordArea .list li { display:inline; margin:0 0 0 4px; } .xans-product-searchdata .searchField .keywordArea .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; color:#525252; font-size:11px; } .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 { margin:30px 0 0; overflow:hidden; border:1px solid #d7d5d5; text-align:right; line-height:38px; } .xans-product-searchdata .searchResult .record { float:left; padding:0 0 0 8px; color:#008bcc; } .xans-product-searchdata .searchResult .xans-product-searchorderby { display:inline; margin:0 4px 0 0; } .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:50px 0; text-align:center; line-height:1.8em; } .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; } /* 상세검색 사이드바(#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; }