@charset "utf-8";
/* CSS Document */

body {
	background-image: url(../images/bg.gif);
	font-family: 微軟正黑體;
	background-repeat: repeat;
}
.clearfix {clear:both;}

a:link {active
	text-decoration: none;
	color: #FF7600;
}
a:visited {
	text-decoration: none;
	color: #FF7600;
}
a:hover {
	text-decoration: none;
	
}
a:active {
	text-decoration: none;
	color: #FF7600;
}

/* content */
.contentwrap {	width: 100%;	max-width: 950px;	margin-left: auto;	margin-right: auto;	padding-bottom: 5px; background-color: #FE4FB4;}
h3 {color:#5C5BFF;font-weight:bold;text-align: center;}
.content {width:95%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;background-color: #ffffe3; padding-top: 30px; padding-bottom: 30px; padding-right: 8%; padding-left: 8%; border-radius: 20px;}
.maintext  {color:#5C5BFF; line-height: 24px;   letter-spacing: 1px;font-size:16px;font-weight:bold; }
.demobox  {
	color: #5C5BFF;
	line-height: 24px;
	letter-spacing: 1px;
	font-size: 16px;
	font-weight: bold;
	background-color: #29D9DB;
	text-align: center;
	width: 95%;
	border-radius: 20px;
	padding-top: 30px;
	padding-right: 5%;
	padding-bottom: 30px;
	padding-left: 5%;
	height: auto;
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
	margin-left: auto;
	margin-right: auto;
}
.whitetext {
	color: #FFFFFF;
}

.bottomspace {padding-top:25px;  padding-bottom: 25px;}
.titleimg{
	padding: 5px 0;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	text-align: center;
}
.flowcol {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFFFFF;
	font-size: 22px;
}
.center {
	margin: 0 auto;
	display: table;
	float: none;
}
.img100 {
	width: 100%;
}
.redtext {
	color: #a52705;
	padding: 4px 0;
	font-weight: bold;
}


.title {
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
	text-decoration: underline;
	
}
.bgOrange {
	background-color: #FF9600;
}

.bgOrange2 {
	background-color: #F5C37A;
}
.flowShowdon { opacity: 1;  
	transition: .5s ease;}

.flowShowdon:hover{
	opacity: 0.8;
	-webkit-box-shadow: 3px 5px 5px #B8B8B8;
	box-shadow: 3px 5px 5px #B8B8B8;}
.bgRed {
	background-color: #FF4848;	
}

.lineImg{	padding-top: 5px; padding-bottom: 5px; text-align: center;}

/* voting */
.text-voting-heading {	color: #0E94C0;}
.text-voting-heading2 {	color: #838383;	font-size: 14px;}
.voting-videobox {width: 46%;margin-left: 2%;margin-right: 2%;margin-top: 5px;margin-bottom: 5px;float: left; box-shadow: 1px 3px 5px #A8A8A8;	 opacity: 1; transition: .5s ease; -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}
.voting-videobox:hover{	opacity: 0.8;	-webkit-box-shadow: 3px 5px 5px #B8B8B8;	box-shadow: 3px 5px 5px #B8B8B8;}
.votingwrapper {width:100; padding: 0% 2% 0% 2%;}
.voting-caption { -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;   display: block;    background: #FE4FB4;    padding: 10px;}
.voting-caption2 { -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;   display: block;    background: #3498db;    padding: 10px;}
.voting-captiontext{display: block;	text-align: left;	margin: 10px 0;	font-size: 16px;orphans: 2;	color: #FFFFFF;	height: auto;}
.voting-videoWrapper {	position: relative;	padding-bottom: 56.25%; /* 16:9 */	padding-top: 25px;	height: 0;}
.voting-videoWrapper iframe {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}
.voting-checkbox {	float: left;}
.text-voting-group{font-size: 20px; color: #FE4FB4;}
.text-voting-group2{font-size: 20px; color: #3498db;}





/* voting */
/* content */


/* button */
.btn-join {
	
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  font-size: 24px;
  background: #3498db;
  padding: 10px 30px 10px 30px;
  text-decoration: none;
font-weight: bold;
}

a.btn-join:link {    color: #ffffff;  text-decoration: none;}
a.btn-join:visited {    color: #ffffff;  text-decoration: none;}
a.btn-join:active {    color: #ffffff;  text-decoration: none;}
a.btn-join:hover {  background: #44BBD9;  text-decoration: none;}


.btn-tnc {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #FFF;
  font-size: 14px;
  background: #fe4fb4;
  padding: 10px 28px 10px 28px;
  text-decoration: none;
font-weight: bold;
}

a.btn-tnc:link {    color: #ffffff;  text-decoration: none;}
a.btn-tnc:visited {    color: #ffffff;  text-decoration: none;}
a.btn-tnc:active {    color: #ffffff;  text-decoration: none;}
a.btn-tnc:hover {  background: #fc8ccd;  text-decoration: none;}

/* button */

/* Modal */

.modal-tnc-bg {background-color: #FFFDD7}

/* Modal */





.BoxMargin {
	margin-bottom: 2px;
}
.BoxBg {
	width: 100%;
	height: 100%;
	display: block;
}



.highlight {color:#be725b;font-size:18px;font-weight:bold; }


/*checkbox*/
input[type=checkbox]
{
  /* Double-sized Checkboxes */
zoom: 1;
border:0;

}
/* Nav */
	
.navbar {background-size:cover;border:0; }
.navbar-default {max-width:950px; margin-left: auto; margin-right: auto;background-color: #29d9db;border-color: #29d9db;}
.navbar-nav {font-size:18px;font-weight:bold;background-color: #29d9db;}
.navbar-default .navbar-nav>li>a {color:#FFF;}
.navbar-default .navbar-nav>li>a:hover {color:#FFF000;}
.navbar-default .navbar-nav>.active>a {background-color:#139ea0;color:#FFF000;}
.navbar-default .navbar-nav>.active>a:hover {background-color:#139ea0;color:#FFF000;}
.navbar .navbar-toggle .icon-bar {  background-color: #FFF;}
.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {background-color: #29d9db;border-color: #29d9db;}
.navbar-header,navbar-collapse, .collapse in,{background-color: #29d9db;}
.navbar-collapse {margin:0 auto;max-width:950px;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color: #29d9db;}
.container {max-width:950px; background-color:#FFF;}
.nobg{background-color:#FFF;}
.topbar {height:30px;width:100%;background-color:#FFFFFF;}
.bottomborder50 {	padding-bottom: 50px;}

/* Nav */
.TnCcheckbox {
  display: block;
  width: 26px;
  height: 26px;
  color: #555555;
  top:0;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


header {
}
.content .maintext ul {
	margin-left: -20px;
}
.dashline {
	border: 1px dashed #684314;
}

.gallery {
	clear: both;
	display: inline-block;
	width: 100%;
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 10px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
}

.videobox {
	width: 30%;
	margin-left: 2%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	float: left;
}

.caption {
    display: block;
    background: #FE4FB4;
    padding: 10px;
}

.captiontext{
	display: block;
	text-align: left;
	margin: 10px 0;
	font-size: 14px;
	orphans: 2;
	color: #FFFFFF;
	height: 102px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.prize {
}



@media (max-width: 920px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
	
	
    text-align: center;

  }
  .navbar-nav>li {
      float: none;
	  width: 100%;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }

}




@media (min-width: 768px) {

  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
	  
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
	
	
	
		
}


@media (max-width: 767px) {
.form-group50 {width:100%;float:left;}
.song {width:90%;margin:0 auto;}
.flowcol {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: auto;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 20px;
}
.videobox {	width: 98%;margin-left: 1%;margin-right: 1%;	}
		.captiontext{	height: 60px;}
	
}


@media (max-width: 479px) {
	.flowcol {	width: 100%;	margin-left: auto;	margin-right: auto;	text-align: center;
	height: auto;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #FFFFFF;
	font-size: 12px;
		line-height: 20px;
}
	.titleimg{
		width: 90%;
		height: auto;
	padding: 5px 0;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	text-align: center;
	
}
.maintext  {color:#5C5BFF; line-height: 20px;   letter-spacing: 1px;font-size:14px;font-weight:bold; }
.demobox  {

	width: 95%;

}
	
.title {	font-weight: bold;	font-size: 18px;	line-height: 30px;	text-decoration: underline;}
	

.videobox {	width: 98%;margin-left: 1%;margin-right: 1%;	}
	.captiontext{	height: 60px;}
	
	
.voting-videobox {	width: 98%;margin-left: 1%;margin-right: 1%;	}
	.voting-captiontext{height: 30px; }
}