.research_process {background-image:url('/assets/images/research/process-main_bg_circle.png');width:1223px; height:263px}
.plus-btn{
    position:absolute!important;
    top:25px;
    right:25px;
    width:52px;
    height:52px;
    border:0;
    border-radius:50%;
    background:#eee;
    position:relative;
    cursor:pointer;
}

._processCircle div:nth-child(4),
._processCircle div:nth-child(5) 
  { padding-right:10px}

.plus-btn::before,
.plus-btn::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    background:#666;
    transform:translate(-50%, -50%);
}

.plus-btn::before{
    width:24px;
    height:3px;
}

.plus-btn::after{
    width:3px;
    height:24px;
}

.whygmnCard
{    

    width:460px;
    height:460px;
    padding:110px 0px 0px 50px;
    background-color:#f6f7f8;
    border-radius:30px;
    text-align:left;
    
}

.whygmnCard .title { font-size:30px; font-family:'Noto Sans bold'}
.whygmnCard .content { font-size:18px; line-height:21px; color:#808080}


#certModal{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;
}


.certWrap{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
  
}

.collaWrap
{
    position:relative;
    background-color:#dcddd8;
    border-radius:18px;
    
}


._certCover{
    position:absolute;  
    cursor:pointer;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.72);
    display:none;
    z-index:10;
}


.certModalWrap{
    position:relative;
    display:inline-block;
}
#certModal img{
    max-width:80vw;
    max-height:90vh;
    object-fit:contain;

    box-shadow:0 0 30px rgba(0,0,0,0.5);
}

#btnClose{
    position:absolute;
    top:-17px;
    right:-17px;
    
    width:40px;
    height:40px;
    line-height:31px;

    border-radius:50%;
    background:#fff;
    color:#4b4b4b;
    border:solid 1px #4b4b4b;

    font-size:32px;
    text-align:center;
    cursor:pointer;
    
}



#btnPrev,
#btnNext{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:35px;
    height:35px;
    line-height:20px;

    border-radius:50%;
    background:rgba(160,160,160,0.75);
    color:#fff;

    font-size:42px;
    text-align:center;
    cursor:pointer;
    user-select:none;
    z-index:20;
}

#btnPrev{
    left:calc(50% - 500px);
}

#btnNext{
    right:calc(50% - 500px);
}



._processCircle > div {
    font-family:'Noto Sans KR';
    width:25%;
    color:#FFF;
    font-size:20px;
}


.colla-img{
    cursor:pointer;
    overflow:hidden;
}

.colla-img img{
    transition:transform .25s ease;
}

.colla-img img:hover{
    transform:scale(1.03);
}

