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

@media only screen and (min-width: 1025px){
.lightbox-target {
    position: fixed;
	top: -100%;
	width: 100%;
	left: 0;
	background: rgba(0,0,0,.8);
	/* 預設透明度為 0，觸發 :target 後，利用動畫效果調整透明度 */
	opacity: 0;
	overflow: hidden;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  font-family: "微軟正黑體","新細明體","arial","sans-serif";
  z-index: 1001;
 }
.lightbox-target .content {
  width: 60%;
  height: 90%;
  color: #fff;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.2s;
  -o-transition: ease-in-out 0.2s;
  -webkit-transition: ease-in-out 0.2s;
  transition: ease-in-out 0.2s;
  
}

.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
}
.lightbox-target:target .content, .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}


.lightbox-target:target .lightbox-close {
  top: 5%;
}
.lightbox-close {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background:rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  top: 10%;
  right: 5%;
   -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;	
  transition:0.5s ease-in-out;
}
.lightbox-close:before,
.lightbox-close:after {
  content: " ";
  display: block;
  height: 35px;
  width: 2px;
  background: #fff;
  position: absolute;
  left: 26px;
  top: 10px;
  transform:rotate(45deg);
}
.lightbox-close:after {
  transform:rotate(-45deg);
}

.lightbox-target .vote {
  width: 40%;
  height: 8%;
  color: #000000;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
   -moz-transition:0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-outt;	
  transition:0.5s ease-in-out;
  font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
  font-size: 16px;	
  padding: 2%;
  background-color: #ffffff;
  border-radius: 10px;	
  text-align: center;
}


.lightbox-target:target .vote,
.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
  	
}
}

@media screen and (min-width: 768px) and (max-width: 1024px){
.lightbox-target {
    position: fixed;
	top: -100%;
	width: 100%;
	left: 0;
	background: rgba(0,0,0,.8);
	/* 預設透明度為 0，觸發 :target 後，利用動畫效果調整透明度 */
	opacity: 0;
	overflow: hidden;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  font-family: "微軟正黑體","新細明體","arial","sans-serif";
  z-index: 1001;
 }
.lightbox-target .content {
  width: 60%;
  height: 90%;
  color: #fff;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.2s;
  -o-transition: ease-in-out 0.2s;
  -webkit-transition: ease-in-out 0.2s;
  transition: ease-in-out 0.2s;
  
}

.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
}
.lightbox-target:target .content, .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}


.lightbox-target:target .lightbox-close {
  top: 5%;
}
.lightbox-close {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background:rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  top: 10%;
  right: 5%;
   -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;	
  transition:0.5s ease-in-out;
}
.lightbox-close:before,
.lightbox-close:after {
  content: " ";
  display: block;
  height: 35px;
  width: 2px;
  background: #fff;
  position: absolute;
  left: 26px;
  top: 10px;
  transform:rotate(45deg);
}
.lightbox-close:after {
  transform:rotate(-45deg);
}

.lightbox-target .vote {
  width: 60%;
  height: 8%;
  color: #000000;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
   -moz-transition:0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-outt;	
  transition:0.5s ease-in-out;
  font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
  font-size: 16px;	
  padding: 5%;
  background-color: #ffffff;
  border-radius: 10px;	
  text-align: center;
}


.lightbox-target:target .vote,
.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
  	
}
}

@media only screen and (max-width: 767px) {
.lightbox-target {
    position: fixed;
	top: -100%;
	width: 100%;
	left: 0;
	background: rgba(0,0,0,.8);
	/* 預設透明度為 0，觸發 :target 後，利用動畫效果調整透明度 */
	opacity: 0;
	overflow: hidden;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  font-family: "微軟正黑體","新細明體","arial","sans-serif";
  z-index: 1001;
 }
.lightbox-target .content {
  width: 60%;
  height: 90%;
  color: #fff;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.2s;
  -o-transition: ease-in-out 0.2s;
  -webkit-transition: ease-in-out 0.2s;
  transition: ease-in-out 0.2s;
  
}

.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
}
.lightbox-target:target .content, .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}


.lightbox-target:target .lightbox-close {
  top: 5%;
}
.lightbox-close {
  display: block;
  width: 45px;
  height: 45px;
  box-sizing: border-box;
  background:rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  top: 10%;
  right: 5%;
   -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;	
  transition:0.5s ease-in-out;
}
.lightbox-close:before,
.lightbox-close:after {
  content: " ";
  display: block;
  height: 35px;
  width: 2px;
  background: #fff;
  position: absolute;
  left: 26px;
  top: 10px;
  transform:rotate(45deg);
}
.lightbox-close:after {
  transform:rotate(-45deg);
}

.lightbox-target .vote {
  width: 100%;
  height: 7%;
  color: #000000;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-sizing: border-box;
   -moz-transition:0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-outt;	
  transition:0.5s ease-in-out;
  font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
  font-size: 16px;	
  padding: 5%;
  background-color: #ffffff;
  border-radius: 10px;	
  text-align: center;
}


.lightbox-target:target .vote,
.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
  	
}
}