game.css

@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-weight: normal;
   cursor: none;
}

body {
   width: 100%;
   height: 100vh;
   overflow: hidden;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    /* 선택이나 클릭 안되게 할 때 */
    /* 전체에 cursor:none 걸어주면 해당부분에 pointer-events: none; 걸어줘야 없어짐*/
    pointer-events: none;
    user-select: none;
    z-index: 10000 !important;
}
.mouse__cursor img {
    width: 20px;
    height: 25px;
}
#header {
    /* position: fixed; */
    width: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}
#header h1 {
    font-size: 20px;
    color: #fff;
    padding: 5px 0;
    font-weight: bold;
    font-family: 'Galmuri11';
}
#header .time {
    color: #fff;
    transform: translateY(1px);
    font-family: 'Galmuri11';
}
.icon_box img {
    width: 100%;
    /* height: 60px; */
}
.icon_box span {
    text-align: center;
    display: block;
    background: #000;
    border-radius: 3px;
    font-family: 'Galmuri11';
    font-size: 14px;
    /* padding: 2px; */
    /* white-space: nowrap; */
} 
.icon1 {
    position: absolute;
    left: 30px;
    top: 60px;
    width: 54px;
    display: none;
}
.icon1:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon1 img {
    width: 100%;
}
.icon1 span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 2px;
    white-space: nowrap;
}
.icon1_off {
    position: absolute;
    left: 30px;
    top: 60px;
    width: 54px;
    display: block;
}
.icon1_off:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon1_off img {
    width: 100%;
}
.icon1_off span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 2px;
    white-space: nowrap;
}
.icon2 {
    position: absolute;
    left: 30px;
    top: 170px;
    width: 54px;
}
.icon2:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon2 img {
    width: 100%;
}
.icon2 span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    white-space: nowrap;
}
.icon3 {
    position: absolute;
    left: 30px;
    top: 280px;
    width: 54px;
}
.icon3:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon3 img {
    width: 100%;
}
.icon3 span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    white-space: nowrap;
}
.icon4 {
    position: absolute;
    left: 30px;
    top: 390px;
    width: 54px;
}
.icon4:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon4 img {
    width: 100%;
}
.icon4 span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    white-space: nowrap;
}
.icon5 {
    position: absolute;
    left: 30px;
    top: 500px;
    width: 54px;
    display: none;
}
.icon5:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon5 img {
    width: 100%;
}
.icon5 span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    width:100%;
    /* 한줄효과 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 줄바꿈 안되게 */
    white-space: nowrap;
}
.icon5_off {
    position: absolute;
    left: 30px;
    top: 500px;
    width: 54px;
    display: block;
}
.icon5_off:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon5_off img {
    width: 100%;
}
.icon5_off span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    width:100%;
    /* 한줄효과 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 줄바꿈 안되게 */
    white-space: nowrap;
}
.icon6 {
    position: absolute;
    left: 30px;
    top: 610px;
    width: 54px;
}
.icon6:hover {
    background: rgba(225,225,225,0.3);
    border-radius: 2px;
}
.icon6 img {
    width: 100%;
}
.icon6 span {
    display: block;
    background: #000;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    white-space: nowrap;
}
#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    color: #fff !important;
    text-align: center;
    font-family: 'Galmuri11';
}
#footer .agent {
}
.mac #footer {
    background: blue;
}
.window #footer {
    background: #0fe728;
}


