:root {
      --bg: #F5F6F1;
      --surface: #FFFFFF;
      --ink: #14180F;
      --ink-soft: #565F52;
      --line: #DEE2D6;
      --accent: #0A0096;
      --accent-ink: #05481F;
      --shadow: 0 24px 48px -28px rgba(20, 24, 15, 0.35);
      --bg-panel: #ECECF7;
      --bg-page: #F8F8FC;
      --muted: #6B6B7B;
      --track: #B9B9D6;
      --ph: #2A2A38;
      --ph-text: #EDEDF5;
      --btn: #1E1E24;
      --btn-ink: #FFFFFF;
      --radius-panel: 100px;
      --radius-box: 60px;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: #10130E;
        --surface: #191D14;
        --ink: #EDF1E7;
        --ink-soft: #A9B2A0;
        --line: #2B3123;
        --accent: #9C93FF;
        --accent-ink: #C6F5D7;
        --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
        --bg-panel: #1B1B2E;
        --bg-page: #12121C;
        --muted: #A0A0B4;
        --track: #3C3C5C;
        --ph: #161622;
        --ph-text: #A0A0B4;
        --btn: #F1F1F7;
        --btn-ink: #1E1E24;
      }
    }

    :root[data-theme="dark"] {
      --bg: #10130E;
      --surface: #191D14;
      --ink: #EDF1E7;
      --ink-soft: #A9B2A0;
      --line: #2B3123;
      --accent: #9C93FF;
      --accent-ink: #C6F5D7;
      --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
      --bg-panel: #1B1B2E;
      --bg-page: #12121C;
      --muted: #A0A0B4;
      --track: #3C3C5C;
      --ph: #161622;
      --ph-text: #A0A0B4;
      --btn: #F1F1F7;
      --btn-ink: #1E1E24;
    }


