@charset "utf-8";

/*  Reset CSS  */
* {margin:0;  padding:0;}
ol,ul,li {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: 15;}
#sns li {float: left; 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 */
#menu {position: fixed; top: 50%; left: 0; margin-top: -100px; z-index: 13;}
#menu li a {display: block; width: 200px; height: 60px; font-family: 'Righteous', cursive; font-size: 14px; color: #000; text-align: right; border-top: 1px solid #111; /*outline: 1px dotted red;*/ box-sizing: border-box; overflow: hidden; opacity: 0.8; transition: 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: #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 {position: relative; width: 100%; height: 700px; overflow: hidden; background-position: right center; background-size: cover; background-attachment: fixed;}
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; left: 300px; top: 46%; z-index: 11;}
article p {font-family: 'Righteous', cursive; 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;}