:root {
    --black : #0a0203 ;
    --white : #ffffff ;
    --gray : #666 ; 
	--red : #dc3545 ;
	--disalbed : #aaa ; 

    --bs-gray-dark: #252F4A;
    --bs-gray-100: #F9F9F9;
    --bs-gray-200: #F1F1F4;
    --bs-gray-300: #DBDFE9;
    --bs-gray-400: #C4CADA;
    --bs-gray-500: #99A1B7;
    --bs-gray-600: #78829D;
    --bs-gray-700: #4B5675;
    --bs-gray-800: #252F4A;
    --bs-gray-900: #071437;
	--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
	
    --page-bg : var(--white) ;
    --transition : cubic-bezier(0.85, 0.17, 0.18, 1.17) ;
    --fontsize : 14px ; 
    --fontsize-m : 20px ; 
    --fontsize-l : 24px ; 
	--btn-fontsize : calc( var(--fontsize) + ( var(--fontsize) / 7 ) ) ;
    --page-padding : 150px ;
    --padding : 70px ;
    --padding-m : 50px ; 
	--input-radius : 6px ; 

    --ama-height : 16px ;
    --ama-m-width : 126px ;
    --ama-m-height : 75px ; 
    --ama-a-width : 80px ; 

    --page-radius : 0 ; 
    --page-weight : 12px ;  /* 페이지 두께 */
    --page-gap : 10px ; /* 중간 페이지간 거리 */
	
	--header-title : 100px ; 
	--input-border : #ccc ; 
}

a {
	color : #000 ; 
}
ul {
    list-style-type: none ;
}

body {
    font-family: "Helvetica 53 Extended", "Pretendard", Pretendard, Arial, sans-serif;
    margin : 0 ;
    background-color : var(--page-bg) ;
    font-size : var(--fontsize) ;
}
button {
	font-family: "Helvetica 53 Extended", "Pretendard", Pretendard, Arial, sans-serif;
	border-radius : var(--input-radius) ;		
	height : 50px ;
	background-color : var(--black) ;
	color : var(--white) ; 
	font-size : var(--btn-fontsize) ; 
}
select {
	padding-right : 18px ;
}

.text-right {
	text-align : right ;
}
.text-center {
	text-align : center ;
}

.grid {
	display : grid ;
	grid-template-columns : repeat(2,1fr) ;
}
.grid.col-3 {
	grid-template-columns : repeat(3,1fr) ;
}
.grid .col-2 {
    grid-column: span 2;
}

.mt-20px {
	margin-top : 20px ;
}

.required-dot:before,
.form-inline *[required] ~ .control-label:after,
.form-inline.required .control-label:after {
	content : "" ;
	width : 5px ;
	height : 5px ;
	display : inline-block ;
	border-radius : 50% ;
	vertical-align : middle ; 
	background-color : var(--red); 
}

