/* reaset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,
fieldset,figcaption,figure,footer,form,header,hgroup,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,pre,q,
ruby,s,samp,section,small,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:middle;text-decoration: none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}
h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0;border:0;font-size:100%;font-weight: 500; vertical-align:baseline}
menu,ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}


/* ===========================
    폰트
=========================== */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}


/* ===========================
    기반 및 공통 적용
=========================== */
:root {
    /* 브랜드 컬러 및 톤앤매너 */
    --color-primary: #00BBFF;
    --color-secondary: #163EEE;
    --color-white: #FFFFFF;
    --color-dark-gray: #717171;
    --color-gray: #C1C1C1;
    --color-light-gray: #EEEEEE;
    --color-light-blue: #FAFDFF;
    --color-black: #000000;
    --font-size-70: clamp(30px, 8vw, 7rem);
    --font-size-50: clamp(32px, 4vw, 5rem);
    --font-size-36: clamp(24px, 2.7vw, 3.6rem);
    --font-size-28: clamp(20px, 2.5vw, 2.8rem);
    --font-size-26: clamp(18px, 2.5vw, 2.6rem);
    --font-size-24: clamp(16px, 2.5vw, 2.4rem);
    --font-size-20: clamp(14px, 3vw, 2rem);
    --font-size-18: clamp(14px, 2vw, 1.8rem);
    --font-size-16: clamp(13px, 2vw, 1.6rem);
    --font-size-14: clamp(12px, 2vw, 1.4rem);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; font-size: 62.5%; }
