@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Poiret+One);

/*초기화*/
/*html , body , div , h2 , h3 , p , a , li { margin : 0; padding : 0; }*/

*{margin : 0; padding : 0;}
ol,ul,li{list-style : none;}
a{outline : 0; text-decoration : none; color : #555;}
img{vertical-align : bottom; border : 0;}
/*인라인 요소를 수직 정렬을 할때 사용되는 속성*/
/*작업도중 박스와 이미지 사이에 알 수 없는 여백이 발생할때 사용하세요.*/
.clearfix{display : block; clear : both;}


/*
-반응형웹 제작시 참고사항-
0. 해상도 별로 디자인 시안이 있어야함.
1. width : % 로 제작
2. px : 이미지(썸네일,배너,로고등)
*이미지로 처리해줄경우 해상도에 맞는 비율로 따로 제작 할것.
3. 디폴트 : 가장 큰 화면을 기준으로 제작
*/


body{font : 14px/1.6 'Poiret One'; color : #555;}



/********************************레이아웃*****************************/
/****************************와이드 1600~1920**************************/

header{
	position : relative;
	width : 100%; 
	height : 80px;
	background-color : #fff; 
	top : 0; left : 0;
	transition : all 0.5s; /*transition 을 왜 넣었을까?*/
}

nav{
	position : relative;
	width : 100%;
	height : 35px;
	background-color : #212121;
	top : 0; left : 0;
	transition : all 0.5;
	text-align : center;
}

/*************************12개의 컨텐츠*****************************/

section{
	width : 1700px;
	position : relative;
	margin : 0 auto;	
	transform : scale(1);
}


article{
	float : left;
	height : 300px;
	transition : all 0.5s;
	animation : scale 1s 1;
	/*
	scale : animation-name;
	1s : duration;
	1 : 반복횟수
	*/
} 

/*맨아래 게임모음-컨텐츠11~30*/
.games{
	transform : scale(1);
	transition : all 0.8s;
	z-index : 1;
}

.games:hover{
	transform : scale(1.2) translateY(-10px);
	z-index : 10;
}


article:nth-child(1){width : 100%; height : 600px; background-color : #ddd;} /*1행*/

article:nth-child(2){width : 40%; height : 600px;background-color : #ccc;}
article:nth-child(3){width : 30%; background-color : #bbb;}
article:nth-child(4){width : 30%; background-color : #aaa;} 
article:nth-child(5){width : 30%; background-color : #999;}
article:nth-child(6){width : 30%; background-color : #888;} /*2행*/

article:nth-child(7){width : 30%; background-color : #777;} 
article:nth-child(8){width : 20%; background-color : #666;}
article:nth-child(9){width : 20%; background-color : #555;}
article:nth-child(10){width : 30%; background-color : #444;} /*3행*/

article:nth-child(11){width : 10%; height : 150px; background-color : #333;} 
article:nth-child(12){width : 10%; height : 150px; background-color : #222;} 
article:nth-child(13){width : 10%; height : 150px; background-color : #111;}
article:nth-child(14){width : 10%; height : 150px; background-color : #222;}
article:nth-child(15){width : 10%; height : 150px; background-color : #333;} 
article:nth-child(16){width : 10%; height : 150px; background-color : #222;} 
article:nth-child(17){width : 10%; height : 150px; background-color : #111;} 
article:nth-child(18){width : 10%; height : 150px; background-color : #222;} 
article:nth-child(19){width : 10%; height : 150px; background-color : #333;} 
article:nth-child(20){width : 10%; height : 150px; background-color : #222;} /*4행*/

article:nth-child(21){width : 10%; height : 150px; background-color : #333;} 
article:nth-child(22){width : 10%; height : 150px; background-color : #222;}
article:nth-child(23){width : 10%; height : 150px; background-color : #111;} 
article:nth-child(24){width : 10%; height : 150px; background-color : #222;} 
article:nth-child(25){width : 10%; height : 150px; background-color : #333;} 
article:nth-child(26){width : 10%; height : 150px; background-color : #222;} 
article:nth-child(27){width : 10%; height : 150px; background-color : #111;} 
article:nth-child(28){width : 10%; height : 150px; background-color : #222;} 
article:nth-child(29){width : 10%; height : 150px; background-color : #333;} 
article:nth-child(30){width : 10%; height : 150px; background-color : #222;} /*5행*/

/*
animation keyframes
(구문)
@keyframes 이름 {}
IE12+
*/

@keyframes scale{
/*프레임 나누기(%)*/
	0%{transform : scale(0);}
	100%{transform : scale(1);}
	/*1s 1*/
}

article > div{
	position : relative;
	width : 100%;
	height : 100%; /*부모요소에 height 를 주었기 때문에 자손요소에 height : 100% 가 적용된것*/
	overflow : hidden;
	cursor : pointer;
}




footer{
	position : relative;
	width : 100%; 
	height : 80px;
	background-color : #fff; 
	bottom : 0; left : 0;
	transition : all 0.5s; /*transition 을 왜 넣었을까?*/
	clear : both;
}





/*****************************세부 디자인*****************************************/
/******************************배경디자인*****************************************/

article .bg1{background-image:url(../img/젤다의전설.jpeg)}
article .bg2{background-image:url(../img/아미보.png)}
article .bg3{background-image:url(../img/new3ds.png)}
article .bg4{background-image:url(../img/wiiu.jpg)}
article .bg5{background-image:url(../img/요시.png)}
article .bg6{background-image:url(../img/별의커비.jpg)}
article .bg7{background-image:url(../img/게임1.jpg)}
article .bg8{background-image:url(../img/게임2.jpg)}
article .bg9{background-image:url(../img/게임3.jpg)}
article .bg10{background-image:url(../img/게임4.jpg)}
article .bg11{background-image:url(../img/게임5.jpg)}
article .bg12{background-image:url(../img/게임6.jpg)}
article .bg13{background-image:url(../img/게임7.jpg)}
article .bg14{background-image:url(../img/게임8.jpg)}
article .bg15{background-image:url(../img/게임9.jpg)}
article .bg16{background-image:url(../img/게임10.jpg)}
article .bg17{background-image:url(../img/게임11.jpg)}
article .bg18{background-image:url(../img/게임12.jpg)}
article .bg19{background-image:url(../img/게임13.jpg)}
article .bg20{background-image:url(../img/게임14.jpg)}
article .bg21{background-image:url(../img/게임15.jpg)}
article .bg22{background-image:url(../img/게임16.jpg)}
article .bg23{background-image:url(../img/게임17.jpg)}
article .bg24{background-image:url(../img/게임18.jpg)}
article .bg25{background-image:url(../img/게임19.jpg)}
article .bg26{background-image:url(../img/게임20.jpg)}





/*header*/
/*로고*/
header h1{
	width : 200px; 
	height : 40px;
	background : url(../img/닌텐도로고.jpg) no-repeat 0px 0px;
	/*
	backgorund-image
	background-size
	*/
	background-size : contain;
	/*
		contain : 작은축을 기준으로 확대
		cover : 큰 축을 기준으로 확대
	*/
	position : absolute;
	top : 20px;
	/*고정형 레이아웃*/

	left : 100px;
	margin-left : 0px;


	/*text*/
	text-indent : -9999px; /*px , em 단위를 꼭 써주어야함*/
}




/*gnb*/
#gnb{
	position : absolute;
	top : 20px;
	right : 100px;
}

#gnb a{
	display : block; /* a 태그에는 디스플레이를 먼저 넣는 습관 */
	padding : 8px 30px;
	font-size : 17px; font-weight : 600; /*100~900   실무에서 600을 많이 사용함, bold는 800정도*/
	color : #555; 
	text-align : left;
	line-height : 1.8; /*실무에서 주로 사용하는 수치1.5~1.8*/
	transition : all 0.5s;	
}

#gnb li{float : left;}


#gnb a:hover{color : skyblue;}


#gnb a i{
	margin-right : 13px;
}


/*gnb2*/
#gnb2{
	position : absolute;
	top : 20px;
	right : 200px;
}

#gnb2 a{
	display : block; /* a 태그에는 디스플레이를 먼저 넣는 습관 */
	padding : 8px 30px;
	font-size : 17px; font-weight : 600; /*100~900   실무에서 600을 많이 사용함, bold는 800정도*/
	color : #555; 
	text-align : left;
	line-height : 1.8; /*실무에서 주로 사용하는 수치1.5~1.8*/
	transition : all 0.5s;	
}

#gnb2 li{float : left;}


#gnb2 a:hover{color : skyblue;}


#gnb2 a i{
	margin-right : 13px;
}


/*sns*/

.snsSet{
	width : 90px; 
	height : 47px; 
	position : absolute; 
	bottom : 20px;
	/*고정형*/
	right : 80px;
}

.snsSet a{float : left; margin-bottom : 7px;}


/*nav*/
nav a{
	font-size : 18px;
	line-height : 35px;
	width : 200px;
	height : 35px;
	color : white;
	display : inline-block;
}

nav a:hover{
	color : black;
	background-color : white;
}


/*컨텐츠 이미지*/

article .bg{
	background-size : cover;	
	background-position : center center;
}


article .bg span{
	font-size : 80px; 
	color : #f3f3f3; 
	position : absolute;
	bottom : 0px;
	right : 20px;
	transform : scale(10);
	opacity : 0;
	transition : all 0.6s;
}
article:hover .bg span{
	opacity : 1;
	transform : scale(1);
}


article .bg1{perspective:700px;} /*로테이트를 위한 깊이값*/
/*컨텐츠 이미지 중에서 1번째*/

article .bg1 span{
	font-size : 170px;
	bottom : -65px;
	right : -6px;
	opacity : 0.2;
	transform : scale(1);
	transition : all 2s;
}

article .bg1:hover span{
	opacity : 0.8;
	transform : rotateY(360deg); color : #fff; /*원본 : 표준*/
	/*벤더프리픽스의 첫번째 방법-접두어 붙이기*/
	/*-moz-transform : rotateY(30deg); color : #222; /* /* -moz- 파이어폭스*/
	/*-webkit-transform : rotateY(30deg); color : #222; */ /* -webkit- 사파리 크롬*/
	/*-o-transform : rotateY(30deg); color : #222; */ /* -o- 오페라*/
	/*-ms-transform : rotateY(30deg); color : #222; */ /* -ms- IE*/ 
}


/*텍스트박스*/
article .txt{
	color : #666;
	background : #fff;
	box-sizing : border-box;
	/*box-sizing : border , padding 박스영역에 추가되는 영역(면적)에 상관없이 
	초기 상태를 유지하는 속성 IE9+*/

	padding : 40px 30px;
	transition : all 1s;
}


/*
	@transform @
	@벤더프리픽스@
	: css3 속성이 브라우저 상위버전부터 적용가능하기에 좀 더 낮은 버전부터 
	폭넓게 사용할 수 있게 도와주는 기능.

	css3 는 아직 표준안이 없습니다.


	@벤더프리픽스의 2가지 방법@

	1. 접두어 붙이는 방법
	-간단한 css3 속성에 적용.
	(-moz-transform :  파이어폭스 , -webkit-transform : 사파리 크롬 , 
	-o-transform : 오페라 , -ms-transform : IE)
	
	2. 벤더프리픽스를 해주는 플러그인을 다운 받는 것.
	(벤더프리픽스 플러그인 다운 https://leaverou.github.io/prefixfree/)
*/

article:nth-child(3) .txt{
	background : #fcfcfc;
}


article:nth-child(6) .txt{
	background : #6ce3fb;
	color : #fff;
}

article:nth-child(8) .txt{
	background : #fcfcfc;
	
}


/*부트스트랩 CDN의 아이콘은 폰트 속성을 변경하여 적용할 수 있다.*/
article .txt i{
	font-size : 200px; 
	color : #b2effc; 
	opacity : 0;
	position : absolute;
	bottom : -50px;
	right : -100px;
	transition : all 0.7s;
}

/*article:nth-child(3) .txt i{
	position : absolute;
	bottom : -20px;
	right : -15px;
	font-size : 200px;
	color : #fff;
	opacity : 0.7;
}*/

/*텍스트 박스 안에 있는 제목 <strong>*/
article .txt strong{
	font-size : 30px;
	font-weight : normal;
	line-height : 1.6;
	color : #444;
	margin-bottom : 20px;
	transition : all 0.7s;
}

/*텍스트 박스에 마우스를 올렸을 때 : hover*/
article:hover .txt{background : #6ce2fb; color : #fff;}
article:hover .txt i{right : 0; opacity : 0.5; transform : translateX(0);}
article:hover .txt strong{color : #fff;}

/*******************1600px 이상 Default Page 완료*****************/




/**********해상도 1280px~1599px 의 노트북 & 구형 모니터**************/

/*미디어 쿼리*/
@media screen and (min-width:1280px) and (max-width:1599px) {

	/*공통레이아웃 : 커다란 레이아웃 구조 변경시*/
	header{
		position : relative;
		width : 100%;
		height : 80px;
	}

	nav{width : 100%; margin-left : 0%;}

	section{width : 100%; margin-left : 0px;}

	/*세부 레이아웃 : 공토레이아웃 내부에 있는 디자인 요소 변경*/
	/*위 해상도에서는 헤더 부분의 정렬 position 이 변경됨으로 안에 들어가는 
	로고,메뉴 등의 위치를 다시 수정해 줘야 합니다.*/

	header h1{
		width : 200px;
		height : 40px;
		background-image : url(../img/닌텐도로고.jpg);
		top : 20px; left : 20px; 
		margin-left : 0px;
	}

	nav a{
	font-size : 18px;
	line-height : 35px;
	width : 160px;
	height : 35px;
	color : white;
	display : inline-block;
}

	#gnb{top : 20px; right : 100px; /*공통된 속성은 상속된다.*/}

	#gnb li{float : left;}

	.snsSet{bottom : 20px; right : 80px;}

}


/*****************태블릿 1024px~1279px**************/

/*미디어 쿼리*/
@media screen and (min-width:1024px) and (max-width:1279px) {
	
	/*레이아웃*/
	header{position : relative; width : 100%; height : 80px; }
	nav{width : 100%; margin-left : 0%;}
	section{width : 100%; margin-left : 0px;}

	/*컨텐츠 (article) 영역 레이아웃 변경 
	각 행마다 100%를 맞추는 것에 유의하여 주세요.*/

	article:nth-child(1){width : 100%; height : 400px;} /*1행*/
	article:nth-child(2){width : 25%; display : none;}
	article:nth-child(3){width : 20%;} 
	article:nth-child(4){width : 30%;}
	article:nth-child(5){width : 30%;}
	article:nth-child(6){width : 20%;} /*2행*/
	article:nth-child(7){width : 35%;}
	article:nth-child(8){width : 15%;}
	article:nth-child(9){width : 15%;} 
	article:nth-child(10){width : 35%;} /*3행*/


	/*header 컨텐츠 세부*/
	header h1{
	width : 200px; height : 40px; 
	background-image : url(../img/닌텐도로고.jpg);
	top : 20px; left : 20px;
	margin-left : 0px;
	}

	nav a{width : 120px;}

	#gnb{top : 20px; right : 30px; /*공통된 속성은 상속된다.*/}

	#gnb li{float : left;}

	/*불필요한 영역제거*/
	.snsSet{display : ;}

}/*@media 1024~1279px 해상도 종료*/




/*********************노트형 스마트폰***************/
@media screen and (min-width:780px) and (max-width:1023px) {

	/*공통레이아웃*/
	header{position : relative; width : 100%; height : 80px;}
	nav{width : 100%; margin-left : 0%;}
	section{width : 100%; margin-left : 0px;}

	/*스마트폰으로 들어오면서 해상도가 작아졌습니다.
		web은 사용자 관점에서 생각하는 UI 기획을 함께 생각하여야 합니다.
	*/
	article:nth-child(1){width : 100%; height : 400px;}
	article:nth-child(2){width : 66.666%;}
	article:nth-child(3){width : 33.333%; display : none;}
	article:nth-child(4){width : 33.333%; }
	article:nth-child(5){width : 33.333%;}
	article:nth-child(6){width : 66.666%; display : none;}
	article:nth-child(7){width : 30%;}
	article:nth-child(8){width : 20%;}
	article:nth-child(9){width : 20%;}
	article:nth-child(10){width : 30%;}


	/*세부 디자인 변경*/

	/*header 컨텐츠 세부*/
	header h1{
	width : 200px; height : 40px; 
	background-image : url(../img/닌텐도로고.jpg);
	top : 20px; left : 20px;
	margin-left : 0px;
	}

	nav a{width : 108px;}

	#gnb{top : 20px; right : 30px; /*공통된 속성은 상속된다.*/}
	#gnb li{float : left;}
	#gnb a{padding : 8px 0px 8px 10px;}
	
	#gnb2{top : 20px; right : 30px;}

	/*불필요한 영역제거*/
	.snsSet{display : none;}

}/*@media 780~1023px 해상도 종료*/



/**************640~779px 해상도 2열 구조 1행 2열 50%*********************/

@media screen and (min-width:640px) and (max-width:779px) {

	/*공통레이아웃*/
	header{position : relative; width : 100%; height : 80px;}
	nav{width : 100%; margin-left : 0%;}
	section{width : 100%; margin-left : 0px;}

	/*스마트폰으로 들어오면서 해상도가 작아졌습니다.
		web은 사용자 관점에서 생각하는 UI 기획을 함께 생각하여야 합니다.
	*/

	article:nth-child(1){width : 100%; height : 400px;}
	article:nth-child(2){width : 100%; height : 350px;}
	article:nth-child(3){width : 50%;}
	article:nth-child(4){width : 50%;}
	article:nth-child(5){width : 50%;}
	article:nth-child(6){width : 50%;}
	article:nth-child(7){width : 50%;}
	article:nth-child(8){width : 50%;}
	article:nth-child(9){width : 50%;}
	article:nth-child(10){width : 50%;}


	/*세부 디자인 변경*/

	/*header 컨텐츠 세부*/
	header h1{
	width : 200px; height : 40px; 
	background-image : url(../img/닌텐도로고.jpg);
	top : 20px; left : 20px;
	margin-left : 0px;
	}
	

	#gnb{top :20px; right : 10px;/*공통된 속성은 상속된다.*/}
	#gnb li{float : left;}
	#gnb a{padding : 8px 0px 8px 10px;}

	#gnb2{top : 20px; right : 20px;}
	#gnb2 a{padding : 8px 20px;}
	
	
	/*불필요한 영역제거*/
	.snsSet{display : none;}
	article .txt em{display : none;}
	nav{display : none;}

}/*@media 640~799px 해상도 종료*/




/**************480~639px 해상도 2열 구조 1행 2열 50%*********************/

@media screen and (min-width:480px) and (max-width:639px) {

	/*공통레이아웃*/
	header{position : relative; width : 100%; height : 130px;}
	nav{width : 100%; margin-left : 0%;}
	section{width : 100%; margin-left : 0px;}

	/*스마트폰으로 들어오면서 해상도가 작아졌습니다.
		web은 사용자 관점에서 생각하는 UI 기획을 함께 생각하여야 합니다.
	*/
	article{height : 150px;}

	article:nth-child(1){width : 100%; height : 400px;}
	article:nth-child(2){width : 100%; height : 350px;}
	article:nth-child(3){width : 50%;}
	article:nth-child(4){width : 50%;}
	article:nth-child(5){width : 50%;}
	article:nth-child(6){width : 50%;}
	article:nth-child(7){width : 50%;}
	article:nth-child(8){width : 50%;}
	article:nth-child(9){width : 50%;}
	article:nth-child(10){width : 50%;}


	/*세부 디자인 변경*/

	/*header 컨텐츠 세부*/
	header h1{
	position : relative;
	width : 200px; height : 40px; 
	background-image : url(../img/닌텐도로고.jpg);
	top : 20px; left : 0px;
	margin : 0 auto;
	}

	#gnb{width : 100%; height : 40px; top : 75px; right : 0px; /*공통된 속성은 상속된다.*/}
	#gnb li{float : right; margin-right : 10px;}
	#gnb li a{display : block; padding : 4px; text-align : center; box-sizing : border-box;}

	#gnb2{top : 20px; right : 10px;}
	#gnb2 a{padding : 8px 8px;}
	
	article:nth-child(11){width : 20%; height : 100px;} 
	article:nth-child(12){width : 20%; height : 100px;} 
	article:nth-child(13){width : 20%; height : 100px;}
	article:nth-child(14){width : 20%; height : 100px;}
	article:nth-child(15){width : 20%; height : 100px;} 
	article:nth-child(16){width : 20%; height : 100px;} 
	article:nth-child(17){width : 20%; height : 100px;} 
	article:nth-child(18){width : 20%; height : 100px;} 
	article:nth-child(19){width : 20%; height : 100px;} 
	article:nth-child(20){width : 20%; height : 100px;}

	article:nth-child(21){display : none;} 
	article:nth-child(22){display : none;}
	article:nth-child(23){display : none;} 
	article:nth-child(24){display : none;} 
	article:nth-child(25){display : none;} 
	article:nth-child(26){display : none;} 
	article:nth-child(27){display : none;} 
	article:nth-child(28){display : none;} 
	article:nth-child(29){display : none;} 
	article:nth-child(30){display : none;} 
	


	
	/*사이즈와 위치 조정*/
	/*Maldives 사이즈와 위치 조정*/
	article .bg1 span{font-size : 120px; bottom : -50px; right : -6px;}
	article .txt strong{font-size : 25px;}

	/*불필요한 영역제거*/
	.snsSet{display : none;}
	nav{display : none;}
	article .txt em{display : none;}

}/*@media 481~639px 해상도 종료*/



/**************480px 이하 해상도*********************/

@media screen and (min-width:0px) and (max-width:480px) {

	header{
		position : fixed; 
		width : 100%;
		height : 40px; 
		background-color : transparent;/*투명*/
		z-index : 5;
	}
	

	#gnb{display : none;}
	#gnb2{display :none;}
	
	section{width : 100%; height : 100%; margin-left : 0px; position : fixed; z-index : 4;}
	
	article{display : none; }

	article:nth-child(1){
			display : block;
			position : fixed;
			width : 100%;
			height : 100%; 
	}/*현재 background-size : cover 상속됨*/
	
	article:nth-child(1) span{display : none;}

	footer{display : none;}
	
	/*로고 가운데 고정*/
	header h1{
		top : 20px;
		width : 140px;
		margin-left : -70px;
		left : 50%;
	}

	/*nav 위치 조정 및 디자인 변경*/

	nav{background : transparent; position : fixed; width : 250px; 
		top : 140px; left : 50%; margin-left : -125px; z-index : 6;}/*가운데 고정*/

	nav a{width : 100%; background : #000; box-sizing : border-box;
		margin : 8px 0; border-radius : 10px; opacity : 0.7; color : #fff; transition : all 0.2s}
	
	nav a:hover{opacity : 1; transform : scale(1.1);}

}  /*@media 480px 이하 해상도 종료*/