/* BASIC css start */
@font-face {
    font-family: 'GmarketSansTTFLight';
    src: url('//cdn.jsdelivr.net/gh/wizfile/font/GmarketSansTTFLight.eot');
    src:url('//cdn.jsdelivr.net/gh/wizfile/font/GmarketSansTTFLight.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'Campton-Bold-DEMO';
    src:url('//skin.makeshop.co.kr/skin/brunch/webfont/Campton-Bold-DEMO.ttf.woff') format('woff'),
        url('//skin.makeshop.co.kr/skin/brunch/webfont/Campton-Bold-DEMO.ttf.svg') format('svg'),
        url('//skin.makeshop.co.kr/skin/brunch/webfont/Campton-Bold-DEMO.ttf.eot'),
        url('//skin.makeshop.co.kr/skin/brunch/webfont/Campton-Bold-DEMO.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}


@font-face {
	font-family: "Campton Light DEMO";
	src: url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.eot"); /* IE9 Compat Modes */
	src: url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.otf") format("opentype"), /* Open Type Font */
		url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.svg") format("svg"), /* Legacy iOS */
		url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.ttf") format("truetype"), /* Safari, Android, iOS */
		url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.woff") format("woff"), /* Modern Browsers */
		url("//skin.makeshop.co.kr/skin/brunch/webfont/campton-light-demo.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}


/* header */
#header { width:100%; background:#fff;  } 
#header .headerTnb { margin:0 auto; position:relative; width:1280px; height:100px; *zoom:1 } 
#header .headerTnb:after { display:block; clear:both; content:'' } 
#header .headerTnb .tnbLeft { float:left } 
#header .headerTnb .tnbLeft li { padding-right:9px; float:left } 
#header .headerTnb .tnbLeft li a { display:block; height:45px; color:#8d6f60; line-height:45px; font-size:13px; font-family: 'Lato', 'Noto Sans KR', sans-serif; font-weight: bold; } 
#header .headerTnb .tnbLeft li a img { margin-right:7px; vertical-align: sub; } 
#header .headerTnb .tnbLeft li.noticeLine { padding-left:23px } 
#header .headerTnb .tnbLeft li.noticeLine p { padding-left:21px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/ico_volume.gif) 0 17px no-repeat } 
#header .headerTnb .tnbLeft li.noticeLine p a { font-size:11px; color:#7a7a7a; line-height:49px; line-height:53px \0/IE8+9 } 
#header .headerTnb .tnbRight { float:right } 
#header .headerTnb .tnbRight li { padding-left:10px; float:left } 
#header .headerTnb .tnbRight li.joinicon { position:relative; } 
#header .headerTnb .tnbRight li a { display:block; height:45px; color:#8d6f60; line-height:45px; font-size:12px; font-family:'Lato', 'Noto Sans KR', sans-serif,돋움; font-weight: bold; } 
#header .headerTnb .tnbRight li a span { color: var(--main-color); } 
#header .headerTop { margin:0 auto; position:relative; width:1280px; *zoom:1 } 
#header .headerTop:after { display:block; clear:both; content:'' } 
#header .headerTop .tlogo { padding:50px 210px; text-align:center } 
.headerBottom {position:sticky; top:0; width:100%; border-bottom: 1px solid #8d6f60; z-index:100; background:#fff; } 
.headerBottom .headerGnb { position: relative; width:1280px; margin: 0 auto; } 
.headerBottom .headerGnb .gnbInner { position:relative; width:1027px } 
.headerBottom .headerGnb .gnbInner ul { *zoom:1 } 
.headerBottom .headerGnb .gnbInner ul:after { display:block; clear:both; content:'' } 
.headerBottom .headerGnb .gnbInner ul li { margin:0 27px; position:relative; float:left } 
.headerBottom .headerGnb .gnbInner ul li:first-of-type { margin-left:0 } 
.headerBottom .headerGnb .gnbInner ul li a { display:block; height:41px; font-size:14px; color:#202020; line-height:41px; white-space:nowrap; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent; font-family: 'NanumBarunGothic', sans-serif; } 
.headerBottom .headerGnb .gnbInner ul li a:before { content:""; position:absolute; left:50%; right:50%; bottom:0; height:3px; z-index:-1; background:var(--main-color); -webkit-transition-property:left, right; transition-property:left, right; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out } 
.headerBottom .headerGnb .gnbInner ul li a:active:before,
.headerBottom .headerGnb .gnbInner ul li a:focus:before,
.headerBottom .headerGnb .gnbInner ul li a:hover:before { left:0; right:0 } 
.headerBottom .headerGnb .gnbInner ul li a:hover { *height:39px; *border-bottom:2px solid #000; } 
.headerBottom .headerGnb .gnbInner ul li.first { padding-left:0 } 
.headerBottom .headerGnb .gnbInner ul li.last { padding:0 0 0 40px } 
.headerBottom .searchArea { position:absolute; top:5px; right:0; width:240px; height:28px; background: #d6bab2; } 
.headerBottom .searchArea .search { position:relative; width:240px; height:28px } 
.headerBottom .searchArea .search input { padding-left:15px; width:188px; height:28px; line-height:28px; border:none; background:#d6bab2 } 
.headerBottom .searchArea .search a { display:block; position:absolute; top: 50%; transform: translateY(-50%); right:9px; width:17px; height:16px; text-indent:-9999em; background:url(//skin.makeshop.co.kr/skin/natures/pc/icon/searchbtn.png) 0 0 no-repeat } 

/* join */
#header .point { left: 3px; border-radius: 10px; position: absolute; top: 37px; width: 42px; height: 16px; line-height: 15px; background: #a5bea4; color: #fff; text-align: center; } 
#header .point span { position: absolute; top: -8px; left: 50%; margin-left: -4px; width: 8px; height: 4px; color: #a5bea4 !important; } 
#header .point em { font-size: 10px; letter-spacing: 1px; font-family: 'Lato', sans-serif, 돋움; } 


#hdWrap {position: sticky; top:0;left:0;right:0;z-index:100;}
#hdWrap .hdArea {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 105;
    font-size: 11px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;}
    
#hdWrap.fix .hdArea {_border:none; background: #fff;opacity: 0.98;}

#hdWrap.fix .hdCate{
    height: 0;
    opacity: 0;}
    
#hdWrap.fix .hdCateBottom{border-top:1}
    
.minSizeWrap {position: relative}

/* 로고 영역  */
#hdWrap .hdLeft {position: absolute;left: 0;_top: 21px;}
#hdWrap .hdLeft .hd_logo {font-size: 32px;font-weight:800;}


#header_top .inner { padding:0px; height:45px; width:100%; margin:0; auto 0px auto; z-index:9999; }
#header_top .inner .inner2 { width:100%; margin:0 auto; height:45px; z-index:9999; border-top:2px solid #e6e6e6; border-bottom:2px solid #e6e6e6; background:#f7f7f7; 0 bottom repeat-x; }
#topmenu { clear:both; width:1200px; height:45px; background:#f7f7f7; margin:0 auto; z-index:99999999999999; }
#topmenu li { float:left; display:inline-block; }


/* 중분류 노출 스타일 */

#topmenu li { position:relative; }
#topmenu li div { display:none; z-index:9999999; }
#topmenu li div { position:absolute; top:39px; left:0px; width:457px;/* width:188px;*/ background:#fff; border:1px solid #e6e6e6; padding:0px; padding-bottom:0px; }

#cate_top { position:absolute; top:-7px; left:20px; z-index:99999999999999; }
li#cate_menu { float:left; width:150px; padding:19px; }
li#cate_menu a { float:left; display:block; width:146px; height:14px; padding:4px 0 2px 4px; color:#5b5b5b; font-family:arial,돋움; }
li#cate_menu a:hover { color:#fff; text-decoration:none; background:#145738; font-family:arial,돋움; }
li#cate_banner { float:right; width:267px; border-left:1px solid #e6e6e6; /*height:398px; background:#f7f7f7;*/}

/* 넓은 중메뉴 */
#cate_top2 { position:absolute; top:-7px; left:20px; z-index:99999999999999; }
li#cate_menu2 { float:left; width:190px; padding:19px; }
li#cate_menu2 a { float:left; display:block; width:186px; height:14px; padding:4px 0 2px 4px; color:#5b5b5b; font-family:arial,돋움; }
li#cate_menu2 a:hover { color:#fff; text-decoration:none; background:#145738; font-family:arial,돋움; }

/* 좌우변경 중메뉴 */
#cate_top3 { position:absolute; top:-7px; right:40px; z-index:99999999999999; }
li#cate_menu3 { float:right; width:150px; padding:19px; }
li#cate_menu3 a { float:left; display:block; width:146px; height:14px; padding:4px 0 2px 4px; color:#5b5b5b; font-family:arial,돋움; }
li#cate_menu3 a:hover { color:#fff; text-decoration:none; background:#145738; font-family:arial,돋움; }
li#cate_banner3 { float:left; width:267px; border-right:1px solid #e6e6e6; /*height:398px; background:#f7f7f7;*/}


/* 카테고리 */
#hdWrap .hdCate {
    position: relative;
    text-align: center;
    height: 60px;
    width: 1260px;
    margin: 0 auto;
    line-height: 60px;
    transition: 0.3s ease;}

.hdCateBottom{border-top: 1px solid #e0e0e0; background:#f7f7f7; }

.menuAllBtn{margin-left: 13px;cursor: pointer;}

.cateWrap {position: relative; height: 70px; text-align: center; line-height: 70px;}
.cateWrap a:hover { color:#9c9c9c; }
.cateWrap .tmenu {position: relative;display: inline-block; padding: 0 30px;}
.cateWrap .tmenu a {
    font-size: 16px;
    color: #333333;
    font-weight: 400;
    font-family: 'Noto Sans KR';}
.cateWrap .tmenu .depth2 {display:none;position: absolute;background: #fff;top: 70px;width: 118px;padding: 10px 30px;z-index: 97;text-align: center;left:0}
.cateWrap .tmenu .depth2 li a {text-align: left;display: block;line-height: 24px;font-size:14px; padding-bottom: 17px;}
.cateWrap .tmenu .depth2 li a:hover {color:#000000; font-weight:bold}


.topCenter{}

.topCenter a{
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    padding: 0 22px;}


#hdWrap .topRight {position: absolute;right: 0;top: 0;}
#hdWrap .topRight li {position: relative;padding: 0 8px;display: inline-block;}
#hdWrap .topRight li.cartArea{margin-right: 20px;}
    
    
#hdWrap .topRight li a {font-size: 13px;color:#666;}
#hdWrap .topRight li a:hover { color:#9c9c9c; }
#hdWrap .topRight li a.searchBtn {font-size: 26px; color: #2e2e2e;line-height: 30px;}
#hdWrap .topRight li.cartArea a { }
#hdWrap .topRight li.cartArea .bsCount {
    position: absolute;
    font-family: 'Josefin Sans';
    top: 16px;
    right: -3px;
    width: 18px;
    height: 25px;
    line-height: 28px;
    border-radius: 50%;
    background-color: #004a26;
    text-align: center;
    font-size: 11px;
    color: #fff;}

/* 검색창 */
#hdWrap .searchArea {
    background: #fff;
    display: none;
    width: 290px;
    position: absolute;
    top: -4px;
    right: 0;
    z-index: 10;}
#hdWrap .searchArea .search { position: relative; }
#hdWrap .searchArea .search fieldset { position:relative;float:left; margin: 0 auto; }
#hdWrap .searchArea .search input{border:0;width: 198px;height:36px;font-size:13px;margin-top: 5px;font-weight: 300;background:#f0f0f0;color:#000;border-radius:6px;padding:0 34px 0 12px;}
#hdWrap .searchArea .search .searhBtn{
    font-size: 22px;
    position: absolute;
    top: 22px;
    right: 14px;}
    
#hdWrap .searchArea .search .searchClose {
    width: 35px;
    font-size: 26px;
    float: left;
    text-align: center;
    margin-left: 5px;
    background: none;
    padding-top: 20px;}


/* 전체메뉴 레이어 */
.allMenu {display:none;background:#fff;position: fixed;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 201;}
.allMenu .allMenuWrap {width: 84%;margin: 0 auto;}
.allMenu .allMenuWrap a:hover { color:#9c9c9c; }
.allMenu .allMenuWrap h3 {font-size: 16px;font-weight: bold;padding: 1% 0 0.5% 1%;}
.allMenu .allMenuWrap .closeBtn {display: block;margin: 4% 0;font-size: 40px; text-align:center }
.allMenu .allMenuWrap .allMenuList { *zoom:1;}
.allMenu .allMenuWrap .allMenuList:after { display:block; clear:both; content:'' }
.allMenu .allMenuWrap .allMenuList dl {padding: 0 1% 3%;float:left;width: 14.6%;}
.allMenu .allMenuWrap .allMenuList dl dt {border-bottom: 1px solid #ddd;margin-bottom: 4px;}
.allMenu .allMenuWrap .allMenuList dl dt a {padding-left:7px;font-size:14px;height:30px;line-height:30px;}
.allMenu .allMenuWrap .allMenuList dl dd a {display: block;padding: 6px 0 3px 7px;color: #888; font-size:13px;}
.allMenu .allMenuWrap .allMenuList dl dd a:hover {color:#2e2e2e;}
.allMenu .allMenuWrap .boardList:after { display:block; clear:both; content:''}
.allMenu .allMenuWrap .boardList li { float: left; padding: 0 1%; }
.allMenu .allMenuWrap .csInfo {padding: 4% 0 0; text-align:center; font-size:13px;} 
.allMenu .allMenuWrap .csInfo span { padding: 0 1%; opacity:0.4; } 
/* BASIC css end */