@charset "utf-8";



.user-bar { width: 100%; height: 36px; }



.user-bar .content { display: flex; align-items: center; justify-content: space-between; height: 100%; }



@media (min-width: 1200px) {

  .user-bar .content { width: 90%; margin: 0px auto; }

}



@media (max-width: 1200px) {

  .user-bar .content { max-width: 1200px; margin: 0px auto; }

}



.user-bar p { margin-bottom: 0px; }



.user-bar ul { margin-bottom: 0px; display: flex; align-items: center; }



.user-bar select { outline: none; border: 1px solid transparent; background-color: transparent; }



.user-bar .mobile-code .code-box { display: none; position: absolute; background-color: rgb(255, 255, 255); border-radius: 6px; padding: 6px; z-index: 10; }



.user-bar .mobile-code .code-box p { text-align: center; color: rgb(48, 49, 51); font-size: 12px; }



.user-bar .mobile-code img { width: 100px; height: 100px; }



.user-bar .mobile-code span:hover + .code-box { display: block; }



.user-bar .user-bar-right li { position: relative; }



.user-bar .user-bar-right li:not(:last-child)::after { content: ""; width: 1px; height: 10px; top: 50%; transform: translateY(-50%); position: absolute; right: 0px; background-color: rgb(211, 211, 211); }



.user-bar ul li { padding: 0px 8px; }



.user-bar .user-info { display: flex; align-items: center; }



.user-bar .user-info .avatar { width: 25px; height: 25px; border-radius: 50%; border: 2px solid rgb(255, 255, 255); overflow: hidden; margin-right: 5px; }



.user-bar .user-info .avatar img { width: 100%; height: 100%; }



.user-bar .login, .user-bar .register { display: none; }



.user-bar.mobile_model { display: flex; justify-content: space-between; }



.user-bar.mobile_model .login-register { display: none; }



.user-bar.mobile_model a { color: rgb(164, 164, 164); font-size: 12px; }