html,body {position: absolute; padding:0; margin:0; width: 100%;}
body {margin:0 auto; font-size: 1em; 
      background-color:#000; background-image:url('../img/mobile_bg.jpg'); background-repeat:repeat; background-size:cover;
      -ms-overflow-style: none;}
::-webkit-scrollbar {display: none;}

*,*::before,*::after {font-family:'SUIT'; box-sizing:border-box;}
ul,ol,li {padding:0; margin:0; list-style:none;}
a {text-decoration:none;}

#wrap{display:block; margin: 0 auto;}
/* loading */
#loading div {position: relative; width: 100vw; height: 100vh; overflow: hidden;}
#loading div img {width: 100vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#moon{overflow:hidden; position:relative; width:100%; margin: 0 auto;}
#moon::before{content:""; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;}

#danuriState {position:relative; display: block; color:#fff; background: #213f7b; z-index: 10;}
#danuriState .infoDiv {padding-top:2.8vh; padding-left: 5.8vw; padding-bottom: 2vh; background-image:url('../img/mobile_info_bg.jpg'); background-repeat:no-repeat; background-size:cover;}
#danuriState .logo {font-size: 6vw; margin: 0; padding-bottom: 1.8vh; font-weight: bold; letter-spacing : -0.01em}

#danuriState ul {display: block; }
#danuriState ul>li {display: block; font-size: 4vw;}
#danuriState ul>li>span {display: inline-flex; align-items: center; font-weight: 500; font-size: 3.8vw; color: #fff; vertical-align: middle;}
#danuriState ul>li>.subtitle::before {content:""; width: 3vw; height: 3vh; margin-right: 2vw; background-repeat:no-repeat; background-position:center center; background-size:contain;}

#danuriState ul>li:nth-child(1)>.subtitle::before {background-image:url('../img/foot-icon_1.svg');}
#danuriState ul>li:nth-child(2)>.subtitle::before {background-image:url('../img/foot-icon_3.svg');}
#danuriState ul>li:nth-child(3)>.subtitle::before {background-image:url('../img/foot-icon_4.svg');}

#danuriTrack {position: relative; display: block; /* padding-left: 5.8vw; */ padding-bottom: 10vh;}
#danuriTrack .title {display: block; color: #dddede; padding-top: 5vh; padding-left: 5.8vw; padding-bottom: 1vh; font-size: 4vw; font-weight: bold;}

#moonfront, #moonback {position: relative; width: 100%;}
 
.mtrack {position: relative; display: block; margin: 0 auto; width: 76vw; height: 76vw; max-width: 800px; max-height: 800px;}
.mtrack img {width: 76vw; height: 76vw; max-width: 800px; max-height: 800px;}
.mtrack svg {position:absolute; top:0; left:0; z-index:1; display:block;}

#spaceCanvas {position: absolute; top:0; left:0;}
#noticeDiv {position: fixed; top:15vh; left:10vw; z-index: 999;}
#noticeDiv img {width:90%}

.circle { display: none; position: absolute; left: calc(50% - 4px); margin: 0 auto; width: 4px; height: 4px; border: 4px solid rgb(255, 0, 0);
          border-radius: 50%; z-index: 100; opacity: 0;}