
/*
html, body, div, ul, li, img, h1, h2, h3, h4, h5, p {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;}
*/

/**{box-sizing:border-box;} */
/*body
{
    font-family: "Roboto", 'Noto Sans KR', "Nanum Gothic", sans-serif, AppleSDGothicNeo-Regular ;
    font-weight:500;
    font-size:12px;
    color:#444444;
    line-height:16px;
    letter-spacing: 0;
    word-spacing: 0;
    background-color:#ffffff;
}*/



/*ul, ol, dl, dt, dd {list-style:none}*/
#hhw-game.modal {background: #fd8204;}
#hhw-game.modal:after {content: ''; position: absolute; width: 100%; height: var(--safeBtm); left: 0; bottom: 0; background: #e87205; }
#hhw-game.modal .modal-close {right: 15px;}
#hhw-game.modal .modal-header {height: auto;}
#hhw-game.modal .modal-contents {padding: 0;}
#hhw-game .game{padding: 20px;}
#hhw-game.modal .modal-container {background-color: #e87205;}
#hhw-game.modal .modal-container .game-img { position: relative; background: #fd8204;}
#hhw-game.modal .modal-container .game-img img { width: 100%; vertical-align: top;}
#hhw-game video {object-fit: fill;}
#hhw-game  select::-ms-expand { display: none; }
.liSelectWrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    font-size:2.3em;
    color:#f15a22;
    position:absolute;
    top: 18%;
    left: 29.5%;
    width: 55.7%;
    height: 58.5%;
    border:0;
    text-indent: 1em !important;
    outline:none;
}


.game_wrap {position:relative;width: 100%;max-width: 768px;margin:0 auto;}
.game_wrap img {width: 100%;border-style: none;letter-spacing:none;word-spacing:none;border:none;margin:0;padding:0;outline:0;vertical-align:middle;line-height:0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;}
.game_wrap .timer {position: absolute;top: 0;left: 0;width:100%;overflow: hidden;}
.game_wrap .timer .timer_bar{position: absolute;top: 0;left: 27.2%;width: 69.5%;height: 100%;}
.game_wrap .timer .timer_bar img{position:absolute;top:0px;left:0px;width: unset;height: 100%;}
.game_wrap .timer .timer_cover{position: absolute;top:0;left:0;width:100%;}
.game_wrap .timer .digit_1{position: absolute;top: 26.6%;left: 17.3%;width: 2.53%;height: 33.29%;}
.game_wrap .timer .digit_2{position: absolute;top: 26.6%;left: 19.9%;width: 2.53%;height: 33.29%;}

.game_wrap .game_board{position: absolute;top: 9.7%;left: 0;width: 100%;}
.game_wrap .game_board .card_line{position: absolute;top: 2.5%;left: 2.5%;width: 95.8%;height: 25%;}
.game_wrap .game_board .card_line1{top:0%;}
.game_wrap .game_board .card_line2{top: 26.3%;}
.game_wrap .game_board .card_line3{top: 50%;}
.game_wrap .game_board .card_line4{top: 73.9%;}
.game_wrap .game_board .card_line .card{position:absolute;width: 22.4%;height: 88.9%;}
.game_wrap .game_board .card_line .cardPos1{top: 4.7%;left: 1.2%;}
.game_wrap .game_board .card_line .cardPos2{top: 4.7%;left: 26%;}
.game_wrap .game_board .card_line .cardPos3{top: 4.7%;left: 50.8%;}
.game_wrap .game_board .card_line .cardPos4{top: 4.7%;left: 75.7%;}
.game_wrap .game_board .inside{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.game_wrap .game_board .outside{position: absolute;top: 0;left: 0;width: 100%;}
.game_wrap .dashboard {position: absolute;bottom: 0px;left:0;width: 100%;}
.game_wrap .dashboard .chip{width: 11.8%;position: absolute;top: 0;left: 0;}
.game_wrap .dashboard .chip1 {left: 0.5%;}
.game_wrap .dashboard .chip2 {left: 13%;}
.game_wrap .dashboard .chip3 {left: 25.45%;}
.game_wrap .dashboard .chip4 {left: 38%;}
.game_wrap .dashboard .chip5 {left: 50.45%;}
.game_wrap .dashboard .chip6 {left: 62.85%;}
.game_wrap .dashboard .chip7 {left: 75.35%;}
.game_wrap .dashboard .chip8 {left: 87.75%;}

.game_board .outside, .game_board .inside {cursor:pointer;display: block;position: absolute;top: 5%;left: 5%;width: 90%;height: 90%;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: -webkit-transform 0.3s;transition: transform 0.3s;}

.game_board .outside {
    background-color: none;
}

.game_board .inside {
    background-color: none;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

/* some transforms for flipped cards */
.flipped .outside {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flipped .inside {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

.n-0, .n-3, .n-4, .n-9, .n-2,
.n-5, .n-6, .n-7, .n-8, .n-1
{ max-width: 100%; background-size: 100%; background-image: url('../images/sprite_number.png'); }

.n-0 { background-position: 0 0%; background-size: 100%; }
.n-3 { background-position: 0 11.297071%; background-size: 100%; }
.n-4 { background-position: 0 22.5%; background-size: 100%; }
.n-9 { background-position: 0 33.472803%; background-size: 100%; }
.n-2 { background-position: 0 44.583333%; background-size: 100%; }
.n-5 { background-position: 0 55.648536%; background-size: 100%; }
.n-6 { background-position: 0 66.945607%; background-size: 100%; }
.n-7 { background-position: 0 77.916667%; background-size: 100%; }
.n-8 { background-position: 0 89.121339%; background-size: 100%; }
.n-1 { background-position: 0 100%; background-size: 100%; }