* {
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: "Source Sans Pro", sans-serif;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #2b2b2b;
}

body, nav, header, section {
  width: 100%;
}

.grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1280px) {
  .grid {
    padding: 0 clamp(1em, 6vw, 3em);
  }
}

.full, .img, main .form .photo img, header .swiper-slide img, section#featured-album .card .cover img, section#featured-album .list-album .cover img, section#album .banner img, section#live .chat .list .photo img, section#live .list-video .cover img, section#schedule .jadwal .list .thumb img, section .content .list img, .member .thumb img, .preference .photo img, .member-page .banner img, main, main .close, section .kosong, section#live .embed iframe, section#live .embed .placeholder, section#live .embed .placeholder#trans, section#live .chat .msg-box, .swiper-container {
  width: 100%;
  height: 100%;
}

.img, main .form .photo img, header .swiper-slide img, section#featured-album .card .cover img, section#featured-album .list-album .cover img, section#album .banner img, section#live .chat .list .photo img, section#live .list-video .cover img, section#schedule .jadwal .list .thumb img, section .content .list img, .member .thumb img, .preference .photo img, .member-page .banner img {
  -o-object-fit: cover;
     object-fit: cover;
}

.full-h {
  width: 100%;
  height: 100vh;
  min-height: 540px;
}

.trans, main, #float-player, #float-player .control .button, #float-player .info .bar .play .state, nav .cta, nav .nav-down, nav .nav-down .logo, nav .nav-down .list, section .cta, section#featured-album .card .function span, section#featured-album .card .playlist .all, section#featured-album .card .playlist .row:not(:first-child)::after, section#featured-album .card .playlist .faq-list .list span:not(:first-child)::after, .faq-list .list section#featured-album .card .playlist span:not(:first-child)::after, section#featured-album .list-album .list, section#featured-album .list-album .cover, section#album .list-music .row p i, section#album .list-music .faq-list .list span p i, .faq-list .list section#album .list-music span p i, section#contact .info a, section#live .list-video .list, section#live .list-video .cover, section .content .list img, .preference .photo label, .group .box .cta, .faq-list .list .title, .faq-list .list span.arrow, .faq-list .list .ph, .faq-list .list .isi, footer .grid .menu .list, footer .grid .sosmed .list i {
  -webkit-transition: ease .4s;
  transition: ease .4s;
}

.grad, section#featured-album, section#contact, section#podcast, .bg-grad {
  background: linear-gradient(45deg, #A6DEFF 0%, #E3F5FF 100%);
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: none;
  position: fixed;
  top: 0;
  z-index: 25;
}

main .close {
  content: '';
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

main.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-btn {
  cursor: pointer;
  z-index: 2;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
  margin-right: -1em;
}

@media (min-width: 961px) {
  .menu-btn {
    display: none;
  }
}

.menu-btn .bar1,
.menu-btn .bar2,
.menu-btn .bar3 {
  background: #6920D9;
  width: 40px;
  height: 4px;
  border-radius: 5px;
  margin: 8px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.menu-btn .bar1 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.menu-btn .bar2 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.menu-btn.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-10px, 8px);
          transform: rotate(-45deg) translate(-10px, 8px);
}

.menu-btn.change .bar2 {
  opacity: 0;
}

.menu-btn.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-9px, -7px);
          transform: rotate(45deg) translate(-9px, -7px);
}

#float-player {
  width: 100%;
  height: 50px;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
  padding: 10px 0;
  background: #f5f6f8;
  position: fixed;
  bottom: -50px;
  z-index: 4;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

@supports ((-webkit-backdrop-filter: blur(16px) brightness(0.9)) or (backdrop-filter: blur(16px) brightness(0.9))) {
  #float-player {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(18px) brightness(1.2);
            backdrop-filter: blur(18px) brightness(1.2);
  }
}

#float-player .grid,
#float-player .control,
#float-player .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
}

#float-player .control {
  height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#float-player .control .button {
  cursor: pointer;
  font-size: 14px;
  color: #282C36;
  padding: 0 10px;
}

#float-player .control .button:hover {
  color: #6920D9;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

#float-player .control .state .fa-pause {
  display: none;
}

#float-player .control .state .fa-play {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#float-player .control .state.play .fa-pause {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#float-player .control .state.play .fa-play {
  display: none;
}

#float-player .info {
  -webkit-box-flex: 9;
      -ms-flex: 9;
          flex: 9;
  display: -ms-grid;
  display: grid;
  grid-gap: 0 1em;
  -ms-grid-columns: auto 10fr 1fr;
      grid-template-columns: auto 10fr 1fr;
  padding-left: 2em;
  margin-left: 2em;
  border-left: 1px solid #282C36;
}

#float-player .info p {
  margin: 0;
}

#float-player .info .bold {
  font-weight: 600;
}

@media (max-width: 540px) {
  #float-player .info {
    display: none;
  }
}

#float-player .info .bar {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#float-player .info .bar .slider {
  width: 101.9%;
  left: -1.9%;
  z-index: 5;
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

#float-player .info .bar .track,
#float-player .info .bar .play {
  width: 100%;
  height: 2px;
  background: rgba(147, 149, 154, 0.25);
  content: "";
  position: absolute;
  border-radius: 3px;
}

#float-player .info .bar .play {
  width: 0;
  background: #6920D9;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#float-player .info .bar .play .state {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 0;
  background: #fff;
  border: 2px solid #6920D9;
}

#float-player .info .bar:hover .state {
  background: #6920D9;
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
  border-color: transparent;
}

#float-player .info #currenttitle {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-transform: capitalize;
  position: relative;
}

@media (max-width: 540px) {
  #float-player {
    height: auto;
    max-height: 50px;
  }
  #float-player .state i {
    width: 35px;
    height: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    border-radius: 50%;
    border: 1px solid #282C36;
  }
}

#float-player.active {
  bottom: 0;
}

main .form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  border-top: 5px solid #6920D9;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 2;
  width: 100%;
  max-width: 350px;
  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 2em;
  display: none;
}