/* ----------------------------------- Main Slider01 Start ----------------------------------- */
.inner{width:1600px; margin:0 auto;}
.main-tech .section-head{position:relative; margin-bottom:30px; text-align:center;}
.main-tech .section-head h2{margin:0; font-size:60px; font-weight:500; letter-spacing:-0.01em; line-height:1.3;}
.main-tech .section-head h2 strong{font-weight:900;}
.main-tech .section-head span{color:#150db5; font-size:20px; font-weight:700;}
.main-tech .section-head .badge{
  font-size:12px; font-weight:600; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.main-contents{--dir:1; position:relative;}
.content-track{list-style:none; margin:0; padding:0; display:flex; gap:10px; height:clamp(300px, 42vw, 400px); border-radius:5px; overflow:hidden; box-shadow:none;}
.content-panel{
  position:relative; flex:0 1 300px; min-width:300px; overflow:hidden;
  transition:flex-basis 0.62s cubic-bezier(0.65, 0, 0.35, 1), flex-grow 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}
.content-panel.is-active{flex:1 1 640px; min-width:0;}
.panel-trigger{all:unset; display:block; position:relative; width:100%; height:100%; cursor:pointer;}
.panel-trigger:focus-visible{outline:3px solid var(--accent); outline-offset:-3px;}
.panel-visual{
  position:absolute; inset:0;
  background:linear-gradient(155deg, var(--p1) 0%, var(--p2) 100%);
  transition:transform 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}
.panel-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0) 60%);}
.panel-motif{position:absolute; right:-8%; bottom:-10%; width:78%; height:78%; opacity:0.5; color:rgba(255,255,255,0.9);}
.content-panel[data-theme="service"]{ background:linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%), url(../images/main/main-intro-vis01.png) no-repeat center center; }
.content-panel[data-theme="tech"]   { background:linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%), url(../images/main/main-intro-vis02.png) no-repeat center center; }
.content-panel[data-theme="esg"]    { background:linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%), url(../images/main/main-intro-vis03.png) no-repeat center center; }
.panel-face{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:20px 20px; color:#fff; opacity:1; transition:opacity 0.35s ease 0.05s;
}
.content-panel.is-active .panel-face{opacity:0.1; pointer-events:none;}
.panel-tag{
  font-size:12px; font-weight:700; letter-spacing:0.02em; padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.35); backdrop-filter:blur(2px);
}
.panel-face-title{margin-top:14px; text-orientation:mixed; font-size:14px; font-weight:500; line-height:1.5; max-height:220px;}
.panel-body{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px, 3vw, 44px);
  transform:translateX(calc(var(--dir) * 14px)); transition:opacity 0.4s ease 0.18s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s;
  color:#fff; opacity:0; pointer-events:none;
}
.content-panel.is-active .panel-body{opacity:1; transform:translateX(0); pointer-events:auto;}
.panel-body .panel-tag{align-self:flex-start;}
.panel-heading{margin:18px 0 0; padding:0; font-size:clamp(20px, 2.6vw, 30px); color:#FFFFFF; font-weight:700; line-height:1.32; letter-spacing:-0.01em; background-color: rgba(0, 0, 0, 0.0);}
.panel-heading em{
  display:block; font-style:normal; font-family:'Pretendard', sans-serif;
  font-size:clamp(14px, 1.6vw, 18px); font-weight:500; color:rgba(255,255,255,0.82); margin-top:6px;
}
.panel-desc{margin:16px 0 0; max-width:42ch; font-size:14px; line-height:1.7; color:rgba(255,255,255,0.88);}
.panel-cta{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  color:#fff; width:fit-content; padding-bottom:2px;
}
.panel-cta svg{width:14px; height:14px; transition:transform 0.25s ease;}
.panel-trigger:hover .panel-cta svg{transform:translateX(10px);}
.track-controls{display:flex; align-items:center; gap:14px; margin-top:18px;}
.ctrl{
  all:unset; cursor:pointer; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color 0.2s ease, background 0.2s ease;
}
.ctrl:hover{border-color:var(--accent);}
.ctrl:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.ctrl svg{width:16px; height:16px;}
.track-dots{display:flex; align-items:center; gap:8px; margin-right:auto;}
.dot{all:unset; cursor:pointer; width:30px; height:4px; border-radius:999px; background:var(--line); position:relative; overflow:hidden;}
.dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.dot i{position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; display:block;}
.dot.is-active i{transform:scaleX(1);}
.dot.is-active.is-running i{transition:transform var(--autoplay-ms, 4800ms) linear; transform:scaleX(1);}
.ctrl-play{width:auto; padding:0 14px; border-radius:999px; gap:6px; font-size:14px; font-weight:500;}
.ctrl-play .dash{width:8px; height:8px; border-radius:2px; background:currentColor;}
.ctrl-play.is-paused .dash{border-radius:50%;}
@media (max-width:720px) {
  .content-track{flex-direction:column; height:auto;}
  .content-panel{flex:0 1 64px; min-width:0; min-height:64px;}
  .content-panel.is-active{flex: 1 1 380px;}
  .panel-face{flex-direction:row; align-items:center; padding:0 16px; gap:12px;}
  .panel-face-title{writing-mode:horizontal-tb; margin-top:0; max-height:none; font-size:14px;}
  .panel-body{transform:translateY(calc(var(--dir) * 10px));}
  .content-panel.is-active .panel-body{transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce) {
  .content-panel, .panel-visual, .panel-body, .panel-face, .panel-cta svg, .dot i{transition-duration:0.01ms !important;}
}
/* ----------------------------------- Main Slider01 End ----------------------------------- */


/* ----------------------------------- Main Slider02 Start ----------------------------------- */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0; }

.inner {width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px; position: relative;}

.media {padding:0 0 50px 0; position: relative; z-index: 1;}
.media::before {content: ""; position: absolute; top: 0; bottom: 0; left: -1000px; right: calc(50% - 500px); background: var(--bg-panel); border-top-right-radius: var(--radius-panel); border-bottom-right-radius: 40px; z-index: -1; transition: all 0.3s ease;}

/* GRID & BODY */
.min {position: relative; margin-top: 40px;}
.md-body {display: grid; grid-template-columns: 480px 1fr; gap: 60px; align-items: stretch;}

/* Left Text Info Box */
.md-info {display: flex; flex-direction: column; justify-content: space-between; padding-top: 20px; padding-bottom: 10px;}
.md-text {animation: fade .4s cubic-bezier(0.16, 1, 0.3, 1) both;}

@keyframes fade {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.md-text h3 {padding-top:50px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.35; font-weight: 900;}
.md-text p {margin-top: 24px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; font-weight: 400; color: var(--ink-soft); white-space: pre-line;}

.md-more {display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; color: var(--accent); font-size: 17px; font-weight: 600; text-decoration: none; transition: color 0.2s ease; touch-action: manipulation;}
.md-more svg {transition: transform 0.25s ease;}
.md-more:hover {text-decoration: underline;}
.md-more:hover svg {transform: translateX(6px); }

/* CONTROLS & PAGER */
.md-ctrl {display: flex; align-items: center; margin-top: 40px; gap: 24px; flex-wrap: wrap;}
.md-btns {display: flex; align-items: center; gap: 8px;}
.md-btn {width: 52px; height: 52px; min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; touch-action: manipulation; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.md-btn:hover {opacity: 0.88; transform: translateY(-2px);}
.md-btn:active {transform: scale(0.95);}
.md-btn:focus-visible, .md-more:focus-visible {outline: 3px solid var(--accent); outline-offset: 3px;}

.md-pager {display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em;}
.md-pager .md-cur {color: var(--ink); min-width: 22px;}
.md-pager #md-total {color: var(--muted);}

.md-bar {position: relative; width: 100px; height: 3px; background: var(--track); border-radius: 2px; overflow: hidden;}
.md-bar i {position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--accent); border-radius: 2px;}
.md-bar i.run {animation: gauge var(--dur, 4s) linear forwards;}
.md-bar i.paused {animation-play-state: paused !important;}

@keyframes gauge {
	from { width: 0%; }
	to { width: 100%; }
}

/* SLIDE TRACK & CARDS */
.md-box {position: relative; overflow: hidden; width: 100%; aspect-ratio: 1080 / 580; border-top-left-radius: var(--radius-box); border-top-right-radius: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; box-shadow: var(--shadow); touch-action: pan-y; user-select: none;}

.md-track {display: flex; height: 100%; width: 100%; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform;}

.md-slide {flex: 0 0 100%; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ph); color: var(--ph-text); font-size: clamp(20px, 3.2vw, 42px); font-weight: 700; text-align: center; padding: 0px; position: relative; background-size: cover; background-position: center;}

.slide-demo-1 {background-color:#FFFFFF; color: #150DB5;}
.slide-demo-2 {background-color:#FFFFFF; color: #150DB5;}

video{
	outline: none;
	border: 0;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

@media (max-width: 768px) {
	.inner {padding: 0 20px;}

	.media::before {left: -100px; right: 0; border-top-right-radius: 40px; border-bottom-right-radius: 20px;}

	.min {margin-top: 24px;}

	.md-body {gap: 24px;}

	.md-box {aspect-ratio: 4 / 3; border-top-left-radius: 28px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}

	.md-text h3 {font-size: 24px; line-height: 1.35;}
	.md-text p {margin-top: 12px; font-size: 15px; line-height: 1.55;}

	.md-more {margin-top: 20px; font-size: 15px;}

	.md-ctrl {margin-top: 16px; gap: 16px; justify-content: space-between;}

	.md-btn {width: 46px; height: 46px;}

	.md-bar {width: 70px;}

	.md-pager {font-size: 14px; gap: 8px;}
}

@media (max-width: 1199px) {
	.inner {padding: 0 32px;}
	.media::before {right: 40px; border-top-right-radius: 60px;}
	.md-body {grid-template-columns: 1fr; gap: 36px;}

	.md-box {grid-row: 1; aspect-ratio: 16 / 9; border-top-left-radius: 40px;}

	.md-info {padding-top: 0; gap: 24px;}

	.md-text p {margin-top: 16px;}

	.md-ctrl {margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.md-track, .md-bar i {transition: none !important;}
	.md-text {animation: none !important;}
}
/* ----------------------------------- Main Slider02 End ----------------------------------- */



/* ----------------------------------- Main Slider03 Start ----------------------------------- */
:root{--main:#0f0093;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
.wrap{width:min(1600px,100% - 80px);margin:0 auto}
.exhibit-list{display:flex;justify-content:space-between;align-items:flex-end;padding:60px 0 64px 0;border-bottom:1px solid rgba(255,255,255,.9)}

/* ³×ºñ°ÔÀÌ¼Ç È­»ìÇ¥ ¹öÆ° ±×·ì */
.nav-btns{display:flex;gap:12px;margin-bottom:8px;}
.btn-nav{width:58px;height:58px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s;outline:none}
.btn-nav:hover{background:rgba(255,255,255,.2);border-color:#fff}
.btn-nav:active{transform:scale(0.95)}
.btn-nav svg{width:24px;height:24px;stroke:currentColor}

.exhibit-body{display:flex;margin-top:72px}
.exhibit-txt{flex:0 0 600px;margin:0;font-size:32px;color:#FFFFFF;font-weight:400;line-height:54px;letter-spacing:-.03em;}

/* ½½¶óÀÌ´õ: ¿À¸¥ÂÊÀº È­¸é ³¡±îÁö */
.slider{flex:1;min-width:0;margin-right:calc(50% - 50vw);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.track{display:flex;gap:30px;width:max-content;will-change:transform}
.slider.grab .track{cursor:grabbing}
@media (hover:hover) and (pointer:fine){.slider,.slider *{cursor:none!important}}

.card{position:relative;flex:0 0 470px;height:520px;padding:40px;background:#fff;color:#222;overflow:hidden;display:block;-webkit-user-drag:none}
.logo{position:relative;z-index:2;display:block;font-size:30px;font-weight:800;font-style:italic;letter-spacing:-.03em;transition:color .4s}
.logo b{font-weight:inherit;color:var(--c1)}
.logo b+b{color:var(--c2)}
.logo i{display:inline-block;width:1px;height:22px;background:currentColor;margin:0 10px;vertical-align:-2px;opacity:.6}
.ttl{position:absolute;z-index:2;left:40px;right:40px;top:227px;padding-bottom:32px;border-bottom:1px solid rgba(0,0,0,.25);font-size:22px; color:#000000; font-weight:500;line-height:31px;letter-spacing:-.03em;transition:color .4s,border-color .4s}

/* ¸¶½ºÅ© À̹ÌÁö: ÀÛÀº ½æ³×ÀÏ ¡æ Ä«µå Àüü·Î È®Àå */
.thumb1{position:absolute;inset:0;z-index:1;background:url("../images/main/expo01_thum.jpg") center/cover;clip-path:inset(360px 40px 40px 250px);transition:clip-path .7s cubic-bezier(.65,0,.15,1),transform .7s cubic-bezier(.65,0,.15,1)}
.thumb1::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,0,147,.55),rgba(15,0,147,.25) 55%,rgba(15,0,147,.55));opacity:0;transition:opacity .5s}
.card:hover .thumb1{clip-path:inset(0 0 0 0); background:url("../images/main/expo01.jpg") center/cover;}
.card:hover .thumb1::after{opacity:1}
.thumb2{position:absolute;inset:0;z-index:1;background:url("../images/main/expo02_thum.jpg") center/cover;clip-path:inset(360px 40px 40px 250px);transition:clip-path .7s cubic-bezier(.65,0,.15,1),transform .7s cubic-bezier(.65,0,.15,1)}
.thumb2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,0,147,.55),rgba(15,0,147,.25) 55%,rgba(15,0,147,.55));opacity:0;transition:opacity .5s}
.card:hover .thumb2{clip-path:inset(0 0 0 0); background:url("../images/main/expo02.jpg") center/cover;}
.card:hover .thumb2::after{opacity:1}
.thumb3{position:absolute;inset:0;z-index:1;background:url("../images/main/expo03_thum.jpg") center/cover;clip-path:inset(360px 40px 40px 250px);transition:clip-path .7s cubic-bezier(.65,0,.15,1),transform .7s cubic-bezier(.65,0,.15,1)}
.thumb3::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,0,147,.55),rgba(15,0,147,.25) 55%,rgba(15,0,147,.55));opacity:0;transition:opacity .5s}
.card:hover .thumb3{clip-path:inset(0 0 0 0); background:url("../images/main/expo03.jpg") center/cover;}
.card:hover .thumb3::after{opacity:1}
.thumb4{position:absolute;inset:0;z-index:1;background:url("../images/main/expo03_thum.jpg") center/cover;clip-path:inset(360px 40px 40px 250px);transition:clip-path .7s cubic-bezier(.65,0,.15,1),transform .7s cubic-bezier(.65,0,.15,1)}
.thumb4::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,0,147,.55),rgba(15,0,147,.25) 55%,rgba(15,0,147,.55));opacity:0;transition:opacity .5s}
.card:hover .thumb4{clip-path:inset(0 0 0 0); background:url("../images/main/expo03.jpg") center/cover;}
.card:hover .thumb4::after{opacity:1}
.card:hover .logo,.card:hover .logo img{filter: drop-shadow(1px 1px 1px #FFFFFF);}
.card:hover .ttl{font-size:30px; color:#fff; font-weight:600; border-color:rgba(255,255,255,.7);}

.cursor{position:fixed;left:0;top:0;width:100px;height:100px;pointer-events:none;z-index:99}
.cursor .c{width:100%;height:100%;border-radius:50%;background:rgba(15,0,147,.82);display:grid;place-items:center;opacity:0;transform:scale(.12);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;box-shadow:0 8px 30px rgba(15,0,147,.35)}
.cursor.on .c{opacity:1;transform:scale(1)}
.cursor.down .c{transform:scale(.88)}
.cursor svg{width:52px;height:52px;opacity:0;transition:opacity .25s}
.cursor.on svg{opacity:1;transition-delay:.15s}

@media (hover: none) or (pointer: coarse) {
  .cursor { display: none !important; }
}

@media (max-width:1100px){
 .sec{padding:100px 0}
 .exhibit-list h2{font-size:38px}.txt{font-size:22px;line-height:1.6}
 .exhibit-body{flex-direction:column;gap:40px;margin-top:40px}.exhibit-txt{flex:none;}
 .exhibit-body .exhibit-txt{display:none;}
 .slider{margin-right:calc(50% - 50vw)}
 .card{flex-basis:320px;height:420px}.ttl{top:180px;font-size:18px}
 .thumb1{clip-path:inset(290px 40px 40px 150px)}
 .thumb2{clip-path:inset(290px 40px 40px 150px)}
 .thumb3{clip-path:inset(290px 40px 40px 150px)}
 .thumb4{clip-path:inset(290px 40px 40px 150px)}
 .btn-nav{width:46px;height:46px}
}
/* ----------------------------------- Main Slider03 End ----------------------------------- */