*{
	font-family:'xingothic-tc',Microsoft JhengHei, Arial, Helvetica, sans-serif;	
}
body{
    margin:0;
	background-position:top center;
	background-color:#eee;
}
#wrapper{
}
a{
    color:#FFF;
    cursor:pointer;
    text-decoration:none;
}
p,h1,h1,h3,h4,h5{
    letter-spacing:0.1em;
}
p{
	font-size: 17px;
	color:#363636;	
}
h1{
	position: relative;
	font-weight:700;
	letter-spacing:5px;
	font-family:'chekiangshukesung';
	background-repeat: no-repeat;
	background-position: center;
	font-size:50px;
    color:#670000;
    text-align:center;
    height:80px;
    height: 100px;
	line-height:100px;
	margin:5% 9.5% 5% 9.5%;
	padding:0;
	clear:both;
}
h2{
	font-weight:400;
	color: #670000;
	letter-spacing: 3px;
}
.cover{
	max-width: 300px;
	position: absolute;
}
#nav{
    width:100%;
    position:fixed;
    z-index:2;
    top:0;	
	padding:0.5% 0;
    letter-spacing:0.1em;
    font-size:1em;
    color:#fff;
    background-color:rgba( 0, 0, 0, 1);
   	box-shadow: 0px 1px 50px rgba( 255, 255, 255, 0.2); 
	-webkit-box-shadow: 0px 1px 50px rgba( 255, 255, 255, 0.2); 
	-moz-box-shadow: 0px 1px 50px rgba( 255, 255, 255, 0.2); 
}
#nav .dramaInfo{
    margin-left:1em;
    float:left;	
}
#nav .dramaInfo span{
    font-size:1.2em;
    font-weight:bold;
	margin-right:.5em;
}
#nav ul{
    margin:0;
    width:auto;
    float:right;
}
#nav ul li{
    text-align:center;
    margin-right:15px;
    list-style:none;
    float:left;
}
#nav ul li:hover{
    color:#cba5a5;
}
.active{
	color:#cba5a5;
}
#header{
	position:fixed;
    margin:0 auto;
}
#header .header{
	border:none;
    width:100%;
}
#top{
	float:left;
	z-index:1;
	position:relative;
    margin-top:48%;
}
#top .top{
	border:none;
    width:100%;
}
#content{
	background-image:url(../images/c_bg.png);
	background-position: top center;
	background-size: contain;
    padding:1% 15% 10% 15%;
	position:relative;
	z-index:1;
	width:70%;
	height:auto;
	display: inline-block;
}
#about,#mv,#cast{
	display: inline-block;
}
.clear{
	clear: both;
}
#about .info{
	float:left;
    width:96%;
	margin:0 2% 5% 2%;
}
#about .info p{
	letter-spacing: 1.5px;
	float:left;
	font-size:18px;
	margin:0.5%;
	text-align:left;
	font-weight: bolder;
	border:#f6cfa1 1px solid;
	background-color: rgba(0,0,0,.3);
	padding:1.8%;
	width:45%;
}
#about .info span{
	color:#f6cfa1;
	font-size: 24px;
}
#mv{
	width: 100%;
}
.mv{
    width:80%;
    margin:0 10% 0 10%;
}
.story{
    width:85%;
    padding:1% 7.5% 0 7.5%;
}
.cast{
    width:84%;
    padding:1% 8% 50px 8%;
}
.cast .row{
	width:100%;
	float:left;

}
.cast div img{
	margin-bottom:5%;	
	float:left;	
    width:100%;	
}
.cast .content{
	width: 45%;
	float: left;
	text-align:left;
	padding:0 2.5%;
	margin-bottom: 8%;
}
.cast h4{
	float: left;
	text-align:center;
	font-weight:normal;
	margin-bottom:10px;
	line-height: 20px;
	font-size: 18px;

}
.cast p{
	float: left;
	margin:0px;
	font-size:17px;
	line-height:36px;
}
.cast span{
	float: left;
	margin-bottom: 5px;
	margin-right: 10px;
}
.cast span{
	font-size: 27px;
	color:#670000;
}
.story p{
	text-align: left;
    line-height:36px;
    padding-bottom:2em;
    margin:0 3%;
}
.story p::first-letter{
	font-size: 32px;
	margin-right: 3px;
}
#footer{
    text-align:center;
    width:100%;
	float:left;
	position:fixed;
	bottom: 0;
    z-index:1;
    bottom:0;
    padding: 12px 0;
    letter-spacing:1px;
    font-size:15px;
    color:#fff;
    background-color:rgba( 0, 0, 0, 1);
}
#gotop img{
	display: none;
}
.fb-like{
	top:5px;
	z-index:999;
	position:absolute;
	margin-left:10px;
}

@media screen and (max-width: 1023px) { 
	#gotop {
		position: fixed;
		z-index:999;
		right: 10px;
		bottom: 10px;    
		padding: 20px;    
		cursor: pointer;
	}
	#gotop img{
		display:block;
	}
	#cast img{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;	
	}
	#nav{
		width:96%;
		padding:2%;
		line-height:1.4em;
		box-shadow:none;
	}
    #nav ul{
        display:none;
    }
	#header{
		margin:5% auto;
	}
	#top{
		margin-top:50%;
	}
	#about .info{
		float:left;
		width:80%;
		margin:-2% 7.5% 5% 7.5%;
	}
	#about .info p{
		width: 95%;
		font-size:18px;
		margin:1% 1% 3% 1%;
		text-align:center;
		border:#aaa 1px solid;
		color:#fff;
		padding:3% 5%;
		float:left;
	}
    #content{
		position:relative;
		z-index:1;
		height:auto;
		width:98%;
		background-color:rgba( 0, 0, 0, 0.85);
		padding:1% 1% 10% 1%;
    }
	#footer{
		display:none;	
	}
}

@media screen and (max-width: 768px){

	h1{
		font-size: 2em;
	}
	p{
		font-size:1.2em;
		line-height:2em;	
	}
	.cover{
		display: none;
	}
	#nav{
		width: 94%;
		padding: 3%;
	}
	#nav .dramaInfo{
		margin:0;
		width:100%;
		clear:both;
		text-align:center;
	}
	#nav .dramaInfo span{
		width:100%;
		font-size:1.3em;
		font-weight:bold;
	}
	#top{
		margin-top:52%;
	}
	#about .info p{
		width:94%;
	}
	.cast .row{
		min-height:350px;
		width:100%;
	}
	.cast img{	
		float:left;	
		margin:0%;	
		width:95%;	
	}
	.cast h4{
		font-size:1.6em;
	}
	.cast .content{
		width: 95%;
		float: left;
		text-align:left;
		padding:0 2.5%;
		margin-bottom: 10%;
	}
	.cast p{
		margin:0px;
		font-size:1.2em;
		line-height:2em;
	}
}

@media screen and (max-width: 500px){
	#top{
		margin-top:61%;
	}
	#header{
		margin:15% auto;
	}
}