body {
  font-size:62.5%;
  height: 100%;
  background: #ddd;
}

.fs-10 {font-size:1.0em;}
.fs-11 {font-size:1.1em;}
.fs-12 {font-size:1.2em;}
.fs-13 {font-size:1.3em;}
.fs-14 {font-size:1.4em;}
.fs-15 {font-size:1.5em;}
.fs-16 {font-size:1.6em;}
.fs-17 {font-size:1.7em;}
.fs-18 {font-size:1.8em;}
.fs-19 {font-size:1.9em;}
.fs-20 {font-size:2.0em;}

.fw-3 {font-weight: 300;}
.fw-4 {font-weight: 400;}
.fw-5 {font-weight: 500;}
.fw-6 {font-weight: 600;}
.fw-7 {font-weight: 700;}
.fw-8 {font-weight: 800;}
.fw-9 {font-weight: 900;}


.expon-color {
  color:#ffffff;
}

.txtBlack {
  color:#000;
}

.btnSquareExpon {
  border:1px solid #000000;
  border-radius:4px;
  background:#64c97b;
  color:#323232;
  padding:8px;
}
.btnSquareExpon:hover {
  background:#bffdcd;
  color:#323232;
  
}
.btnSquareExpon:focus {
  outline:none;
}  
.btnSquare {
  border:1px solid #64c97b;
  border-radius:4px;
}

.subHeading {
  font-size:0.8rem;
  color: #ffffff;
  /* color:#ffffff; */
}

.expon-bg-color {
  background:#28a745;
  color:#ffffff;
}
.btn-success:hover {
  color: #fff;
  background-color: #64c97b;
  border-color: #1e7e34;
}
.expon-ondemand-section {
  position:relative;
}

.introWrap {
  text-align: center;
  background-size: auto auto;
	/*background-image: url("/expon-visitor/img/entrance_bg_29hainyo.jpg");*/
	background-size: cover;
	background-position: center center;
  background: #122F66;
  padding: 10px 10px 10px 10px;
  color: #343434;
}

.expon-under {
  color: #ffffff;
  border-bottom:3px solid #ffffff;
}

.txtWrap {
  color: #ffffff;
}

.txtWrap p {
  color: #ffffff;
  margin:0 auto;
  /* color:#ffffff; */
  font-size:1.3em;
  width:60%;
}

