@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"위노베이트"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

/*  css 파일 추가 처리(선택사항)  */
.fr-box .swiper-wrapper {display:block;}

.blocker {z-index: 100;}
.modal {max-width:980px; width: 100%;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}

/* ABOUT one-page */
.about-layout {display:flex; align-items:flex-start; gap:0; max-width:1760px; margin:0 auto; padding:0 var(--container-space);}
.page-nav {position:sticky; top:calc(var(--header-height) + 30px); flex:0 0 clamp(160px, calc(420 / var(--inner) * 100vw), 420px); z-index:5; padding-bottom:var(--padding-40);}
.page-nav ul {display:flex; flex-direction:column; gap:var(--padding-24);}
.page-nav a {display:flex; align-items:center; gap:20px; color:#a2a2a2; font-size:var(--font-size-22); font-weight:600; letter-spacing:-0.02em; line-height:1.64; transition:color .25s;}
.page-nav a:before {content:""; display:block; width:clamp(40px, calc(140 / var(--inner) * 100vw), 140px); height:2px; background:var(--color-primary); opacity:0; transition:opacity .25s; flex-shrink:0;}
.page-nav li.active a {color:var(--color-primary); font-weight:700;}
.page-nav li.active a:before {opacity:1;}
.page-nav a:hover {color:var(--color-primary);}
.page-body {flex:1; min-width:0; max-width:1200px;}
.about-sec {scroll-margin-top:calc(var(--header-height) + 24px); padding-bottom:var(--padding-120);}
.about-sec .sec-tit {margin-bottom:var(--padding-60); color:var(--color-secondary); font-size:var(--font-size-36); font-weight:600; letter-spacing:-0.02em; line-height:1.44;}
.about-sec .accent {color:var(--color-accent);}
.about-sec:last-child {padding-bottom:0;}

.sec-company .company-wrap {display:flex; align-items:center; gap:var(--padding-60);}
.sec-company .company-txt {flex:1; min-width:0;}
.sec-company .tit {color:var(--color-secondary); font-size:var(--font-size-36); font-weight:500; letter-spacing:-0.02em; line-height:1.44;}
.sec-company .tit strong {font-weight:700;}
.sec-company .desc {display:flex; flex-direction:column; gap:var(--padding-24); margin-top:var(--padding-32); color:#505050; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}
.sec-company .company-img {position:relative; flex:0 0 clamp(280px, calc(640 / var(--inner) * 100vw), 640px); height:clamp(360px, calc(700 / var(--inner) * 100vw), 700px);}
.sec-company .company-img .bg {position:absolute; top:88px; left:100px; right:0; bottom:0; background:rgba(15,37,62,0.06);}
.sec-company .company-img .thumb {position:absolute; top:0; left:0; width:clamp(260px, calc(600 / var(--inner) * 100vw), 600px); height:clamp(340px, calc(660 / var(--inner) * 100vw), 660px); overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.25);}
.sec-company .company-img .thumb img {display:block; width:100%; height:100%; object-fit:cover;}

.sec-cert .cert-banner {position:relative; display:flex; align-items:center; justify-content:center; height:clamp(240px, calc(360 / var(--inner) * 100vw), 360px); overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.16);}
.sec-cert .cert-banner > img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom;}
.sec-cert .banner-txt {position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--padding-30); width:100%; height:100%; padding:var(--padding-40); text-align:center; color:#fff; }
.sec-cert .banner-txt .tit {font-size:var(--font-size-36); font-weight:600; letter-spacing:-0.02em; line-height:1.44;}
.sec-cert .banner-txt .tit .dim {color:rgba(255,255,255,0.7);}
.sec-cert .banner-txt .desc {color:rgba(255,255,255,0.9); font-size:var(--font-size-20); font-weight:500; letter-spacing:-0.02em; line-height:1.7;}
.sec-cert .watermark {position:absolute; left:50%; bottom:clamp(-40px, calc(-40 / var(--inner) * 100vw), -20px); z-index:1; transform:translateX(-50%); color:rgba(255,255,255,0.04); font-size:clamp(40px, calc(100 / var(--inner) * 100vw), 100px); font-weight:700; letter-spacing:-0.02em; line-height:1.14; white-space:nowrap; pointer-events:none;}
.sec-cert .cert-list-wrap {margin-top:var(--padding-60);}
.sec-cert .tt-wrap {display:flex; align-items:center; gap:10px; margin-bottom:var(--padding-24);}
.sec-cert .tt-wrap .ico {display:flex; width:16px; height:16px;}
.sec-cert .tt-wrap .ico img {display:block; width:100%; height:100%;}
.sec-cert .tt-wrap .tt {color:var(--color-secondary); font-size:var(--font-size-26); font-weight:600; letter-spacing:-0.02em; line-height:1.54;}
.sec-cert .cert-list {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.sec-cert .cert-item {display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; align-items:end; min-height:clamp(150px, calc( 210 / var(--inner) * 100vw ), 210px); padding:var(--padding-30); border:1px solid #eee; background:#fff; color:var(--color-secondary); transition:border-color .25s, border-radius .25s;}
.sec-cert .cert-item:hover {border-color:var(--color-accent); border-bottom-right-radius:var(--padding-40);}
.sec-cert .cert-item .ico {grid-column:1 / -1; align-self:start; display:flex; align-items:center; justify-content:center; width:clamp(45px, calc( 64 / var(--inner) * 100vw ), 64px); height:auto; aspect-ratio: 1/1;  background:#f6f6f6;}
.sec-cert .cert-item .ico img {display:block; width:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); height:auto; aspect-ratio: 1/1;}
.sec-cert .cert-item .name {font-size:var(--font-size-22); font-weight:500; letter-spacing:-0.02em; line-height:1.64;}
.sec-cert .cert-item .dl {display:flex; align-items:center; justify-content:center; width:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); height:auto; aspect-ratio: 1/1; color:#aaa; transition:color .25s;}
.sec-cert .cert-item .dl svg {display:block;width:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); height:auto; aspect-ratio: 1/1;}
.sec-cert .cert-item:hover .dl {color:var(--color-accent);}

.sec-focus .focus-grid {display:grid; grid-template-columns:repeat(2, 1fr); border-top:1px solid var(--color-secondary);}
.sec-focus .focus-item {display:flex; flex-direction:column; border-bottom:1px solid #eee; border-right:1px solid #eee;}
.sec-focus .focus-item:nth-child(2n) {border-right:0;}
.sec-focus .focus-item .hd {display:flex; align-items:center; gap:10px; padding:var(--padding-30);}
.sec-focus .focus-item .num {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#eff7e4; color:var(--color-accent); font-size:var(--font-size-16); font-weight:600; letter-spacing:-0.02em; line-height:1;}
.sec-focus .focus-item .name {color:var(--color-secondary); font-size:var(--font-size-26); font-weight:500; letter-spacing:-0.02em; line-height:1.54;}
.sec-focus .focus-item .thumb {padding:0 var(--padding-30);}
.sec-focus .focus-item .thumb img {display:block; width:100%; height:clamp(180px, calc(280 / var(--inner) * 100vw), 280px); object-fit:cover;}
.sec-focus .focus-item .bullets {display:flex; flex-direction:column; gap:8px; margin:10px var(--padding-30) 30px; padding:18px; background:#f6f6f6;}
.sec-focus .focus-item .bullets li {position:relative; padding-left:14px; color:#505050; font-size:var(--font-size-18); letter-spacing:-0.02em; line-height:1.56;}
.sec-focus .focus-item .bullets li:before {content:""; position:absolute; top:12px; left:0; width:4px; height:4px; border-radius:50%; background:#ccc;}

.sec-lineup .lineup-list {border-top:1px solid var(--color-secondary);}
.sec-lineup .lineup-item {display:flex; align-items:stretch; border-bottom:1px solid #eee; padding:12px 0;}
.sec-lineup .logo-box {display:flex; align-items:center; justify-content:center; flex:0 0 clamp(200px, calc(480 / var(--inner) * 100vw), 480px); min-height:clamp(220px, calc(360 / var(--inner) * 100vw), 360px); background:#f5f5f7;}
.sec-lineup .logo-box .logo {display:block; width:auto; height:auto;}
.sec-lineup .logo-stack {display:flex; flex-direction:column; align-items:center; gap:8px;}
.sec-lineup .logo-stack img {display:block; max-width:240px; height:auto;}
.sec-lineup .info {display:flex; flex:1; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:var(--padding-30); min-width:0; padding:30px var(--padding-40) 24px;}
.sec-lineup .info .name {display:inline-flex; align-items:flex-start; gap:10px; color:var(--color-secondary); font-size:var(--font-size-36); font-weight:500; letter-spacing:-0.02em; line-height:1.39;}
.sec-lineup .info .name .dot {display:block; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--color-accent);}
.sec-lineup .info .bullets {display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.sec-lineup .info .bullets li {position:relative; padding-left:14px; color:#505050; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}
.sec-lineup .info .bullets li:before {content:""; position:absolute; top:15px; left:0; width:4px; height:4px; border-radius:50%; background:#ccc;}
.sec-lineup .info .ico {display:flex; align-items:center; justify-content:center; width:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); height:auto; aspect-ratio: 1/1; border-radius:50%; background:#f3f9e8;}
.sec-lineup .info .ico img {display:block; width:clamp(18px, calc(24 / var(--inner) * 100vw), 24px); height:auto; aspect-ratio: 1/1;}

.sec-history .history-banner {position:relative; height:clamp(240px, calc(400 / var(--inner) * 100vw), 400px); overflow:hidden; margin-bottom:var(--padding-60);}
.sec-history .history-banner img {display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom;}
.sec-history .history-banner .watermark {position:absolute; left:24px; bottom:24px; background:linear-gradient(99deg, rgba(15,37,62,0.48) 5%, rgba(141,198,63,0.48) 123%); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:clamp(32px, calc(64 / var(--inner) * 100vw), 64px); font-weight:700; letter-spacing:-0.02em; line-height:1.22; mix-blend-mode:hard-light;}
.sec-history .history-wrap {display:flex; align-items:flex-start; gap:0;}
.sec-history .history-wrap > .tit {flex:0 0 clamp(220px, calc(560 / var(--inner) * 100vw), 560px); color:var(--color-secondary); font-size:var(--font-size-36); font-weight:600; letter-spacing:-0.02em; line-height:1.44;}
.sec-history .history-list {position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:80px; padding-left:0;}
.sec-history .history-list:before {content:""; position:absolute; top:clamp(25px, calc(43 / var(--inner) * 100vw), 43px); bottom:20px; left:15px; width:1px; background:#dee1e4;}
.sec-history .history-list > li {position:relative; display:flex; flex-direction:column; align-items:flex-start; padding-left:clamp(50px, calc(90 / var(--inner) * 100vw), 90px);}
.sec-history .history-list > li:before {content:""; position:absolute; top:clamp(4px, calc(12 / var(--inner) * 100vw), 12px); left:0; width:30px; height:30px; border-radius:50%; background:#dee1e4; box-sizing:border-box; border:10px solid #dee1e4; background-clip:content-box; background-color:var(--color-primary);}
.sec-history .year {display:block; margin-bottom:var(--padding-24); white-space:nowrap; color:var(--color-secondary); font-size:var(--font-size-40); font-weight:600; letter-spacing:-0.02em; line-height:1.35;}
.sec-history .events {display:flex; flex-direction:column; gap:12px;}
.sec-history .events li {position:relative; padding-left:16px; color:#676767; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}
.sec-history .events li:before {content:""; position:absolute; top:clamp(12px, calc(14 / var(--inner) * 100vw), 14px); left:0; width:clamp(4px, calc(6 / var(--inner) * 100vw), 6px); height:clamp(4px, calc(6 / var(--inner) * 100vw), 6px); border-radius:50%; background:var(--color-accent);}
/* MEDION one-page */
.medion-page .about-sec > .sec-tit {margin-bottom:var(--padding-60);}
.medion-page .about-sec > .sec-tit + .sec-desc {margin-top:calc(var(--padding-24) - var(--padding-60)); margin-bottom:var(--padding-60);}
.medion-page .sec-desc {margin-top:var(--padding-24); color:#676767; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}
.sec-brand .brand-logos {display:flex; gap:10px;}
.sec-brand .brand-logo-item {display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:var(--padding-20); min-height:clamp(200px, calc(272 / var(--inner) * 100vw), 272px); padding:var(--padding-40); border:1px solid #eee; background:#fff;}
.sec-brand .brand-logo-item .name {color:var(--color-secondary); font-size:var(--font-size-40); font-weight:700; letter-spacing:-0.02em; line-height:1.35;}
.sec-brand .brand-logo-item .sub {color:#676767; font-size:var(--font-size-22); font-weight:500; letter-spacing:-0.02em; line-height:1.64;}
.sec-brand .brand-logo-item .logo {display:block; width:clamp(200px, calc(356 / var(--inner) * 100vw), 356px); height:auto;}
.sec-brand .brand-logo-item .slogan {background:linear-gradient(100deg, #61a60e 0%, #253251 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:var(--font-size-22); font-weight:600; letter-spacing:-0.02em; line-height:1.64; text-align:center;}

.sec-philosophy .philosophy-visual {position:relative; display:flex; align-items:flex-end; height:clamp(200px, calc(320 / var(--inner) * 100vw), 320px); padding:24px; overflow:hidden;}
.sec-philosophy .philosophy-visual > img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom;}
.sec-philosophy .philosophy-visual .logo {position:relative; z-index:1; display:block; width:clamp(180px, calc(356 / var(--inner) * 100vw), 356px); aspect-ratio:356/56 ;}
.sec-philosophy .philosophy-visual .logo img {display:block; width:100%; height:auto; opacity: 0.3;}
.sec-philosophy .philosophy-list {display:flex; flex-direction:column; gap:30px; margin-top:40px; padding-top:40px; border-top:1px solid var(--color-secondary);}
.sec-philosophy .philosophy-list > li {display:flex; align-items:flex-start; gap:16px;}
.sec-philosophy .philosophy-list .ico {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; margin-top:2px; border-radius:50%; background:#eff7e4;}
.sec-philosophy .philosophy-list .ico img {display:block; width:16px; height:16px;}
.sec-philosophy .philosophy-list .txt {display:flex; flex-direction:column; gap:6px; min-width:0;}
.sec-philosophy .philosophy-list .name {color:var(--color-secondary); font-size:var(--font-size-22); font-weight:500; letter-spacing:-0.02em; line-height:1.64;}
.sec-philosophy .philosophy-list .desc {color:#676767; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}

.sec-standard .standard-block {display:flex; align-items:stretch;}
.sec-standard .standard-block.reverse {margin-top:0;}
.sec-standard .standard-block .thumb {width: clamp(260px, calc(600 / var(--inner) * 100vw), 600px); overflow:hidden;}
.sec-standard .standard-block .thumb img {display:block; width:100%; height:100%; object-fit:cover;}
.sec-standard .standard-block .info {display:flex; flex:1; flex-direction:column; justify-content:center; gap: var(--padding-40); min-width:0; padding:clamp(30px, calc(40 / var(--inner) * 100vw), 40px) var(--padding-40);}
.sec-standard .standard-block .name {display:inline-flex; align-items:flex-start; gap:10px; color:var(--color-secondary); font-size:var(--font-size-28); font-weight:500; letter-spacing:-0.02em; line-height:1.5;}
.sec-standard .standard-block .name .dot {display:block; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--color-accent);}
.sec-standard .bullets {display:grid; grid-template-columns:repeat(2, 1fr); gap:10px var(--padding-40); padding-top:var(--padding-40); border-top:1px solid #eee;}
.sec-standard .bullets li {position:relative; padding-left:14px; color:#676767; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}
.sec-standard .bullets li:before {content:""; position:absolute; top:clamp(12px, calc(15 / var(--inner) * 100vw), 15px); left:0; width:4px; height:4px; border-radius:50%; background:#ccc;}

.sec-process .process-list {position:relative; display:flex; align-items:flex-end; gap:26px;}
.sec-process .process-list:before {content:""; position:absolute; top:5px; left:0; right:0; height:1px; background:#dee1e4;}
.sec-process .process-item {position:relative; display:flex; flex:1; flex-direction:column; align-items:center; gap:30px; min-width:0;}
.sec-process .process-item:not(:last-child):after {content:""; position:absolute; top:calc(40px + (100% - 40px) / 2); right:0; z-index:1; width:16px; height:16px; transform:translate(calc(50% + 13px), -50%); background:url("/images/sub/medion-arrow.svg") no-repeat center / 16px 16px;}
.sec-process .process-item .dot {position:relative; z-index:1; display:block; width:10px; height:10px; border-radius:50%; background:var(--color-accent);}
.sec-process .process-item .box {display:flex; flex-direction:column; align-items:center; gap:var(--padding-20); width:100%; padding:var(--padding-60) 8px; background:#f8f8f8;}
.sec-process .process-item .ico {display:flex; align-items:center; justify-content:center; width: clamp(38px, calc( 48 / var(--inner) * 100vw ), 48px); height:auto; aspect-ratio: 1/1;}
.sec-process .process-item .ico img {display:block; width:auto; height:auto;}
.sec-process .process-item .name {color:var(--color-secondary); font-size:var(--font-size-20); font-weight:500; letter-spacing:-0.02em; line-height:1.7; text-align:center; word-break:keep-all;}

.sec-specs .specs-list {display:flex; gap:var(--padding-24);}
.sec-specs .specs-item {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:var(--padding-40); width:clamp(240px, calc(384 / var(--inner) * 100vw), 384px); min-height:clamp(180px, calc(276 / var(--inner) * 100vw), 276px); padding:var(--padding-30); border:1px solid #eee; background:#fff;}
.sec-specs .specs-item .name {color:var(--color-secondary); font-size:var(--font-size-24); font-weight:600; letter-spacing:-0.02em; line-height:1.58;}
.sec-specs .specs-item .tit-wrap {display:flex; flex-direction:column; gap:2px;}
.sec-specs .specs-item .en {color:#bbb; font-size:var(--font-size-20); font-weight:500; letter-spacing:-0.02em; line-height:1.7;}
.sec-specs .specs-item .badge {display:inline-flex; align-items:center; gap:8px; padding:8px 20px 8px 16px; border-radius:80px; background:#f1f1f1;}
.sec-specs .specs-item .badge img {display:block; width:18px; height:18px;}
.sec-specs .specs-item .badge .txt {color:#505050; font-size:var(--font-size-16); font-weight:600; letter-spacing:-0.02em; line-height:1.62;}

/* TECHNICAL SUPPORT  */
.coa-intro {display:flex; align-items:stretch;}
.coa-intro .thumb {position:relative; flex:0 0 50%; width:50%;  overflow:hidden; background:#f1f1f1;}
.coa-intro .thumb img {width:100%; height:100%; object-fit:cover;}
.coa-intro .info {display:flex; flex:1; flex-direction:column; justify-content:space-between; gap:var(--padding-40); min-width:0; padding:20px clamp(24px, calc(60 / var(--inner) * 100vw), 60px);}
.coa-intro .tit {display:inline-flex; align-items:flex-start; gap:10px; color:var(--color-secondary); font-size:var(--font-size-36); font-weight:600; letter-spacing:-0.02em; line-height:1.44;}
.coa-intro .tit .dot {display:block; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--color-accent); flex-shrink:0;}
.coa-intro .desc {display:flex; flex-direction:column; gap:16px; color:#676767; font-size:var(--font-size-20); letter-spacing:-0.02em; line-height:1.7;}
.coa-intro .btn-link {display:inline-flex; align-items:center; align-self:flex-start; gap:8px; margin-top:auto; padding:var(--padding-16) clamp(20px, calc(30 / var(--inner) * 100vw), 30px); border-radius:64px; background:var(--color-accent); color:#fff; font-size:var(--font-size-18); font-weight:600; letter-spacing:-0.03em; line-height:1.56; transition:opacity .25s;}
.coa-intro .btn-link:hover {opacity:.85;}
.coa-intro .btn-link img {display:block; width:24px; height:24px;}