@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');

/* @charset "utf-8"; */
* {
  transition: all 0.3s;
}

.wrap_intro {
  width: 100vw;
  padding: 0;
  height: 100vh;
}

.mo_download_btn {
  display: none;
}

#popup_class_video {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.cont_pop_class {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50%;
  background-color: #ff6176;
  padding: 20px 10px;
  z-index: 4;
}

.swiper-arrow-wrap {
  position: absolute;
  min-height: 79px;
  bottom: 0;
  padding-bottom: 3vh;
  width: 100%;
  z-index: 999;
  box-sizing: content-box;
  background: linear-gradient(transparent 10%, #000 90%);
}

.swiper-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/*************************/
/* 04. CHARACTER
/************************/
#character {
  background-image: url('../images/bg_class.jpg');
  overflow: hidden;
}

#character .wrap_sub_intro{
  padding: 0 0 5rem;
}

.swiper_character {
  width: 100%;
}

.swiper-pagination {
  position: static;
}

.swiper-class-wrap {
  /* position: absolute;
    z-index: 9999;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.swiper-pagination-bullet {
  width: 80px;
  min-height: 30px;
  background: transparent;
}

.swiper-button-prev,
.swiper-button-next {
  display: flex;
  align-items: center;
  position: unset;
  margin-top: 0;
}

.swiper-button-next {
  margin-left: 2rem;
}

.swiper-button-prev {
  margin-right: 2rem;
}

.skill_name {
  position: absolute;
  text-align: center;
  font-size: 16px;
  width: 360px;
  padding: 5px 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
}

.prev_img {
  transform: rotate(180deg);
}

.box_char {
  position: relative;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  width: 100%;
  max-width: 1400px;
  height: 100vh;
  margin: 0 auto;
  /* background: linear-gradient(to bottom, transparent 50%, #000); */
}

.desc_night {
  /* height: 100px; */
}

.inner_char {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* margin-top: -220px;
    margin-left: -100px; */
}

.char_info {
  position: absolute;
  right: calc(50% - 2vw);
  margin-right: -365px;
  top: 0;
  height: 100%;
  padding-bottom: 5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.char_night {
  position: absolute;
  height: 100%;
  left: 50%;
  margin-left: calc(-50% - 2rem);
  opacity: 0;
}

.swiper-slide-active .char_night {
  opacity: 1;
}

.char_night img {
  /* position: absolute;
    top: -116px;
    left: 12%; */
  height: 100%;
}

[data-rss='fade-in-up'] {
  opacity: 0;
  -webkit-transform: translate3d(0, 100px, 0);
  transform: translate3d(0, 100px, 0);
}

.swiper-slide .flip {
  transform: translate(0, 50%);
  opacity: 0;
}

.swiper-slide .flip_fst {
  transition: 0.7s 0.2s ease-out;
}

.swiper-slide-active .flip {
  opacity: 1;
  transform: translate(0, 0);
}

/* .swiper-slide-active .swiper-slide-ani {
    animation: fadeOut 1.5s ease;
}

.swiper-slide-active .swiper-slide-ani {
    animation: fadeIn 1.5s ease;
} */
.swiper-slide {
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.178));
}

.swiper-slide-active .swiper-slide-night .char_night {
  transition: 1s ease;
  transition-property: opacity, left, top, height;
  /* background: url('../images/night.png') no-repeat top -100px left 30% / 53% auto; */
  /* background: url('../images/night.png') no-repeat center / auto 100%; */
}

.swiper-slide-active.effect_night {
  animation: fadeIn 1.5s ease;
  /* background-blend-mode: lighten;
    background: url('../images/night_effect.png') no-repeat top -100px left 30% / 53% auto rgba(0, 0, 0, 0.3); */
}

.swiper-slide-active .swiper-slide-warrior {
  transition: 1s ease;
  transition-property: opacity, left, top, height;
  /* background: url('../images/warrior.png') no-repeat top -80px left 35% / 45% auto rgba(0, 0, 0, 0.3); */
}

.swiper-slide-active .swiper-slide-assassin {
  transition: 1s ease;
  transition-property: opacity, left, top, height;
  /* background: url('../images/assassin.png') no-repeat top -100px left 35% / 47% auto rgba(0, 0, 0, 0.3); */
}

.swiper-slide-active .swiper-slide-archer {
  transition: 1s ease;
  transition-property: opacity, left, top, height;
  /* background: url('../images/archer.png') no-repeat top -80px left 32% / 47% auto rgba(0, 0, 0, 0.3); */
}

