/* 와이드 pc  */

.videoBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

#imgBG {
  position: fixed;
  left: 50%;
  top: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -100;
}

#content {
  width: 100%;
  background: rgba(44, 0, 62, 0.9);
  position: relative;
  margin: 0 auto;
  padding-bottom: 100px;
}

#content > section {
  margin: 0 auto;
}

#content h2 {
  position: absolute;
  top: -500px;
  width: 100%;
  text-align: center;
  font-size: var(--font-70px);
  color: var(--main-font);
  text-shadow: 1px 1px 10px rgba(0, 174, 255, 1);
}

#content .news_container {
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}

#content .news_container h3 {
  text-align: center;
  font-size: var(--font-60px);
  margin-bottom: 100px;
}

#content .news_container .huntrix_golden {
  width: 90%;
  margin: 0 auto;
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(320px, 800px) minmax(320px, 600px);
  grid-auto-rows: auto;
  gap: 1%;
  grid-template-areas:
    "a b"
    "a c";
}

#content .news_container .saja_bill {
  width: 90%;
  margin: 0 auto;
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(320px, 600px) minmax(320px, 800px);
  grid-auto-rows: auto;
  gap: 1%;
  grid-template-areas:
    "b a"
    "c a";
}

#content .huntrix_golden .huntrix_grid:nth-of-type(1),
#content .saja_bill .saja_grid:nth-of-type(1) {
  grid-area: a;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1%;
  box-shadow: 0 0 10px 3px rgba(245, 245, 245, 0.5);
  border-radius: 20px;
}

#content .saja_grid h4,
#content .huntrix_grid h4 {
  font-size: var(--font-40px);
  padding: 50px 30px 10px 50px;
}

#content .saja_grid p,
#content .huntrix_grid p {
  width: 90%;
  margin: 0 auto;
  font-size: var(--font-26px);
  line-height: 2.5rem;
}

#content .huntrix_golden .huntrix_grid:nth-of-type(2),
#content .saja_bill .saja_grid:nth-of-type(2) {
  grid-area: b;
}

#content .huntrix_golden .huntrix_grid:nth-of-type(3),
#content .saja_bill .saja_grid:nth-of-type(3) {
  grid-area: c;
}

#content .huntrix_golden .huntrix_grid:nth-of-type(4) {
  display: none;
  grid-area: d;
}

#content .saja_bill .saja_grid:nth-of-type(4) {
  grid-area: d;
  display: none;
}

#content .saja_bill .saja_grid:nth-of-type(5) {
  grid-area: e;
  display: none;
}

#content .saja_bill img,
#content .huntrix_golden img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

#content .stay_back1 {
  background: url(../images/sub4/sub4_back1.avif);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 300px;
  margin: 7% 0;
  border-radius: 2vw;
}

#content .stay_back2 {
  background: url(../images/sub4/sub4_back2.avif);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 700px;
  margin: 7% 0;
  border-radius: 2vw;
}

/* 에피소드  컨텐츠 */

#content .episodes_container {
  width: 100%;
  margin: 0 auto;
}

#content .episodes_container h3 {
  padding-top: 200px;
  text-align: center;
  font-size: var(--font-60px);
}

#content .episodes_main {
  width: 90%;
  margin: 0 auto;
}

#content .sub_nav {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content .sub_nav li {
  width: 33.33%;
  margin: 0 auto;
}

#content .sub_nav li a {
  font-family: "Orbitron", "sans-serif";
  font-size: var(--font-44px);
  line-height: 1.5rem;
  padding: 30px 25px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease-in-out;
}

#content .sub_nav li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}

#content .sub_nav li a:hover::after {
  width: 80%;
}

#content .sub_nav li a:hover {
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#content .sub_nav li a.current {
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#content #episodes_content {
  width: 100%;
  margin: 0 auto;
}

#content #episodes_content p {
  width: 90%;
  margin: 50px auto;
  text-align: center;
  font-size: var(--font-28px);
  line-height: 2.1rem;
}

#content #episodes_content .episode-images {
  width: 99%;
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 700px));
  grid-auto-rows: auto;
  justify-content: center;
  align-items: center;
  gap: 1%;
}

#content .episode-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

#content .episode-images .episode-image:nth-child(3) {
  display: none;
}


/* 애니메이션 효과 */
.scroll-ani{
  opacity: 0;
  transition: opacity 1s ease-out , transform 1s ease-out; 
}

.scroll-ani.ain-fade-in-up{
  transform: translateY(50px);
}

.scroll-ani.ani-slide-in-left{
  transform: translateX(-50px);
}

.scroll-ani.ani-slide-in-right{
  transform: translateX(50px);
}

.scroll-ani.is-visible{
  opacity: 1;
  transform: translate(0,0);
}