@media only screen and (max-width:1280px){
    html { font-size: 55%; }
}
@media only screen and (max-width:960px){
    html { font-size: 50%; }
}
@media only screen and (max-width:499px){
    html { font-size: 45%; }
}
body { overflow-x: hidden; font-family:'Pretendard', sans-serif !important; font-weight: 500 !important; color: var(--color-black); line-height:1.5; word-break: keep-all; overflow-wrap: break-word; }
input, button, textarea { font-family: inherit; }
img { width: 100%; display:block; }
a { text-decoration: none; color: inherit; }
#wrap { width: 100%; margin:0 auto; }
main { position: relative; overflow: hidden; }
section:not(.hero) { backdrop-filter: blur(15px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, #FFF 20%, #FFF 80%, rgba(255, 255, 255, 0.60) 100%) !important; }
article{ padding: 17rem 0; }
.bg-top { width: max(1440px,100vw); position: absolute; transform: translateX(-50%); left: 50%; z-index: -1; }
.bg-bottom { width: clamp(500px, 80vw, 144rem); position: absolute; z-index: -1; left: -11rem; bottom: 0; }
.container { max-width: calc(1440px + 5%); margin: 0 auto; }
.inner { margin:0 auto; padding: 0 5%; display: flex; flex-wrap: wrap; align-items: center; align-self: stretch; }
.inner-column { flex-direction: column; gap: 7rem; position: relative; }
.inner-row { flex-direction: row; justify-content: space-between; }


/* ===========================
    랜딩 페이지
=========================== */
/* ----- 헤더 ----- */
header { width: 100%; backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.70); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); position: fixed; top: 0; z-index: 1000; transition:.3s; }
.logo-svg { width: clamp(170px, 20vw, 29rem); }
nav { display:flex; align-items:center; gap: 0 3rem; position: relative; z-index:1001; }
nav a { padding: 4rem 0.5rem; font-size: var(--font-size-20); transition: color 0.2s ease; }
nav a:hover { color: var(--color-secondary); }
.nav-dim { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:.3s; z-index:999; }
/* 네비 모바일 */
header.active { display: block; background: rgba(255, 255, 255, 0); }
nav.active { right: 0; }
.nav-dim.active { opacity:1; visibility:visible; }
@media only screen and (min-width:961px){
    nav .btn { width: clamp(75px, 10vw, 130px); margin-left: 1rem; }
    nav .btn button { padding: 0.7rem 0.5rem; font-size: var(--font-size-20); }
}
@media only screen and (max-width:960px){
    nav { width: min(400px,85vw); height: 100vh; padding: 9rem 0; background: #fff; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; transition: right .4s ease; position: fixed; top: 0; right: -100%; z-index: 1001; }
    nav a { width: 100%; border-bottom: 1px solid var(--color-light-gray); font-size: var(--font-size-28); text-align: center; }
    nav a:first-child { border-top: 1px solid var(--color-light-gray); }
    nav a:hover { background: var(--color-light-blue); color: var(--color-secondary); }
    nav .btn { margin: 5rem 0 0; }
}
@media only screen and (max-width:499px){
    nav { width: 100%; }
}
/* 등록하기 버튼 */
.btn { border-radius: 5rem; box-shadow: 0 0 0.2rem color-mix(in srgb, var(--color-primary) 50%, transparent), 0 0 0.5rem color-mix(in srgb, var(--color-secondary) 30%, transparent); text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; transition: transform 0.2s ease; z-index: 1; }
.btn:hover { transform: scale(0.97); }
.btn-primary { width: clamp(200px, 25vw, 300px); background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.btn-primary::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--color-secondary); transition: height 0.3s ease; z-index: -1; }
.btn-primary:hover::before { height: 100%; }
.btn-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-self: stretch; gap: 2rem 1.5rem; }
.btn-wrapper .btn-primary { width: clamp(215px, 35vw, 340px); }
.btn-line { width: clamp(215px, 35vw, 340px); }
.btn-line::before { content: ''; position: absolute; width: 500%; height: 500%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); background: conic-gradient(var(--color-primary),  var(--color-secondary), var(--color-primary)); }
.btn-line::after { content: ''; position: absolute; inset: 0.35rem; border-radius: inherit; background: var(--color-white); }
.btn-line:hover::before { animation: spinBorder 2s linear infinite; }
@keyframes spinBorder{
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
button { width: 100%; padding: 1.7rem 0; font-size: var(--font-size-28); font-weight: 600; background: none; border: none; position: relative; cursor: pointer; z-index: 3; transition: color 0.3s ease; }
.btn-primary button { color: var(--color-white); }
.btn-line button { color: var(--color-black); }
@media only screen and (max-width:960px){
    button { padding: 1.5rem 0; }
}
/* 네비 메뉴 버튼 */
.btn-menu { width: 30px; height: 20px; position:relative; display: none; }
.btn-menu .line-on { display: block; height: 2px; border-radius: 1rem; background: var(--color-black); position:absolute; transition: all .2s ease; }
.btn-menu .line-top { width: 30px; top: 0; }
.btn-menu .line-off { width: 20px; transform: translateY(-50%); top: 50%; }
.btn-menu .line-bottom { width: 10px; bottom: 0; }
.btn-menu:not(.active):hover .line-off,
.btn-menu:not(.active):hover .line-bottom { width:30px; }
.btn-menu.active .line-top { width: 30px; transform: translateY(-50%) rotate(45deg); top: 50%; }
.btn-menu.active .line-off { opacity: 0; }
.btn-menu.active .line-bottom { width: 30px; transform: translateY(-50%) rotate(-45deg); top: 50%; bottom: auto; }
@media only screen and (max-width:960px){
    .btn-menu { margin: 3rem 0; display: grid; align-items: center; cursor:pointer; z-index: 1001; }
}
/* ----- 비주얼 ----- */
.hero { position: relative; overflow: hidden; padding: 23rem 0 35rem; }
.hero .inner { align-items: flex-start; gap: 5rem; }
.hero-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; }
.hero-title h2 { width: clamp(320px, 80vw, 90rem); }
.hero-info { display: flex; flex-wrap: wrap; gap: 1rem 5rem; }
.hero-info p { font-size: var(--font-size-28); font-weight: 400; text-align: left; position: relative; }
.hero-info p::after { content: "|"; position: absolute; right: -3rem; }
.hero-info p:last-child:after { content: none; }
/* 페이지에 따른 비주얼 텍스트, 버튼 노출 여부 */
.active { display: flex; }
.inactive { display: none !important; }
@media only screen and (max-width:579px){
    .hero-info p::after { content: none; }
}
/* ----- 카운트다운 ----- */
.title { font-size: var(--font-size-50); text-align: center; }
.title h3 { font-weight: 700; }
.title p { font-weight: 400; }
.countdown-timer { width: min(100%,1112px); padding: 0 3rem; border-radius: 3rem; border: 1px solid var(--color-white); backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.70); box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.05); font-family: 'Montserrat'; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.countdown-timer-unit { padding: 6rem 0; display: flex; flex-direction: column; flex: 1 0 0; align-items: center; gap: 2rem; position:relative; }
.countdown-timer .separator { padding: 0 1rem; color: var(--color-primary); font-size: var(--font-size-70); display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; }
.time-digits { display: flex; gap: 0.5rem; }
.time-label { font-size: var(--font-size-20); color: var(--color-primary); }
.digit { position: relative; }
.digit-face { color: var(--color-primary); font-size: var(--font-size-70); display: flex; justify-content: center; align-items: center; backface-visibility: hidden; }
.digit.flip .digit-face { animation: flip .6s ease; }
@keyframes flip{
    0% { transform:rotateX(0deg); }
    50% { transform:rotateX(-90deg); } 
    100% { transform:rotateX(0deg); }
}
@media only screen and (max-width:499px){
    .countdown-timer { padding: 0 2rem; }
    .countdown-timer-unit { padding: 10% 0; gap: unset; }
    .countdown-timer .separator { font-weight: 400; }
    .time-digits { gap: 0.2rem; }
    .time-label { font-size: 12px; font-weight: 400; }
}
/* ----- 아젠다 ----- */
.agenda { position: relative; }
.agenda .inner { padding: unset; }
.agenda-typography { padding: 7rem 0; border-top: 3px solid rgba(255, 255, 255, 0.50); border-bottom: 3px solid rgba(255, 255, 255, 0.50); backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.01); display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; overflow: hidden; position: relative; }
.agenda-title { line-height: 7rem; position: relative; z-index: 2; }
.agenda-title p { font-weight: 700; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.agenda img { position: absolute; opacity: 0; will-change: transform, opacity; transition: opacity 0.1s linear; }
.agenda-asset-front { width: 6rem; top: 0; right: 30rem; z-index: 2; }
.agenda-asset-left { width: 11rem; top: 20%; left: 22rem; }
.agenda-asset-right { width: 17rem; top: 45%; right: 15rem; }
.agenda-asset-typography{
    position: absolute;
    opacity: 0.1;
    animation: rollingUp 10s linear infinite;
}
@keyframes rollingUp{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-50%);
    }
}
/*
.agenda-asset-typography { position: absolute; opacity: 0.1; top: -23rem; }
*/
.agenda-asset-typography p { font-size: var(--font-size-50); font-weight: 700; text-align: center; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 9rem; }
@media only screen and (max-width:960px){
    .agenda-asset-front { right: 15%; }
    .agenda-asset-left { left: 10%; }
    .agenda-asset-right { right: 3%; }
    .agenda-typography { padding: 10rem 0; }
    .agenda-asset-typography { top: -34rem; }
}
/* ----- 행사장 안내 ----- */
.venue-title {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  align-self: stretch;  gap: 1.5rem; }
.venue-title p { font-size: var(--font-size-36); font-weight: 400; }
.venue-desc ul { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; gap: 0.5rem; }
.venue-desc ul li { color: var(--color-dark-gray); font-size: var(--font-size-28); font-weight: 400; display: flex; align-items: center; justify-content: center; }
.venue-subway-line { margin: 0 0.3rem 0 1rem; width: var(--font-size-26); aspect-ratio: 1 / 1; border-radius: 6rem; border: 1px solid var(--color-dark-gray); font-weight: 700; font-size: var(--font-size-18); line-height: 1; display: flex; justify-content: center; align-items: center; }
.venue-map { width: min(100%,1112px); margin: 0 auto; }
.venue-map img { border-radius: 3rem; border: 1px solid var(--color-white); backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.70); box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.05); }
/* ----- 푸터 ----- */
footer { padding: 5rem 0; backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.90); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); }
footer .inner { gap: 8rem; }
footer a { color: var(--color-dark-gray); transition: color 0.2s ease; }
footer a:hover { color: var(--color-black); }
.footer-info { display: flex; flex-direction: column; align-self: stretch; gap: 3rem; }
.footer-copy { color: var(--color-dark-gray); font-size: var(--font-size-18); display: flex; flex-wrap: wrap; gap: 0.5rem 4rem; }
.footer-copy span { font-weight: 400; position: relative; }
.footer-copy span::after { content: "|"; position: absolute; right: -2rem; }
.footer-copy span:last-child::after { content: none; }
.footer-links { display: flex; align-items: center; gap: 4rem; }
.footer-links a { font-size: var(--font-size-28); font-weight: 600; }
@media only screen and (max-width:960px){
    footer .inner { flex-direction: column; align-items: flex-start; }
    .footer-copy { flex-direction: column; }
    .footer-copy span::after { content: none; }
}


