/* product page start */
@media screen and (min-width: 769px) {
  .doc-product-home-contain {
    overflow: hidden;
  }
  .doc-home-banner-container {
    position: relative;
    width: 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-image: url('https://staticintl.cloudcachetci.com/portal-document/img/85b8eb6e1ce0ffcedd4b5a0b5e41687716360940381176485.jpg');
  }
}
@media screen and (max-width: 768px) {
  .doc-home-banner-container {
    position: relative;
    width: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://staticintl.cloudcachetci.com/portal-document/img/eaa6beff184dcb866ebcff7d1583752716360945561468116.jpg');
  }
}
/* product page end */
/* Catalogue component start */
@media screen and (min-width: 769px) {
  .doc-home-catalogue-container {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    padding: 0 24px 120px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-top: 80px;
    min-height: calc(100vh - 548px);
    overflow: hidden;
  }
  .doc-home-catalogue-container .doc-home-category {
    margin-right: 48px;
    display: flex;
  }
  .doc-home-catalogue-container .doc-home-catalogue-content {
    float: right;
    box-sizing: border-box;
    width: calc(100% - 354px);
  }
  .doc-home-catalogue-container .doc-home-catalogue-content-title {
    font-size: 24px;
    margin-bottom: 24px;
    color: #000000;
  }
  .doc-home-catalogue-container .doc-home-catalogue-content-card {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }
  .doc-home-catalogue-container .doc-home-catalogue-content-card .doc-home-catalogue-card-main {
    padding-right: 24px;
    width: 33.333%;
  }
  .doc-home-catalogue-container .doc-home-catalogue-content-card .doc-home-catalogue-card-main:nth-child(3n) {
    padding-right: 0;
  }
  .doc-home-catalogue-container .doc-home-catalogue-content-card .doc-home-catalogue-card-main:nth-child(n+4) {
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  .doc-home-catalogue-container {
    padding-bottom: 62px;
  }
  .doc-home-catalogue-content {
    margin: 0 24px 24px;
  }
  .doc-home-catalogue-m-expend {
    padding-top: 40px;
  }
  .doc-home-catalogue-content-title {
    padding-left: 32px;
    position: relative;
    font-size: 16px;
    margin-bottom: 17px;
  }
  .doc-home-catalogue-m-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    background-position: top left;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .doc-home-catalogue-card-main {
    padding-bottom: 24px;
  }
  .doc-home-catalogue-card-main:last-child {
    padding-bottom: 0;
  }
}
/* Catalogue component end */
/* CatalogueCard component start */
.doc-home-catalogue-card {
  width: 100%;
  padding: 32px 25px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
  height: 100%;
  min-height: 164px;
  color: #000000;
}
.doc-home-catalogue-card-title {
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 18px;
}
.doc-home-catalogue-card-sub-title {
  font-size: 14px;
}
.doc-home-catalogue-card-sub-title div {
  margin-bottom: 12px;
}
.doc-home-catalogue-card-sub-title div:last-child {
  margin-bottom: 0;
}
.doc-home-catalogue-card-link {
  color: inherit;
}
.doc-home-catalogue-card-link:hover {
  color: #006eff;
}
.doc-home-catalogue-card-bg {
  width: 160px;
  height: 160px;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: all 0.2s;
}
.doc-home-catalogue-card-bg.is-leave {
  opacity: 0;
}
.doc-home-catalogue-card-bg.is-enter {
  opacity: 1;
}
.doc-home-catalogue-card-bg img {
  width: 100%;
  height: 100%;
}
/* CatalogueCard component end */
/* CatalogueNav component start */
@media screen and (min-width: 769px) {
  .doc-mobile-home-catalogue {
    display: none;
  }
  .doc-home-catalogue {
    display: flex;
    position: relative;
    float: left;
    box-sizing: border-box;
    height: 100%;
  }
  .doc-home-catalogue.fixed {
    position: fixed;
    top: 24px;
    bottom: 0;
    z-index: 9;
  }
  .doc-home-catalogue.fixed .doc-home-catalogue > div {
    background: #fff;
  }
  .doc-home-catalogue-inner {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
  }
  .doc-home-catalogue-inner::-webkit-scrollbar {
    width: 6px;
    height: 17px;
    background: 0 0;
    border-radius: 9px;
  }
  .doc-home-catalogue-inner::-webkit-scrollbar-thumb {
    box-shadow: 8px 0 0 rgba(0, 0, 0, 0.3) inset;
    border: 6px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
  }
  .doc-home-catalogue .doc-home-catalogue-list {
    margin-bottom: 24px;
  }
  .doc-home-catalogue .doc-home-catalogue-list.active .doc-home-catalogue-img {
    opacity: 1;
  }
  .doc-home-catalogue .doc-home-catalogue-img {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.4;
  }
  .doc-home-catalogue .doc-home-catalogue-link:hover .doc-home-catalogue-img {
    opacity: 0;
  }
  .doc-home-catalogue .doc-home-catalogue-link:hover .doc-home-catalogue-hover {
    opacity: 1;
  }
  .doc-home-catalogue .doc-home-catalogue-hover {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
  }
  .doc-home-catalogue .doc-home-catalogue-hover.is-enter {
    -webkit-animation: tpm-product-marquee-icon-enter 0.8s steps(24) forwards;
    animation: tpm-product-marquee-icon-enter 0.8s steps(24) forwards;
  }
  .doc-home-catalogue .doc-home-catalogue-hover.is-leave {
    -webkit-animation: tpm-product-marquee-icon-leave 0.8s steps(24) forwards;
    animation: tpm-product-marquee-icon-leave 0.8s steps(24) forwards;
  }
  @-webkit-keyframes tpm-product-marquee-icon-enter {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: 0 -1152px;
    }
  }
  @keyframes tpm-product-marquee-icon-enter {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: 0 -1152px;
    }
  }
  @-webkit-keyframes tpm-product-marquee-icon-leave {
    0% {
      background-position: 0 -1152px;
    }
    to {
      background-position: 0 0;
    }
  }
  @keyframes tpm-product-marquee-icon-leave {
    0% {
      background-position: 0 -1152px;
    }
    to {
      background-position: 0 0;
    }
  }
  .doc-home-catalogue-link {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
  }
  .doc-home-catalogue-icon {
    margin-right: 12px;
    position: relative;
    width: 48px;
    height: 48px;
  }
  .doc-home-catalogue-icon span {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-size: 100% 100%;
  }
  .doc-home-catalogue-hover {
    position: absolute;
    left: 0;
    top: 0;
  }
  .doc-home-catalogue-title {
    width: 246px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 768px) {
  .doc-home-catalogue {
    display: none;
  }
  .doc-mobile-home-catalogue {
    position: fixed;
    left: 0;
    right: 0;
    top: -72px;
    z-index: 99;
    transition: transform 0.1s;
    transform: translate(0, 0px);
  }
  .m-catalogue-fixed {
    transform: translate(0, 72px);
  }
  .doc-mobile-home-nav {
    width: 100%;
    height: 56px;
    background: #12181f;
    cursor: pointer;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .doc-mobile-home-nav-expend {
    transition: all 2.3s ease-in-out;
  }
  .doc-mobile-home-nav-current {
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 24px;
  }
  .doc-home-catalogue-title {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0;
    line-height: 24px;
    overflow: hidden;
    display: -webkit-box;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-wrap: break-word;
    padding-right: 24px;
  }
  .doc-mobile-home-nav-expend-hidden {
    display: none;
  }
  .doc-mobile-home-nav-expend-show {
    display: block;
  }
  .doc-mobile-home-nav-icon svg {
    width: 10px;
    height: 6px;
  }
  .doc-mobile-home-nav-icon-expend svg {
    transform: rotate(180deg);
  }
  .doc-mobile-home-nav-hover {
    background: #131d24;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #ffffff;
    height: 46px;
  }
  .active {
    color: #006eff !important;
  }
}
/* CatalogueNav component end */
/* SearchBanner component start */
@media screen and (min-width: 769px) {
  .doc-header-banner-inner {
    margin: 0 auto;
    position: relative;
    min-width: 320px;
    max-width: 1440px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .doc-header-banner-inner .doc-header-banner-left {
    font-size: 18px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.6);
  }
  .doc-header-banner-inner .doc-header-banner-left .doc-header-banner-title {
    font-size: 40px;
    line-height: 56px;
    color: #000000;
    margin-bottom: 12px;
  }
  .doc-header-banner-inner .doc-header-banner-bg-img {
    height: 432px;
    width: 640px;
    margin-right: -64px;
  }
  .doc-header-banner-inner .doc-header-banner-content .doc-header-banner-title {
    font-size: 40px;
    line-height: 56px;
    color: #000000;
  }
  .doc-header-banner-inner .doc-header-banner-content .doc-header-banner-desc {
    padding-top: 12px;
    font-size: 18px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
  }
}
@media screen and (max-width: 768px) {
  .doc-header-banner-inner {
    position: relative;
    box-sizing: border-box;
    height: 384px;
  }
  .doc-header-banner-inner .doc-header-banner-left {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px 24px;
    font-size: 16px;
  }
  .doc-header-banner-inner .doc-header-banner-left .doc-header-banner-title {
    line-height: 32px;
    font-size: 24px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .doc-header-banner-inner .doc-header-banner-bg-img {
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    height: 254px;
    transform: translateX(-50%);
    object-fit: cover;
    width: 100%;
  }
  .doc-header-banner-inner .doc-header-banner-content {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px 24px;
    z-index: 10;
  }
  .doc-header-banner-inner .doc-header-banner-content .doc-header-banner-title {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: #000000;
  }
  .doc-header-banner-inner .doc-header-banner-content .doc-header-banner-desc {
    padding-top: 8px;
    font-size: 16px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
  }
}
/* SearchBanner component end */
/* BgAnimation component start */
.doc-home-banner-logo {
  width: 640px;
  height: 432px;
  overflow: hidden;
  position: relative;
  transform-origin: 0 50%;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transition: all 0.5s;
  transform: scale(1) translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .doc-home-banner-logo {
    transform-origin: 0 0;
    transform: scale(0) translate(-50%, -50%);
  }
}
.doc-home-banner-logo-bg {
  display: block;
  width: 350px;
  height: 296px;
  background-image: url('https://staticintl.cloudcachetci.com/portal-document/img/bPIp904_04.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-46%);
  z-index: 2;
}
.doc-home-banner-logo-bg.is-enter {
  animation: doc-banner-animation 1.5s steps(36) infinite;
}
@keyframes doc-banner-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -10656px;
  }
}
.doc-home-banner-logo .img-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.doc-home-banner-logo .img-bg2 {
  position: absolute;
  top: 11px;
  left: 204px;
  z-index: 1;
  animation: play-img-scale 1.5s infinite;
}
.doc-home-banner-logo .img-bg3 {
  position: absolute;
  top: 101px;
  left: 89px;
  animation: play-img 1.5s infinite;
}
@keyframes play-img-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes play-img {
  0% {
    top: 101px;
  }
  50% {
    top: 106px;
  }
  100% {
    top: 101px;
  }
}
/* BgAnimation component end */
/* SearchBar component start */
@media screen and (min-width: 769px) {
  .doc-header-banner-search {
    position: relative;
    width: 617px;
    max-width: 100%;
    text-align: left;
    z-index: 10;
  }
  .doc-header-banner-search .doc-header-banner-search-bar {
    margin-top: 36px;
    position: relative;
    font-size: 0;
    white-space: nowrap;
  }
  .doc-header-banner-search .doc-header-banner-search-input {
    padding: 13px 12px 13px 36px;
    color: rgba(0, 0, 0, 0.8);
    height: 48px;
    line-height: 22px;
    font-size: 16px;
    display: block;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    box-shadow: none;
    -webkit-appearance: none;
  }
  .doc-header-banner-search .doc-header-banner-search-input:hover {
    border-color: #006eff;
  }
  .doc-header-banner-search .doc-header-banner-search-tip {
    margin-top: 11px;
    text-align: left;
    display: block;
    line-height: 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    zoom: 1;
  }
  .doc-header-banner-search .doc-header-banner-search-tip .tip-list {
    margin-right: -12px;
  }
  .doc-header-banner-search .doc-header-banner-search-tip .tip-list .tip-item {
    margin-right: 12px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border-radius: 4px;
  }
  .doc-header-banner-search .doc-header-banner-search-tip .tip-list .tip-item .tip-link {
    display: inline-block;
    padding: 0 8px;
    line-height: 32px;
    height: 32px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
  }
  .doc-header-banner-search .doc-header-banner-search-tip .tip-list .tip-item .tip-link:hover {
    background: #c2ddff;
    color: #006eff;
  }
  .doc-header-banner-search .doc-search-result {
    display: block;
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    color: #ffffff;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 110, 255, 0.1);
    z-index: 2;
  }
  .doc-header-banner-search .doc-search-result .doc-search-list {
    max-height: 300px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .doc-header-banner-search .doc-search-result .doc-search-list .item-link {
    display: block;
    padding: 6px 20px;
    line-height: 20px;
    font-size: 14px;
    color: #000000;
  }
  .doc-header-banner-search .doc-search-result .doc-search-list .doc-search-item.actived .item-link {
    background: #eff6ff;
    color: #006EFF;
  }
  .doc-header-banner-search .doc-search-result .c-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 12px;
    background-color: #ffffff;
  }
  .doc-header-banner-search .doc-search-result .c-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  .doc-header-banner-search .doc-search-result .c-scrollbar::-webkit-scrollbar-track {
    background-color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .doc-header-banner-search {
    width: 100%;
    position: relative;
  }
  .doc-header-banner-search .doc-header-banner-search-tip {
    display: none;
  }
  .doc-header-banner-search .doc-search-result {
    display: block;
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    color: #ffffff;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 110, 255, 0.1);
  }
  .doc-header-banner-search .doc-search-result .doc-search-list {
    max-height: 300px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .doc-header-banner-search .doc-search-result .doc-search-list .item-link {
    display: block;
    padding: 6px 20px;
    line-height: 20px;
    font-size: 14px;
    color: #000000;
  }
  .doc-header-banner-search .doc-search-result .doc-search-list .doc-search-item.actived .item-link {
    background: #eff6ff;
    color: #006EFF;
  }
  .doc-header-banner-search .doc-search-result .c-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 12px;
    background-color: #ffffff;
  }
  .doc-header-banner-search .doc-search-result .c-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  .doc-header-banner-search .doc-search-result .c-scrollbar::-webkit-scrollbar-track {
    background-color: #ffffff;
  }
}
/* SearchBar component end */
/* SearchInput component start */
@media screen and (min-width: 769px) {
  .doc-header-banner-search-bar {
    margin-top: 36px;
    cursor: pointer;
  }
}
@media screen and (max-width: 768px) {
  .doc-header-banner-search-bar {
    margin-top: 16px;
  }
}
.doc-header-banner-search-bar {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.doc-header-banner-search-input {
  padding: 13px 12px 13px 36px;
  color: rgba(0, 0, 0, 0.8);
  height: 48px;
  line-height: 22px;
  font-size: 16px;
  display: block;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: none;
  -webkit-appearance: none;
}
.doc-header-banner-search-input:hover {
  border-color: #006eff;
}
.doc-header-banner-search-btn {
  width: 36px;
  height: 48px;
  line-height: 48px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: 0 0;
  border-radius: 0;
  outline: 0;
  border: none;
  text-indent: -10000px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* SearchInput component end */