@media (max-width: 1441px){
  #banner { background: url('../img/bg-hero-1440.png') no-repeat center center;    background-size: cover;}
  #story { background: url('../img/bg-story-1440.png') no-repeat center center;background-size: cover;}
  #collection { background: url('../img/bg-collection-1440.png') no-repeat center center;    background-size: cover;}
  #characters { background: url('../img/bg-characters-1440.png') no-repeat center center;    background-size: cover;}
  #roadmap { background: url('../img/bg-roadmap-1440.png') no-repeat center center;    background-size: cover;}
  #team { background: url('../img/bg-team-1440.png') no-repeat center center; background-size: cover}
  #last { background: url('../img/bg-last-1440.png') no-repeat center center;background-size: cover;}
}

@media (max-width: 1300px){
  .header {padding: 0 20px;}
  .header .gnb a {font-size: 14px; margin-right: 20px;}
  .header .rnb a{ font-size: 14px; margin-right: 20px;}
  .header .rnb a.lang{margin-right: 10px;}
}
@media (max-width: 1280px){
  .inner {padding: 0 10px;}
}

@media (max-width: 1020px){
  .header .gnb a {font-size: 14px; margin-right: 10px;}
  .header .rnb a{ font-size: 14px; margin-right: 10px;}
  .team .ogq-box .ogq-card {
    width: 240px;
    height: 420px;
    padding: 20px;
    border-radius: 12px;
  }
  .team .ogq-box .ogq-card .img-box {
    width: 180px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
  }
  .team .ogq-desc{ margin-top: 30px;}
  .team .ogq-desc .name {font-size: 14px; line-height: 1.33;}
  .team .ogq-desc .rank {font-size: 14px; line-height: 1.33;}
  .team .ogq-desc .career{font-size: 10px; line-height: 1.5;}
  .team .ogq-desc .stars{display: none;}

  .last .partner .supporters {padding: 0; justify-content: center;}
}

