@viewport {
  zoom: 1;
  min-zoom: 1;
  max-zoom: 1;
  min-width: 320px;
  width: device-width;
}
@font-face {
  font-family: SourceHanSansTWHK;
  font-weight: 700;
  src: local(SourceHanSansTWHK-Bold), url(font-Bold.otf);
}
@font-face {
  font-family: SourceHanSansTWHK;
  font-weight: 100;
  src: local(SourceHanSansTWHK-ExtraLight), url(font-ExtraLight.otf);
}
@font-face {
  font-family: SourceHanSansTWHK;
  font-style: 900;
  src: local(SourceHanSansTWHK-Heavy), url(font-Heavy.otf);
}
@font-face {
  font-family: SourceHanSansTWHK;
  font-style: 300;
  src: local(SourceHanSansTWHK-Light), url(font-Light.otf);
}
@font-face {
  font-family: SourceHanSansTWHK;
  font-weight: 500;
  src: local(SourceHanSansTWHK-Medium), url(font-Medium.otf);
}
@font-face {
  font-family: SourceHanSansTWHK;
  font-weight: 400;
  src: local(SourceHanSansTWHK-Normal), url(font-Normal.otf);
}
html {
  background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0px;
}
body,
button,
input {
  font-size: 15px;
  font-family: SourceHanSansTWHK;
  font-weight: 400;
}
.page {
  display: none;
}
.page.view {
  display: block;
}
.window_bg {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: none;
  align-items: center;
  justify-content: center;
}
.window_bg.view {
  display: flex;
}
.window_content {
  background: #FFF;
  padding: 20px;
  border-radius: 10px;
}
#notice_bg {
  z-index: 65535;
}
.g_main.p_login,
.g_main.p_forgotPassword,
.g_main.p_register {
  margin: 30px auto;
  width: 300px;
}
.g_main.p_login form,
.g_main.p_forgotPassword form,
.g_main.p_register form {
  margin-top: 20px;
}
.g_main.p_login input,
.g_main.p_forgotPassword input,
.g_main.p_register input,
.g_main.p_login button,
.g_main.p_forgotPassword button,
.g_main.p_register button {
  display: block;
  margin: 0px;
  padding: 10px;
  width: 100%;
}
.g_main.p_login input,
.g_main.p_forgotPassword input,
.g_main.p_register input {
  border: 0px;
  box-sizing: border-box;
}
.g_main.p_login input:first-child,
.g_main.p_forgotPassword input:first-child,
.g_main.p_register input:first-child {
  border-radius: 5px 5px 0px 0px;
}
.g_main.p_login button,
.g_main.p_forgotPassword button,
.g_main.p_register button {
  border: 0px;
  background: #0A0;
  color: #FFF;
}
.g_main.p_login button:last-child,
.g_main.p_forgotPassword button:last-child,
.g_main.p_register button:last-child {
  border-radius: 0px 0px 5px 5px;
}
.g_main.p_login button.only,
.g_main.p_forgotPassword button.only,
.g_main.p_register button.only {
  border: 0px;
  background: #0A0;
  color: #FFF;
  border-radius: 5px;
  margin: 10px 0px;
}
.global {
  background: rgba(255, 119, 68, 0.5);
}
.notice {
  background: rgba(0, 0, 0, 0.1);
}
.private {
  background: rgba(127, 255, 127, 0.5);
}
.normal {
  background: #FFF;
}
#chatMenu {
  position: absolute;
  top: 32px;
  left: 0px;
  bottom: 32px;
  width: 200px;
}
#functionMenu,
#channelList,
#userList {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#functionMenu {
  display: table;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 32px;
  width: 200px;
}
#functionMenu li {
  cursor: pointer;
  display: table-cell;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
}
#functionMenu li:hover,
#functionMenu li.selected {
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
}
#channelList {
  height: 50%;
  overflow-y: scroll;
}
#channelList li {
  box-sizing: border-box;
  cursor: pointer;
  height: 32px;
  padding: 5px;
}
#channelList li:hover {
  background: rgba(0, 0, 0, 0.1);
}
#channelList li.selected {
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
}
#userList {
  position: absolute;
  bottom: 0;
  width: 200px;
  max-height: 50%;
  overflow-y: scroll;
}
#userList li {
  box-sizing: border-box;
  cursor: pointer;
  height: 32px;
  padding: 5px;
}
#userList li:hover {
  background: rgba(127, 255, 127, 0.5);
}
#chatMessage {
  position: absolute;
  top: 0px;
  left: 200px;
  bottom: 32px;
  right: 0px;
  overflow-x: auto;
  overflow-y: scroll;
  margin: 0px;
  padding: 0px;
}
#chatMessage li {
  padding: 5px;
  overflow-x: hidden;
  word-wrap: break-word;
}
#chatMessage li .name {
  cursor: pointer;
}
#chatMessage div {
  margin-left: 5px;
}
#sendMessage {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 32px;
}
#sendMessage input {
  box-sizing: border-box;
  height: 32px;
  border: 0px;
  padding: 5px;
  width: 100%;
}
#sendMessage form:nth-child(1) {
  flex: none;
  -moz-flex: none;
  -webkit-flex: none;
  width: 200px;
}
#sendMessage form:nth-child(2) {
  flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
}
#sendMessage button {
  display: none;
  /* PC版直接不顯示按鈕 */
}
#profile .window_content {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  width: 600px;
}
#profile .menu {
  border-right: 1px solid #000;
  flex: none;
  -moz-flex: none;
  -webkit-flex: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100px;
}
#profile .menu li {
  cursor: pointer;
  padding: 5px;
}
#profile .menu li.selected,
#profile .menu li:hover {
  background-color: #EEE;
}
#profile .page {
  flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
  height: 400px;
  margin: 0px 0px 0px 20px;
  padding: 0px;
  overflow-y: auto;
}
#profile .g_profile.p_profile button,
#profile .g_profile.p_profile input {
  border: 0px;
  display: block;
  margin: 0px;
  padding: 10px;
  width: 100%;
}
#profile .g_profile.p_profile input {
  box-sizing: border-box;
  background-color: #EEE;
  margin-bottom: 1px;
}
#profile .g_profile.p_profile button[type=submit] {
  background-color: #0A0;
  border-radius: 5px;
  margin-top: 20px;
}
#profile .g_profile.p_session li {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
#profile .g_profile.p_session li:hover {
  background-color: #EEE;
}
#profile .g_profile.p_session li > div.info {
  flex: 1;
}
#profile .g_profile.p_session li > div.online {
  background: #0C0;
  border-radius: 4px;
  height: 8px;
  margin: 20px;
  width: 8px;
}
#profile .g_profile.p_session span {
  clear: both;
}
#profile .g_profile.p_session .ion-trash-b {
  cursor: pointer;
  float: right;
  font-size: 32px;
}
#profile .g_profile.p_session .ion-trash-b:hover {
  color: #F00;
}
#profile .g_profile.p_setting button,
#profile .g_profile.p_setting input {
  border: 0px;
  display: block;
  margin: 0px;
  padding: 10px;
  width: 100%;
  height: 44px;
}
#profile .g_profile.p_setting input {
  box-sizing: border-box;
  background-color: #EEE;
  margin-bottom: 1px;
}
#profile .g_profile.p_setting button[type=submit] {
  background-color: #0A0;
}
#profile .g_profile.p_setting form.configItem {
  display: flex;
}
#profile .g_profile.p_setting form.configItem input {
  flex: 1;
}
#profile .g_profile.p_setting form.configItem button {
  width: 80px;
}
#profile .g_profile.p_setting #setting_desktopNotice {
  border-radius: 5px;
}
#profile .g_profile.p_setting #setting_desktopNotice.ion-android-notifications-off {
  background-color: #CCC;
}
#profile .g_profile.p_setting #setting_desktopNotice.ion-android-notifications-off:after {
  content: "桌面提示已禁用";
}
#profile .g_profile.p_setting #setting_desktopNotice.ion-android-notifications {
  background-color: #0A0;
}
#profile .g_profile.p_setting #setting_desktopNotice.ion-android-notifications:after {
  content: "桌面提示已啟用";
}
#chatlog .window_content {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  width: 800px;
}
#chatlog .menu {
  border-right: 1px solid #000;
  flex: none;
  -moz-flex: none;
  -webkit-flex: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
}
#chatlog .menu li {
  cursor: pointer;
  padding: 5px;
}
#chatlog .menu li.selected,
#chatlog .menu li:hover {
  background-color: #EEE;
}
#chatlog .page {
  flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
  height: 600px;
  margin: 0px 0px 0px 20px;
  padding: 0px;
  overflow-y: auto;
}