/* 修复表格布局和有序列表样式 */
.wh_topic_content table,
.wh_topic table,
.wh_content_area table {
table-layout: fixed;
width: 100%;
}

.wh_topic_content ol li,
.wh_topic ol li,
.wh_content_area ol li {
list-style: decimal !important;
margin-left: 1.5em;
}

/** Coming Soon 样式**/
.newcard-1{
  width: 330px;
  height: 105px;
  border-radius: 8px;
  padding: 13px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  transition: all .3s;
  cursor: text;
}

.newcard-1 .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
color: #666666;
opacity: 0; /* 默认隐藏 */
transition: opacity 0.3s; /* 过渡效果 */
border-radius:10px;
display: flex; /* 使用flex布局 */
flex-direction: column; /* 设置flex方向为纵向，即从上到下 */
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
font-family: system-ui;
font-size: 22px;
FONT-WEIGHT: 500;
}

.newcard-1:hover .overlay {
opacity: 1; /* 鼠标悬停时显示 */
}

/** 自定义表格层级样式 **/
.l2 {
  font-weight: 600;
  color: gray;
}
/** 自定义首页及搜索框样式**/
.row {
  margin-right: 0px;
  margin-left: 0px;
}
.wh_main_page #searchForm > div {
  width: 37rem;
  height: 40px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #469bff;
  overflow: hidden;
  margin-top: 37.5px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin-left: 100px;
  margin-top: -225px
}

.wh_search_button {
  background-color: #469bff;
flex-shrink: 0;
color: #fff;
width: 4rem;
height: 100%;
transition: all .2s;
padding: 0
}

.wh_header_flex_container {
  display:none
}

.wh_main_page_toc {
  display:none
}


.container-fluid{
  max-width: 2000px;
  padding-right: 0px;
  padding-left: 0px;
}

.wh_search_button:after{
  font-size: 22px;
}
/** end 首页样式**/

/** 更新正文页面内容**/
.wh_search_input{
  background: #4696f5;
  margin-top: -28px;
}

.wh_tools{
  background-color: #f6f7f9;
  margin: 0em 0 2em;
  padding-right: 15px;
  padding-left: 15px;
}

.webhelp_expand_collapse_sections[data-next-state='expanded']:after {
  color: #4696f5;
}

.glyphicon-print:before, .oxy-icon-print:before {
  color: #4696f5;
}

.webhelp_expand_collapse_sections[data-next-state='collapsed']:after{
  color: #4696f5;
}
/** 顶部导航栏字体变色**/
.wh_breadcrumb ol { 
  color: inherit;
}

.wh_breadcrumb ol a {
  color: inherit;
  font-family: Roboto, sans-serif;
}

.wh_breadcrumb ol .active {
  color: #5185cb;
}

/** 更新左侧导航栏字体颜色及样式**/
.wh_publication_toc {
  border-radius: 3px;
  padding: 1.5em 0.5em;
  background-color: #f8f8f8;
  margin-left: 20px;
}

.wh_publication_toc .active > .topicref a {
  color: #006ee1;
}

.wh_publication_toc span, .wh_publication_toc a, .wh_publication_toc a:visited, .wh_publication_toc a:hover {
  color: #878787;
  font-family: Roboto, sans-serif;
}

.wh_publication_toc a:hover {
  text-decoration: underline;
}

.wh_publication_toc ul li, #wh_topic_toc ul li {
  margin-top: 0.7em;
} 

.wh_footer {
  margin-top: 8em;
}

@media only screen and (max-width: 767px) {
  .wh_publication_toc {
    border-radius: 0;
    padding: 1em 0.5em;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
  }
}

/** 导航栏 sticky 布局**/
.wh_topic_toc {
  border-left: 2px solid #f6f7f9 !important;
    margin-left: 0;
    padding-left: 0.5em;
    position: sticky;
    top: 100px;
    max-height: 500px;
    overflow-y: auto;
}
/** end **/

/** 页面字体调整**/
.wh_topic_content .title.topictitle1 {
  font-size: 2em;
  line-height: 1.1em;
  margin-bottom: 1em;
}

.sectiontitle{
  border-top: 1px solid #eee;
  font-weight: 600;
  font-size: 20px;
  line-height: 36px;
  margin-top: 36px;
  margin-bottom: 16px;
  color: #101f3a;
  padding-left: 0 !important;
  padding: 1em 0 0;
}

.wh_term_group > .wh_first_letter {
  padding-left: 0;
}

caption{
  margin-top: 0em;
}

dl {
  margin-top: 2rem;
}

.dd {
  margin-bottom: 0.5em;
  margin-left: 40px;
  margin-top: 0.5em;
  }
  
.dlterm {
  font-size: 15px;
}
.table {
  margin-bottom: 2rem;
  max-width: 70rem;
}

table {
	margin: 0 1em;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 1px solid #f6f7f9; 
  background: #eef5ff;
}

.frame-all {
  border: 1px solid #433e3e45;
}

.table>colgroup+thead>tr:first-child>th {
  border-color: #433e3e45;
}
.codeblock .copyTooltip{
  margin-right:0.5em;
}
pre {
  padding: 0.5em 0.5em 0.5em 1em;
  background-color: #eee;
  overflow: auto;
  max-height: 600px;
  margin: 0.5em 0.5em 0.5em 0.5em;
  font-size: 100%;
  }
code {
  font-size: 95%;
}
retrival_historical_data_by_time_range {
  margin-right: 0.5em；
}
  div.note {
    background-color: #4696f51c;
    border-radius: 8px;
}
/** end **/
@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 200;
  src: url("/static/fonts/manrope/manrope-v13-latin-200.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-200.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-200.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-200.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-200.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-200.svg#Manrope") format("svg")
}

@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 300;
  src: url("/static/fonts/manrope/manrope-v13-latin-300.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-300.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-300.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-300.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-300.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-300.svg#Manrope") format("svg")
}

@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 400;
  src: url("/static/fonts/manrope/manrope-v13-latin-regular.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-regular.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-regular.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-regular.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-regular.svg#Manrope") format("svg")
}

@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 500;
  src: url("/static/fonts/manrope/manrope-v13-latin-500.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-500.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-500.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-500.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-500.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-500.svg#Manrope") format("svg")
}

@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 600;
  src: url("/static/fonts/manrope/manrope-v13-latin-600.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-600.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-600.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-600.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-600.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-600.svg#Manrope") format("svg")
}

@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 700;
  src: url("/static/fonts/manrope/manrope-v13-latin-700.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-700.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-700.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-700.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-700.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-700.svg#Manrope") format("svg")
}

@font-face {
  font-family: manrope;
  font-style: normal;
  font-weight: 800;
  src: url("/static/fonts/manrope/manrope-v13-latin-800.eot");
  src: local(""), url("/static/fonts/manrope/manrope-v13-latin-800.eot?#iefix") format("embedded-opentype"), url("/static/fonts/manrope/manrope-v13-latin-800.woff2") format("woff2"), url("/static/fonts/manrope/manrope-v13-latin-800.woff") format("woff"), url("/static/fonts/manrope/manrope-v13-latin-800.ttf") format("truetype"), url("/static/fonts/manrope/manrope-v13-latin-800.svg#Manrope") format("svg")
}

/*! autoprefixer: on */
:root {
  --blue: #4696f5;
  --nav-height: 70px;
  --nav-left-width: calc(140px + 11vw);
  --nav-1st-font-size: 16px;
  --nav-contact-font-size: 15px;
  --nav-2nd-font-size: 16px;
  --nav-3rd-font-size: 16px;
  --nav-4th-font-size: 14px;
  --nav-5th-font-size: 13px;
  --nav-series-font-size: 15px;
  --nav-pro-text-font-size: 14px;
  --nav-pro-title-font-size: 16px;
  --nav-list-font-size: 15px;
  --nav-grid-width: 250px;
  --nav-side-space: 100px;
  --vms-pop-height: 90px
}

.header-nav {
  height: var(--nav-height);
  background-color: #fff;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  transform: translateY(0);
  transition: transform .3s
}

.header-nav.inactive {
  transform: translateY(-100%)
}

.header-nav * {
  font-family: manrope, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, "sans-serif" !important;
  box-sizing: border-box
}

.header-nav .iconfont {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.header-nav a,
.header-nav span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit
}

.header-nav a {
  text-decoration: none !important
}

.header-nav .nav__header {
  height: inherit;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background-color: inherit;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .06);
  position: relative;
  z-index: 1
}

.header-nav .nav__header .logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: var(--nav-left-width);
  flex-shrink: 0;
  padding-left: 88px;
  overflow: hidden
}

.header-nav .nav__header .logo img {
  height: calc(var(--nav-height) * 2);
  position: relative
}

.header-nav .nav__1st-menu {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 50px
}

.header-nav .nav__1st-menu li {
  font-size: var(--nav-1st-font-size);
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative
}

.header-nav .nav__1st-menu li a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center
}

