@charset "utf-8";
/*
중단점 : 레이아웃이 바뀌는 지점

800px 이하 : 모바일 레이아웃
801px 부터~~~ : PC레이아웃
*/

/*중단점 상관 없이 모든 곳에서 동일하게 사용 하는 CSS*/

/*reset*/
*{margin:0; padding:0;}
li{list-style:none}
h2{ 	width:0; height:0; 	overflow:hidden; 	text-indent:-99999px; 	visibility:hidden; 	display:none; }
.clear::after{content:''; display:block; clear:both; width:0; height:0; visibility:hidden;}
img{border:0; vertical-align:top;}
a{text-decoration:none;}
a:link,a:visited,a:hover,a:active{color:#333;}
#menu{
	position:absolute;
	right:0; top:0;
}
#product ul li,#accessories ul li{
	position:relative;
	float:left;
}
#product ul li p,#accessories ul li p{position:absolute;}
#product ul li p{
	font-weight:bold;
	color:#fff;
	left:20px; top:10px;
}
#accessories ul li p{
	font-weight:bold;
	bottom:5%;
	text-align:center;
	width:100%;
}
#accessories>p{
	font-size:1.2em;
	padding:2%;
	font-weight:bold;
}

footer address{
	font-style:normal;
	color:#666;
	position:absolute;
}
#product ul li img,#accessories ul li img{width:100%;}
@media all and (min-width:801px){
/*PC용 CSS : 801px 이상*/
	.wrap{
		width:1200px; margin:0 auto;
		position:relative;
	}
	#main>p:nth-of-type(1){
		position:absolute;
		right:150px; top:50px;
		font-size:28px; font-weight:bold;
	}
	#main img{
		width:400px;
		margin-left:100px;
	}
	#main>p:nth-of-type(2){
		position:absolute;
		right:150px; top:250px;
		font-size:24px; font-weight:bold;
	}
	#product{margin-top:50px;}
	#product ul li{width:50%;}
	
	#accessories{margin-top:50px;}
	#accessories ul li{width:25%;}
	
	footer{padding:70px 0 50px;}
	footer address{left:100px; top:70px;}
}

@media all and (max-width:800px){
/*MOBILE 용 CSS : 800px이하 (cf. 요즘 디바이스 해상도가 많이 좋아져서.. 800정도면 뭐.. 아주 작은거에요..)*/
body{width:100%;}
	.wrap{
		width:100%; margin:0 auto;
		position:relative;
	}
	#main>p{
		text-align:center;
		font-weight:bold;
		font-size:1.2em;
		margin:5% 0;
	}
	#main img{
		width:90%;
		margin:5% 0;
	}
	#product{margin-top:10%;}
	#product ul li{width:100%;}
	
	#accessories{margin-top:10%;}
	#accessories ul li{width:50%;}
	
	footer{padding:10% 5% 10%;}
	footer address{font-size:0.9,em;}
}