.about .s1 {position: relative; overflow: hidden; height: 100vh; display: flex; align-items: center; justify-content: center;}
.about .s1 .introVisual {opacity: 0; position: relative; font-size: 160px; font-weight: 700; letter-spacing: 0.01em; font-family: 'Poppins'; color: #000; display: flex; align-items: center; justify-content: center;}
.about .s1 .introVisual .img {width: 0; height: calc(93/160*1em); overflow: hidden;}
.about .s1 .introVisual .img img {width: calc(149/160*1em); max-width: none;}
.about .s1 .introVisual span {padding-left: 0;}
.about .s1 .introVisual span > * {opacity: 0;}
.about .s1 .introVisual span > *:nth-child(1) {transform: translateY(-10%);}
.about .s1 .introVisual span > *:nth-child(2) {transform: translateY(10%);}
.about .s1 .introVisual span > *:nth-child(3) {transform: translateY(-10%);}
.about .s1 .introVisual span > *:nth-child(4) {transform: translateY(10%);}
.about .s1 .scroll {z-index: 1; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 200px;}
.about .s1 .scroll::after {content: ''; width: 100%; height: 20px; background: #000; position: absolute; top: 50%; left: 0; transform: translateY(-100%); z-index: 1;}
.about .s1 .scroll svg {animation: scroll 10s linear infinite; width: 100%; fill: #fff; height: auto; transform-origin: center;}
@keyframes scroll {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.about .s1 .scroll span {font-size: 23px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -100%); color: #fff; animation: scroll_arrow 2s ease-in-out infinite;}
@keyframes scroll_arrow {
    0% {transform: translate(-50%, -100%);}
    50% {transform: translate(-50%, -130%);}
    100% {transform: translate(-50%, -100%);}
}
.about .s1 .circle {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 85%); width: calc(1752/1920*100vw);}
.about .s1 .circle:before {content: ''; width: 100%; padding-top: 100%; display: block; background: #000; border-radius: 50%;}
@media screen and (max-width: 1024px) {
    .about .s1 .introVisual {font-size: 120px;}
    .about .s1 .scroll {transform: translate(-50%, 50%) scale(0.7);}
}
@media screen and (max-width: 820px) {
    .about .s1 .introVisual {font-size: 100px;}
    .about .s1 .scroll {transform: translate(-50%, 50%) scale(0.5);}
}
@media screen and (max-width: 500px) {
    .about .s1 .introVisual {font-size: 80px;}
    .about .s1 .circle {width: calc(1000/500*100vw);}
}
@media screen and (max-width: 360px) {
    .about .s1 .introVisual {font-size: 60px;}
    /* .about .s1 .circle {width: calc(1000/360*100vw);} */
}

.about .s2 {background: #000; color: #fff; position: relative;}
.about .s2::after {content: ''; width: 100%; height: 2px; background: #000; position: absolute; top: 0; left: 0; transform: translateY(-50%); z-index: 1;}
.about .s2 .slogan {padding-top: 330px;}
.about .s2 .slogan p {font-family: "Poppins"; font-size: 160px; letter-spacing: -0.025em; color: #535353; line-height: calc(160/160*1em);}
.about .s2 .slogan p + p {margin-top: calc(10/160*1em);}
.about .s2 .slogan p:nth-child(1) {text-align: left; transform: translateX(-70%);}
.about .s2 .slogan p:nth-child(2) {text-align: right; transform: translateX(70%);}
.about .s2 .slogan p b {font-weight: 700; position: relative; display: inline-block; color: #ffffff1e;}
.about .s2 .slogan p b small {opacity: 0; font-family: 'Pretendard'; letter-spacing: -0.025em; line-height: normal; white-space: nowrap; font-weight: 500; font-size: 20px;font-weight: 500; color: #fffec1; position: absolute; left: 50%; transform: translateX(-50%);}
.about .s2 .slogan p:nth-child(1) small {bottom: 100%; margin-left: calc(-40/20*1em); margin-bottom: calc(20/20*1em);}
.about .s2 .slogan p:nth-child(2) small {top: 100%; margin-left: calc(40/20*1em); margin-top: calc(20/20*1em);}
.about .s2 .profile {display: flex; align-items: flex-start; padding-top: 150px;}
.about .s2 .profile .imgWrap {display: flex; justify-content: center; width: calc(740/1440*100%);}
.about .s2 .profile .imgWrap .img {max-width: 435px;}
.about .s2 .profile .info {padding-top: calc(115/1440*100%); flex-grow: 1;}
.about .s2 .profile .info .name {display: flex; flex-direction: column; align-items: flex-start;}
.about .s2 .profile .info .name small { display: inline-block; font-family: 'Poppins'; font-size: 14px; color: #fff; opacity: .32; letter-spacing: 0.01em;}
.about .s2 .profile .info .name b { display: inline-block; font-family: 'Poppins'; font-size: 61px; font-weight: 700; color: #fff; letter-spacing: -0.01em; padding-top: calc(5/61*1em);}
.about .s2 .profile .info .his {padding-bottom: 130px;}
.about .s2 .profile .info .his dl {display: flex; flex-direction: column; align-items: flex-start;}
.about .s2 .profile .info .his dl dt {display: flex; flex-direction: column; font-size: 24px; padding-top: calc(60/24*1em);}
.about .s2 .profile .info .his dl dt span {font-family: 'Poppins'; font-size: 14px; color: #fffec1; letter-spacing: 0.025em;}
.about .s2 .profile .info .his dl dt b {font-family: 'Poppins'; font-size: inherit; font-weight: 700; color: #fff; letter-spacing: 0.025em; padding-top: calc(10/24*1em); padding-bottom: calc(20/24*1em);}
.about .s2 .profile .info .his dl dt b em {font-family: 'Pretendard';}
.about .s2 .profile .info .his dl dd {font-size: 16px; color: #fff; letter-spacing: 0.025em; font-family: 'Pretendard'; font-weight: 300;}
.about .s2 .profile .info .his dl dd ul {list-style: none;}
.about .s2 .profile .info .his dl dd ul li {word-break: keep-all; counter-increment: custom; line-height: calc(26/16*1em); display: flex; align-items: flex-start;}
.about .s2 .profile .info .his dl dd ul li + li {margin-top: calc(15/16*1em);}
.about .s2 .profile .info .his dl dd ul li:before {content: "0"counter(custom); text-align: center; font-family: 'Poppins'; font-size: inherit; color: inherit; letter-spacing: 0.025em; font-weight: inherit; display: inline-block; width: calc(25/16*1em); margin-right: calc(20/16*1em);}
.about .s2 .profile .info .his dl dd ul li:first-child {counter-reset: custom;}
.about .s2 .profile .info .his dl dd ul li p {display: inline-block;}
@media screen and (max-width: 1440px) {
    .about .s2 .slogan {padding-top: 150px;}
    .about .s2 .slogan p {font-size: 140px;}
}
@media screen and (max-width: 1280px) {
    .about .s2 .slogan {padding-top: 100px;}
    .about .s2 .slogan p {font-size: 110px;}
    .about .s2 .profile .imgWrap .img {width: 60%;}
}
@media screen and (max-width: 1024px) {
    .about .s2 .slogan p {font-size: 100px;}
    .about .s2 .profile .info .name b {font-size: 45px;}
    .about .s2 .profile .info .his dl dt {font-size: 18px;}
    .about .s2 .profile .info .his dl dd {font-size: 14px;}
}
@media screen and (max-width: 820px) {
    .about .s2 .slogan {padding: 90px 10%; }
    .about .s2 .slogan p {font-size: clamp(50px, 85/820*100vw, 85px);}
    .about .s2 .slogan p b small {font-size: clamp(14px, 20/820*100vw, 20px);}
    .about .s2 .profile {padding-top: 50px; display: flex; flex-direction: column; align-items: center;}
    .about .s2 .profile .imgWrap .img {width:90%;}
}
@media screen and (max-width: 500px) {
    .about .s2 .slogan {padding: 100px 5%;}
    .about .s2 .slogan p {font-size: clamp(40px, 50/500*100vw, 50px);}
    .about .s2 .slogan p b small {font-size: clamp(12px, 14/500*100vw, 14px);}
    .about .s2 .profile .info .name {align-items: center;}
    .about .s2 .profile .info .name b {font-size: 30px;}
    .about .s2 .profile .info .his dl dd ul li p br {display: none;}
}
@media screen and (max-width: 360px) {
    .about .s2 .slogan p {font-size: clamp(30px, 40/360*100vw, 40px);}
    .about .s2 .slogan p b small {font-size: clamp(10px, 12/360*100vw, 12px);}
    .about .s2 .profile .info .name b {font-size: 25px;}
    .about .s2 .profile .info .his dl dt {font-size: 16px;}
}

.about .s3 {position: relative; padding-top: 310px; padding-bottom: 175px;}
.about .s3 svg {display: none;}
.about .s3 .objWrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: url(#gooey);}
.about .s3 .obj {position: absolute; background: #fffec1; border-radius: 50%;}
.about .s3 .obj._big {width: 360px; height: 360px; top: 125px; right: 15px; animation: obj_big 8s ease-in-out infinite;}
.about .s3 .obj._small {width: 100px; height: 100px; top: 480px; right: 15px; animation: obj_small 5s ease-in-out infinite;}
@keyframes obj_big {
    0% {transform: scale(1) translate(0, 0);}
    50% {transform: scale(0.9) translate(-30px, -20px);}
    100% {transform: scale(1) translate(0, 0);}
}
@keyframes obj_small {
    0% {transform: scale(1) translate(0, 0);}
    50% {transform: scale(1.1) translate(-50px, -40px);}
    100% {transform: scale(1) translate(0, 0);}
}
.about .s3 .num {position: absolute; font-size: 230px; top: 180px; left: 0%; width: calc(790/1920*100vw); height: calc(204/230*1em); text-align: right;}
.about .s3 .num::after {content: ''; width: 100%; height: 7px; background: #000; position: absolute; bottom: 0; right: 0; transform: translateY(calc(15/230*1em)) translateX(calc(-13.75/230*1em)); z-index: 1;}
.about .s3 .num span {font-family: 'Poppins'; font-weight: 600; letter-spacing: -0.025em; color: #000; display: inline-block; height: calc(195/230*1em); position: relative;}
.about .s3 .num span::after {content: ''; width: calc(118/230*1em); height: calc(118/230*1em); background: #fffec1; border-radius: 50%; position: absolute; top: calc(25/230*1em); left: calc(20/230*1em); transform: translate(-50%, -50%); z-index: -1; animation: num_big 5s ease-in-out infinite;}
@keyframes num_big {
    0% {transform: scale(1) translate(-50%, -50%);}
    50% {transform: scale(1.1) translate(-50%, calc(-50% - (20px * -1)));}
    100% {transform: scale(1) translate(-50%, -50%);}
}
.about .s3 .wrap {position: relative; z-index: 1;}
.about .s3 .txt {width: calc(780/1440*100%); margin-left: auto;}
.about .s3 .txt > span {font-family: 'Poppins'; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: #000; display: inline-block;}
.about .s3 .txt .slogan {font-family: 'Pretendard'; line-height: calc(94/64*1em); font-size: 64px; font-weight: 700; letter-spacing: -0.025em; color: #000; color: #aeaeb1; padding-top: calc(20/64*1em); padding-bottom: calc(60/64*1em);}
.about .s3 .txt .slogan b {color: #000;}
.about .s3 .txt dl dt {font-family: 'Pretendard'; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: #000; padding-bottom: calc(25/26*1em); line-height: calc(39/26*1em);}
.about .s3 .txt dl dd {font-family: 'Pretendard'; font-size: 16px; letter-spacing: -0.025em; color: #000; line-height: calc(26/16*1em);}
.about .s3 .txt dl dd p + p {margin-top: calc(10/16*1em);}
.about .s3 .txt .btn .viewBtn {margin-left: calc(25/24*1em); margin-top: calc(54/24*1em);}
@media screen and (max-width: 1440px) {
    .about .s3 .num {font-size: 200px;}
}
@media screen and (max-width: 1280px) {
    .about .s3 {padding-top: 260px;}
    .about .s3 .num {font-size: 150px;}
    .about .s3 .txt .slogan {font-size: 50px;}
}
@media screen and (max-width: 1024px) {
    .about .s3 {padding-bottom: 130px;}
    .about .s3 .num {font-size: 120px;}
    .about .s3 .txt .slogan {font-size: 40px;}
    .about .s3 .txt dl dt {font-size: 22px;}
}
@media screen and (max-width: 820px) {
    .about .s3 {padding-top: 340px; padding-bottom: 150px;}
    .about .s3 .num {font-size: clamp(90px, 100/820*100vw, 100px);}
    .about .s3 .txt {width: calc(820/1440*100%);}
    .about .s3 .txt > span {font-size: 16px;}
    .about .s3 .txt .slogan {font-size: clamp(26px, 30/820*100vw, 30px);}
    .about .s3 .txt dl dt {font-size: 18px;}
    .about .s3 .txt dl dd {font-size: 14px; word-break: keep-all;}
    .about .s3 .txt dl dd br {display: none;}
}
@media screen and (max-width: 500px) {
    .about .s3 {padding-top: 100px;}
    .about .s3 .num {width: 100%; position: relative; top: 0; left: 0; transform: translate(0, 0);}
    .about .s3 .num::after {transform: translateY(calc(15/230*1em)) translateX(0);}
    .about .s3 .num span::after {left: auto; right: 0;}
    .about .s3 .txt {width: 100%; padding-top: 50px;}
    .about .s3 .txt .slogan {font-size: clamp(24px, 26/500*100vw, 26px);}
}


.about .s4 .keyWrap {display: flex; flex-direction: column;}
.about .s4 .keyWrap dl {display: flex; align-items: flex-start;}
.about .s4 .keyWrap dl dt {width: calc(600/1440*100%); flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start;}
.about .s4 .keyWrap dl dt small {font-family: 'Poppins'; padding-left: calc(3/14*1em); font-size: 14px; font-weight: 500; color: #000; letter-spacing: 0.01em; position: relative;}
.about .s4 .keyWrap dl dt small::after {content: ''; position: absolute; top: 50%; right: 0; transform: translate(60%, -55%); font-size: calc(36/14*1em); font-weight: bold; font-family: 'Pretendard'; color: #000; opacity: .21; letter-spacing: -0.025em;}
.about .s4 .keyWrap dl:nth-child(1) dt small::after {content: '01';}
.about .s4 .keyWrap dl:nth-child(2) dt small::after {content: '02';}
.about .s4 .keyWrap dl:nth-child(3) dt small::after {content: '03';}
.about .s4 .keyWrap dl dt p {font-family: 'Pretendard'; font-size: 38px; font-weight: 700; letter-spacing: -0.025em; color: #000; padding-top: calc(18/38*1em); line-height: calc(59/38*1em);}
.about .s4 .keyWrap dl dd {border-top: 1px solid #565656; flex-grow: 1; padding: 0 calc(10/1440*100%); margin-top: 5px; padding-bottom: 110px;}
.about .s4 .keyWrap dl dd b {font-family: 'Pretendard'; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: #000;  margin-top: calc(40/20*1em); margin-bottom: calc(15/20*1em); text-decoration: underline; text-decoration-color: #fffe93; text-underline-offset: calc(-7/20*1em); text-decoration-thickness: calc(10/20*1em); display: inline-block;}
.about .s4 .keyWrap dl dd p {font-family: 'Pretendard'; font-size: 16px; letter-spacing: -0.025em; color: #000; line-height: calc(26/16*1em);}
.about .s4 .keyWrap dl dd p + p {margin-top: calc(10/16*1em);}
@media screen and (max-width: 1440px) {
    .about .s4 .keyWrap dl dt p {font-size: clamp(34px, 38/1440*100vw, 38px);}
}
@media screen and (max-width: 1280px) {
    .about .s4 .keyWrap dl dt p {font-size: clamp(28px, 34/1280*100vw, 34px);}
}
@media screen and (max-width: 1024px) {
    .about .s4 .keyWrap dl dt p {font-size: clamp(24px, 28/1024*100vw, 28px);}
    .about .s4 .keyWrap dl dd {padding-bottom: 80px;}
    .about .s4 .keyWrap dl dd b {font-size: 18px;}
    .about .s4 .keyWrap dl dd p {font-size: 14px; word-break: keep-all;}
    .about .s4 .keyWrap dl dd p br {display: none;}
}
@media screen and (max-width: 820px) {
    .about .s4 .keyWrap dl {flex-direction: column;}
    .about .s4 .keyWrap dl dt {width: 100%;}
    .about .s4 .keyWrap dl dt p {font-size: clamp(20px, 23/820*100vw, 23px);}
    .about .s4 .keyWrap dl dd {padding-left: 0; width: 100%; padding-right: 20%; box-sizing: border-box;}
    .about .s4 .keyWrap dl dd b {font-size: 18px;}
    .about .s4 .keyWrap dl dd p {font-size: 16px;}
}
@media screen and (max-width: 500px) {
    .about .s4 .keyWrap dl dd {padding-right: 0;}
}
@media screen and (max-width: 360px) {
    .about .s4 .keyWrap dl dd b {font-size: 16px;}
    .about .s4 .keyWrap dl dd p {font-size: 14px;}
}


.s5 {background: #fff; padding: 100px 0 180px;}
.s5 .titleBox {display: flex; flex-direction: column; align-items: center;}
.s5 .titleBox span {font-family: 'Pretendard'; font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: #000; display: inline-block;}
.s5 .titleBox b {font-family: 'Poppins'; font-size: 76px; font-weight: 700; letter-spacing: -0.01em; color: #000; display: inline-block; padding-top: calc(30/76*1em); padding-bottom: calc(100/76*1em);}
.s5 .mqWrap {position: relative; overflow: hidden;}
.s5 .mqWrap::after {content: ''; width: 100%; height: 130%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; box-shadow: inset 0 0 25px 50px rgb(255, 255, 255);}
.s5 .marquee {width: 100%; position: relative; overflow: hidden;}
.s5 .marquee + .marquee {margin-top: 40px;}
.s5 .marquee .absol { width: 100%; display: flex; align-items: center;}
.s5 .marquee .absol .mar_ch {display: flex; align-items: center;}
.s5 .marquee .absol .mar_ch img {height: 65px; flex-shrink: 0; padding-right: 60px; max-width: none;}

@media screen and (max-width: 1600px) {
    .s5 {padding: 200px 0;}
}
@media screen and (max-width: 1280px) {
    .s5 {padding: 150px 0;}
}
@media screen and (max-width: 1024px) {
    .s5 {padding: 100px 0;}
    .s5 .titleBox b {font-size: clamp(50px, 76/1024*100vw, 76px);}
    .s5 .marquee + .marquee {margin-top: 20px;}
}
@media screen and (max-width: 820px) {
    .s5 {padding: 80px 0;}
}
@media screen and (max-width: 500px) {
    .s5 .titleBox b {font-size: clamp(40px, 50/500*100vw, 50px);}
    .s5 .marquee + .marquee {margin-top: 10px;}
    .s5 .marquee .absol .mar_ch img {height: clamp(40px, 40/360*100vw, 65px); padding-right: 30px;}
    .s5 .mqWrap::after {box-shadow: none;}
}