:root {
  color-scheme: light only;
  --black: #111111;
  --darkgrey: #232323;
  --active: #ffecad;
  --highlight: #b0b8e9;
  --darkblue: #1b1d50;
  --white: #eeeeee;
  --font: "Noto Serif SC", serif;
  --btn_dl: 100px;
  --txt_body: 16px;
}


/*---------------------------------------
   Animation
-----------------------------------------*/
/* slidein */
@keyframes slideinleft{
	from {transform: translateX(-300px);}
    to {transform: translateX(0px);}
}
.a_slideinL.show{
  animation: slideinleft .5s ease-in-out backwards;
  animation-delay: 100ms;
}
@keyframes slideinright{
	from {opacity: 0; transform: translateX(600px);}
    to {opacity: 1; transform: translateX(0px);}
}
.a_slideinR.show{
  animation: slideinright .5s ease-in-out backwards;
  animation-delay: 100ms;
} 
@keyframes slideinbtm{
	from {transform: translateY(300px); opacity: 0;}
    to {transform: translateY(0px); opacity: 1; }
}
.a_slideinB.show{
  animation: slideinbtm .5s ease-in-out backwards;
}
@keyframes slideintop{
	from {transform: translateY(-300px); opacity: 0;}
    to {transform: translateY(0px); opacity: 1; }
}
.a_slideinT.show{
  animation: slideintop .5s ease-in-out backwards;
  animation-delay: 100ms;
}


@keyframes float{
  from {transform: translateY(10px);}
    to {transform: translateY(0);}
}

@keyframes zoom{
  from {transform: scale(1)}
    to {transform: scale(1.05)}
}

@keyframes rotate{
  from {rotate: 0deg;}
    to {rotate: 360deg;}
}

@keyframes textglow{
  from{ text-shadow: var(--active) 0 0 0;}
    to{ text-shadow: var(--active) 0 0 25px;}
}

/* popin */
@keyframes popin {
  0% {transform: scale(2); opacity: 0; filter: blur(3px);}
  100% {transform: scale(1); opacity: 1; filter: blur(0);} 
}
.a_popin.show{
  animation: popin .35s ease-in-out forwards;
}
@keyframes popout {
  0% {transform: scale(0.3); opacity: 0;}
  100% {transform: scale(1); opacity: 1;} 
}

@keyframes expand {
  0% {opacity: 1; scale: 100% 0;}
  100% {opacity: 1; scale: 100% 100%;} 
}

/*---------------------------------------
   Scroll Effect       
-----------------------------------------*/
html{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section:not(#footer) {
  height: 100vh !important;
  min-height: fit-content;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  padding: var(--p_l) 0;
}

@media screen and (max-width: 1200px) {
  html{
    scroll-snap-type: unset;
    scroll-behavior: smooth;
  }
  section:not(#footer) {
    scroll-snap-align: unset;
  }
  section:not(#footer):not(#KV){
    height:fit-content !important;
    min-height: unset !important;
  }
}


/* Remove animations or transitions on padding */
[style*="padding-right"] {
  transition: none !important;
}
::-webkit-scrollbar-thumb {
  background:  #7077a7;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--active);
}
::-webkit-scrollbar {
  background: #bbbbbb;
  width: 3px;
  height: 3px;
}
#subtabBar::-webkit-scrollbar {
  display: none;
}

/*---------------------------------------
   COMMON      
-----------------------------------------*/
::before, ::after{
  pointer-events: none;
}

body{
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0px;
  padding: 0px;
  color: var(--white);
  font-size:  var(--txt_s);
  font-weight: 200;
  font-family: var(--font) !important;
  text-wrap: pretty;
  overflow-x: hidden !important;
  background-color: #304e74;
  scroll-behavior: smooth;
}

a{
  pointer-events: all;
}

p{
  margin: 0;
}


h1{
  color: var(--active);
}
h3{
  font-size: 18px;
  margin: 0;
}