main .form h1 {
  font-weight: 600;
  margin: 0;
  margin-bottom: 10px;
}

main .form .photo {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

main .form .photo img {
  min-width: 150px;
  min-height: 150px;
}

main .form .photo label {
  position: absolute;
  z-index: 2;
  padding: 8px 1em;
  cursor: pointer;
  background: #fff;
  border: 1px solid #6920D9;
  border-radius: 50px;
  -webkit-transform: scale(0);
          transform: scale(0);
}

main .form .photo label input {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}

main .form .photo label:hover {
  background: #6920D9;
  color: #fff;
}

main .form .photo:hover label {
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

main .form .input {
  width: 100%;
  margin-bottom: 1em;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

main .form .input .disabled {
  opacity: 0.5;
  cursor: no-drop;
}

main .form .input input {
  width: 100%;
  border: none;
  outline: none;
  padding: 1em;
  border-bottom: 2px solid #93959A;
}

main .form .input .focus {
  width: 0;
  height: 2px;
  left: 0;
  bottom: 0;
  content: "";
  background: #6920D9;
  position: absolute;
}

main .form .input input:focus ~ .focus {
  width: 100%;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

main .form .split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 1em auto;
  width: 100%;
}

main .form .split > * {
  margin: 0 5px;
}

main .form .cta {
  padding: 10px 1em;
  border: 1px solid #6920D9;
  background: #6920D9;
  color: white;
  border-radius: 10px;
  outline: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}

main .form .cta:hover {
  background: #fff;
  color: #6920D9;
}

main .form .reverse {
  padding: 10px 1em;
  border: 1px solid #282C36;
  background: #fff;
  color: #282C36;
  border-radius: 10px;
  outline: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}

main .form .reverse:hover {
  background: #282C36;
  color: white;
}

main .form.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

main .embed {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

@media (min-width: 1280px) {
  main .embed {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

main .embed iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

nav {
  position: fixed;
  top: 0;
  z-index: 5;
  width: 100%;
}

nav .cta {
  padding: 5px 2em;
  border: 1px solid #6920D9;
  background: #6920D9;
  color: white;
  border-radius: 10px;
  outline: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 2em;
}

nav .cta:hover {
  background: #fff;
  color: #6920D9;
}

nav .profile {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: pointer;
}

nav .profile .username {
  font-weight: 600;
}

nav .profile .drop-menu {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: none;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 10px 2em;
  border-bottom: 5px solid #6920D9;
  background: #fff;
  padding-left: 10px;
  width: 180px;
  top: 20px;
  right: 0;
  -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
}

nav .profile .drop-menu .item {
  padding: 5px;
  color: #282C36;
}

nav .profile .drop-menu .item:hover {
  color: #6920D9;
}

nav .profile.active .username,
nav .profile.active .username i {
  color: rgba(233, 233, 234, 0.75);
}

nav .profile.active .drop-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

nav .nav-top {
  background: linear-gradient(45deg, #175AF2 0%, #6920D9 100%);
  padding: 10px clamp(2em, 4vw, 5em);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

nav .nav-top .list {
  margin: 0 0 0 2em;
  color: #E9E9EA;
  font-weight: 600;
}

nav .nav-down {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-transform: uppercase;
  padding: 0 clamp(2em, 4vw, 5em);
  height: auto;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(0%, rgba(0, 0, 0, 0)), to(#000));
  background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, #000 100%);
}

nav .nav-down .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

nav .nav-down .logo {
  height: 100px;
  overflow: hidden;
  position: relative;
  -webkit-transform: translateY(1.5em);
          transform: translateY(1.5em);
  -webkit-filter: grayscale(1) brightness(4) contrast(2);
          filter: grayscale(1) brightness(4) contrast(2);
}

nav .nav-down .logo img {
  width: auto;
  height: 100px;
}

nav .nav-down #logo-brand {
  display: none;
}

nav .nav-down .list {
  padding: 0 5px;
  margin-left: clamp(1em, 2.5vw, 3em);
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 12px;
  color: #fff;
}

nav .nav-down .list:not(.profile):hover {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  opacity: 0.65;
}

nav .nav-down .list.active {
  color: #6920D9;
}

@media (min-width: 961px) {
  nav .nav-down.active {
    background: #fff;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  }
  nav .nav-down.active .logo {
    height: 68px;
    -webkit-filter: grayscale(0) brightness(1) contrast(1);
            filter: grayscale(0) brightness(1) contrast(1);
    -webkit-transform: translateY(0) scale(0.65);
            transform: translateY(0) scale(0.65);
  }
  nav .nav-down.active .list {
    color: #555555;
  }
}

@media (max-width: 960px) {
  nav .nav-down {
    height: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background: #fff;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  }
  @-webkit-keyframes slide {
    from {
      -webkit-transform: translateY(-4em);
              transform: translateY(-4em);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes slide {
    from {
      -webkit-transform: translateY(-4em);
              transform: translateY(-4em);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  nav .nav-down .logo {
    overflow: hidden;
    -webkit-filter: grayscale(0) brightness(1) contrast(1);
            filter: grayscale(0) brightness(1) contrast(1);
    -webkit-transform: translateY(0) scale(0.65);
            transform: translateY(0) scale(0.65);
  }
  nav .nav-down .menu {
    padding: 1em 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    height: auto;
    display: none;
    -webkit-animation: ease 0.8s both;
            animation: ease 0.8s both;
  }
  nav .nav-down .menu.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation-name: slide;
            animation-name: slide;
  }
  nav .nav-down .list {
    margin: 0;
    padding: 10px;
    color: #555555;
  }
  nav .nav-down .list:not(:last-child) {
    border-bottom: 1px solid #93959A;
    width: 100%;
  }
  nav .nav-down .cta {
    margin: 0;
    margin-top: 1em;
  }
}

@media (max-width: 960px) {
  header {
    margin-top: 88px;
  }
}

header .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  max-height: 85vh;
}

section {
  padding: 4em 0;
}

section h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 28px;
}

section h2, section#schedule .upper h1 {
  font-size: 20px;
  font-weight: 400;
}

section .cta {
  padding: 10px 2em;
  border: 1px solid #6920D9;
  background: #6920D9;
  color: white;
  border-radius: 10px;
  outline: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  cursor: pointer;
  background: linear-gradient(45deg, #175AF2 0%, #6920D9 100%);
}

section .cta:hover {
  background: #fff;
  color: #6920D9;
}

section#featured-album {
  position: relative;
}

section#featured-album.page {
  background: #fff !important;
}

section#featured-album .content {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: (minmax(325px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  min-height: 550px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  position: relative;
  z-index: 1;
}

section#featured-album .content > * {
  text-transform: capitalize;
}

section#featured-album .tagline h2, section#featured-album .tagline section#schedule .upper h1, section#schedule .upper section#featured-album .tagline h1 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

section#featured-album .tagline .title,
section#featured-album .tagline .album {
  font-size: 4rem;
  line-height: 4rem;
  margin: 0;
  letter-spacing: 5px;
}

section#featured-album .tagline .title {
  font-weight: 700;
  margin-bottom: 10px;
}

section#featured-album .tagline .title span {
  display: block;
}

section#featured-album .tagline .album {
  font-weight: 400;
}

section#featured-album .card {
  background: #fff;
  border-radius: 10px;
  padding: 1em 0;
  max-width: 480px;
  position: relative;
  right: 0;
  -webkit-box-shadow: 0 10px 20px rgba(40, 44, 54, 0.1);
          box-shadow: 0 10px 20px rgba(40, 44, 54, 0.1);
}

section#featured-album .card::before, section#featured-album .card::after {
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 10px 20px rgba(40, 44, 54, 0.1);
          box-shadow: 0 10px 20px rgba(40, 44, 54, 0.1);
  border-radius: 10px;
  content: "";
  position: absolute;
  background: #fff;
  top: 0;
  z-index: -1;
}

section#featured-album .card::before {
  right: -5em;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

section#featured-album .card::after {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  right: -2.5em;
}

