@charset 'utf-8';

/* ���� */



/*layout*/
#wrap { min-width:1200px; }
.pc { display: block; }
.mobile { display: none; }

/*header*/
header { position: absolute; top:0; left: 0; width: 100%; height: 110px; z-index:100; opacity:.9999; }
header:hover { background:#ff0200; }
header:before { content:""; display: block; width: 100%; height: 1px; background:rgba(255,255,255,.2); position:absolute; bottom:0; left: 0; z-index:-1; }
header > div { width: 1200px; margin: 0 auto; }
header h1 { float: left; margin-top: 32px; }
header nav { float: right; margin-top: 45px; }
#gnb > li { float:left; width: 125px; text-align: center; padding-bottom:42px; position:relative; }
#gnb > li > a { font-size:20px; color: #fff; line-height: 100%; }
#gnb > li.on > a { color:#f9a94b; }
#gnb > li.on:before { content:""; display:block; width:100%; height:3px; background:#f7941e; position:absolute; bottom:0; left:0; }
#gnb .depth { display:none; position: absolute; top:65px; height: 67px; }
#gnb .depth > li { float: left; position:relative; line-height: 70px; padding:0 35px; position:relative; }
#gnb .depth > li:before { content:""; display: block; width: 1px; height: 14px; background:#636363; position: absolute; top:27px; left:0; }
#gnb .depth li:first-child { padding-left:0; }
#gnb .depth li:last-child { padding-right:0; }
#gnb .depth li:first-child:before { display: none; }
#gnb .depth > li a { color:#fff; font-size:16px; font-weight: 300; }
#gnb .depth > li.on > a { color:#f7941e; }
#gnb .depth > li ul { display:none; position: absolute; width: 490px; height: 70px; }	
#gnb .depth > li ul li { float:left; }
#gnb .depth > li ul li:before { content:""; display: block; width: 1px; height: 14px; background:#636363; float: left; margin:27px 35px 0; }
.depth2_bg { display:none; width: 100%; height: 67px; background: #ff0200; position: absolute; top:110px; left: 0; z-index:99;  }
.depth3_bg { display:none; width: 100%; height: 70px; background: #363636; position: absolute; top:177px; left: 0; z-index:99;  }

#gnb .depth.m1 {  display:none;width:355px; left:-110px; }
#gnb .depth.m1 > li ul { width:440px; left:-118px; }
#gnb .depth.m2 {  display:none; width:435px; left:-145px; }
#gnb .depth.m2 > li ul { width:460px; left:-70px; }
#gnb .depth.m3 { width:190px; left:-30px; }
#gnb .depth.m4 { width:435px; left:-340px; }




/* mobileCateogry*/
.mobileNav { display:none; height: 100%; width: 320px; left: -320px; top: 0; z-index: 9999; position: fixed; overflow-y: auto; overflow-x: visible; }
.ssm-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); display: none; z-index: 9995; }
.mobileNav .depth1box { position:absolute; left:0; height:100%; width:320px; }
.mobileNav .top { width:200px; height:99px; box-sizing:border-box; overflow:hidden; background:#fff; }
.mobileNav .top p { margin:30px 0 0 10px; width:45px; height:45px; border:0px solid #ccc; background:url(/images/icon_category_close.gif) no-repeat center; font-size:0; } 
#gnbM { width:200px;  border-top:1px solid #ccc; background:#fff; height: calc(100% - 100px); }
#gnbM > li { border-bottom:1px solid #ebebeb; }
#gnbM li {  position:relative; }
#gnbM > li > a { display: block; width: 100%; height: 50px; line-height: 50px; color: #333; font-size:18px; font-weight: 300; text-indent:10px; }
#gnbM > li.on > a { color:#fff; background: #ff0200000; }
#gnbM .depth { display: none; position:absolute; top: 10px; left: 200px; background: #ff0200000; width: 90px; height: 100%;  }
#gnbM .depth2 ul { display: none; position:absolute; top: 0; left: 90px; background: #252525; width: 90px; height: 100%; }
#gnbM li.on .depth,
#gnbM li.on .depth2 { display:block; }
#gnbM li.on .depth2.on ul { display: block; }
.depth2bg { display: none; width: 120px; height: 100%; position:absolute; top:0; left: 200px; background: #ff0200000; z-index:-1; }
.depth3bg { display: none; width: 120px; height: 100%; position:absolute; top:0; left: 230px; background: #252525; z-index:-1; }

#gnbM > li > ul a { font-size:14px; display: block; width: 100%; height: 30px; line-height: 30px; position: relative; text-indent:15px; color: #c2c2c2; }
#gnbM > li > ul a:before { content:""; display: none; width: 0; height: 0; border-top: 3px solid transparent; border-left: 6px solid #fff; border-bottom: 3px solid transparent; position: absolute; top: 10px; left: 5px; }

#gnbM > li > ul > li.on > a { color: #fff; }
#gnbM > li > ul > li.on > a:before { display: block; }

#gnbM  .depth2 li a { line-height: 110%; text-indent:0; padding-left:10px; }
#gnbM  .depth2 li > a { color: #d7d7d7; }
#gnbM  .depth2 li.on > a { color: #ff0200000; }
#gnbM  .depth2 li.on > a:before { border-left-color: #ff0200000; }


/*footer*/
footer { width: 100%; padding: 40px 0 30px; background: #111; overflow: hidden; }
footer > article { width: 1200px; margin:0 auto; overflow: hidden; }
footer h2 { float: left; margin:8px 0 0 49px;  }
footer > article > div { float: right; width: 980px; position: relative; }
footer dl { font-size:14px; color: #d1d2d4; overflow: hidden; }
footer dt { font-weight:500; clear:both;  }
footer dd { margin: 7px 20px 0 0; float:left; }
footer p { margin-top: 20px; font-size:13px; color: #909090; font-weight: 300;  }
footer a.link { display: block; position: absolute; top: 24px; right: 20px; font-size:14px; font-weight: 300; color: #fff; border-bottom:1px solid #d7d7d7; padding-bottom: 3px;}


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

	/*layout*/
	#wrap { min-width:100%; }
	.pc { display: none; }
	.mobile { display: block; }

	/*header*/
	header, header:hover { background: none; height: 100px;  }
	header > div { width: 100%; }
	header h1 { float: left; margin: 25px 0 0 10px; }
	header nav { float: right; margin: 25px 10px 0 0; }
	#gnb { display: none; }
	header .cateM { width: 47px; height: 47px; border:0px solid rgba(255,255,255,.3); background:url(/images/icon_category.png) no-repeat center; text-indent:-9999px;  }


	
	/*footer*/
	footer { padding: 20px 0 0; text-align: center; }
	footer > article { width: 100%; }
	footer h2 { float:none; margin:0;  }
	footer > article > div { float: none; width: 100%; border-top:1px solid #4d4d4d; margin-top: 25px; padding-top:20px; }
	footer dl { border-bottom:1px solid #4d4d4d; overflow: hidden; padding-bottom:20px; }
	footer dt { padding-bottom: 10px; }
	footer dd { margin: 0 15px 0 0; float:none; display:inline-block; }
	footer p { margin:15px 0 20px; }
	footer a.link { display:inline-block; position: static; margin-top: 10px;}


}

@media screen and (max-width:650px) {
	/*header*/
	header, header:hover { height: 80px;  }
	header h1 { margin: 20px 0 0 10px; }
	header h1 img { height: 40px; }
	header nav { float: right; margin: 20px 10px 0 0; }
	header .cateM { width: 40px; height: 40px; background-size:18px; }

	/* mobileCateogry*/
	.mobileNav .top { height:79px; }
	.mobileNav .top p { margin:19px 0 0 10px; width:40px; height:40px; background-size:14px; } 
	
	/*footer*/
	footer { padding: 20px 0 0; text-align: center; }
	footer > article { width: 100%; }
	footer h2 { float:none; margin:0;  }
	footer > article > div { float: none; width: 100%; border-top:1px solid #4d4d4d; margin-top: 25px; padding-top:20px; }
	footer dl { border-bottom:1px solid #4d4d4d; overflow: hidden; padding-bottom:20px; }
	footer dt { padding-bottom: 10px; }
	footer dd { margin: 0 15px 0 0; float:none; display:inline-block; }
	footer p { margin:15px 0 20px; }

}