@charset "UTF-8";
#container { background:#041129; }
#container > div[id^="cnts"] { position:relative; }
#container > div[id^="cnts"]:nth-child(even) { background:#030D20; }
.control { position:absolute; display:flex; gap:20rem; align-items: center; }
.control a { display: block; text-indent:-9999px; overflow:hidden; font-size: 0; }
.control a:before { content: ''; position: relative; display: block; }
.control.wt a.slick-arrow:before { width:24rem; height:18rem; background:url(/design/tour2026/img/common/control_arrow-w.png)no-repeat center/contain; }
.control a.slick-arrow.prev:before { transform:rotate(180deg); }
.control.wt a.stop:before { width:12rem; height:12rem; background:url(/design/tour2026/img/common/control_play-w.png)no-repeat center/contain; }
.control.wt a.play:before { width:12rem; height:12rem; background:url(/design/tour2026/img/common/control_stop-w.png)no-repeat center/contain; }
.control.blk a.slick-arrow:before { width:24rem; height:18rem; background:url(/design/tour2026/img/common/control_arrow.png)no-repeat center/contain; }
.control.blk a.stop:before { width:12rem; height:12rem; background:url(/design/tour2026/img/common/control_play.png)no-repeat center/contain; }
.control.blk a.play:before { width:12rem; height:12rem; background:url(/design/tour2026/img/common/control_stop.png)no-repeat center/contain; }
.control .arrow { flex:0 0 60rem; height:60rem; display: flex; align-items:center; justify-content:center; text-indent:-9999px; overflow:hidden; font-size: 0; }
.control .arrow:before { position:relative; content:''; display:block; width:17rem; height:12rem; background:url(/design2026/apec/img/common/control-arrow.svg)no-repeat center/contain; }
.control .arrow.prev:before { transform:rotate(180deg); }
.trv-more { position:absolute; text-indent:-9999px; font-size: 0; width:95rem; height:95rem; padding:16rem; background:#fff; z-index: 2; border-radius: 40rem 0; }
.trv-more:before, .trv-more:after { position:absolute; content:''; }
.trv-more span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(180deg, #22B69D, #5B83FA); border-radius:27rem; }
.trv-more span:before { position:relative; content:''; display:block; width:13rem; height:13rem; background:url(/design/tour2026/img/common/more-icon-w.svg)no-repeat center/cover; }
.section { min-height:800rem; padding:100rem 0; }
@media (max-width: 580px) {
    .section { min-height: 810rem; }
}
.top-box { display:flex; flex-direction:column; gap:20rem; align-items: center; margin-bottom:100rem; }
.top-box > span { display:flex; align-items:center; gap:20rem; font-size:18rem; text-align:center; }
.top-box > span:before, .top-box > span:after { position:relative; content:''; display:block; width:30rem; height:1px; background:#D9D9D9; }
.top-box > h2 { font-size:56rem; background: linear-gradient(135deg, #F1EEFE 0%, #CDD2EA 32%, #D1F1F4 75%, #F3D9DB 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-align:center; font-family: 'KMU80'; }
.top-box > .stxt { text-align:center; color:rgb(255 255 255 / 70%); font-size:18rem; font-family: 'KMU80'; }
.top-box2 { display:flex; align-items:center; margin-bottom:80rem; }
.top-box2 > span { display:flex; align-items:center; gap:20rem; font-size:18rem; text-align:center; }
.top-box2 > span:after { position:relative; content:''; display:block; width:30rem; height:1px; background:#D9D9D9; }
.top-box2 > h2 { font-size:56rem; background: linear-gradient(135deg, #F1EEFE 0%, #CDD2EA 32%, #D1F1F4 75%, #F3D9DB 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-align:center; margin: 0 40rem 0 60rem; font-family: 'KMU80'; }
.top-box2 > .stxt { text-align:center; color:rgb(255 255 255 / 70%); font-size:18rem; font-family: 'KMU80'; }
@media (max-width: 1440px) {
    .top-box > h2, .top-box2 > h2, .top-box2 > div h2, .visual .mtxt { font-size: 50rem !important; }
}
@media (max-width: 1280px) {
    .top-box > h2, .top-box2 > h2, .top-box2 > div h2, .visual .mtxt { font-size: 44rem !important; }
}
@media (max-width: 768px) {
    .top-box2, .top-box { margin-bottom:70rem !important; gap: 14rem; }
    .top-box > h2, .top-box2 > h2, .top-box2 > div h2, .visual .mtxt { font-size: 38rem !important; }
}
@media (max-width: 520px) {
    .top-box > h2, .top-box2 > h2, .top-box2 > div h2, .visual .mtxt { font-size: 35rem !important; }
}
.none { background:#041129; position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.none img { width:auto !important; height:auto !important; }
.deco { position:absolute; width:100%; bottom:0; padding: 0 20rem; display:flex; justify-content:space-between; align-items: end; }
.deco div { position:relative; content:''; display:block; }
.deco div.lft { width:400rem; height:270rem; background:url(/design2026/apec/img/main/cnts-lft.png)no-repeat center/contain; }
.deco div.lft:before { position:absolute; content:''; width:58rem; height:77rem; background:url(/design2026/apec/img/main/butterfly1.png)no-repeat center/contain; top: -70rem; left: 20rem; animation: butterflyFloat1 3.5s ease-in-out infinite; z-index:3; }
.deco div.lft:after { position:absolute; content:''; width:37rem; height:40rem; background:url(/design2026/apec/img/main/butterfly2.png)no-repeat center/contain; right: 105rem; top: 60rem; animation: butterflyFloat2 4.2s ease-in-out infinite; z-index:3; }
.deco div.rgt { width:400rem; height:325rem; background:url(/design2026/apec/img/main/cnts-rgt.png)no-repeat center/contain; }
.deco div.rgt:after { position:absolute; content:''; width:63rem; height:78rem; background:url(/design2026/apec/img/main/butterfly3.png)no-repeat center/contain; right: 130rem; top: -120rem; animation: butterflyFloat3 3.8s ease-in-out infinite; z-index:3; }
@keyframes butterflyFloat1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12rem); }
}
@keyframes butterflyFloat2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10rem); }
}
@keyframes butterflyFloat3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15rem); }
}
.visual { position:relative; }
.visual .mtxt { position: absolute; top: 80rem; font-size:68rem; display:flex; flex-direction:column; gap:30rem; z-index:3; left: -30px; pointer-events: none;}
.visual .mtxt strong { background: linear-gradient( 135deg, #F1EEFE 0%, #CDD2EA 32%, #D1F1F4 75%, #F3D9DB 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.2;}
.visual .mtxt span { font-size:18rem; line-height: 1.8; }
.visual-slide { position: relative; max-width: 100%; height: 620px; margin: 0 auto; overflow: hidden; }
.visual-slider { position: relative; width: 100%; height: 100%; perspective: 1400px; transform-style: preserve-3d; cursor: grab; }
.visual-slider.is-dragging { cursor: grabbing; }
.visual-item { position: absolute; top: 50%; left: 50%; width: 800px; height: 490px; overflow: hidden; background: #111; transform-origin: center center; transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .65s ease, filter .65s ease; will-change: transform; user-select: none; /*pointer-events: none;*/ }
.visual-item img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.visual-item.is-current { z-index: 5; transform: translate(-50%, -50%) translateZ(100px) scale(1); opacity: 1; filter: none; }
.visual-item.is-prev { z-index: 4; transform: translate(-50%, -56%) translateX(-425px) translateZ(-80px) scale(.6); opacity: 1; }
.visual-item.is-next { z-index: 4; transform: translate(-50%, -56%) translateX(425px) translateZ(-80px) scale(.6); opacity: 1; }
.visual-item.is-prev2 { z-index: 3; transform: translate(-50%, -56%) translateX(-690px) translateZ(-180px) scale(0.3); opacity: 1; }
.visual-item.is-next2 { z-index: 3; transform:translate(-50%, -56%)translateX(690px)translateZ(-180px) scale(0.3); opacity: 1; }
.visual-item.is-hidden { z-index: 0; transform:translate(-50%, -50%) translateZ(-400px) scale(.4); opacity: 0; }
.visual-control { position: absolute; left: 50%; bottom: -10px; z-index: 20; display: flex; align-items: center; width: 862rem; transform: translateX(-50%); }
.visual-control button { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.visual-control button span { display: block; line-height: 30px; }
.visual-progress { flex: 1; }
.visual-progress-bar { position: relative; width: 100%; height: 2px; background: rgba(255,255,255,.4); }
.visual-progress-bar span { position: absolute; top: 0; left: 0; width: 0; height: 1px; background: #fff; transition: width .6s ease; }
@media (max-width:1700px){
    .visual .mtxt { left:20rem;}
}
@media (max-width: 1440px) {
    .deco div.lft { width: 286rem; height: 190rem; }
    .deco div.rgt { width: 270rem; height: 214rem; }
    .deco div.lft:before { width: 30rem; height: 40rem; top: -20rem; }
    .deco div.lft:after { width: 25rem; height: 26rem; right: 60rem; top: 40rem; }
    .deco div.rgt:after { width: 40rem; height: 55rem; right: 164rem; top: 17rem; }
    .visual .mtxt span { font-size: 16rem; line-height: 1.8; }
}
@media (max-width: 1200px) {
    .visual-item { width: 66vw; height: 40.4vw; }
    .visual-item.is-prev { transform:translate(-50%, -50%)translateX(-48vw)translateZ(-80px)rotateY(18deg)scale(.78); }
    .visual-item.is-next { transform:translate(-50%, -50%)translateX(48vw)translateZ(-80px)rotateY(-18deg)scale(.78); }
    .visual-item.is-prev2 { transform:translate(-50%, -50%)translateX(-75vw)translateZ(-180px)rotateY(25deg)scale(.6); }
    .visual-item.is-next2 { transform:translate(-50%, -50%)translateX(75vw)translateZ(-180px)rotateY(-25deg)scale(.6); }
    .deco { width: 110%; transform: translateX(-50%); left: 50%; padding:0; }
    .deco div.lft:before { left:55rem; }
}
@media (max-width: 820px) {
    .visual-control { width: 100%; }
}
@media (max-width: 768px) {
    .visual-slide { height: 500px; }
    .visual-item { width: 82vw; height: 50.2vw; }
    .visual-item.is-prev { transform:translate(-50%, -50%)translateX(-55vw)translateZ(-100px)rotateY(20deg)scale(.7); }
    .visual-item.is-next { transform:translate(-50%, -50%)translateX(55vw)translateZ(-100px)rotateY(-20deg)scale(.7); }
    .visual-item.is-prev2, .visual-item.is-next2 { opacity: 0; }
}
@media (max-width: 580px) {
    .deco div.lft { width: 180rem; height: 116rem; }
    .deco div.rgt { width: 180rem; height: 136rem; }
    .deco div.lft:before { left: 100rem; }
    .deco div.lft:after { right:0; }
    .deco div.rgt:after { top: 17rem; }
    .visual-slide { height: 410px; }
}
@media (max-width: 550px) {
    .visual.section { min-height:690rem; }
    .visual-slide { height: 380px; }
}
@media (max-width: 425px) {
    .visual-slide { height: 320px; }
}
.Numbers .cnts { display:grid; grid-template-columns: repeat(5, 1fr); }
.Numbers .cnts li { position:relative; display:flex; gap:50rem; flex-direction:column; border-left:1px solid rgb(255 255 255 / 10%); padding:50rem 40rem; font-size:18rem; overflow:hidden; isolation: isolate; }
.Numbers .cnts li::before { content: ''; position: absolute; top: 50%; left: -135px; transform: translateY(-50%); width: 370px; height: 370px; border-radius: 50%; background: radial-gradient( circle, rgba(181, 218, 195, 0.2) 0%, rgba(181, 218, 195, 0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1; }
.Numbers .cnts li:hover::before { opacity: 1; }
.Numbers .cnts li .num { display: flex; align-items: flex-end; font-family:'KMU80'; }
.Numbers .cnts li .txt { display:flex; flex-direction:column; gap:10rem; }
.Numbers .cnts li .txt strong { font-size:24rem; font-family:'Cafe24Danjunghae'; }
.Numbers .cnts li .txt span { color:rgb(255 255 255 / 50%); font-family:'KMU80'; }
.Numbers .cnts li .num span { display: inline-flex; align-items: flex-end; overflow: hidden; font-size: 90rem; height: 1em; line-height: 1; vertical-align: middle; opacity: 0; transition: opacity 0.3s ease; }
.Numbers .cnts li .num span i { display: inline-block; font-style: normal; font-size: inherit; height: 1em; line-height: 1; vertical-align: top; position: relative; overflow: hidden; margin-left: -6rem; }
.Numbers .cnts li .num span i:nth-of-type(1) { margin-left:0; }
.Numbers .cnts li .num span i .num-roll { display: block; position: relative; }
.Numbers .cnts li .num span i .num-roll i { display: block; height: 1em; line-height: 1; text-align: center; box-sizing: border-box; margin: 0; padding: 0; background: linear-gradient(135deg, #FFFFFF 0%, #B5DAC3 50%, #fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Cafe24PROSlim'; }
.Numbers .cnts li .num span i.point { font-size:40rem; }
.Numbers .cnts li .num span .num-roll { will-change: transform; }
@media (max-width: 1024px) {
    .Numbers .cnts { grid-template-columns: repeat(3, 1fr); }
    .Numbers .cnts li { padding: 40rem 20rem; gap: 30rem; font-size: 16rem; }
    .Numbers .cnts li:nth-child(n) { border-left: 1px solid rgb(255 255 255 / 10%); }
    .Numbers .cnts li .num span { font-size: 70rem; }
    .Numbers .cnts li .txt strong { font-size: 20rem; }
    .Numbers .cnts li::before { left: -100px; width: 270px; height: 270px; }
}
@media (max-width: 768px) {
    .Numbers .cnts { grid-template-columns: repeat(2, 1fr); }
    .Numbers .cnts li { padding: 30rem 15rem; gap: 20rem; }
    .Numbers .cnts li { border-left: 1px solid rgb(255 255 255 / 10%); }
    .Numbers .cnts li .num span { font-size: 56rem; }
    .Numbers .cnts li .txt strong { font-size: 18rem; }
    .Numbers .cnts li::before { left: -80px; width: 240px; height: 200px; }
}
@media (max-width: 480px) {
    .Numbers .cnts { grid-template-columns: 1fr; }
    .Numbers .cnts li { border-left: none; border-bottom: 1px solid rgb(255 255 255 / 10%); padding: 24rem 10rem; gap: 16rem; }
    .Numbers .cnts li:last-child { border-bottom: none; }
    .Numbers .cnts li .num span { font-size: 48rem; }
    .Numbers .cnts li .txt strong { font-size: 16rem; }
    .Numbers .cnts li:nth-child(n) { border-left:none; }
    .Numbers .cnts li::before { left: 30%; transform: translateX(-50%); top: -110px; }
}
:root { --navy:#06142e; --muted:#748096; --white:#fff; --mint:#cae4cf; --count:5; }
#cnts3 { overflow:hidden; }
.journey { /*min-height:100vh;*/ overflow:hidden; box-sizing:border-box; }
.journey .journey-sticky:before { position: absolute; content: ''; width: 490rem; height: 490rem; background: url(/design2026/apec/img/main/cnts3_bg.png) no-repeat top/cover; left: 30rem; top: -160rem; z-index: 0; pointer-events: none; }
.journey .journey__heading { text-align:center; margin-bottom:60px; }
.journey .eyebrow { display:flex; align-items:center; justify-content:center; gap:20px; font-weight:700; color:var(--mint); }
.journey .eyebrow:before, .journey .eyebrow:after { content:""; width:30px; height:1px; background:#fff; }
.journey h1 { margin:20px 0 12px; font-size:clamp(34px,3.2vw,62px); font-weight:500; color:var(--mint); }
.journey .journey__heading > p:last-child { margin:0; color:#bbc9c3; font-size:clamp(15px,1.1vw,20px); line-height:1.75; }
.journey .timeline { position:relative; }
.journey .timeline__rail { position:absolute; top:70px; left:10%; right:10%; height:2px; background:#24324a; }
.journey .timeline__progress { display:block; width:var(--progress,0%); height:100%; background:#fff; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.journey .timeline__list { display:grid; grid-template-columns:repeat(var(--count),1fr); margin:0; padding:0; list-style:none; }
.journey .timeline__item { position:relative; min-width:0; text-align:center; }
.journey .timeline__button { position:relative; z-index:2; width:100%; padding:0; border:0; color:var(--muted); background:none; cursor:pointer; }
.journey .year { display:block; height:42px; font-size:24rem; font-weight:600; transition:.25s; font-family: 'Cafe24PROSlim'; }
.journey .dot { display:block; width:40px; height:40px; margin:10rem auto 22px; border:13px solid #0d2244; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.03); transition:.3s; box-sizing:border-box; }
.journey .copy { display:block; transition:.3s; }
.journey .copy strong { display:block; margin-bottom:14px; font-size:29rem; }
.journey .copy small { font-size:clamp(14px,1.05vw,17px); line-height:1.6; font-family:'KMU80'; }
.journey .timeline__item.is-past .year, .journey .timeline__item.is-active .year, .journey .timeline__item.is-past .copy, .journey .timeline__item.is-active .copy { color:#fff; }
.journey .timeline__item.is-past .dot, .journey .timeline__item.is-active .dot { border-color:#fff; background:var(--navy); }
.journey .timeline__item.is-active .dot { transform:scale(1.0); background:#fff; box-shadow:inset 0 0 0 9px var(--navy); }
.journey .timeline__image { position:absolute; z-index:10; top:-10px; left:var(--image-x,50%); width:clamp(220px,18vw,300px); margin:0; opacity:0; visibility:hidden; pointer-events:auto; transform:translate(-50%,calc(-100% - 10px)) scale(.96); transition:opacity .2s ease,transform .25s ease,visibility 0s .2s; filter:drop-shadow(0 18px 30px rgba(0,0,0,.3)); will-change:left,transform; }
.journey .timeline__image:after { content:""; position:absolute; top:100%; left:50%; width:1px; height:20px; background:#fff; transform:translateX(-50%); display: none; }
.journey .timeline__image img { display:block; width:100%; aspect-ratio:5/3; object-fit:cover; }
.journey .timeline__image figcaption { padding:10px 12px; background:#fff; color:#15213a; font-size:15px; text-align:center; }
.journey .timeline__item.is-preview .timeline__image { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 5px)) scale(1); transition-delay:0s; }
.journey .timeline__button:focus-visible { outline:2px solid #fff; outline-offset:8px; }
@media(max-width:900px) {
    .journey { overflow:visible; padding:60px 22px; }
    .journey .timeline { margin-top:40px; }
    .journey .timeline__rail { top:0; bottom:0; left:19px; right:auto; width:2px; height:auto; }
    .journey .timeline__progress { width:2px; height:var(--progress,0%); transition:height .5s cubic-bezier(.2,.8,.2,1); }
    .journey .timeline__list { display:block; }
    .journey .timeline__item { min-height:210px; text-align:left; padding-left:60px; margin-bottom:30px; }
    .journey .timeline__button { text-align:left; }
    .journey .year { height:auto; margin-bottom:8px; }
    .journey .dot { position:absolute; left:-59px; top:-2px; width:38px; height:38px; margin:0; }
    .journey .copy strong { margin-bottom:6px; }
    .journey .timeline__image { position:relative; top:auto; left:auto!important; width:min(100%,300px); margin:15px 0 0 0; transform:none!important; opacity:0; visibility:hidden; max-height:0; overflow:hidden; transition:opacity .3s ease,max-height .3s ease; }
    .journey .timeline__image:after { display:none; }
    .journey .timeline__item.is-preview .timeline__image { opacity:1; visibility:visible; max-height:400px; }
    .Journey .journey-sticky:before { width: 340rem; height: 340rem; left: -70px; }
}
@media(max-width:490px) {
    .journey .journey-sticky:before { left:50%; transform:translateX(-50%); }
}
@media(prefers-reduced-motion:reduce) {
    .journey * { transition:none!important; }
}
.Outcomes .cnts { display:grid; grid-template-columns: repeat(4, 1fr); gap:30rem; }
.Outcomes .cnts > li a { border:1px solid rgb(255 255 255 / 10%); width: 100%; display: block; }
.Outcomes .cnts > li a .txt { padding:28rem 30rem; display:flex; flex-direction: column; gap:20rem; }
.Outcomes .cnts > li a .txt .top { position: relative; display:flex; align-items:center; }
.Outcomes .cnts > li a .txt .top:after { position: absolute; left:0; bottom: -2rem; display:inline-block; width: 0; height: 1px; background: #fff; content: ''; transition:cubic-bezier(.22, 1, .36, 1) .3s}
.Outcomes .cnts > li a .txt .top span:nth-of-type(1) { font-size:26rem; display:flex; align-items:center; }
.Outcomes .cnts > li a .txt .top span:nth-of-type(1):after { position:relative; content:''; display:block; width:2px; height:30rem; background:rgb(255 255 255 / 10%); margin:0 20rem; }
.Outcomes .cnts > li a .txt .top span:nth-of-type(2) { font-size:16rem; transition:.3s; color:rgb(255 255 255 /20%); font-family:'KMU80';}
.Outcomes .cnts > li a .txt strong { font-family:'KMU80'; font-size:24rem; line-height: 1.5; }
.Outcomes .cnts > li a .pic { width:100%; height:230rem; overflow:hidden; }
.Outcomes .cnts > li a .pic img { width:100%; height:100%; object-fit:cover; transition:.4s; }
/*.Outcomes .cnts > li a:hover .txt .top span:nth-of-type(2) { color:#fff; text-decoration:underline; text-underline-position: from-font; }*/
.Outcomes .cnts > li a:hover .txt .top:after { width: 100%; transition:cubic-bezier(.16, 1, .3, 1) .5s }
.Outcomes .cnts > li a:hover .pic img { transform:scale(1.1); }
.Outcomes .cnts > li > .badge { /*display:flex;*/ display: none; gap:16rem; color:rgb(255 255 255/50%); margin-top:10rem; font-family:'KMU80'; font-size:15rem; }
@media (max-width: 1540px) {
    .Outcomes .cnts > li a .txt { padding: 26rem 20rem; }
}
@media (max-width: 1440px) {
    .Outcomes .cnts > li a .txt { padding: 16rem 20rem; }
    .Outcomes .cnts > li a .txt .top { flex-direction:column; align-items: flex-start; }
    .Outcomes .cnts > li a .txt .top span:nth-of-type(1) { flex-direction:column; align-items: flex-start; }
    .Outcomes .cnts > li a .txt .top span:nth-of-type(1):after { width:30rem; height:2rem; margin: 10rem 0; }
    .Outcomes .cnts > li a .txt .top span:nth-of-type(2) { font-size:17rem; }
    .Outcomes .cnts > li a .txt strong { font-size: 24rem; }
    .Outcomes .cnts > li a .pic { height:170rem; }
}
@media (max-width: 1024px) {
    .Outcomes .cnts { gap:20rem; grid-template-columns: repeat(2, 1fr); }
    .Outcomes .cnts > li a .pic { height: 290rem; }
    .Outcomes .cnts > li a { height: calc(100% - 30rem); display: flex; flex-direction: column; justify-content: space-between; }
}
@media (max-width: 720px) {
    .Outcomes .cnts > li a .pic { height: 230rem; }
    .Outcomes .cnts > li a .txt strong br {display: none;}
}
@media (max-width: 560px) {
    .Outcomes .cnts > li a .pic { height: 170rem; }
}
@media (max-width: 474px) {
    .Outcomes .cnts { gap:30rem; grid-template-columns: repeat(1, 1fr); }
    .Outcomes .cnts > li a .pic { height: 230rem; }
}
.Records { position: relative; padding: 60px 0 100px; color: #fff; overflow: hidden; }
.Records .top-box > .stxt { display:flex; gap:20rem; align-items:center; }
.Records .top-box > .stxt:before, .Records .top-box > .stxt:after { position:relative; content:''; display:block; width:26rem; height:14rem; background:url(/design2026/apec/img/main/Records_deco.png) no-repeat top/cover; }
.Records-slider-wrapper { position: relative; width: 100%; margin: 0 auto; overflow: hidden; padding-bottom: 80px; }
.Records-slider-track { display: flex; gap: 30px; will-change: transform; }
.Records-card { flex: 0 0 calc((100% - 80px) / 5); box-sizing: border-box; user-select: none; }
.Records-card .img-box { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background-color: #111; height: 240rem; }
.Records-card .img-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition:.3s; }
.Records-card:hover .img-box img { transform:scale(1.1); }
.Records-card .txt-box { margin-top: 15px; }
.Records-card .txt-box h3 { font-size: 20rem; color: #fff; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.Records-card .txt-box p { font-size: 16rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family:'KMU80'; color:rgb(255 255 255 / 70% ); }
.Records-control { position: absolute; left: 50%; bottom: 10px; z-index: 20; display: flex; align-items: center; width: 100%; max-width: 862px; transform: translateX(-50%); padding: 0 20px; box-sizing: border-box; }
.Records-control button { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.Records-control button span { display: block; line-height: 1; }
.Records-progress { flex: 1; margin: 0 15px; }
.Records-progress-bar { position: relative; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.Records-progress-bar span { position: absolute; top: 0; left: 0; height: 100%; background: #fff; transition: width 0.3s ease; }
@media (max-width: 1280px) {
    .Records-slider-wrapper { padding: 0 20px 80px; }
    .Records-slider-track { gap: 20px; padding: 0; }
    .Records-card { flex: 0 0 calc((100% - 60px) / 4); }
}
@media (max-width: 1024px) {
    .Records-slider-wrapper { padding: 0 19px 80px; }
    .Records-slider-track { gap: 20px; padding: 0; }
    .Records-card { flex: 0 0 calc((100% - 40px) / 3); }
}
@media (max-width: 768px) {
    .Records-slider-wrapper { padding: 0 14px 80px; }
    .Records-slider-track { gap: 15px; padding: 0; }
    .Records-card { flex: 0 0 calc((100% - 15px) / 2); }
}
@media (max-width: 425px) {
    .Records-slider-wrapper { max-width: 90%; padding: 0 0 80px; box-sizing: border-box; }
    .Records-slider-track { gap: 0 !important; padding: 0 !important; }
    .Records-card { flex: 0 0 100%; width: 100% !important; box-sizing: border-box; }
}
.Post .cnts { display:grid; grid-template-columns: repeat(3, 1fr); gap:80rem; }
.Post .cnts > li { position:relative; background:#071425; border:1px solid #071425; display:flex; flex-direction:column; padding:40rem 48rem; transition:.3s; }
.Post .cnts > li:hover { border:1px solid #7c8280; }
.Post .cnts > li:before { position:absolute; content:''; width:85rem; height:75rem; right:45rem; top:80rem; }
.Post .cnts > li:nth-child(1):before { background:url(/design2026/apec/img/main/Post-icon1.png) no-repeat top/contain; }
.Post .cnts > li:nth-child(2):before { background:url(/design2026/apec/img/main/Post-icon2.png) no-repeat top/contain; }
.Post .cnts > li:nth-child(3):before { background:url(/design2026/apec/img/main/Post-icon3.png) no-repeat top/contain; }
.Post .cnts > li .txt { font-size:18rem; color:#BDDCC5; }
.Post .cnts > li strong, .Post .cnts > li p, .Post .cnts > li .badge { font-family:'KMU80'; }
.Post .cnts > li p, .Post .cnts > li .badge { color:rgb(255 255 255 / 60%); transition:.3s; }
.Post .cnts > li:hover p, .Post .cnts > li:hover .badge { color: rgb(255 255 255 / 100%); }
.Post .cnts > li strong { display:block; margin:25rem 0 10rem; font-size:30rem; width: calc(100% - 85rem); }
.Post .cnts > li .badge { display:flex; gap:10rem 30rem; flex-wrap:wrap; font-size:15rem; margin-top:30rem; padding-top:30rem; border-top:1px solid rgb(255 255 255 / 10%); }
.Post .cnts > li .badge li { display:flex; gap:8rem; align-items:center; }
.Post .cnts > li .badge li:before { position:relative; content:''; display:block; width:4rem; height:4rem; border-radius:50rem; background:#BDDCC5; }
@media (max-width: 1440px) {
    .Post .cnts { gap:24rem; }
    .Post .cnts > li:before { width: 60rem; height: 60rem; }
    .Post .cnts > li .txt { font-size:16rem; }
    .Post .cnts > li strong { width: calc(100% - 60rem); font-size: 26rem; }
    .Post .cnts > li p, .Post .cnts > li .badge { font-size:16rem; }
    .Post .cnts > li p { height: 80rem; }
}
@media (max-width: 1280px) {
    .Post .top-box2 { flex-wrap:wrap; }
    .Post .cnts > li { padding: 20rem 20rem; }
    .Post .cnts > li:before { right:18rem; }
}
@media (max-width: 1024px) {
    .Post .cnts > li:before { width: 40rem; height: 40rem; top: 20rem; }
    .Post .cnts > li strong { width: 100%; font-size: 22rem; }
    .Post .cnts > li p br { display:none; }
}
@media (max-width: 768px) {
    .Post .cnts { grid-template-columns: repeat(1, 1fr); }
    .Post .cnts > li p { height:auto; }
    .Post .cnts > li strong br { display:none; }
}
.Library .top-box2, .SNS .top-box2 { position:relative; display:flex; align-items:center; margin-bottom:60rem; justify-content: space-between; }
.Library .top-box2 span, .SNS .top-box2 span { display:flex; align-items:center; gap:20rem; font-size:18rem; text-align:center; }
.Library .top-box2 span:before, .SNS .top-box2 span:before { position:relative; content:''; display:block; width:30rem; height:1px; background:#D9D9D9; }
.Library .top-box2 span:after, .SNS .top-box2 span:after { display:none; }
.Library .top-box2 > div, .SNS .top-box2 > div { position:relative; display:flex; align-items: center; }
.Library .top-box2 > div:before, .SNS .top-box2 > div:before { position:absolute; content:''; width:97rem; height:37rem; background:url(/design2026/apec/img/main/Library-deco.png) no-repeat top/contain; right:-40rem; top:-20rem; }
.Library .top-box2 > div h2, .SNS .top-box2 > div h2 { font-size:56rem; background: linear-gradient(135deg, #F1EEFE 0%, #CDD2EA 32%, #D1F1F4 75%, #F3D9DB 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-align:center; margin: 0 40rem 0 0rem; font-family: 'KMU80'; }
.Library .top-box2 > div .stxt, .SNS .top-box2 > div .stxt { text-align:center; color:rgb(255 255 255 / 70%); font-size:18rem; font-family: 'KMU80'; }
.Library, .SNS { position: relative; }
.Library .cnts, .SNS .cnts { position: relative; box-sizing: border-box; width: 100%; padding: 20px 60px 25px; overflow: hidden; }
.Library .library-slider, .SNS .sns-slider { width: 100%; }
.Library .library-item, .SNS .sns-item { box-sizing: border-box; padding: 0 21px; text-align: center; }
.Library .library-item a, .SNS .sns-item a { display: block; color: #fff; text-decoration: none; }
.Library .library-item .thumb, .SNS .sns-item .thumb { width: 100%; aspect-ratio: 0.71 / 1; overflow: hidden; background: #0e1c36; }
.SNS .sns-item .thumb { aspect-ratio: 0.79 / 1; }
.Library .library-item .thumb.none, .SNS .sns-item .thumb.none { background:#fff; }
.Library .library-item .thumb img, .SNS .sns-item .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; transition: .3s; }
.Library .library-item:hover .thumb img, .SNS .sns-item:hover .thumb img { transform: scale(1.1); }
.Library .library-item .category, .Library .library-item strong, .SNS .sns-item .category, .SNS .sns-item strong { font-family:'KMU80'; }
.Library .library-item .category, .SNS .sns-item .category { margin-top: 24px; color:rgba(255,255,255,.5); font-size: 16px; line-height: 1.4; white-space: nowrap; }
.Library .library-item strong, .SNS .sns-item strong { display: block; margin-top: 3px; color: #fff; font-size: 26px; font-weight: 500; line-height: 1.4; }
.SNS .sns-item strong { font-size: 20px; font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.5; }
.Library .library-prev, .Library .library-next, .SNS .sns-prev, .SNS .sns-next { position: absolute; top: 50%; z-index: 10; width: 42px; height: 60px; padding: 0; margin: 0; border: 0; background: transparent; transform: translateY(-50%); cursor: pointer; }
.Library .library-prev::before, .Library .library-next::before, .SNS .sns-prev::before, .SNS .sns-next::before { content: ''; position: absolute; top: 50%; width: 15px; height: 15px; border-top: 3px solid #fff; border-right:3px solid #fff; transform: translateY(-50%); }
.Library .library-prev, .SNS .sns-prev { left: 3px; }
.Library .library-prev::before, .SNS .sns-prev::before { left: 16px; transform: translateY(-50%) rotate(-135deg); }
.Library .library-next, .SNS .sns-next { right: 3px; }
.Library .library-next::before, .SNS .sns-next::before { right: 16px; transform: translateY(-50%) rotate(45deg); }
.Library .slick-list, .SNS .slick-list { margin: 0; }
.Library .slick-track, .SNS .slick-track { display: flex; align-items: flex-start; }
.Library .slick-slide, .SNS .slick-slide { height: auto; }
.Library .slick-slide > div, .SNS .slick-slide > div { height: 100%; }
@media (max-width: 1200px) {
    .Library .cnts, .SNS .cnts { padding-left: 55px; padding-right: 55px; }
    .Library .library-item, .SNS .sns-item { padding: 0 15px; }
}
@media (max-width: 768px) {
    .Library .cnts, .SNS .cnts { padding: 18px 45px 22px; border-width: 5px; }
    .Library .library-item, .SNS .sns-item { padding: 0 10px; }
    .Library .library-item .category, .SNS .sns-item .category { font-size: 10px; }
    .Library .library-item strong, .SNS .sns-item strong { font-size: 14px; }
    .Library .library-prev, .Library .library-next, .SNS .sns-prev, .SNS .sns-next { width: 35px; }
    .Library .library-prev, .SNS .sns-prev { left: 0; }
    .Library .library-next, .SNS .sns-next { right: 0; }
}
@media (max-width: 630px) {
    .Library .top-box2, .SNS .top-box2 { flex-direction:column; align-items: flex-start; }
}
#cnts2 { --apec-rise:40px; --apec-ease:cubic-bezier(.16,1,.3,1); }
:is(#cnts2,#cnts3,#cnts4,#cnts5):not(.apec-enter-once) .top-box > span,:is(#cnts6,#cnts7,#cnts8):not(.apec-enter-once) .top-box2 > span,#cnts2:not(.apec-enter-once) .cnts > li,#cnts3:not(.apec-enter-once) .timeline__list > li,:is(#cnts4,#cnts6):not(.apec-enter-once) .cnts > li,#cnts5:not(.apec-enter-once) .Records-slider-wrapper,:is(#cnts7,#cnts8):not(.apec-enter-once) .cnts { opacity:0; }
#cnts2:not(.apec-enter-once) .top-box > .stxt,:is(#cnts3,#cnts4,#cnts5):not(.apec-enter-once) .top-box > .stxt,#cnts6:not(.apec-enter-once) .top-box2 > .stxt,:is(#cnts7,#cnts8):not(.apec-enter-once) .top-box2 > div > .stxt { opacity:0; }
#cnts2:not(.apec-enter-once) .top-box > h2,:is(#cnts3,#cnts4,#cnts5):not(.apec-enter-once) .top-box > h2 { clip-path:inset(0 50% 0 50%); }
#cnts6:not(.apec-enter-once) .top-box2 > h2,:is(#cnts7,#cnts8):not(.apec-enter-once) .top-box2 > div > h2 { clip-path:inset(0 100% 0 0); }
:is(#cnts2,#cnts3,#cnts4,#cnts5).apec-enter-once .top-box > span { animation:apecEnterUp .8s var(--apec-ease,cubic-bezier(.22,1,.36,1)) 0s backwards; }
:is(#cnts6,#cnts7,#cnts8).apec-enter-once .top-box2 > span { animation:apecEnterUp .8s var(--apec-ease,cubic-bezier(.22,1,.36,1)) 0s backwards; }
#cnts2.apec-enter-once .top-box > h2 { animation:apecEnterCenter 2s var(--apec-ease,cubic-bezier(.22,1,.36,1)) .5s backwards; }
:is(#cnts3,#cnts4,#cnts5).apec-enter-once .top-box > h2 { animation:apecEnterCenter 2s var(--apec-ease,cubic-bezier(.22,1,.36,1)) .15s backwards; }
#cnts6.apec-enter-once .top-box2 > h2 { animation:apecEnterLeft 2s var(--apec-ease,cubic-bezier(.22,1,.36,1)) .15s backwards; }
:is(#cnts7,#cnts8).apec-enter-once .top-box2 > div > h2 { animation:apecEnterLeft 1.5s var(--apec-ease,cubic-bezier(.22,1,.36,1)) .15s backwards; }
#cnts2.apec-enter-once .top-box > .stxt { animation:apecEnterFade .8s ease-out .35s backwards; }
:is(#cnts3,#cnts4,#cnts5).apec-enter-once .top-box > .stxt { animation:apecEnterFade .9s ease-out .35s backwards; }
#cnts6.apec-enter-once .top-box2 > .stxt { animation:apecEnterFade .9s ease-out .35s backwards; }
:is(#cnts7,#cnts8).apec-enter-once .top-box2 > div > .stxt { animation:apecEnterFade .9s ease-out .35s backwards; }
#cnts2.apec-enter-once .cnts > li { animation:apecEnterUp .9s var(--apec-ease,cubic-bezier(.22,1,.36,1)) calc(.45s + var(--apec-order,0) * .15s) backwards; }
#cnts3.apec-enter-once .timeline__list > li { animation:apecEnterUp .9s var(--apec-ease,cubic-bezier(.22,1,.36,1)) calc(.5s + var(--apec-order,0) * .15s) backwards; }
:is(#cnts4,#cnts6).apec-enter-once .cnts > li { animation:apecEnterUp .9s var(--apec-ease,cubic-bezier(.22,1,.36,1)) calc(.5s + var(--apec-order,0) * .15s) backwards; }
#cnts5.apec-enter-once .Records-slider-wrapper { animation:apecEnterUp 1s var(--apec-ease,cubic-bezier(.22,1,.36,1)) .5s backwards; }
:is(#cnts7,#cnts8).apec-enter-once .cnts { animation:apecEnterUp 1s var(--apec-ease,cubic-bezier(.22,1,.36,1)) .5s backwards; }
:is(#cnts2,#cnts4,#cnts6) .cnts > li:nth-child(2),#cnts3 .timeline__list > li:nth-child(2) { --apec-order:1; }
:is(#cnts2,#cnts4,#cnts6) .cnts > li:nth-child(3),#cnts3 .timeline__list > li:nth-child(3) { --apec-order:2; }
:is(#cnts2,#cnts4,#cnts6) .cnts > li:nth-child(4),#cnts3 .timeline__list > li:nth-child(4) { --apec-order:3; }
:is(#cnts2,#cnts4,#cnts6) .cnts > li:nth-child(5),#cnts3 .timeline__list > li:nth-child(5) { --apec-order:4; }
@keyframes apecEnterUp {
    from { opacity:0; translate:0 var(--apec-rise,35px); }
    to { opacity:1; translate:0 0; }
}
@keyframes apecEnterFade {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes apecEnterCenter {
    from { clip-path:inset(0 50% 0 50%); }
    to { clip-path:inset(0 0 0 0); }
}
@keyframes apecEnterLeft {
    from { clip-path:inset(0 100% 0 0); }
    to { clip-path:inset(0 0 0 0); }
}
:is(#cnts2,#cnts3,#cnts4,#cnts5) .top-box > span:focus-within,:is(#cnts6,#cnts7,#cnts8) .top-box2 > span:focus-within,#cnts2 .top-box > h2:focus-within,:is(#cnts3,#cnts4,#cnts5) .top-box > h2:focus-within,#cnts6 .top-box2 > h2:focus-within,:is(#cnts7,#cnts8) .top-box2 > div > h2:focus-within,#cnts2 .top-box > .stxt:focus-within,:is(#cnts3,#cnts4,#cnts5) .top-box > .stxt:focus-within,#cnts6 .top-box2 > .stxt:focus-within,:is(#cnts7,#cnts8) .top-box2 > div > .stxt:focus-within,#cnts2 .cnts > li:focus-within,#cnts3 .timeline__list > li:focus-within,:is(#cnts4,#cnts6) .cnts > li:focus-within,#cnts5 .Records-slider-wrapper:focus-within,:is(#cnts7,#cnts8) .cnts:focus-within { animation:none !important; opacity:1 !important; clip-path:none !important; translate:none !important; }
@media(prefers-reduced-motion:reduce) {
    :is(#cnts2,#cnts3,#cnts4,#cnts5):is(.apec-enter-once,:not(.apec-enter-once)) .top-box > span,:is(#cnts6,#cnts7,#cnts8):is(.apec-enter-once,:not(.apec-enter-once)) .top-box2 > span,#cnts2:is(.apec-enter-once,:not(.apec-enter-once)) .top-box > h2,:is(#cnts3,#cnts4,#cnts5):is(.apec-enter-once,:not(.apec-enter-once)) .top-box > h2,#cnts6:is(.apec-enter-once,:not(.apec-enter-once)) .top-box2 > h2,:is(#cnts7,#cnts8):is(.apec-enter-once,:not(.apec-enter-once)) .top-box2 > div > h2,#cnts2:is(.apec-enter-once,:not(.apec-enter-once)) .top-box > .stxt,:is(#cnts3,#cnts4,#cnts5):is(.apec-enter-once,:not(.apec-enter-once)) .top-box > .stxt,#cnts6:is(.apec-enter-once,:not(.apec-enter-once)) .top-box2 > .stxt,:is(#cnts7,#cnts8):is(.apec-enter-once,:not(.apec-enter-once)) .top-box2 > div > .stxt,#cnts2:is(.apec-enter-once,:not(.apec-enter-once)) .cnts > li,#cnts3:is(.apec-enter-once,:not(.apec-enter-once)) .timeline__list > li,:is(#cnts4,#cnts6):is(.apec-enter-once,:not(.apec-enter-once)) .cnts > li,#cnts5:is(.apec-enter-once,:not(.apec-enter-once)) .Records-slider-wrapper,:is(#cnts7,#cnts8):is(.apec-enter-once,:not(.apec-enter-once)) .cnts { animation:none !important; opacity:1 !important; clip-path:none !important; translate:none !important; }
}

/* cnts7~8 타이틀 장식: 최초 진입 시 좌 → 우 + 페이드 */
:is(#cnts7,#cnts8):not(.apec-enter-once) .top-box2 > div::before { opacity:0; }
:is(#cnts7,#cnts8).apec-enter-once .top-box2 > div::before { animation:apecDecoRight .9s cubic-bezier(.22,1,.36,1) .3s backwards; }
@keyframes apecDecoRight {
    from { opacity:0; translate:-30px 0; }
    to { opacity:1; translate:0 0; }
}
@media(prefers-reduced-motion:reduce) {
    :is(#cnts7,#cnts8) .top-box2 > div::before { animation:none !important; opacity:1 !important; translate:none !important; }
}

.cnts .bt_wrap { display: flex; justify-content: center; margin:50rem 0 0; gap:10rem}
.btn.link { padding:20rem 36rem; border:1px solid rgba(255,255,255,.2); border-radius:4rem; display:inline-flex; align-items:center; gap:20rem; transition: ease .3s; font-family: 'KMU80';}
.btn.link:hover { border:1px solid rgba(255,255,255,1); background: rgba(255,255,255,.1); transition: ease .3s;}
.btn.link:after { display: block; width: 34rem; height: 34rem; content: '';}
.btn.link:nth-of-type(1):after { background: url(/design2026/apec/img/common/Instagram.png) no-repeat center / contain;}
.btn.link:nth-of-type(2):after { background: url(/design2026/apec/img/common/Facebook.png) no-repeat center / contain;}
@media all and (max-width:540px){
    .cnts .bt_wrap { display: block;}
	.btn.link { position: relative; padding: 16rem 20rem; width: 100%;}
    .btn.link:nth-of-type(2) { margin-top: 8rem;}
    .btn.link:after { position: absolute; right: 20rem;}
}