*{
			font-family:'xingothic-tc',Microsoft JhengHei, Arial, Helvetica, sans-serif;	
		}
        body{
            margin:0;
            background-color:#f8ece9;
			background-position:top center;
			background-color:#000;
        }
        #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{
			margin:90px auto 60px auto;
			text-indent:-9999px;
			width:250px;
			height:71px;
			display:block;
			background-size:contain;
			background-repeat:no-repeat;
        }
		.ep-sel select{
            font-size: 20px;
            letter-spacing: 1px;
            padding: 0 5px;
            border-radius: 5px;
        }
        .hidden {
            display: none;
        }
		#about h1{
			background-image:url(../images/about_title.png);
		}
		#mv h1{
			background-image:url(../images/mv_title.png);
		}
		#cast h1{
			background-image:url(../images/cast_title.png);
		}
		#info h1{
			background-image:url(../images/info_title.png);
		}
        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, .9);
        }
        #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:#efd9d2;
        }
        .active{
        	color:#efd9d2;
        }
        #header{
			position:fixed;
            margin:0 auto;
        }
        #header .header{
			border:none;
            width:100%;
        }
        #top{
			float:left;
			z-index:1;
			position:relative;
            margin-top:43%;
        }
        #top .top{
        	float: left;
			border:none;
            width:100%;
        }
        #content{
			background-image:url(../images/c_bg.png);
			background-position: center;
			background-size: contain;
			/*background-color:rgba( 29, 50, 73, 1);*/
            padding:1% 17.5% 10% 17.5%;
			position:relative;
			z-index:1;
			width:65%;
			height:auto;
			display: inline-block;
        }
        #about,#mv,#cast,#info{
        	display: inline-block;
        }
        .clear{
        	clear: both;
        }
		.about{
		    width: 84%;
		    padding: 1% 8% 50px 8%;
		}
        .about p{
        	text-align: left;
            line-height:36px;
            padding-bottom:2em;
        }
		#mv{
			width: 100%;
		}
		.mv{
            width:80%;
            margin:0 10% 0 10%;
        }
        .info{
            width:84%;
            padding:0 8% 0 8%;
        }
        .store{
        	border: solid 1px rgba(99,16,20,.4);
        	background-color: rgba(255,255,255,.6);
        	padding: 5%;
			border-radius: 30px 30px 0px 0px; 
			-webkit-border-radius: 30px 30px 0px 0px; 
			-moz-border-radius: 30px 30px 0px 0px; 
        }
        .dreamfood{
        	padding: 5%;
        	background-color: #670000;
			border-radius: 0px 0px 30px 30px; 
			-webkit-border-radius: 0px 0px 30px 30px; 
			-moz-border-radius: 0px 0px 30px 30px; 
			background-image: url(../images/dreamfood_bg.png);
			background-size: cover;
			background-position: bottom center;
        }
        .dreamfood p,.dreamfood h2{
        	color: #fff;
        }
        .dreamfood h2{
        	margin-top: 0;
        }
        .info h3{
        	font-size: 22px;
        	font-weight: inherit;
        	display: block;
        	margin: 50px auto 0;
        	text-align: center;
        	width: 50%;
        	padding: 15px 50px;
        	background-color: #670000;
        	color: #fff;
			-webkit-border-top-left-radius: 100px;
			-webkit-border-top-right-radius: 100px;
			-moz-border-radius-topleft: 100px;
			-moz-border-radius-topright: 100px;
			border-top-left-radius: 100px;
			border-top-right-radius: 100px;
			background-image: url(../images/dreamfood_bg.png);
			background-size: cover;
			background-position: center;
        }
        .info a{
			color: #39b6e4;
			letter-spacing: 0;
        }
        .dreamfood p{
        	font-size: 15px;
        	line-height: 28px;
        }
        .cast{
            width:84%;
            padding:1% 8% 50px 8%;
        }
		.cast .row{
			width:100%;
			float:left;

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

		}
		.cast h6{
			margin: 8px 0;
			color: #444;
			width: 100%;
			line-height: 26px;
			float: left;
			font-size: 8px;
		}
		.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;
		}
        #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, .9);
        }
		#gotop img{
			display: none;
		}
		.fb-like{
			top:0px;
			z-index:999;
			position:absolute;
			margin-left:10px;
		}
		@media screen and (max-width: 1200px) {
	        #top{
				float:left;
				z-index:1;
				position:relative;
	            margin-top:40%;
	        }
		}
        @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 .dramaInfo{
				margin:0;
				width:100%;
				clear:both;
				text-align:center;
			}
            #nav ul{
                display:none;
            }
			#header{
				margin:5% auto;
			}
			#top{
				margin-top:47%;
			}
			#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: 767px){

	        h1{
				margin:6% auto 1% auto;
				text-indent:-9999px;
				width:50%;
				display:block;
				background-size:contain;
				background-repeat:no-repeat;
	        }
			p{
				font-size:1.2em;
				line-height:2em;	
			}
			.cover{
				display: none;
			}
			#nav{
				width: 94%;
				padding: 3%;
			}
			#nav .dramaInfo span{
				width:100%;
				font-size:1.3em;
				font-weight:bold;
			}
			#top{
				margin-top:48%;
			}
			#about .info p{
				width:94%;
			}
	        .cast div img{
				margin-bottom:5%;	
				float:inherit;	
	            width:100%;	
	        }
			.cast .content{
				width: 95%;
				float: left;
				text-align:left;
				padding:0 2.5%;
				margin-bottom: 8%;
			}
			.cast .content div{
				width: 100%;
				margin: 0;
				float: inherit;
			}
			.cast h4{
				font-size:1.6em;
			}
			.cast p{
				margin:0px;
				font-size:1.2em;
				line-height:2em;
			}
		}

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