@import url('https://fonts.googleapis.com/css?family=Black+Ops+One&display=swap');
/*-----font-family: 'Black Ops One', cursive;------*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/*-----font-family: 'Noto Sans TC', sans-serif;------*/
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap');
/*-----font-family: 'Alfa Slab One', cursive;------*/
@import url('https://fonts.googleapis.com/css?family=Electrolize|Righteous|Ubuntu:700');
/*-----font-family:'Ubuntu', sans-serif;------*/


/* ------------------------------ Top Background Section ----------------------------*/
hr.UnderLineB {
  border-top: 2px solid black;
  width: 60%;
}
hr.UnderLineW {
  border-top: 2px solid white;
  width: 60%;
}
hr.UnderLineF {
  border-top: 2px solid white;
  width: 100%;
}

div#TopicBanner {
	width: 100%;
	height: 100vh;
	text-align: center;
	background: no-repeat linear-gradient(
	      rgba(0, 0, 0, 0.65), 
	      rgba(0, 0, 0, 0.65)
	    ), url(../assets/img/Banner/BrokenShop.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center ;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.Topic {
	padding-top: 15%;
}

.Topic h1{
	font-family: 'Black Ops One', cursive;
	font-size: 80px;
	color: white;
}

.TopicText {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 26px;
	color: white;
}

.TopicButton {
	width: 7%;
}

.TopicButton:hover {
	-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
    filter: blur(2px);
    width: 6%;
}

@media (max-width: 768px){

	hr.UnderLineW {
	  border-top: 2px solid white;
	  width: 90%;
	}

	.Topic {
		padding-top: 35%;
	}

	.Topic h1{
		font-family: 'Black Ops One', cursive;
		font-size: 60px;
		color: white;
	}

	.TopicText {
		font-size: 20px;
	}

	.TopicButton {
	width: 16%;
	}

	.TopicButton:hover {
		-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
	    filter: blur(2px);
	    width: 15%;
	}
}


/* ------------------------------ Top Background Section ----------------------------*/

div#GalleryMenu {
	font-family: 'Noto Sans TC', sans-serif;
	text-align: center;
}


/* ------------------------------ Tag Section ----------------------------*/
div#GalleryMenu .MenuPaddingDown {
	padding-bottom: 20px;
	padding-left: 0;
	padding-right: 0;
}	
div#GalleryMenu .TagIMGsize {
	width: 70px;
	height: 70px;
}
div#GalleryMenu .TagIMGsize:hover{
	filter:blur(1px);
}


/* ------------------------------ SHOP Section ----------------------------*/
div#AlbumStart {
	background: #000;
	font-family: 'Noto Sans TC', sans-serif;
	padding-bottom: 20px;
	padding-top: 20px;
}
div#AlbumStart h1 {
	color: white;
	text-align: center;
}


/* ------------------------------ MAP Section ----------------------------*/
div#ShopMap{
	background: black;
}
div#ShopMap h1 {
	font-family: 'Noto Sans TC', sans-serif;
	color: white;
}
div#ShopMap .WebClassMap {
	position: relative;
	height: 500px;
	width: 100%;
}

/* ------------------------------ Table Section ----------------------------*/
div#SearchBody {
	background: black;
	padding-top: 20px;
	padding-bottom: 20px;
}
div#SearchBody h1 {
	font-family: 'Noto Sans TC', sans-serif;
	color: white;
}

input {
	border-style:solid;
	border-color: black;
	background: #dddddd;
	color: #000;
}
input::placeholder {
  color: black;
  font-size: 16px;
}

table {
  font-family: 'Noto Sans TC', sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th{
  border: 1px solid #dddddd;
  text-align: left;
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #232323;
  color: #fff;
  padding: 8px;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #000;
  color: #fff;
  padding: 8px;
}

tbody#BBBB td{
	background: blue;
}
tbody#YYYY td{
	border: 1px solid black;
	background: #FDFF74;
	color: black;
}
tbody#GGGG td{
	background: green;
}