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

/* reset */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { font:12px/1.6 'Poiret One'; color:#555; } 

/*레이아웃*/
header { position:fixed; width:15%; height:100%; background:#fff; top:0px; left:0px; transition:all 0.5s;}
nav { position:relative; width:85%; height:35px; background:#212121; margin-left:15%; transition:all 0.5s;}
section { width:85%; position:relative; margin-left:15%;}
article { float:left; height:260px; transition:all 0.5s; animation:scale 1s 1;}
article:nth-child(1) { width:60%; height:520px; background:#ddd;}
article:nth-child(2) { width:40%; background:#ccc;}
article:nth-child(3) { width:20%; background:#bbb;}
article:nth-child(4) { width:20%; background:#aaa;}
article:nth-child(5) { width:20%; background:#999;}
article:nth-child(6) { width:40%; background:#888;}
article:nth-child(7) { width:20%; background:#777;}
article:nth-child(8) { width:20%; background:#666;}
article:nth-child(9) { width:40%; background:#555;}
article:nth-child(10) { width:20%;	background:#444;}
article:nth-child(11) { width:20%; background:#333;}
article:nth-child(12) { width:20%;	background:#222;}
@keyframes scale {
	0% { transform:scale(0); }	
	100% { transform:scale(1); }
}
article>div { position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer; }

/* header 컨텐츠 */
header h1 { width:180px; height:136px; background:url(../img/logo1.png) no-repeat 0px 0px; background-size:contain; position:absolute; top:70px;	left:50%; margin-left:-90px;	text-indent:-99999px;}
#gnb { position:absolute; top:300px; right:57px;}
#gnb a { display:block; padding:8px 30px;	font-size:17px; font-weight:bold; color:#555; text-align:left; line-height:1.8; transition:all .5s;}
#gnb a:hover { color:skyblue;}
#gnb a i { margin-right:13px;}
.snsSet { width:90px;	height:47px;	position:absolute; bottom:50px; right:50%; margin-right:-45px;}
.snsSet a { float:left;}

/*nav*/
nav a:nth-child(1) {	position:absolute; top:5px;	left:10px;}
nav a:nth-child(2) {	position:absolute; top:5px;	left:150px;}
nav a:nth-child(3) {	position:absolute; top:5px;	right:90px;}
nav a:nth-child(4) {	position:absolute; top:5px;	right:10px;}

article>div { position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer; }

/* 배경이미지 삽입 - 과일 이미지로 변경 */
article .bg1 { background-image:url(../img/267020dde2de1.jpg);}
article .bg2 { background-image:url(../img/7Jik66CM7KeA_7I2464Sk7J28_01.png);}
article .bg3 { background-image:url(../img/image_readtop_2018_437247_15312913213383859.jpeg);}
article .bg4 { background-image:url(../img/fruit4.jpg);}
article .bg5 { background-image:url(../img/fruit5.jpg);}
article .bg6 { background-image:url(../img/fruit6.jpg);}
article .bg7 { background-image:url(../img/fruit7.jpg);}

/* 이미지박스 */
article .bg { background-size:cover; background-position:center center; }
article .bg span { font-size:60px; color:#fff;	position:absolute; bottom:0px; right:20px; transform:scale(10); opacity:0;	transition:all 0.6s;}
article .bg1 span { font-size:170px; bottom:-76px;	right:-6px; opacity:1; transform:scale(1); transition:all 0.5s;}

/*이미지박스 호버효과*/
article:hover .bg span { opacity:1; transform:scale(1);}
article .bg1:hover span { transform:rotateY(360deg); color:#222; }

/* 텍스트박스 */
article .txt { color:#666; background:#fff; box-sizing:border-box; padding:40px 30px; transition:all 1s;}
article:nth-child(3) .txt { background:#bff7fa;}
article:nth-child(11) .txt { background:#e3f1fb;}
article .txt i { font-size:300px; color:#b2effc; opacity:0; position:absolute; bottom:-70px; right:-200px; transition:all 0.7s;}
article:nth-child(3) .txt i {	position:absolute; bottom:-20px; right:-15px; font-size:200px; color:#fff; opacity:0.7;}
article .txt strong { font-size:30px;	font-weight:normal; line-height:1.6;	color:#444; margin-bottom:20px; transition:all 1s;}

/*텍스트박스 호버효과*/
article:hover .txt { background:#6ce2fb;	color:#fff;}
article:hover .txt i { right:0px; opacity:0.5;}
article:hover .txt strong { color:#fff;}

/* 미디어쿼리들은 원본과 동일하게 유지 */
@media screen and (min-width:1280px) and (max-width:1599px) {  
	/*... 동일 ...*/
}
@media screen and (min-width:1024px) and (max-width:1279px) {  
	/*... 동일 ...*/
}
@media screen and (min-width:780px) and (max-width:1023px) {  
	/*... 동일 ...*/
}
@media screen and (min-width:640px) and (max-width:779px) {  
	/*... 동일 ...*/
}
@media screen and (min-width:480px) and (max-width:639px) {  
	/*... 동일 ...*/
}
@media screen and (max-width:479px){
	/*... 동일 ...*/
}