.swiper-slide-active .swiper-slide-cleric {
  transition: 1s ease;
  transition-property: opacity, left, top, height;
  /* background: url('../images/cleric.png') no-repeat top -80px left 32% / 45% auto; */
}

.swiper-slide-active.effect_cleric {
  animation: fadeIn 1.5s ease;
  background: url('../images/cleric_effect.png') no-repeat top -80px left 32% / 45%
    auto rgba(0, 0, 0, 0.4);
}

.swiper-slide-active .swiper-slide-wizard {
  transition: 1s ease;
  transition-property: opacity, left, top, height;
  /* background: url('../images/wizard.png') no-repeat top -80px left 32% / 50% auto; */
}

.swiper-slide-active.effect_wizard {
  animation: fadeIn 1.5s ease;
  background: url('../images/wizard_effect.png') no-repeat top -80px left 32% / 50%
    auto rgba(0, 0, 0, 0.3);
}

.box_night .char_night {
  background-blend-mode: lighten;
  background: url('../images/night_effect.png') no-repeat top left / 100% auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.icon_skill {
  width: 365px;
  display: flex;
  justify-content: space-between;
  margin: 20px 0 20px 0;
}

.btn_skill {
  background-color: #ff6176;
}

.fst_sk_video,
.scd_sk_video,
.thd_sk_video,
.skill_name {
  display: none;
}

.skill_video {
  border: 2px solid #fffad4;
}

.skill_name {
  width: calc(100% - 4px);
  left: 2px;
}

.video_skill {
  width: 365px;
  height: 240px;
  object-fit: cover;
}

.btn_skill {
  width: 88px;
  height: 88px;
  font-size: 0;
}

.skill_name.skill_on {
  display: block;
}

/* 나이트 */
.skiil_nt_1 {
  background: url('../images/skill_nt_1_off.png') no-repeat center / contain;
}

.skiil_nt_1.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_nt_1_on.png') no-repeat center / contain;
}

.skiil_nt_2 {
  background: url('../images/skill_nt_2_off.png') no-repeat center / contain;
}

.skiil_nt_2.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_nt_2_on.png') no-repeat center / contain;
}

.skiil_nt_3 {
  background: url('../images/skill_nt_3_off.png') no-repeat center / contain;
}

.skiil_nt_3.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_nt_3_on.png') no-repeat center / contain;
}

/* 나이트 */
/* 워리어 */
.skiil_wr_1 {
  background: url('../images/skill_wr_1_off.png') no-repeat center / contain;
}

.skiil_wr_1.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_wr_1_on.png') no-repeat center / contain;
}

.skiil_wr_2 {
  background: url('../images/skill_wr_2_off.png') no-repeat center / contain;
}

.skiil_wr_2.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_wr_2_on.png') no-repeat center / contain;
}

.skiil_wr_3 {
  background: url('../images/skill_wr_3_off.png') no-repeat center / contain;
}

.skiil_wr_3.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_wr_3_on.png') no-repeat center / contain;
}

/* 워리어 */
/* 어쌔신 */
.skiil_as_1 {
  background: url('../images/skill_as_1_off.png') no-repeat center / contain;
}

.skiil_as_1.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_as_1_on.png') no-repeat center / contain;
}

.skiil_as_2 {
  background: url('../images/skill_as_2_off.png') no-repeat center / contain;
}

.skiil_as_2.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_as_2_on.png') no-repeat center / contain;
}

.skiil_as_3 {
  background: url('../images/skill_as_3_off.png') no-repeat center / contain;
}

.skiil_as_3.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_as_3_on.png') no-repeat center / contain;
}

/* 어쌔신 */
/* 아처 */
.skiil_ac_1 {
  background: url('../images/skill_ac_1_off.png') no-repeat center / contain;
}

.skiil_ac_1.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_ac_1_on.png') no-repeat center / contain;
}

.skiil_ac_2 {
  background: url('../images/skill_ac_2_off.png') no-repeat center / contain;
}

.skiil_ac_2.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_ac_2_on.png') no-repeat center / contain;
}

.skiil_ac_3 {
  background: url('../images/skill_ac_3_off.png') no-repeat center / contain;
}

.skiil_ac_3.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_ac_3_on.png') no-repeat center / contain;
}

/* 아처 */
/* 클레릭 */
.skiil_cl_1 {
  background: url('../images/skill_cl_1_off.png') no-repeat center / contain;
}

.skiil_cl_1.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_cl_1_on.png') no-repeat center / contain;
}

.skiil_cl_2 {
  background: url('../images/skill_cl_2_off.png') no-repeat center / contain;
}

.skiil_cl_2.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_cl_2_on.png') no-repeat center / contain;
}