.smallgap{
  gap: 5px;
}

.note{
  font-size: 12px;
  color: #ff5151;
  font-style: italic;
}


/*---------------------------------------
   NAVBAR        
-----------------------------------------*/
.navigation{
  width: 100vw;
  display: flex;
  align-items: flex-start;
  padding: 0;
  border-bottom: 1px solid var(--highlight);
  background-color: var(--white);
  top: 0;
  position: absolute;
  z-index: 9999;
}

.navigation-container{
  padding: 0 5%;
  height: fit-content;
  display: flex;
  align-items: flex-start !important;
}

.navbar-brand{
  padding: 0 15px;  
  margin: 0;
}

.navbar-brand img{
  max-height: 100%;
  transition: all .5s linear;
  max-height: 50px;
}

.navwrapper{
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.navigationitem{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: fit-content;
  min-width: 150px;
  max-height: 55px;
  padding: 0 20px;
  transition: .3s;
}

.hamburgerbtn, .hamburgerbtn:active, .hamburgerbtn:focus, .hamburgerbtn:focus-visible{
  border: none;
  outline: none;
  box-shadow: none;
  min-height: 55px;
  padding: 0 20px;
  border-radius: 0;
}

.navigationitem:hover,.hamburgerbtn:hover{
  border: none;
  background: url(../img/icon/navbg.png) left bottom no-repeat;
}

.navigation .nav-link{  
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 25px 10px;
  text-wrap: nowrap;
  font-weight: 600;
  font-size: 16px;
  gap: 6px;
}

.nav-link.home::before{  
  content: '';
  width: 25px;
  height: 30px;
  background: var(--black);
  mask-image: url(../img/icon/nav_home.png);
  mask-size: contain;
  mask-position: center;
}

.nav-link.register::before{  
  content: '';
  width: 25px;
  height: 25px;
  background: var(--black);
  mask-image: url(../img/icon/nav_register.png);
  mask-size: contain;
  mask-position: center;
}

.nav-link.member::before{  
  content: '';
  width: 25px;
  height: 25px;
  background: var(--black);
  mask-image: url(../img/icon/nav_user.png);
  mask-size: contain;
  mask-position: center;
}

.nav-link.media::before{  
  content: '';
  width: 25px;
  height: 30px;
  background: var(--black);
  mask-image: url(../img/icon/nav_media.png);
  mask-size: contain;
  mask-position: center;
}

.navigationitem:hover a{
  color: var(--active);
}

.navigationitem:hover .nav-link::before{
  background: var(--active);
}


@media screen and (max-width: 768px) {
  .navbar-brand img{
    /* max-height: 50px; */
	height: 96px
  }
  .navigation-container{
    padding: 0;
  }
  .navwrapper{
    justify-content: flex-start;
    width: 100vw;
  }
  .navbar-nav, .navigationitem{
    justify-content: flex-start;
    width: 100%;
    /* min-width: 100%; */
    background-color: #ececec;
  }
  .navigationitem{
    padding: 0 5%;
  }

  .navigationitem:hover{
    background-size: cover;
    background-position: bottom left;
  }
}
.nav_pre-register {
  position: absolute;
  top: 50px;
  right: 2%;
  width: 325px;
  min-width: 175px;
  aspect-ratio: 351 / 333;
  background: url(../img/btn_preregispg.png) top right no-repeat;
  background-size: contain;
  transition: all .3s;
  animation: zoom .5s infinite alternate;
  z-index: 9998;
}
.nav_pre-register:hover{
  filter: brightness(1.2);
}
@media screen and (max-width: 1200px) {
  .nav_pre-register {
      width: 25%;
      max-width: 351px;
  }
}
@media screen and (max-width: 768px) {
  .nav_pre-register {
      width: 35%;
      min-width: 175px;
  }
}


.btn_sidebar{
  position: fixed;
  bottom: 2%;
  left: 2%;
  z-index: 999;
}

#tabBar {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 250px;
  padding: 2%;
  padding-right: 90px;
  height: 100vh;
  z-index: 100;
  gap: 35px;
  background: linear-gradient(to right, #03132c 35%, transparent);
  transition: all .3s ease;
}
#tabBar.collapsed{
  display: none;
}
#tabBar.show{
  display: flex;
  transform: translateX(0);
  transition: all .3s ease;
}

