@charset "utf-8";


/*vote*/

#votebox {
position:relative;	
width:100%;
height:100%;
background-image:url(../imgok/vote/bg.jpg);
background-size:cover;
background-position:top center;
background-attachment:fixed;
text-align:center;
padding:150px auto 50px auto;
}
#votebox .pbox {
position:absolute;
width:40%;
height:50%;
cursor:pointer;
border:0px solid #ff0000;
overflow:hidden;
}
#votebox .pbox .relbox {


}
#votebox .pbox .relbox:hover .bgbox{
opacity:1;
}

#votebox .pbox .relbox .bgbox{
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;	
opacity:.8;
background-size:cover;
background-position:center top;
background-repeat:no-repeat;	
transition:all .3s ease-out;
-webkit-transition:all .3s ease-out;
}

#votebox .pbox .hbox{
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
text-align:center;	
font-family:chaparral-pro,Lucida Grande,Verdana,Tahoma,Georgia,"MHei","微軟正黑體","Microsoft JhengHei","Heiti TC";
color:#ffffff;
}
#votebox .pbox .hbox .ibox{
width:60px;
height:60px;
background:url(../imgok/vote/pbtn.png);
background-position:top center;
margin:auto;
display:none;
}
#votebox .pbox .hbox .capbox{
padding-top:10px;
font-size:16pt;
}

#votebox .pbox .hbox .capbox[class~=c]{
border-bottom:2px solid #ffffff;
width:50px;
left:50%;
margin-left:-25px;
position:absolute;
}



#votebox .pbox .hbox .tkbox {
position:absolute;
bottom:55px;
padding:10px 0px;	
font-size:16pt;
width:100%;
text-align:center;
}
#votebox .pbox .hbox .tkbox .tk{
display:inline;
font-size:20pt;

}


#votebox .pbox .hbox .vtbox {
position:absolute;
bottom:15px;
width:100%;
text-align:center;
display:none
}




#votebox .pbox:hover .hbox {
color:#ffffff;
}
#votebox .pbox:hover .hbox .ibox {
background-position:bottom center;
}
/*
#votebox .pbox:hover .hbox .capbox[class~=n]{
display:none;
}
#votebox .pbox:hover .hbox .capbox[class~=c]{
display:block;
}
*/


#votebox .tbox {
position:absolute;
width:20%;
height:100%;
border:0px solid #ff0000;
left:40%;
top:0px;	
background-image:url("../imgok/vote/t.png");
background-size:90%;
background-position:center center;
background-repeat:no-repeat;
}
#votebox .p3{
left:0px;
top:0px;	
}
#votebox .p1{
right:0px;
top:0px	
}
#votebox .p2{
left:0px;
top:50%;	
}
#votebox .p4{
right:0px;
top:50%;
}

#votebox .p1 .relbox .bgbox{ background-image:url("../imgok/vote/p1.jpg");	 }
#votebox .p2 .relbox .bgbox{ background-image:url("../imgok/vote/p2.jpg");	 }
#votebox .p3 .relbox .bgbox{ background-image:url("../imgok/vote/p3.jpg");	 }
#votebox .p4 .relbox .bgbox{ background-image:url("../imgok/vote/p4.jpg");	 }

#votebox .p3 .relbox .bgbox {
background-position:right top	
}

#votebox .pbox[class~=wait] .hbox {
display:none;	
}
#votebox .pbox[class~=wait] .bgbox {
background-position:center center;
background-image:url("../imgok/vote/p4.jpg")!important;
}


/*vote popbox*/
.votepopbox .cbox {
position:absolute;	
width:924px;
height:540px;
left:50%;
top:50%;
margin-left:-462px;
margin-top:-270px;
background-color:#262626;
}


.votepopbox .cbox  .titlebox {
height:30px;
width:100%;
font-size:18pt;
color:#ffffff;	
position:absolute;
top:-30px;
left:0px;
text-align:center;
}


.votepopbox .cbox .pvbox ,.votepopbox .cbox .pvbox .relbox{
 background-size:cover;
 background-position:center center;	
}
.votepopbox .cbox .pvbox .relbox {
transition:all .3s ease-out;
-webkit-transition:all .3s ease-out;	
}
.votepopbox .cbox .pvbox .item .relbox:hover {
transform:scale(1.1,1.1);	
-webkit-transform:scale(1.1,1.1);		
}

.votepopbox .cbox .pvbox div {
position:absolute;
}

