.swap {
  position: relative;
}
.swap .mask {
  max-width: 100%;
  overflow: hidden;
}
.swap .list > .item {
  box-sizing: border-box;
  vertical-align: middle;
}
.swap input[type=radio],
.swap input[type=checkbox] {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  display: none;
  position: absolute;
  z-index: -1;
}
.swap .btn, .swap label {
  user-select: none;
}
.swap .btn {
  cursor: pointer;
  margin: initial;
}
.swap .btn .label {
  font-weight: initial;
}
.swap .nav-btn, .swap .nav-dots {
  visibility: hidden;
  opacity: 0;
  display: flex;
  text-align: center;
  vertical-align: middle;
}
.swap .nav-btn {
  position: absolute;
  display: block;
  top: 50%;
  width: 100%;
}
.swap .nav-btn .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.swap .nav-btn .btn.btn-before {
  left: 0;
}
.swap .nav-btn .btn.btn-next {
  right: 0;
}
.swap.set-nav-btn-before .nav-btn, .swap.set-nav-btn-next .nav-btn {
  visibility: visible;
  opacity: 1;
  display: block;
}

.swap-slider > .mask {
  height: auto;
  overflow: hidden;
  width: 100%;
  display: block;
}
.swap-slider > .mask > .list {
  list-style: none;
  height: auto;
  position: relative;
}
.swap-slider > .mask > .list > .item > .img {
  margin: auto;
  position: relative;
  display: block;
}
.swap-slider.set-horizontal > .mask > .list, .swap-slider.set-vertical > .mask > .list {
  list-style: none;
  height: auto;
  position: relative;
  transition: transform 250ms ease-in-out;
}
.swap-slider.set-horizontal {
  transform: translateX(0);
}
.swap-slider.set-horizontal.item-1 > .mask > .list {
  width: 100%;
}
.swap-slider.set-horizontal.item-1 > .mask > .list > .item {
  width: 100%;
}
.swap-slider.set-horizontal.item-2 > .mask > .list {
  width: 200%;
}
.swap-slider.set-horizontal.item-2 > .mask > .list > .item {
  width: 50%;
}
.swap-slider.set-horizontal.item-2 > .radio-2:checked ~ .mask > .list {
  transform: translateX(-50%);
}
.swap-slider.set-horizontal.item-3 > .mask > .list {
  width: 300%;
}
.swap-slider.set-horizontal.item-3 > .mask > .list > .item {
  width: 33.3333333333%;
}
.swap-slider.set-horizontal.item-3 > .radio-2:checked ~ .mask > .list {
  transform: translateX(-33.3333333333%);
}
.swap-slider.set-horizontal.item-3 > .radio-3:checked ~ .mask > .list {
  transform: translateX(-66.6666666667%);
}
.swap-slider.set-horizontal.item-4 > .mask > .list {
  width: 400%;
}
.swap-slider.set-horizontal.item-4 > .mask > .list > .item {
  width: 25%;
}
.swap-slider.set-horizontal.item-4 > .radio-2:checked ~ .mask > .list {
  transform: translateX(-25%);
}
.swap-slider.set-horizontal.item-4 > .radio-3:checked ~ .mask > .list {
  transform: translateX(-50%);
}
.swap-slider.set-horizontal.item-4 > .radio-4:checked ~ .mask > .list {
  transform: translateX(-75%);
}
.swap-slider.set-horizontal.item-5 > .mask > .list {
  width: 500%;
}
.swap-slider.set-horizontal.item-5 > .mask > .list > .item {
  width: 20%;
}
.swap-slider.set-horizontal.item-5 > .radio-2:checked ~ .mask > .list {
  transform: translateX(-20%);
}
.swap-slider.set-horizontal.item-5 > .radio-3:checked ~ .mask > .list {
  transform: translateX(-40%);
}
.swap-slider.set-horizontal.item-5 > .radio-4:checked ~ .mask > .list {
  transform: translateX(-60%);
}
.swap-slider.set-horizontal.item-5 > .radio-5:checked ~ .mask > .list {
  transform: translateX(-80%);
}
.swap-slider.set-horizontal > .mask > .list > .item {
  display: inline-block;
  float: left;
}
.swap-slider.set-vertical {
  transform: translateY(0);
}
.swap-slider.set-vertical.item-1 > .mask {
  height: 100%;
}
.swap-slider.set-vertical.item-1 > .mask > .item {
  height: 100%;
}
.swap-slider.set-vertical.item-2 > .mask {
  height: 200%;
}
.swap-slider.set-vertical.item-2 > .mask > .item {
  height: 50%;
}
.swap-slider.set-vertical.item-2 > .radio-2:checked ~ .mask > .list {
  transform: translateY(-50%);
}
.swap-slider.set-vertical.item-3 > .mask {
  height: 300%;
}
.swap-slider.set-vertical.item-3 > .mask > .item {
  height: 33.3333333333%;
}
.swap-slider.set-vertical.item-3 > .radio-2:checked ~ .mask > .list {
  transform: translateY(-33.3333333333%);
}
.swap-slider.set-vertical.item-3 > .radio-3:checked ~ .mask > .list {
  transform: translateY(-66.6666666667%);
}
.swap-slider.set-vertical.item-4 > .mask {
  height: 400%;
}
.swap-slider.set-vertical.item-4 > .mask > .item {
  height: 25%;
}
.swap-slider.set-vertical.item-4 > .radio-2:checked ~ .mask > .list {
  transform: translateY(-25%);
}
.swap-slider.set-vertical.item-4 > .radio-3:checked ~ .mask > .list {
  transform: translateY(-50%);
}
.swap-slider.set-vertical.item-4 > .radio-4:checked ~ .mask > .list {
  transform: translateY(-75%);
}
.swap-slider.set-vertical.item-5 > .mask {
  height: 500%;
}
.swap-slider.set-vertical.item-5 > .mask > .item {
  height: 20%;
}
.swap-slider.set-vertical.item-5 > .radio-2:checked ~ .mask > .list {
  transform: translateY(-20%);
}
.swap-slider.set-vertical.item-5 > .radio-3:checked ~ .mask > .list {
  transform: translateY(-40%);
}
.swap-slider.set-vertical.item-5 > .radio-4:checked ~ .mask > .list {
  transform: translateY(-60%);
}
.swap-slider.set-vertical.item-5 > .radio-5:checked ~ .mask > .list {
  transform: translateY(-80%);
}
.swap-slider.set-vertical > .mask {
  height: 31.25rem;
}
.swap-slider.set-vertical > .mask > .list > .item {
  display: block;
  overflow: auto;
}
.swap-slider > .nav {
  display: inline-block;
}
.swap-slider > .nav .btn {
  background-color: #e6bb55;
  color: #DFA929;
  display: block;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}
