@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
html, body {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  overflow: hidden;
  overflow-y: auto;
  min-width: 310px;
  text-rendering: auto;
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans TC", "PingFang TC", "Lantinghei TC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(11, 77, 168)), to(rgb(133, 191, 245)));
  background-image: -o-linear-gradient(top, rgb(11, 77, 168), rgb(133, 191, 245));
  background-image: linear-gradient(to bottom, rgb(11, 77, 168), rgb(133, 191, 245));
}

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a, a:visited, a:active, a:hover {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

.modal-open .modal, div:focus, span:focus, .btn:focus, a:focus, select:focus, button:focus, input:focus, ul:focus, ol:focus, li:focus {
  outline: none !important;
}

/* Font setting */
html[lang=zh_TW], html[lang=zh_TW] body, html[lang=zh_TW] div, html[lang=zh_TW] h1, html[lang=zh_TW] h2, html[lang=zh_TW] h3, html[lang=zh_TW] h4, html[lang=zh_TW] h5, html[lang=zh_TW] h6, html[lang=zh_TW] input, html[lang=zh_TW] li, html[lang=zh_TW] p, html[lang=zh_TW] select, html[lang=zh_TW] td, html form[lang=zh_TW], html form[lang=zh_TW] body, html form[lang=zh_TW] div, html form[lang=zh_TW] h1, html form[lang=zh_TW] h2, html form[lang=zh_TW] h3, html form[lang=zh_TW] h4, html form[lang=zh_TW] h5, html form[lang=zh_TW] h6, html form[lang=zh_TW] input, html form[lang=zh_TW] li, html form[lang=zh_TW] p, html form[lang=zh_TW] select, html form[lang=zh_TW] td, html[lang=zh-TW], html[lang=zh-TW] body, html[lang=zh-TW] div, html[lang=zh-TW] h1, html[lang=zh-TW] h2, html[lang=zh-TW] h3, html[lang=zh-TW] h4, html[lang=zh-TW] h5, html[lang=zh-TW] h6, html[lang=zh-TW] input, html[lang=zh-TW] li, html[lang=zh-TW] p, html[lang=zh-TW] select, html[lang=zh-TW] td, html form[lang=zh-TW], html form[lang=zh-TW] body, html form[lang=zh-TW] div, html form[lang=zh-TW] h1, html form[lang=zh-TW] h2, html form[lang=zh-TW] h3, html form[lang=zh-TW] h4, html form[lang=zh-TW] h5, html form[lang=zh-TW] h6, html form[lang=zh-TW] input, html form[lang=zh-TW] li, html form[lang=zh-TW] p, html form[lang=zh-TW] select, html form[lang=zh-TW] td, html[lang=zh-HK], html[lang=zh-HK] body, html[lang=zh-HK] div, html[lang=zh-HK] h1, html[lang=zh-HK] h2, html[lang=zh-HK] h3, html[lang=zh-HK] h4, html[lang=zh-HK] h5, html[lang=zh-HK] h6, html[lang=zh-HK] input, html[lang=zh-HK] li, html[lang=zh-HK] p, html[lang=zh-HK] select, html[lang=zh-HK] td, html form[lang=zh-HK], html form[lang=zh-HK] body, html form[lang=zh-HK] div, html form[lang=zh-HK] h1, html form[lang=zh-HK] h2, html form[lang=zh-HK] h3, html form[lang=zh-HK] h4, html form[lang=zh-HK] h5, html form[lang=zh-HK] h6, html form[lang=zh-HK] input, html form[lang=zh-HK] li, html form[lang=zh-HK] p, html form[lang=zh-HK] select, html form[lang=zh-HK] td, html[lang=zh-Hant], html[lang=zh-Hant] body, html[lang=zh-Hant] div, html[lang=zh-Hant] h1, html[lang=zh-Hant] h2, html[lang=zh-Hant] h3, html[lang=zh-Hant] h4, html[lang=zh-Hant] h5, html[lang=zh-Hant] h6, html[lang=zh-Hant] input, html[lang=zh-Hant] li, html[lang=zh-Hant] p, html[lang=zh-Hant] select, html[lang=zh-Hant] td, html form[lang=zh-Hant], html form[lang=zh-Hant] body, html form[lang=zh-Hant] div, html form[lang=zh-Hant] h1, html form[lang=zh-Hant] h2, html form[lang=zh-Hant] h3, html form[lang=zh-Hant] h4, html form[lang=zh-Hant] h5, html form[lang=zh-Hant] h6, html form[lang=zh-Hant] input, html form[lang=zh-Hant] li, html form[lang=zh-Hant] p, html form[lang=zh-Hant] select, html form[lang=zh-Hant] td, html[lang=zh-Hant-TW], html[lang=zh-Hant-TW] body, html[lang=zh-Hant-TW] div, html[lang=zh-Hant-TW] h1, html[lang=zh-Hant-TW] h2, html[lang=zh-Hant-TW] h3, html[lang=zh-Hant-TW] h4, html[lang=zh-Hant-TW] h5, html[lang=zh-Hant-TW] h6, html[lang=zh-Hant-TW] input, html[lang=zh-Hant-TW] li, html[lang=zh-Hant-TW] p, html[lang=zh-Hant-TW] select, html[lang=zh-Hant-TW] td, html form[lang=zh-Hant-TW], html form[lang=zh-Hant-TW] body, html form[lang=zh-Hant-TW] div, html form[lang=zh-Hant-TW] h1, html form[lang=zh-Hant-TW] h2, html form[lang=zh-Hant-TW] h3, html form[lang=zh-Hant-TW] h4, html form[lang=zh-Hant-TW] h5, html form[lang=zh-Hant-TW] h6, html form[lang=zh-Hant-TW] input, html form[lang=zh-Hant-TW] li, html form[lang=zh-Hant-TW] p, html form[lang=zh-Hant-TW] select, html form[lang=zh-Hant-TW] td, html[lang=zh-Hant-HK], html[lang=zh-Hant-HK] body, html[lang=zh-Hant-HK] div, html[lang=zh-Hant-HK] h1, html[lang=zh-Hant-HK] h2, html[lang=zh-Hant-HK] h3, html[lang=zh-Hant-HK] h4, html[lang=zh-Hant-HK] h5, html[lang=zh-Hant-HK] h6, html[lang=zh-Hant-HK] input, html[lang=zh-Hant-HK] li, html[lang=zh-Hant-HK] p, html[lang=zh-Hant-HK] select, html[lang=zh-Hant-HK] td, html form[lang=zh-Hant-HK], html form[lang=zh-Hant-HK] body, html form[lang=zh-Hant-HK] div, html form[lang=zh-Hant-HK] h1, html form[lang=zh-Hant-HK] h2, html form[lang=zh-Hant-HK] h3, html form[lang=zh-Hant-HK] h4, html form[lang=zh-Hant-HK] h5, html form[lang=zh-Hant-HK] h6, html form[lang=zh-Hant-HK] input, html form[lang=zh-Hant-HK] li, html form[lang=zh-Hant-HK] p, html form[lang=zh-Hant-HK] select, html form[lang=zh-Hant-HK] td, html[lang=zh-Hant-CN], html[lang=zh-Hant-CN] body, html[lang=zh-Hant-CN] div, html[lang=zh-Hant-CN] h1, html[lang=zh-Hant-CN] h2, html[lang=zh-Hant-CN] h3, html[lang=zh-Hant-CN] h4, html[lang=zh-Hant-CN] h5, html[lang=zh-Hant-CN] h6, html[lang=zh-Hant-CN] input, html[lang=zh-Hant-CN] li, html[lang=zh-Hant-CN] p, html[lang=zh-Hant-CN] select, html[lang=zh-Hant-CN] td, html form[lang=zh-Hant-CN], html form[lang=zh-Hant-CN] body, html form[lang=zh-Hant-CN] div, html form[lang=zh-Hant-CN] h1, html form[lang=zh-Hant-CN] h2, html form[lang=zh-Hant-CN] h3, html form[lang=zh-Hant-CN] h4, html form[lang=zh-Hant-CN] h5, html form[lang=zh-Hant-CN] h6, html form[lang=zh-Hant-CN] input, html form[lang=zh-Hant-CN] li, html form[lang=zh-Hant-CN] p, html form[lang=zh-Hant-CN] select, html form[lang=zh-Hant-CN] td {
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans TC", "PingFang TC", "Lantinghei TC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif;
}

body.ff-global {
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans TC", "PingFang TC", "Lantinghei TC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif !important;
}

html[lang=zh], html[lang=zh] body, html[lang=zh] div, html[lang=zh] h1, html[lang=zh] h2, html[lang=zh] h3, html[lang=zh] h4, html[lang=zh] h5, html[lang=zh] h6, html[lang=zh] input, html[lang=zh] li, html[lang=zh] p, html[lang=zh] select, html[lang=zh] td, html form[lang=zh], html form[lang=zh] body, html form[lang=zh] div, html form[lang=zh] h1, html form[lang=zh] h2, html form[lang=zh] h3, html form[lang=zh] h4, html form[lang=zh] h5, html form[lang=zh] h6, html form[lang=zh] input, html form[lang=zh] li, html form[lang=zh] p, html form[lang=zh] select, html form[lang=zh] td, html[lang=zh_CN], html[lang=zh_CN] body, html[lang=zh_CN] div, html[lang=zh_CN] h1, html[lang=zh_CN] h2, html[lang=zh_CN] h3, html[lang=zh_CN] h4, html[lang=zh_CN] h5, html[lang=zh_CN] h6, html[lang=zh_CN] input, html[lang=zh_CN] li, html[lang=zh_CN] p, html[lang=zh_CN] select, html[lang=zh_CN] td, html form[lang=zh_CN], html form[lang=zh_CN] body, html form[lang=zh_CN] div, html form[lang=zh_CN] h1, html form[lang=zh_CN] h2, html form[lang=zh_CN] h3, html form[lang=zh_CN] h4, html form[lang=zh_CN] h5, html form[lang=zh_CN] h6, html form[lang=zh_CN] input, html form[lang=zh_CN] li, html form[lang=zh_CN] p, html form[lang=zh_CN] select, html form[lang=zh_CN] td, html[lang=zh-CN], html[lang=zh-CN] body, html[lang=zh-CN] div, html[lang=zh-CN] h1, html[lang=zh-CN] h2, html[lang=zh-CN] h3, html[lang=zh-CN] h4, html[lang=zh-CN] h5, html[lang=zh-CN] h6, html[lang=zh-CN] input, html[lang=zh-CN] li, html[lang=zh-CN] p, html[lang=zh-CN] select, html[lang=zh-CN] td, html form[lang=zh-CN], html form[lang=zh-CN] body, html form[lang=zh-CN] div, html form[lang=zh-CN] h1, html form[lang=zh-CN] h2, html form[lang=zh-CN] h3, html form[lang=zh-CN] h4, html form[lang=zh-CN] h5, html form[lang=zh-CN] h6, html form[lang=zh-CN] input, html form[lang=zh-CN] li, html form[lang=zh-CN] p, html form[lang=zh-CN] select, html form[lang=zh-CN] td, html[lang=zh-Hans], html[lang=zh-Hans] body, html[lang=zh-Hans] div, html[lang=zh-Hans] h1, html[lang=zh-Hans] h2, html[lang=zh-Hans] h3, html[lang=zh-Hans] h4, html[lang=zh-Hans] h5, html[lang=zh-Hans] h6, html[lang=zh-Hans] input, html[lang=zh-Hans] li, html[lang=zh-Hans] p, html[lang=zh-Hans] select, html[lang=zh-Hans] td, html form[lang=zh-Hans], html form[lang=zh-Hans] body, html form[lang=zh-Hans] div, html form[lang=zh-Hans] h1, html form[lang=zh-Hans] h2, html form[lang=zh-Hans] h3, html form[lang=zh-Hans] h4, html form[lang=zh-Hans] h5, html form[lang=zh-Hans] h6, html form[lang=zh-Hans] input, html form[lang=zh-Hans] li, html form[lang=zh-Hans] p, html form[lang=zh-Hans] select, html form[lang=zh-Hans] td, html[lang=zh-Hans-CN], html[lang=zh-Hans-CN] body, html[lang=zh-Hans-CN] div, html[lang=zh-Hans-CN] h1, html[lang=zh-Hans-CN] h2, html[lang=zh-Hans-CN] h3, html[lang=zh-Hans-CN] h4, html[lang=zh-Hans-CN] h5, html[lang=zh-Hans-CN] h6, html[lang=zh-Hans-CN] input, html[lang=zh-Hans-CN] li, html[lang=zh-Hans-CN] p, html[lang=zh-Hans-CN] select, html[lang=zh-Hans-CN] td, html form[lang=zh-Hans-CN], html form[lang=zh-Hans-CN] body, html form[lang=zh-Hans-CN] div, html form[lang=zh-Hans-CN] h1, html form[lang=zh-Hans-CN] h2, html form[lang=zh-Hans-CN] h3, html form[lang=zh-Hans-CN] h4, html form[lang=zh-Hans-CN] h5, html form[lang=zh-Hans-CN] h6, html form[lang=zh-Hans-CN] input, html form[lang=zh-Hans-CN] li, html form[lang=zh-Hans-CN] p, html form[lang=zh-Hans-CN] select, html form[lang=zh-Hans-CN] td, html[lang=zh-Hans-HK], html[lang=zh-Hans-HK] body, html[lang=zh-Hans-HK] div, html[lang=zh-Hans-HK] h1, html[lang=zh-Hans-HK] h2, html[lang=zh-Hans-HK] h3, html[lang=zh-Hans-HK] h4, html[lang=zh-Hans-HK] h5, html[lang=zh-Hans-HK] h6, html[lang=zh-Hans-HK] input, html[lang=zh-Hans-HK] li, html[lang=zh-Hans-HK] p, html[lang=zh-Hans-HK] select, html[lang=zh-Hans-HK] td, html form[lang=zh-Hans-HK], html form[lang=zh-Hans-HK] body, html form[lang=zh-Hans-HK] div, html form[lang=zh-Hans-HK] h1, html form[lang=zh-Hans-HK] h2, html form[lang=zh-Hans-HK] h3, html form[lang=zh-Hans-HK] h4, html form[lang=zh-Hans-HK] h5, html form[lang=zh-Hans-HK] h6, html form[lang=zh-Hans-HK] input, html form[lang=zh-Hans-HK] li, html form[lang=zh-Hans-HK] p, html form[lang=zh-Hans-HK] select, html form[lang=zh-Hans-HK] td, html[lang=zh-Hans-TW], html[lang=zh-Hans-TW] body, html[lang=zh-Hans-TW] div, html[lang=zh-Hans-TW] h1, html[lang=zh-Hans-TW] h2, html[lang=zh-Hans-TW] h3, html[lang=zh-Hans-TW] h4, html[lang=zh-Hans-TW] h5, html[lang=zh-Hans-TW] h6, html[lang=zh-Hans-TW] input, html[lang=zh-Hans-TW] li, html[lang=zh-Hans-TW] p, html[lang=zh-Hans-TW] select, html[lang=zh-Hans-TW] td, html form[lang=zh-Hans-TW], html form[lang=zh-Hans-TW] body, html form[lang=zh-Hans-TW] div, html form[lang=zh-Hans-TW] h1, html form[lang=zh-Hans-TW] h2, html form[lang=zh-Hans-TW] h3, html form[lang=zh-Hans-TW] h4, html form[lang=zh-Hans-TW] h5, html form[lang=zh-Hans-TW] h6, html form[lang=zh-Hans-TW] input, html form[lang=zh-Hans-TW] li, html form[lang=zh-Hans-TW] p, html form[lang=zh-Hans-TW] select, html form[lang=zh-Hans-TW] td {
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans SC", "PingFang SC", "Lantinghei SC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif;
}

body.ff-cn {
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans SC", "PingFang SC", "Lantinghei SC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif !important;
}

html[lang=ja], html[lang=ja] body, html[lang=ja] div, html[lang=ja] button, html[lang=ja] h1, html[lang=ja] h2, html[lang=ja] h3, html[lang=ja] h4, html[lang=ja] h5, html[lang=ja] h6, html[lang=ja] input, html[lang=ja] li, html[lang=ja] p, html[lang=ja] select, html[lang=ja] td, html[lang=ja] .q-btn, html form[lang=ja], html form[lang=ja] body, html form[lang=ja] div, html form[lang=ja] button, html form[lang=ja] h1, html form[lang=ja] h2, html form[lang=ja] h3, html form[lang=ja] h4, html form[lang=ja] h5, html form[lang=ja] h6, html form[lang=ja] input, html form[lang=ja] li, html form[lang=ja] p, html form[lang=ja] select, html form[lang=ja] td, html form[lang=ja] .q-btn, html[lang=ja-JP], html[lang=ja-JP] body, html[lang=ja-JP] div, html[lang=ja-JP] button, html[lang=ja-JP] h1, html[lang=ja-JP] h2, html[lang=ja-JP] h3, html[lang=ja-JP] h4, html[lang=ja-JP] h5, html[lang=ja-JP] h6, html[lang=ja-JP] input, html[lang=ja-JP] li, html[lang=ja-JP] p, html[lang=ja-JP] select, html[lang=ja-JP] td, html[lang=ja-JP] .q-btn, html form[lang=ja-JP], html form[lang=ja-JP] body, html form[lang=ja-JP] div, html form[lang=ja-JP] button, html form[lang=ja-JP] h1, html form[lang=ja-JP] h2, html form[lang=ja-JP] h3, html form[lang=ja-JP] h4, html form[lang=ja-JP] h5, html form[lang=ja-JP] h6, html form[lang=ja-JP] input, html form[lang=ja-JP] li, html form[lang=ja-JP] p, html form[lang=ja-JP] select, html form[lang=ja-JP] td, html form[lang=ja-JP] .q-btn {
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif;
}

body.ff-jp {
  font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif !important;
}

.wrapper {
  position: relative;
  min-height: 100%;
  background-color: #fff;
  margin-bottom: -61px;
  padding-bottom: 50px;
}

.header {
  position: absolute;
  width: 100%;
  top: 0;
  height: 46px;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}
.header .myqnapcloud-logo {
  height: 46px;
  width: 159px;
  margin-left: 15px;
  background: url("../css_img/header/myqnapcloud-logo.png") center center no-repeat;
}
.header .lang {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  position: relative;
  width: 46px;
  height: 46px;
  background: url("../css_img/header/icon-lang.png") center center no-repeat;
}
.header .lang-dropdown {
  position: relative;
  top: 40px;
  right: 6px;
}
.header .lang-dropdown .trangle {
  position: absolute;
  top: -13px;
  right: 8px;
  z-index: 1012;
  display: inline-block;
  width: 0px;
  height: 0px;
  border: 8px solid;
  border-color: transparent transparent #fff transparent;
  border-style: dashed dashed solid dashed;
}
.header .lang-dropdown .dropdown-menu {
  display: block;
  width: 300px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
  border-radius: 0;
  padding: 3px 3px;
}
.header .lang-dropdown .dropdown-menu > li {
  width: 150px;
  float: left;
}
.header .lang-dropdown .dropdown-menu > li .active {
  background-color: #0979e1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(9, 121, 225)), to(rgb(8, 108, 200)));
  background-image: -o-linear-gradient(top, rgb(9, 121, 225), rgb(8, 108, 200));
  background-image: linear-gradient(to bottom, rgb(9, 121, 225), rgb(8, 108, 200));
  color: #fff;
}
.header .lang-dropdown .dropdown-menu > li .active i {
  color: #fff;
}
.header .lang-dropdown .dropdown-menu > li > a {
  padding: 7px 20px;
  color: #2f2f2f;
}
.header .lang-dropdown .dropdown-menu > li > a i {
  color: #000;
  margin-right: 10px;
}
.header .lang-dropdown .dropdown-menu > li > a .icon-ok {
  color: #2167c9;
  margin-left: 8px;
  margin-right: 10px;
}
.header .lang-dropdown .dropdown-menu > li > a:hover, .header .lang-dropdown .dropdown-menu > li > a:focus, .header .lang-dropdown .dropdown-submenu:hover > a, .header .lang-dropdown .dropdown-submenu:focus > a {
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#fafafa));
  background-image: -o-linear-gradient(top, #fafafa, #fafafa);
  background-image: linear-gradient(to bottom, #fafafa, #fafafa);
}
.header .location {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  position: relative;
  width: 46px;
  height: 46px;
  background: url("../css_img/header/icon-location.png") center center no-repeat;
}
.header .location-dropdown {
  position: relative;
  top: 40px;
  right: -1px;
}
.header .location-dropdown .trangle {
  position: absolute;
  top: -13px;
  right: 15px;
  z-index: 1012;
  display: inline-block;
  width: 0px;
  height: 0px;
  border: 8px solid;
  border-color: transparent transparent #fff transparent;
  border-style: dashed dashed solid dashed;
}
.header .location-dropdown:after {
  content: "";
  position: absolute;
  top: -15px;
  right: 14px;
  border-color: transparent transparent #aaa transparent;
  border-style: solid;
  border-width: 9px;
  width: 0;
  height: 0;
}
.header .location-dropdown .dropdown-menu {
  display: block;
  min-width: 130px;
  width: 130px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
  border-radius: 0;
  padding: 3px 3px;
}
.header .location-dropdown .dropdown-menu > li {
  width: 130px;
  float: left;
}
.header .location-dropdown .dropdown-menu > li .active {
  background-color: #0979e1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(9, 121, 225)), to(rgb(8, 108, 200)));
  background-image: -o-linear-gradient(top, rgb(9, 121, 225), rgb(8, 108, 200));
  background-image: linear-gradient(to bottom, rgb(9, 121, 225), rgb(8, 108, 200));
  color: #fff;
}
.header .location-dropdown .dropdown-menu > li .active i {
  color: #fff;
}
.header .location-dropdown .dropdown-menu > li > a {
  padding: 7px 20px;
  color: #2f2f2f;
}
.header .location-dropdown .dropdown-menu > li > a i {
  color: #000;
  margin-right: 10px;
}
.header .location-dropdown .dropdown-menu > li > a .icon-ok {
  color: #2167c9;
  margin-left: 8px;
  margin-right: 10px;
}
.header .location-dropdown .dropdown-menu > li > a:hover, .header .location-dropdown .dropdown-menu > li > a:focus, .header .location-dropdown .dropdown-submenu:hover > a, .header .location-dropdown .dropdown-submenu:focus > a {
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#fafafa));
  background-image: -o-linear-gradient(top, #fafafa, #fafafa);
  background-image: linear-gradient(to bottom, #fafafa, #fafafa);
}
.header:after {
  display: table;
  content: "";
  clear: both;
}

.main-section {
  min-height: 417px;
  background-image: url("../css_img/home/section-bg-w.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 120%;
  color: #fff;
  text-align: center;
  overflow: hidden;
  letter-spacing: 0.5px;
  background-color: #0c499c;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  padding-bottom: 50px;
}
.main-section h1 {
  font-size: 36px;
  margin-top: 76px;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: black 0px -1px 0px;
  padding: 0px 30px;
}
.main-section h2 {
  font-size: 22px;
  line-height: 30px;
  margin-top: 76px;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: black 0px -1px 0px;
  padding: 0px 30px;
}
.main-section .introduce {
  max-width: 780px;
  margin: 18px auto 0 auto;
  padding: 0 30px;
  line-height: 30px;
  font-size: 20px;
  font-weight: 300;
  text-shadow: black 0px -1px 0px;
}
.main-section .cloud-key {
  text-align: center;
  margin-top: 60px;
}
.main-section .cloud-key .form-wrapper {
  display: inline-block;
  border: 1px solid #295DA0;
}
.main-section .cloud-key .form-wrapper:after {
  display: table;
  content: "";
  clear: both;
}
.main-section .cloud-key .comp {
  display: inline-block;
  height: 50px;
  background-color: #fff;
}
.main-section .cloud-key .comp .block {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 13px;
  color: #ccc;
  font-size: 24px;
  font-weight: 300;
  text-align: center;
  vertical-align: middle;
}
.main-section .cloud-key .comp .block-middle {
  width: 25px;
}
.main-section .cloud-key .comp .block-bottom {
  width: 10px;
}
.main-section .cloud-key .comp input {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  color: #333;
  font-weight: 300;
  text-align: center;
  letter-spacing: 12px;
  width: 105px;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0;
  margin: 0 0;
  vertical-align: middle;
}
.main-section .cloud-key .comp input[type=text]:focus {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.main-section .cloud-key button {
  height: 50px;
  min-width: 165px;
  padding: 0px 50px;
  color: #fff;
  font-size: 20px;
  text-shadow: black 0px -1px 0px;
  border-radius: 0;
  background-color: #5ba001;
  background-image: -o-linear-gradient(top, #6dc001, #5ba001);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6dc001), to(#5ba001));
  background-image: linear-gradient(to bottom, #6dc001, #5ba001);
  background-repeat: repeat-x;
  border: 0;
  border-left: 1px solid #2E5200;
}
.main-section .cloud-key button:focus {
  outline: none;
}
.main-section .cloud-key .btn-loading {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-image: url("../css_img/home/cloudkey-search-loading.gif");
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;
}
.main-section .find-key {
  text-align: center;
  font-size: 14px;
  color: #fff;
  font-weight: 300;
  margin-top: 15px;
}
.main-section .find-key a {
  color: #97f3ff;
  border-bottom: 1px solid #97f3ff;
  text-decoration: none;
}
.main-section .find-key a:hover, .main-section .find-key a:active {
  text-decoration: none;
}
.main-section .cloudkey-error {
  position: relative;
  display: inline-block;
  margin-top: 5px;
  margin-left: 35px;
  margin-right: 35px;
  padding: 5px 8px;
  font-size: 14px;
  border: 1px solid #F9CDCD;
  color: #dd4b39;
  background-color: #F9CDCD;
  max-width: 700px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}
.main-section .cloudkey-error i {
  margin-top: 3px;
  margin-right: 10px;
  float: left;
}
.main-section .cloudkey-error .error-info {
  display: block;
  overflow: hidden;
  text-align: left;
}
.main-section .cloudkey-error .error-info a {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  color: #7D1205;
  text-decoration: underline;
}
.main-section .cloudkey-error .error-info a:hover {
  color: #FF6551;
}
.main-section .cloudkey-error .error-info a:active {
  color: #C76A5D;
}
.main-section .cloudkey-error > span > div:after {
  display: table;
  content: "";
  clear: both;
}
.main-section .cloudkey-error:after {
  position: absolute;
  display: inline-block;
  content: "";
  top: -16px;
  left: 47%;
  z-index: 1;
  width: 0px;
  height: 0px;
  border: 8px solid;
  border-color: transparent transparent #F9CDCD transparent;
  border-style: dashed dashed solid dashed;
}
.main-section .detecting-screen .detecting-img {
  width: 80px;
  height: 80px;
  margin: 60px auto 0 auto;
  background: url("../css_img/home/ring-loading.gif") no-repeat center center;
  background-size: 80px 80px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
.main-section .detecting-screen .detecting-msg {
  text-align: center;
  font-size: 14px;
  color: #fff;
  margin-top: 20px;
}
.main-section .searching-screen {
  position: relative;
  width: 100%;
  padding: 30px 30px 10px 30px;
}
.main-section .searching-screen img {
  width: 100%;
}
.main-section .searching-screen .nas-outline {
  position: absolute;
  max-width: 130px;
  max-height: 133px;
  top: 18px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px 5px;
}
.main-section .searching-screen .searching-gif {
  max-width: 230px;
  margin: 0 auto;
}
.main-section .search-result-screen {
  padding: 76px 30px 10px 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.main-section .search-result-screen .result-header {
  text-align: left;
  position: relative;
  line-height: 30px;
  margin-bottom: 15px;
}
.main-section .search-result-screen .result-header > .desc {
  overflow: hidden;
  line-height: 20px;
  padding-right: 15px;
  padding-top: 3px;
}
.main-section .search-result-screen .result-header .rescan-btn {
  cursor: pointer;
  float: right;
  line-height: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-height: 30px;
  padding: 4px 10px;
  color: #fff;
  text-shadow: black 0px -1px 0px;
  border-radius: 4px;
  background-color: #0d499b;
  background-image: none;
  background-repeat: repeat-x;
  border: 1px solid #eee;
}
.main-section .search-result-screen .result-header .rescan-btn:hover {
  background-color: #1c6ad4;
}
.main-section .search-result-screen .result-header .rescan-btn:active {
  border-color: #7ba5de;
}
.main-section .search-result-screen .result-header:after {
  display: table;
  content: "";
  clear: both;
}
.main-section .search-result-screen .result-sub-header {
  display: none;
  text-align: left;
  font-size: 12px;
  position: relative;
  margin-bottom: 15px;
  padding-top: 15px;
  border-top: 1px solid #7d9cc5;
}
.main-section .search-result-screen .result-sub-header .m-sorting {
  float: left;
  font-size: 0px;
}
.main-section .search-result-screen .result-sub-header .m-sorting .sorting-label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  font-size: 13px;
}
.main-section .search-result-screen .result-sub-header .m-sorting:before {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.main-section .search-result-screen .result-sub-header .rescan-btn {
  cursor: pointer;
  float: right;
  line-height: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-height: 30px;
  padding: 4px 10px;
  color: #fff;
  text-shadow: black 0px -1px 0px;
  border-radius: 4px;
  background-color: #0d499b;
  background-image: none;
  background-repeat: repeat-x;
  border: 1px solid #eee;
}
.main-section .search-result-screen .result-sub-header .rescan-btn:hover {
  background-color: #1c6ad4;
}
.main-section .search-result-screen .result-sub-header .rescan-btn:active {
  border-color: #7ba5de;
}
.main-section .search-result-screen .result-sub-header:after {
  display: table;
  content: "";
  clear: both;
}
.main-section .search-result-screen .result-list {
  position: relative;
  max-height: 450px;
  min-height: 250px;
  overflow: hidden;
  text-align: left;
}
.main-section .search-result-screen .result-list .result-list {
  background-color: #d7e3f4;
}
.main-section .search-result-screen .result-list .list-empty {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.main-section .search-result-screen .result-list .list-empty .empty-msg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #2f2f2f;
  padding: 15px 20px;
  text-align: center;
}
.main-section .search-result-screen .result-list .list-empty .empty-msg .msg-wrapper {
  display: inline-block;
}
.main-section .search-result-screen .result-list .list-empty .empty-msg .ic-error {
  float: left;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  margin-top: -2px;
  vertical-align: middle;
}
.main-section .search-result-screen .result-list .list-empty .empty-msg .ic-error img {
  width: 100%;
}
.main-section .search-result-screen .result-list .list-empty .empty-msg .msg {
  overflow: hidden;
  display: block;
  text-align: left;
  color: #002354;
  vertical-align: middle;
}
.main-section .search-result-screen .result-list .list-empty .empty-msg:after {
  content: "";
  display: block;
  clear: both;
}
.main-section .search-result-screen .result-list table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
}
.main-section .search-result-screen .result-list table thead tr {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid #185fa7;
}
.main-section .search-result-screen .result-list table thead tr th {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #002354;
  background-color: #fff;
  text-align: left;
  white-space: nowrap;
}
.main-section .search-result-screen .result-list table thead tr th a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #333;
  display: block;
  position: relative;
  text-decoration: none;
  outline: 0;
  text-align: left;
  cursor: pointer;
  padding: 9px 15px;
}
.main-section .search-result-screen .result-list table thead tr th a .text {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: left;
  padding-right: 15px;
}
.main-section .search-result-screen .result-list table thead tr th a .text i {
  margin-left: 5px;
}
.main-section .search-result-screen .result-list table thead tr th a .arrow {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
}
.main-section .search-result-screen .result-list table thead tr th:last-child, .main-section .search-result-screen .result-list table thead tr th:last-child a {
  cursor: default;
}
.main-section .search-result-screen .result-list table thead tr th:last-child a .text {
  text-align: center;
  padding: 0;
}
.main-section .search-result-screen .result-list table tbody {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.main-section .search-result-screen .result-list table tbody tr {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #d7e3f4;
  border-bottom: 1px solid #185fa7;
}
.main-section .search-result-screen .result-list table tbody tr td {
  padding: 10px 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #2f2f2f;
  word-wrap: break-word;
  word-break: normal;
}
.main-section .search-result-screen .result-list table tbody tr td .val {
  display: block;
}
.main-section .search-result-screen .result-list table tbody tr td:last-child {
  text-align: center;
}
.main-section .search-result-screen .result-list table tbody tr td:last-child button {
  color: #333333;
  border-radius: 4px;
  background: #ffffff;
  background-repeat: repeat-x;
  border: 1px solid #b0b0b0;
}
.main-section .search-result-screen .result-list table tbody tr td:last-child button:hover {
  background: #fafafa;
  border-color: #777;
}
.main-section .search-result-screen .result-list table tbody tr td .multi-ip .device-ip {
  margin-bottom: 5px;
}
.main-section .search-result-screen .result-list table tbody tr td .multi-ip .device-ip:last-child {
  margin-bottom: 0px;
}
.main-section .search-result-screen .result-list table tbody tr td.img-col {
  width: 75px;
  padding-right: 0;
}
.main-section .search-result-screen .result-list table tbody tr td.img-col .device-img {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 62px;
  padding: 5px 5px;
}
.main-section .search-result-screen .result-list table tbody tr td.img-col .device-img img {
  width: 100%;
}
.main-section .search-result-screen .result-list table tbody tr:last-child {
  border-bottom: 0px;
}
.main-section .search-result-screen .scroll-hint {
  display: none;
  margin-top: 13px;
  padding-bottom: 15px;
  border-bottom: 1px solid #95b3dc;
}
.main-section .search-result-screen .scroll-hint span {
  padding: 3px 8px;
  font-size: 12px;
  color: #d5e6ff;
  border-radius: 4px;
  background-color: #518ad8;
}
.main-section .plans-wrapper {
  margin-top: 10px;
  margin-bottom: 20px;
}
.main-section .plans-wrapper .plans {
  display: inline-block;
}
.main-section .plans-wrapper .plans:after {
  content: "";
  display: table;
  clear: both;
}
.main-section .plans-wrapper .plan-item {
  cursor: pointer;
  position: relative;
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 218px;
  height: 260px;
  overflow: hidden;
  margin: 0px 40px;
  padding: 30px 15px;
  font-size: 16px;
  border: 1px solid #bccee5;
  border-radius: 15px;
}
.main-section .plans-wrapper .plan-item .plan-img {
  max-width: 135px;
  margin: 0px auto;
}
.main-section .plans-wrapper .plan-item .plan-img img {
  width: 100%;
}
.main-section .plans-wrapper .plan-item .plan-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  padding: 0px 15px;
}
.main-section .plans-wrapper .plan-item .hover-info {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 15px;
}
.main-section .plans-wrapper .plan-item .hover-info .hover-info-cell {
  display: table-cell;
  vertical-align: middle;
}
.main-section .plans-wrapper .plan-item .hover-info .hover-info-cell p:nth-child(2) {
  color: #cbe0ff;
  margin-top: 30px;
}
.main-section .plans-wrapper .plan-item:hover {
  border-color: #fff;
  background-color: rgba(22, 55, 101, 0.5);
}
.main-section .plans-wrapper .plan-item:hover .plan-img {
  opacity: 1;
}
.main-section .plans-wrapper .plan-item:nth-child(2):hover .plan-img {
  visibility: hidden;
}
.main-section .plans-wrapper .plan-item:nth-child(2):hover .plan-label {
  visibility: hidden;
}
.main-section .plans-wrapper .plan-item:nth-child(2):hover .hover-info {
  display: table;
  height: 100%;
}
.main-section .info-note {
  font-size: 14px;
  text-align: left;
  color: #fff;
  font-weight: 300;
  margin-top: 20px;
  display: inline-block;
}
.main-section .info-note .info-note-con {
  text-align: left;
  margin-bottom: 10px;
}
.main-section .info-note .info-note-con a {
  display: inline-block;
  color: #97f3ff;
  border-bottom: 1px solid #97f3ff;
  text-decoration: none;
}
.main-section .info-note .info-note-con a:hover, .main-section .info-note .info-note-con a:active {
  text-decoration: none;
}
.main-section .info-note .info-note-con:last-child {
  margin-bottom: 0px;
}

.sub-section {
  padding-top: 40px;
  padding-bottom: 60px;
  text-align: center;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

.redirect-section {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../css_img/home/section-bg-w.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}
.redirect-section .redirect-section-content {
  position: relative;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: 0 auto;
}
.redirect-section h2 {
  color: #fff;
  font-size: 22px;
  line-height: 30px;
  margin-top: 0px;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: black 0px -1px 0px;
  padding: 0px 30px;
}
.redirect-section .redirect-screen {
  position: relative;
  width: 100%;
  padding: 30px 30px 10px 30px;
}
.redirect-section .redirect-screen img {
  width: 100%;
}
.redirect-section .redirect-screen .nas-outline {
  position: absolute;
  max-width: 130px;
  max-height: 133px;
  top: 18px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px 5px;
}
.redirect-section .redirect-screen .redirect-gif {
  max-width: 230px;
  margin: 0 auto;
}

.init-methods {
  position: relative;
  display: -ms-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}
.init-methods .method-col {
  position: relative;
  padding: 0px 15px;
  -ms-flex: 1 0 33%;
  -webkit-box-flex: 1;
          flex: 1 0 33%;
}
.init-methods .img-cell {
  position: relative;
  width: 100%;
  height: 140px;
  max-height: 140px;
  margin-bottom: 15px;
}
.init-methods .img-cell img {
  display: inline-block;
  vertical-align: middle;
}
.init-methods .img-cell:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.init-methods .install-cell .install-label {
  font-size: 16px;
  font-weight: 500;
  min-width: 220px;
  color: #2f2f2f;
}
.init-methods .desc-cell {
  text-align: left;
  padding: 15px 20px;
}
.init-methods .desc-cell a {
  color: #2167CC;
  text-decoration: none;
  border-bottom: 1px solid #2167CC;
}

.step-group {
  display: inline-block;
}
.step-group .step-titles .title {
  position: relative;
  display: inline-block;
  width: 250px;
  padding: 0 0 0 15px;
  overflow: hidden;
  vertical-align: top;
}
.step-group .step-titles .title:after {
  display: table;
  content: "";
  clear: both;
}
.step-group .step-titles .title:nth-child(1) {
  padding: 0;
}
.step-group .step-titles .num {
  width: 32px;
  height: 32px;
  color: #0b63db;
  background-color: #fff;
  text-align: center;
  line-height: 32px;
  border: 1px solid #9fbee8;
  border-radius: 40px;
  float: left;
}
.step-group .step-titles .txt {
  overflow: hidden;
  display: block;
  text-align: left;
  padding-left: 15px;
  margin-top: 8px;
}
.step-group .step-cons {
  margin-top: 10px;
}
.step-group .step-cons .con {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 130px;
}
.step-group .step-cons .segment {
  text-align: right;
}

.note {
  color: #777;
  max-width: 700px;
  padding: 0 35px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.note .note-con a {
  color: #2167CC;
}

.installation-complete-note {
  color: #777;
  padding: 0 35px;
  margin: 0 auto;
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 25px;
}

.get-utilities {
  margin-top: 45px;
  margin-bottom: 10px;
}
.get-utilities .utils-img {
  text-align: center;
}
.get-utilities .utils-img img {
  width: 100%;
  max-width: 681px;
}
.get-utilities button {
  margin-top: 45px;
  padding: 15px 50px;
  color: #666;
  font-size: 20px;
}
.get-utilities button:focus {
  outline: none;
}

.footer {
  position: relative;
  text-align: center;
  line-height: normal;
  border-top: 1px solid #ccc;
  padding-left: 0;
  padding-right: 0;
  background-color: #f2f2f2;
  color: #999;
  font-size: 13px;
}
.footer a {
  display: inline-block;
  padding: 0px 5px;
  color: #999;
}
.footer a:hover {
  color: #666;
}
.footer i {
  font-size: 16px;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
}
.footer i:hover {
  color: #4862a3;
}
.footer i + i:hover {
  color: #00acee;
}
.footer i + i + i:hover {
  color: #ff0000;
}
.footer i + i + i + i:hover {
  color: #dd4b39;
}
.footer .social-icon-cn {
  line-height: 0;
  margin-top: 15px;
}
.footer .icon-sinaweibo {
  display: inline-block;
  width: 20px;
  height: 25px;
  background: url(../css_img/footer/icon_social.png) no-repeat 0 -4px;
}
.footer .icon-sinavideo {
  display: inline-block;
  width: 20px;
  height: 25px;
  background: url(../css_img/footer/icon_social.png) no-repeat 0 -27px;
}
.footer .icon-youku {
  display: inline-block;
  width: 20px;
  height: 25px;
  background: url(../css_img/footer/icon_social.png) no-repeat 0 -50px;
}
.footer .icon-tudou {
  display: inline-block;
  width: 20px;
  height: 25px;
  background: url(../css_img/footer/icon_social.png) no-repeat 0 -72px;
}
.footer .footer-utility {
  height: 57px;
  background-color: #fff;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.footer .footer-utility .footer-utility-box {
  display: inline-block;
  height: 57px;
  line-height: 57px;
}
.footer .copyright {
  display: inline-block;
  line-height: 57px;
}
.footer .copyright:after {
  display: table;
  content: "";
  clear: both;
}
.footer .logo-qnap {
  width: 73px;
  height: 57px;
  background: url("../css_img/footer/logo-qnap.png") center center no-repeat;
  margin-right: 10px;
  cursor: pointer;
}

.mask-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}
.mask-loading .ring {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background-image: url(../css_img/home/ring2.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px 150px;
}
.mask-loading .ring:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.mask-loading .ring .loading-txt {
  display: inline-block;
  vertical-align: middle;
  color: #c4e9ff;
  font-weight: 500;
}
.mask-loading .small-loading {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.mask-loading .small-loading .ring-small {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0px auto 15px auto;
  line-height: 0px;
}
.mask-loading .small-loading .ring-small img {
  width: 100%;
}
.mask-loading .small-loading > .loading-text {
  color: #c4e9ff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.4;
  padding: 0px 30px;
}

/* Select
-------------------------------------------------- */
.q-select {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
  min-width: 50px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #0d499b;
  cursor: pointer;
}
.q-select:hover {
  background-color: #1c6ad4;
}

.q-select select {
  margin: 0;
  padding: 0px 12px 0px 12px;
  height: 24px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  width: 100%;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.q-select select > .placeholder {
  display: none;
}

.q-select select:focus {
  outline: none;
}

.q-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}

.q-select select::-ms-expand {
  display: none;
}

.q-select select option {
  color: #2f2f2f;
  background-color: #fff;
}

/* Alert
-------------------------------------------------- */
.q-fixed-alert {
  position: fixed;
  font-size: 14px;
  width: 100%;
  height: auto;
  min-height: 48px;
  top: 0px;
  color: #40464d;
  background-color: #fff;
  text-align: center;
  z-index: 1021;
  margin: auto;
  overflow: hidden;
  cursor: default;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.6s ease-in-out 0s;
  -o-transition: all 0.6s ease-in-out 0s;
  transition: all 0.6s ease-in-out 0s;
}
.q-fixed-alert .alert-content {
  padding: 16px 40px 16px 24px;
}
.q-fixed-alert .alert-content .alert-msg {
  text-align: left;
  display: inline-block;
  line-height: 1.4;
}
.q-fixed-alert .alert-content .alert-msg a {
  color: #686868;
  font-weight: 500;
  padding: 0px 4px;
  text-decoration: none;
}
.q-fixed-alert .alert-content .alert-msg a:hover {
  text-decoration: underline;
}
.q-fixed-alert .alert-content strong {
  margin-right: 10px;
}
.q-fixed-alert .alert-close-btn {
  position: absolute;
  right: 15px;
  top: 11px;
  font-size: 32px;
  line-height: 20px;
  font-weight: 200;
  padding: 0px;
  color: #40464d;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.q-fixed-alert .alert-close-btn:hover {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.q-fixed-alert .alert-close-btn:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.q-fixed-alert.alert-error {
  background-color: #ffe5e1;
  color: #db0606;
}
.q-fixed-alert.alert-error .alert-close-btn {
  color: #a50001;
}
.q-fixed-alert.alert-error .alert-content .alert-msg a {
  color: #ce0303;
}
.q-fixed-alert.alert-success {
  color: #155724;
  background-color: #d4edda;
}
.q-fixed-alert.alert-success .alert-close-btn {
  color: #155724;
}
.q-fixed-alert.alert-success .alert-content .alert-msg a {
  color: #0b2e13;
}
.q-fixed-alert.alert-warning {
  color: #856404;
  background-color: #fff3cd;
}
.q-fixed-alert.alert-warning .alert-close-btn {
  color: #856404;
}
.q-fixed-alert.alert-warning .alert-content .alert-msg a {
  color: #533f03;
}
.q-fixed-alert.alert-info {
  color: #004085;
  background-color: #cce5ff;
}
.q-fixed-alert.alert-info .alert-close-btn {
  color: #004085;
}
.q-fixed-alert.alert-info .alert-content .alert-msg a {
  color: #062c33;
}

.alert-open {
  top: 0px;
}

.alert-close {
  top: -35%;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 144dpi) {
  .header .myqnapcloud-logo {
    background-image: url("../css_img/header/myqnapcloud-logo@2x.png");
    background-size: 159px 24px;
  }
  .header .lang {
    background-image: url("../css_img/header/icon-lang@2x.png");
    background-size: 21px 21px;
  }
  .header .location {
    background-image: url("../css_img/header/icon-location@2x.png");
    background-size: 17px 17px;
  }
  .footer .logo-qnap {
    background-image: url("../css_img/footer/logo-qnap@2x.png");
    background-size: 73px 14px;
  }
}
@media all and (max-width: 1000px) {
  .main-section h1 {
    font-size: 26px;
  }
  .main-section h2 {
    font-size: 22px;
  }
  .main-section .introduce {
    font-size: 16px;
  }
  .init-methods {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .init-methods .method-col {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-flex: 1 0 100%;
    -webkit-box-flex: 1;
            flex: 1 0 100%;
    padding: 30px 50px;
    border-bottom: 1px solid #ddd;
  }
  .init-methods .method-col:first-child {
    padding-top: 0px;
  }
  .init-methods .method-col:last-child {
    border: 0;
  }
  .init-methods .method-col:after {
    content: "";
    display: block;
    clear: both;
  }
  .init-methods .img-cell {
    width: 20%;
    max-width: 150px;
    height: auto;
    float: left;
  }
  .init-methods .img-cell:before {
    display: none;
  }
  .init-methods .install-cell {
    overflow: hidden;
    text-align: left;
    padding-top: 5px;
    padding-left: 30px;
  }
  .init-methods .desc-cell {
    overflow: hidden;
    padding-top: 10px;
    padding-left: 30px;
  }
  .init-methods .method-cell {
    margin: 0;
  }
  .footer .copyright {
    line-height: 24px;
    padding: 16px 0 17px 0;
  }
  .footer .logo-qnap {
    display: none;
  }
  .footer .footer-utility {
    height: auto;
  }
  .footer .footer-utility .footer-utility-box {
    height: auto;
    line-height: 24px;
    padding: 15px 0;
  }
  .footer .footer-utility .footer-utility-box div:nth-child(2) {
    display: none;
  }
  .footer .social-icon-cn {
    display: none;
  }
  .footer .footer-copyright {
    height: auto;
    line-height: 24px;
    padding: 15px 0;
  }
  .sub-section .step-group .step-titles .title {
    width: 220px;
  }
  .sub-section .step-group .step-cons .con {
    width: 220px;
  }
  .sub-section .step-group .step-cons .power-on img {
    width: 70%;
  }
  .sub-section .step-group .step-cons .network img {
    width: 50%;
  }
  .sub-section .step-group .step-cons .enter-key img {
    height: 90%;
  }
  .sub-section .step-group .step-cons .segment img {
    width: 90%;
  }
}
@media all and (max-width: 860px) {
  .main-section .search-result-screen .result-header .desc {
    padding-right: 0px;
  }
  .main-section .search-result-screen .result-header .rescan-btn {
    display: none;
  }
  .main-section .search-result-screen .result-sub-header {
    display: block;
  }
  .main-section .search-result-screen .result-list table {
    display: block;
    position: relative;
    width: 100%;
    background-color: #d7e3f4;
  }
  .main-section .search-result-screen .result-list table thead {
    display: block;
    float: left;
    border-right: 1px solid #185fa7;
  }
  .main-section .search-result-screen .result-list table thead tr {
    display: block;
    border-bottom: 0px;
  }
  .main-section .search-result-screen .result-list table thead tr th {
    display: block;
    width: auto;
    font-size: 13px;
  }
  .main-section .search-result-screen .result-list table thead tr th:first-child {
    height: 107px;
  }
  .main-section .search-result-screen .result-list table thead tr th:last-child {
    height: 60px;
  }
  .main-section .search-result-screen .result-list table thead tr th:last-child a .text {
    text-align: left;
  }
  .main-section .search-result-screen .result-list table tbody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    position: relative;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0px;
  }
  .main-section .search-result-screen .result-list table tbody tr {
    display: inline-block;
    vertical-align: top;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    border-right: 1px solid #185fa7;
    border-bottom: 0px;
    background-color: #d7e3f4;
  }
  .main-section .search-result-screen .result-list table tbody tr td {
    display: block;
    font-size: 13px;
  }
  .main-section .search-result-screen .result-list table tbody tr td:first-child {
    width: 100%;
    height: 77px;
    text-align: center;
    background-color: #f1f5fb;
    padding-left: 0px;
    margin: 0 auto;
  }
  .main-section .search-result-screen .result-list table tbody tr td:nth-child(2) {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 10px;
    background-color: #f1f5fb;
    border-bottom: 1px solid #becde0;
  }
  .main-section .search-result-screen .result-list table tbody tr td:nth-child(n+3) {
    background-color: #d7e3f4;
  }
  .main-section .search-result-screen .result-list table tbody tr td:last-child {
    height: 60px;
  }
  .main-section .search-result-screen .result-list table tbody tr td:last-child button {
    margin-top: -3px;
  }
  .main-section .search-result-screen .result-list table tbody tr:last-child {
    border-right: 0px;
  }
  .main-section .search-result-screen .result-list table tbody:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
  }
  .main-section .search-result-screen .result-list table:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
  }
  .main-section .search-result-screen .result-list table thead {
    display: none;
  }
  .main-section .search-result-screen .result-list table tbody tr td:not(:first-child):not(:nth-child(2)) {
    text-align: left;
  }
  .main-section .search-result-screen .result-list table tbody tr td:not(:first-child):not(:nth-child(2)):before {
    font-weight: 600;
    content: attr(data-th) "：";
    margin-right: 15px;
    display: inline-block;
    float: left;
    width: 100px;
    text-align: left;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main-section .search-result-screen .result-list table tbody tr td:not(:first-child):not(:nth-child(2)) .multi-ip {
    overflow: hidden;
  }
  .main-section .search-result-screen .result-list table tbody tr td:not(:first-child):not(:nth-child(2)):after {
    display: table;
    content: "";
    clear: both;
  }
  .main-section .search-result-screen .scroll-hint {
    display: block;
  }
}
@media all and (max-width: 700px) {
  .main-section h1 {
    padding: 0 35px;
  }
  .main-section h2 {
    padding: 0 35px;
  }
  .main-section .introduce {
    padding: 0 35px;
    line-height: 25px;
  }
  .main-section .cloud-key {
    margin-top: 45px;
  }
  .main-section .cloud-key .form-wrapper {
    border: 0;
    max-width: 341px;
  }
  .main-section .cloud-key .form-wrapper .pull-left {
    float: none;
  }
  .main-section .cloud-key .form-wrapper .comp {
    display: block;
  }
  .main-section .cloud-key .form-wrapper button {
    display: block;
    width: 100%;
    border: 1px solid #295DA0;
    margin-top: 15px;
  }
  .main-section .cloud-key .comp input {
    width: 75px;
    letter-spacing: 6px;
    font-size: 22px;
  }
  .main-section .find-key {
    padding: 0 35px;
  }
  .main-section .plans-wrapper .plan-item {
    margin: 0 35px;
  }
  .sub-section .step-group .step-titles .title {
    width: 200px;
  }
  .sub-section .step-group .step-cons .con {
    width: 200px;
  }
  .main-section .info-note .info-note-con {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 15px;
    padding: 0px 10px;
  }
}
@media all and (max-width: 640px) {
  .main-section .plans-wrapper .plans {
    display: block;
  }
  .main-section .plans-wrapper .plans .plan-item {
    display: table;
    float: none;
    width: 100%;
    height: auto;
    text-align: left;
    margin: 0px 0px 20px 0px;
    padding: 20px 20px;
    overflow: hidden;
  }
  .main-section .plans-wrapper .plans .plan-item .plan-img {
    display: table-cell;
    vertical-align: middle;
    max-width: 60px;
    width: 60px;
  }
  .main-section .plans-wrapper .plans .plan-item .plan-label {
    position: static;
    vertical-align: middle;
    display: table-cell;
    font-size: 20px;
    padding: 0px 20px;
    margin-top: 17px;
    line-height: 28px;
  }
  .main-section .plans-wrapper .plans .plan-item:nth-child(2):hover .hover-info {
    display: none;
  }
  .main-section .plans-wrapper .plans .plan-item:nth-child(2):hover .plan-img {
    visibility: visible;
  }
  .main-section .plans-wrapper .plans .plan-item:nth-child(2):hover .plan-label {
    visibility: visible;
  }
  .main-section .plans-wrapper .plans .plan-item:last-child {
    margin-bottom: 0px;
  }
  .main-section .plans-wrapper .plans .plan-item:after {
    display: table;
    content: "";
    clear: both;
  }
  .sub-section .step-group .step-titles {
    width: auto;
    display: inline-block;
    padding: 0 50px;
  }
  .sub-section .step-group .step-titles .title {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
  }
  .sub-section .step-group .step-cons {
    display: none;
  }
  .sub-section .note .note-con {
    padding-top: 25px;
    border-top: 1px solid #eee;
  }
  .init-methods .method-col {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .init-methods .img-cell {
    display: none;
  }
  .init-methods .install-cell {
    padding-top: 0px;
    padding-left: 0px;
  }
  .init-methods .desc-cell {
    padding-left: 0px;
    padding-bottom: 0px;
  }
}
@media all and (max-width: 420px) {
  .get-utilities button {
    margin-top: 0;
  }
  .get-utilities .utils-img {
    display: none;
  }
  .main-section .cloudkey-error {
    max-width: 304px;
  }
  .main-section .plans-wrapper .plans .plan-item .plan-img {
    display: none;
  }
  .main-section .plans-wrapper .plans .plan-item .plan-label {
    padding: 0 15px;
    text-align: center;
  }
  .init-methods .method-cell {
    width: 100%;
  }
}
@media all and (max-width: 340px) {
  .main-section .cloud-key .form-wrapper {
    width: 100%;
    max-width: auto;
    padding: 0 35px;
  }
  .main-section .cloud-key .comp .block {
    width: 20px;
    margin-left: 6px;
    margin-right: 7px;
    font-size: 18px;
  }
  .main-section .cloud-key .comp input {
    font-size: 18px;
  }
}