@import url(../../css/font.css);
@import url(../../css/init.css);
@import url(../../css/vars.css);
@import url(../../css/srgntopbar.css);
@import url(../../css/srgnmenu.css);
@import url(../../css/srgnfooter.css);
@import url(../../css/pageheader.css);

body{
  background-color: rgb(228, 228, 228);
}

.headerarea{
  background-image: url(../../image/cbgrd.png);
}

.boardcnt{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
}
.boarditem{
  /* background: linear-gradient(150deg, var(--sec-bg-col) 50%, #0a486f 50%); */
  background-image: url(../image/itembgrd.jpg);
  background-position: top left;
background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  width: 500px;
}

.leftcol{
  padding: 1rem 0 1rem 1rem;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.leftcol p{
  font-family: 'Fahkwang-Medium', 'Courier New', Courier, monospace;
  font-size: 1rem;
text-align: justify;
color: white;
}

.ctrcol{
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  margin: 2rem 0;
  padding: 1rem;
}

.ctrcol > img{
  display: block;
  width: 250px;
  /* border-radius: 50%; */
  box-shadow: 2px 4px 5px rgba(0, 0, 0, .2), 3px 8px 5px rgba(0, 0, 0, .2), 4px 10px 5px rgba(0, 0, 0, .2), 5px 12px 5px rgba(0, 0, 0, .2), 6px 14px 5px rgba(0, 0, 0, .2);
}

.rgtcol{
  width: 2%;
}

.boardcont{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0.2rem 0;
}

.boardcont img{
  width: 25px;
}

.dirname{
  width: 100%;
  font-family: 'Fahkwang-Medium', 'Courier New', Courier, monospace;
  font-size: 1.1rem;
text-align: justify;
color: rgb(79, 77, 77);
text-align: center !important;
padding: 1rem 0 0 0;
line-height: 1.2rem;
}

.dirqual{
  width: 100%;
  font-family: 'Fahkwang-Medium', 'Courier New', Courier, monospace;
  font-size: 0.8rem;
color:var(--sec-bg-col);
text-align: center !important;
line-height: 1rem;
}

.dirpos{
  width: 100%;
  font-family: 'Fahkwang-Medium', 'Courier New', Courier, monospace;
  font-size: 0.9rem;
text-align: justify;
color: rgb(79, 77, 77);
text-align: center !important;
line-height: 1.1rem;

}


/* blockquote { max-width: 25rem; margin-inline: auto } */

blockquote.q-card-color-2{
  --accent-color: rgb(243 243 243);
  --bg-color: rgb(33 29 30);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(33 29 30);
}

blockquote.q-card{
  color: var(--text-color, black);
  display: grid;
  gap: 1rem;
  background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
  background-size: 0.5rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 1.2rem;
}
blockquote.q-card::before{
  --qHeight: 4rem;
  content: "";
  margin-left: calc(var(--padding) * -1);
  margin-top: calc(var(--padding) * -1);
  height: var(--qHeight);
  width: calc(var(--qHeight) * 1.1);
  background-image:
    radial-gradient(
      circle at bottom right,
      transparent calc(var(--qHeight) / 4 - 1px),
      var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), 
      transparent calc(var(--qHeight) / 2 + 1px)
    ),
    linear-gradient(var(--accent-color, black), var(--accent-color, black));
  background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
  background-position: top left, bottom left;
  background-repeat: space no-repeat
}

@media screen and (max-width:500px) {
  .boarditem{
    width: 100%;
    flex-direction: column;
    .rgtcol{
      display: none;
    }
  }
  .leftcol{
    width: 100%;
  }
  .ctrcol{
    width: 100%;
  }
  
}