@charset "utf-8";
/* CSS Document */

/*slider*/
body{
	background-color:#000;
}
#main_bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0; left:0;
	background:#666;
	background-size: auto;
	z-index:-1;
}
#main_bg a{
	display:block;
	width:100%;
	height:100%;
	background:url() no-repeat 0 0;
}
.example-pager{
	width:100px;
	height:50px;
	margin:0 auto;
	text-align:center;
	position: fixed;
	bottom:02px; right:10px;
	font-size: 50px;
	z-index:1;
	
}
.example-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #000; cursor: pointer;
}
.example-pager span.cycle-pager-active { color: #fff;}


/*header*/
#header{
	z-index:1;
	width:15%;
	position:fixed;
	left:0;
	height:100%;
	float:left;
	padding:20px 0 10px;
	color:#fff;
	overflow:hidden;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#112033+54,ffffff+100&0.3+0,0.3+100 */
	background: -moz-linear-gradient(top, rgba(17,32,51,0.7) 0%, rgba(17,32,51,0.3) 54%, rgba(255,255,255,0.3) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(17,32,51,0.7) 0%,rgba(17,32,51,0.3) 54%,rgba(255,255,255,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(17,32,51,0.7) 0%,rgba(17,32,51,0.3) 54%,rgba(255,255,255,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d112033', endColorstr='#4dffffff',GradientType=0 ); /* IE6-9 */
}

/*LOGO*/
#header>h1{
	width:auto;
	margin:20px 10% 50px;
}
#header>h1>a{
	display:block;
	font-size:1em;
	vertical-align:bottom;
	line-height:30px;
	color:#fff;
}
#header>h1>a>span{
	font-size:0.6em;
	color:#999;
	vertical-align:bottom;
	line-height:28px;
}
#header>h1>a:hover, #header>h1>a:hover>span{
	color:#f00;
}
#header>h1>a>em{
	font-size:0.3em;
	font-weight:lighter;
	letter-spacing:0.1em;
	line-height:20px;
	color:#999;
}
#header>h1>a>em>i{
	letter-spacing:-0.1em;
}
#header>h1>a:hover>em, #header>a:hover>em>i{
	color:#fff;
}

/*profile*/
#profile{
	margin:0 10%;
}
#profile>h1>a{
	display:block;
	font-size:0.4em;
	letter-spacing:0.1em;
	margin-bottom:10px;
	color:#ccc;
}
#profile>h1>a.on{
	color:#f00;
}
#profile>ul{
	position:relative;
	margin:0 -5%;
	width:90%;
	padding:5px 10%;
	height:30px;
	background-color:#000;
	border-radius:8px;
	overflow:hidden;
}
#profile>ul>li{
	position:absolute;
	top:50px;
}
#profile>ul>li>a{
	display:block;
	padding:0 10px;
	font-size:0.7em;
	border-left:1px solid #fff;
	color:#ccc;
}
#profile>ul>li>a:hover{
	color:#f00;
}
#profile>ul>li>a>em{
	display:none;
}

#pro>dt>.on{
	background-color:#F00;
}

/*nav*/
#nav{
	width:100%;
}
#nav>ul{
	width:100%;
	margin:50px auto 0;
}

#nav>ul>li{
	width:100%;
	}
#nav>ul>li>a{
	display:block;
	width:90%;
	height:40px;
	padding:5px 0 0 10%;
	font:1.3em "Myriad Pro";
	font-weight:600;
	letter-spacing:0.07em;
	line-height:40px;
	text-transform:uppercase;
	color:#fff;
	text-shadow:2px 2px 2px #000;
}
#nav>ul>li>a:hover{
	color:#f00;
	background-color:rgba(0,0,0,0.5);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=#4d000000, endColorStr=#4d000000 ); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#4d000000, endColorStr=#4d000000 )"; 
}
#nav>ul>li>a.on{
	color:#f00;
	background-color:rgba(0,0,0,0.5);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=#4d000000, endColorStr=#4d000000 ); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#4d000000, endColorStr=#4d000000 )"; 
}


