@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css);

* { 
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html, body { 
	position:relative; 
	width: 100%;
	overflow-x:hidden;
}
body { 
	font-family: Pretendard, sans-serif;	
	font-weight:400;
	line-height:1.3;
	letter-spacing:0;
	word-break:keep-all;
}
a { 
	text-decoration:none; 
}
li { 
	list-style:none; 
}
button, input, textarea, select { 
	background: transparent; 
	border:none;
	font-family: Pretendard, sans-serif;	
	font-weight:400;
	line-height:1.3;
	letter-spacing:-.3px;
}
label, button, a {
	cursor:pointer; 
}
input, textarea { 
	display:block; 
	min-width: 0; 
	outline:none; 
}
button { 
	text-align: left; 
}
textarea { 
	resize:none;
}
table { 
	width:100%;
	table-layout:fixed;
	border-spacing:0;
	border-collapse:collapse;
}
.wrapper {
	max-width:600px;
	margin:0 auto;
	padding:40px 0;
}
@media all and (max-width:632px){
	.wrapper { 
		margin:0 16px;
	}
}

/* 헤더 시작
------------------------------------------------------ */
header { 
	padding:19px 0 18px;
	border-bottom:1px solid #E0E0E0;
	text-align: center;
}
header .hLogo a { 
	display:block; 
	font-size: 0;
}
header .hLogo a img { 
	max-width: 100%; 
}
/* 헤더 끝
------------------------------------------------------ */
/* 네비 시작
------------------------------------------------------ */
nav { 
	position:fixed; 
	width: 187px;
	top:182px;
	right:50%;
	margin:0 -550px 0 0;
	padding:15px 23px 23px;
	border:1px solid #E0E0E0;
	border-radius: 16px;
	text-align: center;
}
nav .logo { 
	margin:0 0 7px;
	font-size: 0; 
}
nav .logo img { 
	max-width: 100%; 
}
nav .txt { 
	margin:0 0 13px;
	font-weight: 600; 
	font-size: 16px;
	line-height: 1.4;
	color: #212121;
}
nav .txt span { 
	color: #F5B62B; 
}
nav .devideLnk { 
	display:block;
	width: 100%;
	padding:12px 10px;
	background: #4CAF50;
	border-radius: 8px;
	font-weight: 800;
	font-size: 14px;
	color: #FFF;
	text-align: center;
}
/* 네비 끝
------------------------------------------------------ */
/* 푸터 시작
------------------------------------------------------ */
footer { 
	max-width: 600px; 
	margin:0 auto;
	padding:40px 20px;
	background: #F6F6F6;
	text-align: center;
}
footer .lnkLst01 { 
	display:flex;
	flex-wrap:wrap; 
	justify-content:center;
	gap:22px;
	margin:0 0 21px;
}
footer .lnkLst01 li { 
	position:relative; 
	padding:0 23px 0 0;
}
footer .lnkLst01 li:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 1px;
	height: 18px;
	top:50%;
	right:0;
	margin:-9px 0 0;
	background: #A5A5A5;
}
footer .lnkLst01 li:last-child { 
	padding:0;
}
footer .lnkLst01 li:last-child:after { 
	display:none; 
}
footer .lnkLst01 .lnk { 
	display:block; 
	font-size: 0;
}
footer .lnkLst01 .lnk img { 
	max-width: 100%; 
}
footer .devideLnk { 
	display:inline-block; 
	margin:0 0 26px;
	padding:18px 73px 15px;
	border-radius: 40px;
	background: #4CAF50;
	font-weight: 800;
	font-size: 16px;
	color: #FFF;
}
footer .infoLst li,
footer .copy { 
	font-weight: 500; 
	font-size: 12px;
	line-height: 1.5;
	color: #9E9E9E;
}
footer .lnkLst02 { 
	display:flex;
	flex-wrap:wrap; 
	justify-content:center; 
	gap:10px;
	margin:26px 0 0;
}
footer .lnkLst02 .lnk { 
	display:block; 
	padding:11px 20px;
	background: #EBEBEB;
	border-radius: 8px;
	font-weight: 800;
	font-size: 14px;
	color: #616161;
}
/* 푸터 끝
------------------------------------------------------ */
/* 공통 상단 검색 영역 시작
------------------------------------------------------ */
.comTopBox { 
	text-align: center;  
}
.comTopBox .tit { 
	margin:0 0 20px;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.4;
	color: #212121;
}
.comTopBox .tit span { 
	color: #4CAF50; 
}
.comTopBox .schBox { 
	position:relative; 
	width: 100%;
	margin:0 0 20px;
}
.comTopBox .schBox .ipt { 
	width: 100%;
	padding:21px 65px 19px;
	border:1px solid #E0E0E0;
	border-radius: 20px;
	font-weight: 600;
	font-size: 18px;
	color: #212121;
	text-align: center;
}
.comTopBox .schBox .ipt::placeholder { 
	color: #9E9E9E; 
}
.comTopBox .schBox .btn { 
	position:absolute;
	display:block; 
	top:50%;
	right:7px;
	padding:9px;
	transform:translateY(-50%);
	background: #4CAF50;
	border-radius: 20px;
	font-size: 0;
}
.comTopBox .schBox .btn img { 
	max-width: 100%; 
}
.comTopBox .cateBox { 
	position:relative; 
	overflow:hidden;
}
.comTopBox .cateBox:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 30px;
	height: 100%;
	top:0;
	right:0;
	background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	z-index:2;
}
.comTopBox .cateLst { 
	display:flex;
	gap:8px;
	margin:0 0 44px;
}
.comTopBox .cateLst .btnCate { 
	flex-shrink:0;
	display:block;
	padding:8px 11px 5px;
	border:1px solid #E0E0E0;
	border-radius: 20px;
	font-size: 16px;
	text-align: center;
	color: #666;
	white-space:nowrap;
}
/* 공통 상단 검색 영역 끝
------------------------------------------------------ */
/* 메인 시작
------------------------------------------------------ */
.mBnrBox { 
	margin:0 0 39px;
	font-size: 0;
}
.mBnrBox img { 
	width: 100%; 
}
.mTit01 { 
	display:flex;
	align-items:center; 
	justify-content:center; 
	gap:4px;
	margin:0 0 15px;
}
.mTit01 span { 
	display:block; 
}
.mTit01 .ico { 
	flex-shrink:0;
	font-size: 0; 
}
.mTit01 .ico img { 
	max-width: 100%; 
}
.mTit01 .txt { 
	font-weight: 800; 
	font-size: 24px;
	color: #212121;
}
.mTxt01 { 
	margin:0 0 20px;
	font-weight: 600;
	font-size: 16px;
	text-align: center; 
	color: #9E9E9E;
}
.mConBox { 
	margin:0 0 63px;
}
.mGraphWr { 
	position:relative;
	padding:0 90px; 
}
.mGraphWr .mGraphArrow { 
	position:absolute; 
	display:block; 
	top:50%;
	transform:translateY(-50%);
	font-size: 0;
}
.mGraphWr .mGraphArrow img { 
	max-width: 100%; 
}
.mGraphWr .mGraphArrow.stPrev { 
	left:0; 
}
.mGraphWr .mGraphArrow.stNext { 
	right:0; 
}
.mGraphWr .swiper-pagination { 
	position:relative; 
	top:auto;
	bottom:auto;
	left:auto;
	margin:13px 0 0;
}
.mGraphWr .swiper-pagination-bullet-active { 
	background: #333; 
}
.mGraphSwipe { 
	overflow:hidden;
}
.mGraphSwipe .swiper-slide { 
	padding:15px;
	border:1px solid #E4E4E4; 
	border-radius: 20px;
}
.mGraphSwipe .topBox { 
	display:flex;
	align-items:center; 
	gap:15px;
	margin:0 0 23px;
}
.mGraphSwipe .topBox .imgBox { 
	flex-shrink:0;
	position:relative; 
	width: 136px;	
	height: 136px;
	background: #E0E0E0;
	border-radius: 10px;
	overflow:hidden;
}
.mGraphSwipe .topBox .imgBox img { 
	position:absolute; 
	width: 100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.mGraphSwipe .topBox .prcBox .cate { 
	position:relative; 
	margin:0 0 5px;
	padding:3px 4px 3px 19px;
	background: #FFE2E2; 
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	color: #F56666;
}
.mGraphSwipe .topBox .prcBox .cate:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	top:50%;
	left:6px;
	margin:-2px 0 0;
	border-top:5px solid #FF5353;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
}
.mGraphSwipe .topBox .prcBox .prc { 
	margin:0 0 5px;
	font-weight: 800; 
	font-size: 20px;
	color: #212121;
}
.mGraphSwipe .topBox .prcBox .prc span { 
	color: #F56666; 
}
.mGraphSwipe .topBox .prcBox .aver { 
	font-weight: 500; 
	font-size: 14px;
	color: #9E9E9E;
}
.mGraphSwipe .name { 
	font-weight: 500; 
	font-size: 16px;
	color: #212121;
}
.mCateLst { 
	display:flex;
	flex-wrap:wrap; 
	justify-content:center; 
	gap:8px;
	margin:0 0 46px;
}
.mCateLst .btnCate { 
	display:block; 
	padding:9px 12px 6px;
	background: #F6F6F6;
	border-radius: 20px;
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	color: #424242;
}
.mCateLst .btnCate.on { 
	background: #4CAF50;
	color: #FFF;
}
.mPdcLst { 
	display:flex;
	flex-wrap:wrap; 
	justify-content:center; 
	gap:20px;
}
.mPdcLst li { 
	width: 150px; 
}
.mPdcLst .lnk { 
	display:flex;
	flex-wrap:wrap; 
	align-items:center; 
	gap:4px;
}
.mPdcLst .lnk span { 
	display:block; 
}
.mPdcLst .lnk .imgBox { 
	position:relative; 
	width: 150px; 
	height: 150px;
	background: #E0E0E0;
	overflow:hidden;
}
.mPdcLst .lnk .imgBox img { 
	position:absolute; 
	width: 100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.mPdcLst .lnk .per { 
	position:relative; 
	padding:3px 4px 1px 19px;
	background: #FFE2E2;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	color: #F56666;
}
.mPdcLst .lnk .per:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	top:50%;
	left:6px;
	margin:-2px 0 0;
	border-top:5px solid #FF5353;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
}
.mPdcLst .lnk .prc { 
	font-weight: 600; 
	font-size: 16px;
	color: #212121;
}
.mPdcLst .lnk .name { 
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 16px;
	color: #424242;
	overflow: hidden;
}
.mPdcLst .lnk .cate { 
	padding:3px 4px 2px;
	border-radius: 6px;
	text-align: center;
	font-size: 12px;
}
.mPdcLst .lnk .cate.st01 { 
	background: #F56666;
	color: #FFF;
}
.mPdcLst .lnk .cate.st02 { 
	background: #E5FFE7;
	color: #4CAF50;
}
.mSchResult { 
	margin:0 0 39px;
	padding:16px 10px;
	background: #F6FFF7;
	border:1px solid #E1F5E3;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	color: #9E9E9E;
}
.mSchResult span { 
	color: #4CAF50; 
}
/* 메인 끝
------------------------------------------------------ */
/* 제품 상세 시작
------------------------------------------------------ */
.pdcTit01 { 
	margin:0 0 19px;
	font-weight: 700; 
	font-size: 18px;
	color: #424242;
}
* + .pdcTit01 { 
	margin-top:35px;
}
.pdcImgBox { 
	margin:0 0 30px;
	text-align: center;
	font-size: 0;
}
.pdcImgBox img { 
	max-width: 100%; 
}
.pdcInfoBox { 
	border-top:1px solid #E4E4E4;
}
.pdcInfoBox dl { 
	display:flex;
	align-items:center; 
	gap:10px;
	border-bottom:1px solid #E4E4E4;
}
.pdcInfoBox dt { 
	flex-shrink:0;
	width: 84px;
	padding:0 0 0 10px;
	font-weight: 700;
	font-size: 16px;
	color: #212121;
}
.pdcInfoBox dd { 
	flex-grow:1;
	padding:22px 20px;
	font-size: 500;
	font-size: 16px;
	line-height: 1;
	color: #212121;
	word-break:break-all;
}
.pdcInfoBox dd .clrTxt01 { 
	font-weight: 700;
	color: #FF5B48;
}
.pdcInfoBox dd .clrTxt02 { 
	font-weight: 700;
	color: #3BD569;
}
.pdcInfoLnk { 
	margin:14px 0 0;
	overflow:hidden;
}
.pdcInfoLnk .lnk { 
	display:block; 
	float:right;
	font-weight: 500;
	font-size: 14px;
	color: #9E9E9E;
}
.pdcOptBox { 
	padding:0 0 59px;
	border-bottom:8px solid #F6F6F6;
}
.pdcOptLst li { 
	margin:0 0 26px;
}
.pdcOptLst li:last-child { 
	margin:0;
}
.pdcOptLst .lnk { 
	display:flex;
	align-items:center; 
	gap:19px;
}
.pdcOptLst .lnk .imgBox { 
	flex-shrink:0;
	position:relative; 
	width: 108px;
	height: 108px;
	background: #E0E0E0;
	border-radius: 10px;
	overflow:hidden;
}
.pdcOptLst .lnk .imgBox img { 
	position:absolute; 
	width: 100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.pdcOptLst .lnk .conBox { 
	flex-grow:1;
	display:flex;
	flex-wrap:wrap; 
	align-items:center; 
	gap:4px;
}
.pdcOptLst .lnk .conBox span { 
	display:block; 
}
.pdcOptLst .lnk .name { 
	width: 100%;
	font-weight: 500; 
	font-size: 16px;
	color: #424242;
}
.pdcOptLst .lnk .prc { 
	font-weight: 600; 
	font-size: 16px;
	line-height: 1;
	color: #212121;
}
.pdcOptLst .lnk .per { 
	position:relative; 
	padding:3px 4px 1px 19px;
	background: #FFE2E2;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	color: #F56666;
}
.pdcOptLst .lnk .per:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	top:50%;
	left:6px;
	margin:-2px 0 0;
	border-top:5px solid #FF5353;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
}
.pdcLst { 
	display:flex;
	flex-wrap:wrap; 
	justify-content:center; 
	gap:20px;
}
.pdcLst li { 
	width: 150px; 
}
.pdcLst .lnk { 
	display:flex;
	flex-wrap:wrap; 
	align-items:center; 
	gap:4px;
}
.pdcLst .lnk span { 
	display:block; 
}
.pdcLst .lnk .imgBox { 
	position:relative; 
	width: 150px; 
	height: 150px;
	background: #E0E0E0;
	overflow:hidden;
}
.pdcLst .lnk .imgBox img { 
	position:absolute; 
	width: 100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.pdcLst .lnk .per { 
	position:relative; 
	padding:3px 4px 1px 19px;
	background: #FFE2E2;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	color: #F56666;
}
.pdcLst .lnk .per:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	top:50%;
	left:6px;
	margin:-2px 0 0;
	border-top:5px solid #FF5353;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
}
.pdcLst .lnk .prc { 
	font-weight: 600; 
	font-size: 16px;
	color: #212121;
}
.pdcLst .lnk .name { 
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 16px;
	color: #424242;
	overflow: hidden;
}
.pdcLst .lnk .cate { 
	padding:3px 4px 2px;
	border-radius: 6px;
	text-align: center;
	font-size: 12px;
}
.pdcLst .lnk .cate.st01 { 
	background: #F56666;
	color: #FFF;
}
.pdcLst .lnk .cate.st02 { 
	background: #E5FFE7;
	color: #4CAF50;
}
.pdcGraphBox { 
	font-size: 0; 
}
.pdcGraphBox > img { 
	width: 100%; 
}
/* 제품 상세 끝
------------------------------------------------------ */
/* 갤러리 게시판 시작
------------------------------------------------------ */
.galBrdLstWr { 
	padding:0 0 58px;
	border-bottom:8px solid #F6F6F6;
}
.galBrdLstWr .tit01 { 
	margin:0 0 22px;
	font-weight: 700;
	font-size: 18px;
	color: #424242;
}
.galBrdLstWr .galBrdLst li { 
	margin:0 0 24px;
}
.galBrdLstWr .galBrdLst li:last-child { 
	margin:0;
}
.galBrdLstWr .galBrdLst .lstLnk { 
	display:flex;
	align-items:center; 
	gap:20px;
}
.galBrdLstWr .galBrdLst .lstLnk span { 
	display:block; 
}
.galBrdLstWr .galBrdLst .lstLnk .lstImgBox { 
	position:relative;
	width: 108px;
	height: 108px;
	overflow: hidden;
	font-size: 0;
}
.galBrdLstWr .galBrdLst .lstLnk .lstImgBox img { 
	position:absolute; 
	width: 100%;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
}
.galBrdLstWr .galBrdLst .lstLnk .lstTxtBox { 
	width: calc(100% - 128px); 
}
.galBrdLstWr .galBrdLst .lstLnk .lstTit01,
.galBrdLstWr .galBrdLst .lstLnk .lstTxt01 { 
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow: hidden; 
}
.galBrdLstWr .galBrdLst .lstLnk .lstTit01 { 
	margin:0 0 4px;
	font-weight: 500; 
	font-size: 16px;
	color: #424242;
}
.galBrdLstWr .galBrdLst .lstLnk .lstTxt01 { 
	font-size: 14px; 
	color: #999;
}
/* 갤러리 게시판 끝
------------------------------------------------------ */
/* 게시판 내용 스킨 시작
------------------------------------------------------ */
.brdViewWr .imgBox { 
	margin:0 0 40px;
	font-size: 0;
	text-align: center;
}
.brdViewWr .imgBox img { 
	max-width: 100%; 
}
.brdViewWr .tit01 { 
	margin:0 0 40px;
	padding:25px 0;
	border-top:1px solid #E4E4E4;
	border-bottom:1px solid #E4E4E4;
	font-weight: 700;
	font-size: 20px;
	color: #373737;
	word-break:break-all;
}
.brdViewWr .txt01 {
	margin:0 0 40px;
	padding:0 0 25px;
	border-bottom:1px solid #E4E4E4;
	font-weight: 500; 
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: -.03em;
	color: #373737;
	word-break:break-all;
}
.brdViewWr .btmBox { 
	display:flex;
	gap:12px;
}
.brdViewWr .btmBox .btn { 
	display:flex;
	align-items:center; 
	justify-content:center;
	padding:17px 46px 16px;
	border-radius: 30px;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -.5px;
	text-align: center;
	color: #FFF;
}
.brdViewWr .btmBox .btn.st01 { 
	flex-shrink:0;
	background: #CDD1D4;
}
.brdViewWr .btmBox .btn.st02 { 
	flex-grow:1;
	background: #4CAF50;
}
/* 게시판 내용 스킨 끝
------------------------------------------------------ */
/* 페이징 시작
------------------------------------------------------ */
.comPageBox { 
	display:flex;
	justify-content:center;
	margin:80px 0 0;
}
.comPageBox .btn { 
	position:relative;
	display:flex;
	align-items:center; 
	justify-content:center; 
	width: 36px;
	height: 36px;
	text-align: center;
}
.comPageBox .btn.stArrow:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 8px;
	height: 8px;
	top: 50%;
	left: 50%;
	border-top:1px solid #9E9E9E;
	border-right:1px solid #9E9E9E;
}
.comPageBox .btn.stArrow.stPrev:before { 
	margin:-4px 0 0 -4px;
	transform:rotate(-135deg); 
}
.comPageBox .btn.stArrow.stNext:before { 
	margin:-4px 0 0 -4px;
	transform:rotate(45deg); 
}
.comPageBox .btn.stNum { 
	font-weight: 500; 
	font-size: 15px;
	line-height: 1;	
	letter-spacing: -.25px;	
	color: #666;
}
.comPageBox .btn.stNum.on { 
	font-weight: 900;
	color: #4CAF50;
}
/* 페이징 끝
------------------------------------------------------ */