.header {position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 100; padding-top: 32px;}
.header .wrap {display: flex; align-items: center; justify-content: space-between;}
.header .logo {width: 122px; flex-shrink: 0; position: relative; z-index: 101;}
.header .menu {font-size: 24px; display: flex; align-items: center;}
.header .menu ul {display: flex; align-items: center; gap: calc(120/24*1em);}
.header .menu li {font-size: inherit; font-weight: 700; letter-spacing: 0.025em; font-family: 'Ubuntu'; color: #000; position: relative; transition: .4s;}
.header .menu li a {position: relative; z-index: 1; padding: 5px;}
.header .menu li::before {content: ''; z-index: -1; position: absolute; top: 0; left: 0; display: block; width: 0%; height: 100%; background: #fffcbf; transition: .4s;}
.header .menu li:hover::before {width: 100%;}
.header .hamburger {display: none; flex-direction: column; align-items: center; justify-content: center; width: 25px; height: 20px; gap: 5px; position: relative; z-index: 101;}
.header .hamburger span {display: block; width: 100%; height: 2px; background: #000; transition: .4s;}
.header .lang {margin-left: calc(80/20*1em); position: relative; font-size: 20px; font-family: 'Ubuntu'; font-weight: 500; letter-spacing: -0.025em; color: #fff;}
.header .lang_current {display: flex; align-items: center; gap: calc(10/20*1em); color: #fff; background: #363638; padding: calc(8/20*1em) calc(10/20*1em); border-radius: calc(10/20*1em); cursor: pointer;}
.header .lang_list_wrap {display: none; width: 100%; position: absolute; top: 100%; left: 0;}
.header .lang_list {width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(3/20*1em); padding: calc(5/20*1em) 0; box-sizing: border-box; border-radius: calc(10/20*1em); cursor: pointer;}
.header .lang_list a {display: block; width: 100%; font-size: calc(16/20*1em); padding: calc(8/16*1em) calc(10/16*1em); box-sizing: border-box; background: #000; color: #fff; text-align: center; border-radius: calc(10/20*1em); transition: .4s;}
@media screen and (min-width: 821px) {
    .header .lang_list a:hover {background: #fffcbf; color: #000;}
}
@media screen and (max-width: 1440px) {
    .header .menu {font-size: clamp(20px, 20/1280*100vw, 24px);}
}
@media screen and (max-width: 1280px) {
    .header {padding-top: clamp(20px, 20/1280*100vw, 32px);}
    .header .lang {font-size: 16px;}
}
@media screen and (max-width: 1024px) {
    .header .logo {width: 100px;}
    .header .menu {font-size: clamp(16px, 16/1024*100vw, 20px);}
    .header .menu ul {gap: calc(60/20*1em);}
    .header .lang {font-size: 14px;}
}
@media screen and (max-width: 820px) {
    .header .menu {box-sizing: border-box; display: none; opacity: 0; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; transform: translateX(100%); background: #fffcbf; z-index: 100; padding-top: 100px; transition: .4s allow-discrete;}
    .header.HmActive .menu {display: block; opacity: 1; transform: translateX(0%);}
    @starting-style { 
        .header.HmActive .menu {opacity: 0; transform: translateX(100%);}
    }

    .header .menu ul {flex-direction: column; align-items: center; gap: 0px;}
    .header .menu li {font-size: 20px; border-top: 1px solid #000; width: 100%;}
    .header .menu li a {padding: 10px 2.5%; display: block; box-sizing: border-box; width: 100%;}
    .header .menu li::before {display: none;}
    .header .menu li:hover::before {display: none;}
    .header .menu li:hover {background: transparent;}

    .header .hamburger {display: flex;}
    .header.HmActive .hamburger span {position: absolute; top: 50%; margin-top: -1px;}
    .header.HmActive .hamburger span:first-child {transform: rotate(45deg);}
    .header.HmActive .hamburger span:nth-child(2) {opacity: 0;}
    .header.HmActive .hamburger span:last-child {transform: rotate(-45deg);}
    .header .logo {width: 80px;}

    .header .lang {position: absolute; bottom: 0; left: 0; margin-left: calc(30/16*1em); margin-bottom: calc(30/16*1em); font-size: 16px;}
    .header .lang .lang_list_wrap {top: auto; bottom: 100%;}
}
@media screen and (max-width: 500px) {
    .header .logo {width: 70px;}
    .header .lang {font-size: 14px;}
}
@media screen and (max-width: 360px) {
    .header .lang {font-size: 12px;}
}



.footer {background: #fffcbf; padding: 80px 0 40px; position: relative;}
.footer .toTop {position: absolute; top: 0; left: 50%; transform: translate(-50%, -40%); display: flex; align-items: center; justify-content: center; font-size: 40px; width: calc(90/40*1em); height: calc(90/40*1em); border-radius: 50%; background: #fffcbf; z-index: 1; cursor: pointer;;}
.footer .wrap {display: flex; flex-direction: column; align-items: center;}
.footer .logo {padding-bottom: 50px; }
.footer .info {padding-bottom: calc(45/22*1em); text-align: center; word-break: keep-all; font-size: 22px; font-weight: 500; letter-spacing: 0.02em; font-family: 'Pretendard'; color: #000; line-height: calc(34/22*1em);}
.footer .copy {text-align: center; font-size: 18px; letter-spacing: 0.02em; font-family: 'Pretendard'; color: #000;}
@media screen and (max-width: 1600px) {
    .footer {padding: 60px 0 30px;}
    .footer .toTop {font-size: 36px;}
    .footer .logo {width: 140px;}
}
@media screen and (max-width: 1440px) {
    .footer .info {font-size: 20px;}
    .footer .copy {font-size: 16px;}
}
@media screen and (max-width: 1280px) {
    .footer .logo {width: 100px;}
    .footer .toTop {font-size: 28px;}
    .footer .info {font-size: 18px;}
    .footer .copy {font-size: 14px;}
}
@media screen and (max-width: 1024px) {
    .footer .logo {width: 80px;}
    .footer .toTop {font-size: 24px;}
    .footer .info {font-size: 16px;}
    .footer .copy {font-size: 12px;}
}
@media screen and (max-width: 820px) {
    .footer {padding: 60px 0 20px;}
    .footer .logo {width: 100px;}
    .footer .copy {font-size: 14px;}
}
@media screen and (max-width: 500px) {
    .footer .logo {width: 80px; padding-bottom: 30px;}
    .footer .info {font-size: 14px;}
    .footer .copy {font-size: 12px;}
}


aside {cursor: pointer; position: fixed; font-size: 26px; bottom: clamp(15px, 15/1920*100vw, 20px); right: clamp(15px, 30/1920*100vw, 30px); display: flex; align-items: center; justify-content: center; z-index: 100;}
aside .logo {position: relative; width: calc(78/26*1em); height: calc(78/26*1em); display: flex; align-items: center; justify-content: center; border-radius: 50%;}
aside .logo::before, 
aside .logo::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; border-radius: 50%;}
aside .logo::before {width: 100%; height: 100%; background-image: linear-gradient(131deg, #e877ae, #7c73f3); background-clip: border-box; background-origin: border-box; border: 2px solid transparent; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude;}
aside .logo::after {background: linear-gradient(131deg, #e877ae, #7c73f3); z-index: 1; width: calc(70/78*100%); height: calc(70/78*100%);}
aside .logo i {position: relative; z-index: 2; color: #fff;}
@media screen and (max-width: 1280px) {
    aside {font-size: 20px;}
}
@media screen and (max-width: 1024px) {
    aside {font-size: 18px;}
}
@media screen and (max-width: 820px) {
    aside {font-size: clamp(14px, 24/820*100vw, 24px);}
}


.sub .sv {position: relative; width: 100%; font-size: clamp(190px, 229/1920*100vw, 229px); padding-bottom: calc(100/229*1em); overflow: hidden;}
.sub .sv svg {display: none;}
.sub .sv .title {opacity: 0; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;}
.sub .sv .title h1 {position: relative; display: inline-block; box-sizing: border-box; margin-top: calc(250/229*1em); margin-bottom: calc(80/229*1em); font-family: "Poppins"; font-weight: bold; letter-spacing: 0.015em;  }
.sub .sv .title h1 span { -webkit-text-stroke: 2px #fffcbf;}
.sub .sv .title h1 span.front {position: relative; z-index: 1;}
.sub .sv .title h1 span.back {position: absolute; top: 0; left: 0; transform: translateX(calc(25/229*1em));}
.sub .sv .title h1 span em {display: inline-block; transform: translateX(calc(-5/229*1em));}
.sub .sv .title h1 span.back em {background-color: #000; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: url('/asset/img/txt_wave.png'); background-size: 100% 60%; background-position: center; background-repeat: no-repeat;}
.sub .sv .title h1 img {display: block;}
.sub .sv .title p {line-height: calc(25/17*1em); font-family: 'Poppins'; color: #000; font-size: 17px; letter-spacing: 0.02em;}
.sub .sv .title b {line-height: calc(25/24*1em); font-family: 'Poppins'; color: #000; font-size: 24px; font-weight: 600; letter-spacing: 0.02em; margin-top: calc(5/24*1em);}
.sub .sv .objWrap {opacity: 0; filter:url(#sv_gooey); position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1920px; height: 100%;}
.sub .sv .objWrap .obj {position: absolute; border-radius: 50%; background: #fffcbf; transform: translateY(-5px);}
.sub .sv .objWrap .obj:nth-child(1) {width: 90px; height: 90px; bottom: 15%; left: 115px; animation: sv_arrow 2.8s ease-in-out infinite;}
.sub .sv .objWrap .obj:nth-child(2) {width: 174px; height: 174px; top: 20%; left: 300px; animation: sv_arrow 3s ease-in-out infinite;}
.sub .sv .objWrap .obj:nth-child(3) {width: 50px; height: 50px; top: 55%; left: 43%; animation: sv_arrow 3.2s ease-in-out infinite;}
.sub .sv .objWrap .obj:nth-child(4) {width: 80px; height: 80px; top: 30%; right: 310px; animation: sv_arrow 2.9s ease-in-out infinite;}
.sub .sv .objWrap .obj:nth-child(5) {width: 170px; height: 170px; top: 50%; right: 100px; animation: sv_arrow 3.1s ease-in-out infinite;}
.sub .sv .sv_scroll {opacity: 0; display: block; position: absolute; right: calc(175/1920*100vw); bottom: calc(120/229*1em); z-index: 1;}
.sub .sv .sv_scroll .roll {display: block; animation: sv_roll 8s linear infinite;}
.sub .sv .sv_scroll .roll img {display: block;}
.sub .sv .sv_scroll span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; font-size: 28px;}
.sub .sv .sv_scroll span i {transform: translateY(-5px); animation: sv_arrow 3s ease-in-out infinite;}
@keyframes sv_roll {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes sv_arrow {
    0% {transform: translateY(-5px);}
    50% {transform: translateY(5px);}
    100% {transform: translateY(-5px);}
}
@keyframes sv_obj {
    0% {transform: translateY(-10px);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(-10px);}
}

@media screen and (max-width: 1600px) {
    .sub .sv {font-size: clamp(160px, 180/1600*100vw, 190px);}
    .sub .sv .objWrap {width: 100%;}
}
@media screen and (max-width: 1440px) {
    .sub .sv {font-size: clamp(140px, 160/1440*100vw, 160px);}
}
@media screen and (max-width: 1280px) {
    .sub .sv {font-size: clamp(120px, 140/1280*100vw, 140px);}
    .sub .sv .title h1 span {-webkit-text-stroke: 1px #fffcbf;}
    .sub .sv .sv_scroll { right: calc(85/1920*100vw);}
    .sub .sv .sv_scroll img {transform: scale(0.8);}
    .sub .sv .title p {font-size: 16px;}
    .sub .sv .title b {font-size: 20px;}
    .sub .sv .objWrap .obj:nth-child(1) {width: 70px; height: 70px;}
    .sub .sv .objWrap .obj:nth-child(2) {width: 145px; height: 145px;}
    .sub .sv .objWrap .obj:nth-child(3) {width: 60px; height: 60px;}
    .sub .sv .objWrap .obj:nth-child(4) {width: 100px; height: 100px;}
    .sub .sv .objWrap .obj:nth-child(5) {width: 130px; height: 130px;}
}
@media screen and (max-width: 1024px) {
    .sub .sv {font-size: clamp(100px, 120/1024*100vw, 120px);}
    .sub .sv .title p {font-size: 14px;}
    .sub .sv .title b {font-size: 18px;}
    .sub .sv .sv_scroll {transform: scale(0.9);}
}
@media screen and (max-width: 820px) {
    .sub .sv {font-size: clamp(80px, 100/820*100vw, 100px);}
    .sub .sv .title h1 {margin-top: calc(350/229*1em);}
    .sub .sv .sv_scroll {bottom: 0; right: calc(20/1920*100vw); transform: scale(0.8);}
    .sub .sv .sv_scroll img {transform: scale(0.7);}
    .sub .sv .sv_scroll span {font-size: 24px;}
    .sub .sv .objWrap .obj:nth-child(5) {width: 95px; height: 95px;}
}
@media screen and (max-width: 500px) {
    .sub .sv {font-size: clamp(60px, 80/500*100vw, 80px);}
    .sub .sv .sv_scroll {display: none;}
    .sub .sv .objWrap .obj:nth-child(1) {width: 50px; height: 50px;}
    .sub .sv .objWrap .obj:nth-child(2) {width: 100px; height: 100px;}
    .sub .sv .objWrap .obj:nth-child(3) {width: 40px; height: 40px;}
    .sub .sv .objWrap .obj:nth-child(4) {width: 60px; height: 60px;}
    .sub .sv .objWrap .obj:nth-child(5) {width: 80px; height: 80px;}
}
@media screen and (max-width: 360px) {
    .sub .sv {font-size: clamp(40px, 60/360*100vw, 60px);}
    .sub .sv .title h1 {margin-top: calc(150/60*1em);}
    .sub .sv .objWrap .obj:nth-child(1) {width: 40px; height: 40px; bottom: 10%; left: 100px;}
    .sub .sv .objWrap .obj:nth-child(2) {width: 80px; height: 80px; top: 10%; left: 200px;}
    .sub .sv .objWrap .obj:nth-child(3) {width: 30px; height: 30px; top: 50%; left: 30%;}
    .sub .sv .objWrap .obj:nth-child(4) {width: 50px; height: 50px; top: 20%; right: 200px;}
    .sub .sv .objWrap .obj:nth-child(5) {width: 70px; height: 70px; top: 50%; right: 100px;}
}