@charset "utf-8";
/* 메인 — 첫 화면 회원 칸·바로가기(theme/shared/main_panel.inc.php)와 새소식 한 목록(main_news.inc.php), 2026-11
   국문·영문 index.php 가 함께 싣는다. 색: #495FA1 / #1A264B / #E5E5EC / #F8F8FA, 글 #111 / #505050 / #767676 */

/* ── 첫 화면 ─────────────────────────────── */
/* 예전엔 큰 버튼 3개와 겹쳐 올라오는 포스터 자리까지 첫 화면이 760(그림 650)이었다. 이제 글과 오른쪽 판만 담으면 되니
   섹션과 그림을 같은 높이로 줄이고(560 / 1400 이하 520 / 1024 이하 460), 글은 머리(164 / 159 / 60) 아래 남은 칸의 가운데에 둔다 */
.mp-on.Hfull,.mp-on .Hfull,.mp-on .swiper_visual .swiper-slide .main_visual{height:560px !important}
.section.mp-on .maintext_box{margin-top:82px}

/* 판은 첫 화면 섹션 바로 뒤의 높이 0짜리 칸에서 위로 띄워, 그림 아래 끝에서 30px 위에 얹힌다 */
.mp-sec{position:relative;z-index:60;height:0}
.mp-sec .width{position:relative}
.mp{position:absolute;right:0;bottom:30px;width:38rem;padding:1.8rem 2rem .4rem;border-radius:4px;background:rgba(255,255,255,.96)}
.mp-acc{padding-bottom:1.4rem;border-bottom:1px solid #E5E5EC}
.mp-hi{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.mp-hi b{min-width:0;font-size:1.9rem;font-weight:700;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-hi a{flex:0 0 auto;font-size:1.5rem;font-weight:500;color:#495FA1}
@media (hover:hover){.mp-hi a:hover{text-decoration:underline;text-underline-offset:.3rem}}
.mp-lead{margin-top:.4rem;font-size:1.45rem;color:#505050;line-height:1.5;word-break:keep-all}
.mp-btns{display:flex;gap:.8rem;margin-top:1.2rem}
.mp-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:4.4rem;border:1px solid #C9CCD8;border-radius:4px;background:#fff;font-size:1.6rem;font-weight:600;color:#1A264B;transition:border-color .2s,background-color .2s}
@media (hover:hover){.mp-btn:hover{border-color:#495FA1}}
.mp-btn.pri{border-color:#495FA1;background:#495FA1;color:#fff}
@media (hover:hover){.mp-btn.pri:hover{background:#3D5089}}
.mp-st{margin:.8rem 0 0;padding:0;list-style:none}
.mp-st li{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding:.35rem 0;font-size:1.5rem}
.mp-st span{min-width:0;color:#505050;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-st a{flex:0 0 auto;font-weight:600}
.mp-st a.ok{color:#1A7F4B}
.mp-st a.ok::before{content:"";display:inline-block;width:.9rem;height:.5rem;margin:0 .6rem .3rem 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.mp-st a.warn{color:#C2410C}
.mp-st a.warn::after,.mp-st a.muted::after{content:" \203A"}
.mp-st a.muted{font-weight:500;color:#767676}
@media (hover:hover){.mp-st a:hover{text-decoration:underline;text-underline-offset:.3rem}}
.mp-quick{margin:0;padding:0;list-style:none}
.mp-quick li+li{border-top:1px solid #E5E5EC}
.mp-quick a{display:flex;align-items:center;gap:1.4rem;padding:1rem .2rem;color:#111}
.mp-quick img{flex:0 0 auto;width:4rem;height:3rem;object-fit:contain}
.mp-quick span{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.mp-quick b{font-size:1.65rem;font-weight:600;line-height:1.35}
.mp-quick small{font-size:1.35rem;color:#767676;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-quick a::after{content:"\203A";flex:0 0 auto;font-size:2.2rem;line-height:1;color:#9AA0B4;transition:transform .2s,color .2s}
@media (hover:hover){.mp-quick a:hover b{color:#495FA1}}
@media (hover:hover){.mp-quick a:hover::after{color:#495FA1;transform:translateX(.3rem)}}

/* 첫 화면 글이 판 밑으로 들어가지 않게 */
.section.mp-on .maintext_box h2,.section.mp-on .maintext_box h3,.section.mp-on .maintext_box h4{max-width:calc(100% - 42rem)}

@media screen and (max-width:1400px){
  .mp-on.Hfull,.mp-on .Hfull,.mp-on .swiper_visual .swiper-slide .main_visual{height:520px !important}
  .section.mp-on .maintext_box{margin-top:80px}
  .mp{width:34rem}
  .section.mp-on .maintext_box h2,.section.mp-on .maintext_box h3,.section.mp-on .maintext_box h4{max-width:calc(100% - 38rem)}
}
@media screen and (max-width:1024px){
  .mp-on.Hfull,.mp-on .Hfull,.mp-on .swiper_visual .swiper-slide .main_visual{height:460px !important}
  .section.mp-on .maintext_box{margin-top:30px}
  .mp{bottom:24px;width:31rem;padding:1.4rem 1.6rem .2rem}
  .mp-acc{padding-bottom:1.2rem}
  .mp-quick a{padding:.9rem .2rem}
  .section.mp-on .maintext_box h2,.section.mp-on .maintext_box h3,.section.mp-on .maintext_box h4{max-width:calc(100% - 34rem)}
}
/* 좁은 화면: 판을 첫 화면 바로 아래로 내리고, 첫 화면 높이는 글만큼 (국문·영문 글 길이가 달라 고정 높이 대신 내용 따라) */
@media screen and (max-width:768px){
  .mp-sec{height:auto;padding-top:2rem}
  .mp{position:static;width:auto;padding:1.6rem 1.6rem .4rem;border:1px solid #E5E5EC}
  .section.mp-on .maintext_box h2,.section.mp-on .maintext_box h3,.section.mp-on .maintext_box h4{max-width:none}
  .mp-on.Hfull,.mp-on .Hfull,.mp-on .swiper_visual,.mp-on .swiper-wrapper,.mp-on .swiper-slide{height:auto !important}
  .mp-on .swiper_visual .swiper-slide .main_visual{position:absolute;top:0;right:0;bottom:0;left:0;height:auto !important;border-radius:0}   /* 왼쪽 아래 둥근 모서리는 낮아진 첫 화면에서 어색해 뺀다 */
  .section.mp-on .maintext_box{position:relative;height:auto;margin:0 auto;padding:calc(60px + 4rem) 0 4.4rem}   /* 60 = 모바일 머리 */
  /* 자세히보기 버튼 한 줄(약 70px)을 빼고 첫 화면 글 전체를 누를 수 있게 — 제목 끝 › 로 표시 */
  .section.mp-on .maintext_box .btn_more{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:0;color:transparent}
  .section.mp-on .maintext_box h2::after{content:"\203A";margin-left:.6rem;font-weight:400;opacity:.8}
  /* 상담 상자도 같은 이유로 화면 폭 그대로, 둥근 모서리 없이 */
  .section3 .left_call{width:100%;border-radius:0}
}

/* ── 배너 + 회원 검색 한 줄 (.mb-band.mb-n0~3: 배너 장수) ─────── */
/* 배너가 1~2장이면 포스터 옆 빈자리를 회원 검색이 채운다. 3장 이상이면 예전처럼 배너 줄(돌아감) 아래 검색 줄.
   예전 배너는 첫 화면 위로 100px 겹쳐 올라왔지만 이제 그 자리에 오른쪽 판이 있어 겹치지 않는다 */
.mb-band{width:95%;max-width:1240px;margin:5rem auto 0}
.mb-band .box-banner-section,.mb-band .search{margin:0 !important}
.mb-band .box-banner-section .width_m{width:auto !important;max-width:none;margin:0}
.mb-band .box-banner-container{max-width:none;margin:0 !important;padding:0}
.mb-band .search .width{width:auto !important;max-width:none;margin:0 !important}
.mb-band.mb-n3 .search{margin-top:3rem !important}
.mb-band .box-banner-img{display:block;border-radius:4px;box-shadow:none;border:1px solid #E5E5EC}
@media screen and (min-width:769px){
  .mb-n1,.mb-n2{display:flex;align-items:stretch;gap:2.4rem}
  .mb-n1 .box-banner-section{flex:0 0 40rem}
  .mb-n2 .box-banner-section{flex:0 0 62.4rem}
  .mb-n1 .box-banner-item,.mb-n2 .box-banner-item,.mb-n1 .box-banner-container.bb-n1 .box-banner-item{flex:1 1 0;padding:0}
  .mb-n2 .box-banner-wrapper{gap:2.4rem;transform:none !important}
  .mb-n2 .box-banner-indicators{display:none}
  .mb-band.mb-n3 .box-banner-container{margin:0 -10px !important}   /* 배너 칸 좌우 10px 여백만큼 내어 검색 줄과 끝을 맞춘다 */
  .mb-n1 .search,.mb-n2 .search{flex:1 1 auto;min-width:0;display:flex}
  .mb-n1 .search .width,.mb-n2 .search .width{flex:1 1 auto;min-width:0;justify-content:center;border-radius:4px;border:1px solid #E5E5EC;background:#F8F8FA}
  .mb-n2 .search .width{padding:3rem}
  .mb-n2 .search .width .ms_row select{flex-basis:14rem}
}
@media screen and (min-width:769px) and (max-width:1024px){
  .mb-n1 .box-banner-section{flex-basis:30rem}
  /* 두 장은 옆에 검색까지 들어갈 폭이 없어 배너 줄 + 검색 줄로 */
  .mb-n2{display:block}
  .mb-n2 .box-banner-section{flex:none}
  .mb-n2 .box-banner-wrapper{justify-content:center}
  .mb-n2 .box-banner-item{flex:0 0 calc(50% - 1.2rem)}
  .mb-n2 .search{display:block;margin-top:2.4rem !important}
}
@media screen and (max-width:768px){
  .mb-band{margin-top:2.4rem}
  .mb-band .box-banner-item{padding:0}
  .mb-band .search{margin-top:2rem !important}
}
/* 세로 태블릿: 포스터가 화면 폭을 다 차지하면 너무 크다 — 한 장이면 옆에 검색, 여러 장이면 폭을 줄여 가운데 */
@media screen and (min-width:600px) and (max-width:768px){
  .mb-n1{display:flex;align-items:stretch;gap:2rem}
  .mb-n1 .box-banner-section{flex:0 0 45%}
  .mb-n1 .search{flex:1 1 auto;min-width:0;display:flex;margin-top:0 !important}
  .mb-n1 .search .width{flex:1 1 auto;min-width:0;justify-content:center;border-radius:4px;border:1px solid #E5E5EC;background:#F8F8FA}
  .mb-n1 .search .width .ms_row{flex-wrap:wrap;gap:1rem}
  .mb-n1 .search .width .ms_row select{flex:1 1 100%;width:100%;height:5.2rem}
  .mb-n1 .search .width .ms_row .text_wrap{flex:1 1 0;width:auto;height:5.2rem}
  .mb-n1 .search .width .ms_row button{flex:0 0 auto;width:auto;height:5.2rem;padding:0 2.4rem}
  .mb-n2 .box-banner-container,.mb-n3 .box-banner-container{max-width:50rem;margin:0 auto !important}
}

/* ── 새소식 한 목록 ─────────────────────────── */
.mn{position:relative}
.mn .mn-head{flex-wrap:wrap;gap:1.2rem 2rem}
.mn-filter{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.mn-filter button{padding:.6rem 0;border:0;border-bottom:2px solid transparent;background:none;font-size:1.6rem;font-weight:500;color:#767676;cursor:pointer;transition:color .2s,border-color .2s}
@media (hover:hover){.mn-filter button:hover{color:#111}}
.mn-filter button[aria-pressed="true"]{border-bottom-color:#495FA1;font-weight:700;color:#111}
.mn-list{margin:0;padding:0;list-style:none;border-top:2px solid #1A264B}
.mn-list li{display:flex;align-items:center;gap:1.2rem;padding:1.5rem .4rem;border-bottom:1px solid #E5E5EC}
.mn-list li[hidden]{display:none}
.mn-tag{flex:0 0 auto;min-width:5.6rem;padding:.2rem .6rem;border-radius:4px;background:#EEF0F7;font-size:1.25rem;font-weight:600;color:#495FA1;text-align:center}
.mn-tag.t-event{background:#E8F3EE;color:#1A7F4B}
.mn-tag.t-press{background:#F1F1F4;color:#505050}
.mn-list a{flex:1 1 auto;min-width:0;font-size:1.7rem;font-weight:500;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.mn-list a:hover{color:#495FA1;text-decoration:underline;text-underline-offset:.3rem}}
.mn-n{flex:0 0 auto;font-style:normal;font-size:1.2rem;font-weight:700;color:#C2410C}
.mn-list time{flex:0 0 auto;font-size:1.4rem;color:#767676;font-variant-numeric:tabular-nums}
.mn-empty{justify-content:center;color:#767676;font-size:1.5rem}
.mn-more{display:inline-block;margin-top:1.4rem;font-size:1.5rem;font-weight:500;color:#495FA1}
@media (hover:hover){.mn-more:hover{text-decoration:underline;text-underline-offset:.3rem}}
@media screen and (max-width:768px){
  .mn-filter{gap:.4rem 1.6rem}
  .mn-filter button{font-size:1.5rem}
  .mn-list li{gap:1rem;padding:1.3rem .2rem}
  .mn-list a{font-size:1.55rem}
  .mn-tag{min-width:4.8rem;font-size:1.15rem}
}

/* ── 첫 화면 모션 (.kh) — lib/conference_hero.lib.php ─────── */
/* 행사 대표색(--kh-c) 빛이 천천히 흐르고 배경이 다가온다. 동작 줄이기면 멈춘 그림, 단추로 언제든 멈춤 */
.kh{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#1A264B}
.kh-img{position:absolute;inset:-2%;background-position:center;background-size:cover;background-repeat:no-repeat;transform-origin:62% 40%}
.kh-glow::before,.kh-glow::after{content:"";position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.kh-glow::before{width:70rem;height:70rem;top:-28rem;right:-12rem;opacity:.85;background:radial-gradient(closest-side,color-mix(in oklab,var(--kh-c) 85%,#fff),transparent)}
.kh-glow::after{width:56rem;height:56rem;bottom:-30rem;left:28%;opacity:.7;background:radial-gradient(closest-side,var(--kh-c),transparent)}
.kh-tint .kh-img::after{content:"";position:absolute;inset:0;background:var(--kh-c);mix-blend-mode:color;opacity:.6}   /* 기본 배경을 행사 색으로 */
.kh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kh-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,20,44,.55) 0%,rgba(14,20,44,.25) 45%,rgba(14,20,44,0) 75%)}
@media (prefers-reduced-motion:no-preference){
  .kh-img{animation:kh-zoom 24s ease-in-out infinite alternate}
  .kh-glow::before{animation:kh-drift-a 18s ease-in-out infinite alternate}
  .kh-glow::after{animation:kh-drift-b 26s ease-in-out infinite alternate}
}
.kh-paused .kh-img,.kh-paused .kh-glow::before,.kh-paused .kh-glow::after{animation-play-state:paused}
@keyframes kh-zoom{from{transform:scale(1)}to{transform:scale(1.08) translate3d(-1%,-1%,0)}}
@keyframes kh-drift-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14rem,8rem,0)}}
@keyframes kh-drift-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(18rem,-6rem,0)}}
.kh-pause{position:absolute;right:2.4rem;bottom:2.4rem;z-index:6;display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:rgba(17,17,17,.25);color:#fff;cursor:pointer;transition:background-color .15s ease-out}
@media (hover:hover){.kh-pause:hover{background:rgba(17,17,17,.45)}}
.kh-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kh-pause .i-play,.kh-pause[aria-pressed="true"] .i-pause{display:none}
.kh-pause[aria-pressed="true"] .i-play{display:inline}
@media screen and (max-width:768px){
  .kh-pause{right:1.6rem;bottom:1.6rem;width:3.6rem;height:3.6rem}
  .kh-glow::before{width:44rem;height:44rem;top:-20rem;right:-16rem}
  .kh-glow::after{width:36rem;height:36rem;bottom:-22rem;left:10%}
}