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

/*    Reset CSS  */
* { margin:0;  padding:0; }
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}
body { position:fixed;  width:100%; height:100%; background-color: #ffffff;}


/* 배경동영상 */
.vid { width:100%; height:100%; position:fixed; top:-60px; left:0px; opacity:0.9; }
.vid video { width:100%; min-width:1600px; }

/*로고*/
h1 { position:fixed; top:40px; left:40px; z-index:10;}
h1 img { width:280px; height:auto; opacity:0.9; }
h2 { position:fixed; top:680px; right:65px; }
h2 img { width:370px; height:auto; opacity:0.9; }
header {  width:700px; height:95%; position:fixed; top:0px; left:-420px;background-color:#008cff; transform:skewX(-40deg); 
opacity: 0.5;}


/* 1depth*/
#gnb { 	width:220px; position:absolute; top:250px; right:0px;}
#gnb>li {position:relative; }
#gnb>li>a { display:block; width:220px; height:50px; font:bold 18px/3 play; color:#000000; box-sizing:border-box; padding-right:40px; text-align:right;}
#gnb>li.on>a { background:#111; color:#fff;}
#gnb>li:hover>a { background:#111; color:#ffffff;}
#gnb li.on ul a {color:black}
#gnb em { display:inline-block; transform:skewX(40deg)!important; }
#gnb em i { 	margin-right:20px;}


/* 2depth */
#gnb ul { position:absolute; left:0px;  top:0px; opacity:0; transition:all 0.4s;}
#gnb>li:hover ul { opacity:0.8; left:205px; }
#gnb ul a { display:block; width:150px; height:40px; background:#222; border-bottom:1px solid #ffffff; font:bold 16px/2.5 arial; color:#fff; box-sizing:border-box; padding-left:50px; margin-bottom:3px; transition:all 0.5s; }
#gnb ul a:hover { background:#ffffff; color:#000000; }
#gnb>li.on ul { opacity:0.8; left:205px; top:-10px; }
#gnb li.on ul a { background:#ffffff; opacity:0.7; } 

/* sns 버튼 모음*/
#sns { position:fixed; top:60px; right:50px;}
#sns li { float:left; margin-right:30px;}
#sns .fa { font-size:25px; color:#ffffff; opacity:0.5;	transform:scale(1); 	transition:all 0.5s;}
#sns .fa:hover { opacity:1; transform:scale(1.4);}

/* 텍스트 박스 */
.txtBox { width:340px; height:280px; position:fixed; top:300px; right:150px;  text-shadow: 2px 2px 2px rgb(255, 255, 255); }
.txt { position:absolute; top:200px; right:0px; font-size:34px; font-family:play; color:#fff; letter-spacing:-2px;  text-shadow: 2px 2px 2px rgb(0, 0, 0);}
.txt b { font:bold 34px arial; color:#008cff; 	margin-left:20px; }
.tit { position:absolute; top:0px; right:0px; font-size:160px; color:#008cff; font-family: 'Monoton', cursive; letter-spacing:-1px;}
.tit em { font-size:30px; font-family:play; color:#fff;}

/* contents 레이아웃 */
#side { width:800px; height:100%; position:fixed; bottom:0px; right:-800px; background:#008cff; opacity:0.2; transform:skewX(-40deg);}


/* 자동롤링 버튼*/
#side .btnContents { width:150px; height:50px; position:absolute;  bottom:40px; left:100px; color:#008cff;	transform:skewX(40deg); }
#side:hover .btnContents { left:700px;}	

@keyframes ani {
	0% { right:0px; transform:sclae(1); opacity:0.1;}
	100% { right:100px; transform:scale(1.5); opacity:0.1;}
}