.ex- {
      font-size: 16px;
      position: relative;
    }

    /* .ex- h2,
    .ex- h3 {
      text-align: center;
    } */

    .ex- img {
      margin: 0;
    }

    .ex- hr {
      border: none;
      color: var(--hr-color);
      background-color: var(--hr-color);
      width: var(--hr-len);
      height: 2px;
      margin: 30px auto;
    }

    .ex- .text {
      margin-bottom: 1rem;
    }

    .ex- .text ul {
      list-style: circle;
      padding: 0 0 0 1rem;
    }

    .ex- a.open-more-text {
      display: block;
      text-align: right;
      font-size: 14px;
    }

    .ex- h2,
    .ex- h3,
    .ex- h4 {
      color: var(--accent-color);
      padding: 0;
    }

    .ex- h2 {
      font-size: 1.5rem;
    }

    .ex- h3 {
      color: var(--bg-color);
      font-size: 1.1rem;
      margin: 0 0 .4rem;
    }

    .ex- .h-img {
      width: 100%;
      color: var(--h-img-color);
      text-align: center;
      background-size: cover;
      margin-bottom: 40px;
      background-position: center center;
      text-shadow: 1px 1px 4px #333, -1px -1px 4px #333;
    }

    .ex- .h-img .info {
      height: 100%;
    }

    .ex- .h-img .info h2 {
      margin-top: 120px;
      font-size: 40px;
      font-weight: normal;
      color: var(--h-img-color);
    }

    .ex- .h-img .info h2 b {
      color: var(--h-img-color1);
    }

    .ex- .publ-container {
      background-color: var(--publ-bg);
      padding: 30px 0 25px;
    }

    .ex- .publ-container .publ-slider {
      height: 405px;
    }

    .ex- .bg2 {
      background-color: var(--accent-color-light);
      border: 1px solid var(--accent-color);
      border-radius: 6px;
      color: var(--text-color);
      padding: 1rem;
    }

    .ex- .bg2 h2,
    .ex- .bg2 h3 {
      color: var(--accent-color);
    }

    /* .ex- .bg2 .lr-border {
      padding: 10px 40px;
      border-left: 2px solid var(--bg2-border);
      border-right: 2px solid var(--bg2-border);
      width: 90%;
      margin: 0 auto;
    } */

    .ex- .bg2 .lr-border.text {
      width: 70%;
    }

    .ex- .bg3 {
      background-color: var(--bg-color);
      border: 1px solid var(--bg-color-dark);
      border-radius: 6px;
      color: var(--light);
      padding: 1rem;
      margin-bottom: 20px;
    }

    .ex- .bg3 h2,
    .ex- .bg3 h3 {
      color: var(--bg-color-light);
    }

    .ex- ul.tile {
      list-style: none;
      margin: 0;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      box-sizing: border-box;
    }

    .ex- ul.tile>li {
      display: block;
      background-color: var(--bg-tile);
      color: var(--color-tile);
      padding: 10px;
      margin: 10px;
      overflow: auto;
    }

    .ex- ul.tile-2 li {
      flex-basis: calc(50% - 40px);
    }

    .ex- ul.tile-3 li {
      flex-basis: calc(33% - 40px);
    }

    .ex- .bg2 ul.tile>li {
      background-color: var(--bg2-bg-tile);
      color: var(--bg2-color-tile);
    }

    .ex- .bg3 ul.tile>li {
      background-color: var(--bg3);
      box-shadow: 1px 1px 3px 1px #bbb;
    }

    .ex- ul.tile li img {
      width: 100%;
    }

    .ex- ul.rows {
      list-style: none;
      margin: 0;
    }

    .ex- ul.rows>li {
      background: var(--bg-tile);
      color: var(--color-tile);
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      overflow: auto;
    }

    .ex- .bg2 ul.rows li {
      background: var(--bg2-bg-rows);
      color: var(--bg2-color-rows);
    }

    .ex- .bg3 ul.rows>li {
      background-color: var(--bg3);
      border: 1px solid #bbb;
      border-radius: 1px;
    }

    .ex- ul.rows li p {
      margin: 0;
    }

    .ex- ul.rows li img {
      width: var(--tile-img-width);
      float: left;
      margin-right: 10px;
    }

    .ex- ul.poster {
      list-style: none;
      margin: 0 0 30px;
    }

    .ex- .bg3 ul.poster {
      margin: 0;
    }

    .ex- .ex-tab-content ul.poster {
      margin: 0;
    }

    .ex- ul.poster li.slide {
      display: inline-block;
      background-color: var(--bg-tile);
      color: var(--color-tile);
      box-sizing: border-box;
      padding: 20px;
      overflow: auto;
      line-height: 22px;
      height: 100%;
      margin-right: 20px;
    }

    .ex- .bg2 ul.poster li.slide {
      border-color: var(--bg2);
    }

    .ex- .bg3 ul.poster li.slide {
      background-color: var(--bg3);
      border: 1px solid #bbb;
    }

    .ex- ul.poster li.slide img.img-1 {
      height: 100%;
      float: left;
    }

    .ex- ul.poster li.slide img.img-2 {
      width: 100%;
      margin-bottom: 10px;
    }

    .ex- ul.poster li.slide img.img-3 {
      width: 100%;
      margin-bottom: 10px;
    }

    .ex- ul.poster li.slide .info-1 {
      padding-left: 20px;
      overflow: auto;
      height: 100%;
    }

    /* .ex- ul.poster li.slide .info-2 {} */

    /* .ex- ul.poster li.slide .info-3 {} */

    .ex- ul.masonry {
      margin: 0;
    }

    .ex- ul.masonry.masonry-1 {
      width: 80%;
      margin: 0 auto;
    }

    /* .ex- ul.masonry li.slide {} */

    .ex- ul.masonry li.slide img {
      width: 100%;
    }

    .ex- .bg2 ul.masonry li.slide {
      background: var(--bg2-bg-rows);
      color: var(--bg2-color-rows);
    }

    .ex- .bg3 ul.masonry li.slide {
      background-color: var(--bg3);
      border-radius: 1px;
      box-shadow: 1px 1px 3px 1px #bbb;
    }

    .ex- .flickity-prev-next-button {
      background: rgba(255, 205, 5, .6);
      width: 50px;
      height: 50px;
      padding: 10px;
      border: none;
      border-radius: 50%;
      position: absolute;
    }

    .ex- .flickity-prev-next-button .arrow {
      fill: rgba(255, 255, 255, .8);
    }

    .ex- .flickity-prev-next-button:hover {
      background: rgba(255, 205, 5, 1);
    }

    .ex- .flickity-prev-next-button:hover .arrow {
      fill: rgba(255, 255, 255, 1);
    }

    .ex- .flickity-prev-next-button.previous {
      left: -30px;
      top: 50%;
    }

    .ex- .flickity-prev-next-button.next {
      right: -30px;
      top: 50%;
    }

    .ex- .page-list-arrow-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .ex- .page-list-arrow {
      width: 494px;
      height: 111px;
      position: relative;
    }

    .ex- .page-list-arrow:nth-child(odd) {
      background-image: url(/templates/main/images/ex/arrow-left.png);
    }

    .ex- .page-list-arrow:nth-child(even) {
      background-image: url(/templates/main/images/ex/arrow-right.png);
    }

    .ex- .page-list-arrow a {
      display: block;
      position: absolute;
      width: 190px;
      height: 84px;
      top: 11px;
      color: #444;
      line-height: 84px;
      text-transform: uppercase;
    }

    .ex- .page-list-arrow a span {
      line-height: normal;
      display: inline-block;
      vertical-align: middle;
      text-decoration: none;
    }

    .ex- .page-list-arrow a:hover span {
      color: #000;
    }

    .ex- .page-list-arrow:nth-child(odd) a {
      left: 280px;
    }

    .ex- .page-list-arrow:nth-child(even) a {
      left: 50px;
    }

    .ex- .page-list-arrow .empty-img,
    .ex- .page-list-arrow img {
      position: absolute;
      width: 70px;
      height: 70px;
      top: 21px;
    }

    .ex- .page-list-arrow:nth-child(odd) .empty-img,
    .ex- .page-list-arrow:nth-child(odd) img {
      left: 21px;
    }

    .ex- .page-list-arrow:nth-child(even) .empty-img,
    .ex- .page-list-arrow:nth-child(even) img {
      right: 21px;
    }

    .ex- .page-list-arrow:nth-child(odd) .empty-img {
      background: url(/templates/main/images/ex/ico-arrow-left.png) no-repeat center center;
    }

    .ex- .page-list-arrow:nth-child(even) .empty-img {
      background: url(/templates/main/images/ex/ico-arrow-right.png) no-repeat center center;
    }

    .ex- .page-list-arrow .page-list-note {
      display: none;
      position: absolute;
      width: 328px;
      top: 102px;
      color: #fff;
      line-height: normal;
      box-sizing: border-box;
      font-size: 14px;
      padding: 30px 20px 20px;
      z-index: 2;
    }

    .ex- .page-list-arrow:nth-child(odd) .page-list-note {
      right: 9px;
      border-radius: 0 0 20px 0;
      background: #8D75A5 url(/templates/main/images/ex/note-left.jpg?2) no-repeat top center;
    }

    .ex- .page-list-arrow:nth-child(even) .page-list-note {
      left: 9px;
      border-radius: 0 0 0 20px;
      background: #8D75A5 url(/templates/main/images/ex/note-right.jpg?2) no-repeat top center;
    }

    .ex- .page-list-arrow:hover .page-list-note {
      display: block;
    }

    .ex- .ex-tab {
      margin-bottom: 30px;
    }

    .ex- .ex-tab-control a {
      display: inline-block;
      margin: 0 0 0 10px;
      padding: 1px 7px;
      text-decoration: none;
      border-radius: 5px 5px 0 0;
    }

    .ex- .ex-tab-control.tab-bg1 a {
      color: #212121;
      background: var(--bg1-tabs-header);
    }

    .ex- .ex-tab-control.tab-bg2 a {
      color: var(--bg2-color);
      background: var(--bg2-tabs-header);
    }

    .ex- .ex-tab-control.tab-bg3 a {
      color: #212121;
      background: var(--bg3-tabs-header);
    }

    .ex- .ex-tab-control.tab-bg4 a {
      color: #212121;
      background: var(--bg4-tabs-header);
    }

    .ex- .ex-tab-control.tab-bg1 a:hover {
      background: var(--bg1-tabs-header-a-hover);
    }

    .ex- .ex-tab-control.tab-bg2 a:hover {
      background: var(--bg2-tabs-header-a-hover);
    }

    .ex- .ex-tab-control.tab-bg3 a:hover {
      background: var(--bg3-tabs-header-a-hover);
    }

    .ex- .ex-tab-control.tab-bg4 a:hover {
      background: var(--bg4-tabs-header-a-hover);
    }

    .ex- .ex-tab-content {
      margin: 0;
      background-color: var(--bg3);
    }

    .ex- .videodetector {
      background-color: var(--bg-color-dark);
      border-radius: 6px;
      padding: 0.3rem 0 0;
    }