@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');
@import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');


*{margin:0; padding:0;
    list-style:none;
    box-sizing:border-box;}

body{background-color: #ffffff;
    color:#000000;
    font-family: 'NanumSquareNeo';}

a{text-decoration: none;
    color:inherit;}

.wrap{width:1440px;
    height:auto;
    margin:0 auto;
    position:relative;}


.mapbg{
    width:100%;
    height:100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url("../images/mapbackground2.png");}


.timstore{text-align: center;
            position:absolute;
            width:280px;
            top:350px;
            right:200px;}

.timstore div img{width:100%;}
            
.bluestore{text-align: center;
            position:absolute;
            width:180px;
            top:20px;
            left:150px;}

.bluestore div img{width:100%;}

.home{text-align: center;
        position:absolute;
        width:300px;
        top:-5px;
        right:310px;}

.home div img{width:100%;}


.car{text-align: center;
    position:absolute;
    width:230px;
    top:135px;
    right:120px;}

.car div img{width:100%;}

.sell{position:absolute;
    width:220px;
    top:340px;
    left:520px;
    cursor: pointer;}

.sell img{width:100%;}

.sell span{display: inline-block;
            text-align: center;
            width: 200px;
            position: absolute;
            top: 140px;
            left: -16px;
            transform: rotate(22deg);
            font-size: 20px;
            font-family: "Gaegu", sans-serif;}

.res_modalwrap{display: none;
                width:100%;
                height:100%;
                top:0;
                left:0;
                overflow-y: scroll;
                position:fixed;
                background-color: rgba(0,0,0,0.7);}

.resume{width:800px;
        height:auto;
        margin:20px auto;}

.resume img{width:100%;}

.close {position: absolute;
            width:40px;
            height: 40px;
            top: 18px;
            right: 260px;
            color: #ff4848;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;}


.arr{width:80px;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: updown;}

.arr2{width:80px;
    margin-bottom:-25px;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: updown;}


@keyframes updown{
    0% {transform:translateY(0);}
    30% {transform:translateY(10px);}
    60% {transform:translateY(20px);}
    100%{transform:translateY(0px);}
}

.post{position:absolute;
        width:80px;
        top:160px;
        right:520px;}
.post img{width:100%;}


.fountain{position:absolute;
            width:250px;
            bottom:20px;
            left:300px;}
.fountain img{width:100%;}


.signboard{position:absolute;
            width:80px;
            top:630px;
            right:450px;}
.signboard img{width:100%;}

.banch{position:absolute;
    width:120px;
    top:400px;
    left:70px;}
.banch img{width:100%;}

/*게임설명 모달*/

.modal{width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;
        background-color: rgba(0,0,0,0.7);}

.modal_text{width:400px;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 30px;
            color:#ffffff;
            font-size: 24px;
            font-family: "Gaegu", sans-serif;}

.modal_text p , .modal_text span{color:#FFC648;}
.modal_text p{padding:16px;
                font-size: 20px;}

.modal_text button{display:inline-block;
                    width:100px;
                    height:40px;
                    border-radius: 20px;
                    background-color: #FFC648;
                    appearance: none;
                    border: none;
                    font-size: 20px;
                    font-family: "Gaegu", sans-serif;
                    cursor: pointer;}


.modal_text .tip{padding:5px;
                border-radius: 30px;
                color:#ff4848;
                background-color: #FFC648;}

.modalarr{width:50px;
        height: 50px;}