@media (max-width: 530px){
  .team .ogq-box .ogq-card {
    width: 200px;
    height: auto;
    padding: 20px;
    border-radius: 12px;
  }
  .team .ogq-box .ogq-card .img-box {
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px){
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #banner {height: 812px; background-position: center bottom 0%;}
  /* #team {height: 100%;}  */
  /*#last { height: 2898px;}  */
  .inner {padding: 0 16px;}

  .go-top {
    display: block;
    position: fixed;
    bottom: 40px;
    right: 18px;
    z-index: 997;
  }
  .mob-menu {
    display: none;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;   
    width: 100%;
    height: 100%;
    background-color: rgba(11, 12, 37, 0.47);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 0 rgba(148, 190, 250, 0.5);
    z-index: 998;
    padding :143px 40px;
  }
  .mob-menu.active {display: block;}
  .mob-menu .gnb{
    display: flex;
    flex-direction: column;
  }
  .mob-menu .gnb a{
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.67px;
    margin-bottom: 35px;
    position: relative;
  }
  .mob-menu .gnb a::before{
    content: '';
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: -40px;
    width: 8px;
    height: 48px;
    background-color: #a184fb;
    transition: 0.3s;
    opacity: 0;
  }

  .mob-menu .gnb a:hover{
    color: #a184fb;
  }
  .mob-menu .gnb a:hover::before{
    opacity: 1;
  }
  .mob-menu .mint-soon{
    text-align: center;
  }
  .mob-menu .mint-soon a{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: 0.28px;
    padding: 13px 84px;
    border: solid 1px #a184fb;
    background-color: #0c0e20;
    border-radius: 32px;
  }

  .header {padding: 0 18px; padding-top: 30px; height: 104px;}
  .header .mob-gnb {display: block; width: 52px;}
  .header .mob-gnb.active .close{display: block;}
  .header .mob-gnb.active .open {display: none;}
  .header .mob-gnb .close{display: none;}
  .header .gnb {display: none;}
  .header .rnb a.mint{display: none;} 
  .header .rnb a.rank{display: none;} 
  .header .rnb .lang{margin-right: 0; width: 52px; text-align: center;} 
  .header .rnb .lang .lang-box {top:30px; left: -10px;}

  .banner { padding-top:120px;}

  .story .tit-txt {font-size: 23px;}
  .story .tit-txt img {width: 30px;}
  .story .card-box {padding: 32px 24px;}
  .story .card-box .card-txt span {font-size: 14px;}
  .collection {
    padding-top: 118px;
    text-align: center;
  }
  .collection .tit-txt {font-size: 23px;}
  .collection .tit-txt img {width: 30px;}
  .collection .desc span{font-size: 14px; padding: 0 25px;} 
  .characters .tit-txt {font-size: 23px;}
  .characters .tit-txt img {width: 30px;}
  .characters .card-box {display: none;}
  .characters .mob-box {
    margin-top: 40px;
    display: block;
    width: 100%;
    background: url('../img/card-mob.png') no-repeat center center;
    background-size: 100% 100%;
    padding: 10px;
    border-radius: 36px;
    backdrop-filter: blur(4px);
    box-shadow: inset 0 4px 4px 0 rgba(255, 255, 255, 0.15), inset -2px -2px 4px 0 rgba(45, 32, 172, 0.94);
    position: relative;
  }

  .characters .mob-box .mob-select-box{
    position: absolute;
    width: 100%;
    text-align: center;
    top:365px;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .characters .mob-box .mob-select-box img{
    display: block;
    width: 47px;
    margin: 0 5px;
  }

  .characters .mob-box .profile-slider-mob .profile-item {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .characters .mob-box .profile-slider-mob .slick-arrow {
    position: absolute;
    top: 200px;
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 0;
    cursor: pointer;
    z-index: 1;
  }
  .characters .mob-box .profile-slider-mob .slick-arrow.slick-prev  {left: 0px;}
  .characters .mob-box .profile-slider-mob .slick-arrow.slick-prev::before {
    content: '';
    position: absolute;
    top: 0px;
    width: 48px;
    height: 48px;
    background: url('../img/characters-arrows.png') no-repeat center center;
    transform: rotate(-180deg);
  }
  .characters .mob-box .profile-slider-mob .slick-arrow.slick-next  {right: 50px;}
  .characters .mob-box .profile-slider-mob .slick-arrow.slick-next::before {
    content: '';
    position: absolute;
    top: 0px;
    width: 48px;
    height: 48px;
    background: url('../img/characters-arrows.png') no-repeat center center;
  }
 
  .characters .mob-box .profile-slider-mob .slick-dots {
    position: absolute;
    width: 100%;
    text-align: center;
    top:355px;
    left:50%;
    transform: translateX(-50%);
  }
  .characters .mob-box .profile-slider-mob  .slick-dots li{
   display: inline-block; 
   width: 48px;
   height: 48px;
   margin: 0 5px;
   border-radius: 50%;
  }
  .characters .mob-box .profile-slider-mob  .slick-dots li.slick-active{
    background: url('../img/mob-profile-select.png') no-repeat center center;
  }
  .characters .mob-box .profile-slider-mob  .slick-dots li button{
    width: 100%;
    height: 100%;
    border-radius: 50%; 
    font-size: 0;
    opacity: 0;
  }
  .characters .mob-box .profile-slider-mob .profile-item .profile-main {
    margin-left: auto;
    margin-right: auto;
  }
  .characters .mob-box .profile-slider-mob .profile-item .profile-main img{width: 230px; display: block;}
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc {
    width: 100%;
    padding: 20px;
    border-radius: 36px;
    backdrop-filter: blur(4px);
    background-color: #d8d8d81c;
  }
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc .tit{
    font-family: "JosefinSans";
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #fff;
  }
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc .tit em{
    font-family: NEXONLv2GothicOTF;
    font-size: 28px;
    font-weight: 500;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    margin-right: 3px;
  }
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc .stars{
    margin-top: 16px;
    margin-bottom: 24px;
  }
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc .information{color: #fff;}
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc .information .min-tit {font-size: 16px;}
  .characters .mob-box .profile-slider-mob .profile-item .profile-desc .information .line {
    display: block;
    height: 3px;
    width: 240px;
    margin: 4px 0 12px 0;
    opacity: 0.4;
    background-color: #161234;
  }
  .characters .mob-box .profile-desc .information .gender{
    font-family: NEXONLv2GothicOTF;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    color: #fff;
  }
  .characters .mob-box .profile-desc .information .personality{
    font-family: NEXONLv2GothicOTF;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    color: #fff;
  }
  .characters .mob-box .profile-desc .information .symbol{
    font-family: NEXONLv2GothicOTF;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    color: #fff;
  }
  
  .characters .mob-box .profile-desc .story {color: #fff; padding-top: 10px;}
  .characters .mob-box .profile-desc .story .min-tit {font-size: 16px;}
  .characters .mob-box .profile-desc .story .line {
    display: block;
    height: 3px;
    width: 240px;
    margin: 4px 0 12px 0;
    opacity: 0.4;
    background-color: #161234;
  }
  
  .characters .mob-box .profile-desc .story .text {
    font-family: NEXONLv2GothicOTF;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    color: #fff;
  }


  .roadmap .roadmap-tab {display: none;}
  .roadmap .tit-txt {font-size: 23px;}
  .roadmap .tit-txt img {width: 30px;}
  .roadmap .roadmap-slider {display: block}
  .roadmap .roadmap-slider > div .roadmap-box {
    margin-top: 40px;
    width: 100%;
    background: url('../img/roadmap-card.png') no-repeat center center;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 11px;
    padding-right: 11px;
    text-align: center;
    border-radius: 36px;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    box-shadow: inset 0 4px 4px 0 rgba(255, 255, 255, 0.15), inset -2px -2px 4px 0 rgba(45, 32, 172, 0.94);
    border-style: solid;
    border-width: 2px;
    border-image-source: linear-gradient(200deg, rgba(255, 255, 255, 0.16) 100%, rgba(255, 255, 255, 0) 13%);
  }
  .roadmap .roadmap-slider > div .roadmap-box .roadmap-tit{
    margin-top: 20px;
    font-size: 30px;

    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
  }
  .roadmap .roadmap-slider>div .roadmap-box .roadmap-cont {
    margin-top: 34px;
  }

  .roadmap .roadmap-slider>div .roadmap-box .roadmap-cont.wait {
    height: 720px;
    display: flex;
  }

  .roadmap .roadmap-slider>div .roadmap-box .roadmap-cont.wait::before {
    content: "";
    background: url("../img/mob-roadmap-wait.png") no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 720px;
    z-index: 10;
    border-radius: 5px;
  }

  .roadmap .roadmap-slider > div .roadmap-box .roadmap-cont .rectangle{
    padding: 20px 62px;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 11px;
  }
  .roadmap .roadmap-slider > div .roadmap-box .roadmap-cont .rectangle.completed{
    padding: 20px 62px;
    border-radius: 24px;
    box-shadow: 0 0 6px 4px rgba(229, 38, 217, 0.5), 0 2px 6px 2px rgba(255, 49, 191, 0.5);
    border: 1px solid #ffb2ff;
    margin-bottom: 16px;
    background-color: #000;
  }

  .roadmap .roadmap-slider > div .roadmap-box .roadmap-cont .rectangle .progress{
    width: 80px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    border-style: solid;
    border-top: 2px solid #bedfff;
    border-left: 2px solid #bedfff;
    border-bottom: 2px solid #ffb2ff;
    border-right: 2px solid #ffb2ff;
    background-color: #000;
    opacity: 0.8;
  }
  .roadmap .roadmap-slider > div .roadmap-box .roadmap-cont .rectangle .progress.completed{
    color: #000;
    border-style: none;
    background-image: linear-gradient(to bottom, #bedfff, #ffb2ff);
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #000;
  }
  .roadmap .roadmap-slider > div .roadmap-box .roadmap-cont .rectangle .text{
    font-size: 14px;
    color: #fcfcfd;s
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.14px;
  }
  .roadmap .roadmap-slider .slick-arrow {
    position: absolute;
    top: 80px;
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 0;
    cursor: pointer;
    z-index: 1;
  }
  .roadmap .roadmap-slider .slick-arrow.slick-prev  {left: 30px;}
  .roadmap .roadmap-slider .slick-arrow.slick-prev::before {
    content: '';
    position: absolute;
    top: 0px;
    width: 48px;
    height: 48px;
    background: url('../img/icons-arrow-right-simple-line.png') no-repeat center center;
    transform: rotate(-180deg);
  }
  .roadmap .roadmap-slider .slick-arrow.slick-next  {right: 80px;}
  .roadmap .roadmap-slider .slick-arrow.slick-next::before {
    content: '';
    position: absolute;
    top: 0px;
    width: 48px;
    height: 48px;
    background: url('../img/icons-arrow-right-simple-line.png') no-repeat center center;
  }



  .last .partner .tit-txt {font-size: 20px; text-align: center; letter-spacing: 0;}
  .last .partner .tit-txt img {width: 30px;}

  .last .partner .supporters .supporter img{width: 170px;}
  .last .faq {padding-top: 160px; margin-bottom: 160px;}
  .last .faq .tit-txt {font-size: 23px; text-align: center;}
  .last .faq .tit-txt img {width: 30px;}
  .last .faq .faq-accordion .que {padding-left: 0; padding-right: 0; margin-top: 30px;}
  .last .faq .faq-accordion .que .no {
    font-size: 14px;
    width: 25px;
    margin-right: 5px;
  }
  .last .faq .faq-accordion .que .q {
    font-size: 12px;
    letter-spacing: -0.5px;
    color: #fff;
  }
  .last .faq .faq-accordion .que::after{right: 5px;}
  .last .faq .faq-accordion .anw{
    font-family: NEXONLv2GothicOTF;
    padding: 24px 30px;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #fff;
  }

  .last .media {margin-bottom: 130px;}

  /*.last .media .media-slider > div .media-box { padding: 0px 24px;  }*/
  /*.last .media .media-slider > div .media-box .media-img { width: 100%; height: auto}*/
  /*.last .media .media-slider > div .media-box.media-none .media-img {  width: 100%; height: auto}*/

  .last .media .tit-txt{font-size: 23px; margin-left: auto; margin-right: auto;}
  .last .media .tit-txt{width: 30px;}
  .last .footer .bitmap {width: 225px;}

  #episode .episode {margin-bottom: 130px;}
  #episode .episode .tit-txt{font-size: 23px; margin-left: auto; margin-right: auto;}
  #episode .episode .tit-txt{width: 30px;}

  #episode .episode .tit-txt::after {
    bottom: -16px;
    width: 88px;
    height: 2px;
  }

  .header .mob-gnb-episode  {display: block; width: 52px;}
  .header .mob-gnb-episode  .left-page {display: block; width: 52px;}
  .header .mob-gnb-episode  .left-page img {display: block; width: 24px;}
}


@media (max-width:480px){
  #story{
    background: url('../img/bg-story-mob.png') no-repeat center center;
    background-size: 100% 100%;
    height: 1038px;
    background-position: center bottom;
  }


  #characters{
    background: url('../img/bg-characters-mob.png') no-repeat center center;
    background-size: 100% 100%;
    padding-top: 170px;
  }

  #roadmap {
    background: url('../img/bg-roadmap-mob.png') no-repeat center center;
    background-size: 100% 100%;
    height: 1180px;
    padding-top: 118px;
  }
  #team {
    background: url('../img/bg-team-mob.png') no-repeat center center;
    background-size: cover;
    background-position: center bottom;
    height: auto;
    padding-top: 158px;
    margin-bottom: -80px;
  }
  .banner { padding-top:200px;}
  .banner .btn a:nth-child(1) {margin-top: 20px;}

  .characters .mob-box .profile-slider-mob .profile-item .profile-main { width: 230px;}
  .team .ogq-box .ogq-card{width: 164px; height: 298px; padding: 20px 15px;}
  .team .tit-txt {font-size: 23px;}
  .team .tit-txt img {width: 30px;}
  .team .ogq {margin-top: 44px;}
  .team .ogq img {width: 240px;}
  .team .ogq-exp {font-size: 12px; letter-spacing: -0.51px; line-height: 2; margin-top: 30px;} 
  .team .ogq-box {gap:15px; margin-top: 60px;}
  .team .ogq-box .ogq-card {
    width: 164px;
    height: auto;
  }
  .team .ogq-box .ogq-card .img-box {
    width: 136px;
    height: 136px;
  }
  .team .ogq-desc{ margin-top: 15px;}
  .team .ogq-desc .name {font-size: 12px; line-height: 1.33;}
  .team .ogq-desc .rank {font-size: 12px; line-height: 1.33;}
  .team .ogq-desc .career{font-size: 8px; line-height: 1.5;}
  .team .ogq-desc .stars{display: none;}
}