/*sns*/
#sns{
	margin:0 auto;
	position:absolute;
	bottom:40px;
	left:10%;
	width:80%;
}
#sns>li{
	float:left;
	width:25%;
}

#sns>li>a{
	display:block;
	margin:0 auto;
	/*
	border-radius:50%;
	- border-radius:50%; -moz-border-radius:50%;  -webkit-border-radius:50%;
	*/
	width:30px;
	height:25px;
	font-size:1em;
	text-align:center;
	line-height:25px;
	font-weight:bold;
	padding-top:5px;
	color:#000;
}

#sns>li.fb>a:hover{
	color:#00aeef;
}
#sns>li.tw>a:hover{
	color:#67d9ff;
}
#sns>li.bl>a:hover{
	color:#4aed1f;
}
#sns>li.mi>a:hover{
	color:#f00;
}


/*main*/
#main, #sub{
	width:85%;
	float:right;
	padding:20px 0 10px;
	color:#fff;
}
#main>h1{
	width:220px;
	margin:7% auto 0;
	border-bottom:1px solid #fff;
	text-align:center;
	font-size:1.8em;
	font-weight:lighter;
	letter-spacing:0.2em;
}
#main>ul{
	width:95%;
	margin:5% auto;
}
#main>ul>li{
	width:20%;
	height:330px;
	margin-right:4%;
	padding:1%;
	float:left;
	background-color:#FFF;
	box-shadow:2px 2px 2px rgba(0,0,0,0.3);
	overflow:hidden;
}
#main>ul>li:last-child{
	margin-right:0;
}
#main>ul>li>a{
	display:block;
	background-color:#000;
	height:200px;
	overflow:hidden;
	border:1px solid #ddd;
}
#main>ul>li>a>img{
	width:100%;
}

#main>ul>li>h2{
	position:relative;
	margin:7% auto 3%;
	height:30px;
	font-size:1.2em;
	border-bottom:1px solid #ccc;
	color:#000;
}
#main>ul>li:nth-child(4)>h2{
	font-size:1.1em;
}
#main>ul>li>h2>a{
	display:block;
	position:absolute;
	top:5px;right:0;
	font-size:0.7em;
	font-weight:lighter;
	color:#555;
}
#main>ul>li>h2>a:hover{
	color:#f00;
}
#main>ul>li>p{
	font:0.7em /1.5em Arial,sans-serif;
	color:#666;
	padding:3% 0 5%;
}

#main>ul>li:hover{
	background-color:#000;
}
#main>ul>li:hover>a{
	border:1px solid #000;
}
#main>ul>li:hover>h2{
	color:#f00;
}
#main>ul>li:hover>p{
	color:#999;
}






/*#footer*/
#footer{
	background-color:rgba(50,50,50,0.9);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=#cc000000, endColorStr=#cc000000 ); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#cc000000, endColorStr=#cc000000 )"; 
	zoom: 1; 
	width:100%;
	height:6%;
	position:fixed;
	bottom:0px;
}
#footer>p{
	width:85%;
	float:right;
	text-align:center;
	font:0.7em Arial,sans-serif;
	color:#eee;
	letter-spacing:0.1em;
	line-height:50px;
}
#footer>p>b{
	font-size:1.2em;
}
#footer>p>a{
	color:#fff;
}
#footer>p>a:hover,#footer>i>a:hover{
	color:#f00;
}
#footer>p>a.w3c{
	display: inline-block;
	padding:18px;
	cursor:pointer;	
}
#footer>i{
	display:none;
}
#footer>i>a{
	color:#fff;
	font-weight:bold;
}
/*
"0"부터 "0.9"에 해당하는 헥사값
 
0 = 00 
0.1 = 1a 
0.2 = 33 
0.3 = 4d 
0.4 = 66 
0.5 = 80 
0.6 = 99 
0.7 = b3 
0.8 = cc 
0.9 = e6 

*/