@charset "UTF-8";
:root {
  --primary-color: #4450D3;
  --secondary-color: #294279;
  --color-red: #DF1A4B;
}

/* Modern CSS Reset */
/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
body, button, div, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

/* Allow percentage-based heights */
html, body {
  height: 100%;
}

/* Typographic and rendering tweaks */
body {
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  background-color: #fff;
}

/* Remove list styles on elements with a list role */
ul[role=list], ol[role=list] {
  list-style: none;
}

/* Anchor defaults */
a {
  color: inherit;
  text-decoration: none;
}

/* Headings and paragraphs: better long-word handling */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Buttons */
button {
  border: none;
  background: transparent;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

div, p, span, a, button, input, textarea, select {
  margin: 0;
  padding: 0;
}

legend, caption {
  display: none;
}

label {
  margin-bottom: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0;
  line-height: 1.5;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* @import "notosanskr.css"; */
/*
@font-face {
	font-family: "Noto Sans CJK KR";
	font-style: normal;
	font-weight: 300;
  font-display: swap;
	src: url("../fonts/NotoSansCJKkr-Light.woff") format("woff");
}

@font-face {
	font-family: "Noto Sans CJK KR";
	font-style: normal;
	font-weight: 400;
  font-display: swap;
	src: url("../fonts/NotoSansCJKkr-Regular.woff") format("woff");
}

@font-face {
	font-family: "Noto Sans CJK KR";
	font-style: normal;
	font-weight: 500;
  font-display: swap;
	src: url("../fonts/NotoSansCJKkr-Medium.woff") format("woff");
}

@font-face {
	font-family: "Noto Sans CJK KR";
	font-style: normal;
	font-weight: 700;
  font-display: swap;
	src: url("../fonts/NotoSansCJKkr-Bold.woff") format("woff");
}

*/
/*
 @font-face {
   font-family: "Noto Serif TC";
   src: url("fonts/NotoSansCJKkr-Medium.woff") format("woff");
 	unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2A700–2B73F, U+2B740–2B81F, U+2B820–2CEAF, U+F900-FAFF, U+2F800-2FA1F;
 }
*/
@font-face {
  font-family: "korean-webfont";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/korean_dic.eot"); /* IE */
  src: local("국어사전비표준문자"), url("../fonts/korean_dic.ttf") format("truetype"), url("../fonts/korean_dic.eot");
}
@font-face {
  font-family: "NanumBarunGothicYetHangul";
  src: url(../fonts/NanumBarunGothic-YetHangul.eot);
  src: url(../fonts/NanumBarunGothic-YetHangul.eot?#iefix) format("embedded-opentype"), url(../fonts/NanumBarunGothic-YetHangul.woff2) format("woff2"), url(../fonts/NanumBarunGothic-YetHangul.woff) format("woff"), url(../fonts/NanumBarunGothic-YetHangul.ttf) format("truetype");
  unicode-range: U+0000-4DFF, U+A000-F8FF, U+FB00-FFFF;
}
/* 페이퍼로지 (OFL) - 메인 섹션 제목용 */
@font-face {
  font-family: "Paperlogy";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Paperlogy-6SemiBold.woff2) format("woff2");
}
/* 한자 범위: Noto Sans CJK KR Regular으로 폴백 */
@font-face {
  font-family: "NanumBarunGothicYetHangul";
  src: url("../fonts/NotoSansCJKkr-Regular.woff") format("woff");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF;
}
/* 함초롱바탕 */
@font-face {
  font-family: "HCRBatang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/HCRBatang-Regular.woff2) format("woff2");
  unicode-range: U+317F, U+3181, U+3186, U+318D;
}
@font-face {
  font-family: "HCRBatang";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/HCRBatang-Bold.woff2) format("woff2");
  unicode-range: U+317F, U+3181, U+3186, U+318D;
}
.sm-txt {
  font-size: 17px;
}

.col-primary {
  color: #294279 !important;
}

.wrap [class*=ico] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
}

.wrap [class*=ico16] {
  width: 16px;
  height: 16px;
}

.wrap [class*=ico24] {
  width: 24px;
  height: 24px;
}

.wrap [class*=ico32] {
  width: 32px;
  height: 32px;
}

