/* line 1, ../sass/screen.scss */
.cmp-frise-sf {
  display: flex;
}
/* line 3, ../sass/screen.scss */
.cmp-frise-sf .bar {
  width: 120px;
}
/* line 5, ../sass/screen.scss */
.cmp-frise-sf .bar img {
  transform: rotate(90deg) translate(0, -80px);
  transform-origin: 0 0;
  position: absolute;
  max-width: none;
}
/* line 12, ../sass/screen.scss */
.cmp-frise-sf .years {
  flex: 1 1 calc(100% - 70px);
  padding-top: 24px;
}
/* line 15, ../sass/screen.scss */
.cmp-frise-sf .years .item {
  height: 157px;
}
/* line 19, ../sass/screen.scss */
.cmp-frise-sf .title {
  font-family: "PT Root UI", Sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
}
/* line 26, ../sass/screen.scss */
.cmp-frise-sf .item-popup .title {
  display: none;
}
/* line 30, ../sass/screen.scss */
.cmp-frise-sf .desc {
  font-family: "PT Root UI", Sans-serif;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
}

@media screen and (min-width: 769px) {
  /* line 39, ../sass/screen.scss */
  .cmp-frise-sf {
    padding: 10px;
    display: block;
  }
  /* line 42, ../sass/screen.scss */
  .cmp-frise-sf .bar {
    width: 100%;
  }
  /* line 44, ../sass/screen.scss */
  .cmp-frise-sf .bar .rotation-wrapper-inner {
    display: flex;
    height: 180px;
    align-items: center;
    justify-content: center;
  }
  /* line 50, ../sass/screen.scss */
  .cmp-frise-sf .bar img {
    width: 91.6%;
    transform: none;
  }
  /* line 55, ../sass/screen.scss */
  .cmp-frise-sf .years {
    padding-top: 0;
    height: 180px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
  }
  /* line 63, ../sass/screen.scss */
  .cmp-frise-sf .years .item {
    height: auto;
    text-align: center;
    padding: 0;
    width: 12.5%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
  }
  /* line 72, ../sass/screen.scss */
  .cmp-frise-sf .years .item:nth-child(2n) {
    align-items: flex-end;
  }
  /* line 75, ../sass/screen.scss */
  .cmp-frise-sf .years .item .desc {
    font-size: 20px;
  }
  /* line 78, ../sass/screen.scss */
  .cmp-frise-sf .years .item .desc,
  .cmp-frise-sf .years .item .title {
    text-align: center;
    font-size: 16px;
    opacity: 1;
    transition: all .3s;
    position: relative;
    top: 0;
  }
  /* line 86, ../sass/screen.scss */
  .cmp-frise-sf .years .item .desc.hide,
  .cmp-frise-sf .years .item .title.hide {
    opacity: 0;
    top: -20px;
  }
  /* line 91, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup {
    z-index: 100;
    position: absolute;
    width: 300px;
    text-align: left;
    top: -160px;
    left: calc(50% - 22px);
    opacity: 0;
    transition: all .3s;
  }
  /* line 100, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup.active {
    top: -180px;
    opacity: 1;
  }
  /* line 104, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup.active .gutter .popup-bar {
    transition: all .3s;
    height: calc(100% + 115px);
  }
  /* line 110, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup .gutter {
    background: #fff;
    padding: 20px 20px 20px 20px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  /* line 115, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup .gutter .popup-bar {
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 20px;
  }
  /* line 122, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup .gutter .title {
    display: block;
    text-align: left;
  }
  /* line 126, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup .gutter .desc {
    font-size: 16px;
    line-height: 1.4em;
    text-align: left;
  }
  /* line 133, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup.last .gutter {
    transform: translateX(-257px);
    padding: 20px 20px 20px 20px;
  }
  /* line 136, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup.last .gutter .popup-bar {
    left: auto;
    right: 20px;
  }
  /* line 140, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup.last .gutter .title {
    text-align: right;
  }
  /* line 143, ../sass/screen.scss */
  .cmp-frise-sf .years .item .item-popup.last .gutter .desc {
    text-align: right;
  }
}
@media screen and (min-width: 1023px) {
  /* line 159, ../sass/screen.scss */
  .cmp-frise-sf .years .item .desc,
  .cmp-frise-sf .years .item .title {
    text-align: center;
    font-size: 20px;
  }
}