section#featured-album .card p {
  margin: 0;
}

section#featured-album .card .cover {
  width: 125px;
  height: 125px;
  float: left;
  margin-right: 2em;
  margin-bottom: 2em;
  -webkit-box-shadow: 0 0 10px rgba(40, 44, 54, 0.25);
          box-shadow: 0 0 10px rgba(40, 44, 54, 0.25);
}

section#featured-album .card .side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 125px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

section#featured-album .card .function {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

section#featured-album .card .function span {
  color: #93959A;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-right: 10px;
  cursor: pointer;
}

section#featured-album .card .function span:hover {
  background: #E9E9EA;
}

section#featured-album .card .function span.active {
  color: #fff;
  background: linear-gradient(45deg, #6920D9 0%, #175AF2 100%);
}

section#featured-album .card .thumb {
  padding: 2em;
}

section#featured-album .card .thumb p {
  color: #282C36;
}

section#featured-album .card .thumb .judul {
  font-size: 22px;
  font-weight: 600;
  color: #282C36;
}

section#featured-album .card .thumb .album {
  font-size: 18px;
  font-weight: 400;
}

section#featured-album .card .playlist {
  clear: left;
  margin: 0 2em 1em 0;
  min-height: 350px;
  max-height: 450px;
  position: relative;
}

section#featured-album .card .playlist .all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: calc(100% - 2em);
  text-align: center;
  float: right;
  margin: 2em 0;
  border: 1px solid #6920D9;
  padding: 10px;
  border-radius: 10px;
  color: #6920D9;
  font-weight: 600;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

section#featured-album .card .playlist .all:hover {
  background: linear-gradient(45deg, #6920D9 0%, #175AF2 100%);
  color: #fff;
  border-color: transparent;
}

section#featured-album .card .playlist .row, section#featured-album .card .playlist .faq-list .list span, .faq-list .list section#featured-album .card .playlist span {
  display: -ms-grid;
  display: grid;
  grid-gap: 1em;
  -ms-grid-columns: 1fr 6fr 3fr;
      grid-template-columns: 1fr 6fr 3fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1em 0;
  position: relative;
  cursor: pointer;
}

section#featured-album .card .playlist .row:first-child p, section#featured-album .card .playlist .faq-list .list span:first-child p, .faq-list .list section#featured-album .card .playlist span:first-child p {
  font-size: 18px;
  font-weight: 600;
  padding: 0;
  text-align: left;
  color: #491009;
}

section#featured-album .card .playlist .row:not(:first-child), section#featured-album .card .playlist .faq-list .list span:not(:first-child), .faq-list .list section#featured-album .card .playlist span:not(:first-child) {
  border-bottom: 1px solid #93959A;
  padding-right: 1em;
}

section#featured-album .card .playlist .row:not(:first-child)::after, section#featured-album .card .playlist .faq-list .list span:not(:first-child)::after, .faq-list .list section#featured-album .card .playlist span:not(:first-child)::after {
  position: absolute;
  border-radius: 7.5px;
  width: 35%;
  opacity: 0;
  height: 75%;
  content: "";
  right: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(105, 32, 217, 0)), to(rgba(23, 90, 242, 0.1)));
  background: linear-gradient(90deg, rgba(105, 32, 217, 0) 0%, rgba(23, 90, 242, 0.1) 100%);
}

section#featured-album .card .playlist .row:not(:first-child):hover::after, section#featured-album .card .playlist .faq-list .list span:not(:first-child):hover::after, .faq-list .list section#featured-album .card .playlist span:not(:first-child):hover::after {
  width: 75%;
  opacity: 1;
  -webkit-transition: ease-out 1.2s;
  transition: ease-out 1.2s;
}

section#featured-album .card .playlist .row:not(:first-child) p, section#featured-album .card .playlist .faq-list .list span:not(:first-child) p, .faq-list .list section#featured-album .card .playlist span:not(:first-child) p {
  z-index: 1;
  height: 24px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