.form-inline {
	position : relative ;
	padding-left : 195px ; 
}
.form-inline ~ .form-inline {
	margin-top : 22px ; 
}
.form-inline.next-off ~ .form-inline {
	display : none ; 
}
.form-inline .grid {
	gap : 6px ;
}
.form-inline .control-label {
	position : absolute ;
	font-weight : 600 ; 
	left : 0 ;
	top : 17px ; 
	width : 190px ;
	letter-spacing : -0.01em ; 
}
.form-inline *[required] ~ .control-label:after,
.form-inline.required .control-label:after {
	margin-left : 10px ; 
	margin-top : -2px ; 
}
.form-inline input:not([type="radio"]):not([type="checkbox"]),
.form-inline select {
	width : 100% ; 
	height : 50px ;
	border-radius : var(--input-radius) ;
	border : solid 1px var(--input-border) ; 
	padding-left : 15px ; 
	color : var(--black) ; 
	transition : ease .5s ; 
}
.form-inline input:not([type="radio"]):not([type="checkbox"]):focus {
	border-color : var(--black) ;
}
.form-inline .file {
	position : relative ;
	display : grid ;
	grid-template-columns : minmax(20%,200px) 1fr ;
	gap : 6px ; 
}
.form-inline .file ~ .file {
	margin-top : 4px ; 
}
.form-inline .file label {
	display : block ;
	border-radius : var(--input-radius) ;
	background-color : var(--black) ;
	color : var(--white) ;
	text-align: center ;
	line-height : 50px ;
	font-weight : 600 ; 
	font-size : var(--btn-fontsize) ; 
}
.form-inline .file label input {
	position : absolute ;
	opacity : 0 ;
	top : 0 ;
	left : 0 ;
	width : 100% ;
	height : 100% ;
}
.form-inline .file .filename {
	line-height : 50px ;
	border-radius : var(--input-radius) ;
	border : solid 1px var(--input-border) ; 
	padding-left : 15px ; 
	color : var(--black) ; 
	overflow : hidden ; 
    word-break: keep-all;
    white-space: nowrap;
	background-color : var(--white) ; 
}
.form-inline .file .filename .placeholder {
	color : var(--gray) ;
}
.form-inline .agreement {
	font-weight : 600 ;
	padding-top : 30px ; 
}
.form-inline .agreement .fold {
	display : none ;
}
.form-inline input[type='checkbox'],
.form-inline input[type='radio'],
.form-check {
  --bs-form-check-bg: transparent;
  flex-shrink: 0;
  vertical-align: sub;
  appearance: none;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: .25em;
  background-color: var(--bs-gray-200);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  border: none;
  cursor : pointer ; 
  print-color-adjust: exact;
}
.form-inline input[type='checkbox']:checked,
.form-inline input[type='radio']:checked,
.form-check:checked {
    background-color: var(--black) ;
    border-color: var(--black) ;
}



main > section.video {
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 100vw ;
	height : 100vh ;
	z-index : 5 ;
	background-color : #000 ; 
}
main > section.video > video {
	position : absolute ;
	top : 50% ;
	left : 50% ;
	width : 85vw ;
	height : 85vh ;
	transform : translate(-50%,-50%) ;
	cursor : url('/img/ico-close.svg') 15 15, auto ; 
}
main > section.video > .play {
	position : absolute ;
	top : 0 ;
	left : 0 ;
	width : 100% ;
	height : 100% ;
	cursor : pointer ;
}
main > section.video > .play:before {
	content : "" ;
	width : 60px ;
	height : 60px ;
	background : url('/img/ico-play.svg') center no-repeat ;
	background-size : 125% ; 
	position : absolute ;
	top : 50% ;
	left : 50% ;
	transform : translate(-50%,-50%) ; 
	background-color : #fff ;
	display : block ;
}	
main > section.video > .play + video {
	display : none 
}
main > section.index {
	width : 100vw ;
	height : 100vh ; 
	padding : calc(var(--page-padding) / 3 ) ; 
	place-content: center;
}
main > section.index h1 {
	text-transform : uppercase ;
	font-size : 3vw ;
	line-height : 2 ; 
}
main > section.index h2 {
	font-size : 6vw ;
	line-height : 1.5 ; 
}
main > section.index h2 strong {
	font-weight : 800 ;
	font-size : 6vw ; 
}

main > section.index .btn {
    width : 100vw ;
	margin-left : calc( -1 * var(--page-padding) / 3 ) ;
	padding : 20px calc(var(--page-padding) / 3 ) ;
    background-color : var(--black) ;
	color : var(--white) ; 
	text-decoration : none; 
    font-size : 6vw ; 
	display : flex ;
	justify-content: space-between; 
	font-weight : 800 ; 
	margin-top : 1vw ; 
}
main > section.index .btn * {
	vertical-align : text-bottom ; 
}
main > section.index .btn strong span {
	width : 0 ;
	overflow : hidden ;
	display : inline-block ;
	transition : ease-out .25s ;
	padding-left : 0 ;
}
main > section.index .btn:hover strong span {
	width : 20vw ; 
}
main > section.index .btn .hover {
	overflow : hidden ;
	transition : ease-out .25s ;
	display : inline-block ;
	font-size : 2vw ; 
	line-height : 6vw ; 
	padding-left : 0.5vw ;
}
main > section.index .btn:hover .hover {
	opacity : 0;
}