#tabBar *{
  text-align: center;
}

.tablink{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 55px;
  overflow: visible;
  font-weight: 400;
  background: url(../img/nav_tab.png) center no-repeat;
  background-size: 0;
  transition: all .3s ease-in-out;
}
.tabwrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: fit-content;
}
.tablink:hover, .tablink.active, .tabwrapper:has(.subtab_wrapper.show) .tablink{
  color: var(--active);
  background-size: 48px;
  transition: all .3s ease-in-out;
}
.tabwrapper:not(:last-child)::before{
  content: "";
  position: absolute;
  width: 3px;
  height: 31px;
  background: url(../img/navdeco.png) center no-repeat;
  top: 100%;
}
.tabwrapper:first-child::after, .tabwrapper:last-child::after{
  content: "";
  position: absolute;
  width: 10px;
  height: 47px;
  background: url(../img/navdeco_s.png) center no-repeat;
  bottom: 100%;
}
.tabwrapper:last-child::after{
  transform: scaleY(-1);
  top: 100%;
}
.tabbartoggler {
  position: fixed;
  z-index: 999;
  bottom: 5%;
  left: 50px;
  width: 50px;
  height: 50px;
  background-color: var(--darkblue);
  border-radius: 50%;
  filter: drop-shadow(0 1px 5px rgba(255, 255, 255, 0.75));
  display: none;
  align-items: center;
  justify-content: center;
}
.tabbartoggler:hover {
  color: var(--darkblue);
  background-color: var(--active);
}
.tabbartoggler .material-symbols-outlined{
  font-weight: 600;
}
.subtab_wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}
.subtab_link{
  position: relative;
  width: 115px;
  padding: 1px 5px; 
  border: 1px solid var(--highlight);
  font-size: var(--txt_body);
  font-weight: 600;
  pointer-events: all;
  cursor: pointer;

  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--highlight);
  /* background: url(../img/job/skillbutton.png) center no-repeat; */
}

.subtab_link:hover, .subtab_link.active{
  color: var(--darkblue);
  background: var(--highlight);
  /* background: url(../img/job/skillbutton_hover.png) center no-repeat; */
}

@media screen and (max-width: 1400px) {
  /* #tabBar{
    z-index: 1000;
  } */
  .tabbartoggler{
    display: flex;
  }
}
@media screen and (max-width: 768px) {
  .tabwrapper:first-child::after, .tabwrapper:last-child::after{
    content: none;
  }
  #tabBar{
    justify-content: flex-start !important;
    padding-top: 50px;
  }
  /* .subtab_link{
    font-size: 12px;
    width: 95px;
  } */
  .tabbartoggler, #tabBar{
    display: none !important;
  }
  .subtab_wrapper{
    flex-direction: row;
  }
}

/*---------------------------------------
   KV
-----------------------------------------*/
#KV, #Job, #JHJB, #FHNP, #JCGX{
  position: relative;
  top: 0;
  max-width: 100vw;
  min-height: 100vh;
  background: url(../img/bg.png) center no-repeat;
  overflow: hidden;
}
#KV{
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  scroll-snap-align: center;
}
.vfxvideo {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-width: 1500px;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: .25;
}
.kvwrapper{
  padding-bottom: 8vh;
}
.slogan{
  max-width: 100%;
  width: fit-content;
  aspect-ratio: 174/61;
}
.btn_cta.download{
  width: 259px;
  max-width: 45%;
  aspect-ratio: 259/96;
  background: url(../img/btn_dl.png) center no-repeat;
  background-size: contain;
}
.btn_cta.download:hover{
  background: url(../img/btn_dl-hover.png) center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .kvwrapper{
    padding-bottom: 12vh;
  }
}

