/* about */
.about-intro { padding-top: 344px; background: var(--bg); color: #fff;}
.about-intro .content-top { margin-bottom: 100px;}
.about-intro .content-body { width: 100%; height: 100vh; position: relative;}
.about-intro .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 27.3%; height: 76.4%; background: url(/images/sub/about/about-intro-bg.png) no-repeat center/cover;}
.about-intro .content-area.area1 .inner { padding-top: 12%; display: flex; justify-content: flex-end;}
.about-intro .content-area.area1 .text { font-size: 40px; font-weight: 600; text-align: right;}
.about-intro .content-area.area1 .img-box { position: absolute; top: -5%; left: 24%; animation: rotate 20s linear infinite;}
.about-intro .content-area.area2 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 140px 0;}
.about-intro .content-area.area2 .inner { height: 100%; display: flex; align-items: flex-end; justify-content: flex-end;}

.about-philosophy { background: var(--accent-color);}
.about-philosophy .inner { padding: 40px 0; position: relative; height: 100vh; display: flex; align-items: center;}
.about-philosophy .area1 { display: flex; justify-content: space-between; width: 100%; text-align: right; filter: invert(1);}
.about-philosophy .area1 .text { font-size: 60px; font-weight: 600; margin-top: 50px; color: #fff;}
.about-philosophy .area2 { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; color: #fff;}
.about-philosophy .area2 .flex-box { gap: 20px;}
.about-philosophy .area2 .flex-box article { flex: 1 1; padding: 30px 30px 40px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); background: rgb(23, 23, 23, .5);}
.about-philosophy .area2 .title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;}
.about-philosophy .area2 .heading { padding: 60px 0; border-block: 1px solid rgba(255,255,255,.1); text-align: center; color: var(--accent-color); margin-bottom: 40px;}
.about-philosophy .area2 strong { font-weight: 600; margin-bottom: 8px;}
.about-philosophy .area2 .desc { opacity: .8; font-size: 16px; font-weight: 300;}

.about-it { background: var(--bg); color: #fff; overflow: hidden; position: relative; padding-top: 200px; padding-bottom: 240px;}
.about-it .inner { position: relative; top: 60px;}
.about-it .container { position: relative; height: 100vh; margin-top: 100px;}
.about-it .guide-circle { top: 50%;}

.about-foot .content-foot { margin-top: auto; background: var(--bg); padding: 0 3.2%;}
.about-foot .content-foot ul { display: flex; justify-content: space-between; align-items: center;}
.about-foot .content-foot ul li img { display: block;}

/* service */
.service { background: #000; color: #fff;}
.service h2.heading { font-size: 60px; font-weight: 700; line-height: 1.4;}
.service-visual { width: 100%; height: 400vh;}
.service-visual .visual-wrap { width: 100%; height: 100vh; position: sticky; top: 0; overflow: hidden;}
.service-visual .visual-area { width: 100%; height: 100%; position: absolute; top: 0; left: 0; scale: 1.1;}
.service-visual .visual-area .visual-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/lisk-bg.png) no-repeat center/cover;}
.service-visual .visual-area .visual-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: difference; display: flex; align-items: center; justify-content: center; padding: 0 60px;}
.service-visual .visual-area .visual-blur { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,.6); backdrop-filter: blur(24px);}
.service-visual .visual-area:nth-child(2) { display: flex; align-items: center; justify-content: center; z-index: 2;}
.service-visual .visual-area:nth-child(2) .bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(136, 22, 18, 0) 44.89%, rgba(136, 22, 18, 0.9) 114.52%), linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));}
.service-visual .visual-area:nth-child(3) { display: flex; align-items: center; justify-content: center; z-index: 3; background: url(/images/main/lisk-bg.png) no-repeat center / cover;}
.service-visual .visual-area:nth-child(2) .visual-card { background: url(/images/main/lisk-bg.png) no-repeat center/cover; height: auto; aspect-ratio: 1.78; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 200px;}
.service-visual .visual-area:nth-child(2) .heading { font-size: 24px; font-weight: bold; color: #fff; text-align: center; line-height: 1.6; margin-top: 17%;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .service-visual .visual-area:nth-child(2) .visual-card { padding: 0 80px;}
}

@media screen and (max-width: 767px) {
  .service-visual { height: 200vh;}
  .service-visual .visual-area:nth-child(2) .heading { font-size: 18px;}
  .service-visual .visual-area:nth-child(2) .visual-card { padding: 0 50px;}
}

.service-philosophy { background: var(--accent-color); height: 300vh;}
.service-philosophy .inner { padding: 40px 0; position: relative; height: 100vh; display: flex; align-items: center;}
.service-philosophy .area1 { display: flex; justify-content: space-between; width: 100%; text-align: right; }
.service-philosophy .area1 .text { font-size: 60px; font-weight: 600; margin-top: 50px; color: #fff;}
.service-philosophy .area2 { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; color: #fff;}
.service-philosophy .area2 .flex-box { gap: 20px; width: 100%;}
.service-philosophy .area2 .flex-box article { flex: 1 1; padding: 30px 30px 40px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); background: rgb(23, 23, 23, .5); display: flex; flex-direction: column; min-height: 460px;}
.service-philosophy .area2 .title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1);}
.service-philosophy .area2 .text-boxs { position: relative; display: flex; align-items: center; justify-content: center; flex: 1;}
.service-philosophy .area2 .heading { text-align: center; color: #fff; font-size: 32px; font-weight: 700; line-height: 1.5;}
.service-philosophy .area2 .text-boxs .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 32px; opacity: 0; visibility: hidden;}
.service-philosophy .area2 .text-boxs .overlay p { font-size: 20px; text-align: center;}
.service-philosophy .area2 .text-boxs .overlay p:last-child { font-size: 18px; color: rgba(255,255,255,.8); font-weight: 500;}
.service-philosophy .area2 .text-boxs .overlay p span { position: relative; padding-left: 10px; display: block; text-align: left; font-weight: 500;}
.service-philosophy .area2 .text-boxs .overlay p span::before { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.8);}
.service-philosophy .area2 strong { font-weight: 600; margin-bottom: 8px;}
.service-philosophy .area2 .desc { opacity: .8; font-size: 16px; font-weight: 300;}
@media (hover:hover) and (pointer: fine) {
  .service-philosophy .area2 .flex-box article:hover { background: #881612;}
  .service-philosophy .area2 .flex-box article:hover .heading { opacity: 0; visibility: hidden; transition: opacity 0.3s; }
  .service-philosophy .area2 .flex-box article:hover .overlay { opacity: 1; visibility: visible; transition: opacity 0.3s;}
}
@media screen and (max-width: 1280px) {
  .service-philosophy .area2 .flex-box { flex-wrap: wrap; align-items: center; }
  .service-philosophy .area2 .flex-box article { flex: auto; width: calc(50% - 10px); height: 40vh; min-height: auto;}
}

@media screen and (max-width: 1024px) {
  .service-philosophy .area2 .heading { font-size: 22px;}
  .service-philosophy .sticky { place-content: center;}
  .service-philosophy .inner { height: auto; padding: 100px 0;}
  .service-philosophy .area1 { position: absolute; top: 50%; transform: translateY(-50%); left: 0; padding: 0px 0 0;}
  .service-philosophy .area2 { position: relative;}
  .service-philosophy .area2 .text-boxs { flex-wrap: wrap;}
  .service-philosophy .area2 .flex-box { justify-content: center;}
  .service-philosophy .area2 .flex-box article { width: 80%; flex:none; height: 420px;}
  .service-philosophy .area2 .flex-box article:not(:first-child) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%;}
  .service-philosophy .area2 .flex-box article { height: 50vh;}
  .service-philosophy .area2 .text-boxs .overlay { position: relative; opacity: 1; visibility: visible; height: auto;}
  .service-philosophy .area2 .heading { margin: 30px 0;}
}

@media screen and (max-width: 767px) {
  .service-philosophy .area2 .heading { font-size: 18px;}
  .service-philosophy .area2 .flex-box article { width: 90%; height: 60vh;}
  .service-philosophy .area2 .text-boxs .overlay { gap: 15px;}
  .service-philosophy .area2 .text-boxs .overlay p { font-size: 16px;}
  .service-philosophy .area2 .text-boxs .overlay p:last-child { font-size: 16px;}
}

