@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", sans-serif;
  color: #000;
  min-height: 100vh;
  background: linear-gradient(146deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0) 50%,rgba(9, 9, 9, 0) 50%, rgba(9, 9, 9, 0) 100%),linear-gradient(213deg, rgba(91, 91, 91, 0.01) 0%, rgba(91, 91, 91, 0.01) 50%,rgba(202, 202, 202, 0.01) 50%, rgba(202, 202, 202, 0.01) 100%),linear-gradient(138deg, rgba(134, 134, 134, 0.08) 0%, rgba(134, 134, 134, 0.08) 50%,rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.08) 100%),linear-gradient(31deg, rgba(236, 236, 236, 0.04) 0%, rgba(236, 236, 236, 0.04) 50%,rgba(164, 164, 164, 0.04) 50%, rgba(164, 164, 164, 0.04) 100%),linear-gradient(187deg, rgba(46, 46, 46, 0.06) 0%, rgba(46, 46, 46, 0.06) 50%,rgba(222, 222, 222, 0.06) 50%, rgba(222, 222, 222, 0.06) 100%),linear-gradient(354deg, rgba(75, 75, 75, 0.03) 0%, rgba(75, 75, 75, 0.03) 50%,rgba(247, 247, 247, 0.03) 50%, rgba(247, 247, 247, 0.03) 100%),linear-gradient(242deg, rgba(122, 122, 122, 0.01) 0%, rgba(122, 122, 122, 0.01) 50%,rgba(179, 179, 179, 0.01) 50%, rgba(179, 179, 179, 0.01) 100%),linear-gradient(20deg, rgba(136, 136, 136, 0.04) 0%, rgba(136, 136, 136, 0.04) 50%,rgba(100, 100, 100, 0.04) 50%, rgba(100, 100, 100, 0.04) 100%),linear-gradient(90deg, #f3824e,#d4eba1,#7fbf19);
}

li {
  list-style: none;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

.section-wrap {
  padding: 3%;
}

.wrapper {
  max-width: 960px;
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-top: 150px;
}
.header .title {
  position: relative;
  font-weight: bold;
  font-family: "Quicksand", sans-serif;
  font-size: 40px;
  letter-spacing: .1em;
  color: #233567;
}

.footer {
  text-align: center;
  color: #233567;
  font-size: 20px;
}

.slider-wrap {
  width: 100%;
  height: 300px;
  background: transparent;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.slider-wrap .slider {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
.slider-wrap .slider .index {
  width: 50px;
  height: 100%;
  color: #fff;
  font-weight: bold;
  border: 1px solid #233567;
  background: #315b96;
  border-radius: 25px;
}
.slider-wrap .slider .index span {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.slider-wrap .slider .img {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #233567;
  font-weight: bold;
  width: calc(100% - 40px);
  border-radius: 25px;
  background: #ffdfdf;
  transition: width .7s;
}
.slider-wrap .slider.current {
  width: 100%;
}
.slider-wrap .slider.current .img {
  width: calc(100% - 40px);
}