.eventList{
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 40px;
}

.eventFlowIntroTxt{
width: 70%; margin: 0 auto;}

.eventList li{padding: 20px;background:#efefef ;}

.eventList li a{transition: all 0.5s ease;}

.eventList li  .imgBox{position: relative; overflow: hidden;}
.eventList li > a{background: #000; display: block;}
.eventList li > a:hover,
.eventList li > a:hover img{opacity: 1;}

.eventList li  .txtBox{padding: 20px;}
.eventList li  .txtBox{}


.eventList li .whitebar{
    position: absolute; width: 10px; height: 100%; opacity: 1; background: #fff;top: 0; left: -100px;transform: skewX(-50deg);
}
.eventList li a .thumb{transition: all 0.5s ease;}
.eventList li a:hover .whitebar{left: 0; width: 230px; opacity: 0; transition: all 0.3s ease;}
.eventList li a:hover .thumb{transform: scale(1.02); opacity: 0.8;transition: all 0.5s ease;}

.eventList a .stopIcon{display: none;}


.eventList a .borderArea{border: 5px solid #ccc; display: block; position: absolute; width: 100%; height: 100%;box-sizing: border-box; top: 0;transition: all 0.3s ease;}
.eventList .stop a .stopIcon{ display:block; width: 350px; height: 110px; position: absolute; background:rgba(0,0,0,0.8); color: #fff; border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.eventList .stop a .stopIcon >.inner{display: block; position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    line-height: 1.1em;
padding: 0;
font-size: 16px;
width: 100%;
text-align: center;
letter-spacing: 0.2em;
}

.eventList .stop a .stopIcon{}
.pageCont .eventList .stop a .stopIcon p.appClosed{ background: #b8045e; color: #fff; text-align: center; line-height: 1.2em; width: 50%; margin: 0 auto;font-family: roboto; letter-spacing: 0.1em;padding: 0.2em 0; font-size: 80%;margin-bottom: 0.5em; border-radius: 3px;}
.pageCont .eventList .stop a .stopIcon p.jpTxt{margin-bottom: 0; font-size: 90%; font-weight: bold; letter-spacing: 0.1em;}


.eventList a:hover .borderArea{border: 10px solid #b7055f;z-index: 10;transition: all 0.3s ease;}

.eventList h3{ color: #333; padding-bottom: 10px; font-size: 18px;text-align: left;font-weight: 800; line-height: 1.5em;}

dl.evTable{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}
dl.evTable dt{
	padding: 5px;
	width: 90px;
    font-weight: bold;
}
dl.evTable dd{
	padding: 5px;
	width: calc(100% - 90px);
    font-weight: bold;
}

dl.evTable dt span{ display: inline-block; width: 80px; font-size: 12px; color: #fff; background: #3c212e; border-radius: 5px; text-align: center; padding: 5px 0; line-height: 1em; font-weight: bold;}
dl.evTable dt span.redIcon{background: #b7055f;}

dl.evTable dd a.eventAccess{display: inline-block; width: 70px; font-size: 11px; color: #333; background:none;
 border-radius: 5px; border: 1px solid #666; text-align: center; padding: 2px 3px 4px 0; line-height: 1em; position: relative;text-indent: 0.5em;}
dl.evTable dd a.eventAccess:before {
  content: '';
  width: 3px;
  height: 3px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto;
}

.eventList.stop{}
.eventList .stop img{ filter: blur(6px);}
.eventList .stop a{pointer-events: none;}
.eventList .stop a:hover{ border: none;}



@media(max-width:750px){


.eventFlowIntroTxt{
width: 100%; margin: 0 auto;}



.eventList .stop a .stopIcon{ width: 80%; height: 170px;}
.pageCont .eventList .stop a .stopIcon p.appClosed{ font-size: 20px;}
.pageCont .eventList .stop a .stopIcon p.jpTxt{font-size: 26px;}

}



@media(max-width:750px){

.eventList{
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 40px;
    row-gap: 40px;
}

.eventList h3{ color: #333; padding-bottom: 10px; font-size: 26px;text-align: left;font-weight: 800; line-height: 1.5em;}
dl.evTable dt span{width: 120px;   font-size: 18px; padding: 5px 0; }


dl.evTable dt{
	padding: 5px;
	width: 130px;
    font-weight: bold;
}
dl.evTable dd{
	padding: 5px;
	width: calc(100% - 130px);
    font-weight: bold;
}


dl.evTable dd a.eventAccess{display: inline-block; width: 130px; font-size: 16px; color: #333; background:none;
 border-radius: 5px; border: 1px solid #666; text-align: center; padding: 4px 3px 6px 0; line-height: 1em; position: relative;text-indent: 0.5em;}
dl.evTable dd a.eventAccess:before {
  content: '';
  width: 3px;
  height: 3px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto;
}




}


.eventFlow{  width: 70%; margin: 30px auto 50px;}

.eventFlow li{border: 1px solid #bbb; border-radius: 5px;
    background-image: -moz-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(255,255,255) 100%);}
.eventFlow li.arrow{ border:none; padding-left: 60px;padding-bottom: 5px; background: none;}
.eventFlow li.arrow img{ width: 20px;}

.eventFlow li >.inner{padding: 30px;}
.eventFlow dl{ display: table; width: 100%;}
.eventFlow dt{ display: table-cell; vertical-align: top; width: 13%;}
.eventFlow dt .icon{ display: inline-block;vertical-align: top;}
.eventFlow dt .icon img{ width: 100%; vertical-align: bottom;}
.eventFlow dt .title{display: inline-block;vertical-align: top; font-size: 20px; color:#b8045e; font-weight: 800;padding-left: 15px;}
.eventFlow dd{display: table-cell; vertical-align: top;  box-sizing: border-box;padding-left: 20px; position: relative;}
.eventFlow dd p{ display: inline-block; padding: 0 0 0 20px;font-size: 18px;font-weight: 700;margin-bottom: 0;
    position: relative;}

.eventFlow dd a{border-bottom: 1px dashed #7f003e;}


.eventEntryBtn{ text-align: center;}
.eventEntryBtn a{ width: 300px; display: inline-block;}
.eventEntryBtn a:hover{ opacity: 0.9;}
@media(max-width:750px){

.eventFlow{  width: 100%; margin: 30px auto 50px;}
.eventFlow dt{ display: table-cell; vertical-align: top; width: 20%;}
.eventFlow dd p{ font-size: 24px; position: static;}
.eventEntryBtn a{ width: 500px; display: inline-block;}

}






@media(min-width:751px){


}





@media(max-width:750px){




}