@charset "utf-8";
@font-face {font-family:'NanumSquareR'; src:url('../font/NanumSquareR.woff') format('woff');}
/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#eee;}
img { border:0;}
body {font-family:'NanumSquareR' ; background:#000; height: 5130px; width: 100%;}
::selection {background:rgba(0,0,0,0);}

body>img {position: fixed; z-index: 0; width: 1500px; bottom: 100px; right: -500px;}

header {position: fixed; z-index: 5; width: 100%;}
header>h1 {position: absolute; top: 50px; left: 50px; width: 200px;}
header>h1 img {width: 200px;}

.gnb {position: absolute; top: 80px; left: 350px;}
.gnb li { font-size: 25px; font-weight: bold; color:#fff; float: left; margin-left: 70px;
        cursor:pointer;}
.gnb li:hover {color:#ee2e24}
.gnb li.on {color:#ee2e24;}

.sns {position: absolute; top: 80px; right: 50px;}
.sns li {float: left; font-size: 25px; margin-left:30px;}
.sns li i {transition:all 0.5s; opacity: 0.8; color:#eee; cursor: pointer;}
.sns li:hover i {transform:scale(1.5); opacity: 1;}
.copyright {position: fixed; bottom: 0px; right: 20px; font:15px arial;
            color:#888; height: 30px;z-index: 10;}

#content {position: fixed;  width:5500px; height: 800px;
      top: 50%; margin-top:-250px; z-index: 5;}
section {position: relative; width: 100%; margin-top: 100px;}
article {width:300px;  transition:all 1s;float: left; overflow: hidden;
         margin-left:20px; overflow: hidden; position: relative;}

article p:nth-child(1) {width: 100%;}
article p:nth-child(1) ul li {color: #fff;}
article img {width:300px; border: 1px solid #fff; box-sizing: border-box;
            cursor:pointer; transition:all 0.5s; float: left;}
article>p:nth-child(2) {float: left; font-size: 27px; color:orange; margin: 20px 0;font-weight: bold;
            clear: both; text-align: justify; cursor:pointer; transition:all 0.5s;}

article>div:nth-child(3) {display: none;  height: 288.47px; padding:50px 30px ; box-sizing: border-box;
                          position: absolute; left: 200px;}
article>div:nth-child(3)>p {font-size: 15px; color:#888; margin-bottom: 20px;}
article>div:nth-child(3)>span {display: block; color: #fff;position: absolute; top: 10px; right: 10px;
                              font-size: 25px; transition:all 0.5s; cursor:pointer; }
                              article>div:nth-child(3)>span:hover {color: #f00;}
article>div:nth-child(3)>p>span {font-size: 17px; color:#fff; margin-left: 10px;}
article>div:nth-child(3)>p:nth-child(3)>span:last-child {margin-left: 38px;}

article>div:nth-child(4) {display: none; padding:30px; box-sizing: border-box;width: 600px; clear: both;}
article>div:nth-child(4) h2 {font-size: 30px; color:orange; margin-bottom: 20px; width: 100%;}
article>div:nth-child(4)>p {color:#888; font-weight: bold; width: 100%;}
article>div:nth-child(4)>p span {color:#fff; font-size: 25px; margin-left: 10px;}
article>div:nth-child(4)>ul {margin-top: 30px;}
article>div:nth-child(4)>ul li {color:#fff; border: 1px solid #fff; box-sizing: border-box; text-align: center;
                  width: 130px; height: 40px; float: left; font-weight: bold; padding-top:10px;
                  margin-left: 5px; cursor: pointer;}
article>div:nth-child(4)>ul li.l1 {background: #f00;  border: none;}
article.on {width: 600px; height: 530px; background: #000;border: 1px solid #fff;
             box-sizing: border-box; overflow: hidden;}
article.on>p:nth-child(2) {opacity: 0; position: absolute; z-index: 1;display: none;}
article.on img {width: 200px; border-top: none; border-left: none; cursor:default;}
article.on>div:nth-child(3) {float: left; width:398px;  display: block;}
article.on>div:nth-child(4) {float: left; width:600px;  display: block;}