:root {
  --color-bg-primary: #fff;
  --color-bg-secondary: #f3f5f9;
  --color-header-text-primary: #ffffff;
  --color-header-text-secondary-primary: #dad4f7;
  --color-widget-header-bg-primary: #805ce7;
  --color-widget-header-drawer-bg-primary: #9687e8;
  --color-widget-header-drawer-menu-bg-primary: #8a6fe8;
  --color-login-header-bg-primary: #f9fbfb;
  --color-login-hamburger-toggle-primary: #dad4f7;
  --color-login-header-box-shadow: #e3e3e3;
  --color-login-text-id-password-primary: #847384;
  --color-login-id-password-primary: #dedede;
  --color-login-id-password-input-primary: #ffffff;
  --color-login-go-toggle-primary: #825ee7;
  --color-login-btn-primary: #535761;
  --color-auto-switch-primary: #ffffff;
}
[data-theme=dark] {
  --color-header-text-primary: #d9d9d9;
  --color-header-text-secondary-primary: #808389;
  --color-widget-header-bg-primary: #474a53;
  --color-login-header-bg-primary: #2e323c;
  --color-widget-header-drawer-bg-primary: #535761;
  --color-widget-header-drawer-menu-bg-primary: #484B54;
  --color-login-hamburger-toggle-primary: #ffffff;
  --color-login-header-box-shadow: #000;
  --color-login-text-id-password-primary: #6c757d;
  --color-login-id-password-primary: #484b54;
  --color-login-id-password-input-primary: #424651;
  --color-login-go-toggle-primary: #535761;
  --color-login-btn-primary: #535761;
  --color-auto-switch-primary: #535761;
  --color-ui-bg-primary-400: #ffffff;
}
#mong-member { border-radius: 4px; background-color: var(--color-widget-box-primary); box-shadow: var(--color-widget-box-shadow); transition: all 0.4s ease; } 
.mong-member-user-box { padding: 15px 15px 0px 15px; } 
.member-login-box { position: relative; display: block; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; box-shadow: var(--color-widget-box-shadow); transition: all 0.4s ease; z-index: 1; } 
.admin-box { position: absolute; top: 0px; right: 0px; width: 36px; height: 36px; background: #e92e66; border-radius: 0px 4px 0px 4px; } 
.admin-box i { color: #fff; text-align: center; display: block; margin-top: 5px; } 
.member-login-box:hover { box-shadow:var(--color-widget-box-hover-shadow); } 
.member-login-box .login-header { padding: 1.8rem 1rem 1.8rem 1rem; border-radius: 0.6rem 0.6rem 0 0; background-color: white; box-shadow: 0 1px 15px #e3e3e3; z-index: 10; } 
.header-circle { width: 15px; height: 15px; margin-left: 86px; background-color: #f96057; border-radius: 50%; box-shadow: 24px 0 0 0 #f8ce52, 48px 0 0 0 #5fcf65; flex-shrink: 0; } 
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } 
.member-login-box .container { width: 100%; padding: 15px 15px 10px 15px; margin: 0 auto; background-color: var(--color-login-header-bg-primary); border: 0; border-top-width: 3px; border-image: -webkit-linear-gradient(left, #ad6bad 0%, #f7f7c5 25%, #8cced4 50%, #de306e 75%, #ad6bad 100%) 1%; } 
.member-login-box .container:after { content: ""; position: absolute; top: 100%; border-top: 15px solid #423142; border-left: 15px solid transparent; border-right: 15px solid transparent; } 
.member-login-box .container > div:before, .member-login-box .container > div:after { display: table; content: ""; } 
.member-login-box .container > div:after { clear: both; } 
.member-login-box .container > div:first-child { display:flex; margin-bottom: 10px; } 
.member-login-box .container .member-register { margin-top:10px; } 
label.login-id, label.login-password, input.login-id-input, input.login-password-input, button.login-go { display: block; float: left; height: 35px; padding: 0; line-height: 35px; border: none; outline: none; } 
label.login-id, label.login-password { width:16%; text-align: center; color: var(--color-login-text-id-password-primary); background: var(--color-login-id-password-primary); -webkit-transition: all .3s; transition: all .3s; } 
label.login-id:hover, label.login-password:hover { cursor: pointer; } 
input.login-id-input { width: 84%; padding: 5px; background: var(--color-login-id-password-input-primary); color: var(--color-login-text-id-password-primary); } 
input.login-password-input { width: 68%; padding: 5px; background: var(--color-login-id-password-input-primary) } 
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-login-id-password-input-primary) inset; } 
button.login-go { width: 16%; text-align: center; border-radius: 3px; color: #fff; background-color: var(--color-login-go-toggle-primary); box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; -webkit-transition: all .3s; transition: all .3s; } 
button.login-go:hover { cursor: pointer; background: var(--color-ui-bg-primary-600); } 
label.highlights { width: 16%; height: 35px; padding: 0; line-height: 35px; border: none; color: #fff; background: var(--color-ui-bg-primary-600); } 

.signin { cursor: pointer; display: inline-block; float: left; width: 50%; height: 40px; border: none; border-radius: 0px 4px 4px 0px; text-transform: uppercase; color: #fff; background: #ebebfb; -webkit-transition: 0.5s; transition: 0.5s; } 
.signin span { display: block; color: #48438f; line-height: 40px; text-align: center; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 0.5s; transition: 0.5s; } 
.signin:hover span { -webkit-transform: translateX(10px); transform: translateX(10px); } 
.auto-switch { position: absolute; right: 24px; margin-top: 7px; } 
.auto-switch input { display: none; } 
.auto-switch small { display: inline-block; width: 26px; height: 15px; background: #2e323c; border-radius: 30px; position: relative; cursor: pointer; } 
.auto-switch small:before { content: ""; position: absolute; width: 19px; height: 19px; background: var(--color-auto-switch-primary); border-radius: 50%; top: -2px; left: -1px; transition: .3s; box-shadow: -3px 0 3px rgba(0,0,0,0.25); } 
.auto-switch input:checked ~ small { background: #4fc5c5; transition: .3s; } 
.auto-switch input:checked ~ small:before { transform: translate(10px, 0px); transition: .3s; box-shadow: 3px 0 3px rgba(0,0,0,0.25); } 
.login-quick-menu { display: flex; flex-grow: 1; height: 60px; max-width: 370px; border-radius: 4px; overflow: hidden; } 
.menu-item { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; text-decoration: none; } 
.menu-item:focus, .menu-item:hover { outline: none; } 
.menu-item:focus .quick-menu-icons, .menu-item:hover .quick-menu-icons { color: #342ead; } 
.menu-item:focus .menu-item-label, .menu-item:hover .menu-item-label { color: #342ead; } 
.quick-menu-icons { display: block; font-size: 20px; color: var(--color-ui-text-primary-1) !important; transition: 0.25s ease; } 
.menu-item-label { display: block; font-size: 13px; color: var(--color-ui-text-primary-1) !important; transition: 0.25s ease; } 
.logout-box { padding:15px; } 
.logout-custom-btn { background: var(--color-login-button-primary); border-radius: 5px; font-size: 14px; padding: 11px 15px; font-weight: bold; width: 100%; cursor: pointer; transition: all 0.3s ease-in-out; text-align: center; color: #ffffff; box-shadow:var(--color-login-button-box-shadow-1); background-size: 200% auto; } 
.logout-custom-btn:hover { background-position: right center; box-shadow:var(--color-login-button-box-shadow-2); } 
.sns-join .login-sns .sns-wrap { padding: 4px 8px; } 
.header__inner { width: 100%; display: flex; background: var(--color-ui-bg-primary-500) 74% ; z-index: 1; padding: 20px; border-radius: 4px 4px 0px 0px; box-sizing: border-box; position: relative; box-shadow: 0 1px 15px var(--color-login-header-box-shadow); } 
.header__brand-info .site-title { font-size: 20px; font-weight: 600; margin: 0; color: #423c58; text-transform: uppercase; } 
.header__brand-info .site-title a { color: var(--color-header-text-primary) !important; }
.header__brand-info .site-tagline { font-size: 14px; font-weight: 300; color: var(--color-header-text-secondary-primary) !important; margin: 0; } 
.header__drawer-toggle { position: relative; left: 15px; background: inherit; border: 0; cursor: pointer; border-radius: 3px; transition: 300ms; z-index: 999; } 
.header__drawer-toggle:active { position: relative; top: 1px; } 
.header__drawer-toggle:focus { outline: 0; box-shadow: 0 0 0 3px rgba(166, 165, 177, 0.4); } 
.header__drawer-toggle svg { width: 27px; height: 27px; fill: #9790c1; } 
.header__drawer { background: var(--color-widget-header-drawer-bg-primary); position: absolute; width: 100%; left: 0; top: 87px; max-height: 0; box-sizing: border-box; transition: all 500ms cubic-bezier(0.79, 0, 0.39, 0.99); opacity: 0; transform: translateY(-40px) scaleY(1.4); overflow: hidden; } 
.header__drawer a { color: var(--color-widget-title-text-primary) !important; }
.header__drawer ul { text-align: center; } 
.header__drawer ul li { transition: 200ms; border-radius: 4px; } 
.header__drawer ul li:hover { background: var(--color-widget-header-drawer-menu-bg-primary); } 
.header__drawer .menu {font-size: 0.9em; display: flex; } 
.header__drawer .menu li { flex-grow: 1; padding: 0.7em 0; } 
.header__drawer-open { max-height: 132px; opacity: 1; transform: translateY(0px) scaleY(1); box-shadow: 0 4px 0 0 rgba(66, 60, 88, 0.14); padding: 38px 20px; z-index: 1; } 
#hamburger-menu { position: relative; width: 25px; height: 20px; margin: 15px; } 
#hamburger-menu span { opacity: 1; left: 0; display: block; width: 100%; height: 2px; border-radius: 10px; color: black; background-color: var(--color-login-hamburger-toggle-primary); position: absolute; transform: rotate(0deg); transition: .4s ease-in-out; } 
#hamburger-menu span:nth-child(1) { top: 0; } 
#hamburger-menu span:nth-child(2) { top: 9px; } 
#hamburger-menu span:nth-child(3) { top: 18px; } 
#hamburger-menu.open span:nth-child(1) { transform: translateY(9px) rotate(135deg); } 
#hamburger-menu.open span:nth-child(2) { opacity: 0; transform: translateX(-60px); } 
#hamburger-menu.open span:nth-child(3) { transform: translateY(-9px) rotate(-135deg); } 
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-login-text-id-password-primary);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--color-login-text-id-password-primary);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-login-text-id-password-primary);
}

.outlogin-noti-badge-new {
    position: absolute;
    display: inline-block;
    min-width: 6px;
    height: 18px;
    margin-top: -60px!important;
    margin-right: 5px;
    padding: 0 6px;
    background-color: #1fd771;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    font-size: 10px;
    line-height: 18px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    /* -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
    adow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    vertical-align: top;
}
.outlogin-memo-badge-new {
    position: absolute;
    /* display: inline-block; */
    /* min-width: 6px; */
    /* height: 18px; */
    margin-top: -44px!important;
    margin-left: 15px;
    padding: 0 6px;
    background-color: #1fd771;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    font-size: 10px;
    /* line-height: 18px; */
    color: #fff;
    /* font-weight: 700; */
    /* letter-spacing: 0; */
    /* -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%); */
    adow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    /* vertical-align: top;
}