@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;font-family:'Arial'; background:#f7f7f7;} /*background 추가 font-family:'Arial';*/ 



	
	
	
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:#686868; margin-left:15%; transition:all 0.5s;} /*background:#212121;에서 변경*/
nav a {display:block; width:200px; height:22px; line-height:22px; color:#fff; font-family:'Arial'; font-size:12px;}
nav a:hover {opacity:0.8;}/*추가*/
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 { cursor:pointer; width:180px; height:136px; background:url(../img/logo2_1.png) no-repeat 0px 0px; /*background-size:contain;*/ position:absolute; top:70px;	left:50%; margin-left:-90px;	text-indent:-99999px;}/*url(../img/logo1.png)에서 변경 cursor:pointer;추가*/
#gnb { position:absolute; /*top:300px;*/top:200px; right:57px;} /*background:url(../img/logo1.png)에서 변경 */
#gnb a { display:block; padding:8px 30px; font-size:15px; font-weight:bold; color:#555; text-align:left; line-height:1.8; transition:all .5s;}
#gnb a:hover { opacity:0.5;/*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:21px;/*left:10px;*/}
nav a:nth-child(2) {	position:absolute; top:5px;	left:150px;}
nav a:nth-child(3) {	position:absolute; top:5px;	left:290px;/*right:90px;*/}
nav a:nth-child(4) {	position:absolute; top:5px;	left:430px;/*right:10px;*/}

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

/* 배경이미지 삽입*/
article .bg1 { background-image:url(../img/m2.jpg);} /*pic1에서변경*/
article .bg2 { background-image:url(../img/m3.jpg);}/*pic2에서변경*/
article .bg3 { background-image:url(../img/m6.jpg);}/*pic3서변경*/
article .bg4 { background-image:url(../img/m5.jpg);}/*pic4에서변경*/
article .bg5 { background-image:url(../img/m7.jpg);}/*pic5에서변경*/
article .bg6 { background-image:url(../img/m8.jpg);}/*pic6에서변경*/
article .bg7 { background-image:url(../img/m10.jpg);}/*pic7에서변경*/

/* 이미지박스 */
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:#f7f6f6;/*background:#fff;*/ box-sizing:border-box; padding:40px 30px; transition:all 1s;}
article:nth-child(2) {font-family:'Arial'; background:#f7f6f6; } /*추가*/
.txt_1 {font-family:CommercialScript BT,Agency FB,sans-serif; font-size:50px; padding-left:50px; padding-top:55px;/*background:url(../img/ppp.png) ;*/}/*추가*/
.txt_1 strong {font-size:50px;}/*추가*/
.txt_1 a {display:block; background:#eeabb1; width:55px; /*height:20px; line-height:20px;*/ font-size:12px; padding:5px; transition:all .5s;
/*font-weight:bold;*//*추가*/
/*border:1px solid #fff;*/ border-radius:5px; color:#fff;}/*추가*/
article:nth-child(3) .txt { background:#eeabb1;/*background:#bff7fa;*/}
article:nth-child(3) .txt strong {font-family:'Agency FB';color:#fff; padding-left:30px;}/*추가*/
article:nth-child(3) .txt p {color:#fff; padding-left:30px; font-style:none;}/*추가*/
article:nth-child(6) .txt { background:#dae6d5;/*background:#bff7fa;*/}/*추가*/
article:nth-child(6) .txt strong {font-family:'Agency FB';color:#fff; padding-left:30px;}/*추가*/
article:nth-child(6) .txt p {color:#fff; padding-left:30px; font-style:none;}/*추가*/
article:nth-child(8) .txt { background:#686868;/*background:#bff7fa;*/}/*추가*/
article:nth-child(8) .txt strong {font-family:'Agency FB';color:#fff; padding-left:30px;}/*추가*/
article:nth-child(8) .txt p {color:#fff; padding-left:30px; font-style:none;}/*추가*/
article:nth-child(11) .txt { background:#f7f6f6;/*background:#e3f1fb;*/}
article:nth-child(11) .txt strong {font-family:'Agency FB';color:#555152; padding-left:30px;}/*추가*/
article:nth-child(11) .txt p {color:#555152; padding-left:30px; font-style:none;}/*추가*/
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:nth-child(2):hover {background:#ebe9e9;/*background:#6ce2fb;color:#848383;*/}/*추가*/
article:nth-child(2) a:hover {background:#efc5c9; /*border:1px solid #efc5c9;*/  }/*추가*/
article:hover .txt { background:#e1e0e0;/*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)*/
	
	/*레이아웃*/
	header { position:relative; width:100%; height:80px;}
	nav { width:100%; margin-left:0%;}		
	section { width:100%; margin-left:0px;}
	
	/* header 컨텐츠 */
	header h1 { width:200px; height:40px; background-image:url(../img/logo2_1.png); top:20px; left:20px; margin-left:0px;} /*url(../img/logo2.png)에서 변경*/
	#gnb { /*top:20px;*/ top:25px; right:200px;}	
	#gnb li { float:left;}
	.snsSet { bottom:20px; right:80px;}
	
}
@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:nth-child(1) { width:75%;}	
	article:nth-child(2) { width:25%;}	
	article:nth-child(3) { width:25%;}	
	article:nth-child(4) { width:25%;}	
	article:nth-child(5) { width:25%;}	
	article:nth-child(6) { width:50%;}	
	article:nth-child(7) { width:50%;}	
	article:nth-child(8) { width:25%;}	
	article:nth-child(9) { width:25%;}	
	article:nth-child(10) { width:50%;}	
	article:nth-child(11) { width:25%;}	
	article:nth-child(12) { width:25%;}
	
	/* header 컨텐츠 */
	header h1 { width:200px;	height:40px;	background-image:url(../img/logo2_1.png);	top:20px;	left:20px;	margin-left:0px;}/*url(../img/logo2.png)에서 변경*/
	#gnb { /*top:20px;*/ top:25px; right:30px;}	
	#gnb li { float:left;}	
	.snsSet {	display:none;}
}
@media screen and (min-width:780px) and (max-width:1023px) {  
	
	/*레이아웃*/
	header { position:relative; width:100%; height:80px;}
	nav { position:relative; width:100%; margin-left:0%;} /*position:relative;추가*/
	
	
	/*nav*/
nav a:nth-child(1) {	position:absolute; top:5px;	left:200px;}/*left:10px;*/
nav a:nth-child(2) {	position:absolute; top:5px;	left:350px;}/*eft:150px;*/
nav a:nth-child(3) {	position:absolute; top:5px;	left:500px;}/*right:90px;*/
nav a:nth-child(4) {	position:absolute; top:5px;	left:650px;}/*right:10px;*/


		
	section { width:100%; margin-left:0px;}		
	article:nth-child(1) { width:100%;	height:400px;}	
	article:nth-child(2) { width:66.6666%;}	
	article:nth-child(3) { width:33.3333%;}	
	article:nth-child(4) { width:33.3333%; display:none;}	
	article:nth-child(5) { width:33.3333%;}	
	article:nth-child(6) { width:66.6666%;}	
	article:nth-child(7) { width:66.6666%; display:none;}	
	article:nth-child(8) { width:33.3333%;}	
	article:nth-child(9) { width:33.3333%;}	
	article:nth-child(10) { width:66.6666%; display:none;}	
	article:nth-child(11) { width:33.3333%;}	
	article:nth-child(12) { width:33.3333%; display:none;}
	
	/* header 컨텐츠 */
	header h1 { width:200px;	height:40px;	background-image:url(../img/logo2_1.png); top:20px; left:20px; margin-left:0px;}	/*url(../img/logo2.png)에서 변경*/
	#gnb { top:20px; right:10px;}	
	#gnb li { float:left;}	
	#gnb a { padding:10px 10px;}		
	.snsSet { display:none;}	
}
@media screen and (min-width:640px) and (max-width:779px) {  
	
	/*레이아웃*/
	header { position:relative; width:100%; height:80px;}
	nav { width:100%; margin-left:0%;}
	
	
	/*nav*/
nav a:nth-child(1) {	position:absolute; top:5px;	left:130px;}/*left:10px;*/
nav a:nth-child(2) {	position:absolute; top:5px;	left:260px;}/*left:150px;*/
nav a:nth-child(3) {	position:absolute; top:5px;	left:390px;}/*right:90px;*/
nav a:nth-child(4) {	position:absolute; top:5px;	left:520px;}/*right:10px;*/


	
	section { width:100%; margin-left:0px;}		
	article:nth-child(1) { width:100%;	height:400px;}
	article:nth-child(2) { width:100%;}	
	article:nth-child(3) { width:33.3333%; display:none;}	
	article:nth-child(4) { width:100%;	display:none;}	
	article:nth-child(5) { width:50%;}	
	article:nth-child(6) { width:50%;}	
	article:nth-child(7) { width:66.6666%; display:none;}	
	article:nth-child(8) { width:50%;}	
	article:nth-child(9) { width:50%;}	
	article:nth-child(10) { width:66.6666%; display:none;}	
	article:nth-child(11) { width:50%;}	
	article:nth-child(12) { width:50%;}	
	
	/* header 컨텐츠 */
	header h1 { width:200px;	height:40px;	background-image:url(../img/logo2_1.png); top:20px; left:20px; margin-left:0px;} /*url(../img/logo2.png)에서 변경*/	
	#gnb { top:20px; right:10px;}	
	#gnb li { float:left;}	
	#gnb a { padding:10px 10px;}	
	.snsSet { display:none;}
	
	.txt_1 {background:url(../img/ppp.png);}/*추가*/
	
		
	
}
@media screen and (min-width:480px) and (max-width:639px) {  
	
	/*레이아웃*/
	header { position:relative; width:100%; height:130px;}	
	nav { display:none;}
	section { width:100%; margin-left:0px;}
	article { height:150px;}		
	article:nth-child(1) { width:100%; height:300px;}		
	/*article:nth-child(2) { width:100%;}*/


	article:nth-child(2) {width:100%;font-family:'Arial'; /*background:#f7f6f6;*/} /*추가*/
.txt_1 {font-size:20px; padding-left:50px; padding-top:20px; background:url(../img/ppp.png);}/*추가*/
.txt_1 strong {font-size:40px;}/*추가*/
.txt_1 a {display:block; background:#eeabb1; width:55px;font-size:12px; padding:5px;}/*추가*/

	article:nth-child(3) { width:33.3333%; display:none;}	
	article:nth-child(4) { width:100%;	display:none;}	
	article:nth-child(5) { width:50%;}	
	article:nth-child(6) { width:50%;}	
	article:nth-child(7) { width:66.6666%; display:none;}	
	article:nth-child(8) { width:50%;}	
	article:nth-child(9) { width:50%;}	
	article:nth-child(10) { width:66.6666%; display:none;}	
	article:nth-child(11) { width:50%;}	
	article:nth-child(12) { width:50%;}	
	
	/* header 컨텐츠 */
	header h1 { position:relative; top:20px; /*left:0px;*/ left:31px; width:200px; height:45px; background-image:url(../img/logo2_1.png); margin:0px auto;} /*url(../img/logo2.png)에서 변경*/
	#gnb { width:100%; height:40px; top:80px; right:0px;}	
	#gnb li { float:left; width:25%;}	
	#gnb a { padding:4px; text-align:center;}	
	.snsSet { display:none;}	
	
	article .bg1 span { font-size:120px; bottom:-50px;}	
	article .txt strong { font-size:25px;}
	article .txt em { display:none;}
	
	.txt_1 {background:url(../img/ppp.png);}/*추가*/		
	
}
@media screen and (max-width:479px){

	/*레이아웃*/
	header { position:fixed; width:100%; height:40px; background-color:transparent; z-index:5;}
	nav { display:none;}	
	section { width:100%; margin-left:0px; z-index:4;}		
	article { display:none;}
	article:nth-child(1) { display:block; position:fixed; width:100%; height:100%;}	
	
	/* header 컨텐츠 */
	header h1 { top:20px; /*width:140px;*/ margin-left:-70px;}	
	#gnb { width:250px; top:140px; right:50%; margin-right:-125px;}	
	#gnb a { width:100%; background:#000; box-sizing:border-box; margin:8px 0px; border-radius:10px; opacity:0.5; color:#fff;}	
	#gnb a:hover { opacity:1; transform:scale(1.1);}
	
	article:nth-child(1) span { display:none;}
	
	
	.txt_1 {background:url(../img/ppp.png);}/*추가*/
}