/* This CSS is generated by My Snazzy Framework version 1.2.3 */
.headers {
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(57, 47, 63, 0.06); }
  .headers .logo {
    display: none; }
    @media screen and (max-width: 1024px) {
      .headers .logo {
        display: block; } }
  @media screen and (max-width: 1024px) {
    .headers.fixed {
      position: fixed;
      background-color: #ffffff; } }
  .headers.active {
    top: 0;
    background-color: rgba(0, 36, 71, 0.4);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1); }
    .headers.active .header {
      height: 90px; }
    .headers.active .header_box .h_box1 .toolbar-search-container {
      height: 75%; }
  .headers .header {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    transition: all 0.3s ease-out 0s; }
    @media screen and (max-width: 1024px) {
      .headers .header {
        height: auto; } }
    .headers .header .header_box {
      display: flex;
      align-items: center; }
      .headers .header .header_box .h_box1 {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .headers .header .header_box .h_box1 .logo {
          width: auto;
          height: 100%;
          display: flex;
          align-items: center; }
          .headers .header .header_box .h_box1 .logo img {
            width: auto;
            max-width: auto;
            max-height: 100%; }
        .headers .header .header_box .h_box1 .toolbar-search {
          max-width: 350px;
          width: 100%;
          height: 40px; }
          .headers .header .header_box .h_box1 .toolbar-search .toolbar-search-container {
            width: 100%;
            height: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 0; }
            .headers .header .header_box .h_box1 .toolbar-search .toolbar-search-container input {
              font-size: 16px;
              height: 100%;
              width: 70%;
              line-height: inherit;
              background-color: #ffffff1c;
              backdrop-filter: blur(1px);
              color: var(--base);
              vertical-align: top;
              text-indent: 32px;
              border: 1px solid #cdddeb;
              border-right: none;
              -webkit-box-sizing: border-box;
              box-sizing: border-box; }
              .headers .header .header_box .h_box1 .toolbar-search .toolbar-search-container input::placeholder {
                color: var(--base); }
            .headers .header .header_box .h_box1 .toolbar-search .toolbar-search-container button {
              width: 30%;
              height: 100%;
              outline: 0;
              border: 0 none;
              font-size: 18px;
              line-height: inherit;
              cursor: pointer;
              -webkit-transition: all 0.2s ease-in;
              transition: all 0.2s ease-in;
              background-color: #07539b;
              text-align: center; }
              .headers .header .header_box .h_box1 .toolbar-search .toolbar-search-container button span {
                display: inline-block;
                color: #fff;
                font-size: 18px; }
      .headers .header .header_box .h_box2 {
        width: 100%; }
        @media screen and (max-width: 1024px) {
          .headers .header .header_box .h_box2 {
            background-color: rgba(255, 255, 255, 0); } }
        .headers .header .header_box .h_box2 ul {
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .headers .header .header_box .h_box2 ul li {
            width: 100%;
            text-align: center;
            position: relative;
            padding: 10px 0;
            max-width: 140px; }
            @media screen and (max-width: 1024px) {
              .headers .header .header_box .h_box2 ul li {
                padding: 0;
                max-width: 100%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1); } }
            .headers .header .header_box .h_box2 ul li a {
              color: #000;
              font-size: 18px;
              line-height: 3em; }
            .headers .header .header_box .h_box2 ul li ol {
              position: absolute;
              width: 100%;
              background-color: var(--base);
              display: none;
              max-width: 100%;
              z-index: 9;
              top: 100%;
              /* &::before {
								content: '';
								position: absolute;
								z-index: -1;
								top: -13px;
								width: 0;
								height: 0;
								border-left: 10px solid transparent;
								border-right: 10px solid transparent;
								border-bottom: 20px solid var(--base);
								left: 50%;
								transform: translateX(-50%);
							} */ }
              .headers .header .header_box .h_box2 ul li ol li a {
                font-size: 16px;
                color: #fff;
                line-height: 2.5em;
                font-weight: 500; }
              .headers .header .header_box .h_box2 ul li ol li:hover {
                background: url("../img/icon/meunbai.png") no-repeat center;
                background-size: 80% auto; }
                .headers .header .header_box .h_box2 ul li ol li:hover a {
                  color: var(--base); }
            .headers .header .header_box .h_box2 ul li:hover ol {
              display: block; }
              @media screen and (max-width: 1024px) {
                .headers .header .header_box .h_box2 ul li:hover ol {
                  display: none; } }
            .headers .header .header_box .h_box2 ul li.active, .headers .header .header_box .h_box2 ul li:hover {
              font-size: 20px;
              font-weight: 500;
              background: url("../img/icon/meunhong.png") no-repeat center; }
              .headers .header .header_box .h_box2 ul li.active a.iteMun, .headers .header .header_box .h_box2 ul li:hover a.iteMun {
                color: #fff; }
    .headers .header .mb_btn,
    .headers .header #menu-item-100 {
      display: none; }
    @media screen and (max-width: 1024px) {
      .headers .header {
        justify-content: space-between;
        align-items: center;
        width: 100%; }
        .headers .header .logo {
          margin-left: 1%;
          max-width: 190px;
          padding: 3px 0;
          }
          .headers .header .logo img {
            width: 100%;
            height: auto; }
        .headers .header .header_box {
          position: absolute;
          top: 100%;
          width: 100%;
          background-color: rgba(197, 38, 43, 0.93);
          display: none;
          height: calc(100vh - 70px); }
          .headers .header .header_box .h_box1 {
            display: none; }
          .headers .header .header_box .h_box2 ul {
            width: 100%;
            flex-wrap: wrap; }
            .headers .header .header_box .h_box2 ul li a {
              color: #fff; }
            .headers .header .header_box .h_box2 ul li.active {
              background-color: #fff; }
          .headers .header .header_box.active {
            display: block; }
        .headers .header .mb_btn {
          display: block;
          margin-right: 5%; }
          .headers .header .mb_btn .iconfont:before {
            color: var(--base);
            font-size: 1.5em; }
          .headers .header .mb_btn .icon-menu {
            display: block; }
          .headers .header .mb_btn .icon-guanbi {
            display: none; }
          .headers .header .mb_btn.active .icon-menu {
            display: none; }
          .headers .header .mb_btn.active .icon-guanbi {
            display: block; } }