@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

.en {font-family: 'Albra Trial', sans-serif; font-weight: 200;}
body {font-family: 'pretendard', sans-serif; background: #121212; color: #fff; font-weight: 400; cursor: url('../img/cursor.png') 0 0, auto; padding-top: 130px;}
.inner{width: 90%; margin: 0 auto;}



/* 마우스 포인터 */
body.clicked {cursor: url('../img/cursor2.png'), auto;}
a:hover {cursor: url('../img/cursor2.png'), auto;}
button:hover {cursor: url('../img/cursor2.png'), auto;}


/* layout */
header {position: fixed; width: 100%; z-index: 9999; transition: transform 0.3s ease; background: #121212; top: 0; left: 0; }
.headerInner { width: 100%; padding: 50px 3%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }
.headerInner a {font-size: 25px; display: block; align-items: center;}
.headerInner .menu {display: block; width: 50px; background: transparent; border: none; cursor: pointer; z-index: 9999; position: relative; }
.headerInner .menu span {display: block; width: 100%; height: 3px; background: #fff; margin-bottom: 12px; transition: transform 0.4s ease, opacity 0.3s ease; }
.headerInner .menu span:last-child{margin-bottom: 0;}
.menu.active span:nth-child(1) { transform: translateY(18px) rotate(45deg); background: #FF669B; }
.menu.active span:nth-child(2) {display: none;}
.menu.active span:nth-child(3) { transform: translateY(2px) rotate(-45deg); background: #FF669B;}

/* header 스크롤 */
header.hide {transform: translateY(-100%);}
header.show {transform: translateY(0);}



/* 햄버거 메뉴 */
.menuWrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); transform: translateY(-100%); z-index: 9000; opacity: 0; transition: all 0.5s;}
.menuWrap.on {display: block; transform: translateY(0); opacity: 1;}

.menuInner {width: 80%; height: 100%; margin: 0 auto; position: relative; z-index: 9999;}
.menuWrap .gnb { padding: 0 150px; position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between;  text-align: left;}
.menuWrap .gnb > ::after {content: ''; width: 12px; height: 12px; border-radius: 50%; background: #FF669B; position: absolute; top: -50px; left: 0; opacity: 0; transition: all 0.3s; }
.menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: -10px; transition: all 0.3s;} 
.menuWrap .gnb > li {position: relative; line-height: 2.5;}
.menuWrap .gnb > li .sub li {font-size: 18px; line-height: 2.5; color: #fff; transition: color 0.2s ease;}
.menuInner > .gnb {width: 100%; display: flex; justify-content: space-between;}
.menuWrap .gnb li {color: #fff; font-size: 25px; font-weight: normal; transition: opacity 0.3s ease;}
.menuWrap .gnb:hover li { opacity: 0.5;}
.menuWrap .gnb li:hover { opacity: 1;}
.menuWrap .gnb li .sub li:hover { opacity: 1; color: #FF669B;}





/* audition */
.audition {position: relative; height: 100vh; width: 100%; overflow: hidden;}
.audition .imgWrap {display: relative; width: 100%; height: 100%;}
.audition-wrap { width: 80%; padding: 100px 150px; position: absolute; top: 0; left: 0; box-sizing: border-box;}
.audition-wrap .auditon-head {display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #FF8BAC; padding: 10px 0; box-sizing: border-box; margin-bottom: 30px;}
.audition-wrap .auditon-head span {display: inline-block; font-size: 14px; font-weight: 200;}
.audition-wrap .title { display: flex;}
.audition-wrap .title span {font-size: 25px; margin-left: 15px;color: #FF8BAC; font-weight: 500;}
.audition-wrap .title h2 {font-size: 120px; color: #FF8BAC; font-weight: 500; transition: all 0.3s; line-height: 1.1; margin-top: 10px; margin-bottom: 10px;}
.audition-wrap .title h2 i {font-size: 30px; cursor: pointer; display: inline-block; animation: none; transition: transform 0.8s ease; color: #FF8BAC;}
.audition-wrap .title h2 i:hover { animation: arrow 0.8s ease forwards;}
@keyframes arrow {
  0% {transform: scale(1) translate(0, 0);}
  50% {transform: scale(1.2) translate(5px, -5px);}
  100% {transform: scale(1) translate(0, 0);}
}
.audition-wrap:nth-of-type(3) .title h2 i,.audition-wrap:nth-of-type(5) .title h2 i{color: #fff;} 
.audition-wrap:nth-of-type(3) .auditon-head,.audition-wrap:nth-of-type(5) .auditon-head{border-bottom: 1.5px solid #fff;}
.audition-wrap:nth-of-type(3) .textBox.a ,.audition-wrap:nth-of-type(5) .textBox.a {border-top: 1.5px solid #fff;}


.audition-wrap .textBox {width: 80%; flex-wrap: wrap; display: flex; justify-content: space-between; padding-top: 25px;}
.audition-wrap .textBox.a {border-top: 1.5px solid #FF8BAC;}
.audition-wrap .textBox.a {margin-bottom: 10px;}
.audition-wrap .textBox .text li {margin-bottom: 10px; font-size: 16px; font-weight: 200;}
.audition-wrap .textBox .text li:nth-child(1) {color: #FF8BAC; font-weight: 600;}


/* faq */
.faq{height: 100vh; display: flex; align-items: center;}
.faq .inner{width: 90%; margin: 0 auto;}
.faq .inner h3{font-size: 25px; font-weight: 400; margin-bottom: 30px;}
.faq .inner .list li{margin-bottom: 20px; font-size: 18px; color: #9d9d9d; transition: all 0.3s;}
.faq .inner .list li:nth-child(1){color: #fff;}
.faq .inner .list li span{color: #FF8BAC; display: block; font-size: 14px; padding: 5px 0 0 20px;}
.faq .inner .list li:hover{color: #fff;  transition: all 0.3s;}


/* footer */
footer {background:linear-gradient(to bottom, #121212 20%, #F297B3);width: 100%; height: 100vh;position: relative; }
footer .inner .top{display: flex; justify-content: space-between; padding-top: 250px;}
footer .inner .top img {width: 600px; height: 130px;}
footer .inner .contact{margin-top: 280px;}
footer .inner .contact li{font-weight: 300; font-size: 14px; margin-bottom: 20px; line-height: 1.8;}
footer .inner .contact li a{display: flex;}
footer .inner .contact li:nth-child(1){display: flex; }
footer .inner .contact li:nth-child(3){display: flex;  }
footer .inner .contact li:nth-child(3) span{ margin-right: 32px;}
footer .inner .contact li span { font-weight: bold; display: block; margin-right: 20px;}
footer .inner .bottom {display: flex; align-items: end; color: #fff; height: 100px; float: right;}
footer .inner .bottom ul{display: flex;}
footer .inner .bottom .list{ position: absolute; left: 50%; transform: translateX(-50%); }
.li-separator {height:15px; margin: 4px 20px 0;}

.goTop {display: block; width: 50px; height: 50px; position: absolute; right: 50px; bottom: 20px; z-index: 3; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); transition: all 0.3s;}
.goTop p.img:hover i {transform: translateY(-5px); transition: all 0.3s;color: #fff; }
.goTop:hover{background: #FF669B;transition: all 0.3s; }
.goTop p.img {width: 100%; height: 100%; position: absolute; font-weight: normal; display: flex; justify-content: center; align-items: center; }
.goTop p.img i {display: block; font-size: 24px; transition: all 0.3s; color: #FF669B;}






/* responsive */
@media screen and (max-width: 1400px) {
  body{padding-top: 80px;}



    /* tab-menu */
    .menuInner {width: 100%;}
    .menuWrap .gnb {transform: translateY(-50%);}
    .menuWrap .gnb > ::after{width: 10px; height: 10px;}
    .menuWrap .gnb > li { font-size: 25px; padding-top: 30px; }
    .menuWrap .gnb > li .sub li { font-size: 16px; line-height: 2;}
    .menuWrap .gnb > ::after {content: ''; width: 12px; height: 12px; top: -30px; left: 0; opacity: 0;}
    .menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: 15px; transition: all 0.3s;} 



  .audition-wrap .auditon-head{margin-bottom: 20px;}
  .audition-wrap{padding: 40px 80px;}
  .audition-wrap .title h2{font-size: 80px;}


  footer .inner{width: 90%;}
  footer{height:70vh;}
  footer .inner .top img {width: 463px; height: 98px;}
  footer .inner .top{padding-top: 50px;}
  footer .inner .contact{margin-top: 190px;}
  footer .inner .bottom{justify-content: center; float:none;}
  footer .inner .bottom ul li span{font-size: 13px; }
  footer .inner .bottom .list{bottom: 5%;}
  .li-separator{margin: 2px 20px 0;}
}



@media screen and (max-width: 1024px) {
    /* header */
    header{height: 70px;}
    .headerInner{height: 80px; padding: 30px 3%;}
    .headerInner .ent-text{font-size: 18px;}
    .headerInner .menu {width: 25px;}
    .headerInner .menu span{width: 100%; height: 1px; margin-bottom: 7px;}
    .headerInner .menu span:last-child{margin-bottom: 0;}
    
    /* tab-menu */
    .menuInner {width: 80%;}
    .menuWrap .gnb {transform: translateY(-50%); padding: 0;}
    .menuWrap .gnb > ::after{width: 7px; height: 7px;}
    .menuWrap .gnb > li { font-size: 22px; padding-top: 30px; }
    .menuWrap .gnb > li .sub li { font-size: 16px; line-height: 2;}
    .menuWrap .gnb > ::after {content: ''; width: 10px; height: 10px; top: -20px; left: 0; opacity: 0;}
    .menuWrap .gnb > li:hover:after {opacity: 1; position: absolute; top: 25px; transition: all 0.3s;} 
    .menu.active span:nth-child(1) {transform: translateY(10px) rotate(45deg);}



  .audition-wrap{padding: 20px 40px; width: 75%;}
  .audition-wrap .title h2{font-size: 60px;}
  .audition-wrap .title span{font-size: 20px; margin-left: 5px;}
  .audition-wrap .textBox{padding-top: 10px; }
  .audition-wrap .textBox.a{margin-bottom: 0;}
  .audition-wrap .textBox .text li{font-size: 14px;}
  



  footer{height: 60vh;}
  footer .inner .top{padding-top: 50px;}
  footer .inner .top img{width:380px; height: 80px;}
  footer .inner .contact {margin-top: 200px; }
  footer .inner .contact li{ margin-bottom: 12px; }
  footer .inner .bottom ul{height: 50px; }
  footer .inner .bottom ul li:nth-child(11){margin-right: 50px;}
  footer .inner .bottom .list{display: none;}
}




@media screen and (max-width: 768px) {
  .headerInner {padding: 25px 3%;}

  /* tab-menu */
  .menuWrap .gnb {position: absolute; top: 0; width: 100%; height: 60%; flex-direction: column;}
  .menuInner { width: 100%; padding: 0 3%; }
  .menuWrap .gnb { transform: translateY(10%); }
  .menuWrap .gnb > ::after{width: 7px; height: 7px;}
  .menuWrap .gnb > li { font-size: 18px; padding-top: 35px; }
  .menuWrap .gnb > li .sub li { font-size: 15px; line-height: 2;}
  .menuWrap .gnb > li::after {left: 0; top: -5px; opacity: 0;}
  .menuWrap .gnb > li:hover::after { left: 0; top: 30px; opacity: 1; transition: all 0.3s ease; }


  .audition-wrap .auditon-head{margin-bottom: 5px;}
  .audition-wrap .auditon-head span{font-size: 12px;}
  .audition-wrap .title{padding: 15px 0 0;}
  .audition-wrap .title h2{font-size: 35px;}
  .audition-wrap .title span{font-size: 18px; margin-left: 5px;}
  .audition-wrap .textBox{padding-top: 15px; width: 100%;}
  .audition-wrap .textBox .text li{margin-bottom: 7px; font-size: 12px;}
  .audition-wrap .textBox.b{ width: fit-content; position: absolute; top: 62%; left: 40%;}

  footer{height: 50vh; margin: 0 auto; width: 100%;}
  footer .inner .top{flex-direction: column; padding-top: 50px;}
  footer .inner .top img{width: 270px; height: 58px;}
  footer .inner .contact{height: 108px; margin-top: 100px;}
  footer .inner .bottom{margin-top: 33px; float: right;}

}






@media screen and (max-width: 500px) {
  body{padding-top: 50px;}
  .headerInner .ent-text{font-size: 14px;}
  header{height: 40px;}
  .headerInner{height: 40px; padding: 26px 3%;}
  .headerInner .menu span { margin-bottom: 4px;}
  .headerInner .menu{width: 18px;}


  .audition-wrap .auditon-head{display: none;}
  .audition-wrap .title{padding-top: 20px;}
  .audition-wrap .title span {font-size: 14px; }
  .audition-wrap .title h2{font-size: 50px;}
  .audition-wrap .title h2 i{font-size: 28px;}
  .audition-wrap .textBox .text li{display: none;}
  .audition-wrap .textBox .text li:nth-child(1){display: block;}
  .audition-wrap .textBox.b{ width: fit-content; position: absolute; top:85%; left: 10.8%;} 

  /* .audition-wrap .textBox .text li{font-size: 10px; margin-bottom: 3px;}
  .audition-wrap .textBox.b{ width: fit-content; position: absolute; top: 60%; left: 37%;} */


  .faq{height: 50vh;}
  .faq .inner h3 {font-size: 18px;}
  .faq .inner .list li {font-size: 14px; margin-bottom: 15px;}
  .faq .inner .list li span{font-size:10px;}
  

  footer .inner .contact {position: absolute; top: 22%;}
  footer .inner .contact li{margin-bottom: 8px;}
  footer .inner .contact li span{margin-right: 85px;}
  footer .inner .contact li:nth-child(3) span{ margin-right: 97px;}
  footer .inner .bottom ul li span{position: absolute; left: 5%; bottom: 6%; }
}






@media screen and (max-width: 393px) {

  footer{height: 56vh; margin: 0 auto; width: 100%;}
  footer .inner{width: 85%;}
  footer .inner .top img{width: 200px; height: 41px;}
  footer .inner .contact {position: absolute; top: 20%;}
  footer .inner .contact li span{margin-right: 55px;}
  footer .inner .bottom .list{display: none;}
  footer .inner .bottom ul li span{position: absolute; left: 7%; bottom: 7%; font-size: 10px;}
}