@charset "utf-8";

li { list-style: none; }

ul { padding: 0px; margin: 0px; }

.menu-bar { position: fixed; left: 3%; top: 40%; cursor: pointer; background: rgb(255, 255, 255); padding: 1.6875rem 0.3125rem 1.8125rem; border-radius: 0.5rem; }

.menu-bar:hover ul li p { display: block; font-weight: bold; }

.menu-bar:hover ul li { width: 9.0625rem; }

.menu-bar .logo { width: 3.3125rem; height: 1.6875rem; padding-bottom: 1.25rem; box-sizing: content-box; }

.menu-bar .logo img { width: 100%; height: 100%; }

.menu-bar ul { padding: 0px; margin: 0px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-top: 0.0375rem solid rgba(0, 0, 0, 0.15); }

.menu-bar ul li { height: 2.1875rem; padding: 0px 0.625rem; display: flex; align-items: center; margin-top: 1.1875rem; }

.menu-bar ul li .menu-icon { display: block; }

.menu-bar ul li .menu-icon2 { display: none; }

.menu-bar ul li:hover { background-color: rgb(255, 250, 236); border-radius: 3px; }

.menu-bar ul li:hover .menu-icon { display: none; }

.menu-bar ul li:hover .menu-icon2 { display: block; }

.menu-bar ul li.active { background-color: rgb(255, 250, 236); }

.menu-bar ul li.active .menu-icon { display: none; }

.menu-bar ul li.active .menu-icon2 { display: block; }

.menu-bar ul li img { width: 2rem; height: 2rem; }

.menu-bar ul li p { font-size: 0.9375rem; margin: 0px; display: none; }

.container .navbarus { display: none; }

.container .bar-container { width: 90rem; margin: 0px auto; display: flex; justify-content: space-between; align-items: center; list-style: none; }

.container .bar-container > li { width: 33.3%; height: 4rem; line-height: 4rem; color: rgb(34, 34, 34); font-size: 1.5rem; background: rgb(255, 255, 255); text-align: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0px; display: flex; }

.container .bar-container > li { display: flex; align-items: center; justify-content: center; }

.container .bar-container > li img { width: 2.625rem; height: 2.625rem; }

.container .bar-container > li.click { background: rgb(255, 228, 162); }

.container .bar-container.location { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 11; justify-content: center; background: rgb(255, 255, 255); display: flex; }

@media (max-width: 768px) {
  .container .navbarus { display: block; }
  .container .bar-container { width: 100%; justify-content: center; background: rgb(255, 255, 255); }
  .container .bar-container.location { top: 88px; }
  .container .bar-container > li { width: 33.3%; height: 40px; font-size: 12px; line-height: 32px; align-items: center; justify-content: center; }
  .container .bar-container > li img { width: 21px; height: 21px; }
}