/*---------------------------------------
   Job
-----------------------------------------*/
#Job, #JHJB, #FHNP, #JCGX{
  background: url(../img/bg3.png) top center no-repeat;
  background-attachment: fixed;
}

#Job{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* scroll-snap-align: center; */
}
#Job.mobile, #JHJB.mobile, #FHNP.mobile, #JCGX.mobile{
  display: none;
}
@media screen and (max-width: 768px) {
  #Job:not(.mobile), #JHJB:not(.mobile), #FHNP:not(.mobile), #JCGX:not(.mobile){
    display: none;
  }
  #Job.mobile , #JHJB.mobile, #FHNP.mobile, #JCGX.mobile{
   display: flex;
  }
}


.btn_video{
  position: absolute;
  width: 90px;
  max-height: 30%;
  aspect-ratio: 1/1;
  background: url(../img/job/btn_bgm.png) center no-repeat;
  background-size: contain;
  bottom: 8%;
  left: 4%;
  z-index: 90;
}
.musicbox {
  width: 100%;
  max-width: 100vw;
  aspect-ratio: 864/115;
  background: url(../img/job/bgm_bg.png) left bottom no-repeat;
  position: relative;
  background-size: contain;
}
.musicbox::before {
  content: '';
  width: 10%;
  max-width: 80px;
  aspect-ratio: 1/1;
  top: 22%;
  left: 1.5%;
  background: url(../img/job/icon_bgm.png) no-repeat;
  background-size: contain;
  position: absolute;
}
.playbtn {
  position: absolute;
  bottom: 15%;
  right: 15%;
  height: 29%;
  min-height: 35px;
  max-width: 35px;
  aspect-ratio: 1/1;
  background: url(../img/job/play.png) no-repeat;
  background-position: top right;
  background-size: auto 100%;
  cursor: pointer;
}
.musicbox::after {
  content: '';
  width: 100%;
  height: 100%;
  bottom: 0;
  left: -6%;
  z-index: 2;
  background: url(../img/job/zz.png) no-repeat;
  background-size: cover;
  pointer-events: none;
  position: absolute;
}
.musicbox.on::before {
  animation: rotate 8s linear infinite both;
  -webkit-animation: rotate 8s linear infinite both;
}
.playbtn.on {
  background-position: top left;
}

@media screen and (max-width: 768px) {
  .playbtn{
    bottom: 0%;
    right: 0%;
  }
}


/*---------------------------------------
   JHJB       
-----------------------------------------*/
.btn_more{
  width: 210px;
  max-width: 90vw;
  aspect-ratio: 210/58;
  background: url(../img/jhjb/btn_more.png) center no-repeat;
  filter: hue-rotate(210deg);
}

.btn_more:hover{
  filter: unset;
}
.img_tlt img{
  max-width: 100%;
}

#JHJBTabContent .tab-pane{
  height: 100%;
}
#JHJB .pic, #JHJB .pic2, #JHJB .pic3{
  position: relative;
  height: 100%;
  min-height: 450px;
  z-index: 0;
}
#JHJB .pic::before, #JHJB .pic2::before , #JHJB .pic3::before{
  content: "";
  height: 100%;
  max-width: 100vw;
  position: absolute;
  background: url(../img/jhjb/pic1.png) top center no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  overflow: visible;
  object-fit: contain;
  object-position: center;
}
#JHJB .pic::before {
  aspect-ratio: 1045 / 762;
  right: -10%;
}
#JHJB .pic2::before {
  aspect-ratio: 758 / 707;
  right: unset;
  background: url(../img/jhjb/pic2.png) top center no-repeat;
  background-size: contain;
}
#JHJB .pic3::before {
  aspect-ratio: 1041 / 993;
  right: unset;
  background: url(../img/jhjb/pic3.png) top center no-repeat;
  background-size: contain;
}
.tltwrapper{
  z-index: 5;
}

