/** Home Header Grid **/
.home-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 30px);
  grid-column-gap: 5px;
  grid-row-gap: 5px;

  height: 380px;
}
.home-grid .div1 { grid-area: 3 / 2 / 7 / 5; }
.home-grid .div2 { grid-area: 7 / 1 / 10 / 5; }
.home-grid .div3 { grid-area: 2 / 5 / 7 / 9; }
.home-grid .div4 { grid-area: 3 / 9 / 7 / 13; }
.home-grid .div5 { grid-area: 7 / 5 / 11 / 9; }
.home-grid .div6 { grid-area: 7 / 9 / 10 / 12; }

.home-grid > div {
  perspective: 500px;
  transform-style: preserve-3d;

}
.home-grid > div a {
  background: #efefef;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -50px;
  transition: 0.3s ease-out;
  background-size: cover;
  background-position: 50% 50%;
  color: white;
  font-weight: 900;
  text-shadow: 1px 1px black;
  text-decoration: none;
  font-size: 1.5em;

  display: flex;
  justify-content: start;
  align-items: end;
}
.home-grid > div:hover a {
  transform: rotate3d(1,0,0,90deg);
}
.home-grid > div a:before {
  content: '';
  width: 100%;
  height: 100%;
  top: 100%;
  background-position: 50% 50%;
  background-color: #83b4d8;
  position: absolute;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
  background-size: cover;
}
.home-grid > div a:after {
  content: '';
  background: radial-gradient(at top left, #83b4d888, #96B4CBee);
  /*background: linear-gradient(to bottom, #83b4d888, #83b4d8);*/
  /*mix-blend-mode: multiply;*/
  position: absolute;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
  width: 100%;
  height: 100%;
  opacity: 1;
  top: 100%;
  left:0;
  /*z-index: -1;*/
}

/* Grid cell specific config */
.home-grid .div1 a {
  transform-origin: 50% 50% -65px;
}
.home-grid .div1 a:after {
  content: '培訓';
}
.home-grid .div1 a,
.home-grid .div1 a:before {
  background-image: url(../images/computers.png);
}
.home-grid .div2 a,
.home-grid .div2 a:before {
  background-image: url(../images/technology.png);
}
.home-grid .div2 a:after {
  content: '資訊科技';
}
.home-grid > .div3 a {
  transform-origin: 50% 50% -83px;
}
.home-grid .div3 a:after {
  content: '文化創意';
}
.home-grid > .div3 a,
.home-grid > .div3 a:before {
  background-image: url(../images/hat.jpg);
}
.home-grid > .div4 a {
  transform-origin: 50% 50% -65px;
}
.home-grid .div4 a:after {
  content: '管理';
}
.home-grid > .div4 a,
.home-grid > .div4 a:before {
  background-image: url(../images/iso.png);
}
.home-grid > .div5 a {
  transform-origin: 50% 50% -65px;
}
.home-grid .div5 a:after {
  content: '考試認證';
}
.home-grid > .div5 a,
.home-grid > .div5 a:before {
  background-image: url(../images/exam.png);
}
.home-grid > .div6 a,
.home-grid > .div6 a:before {
  background-image: url(../images/ecm.png);
}
.home-grid .div6 a:after {
  content: '中小企服務及採購專頁';
}



/** End Home Header Grid **/

ul.posts,
ul.front-seminars-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.front-page .posts article {
  /*min-height: 100px;*/
  padding: 1em 0;
  border-bottom: 1px solid #dedede;
}


.front-page .front-seminars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.front-page .front-seminars-grid li {
  border: 1px solid #dedede;
  transition: 0.3s ease-out;
  border-radius: 2px;
}

.front-page .front-seminars-grid li:hover {
  border-color: var(--main-color);
}

.front-page .front-seminars-grid li:hover a {
  background-position: 0 100%;
}

.front-page .front-seminars-grid li img {
  width: 100%;
  object-fit: cover;
}

.front-page .front-seminars-grid li figcaption {
  padding: 0.5em;
}

.front-page h2 {
  margin: 0;
}

.squared-thumbnail img {
  width: 100%;
  height: 20vh;
  object-fit: cover;
}



.more-news {
  text-align: center;
}
.more-news a {
  padding: 1em 2em;
  display: inline-block;
  margin: 2em 0;
}





.tabs {
  display: flex;
  flex-wrap: wrap;
}
.tabs input {
  /* display: none; Bad for accessibility */
  opacity: 0;
  position: absolute;
}
.tabs section {
  display: none;
  order: 999;
  width: 100%;
  min-height: 800px;
  background: white;
}

.tabs > a,
.tabs > label {
  padding: .5em 1em;
  color: black;
  background: #b4d5e4;
  border-right: 1px solid #4F5A69;
}
.tabs > a:hover,
.tabs > label:hover {
  background: linear-gradient(120deg, #ddf2f9 50%, #89cfe6 92%);
  cursor: pointer;
}
.tabs > label:last-of-type {
  /*border-right: none;*/
}
.tabs > input[type=radio]:checked + label {
  background: #4F5A69;
  color: white;
}
.tabs > input[type=radio]:checked + label + section {
  display: unset;
}

.tabs section {
  border: 1px #4F5A69 solid;
  border-top: 5px #4F5A69 solid;
  padding: 1em;
}