.votepopbox .cbox .pvbox .photo{
width:244px;
height:386px;
left:0px;
top:0px;	
}
.votepopbox .cbox .pvbox .title{
width:583px;
height:156px;
left:0px;
bottom:0px;	
}
.votepopbox .cbox .pvbox .mv{
width:100%;
height:420px;
right:0px;
top:0px;	
}
.votepopbox .cbox .pvbox .mv iframe {
position:absolute;
width:100%;
height:100%;	
}

.votepopbox .cbox .pvbox .item{
width:339px;
height:156px;
right:0px;
bottom:0px;	
overflow:hidden;	
}

.votepopbox .cbox .pvbox .inlogin{
padding:0px 0px 40px 0px;
color:#ffffff;
font-size:14pt;
position:absolute;
width:100%;
display:block;
bottom:0px;
text-align:center;
}



.votepopbox .cbox .pvbox .tkbox{
width:50%;
height:120px;
left:0px;
bottom:0px;	
overflow:hidden;	
font-size:18pt;
color:#ffffff;	
padding:30px 0px 0px 20px;
box-sizing:border-box;
}

.votepopbox .cbox .pvbox .tkbox .tk {
font-size:30pt;
display:inline	
}

.votepopbox .cbox .pvbox .btnbox{
width:50%;
height:120px;
right:0px;
bottom:0px;	
overflow:hidden;	
padding:30px 30px 0px 00px;
box-sizing:border-box;	
text-align:right;
}
.votepopbox .vshare,.votepopbox .vvote {
cursor:pointer;	
}
.votepopbox .vvote {
display:none;
}




/*pv1*/
.votepopbox #pv1 .photo { background-image:url("../imgok/vote/pp1.jpg")}
.votepopbox #pv1 .title { background-image:url("../imgok/vote/pt1.jpg")}
.votepopbox #pv1 .item .relbox{ background-image:url("../imgok/vote/pi1.jpg")}

.votepopbox #pv2 .photo { background-image:url("../imgok/vote/pp2.jpg")}
.votepopbox #pv2 .title { background-image:url("../imgok/vote/pt2.jpg")}
.votepopbox #pv2 .item .relbox{ background-image:url("../imgok/vote/pi2.jpg")}

.votepopbox #pv3 .photo { background-image:url("../imgok/vote/pp3.jpg")}
.votepopbox #pv3 .title { background-image:url("../imgok/vote/pt3.jpg")}
.votepopbox #pv3 .item .relbox{ background-image:url("../imgok/vote/pi3.jpg")}

.votepopbox #pv4 .photo { background-image:url("../imgok/vote/pp4.jpg")}
.votepopbox #pv4 .title { background-image:url("../imgok/vote/pt4.jpg")}
.votepopbox #pv4 .item .relbox{ background-image:url("../imgok/vote/pi4.jpg")}


/*mobile*/
#votebox .minbox {
background-image:url("../imgok/vote/mbg.jpg");
background-size:cover;
background-position:top center;
background-color:#000000; 
}
#votebox .minbox .tbox {
top:50px;
left:0px;
height:60%;
width:100%;	
background-position:top;
background-image:url("../imgok/vote/mt.png");
background-size:100%;
}

#votebox .minbox .pbox {
height:30%;
width:50%;	
}

#votebox .minbox .p3{
left:0px;
top:40%;	
}
#votebox .minbox .p1{
right:0px;
top:40%	
}
#votebox .minbox .p2{
left:0px;
top:70%;	
}
#votebox .minbox .p4{
right:0px;
top:70%;
}

#votebox .minbox .pbox .hbox .capbox{
padding-top:5px;
font-size:10pt;
}

#votebox .minbox .pbox .hbox .capbox[class~=c]{
border-bottom:2px solid #ffffff;
width:50px;
left:50%;
margin-left:-25px;
position:absolute;
}
#votebox .minbox .pbox .hbox .vtopen{
width:80px;
display:none!important;
}
#votebox .minbox .pbox .hbox .tkbox{
bottom:25px;
font-size:11pt;
}
#votebox .minbox .pbox .hbox .tkbox .tk{
font-size:12pt;
}

#votebox .minbox .pbox .hbox .vtbox{
bottom:5px;
}


.votepopbox .cbox[class~=mobile] {
width:100%;
position:absolute;
top:50px;
height:auto;
margin:0px;
left:0px;	
}
.votepopbox .cbox[class~=mobile] div {
left:0px;
top:0px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;	

}

.votepopbox .cbox[class~=mobile] .title {
position:relative;
width:100%;	
height:auto;
padding-bottom:32%;
}
.votepopbox .cbox[class~=mobile] .mv {
 position:relative;
padding-bottom:56%;	
width:100%;
height:auto;
}

.votepopbox .cbox[class~=mobile] .btmbox{
position:relative;	
display:block;
padding-bottom:56%;	
width:100%;
background-color:#262626;
}

