:root { 
    --svg-color: var(--white); 
    --svg-color-black: #000; 
    --dx-title:#1d1d1f;
    --red: #da2c4d; --yellow: #f8ab37; --green: #2ecc71; --white: #fff; --grey-light: #f2f7f9; --grey: #ecedf3; --black: #080808; --black-blue: #1f2029; --black-blue-light: #353746; --black-blue-light-2: #404255; --black-blue-light-3: #4b4d64; --black-light: #424455; } 

 * { box-sizing: border-box; font-family: Pretendard; } 

html { /*cursor: none;*/ scroll-behavior: smooth; } 
html,
body { margin: 0; padding: 0; font-family: Pretendard; font-size: 18px; } 


/* 공통 스타일 */
.pcOnly { display: block !important; } 
.moOnly { display: none !important; } 
.toggle_menu { display: none; } 
.no-scroll { overflow: hidden; height: 100vh; } 

header { position: fixed; top: 0; left: 0; right: 0; padding: 40px; transition: top 0.3s; z-index: 300; display: flex; justify-content: space-between; align-items: center; } 
header .logo a { width: 54px; height: 28px; display: inline-block; } 

header nav { display: flex; align-items: center; gap: 40px; } 
header ul { display: flex; align-items: center; gap: 40px; } 
header ul li { display: inline-block; } 
header ul li a { color: var(--svg-color); font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; display: inline-block; padding: 10px; } 
header.about-active ul li a { fill: var(--svg-color); } 
header.about-text-active ul li a,
header.service-active ul li a,
header.with-active ul li a,
header.portfolio-active ul li a,
header.footprints-active ul li a,
header.contact-active ul li a { color: var(--svg-color-black); } 


header .toggle_menu { justify-content: center; align-items: center; width: 32px; height: 32px; } 
header .toggle_menu span { display: flex; position: relative; width: 100%; height: 2px; background: var(--svg-color); } 
header .toggle_menu span:before,
header .toggle_menu span:after { display: block; content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: var(--svg-color); } 
header .toggle_menu span:before { top: -8px; } 
header .toggle_menu span:after { top: 8px; } 

header .toggle_menu[aria-expanded="true"] span { animation: openMenuCenter 0.6s ease-in-out both; } 
header .toggle_menu[aria-expanded="true"] span:before { animation: openMenuTop 0.6s ease-in-out both; } 
header .toggle_menu[aria-expanded="true"] span:after { animation: openMenuBottom 0.6s ease-in-out both; } 


header .svg-logo-color,
header.visual-active .svg-logo-color,
header.about-active .svg-logo-color { fill: var(--svg-color); } 

header.about-text-active,
header.service-active,
header.with-active,
header.portfolio-active,
header.footprints-active,
header.contact-active { /* background: var(--white); */ } 

header.about-text-active .svg-logo-color,
header.service-active .svg-logo-color,
header.with-active .svg-logo-color,
header.portfolio-active .svg-logo-color,
header.footprints-active .svg-logo-color,
header.contact-active .svg-logo-color { fill: var(--svg-color-black); } 

header.about-active .toggle_menu span,
header.about-active .toggle_menu span:before,
header.about-active .toggle_menu span:after { background: var(--svg-color); } 

header.about-text-active .toggle_menu span,
header.about-text-active .toggle_menu span:before,
header.about-text-active .toggle_menu span:after,
header.service-active .toggle_menu span,
header.service-active .toggle_menu span:before,
header.service-active .toggle_menu span:after,
header.with-active .toggle_menu span,
header.with-active .toggle_menu span:before,
header.with-active .toggle_menu span:after,
header.portfolio-active .toggle_menu span,
header.portfolio-active .toggle_menu span:before,
header.portfolio-active .toggle_menu span:after,
header.contact-active .toggle_menu span,
header.contact-active .toggle_menu span:before,
header.contact-active .toggle_menu span:after,
header.footprints-active .toggle_menu span,
header.footprints-active .toggle_menu span:before,
header.footprints-active .toggle_menu span:after { background: var(--svg-color-black); } 


.section { padding: 280px 160px; background: #fff;} 
.section.visual { position: relative; width: 100%; height: 100vh; overflow: hidden; padding: 0; } 
.section.visual #myVideo { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } 
.section.visual .visual-content { position: absolute; top: 0; color: white; width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%,rgba(0, 0, 0, 0.6) 100% ); } 
 
.section .title { color: var(--dx-title); font-family: Pretendard; font-size: 80px; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 60px; } 

.section.visual .title { color: var(--white); margin-bottom: 0; } 
.section.visual .description { color: var(--white); font-size: 24px; font-weight: 600; } 

.about-text { padding: 280px 160px 0 160px; } 
.about-text .title {margin-bottom: 0;}

.about { width: 100%; height: 300vh; padding: 0 0; position: relative; } 
.about .pin-box .con { width: calc(100%); height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } 
.about .bg { width: calc(1600 / 1920 * 100vw); height: calc(1600 / 1920 * 100vh); background-color: #101010; border-radius: 0; overflow: hidden; position: relative; margin: 0 auto; max-width: unset; object-fit: cover; display: flex; align-items: center; justify-content: center; } 
.about .bg img { margin: 0; width: 100%; } 
.about .pin-box { position: absolute; background-color: var(--white); width: 100%; height: 100vh; } 
.about .pin-box .title { position: absolute; left: calc(178 / 1920 * 100vw); top: calc(110 / 930 * 100vh); z-index: 1; } 
.about .pin-box .con .box { width: calc(1190 / 1920 * 100vw); background-color: #0e1126; border-radius: 40px; overflow: hidden; position: relative; } 
.about .right { position: absolute; left: calc(90% - 660px ); top: 200vh; width: 660px;padding-top: 300px !important; } 
.about .right .txt {margin-bottom: 130px; display: flex; gap: 70px; } 
.about .right .txt:last-child { margin-bottom: 0; } 
.about .right .txt dt { color: var(--white); font-family: Pretendard; font-size: 36px; font-style: normal; font-weight: 700; line-height: normal; opacity: 0.2; transition: all 0.5s; width: 320px; } 
.about .right .txt dd { color: #86868b; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; opacity: 0.2; transition: all 0.5s; } 
.about .right .txt.on dt {opacity: 1; color: var(--white); } 
.about .right .txt.on dd {opacity: 1; color: #86868b; } 
.section.about .pin-spacer + .pin-spacer { top: 200px; } 

.service { padding: 0 160px; } 
.service p { color: var(--dx-title); font-family: Pretendard; font-size: 80px; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 20px;} 
.service ul li { color: #86868b; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; } 
.service .pin_grid { display: grid; grid-auto-columns: 1fr; grid-column-gap: 30px; grid-row-gap: 30px; grid-template-columns: 1fr 2.5fr; } 
.service .image_wrap { min-height: 100vh; width: 100%; position: sticky; top: 0; bottom: 0; text-align: center; align-self: center; display: flex; align-items: center; } 
.service .image_wrap > div { width: 100%; text-align: right; } 
.service .content { height: 100%; width: 100%; align-self: start; display: flex; align-items: center; } 

.with {padding: 0 160px 280px 160px;}
.with ul {display: grid;grid-auto-columns: 1fr; grid-column-gap: 40px; grid-row-gap: 40px;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.with ul li {width: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.with ul li img {max-width: 160px;}
/* .with ul { display: flex; gap: 60px 40px; flex-wrap: wrap; } 
.with ul li { width: 230px; display: flex; align-items: center; justify-content: space-around; }  */

.portfolio { background: #f3f3f6; } 
.portfolio ul.category { display: flex; gap: 45px; margin: 58px 0 94px 0; } 
.portfolio .category li button.tablinks { color: #46464f; cursor: pointer; font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 800; line-height: normal; opacity: 0.3; } 
.portfolio .category li button.tablinks:hover,
.portfolio .category li button.tablinks.active { opacity: 1; } 
.portfolio .category-list.tabcontent { display: none; } 
.portfolio .category-list li a .img-box { position: relative; width: 100%; overflow: hidden; transform: rotate(-0.03deg); } 
.portfolio .category-list li a { display: block; } 
.portfolio .category-list li a .img-box img { width: 100%; transition: all 0.5s; transform: rotate(0.03deg); } 
.portfolio .category-list li a:hover .img-box img { transform: scale(1.2); } 

.portfolio .list ul { display: grid; flex-wrap: wrap; gap: 100px 63px; grid-auto-columns: 1fr; grid-column-gap: 40px; grid-row-gap: 100px; grid-template-columns: 1fr 1fr; } 
.portfolio .list dl { margin-top: 30px; display: flex; align-items: center; gap: 20px; } 
.portfolio .list dl dt { color: var(--dx-title); font-family: Pretendard; font-size: 24px; font-style: normal; font-weight: 800; line-height: normal; } 

.footprints { display: flex; gap: 20px; justify-content: space-between; position: relative; } 
.footprints > div { display: flex; gap: 70px; } 
.footprints dl { display: flex; align-items: flex-end; gap: 20px; } 
.footprints dl dt { color: var(--dx-title); font-family: Pretendard; font-size: 80px; font-style: normal; font-weight: 800; line-height: normal; min-width: 145px; text-align: right; } 
.footprints dl dt.counterUp_02 { min-width: 100px; } 
.footprints dl dd { color: var(--dx-title); font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; padding-bottom: 15px; } 
.footprints .text { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--dx-title); -webkit-text-fill-color: transparent; font-family: Pretendard; font-size: 250px; font-style: normal; font-weight: 800; line-height: normal; position: absolute; left: 52%; top: 50%; transform: translate(-52%, -50%) !important; z-index: -1; padding-bottom: 122px; } 
.footprints .sentence-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vw; display: block; z-index: 100; min-height: 350px; } 
.footprints .sentence-wrap:after { position: absolute; top: -1vw; left: -1vw; right: -1vw; bottom: -5vw; content: ""; } 
.footprints .sentence-wrap .sentence-text { font-size: 250px; font-weight: 700; line-height: 1.4; text-align: center; color: #000; position: absolute; left: 52%; top: 50%; transform: translate(-52%, -50%) !important; z-index: -1; padding-bottom: 122px; } 
.footprints .sentence-wrap .sentence-text > span { position: relative; display: inline-block; } 
.footprints .sentence-wrap .sentence-text .sentence { display: inline-block; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000; -webkit-text-fill-color: transparent; position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; } 
.footprints .sentence-wrap .sentence-text .sentence > div,
.footprints .sentence-wrap .sentence-text .sentence > span { margin: 0 0.2em; display: block; } 
.footprints .sentence-wrap .sentence-text .sentence.filled { position: absolute; top: 0; left: 0; -webkit-text-fill-color: #000; clip-path: circle(0vw at 50% 50%); } 
.footprints .sentence-wrap .sentence-text .sentence div { backface-visibility: hidden; transform: translateZ(0); filter: grayscale(0); } 
.footprints .sentence-wrap .sentence.filled span { transition: clip-path 0.5s ease; } 



.contact { text-align: center; padding-top: 0; }  
.contact .title {margin-bottom: 0;}
.contact .description { color: var(--dx-title); font-family: Pretendard; font-size: 36px; font-style: normal; font-weight: 400; line-height: normal; margin-top: 12px; } 
.contact .btn-wrap { display: inline-flex; gap: 32px; margin-top: 35px; } 
.contact .btn { border-radius: 50px; background: var(--dx-title); display: inline-flex; padding: 12px 28px; justify-content: center; align-items: center; gap: 16px; color: var(--white); font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; } 
 

footer { background: var(--dx-title); padding: 62px 160px; display: flex; justify-content: space-between; } 
footer .left { display: flex; gap: 116px; } 
footer .left ul li a { color: var(--white); font-family: Pretendard; font-size: 36px; font-style: normal; font-weight: 800; line-height: 52px; text-transform: uppercase; } 
footer .right { display: flex; gap: 198px; } 
footer .right p { color: var(--white); font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; } 
footer .right .company-name { margin-bottom: 30px; margin-top: 74px; } 
footer .right .company-add,
footer .right .company-tel { font-size: 14px; margin-bottom: 7px; } 
footer .right .copy { color: #9f9f9f; font-size: 12px; font-weight: 600; line-height: 22px; margin-top: 8px; } 


.pop-layer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: auto; z-index: 999; margin: 0 auto; background-color: #1c1b1b; } 
.pop-container { position: relative; width: 100vw; height: 100vh; } 
.pop-contns-box .box-inner { height: 100%; } 
.pop-contns-box .box-inner .pop-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } 
.pop-con { display: flex; gap: 20px; flex-direction: row; justify-content: flex-end; padding: 229px 160px 40px 160px; position: relative; } 
.pop-con .text-wrap { width: auto; max-width: 350px; position: fixed; left: 160px; top: 229px; } 
.pop-con .category { color: #494950; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 35px; } 
.pop-con .title { color: var(--white); font-family: Pretendard; font-size: 46px; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 8px; } 
.pop-con .description { color: #86868b; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; } 
.pop-con .pop-img-wrap {display: flex; flex-direction: column; gap: 50px; width: fit-content; max-width: calc(100% - 400px); } 
.pop-con .pop-img-wrap > div {display: flex; gap: 30px; width: 100%;}
.pop-con .pop-img-wrap > div img {width: calc(50% - 15px);}
.pop-con .pop-img-wrap > div.multi img {width: calc(30% - 15px); height: fit-content;}
.dim-layer { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } 
.dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); } 
.dim-layer .pop-layer { display: block; } 
.dim-layer .pop-layer .box-inner { padding: 0 160px; } 
.btn-layerClose { margin: 50px 0 110px 160px; display: inline-block; cursor: pointer; width: 52px; height: 52px; background: url(../images/btn_close.png) no-repeat center center; position: relative; z-index: 1100; } 










 /* #Progress
================================================== */

.progress-wrap { position: fixed; right: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); z-index: 999; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; } 
.progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); } 
.progress-wrap::after { position: absolute; content: "TOP"; text-align: center; line-height: 46px; font-size: 16px; color: var(--grey); left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } 
.progress-wrap:hover::after { opacity: 0; } 
.progress-wrap::before { position: absolute; content: "TOP"; text-align: center; line-height: 46px; font-size: 16px; opacity: 0; background-image: linear-gradient(298deg, var(--red), var(--yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } 
.progress-wrap:hover::before { opacity: 1; } 
.progress-wrap svg path { fill: none; } 
.progress-wrap svg.progress-circle path { stroke: var(--grey); stroke-width: 4; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } 
 
 /* .circle { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); left: -5px; width: 40px; height: 40px; border-radius: 50%; background: var(--black-blue-light-3); box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07); animation: border-transform 10s linear infinite alternate forwards; } 
 .circle:hover { box-shadow: 0 8px 8px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07); } 
 .circle:before { position: absolute; content: "TOP"; top: 0; left: 0; z-index: 2; font-size: 20px; line-height: 40px; text-align: center; width: 100%; height: 40px; opacity: 1; color: var(--grey); -webkit-transition: all 300ms linear; transition: all 300ms linear; } 
 .circle:after { position: absolute; content: "TOP"; top: 0; left: 0; z-index: 2; font-size: 20px; line-height: 40px; text-align: center; width: 100%; height: 40px; color: var(--yellow); opacity: 0; -webkit-transition: all 300ms linear; transition: all 300ms linear; }  */


 /* #cursor
================================================== */
/* 
#cursor { position: fixed; top: 0; left: 0; width: 3rem; height: 3rem; z-index: 2000; pointer-events: none;} 
#cursor div { position: absolute; display: grid; place-items: center; } 
#cursor div div { border: 1px solid var(--white); border-radius: 50%; animation: pulse 2.5s linear infinite; box-shadow: 0 0 50px 5px #d7abff6e; } 
#cursor div:nth-child(1),
#cursor div:nth-child(2) { width: 100%; height: 100%; } 
#cursor div:nth-child(1) { transition: transform 0.2s ease-out; } 
#cursor div:nth-child(2) { transition: transform 0.1s ease-out; } 
#cursor div:nth-child(2) div { background: var(--white); border-radius: 50%; width: 4px; height: 4px; } 


#cursor.about-text-active div div,
#cursor.with-active div div,
#cursor.service-active div div,
#cursor.portfolio-active div div,
#cursor.footprints-active div div,
#cursor.contact-active div div {border: 1px solid var(--black); }

#cursor.about-text-active  div:nth-child(2) div,
#cursor.with-active div:nth-child(2) div,
#cursor.service-active div:nth-child(2) div
#cursor.portfolio-active div:nth-child(2) div,
#cursor.footprints-active div:nth-child(2) div,
#cursor.contact-active div:nth-child(2) div {background: var(--black);}
@keyframes pulse { 
 0% { transform: scale(1); opacity: 1; } 
 50% { transform: scale(1.25); opacity: 0.25; } 
 100% { transform: scale(1); opacity: 1; } 
 } */

@keyframes openMenuTop { 
 0% { top: -8px; transform: scaleX(1); } 
40% { top: -8px; transform: scaleX(0); } 
61% { top: 0; transform: scaleX(0) rotate(45deg); } 
100% { top: 0; transform: scaleX(1) rotate(45deg); } 
 }
 
@keyframes openMenuCenter { 
 0% { transform: scaleX(1); } 
60% { transform: scaleX(0); } 
61% { background: transparent; transform: scaleX(0); } 
100% { background: transparent; transform: scaleX(1); } 
 }

@keyframes openMenuBottom { 
 0% { top: 8px; transform: scaleX(1); } 
55% { top: 8px; transform: scaleX(0); } 
61% { top: 0; transform: scaleX(0) rotate(-45deg); } 
100% { top: 0; transform: scaleX(1) rotate(-45deg); } 
 }

 
@-webkit-keyframes border-transform { 0%,
 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
 }
 @keyframes border-transform { 0%,
 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
 }


 @media (max-width: 1520px) {
   
    .section {padding: 280px 80px;background: #fff;}
    .about-text {padding: 280px 80px 0 80px;}
    .about {padding: 0 0;}
    .service {padding: 0 80px;}
    .with {padding: 0 80px 280px 80px;}
    .portfolio {background: #f3f3f6;}
    .footprints > div {gap: 30px;}
    .contact {text-align: center; padding-top: 0;}
    footer {padding: 62px  80px;} 

    
    .pop-con { padding: 80px 80px 40px 80px; }
    .btn-layerClose {
        margin: 0 0 0 0;
        position: fixed;
        right: 0;
        top: 0;
    }
    .pop-con .text-wrap {
        width: auto;
        max-width: 350px;
        position: fixed;
        left: 80px;
        top: 80px;
    }

 }

 @media (max-width: 1440px) {
    .section {padding: 180px 80px;background: #fff;}
    .about-text {padding: 180px 80px 0 80px;}
    .about {padding: 0 0;}
    .service {padding: 0 80px;}
    .portfolio {background: #f3f3f6;}
    .section .title  {font-size: 68px;}
    .service p {font-size: 68px;}
    .footprints .sentence-wrap .sentence-text {width: 100%;}

    
 }

 @media (max-width: 1080px) {
    .service p {font-size: 60px;}
    .footprints {overflow: hidden;}
    .footprints {display: flex; gap: 200px; justify-content: space-between; position: relative; flex-direction: column;}
    .footprints > div {display: flex; gap: 70px; justify-content: space-between;}
    .footprints .sentence-wrap {width: 100vw;}
    .footprints .sentence-wrap .sentence-text {width: 100%;  letter-spacing: -20px; padding-bottom: 0; font-weight: 800;}
    .footprints dl { display: flex;  gap: 0;  flex-direction: column;  align-items: center; width: 100%; }
    .footprints dl dt {text-align: center;}
    .footprints dl dd { padding-bottom: 0;} 
    .contact .description .moOnly {display: block !important;}
    

 }
@media (max-width: 1024px) {
    .section { padding: 100px 5vw; } 
    .section .title { font-size: 48px; margin-bottom: 50px;} 
    .about-text {padding: 100px 5vw 0 5vw;}
    .about {padding: 0;}
    
    .about .bg img {margin: 0;width: 154%;max-width: min-content;}
    .about .pin-box.finish .bg img {filter: blur(7px);}
    .about .right {left: calc(100% - 65%); width: calc(100% - 50%);padding-top: 200px !important; }
    .about .right .txt {margin-bottom: 70px; display: flex; gap: 10px; flex-direction: column;}
    .about .right .txt dt { width: 100%;}
    .about .right .txt.on dd {}


    .service {padding-bottom: 0;}
    .service .pin_grid { display: flex; flex-direction: column;  gap: 0; }
    .service .content {margin-bottom: 120px;}
    .service .content > div {display: flex; width: 100%; gap:50px; margin-top:30px;}
    .service .content > div ul {margin-top: 15px;}
    .service .image_wrap { height: auto; min-height: auto; display: block; position: relative;  align-items: flex-start; margin-bottom: 0;}
    .service p {margin-bottom: 0; width:50%}
    .pin_grid div:nth-child(1) {order:2}
    .pin_grid div:nth-child(2) {order:1}
    .pin_grid div:nth-child(3) {order:4; margin-bottom: 0;}
    .pin_grid div:nth-child(4) {order:3}

    .with ul {display: grid;grid-auto-columns: 1fr; grid-column-gap: 40px; grid-row-gap: 40px;grid-template-columns: 1fr 1fr 1fr;}
    .with ul li {width: 100%;}
    
    .portfolio {background: #f3f3f6;}
    .portfolio ul.category {display: flex; gap: 2px; margin: 30px 0 50px 0; flex-wrap: wrap;}
    .portfolio .category li {width: calc(100% / 3 - 2px);}
    .portfolio .category li button.tablinks {width: 100%; background: #fff; padding: 12px 5px; color:#81818A; font-weight: 800; opacity: 1;}
    .portfolio .category li button.tablinks.active {background: #212121; color:#fff;}

    
    .footprints {overflow: hidden;}
    .footprints {display: flex; gap: 250px; justify-content: space-between; position: relative; flex-direction: column;}
    .footprints > div {display: flex; gap: 70px; justify-content: space-between;}
    .footprints .sentence-wrap {width: 100vw;}
    .footprints .sentence-wrap .sentence-text {width: 100%;  letter-spacing: -20px; padding-bottom: 0; font-weight: 800;}
    .footprints dl { display: flex;  gap: 0;  flex-direction: column;  align-items: center; width: 100%; }
    .footprints dl dt {text-align: center;}
    .footprints dl dd { padding-bottom: 0;}


    
    footer { padding: 28px 5vw;flex-direction: column;position: relative; } 
    footer .left {gap: 20px; flex-direction: column; } 
    footer .left ul li a {font-size: 20px; line-height: 30px;} 
    footer .right {gap: 0; } 
    footer .right .company-name { margin-bottom: 7px;} 
    footer .right p.sns {position: absolute; right: 28px; top: 28px;}
    footer .right p.sns a {width: 100%; height: 100%; display: block;}

    .progress-wrap {right:28px; bottom:28px;}


} 

 /* 반응형 스타일 */
@media (max-width: 768px) { /* 공통 스타일 */
    .pcOnly { display: none !important; } 
    .moOnly { display: block !important; } 
    .section { padding: 100px 5vw; } 
    .section .title { font-size: 32px; margin-bottom: 30px;} 
    .toggle_menu { display: block; position: fixed; top: 28px; right: 28px;} 

    header { padding: 28px 5vw; } 
    header nav ul { display: none; } 
    header nav ul li a { font-size: 24px; } 
    header nav.active { position: fixed; right: 0; top: 0; left: 0; bottom:0; background: #000; width:100%; height: 100%; padding: 40px; align-items: flex-start; justify-content: space-between; } 
    header nav.active ul { display: flex; flex-direction: column; align-items: flex-start; } 
    header nav.active ul li a {color: var(--svg-color);}
    header nav.active .toggle_menu span,
    header nav.active .toggle_menu span:before,
    header nav.active .toggle_menu span::after {background: var(--svg-color);}

    .section.visual .description { font-size: 14px; font-weight: 400;}
    
    .about-text {padding: 100px 5vw 0 5vw;}
    .about {padding: 0;}
    .about .bg img {margin: 0;width: 154%;max-width: min-content; }
    .about .pin-box.finish .bg img {filter: blur(7px);}
    .about .right {left: calc(100% - 70%); width: calc(100% - 45%);padding-top: 200px !important; }
    .about .right .txt {margin-bottom: 70px; display: flex; gap: 10px; flex-direction: column;}
    .about .right .txt dt { font-size: 28px; width: 100%;}
    .about .right .txt.on dd {font-size: 18px;}

/*     
    .service .pin_grid { grid-template-columns: auto; grid-column-gap: 0; grid-row-gap: 0; } */
    .service {padding-bottom: 0;}
    .service .pin_grid { display: flex; flex-direction: column;  gap: 0; }
    .service .content {margin-bottom: 120px;}
    .service .content > div {display: flex; width: 100%; gap:50px; margin-top:30px;}
    .service .content > div ul {margin-top: 15px;}
    .service .content > div ul li {font-size: 18px; line-height: 28px;}
    .service .image_wrap { height: auto; min-height: auto; display: block; position: relative;  align-items: flex-start; margin-bottom: 0;}
    .service p {font-size: 32px; margin-bottom: 0; width:140px}
    .pin_grid div:nth-child(1) {order:2}
    .pin_grid div:nth-child(2) {order:1}
    .pin_grid div:nth-child(3) {order:4; margin-bottom: 0;}
    .pin_grid div:nth-child(4) {order:3}


    .with ul li img {max-width: 100%;}
    
    .portfolio {background: #f3f3f6;}
    .portfolio ul.category {display: flex; gap: 2px; margin: 30px 0 50px 0; flex-wrap: wrap;}
    .portfolio .category li {width: calc(50% - 2px);}
    .portfolio .category li button.tablinks {width: 100%; background: #fff; padding: 12px 5px; color:#81818A; font-weight: 800; opacity: 1;}
    .portfolio .category li button.tablinks.active {background: #212121; color:#fff;}
    .portfolio .list ul {display: flex; gap: 40px;}
    .portfolio .list dl {margin-top: 15px; }
    
    .btn-layerClose {margin: 0 0 0 0; display: inline-block; cursor: pointer; width: 52px; height: 52px; background: url(../images/btn_close.png) no-repeat center center; position: absolute; z-index: 1100; right: 0; top: 0;}
    .dim-layer .pop-layer .box-inner {padding: 0 40px;}
    .pop-con { display: flex; gap: 20px; flex-direction: column; justify-content: flex-end; padding: 80px 40px 80px 40px; position: relative; overflow-y: auto;}
    .pop-con .title {font-size: 24px;}
    .pop-con .title br {display: none;}
    .pop-con .text-wrap {width: auto; max-width: auto; position: relative; left: 0; top: 0;}
    .pop-con .category {font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 15px;}
    .pop-con .pop-img-wrap {width: fit-content; max-width: calc(100%);}
    .pop-con .pop-img-wrap > div {flex-direction: column;}
    .pop-con .pop-img-wrap > div img,
    .pop-con .pop-img-wrap > div.multi img {width: calc(100%);}


    
    .footprints {overflow: hidden;}
    .footprints {display: flex; gap: 160px; justify-content: space-between; position: relative; flex-direction: column;}
    .footprints > div {display: flex; gap: 70px; justify-content: space-between;}
    .footprints .sentence-wrap {width: 100vw;}
    .footprints .sentence-wrap .sentence-text {width: 100%; font-size: 200px; letter-spacing: -20px; padding-bottom: 0; font-weight: 800;}
    .footprints dl { display: flex;  gap: 0;  flex-direction: column;  align-items: center; width: 100%; }
    .footprints dl dt {text-align: center; font-size:68px;}
    .footprints dl dd {font-size: 18px; padding-bottom: 0;}

    .contact .title {margin-bottom: 0;}
    .contact .description {font-size: 20px;}
    .contact .btn-wrap { display: inline-flex;  gap: 32px;  margin-top: 35px; flex-direction: column; }

    footer { padding: 28px 5vw;flex-direction: column;position: relative; } 
    footer .left {gap: 20px; flex-direction: column; } 
    footer .left ul li a {font-size: 20px; line-height: 30px;} 
    footer .right {gap: 0; } 
    footer .right .company-name { margin-bottom: 7px;} 
    footer .right p.sns {position: absolute; right: 28px; top: 28px;}
    footer .right p.sns a {width: 100%; height: 100%; display: block;}
    .progress-wrap {right:28px; bottom:28px;}
    
     }


     @media (max-width: 480px) {    
        .section .title { font-size: 24px; } 
        .about .right .txt dt { font-size: 21px;}
        .about .right .txt dd {font-size: 16px;}
        .service p {font-size: 24px; width: 110px;}  
        .service .content > div ul li {font-size: 16px; line-height: 24px;}
        .service .content > div {gap: 24px; margin-top: 15px;}
        .with ul li img {max-width: 100%;}
        .portfolio .list dl {font-size: 14px; align-items: flex-start; margin-top: 5px;}
        .portfolio .list dl dt {font-size: 14px;}
        .portfolio .list dl dd {font-size: 14px;}
        .portfolio .category li button.tablinks {font-size: 14px; font-weight: 600;}
        .footprints > div {gap:24px}
        .footprints .sentence-wrap .sentence-text {font-size: 180px;}
        .footprints dl dt {font-size: 52px;}
        .footprints dl dd {font-size: 14px;}
        .contact .description { font-size: 16px;}
        .btn-layerClose {width: 40px; height: 40px; background-size: 75% auto;}
        .pop-con .title {font-size: 21px; margin-bottom: 5px;}
        .pop-con .description {font-size: 14px;}
        footer .right p {font-size: 14px; font-weight: 500;}
        footer .left ul li a {font-size: 16px;}
        
    }