/* Edited by Patrick on 16-08-2016 */


@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(../fonts/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(../fonts/NotoSansTC-Bold.otf) format('opentype');
 }

 
 
 
 


body{ background:#fff;  font-size:14px; font-family: Helvetica, "Helvetica Neue", "Century Gothic", Arial, "Noto Sans TC", Microsoft JhengHei ;min-width:320px;

}
header{ width:100%; position:relative; text-align:left; background:#fff; box-shadow: 0px 1px 1px #d9d9d9;     margin-bottom: 1px; font-weight:300;
}

header *{ line-height:1em;} 

.fantv_width{max-width:1280px; width:100%; margin:0 auto; text-align:left; position:relative; }


#fantv_logo_menu{ position:relative;}
#fantv_logo_menu .wrapper > a > img{
	margin:8px 0px;
		width:127px;
	}


#fantv_logo_menu .wrapper2 > a > img {
    margin: 6px 11px;
			width:95px;
			display:inline-block;

}


/* Radial effect*/



.wrapper {
  position:relative;
  	vertical-align:top;
}

.wrapper:after {
	content:"";
	display:table;
	clear:both;
}


.wrapper *{
	vertical-align:top;
}

.wrapper2{
	width:100%; 
	position:relative;
	text-align:left;
	}

.ripplelink{
  margin:0.2%;
  text-align:center;
  color:#fff;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index:0;
}


.ripplebutton{
  margin:0.2%;
  text-align:center;
  color:#fff;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index:0;
}

.ink{
  display: block;
  position: absolute;
  background:rgba(157, 74, 150, 0.5);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
	top: 11px;
	left: 10px;		  
}

.ink2{
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
	top: -9px;
	left: 9px;		  
}


.animate {
	-webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}



.wrapper, .menu{ display:inline-block; text-align:left; }


.menu button{ display:inline-block; border: none; background:none;}
.menu a{ 
color:#d70036;  
font-weight:500; 
display: inline-block; 

/*
  -webkit-transition: background-image 0.7s ease;
  -moz-transition: background-image 0.7s ease;
  -o-transition: background-image 0.7s ease;
 transition: background-image 0.7s ease;
 */
 
  background:url('../images/menu_mouseover_before.png') no-repeat;
  background-position:bottom center;
  margin-top:13px;
	}

.menu a:hover{  text-decoration:none; text-decoration:none; color:#e64662;}
.menu .active{background:url('../images/menu_mouseover_after.png') no-repeat;   background-position:bottom center;}



#fantv_language{ position:absolute; right:5px; top:5px;}
#fantv_language a{ color:#c250a1;  font-weight:bold; display: inline-block;
 margin-top:6px;   background:url('../images/menu_mouseover_before.png') no-repeat;
  background-position:bottom center;   -webkit-transition: background-image 0.7s ease;
  -moz-transition: background-image 0.7s ease;
  -o-transition: background-image 0.7s ease;
 transition: background-image 0.7s ease; text-decoration:none;}

#fantv_language  a:hover{ text-decoration:none; color:#dc7ac0;}






.mobile_menu_position{ top:4px; position:relative;}


.mobile_menu_link {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 0;
}



.menu2{
	width:100%;
	background:rgba(255,255,255,0.8);
	padding-left:50px;
	}
	
	
.menu2 button{ display:inline-block; border: none; background:none; padding:0px 12px;}
.menu2 a{ 
color:#c250a1;  
font-weight:bold; 
display: inline-block; 

  -webkit-transition: background-image 0.7s ease;
  -moz-transition: background-image 0.7s ease;
  -o-transition: background-image 0.7s ease;
 transition: background-image 0.7s ease;
 
  margin:8px;
  font-size:14px;
	}