.ico16-external {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M7.25%202h-3A2.25%202.25%200%200%200%202%204.25v7.5A2.25%202.25%200%200%200%204.25%2014h7.5A2.25%202.25%200%200%200%2014%2011.75v-3M10.25%202H14m0%200v3.375M14%202%207.624%208.375'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-external-navy {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M7.25%202h-3A2.25%202.25%200%200%200%202%204.25v7.5A2.25%202.25%200%200%200%204.25%2014h7.5A2.25%202.25%200%200%200%2014%2011.75v-3M10.25%202H14m0%200v3.375M14%202%207.624%208.375'%20stroke='%23294279'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-user {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M3.05%2013.4c.346-.387%201.966-2.17%202.44-2.17h5.02c.688%200%202.092%201.478%202.44%201.998M15.2%208A7.2%207.2%200%201%201%20.8%208a7.2%207.2%200%200%201%2014.4%200Zm-4.621-2.454c0-1.374-1.16-2.496-2.579-2.496-1.42%200-2.579%201.122-2.579%202.496%200%201.374%201.16%202.496%202.579%202.496%201.42%200%202.579-1.122%202.579-2.496Z'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-login {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M6.883%201.28h5.224c.825%200%201.493.86%201.493%201.92V12.8c0%201.06-.668%201.919-1.493%201.919H6.88m.373-9.333L9.867%208l-2.614%202.613M2.4%208.003h7.467'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-chevronDown {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M13%2010.5801L7.99919%206.00008L3%2010.5801'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-chevronUp {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M13%2010.5801L7.99919%206.00008L3%2010.5801'%20stroke='%23222'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-chevronLeft {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M10.58%203%206%208l4.58%205'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-chevronRight {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M5.42%2013%2010%208%205.42%203'%20stroke='%23222'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-refresh {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M13.347%209.875C12.583%2012.27%2010.397%2014%207.818%2014%204.605%2014%202%2011.314%202%208s2.605-6%205.818-6c2.154%200%204.034%201.207%205.04%203m-1.767.75H14v-3'%20stroke='%23222'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-more {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M7.8%203.5v9.6m4.8-4.8H3'%20stroke='%23222'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-arrowRight-white {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M13.333%205%2020%2012m0%200-6.667%207M20%2012H4'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico16-clock {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M10.428%2010.488a.75.75%200%200%200%20.474-1.423l-.237.712zM8%208.888h-.75c0%20.323.207.61.513.712zm.75-3.715a.75.75%200%200%200-1.5%200h1.5m1.915%204.604.237-.712-2.665-.888L8%208.888l-.237.712%202.665.888zM8%208.888h.75V5.173h-1.5v3.715zM15.107%208h-.75A6.357%206.357%200%200%201%208%2014.357v1.5A7.857%207.857%200%200%200%2015.857%208zM8%2015.107v-.75A6.357%206.357%200%200%201%201.643%208h-1.5A7.857%207.857%200%200%200%208%2015.857zM.893%208h.75A6.357%206.357%200%200%201%208%201.643v-1.5A7.857%207.857%200%200%200%20.143%208zM8%20.893v.75A6.357%206.357%200%200%201%2014.357%208h1.5A7.857%207.857%200%200%200%208%20.143z'%20stroke='%23222'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-arrowRight {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M13.333%205%2020%2012m0%200-6.667%207M20%2012H4'%20stroke='%23222'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-arrowRight-white {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M13.333%205%2020%2012m0%200-6.667%207M20%2012H4'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-arrowUpRight {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M8.458%207.08h8.522m0%200v8.401m0-8.4-9.9%209.899'%20stroke='red'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-chevronLeft {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M10.58%203%206%208l4.58%205'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-chevronRight {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M5.42%2013%2010%208%205.42%203'%20stroke='%23222'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-chevronDown {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M3%205.4199L8.00081%209.99992L13%205.41991'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico24-chevronUp {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M13%2010.5801L7.99919%206.00008L3%2010.5801'%20stroke='%23222'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ico32-delete {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='m21%2013-3%203m0%200-3%203m3-3%203%203m-3-3-3-3M3.293%2016.695l7.327%207.8c.297.317.778.505%201.291.505h13.711C26.936%2025%2028%2024.194%2028%2023.2V8.8c0-.994-1.064-1.8-2.378-1.8h-13.71c-.514%200-.995.188-1.293.505l-7.326%207.8c-.39.416-.39.974%200%201.39Z'%20stroke='%23222'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mt-0px {
  margin-top: 0px !important;
}

.mt-2px {
  margin-top: 2px !important;
}

.mt-4px {
  margin-top: 4px !important;
}

.mt-6px {
  margin-top: 6px !important;
}

.mt-8px {
  margin-top: 8px !important;
}

.mt-10px {
  margin-top: 10px !important;
}

.mt-12px {
  margin-top: 12px !important;
}

.mt-14px {
  margin-top: 14px !important;
}

.mt-16px {
  margin-top: 16px !important;
}

.mt-18px {
  margin-top: 18px !important;
}

.mt-20px {
  margin-top: 20px !important;
}

.mt-22px {
  margin-top: 22px !important;
}

.mt-24px {
  margin-top: 24px !important;
}

.mt-26px {
  margin-top: 26px !important;
}

.mt-28px {
  margin-top: 28px !important;
}

.mt-30px {
  margin-top: 30px !important;
}

.mt-32px {
  margin-top: 32px !important;
}

.mt-34px {
  margin-top: 34px !important;
}

.mt-36px {
  margin-top: 36px !important;
}

.mt-38px {
  margin-top: 38px !important;
}

.mt-40px {
  margin-top: 40px !important;
}

.mt-42px {
  margin-top: 42px !important;
}

.mt-44px {
  margin-top: 44px !important;
}

.mt-46px {
  margin-top: 46px !important;
}

.mt-48px {
  margin-top: 48px !important;
}

.mt-50px {
  margin-top: 50px !important;
}

.mt-52px {
  margin-top: 52px !important;
}

.mt-54px {
  margin-top: 54px !important;
}

.mt-56px {
  margin-top: 56px !important;
}

.mt-58px {
  margin-top: 58px !important;
}

.mt-60px {
  margin-top: 60px !important;
}

.mb-0px {
  margin-bottom: 0px !important;
}

.mb-2px {
  margin-bottom: 2px !important;
}

.mb-4px {
  margin-bottom: 4px !important;
}

.mb-6px {
  margin-bottom: 6px !important;
}

.mb-8px {
  margin-bottom: 8px !important;
}

.mb-10px {
  margin-bottom: 10px !important;
}

.mb-12px {
  margin-bottom: 12px !important;
}

.mb-14px {
  margin-bottom: 14px !important;
}

.mb-16px {
  margin-bottom: 16px !important;
}

.mb-18px {
  margin-bottom: 18px !important;
}

.mb-20px {
  margin-bottom: 20px !important;
}

.mb-22px {
  margin-bottom: 22px !important;
}

.mb-24px {
  margin-bottom: 24px !important;
}

.mb-26px {
  margin-bottom: 26px !important;
}

.mb-28px {
  margin-bottom: 28px !important;
}

.mb-30px {
  margin-bottom: 30px !important;
}

.mb-32px {
  margin-bottom: 32px !important;
}

.mb-34px {
  margin-bottom: 34px !important;
}

.mb-36px {
  margin-bottom: 36px !important;
}

.mb-38px {
  margin-bottom: 38px !important;
}

.mb-40px {
  margin-bottom: 40px !important;
}

.mb-42px {
  margin-bottom: 42px !important;
}

.mb-44px {
  margin-bottom: 44px !important;
}

.mb-46px {
  margin-bottom: 46px !important;
}

.mb-48px {
  margin-bottom: 48px !important;
}

.mb-50px {
  margin-bottom: 50px !important;
}

.mb-52px {
  margin-bottom: 52px !important;
}

.mb-54px {
  margin-bottom: 54px !important;
}

.mb-56px {
  margin-bottom: 56px !important;
}

.mb-58px {
  margin-bottom: 58px !important;
}

.mb-60px {
  margin-bottom: 60px !important;
}

.mr-0px {
  margin-right: 0px !important;
}

.mr-2px {
  margin-right: 2px !important;
}

.mr-4px {
  margin-right: 4px !important;
}

.mr-6px {
  margin-right: 6px !important;
}

.mr-8px {
  margin-right: 8px !important;
}

.mr-10px {
  margin-right: 10px !important;
}

.mr-12px {
  margin-right: 12px !important;
}

.mr-14px {
  margin-right: 14px !important;
}

.mr-16px {
  margin-right: 16px !important;
}

.mr-18px {
  margin-right: 18px !important;
}

.mr-20px {
  margin-right: 20px !important;
}

.mr-22px {
  margin-right: 22px !important;
}

.mr-24px {
  margin-right: 24px !important;
}

.mr-26px {
  margin-right: 26px !important;
}

.mr-28px {
  margin-right: 28px !important;
}

.mr-30px {
  margin-right: 30px !important;
}

.mr-32px {
  margin-right: 32px !important;
}

.mr-34px {
  margin-right: 34px !important;
}

.mr-36px {
  margin-right: 36px !important;
}

.mr-38px {
  margin-right: 38px !important;
}

.mr-40px {
  margin-right: 40px !important;
}

.mr-42px {
  margin-right: 42px !important;
}

.mr-44px {
  margin-right: 44px !important;
}

.mr-46px {
  margin-right: 46px !important;
}

.mr-48px {
  margin-right: 48px !important;
}

.mr-50px {
  margin-right: 50px !important;
}

.mr-52px {
  margin-right: 52px !important;
}

.mr-54px {
  margin-right: 54px !important;
}

.mr-56px {
  margin-right: 56px !important;
}

.mr-58px {
  margin-right: 58px !important;
}

.mr-60px {
  margin-right: 60px !important;
}

.ml-0px {
  margin-left: 0px !important;
}

.ml-2px {
  margin-left: 2px !important;
}

.ml-4px {
  margin-left: 4px !important;
}

.ml-6px {
  margin-left: 6px !important;
}

.ml-8px {
  margin-left: 8px !important;
}

.ml-10px {
  margin-left: 10px !important;
}

.ml-12px {
  margin-left: 12px !important;
}

.ml-14px {
  margin-left: 14px !important;
}

.ml-16px {
  margin-left: 16px !important;
}

.ml-18px {
  margin-left: 18px !important;
}

.ml-20px {
  margin-left: 20px !important;
}

.ml-22px {
  margin-left: 22px !important;
}

.ml-24px {
  margin-left: 24px !important;
}

.ml-26px {
  margin-left: 26px !important;
}

.ml-28px {
  margin-left: 28px !important;
}

.ml-30px {
  margin-left: 30px !important;
}

.ml-32px {
  margin-left: 32px !important;
}

.ml-34px {
  margin-left: 34px !important;
}

.ml-36px {
  margin-left: 36px !important;
}

.ml-38px {
  margin-left: 38px !important;
}

.ml-40px {
  margin-left: 40px !important;
}

.ml-42px {
  margin-left: 42px !important;
}

.ml-44px {
  margin-left: 44px !important;
}

.ml-46px {
  margin-left: 46px !important;
}

.ml-48px {
  margin-left: 48px !important;
}

.ml-50px {
  margin-left: 50px !important;
}

.ml-52px {
  margin-left: 52px !important;
}

.ml-54px {
  margin-left: 54px !important;
}

.ml-56px {
  margin-left: 56px !important;
}

.ml-58px {
  margin-left: 58px !important;
}

.ml-60px {
  margin-left: 60px !important;
}

.m-0px {
  padding: 0px !important;
}

.m-2px {
  padding: 2px !important;
}

.m-4px {
  padding: 4px !important;
}

.m-6px {
  padding: 6px !important;
}

.m-8px {
  padding: 8px !important;
}

.m-10px {
  padding: 10px !important;
}

.m-12px {
  padding: 12px !important;
}

.m-14px {
  padding: 14px !important;
}

.m-16px {
  padding: 16px !important;
}

.m-18px {
  padding: 18px !important;
}

.m-20px {
  padding: 20px !important;
}

.m-22px {
  padding: 22px !important;
}

.m-24px {
  padding: 24px !important;
}

.m-26px {
  padding: 26px !important;
}

.m-28px {
  padding: 28px !important;
}

.m-30px {
  padding: 30px !important;
}

.m-32px {
  padding: 32px !important;
}

.m-34px {
  padding: 34px !important;
}

.m-36px {
  padding: 36px !important;
}

.m-38px {
  padding: 38px !important;
}

.m-40px {
  padding: 40px !important;
}

.m-42px {
  padding: 42px !important;
}

.m-44px {
  padding: 44px !important;
}

.m-46px {
  padding: 46px !important;
}

.m-48px {
  padding: 48px !important;
}

.m-50px {
  padding: 50px !important;
}

.m-52px {
  padding: 52px !important;
}

.m-54px {
  padding: 54px !important;
}

.m-56px {
  padding: 56px !important;
}

.m-58px {
  padding: 58px !important;
}

.m-60px {
  padding: 60px !important;
}

.my-0px {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.my-2px {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.my-4px {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.my-6px {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.my-8px {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.my-10px {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.my-12px {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.my-14px {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.my-16px {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.my-18px {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.my-20px {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.my-22px {
  margin-top: 22px !important;
  margin-bottom: 22px !important;
}

.my-24px {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.my-26px {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
}

.my-28px {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.my-30px {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.my-32px {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.my-34px {
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

.my-36px {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.my-38px {
  margin-top: 38px !important;
  margin-bottom: 38px !important;
}

.my-40px {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.my-42px {
  margin-top: 42px !important;
  margin-bottom: 42px !important;
}

.my-44px {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}

.my-46px {
  margin-top: 46px !important;
  margin-bottom: 46px !important;
}

.my-48px {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.my-50px {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

.my-52px {
  margin-top: 52px !important;
  margin-bottom: 52px !important;
}

.my-54px {
  margin-top: 54px !important;
  margin-bottom: 54px !important;
}

.my-56px {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}

.my-58px {
  margin-top: 58px !important;
  margin-bottom: 58px !important;
}

.my-60px {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.mx-0px {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.mx-2px {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.mx-4px {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.mx-6px {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.mx-8px {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.mx-10px {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.mx-12px {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.mx-14px {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.mx-16px {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.mx-18px {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.mx-20px {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.mx-22px {
  margin-left: 22px !important;
  margin-right: 22px !important;
}

.mx-24px {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.mx-26px {
  margin-left: 26px !important;
  margin-right: 26px !important;
}

.mx-28px {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.mx-30px {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.mx-32px {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.mx-34px {
  margin-left: 34px !important;
  margin-right: 34px !important;
}

.mx-36px {
  margin-left: 36px !important;
  margin-right: 36px !important;
}

.mx-38px {
  margin-left: 38px !important;
  margin-right: 38px !important;
}

.mx-40px {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.mx-42px {
  margin-left: 42px !important;
  margin-right: 42px !important;
}

.mx-44px {
  margin-left: 44px !important;
  margin-right: 44px !important;
}

.mx-46px {
  margin-left: 46px !important;
  margin-right: 46px !important;
}

.mx-48px {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.mx-50px {
  margin-left: 50px !important;
  margin-right: 50px !important;
}

.mx-52px {
  margin-left: 52px !important;
  margin-right: 52px !important;
}

.mx-54px {
  margin-left: 54px !important;
  margin-right: 54px !important;
}

.mx-56px {
  margin-left: 56px !important;
  margin-right: 56px !important;
}

.mx-58px {
  margin-left: 58px !important;
  margin-right: 58px !important;
}

.mx-60px {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.p-0px {
  padding: 0px !important;
}

.p-2px {
  padding: 2px !important;
}

.p-4px {
  padding: 4px !important;
}

.p-6px {
  padding: 6px !important;
}

.p-8px {
  padding: 8px !important;
}

.p-10px {
  padding: 10px !important;
}

.p-12px {
  padding: 12px !important;
}

.p-14px {
  padding: 14px !important;
}

.p-16px {
  padding: 16px !important;
}

.p-18px {
  padding: 18px !important;
}

.p-20px {
  padding: 20px !important;
}

.p-22px {
  padding: 22px !important;
}

.p-24px {
  padding: 24px !important;
}

.p-26px {
  padding: 26px !important;
}

.p-28px {
  padding: 28px !important;
}

.p-30px {
  padding: 30px !important;
}

.p-32px {
  padding: 32px !important;
}

.p-34px {
  padding: 34px !important;
}

.p-36px {
  padding: 36px !important;
}

.p-38px {
  padding: 38px !important;
}

.p-40px {
  padding: 40px !important;
}

.p-42px {
  padding: 42px !important;
}

.p-44px {
  padding: 44px !important;
}

.p-46px {
  padding: 46px !important;
}

.p-48px {
  padding: 48px !important;
}

.p-50px {
  padding: 50px !important;
}

.p-52px {
  padding: 52px !important;
}

.p-54px {
  padding: 54px !important;
}

.p-56px {
  padding: 56px !important;
}

.p-58px {
  padding: 58px !important;
}

.p-60px {
  padding: 60px !important;
}

.pt-0px {
  padding-top: 0px !important;
}

.pt-2px {
  padding-top: 2px !important;
}

.pt-4px {
  padding-top: 4px !important;
}

.pt-6px {
  padding-top: 6px !important;
}

.pt-8px {
  padding-top: 8px !important;
}

.pt-10px {
  padding-top: 10px !important;
}

.pt-12px {
  padding-top: 12px !important;
}

.pt-14px {
  padding-top: 14px !important;
}

.pt-16px {
  padding-top: 16px !important;
}

.pt-18px {
  padding-top: 18px !important;
}

.pt-20px {
  padding-top: 20px !important;
}

.pt-22px {
  padding-top: 22px !important;
}

.pt-24px {
  padding-top: 24px !important;
}

.pt-26px {
  padding-top: 26px !important;
}

.pt-28px {
  padding-top: 28px !important;
}

.pt-30px {
  padding-top: 30px !important;
}

.pt-32px {
  padding-top: 32px !important;
}

.pt-34px {
  padding-top: 34px !important;
}

.pt-36px {
  padding-top: 36px !important;
}

.pt-38px {
  padding-top: 38px !important;
}

.pt-40px {
  padding-top: 40px !important;
}

.pt-42px {
  padding-top: 42px !important;
}

.pt-44px {
  padding-top: 44px !important;
}

.pt-46px {
  padding-top: 46px !important;
}

.pt-48px {
  padding-top: 48px !important;
}

.pt-50px {
  padding-top: 50px !important;
}

.pt-52px {
  padding-top: 52px !important;
}

.pt-54px {
  padding-top: 54px !important;
}

.pt-56px {
  padding-top: 56px !important;
}

.pt-58px {
  padding-top: 58px !important;
}

.pt-60px {
  padding-top: 60px !important;
}

.pb-0px {
  padding-bottom: 0px !important;
}

.pb-2px {
  padding-bottom: 2px !important;
}

.pb-4px {
  padding-bottom: 4px !important;
}

.pb-6px {
  padding-bottom: 6px !important;
}

.pb-8px {
  padding-bottom: 8px !important;
}

.pb-10px {
  padding-bottom: 10px !important;
}

.pb-12px {
  padding-bottom: 12px !important;
}

.pb-14px {
  padding-bottom: 14px !important;
}

.pb-16px {
  padding-bottom: 16px !important;
}

.pb-18px {
  padding-bottom: 18px !important;
}

.pb-20px {
  padding-bottom: 20px !important;
}

.pb-22px {
  padding-bottom: 22px !important;
}

.pb-24px {
  padding-bottom: 24px !important;
}

.pb-26px {
  padding-bottom: 26px !important;
}

.pb-28px {
  padding-bottom: 28px !important;
}

.pb-30px {
  padding-bottom: 30px !important;
}

.pb-32px {
  padding-bottom: 32px !important;
}

.pb-34px {
  padding-bottom: 34px !important;
}

.pb-36px {
  padding-bottom: 36px !important;
}

.pb-38px {
  padding-bottom: 38px !important;
}

.pb-40px {
  padding-bottom: 40px !important;
}

.pb-42px {
  padding-bottom: 42px !important;
}

.pb-44px {
  padding-bottom: 44px !important;
}

.pb-46px {
  padding-bottom: 46px !important;
}

.pb-48px {
  padding-bottom: 48px !important;
}

.pb-50px {
  padding-bottom: 50px !important;
}

.pb-52px {
  padding-bottom: 52px !important;
}

.pb-54px {
  padding-bottom: 54px !important;
}

.pb-56px {
  padding-bottom: 56px !important;
}

.pb-58px {
  padding-bottom: 58px !important;
}

.pb-60px {
  padding-bottom: 60px !important;
}

.pr-0px {
  padding-right: 0px !important;
}

.pr-2px {
  padding-right: 2px !important;
}

.pr-4px {
  padding-right: 4px !important;
}

.pr-6px {
  padding-right: 6px !important;
}

.pr-8px {
  padding-right: 8px !important;
}

.pr-10px {
  padding-right: 10px !important;
}

.pr-12px {
  padding-right: 12px !important;
}

.pr-14px {
  padding-right: 14px !important;
}

.pr-16px {
  padding-right: 16px !important;
}

.pr-18px {
  padding-right: 18px !important;
}

.pr-20px {
  padding-right: 20px !important;
}

.pr-22px {
  padding-right: 22px !important;
}

.pr-24px {
  padding-right: 24px !important;
}

.pr-26px {
  padding-right: 26px !important;
}

.pr-28px {
  padding-right: 28px !important;
}

.pr-30px {
  padding-right: 30px !important;
}

.pr-32px {
  padding-right: 32px !important;
}

.pr-34px {
  padding-right: 34px !important;
}

.pr-36px {
  padding-right: 36px !important;
}

.pr-38px {
  padding-right: 38px !important;
}

.pr-40px {
  padding-right: 40px !important;
}

.pr-42px {
  padding-right: 42px !important;
}

.pr-44px {
  padding-right: 44px !important;
}

.pr-46px {
  padding-right: 46px !important;
}

.pr-48px {
  padding-right: 48px !important;
}

.pr-50px {
  padding-right: 50px !important;
}

.pr-52px {
  padding-right: 52px !important;
}

.pr-54px {
  padding-right: 54px !important;
}

.pr-56px {
  padding-right: 56px !important;
}

.pr-58px {
  padding-right: 58px !important;
}

.pr-60px {
  padding-right: 60px !important;
}

.pl-0px {
  padding-left: 0px !important;
}

.pl-2px {
  padding-left: 2px !important;
}

.pl-4px {
  padding-left: 4px !important;
}

.pl-6px {
  padding-left: 6px !important;
}

.pl-8px {
  padding-left: 8px !important;
}

.pl-10px {
  padding-left: 10px !important;
}

.pl-12px {
  padding-left: 12px !important;
}

.pl-14px {
  padding-left: 14px !important;
}

.pl-16px {
  padding-left: 16px !important;
}

.pl-18px {
  padding-left: 18px !important;
}

.pl-20px {
  padding-left: 20px !important;
}

.pl-22px {
  padding-left: 22px !important;
}

.pl-24px {
  padding-left: 24px !important;
}

.pl-26px {
  padding-left: 26px !important;
}

.pl-28px {
  padding-left: 28px !important;
}

.pl-30px {
  padding-left: 30px !important;
}

.pl-32px {
  padding-left: 32px !important;
}

.pl-34px {
  padding-left: 34px !important;
}

.pl-36px {
  padding-left: 36px !important;
}

.pl-38px {
  padding-left: 38px !important;
}

.pl-40px {
  padding-left: 40px !important;
}

.pl-42px {
  padding-left: 42px !important;
}

.pl-44px {
  padding-left: 44px !important;
}

.pl-46px {
  padding-left: 46px !important;
}

.pl-48px {
  padding-left: 48px !important;
}

.pl-50px {
  padding-left: 50px !important;
}

.pl-52px {
  padding-left: 52px !important;
}

.pl-54px {
  padding-left: 54px !important;
}

.pl-56px {
  padding-left: 56px !important;
}

.pl-58px {
  padding-left: 58px !important;
}

.pl-60px {
  padding-left: 60px !important;
}

.pb-0px {
  padding-bottom: 0px !important;
}

.pb-2px {
  padding-bottom: 2px !important;
}

.pb-4px {
  padding-bottom: 4px !important;
}

.pb-6px {
  padding-bottom: 6px !important;
}

.pb-8px {
  padding-bottom: 8px !important;
}

.pb-10px {
  padding-bottom: 10px !important;
}

.pb-12px {
  padding-bottom: 12px !important;
}

.pb-14px {
  padding-bottom: 14px !important;
}

.pb-16px {
  padding-bottom: 16px !important;
}

.pb-18px {
  padding-bottom: 18px !important;
}

.pb-20px {
  padding-bottom: 20px !important;
}

.pb-22px {
  padding-bottom: 22px !important;
}

.pb-24px {
  padding-bottom: 24px !important;
}

.pb-26px {
  padding-bottom: 26px !important;
}

.pb-28px {
  padding-bottom: 28px !important;
}

.pb-30px {
  padding-bottom: 30px !important;
}

.pb-32px {
  padding-bottom: 32px !important;
}

.pb-34px {
  padding-bottom: 34px !important;
}

.pb-36px {
  padding-bottom: 36px !important;
}

.pb-38px {
  padding-bottom: 38px !important;
}

.pb-40px {
  padding-bottom: 40px !important;
}

.pb-42px {
  padding-bottom: 42px !important;
}

.pb-44px {
  padding-bottom: 44px !important;
}

.pb-46px {
  padding-bottom: 46px !important;
}

.pb-48px {
  padding-bottom: 48px !important;
}

.pb-50px {
  padding-bottom: 50px !important;
}

.pb-52px {
  padding-bottom: 52px !important;
}

.pb-54px {
  padding-bottom: 54px !important;
}

.pb-56px {
  padding-bottom: 56px !important;
}

.pb-58px {
  padding-bottom: 58px !important;
}

.pb-60px {
  padding-bottom: 60px !important;
}

.py-0px {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.py-2px {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.py-4px {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.py-6px {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.py-8px {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.py-10px {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.py-12px {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.py-14px {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.py-16px {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.py-18px {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.py-20px {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.py-22px {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.py-24px {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.py-26px {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

.py-28px {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.py-30px {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.py-32px {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.py-34px {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.py-36px {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.py-38px {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

.py-40px {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.py-42px {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

.py-44px {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.py-46px {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

.py-48px {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.py-50px {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.py-52px {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

.py-54px {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

.py-56px {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.py-58px {
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

.py-60px {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.px-0px {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.px-2px {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.px-4px {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.px-6px {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.px-8px {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.px-10px {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.px-12px {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.px-14px {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.px-16px {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-18px {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.px-20px {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.px-22px {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.px-24px {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.px-26px {
  padding-left: 26px !important;
  padding-right: 26px !important;
}

.px-28px {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.px-30px {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.px-32px {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.px-34px {
  padding-left: 34px !important;
  padding-right: 34px !important;
}

.px-36px {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.px-38px {
  padding-left: 38px !important;
  padding-right: 38px !important;
}

.px-40px {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.px-42px {
  padding-left: 42px !important;
  padding-right: 42px !important;
}

.px-44px {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.px-46px {
  padding-left: 46px !important;
  padding-right: 46px !important;
}

.px-48px {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.px-50px {
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.px-52px {
  padding-left: 52px !important;
  padding-right: 52px !important;
}

.px-54px {
  padding-left: 54px !important;
  padding-right: 54px !important;
}

.px-56px {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.px-58px {
  padding-left: 58px !important;
  padding-right: 58px !important;
}

.px-60px {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.fs-12px {
  font-size: 12px !important;
}

.fs-14px {
  font-size: 14px !important;
}

.fs-16px {
  font-size: 16px !important;
}

.fs-18px {
  font-size: 18px !important;
}

.fs-20px {
  font-size: 20px !important;
}

.fs-22px {
  font-size: 22px !important;
}

.fs-24px {
  font-size: 24px !important;
}

.fs-26px {
  font-size: 26px !important;
}

.fs-28px {
  font-size: 28px !important;
}

.fs-30px {
  font-size: 30px !important;
}

.fs-32px {
  font-size: 32px !important;
}

.fs-34px {
  font-size: 34px !important;
}

.fs-36px {
  font-size: 36px !important;
}

.fs-38px {
  font-size: 38px !important;
}

.fs-40px {
  font-size: 40px !important;
}

.fs-44px {
  font-size: 44px !important;
}

.fs-110px {
  font-size: 110px !important;
}

.fs-115px {
  font-size: 115px !important;
}

.fs-150px {
  font-size: 150px !important;
}

.mask-12px {
  min-width: 12px !important;
  width: 12px !important;
  height: 12px !important;
}

.mask-14px {
  min-width: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

.mask-16px {
  min-width: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

.mask-18px {
  min-width: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

.mask-20px {
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

.mask-22px {
  min-width: 22px !important;
  width: 22px !important;
  height: 22px !important;
}

.mask-24px {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
}

.mask-26px {
  min-width: 26px !important;
  width: 26px !important;
  height: 26px !important;
}

.mask-28px {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
}

.mask-30px {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
}

.mask-32px {
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
}

.mask-34px {
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
}

.mask-36px {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
}

.mask-38px {
  min-width: 38px !important;
  width: 38px !important;
  height: 38px !important;
}

.mask-40px {
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
}

.w-20px {
  width: 20px !important;
  max-width: 20px !important;
}

.w-40px {
  width: 40px !important;
  max-width: 40px !important;
}

.w-60px {
  width: 60px !important;
  max-width: 60px !important;
}

.w-80px {
  width: 80px !important;
  max-width: 80px !important;
}

.w-100px {
  width: 100px !important;
  max-width: 100px !important;
}

.w-120px {
  width: 120px !important;
  max-width: 120px !important;
}

.w-140px {
  width: 140px !important;
  max-width: 140px !important;
}

.w-160px {
  width: 160px !important;
  max-width: 160px !important;
}

.w-180px {
  width: 180px !important;
  max-width: 180px !important;
}

.w-200px {
  width: 200px !important;
  max-width: 200px !important;
}

.w-220px {
  width: 220px !important;
  max-width: 220px !important;
}

.w-240px {
  width: 240px !important;
  max-width: 240px !important;
}

.w-260px {
  width: 260px !important;
  max-width: 260px !important;
}

.w-280px {
  width: 280px !important;
  max-width: 280px !important;
}

.w-300px {
  width: 300px !important;
  max-width: 300px !important;
}

.w-320px {
  width: 320px !important;
  max-width: 320px !important;
}

.w-340px {
  width: 340px !important;
  max-width: 340px !important;
}

.w-360px {
  width: 360px !important;
  max-width: 360px !important;
}

.w-380px {
  width: 380px !important;
  max-width: 380px !important;
}

.w-400px {
  width: 400px !important;
  max-width: 400px !important;
}

.w-420px {
  width: 420px !important;
  max-width: 420px !important;
}

.w-440px {
  width: 440px !important;
  max-width: 440px !important;
}

.w-460px {
  width: 460px !important;
  max-width: 460px !important;
}

.w-480px {
  width: 480px !important;
  max-width: 480px !important;
}

.w-500px {
  width: 500px !important;
  max-width: 500px !important;
}

.w-520px {
  width: 520px !important;
  max-width: 520px !important;
}

.w-540px {
  width: 540px !important;
  max-width: 540px !important;
}

.w-560px {
  width: 560px !important;
  max-width: 560px !important;
}

.w-580px {
  width: 580px !important;
  max-width: 580px !important;
}

.w-600px {
  width: 600px !important;
  max-width: 600px !important;
}

.w-700px {
  width: 700px !important;
  max-width: 700px !important;
}

.w-800px {
  width: 800px !important;
  max-width: 800px !important;
}

.w-900px {
  width: 900px !important;
  max-width: 900px !important;
}

.w-1000px {
  width: 1000px !important;
  max-width: 1000px !important;
}

.w-1100px {
  width: 1100px !important;
  max-width: 1100px !important;
}

.w-1200px {
  width: 1200px !important;
  max-width: 1200px !important;
}

.w-1300px {
  width: 1300px !important;
  max-width: 1300px !important;
}

.w-1400px {
  width: 1400px !important;
  max-width: 1400px !important;
}

.w-1500px {
  width: 1500px !important;
  max-width: 1500px !important;
}

.w-1600px {
  width: 1600px !important;
  max-width: 1600px !important;
}

.col-red {
  color: #DF1A4B !important;
}

.col-primary {
  color: #4450D3;
}

.col-secondary {
  color: #294279;
}

.col-brown {
  color: #97701E;
}

.col-gray {
  color: #444;
}

.col-black {
  color: #222;
}

.underline {
  text-decoration: underline;
}

.col-lightGray {
  color: #666;
}

.gap-4px {
  gap: 4px;
}

.gap-8px {
  gap: 8px;
}

.gap-12px {
  gap: 12px;
}

.gap-16px {
  gap: 16px;
}

.gap-60px {
  gap: 60px;
}

.required-text {
  position: relative;
}

.required-text::after {
  content: "*";
  position: absolute;
  top: -4px;
  left: -15px;
  color: #DF1A4B;
  font-weight: 700;
}

.lh-1 {
  line-height: 1;
}

.lh-1_7 {
  line-height: 1.7;
}

.keep-all {
  word-break: keep-all;
}

.caret {
  margin: 0 3px;
}

.hcr-batang {
  font-family: "HCRBatang", "NanumBarunGothicYetHangul", sans-serif;
}

.btn-primary,
.btn-outline,
.btn-outlineLight,
.btn-secondary,
.btn-outlineTonal,
.btn-danger,
.btn-outlineBg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 16px;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
}

[class*=btn-].xl {
  padding: 0 20px;
  height: 55px;
  line-height: 56px;
  font-size: 20px;
  min-width: 160px;
}

[class*=btn-].lg {
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
}

[class*=btn-].md {
  padding: 0 14px;
  height: 40px;
  line-height: 39px;
  font-size: 18px;
}

[class*=btn-].sm {
  padding: 0 10px;
  height: 33px;
  line-height: 33px;
  font-size: 16px;
}

.btn-primary {
  background-color: #294279;
  border: 1px solid #294279;
}
.btn-primary:hover {
  background-color: #122A5E;
  border: 1px solid #122A5E;
}
.btn-primary:active {
  background-color: #122A5E !important;
  border: 1px solid #122A5E !important;
  box-shadow: none !important;
}

.btn-outline {
  background-color: #fff;
  border: 1px solid #999;
}
.btn-outline:hover {
  background-color: #eee;
}

.btn-outlineLight {
  background-color: #fff;
  border: 1px solid #ddd;
}
.btn-outlineLight:hover {
  background-color: #eee;
}

.btn-outlineBg {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
.btn-outlineBg:hover {
  background-color: #eee;
}

.btn-secondary {
  color: #fff;
  background-color: #444;
  border: 1px solid #444;
}
.btn-secondary:hover {
  border-color: #222;
  background-color: #222;
}

.btn-outlineTonal {
  background-color: #fff;
  border: 1px solid #294279;
  color: #294279;
}
.btn-outlineTonal:hover {
  background-color: #eee;
}

.btn-danger {
  background-color: #DF1A4B;
  border: 1px solid #DF1A4B;
  color: #fff;
}
.btn-danger:hover {
  background-color: #c91844;
  border: 1px solid #c91844;
}

/*button - reset*/
button:focus,
button[type=button]:focus,
button[type=reset]:focus,
button[type=submit]:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

button:focus-visible,
button[type=button]:not(:disabled):not(.disabled):focus-visible,
button[type=reset]:not(:disabled):not(.disabled):focus-visible,
button[type=submit]:not(:disabled):not(.disabled):focus-visible {
  outline: 3px solid var(--focus-color);
  border-radius: var(--form-radius);
  border-color: var(--secondary-color);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--btn-primary-bg-color);
  border-color: var(--btn-primary-bg-color);
}

[class*=btn-]:disabled {
  background-color: #eee;
  border: 1px solid #eee;
  color: #999;
  cursor: default;
}

[class*=btn-]:disabled:focus {
  outline: none;
}

[class*=btn-][class*=ico] {
  width: 16px;
  min-width: 16px;
  height: 16px;
} /* default */
[class*=btn-].lg [class*=ico] {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

[class*=btn-].md [class*=ico] {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

[class*=btn-].sm [class*=ico] {
  width: 14px;
  min-width: 14px;
  height: 14px;
}

[class*=btn-] .btn-label + [class*=ico] {
  margin-left: 8px;
} /* default */
[class*=btn-] [class*=ico] + .btn-label {
  margin-left: 8px;
} /* default */
[class*=btn-].lg .btn-label + [class*=ico] {
  margin-left: 8px;
}

[class*=btn-].lg [class*=ico] + .btn-label {
  margin-left: 8px;
}

[class*=btn-].md .btn-label + [class*=ico] {
  margin-left: 4px;
}

[class*=btn-].md [class*=ico] + .btn-label {
  margin-left: 4px;
}

[class*=btn-].sm .btn-label + [class*=ico] {
  margin-left: 4px;
}

[class*=btn-].sm [class*=ico] + .btn-label {
  margin-left: 4px;
}

.text-link {
  text-decoration: underline;
}

.btn-underline {
  text-decoration: underline;
  border: 0;
}

.btn-expanded-toggle i {
  transition: 0.3s;
}

.btn-expanded-toggle[aria-expanded=false] i {
  transform: rotate(180deg);
}

:root {
  --focus-color:#AEB6FB;
  --checkbox-border-color:#ddd;
  --checkbox-hover-border-color:#294279;
  --checkbox-checked-bg-color:#294279;
  --checkbox-checked-border-color:#294279;
  --checkbox-checked-hover-bg-color:#294279;
  --checkbox-checked-disabled-bg-color:#F5F5F5;
  --checkbox-checked-disabled-border-color: #EEEEEE;
  --checkbox-disabled-bg-color:#F5F5F5;
  --checkbox-disabled-border-color:#EEEEEE;
  --checkbox-disabled-text-color:#999;
  --checkbox-border-radius:4px;
  --radio-border-color: #ddd;
  --radio-hover-border-color:#294279;
  --radio-checked-bg-color:#294279;
  --radio-checked-border-color: #294279;
  --radio-checked-hover-bg-color:#294279;
  --radio-checked-disabled-bg-color:#F5F5F5;
  --radio-checked-disabled-border-color:#EEEEEE;
  --radio-disabled-bg-color:#F5F5F5;
  --radio-disabled-border-color:#EEEEEE;
  --radio-disabled-text-color:#999;
  --border-radius-circle:50%;
  --form-size-md:40px;
  --form-border-color:#ddd;
  --form-radius:8px;
}

/*
  checkbox, radio
  부트스트랩 커스텀
*/
.custom-control {
  display: flex;
  padding-left: 0;
}

.custom-control .custom-control-input {
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
}

.custom-control .custom-control-label {
  display: flex;
  line-height: 30px;
}

.custom-control .custom-control-input:not(:disabled) ~ .custom-control-label {
  cursor: pointer;
}

.custom-control .custom-control-input:focus + .custom-control-label::before {
  outline: 2px solid var(--focus-color);
  box-shadow: none;
}

.custom-control .custom-control-input:not(:disabled) ~ .custom-control-label:hover::before {
  border-color: var(--checkbox-hover-border-color);
}

.custom-control .custom-control-input + .custom-control-label span {
  margin-left: 8px;
}

/* 체크박스, 라디오 공통 */
/*checkbox*/
.custom-checkbox .custom-control-label::before {
  position: static;
  min-width: 20px;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid var(--checkbox-border-color);
  border-radius: var(--checkbox-border-radius);
}

.custom-checkbox .custom-control-label::after {
  display: none;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.00002L4.27345 7L1 3.57014' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--checkbox-checked-border-color);
  background-color: var(--checkbox-checked-bg-color);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label:hover::before {
  background-color: var(--checkbox-checked-hover-bg-color);
}

.custom-checkbox .custom-control-input:disabled ~ .custom-control-label {
  color: var(--checkbox-disabled-text-color);
}

.custom-checkbox .custom-control-input:disabled ~ .custom-control-label::before {
  border-color: var(--checkbox-disabled-border-color);
  background-color: var(--checkbox-disabled-bg-color);
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2712%27%20height%3D%279%27%20viewBox%3D%270%200%2012%209%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M10.0136%201.86354L4.287%207.86353L1.01355%204.43367%27%20stroke%3D%27%23cccccc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  border-color: var(--checkbox-checked-disabled-border-color);
  background-color: var(--checkbox-checked-disabled-bg-color);
}

.custom-checkbox .sm.custom-control-label::before {
  min-width: 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.custom-checkbox .custom-control-input + .sm.custom-control-label span {
  line-height: 20px;
}

.custom-checkbox .custom-control-input:checked ~ .sm.custom-control-label::before {
  background-size: 10px;
}

/*radio*/
.custom-radio .custom-control-label::before {
  position: static;
  min-width: 20px;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid var(--radio-border-color);
}

.custom-radio .custom-control-input ~ .custom-control-label::after {
  display: none;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  display: block;
  width: 8px;
  height: 8px;
  background-image: none;
  background-color: #fff;
  border-radius: var(--border-radius-circle);
  left: 6px;
  top: 11px;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--radio-checked-bg-color);
  border-color: var(--radio-checked-border-color);
}

.custom-radio .custom-control-input:checked ~ .custom-control-label:hover::before {
  border-color: var(--radio-hover-border-color);
}

.custom-radio .custom-control-input:disabled ~ .custom-control-label {
  color: var(--radio-disabled-text-color);
}

.custom-radio .custom-control-input:disabled ~ .custom-control-label::before {
  border: 1px solid var(--radio-disabled-border-color);
  background-color: var(--radio-disabled-bg-color);
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  border-color: var(--radio-disabled-border-color);
  background-color: var(--radio-checked-disabled-bg-color);
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::after {
  display: block;
  background-color: #ddd;
}

/*align*/
.custom-control + .custom-control {
  margin-left: 32px;
}

.block .custom-control + .custom-control {
  margin-left: 0;
}

input[type=file],
input[type=text],
input[type=submit],
input[type=search],
input[type=password],
input[type=number],
select,
.select {
  width: auto;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  font-size: 20px;
}

textarea {
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

input::placeholder, select::placeholder {
  color: #999;
}

input:focus:not(:disabled, [readonly]),
select:focus:not(:disabled, [readonly]),
textarea:focus:not(:disabled, [readonly]) {
  border-color: var(--secondary-color);
  outline: 3px solid var(--focus-color);
}

input:disabled,
input.disabled,
select:disabled,
select.disabled {
  background-color: #eee;
  color: #999;
}

input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #f5f5f5 !important;
}

input[readonly]:focus,
select[readonly] {
  outline: none;
}

select[readonly],
select:disabled,
select.disabled {
  pointer-events: none;
}

select:invalid {
  color: var(--text-color-800);
}

input.xxl, select.xxl, .select.xxl {
  height: var(--form-size-xxl);
  line-height: var(--form-size-xxl);
  padding: var(--form-paddingX-xl);
  font-size: var(--form-fs-xxl);
}

input.xl, select.xl, .select.xl {
  height: var(--form-size-xl);
  line-height: calc(var(--form-size-xl) - 1px);
  padding: var(--form-paddingX-xl);
}

input.lg, select.lg, .select.lg {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
}

input.md, select.md, .select.md {
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
}

input.sm, select.sm, .select.sm {
  height: var(--form-size-sm);
  line-height: calc(var(--form-size-sm) - 1px);
  padding: var(--form-paddingX-sm);
}

input.xs, select.xs, .select.xs {
  height: var(--form-size-xs);
  line-height: calc(var(--form-size-xs) - 1px);
  padding: var(--form-paddingX-xs);
}

select, .select {
  padding: 0 12px 0 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3%206L8.00081%2010.58L13%206%27%20stroke%3D%27%23222222%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  font-size: 18px !important;
  color: #222 !important;
}

select.lg, .select.lg {
  padding: 0 40px 0 16px;
  background-position: right 16px center;
}

/* custom select */
.customSelect {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 38px 0 12px !important;
  justify-content: flex-start;
  cursor: pointer;
  border-color: #E1E1E1 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6L8.00081 10.58L13 6' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right 12px center;
  min-width: 140px;
}

.customSelect.disabled {
  background-color: #f5f5f5 !important;
  border-color: #EEEEEE !important;
  pointer-events: none;
}

.select_origin {
  display: none;
}

.customSelect_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.customSelect .ico_arr_bot {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 12px;
}

.customSelect_list {
  position: absolute;
  width: auto;
  min-width: 140px;
  padding: 8px 0;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  margin-top: 4px;
  border: 1px solid #ddd;
  z-index: 15;
}

.customSelect_list.max-height200 {
  max-height: 200px;
  overflow-y: auto;
}

.customSelect_option {
  font-size: 18px;
  padding: 4px 16px;
  cursor: pointer;
}

.customSelect_option.on {
  color: var(--secondary-color);
  background-color: #f5f5f5;
}

.customSelect_option:hover {
  background-color: #eee;
}

.customSelect_option.disabled {
  color: #CACACA;
}

.customSelect_area .customSelect.md {
  font-size: 14px;
  line-height: 170%;
  color: #4B4B4B;
  font-weight: 400;
  line-height: 32px;
  justify-content: flex-start;
  padding: 0 8px 0 12px;
}

.customSelect_area .customSelect.md .customSelect_text {
  padding-right: 20px;
}

.customSelect_area .customSelect.md .ico_arr_bot {
  right: 8px;
}

.customSelect_area .customSelect.md + .customSelect_list .customSelect_option {
  padding: 4px 12px;
  font-size: 14px;
}

.form-control:focus {
  border-color: var(--secondary-color) !important;
  outline: 3px solid var(--focus-color) !important;
}

.label-text {
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  color: #666;
}

.form-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.form-switch .switch-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.form-switch .switch-input:focus-visible + .switch-label {
  box-shadow: 0 0 0 3px rgba(41, 68, 121, 0.3);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.form-switch .switch-input:focus:not(:focus-visible) + .switch-label {
  box-shadow: none;
  outline: none;
}
.form-switch .switch-input:checked + .switch-label .switch-handle {
  transform: translateX(15px);
  background-color: #fff;
  left: 3px;
  right: 3px;
}
.form-switch .switch-input:checked + .switch-label {
  background-color: #294279;
}
.form-switch .switch-input:checked + .switch-label::before {
  background-color: #fff;
  left: auto;
  right: 2px;
}
.form-switch .switch-label {
  display: flex;
  align-items: center;
  position: relative;
  width: 40px;
  height: 24px;
  background-color: #ddd;
  border-radius: 34px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.form-switch .switch-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  left: 2px;
  top: 2px;
  transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease, background-color 0.3s ease;
}
.form-switch .switch-input:checked + .switch-label::before {
  transform: translateX(15px);
  background-color: #fff;
  left: 3px;
  right: 3px;
}
.form-switch .switch-text {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}
.form-switch .switch-handle {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

table {
  width: 100%;
  border-top: 1px solid #222;
}

.table-area {
  position: relative;
  overflow-x: auto;
}

.table-area .min-w1000px {
  min-width: 1000px;
}

.table-wrap {
  width: 100%;
}

.table-wrap th, .table-wrap td {
  border-bottom: 1px solid #E5E5E5;
  padding: 8px 8px;
  word-break: break-all;
}

.table-wrap th {
  padding: 15px 16px;
}

.table-wrap td {
  padding: 18px 42px;
}

.table-wrap th:last-child, .table-wrap td:last-child {
  border-right: 0;
}

.table-wrap th {
  background-color: #f5f5f5;
  font-weight: 500;
}

.table-wrap .nodata {
  text-align: center;
}

.table-wrap .nodata td {
  padding: 40px 0;
}

.table-wrap.line th {
  padding: 15px 16px;
  border: 1px solid #ddd;
}

.table-wrap.line td {
  padding: 18px 16px;
  border: 1px solid #ddd;
}

.table-wrap.line2 table {
  border-top: 1px solid #222;
}

.table-wrap.line2 th {
  padding: 15px 16px;
  border: 1px solid #ddd;
}

.table-wrap.line2 td {
  padding: 15px 16px;
  border: 1px solid #ddd;
}

.stats-content .table-wrap th {
  padding: 15px 8px;
  font-size: 15px;
}

.stats-content .table-wrap td {
  padding: 15px 8px;
  font-size: 15px;
}

/*custom-table*/
.res-table {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
}

.res-table .tr {
  display: flex;
  flex: 0 50%;
  padding: 0;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.res-table .tr.w100 {
  flex: 100%;
}

.res-table .tr .th {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
  max-width: 220px;
  height: 100%;
  padding: 8px 16px;
  font-weight: 500;
  color: var(--text-color-light);
  background-color: var(--bg-color-default);
}

.res-table .tr .td {
  padding: 8px 16px;
  flex: 1;
}

.res-table .tr.nodata {
  display: flex !important;
  height: 50px;
  line-height: 50px;
  justify-content: center;
}

.res-table .flex-break {
  flex-wrap: wrap;
  padding-bottom: 24px;
}

.res-table .flex-break .th {
  max-width: 100%;
  width: 100%;
}

.res-table .flex-break .td {
  width: 100%;
}

.modal {
  overflow: auto;
}

.modal-content {
  border-radius: 12px;
  border: 0 !important;
}

/* 기본 모달 */
.modal-default .modal-dialog {
  margin-top: 160px;
}

.modal-default .modal-content {
  overflow: hidden;
}

.modal-default .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 30px;
  background-color: #EBF3FF;
}

.modal-default .modal-head .modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
}

.modal-default .modal-body {
  padding: 30px;
}

.modal-default .modal-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 30px 30px;
  border-top: 0;
  padding-top: 0;
}

.modal-default .modal-footer [class*=btn-] {
  width: 160px;
  max-width: 160px;
  margin: 0;
}

/* size */
.w-980px {
  width: 980px;
  max-width: 980px;
}

/* 페이징 */
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pagination ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination .page_item {
  display: inline-flex;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
}

.pagination .page_item .page_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 30px;
  border-radius: 50%;
  font-size: 14px;
  background-color: transparent;
  border-radius: 50%;
  font-weight: 500;
}

.pagination .page_item .page_link:hover {
  background-color: #eee;
}

.pagination .page_item .page_link:disabled {
  opacity: 0.3;
}

.pagination .page_item .page_link:disabled:hover {
  background-color: transparent;
}

.pagination .page_item.on .page_link {
  color: #fff;
  background-color: #444;
}

.pagination i {
  font-size: 20px;
}

.tab-page {
  display: flex;
  gap: 8px;
  position: relative;
}

.tab-page::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e5e5e5;
}

.tab-page .nav-item {
  flex: 1 1 0;
  height: 64px;
}

.tab-page .nav-item .nav-link {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 500;
  border: 1px solid #e5e5e5;
  border-radius: 12px 12px 0 0;
  background: #f5f5f5;
  position: relative;
  z-index: 1;
}

.tab-page .nav-item .nav-link.active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
  z-index: 2;
  margin-bottom: -1px;
}

.chips-group {
  gap: 8px;
}

.chips-group .nav-item {
  flex: none;
}

.chips-group .nav-item .nav-link {
  min-width: 120px;
  height: 48px;
  line-height: 5px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 40px;
  text-align: center;
  font-weight: 500;
}

.chips-group .nav-item .nav-link.active {
  background: var(--secondary-color);
  border: 0;
  color: #fff;
}

/* 세기별 의미 탭 */
.meaning-tab {
  row-gap: 0;
  column-gap: 8px;
  flex-wrap: wrap;
  border-bottom: 4px solid var(--secondary-color);
  position: relative;
  margin-bottom: 40px;
}

.meaning-tab .nav-item {
  flex: 0 0 calc(20% - 6.4px);
}

.meaning-tab .meaning-tab-divider {
  flex: 0 0 100%;
  height: 0;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 4px solid var(--secondary-color);
}

.meaning-tab .nav-item .nav-link {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 18px 10px 11px;
  font-size: 20px;
  font-weight: 500;
  color: #666;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
  position: relative;
  z-index: 1;
}

.meaning-tab .nav-item .nav-link:hover {
  color: var(--secondary-color);
}

.meaning-tab .nav-item .nav-link.active {
  color: var(--secondary-color);
  font-weight: 700;
  background-color: #fff;
  border: 4px solid var(--secondary-color);
  border-bottom: none;
  padding-top: 15px;
  position: relative;
  z-index: 2;
}

.meaning-tab .nav-item .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #fff;
}

.detail-left .meaning-tab .nav-item {
  flex: 0 0 calc(20% - 6.4px);
}

.meaning-tab-content {
  padding: 0;
  background-color: transparent;
}

.meaning-desc {
  background: #f0f6ff;
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.tooltip-label.show {
  opacity: 1 !important;
}

.tooltip-label .tooltip-inner {
  background-color: #444;
  padding: 8px 12px;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  opacity: 1 !important;
  max-width: 100% !important;
  text-align: left;
}

.tooltip-label .arrow::before {
  border-top-color: #444 !important;
}

.tooltip-label.tooltip-small .tooltip-inner {
  font-size: 13px !important;
  padding: 4px 8px;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before {
  right: 0;
  border-width: 7px 7px 7px 0;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: #444 !important;
}

.bs-tooltip-right, .bs-tooltip-auto[x-placement^=right] {
  margin-left: 5px;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  border-bottom-color: #444 !important;
}

:root {
  --century-color-default:#7F7F7F;
  --century-color-15:#E48312;
  --century-color-16:#BD582C;
  --century-color-17:#865640;
  --century-color-18:#9B8357;
  --century-color-19:#BFB97A;
  --century-color-unknown:#94A088;
  --century-color-20:#64918D;
}

.badge-gray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #EEEEEE;
  color: #222;
}

.badge-line-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--secondary-color);
  color: #fff;
}

.badge-outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  background-color: #fff;
}

[class*=badge-century-fill] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: var(--century-color-default);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 4px 0 2px;
  height: 20px;
  font-size: 12px;
  margin-top: -2px;
}

[class*=badge-century-line] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--century-color-unknown);
  color: #94A088;
  font-size: 14px;
  font-weight: 500;
}

.badge-century-fill-default {
  background-color: var(--century-color-unknown);
  padding: 0 4px !important;
}

.badge-century-fill-15 {
  background-color: var(--century-color-15);
}

.badge-century-fill-16 {
  background-color: var(--century-color-16);
}

.badge-century-fill-17 {
  background-color: var(--century-color-17);
}

.badge-century-fill-18 {
  background-color: var(--century-color-18);
}

.badge-century-fill-19 {
  background-color: var(--century-color-19);
}

.badge-century-fill-20 {
  background-color: var(--century-color-20);
}

.badge-century-fill-default {
  border: 1px solid var(--century-color-unknown);
  color: #fff;
}

.badge-century-line-15 {
  border: 1px solid var(--century-color-15);
  color: var(--century-color-15);
}

.badge-century-line-16 {
  border: 1px solid var(--century-color-16);
  color: var(--century-color-16);
}

.badge-century-line-17 {
  border: 1px solid var(--century-color-17);
  color: var(--century-color-17);
}

.badge-century-line-18 {
  border: 1px solid var(--century-color-18);
  color: var(--century-color-18);
}

.badge-century-line-19 {
  border: 1px solid var(--century-color-19);
  color: var(--century-color-19);
}

.badge-century-line-20 {
  border: 1px solid var(--century-color-20);
  color: var(--century-color-20);
}

[class*=badge-].sm {
  height: 18px;
  font-size: 12px;
  padding: 0 2.5px;
}

[class*=badge-].md {
  height: 28px;
  font-size: 13px;
  line-height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative;
  margin-top: -1px;
}

.detailedSearch-wrapper .table-wrap td {
  padding-right: 0;
}

.consonant-selector {
  margin-top: 16px;
}

.consonant-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}

.consonant-fieldset {
  border: 0;
  padding: 0;
  margin: 0 auto;
}

.consonant-grid {
  display: grid;
  grid-auto-flow: row;
}

.consonant-grid li {
  position: relative;
}

.consonant-cont {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #EDF1F5;
  border-radius: 12px;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 16px;
}

.consonant-cont section {
  display: flex;
  flex-direction: column;
}

.consonant-cont section:first-child {
  border-right: 1px solid #ddd;
}

.consonant-cont section:last-child div {
  display: flex;
  align-items: flex-start;
}

.consonant-grid > li label {
  padding-top: 3px;
}

.consonant-cont > section:last-child .consonant-grid:first-child {
  margin-right: 25px;
}

.consonant-cont > section:last-child .consonant-grid:last-child {
  margin-left: 12px;
}

.consonant-cont section:last-child .consonant-grid.exception {
  grid-template-columns: repeat(1, 50px);
  gap: 12px;
}

#consonant-cont-choseong.consonant-cont section:first-child {
  padding-right: 40px;
  margin-right: 40px;
}

#consonant-cont-choseong.consonant-cont section:first-child .consonant-grid {
  grid-template-columns: repeat(5, 50px);
  gap: 12px;
}

#consonant-cont-choseong.consonant-cont section:last-child .consonant-grid:not(.exception) {
  grid-template-columns: repeat(6, 50px);
  gap: 12px;
}

#consonant-cont-choseong.consonant-cont > section:last-child .consonant-grid:not(.exception) > li label {
  padding-top: 12px;
}

#consonant-cont-jungseong.consonant-cont section:first-child {
  padding-right: 40px;
  margin-right: 40px;
}

#consonant-cont-jungseong.consonant-cont section:first-child .consonant-grid {
  grid-template-columns: repeat(6, 50px);
  gap: 12px;
}

#consonant-cont-jungseong.consonant-cont section:last-child .consonant-grid:not(.exception) {
  grid-template-columns: repeat(5, 50px);
  gap: 12px;
}

#consonant-cont-jungseong.consonant-cont > section:last-child .consonant-grid:not(.exception) > li label {
  padding-top: 1px;
}

#consonant-cont-jongseong.consonant-cont section:first-child {
  padding-right: 30px;
  margin-right: 30px;
}

#consonant-cont-jongseong.consonant-cont section:first-child .consonant-grid {
  grid-template-columns: repeat(5, 50px);
  gap: 5px;
}

#consonant-cont-jongseong.consonant-cont section:last-child .consonant-grid:not(.exception) {
  grid-template-columns: repeat(8, 50px);
  gap: 5px;
}

#consonant-cont-jongseong.consonant-cont > section:last-child .consonant-grid:first-child {
  margin-right: 10px;
}

#consonant-cont-jongseong.consonant-cont > section:last-child .consonant-grid.exception {
  gap: 5px;
  margin-left: 5px;
}

#consonant-cont-jongseong.consonant-cont > section:last-child .consonant-grid:not(.exception) > li label {
  padding-bottom: 15px;
}

/* hide radio but keep it accessible */
.consonant-grid input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.consonant-grid label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding-left: 2px;
}

.consonant-grid input[type=radio] + label:hover {
  border-color: #b6b6b6;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

.consonant-grid input[type=radio]:focus-visible + label {
  outline: 0;
  box-shadow: 0 0 0 3px #AEB6FB;
}

.consonant-grid input[type=radio]:checked + label {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
}

.consonant-grid .grid-spacer {
  pointer-events: none;
}

@media (max-width: 480px) {
  .consonant-grid {
    grid-template-columns: repeat(5, 48px);
    gap: 10px;
  }
  .consonant-grid label {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
  }
}
.consonant-cont section .consonant-grid li > .key-disabled {
  background-color: #f5f7fa;
  border: 1px solid #e0e0e0;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
}

.btn-del-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #F5F5F5;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.btn-del-item button {
  width: 100%;
  height: 100%;
}

/* 특수문자 입력기 스타일 */
.special-chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}

.char-btn {
  width: 48px;
  height: 48px;
  background: #fff;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: 8px;
}

.char-btn:hover {
  background: #eee;
}

.char-btn:active {
  background: #e9ecef;
  transform: translateY(0);
}

.char-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.dropdown-menu {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  font-size: 18px;
}

.dropdown-item:hover {
  background-color: #eee;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #fff;
  color: #222;
}

.dropdown-item.active:hover, .dropdown-item:active:hover {
  background-color: #eee;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load 1.8s infinite ease-in-out;
  animation: load 1.8s infinite ease-in-out;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2.5em;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation-delay: -0.16s;
  z-index: 1100;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 1.5em;
}

@-webkit-keyframes load {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
.page_loader {
  position: fixed;
  bottom: 0;
  left: 0;
  display: block;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

.page_loader .loader {
  color: #fff;
}

.header-wrap .header {
  height: 60px;
  border-bottom: 1px solid #ddd;
}

.header-wrap .header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-wrap .header-top {
  padding: 4px 0;
  background-color: #EDF1F5;
}

.header-wrap .header-top .flag-area {
  display: flex;
  align-items: center;
}

.header-wrap .header-top .flag-area .img-flag {
  width: 25px;
  height: auto;
  margin-right: 16px;
}

.header-wrap .header-top .flag-area p {
  font-size: 15px;
  color: #444;
  line-height: 26px;
}

.header-wrap .header-leftArea .link-list {
  display: flex;
}

.header-wrap .header-leftArea .link-list-item {
  position: relative;
  margin-left: 20px;
  padding-left: 20px;
  font-size: 17px;
  line-height: 26px;
}

.header-wrap .header-leftArea .link-list-item a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-wrap .header-leftArea .link-list-item:first-child {
  margin-left: 0;
  padding-left: 0;
}

.header-wrap .header-leftArea .link-list-item::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  display: inline-flex;
  width: 1px;
  height: 16px;
  background-color: #ddd;
}

.header-wrap .header-leftArea .link-list-item:first-child::after {
  display: none;
}

.header-wrap .header-leftArea .link-list-item a.icon {
  width: 26px;
  height: 26px;
}

.header-wrap .header-leftArea .link-list-item a.icon.icon-dictHub {
  position: relative;
  width: 26px;
  height: 26px;
}

.header-wrap .header-leftArea .link-list-item a.icon.icon-dictHub svg {
  position: absolute;
  top: -2px;
  left: -2px;
}

.header-wrap .header-leftArea .link-list-item.item-dictHub {
  display: block;
  padding-left: 24px;
}

/* 국어사전 통합 누리집 아이콘 - 메인·서브 모두 활성 */
.header-wrap .header-leftArea .link-list-item.item-dictHub a.icon-dictHub {
  pointer-events: auto;
  cursor: pointer;
}

.header-wrap .header-leftArea .link-list-item.item-dictHub a.icon-dictHub svg path {
  stroke: #222;
}

/* 첫 화면 아이콘 - 메인 페이지에서만 비활성, 나머지 서브페이지는 활성 */
.main-wrapper .header-wrap .header-leftArea .link-list-item a.icon-home {
  pointer-events: none;
  cursor: default;
}

.main-wrapper .header-wrap .header-leftArea .link-list-item a.icon-home svg path {
  stroke: #BBBBBB;
}

.header-wrap .header-rightArea .menu-list {
  display: flex;
  gap: 36px;
}

.header-wrap .header-rightArea .menu-list-item a {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
}

.header-wrap .header-rightArea .menu-list-item a i {
  margin-right: 8px;
}

.header-wrap .header-rightArea .login-util-area {
  display: flex;
  font-size: 17px;
  align-items: center;
}

.header-wrap .header-rightArea .login-util-area .dropdown-menu {
  width: 166px;
}

.header-wrap .header-rightArea .login-util-area .user-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
  padding-right: 20px;
}

.header-wrap .header-rightArea .login-util-area .user-info button {
  display: flex;
  align-items: center;
}

.header-wrap .header-rightArea .login-util-area .user-info button strong {
  margin: 0 4px 0 8px;
}

.header-wrap .header-rightArea .login-util-area .user-info:before {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  display: inline-flex;
  width: 1px;
  height: 14px;
  background-color: #ddd;
}

.header-wrap .header-rightArea .login-util-area .time-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-wrap .header-rightArea .login-util-area .time-info .time-text {
  color: var(--primary-color);
  padding-top: 2px;
}

footer {
  position: relative;
  background-color: #FAF8F8;
  border-top: 1px solid #eee;
}

footer .footer-top {
  border-bottom: 1px solid #eee;
}

footer .footer-top .footer-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

footer .footer-top .logo {
  width: 135px;
  height: auto;
}

footer .footer-top .familysite-area {
  display: flex;
}

footer .footer-top .familysite-area fieldset {
  display: flex;
  align-items: center;
  gap: 8px;
}

footer .footer-top .familysite-area .btn-secondary {
  font-size: 16px;
}

footer .footer-top .familysite-area select {
  width: 240px;
  font-size: 18px;
}

footer .footer-bot {
  padding: 33px 0 37px;
}

footer .footer-bot .link-list {
  display: flex;
  gap: 40px;
  font-size: 17px;
}

/* 플로팅 버튼 */
.float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: block;
}

.float.stop-fixed {
  position: absolute !important;
  bottom: unset;
  bottom: 220px;
}

.float .go-top {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border-radius: 12px;
  opacity: 0;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.float .fab {
  width: 60px;
  height: 60px;
  background: url("../images/common/fab-ico.svg") no-repeat;
  display: block;
  box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.1);
  border-radius: 100%;
}

.btn-oldKorean {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  line-height: 1.3;
  background-color: #294279;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body {
  font-family: "NanumBarunGothicYetHangul", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: #222222;
  background-color: #fff;
}

footer {
  margin-top: auto;
}

.wrap {
  width: 100%;
  min-width: 1024px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 60px 24px 150px;
  height: auto;
  flex: 1 0 auto;
}

.container-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
}

.bullet {
  position: relative;
  padding-left: 16px;
}

.bullet::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 5px;
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #222;
}

.dash-list {
  padding-left: 20px;
}

.dash-list li {
  position: relative;
  padding-left: 14px;
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 2px;
  background-color: #888;
}

.dash-list li + li {
  margin-top: 8px;
}

.example-box {
  display: inline-block;
  font-weight: 700;
  color: #294279;
  border-radius: 8px;
}

/* 현대어 역, 번역에는 이색상으로 써주세요!! */
.example-box.blue {
  color: #377CB1;
}

@media (max-width: 1200px) {
  .inner {
    padding: 0 24px;
  }
}
/* 서브페이지 공통 검색 영역 */
.searchBar {
  display: flex;
  align-items: center;
  margin-bottom: 76px;
}

.searchBar .title-group {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.searchBar .info-badge {
  position: absolute;
  left: 0;
  top: -4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: bold;
  padding: 2px 10px 1px 8px;
  height: 24px;
  background-color: rgba(138, 169, 238, 0.16);
  border-radius: 40px;
  font-size: 12px;
  color: #294279;
}

.searchBar .info-badge svg {
  margin-top: -2px;
  margin-right: 3px;
}

.searchBar .main-title {
  font-weight: 700;
}

.searchBar .main-title .main-logo {
  display: inline-block;
  height: 34px;
  width: auto;
}

.searchBar .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  margin-left: 24px;
  font-size: 18px;
  font-weight: 500;
}

.searchBar .btn-more svg {
  margin-left: 4px;
}

.searchBar .search-area {
  display: flex;
  justify-content: center;
  flex: 1;
  margin-right: 100px;
}

.searchBar .search-area .search-input-box {
  position: relative;
  display: flex;
  flex: 1;
}

.searchBar .search-area .search-input-box .search-input {
  width: 100%;
  height: 54px;
  padding: 0 54px 0 24px;
  font-size: 20px;
  font-weight: bold;
  border: 3px solid var(--secondary-color);
  border-radius: 100px !important;
}

.searchBar .search-area .search-input-box .search-input:focus {
  outline: 0 !important;
}

.searchBar .search-area .search-input-box .search-input::placeholder {
  color: #CACACA;
  font-weight: 500;
}

.searchBar .search-area .search-input-box .btn-area {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}

.searchBar .search-area .search-input-box .btn-reset {
  height: 44px;
}

.searchBar .search-area .search-input-box .btn-reset .icoSvg {
  background-color: #E1E1E1;
  border-radius: 50%;
}

.searchBar .search-area .search-input-box .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
}

.searchBar .form-switch {
  margin: 0 20px 0 8px;
}

/* 자세히찾기 - 자소로 찾기 */
.search-character {
  margin-top: 70px;
}

.search-character .table-wrap th {
  min-width: 180px;
}

.search-character .table-wrap td {
  padding: 15px 0 15px 40px;
}

.search-character .table-wrap .search-characterTarget {
  padding: 17px 0;
}

.search-character .syllable-cont {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-top: 32px;
  padding: 38px 52px;
  background-color: #EDF1F5;
  border-radius: 12px;
}

.search-character .syllable-cont.is-end-search {
  justify-content: flex-end;
  padding-right: 46px;
}

.search-character .syllable-cont .btn-del {
  position: absolute;
  top: 8px;
  left: 8px;
}

.search-character .syllable-search {
  display: flex;
  align-items: flex-start;
}

.search-character .syllable-list {
  display: flex;
  align-items: flex-start;
}

.search-character .syllable-list .hyphen {
  line-height: 56px;
  font-weight: bold;
  margin: 0 10px 0 2px;
}

.search-character .syllable-inputArea li {
  margin-right: 8px;
}

.search-character .syllable-label {
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  width: 184px;
}

.search-character .syllable-inputArea .syllable-input {
  width: 56px;
  min-width: 56px;
  height: 56px;
  margin-right: 8px;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 28px;
  padding-left: 1px;
  line-height: 1em;
}

.search-character .syllable-inputArea .syllable-input:last-child {
  margin-right: 0;
}

.search-character .syllable-inputArea .syllable-input:hover {
  background-color: #f8f9fa;
  border-color: #294279;
}

.search-character .syllable-inputArea .syllable-input:focus,
.search-character .syllable-inputArea .syllable-input.active {
  border-color: #122A5E;
  box-shadow: 0 0 0 3px rgba(41, 66, 121, 0.2);
  outline: none;
}

.search-character .syllable-inputArea > li:nth-child(1) > .syllable-input {
  padding-top: 12px;
}

.search-character .syllable-inputArea > li:nth-child(2) > .syllable-input {
  padding-top: 5px;
  font-size: 24px;
}

.search-character .syllable-inputArea > li:nth-child(3) > .syllable-input {
  padding-bottom: 14px;
}

.search-character .syllable-inputArea > li .syllable-input.default-char {
  padding: 2px 0 0 2px;
}

.search-character .syllable-search {
  position: relative;
}

.search-character .syllable-ellipsis-start,
.search-character .syllable-ellipsis-end {
  display: flex;
  position: absolute;
  top: 36px;
  height: 56px;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  color: #222;
  letter-spacing: -2px;
  pointer-events: none;
}

.search-character .syllable-ellipsis-start {
  left: -48px;
}

.search-character .syllable-ellipsis-end {
  right: -40px;
}

.search-character .search-result-example {
  margin-top: 16px;
}

.search-character .search-result-example .info-text {
  margin-bottom: 16px;
}

.search-character .search-result-example .info-text p {
  font-size: 18px;
  color: #444;
}

.search-character .search-result-example .example-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 8px;
  padding: 30px;
  background-color: #f5f5f5;
  border-radius: 12px;
}

.search-character .search-result-example .example-area dt {
  color: #666;
}

.search-character .search-result-example .example-area dt span {
  color: #222;
  margin-right: 12px;
}

.search-character .search-result-example .example-area dt strong {
  color: #222;
}

.search-character .search-result-example .example-area dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-left: 50px;
}

.search-character .search-result-example .example-area dd span {
  font-size: 18px;
  margin: 0 8px;
}

.search-character .search-result-example .example-area input[readonly] {
  width: 40px;
  height: 40px;
  background-color: #fff !important;
  font-size: 24px;
  padding: 4px 0 0 2px;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
  color: #222;
}

.search-character .search-result-example .example-area input[readonly]:focus {
  outline: none !important;
  border-color: #ddd !important;
  box-shadow: none !important;
}

.search-character .btn-area {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.search-character .search-result-area {
  margin-top: 80px;
}

.ui-datepicker-buttonpane {
  display: none !important;
}

/* 자세히찾기 - 단어로 찾기 */
.date-input-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.date-input-group .date-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input-group .date-input input {
  width: 160px;
  min-width: 160px;
}

.search-word {
  margin-top: 70px;
}

.search-word .table-wrap th {
  padding: 0;
  min-width: 180px;
}

.search-word .table-wrap td {
  padding: 14px 24px;
}

.search-word [class*=btn-].md {
  padding: 0 14px;
}

.search-word .part-area {
  display: flex;
  gap: 16px;
}

.search-word .part-area .result-text {
  margin-top: 4px;
  color: #444;
  word-break: keep-all;
}

.search-word .syllable-inner {
  display: flex;
  gap: 32px;
  align-items: center;
}

.search-word .syllable-inner .input-box {
  display: flex;
  align-items: center;
  color: #444;
  white-space: nowrap;
}

.search-word .syllable-inner .input-box input {
  margin-right: 8px;
  width: 100px;
  min-width: 100px;
  height: 48px;
  text-align: right;
}

.search-word .syllable-inner .input-box span {
  margin: 0 16px;
}

.search-word .syllable-inner .btn-box {
  display: flex;
  gap: 8px;
}

.search-word .syllable-area .text-caption {
  font-size: 18px;
  color: #666;
  margin-top: 16px;
}

.search-word .date-area {
  display: flex;
  align-items: center;
  gap: 32px;
}

.search-word .date-area .btn-box {
  display: flex;
  gap: 8px;
}

.search-word .searchTarget-area .btn-add {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
}

.search-word .searchTarget-area .search-list-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.search-word .searchTarget-area .search-list-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-word .searchTarget-area .search-list-item:first-child {
  padding-right: 48px;
}

.search-word .searchTarget-area .search-list-item input {
  flex: 1;
}

.search-word .searchTarget-area .search-list-item .customSelect.lg {
  font-size: 20px;
}

.search-word .btn-area {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.search-word .search-result-area {
  margin-top: 80px;
}

.search-word .form-switch {
  margin: 0 16px 0 0;
}

.search-word .form-switch .switch-text {
  left: -100%;
  top: 4px;
}

/* 모달 -품사 찾기 */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px;
  padding: 24px 0;
  border-top: 1px solid #222;
  border-bottom: 1px solid #e5e5e5;
}

.checkbox-grid .custom-control {
  margin-bottom: 0;
}

.checkbox-grid .custom-control + .custom-control {
  margin-left: 0;
}

/* 표제어로 찾기 */
.result-info-cont {
  padding: 30px;
  background-color: #f5f5f5;
  border-radius: 12px;
}

.result-info {
  margin-bottom: 80px;
}

.result-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-info .result-info-tit {
  display: block;
  margin-bottom: 20px;
  font-size: 34px;
  color: #294279;
}

.result-info .result-info-tit span {
  margin-left: 8px;
  color: #777;
  vertical-align: super;
  font-size: 0.5em;
}

.result-info .result-info-tit .origin-lang {
  color: #888;
  font-weight: 400;
  font-size: 26px;
  vertical-align: middle;
}

.result-info .result-info-list li .col-brown {
  margin-right: 8px;
}

.result-info .result-info-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 16px;
}

.result-info .result-info-list li:last-child {
  margin-bottom: 0;
}

.result-info .result-info-list li::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #222;
  border-radius: 50%;
}

.result-info .result-info-list li .info-text-area {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.result-info .result-info-list li .info-text-area:hover {
  color: #222;
  text-decoration: underline;
}

.result-info .result-info-list li .badge-line-primary,
.result-info .result-info-list li .badge-outline-primary {
  margin-right: 8px;
}

.result-info .result-info-list[data-collapse-region] {
  margin-top: 16px;
}

.result-info .result-info-list-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.resultDetail-wrapper .result-cont {
  margin-bottom: 40px;
}

.resultDetail-wrapper .result-cont:last-child {
  margin-bottom: 0;
}

.resultDetail-wrapper .result-cont .result-tit {
  padding-bottom: 12px;
  margin-bottom: 24px;
  font-size: 28px;
  color: #222;
  font-weight: bold;
  border-bottom: 1px solid #222;
}

.resultDetail-wrapper .result-cont .result-item-tit {
  position: relative;
  margin-bottom: 12px;
  padding-left: 24px;
  font-size: 24px;
  font-weight: 700;
}

.resultDetail-wrapper .result-cont .result-item-tit .info-tooltip {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  margin-top: -3px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.resultDetail-wrapper .result-cont .result-item-tit::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  display: inline-block;
  width: 16px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5708 7.14249L5.51449 2.90869C4.84797 2.50878 4 2.98889 4 3.76619V12.2338C4 13.0111 4.84797 13.4912 5.5145 13.0913L12.5708 8.85748C13.2182 8.46907 13.2182 7.53089 12.5708 7.14249Z' fill='%23294279'/%3E%3C/svg%3E%0A");
}

/* 표제어로 찾기 > 상세페이지 */
.resultDetail-wrapper .result-wrap {
  margin-top: 74px;
}

.resultDetail-wrapper .result-item {
  margin-bottom: 40px;
}

.resultDetail-wrapper .result-item:last-child {
  margin-bottom: 0;
}

.resultDetail-wrapper .result-item-cont {
  margin-left: 16px;
}

.resultDetail-wrapper .result-item-cont .result-tooltip-txt {
  color: #999;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}

.resultDetail-wrapper .result-century-header {
  display: flex;
  align-items: start;
  gap: 8px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.resultDetail-wrapper .result-century-body > li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 16px;
}

.resultDetail-wrapper .result-century-body > li:last-child {
  margin-bottom: 0;
}

.resultDetail-wrapper .result-century-body > li::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 4px;
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #222;
  border-radius: 50%;
}

.resultDetail-wrapper .result-century-depth {
  margin-top: 8px;
}

.resultDetail-wrapper .result-century-depth li {
  display: flex;
  align-items: start;
  margin-top: 8px;
  color: #666;
}

.resultDetail-wrapper .result-century-depth .badge-gray.md {
  position: relative;
  margin-right: 8px;
}

.resultDetail-wrapper .result-century-list {
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.resultDetail-wrapper .result-century-list .result-century-list-footer {
  display: flex;
  justify-content: end;
  margin-top: 16px;
}

.resultDetail-wrapper .result-item .bullet-list li {
  margin-bottom: 8px;
}

.resultDetail-wrapper .result-item .bullet-list li:last-child {
  margin-bottom: 0;
}

/* 표제어로 찾기 > 상세페이지 > 편집 이력 */
.resultDetail-wrapper .history-list-area {
  margin-top: 24px;
}

.resultDetail-wrapper .board-info-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.resultDetail-wrapper .board-total {
  font-size: 18px;
  color: #666;
}

.resultDetail-wrapper .board-total strong {
  color: #294279;
  font-weight: 700;
}

.resultDetail-wrapper .history-table table > tbody + tbody {
  border-top: 1px solid #e5e5e5;
}

.editHistory-pop .history-table td {
  padding: 18px 20px;
}

.resultDetail-wrapper .history-detail-cell {
  padding: 16px !important;
  background-color: #fff;
}

.resultDetail-wrapper .history-detail-cell .table-wrap {
  background-color: #fff;
}

/* 표 기본 */
.century-timeline-table {
  width: auto;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 15px;
  border: 1px solid #ddd;
  margin-left: 16px;
}

.century-timeline-table caption {
  text-align: left;
  padding: 8px 0 12px;
}

.century-timeline-table thead th {
  width: 70px;
  height: 40px;
  text-align: center;
  background: #f5f5f5;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 17px;
}

.century-timeline-table thead th[data-century=default] {
  letter-spacing: -0.3px;
  line-height: 1;
  font-size: 15px;
}

.century-timeline-table thead th .century-unknown-caption {
  font-size: 12px;
  color: #999;
}

/* 라벨 분리 */
.century-timeline-table thead th.th-diagonal {
  position: relative;
  padding: 0;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), #ddd calc(50% - 0.5px), #ddd calc(50% + 0.5px), transparent calc(50% + 0.5px)) #f5f5f5;
}

.century-timeline-table thead th.th-diagonal .diagonal-label {
  position: absolute;
  font-size: 16px;
  font-weight: 400;
}

.century-timeline-table thead th.th-diagonal .diagonal-label-col {
  top: 4px;
  right: 7px;
}

.century-timeline-table thead th.th-diagonal .diagonal-label-row {
  bottom: 0px;
  left: 8px;
}

.century-timeline-table tbody th[scope=row] {
  min-width: 100px;
  height: 40px;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
  white-space: nowrap;
  font-size: 17px;
}

.century-timeline-table td {
  height: 40px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: center;
  position: relative;
}

.century-timeline-table td.current {
  cursor: default;
}

/* 막대(각 세기 색상) - 인접 셀 연결되도록 셀 내부에 바를 그림 */
.century-timeline-table td.present::before {
  content: "";
  display: block;
  height: 14px;
  width: 100%;
  margin: 0 auto;
  border-radius: 0;
  background: #ddd;
  cursor: pointer;
  /* fallback */
}

/* 세기별 색상(프로젝트 변수 있으면 사용) */
.century-timeline-table td.present-15::before {
  background: var(--century-color-15);
}

.century-timeline-table td.present-16::before {
  background: var(--century-color-16);
}

.century-timeline-table td.present-17::before {
  background: var(--century-color-17);
}

.century-timeline-table td.present-18::before {
  background: var(--century-color-18);
}

.century-timeline-table td.present-19::before {
  background: var(--century-color-19);
}

.century-timeline-table td.present-unknown::before {
  background: var(--century-color-unknown);
}

.century-timeline-table td.present-20::before {
  background: var(--century-color-20);
}

/* 출현 공백 구간(문헌 미발견) - 옅은 막대 */
.century-timeline-table td.present-gap::before {
  opacity: 0.35;
}

.century-timeline-table td.present-gap {
  cursor: pointer;
}

/* 현재(점) */
.century-timeline-table td.current .dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--century-color-current, #377CB1);
  vertical-align: middle;
}

/* 현재(한자 표기 - 빈 동그라미) */
.century-timeline-table td.current-hollow .dot-hollow {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--century-color-current, #377CB1);
  background: #fff;
  vertical-align: middle;
}

/* help */
.help-wrapper .tab-page {
  display: flex;
  flex-wrap: wrap;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, #e5e5e5 63px, #e5e5e5 64px, transparent 64px, transparent 72px);
}

.help-wrapper .tab-page .nav-item {
  flex: 0 0 calc((100% - 16px) / 3);
  width: calc((100% - 16px) / 3);
}

.help-wrapper .tab-page.tab-page-single-row {
  flex-wrap: nowrap;
  background-image: none;
}

.help-wrapper .tab-page.tab-page-single-row .nav-item {
  flex: 1 1 0;
  width: auto;
}

.help-wrapper .tab-page.tab-page-single-row .nav-link {
  padding-left: 22px;
  padding-right: 22px;
}

.help-wrapper .tab-page.tab-page-single-row .nav-item.nav-item-wide {
  flex: 0 0 auto;
}

.help-wrapper .tab-page.tab-page-single-row .nav-item.nav-item-wide .nav-link {
  width: auto;
  white-space: nowrap;
}

/* 메인 페이지 - 배너 영역 */
.main-banner-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px;
  margin: 40px 0;
  background: linear-gradient(135deg, #fff5f0 0%, #ffede5 100%);
  border-radius: 20px;
  border: 1px solid #ffe4d9;
}

.main-banner-area .banner-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-banner-area .banner-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.main-banner-area .banner-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-banner-area .banner-text {
  flex: 1;
}

.main-banner-area .banner-text .banner-title {
  font-size: 20px;
  font-weight: 700;
  color: #ff6b35;
  margin-bottom: 8px;
}

.main-banner-area .banner-text .banner-description {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

.main-banner-area .banner-action {
  flex-shrink: 0;
}

.main-banner-area .banner-action .btn-primary {
  min-width: 120px;
  white-space: nowrap;
}

/* 메인 페이지 - 통계 그래프 영역 */
.statistics-section {
  margin: 80px 0;
}

.statistics-section .section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

.statistics-section .section-title .highlight {
  color: var(--primary-color, #ff6b35);
}

.statistics-chart-area {
  position: relative;
  padding: 40px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.statistics-chart-area canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 400px;
}

/* 메인 페이지 - 소식 섹션 */
.news-section {
  margin: 80px 0;
}

.news-section .section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.news-section .section-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

.news-tabs-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.news-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background-color: #f5f5f5;
  border-radius: 50px;
}

.news-tabs .tab-button {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  background-color: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.news-tabs .tab-button:hover {
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
}

.news-tabs .tab-button.active {
  color: #fff;
  background-color: var(--primary-color, #ff6b35);
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.news-search-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.news-search-area .search-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 600px;
  margin: 0 auto;
}

.news-search-area .search-input-group .form-control {
  flex: 1;
}

.news-search-area .search-input-group .btn-search {
  min-width: 80px;
}

.news-list-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.news-card {
  position: relative;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.news-card:hover {
  border-color: var(--primary-color, #ff6b35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.news-card .news-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color, #ff6b35);
  background-color: rgba(255, 107, 53, 0.1);
  border-radius: 12px;
  margin-bottom: 12px;
}

.news-card .news-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card .news-description {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
}

.news-card .news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #999;
}

/* 메인 페이지 - 검색 카드 영역 */
.search-cards-section {
  margin: 80px 0;
}

.search-cards-section .section-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

.search-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.search-card {
  position: relative;
  padding: 40px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.search-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.search-card .card-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background-color: rgba(68, 80, 211, 0.1);
  color: #4450d3;
  border-radius: 20px;
  margin-bottom: 16px;
}

.search-card .card-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
}

.search-card .card-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.search-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.search-card .card-tags .tag {
  padding: 6px 12px;
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 16px;
}

.search-card .card-action {
  display: flex;
  justify-content: flex-end;
}

.search-card .card-illustration {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  opacity: 0.1;
}

/* 메인 페이지 - 정보 안내 섹션 */
.info-guide-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 80px 0;
}

.info-guide-card {
  padding: 40px;
  background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
  border-radius: 20px;
  border: 1px solid #e5e8ff;
}

.info-guide-card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(68, 80, 211, 0.1);
  border-radius: 16px;
  margin-bottom: 20px;
}

.info-guide-card .card-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
}

.info-guide-card .card-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.info-guide-card .card-link-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-guide-card .card-link-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.info-guide-card .card-link-list li a:hover {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 에러페이지 */
.error-wrap {
  margin-top: 160px;
}

/* 반응형 */
@media (max-width: 1024px) {
  .search-cards-grid,
  .info-guide-section {
    grid-template-columns: 1fr;
  }
  .news-list-area {
    grid-template-columns: 1fr;
  }
  .main-banner-area {
    flex-direction: column;
    text-align: center;
  }
  .main-banner-area .banner-content {
    flex-direction: column;
  }
}
/* skip navigation */
.skip-nav {
  position: absolute;
  top: -200px;
  left: 6px;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}

.skip-nav:focus-within {
  top: 6px;
}

.skip-nav a {
  display: block;
  padding: 8px 16px;
  margin-bottom: 4px;
  background-color: #122A5E;
  border-radius: 4px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  transition: all 0.3s ease-in-out;
  outline: none;
}

.skip-nav a:last-child {
  margin-bottom: 0;
}

.skip-nav a:hover,
.skip-nav a:focus {
  background-color: #0f1f4a;
  border-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  transform: translateY(-2px);
}

/* main */
.main-wrapper .container {
  position: relative;
  padding-bottom: 0;
}

.main-wrapper .container-inner {
  position: relative;
  z-index: 1;
}

.main-wrapper .float .btn-oldKorean {
  display: none;
}

/* 검색영역 */
.main-wrapper .search-wrap {
  position: relative;
  text-align: center;
  margin-bottom: 70px;
}

.main-wrapper .search-wrap .info-badge-wrap {
  width: 580px;
  margin: 0 auto;
}

.main-wrapper .search-wrap .info-badge {
  display: inline-flex;
  margin-bottom: 5px;
  margin-left: -330px;
  font-weight: bold;
  padding: 6px 12px 6px 10px;
  background-color: rgba(138, 169, 238, 0.16);
  border-radius: 40px;
  font-size: 14px;
  color: var(--secondary-color);
}

.main-wrapper .search-wrap .info-badge svg {
  margin-right: 4px;
}

.main-wrapper .search-wrap .main-title {
  font-size: 0;
  margin-bottom: 20px;
}

.main-wrapper .search-wrap .main-title img {
  display: block;
  width: 410px;
  height: auto;
  margin: 0 auto;
}

.main-wrapper .search-wrap .sub-title {
  font-size: 26px;
}

.main-wrapper .search-wrap .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  margin-left: 20px;
  font-size: 18px;
  font-weight: 500;
}

.main-wrapper .search-wrap .btn-more svg {
  margin-left: 4px;
}

.main-wrapper .search-wrap .search-area {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 42px 0 0;
  align-items: center;
}

.main-wrapper .search-wrap .search-area .form-switch {
  position: absolute;
  top: 50%;
  right: calc(50% + 290px);
  transform: translateY(-50%);
}

.main-wrapper .search-wrap .search-area .btn-more {
  position: absolute;
  top: 50%;
  left: calc(50% + 290px);
  transform: translateY(-50%);
}

.main-wrapper .search-wrap .search-area .search-input-box {
  position: relative;
  display: flex;
  width: 580px;
}

.main-wrapper .search-wrap .search-area .search-input-box .search-input {
  width: 100%;
  height: 54px;
  padding: 0 54px 0 24px;
  font-size: 15px;
  font-weight: bold;
  border: 3px solid var(--secondary-color);
  border-radius: 100px !important;
}

.main-wrapper .search-wrap .search-area .search-input-box .search-input:focus {
  outline: 0 !important;
}

.main-wrapper .search-wrap .search-area .search-input-box .search-input::placeholder {
  color: #CACACA;
  font-weight: 500;
}

.main-wrapper .search-wrap .search-area .search-input-box .btn-area {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}

.main-wrapper .search-wrap .search-area .search-input-box .btn-reset {
  height: 44px;
}

.main-wrapper .search-wrap .search-area .search-input-box .btn-reset .icoSvg {
  background-color: #E1E1E1;
  border-radius: 50%;
}

.main-wrapper .search-wrap .search-area .search-input-box .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
}

.main-wrapper .search-wrap .info-tooltip {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

.form-switch {
  margin: 0 24px 0 8px;
}

/* 태그 슬라이드 영역 */
.keyword-wrap {
  width: 100%;
  margin: 0 auto 80px;
  position: relative;
}

.keyword-wrap .keyword-item-area .swiper-slide {
  width: auto;
}

.keyword-wrap .keyword-item-area .swiper-slide:first-child {
  padding-left: 62px;
}

.keyword-wrap .keyword-item-area .swiper-slide:last-child {
  padding-right: 62px;
}

.keyword-wrap .keyword-item {
  height: 50px;
  line-height: 49px;
  padding: 0 16px;
  background-color: #f5f5f5;
  border-radius: 40px;
}

.keyword-wrap .keyword-item:hover, .keyword-wrap .keyword-item.is-hover {
  background-color: #eee;
}

.keyword-wrap .keyword-area {
  border-radius: 60px;
  overflow-x: hidden;
  margin-top: 16px;
}

.keyword-wrap .keyword-area [class*=swiper-button] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px !important;
  height: 50px !important;
  border: 1px solid #EEEEEE;
  border-radius: 50%;
  background-color: #fff;
  background-image: none !important;
  box-shadow: 0 0 10px 0 rgba(169, 177, 189, 0.2);
}

.keyword-wrap .keyword-area .swiper-btn-area {
  display: flex;
  gap: 8px;
  width: 100%;
}

.keyword-wrap .keyword-area .swiper-btn-area button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyword-wrap .keyword-area .swiper-button-next, .keyword-wrap .keyword-area .swiper-button-prev {
  position: inherit !important;
  margin-top: 0 !important;
}

.keyword-wrap .keyword-area .ico24-chevronLeft {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M10.58%203%206%208l4.58%205'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.keyword-wrap .keyword-area .ico24-chevronRight {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M5.42%2013%2010%208%205.42%203'%20stroke='%23222'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.keyword-wrap .keyword-area .swiper-button-next.swiper-button-disabled, .keyword-wrap .keyword-area .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}

.keyword-wrap .keyword-area .swiper-button-next.swiper-button-disabled i, .keyword-wrap .keyword-area .swiper-button-prev.swiper-button-disabled i {
  opacity: 0.2;
}

.keyword-wrap .swiper-btn-area {
  position: absolute;
  top: 48px;
  width: 100%;
  z-index: 20;
}

.keyword-wrap .swiper-btn-area .swiper-button-prev {
  position: absolute !important;
  left: 0 !important;
}

.keyword-wrap .swiper-btn-area .swiper-button-next {
  position: absolute !important;
  right: 0 !important;
}

.keyword-wrap .keyword-panel {
  position: absolute;
  left: 0;
  width: 680px;
  top: calc(100% + 16px);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease, left 0.28s ease, visibility 0.28s;
}

.keyword-wrap .keyword-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.keyword-wrap .keyword-panel-inner {
  position: relative;
  padding: 36px 40px 40px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.keyword-wrap .keyword-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--tail-left, 95px);
  z-index: 1;
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-top-left-radius: 5px;
  transform: rotate(45deg);
  transition: left 0.28s ease;
}

.keyword-wrap .keyword-panel-tit {
  font-size: 28px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 18px;
}

.keyword-wrap .keyword-panel-mean {
  padding: 16px 20px;
  background: #F6F7FB;
  border-radius: 10px;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.keyword-wrap .keyword-panel-mean .mean-txt {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.keyword-wrap .keyword-panel-mean .badge-mean {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-right: 8px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--secondary-color);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  vertical-align: 2px;
}

.keyword-wrap .keyword-panel-mean .pos {
  color: #97701E;
}

.keyword-wrap .keyword-panel-order {
  margin: 22px 0 14px;
  font-size: 17px;
  font-weight: 500;
}

.keyword-wrap .keyword-panel-desc {
  margin: 0 0 22px;
  padding: 18px 20px;
  background: #F6F7FB;
  border-radius: 10px;
  font-size: 17px;
  color: #333;
  line-height: 1.7;
}

.keyword-wrap .keyword-panel-desc p {
  margin: 0;
}

.keyword-wrap .keyword-panel-desc em {
  font-style: normal;
  font-weight: bold;
  color: var(--secondary-color);
}

.keyword-wrap .keyword-panel .century-timeline-table {
  margin-left: 0;
}

.keyword-wrap .keyword-panel-more {
  display: flex;
  width: fit-content;
  gap: 8px;
  margin: 18px 0 0 auto;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.keyword-wrap .keyword-panel-more::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M13.333%205%2020%2012m0%200-6.667%207M20%2012H4'%20stroke='%23294279'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.keyword-wrap .keyword-panel-more:hover {
  gap: 12px;
}

@keyframes kwBarFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes kwDotPop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.main-final .keyword-panel .century-timeline-table.is-fill td.present::before {
  margin-left: 0;
  margin-right: auto;
  animation: kwBarFill 0.14s linear both;
  animation-delay: var(--fill-delay, 0s);
}

.main-final .keyword-panel .century-timeline-table.is-fill td.current .dot {
  animation: kwDotPop 0.21s ease-out both;
  animation-delay: var(--fill-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .main-final .keyword-panel .century-timeline-table.is-fill td.present::before,
  .main-final .keyword-panel .century-timeline-table.is-fill td.current .dot {
    animation: none;
  }
}
.main-final .keyword-panel .century-timeline-table {
  width: 598px;
}

.main-final .keyword-panel .century-timeline-table tbody th[scope=row] {
  min-width: 0;
}

.main-final .keyword-panel .century-timeline-table thead th:first-child {
  width: 106px;
}

.main-final .keyword-panel .century-timeline-table thead th:nth-child(n+2) {
  width: 70px;
}

.main-final .keyword-panel .century-timeline-table td,
.main-final .keyword-panel .century-timeline-table td.present::before {
  cursor: default;
}

.main-final .keyword-panel .century-timeline-table td.present-gap,
.main-final .keyword-panel .century-timeline-table td.present-gap::before {
  cursor: pointer;
}

.main-final .keyword-panel .century-timeline-table td.present-gap:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.main-final .keyword-panel .kw-tip {
  position: absolute;
  z-index: 30;
  display: none;
  padding: 8px 12px;
  background: #444;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

.main-final .keyword-panel .kw-tip.is-on {
  display: block;
}

.main-final .keyword-panel .kw-tip .kw-tip-arrow {
  position: absolute;
  bottom: -5px;
  left: var(--kw-tip-arrow, 50%);
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #444;
}

.century-timeline-table .th-diagonal {
  position: relative;
  padding: 0;
  height: 52px;
  background-color: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23dddddd' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.century-timeline-table .th-diagonal .th-diagonal-top {
  position: absolute;
  top: 9px;
  right: 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.century-timeline-table .th-diagonal .th-diagonal-bottom {
  position: absolute;
  bottom: 9px;
  left: 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* 슬라이드영역 */
.preview-wrap {
  position: relative;
  padding: 50px 0 80px;
}

.preview-wrap .preview-area .preview-item {
  width: 50%;
  height: 190px;
  border-radius: 20px;
  box-shadow: 0 4px 20px 0 rgba(169, 177, 189, 0.3);
}

.preview-wrap .preview-area .preview-item:first-child {
  background-color: #EAF3FF;
  border: 1px solid #E5EAF2;
}

.preview-wrap .preview-area .preview-item:last-child {
  background-color: #EDF0FF;
  border: 1px solid #DFE4FF;
}

.preview-wrap .preview-area .swiper-inner {
  padding: 40px 40px 30px 40px;
}

.preview-wrap .preview-area .preview-body {
  margin-top: 20px;
}

.preview-wrap .preview-head {
  display: flex;
  justify-content: space-between;
}

.preview-wrap .preview-head-title,
.keyword-wrap .preview-head-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
}

.main-final {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.main-final .quickLink-wrap {
  flex: 1 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

.main-final .quickLink-wrap h2 {
  top: -6px;
  margin-left: 4px;
}

.main-final .keyword-wrap .keyword-area {
  padding: 6px 0;
  margin-top: 10px;
  margin-bottom: -6px;
}

.main-final .keyword-wrap .keyword-area .swiper-container {
  padding: 6px 0;
  margin: -6px 0;
}

.main-final .keyword-wrap .keyword-area .keyword-item-area button.keyword-item:focus-visible {
  outline: 3px solid var(--focus-color);
  border-radius: 40px;
}

.main-final .keyword-wrap {
  margin-bottom: 75px;
}

.main-final .preview-head-title {
  font-size: 22px;
  font-weight: 600;
  font-family: "Paperlogy", "NanumBarunGothicYetHangul", sans-serif;
}

.main-final .quickLink-wrap .quickLink-list li a h3 {
  font-size: 22px;
}

.main-final .search-wrap {
  margin-top: 80px;
  margin-bottom: 38px;
}

.main-final .search-wrap .info-badge {
  margin-bottom: 0;
  margin-left: -310px;
}

.main-final .search-wrap .main-title {
  margin-top: -18px;
}

.main-final .search-wrap .search-area {
  margin-top: 30px;
}

.preview-wrap .preview-head-title svg,
.keyword-wrap .preview-head-title svg {
  margin-right: 8px;
  margin-top: -3px;
}

.preview-wrap .preview-area {
  position: relative;
  margin: 0 -24px;
}

.preview-wrap .preview-area .preview-item-area {
  display: flex;
  gap: 24px;
  padding: 16px 24px 20px;
}

.preview-wrap .preview-area .preview-item {
  padding: 50px 40px 44px 40px;
}

.preview-wrap .preview-area .preview-item .preview-content {
  margin-top: 24px;
  color: #666;
  font-size: 18px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.preview-wrap .preview-area .swiper-btn-area {
  position: absolute;
  width: 100%;
}

.preview-wrap .preview-area .swiper-button-prev {
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.preview-wrap .preview-area .swiper-button-next {
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.preview-wrap .preview-area .swiper-pagination-area {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.preview-wrap .preview-area .swiper-pagination-area .swiper-pagination {
  margin-top: 0 !important;
}

.preview-wrap .preview-area .swiper-pagination-area .swiper-button-play-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #ddd !important;
  border-radius: 50%;
}

.preview-wrap .preview-body .preview-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-wrap .preview-item .preview-title-area .preview-title {
  font-size: 28px;
  font-weight: bold;
  color: var(--secondary-color);
}

.preview-wrap .preview-area .swiper-button-prev,
.preview-wrap .preview-area .swiper-button-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px !important;
  height: 50px !important;
  border: 1px solid #EEEEEE;
  border-radius: 50%;
  background-color: #fff;
  background-image: none !important;
  box-shadow: 0 0 10px 0 rgba(169, 177, 189, 0.2);
}

.preview-wrap .preview-area .swiper-btn-area {
  display: flex;
  gap: 8px;
}

.preview-wrap .preview-area .swiper-btn-area button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-wrap .preview-area .ico16-chevronLeft {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M10.58%203%206%208l4.58%205'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.preview-wrap .preview-area .ico16-chevronRight {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M5.42%2013%2010%208%205.42%203'%20stroke='%23222'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.preview-wrap .preview-area .swiper-button-next.swiper-button-disabled, .preview-wrap .preview-area .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}

.preview-wrap .preview-area .swiper-button-next.swiper-button-disabled i, .preview-wrap .preview-area .swiper-button-prev.swiper-button-disabled i {
  opacity: 0.2;
}

.preview-wrap .preview-area .swiper-slide {
  width: 100% !important;
}

.preview-wrap .preview-area .swiper-pagination {
  position: relative !important;
  bottom: 0 !important;
  margin-top: 15px;
  line-height: 1;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.preview-wrap .preview-area .swiper-pagination-bullet {
  background: #ddd;
  opacity: 1 !important;
}

.preview-wrap .preview-area .swiper-pagination-bullet-active {
  width: 20px;
  border-radius: 16px;
  background-color: #444;
}

.quickLink-wrap {
  position: relative;
  margin-top: 100px;
  background-color: #F5F5F5;
  padding: 64px 0;
  margin: 0 -24px;
}

.quickLink-wrap .inner {
  position: relative;
}

.quickLink-wrap h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 8px;
}

.quickLink-wrap h2 span {
  color: var(--secondary-color);
}

.quickLink-wrap .quickLink-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.quickLink-wrap .quickLink-list {
  display: flex;
  gap: 16px;
  border-top: 1px solid #61749E;
  padding-top: 20px;
}

.quickLink-wrap .quickLink-list li {
  position: relative;
  width: 100%;
  height: 160px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #EAEAEA;
}

.quickLink-wrap .quickLink-list li a {
  width: 100%;
  height: 100%;
  display: block;
  padding: 26px 22px;
}

.quickLink-wrap .quickLink-list li a h3 {
  font-size: 20px;
  font-weight: bold;
  color: #111;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.quickLink-wrap .quickLink-list li a .logo-area {
  position: absolute;
  bottom: 24px;
  right: 20px;
  width: 64px;
  height: 64px;
}

.quickLink-wrap .quickLink-list li a .logo-area img {
  height: auto;
}

.quickLink-wrap .quickLink-list li a .quickLink-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  color: #999;
}

.quickLink-wrap .quickLink-area {
  display: flex;
  align-items: stretch;
}

.quickLink-wrap .oldKorean-area {
  align-self: flex-end;
  width: 258px;
  height: 180px;
  margin-left: 40px;
  padding: 20px;
  background-color: #61749E;
  border-radius: 20px;
}

.quickLink-wrap .oldKorean-area .oldKorean-tit {
  margin-bottom: 12px;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.quickLink-wrap .oldKorean-area .oldKorean-btn-list li {
  margin-bottom: 8px;
}

.quickLink-wrap .oldKorean-area .oldKorean-btn-list li:last-child {
  margin-bottom: 0;
}

.quickLink-wrap .oldKorean-area .oldKorean-btn-list li a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 0 20px;
  height: 44px;
  line-height: 54px;
  background-color: rgba(207, 229, 255, 0.1);
  border-radius: 12px;
}

/* 모달 - 로그아웃 안내 */
.modal-loginTimeExtend .modal-dialog {
  margin-top: 200px;
}

.modal-loginTimeExtend .modal-body {
  padding: 40px 30px 30px 30px;
}

.loginTimeExtend-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 12px;
}

.loginTimeExtend-subTitle {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 24px;
}

.loginTimeExtend-subTitle strong {
  color: var(--color-red);
}

.loginTimeExtend-content {
  font-size: 18px;
  margin-bottom: 26px;
}

.loginTimeExtend-btn-area {
  display: flex;
  gap: 15px;
}

/* 윈도우 팝업 */
.windowPop .pop-body {
  padding: 30px 30px 0;
}

.windowPop .pop-footer {
  display: flex;
  justify-content: center;
  padding: 30px 0;
  gap: 8px;
}

.windowPop .pop-header {
  padding: 22px 30px;
  font-size: 22px;
  font-weight: 700;
  background-color: #EBF3FF;
}

/* 공지 사항 공통(윈도우 팝업/모달) */
.notice-pop .pop-header .notice-pop-date,
.modal-notice .modal-head-right .notice-pop-date {
  font-size: 15px;
  font-weight: 400;
  color: #666;
}

.notice-pop .pop-footer .custom-control-label span,
.modal-notice .notice-pop-footer-item .custom-control-label span {
  font-size: 18px;
}

/* 윈도우 팝업 - 공지 사항 */
.notice-pop .pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notice-pop .pop-body {
  padding: 50px 30px;
  line-height: 2;
  font-size: 20px;
  color: #333;
  min-height: 450px;
}

.notice-pop .pop-footer {
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #eee;
}

.notice-pop .pop-footer .btn-close-text {
  background: none;
  border: 0;
  font-size: 18px;
  font-weight: 500;
  color: #222;
  cursor: pointer;
}

.notice-title {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 700;
  color: #222;
}

/* 모달 - 공지 사항 */
.modal-notice .modal-head-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.modal-notice .modal-body {
  padding: 50px 30px;
  line-height: 2;
  font-size: 20px;
  color: #333;
}

.modal-notice .modal-footer.notice-pop-footer {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
}

.modal-notice .modal-footer.notice-pop-footer > * {
  margin: 0;
}

.modal-notice .notice-pop-footer-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 18px 0;
  margin: 0;
  background: none;
  border: 0;
  font-size: 18px;
  color: #222;
  cursor: pointer;
}

.modal-notice .notice-pop-footer-item:hover {
  background-color: #f5f5f5;
}

.modal-notice .notice-pop-footer-item + .notice-pop-footer-item {
  border-left: 1px solid #eee;
}

.modal-notice .notice-pop-footer-item .custom-control {
  margin: 0;
}

/* 메인 레이어 팝업 - 옛한글 입력 방법 안내 */
.layer-pop {
  position: fixed;
  top: 20px;
  left: 80%;
  right: auto;
  transform: translateX(-50%);
  margin: 0;
  width: 650px;
  max-width: calc(100% - 40px);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
}

.layer-pop .pop-header {
  position: relative;
  padding: 22px 30px;
  font-size: 22px;
  font-weight: 700;
  background-color: #EBF3FF;
  border-radius: 12px 12px 0 0;
  cursor: move;
}

.layer-pop .pop-header .btn-close-layer {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: 0;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-pop .pop-footer {
  display: flex;
}

.oldKoreanGuide-pop .pop-header {
  padding: 16px 30px;
}

.oldKoreanGuide-pop .pop-header .btn-close-layer {
  top: 16px;
}

.oldKoreanGuide-pop .pop-body {
  line-height: 1.6;
  word-break: keep-all;
  padding: 30px 30px;
  font-size: 17px;
}

.oldKoreanGuide-pop .pop-footer {
  justify-content: center;
  align-items: center;
  gap: 30px;
  border-top: 1px solid #eee;
  padding: 15px 0;
  font-size: 17px;
}

.oldKoreanGuide-pop .oldKoreanGuide-hide-options {
  display: flex;
}

.oldKoreanGuide-pop .btn-outlineTonal.lg {
  font-size: 16px;
  height: 44px;
  line-height: 44px;
}

.oldKoreanGuide-pop .oldKorean-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.oldKoreanGuide-pop .hanging-num {
  padding-left: 1.25em;
  text-indent: -1.25em;
  color: #666;
}

.oldKoreanGuide-pop .key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  margin: 3px 2px 2px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-weight: inherit;
  color: inherit;
  line-height: 1;
  text-indent: 0;
  vertical-align: middle;
  font-size: 16px;
}

.oldKoreanGuide-pop .switch-static {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0 1px -4px 2px;
  background-color: #ddd;
  border-radius: 34px;
}

.oldKoreanGuide-pop .switch-static .switch-static-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
}

.oldKoreanGuide-pop .switch-static.is-on {
  background-color: #294279;
}

.oldKoreanGuide-pop .switch-static.is-on .switch-static-handle {
  left: auto;
  right: 2px;
}

.oldKoreanGuide-pop .keyboard-layout-wrap {
  margin-left: 1.25em;
  padding: 12px;
  background-color: #ececec;
  border-radius: 16px;
}

.oldKoreanGuide-pop .keyboard-layout-table {
  border-collapse: separate;
  border-spacing: 6px;
  width: 100%;
  border-top: 0;
}

.oldKoreanGuide-pop .keyboard-layout-table td {
  position: relative;
  height: 70px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.oldKoreanGuide-pop .keyboard-layout-table .shift-glyph {
  position: absolute;
  top: 8px;
  right: 8px;
  line-height: 1;
  font-size: 26px;
  font-weight: 400;
  color: #294279;
}

.oldKoreanGuide-pop .keyboard-layout-table .key-letter {
  position: absolute;
  bottom: 10px;
  left: 8px;
  line-height: 1;
  font-size: 26px;
  font-weight: 400;
  color: #222;
}

/* 윈도우 팝업 - 일러두기 */
.guide-pop .pop-body {
  display: flex;
  gap: 55px;
  padding: 50px;
  overflow: hidden;
}

.guide-nav {
  width: 240px;
  overflow-y: auto;
  flex-shrink: 0;
}

.guide-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid #222;
}

.guide-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 20px;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.guide-nav ul li a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0;
}

.guide-nav ul li a:hover {
  color: #294279;
  text-decoration: none;
}

.guide-nav ul li a.active {
  color: #294279;
  font-weight: 700;
}

.guide-nav ul li a.active::after {
  border-color: #294279;
  opacity: 1;
}

.guide-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  line-height: 1.8;
  font-size: 20px;
}

.guide-section {
  display: none;
}

.guide-section.active {
  display: block;
}

.guide-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 10px;
  padding-left: 50px;
  text-indent: -50px;
  word-break: keep-all;
}

.guide-content h3 .guide-num {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 7px 12px 5px 12px;
  border-radius: 10px;
  margin-right: 8px;
  text-indent: 0;
}

.guide-content h3:first-child {
  margin-top: 0;
}

.guide-content p {
  margin-bottom: 6px;
  color: #444;
  padding-left: 1.8em;
  text-indent: -1.8em;
  word-break: keep-all;
}

.guide-content p.guide-example {
  margin-left: 35px;
  padding-left: 40px;
  text-indent: -40px;
}

.guide-content p.guide-example sup {
  top: -4px;
  margin-left: 3px;
}

.guide-content p.guide-example .guide-example-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border: 1px solid #DF1A4B;
  border-radius: 6px;
  color: #DF1A4B;
  font-size: 18px;
  text-indent: 0;
  vertical-align: middle;
  line-height: 1.5;
}

.guide-content .img-placeholder {
  margin-top: 12px;
  margin-bottom: 20px;
}

.guide-content .img-placeholder-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
  margin-bottom: 20px;
}

.guide-content .img-placeholder-group .img-placeholder {
  margin: 0;
}

.guide-content img {
  display: block;
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-top: 12px;
  margin-bottom: 20px;
}

.guide-content .img-placeholder-group img {
  margin: 0;
}

.guide-content .guide-img-heading {
  margin-left: 50px;
}

.guide-content .guide-img-example {
  margin-left: 35px;
}

.guide-content .guide-legend-table-wrap {
  margin-top: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.guide-content .guide-legend-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
}

.guide-content .guide-legend-table th,
.guide-content .guide-legend-table td {
  width: 14.2857%;
}

.guide-content .guide-legend-table th {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

.guide-content .guide-legend-table td {
  border: 1px solid #ddd;
  padding: 16px 16px;
}

.guide-content .guide-legend-table th {
  background-color: #f5f5f5;
  font-size: 18px;
  line-height: 1.4;
}

.guide-content .guide-legend-table th .century-unknown-caption {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #666;
}

.guide-content .guide-legend-table th.century-unknown-th {
  font-size: 17px;
}

.guide-content .guide-legend-table td {
  color: #7055EB;
}

.guide-content .guide-legend-table td .color-bar {
  display: block;
  height: 14px;
  border-radius: 2px;
}

.guide-content .guide-legend-table td .color-bar.is-gap {
  opacity: 0.35;
}

.guide-content .guide-legend-table td[data-century="15"] .color-bar {
  background-color: var(--century-color-15);
}

.guide-content .guide-legend-table td[data-century="16"] .color-bar {
  background-color: var(--century-color-16);
}

.guide-content .guide-legend-table td[data-century="17"] .color-bar {
  background-color: var(--century-color-17);
}

.guide-content .guide-legend-table td[data-century="18"] .color-bar {
  background-color: var(--century-color-18);
}

.guide-content .guide-legend-table td[data-century="19"] .color-bar {
  background-color: var(--century-color-19);
}

.guide-content .guide-legend-table td[data-century=unknown] .color-bar {
  background-color: var(--century-color-unknown);
}

.guide-content .guide-legend-table td[data-century="20"] .color-bar {
  background-color: var(--century-color-20);
}

.guide-content p.guide-indent {
  padding-left: calc(32px + 1.8em);
  text-indent: -1.8em;
}

.guide-content .century-doc-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
  margin-left: 20px;
}

.guide-content .century-doc-group {
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 16px 20px;
}

.guide-content .century-doc-list {
  margin-top: 8px;
  padding-left: 0;
  text-indent: 0;
  color: #444;
  word-break: keep-all;
}

.guide-sub-section + .guide-sub-section {
  margin-top: 40px;
}

.guide-indent {
  padding-left: 20px;
}

.guide-indent .guide-indent {
  padding-left: 20px;
}

/* 윈도우팝업 - 특수문자 입력기 */
.specialCharacters-wrap .nav {
  padding-bottom: 16px;
  border-bottom: 1px solid #222;
}

.specialCharacters-wrap .gugyeol-area .char-btn {
  font-size: 36px;
}

/* 윈도우팝업 - 변환 */
.conversion-wrap .nav {
  padding-bottom: 16px;
  border-bottom: 1px solid #222;
}

.conversion-wrap .gugyeol-area .char-btn {
  font-size: 36px;
}

.conversion-wrap textarea[readonly] {
  background-color: #fff !important;
}

/* 전체 사전 내려받기 */
.modal-download .caption-text {
  display: block;
  margin-bottom: 50px;
  font-size: 18px;
  color: #666;
}

/* 사전 내려받기 */
.modal-dictionaryDownload .radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.modal-dictionaryDownload .radio-grid .custom-control + .custom-control {
  margin-left: 0;
}

.modal-dictionaryDownload .radio-grid-purpose .custom-control {
  flex: 1;
}

.modal-dictionaryDownload .radio-grid-purpose .custom-control:last-child {
  flex-basis: 100%;
}

.modal-dictionaryDownload .radio-grid-filetype .custom-control {
  flex: 1 0 calc(33.333% - 14px);
}

.modal-dictionaryDownload .table-wrap td {
  padding: 18px 16px;
}

.modal-dictionaryDownload .checkbox-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* 검색 결과 */
.search-result-area .search-result-list {
  border-top: 1px solid #e5e5e5;
  margin-bottom: 32px;
}

.search-result-area .search-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.search-result-area .search-result-info {
  font-size: 24px;
  font-weight: 700;
}

.search-result-area .search-result-info strong {
  margin-left: 8px;
  color: var(--secondary-color);
  font-size: 20px;
  font-weight: 500;
}

.search-result-area .util-area {
  display: flex;
  gap: 8px;
  justify-content: end;
  align-items: center;
}

.search-result-area .search-result-item {
  border-bottom: 1px solid #e5e5e5;
}

.search-result-area .search-result-item:hover {
  background-color: #f5f5f5;
}

.search-result-area .search-result-item a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 40px 8px;
}

.search-result-area .search-result-item.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
  color: #666;
}

.search-result-area .search-result-item.empty:hover {
  background-color: transparent;
}

.search-result-area .search-result-item .search-result-item-title-area {
  font-size: 0;
}

.search-result-area .search-result-item .search-result-item-title-area .title {
  display: inline-block;
  line-height: 30px;
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary-color);
}

.search-result-area .search-result-item .search-result-item-title-area .index {
  display: inline-block;
  color: #777;
  vertical-align: top;
  margin-left: 4px;
  font-size: 16px;
  margin-top: -1px;
}

.search-result-area .search-result-item .index {
  display: inline-block;
  color: #777;
  vertical-align: top;
  margin-left: 3px;
  font-size: 14px;
  margin-top: 1px;
}

.search-result-area .search-result-item .search-result-item-title-area .pos {
  display: inline-block;
  line-height: 30px;
  font-size: 20px;
  color: #97701E;
  margin-left: 8px;
}

.search-result-area .search-result-item .search-result-item-title-area .info {
  font-size: 20px;
  margin-left: 8px;
}

.search-result-item-info-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.search-result-area .search-result-badge-area {
  font-size: 16px;
}

/* 검색결과 페이지 */
.result-wrapper .search-result-area {
  margin-top: 32px;
}

.result-wrapper .search-result-info-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
}

.result-wrapper .search-result-info-area span {
  font-weight: 700;
  color: var(--secondary-color);
}

.result-wrapper .search-result-info-area a {
  font-weight: 500;
  color: var(--secondary-color);
  margin-left: 18px;
  font-size: 18px;
  text-decoration: underline;
}

.result-wrapper .search-result-info-area a strong {
  font-weight: 700;
}

/* 검색결과 페이지 > 용례 */
.search-result-area ul.search-result-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 10px;
  border-bottom: 1px solid #e5e5e5;
}

.search-result-area ul.search-result-list li.search-result-item {
  border-bottom: 0;
}

.search-result-area ul.search-result-list li.search-result-item:hover {
  background-color: transparent;
}

.search-result-area ul.search-result-list li.search-result-item a {
  display: inline-block;
  padding: 0;
  width: auto;
}

.search-result-area ul.search-result-list li.search-result-item a:hover {
  text-decoration: underline;
}

.search-result-area ul.search-result-list li.search-result-item.empty {
  height: 160px;
}

.myinfo-wrap h2.sec-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

.myinfo-wrap {
  margin-top: 74px;
}

.myinfo-wrap input {
  font-size: 20px !important;
}

.myinfo-wrap .table-wrap th {
  padding: 20px 16px;
  height: 65px;
}

.myinfo-wrap .table-wrap td {
  padding: 20px 16px;
  color: #444;
}

.myinfo-wrap .table-wrap .text {
  line-height: 40px;
}

.myinfo-wrap .btn-area {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.myinfo-wrap .caption-text {
  font-size: 18px;
}

.myinfo-wrap .caption-text-mark {
  font-size: 18px;
  margin-bottom: 8px;
  padding-left: 28px;
  background-repeat: no-repeat;
  background-position: left 3px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 10L10.0003 14.1667M10.0003 6.91164V6.87502M1.66699 10C1.66699 5.39765 5.39795 1.66669 10.0003 1.66669C14.6027 1.66669 18.3337 5.39765 18.3337 10C18.3337 14.6024 14.6027 18.3334 10.0003 18.3334C5.39795 18.3334 1.66699 14.6024 1.66699 10Z' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.myinfo-wrap .caption-text-mark:last-child {
  margin-bottom: 0;
}

.myinfo-wrap .notice-search-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
  margin-bottom: 40px;
}

.myinfo-wrap .notice-search-label {
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.myinfo-wrap .notice-search-area .search-input-box {
  position: relative;
}

.myinfo-wrap .notice-search-area .search-input-box .search-input {
  width: 320px;
  height: 48px;
  padding: 0 48px 0 16px;
  border-radius: 8px !important;
  font-weight: 500;
}

.myinfo-wrap .notice-search-area .search-input-box .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.myinfo-wrap .board-info-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.myinfo-wrap .board-total {
  font-size: 20px;
  color: #666;
}

.myinfo-wrap .board-total strong {
  color: #294279;
  font-weight: 700;
}

.myinfo-wrap .myinfo-opinion-list {
  margin-bottom: 32px;
}

.myinfo-wrap .myinfo-opinion-list td a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 470px;
}

.myinfo-wrap .myinfo-opinion-list td a:hover {
  color: #294279 !important;
  text-decoration: underline !important;
}

/* 사용자 의견 상세 */
.myinfo-wrap .myinfo-area .myinfo-detail-head {
  padding-bottom: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid #222;
}

.myinfo-wrap .notice-file-name {
  border-bottom: 2px solid #222;
  line-height: 1.2;
}

.myinfo-wrap a:hover {
  color: #294279 !important;
  text-decoration: none !important;
}

.myinfo-wrap a:hover .notice-file-name {
  border-bottom-color: #294279;
}

/* 사전 내려받기 */
.myinfo-wrap .myinfo-download-list {
  margin-bottom: 32px;
}

.myinfo-wrap .myinfo-download-list td {
  line-height: 1.4;
}

.myinfo-wrap .myinfo-download-list .file-icon {
  display: block;
  margin: auto;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.myinfo-wrap .myinfo-download-list .file-icon.file_doc {
  background-image: url("../images/icons/file_doc.svg");
}

.myinfo-wrap .myinfo-download-list .file-icon.file_hwp {
  background-image: url("../images/icons/file_hwp.svg");
}

.myinfo-wrap .myinfo-download-list .file-icon.file_json {
  background-image: url("../images/icons/file_json.svg");
}

.myinfo-wrap .myinfo-download-list .file-icon.file_txt {
  background-image: url("../images/icons/file_txt.svg");
}

.myinfo-wrap .myinfo-download-list .file-icon.file_xls {
  background-image: url("../images/icons/file_xls.svg");
}

.myinfo-wrap .myinfo-download-list .file-icon.file_xmi {
  background-image: url("../images/icons/file_xmi.svg");
}

.terms-wrap {
  color: #444;
  line-height: 1.6;
}

.terms-wrap section {
  margin-bottom: 100px;
}

.terms-wrap h2,
.terms-wrap h3,
.terms-wrap h4 {
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

.terms-wrap h2 {
  padding: 18px 0;
  font-size: 28px;
  text-align: center;
  background-color: #F5F5F5;
  border-radius: 12px;
}

.terms-wrap h3 {
  margin: 56px 0;
  font-size: 26px;
}

.terms-wrap h4 {
  margin: 56px 0 20px;
  font-size: 22px;
}

.terms-wrap ol {
  margin-top: 12px;
}

.terms-wrap ol li {
  content: "";
  position: relative;
  padding-left: 28px;
}

.terms-wrap ol li::before {
  position: absolute;
  left: 0;
  top: -2px;
}

.terms-wrap .number-none li {
  padding-left: 0;
}

.terms-wrap .number-none li::before {
  display: none;
}

.terms-wrap ol li:nth-child(1)::before {
  content: "①";
}

.terms-wrap ol li:nth-child(2)::before {
  content: "②";
}

.terms-wrap ol li:nth-child(3)::before {
  content: "③";
}

.terms-wrap ol li:nth-child(4)::before {
  content: "④";
}

.terms-wrap ol li:nth-child(5)::before {
  content: "⑤";
}

.terms-wrap ol li:nth-child(6)::before {
  content: "⑥";
}

.terms-wrap ol li:nth-child(7)::before {
  content: "⑦";
}

.terms-wrap ol li:nth-child(8)::before {
  content: "⑧";
}

.terms-wrap ol li:nth-child(9)::before {
  content: "⑨";
}

.terms-wrap ol li:nth-child(10)::before {
  content: "⑩";
}

.terms-wrap ol li > ol > li::before {
  top: 0;
}

.terms-wrap ol li > ol > li:nth-child(1)::before {
  content: "1.";
}

.terms-wrap ol li > ol > li:nth-child(2)::before {
  content: "2.";
}

.terms-wrap ol li > ol > li:nth-child(3)::before {
  content: "3.";
}

.terms-wrap ol li > ol > li:nth-child(4)::before {
  content: "4.";
}

.terms-wrap ol li > ol > li:nth-child(5)::before {
  content: "5.";
}

.terms-wrap ol li > ol > li:nth-child(6)::before {
  content: "6.";
}

.terms-wrap ol li > ol > li:nth-child(7)::before {
  content: "7.";
}

.terms-wrap ol li > ol > li:nth-child(8)::before {
  content: "8.";
}

.terms-wrap ol li > ol > li:nth-child(9)::before {
  content: "9.";
}

.terms-wrap ol li > ol > li:nth-child(10)::before {
  content: "10.";
}

.terms-wrap ol li > ol > li:nth-child(11)::before {
  content: "11.";
}

.terms-wrap ol li > ol > li:nth-child(12)::before {
  content: "12.";
}

.terms-wrap ol li > ol > li:nth-child(13)::before {
  content: "13.";
}

.terms-wrap ol li > ol > li:nth-child(14)::before {
  content: "14.";
}

.terms-wrap ol li > ol > li:nth-child(15)::before {
  content: "15.";
}

.terms-wrap ol li > ol > li:nth-child(16)::before {
  content: "16.";
}

.terms-wrap ol li > ol > li:nth-child(17)::before {
  content: "17.";
}

.terms-wrap ol li > ol > li:nth-child(18)::before {
  content: "18.";
}

.terms-wrap ol li > ol > li:nth-child(19)::before {
  content: "19.";
}

.terms-wrap ol li > ol > li:nth-child(20)::before {
  content: "20.";
}

.copyright-wrapper .terms-wrap ol li {
  padding-left: 20px;
  margin-bottom: 12px;
}

.copyright-wrapper .terms-wrap ol li:last-child {
  margin-bottom: 0;
}

.copyright-wrapper .terms-wrap ol li::before {
  content: "-";
}

.copyright-wrapper .terms-wrap div {
  margin-bottom: 20px;
}

.copyright-wrapper .terms-wrap a {
  text-decoration: underline;
}

.help-wrap {
  margin-top: 60px;
}

.help-wrap .head-area {
  margin-bottom: 40px;
}

.help-wrap .head-area h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 20px;
  border-bottom: 1px solid #222;
}

.help-wrap .head-area h2 span {
  font-size: 20px;
  font-weight: 400;
  color: #666;
  margin-left: 8px;
}

.help-wrap h3 {
  font-size: 22px;
  font-weight: 700;
}

.help-wrap dl.dl-numbered dt {
  font-size: 20px;
}

.help-wrap dl.dl-numbered dt::before {
  content: none;
}

.help-wrap dl.dl-numbered dd {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 24px;
  font-size: 20px;
}

.help-wrap dl.dl-numbered dd p {
  margin: 0;
}

.help-wrap dl.dl-numbered dd img {
  display: block;
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.help-wrap .switch-static {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0 2px 2px 3px;
  background-color: #ddd;
  border-radius: 34px;
  vertical-align: middle;
  cursor: text;
}

.help-wrap .switch-static .switch-static-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
}

.help-wrap .switch-static.is-on {
  background-color: #294279;
}

.help-wrap .switch-static.is-on .switch-static-handle {
  left: auto;
  right: 2px;
}

.help-wrap .lost-letter-table {
  table-layout: fixed;
  width: 600px;
  max-width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.help-wrap .lost-letter-table th,
.help-wrap .lost-letter-table td {
  border: 1px solid #ddd;
}

.help-wrap .lost-letter-table th {
  height: 130px;
  font-size: 48px;
  font-weight: 400;
  background-color: #fff;
  padding-top: 10px;
}

.help-wrap .lost-letter-table th span {
  display: inline-block;
  line-height: 1;
}

.help-wrap .lost-letter-table td {
  padding: 12px;
  font-size: 18px;
  color: #444;
  background-color: #f5f5f5;
}

.help-wrap .keyboard-layout-wrap {
  margin-top: 14px;
  padding: 16px;
  background-color: #ececec;
  border-radius: 16px;
}

.help-wrap .keyboard-layout-table {
  border-collapse: separate;
  border-spacing: 12px;
  width: 100%;
  border-top: 0;
}

.help-wrap .keyboard-layout-table td {
  position: relative;
  height: 120px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.help-wrap .keyboard-layout-table .shift-glyph {
  position: absolute;
  top: 14px;
  right: 16px;
  line-height: 1;
  font-size: 44px;
  font-weight: 400;
  color: #294279;
}

.help-wrap .keyboard-layout-table .key-letter {
  position: absolute;
  bottom: 14px;
  left: 18px;
  line-height: 1;
  font-size: 44px;
  font-weight: 400;
  color: #222;
}

.help-wrap .key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  margin: 5px 4px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 18px;
  font-weight: inherit;
  color: inherit;
  line-height: 1;
  text-indent: 0;
  vertical-align: middle;
}

.help-wrap .input-sequence-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.help-wrap .input-sequence-table th,
.help-wrap .input-sequence-table td {
  border: 1px solid #ddd;
  padding: 14px 8px;
}

.help-wrap .input-sequence-table th {
  background-color: #f5f5f5;
  font-size: 20px;
  font-weight: 400;
  color: #444;
}

.help-wrap .input-sequence-table td {
  background-color: #fff;
  font-size: 32px;
  font-weight: 400;
  color: #222;
}

.help-wrap .input-sequence-table .result-char {
  font-size: 32px;
}

.help-wrap .ime-cluster {
  position: relative;
  top: -2px;
  font-size: 83%;
}

.help-wrap .ime-example-table {
  border-collapse: collapse;
  width: 700px;
  max-width: 100%;
  text-align: center;
}

.help-wrap .ime-example-table th,
.help-wrap .ime-example-table td {
  border: 1px solid #ddd;
  padding: 14px 8px;
  font-size: 20px;
}

.help-wrap .ime-example-table th {
  background-color: #f5f5f5;
  font-weight: 400;
  color: #444;
}

.help-wrap dl {
  padding-left: 20px;
  margin-top: 40px;
}

.help-wrap dl dt {
  margin-bottom: 14px;
  font-weight: 700;
}

.help-wrap dl dt::before {
  content: "●";
  font-size: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

.help-wrap dl dd {
  font-size: 18px;
  color: #666;
}

/* help 검색 영역 */
.board-wrap {
  margin-top: 60px;
}

.board-body {
  border-top: 1px solid #222;
}

.board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.board-head .title-area {
  font-size: 28px;
  font-weight: 700;
}

.board-head .title-area strong {
  color: var(--secondary-color);
}

.board-head .title-area span {
  font-weight: 400;
}

.board-head .search-input-box {
  position: relative;
}

.board-head .search-input-box .search-input {
  width: 260px;
  height: 48px;
  padding: 0 48px 0 16px;
  border-radius: 100px !important;
  font-weight: 500;
}

.board-head .search-input-box .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

/* 아코디언 리스트 */
.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 12px;
  background: #fff;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #eee;
}

.accordion-header:focus {
  outline: 2px solid var(--secondary-color);
  outline-offset: -2px;
}

.accordion-header[aria-expanded=true] {
  font-weight: 700;
}

.accordion-header[aria-expanded=true] i {
  transform: rotate(180deg);
}

.accordion-header .accordion-title {
  font-size: 20px;
  color: #222;
}

.accordion-header i {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.accordion-body {
  padding: 50px 50px;
  border-top: 1px solid #e5e5e5;
  background: #f5f5f5;
}

.accordion-body p {
  margin: 0;
  font-size: 20px;
  line-height: 1.7;
  color: #444;
}

.faq-answer {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-answer-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-section-title {
  color: #222;
}

.faq-answer-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-answer-block h4 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
}

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: #eee;
  border: 1px dashed #ccc;
  border-radius: 8px;
  color: #999;
  font-size: 16px;
}

.faq-answer-block img,
.faq-answer img {
  display: block;
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.faq-term-table {
  width: auto;
  max-width: 400px;
}

.faq-term-table table {
  width: 100%;
}

.faq-term-table th {
  background-color: #f0f0f0;
  font-size: 18px;
  padding: 12px 16px !important;
}

.faq-term-table td {
  background-color: #fff;
  font-size: 18px;
  padding: 12px 16px !important;
}

.faq-answer p [class*=btn-] {
  vertical-align: middle;
  margin: 0 2px;
  cursor: text;
}

.faq-answer p [class*=btn-]:hover {
  background-color: #fff;
}

.faq-link-highlight {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--secondary-color);
  font-size: 20px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-link-highlight .ico16-external-navy,
.faq-link-highlight .ico16-chevronRight {
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  position: relative;
  top: -2px;
}

.faq-link-highlight:hover {
  color: var(--secondary-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-link-highlight .ico16-external {
  flex-shrink: 0;
}

/* 아코디언 내 검색 예시 */
.search-area-example {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 12px;
}

.search-area-example .search-input-box {
  display: flex;
  position: relative;
  flex: 1;
}

.search-area-example .search-input {
  width: 100%;
  height: 54px;
  padding: 0 54px 0 24px;
  font-size: 15px;
  font-weight: bold;
  border: 3px solid var(--secondary-color);
  border-radius: 100px !important;
}

.search-area-example .search-input:focus {
  outline: 0 !important;
}

.search-area-example .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.search-area-example .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.openapi-wrap {
  margin-top: 80px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.openapi-wrap .head-area {
  margin-bottom: 40px;
}

.openapi-wrap .head-area h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 20px;
  border-bottom: 1px solid #222;
}

.openapi-wrap .head-area h2 span {
  font-size: 20px;
  font-weight: 400;
  color: #666;
  margin-left: 8px;
}

.openapi-wrap h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.openapi-wrap p {
  line-height: 1.6;
}

.openapi-wrap dl dt {
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.4;
}

.openapi-wrap dl dd {
  font-size: 20px;
  color: #444;
  font-weight: 400;
  line-height: 1.6;
}

/* 서브 탭 스타일 (이미지 반영) */
.openapi-sub-tabs {
  gap: 4px;
}

.openapi-sub-tabs .nav-item {
  margin-bottom: -1px;
}

.openapi-sub-tabs .nav-link {
  font-size: 18px;
  font-weight: 500;
  color: #444;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 12px 12px 0 0;
  padding: 14px 28px;
  transition: all 0.2s;
}

.openapi-sub-tabs .nav-link:hover {
  background-color: #eee;
}

.openapi-sub-tabs .nav-link.active {
  background-color: #2b4477;
  color: #fff;
  border-color: #2b4477;
  font-weight: 500;
}

.openapi-sub-content {
  padding-top: 20px;
}

/* 코드 박스 스타일 */
.code-box {
  background-color: #fff;
  padding: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
}

.code-box:not(.is-card) {
  height: 600px;
  overflow-y: auto;
}

.code-box.is-card {
  background-color: #fff;
  padding: 0 !important;
}

.openapi-wrap .code-box pre,
.openapi-wrap .code-box code,
.openapi-wrap table td pre,
.openapi-wrap pre {
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-family: "NanumBarunGothicYetHangul";
}

.code-box-header {
  background-color: #f5f5f5;
  padding: 16px 20px;
  font-size: 18px !important;
  font-weight: 700;
  color: #222;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  line-height: 1.2;
}

.code-box-body {
  padding: 24px;
  background-color: #fff;
}

.code-box pre {
  margin: 0;
  color: #444;
  font-family: "NanumBarunGothicYetHangul";
}

/* 유틸리티 클래스 보정 */
.fs-20px {
  font-size: 20px !important;
}

.fs-18px {
  font-size: 18px !important;
}

.fs-16px {
  font-size: 16px !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.mb-120px {
  margin-bottom: 120px !important;
}

.mb-80px {
  margin-bottom: 80px !important;
}

.mb-20px {
  margin-bottom: 20px !important;
}

.mb-30px {
  margin-bottom: 30px !important;
}

.gap-12px {
  gap: 12px !important;
}

.gap-20px {
  gap: 20px !important;
}

/* 테이블 상세 스타일 */
.openapi-wrap table th,
.openapi-wrap table td {
  text-align: left;
  white-space: nowrap;
  padding: 18px 24px;
  font-size: 20px;
}

.openapi-wrap table th {
  color: #222;
  font-weight: 500;
}

.openapi-wrap table td {
  color: #444;
  font-weight: 400;
}

.openapi-wrap table td:nth-child(3),
.openapi-wrap table td:last-child {
  white-space: normal;
  line-height: 1.6;
}

/* 리스트 스타일 (블릿 및 간격) */
.info-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.info-list li {
  position: relative;
  padding-left: 20px;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #222;
}

.info-list li:last-child {
  margin-bottom: 0;
}

.info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 4px;
  height: 4px;
  background-color: #222;
  border-radius: 50%;
}

/* 오픈 API 예시 - 검색 방식 셀렉트 너비 */
#tabpanel-openapi-03 .customSelect_area {
  position: relative;
  width: 340px;
}

#tabpanel-openapi-03 .customSelect_area .customSelect {
  width: 100%;
}

#tabpanel-openapi-03 .customSelect_list {
  width: 340px;
}

.detail-left {
  max-width: 1597px;
}

.detail-left .searchBar {
  max-width: 1200px;
  margin: 0 auto 76px;
}

.detail-left .content-with-sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.detail-left .content-main {
  flex: 1;
  min-width: 0;
  padding-left: calc(317px + 80px);
}

.detail-left .sidebar {
  position: fixed;
  top: 290px;
  left: auto;
  width: 317px;
  height: calc(100vh - 290px - 64px);
  flex-shrink: 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-left .sidebar-inner {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  gap: 20px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px 30px 0;
  flex-shrink: 0;
}

.sidebar-title {
  font-size: 24px;
  font-weight: 700;
  color: #222;
}

.sidebar-location-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  color: #222;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.sidebar-location-btn:hover {
  color: #294279;
}
.sidebar-location-btn:hover svg circle, .sidebar-location-btn:hover svg path {
  stroke: #294279;
}
.sidebar-location-btn:hover svg circle[fill="#222222"] {
  fill: #294279;
}

.detail-left .sidebar-index {
  flex-shrink: 0;
  width: 55px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.detail-left .sidebar-index::-webkit-scrollbar {
  display: none;
}

.sidebar-index-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.sidebar-index-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  font-size: 20px;
  font-weight: 500;
  color: #222;
  background-color: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.sidebar-index-btn:hover {
  background-color: #edf1f5;
  border-color: #294279;
  color: #294279;
}
.sidebar-index-btn.active {
  background-color: #294279;
  border-color: #294279;
  color: #fff;
}

.sidebar-word-list {
  flex: 1;
  overflow-y: scroll;
}
.sidebar-word-list::-webkit-scrollbar {
  width: 12px;
}
.sidebar-word-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.sidebar-word-list::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}

.sidebar-word-list ul {
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-word-link {
  display: flex;
  align-items: center;
  padding: 9px 15px 6px 15px;
  font-size: 20px;
  color: #222;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  word-break: keep-all;
  min-height: 44px;
}
.sidebar-word-link:hover {
  background-color: #F5F5F5;
  color: #294279;
}
.sidebar-word-link.active {
  background-color: #F5F5F5;
  color: #294279;
  font-weight: 700;
}

.sidebar-tab-btn {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  z-index: 201;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 75px;
  background-color: #fff;
  border: 1px solid #E5E5E5;
  border-left: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #444;
}
.sidebar-tab-btn:hover {
  background-color: #edf1f5;
}

.sidebar-tab-btn--open {
  display: none;
  position: fixed;
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  border-left: 1px solid #ddd;
  border-radius: 0 8px 8px 0;
  z-index: 201;
}

@media (min-width: 1501px) {
  .sidebar-tab-btn, .sidebar-tab-btn--open {
    display: none !important;
  }
}
@media (min-width: 1401px) and (max-width: 1500px) {
  .detail-left .content-main {
    margin-left: 0px !important;
  }
  .detail-left .content-main.sidebar-open {
    margin-left: 330px !important;
  }
}
@media (min-width: 1301px) and (max-width: 1400px) {
  .detail-left .content-main {
    margin-left: 10px !important;
  }
  .detail-left .content-main.sidebar-open {
    margin-left: 382px !important;
  }
}
@media (max-width: 1500px) {
  .detail-left {
    max-width: 1200px;
  }
  .detail-left .searchBar {
    max-width: 100%;
    margin: 0 0 76px;
  }
  .detail-left .content-with-sidebar {
    display: block;
    position: relative;
  }
  .detail-left .content-main {
    padding-left: 0;
    margin-left: 55px;
    transition: margin-left 0.3s ease;
  }
  .detail-left .content-main.sidebar-open {
    margin-left: 422px;
  }
  .detail-left .sidebar {
    position: fixed;
    top: 290px;
    left: -367px;
    width: 367px;
    height: calc(100vh - 290px - 64px);
    z-index: 200;
    transition: left 0.3s ease;
    overflow: hidden;
    padding-left: 30px;
    padding-top: 30px;
  }
  .detail-left .sidebar.is-open {
    left: 0;
  }
  .sidebar-tab-btn:not(.sidebar-tab-btn--open) {
    display: flex !important;
    position: fixed;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    transition: left 0.3s ease;
  }
  .sidebar.is-open + .sidebar-tab-btn {
    left: 367px;
  }
  .sidebar-tab-btn--open {
    display: flex;
    position: fixed;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    transition: none;
    z-index: 201;
  }
}
/* 알립니다 */
.notice-wrap {
  margin-top: 80px;
}

.notice-wrap .notice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #222;
  margin-bottom: 0;
}

.notice-wrap .notice-head .sec-title {
  font-size: 28px;
  font-weight: 700;
}

.notice-wrap .board-info-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.notice-wrap .board-total {
  font-size: 20px;
  color: #666;
}

.notice-wrap .board-total strong {
  color: #294279;
  font-weight: 700;
}

.notice-wrap .notice-search-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
  margin-bottom: 40px;
}

.notice-wrap .notice-search-label {
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.notice-wrap .notice-search-area .search-input-box {
  position: relative;
}

.notice-wrap .notice-search-area .search-input-box .search-input {
  width: 260px;
  height: 48px;
  padding: 0 48px 0 16px;
  border-radius: 8px !important;
  font-weight: 500;
}

.notice-wrap .notice-search-area .search-input-box .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.notice-wrap .table-wrap {
  margin-bottom: 32px;
}

.notice-list-table td a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 470px;
}

.notice-list-table td a:hover {
  text-decoration: underline !important;
}

.notice-wrap .table-wrap th, .notice-wrap .table-wrap td {
  padding: 20px 16px;
}

.notice-wrap .notice-file-name {
  border-bottom: 2px solid #222;
  line-height: 1.2;
}

.notice-wrap a:hover {
  color: #294279 !important;
  text-decoration: none !important;
}

.notice-wrap a:hover .notice-file-name {
  border-bottom-color: #294279;
}

.notice-content {
  padding: 25px 35px;
  line-height: 2;
}

/* 사전 통계 */
.stats-wrap {
  margin-top: 60px;
}

.stats-wrap .head-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #222;
}

.stats-wrap .head-area h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.stats-wrap .stats-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-radius: 12px;
}

.stats-wrap .stats-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-top: 8px;
}

.stats-wrap .stats-side-nav {
  position: sticky;
  top: 24px;
  flex: 0 0 290px;
}

.stats-wrap .stats-side-nav-main {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  overflow: hidden;
  border-top: none;
}

.stats-wrap .stats-side-nav-main-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;
  background-color: #fff;
  color: #666;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  background: #f5f5f5;
}

.stats-wrap .stats-side-nav-main-title.active {
  background-color: var(--secondary-color);
  border-top: 1px solid var(--secondary-color);
  color: #fff;
}

.stats-wrap .stats-side-nav-main-arrow {
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 4px;
}

.stats-wrap .stats-side-nav-groups {
  padding: 16px 20px;
}

.stats-wrap .stats-side-nav-group + .stats-side-nav-group {
  margin-top: 20px;
}

.stats-wrap .stats-side-nav-heading {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-color);
}

.stats-wrap .stats-side-nav-group ul li a {
  display: block;
  position: relative;
  padding: 6px 0 6px 14px;
  font-size: 16px;
  line-height: 1.4;
  color: #666;
}

.stats-wrap .stats-side-nav-group ul li a::before {
  content: "-";
  position: absolute;
  left: 0;
  color: inherit;
}

.stats-wrap .stats-side-nav-group ul li a.active {
  color: var(--secondary-color);
  font-weight: 700;
}

.stats-wrap .stats-side-nav-group ul li a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.stats-wrap .stats-content {
  flex: 1;
  min-width: 0;
  padding-top: 25px;
}

.stats-wrap .stats-content .stats-group-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 32px;
  padding-bottom: 16px;
}

.stats-wrap .stats-content .stats-group-title:not(:first-child) {
  margin-top: 80px;
}

.stats-wrap .stats-section {
  scroll-margin-top: 24px;
}

.stats-wrap .stats-section.mt-90px {
  margin-top: 90px;
}

.stats-wrap .stats-section + .stats-section {
  margin-bottom: 30px;
  padding-bottom: 60px;
}

.stats-wrap .stats-section h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.stats-wrap .stats-section h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.stats-wrap .stats-section .stats-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.stats-wrap .stats-note-list li {
  font-size: 16px;
  color: #666;
}

.stats-wrap .stats-note-list li + li {
  margin-top: 6px;
}

.stats-wrap .stats-total-row {
  background-color: #f5f5f5;
}

/* 의견 제시 */
.opinion-wrap {
  margin-top: 74px;
}

.opinion-wrap h2.sec-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.opinion-wrap .opinion-desc {
  margin-bottom: 24px;
  font-size: 18px;
  color: #666;
}

.opinion-wrap .table-wrap th {
  vertical-align: middle;
}

.opinion-wrap .table-wrap td {
  padding: 24px 32px;
  color: #444;
}

.opinion-wrap #opinionTitle {
  width: 100%;
}

.opinion-wrap #opinionContent {
  width: 100%;
  resize: vertical;
}

.opinion-wrap .opinion-file-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

.opinion-wrap .caption-text {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.opinion-wrap .btn-area {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
/*# sourceMappingURL=style.css.map */