section#featured-album .card .playlist .row:not(:first-child) p:last-child, section#featured-album .card .playlist .faq-list .list span:not(:first-child) p:last-child, .faq-list .list section#featured-album .card .playlist span:not(:first-child) p:last-child {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

section#featured-album .card .playlist .row:last-child, section#featured-album .card .playlist .faq-list .list span:last-child, .faq-list .list section#featured-album .card .playlist span:last-child {
  border: none;
}

section#featured-album .card .playlist .row p:first-child, section#featured-album .card .playlist .faq-list .list span p:first-child, .faq-list .list section#featured-album .card .playlist span p:first-child {
  padding-left: 2rem;
}

section#featured-album .card .playlist .row p:last-child, section#featured-album .card .playlist .faq-list .list span p:last-child, .faq-list .list section#featured-album .card .playlist span p:last-child {
  text-align: right;
}

section#featured-album .card .playlist .row.play, section#featured-album .card .playlist .faq-list .list span.play, .faq-list .list section#featured-album .card .playlist span.play {
  font-weight: 600;
  color: #175AF2;
}

section#featured-album .list-album {
  display: -ms-grid;
  display: grid;
  grid-gap: 1em;
  -ms-grid-columns: (minmax(275px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  justify-items: center;
  cursor: pointer;
}

section#featured-album .list-album .list:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

section#featured-album .list-album .list:hover .cover {
  -webkit-box-shadow: 0 0 50px #46aaff;
          box-shadow: 0 0 50px #46aaff;
}

section#featured-album .list-album .list.all .cover {
  background: linear-gradient(45deg, #6920D9 0%, #175AF2 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

section#featured-album .list-album .cover {
  width: 250px;
  height: 250px;
  overflow: hidden;
  border-radius: 10px;
}

section#featured-album .list-album p {
  margin: 0;
}

section#featured-album .list-album .title {
  font-size: 24px;
  font-weight: 600;
  margin: 5px 0;
  color: #282C36;
}

section#featured-album .list-album .artist {
  font-size: 18px;
  font-weight: 400;
  color: #555555;
}

section#album {
  padding-top: 0;
}

section#album .banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  margin-bottom: 4em;
}

section#album .banner img {
  -webkit-filter: brightness(0.8) blur(6px);
          filter: brightness(0.8) blur(6px);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

section#album .banner .info {
  position: absolute;
  z-index: 2;
}

section#album .banner .info p {
  color: #fff;
  margin: 0;
  text-align: center;
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

section#album .banner .info p.title {
  font-size: 5rem;
  font-weight: 300;
  text-transform: uppercase;
}

section#album .banner .info p.artist {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 10px;
}

section#album .grid {
  overflow-x: auto;
}

section#album .list-music {
  min-width: 840px;
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
}

section#album .list-music .row, section#album .list-music .faq-list .list span, .faq-list .list section#album .list-music span {
  display: -ms-grid;
  display: grid;
  grid-gap: 1em;
  -ms-grid-columns: 1fr 6fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
      grid-template-columns: 1fr 6fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

section#album .list-music .row:first-child p, section#album .list-music .faq-list .list span:first-child p, .faq-list .list section#album .list-music span:first-child p {
  font-size: 16px;
  font-weight: 600;
  color: #491009;
}

section#album .list-music .row:not(:first-child), section#album .list-music .faq-list .list span:not(:first-child), .faq-list .list section#album .list-music span:not(:first-child) {
  border-bottom: 1px solid #282C36;
}

section#album .list-music .row:last-child, section#album .list-music .faq-list .list span:last-child, .faq-list .list section#album .list-music span:last-child {
  border: none;
}

section#album .list-music .row p, section#album .list-music .faq-list .list span p, .faq-list .list section#album .list-music span p {
  text-align: center;
}

section#album .list-music .row p:nth-child(2), section#album .list-music .faq-list .list span p:nth-child(2), .faq-list .list section#album .list-music span p:nth-child(2) {
  text-align-last: left;
}

section#album .list-music .row p i, section#album .list-music .faq-list .list span p i, .faq-list .list section#album .list-music span p i {
  font-size: 24px;
  color: #555555;
  cursor: pointer;
}

section#album .list-music .row p i:hover, section#album .list-music .faq-list .list span p i:hover, .faq-list .list section#album .list-music span p i:hover {
  color: #6920D9;
}

section#album .list-music .row p.disable i, section#album .list-music .faq-list .list span p.disable i, .faq-list .list section#album .list-music span p.disable i {
  cursor: no-drop;
  color: #555555;
}

section#album .list-music .row p.disable i:hover, section#album .list-music .faq-list .list span p.disable i:hover, .faq-list .list section#album .list-music span p.disable i:hover {
  opacity: 0.65;
}

section#album .list-music .row .music .pause, section#album .list-music .faq-list .list span .music .pause, .faq-list .list section#album .list-music span .music .pause {
  display: none;
}

section#contact {
  margin-bottom: 2em;
}

section#contact iframe {
  width: 100%;
  height: 550px;
}

section#contact .support {
  white-space: pre-line;
}

section#contact .content {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: (minmax(340px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

section#contact form {
  margin: 2em 0;
  background: #fff;
  padding: 2em;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

section#contact form .input {
  width: 100%;
  padding: 10px 1em;
  outline: none;
  border: none;
  border-bottom: 1px solid #282C36;
  margin-bottom: 2em;
}

section#contact form textarea {
  height: 250px;
  resize: none;
}

section#contact form .cta {
  display: inherit;
  padding: 10px 4em;
  margin: 2em 0 0 auto;
}

section#contact .info {
  font-size: 18px;
  font-weight: 600;
}

section#contact .info a {
  color: #491009;
}

section#contact .info a:hover {
  opacity: 0.5;
}

section .kosong {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0.3;
  cursor: no-drop;
}

section .kosong span {
  color: #000;
  font-size: 100px;
  font-weight: 400;
  line-height: 25px;
  margin: 0;
  -webkit-transform: rotate(45deg) scale(2);
          transform: rotate(45deg) scale(2);
}