.colla-item-title {font-family:'Noto Sans bold';font-size:21px; color:#000; padding-top:15px}
.colla-item-title_sub {font-size:17px; color:#a0a4bc;  letter-spacing:-1px}




/* [2026-08-12] 상세 콘텐츠 프레임 = 상단 네비바(로고~아이콘)와 동일 정렬 */
.detail-frame{
    width:min(1447px, calc(100vw - 48px));
    margin:0 auto;
    padding-left:35px;
    padding-right:40px;
    box-sizing:border-box;
}

.product-section{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:48px 0 20px;
    border-top:1px solid #ececec;

    display:flex;
    align-items:center;
    gap:56px;

    font-family:'Noto Sans KR';
}


.product-section-gallary{
    width:100%;
    margin:0 auto;
    padding:25px 0 20px;
    box-sizing:border-box;
    border-top:1px solid #ddd;

    display:grid;
    grid-template-columns:1fr;
    gap:28px;

    font-family:'Noto Sans KR';
}
.product-section-gallary > div{
    width:100%;
    aspect-ratio:16/9;
    border-radius:16px;
    overflow:hidden;
    background:#f4efe6;
}
.product-section-gallary img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


.product-img-box{
    flex:1 1 55%;
    min-width:0;
    max-width:100%;
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFF;
    color:#999;
    font-size:22px;
    line-height:1.5;
    text-align:center;
    overflow:hidden;
}
.product-img-box img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.product-info{
    flex:1 1 45%;
    min-width:0;
    padding-left:30px;
    justify-content:center
}

@media (max-width:900px){
    .product-section{ flex-direction:column; align-items:stretch; gap:28px; }
    .product-info{ flex:1 1 auto; width:100%; padding-left:0; }
    .product-img-box{ flex:1 1 auto; width:100%; }
    .product-section-gallary{ grid-template-columns:1fr; padding:25px 0 20px; }
}

.product-label{
    font-family:'Noto Sans Bold';
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#b98a34;
    margin-bottom:16px;
}

.product-title{
    font-family:'Noto Sans Bold';
    font-size:32px;
    color:#141110;
    line-height:1.15;
    letter-spacing:-.5px;
    margin-bottom:22px;
}

.product-title span{
    font-family:'Noto Sans KR';
    font-size:16px;
    font-weight:400;
    color:#b0b0b0;
    margin-left:10px;
}

.product-desc{
    font-family:'Noto Sans KR';
    font-weight:500;
    font-size:17px;
    line-height:1.75;
    color:#444;
    margin-bottom:28px;
}

.product-list{
    list-style:none;
    padding:22px 0 0;
    margin:0 0 40px;
    border-top:1px solid #eee;
}

.product-list li{
    position:relative;
    font-family:'Noto Sans KR';
    font-size:16px;
    line-height:1.95;
    color:#555;
    padding-left:16px;
}

.product-list li::before{
    content:'';
    position:absolute;
    left:0; top:14px;
    width:5px; height:5px;
    border-radius:50%;
    background:#b98a34;
}

.product-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:186px;
    height:54px;
    padding:0 30px;
    border:0;
    border-radius:999px;
    background:#141110;
    color:#fff;
    font-family:'Noto Sans Bold';
    font-size:16px;
    letter-spacing:-.2px;
    cursor:pointer;
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.product-btn:hover{
    transform:translateY(-2px);
    background:#000;
    box-shadow:0 12px 28px -12px rgba(0,0,0,.45);
}


.process-wrap{
    width:1400px;
    margin:0 auto;

    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 0px;

    overflow:hidden;
}

.process-circle{
    width:310px;
    height:310px;

    border-radius:50%;

   background:rgba(23, 39, 53, 0.9);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    position:relative;

    margin-left:-34px;

    font-family:'Noto Sans KR';

    z-index:1;
}

.process-circle:first-child{
    margin-left:0;
}

.process-circle:nth-child(1){ z-index:5; }
.process-circle:nth-child(2){ z-index:4; }
.process-circle:nth-child(3){ z-index:3; }
.process-circle:nth-child(4){ z-index:2; }
.process-circle:nth-child(5){ z-index:1; }


/* 기존 가짜 겹침 제거 */
.process-circle::after{
    display:none;
}

.process-step{
    min-width:70px;
    height:22px;

    padding:0 14px;

    border-radius:30px;

    background:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-weight:700;
    font-size:12px;

    color:#0057ff;

    margin-bottom:28px;
}

.process-title{
    font-weight:700;
    font-size:25px;

    line-height:1;

    color:#fff;

    margin-bottom:26px;
}

.process-sub-title{
    font-size:13px;
    line-height:1.5;

    color:rgba(255,255,255,0.45);
}


.process-circle{

    border:1px solid rgba(120,120,120,0.14);

    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;

    will-change:transform;
}

.process-circle:hover{

    transform:translateY(-8px);

    border-color:rgba(120,120,120,0.28);

    box-shadow:
        0 24px 50px rgba(0,0,0,0.08),
        0 0 0 1px rgba(120,120,120,0.08);

}


.work-more-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:160px;
    height:50px;
    background:#fff;
    border:1px solid #dcdcdc;
    border-radius:50px;

    font-size:20px;
    font-weight:700;
    color:#111;

    cursor:pointer;
    transition:all .25s ease;
     margin-top:50px;
}

.work-more-btn::after{
    content:"";

    width:10px;
    height:10px;

    margin-left:12px;

    border-right:3px solid #111;
    border-bottom:3px solid #111;

    transform:rotate(45deg) translateY(-2px);
}

.work-more-btn:hover{
    background:#333;
    border-color:#333;
    color:#FFF
}


._content_work{
    position:relative;
    overflow:hidden;
}

/* 아래 흐림 효과 */
._content_work::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:400px;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.75) 45%,
        rgba(255,255,255,0.95) 75%,
        rgba(255,255,255,1) 100%
    );
}

