/*
Theme Name: GeneratePress Child
Template: generatepress
Author: Jason
Version: 1.0
*/

@charset "utf-8";

/* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
/* tag reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; font-family:"Cormorant Garamond", serif;}
html { width:100%; height:100%; }
body,code { font:0.75em Verdana,Dotum,AppleGothic,sans-serif; color:#353535; background:#fff; word-break:keep-all; }
body#popup { min-width:0; }
li { list-style:none; }
img { max-width:unset; }
img,fieldset { border:none; vertical-align:top; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; }
hr.layout { display:none; }
a { text-decoration:none; color:#000; }
a:hover { text-decoration:none; }
a:active { text-decoration:none; }

.displaynone { display:none; }

.dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); }

/* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

@keyframes fadeDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@keyframes bgZoomOut {
  0% {
    width: 110%; /* 시작: 조금 크게 */
  }
  100% {
    width: 100%; /* 끝: cover에 맞춰 고정 */
  }
}

#header { position:fixed; top:0; left:0; width:100%; z-index:9999; padding:34px 0;  transition:background 0.3s; }
#header .inner { display:flex; align-items:center; justify-content:space-between; width:calc(100% - 90px); margin:0 auto; }
#header .inner .logo-wrap img { width:176px; }

#header .inner .btn-hamburger { position:relative; width: 20px; height: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
#header .inner .btn-hamburger .bar { position: absolute; width: 100%; height: 2px; background-color: #fff; transition: 0.3s; }
#header .inner .btn-hamburger .bar.top { top: 0px; }
#header .inner .btn-hamburger .bar.middle { top: 8px; }
#header .inner .btn-hamburger .bar.bottom { top: 16px; }
#header .inner .btn-hamburger.active .bar.top { transform: rotate(45deg); top: 8px; }
#header .inner .btn-hamburger.active .bar.middle { opacity: 0; }
#header .inner .btn-hamburger.active .bar.bottom { transform: rotate(-45deg); top: 8px; }

#sidebar { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9998; }
#sidebar.active { display:block; }
#sidebar .inner { position:relative; height:100%; }
#sidebar .inner .menu-wrap { display:flex; flex-direction:column; height:100%; }
#sidebar .inner .menu-wrap .menu-list { position:relative; width:100%; height:25%;  opacity:0; transform: translateY(-40px);  }
#sidebar.active .inner .menu-wrap .menu-list { animation: fadeDown 1s ease forwards; }
#sidebar .inner .menu-wrap .menu-list:nth-child(1) { background:url('./img/main-bg-02.png') no-repeat; background-position:center 30%; background-size:cover; }
#sidebar .inner .menu-wrap .menu-list:nth-child(2) { background:url('./img/main-bg-03.png') no-repeat; background-position:center 30%; background-size:cover; }
#sidebar .inner .menu-wrap .menu-list:nth-child(3) { background:url('./img/main-bg-04.png') no-repeat; background-position:center 30%; background-size:cover; }
#sidebar .inner .menu-wrap .menu-list:nth-child(4) { background:url('./img/main-bg-05.png') no-repeat; background-position:center 30%; background-size:cover; }

#sidebar .inner .menu-wrap .menu-list:nth-child(1) { animation-delay: 0.1s; }
#sidebar .inner .menu-wrap .menu-list:nth-child(2) { animation-delay: 0.2s; }
#sidebar .inner .menu-wrap .menu-list:nth-child(3) { animation-delay: 0.3s; }
#sidebar .inner .menu-wrap .menu-list:nth-child(4) { animation-delay: 0.4s; }

#sidebar.active .inner .menu-wrap .menu-list  a { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:rgba(0,0,0,0.5); transition:background 0.3s; }
#sidebar.active .inner .menu-wrap .menu-list  a p { color:rgba(255,255,255,0.7); font-size:40px; transition:color 0.3s; }
#sidebar.active .inner .menu-wrap .menu-list  a:hover { background:rgba(196,177,123,0.7); }
#sidebar.active .inner .menu-wrap .menu-list  a:hover p { color:rgba(255,255,255,1); }

#footer { position:relative; background:#111; padding:44px 0 40px;}
#footer .inner { width:calc(100% - 48px); max-width:1440px; margin:0 auto; }
#footer .inner .logo-wrap { margin-bottom:28px; }
#footer .inner .logo-wrap img { width:200px; }
#footer .inner .information-wrap { display:flex; align-items:flex-end; justify-content:space-between; }
#footer .inner .information-wrap > div p { font-size:18px; line-height:1.3; color:#fff; font-weight:400;  font-family:"Pretendard"; }
#footer .inner .information-wrap .copyright { font-size:18px; line-height:1.3; color:#999;  font-family:"Pretendard"; }


