.cp_breadcrumb *, .cp_breadcrumb *:after, .cp_breadcrumb *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.cp_breadcrumb {
  overflow: hidden;
  width: -webkit-calc(100% + 10px);
  width: calc(100% + 10px);
  margin: 20px -5px 20px -5px;
  padding: 0;
  list-style: none;
  float: left; }
  .cp_breadcrumb li {
    display: inline-block;
    padding: 0 5px;
    margin: 0;
    float: left;
    width: 20%; }
    @media (max-width: 991px) {
      .cp_breadcrumb li {
        font-size: 13px; } }
    @media (max-width: 840px) {
      .cp_breadcrumb li {
        width: 50px;
        text-align: center;
        font-size: 14px; } }
    @media (max-width: 420px) {
      .cp_breadcrumb li {
        width: 35px;
        font-size: 13px; } }
    @media (max-width: 375px) {
      .cp_breadcrumb li {
        font-size: 12px;
        width: 30px; } }
    @media (max-width: 310px) {
      .cp_breadcrumb li {
        font-size: 10px; } }
    .cp_breadcrumb li:first-child a {
      padding-left: 2em;
      border-radius: 5px 0 0 5px; }
      @media (max-width: 991px) {
        .cp_breadcrumb li:first-child a {
          padding-left: 1.4em; } }
      @media (max-width: 420px) {
        .cp_breadcrumb li:first-child a {
          padding-left: 0.5em; } }
    @media (max-width: 840px) {
      .cp_breadcrumb li:last-child {
        width: 80px; } }
    @media (max-width: 420px) {
      .cp_breadcrumb li:last-child {
        width: 70px; } }
    @media (max-width: 375px) {
      .cp_breadcrumb li:last-child {
        width: 60px; } }
    .cp_breadcrumb li:last-child a {
      cursor: default;
      color: #666;
      border-radius: 0 5px 5px 0;
      font-weight: bold; }
      .cp_breadcrumb li:last-child a::before {
        content: normal; }
      .cp_breadcrumb li:last-child a::after {
        content: normal; }
      @media (max-width: 420px) {
        .cp_breadcrumb li:last-child a {
          padding-left: 0.5em; } }
    .cp_breadcrumb li:last-child.current {
      text-align: center; }
      @media (max-width: 840px) {
        .cp_breadcrumb li:last-child.current {
          width: -webkit-calc(100% - 200px);
          width: calc(100% - 200px); } }
      @media (max-width: 420px) {
        .cp_breadcrumb li:last-child.current {
          width: -webkit-calc(100% - 140px);
          width: calc(100% - 140px); } }
      @media (max-width: 375px) {
        .cp_breadcrumb li:last-child.current {
          width: -webkit-calc(100% - 120px);
          width: calc(100% - 120px); } }
    @media (max-width: 840px) {
      .cp_breadcrumb li.current {
        width: -webkit-calc(100% - 230px);
        width: calc(100% - 230px);
        text-align: left; }
        .cp_breadcrumb li.current a {
          padding: 0.7em 1em 0.7em 1.4em; }
          .cp_breadcrumb li.current a span.num {
            display: none; } }
    @media (max-width: 420px) {
      .cp_breadcrumb li.current {
        width: -webkit-calc(100% - 175px);
        width: calc(100% - 175px); } }
    @media (max-width: 375px) {
      .cp_breadcrumb li.current {
        width: -webkit-calc(100% - 150px);
        width: calc(100% - 150px); } }
    .cp_breadcrumb li.current a {
      background: #8db565;
      color: white;
      font-weight: bold; }
      .cp_breadcrumb li.current a::after {
        border-left-color: #8db565; }
      .cp_breadcrumb li.current a span {
        display: inline-block; }
    .cp_breadcrumb li a {
      position: relative;
      display: inline-block;
      margin: 0;
      padding: 0.7em 1em 0.7em 2em;
      text-decoration: none;
      color: #666;
      background-color: #c8c8c8;
      width: 100%;
      font-size: 80%; }
      @media (max-width: 840px) {
        .cp_breadcrumb li a {
          padding: 0.7em 1em 0.7em 1.4em; } }
      @media (max-width: 420px) {
        .cp_breadcrumb li a {
          padding: 0.7em 0em 0.7em 1.4em; } }
      .cp_breadcrumb li a::before {
        position: absolute;
        top: 50%;
        right: -1.5em;
        margin-top: -1.48em;
        content: '';
        border-top: 1.48em solid transparent;
        border-bottom: 1.48em solid transparent;
        border-left: 1.5em solid;
        z-index: 1;
        right: -1.8em;
        border-left-color: #ffffff; }
      .cp_breadcrumb li a::after {
        position: absolute;
        top: 50%;
        right: -1.5em;
        margin-top: -1.48em;
        content: '';
        border-top: 1.48em solid transparent;
        border-bottom: 1.48em solid transparent;
        border-left: 1.5em solid;
        z-index: 2;
        border-left-color: #c8c8c8; }
      .cp_breadcrumb li a span {
        display: inline-block; }
        .cp_breadcrumb li a span.num {
          font-weight: bold;
          margin-right: 5px; }
          @media (max-width: 840px) {
            .cp_breadcrumb li a span.num {
              display: inline-block;
              margin-right: 0; } }
        @media (max-width: 840px) {
          .cp_breadcrumb li a span {
            display: none; } }