@charset "utf-8" ;
@import url(http://fonts.googleapis.com/css?family=Righteous) ;
/*  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;}
/*로고*/
h1 {position: fixed;top: 50px; left: 50px; z-index: 10;}
h1 img {width: 200px; height: auto;}
/*sns*/
#sns {position: fixed;top: 40px; right: 50px; z-index: 14;}
#sns li {float: left;margin-left: 20px;}
#sns li i {font-size: 25px; color: #111; opacity: 0.5; transition: all 0.2s;}
#sns li i:hover {transform: scale(1.7);opacity: 1;color: red;}
/*메뉴*/
#menu{position: fixed;top: 50%; left: 0px; margin-top: -100px; z-index: 13;}
#menu a {display: block;width: 200px; height: 60px; font-family: righteous; font-size: 14px; color: #000;text-align: right;overflow: hidden;box-sizing: border-box;border-top: 1px solid #111; opacity: 0.8;transition: all 0.3s;}
#menu li:hover a {font-size: 24px; opacity: 1;}
#menu li.on a {font-size: 24px; opacity: 1;}
#menu li:nth-child(1):hover a {color: #d4164c; border-color: #d4164c;}
#menu li:nth-child(2):hover a {color: #fff; border-color: #fff;}
#menu li:nth-child(3):hover a {color: #ffec6a; border-color: #ffec6a;}
#menu li:nth-child(4):hover a {color: #005a89; border-color: #005a89;}

#menu li:nth-child(1).on a {color: #d4164c; border-color: #d4164c;}
#menu li:nth-child(2).on a {color: #fff; border-color: #fff;}
#menu li:nth-child(3).on a {color: #ffec6a; border-color: #ffec6a;}
#menu li:nth-child(4).on a {color: #005a89; border-color: #005a89;}
/*레이아웃*/
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/bg1.jpg);}
section:nth-child(2) {background-image: url(../img/bg2.jpg);}
section:nth-child(3) {background-image: url(../img/bg3.jpg);}
section:nth-child(4) {background-image: url(../img/bg4.jpg);}
/*텍스트 박스*/
article { position:absolute; top:46%; left:300px; z-index:11;}
article p { font-family:righteous; font-size:50px; letter-spacing:2px; line-height:1;}
article span { font-size:16px; }
section:nth-child(1) p { color:#d4164c;}
section:nth-child(1) span { color:#111;}
section:nth-child(2) p { color:#fff;}
section:nth-child(2) span { color:#fff;}
section:nth-child(3) p { color:#fff;}
section:nth-child(3) span { color:#ffec6a;}
section:nth-child(4) p { color:#005a89;}
section:nth-child(4) span { color:#111;}
/*첫 번째 박스 이미지*/
.p11 { position:absolute; bottom:20px; right:20px;}
.p12 { position:absolute; bottom:-40px; right:130px;}
.p13 { position:absolute; top:180px; right:60px;}
/*두 번째 박스 이미지*/
.p21 { position:absolute; bottom:-480px; right:-180px;}
.p22 { position:absolute; bottom:-40px; right:130px;}
/*세 번째 박스 이미지 */
.p31 { position:absolute; bottom:30px; right:180px;}
.p32 { position:absolute; bottom:-270px; right:110px;}
.p33 { position:absolute; bottom:-130px; right:-70px;}
/*네 번째 박스 이미지 */
.p41 { position:absolute; bottom:-120px; right:20px;}
.p42 { position:absolute; bottom:-180px; right:0px;}