body {
  margin: auto;
  color: rgba(0, 0, 0, 0.6);
  width: 100%;
  font-family: "Roboto",sans-serif; }

a {
  text-decoration: none;
  color: rgba(14, 13, 13, 0.7); }

.f-i {
  opacity: 0.0;
  transform: translate(0, 50px);
  transition: all 1200ms; }

.scroll-in {
  opacity: 1;
  transform: translate(0, 0); }

@media screen and (min-width: 320px) and (max-width: 767px) {
  body {
    background-color: white;
    font-size: 0;
    width: 100%; }
  .sign-up {
    position: relative;
    top: 190px;
    width: 100%;
    text-align: center; }
    .sign-up img {
      width: 90px;
      height: 90px; }
    .sign-up p {
      margin: 10px 0 0 12px;
      font-size: 10px; }
  header {
    width: 100%;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    height: 90px;
    background-color: white; }
  .header-logo img {
    width: 85px;
    height: 25px;
    padding-left: 15px;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    padding: 9px; }
  .list-icon {
    position: fixed;
    top: 30px;
    right: 40px;
    display: block;
    z-index: 110;
    font-size: 25px;
    color: rgba(14, 13, 13, 0.7);
    transition: 2s;
    cursor: pointer; }
  li {
    list-style: none; }
  .side-open {
    transform: translateX(-165px);
    z-index: 120; }
  .responsive-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 110;
    background-color: white;
    width: 50%;
    height: 100%;
    color: white; }
  ul {
    padding-left: 0; }
  .rsp-list-item {
    position: relative;
    top: 100px;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    margin: 7px 5px 5px 5px;
    padding-left: 50px; }
  .header-list-wrapper {
    display: none; }
  li:hover {
    opacity: 0.7;
    font-size: 14px; }
  .clear {
    clear: both; }
  #first {
    position: relative;
    top: 0;
    background-image: url("./img/first.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    width: 100%; }
  .music-container {
    display: none; }
  .responsive-item {
    position: relative;
    top: 50px;
    display: inline-block;
    width: 100%;
    height: 230px;
    background-color: white;
    text-align: center; }
  .rsp-m-heading {
    position: relative;
    top: 20px;
    left: 18px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px; }
  .responsive-item img {
    display: inline-block;
    width: 28%;
    height: auto;
    margin: 5px; }
  .rsp-m-item h5 {
    margin-left: 3px;
    margin-top: 3px; }
  #second {
    position: relative;
    top: 0;
    height: 250px;
    width: 100%;
    background-image: url("./img/second.jpg");
    background-size: cover;
    background-repeat: no-repeat; }
  .live-container {
    position: relative;
    top: 0;
    display: inline-block;
    width: 100%;
    height: 400px;
    background-color: white;
    text-align: center; }
  .l-heading {
    position: relative;
    top: 20px;
    right: 140px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px; }
  .live-contents {
    display: flex;
    position: relative;
    top: 40px;
    font-weight: 300; }
    .live-contents img {
      display: block;
      position: relative;
      top: 0;
      box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
      width: 80%;
      margin: auto;
      height: auto;; }
      .live-contents .img_sec{
        display: none;
      }
    .live-contents p {
      position: relative;
      top: 5px;
      font-size: 10px; }
  .next-live h2 {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 20px;
    font-size: 10px; }
  .next-live-2 p{
    display: none;
  }
  .l-title {
    font-size: 11px;
    padding-top: 15px;
    display: none; }
  .next-live {
    text-align: center;
    font-size: 10px;
    display: none; }
  .next-live-2 {
    position: relative;
    top: -40px;
    left: 80px;
    font-weight: 400; }
  #third {
    position: relative;
    top: 0;
    width: 100%;
    background-image: url("./img/third.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px; }
  .video-container, #fourth, .about-container, #fifth {
    display: none; }
  .form-container {
    display: inline-block;
    position: relative;
    top: 0;
    background-color: white;
    width: 100%;
    height: 400px; }
  .f-heading {
    position: relative;
    top: 20px;
    left: 20px;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px; }
  .form-contents {
    position: relative;
    top: 30px;
    width: 100%;
    height: 400px;
    margin: 0;
    text-align: center; }
  input, textarea {
    display: inline-block;
    text-align: left;
    font-size: 10px;
    border: groove white 2px;
    resize: none; }
  input {
    width: 230px;
    height: 20px; }
  textarea {
    width: 235px;
    height: 100px; }
  label {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: "Roboto",sans-serif;
    color: rgba(14, 13, 13, 0.7);
    font-size: 12px;
    margin: 6px 0 6px 0; }
  #submit button {
    display: inline-block;
    font-size: 15px;
    height: 35px;
    border: groove white 2px;
    margin-top: 15px;
    text-align: center;
    background-color: white;
    cursor: pointer;
    border-radius: 4px 4px 4px 4px; }
  #submit font {
    color: rgba(14, 13, 13, 0.7);
    font-style: normal;
    font-size: 13px; }
  .top-scroll-icon {
    position: relative;
    top: 20px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    background-color: white; }
  .fa {
    font-size: 15px;
    color: rgba(14, 13, 13, 0.7); }
  .top-scroll-icon p {
    font-size: 15px;
    margin: 0;
    padding-bottom: 20px; }
  .thanksmessage {
    display: inline-block;
    position: relative;
    top: 120px;
    font-weight: normal;
    width: 100%;
    text-align: center;
    margin: auto;
    letter-spacing: 1px;
    font-size: 8px; }
  .home-btn {
    position: relative;
    top: 180px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 15px; }
  .home-txt {
    position: relative;
    top: 180px;
    text-align: center;
    margin-top: 2px;
    font-size: 15px;
    font-weight: bold; }
  /* music page */
  #rsp-m {
    position: fixed;
    top: 90px;
    background-image: url("./img/rsp-m.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 250px;
    z-index: -1; }
  .rsp-m-container {
    position: relative;
    top: 250px;
    display: inline-block;
    height: 1050px;
    background-color: white;
    width: 100%;
    padding-top: 30px; }
  .rsp-m-item img {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 20px 20px 0 30px; }
  .rsp-m-txt {
    display: inline-block;
    vertical-align: top;
    font-size: 10px;
    margin: 30px 0 0 20px; }
    .rsp-m-txt h2, .rsp-m-txt h3 {
      font-weight: normal;
      font-size: 10px; }
  .om {
    margin-top: 45px; }
  .rsp-v-container {
    position: relative;
    top: 250px;
    height: 700px;
    text-align: center;
    background-color: white; }
    .rsp-v-container iframe {
      position: relative;
      top: 70px;
      margin-bottom: 20px; }
  .rsp-a-container {
    position: relative;
    top: 250px;
    height: 250px;
    background-color: white; }
  .rsp-a-contents {
    display: inline-block;
    width: 100%;
    height: 250px; }
    .rsp-a-contents img {
      position: relative;
      top: 60px;
      left: 20px;
      width: 45%;
      height: 50%; }
  .rsp-a-txt {
    position: absolute;
    top: 80px;
    left: 60%;
    width: 100%; }
    .rsp-a-txt h2 {
      font-size: 10px; }
  .top-scroll-btn {
    position: relative;
    top: 280px;
    width: 100%;
    height: 50px;
    text-align: center;
    cursor: pointer;
    background-color: white; }
    .top-scroll-btn p {
      font-size: 15px;
      margin: 0;
      padding-bottom: 20px; } }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sign-up {
    position: relative;
    top: 300px;
    width: 100%;
    text-align: center; }
    .sign-up img {
      width: 140px;
      height: 140px; }
    .sign-up p {
      margin: 20px 0 0 12px;
      font-size: 13px; }
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 120px;
    z-index: 100;
    background-color: white; }
  .header-logo img {
    width: 120px;
    height: 40px;
    padding: 10px;
    margin-top: 35px;
    margin-left: 15px; }
  li {
    list-style: none; }
  .responsive-menu, header .list-icon {
    display: none; }
  .header-list-wrapper {
    position: absolute;
    top: 10px;
    left: 16%; }
  .header-list-item {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 25px 10px 0 10px;
    font-weight: bold; }
  #first {
    position: relative;
    top: 120px;
    background-image: url("./img/first.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    width: 100%; }
  .music-container {
    display: inline-block;
    position: relative;
    top: 100px;
    width: 100%;
    margin: auto;
    height: 500px;
    background-color: white; }
  .m-heading {
    padding-top: 40px;
    padding-left: 60px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px; }
  .cd-container {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 100%;
    text-align: center; }
  .cd-item {
    display: inline-block;
    width: 25%;
    margin: 0 5px 0 5px; }
    .cd-item img {
      position: relative;
      top: 10px;
      width: 100%;
      height: auto; }
      .cd-item img:hover {
        opacity: 0.7; }
  .rsp-m-heading, .responsive-item, .responsive-txt {
    display: none; }
  #second {
    position: relative;
    top: 100px;
    height: 600px;
    width: 100%;
    background-image: url("./img/second.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .live-container {
    position: relative;
    top: 100px;
    width: 100%;
    margin: auto;
    height: 500px; }
  .live-contents {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 600px;
    margin: auto; }
    .live-contents img{
      align-self: center;
      width: 50%;
      margin: 0 20px;
    }
    .live-contents h1, .live-contents h2 {
      font-size: 12px; }
  .l-heading {
    padding-top: 40px;
    padding-left: 60px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px; }
  .live-contents p {
    font-size: 15px;
    padding-bottom: 10px; }
  .next-live {
    display: inline-block;
    position: relative;
    top: 20px;
    left: 420px;
    text-align: center; }
  .next-live-2 {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 5%;
    right: 5%; }
    .next-live-2 p {
      font-size: 15px;
    display: none;}
  .l-title {
    font-size: 35px;
    margin: 15px 0 20px 0; }
  #third {
    position: relative;
    top: 100px;
    height: 600px;
    width: 100%;
    background-image: url("./img/third.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .video-container {
    position: relative;
    top: 100px;
    width: 100%;
    margin: auto;
    height: 500px; }
  .v-heading {
    padding-top: 40px;
    padding-left: 60px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px; }
  .video-contents {
    position: relative;
    top: 10px;
    left: 15%;
    display: inline-block;
    height: 500px; }
    .video-contents iframe {
      width: 270px;
      height: 160px;
      margin: 0 5px 10px 5px; }
  #fourth {
    position: relative;
    top: 100px;
    height: 600px;
    width: 100%;
    background-image: url("./img/fifth.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .about-container {
    position: relative;
    top: 100px;
    width: 100%;
    margin: auto;
    height: 500px; }
  .about-contents {
    display: inline-block; }
    .about-contents img {
      position: relative;
      top: 40px;
      left: 10%;
      display: inline-block;
      width: 40%;
      height: 40%; }
  .about-txt {
    position: absolute;
    top: 35%;
    left: 60%;
    width: 100%;
    display: inline-block;
    font-size: 11px;
    font-weight: 300; }
  #fifth {
    position: relative;
    top: 100px;
    height: 600px;
    width: 100%;
    background-image: url("./img/fourth.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .form-container {
    position: relative;
    top: 100px;
    width: 100%;
    margin: auto;
    height: 500px; }
  .f-heading {
    padding-top: 40px;
    padding-left: 60px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px; }
  .form-contents {
    width: 100%;
    text-align: center; }
  input, textarea {
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    width: 450px;
    border: solid 2px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.05); }
  input {
    display: inline-block;
    width: 450px;
    height: 25px; }
  textarea {
    height: 180px; }
  label {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.4); }
  #submit button {
    display: inline-block;
    font-size: 20px;
    height: 40px;
    border: solid 2px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.08);
    margin-top: 15px;
    text-align: center;
    -webkit-appearance: none; }
  #submit font {
    color: rgba(0, 0, 0, 0.4);
    padding: 20px 5px 20px 5px; }
  .top-scroll-icon {
    position: relative;
    top: 30px;
    width: 100%;
    height: 80px;
    text-align: center;
    cursor: pointer; }
  .fa {
    font-size: 25px;
    color: rgba(14, 13, 13, 0.7); }
  .top-scroll-icon p {
    margin: 1px; }
  .thanksmessage {
    position: relative;
    top: 250px;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    font-size: 14px; }
  .home-btn {
    position: relative;
    top: 350px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 20px; }
  .home-txt {
    text-align: center;
    position: relative;
    top: 350px; }
    .home-txt p {
      position: relative;
      top: 560px;
      margin-top: 2px;
      font-size: 20px;
      font-weight: bold; } }

