[mn="3201"] { 
  min-height: 100vh; 
  padding: 0; 
  z-index: 1; 
  background-color: #615850; 
  text-align: center; 
  overflow: hidden;

  .decor_bar {
    width: 60px;
    aspect-ratio: 60 / 302;
    display: block;
    position: absolute;
    left: 60px;
    bottom: -60px;
    z-index: 10;
    pointer-events: none; 
    background-image: url(src/decor-bar.png);

    @media(width<575px){
        display: none;
    }
  }
}

[mn="3201"] .bg-lyr:after {

  background-color: rgba(0, 0, 0, .35);

}

[mn="3201"] .bg-lyr {

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  transition: 5s all ease;

  transform: scale(1.5)
}

[mn="3201"] .slidebx.active .bg-lyr {

  transform: scale(1.0001)
}

[mn="3201"] .slidebx {

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  z-index: 1;

  opacity: 0;

  transition: 1.2s all ease;

  pointer-events: none
}

[mn="3201"] .slidebx.active {

  opacity: 1;

  pointer-events: all
}

[mn="3201"] .btnPlay { 
  cursor: pointer;

  margin: 0 0 0 12px
}

[mn="3201"] .container {

  z-index: 10; 

  max-width: 800px;

}

[mn="3201"] .slide- {

  height: 100%;

  width: 100%
}

[mn="3201"] .bxw {

  overflow: hidden
}

[mn="3201"] .bxw>* {

  transform: translate(0, 120%);

  transition: 1.2s all ease;

  opacity: .2
}

[mn="3201"] .slidebx.active .bxw>* {

  transform: translate(0, 0);

  opacity: 1
}

[mn="3201"] .slidebx.active .bxw>.desc {

  transition: 1.2s all .6s ease;

}

[mn="3201"] h2 {

  color: inherit;

  font-family: var(--font-t1);

  font-size: 300%;

  margin: 0 0 9px;

}

[mn="3201"] .desc {

  width: 800px;

  max-width: 100%;

  margin: 0 auto; 

}

[mn="3201"] .dots {

  position: absolute;
  z-index: 10;
  bottom: 45px;
  left: 0;
  width: 100%;

} 

[mn="3201"] .dot->* {
  --square: 6px;
  display: block;
  width: var(--square);
  height: var(--square);
  background-color: #fff;
  border-radius: 50%;
  margin: 15px;
  cursor: pointer;
  position: relative;
}

[mn="3201"] .dot->*::after {



  --square: 30px;

  content: '';

  display: block;

  position: absolute;

  left: 50%;

  top: 50%;

  height: var(--square);

  width: var(--square);

  background-color: rgba(255, 255, 255, .5);

  z-index: 1;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  cursor: pointer;

  transition: .3s all ease;

  opacity: 0
}

[mn="3201"] .dot-.active>*::after { 
  opacity: 1
}

[mn="3201"] .mouse_scroll {

  transform: translate(-50%, -50%) scale(0.6);

}



@media screen and (max-width: 575px) {

  [mn="3201"] .dots {

    top: 15px;

  }

  [mn="3201"] .desc {

    padding: 15px 0 0;

  }

  [mn="3201"] h2 {

    font-size: 200%
  }

}