@import url(fonts/clear-sans.css);

* {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

/*popup message의 버튼 컨테이너*/
.btn-container{
    border:1px dashed gray;
    position: relative;
    text-align: right;
    padding-right: 25px;
}

/*팝업 메시지 오른쪽 위에 붙은 버튼*/
.popup-message-button    {
    /*position: absolute;
    top:0;*/
    margin: 0 auto;
    display: inline-block;
    /*.intabdiv p class 때문에 color 속성이 안먹힘
    color:#333 !important;*/
}

.popup-message-button.solution  {
    right:100px;
}
.popup-message-button.restart  {
    right:0px;
}


.popup-message-button p {
    background-color: #ddd;
    color:#333 !important;
}




a.reset-button:hover {
    color: #fff;
}

.btn-group {
    position: fixed;
    left: 0;
    bottom: 1;

}


.new-game-div {
    display: -webkit-inline-box;

}

html, body {
    margin: 0;
    padding: 0;
    background:url('../img/bg.jpg');
    color: #00528b;
    font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    /* background-image: url("../img/160_1748.png"); */

}

body {
    /*margin: 80px 0;*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

@-webkit-keyframes move-up {
    0% {
        top: 25px;
        opacity: 1;
    }

    100% {
        top: -50px;
        opacity: 0;
    }
}

@-moz-keyframes move-up {
    0% {
        top: 25px;
        opacity: 1;
    }

    100% {
        top: -50px;
        opacity: 0;
    }
}

@keyframes move-up {
    0% {
        top: 25px;
        opacity: 1;
    }

    100% {
        top: -50px;
        opacity: 0;
    }
}

p {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.65;
    display: inline-block;
    text-align: center;
}

i {
    font-style: normal;
}

a {
    color: #776e65;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.container {
    /*width: 900px;*/
    margin: auto;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

h1.title {
    font-size: 50px;
    font-weight: bold;
    margin: 0 auto;
    padding-top:60px;
    display: block;
    text-align: center;
    /*float: left;*/
}


.horse {
    width: 50px;
    opacity: 0.8;
}

img.inverse {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipV;
    -ms-filter: 'FlipV'
}

.scores-container {

    float: right;
    text-align: right;
}

.score-container, .best-container {
    position: relative;
    display: inline-block;
    background: #bbada0;
    padding: 15px 25px;
    font-size: 25px;
    height: 25px;
    line-height: 47px;
    font-weight: bold;
    border-radius: 3px;
    color: white;
    margin-top: 8px;
    text-align: center;
}

.score-container:after, .best-container:after {
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: #eee4da;
}

.score-container .score-addition, .best-container .score-addition {
    position: absolute;
    right: 30px;
    color: red;
    font-size: 25px;
    line-height: 25px;
    font-weight: bold;
    color: rgba(119, 110, 101, 0.9);
    z-index: 100;
    -webkit-animation: move-up 600ms ease-in;
    -moz-animation: move-up 600ms ease-in;
    animation: move-up 600ms ease-in;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}

.score-container:after {
    content: "Score";
}

.best-container:after {
    content: "Best";
}

.above-game:after {
    content: "";
    display: block;
    clear: both;
}

.reset-button {

    position: absolute;
    top:0;
    right:-33px;
    margin: 0 auto;
    display: block;
}

.next-level-button {

    background: #8f7a66;
    border-radius: 3px;
    padding: 0 0px;
    text-decoration: none;
    color: #f9f6f2;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto;
    display: block;
    width: 120px;
}

.game-container {
    margin-top: 40px;
    position: relative;
    top: 15px;
    margin: auto;

    padding: 15px;
    cursor: default;
    -webkit-touch-callout: none;
    -ms-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    background: #313131;/* 바둑판 색깔 */
    /*border-radius: 6px; */
    width: 375px;
    height: 375px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.game-container .game-message {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(238, 228, 218, 0.5);
    z-index: 100;
    text-align: center;
    -webkit-animation: fade-in 800ms ease 1200ms;
    -moz-animation: fade-in 800ms ease 1200ms;
    animation: fade-in 800ms ease 1200ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}

.game-container .game-message p {
    font-size: 60px;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    margin-top: 222px;
}

.game-container .game-message .lower {
    display: block;
    margin-top: 59px;
}

.game-container .game-message a {
    display: inline-block;
    background: #8f7a66;
    /* border-radius: 3px; */
    padding: 0 20px;
    text-decoration: none;
    color: #f9f6f2;
    height: 40px;
    line-height: 42px;
    margin-left: 9px;
}

.game-container .game-message a.keep-playing-button {
    display: none;
}

.grid-container {
    position: absolute;
    z-index: 1;
}

.grid-row {
    margin-bottom: 10px;
}



.grid-row:last-child {
    margin-bottom: 0;
}

.grid-row:after {
    content: "";
    display: block;
    clear: both;
}

.grid-cell {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    float: left;
   border-radius: 3px;
}



.level-container {
    position: relative;
    top: 15px;
    left:50%;
    margin-left:-107px;
    text-align: center;
    width: 214px;
    height: 40px;
    background: url("../img/btn_level_bg.png");
    clear:both;
    cursor: default;
    -webkit-touch-callout: none;
    -ms-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    margin-bottom:20px
}

.knightbg {
    position: absolute;
    top: -154px;
    left: -109px;
    background:url("../img/knight_bg.png");
    width:215px;
    height:293px;

}



/*.level-grid-container {
    position: relative;
    z-index: 1;
}

.level-row {
    margin: auto;
}*/

.level-cell {
    /*width: 50px;
    height: 50px;
     margin: 0 10px;
     float: left;*/
    float:left;
    padding:0;
    margin:0;
    /*border-radius: 3px;
    line-height: 50px;
    margin: 0 auto;*/
}

.level {
    /*background: #eedc1d; 숫자 키 */
    z-index: 10;
    /*background: #f0f8e5;rgba(147, 141, 135, 0.23); 레벨 버튼 색*/
}


.game-container .game-message.game-won, .game-container .game-message.game-over {
    display: block;
}

.number {
    border-radius: 3px;
    /*background: #eedc1d;*/
    text-align: center;
    font-weight: bold;
    z-index: 10;
    font-size: 19px;
    opacity: 0.0;
}


@font-face{
    font-family: blockquote_font;
    /*src: url('fonts/LeeHyunJi.ttf');*/
    src:url('fonts/yanolja.ttf');
}

blockquote {
    display:none;
    border:solid #999;
    border-width:3px 0;
    margin:10px 40px;
    padding:15px;
    font-size:20px;
    color: #383838;
    text-align: center;
    font-family: blockquote_font;
}
.game-explanation p {
    display: block;
    text-align: center
}


.current_lvl{
   /* background: #9da4ff; 호버시 레벨 버튼 색깔 */
}
.grid-cell:last-child {
    margin-right: 0;
}

@media screen and (max-width: 520px) {

    @media screen and (max-width: 520px) {
    }

    @media screen and (max-width: 520px) {
    }

    @media screen and (max-width: 520px) {
    }

    @media screen and (max-width: 520px) {
    }

    @media screen and (max-width: 520px) {
    }

    @-webkit-keyframes appear {
        0% {
            opacity: 0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    @-moz-keyframes appear {
        0% {
            opacity: 0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes appear {
        0% {
            opacity: 0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }


    @-webkit-keyframes pop {
        0% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }

        50% {
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            transform: scale(1.2);
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    @-moz-keyframes pop {
        0% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }

        50% {
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            transform: scale(1.2);
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes pop {
        0% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }

        50% {
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            transform: scale(1.2);
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }

    @media screen and (max-width: 520px) {
        html, body {
            font-size: 15px;
        }

        body {
            margin: 20px 0;
            padding: 0 20px;
        }

        .container {
            width: 280px;
            margin: 0 auto;
        }

        .game-container {
            margin-top: 17px;
            position: relative;
            padding: 10px;
            cursor: default;
            -webkit-touch-callout: none;
            -ms-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -ms-touch-action: none;
            touch-action: none;
            background: #109bdb; /* 바둑판 색깔 잘못 수정 */
            /*border-radius: 6px;*/
            width: 280px;
            height: 280px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .game-container .game-message {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(238, 228, 218, 0.5);
            z-index: 100;
            text-align: center;
            -webkit-animation: fade-in 800ms ease 1200ms;
            -moz-animation: fade-in 800ms ease 1200ms;
            animation: fade-in 800ms ease 1200ms;
            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .game-container .game-message p {
            font-size: 60px;
            font-weight: bold;
            height: 60px;
            line-height: 60px;
            margin-top: 222px;
        }

        .game-container .game-message .lower {
            display: block;
            margin-top: 59px;
        }

        .game-container .game-message a {
            display: inline-block;
            background: #8f7a66;
            border-radius: 3px;
            padding: 0 20px;
            text-decoration: none;
            color: #f9f6f2;
            height: 40px;
            line-height: 42px;
            margin-left: 9px;
        }

        .game-container .game-message a.keep-playing-button {
            display: none;
        }

        .game-container .game-message.game-won {
            background: rgba(237, 194, 46, 0.5);
            color: #f9f6f2;
        }

        .game-container .game-message.game-won a.keep-playing-button {
            display: inline-block;
        }

        .game-container .game-message.game-won, .game-container .game-message.game-over {
            display: block;
        }

        .grid-container {
            position: absolute;
            z-index: 1;
        }

        .grid-row {
            margin-bottom: 10px;
        }

        .grid-row:last-child {
            margin-bottom: 0;
        }

        .grid-row:after {
            content: "";
            display: block;
            clear: both;
        }

        .grid-cell {
            width: 57.5px;
            height: 57.5px;
            margin-right: 10px;
            float: left;
            border-radius: 3px;
            background: rgba(238, 228, 218, 0.35);
            text-align: center;
        }

        .grid-cell:last-child {
            margin-right: 0;
            text-align: center;
        }

    }

}

.game-explanation {

    width: 600px;
    margin: 0 auto;
    margin-top: 50px;
}

.lock{
    color: rgba(56, 56, 56, 0.27);
    background-image: url("../img/lock.png");
    background-size: cover;
}





/*background: rgba(238, 228, 218, 0.35);*/
/*검은 셀 / 흰샐*/
.black {
     /*rgba(238, 228, 218, 0.23);   바둑판2 */
    background: #1d4c93
}

.white {
    /*   background:url('../img/wood1-1.jpg') 50% 50% no-repeat;*/
    background: #eeeeee  /*rgba(238, 228, 218, 0.23);   바둑판1 */
}


.first {
    background: #BBFF15;
    color: #4e4e4e;
}

/*마지막으로 선택한 셀*/
.last {
    /*background: #f59563;*/
    background:#1abc9c/*rgba(96, 165, 44, 0.9);*/
    color: #ffffff;
}

/*이미 다녀간 cell*/
.intermediate {
    background: #f6a9a9/*f6a9a9/*f19c1f/*eedc1d*/;
    color: #383838;
}


/*
//////////////////
    180419
    -by Jay
/////////////////
*/



/*path container*/
.path_container{
    position:absolute;
    top:0px;
    left:0px;
    z-index: 100;
    pointer-events: none;
    display: block;
}

/*path line of knight*/
.path_line {
    stroke:rgb(255,0,0);
    stroke-width:2px;
}
.path_circle {
    stroke:rgb(255,0,0);
    stroke-width:1px;
    fill:rgb(0,255,0);
}

/*이동 가능한 cell*/
.possible_node  {
    background-color:#1abc9c/*1abc9c/* 뒤집힌 판 색 rgba(183, 244, 79, 0.9);*/;
}


/*클릭할 때 마다 옮겨 다니는
기사 말 담는 div*/
.div_knight {
    position: absolute;
    pointer-events: none;
}

.img_knight {
    margin:auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    height:60px;
}