@font-face {
    font-family: "SuitB";
    src: url(../font/SUIT-Bold.woff) format("woff");
}

@font-face {
    font-family: "SCD5";
    src: url(../font/SCDream5.woff) format("woff");
}




* {padding:0; border:0; margin:0;}

html, body {width: 100%; height: 100vh; overflow: hidden; /*-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;*/ -webkit-tap-highlight-color : transparent;}

/*img {
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-tap-highlight-color : transparent;
}

:focus {outline:none;}*/






.pageOutWrap { position: absolute; width: 920px; height: 400px; overflow: hidden; transform-origin: top left;}

.screenBlock {display:none; position:absolute; top:0; left:0; width:100%; height:100%;}


.timer {
    display:none;
    position: absolute;
    top: 0;
    right: 0;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 36px;
    font-size:14px;
    color:#232426;
    font-family:SuitB;
    border:solid 1px #e0e2e6;
    border-radius:20px;
}
.timer .icon {margin-right:15px;}
.timer .icon img {width:23px;}

.timer .icon img.normal {display:block;}
.timer .icon img.stop {display:none;}
.timer.stop {color:#fe5663; border-color:#fe5663;}
.timer.stop .icon img.normal {display:none;}
.timer.stop .icon img.stop {display:block;}


.cardArea {position:absolute; top:50px; left:0;}
.cardArea .card {
    position: absolute;
    width: 105px;
    height:133px;
    cursor: pointer;
}
.cardArea .card img {display:block; width:100%;}
.cardArea .card .front {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    background-color:#ffffff;

    transform: scaleX(0);
}
.cardArea .card .back {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}


/*카드 오픈*/
.cardArea .card.open {pointer-events: none;}
.cardArea .card.open .front {
    animation-name: cardOpenFront;
    animation-duration: 0.35s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.25s;
    animation-timing-function: ease-out;
}
.cardArea .card.open .back {
    animation-name: cardOpenBack;
    animation-duration: 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;

}

/*카드오픈 애니메이션*/
@keyframes cardOpenFront {
    0% {transform:scaleX(0); filter: brightness(1.05)}
    60% {transform:scaleX(1); filter: brightness(1)}
    85% {transform:scaleX(0.85); filter: brightness(0.90)}
    89% {transform:scaleX(0.9); filter: brightness(0.95)}
    100% {transform:scaleX(1);}
}

@keyframes cardOpenBack {
    0% {transform:scaleX(1);}
    100% {transform:scaleX(0); filter: brightness(0.6)}
}


/*카드클로즈*/
.cardArea .card.close .back {
    transform:scaleX(0);

    animation-name: cardCloseBack;
    animation-duration: 0.35s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.25s;
    animation-timing-function: ease-out;
}
.cardArea .card.close .front {
    animation-name: cardCloseFront;
    animation-duration: 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

/*카드클로즈 애니메이션*/
@keyframes cardCloseFront {
    0% {transform:scaleX(1);}
    100% {transform:scaleX(0); filter: brightness(0.6)}
}

@keyframes cardCloseBack {
    0% {transform:scaleX(0); filter: brightness(1.05)}
    60% {transform:scaleX(1); filter: brightness(1)}
    85% {transform:scaleX(0.85); filter: brightness(0.90)}
    89% {transform:scaleX(0.9); filter: brightness(0.95)}
    100% {transform:scaleX(1);}
}


/*카드 뒷면만*/
.cardArea .card.showBack {background-size:100% 100%; background-image:url("../images/card_b.png");}
.cardArea .card.showBack .front {opacity:0;}
.cardArea .card.showBack .back {opacity:0;}



.buttonArea {position:absolute; bottom:0; left:0; display:flex; justify-content: center; align-items: center; width:100%;}
.pageOutWrap .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 152px;
    height: 36px;
    font-size: 16px;
    color: #232426;
    font-family:SCD5;
    border-radius:20px;
    cursor:pointer;
    background-color:#ffb400;
}

.buttonArea .btnStart {display:none;}



.completePopup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display:none;
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(35, 36, 38, 0.5);
}
.completePopup .imgCell {position: relative;}
.completePopup .imgCell > img {width:270px;}
.completePopup .btnRestart {position:absolute; bottom:18px; left:50%; transform:translateX(-50%);}
.completePopup .completePopupText { font-family: SCD5; color: #fff; font-size: 22px; }
.completePopup .timer {display: flex !important; top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: 35px;}