@charset "utf-8";
body,div,ul,ol,li,h1,h2,h3,p,tr,td,img{margin: 0;padding: 0;}
img { vertical-align:top;}
.listBox li .f-voting .vote-member:before,
.listBox li .f-voting .vote-member:after,
.listBox li .f-voting .btn-go:link, .listBox li .f-voting .btn-go:visited,
.listBox li .f-voting .btn-no:link, .listBox li .f-voting .btn-no:visited{
	font-family:'微軟正黑體','Microsoft JhengHei','新細明體','PMingLiU',Arial,sans-serif;
}

.listBox{
	width:90%;
	display:block;
	list-style: none;
	margin:0 auto;
	padding:0;

}

.listBox:after{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.listBox li{
	float: left;
	width: 23%;
	margin: 1%;
	text-align: left;
}

.listBox li img{
	display: inline-block;
	width: 100%;
	max-width: 100%;
	height:auto !important;
}


.listBox li .voteBox{
	margin:0 auto 30px;
	background-color:#fff;
	border-radius:8px;
	border:solid 1px #eae5ec;
	position: relative;
}
.listBox li .voteBox a{text-decoration:none;}
.listBox li .voteBox a:hover{text-decoration:none;}

.listBox li .voteBox h3{
	height:67px;
	background:#ffb3d1;
	margin:0 auto 5px;
	color:#56005a;
	text-shadow: 0 2px 2px #ffffff;
	font-size: 16px;
	display:block;
	border-radius:8px 8px 0px 0px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	letter-spacing: -1px;
	vertical-align: middle;
}
 .listBox li .voteBox h3:before{
   content:'';
   width:0;
   height:100%;
   display:inline-block;
   position:relative;
   vertical-align:middle;
 }
.listBox li .voteBox h3 > b{
	width:30px;
	height: 30px;
	display:block;
	background:#946496; 
	border-radius:50px;
	text-align:center;
	position: absolute;
	font:bold 14px/30px Arial;
	z-index: 2;
	left:0;
	top:0;
	color:#fff;
	margin:-7px auto auto -7px;
	text-shadow: 0 2px 2px #6d416f;
}
.listBox li .voteBox h3 > img{
	width:50px;
	height:50px;
	border:solid 3px #fff;
	margin:10px 8px auto 5px;
	display:inline-block;
	border-radius:30px;
	-webkit-box-shadow: 0 3px 5px 0 rgba(223,56,56,0.4) ;
	box-shadow: 0 3px 5px 0 rgba(223,56,56,0.4) ;
	vertical-align: -18px;
}

.listBox li .voteBox p{
	margin:0 auto 8px;
	padding: 8px 12px;
	color: #3E3D3D;
	font-size: 15px;
	line-height:24px;
	text-align:justify;
}

.listBox li .f-voting{
	background: #ffebf2;
	/* border-top: 1px solid #f1abcb; */
	position: relative;
	height: 45px;
}

.listBox li .f-voting form {
	float: right;
	padding-right: 35px;
}

.listBox li .f-voting:after{
	content::"";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.listBox li .f-voting .vote-member, .listBox li .f-voting .vote-member:before, .listBox li .f-voting .vote-member:after{
	display: inline-block;
	vertical-align: middle;
	color: #FC4283;
	font-size: 17px;
	font-weight: bold;
	position: absolute;
}

.listBox li .f-voting .vote-member{
	font-size: 32px;
	text-align: right;
	position: relative;
	width: 4em;
	height: 45px;
	padding-top: 13px;
	line-height: .75;
}

.listBox li .f-voting .vote-member:before{
	/*
	content: "票數";
	color: #333;
	left: 0;
	*/
}
.listBox li .f-voting .vote-member:after{
	content: "票";
	margin-left:.2em;
}

.listBox li .f-voting .vote-member:before, .listBox li .f-voting .vote-member:after{
	bottom: 15px;
}

.listBox li .f-voting .btn-go:link, .listBox li .f-voting .btn-go:visited,
.listBox li .f-voting .btn-no:link, .listBox li .f-voting .btn-no:visited{
	display: block;
	position: absolute;
	left: 15px;
	top: 5px;
	background: #fd4787;
	padding: 1px 50px;
	width: auto;
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	border-radius: 5px;
	box-shadow: 0 4px 0px 0 #cf2863;
}

.listBox li .f-voting .btn-go:before{
	content:"投票";
}

.listBox li .f-voting .btn-go:hover{
	text-decoration: none;
	top: 7px;
	box-shadow: 0 1px 0px 0 #cf2863;
}

.listBox li .f-voting .btn-go:active:after{
	top: -8px;
}

.listBox li .f-voting .btn-no:link, .listBox li .f-voting .btn-no:visited{
	background: #a09e9f;
	box-shadow: 0 4px 0px 0 #777;
}

.listBox li .f-voting .btn-no:before {
	content: "感謝投票";
}

.listBox li .f-voting .btn-no:link, .listBox li .f-voting .btn-no:visited, .listBox li .f-voting .btn-no:hover {
	text-decoration: none;
	/*
	cursor: no-drop;
	opacity: .65;
	*/
}

/*投票活動辦法*/
.rule-bg{ width:100%; height:auto; margin:15px auto; max-width:1380px;}
.rule{ width:75%; margin:30px auto;}
.rule h2{font-size:30px; padding-left:12px; margin-bottom:24px; border-left:solid 8px #fc5487; color:#2d3988;}
.rule h3{font-size:24px; line-height:40px; color:#fff; padding-left:28px; margin:20px 0; background:url(../images/h3-bg.png) no-repeat;}
.rule p{font-size:15px; line-height:24px; color:#000; margin:8px 0;}
.rule ol{ margin-left:30px;}
.rule li{font-size:15px; line-height:24px; color:#000; margin:8px 0;}
.rule table{ border:solid 2px #fc5487;}
.rule th{font-size:18px; line-height:36px; color:#fff; padding-left:15px; background:#fc5487; }
.rule td{font-size:18px; line-height:36px; font-weight:bold; color:#fc5487; border:solid 1px #fc5487; padding-left:15px; }
.rule d1{}
.rule dt{font-size:18px; line-height:24px; color:#d40242; margin:5px 0;}
.rule dd{font-size:15px; line-height:24px; color:#000; margin:5px 0;}
.voteBN a > img{ width:100%; margin:15px auto; max-width:1380px;}
a.addMember{display:inline-block; width:100%; font-size:24px; font-weight: bold; color:#fff; line-height:60px; vertical-align:middle; text-align:center; background:#fd4787; margin:30px auto; padding:1px 50px; border-radius: 5px; box-shadow: 0 4px 0px 0 #cf2863; text-decoration:none;}
.addMember:hover{color:#fff; text-decoration:none; background:#ed366e;}
.addMember i{display:inline-block; width:46px; height:46px; background:url(../images/icon-add.png) no-repeat; vertical-align:middle;}

@media (max-width: 1200px){
	.listBox li {width: 420px;}
	.rule{ width:90%; margin:30px auto;}
}	

@media (max-width: 950px){
	.listBox li {width: 96.5%;}
	.rule{ width:100%; margin:30px auto;}
}

@media screen and (min-width: 575px) and (max-width: 700px) {
	.listBox li .f-voting .vote-member {width: 4em;}
	/*.listBox li .f-voting .vote-member:before {content: "票數";}*/
}

@media screen and (min-width: 575px) and (max-width: 635px) {
	.listBox li .f-voting .vote-member:before {content: "";}
}

@media screen and (max-width: 574px) {
	.listBox li .f-voting .vote-member:before {
		content: "";
	}