@charset "UTF-8";
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  /*滚动条宽度*/
  height: 5px;
  /*滚动条高度*/ }

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #222;
  border-radius: 10px;
  /*滚动条的背景区域的圆角*/
  background-color: rgba(255, 255, 255, 0.4);
  /*滚动条的背景颜色*/ }

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px #333;
  background-color: #000;
  /*滚动条的背景颜色*/ }

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: "微软雅黑"; }

input, select {
  outline: none;
  border: none; }

[v-cloak] {
  display: none; }

body, html {
  min-height: 100%;
  min-width: 1240px; }

@keyframes menu_ani {
  to {
    opacity: 1;
    transform: translate(0, 0); } }
@keyframes account_ani {
  to {
    opacity: 1;
    height: auto;
    transform: translate(0, 0) scale(1); } }
@keyframes shadow_box_ani {
  100% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7); } }
@keyframes shadow_ani {
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1); } }
@keyframes sub_list_ani {
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1); } }
@keyframes search_ani {
  100% {
    opacity: 1;
    transform: translate(0, 0);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.7); } }
.overflow {
  overflow: hidden;
  transition: ease all .3s; }

.show_menu {
  animation: menu_ani linear .6s forwards; }

.text_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.fullHeight {
  height: 100% !important; }

#HBS_nav {
  position: relative;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  height: 65px;
  background: #2e3036;
  z-index: 1000; }
  #HBS_nav .HBS_nav_wrapper {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    vertical-align: middle;
    min-width: 1240px;
    margin: 0 auto;
    padding: 0 5%;
    font-size: 0; }
    #HBS_nav .HBS_nav_wrapper .nav_box {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      box-sizing: border-box;
      height: 100%;
      line-height: 65px; }
      #HBS_nav .HBS_nav_wrapper .nav_box a {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        vertical-align: middle;
        text-decoration: none;
        color: #fff;
        font-size: 14px; }
        #HBS_nav .HBS_nav_wrapper .nav_box a img {
          vertical-align: middle; }
      #HBS_nav .HBS_nav_wrapper .nav_box .icon_box {
        line-height: 65px; }
        #HBS_nav .HBS_nav_wrapper .nav_box .icon_box img {
          height: 15px;
          width: auto;
          vertical-align: middle; }
    #HBS_nav .HBS_nav_wrapper .nav_list_box {
      box-sizing: border-box;
      width: calc(100% - 680px  ); }
      #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list {
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        max-width: 700px;
        margin: 0 auto;
        font-size: 0;
        text-align: center; }
        #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li {
          position: relative;
          display: inline-block;
          height: 100%;
          width: 16.666%;
          box-sizing: border-box; }
          #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li a.nav_link {
            display: block;
            height: 100%;
            color: #fff;
            text-decoration: none;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box; }
          #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li:hover a.nav_link {
            background: #535f75;
            color: #fff; }
          #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box {
            position: fixed;
            left: 0;
            top: 65px;
            z-index: 1000;
            width: 100%;
            box-sizing: border-box;
            min-width: 1240px;
            min-height: 465px;
            padding: 0 0 38% 0;
            transform: scale(1, 0);
            transform-origin: top center;
            opacity: 0;
            background: #fff; }
            #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              box-sizing: border-box;
              height: 97%;
              transform: translate(0, -50px);
              box-shadow: 0 0 18px #333;
              opacity: 0; }
              #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .menu_title {
                width: 100%;
                box-sizing: border-box;
                line-height: 60px;
                box-sizing: border-box;
                text-align: center;
                margin: 0;
                padding: 5px 4%; }
                #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .menu_title span.swiper-pagination-switch {
                  margin: 0;
                  padding: 0 20px;
                  display: inline-block;
                  vertical-align: top;
                  border-bottom: 3px solid #fff;
                  box-sizing: border-box;
                  font-size: 16px;
                  letter-spacing: .5px;
                  cursor: pointer; }
                  #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .menu_title span.swiper-pagination-switch:hover a {
                    color: #535f75; }
                  #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .menu_title span.swiper-pagination-switch a {
                    color: #8b96a0; }
                #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .menu_title span.swiper-active-switch {
                  border-bottom: 3px solid #535f75; }
                  #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .menu_title span.swiper-active-switch a {
                    color: #535f75; }
              #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box {
                width: 100%;
                box-sizing: border-box;
                min-height: 100%;
                background: url(https://www.hubsan.com/support/loading.gif);
                background-repeat: no-repeat;
                background-position: center top;
                background-size: 25px auto;
                padding: 0 4%; }
                #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul {
                  width: 100%;
                  box-sizing: border-box;
                  font-size: 0;
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  background: #fff;
                  text-align: left; }
                  #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul li {
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: middle;
                    width: 16.666%;
                    padding: 5px 5px; }
                    #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul li .product_box {
                      width: 100%;
                      box-sizing: border-box; }
                      #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul li .product_box a {
                        display: block;
                        width: 100%;
                        box-sizing: border-box;
                        text-decoration: none;
                        color: #535f75; }
                        #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul li .product_box a .pic {
                          width: 100%;
                          box-sizing: border-box;
                          padding-bottom: 70%;
                          background-repeat: no-repeat;
                          background-position: center center;
                          background-size: contain;
                          overflow: hidden; }
                        #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul li .product_box a .info {
                          font-size: 12px;
                          text-align: center; }
                          #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li .menu_box #menuSwiper .box ul li .product_box a .info p {
                            height: 20px;
                            line-height: 20px;
                            margin: 0;
                            padding: 0; }
          #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li:hover .menu_box {
            overflow: hidden;
            opacity: 1;
            transform: scale(1); }
            #HBS_nav .HBS_nav_wrapper .nav_list_box .nav_list li:hover .menu_box #menuSwiper {
              animation: menu_ani ease .4s forwards; }
    #HBS_nav .HBS_nav_wrapper .logo {
      width: 100px;
      text-align: left; }
      #HBS_nav .HBS_nav_wrapper .logo a img {
        width: 100%;
        height: auto; }
    #HBS_nav .HBS_nav_wrapper .country_box {
      position: relative;
      width: 250px;
      height: 100%;
      text-align: center;
      font-size: 11px;
      color: #ddd;
      text-align: left; }
      #HBS_nav .HBS_nav_wrapper .country_box a#hbs-appear-lanarea {
        position: absolute;
        right: 0;
        width: 200px;
        padding-left: 5px;
        color: #00b2bf;
        font-weight: bold;
        background: #2e3036; }
        #HBS_nav .HBS_nav_wrapper .country_box a#hbs-appear-lanarea:hover {
          transition: ease all .3s;
          width: 100%; }
    #HBS_nav .HBS_nav_wrapper .search_box {
      width: 50px;
      text-align: center; }
    #HBS_nav .HBS_nav_wrapper .cart_box {
      width: 50px;
      text-align: center; }
    #HBS_nav .HBS_nav_wrapper .account_box {
      width: 50px;
      text-align: center; }
      #HBS_nav .HBS_nav_wrapper .account_box .account_list_wrapper {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height: 100%; }
        #HBS_nav .HBS_nav_wrapper .account_box .account_list_wrapper .account_list {
          display: none;
          position: absolute;
          right: 0;
          z-index: 1000;
          width: 200px;
          opacity: 0;
          height: 0;
          transform-origin: 100% 0;
          transform: translate(0, -20px) scale(0);
          box-sizing: border-box;
          background: #2e3036;
          height: auto;
          border-bottom-right-radius: 5px;
          border-bottom-left-radius: 5px;
          overflow: hidden; }
          #HBS_nav .HBS_nav_wrapper .account_box .account_list_wrapper .account_list li {
            width: 100%;
            box-sizing: border-box;
            height: 45px; }
            #HBS_nav .HBS_nav_wrapper .account_box .account_list_wrapper .account_list li a {
              display: block;
              line-height: 45px;
              color: #fff;
              text-decoration: none;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap; }
            #HBS_nav .HBS_nav_wrapper .account_box .account_list_wrapper .account_list li:hover {
              background: #000; }
        #HBS_nav .HBS_nav_wrapper .account_box .account_list_wrapper:hover .account_list {
          display: block;
          animation: account_ani ease .3s forwards; }
    #HBS_nav .HBS_nav_wrapper .shadow_box {
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50000;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      animation: shadow_box_ani ease .3s forwards; }
    #HBS_nav .HBS_nav_wrapper .shadow {
      box-sizing: border-box;
      opacity: 0;
      position: fixed;
      z-index: 51000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8, 0.8);
      animation: shadow_ani ease .5s forwards;
      box-shadow: 0 0 18px rgba(0, 0, 0, 0.8); }
    #HBS_nav .HBS_nav_wrapper .area_chose_shadow {
      height: 90%;
      width: 75%;
      min-width: 1100px;
      min-height: 800px;
      box-sizing: border-box;
      background: #222 !important;
      overflow: hidden; }
      #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container {
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        padding: 10px 20px;
        overflow: hidden; }
        #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .search_wrapper {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0 35px 0; }
          #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .search_wrapper .search {
            width: 80%;
            margin: 0 auto;
            box-sizing: border-box; }
            #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .search_wrapper .search input {
              display: block;
              width: 100%;
              height: 45px;
              line-height: 45px;
              margin: 0 auto;
              padding: 0 10px;
              text-align: center;
              background: #eee;
              border: none;
              outline: none;
              color: #535f75;
              border-radius: 5px;
              font-size: 18px; }
        #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .tip {
          padding-bottom: 30px; }
          #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .tip h1 {
            text-align: center;
            font-size: 35px;
            padding: 15px 0 10px 0;
            color: #ccc; }
          #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .tip p {
            text-align: center;
            color: #777; }
        #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box {
          width: 100%;
          box-sizing: border-box;
          padding: 10px 10px 10px 10px;
          max-height: 600px;
          overflow: auto; }
          #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section {
            width: 100%;
            box-sizing: border-box; }
            #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section h3 {
              margin: 15px 0 10px;
              color: #fff;
              font-size: 20px;
              font-weight: lighter; }
            #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section ul.country_list {
              width: 100%;
              box-sizing: border-box;
              font-size: 0; }
              #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section ul.country_list li {
                display: inline-block;
                box-sizing: border-box;
                vertical-align: top;
                width: 25%;
                padding: 5px 5px; }
                #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section ul.country_list li a {
                  display: block;
                  width: 100%;
                  line-height: 44px;
                  background: #333;
                  color: #ccc;
                  font-size: 14px;
                  text-transform: capitalize;
                  border-radius: 3px;
                  cursor: pointer; }
                  #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section ul.country_list li a span.title {
                    padding-left: 10px;
                    font-size: 13px; }
                  #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section ul.country_list li a span.lang {
                    color: #aaa;
                    float: right;
                    padding-right: 10px;
                    font-size: 11px; }
                  #HBS_nav .HBS_nav_wrapper .area_chose_shadow #area_container .area_section_box .area_section ul.country_list li a:hover span {
                    color: #00b2bf; }
    #HBS_nav .HBS_nav_wrapper .search_shadow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      height: auto;
      max-height: 750px;
      background: #fff;
      z-index: 50000;
      transform: translate(0, -100px);
      opacity: 0;
      animation: search_ani ease .4s forwards;
      transition: height ease .4s; }
      #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        height: 100%;
        min-width: 1240px;
        padding: 30px 0; }
        #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_input_box {
          width: 100%;
          box-sizing: border-box;
          padding: 10px 10px 10px 10px; }
          #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_input_box .input_wrapper {
            width: 80%;
            margin: 0 auto;
            box-sizing: border-box;
            display: table;
            table-layout: fixed;
            border-radius: 10px;
            border: 1px solid #ccc;
            padding: 5px; }
            #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_input_box .input_wrapper span {
              display: table-cell;
              vertical-align: middle; }
            #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_input_box .input_wrapper span.s1 input {
              display: block;
              width: 100%;
              height: 45px;
              line-height: 45px;
              text-align: center;
              font-size: 18px;
              color: #535f75;
              font-weight: bold; }
            #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_input_box .input_wrapper span.s2 {
              width: 50px;
              text-align: center;
              background-image: url(https://www.hubsan.com/support/icons/search_ac.png);
              background-size: 25px auto;
              background-repeat: no-repeat;
              background-position: center center;
              cursor: pointer; }
          #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_input_box .search_ac {
            border-color: #00b2bf; }
        #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box {
          width: 100%;
          box-sizing: border-box;
          margin: 0 auto;
          padding: 0px 10px 10px 10px;
          height: calc(100% - 80px);
          min-height: 400px; }
          #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            height: 100%; }
            #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .msg_box {
              width: 100%;
              box-sizing: border-box;
              height: 60px;
              line-height: 60px;
              text-align: center; }
              #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .msg_box span {
                width: 100%;
                display: inline-block;
                vertical-align: middle;
                font-size: 25px; }
              #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .msg_box span.failed {
                color: #ccc; }
              #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .msg_box span.success {
                color: #535f75; }
            #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box {
              width: 100%;
              box-sizing: border-box;
              padding: 0  0 0 5px;
              height: 100%;
              overflow: auto; }
              #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .loadding_box {
                width: 100%;
                box-sizing: border-box;
                height: 100px;
                background: url(https://www.hubsan.com/support/loading.gif);
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 25px auto; }
              #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list {
                width: 80%;
                box-sizing: border-box;
                margin: 0 auto;
                background: #fff; }
                #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li {
                  width: 100%;
                  box-sizing: border-box;
                  border: 1px solid #ccc;
                  border-bottom: 0; }
                  #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li:last-child {
                    border-bottom: 1px solid #ccc; }
                  #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper {
                    display: table;
                    table-layout: fixed;
                    width: 100%;
                    box-sizing: border-box;
                    height: 100px;
                    padding: 5px 5px;
                    font-size: 0;
                    position: relative; }
                    #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item {
                      display: table-cell;
                      vertical-align: middle; }
                      #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item .pic {
                        display: inline-block;
                        vertical-align: middle;
                        width: 90px;
                        height: 100%;
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-color: #fff; }
                        #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item .pic:hover {
                          transition: ease all .2s .2s;
                          transform-origin: left top;
                          transform: scale(2.5, 2.5);
                          box-shadow: 0 0 12px #535f7f;
                          position: relative;
                          z-index: 12000; }
                      #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item .title {
                        width: 300px;
                        font-size: 16px;
                        font-weight: bold;
                        color: #535f75; }
                      #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item .type {
                        font-size: 16px;
                        color: #ccc;
                        text-transform: uppercase;
                        font-weight: bold;
                        text-align: center; }
                      #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item .title, #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper a.main_item .type {
                        display: inline-block;
                        vertical-align: middle;
                        box-sizing: border-box;
                        padding: 8px 15px;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap; }
                    #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper .sublist {
                      display: table-cell;
                      vertical-align: middle;
                      width: 350px;
                      vertical-align: middle;
                      box-sizing: border-box;
                      text-align: left;
                      font-size: 0; }
                      #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper .sublist span.sublist_item {
                        display: inline-block;
                        padding: 5px 5px;
                        text-align: center;
                        font-size: 13px; }
                        #HBS_nav .HBS_nav_wrapper .search_shadow .search_shadow_box .search_result_box .result_wrapper .list_box .result_list li .box_wrapper .sublist span.sublist_item a {
                          color: #535f75;
                          text-decoration: none; }
      #HBS_nav .HBS_nav_wrapper .search_shadow .close_btn {
        position: absolute;
        z-index: 51000;
        top: 20px;
        right: 10px;
        width: 80px;
        height: 80px;
        box-sizing: border-box;
        text-align: center;
        color: #535f75;
        font-size: 12px;
        cursor: pointer; }
        #HBS_nav .HBS_nav_wrapper .search_shadow .close_btn:hover {
          color: #00b2bf; }

