@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url(https://fonts.googleapis.com/css?family=Tangerine);

/*  Reset CSS  */
* { 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 arial; color:#555; }

/*sns*/
#sns {position: fixed; top: 40px; right: 50px; z-index: 10;}
#sns li {float: left; margin-left: 23px;}
#sns li i {font-size: 25px; color: #f48794; opacity: 0.5; transition: all 0.4s;}
#sns li i:hover {transform: scale(1.5); opacity: 1;}

#menu {position: fixed; top: 30%; left: 45.2%; z-index: 13;}
#menu a {display: block; width: 200px; height: 70px; font-family: tangerine; font-size: 40px; color: #fff; text-align: center; overflow: hidden; box-sizing: border-box; opacity: 0.5; transition: all 0.6s; letter-spacing: 5px; border-bottom: 1px solid #fff;}
#menu li:hover a {font-size: 50px; opacity: 1; letter-spacing: 5px;}
#menu li.on a {font-size: 50px; opacity: 1; letter-spacing: 5px;}

/*레이아웃*/
section {width: 100%; height: 700px; position: relative; background-size: cover; background-position: right center; background-attachment: fixed; overflow: hidden;}
section:nth-child(1) {background-image: url(../img/b1.jpg);}
section:nth-child(2) {background-image: url(../img/b2.jpg);}
section:nth-child(3) {background-image: url(../img/b3.jpg);}
section:nth-child(4) {background-image: url(../img/b4.jpg);}

/*텍스트박스*/
article {position: absolute; bottom: 70px; left: 30px; z-index: 11;}
article p {font-family: tangerine; font-size: 60px; letter-spacing: 2px; line-height: 1;}
article span {font-size: 16px;}
section:nth-child(1) p {color: #fff;}
section:nth-child(1) span {color: #ddd;}
section:nth-child(2) p {color: #fff;}
section:nth-child(2) span {color: #ddd;}
section:nth-child(3) p {color: #fff;}
section:nth-child(3) span {color: #555;}
section:nth-child(4) p {color: #fff;}
section:nth-child(4) span {color: #555;}

/*1*/
.p11 {position: absolute; bottom: 20px; right: 20px;}
.p12 {position: absolute; bottom: -40px; right: 130px;}
.p13 {position: absolute; top: 180px; right: 60px;}

/*2*/
.p31 {position: absolute; bottom: 30px; right: 180px;}
.p32 {position: absolute; bottom: -270px; right: 110px;}
.p33 {position: absolute; bottom: -130px; right: -80px;}

/*3*/
.p21 {position: absolute; bottom: -480px; right: -180px;}
.p22 {position: absolute; bottom: -40px; right: 130px;}


/*4*/
.p41 {position: absolute; bottom: -120px; right: 20px;}
.p42 {position: absolute; bottom: -180px; right: 0px;}