.menu2 a:hover{  text-decoration:none;}
.menu2 .active{ background-position:bottom center;}


 /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(157,73,150); /* Black fallback color */
    background-color: rgba(157,73,150, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	box-shadow: 0px 0px 10px #c98cc7;	
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #fff;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
	width:100%;
	height:auto;
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #cccccc;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 60px;
	text-align:right;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */







	
footer{ width:100%; background:#fff; margin:0 auto; position:relative; padding: 10px 0px; color:#222; box-shadow: 0px 0px 1px #d9d9d9;}	
footer > div{ max-width: 1280px; position:relative; margin: 0 auto; width: 100%;}	
	

#app_logo div{ display:inline-block; vertical-align:top;}
#app_logo > div > p{ margin-bottom:5px !important; line-height:2em;}
	
	
	.not_ready{display:none;}
	
#t_and_c a{text-decoration:none; color:#222;}
#t_and_c a:hover{text-decoration:none; color:#777;}
	
#footer_menu a{    color: #222; text-decoration:none;}	
#footer_menu a:hover{    color: #777; text-decoration:none;}	



	
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}



	

@media (max-width:767px) {
	.wrapper {
	display:none;
}
.wrapper2{
	display:block;
	}

#footer_logo{ display:block; width:100%; margin: 0; padding:25px; text-align:left; vertical-align:top;}
#app_logo{ display:block; color:#fff; width:100%; margin: 0; padding:0px 25px 25px 25px; vertical-align:top; text-align:left;}

#fb_like{ display:block; vertical-align:top; margin-bottom:10px; text-align:left; padding-left:25px;}
#footer_menu{display:block; vertical-align:top; margin-bottom:20px; text-align:left; padding-left:10px;}
#t_and_c{display:block; vertical-align:top; text-align:right; width:100%;}



#footer_menu ul{ list-style:none; margin:0px; padding:0px; clear:both;}
#footer_menu li{ list-style:none; float:left; margin:0px 10px; }

footer{ background:#fff; color:#333; }
	.mobile_menu { display:inline-block !important; cursor:pointer; color:#c250a1; position:relative; font-size:1.5em;}

.mobile_menu :hover {color:#cc68c4;}

.menu a{font-size:14px; padding: 5px 0px 5px 0px;}
#fantv_language a{ font-size:14px; padding: 8px 0px 8px 0px; line-height:16px;}


.wrapper {

  margin-left:16px;

}

.menu{ padding:0px 4px;  width:100%;}
.menu button{     padding: 0px 7px 12px 7px;}


.menu a { margin-top:0px;}
#fantv_logo_menu{text-align:center;}


.menu .active{background:url('../images/menu_mouseover_after2.png') no-repeat;   background-position:bottom center; background-size: 11px 15px;}
	}
	
	
@media(min-width:768px) {
.wrapper{
	display:inline-block;
	}
.wrapper2 {
	display:none;
}	
#footer_logo{ display:inline-block; width:50%; margin:5px 0 10px; padding-left:25px; text-align:left; vertical-align:top;}
#app_logo{ display:inline-block; width:49%; margin:5px 0 10px; vertical-align:top; text-align:center;}

#footer_menu{display:inline-block; vertical-align:top; text-align:left; width:49%;}
#t_and_c{display:inline-block; vertical-align:top; text-align:right; width:49%;}

#footer_menu ul{ list-style:none; margin:0px; padding:0px; }
#footer_menu li{ list-style:none; float:left; margin:0px 10px;}



.menu a{font-size:20px; padding: 11px 16px 20px 16px;}
#fantv_language a{ font-size:20px; padding: 15px 16px 19px 16px; }


.wrapper {
  margin-left:16px;

}

.menu{ margin-left:10px;}



	}
	
	
@media(min-width:768px) and  (max-width:1023px){
	.menu a {     padding: 11px 3px 20px 3px; }
	.menu button { padding-left:12px!important; padding-right:12px!important;}

	}
	
	
@media (max-width:375px) {
	.menu button {
    padding: 0px 7px 12px 7px;
	}
	
	
	}	
	
@media(max-width:1023px){


	}
	
@media(min-width:1024px){

header{height:65px;}


	}	
	
	
	
