@charset "utf-8";

/* 숫자력 테스트 */

#game #bee{width: 22%;height: 11.6%;left: 40%;top: 8.2%;}
#game #bee span{display:block;width:100%;height:100%;background-image:url(https://dbins2.speedgabia.com/jjansun/images/game1/bee_default.png);background-size: contain; background-repeat: no-repeat;}
#game #bee span.win{background-image:url(https://dbins2.speedgabia.com/jjansun/images/game1/bee_win.png)}
#game #bee span.lose{background-image:url(https://dbins2.speedgabia.com/jjansun/images/game1/bee_lose.png)}

#game .state{width: 84%;top: 14%;left: 8%;}
#game .state .txt{color:#fff;font-size: 21px;font-weight: 600;}
#game .state .level{float:left;}
#game .state .time{float:right;}
#game .state .time em{margin-left:10px;}

#game .cardContainer{width: 85%;height: 63.3%;top: 19.5%;left: 7.5%;}
#game .cardContainer .card{ overflow:hidden; position: absolute; cursor:pointer; background-color: #ffffff;}
#game .cardContainer .card{font-weight: 800; color:#6997ff;}
#game .cardContainer .card.disable {cursor:default; background-color: #6997ff; color:#fff;}



/*2x2*/
#game .cardContainer.l1 .card{width:42%; height:36%; border-radius:15px;}
#game .cardContainer.l1 .card{font-size:90px; line-height:190px;}
#game .cardContainer.l1 .card.card0{top:13%; left:6%;}
#game .cardContainer.l1 .card.card1{top:13%; left:53%;}
#game .cardContainer.l1 .card.card2{top:53%; left:6%;}
#game .cardContainer.l1 .card.card3{top:53%; left:53%;}
#game .cardContainer.l2 .card{width:42%; height:36%; border-radius:15px;}
#game .cardContainer.l2 .card{font-size:90px; line-height:190px;}
#game .cardContainer.l2 .card.card0{top:13%; left:6%;}
#game .cardContainer.l2 .card.card1{top:13%; left:53%;}
#game .cardContainer.l2 .card.card2{top:53%; left:6%;}
#game .cardContainer.l2 .card.card3{top:53%; left:53%;}

/*3x3*/
#game .cardContainer.l3 .card{width:29%; height:25.5%; border-radius:12px;}
#game .cardContainer.l3 .card{font-size:85px; line-height:140px;}
#game .cardContainer.l3 .card.card0{top:10.5%; left:4%;}
#game .cardContainer.l3 .card.card1{top:10.5%; left:36.5%;}
#game .cardContainer.l3 .card.card2{top:10.5%; left:69%;}
#game .cardContainer.l3 .card.card3{top:38.5%; left:4%;}
#game .cardContainer.l3 .card.card4{top:38.5%; left:36.5%;}
#game .cardContainer.l3 .card.card5{top:38.5%; left:69%;}
#game .cardContainer.l3 .card.card6{top:66.5%; left:4%;}
#game .cardContainer.l3 .card.card7{top:66.5%; left:36.5%;}
#game .cardContainer.l3 .card.card8{top:66.5%; left:69%;}

#game .cardContainer.l4 .card{width:29%; height:25.5%; border-radius:12px;}
#game .cardContainer.l4 .card{font-size:85px; line-height:140px;}
#game .cardContainer.l4 .card.card0{top:10.5%; left:4%;}
#game .cardContainer.l4 .card.card1{top:10.5%; left:36.5%;}
#game .cardContainer.l4 .card.card2{top:10.5%; left:69%;}
#game .cardContainer.l4 .card.card3{top:38.5%; left:4%;}
#game .cardContainer.l4 .card.card4{top:38.5%; left:36.5%;}
#game .cardContainer.l4 .card.card5{top:38.5%; left:69%;}
#game .cardContainer.l4 .card.card6{top:66.5%; left:4%;}
#game .cardContainer.l4 .card.card7{top:66.5%; left:36.5%;}
#game .cardContainer.l4 .card.card8{top:66.5%; left:69%;}

/*4x4*/
#game .cardContainer.l5 .card{width:22%; height:19.5%; border-radius:10px;}
#game .cardContainer.l5 .card{font-size:57px; line-height:108px;}
#game .cardContainer.l5 .card.card0{top:10%; left:3.5%;}
#game .cardContainer.l5 .card.card1{top:10%; left:27.5%;}
#game .cardContainer.l5 .card.card2{top:10%; left:51.5%;}
#game .cardContainer.l5 .card.card3{top:10%; left:75.5%;}
#game .cardContainer.l5 .card.card4{top:31%; left:3.5%;}
#game .cardContainer.l5 .card.card5{top:31%; left:27.5%;}
#game .cardContainer.l5 .card.card6{top:31%; left:51.5%;}
#game .cardContainer.l5 .card.card7{top:31%; left:75.5%;}
#game .cardContainer.l5 .card.card8{top:52%; left:3.5%;}
#game .cardContainer.l5 .card.card9{top:52%; left:27.5%;}
#game .cardContainer.l5 .card.card10{top:52%; left:51.5%;}
#game .cardContainer.l5 .card.card11{top:52%; left:75.5%;}
#game .cardContainer.l5 .card.card12{top:73%; left:3.5%;}
#game .cardContainer.l5 .card.card13{top:73%; left:27.5%;}
#game .cardContainer.l5 .card.card14{top:73%; left:51.5%;}
#game .cardContainer.l5 .card.card15{top:73%; left:75.5%;}



#game .cardContainer .card.hint{box-shadow: 0 0 0 5px #6997ff inset; animation: blink 1s;  animation-iteration-count: 10;}
@keyframes blink { 50% {   box-shadow: 0 0 0 1px #6997ff inset; }  }

#game .nextLevel{width:100%; bottom: 46%;left:0%; z-index: 10;display: none;font-size: 48px; letter-spacing: 2px; color: #fff;font-weight: 800;}

#controls{display: none;}



#game .cardContainer.l1 .card{font-size:24vw; line-height:34vw;}
#game .cardContainer.l2 .card{font-size:24vw; line-height:34vw;}
#game .cardContainer.l3 .card{font-size:15vw; line-height:26vw;}
#game .cardContainer.l4 .card{font-size:15vw; line-height:26vw;}
#game .cardContainer.l5 .card{font-size:12vw; line-height:19vw;}


@media (min-width: 450px){
    #game .cardContainer.l1 .card{font-size:90px; line-height:160px;}
    #game .cardContainer.l2 .card{font-size:90px; line-height:160px;}
    #game .cardContainer.l3 .card{font-size:70px; line-height:110px;}
    #game .cardContainer.l4 .card{font-size:70px; line-height:110px;}
    #game .cardContainer.l5 .card{font-size:55px; line-height:85px;}
}