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

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body {font-family:나눔고딕,NanumGothic,'Nanum Gothic',righteous,sans-serif; line-height:1.6; font-size:12px;}

/* 로고 */
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 {display:inline-block; flaot:right; margin-left:20px;}
#sns li i {font-size:25px; color:#111; opacity:0.5; transition:all 0.5s;}
#sns li i:hover {transform:scale(1.5); opacity:1;}

/* 메뉴 */
#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.5s;}
#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:#00c9ab; border-color:#00c9ab;}
#menu li:nth-child(3):hover a {color:#6aa1ff; border-color:#6aa1ff;}
#menu li:nth-child(4):hover a {color:#f6dea0; border-color:#f6dea0;}

#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/ap_bg1.jpg);}
section:nth-child(2) {background-image:url(../img/ap_bg2.jpg);}
section:nth-child(3) {background-image:url(../img/ap_bg3.jpg);}
section:nth-child(4) {background-image:url(../img/ap_bg4.jpg);}

/* 텍스트 박스 */
article {position:absolute; top:35%; left:300px; z-index: 11;}
article p {font-family:righteous; font-size:50px; letter-spacing:2px; line-height:1.6;}
article span {font-family:nanumgothic; font-size:20px; color:#fff;}
section:nth-child(1) p {color:#d4164c;}
section:nth-child(1) span {color:#fff; font-weight:bold; }
section:nth-child(2) p {color:#00c9ab;}
section:nth-child(2) span {color:#fff; font-weight:bold;}
section:nth-child(3) p {color:#6aa1ff;}
section:nth-child(3) span {color:#000; font-weight:bold;}
section:nth-child(4) p {color:#f6dea0;}
section:nth-child(4) span {color:#000; font-weight:bold;}

/* 첫 번째 박스 이미지 */
.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;}
.p22 {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;}