.header-nav .nav__1st-menu li:after {
  content: "";
  width: 100%;
  height: 0;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 3px solid var(--blue);
  opacity: 0;
  transition: all .1s
}

.header-nav .nav__1st-menu li.active,
.header-nav .nav__1st-menu li:hover {
  color: var(--blue)
}

.header-nav .nav__1st-menu li.active:after,
.header-nav .nav__1st-menu li:hover:after {
  opacity: 1
}

.header-nav .nav__header-right {
  position: absolute;
  right: var(--nav-side-space);
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.header-nav .nav__header-right .contact {
  background-color: #0b76d1;
  color: #fff;
  height: 1.8em;
  padding: 0 1.2em;
  border-radius: 15px;
  text-align: center;
  font-size: var(--nav-contact-font-size);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0
}

.header-nav .nav__header-right .language {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1.875rem;
  gap: 30px
}

.header-nav .nav__header-right .language a,
.header-nav .nav__header-right .language p {
  color: #333;
  font-size: var(--nav-1st-font-size);
  line-height: 1
}

.header-nav .nav__header-right .language p {
  position: relative;
  margin: 0
}

.header-nav .nav__header-right .language p:after {
  content: "";
  height: 80%;
  display: block;
  width: 0;
  position: absolute;
  right: -16px;
  top: 8%;
  border: 1px solid rgba(77, 77, 77, .5)
}

.header-nav .nav__header-right .language a {
  opacity: .4
}

.header-nav .nav__header-right .language.lang {
  display: flex;
  width: 6.563rem;
  position: relative;
  z-index: 1
}

.header-nav .nav__header-right .language.lang select {
  flex: 1;
  font-size: 1rem;
  margin-left: .625rem;
  outline: none;
  padding-left: .938rem;
  border-radius: 4px;
  color: #333;
  background-color: transparent;
  border: none
}

.header-nav .nav__header-right .language.lang:before {
  content: "";
  position: absolute;
  left: .125rem;
  top: 55%;
  transform: translateY(-50%);
  width: 1.313rem;
  height: 1.313rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' class='y8cvt8b14__design-iconfont' width='128' height='128'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M7.63 7.6h44.75v44.8H7.63z' fill='%23666'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M29.98 7.63c12.35 0 22.36 10.01 22.36 22.36S42.33 52.35 29.98 52.35 7.62 42.33 7.62 29.99 17.63 7.63 29.98 7.63zm7.41 24.22H22.57c.41 9.51 3.92 16.77 7.41 16.77s7-7.26 7.41-16.77zm-18.55 0h-7.4c.68 6.88 5.11 12.66 11.22 15.27-2.2-3.74-3.58-9.19-3.82-15.27zm29.68 0h-7.4c-.24 6.09-1.62 11.53-3.82 15.27 6.11-2.61 10.53-8.39 11.22-15.27zm-25.87-19l-.21.09c-6 2.65-10.33 8.38-11.01 15.18h7.4c.24-6.09 1.62-11.53 3.82-15.27zm7.32-1.5h-.14c-3.44.19-6.87 7.39-7.27 16.77h14.82c-.41-9.51-3.92-16.77-7.41-16.77zm7.32 1.49l.14.24c2.12 3.73 3.45 9.07 3.68 15.04h7.4c-.68-6.88-5.11-12.66-11.22-15.27zm0 0' fill='%23666'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: -1
}

.header-nav .nav__header-right .site-search .iconfont {
  color: #2c2c2c;
  opacity: .6;
  font-size: 22px;
  cursor: pointer
}

.header-nav .nav__header-right .site-search .search-btn {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M851.084 829.905L740.422 716.916a335.36 335.36 0 1 0-50.037 45.615L802.91 877.265a33.862 33.862 0 1 0 48.291-47.36zm-625.571-335.36a266.356 266.356 0 1 1 266.356 266.357 266.59 266.59 0 0 1-266.356-266.357z' fill='%232c2c2c'/%3E%3C/svg%3E");
  background-size: 100%;
  width: 22px;
  height: 22px;
  opacity: .6;
  display: inline-block;
  vertical-align: middle
}

.header-nav .nav__header-right .site-search .search-input {
  outline: #666;
  border-radius: 5px;
  width: 0;
  opacity: 0;
  background-color: #eee;
  transition: all .5s ease
}

.header-nav .nav__header-right .site-search.active .search-input {
  width: 150px;
  opacity: 1;
  padding: 5px 10px;
  box-sizing: border-box
}

.header-nav .nav__header-right .header-btn--online {
  display: flex;
  align-items: center;
  margin-left: 1.125rem;
  padding-left: .125rem;
  padding-right: .625rem;
  height: 1.8em;
  border-radius: 1.875rem;
  border: 1px solid #cbcbcb;
  box-sizing: border-box;
  position: relative;
  font-size: var(--nav-contact-font-size);
  font-weight: 500
}

.header-nav .nav__header-right .header-btn--online:before {
  content: "";
  display: block;
  width: 1.563rem;
  height: 1.563rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' class='dnjybdzvq__design-iconfont' width='128' height='128'%3E%3Cpath d='M30 52.25C17.73 52.25 7.75 42.27 7.75 30S17.73 7.75 30 7.75 52.25 17.73 52.25 30 42.27 52.25 30 52.25zm0-42.5C18.83 9.75 9.75 18.83 9.75 30S18.83 50.25 30 50.25 50.25 41.17 50.25 30 41.17 9.75 30 9.75z' fill='%23FF910F'/%3E%3Cpath d='M40.25 30.25l-16.5-10.39v20.78l16.5-10.39z' fill='%23FF910F'/%3E%3C/svg%3E");
  background-position: 50%;
  background-size: 100%;
  margin-right: .188rem
}

.header-nav .nav__content {
  background-color: #fff;
  position: relative;
  transform: translateY(-100%);
  transition: transform .2s
}

.header-nav .nav__content.active {
  transform: none;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .06)
}

.header-nav .nav__content a {
  display: inline
}

.header-nav .nav__content a:hover {
  color: var(--blue)
}

.header-nav .nav__content-block--divide {
  display: none;
  align-items: stretch;
  justify-content: flex-start
}

.header-nav .nav__content-block--divide.active {
  display: flex
}

.header-nav .nav__content-block--normal {
  align-items: stretch;
  justify-content: space-between;
  padding: 2.6vw 0 2.08vw;
  display: none;
  padding-left: calc(var(--nav-side-space) + 120px);
  padding-right: var(--nav-side-space)
}

.header-nav .nav__content-block--normal.active {
  display: flex
}

.header-nav .nav__poster {
  height: 10.625rem;
  width: 15.625rem;
  position: static;
  margin-top: 1.875rem
}

.header-nav .nav__poster a {
  display: block
}

.header-nav .nav__poster a img {
  width: 15.625rem;
  position: absolute;
  right: var(--nav-side-space);
  bottom: 2.5rem
}

.header-nav .nav__content-left {
  background-color: #f4f4f4;
  width: var(--nav-left-width);
  flex-shrink: 0
}

.header-nav .nav__2nd-grid {
  flex-shrink: 0;
  width: var(--nav-grid-width)
}

.header-nav .nav__2nd-grid.norwap .nav__4th-title {
  white-space: nowrap
}

.header-nav .nav__2nd-menu li {
  height: 60px;
  color: #333;
  font-weight: 500;
  font-size: var(--nav-2nd-font-size)
}

.header-nav .nav__2nd-menu li a {
  width: 100%;
  height: 100%;
  padding-left: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.header-nav .nav__2nd-menu li:first-of-type,
.header-nav .nav__2nd-menu li:last-of-type {
  height: 80px
}

.header-nav .nav__2nd-menu li:first-of-type {
  padding-top: 20px
}

.header-nav .nav__2nd-menu li:last-of-type {
  padding-bottom: 20px
}

.header-nav .nav__2nd-menu li.active,
.header-nav .nav__2nd-menu li:hover {
  background-color: #fff
}

.header-nav .nav__2nd-menu li.active a,
.header-nav .nav__2nd-menu li:hover a {
  color: var(--blue)
}

.header-nav .nav__content-right {
  padding: 40px var(--nav-side-space) 40px 0;
  flex-grow: 1;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: -ms-autohiding-scrollbar
}

.header-nav .nav__content-right::-webkit-scrollbar {
  width: 0
}

.header-nav .nav__content-right .nav__poster {
  position: absolute;
  right: 0;
  bottom: 0
}

.header-nav .nav__2nd-content {
  align-items: stretch;
  justify-content: space-between;
  display: none;
  min-height: 100%
}

.header-nav .nav__2nd-content.active {
  display: flex
}

.header-nav .nav__3rd--leaf {
  margin: 0 0 20px !important
}

.header-nav .nav__3rd--leaf:last-of-type {
  margin: 0 !important
}

.header-nav .nav__3rd:not(:first-of-type) {
  margin-top: 50px
}

.header-nav .nav__3rd-title {
  font-size: var(--nav-3rd-font-size);
  font-weight: 500;
  position: relative;
  color: #333;
  padding-bottom: 10px;
  margin-bottom: 16px
}

.header-nav .nav__3rd-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  border-bottom: 1px solid #b2b2b2;
  width: 90%
}