section .kosong h2, section#schedule .kosong .upper h1, section#schedule .upper .kosong h1 {
  color: #000;
  width: 200px;
  font-size: 16px;
  line-height: 25.888px;
  text-align: center;
  font-weight: 600;
  margin-top: 4em;
}

section .hold {
  display: none;
  z-index: 2;
  opacity: 0.8;
  background: #323847;
  top: 5em;
}

section .hold h2, section#schedule .hold .upper h1, section#schedule .upper .hold h1,
section .hold span {
  color: #fff;
}

section .hold.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

section#live {
  background: #f5f6f8;
  color: #282C36;
}

section#live h1 {
  color: #282C36;
}

section#live .split .chat {
  display: none;
}

section#live .split.live {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
}

@media (max-width: 840px) {
  section#live .split.live {
    display: -ms-grid;
    display: grid;
    grid-gap: 2em;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

section#live .split.live .chat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

section#live .split .video p {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
}

section#live .embed {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

section#live .embed iframe {
  position: absolute;
  top: 0;
  z-index: 2;
}

section#live .embed .placeholder {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes goup {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: 10px;
  }
  80% {
    margin-bottom: 0;
  }
  100% {
    margin-bottom: 0;
  }
}

@keyframes goup {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: 10px;
  }
  80% {
    margin-bottom: 0;
  }
  100% {
    margin-bottom: 0;
  }
}

section#live .embed .placeholder.empty {
  z-index: 0;
  background: #fff;
}

section#live .embed .placeholder.empty h1 {
  -webkit-animation: scale 2s ease infinite both;
          animation: scale 2s ease infinite both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

section#live .embed .placeholder.empty h1 .dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 28px;
  margin-left: 10px;
}

section#live .embed .placeholder.empty h1 .dots .list {
  font-weight: 800;
  font-size: 18px;
  -webkit-animation: goup 1s ease infinite both;
          animation: goup 1s ease infinite both;
}

section#live .embed .placeholder.empty h1 .dots .list:nth-child(1) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

section#live .embed .placeholder.empty h1 .dots .list:nth-child(2) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

section#live .embed .placeholder.empty h1 .dots .list:nth-child(3) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

section#live .embed .placeholder .trans, section#live .embed .placeholder main, section#live .embed .placeholder #float-player, section#live .embed .placeholder #float-player .control .button, #float-player .control section#live .embed .placeholder .button, section#live .embed .placeholder #float-player .info .bar .play .state, #float-player .info .bar .play section#live .embed .placeholder .state, section#live .embed .placeholder nav .nav-down, nav section#live .embed .placeholder .nav-down, section#live .embed .placeholder nav .nav-down .logo, nav .nav-down section#live .embed .placeholder .logo, section#live .embed .placeholder nav .nav-down .list, nav .nav-down section#live .embed .placeholder .list, section#live .embed .placeholder .cta, section#live .embed .placeholder section#featured-album .card .function span, section#featured-album .card .function section#live .embed .placeholder span, section#live .embed .placeholder section#featured-album .card .playlist .all, section#featured-album .card .playlist section#live .embed .placeholder .all, section#live .embed .placeholder section#featured-album .card .playlist .row:not(:first-child)::after, section#featured-album .card .playlist section#live .embed .placeholder .row:not(:first-child)::after, section#live .embed .placeholder section#featured-album .card .playlist .faq-list .list span:not(:first-child)::after, section#featured-album .card .playlist .faq-list .list section#live .embed .placeholder span:not(:first-child)::after, section#live .embed .placeholder .faq-list .list section#featured-album .card .playlist span:not(:first-child)::after, .faq-list .list section#featured-album .card .playlist section#live .embed .placeholder span:not(:first-child)::after, section#live .embed .placeholder section#featured-album .list-album .list, section#featured-album .list-album section#live .embed .placeholder .list, section#live .embed .placeholder section#featured-album .list-album .cover, section#featured-album .list-album section#live .embed .placeholder .cover, section#live .embed .placeholder section#album .list-music .row p i, section#album .list-music .row p section#live .embed .placeholder i, section#live .embed .placeholder section#album .list-music .faq-list .list span p i, section#album .list-music .faq-list .list span p section#live .embed .placeholder i, section#live .embed .placeholder .faq-list .list section#album .list-music span p i, .faq-list .list section#album .list-music span p section#live .embed .placeholder i, section#live .embed .placeholder section#contact .info a, section#contact .info section#live .embed .placeholder a, section#live .embed .placeholder .list-video .list, section#live .list-video .embed .placeholder .list, section#live .embed .placeholder .list-video .cover, section#live .list-video .embed .placeholder .cover, section#live .embed .placeholder .content .list img, section#live .content .list .embed .placeholder img, section#live .embed .placeholder .preference .photo label, .preference .photo section#live .embed .placeholder label, section#live .embed .placeholder .faq-list .list .title, .faq-list .list section#live .embed .placeholder .title, section#live .embed .placeholder .faq-list .list span.arrow, .faq-list .list section#live .embed .placeholder span.arrow, section#live .embed .placeholder .faq-list .list .ph, .faq-list .list section#live .embed .placeholder .ph, section#live .embed .placeholder .faq-list .list .isi, .faq-list .list section#live .embed .placeholder .isi, section#live .embed .placeholder footer .grid .menu .list, footer .grid .menu section#live .embed .placeholder .list, section#live .embed .placeholder footer .grid .sosmed .list i, footer .grid .sosmed .list section#live .embed .placeholder i {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  width: 100%;
  height: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: linear-gradient(45deg, #4238af 0%, #c31560 100%);
  bottom: 0;
}

section#live .embed .placeholder#trans {
  content: "";
  z-index: 2;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

section#live .embed .placeholder.open {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

