@charset "utf-8";
@font-face{
font-family:'NanumGothic';
src: url('NanumGothic.eot') format('eot')
url('NanumGothic.woff') format('woff');

font-weight:normal;
font-style:normal;
}

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul {list-style: none; }
body { position:fixed;  width:100%; height:100%; background:#fff; color:#000; font-family: 'Nanum Gothic', sans-serif;}
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}

/* header 로고 */
header {width:100%; height:7%;}
header h1 {width:300px; height:30px; position:absolute; top:20px; left:50%; margin-left:-100px; z-index:500;}
header h1 img {width:100%; height:auto; }

/* header sns */
header ul {position:absolute; top:60px; right:30px; z-index:2;}
header ul li {float:left; margin-right:10px; opacity:0.5; transition:all 0.4s;}
header ul li:hover {opacity:1; transform:scale(1.2);}
header ul .fa {font-size:25px; color:#fff;}

/* nav */
nav {width:100%; height:50px; position:fixed; z-index:3; top:17%;  left:0px; background:green;}

/* nav 1depth */
nav>ul {width:1200px; height:50px; margin:0 auto;}
nav>ul>li {width:200px; height:50px; float:left; left:100px; text-align:center; box-sizing:border-box; position:relative; perspective:700px;}
nav>ul>li>a {display:block; width:200px; height:50px; font:18px/2 nanumgothic; color:#fff; margin-top:5px; transition:all 0.4s; }
nav>ul>li:hover>a { transform:translateY(-20px); opacity:0;}

/* nav 2depth 패널 */
nav>ul>li>div {position:absolute; left:0px; top:50px; width:200px; height:300px; background:#c2de96; border:1px solid #609d00; box-sizing:border-box; opacity:0; transition:all 0.5s; padding:10px;}
nav>ul>li:hover div {opacity:1; top:-100px; transform:rotateY(360deg);}

/* nav 2depth 썸네일 */
nav>ul>li>div>p {width:100%; height:90px; border:1px solid #609d00; box-sizing:border-box; overflow:hidden;}
nav>ul>li>div>p>img {width:100%; opacity:0.5;}

/* nav 2depth 제목 */
nav>ul>li>div>h2 {position:absolute; left:0px; top:100px; width:100%; height:50px; text-align:center; font:bold 15px/3.5 nanumgothic; color:#0e6b02;}

/* nav 2depth 메뉴 */
nav>ul>li>div>ul {width:100%; position:absolute; bottom:0px; left:0px;}
nav>ul>li>div>ul>li>a {display:block; width:100%; height:37px; border-top:1px solid #609d00; color:green; text-align:center; font:13px/2.8 nanumgothic; color:#888; transition:all 0.4s;}
nav>ul>li>div>ul>li>a:hover {background:#7fb032; color:white;}

/* section */
section {position:fixed; z-index:2; width:100%; height:100%; top:0px; left:0px; overflow:hidden; opacity:1; }
section>img {width:100%; height:100%; position:absolute; top:200px; left:0px; }

/* footer */
footer {position:fixed; bottom:0px; left:0px; width:100%; height:35px; background:#fe6103; border-top:1px solid #929191; z-index:5; }
footer ul {width:40%; height:30px; float:left: margin-left:30px; margin-top:3px;}
footer ul li {float:left; width:16.66%; text-align:center;}
footer ul li a{font:13px/2 arial; color:#fff;}
footer ul li:nth-child(1) a {font-weight:bold; color:#fff;}
footer ul li:nth-child(2) a {font-weight:bold; color:#fff;}
footer ul li .fa{font-size:15px;}


h3{font-size:100px; position:fixed; top:0px; left:0px; z-index:10;}