.tag{
  color: var(--active);
  width: 117px;
  aspect-ratio: 117/88;
  background: url(../img/jhjb/tagdeco.png) center no-repeat;
  background-size: contain;
  text-align: center;
  align-content: center;
}

@media screen and (max-width: 1200px) {
  #JHJB .pic::before {
    right: 15%;
  }
}
@media screen and (max-width: 768px) {
  #JHJB .pic::before {
    right: 6%;
  }
  #JHJB .pic, #JHJB .pic2, #JHJB .pic3{
    min-height: 35vh;
  }
}

/*---------------------------------------
   subtab
-----------------------------------------*/
#subtabBar{
  position: absolute;
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: center;
  top: -5px;
  overflow: visible;
}

.subtab_item{
  width: 269px;
  min-width: 250px;
  aspect-ratio: 269/59;
  background: url(../img/subtabbg.png) center no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  z-index: 50;
}
.subtab_item:not(:first-child){
  margin-left: -95px;
}

.subtab_item:hover, .subtab_item.active{
  background: url(../img/subtabbg_hover.png) center no-repeat;
  background-size: contain;
  transition: all .3s ease-in-out;
}

#jobTabContent, #JHJBTabContent, #JCGXTabContent{
  position: relative;
  width: 100%;
  height: 100%;
  /* padding-top: 55px; */
}

#jobTabContent .tab-pane{
  padding: 0;
  align-content: center;
}

@media screen and (max-width: 768px) {
  #jobTabContent .tab-pane{
    height: fit-content;
  }
}    
#Job .char{
  position: relative;
  height:  700px;
}
#Job .char::before{
  content: "";
  height: 100%;
  aspect-ratio: 1045/762;
  position: absolute;
  background: url(../img/job/char2.png) center no-repeat;
  background-size: contain;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
}

.char_content{
  z-index: 1;
}

@media screen and (max-width: 1080px) {
  .char_content{
    max-width: 400px;
  }
  #Job .char::before {
    right: 2%;
  }
}    
@media screen and (max-width: 900px) {
  #Job .char{
    height: unset;
    width: 90vw;
    aspect-ratio: 1045/762;
  }
  .char::before{
    height: unset;
    width: 100%;
    right: unset;
  }        
} 

@media screen and (max-width: 768px) {  
  #subtabBar{
    justify-content: flex-start;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }
  .char_content{
    margin-left: unset;
    max-width: 90vw;
  }
} 

.tlt_small{
  width: fit-content;
  padding: 2px 10px;
  background: url(../img/job/tltbg.png) center no-repeat;
  background-size: 100% 26px;
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
}
#Job .tlt_small{
  margin: 0;
}
.fhnp .tlt_small, #JCGX .tlt_small{
  color: white !important;
  font-size: 20px;
  font-weight: 600;
  padding-right: 8%;
  background-image: linear-gradient(to right, #3f498b 60%, rgba(0,0,0,0));
}

.btn_skilltab{
  position: relative;
  width: 118px;
  aspect-ratio: 118/31;
  font-size: var(--txt_body);
  font-weight: 600;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--highlight);
  background: url(../img/job/skillbutton.png) center no-repeat;
}

.btn_skilltab:hover, .btn_skilltab.active{
  color: var(--darkblue);
  background: url(../img/job/skillbutton_hover.png) center no-repeat;
}
#skillContent{
  width: 100%;
}
.skill_content, .story_content{
  width: 1000px;
  max-width: 90vw;
  height: 550px;
  height: 70vh;
  max-height: 100vh;
  margin: 0 auto;
  background: rgba(32, 26, 53, .5);
  background-size: contain;
  border: 2px solid #7077a7;
  border-radius: 5px;
  padding: 35px 25px;
  padding-bottom: 50px;
  overflow-y: scroll;
}
.skill_content img, .story_content img{
  width: fit-content;
  max-width: 70vw;
}
.story_content .w100{
  overflow: visible;
}
.story_content .carousel{
  max-width: 100%;
}
.carousel img{
  max-width: unset;
}

