@charset "UTF-8";
/* CSS Document */
/* Class identified by "."  Id indentified by "#" */

  #slideshow {
	  /*background:#FF0000;*/
	  /*background-image:url(../images/0_SliderSet_1/AB_2000.gif) ;
	  background-repeat:no-repeat; */
	  height: auto;
	  width: 100%;
	  padding: 1px;
	  xmax-width:1200px;
	  margin:auto;
	  border: solid 1px #cccccc;
	  xbox-shadow:0px 10px 10px 0px  rgba(30,30,30,0.61);
	border-radius: 0px;
  }
  #slideshow img {
	  height: auto;
	  width: 100%;
	  }
				/*#slideshow {
			width:100%;
			height:1500px;
			height:auto;
			position:relative;
			margin: 10px auto;
			background:rgba(236, 240, 241,1.0);
			background:#ffffff;
			box-shadow:0px 0px 10px 1px  rgba(30,30,30,0.61);
			border-radius:5px;
			}
		#slideshow img {
			width:100%;
			position: absolute;
			z-index:10;
			min-width:100%;
			left:0;
			right:0;
			margin:10px auto;
			}
		#pager {
			height:10%;
			width:95%;
			margin: 10px auto;
			position:relative;
			z-index:1030;
			}*/
  #pager {
	  text-align: center;
	  height: 60px;
	  width: 60%;
	  margin: auto;
	  padding: 5px;
	 position: relative;
	  bottom: 0px;
	  background: rgba(0,0,0,0);
	  z-index: 1000;
	  opacity: 1 ; /* 0;*/
	  transition: all 0.3s ease-in-out 0s;
  }
  #pager:hover {
	 opacity: 1;
  }    
  
  #prev {
	  height: 120px;
	  width: 120px;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left:0;
	  margin: auto 10px;
	  z-index: 1000;
  }
   #next {
	  height: 120px;
	  width: 120px;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  right:0;
	  margin: auto 10px;
	z-index: 1000;
  }
  
  #pager img {
	  margin: 5px 5px;
	  opacity:0.4;
	  transition:all .3s ease-in-out 0s;
	  }
  #pager img:hover {
	  opacity:1;
	  transform:scale(1.2);
	  z-index:100;
	  }
  #pager div {
	  height:60px;
	  width:25%;
	  border-radius: 1px;
	  /*background:rgba(236, 240, 241,1.0);*/
	  background: #FFF;
	  /*box-shadow:0px 0px 5px 1px rgba(0,0,0,0.50);*/
	  margin:auto auto;
	  /*margin: 5px 5px;*/
	  text-align:center;
	  position:relative;
	  float: left;
	  cursor: pointer;
	  }
  #pager div img {
	  position:absolute;
	  max-width:100px;
	  left:0;
	  top:0;
	  bottom:0;
	  right:0;
	  margin:auto;
	  }
	  
  #pagerNav {
	position: absolute;
	color:#CCCCCC;
	top:100px;
	left:5%;
	}
  /*.ThumbIndex{
	  width:100%;
	  background:#999999;
  }
  .ThumbIndex ul{
	  display:block;		
	  float:left;
  }
  ThumbIndex li img{
	  width:100px;
  }*/
/* thumbindex */

.thumbIndex-item{
    width:100%;
    height:100%;
    position:relative;
}

.thumbIndex-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}

.thumbIndex-item .image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}
.thumbIndex-item:hover .image img{
    transform:scale(1.5);
}

.thumbIndex-item .text{
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:25px;
    pointer-events:none;
    z-index:4;
    transition: .3s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    backdrop-filter: blur(5px) saturate(1.8);
}

.thumbIndex-item:hover .text{
    opacity:1;
    animation: move-down .3s linear;
    padding:1em;
    width:100%;
}
.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}


/*--------------*/







/*-------*/
.display {
	clear:both;
	position:relative;
	color:#CCCCCC;
	width:100%;
	padding:0px;
	margin:auto;
	/*position:relative;*/
	}

.display li {
	list-style-type:none;
	float:right;
	font-size:18px;
	color:#000000;
	width:10%;
	text-align:center;
	line-height:15px;
	padding:2%;
	/*border:solid ;*/
	/*margin: 2%; */
	/*border-left-width:2px;*/
	/*border: 2px solid #FF0000;*/
	/*border-radius:20px;*/
}
.display li a {
	text-decoration:none;
	color:#CCCCCC;
}
.display li :Hover {
	color:#CCCCCC;
	border-color:#666;
}  
.display li img a :hover {
	color:#999999;
}  

.display li img {
	background:#FFF;
	width:100%;
	/*max-width:150px;*/
	/*padding-bottom:10px;*/
	margin-bottom:10px;
	border:solid 2px;
	border-color:#CCCCCC;
}
@media (min-width: 40em) {
.content {
  padding-top: 4vh;
  }
}
/*	#xpagerNav div img {
		position:absolute;
		left:0;
		top:0;
		bottom:0;
		right:0;
		margin:auto;
		}
		#xpagerNav div img a{
		position:absolute;
		left:0;
		top:0;
		bottom:0;
		right:0;
		margin:auto;
		}*/