@charset "UTF-8";

/* ----------------------- reset ----------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input {border:none;}
input:focus, select:focus {outline: none;}
input,select,textarea,button {font-size:100%; vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none;}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; }
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:#fff}
body,th,td,input,select,textarea,button,h2,h3,h4,h5,pre,textarea  {font-size:1em;line-height:1.5em;font-family:"Noto Sans KR",sans-serif; color:#444}
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

h1,h2,h3,h4,h5,h6 {font-weight: 400;}
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
/* ol {list-style: auto;}
ol li {list-style: inside auto;} */
/* ----------------------- background ----------------------- */
.sprite {background-image: url("/common/img/sprites.png"); background-repeat:no-repeat; background-size:300px; text-indent: -999999em; }
.ico_p {display: inline-block; width : 30px; height:30px; background-position:-146px -32px; vertical-align: middle;}
.sprite.close {width:34px; height:34px; background-position:-180px -32px;  }
.sprite.next {width:11px; display: inline-block; height:10px; background-position:-11px -29px; transform:rotate(-90deg); background-size:135px; vertical-align: middle; overflow: hidden;}
/* ----------------------- layout ----------------------- */
/*
애플 앱 사용하는 경우 클레스 추가시켜 뒷배경을 깔아준다
자바스크립트 : common/js/common.js
*/
body.bg_gray.NOTCH {background:linear-gradient(#fff,  #fff 30px,  #f0f0f0 30px, #f0f0f0);}
header {padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); position:inherit; transition:0.3s;}
body.NOTCH.show:before {content:""; position:fixed; top: -30px; right: 0; left: 0; width:100%; height:30px;  display: block; z-index: 20000; background:#fff;}

.wrap {width:100%; height:100%; padding-left:10px; padding-right:10px; box-sizing: border-box; padding-bottom:15px; max-width:1000px; margin:0 auto;}
.wrap.pd0 {padding-left:0; padding-right:0;}
.wrap.pd10 {padding-top:10px; }
.wrap.pd15 {padding-top: 15px;}
.wrap.gray {background:#F1F1F1;}
.sec {margin-bottom: 15px; background: #fff; }
.sec:last-of-type {margin-bottom: 0;}
.sec.pd10 {padding:10px; }
.sec.pd20 {padding:20px; }
.flexLayout {display: -webkit-flex; display: -ms-flex; display: flex;}
.flexLayout.between {justify-content: space-between;}
.flexLayout.center {justify-content: center; align-items: center;}
.flexLayout.Vcenter { align-items: center;}
/* ----------------------- typogrphy ----------------------- */
.tit {font-size: 1.3em; padding:5px}
.tit.sm {font-size: 1em; margin-bottom: 5px;}
.main_tit { font-size: 1.3em; letter-spacing: -0.1em; padding:10px 0 0 15px; font-weight: normal;}
.main_tit.layer {margin-bottom: 15px; padding-bottom: 15px; border-bottom:2px solid #4fac86}
/* ----------------------- align ----------------------- */
.a_lf {text-align: left;}
.a_ct {text-align: center;}
.a_rt {text-align: right;}

/* ----------------------- form ----------------------- */
.input, .select {height:50px; -webkit-border-radius:2px; border-radius:2px; width:100%; padding-left:15px; padding-right:10px; box-sizing: border-box; color:#444; border:1px solid #e4e4e4; background: #fff;}
.input::placeholder {color:#B4B4B4;}
.input:focus, .select:focus {border:1px solid #888;}
.input.w50 {width:50%;}
.input.short {width:40%;}
.input.phone {width:33%;}
.input_disabled {width:auto;}
.textarea {width:100%; padding:10px; box-sizing: border-box;}
input[type="checkbox"] {border-radius: 0; color:#666; }
select {border-radius: 0; color:#666;}
/* ----------------------- button ----------------------- */
.btn {height:50px; line-height: 50px; text-align: center; width:100%; text-transform:capitalize; -webkit-border-radius:3px; border-radius: 3px; display: block; box-sizing: border-box; background:#e4e4e4; font-size: 1.15em;}
.btn.mg2 {margin: 0 2px;}
.btn.gray {background: #f0f0f0; border:1px solid #e4e4e4;}
.btn.default {background: #4FAC86; color:#fff;}
.btn.primary {background:#2CBD9F; color:#fff;}
.btn.outline {background:#fff; border:1px solid #2CBD9F; color:#0A8F6F;}
.btn.outline.gray {border:1px solid #ccc; color:#666;}
.btn.outline.red {background: #fff; border:1px solid #ff7777; color:#e22c2c;}
.btn.dib {display: inline-block; width:auto; padding:8px 13px; margin-bottom: 5px;; }
.btn.small {font-size: 13px; display: inline-block; width:auto; line-height: auto; height:auto; padding:6px 10px;}
.btn.round {-webkit-border-radius:50px; border-radius:50px; }
.btn.auto { height:auto; line-height: 1em;}
.btn.w50 {width:50%;}
.btn.red {background: #ff7777; color:#fff;}

.btn.outline.active {background:#2CBD9F; color:#fff; border:none;}
#gotop, #nofooterGoTop, #goBack { width:50px; height:50px; bottom:90px; box-shadow: 4px 4px 15px rgba(0,0,0,0.15); z-index: 2000; display: inline-block; position:fixed; right:15px; background:  #fff;  border-radius:10px; opacity: 0; transition:0.3s;}
#gotop button, #nofooterGoTop button, #goBack button {text-indent: -999999em; width:30px; height:36px; background:url("/common/img/sprites.png") -156px 4px; background-size: 300px; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#goBack {transform:rotate(-90deg); left:15px; right:auto;}

#gotop.on, #nofooterGoTop.on, #goBack {opacity: 1;}


/* 아작스 로딩바 */
#wait {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.3); display: none; overflow: hidden; z-index: 20001;}
.loading {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

/* ----------------------- tab ----------------------- */
.tab_wrap {display: -webkit-flex; display: -ms-flex; display: flex; width:100%; border:1px solid #e4e4e4; margin: 20px 0;}
.tab_wrap li {width:100%; }
.tab_wrap .tab {border-right:1px solid #e4e4e4; height:50px; line-height: 50px; font-size: 1.15em; }
.tab_wrap .tab a {height:50px; line-height: 50px; display: inline-block; width:100%; text-align: center; text-transform:capitalize;}
.tab_wrap .tab.on a {background: #4FAC86; color:#fff; }


/* 책갈피 tab 스타일 */
.tab.basic {}
.tab.basic ul {display: -webkit-flex; display: -ms-flex; display: flex; transform:translateY(1px); justify-content: center; align-items: center;}
.tab.basic li {margin: 0 3px;}
.tab.basic a {padding:0 15px; height:40px; display: inline-block; line-height: 40px; background: #fff; border:1px solid #ccc; border-bottom: 0; font-size: 0.9em; position: relative;}
.tab.basic a.on:after { content:""; position: absolute; top:0; left:0; width:100%; height:100%; border-top:5px solid #4FAC86; }

/* ----------------------- tab - content ----------------------- */
.content_wrap {}
.content {display: none;}
.content.on {display: block;}

/* ----------------------- link menu ----------------------- */
.menu_link li a {position: relative;line-height: 50px; border-bottom:1px solid #E6E6E6; display: block; padding:0 15px; font-size: 1.05em; }
.menu_link li a:after {content:""; position: absolute; top:50%; transform:translateY(-50%); right:15px; background-image: url("/common/img/sprites.png");background-size:300px; background-repeat:no-repeat; width:12px; height:26px; background-position:-77px -33px;}
.menu_link li:first-child a {border-top:1px solid #E6E6E6;}
.menu_link li.new a {position: relative;}
.menu_link .new { margin-left: 5px; background: #444; border-radius: 50%; width:20px; height:20px; color:#fff; display: inline-block; font-size: 0.8em; line-height: 18px; text-align: center; }
.menu_link .new.green {background: #5BB54F;}
.menu_link .new.blue {background: #5797e1;}
.menu_link .new.red { background: #F54242;}
/* ----------------------- fold menu -----------------------*/
.menu_fold > li {margin-bottom: 5px;background:#fff;}
.menu_fold > li > a {height:50px; line-height: 50px; display: block;  padding:0 20px; box-sizing: border-box;  -webkit-border-radius:3px; border-radius: 3px; position:relative; font-size: 1.1em; }
.menu_fold > li a:after {content:""; position: absolute; top:50%; transform:translateY(-50%); right:20px; background-image: url("/common/img/sprites.png"); background-repeat:no-repeat; background-size:300px; }
.menu_fold .link > a:after {width:19px; height:19px; background-position:-32px -22px;  background-size:200px;}
.menu_fold .parent > a:after {width:17px; height:17px; background-position:1px -25px;  background-size:200px;}
.menu_fold .parent.on > a:after {height:2px; background-position:-15px  -25px;}
.menu_fold .parent.on > a {color:#4FAC86; font-weight: bold;  border:1px solid #4FAC86;  }
.menu_fold .child {display: none;}
.menu_fold .on .child {display: block; background: #fbfbfb;}
.menu_fold .child a:not(.btn) { line-height: 40px; display: block; padding:0 15px; box-sizing: border-box;}

.menu_fold .parent.chevron > a:after {background-position: -16px -42px;}
.menu_fold .parent.chevron.on > a:after {height:13px; background-position: 1px  -44px;}

.menu_fold div.child {padding:20px; box-sizing: border-box;}
.menu_fold div.child .link {background: #f6f6f6; height:50px; line-height: 50px; padding:0 10px; }
.menu_fold div.child.list {padding:15px; }
.menu_fold div.child .list_item {background: #F1F1F1; border-bottom:1px solid #fff; padding:15px; }
.menu_fold div.child .list_item > span {font-size: 0.8em; color:#888;}
.menu_fold div.child .total {margin-top: 10px;}
/* ----------------------- table ----------------------- */
.tbl {width:100%; border-top:1px solid #888;}
.tbl tr {border-bottom:1px solid #dbdbdb;}
.tbl th,.tbl td {height:50px;}
.tbl td {padding:0 15px; background: #fff;}
.tbl.view th {background: #f6f6f6;}

.tbl.list thead th {background: #f6f6f6;}
.tbl.list td {border-right:1px solid #dbdbdb;}
.tbl.list td:last-child {border-right:none;}
.tbl.list tfoot th {background: #f4f4f4; padding:0 15px;}
.tbl td.pd0 {padding: 0;}
.bd_rt {border-right:1px solid #dbdbdb;}
.bd_rt_none {border-right:none;}

.tableAll th, .tableAll td {border:1px solid #ccc; font-size: 0.9em; padding: 5px;}
.cell_red {background: #ffdada;}
.cell_blue {background: #e2edfd;}
.cell_green {background: #ddf8e6;}

ul.tbl {border-top:2px solid #555; border-bottom:1px solid #ccc; }
ul.tbl li {overflow: hidden; border-bottom: 1px solid #e4e4e4; display: -webkit-flex; display: -ms-flex; display: flex; background: linear-gradient(90deg, #f9f9f9, #f9f9f9 30%, #fff 30% , #fff)}
ul.tbl li span {display: inline-block; float:left; height:100%;  box-sizing: border-box; font-size: 0.9em;}
ul.tbl .th { padding:10px; text-align: center; }
ul.tbl .td {box-sizing: border-box; padding:5px 10px;}
ul.tbl.ratio3_7 .th {width:30%;}
ul.tbl.ratio3_7 .td {width:70%;}
/* ----------------------- header ----------------------- */
header.HOME .header.dep1 li.HOME:after,
header.WELFARE .header.dep1 li.WELFARE:after,
header.SHOP .header.dep1 li.SHOP:after,
header.HNH .header.dep1 li.HNH:after,
header.EXHIBIT .header.dep1 li.EXHIBIT:after,
header.DEAL .header.dep1 li.DEAL:after,
header.BEST .header.dep1 li.BEST:after {content:""; position: absolute; bottom:0; left:0; right:0; border-bottom:4px solid #238870;}

header.HOME .header.dep1 li.HOME a,
header.WELFARE .header.dep1 li.WELFARE a,
header.SHOP .header.dep1 li.SHOP a,
header.HNH .header.dep1 li.HNH a,
header.EXHIBIT .header.dep1 li.EXHIBIT a,
header.DEAL .header.dep1 li.DEAL a,
header.BEST .header.dep1 li.BEST a {color: #238870;}

.header {position: relative; height:50px; line-height: 50px;}
#com_logo {position: absolute; left:60px; top:50%; transform:translateY(-50%); vertical-align: middle;}
#com_logo img {max-height:30px;}
.header.dep1 {height:40px; line-height: 40px; border-bottom:1px solid #e4e4e4; background: #fff;}
.header.dep1 ul { display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-around; text-align: center; }
.header.dep1 li { position: relative; width:100%;}
.header.dep1 li a {font-size: 0.9em; display: block; box-sizing: border-box;}
.header.dep2 { background: #fff;}
.header.dep2.dep0 {border-bottom:1px solid #e4e4e4;}
.header .side {width:31px; height:34px; background-position:0 0; position: absolute; left:15px; top:50%; transform:translateY(-50%);}
.header .search {width:31px; height:34px; background-position:-64px 0; position: absolute; right:15px; top:50%; transform:translateY(-50%);}

/* 장바구니 아이콘 스타일 */
.header div.goCart {width:31px; height:34px;  position: absolute; right:60px; top:50%; transform:translateY(-50%);}
.header a.goCart {width:31px; height:34px; background-position:-31px 0; display: inline-block;}
.header .cartNum {position: absolute; top: -5px; left: 50%; transform:translateX(-50%); font-size: 10px; color: red; font-weight: bold;}

.dep3 {background: #4FAC86; text-align: center; }
#page_tit {color:#fff; font-weight: normal; line-height: 50px; font-size: 1.1em; font-weight: 500;}
.header .back {width:21px; height:30px; background-position:-87px -34px; position: absolute; left:15px; top:50%; transform:translateY(-50%);}
.header .home {width:31px; height:30px;  background-position:-109px -34px; position: absolute; right:15px; top:50%; transform:translateY(-50%); display: inline-block;}

header.white .dep3 {background: #fff; border-top:1px solid #e4e4e4; }
header.white #page_tit {color:#666;}
header.white .back {left:18px; background-position: -110px 0;}

#search_bg {display: none; background: rgba(0,0,0,0.6); position: fixed; width:100%; height:100%; z-index: 2003; transition: 0.3s; top:0; }
#search_bg .sprite.close {position: absolute; left:50%; transform:translateX(-50%); top:350px;}
#search_wrap {position:absolute; top:120px; height:50px; width:100%; padding:0 20px;box-sizing: border-box; display: none; z-index: 20003;}
#search_wrap .input {border:none; }
#search_wrap button.search {width:31px; height:34px;  background-position:-64px 0; position: absolute; right:30px; top:50%; transform:translateY(-50%);}
/* ----------------------- product ----------------------- */
.prod_wrap {display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap; justify-content: space-between; margin:0 10px;}
.prod {width:49%; box-sizing: border-box; background: #fff; margin-top: 10px;}
/* .prod:nth-child(2n-1) {margin-right: 10px;} */
.prod_img img {width:100%;}
.prod_desc {padding:5px 10px 10px 10px; }
.prod_name { font-size: 0.8em; letter-spacing: -0.1em; line-height: 1.3em; display: block; max-width: 100%; height: 40px; line-height: 20px; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; font-size: 14px; font-weight: normal;}
.sele_price {font-weight: bold; float:right;}
.com_price {margin-top: 5px; font-size: 0.8em; line-height: 1em;color:#999; text-decoration: line-through; text-align: right;}
.prod_wrap.round .prod {border-radius: 10px; overflow:hidden;}
.prod_wrap.border .prod {border:1px solid #e4e4e4; width:48%;}
.prod_wrap.block .prod {width:99%;}

/* ----------------------- footer ----------------------- */
.footer {background:#fff; margin-top: 10px;text-align: center; padding:15px;}
.footer a {color:#666; font-size:13px;}
.corp_area { max-width:600px; overflow: hidden; display: inline-block;}
.corp_area.gray a {color:#999;}
.corp_area a {float:left; display: inline-block; line-height: 45px; color:#666; }
.corp_area a:after {content:"|"; padding:0 6px; color:#ccc; text-align: center; }
.corp_area a:last-child:after {content:""; padding:0; }
.footer_content {padding:10px; text-align: center; display: none; font-size: 0.8em; line-height: 1.5em; color:#908d8d;}
.bizInfoSlide {font-size: 0.8em; letter-spacing: -0.08em; color:#444; position: relative;}
.bizInfoSlide:after {content:""; position: absolute; background-image: url('/common/img/sprites.png'); background-size: 200px; background-repeat: no-repeat; width: 12px; height: 17px; background-position:-18px -43px; right:-20px; transition:0.2s;}
.bizInfoSlide.show:after {transform: rotate(180deg);}
.footer .lbl {background:#f0f0f0; color:#222; padding:10px 20px;}

/* ----------------------- label ----------------------- */
.lbl {font-size: 0.8em; padding:5px 9px; border-radius: 50px; }
.lbl.gray {background: #878787; color:#fff;}
.lbl.white {background: #fff; color:#444; border:1px solid #ccc; box-sizing: border-box;}
.lbl.red {background: #EC2A00; color:#fff;}
.lbl.orange {background: #F96C29; color:#fff;}
.lbl.green {background: #2CBD9F; color:#fff;}
.lbl.blue {background: #0091EA; color:#fff;}
.lbl.square {border-radius: 2px; padding:2px 5px; margin-left:5px;}

.lbl.red.outline {border:1px solid #EC2A00; color:#EC2A00; background: #fff;}
.lbl.blue.outline {border:1px solid #0091EA; color:#0091EA; background: #fff;}

/* ----------------------- 공지사항 팝업 스타일 ----------------------- */
.noticePopup {position: absolute; left:0; top:0; z-index: 10000; visibility: hidden; background:#fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.1);}
.popupLink {display: block;}
.popupLink img {width:100%; height:100%; }
.notice-title-area {justify-content: space-between; display: -webkit-flex; display: -ms-flex; display: flex; padding:5px 10px; border-bottom: 1px solid #ccc;}
/* .notice-content-area {padding: 0 10px;} */
.notice-title-area button {font-size: 30px; line-height: 25px;}
.noticePopup-title {font-size: 0.9em; width:90%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.popup-control {padding-left:10px;}
.notice-popup-closed {position: absolute; bottom:5px; right:10px;}

/* ----------------------- basic ----------------------- */
.between_msg {padding:20px 0; text-align: center; display: block;letter-spacing: -0.1em;}
.img_click_msg {letter-spacing: -0.1em; display: block; text-align: center;}
.transparent_bg {background: rgba(0,0,0,0.6); position: fixed; width:100%; height:100%; z-index: 2003; transition: 0.3s; top:0;}

.bdt_ccc {border-top: 1px solid #ccc;}
.transparent_bg.rowZindex {z-index: 2001;}
.img_full {width:100%; }
.bd_bt_none {border-bottom:none;}
.hr {border:none; border-bottom:1px solid #e4e4e4;}

.mg_tp_10 {margin-top: 10px;}
.mg_tp_15 {margin-top: 15px;}
.mg_tp_20 {margin-top: 20px;}

.mg_bt_5 {margin-bottom: 5px;}
.mg_bt_10 {margin-bottom: 10px;}
.mg_bt_15 {margin-bottom: 15px;}
.mg_bt_20 {margin-bottom: 20px;}

.mg_sd_10 {margin: 0 10px;}

.pd_tp_15 {padding-top: 15px; }
.pd_tp_20 {padding-top: 20px; }
.pd_bt_15 {padding-bottom: 15px;}
.pd_bt_10 {padding-bottom: 10px;}

.pd10 {padding: 10px;}
.pd20 {padding: 20px;}
.textover {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:80%; display: inline-block; line-height: 50px; vertical-align: middle;}
.under {text-decoration: underline;}

.lh_sm {line-height: 1.1em;}
.font_lg {font-size: 1.4em;}
.font_md {font-size: 1.2em;}
.font_nm {font-size: 0.95em;}
.font_sm {font-size: 0.8em;}
.font_xsm {font-size: 0.7em;}
.f_gray {color:#888;}
.f_red {color:#ff5656;}
.f_blue {color:#2165ff}
.f_green {color:#22b54f}
.f_default {color:#4FAC86}
.f_bold {font-weight: bold;}
.bg_gray {background: #f1f1f1;}
.bg_white {background: #fff;}
.bg_green {background: #4FAC86;}
.bold {font-weight: bold;}
.desc_wrap {border:1px solid #e4e4e4; padding:20px; box-sizing: border-box;}
.desc_wrap.green {border:1px solid #4FAC86; }
.desc_list { line-height: 1.5em;}

/* 설명 list style square */
.desc_wrap.list {padding:10px;}
.desc_list.list {padding-left:15px; }
.desc_list.list li { position:relative; letter-spacing: -0.05em; font-size: 14px; line-height: 1.3em; margin-bottom:10px;}
.desc_list.list li:last-child {margin-bottom: 0;}
.desc_list.list li:before {content:""; position:absolute; top:8px; left:-10px; width:5px; height:5px; background: #666;}


.desc_tit {position: relative; padding-left:30px;}
.block {display: block;}
.desc_tit:before { content:""; display: inline-block; width:25px; height:25px; background-image: url("/common/img/sprites.png"); background-repeat:no-repeat; background-size:300px; background-position:-130px 2px; position: absolute; left:0;}