.show-default { display: block !important; }
.hide-default { display: none !important; }
:root { --love: 'Lovelace', sans-serif; --butler: 'Butler', sans-serif; --green: #c3e833; --deepP: #2b0047; --mediumP: #52317e; --mildP: #712ec9; --softP: #dfd1fe; --dark: #141419; --medium: #222; }
.font-butler { font-family: var(--butler); }
.blind { display: block; width: 0; height: 0; overflow: hidden; }
.header { z-index: 99; position: fixed; left: 0; right: 0; top: 0; border-bottom: 1px solid #cca5ff; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.header.active { background-color: rgba(113, 46, 201, 0.95); }
.header-inner { position: relative; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.header-sns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; }
.header-gnb { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 60px; height: 100%; }
.header-gnb > div { width: 166px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; position: relative; }
.header-gnb > div:hover .header-gnb__depth1 { font-weight: 700; }
.header-gnb > div:hover::after { background-color: var(--green); width: calc(100% + 6px); }
.header-gnb > div::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: transparent; height: 4px; border-radius: 2em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-gnb__depth1 { height: 100%; width: 100%; color: #fff; font-size: 26px; font-weight: 500; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-gnb__depth2 { position: absolute; bottom: 4px; left: 50%; right: 0; width: 100%; -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); background-color: rgba(87, 28, 164, 0.95); padding: 4px 7px; display: none; }
.header-gnb__depth2 a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 50px; color: #cca5ff; font-size: 20px; font-weight: 400; padding: 0 5px; border-bottom: 1px solid #b2a8c7; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-gnb__depth2 a:last-child { border-bottom: none; }
.header-gnb__depth2 a:hover { color: #fff; font-weight: 700; }
.footer { background-color: #19082f; position: relative; z-index: 2; }
.footer .inner { height: 380px; color: #d5c5f7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; }
.footer address span,
.footer address a { font-style: normal; font-size: 20px; font-weight: 300; line-height: 1.8; color: #d5c5f7; }
.footer .copy { font-size: 16px; font-weight: 300; line-height: 2; }
.footer-sns { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.top-btn { position: fixed; z-index: 10; bottom: 30px; right: 30px; width: 80px; height: 80px; }
.hamburger-btn { width: 30px; cursor: pointer; position: relative; display: none; }
.hamburger-btn span { display: block; width: 100%; height: 3px; background: #fff; transition: all 0.3s ease; position: relative; }
.hamburger-btn span:not(:first-child) { margin-top: 7px; }
.hamburger-btn span:nth-child(1),
.hamburger-btn span:nth-child(2) { transform: scale(1); }
.hamburger-btn span:nth-child(3) { transform: rotate(0deg) translate(0, 0); }
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 7px); }
.hamburger-btn.active span:nth-child(2) { transform: scale(0); }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
.header-gnb .header-gnb__mob { display: none; }
@media all and (max-width: 1300px) {
 .header-inner h1 { width: 200px; }
 .header-gnb__depth1 { font-size: 20px; }
 .header-gnb { gap: 0; }
}
@media all and (max-width: 1200px) {
 .header-gnb { transform: none; top: 0; left: auto; opacity: 0; right: 0; transform: translateX(100%); width: 50vw; position: fixed; height: 100vh; background-color: rgba(84, 28, 157, 0.98); box-shadow: -30px 0px 50px 0px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 24px; padding: 120px 3.90625vw 0; transition: all 0.3s ease; }
 .header.side-on .header-gnb { opacity: 1; transform: translateX(0); }
 .header-gnb__depth1 { justify-content: flex-start; height: auto; font-size: 38px; }
 .header-gnb > div { height: auto; width: 100%; display: block; padding-bottom: 24px; border-bottom: 1px solid #c6b8e8; }
 .header-gnb > div:last-child { border-bottom: none; }
 .header-gnb > div::after { display: none; }
 .header-gnb__depth2 { display: flex; flex-direction: column; gap: 10px; position: static; transform: none; background-color: transparent; padding: 0; margin-top: 12px; }
 .header-gnb__depth2 a { color: #fff; border-bottom: none; height: auto; padding: 0; justify-content: flex-start; font-size: 22px; font-weight: 300; }
 .header-gnb__depth2 a:hover { font-weight: 300; }
 .header-inner > .header-sns { display: none; }
 .header-gnb .header-gnb__mob { display: flex; justify-content: space-between; margin-top: 100px; padding-bottom: 0; }
 .hamburger-btn { margin-left: auto; display: block; }
 .header-inner { height: 80px; }
 .top-btn { width: 60px; height: 60px; }
}
@media all and (max-width: 1024px) {
 .show-1024 { display: block !important; }
 .hide-1024 { display: none !important; }
 .header-gnb { width: 80vw; }
}
@media all and (max-width: 768px) {
 .show-768 { display: block !important; }
 .hide-768 { display: none !important; }
 .footer .inner { height: auto; padding: 50px 0; }
 .footer address a,
 .footer address span { font-size: 16px; }
 .footer .copy { font-size: 15px; }
}
@media all and (max-width: 480px) {
 .show-640 { display: block !important; }
 .hide-640 { display: none !important; }
 .header-inner { height: 65px; }
 .header-inner h1 { width: 125px; }
 .hamburger-btn { width: 22px; }
 .hamburger-btn span { height: 2px; }
 .hamburger-btn span:not(:first-child) { margin-top: 6px; }
 .hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(6.5px, 6px); }
 .hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -5px); }
 .hamburger-btn.active span { background: #8c69c1; }
 .header-gnb .header-gnb__mob { margin-top: 75px; }
 .top-btn { width: 50px; height: 50px; bottom: 20px; right: 20px; }
 .header-gnb { padding: 15vw 7.5% 0 7.5%; }
 .header-gnb__depth1 { font-size: 8vw; }
 .header-gnb__depth2 a { font-size: 4.75vw; }
 .header-gnb__mob > a { width: 120px; }
 .header-gnb__mob > a img { width: 100%; }
 .header-sns { gap: 0 10px; }
 .header-sns li:not(:last-child){
  position: relative;
  margin-right: 1.5em;
 }
 .header-sns li:not(:last-child)::before{
  content: "";
  width: 1px;
  height: 70%;
  position: absolute;
  right: -1.1em;
  top: 50%;
  background-color: #C6B8E8;
  transform: translateY(-50%);
 }
 .header-sns img { width: 7vw; }
 .footer .inner { padding: 40px 0; }
 .footer address a,
 .footer address span { font-size: 3.25vw; }
 .footer .copy { font-size: 3vw; }
 .footer-sns { gap: 0 12px; }
 .footer-sns img { width: 6vw; }
}