/* main */
.main-wrap { position:relative; width:100%; }
.main-wrap .main-banner-wrap { position:relative; width:100%; }
.main-wrap .main-banner-wrap .bg-wrap { max-height:100vh; min-height:100vh; position:relative; overflow:hidden; }
.main-wrap .main-banner-wrap .bg-wrap video { width: 110%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
 
.main-wrap .main-banner-wrap .cont-wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:99; width:calc(100% - 48px); }
.main-wrap .main-banner-wrap .cont-wrap .subject { font-size:64px; color:#fff; margin-bottom:60px; font-weight:500; }  
.main-wrap .main-banner-wrap .cont-wrap .description { font-size:30px; color:#fff; text-align:center; line-height:1.4; }  
.main-wrap .main-banner-wrap .scroll-wrap { position:absolute; z-index:99; left:50%; bottom:56px; transform:translate(-50%,0); display:flex; flex-direction:column; align-items:center; }
.main-wrap .main-banner-wrap .scroll-wrap p { font-size:14px; font-weight:400; font-family:"Pretendard"; margin-bottom:16px; color:#fff; }
.main-wrap .main-banner-wrap .scroll-wrap img { animation: bounce 1.5s infinite; }

.main-wrap .menu-list-wrap { margin-top:-1px; } 
.main-wrap .menu-list { position:relative; background:#000; }
.main-wrap .menu-list .bg-wrap { position:relative;  width:100%; }
.main-wrap .menu-list .bg-wrap img { width:100%; }
.main-wrap .menu-list .cont-wrap { position:absolute; top:50%; left:50%; text-align:right; transform:translate(-50%,-50%); height:100vh; display:flex; flex-direction:column; justify-content:center; z-index:99; max-width:1440px; width:calc(100% - 48px); }
.main-wrap .menu-list .cont-wrap .subject { font-size:54px; color:#fff; margin-bottom:40px; font-weight:500; }  
.main-wrap .menu-list .cont-wrap .description { font-size:28px; color:#fff; line-height:1.4; margin-bottom:56px; font-weight:300; }
.main-wrap .menu-list .cont-wrap .link a { display:flex; flex-direction:row-reverse; margin:0 0 0 auto; align-items:center; width:fit-content; font-size:26px;  color:#fff; }
.main-wrap .menu-list .cont-wrap .link a img { rotate:180deg; margin-right:24px;margin-left:24px; margin-top:4px;}

.main-wrap .menu-list:nth-child(2n) .cont-wrap { text-align:left; }
.main-wrap .menu-list:nth-child(2n) .cont-wrap .link a { flex-direction:row; justify-content:flex-start; margin:0 auto 0 0; }
.main-wrap .menu-list:nth-child(2n) .cont-wrap .link a img { rotate:0deg; margin-right:24px; margin-left:24px; }

.main-banner-wrap .subject,
.main-banner-wrap .description {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 1.2s ease forwards;
}

.main-banner-wrap .subject {
    animation-delay: 0.6s;
}

.main-banner-wrap .description {
    animation-delay: 0.8s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-anim="fade-up"],
[data-anim="fade-in"] {
  opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.section.active [data-anim="fade-up"],
.section.active [data-anim="fade-in"] {
    opacity: 1;
    transform: translateY(0);
}

/* transition-delay 조절 */
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="600"] { transition-delay: 0.6s; }


/* page */
.top-banner-wrapper { position:sticky; top:0px; width:100%; height:100vh; overflow:hidden; z-index:-1; }
.top-banner-wrap { position:absolute; top:50%; left:50%; z-index:98; transform:translate(-50%,-50%); width:110%; height:100vh; display:flex; align-items:center; justify-content:center; font-size:70px; color:#fff; animation: bgZoomOut 1.5s ease-out forwards; }
.top-banner-wrap .bg { position:absolute;  width:100%; height:100%; background:#fff; right:0; top:0; animation:fadeLeft 1.5s ease forwards; }
.top-banner-wrapper .cont-wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; width:100%; color:#fff; text-align:center;}
.top-banner-wrapper .cont-wrap .title { margin-bottom:62px; font-size:64px; font-weight:600; }
.top-banner-wrapper .cont-wrap .desc { font-size:28px; width:calc(100% - 48px);  text-align:center; margin:0 auto; font-weight:300; line-height:1.4; }

.top-banner-wrapper .scroll-wrap { position:absolute; z-index:99; left:50%; bottom:56px; transform:translate(-50%,0); display:flex; flex-direction:column; align-items:center; }
.top-banner-wrapper .scroll-wrap p { font-size:14px; font-weight:400; font-family:"Pretendard"; margin-bottom:16px; color:#fff; }
.top-banner-wrapper .scroll-wrap img { animation: bounce 1.5s infinite; }

.top-banner-wrap.about { background:url('./img/n-about-top.png') no-repeat; background-size:cover; background-position:center;  }
.top-banner-wrap.team { background:url('./img/n-team-top.png') no-repeat; background-size:cover; background-position:center; }
.top-banner-wrap.teamKR { background:url('./img/team-kr-banner.png') no-repeat; background-size:cover; background-position:center; }
.top-banner-wrap.teamUS { background:url('./img/team-us-banner.png') no-repeat; background-size:cover; background-position:center; }
.top-banner-wrap.portfolio { background:url('./img/n-portfolio-top.png') no-repeat; background-size:cover; background-position:center; }
.top-banner-wrap.strategy { background:url('./img/n-strategy-top.png') no-repeat; background-size:cover; background-position:center; }
.slogan-wrap { background:#f2f2f2; padding:70px 0; }
.slogan-wrap.about { background:#fff; }
.slogan-wrap p { width:calc(100% - 48px); max-width:1440px; margin:0 auto; font-size:30px; line-height:1.6; }

.about-number-wrapper { background:#f2f2f2;  }
.about-number-wrap { width:calc(100% - 48px); margin:0 auto; max-width:1440px; padding:144px 0 210px;}
.about-number-wrap .title { font-size:54px; color:#111; margin-bottom:60px; }
.about-number-wrap .cont-wrap { display:flex; align-items:center; gap:40px; justify-content:space-between; flex-wrap:wrap; }
.about-number-wrap .cont-wrap .cont { width:50%; max-width:330px; aspect-ratio:1; box-sizing:border-box; padding:42px; background:#fff; border-radius:24px; color:#111; display:flex; flex-direction:column; align-items:center; box-shadow:1px 1px 25px 1px rgba(0,0,0,0.1); }
.about-number-wrap .cont-wrap .cont .subject { font-size:20px; font-weight:500; min-height:48px; margin-bottom:54px; text-align:center; }
.about-number-wrap .cont-wrap .cont .number { font-size:60px; font-weight:700; text-align:center; }
.about-number-wrap .cont-wrap .cont p { font-size:28px; font-weight:600; margin-top:8px; }

.contact-wrap { position:relative; width:100%; background:#fff; padding:200px 0 0; }
.contact-wrap .inner { width:calc(100% - 48px); max-width:900px; margin:0 auto; }
.contact-wrap .inner .title { font-size:42px; color:#111; margin-bottom:60px; text-align:center; line-height:80px; font-weight:600; }
.contact-wrap .inner .map-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:38px; }
.contact-wrap .inner .map-wrap #maps { background:#000; aspect-ratio:900 / 460; width:100%; max-width:900px; margin-bottom:67px; }
.contact-wrap .inner .map-wrap .cont  { width:100%; }
.contact-wrap .inner .map-wrap .cont .top > div { font-size:24px; line-height:1.5; margin-bottom:28px; font-size:24px; font-family:"Lora", "Pretendard";}
.contact-wrap .inner .map-wrap .cont .bottom { text-align:center; font-size:22px; line-height:1.6; }
.contact-wrap .inner .map-wrap .cont .bottom p {  font-family:"Prentendard" }
.page-bottom-wrap { display:flex; align-items:center; width:100%; position:relative; padding-top:172px; background:#fff; } 
.page-bottom-wrap > div { display:block; width:50%; position:relative; } 
.page-bottom-wrap .cont { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } 
.page-bottom-wrap .block > a > img { width:100%; } 
.page-bottom-wrap .cont p { font-size:40px; color:#fff; margin-bottom:36px; font-weight:600; } 
.page-bottom-wrap .cont a { display:flex; align-items:center; justify-content:center; color:#fff; gap:8px; font-size:12px; font-family:"Prentendard"; }
.location-wrap { width:calc(100% - 48px); margin:0 auto; padding:240px 0; display:flex; align-items:center; justify-content:space-between; max-width:1440px; gap:80px; }
.location-wrap .location { position:relative; width:50%; max-width:680px; }
.location-wrap .location > img { width:100%; }
.location-wrap .location a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; position:absolute; top:0; left:0; transition:all 0.3s; z-index:10; }
.location-wrap .location p { font-size:64px; font-weight:700; color:#fff; z-index:10; }
.location-wrap .location a img { position:absolute; bottom:36px; right:45px; z-index:10; opacity:0; transition:all 0.3s; }
.location-wrap .location a:hover { background:rgba(0,0,0,0.6); }
.location-wrap .location a:hover img { opacity:1; }


/* team */
.member-wrap { position:relative; width:calc(100% - 48px); max-width:1440px; margin:0 auto; padding:200px 0 0; }
.member-wrap .tab-wrap { display:flex; align-items:center; justify-content:center; gap:48px; margin-bottom:240px;}
.member-wrap .tab-wrap a { width:50%; max-width:350px; padding:24px 0; display:block; text-align:center; font-size:36px; font-weight:700; color:#999; box-sizing:border-box; border-radius:100px; background:#f2f2f2; border:1px solid #999;}
.member-wrap .tab-wrap a.active { background:#c4b17b; color:#fff; border:1px #c4b17b; }
.member-wrap .member-title { font-size:30px; font-weight:bold; margin-bottom:50px; }
.member-wrap .team-list { display:flex; flex-direction:column; gap:50px; }
.list.team {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.member-card {
    font-size:0;
    line-height:0;
    width: calc((100% - 12px) / 2);
    max-width:320px;
    position:relative;
    cursor: pointer;
    transition:all 0.3s;
}
.member-card img  { filter:brightness(1); transition:all 0.3s; width:100%; }
.member-card:hover img { filter:brightness(1); }
.member-card .cont { position:absolute; z-index:10; bottom:18px; left:28px; }
.member-card .cont p { line-height:1.3;}
.member-card .cont .role { font-size:18px; color:#fff; margin-bottom:12px; } 
.member-card .cont .name { font-size:28px; font-weight:500; color:#fff; } 
.member-detail {
  overflow: hidden;
  width:100%;
  max-height: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  background: #fbfbfb;
  opacity: 0;
  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.07);
}

.member-detail.active {
  opacity: 1;
}

.member-detail .detail-content {
  position: relative;
  padding: 30px 47px 36px;
  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.07);
}

.member-card.dimmed {
    filter: brightness(0.2);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.detail-close {
    position: absolute;
    top: 47px;
    right: 47px;
    width:20px;
    height:20px;
    border: none;
    background:url('./img/ico-close.svg') no-repeat center;
    background-size: 100%;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}

button.detail-close:hover { background-color:unset; }

.member-detail .name-wrap { display:flex; align-items:flex-end; margin-bottom:24px; }
.member-detail .name-wrap h3 { font-size:32px; color:#111; font-weight:600; }
.member-detail .name-wrap p { font-size:18px; color:#111; margin-left:16px; font-weight:300; margin-bottom:4px; }
.member-detail .detail-columns { display:flex; align-items:flex-start; flex-direction:column; }
.member-detail .detail-columns > div:first-child { width:100%; margin-bottom:30px;}
.member-detail .detail-columns > div h4 { font-size:18px; font-weight:600; margin-bottom:4px; color:#111;}
.member-detail .detail-columns > div p { font-size:16px; line-height:1.5; white-space:pre-line; color:#111; font-weight:300; }
.member-detail .detail-columns > div:first-child p { width:94%;}
.member-detail .detail-columns > div:last-child { margin-top:10px; }
.member-wrapper { background:#fff; padding-bottom:170px; }

.team.us .member-card .bg { position:absolute; top:0; left:0; z-index:9; width:100%; height:100%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); }

/* team (end) */

.portfolio-wrapper { background:#fff; }
.portfolio-wrap { padding:240px 0 100px; width:calc(100% - 48px); max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:60px; flex-wrap:wrap; }
.portfolio-wrap .portfolio { position:relative; width:calc((100% - 120px) / 3); max-width:360px; aspect-ratio:1; font-size:0; line-height:0; display:flex; align-items:center; justify-content:center; border:1px solid #999; box-sizing:border-box; }
.portfolio-wrap .portfolio img { width:90%; margin:0 auto; display:block; }
.portfolio-wrap .portfolio:nth-child(1) img { max-width:245px; }
.portfolio-wrap .portfolio:nth-child(2) img  { max-width:180px; }
.portfolio-wrap .portfolio:nth-child(3) img  { max-width:253px; }
.portfolio-wrap .portfolio :hover .bg { opacity:1; }
.portfolio-wrap .portfolio .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(196,177,123,0.93); color:#fff; display:flex; flex-direction:column; justify-content:center; line-height:1.3; padding:44px 32px; box-sizing:border-box; opacity:0; transition:all 0.3s; }
.portfolio-wrap .portfolio .bg .title { font-size:26px; font-weight:600; text-align:center; margin-bottom:0; }
.portfolio-wrap .portfolio .bg .cont { display:flex; align-items:center; font-size:24px; font-weight:400; font-family:"Pretendard"; margin-top:8px; }
.portfolio-wrap .portfolio .bg .cont p { font-weight:600; margin-right:12px; }

.new-portfolio-wrap { padding:240px 0 100px; width:calc(100% - 48px); max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:60px; flex-wrap:wrap; }
.new-portfolio-wrap a { position:absolute; top:0; left:0; z-index:100; width:100%; height:100%; background:#111; display:flex; align-items:center; justify-content:center; opacity:0; transition:all 0.3s; }
.new-portfolio-wrap .portfolio:hover a { opacity:1; }
.new-portfolio-wrap .portfolio { position:relative; width:calc((100% - 120px) / 3); max-width:340px; box-shadow:1px 1px 4px 2px rgba(0,0,0,0.08); box-sizing:border-box; }
.new-portfolio-wrap .portfolio .img-wrap { position:relative; width:100%; }
.new-portfolio-wrap .portfolio .img-wrap img { width:100%; }
.new-portfolio-wrap .portfolio .inner { padding:16px; padding-right:8px; }

.new-portfolio-wrap .portfolio .inner .title-wrap .title { color:#111; font-size:24px; font-weight:700; margin-bottom:12px; }
.new-portfolio-wrap .portfolio .inner .title-wrap .desc { color:#c4b17b; font-size:18px; line-height:1.1; font-weight:600; min-height:40px; }
.new-portfolio-wrap .portfolio .inner .list-wrap { padding:16px 0 20px; }
.new-portfolio-wrap .portfolio .inner .list-wrap li { position:relative; padding-left:24px; font-size:16px; color:#111; line-height:1.5; list-style:none; font-weight:300; }
.new-portfolio-wrap .portfolio .inner .list-wrap li::before {
  content: "";
  position: absolute;
  left: 12px;               /* ← X 위치 */
  top: 10px;              /* ← Y 위치 */
  width: 3px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;    /* 원형 마커 */
}
.new-portfolio-wrap .portfolio .inner .desc-wrap { background:#fff; padding:0; padding-right:8px; color:#111; padding-right:16px; font-size:16px; line-height:1.4; font-weight:300; min-height:156px; }


.portfolio-popup-wrap { position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; display:flex; align-items:center; background:rgba(0,0,0,0.3); display:none; }
.portfolio-popup-wrap .popup { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); box-sizing:border-box; position:relative; padding:62px 40px 44px; width:calc(100% - 48px); max-width:680px; background:#fff; display:none; }
.portfolio-popup-wrap .popup .close-wrap { cursor:pointer; position:absolute; top:24px; right:26px; }
.portfolio-popup-wrap .popup .title-wrap { padding-bottom:8px; border-bottom:1px solid #111; }
.portfolio-popup-wrap .popup .title-wrap .title { color:#111; font-size:32px; font-weight:600; margin-bottom:0px; }
.portfolio-popup-wrap .popup .title-wrap .desc { color:#c4b17b; font-size:18px; line-height:2; font-weight:300; font-family:"Pretendard";  }
.portfolio-popup-wrap .popup .list-wrap { padding:20px 0; margin-bottom:28px; }
.portfolio-popup-wrap .popup .list-wrap li { position:relative; padding-left:24px; font-size:16px; color:#111; line-height:1.5; list-style:none; font-family:"Pretendard"; font-weight:300; }
.portfolio-popup-wrap .popup .list-wrap li::before {
  content: "";
  position: absolute;
  left: 12px;               /* ← X 위치 */
  top: 10px;              /* ← Y 위치 */
  width: 3px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;    /* 원형 마커 */
}
.portfolio-popup-wrap .popup .desc-wrap { background:#fff; padding:0; color:#111; padding-right:0; font-size:16px; line-height:1.5; font-family:"Pretendard"; font-weight:300; }
.portfolio-popup-wrap .popup a { display:flex; align-items:center; justify-content:flex-end; gap:20px; font-size:18px; line-height:2; margin-top:20px; }
.strategy-wrapper {background-image: linear-gradient(to bottom, #f6f6f6 50%, #fff 50%);  }
.strategy-wrap {  padding:210px 0 0; width:calc(100% - 48px); max-width:1220px; margin:0 auto; }
.strategy-wrap .title-wrap { width:calc(100% - 48px); margin: 0 auto 110px; text-align:center; } 
.strategy-wrap .title-wrap .desc { font-size:28px; line-height:50px; color:#c4b17b; font-weight:bold; }
.strategy-wrap .title-wrap .title { font-size:38px; font-weight:bold; line-height:50px; color:#111; }
.strategy-wrap .list-wrap { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.strategy-wrap .strategy { position:relative; width:calc((100% - 140px) / 3); max-width:360px;}
.strategy-wrap .strategy .img-wrap { position:relative; width:100%; margin-bottom:26px; }
.strategy-wrap .strategy .img-wrap img { width:100%; margin:0 auto; display:block; }
.strategy-wrap .strategy .cont-wrap .title { font-size:26px; font-weight:700; }
.strategy-wrap .strategy .cont-wrap .desc { padding:22px 0 22px 15px; font-size:20px; position:relative; font-weight:300;}
.strategy-wrap .strategy .cont-wrap .desc::before { content:""; position:absolute; top:32px; left:0; width:5px; height:5px; background:#d9d9d9; }

.focus-wrap { position:relative; padding:180px 0 0; background:#fff; }
.focus-wrap .title-wrap { width:calc(100% - 48px); margin: 0 auto 110px; text-align:center; } 
.focus-wrap .title-wrap .desc { font-size:28px; line-height:50px; color:#c4b17b; font-weight:bold; }
.focus-wrap .title-wrap .title { font-size:38px; line-height:50px; color:#111; font-weight:bold;}
.focus-wrap .list-wrap { position:relative; width:100%; }
.focus-wrap .list-wrap .list { position:relative; width:100%; height:420px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.focus-wrap .list-wrap .list:nth-child(1) { background:url('./img/st-b-01.png') no-repeat; background-size:cover; background-position:center; }
.focus-wrap .list-wrap .list:nth-child(2) { background:url('./img/st-b-02.png') no-repeat; background-size:cover; background-position:center; }
.focus-wrap .list-wrap .list:nth-child(3) { background:url('./img/st-b-03.png') no-repeat; background-size:cover; background-position:center; }
.focus-wrap .list-wrap .list .title { font-size:36px; color:#fff; font-weight:700; margin-bottom:16px; text-align:center; }
.focus-wrap .list-wrap .list .desc { font-size:24px; color:#fff; line-height:1.3; text-align:center;  font-weight:400; }

.strength-wrap { position:relative; width:100%; background:#fff; }
.strength-wrap .inner { width:calc(100% - 48px); max-width:1440px; padding:180px 0 110px; margin:0 auto; }
.strength-wrap .title-wrap { text-align:center; } 
.strength-wrap .title-wrap .desc { font-size:28px; line-height:50px; color:#c4b17b; font-weight:bold; }
.strength-wrap .title-wrap .title { font-size:38px; line-height:50px; color:#111; font-weight:bold; }

.strength-wrap .cont-wrap { position:relative; width:100%; background:#111; height:700px; }
.strength-wrap .cont-wrap .swiper-slide { display: flex; align-items: flex-start; gap:20px; }
.strength-wrap .cont-wrap .swiper-slide > div { width:50%; color:#fff; position:relative; }
.strength-wrap .cont-wrap .swiper-slide .slide-left { padding-top:124px; display:flex; padding-left:24px; flex-direction:column; width:calc(100% - 48px); max-width:656px; margin:0 44px 0 auto; }
.strength-wrap .cont-wrap .swiper-slide .slide-left .cont {  height:382px; }
.strength-wrap .cont-wrap .swiper-slide .slide-left .title { font-size:36px; font-weight:600; margin-bottom:34px; }
.strength-wrap .cont-wrap .swiper-slide .slide-left .desc { font-size:18px; font-weight:400;   font-weight:300; }
.strength-wrap .cont-wrap .swiper-slide .slide-right { font-size:0; line-height:0; }
.strength-wrap .cont-wrap .swiper-slide .slide-right img { width:120%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.strength-wrap .cont-wrap .swiper-slide .slide-right { position:relative; height:100%; min-height:700px; overflow:hidden; }
.strength-wrap .cont-wrap .swiper-slide .slide-right img { width:120%; transition:all 1.5s; }
.strength-wrap .cont-wrap .swiper-slide.swiper-slide-active .slide-right img { width:105%; }

.strength-wrap .navigation-wrap { display: flex; align-items: flex-start; gap:20px; position:absolute; top:0; left:0; width:100%; height:100%; z-index:100; }
.strength-wrap .navigation-wrap .bg { width:50%; height:100px; }
.strength-wrap .navigation-wrap .navigation { padding-bottom:120px; height:100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; width:calc(100% - 48px); max-width:656px; margin:0 44px 0 auto; z-index:100; }
.strength-wrap .navigation-wrap .navigation .wrap { display:flex; align-items:center; }
.strength-wrap .navigation-wrap .navigation .wrap .swiper-button-prev:after, 
.strength-wrap .navigation-wrap .navigation .wrap .swiper-button-next:after { display:none; }
.strength-wrap .navigation-wrap .navigation .wrap .swiper-button-next, 
.strength-wrap .navigation-wrap .navigation .wrap .swiper-button-prev { position:relative; top:unset; bottom:unset; left:unset; right:unset; margin:unset; width:auto; }
.strength-wrap .navigation-wrap .navigation .wrap .swiper-button-prev { margin-right:17px; }
.strength-wrap .navigation-wrap .navigation .swiper-pagination { position:relative; top:unset; bottom:unset; left:unset; right:unset; margin:unset; width:auto; }
.strength-wrap .navigation-wrap .navigation .swiper-pagination { margin-left:24px; color:#999; font-size:16px;  }
.strength-wrap .navigation-wrap .navigation .swiper-pagination .active { color:#c4b17b; }

@media (min-width:769px) and (max-width:1366px) {
    #sidebar.active .inner .menu-wrap .menu-list a p { font-size:26px; }
    
    .main-wrap .main-banner-wrap .bg-wrap video { width:auto; height:100vh; }
    .main-wrap .main-banner-wrap .cont-wrap .subject { font-size:40px; margin-bottom:32px;}
    .main-wrap .main-banner-wrap .cont-wrap .description { font-size:20px; }
    .main-wrap .main-banner-wrap .scroll-wrap p { font-size:12px; }
    
    .main-wrap .menu-list .bg-wrap { width:auto; height:100vh; }
    .main-wrap .menu-list .bg-wrap img { width:auto; height:100vh; }
    .main-wrap .menu-list .cont-wrap { width:80%; }
    .main-wrap .menu-list .cont-wrap .subject { font-size:36px; }
    .main-wrap .menu-list .cont-wrap .description { font-size:20px; }
    .main-wrap .menu-list:nth-child(2n) .cont-wrap .link a { font-size:18px; }
    
    .top-banner-wrapper .cont-wrap .title { font-size:40px; margin-bottom:24px; }
    .top-banner-wrapper .cont-wrap .desc { font-size:20px; }
    .top-banner-wrapper .scroll-wrap p { font-size:12px; }
    
    .about-number-wrap .cont-wrap .cont { width:calc((100% - 120px) / 4); padding:20px; }
    .about-number-wrap .cont-wrap .cont .subject { margin-bottom:24px; font-size:16px; }
    .about-number-wrap .cont-wrap .cont p { font-size:20px; }
    .about-number-wrap .cont-wrap .cont .number { font-size:36px; }
    
    .page-bottom-wrap .cont p { font-size:26px; }
    
    .contact-wrap .inner .title { margin-bottom:36px; font-size:32px; }
    .contact-wrap .inner .map-wrap .cont .top { margin-bottom:42px; }
    .contact-wrap .inner .map-wrap .cont .bottom  { font-size:16px; }
    
    .strength-wrap .navigation-wrap .navigation .wrap { padding-left:24px; }
    .strategy-wrap .strategy .cont-wrap .title { min-height:92px; }
}

@media (min-width:1025px) and ( max-width:1366px) {
    .about-number-wrap .cont-wrap .cont .subject { margin-bottom:36px; font-size:20px; }
    .about-number-wrap .cont-wrap .cont p { font-size:24px; }
    .about-number-wrap .cont-wrap .cont .number { font-size:54px; }
    
    .strength-wrap .cont-wrap .swiper-slide .slide-right { height:500px; }
    .strength-wrap .cont-wrap { height:auto; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .title { font-size:20px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .desc { font-size:16px; width:80%; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left { width:50%; padding-top:100px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .cont { height:280px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-right { min-height:300px; }
    .strength-wrap .cont-wrap .swiper-slide.swiper-slide-active .slide-right img { width:120%; }
    .strength-wrap .navigation-wrap .navigation { height:410px; padding-bottom:0;}
    .strength-wrap .cont-wrap .swiper-slide .slide-left { margin-right:0; width:50%; }
    .strength-wrap .cont-wrap .swiper-slide { gap:0; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left { box-sizing:border-box; }
    
    .strategy-wrap .strategy .cont-wrap .title { min-height:unset; }
    
    .new-portfolio-wrap { gap:24px; }    
    .new-portfolio-wrap .portfolio { width:calc((100% - 48px) / 3) }
    .new-portfolio-wrap .portfolio .inner .list-wrap { min-height:141px; box-sizing:border-box; }
    .new-portfolio-wrap .portfolio .inner .list-wrap li { font-size:14px; }
    .new-portfolio-wrap .portfolio .inner .desc-wrap { font-size:14px; }
}

@media (min-width:769px) and ( max-width:1024px ) { 
    .member-wrap { padding-top:140px; }
    .member-card { max-width:280px; }
    .strategy-wrap .strategy .cont-wrap .title { font-size:32px; min-height:92px; }
    .member-card .cont .role { margin-bottom:0; font-size:16px; }
    .member-detail .name-wrap h3 { font-size:24px; }
    .member-detail .name-wrap p { font-size:16px; }
    .detail-close { top:30px; right:30px; }
    .member-detail .detail-columns > div p { font-size:14px; }
    .member-card .cont .name { font-size:24px; }
    .member-card .cont { bottom:24px; left:20px; }
    .member-wrap .member-title { font-size:28px; }
    .page-bottom-wrap .cont p { margin-bottom:20px; }
    .portfolio-wrap .portfolio { width:240px; }
    .portfolio-wrap { justify-content:center; gap:24px; }
    .strategy-wrap .list-wrap { justify-content:center; gap:24px; }
    
    .strength-wrap .swiper { height:437px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-right { height:437px; }
    .strength-wrap .cont-wrap { height:auto; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .title { font-size:20px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .desc { font-size:16px; width:80%; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left { width:50%; padding-top:60px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .cont { height:280px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-right { min-height:300px; width:50%; }
    .strength-wrap .cont-wrap .swiper-slide.swiper-slide-active .slide-right img { width:120%; }
    .strength-wrap .navigation-wrap .navigation { height:410px; padding-bottom:0;}
    .strength-wrap .cont-wrap .swiper-slide .slide-left { margin-right:0; width:50%; box-sizing:border-box; }
    .strength-wrap .cont-wrap .swiper-slide { gap:0; }

    .strategy-wrap .strategy .cont-wrap .title { min-height:unset; }
    
    .new-portfolio-wrap { gap:24px; }    
    .new-portfolio-wrap .portfolio { width:calc((100% - 48px) / 3) }
    .new-portfolio-wrap .portfolio .inner .title-wrap .title { font-size:16px; }
    .new-portfolio-wrap .portfolio .inner .title-wrap .desc { font-size:14px; }
    .new-portfolio-wrap .portfolio .inner .list-wrap { min-height:120px; box-sizing:border-box; }
    .new-portfolio-wrap .portfolio .inner .list-wrap li { font-size:12px; }
    .new-portfolio-wrap .portfolio .inner .desc-wrap { font-size:12px; }
    
    #footer .inner .information-wrap > div p { font-size:14px; }
    #footer .inner .information-wrap .copyright { font-size:14px; }
}

@media (max-width:768px) {
	#header { padding:16px 0; }
    #header .inner { width:calc(100% - 48px); }
    #header .inner .logo-wrap img { width:124px; }
    
    #sidebar.active .inner .menu-wrap .menu-list  a p { font-size:28px; color:#fff; }
    
    #footer .inner .logo-wrap img { width:124px; }
    #footer .inner .information-wrap { flex-direction:column; align-items:flex-start; }
    #footer .inner .information-wrap > div { margin-bottom:12px; } 
    #footer .inner .information-wrap > div p { font-size:12px; }
    #footer .inner .information-wrap .copyright { font-size:12px; }
    
    .main-wrap .main-banner-wrap .bg-wrap video { width:auto; height:100%; }
    .main-wrap .main-banner-wrap .cont-wrap { top:40%; }  
    .main-wrap .main-banner-wrap .cont-wrap .subject { font-size:24px; }
    .main-wrap .main-banner-wrap .cont-wrap .description { font-size:16px; }
    
    .main-wrap .menu-list .bg-wrap { height:100vh; overflow:hidden; }
    .main-wrap .menu-list .bg-wrap img { height:100%; width:auto;  }
    .main-wrap .menu-list .cont-wrap { top:40%; }
    
    .main-wrap .menu-list .cont-wrap .subject { font-size:28px; }  
    .main-wrap .menu-list .cont-wrap .description { font-size:16px; }
    .main-wrap .menu-list .cont-wrap .link a { font-size:14px; }
    .main-wrap .menu-list .cont-wrap .link a img { width:16px; margin-left:12px; margin-right:12px;  }
    .main-wrap .menu-list:nth-child(2n) .cont-wrap .link a img { margin-right:12px; margin-left:12px; }
    
    .top-banner-wrapper .cont-wrap .desc { font-size:16px; }
    .top-banner-wrapper .cont-wrap .title { font-size:32px; margin-bottom:24px; }

    .top-banner-wrapper { height:100vh; }
    
    .page-bottom-wrap { flex-direction:column; margin-top:0; padding-top:80px; }
    .page-bottom-wrap > div { width:100%; }
    .page-bottom-wrap .cont p { font-size:24px; margin-bottom:12px; }
    
    .slogan-wrap { padding:32px 0; font-size:14px; line-height:1.3; }
    .slogan-wrap p { font-size:14px; }
    .about-number-wrap { padding:80px 0; }
    .about-number-wrap .title { font-size:28px; margin-bottom:32px ; }
    .about-number-wrap .cont-wrap { gap:16px; }
    .about-number-wrap .cont-wrap .cont { padding:20px; width:calc((100% - 16px) / 2);} 
    .about-number-wrap .cont-wrap .cont .subject { font-size:14px; margin-bottom:20px; min-height:32px; }
    .about-number-wrap .cont-wrap .cont .number { font-size:32px; }
    .about-number-wrap .cont-wrap .cont p { font-size:16px;  margin-top:2px; }
    .contact-wrap { padding:80px 0 0; }
    .contact-wrap .inner .title { font-size:28px; margin-bottom:32px; }
    .contact-wrap .inner .map-wrap { gap:20px; }
    .contact-wrap .inner .map-wrap .cont .top { margin-bottom:24px; }
    .contact-wrap .inner .map-wrap .cont .top > div { font-size:16px; }
    .contact-wrap .inner .map-wrap .cont .bottom { font-size:16px; }
    
    .location-wrap { padding:80px 0; flex-direction:column; gap:24px; }
    .location-wrap .location { width:100%; }
    .location-wrap .location p { font-size:24px; }
    .location-wrap .location a img  { width:24px; }
    
    .member-wrap { padding:48px 0; }
    .member-wrap .tab-wrap { gap:16px; margin-bottom:80px; }
    .member-wrap .tab-wrap a { font-size:16px; padding:12px 0; }
    
    .list.team { gap:12px; }
    .member-wrap .member-title { font-size:20px; margin-bottom:24px; }
    .member-wrap .team-list { gap:12px; }
    .member-card .cont { bottom:12px; left:12px; }
    .member-card .cont .role { font-size:14px; margin-bottom:4px; }
    .member-card .cont .name { font-size:16px; }
    .member-detail .name-wrap { margin-bottom:24px; }
    .member-detail .name-wrap h3 { font-size:20px; }
    .member-detail .name-wrap p { font-size:14px; } 
    .member-detail .detail-content { padding:24px; }
    .member-detail .detail-columns { flex-direction:column; }
    .member-detail .detail-columns > div { width:100%; margin-bottom:24px; }
    .member-detail .detail-columns > div h4 { font-size:16px; margin-bottom:8px; }
    .member-detail .detail-columns > div p { font-size:14px; }
    
    .detail-close { top:24px; right:24px; width:16px; height:16px; }
    .detail-close img { width:16px; }
    
    .new-portfolio-wrap { padding:80px 0 80px; gap:24px; flex-direction:column; align-items:center; }
    .new-portfolio-wrap .portfolio { width:100%; }
    .new-portfolio-wrap .portfolio .bg { padding:12px; }
    .new-portfolio-wrap .portfolio .bg .title { font-size:14px; margin-bottom:8px; }
    .new-portfolio-wrap .portfolio .bg .cont { font-size:12px; margin-top:4px; }
    
    .portfolio-popup-wrap { width:100%; }
    .portfolio-popup-wrap .popup { padding:60px 24px 40px; box-shadow:1px 1px 2px 0px rgba(0,0,0,0.1); }
    .portfolio-popup-wrap .popup .title-wrap .title { font-size:20px; }
    .portfolio-popup-wrap .popup .title-wrap .desc { font-size:14px; line-height:1.3; }
    .portfolio-popup-wrap .popup .list-wrap li { font-size:14px; }
    .portfolio-popup-wrap .popup .desc-wrap { padding:12px !important; font-size:14px; }
    .portfolio-popup-wrap .popup a { font-size:14px; line-height:1.3; }
    .portfolio-popup-wrap .popup a img { width:20px; }
    
    .strategy-wrap { padding:80px 0; }
    .strategy-wrap .title-wrap { margin-bottom:40px; }
    .strategy-wrap .title-wrap .desc { font-size:20px; line-height:1.4; }
    .strategy-wrap .title-wrap .title { font-size:28px; line-height:1.4;  }
    
    .strategy-wrap .strategy .img-wrap { margin-bottom:16px; }
    .strategy-wrap .strategy .cont-wrap .title { font-size:20px; }
    .strategy-wrap .strategy { width:100%; }
    .strategy-wrap .strategy .cont-wrap .desc { font-size:16px; padding:16px 12px; }
    .strategy-wrap .strategy .cont-wrap .desc::before { top:24px; width:4px; height:4px; }
    .strategy-wrap .list-wrap { justify-content:center; }
    
    .focus-wrap { padding:80px 0;  }
    .focus-wrap .title-wrap { margin-bottom:40px; }
    .focus-wrap .title-wrap .desc { font-size:20px; line-height:1.4; }
    .focus-wrap .title-wrap .title { font-size:28px; line-height:1.4;  }
    .focus-wrap .list-wrap .list { height:320px; }
    .focus-wrap .list-wrap .list .title { font-size:20px; margin-bottom:28px; }
    .focus-wrap .list-wrap .list .desc { font-size:14px; }
    
    .strength-wrap .inner { padding:80px 0 40px; }
    .strength-wrap .inner .title-wrap .desc { font-size:20px; line-height:1.4; }
    .strength-wrap .inner .title-wrap .title { font-size:28px; line-height:1.4;  }
    
    .strength-wrap .cont-wrap { height:auto; }
    .strength-wrap .cont-wrap .swiper-slide { flex-direction:column-reverse; }
    .strength-wrap .cont-wrap .swiper-slide > div { width:calc(100% - 48px) !important;  }
    .strength-wrap .cont-wrap .swiper-slide .slide-right { width:100% !important; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left { padding-left:0; }    
    .strength-wrap .cont-wrap .swiper-slide .slide-right {  min-height:unset; }
    .strength-wrap .cont-wrap .swiper-slide .slide-right img { width:100% !important; position:relative; top:unset; left:unset; transform:unset; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left { padding-top:0; margin:0 auto; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .title { font-size:22px; margin-bottom:24px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .desc { font-size:16px; }
    .strength-wrap .navigation-wrap { position:relative; margin-left:24px; margin-top:12px; }
    .strength-wrap .navigation-wrap .navigation { padding-bottom:40px; }
    .strength-wrap .cont-wrap .swiper-slide .slide-left .cont { height:auto; }
    .strength-wrap .navigation-wrap  .bg {  display:none; }

}

@media ( min-width:490px ) and (max-width:768px) {
    .about-number-wrap .cont-wrap .cont { padding:42px; }
	.about-number-wrap .cont-wrap .cont .number { font-size:60px; }
    .about-number-wrap .cont-wrap .cont .subject { font-size:20px; min-height:54px; margin-bottom:59px; }
    .about-number-wrap .cont-wrap .cont p { font-size:28px; }
}