#outfitTab{
  position: relative;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn_outfittab{
  position: relative;
  width: 200px;
  max-width: 30%;
  height: 100px;
}
.btn_outfittab::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 308px;
  aspect-ratio: 308/194;
  background: url(../img/job/l1.png) center no-repeat;
}
.btn_outfittab:hover::after, .btn_outfittab.active::after{
  background: url(../img/job/l1_hover.png) center no-repeat;
}
#outfit_collapse2-tab::after{
  background: url(../img/job/l2.png) center no-repeat;
}
#outfit_collapse2-tab:hover::after, #outfit_collapse2-tab.active::after{
  background: url(../img/job/l2_hover.png) center no-repeat;
}
#outfit_collapse3-tab::after{
  background: url(../img/job/l3.png) center no-repeat;
}
#outfit_collapse3-tab:hover::after, #outfit_collapse3-tab.active::after{
  background: url(../img/job/l3_hover.png) center no-repeat;
}
@media screen and (max-width: 600px) {  
  .btn_outfittab::after, .btn_outfittab:hover::after, .btn_outfittab.active::after {
    width: 55vw;
    background-size: contain !important;
  }
} 


#outfitContent{
  width: 100%;
  max-width: 1150px;
  height: 600px;
  max-height: 100vh;
  position: relative;
}
.outfit_content{
  width: 100%;
  height: fit-content;
  max-height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.swiper{
  width: 950px;
  /* max-width: 90vw; */
  padding: 0 25px;

}
.swiper-slide{
  width: 28%;
  transition: transform 0.3s ease;
}

.swiper-button-next::after, .swiper-button-prev::after{
  content: none;
}
.btn_next, .btn_prev {
  width: 80px;
  height: unset;
  aspect-ratio: 101 / 99;
  background: url(../img/job/btn_next.png) center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

}
.btn_prev{
  transform: translateY(-50%) scaleX(-1);
  right: unset;

}

.btn_next:hover, .btn_prev:hover{
  background: url(../img/job/btn_next_hover.png) center no-repeat;
  background-size: contain;
}

#outfit_collapse2{
  margin: 0 auto;
  width: fit-content;
  max-width: 90vw;
  position: relative;
  height: fit-content;
}
#outfitTab2{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.outfit2wrapper{
  margin: 0 auto;
  height: fit-content;
  width: fit-content;
}
.outfit2_p1, .outfit2_p2, .outfit2_p3, .outfit2_p4{
  position: absolute;
  width: 15%;
  max-width: 122px;
  aspect-ratio: 122/125;
  right: 5%;
  top: 15%;
  background: url(../img/job/outfit2_p1.png) left bottom no-repeat;
  background-size: contain;
  z-index: 999;
}
.outfit2_p2{
  top: 32%;
  right: 0;
  background: url(../img/job/outfit2_p2.png) left bottom no-repeat;
  background-size: contain;
}
.outfit2_p3{
  top: 50%;
  right: 0;
  background: url(../img/job/outfit2_p3.png) left bottom no-repeat;
  background-size: contain;
}
.outfit2_p4{
  right: 5%;
  top: 68%;
  background: url(../img/job/outfit2_p4.png) left bottom no-repeat;
  background-size: contain;
}
.outfit2_p1:hover, .outfit2_p1.active{
  background: url(../img/job/outfit2_p1_hover.png) left bottom no-repeat;
  background-size: contain;
}
.outfit2_p2:hover, .outfit2_p2.active{
  background: url(../img/job/outfit2_p2_hover.png) left bottom no-repeat;
  background-size: contain;
}
.outfit2_p3:hover, .outfit2_p3.active{
  background: url(../img/job/outfit2_p3_hover.png) left bottom no-repeat;
  background-size: contain;
}
.outfit2_p4:hover, .outfit2_p4.active{
  background: url(../img/job/outfit2_p4_hover.png) left bottom no-repeat;
  background-size: contain;
}