@media screen and (min-width: 1024px) and (max-width: 1025px) {
  .next-live, .next-live-2 {
    position: relative;
    left: 55%; }
  .video-container {
    height: 600px; }
  .video-contents iframe {
    width: 330px;
    height: 190px;
    margin: 0 10px 15px 10px; }
  .about-contents img {
    margin-left: 40px;
    width: 35%;
    height: 35%; } }

@media screen and (min-width: 1025px) {
  .sign-up {
    position: relative;
    top: 300px;
    width: 100%;
    text-align: center; }
    .sign-up img {
      width: 140px;
      height: 140px; }
    .sign-up p {
      margin: 20px 0 0 12px;
      font-size: 13px; }
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 120px;
    z-index: 100;
    background-color: white; }
  .header-logo img {
    width: 160px;
    height: 45px;
    padding: 10px;
    margin-top: 25px;
    margin-left: 45px;
    float: left; }
  li {
    list-style: none; }
  .responsive-menu, header .list-icon {
    display: none; }
  .header-list-wrapper {
    margin-left:30%;
    margin-top: 25px; }
  .header-list-item {
    float: left;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 25px 10px 0 15px;
    font-weight: bold; }
  li:hover {
    opacity: 0.7;
    font-size: 12px; }
  .clear {
    clear: both; }
  #first {
    position: relative;
    top: 110px;
    background-image: url("./img/first.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
    width: 100%; }
  .music-container {
    position: relative;
    top: 100px;
    width: 100%;
    margin: auto;
    height: 560px;
    background-color: white; }
  .m-heading {
    padding-top: 10px;
    padding-left: 120px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px; }
  .cd-container {
    position: relative;
    top: 60px;
    width: 1170px;
    margin: auto;
    text-align: center; }
  .cd-item {
    display: inline-block;
    margin: 12px; }
    .cd-item img {
      display: inline-block;
      width: 280px;
      height: 280px; }
      .cd-item img:hover {
        opacity: 0.7; }
  .responsive-item, .responsive-txt {
    display: none; }
  #second {
    position: relative;
    top: 100px;
    height: 800px;
    width: 100%;
    background-image: url("./img/second.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .live-container {
    position: relative;
    top: 100px;
    width: 1170px;
    margin: auto;
    height: 600px; }
  .live-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto; }
    .live-contents h1, .live-contents h2 {
      font-size: 17px; }
  .l-heading {
    margin-left: 52px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px; }
  .live-contents img {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    width: 50%;
    height: auto;
    margin: 0 20px;
    }
    .live-contents .img_sec{
      width: 370px;
      margin-left: 120px;
    }
  .live-contents p {
    font-size: 20px;
    padding-bottom: 15px; }
  .next-live {
    display: inline-block;
    position: relative;
    top: -40px;
    left: 250px;
    text-align: center; }
  .next-live-2 {
    display: inline-block;
    position: relative;
    top: 10px;
    left: 300px; }
    .next-live-2 p {
      font-size: 22px; }
  .l-title {
    font-size: 20px;
    margin: 30px 0 60px 0; }
  #third {
    position: relative;
    top: 100px;
    height: 800px;
    width: 100%;
    background-image: url("./img/third.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .video-container {
    position: relative;
    top: 100px;
    width: 1170px;
    margin: auto;
    height: 600px; }
  .v-heading {
    font-size: 30px;
    font-weight: bold;
    margin-left: 52px;
    letter-spacing: 2px; }
  .video-contents {
    display: inline-block;
    margin-left: 190px; }
    .video-contents iframe {
      margin-bottom: 20px;
      margin-right: 20px; }
  #fourth {
    position: relative;
    top: 100px;
    height: 800px;
    width: 100%;
    background-image: url("./img/fifth.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .about-container {
    position: relative;
    top: 100px;
    width: 1170px;
    margin: auto;
    height: 600px; }
  .v-heading {
    font-size: 30px;
    font-weight: bold;
    margin-left: 52px;
    letter-spacing: 2px; }
  .about-contents {
    display: inline-block;
    margin-left: 190px; }
    .about-contents img {
      position: relative;
      top: 50px;
      display: inline-block;
      width: 400px;
      height: 300px; }
  .about-txt {
    position: absolute;
    top: 120px;
    left: 570px;
    width: 100%;
    display: inline-block;
    font-size: 11px;
    font-weight: 300; }
  #fifth {
    position: relative;
    top: 100px;
    height: 800px;
    width: 100%;
    background-image: url("./img/fourth.jpg");
    background-repeat: no-repeat;
    background-size: cover; }
  .form-container {
    position: relative;
    top: 100px;
    width: 1170px;
    margin: auto;
    height: 700px; }
  .f-heading {
    text-align: left;
    font-size: 25px;
    font-weight: bold;
    margin-left: 52px;
    letter-spacing: 1px; }
  .form-contents {
    width: 900px;
    margin: auto;
    text-align: center; }
  input, textarea {
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    width: 450px;
    border: solid 2px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.05); }
  input {
    display: inline-block;
    width: 450px;
    height: 25px; }
  textarea {
    height: 200px; }
  label {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.4); }
  #submit button {
    display: inline-block;
    font-size: 20px;
    height: 40px;
    border: solid 2px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.08);
    margin-top: 15px;
    text-align: center;
    -webkit-appearance: none; }
  #submit font {
    color: rgba(0, 0, 0, 0.4);
    padding: 20px 5px 20px 5px; }
  .top-scroll-icon {
    position: relative;
    top: 30px;
    width: 100%;
    text-align: center;
    cursor: pointer; }
  .fa {
    font-size: 25px;
    color: rgba(14, 13, 13, 0.7); }
  .top-scroll-icon p {
    margin: 1px; }
  .thanksmessage {
    position: relative;
    top: 250px;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    font-size: 14px; }
  .home-btn {
    position: relative;
    top: 350px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 20px; }
  .home-txt {
    text-align: center;
    position: relative;
    top: 350px; }
    .home-txt p {
      position: relative;
      top: 560px;
      margin-top: 2px;
      font-size: 20px;
      font-weight: bold; } }