html, body {
  height: auto;
}

.root {
  position: relative;
  min-height: 100vh;
}

.root.m--sprg .header, .root.m--sprg .footer {
  display: none !important;
}
.root.m--sprg .wrap .main-content .content-section {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  max-height: 100% !important;
  min-height: calc(100vh - 2rem) !important;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0.75rem 1.5rem 0.75rem 1.125rem;
  padding-left: calc(env(safe-area-inset-left) + 1.125rem);
  padding-right: calc(env(safe-area-inset-right) + 1.5rem);
}
@supports (padding: max(0px)) {
  .header {
    padding-left: max(1.125rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

.wrap {
  margin: 0;
  background-color: transparent;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

.main-content {
  background: none;
}

.main-content .content-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 56.25rem;
  min-height: 21.875rem;
  margin: 8.375rem auto 8rem auto;
  padding: 0;
  background-color: #fff;
  border-radius: 0.5rem;
  border: 1px solid #cfd1d6;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.5625rem 1.5rem 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.5625rem 1.5rem 0 rgba(0, 0, 0, 0.5);
}

.main-content .section-head {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-height: 0;
  font-size: 1.625rem;
  font-weight: 500;
  padding: 2.5rem 3.5rem;
}

.main-content .section-notification {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  padding: 0rem 0rem 1.5rem;
}
.main-content .section-notification .notification-content {
  padding: 1rem 3.5rem 1rem;
  font-size: 0.875rem;
  color: #1352B2;
  line-height: 1.5;
  background-color: #dae7f5;
}

.main-content .section-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0rem 3.5rem 3.5rem;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main-content .section-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
.main-content .section-body .comp-input.modern {
  width: 100%;
  max-width: 30rem;
}
.main-content .section-body .comp-input-group {
  width: 100%;
  max-width: 30rem;
}
.main-content .section-body .comp-verify-code-input {
  width: 100%;
  max-width: 30rem;
}
.main-content .section-body .comp-verify-code-input .verify-code-group {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.main-content .section-body .comp-verify-code-input .verify-code-action {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: 0.875rem;
}
.main-content .section-body .comp-captcha {
  width: 100%;
  max-width: 30rem;
}
.main-content .section-body .pwd-strength {
  width: 100%;
  max-width: 100%;
}
.main-content .section-body .comp-input {
  width: 100%;
  max-width: 30rem;
}
.main-content .section-body .comp-input input[type=text], .main-content .section-body .comp-input input[type=number], .main-content .section-body .comp-input input[type=tel] {
  width: 100%;
  min-height: 3.125rem;
  font-size: 1rem;
}
.main-content .section-body .comp-input-group {
  width: 100%;
  max-width: 30rem;
}
.main-content .section-body .comp-input-group .select-toggle {
  height: 3.125rem;
  padding: 0.75rem 0.625rem;
}
.main-content .section-body .comp-input-group .select-toggle:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.main-content .section-body .comp-input-group .select-toggle .select-label {
  vertical-align: text-top;
  font-size: 1rem;
}
.main-content .section-body .comp-input-group input[type=text], .main-content .section-body .comp-input-group input[type=number], .main-content .section-body .comp-input-group input[type=tel] {
  min-height: 3.125rem;
  font-size: 1rem;
}
.main-content .section-body .comp-input-group .q-btn {
  min-height: 3.125rem;
}
.main-content .section-body .comp-input-group.input-group-action-both-sides input[type=text], .main-content .section-body .comp-input-group.input-group-action-both-sides input[type=number], .main-content .section-body .comp-input-group.input-group-action-both-sides input[type=tel] {
  font-size: 0.9375rem;
}
.main-content .section-body .comp-input-group.input-group-action-both-sides .comp-select .select-toggle .select-label {
  font-size: 0.9375rem;
}
.main-content .section-body .divide-h {
  position: relative;
  padding: 2rem 0rem;
}
.main-content .section-body .divide-h:before {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e7e9ec;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main-content .section-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
.main-content .inner-frame {
  border: 1px solid #dadce0;
  background: #f7f8f9;
  -webkit-box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
          box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
  border-radius: 0.25rem;
  padding: 1rem 1rem;
}
.main-content .inner-frame ul {
  margin: 0;
}
.main-content .inner-frame ul li {
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid #dadce0;
}
.main-content .inner-frame ul li:first-child {
  padding-top: 0.5rem;
}
.main-content .inner-frame ul li:last-child {
  padding-bottom: 0.5rem;
  border-bottom: 0;
}
.main-content .inner-frame ul.list-style-disc {
  list-style-type: disc;
  margin-left: 1.5rem;
}
.main-content .inner-frame.qnap-services {
  font-size: 0.938rem;
}
.main-content .inner-frame.qnap-services .service-item {
  display: inline-block;
  width: 9.2rem;
  padding: 0.5rem;
  border-bottom: 0px;
  text-align: center;
  cursor: pointer;
}
.main-content .inner-frame.qnap-services .service-item .service-logo {
  width: 3.375rem;
  height: 3.375rem;
  margin: 0.5rem auto 0.5rem auto;
}
.main-content .inner-frame.qnap-services .service-item .service-logo img {
  width: 100%;
}
.main-content .inner-frame.qnap-services .service-item .service-name {
  font-size: 0.875rem;
  color: #40464D;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-content .inner-frame.qnap-services .service-item:hover .service-name {
  color: #001B49;
}
.main-content .inner-frame.verify-selection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.main-content .inner-frame.verify-selection .selection-img {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  width: 3rem;
  height: 3rem;
}
.main-content .inner-frame.verify-selection .selection-img img {
  width: 100%;
}
.main-content .inner-frame.verify-selection .selection-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-left: 0.5rem;
}
.main-content .inner-frame.verify-selection:hover {
  color: #1352B2;
  border-color: #aaa;
  background-color: #fff;
}
.main-content .inner-frame.approval-resource-list .resource-item {
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid #dadce0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-content .inner-frame.approval-resource-list .resource-item:first-child {
  padding-top: 0.5rem;
}
.main-content .inner-frame.approval-resource-list .resource-item:last-child {
  border-bottom: 0;
  padding-bottom: 0.5rem;
}
.main-content .inner-frame.inner-frame--locked {
  opacity: 0.5;
  pointer-events: none;
}

.main-content .cd-reminder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1rem;
  color: #004085;
  padding: 1rem 1rem;
  border: 1px solid #b4d1f0;
  border-radius: 0.25rem;
  background-color: #cce5ff;
  -webkit-box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
          box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
}
.main-content .cd-reminder .cd-reminder__text {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 1rem;
}
.main-content .cd-reminder .cd-reminder__text::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  top: -0.25rem;
  bottom: -0.25rem;
  right: 0;
  background-color: #b4d1f0;
}
.main-content .cd-reminder .cd-reminder__sec {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  font-size: 24px;
  padding: 0rem 0rem 0rem 1rem;
}

.main-content .section-footer {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-height: 0;
  padding: 0rem 2rem 2rem;
}
.main-content .section-footer .checkbox-align-center {
  position: absolute;
  top: 25%;
  -webkit-transform: translateY(-25%);
      -ms-transform: translateY(-25%);
          transform: translateY(-25%);
  margin: auto;
}
.main-content .section-footer .q-btn-large {
  border-radius: 0.25rem;
}

.footer {
  position: relative;
  height: auto;
  text-align: center;
  border-top: 1px solid #314158;
  font-size: 0.875rem;
}
.footer .footer-utils {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0rem;
}
.footer .footer-links .link-item {
  display: inline-block;
  padding: 0rem 1rem;
  margin: 0.5rem 0rem;
  border-right: 1px solid rgba(231, 233, 236, 0.5);
}
.footer .footer-links .link-item a {
  color: #839CC6;
  text-decoration: none;
}
.footer .footer-links .link-item a:hover {
  color: #839CC6;
}
.footer .footer-links .link-item:last-child {
  border: 0;
}
.footer .footer-sns .sns-item {
  display: inline-block;
  padding: 0rem 0.5rem;
  margin: 0.5rem 0rem;
}
.footer .footer-sns .sns-item a {
  color: #777;
  text-decoration: none;
}
.footer .footer-sns .sns-item:first-child {
  padding-left: 1.125rem;
  border-left: 1px solid rgba(231, 233, 236, 0.5);
}
.footer .footer-sns .sns-item.weibo a {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
.footer .footer-sns .sns-item.weibo a img {
  width: 100%;
  max-width: 100%;
}
.footer .footer-copyright {
  border-top: 1px solid #314158;
  background-color: rgba(0, 14, 35, 0.5);
  padding: 1.5rem 0rem;
  color: #5a739d;
}
.footer .footer-copyright .china_site {
  margin-top: 0.5rem;
}
.footer .footer-copyright .china_site img {
  margin: 0 0.25rem;
}
.footer .footer-copyright .china_site a {
  font-size: 0.75rem;
  color: #5a739d;
  text-decoration: none;
}

/* Content Style
-------------------------------------------------- */
.text-wrap {
  color: #000;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.text-wrap ol, .text-wrap ul {
  margin: 0;
  padding: 0;
  margin-left: 1.25rem;
  list-style-type: disc;
}
.text-wrap ol li, .text-wrap ul li {
  padding-left: 0rem;
  padding-bottom: 0.5rem;
}

/* Sign In Custom
-------------------------------------------------- */
.common-page-signin {
  height: 100vh;
}
.common-page-signin .header {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.common-page-signin .main-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: transparent;
  overflow: hidden;
}
.common-page-signin .main-content .section-left {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: 65%;
  max-width: 65%;
  min-width: 0;
  height: 100%;
  text-align: center;
  color: #fff;
}
@media all and (-ms-high-contrast: none) {
  .common-page-signin .main-content .section-left {
    height: auto;
  }
}
.common-page-signin .main-content .section-left.pin-position {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding-top: 8.75rem;
}
.common-page-signin .main-content .section-left .promo-content {
  position: relative;
}
@media all and (-ms-high-contrast: none) {
  .common-page-signin .main-content .section-left .promo-content {
    margin-top: 8% !important;
  }
}
.common-page-signin .main-content .section-left .promo-content .slogan {
  opacity: 0;
  font-size: 1.875rem;
  font-weight: 200;
  letter-spacing: 0.063rem;
  -webkit-transition: opacity 1s ease-in-out 1s;
  transition: opacity 1s ease-in-out 1s;
  -webkit-animation: slogan-opacity;
          animation: slogan-opacity;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes slogan-opacity {
  from {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes slogan-opacity {
  from {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
}
.common-page-signin .main-content .section-left .promo-content .promo-banner {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0;
  pointer-events: none;
}
.common-page-signin .main-content .section-left .promo-content .promo-banner.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: promo-banner-fadein;
          animation: promo-banner-fadein;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.common-page-signin .main-content .section-left .promo-content .promo-banner.fade-out {
  -webkit-animation: promo-banner-fadeout;
          animation: promo-banner-fadeout;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes promo-banner-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes promo-banner-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes promo-banner-fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes promo-banner-fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.common-page-signin .main-content .section-left .promo-content .promo-service {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
}
.common-page-signin .main-content .section-left .promo-content .promo-service .service-logo {
  height: 3rem;
  opacity: 0;
  -webkit-animation: promo-service-logo-display;
          animation: promo-service-logo-display;
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.common-page-signin .main-content .section-left .promo-content .promo-service .service-logo img {
  max-height: 3rem;
}
.common-page-signin .main-content .section-left .promo-content .promo-service .divide {
  height: 1px;
  background-image: linear-gradient(135deg, rgba(119, 169, 254, 0) 0%, #506C9C 50%, rgba(119, 169, 254, 0) 100%);
  margin: 1.5rem 0rem;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-animation: promo-service-divide-display;
          animation: promo-service-divide-display;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.common-page-signin .main-content .section-left .promo-content .promo-service .service-slogan {
  height: 1.5rem;
  opacity: 0;
  padding: 0rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 300;
  -webkit-animation: promo-service-slogan-display;
          animation: promo-service-slogan-display;
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.common-page-signin .main-content .section-left .promo-content .lottie-canvas {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}
.common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}
.common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration img, .common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration svg {
  width: 100%;
  max-width: 90%;
}
@media screen and (min-width: 2560px) {
  .common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration img, .common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration svg {
    max-width: 80%;
  }
}
.common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration.default {
  height: calc(28vw + 7.5rem + 1.5rem + 1px);
  overflow: hidden;
}
.common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration.default svg {
  margin-top: -3rem;
}
.common-page-signin .main-content .section-left .promo-content .lottie-canvas .illustration.type-normal {
  height: 28vw;
  opacity: 0;
  -webkit-animation: promo-service-illustration-display;
          animation: promo-service-illustration-display;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes promo-service-divide-display {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes promo-service-divide-display {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes promo-service-logo-display {
  from {
    opacity: 0;
    -webkit-transform: translateX(-2.5rem);
            transform: translateX(-2.5rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
  }
}
@keyframes promo-service-logo-display {
  from {
    opacity: 0;
    -webkit-transform: translateX(-2.5rem);
            transform: translateX(-2.5rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
  }
}
@-webkit-keyframes promo-service-slogan-display {
  from {
    opacity: 0;
    -webkit-transform: translateX(2.5rem);
            transform: translateX(2.5rem);
  }
  to {
    opacity: 0.7;
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
  }
}
@keyframes promo-service-slogan-display {
  from {
    opacity: 0;
    -webkit-transform: translateX(2.5rem);
            transform: translateX(2.5rem);
  }
  to {
    opacity: 0.7;
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
  }
}
@-webkit-keyframes promo-service-illustration-display {
  from {
    opacity: 0;
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes promo-service-illustration-display {
  from {
    opacity: 0;
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.common-page-signin .main-content .section-left .promo-content .dot-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
}
@media all and (-ms-high-contrast: none) {
  .common-page-signin .main-content .section-left .promo-content .dot-nav {
    display: none;
  }
}
.common-page-signin .main-content .section-left .promo-content .dot-nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.common-page-signin .main-content .section-left .promo-content .dot-nav li {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  opacity: 0.6;
  margin: 0rem 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.common-page-signin .main-content .section-left .promo-content .dot-nav li:hover {
  opacity: 1;
}
.common-page-signin .main-content .section-left .promo-content .dot-nav li.active {
  width: 2rem;
  opacity: 1;
  cursor: default;
}
.common-page-signin .main-content .section-right {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  overflow-y: auto;
  -ms-flex-line-pack: center;
      align-content: center;
  padding-top: 6rem;
  padding-right: 4rem;
}
.common-page-signin .main-content .section-right .signin-form {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  width: 100%;
  min-height: calc(100vh - 9rem);
  padding: 2.5rem 4rem;
  margin-bottom: 3rem;
  color: #fff;
  border-radius: 0.625rem;
  background-color: rgba(3, 32, 83, 0.6);
  -webkit-box-shadow: 0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.05), 0rem 0.375rem 0.375rem rgba(0, 0, 0, 0.1), 0rem 0.5rem 0.5rem rgba(0, 0, 0, 0.05), 0rem 0.625rem 0.938rem rgba(0, 0, 0, 0.03), 0rem 1.875rem 1.875rem rgba(0, 0, 0, 0.15), 0rem 4.375rem 3.75rem rgba(0, 0, 0, 0.15);
          box-shadow: 0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.05), 0rem 0.375rem 0.375rem rgba(0, 0, 0, 0.1), 0rem 0.5rem 0.5rem rgba(0, 0, 0, 0.05), 0rem 0.625rem 0.938rem rgba(0, 0, 0, 0.03), 0rem 1.875rem 1.875rem rgba(0, 0, 0, 0.15), 0rem 4.375rem 3.75rem rgba(0, 0, 0, 0.15);
}
.common-page-signin .main-content .section-right .signin-form .form-content {
  position: relative;
  width: 100%;
}
.common-page-signin .main-content .section-right .signin-form .comp-input.modern {
  width: 100%;
  max-width: 100%;
}
.common-page-signin .main-content .section-right .signin-form .comp-input.modern .input-label {
  background: none !important;
}
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern {
  border: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:hover {
  -webkit-box-shadow: 0 0.5625rem 1.5rem 0 rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 0.5625rem 1.5rem 0 rgba(0, 0, 0, 0.15) !important;
}
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:focus,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern.input-used,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:hover,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:focus,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:active {
  padding-top: 1.5rem;
  font-size: 0.938rem;
}
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:focus ~ .input-label, .common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:focus ~ .label-minimize,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern.input-used ~ .input-label,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern.input-used ~ .label-minimize,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill ~ .input-label,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill ~ .label-minimize,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:hover ~ .input-label,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:hover ~ .label-minimize,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:focus ~ .input-label,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:focus ~ .label-minimize,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:active ~ .input-label,
.common-page-signin .main-content .section-right .signin-form .comp-input.modern input.modern:-webkit-autofill:active ~ .label-minimize {
  font-size: 0.75rem;
  font-weight: 400;
  -webkit-transform: translate(-0.438rem, -0.625rem);
          transform: translate(-0.438rem, -0.625rem);
  color: #999;
}
.common-page-signin .main-content .section-right .signin-form a {
  color: #86B3FF;
  text-decoration: underline;
}
.common-page-signin .main-content .section-right .signin-form .social-login {
  position: relative;
  margin-bottom: 2rem;
}
.common-page-signin .main-content .section-right .signin-form .social-login .social-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 0.938rem 1.125rem;
  border-radius: 0.25rem;
  font-size: 0.938rem;
  width: 100%;
  min-width: 8rem;
  text-decoration: none;
  background-color: #fff;
  color: #2f2f2f;
}
.common-page-signin .main-content .section-right .signin-form .social-login .social-btn img {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
}
.common-page-signin .main-content .section-right .signin-form .social-login .social-btn span {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-left: 1rem;
}
.common-page-signin .main-content .section-right .signin-form .social-login .social-btn:hover {
  background-color: #fafafa;
}
.common-page-signin .main-content .section-right .signin-form .social-login .social-btn:active {
  background-color: #eaeaea;
}
.common-page-signin .main-content .section-right .form-head {
  margin-bottom: 2rem;
}
.common-page-signin .main-content .section-right .form-title {
  font-size: 1.625rem;
  font-weight: 500;
}
.common-page-signin .main-content .section-right .form-title .sign-in-with-qnap-id {
  font-size: 1.5rem;
  padding-bottom: 0.25rem;
}
.common-page-signin .main-content .section-right .form-title .continue-to-service {
  font-weight: 400;
  font-size: 1.375rem;
  color: #9BABC4;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.common-page-signin .main-content .section-right .form-primary-option {
  font-size: 0.875rem;
  margin-bottom: 0 !important;
}
.common-page-signin .main-content .section-right .social-signin {
  font-size: 0;
}
.common-page-signin .main-content .section-right .social-signin .social-item {
  display: inline-block;
  width: 50%;
  font-size: 0.875rem;
  color: #757575;
  padding: 0.625rem 0.625rem 0.625rem 3.125rem;
  background: #FFFFFF;
  border: 1px solid #dadce0;
  border-radius: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.common-page-signin .main-content .section-right .social-signin .social-item:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}
.common-page-signin .main-content .section-right .social-signin .social-item:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  border-left: 0;
}
.common-page-signin .main-content .section-right .social-signin .social-item:hover {
  background-color: #eef0f3;
}
.common-page-signin .main-content .section-right .social-signin .social-item:active {
  background-color: #e2e6ea;
}
.common-page-signin .main-content .section-right .social-signin .social-item.google {
  background-image: url("../img/utils/logo_google.svg");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  background-size: 1.125rem 1.125rem;
}
.common-page-signin .main-content .section-right .social-signin .social-item.facebook {
  background-image: url("../img/utils/logo_facebook.svg");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  background-size: 1.125rem 1.125rem;
}
.common-page-signin .main-content .section-right .comp-checkbox .comp-label {
  font-size: 0.875rem;
}
.common-page-signin .main-content .section-right .comp-input-group input[type=text], .common-page-signin .main-content .section-right .comp-input-group input[type=number], .common-page-signin .main-content .section-right .comp-input-group input[type=tel] {
  min-height: 3.125rem;
  font-size: 1rem;
}
.common-page-signin .main-content .section-right .comp-input-group .q-btn {
  min-height: 3.125rem;
}
.common-page-signin .main-content .section-right .captcha-row .text-wrap {
  color: #fff;
}
.common-page-signin .main-content .section-right .captcha-row .comp-captcha {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 0.25rem;
}
.common-page-signin .main-content .section-right .captcha-row .comp-captcha * {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.common-page-signin .main-content .section-right .action-row .q-btn {
  width: 100%;
  border-radius: 0.25rem;
  background-color: #0E46C1;
}
.common-page-signin .main-content .section-right .action-row .q-btn:hover {
  background-color: #1653D9;
  -webkit-box-shadow: 0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.05), 0rem 0.375rem 0.375rem rgba(0, 0, 0, 0.1), 0rem 0.5rem 0.5rem rgba(0, 0, 0, 0.05), 0rem 0.625rem 0.938rem rgba(0, 0, 0, 0.03), 0rem 1.875rem 1.875rem rgba(0, 0, 0, 0.15), 0rem 4.375rem 3.75rem rgba(0, 0, 0, 0.15);
          box-shadow: 0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.05), 0rem 0.375rem 0.375rem rgba(0, 0, 0, 0.1), 0rem 0.5rem 0.5rem rgba(0, 0, 0, 0.05), 0rem 0.625rem 0.938rem rgba(0, 0, 0, 0.03), 0rem 1.875rem 1.875rem rgba(0, 0, 0, 0.15), 0rem 4.375rem 3.75rem rgba(0, 0, 0, 0.15);
}
.common-page-signin .main-content .section-right .action-row .q-btn:active {
  background-color: #0e48c7;
}
.common-page-signin .main-content .section-right .action-row .wechat-login-btn {
  background-color: #1AAD19;
}
.common-page-signin .main-content .section-right .action-row .wechat-login-btn .ic-wechat {
  display: inline-block;
  width: 1.5rem;
  vertical-align: middle;
  line-height: 0;
  margin-right: 0.25rem;
}
.common-page-signin .main-content .section-right .action-row .wechat-login-btn .ic-wechat img {
  width: 100%;
  max-width: 100%;
}
.common-page-signin .main-content .section-right .action-row .wechat-login-btn:hover {
  background-color: #18b818;
}
.common-page-signin .main-content .section-right .action-row .wechat-login-btn:active {
  background-color: #11a011;
}
.common-page-signin .main-content .section-right .action-row .q-btn.disabled, .common-page-signin .main-content .section-right .action-row .q-btn[disabled], .common-page-signin .main-content .section-right .action-row .q-btn-default.disabled, .common-page-signin .main-content .section-right .action-row .q-btn-default[disabled], .common-page-signin .main-content .section-right .action-row .q-btn-primary.disabled, .common-page-signin .main-content .section-right .action-row .q-btn-primary[disabled] {
  cursor: default;
  color: rgba(255, 255, 255, 0.5);
  background-color: #0e368f;
  border-color: #0e368f;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.common-page-signin .main-content .section-right .action-row .q-btn.disabled:hover, .common-page-signin .main-content .section-right .action-row .q-btn.disabled:active, .common-page-signin .main-content .section-right .action-row .q-btn[disabled]:hover, .common-page-signin .main-content .section-right .action-row .q-btn[disabled]:active, .common-page-signin .main-content .section-right .action-row .q-btn-default.disabled:hover, .common-page-signin .main-content .section-right .action-row .q-btn-default.disabled:active, .common-page-signin .main-content .section-right .action-row .q-btn-default[disabled]:hover, .common-page-signin .main-content .section-right .action-row .q-btn-default[disabled]:active, .common-page-signin .main-content .section-right .action-row .q-btn-primary.disabled:hover, .common-page-signin .main-content .section-right .action-row .q-btn-primary.disabled:active, .common-page-signin .main-content .section-right .action-row .q-btn-primary[disabled]:hover, .common-page-signin .main-content .section-right .action-row .q-btn-primary[disabled]:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: #0e368f;
  border-color: #0e368f;
}
.common-page-signin .main-content .section-right .options {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  font-size: 0.875rem;
}
.common-page-signin .main-content .section-right .options .signup-query-btn {
  display: none;
}
.common-page-signin .main-content .section-right .qnap-links {
  margin-top: 2rem;
  padding-top: 0.5rem;
  font-size: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.common-page-signin .main-content .section-right .qnap-links .link-item {
  display: inline-block;
  padding: 0rem 0.625rem;
  border-right: 1px solid #515871;
}
.common-page-signin .main-content .section-right .qnap-links .link-item a {
  font-size: 0.75rem;
  color: #5a739d;
}
.common-page-signin .main-content .section-right .qnap-links .link-item:first-child {
  padding-left: 0;
}
.common-page-signin .main-content .section-right .qnap-links .link-item:last-child {
  border: 0;
}
.common-page-signin .main-content .section-right .qnap-copyright {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #5a739d;
}
.common-page-signin .main-content .section-right .china_site {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  margin-top: 0.1875rem;
  color: #5a739d;
}
.common-page-signin .main-content .section-right .china_site img {
  margin: 0 0.25rem;
}
.common-page-signin .main-content .section-right .china_site a {
  font-size: 0.75rem;
  color: #5a739d;
  text-decoration: none;
}
.common-page-signin .main-content .section-right.section-right-only {
  padding: 6rem 4rem 0rem;
}
.common-page-signin .main-content .section-right.section-right-only .signin-form {
  width: min(100%, 36.25rem);
  margin-inline: auto;
}

/* Media Query
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .root {
    background-image: none;
    background-color: transparent;
  }
  .root:before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-image: url(../img/background/background-v3-dark-compression.jpg);
    background-color: #fc0;
    background-size: cover;
    background-position: bottom right;
    background-color: #001841;
  }
  .common-page-signin {
    background: none;
  }
  .common-page-signin .main-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .common-page-signin .main-content .section-left {
    display: none;
  }
  .common-page-signin .main-content .section-right {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 0;
    padding-right: 0;
    width: 100%;
    height: 100%;
  }
  .common-page-signin .main-content .section-right .options-row .signup-query-btn {
    display: block;
  }
  .common-page-signin .main-content .section-right.section-right-only {
    padding: 6rem 0rem 0rem;
  }
  .common-page-signin .main-content .section-right .signin-form {
    min-height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    margin: 0 auto;
  }
}
@media screen and (max-width: 600px) {
  .common-page-signin {
    height: auto;
  }
  .common-page-signin .main-content .section-right {
    padding: 4.5rem 0rem 2rem;
    height: auto;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  .common-page-signin .main-content .section-right .signin-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .common-page-signin .main-content .section-right .signin-form .comp-input.modern {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .common-page-signin .main-content .section-right.section-right-only .signin-form {
    width: 100%;
  }
}
/* Sign Up Custom
-------------------------------------------------- */
.main-content .content-section.section-signup {
  width: 53.75rem;
}
.main-content .content-section.section-signup .section-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.main-content .content-section.section-signup .section-body .sub-head {
  margin-bottom: 2rem;
  line-height: 1.4;
  font-weight: 500;
}
.main-content .content-section.section-signup .section-body .section-left {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  width: 18.438rem;
  padding-right: 3.5rem;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin {
  font-size: 0;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin .social-item {
  font-size: 0.875rem;
  color: #2f2f2f;
  padding: 0.625rem 0.625rem 0.625rem 2.75rem;
  background: #FFFFFF;
  border: 1px solid #CFD1D6;
  border-radius: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin .social-item:hover {
  border-color: #aaa;
  -webkit-box-shadow: 0 0.2rem 0.313rem 0 #e7ecf5;
          box-shadow: 0 0.2rem 0.313rem 0 #e7ecf5;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin .social-item:active {
  background-color: #f7f7f7;
  border-color: #001B49;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin .social-item.google {
  background-image: url("../img/utils/logo_google.svg");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  background-size: 1.125rem 1.125rem;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin .social-item.facebook {
  background-image: url("../img/utils/logo_facebook.svg");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  background-size: 1.125rem 1.125rem;
}
.main-content .content-section.section-signup .section-body .section-left .social-signin .social-item.apple {
  background-image: url("../img/utils/logo_apple.svg");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  background-size: 1.125rem 1.125rem;
}
.main-content .content-section.section-signup .section-body .section-left .divide {
  position: relative;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: none;
}
.main-content .content-section.section-signup .section-body .section-left .divide:before {
  position: absolute;
  content: "";
  width: 100%;
  border-top: 1px solid #e7e9ec;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
.main-content .content-section.section-signup .section-body .section-left .divide-label {
  position: relative;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: #999;
  background-color: #fff;
  z-index: 1;
}
.main-content .content-section.section-signup .section-body form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  min-width: 0;
}
.main-content .content-section.section-signup .section-body .section-right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  border-left: 1px solid #e7e9ec;
  padding-left: 3.5rem;
}
.main-content .content-section.section-signup .section-body .section-right .comp-input.modern {
  width: 100%;
  min-width: 100%;
}
.main-content .content-section.section-signup .section-body .section-right .pwd-strength {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}
.main-content .content-section.section-signup .section-body .section-right .action-row .q-btn {
  width: 100%;
  border-radius: 0.25rem;
}
.main-content .content-section.section-signup .section-body .section-right .options-row {
  font-size: 0.875rem;
}
.main-content .content-section.section-signup .section-body .section-right .options-row .signup-mq-btn {
  display: none;
}
.main-content .content-section.section-signup .section-body .section-right .m--sub-head {
  display: none;
}
@media screen and (max-width: 800px) {
  .main-content .content-section.section-signup .section-body .section-right .m--sub-head {
    display: block;
  }
}
.main-content .content-section.section-signup .section-body .section-right .m--social-signup {
  position: relative;
  display: none;
}
@media screen and (max-width: 800px) {
  .main-content .content-section.section-signup .section-body .section-right .m--social-signup {
    display: block;
  }
}
.main-content .content-section.section-signup .section-body .section-right .m--social-signup .social-btn {
  display: block;
  padding: 0.75rem 1.125rem;
  border-radius: 0.25rem;
  font-size: 0.938rem;
  width: 100%;
  min-width: 8rem;
  text-decoration: none;
  background-color: #fff;
  color: #2f2f2f;
  text-align: left;
}
.main-content .content-section.section-signup .section-body .section-right .m--social-signup .social-btn img {
  display: inline-block;
  vertical-align: middle;
}
.main-content .content-section.section-signup .section-body .section-right .m--social-signup .social-btn span {
  display: inline-block;
  vertical-align: top;
  padding-left: 1rem;
}
.main-content .content-section.section-signup .section-body .section-right .m--social-signup .social-btn:hover {
  background-color: #fafafa;
}
.main-content .content-section.section-signup .section-body .section-right .m--social-signup .social-btn:active {
  background-color: #eaeaea;
}
.main-content .content-section.section-signup .section-body .section-right .comp-checkbox-group {
  margin-top: 2rem;
}
.main-content .content-section.section-signup .section-body .section-right .q-btn.wechat-login-btn {
  border-radius: 0.25rem;
  width: 25rem;
  background-color: #1AAD19;
  border-color: #1AAD19;
}
.main-content .content-section.section-signup .section-body .section-right .q-btn.wechat-login-btn .ic-wechat {
  display: inline-block;
  width: 1.5rem;
  vertical-align: middle;
  line-height: 0;
  margin-right: 0.25rem;
}
.main-content .content-section.section-signup .section-body .section-right .q-btn.wechat-login-btn .ic-wechat img {
  width: 100%;
  max-width: 100%;
}
.main-content .content-section.section-signup .section-body .section-right .q-btn.wechat-login-btn:hover {
  background-color: #18b818;
}
.main-content .content-section.section-signup .section-body .section-right .q-btn.wechat-login-btn:active {
  background-color: #11a011;
}
.main-content .content-section.section-signup .section-body .section-right .divide {
  position: relative;
  text-align: left;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.main-content .content-section.section-signup .section-body .section-right .divide:before {
  position: absolute;
  content: "";
  width: 100%;
  border-top: 1px solid #e7e9ec;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
.main-content .content-section.section-signup .section-body .section-right .divide-label {
  position: relative;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: #999;
  background-color: #fff;
  z-index: 1;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-left, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-left {
  display: none;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right {
  padding-left: 0;
  border-left: 0;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .sub-head.sub-head-custom-portal, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .sub-head.sub-head-custom-portal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .sub-head.sub-head-custom-portal .tag.tag-light, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .sub-head.sub-head-custom-portal .tag.tag-light {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  margin-right: 0.5rem;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .sub-head.sub-head-custom-portal .single-hilight-dark, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .sub-head.sub-head-custom-portal .single-hilight-dark {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .row-divide, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .row-divide {
  min-width: 25rem;
  height: 1px;
  background-color: #ddd;
  margin: 2rem 0rem;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input.modern, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input.modern {
  width: 25rem;
  min-width: 25rem;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input-group, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input-group {
  width: 25rem;
  min-width: 25rem;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input-group input[type=text], .main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input-group input[type=number], .main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input-group input[type=tel], .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input-group input[type=text], .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input-group input[type=number], .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input-group input[type=tel] {
  height: 3.5rem;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input-group .select-toggle, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input-group .select-toggle {
  height: 3.5rem;
}
.main-content .content-section.section-signup .section-body.section-body-cn .section-right .action-row .q-btn, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .action-row .q-btn {
  width: auto;
  min-width: 10rem;
}

@media screen and (max-width: 800px) {
  .main-content .content-section.section-signup {
    width: 100%;
  }
  .main-content .content-section.section-signup .section-body, .main-content .content-section.section-signup .section-body.section-body-cn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .main-content .content-section.section-signup .section-body .section-left, .main-content .content-section.section-signup .section-body.section-body-cn .section-left {
    display: none;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    min-width: 0;
    padding-right: 0;
  }
  .main-content .content-section.section-signup .section-body .section-left .social-signin .social-item, .main-content .content-section.section-signup .section-body.section-body-cn .section-left .social-signin .social-item {
    display: inline-block;
    width: 50%;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main-content .content-section.section-signup .section-body .section-left .social-signin .social-item:first-child, .main-content .content-section.section-signup .section-body.section-body-cn .section-left .social-signin .social-item:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
    border-right: 0;
  }
  .main-content .content-section.section-signup .section-body .section-left .social-signin .social-item:first-child:hover + .social-item, .main-content .content-section.section-signup .section-body.section-body-cn .section-left .social-signin .social-item:first-child:hover + .social-item {
    border-left-color: #aaa;
  }
  .main-content .content-section.section-signup .section-body .section-left .social-signin .social-item:first-child:active + .social-item, .main-content .content-section.section-signup .section-body.section-body-cn .section-left .social-signin .social-item:first-child:active + .social-item {
    border-left-color: #001B49;
  }
  .main-content .content-section.section-signup .section-body .section-left .social-signin .social-item:last-child, .main-content .content-section.section-signup .section-body.section-body-cn .section-left .social-signin .social-item:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
  }
  .main-content .content-section.section-signup .section-body .section-left .divide, .main-content .content-section.section-signup .section-body.section-body-cn .section-left .divide {
    display: block;
  }
}
@media screen and (max-width: 800px) and (-ms-high-contrast: active), screen and (max-width: 800px) and (-ms-high-contrast: none) {
  .main-content .content-section.section-signup .section-body .section-left, .main-content .content-section.section-signup .section-body.section-body-cn .section-left {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
@media screen and (max-width: 800px) {
  .main-content .content-section.section-signup .section-body .section-right, .main-content .content-section.section-signup .section-body.section-body-cn .section-right {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    min-width: 0;
    border-left: 0;
    padding-left: 0;
  }
  .main-content .content-section.section-signup .section-body .section-right .comp-input.modern, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input.modern {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .main-content .content-section.section-signup .section-body .section-right .action-row .q-btn, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .action-row .q-btn {
    width: 100%;
    min-width: 0;
  }
  .main-content .content-section.section-signup .section-body .section-right .q-btn.wechat-login-btn, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .q-btn.wechat-login-btn {
    width: 100%;
  }
  .main-content .content-section.section-signup .section-body .section-right .divide, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .divide {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 800px) and (-ms-high-contrast: active), screen and (max-width: 800px) and (-ms-high-contrast: none) {
  .main-content .content-section.section-signup .section-body .section-right, .main-content .content-section.section-signup .section-body.section-body-cn .section-right {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
@media screen and (max-width: 600px) {
  .main-content .content-section.section-signup .section-body .section-right .comp-input.modern, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .comp-input.modern, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .comp-input.modern {
    width: 100%;
    min-width: 100%;
  }
  .main-content .content-section.section-signup .section-body .section-right .action-row .pull-right, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .action-row .pull-right, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .action-row .pull-right {
    float: none;
  }
  .main-content .content-section.section-signup .section-body .section-right .action-row .q-btn-group, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .action-row .q-btn-group, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .action-row .q-btn-group {
    width: 100%;
  }
  .main-content .content-section.section-signup .section-body .section-right .action-row .q-btn, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .action-row .q-btn, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .action-row .q-btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  .main-content .content-section.section-signup .section-body .section-right .action-row .q-btn:last-child, .main-content .content-section.section-signup .section-body.section-body-cn .section-right .action-row .q-btn:last-child, .main-content .content-section.section-signup .section-body.section-body-custom-portal .section-right .action-row .q-btn:last-child {
    margin-bottom: 0;
  }
}
/* Sign In Options
-------------------------------------------------- */
.main-content .content-section.section-signin-options {
  width: 31.25rem;
}
.main-content .content-section.section-signin-options .section-head {
  font-size: 1.625rem;
  font-weight: 500;
  padding-bottom: 0;
}
.main-content .content-section.section-signin-options .section-head .sign-in-with-qnap-id {
  font-size: 1.375rem;
  padding-bottom: 0.5rem;
}
.main-content .content-section.section-signin-options .section-head .continue-to-service {
  font-weight: 400;
  font-size: 1.25rem;
  color: #2f2f2f;
  padding-bottom: 1.5rem;
  margin-bottom: 0rem;
}
.main-content .content-section.section-signin-options .section-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2rem 2rem;
}
.main-content .content-section.section-signin-options .section-body .current-qid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.main-content .content-section.section-signin-options .section-body .current-qid .avatar {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  line-height: normal;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid #E0E0E2;
  border-radius: 100%;
  -webkit-box-shadow: 0 0.1875rem 0.625rem 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.1875rem 0.625rem 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: 0.25rem solid #dee5f0;
  overflow: hidden;
}
.main-content .content-section.section-signin-options .section-body .current-qid .avatar img {
  text-align: center;
  width: 100%;
}
.main-content .content-section.section-signin-options .section-body .current-qid .no-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3.5rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: #001B49;
}
.main-content .content-section.section-signin-options .section-body .current-qid .no-avatar span {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.main-content .content-section.section-signin-options .section-body .current-qid .continue-info {
  padding: 0rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
}
.main-content .content-section.section-signin-options .section-body .section-divide {
  width: 100%;
  height: 1px;
  background-color: #ddd;
}
.main-content .content-section.section-signin-options .section-body .q-btn {
  width: 100%;
  border-radius: 0.25rem;
  font-size: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media screen and (max-width: 800px) {
  .main-content .content-section.section-signin-options {
    width: 100%;
  }
  .main-content .content-section.section-signin-options .section-head {
    padding-top: 2rem;
  }
}
@media screen and (max-width: 600px) {
  .main-content .content-section.section-signin-options .section-body .action-row .pull-right {
    float: none;
  }
  .main-content .content-section.section-signin-options .section-body .action-row .q-btn-group {
    width: 100%;
  }
  .main-content .content-section.section-signin-options .section-body .action-row .q-btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  .main-content .content-section.section-signin-options .section-body .action-row .q-btn:last-child {
    margin-bottom: 0;
  }
}
/* IFTTT Custom
-------------------------------------------------- */
.main-content .content-section.section-ifttt {
  width: 56.25rem;
}
.main-content .content-section.section-ifttt .section-head .brand-logo {
  width: 5.313rem;
  display: inline-block;
}
.main-content .content-section.section-ifttt .section-head .brand-logo > img {
  width: 100%;
}
.main-content .content-section.section-ifttt .section-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.main-content .content-section.section-ifttt .section-body .sub-head {
  margin-bottom: 2rem;
  line-height: 1.4;
  font-weight: 500;
}
.main-content .content-section.section-ifttt .section-body .section-left {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  width: 18.75rem;
  padding-right: 3.5rem;
}
.main-content .content-section.section-ifttt .section-body .section-left .inner-frame {
  background-color: #fff;
  padding: 0;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.main-content .content-section.section-ifttt .section-body .section-left .inner-frame ul li {
  padding: 1rem 0rem;
  line-height: 1.4;
  font-size: 0.938rem;
  color: #5f6368;
}
.main-content .content-section.section-ifttt .section-body .section-left .inner-frame ul li:first-child {
  padding-top: 0rem;
}
.main-content .content-section.section-ifttt .section-body .section-left .inner-frame ul li:last-child {
  padding-bottom: 0rem;
}
.main-content .content-section.section-ifttt .section-body .section-right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  min-width: 0;
  border-left: 1px solid #e7e9ec;
  padding-left: 3.5rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .inner-head {
  margin-bottom: 2rem;
  line-height: 1.4;
  font-weight: 500;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-no-device {
  position: relative;
  border: 1px solid #dadce0;
  background-color: #f7f8f9;
  -webkit-box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
          box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
  border-radius: 0.25rem;
  padding: 1.5rem 1.5rem;
  height: 24.125rem;
  overflow-y: auto;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-no-device .no-device-content {
  position: relative;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-no-device .no-device-content .device-img {
  text-align: center;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-no-device .no-device-content .desc {
  margin-top: 1rem;
  text-align: center;
  padding: 0rem 1.5rem;
  color: #777;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-device-login {
  position: relative;
  border: 1px solid #dadce0;
  background: #fff;
  -webkit-box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
          box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
  border-radius: 0.25rem;
  padding: 1.5rem 2rem;
  overflow-y: visible;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-device-login .action-row .q-btn-large {
  border-radius: 0.25rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-device-login .note-msg {
  position: relative;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-device-login .note-msg .ic-help {
  display: inline-block;
  margin-left: 0.313rem;
  vertical-align: bottom;
  cursor: pointer;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-device-login .note-msg .ic-help:hover .ic-help-tooltip {
  display: block;
}
.main-content .content-section.section-ifttt .section-body .section-right .panel-device-login .note-msg .ic-help-tooltip {
  display: none;
  position: absolute;
  padding: 0.5rem 0.875rem;
  color: #fff;
  text-align: left;
  background-color: #2f2f2f;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.15);
  left: 0rem;
  right: 0rem;
  bottom: 2rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list {
  position: relative;
  border: 1px solid #dadce0;
  background: #fff;
  -webkit-box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
          box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
  border-radius: 0.25rem;
  height: 24.125rem;
  overflow-y: hidden;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .progress-indicator-fullspace {
  border-radius: 0.25rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .progress-indicator-fullspace .circle-progress-indicator {
  width: 3.5rem;
  height: 3.5rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list > .list {
  padding: 1.5rem 1.5rem;
  width: 100%;
  height: 24.125rem;
  overflow-y: auto;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0rem;
  border-bottom: 1px solid #dadce0;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item:first-child {
  padding-top: 0rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item:last-child {
  padding-bottom: 1.5rem;
  border-bottom: 0;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .device {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .device .device-img {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: 1.875rem;
  min-width: 1.875rem;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .device .device-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 0.938rem;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .action {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .action .progress-indicator-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .action .progress-indicator-group .progress-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin-right: 0.5rem;
  font-size: 0.875rem;
  color: #5f6368;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .action .progress-indicator-group .progress-label {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
.main-content .content-section.section-ifttt .section-body .section-right .device-list .list-item > .action .progress-indicator-group .circle-progress-indicator {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main-content .content-section.section-ifttt .section-body .section-right .device-list ul {
    margin-bottom: 1.5rem;
  }
}
@supports (-ms-ime-align: auto) {
  .main-content .content-section.section-ifttt .section-body .section-right .device-list ul {
    margin-bottom: 1.5rem;
  }
}
.main-content .content-section.section-ifttt .section-body .section-right .illus-device-offline {
  width: 10rem;
  margin: 5rem auto 1.5rem auto;
}
.main-content .content-section.section-ifttt .section-body .section-right .illus-device-offline img {
  width: 100%;
}

@media screen and (max-width: 800px) {
  .main-content .content-section.section-ifttt {
    width: 100%;
  }
  .main-content .content-section.section-ifttt .section-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .main-content .content-section.section-ifttt .section-body .section-left {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    min-width: 0;
    padding-right: 0;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e7e9ec;
  }
  .main-content .content-section.section-ifttt .section-body .section-left .sub-head {
    margin-bottom: 1.5rem;
  }
  .main-content .content-section.section-ifttt .section-body .section-left .inner-frame {
    margin-bottom: 1.5rem;
    padding: 1rem 1rem;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
            box-shadow: 0 0.125rem 0.313rem 0 #e7ecf5;
  }
  .main-content .content-section.section-ifttt .section-body .section-right {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    border-left: 0;
    padding-left: 0;
  }
}
@media screen and (max-width: 800px) and (-ms-high-contrast: active), screen and (max-width: 800px) and (-ms-high-contrast: none) {
  .main-content .content-section.section-ifttt .section-body .section-left {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .main-content .content-section.section-ifttt .section-body .section-right {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
@media screen and (max-width: 600px) {
  .main-content .content-section.section-ifttt .section-body .section-right .comp-input.modern {
    width: 100%;
    min-width: 100%;
  }
}
/* Page Not found
-------------------------------------------------- */
.main-content .content-section.content-not-found {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  min-height: 25rem;
  margin: 11.25rem auto 11.25rem auto;
}
.main-content .content-section.content-not-found .infographic {
  position: relative;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
.main-content .content-section.content-not-found .infographic .illus-wrap {
  position: absolute;
  width: 33.5rem;
  top: 1rem;
  right: 0;
}
.main-content .content-section.content-not-found .infographic .illus-wrap img {
  width: 100%;
  max-width: 100%;
}
.main-content .content-section.content-not-found .info-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 0;
}
.main-content .content-section.content-not-found .info-content .info-content-head {
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.625rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 1.5rem;
  line-height: 1.45;
}
.main-content .content-section.content-not-found .info-content .info-content-body {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media screen and (max-width: 900px) {
  .main-content .content-section.content-not-found {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 5rem auto 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: transparent;
    border: 0;
  }
  .main-content .content-section.content-not-found .infographic {
    position: relative;
    text-align: center;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
    z-index: 1;
  }
  .main-content .content-section.content-not-found .infographic .illus-wrap {
    position: relative;
    width: 65%;
    max-width: 65%;
    margin: 1rem auto 0;
  }
  .main-content .content-section.content-not-found .info-content {
    position: relative;
    margin-top: -10%;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    border-top: 1px solid #293353;
  }
  .main-content .content-section.content-not-found .info-content .info-content-head {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    color: #fff;
  }
  .main-content .content-section.content-not-found .info-content .info-content-body {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  .main-content .content-section.content-not-found .info-content .info-content-body .text-wrap {
    color: rgba(255, 255, 255, 0.7);
  }
  .main-content .content-section.content-not-found .info-content .info-content-body .q-btn {
    font-size: 1.125rem;
    padding: 0.75rem 2.125rem;
    border-radius: 1.875rem;
    min-width: 8rem;
    color: #2f2f2f;
    background-color: #fff;
    border-color: #b5b8bf;
  }
  .main-content .content-section.content-not-found .info-content .info-content-body .q-btn:hover {
    background-color: #fff;
    border-color: #aaa;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .main-content .content-section.content-not-found .info-content .info-content-body .q-btn:active {
    color: #2f2f2f;
    background-color: #f7f7f7;
    background-image: none;
    border-color: #0b1c4f;
  }
}
@media screen and (max-width: 600px) {
  .main-content .content-section.content-not-found .infographic .illus-wrap {
    width: 75%;
    max-width: 75%;
  }
  .main-content .content-section.content-not-found .info-content {
    position: relative;
    margin-top: -10%;
  }
}
@media screen and (max-width: 480px) {
  .main-content .content-section.content-not-found .infographic .illus-wrap {
    width: 80%;
    max-width: 80%;
  }
  .main-content .content-section.content-not-found .info-content .info-content-head {
    font-size: 1.375rem;
  }
}

/* Color fine-tune for common-page
-------------------------------------------------- */
.common-page-signin .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background: rgba(255, 255, 255, 0.4);
}

/* Media Query
-------------------------------------------------- */
@media screen and (max-width: 900px) {
  .location-only .header > .utils {
    display: none;
  }
  .location-only .header > .utils-location-only {
    display: block;
  }
  .root {
    padding: 0rem 1rem;
  }
  .header .logo {
    width: 12.125rem;
    height: 2.25rem;
    background: url("../img/header/acc-logo.svg") no-repeat center center;
    background-size: 12.125rem 2.25rem;
  }
  .header .logo > img {
    display: none;
  }
  .main-content {
    padding: 0rem 0rem;
  }
  .main-content .content-section {
    border: 0;
    width: 100%;
    padding-top: 0rem;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
@media screen and (max-width: 780px) {
  .header {
    position: absolute;
    background-color: transparent;
  }
  .header .comp-dropdown-menu, .header .util-service .comp-dropdown-menu, .header .util-account .comp-dropdown-menu {
    position: fixed;
    font-size: 1rem;
    top: 4rem;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: calc(100vh - 4rem);
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    overflow: auto;
  }
  .main-content .content-section {
    width: 100%;
    min-height: calc(100vh - 6rem);
    margin-top: 5rem;
    margin-bottom: 1rem;
  }
  .main-content .section-head {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .main-content .section-body {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .main-content .section-notification .notification-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .main-content .inner-frame.qnap-services {
    padding: 0rem 1rem;
  }
  .main-content .inner-frame.qnap-services .service-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    border-bottom: 1px solid #dadce0;
    text-align: left;
    cursor: pointer;
  }
  .main-content .inner-frame.qnap-services .service-item:last-child {
    border-bottom: 0;
  }
  .main-content .inner-frame.qnap-services .service-item .service-logo {
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 0;
    margin-right: 1.5rem;
  }
  .main-content .inner-frame.qnap-services .service-item .service-name {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: 1rem;
  }
  .main-content .inner-frame.qnap-services .service-item:hover .service-name {
    color: #0698A8;
  }
  .footer {
    border-top: 0;
  }
  .footer .footer-sns {
    display: none;
  }
  .footer .footer-utils {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    padding-left: 0.5rem;
  }
  .footer .footer-links .link-item {
    display: block;
    border-right: 0;
    text-align: left;
  }
  .footer .footer-links .link-item a {
    text-decoration: underline;
  }
  .footer .footer-copyright {
    text-align: left;
    padding-left: 1.5rem;
    background-color: transparent;
  }
}
@media screen and (max-width: 640px) {
  .root.m--mw640-sprg .header, .root.m--mw640-sprg .footer {
    display: none !important;
  }
  .root.m--mw640-sprg .wrap .main-content .content-section {
    margin-top: 1rem !important;
    max-height: 100% !important;
    min-height: calc(100vh - 2rem) !important;
  }
}
@media screen and (max-width: 480px) {
  .main-content .section-footer .pull-right {
    float: none;
  }
  .main-content .section-footer .q-btn-group {
    width: 100%;
  }
  .main-content .section-footer .q-btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  .main-content .section-footer .q-btn:last-child {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 400px) {
  .header .utils .util-service {
    display: none !important;
  }
}