@charset "UTF-8";

/** 최소 넓이 **/
body {min-width:370px;}

/** 최상단 배너 **/
.top_banner {position:relative; width:100%; height:106px;}
.top_banner li {position:absolute; top:0; width:50%; height:100%;}
.top_banner li:nth-child(1) {left:0; background:#f1f2ec; text-align:right;}
.top_banner li:nth-child(2) {right:0; background:#7fcbbe; text-align:left;}
.top_banner li a {display:inline-block;}
.top_banner li a img {width:570px; height:106px;}

/** header **/
header {position:relative; width:100%; border-bottom:1px solid #ddd;}
header h1 {position:absolute; margin-top:14px;}
.top_wrap{position:relative; margin:0 auto; width:100%; max-width: 1240px; padding:0 20px; height:140px;}

/* 상단 아이콘 오버 텍스트 */
.topIcon_menu i[class^="xi-"],
.category_menu i[class^="xi-"] {position:relative;}
.topIcon_menu i[class^="xi-"] em,
.category_menu i[class^="xi-"] em {position:absolute; top:-20px; padding:2px 5px; left:0; background:#fff; border:1px solid #bbb; border-radius:3px; opacity:0.7; box-shadow:0 1px 3px 0 rgba(0,0,0,0.1); font-size:12px; color:#444; z-index:99;}
.topIcon_menu i[class^="xi-"]:hover em,
.category_menu i[class^="xi-"]:hover em {display:block;}

/* 상단 검색 */
.topSearch {position:absolute; top:24px; left:300px; transition:all ease 0.3s 0s;}
.topSearch input[type="text"] {float:right; height:42px; line-height:42px; width:354px; border-radius:100px;  border:1px solid #89b942; background:#fff; transition:all ease 0.3s 0s;}
.topSearch input::placeholder {color:#777; font-size:14px;}
.topSearch button {position:absolute; top:10px; right:12px; transition:all ease 0.3s 0s;}
.topSearch button i[class^="xi-"] {font-size:26px;}
.topSearch button.motionSet {display:none;}

/* 상단 슬라이드 메뉴 */
.sideMenuBtn {display:none; position:absolute; top:14px; left:15px; transition:all ease 0.35s 0.095s;}
.sideMenuBtn i[class^="xi-"] {font-size:30px;}

.alrimBtn {display:block; position:absolute; top:20px; right:20px;}
.alrimBtn i[class^="xi-"] {font-size:30px;}

/* 상단 아이콘 메뉴 */
.topIcon_menu {position:absolute; top:20px; right:60px; display:inline-flex; flex-wrap: wrap; justify-content:flex-end; align-items:center;}
.topIcon_menu a {position:relative; display:block; margin:0 0 0 20px; font-size:13px;}
.topIcon_menu i[class^="xi-"] {font-size:34px; color:#000;}

.topIcon_menu a span {position:absolute; top:-6px; left:20px; min-width:22px; padding:0 6px; line-height:22px; text-align:center; border-radius:14px; color:#fff; z-index:1;}
.cart_num{background-color:#89b942;}
.qna_num{background-color:#89b942;}

/* 상단 가변 메뉴 */
.topGnb_menu {position:absolute; top:95px; right:20px; display:inline-flex; flex-wrap: wrap; justify-content:flex-end; align-items:center;}
.topGnb_menu a {display:block; margin:0 0 0 60px; font-size:18px; color:#222;}
.topGnb_menu a i[class^="xi-"] {display:none;}

/* 상품카테고리 */
.category_menu {position:absolute; top:89px; left:20px; z-index:9;}
.category_menu .openBtn {font-size:28px; color:#000;}
.category_menu .openBtn span{position:absolute; font-size:17px; font-weight:600; margin:7px 0 0 15px;}
.category_menu .menuSet {display:none; position:absolute; top:42px; left:0; width:602px; min-height:300px; overflow-x:hidden; overflow-y:auto; background:#fff; border:1px solid #337b32; border-radius:5px 20px 20px 20px; border-top:1px solid #337b32; box-shadow:1px 2px 5px 1px rgba(0,0,0,0.2)}
.category_menu .menuSet ul {position:absolute; top:0; left:0; width:200px; height:100%; padding:10px 0;}
.category_menu .menuSet ul ul {display:none; left:199px; border-left:1px solid #ddd;}
.category_menu .menuSet li:first-child > ul {display:block;}
.category_menu .menuSet a {position:relative; display:block; padding:3px 15px; width:100%;}
.category_menu .menuSet li button {display:none;}
.category_menu .menuSet li.On > a {color:#89b942;}
.category_menu .menuSet li.On > a:after {content:"\e93f"; position:absolute; top:-4px; right:5px; display:block; font-size:24px; color:#89b942; font-family:'xeicon';}
.category_menu .menuSet ul ul ul li.On a:after {display:none;}
.category_menu .menuSet a:hover {color:#89b942 !important;}

/** 미들 콘텐츠 영역 **/
.contents_wrap {position:relative; margin:60px auto 75px;}
.full_conArea {width:100%;}
.fix_conArea {overflow:hidden; width:100%; max-width: 1240px; padding:0 15px; margin:0 auto;}
.fixPadding_conArea {overflow:hidden; width:1280px; padding:0 70px; margin:0 auto;}

.contents_wrap h2{font-size:30px; line-height:32px; color:#222; margin-bottom:10px;}
.contents_wrap h2.subtitle{font-size:30px; text-align:left;}
.contents_wrap h3{color:#222; font-size:20px;}

.subConFlex {display:flex; justify-content:space-between;}
.sub {width:200px; margin:0 40px 0 0; flex-shrink:0;}
.page_section{position:relative; flex-grow:1;}
.page_section h2.subtitle{font-size:30px; text-align:left;}

/* 서브메뉴 */
.sub h3.lnbTitle{font-size:17px; line-height:25px; letter-spacing:-.04em; color:#333; font-weight:600;}
.sub .sub_menu{margin-top:20px;}
.sub .sub_menu li{border-bottom:1px solid #eee;}
.sub .sub_menu li a{display:block; height:100%; padding:14px 0 16px 8px; line-height:20px; }
.sub .sub_menu li.On {border-color:#89b942;}
.sub .sub_menu li.On a {background:#89b942; color:#fff;}
.sub .lnb_list{margin-bottom:20px;}
.sub .lnb_list li{margin-top:6px;}
.sub .lnb_list li a{display:block; line-height:18px; font-size:14px; letter-spacing:-.03em; color:#757575; box-sizing:border-box;}

/** footer **/
footer {position:relative; border-top:1px solid #ddd;}
footer:before {content:"";position:absolute;top:50px;left:0;display:block;height:1px;width:100%;background:#ddd;}
.bottom_wrap {position:relative; margin:0 auto; width:100%; max-width: 1240px; padding:0 20px; height:60px;}
.bottom_menu {display:flex;}
.bottom_menu a {position:relative; display:block; padding:15px 12px; font-size:14px;}
.bottom_menu a + a {margin-left:12px;}
.bottom_menu a + a:before {content:""; position:absolute; top:19px; left:-3px; display:block; width:1px; height:13px; vertical-align:middle; background:#ddd;}
.whats_related {position:absolute; top:0; right:0; width:200px;}
.whats_related > button {height:60px; width:100%; font-size:13px; color:#666; border-left:1px solid #ddd; border-right:1px solid #ddd; background:#fff;}
.whats_related > button:after {content:"\e942"; margin:-2px 0 0 70px; display:inline-block; vertical-align:middle; -webkit-transform:rotate(180deg); transform:rotate(180deg); font-family:'xeicon'; font-size:20px;}
.whats_related > ul {display:none; position:absolute; bottom:60px; right:0; width:100%; padding:10px 0; overflow:auto; border:1px solid #ddd; background:#fff;}
.whats_related > ul a {padding:3px 20px; display:block;}
.whats_related > ul a:after {content:"\e980"; margin:-2px 0 0 5px; display:inline-block; vertical-align:middle; font-family:'xeicon'; font-size:14px;}

.siteInfo {position:relative; margin:0 auto; width:100%; max-width: 1240px; padding:25px 20px 25px 300px; font-size:13px; color:#666;}
.siteInfo .footer_logo {position:absolute; top:30px; left:20px; font-size:30px; color:#000; font-weight:600;}
.siteInfo p {margin:0 0 20px;}
.h_blind {display:none;}

/********************************
 media query
*******************************/
/* 1024 이하 화면에서(모바일) 제거 */
@media screen and (max-width:1024px) {
	.mo_blind {display:none !important;}
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:1024px) {
	.body_wrap {padding:65px 0 0;}
	.top_wrap{position:fixed; top:0; left:0; height:60px; background:rgba(256,256,256,0.9); z-index:9;}
	.contents_wrap {margin:60px 0;}
	
	.mo_top h1 {margin-top:-2px; margin-left:36px;}
	.mo_top h1 a img{width:150px}
	.topSearch {left:initial; top:8px; right:40px;}
	.topSearch.On {width:calc(100% - 90px); }
	.topSearch input[type="text"] {opacity:0.0; width:0;}
	.topSearch.On input[type="text"] {width:100%; opacity:1.0;}
	.topSearch button {top:10px; right:10px;}
	.topSearch.On button {top:10px; right:10px;}
	.topSearch button i[class^="xi-"] {font-size:24px;}
	.topSearch.On button i[class^="xi-"] {font-size:24px;}
	.topSearch button.motionSet {display:block;}
	.topSearch button.functionSet {display:none;}
	.topSearch.On button.motionSet {display:none;}
	.topSearch.On button.functionSet {display:block;}

	.sideMenuBtn {display:block;}
	.sideMenuBtn.On {right:315px; color:#fff; z-index:999;}

	.alrimBtn {top:16px; right:15px;}
	.alrimBtn i[class^="xi-"] {font-size:26px;}

	.mo_menu {display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:99;}
	.mo_menu_bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.75);}
	.mo_menuBox {position:fixed; top:0; right:-400px; width:300px; height:100%; overflow-y:auto; display:flex; flex-direction:column; background:#fff;}
	.topIcon_menu,
	.topGnb_menu,
	.category_menu {width:100%; justify-content:space-around; position:initial; top:initial; left:initial; right:initial;}
	.category_menu .openBtn {display:none;}
	.category_menu .menuSet,
	.category_menu .menuSet ul {width:100%; border-left:0 !important; display:none; position:initial; top:initial; left:initial; right:initial;}
	.category_menu .menuSet,
	.category_menu .menuSet > ul {display:block;}
	.category_menu .menuSet {border-radius:0; box-shadow:none; border:none;}
	.category_menu .menuSet li.On > a {color:inherit;}
	.category_menu .menuSet li.On > a:after {display:none;}
	.topIcon_menu {padding:15px 0; justify-content:space-evenly;}
	.topIcon_menu a {margin:0; padding:0 5px;}
	.topGnb_menu {border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
	.topGnb_menu a {padding:8px 0; margin-left:0; width:50%; text-align:center;}
	.topGnb_menu a + a {border-left:1px solid #ccc;}
	.topGnb_menu a i[class^="xi-"] {display:inline-block;}
	
	.category_menu .menuSet li {position:relative;}
	.category_menu .menuSet li button {display:block;}
	.category_menu .menuSet li a {text-indent:20px; padding:10px 0; font-size:17px;}
	.category_menu .menuSet li.gotChild a {width:calc(100% - 70px);}
	.category_menu .menuSet li button {position:absolute; top:8px; right:20px; width:32px; height:32px; border-radius:2px; border:1px solid #ccc; background:#fff;}
	.category_menu .menuSet li button i[class^="xi-"] {font-size:28px; color:#888; vertical-align:middle; transition:all ease 0.3s 0s;}
	.category_menu .menuSet li li button {top:2px; border:none; background:transparent;}
	.category_menu .menuSet li.active > button {border-color:#89b942;}
	.category_menu .menuSet li.active > a {color:#89b942;}
	.category_menu .menuSet li.active > button i {color:#89b942; transform:rotate(180deg);}
	.category_menu .menuSet li:first-child > ul {display:none;}
	.category_menu .menuSet > ul > li > ul {padding:10px 0 10px 15px; margin:0 0 10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#f8f8f8;}
	.category_menu .menuSet > ul > li > ul > li > ul {padding:0 0 10px 15px;}
	.category_menu .menuSet > ul > li > ul a {padding:5px 0;}
	.category_menu .menuSet > ul > li > ul a:after {display:none !important;;}
	.category_menu .menuSet > ul > li > ul > li > ul > li > a:before {content:"└"; display:inline-block; margin:0 10px 0 -15px; text-indent:0;}
	.category_menu .menuSet li > a i[class^="xi-"] {content:"\e942"; position:absolute; border:1px solid #ccc; top:0; right:15px; display:block; font-size:24px; color:#aaa; font-family:'xeicon';}
	.category_menu .menuSet a:hover {color:inherit !important;}
	
	.subConFlex {flex-direction:column;}
	.sub {width:100%; margin:0 0 30px; text-align:center;}
	.sub h2.subtitle{font-size:26px; margin:0 0 10px; display:inline-block;}
	.sub .sub_menu {display:flex; flex-wrap:wrap; justify-content:space-between;}
	.sub .sub_menu li {border:1px solid #ccc; flex-grow:1; width:33.333%}
	.sub .sub_menu li.On:last-child {border-right:0px;}
	.sub .sub_menu li a {padding:12px 20px; letter-spacing:0; text-align:center;}
	.sub .sub_menu li a i[class^="xi-"] {display:none;}
	
	.page_section {padding:0;}

	.subConFlex .sub .cs_info .cs_infoTxt {padding:15px !important;}
	.subConFlex .sub .cs_info .cs_infoTxt > span {display:inline-block; margin:-10px 10px 0 0; vertical-align:middle;}
	.subConFlex .sub .cs_info .cs_infoTxt p.cs_call {display:inline-block; vertical-align:middle;}
}

@media screen and (max-width:980px) {
	.bottom_menu {justify-content:center;}
	.bottom_menu a + a {margin-left:0;}
	.bottom_menu a + a:before {display:none;}
	.siteInfo {padding-left:20px; text-align:center;}
	.siteInfo .footer_logo {display:none;}
}

@media screen and (max-width:830px) {
	.sub .sub_menu.myCustom li {flex:1 1 30%;}
}

@media screen and (max-width:767px) {
}

@media screen and (max-width:640px) {
	.sub .sub_menu li a {font-size:13px;}
	.contents_wrap h2{font-size:18px;}
	.siteInfo span{display:block;}
	.h_blind {display:block; }
}

@media screen and (max-width:500px) {
	.sub .sub_menu.myCustom li {flex:1 1 40%;}
}

@media screen and (max-width:480px) {
}