@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chango&display=swap");
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css");
@import url("https://fonts.googleapis.com/css2?family=Chango&family=Shrikhand&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dangrek&display=swap");
.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotateR90 {
  transform: rotate(-90deg);
}

.badge {
  background-color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 4px 12px;
}
.badge span {
  color: #ffffff;
}

.icon56 {
  width: 56px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon72 {
  width: 72px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titleWrap {
  display: flex;
  align-items: center;
  width: 100%;
}
.titleWrap h3 {
  font-size: 32px;
  font-weight: 700;
}
.titleWrap .btnWrap {
  display: flex;
  gap: 8px;
}
.titleWrap .btnWrap .sBtn {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-radius: 37px;
  transition: 0.15s;
}
.titleWrap .btnWrap .sBtn a {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.titleWrap .btnWrap .sBtn a i {
  color: #ffffff;
  font-size: 16px;
}
.titleWrap .btnWrap .sBtn:hover {
  opacity: 0.8;
}

.downloadWrap .btn {
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-radius: 37px;
  transition: 0.15s;
}
.downloadWrap .btn a {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.downloadWrap .btn a i {
  color: #ffffff;
  font-size: 16px;
}
.downloadWrap .btn:hover {
  opacity: 0.8;
}

ul.listWrap {
  display: flex;
  flex-direction: column;
}
ul.listWrap li.listContent .listTouchArea {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  transition: 0.2s;
}
ul.listWrap li.listContent .listTouchArea:hover {
  background-color: #f2f2f2;
  border-radius: 16px;
}
ul.listWrap li.listContent {
  border-bottom: 1px solid #eee;
}

.progressBar {
  width: 100%;
  height: 16px;
  background-color: #f2f2f2;
}
.progressBar .bar {
  transition: 0.6s;
  width: 10%;
  min-width: 10%;
  height: 100%;
  background-color: #121212;
}

.isSectionBackground {
  background-color: #f5f8f9;
}

ul.tabList {
  display: flex;
  align-items: center;
  gap: 8px;
}
ul.tabList li.tabBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.tabList li.tabBtn a {
  background-color: #f9f9f9;
  padding: 16px 24px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  font-weight: 600;
}
ul.tabList li.tabBtn a:hover {
  background-color: #f2f2f2;
}

table {
  border-top: 2px solid #121212;
  width: 100%;
}
table thead tr th {
  padding: 13px 20px;
  border: 1px solid #d9d9d9;
  background-color: #f2f2f2;
}
table thead tr td {
  padding: 13px 20px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
table tbody tr th {
  padding: 13px 20px;
  border: 1px solid #d9d9d9;
  background-color: #f2f2f2;
}
table tbody tr td {
  padding: 13px 20px;
  text-align: center;
  border: 1px solid #d9d9d9;
}

table.tabDisplay {
  display: table;
}

div.tabItem {
  display: none;
}

.lastSection {
  margin-bottom: 96px;
}

/********************************************************
* Reset
*********************************************************/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*body{font-family: "Open Sans", sans-serif; min-width:320px;overflow-x:hidden;overflow-y:scroll;color:#222;background:#fff}*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  /*vertical-align:baseline*/
  font-family: "Roboto", sans-serif;
  zoom: 1;
  font-size: 16px;
  line-height: 22px;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.5px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul,
dl,
li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table,
th,
td {
  border-spacing: 0;
  border-collapse: collapse;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

img {
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
th {
  font-weight: 700;
  line-height: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
p,
label,
a {
  line-height: 1.5em;
  word-break: keep-all;
}

address {
  font-style: normal;
}

label {
  cursor: pointer;
  vertical-align: middle;
}

input {
  vertical-align: middle;
  -webkit-border-radius: 0;
}

input::-ms-clear {
  display: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 300px white inset;
}

select,
textarea {
  vertical-align: middle;
}

.select {
  position: relative;
  padding: 0 50px 0 20px;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select::-ms-expand {
  display: none;
}

input[type=button],
input[type=submit],
button {
  cursor: pointer;
  border-radius: 0;
}

::-moz-placeholder {
  color: #b7b7b7;
  opacity: 1;
}

::placeholder {
  color: #b7b7b7;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #b7b7b7;
}

input {
  font-family: "Roboto", sans-serif;
}

body {
  background-color: #f5f8f9;
}

/********************************************************
* Text
*********************************************************/
/* h1,h2,h3,h4{letter-spacing:-0.031em} */
a {
  color: #222;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
th,
td,
div,
span,
label,
input,
select,
textarea,
button,
li,
caption {
  font-family: "Roboto", sans-serif;
}

section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  min-width: 1420px;
}
section .background {
  position: absolute;
}
section .subMenuBackground {
  width: 100%;
  height: 450px;
  position: fixed;
  left: 0;
  top: 0px;
  background-image: url("../image/sub/subTitleBack.png");
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

section.mainHeroSection {
  position: relative;
  z-index: 1;
}

section:not(.mainHeroSection) {
  z-index: 1;
}

article.mainHeroArticle {
  width: 100%;
  max-width: 100%;
}

article {
  width: 100%;
  max-width: 1240px;
  min-width: 1240px;
}

.slideBackground {
  position: relative;
  z-index: 0;
  width: 100%;
}
.slideBackground img {
  width: 100%;
}

.slideTitle {
  position: absolute;
  z-index: 999;
  top: 128px;
  left: 50%;
  transform: translateX(-50%);
}
.flex {
  flex: 1;
}

.flexRow {
  display: flex;
  flex-direction: row;
}

.flexCol {
  display: flex;
  flex-direction: column;
}

.alignCenter {
  align-items: center;
}

.alignStart {
  align-items: flex-start;
}

.alignEnd {
  align-items: flex-end;
}

.justifyCenter {
  justify-content: center;
}

.justifyLeft {
  justify-content: left;
}

.justifyRight {
  justify-content: right;
}

.justifyBetween {
  justify-content: space-between;
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left !important;
}

/* 1. 컨테이너: 크기와 위치 확보 */
.loader {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  margin: 0px auto;
  margin-top: 40px;
  margin-bottom: -40px;
}

/* 2. 공통 원 스타일 */
.dot {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -7px; /* 중앙 정렬 */
  border-radius: 100%;
  /* 회전 중심을 아래로 40px 이동 (반지름 형성) */
  transform-origin: center 40px;
  box-shadow: 0 0 10px rgba(116, 58, 213, 0.3);
  /* 0.8s마다 한 바퀴, 부드러운 가속도 */
  animation: smooth-orbit 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* 3. 각 원의 고유 색상 및 '시작 각도' 설정 */
/* delay를 마이너스(-) 값으로 주면, 애니메이션이 이미 진행 중인 상태에서 시작되어 깜빡임이 사라집니다. */
.dot-1 {
  background-color: #d92191;
  animation-delay: -0.1s;
}

.dot-2 {
  background-color: #743ad5;
  animation-delay: -0.2s;
}

.dot-3 {
  background-color: #26065f;
  animation-delay: -0.3s;
}

.dot-4 {
  background-color: #743ad5;
  animation-delay: -0.4s;
}

.dot-5 {
  background-color: #d92191;
  animation-delay: -0.5s;
}

/* 4. 회전 애니메이션: 360도 깔끔하게 회전 */
@keyframes smooth-orbit {
  0% {
    transform: rotate(0deg);
    filter: brightness(1);
    opacity: 0;
  }
  50% {
    filter: brightness(1.3);
    opacity: 1;
    box-shadow: 0 0 15px rgba(217, 33, 145, 0.5);
  }
  100% {
    transform: rotate(360deg);
    filter: brightness(1);
    opacity: 0;
  }
}
.tba p {
  font-size: 28px; /* 살짝 줄여서 더 정갈하게 */
  text-align: center;
  margin-top: 64px !important;
  margin: 32px 0 0;
  font-weight: 200; /* 가느다란 폰트가 흑백에서 훨씬 고급스러움 */
  display: inline-block;
  width: 100%;
  letter-spacing: 2px; /* 자간을 넓혀 여백의 미 강조 */
  color: #989898;
  text-transform: uppercase; /* 대문자로 바꾸면 더 모던함 */
  /* 숨쉬는 듯한 애니메이션 */
  animation: noir-breathe 3s ease-in-out infinite;
}

@keyframes noir-breathe {
  0%, 100% {
    opacity: 0.4;
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    filter: blur(0px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
.accordianTitleWrap {
  height: 100%;
  gap: 16px;
}

.accordianBtnWrap .accordianBtn {
  padding: 16px;
  border: 1px solid #d7d7d7;
}
.tbaBtn {
  position: relative;
}
.tbaBtn ::after {
  content: "TBA";
  position: absolute;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(217, 33, 145, 0.8);
  border-radius: 24px;
  top: 50%;
  transition: 0.3s;
  color: #fff;
  left: 0%;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(-90%) translateY(-50%);
  opacity: 0;
}
.tbaBtn:hover ::after {
  transform: translateX(-105%) translateY(-50%);
  opacity: 1;
  background-color: rgba(217, 33, 145, 0.8);
}

.tbaBtn {
  position: relative;
}
.tbaBtn ::after {
  content: "TBA";
  position: absolute;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(217, 33, 145, 0.8);
  border-radius: 24px;
  top: -18px;
  transition: 0.3s;
  color: #fff;
  left: 50%;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
}
.tbaBtn:hover ::after {
  transform: translateX(-50%) translateY(0px);
  opacity: 1;
  background-color: rgba(217, 33, 145, 0.8);
}

.tbaCustomBtn {
  position: relative;
  overflow: visible !important;
  cursor: pointer;
}
.tbaCustomBtn .tbaBadge {
  position: absolute;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(217, 33, 145, 0.8);
  border-radius: 24px;
  top: -18px;
  transition: 0.3s;
  white-space: nowrap;
}
.tbaCustomBtn .tbaBadge p {
  color: #fff !important;
  text-align: center;
}
.tbaCustomBtn .tbaBadge {
  left: 50%;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
}
.tbaCustomBtn:hover .tbaBadge {
  transform: translateX(-50%) translateY(0px);
  opacity: 1;
  background-color: rgba(217, 33, 145, 0.8);
}

/* =========================================
   [Responsive Overrides] Tab & Mob 
   ========================================= */
@media (max-width: 1024px) {
  section {
    min-width: 100%;
  }
  .subMenuTab {
    overflow-x: scroll;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    background-color: rgba(255, 255, 255, 0.3137254902);
    max-width: calc(100% - 40px) !important;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1254901961);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .subMenuTab .subMenuTabBtn a h2 {
    white-space: nowrap;
  }
  .subMenuTitle {
    padding-top: 64px !important;
  }
  .subMenuTitle h1 {
    text-align: center;
    line-height: 90% !important;
    font-size: 28px !important;
  }
  .subMenuBackground {
    background-size: cover !important;
    border-radius: 0 0 0px 0px !important;
  }
  article {
    min-width: 100%;
    max-width: 100%;
  }
  .titleWrap h3 {
    font-size: 28px;
  }
  .tba p {
    font-size: 24px;
    margin-top: 48px !important;
  }
  ul.tabList li.tabBtn a {
    padding: 12px 16px;
  }
  ul.listWrap li.listContent .listTouchArea {
    padding: 16px;
  }
  .subMenuTab {
    transition: all 0.3s ease;
  }
  .subMenuTab.is-scrolled {
    background-color: rgba(55, 48, 66, 0.4392156863) !important;
    backdrop-filter: blur(16px);
  }
  .subMenuTab.is-scrolled .subMenuTabBtn a h2 {
    color: #ffffff;
  }
  .subMenuTab.is-scrolled .subMenuTabBtn.active a h2 {
    color: #239c88;
  }
}
@media (max-width: 640px) {
  .titleWrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .titleWrap h3 {
    font-size: 22px;
  }
  .titleWrap .btnWrap {
    width: 100%;
    justify-content: flex-end;
  }
  .icon72 {
    width: 56px;
  }
  .icon56 {
    width: 40px;
  }
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  table th,
  table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  ul.tabList {
    flex-wrap: wrap;
    gap: 4px;
  }
  ul.tabList li.tabBtn {
    flex: 1 1 calc(50% - 4px);
  }
  ul.tabList li.tabBtn a {
    padding: 8px;
    font-size: 14px;
  }
  .tba p {
    font-size: 18px;
    margin-top: 32px !important;
    letter-spacing: 1px;
  }
  .tbaCustomBtn .tbaBadge,
  .tbaBtn::after {
    font-size: 12px;
    padding: 2px 8px;
  }
}
@media (max-width: 1024px) {
  .subMenuTitleSection {
    z-index: 999 !important;
    height: 240px !important;
    overflow: hidden;
    border-radius: 0;
  }
}
@media (max-width: 640px) {
  .subMenuTitleSection {
    height: 240px !important;
    overflow: hidden;
  }
}

@media (max-width: 1024px) {
  .subMenuTitle {
    height: 320px !important;
  }
}
@media (max-width: 640px) {
  .subMenuTitle {
    height: 320px !important;
  }
}

@media (max-width: 1024px) {
  .subMenuTab .subMenuTitleSection {
    z-index: 9999;
  }
  .subMenuTab {
    overflow-x: scroll;
    justify-content: center;
    position: fixed;
    top: 80px;
    z-index: 999;
    max-width: 100%;
    border-radius: 99px !important;
    justify-content: flex-start !important;
  }
  .subMenuTab::-webkit-scrollbar {
    display: none;
  }
  .subMenuTab li {
    border-radius: 99px !important;
    border: 0px solid transparent !important;
    border-width: 0 !important;
    background-color: rgba(255, 255, 255, 0);
  }
  .subMenuTab li a {
    border: none;
    padding: 6px 8px !important;
  }
  .subMenuTab li a h2 {
    font-size: 15px;
  }
}
@media (max-width: 640px) {
  .subMenuTab {
    justify-content: center;
  }
  .subMenuTab li a {
    padding: 6px 8px !important;
  }
  .subMenuTab li a h2 {
    font-size: 15px;
  }
}

footer {
  z-index: 999999 !important;
}

.mobileHeader {
  z-index: 9999999 !important;
}

.headerLogoWrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  flex-direction: row-reverse;
  max-height: 62px;
  align-items: flex-start;
  align-items: center;
  justify-content: flex-start;
  justify-content: center;
  gap: 12px;
}
.headerLogoWrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: 0.3s;
  background: linear-gradient(#ffffff 40%, #ffffff);
}
.headerLogoWrap .headerLogo {
  max-width: 196px;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

.header.allViewGnb:hover .headerLogoWrap::after {
  opacity: 0;
}

header {
  min-width: 1420px;
}

/* 1. 전체 메뉴 보기 형태 (Mega Menu) */
header.allViewGnb {
  position: absolute;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 0;
  margin-bottom: -100px;
  background: rgba(0, 0, 0, 0);
  transition: 0.2s;
  background-color: #fff !important;
}
header.allViewGnb::before {
  opacity: 0 !important;
}
header.allViewGnb {
  /* 뒷배경 어두워지는 요소 (공통 속성) */
}
header.allViewGnb::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
header.allViewGnb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: 0.3s;
}
header.allViewGnb ul.gnb {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1240px;
  padding: 12px 24px 0;
  border-radius: 48px;
  background: rgba(245, 248, 249, 0.76);
  backdrop-filter: blur(12px);
  border: 1px solid #fff; /* top 중복 제거 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.063);
  overflow: hidden !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 2px solid #d9d9d9 !important;
}
header.allViewGnb ul.gnb .oneDepth {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  /* 각 메뉴 사이의 구분선 (기본 숨김) */
}
header.allViewGnb ul.gnb .oneDepth::after {
  content: "";
  position: absolute;
  bottom: -200%;
  right: 0;
  width: 100%;
  height: 200%;
  border-right: 1px solid #ebebeb;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s, bottom 1.2s;
}
header.allViewGnb ul.gnb .oneDepth .oneDepthTouchArea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 12px;
  text-align: center;
  line-height: 110%;
  font-weight: 400;
  color: #121212;
  transition: 0.3s;
}
header.allViewGnb ul.gnb .oneDepth .twoDepthWapper {
  display: grid;
  grid-template-rows: 0fr;
  gap: 12px;
  overflow: hidden;
  transition: 0.3s;
}
header.allViewGnb ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList {
  min-height: 0;
  padding: 0;
  transition: 0.3s;
}
header.allViewGnb ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth {
  padding: 0 6px;
}
header.allViewGnb ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth .twoDepthTouchArea {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  font-size: 14px;
  color: #121212 !important;
  opacity: 0;
  transition: 0.3s;
}
header.allViewGnb ul.gnb .oneDepth:nth-child(8)::after {
  border: none;
}
header.allViewGnb {
  /* --- Hover 상태 (변화하는 속성만 오버라이딩) --- */
}
header.allViewGnb:hover .headerLogoWrap::after {
  opacity: 0;
}
header.allViewGnb:hover::before {
  opacity: 0.6;
}
header.allViewGnb:hover::after {
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0);
}
header.allViewGnb:hover ul.gnb .oneDepth::after {
  bottom: 0;
  opacity: 1;
  border-right-color: rgba(255, 255, 255, 0.5);
}
header.allViewGnb:hover ul.gnb .oneDepth {
  /* 1Depth 본인 호버 시 */
}
header.allViewGnb:hover ul.gnb .oneDepth:hover .oneDepthTouchArea {
  font-weight: 800;
  color: #121212;
}
header.allViewGnb:hover ul.gnb .oneDepth {
  /* GNB 전체 호버 시 1Depth 기본 상태 */
}
header.allViewGnb:hover ul.gnb .oneDepth .oneDepthTouchArea {
  font-weight: 500;
  color: #121212;
}
header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper {
  grid-template-rows: 1fr;
}
header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList {
  padding-bottom: 24px;
}
header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth .twoDepthTouchArea {
  padding: 4px 6px;
  opacity: 1;
}
header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth .twoDepthTouchArea:hover {
  font-weight: 600;
  background-color: rgba(18, 18, 18, 0.1);
  border-radius: 12px;
}

/* =========================================
   [Responsive Overrides] Header Display Switch
   ========================================= */
.mobileHeader {
  display: none;
}

@media (max-width: 1024px) {
  header.allViewGnb {
    display: none !important;
  }
  .mNav {
    max-height: calc(100% - 132px);
    overflow-y: scroll;
  }
  .mobileHeader {
    display: block;
    position: fixed;
    min-width: 100%;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding-left: 24px;
    padding-right: 24px;
    background: rgba(0, 0, 0, 0);
    background: linear-gradient(-180deg, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0));
    border-radius: 0px;
  }
  .mobileHeader .mHeaderTop {
    display: flex;
    margin-top: 24px;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    height: 72px;
    backdrop-filter: blur(12px);
    border-radius: 99px;
    backdrop-filter: none;
  }
  .mobileHeader .mHeaderTop .mLogoWrap {
    height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
  }
  .mobileHeader .mHeaderTop .mLogoWrap .headerLogo:nth-child(2) {
    transform: scale(1.2);
  }
  .mobileHeader .mHeaderTop .mLogoWrap .mLogo {
    height: 30px;
    min-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn {
    width: 28px;
    height: 20px;
    position: relative;
    background: transparent;
    border: none;
    z-index: 1001;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.4392156863);
    border-radius: 100%;
    border: 1px solid #fff;
    width: 48px;
    height: 48px;
    top: 50%;
    z-index: -1;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4392156863);
    left: 50%;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #121212;
    border-radius: 2px;
    transition: 0.3s;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn span:nth-child(1) {
    top: 0;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  .mobileHeader .mHeaderTop .hamburgerBtn span:nth-child(3) {
    bottom: 0;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .mobileHeader .mHeaderTop .hamburgerBtn.active span:nth-child(2) {
    opacity: 0;
  }
  .mobileHeader .mHeaderTop .hamburgerBtn.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }
  .mobileHeader .mDim {
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -99;
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    pointer-events: none;
  }
  .mobileHeader .mDim.active {
    background-color: rgba(0, 0, 0, 0.3137254902);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -99;
    pointer-events: fill;
  }
  .mobileHeader .mNav {
    z-index: 9999;
    position: fixed;
    top: -100%;
    opacity: 0;
    left: 32px;
    width: calc(100% - 64px);
    height: -moz-fit-content;
    height: fit-content;
    background: rgba(245, 248, 249, 0.5);
    border: 1px solid #fff;
    backdrop-filter: blur(12px);
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    overflow-y: auto;
    z-index: 1000;
    border-radius: 32px;
  }
  .mobileHeader .mNav.active {
    height: -moz-fit-content;
    height: fit-content;
    top: 108px !important;
    opacity: 1;
    left: 32px;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobileHeader .mNav {
    top: 96px;
    pointer-events: none;
  }
  .mobileHeader .mNav.active {
    top: 118px !important;
    pointer-events: fill;
    opacity: 1;
    left: 32px;
  }
}
@media (max-width: 1024px) and (max-width: 640px) {
  .mobileHeader .mNav {
    top: 96px;
    pointer-events: none;
  }
  .mobileHeader .mNav.active {
    top: 108px !important;
    pointer-events: fill;
    opacity: 1;
    left: 32px;
  }
}
@media (max-width: 1024px) {
  .mobileHeader .mNav .mGnb {
    padding: 24px;
    display: flex;
    flex-direction: column;
  }
  .mobileHeader .mNav .mGnb .mOneDepth {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .mobileHeader .mNav .mGnb .mOneDepth .mOneDepthTouch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 8px;
    font-size: 18px;
    font-weight: 700;
    color: #121212;
  }
  .mobileHeader .mNav .mGnb .mOneDepth .mTwoDepthList {
    display: none;
    padding: 0 8px 16px 16px;
  }
  .mobileHeader .mNav .mGnb .mOneDepth .mTwoDepthList li a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    color: rgba(18, 18, 18, 0.7);
    font-weight: 600;
  }
  .mobileHeader .mNav .mGnb .mOneDepth.active .mTwoDepthList {
    display: block;
  }
  .mobileHeader .mNav .mGnb .mOneDepth:last-child {
    border-bottom: none;
  }
  .mobileHeader .mLogoWrap {
    height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
  }
  .mobileHeader .mLogoWrap .headerLogo:nth-child(2) {
    transform: scale(1.2);
  }
}
@media (max-width: 640px) {
  .mNav {
    max-height: calc(100% - 132px);
    overflow-y: scroll;
  }
  .mobileHeader .mHeaderTop {
    padding: 12px 16px;
    height: 60px;
  }
  .mobileHeader .mHeaderTop .mLogoWrap .mLogo {
    height: 24px;
  }
  .mobileHeader .mNav {
    top: 96px;
    height: calc(100vh - 60px);
  }
  .mobileHeader .mNav .mGnb {
    padding: 16px;
  }
  .mobileHeader .mNav .mGnb .mOneDepth .mOneDepthTouch {
    padding: 16px 4px;
    font-size: 16px;
  }
  .mobileHeader .mNav .mGnb .mOneDepth .mTwoDepthList li a {
    font-size: 14px;
  }
}
.mobileHeader.is-scrolled {
  border-radius: 0;
}
.mobileHeader.is-scrolled::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  backdrop-filter: blur(2px);
  top: 0;
  left: 0;
  z-index: -1;
}

.sectionBackground {
  min-width: 1420px;
}

footer {
  position: relative;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 1420px;
  background: #e3e6ea; /* 기존 $footerColor를 덮어쓰고 있던 최종 속성 적용 */
  border-top: 1px solid #cecece;
  /* 공통 폰트 컬러 */
}
footer p {
  color: #5f5771;
}
footer p strong {
  color: #423b52;
}
footer {
  /* 내부 콘텐츠 영역 */
}
footer .footerContent {
  display: flex;
  flex: 1;
  gap: 8px;
  width: 100%;
  max-width: 1240px;
  padding: 32px 0;
}
footer .footerContent .footerLineList {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}
footer .footerContent .footerLineList .footerLine {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 내용이 없던 빈 p {} 껍데기 삭제 완료 */
}

.sponListWrap {
  position: relative;
  display: flex;
  gap: 24px;
  margin-top: 40px;
  padding: 16px 0;
  /* 4군데로 쪼개져 있던 ::after 속성 완벽 병합 */
}
.sponListWrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  min-width: 1420px;
  height: 100%;
  background-color: #ffffff;
  border-top: 1px solid #dfdfdf;
  transform: translateX(-50%);
}
.sponListWrap {
  /* 마지막 요소일 경우 border 제거 (.last가 클래스에 붙었을 때) */
}
.sponListWrap.last::after {
  border-top: none;
}
.sponListWrap .sponListContent {
  display: flex;
  gap: 8px;
}
.sponListWrap .sponListContent .sponTitle {
  display: flex;
  align-items: center;
  margin-right: 24px;
}
.sponListWrap .sponListContent .sponTitle p {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.sponListWrap .sponListContent ul.logoListWrap {
  display: flex;
  gap: 24px; /* 에러 방지를 위해 calc()로 감싸줌 */
  /* li와 a가 동일하게 display: flex; align-items: center;를 가지고 있어 병합 */
}
.sponListWrap .sponListContent ul.logoListWrap li.logo,
.sponListWrap .sponListContent ul.logoListWrap li.logo a {
  display: flex;
  align-items: center;
}

/* =========================================
   [Responsive Overrides] Footer & Sponsor (Tab & Mob)
   ========================================= */
@media (max-width: 1024px) {
  .sectionBackground,
  footer {
    min-width: 100% !important;
  }
  footer .footerContent {
    padding: 32px 24px;
    flex-wrap: wrap;
  }
  .sponListWrap {
    flex-wrap: wrap;
    padding: 16px 24px;
    margin-top: 32px;
  }
  .sponListWrap::after {
    min-width: 100% !important;
  }
  .sponListWrap .sponListContent {
    flex-wrap: wrap;
    align-items: center;
  }
  .sponListWrap .sponListContent ul.logoListWrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  footer .footerContent {
    flex-direction: column;
    gap: 16px;
    padding: 32px 16px;
  }
  footer .footerContent .footerLineList {
    width: 100%;
    text-align: center;
  }
  footer .footerContent .footerLineList .footerLine {
    gap: 8px;
  }
  footer .footerContent .footerLineList .footerLine p {
    font-size: 14px;
    line-height: 140%;
  }
  .sponListWrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 16px;
    margin-top: 24px;
  }
  .sponListWrap .sponListContent {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  .sponListWrap .sponListContent .sponTitle {
    margin-right: 0;
  }
  .sponListWrap .sponListContent .sponTitle p {
    font-size: 16px;
    font-weight: 700;
  }
  .sponListWrap .sponListContent ul.logoListWrap {
    gap: 16px;
  }
  .sponListWrap .sponListContent ul.logoListWrap li.logo img,
  .sponListWrap .sponListContent ul.logoListWrap li.logo a img {
    max-width: 120px;
    height: auto;
  }
}
.subMenuTitle {
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 120px;
}
.subMenuTitle h1 {
  font-size: 44px;
  color: #ffffff;
}
.subMenuTitle .subMenuTab {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.subMenuTitle .subMenuTab .subMenuTabBtn.active {
  background-color: #ffffff;
}
.subMenuTitle .subMenuTab .subMenuTabBtn.active a h2 {
  color: #222;
  font-weight: 800;
}
.subMenuTitle .subMenuTab .subMenuTabBtn {
  border: 1px solid #ffffff;
}
.subMenuTitle .subMenuTab .subMenuTabBtn a {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  border-radius: 90px;
}
.subMenuTitle .subMenuTab .subMenuTabBtn a h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
}

.subMenuTab {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.subMenuTab .subMenuTabBtn.active {
  background-color: #ffffff;
}
.subMenuTab .subMenuTabBtn.active a h2 {
  color: #131313 !important;
  font-weight: 800;
}
.subMenuTab .subMenuTabBtn {
  border: 1px solid rgba(255, 255, 255, 0.3764705882);
  border-radius: 12px;
  transition: 0.4s;
}
.subMenuTab .subMenuTabBtn a {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  flex: 1;
  transition: 0.4s;
}
.subMenuTab .subMenuTabBtn a h2 {
  display: flex;
  align-items: center;
  transition: 0.4s;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
}
.subMenuTab .subMenuTabBtn a:hover {
  background-color: rgba(255, 255, 255, 0.4392156863);
}
.subMenuTab .subMenuTabBtn a:hover h2 {
  font-weight: 800;
}

.subMenuBackground {
  border-radius: 0 0 340px 0px;
  position: absolute !important;
}

.keynoteWrap .rotate90 {
  transform: rotate(90deg);
}
.keynoteWrap .rotate180 {
  transform: rotate(180deg);
}
.keynoteWrap .rotateR90 {
  transform: rotate(-90deg);
}
.keynoteWrap .badge {
  background-color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 4px 12px;
}
.keynoteWrap .badge span {
  color: #ffffff;
}
.keynoteWrap .icon56 {
  width: 56px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keynoteWrap .icon72 {
  width: 72px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keynoteWrap .titleWrap {
  display: flex;
  align-items: center;
  width: 100%;
}
.keynoteWrap .titleWrap h3 {
  font-size: 32px;
  font-weight: 700;
}
.keynoteWrap .titleWrap .btnWrap {
  display: flex;
  gap: 8px;
}
.keynoteWrap .titleWrap .btnWrap .sBtn {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-radius: 37px;
  transition: 0.15s;
}
.keynoteWrap .titleWrap .btnWrap .sBtn a {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keynoteWrap .titleWrap .btnWrap .sBtn a i {
  color: #ffffff;
  font-size: 16px;
}
.keynoteWrap .titleWrap .btnWrap .sBtn:hover {
  opacity: 0.8;
}
.keynoteWrap .downloadWrap .btn {
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-radius: 37px;
  transition: 0.15s;
}
.keynoteWrap .downloadWrap .btn a {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keynoteWrap .downloadWrap .btn a i {
  color: #ffffff;
  font-size: 16px;
}
.keynoteWrap .downloadWrap .btn:hover {
  opacity: 0.8;
}
.keynoteWrap ul.listWrap {
  display: flex;
  flex-direction: column;
}
.keynoteWrap ul.listWrap li.listContent .listTouchArea {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  transition: 0.2s;
}
.keynoteWrap ul.listWrap li.listContent .listTouchArea:hover {
  background-color: #f2f2f2;
  border-radius: 16px;
}
.keynoteWrap ul.listWrap li.listContent {
  border-bottom: 1px solid #eee;
}
.keynoteWrap .progressBar {
  width: 100%;
  height: 16px;
  background-color: #f2f2f2;
}
.keynoteWrap .progressBar .bar {
  transition: 0.6s;
  width: 10%;
  min-width: 10%;
  height: 100%;
  background-color: #121212;
}
.keynoteWrap .isSectionBackground {
  background-color: #f5f8f9;
}
.keynoteWrap ul.tabList {
  display: flex;
  align-items: center;
  gap: 8px;
}
.keynoteWrap ul.tabList li.tabBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keynoteWrap ul.tabList li.tabBtn a {
  background-color: #f9f9f9;
  padding: 16px 24px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  font-weight: 600;
}
.keynoteWrap ul.tabList li.tabBtn a:hover {
  background-color: #f2f2f2;
}
.keynoteWrap table {
  border-top: 2px solid #121212;
  width: 100%;
}
.keynoteWrap table thead tr th {
  padding: 13px 20px;
  border: 1px solid #d9d9d9;
  background-color: #f2f2f2;
}
.keynoteWrap table thead tr td {
  padding: 13px 20px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
.keynoteWrap table tbody tr th {
  padding: 13px 20px;
  border: 1px solid #d9d9d9;
  background-color: #f2f2f2;
}
.keynoteWrap table tbody tr td {
  padding: 13px 20px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
.keynoteWrap table.tabDisplay {
  display: table;
}
.keynoteWrap div.tabItem {
  display: none;
}
.keynoteWrap .lastSection {
  margin-bottom: 96px;
}
.keynoteWrap {
  /********************************************************
  * Reset
  *********************************************************/
}
.keynoteWrap * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.keynoteWrap {
  /*body{font-family: "Open Sans", sans-serif; min-width:320px;overflow-x:hidden;overflow-y:scroll;color:#222;background:#fff}*/
}
.keynoteWrap html,
.keynoteWrap body,
.keynoteWrap div,
.keynoteWrap span,
.keynoteWrap applet,
.keynoteWrap object,
.keynoteWrap iframe,
.keynoteWrap h1,
.keynoteWrap h2,
.keynoteWrap h3,
.keynoteWrap h4,
.keynoteWrap h5,
.keynoteWrap h6,
.keynoteWrap p,
.keynoteWrap blockquote,
.keynoteWrap pre,
.keynoteWrap a,
.keynoteWrap abbr,
.keynoteWrap acronym,
.keynoteWrap address,
.keynoteWrap big,
.keynoteWrap cite,
.keynoteWrap code,
.keynoteWrap del,
.keynoteWrap dfn,
.keynoteWrap em,
.keynoteWrap img,
.keynoteWrap ins,
.keynoteWrap kbd,
.keynoteWrap q,
.keynoteWrap s,
.keynoteWrap samp,
.keynoteWrap small,
.keynoteWrap strike,
.keynoteWrap strong,
.keynoteWrap sub,
.keynoteWrap sup,
.keynoteWrap tt,
.keynoteWrap var,
.keynoteWrap b,
.keynoteWrap u,
.keynoteWrap i,
.keynoteWrap center,
.keynoteWrap dl,
.keynoteWrap dt,
.keynoteWrap dd,
.keynoteWrap ol,
.keynoteWrap ul,
.keynoteWrap li,
.keynoteWrap fieldset,
.keynoteWrap form,
.keynoteWrap label,
.keynoteWrap legend,
.keynoteWrap table,
.keynoteWrap caption,
.keynoteWrap tbody,
.keynoteWrap tfoot,
.keynoteWrap thead,
.keynoteWrap tr,
.keynoteWrap th,
.keynoteWrap td,
.keynoteWrap article,
.keynoteWrap aside,
.keynoteWrap canvas,
.keynoteWrap details,
.keynoteWrap embed,
.keynoteWrap figure,
.keynoteWrap figcaption,
.keynoteWrap footer,
.keynoteWrap header,
.keynoteWrap hgroup,
.keynoteWrap menu,
.keynoteWrap nav,
.keynoteWrap output,
.keynoteWrap ruby,
.keynoteWrap section,
.keynoteWrap summary,
.keynoteWrap time,
.keynoteWrap mark,
.keynoteWrap audio,
.keynoteWrap video {
  /*vertical-align:baseline*/
  font-family: "Roboto", sans-serif;
  zoom: 1;
  font-size: 16px;
  line-height: 22px;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.5px;
}
.keynoteWrap article,
.keynoteWrap aside,
.keynoteWrap details,
.keynoteWrap figcaption,
.keynoteWrap figure,
.keynoteWrap footer,
.keynoteWrap header,
.keynoteWrap hgroup,
.keynoteWrap menu,
.keynoteWrap nav,
.keynoteWrap section {
  display: block;
}
.keynoteWrap ol,
.keynoteWrap ul,
.keynoteWrap dl,
.keynoteWrap li {
  list-style: none;
}
.keynoteWrap blockquote,
.keynoteWrap q {
  quotes: none;
}
.keynoteWrap blockquote:before,
.keynoteWrap blockquote:after,
.keynoteWrap q:before,
.keynoteWrap q:after {
  content: "";
  content: none;
}
.keynoteWrap table,
.keynoteWrap th,
.keynoteWrap td {
  border-spacing: 0;
  border-collapse: collapse;
}
.keynoteWrap a,
.keynoteWrap a:link,
.keynoteWrap a:visited,
.keynoteWrap a:hover,
.keynoteWrap a:active {
  text-decoration: none;
}
.keynoteWrap img {
  border: 0;
}
.keynoteWrap h1,
.keynoteWrap h2,
.keynoteWrap h3,
.keynoteWrap h4,
.keynoteWrap h5,
.keynoteWrap h6,
.keynoteWrap strong,
.keynoteWrap th {
  font-weight: 700;
  line-height: 1.5em;
}
.keynoteWrap h1,
.keynoteWrap h2,
.keynoteWrap h3,
.keynoteWrap h4,
.keynoteWrap h5,
.keynoteWrap h6,
.keynoteWrap strong,
.keynoteWrap p,
.keynoteWrap label,
.keynoteWrap a {
  line-height: 1.5em;
  word-break: keep-all;
}
.keynoteWrap address {
  font-style: normal;
}
.keynoteWrap label {
  cursor: pointer;
  vertical-align: middle;
}
.keynoteWrap input {
  vertical-align: middle;
  -webkit-border-radius: 0;
}
.keynoteWrap input::-ms-clear {
  display: none;
}
.keynoteWrap input:-webkit-autofill,
.keynoteWrap textarea:-webkit-autofill,
.keynoteWrap select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 300px white inset;
}
.keynoteWrap select,
.keynoteWrap textarea {
  vertical-align: middle;
}
.keynoteWrap .select {
  position: relative;
  padding: 0 50px 0 20px;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.keynoteWrap .select::-ms-expand {
  display: none;
}
.keynoteWrap input[type=button],
.keynoteWrap input[type=submit],
.keynoteWrap button {
  cursor: pointer;
  border-radius: 0;
}
.keynoteWrap ::-moz-placeholder {
  color: #b7b7b7;
  opacity: 1;
}
.keynoteWrap ::placeholder {
  color: #b7b7b7;
  opacity: 1;
}
.keynoteWrap :-ms-input-placeholder {
  color: #b7b7b7;
}
.keynoteWrap input {
  font-family: "Roboto", sans-serif;
}
.keynoteWrap body {
  background-color: #f5f8f9;
}
.keynoteWrap {
  /********************************************************
  * Text
  *********************************************************/
  /* h1,h2,h3,h4{letter-spacing:-0.031em} */
}
.keynoteWrap a {
  color: #222;
}
.keynoteWrap h1,
.keynoteWrap h2,
.keynoteWrap h3,
.keynoteWrap h4,
.keynoteWrap h5,
.keynoteWrap h6,
.keynoteWrap a,
.keynoteWrap p,
.keynoteWrap th,
.keynoteWrap td,
.keynoteWrap div,
.keynoteWrap span,
.keynoteWrap label,
.keynoteWrap input,
.keynoteWrap select,
.keynoteWrap textarea,
.keynoteWrap button,
.keynoteWrap li,
.keynoteWrap caption {
  font-family: "Roboto", sans-serif;
}
.keynoteWrap section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  min-width: 1420px;
}
.keynoteWrap section .background {
  position: absolute;
}
.keynoteWrap section .subMenuBackground {
  width: 100%;
  height: 450px;
  position: fixed;
  left: 0;
  top: 0px;
  background-image: url("../image/sub/subTitleBack.png");
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1;
}
.keynoteWrap section.mainHeroSection {
  position: relative;
  z-index: 1;
}
.keynoteWrap section:not(.mainHeroSection) {
  z-index: 1;
}
.keynoteWrap article.mainHeroArticle {
  width: 100%;
  max-width: 100%;
}
.keynoteWrap article {
  width: 100%;
  max-width: 1240px;
  min-width: 1240px;
}
.keynoteWrap .slideBackground {
  position: relative;
  z-index: 0;
  width: 100%;
}
.keynoteWrap .slideBackground img {
  width: 100%;
}
.keynoteWrap .slideTitle {
  position: absolute;
  z-index: 999;
  top: 128px;
  left: 50%;
  transform: translateX(-50%);
}
.keynoteWrap .flex {
  flex: 1;
}
.keynoteWrap .flexRow {
  display: flex;
  flex-direction: row;
}
.keynoteWrap .flexCol {
  display: flex;
  flex-direction: column;
}
.keynoteWrap .alignCenter {
  align-items: center;
}
.keynoteWrap .alignStart {
  align-items: flex-start;
}
.keynoteWrap .alignEnd {
  align-items: flex-end;
}
.keynoteWrap .justifyCenter {
  justify-content: center;
}
.keynoteWrap .justifyLeft {
  justify-content: left;
}
.keynoteWrap .justifyRight {
  justify-content: right;
}
.keynoteWrap .justifyBetween {
  justify-content: space-between;
}
.keynoteWrap .textCenter {
  text-align: center;
}
.keynoteWrap .textLeft {
  text-align: left !important;
}
.keynoteWrap {
  /* 1. 컨테이너: 크기와 위치 확보 */
}
.keynoteWrap .loader {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  margin: 0px auto;
  margin-top: 40px;
  margin-bottom: -40px;
}
.keynoteWrap {
  /* 2. 공통 원 스타일 */
}
.keynoteWrap .dot {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -7px; /* 중앙 정렬 */
  border-radius: 100%;
  /* 회전 중심을 아래로 40px 이동 (반지름 형성) */
  transform-origin: center 40px;
  box-shadow: 0 0 10px rgba(116, 58, 213, 0.3);
  /* 0.8s마다 한 바퀴, 부드러운 가속도 */
  animation: smooth-orbit 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.keynoteWrap {
  /* 3. 각 원의 고유 색상 및 '시작 각도' 설정 */
  /* delay를 마이너스(-) 값으로 주면, 애니메이션이 이미 진행 중인 상태에서 시작되어 깜빡임이 사라집니다. */
}
.keynoteWrap .dot-1 {
  background-color: #d92191;
  animation-delay: -0.1s;
}
.keynoteWrap .dot-2 {
  background-color: #743ad5;
  animation-delay: -0.2s;
}
.keynoteWrap .dot-3 {
  background-color: #26065f;
  animation-delay: -0.3s;
}
.keynoteWrap .dot-4 {
  background-color: #743ad5;
  animation-delay: -0.4s;
}
.keynoteWrap .dot-5 {
  background-color: #d92191;
  animation-delay: -0.5s;
}
.keynoteWrap {
  /* 4. 회전 애니메이션: 360도 깔끔하게 회전 */
}
@keyframes smooth-orbit {
  0% {
    transform: rotate(0deg);
    filter: brightness(1);
    opacity: 0;
  }
  50% {
    filter: brightness(1.3);
    opacity: 1;
    box-shadow: 0 0 15px rgba(217, 33, 145, 0.5);
  }
  100% {
    transform: rotate(360deg);
    filter: brightness(1);
    opacity: 0;
  }
}
.keynoteWrap .tba p {
  font-size: 28px; /* 살짝 줄여서 더 정갈하게 */
  text-align: center;
  margin-top: 64px !important;
  margin: 32px 0 0;
  font-weight: 200; /* 가느다란 폰트가 흑백에서 훨씬 고급스러움 */
  display: inline-block;
  width: 100%;
  letter-spacing: 2px; /* 자간을 넓혀 여백의 미 강조 */
  color: #989898;
  text-transform: uppercase; /* 대문자로 바꾸면 더 모던함 */
  /* 숨쉬는 듯한 애니메이션 */
  animation: noir-breathe 3s ease-in-out infinite;
}
@keyframes noir-breathe {
  0%, 100% {
    opacity: 0.4;
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    filter: blur(0px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
.keynoteWrap .accordianTitleWrap {
  height: 100%;
  gap: 16px;
}
.keynoteWrap .accordianBtnWrap .accordianBtn {
  padding: 16px;
  border: 1px solid #d7d7d7;
}
.keynoteWrap .tbaBtn {
  position: relative;
}
.keynoteWrap .tbaBtn ::after {
  content: "TBA";
  position: absolute;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(217, 33, 145, 0.8);
  border-radius: 24px;
  top: 50%;
  transition: 0.3s;
  color: #fff;
  left: 0%;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(-90%) translateY(-50%);
  opacity: 0;
}
.keynoteWrap .tbaBtn:hover ::after {
  transform: translateX(-105%) translateY(-50%);
  opacity: 1;
  background-color: rgba(217, 33, 145, 0.8);
}
.keynoteWrap .tbaBtn {
  position: relative;
}
.keynoteWrap .tbaBtn ::after {
  content: "TBA";
  position: absolute;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(217, 33, 145, 0.8);
  border-radius: 24px;
  top: -18px;
  transition: 0.3s;
  color: #fff;
  left: 50%;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
}
.keynoteWrap .tbaBtn:hover ::after {
  transform: translateX(-50%) translateY(0px);
  opacity: 1;
  background-color: rgba(217, 33, 145, 0.8);
}
.keynoteWrap .tbaCustomBtn {
  position: relative;
  overflow: visible !important;
  cursor: pointer;
}
.keynoteWrap .tbaCustomBtn .tbaBadge {
  position: absolute;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(217, 33, 145, 0.8);
  border-radius: 24px;
  top: -18px;
  transition: 0.3s;
  white-space: nowrap;
}
.keynoteWrap .tbaCustomBtn .tbaBadge p {
  color: #fff !important;
  text-align: center;
}
.keynoteWrap .tbaCustomBtn .tbaBadge {
  left: 50%;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
}
.keynoteWrap .tbaCustomBtn:hover .tbaBadge {
  transform: translateX(-50%) translateY(0px);
  opacity: 1;
  background-color: rgba(217, 33, 145, 0.8);
}
.keynoteWrap {
  /* =========================================
   [Responsive Overrides] Tab & Mob 
   ========================================= */
}
@media (max-width: 1024px) {
  .keynoteWrap section {
    min-width: 100%;
  }
  .keynoteWrap .subMenuTab {
    overflow-x: scroll;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    background-color: rgba(255, 255, 255, 0.3137254902);
    max-width: calc(100% - 40px) !important;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1254901961);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .keynoteWrap .subMenuTab .subMenuTabBtn a h2 {
    white-space: nowrap;
  }
  .keynoteWrap .subMenuTitle {
    padding-top: 64px !important;
  }
  .keynoteWrap .subMenuTitle h1 {
    text-align: center;
    line-height: 90% !important;
    font-size: 28px !important;
  }
  .keynoteWrap .subMenuBackground {
    background-size: cover !important;
    border-radius: 0 0 0px 0px !important;
  }
  .keynoteWrap article {
    min-width: 100%;
    max-width: 100%;
  }
  .keynoteWrap .titleWrap h3 {
    font-size: 28px;
  }
  .keynoteWrap .tba p {
    font-size: 24px;
    margin-top: 48px !important;
  }
  .keynoteWrap ul.tabList li.tabBtn a {
    padding: 12px 16px;
  }
  .keynoteWrap ul.listWrap li.listContent .listTouchArea {
    padding: 16px;
  }
  .keynoteWrap .subMenuTab {
    transition: all 0.3s ease;
  }
  .keynoteWrap .subMenuTab.is-scrolled {
    background-color: rgba(55, 48, 66, 0.4392156863) !important;
    backdrop-filter: blur(16px);
  }
  .keynoteWrap .subMenuTab.is-scrolled .subMenuTabBtn a h2 {
    color: #ffffff;
  }
  .keynoteWrap .subMenuTab.is-scrolled .subMenuTabBtn.active a h2 {
    color: #239c88;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .titleWrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .keynoteWrap .titleWrap h3 {
    font-size: 22px;
  }
  .keynoteWrap .titleWrap .btnWrap {
    width: 100%;
    justify-content: flex-end;
  }
  .keynoteWrap .icon72 {
    width: 56px;
  }
  .keynoteWrap .icon56 {
    width: 40px;
  }
  .keynoteWrap table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .keynoteWrap table th,
  .keynoteWrap table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  .keynoteWrap ul.tabList {
    flex-wrap: wrap;
    gap: 4px;
  }
  .keynoteWrap ul.tabList li.tabBtn {
    flex: 1 1 calc(50% - 4px);
  }
  .keynoteWrap ul.tabList li.tabBtn a {
    padding: 8px;
    font-size: 14px;
  }
  .keynoteWrap .tba p {
    font-size: 18px;
    margin-top: 32px !important;
    letter-spacing: 1px;
  }
  .keynoteWrap .tbaCustomBtn .tbaBadge,
  .keynoteWrap .tbaBtn::after {
    font-size: 12px;
    padding: 2px 8px;
  }
}
@media (max-width: 1024px) {
  .keynoteWrap .subMenuTitleSection {
    z-index: 999 !important;
    height: 240px !important;
    overflow: hidden;
    border-radius: 0;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .subMenuTitleSection {
    height: 240px !important;
    overflow: hidden;
  }
}
@media (max-width: 1024px) {
  .keynoteWrap .subMenuTitle {
    height: 320px !important;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .subMenuTitle {
    height: 320px !important;
  }
}
@media (max-width: 1024px) {
  .keynoteWrap .subMenuTab .subMenuTitleSection {
    z-index: 9999;
  }
  .keynoteWrap .subMenuTab {
    overflow-x: scroll;
    justify-content: center;
    position: fixed;
    top: 80px;
    z-index: 999;
    max-width: 100%;
    border-radius: 99px !important;
    justify-content: flex-start !important;
  }
  .keynoteWrap .subMenuTab::-webkit-scrollbar {
    display: none;
  }
  .keynoteWrap .subMenuTab li {
    border-radius: 99px !important;
    border: 0px solid transparent !important;
    border-width: 0 !important;
    background-color: rgba(255, 255, 255, 0);
  }
  .keynoteWrap .subMenuTab li a {
    border: none;
    padding: 6px 8px !important;
  }
  .keynoteWrap .subMenuTab li a h2 {
    font-size: 15px;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .subMenuTab {
    justify-content: center;
  }
  .keynoteWrap .subMenuTab li a {
    padding: 6px 8px !important;
  }
  .keynoteWrap .subMenuTab li a h2 {
    font-size: 15px;
  }
}
.keynoteWrap footer {
  z-index: 999999 !important;
}
.keynoteWrap .mobileHeader {
  z-index: 9999999 !important;
}
.keynoteWrap .headerLogoWrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  flex-direction: column;
  max-height: 62px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}
.keynoteWrap .headerLogoWrap .headerLogo {
  max-width: 196px;
}
.keynoteWrap header {
  min-width: 1420px;
}
.keynoteWrap {
  /* 1. 전체 메뉴 보기 형태 (Mega Menu) */
}
.keynoteWrap header.allViewGnb {
  position: absolute;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 0;
  margin-bottom: -100px;
  background: rgba(0, 0, 0, 0);
  transition: 0.2s;
  /* 뒷배경 어두워지는 요소 (공통 속성) */
}
.keynoteWrap header.allViewGnb::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.keynoteWrap header.allViewGnb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: 0.3s;
}
.keynoteWrap header.allViewGnb ul.gnb {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1240px;
  padding: 12px 24px 0;
  border-radius: 48px;
  background: rgba(245, 248, 249, 0.76);
  backdrop-filter: blur(12px);
  border: 1px solid #fff; /* top 중복 제거 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.063);
  overflow: hidden !important;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  /* 각 메뉴 사이의 구분선 (기본 숨김) */
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth::after {
  content: "";
  position: absolute;
  bottom: -200%;
  right: 0;
  width: 100%;
  height: 200%;
  border-right: 1px solid #ebebeb;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s, bottom 1.2s;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth .oneDepthTouchArea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 12px;
  text-align: center;
  line-height: 110%;
  font-weight: 400;
  color: #121212;
  transition: 0.3s;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth .twoDepthWapper {
  display: grid;
  grid-template-rows: 0fr;
  gap: 12px;
  overflow: hidden;
  transition: 0.3s;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList {
  min-height: 0;
  padding: 0;
  transition: 0.3s;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth {
  padding: 0 6px;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth .twoDepthTouchArea {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  font-size: 14px;
  color: #121212 !important;
  opacity: 0;
  transition: 0.3s;
}
.keynoteWrap header.allViewGnb ul.gnb .oneDepth:nth-child(8)::after {
  border: none;
}
.keynoteWrap header.allViewGnb {
  /* --- Hover 상태 (변화하는 속성만 오버라이딩) --- */
}
.keynoteWrap header.allViewGnb:hover::before {
  opacity: 0.6;
}
.keynoteWrap header.allViewGnb:hover::after {
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0);
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth::after {
  bottom: 0;
  opacity: 1;
  border-right-color: rgba(255, 255, 255, 0.5);
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth {
  /* 1Depth 본인 호버 시 */
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth:hover .oneDepthTouchArea {
  font-weight: 800;
  color: #121212;
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth {
  /* GNB 전체 호버 시 1Depth 기본 상태 */
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth .oneDepthTouchArea {
  font-weight: 500;
  color: #121212;
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper {
  grid-template-rows: 1fr;
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList {
  padding-bottom: 24px;
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth .twoDepthTouchArea {
  padding: 4px 6px;
  opacity: 1;
}
.keynoteWrap header.allViewGnb:hover ul.gnb .oneDepth .twoDepthWapper .twoDepthItemList .twoDepth .twoDepthTouchArea:hover {
  font-weight: 600;
  background-color: rgba(18, 18, 18, 0.1);
  border-radius: 12px;
}
.keynoteWrap {
  /* =========================================
   [Responsive Overrides] Header Display Switch
   ========================================= */
}
.keynoteWrap .mobileHeader {
  display: none;
}
@media (max-width: 1024px) {
  .keynoteWrap header.allViewGnb {
    display: none !important;
  }
  .keynoteWrap .mNav {
    max-height: calc(100% - 132px);
    overflow-y: scroll;
  }
  .keynoteWrap .mobileHeader {
    display: block;
    position: fixed;
    min-width: 100%;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding-left: 24px;
    padding-right: 24px;
    background: rgba(0, 0, 0, 0);
    border-radius: 99px;
  }
  .keynoteWrap .mobileHeader .mHeaderTop {
    display: flex;
    margin-top: 24px;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    height: 72px;
    backdrop-filter: blur(12px);
    border-radius: 99px;
    backdrop-filter: none;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .mLogoWrap {
    height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .mLogoWrap .mLogo {
    height: 30px;
    min-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn {
    width: 28px;
    height: 20px;
    position: relative;
    background: transparent;
    border: none;
    z-index: 1001;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.4392156863);
    border-radius: 100%;
    border: 1px solid #fff;
    width: 48px;
    height: 48px;
    top: 50%;
    z-index: -1;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4392156863);
    left: 50%;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #121212;
    border-radius: 2px;
    transition: 0.3s;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn span:nth-child(1) {
    top: 0;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn span:nth-child(3) {
    bottom: 0;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn.active span:nth-child(2) {
    opacity: 0;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .hamburgerBtn.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }
  .keynoteWrap .mobileHeader .mDim {
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -99;
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    pointer-events: none;
  }
  .keynoteWrap .mobileHeader .mDim.active {
    background-color: rgba(0, 0, 0, 0.3137254902);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -99;
    pointer-events: fill;
  }
  .keynoteWrap .mobileHeader .mNav {
    z-index: 9999;
    position: fixed;
    top: -100%;
    opacity: 0;
    left: 32px;
    width: calc(100% - 64px);
    height: -moz-fit-content;
    height: fit-content;
    background: rgba(245, 248, 249, 0.5);
    border: 1px solid #fff;
    backdrop-filter: blur(12px);
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    overflow-y: auto;
    z-index: 1000;
    border-radius: 32px;
  }
  .keynoteWrap .mobileHeader .mNav.active {
    height: -moz-fit-content;
    height: fit-content;
    top: 108px !important;
    opacity: 1;
    left: 32px;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .keynoteWrap .mobileHeader .mNav {
    top: 96px;
    pointer-events: none;
  }
  .keynoteWrap .mobileHeader .mNav.active {
    top: 118px !important;
    pointer-events: fill;
    opacity: 1;
    left: 32px;
  }
}
@media (max-width: 1024px) and (max-width: 640px) {
  .keynoteWrap .mobileHeader .mNav {
    top: 96px;
    pointer-events: none;
  }
  .keynoteWrap .mobileHeader .mNav.active {
    top: 108px !important;
    pointer-events: fill;
    opacity: 1;
    left: 32px;
  }
}
@media (max-width: 1024px) {
  .keynoteWrap .mobileHeader .mNav .mGnb {
    padding: 24px;
    display: flex;
    flex-direction: column;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth .mOneDepthTouch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 8px;
    font-size: 18px;
    font-weight: 700;
    color: #121212;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth .mTwoDepthList {
    display: none;
    padding: 0 8px 16px 16px;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth .mTwoDepthList li a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    color: rgba(18, 18, 18, 0.7);
    font-weight: 600;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth.active .mTwoDepthList {
    display: block;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth:last-child {
    border-bottom: none;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .mNav {
    max-height: calc(100% - 132px);
    overflow-y: scroll;
  }
  .keynoteWrap .mobileHeader .mHeaderTop {
    padding: 12px 16px;
    height: 60px;
  }
  .keynoteWrap .mobileHeader .mHeaderTop .mLogoWrap .mLogo {
    height: 24px;
  }
  .keynoteWrap .mobileHeader .mNav {
    top: 96px;
    height: calc(100vh - 60px);
  }
  .keynoteWrap .mobileHeader .mNav .mGnb {
    padding: 16px;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth .mOneDepthTouch {
    padding: 16px 4px;
    font-size: 16px;
  }
  .keynoteWrap .mobileHeader .mNav .mGnb .mOneDepth .mTwoDepthList li a {
    font-size: 14px;
  }
}
.keynoteWrap .mobileHeader.is-scrolled {
  border-radius: 0;
}
.keynoteWrap .mobileHeader.is-scrolled::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  backdrop-filter: blur(2px);
  top: 0;
  left: 0;
  z-index: -1;
}
.keynoteWrap .sectionBackground {
  min-width: 1420px;
}
.keynoteWrap footer {
  position: relative;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 1420px;
  background: #e3e6ea; /* 기존 $footerColor를 덮어쓰고 있던 최종 속성 적용 */
  border-top: 1px solid #cecece;
  /* 공통 폰트 컬러 */
}
.keynoteWrap footer p {
  color: #5f5771;
}
.keynoteWrap footer p strong {
  color: #423b52;
}
.keynoteWrap footer {
  /* 내부 콘텐츠 영역 */
}
.keynoteWrap footer .footerContent {
  display: flex;
  flex: 1;
  gap: 8px;
  width: 100%;
  max-width: 1240px;
  padding: 32px 0;
}
.keynoteWrap footer .footerContent .footerLineList {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}
.keynoteWrap footer .footerContent .footerLineList .footerLine {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 내용이 없던 빈 p {} 껍데기 삭제 완료 */
}
.keynoteWrap .sponListWrap {
  position: relative;
  display: flex;
  gap: 24px;
  margin-top: 40px;
  padding: 16px 0;
  /* 4군데로 쪼개져 있던 ::after 속성 완벽 병합 */
}
.keynoteWrap .sponListWrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  min-width: 1420px;
  height: 100%;
  background-color: #ffffff;
  border-top: 1px solid #dfdfdf;
  transform: translateX(-50%);
}
.keynoteWrap .sponListWrap {
  /* 마지막 요소일 경우 border 제거 (.last가 클래스에 붙었을 때) */
}
.keynoteWrap .sponListWrap.last::after {
  border-top: none;
}
.keynoteWrap .sponListWrap .sponListContent {
  display: flex;
  gap: 8px;
}
.keynoteWrap .sponListWrap .sponListContent .sponTitle {
  display: flex;
  align-items: center;
  margin-right: 24px;
}
.keynoteWrap .sponListWrap .sponListContent .sponTitle p {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.keynoteWrap .sponListWrap .sponListContent ul.logoListWrap {
  display: flex;
  gap: 24px; /* 에러 방지를 위해 calc()로 감싸줌 */
  /* li와 a가 동일하게 display: flex; align-items: center;를 가지고 있어 병합 */
}
.keynoteWrap .sponListWrap .sponListContent ul.logoListWrap li.logo,
.keynoteWrap .sponListWrap .sponListContent ul.logoListWrap li.logo a {
  display: flex;
  align-items: center;
}
.keynoteWrap {
  /* =========================================
   [Responsive Overrides] Footer & Sponsor (Tab & Mob)
   ========================================= */
}
@media (max-width: 1024px) {
  .keynoteWrap .sectionBackground,
  .keynoteWrap footer {
    min-width: 100% !important;
  }
  .keynoteWrap footer .footerContent {
    padding: 32px 24px;
    flex-wrap: wrap;
  }
  .keynoteWrap .sponListWrap {
    flex-wrap: wrap;
    padding: 16px 24px;
    margin-top: 32px;
  }
  .keynoteWrap .sponListWrap::after {
    min-width: 100% !important;
  }
  .keynoteWrap .sponListWrap .sponListContent {
    flex-wrap: wrap;
    align-items: center;
  }
  .keynoteWrap .sponListWrap .sponListContent ul.logoListWrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .keynoteWrap footer .footerContent {
    flex-direction: column;
    gap: 16px;
    padding: 32px 16px;
  }
  .keynoteWrap footer .footerContent .footerLineList {
    width: 100%;
    text-align: center;
  }
  .keynoteWrap footer .footerContent .footerLineList .footerLine {
    gap: 8px;
  }
  .keynoteWrap footer .footerContent .footerLineList .footerLine p {
    font-size: 14px;
    line-height: 140%;
  }
  .keynoteWrap .sponListWrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 16px;
    margin-top: 24px;
  }
  .keynoteWrap .sponListWrap .sponListContent {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  .keynoteWrap .sponListWrap .sponListContent .sponTitle {
    margin-right: 0;
  }
  .keynoteWrap .sponListWrap .sponListContent .sponTitle p {
    font-size: 16px;
    font-weight: 700;
  }
  .keynoteWrap .sponListWrap .sponListContent ul.logoListWrap {
    gap: 16px;
  }
  .keynoteWrap .sponListWrap .sponListContent ul.logoListWrap li.logo img,
  .keynoteWrap .sponListWrap .sponListContent ul.logoListWrap li.logo a img {
    max-width: 120px;
    height: auto;
  }
}
.keynoteWrap .subMenuTitle {
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 120px;
}
.keynoteWrap .subMenuTitle h1 {
  font-size: 44px;
  color: #ffffff;
}
.keynoteWrap .subMenuTitle .subMenuTab {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.keynoteWrap .subMenuTitle .subMenuTab .subMenuTabBtn.active {
  background-color: #ffffff;
}
.keynoteWrap .subMenuTitle .subMenuTab .subMenuTabBtn.active a h2 {
  color: #222;
  font-weight: 800;
}
.keynoteWrap .subMenuTitle .subMenuTab .subMenuTabBtn {
  border: 1px solid #ffffff;
}
.keynoteWrap .subMenuTitle .subMenuTab .subMenuTabBtn a {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  border-radius: 90px;
}
.keynoteWrap .subMenuTitle .subMenuTab .subMenuTabBtn a h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
}
.keynoteWrap .subMenuTab {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.keynoteWrap .subMenuTab .subMenuTabBtn.active {
  background-color: #ffffff;
}
.keynoteWrap .subMenuTab .subMenuTabBtn.active a h2 {
  color: #131313 !important;
  font-weight: 800;
}
.keynoteWrap .subMenuTab .subMenuTabBtn {
  border: 1px solid rgba(255, 255, 255, 0.3764705882);
  border-radius: 12px;
  transition: 0.4s;
}
.keynoteWrap .subMenuTab .subMenuTabBtn a {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  flex: 1;
  transition: 0.4s;
}
.keynoteWrap .subMenuTab .subMenuTabBtn a h2 {
  display: flex;
  align-items: center;
  transition: 0.4s;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
}
.keynoteWrap .subMenuTab .subMenuTabBtn a:hover {
  background-color: rgba(255, 255, 255, 0.4392156863);
}
.keynoteWrap .subMenuTab .subMenuTabBtn a:hover h2 {
  font-weight: 800;
}
.keynoteWrap .subMenuBackground {
  border-radius: 0 0 340px 0px;
  position: absolute !important;
}
.keynoteWrap {
  /* =========================================
   Base & Variables
   ========================================= */
}
.keynoteWrap * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.keynoteWrap body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f4f7f9;
  color: #333333;
  line-height: 1.5;
  font-size: 16px;
}
@media (max-width: 640px) {
  .keynoteWrap body {
    font-size: 14px;
  }
}
.keynoteWrap {
  /* =========================================
   Layout & Components
   ========================================= */
}
.keynoteWrap .speaker-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 40px;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-section {
    padding: 40px 24px;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-section {
    padding: 32px 16px;
  }
}
.keynoteWrap .speaker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 40px;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-grid {
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.keynoteWrap .speaker-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  overflow: hidden;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(245, 248, 249, 0.1254901961);
  backdrop-filter: blur(12px);
  border: 2px solid #fff;
  border-radius: 24px 24px 24px 24px;
  align-items: center;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.062745098);
  padding: 0px 0 0px 24px;
}
.keynoteWrap .speaker-card .abs-btn.dim {
  pointer-events: none !important;
  color: #aaa !important;
}
.keynoteWrap .speaker-card .bio-btn.dim {
  pointer-events: none !important;
  color: #aaa !important;
}
.keynoteWrap .speaker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 168, 138, 0.1);
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card {
    padding: 0px 0 0px 20px;
    gap: 20px;
    flex-direction: column;
    padding-top: 16px;
    border-radius: 24px;
    justify-content: center;
    padding-left: 0;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-card {
    padding: 16px 0 0px 0px;
    gap: 12px;
  }
}
.keynoteWrap .speaker-card {
  /* --- Image Box --- */
}
.keynoteWrap .speaker-card .speaker-image {
  flex-shrink: 0;
  height: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
  height: calc(100% - 48px);
  min-width: 96px;
  min-height: 96px;
  max-height: 96px;
  max-width: 96px;
  aspect-ratio: 1/1;
  width: -moz-fit-content !important;
  width: fit-content !important;
  border-radius: 999px;
  overflow: hidden;
  background-color: #eaeaea;
  border: 2px solid #fff;
  border-radius: 90px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.062745098);
}
.keynoteWrap .speaker-card .speaker-image img {
  height: 100%;
  max-width: 160px;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  aspect-ratio: 1/1;
  background: transparent;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card .speaker-image {
    width: 120px;
    height: 140px;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-card .speaker-image {
    width: 90px;
    height: 110px;
    margin: 0 !important;
  }
}
.keynoteWrap .speaker-card .speaker-btn.dim {
  pointer-events: none;
}
.keynoteWrap .speaker-card .speaker-btn.dim a {
  color: #aaa;
}
.keynoteWrap .speaker-card .speaker-btn {
  display: flex;
  box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.0392156863);
  gap: 0px;
  border-left: 1px solid rgba(217, 217, 217, 0.6117647059);
  flex-direction: column;
  right: 8px;
  bottom: 8px;
  height: 100%;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card .speaker-btn {
    width: 100%;
    flex-direction: row;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.0392156863);
    padding-left: 0px;
  }
  .keynoteWrap .speaker-card .speaker-btn a {
    width: 100%;
  }
  .keynoteWrap .speaker-card .speaker-btn .abs-btn {
    color: #f06c00;
    border: none !important;
    border-right: 1px solid rgba(217, 217, 217, 0.5803921569) !important;
  }
}
.keynoteWrap .speaker-card .speaker-btn a {
  border-bottom: 1px solid rgba(217, 217, 217, 0.5803921569);
  padding: 6px 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  overflow: hidden;
  transition: 0.3s;
}
.keynoteWrap .speaker-card .speaker-btn .abs-btn {
  color: #f06c00;
}
.keynoteWrap .speaker-card .speaker-btn .abs-btn:hover {
  background-color: rgba(223, 71, 0, 0.062745098);
}
.keynoteWrap .speaker-card .speaker-btn .bio-btn {
  color: #00a88a;
  border: none;
}
.keynoteWrap .speaker-card .speaker-btn .bio-btn:hover {
  background-color: rgba(0, 168, 137, 0.062745098);
}
.keynoteWrap .speaker-card {
  /* --- Info Box --- */
}
.keynoteWrap .speaker-card .speaker-info {
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  padding-top: 10px;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card .speaker-info {
    padding-right: 16px;
    padding-left: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
.keynoteWrap .speaker-card .speaker-info .speaker-title {
  color: #00a88a;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card .speaker-info .speaker-title {
    text-align: center;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-card .speaker-info .speaker-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
.keynoteWrap .speaker-card .speaker-info .speaker-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card .speaker-info .speaker-name {
    text-align: center;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-card .speaker-info .speaker-name {
    font-size: 15px;
  }
}
.keynoteWrap .speaker-card .speaker-info .speaker-affiliation {
  font-size: 15px;
  color: #666666;
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .keynoteWrap .speaker-card .speaker-info .speaker-affiliation {
    text-align: center;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-card .speaker-info .speaker-affiliation {
    font-size: 14px;
    margin-bottom: 12px;
  }
}
.keynoteWrap .speaker-card .speaker-info {
  /* --- Biography Button --- */
}
.keynoteWrap .speaker-card .speaker-info .btn-bio {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  font-size: 14px;
  color: #666666;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}
.keynoteWrap .speaker-card .speaker-info .btn-bio:hover {
  border-color: #00a88a;
  color: #00a88a;
}
.keynoteWrap .speaker-card .speaker-info .btn-bio:hover .icon-arrow {
  background-color: #00a88a;
}
.keynoteWrap .speaker-card .speaker-info .btn-bio .icon-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #e0e0e0;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 10px;
  transition: background-color 0.2s ease;
}
@media (max-width: 640px) {
  .keynoteWrap .speaker-card .speaker-info .btn-bio {
    font-size: 13px;
    padding: 4px 12px;
  }
}
.keynoteWrap .speaker-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.keynoteWrap .speaker-modal.show {
  display: flex;
  opacity: 1;
}
.keynoteWrap .modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}
.keynoteWrap .speaker-modal.show .modal-content {
  transform: translateY(0);
}
.keynoteWrap .close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s;
}
.keynoteWrap .close-btn:hover {
  color: #333;
}
.keynoteWrap .modal-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.keynoteWrap .modal-header-img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.keynoteWrap .modal-header-info h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  line-height: 1.3;
  color: #222;
}
.keynoteWrap .modal-header-info p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
.keynoteWrap .modal-body h4 {
  margin-top: 0;
  color: #121212;
  font-size: 18px;
  margin-bottom: 15px;
}
.keynoteWrap .modal-body p {
  line-height: 1.6;
  color: #444;
  font-size: 15px;
}
@media (max-width: 576px) {
  .keynoteWrap .modal-header {
    flex-direction: column;
    text-align: center;
  }
  .keynoteWrap .modal-content {
    padding: 24px 20px;
  }
}
.keynoteWrap {
  /* 팝업 헤더 컨테이너 */
}
.keynoteWrap .modal-header {
  display: flex;
  align-items: center; /* 텍스트와 이미지 수직 중앙 정렬 */
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
@media (max-width: 1024px) {
  .keynoteWrap .modal-header {
    flex-direction: column;
  }
}
.keynoteWrap {
  /* 팝업 헤더 연사 이미지 */
}
.keynoteWrap .modal-header-img img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.keynoteWrap {
  /* 보내주신 스타일을 적용한 모달 내부 텍스트 영역 */
}
.keynoteWrap .modal-header-info {
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  padding-top: 10px;
}
@media (max-width: 1024px) {
  .keynoteWrap .modal-header-info {
    padding-right: 16px;
    padding-left: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
    align-items: center; /* 모바일에서 가운데 정렬을 위해 추가 */
  }
}
.keynoteWrap .modal-header-info .speaker-title {
  color: #00a88a; /* $primary-color 대체 */
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .keynoteWrap .modal-header-info .speaker-title {
    text-align: center;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .modal-header-info .speaker-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
.keynoteWrap .modal-header-info .speaker-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
@media (max-width: 1024px) {
  .keynoteWrap .modal-header-info .speaker-name {
    text-align: center;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .modal-header-info .speaker-name {
    font-size: 15px;
  }
}
.keynoteWrap .modal-header-info .speaker-affiliation {
  font-size: 15px;
  color: #666666; /* $text-muted 대체 */
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .keynoteWrap .modal-header-info .speaker-affiliation {
    text-align: center;
  }
}
@media (max-width: 640px) {
  .keynoteWrap .modal-header-info .speaker-affiliation {
    font-size: 14px;
    margin-bottom: 12px;
  }
}
.keynoteWrap .modal-header-info {
  /* --- Biography Button --- */
}
.keynoteWrap .modal-header-info .btn-bio {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  font-size: 14px;
  color: #666666;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}
.keynoteWrap .modal-header-info .btn-bio:hover {
  border-color: #2764e7;
  color: #2764e7;
}
.keynoteWrap .modal-header-info .btn-bio:hover .icon-arrow {
  background-color: #2764e7;
}
.keynoteWrap .modal-header-info .btn-bio .icon-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #e0e0e0;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 10px;
  transition: background-color 0.2s ease;
}
@media (max-width: 1024px) {
  .keynoteWrap .modal-header-info .btn-bio {
    align-self: center; /* 모바일에서는 버튼도 가운데 정렬 */
  }
}
@media (max-width: 640px) {
  .keynoteWrap .modal-header-info .btn-bio {
    font-size: 13px;
    padding: 4px 12px;
  }
}
.keynoteWrap {

}

.keynoteWrap .contactUsTitle {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 24px !important;
  font-weight: 800;
  cursor: pointer;
  line-height: 120%;
  margin-bottom: 32px;
  background: #f5f8f9;
  padding: 16px 24px;
  padding-right: 80px;
  border-radius: 20px;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.07), -6px -6px 14px rgb(255, 255, 255);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.keynoteWrap .contactUsTitle:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.09), -8px -8px 18px rgb(255, 255, 255);
}
.keynoteWrap .contactUsTitle:hover::before {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08), -4px -4px 10px rgb(255, 255, 255);
}
.keynoteWrap .contactUsTitle {
  border: 2px solid rgba(0, 168, 138, 0);
}
.keynoteWrap .contactUsTitle.active {
  transform: translateY(0);
  border: 2px solid rgba(0, 168, 138, 0.3137254902);
}
.keynoteWrap .contactUsTitle.active strong {
  background-color: #00a88a;
}
.keynoteWrap .contactUsTitle.active {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.05), inset -5px -5px 10px rgb(255, 255, 255);
}
.keynoteWrap .contactUsTitle.active::before {
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.05), inset -3px -3px 6px rgb(255, 255, 255);
}
.keynoteWrap .contactUsTitle.active::after {
  transform: translateY(-30%) rotate(225deg);
  border-color: rgba(66, 59, 82, 0.6);
}
.keynoteWrap .contactUsTitle strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: 20px !important;
  color: #fff !important;
  background: rgba(66, 59, 82, 0.5019607843);
  border-radius: 16%;
  margin-right: 16px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15), -3px -3px 8px rgba(255, 255, 255, 0.3);
}
.keynoteWrap .contactUsTitle::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: #f5f8f9;
  border-radius: 50%;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.06), -3px -3px 8px rgb(255, 255, 255);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.keynoteWrap .contactUsTitle::after {
  content: "";
  position: absolute;
  right: 36px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid rgba(0, 0, 0, 0.25);
  border-bottom: 3px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  transform: translateY(-65%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (max-width: 960px) {
  .keynoteWrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .keynoteWrap .contactUsTitle {
    font-size: 20px !important;
  }
}
@media (max-width: 439px) {
  .keynoteWrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .keynoteWrap .contactUsTitle {
    font-size: 18px !important;
  }
}
.keynoteWrap .speaker-grid {
  display: none;
}
.keynoteWrap .speaker-grid.active {
  display: grid;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/*# sourceMappingURL=keynotespeaker.css.map */