section#live .embed .placeholder.open .trans, section#live .embed .placeholder.open main, section#live .embed .placeholder.open #float-player, section#live .embed .placeholder.open #float-player .control .button, #float-player .control section#live .embed .placeholder.open .button, section#live .embed .placeholder.open #float-player .info .bar .play .state, #float-player .info .bar .play section#live .embed .placeholder.open .state, section#live .embed .placeholder.open nav .nav-down, nav section#live .embed .placeholder.open .nav-down, section#live .embed .placeholder.open nav .nav-down .logo, nav .nav-down section#live .embed .placeholder.open .logo, section#live .embed .placeholder.open nav .nav-down .list, nav .nav-down section#live .embed .placeholder.open .list, section#live .embed .placeholder.open .cta, section#live .embed .placeholder.open section#featured-album .card .function span, section#featured-album .card .function section#live .embed .placeholder.open span, section#live .embed .placeholder.open section#featured-album .card .playlist .all, section#featured-album .card .playlist section#live .embed .placeholder.open .all, section#live .embed .placeholder.open section#featured-album .card .playlist .row:not(:first-child)::after, section#featured-album .card .playlist section#live .embed .placeholder.open .row:not(:first-child)::after, section#live .embed .placeholder.open section#featured-album .card .playlist .faq-list .list span:not(:first-child)::after, section#featured-album .card .playlist .faq-list .list section#live .embed .placeholder.open span:not(:first-child)::after, section#live .embed .placeholder.open .faq-list .list section#featured-album .card .playlist span:not(:first-child)::after, .faq-list .list section#featured-album .card .playlist section#live .embed .placeholder.open span:not(:first-child)::after, section#live .embed .placeholder.open section#featured-album .list-album .list, section#featured-album .list-album section#live .embed .placeholder.open .list, section#live .embed .placeholder.open section#featured-album .list-album .cover, section#featured-album .list-album section#live .embed .placeholder.open .cover, section#live .embed .placeholder.open section#album .list-music .row p i, section#album .list-music .row p section#live .embed .placeholder.open i, section#live .embed .placeholder.open section#album .list-music .faq-list .list span p i, section#album .list-music .faq-list .list span p section#live .embed .placeholder.open i, section#live .embed .placeholder.open .faq-list .list section#album .list-music span p i, .faq-list .list section#album .list-music span p section#live .embed .placeholder.open i, section#live .embed .placeholder.open section#contact .info a, section#contact .info section#live .embed .placeholder.open a, section#live .embed .placeholder.open .list-video .list, section#live .list-video .embed .placeholder.open .list, section#live .embed .placeholder.open .list-video .cover, section#live .list-video .embed .placeholder.open .cover, section#live .embed .placeholder.open .content .list img, section#live .content .list .embed .placeholder.open img, section#live .embed .placeholder.open .preference .photo label, .preference .photo section#live .embed .placeholder.open label, section#live .embed .placeholder.open .faq-list .list .title, .faq-list .list section#live .embed .placeholder.open .title, section#live .embed .placeholder.open .faq-list .list span.arrow, .faq-list .list section#live .embed .placeholder.open span.arrow, section#live .embed .placeholder.open .faq-list .list .ph, .faq-list .list section#live .embed .placeholder.open .ph, section#live .embed .placeholder.open .faq-list .list .isi, .faq-list .list section#live .embed .placeholder.open .isi, section#live .embed .placeholder.open footer .grid .menu .list, footer .grid .menu section#live .embed .placeholder.open .list, section#live .embed .placeholder.open footer .grid .sosmed .list i, footer .grid .sosmed .list section#live .embed .placeholder.open i {
  height: 100%;
}

section#live .inweb,
section#live .youtube {
  position: relative;
  width: 100%;
  min-height: 250px;
  height: 100%;
  max-height: 480px;
}

section#live .inweb.active,
section#live .youtube.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 840px) {
  section#live .inweb,
  section#live .youtube {
    min-height: 480px;
  }
}

section#live .youtube {
  margin-top: 2.5em;
}

section#live .youtube iframe {
  width: 100%;
  height: 100%;
}

section#live .chat {
  background: #93959A;
  padding: 1.5em;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

section#live .chat::after {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 5em;
  left: 0;
  content: "";
  background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(0%, rgba(147, 149, 154, 0)), to(#93959A));
  background: linear-gradient(0, rgba(147, 149, 154, 0) 0%, #93959A 100%);
}

section#live .chat .title {
  font-size: 24px;
  font-weight: 600;
  color: #93959A;
  color: #fff;
  cursor: pointer;
}

section#live .chat .msg-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  height: 100%;
  max-height: 450px;
  overflow-y: auto;
  margin-top: 1.5em;
  padding-top: 1em;
}

section#live .chat .reverse {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

section#live .chat .list {
  display: -ms-grid;
  display: grid;
  grid-gap: 1em;
  -ms-grid-columns: 1fr 9fr;
      grid-template-columns: 1fr 9fr;
  padding-right: 1em;
}

section#live .chat .list .photo {
  display: inline;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
}

section#live .chat .list .user {
  text-transform: Capitalize;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  margin: 0;
  margin-top: 15px;
}

section#live .chat .list .type {
  width: 100%;
  background: #f5f6f8;
  border-radius: 10px;
  border-top-left-radius: 0;
  padding: 1em 1.5em;
  font-size: 12px;
  line-height: 19.416px;
}

section#live .chat .list.online {
  display: -ms-grid;
  display: grid;
  grid-gap: 1em;
  -ms-grid-columns: 9fr 1fr;
      grid-template-columns: 9fr 1fr;
}

section#live .chat .list.online .user {
  text-align: right;
}

section#live .chat .list.online .type {
  border-top-left-radius: 10px;
  border-top-right-radius: 0;
}

section#live .chat .pesan textarea {
  width: 100%;
  height: 100px;
  background: #282C36;
  border: none;
  outline: none;
  border-radius: 5px;
  margin-top: 1em;
  padding: 1em;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  line-height: 19.416px;
  color: #fff;
}

section#live .chat .pesan .cta {
  float: right;
  border-radius: 5px;
  padding: 5px 2em;
  margin-top: 1em;
}

section#live .list-video {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: (minmax(280px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  width: 100%;
  margin-top: 2em;
}

