@charset "UTF-8";
/* CSS Document */
.warrantbox_time {color:#78182F;f ont-size:14px; text-align:left; float:left;}
.live_button {color:#78182F; font-size:14px; text-align:left; float:left;}
.button {FONT-WEIGHT:800; width: 80%; background: #d63552; border: none; padding: 4px 4px; text-align: center; text-decoration: none; display: block; font-size: 14px; border-radius:4px; margin-left: auto; margin-right: auto;}
.button3 {color: #ffffff; border: 1px solid #c1a5a1;}
.warrantbox_wrap {height: 210px; width: 100%;}


/*Warrant Page*/
.wrapper {width:100%;max-width:768px; margin:0 auto;}
.warrant19 {background-color:#FFFFFF; border: 1px solid #CDCDCD;}
.warrant19_wrap {height:auto; text-align: center;}
.container19{padding: 1%;}
.top_header {background-color: #a5005e; text-align: left; width: 92%;padding: 4% 4%;margin-bottom: 4px;}
.warrant_header {width:92%;background-color:#DFDFDF;height: 40px;padding: 2% 4%;}
.title {width: 100%;}
.left{float: left;}
.right{float: right;}
.warrant19_topic {color: #F9672E; font-size: 24px; font-weight: bold; margin: 2%;}
.warrant19_cast_time {color: #828282; font-size: 16px; padding: 1% 0 2% 0;}
.uploadlogo {max-height: 60px; margin-left: 2%; }
.videoplayer {width: 100%; max-width: 768px;}
.videotextcontent {width: 96%; padding: 1% 2%; margin: 0 0 2% 0;text-align: left;}
.videotextcontent .topic{font-size: 18px; color: #474747; font-weight: bold;}
.videotextcontent .description{font-size: 16px; color: #666666;line-height: 22px;}
.sharingbuttonarea {border: #D7D7D7 solid 1px; padding: 2% 0; margin: 1% 0;text-align: center;}
.playlist_header {background-color:#808080;color: #FFFFFF;font-size: 18px;}
.playlist {background-color: #ACACAC; width: 100%;}
.playlist_container{padding: 2% 4%;}
.list_item {width: 96%; padding: 2%;}
.list_image {width: 40%; border: #FBFBFB 1px solid; float: left; border: #A0A0A0 solid 1px;vertical-align: middle;}
.list_image img{width: 100%;}
.list_text {width:57%; font-size: 16px; display: inline-block; line-height: 22px; float: left; margin-left: 2%;}
.list_text b{font-size: 18px; color: #474747;line-height: 24px; }
.list_postdate {font-size: 16px;color: #838383;font-weight:bold;padding-top: 1%;}
.footer {width: 96%; background-color: #E2E2E2; text-align: center; padding: 6% 2%;font-size: 12px;color: #555555;}
.footer_logo {margin-bottom: 2%;}
.footer_link {margin-bottom: 2%;}
.footer_link a{color: #555555; text-decoration: none;}
.footer_link a:hover{color: #FF3D40;}
.copyright { color: #9C9C9C;}
.clearfix {clear: both;}
/* Chrome, Safari, Opera */
@-webkit-keyframes follow-animation {
  from {background: white; color: #F9672E; width: 85px; left: 4%;}
  to {background: #B88C2E; border-color: #F9672E; color: #ffffff; width: 120px; left: 2%;}
}
@-webkit-keyframes unfollow-animation {
  from {background: #F9672E; color: #ffffff; width: 120px; left: 2%;}
  to {background: white; border-color: #976835; color: #976835; width: 85px; left: 4%;}
}

/* Standard syntax */
@keyframes follow-animation {
  from {background: white; color: #F9672E; width: 85px; left: 4%;}
  to {background: #F9672E; border-color: #F9672E; color: #ffffff; width: 120px; left: 2%;}
}
@keyframes unfollow-animation {
  from {background: #F9672E; color: #ffffff; width: 120px; left: 2%;}
  to {background: white; border-color: #F9672E; color: #F9672E; width: 85px; left: 4%;}
}

input {
  -webkit-appearance: none;
}

input:after {
  color: #F9672E;
  font-family: "微軟正黑體";
  font-size: 12pt;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #F9672E;
  border-radius: 3px;
  position: absolute;
  top: 4%;
  left: 2%;	
  cursor: hand;
  display: inline-block;
  text-align: center;
  padding: 1% 1%;


  content: '+ 訂閱';
  -webkit-animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-animation-fill-mode:forwards;
  animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode:forwards;
}

input:checked:after {
  content: '訂閱中';
  -webkit-animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-animation-fill-mode:forwards;
  animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode:forwards;
}