@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */

/* ************************ 공용 ************************ */
a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important;}
a:link {text-decoration:none; color:#3d3833;}
a:visited {text-decoration:none; color:#3d3833;}
a:hover {text-decoration:none; color:#000;}
a:active {text-decoration:none; color:#3d3833;}
a,img {transition:all .1s linear;	-webkit-transition:all .1s linear; -moz-transition:all .1s linear;}
			
body {
	position:static; width:100%; min-width:320px;
	font-family:"NanumGothic-Regular","돋움",sans-serif; font-size:14px; font-weight:normal; line-height:1.6; color:#666;
}
section {position:relative; width:1030px; margin:0 auto;}
#gotop {z-index:888; position:fixed; width:35px; height:35px; border-radius:3px; bottom:40px; right:20px; background:url(../images/common/arrow_up.png) no-repeat 50% #fff; box-shadow:0 0 3px rgba(0,0,0,.3) !important; }

/* 컨텐츠 */
.contents img {/* max-width:100%; */ height:auto;}
.divisionBar {display:inline-block; width:30px; height:10px; background:url(../images/common/header_line.jpg) 50% no-repeat;}

/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 992px), print {
	
	html {padding-top:140px;}
	.mobile {display:none !important;}
	/*헤더*/
	header {position:fixed; width:100%; z-index:10; background:#fff; top:0;}
	header.on .head {padding-top:7px; height:50px;}
	header.on .head .head_btnBox2,
	header.on .head .head_btnBox1 {top:8px;}
	header.on .head h1 img {height:35px;}
	
	header .head {position:relative; max-width:1030px; margin: auto; height:90px;  border-bottom:1px solid #ddd; padding-top:20px;}
	header .head .head_btnBox1 {position:absolute; left:0; top:30px;}
	.head_btnBox1 ul {font-size:0;}
	.head_btnBox1 ul li {display:inline-block; font-size:12px; color:#666; border:1px solid #e5e5e5;}
	.head_btnBox1 ul li:hover {box-shadow:1px 1px 1px rgba(0,0,0,.5) inset;}
	.head_btnBox1 ul li:last-child { border-left:0;}
	.head_btnBox1 ul li a {display:block; width:100%; padding:5px 10px 5px 25px;}
	.head_btnBox1 ul li a:hover {}
	.head_btnBox1 ul li:first-child a {background:url(../images/main/arr_left.png) 10px center no-repeat;}
	.head_btnBox1 ul li:last-child a {background:url(../images/main/plus.png) 10px center no-repeat;}
	
	header .head h1 {display:block; text-align:center;}
	
	.head_btnBox2 {position:absolute; top:35px; right:0;}
	.head_btnBox2 ul {font-size:0;}
	.head_btnBox2 ul li {display:inline-block; font-size:12px; font-weight:bold; color:#000;}
	.head_btnBox2 ul li a {display:block; padding:5px 0 5px 20px; margin-right:20px; font-family:"NanumGothic-Bold";}
	.head_btnBox2 ul li a:hover {color:#ff6600;}
	.head_btnBox2 ul li .head_login {background:url(../images/main/ico_login.png) left no-repeat;}
	.head_btnBox2 ul li .head_join {background:url(../images/main/ico_join.png) left no-repeat;}
	.head_btnBox2 ul li .head_logout {background:url(../images/main/ico_logout.png) left no-repeat;}
	.head_btnBox2 ul li .head_search {margin:0; padding:0; padding-right:7px;}
	.head_btnBox2>div {display:none; position:absolute; right:1px; top:-4px; border:1px solid #ddd; background:#f5f5f5; padding:5px; border-radius:30px; width:200px;}
	.head_btnBox2>div a {float:right;}
	.head_btnBox2>div input {margin-left:10px; background:#f5f5f5; border:0; font-size:12px; color:#000; height:30px; width:150px;}
	
	nav {position:relative; width:100%; height:50px; background:#18264b;}
	nav.pc .gnb {display:none;}
	nav .navWrap {position:relative; max-width:1030px; height:50px; margin:0 auto; padding:15px 0;}
	nav .navWrap a {display:inline-block; color:#fff;}
	nav .navWrap .left {}
	nav .navWrap .left .gnbBtn {padding-left:30px; background:url(../images/main/ico_menu.png) left no-repeat;}
	nav .navWrap .left div {display:inline-block;}
	nav .navWrap .left div span {opacity:.5;}
	
	nav .navWrap .left div a {color:#ffd201; font-family:"NanumGothic-Bold";}
	nav .navWrap .left div a:hover {color:yellow;}
	nav .navWrap .right {position:absolute; right:0; top:15px;}
	nav .navWrap .right a {padding:0 10px;}
	nav .navWrap .right a:hover {color:#ffd201;}
	
	nav .gnb {position:relative; z-index:999999; width:100%; max-width:1030px; margin:0 auto; border:1px solid #000; border-top:0; background:#fff;}
	nav .gnb a {color:#000;}
	nav .gnb a.nav_product {padding:10px 30px; background:url(../images/common/nav_product.png) left 10px no-repeat;}
	nav .gnb a.nav_community {padding:10px 30px; background:url(../images/common/nav_community.png) left 10px no-repeat;}
	nav .gnb a.nav_mypage {padding:10px 30px; background:url(../images/common/nav_mypage.png) left 10px no-repeat;}
	nav .gnb a[class^="nav_"] {padding:10px 30px; font-family:"NanumGothic-Bold"; cursor:default;}
	nav .gnb>ul>li {display:table; width:100%; border-bottom:1px solid #ddd; padding:20px;}
	nav .gnb>ul>li>a {display:table-cell; width:220px;}
	nav .gnb>ul>li>ul {display:table-cell;}
	nav .gnb a.nav_product ~ ul>li {display:block;}
	nav .gnb a.nav_product ~ ul>li>ul {padding-bottom:10px;}
	nav .gnb a.nav_product ~ ul>li>ul>li {display:inline-block; margin-left:5px; margin-right:30px;}
	nav .gnb a.nav_product ~ ul>li>ul>li a {color:#666;}
	nav .gnb a.nav_product ~ ul>li>ul>li a:hover {color:#000; font-family:"NanumGothic-Bold";}
	nav .gnb>ul>li>ul a span {color:#ff6600; font-family:"NanumGothic-Bold";}
	nav .gnb>ul>li>ul>li {display:inline-block; margin-right:30px;}
	nav .gnb>ul>li:not(:first-child)>ul a:hover {color:#ff6600;}
	
	/* 사이드메뉴 */
	aside {z-index:10000; width:75px; position:fixed; right:200px; top:200px;}
	aside ul {border:1px solid #000;}
	aside ul li {background:#fff; border-bottom:1px solid #e4e4e4;}
	aside ul li:first-child {border-bottom:0;}
	aside ul li a {display:block; height:65px; font-size:12px; font-family:"NanumGothic-Bold"; text-align:center; color:#666 !important; padding-top:10px;}
	aside ul li a:hover {box-shadow:1px 1px 1px rgba(0,0,0,.8) inset}
	aside ul li a strong {display:block; padding-bottom:5px;}
	aside ul li a span {display:inline-block; width:35px; border-radius:20px; color:#fff;}
	.aside_mypage {color:#fff !important; background:#ff9701 url(../images/common/side_mypage.png) center 10px no-repeat; padding-top:40px; }
	.aside_mypage:hover {background-color:#FFB801;}
	.aside_cart span {background:#ed1c24;}
	.aside_get span {background:#18264b;}
	.aside_today span {background:#898989;}
	.aside_order img {padding:0 0 5px;}
	aside div {margin-top:10px;}
	aside div a {display:block; color:#fff !important; margin-bottom:1px; font-size:11px; text-align:right; padding:5px 10px;}
	aside div a:first-child {background:#000 url(../images/common/side_top.png) 10px center no-repeat;}
	aside div a:last-child {background:#000 url(../images/common/side_down.png) 10px center no-repeat;}
	aside div a:hover {background-color:#ff9701 !important;}
	
	/*footer*/
	footer {font-family:"NotoSansKR-Regular";clear:both; max-width:100%; color:#666; text-align:left; background-color:#18264b; overflow:hidden; padding:50px 0;}
	footer address {position:relative; display:block; max-width:1200px; margin:0 auto;}
	footer address>div {float:left;}
	footer address>div:first-child {width:15%;}
	footer address>div.txt {font-size:12px; color:#fff; line-height:1.7; font-weight:100;}
	footer address>div.txt>div {margin-bottom:20px;}
	footer address>div.txt>div a {color:#fff;}
	footer address>div.txt span {display:inline-block; padding:0 10px;}

	.footer_linkBox {padding:0; background:#18264b; width:100%; border-bottom:1px solid rgba(255,255,255,.1);}
	.footer_linkBox>section>div:first-child {padding:14px 0;}
	.footer_linkBox a {color:#fff; font-size:12px;}
	.footer_linkBox a:hover {color:yellow;}
	.familySite {width:200px; position:absolute; right:0; top:0; border-right:1px solid rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.1);}
	.familySite a {padding:16px 0 16px 20px; display:block;}
	.familySite>a {background:url(../images/common/ico_fam.png) 80% center no-repeat; color:#fff;}
	.familySite li a {background:#fff; border-top:1px solid #000; color:#000; display:block; width: 196px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.familySite li a:hover {color:#fff; background:#18264b;}
	.familySite>ul {visibility:hidden; position:absolute; width:100%; top:0; border:1px solid #000; border-top:0;}
	.familySite>ul>li {display:block;}
	
	/*컨텐츠*/
	.contents {max-width:1200px; margin:0 auto;}
}
/* ************************ (1200) ************************ */
@media screen and (max-width:1200px){
	aside {display:none;}
}
/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

	html {padding-top:0;}
	html,body {font-size:13px;}	
	.pc {display:none !important;}
	nav.mobile .gnb {display:block;}
	/*헤더*/
	header {z-index:999; width:100%; left:0; top:0;}
	header .head {width:100%; height:60px; overflow:hidden; line-height:1; border-bottom:1px solid #e9e9e9;}
	header .head h1 {text-align:center; margin:0 !important; display:block;}
	header .head h1 a {display:inline-block; padding:15px; text-align:center;}
	header .head h1 a img {display:block; height:30px; font-size:0; line-height:0;}
	header .gnbView {position:absolute; top:0; left:0; display:block; height:60px; width:60px; border-right:1px solid #e9e9e9; background:url(../images/common/icon_allmenu.png)no-repeat center; background-size:20px;}
	header .side ul li.mobile a {position:absolute; top:0; right:0; display:block; height:60px; width:60px; border-left:1px solid #e9e9e9; background:url(../images/common/icon_login.png)no-repeat center; background-size:20px;}

	
	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:100%; height:100%; overflow:hidden; box-shadow:-5px 0 5px rgba(0,0,0,.2) !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#003b5e; /* border-bottom:1px solid #fff; */}
	nav.mobile .closeWrap .gnbClose {display:block; float:right; width:60px; height:60px; text-align:center; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat; background-size:20px; border-left:1px solid #20465d;}
	nav.mobile .closeWrap .home {position:absolute; display:block; top:0; left:0; padding:20px; color:#fff; font-size:12px;}
	nav.mobile .closeWrap .add {position:absolute; display:block; top:0; left:56px; padding:20px; font-size:12px; font-weight:bold; color:#ff8a00; letter-spacing:0;}
	nav.mobile .closeWrap .cart {position:absolute; display:block; top:0; left:130px; padding:20px; font-size:12px; font-weight:bold; color:yellowgreen; letter-spacing:0;}
	nav.mobile .closeWrap .second {left:107px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.6);}
	
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left; background:#fff;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:10px 20px; font-size:17px; color:#333; background:#fff; letter-spacing:-1px; text-align:center; border-bottom:1px solid #e9e9e9;}
	nav.mobile .gnb>ul>li>a:hover {color:#ff8a00;}
	nav.mobile .gnb>ul>li.on>a {color:#ff8a00; background:#fff; border-bottom:1px solid #e9e9e9;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {
		display:block; padding:8px 15px; font-size:15px; color:#999; letter-spacing:-.5px; border-bottom:1px solid #f9f9f9;
		background:#fff; text-align:center;
	}
	
	nav.mobile .gnb>ul>li>ul>li>a {color:#000;}
	nav.mobile .gnb>ul>li>ul>li a span {color:#ff6600;}
	nav.mobile .gnb>ul>li>ul>li>ul>li a {font-size:13px;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#000; background-color:#f9f9f9;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#000;}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	
	.mobile_login {display:inline-block; width:60px; height:60px; position:absolute; right:0; top:0;}
	.mobile_login a {border-left:1px solid #ddd; display:block; width:60px; height:60px; position:absolute; right:0; top:0; background:url(../images/common/icon_login.png) 50% no-repeat; background-size:50% !important;}
	.mobile_login a.headLogin {background:url(../images/common/icon_login.png) 50% no-repeat;}
	.mobile_login a.headLogout {background:url(../images/common/icon_logout.png) 50% no-repeat;}
	
	/*footer*/
	footer {font-family:"NotoSansKR-Regular"; clear:both; max-width:100%; color:#666; text-align:left; background-color:#18264b; overflow:hidden; padding:50px 0;}
	footer address {position:relative; display:block; max-width:1200px; margin:0 auto;}
	footer address>div {float:left;}
	footer address>div:first-child {width:15%;}
	footer address>div.txt {font-size:12px; color:#fff; line-height:1.7; font-weight:100; margin-left:80px;}
	footer address>div.txt>div {margin-bottom:20px;}
	footer address>div.txt>div a {color:#fff;}
	footer address>div.txt span {padding:0 10px; display:block;}

	.footer_linkBox {padding:0; background:#18264b; width:100%; border-bottom:1px solid rgba(255,255,255,.1);}
	.footer_linkBox>section>div:first-child {padding:14px 0;}
	.footer_linkBox a {color:#fff; font-size:12px;}
	.footer_linkBox div>a:first-child {margin-left:20px;}
	.footer_linkBox a:hover {color:yellow;}
	.familySite {width:200px; position:absolute; right:0; top:0; border-right:1px solid rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.1);}
	.familySite a {padding:16px 0 16px 20px; display:block;}
	.familySite>a {background:url(../images/common/ico_fam.png) 80% center no-repeat; color:#fff;}
	.familySite li a {background:#fff; border-top:1px solid #000; color:#000; display:block; width: 196px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.familySite li a:hover {color:#fff; background:#18264b;}
	.familySite>ul {visibility:hidden; position:absolute; width:100%; top:0; border:1px solid #000; border-top:0;}
	.familySite>ul>li {display:block;}

	/*컨텐츠*/
	.contents {width:100%; margin:0; padding:0;}
}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {

	/*footer*/
	footer {padding:30px 0; text-align:center;}
	footer .footer_linkBox div>a {display:block; text-align:center;}
	.footer_linkBox>section>div:first-child {text-align:center;}
	footer address>div:first-child {width:100%;}
	footer address>div.txt {margin:0 20px;}
	footer address>div.txt .person {display:inline-block; width:100%;}
	footer address>div.txt p {word-break:keep-all;}
	
	.familySite {visibility:hidden;}
	.footer_linkBox div>a:first-child {margin-left:0;}
}