.modal__cont {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.3);
    position: fixed;
    left: 0;
    top: 0;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* display: none;
    /*flex가 우선 순위이기 때문에 밑에다 적어주어야 함*/
    /* opacity: 0;  */
    /* opacity 0 줘서 클릭 안됨 */
    transform: scale(0);
}
.modal__btn {
    cursor: pointer;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    right: 10px;
    bottom: 40px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Galmuri11';
}
.modal__btn:hover {
    background-color: #fff;
    color: #3d3d63;
    cursor: none;
}
.modal__box {
    /* display: none; */
    width: 70%;
    height: 70vh;
    border-radius: 0.6rem;
    box-shadow: 0 10px 20px -5px hsl(180deg 2% 10%);
    transform: scale(0);
    /* overflow: hidden; */
}
.modal__box .title {
    padding-inline: 1rem;
    cursor: grab;
    background-color: #1B1C2E;
    display: flex;
    align-items: center;
    color: #fff;
    height: 50px;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.modal__box .title .dot {
    width: 15px;
    height: 15px;
    background-color: #3B3D63;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    margin-left: 2rem;
}
.modal__box .title .dot::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #3B3D63;
    border-radius: 50%;
}
.modal__box .title .dot::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #3B3D63;
    border-radius: 50%;
}
.modal__box .title .plus {
    background: #282936;
    padding: 0.5rem 0.5rem 0.3rem 0.5rem;
    border-radius: 0.5rem;
    color: #7A7D9D;
}
.modal__box .title .tabs {
    display: flex;
    margin-left: 50px;
}
.modal__box .title .tabs > div {
    color: #7A7D9D;
    background-color: #282936;
    padding: 0.35rem 0.8rem 0.25rem 0.8rem;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    border-radius: 0.4rem;
    text-transform: uppercase;
    cursor: pointer;
}
.modal__box .title .tabs > div.active {
    background-color: #eee;
}
.modal__box .title .tabs > div em {
    font-style: normal;
}
.modal__box .title .tabs > div .favicon {
    margin-right: 0.4rem;
    margin-top: 0.2rem;
}
.modal__box .title .tabs > div .close {
    margin-left: 3rem;
}
.modal__box .cont {
    width: 100%;
    background-color: #222;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0.5rem;
    overflow-y: auto;
}
.modal__box .cont iframe {
    width: 100%;
    height: 100%;
    padding: 20px;
}
.modal__box .cont > div {
    display: none;
}

.modal__box .cont > div.active {
    display: block;
    height: 100%;
}

.modal__close {
    position: absolute;
    right: 190px;
    top: 90px;
    background-color: #222;
    border: 2px solid #c4c4c4;
    padding: 1rem 1rem 0.8rem 1rem;
    border-radius: 50%;
    box-shadow: 0 5px 7px -5px rgba(25, 26, 26, 0.698);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
}
.modal__close:hover {
    background-color: #33377d;
}
.modal__close svg {
    color: #fff;
}
/* 모달 애니메이션 */
.modal__cont.show {     /* 전체 배경 */
    animation: foldOut 1s ease forwards;
}
.modal__cont.show .modal__box {     /* 스크립트 박스 */
    animation: zoomOut 0.5s 1s ease forwards;
}
.modal__cont.show .modal__close {   /* 닫기 버튼 */
    animation: opacityOut 0.5s 1.4s ease forwards;
}

.modal__cont.show.hide {    
    animation: foldIn 0.3s 0.5s ease backwards;
}
.modal__cont.show.hide .modal__box {
    animation: zoomIn 0.5s ease forwards;
}
.modal__cont.show.hide .modal__close {
    animation: opacityIn 0.1s ease forwards;
}

@keyframes foldOut {
    0%   {transform: scaleX(0) scaleY(0.001);}
    50%  {transform: scaleX(1) scaleY(0.001);}
    100% {transform: scaleX(1) scaleY(1);}
}
@keyframes foldIn {
    0%   {transform: scaleX(1) scaleY(1);}
    50%  {transform: scaleX(1) scaleY(0.001);}
    100% {transform: scaleX(0) scaleY(0.001);}
}
@keyframes zoomOut {
    0%   {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes zoomIn {
    0%   {transform: scale(1);}
    100% {transform: scale(0);}
}
@keyframes opacityOut {
    0%   {opacity:0;}
    100% {opacity:1;}
}
@keyframes opacityIn {
    0%   {opacity:1;}
    100% {opacity:0;}
}