/* CSS Document */
*{box-sizing:border-box;-ms-touch-action:none; touch-action:none}
body{display: flex; justify-content: center; align-items: center; overflow: hidden}

.tab{position: absolute; left: 0; top: 0; width:315px;  display: flex; justify-content: space-between; margin-bottom: 15px}
.btns:first-child{margin-right: 15px}
.btns{display:flex; align-items: center; justify-content: center; height: 45px; width: 255px; border-radius:5px; background-color: #8e8e8e; cursor: pointer}
.btns img{height: 18px; width:auto}
.tab .btns{width:150px; margin-right: 0 !important}
.btns.active,.btns:hover{background-color: #44bcce}
.btn_area{position: absolute; left: 0; bottom: 0; display: flex; width: 100%; justify-content: center}
.btns.orange{background-color:#FF6700;position: absolute; right: 0; top: 0; width: 150px;}
.btns.orange:hover{opacity: 0.6}
#bingo{width:1245px; height: 890px; display: flex; flex-direction: column; justify-content: center; padding-bottom: 0;  position: relative}
#bingo dl{display: flex; width: 100%;justify-content: space-between; margin:20px 0; padding:20px;  background: url("../img/arrow.png") no-repeat 520px center #fff}
#bingo dt,#bingo dd{margin: 0}
#bingo dl img{cursor: pointer}
#bingo dt{position: relative;width: 480px; display: flex; justify-content:center; flex-direction: column}
#bingo dd{display: flex; padding:10px; flex-wrap: wrap; justify-content: space-between; width: 650px;background-color:#c7dfe2; border-radius:15px}
.selected{display: flex; justify-content: space-between; flex-wrap: wrap}

.selected span{display:flex; justify-content: center; align-items: center; background-color: #ddd; border-radius: 10px; width: 150px; height: 150px; margin-top: 15px;}
.selected span:nth-child(-n+3){margin-top: 0}
.selected span.active{background-color: #ffbe55}
.selected span img{max-height: 140px; border-radius: 10px}


#bingo dd span{display: flex; width: 150px; margin-top: 10px; height: 150px; justify-content: center; align-items: center; background-color: #fff;border-radius: 10px;}
#bingo dd span:nth-child(-n+4){margin-top: 0}
#bingo dd span img{max-height: 140px; border-radius: 10px}
#bingo dd span.active img{opacity:0.2}

#bingo_ok{position: absolute;display: none; opacity:0;justify-content: center; padding-top: 225px; width: 680px; height: 366px; left: 50%; top:50%; margin-left:-340px; margin-top:-183px; background: url("../img/bingo.png") no-repeat center center #aef7ff; border-radius: 15px; z-index: 9999}
#btn_area{margin: 0}
#over_layer{display: none; padding: 30px; position: absolute; left: 0; top: 110px; width: 100%; height: 690px; background-color: #fff; flex-direction: column; align-items: center; justify-content: space-between; z-index: 9999}
#over_layer.active{display: flex !important}
#over_layer .btns{border-radius:50px; width: 200px}
body {
  -webkit-touch-callout:none;
  -webkit-user-select:none; 
}
#bingo_ok.active{
    display: flex;
    animation-name: fadeInAnime;
    animation-fill-mode:forwards;
    animation-duration:0.5s;
    animation-timing-function:ease;
    animation-delay: 0.1s;
    animation-direction:normal;
}
#bingo_ok.active.close{
    animation-name: fadeOutAnime;
    animation-fill-mode:backwards;
    animation-duration:0.3s;
    animation-timing-function:ease;
    animation-direction:normal;
}
@keyframes fadeInAnime{
    0% {
      opacity: 0;
      scale:0.5;
    }
    100% {
      opacity: 1;
      scale:1;
    }
}
@keyframes fadeOutAnime{
    0% {
      opacity: 1;
      scale:1;
    }
    100% {
      opacity: 0;
      scale:0.5;
    }
}
#bingo_ok .btns{width: 200px;}

img {
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
    user-select: none; 
    -moz-user-select: none;
    -webkit-user-select: none; 
    -ms-user-select: none;
}
.disabled{
	opacity: 0.4;
	pointer-events: none;
}