.outfit2_content{
  width: 100%;
  height: 100%;
}
.outfit2_content img{
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.outfit_card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 500px;
}

.outfit_card img{
  width: 100%;
  max-width: fit-content;
  height: 100%;
  max-height: fit-content;
  object-fit: contain;
}
@media screen and (max-width: 1200px) {  
  .outfit_card{
    max-height: 385px;
  }
} 
@media screen and (max-width: 768px) {  
  #outfitContent{
    height: fit-content;
  }
}

.swiper-slide-active{
  transform: scale(1.35);
  transition: transform 0.3s ease;
  z-index: 2;
}

#outfit_collapse3, #outfit_collapse3-m{
  max-width: 1000px;
  margin: auto;
  align-items: flex-start;
  overflow: visible;
}
#outfit_collapse3-m{
  max-width: 100vw;
}
#outfit_collapse3-m ::-webkit-scrollbar{
  display: none !important;
}
.outfit3_content{
  width: 30%;
  min-width: 200px;
  aspect-ratio: 313/600;
  background: url(../img/job/l3_bg.png) center no-repeat;
  background-size: contain;
}
.outfit3_img{
  height: 55%;
  margin-left: 5%;
}
.outfit3_img img{
  height: 55%;
  max-height: fit-content;
}
.outfit3_tlt{
  width: 10%;
  max-height: 45%;
  aspect-ratio: 36/196;
  writing-mode: vertical-rl;
  font-weight: 600;
  letter-spacing: 2px;
  background: url(../img/job/outfit3_tltbg.png) center no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 1200px) {  
  .outfit3wrapper{
    padding: 0 25px;
    justify-content: flex-start !important;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .outfit3wrapper::-webkit-scrollbar {
    height: 3px;
  }
} 
@media screen and (max-width: 1200px) {  
  .outfit3_content{
    min-width: 185px;
  }
} 

#scene_carouselControls, .carousel{
  width: 880px;
  max-width: 90vw;
  margin: 0 auto;
}

#scene_carouselControls .carousel-item img, .carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chartlt{
  width: 329px;
  max-width: 90%;
  aspect-ratio: 329/49;
  padding: 0 10px;
  padding-top: 5px;
  background: url(../img/job/chartltbg.png) center no-repeat;
  background-size: contain;
  color: var(--white) !important;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.35));
}