section#live .list-video .list {
  cursor: pointer;
}

section#live .list-video .list:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

section#live .list-video .list:hover .cover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

section#live .list-video .cover {
  width: 100%;
  aspect-ratio: 16/9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

section#live .list-video h2, section#live .list-video section#schedule .upper h1, section#schedule .upper section#live .list-video h1 {
  font-size: 24px;
  margin: 10px 0;
  font-weight: 600;
}

section#schedule .upper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

section#schedule .kosong {
  min-height: 200px;
  position: relative;
}

section#schedule .kosong h2, section#schedule .kosong .upper h1, section#schedule .upper .kosong h1 {
  font-weight: 400;
  width: auto;
}

section#schedule .jadwal {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: (minmax(280px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

section#schedule .jadwal .list {
  cursor: pointer;
}

section#schedule .jadwal .list .thumb {
  height: 230px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1em;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

section#schedule .jadwal .list .thumb::after {
  z-index: 1;
  width: 100%;
  height: 0;
  content: "";
  position: absolute;
  top: 0;
  background: linear-gradient(170deg, #fff 49%, rgba(255, 255, 255, 0) 50%);
  opacity: 0.3;
}

section#schedule .jadwal .list p {
  margin: 0;
  font-size: 12px;
}

section#schedule .jadwal .list p.title {
  color: #555555;
  font-size: 16px;
}

section#schedule .jadwal .list:hover .thumb img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

section#schedule .jadwal .list:hover .thumb::after {
  height: 100%;
  -webkit-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

section#podcast .pod-embed {
  width: 100%;
}

section#podcast .pod-embed iframe {
  width: 100%;
}

section#podcast p {
  margin-bottom: 4em;
}

section#podcast .cta .arrow-left {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #fff;
  margin-right: 10px;
}

section#podcast .cta:hover .arrow-left {
  border-left-color: #6920D9;
}

section#job .job {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  grid-gap: 2em;
  margin-bottom: 4em;
}

@media (max-width: 840px) {
  section#job .job {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
  }
}

@media (max-width: 420px) {
  section#job .job {
    display: -ms-grid;
    display: grid;
    grid-gap: 2em;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

section#job .job .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 1px solid #93959A;
  border-radius: 5px;
  padding: 1em 1.5em;
  min-height: clamp(175px, 50vw, 225px);
  background: #fff;
}

section#job .job .list p {
  color: #555555;
  margin: 0;
  text-transform: capitalize;
}

section#job .job .list p.title {
  font-weight: 600;
  text-transform: uppercase;
}

section#job .job .list .split {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

section#job .job .list .split p {
  font-size: 12px;
  text-transform: capitalize;
}

section#job .job .list .split p:last-child {
  text-align: left;
}

section#job .job .list:hover {
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}

section .inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

section .content {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: (minmax(280px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-bottom: 4em;
}

section .content .list {
  border-radius: 10px;
  height: 350px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

section .content .list .overlay {
  width: 100%;
  height: 0;
  text-align: center;
  position: absolute;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow: hidden;
  color: #fff;
}

section .content .list:hover .overlay {
  height: 100%;
}

section .content .list:hover img {
  -webkit-transition-duration: 4s;
          transition-duration: 4s;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

@media (max-width: 840px) {
  section .content .list {
    height: clamp(150px, 55vw, 300px);
  }
}

section .pagination {
  float: right;
}

section .pagination span {
  font-weight: 600;
  margin-right: 1em;
}

section .pagination a {
  margin: 0 5px;
  color: #282C36;
}

section .pagination a.active {
  color: #6920D9;
  font-weight: 600;
}

section.detail .grid, section#job-detail .grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: 1.5fr 3fr;
      grid-template-columns: 1.5fr 3fr;
}

@media (max-width: 960px) {
  section.detail .grid, section#job-detail .grid {
    display: -ms-grid;
    display: grid;
    grid-gap: 2em;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

section.detail .grid img, section#job-detail .grid img {
  width: 100%;
  height: auto;
}

section.detail .grid iframe, section#job-detail .grid iframe {
  width: 100% !important;
  height: 34vw;
  max-height: 440px;
}

@media (max-width: 960px) {
  section.detail .grid iframe, section#job-detail .grid iframe {
    height: 50vw;
    max-height: none;
  }
}

section.detail .grid .link, section#job-detail .grid .link,
section.detail .grid .divider,
section#job-detail .grid .divider {
  font-weight: 600;
  color: #6920D9;
}

section.detail .grid .date, section#job-detail .grid .date {
  margin-bottom: 1em;
  color: #93959A;
}

section.detail .grid p, section#job-detail .grid p {
  color: #282C36;
}

section.detail .grid .arrow-right, section#job-detail .grid .arrow-right {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #6920D9;
  margin-right: 10px;
}

section.detail .grid a.btn, section#job-detail .grid a.btn {
  padding: 10px 4em;
  border: 1px solid #000;
  background: #000;
  color: white;
  border-radius: 10px;
  outline: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  cursor: pointer;
}

section.detail .grid a.btn:hover, section#job-detail .grid a.btn:hover {
  background: #fff;
  color: #000;
}

section#job-detail .grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: 3fr 1.5fr;
      grid-template-columns: 3fr 1.5fr;
}

@media (max-width: 960px) {
  section#job-detail .grid {
    display: -ms-grid;
    display: grid;
    grid-gap: 2em;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

section#job-detail .grid .thumb {
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  padding-bottom: 5em;
  height: auto;
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 5px solid #6920D9;
}

section#job-detail .grid .thumb > div p {
  margin: 0;
}

section#job-detail .grid .thumb > div p.bold {
  font-weight: 600;
  color: #282C36;
}

section#job-detail .grid .thumb div {
  margin-bottom: 2em;
}

section#job-detail .grid ol > li {
  margin-bottom: 10px;
}

.member .grid {
  overflow-x: initial !important;
}