.header-nav .nav__3rd-title--fill:after {
  content: none
}

.header-nav .nav__3rd-title--no-line {
  margin-bottom: 0;
  padding-bottom: 0
}

.header-nav .nav__3rd-title--no-line:after {
  content: none
}

.header-nav .nav__4th:not(:first-of-type) {
  margin-top: 26px
}

.header-nav .nav__4th.leaf:not(:first-of-type) {
  margin-top: 14px
}

.header-nav .nav__4th.leaf:hover .nav__4th-title {
  color: var(--blue)
}

.header-nav .nav__4th-title {
  color: #333;
  font-size: var(--nav-4th-font-size);
  font-weight: 400;
  margin-bottom: 6px;
  line-height: 1.3
}

.header-nav .nav__4th-content {
  display: flex;
  flex-wrap: wrap;
  gap: .2em 4%
}

.header-nav .nav__4th-content li {
  font-size: var(--nav-5th-font-size);
  min-width: 29.3333333333%;
  line-height: 1.4;
  font-weight: 300;
  color: #666
}

.header-nav .nav__4th-content li.col-2 {
  min-width: 62.6666666667%
}

.header-nav .nav__4th-content li.col-3 {
  min-width: 100%;
  margin-right: 0
}

.header-nav .nav__4th-content li a {
  display: block
}

.header-nav .online-demo {
  width: 100%;
  text-align: center;
  position: relative;
  top: 20px
}

.header-nav .online-demo-btn {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M445.227 304.427a23.893 23.893 0 0 0-39.894 17.92v378.88a23.893 23.893 0 0 0 39.894 17.706L658.56 529.707a24.747 24.747 0 0 0 0-36.054z' fill='%23333'/%3E%3Cpath d='M512 149.333A362.667 362.667 0 1 0 874.667 512 362.667 362.667 0 0 0 512 149.333zm0 694.614A332.373 332.373 0 1 1 844.373 512 332.8 332.8 0 0 1 512 843.947z' fill='%23333'/%3E%3C/svg%3E");
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  vertical-align: middle;
  opacity: .8
}

.header-nav .pro__cat {
  padding: 0 30px;
  width: 340px;
  position: relative;
  flex-shrink: 0
}

.header-nav .pro__cat:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 1px solid #cfcfcf
}

.header-nav .pro__cat li {
  height: 50px;
  font-size: var(--nav-3rd-font-size);
  font-weight: 500;
  color: #333;
  padding-left: 26px
}

