@charset "utf-8";
*{box-sizing:border-box;}
.eventTop{
	position:relative;
    width: 100%;
}
.eventWrap .eventBtn {
	position:absolute;
	bottom:-5%;
	left:10%;
	z-index: 100;
		
    display: block;
    width: 80%;
    margin: auto;
    background: #ff595e;
    border-radius: 5em;
    box-shadow: 0 12px 0 #c5353c;
	text-align:center;
}
.eventWrap .eventBtn:hover, .eventWrap .eventBtn:focus {
    background: #c5353c;
    box-shadow: 0 8px 0 #c5353c, 0 4px 0 #94181e inset;
}
.eventBtn img{
	width:auto;
	margin:.5em auto;
	display:block;
}
.eventBtn:hover img, .eventBtn:focus img {
	margin:.5em auto 0 auto;
}
.eventbottom{
	position:relative;
	padding:5em 1em 2em 1em;
	background:#efefef;
}
.eventInfo {
    background: #fff;
	color:#515151;
    padding: 1em;
    line-height: 1.75;
    border-top: 5px solid #ccc;
	border-radius:0 0 .5em .5em;
}
.eventInfo ol, .eventInfo ul{
	margin:.5em 0 .5em 2em;	
}
.eventInner{
	position:relative;
	background: url(../images/event-bingo2019/innerBg.png) bottom center repeat-y #498eaf;
	background-size:100%;
	padding:1em 1em 0 1em;
    display: -webkit-box;
}
.eventInner .eventBanner{
	width:100%;
	margin:0 auto 3em auto;
	display:block;	
}
.BLWrap {
    position: relative;
    height: 48vh;
}
.bingoList {
    text-align: center;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.bingoList li{
	display:inline-block;
	width:30%;
    margin: 0 .5%;
	vertical-align: bottom;
}
.bingoTheme {
	font-size: 2em;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    display: block;
    border-bottom: 1px solid #fff;
    padding: .25em 0 .5em 0;
    box-shadow: 0 3px 0 rgba(255,255,255,.5);
    text-shadow: 0 2px 1px rgba(0,0,0,.5);
	position:relative;
}
.bingoList .themeCard{
	display:block;
	width:100%;
	border-radius:1em 1em 0 0;
	background:#ccc;
	padding:1em;
	box-shadow: 0 -5px 5px rgba(0,0,0,.2);
	transition: all ease-out .3s;
}
#Btheme1{
	background:#015077;	
}
#Btheme2{
	background:#65c4a2;	
}
#Btheme3{
	background:#bc5f6a;	
}
.themeCard:hover, .themeCard:focus{
	padding:2em 1em;
}
.themeCard img {
    display: block;
    margin: 1em auto;
}
.bingoCardWrap{
	width:100%;
	margin:2em auto;	
    position: relative;
}
.bingoCardWrap .themeCard{
	display: block;
    width: 65%;
    border-radius: 1em;
    padding: 1em;
    box-shadow: 0 -5px 5px rgba(0,0,0,.2);
    text-align: center;
    margin: auto;
}
.bingoCardWrap .bingoTheme {
    font-size: 3em;
}
.bingoCardWrap .themeCard ul{
	margin: 2em auto;
    background: rgba(0,0,0,.2);
    padding: 1em 0;
    border-radius: 1em;
    width: 95%;
}
.bingoCardWrap .themeCard ul li{
	list-style: none;
    display: inline-flex;
    width: 30%;
    height: 220px;
    vertical-align: top;
    margin: 1% .5%;
    font-size: 1.25em;
}
.bingoCardWrap .themeCard .btn {
    display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
		
    border: none;
    width: 100%;
    overflow: visible;
    height: 100%;
    white-space: initial;
    padding: 1em 0 1em .5em;
	text-align:left;
    border-radius: 1em;
    background: #fff;
	position:relative;
}
.bingoCardWrap .themeCard .click {
    background:#fbdede;
}
.bingoCardWrap .themeCard .click:after{
	content: ' ';
    display: block;
    width: 120px;
    height: 120px;
    border: 30px solid rgba(242, 104, 104, .75);
    border-radius: 50%;
    z-index: 300;
    position: absolute;
}
.bingoCardWrap #Btheme1.themeCard .click {
    background:#fbf4c5;
}
.bingoCardWrap #Btheme1.themeCard .click:after{
    border: 30px solid rgba(247, 142, 30, .75);
}
.bingoCardWrap #Btheme2.themeCard .click {
    background:#f6e0ae;
}
.bingoCardWrap #Btheme2.themeCard .click:after{
    border: 30px solid rgba(237, 24, 107, .75);
}
.bingoCardWrap #Btheme3.themeCard .click {
    background:#70cbca;
}
.bingoCardWrap #Btheme3.themeCard .click:after{
    border: 30px solid rgba(3, 75, 97, .75);
}
.btn span {
    display: block;
    font-size: .7em;
    letter-spacing: 0;
    text-align: right;
    position: absolute;
    bottom: 4%;
    right: 3%;
    line-height: 1.2;
    color: #ccc;
}
#Btheme1 .btn span {
    color: #689cb3;
}
#Btheme2 .btn span {
    color: #ffaf00;
}
#Btheme3 .btn span {
    color: #107384;
}
.innerBtnWrap p{
	text-align: center;
    color: #f2da00;
    font-size: 1.25em;
    font-weight: bold;	
}
.innerBtnWrap .eventBtn{
	position: relative;
    margin: 2em auto;
    bottom: unset;
    left: unset;
    width: 70%;
	padding: 0;
    border: none;
}
.innerBtnWrap input.eventBtn{
	padding: 1.5em 0;
}
.innerBtnWrap .inner-OKBtn, .innerBtnWrap .inner-OKBtn:hover, .innerBtnWrap .inner-OKBtn:focus{
    margin: 1em auto 2em auto;
	background:url(../images/event-bingo2019/bingoBtn2.png) center no-repeat #ff595e;
	background-size:50%;
	cursor:pointer;
}
.innerBtnWrap .inner-OKBtn:hover, .innerBtnWrap .inner-OKBtn:focus{
	background:url(../images/event-bingo2019/bingoBtn2.png) center no-repeat #c5353c;
	background-size:50%;
	box-shadow: 0 8px 0 #c5353c, 0 4px 0 #94181e inset;
}
.endInfo{
	font-size:1.75em;
	text-align:center;
	margin-bottom:3em;
}
.endInfo .b-Txt{
	font-size:1.75em;
	margin:.5em 0 .25em 0;
	color:#ff5454;
	font-weight:bold;
}
.endInfo img{
	width:70%;
	margin:auto;
}
.endInfo .b-Txt img{
	width:80%;
}
.cardDeco {
    position: absolute;
}
#Btheme1 .cardDeco, #Btheme2 .cardDeco, #Btheme3 .cardDeco {
	top: -10%;
    width: 20%;
    right: 15%;
}
.themeCard img.cardLogo {
    width: 20%;
    display: block;
    margin: 0;
    position: absolute;
    left: 0;
}
.numList{
    margin:1em 0 1em 2.5em;
}
.numList li{
    padding:.5em 0;
}
@media screen and (max-width:414px){
.eventWrap .eventBtn {
    box-shadow: 0 6px 0 #c5353c;
}
.innerBtnWrap input[type="button"].eventBtn {
	padding: 1em 0;
    width: 100%;
    background-size: 80%;
}
.eventBtn img {
    width: 80%;
}
.eventbottom {
    padding: 2em 1em;
}
.eventInner .eventBanner {
	width: 100%;
    margin: 0;
}
.BLWrap {
    height: auto;
}
.bingoList{
    position: relative;
	margin-bottom:2em;
}
.bingoList li {
    width: 90%;
    margin: 2% auto;
}
.bingoList .themeCard {
    border-radius: 1em;
}
.themeCard img {
	width:70%;
}
.bingoCardWrap .themeCard{
    width: 100%;
}
.bingoCardWrap .themeCard ul li {
	width: 90%;
    margin: 1%;
}
.cardDeco {
    position: relative;
}
#Btheme1 .cardDeco, #Btheme2 .cardDeco, #Btheme3 .cardDeco {
    width: 80%;
	top: unset;
    right: unset;
	margin:auto;
}
.eventInner .themeCard img {
    margin: 0 auto;
}
.themeCard img.cardLogo {
    width: 25%;
    display: block;
    margin: 0;
    position: absolute;
    left: 0;
}
.themeCard img.cardLogo {
    width: 50%;
    display: block;
    margin: 0 auto;
    position:relative;
    left: 0;
}
.endInfo {
    margin-bottom: 0;
}
.endInfo .b-Txt {
    margin: 0;
	font-size:1em;
}
.endInfo img, .endInfo .b-Txt img{
	width:100%;
}
}
@media screen and (min-width:415px) and (max-width:1100px){
.eventWrap .eventBtn {
    box-shadow: 0 6px 0 #c5353c;
  }
.eventBtn img {
    width: 80%;
}
.eventbottom {
    padding: 4em 1em 2em 1em;
}
.eventInner .eventBanner {
    width: 50%;
}
.BLWrap {
    height: 40vh;
}
.bingoCardWrap .themeCard {
    width: 95%;
}
.bingoCardWrap .themeCard ul li {
    height: 320px;
}
.bingoCardWrap .themeCard .click:after {
    width: 80px;
    height: 80px;
    border: 25px solid rgba(242, 104, 104, .75);
}
}