main > section.intro {
	width : 100vw ;
	height : 100vh ;
	padding : calc( var(--page-padding) / 2 ) ; 
	display : flex ;
	flex-direction: column;
	justify-content: space-between;
}
main > section.intro h1 {
	text-align : center ;
	font-size : 8vw ; 
	letter-spacing : -0.01em ; 
}
main > section.intro.off,
main > section.intro:not(.off) ~ section.audition {
	display : none ;
}
main > section.intro > .body {
	text-align : center ; 
	/*
	display : grid ;
	grid-template-columns : repeat(2,1fr) ; 
	background : rgba(255,255,255,.75) ; 
	backdrop-filter: blur(5px);
	*/
}
main > section.intro > .body dl > dt {
    /*opacity : .5 ;*/
    margin-bottom : 10px ; 
}
main > section.intro > .body dl > dd {
    font-size : var(--fontsize-m) ; 
}
main > section.intro > .body dl > dd + dt {
    margin-top : var(--padding-m) ; 
}
ul.apply {
    margin-top : 10px ; 
}
ul.apply > li {
    font-size : var(--fontsize) ;
    padding-left : 22px ;
    position : relative ;  
    line-height : 19px ;
}
ul.apply > li ~ li {
    margin-top : 3px ; 
}
ul.apply > li:before {
    content : "+";
    border-radius: 50% ;
    display : block ;
    text-align : center ;
    font-size : 10px ; 
    line-height : 8px ; 
    width : 12px ;
    height : 12px ;
    border : solid 1px var(--black) ;
    color : #666 ; 
    opacity : .5 ; 
    position : absolute ;
    top : 3px ;
    left : 0 ; 
}



main > section.intro .go-apply {
	font-size : var(--fontsize-l) ;
}
main > section.intro .body p {
	padding : 4vw ; 
	font-size : var(--fontsize-l) ;
}
main > section.intro .go-apply .btn {
	width : 100% ;
	height : 200px ;
	font-size : 80px ;
	font-weight : 800 ; 
	border-radius : 10px ; 
	cursor : pointer ;
	transition : ease-out .25s ;
}
main > section.intro .go-apply .btn:hover {
	transform : translateY(-10px);
}
main > section.audition {
	position : relative ; 
	padding-left : 50vw; 
}
main > section.audition > * {
	width : 50% ;
}
main > section.audition > header {
	padding : var(--page-padding) 0 var(--page-padding) var(--page-padding) ; 
	font-size : var(--fontsize-m) ; 
	position : fixed ;
	top : 0 ;
	left : 0 ;
	min-height : 100vh ; 
}
main > section.audition > header h1 {
	font-size : var(--header-title) ; 
	padding-bottom : 50px ;
}
main > section.audition > header .language {
	margin-top : 50px ;
	font-size : 16px ;
}
main > section.audition > header .language a {
	margin-right : 5px ;
	text-decoration : none ;
}
main > section.audition > header .language a.on {
	border-bottom : solid 1px var(--black);
}
main > section.audition > header .ci {
	position : absolute ;
	bottom : var(--page-padding) ;
	left : var(--page-padding) ;
	display: flex ;
}
main > section.audition > header .ci img {
	display : inline-block ;
	vertical-align : middle ; 
}
main > section.audition > header .ci img.ama {
	width : 100px ;
}
main > section.audition > header .ci img.orga {
	width : 60px ;
	margin-left : 50px ; 
}
main > section.audition > .form {
	width : 100% ; 
	padding : var(--page-padding) var(--page-padding) var(--page-padding) 0 ;
}
main > section.audition > .form button[type='submit'] {
	width : 100% ;
	margin-top : 50px ; 
}
main > section.audition > .form button[type='submit'][disabled] {
	background-color : var(--disalbed) ; 
}


