@charset "utf-8";
@font-face {
	font-family: 'icon';
	src: url('/css/fonts/webhostinghub-glyphs.eot');
	src: url('/css/fonts/webhostinghub-glyphs.eot?#iefix') format('embedded-opentype'),
		 url('/css/fonts/webhostinghub-glyphs.woff') format('woff'),
		 url('/css/fonts/webhostinghub-glyphs.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face{ /*Aller-LightItalic : 할인률 숫자 */ 
		font-family: 'Aller-LightItalic';
		src: url('/css/fonts/Aller-LightItalic.eot');
		src: url('/css/fonts/Aller-LightItalic.eot?#iefix') format('embedded-opentype'),
			  url('/css/fonts/Aller-LightItalic.woff') format('woff'),
			  url('/css/fonts/Aller-LightItalic.ttf') format('truetype');
		font-weight:normal; font-style:italic;
}
@font-face{
 font-family:'Godo';
 font-style:normal;
 font-weight:400;
 src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'),
     url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}
html { -webkit-text-size-adjust:none; } 
body{ }
div,span,object,iframe,p,
blockquote,pre,abbr,cite,code,del,dfn,img,h1, h2, h3, h4, h5, h6,html,body,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video{ margin:0; padding:0; outline:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
li{ list-style-type:none; }
img,fieldset,iframe{ border:0; vertical-align:top;  }
img,fieldset { border:none;  }
input, textarea, select {  margin:0; padding:0;  }
.skip { font-size:0; width:0; height:0; line-height:0; clear:both; border:none }
.both{ clear:both; }
table{ width:100%; margin:0px auto; border-collapse:collapse; border-spacing:0; vertical-align:top }
button,input[type=submit]{ border:none; border-radius:none; outline:none; margin:0; vertical-align:top; cursor:pointer;  }
label{ cursor:pointer; }
label:hover{ color:#184ee8; }
label input[type=checkbox]{ vertical-align:middle; }
textarea { width:94%; font:normal 11px/16px Dotum; color:#777; min-height:43px; border:solid 1px #bbb; margin:5px auto 5px; background:#fff; padding:5px 1%; }
textarea.width_100 { width:98%; height:140px; background:#fafafa; }
textarea.width_100.small { height:50px; background:#fff; }
a{ text-decoration:none; color:#333; }
body,tr,td { font:normal 12px/18px Dotum; }

/* 템플릿 스킨 리스트 */
.centerWrap.skin{ width:1150px; text-align:center; margin:0 auto; font:normal 14px/18px Malgun Gothic; }
.tpl_skin_title{ z-index:1; content:""; width:100%; height:90px; position:fixed; top:0; left:0;  background:#384664;  letter-spacing:-1px; font:normal 14px/18px Malgun Gothic; }
.tpl_skin_title h1{ text-align:center; padding:18px 0 8px 0; font:normal 28px/30px Malgun Gothic; letter-spacing:-1px;  color:#fff; }
.tpl_skin_title p{  text-align:center; color:#ffe826;  }
.tpl_skin_title2{ position:relative; margin:0 auto; text-align:center; margin-bottom:-70px; }
.tpl_skin_title2 h1{ text-align:center; padding:18px 0 8px 0; font:normal 28px/30px Malgun Gothic; letter-spacing:-1px;  color:#222; }
.tpl_skin_title2 p{  text-align:center; color:#666;  }

.tpl_skin{ position:relative; overflow:hidden; padding:150px 0 20px 0 }
.tpl_skin:after{ content:""; display:block; clear:both }  
.tpl_skin li{ position:relative; float:left; border:solid 1px #d0d0d0;  margin:0 0 50px 2%; width:350px; height:370px; overflow:hidden; box-shadow:2px 2px 3px rgba(0,0,0,.15); }
.tpl_skin li a{ display:block; width:100%; height:100%;  text-align:left; }
.tpl_skin li a span{ position:absolute; bottom:0; width:100%;  display:block; padding:10px 0 10px 0; text-indent:20px; background:#fff;  border-top:solid 1px #bbb;  color:#; letter-spacing:-1px; } 
.tpl_skin li a b{ color:#000; font-size:26px;  }
.tpl_skin li a img{ width:100%; /* padding-top:40px;  */}
.tpl_skin li:hover{ border-color:#384664; }
.tpl_skin li:hover a span{ background:#384664; color:#fff }
.tpl_skin li:hover a span:after{ content:"GO ▶"; position:absolute; bottom:10px; right:15px; letter-spacing:0; font:normal 20px/20px Arial; }
.tpl_skin li:hover a b{ color:#ffe826; }

/* 상단 해더 스몰 배너 */
.header .middle_wrap .small_banner{ position:absolute; top:9px; right:-10px; overflow:hidden; font:normal 12px/16px Malgun Gothic; width:200px; height:60px; overflow:hidden; }
.sm_img_1{ position:relative;  width:200px; height:60px; overflow:hidden; background:#fff; }
.sm_img_1 dt{ width:35%; float:left; padding-right:5%; }
.sm_img_1 dd{ width:60%; float:right; }
.sm_img_1 dt img{ width:100%; padding:3px 0 0 0; }
.sm_img_1 b{ display:block; padding:5px 0 0 0 }
.sm_img_1 span{ display:block; color:#ed3135; font-weight:bold; padding:5px 0 0 0 }
.sm_img_1 span s{ color:#666; font:normal 11px Arial; padding:0 4px 0 0 }

/* 상단 메뉴 바 이미지 설정 */
.total_menu{ background:#fff !important; z-index:999999; }
.total_menu dl dd{ background:#fff !important;  }
.total_menu dl a.title_img img{ display:none }
.total_menu dl dd a.title_img{ display:none }
.top_menu dl dd a.title{ position:absolute; left:10px; top:25px; width:190px; text-align:center; font:400 16px/20px 'Godo'; color:#222; border:none; word-break: keep-all;}
.top_menu dl dd a.title_img{ position:absolute; left:20px; top:70px;  } /* 카테고리 명이 길어질 경우 이미지와 겹치는 현상을 막기 위해서 이미지를 띄움 2018-05-16백승철 */
.top_menu dl dd a.title_img img{  width:160px; }

/* popup 팝업창 */
.popup_wrap{ position:relative; overflow:hidden; padding:20px 10px; }
.popup_wrap:after{ content:""; display:block; clear:both; }  
.popup_wrap > h1{ background:#4a5164; color:#fff; font:bold 18px/24px Malgun Gothic; padding:6px 10px 9px 10px; margin:-20px -10px 0 -10px; }
.popup_wrap > p{ padding:10px 0; font:normal 11px/16px Dotum; letter-spacing:-0.8px; }
.btn_close{ display:inline-block;   position:absolute; top:5px; right:10px; }
.btn_close a:after{ content:" "; font:normal 20px 'icon',Arial; color:#fff; vertical-align:middle; }
.btn_close a{ display:inline-block; color:#fff; font:normal 12px/30px Dotum; vertical-align:bottom;  }

/* 대량구매 단가표 */
table.t_basic{ width:96%; font:normal 12px/16px Malgun Gothic; vertical-align:middle; color:#676767; margin:10px 0 }
table.t_basic caption{ text-align:left; padding:0 0 7px 2px; color:#111; /* color:#1a7be0; */ font:bold 18px/22px Malgun Gothic; letter-spacing:-1.5px;  }
table.t_basic.gray{ width:100%; margin:0 auto; border-bottom:solid 1px #ddd; margin-bottom:10px; }
table.t_basic.gray caption{ font:normal 12px/16px Dotum; letter-spacing:0; color:#333; padding-left:20px; }
table.t_basic.gray caption:before{  content:"";  color:#888; display:inline-block; font:normal 11px/10px 'icon',Malgun Gothic; padding-right:3px; }
table.t_basic caption .right{ float:right; text-align:right }
table.t_basic caption label{ display:inline-block; padding:0 0 0 1%; font:normal 14px/16px Malgun Gothic; vertical-align:middle; color:#2126ea; cursor:pointer; }
table.t_basic caption span input[type=checkbox]{ margin:0; border-color:#2126ea; }
table.t_basic caption span.right{ float:right; font:normal 11px/18px Dotum; margin-right:4px;  }

table.t_basic th,table.t_basic td{ border:solid 1px #ccc; padding:7px 1px 3px 1px; font:normal 13px/16px Malgun Gothic; word-break:break-all; }
table.t_basic.gray th,table.t_basic.gray td{font:normal 11px/16px Dotum; border:solid 1px #ccc; border-width:1px 1px 0 1px; word-break:break-all;  }
table.t_basic.blue{ width:100%; border-top:solid 1px #515476; }
table.t_basic.blue th{ background:#e8eaf9; padding:4px 1px 5px 1px; text-align:center }
table.t_basic.blue td{ font:normal 11px/16px Dotum; background:#fff; }
table.t_basic.blue td.noData{ height:50px; }
table.t_basic.gray td{ font-size:12px; }
table.t_basic th{ background:#f0f0f0; color:#333; font:normal 12px/16px Malgun Gothic;  }
table.t_basic tbody td{ text-align:center }
table.t_basic.blue.fran td{ padding:15px 1px 15px 10px; }
table.t_basic.blue.fran th b{ color:#333; font-size:16px; }
table.t_basic.blue.fran td b{ color:#333; font-size:14px; }

table.t_basic.order{ width:100%; font:normal 14px/16px Dotum; vertical-align:top; margin:30px 0 10px 0; }
table.t_basic.order.width_50.first{ width:49%; float:left; margin:0 1% 0 0;  }
table.t_basic.order.width_50{ width:50%; }
table.t_basic.order td{ border:solid 1px #c7c9cd; border-width:1px 1px 1px 0; padding:7px 0 5px 10px; text-align:left }
table.t_basic.order th{ width:22%; border:solid 1px #c7c9cd; border-width:1px 0 1px 1px; background:#fbf9fa; color:#333; padding:5px 0 5px 2%; text-align:left; font-weight:bold }
table.t_basic.order.th th{ width:15%; }
table.t_basic.order th:before{ display:inline-block; width:10px; content:"*"; font:bold 15px/10px sans-serif,Arial; vertical-align:middle; color:#d21a00; }
table.t_basic.order th.none:before{ content:""; }
table.t_basic.order tbody td{  background:#fbf9fa; color:#111 }
table.t_basic.order tbody th.border-top{ border-width:0 0 1px 1px; padding:0 0 30px 10px; }
table.t_basic.order tbody th.border-bottom{ border-bottom:none; padding:5px 0 0 10px; }
table.t_basic.order tbody td.border-top{ border-width:0 1px 1px 0; padding:5px 0 5px 10px;  }
table.t_basic.order tbody td.border-middle{ border-width:0 1px 0 0; padding:0 0 0 10px; }
table.t_basic.order tbody td.border-bottom{ border-bottom:none; padding:10px 0 0 10px;  }
table.t_basic.order tbody td input[type=text], 
table.t_basic.order tbody td input[type=password]
{ font:normal 12px/16px Dotum; width:40px; padding:3px 0 3px 3px; color:#111; border:1px solid #bbb; background:#fff; margin:0 0 5px 0; }
table.t_basic.order tbody td input[type=text].width_wide,
table.t_basic.order tbody td input[type=password].width_wide{ width:360px; }
table.t_basic.order tbody td input[type=text].width_small,
table.t_basic.order tbody td input[type=password].width_small{ width:160px; }
table.t_basic.order tbody td > span{ font:normal 11px/14px Dotum; color:#777; letter-spacing:-0.5px; }
table.t_basic.order tbody td input[type=radio]{ vertical-align:middle; }
table.t_basic.order tbody td label{ display:inline-block; padding:2px 10px 2px 0; margin:0 8px 0 0; }
table.t_basic.order.width_90{ width:78%; margin:30px auto 10px; }
table.t_basic.order tbody td input[type=text]:hover, table.t_basic.order tbody td input[type=text]:focus,
table.t_basic.order tbody td input[type=password]:hover,table.t_basic.order tbody td input[type=password]:focus
{ border-color:#000; background:#ffffef; }

.right_contents_wrap img{ /* max-width:100%; */ }
.btn_padding.right{ padding:20px 0 30px 0  }

/* 주문서 작성 페이지 */
table.t_basic caption label{ color:#ee3135; }

/* 구매후기 페이지 */
table.m_review_write_wrap tbody tr td > br{ display:none; }

/* 구매문의 */
.m_qna_table{ width:100%; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; }
table.m_qna_table tbody tr td{ border-left:1px solid #d7d7d7;  }
table.m_qna_table tbody tr td:first-child{ border-left:none; }
table.m_qna_table tbody tr td > input{ margin-left:5px; font-size:13px; line-height:20px; padding-left:5px; }
td.m_qna_input2 input{ width:50%; }
td.m_qna_input1, td.m_qna_input2{  }

/* 마이페이지 공통 */
.mypage_menu_wrap{ position:relative; overflow:hidden }
.mypage_menu_wrap:after{ content:""; display:block; clear:both; }
.mypage_menu_wrap ul{ position:relative; width:90%; margin:0 auto; border:solid 1px #ddd; border-width:1px 1px 0 1px; margin-top:60px; border-top-color:#0091ec; }
.mypage_menu_wrap ul:before{ position:absolute; top:-50px; left:15px; content:"My Page"; font:normal 30px/34px Malgun Gothic; color:#0091ec; }
.mypage_menu_wrap ul li{}
.mypage_menu_wrap ul li a{ display:block; width:86%; padding:8px 4% 8px 10%; font:normal 13px/18px Malgun Gothic; letter-spacing:-1px; color:#333; border-bottom:solid 1px #ddd; }
.mypage_menu_wrap ul li a:hover{ /* background:#f4f4f4;  */ color:#0091ec; background:#f9f9f9; font-weight:bold;  }
.mypage_menu_wrap ul li.m_1 a:before,.mypage_menu_wrap ul li.m_2 a:before{ content:""; font:normal 12px 'icon',arial; padding-right:6px; color:#999; }
.mypage_menu_wrap ul li.m_1 a:hover:before,.mypage_menu_wrap ul li.m_2 a:hover:before{ color:#0091ec }
.mypage_menu_wrap ul li.m_1 a:nth-child(1):before{ content:""; }
.mypage_menu_wrap ul li.m_1 a:nth-child(2):before{ content:""; }
.mypage_menu_wrap ul li.m_1 a:nth-child(3):before{ content:""; }
.mypage_menu_wrap ul li.m_1 a:nth-child(4):before{ content:""; }
.mypage_menu_wrap ul li.m_1 a:nth-child(5):before{ content:""; }
.mypage_menu_wrap ul li.m_1 a:nth-child(6):before{ content:""; }
.mypage_menu_wrap ul li.m_2 a:nth-child(1):before{ content:"⊷"; }
.mypage_menu_wrap.fran ul:before{ position:absolute; top:-39px; left:0px; content:"가맹점 창업안내"; font:normal 24px/28px Malgun Gothic; color:#0091ec; letter-spacing:-2px; }
.mypage_menu_wrap.fran ul{ margin-top:53px; }
.mypage_menu_wrap.fran ul li.active a{ background:#0091ec; color:#fff; }
.mypage_menu_wrap.fran.fixed{ width:180px; position:fixed; top:0; left:50%; margin:0 0 0 -525px;  }

/* 상품 리스트 베스트 상품 */
h2.h2.best{  padding:5px 0 7px 0.5%; margin:20px 0 0 0 }
.basic_goods.best{  }
.basic_goods.best:after{ content:"Best"; position:absolute; bottom:15px; left:15px; color:#ed3135; font:normal 32px 'Aller-LightItalic',verdana; letter-spacing:-1px;}

/* 좌측 가격대별 메뉴 */
.price_wrap_1{ clear:both; display:block; margin:0 auto; padding:7px 0; }
.left_price_none .price_wrap_1{ display:none; }
.price_wrap_1  h2{ font:bold 12px/24px Dotum; color:#111;  margin:7px 0 0 0; background:#f9f9f9; vertical-align:bottom;  text-align:center; margin:0;  border:solid 1px #ccc; border-width:1px 1px 0 1px }
.price_wrap_1  h2{ border-radius:2px 2px 0 0; -webkit-border-radius:2px 2px 0 0; -moz-border-radius:2px 2px 0 0; -o-border-radius:2px 2px 0 0; }

.price_wrap_1 > ol{ position:relative; overflow:hidden; border:solid 1px #ccc; background:#fff;   }
.price_wrap_1 > ol:after{ content:""; display:block; clear:both; }
.price_wrap_1 > ol li{ border-top:solid 1px #ccc;  }
.price_wrap_1 > ol li:first-child{  border-top:solid 0px #ccc; }
.price_wrap_1 > ol li a{ position:relative;  display:block; padding:2px 0 1px 0; text-align:center; }
.price_wrap_1 > ol li.active a{ background:#f8f8f8; color:#f20000; font-weight:bold; }
.price_wrap_1 > ol li.active a:after{ position:absolute; top:5px; right:3px; content:""; font:normal 9px 'icon',Arail; color:#444; }

.price_wrap_1.mobile_1{ padding:0; border-top-width:0; }
.price_wrap_1.mobile_1 h2{display:none;  }
.price_wrap_1.mobile_1 > ol{ border-top-width:0;  background:#f2f2f2; }
.price_wrap_1.mobile_1 > ol li{ float:left; width:50%; }
.price_wrap_1.mobile_1 > ol li:first-child{ border-top:solid 1px #ccc; }
.price_wrap_1.mobile_1 > ol li:nth-child(odd){ border-left:solid 0px #ccc;}
.price_wrap_1.mobile_1 > ol li a{ display:block; padding:5px 0 3px 0; text-align:center; font-size:14px; letter-spacing:-1px; color:#666; }
.price_wrap_1.mobile_1 > ol li a:before{ position:absolute; top:0; left:0; content:""; background:#ddd; height:100%; width:1px; }
.price_wrap_1.mobile_1 > ol li.active{background:#fff; }
.price_wrap_1.mobile_1 > ol li.active a{  color:#f20000;  }
.price_wrap_1.mobile_1 > ol li.active a:after{ position:absolute; top:7px; right:5px; content:""; }

/* 페이지 버튼 하단 패딩 값 */
.paging_btn span{ margin:2px !important; }