@charset "euc-kr";
@import url('https://fonts.googleapis.com/css?family=Cabin|Hammersmith+One&display=swap');

html {
    height: 100%;
    min-height: 100%;
}

.wrap {
    width: 1280px;
    height: 720px;
    background-image: url('../../img/game/background.png');
    font-family: 'Cabin', sans-serif;
    vertical-align: middle;
    text-align: center;
	box-shadow: 1px 1px 10px #aaa;
}

.top {
    width: 1280px;
    height: 72px;    
    margin: auto;
}

#banner {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 100;
}

.timer {
    position: absolute;
    width: 60px;
    height: auto;
    text-align: left;
    left: 1093px;
    top:30px;
    z-index: 102;
    font-family: 'Cabin';
    font-size: 300%;
    font-weight: 300;    
}

#exit {
    width: 3.4%;
    height: auto;
    position: relative;
    float: right;
    margin: -5.5% 4% 0 0;
    z-index: 101;
}

#exit_popup {
    width: 3.4%;
    height: auto;
    position: absolute;
    margin: 2% 0 0 93%;
}

#game {
    position: absolute;
    width: 1280px;
    height: 570px;    
    margin: 30px auto;
    text-align: center;
    vertical-align: middle;    
}

.card {
    width: 15.5%;
    height: auto;
    max-width: 297px;
    max-height: 377px;
    margin: 1% 2% 2% 2%;
	cursor:pointer;
}

.card:active {
    transition: all 0.4s;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
}

#roullete {
    text-align: center;
    display: inline-block;
    position: absolute;
    top:120px;
    left:0px;
    width:590px;
    height:auto;
    max-width: 1280px;
    max-height: 720px;
}

#canvasWrapper{    
    width:475px;
    height:475px;
    margin:-13% auto;
}

#canvas {    
    position: relative;
    margin: auto;
    z-index: 100;
    text-align: center;
}

#pointer {    
    position: relative;
    width:62px;
    height: auto;
    z-index: 102;
    margin: auto;
}

#wrong {
    position: absolute;
}

#maze {
    position:absolute;
    width:88%;
    height:auto;
    left: 77px;
    top: 45px;
    z-index:100;
}

#village21 {
    position:absolute;
    width: 70px;
    height: auto;
    left:1030px;
    top: -18px;
    z-index:99;
}

#village22 {
    position:absolute;
    width: 190px;
    height: auto;
    left:425px;
    top: 120px;
    z-index:99;
}

#village23 {
    position:absolute;
    width: 230px;
    height: auto;
    left:175px;
    top: 465px;
    z-index:99;
}

#village24 {
    position:absolute;
    width: 100px;
    height: auto;
    left:775px;
    top: 465px;
    z-index:99;
}
/*#maze {
    position: relative;
    width:1210px;
    height: auto;
    margin:auto;            
}*/

#start1 {
    position: absolute;
    width:180px;
    height: auto;
    left: 40px;
    z-index: 101;
}
#start2 {
    position: absolute;
    width:230px;
    height: auto;
    top: -20px;
    left: 10px;
    z-index: 101;
}

#goal1 {
    position: absolute;
    width:160px;
    height: auto;
    left: 1110px;
    top:355px;
    z-index: 101;
}

#goal2 {
    position: absolute;
    width:150px;
    height: auto;
    left: 1112px;
    top:355px;
    z-index: 101;
}

.offChar {
    width:91px;
    height: 91px;
    position: absolute;
    display: block;
    z-index: 101;
	cursor:pointer;
}

#id-12{
    left:330px;        
    top:23px;
}
#id-13{
    left:617px;
    top:23px;
}
#id-14{
    left:879px;
    top:23px;
}
#id-15{
    left:1134px;
    top:23px;
}

#id-23{
    left:617px;
    top:178px;
}
#id-24{
    left:879px;
    top:178px;
}
#id-25{
    left:1134px;
    top:178px;
}

#id-31{
    left:54px;
    top:345px;
}
#id-32{
    left:330px;
    top:345px;
}
#id-33{
    left:617px;
    top:345px;
}

#id-41{
    left:54px;
    top:514px;
}
#id-43{
    left:617px;
    top:514px;
}
#id-44{
    left:879px;
    top:514px;
}

.dotDiv {    
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    z-index: 200;
    /*border:1px solid blue;*/
	/*z-index:-999;*/
}

.dots {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
	/*z-index:-999;*/
}

/* ½ÃÀÛ Æ˾÷ */
.main {
    width: 100%;
    height: auto;
    max-width: 1280px;
    max-height: 720px;
    margin: auto;
    text-align: center;
}

#char {
    display: block;
    width: 21%;
    height: auto;
    max-height: 395px;
    max-height: 431px;
    margin: 1.5% auto;
}

#rule {
    display: block;
    width: 67%;
    height: auto;
    margin: 2% auto;
}

#failure {
    display: block;
    width: 30%;
    height: auto;
    margin: 2% auto;
}

#divBtn {
    position: relative;    
    z-index: 102;
}

/*
#btn2 {
    width:150px;
    height:150px;
    position: relative;
    margin: -40.5% auto;
}
*/

#btn {
	display:block;
    width:150px;
    height:150px;
    position: relative;
    margin: -53.5% auto;
	cursor:pointer;
}

#btnStart {
    width:22%;
    height:auto;
    position: relative;    
}

#wordCard {
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    width:600px;
    height:580px;
    top:130px;
    left:600px;
    /*border: 1px solid tomato;*/
}

#wordCard img {
	cursor:pointer;
}

/* ½ÃÀÛ Æ˾÷ */


/* ¼º°ø Æ˾÷ */
#ellipse {
    position: relative;
    display: block;
    margin: auto;
    padding: 5% 0 0 0;
    width: 16%;
    height: auto;
    max-width: 308px;
    max-height: 308px;
}

#excellent {
    position: relative;
    display: block;
    margin: 2% auto;
    width: 57%;
    height: auto;
    max-width: 1109px;
    max-height: 215px;
}

#welldone {
    position: relative;
    display: block;
    margin: 2% auto;
    width: 73.5%;
    height: auto;    
}

#youdidit {
    position: relative;
    display: block;
    margin: 2% auto;
    width: 73%;
    height: auto;    
}
/* ¼º°ø Æ˾÷ */