#HBS_page {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: #f8f8f8; }
  #HBS_page .container {
    width: 100%;
    min-width: 1240px;
    box-sizing: border-box;
    margin: 0 auto; }
    #HBS_page .container .banner_box {
      position: relative;
      width: 100%;
      box-sizing: border-box; }
      #HBS_page .container .banner_box .lazy_box {
        position: absolute;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        text-align: center; }
        #HBS_page .container .banner_box .lazy_box img {
          width: 100%;
          height: auto; }
        #HBS_page .container .banner_box .lazy_box img.lazyBanner {
          width: 25px; }
      #HBS_page .container .banner_box #bannerTop {
        opacity: 0;
        max-height: 670px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        transition: opacity ease .3s; }
        #HBS_page .container .banner_box #bannerTop .swiper-wrapper {
          height: 100%; }
          #HBS_page .container .banner_box #bannerTop .swiper-wrapper .swiper-slide {
            width: 100%;
            box-sizing: border-box; }
            #HBS_page .container .banner_box #bannerTop .swiper-wrapper .swiper-slide a {
              position: relative;
              width: 100%;
              box-sizing: border-box;
              display: block;
              text-align: center; }
              #HBS_page .container .banner_box #bannerTop .swiper-wrapper .swiper-slide a img {
                width: 100%;
                height: auto;
                position: relative; }
        #HBS_page .container .banner_box #bannerTop .pagination {
          position: absolute;
          width: 100%;
          box-sizing: border-box;
          bottom: 0;
          z-index: 1000;
          text-align: center;
          height: 30px; }
          #HBS_page .container .banner_box #bannerTop .pagination .swiper-pagination-switch {
            display: inline-block;
            vertical-align: top;
            width: 100px;
            border-top: 2px solid #535f75;
            padding: 0 0 15px 0;
            margin: 0 5px;
            background: transparent;
            cursor: pointer; }
          #HBS_page .container .banner_box #bannerTop .pagination .swiper-active-switch {
            border-top: 2px solid #ffffff; }
    #HBS_page .container .hot_box {
      position: relative;
      width: 65%;
      min-width: 960px;
      overflow: hidden;
      box-sizing: border-box;
      margin: 0 auto; }
      #HBS_page .container .hot_box h1 {
        box-sizing: border-box;
        height: 120px;
        line-height: 120px;
        padding: 0;
        margin: 0;
        text-decoration: none;
        color: #535f75;
        font-size: 20px;
        font-weight: normal; }
        #HBS_page .container .hot_box h1 a {
          vertical-align: top; }
      #HBS_page .container .hot_box .lazy_box {
        position: absolute;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        height: 400px;
        line-height: 400px;
        text-align: center; }
        #HBS_page .container .hot_box .lazy_box img {
          width: 25px;
          height: auto; }
      #HBS_page .container .hot_box #bannerHot {
        opacity: 0;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        max-height: 400px;
        color: #535f75;
        transition: opacity ease .4s;
        background: url(https://www.hubsan.com/na/includes/templates/whitetemp_0517/images/hard_03.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto; }
        #HBS_page .container .hot_box #bannerHot .swiper-wrapper {
          box-sizing: border-box; }
          #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide {
            width: 100%;
            box-sizing: border-box; }
            #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a {
              width: 100%;
              box-sizing: border-box;
              display: block;
              overflow: hidden;
              position: relative;
              color: #535f75; }
              #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .pic {
                width: 100%;
                box-sizing: border-box;
                text-align: right; }
                #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .pic img {
                  width: 80%;
                  height: auto;
                  vertical-align: top; }
              #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info {
                position: absolute;
                width: 25%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%); }
                #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .title {
                  width: 100%;
                  box-sizing: border-box;
                  font-weight: bolder; }
                  #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .title p {
                    padding: 3px 0;
                    margin: 0;
                    font-size: 14px;
                    text-align: center; }
                #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .price {
                  width: 100%;
                  box-sizing: border-box;
                  padding-top: 20px;
                  text-align: center;
                  font-weight: bold;
                  font-size: 20px;
                  font-weight: bolder; }
                #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .icon_list {
                  width: 80px;
                  margin: 0 auto;
                  box-sizing: border-box;
                  padding-top: 20px;
                  font-size: 12px; }
                  #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .icon_list .icon_box {
                    position: relative;
                    width: 100%;
                    box-sizing: border-box;
                    padding: 5px 0;
                    text-align: center; }
                    #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .icon_list .icon_box span.icon {
                      display: inline-block;
                      vertical-align: middle;
                      width: 50px;
                      text-align: center; }
                      #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .icon_list .icon_box span.icon img {
                        vertical-align: middle;
                        width: 25px;
                        height: auto; }
                    #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .icon_list .icon_box span.intro {
                      position: absolute;
                      left: 70px;
                      top: 50%;
                      opacity: 0;
                      transform: translate(0, -50%) scale(0, 1);
                      width: 230px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      text-align: left;
                      vertical-align: middle; }
                  #HBS_page .container .hot_box #bannerHot .swiper-wrapper .swiper-slide a .info .icon_list:hover span.intro {
                    opacity: 1;
                    transform-origin: left 0;
                    transform: translate(0, -50%) scale(1, 1);
                    transition: ease all .4s; }
    #HBS_page .container .section_box {
      width: 65%;
      min-width: 960px;
      box-sizing: border-box;
      margin: 0 auto;
      padding-bottom: 80px; }
      #HBS_page .container .section_box .box_wrapper {
        width: 100%;
        box-sizing: border-box; }
        #HBS_page .container .section_box .box_wrapper h1 {
          box-sizing: border-box;
          height: 120px;
          line-height: 120px;
          padding: 0;
          margin: 0; }
          #HBS_page .container .section_box .box_wrapper h1 a {
            display: inline;
            vertical-align: top;
            text-decoration: none;
            color: #535f75;
            font-size: 20px;
            font-weight: normal; }
        #HBS_page .container .section_box .box_wrapper .product_list_wrapper {
          width: 100%;
          box-sizing: border-box;
          padding: 10px 0; }
          #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list {
            width: 100%;
            box-sizing: border-box;
            padding: 0;
            font-size: 0; }
            #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list .lazy > a > .pic > img {
              width: 25px;
              opacity: 0.9; }
            #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li {
              display: inline-block;
              box-sizing: border-box;
              width: 25%;
              padding: 5px 5px; }
              #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper {
                display: block;
                width: 100%;
                box-sizing: border-box;
                padding: 5px 0 20px 0;
                background: #fff;
                text-decoration: none;
                color: #535f75;
                font-size: 16px;
                font-weight: normal; }
                #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .pic {
                  width: 100%;
                  box-sizing: border-box;
                  height: 250px;
                  line-height: 250px;
                  font-size: 0;
                  text-align: center;
                  overflow: hidden; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .pic img {
                    display: inline-block;
                    max-width: 100%;
                    vertical-align: middle; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .pic:hover img {
                    transition: transform ease .5s;
                    transform: scale(1.2, 1.2); }
                #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .info {
                  width: 100%;
                  box-sizing: border-box;
                  padding: 5px 0; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .info .title, #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .info .subtitle {
                    width: 100%;
                    box-sizing: border-box;
                    height: 18px;
                    line-height: 18px;
                    font-size: 12px;
                    text-align: center;
                    color: #535f75;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding: 0 10px; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.product_list li a.item_wrapper .info .price {
                    width: 100%;
                    box-sizing: border-box;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    font-weight: bolder;
                    text-align: center; }
          #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list {
            width: 100%;
            box-sizing: border-box;
            padding: 0;
            font-size: 0; }
            #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li {
              display: inline-block;
              box-sizing: border-box;
              width: 33.333%;
              padding: 5px 5px; }
              #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper {
                display: block;
                width: 100%;
                box-sizing: border-box;
                padding: 5px 0 0 0;
                background: #fff;
                text-decoration: none;
                color: #535f75;
                font-size: 16px;
                font-weight: normal; }
                #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .pic {
                  width: 100%;
                  box-sizing: border-box;
                  height: 350px;
                  font-size: 0; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .pic a {
                    display: block;
                    width: 100%;
                    box-sizing: border-box;
                    height: 100%;
                    line-height: 350px;
                    text-align: center;
                    overflow: hidden; }
                    #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .pic a img {
                      display: inline-block;
                      max-width: 100%;
                      max-height: 100%;
                      vertical-align: middle; }
                    #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .pic a:hover img {
                      transition: transform ease .5s;
                      transform: scale(1.2, 1.2); }
                #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper {
                  width: 100%;
                  box-sizing: border-box;
                  height: auto;
                  position: relative;
                  background: #fff;
                  z-index: 100; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper .title {
                    position: relative;
                    width: 100%;
                    box-sizing: border-box;
                    height: 45px; }
                    #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper .title a {
                      display: block;
                      width: 100%;
                      box-sizing: border-box;
                      line-height: 45px;
                      text-align: center;
                      background: #535f75;
                      color: #fff;
                      text-decoration: none;
                      border-radius: 5px; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper ul.sub_list {
                    position: absolute;
                    top: 45px;
                    left: 0;
                    width: 100%;
                    box-sizing: border-box;
                    transform-origin: 0 0;
                    transform: translate(0, -30px) scale(1, 0);
                    overflow: hidden;
                    padding: 0 0 0 0;
                    margin: 0;
                    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
                    background: #fff;
                    opacity: 0;
                    border-bottom-right-radius: 5px;
                    border-bottom-left-radius: 5px; }
                    #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper ul.sub_list li {
                      width: 100%;
                      box-sizing: border-box;
                      height: 40px;
                      padding: 0;
                      margin: 0; }
                      #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper ul.sub_list li a {
                        display: block;
                        width: 100%;
                        box-sizing: border-box;
                        line-height: 40px;
                        text-align: center;
                        color: #949ca9;
                        text-decoration: none; }
                        #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper ul.sub_list li a:hover {
                          background: #949ca9;
                          color: #fff; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper:hover .title > a {
                    border-bottom-right-radius: 0;
                    border-bottom-left-radius: 0; }
                  #HBS_page .container .section_box .box_wrapper .product_list_wrapper ul.ac_list li .item_wrapper .sub_list_wrapper:hover ul.sub_list {
                    animation: sub_list_ani ease-in .2s forwards; }
    #HBS_page .container .video_box {
      width: 65%;
      min-width: 960px;
      box-sizing: border-box;
      margin: 0 auto; }
      #HBS_page .container .video_box h1 {
        box-sizing: border-box;
        height: 120px;
        line-height: 120px;
        padding: 0;
        margin: 0;
        color: #535f75;
        font-size: 20px;
        font-weight: normal; }
      #HBS_page .container .video_box .box_wrapper {
        width: 100%;
        box-sizing: border-box; }
        #HBS_page .container .video_box .box_wrapper .video_list {
          width: 100%;
          box-sizing: border-box;
          font-size: 0; }
          #HBS_page .container .video_box .box_wrapper .video_list .video_item {
            display: inline-block;
            box-sizing: border-box;
            width: 50%;
            padding: 5px 5px;
            cursor: pointer; }
            #HBS_page .container .video_box .box_wrapper .video_list .video_item .lazy > img {
              width: 25px !important;
              height: auto;
              vertical-align: middle; }
            #HBS_page .container .video_box .box_wrapper .video_list .video_item .pic {
              width: 100%;
              box-sizing: border-box;
              text-align: center; }
              #HBS_page .container .video_box .box_wrapper .video_list .video_item .pic img {
                width: 100%;
                vertical-align: middle; }
    #HBS_page .container .shipping_box {
      width: 65%;
      min-width: 960px;
      box-sizing: border-box;
      margin: 60px auto; }
      #HBS_page .container .shipping_box .box_wrapper {
        width: 100%;
        box-sizing: border-box; }
        #HBS_page .container .shipping_box .box_wrapper .lazy > img {
          width: 25px !important;
          height: auto;
          vertical-align: middle; }
        #HBS_page .container .shipping_box .box_wrapper .pic {
          width: 100%;
          box-sizing: border-box;
          text-align: center; }
          #HBS_page .container .shipping_box .box_wrapper .pic img {
            width: 100%;
            vertical-align: middle; }
    #HBS_page .container .shadow_box {
      opacity: 0;
      position: fixed;
      top: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      animation: shadow_box_ani ease .2s forwards; }
    #HBS_page .container .shadow {
      box-sizing: border-box;
      opacity: 0;
      position: fixed;
      z-index: 11000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0, 0);
      animation: shadow_ani ease .5s forwards;
      box-shadow: 0 0 18px rgba(0, 0, 0, 0.8); }
    #HBS_page .container .video_shadow {
      width: 560px;
      min-height: 400px;
      background: rgba(255, 255, 255, 0.7);
      background-image: url(https://www.hubsan.com/support/loading.gif);
      background-size: 25px auto;
      background-position: center center;
      background-repeat: no-repeat; }
      #HBS_page .container .video_shadow iframe {
        width: 100%;
        vertical-align: middle; }

/*# sourceMappingURL=HBS_page.css.map */