@charset "utf-8";



/* NPC */

.npc-wrap {

  background: url(../images/-c06_-_56cb-02c_-f733.jpg) no-repeat center 0;

  background-size: cover;

  height: 100%;

  overflow: hidden;

  min-height: 100vh;

}



.npc-wrap .content ,
.summon-wrap .content {

  padding: 92px 0 95px;
  min-height: 100vh;
  height: initial;

}



.npc-main-pic {

  position: absolute;

  top: 120px;

  right: 0;

  z-index: 1;

  width: 927px;

  text-align: center;

}




.npc-tit {

  position: absolute;

  left: -75px;

  top: 193px;

  display: block;

  margin: 0;

  z-index: 2;

}



.npc-tit-mobile {

  display: none;

  margin: 0 0 30px;

}



.npc-txt {

  padding: 150px 0 0;

  color: #fff;

  font-size: 16px;

  position: relative;

  z-index: 3;

  margin: 0;
  
  margin-top:30vh;


}



.npc-txt strong {

  font-size: 20px;

}

.summon-wrap .npc-txt {

  padding: 50px 0 0;

}
.npc:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 15px;
  top: 0px;
  background: url('../images/-c06_-_56cn-0fb9-cbaf.png') no-repeat;
  opacity: 0;

}
.npc-tit:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: url('../images/npc-tit-1_hover.png') no-repeat;
  opacity: 0;
  z-index: 0;
}
.npc_con:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 40vh;
  background: url('../images/-c06_-_56cn-6b33-44ff.png') no-repeat ;
  background-size: 100%;
  opacity: 0;
  z-index: 0;
}

.npc_hover:hover + .npc_con p{
  opacity: 0;
}
.npc_hover:hover img{
  opacity: 0;
}

.npc_hover:hover .npc:after{
  opacity: 1;
}

.npc_hover:hover .npc-tit:after{
  opacity: 1;
}

.npc_hover:hover + .npc_con:after{
  opacity: 1;
}


/* 召喚獸 */

.summon-wrap {

  background: url(../images/-c06_-_56cb-9201-cc43.jpg) no-repeat center 0;

  background-size: cover;

  height: 100%;

  overflow: hidden;

}



.summon-tit {

  position: relative;

  width: 418px;

  max-width: 100%;

  top: 0;

  left: 0;

  margin: 0;

  z-index: 99;

  margin-bottom: 50px;

}



.summon-main-pic {

  position: relative;

  

  z-index: 1;



  margin-top: 150px;

  padding: 0px 150px;


} 
.summon-main-pic>img{
  width: 100%;
  margin-bottom: 120px;
}





@media (max-width: 1200px) {

  .npc-wrap .content {

    padding: 45px 0 100px;

  }






  .npc-txt {

    padding: 50px 0 0;

  }



  .npc-main-pic, .summon-main-pic {

    position: relative;

    width: 100%;

  }



  .npc-tit-mobile {

    display: block;

    margin: 0;

    padding: 100px 0 0;

    position: relative;

    z-index: 2;

  }
  .npc-tit{
    left: 0px;
  }



}



@media (max-width: 992px) {

  .summon-main-pic {

    position: relative;

    width: 100%;

  }

  .npc-main-pic {

    top: 0;

  }

  .npc-wrap .content, .summon-wrap .content {

    padding: 100px 0;

  }

  .npc-tit-mobile {

    padding: 50px 0 0;

  }
  .npc-txt{
    margin-top: 50px;
  }

}



@media (max-width: 768px) {



  .npc-txt-box {

    position: relative;

    z-index: 2;

  }



  .npc-main-pic {

    position: relative;

    width: 100%;

    top: 50px;

  }



  .npc-txt {

    font-size: 14px;

  }
  .summon-main-pic{
    padding: 15px;
    margin-top: 100px;
  }
  .npc-tit{
    display: none;
  }
  .npc_con:after{
    top: 20vh;
  }

}



@media (max-width: 480px) {

  

  .npc-wrap .content {

    padding-top: 90px;

  }



  .npc-main-pic {

    top: 0;

  }
  .npc_con:after{
    top: 30vh;
  }
  .npc:after{
    background-size: 95%;
  }


}