.divider{
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.bigtitle{
  width: fit-content;
  position: relative;
  font-size: 35px;
  line-height: 35px;  
  padding: 15px 10px;
  margin: 0;
  margin-top: 15px;
  background: linear-gradient(to top, #ffffff, #b8c6dd 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.bigtitle::before, .bigtitle::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 102.5px;
  aspect-ratio: 102.5/42;
}
.bigtitle::before{
  right: 100%;
  background: url(../img/tltdeco.png) left top no-repeat;
  background: linear-gradient(to top, #ffffff, #b8c6dd 70%);
  mask: url(../img/tltdeco.png) left top no-repeat;
}
.bigtitle::after{
  left: 100%;
  background: url(../img/tltdeco.png) right top no-repeat;
  background: linear-gradient(to top, #ffffff, #b8c6dd 70%);
  mask: url(../img/tltdeco.png) right top no-repeat;
}

.modal-lg{
  --bs-modal-width: 1000px;
}

.btn_close{
  width: 34px;
  aspect-ratio: 1/1;
  position: absolute;
  right: 6%;
  top: 4%;
  background: url(../img/jhjb/popup_btnclose.png) no-repeat;
  background-size: contain;
  z-index: 999;
}
.btn_close:hover{
  filter: brightness(1.5);
}
.fhnp .btn_close{
  top: 6%;
  right: 4.5%;
  filter: hue-rotate(210deg);
}
.fhnp .btn_close:hover{
  filter: hue-rotate(210deg) brightness(1.5);
}

.modal-content, .jhjb_contentwrapper{
  width: 100%;
  padding: 6% 8%;
  aspect-ratio: 1822/1059;
  background: url(../img/jhjb/popup_bg.png) no-repeat !important;
  background-size: contain !important;
}
.jhjb_contentwrapper{
  padding:5%;
}
.video .modal-content{
  background: none !important;
  padding: 0 !important;
}
.fhnp .modal-content{
  width: 100%;
  padding: 6%;
  padding-bottom: 8%;
  aspect-ratio: 730/408;
  background: url(../img/fhnp/popup_bg.png) no-repeat !important;
  background-size: contain !important;  
}

@media screen and (max-width: 600px) {  
  .modal:not(.video) .modal-content, .jhjb_contentwrapper, .fhnp .modal-content{
    padding: 12%;
    aspect-ratio: 2 / 3;
    background: url(../img/jhjb/popup_bg.png) no-repeat;
    background-size: cover !important;
    padding-right: 5px;
    margin-right: 5%;
  }
  .fhnp .modal-content{
    background: url(../img/fhnp/popup_bg.png) no-repeat !important;
    background-size: cover !important;  
    padding-bottom: 20% !important;  
  }
  .bigtitle{
    position: relative;
    font-size: 24px;
    line-height: 24px;  
    padding: 15px 10px;
    margin: 0;
    background: linear-gradient(to top, #ffffff, #b8c6dd 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.modal_contentwrapper{
  width: 100%;
  max-height: 100%;
  padding-right: 15px;
  padding-bottom: 25px;
  overflow-y: scroll;
}

.modal-content *, .modal-content h1, .modal-content p, .jhjb_contentwrapper *, .jhjb_contentwrapper h1, .jhjb_contentwrapper p{
  color:#352b18;
}
.fhnp .modal-content *,.fhnp .modal-content h1,.fhnp .modal-content p{
  color:var(--darkblue);
}


.modal-content h1, .jhjb_contentwrapper h1{
  font-size: 30px;
  margin-bottom: 10px;
  line-height: 30px;
}
.modal-content p, .modal-content li, .jhjb_contentwrapper p{
  font-weight: 600;
}

.popup_tltbg{
  width: fit-content;
  height: 25px;
  aspect-ratio: 218/51;
  padding: 5px 10px;
  margin: 0;
  text-wrap: nowrap;
  color:white !important;
  background: url(../img/jhjb/popup_tltbg.png) center no-repeat;
  background-size: contain !important;
}
.popup_tltbg-big{
  width: fit-content;
  height: 25px;
  aspect-ratio: 344/51;
  padding: 5px 10px;
  margin: 0;
  text-wrap: nowrap;
  color:white !important;
  background: url(../img/jhjb/popup_tltbg-big.png) center no-repeat;
  background-size: contain !important;
}

.dvd_tlt{
  text-wrap: nowrap;
  font-weight: 900;
  color:#ad5a3a !important;
}
.divider.dark{
  border-bottom: 1px solid #ad5a3a;
}

.bold_tlt{
  font-weight: 900;
}

table tr:first-child td {
  font-size: 16px;
  line-height: 18px;
  color: white !important;
  background-color: #b6744d;
  word-break: break-all;
}
table td{
  font-size: 16px;
  font-weight: 600;
  padding: .5rem .5rem;
  text-align: center;
  border: 1px solid #915633;
}
.fhnp table tr:first-child td, .tlt td, #JCGX table tr:first-child td{
  background-color: #414c81;
  color: white !important;
}
.fhnp table td, #JCGX table td{
  border: 1px solid #968dc2;
}

.modal-content p span{
  color:#ad5a3a !important;
}


#footer{
  z-index: 999;
}