.service-map { background: #000; color: #fff; padding-top: 220px;}
.service-map .slide-btns { display: none;}
.service-map .map-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 100px;}
.service-map .map-header .desc { padding-bottom: 10px; font-size: 22px; font-weight: 700;}
.service-map .map-header .word { opacity: .6;}
.service-map .map-list { display: flex; gap: 16px;}
.service-map .map-list .swiper-wrapper { gap: 16px;}
.service-map .map-list .swiper-slide { position: relative; flex: 1; height: 544px; transition: flex 0.5s ease-in-out; cursor: pointer; overflow: hidden; border-radius: 12px;}
.service-map .map-list .swiper-slide .list-content { padding: 60px; position: relative; width: 100%; height: 100%; z-index: 1; display: flex; flex-direction: column;}
.service-map .map-list .swiper-slide .list-content .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(/images/sub/service/map-img1.png);}
.service-map .map-list .swiper-slide .list-content .num { font-size: 40px; font-weight: 700;}
.service-map .map-list .swiper-slide .list-content .title { font-size: 40px; font-weight: 700; margin-bottom: 16px; margin-top: auto; opacity: 0; transition: all .5s; transition-delay: .2s;}
.service-map .map-list .swiper-slide .list-content .desc {font-size: 20px; font-weight: 500; opacity: 0; transition: all .5s; transition-delay: .2s;}
.service-map .map-list .swiper-slide .list-thumb { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: #101010; box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 12px; transition: all .3s ease-in-out; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 60px 0; align-items: center;}
.service-map .map-list .swiper-slide .list-thumb .num,
.service-map .map-list .swiper-slide .list-thumb .text { writing-mode: vertical-rl; text-orientation: sideways;}
.service-map .map-list .swiper-slide .list-thumb .num { opacity: .3;}
.service-map .map-list .swiper-slide .list-thumb .text { font-weight: 700;}
.service-map .map-list .swiper-slide:nth-child(2) .list-content .bg { background-image: url(/images/sub/service/map-img2.png);}
.service-map .map-list .swiper-slide:nth-child(3) .list-content .bg { background-image: url(/images/sub/service/map-img3.png);}
.service-map .map-list .swiper-slide:nth-child(4) .list-content .bg { background-image: url(/images/sub/service/map-img4.png);}
.service-map .map-list .swiper-slide:nth-child(5) .list-content .bg { background-image: url(/images/sub/service/map-img5.png);}
.service-map .map-list .swiper-slide:nth-child(6) .list-content .bg { background-image: url(/images/sub/service/map-img6.png);}
.service-map .map-list .swiper-slide[selected] { flex: 7.9;}
.service-map .map-list .swiper-slide[selected] .list-thumb { transform: translateX(100%);}
.service-map .map-list .swiper-slide[selected] .list-content .title,
.service-map .map-list .swiper-slide[selected] .list-content .desc { opacity: 1;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .service-map { overflow: hidden;}
  .service h2.heading { font-size: 48px;}
  .service-map .map-header { flex-wrap: wrap; gap: 20px;}
  .service-map .map-list { overflow: visible;}
  .service-map .map-list .swiper-wrapper { gap: 0;}
  .service-map .map-list .swiper-slide { flex: none;}
  .service-map .map-list .swiper-slide[selected] { flex: none;}
  .service-map .map-list .swiper-slide .list-content { padding: 30px;}
  .service-map .map-list .swiper-slide .list-thumb { display: none;}
  .service-map .map-list .swiper-slide .list-content .title { opacity: 1; font-size: 30px;}
  .service-map .map-list .swiper-slide .list-content .desc { opacity: 1;}
}

@media screen and (max-width: 767px) {
  .service-map { padding-top: 60px;}
  .service-map .slide-btns { display: flex; margin-bottom: 30px; justify-content: flex-end;}
  .service h2.heading { font-size: 24px;}
  .service-map .map-header { margin-bottom: 50px;}
  .service-map .map-header .desc { font-size: 16px;}
  .service-map .map-list .swiper-slide { height: 400px;}
  .service-map .map-list .swiper-slide .list-content .num { font-size: 24px;}
  .service-map .map-list .swiper-slide .list-content .title { font-size: 24px;}
  .service-map .map-list .swiper-slide .list-content .desc { font-size: 16px;}
}

.service-consulting { padding: 240px 0 200px; border-bottom: 1px solid rgba(255,255,255,.2); color: #fff; background: url(/images/sub/service/rolling-bg.png) no-repeat center/auto 100%; overflow: hidden;}
.service-consulting .heading { font-size: 60px; font-weight: 700; margin-bottom: 120px; text-align: center; line-height: 1.4;}
.service-consulting .rolling-container { width: 100%; }
.service-consulting .rolling-container + .rolling-container { margin-top: 16px;}
.service-consulting .rolling-wrap { display: flex; width: max-content; gap: 16px;}
.service-consulting .rolling-card { padding: 30px 40px; width: 388px; background: rgba(16, 16, 16, 0.5); backdrop-filter: blur(30px); box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 16px;}
.service-consulting .card-sbj { font-size: 28px; font-weight: 700; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.2); text-align: center; width: 100%; margin-bottom: 30px;}
.service-consulting .card-desc span { font-size: 20px; font-weight: 500; display: block; text-align: center; line-height: 1.65;}
.service-consulting .card-desc span + span { margin-top: 4px;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  .service-consulting { padding: 60px 0;}
  .service-consulting .heading { margin-bottom: 50px;}
  .service-consulting .rolling-card { width: 260px; padding: 30px;}
  .service-consulting .card-sbj { font-size: 20px; margin-bottom: 20px; padding-bottom: 20px;}
  .service-consulting .card-desc span { font-size: 16px;}
}

.service-rd { padding: 200px 0 240px;}
.service-rd h2.heading { text-align: center; margin-bottom: 80px;}
.service-rd .graph-labels { display: flex; justify-content: flex-end; gap: 30px; margin-bottom: 40px;}
.service-rd .graph-labels span { padding-left: 16px; position: relative; font-weight: 500;}
.service-rd .graph-labels span::before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%);}
.service-rd .graph-labels span.black::before { background: #404040;}
.service-rd .graph-labels span.red::before { background: #AF3024;}
.service-rd .graph-content { background: rgba(16, 16, 16, 1); padding: 60px 120px; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 24px;}
.service-rd .graph-wrap { background: url(/images/sub/service/graph-line.png) no-repeat left 170px center/auto 100%;}
.service-rd .graph-area { display: flex;}
.service-rd .graph-area + .graph-area { margin-top: 40px;}
.service-rd .graph-area .graph-title { flex: 0 0 170px; font-weight: 700;}
.service-rd .graph-area .graph-title .label { padding: 8px; border-radius: 4px; background: rgba(255, 91, 91, 0.12); color: #FF5252;}
.service-rd .graph-area .graph-line { flex: 1;}
.service-rd .graph-area .graph-line .desc { font-size: 16px; opacity: .6; margin-top: 8px;}
.service-rd .graph-area .graph-line .line { position: relative; height: 14px; transform-origin: left; border-radius: 0 100px 100px 0; opacity: 0;}
.service-rd .graph-area .graph-line .line + .line { margin-top: 8px;}
.service-rd .graph-area .graph-line .line-black { background: #404040;}
.service-rd .graph-area .graph-line .line-red { background: #E3322C;}
.service-rd .graph-area .graph-line .line .bubble { position: absolute; top: 50%; right: -34px; transform: translate( 100%, -50%); padding: 22px 20px; width: 216px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(30px); border-radius: 6px; opacity: 0;}
.service-rd .graph-area .graph-line .line .bubble li { position: relative; padding-left: 16px; font-size: 16px; font-weight: 500; font-family: "SF Pro Display"; line-height: 1.4;}
.service-rd .graph-area .graph-line .line .bubble li + li { margin-top: 4px;}
.service-rd .graph-area .graph-line .line .bubble li::before { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%;}
.service-rd .graph-area .graph-line .line .bubble li.black::before { background: #404040; }
.service-rd .graph-area .graph-line .line .bubble li.red::before { background: #AF3024; }
.service-rd .graph-area .graph-line .line .bubble::after { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-right: 10px solid rgba(255, 255, 255, 0.12); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.service-rd .graph-area:nth-child(1) .line-black { transform: scaleX(0.46);}
.service-rd .graph-area:nth-child(1) .line-red { transform: scaleX(0.81);}
.service-rd .graph-area:nth-child(2) .line-black { transform: scaleX(0.19);}
.service-rd .graph-area:nth-child(2) .line-red { transform: scaleX(0.23);}
.service-rd .graph-area:nth-child(3) .line-black { transform: scaleX(0.36);}
.service-rd .graph-area:nth-child(3) .line-red { transform: scaleX(0.53);}
.service-rd .graph-area:nth-child(4) .line-black { transform: scaleX(0.55);}
.service-rd .graph-area:nth-child(4) .line-red { transform: scaleX(0.93);}
.service-rd .graph-area:nth-child(5) .line-black { transform: scaleX(0.72);}
.service-rd .graph-area:nth-child(5) .line-red { transform: scaleX(0.52);}
.service-rd .graph-area:nth-child(6) .line-black { transform: scaleX(0.64);}
.service-rd .graph-area:nth-child(6) .line-red { transform: scaleX(0.47);}
.service-rd .graph-area:nth-child(7) .line-black { transform: scaleX(0.54);}
.service-rd .graph-area:nth-child(7) .line-red { transform: scaleX(0.335);}
.service-rd .graph-area:nth-child(8) .line-black { transform: scaleX(0.57);}
.service-rd .graph-area:nth-child(8) .line-red { transform: scaleX(0.36);}
.service-rd .graph-area:nth-child(9) .line-black { transform: scaleX(0.54);}
.service-rd .graph-area:nth-child(9) .line-red { transform: scaleX(0.86); background: #306BAE;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .service-rd { padding: 100px 0;}
  .service-rd .graph-area .graph-title { flex: 0 0 110px;}
  .service-rd .graph-wrap { background: url(/images/sub/service/graph-line.png) no-repeat left 110px center/auto 100%;}
  .service-rd .graph-content { padding: 60px 30px;}
}

@media screen and (max-width: 767px) {
  .service-rd { overflow: hidden; padding: 60px 0;}
  .service-rd h2.heading { margin-bottom: 50px;}
  .service-rd .graph-container { width: 100%; overflow-x: auto;}
  /* .service-rd .graph-content { min-width: 700px;} */
  .service-rd .graph-area + .graph-area { margin-top: 20px;}
  .service-rd .graph-area .graph-line .desc { font-size: 12px;}

  .service-rd .graph-area { flex-direction: column; gap: 10px;}
  .service-rd .graph-area .graph-title { flex: 1;}
  .service-rd .graph-wrap { background: url(/images/sub/service/graph-line.png) no-repeat left 0px center/auto 100%;}

  /* .service-rd .graph-content.mo { margin-top: 30px;}
  .service-rd .graph-wrap { display: flex;}
  .service-rd .graph-area { flex-direction: column; flex: 1; gap: 5px;}
  .service-rd .graph-area .graph-title { flex: 1; order: 2; text-align: center;}
  .service-rd .graph-area .graph-line { display: flex; justify-content: center; gap: 5px;}
  .service-rd .graph-area .graph-line .line { opacity: 1; width: 14px; border-radius: 100px 100px 0 0; height: 250px;}
  .service-rd .graph-area .graph-line .line + .line { margin: 0px;}
  .service-rd .graph-area + .graph-area { margin: 0;}
  .service-rd .graph-area:nth-child(1) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(1) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(2) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(2) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(3) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(3) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(4) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(4) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(5) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(5) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(6) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(6) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(7) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(7) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(8) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(8) .line-red { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(9) .line-black { transform: scaleX(1);}
  .service-rd .graph-area:nth-child(9) .line-red { transform: scaleX(1); background: #306BAE;} */
}

/* .service-process { padding-bottom: 240px;} */
.service-process .heading { text-align: center; margin-bottom: 80px;}
.service-process .process-step { display: grid; grid-template-columns: 1fr 1fr 1fr 23.1%; gap: 100px;}
.service-process .process-card { padding: 40px; background: #101010; border-radius: 20px; display: flex; flex-direction: column; min-height: 260px; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; position: relative;}
.service-process .process-card:after { content: ''; display: block; position: absolute; top: 50%; right: -16px; transform: translate(100%, -50%); width: 68px; height: 58px; background: url(/images/sub/service/process-arrow.svg) no-repeat center/auto 100%;}
.service-process .process-card .label { padding: 4px 12px; font-weight: 700; line-height: 1.4; font-family: "SF Pro Display"; background: rgba(255, 91, 91, 0.12); color: #FF5252; width: fit-content; border-radius: 4px;}
.service-process .process-card .sbj { font-size: 24px; font-weight: 700; line-height: 1.4; margin-top: auto;}
.service-process .process-list li { padding: 24px 10px; background: rgba(16, 16, 16, 1); border-radius: 35px; font-size: 20px; font-weight: 700; line-height: 1.4; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; text-align: center;}
.service-process .process-list li + li { margin-top: 16px;}
.service-process .process-area:nth-child(3) .process-card:after { background: url(/images/sub/service/process-arrow-active.svg) no-repeat center/auto 100%;}
@media screen and (max-width: 1280px) {
  .service-process .process-step { grid-template-columns: auto;}
  .service-process .process-card:after { right: 50%; top: calc(100% + 16px); transform: translate(50%, 0%) rotate(90deg);}
}

@media screen and (max-width: 1024px) {
  /* .service-process { padding-bottom: 100px;} */
}

@media screen and (max-width: 767px) {
  .service-process .heading { margin-bottom: 50px;}
  .service-process .process-card { padding: 30px; min-height: 170px;}
  .service-process .process-card .sbj { font-size: 18px;}
  .service-process .process-card:after { display: none;}
  .service-process .process-step { gap: 20px;}
  .service-process .process-list li { font-size: 16px; padding: 14px 10px;}
}

.service-system { width: 100%; background: url(/images/sub/service/system-bg.jpg) no-repeat center/cover; text-align: center;}
.service-system .inner { height: 100vh; place-content: center;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  .service-system .inner { height: 70vh;}
}

/* consulting */
.consulting { background: #000; color: #fff;}
.consulting-intro { padding-top: 344px; background: var(--bg); color: #fff; height: 300vh;}
.consulting-intro h1.heading { font-size: 60px;}
.consulting-intro .content-top { margin-bottom: 100px;}
.consulting-intro .content-body { width: 100%; height: 100vh; position: sticky; top: 0; }
.consulting-intro .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 27.3%; height: 76.4%; background: url(/images/sub/consulting/consulting-intro-bg.jpg) no-repeat center/cover;}
.consulting-intro .content-area.area1 .inner { padding-top: 8%; display: flex; justify-content: flex-end;}
.consulting-intro .content-area.area1 .text { font-size: 40px; font-weight: 600; text-align: right;}
.consulting-intro .content-area.area1 .img-box { position: absolute; top: -5%; left: 24%; animation: rotate 20s linear infinite;}
.consulting-intro .content-area.area2 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 140px 0;}
.consulting-intro .content-area.area2 .heading { font-size: 40px;}
.consulting-intro .content-area.area2 .inner { height: 100%; display: flex; align-items: flex-end; justify-content: flex-end;}
@media screen and (max-width: 1024px) {
  .consulting-intro h1.heading { font-size: 40px;}
  .consulting-intro .content-area.area1 .text { font-size: 30px;}
  .consulting-intro .content-area.area2 .heading { font-size: 30px;}
}
@media screen and (max-width: 767px) {
  .consulting-intro .content-body { height: 70vh;}
  .consulting-intro .bg { background: url(/images/sub/consulting/consulting-intro-bg2.jpg) no-repeat right center/cover;}
  .consulting-intro .bg::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
  .consulting-intro { padding-top: 150px; height: 200vh;}
  .consulting-intro .bg { width: 65%;}
  .consulting-intro h1.heading { font-size: 28px;}
  .consulting-intro .content-area.area1 .text { font-size: 20px;}
  .consulting-intro .content-area.area2 .heading { font-size: 20px; line-height: 1.5;}
}

.consulting-profile { min-height: 100vh; padding: 220px 0; background: url(/images/sub/consulting/profile-bg.jpg) no-repeat bottom center/cover; overflow: hidden;}
.consulting-profile .inner { perspective: 1600px;}
.consulting-profile .profile-card { display: flex; gap: 60px; padding: 60px; background: rgba(16, 16, 16, 0.5); backdrop-filter: blur(24px); box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 20px; color: #fff; transform-style: preserve-3d;}
.consulting-profile .profile-card + .profile-card { margin-top: 12px;}
.consulting-profile .profile-card .card-img { flex: 0 0 29.5%; border-radius: 16px; overflow: hidden;}
.consulting-profile .profile-card .card-img figure { padding-bottom: 125.7%;}
.consulting-profile .profile-card .card-img figure img { object-position: top;}
.consulting-profile .profile-card .card-text { flex: 1; display: flex; flex-direction: column;}
.consulting-profile .profile-card .card-title { font-size: 40px; font-weight: bold; margin-bottom: 12px; }
.consulting-profile .profile-card .card-info { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2);}
.consulting-profile .profile-card .card-info .position { font-size: 20px; font-weight: 600; }
.consulting-profile .profile-card .card-info .name { font-size: 28px; font-weight: 600;}
.consulting-profile .profile-card .card-desc { margin-top: auto; font-size: 20px; font-weight: 500; line-height: 1.6;}
@media screen and (max-width: 1024px) {
  .consulting-profile { padding: 100px 0;}
  .consulting-profile .profile-card { flex-direction: column;}
  .consulting-profile .profile-card .card-img figure { padding-bottom: 100%;}
  .consulting-profile .profile-card .card-title { font-size: 30px;}
}
@media screen and (max-width: 767px) {
  .consulting-profile .profile-card { padding: 30px; gap: 30px;}
  .consulting-profile .profile-card .card-title { font-size: 20px;}
  .consulting-profile .profile-card .card-info { margin-bottom: 20px;}
  .consulting-profile .profile-card .card-info .position { font-size: 14px;}
  .consulting-profile .profile-card .card-info .name { font-size: 18px;}
  .consulting-profile .profile-card .card-desc { font-size: 16px;}
}
.consulting-service { padding: 240px 0;}
.consulting-service .inner { position: relative; z-index: 1;}
.consulting-service .service-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 80px;}
.consulting-service .service-header h2.heading { font-size: 60px; font-weight: bold;}
.consulting-service .service-header span { font-size: 22px; font-weight: bold;}
.consulting-service .service-area + .service-area { margin-top: 240px;}
.consulting-service .service-area .service-grid { display: grid; gap: 24px; text-align: center; perspective: 700px;}
.consulting-service .service-area .service-item { background: rgba(16, 16, 16, 1); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 16px; overflow: hidden; position: relative; transform-style: preserve-3d;}
.consulting-service .service-area .img-box { width: 100px; height: 100px; margin: 30px auto;}
.consulting-service .service-area .service-title { font-size: 28px; font-weight: 700; line-height: 1.4;}
.consulting-service .service-area .service-list { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 12px;}
.consulting-service .service-area .service-list li { font-weight: 600; color: #fff; line-height: 1.3; padding: 8px 25px; font-size: 13px; border-radius: 4px; background: rgba(255,255,255,.12);}
.consulting-service .service-area.area1 .service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr;}
.consulting-service .service-area.area1 .service-item { padding: 30px 50px;}
.consulting-service .service-area.area2 { position: relative;}
.consulting-service .service-area.area2 .service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); grid-auto-rows: 1fr;}
.consulting-service .service-area.area2 .service-header { margin-bottom: 384px; justify-content: center;}
.consulting-service .service-area.area2 .service-item { padding: 110px 20px;}
.consulting-service .service-area.area2 .service-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/sub/service/service-bg.png) no-repeat center/100%;}
@media (hover: hover) and (pointer: fine) {
  .consulting-service .service-item .service-list li:hover {  background: #AE3430; transition: all .3s;}
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .consulting-service { padding: 100px 0;}
  .consulting-service .service-header h2.heading { font-size: 48px;}
  .consulting-service .service-area.area1 .service-item { padding: 30px;}
  .consulting-service .service-area + .service-area { margin-top: 100px;}
  .consulting-service .service-area.area2 .service-header { margin-bottom: 100px;}
}

@media screen and (max-width: 767px) {
  .consulting-service .service-header { flex-wrap: wrap; gap: 20px;}
  .consulting-service .service-header h2.heading { font-size: 24px;}
  .consulting-service .service-header span { font-size: 18px;}
  .consulting-service .service-area .service-title { font-size: 20px;}
  .consulting-service .service-header { margin-bottom: 50px;}
  .consulting-service .service-area .img-box { width: 60px; height: 60px;}
  .consulting-service .service-area.area1 .service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px;}
  .consulting-service .service-area.area1 .service-item { padding: 30px 20px;}
  .consulting-service .service-area.area2 .service-header { margin-bottom: 150px;}
  .consulting-service .service-area.area2 .service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px;}
  .consulting-service .service-area.area2 .service-item { padding: 20px; place-content: center;}
  .consulting-service .service-area.area2 .service-background { background-position: center top 30px;}
  .consulting-service .service-area .service-list { grid-template-columns: repeat(1, 1fr);}
  .consulting-service .service-area .service-title { font-size: 18px;}
  .consulting-service .service-area .service-list li { padding: 8px;}
}

.consulting-brand h2.heading { font-size: 60px; font-weight: bold; margin-bottom: 120px;}
.consulting-brand .brand-wrap { position: relative; width: 100%; height: 500vh;}
.consulting-brand .brand-card { position: absolute; top: 0; left: 0; padding: 40px; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
.consulting-brand .brand-card .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}
.consulting-brand .brand-card .bg img { position: relative; z-index: -1; width: 100%; height: 100%; object-fit: cover;}
.consulting-brand .brand-card a { display: flex; align-items: center; padding: 40px 60px; background: rgba(16, 16, 16, 0.3); backdrop-filter: blur(20px); border-radius: 20px; color: #fff; position: relative; z-index: -1;}
.consulting-brand .brand-logo { margin-right: 14%; }
.consulting-brand .brand-label { padding: 8px 12px; font-size: 16px; font-weight: 600; line-height: 1.3; background: rgba(255, 255, 255, 0.12); border-radius: 4px; margin-bottom: 24px;}
.consulting-brand .brand-name { font-size: 40px; font-weight: 700; line-height: 1; margin-bottom: 18px;}
.consulting-brand .brand-desc { line-height: 1.6;}
.consulting-brand .brand-btn { margin-left: auto;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .consulting-brand h2.heading { font-size: 48px;}
  .consulting-brand .brand-card a { padding: 30px;}
  .consulting-brand .brand-name { font-size: 32px;}
}

@media screen and (max-width: 767px) {
  .consulting-brand h2.heading { font-size: 24px; margin-bottom: 50px;}
  .consulting-brand .brand-card { padding: 80px 20px;}
  .consulting-brand .brand-card:nth-child(2) .bg img,
  .consulting-brand .brand-card:nth-child(3) .bg img { object-position: right;}
  .consulting-brand .brand-card a { flex-direction: column;}
  .consulting-brand .brand-logo { margin: 0 auto 20px 0;}
  .consulting-brand .brand-name { font-size: 24px;}
  .consulting-brand .brand-info { margin-bottom: 30px;}
  .consulting-brand .brand-btn { width: 40px;}
}


.consulting-ci { min-height: 1062px; padding: 100px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.025); display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, rgb(63,63,63,var(--gradient-opacity, 0)) 0%, rgb(5,5,5,var(--gradient-opacity, 0)) 70%);}
.consulting-ci .content { display: flex; justify-content: center; align-items: center; flex-direction: column;}
.consulting-ci .content .scene_title { font-size: 60px; font-weight: 600; line-height: 1.4; text-align: center; margin-bottom: 120px;}
.consulting-ci .content .row { width: 100%; display: flex; gap: 30px; flex-wrap: wrap;}
.consulting-ci .content .col { display: flex; flex-direction: column; flex: 1.3 0 0;}
.consulting-ci .content .col:first-of-type {flex: 2.625 0 0;}
.consulting-ci .content .col p:first-of-type { font-family: "SF Pro Display"; font-weight: 700; font-size: 40px; line-height: 140%; letter-spacing: -0.025em; color: #fff;}
.consulting-ci .content .col p:last-of-type { margin-top: 12px; margin-bottom: 30px; white-space: nowrap; font-family: "Pretendard Variable"; font-weight: 700; font-size: 17px; line-height: 155%; letter-spacing: -0.025em; color: #fdfdfd;}
.consulting-ci .content .col > div { display: flex; gap: 30px;}
.consulting-ci .content .col > div .img_box { flex: 1 0 0; border-radius: 16px; height: 264px; }
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .consulting-ci .content .scene_title { font-size: 48px;}
}

@media screen and (max-width: 767px) {
  .consulting-ci .content .scene_title { font-size: 24px; margin-bottom: 50px;}
  .consulting-ci .content .row { flex-direction: column; gap: 50px;}
  .consulting-ci .content .col p:first-of-type { font-size: 24px;}
  .consulting-ci .content .col p:last-of-type { white-space: normal;}
  .consulting-ci .content .col > div { flex-direction: column;}
}

.consulting-location { padding: 200px 0 240px;}
.location-content { display: flex; justify-content: space-between; padding: 80px 120px; background: rgba(16, 16, 16, 1); border-radius: 24px; flex-wrap: wrap;}
.location-content .heading { font-size: 40px; font-weight: bold; line-height: 1.5; padding-top: 40px;}
.location-map { position: relative; flex: 0 0 420px; aspect-ratio: 420 / 625; background-repeat: no-repeat; background-size: 100%; background-position: center; background-image: url(/images/sub/consulting/location-bg1.png); transition: background 0.5s ease-in-out; margin-left: auto;}
.location-map .dot { position: absolute; width: 60px; height: 60px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; margin: 0;}
.location-map .dot .pointer { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #881612;}
.location-map .dot .pointer::before,
.location-map .dot .pointer::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(136, 22, 18, 1); border-radius: 50%; transform: translate(-50%, -50%);}
.location-map .dot .bubble { opacity: 0; visibility: hidden; position: absolute; top: 50%; left: -210px; transform: translate(-90%, -50%); padding: 30px 30px 24px; backdrop-filter: blur(30px); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.1); border-radius: 16px; white-space: nowrap;}
.location-map .dot .bubble .label { padding: 4px 8px; font-weight: 70; line-height: 1.4; background: rgba(255, 91, 91, 0.12); color: #FF5252;  border-radius: 4px; margin-bottom: 16px; font-weight: 700;}
.location-map .dot .bubble .num { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.025em;}
.location-map .dot .bubble .num span { font-size: 28px; font-weight: 600; line-height: 1; vertical-align: baseline;}
.location-map .dot .bubble::after { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 23px); width: calc(100% - 21px); height: 1px; border-bottom: 1px dashed rgba(255, 255, 255, 0.3); padding-left: 23px;}
.location-map .dot[selected] .pointer::before { animation: radar-pulse 2.5s infinite; animation-delay: 0s;}
.location-map .dot[selected] .pointer::after { width: 100%; height: 100%; animation: radar-pulse 2.5s infinite; animation-delay: 0.5s;}
.location-map .dot[data-map="1"] { top: 24%; left: 36%;}
.location-map .dot[data-map="2"] { top: 41%; left: 41%;}
.location-map .dot[data-map="3"] { top: 61%; left: 35%;}
.location-map .dot[data-map="4"] { top: 56%; left: 69%;}
.location-map .dot[data-map="5"] { top: 91%; left: 21%;}
.location-map .dot[selected] .bubble { opacity: 1; visibility: visible; transform: translate(-100%, -50%); transition: all 0.5s;}
.location-map:has(.dot[data-map="1"][selected]) { background-image: url(/images/sub/consulting/location-bg1.png); }
.location-map:has(.dot[data-map="2"][selected]) { background-image: url(/images/sub/consulting/location-bg2.png); }
.location-map:has(.dot[data-map="3"][selected]) { background-image: url(/images/sub/consulting/location-bg3.png); }
.location-map:has(.dot[data-map="4"][selected]) { background-image: url(/images/sub/consulting/location-bg4.png); }
.location-map:has(.dot[data-map="5"][selected]) { background-image: url(/images/sub/consulting/location-bg5.png); }
@keyframes radar-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .consulting-location { padding: 100px 0 200px;}
  .location-content { padding: 30px 50px;}
  .location-content .heading { font-size: 30px;}
  .location-map .dot .bubble .num { font-size: 40px;}
  .location-map .dot[selected] .bubble { transform: translate(-50%, -50%);}
}

@media screen and (max-width: 767px) {
  .location-map { flex: 0 0 70%;}
  .location-content { padding: 30px;}
  .location-content .heading { font-size: 20px; margin-bottom: 50px;}
  .location-map .dot[selected] .bubble { transform: translate(-100%, -50%);}
  .location-map .dot .bubble { padding: 20px; left: -20px;}
  .location-map .dot .bubble::after { left: calc(100% + 5px); width: 34px;}
  .location-map .dot .bubble .num { font-size: 18px;}
  .location-map .dot .bubble .num span { font-size: 14px;}
  .location-map .dot .pointer { width: 8px; height: 8px;}
  .location-map .dot[data-map="1"] { top: 17%; left: 30%; }
  .location-map .dot[data-map="2"] { top: 35%; left: 32%;}
  .location-map .dot[data-map="3"] { top: 55%; left: 27%;}
  .location-map .dot[data-map="4"] { top: 49%; left: 62%; }
  .location-map .dot[data-map="5"] { top: 85%; left: 12%;}
}

.consulting-partner { position: relative;}
.consulting-partner .rolling-container { position: absolute; bottom: 20px; left: 0; width: 100%; overflow: hidden;}
.consulting-partner .rolling-wrap { display: flex; width: max-content; gap: 80px; }
.consulting-partner .rolling-wrap img { display: block;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  .consulting-partner .rolling-wrap { gap: 40px;}
  .consulting-partner .rolling-wrap img { max-height: 50px;}
}

/* expert */
.expert { background: #000; color: #fff;}
.expert h2.heading { font-size: 60px; font-weight: 700; line-height: 1.4;}
.expert-visual { width: 100%; height: 100vh; position: relative; z-index: 1;}
.expert-visual .inner { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;}
.expert-visual .heading { font-size: 60px; font-weight: 700; line-height: 1.4; text-align: center; padding: 0 60px;}
.expert-visual .heading .word { opacity: .4;}
.expert-visual .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(360deg, rgba(0, 0, 0, 0) 67.4%, #000000 100%);}
.expert-visual .bg video { width: 100%; height: 100%; object-fit: cover; z-index: -1;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .expert h2.heading { font-size: 48px;}
  .expert-visual .heading { font-size: 48px;}
}

@media screen and (max-width: 767px) {
  .expert h2.heading { font-size: 24px;}
  .expert-visual .heading { font-size: 24px;}
  .expert-visual { height: 70vh;}
  .expert-visual .heading { font-size: 24px; padding: 0 20px;}
}

.expert-overview { padding: 270px 0 240px; overflow: hidden;}
.expert-overview .inner { perspective: 1600px;}
.expert-overview h2.heading { font-size: 40px; font-weight: 700; margin-bottom: 80px;}
.expert-overview h2.heading .word { opacity: .4;}
.expert-overview .overview-card { padding: 60px; background: rgba(16, 16, 16, 0.5); backdrop-filter: blur(30px); box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 20px; display: flex; gap: 120px; transform-style: preserve-3d;}
.expert-overview .overview-card + .overview-card { margin-top: 24px;}
.expert-overview .card-img { flex: 0 0 46.6%; broder-radius: 16px; overflow: hidden;}
.expert-overview .card-img figure { padding-bottom: 61%;}
.expert-overview .card-text { place-content: center;}
.expert-overview .card-text .title { font-size: 40px; font-weight: 700; line-height: 1.5; margin-bottom: 40px;}
.expert-overview .card-text .desc { font-size: 20px; font-weight: 500; line-height: 1.65;}
@media screen and (max-width: 1280px) {
  .expert-overview h2.heading { font-size: 24px;}
}

@media screen and (max-width: 1024px) {
  .expert-overview { padding: 100px 0;}
  .expert-overview .overview-card { flex-direction: column; gap: 40px;}
  .expert-overview .card-text .title { font-size: 30px;}
}

@media screen and (max-width: 767px) {
  .expert-overview { padding: 60px 0;}
  .expert-overview .overview-card { padding: 30px;}
  .expert-overview .card-text .title { font-size: 20px;}
  .expert-overview .card-text .desc { font-size: 16px;}
}

.expert-part { padding-bottom: 200px;}
.expert-part h2.heading { margin-bottom: 80px; text-align: center;}
.expert-part .part-content { display: flex;}
.expert-part .part-btns { flex: 0 0 160px;}
.expert-part .swiper-wrapper { flex-direction: column;}
.expert-part .swiper-slide { width: auto; font-size: 22px; font-weight: 700; line-height: 1.4; color: rgba(255,255,255,.3); cursor: pointer;}
.expert-part .swiper-slide + .swiper-slide { margin-top: 29px;}
.expert-part .swiper-slide.active { color: #fff;}
.expert-part .part-tabs { flex: 1;}
.expert-part .part-tabs .part-area { position: relative; display: none; align-items: flex-end; width: 100%; height: 0; padding-bottom: 45.8%; border-radius: 24px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(/images/sub/expert/part-img1.png);}
.expert-part .part-tabs .part-area::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;  background: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 100% ); pointer-events: none; z-index: 1;}
.expert-part .part-tabs .part-area .desc { position: absolute; bottom: 60px; left: 60px; font-size: 28px; line-height: 1.5; font-weight: 700; z-index: 2;}
.expert-part .part-tabs .part-area:nth-child(1) { background-image: url(/images/sub/expert/part-img1.png);}
.expert-part .part-tabs .part-area:nth-child(2) { background-image: url(/images/sub/expert/part-img2.png);}
.expert-part .part-tabs .part-area:nth-child(3) { background-image: url(/images/sub/expert/part-img3.png);}
.expert-part .part-tabs .part-area:nth-child(4) { background-image: url(/images/sub/expert/part-img4.png);}
.expert-part .part-tabs .part-area:nth-child(5) { background-image: url(/images/sub/expert/part-img5.png);}
.expert-part .part-tabs .part-area:nth-child(6) { background-image: url(/images/sub/expert/part-img6.png);}
.expert-part .part-tabs .part-area:nth-child(7) { background-image: url(/images/sub/expert/part-img7.png);}
.expert-part .part-tabs .part-area:nth-child(8) { background-image: url(/images/sub/expert/part-img8.png);}
.expert-part .part-tabs .part-area.active { display: flex;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .expert-part { padding-bottom: 100px;}
  .expert-part .part-content { flex-direction: column;}
  .expert-part .swiper-wrapper { flex-direction: row; gap: 20px; flex-wrap: wrap;}
  .expert-part .swiper-slide + .swiper-slide { margin-top: 0;}
  .expert-part .part-btns { flex: auto; margin-bottom: 80px;}
  .expert-part .part-tabs .part-area { padding-bottom: 80%;}
  .expert-part .part-tabs .part-area .desc { left: 0; bottom: 30px; width: 100%; padding: 0 30px;}
}

@media screen and (max-width: 767px) {
  .expert-part { padding-bottom: 60px;}
  .expert-part .part-btns { margin-bottom: 30px;}
  .expert-part .swiper-wrapper { gap: 10px;}
  .expert-part .swiper-slide { font-size: 16px;}
  .expert-part .part-tabs .part-area { padding-bottom: 100%;}
  .expert-part .part-tabs .part-area .desc { font-size: 18px; }
}

.expert-info { overflow: hidden; padding: 200px 0 280px;}
.expert-info .info-sw { overflow: visible; text-align: center;}
.expert-info .info-sw figure { padding-bottom: 100%; border-radius: 50%; overflow: hidden; margin-bottom: 16px;}
.expert-info .info-sw figure::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 1; opacity: 0; visibility: hidden;}
.expert-info .info-sw figure span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 35px; background: #fff; font-size: 16px; font-weight: 700; color: #000; z-index: 1; opacity: 0; visibility: hidden; white-space: nowrap;}
.expert-info .info-sw .position { font-size: 20px; font-weight: 700; color: rgba(134, 134, 134, 1); margin-bottom: 4px; line-height: 1.55;}
.expert-info .info-sw .name { font-size: 24px; font-weight: 700; line-height: 1.5;}
.expert-info .info-sw .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
.expert-info .info-btns { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 60px;}
.expert-info .swiper-slide { cursor: pointer;}
.expert-info .swiper-button-prev,
.expert-info .swiper-button-next { position: static; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0;}
.expert-info .swiper-button-prev { background: rgba(255, 255, 255, 0.24) url(/images/slide-arrow-prev.svg) no-repeat center/ auto 75%;}
.expert-info .swiper-button-next { background: rgba(255, 255, 255, 0.24) url(/images/slide-arrow-next.svg) no-repeat center/ auto 75%;}
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 11;}
.popup-overlay.active { display: flex; }
.popup-overlay .popup-container { background: #fff; width: 90%; max-width: 1200px; max-height: 90vh; position: relative;}
.popup-overlay .popup-close { position: absolute; top: 0; right: 0; transform: translateX(100%); filter: invert(1);}
@media (hover: hover) and (pointer: fine) {
  .expert-info .swiper-slide:hover figure::before,
  .expert-info .swiper-slide:hover figure span { opacity: 1; visibility: visible; transition: opacity .3s;}
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .expert-info { padding: 100px 0 150px;}
}

@media screen and (max-width: 767px) {
  .expert-info { padding: 60px 0 100px;}
  .expert-info .info-btns { margin-top: 30px;}
  .expert-info .swiper-button-prev,
  .expert-info .swiper-button-next { width: 40px; height: 40px;}
  .expert-info .info-sw .position { font-size: 16px;}
  .expert-info .info-sw .name { font-size: 18px;}
}

/* case */
.case { padding: 0 0 40px; background: #000; color: #fff; overflow: hidden; }
.case .case-body { position: relative; top: -200px;}
.case .case-intro { width: 100%; height: 100vh; position: relative; background: url(/images/sub/case/case-visual.jpg) no-repeat center/cover; }
.case .case-intro .inner { height: 100%; display: flex; justify-content: center; align-items: center;}
.case h1.heading { text-align: center; margin-bottom: 120px; font-size: 60px; font-weight: 700; line-height: 1.4;}
.case .case-btns { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 60px;}
.case .case-btns button { padding: 14px 30px; background: rgba(255, 255, 255, 0.12); font-weight: 700; font-size: 22px; line-height: 1.4; border-radius: 35px; color: #fff; backdrop-filter: blur(30px);}
.case .case-btns button.active { background: rgba(136, 22, 18, 1);}
.case .case-content { perspective: 1600px; display: none;}
.case .case-content.active { display: block;}
.case .case-area { display: flex; transform-style: preserve-3d;}
.case .case-area + .case-area { margin-top: 24px; }
.case .case-area > div { flex: 1; padding: 60px; background: rgba(16, 16, 16, .5); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; border-radius: 20px; position: relative; overflow: hidden; min-height: 780px; backdrop-filter: blur(25px);}
.case .case-area .case-info::after { content: ''; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; border-right: 1px dashed rgba(255,255,255,.2); }
.case .case-area .info-header { display: flex; flex-wrap; gap: 24px; align-items: center; margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.2);}
.case .case-area .info-header .info-img { width: 100px; height: 100px; overflow: hidden; overflow: hidden;}
.case .case-area .info-header .info-img img { width: 100%; height: 100%; object-fit: cover;}
.case .case-area .info-header .info-title span { display: block; font-size: 20px; font-weight: 600; opacity: .8; margin-bottom: 2px;}
.case .case-area .info-header .info-title .title { font-size: 40px; font-weight: 700; line-height: 1.4;}
.case .case-area .info-item + .info-item { margin-top: 48px;}
.case .case-area .info-item .item-list li { padding-left: 10px; position: relative; font-size: 20px; font-weight: 700; line-height: 1.4;}
.case .case-area .info-item .item-list li span { vertical-align: baseline; color: rgba(255, 82, 82, 1);}
.case .case-area .info-item .item-list li::before { content: ''; display: block; position: absolute; top: 12px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #fff;}
.case .case-area .item-label { padding: 4px 10px; background: rgba(255, 255, 255, 0.12); border-radius: 4px; font-weight: 600; line-height: 1.5; margin-bottom: 24px; width: fit-content;}
.case .case-area .item-label.result { background: rgba(255, 82, 82, 0.12); color: #FF5252;}
.case .case-area .item-sbj { font-size: 20px; font-weight: 700; line-height: 1.4; display: block;}
.case .case-area .item-sbj.v2 { opacity: .6;}
.case .case-area .item-desc { font-size: 16px; font-weight: 600; line-height: 1.55; opacity: .6; margin-top: 16px;}
.case .case-area .info-item .info-counter { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; text-align: center;}
.case .case-area .info-item .info-counter[data-item="3"] { grid-template-columns: repeat(3, 1fr); }
.case .case-area .info-item .info-counter[data-item="5"] { grid-template-columns: repeat(5, 1fr); }
.case .case-area .info-item .info-counter li { position: relative;}
.case .case-area .info-item .info-counter li:not(:first-child)::before { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 60px; border-left: 1px dashed rgba(255,255,255,.3); }
.case .case-area .info-item .info-counter .counter-title { display: block; font-size: 20px; font-weight: 600; opacity: .8; margin-bottom: 8px;}
.case .case-area .info-item .info-counter .counter-num { font-size: 28px; font-weight: 700;}
.case .case-area .info-item.solution .item-label { margin-bottom: 32px; margin-top: 80px; background: rgba(255, 82, 82, 0.12); color: #FF5252;}
.case .case-area .info-item.solution .item-sbj { font-size: 24px; margin-bottom: 24px;}
.case .case-area .info-item.solution .text { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700;}
.case .case-area .info-item.solution .text::before { content: ''; display: block; width: 44px; height: 13px; background: url(/images/sub/case/case-arrow.svg) no-repeat center/auto 100%; flex-shrink: 0;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .case .case-area > div { min-height: auto;}
}

@media screen and (max-width: 767px) {
  .case { padding: 0; overflow: visible;}
  .case .case-intro { height: 70vh;}
  .case .case-body { top: -120px;}
  .case h1.heading { font-size: 32px;}
  .case .case-btns { margin-bottom: 30px; position: sticky; top: 80px; z-index: 1;}
  .case .case-btns button { font-size: 16px; padding: 8px 20px;}
  .case .case-area > div { padding: 30px; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;}
  .case .case-area .case-chart { padding-bottom: 60px;}
  .case .case-area .case-info::after { display: none;}
  .case .case-area .info-header { flex-direction: column; padding-bottom: 20px; margin-bottom: 40px;}
  .case .case-area .info-header .info-title span { margin-bottom: 15px; font-size: 18px;}
  .case .case-area .info-header .info-title .title { font-size: 24px;}
  .case .case-area .item-sbj { font-size: 18px;}
  .case .case-area .info-item + .info-item { margin-top: 30px;}
  .case .case-area .info-item.solution .item-label { margin-bottom: 20px; margin-top: 50px;}
  .case .case-area .info-item.solution .item-sbj { font-size: 18px;}
  .case .case-area .info-item.solution .text { font-size: 18px;}
  .case .case-area .info-item .info-counter[data-item="5"],
  .case .case-area .info-item .info-counter[data-item="3"],
  .case .case-area .info-item .info-counter { grid-template-columns: repeat(2, 1fr); gap: 20px;}
  .case .case-area .info-item .info-counter li:not(:first-child)::before { display: none;}
  .case .case-area .info-item .info-counter li:nth-child(even)::before { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 60px; border-left: 1px dashed rgba(255,255,255,.3);}
  .case .case-area .info-item .info-counter .counter-title { font-size: 18px;}
  .case .case-area .info-item .info-counter .counter-num { font-size: 22px;}
  .case .case-area .info-item .item-list li { font-size: 18px;}
  .case .case-area .info-item .item-list li::before { top: 10px;}
}

.case .chart-header { text-align: center; position: relative;}
.case .chart-header > .title { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 82, 82, 0.12); color: rgba(255, 82, 82, 1); padding: 8px 16px; border-radius: 4px; font-size: 18px; font-weight: 600; text-align: center; place-content: center; width: max-content;}
.case .chart-header .chart-label { padding: 8px 16px; width: fit-content; margin-bottom: 24px; background: rgba(255, 82, 82, 0.12); color: rgba(255, 82, 82, 1); font-weight: 600; line-height: 1.4; border-radius: 4px;}
.case .chart-header .chart-title { font-size: 20px; font-weight: 700; line-height: 1.4;}
.case .chart-wrap { position: relative;}
.case .case-chart { display: flex; flex-direction: column; justify-content: space-between;}
.case .chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.case .chart-grid .chart-card { height: 220px; background: rgba(20, 20, 20, 0.5); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; border-radius: 12px; backdrop-filter: opacity(0.5);}
.case .chart-grid .chart-card .card-desc { font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 24px;}
.case .chart-grid.v2 .chart-card:first-child { grid-column: 1/-1;}
.case .case-chart .case-calendar { display: flex; flex-direction: column; width: fit-content; margin-left: auto;}
.case .case-chart .case-calendar .calendar-top { display: flex; align-items: center; margin-bottom: 22px;}
.case .case-chart .case-calendar .counter-container { padding: 0 16px;}
.case .case-chart .case-calendar .calendar-desc { font-size: 16px; font-weight: 500; opacity: .4;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .case .chart-header { margin-bottom: 30px;}
}

@media screen and (max-width: 767px) {
  .case .chart-header > .title { position: relative; top: 0; margin-bottom: 20px;}
  .case .chart-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 10px;}
  .case .case-chart .case-calendar .calendar-top { margin-bottom: 10px;}
  .case .case-chart .case-calendar .counter-container { padding: 0 8px;}
  .case .case-chart .case-calendar .calendar-desc { font-size: 13px;}
  .case .chart-grid .chart-card .card-desc { text-align: center;}
}

.case .chart-grid .chart-card .circle { width: 108px; height: 108px; position: relative;}
.case .chart-grid .chart-card .circle > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.case .chart-grid .chart-card .circle .circle-step { stroke-dasharray: 310px; transform: rotate(-90deg);}
.case .chart-grid .chart-card .circle .circle-step.active + .icon { animation: rotateShake 2s ease-in-out; transform-origin: center bottom;}
.case .chart-grid .chart-card .icon-box .shake.active { animation: svgRotateShake 2s ease-in-out; transform-origin: center bottom;}
.case .chart-grid .chart-card .icon-box .bar-set { transform-origin: bottom;}
.case .chart-grid .chart-card .icon-box img { display: block;}
.case .chart-grid .chart-card .icon-box[data-num="3"] { position: relative; top: 10px;}
.case .chart-grid .chart-card .chart-group { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.case .chart-grid .chart-card .card-desc-boxs { display: flex; align-items: center; justify-content: center; max-width: 360px; width: 90%; margin: 0 auto; font-size: 16px; font-weight: 600; }
/* .case .chart-grid .chart-card .card-desc-boxs span { opacity: .5; } */
/* .case .chart-grid .chart-card .card-desc-boxs span:nth-child(2) { opacity: 1;} */
.case .chart-grid .chart-card .line-container { position: relative; max-width: 360px; margin: 0 auto 72px; width: 90%;}
.case .chart-grid .chart-card .line-container::before { content: '2025년'; display: block; position: absolute; top: 100%; left: 0; transform: translateX(-50%); font-size: 14px; font-weight: 600; opacity: .5; padding-top: 8px;}
.case .chart-grid .chart-card .line-container::after { content: '2028년'; display: block; position: absolute; top: 100%; right: 0; transform: translateX(50%); font-size: 14px; font-weight: 600; opacity: .5; padding-top: 8px;}
.case .chart-grid .chart-card .line-box { overflow: hidden; position: relative; height: 14px; border-radius: 100px; width: 100%;}
.case .chart-grid .chart-card .line-box .line { width: 100%; height: 8px; background: #373738; border-radius: 35px; position: absolute; top: 50%; left: 0; margin-top: -4px;}
.case .chart-grid .chart-card .line-box .line-black { background: #373738;}
.case .chart-grid .chart-card .line-box .line-red { background: linear-gradient(180deg, #E3322C 0%, #FF645E 100%);}
.case .chart-grid .chart-card .line-box .line-red::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.case .chart-grid .chart-card .card-step { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; padding: 0 18px;}
.case .chart-grid .chart-card .card-step li { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(140.7% 140.7% at 50% 50%, #101010 0%, #FF645D 100%); box-shadow: 0px 0px 8.89px 0px rgba(255, 255, 255, 0.12) inset; border-radius: 50%; font-size: 14px; line-height: 1.4;}
.case .chart-grid .chart-card .card-step li:not(:last-child):after { content: ''; display: block; position: absolute; top: 50%; left: 100%; width: 16px; height: 1px; border-bottom: 1px dashed rgba(255,255,255,.16);}
.case .circle-double { position: relative; text-align: center;}
.case .circle-double .circle-item { display: block; max-width: 378px; width: 70%; margin: 0 auto;}
.case .circle-double .circle-item .progress-red { stroke-dasharray: 910px; stroke-dashoffset: 910px;}
.case .circle-double .circle-item .progress-blue { stroke-dasharray: 750px; stroke-dashoffset: 750px;}
.case .circle-double .circle-text { position: absolute; bottom: 18%; left: 22px; text-align: center; transform: translateX(10%); opacity: 0; visibility: hidden;}
.case .circle-double .circle-text .num { font-size: 24px; font-weight: 700; font-family: "SF Pro Display"; display: block;}
.case .circle-double .circle-text .text { font-size: 16px; opacity: .6;}
.case .circle-double .circle-text::after { content: ''; display: block; height: 1px; width: 5.5vw; border-bottom: 1px dashed rgba(255,255,255,1); position: absolute; top: 50%; left: 130%; transform: translateY(-50%);}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  .case .chart-grid .chart-card { height: auto; align-items: center; justify-content: flex-start;}
  .case .chart-grid .chart-card .circle { width: 76px; height: 76px; aspect-ratio: 1;}
  .case .chart-grid .chart-card .circle .circle-step { width: 100%; height: 100%;}
  .case .chart-grid .chart-card .card-step { grid-template-columns: repeat(1, 1fr); gap: 10px;}
  .case .chart-grid .chart-card .card-step li { aspect-ratio: auto; padding: 10px 20px; border-radius: 5px;}
  .case .chart-grid .chart-card .card-step li:not(:last-child):after { display: none;}

  .case .chart-grid .chart-card .icon-box { width: 76px; height: 76px;}
  .case .chart-grid .chart-card .icon-box svg { width: 100%; height: 100%;}
}

.case .graph-boxs { position: relative; }
.case .graph-boxs img { display: block; width: 100%;}
.case .graph-boxs:has([data-graph="1"]) img { width: 100%; height: 48vh;}
.case .graph-boxs .line { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.case .graph-boxs .bubble { position: absolute; top: -4%; right: 0; width: 22.2%; height: 33.6%; opacity: 0; transform: translateY(10%); transition: all .3s;}
.case .graph-boxs .bubble.active { opacity: 1; transform: translateY(0);}

.case .graph-boxs .graph-list { position: absolute; top: -2px; left: 0; width: 100%; height: 100%; display: flex;}
.case .graph-boxs .graph-item { display: flex; gap: 16px; width: 120px; height: 100%; padding: 0 8px 1px; justify-content: center; position: relative;}
.case .graph-boxs .graph-item > div { width: calc(50% - 8px); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; overflow-y: clip;}
.case .graph-boxs .graph-item > div .percent { width: 100%; height: 80%; border-radius: 35px 35px 0 0; position: relative; text-align: center;}
.case .graph-boxs .graph-item .line2 { position: absolute; top: 0; left: 0; height: 56%; top: -2%; left: 0; width: 100%;}
.case .graph-boxs .graph-item .line2 span { position: absolute; top: 0; left: 0; border-right: 1px dashed rgba(255,255,255,.4); width: 1px; height: 100%; left: 50%; transform: translateX(-50%) rotate(0deg);}
.case .graph-boxs .graph-item .line2::before,
.case .graph-boxs .graph-item .line2::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; border: 2px solid #fff; background: #73737; position: absolute;}
.case .graph-boxs .graph-item .line2::before { left: 24%;}
.case .graph-boxs .graph-item .line2::after { background: #FF5252; top: auto; bottom: 0; right: 24%;}
.case .graph-boxs .graph-item .num { font-size: 0.68vw; position: absolute; left: 50%; top: -7px; transform: translate(-50%, -100%);}
.case .graph-boxs .graph-black .percent { background: #373737;}
.case .graph-boxs .graph-red .percent { background: linear-gradient(180deg, #E3322C 71.02%, #FF645E 100%);}

.case .graph-boxs .graph-list[data-graph="1"] { justify-content: space-between; padding: 0 13%;}
.case .graph-boxs .graph-list[data-graph="1"] .graph-item { padding: 0 16px 1px; width: 126px;}
.case .graph-boxs .graph-list[data-graph="1"] .graph-item .graph-black .percent { height: 100%;}
.case .graph-boxs .graph-list[data-graph="1"] .graph-item .graph-red .percent { height: 48%;}
.case .graph-boxs .graph-list[data-graph="2"] { justify-content: center; gap: 60px;}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item > div { width: calc(50% - 16px);}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item:nth-child(1) .graph-black .percent { height: 88%;}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item:nth-child(2) .graph-black .percent { height: 80%;}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item:nth-child(3) .graph-black .percent { height: 69%;}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item:nth-child(1) .graph-red .percent { height: 42%;}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item:nth-child(2) .graph-red .percent { height: 31.5%;}
.case .graph-boxs .graph-list[data-graph="2"] .graph-item:nth-child(3) .graph-red .percent { height: 24%;}
.case .graph-boxs .graph-list[data-graph="3"] { justify-content: space-between; top: 0;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item { width: 65px; gap: 8px;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(6) { margin-left: 28px;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item > div { width: calc(50% - 8px);}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item .percent { transform: translateY(120%);}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(1) .graph-black .percent { height: 39%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(2) .graph-black .percent { height: 44%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(3) .graph-black .percent { height: 45%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(4) .graph-black .percent { height: 47%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(5) .graph-black .percent { height: 50%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(6) .graph-black .percent { height: 68%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(7) .graph-black .percent { height: 70%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(8) .graph-black .percent { height: 72%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(1) .graph-red .percent { height: 34%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(2) .graph-red .percent { height: 37%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(3) .graph-red .percent { height: 41%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(4) .graph-red .percent { height: 42%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(5) .graph-red .percent { height: 44%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(6) .graph-red .percent { height: 55%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(7) .graph-red .percent { height: 60%;}
.case .graph-boxs .graph-list[data-graph="3"] .graph-item:nth-child(8) .graph-red .percent { height: 63%;}
.case .graph-boxs .graph-month { position: absolute; top: 100%; left: 0; width: 100%; display: flex; justify-content: space-between; text-align: center; padding-top: 4px;}
.case .graph-boxs .graph-month li { width: 65px; font-size: 13px; opacity: .7;}
.case .graph-boxs .graph-month li:nth-child(6) { position: relative; margin-left: 28px;}
.case .graph-boxs .graph-month li:nth-child(6)::before { content: ''; display: block; width: 10px; height: 1px; border-bottom: 2px dotted rgba(217, 217, 217, 1); position: absolute; left: -42%; top: 50%; transform: translateY(-50%);}


@keyframes rotateShake {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  8.33% { transform: translate(-50%, -50%) rotate(3deg); }
  16.66% { transform: translate(-50%, -50%) rotate(-3deg); }
  25% { transform: translate(-50%, -50%) rotate(2deg); }
  33.33% { transform: translate(-50%, -50%) rotate(-2deg); }
  41.66% { transform: translate(-50%, -50%) rotate(1deg); }
  50% { transform: translate(-50%, -50%) rotate(-1deg); }
  58.33% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes svgRotateShake {
  0% { transform: rotate(0deg); }
  8.33% { transform: rotate(1deg); }
  16.66% { transform: rotate(-1deg); }
  25% { transform: rotate(1deg); }
  33.33% { transform: rotate(-1deg); }
  41.66% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  58.33% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@media screen and (max-width: 1280px) {
  .case .case-area { flex-direction: column;}
  .case .graph-boxs .graph-month li:nth-child(6)::before { left: -59%;}
  .case .graph-boxs .graph-list[data-graph="2"] { padding: 0 5%; justify-content: space-between; gap: 30px;}
  .case .graph-boxs .graph-list[data-graph="2"] .chart-container { width: 33.333%;}

}

@media screen and (max-width: 1024px) {
  .case .graph-boxs .graph-month li:nth-child(6)::before { left: -34%;}
  .case .graph-boxs .graph-item .num { font-size: 1.5vw;}
}

@media screen and (max-width: 767px) {
  .case .graph-boxs .graph-list[data-graph="1"] { padding: 0;}
  .case .graph-boxs .graph-list[data-graph="2"] { padding: 0; gap: 0;}
  .case .graph-boxs:has([data-graph="2"]) img { height: 35vh;}
  .case .graph-boxs .graph-list[data-graph="3"] .graph-item { gap: 4px;}
  .case .graph-boxs .graph-list[data-graph="3"] .graph-item > div { width: calc(50% - 2px);}
  .case .graph-boxs .graph-month li:nth-child(6)::before { left: -64%;}
  .case .graph-boxs .graph-item .num { font-size: 2.5vw;}
}

ul.flip { position: relative; width: 80px; height: 80px; font-size: 57px; font-family: "SF Pro Display"; font-weight: bold; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, .7); }
ul.flip li { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
ul.flip li:first-child { z-index: 2; }
ul.flip li.before { z-index: 3; }
ul.flip li.active { z-index: 4; }
ul.flip li a { display: block; height: 100%; perspective: 200px; }
ul.flip li a div { z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: linear-gradient(180deg, #2C2C2F -1.49%, #3B3C3C 100%); box-shadow: 0px 0.5px 1px 0px rgba(80, 78, 84, 1) inset;}
ul.flip li a div.up { transform-origin: 50% 100%; top: 0; border-radius: 6px 6px 0 0;}
ul.flip li a div.up:after { content: ""; position: absolute; top: 98%; left: 0; z-index: 5; width: 100%; height: 3px; background-color: rgba(0,0,0,.4); backdrop-filter: blur(3.200000047683716px)}
ul.flip li a div.down { transform-origin: 50% 0%; bottom: 0; z-index: 2; border-radius: 0 0 6px 6px;}
ul.flip li a div .inn { position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #fff; text-shadow: 0 1px 2px #000; text-align: center; border-radius: 6px; }
ul.flip li a div.up .inn { top: 0; }
ul.flip li a div.down .inn { top: -100%; }
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  ul.flip { width: 50px; height: 50px; font-size: 37px;}
}
.chart-container { position: relative;}
.chart-container .bg,
.case .graph-boxs .graph-item .bg { background-blend-mode: screen; position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; background: linear-gradient(180deg, rgba(16, 16, 16, 0) -4.23%, #101010 100%); opacity: 0;}
#chart-container { height: 100%; width: 126px; pointer-events: none;}
#chart-container2 { height: 100%; width: 126px; pointer-events: none;}
#chart-container3 { height: 100%; width: 120px; pointer-events: none;}
#chart-container4 { height: 100%; width: 120px; pointer-events: none;}
#chart-container5 { height: 100%; width: 120px; pointer-events: none;}
.category-list { display: flex; position: absolute; top: 100%; width: 100%; padding-top: 12px;}
.category-list li { flex: 1; text-align: center; font-size: 13px; font-weight: 400; opacity: .7; white-space: nowrap;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  #chart-container3 { height: 100%; width: 100%; pointer-events: none;}
  #chart-container4 { height: 100%; width: 100%; pointer-events: none;}
  #chart-container5 { height: 100%; width: 100%; pointer-events: none;}
  .category-list li { white-space: wrap;}
}


/* contact */
.contact { background: #000; color: #fff; padding-bottom: 240px;}
.contact-visual { width: 100%; height: 100vh; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; position: relative;}
.contact-visual .bg  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.contact-visual .bg::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 61.94%, #000000 100%),linear-gradient(180deg, rgba(0, 0, 0, 0) 54.03%, #000000 94.23%),linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); z-index: 1;}
.contact-visual .bg img,
.contact-visual .bg video { width: 100%; height: 100%; object-fit: cover;}
.contact-visual > .inner { position: relative; z-index: 1;}
.contact-visual .heading { font-size: 60px; font-weight: 700; line-height: 1.4; margin-bottom: 30px;}
.contact-visual .text { font-size: 22px; font-weight: 700;}
.contact-visual .text span { color: rgba(255, 82, 82, 1); vertical-align: baseline;}

.contact .contact-card { position: relative; top: -100px; z-index: 1; margin-bottom: 150px;}
.contact .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); grid-auto-rows: 1fr; gap: 24px;}
.contact .card-item { background: rgba(16, 16, 16, 0.5); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset; backdrop-filter: blur(30px); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; min-height: 240px;}
.contact .card-item .card-label {  padding: 4px 12px; border-radius: 4px; background: rgba(255,255,255,.12);  font-weight: 700; width: fit-content;}
.contact .card-item .card-sbj { font-size: 24px; font-weight: 700; margin-top: auto;}
.contact-card ul { display: flex; flex-wrap: wrap; gap: 90px 0; justify-content: flex-end;}
.contact-card ul li { position: relative; flex: 0 0 33.333%; height: 162px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.contact-card ul li.active span { color: #FF5252; background: rgba(255, 82, 82, 0.12);}
.contact-card ul li.active p { color: #fff;}
.contact-card ul li span { transition: 0.7s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px 12px; margin-bottom: 12px; background: #232323; border-radius: 4px; font-family: "SF Pro Display"; font-style: normal; font-weight: 700; font-size: 18px; line-height: 130%; letter-spacing: -0.025em; color: #fff;}
.contact-card ul li p { height: 68px; transition-delay: 0.2s; transition: 0.7s ease-in-out; font-family: "Pretendard"; font-style: normal; font-weight: 700; font-size: 24px; line-height: 140%; display: flex; align-items: center; text-align: center; letter-spacing: -0.025em; color: #505050;}
.contact-card ul li .progress_bar { position: absolute; left: 0; bottom: 5px; width: 100%; height: 1px; background: #505050;}
.contact-card ul li .progress_bar .inner_line { transform-origin: left; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0);}
.contact-card ul li .progress_bar .ball { transition-delay: 0.2s; z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 100px; background: #505050;}

.contact .contact-msg { padding-bottom: 260px;}
.contact .contact-msg .inner { position: relative;}
.contact .contact-msg .bg { border-radius: 24px; overflow: hidden;}
.contact .contact-msg .heading { font-size: 28px; font-weight: 700; line-height: 1.6; position: absolute; bottom: 60px; right: 110px;}

.contact .contact-info .inner { display: flex; flex-wrap; wrap;}
.contact .contact-info .info-header { flex: 0 0 42.2%;}
.contact .contact-info .info-header .heading { font-size: 40px;}
.contact .contact-info .info-content { flex: 1;}
.contact .contact-info .form-label { display: block; font-weight: 600; line-height: 54px;}
.contact .contact-info .form-label > span { vertical-align: text-bottom; margin-left: 3px;}
.contact .contact-info input, select { padding: 5px 16px; height: 50px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); border-radius: 4px; width: 100%; color: #fff; font-size: 16px;}
.contact .contact-info input::placeholder,
.contact .contact-info select { color: rgba(255,255,255,.4) !important; font-size: 16px; font-weight: 500;}
.contact .contact-info select option { background: #222;}
.contact .contact-info textarea { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 16px; font-size: 16px; font-weight: bold; color: rgba(255,255,255,.4);}
.contact .contact-info .select-box { position: relative;}
.contact .contact-info .select-box:after { content: ''; display: block; width: 24px; height: 24px; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); background: url(/images/ico-dropdown-arrow.svg) no-repeat center/auto 100%;}
.contact .contact-info .form-row.v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px;}
.contact .contact-info .form-field { margin-top: 12px; }
.contact .contact-info .checkbox-design { width: 24px; height: 24px; background: url(/images/ico-checkbox-false.svg) no-repeat center/auto 100%; }
.contact .contact-info .checkbox-text { font-size: 16px; font-weight: 600;}
.contact .contact-info .form-checkbox:checked + .checkbox-design { background: url(/images/ico-checkbox.svg) no-repeat center/auto 100%;}
.contact .contact-info .checkbox-group { display: flex; align-items: center; justify-content: space-between;}
.contact .contact-info .checkbox-group .agree-link { font-size: 16px; font-weight: 600; line-height: 1.4; display: flex; gap: 4px; color: #fff;}
.contact .contact-info .checkbox-group .agree-link span { font-size: 14px;}
.contact .contact-info .contact-submit { backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); border-radius: 35px; padding: 20px 60px; margin: 40px auto; color: #fff; font-size: 18px; display: block;}

@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .contact { padding-bottom: 150px;}
  .contact-card ul li p { font-size: 18px;}
  .contact .contact-msg { padding-bottom: 100px;}
  .contact .contact-msg .heading { right: auto; left: 30px; font-size: 20px;}
  .contact .contact-info .inner { flex-direction: column; gap: 50px;}
}

@media screen and (max-width: 767px) {
  .contact { padding-bottom: 100px;}
  .contact-visual .heading { font-size: 32px;}
  .contact .contact-card { margin-bottom: 60px;}
  .contact-card ul { gap: 50px 0;}
  .contact-card ul li { flex: 0 0 50%; height: auto; padding-bottom: 30px;}
  .contact-card ul li span { font-size: 16px;}
  .contact-card ul li p { font-size: 16px; height: auto; padding: 0 10px;}
  .contact .contact-msg .bg { padding-bottom: 100%;}
  .contact .contact-msg .heading { font-size: 18px; left: 0; bottom: 0px; padding: 30px;}
  .contact .contact-info .info-header .heading { font-size: 24px;}
  .contact .contact-info .form-label { line-height: 44px;}
  .contact .contact-info input, select { height: 40px;}
  .contact .contact-info input::placeholder, .contact .contact-info select { font-size: 14px;}
  .contact .contact-info textarea { font-size: 14px;}
  .contact .contact-info .checkbox-group { flex-wrap: wrap; gap: 20px;}
  .contact .contact-info .contact-submit { padding: 8px 30px; font-size: 16px;}
}


.modal_container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal_container.hide {
  display: none;
}
.modal_container .modal_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px;
  gap: 40px;
  isolation: isolate;
  position: absolute;
  max-width: 1120px;
  width: 90%;
  height: 587px;
  background: #ffffff;
  border-radius: 20px;
}
.modal_container .modal_wrapper .content_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  height: 467px;
  display: flex;
  flex-direction: row;
  gap: 60px;
}
.modal_container .modal_wrapper .content_area .img_box {
  width: 370px;
  aspect-ratio: 370/467;
  background: linear-gradient(180deg, #373e49 0%, rgba(55, 62, 73, 0) 18.07%), linear-gradient(0deg, #414852 0%, rgba(65, 72, 82, 0) 68.41%), radial-gradient(66.92% 50% at 50% 50%, #5f6270 0%, #39404a 100%);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal_container .modal_wrapper .content_area .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal_container .modal_wrapper .content_area .info_box {
  flex: 1 0 0;
  padding-top: 54px;
  height: 100%;
  overflow: auto;
}
.modal_container .modal_wrapper .content_area .info_box::-webkit-scrollbar {
  width: 6px;
}
.modal_container .modal_wrapper .content_area .info_box::-webkit-scrollbar-thumb { background: #050505; border-radius: 10px; width: 6px;}
.modal_container .modal_wrapper .content_area .info_box::-webkit-scrollbar-track { background: #cdcdcd; border-radius: 10px; width: 6px; }
.modal_container .modal_wrapper .content_area .info_box .info_title { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-size: 32px; line-height: 150%; display: flex; align-items: center; letter-spacing: -0.025em; color: #050505; padding-bottom: 24px; border-bottom: 1px solid #ddd; }
.modal_container .modal_wrapper .content_area .info_box .info_content { padding-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
.modal_container .modal_wrapper .content_area .info_box .info_content .info_item { display: flex; flex-direction: column; gap: 4px;}
.modal_container .modal_wrapper .content_area .info_box .info_content .info_item p { font-family: "Pretendard Variable"; font-style: normal; font-weight: 650; font-size: 18px; line-height: 150%; letter-spacing: -0.025em; color: #050505;}
.modal_container .modal_wrapper .content_area .info_box .info_content .info_item ul { display: flex; flex-direction: column; gap: 4px; }
.modal_container .modal_wrapper .content_area .info_box .info_content .info_item ul li { list-style: none; padding-left: 7px; position: relative; font-family: "Pretendard"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 150%; letter-spacing: -0.02em; color: #111111;}
.modal_container .modal_wrapper .content_area .info_box .info_content .info_item ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; border-radius: 3px; background: #111;}
.modal_container .modal_wrapper .content_area .info_box .info_content .info_item:last-child { grid-column: 1/-1;}
.modal_container .modal_wrapper .close_button { cursor: pointer; position: absolute; width: 48px; height: 48px; top: 20px; right: 20px; border-radius: 36px; background: #242424 url("/images/icon_close.png") no-repeat center;}
.modal_container .modal_wrapper .close_button:hover {background-color: #363636;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .modal_container .modal_wrapper { overflow-y: auto; height: 80vh; padding: 80px 30px;}
  .modal_container .modal_wrapper .content_area { flex-direction: column; height: auto; width: 100%;}
  .modal_container .modal_wrapper .content_area .img_box { width: 100%; height: 500px;}
  .modal_container .modal_wrapper .content_area .img_box img { object-position: top;}
  .modal_container .modal_wrapper .content_area .info_box { flex: auto; padding: 0;}
  .modal_container .modal_wrapper .content_area .info_box .info_title { font-size: 24px;}
}

@media screen and (max-width: 767px) {
  .modal_container .modal_wrapper .content_area { gap: 30px;}
  .modal_container .modal_wrapper .content_area .info_box .info_content { grid-template-columns: auto;}
  .modal_container .modal_wrapper .close_button { height: 38px; width: 38px;}
  .modal_container .modal_wrapper .content_area .info_box { height: auto;}
  .modal_container .modal_wrapper .content_area .img_box { height: 300px;}
  .modal_container .modal_wrapper .content_area .info_box .info_title { font-size: 20px;}
}