#wrapper {
     padding-top: var(--gs-operation-header-height);
}

#header.bg {
     background-color: var(--gs-concrete-color);
}

#header>div {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 5px;
     margin: 0 auto;
     padding: var(--gs-default-padding);
     min-width: var(--gs-min-width);
     max-width: var(--gs-max-width);
     height: var(--gs-operation-header-height);
}

#header .home-btn {
     display: block;
     width: 100%;
     height: 100%;
     background-color: var(--gs-concrete-color);
}

#header .home-btn img {
     width: var(--gs-home-logo-width);
}

#header .join-link-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 94px;
     height: 40px;
     font-size: 19px;
     color: var(--gs-white-color);
     border-radius: 10px;
     background-color: var(--gs-bright-indigo-color);
}

.side-menu-btn {
     width: 44px;
     height: 44px;
     border-radius: 44px;
     background: var(--gs-hint-of-red-color) url(../img/icon-menu.png) no-repeat center center / 20px;
     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.08);
}

.side-menu-close-btn {
     background-image: url(../img/icon-x.png);
     background-size: 17px;
}

.side-menu-wrap {
     display: flex;
     justify-content: flex-end;
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     visibility: hidden;
     opacity: 0;
     z-index: 200;
}

.side-menu-wrap>div {
     max-width: 480px;
     min-width: 320px;
     width: 100%;
     height: 100%;
     background-color: var(--gs-concrete-color);
     transform: translateX(100%);
     transition: transform 0.3s ease-in-out;
}

.side-memu-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px
}

.side-memu-header img {
     width: var(--gs-home-logo-width);
}

.side-menu-inner {
     padding: 15px;
}

.side-menu-inner .login-link-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 60px;
     font-size: 22px;
     font-weight: 500;
     color: var(--gs-white-color);
     border-radius: 18px;
     background-color: var(--gs-bright-indigo-color);
}

.side-menu-inner .user-info {
     display: flex;
     justify-content: space-between;
     /* align-items: center; */
     gap: 15px;
     border-radius: 18px;
     background-color: var(--gs-white-color);
}

.side-menu-inner .user-info-name {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
     word-break: break-all;
     padding: 10px 10px 10px 60px;
     min-height: 60px;
     font-size: 22px;
     font-weight: 600;
     background: url(../img/icon-user.png) no-repeat 15px center / 34px;
}

.side-menu-inner .user-info-link {
     display: flex;
     align-items: center;
     padding: 10px 30px 10px 10px;
     font-size: 14px;
     color: var(--gs-signal-grey-ral-color);
     background: var(--gs-arrow-right-grey-icon) no-repeat calc(100% - 10px) center / 22px;
}

.side-menu-inner-nav {
     margin-top: 15px;
     overflow-y: auto;
     max-height: calc(100vh - 300px);
}

.side-menu-inner-nav ul {
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.side-menu-inner-nav a {
     display: block;
     padding: 12px 10px 12px 42px;
     font-size: 18px;
     font-weight: 500;
     background-size: 20px;
     background-repeat: no-repeat;
     background-position: 10px center;
}

.side-menu-inner-nav .home-link {
     background-image: url(../img/icon-home-btn.png);
     background-size: 20px;
}

.side-menu-inner-nav .activity-link {
     background-image: url(../img/icon-supporters-btn.png);
     background-size: 24px;
}

.side-menu-inner-nav .all-article-link {
     background-image: url(../img/list-btn.png);
     background-size: 16px;
}

.side-menu-inner-nav .proposal-link {
     background-image: url(../img/proposal-btn.png);
}

.side-menu-inner-nav .notice-link {
     background-image: url(../img/noti-btn.png);
     background-size: 17px;
}

.side-menu-inner-nav .supporters-link {
     background-image: url(../img/qsnda-btn.png);
     background-size: 21px;
}

.side-menu-inner-nav .inquiry-link {
     background-image: url(../img/sup-info-btn.png);
     background-size: 21px;
}

.side-menu-inner-bottom {
     margin-top: 35px;
     padding: 15px;
     text-align: center;
}

.side-menu-inner-bottom .logout-btn {
     font-size: 18px;
     font-weight: 500;
     text-decoration: underline;
     text-underline-offset: 4px;
     text-decoration-thickness: 1px;
}

body.open-side-menu {
     overflow: hidden;
}

body.open-side-menu .side-menu-wrap {
     visibility: visible;
     opacity: 1;
     transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

body.open-side-menu .side-menu-wrap>div {
     transform: translateX(0);
}

body.open-side-menu .scroll-btn {
     display: none;
}

#container {
     padding-top: var(--gs-default-padding);
     padding-left: var(--gs-default-padding);
     padding-right: var(--gs-default-padding);
}