/* ============================================================
   [2026-08-10] WORKS 리디자인 — 공용 스크롤 등장 애니메이션
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
/* [2026-08-30] will-change 를 기본 규칙에서 뺐다.
   등장이 끝난 뒤에도 계속 붙어 있어 요소마다 합성 레이어가 영구히 남았고
   (제작품목 한 페이지에만 13개), iOS 사파리에서 흰 면이 만나는 자리에
   옅은 선·그림자처럼 보이는 원인이 된다. 등장 전에만 건다. */
.reveal:not(.is-in){ will-change:opacity,transform; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   [2026-08-10 #3] 작업과정 5단계 — 골드 노드 타임라인 (원 겹침 폐기)
   ============================================================ */
.proc5{ position:relative; display:flex; justify-content:center; gap:12px; max-width:1372px; margin:0 auto; padding:24px 0 8px; }
.proc5__line{ position:absolute; top:83px; left:150px; right:150px; height:3px; border-radius:3px;
    background:linear-gradient(90deg,#e6cd93,#c19a3e,#b98a34); z-index:0;
    transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.22,1,.36,1) .1s; }
.proc5.is-in .proc5__line{ transform:scaleX(1); }
.proc5__item{ position:relative; z-index:1; flex:1; max-width:280px; display:flex; flex-direction:column; align-items:center; text-align:center;
    opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.proc5.is-in .proc5__item{ opacity:1; transform:none; }
.proc5.is-in .proc5__item:nth-child(2){ transition-delay:.10s; }
.proc5.is-in .proc5__item:nth-child(3){ transition-delay:.20s; }
.proc5.is-in .proc5__item:nth-child(4){ transition-delay:.30s; }
.proc5.is-in .proc5__item:nth-child(5){ transition-delay:.40s; }
.proc5.is-in .proc5__item:nth-child(6){ transition-delay:.50s; }
.proc5__node{ width:88px; height:88px; border-radius:50%; background:#141a20; border:2px solid #DDBD7E;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 30px -14px rgba(120,90,30,.7);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1), background .4s ease, box-shadow .4s ease; }
.proc5__node span{ font-family:'Noto Sans bold'; font-size:30px;
    background:linear-gradient(180deg,#f0d9a8,#c19a3e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.proc5__step{ display:none; }
.proc5__title{ margin-top:18px; font-size:21px; font-family:'Noto Sans bold'; color:#141110; }
.proc5__desc{ margin-top:9px; font-size:15px; line-height:1.55; color:#8a8a8a; white-space:nowrap; }
.proc5__item:hover .proc5__node{ transform:translateY(-8px) scale(1.06); background:#DDBD7E;
    box-shadow:0 20px 42px -14px rgba(185,138,52,.85); }
.proc5__item:hover .proc5__node span{ -webkit-text-fill-color:#141110; background:none; }

/* [2026-08-10 #5] 연결선 삭제 + 번호 사이 깜빡이는 화살표 애니메이션 */
.proc5__line{ display:none !important; }
.proc5__item:not(:last-child)::after{
    content:'\203A'; position:absolute; top:20px; right:-13px; z-index:2;
    font-size:40px; line-height:1; font-weight:700; color:#DDBD7E;
    animation:proc5Arrow 1.3s ease-in-out infinite;
}
.proc5__item:nth-child(1)::after{ animation-delay:0s; }
.proc5__item:nth-child(2)::after{ animation-delay:.18s; }
.proc5__item:nth-child(3)::after{ animation-delay:.36s; }
.proc5__item:nth-child(4)::after{ animation-delay:.54s; }
@keyframes proc5Arrow{ 0%,100%{ opacity:.16; } 50%{ opacity:1; } }

/* ============================================================
   [2026-08-10 #4] 제작시스템 9단계 — 카드 그리드 (기존 스테퍼 폐기)
   ============================================================ */
.pstep{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px 30px; max-width:1372px; margin:0 auto; }
.pstep__card{ text-align:left; }
.pstep__img{ position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:#f2efe9;
    box-shadow:0 26px 48px -34px rgba(20,16,8,.4); }
.pstep__img img{ width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.pstep__card:hover .pstep__img img{ transform:scale(1.07); }
.pstep__num{ display:inline-block; margin-top:18px; font-family:'Noto Sans bold'; font-size:15px; letter-spacing:1.5px; color:#b98a34; }
.pstep__num::after{ content:' / 09'; color:#cbc0a6; font-size:13px; letter-spacing:.5px; }
.pstep__title{ margin-top:7px; font-size:22px; font-family:'Noto Sans bold'; color:#141110; }
.pstep__desc{ margin-top:11px; font-size:15px; line-height:1.65; color:#7c7c7c; }

/* ============================================================
   [2026-08-10 #5] 포트폴리오/협업 카드 — 라운드 썸네일 + 호버 오버레이 + 골드 플러스
   (협업·포트폴리오 동일 디자인)
   ============================================================ */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 22px; max-width:1440px; margin:0 auto; }
.gal__card{ text-align:center; }
.gal__thumb{ position:relative; border-radius:20px; overflow:hidden; background:#ecebe6; aspect-ratio:1/1.06; cursor:pointer;
    box-shadow:0 24px 44px -32px rgba(20,16,8,.45); }
.gal__photo{ width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.gal__card:hover .gal__photo{ transform:scale(1.07); }
.gal__plus{ position:absolute; top:16px; right:16px; width:46px; height:46px; border:0; border-radius:50%;
    background:rgba(255,255,255,.92); cursor:pointer; z-index:3;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease; }
.gal__plus::before,.gal__plus::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#141110; border-radius:2px; }
.gal__plus::before{ width:18px; height:2.6px; }
.gal__plus::after{ width:2.6px; height:18px; }
.gal__card:hover .gal__plus{ background:#DDBD7E; transform:rotate(90deg); }
.gal__over{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(15,12,9,.64); opacity:0; transition:opacity .4s ease; }
.gal__card:hover .gal__over{ opacity:1; }
.gal__over img{ width:62px; opacity:0; transform:translateY(12px); transition:opacity .45s ease .05s, transform .45s cubic-bezier(.22,1,.36,1) .05s; }
.gal__card:hover .gal__over img{ opacity:1; transform:none; }
.gal__over-title{ color:#fff; font-family:'Noto Sans bold'; font-size:22px; margin-top:16px; }
.gal__over-sub{ color:#f0d9a8; font-size:16px; margin-top:2px; }
.gal__over-date{ color:#b9b4a5; font-size:15px; margin-top:18px; }
.gal__meta{ padding-top:16px; }
.gal__title{ font-family:'Noto Sans bold'; font-size:20px; color:#141110; }
.gal__sub{ font-size:15px; color:#a0a4bc; margin-top:5px; letter-spacing:-.5px; }
.gal-more{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
    margin-top:60px; padding:0 34px; height:52px; background:#fff; border:1px solid #e2d7bd; border-radius:50px;
    font-size:18px; font-weight:700; color:#141110; cursor:pointer; transition:all .25s ease; }
.gal-more::after{ content:''; width:9px; height:9px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.gal-more:hover{ background:#141110; border-color:#141110; color:#fff; }

@media (max-width:1200px){
  .gal{ grid-template-columns:repeat(2,1fr); }
  .pstep{ grid-template-columns:repeat(2,1fr); }
  .proc5{ flex-wrap:wrap; gap:30px; }
  .proc5__line{ display:none; }
  .proc5__desc{ white-space:normal; }
}

/* [2026-08-29] 제작 품목(.pmk-*) 모바일 규칙을 여기서 전부 걷어냈다.
   이 클래스는 Works/Products.asp 한 곳에서만 쓰는데 규칙이 두 파일에 나뉘어 있어
   같은 요소를 서로 덮어쓰느라 !important 가 계속 늘었다.
   이제 그 페이지의 모바일 스타일은 Products.asp 안 <style> 한 블록이 전부다. */

/* ============================================================
   [2026-08-28] 프로젝트 그룹 모바일 — 갤러리 / 협업사례 / 작업과정
   공통 규칙은 gmnSub.css. 여기에는 이 그룹 고유 문제만 둔다.
   ============================================================ */
@media (max-width:720px){

  /* ---------- 갤러리 카드 ----------
     제목 20px 이라 "빵빵이 금 키링 0.5g" 이 두 줄로 깨졌다.
     2열은 유지한다(제품 썸네일은 한눈에 훑는 것이 목적). 글자만 맞춘다. */
  .gal{ gap:16px 12px !important; }
  .gal__meta{ padding-top:11px !important; }
  .gal__title{ font-size:15px !important; line-height:1.4; letter-spacing:-.02em; word-break:keep-all; }
  .gal__sub{ font-size:13px !important; margin-top:3px !important; letter-spacing:-.02em; }

  /* + 버튼은 데스크톱 호버 보조 장치다. 폰에는 호버가 없어 항상 떠 있으면서
     썸네일만 가린다. 카드 전체가 이미 링크이므로 시각적으로만 줄인다. */
  .gal__plus{ width:34px !important; height:34px !important; top:9px !important; right:9px !important;
              background:rgba(255,255,255,.82) !important; }
  .gal__plus::before{ width:13px !important; height:2px !important; }
  .gal__plus::after{ width:2px !important; height:13px !important; }
  .gal__card:hover .gal__plus{ transform:none !important; background:rgba(255,255,255,.82) !important; }

  /* 더보기 버튼 */
  .gal-more{ margin-top:34px !important; height:48px !important; font-size:16px !important; padding:0 26px !important; }

  /* ---------- 작업과정(PROCESS) ---------- */
  .proc5{ gap:22px !important; }
  .proc5__desc{ font-size:15px !important; line-height:1.7; word-break:keep-all; }
  .pstep{ grid-template-columns:1fr !important; gap:20px !important; }
}

/* ============================================================
   [2026-08-28 #2] 제작 품목 / 협업 사례 "상세" 페이지 모바일
   Works/Gallary-detail.asp, Works/Collaboration-detail.asp
   목록만 손보고 상세를 빠뜨렸다.
   ============================================================ */
@media (max-width:720px){

  /* 좌우 여백 — .detail-frame 이 calc(100vw - 48px) 위에 좌35/우40 을 더해
     본문이 화면의 67% 폭(252px)밖에 못 썼다. 다른 서브페이지와 같은 20px 로 맞춘다. */
  .detail-frame{
    width:100% !important; max-width:100% !important;
    padding-left:20px !important; padding-right:20px !important; }
  .product-info{ padding-left:0 !important; }
  .product-section{ padding:28px 0 20px !important; gap:22px !important; }

  /* 제목 — 32px 이라 "빵빵이의 일상 Bbang / day" 처럼 영문 부제가 갈라졌다.
     부제를 아래 줄로 내려 한 덩어리로 읽히게 한다. */
  .product-title{ font-size:23px !important; line-height:1.3 !important;
    margin-bottom:14px !important; word-break:keep-all; }
  .product-title span{ display:block; margin-left:0 !important; margin-top:4px;
    font-size:13px !important; white-space:nowrap; }

  /* 본문 — 17px/500 은 폰에서 제목처럼 굵게 읽힌다. */
  .product-desc{ font-size:16px !important; font-weight:400 !important;
    line-height:1.75 !important; margin-bottom:20px !important; word-break:keep-all; }
  .product-list{ padding-top:18px !important; margin-bottom:28px !important; }
  .product-list li{ font-size:15px !important; line-height:1.7 !important; word-break:keep-all; }

  /* 이미지 */
  .product-img-box{ width:100% !important; }
  .product-img-box img{ width:100% !important; height:auto !important; }
  .product-section-gallary{ grid-template-columns:1fr !important; gap:14px !important;
    padding:20px 0 16px !important; }
}