.swap-slider > .nav .btn:hover {
  background: #dfa929;
  color: #b98b1c;
}
.swap-slider > .nav .btn.thumb {
  width: auto;
  height: auto;
  padding: 0;
}
.swap-slider > .nav-btn .btn {
  background-color: #e6bb55;
  color: #DFA929;
}
.swap-slider.set-nav-dots > .radio-1:checked ~ .nav > .nav-dots .btn-1 {
  background-color: black;
}
.swap-slider.set-nav-dots > .radio-2:checked ~ .nav > .nav-dots .btn-2 {
  background-color: black;
}
.swap-slider.set-nav-dots > .radio-3:checked ~ .nav > .nav-dots .btn-3 {
  background-color: black;
}
.swap-slider.set-nav-dots > .radio-4:checked ~ .nav > .nav-dots .btn-4 {
  background-color: black;
}
.swap-slider.set-nav-dots > .radio-5:checked ~ .nav > .nav-dots .btn-5 {
  background-color: black;
}
.swap-slider.set-nav-dots .nav-dots {
  visibility: visible;
  opacity: 1;
  text-align: center;
  display: grid;
  grid-gap: 0.25rem;
  grid-auto-flow: column;
}
.swap-slider.set-nav-dots .nav-dots > .btn {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: #DFA929;
  padding: 0;
}
.swap-slider.set-nav-dots .nav-dots > .btn:hover {
  background-color: #f6e7c4;
}
.swap-slider.set-nav-btn-before .nav-btn, .swap-slider.set-nav-btn-next .nav-btn {
  visibility: visible;
  opacity: 1;
  display: block;
}
.swap-slider.set-nav-btn-before .nav-btn > .btn, .swap-slider.set-nav-btn-next .nav-btn > .btn {
  padding: 0.75rem 0.25rem;
  position: absolute;
}
.swap-slider .autoplay-btn .icon.icon-cl-play {
  visibility: hidden;
  opacity: 0;
}
.swap-slider .autoplay-btn .icon.icon-cl-break {
  visibility: visible;
  opacity: 1;
}
.swap-slider .autoplay-btn {
  display: inline-block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.swap-slider .autoplay-btn .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 1.5;
  text-align: center;
}
.swap-slider .autoplay-btn .icon::before {
  margin: 0;
  padding: 0;
}
.swap-slider .autoplay-btn .icon.icon-cl-play, .swap-slider .autoplay-btn .icon.icon-cl-break {
  visibility: hidden;
  opacity: 0;
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../system/CrayssnLabs/Base/_resources/scss/components/swap/_basic.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_box-sizing.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_visibility.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_flex.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_transform.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/component/_swap.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_transition.scss%22,%22compile.scss%22,%22combined-variables.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAUA;EAMG;;AAEA;EAEG;EACA;;AAGH;ECrBA,YAFuB;ED0BpB;;AAGH;AAAA;EEkCA;EACA;EAtBA,SAHkC;EAY/B,SAZgB;EFNhB;EACA;;AAGH;EAEG;;AAGH;EAEG;EACA;;AAEA;EAEG;;AAIN;EEUA;EACA;EChDA,SAT2B;EHkDxB;EACA;;AAGH;EAEG;EACA;EACA;EACA;;AAEA;EI9BH;EACA;EAzBG;;AJ2DG;EAEG;;AAGH;EAEG;;AAQN;EE/BH;EACA;EFiCM;;;AKnFN;EAEG;EACA;EACA;EACA;;AAEA;EAEG;EACA;EACA;;AAEA;EAEG;EACA;EACA;;AAQN;EAEG;EACA;EACA;ECRN,YAPU;;ADoBV;EAEG;;AAMM;EAEG;;AAEA;EAEG;;AANN;EAEG;;AAEA;EAEG;;AAgET;EAIM;;AA1EH;EAEG;;AAEA;EAEG;;AAgET;EAIM;;AAJN;EAIM;;AA1EH;EAEG;;AAEA;EAEG;;AAgET;EAIM;;AAJN;EAIM;;AAJN;EAIM;;AA1EH;EAEG;;AAEA;EAEG;;AAgET;EAIM;;AAJN;EAIM;;AAJN;EAIM;;AAJN;EAIM;;AAoBZ;EA7EM;EACA;;AAIN;EAEG;;AAiLH;EAxKY;;AAEA;EAEG;;AAoKf;EAxKY;;AAEA;EAEG;;AAiCT;EASM;;AA0HZ;EAxKY;;AAEA;EAEG;;AAiCT;EASM;;AATN;EASM;;AA0HZ;EAxKY;;AAEA;EAEG;;AAiCT;EASM;;AATN;EASM;;AATN;EASM;;AA0HZ;EAxKY;;AAEA;EAEG;;AAiCT;EASM;;AATN;EASM;;AATN;EASM;;AATN;EASM;;AA0HZ;EAzJM;;AAIG;EAEG;EACA;;AE9FZ;EAEG;;AAEA;EAEG,kBCgjBW;ED/iBX,OC8iBQ;ED7iBR;EACA;EACA;EACA;EACA;;AAEA;EAEG;EACA;;AAGH;EAEG;EACA;EACA;;AAON;EAEG,kBCqhBW;EDphBX,OCmhBQ;;AHlXX;EEzJG,kBCghBe;;AHvXlB;EEzJG,kBCghBe;;AHvXlB;EEzJG,kBCghBe;;AHvXlB;EEzJG,kBCghBe;;AHvXlB;EEzJG,kBCghBe;;AD7gBlB;ELCH;EACA;EKCM;EACA;EACA;EACA;;AAEA;EAEG;EACA;EACA;EACA,kBC8fK;ED7fL;;AAEA;EAEG,kBC0fQ;;ADjfjB;EL1BH;EACA;EK4BM;;AAEA;EAEG;EACA;;AASH;ELrCN;EACA;;AKyCM;ELhDN;EACA;;AKsDA;EAEG;EACA;EACA;EACA;EACA;;AAEA;EAEG;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEG;EACA;;AAGH;EL1EN;EACA%22,%22file%22:%22output-69216d6320b55.css%22%7D */