.header {opacity: 0; visibility: hidden; transform: translateY(-40px);}

body {overflow: hidden;}

.titleBox {display: flex; flex-direction: column; align-items: center; font-size: 72px; gap: calc(30/72*1em); color: #fff; padding-bottom: 105px;}
.titleBox .title {perspective: 400px; font-weight: 700; letter-spacing: -0.025em; font-family: 'Ubuntu';}
.titleBox p {display: inline-block; perspective: 400px; font-size: 20px; font-weight: 500; letter-spacing: 0.025em; font-family: 'Pretendard'; line-height: 1.4;}

@media screen and (max-width: 1600px) {
    .titleBox {font-size: clamp(60px, 60/1440*100vw, 72px);}
}
@media screen and (max-width: 1440px) {
    .titleBox {font-size: clamp(50px, 50/1280*100vw, 60px);}
    .titleBox p {font-size: clamp(18px, 18/1280*100vw, 20px);}
}
@media screen and (max-width: 820px) {
    .titleBox {padding-bottom: calc(70/50*1em);}
}
@media screen and (max-width: 500px) {
    .titleBox {font-size: clamp(40px, 40/360*100vw, 50px);}
    .titleBox p {font-size: clamp(14px, 14/360*100vw, 16px); word-break: keep-all; text-align: center;}
}
@media screen and (max-width: 360px) {
    .titleBox {padding-bottom: calc(50/40*1em);}
}


.main {overflow: hidden;}

.s1 {width: 100%; height: 100vh; position: relative; overflow: hidden;}
.s1 .intro {width: 100%; height: 100%; position: relative; background: #fffec1;}
.s1 .intro > div { position: absolute; top: 0;}
.s1 .intro > div.left {left: 0; width: auto; transform-origin: left top; transform: rotate(90deg) translateY(-100%);}
.s1 .intro > div.right {right: 0; width: auto; transform-origin: right top; transform: rotate(90deg) translateX(100%);}
.s1 .intro > div .marquee {position: relative; font-size: 220px; font-weight: 800; letter-spacing: -0.05em; font-family: 'Poppins'; color: #000; overflow: hidden; white-space: nowrap;}
.s1 .intro > div .marquee .absol {display: flex; align-items: center;}
.s1 .intro > div .marquee .absol .mar_ch {flex-shrink: 0; display: flex; align-items: center;}
.s1 .intro > div .marquee .absol .mar_ch .wave {flex-shrink: 0;}
.s1 .intro > div .marquee .absol .mar_ch img {width: calc(149/220*1em); display: flex; align-items: center;}
.s1 .intro > div .marquee .absol .mar_ch span {margin: 0 calc(40/220*1em); position: relative;}
.s1 .intro > div.left .marquee .absol .mar_ch span::after {content: 'influencer marketing agency s u r f '; position: absolute; top: 0; left: calc(10/16*1em); font-size: calc(16/220*1em); letter-spacing: 0; font-family: 'Raleway'; font-weight: 500;}
.s1 .intro > div.right .marquee .absol .mar_ch span::after {content: '인플루언서 마케팅 에이전시'; position: absolute; bottom: 0; right: calc(70/16*1em); font-size: calc(16/220*1em); letter-spacing: 0; font-family: 'Pretendard'; font-weight: 500;}
.s1 .intro > div .marquee .absol .mar_ch small {transform-origin: left center; transform: translateY(200%) rotate(-90deg); font-size: calc(16/220*1em); letter-spacing: 0; color: #fffec1; background: #000; margin-left: calc(30/16*1em); padding: calc(12/16*1em) calc(21/16*1em);}

.s1 .visual {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0;}
.s1 .visual .swiper {pointer-events: none; filter: brightness(0.2); width: 100%; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.2311); max-width: calc(1264 / 1920 * 100vw); margin: 0 auto; overflow: visible;}
.s1 .visual .swiper small.left { position: absolute; bottom: 0; right: 0; font-size: calc(14px * 1264/292); letter-spacing: 0; font-family: 'Poppins'; font-weight: 200; transform: rotate(90deg); transform-origin: right 100%; padding-bottom: calc(40/(14 * 1264/292) * 1em);}
.s1 .visual .swiper small.right { position: absolute; top: 0; left: 0; font-size: calc(14px * 1264/292); letter-spacing: 0; font-family: 'Poppins'; font-weight: 200; transform: rotate(90deg); transform-origin: left top; padding-top: calc(40/(14 * 1264/292) * 1em);}
.s1 .visual .swiper .swiper-wrapper {transition-timing-function: linear;}
.s1 .visual .swiper .swiper-wrapper .swiper-slide {width: 100%; height: 100%; position: relative;}
.s1 .visual .swiper .swiper-wrapper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.s1 .visual .swiper .swiper-wrapper .swiper-slide:not(.swiper-slide-active) img {opacity: 0; visibility: hidden;}

.s1 .visual .swiper .moTxt {display: none; opacity: 0; font-weight: 800; letter-spacing: -0.05em; font-family: 'Poppins'; color: #000; align-items: center; position: absolute; left: 50%; font-size: clamp(80px, 80/500*100vw, 120px);}
.s1 .visual .swiper .moTxt._top {bottom: 120%; transform: translateX(-50%) translateY(-80px); }
.s1 .visual .swiper .moTxt._top:after {content: 'influencer marketing agency s u r f '; position: absolute; top: calc(-10/16*1em); left: 0; font-size: calc(16/130*1em); letter-spacing: 0; font-family: 'Raleway'; font-weight: 500;}
.s1 .visual .swiper .moTxt._bottom {top: 120%; transform: translateX(-50%) translateY(80px); }
.s1 .visual .swiper .moTxt._bottom:after {content: '인플루언서 마케팅 에이전시'; position: absolute; bottom: calc(-10/16*1em); right: calc(70/16*1em); font-size: calc(16/130*1em); letter-spacing: 0; font-family: 'Pretendard'; font-weight: 500;}
.s1 .visual .swiper .moTxt .wave {flex-shrink: 0;}
.s1 .visual .swiper .moTxt .wave img {width: calc(80/100*1em); display: flex; align-items: center;}
.s1 .visual .swiper .moTxt span {margin: 0 calc(20/100*1em); position: relative;}
.s1 .visual .swiper .moTxt .moSmall {transform-origin: left center; transform: translateY(200%) rotate(-90deg); font-size: calc(7/100*1em); letter-spacing: 0; color: #fffec1; background: #000; margin-left: calc(30/16*1em); padding: calc(12/16*1em) calc(21/16*1em); white-space: nowrap;}

.s1 .visual .swiper.introEnd .swiper-wrapper .swiper-slide:not(.swiper-slide-active) img {opacity: 1; visibility: visible; transition: opacity 1s ease-in-out, visibility 1s ease-in-out;}

.s1 .scrollGuide {opacity: 0; transition: opacity 1s ease-in-out; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 14px; letter-spacing: 0.025em; font-family: 'Ubuntu'; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: calc(10/14*1em);}
.s1 .scrollGuide .line {position: relative; width: 1px; height: calc(35/14*1em); background: #000;}
.s1 .scrollGuide .dot {width: calc(7/14*1em); height: calc(7/14*1em); background: #000; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);}

.s1 .scrollGuide.show {opacity: .4;}

@media screen and (max-width: 1440px) {
    .s1 .intro > div .marquee {font-size: clamp(180px, 180/1280*100vw, 220px);}
    .s1 .intro > div.left .marquee .absol .mar_ch span::after {font-size: clamp(16px, 16/1280*100vw, 18px);}
    .s1 .intro > div.right .marquee .absol .mar_ch span::after {font-size: clamp(16px, 16/1280*100vw, 18px);}
    .s1 .intro > div .marquee .absol .mar_ch img {width: calc(120/180*1em);}
}

@media screen and (max-width: 1280px) {
    .s1 .intro > div .marquee {font-size: clamp(160px, 160/1280*100vw, 220px);}
    .s1 .visual .swiper small {font-size: calc(12px * 1264/292) !important;}
}

@media screen and (max-width: 1024px) {
    .s1 .intro > div .marquee {font-size: clamp(140px, 140/1280*100vw, 220px);}
    .s1 .visual .swiper small {font-size: calc(10px * 1264/292) !important;}
}

@media screen and (max-width: 820px) {
    .s1 .visual .swiper {max-width: calc(1200 / 1280 * 100vw);}
    .s1 .visual .swiper small {font-size: calc(8px * 1264/292) !important;}
    .s1 .visual .swiper .moTxt {display: flex;}
    .s1 .intro > div .marquee {font-size: clamp(120px, 120/1280*100vw, 220px);}
    .s1 .intro > div {width: 100% !important;}
    .s1 .intro > div.left {transform: rotate(0deg); top: 0; left: auto; right: 0;}
    .s1 .intro > div.right {transform: rotate(0deg); top: auto; bottom: 0; right: auto; left: 0;}
    .s1 .intro > div .marquee .absol .mar_ch span {padding: 5px 0;}
    .s1 .intro > div.left .marquee .absol .mar_ch span::after {top: auto; bottom: 0;}
    .s1 .intro > div.right .marquee .absol .mar_ch span::after {bottom: auto; top: 0;}
}

@media screen and (max-width: 500px) {
    .s1 .visual .swiper small {font-size: calc(6px * 1264/292) !important;}
    .s1 .intro > div .marquee {font-size: clamp(90px, 90/1280*100vw, 120px);}
    .s1 .intro > div.left .marquee .absol .mar_ch span::after {font-size: clamp(14px, 14/360*100vw, 16px);}
    .s1 .intro > div.right .marquee .absol .mar_ch span::after {font-size: clamp(14px, 14/360*100vw, 16px);}
    .s1 .visual .swiper .moTxt {font-size: clamp(70px, 70/360*100vw, 80px);}
}

@media screen and (max-width: 360px) {
    .s1 .visual .swiper small {font-size: calc(4px * 1264/292) !important;}
    .s1 .intro > div .marquee {font-size: clamp(80px, 80/1280*100vw, 90px); padding: calc(10/80*1em);}
    .s1 .intro > div.left .marquee .absol .mar_ch span::after {font-size: clamp(12px, 14/360*100vw, 16px);}
    .s1 .intro > div.right .marquee .absol .mar_ch span::after {font-size: clamp(12px, 14/360*100vw, 16px);}
    .s1 .visual .swiper .moTxt {font-size: clamp(50px, 70/360*100vw, 70px);}
}

.s2 {width: 100%; padding: 250px 0; position: relative; overflow: hidden;}
.s2 .wrap {height: 100%;}
.s2 .inner {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.s2 .inner .txt {opacity: 0; display: inline-flex; align-items: center; font-size: 160px; font-weight: 400; letter-spacing: -0.01em; font-family: 'Poppins'; position: relative;}
.s2 .inner .txt._l {transform: translateX(-100%);}
.s2 .inner .txt._r {transform: translateX(100%);}
.s2 .inner .txt .img {filter: invert(99%) sepia(59%) saturate(659%) hue-rotate(4deg) brightness(103%) contrast(109%); width: calc(149/160*1em); display: flex; align-items: center;}
.s2 .inner .txt .bigTxt {flex-shrink: 0;}
.s2 .inner .txt b {font-weight: 700;}
.s2 .inner .txt .smallTxt {text-align: right; font-family: 'Pretendard'; font-size: calc(18/160*1em); letter-spacing: 0.025em; line-height: 1.5; color: #7c7c7c; padding-right: calc(30/18*1em);}


@media screen and (max-width: 1700px) {
    .s2 .inner .txt {font-size: clamp(120px, 120/1600*100vw, 160px);}
}

@media screen and (max-width: 1600px) {
    .s2 {padding: 200px 0;}
    .s2 .inner .txt {font-size: clamp(110px, 110/1440*100vw, 120px);}
    .s2 .inner .txt .smallTxt {font-size: clamp(16px, 16/1440*100vw, 18px);}
}

@media screen and (max-width: 1440px) {
    .s2 {padding: 150px 0;}
    .s2 .inner .txt {font-size: clamp(90px, 90/1280*100vw, 110px);}
}

@media screen and (max-width: 1280px) {
    .s2 {padding: 100px 0;}
    .s2 .inner .txt {font-size: clamp(80px, 80/1024*100vw, 90px);}
}

@media screen and (max-width: 1024px) {
    .s2 .inner .txt {font-size: clamp(50px, 50/820*100vw, 80px);}
    .s2 .inner .txt .smallTxt {font-size: clamp(14px, 14/820*100vw, 16px);}
}

@media screen and (max-width: 820px) {
    .s2 {padding: 0px 0; height: 100vh;}
    .s2 .inner .txt {font-size: clamp(50px, 50/500*100vw, 80px); opacity: 1;}
    .s2 .inner .txt .smallTxt {font-size: clamp(14px, 14/500*100vw, 20px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100vw; text-align: center; padding-right: 0; perspective: 400px;}
}

@media screen and (max-width: 500px) {
    .s2 .inner .txt {font-size: clamp(40px, 40/360*100vw, 50px);}
}

@media screen and (max-width: 360px) {
    .s2 .inner .txt {font-size: clamp(30px, 30/280*100vw, 40px);}
    .s2 .inner .txt .smallTxt {padding: 0 5px; box-sizing: border-box; word-break: keep-all;}
    .s2 .inner .txt .smallTxt br {display: none;}
}

.s3 {padding: 105px 0 420px;;}
.s3 .inner.pc {display: flex; justify-content: space-between;}
.s3 .inner .txtBox {max-width: 835px; padding-left: calc(180/1920*100vw); margin-right: 20px; box-sizing: border-box;}
.s3 .inner .txtBox .title {font-size: 110px; font-weight: 700; letter-spacing: -0.025em; font-family: 'Ubuntu'; padding-bottom: calc(70/110*1em);}
.s3 .inner .txtBox .dsc {max-width: 600px; width: 100%; word-break: keep-all; font-size: 24px; font-weight: 500; letter-spacing: 0.025em; font-family: 'Pretendard';}

.s3 .inner .txtBox .dsc .txt:not(.act) {display: none; opacity: 0; transition: opacity 1.6s; transition-delay: allow-discreate;}
.s3 .inner .txtBox .dsc .txt[act] {opacity: 1; transition: opacity 1.6s;}
@starting-style {
    .s3 .inner .txtBox .dsc .txt[act] {opacity: 0;}
}

.s3 .inner .txtBox .dsc .txt p {position: relative; padding-left: calc(14/24*1em); line-height: 1.5;}
.s3 .inner .txtBox .dsc .txt p + p {margin-top: calc(40/24*1em);}
.s3 .inner .txtBox .dsc .txt p::before {content: ''; position: absolute; top: 0; left: 0; transform: translateY(-25%); width: calc(32/24*1em); height: calc(32/24*1em); border-radius: 50%; z-index: -1; background: #fffec1;}

.s3 .inner .txtBox .viewBtn {margin-top: calc(150/24*1em);}

.s3 .inner.mo {display: none; padding: 0 20px;}
.s3 .inner.mo .txtBox {padding: 0; margin: 0;}
.s3 .inner.mo .flx {display: flex; align-items: flex-end; justify-content: space-between; font-size: 70px; padding-bottom: calc(80/70*1em);}
.s3 .inner.mo .flx .title {padding-bottom: 0; font-size: inherit; }
.s3 .inner.mo .flx .viewBtn_mo { padding: calc(10/16*1em) calc(15/16*1em); position: relative; font-size: 16px; font-weight: 400; letter-spacing: 0.025em; font-family: 'Ubuntu'; color: #000;}
.s3 .inner.mo .flx .viewBtn_mo::after {content: ''; display: block; width: 100%; height: 2px; left: 0; bottom: 0; background: #000;}

.s3 .inner.mo .tab_block {display: flex; flex-direction: column; gap: 30px; width: 100%;}
.s3 .inner.mo .tab_block dl {font-size: clamp(25px, 25/500*100vw, 30px); padding: calc(40/30*1em) calc(30/30*1em);background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.s3 .inner.mo .tab_block dl::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: #000; opacity: .6;}
.s3 .inner.mo .tab_block dl dt {position: relative; z-index: 1; font-size: inherit; font-family: 'Pretendard'; line-height: 1.4; word-break: keep-all; letter-spacing: 0.025em; color: #fff; font-weight: 500; padding-bottom: calc(80/30*1em);}
.s3 .inner.mo .tab_block dl dt b {font-weight: 700;}
.s3 .inner.mo .tab_block dl dd {position: relative; z-index: 1; font-size: 20px; line-height: 1.4; font-family: 'Pretendard'; color: #fff; font-weight: 200; word-break: keep-all;}
.s3 .inner.mo .tab_block dl dd p {position: relative;}
.s3 .inner.mo .tab_block dl dd p::before {content: '·'; display: block; color: #fffec1; position: absolute; right: 100%; top: 0; transform: translate(-100%, 0%);}
.s3 .inner.mo .tab_block dl dd p + p {margin-top: calc(15/20*1em);}


.s3 .inner .imgTab {flex-shrink: 0; width: calc(1050/1920*100vw); display: flex; align-items: flex-end; flex-direction: column; gap: 20px;}
.s3 .inner .imgTab .tab {cursor: pointer; height: 240px; box-sizing: border-box; padding: calc(40/32*1em); font-size: 32px; font-family: 'Pretendard'; letter-spacing: 0.025em; color: #fff; display: flex; align-items: flex-end; justify-content: flex-start; position: relative; transition: width .4s; overflow: hidden;}
.s3 .inner .imgTab .tab .img {filter: brightness(0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: .4s;}
.s3 .inner .imgTab .tab.act .img {filter: brightness(1)}
.s3 .inner .imgTab .tab .img img {height: 100%; object-fit: cover;}
.s3 .inner .imgTab .tab p {position: relative; z-index: 1;}
.s3 .inner .imgTab .tab p b {font-weight: 600;}
.s3 .inner .imgTab .tab._1 {width: 60%; min-width: calc(400/32*1em);}
.s3 .inner .imgTab .tab._2 {width: 60%; min-width: calc(750/32*1em);}
.s3 .inner .imgTab .tab._3 {width: 60%; min-width: calc(350/32*1em);}
.s3 .inner .imgTab .tab.act {width: 90%;}
.s3 .inner .imgTab .tab.act + .tab {width: 70%;}

@media screen and (max-width: 1700px) {
    .s3 {padding: 105px 0 300px;}
    .s3 .inner .txtBox {padding-left: calc(100/1920*100vw);}
    .s3 .inner .txtBox .title {font-size: clamp(90px, 90/1600*100vw, 110px);}
    .s3 .inner .txtBox .dsc {font-size: 20px}
    .s3 .inner .txtBox .dsc .txt p + p {margin-top: calc(15/20*1em);}
    .s3 .inner .imgTab .tab {font-size: clamp(25px, 25/1600*100vw, 32px);}
}
@media screen and (max-width: 1600px) {
    .s3 .inner .txtBox {padding-left: calc(50/1920*100vw);}
    .s3 .inner .txtBox .title {font-size: clamp(80px, 80/1440*100vw, 90px);}
    .s3 .inner .txtBox .dsc {font-size: 18px;}
    .s3 .inner .imgTab .tab {height: calc(240/32*1em);}
}
@media screen and (max-width: 1440px) {
    .s3 .inner .txtBox {padding-left: clamp(50px, 50/1920*100vw, 150px)}
    .s3 .inner .txtBox .title {font-size: clamp(70px, 70/1280*100vw, 80px);}
    .s3 .inner .imgTab .tab {font-size: clamp(20px, 20/1280*100vw, 25px);}
    
}
@media screen and (max-width: 1280px) {
    .s3 .inner .txtBox .title {font-size: clamp(55px, 55/1024*100vw, 70px);}
    .s3 .inner .txtBox .dsc {font-size: 16px;}
    .s3 .inner .imgTab {gap: 10px;}
    .s3 .inner .imgTab .tab {font-size: clamp(18px, 18/1024*100vw, 20px);}
}
@media screen and (max-width: 1024px) {
    .s3 .inner .txtBox .title {font-size: clamp(45px, 45/820*100vw, 55px);}
    .s3 .inner .txtBox .dsc {font-size: 14px;}
    .s3 .inner .imgTab .tab {font-size: clamp(16px, 16/820*100vw, 18px);}
    .s3 .inner .txtBox .viewBtn { margin-top: calc(70/14*1em);}
}
@media screen and (max-width: 820px) {
    .s3 {padding-top: 0; padding-bottom: calc(200/500*100vw);}
    .s3 .inner.pc {display: none;}
    .s3 .inner.mo {display: block;}
    .s3 .inner.mo .flx {font-size: clamp(55px, 55/500*100vw, 70px);}
    .s3 .inner.mo .flx .viewBtn_mo {font-size: clamp(14px, 14/500*100vw, 16px);}
    .s3 .inner.mo .tab_block dl {font-size: clamp(20px, 20/500*100vw, 30px);}
    .s3 .inner.mo .tab_block dl dd {font-size: clamp(14px, 20/820*100vw, 20px);}
}
@media screen and (max-width: 500px) {
    .s3 .inner.mo .flx {font-size: clamp(50px, 50/360*100vw, 60px); flex-direction: column; align-items: center;}
    .s3 .inner.mo .flx .viewBtn_mo {font-size: clamp(12px, 12/460*100vw, 14px); margin-top: 10px;}
    .s3 .inner.mo .tab_block dl {font-size: clamp(18px, 18/360*100vw, 20px);}
}
@media screen and (max-width: 360px) {
    .s3 .inner.mo .flx {font-size: clamp(30px, 50/360*100vw, 50px);}
    .s3 .inner.mo .tab_block dl dt {padding-bottom: calc(50/30*1em);}
    .s3 .inner.mo .tab_block dl dd {font-size: clamp(12px, 14/360*100vw, 14px);}
    .s3 .inner.mo .tab_block dl dd p + p {margin-top: calc(10/20*1em);}
}

.s4 {background: #000; position: relative; padding-top: 120px; padding-bottom: 135px;}
.s4 .backCircle {position: absolute; top: 0; left: 50%; transform: translate(-50%, -250px); width: 1752px; height: 1752px; border-radius: 50%; background: #000; z-index: -1;}
.s4 .inner {position: relative; z-index: 1;}
.s4 .inner ul {display: flex; justify-content: center; font-size: 50px; --gap: calc(40/50*1em);}
.s4 .inner ul li:last-child dt b img {display: none;}
.s4 .inner ul li dl {display: flex; flex-direction: column;}
.s4 .inner ul li dl dt {display: flex; flex-direction: column; align-items: flex-start; gap: calc(10/50*1em);}
.s4 .inner ul li dl dt span {font-size: 15px; font-weight: 600; letter-spacing: 0.025em; font-family: 'Pretendard'; color: #fff;}
.s4 .inner ul li dl dt b {display: flex; align-items: center; font-size: inherit; font-weight: 700; letter-spacing: 0.025em; font-family: 'Ubuntu'; color: #fff; padding-bottom: calc(40/50*1em);}
.s4 .inner ul li dl dt b img {padding: 0 var(--gap);}
.s4 .inner ul li dl dd {font-size: 20px; font-weight: 500; letter-spacing: 0.025em; font-family: 'Pretendard'; color: #fff;}
.s4 .inner ul li dl dd p {line-height: 1.4; word-break: keep-all;}
.s4 .inner ul li dl dd p + p {margin-top: calc(15/20*1em);}

@media screen and (max-width: 1700px) {
    .s4 .backCircle {width: calc(1752/1600*100vw); height: calc(1752/1600*100vw); transform: translate(-50%, -200px);}
    .s4 .inner ul {font-size: clamp(40px, 40/1600*100vw, 50px);}
}
@media screen and (max-width: 1600px) {
    .s4 .backCircle { transform: translate(-50%, -15%);}
    .s4 .inner ul {font-size: clamp(30px, 30/1440*100vw, 40px);}
    .s4 .inner ul li dl dt b img {transform: scale(0.8);}
    .s4 .inner ul li dl dd { font-size: 18px;}
}
@media screen and (max-width: 1440px) {
    .s4 .inner ul li dl dt b img {transform: scale(0.7);}
    .s4 .inner ul li dl dd { font-size: 16px;}
}
@media screen and (max-width: 1280px) {
    .s4 .inner ul {font-size: clamp(27px, 27/1024*100vw, 30px);}
    .s4 .inner ul li dl dt b img {padding: 0 calc(25/30*1em);}
    .s4 .inner ul li:last-child dt b img {display: block;}
    .s4 .inner ul li dl dd { font-size: calc(14px, 16/1280*100vw, 16px);} 
}
@media screen and (max-width: 1024px) {
    .s4 .inner ul {font-size: clamp(20px, 20/820*100vw, 27px);}
    .s4 .inner ul li dl dt b {position: relative;  padding-bottom: 0; margin-bottom: calc(40/50*1em);}
    /* .s4 .inner ul li dl dt b img {position: absolute; top: 50%; left: auto; right: 8%; transform: translateY(-50%) scale(0.7); padding: 0;} */
}
@media screen and (max-width: 820px) {
    .s4 {padding: calc(80/500*100vw) 0 0;}
    .s4 .inner ul {flex-direction: column; row-gap: 40px; padding: 0 5%; font-size: clamp(40px, 40/500*100vw, 50px);}
    .s4 .inner ul li {width: 100%; padding-bottom: 40px; border-bottom: 1px solid #7c7c7c; }
    .s4 .inner ul li dl dt {position: relative; width: 100%; flex-shrink: 0; padding-bottom: calc(20/70*1em);}
    .s4 .inner ul li dl dt span {display: block; width: 100%;}
    .s4 .inner ul li dl dt b {width: 100%; display: block; margin-bottom: 0;}
    .s4 .inner ul li dl dt b img {display: none !important;}
    .s4 .inner ul li dl dd {padding-top: 20px;}
}
@media screen and (max-width: 500px) {
    .s4 .inner ul {font-size: clamp(30px, 30/360*100vw, 40px);}
    .s4 .inner ul li dl dd {font-size: clamp(13px, 14/360*100vw, 16px);}
}



.s5 {padding: 120px 0; background: #000; position: relative;}
.s5:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #000; z-index: -1; transform: translateY(-50%);}

.s5 .inner dl {display: flex;  align-items: center; justify-content: center;}
.s5 .inner dl + dl {margin-top: 160px;}
.s5 .inner dl dt { flex-shrink: 0; font-size: 90px; font-family: 'Ubuntu'; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.s5 .inner dl dt span {display: inline-block; perspective: 400px;}
.s5 .inner dl dd {box-sizing: border-box; flex-grow: 1; min-width: 0; padding: 0 40px; margin-left: 40px; position: relative; display: flex; justify-content: center;}
.s5 .inner dl dd::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 100%; height: 0.5px; background: #fff; opacity: 0.4;}

.s5 .inner .swiper {display: inline-block; width: 100%; z-index: 1;}
.s5 .inner .swiper .swiper-wrapper {transition-timing-function: linear; align-items: center; height: 100%;}
.s5 .inner .swiper .swiper-wrapper .swiper-slide {width: 550px; height: 100% !important; position: relative; transition: .6s;}
.s5 .inner .swiper .swiper-wrapper .swiper-slide .img {cursor: pointer; display: flex; align-items: center; width: 100%;}
.s5 .inner .swiper .swiper-wrapper .swiper-slide .img iframe {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.s5 .inner dd._shortform .swiper .swiper-wrapper .swiper-slide {width: 239px;}
.s5 .inner dd._youtube .img::after {content: ''; width: 100%; display: block; padding-top: calc(354/628*100%);}
.s5 .inner dd._instagram .img::after {content: ''; width: 100%; display: block; padding-top: calc(355/543*100%);}
.s5 .inner dd._shortform .img::after {content: ''; width: 100%; display: block; padding-top: calc(546/307*100%);}
.s5 .inner .swiper .swiper-wrapper .swiper-slide img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: .6s; width: 100%; height: 100%; object-fit: cover;}
.s5 .inner .swiper .swiper-wrapper .swiper-slide:not(.swiper-slide-active) img {filter: brightness(0.4); }

@media screen and (min-width: 1921px) {
    .s5 .inner dl {padding-left: 0;}
}
@media screen and (max-width: 1600px) {
    .s5 .inner dl {padding-left: calc(100/1600*100vw);}
    .s5 .inner dl dt {font-size: clamp(80px, 80/1600*100vw, 100px);}
}
@media screen and (max-width: 1440px) {
    .s5 .inner dl {padding-left: calc(50/1440*100vw);}
    .s5 .inner dl dt {font-size: clamp(70px, 70/1440*100vw, 80px);}
}
@media screen and (max-width: 1280px) {
    .s5 {padding: calc(100/1280*100vw) 0;}
    .s5 .inner dl {padding-left: calc(25/1280*100vw);}
    .s5 .inner dl + dl {margin-top: calc(80/1280*100vw);}
    .s5 .inner dl dt {font-size: clamp(60px, 60/1280*100vw, 70px);}
}
@media screen and (max-width: 1024px) {
    .s5 .inner dl dt {font-size: clamp(50px, 50/1024*100vw, 60px);}
}
@media screen and (max-width: 820px) {
    .s5 {padding: 100px 0;}
    .s5 .inner dl {padding-left: 0; flex-direction: column;}
    .s5 .inner dl + dl {margin-top: 100px;}
    .s5 .inner dl dt {font-size: clamp(27px, 27/500*100vw, 30px); padding-bottom: calc(20/30*1em);}
    .s5 .inner dl dd {padding: 0; margin-left: 0; max-width: 600px; width: 95%;}
    .s5 .inner .swiper .swiper-wrapper .swiper-slide {width: 70%;}
    /* .s5 .inner dd._shortform .swiper .swiper-wrapper .swiper-slide {width: 50%;} */
}
@media screen and (max-width: 500px) {
    .s5 .inner dl + dl {margin-top: 80px;}
    .s5 .inner dd._shortform .swiper .swiper-wrapper .swiper-slide {width: 40%;}
}


.s6 {background: #fff; padding: 255px 0;}
.s6 .titleBox {color: #000;}
.s6 .marquee {width: 100%; position: relative; overflow: hidden;}
.s6 .marquee + .marquee {margin-top: 40px;}
.s6 .marquee .absol { width: 100%; display: flex; align-items: center;}
.s6 .marquee .absol .mar_ch {display: flex; align-items: center;}
.s6 .marquee .absol .mar_ch img {height: 65px; flex-shrink: 0; padding-right: 60px; max-width: none;}

@media screen and (max-width: 1600px) {
    .s6 {padding: 200px 0;}
}
@media screen and (max-width: 1280px) {
    .s6 {padding: 150px 0;}
}
@media screen and (max-width: 1024px) {
    .s6 {padding: 100px 0;}
    .s6 .marquee + .marquee {margin-top: 20px;}
}
@media screen and (max-width: 820px) {
    .s6 {padding: 80px 0;}
}
@media screen and (max-width: 500px) {
    .s6 .marquee + .marquee {margin-top: 10px;}
    .s6 .marquee .absol .mar_ch img {height: clamp(40px, 40/360*100vw, 65px); padding-right: 30px;}
}




.s7 {padding: 0 0 260px;}
.s7 h2 {perspective: 400px; font-size: 80px; font-weight: 700; letter-spacing: -0.02em; font-family: 'Ubuntu'; color: #000; padding-bottom: calc(30/80*1em);}
.s7 ul {display: flex; flex-direction: column;}
.s7 ul li {border-top: 2px solid #000; background: #fff; transition: background .4s;}
@media screen and (min-width: 821px) {
    .s7 ul li.act {background: #fffec1;}
}
.s7 ul li a {display: block; font-size: 32px; padding: calc(30/32*1em) calc(20/32*1em); box-sizing: border-box; }
.s7 ul li a .titWrap {display: flex; align-items: center; justify-content: space-between;}
.s7 ul li a .titWrap .title {font-size: inherit; font-weight: 700; letter-spacing: 0.025em; font-family: 'Pretendard'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: calc(20/32*1em);}
.s7 ul li a .titWrap .date {font-size: 12px; font-weight: 500; letter-spacing: 0; font-family: 'Poppins'; color: #fff; background: #000; padding: calc(10/12*1em) calc(20/12*1em); border-radius: calc(16/12*1em); transition: opacity .4s;}
.s7 ul li.act a .titWrap .date {opacity: 0;}

.s7 ul li a .subTxt {display: none; font-size: 20px; font-weight: 500; letter-spacing: 0.02em; font-family: 'Pretendard'; color: #555; padding-top: calc(40/20*1em);line-height: 1.4em;}
.s7 ul li a .subTxt p { margin-bottom: calc(40/20*1em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.s7 ul li a .subTxt span {font-size: 18px; font-weight: 500; letter-spacing: 0; font-family: 'Pretendard'; color: #acacac;}

@media screen and (max-width: 1600px) {
    .s7 h2 {font-size: clamp(60px, 60/1600*100vw, 80px);}
    .s7 ul li a {font-size: clamp(25px, 25/1600*100vw, 32px);}
}
@media screen and (max-width: 1440px) {
    .s7 {padding-bottom: 150px;}
}
@media screen and (max-width: 1280px) {
    .s7 h2 {font-size: clamp(50px, 50/1024*100vw, 60px);}
    .s7 ul li a {font-size: clamp(20px, 20/1024*100vw, 25px);}
    .s7 ul li a .subTxt {font-size: clamp(16px, 16/1024*100vw, 18px);}
    .s7 ul li a .subTxt span {font-size: clamp(14px, 14/1024*100vw, 16px);}
}
@media screen and (max-width: 1024px) {
    .s7 h2 {font-size: clamp(45px, 45/820*100vw, 50px);}
    .s7 ul li a {font-size: clamp(18px, 18/820*100vw, 20px);}
    .s7 ul li a .subTxt {font-size: clamp(14px, 14/820*100vw, 16px);}
}
@media screen and (max-width: 820px) {
    .s7 {padding-top: 60px; padding-bottom: 100px;}
    .s7 ul li:nth-child(odd) {background: #fffec1;}
    .s7 ul li a .subTxt {display: block;}
    .s7 h2 {font-size: clamp(50px, 50/500*100vw, 55px);}
    .s7 ul li a {font-size: clamp(20px, 20/500*100vw, 22px);}
    .s7 ul li a .subTxt {font-size: clamp(16px, 16/500*100vw, 18px);}
    .s7 ul li a .subTxt p {-webkit-line-clamp: 2;}
    .s7 ul li a .titWrap .date {display: none;}
}
@media screen and (max-width: 500px) {
    .s7 {padding-top: 30px;}
    .s7 h2 {font-size: clamp(45px, 45/360*100vw, 50px);}
    .s7 ul li a {font-size: clamp(18px, 18/360*100vw, 20px);}
    .s7 ul li a .subTxt {font-size: clamp(14px, 14/360*100vw, 16px);}
}
@media screen and (max-width: 360px) {
    .s7 {padding-bottom: 80px;}
    .s7 h2 {font-size: clamp(40px, 40/280*100vw, 45px);}
    .s7 ul li a {font-size: clamp(16px, 16/280*100vw, 18px);}
    .s7 ul li a .subTxt {font-size: clamp(12px, 12/280*100vw, 14px);}
}


.s8 {background: #000; padding: 120px 0;}
.s8 .inner {padding-right: calc(160/150*1em); font-size: 150px;}
.s8 .inner .flx {display: flex; align-items: center; justify-content: space-between;}
.s8 .inner .txt {perspective: 400px; font-size: inherit; font-weight: 500; letter-spacing: -0.02em; line-height: calc(170/150*1em); font-family: 'Ubuntu'; color: #fff;}
.s8 .inner .txt .align_l {display: flex; align-items: center;}
.s8 .inner .txt .align_l span {font-size: inherit; padding-right: calc(65/150*1em);}
.s8 .inner .txt .align_l .cat {position: relative; display: flex; align-items: center;}
.s8 .inner .txt .align_l .cat img:not(:first-child) {position: absolute; top: 0; left: 0; width: 100%;}
.s8 .inner .txt .align_l .cat .cat_2 {animation: cat_2 5s ease-in-out infinite;}
.s8 .inner .txt .align_r .arrWrap {overflow: hidden;}
.s8 .inner .txt .align_r .arr {position: relative; color: #fffec1; animation: arr_2 1.5s linear infinite;}
.s8 .inner .txt .align_r .arr span {display: block;}
.s8 .inner .txt .align_r .arr span:last-child {position: absolute; right: 100%; top: 50%; transform: translateY(-50%);}

@keyframes cat_2 {
    0% {transform: translateX(0);}
    2% {transform: translateX(0);}
    24% {transform: translateX(-5%) translateY(-1%);}
    30% {transform: translateX(-5%) translateY(-1%);}
    47% {transform: translateX(0);}
    52% {transform: translateX(0);}
    74% {transform: translateX(5%) translateY(-1%);}
    80% {transform: translateX(5%) translateY(-1%);}
    100% {transform: translateX(0);}
}
@keyframes arr_2 {
    0% {transform: translateX(0);}
    100% {transform: translateX(100%);}
}

@media screen and (max-width: 1700px) {
    .s8 .inner {font-size: clamp(130px, 130/1700*100vw, 150px);}
}
@media screen and (max-width: 1440px) {
    .s8 .inner {font-size: clamp(100px, 100/1440*100vw, 130px);}
    .s8 .inner .txt .align_l .cat {width: clamp(195px, 220/1280*100vw, 220px);}
}
@media screen and (max-width: 1280px) {
    .s8 .inner {font-size: clamp(80px, 80/1280*100vw, 100px);}
    .s8 .inner .txt .align_l .cat {width: clamp(160px, 160/1280*100vw, 195px);}
}

@media screen and (max-width: 1024px) {
    .s8 .inner {font-size: clamp(70px, 70/1024*100vw, 80px);}
}
@media screen and (max-width: 820px) {
    .s8 {padding: 80px 0;}
    .s8 .inner {font-size: clamp(45px, 45/500*100vw, 80px);}
    .s8 .inner .txt .align_l .cat {width: clamp(110px, 110/500*100vw, 160px);}
}
@media screen and (max-width: 500px) {
    .s8 .inner {font-size: clamp(40px, 40/360*100vw, 45px);}
    .s8 .inner .txt .align_l .cat {width: clamp(80px, 80/360*100vw, 110px);}
}
@media screen and (max-width: 360px) {
    .s8 .inner {font-size: clamp(33px, 33/280*100vw, 40px);}
    .s8 {padding: 60px 0;}
}



.viewPopup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: none;}

.viewPopup._youtube .viewPopup_container {width: 90%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.viewPopup._youtube .viewPopup_container::after {content: ''; display: block; padding-top: calc(319/583*100%);}
.viewPopup._youtube .viewPopup_content {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.viewPopup._youtube .viewPopup_content iframe {width: 100%; height: 100%;}

.viewPopup._instagram .viewPopup_container {width: 90%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.viewPopup._instagram .viewPopup_container::after {content: ''; display: block; padding-top: calc(333/510*100%);}
.viewPopup._instagram .viewPopup_content {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.viewPopup._instagram .viewPopup_content img {width: 100%; height: 100%; object-fit: cover;}

.viewPopup._shortform .viewPopup_container {width: 90%; max-width: 1200px; max-height: 70vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.viewPopup._shortform .viewPopup_container::after {content: ''; display: block; padding-top: calc(546/307*100%);}
.viewPopup._shortform .viewPopup_content {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.viewPopup._shortform .viewPopup_content iframe {width: 100%; height: 100%;}

.viewPopup_close {margin: 0; position: absolute; bottom: 100%; right: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; padding: calc(5/40*1em); color: #fffec1; cursor: pointer;}

@media screen and (max-width: 1280px) {
    .viewPopup._youtube .viewPopup_container {width: 75%; max-width: 1000px;}
    .viewPopup._youtube .viewPopup_container::after {padding-top: calc(319/583*100%);}

    .viewPopup._instagram .viewPopup_container {width: 75%; max-width: 800px;}
    .viewPopup._instagram .viewPopup_container::after {padding-top: calc(333/510*100%);}

    .viewPopup._shortform .viewPopup_container {width: 75%; max-width: 900px;}
    .viewPopup._shortform .viewPopup_container::after {padding-top: calc(546/307*100%);}
}
@media screen and (max-width: 1024px) {
    .viewPopup._youtube .viewPopup_container {width: 75%; max-width: 800px;}

    .viewPopup._instagram .viewPopup_container {width: 75%; max-width: 700px;}

    .viewPopup._shortform .viewPopup_container {width: 75%; max-width: 800px; max-height: 80vh;}

    .viewPopup_close {font-size: 30px;}
}
@media screen and (max-width: 820px) {
    .viewPopup._youtube .viewPopup_container {width: 90%; max-width: 700px;}

    .viewPopup._instagram .viewPopup_container {width: 90%; max-width: 700px;}

    .viewPopup._shortform .viewPopup_container {width: 80%; max-width: 450px; max-height: 90vh;}
}
@media screen and (max-width: 500px) {
    .viewPopup._youtube .viewPopup_container {width: 95%; max-width: 500px;}

    .viewPopup._instagram .viewPopup_container {width: 95%; max-width: 500px;}

    .viewPopup._shortform .viewPopup_container {width: 80%; max-width: 450px; max-height: 90vh;}
}
@media screen and (max-width: 360px) {
    .viewPopup._shortform .viewPopup_container {width: 95%; max-height: 85vh;}
}