@charset "UTF-8";
/* =========================
	SKIP NAV
========================= */
#skipNav{ position: fixed; top: 0; left: 0; width: 100%; z-index: 9999999; }
#skipNav a{ background: rgba(0,0,0,0.9); color: #fff; font-weight: bold; height: 50px; line-height: 50px; display: block; text-align: center; position: absolute; width: 100%; left: 0; transition: 0.8s; -webkit-transition: 0.8s; top: -60px; }
#skipNav a:focus, #skipNav a:active, #skipNav a:hover{top: 0;}

/* =========================
	팝업css
========================= */
.popup_div td{ padding: 0;}
.popup_div a{ display:block; }
.popup_div a img{ display:block; }
.popup_close{ background:rgba(0,0,0,0.9); }
.popup_close tbody tr td{ color:#fff; line-height:30px; padding:5px 10px; }
.popup_close tbody tr td span{  padding: 5px 10px; border: 0; background: #393939; color: #fff; font-size: 13px; cursor:pointer; }

/* =========================
	해더
========================= */
#header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999999; }
#header a{ display: block; }
#header .bt-gnb{ display: block; background: url(../images/common/icon_gnb.png) no-repeat 50% 50%; background-size: contain;  width: 40px; height: 40px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -webkit-transform:translateY(-50%); background-size: contain; }
#header h1{ max-width:140px; }
#header h1 a{ display:block; width: 100%; max-width: 125px; }

/* 배경 */
#header:hover,
#header.main,
#header.scroll{ background: #fff; border-bottom: 1px solid rgba(191,191,191,1); }
/* 언어 */
.lanDiv{ padding:10px 0; }
.lanDiv li{ display:inline-block; margin:0 4px; }
.lanDiv li a{ display:block; opacity: 0.5; border: 1px solid rgba(0,0,0,0); box-sizing: border-box; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; }
.lanDiv li img{ display:block; }
.lanDiv li:hover a,
.lanDiv li:active a,
.lanDiv li:focus a,
.lanDiv li.on a{ opacity: 1; border: 1px solid #6a6a6a; }
@media all and (max-width:1069px){
	.hd_h{ height: 60px; }
	#header{ background: #fff; }
	#header h1{ padding: 20px 0; }
	#header h1 img{ height: 100%; height: 40px; }

	#header.mscroll{ background: #fff; }
	#header.mscroll h1 .off{ display: none; }
	#header.mscroll h1 .on{ display: block; }
	
	#header #gnb{ position: fixed; z-index: 9999999; top: 0; right: -100%; width: 95%; height: 100%; padding-left: 50px; box-sizing: border-box; -webkit- box-sizing: border-box; max-width: 450px; -webkit-transition: right 0.8s ease-in-out;
	-moz-transition: right 0.8s ease-in-out;
	-ms-transition: right 0.8s ease-in-out;
	-o-transition: right 0.8s ease-in-out;
	transition: right 0.8s ease-in-out; }
	#header #gnb.on{ right: 0; }
	#header #gnb-close{ background-color: #eef2f2; width: 50px; height: 50px; background-image: url(../images/common/icon_close.png); background-repeat: no-repeat; background-position: 50% 50%; position: absolute; top: 0; left: 0;z-index: 9999999; background-size: 50%; }
	#header .gnb-scroll{ float: right; background: #eef2f2; width: 100%; height: 100%; }
	#header .gnbhd{ display: block; text-align: center; background-color: #fff; padding:10px; }
	#header .gnbhd img{ display: block; height: 30px; margin: 0 auto; }
	
	#header .depth01{ position: relative; height: 100%; }
	#header .depth01 li{ display: block; }
	#header .depth01 a{ color: #6f6f6f; font-weight: 500; }
	#header .depth01 > li{ width: 40%; }
	#header .depth01 > li .str a{ text-align: center; padding: 10px 5px; position: relative; border-bottom: 1px solid rgba(255,255,255,0); }
	#header .depth01 > li .tabbt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
	#header .depth02{ position: absolute; top: 0; right: 0; height: 100%; background: #fff; width: 60%; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; display: none; }
	#header .depth01 > li.on{ background: #fff; color: #b11116; }
	#header .depth01 > li.on .str a{ color: #b11116; }
	#header .depth01 > li.on .str a:before{ display: inline-block; content: "·"; margin-right: 3px; }
	#header .depth01 > li.on .str a:after{ display: inline-block; content: "·"; margin-left: 3px; }
	#header .depth01 > li.on .depth02{ display: block; }
	#header .depth02 > li > a{ padding: 10px; border-bottom: 1px solid #d2d2d2; }
	#header .depth02 > li > a:hover,
	#header .depth02 > li > a:focus{ color: #b11116; }
	
	#header .gnbm_bg{ display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.7); }

	/* 언어 */
	.lanDiv{ text-align:center; }
}
@media all and (max-width:320px){
	#header #gnb{padding-left: 40px;}
	#header #gnb-close{ width: 40px; height: 40px; }
	#header .gnbhd img{ height: 20px; }
	#header .depth01 > li .str a{ padding: 10px 5px; }
	#header .depth02 > li > a{ padding: 10px 5px; }
}
@media all and (min-width:1070px){
	#header .nav .tabbt{ display: none; }
	#header #gnb-close{ display: none; }
	#header .bt-gnb{ display: none; }
	
	#header h1{ position: absolute; top: 50%; left: 20px; transform: translateY(-50%); -webkit-transform:translateY(-50%); z-index: 99999; }
	#header h1 a img{ display:block; width: 100%; }
	#header #gnb{ padding:0 220px; }
	#header #gnb .gnb-scroll .gnbhd{ display: none; }
	#header #gnb .depth01{ width: 100%; }
	#header #gnb .depth01 > li{ float: left; width: 20%; text-align: center; position: relative; }
	#header #gnb .depth01 > li .str a{ line-height: 94px; font-size: 18px; font-weight: 500; color: #fff; }
	#header #gnb .depth01 > li .str a span{ line-height: 1; display: inline-block; vertical-align: middle;}
	#header #gnb .depth01 > li:hover .depth02{ display: block; }
	#header #gnb .depth01 > li:hover .str a{ color: #8a1013 !important; }
	
	#header #gnb .depth02{ position: absolute; top: 93px; left: 50%; transform: translateX(-50%); -webkit-transform:translateX(-50%); z-index: 999; width: 100%; display: none; background-color: #fff; padding: 20px 0; border-top: 3px solid #8a1013; min-width: 165px; }
	#header #gnb .depth02 > li{ display: block;  box-sizing: border-box; }
	#header #gnb .depth02 > li > a{ display: block; color: #949494; font-size: 14px; padding: 10px; line-height: 25px; text-align: center; word-break: keep-all; }
	#header #gnb .depth02 > li > a:hover,
	#header #gnb .depth02 > li > a:active,
	#header #gnb .depth02 > li > a:focus{ color: #8a1013; font-weight: 700;}
	#header #gnb .depth02 > li > a:hover span.dot:before,
	#header #gnb .depth02 > li > a:active span.dot:before,
	#header #gnb .depth02 > li > a:focus span.dot:before{ display: inline-block; content: "·"; margin-right: 3px; }
	#header #gnb .depth02 > li > a:hover span.dot:after,
	#header #gnb .depth02 > li > a:active span.dot:after,
	#header #gnb .depth02 > li > a:focus span.dot:after{ display: inline-block; content: "·"; margin-left: 3px; }
	
	/* 배경 */
	#header:hover #gnb .depth01 > li .str a,
	#header.main #gnb .depth01 > li .str a,
	#header.scroll #gnb .depth01 > li .str a{ color: #424242; }

	/* 언어 */
	.lanDiv{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -webkit-transform:translateY(-50%); z-index: 99999; }
}

/* =========================
	포스웨이브 스토어
========================= */
.storeInfo{ background: url(../images/common/storeInfo_bg_m.jpg) no-repeat 50% 50%; background-size:cover; color: #fff; text-align: center; padding:40px 0; }
.storeInfo .txtDiv img{ display: inline-block; vertical-align: middle; margin-right: 10px; margin-bottom: 2px; }
.storeInfo .txtDiv .tit{ font-weight: 700; font-size: 1.2rem; margin-bottom: 15px; }
.storeInfo .txtDiv .txt{ font-size: 0.8rem; margin-bottom: 20px; }
.storeInfo .bt{ display: inline-block; color: #fff; font-size: 0.7rem; background: rgba(0,0,0,0.5); border: 1px solid #fff; padding: 15px 30px; border-radius: 25px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; }
.storeInfo .bt:hover{ background: rgba(0,0,0,0.9); }
.storeInfo .bt img{ display: inline-block; vertical-align: middle; margin-bottom: 2px; margin-left: 20px; }
@media all and (min-width:1070px){
	.storeInfo{ background: url(../images/common/storeInfo_bg_pc.jpg) no-repeat 50% 50%; background-size:cover; padding: 90px 0; text-align: left; }
	.storeInfo .txtDiv .tit{ font-size:30px; }
	.storeInfo .txtDiv .txt{ font-size:16px; margin-bottom: 0; }
	.storeInfo .bt{ font-size:14px; border: 2px solid #fff; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
}

/* =========================
	푸터
========================= */
#footer{ background: #373737; color: #a5a5a5; font-size: 14px; font-weight: 300; }
#footer a{ display: inline-block; color: #a5a5a5; font-size: 13px; }
#footer .witdh{ width: 100%; max-width: 1400px; margin: 0 auto; }

#footer .ft .pList.floatlist li:after{margin: 0 12px; background: #fff; }
#footer .ft .pList a{ color: #ffffff; }

#footer .sns li{ display: inline-block; vertical-align: middle; margin: 0 8px; }

#footer .fb{ padding-bottom: 50px; }
#footer .fb .familysite{ margin-bottom: 50px; }
#footer .fb .familysite select{ background: #4c4c4c; color: #a5a5a5; font-size: 14px; font-weight: 300; border: none; padding: 8px 5px; width: 100%; max-width: 155px; }
#footer .fb address{ margin: 35px 0 60px; }
#footer .fb address .floatlist li.br:after{ display: none;}
#footer .fb address .bt{ vertical-align: middle; border: 1px solid #a5a5a5; font-size: 13px; padding: 3px 10px 4px 9px; margin-left: 5px; }
#footer .fb .csinfo .tit{ color: #ffffff; font-weight: 500; margin-bottom: 10px; }
#footer .fb .csinfo .tit span{ font-weight: 900; font-size: 24px; margin-left: 10px; }
#footer .fb .ftLogo{ display: block; width: 100%; max-width: 84px; margin: 0 auto; }
#footer .fb .copy .admin{ margin-left: 35px; }
@media all and (max-width:969px){
	#footer{ text-align: center; }
	#footer .ft .sns{ padding: 30px 0; }
	#footer .ft .pList{ border-bottom: 1px solid #707070; padding: 15px 10px; }
	#footer .fb{ padding: 0 20px; }
	#footer .fb .csinfo{ display: none; }
	#footer .fb address .floatlist li.mbr:after{ display: none;}
}
@media all and (min-width:970px){
	#footer .ft{ border-bottom: 1px solid #484848; box-sizing: border-box; }
	#footer .ft .pList a{ font-size: 15px; }
	#footer .ft .pList{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
	#footer .ft .sns{ position: absolute; top: 50%; right: 85px; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
	#footer .ft #btnTop{ float: right; }
	
	#footer .fb{ padding: 25px 0 60px; }
	#footer .fb .ftLogo{ margin: 0; }
	#footer .fb .fbr{ float: right; }
	#footer .fb .fbl{ float: left; width: 50%; }
	#footer .fb .familysite{ margin-bottom: 70px; }
	#footer .fb address{ margin: 15px 0 25px; }
	#footer .fb address .floatlist li{ line-height: 1.5; }
	#footer .fb address .floatlist li.pcbr:after{ display: none;}
	#footer .fb address .floatlist br.mbr{ display: none;}
	
}

/* =========================
	btn_move_top
========================= */
#btnTop{ display: block; max-width: 76px; }
#btnTop img{ display: block; width: 100%; }
@media all and (max-width: 969px){
	#btnTop{ position: fixed; right: 2%; bottom: 5%; z-index: 9999; text-align: center; width: 10%; }
}
@media all and (min-width:970px){
	
}


/* =========================
	qbox02
========================= */
#onlineMall{ background: #f7edc6; padding: 30px 0;}
#onlineMall .txt01 .fs01{ font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -1px; }
#onlineMall .txt01 .fs01 img{ margin-right: 10px; }
#onlineMall .txt01 .fs02{ font-size: 1rem; color: #7b7b7b; margin-top: 10px; }
#onlineMall .img01 img.pcImg{ display:none; }
#onlineMall .img01 img.mImg{ display:block; }
@media all and (max-width:449px){
	#onlineMall .img01 img{ display: block; margin: 20px auto ; width: 60%; }
}
@media (min-width:450px) and (max-width:969px){
	#onlineMall .dis_t_pc{ position: relative; }
	#onlineMall .txt01{ width: 50%; }
	#onlineMall .img01{ position: absolute; top: 50%; right: 0; width: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%); max-width: 300px; }
	#onlineMall .btn{ margin-top: 20px; }
}
@media all and (min-width:970px){
	#onlineMall{ padding: 0; }
	#onlineMall .dis_t_pc{ width: 100%; }
	#onlineMall .txt01 .fs01{ font-size: 30px; }
	#onlineMall .txt01 .fs02{ font-size: 16px; }
	#onlineMall .img01 img{ margin-top: -80px; }
	#onlineMall .img01 img.pcImg{ display:block; }
	#onlineMall .img01 img.mImg{ display:none; }
}