.header-nav .pro__cat li,
.header-nav .pro__cat li a {
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.header-nav .pro__cat li a {
  height: 100%;
  color: currentcolor;
  flex-grow: 1
}

.header-nav .pro__cat li.active {
  background-color: #f5f5f5;
  color: var(--blue)
}

.header-nav .pro__cat-content {
  flex-grow: 1;
  padding-left: 2.375rem;
  display: none;
  padding-bottom: 15rem
}

.header-nav .pro__cat-content.active {
  display: block
}

.header-nav .pro__series {
  margin-bottom: 1.875rem
}

.header-nav .pro__series ul {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .625rem 1.25rem;
  flex-wrap: wrap
}

.header-nav .pro__series ul li {
  font-size: var(--nav-series-font-size);
  font-weight: 500;
  color: #333;
  height: 2.75rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem
}

.header-nav .pro__series ul li a {
  color: currentcolor;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none
}

.header-nav .pro__series ul li.active {
  background-color: #f5f5f5;
  box-shadow: inset 0 3px 2px 0 rgba(45, 45, 45, .03);
  border-radius: 8px;
  color: var(--blue)
}

.header-nav .pro__series ul li.active a {
  pointer-events: all
}

.header-nav .pro__series-content ul {
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.313rem;
  flex-wrap: wrap
}

.header-nav .pro__series-content ul.active {
  display: flex
}

.header-nav .pro__series-content .newcard {
  width: 10rem;
  border: none;
  padding: 0;
  min-height: unset;
  margin: 0 !important;
  background-color: transparent !important;
  position: relative
}

.header-nav .pro__series-content .newcard:after,
.header-nav .pro__series-content .newcard:before {
  content: none !important
}

.header-nav .pro__series-content .newcard.hot:before {
  content: "" !important;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 2.75rem;
  background-size: 100% 100%;
  background-image: url(https://www.milesight.com/static/pc/en/nav/hot.png?t=1704771623435)
}

.header-nav .pro__series-content .newcard__title {
  font-size: var(--nav-pro-title-font-size);
  padding: 0 .375rem;
  margin: 0 0 .25rem
}

.header-nav .pro__series-content .newcard__text,
.header-nav .pro__series-content .newcard__title {
  text-align: center;
  color: #666;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto
}

.header-nav .pro__series-content .newcard__text {
  font-size: var(--nav-pro-text-font-size);
  padding: 0 .25rem;
  margin: 0
}

.header-nav .pro__series-content .newcard__img {
  width: 10rem;
  height: 7.5rem;
  background-color: #f5f5f5;
  margin-bottom: .625rem;
  min-height: unset;
  padding: 0
}

.header-nav .pro__series-content .newcard:hover .newcard__text,
.header-nav .pro__series-content .newcard:hover .newcard__title {
  color: var(--blue)
}

.tabs-and-crumbs {
  transition: top .3s;
  top: calc(var(--nav-height) - 1px) !important
}

.tabs-and-crumbs.inactive {
  top: -1px !important
}

.tabs-and-crumbs.has-pop {
  top: calc(var(--nav-height) + var(--vms-pop-height) - 1px) !important
}

.tabs-and-crumbs.has-pop--inactive {
  top: calc(var(--vms-pop-height) - 1px) !important
}

.vms-pop {
  transition: top .3s;
  top: var(--nav-height);
  width: 100%;
  height: var(--vms-pop-height);
  background-image: url(/static/pc/en/security-pop/bj.jpg?t=1704771623435);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 900
}

.vms-pop.active {
  display: flex
}

.vms-pop.inactive {
  top: 0 !important
}

.vms-pop__product {
  display: block;
  margin-right: 1.875rem;
  width: 11.125rem
}

.vms-pop__icon {
  width: 4.563rem;
  margin-right: 1.25rem
}

.vms-pop__text {
  font-size: 1.125rem;
  color: #fff;
  margin-right: 3.125rem
}

.vms-pop__btn {
  flex-shrink: 0;
  padding: .25rem 1rem;
  line-height: 1;
  font-size: 1.125rem;
  color: #228be9;
  background-color: #fff;
  border-radius: 2.5rem;
  transition: all .5s ease;
  box-shadow: inset 0 .125rem .25rem 0 rgba(39, 135, 221, .35);
  border: 1px solid #fff
}

.vms-pop__btn:hover {
  transform: scale(1.05)
}

.vms-pop__close {
  position: absolute;
  left: calc(50% + 40rem);
  top: .625rem;
  cursor: pointer
}

.vms-pop__close svg {
  font-size: 1.5rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  fill: currentcolor;
  color: #fff
}

.vms-pop.trafficx-pre-sale {
  background-image: url(/static/pc/en/security-pop/trafficx-pre-sale/bg.jpg?t=1704771623435)
}

.vms-pop.trafficx-pre-sale .vms-pop__icon {
  margin-left: 8.75rem
}

.vms-pop2 .vms-pop__text {
  margin-right: 1.25rem;
  margin-bottom: 0
}

.vms-pop2 .vms-pop__btn {
  background-color: #fff;
  padding: .375rem 1rem;
  font-size: 1.125rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.vms-pop2 .vms-pop__btn .symbol {
  fill: #4696f5;
  width: 1.25rem;
  margin-right: .625rem;
  height: 1.25rem;
  transform: scale(1.7)
}

.vms-pop2 .vms-pop__close {
  left: calc(50% + 40rem);
  color: #fff
}

@media (max-width:1540px) {
  :root {
    --nav-height: 66px;
    --nav-left-width: calc(120px + 11vw);
    --nav-1st-font-size: 15px;
    --nav-contact-font-size: 16px;
    --nav-2nd-font-size: 15px;
    --nav-3rd-font-size: 15px;
    --nav-4th-font-size: 13px;
    --nav-5th-font-size: 12px;
    --nav-series-font-size: 14px;
    --nav-pro-text-font-size: 13px;
    --nav-pro-title-font-size: 15px;
    --nav-grid-width: 240px;
    --nav-side-space: 80px;
    --nav-list-font-size: 14px;
    --vms-pop-height: 80px
  }

  .header-nav .nav__header .logo {
    padding-left: 70px
  }

  .header-nav .nav__content-right {
    padding: 30px var(--nav-side-space) 30px 0
  }

  .header-nav .nav__2nd-menu li {
    height: 50px
  }

  .header-nav .nav__2nd-menu li a {
    padding-left: 80px
  }

  .header-nav .nav__4th:not(:first-of-type) {
    margin-top: 20px
  }

  .header-nav .nav__content-block--normal {
    padding-left: calc(var(--nav-side-space) + 110px)
  }

  .header-nav .pro__cat {
    padding: 0 20px;
    width: 300px
  }

  .header-nav .pro__cat li {
    height: 46px
  }

  .header-nav .pro__cat-content {
    padding-left: 30px;
    padding-bottom: 220px
  }
}

@media (max-width:1420px) {
  :root {
    --nav-height: 60px;
    --nav-left-width: calc(100px + 11vw);
    --nav-grid-width: 220px;
    --nav-side-space: 80px;
    --vms-pop-height: 70px
  }

  .header-nav .nav__header .logo {
    padding-left: 50px
  }

  .header-nav .nav__content-right {
    padding: 24px var(--nav-side-space) 24px 0
  }

  .header-nav .nav__2nd-menu li {
    height: 50px
  }

  .header-nav .nav__2nd-menu li a {
    padding-left: 60px
  }

  .header-nav .nav__4th:not(:first-of-type) {
    margin-top: 20px
  }

  .header-nav .nav__4th.leaf:not(:first-of-type) {
    margin-top: 10px
  }

  .header-nav .nav__3rd:not(:first-of-type) {
    margin-top: 30px
  }

  .header-nav .nav__content-block--normal {
    padding-left: calc(var(--nav-side-space) + 80px)
  }

  .header-nav .pro__cat {
    padding: 0 10px;
    width: 260px
  }

  .header-nav .pro__cat li {
    height: 42px
  }

  .header-nav .pro__cat-content {
    padding-left: 20px;
    padding-bottom: 200px
  }
}

/*! autoprefixer: on */
:root {
  font-size: 16px;
  --uppercase-required: "Required"
}

//**
* {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.6;
  font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif
} 
**//

.hidden,
[hidden] {
  display: none !important;
  position: absolute !important;
  visibility: hidden !important
}

sub,
sup {
  line-height: 0;
  font-size: inherit;
  zoom: .6
}

sub {
  vertical-align: baseline
}

sup {
  vertical-align: super
}

@-moz-document url-prefix() {

  sub,
  sup {
    font-size: .6em
  }
}

svg.symbol {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: currentcolor;
  overflow: hidden;
  font-size: inherit
}

.swiper-button-next,
.swiper-button-prev,
a {
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  text-decoration: none
}

.swiper-button-next:after,
.swiper-button-prev:after,
a:after {
  font-size: inherit
}

.swiper-button--custom:after {
  content: none !important
}

button {
  cursor: pointer
}

.captcha,
.verifycode {
  cursor: pointer;
  background-color: #fff
}

img:not([src]),
img[src=""] {
  display: inline-block !important
}

img.verifycode {
  background-color: #fff;
  border-radius: 6px
}

.p-left-0 {
  padding-left: 0 !important
}

.w-full {
  width: 100%
}

.youtube-embed {
  --youtube-width: 960px;
  width: var(--youtube-width);
  display: inline-block
}

.youtube-embed iframe {
  width: var(--youtube-width);
  height: calc(.5625 * var(--youtube-width))
}

.youtube-list-btn {
  position: absolute;
  right: 52px;
  bottom: 0;
  height: 46px;
  width: 67px
}

.swiper-newcontainer .swiper-wrapper {
  height: auto
}

.flex {
  display: flex
}

.flex-column {
  display: flex;
  flex-direction: column
}

.clearfix:after {
  clear: both;
  display: block;
  content: ""
}

textarea {
  resize: none
}

/**
ul li {
  list-style: none
}
**/

[class*=icon-],
img {
  vertical-align: middle
}

[class*=icon-] {
  font-family: iconfont !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1
}

.align-center {
  text-align: center !important
}

.align-left {
  text-align: left !important
}

.align-right {
  text-align: right !important
}

.align-justify {
  text-align: justify !important
}

.family-manrope * {
  font-family: manrope, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, "sans-serif" !important
}

.family-manrope a,
.family-manrope span {
  font-family: inherit
}

.family-manrope [class*=icon-] {
  font-family: iconfont !important
}

footer {
  background-color: #f5f5f5
}

footer .pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  display: none;
  background-color: rgba(0, 0, 0, .3)
}

footer .pop .pop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

footer .pop .pop-wrap .pop-btn {
  position: absolute;
  top: 10%;
  right: 22.5%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 9999
}

footer .pop-small {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: none
}

footer .pop-small .pop-wrap {
  width: 350px
}

footer .pop-small .pop-wrap a,
footer .pop-small .pop-wrap a canvas {
  width: 100%
}

footer .pop-small .pop-wrap .pop-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 9999
}

footer .nav {
  background-color: #61a7d8;
  color: #fff;
  padding: 30px 0;
  text-align: center
}

footer .nav a {
  color: #fff
}

footer .nav>ul {
  width: 1100px;
  display: inline-flex;
  justify-content: space-between
}

footer .nav>ul>li {
  font-size: 1.5rem
}

footer .nav>ul>li i {
  display: block;
  font-size: 52px
}

footer .nav>ul>li i:hover {
  transition-duration: .6s;
  transform: rotate(1turn)
}

footer .nav>ul>li>ul {
  margin-top: 10px
}

footer .nav>ul>li>ul li {
  font-size: 1rem;
  padding: 0
}

footer.footer-merged .footer-text {
  margin: 0;
  font-size: 13px;
  color: #666
}

footer.footer-merged .footer-wrap {
  width: 92.688rem;
  margin: 0 auto;
  padding-top: 50px;
  display: flex;
  align-items: flex-start
}

footer.footer-merged .footer-wrap .footer--left {
  flex-shrink: 0;
  width: 36.25rem;
  margin-right: 3.75rem;
  box-sizing: border-box
}

footer.footer-merged .footer-wrap .footer--left h4 {
  font-size: 24px;
  color: #666;
  font-weight: 400;
  margin: 0;
  margin-top: 30px
}

footer.footer-merged .footer-wrap .footer--left .milesight-footer-logo {
  width: 210px
}

footer.footer-merged .footer-wrap .footer--left .ovif {
  width: 180px;
  margin-top: 20px;
  margin-left: -16px
}

footer.footer-merged .footer-wrap .footer--left .footer-text {
  margin: 0;
  margin-bottom: 20px
}

footer.footer-merged .footer-wrap .footer--left .iot-btn {
  font-weight: 400;
  padding: 2px 16px;
  border-radius: 5px;
  background-color: #3691fc;
  color: #fff;
  display: inline-block;
  margin: 16px 0;
  transition: all .5s ease
}

footer.footer-merged .footer-wrap .footer--left .iot-btn:hover {
  transform: scale(1.05)
}

footer.footer-merged .footer-wrap .footer--left .follow-us .line {
  width: 100%;
  height: 1px;
  background-color: hsla(0, 0%, 40%, .4);
  margin: 10px 0
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link {
  height: 50px;
  display: flex;
  align-items: center
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out {
  margin: 0 5px
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out:nth-child(2) i {
  color: #0f6da6;
  font-size: 32px
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out:nth-child(3) i {
  color: #e7141a
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out:nth-child(4) i {
  color: #2fb0ec
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out:nth-child(5) i {
  color: #3b62a7
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out:nth-child(6) i {
  background-image: linear-gradient(225deg, #1800ca, #d22578, #fffb00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out.skype i {
  color: #00aff0
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out.github {
  position: relative;
  left: -9px
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out.github i {
  color: #4278c4
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out.phone {
  position: relative;
  left: -13px
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-out.phone i {
  color: #3ac34c
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .linkedin {
  margin-left: 10px !important
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-in {
  display: flex;
  flex-direction: column;
  transition: all .5s ease
}

footer.footer-merged .footer-wrap .footer--left .follow-us .follow-link .icon-wrap-in i {
  font-size: 36px;
  line-height: 40px
}

footer.footer-merged .footer-wrap .footer--left .lora-wrap {
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-left: -18px;
  margin-top: 30px
}

footer.footer-merged .footer-wrap .footer--left .lora-wrap svg {
  font-size: 80px
}

footer.footer-merged .footer-wrap .footer--left .lora-wrap img {
  width: 80px
}

footer.footer-merged .footer-wrap .footer--left .lora-wrap .bold {
  font-weight: 700;
  margin-right: 5px
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.25rem
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-icon {
  position: relative;
  overflow: hidden
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-icon input {
  box-sizing: border-box;
  padding-left: 3.13vw;
  width: 17.188rem;
  height: 3rem;
  font-size: 1rem;
  background-color: #fbfbfb;
  box-shadow: inset 0 2px 5px 0 rgba(93, 93, 93, .06);
  border-radius: .375rem;
  border: 1px solid #dcdcdc;
  color: #333
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-icon input::placeholder {
  color: #a5a5a5
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-icon .icon-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-icon .icon-wrap svg {
  font-size: 1.625rem;
  color: #666
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-icon .icon-wrap:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - .5rem);
  height: 1rem;
  border-left: 1px solid #b0b0b0
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-verifycode .verifycode {
  position: absolute;
  left: 1px;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: .313rem;
  width: 6.25rem;
  height: calc(100% - 2px);
  overflow: hidden;
  background-color: transparent;
  box-sizing: border-box
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-verifycode .verifycode img {
  width: 100%;
  background-color: transparent
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-verifycode .verifycode:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - .5rem);
  height: 1rem;
  border-left: 1px solid #b0b0b0
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .input-verifycode input {
  box-sizing: border-box;
  padding-left: 7rem
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .download-pop-btn {
  width: 17.188rem;
  height: 3rem;
  border-radius: .375rem;
  background-color: #469bff;
  color: #fff;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease
}

footer.footer-merged .footer-wrap .footer--left .footer__newsletter-form form .download-pop-btn:hover {
  transform: translateY(-.313rem);
  box-shadow: .313rem .313rem 1.25rem rgba(0, 0, 0, .4)
}

footer.footer-merged .footer-wrap .footer--right {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

footer.footer-merged .footer-wrap .footer--right .footer-nav {
  flex-grow: 0;
  flex-shrink: 0;
  width: 11.25rem;
  padding: 0 6%;
  white-space: nowrap;
  margin-bottom: 20px;
  box-sizing: content-box
}

footer.footer-merged .footer-wrap .footer--right .footer-text {
  font-size: 12px;
  margin: 0
}

footer.footer-merged .footer-wrap .footer--right a {
  color: #3d4a59;
  padding: 3px 0;
  display: inline-block
}

footer.footer-merged .footer-wrap .footer--right a:hover {
  color: #469bff
}

footer.footer-merged .footer-wrap .footer--right h3 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 7px;
  margin-top: 5px;
  color: #333
}

footer .footer-copyright {
  height: 70px;
  width: 92.688rem;
  margin: 20px auto 0;
  justify-content: space-between;
  font-size: 14px
}

footer .footer-copyright,
footer .footer-copyright-link {
  display: flex;
  align-items: center
}

footer .footer-copyright-link a {
  color: #3d4a59
}

footer .footer-copyright-link a:hover {
  color: #0599d9;
  text-decoration: underline
}

footer .footer-copyright-link .line {
  width: 1px;
  height: 18px;
  background-color: #3d4a59;
  margin: 0 14px
}

footer .slogan {
  text-align: center
}

footer .slogan img {
  width: 100%
}

footer .slogan a {
  font-size: 40px;
  margin: 0 20px
}

footer .slogan .blue {
  color: #29a6ff
}

footer .slogan .orange {
  color: #fb702b
}

footer .slogan .gray {
  color: #4376aa
}

footer .slogan .red {
  color: #dc452f
}

footer .copyright {
  padding: 40px 0 60px;
  background-color: #f3f3f3;
  text-align: center
}

footer .copyright a {
  color: #29a6ff
}

footer .copyright p {
  color: #666
}

footer .copyright .policy {
  margin-left: 30px
}

@keyframes pulse-big {
  0% {
    transform: scale(1.2);
    opacity: 0
  }

  50% {
    opacity: .2
  }

  to {
    transform: scale(1.6);
    opacity: 0
  }
}

.right-contact {
  position: fixed;
  right: 53px;
  bottom: 60px;
  z-index: 998
}

.right-contact input::input-placeholder {
  font-size: 12px
}

.right-contact .contact__btn {
  transition-duration: .4s;
  transform-origin: bottom right;
  transform: translateX(-50px) scale(1)
}

.right-contact .contact__btn i {
  font-size: 50px;
  width: 78px;
  height: 78px;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  background-color: #0080f7;
  color: #fff;
  border: 8px solid rgba(99, 175, 251, .6);
  background-clip: content-box;
  border-radius: 50%;
  position: relative;
  cursor: pointer
}

.right-contact .contact__btn i:after {
  content: "";
  display: block;
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 2px solid #017ff7;
  border-radius: 50%;
  animation-name: pulse-big;
  animation-fill-mode: both;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  transform-origin: center center
}

.right-contact .contact__btn p {
  color: #017ff7;
  margin-top: 10px;
  text-align: center
}

.right-contact .contact__btn.hover~.contact__dialog,
.right-contact .contact__btn:hover~.contact__dialog {
  padding: 16px 20px;
  max-height: 80px;
  border: 1px solid #dbe9f8;
  overflow: visible
}

.right-contact .contact__btn.hover~.contact__dialog p,
.right-contact .contact__btn:hover~.contact__dialog p {
  max-height: 80px;
  transition-duration: 1s
}

.right-contact .contact__dialog {
  position: absolute;
  width: 230px;
  height: 80px;
  right: 70px;
  bottom: 140px;
  background: #eff5fc;
  box-shadow: 0 5px 40px rgba(0, 0, 0, .1);
  border-radius: 6px;
  font-size: 16px;
  color: #165eae;
  padding: 0 16px;
  overflow: hidden;
  border: none;
  max-height: 0;
  transition-duration: .6s;
  box-sizing: border-box
}

.right-contact .contact__dialog p {
  max-height: 0;
  overflow: hidden;
  transition-duration: .4s
}

.right-contact .contact__dialog:before {
  content: "";
  position: absolute;
  right: 19px;
  bottom: -21px;
  border: 12px solid #dbe9f8;
  border-bottom-color: transparent;
  border-left-color: transparent;
  z-index: -1
}

.right-contact .contact__dialog:after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -19px;
  border: 10px solid #eff5fc;
  border-bottom-color: transparent;
  border-left-color: transparent
}

.right-contact .contact__form {
  width: 200px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  padding: 12px 10px 20px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: scale(0);
  transition-duration: .4s;
  transform-origin: bottom right
}

.right-contact .contact__form i {
  background-color: #469bff;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 1px;
  line-height: 22px;
  position: absolute;
  text-align: center;
  right: 10px;
  top: 10px;
  cursor: pointer
}

.right-contact .contact__form .form__title {
  color: #333;
  font-size: 1rem
}

.right-contact .contact__form .form__footer {
  text-align: right;
  margin-top: 4px
}

.right-contact .contact__form form {
  margin-top: 4px
}

.right-contact .contact__form input,
.right-contact .contact__form select,
.right-contact .contact__form textarea {
  outline: none;
  border: 1px solid #d2d9dc;
  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, .1);
  width: 100%;
  box-sizing: border-box;
  font-size: .9rem;
  border-radius: 6px;
  padding: 0 10px;
  margin-top: 10px;
  height: 30px
}

.right-contact .contact__form input::placeholder,
.right-contact .contact__form select::placeholder,
.right-contact .contact__form textarea::placeholder {
  color: #777
}

.right-contact .contact__form input:focus-visible,
.right-contact .contact__form select:focus-visible,
.right-contact .contact__form textarea:focus-visible {
  outline: 1px solid #469bff
}

.right-contact .contact__form input:focus-visible::placeholder,
.right-contact .contact__form select:focus-visible::placeholder,
.right-contact .contact__form textarea:focus-visible::placeholder {
  color: #999
}

.right-contact .contact__form input {
  padding: 0 5px
}

.right-contact .contact__form select {
  padding: 0 0 0 6px
}

.right-contact .contact__form select[unselected] {
  color: #777
}

.right-contact .contact__form select:focus-visible[unselected] {
  color: #999
}

.right-contact .contact__form textarea {
  height: auto
}

.right-contact .contact__form button {
  background-color: #469bff;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 10px;
  width: 100%
}

.right-contact .contact__form .verify-code-content {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.right-contact .contact__form .verify-code-content img {
  width: 38%;
  vertical-align: middle;
  margin-right: 5px
}

.right-contact .contact__form .verify-code-content input {
  margin-top: 0
}

.right-contact.active .contact__btn {
  transform: translateX(0) scale(0)
}

.right-contact.active .contact__form {
  transform: none;
  transition-duration: .6s
}

.right-btns,
.right-contact.active .contact__dialog {
  display: none
}

.right-btns {
  position: fixed;
  right: -50px;
  top: calc(50% - 168px);
  z-index: 997;
  opacity: 0;
  transition-duration: .4s
}

.right-btns.active {
  opacity: 1;
  right: 0;
  transition-duration: .6s
}

.right-btns .btns-right {
  width: 46px;
  background-image: linear-gradient(216deg, #f1f7fd, #fafafa), linear-gradient(#00a0e8, #00a0e8);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .11);
  border-radius: 4px;
  border: 1px solid #fff;
  padding: 2px 0
}

.right-btns .btns-right a {
  width: 42px;
  height: 44px;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  position: relative
}

.right-btns .btns-right a:hover {
  background-color: #ececec
}

.right-btns .btns-right a:last-child {
  border-bottom: unset
}

.right-btns .btns-right a .right-btns-hover-img {
  display: none;
  transition: all .5s ease .2s;
  opacity: 0;
  position: absolute;
  top: calc(50% - 40px);
  right: calc(100% + 15px);
  width: 70px;
  height: 70px;
  background-color: #f4f8fc;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  border-radius: 4px;
  border: 2px solid #fff
}

.right-btns .btns-right a .right-btns-hover-img img {
  width: 100%
}

.right-btns .btns-right a .right-btns-hover-img:after {
  content: "";
  position: absolute;
  left: 99%;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left: 10px solid #f4f8fc;
  filter: drop-shadow(6px 0 5px #cecece)
}

.right-btns .btns-right a.active .right-btns-hover-img {
  display: block;
  opacity: 1
}

.right-btns .to-top {
  height: 48px
}

.right-btns .to-top i {
  height: 46px
}

.right-btns .top-text {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 4px;
  vertical-align: top;
  right: 0;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  pointer-events: none
}

.right-btns .to-top {
  width: 46px;
  height: 36px;
  background-image: linear-gradient(216deg, #f1f7fd, #fafafa), linear-gradient(#007ee8, #007ee8);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .11);
  border-radius: 4px;
  border: 1px solid #fff;
  cursor: pointer;
  margin-top: 2px
}

.right-btns .to-top,
.right-btns .to-top i {
  display: flex;
  align-items: center;
  justify-content: center
}

.right-btns .to-top i {
  border-radius: 4px;
  font-size: 32px;
  width: 42px;
  height: 34px;
  color: #666
}

.right-btns .to-top:hover i {
  background-color: #ececec
}

@keyframes open {
  0% {
    max-width: 0
  }

  to {
    max-width: 1100px
  }
}

@keyframes dropDown {
  0% {
    transform: translateY(-400px) scaleX(.4)
  }

  50% {
    transform: translateY(0) scale(.4)
  }

  to {
    transform: translateY(0) scale(1)
  }
}

@keyframes unfold {
  0% {
    max-height: 0
  }

  to {
    max-height: 200px
  }
}

.cover {
  text-align: left;
  color: #fff;
  background-image: url(/static/pc/en/page/whatshot/index/banner-bg.png?t=1704771623435);
  position: relative;
  height: 546px;
  background-position: 50%;
  background-size: cover
}

.cover__content {
  height: 380px;
  position: absolute;
  left: calc(50% - 550px);
  top: 100px;
  padding: 40px 0;
  width: 1100px;
  display: inline-block;
  background-color: rgba(7, 16, 34, .5);
  margin-top: 20px;
  text-align: left;
  box-sizing: border-box;
  animation-name: open;
  animation-duration: 1s;
  animation-delay: 1.4s;
  animation-fill-mode: backwards
}

.cover__title {
  font-size: 3.2rem;
  animation-duration: 2s;
  animation-name: dropDown;
  animation-delay: .4s;
  animation-fill-mode: backwards;
  width: 1000px;
  text-align: left;
  transform-origin: left;
  margin-left: 50px;
  color: #fff
}

.cover__text {
  width: 950px;
  overflow: hidden;
  font-size: 1.2rem;
  padding-top: 20px;
  text-align: left;
  animation-name: unfold;
  animation-duration: 1s;
  animation-delay: 2.6s;
  animation-fill-mode: backwards;
  padding-left: 50px;
  color: #fff
}

.first-contact {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, .3)
}

.first-contact,
.first-contact * {
  box-sizing: content-box
}

.first-contact .contact__body {
  width: 400px;
  box-sizing: border-box;
  background-color: #fff;
  position: absolute;
  left: calc(50% - 200px);
  top: calc(50vh - 250px);
  border-radius: 6px
}

.first-contact .contact__content {
  text-align: center;
  padding: 50px 0;
  background-image: url(/static/pc/en/firstcontact-bg.png?t=1704771623435);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top;
  margin: 0;
  border-radius: inherit;
  overflow: hidden
}

.first-contact .contact__content form input,
.first-contact .contact__content form select,
.first-contact .contact__content form textarea {
  width: 250px;
  margin-top: 8px;
  background: #f4f5f7;
  height: 35px;
  border: none;
  box-sizing: border-box;
  padding: 0 20px
}

.first-contact .contact__content form textarea {
  height: auto
}

.first-contact .contact__content form select[unselected] {
  color: gray
}

.first-contact .contact__content form button {
  display: inline-block;
  padding: 5px 25px;
  margin-top: 22px;
  background: #017ff7;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  box-shadow: 1px 2px rgba(45, 140, 244, .1);
  cursor: pointer
}

.first-contact .contact__content form .verify-code-content {
  display: inline-flex;
  vertical-align: middle;
  width: 250px;
  align-items: center;
  justify-content: space-between
}

.first-contact .contact__content form .verify-code-content input {
  width: 60%;
  margin-top: 0
}

.first-contact .contact__content form .verify-code-content img {
  height: 35px
}

.first-contact .contact__content p {
  max-width: 260px;
  display: inline-block;
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: #fff
}

.first-contact .contact__close {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  top: -80px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 2px;
  cursor: pointer
}

.first-contact .contact__close:after {
  content: "";
  position: absolute;
  bottom: -42px;
  left: 17px;
  background-color: #fff;
  width: 2px;
  height: 42px
}

.first-contact .contact__close i {
  font-size: 32px;
  color: #fff
}

@media screen and (max-width:1220px) {
  footer .nav>ul {
    width: 924px
  }
}

.form__newsletter-pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(45, 140, 244, .9);
  z-index: 999;
  padding: 10px 0 5px;
  text-align: center;
  font-size: 1.25rem;
  display: none
}

.form__newsletter-pop p {
  color: #fff;
  margin-bottom: .625rem
}

.form__newsletter-pop .form--top {
  display: flex;
  justify-content: center;
  column-gap: .938rem;
  width: 53.125rem;
  margin: 0 auto;
  flex-wrap: wrap;
  padding-bottom: .625rem
}

.form__newsletter-pop select {
  box-sizing: content-box
}

.form__newsletter-pop select[unselected] {
  color: gray
}

.form__newsletter-pop input,
.form__newsletter-pop select {
  background-color: #fff;
  width: 22.5rem;
  height: 2rem;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 2
}

.form__newsletter-pop .flex-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: .938rem;
  margin-left: -.25rem;
  width: calc(22.5rem + 20px)
}

.form__newsletter-pop .flex-box .verify-code-content {
  display: flex;
  align-items: center
}

.form__newsletter-pop .flex-box .verify-code-content img {
  height: 2rem;
  min-height: 24px;
  margin-right: 5px
}

.form__newsletter-pop .flex-box .verify-code-content input {
  width: 6.25rem;
  height: 2rem;
  min-height: 24px;
  font-size: 1rem;
  line-height: 2;
  box-sizing: border-box;
  margin-bottom: 0
}

.form__newsletter-pop .flex-box button {
  border: 2px solid #fff;
  transition-duration: .3s;
  color: #fff;
  background-color: transparent;
  border-radius: 5px;
  padding: 0 1.875rem;
  font-size: 1rem;
  line-height: 2;
  height: 2rem;
  min-height: 24px
}

.form__newsletter-pop .flex-box button:hover {
  background-color: rgba(0, 0, 0, .1)
}

.form__newsletter-pop .close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-size: 30px;
  cursor: pointer
}

.autumn-launch-pop {
  cursor: pointer;
  z-index: 99;
  position: fixed;
  left: calc(50% - 9vw);
  bottom: calc(50% - 12vw);
  width: 18vw;
  height: 24vw;
  display: none
}

.autumn-launch-pop img {
  width: 100%
}

.autumn-launch-pop .autumn-launch-btn {
  position: absolute;
  bottom: 0;
  left: 50px
}

.autumn-launch-pop .close {
  cursor: pointer;
  width: 16%;
  height: 12%;
  position: absolute;
  bottom: 1%;
  left: 42%
}

.autumnLaunch-pop-end {
  bottom: 30px;
  left: 20px;
  width: 16vw;
  height: auto
}

.pop-animation {
  animation: centerToLeftBottom 1s ease 3s both
}

@keyframes centerToLeftBottom {
  to {
    bottom: 30px;
    left: 50px;
    width: 16vw;
    height: auto
  }
}

.jitter {
  animation: jitter 1s infinite
}

@keyframes jitter {
  20% {
    transform: rotate(-3deg)
  }

  40% {
    transform: rotate(3deg)
  }

  60% {
    transform: rotate(-3deg)
  }

  80% {
    transform: rotate(3deg)
  }

  to {
    transform: rotate(0)
  }
}

.upAndDown {
  animation: upAndDown 1.5s infinite
}

@keyframes upAndDown {
  0% {
    transform: translateY(-5px)
  }

  50% {
    transform: translateY(5px)
  }

  to {
    transform: translateY(-5px)
  }
}

.toRight {
  animation: toRight 1s infinite
}

@keyframes toRight {
  0% {
    transform: translateX(-5px)
  }

  50% {
    transform: translateX(5px)
  }

  to {
    transform: translateX(-5px)
  }
}

.growingToTop {
  animation: growingToTop 1s both
}

@keyframes growingToTop {
  0% {
    height: 0
  }

  to {
    height: 100%
  }
}

.fadeInSBS {
  animation: fadeInSBS 2s both;
  transform-origin: 10% 90%
}

@keyframes fadeInSBS {
  0% {
    transform: scale(.1);
    opacity: 0
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    opacity: 1
  }

  to {
    transform: scaleX(1);
    opacity: 1
  }
}

.animate__delay-250ms {
  animation-delay: .25s !important
}

.animate__delay-500ms {
  animation-delay: .5s !important
}

.animate__delay-1000ms {
  animation-delay: 1s !important
}

.animate__delay-1500ms {
  animation-delay: 1.5s !important
}

.bigAndSmall {
  animation: bigAndSmall 1s both infinite
}

@keyframes bigAndSmall {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05)
  }

  to {
    transform: scaleX(1)
  }
}

.animate__growRightToLeft {
  animation: growLeftToRight 2s both
}

.animate__growLeftToRight {
  animation: growLeftToRight 1s both 1s
}

@keyframes growLeftToRight {
  0% {
    width: 0
  }

  to {
    width: 25vw
  }
}

#hubspot-messages-iframe-newcontainer.widget-align-right {
  display: none !important
}

.tabs-and-crumbs {
  height: 4.375rem;
  position: sticky;
  top: var(--nav-height);
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 .188rem .25rem 0 rgba(0, 0, 0, .06)
}

.tabs-and-crumbs .inside {
  width: 98.75rem;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between
}

.tabs-and-crumbs .inside.justify-end {
  justify-content: flex-end
}

.tabs-and-crumbs .tabs {
  display: flex;
  align-items: stretch;
  justify-content: flex-start
}

.tabs-and-crumbs .tabs li {
  padding: 0 1.875rem;
  list-style: none;
  font-weight: 500;
  color: #666;
  font-size: var(--nav-1st-font-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative
}

.tabs-and-crumbs .tabs li svg {
  font-size: 2.5rem;
  margin-right: .625rem
}

.tabs-and-crumbs .tabs li span {
  color: currentcolor
}

.tabs-and-crumbs .tabs li:not(:first-child):after {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 0;
  height: 60%;
  border-left: 1px solid #ddd
}

.tabs-and-crumbs .tabs li.active {
  background-color: #469bff;
  color: #fff
}

.tabs-and-crumbs .tabs li.active+li:after,
.tabs-and-crumbs .tabs li.active:after {
  content: none
}

.tabs-and-crumbs .tabs li:not(.active):hover {
  color: #469bff
}

.tabs-and-crumbs .tabs--type2 {
  gap: 1.875rem
}

.tabs-and-crumbs .tabs--type2 li {
  padding: 0
}

.tabs-and-crumbs .tabs--type2 li.active {
  background-color: #fff;
  color: #469bff
}

.tabs-and-crumbs .tabs--type2 li.active:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  border-bottom: .25rem solid #469bff;
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto
}

.tabs-and-crumbs .crumbs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
  position: relative
}

.tabs-and-crumbs .crumbs li {
  font-weight: 500;
  color: #666;
  font-size: var(--nav-1st-font-size)
}

.tabs-and-crumbs .crumbs li a {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: none
}

.tabs-and-crumbs .crumbs li a:hover {
  color: #469bff
}

.tabs-and-crumbs .crumbs li:after {
  content: ">";
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  margin-left: .25rem
}

.tabs-and-crumbs .crumbs li:last-of-type:after {
  content: none
}

.tabs-and-crumbs--dark {
  background-color: var(--bg-color, #000)
}

.tabs-and-crumbs--dark .crumbs li,
.tabs-and-crumbs--dark .tabs li {
  color: #fff
}

.download-pop {
  position: relative;
  width: 38.125rem !important;
  will-change: auto
}

.download-pop,
.download-pop * {
  box-sizing: border-box
}

.download-pop-title {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500
}

.download-pop-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.08vw 2.92vw
}

.download-pop-content .img-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 10.875rem
}

.download-pop-content .img-wrap .img-text {
  margin-top: 1.04vw;
  font-size: .83vw;
  color: #333;
  line-height: 1.3;
  font-weight: 500
}

.download-pop-content form .input-icon {
  position: relative;
  margin-bottom: 1.625rem;
  overflow: hidden
}

.download-pop-content form .input-icon input {
  padding-left: 3.13vw;
  width: 29.375rem;
  height: 3rem;
  font-size: 1rem;
  background-color: #fbfbfb;
  box-shadow: inset 0 2px 5px 0 rgba(93, 93, 93, .06);
  border-radius: .375rem;
  border: 1px solid #dcdcdc;
  color: #333
}

.download-pop-content form .input-icon input::placeholder {
  color: #a5a5a5
}

.download-pop-content form .input-icon .icon-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.download-pop-content form .input-icon .icon-wrap svg {
  font-size: 1.625rem;
  color: #666
}

.download-pop-content form .input-icon .icon-wrap:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - .5rem);
  height: 1rem;
  border-left: 1px solid #b0b0b0
}

.download-pop-content form .input-verifycode .captcha-wrap {
  position: absolute;
  left: 1px;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.938rem;
  height: calc(100% - 2px);
  overflow: hidden;
  background-color: transparent
}

.download-pop-content form .input-verifycode .captcha-wrap img {
  width: 100%;
  background-color: transparent
}

.download-pop-content form .input-verifycode .captcha-wrap:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - .5rem);
  height: 1rem;
  border-left: 1px solid #b0b0b0
}

.download-pop-content form .input-verifycode input {
  padding-left: 6.75rem
}

.download-pop-content form .download-pop-btn {
  margin-top: 2.5rem;
  width: 29.375rem;
  height: 3rem;
  border-radius: .375rem;
  background-color: #469bff;
  color: #fff;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease
}

.download-pop-content form .download-pop-btn:hover {
  transform: translateY(-.313rem);
  box-shadow: .313rem .313rem 1.25rem rgba(0, 0, 0, .4)
}

.download-pop-content .submit-success-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17.688rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #666
}

.download-pop-content .submit-success-btn {
  width: 29.375rem;
  height: 3rem;
  border-radius: .375rem;
  background-color: #469bff;
  color: #fff;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer
}

.download-pop-content .submit-success-btn:hover {
  transform: translateY(-.313rem);
  box-shadow: .313rem .313rem 1.25rem rgba(0, 0, 0, .4)
}

.download-pop-inner .close {
  position: absolute;
  right: .875rem;
  top: calc(-4.063rem - 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer
}

.download-pop-inner .close svg {
  font-size: 2.188rem;
  color: #fff
}

.download-pop-inner .close:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 2.75rem;
  border-left: 1px solid #fff
}

.download-pop--img {
  position: relative;
  width: 46.25rem;
  will-change: auto
}

.download-pop--img,
.download-pop--img * {
  box-sizing: border-box
}

.download-pop--img .download-pop-content {
  justify-content: space-between
}

.download-pop--img .download-pop-content form .input-icon input {
  width: 21.25rem
}

.download-pop--img .download-pop-content .download-pop-btn {
  margin-top: 2.5rem;
  width: 21.25rem
}

.download-pop--img .download-pop-content .submit-success-btn {
  width: 21.25rem
}

@media (min-width:2040px) {
  :root {
    font-size: 17px
  }
}

@media (max-width:1800px) {
  :root {
    font-size: 15px
  }
}

@media (max-width:1680px) {
  :root {
    font-size: 14px
  }
}

@media (max-width:1560px) {
  :root {
    font-size: 13px
  }
}

@media (max-width:1440px) {
  :root {
    font-size: 12px
  }
}

@media (max-width:1320px) {
  :root {
    font-size: 11px
  }
}

@media (max-width:1200px) {
  :root {
    font-size: 10px
  }
}

/*! autoprefixer: on */
* {
  font-family: manrope, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, "sans-serif";
  box-sizing: border-box;
  font-size: 14.5px
}

.header-nav .logo {
  width: auto !important
}

.header-nav .logo a {
  white-space: nowrap;
  color: #333;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  position: relative
}

.header-nav .logo a:before {
  content: "";
  border-left: 1px solid #333;
  height: 1.25rem;
  display: block;
  width: 0;
  position: absolute;
  left: -1rem;
  bottom: 0
}

.header-nav .logo a span {
  position: relative;
  top: .125rem
}

.header-nav .logo a:last-of-type {
  margin-left: 1.25rem
}

.header-nav .logo a:hover {
  color: #469bff
}

.header-nav .language a,
.header-nav .language p {
  font-weight: 500 !important
}

.header-nav .language a.active,
.header-nav .language p.active {
  color: #469bff !important
}

.header-nav .language:before {
  content: "";
  width: 1.313rem;
  height: 1.313rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' class='y8cvt8b14__design-iconfont' width='128' height='128'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M7.63 7.6h44.75v44.8H7.63z' fill='%23666'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M29.98 7.63c12.35 0 22.36 10.01 22.36 22.36S42.33 52.35 29.98 52.35 7.62 42.33 7.62 29.99 17.63 7.63 29.98 7.63zm7.41 24.22H22.57c.41 9.51 3.92 16.77 7.41 16.77s7-7.26 7.41-16.77zm-18.55 0h-7.4c.68 6.88 5.11 12.66 11.22 15.27-2.2-3.74-3.58-9.19-3.82-15.27zm29.68 0h-7.4c-.24 6.09-1.62 11.53-3.82 15.27 6.11-2.61 10.53-8.39 11.22-15.27zm-25.87-19l-.21.09c-6 2.65-10.33 8.38-11.01 15.18h7.4c.24-6.09 1.62-11.53 3.82-15.27zm7.32-1.5h-.14c-3.44.19-6.87 7.39-7.27 16.77h14.82c-.41-9.51-3.92-16.77-7.41-16.77zm7.32 1.49l.14.24c2.12 3.73 3.45 9.07 3.68 15.04h7.4c-.68-6.88-5.11-12.66-11.22-15.27zm0 0' fill='%23666'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  display: inline-block;
  margin-right: -1.25rem;
  vertical-align: middle
}

.hero {
  height: 430px;
  background-size: cover;
  background-position: 100%;
  margin-top: -40px;
}

.hero .content {
  width: 1140px;
  margin-left: 100px;
  margin-right: auto;
  padding-top: 110px
}

.hero h1 {
  font-size: 40px;
  color: #333;
  line-height: 1.3;
  margin-bottom: 22.5px;
  font-weight: 600
}

.hero .text {
  font-size: 18px;
  color: #666;
  font-weight: 500;
  line-height: 1.3
}

.hero .search {
  width: 36.25rem;
  height: 3.25rem;
  background-color: #fff;
  border-radius: .5rem;
  border: 1px solid #469bff;
  overflow: hidden;
  margin-top: 3.125rem;
  display: flex;
  align-items: stretch;
  justify-content: flex-end
}

.hero .search input {
  font-size: 1.125rem;
  margin:0;
  color: #333;
  padding: 0 1.25rem;
  height: 100%;
  outline: none;
  flex-grow: 1;
  flex-shrink: 0
}

.hero .search input::placeholder {
  color: #999
}

.hero .search button {
  background-color: #469bff;
  flex-shrink: 0;
  color: #fff;
  width: 4rem;
  height: 100%;
  transition: all .2s
}

.hero .search button svg {
  font-size: 2.125rem
}

.hero .search button:hover {
  background-color: #3392ff
}

.hero .search button:active {
  background-color: #1481ff
}

.hero .newrelease {
  color: #666;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  cursor: pointer;
  margin-top:  80px
}

.hero .newrelease svg {
  font-size: 22px;
  margin-right: 4px
}

.hero .newrelease p {
  margin-bottom: 0;
  font-size: 15px
}

.hero .newrelease .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 17px;
  background-color: #469bff;
  font-size: 11px;
  color: #fff;
  border-radius: 18px;
  border-bottom-left-radius: 0;
  margin-left: 12px
}

.hero .newrelease:hover p {
  color: #469bff
}

.newcontainer {
  padding: 5rem 0 6.25rem;
}

.newcontainer .content {
  width: 1140px;
  margin-left: auto;
  margin-right: auto
}

.newcontainer h2 {
  font-size: 36px;
  text-align: center;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
  margin-bottom: 1rem
}

.newcontainer .text {
  font-size: 16px;
  color: #666;
  text-align: center
}

.newcontainer.documentations .box {
  background-color: #f8f9fa;
  border-radius: 1rem;
  padding: 10px 50px;
  margin-top: 30px
}

.newcontainer.documentations .item {
  padding: 30px 0 30px
}

.newcontainer.documentations .item:not(:last-of-type) {
  border-bottom: 1px solid hsla(0, 0%, 60%, .3)
}

.newcontainer.documentations .item h3 {
  color: #7d7b7b;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  position: relative;
  margin-left: 30px;
  margin-bottom: 18px;
}

.newcontainer.documentations .item h3:after,
.newcontainer.documentations .item h3:before {
  content: "";
  width: 0;
  height: 0;
  border: .438rem solid #469bff;
  display: block;
  border-radius: 50%;
  position: absolute;
  left: -2.125rem;
  top: 50%;
  transform: translateY(-50%)
}

.newcontainer.documentations .item h3:before {
  border-color: #fff;
  border-width: .625rem;
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .25)
}

.newcontainer.documentations .item h3:after {
  left: -1.938rem;
  box-shadow: 0 .063rem .125rem rgba(0, 0, 0, .1)
}

.newcontainer.documentations .newcards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 0
}

.newcontainer.documentations .newcard {
  width: 330px;
  height: 105px;
  border-radius: 8px;
  padding: 13px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  transition: all .3s;
}

.newcontainer.documentations .newcard:after {
  content: "";
  display: block;
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M176.64 541.867h587.093L573.781 731.819a29.867 29.867 0 1 0 42.326 42.325l239.957-239.957a30.037 30.037 0 0 0 0-42.326L616.107 251.904a29.867 29.867 0 0 0-42.326 42.325l189.952 189.952H176.64a28.843 28.843 0 0 0 0 57.686zm0 0' fill='%23469bff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  width: 21px;
  height: 1.75rem;
  bottom: 12px;
  right: 15px;
  opacity: 0;
  transition: inherit;
}

.newcontainer.documentations .newcard__img {
  width: 87px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.newcontainer.documentations .newcard__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 10px;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  transition: inherit;
  color: #212529;
}

.newcontainer.documentations .newcard__title.new:after {
  content: "New";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 13.5px;
  background-color: #469bff;
  font-size: 11px;
  color: #fff;
  border-radius: 14px;
  border-bottom-left-radius: 0;
  position: absolute;
  right: -5px;
  top: 0;
  transform: translateX(100%);
}

.newcontainer.documentations .newcard__text {
  font-size: 14px;
  color: #666;
  line-height: 1.3;
  font-family: Roboto, sans-serif !important;
}

.newcontainer.documentations .newcard--fill {
  visibility: hidden
}

.newcontainer.documentations .newcard:hover {
  background-color: #fff;
  box-shadow: .125rem .5rem 1.25rem 0 rgba(0, 0, 0, .15)
}

.newcontainer.documentations .newcard:hover:after {
  opacity: 1
}

.newcontainer.documentations .newcard:hover .newcard__title {
  color: #469bff
}

.newcontainer.question {
  background-color: #f5f8fb;
  text-align: center
}

.newcontainer.question .newcards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22.5px 180px;
  margin-top: 80px;
  position: relative;
  left: 50px
}

.newcontainer.question .newcards:after {
  content: "";
  border-left: 1px solid #ced0d3;
  width: 0;
  height: 100%;
  position: absolute;
  left: calc(50% - 46.5px);
  top: 0
}

.newcontainer.question .newcard {
  text-align: left;
  width: 405px;
  height: 69px;
  border-radius: 7.5px;
  padding: 0 37.5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}

.newcontainer.question .newcard:before {
  content: "";
  background-image: url(https://www.milesight.com/static/pc/en/docs/en/development-platform/10-question.png?t=1704771623435);
  width: 44px;
  height: 43px;
  display: block;
  background-size: 100% 100%;
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
}

.newcontainer.question .newcard__text {
  line-height: 1.3;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  transition: inherit;
  margin-bottom: 0
}

.newcontainer.question .newcard:hover {
  background-color: #fff;
  box-shadow: .125rem .5rem 1.25rem 0 rgba(0, 0, 0, .15)
}

.newcontainer.question .btn {
  color: #fff !important;
  background-color: #469bff;
  transition: all .2s;
  border-radius: 6px;
  line-height: 1.3;
  /* padding: 0.3em 1em; */
  cursor: pointer;
  font-size: 15px;
  padding: 6px 24px;
  margin-top: 37.5px;
  display: inline-block;
}

.newcontainer.question .btn:hover {
  color: #fff !important;
  background-color: #71afff
}

.newcontainer.question .btn:active {
  color: #fff !important;
  background-color: #2c84ec
}

.newcontainer.question .btn:disabled {
  color: #fff !important;
  background-color: #c1c1c1
}

.newcontainer.more .items {
  gap: 0 90px;
  margin-top: 50px
}

.newcontainer.more .item,
.newcontainer.more .items {
  display: flex;
  align-items: center;
  justify-content: center
}

.newcontainer.more .item {
  width: 324.75px;
  height: 233.25px;
  background-color: #fff;
  border-radius: 7.5px;
  text-align: center;
  flex-direction: column;
  transition: all .3s;
  cursor: pointer;
}

.newcontainer.more .item__title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-top: 10px;
  margin-bottom: 5px;
  transition: inherit
}

.newcontainer.more .item__text {
  font-size: 14px;
  line-height: 1.3;
  color: #666
}

.newcontainer.more .item:hover {
  box-shadow: .125rem .5rem 1.25rem 0 rgba(0, 0, 0, .15)
}

.newcontainer.more .item:hover .item__title {
  color: #469bff
}