.btnArea{
  height: 100px;
  display: flex;
  color: #00000050;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.categoryListWrap {
  background: #f2f2f2;
    display: flex;
    font-size: 1.6em;
    color: #000000;
    min-height: 70px;
    height: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.categoryListWrap2 {
  background: #e2e2e2;
  display: flex;
  font-size: 1.6em;
  color: #000000;
  justify-content: center;
  height: 50px;
  align-content: center;
  align-items: center;
  flex-direction: row;
}


.categoryListWrap .selected{
  color: #ffffff;
  font-weight: 400;
  background: #ED7035;    
} 

.categoryListWrap2 .selected {
  color: #ffffff;
  font-weight: 400;
  background: #FE7F9C;  
}

.categoryListWrap div, 
.categoryListWrap2 div{
  padding: 0px 10px 2px 10px;
  margin:0.5% 1%;
  font-weight:400;
  border: 1px solid #afafaf;
  border-radius: 13px;
}

.listWrap {
  padding: 15px 2%;
  background: #e2e2e2;
  border-bottom: 4px solid #e2e2e2;
}

.listWrap h2 {
  color: #343434;
  font-size: 1.2rem;
  font-weight: 700;
  border-left: 7px solid #ED7035;
  margin: 0 0 0 1%;
  padding: 0 0 0 1%;
}

.categoryGroup {
  display: flex;
    width: 100%;
    justify-content: flex-start;
    /* align-items: center; */
    flex-direction: row;
    flex-wrap: wrap;
}

.watchSingle a {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.categoryGroup > .watchSingle{
	position: relative;
  /* height:330px; */
  display:table-cell;
  max-width:240px;
  width:240px;
  background:#fff;
  margin: 10px 10px 0px 10px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 4px 6px 10px 0 rgb(0 0 0 / 20%);
}

.categoryGroup .watchSingle > .thumb{
  width: auto;
    height: 180px;
    overflow: hidden;
    background: #d8d8d8;
    text-align: center;
    display: flex;
    justify-content: center;
}

.thumb img{
  width:auto;
  height:180px;
}

.watchSingleMeta {
  padding:20px;
  color: #606060;
}
.watchSingleMeta .metaCode {
  padding: 6px 0 0 0;
  font-size: 1.6em;
  color: #030303;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  word-break: keep-all;
  /* white-space: nowrap; */
}
.watchSingleMeta .metaTitle {
  padding: 6px 0 6px 0;
  font-size: 1.6em;
  color: #030303;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  word-break: keep-all;
  /* white-space: nowrap; */
}
.watchSingleMeta .metaChairpersonName {
  font-size: 1.4em;
  color: #606060;
  text-align: left;
  word-break: keep-all;
}
.watchSingleMeta .metaOtherName {
  font-size: 1.4em;
  color: #606060;
  text-align: left;
  /*word-break: keep-all;*/
}
.watchSingleMeta .metaName {
  font-size: 1.4em;
  color: #606060;
  text-align: left;
  word-break: keep-all;
}
.watchSingleMeta .metaStatus {
  font-size: 1.0em;
  font-weight: 100;
}
.watchSingleMeta .metaStatus > .attend-false {
  position: absolute;
  color: #ffffff;
  background: #c52736c4;
  padding: 4px;
  top: 0px;
  left: 0.5px;
}

.watchSingleMeta .metaStatus > .attend-true {
  position: absolute;
  color: #ffffff;
  background: #16296db3;
  padding: 4px;
  top: 0px;
  left: 0.5px;
}

.watchSingleMeta .metaInfo {
  font-size: 1.2em;
  border-top: 1px solid #e3e3e3;
  margin: 4px 0 0px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  height: 54px;
}
.watchSingleMeta .metaTime {
  visibility: hidden;
  font-size: 1.2em;
  position: relative;
  margin: -42px 0 0px 0;
  background: #00000094;
  color: #ffffff;
  padding: 2px 4px;
  width:46px;
  padding:2px 4px;
  text-align:center;
}
.watchSingleMeta .metaDate {
font-size: 1.2em;
  height: 18px;
}

.bg-expon-light {
  background:#64c97b;
}

@media screen and (max-width: 480px){
  .categoryGroup {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.categoryGroup > .watchSingle {
  position: relative;
    /* height: 360px; */
    display:table-cell;
    max-width: 360px;
    width: 360px;
    background: #fff;
    margin: 10px 10px 0px 10px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 4px 6px 10px 0 rgb(0 0 0 / 20%);
}
.categoryGroup .watchSingle > .thumb {
    width: auto;
    height: 100%;
    max-width: 360px;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.watchSingleMeta .metaStatus > .attend-false {
    position: relative;
    color: #ffffff;
    background: #c52736c4;
    padding: 4px;
    top: -333px;
    left: -20px;
}
.watchSingleMeta .metaStatus > .attend-true {
    position: relative;
    color: #ffffff;
    background: #64c97ba8;
    padding: 4px;
    top: -380px;
    left: -20px;
}
.watchSingleMeta .metaTime {
    visibility: hidden;
    font-size: 1.2em;
    position: relative;
    margin: -42px 0 0px 0;
    background: #00000094;
    color: #ffffff;
    padding: 2px 4px;
    width: 46px;
    padding: 2px 4px;
    text-align: center;
}
.listWrap {
    padding: 30px 20px;
    background: #e2e2e2;
    border-bottom: 4px solid #d5d5d5;
}
.thumb img {
    width: auto;
    height: 200px;
}
.listWrap h2 {
    margin: 0 0 0 3%;
}
.categoryListWrap {
    min-height: 100px;
}
}