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



#full-screen-background-image {
    z-index: -999;
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}
.row {
    margin-right: -10px;
    margin-left: 0;
}
.wrapper {
	width:100%;
	height:100vh;
	background-image: url(../images/before_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	}
	.wrapper-after {
	width:100%;
	height:100vh;
	background-image: url(../images/after_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	}
	.wrapper-vote {
	width:100%;
	height:100vh;
	background-image: url(../images/vote_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	}
.t-blue {
	color:#006bd0;
}
.t-red {
	color:#c80000;
}
.t-bk {
	color: #000;
}
.t-w {
	color: #fff;
}
.t-y {
	color: rgba(244,247,134,1.00);
}
.bg-w {
background-color: #fff;
}
.bg-bk {
background-color: #000;
}
h6 {
	font-family: "微軟正黑體", Arial;
	font-size: 20px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:normal;
}
h8 {
	font-family: "微軟正黑體", Arial;
	font-size: 18px;
	margin-top: 0px;
    margin-bottom: 0px;
}
.win {
	font-size: 35px;
	color: rgba(244,247,134,1.00);

}
h7 {
	font-family: "微軟正黑體", Arial;
	font-size: 36px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
h9 {
	font-family: "微軟正黑體", Arial;
	font-size: 24px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
.w-side {
	width:12%;
	display:inline-block;
	margin: 3px;
}
.w-side-2 {
	width: 12%;
	display:inline-block;
	margin: 3px;
}
.w-mid {
	    width: 98%;
    display: inline-block;
    margin: 0px 1%;
    text-align: center;
}
a {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: underline;
}
.margin-20 {
	margin: 0px 5px;
}

.before {
	background-image:url(../images/before_bg-b.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.after {
	background-image:url(../images/after_bg.jpg);
	background-repeat:no-repeat;
	background-position:center top;
}
.image {
    position: relative;
    width: 100%;
}
.block-in {
	display: inline-block;
	padding-left: 30px;

}

.col-md-8 {
	width:12.4%;
	padding-right: 0;
    padding-left: 0;
}
.result {
	background-image:url(../images/result_bg.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	visibility:visible;

}

.result-txt {
	top: 42%;
	left: 10.8%;
	position: absolute;
}
.result-team {

	width:100%;
	position: absolute;
}


.img-opacity {
	opacity: 0;

}
.before-img{
	content:url("../images/before-b.jpg");
	opacity: 0;

}
.after-img{
	content:url("../images/after-b.jpg");
	opacity: 0;
}
.vote-top{
	background-image:url(../images/vote-top-b.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: 100%;


}

.vote-img{
	content:url("../images/vote-img-b.jpg");
	width: 100%;

}

.btn-white {
	font-size: 13px;
	color: white;
}

.btn-blue {
	/*background-color: #000;*/
	color:#006bd0;
}
.btn-blue:hover,
.btn-blue:focus,
.btn-blue.focus,
.btn-blue:active,
.btn-blue.active,
.open > .dropdown-toggle.btn-blue {
  /*color: #fff;
  background-color: #00274d;
  border-color: #00172c;*/
  color:#006bd0;
}
.btn-red {
	background-color: #000;
	color:#c80000;
}
.btn-red:hover,
.btn-red:focus,
.btn-red.focus,
.btn-red:active,
.btn-red.active,
.open > .dropdown-toggle.btn-red {
  color: #fff;
  background-color: #700000;
  border-color: #6e0000;
}
.result-img{
	content:url("../images/result.jpg");

}

.result-img-blue{
	content:url("../images/blue-photo.jpg");
	position: absolute;
}
.result-img-red{
	content:url("../images/red-photo.jpg");
}
/*body {
	background-color: rgba(84,146,35,1.00);
}*/

.v-1000 {
	visibility:visible;
}
.v-700, .v-500 {
	visibility: hidden;
	display:none;
}
.btn-win h7 {
	font-size: 2.2vw;
	color: #ff6897;
}
.btn-lose h7 {
	font-size: 18px;
	color: #fff;
	font-weight: normal;
	    line-height: 2.5vw;
}
.btn-lose .fa-2x {
    font-size: 25px;
    color: #fff;
}
.btn-win .fa-2x {
    font-size: 2.1vw;
    color: #ff6897;
}
@media (max-width: 1300px){
	.btn-lose .fa-2x {
    font-size: 20px;
}
}
@media (max-width: 1024px){
	.row {
    margin-right: 0px;
    margin-left: 0;
}
		.btn-lose .fa-2x {
    font-size: 25px;
}
.btn-lose {
	bottom: 7% ! important;
}
.btn-win {
	bottom: 3.5% ! important;
}
.btn-win h7 {
    font-size: 4vw;
}
.btn-win .fa-2x {
    font-size: 3.5vw;
}
}
@media (max-width: 767px){
			.btn-lose .fa-2x {
    font-size: 3.5vw;
}
.btn-lose {
	bottom: 2vw ! important;
}
.btn-lose h7 {
    font-size: 2.5vw;
}
.btn-win {
	bottom: 1.5vw ! important;
}
.btn-win h7 {
    font-size: 4vw;
}

}
@media (max-width: 1024px){
	.wrapper {

	background-image: url(../images/before_bg_t.jpg);
	background-size: contain;

	}
	.wrapper-after {

	background-image: url(../images/after_bg_t.jpg);
	background-size: contain;

	}
	.wrapper-vote {

	background-image: url(../images/vote_bg_t.jpg);
	background-size: contain;

	}

	.col-md-8 {
    width: 25%;
}
}
@media (max-width: 1000px){



		.before, .after, .result  {
		background-image:none;
	}
	.img-opacity {
	opacity: 1;

	height:auto;
	width:100%;
}
.container {
	width: 100%;
	margin: 0 auto;
}
h1 {
	font-family: "微軟正黑體", Arial;
	font-size: 200%;
	margin-top: 10px;
    margin-bottom: 0px;
}
h2 {
	font-family: "微軟正黑體", Arial;
	margin-top: 10px;
    margin-bottom: 0px;
}
h3 {
	font-family: "微軟正黑體", Arial;
	font-size: 140%;
	margin-top: 10px;
    margin-bottom: 0px;
}
.result-img-blue, .result-img-red {
	margin-top: 10px;
	width:90%;
}
}
@media (max-width: 898px){

}

@media (max-width: 768px){
	.wrapper-vote {

	background-image: url(../images/vote_bg_m.jpg);
	background-size: contain;

	}
.wrapper {

	background-image: url(../images/before_bg_m.jpg);
	background-size:cover;

	}
	.wrapper-after {

	background-image: url(../images/after_bg_m.jpg);
	background-size:cover;

	}

		.v-700 {
	visibility:visible;
	display: block;
}
.v-1000, .v-500 {
	visibility: hidden;
	display:none;
}

	.before-img{
	/*content:url("../images/before-700.jpg");
	width: 100%;
	height:auto;
	opacity: 1;*/
	display:none;
}
.after-img{
	/*content:url("../images/after-700.jpg");
	width: 100%;
	height:auto;
	opacity: 1;*/
	display:none;
}
.vote-top{
	display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/vote-top-700.jpg) no-repeat;
  width: auto;
  height: auto;
  padding-left: 100%;

}
.vote-img{
	content:url("../images/vote-img-700.jpg");
}
.result-img{
	content:url("../images/result-blue-700.jpg");
	width: 100%;
	height:auto;
}
.blue{
	content:url("../images/result-blue-700.jpg");
	width: 100%;
	height:auto;
}
.red{
	content:url("../images/result-red-700.jpg");
	width: 100%;
	height:auto;
}
.result-img-blue, .result-img-red {
	visibility:hidden;
}
.result-txt {
	top: 59%;
	left: 8%;
	position: absolute;
}
.block-in {
	display:block;
	padding-left: 0px;
}
h8 {
	font-family: "微軟正黑體", Arial;
	font-size: 15px;
	margin-top: 0px;
    margin-bottom: 0px;
}
}
@media (max-width: 840px){
h6 {
	font-family: "微軟正黑體", Arial;
	font-size: 18px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
h7 {
	font-family: "微軟正黑體", Arial;
	font-size: 32px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
.w-side {
	width:32%;
	display:inline-block;
	margin: 0;
}
.w-side-2 {
	width: 48.5%;
	display:inline-block;
	margin: 0;
}


}
@media (max-width: 645px){
h6 {
	font-family: "微軟正黑體", Arial;
	font-size: 16px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
h7 {
	font-family: "微軟正黑體", Arial;
	font-size: 29px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
.w-side {
	width:29%;
	display:inline-block;
	margin: 0;
}


}
@media (max-width: 500px){
			.v-500{
	visibility:visible;
	display: block;
}
.v-1000, .v-700  {
	visibility: hidden;
	display:none;
}
		.before-img{
	/*content:url("../images/before-500.jpg");
	width: 100%;
	height:auto;*/
	display:none;
}
	.after-img{
	/*	content:url("../images/after-500.jpg");
	width: 100%;
	height:auto;*/
	display:none;
}
.vote-top{
		display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/vote-top-500.jpg) no-repeat;
  width: auto;
  height: auto;
  padding-left: 100%;
}
.vote-img{
	content:url("../images/vote-img-500.jpg");
}
.blue{
	content:url("../images/result-blue-500.jpg");
	width: 100%;
	height:auto;
}
.red{
	content:url("../images/result-red-500.jpg");
	width: 100%;
	height:auto;
}
.result-txt {
	top: 59%;
	left: 5%;
}
.win {
	font-size: 35px;
	display:block;

}

h7 {
	font-family: "微軟正黑體", Arial;
	font-size: 18px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-weight:bold;
}
.w-side {
	width:24%;
	display:inline-block;
	margin: 0;
}


}


.vote-wrapper {
/*padding-top: 415px ;*/
padding-top: 22%;
width: 100%;

}
.vote {
    margin: 0 5%;
    overflow: hidden;
}
div.artist {
    float: left;
	position: relative;
	    margin-bottom: 10px;

}

div.artist  img:hover {
border: 1px solid #000;
}

div.artist img {
    width: 99%;
    height: auto;
	border: 1px solid #ccc;



}
div.artist img:hover {

}

div.desc {

    text-align: center;
  position: absolute;
  bottom:0%;
  left:0;
  padding:1rem 0;
  width:100%;
  color: #fff;

}
.name-b {
    font-size: 24px;
}

@media (max-width: 1300px){
.name-b {
    font-size: 1.8vw;
}
.name-s {
    font-size: 1.3vw;
}
div.desc {
	padding: 5px 5px 15px;
}
.vote {
    margin: 0 2%;
}
}
@media (max-width: 1024px){
	.vote-wrapper {
    padding-top: 42%;
}
}
@media (max-width: 768px){
	.vote-wrapper {
    padding-top: 47%;
}
}
@media (max-width: 550px){
	div.artist img {
    width: 98%;
}