:root {
  --f-size: 100;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: rgba(21, 21, 21, 0.7); }

.swiper-container {
  overflow: visible; }

.swiper-pagination {
  bottom: -25px !important; }

.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: white;
  border: 1px solid white; }

.swiper-pagination-bullet-active {
  background: white; }

.top_visual {
  margin-bottom: 40px; }

.top_ad {
  padding: 48px 10%; }

.top_more {
  padding: 48px 0;
  text-align: center;
  font-size: 2rem;
  backface-visibility: hidden;
  letter-spacing: .5rem;
  animation: glitch 5s steps(100) infinite; }

@keyframes glitch {
  0% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  1% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  2% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  3% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  4% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  5% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  6% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  7% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  8% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  9% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  10% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  11% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  12% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  13% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  14% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  15% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  16% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  17% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  18% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  19% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  20% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  21% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  22% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  23% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  24% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  25% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  26% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  27% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  28% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  29% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  30% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  31% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  32% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  33% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  34% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  35% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  36% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  37% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  38% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  39% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  40% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  41% {
    text-shadow: 10px 0 0 #ff000b, -10px 0 0 #3bff00; }
  42% {
    text-shadow: 0 0 0 #ff000b, 0 0 0 #3bff00; }
  43% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  44% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  45% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  46% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  47% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  48% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  49% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  50% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  51% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  52% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  53% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  54% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  55% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  56% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  57% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  58% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  59% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  60% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  61% {
    text-shadow: 30px 0 0 #00fbff, -30px 0 0 #3bff00; }
  62% {
    text-shadow: 0 0 0 #00fbff, 0 0 0 #3bff00; }
  63% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #ff000b; }
  64% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #ff000b; }
  65% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #ff000b; }
  66% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #ff000b; }
  67% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  68% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  69% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  70% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  71% {
    text-shadow: 50px 0 0 #00fbff, -50px 0 0 #ff000b; }
  72% {
    text-shadow: 0 0 0 #00fbff, 0 0 0 #ff000b; }
  73% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  74% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  75% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  76% {
    text-shadow: 3px 0 0 #00fbff, -3px 0 0 #ff000b; }
  77% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  78% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  79% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  80% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #ff000b; }
  81% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  82% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  83% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  84% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  85% {
    text-shadow: 1px 0 0 #00fbff, -1px 0 0 #3bff00; }
  86% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  87% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  88% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  89% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  90% {
    text-shadow: -3px 0 0 #00fbff, 3px 0 0 #3bff00; }
  91% {
    text-shadow: 60px 0 0 #3bff00, -60px 0 0 #ff000b; }
  92% {
    text-shadow: 0 0 0 #3bff00, 0 0 0 #ff000b; }
  92% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  93% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  94% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  95% {
    text-shadow: 0.8px 0 0 #ff000b, -0.8px 0 0 #3bff00; }
  96% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  97% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  98% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  99% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; }
  100% {
    text-shadow: -3px 0 0 #ff000b, 3px 0 0 #3bff00; } }

@media screen and (min-width: 960px) {
  .swiper-container {
    overflow: hidden; }
    .swiper-container .article_item_link {
      -webkit-filter: none;
      filter: none; }
  .swiper-pagination {
    bottom: 0 !important; }
  .top_header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 24px; }
  .top_visual {
    width: 60%; }
    .top_visual .article_item {
      width: 100%; }
      .top_visual .article_item_link:hover {
        opacity: 0.5; }
  .top_ad {
    width: 35%;
    height: auto;
    padding: 0; }
    .top_ad_link:hover {
      opacity: 0.5; }
  .top_more {
    display: block;
    flex: 1;
    line-height: 1;
    text-align: center;
    font-size: 3rem;
    transform: scaleX(var(--scale, 1));
    animation: glitch-p 1s infinite alternate; }
  @keyframes glitch-p {
    17% {
      --scale: 1; }
    31% {
      --scale: 1.001; }
    37% {
      --scale: 1; }
    47% {
      --scale: 1; }
    87% {
      --scale: .999; } }
  @keyframes glitch-a {
    10%, 30%, 50%, 70%, 90% {
      --top: 0;
      --left: 0; }
    0% {
      --v-height: 15%; }
    20% {
      --left: .005; }
    40% {
      --left: .01;
      --v-height: 20%;
      --top: 3; }
    60% {
      --left: .03;
      --v-height: 25%;
      --top: 6; }
    80% {
      --left: .07;
      --v-height: 5%;
      --top: 8; }
    100% {
      --left: .083;
      --v-height: 30%;
      --top: 1; } }
  @keyframes glitch-b {
    10%, 30%, 50%, 70%, 90% {
      --top: 0;
      --left: 0; }
    0% {
      --v-height: 15%;
      --top: 10; }
    20% {
      --left: -.005; }
    40% {
      --left: -.01;
      --v-height: 17%;
      --top: 3; }
    60% {
      --left: -.03;
      --v-height: 35%;
      --top: 6; }
    80% {
      --left: -.07;
      --v-height: 5%;
      --top: 8; }
    100% {
      --left: -.083;
      --v-height: 30%;
      --top: 1; } }
    .top_more::before, .top_more::after {
      --top: 0;
      --left: 0;
      --v-height: 30%;
      --n-tenth: calc(var(--f-size) * .1 * var(--top));
      --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
      --b-cut: calc(var(--t-cut) + var(--v-height));
      content: attr(data-glitch);
      position: absolute;
      width: 100%;
      left: 0;
      text-align: center;
      transform: translateX(calc(var(--left) * 25em));
      filter: drop-shadow(0 0 transparent);
      text-shadow: calc(var(--left) * -3em) 0 0.02em #00daff, calc(var(--left) * -6em) 0 0.02em #53dc00;
      background-color: var(--bg);
      clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut)); }
    .top_more::before {
      animation: glitch-b 1s infinite alternate-reverse; }
    .top_more::after {
      animation: glitch-a 3s infinite alternate; } }