@media only screen and (max-width: 980px) {
	.not-mobile { display : none }

	:root {
	    --page-padding : 40px ;
	    --fontsize : 12px ; 
	}

	.form-inline {
		padding-top : 25px ;
		padding-left : 0 ; 
	}
	.form-inline ~ .form-inline {
		margin-top : 30px ; 
	}
	.form-inline .control-label {
		top : 0 ; 
		width : auto ; 
	}
	.form-inline .file {
		display : block ;
	}
	.form-inline .file .filename {
		display : none ;
	}


	main > section.video > video {
		width : 100vw ;
		height : 100vh ;
	}

	main > section.intro > .body {
		display : block ;
		position : static ;
		padding : 0 ; 
	}
	main > section.intro > .body dl {
		margin-top : 100px ;
	}
	main > section.intro > .body .go-apply {
		margin-top : 70px ;
	}


	main > section.audition {
		padding-left : 0  
	}
	main > section.audition > * {
		width : 100% ;
	}
	main > section.audition > header {
		position : static ;
		font-size : 12px; 
		min-height : auto ;
	}
	main > section.audition > header h1 {
		font-size : 10vw ; 
		padding-top : 10vw ; 
		padding-bottom : 20px ;
	}
	main > section.audition > header .ci {
		bottom : initial ;
		top : var(--page-padding) ;
	}
	main > section.audition > header .ci img.ama {
		width : 10vw ;
	}
	main > section.audition > header .ci img.orga {
		width : 6vw ;
		margin-left : 5vw ; 
	}
	main > section.audition > .form {
		padding : var(--page-padding) ;
	}

}





.scene{
  position:fixed;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index : -1 ;
  top : 0 ;
  left : 0 ;
}

/* 배경 오로라 */
.aurora{
  position:absolute;
  width:140vw;
  height:140vh;
  left:-20vw;
  top:-20vh;
  background:
    radial-gradient(circle at 30% 40%, rgba(110,140,255,.18), transparent 25%),
    radial-gradient(circle at 70% 50%, rgba(255,120,220,.14), transparent 25%),
    radial-gradient(circle at 50% 70%, rgba(120,255,220,.10), transparent 30%);
  filter: blur(80px);
  animation: auroraMove 18s ease-in-out infinite alternate;
}

/* 은하수 */
.galaxy{
  position:absolute;
  width:150vw;
  height:45vh;
  left:-20vw;
  top:28vh;

  background:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 2px),
    radial-gradient(circle, rgba(180,200,255,.7) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,190,230,.6) 1px, transparent 2px);

  background-size:
    120px 120px,
    180px 180px,
    260px 260px;

  transform:rotate(-18deg);

  filter:
    blur(.3px)
    drop-shadow(0 0 12px rgba(255,255,255,.2));

  opacity:.9;

  animation:
    galaxyFlow 90s linear infinite;
}

/* 은하 중심광 */
.core{
  position:absolute;
  width:70vw;
  height:20vh;
  left:15vw;
  top:40vh;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.22),
      rgba(170,190,255,.12),
      transparent 70%
    );

  filter: blur(45px);

  transform:rotate(-18deg);

  animation:
    breathe 8s ease-in-out infinite;
}

/* 별 */
.star{
  position:absolute;
  border-radius:50%;
  background:white;
  opacity:.8;
  filter:blur(4px);

  animation:
    twinkle ease-in-out infinite;
}

/* 안개 */
.fog{
  position:absolute;
  width:120vw;
  height:120vh;
  left:-10vw;
  top:-10vh;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.03), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.025), transparent 30%);

  filter: blur(60px);

  animation:
    fogMove 30s ease-in-out infinite alternate;
}

@keyframes twinkle{
  0%,100%{
    opacity:.2;
    transform:scale(.6);
  }

  50%{
    opacity:1;
    transform:scale(1.8);
  }
}

@keyframes auroraMove{
  from{
    transform:translateY(-20px) rotate(0deg);
  }
  to{
    transform:translateY(20px) rotate(4deg);
  }
}

@keyframes galaxyFlow{
  from{
    background-position:
      0 0,
      40px 70px,
      120px 30px;
  }

  to{
    background-position:
      1200px 500px,
      900px 300px,
      700px 250px;
  }
}

@keyframes breathe{
  0%,100%{
    opacity:.5;
    transform:rotate(-18deg) scale(1);
  }

  50%{
    opacity:.9;
    transform:rotate(-18deg) scale(1.08);
  }
}


@keyframes fogMove{
  from{
    transform:translateX(-20px);
  }
  to{
    transform:translateX(20px);
  }
}