.votepopbox .cbox[class~=mobile] .btmbox .photo{
position:absolute;
left:0px;
top:0px;
width:68%;
height:100%;
}
.votepopbox .cbox[class~=mobile] .btmbox .item{
position:absolute;
left:68%;
top:0px;
width:32%;
height:100%;
}

.votepopbox .cbox[class~=mobile] .tkbox {
width:100%;
position:relative;	
text-align:center;
height:auto;
padding:50px 0px;
}
.votepopbox .cbox[class~=mobile] .btnbox {
width:100%;
position:relative;	
text-align:center;
height:auto;
padding:0px;
}

.votepopbox .cbox[class~=mobile] #pv1 .photo { background-image:url("../imgok/vote/mpp1.jpg")}
.votepopbox .cbox[class~=mobile] #pv1 .title { background-image:url("../imgok/vote/mpt1.jpg")}
.votepopbox .cbox[class~=mobile] #pv1 .item .relbox{ background-image:url("../imgok/vote/mpi1.jpg")}

.votepopbox .cbox[class~=mobile] #pv2 .photo { background-image:url("../imgok/vote/mpp2.jpg")}
.votepopbox .cbox[class~=mobile] #pv2 .title { background-image:url("../imgok/vote/mpt2.jpg")}
.votepopbox .cbox[class~=mobile] #pv2 .item .relbox{ background-image:url("../imgok/vote/mpi2.jpg")}

.votepopbox .cbox[class~=mobile] #pv3 .photo { background-image:url("../imgok/vote/mpp3.jpg")}
.votepopbox .cbox[class~=mobile] #pv3 .title { background-image:url("../imgok/vote/mpt3.jpg")}
.votepopbox .cbox[class~=mobile] #pv3 .item .relbox{ background-image:url("../imgok/vote/mpi3.jpg")}

.votepopbox .cbox[class~=mobile] #pv4 .photo { background-image:url("../imgok/vote/mpp4.jpg")}
.votepopbox .cbox[class~=mobile] #pv4 .title { background-image:url("../imgok/vote/mpt4.jpg")}
.votepopbox .cbox[class~=mobile] #pv4 .item .relbox{ background-image:url("../imgok/vote/mpi4.jpg")}





.votepopbox .okbox {
 position:absolute;
 width:500px;
 height:200px;
 margin-left:-250px;
 top:50%;
 left:50%;
  margin-top:-100px;
 z-index:20
}

.votepopbox .okbox {
background-image:url(../imgok/reg/bg.jpg);
background-position:0px 0px;
box-shadow:0 0 10px rgba(0,0,0,.8);
text-align:center; 
}


.votepopbox .okbox .titlebox {
 width:100%;
 height:50px;
 display:block;
 background-color:#e4007f;
 text-align:center;
 position:relative;
 line-height:50px;
 overflow:hidden
}

.votepopbox .okbox .titlebox .close {
position:absolute;
right:0px;
top:0px;
cursor:pointer;
}


.votepopbox .okbox h3 {
text-align:center;
margin:30px 0px 10px 0px;
}
.votepopbox .okbox h1 {
text-align:center;
font-weight:bold;
font-size:14pt;
line-height:22px;
letter-spacing:2px;
margin:10px 0px 20px 0px;
font-family:chaparral-pro,Lucida Grande,Verdana,Tahoma,Georgia,"MHei","微軟正黑體","Microsoft JhengHei","Heiti TC";
}
.votepopbox .okbox .btnbox {
text-align:center;
margin:10px 0px;
cursor:pointer;
}

.votepopbox .okbox .btnbox .gologin {
border-radius:5px;
}


@media screen  and (max-width: 1600px) {


} /*end w1600*/
@media screen  and (max-width: 1350px) {


} /*end w1200*/
@media screen  and (max-width: 1200px) {


} /*end w1200*/
@media screen  and (max-width: 1080px) {


} /*end w1080*/

@media screen  and (max-width: 960px) {


} /*end w960*/

@media screen  and (max-width: 800px) {



} /*end w800*/
@media screen  and (max-width: 640px) {
	
.votepopbox .okbox {
width:100%;	
left:0px;
top:0px;
margin-left:0px;
margin-top:50px;
height:auto;
min-height:600px;
background:url(../imgok/reg/mbg.jpg);
}

.votepopbox  .okbox  {
min-height:250px;	
height:250px;
margin-top:150px;	
}	
	
	
.votepopbox  .okbox  .gologin {
width:90%;	
}

} /*end w640*/
@media screen  and (max-width: 480px) {


} /*end w480*/


@media screen  and (max-width: 320px) {


} /*end w320*/