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

  * {margin:0;padding:0;} ol,ul{list-style:none;}
  a{outline:0;text-decoration:none;color:#bbb;}
  img{border:0;} body{font-family:'Jua', sans-serif;}

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

  #bgvid{width:100%;height:100%;position:fixed;right:0;bottom:0;
    min-width:100%;min-height:100%;width:auto;height:auto;z-index:-100;}
  /* 로고 영역 */
  .wrap h1 {position:fixed;top:2%;left:2%;line-height:0.9;
    display:inline-block;text-align:center;}
 .wrap h1 img {width:200px;height:auto;vertical-align:bottom;display:inline-block;}
 .wrap h1 strong {font:bold 16px/1.1 verdana; color:#fff;}
 .wrap h1 img {width:200px; height:auto;vertical-align:bottom;display:inline-block;}
.wrap h1 span {font:bold 12px/1.6 arial; color:#fff;letter-spacing:5px;
  background:#000;padding:10px;display:inline-block; }

  .bottom{position:absolute;left:2%;bottom:25%;width:540px;height:100px;color:#fff;text-align: left;}
  .txt{position:fixed; top:40%; left:40px;font:30px/0.8 Raleway; color:#111;letter-spacing:0px;}
  .txt span {font-size:30px;color:#fff;}

  /* 어썸 */
  .sns {position:fixed;top:2%;right:50px;z-index:10;}
  .sns li {float:left;margin-left:30px;}
  .sns li a {color:#fff; font-size:22px;}
  .sns li:nth-child(1) a:hover{color:#0039cd;}
  .sns li:nth-child(2) a:hover{color:#33c806;}
  .sns li:nth-child(3) a:hover{color:#d00000;}
  .sns li:nth-child(4) a:hover{color:#a204b0;}

  /* section  */
  section {position:fixed;top:0px;right:0px;width:100%;height:100%;}
  article {position:relative;width:15%;height:100%;
    background:url(../img/divider.png)no-repeat left center;float:right;overflow:hidden;
    cursor:pointer;
    border-left:1px dotted #fff;
    background:rgba(0, 0, 0, 0.5);
  }

  /* article */
  article>*{position: absolute;}
  article h2 {top:200px;left:20px;	padding-left:15px;border-left:3px solid #fff;
  font:bold 20px 'Jua', sans-serif;; color:#fff;	z-index:3;	transition:all 0.5s;}
  article div {left:0px; top:200px;	width:100%; height:0px;	background:#000;	opacity:0.5;	z-index:2;	transition:all 0.5s;}


  /* article 호버 */
  article:hover h2 { color:#ccc; border-left:3px solid #fff;}
  article:hover div { top:180px; height:100px;}

  article img{width:80%;top:50%;left:40%;transform:translate(-50%,-30%);padding-left: 20px;}

  /* article */
  article video {width:auto; height:100%;	margin-top:0px;	margin-left:-550px;opacity:0;z-index:1;}
.mar {margin-left:-800px;}

  /* article 숨겨진 컨텐츠 */
  article h3 {bottom:250px;	right:-310px;	font: 40px Raleway; color:#fff;	text-align:right;	opacity:1;
     z-index:4;}
  article p {bottom:50px; right:-310px;	width:300px; height:150px;	font:12px/1.5 arial;
     color:#fff;text-align:right;	opacity:0.8;	z-index:5;}

  /* footer */
  footer {position:fixed;width:100%;height:40px;left:0px;bottom:0px;background:#000;
    font:12px/3.3 verdana; color:#fff;letter-spacing:2px;z-index:10;}
  footer ul {position:absolute;bottom:0px;left:50px;}
  footer ul li {float:left;margin-right:40px;}
  footer ul li:nth-child(1) a:hover{color:rgb(128, 152, 251);}
  footer ul li:nth-child(2) a:hover{color:rgb(251, 128, 246);}
  footer ul li:nth-child(3) a:hover{color:rgb(156, 251, 128);}
  footer span {position:absolute;right:20px;bottom:0px;}














  /* visibility:hidden; - 내용만 참추고 공간은 그대로 있음. */
  /* display: none; -내용과 공간을 함께 사라지게 함 */