@import url(http://fonts.googleapis.com/css?family=Raleway);
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

/* Reset CSS */
* { margin: 0; padding: 0; }
ul, li { list-style: none; }
a { outline: 0; text-decoration: none; color: #bbb; }
img { border: 0; }

/* 배경이미지 설정 */
.wrap { position: fixed; width: 100%; height: 100%; min-width: 1024px; min-height: 768px; background: url(../img/inp4_bg.jpg) no-repeat center; background-size: cover;}

/* 로고영역 */
.wrap h1 { position: fixed; width: 300px; bottom: 140px; left: 10%; text-align: center; line-height: 0.8; }
.wrap h1 strong { font: bold 16px/1.1 verdana; color: #333; }
.wrap h1 img { width: 200px; height: auto; }
.wrap h1 span { font: bold 12px/1.6 arial; color: #444; letter-spacing: 5px; }

/* 슬로건 영역 */
.txt { position: fixed; bottom: 100px; left: 9%; font: 30px/0.8 Raleway; color: #111; letter-spacing: 0px; }
.txt span { color: #888; }

/* 웹 아이콘 버튼 모음 */
.sns { position: fixed; bottom: 70px; right: 70px; z-index: 10; }
.sns li { float: left; margin-left: 30px; }
.sns li a { color: #555; font-size: 22px; }

/* section 영역 레이아웃 */
section { position: fixed; top: 0; right: 0; width: 100%; height: 100%; }
article { position: relative; width: 25%; height: 13%; background-image: url(../img/divider.png), url(../img/divider.png); background-repeat: no-repeat, no-repeat; background-position: left center, right center; float: right; overflow: hidden; top: -30px;}

/* article 제목 */
article h2 {position: relative; top: 65px; text-align: center; font-size: 23px; font-family: 'Playfair Display', serif; color: #666; z-index: 3; transition: all 0.5s; }
article div { position: absolute; left: 0px; top: 75px; width: 100%; height: 0; background: #000; opacity: 0.5; z-index: 2; transition: all 0.5s; }

/* article 제목 오버 효과 */
article:hover h2 { color: #fff; }
article:hover div { top: 58px; height: 50px; }

/* article 사진 */
article img { position: absolute; height: auto; width: 100%; margin-top: 0; margin-left: 0px; opacity: 0; z-index: 1;}
article:nth-child(1) img {width: 110%;}
article:nth-child(4) img {width: 110%;}

/* article 숨겨진 텍스트 */
article h3 { position: absolute; bottom: 210px; right: -310px; font: 40px 'Playfair Display'; color: white; text-align: right; opacity: 1; z-index: 4; }
article p { position: absolute; bottom: 50px; right: -310px; width: 300px; height: 150px; font-size: 12px/1.5 arial; font-family: 'Playfair Display'; color: #fff; text-align: right; opacity: 0.8; z-index: 5; }
article:nth-child(4) h3 {color: #000;}
article:nth-child(4) p {color: #000;}

footer { position: fixed; width: 100%; height: 40px; left: 0px; bottom: 0px; background: #000; font: 12px/3.3 verdana; color: #fff; letter-spacing: 2px; opacity: 0.4; z-index: 10; }
footer ul { position: absolute; bottom: 0px; left: 50px; }
footer ul li { float: left; margin-right: 40px; }
footer span { position: absolute; right: 50px;bottom: 0px; }