[class^="glyphicon-mq-"],
[class*="glyphicon-mq-"] {
  background: url("../img/page/page-icon.png");
}

.glyphicon-mq-messagebox {
  background-position: -112px -0px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
}

.glyphicon-mq-exitsystem {
  background-position: -96px -0px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
}

.glyphicon-mq-add {
  background-position: -214px -0px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-search {
  background-position: -192px -0px;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
}

.glyphicon-mq-search2 {
  background-position: -191px -0px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  margin: 8px;
  border-style: none;
}

.glyphicon-mq-breadcrumb {
  background-position: -240px -16px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  margin: 8px;
}

.glyphicon-mq-edit {
  background-position: -64px -32px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit:hover {
  background-position: -128px -0px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-case-delete {
  background-position: -192px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-case-delete:hover {
  background-position: -192px -64px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-delete {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-delete:hover {
  background-position: -96px -0px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-upload {
  background-position: -0px -48px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-upload:hover {
  background-position: -64px -16px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-ckeckview {
  background-position: -160px -48px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-ckeckview:hover {
  background-position: -128px -48px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-image-rotate {
  background-position: -264px -16px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-image-rotate:hover {
  background-position: -240px -40px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-image-delete {
  background-position: -216px -40px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-image-delete:hover {
  background-position: -192px -40px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-crown-pos-on {
  background-position: -216px -40px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-crown-pos-off {
  background-position: -192px -40px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-user {
  background-position: -0px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-user:hover {
  background-position: -0px -64px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-table {
  background-position: -32px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-table:hover {
  background-position: -32px -64px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-photo {
  background-position: -64px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-photo:hover {
  background-position: -64px -64px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-model {
  background-position: -96px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-model:hover {
  background-position: -96px -64px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-edit-arrow {
  background-position: -128px -80px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-map {
  background-position: -0px -0px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
}

.glyphicon-mq-phone {
  background-position: -160px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-mail {
  background-position: -16px -0px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
}

.glyphicon-mq-user {
  background-position: -128px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-password {
  background-position: -160px -64px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.glyphicon-mq-phone-mobile {
  background-position: -160px -96px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

#mq-header li {
  border-bottom: unset;
}

#mq-header .menu-case-info {
  color: #fff;
}

#mq-header .menu-case-info:hover {
  color: #996699;
}

#mq-header .menu-user-info {
  color: white;
}

#mq-header .menu-user-info:hover {
  background-color: #fff;
  color: #000;
}

#mq-header .menu-user-info > div:nth-child(1) {
  width: 80px;
  text-align: center;
}

#mq-header .menu-user-info > img:hover {
  margin: 0 auto;
}

#mq-header .menu-user-info ul {
  background-color: #996699;
  display: none;
  top: 80px;
  position: absolute;
  z-index: 999;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid #cacaca;
  border-radius: 4px;
  padding: 0;
  width: 120px;
  color: white;
  text-align: center;
}

#mq-header .menu-user-info ul li {
  list-style: none;
  margin: 15px auto;
}

#mq-header .menu-user-info ul li:hover {
  color: #38334a;
}

#mq-header .menu-user-info ul li:last-child {
  border-top: 1px solid #888;
}

.mq-main-menu {
  height: 100%;
  position: relative;
  max-width: 1200px;
  padding: 0px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}

.mq-main-menu > ul {
  height: inherit;
  width: auto;
  position: absolute;
  border-bottom: none;
}

.mq-main-menu > ul > li {
  vertical-align: middle;
  align-items: center;
  justify-items: center;
  place-items: center;
  display: flex;
  min-width: 40px;
  margin: 0px auto;
}

.mq-main-menu > ul > li.menu-case-info {
  margin-left: 100px;
}

.mq-main-menu > ul > li.menu-case-info:hover {
  cursor: pointer;
}

.mq-main-menu > ul > li > a {
  margin: auto 5px;
}

.mq-main-menu > ul:nth-child(2) {
  float: right;
  right: 0px;
  z-index: 200;
}

.mq-login {
  z-index: 10;
  top: 10%;
  right: 20%;
  background: white;
  opacity: 0.9;
  width: 300px;
  height: 350px;
  position: absolute;
}

.mq-login-content {
  width: 100%;
  height: 100%;
  position: absolute;
}

.mq-login-tabs {
  position: relative;
  width: 100%;
  height: 100%;
}

.mq-login-tabs::before {
  display: table;
}

.mq-login-tabs::after {
  display: table;
  clear: both;
}

.mq-login-tabs .tabs-header {
  position: absolute;
  height: 20%;
  width: inherit;
  display: flex;
  border-bottom: 3px solid #996699;
}

.mq-login-tabs .tabs-header > ul {
  width: 100%;
}

.mq-login-tabs .tabs-header > ul > li {
  width: 50%;
  margin: 28px auto 0;
}

.mq-login-tabs .tabs-header > ul > li > span {
  text-align: center;
  border: none;
}

.mq-login-tabs .tabs-header > ul > li > span.hover, .mq-login-tabs .tabs-header > ul > li > span.active {
  background-color: #996699;
  color: white;
}

.mq-login-tabs .tabs-content {
  position: absolute;
  top: 20%;
  height: 80%;
  width: inherit;
}

.mq-login-tabs .tabs-content .tab-content {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: all 0.25s;
  z-index: 1;
}

.mq-login-tabs .tabs-content .tab-content > .mq-login-password-form,
.mq-login-tabs .tabs-content .tab-content > .mq-login-verify-form {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mq-login-tabs .tabs-content .tab-content.hide {
  display: none;
}

.type1-row1 {
  width: 100%;
  margin: 25px auto;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.type1-row1 span {
  margin: 0 5px;
}

.type1-row1 input {
  border: 1px solid gray;
  line-height: 2.0rem;
  width: 200px;
}

.type1-row1 input::-internal-autofill-selected {
  background-color: #e0d5e6;
}

.type1-row1 > a {
  position: absolute;
  right: 20px;
  top: 40px;
}

.type1-row2 {
  width: 100%;
  margin: 25px auto;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.type1-row2 span {
  margin: 0 5px;
}

.type1-row2 input {
  border: 1px solid gray;
  line-height: 2.0rem;
  width: 200px;
}

.type1-row2 > a {
  position: absolute;
  right: 20px;
  top: 40px;
}

.type1-row3 {
  width: 100%;
  margin: 15px auto;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.type1-row3 > a {
  margin-left: 20px;
  line-height: 2.0rem;
}

.type1-row3 > div:first-child {
  position: relative;
  margin: 0 auto;
}

.type2-row1 {
  width: 100%;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.type2-row1 input {
  border: 1px solid gray;
  line-height: 2.0rem;
  width: 200px;
}

.type2-row2 {
  width: 100%;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.type2-row2 input {
  width: 100px;
  border: 1px solid gray;
  line-height: 2.0rem;
}

.type2-row2 button {
  border-radius: 5px 5px;
  margin: auto 5px;
  background: #e0d5e6;
  border: unset;
  line-height: 2.0rem;
}

.type2-row3 {
  width: 100%;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

.type2-row3 button {
  width: 200px;
  margin: 0 auto;
  border-radius: 5px 5px;
  background: #e0d5e6;
  border: unset;
  line-height: 2.0rem;
}

.type2-row3 > div {
  margin: 10px auto;
  height: 34px;
  width: 200px;
}

header {
  color: black;
  height: 60px;
  background: transparent;
  top: 0;
  left: 0;
  z-index: 2;
  position: fixed;
}

.mq-main-menu .nav-tabs .nav-link {
  color: #000;
  border: none;
}

.mq-main-menu .nav-tabs .nav-link.active {
  color: #996699;
  border-bottom: 2px solid #996699;
}

.mq-main-menu .nav-tabs .entry {
  background-color: white;
  border: 1px solid #996699;
}

.mq-main-menu .nav-tabs .entry.active {
  background-color: #996699;
  color: white;
}

.mq-main-menu .nav-tabs .nav-link:hover {
  border-bottom: 2px solid #996699;
}

.mq-main-menu > ul {
  height: inherit;
  position: absolute;
  border-bottom: none;
}

.mq-main-menu > ul::nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mq-main-body {
  margin: 0;
}

.menu-user-info {
  color: black;
}

.menu-user-info:hover {
  background-color: #888;
  color: #fff;
}

.menu-user-info ul {
  background-color: #888;
  color: #fff;
}

.menu-user-info ul > li:hover {
  color: #38334a;
  cursor: pointer;
}

.index-pic {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 860px;
  z-index: -1;
  position: relative;
}

.pic-1 {
  background-image: url("../img/page/index-background01.png");
}

.pic-2 {
  background-image: url("../img/page/index-background02.png");
}

.pic-3 {
  position: relative;
  background-image: url("../img/page/index-background03.png");
  height: 938px;
  z-index: 1;
}

.pic-3 .experience-image-container {
  position: absolute;
  top: 85%;
  left: calc(50% - 130px);
  z-index: 2;
}

.pic-3 .experience-image img:hover {
  transform: translateY(-4px);
  cursor: pointer;
  background-color: #9a1873;
  border-radius: 45%;
}

.pic-4 {
  background-image: url("../img/page/index-background04.png");
  height: 463px;
}

.pic-41 {
  background-image: url("../img/page/index-background05.png");
  height: 149px;
}

.pic-5 {
  background-image: url("../img/page/index-bk-doctor.png");
  height: 500px;
}

.pic-6 {
  background-image: url("../img/page/index-bk-feature.png");
  height: 823px;
}

.pic-7 {
  background-image: url("../img/page/index-bk-faq.png");
  height: 1124px;
}

.pic-8 {
  background-image: url("../img/page/contact-title.png");
  width: 563px;
  height: 94px;
  margin: 50px auto 50px;
}

.pic-9 {
  background-image: url("../img/page/index-bk-experience.png");
  width: 563px;
  height: 93px;
}

.pic-10 {
  background-image: url("../img/page/index-product.png");
  height: 1450px;
}

#mq-carousel {
  z-index: -1;
}

.mq-main-content {
  width: 100%;
  margin: 0;
}

.index-entry {
  width: 100%;
  margin: 0;
}

.index-entry > div:first-child {
  position: relative;
  user-select: none;
  height: 940px;
}

.index-entry .mq-main-menu > ul {
  width: 0px;
}

.index-entry .mq-main-menu > ul::nth-child(2) {
  width: calc(100% - 300px);
  display: flex;
  justify-content: center;
}

.index-entry .mq-cover-right {
  width: 100px;
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  height: inherit;
}

.index-entry .mq-cover-left {
  width: 100px;
  position: absolute;
  z-index: 5;
  top: 0;
  height: inherit;
}

.index-entry .cover-left {
  width: 100px;
  top: calc(50% - 50px);
  position: absolute;
}

.index-entry .cover-left > img {
  margin-left: 55px;
}

.index-entry .cover-right {
  width: 100px;
  top: calc(50% - 50px);
  position: absolute;
  right: 0;
}

#mq-position {
  height: 500px;
}

.contact-info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0px auto 50px;
}

.contact-info > img {
  margin: 0px 25px;
}

.index-experience {
  width: 900px;
  margin: 60px auto;
}

.index-experience .tooth-type {
  padding: 10px 80px;
}

.index-experience .patient-info {
  padding: 10px 80px;
}

.index-experience .pic-9 {
  margin: 0 auto;
}

.index-experience h5 {
  padding-left: 5px;
  border-left: 3px solid #996699;
  width: 125px;
  box-sizing: content-box;
}

.index-experience .line-row {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.index-experience .line-row > img {
  margin-right: 50px;
}

.index-experience .line-row > label {
  margin: 5px auto;
  font-size: 1rem;
}

.index-experience .line-row > label.red {
  font-size: 16px;
}

.index-experience .line-row.big > label {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 100;
}

.index-experience .line-row > input {
  width: 250px;
  margin-right: 50px;
  font-size: 0.8rem;
  text-indent: 1rem;
  line-height: 2rem;
}

.index-experience .line-row > select {
  width: 250px;
  margin-right: 50px;
  text-indent: 1rem;
  font-size: 0.8rem;
  padding: 0.5rem;
}

.index-experience .line-row span::before {
  color: red;
  content: "*";
}

.index-experience .line-row > button {
  width: 200px;
  margin: 10px 20%;
  background-color: #996699;
  color: white;
}

.index-experience .select {
  border: 2px solid #9a189a;
}

.index-experience .red {
  color: red;
}

.index-page1 .mq-main-body {
  height: 100%;
}

.index-page2,
.index-page3,
.index-page4,
.index-page5,
.index-page6,
.index-page7 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}

.index-page2 > header,
.index-page3 > header,
.index-page4 > header,
.index-page5 > header,
.index-page6 > header,
.index-page7 > header {
  position: relative;
}

.index-page7 .mq-main-content {
  position: relative;
}