.skiil_cl_3 {
  background: url('../images/skill_cl_3_off.png') no-repeat center / contain;
}

.skiil_cl_3.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_cl_3_on.png') no-repeat center / contain;
}

/* 클레릭 */
/* 위자드 */
.skiil_wz_1 {
  background: url('../images/skill_wz_1_off.png') no-repeat center / contain;
}

.skiil_wz_1.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_wz_1_on.png') no-repeat center / contain;
}

.skiil_wz_2 {
  background: url('../images/skill_wz_2_off.png') no-repeat center / contain;
}

.skiil_wz_2.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_wz_2_on.png') no-repeat center / contain;
}

.skiil_wz_3 {
  background: url('../images/skill_wz_3_off.png') no-repeat center / contain;
}

.skiil_wz_3.skill_on {
  border: 2px solid #fddf9a;
  border-radius: 50%;
  background: url('../images/skill_wz_3_on.png') no-repeat center / contain;
}

/* 위자드 */

.video_skill.skill_on,
.m_video_skill.skill_on {
  display: block;
}

.char_name {
  display: flex;
  align-items: center;
  font-size: 40px;
  color: #fff0af;
  margin-bottom: 20px;
}

.char_name img {
  margin-right: 10px;
}

.char_content {
  font-size: 16px;
  font-weight: bold;
  color: #9b9b9b;
}

@media screen and (max-width: 1400px) {
  .swiper-arrow {
    transform: scale(0.8);
  }

  .char_info {
    transform: scale(0.8);
    /* transform-origin: center; */
  }
}

@media screen and (max-width: 1300px) {
  .char_info {
    transform: scale(0.8);
  }
}

/* 모바일 가로 모드 */
@media screen and (max-width: 950px) and (orientation: landscape) {
  #character {
    height: 800px;
  }

  .wrap_intro {
    height: 100%;
  }

  .swiper_character {
    height: 100%;
  }

  .box_char {
    max-width: 900px;
    height: 800px;
  }

  .char_info {
    transform-origin: center right;
  }
}

@media screen and (max-height: 800px) and (orientation: landscape) {
  .box_char {
    max-width: 900px;
  }

  .char_info {
    transform: scale(0.65);
  }
}

@media screen and (max-width: 720px) {
  .wrap_intro,
  .sub_page {
    height: auto;
  }

  #character {
    margin-top: 73px;
  }

  .box_char {
    height: auto;
  }

  /* .mo_view_720{
        display: block;
    } */

  /*모바일 레이아웃 적용*/
  .swiper-class-wrap {
    display: none;
  }

  .char_info {
    position: unset;
    transform: scale(1);
    width: 100%;
    padding: 0 2rem;
    padding: 80vw 0 5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  }

  .inner_char {
    max-width: 480px;
    margin: 0 auto;
  }

  .swiper-arrow-wrap {
    top: calc(50vw + 60px);
    bottom: auto;
    padding: 0 1rem;
    box-sizing: border-box;
    background: transparent;
  }

  .swiper-arrow {
    transform: scale(1);
    justify-content: space-between;
  }

  .char_night img {
    width: 100%;
    height: auto;
    display: none;
  }

  .swiper-slide-active.effect_night {
    background: url('../images/m/m_char_night.png') no-repeat center -73px / 100%
      auto;
  }

  .swiper-slide-active.effect_warrior {
    background: url('../images/m/m_char_warrior.png') no-repeat center -73px / 100%
      auto;
  }

  .swiper-slide-active.effect_assassin {
    background: url('../images/m/m_char_assassin.png') no-repeat center -73px / 100%
      auto;
  }

  .swiper-slide-active.effect_cleric {
    background: url('../images/m/m_char_cleric.png') no-repeat center -73px / 100%
      auto;
  }

  .swiper-slide-active.effect_archer {
    background: url('../images/m/m_char_archer.png') no-repeat center -120px / 100%
      auto;
  }

  .swiper-slide-active.effect_wizard {
    background: url('../images/m/m_char_wizard.png') no-repeat center -73px / 100%
      auto;
  }
}

@media screen and (max-width: 480px) {
  .inner_char {
    max-width: 300px;
  }

  .char_name {
    font-size: 3rem;
  }

  .char_content {
    font-size: 0.9rem;
  }

  .icon_skill {
    width: 100%;
  }

  .btn_skill {
    width: 5rem;
    height: 5rem;
  }

  .skill_video,
  .video_skill {
    width: 100%;
    /* height: auto; */
  }
}

@media screen and (max-width: 320px) {
  .char_info {
    padding: 80vw 2rem 5rem;
  }
}

/* //모바일 가로 모드 */