/* ===========================
    자주 묻는 질문 페이지
=========================== */
/* ----- 질문 리스트 ----- */
.faq-list { width: min(100%,1112px); border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); backdrop-filter: blur(20px); background: var(--color-white); }
.faq-list-unit { border-bottom: 1px solid var(--color-light-gray); display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
.faq-list-unit:last-child { border-bottom: none; }
.faq-question { width: 100%; padding: 4rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-question-text { width: calc(100% - 5rem); display: flex; align-items: flex-start; gap: 3rem; }
.faq-question-text span { color: var(--color-gray); font-size: var(--font-size-26); font-weight: 700; }
.faq-question-text strong { font-size: var(--font-size-24); font-weight: 600; line-height: 1.7; }
.faq-arrow,
.privacy-arrow { width: 1.2rem; height: 1.2rem; border-right: 0.3rem solid var(--color-black); border-bottom: 0.3rem solid var(--color-black); transform: rotate(45deg); transition: 0.3s ease; }
.faq-answer { width: 100%; padding: 0 4rem 4rem 9rem; display: none; }
.faq-answer p { font-size: var(--font-size-20); font-weight: 400; }
.text-highlight { color: var(--color-secondary); }
/* 질문 아코디언 */
.faq-list-unit.active { background: var(--color-light-blue); }
.faq-list-unit.active .faq-arrow,
.privacy-list.active .privacy-arrow { transform: rotate(-135deg); }
@media only screen and (max-width:499px){
    .faq-question { padding: 3rem 7%; }
    .faq-question-text { gap: 5%; }
    .faq-answer { padding: 0px 7% 3rem; }
}

/* ===========================
   등록하기 페이지
=========================== */
/* ----- 정보 입력 ----- */
form { width: min(100%,1112px); margin-top: 6rem; display: flex; flex-direction: column; align-items: center; gap: 7rem; }
label { cursor: pointer; }
.register-list { width: 100%; }
.register-list-title { display: flex; justify-content: space-between; align-items: flex-end; align-self: stretch; gap: 1rem; }
.register-list-title h4 { font-size: var(--font-size-28); font-weight: 600; }
.register-list-title p { color: var(--color-primary); font-size: var(--font-size-18); font-weight: 300; }
.register-list-unit ul { width: 100%; margin-top: 3rem; border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); background: var(--color-white); display: inline-grid; align-self: stretch; grid-template-rows: repeat(4,fit-content(100%)); grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: row; }
.register-list-unit ul li { padding: 4rem; border-bottom: 1px solid var(--color-light-gray); display: flex; flex-direction: column; align-items: flex-start; justify-self: stretch; grid-row: span 1; grid-column: span 1; gap: 1.5rem; }
.register-list-unit ul li label,
.register-list-unit ul li > span { font-size: var(--font-size-24); }
.register-list-unit ul li label span { color: var(--color-primary); }
.register-list-unit ul li p { font-size: var(--font-size-18); font-weight: 300; color: var(--color-primary); }
.register-list-radio { grid-column: 1 / -1 !important; }
input[type=text],
input[type=email],
select { width: 100%; padding: 1rem 2.5rem; border: 1px solid var(--color-gray); border-radius: 3rem; background: var(--color-white); color: var(--color-gray); font-size: var(--font-size-20); }
select { padding: 1.35rem 2.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 20px center; appearance: none; }
input[type=radio],
input[type=checkbox] { width: 2rem; height: 2rem; cursor: pointer; }
input[type="radio"]:checked + label { color: var(--color-black); }
input::placeholder{ color: var(--color-gray); }
input:focus,
input:not(:placeholder-shown),
select:focus { outline: none; border-color: var(--color-black); color: var(--color-black); }

.radio-wrapper { display: flex; flex-wrap: wrap; align-items: center; }
.radio-wrapper label { margin-right: 3rem; color: var(--color-gray); }
.radio-wrapper label { padding-left: clamp(7px, 2vw, 1.5rem); }
@media only screen and (max-width:960px){
    .register-list-title { display: grid; }
    .register-list-unit ul { grid-template-columns: auto; }
    .register-list-unit ul li { padding: 3rem; }
}
@media only screen and (max-width:499px){
    .register-list-unit ul li { padding: 3rem 5%; }
}
/* ----- 정보 수집 동의 ----- */
.privacy label { padding-left: clamp(7px, 2vw, 1.5rem); }
.privacy { width: 100%; padding: 4rem; background: #F9F9F9; }
.privacy-select { margin-bottom: 3rem; cursor: pointer; }
.privacy-select label { font-size: var(--font-size-18); }
.privacy-list { border-bottom: 0.5px solid var(--color-light-gray); background: var(--color-white); flex-direction: column; }
.privacy-title { width: 100%; padding: 3rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.privacy-title label { font-size: var(--font-size-18); }
.privacy-title span { color: var(--color-primary); font-size: var(--font-size-16); }
.privacy-info { padding: 0 3rem 3rem; display: none; }
.privacy-info span { display: inline-block; margin-bottom: 1rem; font-size: var(--font-size-16); font-weight: 500; }
.privacy-info p { color: var(--color-dark-gray); font-size: var(--font-size-16); font-weight: 300; line-height: 2; }
.privacy-info .text-bold { font-weight: 600; }
@media only screen and (max-width:960px){
    .privacy { padding: 3rem; }
    .privacy-title { padding: 3rem; }
    .privacy-select { margin-bottom: 2rem; }
    .privacy-info { padding: 0 3rem 3rem; }
}
@media only screen and (max-width:499px){
    .privacy { padding: 3rem 5%; }
    .privacy-title { padding: 3rem 5%; }
    .privacy-info { padding: 0 5% 3rem; }
}


/* ===========================
    완료 페이지
=========================== */
.success-title p { margin-top: 3rem; font-size: var(--font-size-28); }


/* ===========================
    개인정보 처리방침 페이지
=========================== */
.policy-list { width: min(100%,1112px); border-top: 2px solid var(--color-gray); border-bottom: 2px solid var(--color-gray); background: var(--color-white); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); }
.policy-list-unit { padding: 4rem; border-bottom: 1px solid var(--color-light-gray); }
.policy-list-unit:last-child { border-bottom: none; }
.policy-list-title h4 { font-size: var(--font-size-24); font-weight: 600; }
.policy-list-detail { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; }
.policy-list-detail p { font-size: var(--font-size-18); font-weight: 300; }
.policy-list-text { display: flex; flex-wrap: wrap; gap: 1rem; }
.policy-list-body { padding: 0 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.policy-list-text p { font-size: var(--font-size-18); font-weight: 300; }
.policy-list-text .text-bold { font-weight: 600; }
table { width:100%; border-collapse: collapse; font-size: var(--font-size-18); }
table th,
table td { border: 1px solid var(--color-light-gray); padding: 1.5rem 2rem; text-align: center; vertical-align: middle; }
table th { background: var(--color-light-gray); }
table td { font-weight: 300; }


/* ===========================
    지난 써밋 다시보기 페이지
=========================== */
/* replay */
.replay { padding: 23rem 0 17rem; }
.replay-list { width: 100%; }
.replay-list ul { display: flex; flex-wrap: wrap; gap: 6rem; }
.replay-list ul li { width: calc(33.33% - 4rem);}
.replay-list ul li a { display: block; }
.replay-list ul li a h5 { margin-bottom: 2rem; font-size: var(--font-size-24); }
.replay-thumbnail { max-width: 440px; padding-top: 68.18%;/* (300px / 440px = 0.6818, 鍮꾩쑉 �좎�) */ border-radius: 1rem; box-shadow: 0 0 0.2rem color-mix(in srgb, var(--color-primary) 50%, transparent), 0 0 0.5rem color-mix(in srgb, var(--color-secondary) 30%, transparent); transition: transform 0.2s ease; }
.replay-thumbnail:hover { transform: scale(0.97); }
.thumbnail-2025 { background: url('../images/thumbnail_img_2025.png') center/cover no-repeat; }
.thumbnail-2024 { background: url('../images/thumbnail_img_2024.png') center/cover no-repeat; }
.thumbnail-2023 { background: url('../images/thumbnail_img_2023.png') center/cover no-repeat; }
@media only screen and (max-width: 960px) {
    .replay-list ul { gap: 4rem; }
    .replay-list ul  li { width: calc(50% - 2rem); }
}
@media only screen and (max-width: 750px) {
    .replay-list ul li { width:100%; }
    .replay-thumbnail { max-width: none; width: 100%; }
}
/* ondemand */
.replay-tab-wrapper { width: 100%; display: flex; flex-direction: column; gap: 10rem; }
.replay-tab-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.replay-tab-list li { padding: 0.5rem 2.5rem; border: 1px solid var(--color-gray); border-radius: 10rem; box-sizing: border-box; font-size: var(--font-size-20); color: var(--color-dark-gray); cursor: pointer; }
.replay-tab-list li:hover,
.replay-tab-list li.active { font-weight: 700; color: var(--color-white); border: 1px solid var(--color-primary); background-color: var(--color-primary); transition: all .2s ease; }
.replay-list ul li { display: none; }
.replay-list ul li.active { display: block; }
.replay-thumbnail-mov { position:relative; max-width:440px; padding-top:57.95%;/* (440px / 250px = 0.5795, 鍮꾩쑉 �좎�) */ border-radius:10px; cursor:pointer; box-shadow: 0 0 0.2rem color-mix(in srgb, var(--color-primary) 50%, transparent), 0 0 0.5rem color-mix(in srgb, var(--color-secondary) 30%, transparent); transition: transform 0.2s ease; }
.replay-thumbnail-mov:hover { transform: scale(0.97); }
.replay-thumbnail-mov span { position:absolute; top:50%; left:50%; z-index:1; display:block; width:62px; height:66px; transform: translate(-50%, -50%); background:url('../images/icon-play.png') center/cover no-repeat; opacity: 0.5; transition: all 0.2s ease; }
.replay-thumbnail-mov:hover span { opacity: 1; }
.replay-contents-text { margin-top: 2rem; }
.replay-contents-text strong { font-size: var(--font-size-24); }
.replay-speaker { margin-top: 1.5rem; font-size: var(--font-size-18); font-weight: 400; line-height: 1.7;}
.replay-speaker span { display: inline-block; font-weight: 400; }
.replay-speaker span:before { content:''; display: inline-block; width:14px; height:20px; margin-right:6px; vertical-align:-3px; background:url('../images/icon-speaker.png') center/cover no-repeat;}
.replay-speaker span:after { content:'|'; display: inline-block; padding:0 1rem; font-size:var(--font-size-16); vertical-align:0rem;}
.replay-keyword { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; margin-top: 3rem;}
.replay-keyword span { display: block; padding: 0.4rem 1.7rem; font-size: var(--font-size-16); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 10rem;}
@media only screen and (max-width: 1280px) {
    .replay-list ul {gap: 3rem; }
    .replay-list ul li { width: calc(33.33% - 2rem); }
}
@media only screen and (max-width: 960px) {
    .replay-tab-list { gap: 2rem 1rem; }
    .replay-list ul { gap: 4rem; }
    .replay-list ul li { width: calc(50% - 2rem); }
}
@media only screen and (max-width: 640px) {
    .replay-thumbnail-mov { max-width: none; width: 100%; }
    .replay-thumbnail-mov span { width: 31px; height: 33px; }
    .replay-list ul { gap: 5rem; }
    .replay-list ul li { width: 100%; }
}

.thumbnail2023-img01-1 { background: url('../images/ktcloud2023_track1_1.png') center/cover no-repeat; }
.thumbnail2023-img01-2 { background: url('../images/ktcloud2023_track1_2.png') center/cover no-repeat; }
.thumbnail2023-img01-3 { background: url('../images/ktcloud2023_track1_3.png') center/cover no-repeat; }
.thumbnail2023-img01-4 { background: url('../images/ktcloud2023_track1_4.png') center/cover no-repeat; }
.thumbnail2023-img01-5 { background: url('../images/ktcloud2023_track1_5.png') center/cover no-repeat; }
.thumbnail2023-img01-6 { background: url('../images/ktcloud2023_track1_6.png') center/cover no-repeat; }
.thumbnail2023-img01-7 { background: url('../images/ktcloud2023_track1_7.png') center/cover no-repeat; }
.thumbnail2023-img01-8 { background: url('../images/ktcloud2023_track1_8.png') center/cover no-repeat; }
.thumbnail2023-img01-9 { background: url('../images/ktcloud2023_track1_9.png') center/cover no-repeat; }
.thumbnail2023-img01-10 { background: url('../images/ktcloud2023_track1_10.png') center/cover no-repeat; }

.thumbnail2023-img02-1 { background: url('../images/ktcloud2023_track2_1.png') center/cover no-repeat; }
.thumbnail2023-img02-2 { background: url('../images/ktcloud2023_track2_2.png') center/cover no-repeat; }
.thumbnail2023-img02-3 { background: url('../images/ktcloud2023_track2_3.png') center/cover no-repeat; }
.thumbnail2023-img02-4 { background: url('../images/ktcloud2023_track2_4.png') center/cover no-repeat; }
.thumbnail2023-img02-5 { background: url('../images/ktcloud2023_track2_5.png') center/cover no-repeat; }
.thumbnail2023-img02-7 { background: url('../images/ktcloud2023_track2_6.png') center/cover no-repeat; }
.thumbnail2023-img02-8 { background: url('../images/ktcloud2023_track2_7.png') center/cover no-repeat; }
.thumbnail2023-img02-9 { background: url('../images/ktcloud2023_track2_8.png') center/cover no-repeat; }
.thumbnail2023-img02-10 { background: url('../images/ktcloud2023_track2_9.png') center/cover no-repeat; }

.thumbnail2023-img03-1 { background: url('../images/ktcloud2023_track3_1.png') center/cover no-repeat; }
.thumbnail2023-img03-2 { background: url('../images/ktcloud2023_track3_2.png') center/cover no-repeat; }
.thumbnail2023-img03-3 { background: url('../images/ktcloud2023_track3_3.png') center/cover no-repeat; }
.thumbnail2023-img03-4 { background: url('../images/ktcloud2023_track3_4.png') center/cover no-repeat; }
.thumbnail2023-img03-5 { background: url('../images/ktcloud2023_track3_5.png') center/cover no-repeat; }
.thumbnail2023-img03-6 { background: url('../images/ktcloud2023_track3_6.png') center/cover no-repeat; }
.thumbnail2023-img03-7 { background: url('../images/ktcloud2023_track3_7.png') center/cover no-repeat; }
.thumbnail2023-img03-8 { background: url('../images/ktcloud2023_track3_8.png') center/cover no-repeat; }
.thumbnail2023-img03-9 { background: url('../images/ktcloud2023_track3_9.png') center/cover no-repeat; }
.thumbnail2023-img03-10 { background: url('../images/ktcloud2023_track3_10.png') center/cover no-repeat; }

.thumbnail2024-img01-1 { background: url('../images/ktcloud2024_track1_1.png') center/cover no-repeat; }
.thumbnail2024-img01-2 { background: url('../images/ktcloud2024_track1_2.png') center/cover no-repeat; }
.thumbnail2024-img01-3 { background: url('../images/ktcloud2024_track1_3.png') center/cover no-repeat; }
.thumbnail2024-img01-4 { background: url('../images/ktcloud2024_track1_4.png') center/cover no-repeat; }
.thumbnail2024-img01-5 { background: url('../images/ktcloud2024_track1_5.png') center/cover no-repeat; }
.thumbnail2024-img01-6 { background: url('../images/ktcloud2024_track1_6.png') center/cover no-repeat; }
.thumbnail2024-img01-7 { background: url('../images/ktcloud2024_track1_7.png') center/cover no-repeat; }
.thumbnail2024-img01-8 { background: url('../images/ktcloud2024_track1_8.png') center/cover no-repeat; }
.thumbnail2024-img01-9 { background: url('../images/ktcloud2024_track1_9.png') center/cover no-repeat; }
.thumbnail2024-img01-10 { background: url('../images/ktcloud2024_track1_10.png') center/cover no-repeat; }
.thumbnail2024-img02-1 { background: url('../images/ktcloud2024_track2_1.png') center/cover no-repeat; }
.thumbnail2024-img02-2 { background: url('../images/ktcloud2024_track2_2.png') center/cover no-repeat; }
.thumbnail2024-img02-3 { background: url('../images/ktcloud2024_track2_3.png') center/cover no-repeat; }
.thumbnail2024-img02-4 { background: url('../images/ktcloud2024_track2_4.png') center/cover no-repeat; }
.thumbnail2024-img02-5 { background: url('../images/ktcloud2024_track2_5.png') center/cover no-repeat; }
.thumbnail2024-img02-6 { background: url('../images/ktcloud2024_track2_6.png') center/cover no-repeat; }
.thumbnail2024-img02-7 { background: url('../images/ktcloud2024_track2_7.png') center/cover no-repeat; }
.thumbnail2024-img02-8 { background: url('../images/ktcloud2024_track2_8.png') center/cover no-repeat; }
.thumbnail2024-img02-9 { background: url('../images/ktcloud2024_track2_9.png') center/cover no-repeat; }
.thumbnail2024-img02-10 { background: url('../images/ktcloud2024_track2_10.png') center/cover no-repeat; }
.thumbnail2024-img03-1 { background: url('../images/ktcloud2024_track3_1.png') center/cover no-repeat; }
.thumbnail2024-img03-2 { background: url('../images/ktcloud2024_track3_2.png') center/cover no-repeat; }
.thumbnail2024-img03-3 { background: url('../images/ktcloud2024_track3_3.png') center/cover no-repeat; }
.thumbnail2024-img03-4 { background: url('../images/ktcloud2024_track3_4.png') center/cover no-repeat; }
.thumbnail2024-img03-5 { background: url('../images/ktcloud2024_track3_5.png') center/cover no-repeat; }
.thumbnail2024-img03-6 { background: url('../images/ktcloud2024_track3_6.png') center/cover no-repeat; }
.thumbnail2024-img03-7 { background: url('../images/ktcloud2024_track3_7.png') center/cover no-repeat; }
.thumbnail2024-img03-8 { background: url('../images/ktcloud2024_track3_8.png') center/cover no-repeat; }
.thumbnail2024-img03-9 { background: url('../images/ktcloud2024_track3_9.png') center/cover no-repeat; }
.thumbnail2024-img03-10 { background: url('../images/ktcloud2024_track3_10.png') center/cover no-repeat; }

.thumbnail2025-keyImg01 { background: url('../images/ktcloud2025_keynote_1.png') center/cover no-repeat; }
.thumbnail2025-keyImg02 { background: url('../images/ktcloud2025_keynote_2.png') center/cover no-repeat; }

.thumbnail2025-img01-1 { background: url('../images/ktcloud2025_track1_1.png') center/cover no-repeat; }
.thumbnail2025-img01-2 { background: url('../images/ktcloud2025_track1_2.png') center/cover no-repeat; }
.thumbnail2025-img01-3 { background: url('../images/ktcloud2025_track1_3.png') center/cover no-repeat; }
.thumbnail2025-img01-4 { background: url('../images/ktcloud2025_track1_4.png') center/cover no-repeat; }
.thumbnail2025-img01-5 { background: url('../images/ktcloud2025_track1_5.png') center/cover no-repeat; }
.thumbnail2025-img01-6 { background: url('../images/ktcloud2025_track1_6.png') center/cover no-repeat; }
.thumbnail2025-img01-7 { background: url('../images/ktcloud2025_track1_7.png') center/cover no-repeat; }
.thumbnail2025-img01-8 { background: url('../images/ktcloud2025_track1_8.png') center/cover no-repeat; }
.thumbnail2025-img01-9 { background: url('../images/ktcloud2025_track1_9.png') center/cover no-repeat; }
.thumbnail2025-img01-10 { background: url('../images/ktcloud2025_track1_10.png') center/cover no-repeat; }
.thumbnail2025-img02-1 { background: url('../images/ktcloud2025_track2_1.png') center/cover no-repeat; }
.thumbnail2025-img02-2 { background: url('../images/ktcloud2025_track2_2.png') center/cover no-repeat; }
.thumbnail2025-img02-3 { background: url('../images/ktcloud2025_track2_3.png') center/cover no-repeat; }
.thumbnail2025-img02-4 { background: url('../images/ktcloud2025_track2_4.png') center/cover no-repeat; }
.thumbnail2025-img02-5 { background: url('../images/ktcloud2025_track2_5.png') center/cover no-repeat; }
.thumbnail2025-img02-6 { background: url('../images/ktcloud2025_track2_6.png') center/cover no-repeat; }
.thumbnail2025-img02-7 { background: url('../images/ktcloud2025_track2_7.png') center/cover no-repeat; }
.thumbnail2025-img02-8 { background: url('../images/ktcloud2025_track2_8.png') center/cover no-repeat; }
.thumbnail2025-img02-9 { background: url('../images/ktcloud2025_track2_9.png') center/cover no-repeat; }
.thumbnail2025-img02-10 { background: url('../images/ktcloud2025_track2_10.png') center/cover no-repeat; }

/* Modal */
#modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 9999; }
.modal-replay { position: absolute; top: 50%; left: 50%; width: min(90%,900px); padding: 3rem; border-radius: 1rem; background-color: var(--color-white); transform: translate(-50%, -50%); box-sizing: border-box; }
.modal-replay-mov { position: relative; height: 0; padding-bottom: 56.25%; padding-top: 30px; border-radius: 1rem; overflow: hidden; }
.modal-replay-mov iframe, .modal-replay-mov object, .modal-replay-mov embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.modal-replay-contents { margin-top: 3rem; }
.modal-replay-title { font-size: var(--font-size-28); font-weight: 700; color: var(--color-black); }
.modal-replay-subtext { margin: 1rem 0 2rem; font-size: var(--font-size-18); color: var(--color-black); }
.modal-replay-subtext:before { content:''; display: inline-block; width: 14px; height: 20px; margin-right: 6px; vertical-align: -3px; background: url('../images/icon-speaker.png') center/cover no-repeat;}
.modal-replay-keywords { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem;}
.modal-replay-keywords span { display: inline-block; padding: 0.4rem 1.7rem; font-size: var(--font-size-16); color: var(--color-white); border-radius: 10rem; background-color: var(--color-primary); }
@media only screen and (max-height: 670px) {
    .modal-replay { overflow-y: auto; max-height: 92%; }
}
@media only screen and (max-height: 499px) {
    .modal-replay { padding: 5%; }
}
/* 닫기 메뉴 버튼 */
.btn-close { position: absolute; top: -50px; right: 0px; width: 30px; height: 30px; cursor: pointer; }
.btn-close span { display: block; width: 30px; height: 2px; border-radius: 1rem; background: var(--color-white); position: absolute; top: 50%; left: 50%; transform-origin: center; transition: transform 0.3s ease; }
.btn-close .line-top { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close .line-bottom { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover .line-top { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover .line-bottom { transform: translate(-50%, -50%) rotate(45deg); }