.member .list {
  width: 100%;
  padding: 0.5em;
  margin: 0 0 2em;
  border: 1px solid #d7dbe3;
  display: -ms-grid;
  display: grid;
  grid-gap: 2em;
  -ms-grid-columns: 1fr 3fr;
      grid-template-columns: 1fr 3fr;
  -webkit-box-shadow: 0 10px 10px 0 rgba(147, 149, 154, 0.1);
          box-shadow: 0 10px 10px 0 rgba(147, 149, 154, 0.1);
}

.member .thumb {
  aspect-ratio: 1;
}

.member .detail, .member section#job-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.member .detail .title, .member section#job-detail .title {
  margin: 0 0 10px;
  font-size: 21px;
}

.member .detail .desc, .member section#job-detail .desc {
  font-size: 14px;
  line-height: 22.652px;
  margin: 0;
}

.member .detail .cta, .member section#job-detail .cta {
  margin: 4em 0 0;
  display: table;
}

.member .content-card {
  width: 100%;
  max-width: 540px;
  max-height: 720px;
  overflow-y: auto;
  padding: 2em;
  background: #fff;
  z-index: 5;
  text-align: center;
  border-top: 5px solid #175AF2;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
}

.member .content-card .thumb {
  aspect-ratio: initial;
  margin: 0 0 2em;
}

.preference .photo {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.preference .photo img {
  min-width: 150px;
  min-height: 150px;
}

.preference .photo label {
  position: absolute;
  z-index: 2;
  padding: 8px 1em;
  cursor: pointer;
  background: #fff;
  border: 1px solid #6920D9;
  border-radius: 50px;
  -webkit-transform: scale(0);
          transform: scale(0);
  text-align: center;
}

.preference .photo label input {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}

.preference .photo label:hover {
  background: #6920D9;
  color: #fff;
}

.preference .photo:hover label {
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.preference .form {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 2em;
  -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.preference .form h1 {
  margin: 0 0 1rem;
}

.preference .form .input {
  padding: 10px 2em;
  width: 100%;
  margin: 0 0 10px;
  outline: none;
  border: none;
  border-bottom: 1px solid #175AF2;
}

.preference .form .label,
.preference .form label {
  margin: 0 0 10px;
  width: 100%;
  cursor: pointer;
  display: block;
  color: #000;
}

.preference .form .label b,
.preference .form label b {
  color: #6920D9;
}

.preference .form .label .detail, .preference .form .label section#job-detail,
.preference .form label .detail,
.preference .form label section#job-detail {
  display: none;
}

.preference .form .label .check:checked ~ .detail, .preference .form .label .check:checked ~ section#job-detail,
.preference .form label .check:checked ~ .detail,
.preference .form label .check:checked ~ section#job-detail {
  display: block;
}

.member-page {
  padding-top: 3em;
}

.member-page .banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  margin-bottom: 4em;
}

.member-page .banner img {
  -webkit-filter: brightness(0.8) blur(6px);
          filter: brightness(0.8) blur(6px);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.member-page .banner .info {
  position: absolute;
  z-index: 2;
}

.member-page .banner .info p {
  color: #fff;
  margin: 0;
  text-align: center;
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.member-page .banner .info p.title {
  font-size: 5rem;
  font-weight: 300;
  text-transform: uppercase;
}

.member-page .banner .info p.artist {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 10px;
}

.member-page h2, .member-page section#schedule .upper h1, section#schedule .upper .member-page h1 {
  font-size: 26px;
  font-weight: bold;
}

.schedule iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.bg-grad {
  padding: 4em 0;
  margin: 4em 0;
}

.group {
  margin: 4em 0;
}

@media (min-width: 840px) {
  .group {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
  }
}

.group .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  padding: 2em;
  width: 100%;
  min-height: 250px;
  border: 1px solid #f5f6f8;
  background: #fff;
  -webkit-box-shadow: 0 1em 2em 0 rgba(147, 149, 154, 0.1);
          box-shadow: 0 1em 2em 0 rgba(147, 149, 154, 0.1);
}

.group .box p {
  font-size: 20px;
}

.group .box .cta {
  margin: 2em 0 0;
}

.faq-list {
  -webkit-box-shadow: 0 1em 2em 0 rgba(147, 149, 154, 0.1);
          box-shadow: 0 1em 2em 0 rgba(147, 149, 154, 0.1);
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
}

.faq-list .list {
  width: 100%;
}

.faq-list .list .title {
  text-transform: capitalize;
  padding: 1em 2em;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 16px;
  color: #6c757d;
}

.faq-list .list span {
  width: 35px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 1em 0 0;
}

.faq-list .list span.num {
  background: #e9ecef;
}

.faq-list .list span.arrow {
  margin: 0 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.faq-list .list .ph {
  display: none;
}

.faq-list .list .isi {
  background: #f5f6f7;
  padding: 0 2em 2em;
  font-size: 16px;
  line-height: 25.888px;
  color: #495057;
  white-space: pre-line;
}

.faq-list .list.active .title {
  background: linear-gradient(45deg, #6920D9 0%, #175AF2 100%);
  border-bottom-color: transparent;
  font-weight: 400;
  color: #fff;
}

.faq-list .list.active .ph {
  display: block;
}

.faq-list .list.active .arrow {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.faq-list .list.active span.num {
  background: rgba(52, 58, 64, 0.1);
}

footer {
  padding: 2em;
  background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(0%, #E9E9EA), to(#fff));
  background: linear-gradient(0, #E9E9EA 0%, #fff 100%);
}

footer .grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 1px solid #93959A;
  padding: 2em 0 6em 0;
}

footer .grid .menu .list {
  color: #282C36;
  margin-right: 2em;
}

footer .grid .menu .list:hover {
  opacity: 0.4;
}

footer .grid .sosmed .list i {
  font-size: 32px;
  margin-left: 2rem;
  color: #555555;
}

footer .grid .sosmed .list i:hover {
  color: #93959A;
}

footer .footer {
  text-align: center;
  padding: 1em;
  padding-bottom: 0;
  font-size: 12px;
}