@charset "utf-8";

/* 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}
body.clicked {cursor: url('../img/cursor2.png'), auto;}
a:hover {cursor: url('../img/cursor2.png'), auto;}
button:hover {cursor: url('../img/cursor2.png'), auto;}

.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;}
.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;}
.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;}
.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; }
.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; visibility: hidden; pointer-events: none;}
.menuWrap.on {visibility: visible; transform: translateY(0); opacity: 1; pointer-events: auto;}

.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;}



.artist {height: 130vh; padding: 150px 0; box-sizing: border-box;}
.artist h2 {font-size: 50px; font-weight: 400; letter-spacing: -1px; color:#F297B3; text-align: center; margin-bottom: 50px;}
.artist ul { width: 42%; margin: 0 auto 100px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.artist ul li {width: 10%; margin: 10px 5%; cursor: pointer;}
.artist ul li img {width: 100%; height: 100%; transition: all 0.3s ease, filter 0.6s ease; filter: brightness(0.5)}
.artist ul li img:hover {transform: scale(1.2) rotate(5deg); filter: brightness(1)}
.artist ul li img.selected {filter: brightness(1); transform: scale(1.2);}



/* calendar */
.calendar .all {width: 70%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
.calendar .left {width: 30%; position: relative;}
.calendar .right {width: 50%;}

.left .schedule-wrap .tit {color:#FF669B; text-align: left; border-bottom: 2px solid #FF669B; text-transform: uppercase; font-size: 25px; font-weight: 400; padding: 55px 0 10px 0;}

.calendar .left .date {margin-bottom: 40px; font-weight: 400; font-size: 18px;}
.calendar .left .schedule span {position: relative; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 400; margin-right: 50px; padding-left: 8px;}
.calendar .left .schedule span:before {content: ''; position: absolute; width: 30px; height: 30px; background: #F297B3; border-radius: 50%; z-index: -1;}
.calendar .left .schedule span.two:before {background: #A8B0C5;}
.calendar .left .schedule span.three:before {background: #A1BEAA;}
.calendar .left p {margin-bottom: 30px; display: flex;}
.schedule-wrap {display: none;}
.schedule-wrap.active {display: block; margin-bottom: 70px;}

.detail {font-size: 12px; display: flex; justify-content: space-between; align-items: center;}
.detail .line {width: 50%; height: 1px; background: #fff;}

.calendar .right {position: relative;}
.calendar .right .month {width: 100%;}
.calendar .right .month .month-box {width: 30%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 400; margin-bottom: 50px;}
.calendar .right .month button {width: 20%; height: 100%; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;}
.calendar .right .calendar-imgs {max-width: 450px; margin: 0 auto;}
.calendar .right .calendar-imgs img {width: 100%; height: 100%; display: none;}
.calendar .right .calendar-imgs img.active {display: block;}

.calendar-set.fade-out {opacity: 0; transition: opacity 0.3s ease;}


/* 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;}



/* 1800px 이하 */
@media screen and (max-width: 1800px) {
  .calendar .right .month .month-box {width: 30%;}
}


@media screen and (max-width: 1600px) {
  .artist ul { width: 60%;}
}

/* 1400px 이하 */
@media screen and (max-width: 1400px) {
    /* 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;} 


  .artist {padding-top: 100px;}
  .artist h2 {font-size: 28px;}
  .artist ul { width: 60%;}

  
  .calendar .right .month button span {font-size: 10px;}
  .calendar .right .month .month-box {font-size: 18px;}
  .calendar .right .calendar-imgs {max-width: 350px;}

  /* footer */
  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;}
}




/* 1180px 이하 (태블릿 가로 기준) */
@media screen and (max-width: 1180px) { 
.artist {height: 170vh;}
.artist h2 {font-size: 50px;}
.artist .inner { height: 100%;}
.artist ul { width: 65%;}
.calendar {height: 100%;}
.calendar .all {width: 100%; height: 100%; flex-wrap: wrap;}
.left .schedule-wrap .tit {width: 100%; margin: 0 auto; padding-bottom: 20px; font-size: 18px; border-bottom:1px solid #FF669B;}
.calendar .left {width: 80%; margin: 0 auto; margin-bottom: 50px;}
.schedule-wrap.active {margin-bottom: 20px;}
.calendar .left .date {margin: 40px 0;}
.calendar .left .schedule span {margin-right: 20px;}
.calendar .left .scheduleList {display: flex; justify-content: space-between; }

/* right */
.calendar .right { width: 100%; height: 100%;}
.calendar .right .month {font-size: 20px; font-weight: 400; display: block; margin-bottom: 30px;}
.calendar .right .month .month-box {width: 18%;}
.calendar .right .calendar-imgs {max-width: 500px;}
.detail {display: none;}

}




/* 1024px 이하 (태블릿 가로 기준) */
@media screen and (max-width: 1024px) {
    /* header */
    .headerInner .ent-text{font-size: 18px;}
    .headerInner .menu {width: 25px;}
    .headerInner .menu span{width: 100%; height: 1px; margin-bottom: 7px;}
    
    /* 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);}


.calendar .left span {margin-right: 20px;}

/* footer */
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: 801px) {
  .calendar .left span {font-size: 13px;}
}

/* 768px 이하 (태블릿 세로 또는 작은 태블릿) */
@media screen and (max-width: 768px) {
  body {font-size: 13px;}
  .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; }


  .inner{width: 90%;}
  .calendar .right .month .month-box {width: 25%;}
  .calendar .left span:before {width: 25px; height: 25px;}
  .calendar .left .scheduleList {flex-wrap: wrap;}

  .schedule-wrap.active {margin-bottom: 50px;}

  /* footer */
  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;}
}


/* 500px 이하 (대부분의 모바일 기준) */
@media screen and (max-width: 500px) {
body {font-size: 12px;}
.calendar .left .date {font-size: 18px;}
.calendar .right .month .month-box {font-size: 20px; width: 50%;}
.schedule-wrap.active {margin-bottom: 20px;}
.calendar .left span {font-size: 12px;}
.calendar .left span:before {width: 23px; height: 23px;}
.calendar .right .month .month-box {font-size: 18px; width: 40%;}
  .schedule-wrap.active {margin-bottom: 70px;}

  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%; }

}

/* 393px 이하 (아이폰 mini 등 초소형 모바일) */
@media screen and (max-width: 393px) {
body {font-size: 11px;}

.calendar .left span {font-size: 11px;}
.calendar .left span:before {width: 21px; height: 21px;}
}