@media screen and (max-width: 1720px) {
  #content h2 {
    top: -500px;
    font-size: var(--font-70px);
  }

  #content .news_container {
    padding: 100px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-50px);
    margin-bottom: 40px;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-36px);
    padding: 50px 30px 10px 50px;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 90%;
    margin: 0 auto;
    font-size: var(--font-24px);
    line-height: 2rem;
  }

  /* 에피소드 컨텐츠 */

  content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-60px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav li a {
    font-size: var(--font-40px);
    padding: 30px 10px;
  }

  #content #episodes_content p {
    width: 95%;
     margin: 50px auto;
    font-size: var(--font-24px);
    line-height: 2rem;
  }


}

/* 
 

일반 pc 


*/
@media screen and (max-width: 1292px) {
  #content h2 {
    top: -500px;
    font-size: var(--font-70px);
  }

  #content .news_container {
    padding: 70px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-44px);
    margin-bottom: 30px;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-34px);
    padding: 20px 20px 10px 50px;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 90%;
    margin: 0 auto;
    font-size: var(--font-24px);
    line-height: 1.6rem;
  }

  /* 에피소드 컨텐츠 */
  content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-44px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 50px;
  }

  #content .sub_nav li a {
    font-size: var(--font-36px);
    padding: 20px;
  }

  #content #episodes_content p {
    width: 95%;
    margin: 30px auto;
    font-size: var(--font-20px);
    line-height: 2rem;
  }



  #content #episodes_content .episode-images {
    width: 99%;
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 700px));
    gap: 1%;
  }

  #content .episode-images .episode-image:nth-child(3) {
    display: none;
  }
}

/* 








테블릿 







*/
@media screen and (max-width: 1150px) {
  #content h2 {
    top: -500px;
    font-size: var(--font-50px);
  }

  #content .news_container {
    padding: 60px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-40px);
    margin-bottom: 30px;
  }

  #content .news_container .huntrix_golden {
    width: 95%;
    gap: 1%;
    grid-template-areas:
      "a d"
      "a d";
  }

  #content .news_container .saja_bill {
    width: 95%;
    gap: 1%;
    grid-template-areas:
      "d a"
      "e a";
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(1),
  #content .saja_bill .saja_grid:nth-of-type(1) {
    grid-area: a;
    gap: 1%;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-28px);
    padding: 25px 0 10px 30px;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 95%;
    margin: 0 auto;
    font-size: var(--font-18px);
    line-height: 1.5rem;
    padding-bottom: 20px;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(2),
  #content .saja_bill .saja_grid:nth-of-type(2) {
    grid-area: b;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(3),
  #content .saja_bill .saja_grid:nth-of-type(3) {
    grid-area: c;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(2),
  #content .huntrix_golden .huntrix_grid:nth-of-type(3) {
    display: none;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(4) {
    display: block;
  }

  #content .saja_bill .saja_grid:nth-of-type(4),
  #content .saja_bill .saja_grid:nth-of-type(5) {
    display: block;
  }

  #content .saja_bill .saja_grid:nth-of-type(2),
  #content .saja_bill .saja_grid:nth-of-type(3) {
    display: none;
  }

  content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-44px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 50px;
  }

  #content .sub_nav li a {
    font-size: var(--font-38px);
    padding: 25px;
  }

  #content #episodes_content p {
    width: 95%;
    font-size: var(--font-30px);
    line-height: 2.7rem;
  }

  #content #episodes_content .episode-images {
    width: 99%;
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 700px));
    gap: 1%;
  }

  #content .episode-images .episode-image:nth-child(3) {
    display: none;
  }

  /* 에피소드 컨텐츠 */
  #content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-44px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 50px;
  }

  #content .sub_nav li a {
    font-size: var(--font-36px);
    padding: 20px;
  }

  #content #episodes_content p {
    width: 95%;
    font-size: var(--font-18px);
    line-height: 1.7rem;
  }

  #content #episodes_content .episode-images {
    width: 99%;
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 700px));
    gap: 1%;
  }

  #content .episode-images .episode-image:nth-child(3) {
    display: none;
  }
}

/* 







소형 테블릿 


 




*/
@media screen and (max-width: 855px) {
  #content h2 {
    top: -500px;
    font-size: var(--font-44px);
  }

  #content .news_container {
    padding: 60px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-40px);
    margin-bottom: 30px;
  }

  #content .news_container .huntrix_golden {
    width: 95%;
    gap: 1%;
    grid-template-areas:
      "b c"
      "a a";
  }

  #content .news_container .saja_bill {
    width: 95%;
    gap: 1%;
    grid-template-areas:
      "d e"
      "a a";
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(1),
  #content .saja_bill .saja_grid:nth-of-type(1) {
    grid-area: a;
    gap: 1%;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-34px);
    text-align: center;
    padding: 20px 0;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 90%;
    margin: 0 auto;
    padding: 0 10px 10px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(2),
  #content .saja_bill .saja_grid:nth-of-type(2) {
    grid-area: b;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(3),
  #content .saja_bill .saja_grid:nth-of-type(3) {
    grid-area: c;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(2),
  #content .huntrix_golden .huntrix_grid:nth-of-type(3) {
    display: block;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(4) {
    display: none;
  }

  #content .saja_bill .saja_grid:nth-of-type(4),
  #content .saja_bill .saja_grid:nth-of-type(5) {
    display: block;
  }

  #content .saja_bill .saja_grid:nth-of-type(2),
  #content .saja_bill .saja_grid:nth-of-type(3) {
    display: none;
  }

  /* 에피소드 컨텐츠 */
  #content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-40px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 30px;
  }

  #content .sub_nav li a {
    font-size: var(--font-30px);
    padding: 20px;
  }

  #content #episodes_content p {
    width: 99%;
    padding: 6px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  #content #episodes_content .episode-images {
    width: 99%;
    display: grid;
    grid-template-columns: minmax(320px, 700px);
    gap: 1%;
  }

  #content .episode-images .episode-image:nth-child(1),
  #content .episode-images .episode-image:nth-child(2) {
    display: none;
  }

  #content .episode-images .episode-image:nth-child(3) {
    display: block;
  }
}

