/**
Responsive CSS3 lightbox without Javascript
Autohr: Muki Wu
Article: http://muki.tw/tech/responsive-css3-lightbox-without-javascript/
**/
/* basic layout start (you can skip it) */
section {
  margin: 0 auto;
}
header {
  background: #d9444a;
  text-align: center;
  color: #fff;
  padding: .7em 0;
}
header a {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 1px 1px 1px #973735;
}
header:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: #d9444a transparent transparent transparent;
  top: 53px;
  left: 50%;
}

/* Pure CSS3 Lightbox start */
a.button {
  display: inline-block;
  background: #999;
  color: #f2f2f2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 1em;
  -moz-box-shadow: 0 3px 0 #777;
  -webkit-box-shadow: 0 3px 0 #777;
  box-shadow: 0 3px 0 #777;
  font-size: 1.3em;
  text-decoration: none;
}

.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  height:100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -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;
  overflow:auto;
}
.lightbox-target .content {
  width: 90%;
  height: 35%;
  background: #fff;
  color: #333;
  margin: auto;
  position: absolute;
  top:-40%;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid #fff;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  
}
@media (min-width:767px) {
	.lightbox-target .content {
		height:100%;
		top:-40%;
	}
}
@media (min-width:991px) {
	.lightbox-target .content {
		height:100%;
		top:-40%;
	}
}
@media (max-width:1199px) {
	.lightbox-target .content {
		height:45%;
		top:-40%;
	}
}
@media (min-width:1200px) {
	.lightbox-target .content {
		height:35%;
		top:-40%;
	}
	.lightbox-close {
		top: 13%;
	}
}
.content {
	border-radius:5px;
	padding:20px;
}
.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid #fff;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  z-index:9999;
}
.lightbox-target:target .content, .lightbox-target:target img {
  max-height: 80%;
  max-width: 80%;
}
.lightbox-target:target .lightbox-close {
  right:10%;
}

.lightbox-close {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  top: 8%;
  right: 5%;
  border-radius:5px;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
@media (min-width:1200px) {
	.lightbox-close {
		top: 13%;
	}
}
.lightbox-close:before, .lightbox-close:after {
  content: " ";
  display: block;
  height: 25px;
  width: 2px;
  background: #139dd7;
  position: absolute;
  left: 20px;
  top: 13px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lightbox-close:after {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.news_title{
	color:#fff;
	background-color:#3294d6;
	float:left;
	width:100%;
	padding:5px;
	border-left:4px solid #b73960;
}
.news_info{
	margin-top:15px;
	float:left;
}
.news_topname{
	font-size:25px;
	font-weight:bold;
}
/*-jump-*/

.jump-target {
  position: fixed;
  top: -100%;
  width: 100%;
  height:100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -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;
  overflow:auto;
}
.jump-target .content {
  background: #fff;
  color: #333;
  margin: auto;
  position: absolute;
  top:-40%;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid #fff;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  
}
@media (min-width:767px) {
	.jump-target .content {
		height:100%;
		top:-40%;
	}
}
@media (min-width:991px) {
	.jump-target .content {
		height:100%;
		top:-40%;
	}
}
@media (max-width:1199px) {
	.jump-target .content {
		height:40%;
		top:-40%;
		width:60%;
	}
}
@media (min-width:1200px) {
	.jump-target .content {
		height:35%;
		top:-40%;
		width:30%;
	}

}
.jump-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid #fff;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
.jump-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  z-index:9999;
}
.jump-target:target .content, .jump-target:target img {
  max-height: 80%;
  max-width: 80%;
}
.jump-target:target .jump-close {
  right:35%;
  top:13%;
}
.jump_topname{
	font-size:25px;
	font-weight:bold;
}
.jump_no{
	float:left;
	margin-right:5px;
}
.jump_text{
	width:55%;
}
.jump-close {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  top: 8%;
  right: 35%;
  border-radius:5px;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
@media (min-width:1200px) {
	.jump-close {
		top: 13%;
	}
	.jump-target:target .jump-close{
		right:35%;
		top:13%;
	}
}
@media (min-width:991px) {
	.jump-close {
		top: 10%;
		right:10%;
	}
	.jump-target:target .jump-close{
		right:20%;
		top:10%;
	}
}
@media (min-width:767px) {
	.jump-close {
		top: 10%;
		right:10%;
	}
	.jump-target:target .jump-close{
		right:35%;
		top:13%;
	}
}
@media (max-width:1199px) {
	.jump-close {
		top: 10%;
		right:10%;
	}
	.jump-target:target .jump-close{
		right:20%;
		top:10%;
	}
}

.jump-close:before, .jump-close:after {
  content: " ";
  display: block;
  height: 25px;
  width: 2px;
  background: #139dd7;
  position: absolute;
  left: 20px;
  top: 13px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.jump-close:after {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.jump_btn{
	float:left;
	margin-top:30px;
	clear:both;
	width:100%;
	display:block;
	text-align:center;
}
.jump_info{
	margin-bottom:5px;
	display:block;
}
/*-open-*/

.open-target {
  position: fixed;
  top: -100%;
  width: 100%;
  height:100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -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;
  overflow:auto;
}
.open-target .content {
  background: #fff;
  color: #333;
  margin: auto;
  position: absolute;
  top:-40%;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid #fff;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  
}
@media (min-width:767px) {
	.open-target .content {
		height:100%;
		top:5%;
	}
}
@media (min-width:991px) {
	.open-target .content {
		height:100%;
		top:5%;
	}
}
@media (max-width:1199px) {
	.open-target .content {
		height:100%;
		top:5%;
		width:60%;
	}
}
@media (min-width:1200px) {
	.open-target .content {
		height:100%;
		top:5%;
		width:60%;
	}

}

.open-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  z-index:9999;
}
.open-target:target .content, .open-target:target img {
  max-height: 80%;
  max-width: 80%;
}
.open-target:target .open-close {
  right:35%;
  top:13%;
}
.open_topname{
	font-size:25px;
	font-weight:bold;
}
.open_no{
	float:left;
	margin-right:5px;
}
.open_text{
	width:55%;
}
.open-close {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  top: 8%;
  right: 35%;
  border-radius:5px;
  -moz-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}
@media (min-width:1200px) {
	.open-close {
		top: 13%;
	}
	.open-target:target .open-close{
		right:35%;
		top:13%;
	}
}
@media (min-width:991px) {
	.open-close {
		top: 10%;
		right:10%;
	}
	.open-target:target .open-close{
		right:20%;
		top:10%;
	}
}
@media (min-width:767px) {
	.open-close {
		top: 10%;
		right:10%;
	}
	.open-target:target .open-close{
		right:20%;
		top:13%;
	}
}
@media (max-width:1199px) {
	.open-close {
		top: 10%;
		right:10%;
	}
	.open-target:target .open-close{
		right:20%;
		top:13%;
	}
}

.open-close:before, .open-close:after {
  content: " ";
  display: block;
  height: 25px;
  width: 2px;
  background: #139dd7;
  position: absolute;
  left: 20px;
  top: 13px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.open-close:after {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.content{
	overflow-y:auto;
}