html{
			background-color: #1F1F1F;
        }
        a{
            color:#FFF;
            cursor:pointer;
            text-decoration:none;
        }
		html,body{
			margin: 0;
			height: 100vh;
			font-family:"Microsoft JhengHei";
		}
		body:before {
			content: ' ';
			position: fixed;
			z-index: -99999;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: url(../images/bg.jpg) center 0 no-repeat;
			background-size: cover;
		}
		#wrapper{
			margin: 0;
		}
        #nav{
            width: 99%;
            position: fixed;
            z-index: 2;
            top: 0;	
			padding: 0;
			margin: .6%;
            letter-spacing: 1.5px;
            font-size: 18px;
            color: #fff;
            background: rgba(0,0,0,.0);
        }
        #nav .dramaInfo{
            margin-left: 0;
            margin-top: 2px;
            float:left;	
        }
        #nav .dramaInfo span{
            font-size: 18px;
            font-weight:bold;
			margin-right: 8px;
        }
        #nav ul{
            margin: 0;
            width:auto;
            float:right;
        }
        #nav ul li{
        	
            text-align:center;
            margin: 2px 7.5px;
            list-style:none;
            float:left;
        }
        #nav ul li:hover{
            color:#efd9d2;
            background: rgba(0,0,0,.9);
        }
        #nav ul li .active{
        	background: rgba(0,0,0,.9);
        }
        #header{
        	position: relative;
        	padding-top: 8%;
        }
        #header img.name{
        	display: block;
			margin: 0 auto 2% auto;
			width: 4%;
        }
        #header img.logo{
        	display: block;
			margin: 3.6% auto 10% auto;
			width: 50%;
        }
		#preview{
			position: relative;
		}
		#preview .play_icon{
			position: absolute;
			width: 8%;
			padding: 10%;
			left: 36.5%;
			top: 22%;
		}
		#preview img{
			width: 100%;
		}
		#about img{
        	display: block;
			margin: 4% auto 5% auto;
			width: 50%;
		}
		#host{
			display: inline-block;
			margin-bottom: 12%;
		}
		#host .content{
			position: absolute;
			margin: 13.5% 22.5% 20%;
			width: 55%;
		}
		#host .content img{
			width: 48%;
			margin: 1%;
			cursor: pointer;
		}
		#host img{
			width: 100%;
			float: left;
		}
		h1{
			font-size: 50px;
			color: #ff3a4f;
			letter-spacing: 5px;
		}
		#host_01, #host_02{
			letter-spacing: 1px;
			color: #fff;
			line-height: 40px;
			width: 50%;
			margin: 0 25%;
		}
		#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: 16px;
            color: #fff;
            background: rgba(0,0,0,.0);
		}
		#footer .copyright{
			display: inline-block;
		}
		.fb-like{
			top:5px;
			z-index:999;
			position:absolute;
			margin-left:10px;
		}

		/* hover effect */

		.box {
		  position: relative;
		  display: inline-block;
		  border-radius: 300px;
		  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		}

		.box::after {
		  content: "";
		  border-radius: 300px;
		  position: absolute;
		  z-index: -1;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  opacity: 0;
		  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		}

		.box:hover {
		  -webkit-transform: scale(1.1, 1.1);
		  transform: scale(1.1, 1.1);
		}

		.box:hover::after {
		    opacity: 1;
		}

		.lity-content:after{
			box-shadow: none;
		}


        @media screen and (max-width: 1023px) { 
			#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;
			}
            #content{
				position:relative;
				z-index:1;
				height:auto;
				width:98%;
				background-color:rgba( 0, 0, 0, 0.85);
				padding:1% 1% 10% 1%;
            }
            #footer{
            	padding: 6% 0;
            }
			#footer .copyright{
				display:none;	
			}
			.fb-like{

			}
		}
		@media screen and (max-width: 767px){
			#wrapper{
				margin-top: 20%;
			}
			p{
				font-size: 11px;
				line-height: 18px;	
			}
			h1{
				font-size: 30px;
				color: #ff3a4f;
				letter-spacing: 3px;
				margin: 0;
			}
			#nav{
				font-size: 16px;
				letter-spacing: 0;
				width: 94%;
				padding: 3%;
				margin: 0;
				background: rgba(0,0,0,.5);
			}
			#nav .dramaInfo span{
				width:100%;
				font-size: 17px;
				font-weight:bold;
			}
			#nav .dramaInfo span {
			    margin-right: 5px;
			}
	        #header{
	        	padding-top: 0%;
	        }
	        #header img.name{
				margin: 0 auto 6% auto;
				width: 8%;
	        }
	        #header img.logo{
				margin: 3.6% auto 8% auto;
				width: 70%;
	        }
			#preview .play_icon{
				position: absolute;
				width: 16%;
				padding: 10%;
				left: 32%;
				top: 18%;
			}
			#host_01, #host_02{
				letter-spacing: 1px;
				color: #fff;
				line-height: 40px;
				width: 80%;
				margin: 0 10%;
			}
		}