/* 







모바일 1






*/
@media screen and (max-width: 667px) {
  #content h2 {
    top: -450px;
    font-size: var(--font-40px);
  }

  #content .news_container {
    padding: 60px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-36px);
    margin-bottom: 30px;
  }

  #content .news_container .huntrix_golden {
    width: 95%;
    gap: 1%;
    grid-template-columns: minmax(320px, 600px);
    grid-template-areas:
      "d"
      "a";
  }

  #content .news_container .saja_bill {
    width: 95%;
    gap: 1%;
    grid-template-columns: minmax(320px, 600px);
    grid-template-areas:
      "b"
      "c"
      "a";
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(1),
  #content .saja_bill .saja_grid:nth-of-type(1) {
    grid-area: a;
    gap: 1%;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-34px);
    text-align: center;
    padding: 20px 0;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 95%;
    margin: 0 auto;
    padding: 0 10px 10px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(2),
  #content .saja_bill .saja_grid:nth-of-type(2) {
    grid-area: b;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(3),
  #content .saja_bill .saja_grid:nth-of-type(3) {
    grid-area: c;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(2),
  #content .huntrix_golden .huntrix_grid:nth-of-type(3) {
    display: none;
  }

  #content .huntrix_golden .huntrix_grid:nth-of-type(4) {
    display: block;
  }

  #content .saja_bill .saja_grid:nth-of-type(4),
  #content .saja_bill .saja_grid:nth-of-type(5) {
    display: none;
  }

  #content .saja_bill .saja_grid:nth-of-type(2),
  #content .saja_bill .saja_grid:nth-of-type(3) {
    display: block;
  }

  /* 에피소드 컨텐츠 */
  content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-34px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 20px;
  }

  #content .sub_nav li a {
    font-size: var(--font-24px);
    padding: 20px;
  }

  #content #episodes_content p {
    width: 99%;
    margin: 0 auto;
    padding: 5px;
    font-size: var(--font-18px);
    line-height: 1.rem;
  }
}

/* 







모바일 2






*/
@media screen and (max-width: 565px) {
  #content h2 {
    top: -500px;
    font-size: var(--font-36px);
  }

  #content .news_container {
    padding: 60px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-36px);
    margin-bottom: 30px;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-34px);
    text-align: center;
    padding: 20px 0p;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 90%;
    margin: 0 auto;
    padding: 0 10px 10px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  /* 에페소드 */
  content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-34px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 10%;
  }

  #content .sub_nav li a {
    font-size: var(--font-22px);
    padding: 20px 0;
  }

  #content #episodes_content p {
    width: 99%;
    margin: 0 auto;
    padding: 0px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }
}

/* 




모바일 3




*/
@media screen and (max-width: 450px) {
  #content h2 {
    top: -500px;
    font-size: var(--font-30px);
  }

  #content .news_container {
    padding: 60px 0;
  }

  #content .news_container h3 {
    text-align: center;
    font-size: var(--font-30px);
    margin-bottom: 30px;
  }

  #content .saja_grid h4,
  #content .huntrix_grid h4 {
    font-size: var(--font-26px);
    text-align: center;
    padding: 20px 0p;
  }

  #content .saja_grid p,
  #content .huntrix_grid p {
    width: 99%;
    margin: 0 auto;
    padding: 0 10px 10px;
    font-size: var(--font-16px);
    line-height: 1.3rem;
  }


    /* 에페소드 */
  content .episodes_container h3 {
    padding-top: 200px;
    font-size: var(--font-30px);
  }

  #content .episodes_main {
    width: 90%;
    margin: 0 auto;
  }

  #content .sub_nav {
    gap: 10%;
  }

  #content .sub_nav li a {
    font-size: var(--font-20px);
    padding: 20px 0;
  }

  #content #episodes_content p {
    width: 99%;
    margin: 0 auto;
    padding: 5px 0;
    font-size: var(--font-16px);
    line-height: 1.2rem;
  }
}