button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
}
:-moz-focusring { outline: none; }
* { -webkit-tap-highlight-color: transparent; }
:root {
--main: #B52F8B;
--accent: #9D0058;
--accent02: #B70669;
--deep-magenta: #840045;
--accent03: #B64291;
/* 포인트 색 */
--accent-weak: #E9C3D5;
--deep-navy: #001048;
--bg-navy: #344173;
/* 보조 포인트 */
--text: #1E2124;
--muted: #8C8F93;
--bg: #ffffff;
--card: #ffffff;
--line: #C6C6C6;
--radius: 12px;
--shadow: 0 6px 24px rgba(0, 0, 0, .06);
--light-gray: #8E8E8E;
--gray01: #6A6E77;
--star-mask: url('data:image/svg+xml;utf8,');
--focus: #B70669;
--focus-outer: #F9F4F8;
}
img {
max-width: 100%;
height: auto;
}
.txt-lightGray {
color: var(--light-gray) !important;
}
.txt-gray01 {
color: var(--gray01) !important;
}
.txt-navy {
color: var(--bg-navy) !important;
}
.bg-navy {
background-color: var(--bg-navy) !important;
}
.deep-navy {
color: var(--deep-navy) !important;
}
.btn-main {
background-color: var(--main) !important;
}
.primary-color {
color: var(--accent) !important;
}
.deep-magenta {
color: var(--accent03) !important;
}
.deep-magenta:hover {
border-bottom: 1px solid var(--accent03) !important;
}
.primary-info{
color: #9D0058;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
letter-spacing: -0.15px;
}
.helper-links .deep-magenta:hover {
border-bottom: none !important;
}
.highlight-magenta {
color: var(--accent02) !important;
}
input::placeholder {
color: #8E8E8E;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
input[type="checkbox"] {
accent-color: var(--main);
width: 20px;
height: 20px;
border-radius: 4px;
}
input[type="text"], input[type="email"] {
/*color: #333;*/
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
padding: 0 12px !important;
}
input[type="text"]::placeholder{
font-family: "Pretendard";
font-size: 16px !important;
font-weight: 400;
}
/*common.css*/
html.popup-lock {
overflow: hidden;
padding-right: var(--sbw, 0px);
}
header {
border-bottom: 1px solid #ddd;
position: sticky;
top: 0;
z-index: 9999;
background: #fff;
}
.header-container {
max-width: 1400px;
margin: 0 auto;
}
.mo-logo {
display: none;
}
.top-bar .top-box p {
color: #1E2124;
font-family: 'Pretendard';
font-size: 15px;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
}
.top-bar {
background: #f5f8fb;
font-size: 12px;
padding: 4px 0;
}
.top-bar .top-box {
display: flex;
gap: 10px;
}
.top-bar .header-container {
display: flex;
gap: 12px;
}
.top-bar .header-container p {
color: #1E2124;
font-family: 'Pretendard';
font-size: 15px;
font-weight: 500;
line-height: 150%;
}
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
}
.logo-text-group {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-title {
font-size: 16px;
font-weight: bold;
}
.logo-sub {
font-size: 12px;
color: #666;
}
.header-nav {
border-top: 1px solid #E1DFDE;
/*border-bottom: 1px solid #E1DFDE;*/
position: relative;
height: 55px;
}
nav .header-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border-right: 1px solid #E1DFDE;
}
nav ul {
display: flex;
width: 100%;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 55px;
height: 55px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
}
.hamburger:hover {
background-color: #f2f2f2;
}
.gnb-backdrop {
position: fixed;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.gnb-backdrop.active {
opacity: 1;
visibility: visible;
}
.sitemap-overlay {
display: none; /* 기존 코드 */
position: absolute;
/*top: 170px;*/
left: 0;
width: 100%;
height: auto;
background: #fff;
z-index: 1001;
overflow-y: auto;
border-top: 1px solid #E1DFDE;
}
.sitemap-overlay.active {
display: block;
}
.sitemap-panel {
max-width: 1400px;
margin: 0 auto;
/* padding: 22px 0 64px; */
height: 100%;
}
.sitemap-container {
display: flex;
height: 100%;
}
.sitemap-columns {
display: flex;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
/* 변경 */
.sitemap-columns .list-pd {
display: flex;
flex-direction: column;
gap: 23px;
width: 100%;
padding: 22px 0;
justify-content: center;
align-items: center;
}
.sitemap-columns .list-pd ul {
padding-top: 10px;
text-align: center;
}
.sitemap-columns .list-pd a {
text-decoration: none;
color: inherit;
}
.sitemap-columns .list-pd li:hover a,
.sitemap-columns .list-pd a:focus-visible,
.sitemap-columns .list-pd li:has(a:focus-visible) a {
font-weight: 800;
color: #434953;
text-decoration-line: underline;
}
.sitemap-columns .list-pd a:focus-visible {
outline: 2px solid rgba(67,73,83,.35);
outline-offset: 2px;
}
.sitemap-columns .list-pd ul li a {
color: #434953;
font-family: 'Pretendard';
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.sitemap-columns .flex-box.active > a {
color: #B70669;
font-weight: 700;
}
.sitemap-columns .list-box:nth-child(even) {
background-color: #F8F8F8;
}
.sitemap-columns .list-pd strong {
font-size: 20px;
color: #052B57;
margin-bottom: 10px;
font-weight: 800;
font-family: 'NanumSquareNeo';
}
.sitemap-columns .list-pd a {
color: #444;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
font-family: 'Pretendard';
color: #052B57;
text-align: center;
font-size: 17px;
font-weight: 700;
}
.sitemap-columns .list-pd a ul li a {
color: #434953;
text-align: center;
font-family: 'Pretendard';
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.sitemap-columns .list-pd a:hover {
color: #B70669;
}
.sitemap-columns .list-box {
width: 100%;
}
.close-sitemap {
display: none;
}
.mo-menu,
.mo-myPageMenu {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100vh;
background: #fff;
overflow-y: auto;
}
.mo-menu.active,
.mo-myPageMenu.active {
display: block;
}
.mo-menu-header,
.mo-myPageMenu .mo-menu-header {
padding: 5px 16px;
border-bottom: 1px solid #ddd;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
color: #444;
}
.mo-menu-header {
gap: 20px;
}
.mo-myPageMenu .mo-menu-header {
gap: 10px;
}
.mo-menu-header .divider,
.mo-myPageMenu .mo-menu-header .divider {
width: 1px;
height: 16px;
flex-shrink: 0;
color: #CCC;
}
.mo-menu-header .divider {
margin-bottom: 0;
width: auto;
height: auto;
border-top: none;
}
.mo-menu-header {
padding: 17px 16px;
}
.mo-menu-header .join a,
.mo-menu-header .login a {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 700;
line-height: 150%;
}
.mo-menu-header .join,
.mo-menu-header .login {
display: flex;
align-items: center;
gap: 8px;
}
.depth1 > li {
border-bottom: 1px solid #eee;
}
.depth1-title {
padding: 14px 22px;
font-weight: bold;
font-size: 18px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s, color 0.3s;
}
.depth1.active .depth1-title {
background: #F9F4F8;
color: #B70669;
}
.depth2-wrapper {
display: none;
background: #fff;
}
.depth1.active .depth2-wrapper {
display: block;
padding: 15px;
}
.depth2-title {
padding: 13px 12px;
background: #fff;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: #001048;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 700;
}
.depth2-title a {
color: #001048 !important;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 700;
}
.depth2-item.active .depth2-title {
background: #B70669;
color: #fff;
display: flex;
padding: 14px 12px 14px 14px;
align-items: center;
gap: 4px;
align-self: stretch;
border-radius: 6px;
}
.depth3 {
display: none;
background: #f9f9f9;
padding: 12px 20px;
}
.depth3 a {
color: #434953;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
}
.depth3 a:hover {
text-decoration: underline;
font-weight: 800;
}
.depth2-item.active .depth3 {
display: block;
border-radius: 0 0 5px 5px;
}
.depth3 li {
color: #434953;
font-family: 'Pretendard';
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 37px;
list-style: disc inside;
}
.depth3 li.active {
text-decoration: underline;
font-weight: 700;
}
.toggle-icon {
font-size: 16px;
margin-left: 8px;
}
.mo-menu-close {
border: none;
cursor: pointer;
color: #333;
margin-left: auto;
}
.mo-menu-close img {
width: 22px;
}
.mo-menu .depth1,
.mo-myPageMenu .depth1 {
display: flex;
width: 100%;
flex-direction: column;
}
.hamburger {
background-image: url('/img/designIcon/hamburger.png');
background-position: center;
background-repeat: no-repeat;
}
.hamburger.hidden-img {
visibility: hidden;
}
.hamburger.active {
background-image: url('/img/designIcon/mo-menu_closeBtn.png');
background-position: center;
background-repeat: no-repeat;
}
.goto-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 20PX;
}
.goto-btn a {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 700;
line-height: 150%;
}
.goto-btn a:hover {
border-bottom: 1px solid #111;
}
.login,
.join,
.mypage,
.certification {
display: flex;
align-items: center;
gap: 8px;
}
.main-top {
display: flex;
align-items: flex-start;
margin-top: 62px;
justify-content: space-between;
gap: 30px;
}
.main-top .login-box {
display: flex;
padding: 37px 37px 34px 37px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 28px;
border-radius: 15px;
border: 1px solid #EAEAEA;
background: #FFF;
box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.04);
}
.main-top .login-box .btn-box {
display: flex;
flex-direction: column;
gap: 28px;
}
.main-top .login-box .mo-btn-box {
display: none;
}
.main-top .login-box p {
color: #222;
font-family: "NanumSquareNeo";
font-size: 19px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}
.main-top .login-box .login-btn {
display: flex;
width: 336px;
height: 46px;
padding: 13px 21px;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #B70669;
color: #FFF;
text-align: center;
font-family: "NanumSquareNeo";
font-size: 16px;
font-weight: 900;
line-height: 14px;
}
.main-top .login-box .login-btn:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.main-top .login-box .goto-loginBox {
display: flex;
gap: 10px;
margin: 0 auto;
}
.main-top .login-box .goto-loginBox a {
color: #363636;
text-align: center;
font-family: "NanumSquareNeo";
font-size: 13.5px;
font-weight: 700;
line-height: 150%;
}
.main-top .login-box .goto-loginBox a:hover {
border-bottom: 1px solid #111;
}
.logout-card {
max-width: 410px;
width: 100%;
border: 1px solid #eee;
border-radius: 16px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
overflow: hidden;
margin-top: 10px;
}
.logout-head {
display: flex;
height: 60px;
justify-content: space-between;
align-items: center;
padding: 23px;
background: #F5F7FB;
}
.user-name {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1e2124;
}
.user-name .name {
color: #9D0058;
font-size: 22px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}
.joined {
margin: 0;
font-size: 13px;
color: #7a8090;
}
/* dl 그리드 */
.logout-box {
display: grid;
grid-template-columns: 120px 1fr;
row-gap: 14px;
column-gap: 16px;
margin: 20px 31px 0 31px;
}
.logout-box dt {
color: #6A6E77;
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 22px; /* 137.5% */
}
.logout-box dd {
color: #111;
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 22px;
display: flex;
gap: 4px;
align-items: center;
justify-content: flex-end;
}
.logout-head .joined time {
color: #6A6E77;
text-align: right;
font-family: "Pretendard";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
}
.hours {
font-weight: 800;
font-size: 22px;
letter-spacing: 0.2px;
color: #d61b72;
}
.highlight {
color: #B70669;
text-align: right;
font-family: "Pretendard";
font-size: 23px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
/* 버튼 영역 */
.logout-actions {
display: flex;
gap: 12px;
margin: 20px 31px 30px 31px;
}
.btn {
flex: 1;
display: inline-flex;
justify-content: center;
align-items: center;
height: 44px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
border: 1px solid #d7d9df;
color: #1e2124;
/*background: #fff;*/
}
.btn-ghost {
border-radius: 6px;
border: 1.5px solid #58616A;
color: #363636;
/*font-weight: 800;*/
}
.main-top .logout-card .logout-actions .btn-primary {
color: #B70669;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: 14px;
border-radius: 6px;
border: 1.5px solid #B70669;
}
.main-top .logout-card .logout-actions .btn-primary:hover {
outline: 1.5px solid #B70669;
background: #FDF2FB !important;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.btn-ghost:hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.main-top .logout-box .txt-box dt {
color: #222;
font-size: 19px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}
.main-top .txt-box dt strong {
color: #9D0058;
font-size: 22px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}
.main-top .txt-box dd span {
color: #6A6E77;
text-align: right;
font-family: "Pretendard";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
}
.main-bannerWrapper {
max-width: 872px;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 33px;
}
.banner-box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
/* 줄바꿈 방지 */
gap: 20px;
width: 100%;
min-height: 200px;
}
.banner-box .txt-box {
flex: 1 1 0;
min-width: 0;
max-width: 55%;
}
.banner-box .txt-box p,
.banner-box .txt-box .pc-mainTitle {
font-size: clamp(16px, 2vw, 26px);
line-height: 1.4;
word-break: keep-all;
}
.banner-box img {
max-width: 45%;
height: auto;
object-fit: contain;
}
.main-bannerWrapper .txt-box {
display: flex;
flex-direction: column;
gap: 15px;
}
.main-bannerWrapper .txt-box p {
color: #1A3280;
font-family: "NanumSquareNeo";
font-size: 26px;
font-weight: 700;
line-height: 55px;
letter-spacing: -0.78px;
}
.main-bannerWrapper .txt-box .pc-mainTitle {
color: #000;
font-family: "NanumSquareNeo";
font-size: 39px;
font-style: normal;
font-weight: 800;
line-height: 52px;
letter-spacing: -1.17px;
}
.select-group {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.select-group .text-label {
color: #15152F;
font-family: "NanumSquareNeo";
font-size: 18px;
font-weight: 700;
letter-spacing: -0.54px;
}
.custom-select {
position: relative;
display: inline-block;
border-bottom: 2px solid #c40064;
}
.custom-select select {
appearance: none;
/* 기본 브라우저 스타일 제거 */
-webkit-appearance: none;
-moz-appearance: none;
padding: 4px 25px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: #B70669;
font-family: "NanumSquareNeo";
font-size: 19px;
font-weight: 900;
letter-spacing: -0.57px;
}
.custom-select::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s ease;
width: 10px;
height: 10px;
background: url('/img/designIcon/arrow_right.png') no-repeat center;
font-size: 12px;
pointer-events: none;
}
.custom-select.open::after {
transform: translateY(-50%) rotate(180deg);
}
/*.custom-select select:focus {*/
/* outline: none;*/
/*}*/
.text-label {
color: #222;
font-weight: 400;
font-size: 16px;
}
.search {
background-color: #c40064;
color: #fff;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
}
.search:hover{
outline: 1.5px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.search img {
width: 15px;
height: 15px;
}
option {
color: #000;
font-weight: 300;
font-family: "Pretendard";
}
option:hover {
background-color: #1C90FB;
color: #fff;
}
.center {
display: flex;
flex-wrap: wrap;
/* 줄바꿈 허용 */
justify-content: space-between;
gap: 64px;
margin-top: 48px;
}
.center .card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
flex: 1 1 500px;
/* 줄어들 수 있고, 최소 600px */
max-width: 100%;
width: 100%;
}
.center .card {
display: flex;
height: 230px;
width: 100%;
justify-content: center;
border-radius: 15px;
border: 1px solid #DDD;
background: #FFF;
min-width: 0;
}
.center .card .card-txtBox {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
padding: 22px 25px;
box-sizing: border-box;
min-width: 0;
height: 100%;
}
.center .card .info-box01,
.center .card .info-box02 {
display: flex;
flex-direction: column;
gap: 10px;
}
.center .card .info-box01 .card-title {
display: flex;
gap: 10px;
align-items: center;
}
.center .card .location {
display: inline-flex;
height: 20px;
padding: 0 6px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 4px;
background: #B70669;
color: white;
font-family: "Pretendard";
font-size: 13px;
font-weight: 800;
line-height: 22px;
}
.center .card .center .card-title {
display: flex;
align-items: center;
padding-bottom: 6px;
gap: 9px;
}
.center .card .org {
color: #333;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
line-height: 28px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 100%;
}
.center .card .title {
font-size: 22px;
color: #111;
font-family: "Pretendard";
font-weight: 700;
line-height: 28px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.center .card .info,
.center .card .people {
display: flex;
align-items: center;
gap: 11px;
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
}
.center .card .people span {
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 22px;
}
.center .card .people .point {
color: #B70669 !important;
}
.center .card-rightBox {
display: flex;
flex-direction: column;
flex: 0 0 410px;
/* 고정 너비 */
width: 410px;
gap: 20px;
}
.center .card-rightBox .card-banner {
display: flex;
flex-direction: column;
padding: 32px 158px 42px 32px;
align-self: stretch;
border-radius: 12px;
background: linear-gradient(153deg, #CD4982 24.2%, #A9266F 48.94%, #463D97 91.36%);
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
}
.center .card-rightBox .card-banner .hand-img {
position: absolute;
right: 0;
top: 0;
}
.center .card-rightBox .card-banner .txt-box {
display: flex;
flex-direction: column;
gap: 9px;
}
.center .card-rightBox .card-banner .button-link {
width: 150px;
height: 38px;
flex-shrink: 0;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.20);
margin-top: 33px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
color: #FFF;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 25.6px;
letter-spacing: -0.3px;
}
.center .card-rightBox .card-banner .button-link img {transition: 0.3s;}
.center .card-rightBox .card-banner .button-link:hover img {
transform: translateX(5px);
}
.center .card-rightBox .card-banner .txt-box h3 {
color: #FFF;
font-family: "NanumSquareNeo";
font-size: 24px;
font-weight: 900;
line-height: 32px;
letter-spacing: -0.3px;
}
.center .card-rightBox .card-banner .txt-box p {
color: #FFF;
font-family: "Pretendard";
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: -0.3px;
}
.center .card-rightBox .rank-box {
display: flex;
padding: 26px 22px;
flex-direction: column;
align-items: flex-start;
gap: 23px;
flex-shrink: 0;
border-radius: 14px;
background: #F7F4F9;
}
.center .card-rightBox .rank-box .rank {
border-radius: 4px;
background: #FFF;
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
}
.center .card-rightBox .rank-box:hover .rank {
outline: 1px solid #A2005A;
outline-offset:-1px;
}
.center .card-rightBox .rank-box h3 {
color: #A2005A;
font-family: "NanumSquareNeo";
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}
.center .card-rightBox .rank-box .rank p {
color: #111;
font-family: "Pretendard";
font-size: 16px;
font-weight: 600;
line-height: 150%;
gap: 10px;
display: block;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 100%;
min-width: 0;
}
.center .card-rightBox .rank-box .rank img {
width: 18px;
margin-right: 8px;
flex-shrink: 0;
max-width: 20px;
height: auto;
display: inline-block;
}
.quick-menu {
display: flex;
flex-wrap: wrap;
background: #f9f9f9;
border-radius: 12px;
justify-content: space-between;
/*overflow: hidden;*/
margin: 45px 0;
}
.quick-menu a {
flex: 0 0 25%;
max-width: 25%;
display: flex;
align-items: center;
padding: 20px 0;
text-align: center;
font-weight: 600;
position: relative;
border-bottom: none;
justify-content: center;
gap: 20px;
color: #000;
font-family: "NanumSquareNeo";
font-size: 19px;
font-weight: 800;
line-height: 32px;
/* 168.421% */
letter-spacing: -0.3px;
}
.quick-menu a img {
transition: 0.3s;
}
.quick-menu a:hover img {
transform: translateY(-8px);
}
.quick-menu a:not(:nth-child(4)):after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 40px;
width: 1px;
background: #D4D4D4;
}
.vms-container {
display: flex;
gap: 64px;
margin: auto;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 80px;
}
.notice-area {
flex: 1 1 700px;
display: flex;
width: 100%;
flex-direction: column;
border-radius: 15px;
border: 1px solid #DDD;
background: #FFF;
/*overflow: hidden;*/
}
.notice-area nav {
border-top: 0;
border-bottom: 1px solid #E1DFDE;
}
.notice-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr) 55px;
border-top: 0;
border-bottom: 1px solid #E1DFDE;
gap: 0;
}
.notice-tab {
flex: 1 1 0;
height: 54px;
font-family: "NanumSquareNeo";
font-size: 18px;
font-weight: 800;
color: #666;
background: transparent;
cursor: pointer;
position: relative;
min-width: 0;
}
.notice-tab:hover:not(.plus,.active) {
background: #f2f2f2;
border-radius: 10px;
}
.notice-tab.plus {
flex: 0 0 55px;
width: 55px;
min-width: 55px;
max-width: 55px;
padding-left: 0;
padding-right: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-left: 1px solid #DDDDDD;
background-color: #F8F8F8;
border-radius: 0 15px 0 0;
}
.notice-tab.plus img {
transition: 0.3s;
}
.notice-tab.plus:hover img {
transform: rotate(90deg);
}
.mo-tab {
display: none;
margin-top: 20px;
}
.notice-tab.active {
background: #47568C;
color: #FFF;
font-weight: 900;
border-radius: 10px;
box-shadow: 0 5px 10px 0 #F1F2FA;
}
.notice-tab:nth-child(1) {
border-radius: 15px 10px 10px 0;
}
.notice-tab:nth-child(4) {
border-radius: 10px 0 0 10px;
}
.notice-tab.plus img {
width: 16px;
height: 17px;
}
.notice-tabs .notice-tab:not(.plus):not(.no-after):not(:last-of-type)::after {
content: '|';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #ccc;
}
.notice-tabs .notice-tab.no-after::after {
content: none;
}
.notice-tab-content {
display: none;
padding: 38px 40px 28px 40px;
}
.notice-tab-content.active {
display: block;
}
.notice-tab-content a:link {
position: relative;
}
/*.notice-tab-content a:link:before {*/
/* content: '';*/
/* position: absolute;*/
/* bottom: 0;*/
/* left: 0;*/
/* width: 0;*/
/* height: 1px;*/
/* background: #111;*/
/* transition: 0.3s;*/
/*}*/
.notice-tab-content a:link:hover:before {
width: 100%;
}
.mo-only {
display: none;
}
.highlight-box {
display: flex;
margin-bottom: 22px;
align-items: center;
gap: 24px;
padding-bottom: 29px;
border-bottom: 1px dashed;
}
.highlight-box .icon {
width: 74px;
height: 72px;
background-color: #F2F4F9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.highlight-box .text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.highlight-box .text strong {
color: #000;
font-family: "Pretendard";
font-size: 21px;
font-style: normal;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.highlight-box .text p {
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 23px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.notice-list{
display: flex;
flex-direction: column;
gap: 10px;
}
.notice-list li a b {
margin-bottom: 12px;
color: #111;
font-family: "Pretendard";
font-size: 17px;
font-weight: 500;
line-height: 28px;
}
.notice-list li a b:hover{
text-decoration: underline;
}
.stats-area {
/* flex: 0 0 280px; */
background: #f2f6fb;
border-radius: 12px;
font-size: 14px;
max-width: 410px;
width: 100%;
}
.stats-pt {
padding: 22px 29px;
}
.stats-pt span{
color: #999;
text-align: right;
font-family: "Pretendard";
font-size: 14px;
font-weight: 500;
}
.stats-area h2 {
color: #001F82;
font-family: "NanumSquareNeo";
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 150%;
letter-spacing: -0.3px;
margin-bottom: 18px;
}
.stats-area ul {
list-style: none;
margin-bottom: 10px;
display: flex;
padding: 21px 20px;
flex-direction: column;
gap: 15px;
border-radius: 4px;
background: #FFF;
box-sizing: border-box;
}
.stats-area li {
display: flex;
justify-content: space-between;
}
.stats-area li .title {
color: #111;
font-family: "Pretendard";
font-size: 16px;
font-weight: 600;
line-height: 22px;
}
.stats-area strong {
color: #001F82;
text-align: right;
font-family: "Pretendard";
font-size: 23px;
font-weight: 700;
line-height: 22px;
}
.stats-area strong span {
color: #000;
font-family: "Pretendard";
font-size: 14px;
font-weight: 500;
line-height: 22px;
padding-left: 5px;
}
.stats-area .highlight {
color: #B70669;
font-family: "Pretendard";
font-size: 30px;
font-weight: 700;
line-height: 22px;
}
.stats-area .highlight-black {
color: #111;
font-family: "Pretendard";
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
footer {
background: #40465D;
display: flex;
padding: 35px 0 49px 0;
flex-direction: column;
align-items: center;
gap: 25px;
flex-shrink: 0;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
width: 100%;
}
.footer-links {
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding-bottom: 25px;
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.footer-links li a {
color: #FFF;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: 0;
}
.footer-links li .highlight-pink {
color: #FFD4E7;
font-family: "Pretendard";
font-size: 17px;
font-weight: 600;
line-height: 150%;
letter-spacing: 0;
}
.footer-links li a:hover {
text-decoration: underline;
}
.footer-info {
flex: 1 ;
line-height: 1.6;
display: flex;
/*flex-direction: column;*/
gap: 30px;
align-items: center;
}
.footer-info img{
width: 10%;
}
.footer-container .logo-infoWrap{
display: flex;
width: 100% ;
justify-content: space-between;
}
.footer-info p {
color: rgba(255, 255, 255, 0.80);
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: 0;
}
.footer-info p a {
color: rgba(255, 255, 255, 0.80);
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: 0;
}
.footer-mark {
text-align: right;
display: flex;
align-items: center;
gap: 30px;
}
/** 2025-08-05 메뉴 구조 변경 후 추가 **/
.gnb {
position: relative;
}
.depth1-wrap {
display: flex;
list-style: none;
padding: 0;
margin: 0;
justify-content: space-between;
height: 100%;
}
.depth1-wrap .depth1-item {
display: flex;
width: 100%;
justify-content: center;
height: 100%;
border-right: 1px solid #E1DFDE;
align-items: center;
cursor: pointer;
}
.depth1-wrap .depth1-item:focus,
.depth1-wrap .depth1-item:focus-within,
.depth1-wrap .depth1-item:hover {
background-color: #B70669;
}
.depth1-wrap .depth1-item:hover .depth1,
.depth1-wrap .depth1-item:focus .depth1,
.depth1-wrap .depth1-item:focus-within .depth1 {
color: white;
}
.depth1-wrap .depth1-item:nth-child(1) {
border-left: 1px solid #E1DFDE;
}
.depth1-wrap .depth1-item .depth1 {
color: #111;
font-family: "NanumSquareNeo";
font-size: 20px;
font-weight: 800;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.header-container .fulldropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100vw;
background: #fff;
border-top: 1px solid #ccc;
padding: 40px 0 64px 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
justify-content: space-between;
gap: 60px;
}
.depth1-item:hover .fulldropdown,
.depth1:focus + .fulldropdown {
display: flex;
}
.menu-info {
max-width: 250px;
width: 100%;
position: relative;
}
.menu-info img {
position: absolute;
z-index: -1;
right: 0;
bottom: 0;
}
.menu-info h2 {
color: #001048;
font-family: "NanumSquareNeo";
font-size: 28px;
font-weight: 800;
line-height: 50px;
letter-spacing: -0.28px;
}
.menu-info p {
color: #6A6E77;
font-family: "NanumSquareNeo";
font-size: 13px;
font-weight: 700;
line-height: 19px;
}
.submenu-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
max-width: 1043px;
width: 100%;
}
.submenu-list li a {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 7px;
border: 1.5px solid #E1E7F2;
background: #FFF;
border-radius: 8px;
padding: 19px 25px;
color: #363B4F;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 700;
transition: 0.3s;
}
.submenu-list li a::after {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background: url('/img/designIcon/menu-arrowRight.png') no-repeat center/contain;
margin-left: 8px;
vertical-align: middle;
}
.submenu-list li a:hover,
.submenu-list li a:focus,
.submenu-list li a.active {
border-color: #B70669;
background: #F9F4F8;
color: #B70669;
}
.submenu-list li a:hover::after,
.submenu-list li a:focus::after,
.submenu-list li a.active::after {
background-image: url('/img/designIcon/menu-arrowRight-purple.png');
}
.menu-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.flex-box {
display: flex;
flex-direction: column;
justify-content: center;
}
.mo-mainTitle {
display: none;
}
.my-pageBtn {
display: none;
}
.timer-box {
display: flex;
align-items: center;
border-radius: 4px;
font-family: sans-serif;
width: fit-content;
gap: 10px;
}
.time-display {
display: flex;
align-items: center;
color: #B70669;
font-weight: bold;
font-size: 18px;
gap: 6px;
}
.time-text {
display: flex;
}
.time-text span {
font-family: "NanumSquareNeo";
font-weight: 900;
font-size: 16px;
}
.extend-btn {
border: 2px solid #B70669;
background-color: white;
color: #B70669;
padding: 4px 10px;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
font-family: 'Pretendard';
}
.main-header.login .extend-btn {
background-color: #F9F4F8;
color: #B70669;
font-family: 'Pretendard';
font-size: 14px;
font-weight: 800;
}
.main-header.login .extend-btn:hover {
background: #FDF2FB;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.main-header.login .time-text {
font-size: 18px;
display: flex;
}
.main-header.login .time-text span {
font-weight: 900;
font-family: "NanumSquareNeo";
}
/* =========================
서브01
========================= */
.banner {
background: #F7F4F9;
position: relative;
}
.banner__inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 20px;
gap: 16px;
align-items: center;
height: 238px;
overflow: hidden;
}
.banner__meta {
display: flex;
flex-direction: column;
gap: 6px;
}
.banner__eyebrow {
color: #192C67;
font-family: "NanumSquareNeo";
font-size: 23px;
font-style: normal;
font-weight: 700;
line-height: 60px;
letter-spacing: -0.69px;
}
.banner__title {
color: #000;
font-family: "NanumSquareNeo";
font-size: 45px;
font-style: normal;
font-weight: 800;
letter-spacing: -1.35px;
}
.banner__art {
height: auto;
object-fit: contain;
position: relative;
top: 24px;
}
/* =========================
하단 툴바(브레드크럼/셀렉트/액션)
========================= */
.toolbar {
background: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.toolbar__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
min-height: 52px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
/* 브레드크럼 */
.crumbs {
display: flex;
align-items: center;
gap: 10px;
height: 100%;
border-top: 0;
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
}
.crumbs__home {
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 100%;
border-radius: 6px;
}
.crumbs__sep {
font-size: 12px;
}
/* 커스텀 셀렉트 그룹 */
.selects {
display: flex;
align-items: center;
min-width: 0;
height: 100%;
}
.select-wrap {
height: 100%;
position: relative;
display: inline-flex;
align-items: center;
background: #fff;
min-width: 160px;
max-width: 230px;
width: 100%;
border-right: 1px solid #DDD;
}
/*.select-wrap:focus-within {*/
/* outline: 2px solid #d7dce3;*/
/* outline-offset: 2px;*/
/*}*/
.select-wrap select {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 100%;
cursor: pointer;
height: 100%;
color: #4C5160;
font-size: 17px;
font-weight: 700;
padding-left: 12px;
}
.select-wrap .chev {
pointer-events: none;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* sub01 액션 버튼 */
.toolbar .actions {
display: flex;
align-items: center;
gap: 10px;
}
.toolbar .actions .divider {
color: #ccc;
font-weight: 700;
border-top: none;
margin-bottom: 0;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
cursor: pointer;
}
.icon-btn:hover {
background: #fff;
}
/* 보조: 스크린리더 전용 텍스트 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sub01 .title-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 59px;
}
.sub01 .title-box h2 {
color: #9D0058;
text-align: center;
font-size: 32px;
font-family: 'Pretendard';
font-weight: 700;
line-height: 44px;
margin-top: 32px;
position: relative;
}
.sub01 .title-box h2 span {
color: #001048;
text-align: center;
font-size: 32px;
font-family: 'Pretendard';
font-weight: 700;
line-height: 44px;
margin-top: 32px;
position: relative;
}
.sub01 .title-box h2 .left-comma {
position: absolute;
left: -52px;
width: 32px;
}
.sub01 .title-box h2 .right-comma {
position: absolute;
right: -52px;
top: 0;
width: 32px;
}
.sub01 .title-box p {
font-family: 'Pretendard';
text-align: center;
color: #333;
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin-top: 45px;
}
.sub01 .title-box p strong {
color: #333;
font-family: 'Pretendard';
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 30px;
}
.sub01 .title-box b {
color: #6A6E77;
text-align: center;
font-family: 'Pretendard';
font-size: 13px;
font-weight: 400;
margin-top: 25px;
}
#v-info .title-box {
padding-bottom: 53px;
border-bottom: 1px dashed #CCCCCC;
}
.under-divider {
width: 45px;
height: 2px;
flex-shrink: 0;
background: #333;
}
.sub01 .center {
display: flex;
flex-direction: column;
gap: 0;
}
.sub01 .center .col-reverseBox {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 63px;
}
.sub01 .center .left-box, .sub01 .center .right-box {
display: flex;
flex-direction: column;
gap: 33px;
}
.sub01 .center .left-box .lt-flexBox:first-child .card-box {
position: relative;
}
.sub01 .center .left-box .lt-flexBox:first-child .card-box::after {
content: "";
position: absolute;
left: 70%;
width: 80%;
bottom: 60%;
z-index: -1;
border: 1px dashed #CDCDCD;
}
.sub01 .center .left-box .lt-flexBox:nth-child(2) .card-box {
position: relative;
}
.sub01 .center .left-box .lt-flexBox:nth-child(2) .card-box::after {
content: "";
position: absolute;
left: 70%;
width: 80%;
bottom: 40%;
z-index: -1;
border: 1px dashed #CDCDCD;
}
.sub01 .center .right-box .rt-flexBox:first-child .card-box {
position: relative;
}
.sub01 .center .right-box .rt-flexBox:first-child .card-box::after {
content: "";
position: absolute;
right: 70%;
width: 80%;
bottom: 60%;
z-index: -1;
border: 1px dashed #CDCDCD;
}
.sub01 .center .right-box .rt-flexBox:nth-child(2) .card-box {
position: relative;
}
.sub01 .center .right-box .rt-flexBox:nth-child(2) .card-box::after {
content: "";
position: absolute;
right: 70%;
width: 80%;
bottom: 40%;
z-index: -1;
border: 1px dashed #CDCDCD;
}
.sub01 .center .card-box {
border-radius: 12px;
border: 1px solid #DBDBDB;
background: #FFF;
box-shadow: 0 5px 10px 0 #F1F2FA;
height: 155px;
flex-shrink: 0;
width: 387px;
padding: 19px 30px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sub01 .center .card-box .magenta {
color: #B70669;
background-color: transparent;
}
.sub01 .center .card-box h3 {
color: #001F82;
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 28px;
}
.sub01 .center .card-box p {
color: #333;
font-family: 'Pretendard';
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 25px;
}
.sub01 .bt-effect .effect-card {
display: flex;
gap: 32px;
margin-top: 22px;
margin-bottom: 49px;
}
.sub01 .bt-effect .effect-card .card {
width: 445.211px;
}
.sub01 .bt-effect .effect-card .card-title {
background-color: #F4F4F4;
height: 118px;
flex-shrink: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 14px 10px 0 0;
padding: 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.sub01 .bt-effect .effect-card .card-title h3 {
color: #001048;
font-size: 23px;
font-weight: 800;
line-height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.sub01 .bt-effect .effect-card p {
flex-shrink: 0;
border-radius: 0 0 10px 10px;
background: #FFF;
color: #333;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 400;
line-height: 33px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 27px 37px;
}
/* 리스트 컨테이너: 두 열 플렉스 */
.sub01 .bt-rule .v-rules {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
counter-reset: rule;
margin-top: 22px;
margin-bottom: 120px;
}
/* 카드 */
.sub01 .bt-rule .v-rules li {
position: relative;
flex: 0 0 calc(50% - 10px);
background: #F4F4F4;
border-radius: 6px;
min-height: 64px;
display: flex;
align-items: center;
padding: 18px 24px 18px 92px;
box-sizing: border-box;
height: 88px;
}
/* 왼쪽 포인트 라인(장식) */
.sub01 .bt-rule .v-rules li::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #C0176B;
border-radius: 2px;
}
/* 번호 태그 */
.sub01 .bt-rule .v-rules .num {
position: absolute;
left: 44px;
top: 50%;
transform: translateY(-50%);
color: #9D0058;
font-family: 'Pretendard';
font-size: 20px;
font-weight: 700;
}
/* 문장 */
.sub01 .bt-rule .v-rules p {
color: #333;
font-family: 'Pretendard';
font-size: 20px;
font-weight: 600;
}
/* =========================
로그인페이지
========================= */
/* 탭 헤더 */
#login .tabs {
position: relative;
border-bottom: 1px solid var(--line);
display: flex;
gap: 8px;
}
#login .tabs::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--line);
}
#login .tab {
appearance: none;
border: 0;
background: transparent;
cursor: pointer;
padding: 14px 18px;
font-size: 16px;
font-weight: 700;
color: var(--muted);
border-bottom: 4px solid transparent;
border-radius: 8px 8px 0 0;
width: 100%;
color: #6A6E77;
font-family: 'Pretendard';
font-size: 21px;
font-weight: 700;
line-height: 150%;
}
#login .tab[aria-selected="true"] {
color: var(--accent03);
border-color: var(--accent03);
}
/*#login .tab:focus-visible {*/
/* outline: none;*/
/* box-shadow: var(--focus);*/
/*}*/
#login .tab:hover {
color: var(--accent);
}
/* 카드 */
.panel {
border-top: 0;
margin-top: -1px;
margin-bottom: 100px;
}
#blood .panel {
margin-top: 55px;
}
.panel[hidden] {
display: none;
}
/* 기본 로그인 폼 */
.login-content{
display: flex;
/*flex-direction: column;*/
align-items: center;
gap: 60px;
border-radius: 20px;
border: 1px solid #D8D8D8;
/*max-width: 1200px;*/
width: 100%;
padding: 50px 30px;
/*height: 550px;*/
margin: 0 auto;
}
.login-note {
text-align: center;
font-size: 13px;
line-height: 1.5;
padding: 45px;
color: #1D1D1D;
text-align: center;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.form-row {
margin-bottom: 24px;
}
#loginForm label {
display: block;
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 15px;
font-weight: 700;
line-height: 150%;
margin-bottom: 12px;
}
#loginForm input[type="text"],
#loginForm input[type="password"],
#join_enterInformation input[type="text"],
#secede input[type="text"]{
width: 100%;
height: 44px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 0 12px;
font-size: 16px;
background: #fff;
}
#loginForm input[type="text"]::placeholder,
#loginForm input[type="password"]::placeholder,
#join_enterInformation input[type="text"],
#secede input[type="text"]{
font-size: 16px;
}
/*#loginForm input:focus {*/
/* outline: none;*/
/* box-shadow: var(--focus);*/
/* border-color: var(--accent);*/
/*}*/
.captcha-line {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
}
.captcha-canvas {
width: 100%;
height: 44px;
border: 1px solid var(--line);
border-radius: 6px;
background: #f7f7f7;
display: block;
}
.captcha-actions {
display: flex;
gap: 6px;
}
/*.icon-btn:focus-visible {*/
/* outline: none;*/
/* box-shadow: var(--focus);*/
/*}*/
#login .btn-box {
width: 180px;
margin: 0 auto;
}
.submit {
display: flex;
align-items: center;
width: 100%;
height: 46px;
margin-top: 24px;
background: var(--accent03);
border: 0;
border-radius: 6px;
cursor: pointer;
color: #FFF !important;
font-family: 'Pretendard';
font-size: 19px;
font-weight: 700;
justify-content: center;
}
.submit:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
/*.submit:focus-visible {*/
/* outline: none;*/
/* box-shadow: var(--focus);*/
/*}*/
.helper-links {
display: flex;
gap: 24px;
justify-content: center;
font-size: 14px;
padding-top: 20px;
}
.helper-links a {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 600;
line-height: 150%;
position: relative;
}
.helper-links a + a::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 14px;
background: #ddd;
}
.helper-links a:hover {
color: var(--accent);
text-decoration: underline;
}
/* 간편 인증 카드 */
.simple-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.simple-card {
display: flex;
max-width: 580px;
width: 100%;
padding: 30px 75px 53px 75px;
flex-direction: column;
align-items: center;
gap: 41px;
border-radius: 12px;
border: 2px solid #F0F0F0;
background: #F8F8F8;
}
.simple-card button strong {
color: #1D1D1D;
font-family: "Pretendard";
font-weight: 700;
}
.simple-head {
display: flex;
align-items: center;
flex-direction: column;
gap: 14px;
margin-bottom: 8px;
}
.simple-head .txt-box {
display: flex;
flex-direction: column;
justify-self: center;
align-items: center;
}
.simple-title {
color: #1D1D1D;
text-align: center;
font-family: 'Pretendard';
font-size: 24px;
font-weight: 700;
}
.simple-desc {
color: #4C5160;
text-align: center;
font-family: 'Pretendard';
font-size: 16.5px;
font-weight: 400;
margin-top: 24px;
}
.simple-card button {
display: flex;
width: 100%;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 4px;
align-self: stretch;
border-radius: 8px;
border: 1px solid #1D1D1D;
background: #FFF;
color: #1D1D1D;
font-family: "Pretendard";
font-size: 19px;
font-weight: 400;
flex: none;
}
/*.btn:focus-visible {*/
/* outline: none;*/
/* box-shadow: var(--focus);*/
/*}*/
#login .title {
display: flex;
margin: 50px 0;
flex-direction: column;
gap: 24px;
}
#login .title p {
color: #6A6E77;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 500;
}
#login .title h1 {
color: #1D1D1D;
font-family: "NanumSquareNeo";
font-size: 35px;
font-weight: 800;
letter-spacing: -1.05px;
}
/* =========================
회원가입 페이지
========================= */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
margin-bottom: 30px;
}
.agreePolicy .title {
color: #333;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
}
.agreePolicy dt {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
padding-bottom: 10px;
}
.agreePolicy dd, .agreePolicy li {
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 150%;
}
.agreePolicy dd p {
color: #4C5160;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
}
.page-header .title {
color: #1D1D1D;
font-family: "NanumSquareNeo";
font-size: 35px;
font-weight: 800;
letter-spacing: -1.05px;
display: flex;
align-items: center;
gap: 4px;
}
.page-header .breadcrumb {
border-top: 0;
height: auto;
}
.page-header .breadcrumb ul {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
color: #555;
align-items: center;
}
.page-header .breadcrumb li {
display: flex;
align-items: center;
/*overflow: hidden;*/
color: #1D1D1D;
text-align: right;
text-overflow: ellipsis;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 150%;
}
.page-header .breadcrumb li::after {
content: url('/img/designIcon/breadcrumb-arrowRight.png');
display: inline-block;
margin: 0 6px;
vertical-align: middle;
position: relative;
top: 3px;
}
.page-header .breadcrumb li:last-child::after {
content: "";
}
.page-header .breadcrumb a {
/*overflow: hidden;*/
color: #1D1D1D;
text-align: right;
text-overflow: ellipsis;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 150%;
display: flex;
gap: 4px;
}
.page-header .breadcrumb a:hover {
text-decoration: underline;
}
.divider {
border-top: 2px solid;
display: block;
margin-bottom: 40px;
}
.steps {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 10px 0 28px;
padding-top: 18px;
}
.steps::before {
content: "";
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, 0%);
right: 0;
height: 2px;
background: #E6E6E6;
width: 100%;
}
/* 보라색 진행 라인 */
.step--complete::after {
content: "";
position: absolute;
top: 9%;
left: 0;
height: 2px;
background: var(--main);
z-index: 1;
width: 100%;
}
/* 단계별 width 계산 */
.steps[data-step="1"]::after {
width: 25%;
}
.steps[data-step="2"]::after {
width: 50%;
}
.steps[data-step="3"]::after {
width: 75%;
}
.steps[data-step="4"]::after {
width: 100%;
}
.step {
position: relative;
flex: 1 1 0;
}
.step .dot {
position: absolute;
top: 0;
width: 23px;
height: 23px;
border-radius: 50%;
background: #E1E1E1;
border: 3px solid #fff;
box-shadow: 0 0 0 1px #E1E1E1;
}
.step--complete .dot {
position: absolute;
top: 0;
width: 23px;
height: 23px;
border-radius: 50%;
background: #B64291;
border: 0;
box-shadow: 0 0 0 1px #E1E1E1;
}
.step--complete .dot::after {
content: url('/img/designIcon/step_check.png');
color: #fff;
font-size: 13px;
line-height: 0;
position: relative;
z-index: 9;
}
.step--current .dot,
.step .dot.active {
background: rgba(182, 66, 145, 0.50);
border-color: #fff;
box-shadow: 0 0 0 1.2px rgba(182, 66, 145, 0.40);
}
.step .dot {
display: grid;
place-items: center;
}
.step--current .dot::after,
.step .dot.active::after {
content: "…";
color: #fff;
font-size: 13px;
line-height: 0;
position: relative;
bottom: 5px;
}
.dot-label {
margin-top: 40px;
}
.step p {
color: #8E8E8E;
font-family: 'Pretendard';
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.step strong {
overflow: hidden;
color: #1D1D1D;
text-overflow: ellipsis;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 700;
line-height: 150%;
}
.step--current p, .step--complete p {
color: var(--deep-magenta);
font-family: 'Pretendard';
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.step--current strong, .step--complete strong {
overflow: hidden;
color: var(--deep-magenta);
text-overflow: ellipsis;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 600;
}
/* 제목/설명 */
.page-title {
display: flex;
gap: 5px;
align-items: center;
justify-content: start;
color: #6A6E77;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 600;
}
.page-title .badge:first-child {
color: var(--accent);
font-family: 'Pretendard';
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.page-title .badge {
color: #6A6E77;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 600;
line-height: 150%;
}
.join-container {
padding-bottom: 40px;
}
.join-container .desc {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 400;
line-height: 150%;
margin-bottom: 36px;
}
#join h2, .signUp_certification .inquiry .inquiry-title {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 34px;
font-weight: 700;
letter-spacing: 1px;
margin-top: 30px;
margin-bottom: 32px;
}
.signUp_certification .inquiry {
display: flex !important;
justify-content: space-between !important;
gap: 10px !important;
}
#join desc {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 400;
line-height: 150%;
}
#join .title-box, #join_complete .title-box{
display: flex;
align-items: center;
gap: 20px;
}
#join .title-box .popup-info, #join_complete .title-box .popup-info {
display: flex;
}
#join .title-box .popup-info img, #join_complete .title-box .popup-info img {
width: 30px;
height: 30px;
}
.boardView .tit {
padding: 15px;
color: #2d2c2c;
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
line-height: 120%;
border-bottom: 1px solid #cacaca;
}
.board-content,
.boardView_detail {
padding: 20px;
}
.boardView_detail,
.boardView_detail img,
.boardView_detail p,
.boardView_detail span,
.boardView_detail font,
.boardView_detail ul,
.boardView_detail ol,
.boardView_detail li,
.boardView_detail table,
.boardView_detail b,
.boardView_detail v,
.board-content,
.board-content img,
.board-content span,
.board-content font,
.board-content ul,
.board-content ol,
.board-content li,
.board-content table,
.board-content b,
.board-content v {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
line-height: 150%;
}
.boardView_detail a,
.board-content a {
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
line-height: 150%;
text-decoration: underline !important;
color: #9D0058 !important;
}
.boardView_detail h1,
.board-content h1 {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 26px;
font-weight: 400;
line-height: 160%;
}
.boardView_detail h2,
.board-content h2 {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 25px;
font-weight: 400;
line-height: 150%;
}
.boardView_detail h3,
.board-content h3 {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 24px;
font-weight: 400;
line-height: 150%;
}
.boardView_detail h4,
.board-content h4 {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 23px;
font-weight: 400;
line-height: 150%;
}
.boardView_detail h5,
.board-content h5 {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 22px;
font-weight: 400;
line-height: 150%;
}
.boardView_detail strong,
.board-content strong {
/*color: #000000;*/
font-family: "Pretendard";
font-size: 20px;
font-weight: 600;
line-height: 150%;
}
/* 카드/아코디언 */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.terms {
padding: 40px;
}
.term {
margin-bottom: 12px;
overflow: hidden
}
.term__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.term__title {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 22px;
font-weight: 700;
margin-bottom: 17px;
}
.tag {
color: var(--accent02);
font-family: 'Pretendard';
font-size: 22px;
font-weight: 700;
}
.tag.opt {
color: #6A6E77;
font-family: 'Pretendard';
font-size: 22px;
font-weight: 700;
}
.term__toggle {
display: flex;
height: 32px;
padding: 0 10px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 6px;
border: 1px solid var(--main);
background: #FFF8FD;
color: var(--main);
font-family: 'Pretendard';
font-size: 15px;
font-weight: 700;
line-height: 150%;
margin-bottom: 17px;
}
.term__toggle:hover {
background: var(--main);
color: #FFF8FD;
}
.term__toggle[aria-expanded="true"] {
display: flex;
height: 32px;
padding: 0 10px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 6px;
border: 1px solid #333;
background: #FFF;
color: #333;
font-family: 'Pretendard';
font-size: 15px;
font-weight: 700;
line-height: 150%;
}
.term__panel {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
margin-bottom: 12px;
}
.term__scroll {
height: 190px;
overflow: auto;
padding: 20px;
border: 1px solid var(--line);
background: #fff;
border-radius: 8px
}
.term__scroll .term-info {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 150%;
padding-top: 10px;
}
.term__scroll strong {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 24px;
font-weight: 700;
line-height: 250%;
letter-spacing: -0.22px;
}
.term__scroll .term-list-title {
color: #333;
font-family: 'Pretendard';
font-size: 19px;
font-weight: 700;
line-height: 150%;
padding-top: 10px;
padding-bottom: 5px;
}
.term__scroll .term-list-info, .term__scroll ul li {
color: #4C5160;
font-family: 'Pretendard';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.term__scroll ul li {
padding: 0 12px;
}
/* ===== 라디오 (네이티브: 체크만 되게, 스타일만) ===== */
.agree-row {
display: flex;
height: 64px;
padding: 22px 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 8px;
background: #F4F5F6;
margin-bottom: 45px;
}
.agree-msg {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 500;
line-height: 150%;
}
.radios {
display: flex;
gap: 20px;
align-items: center;
}
.radios label {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 400;
line-height: 150%;
}
.radios input[type="radio"] {
width: 18px;
height: 18px;
accent-color: var(--main);
vertical-align: middle;
}
/*.radios input[type="radio"]:focus-visible {*/
/* outline: var(--focus);*/
/* outline-offset: 2px;*/
/* border-radius: 50%;*/
/*}*/
input[type="radio"] {
width: 18px;
height: 18px;
accent-color: #B52F8B;
cursor: pointer;
vertical-align: middle;
}
/* 전체 동의 (동작 없음 / UI만) */
.all-agree {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 18px 0 6px;
color: #444
}
.all-agree span {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 22px;
font-weight: 600;
line-height: 150%;
}
.helper {
color: var(--muted);
font-size: 12px;
margin-left: 28px
}
.checkbox input {
width: 18px;
height: 18px;
accent-color: var(--accent02);
}
/* 버튼 */
.prev-nextCon {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 16px;
margin-bottom: 99px;
}
.prev-nextCon .btn {
min-width: 120px;
cursor: pointer;
flex: none;
display: flex;
height: 52px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
border: 1px solid #58616A;
background: #FFF;
color: #1E2124;
font-family: 'Pretendard';
font-size: 19px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.btn-dark {
background-color:#4C5160;
color:#fff;
}
.btn-dark:hover {
outline: 2px solid #FFF !important;
background: #000925 !important;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.prev-nextCon .btn:not(.btn--primary):hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.prev-nextCon .btn--primary {
background: var(--main);
color: #fff;
border-color: var(--main);
}
.prev-nextCon .btn--primary:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#login .auth-grid{
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
.auth-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 1200px;
margin: 0 auto;
padding-top: 30px;
}
.auth-card {
display: flex;
height: 160px;
padding: 32px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
flex-shrink: 0;
border-radius: 12px;
background: #F4F5F6;
}
.auth-card:hover {
transform: translateY(-3px);
}
.auth-info {
display: flex;
justify-content: space-between;
width: 100%;
}
.auth-info .title-box {
display: flex;
align-items: center;
gap: 20px;
}
.auth-icon {
font-size: 26px;
flex-shrink: 0;
}
.auth-info .title-box h3 {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 24px;
font-weight: 700;
line-height: 150%;
letter-spacing: 0;
}
.auth-card p, .signUp_certification .inquiry .inquiryBox p {
color: #4C5160;
font-family: "Pretendard";
font-size: 16.5px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
padding-left: 50px;
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-card p, .signUp_certification .inquiry .inquiryBox strong {
color: #4C5160;
font-family: "Pretendard";
font-size: 16.5px;
font-weight: 600;
letter-spacing: 0;
}
.signUp_certification .inquiry .inquiryBox strong {
font-weight: 700;
}
.signUp_certification .inquiry .inquiryBox p {
margin-top: 20px;
margin-bottom: 4px;
}
#join .btn_out {
display: flex !important;
font-family: 'Pretendard';
font-size: 15px;
}
#join .btn_out:hover {
outline: 1.5px solid #d7d9df;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.signUp_certification .inquiry .btnarea {
position: initial !important;
width: 270px;
}
.auth-arrow {
font-size: 18px;
}
/* =========================
아이디찾기 /비밀번호 찾기
========================= */
#search-id input::placeholder {
font-size: 16px;
}
#search-id,
#search-pw {
display: flex;
justify-content: space-between;
max-width: 1190px;
width: 100%;
gap: 78px;
margin: 0 auto;
padding-bottom: 127px;
}
/* 캡차 라인 전체 */
#search-id .captcha-line,
#search-pw .captcha-line {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
/* 캔버스 + 인풋 묶음 */
#search-id .captchaBox,
#search-pw .captchaBox {
display: flex;
flex: 1; /* 라벨 옆에서 전체 영역 차지 */
gap: 20px;
max-width: 420px;
width: 100%;
}
/* 캔버스 */
#search-id .captcha-canvas,
#search-pw .captcha-canvas {
flex: 1;
min-width: 0;
border: 1px solid #ccc;
border-radius: 6px;
background: #f1f1f1;
box-sizing: border-box;
}
/* 인풋 */
#search-id .captchaBox input,
#search-pw .captchaBox input {
flex: 1;
min-width: 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
#search-id .regno-inputs .input-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 420px;
}
#search-id .input-wrap,
#search-pw .input-wrap {
display: flex;
justify-content: center;
align-items: center;
}
/* 오른쪽 아이콘 버튼 그룹 */
#search-id .captcha-actions,
#search-pw .captcha-actions {
display: flex;
gap: 0 !important;
}
/* 버튼 공통 */
#search-id .captcha-actions .icon-btn,
#search-pw .captcha-actions .icon-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px;
line-height: 0;
}
#search-id .main-title,
#search-pw .main-title {
max-width: 221px;
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
}
#search-id .hidden-btn,
#search-pw .hidden-btn {
max-height: 50px;
opacity: 1;
margin-top: 10px;
/*overflow: hidden;*/
transition: all 0.4s ease;
}
#search-id .btn-wrap,
#search-pw .btn-wrap{
margin-bottom: 0;
}
/*#search-id .option.active .hidden-btn,
#search-pw .option.active .hidden-btn {
max-height: 50px;
opacity: 1;
margin-top: 10px;
}*/
#search-id .main-title h1,
#search-pw .main-title h1 {
color: #B70669;
leading-trim: both;
text-edge: cap;
font-family: "Pretendard";
font-size: 32px;
font-weight: 700;
line-height: 42px;
}
#search-id form,
#search-pw form {
width: 100%;
}
#search-id .title,
#search-pw .title {
color: #1E2124;
font-family: "Pretendard";
font-size: 24px;
font-weight: 700;
line-height: 150%;
letter-spacing: 0;
}
#search-id .option:hover .title,
#search-pw .option:hover .title {
font-weight: 600;
color: #B52F8B;
}
#search-id .desc,
#search-pw .desc {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 18px;
font-weight: 400;
line-height: 150%;
}
#search-id .sub-desc,
#search-pw .sub-desc {
overflow: hidden;
color: #464C53;
text-overflow: ellipsis;
font-family: "Pretendard";
font-size: 16.5px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
}
#search-id .id-form p.info,
#search-pw .id-form p.info {
overflow: hidden;
color: #464C53;
text-overflow: ellipsis;
font-family: "Pretendard";
font-size: 16.5px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
margin-bottom: 20px;
}
/* 라디오 리스트 */
#search-id .option-group,
#search-pw .option-group {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
#search-id .option,
#search-pw .option {
border: 1px solid #ddd;
border-radius: 8px;
padding: 32px;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: flex-start;
gap: 14px;
}
#search-id .option:hover,
#search-pw .option:hover {
border: 2px solid #B52F8B;
box-shadow: 0 0 0 3px rgba(192, 23, 107, 0.1);
}
#search-id .option .id-form,
#search-pw .option .id-form {
max-height: max-content;
opacity: 1;
/*overflow: hidden;*/
transition: all 0.4s ease;
}
/* 활성화되면 펼쳐짐 */
/*#search-id .option.active .id-form,
#search-pw .option.active .id-form {
max-height: 500px;
opacity: 1;
}*/
#search-id .phone,
#search-pw .phone {
flex-direction: column;
}
#search-id .option .option-header,
#search-pw .option .option-header {
display: flex;
gap: 14px;
align-items: flex-start;
}
#search-id .option input[type="radio"],
#search-pw .option input[type="radio"] {
accent-color: #B52F8B;
transform: scale(1.2);
cursor: pointer;
margin-right: 8px;
position: relative;
top: 10px;
}
#search-id .option label,
#search-pw .option label {
cursor: pointer;
display: flex;
gap: 10px;
align-items: flex-start;
flex-direction: column;
color: #000;
font-family: 'Pretendard';
font-size: 16px;
font-weight: 600;
line-height: 150%;
width: 100%;
}
/* active 스타일 */
#search-id .option:has(.submit-btn:focus) + .option-content .title,
#search-pw .option:has(.submit-btn:focus) + .option-content .title,
#search-id .option:has(#phone-save:focus) + .option-content .title,
#search-pw .option:has(#phone-save:focus) + .option-content .title {
font-weight: 600;
color: #B52F8B;
}
#search-id .option:has(.submit-btn:focus),
#search-pw .option:has(.submit-btn:focus),
#search-id .option:has(#phone-save:focus),
#search-pw .option:has(#phone-save:focus){
border: 2px solid #B52F8B;
box-shadow: 0 0 0 3px rgba(192, 23, 107, 0.1);
}
#search-id .option:has(.submit-btn:focus) .option-content .title,
#search-pw .option:has(.submit-btn:focus) .option-content .title,
#search-id .option:has(#phone-save:focus) .option-content .title,
#search-pw .option:has(#phone-save:focus) .option-content .title{
font-weight: 600;
color: #B52F8B;
}
/* 주민등록번호 박스 안쪽 */
#search-id .option.regno .id-form {
display: none;
flex-direction: column;
align-items: stretch;
}
#search-id .option.regno .option-header {
display: flex;
align-items: flex-start;
gap: 14px;
}
#search-id .option.regno.active .id-form {
display: block;
}
#search-id .id-form,
#search-pw .id-form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 35px;
box-sizing: border-box;
}
/* 기본 숨김 */
#search-id .option.phone .id-form,
#search-pw .option.phone .id-form {
display: block;
flex-direction: column;
align-items: stretch;
margin-top: 16px;
}
/*#search-id .option.phone.active .id-form,
#search-pw .option.phone.active .id-form {
display: block;
}*/
#search-id .option.phone .id-form .bg-con,
#search-pw .option.phone .id-form .bg-con {
max-width: 730px;
width: 100%;
background: #F4F5F6;
border-radius: 6px;
padding: 20px 25px;
margin-bottom: 15px;
}
#search-id .option.phone .id-form .info,
#search-pw .option.phone .id-form .info {
font-size: 15px;
color: #464C53;
font-family: "Pretendard";
display: flex;
align-items: center;
gap: 8px;
}
#search-id .save-option,
#search-pw .save-option {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #464C53;
font-family: "Pretendard";
justify-content: center;
}
#search-id .save-check,
#search-pw .save-check {
width: 18px;
height: 18px;
accent-color: #B52F8B;
cursor: pointer;
}
#search-id .option.phone .btn-wrap,
#search-pw .option.phone .btn-wrap {
display: flex;
justify-content: flex-end;
width: 100%;
gap: 20px;
}
#search-id .next-btn,
#search-pw .next-btn {
color: #333333;
background: #FFFFFF;
border-radius: 90px;
height: 45px;
padding: 0 24px;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
cursor: pointer;
border: 1px solid #333333;
}
#search-id .option.phone .submit-btn,
#search-pw .option.phone .submit-btn {
color: #fff;
background: #B64291;
border-radius: 90px;
height: 45px;
padding: 0 24px;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
#search-id .id-form .bg-con,
#search-pw .id-form .bg-con {
max-width: 730px;
width: 100%;
}
#search-id .id-form .bg-con .input-box,
#search-pw .id-form .bg-con .input-box {
display: flex;
flex-direction: column;
border-radius: 6px;
background: #F4F5F6;
align-items: center;
justify-content: center;
padding: 31px 51px;
width: 100%;
box-sizing: border-box;
}
#search-id #regno-box .input-box label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 16px;
max-width: 118px;
width: 100%;
}
#search-id .option .save-option label,
#search-pw .option .save-option label {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
}
#search-id .id-form input[type="text"],
#search-id .id-form input[type="password"],
#search-pw .id-form input[type="text"],
#search-pw .id-form input[type="password"] {
max-width: 420px;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
height: 44px;
}
#search-id .id-form .row,
#search-pw .id-form .row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin-bottom: 15px;
}
/* 주민등록번호 row 전용 */
#search-id .row.regno-inputs {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
#search-id .row.regno-inputs input {
flex: 1;
min-width: 0;
box-sizing: border-box;
}
#search-id .captcha-box,
#search-pw .captcha-box {
display: flex;
align-items: center;
gap: 8px;
}
#search-id .captcha-img,
#search-pw .captcha-img {
background: #f1f1f1;
padding: 8px 12px;
font-weight: bold;
font-size: 22px;
letter-spacing: 2px;
border-radius: 4px;
}
#search-id .btn-wrap,
#search-pw .btn-wrap {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 10px;
gap: 20px;
}
#search-id .submit-btn,
#search-pw .submit-btn {
color: #fff;
cursor: pointer;
display: flex;
height: 45px;
padding: 0 24px;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-radius: 90px;
background: #B64291;
text-align: center;
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 700;
}
#search-id .submit-btn:hover,
#search-pw .submit-btn:hover {
outline: 1.5px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#search-id #regno-box {
display: flex;
flex-direction: column;
}
#search-id .option.regno input[type="radio"]:checked + .option-content .sub-desc {
display: none;
}
#search-id .col-box,
#search-pw .col-box {
width: 100%;
}
/* =========================
아이디찾기 완료 페이지
========================= */
#search_idpw-complete {
max-width: 1120px;
width: 100%;
margin: 0 auto;
}
#search_idpw-complete h1,
#search_idpw-complete span,
#join_complete h1,
#join_complete h1 span
{
text-align: center;
font-family: "Pretendard";
font-size: 36px;
font-weight: 700;
line-height: 150%;
letter-spacing: 1px;
}
#search_idpw-complete h1 {
color: #1D1D1D;
}
#search_idpw-complete .bg-container,
#join_complete .bg-container {
display: flex;
padding: 55px 40px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
border-radius: 12px;
background: #EEF2F7;
margin-top: 20px;
}
#search_idpw-complete .bg-container .txt-box,
#join_complete .bg-container .txt-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
#search_idpw-complete .bg-container .txt-title,
#join_complete .bg-container .txt-title {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
line-height: 150%;
letter-spacing: 0;
}
#search_idpw-complete .bg-container .txt-info,
#join_complete .bg-container .txt-info {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 400;
line-height: 150%;
}
#search_idpw-complete .bg-container .txt-box .txt-title strong,
#join_complete .bg-container .txt-box .txt-title strong {
color: var(--accent02);
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
line-height: 150%;
letter-spacing: 0;
}
#search_idpw-complete .bg-container .txt-box .txt-title span,
#join_complete .bg-container .txt-box .txt-title span {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 22px;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
}
.btn-wrap {
display: flex;
gap: 16px;
margin-top: 60px;
justify-content: center;
align-items: center;
}
.btn-wrap .btn-primary {
display: flex;
height: 52px;
min-width: 98px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 6px;
background: #B52F8B;
color: #FFF;
text-align: center;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
}
.btn-primary:hover {
background: #A4006B !important;
outline: 2px solid #FFF;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.btn-wrap .btn-border {
display: flex;
height: 52px;
min-width: 98px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
border: 1px solid #58616A;
background: rgba(255, 255, 255, 0.00);
color: #1E2124;
text-align: center;
font-family: "Pretendard";
font-size: 19px;
font-weight: 600;
line-height: 150%;
}
.btn-wrap .btn-border:hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.btn-deepNavy {
display: flex;
/*width: 150px;*/
height: 52px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-radius: 6px;
background: #344173;
color: #FFF;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
}
.btn-deepNavy:hover {
outline: 2px solid #FFF;
background: #00176C;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#search_idpw-complete ul {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 45px;
margin-bottom: 135px;
}
#search_idpw-complete ul li {
list-style: disc inside;
color: #1D1D1D;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
}
#search-pw .search-pw-con {
display: flex;
flex-direction: column;
width: 100%;
}
#search-pw .txt-box {
display: flex;
flex-direction: column;
/*gap: 20px;*/
margin-bottom: 45px;
}
#search-pw .txt-box h1 {
color: #B70669;
font-family: "Pretendard";
font-size: 32px;
font-weight: 700;
line-height: 150%;
}
#search-pw .input-con {
display: flex;
padding: 60px 150px;
justify-content: center;
align-items: flex-start;
gap: 60px;
align-self: stretch;
border-radius: 20px;
border: 1px solid #D8D8D8;
}
#search-pw .input-con .input-box {
display: flex;
flex-direction: column;
width: 100%;
max-width: 492px;
gap: 4px;
}
#search-pw .input-con .input-box label {
color: #000;
font-family: 'Pretendard';
font-size: 15px;
font-weight: 700;
line-height: 150%;
}
#search-pw .input-con .input-box input {
height: 52px;
border-radius: 8px;
padding: 0 16px;
}
#search-pw .input-con .input-box input::placeholder {
color: #8E8E8E;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 500;
line-height: 150%;
}
#search-pw .input-con .input-box .btn-primary {
display: flex;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 4px;
align-self: stretch;
border-radius: 8px;
background: #B52F8B;
color: #FFFFFF;
font-family: 'Pretendard';
font-size: 19px;
font-weight: 700;
line-height: 150%;
margin-top: 24px;
}
#search-pw .search-pw-con p {
color: #333;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 500;
line-height: 150%;
width: 100%;
}
#search-pw .search-pw-con .desc {
color: #333;
font-family: 'Pretendard';
font-size: 17px;
font-weight: 500;
line-height: 150%;
margin-top: 36px;
margin-bottom: 24px;
text-align: center;
}
#search-pw .search-pw-con .btn-ghost {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 19px;
font-weight: 700;
line-height: 150%;
display: flex;
width: 370px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid #1D1D1D;
background: #FFF;
margin: 0 auto;
}
#search-pw .search-pw-con .btn-ghost:hover {
background: #f2f2f2;
}
#change-pwInfo {
max-width: 1120px;
width: 100%;
margin: 0 auto;
padding-top: 50px;
margin-bottom: 80px;
}
#change-pwInfo .main-titleBox {
display: flex;
align-items: center;
justify-content: space-between;
}
#change-pwInfo .main-titleBox h2 {
color: #1D1D1D;
font-family: "NanumSquareNeo";
font-size: 45px;
font-weight: 800;
letter-spacing: -1.05px;
line-height: 140%;
}
#change-pwInfo .main-titleBox .lock-icon {
width: 15%;
}
#change-pwInfo .sub-infoBox p span {
color: #0e0e0e;
font-size: 20px;
font-weight: 700;
}
#change-pwInfo .title-box {
display: flex;
align-items: center;
gap: 20px;
}
#change-pwInfo .popup-info {
display: flex;
align-items: center;
}
#change-pwInfo .popup-info img {
width: 4%;
}
#change-pwInfo .sub-infoBox {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 30px;
}
#change-pwInfo .sub-infoBox p {
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 18px;
font-weight: 500;
line-height: 150%;
}
#change-pwInfo .sub-infoBox span {
font-family: 'Pretendard';
font-size: 18px;
font-weight: 500;
line-height: 150%;
}
#change-pwInfo .password-box {
background: #F4F5F6;
padding: 20px 30px;
border-radius: 4px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
gap: 20px;
}
#change-pwInfo .form-row {
display: flex;
align-items: center;
margin-bottom: 0;
max-width: 600px;
width: 100%;
}
#change-pwInfo .form-row label {
flex: 0 0 150px;
font-size: 16px;
color: #333;
font-weight: 700;
font-family: 'Pretendard';
}
#change-pwInfo .form-row input[type="password"] {
flex: 1;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
#change-pwInfo ul {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 30px;
}
#change-pwInfo ul li {
list-style: disc inside;
color: #666;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
}
#join_enterInformation .form-grid{
display: grid; lumns: 200px 1fr;
border-top: 2px solid #C7CFDA
}
#join_enterInformation .row,
#secede .row{
display: contents
}
#join_enterInformation .label,
#secede .label{
font-size: 17px;
font-family: 'Pretendard';
padding: 20px 12px;
/*border-bottom: 1px solid #E5E7EB;*/
font-weight: 600;
color: #0F172A;
height: 100%;
display: flex;
align-items: start;
}
#join_enterInformation .alert-box,
#secede .alert-box{
display: flex;
align-items: center;
gap: 4px;
}
#join_enterInformation .alert-box .matchTxt{
font-size: 16px;
font-weight: 600;
font-family: 'Pretendard';
margin-left: 0 !important;
}
#join_enterInformation .label .req,
#secede .label .req{
color: #E11D48;
margin-right: 6px
}
#join_enterInformation .field,
#secede .field {
padding: 20px 12px;
border-bottom: 1px solid #E5E7EB;
display: flex;
flex-direction: column;
gap: 10px
}
#join_enterInformation .inline{
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
font-size: 16px;
font-family: 'Pretendard';
font-weight: 500;
}
#join_enterInformation input[type="text"][readonly] {
border-radius: 8px;
border: 2px dashed;
padding: 12px;
color: #232323;
}
#secede .inline{
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
font-size: 16px;
font-family: 'Pretendard';
font-weight: 500;
padding-bottom: 20px;
}
#join_enterInformation span,
#join_enterInformation .muted,
#secede span,
#secede .muted{
font-family: 'Pretendard';
font-size: 16px;
display: flex;
align-items: start;
gap: 8px;
}
#join_enterInformation label,
#secede label{
font-family: 'Pretendard';
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
}
#join_enterInformation label span,
#secede label span{
white-space: nowrap;
}
#join_enterInformation input[type="text"],
#join_enterInformation input[type="password"],
#join_enterInformation input[type="date"],
#join_enterInformation select,
#join_enterInformation textarea {
width: 40%;
font-size: 16px;
outline: none;
background: #FFF;
display: flex;
height: 44px;
padding: 0 16px;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #FFF;
}
#join_enterInformation input[type="text"]::placeholder,
#join_enterInformation input[type="password"]::placeholder,
#join_enterInformation input[type="date"]::placeholder {
color: #8E8E8E;
font-family: 'Pretendard';
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
/*input:focus, select:focus, textarea:focus {*/
/* border-color: #94A3B8;*/
/* box-shadow: 0 0 0 3px rgba(45, 79, 224, .12)*/
/*}*/
#join_enterInformation textarea {
min-height: 140px;
padding: 12px;
resize: vertical
}
#join_enterInformation .btn {
flex: none;
height: 40px;
padding: 0 14px;
border-radius: 8px;
background: #FFFAFE;
color: #B70669;
border: 1.5px solid;
font-weight: 700;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Pretendard';
font-size: 16px;
}
#join_enterInformation .btn.btn--primary:hover, #join_enterInformation .btn.jusopicker:hover {
outline: 1.5px solid #B70669;
background: #FDF2FB;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#join_enterInformation .btn.secondary {
background: #F3F4F6;
color: #111827
}
#join_enterInformation .btn.primary {
background: #B52F8B;
color: #fff;
}
#join_enterInformation .btn.primary:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#join_enterInformation .btn.ghost {
background: #fff
}
#join_enterInformation .muted {
font-size: 15px;
color: #6B7280;
line-height: 1.45
}
#join_enterInformation .terms {
max-height: 180px;
overflow: auto;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #F5F6F8;
padding: 12px;
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 150%;
}
#join_enterInformation .terms strong {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
padding-bottom: 10px;
}
#join_enterInformation .actions {
display: flex;
gap: 8px;
justify-content: flex-end;
padding-top: 16px
}
/* 주민번호 고정 텍스트(인풋처럼 보이게) */
#join_enterInformation .static-field {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 12px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #F5F6F8;
color: #111;
font-weight: 800
}
/* 서브 섹션 타이틀 */
#join_enterInformation .subhead {
display: flex;
align-items: center;
gap: 8px;
margin: 24px 0 8px;
font-weight: 800;
color: #111
}
#join_enterInformation .info-text, #join_enterInformation .info-text strong {
font-family: 'Pretendard';
margin: 0 0 18px;
font-size: 16px;
}
.popup-wrap {
background: #3d3d3d;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* 모달: dialog 기반 */
.dialog-popup {
border: none;
padding: 0;
border-radius: 16px;
background: #fff;
width: min(520px, calc(100vw - 32px));
box-shadow: 0 24px 60px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .2);
}
.dialog-popup ::backdrop {
background: rgba(17, 17, 17, .72)
}
#logoutDialog .modal {
position: relative;
padding: 28px 28px 24px;
}
/* 닫기 버튼 */
#logoutDialog .close {
position: absolute;
top: 5px;
right: 30px;
width: 32px;
height: 32px;
cursor: pointer;
}
#logoutDialog .close::before {
content: url("/img/designIcon/logout_close.png");
position: absolute;
width: 16px;
transform-origin: center;
}
#logoutDialog .close:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 2px
}
/* 내용 */
#logoutDialog .eyebrow {
margin: 0 0 10px;
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 150%;
letter-spacing: 0;
}
#logoutDialog .title {
margin: 0 0 14px;
font-weight: 800;
line-height: 1.35;
font-size: 1.375rem;
color: #111827;
font-family: "Pretendard";
font-size: 24px;
}
#logoutDialog .title .accent {
color: #B52F8B;
font-weight: 800;
}
#logoutDialog .desc {
margin: 0 0 22px;
color: #4b5563;
font-size: .9375rem;
line-height: 1.6;
}
#logoutDialog .desc p {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
}
/* 버튼 영역 */
#logoutDialog .actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
#logoutDialog .btn {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
padding: 0 18px;
border-radius: 10px;
border: 1px solid transparent;
font-weight: 700;
font-size: .9375rem;
cursor: pointer;
line-height: 1;
transition: box-shadow .2s ease, transform .02s ease, background .2s ease, border-color .2s ease, color .2s ease;
flex: none;
}
#logoutDialog .btn:active {
transform: translateY(1px)
}
/*.btn:focus-visible {*/
/* outline: 3px solid #1d4ed8;*/
/* outline-offset: 2px*/
/*}*/
#logoutDialog .btn-outline {
border-radius: 6px;
border: 1px solid #58616A;
background: rgba(255, 255, 255, 0.00);
}
#logoutDialog .btn-outline:hover {
background: #f9fafb;
border-color: #d1d5db
}
#logoutDialog .btn-primary {
border-radius: 6px;
background: #B52F8B;
color: #FFFFFF;
}
#logoutDialog .btn-primary:hover {
filter: brightness(0.95)
}
#performance .container {
max-width: 1400px;
margin: 0 auto
}
.sub-wrap .main-title {
color: #000;
text-align: center;
font-size: 35px;
font-weight: 800;
margin-bottom: 50px;
letter-spacing: -1.05px;
}
.sub-wrap .main-title::after {
content: "";
display: block;
width: 36px;
height: 3px;
background: #111;
margin: 20px auto 0;
border-radius: 2px;
margin-bottom: 20px;
}
/* ====================== 상단: 봉사실적 조회 카드 ====================== */
.filter-card {
background: #F5F6F8;
border: 1px solid #EEEFF2;
border-radius: 10px;
padding: 32px 43px;
}
#centerDetails .filter-card {
margin-bottom: 50px;
}
#centerDetails .total-txt {
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 30px;
margin-bottom: 10px;
}
#centerDetails p span {
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 30px;
color: #B64291;
}
.filter-grid {
display: grid;
grid-template-columns: fit-content(12ch) minmax(0, 1fr) fit-content(12ch) minmax(0, 1fr);
align-items: center;
gap: 12px 16px;
}
#centerDetails .filter-grid {
display: grid;
align-items: center;
gap: 12px 16px;
justify-items: center;
}
.filter-grid > * {
min-width: 0
}
.filter-label label {
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
}
/* 기간별 라디오 그룹 */
.range-group {
padding: 0;
border: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0
}
.chip-radio {
position: relative
}
.chip-radio input {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: auto;
}
.chip-radio label {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
width: auto;
min-width: 60px;
height: 38px;
padding: 0 12px;
white-space: nowrap;
word-break: keep-all;
flex-shrink: 0;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #FFF;
box-sizing: border-box;
color: #555960;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
}
.chip-radio input:not(:checked):hover + label {
background: #F8F9FB;
}
.chip-radio label .check {
width: 14px;
height: 14px;
display: none;
background: center/contain no-repeat url('/img/designIcon/primary-check.png')
}
.chip-radio input:checked + label {
border-color: #B52F8B;
color: #B52F8B;
background: #FFF4FA;
}
.chip-radio input:checked + label .check {
display: inline-block
}
.chip-radio input[type="radio"]:focus + label {
outline: 2px dashed var(--focus) !important;
outline-offset: 2px !important;
}
.term__scroll:focus {
outline: 2px dashed var(--focus) !important;
outline-offset: -2px !important;
}
/*.chip-radio input:focus-visible + label {*/
/* outline: 2px solid #c7d2fe;*/
/* outline-offset: 2px;*/
/* border-radius: 10px*/
/*}*/
/* ====================== 날짜/셀렉트 ====================== */
/* 공통 폰트/타이포 */
#performance select.field {
max-width: 450px;
width: 100%;
}
.search-bar select, #performance select.field, #search-type, #specialty select, #volunteer_apply select, #applyForm select, #alertInfo_education select,
#join_enterInformation select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fff;
background-image: url("/img/designIcon/arrow-down.png");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 34px;
cursor: pointer;
display: flex;
height: 45px;
padding: 0 10px 0 16px;
justify-content: space-between;
align-items: center;
border-radius: 5px;
border: 1px solid #B1B8BE;
color: #111827;
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
#volunteer_apply #year{
width: 20% !important;
}
.select-con{
display: flex;
align-items: center;
gap:10px;
}
#applicationResults select.field, #search-type {
max-width: 160px;
width: 100%;
padding: 0 12px;
}
#applyForm .controls label {
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
}
/* placeholder(값 미선택) 상태일 때 색상 회색으로 */
#performance select.field:has(option[value=""]:checked), #search-type:has(option[value=""]:checked),
#specialty select:has(option[value=""]:checked), #volunteer_apply select:has(option[value=""]:checked), #applyForm select:has(option[value=""]:checked), #alertInfo_education select:has(option[value=""]:checked) {
color: #555960;
}
/* 드롭다운 목록의 개별 옵션 타이포 */
select.field option {
color: #111827;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
/* placeholder 옵션 자체는 회색 */
#performance select.field option[value=""], #search-type option[value=""] {
color: #8E8E8E;
}
/* IE/Edge(레거시) 기본 화살표 숨김 */
#performance select.field::-ms-expand, #search-type::-ms-expand {
display: none;
}
.date-range {
display: flex;
gap: 10px;
align-items: center;
min-width: 0;
max-width: 381px;
width: 100%;
}
.date-range span {
color: #555960;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
.date {
position: relative;
flex: 1;
min-width: 0
}
.date input {
width: 100%;
height: 45px;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #FFF;
min-width: 0;
font-family: "Pretendard";
font-weight: 500;
padding: 0 10px;
}
.date input[type="date"] {
color: #8E8E8E;
-webkit-text-fill-color: #8E8E8E;
/ font-family: "Pretendard";
font-weight: 500;
line-height: 150%;
}
/* 값이 비어 있을 때(=required + invalid) 회색 표시 */
input[type="date"]:required:invalid {
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
color: #8E8E8E;
-webkit-text-fill-color: #555960;
}
/* 값이 있을 때 빨강 */
input[type="date"]:valid {
color: #111;
-webkit-text-fill-color: #111;
font-family: "Pretendard";
}
/* 크로미움/사파리용 기본 아이콘 치환 */
input[type="date"]::-webkit-calendar-picker-indicator {
background: url("/img/designIcon/calender.png") no-repeat center / 18px 18px;
color: transparent;
opacity: 1;
cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
background-image: url("/img/designIcon/calender.png");
}
input[type="date"]:disabled::-webkit-calendar-picker-indicator {
background-image: url("/img/designIcon/calender.png");
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
display: none;
}
#performance .filter-actions, #specialty .filter-actions, #volunteer_apply .filter-actions {
display: flex;
justify-content: center;
margin-top: 14px;
margin-bottom: 24px;
}
#centerDetails .filter-actions {
display: flex;
justify-content: center;
margin-top: 14px;
}
#centerDetails .filter-actions.filter-end {
justify-content: flex-end;
}
#performance .btn-search, #centerDetails .btn-search, #specialty .btn-search, #volunteer_apply .btn-search {
display: flex;
width: 125px;
height: 45px;
padding: 15px 24px 15px 20px;
align-items: center;
gap: 10px;
flex-shrink: 0;
color: #FFF;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
border-radius: 5px;
background: #4C5160;
justify-content: center;
}
#performance .btn-search:hover, #centerDetails .btn-search, #specialty .btn-search, #volunteer_apply .btn-search:hover {
outline: 2px solid #FFF;
background: #000925;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
/* ====================== 안내 + 버튼 ====================== */
#performance .top-line {
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
font-size: 13px;
margin: 25px 0 31px;
gap: 12px;
}
#performance .top-line .notice {
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
}
#performance .top-line .notice strong {
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
}
#performance .search-btn {
display: flex;
width: 230px;
padding: 15px 24px 15px 20px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 5px;
background: #47568C;
color: #FFF;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
#performance .search-btn:before {
content: url("/img/designIcon/btn-search.png");
}
#performance #search-keyword {
display: flex;
max-width: 300px;
width: 100%;
height: 45px;
padding: 0 16px;
align-items: center;
gap: 8px;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #FFF;
}
/* 총 건수 */
#performance .total {
margin-bottom: 12px;
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.8px;
}
#performance .total b {
color: #001F82
}
/* ====================== 리스트 ====================== */
.list {
border-top: 2px solid #414F78;
margin-top: 18px
}
.common .item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 20px 28px 6px;
border-bottom: 1px solid #C9CDD3;
cursor: pointer;
}
.common .item:hover {
background: #FBF7F6;
}
.common .left {
display: grid;
grid-template-columns: 48px 1fr;
align-items: start;
gap: 10px;
min-width: 0;
}
.common .num-badge {
display: flex;
align-items: center;
gap: 6px;
width: 48px;
flex: 0 0 auto;
}
.common .num {
text-align: center;
font-weight: 700;
color: #555;
font-family: "Pretendard";
}
.common .num-badge .num {
font-size: 15px;
}
.common .badge-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.common .badge-wrap {
display: flex;
gap: 10px;
}
.common .badge, .edu-schedule .badge {
border-radius: 4px;
background: #B52F8B;
display: flex;
height: 22px;
padding: 0 8px;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 13px;
font-weight: 800;
line-height: 22px;
font-family: "Pretendard";
white-space: nowrap;
word-break: keep-all;
flex-shrink: 0;
min-width: max-content;
}
.common .badge-border {
border-radius: 4px;
border: 1px solid #B52F8B;
background: #FFF;
display: flex;
height: 22px;
padding: 0 8px;
justify-content: center;
align-items: center;
color: #B70669;
font-size: 13px;
font-weight: 800;
line-height: 22px;
font-family: "Pretendard";
white-space: nowrap;
word-break: keep-all;
min-width: max-content;
}
.common .info {
min-width: 0;
width: 100%;
}
.common .info h3 {
color: #000;
font-size: 21px;
font-weight: 700;
letter-spacing: -0.42px;
font-family: "Pretendard";
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
.common .meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: #444;
min-width: 0;
word-break: keep-all;
}
.common .meta b {
color: #001F82;
font-family: "Pretendard";
font-size: 16px;
font-weight: 600;
padding-right:5px;
}
.common .meta span {
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
line-height: normal;
display: block;
gap: 5px;
/*width: 100%;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
}
.common .btns {
display: flex;
gap: 6px;
flex: 0 0 auto
}
.common .btn {
border: 1px solid currentColor;
display: flex;
height: 45px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 5px;
/*background: #FFF;*/
text-align: center;
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
font-family: "Pretendard";
flex: auto;
}
.common .btn.deleteBtnForMove:hover {
background: rgba(255,0,0,.02);
}
.common .btn.blue {
color: #2445AF
}
.common .btn.pink {
color: #B52F8B
}
.common .round-btn {
display: flex;
width: 72px;
height: 24px;
padding: 0 6px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 90px;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
}
.common .round-btn.gray {
color: #6A6E77;
background: #E5E7EC;
}
.common .round-btn.pink {
color: #B70669;
background: #F7EBF5;
}
/* ====================== 페이지네이션 ====================== */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 32px 0
}
.page-btn,
.page {
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
color: #6A6E77;
text-align: center;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
}
.page[aria-current="page"] {
background: #7A7F8C;
color: #fff;
font-weight: 700
}
.page:hover:not([aria-current]) {
background: #F7F7F7
}
.page-btn:hover {
border: 1px solid #ededed;
}
.page-btn svg {
width: 14px;
height: 14px;
display: block
}
.ellipsis {
border: none;
background: transparent;
width: auto;
height: auto;
color: #94A3B8;
cursor: default;
pointer-events: none;
flex: 0 0 auto
}
/* 하단 검색 */
.search-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 22px;
}
.search-bar select,
.search-bar input {
display: flex;
max-width: 130px;
width: 100%;
height: 45px;
padding: 0 10px 0 16px;
justify-content: space-between;
align-items: center;
border-radius: 5px;
border: 1px solid #B1B8BE;
}
.search-bar input {
width: 280px
}
.search-bar button {
display: flex;
padding: 0 15px;
/*width: 45px;*/
/*height: 45px;*/
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 5px;
background: #4C5160;
}
.search-bar button:before {
content: url("/img/designIcon/btn-search.png")
}
.search-bar button:hover {
outline: 2px solid #FFF;
background: #000925;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.stat-heading {
color: #000;
font-size: 27px;
font-weight: 800;
letter-spacing: -0.54px;
margin-bottom: 19px;
}
.stat-heading b {
color: #001F82;
font-size: 27px;
font-weight: 800;
letter-spacing: -0.54px;
}
/* ====================== 맨밑: 봉사 실적 요약(이미지 동일 구조) ====================== */
.stat-heading .stat-id {
color: #2563EB;
font-style: normal
}
.stat-box {
border: 0;
border-radius: 12px;
overflow: hidden
}
.stat-head {
height: 70px;
flex-shrink: 0;
border-radius: 12px 12px 0 0;
border-top: 1.5px solid #EAEAEA;
border-right: 1.5px solid #EAEAEA;
border-left: 1.5px solid #EAEAEA;
background: linear-gradient(92deg, #F8F8F8 0%, #FFF 25%, #FFF 75%, #F8F8F8 100%);
display: flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
flex-wrap: nowrap;
overflow: hidden;
padding-bottom: 20px;
}
.stat-chip {
color: #001F82;
font-size: 24px;
font-weight: 700;
line-height: 44px;
flex: 0 0 auto;
white-space: nowrap;
font-family: "Pretendard";
}
.stat-center {
color: #000;
font-size: 24px;
font-weight: 600;
line-height: 44px;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Pretendard";
}
.stat-center b {
font-weight: 700
}
.stat-panel {
border-radius: 0 0 12px 12px;
border: 1.5px solid #EAEAEA;
border-top: 0;
background: linear-gradient(92deg, #FAF2F0 0%, #FCF8E7 54.31%, #FFEDE2 100%);
padding: 55px 16px;
}
.stat-kpis {
list-style: none;
margin: 2px 0 14px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.kpi {
font-family: "Pretendard";
color: #000;
font-size: 30px;
font-weight: 600;
line-height: 44px;
display: flex;
align-items: center;
}
.kpi img {
padding-right: 8px;
}
.kpi span {
font-family: "Pretendard";
color: #001F82;
font-size: 30px;
font-weight: 700;
line-height: 44px;
}
.stat-sources {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 1130px;
width: 100%;
margin: 0 auto;
}
.stat-card {
background: #fff;
border: 1px solid #EFEFEF;
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
min-height: 64px;
justify-content: center;
}
.stat-card .img-boxWrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.src-fig {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
}
.src-fig img {
width: 22px;
margin-right: 5px;
}
#performance .src-fig .num {
font-family: "Pretendard";
color: #001F82;
}
#performance .highlight-magenta {
color: #B70669 !important;
}
#performance .src-fig .time {
font-family: "Pretendard";
color: #111827;
display: flex;
align-items: center;
padding-left: 10px;
}
#blood .lead {
display: flex;
flex-direction: column;
}
.t1 {
margin: 0 0 8px;
color: #000;
font-size: 26px;
font-style: normal;
font-weight: 800;
margin-bottom: 20px;
white-space: nowrap;
}
.t2 {
display: flex;
align-items: center;
gap: 10px;
color: #001048;
font-size: 23px;
font-weight: 800;
line-height: 28px;
margin-bottom: 17px;
}
.t3 {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
}
/* 표 기본 */
.info-table {
width: 100%;
border-bottom: 1px solid #DDD;
overflow: hidden;
background: #fff;
table-layout: fixed;
}
.info-table colgroup col.col-org {
width: 22%;
}
.info-table colgroup col.col-give {
width: 39%;
}
.info-table colgroup col.col-recv {
width: 39%;
}
.info-table thead th {
background: #EFF0F1;
font-weight: 700;
padding: 14px 16px;
border-right: 1px solid #E5E7EB;
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
}
.info-table thead th:first-child {
border-radius: 8px 0 0 8px;
}
.info-table thead th:last-child {
border-radius: 0 8px 8px 0;
}
.info-table thead th:last-child {
border-right: 0;
}
.info-table tbody td {
padding: 18px 16px;
border-right: 1px solid #EEF0F3;
vertical-align: middle;
}
#join .info-table tbody td {
text-align: center;
}
#join .info-table thead th {
padding: 10px;
}
.info-table tbody td p {
color: #4C5160;
font-family: 'Pretendard';
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
#join .info-table tbody td strong {
font-weight: 600;
font-family: 'Pretendard';
font-size: 16px;
color: #4C5160;
text-decoration: underline;
line-height: normal;
}
.info-table tbody td .org-box {
justify-content: center;
display: flex;
align-items: center;
gap: 14px;
min-height: 48px;
}
.info-table tbody td:last-child {
border-right: 0;
}
#blood .logo svg {
width: 100%;
height: 100%;
display: block;
}
#blood .dot-list {
list-style: none;
padding: 0;
margin: 0;
}
#blood .dot-list li {
position: relative;
padding-left: 14px;
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 170%;
}
#blood .dot-list li + li {
margin-top: 4px;
}
#blood .dot-list li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #9CA3AF;
line-height: 1.7;
}
#blood .org .logo svg {
width: 30px;
height: 30px;
display: block;
}
#blood .dots li {
margin: 6px 0;
}
#blood .dots li::marker {
color: #9CA3AF;
}
#blood .notice {
margin-top: 16px;
border-radius: 6px;
background: #FBF7F6;
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
line-height: 150%;
padding: 40px;
}
#blood .notice ul {
padding-top: 22px;
padding-left: 12px;
}
#blood .notice span{
color: #1D1D1D;
font-family: 'Pretendard';
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
#blood .notice .corp, #blood .notice b {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 150%;
}
#blood .notice .option {
color: #001F82;
font-family: "Pretendard";
font-size: 20px;
font-weight: 600;
line-height: 150%;
}
#blood .notice li {
margin: 4px 0;
font-size: 12px;
}
#blood .notice li.dim {
color: #8B8B8B;
margin: 0;
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 150%;
list-style: disc inside;
}
#blood .notice li.warn {
color: #B70669;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 150%;
margin: 0;
list-style: disc inside;
}
#blood .agree {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-weight: 600;
}
#blood .agree span {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 22px;
font-weight: 600;
line-height: 150%;
}
#blood fieldset {
border: 0;
}
/* 섹션 타이틀 */
#blood .section-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 18px;
color: #1D2843;
margin: 0 0 12px;
}
#blood .section-title::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #F43F5E;
display: inline-block;
}
/* 구분선 */
#blood .hr {
height: 1px;
background: #E5E7EB;
margin: 12px 0 18px;
}
/* 폼 그리드 */
#blood form {
display: block;
background: #fff;
padding: 40px;
border-top: 2px solid #414F78;
border-bottom: 1px solid #C9CDD3;
margin-bottom: 17px;
}
#blood .form-grid {
max-width: 645px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns:160px 1fr;
row-gap: 14px;
column-gap: 16px;
}
#blood .label {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
#blood .field {
display: block
}
/* 입력 공통 */
#blood .input {
width: 90%;
box-sizing: border-box;
height: 45px;
padding: 0 12px;
background: #fff;
outline: none;
border-radius: 5px;
border: 1px solid #B1B8BE;
}
#blood .input::placeholder {
color: #94A3B8
}
/*#blood .input:focus {*/
/* border-color: #6366F1;*/
/* box-shadow: 0 0 0 3px rgba(99, 102, 241, .15)*/
/*}*/
/* 주민번호 묶음 */
#blood .rrn-group {
width: 90%;
display: flex;
align-items: center;
gap: 10px
}
#blood .hyphen {
user-select: none;
color: #64748B
}
#blood .hyphen[aria-hidden="true"] {
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 19px;
font-weight: 500;
line-height: 150%;
}
/* 오류 메시지 */
#blood .error {
margin-top: 8px;
color: #DC2626;
font-size: 13px
}
#blood .input[aria-invalid="true"] {
border-color: #DC2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12)
}
/* 버튼 */
#blood .actions .btn {
display: flex;
width: 300px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin: 0 auto;
border-radius: 8px;
background: #B52F8B;
color: #FFF;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
}
#blood .actions .btn:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#blood .info {
display: flex;
align-items: center;
border-radius: 6px;
border: 1px solid #D6E0EB;
background: #EEF2F7;
padding: 16px;
align-items: center;
gap: 8px;
margin-bottom: 40px;
}
#blood .info .desc {
color: #001048;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 160%;
}
#blood .info .info-title {
display: flex;
align-items: center;
gap: 4px;
}
#blood .info .info-title p {
color: #001048;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 160%;
letter-spacing: 0;
}
#blood .input:disabled {
cursor: not-allowed;
opacity: 1;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #ECEDEE;
}
#blood .input--masked {
font-size: 40px;
line-height: 45px;
letter-spacing: -8px;
-webkit-text-security: disc;
}
#blood .input--masked {
-webkit-text-security: disc;
}
/*#blood .input:disabled:focus {*/
/* outline: none;*/
/* box-shadow: none;*/
/*}*/
.stat-agree {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}
.stat-card-wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 9px;
}
.stat-card-wrap .logo-box {
width: 300px;
/*height: 70px;*/
padding: 18px 0;
flex-shrink: 0;
border-radius: 90px;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
}
.stat-card-wrap p {
color: #1E2124;
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
line-height: 150%;
}
.stat-card-wrap span {
color: #B70669;
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
line-height: 150%;
}
#result .box-title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 16px;
}
#result .box-title p {
color: #000;
font-family: "Pretendard";
font-size: 30px;
font-weight: 700;
line-height: 44px;
}
#result .box-title .badge {
border-radius: 4px;
background: #B52F8B;
display: inline-flex;
height: 24px;
padding: 0 8px;
justify-content: center;
align-items: center;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 150%;
}
#result .info {
color: #333;
text-align: center;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
#result .info strong {
color: #333;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 30px;
}
.stat-blue {
color: #001F82;
font-family: "Pretendard";
font-size: 30px;
font-weight: 700;
line-height: 44px;
}
/* ======================================== */
/* 공통 테이블 변형 css(table) */
/* ======================================== */
caption {
overflow: hidden;
width: 1px;
height: 1px;
line-height: 0;
font-size: 0;
}
.table-wrap {
display: flex;
justify-content: space-between;
gap: 30px;
padding-top: 22px;
}
.table {
table-layout: fixed;
width: 100%;
word-break: normal;
}
.table thead {
position: sticky;
top: 0;
background-color: #FAFAFA;
}
.table.common thead th {
padding: 15px 12px;
text-align: center;
white-space: nowrap;
}
.table.common thead {
border-top: 2px solid #B52F8B;
border-bottom: 1px solid #DDD;
}
.table.common #table02-wrap thead, .table.common #table02-wrap .table tbody tr, .table.common #table02-wrap .table tbody th, .table.common #table02-wrap .table thead th {
border: 0 !important;
border-radius: 0 !important;
}
.table.common #table02-wrap .table thead th {
height: 0 !important;
border-radius: 0 !important;
}
.table.common #table02-wrap .table thead th {
padding: 8px 0;
border-radius: 0;
background: #F7F8F9;
font-size: 16px;
font-weight: 500;
font-family: "Pretendard";
}
.table.common #table02-wrap .table tbody td {
height: auto;
padding: 9px 0;
font-size: 16px;
font-weight: 500;
font-family: "Pretendard";
}
.table.common #table02-wrap .table tbody td a {
font-size: 16px;
font-weight: 500;
font-family: "Pretendard";
}
.table.common #table02-wrap {
border-radius: 0;
margin: 10px 0;
}
.table.common #table02-wrap .table thead tr {
border-bottom: 0 !important;
}
#table_table tbody tr:hover, .table.common #table02-wrap .table tbody tr:hover {
background: transparent;
}
.table.common .table.common thead th {
height: auto;
padding: 0;
}
.table-wrap h3 {
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 28px;
}
.table thead th {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
padding: 8px 12px;
text-align: start;
}
.table tbody tr:hover {
background: #FBF7F6;
}
.table tbody tr {
border-bottom: 1px solid #DDD;
}
#table01-wrap .table thead th {
background: #F9F4F8;
}
#table02-wrap .table thead th {
background: #EEF2F7;
}
#table03-wrap .table thead th {
background: #EFF0F1;
border-left: 1px solid #DDD;
}
#table03-wrap .table tbody td {
border-left: 1px solid #DDD;
}
#table03-wrap .table tbody td:first-child {
border-left: none;
}
#table03-wrap .table thead th:first-child {
border-left: none;
}
#transfer .table thead th {
text-align: center;
}
#transfer .table tbody td {
text-align: center;
}
#table01-wrap .table thead th:first-child,
#table02-wrap .table thead th:first-child,
#table03-wrap .table thead th:first-child {
border-radius: 10px 0 0 10px;
}
#v-accident .table tbody tr:hover {
background: transparent;
}
#table01-wrap .table thead th:last-child,
#table02-wrap .table thead th:last-child,
#table03-wrap .table thead th:last-child {
border-radius: 0 10px 10px 0 !important;
}
/** 중간중간 tr 배경 색 넣기 **/
/*.noticeTable.table tbody tr:nth-child(even),*/
/*.inquiryTable.table tbody tr:nth-child(even) {*/
/* background-color: #f8fafd;*/
/*}*/
.noticeTable.table tbody tr.fixed-notice {
background: #FFFAFE;
}
/*.noticeTable.table tbody tr.fixed-notice {*/
/* border-bottom: 1px solid #707070cc;*/
/*}*/
/*.noticeTable.table tbody tr.last-fixed-notice {*/
/* border-bottom: none !important;*/
/*}*/
/** 중간중간 tr 배경 색 넣기 **/
/*.noticeTable.table tbody tr:not(.fixed-notice):nth-child(even),*/
/*.inquiryTable.table tbody tr:not(.fixed-notice):nth-child(even) {*/
/* background-color: #f8fafd;*/
/*}*/
.noticeTable.table tbody tr.fixed-notice th:first-child,
.noticeTable.table tbody tr.fixed-notice td:first-child {
border-radius: 0 !important;
}
.noticeTable.table tbody tr.fixed-notice th:last-child,
.noticeTable.table tbody tr.fixed-notice td:last-child {
border-radius: 0 !important;
}
.noticeTable.table tbody tr.fixed-notice span {
background-color: #B52F8B;
color: white;
border: none;
font-size: 13px;
font-weight: 800;
border-radius: 4px;
}
/*.noticeTable.table tbody tr.fixed-notice th:first-child,*/
/*.noticeTable.table tbody tr.fixed-notice td {*/
/* font-weight: 800;*/
/*}*/
.noticeTable.table tbody tr.fixed-notice td[data-content="제목"] a {
color: #000;
font-family: "Pretendard";
font-size: 19px;
font-weight: 600;
}
/*.noticeTable.table tbody tr.fixed-notice td[data-content="작성자"],*/
/*.noticeTable.table tbody tr.fixed-notice td[data-content="작성일"] {*/
/* font-weight: 600;*/
/* color: #444;*/
/*}*/
#board .table tbody td {
text-align: center;
}
.table tbody th,
.table tbody td {
overflow: hidden;
color: #444;
vertical-align: middle;
text-align: center;
font-family: "Pretendard";
font-size: 18px;
font-weight: 300;
line-height: 130%;
letter-spacing: -0.1px;
height: 58px;
text-overflow: ellipsis;
}
.table tbody td[data-content="제목"] {
text-align: start;
position: relative;
}
.table tbody td[data-content="제목"] img {
position: absolute;
right: 20px;
}
.table tbody td[data-content="번호"] {
color: #6A6E77 !important;
}
.table tbody td[data-content="번호"],
.table tbody td[data-content="작성자"],
.table tbody td[data-content="등록일"],
.table tbody td[data-content="첨부파일"],
.table tbody td[data-content="조회수"] {
color: #333;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
}
.table tbody td {
white-space: nowrap;
padding: 0 10px;
text-align: start;
}
.table.table-a tbody td {
text-align: center;
}
.table.table-a tbody td a {
width: auto;
}
.table.table-a tbody td.homepage a:hover {
box-shadow: 0 0 0 2px rgba(181, 47, 139, .2);
border-radius: 6px;
}
/*.table tbody td img {*/
/* width: 20px;*/
/*}*/
.table tbody th,
.table tbody td:first-child {
border-radius: 10px 0 0 10px;
}
.table tbody td:last-child {
border-radius: 0 10px 10px 0;
}
#stats .table tbody td:last-child {
border-radius: 0;
}
.table tbody td a {
/*color: #000;*/
font-family: "Pretendard";
font-size: 19px;
font-weight: 600;
display: block;
align-items: center;
/*width: 500px;*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*height: 100%;*/
text-align: start;
}
.table tbody td a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.table tfoot th,
.table tfoot td {
padding: 12px 20px;
border-bottom: 1px solid #dedede;
background: #f7f8f9;
}
.table tbody td .subject {
overflow: hidden;
display: block;
color: #222;
font-size: 18px;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.table tbody th,
.table tbody td span {
border-radius: 30px;
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 스크롤 테이블 */
.table-scroll-wrap {
width: 100%;
height: fit-content;
overflow: auto;
display: flex;
flex-direction: column;
padding: 30px 0;
}
.table-scroll-wrap .table,
.table-scroll-wrap .board-foot {
width: 100%;
min-width: 1000px;
margin: 0;
}
.table-scroll-wrap.w-1200 .table,
.table-scroll-wrap.w-1200 .board-foot {
min-width: 1200px;
}
.table-scroll-wrap.w-1400 .table,
.table-scroll-wrap.w-1400 .board-foot {
min-width: 1400px;
}
.table-scroll-wrap.w-1600 .table,
.table-scroll-wrap.w-1600 .board-foot {
min-width: 1600px;
}
.table-scroll-wrap .table colgroup col {
width: revert-layer !important;
}
.table-scroll-wrap .table td {
padding: 10px 20px !important;
}
#result .help-box {
margin-top: 23px;
margin-bottom: 72px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#result .help-box ul li {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 180%;
list-style: disc inside;
}
#result .help-box ul li strong {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 180%;
list-style: disc inside;
}
#result .help-box button {
display: flex;
width: 300px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid #58616A;
background: #FFF;
color: #000;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
gap: 20px;
}
#result .help-box button:hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#result .sec-txtBox {
display: flex;
align-items: flex-start;
gap: 31px;
}
#result .sec-btnWrap {
display: flex;
align-items: center;
gap: 12px;
}
#result .sec-btnWrap button {
display: inline-flex;
height: 34px;
padding: 0 12px 0 8px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 6px;
border: 1px solid #58616A;
color: #333;
text-align: center;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 150%;
}
#result .sec-btnWrap button:hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#result .sec-btnWrap span {
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 25px;
}
#result #submitBtn {
display: flex;
width: 300px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
border-radius: 8px;
background: #B52F8B;
color: #FFF;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
margin: 0 auto;
}
#result .table-wrap {
margin-bottom: 50px;
}
/* === 테이블 Y 스크롤 전용 + 헤더 고정 === */
#table01-wrap,
#table02-wrap,
#table03-wrap {
position: relative;
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 8px;
background: #fff;
-webkit-overflow-scrolling: touch;
}
.sec-txtBox {
display: flex;
gap: 20px;
}
.sec-txtBox span {
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 25px;
}
.center-search span {
color: var(--deep-navy);
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
padding-bottom: 22px;
display: flex;
justify-content: center;
}
.center-search span b {
color: var(--deep-navy);
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
letter-spacing: -0.2px;
}
#transfer .table-title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
#transfer .table-title h3 {
color: #001048;
font-size: 20px;
font-weight: 800;
line-height: 28px;
}
#transfer .table-title span {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.8px;
}
#transfer .table-title span strong {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.8px;
}
#transfer .panel__head {
background: #F2F5FA;
padding: 10px 14px;
border-top: 2px solid #414F78;
}
#transfer .panel__title {
margin: 0;
color: #001048;
text-align: center;
font-size: 23px;
font-style: normal;
font-weight: 800;
line-height: 28px;
}
#transfer .panel__body {
padding: 36px 0;
}
#transfer .form-grid {
display: grid;
grid-template-columns: 140px 235px 140px 1fr;
gap: 14px 0;
align-items: center;
max-width: 968px;
width: 100%;
margin: 0 auto;
}
#transfer .label {
color: #000;
leading-trim: both;
text-edge: cap;
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 150%;
justify-self: start;
white-space: nowrap;
}
#transfer .field {
width: 100%;
padding-right: 80px;
}
#transfer .input {
width: 100%;
height: 38px;
padding: 8px 12px;
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #FFFFFF;
color: #111;
outline: none;
transition: box-shadow .15s, border-color .15s, background .15s;
}
#transfer .input::placeholder {
color: #232323
}
#transfer .input[readonly], .input:read-only {
border-radius: 8px;
border: 2px dashed;
padding: 12px;
color: #232323;
cursor: default;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
#transfer .input--code {
max-width: 220px;
}
#transfer .input--code.pattern{
max-width: 220px;
}
#transfer .search-bar {
gap: 12px;
}
#transfer #search-type {
max-width: 180px;
width: 100%;
color: #232323;
}
#transfer .search-bar input {
max-width: 400px;
width: 100%;
}
#transfer .search-bar button {
padding: 15px 24px 15px 20px;
width: auto;
flex-direction: row;
color: #FFF;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
#transfer .search-bar button:before {
display: none;
}
#transfer .filter-actions {
flex: 0 0 auto;
}
#transfer .center-search {
flex-shrink: 0;
border-top: 1px solid #C9CDD3;
border-bottom: 1px solid #C9CDD3;
background: #F4F5F6;
padding: 30px 41px;
}
#transfer .center-search span {
padding: 0;
}
#transfer .search-tableWrapper {
border-radius: 12px;
border: 1px solid #EAEAEA;
background: #FFF;
padding: 38px 41px;
margin-top: 30px;
overflow: hidden;
}
#transfer .sec-txtBox {
margin-bottom: 20px;
}
#transfer .redImportant {
color: red;
}
.table-flex h3 {
margin-bottom: 10px;
}
/* === 모달 기본 === */
.eval-modal {
border: 0;
padding: 0;
width: min(900px, calc(100vw - 32px));
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
}
.eval-modal::backdrop {
background: rgba(17, 17, 17, .55)
}
.eval-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
color: #fff;
font-weight: 800;
letter-spacing: -.2px;
border-radius: 12px 12px 0 0;
background: linear-gradient(90deg, #C84791 7%, #75479C 50.6%, #3F5DA8 94.2%);
height: 60px
}
.eval-head h3 {
margin: 0;
font-size: 23px;
font-weight: 800;
line-height: 24px
}
.eval-close {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 6px;
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer
}
/*.eval-close:focus {*/
/* outline: 2px solid #fff;*/
/* outline-offset: 2px*/
/*}*/
.eval-body {
background: #fff;
padding: 18px 18px 20px
}
.eval-kv {
width: 100%;
overflow: hidden;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
border-collapse: separate;
border-spacing: 0;
background: #fff
}
.eval-kv tr + tr td, .eval-kv tr + tr th {
border-top: 1px solid #EEF0F3
}
.eval-kv th, .tbl-basic th {
width: 18%;
padding: 10px 12px;
background: #F8FAFC;
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 19px;
font-weight: 600;
line-height: 150%
}
.eval-kv td {
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 170%;
padding: 10px 12px
}
.rate-list {
margin: 14px 0 6px;
overflow: hidden;
border-radius: 6px;
background: #FBF7F6
}
.rate-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px
}
.rate-item + .rate-item {
border-top: 1px dashed #CCC
}
.rate-title {
flex: 1;
color: #001048;
font-size: 18px;
font-weight: 800;
line-height: 28px
}
/* ===== 별점 UI (5개, 0.5 스텝) ===== */
.rating {
--star-size: 26px;
--empty: #D1D5DB;
--fill-grad: linear-gradient(90deg, #FFD74A 0%, #FDBF00 100%);
position: relative;
width: calc(var(--star-size) * 5);
height: var(--star-size);
display: inline-block;
outline: 0
}
/* 시각적 별 레이어 (회색 바탕) */
.rating .stars {
position: relative;
width: 100%;
height: 100%
}
.rating .bg, .rating .fg {
position: absolute;
inset: 0;
background: var(--empty);
-webkit-mask: var(--star-mask) left center/var(--star-size) var(--star-size) repeat-x;
mask: var(--star-mask) left center/var(--star-size) var(--star-size) repeat-x;
}
.rating .fg {
background: var(--fill-grad);
width: calc((var(--val, 2) / 10) * 100%);
pointer-events: none
}
/* 클릭 (5개) */
.rating .hit {
position: absolute;
top: 0;
width: var(--star-size);
height: 100%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer
}
/*.rating .hit:focus-visible {*/
/* outline: 2px solid #111;*/
/* outline-offset: 3px*/
/*}*/
.rating .hit[data-i="1"] {
left: calc(var(--star-size) * 0)
}
.rating .hit[data-i="2"] {
left: calc(var(--star-size) * 1)
}
.rating .hit[data-i="3"] {
left: calc(var(--star-size) * 2)
}
.rating .hit[data-i="4"] {
left: calc(var(--star-size) * 3)
}
.rating .hit[data-i="5"] {
left: calc(var(--star-size) * 4)
}
.eval-actions {
display: flex;
justify-content: center;
padding-top: 14px
}
.eval-submit {
width: 100%;
max-width: 150px;
height: 45px;
border: 0;
border-radius: 8px;
cursor: pointer;
color: #fff;
font-weight: 800;
text-align: center;
font-family: "Pretendard";
font-size: 16px;
line-height: 150%;
background: #7C3AED
}
/*.eval-submit:focus {*/
/* outline: 3px solid #FECDD3;*/
/* outline-offset: 2px*/
/*}*/
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
overflow-wrap: anywhere;
word-break: keep-all;
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 170%
}
.map {
width: 100%;
}
#centerInfo .t1 {
margin-top: 40px;
margin-bottom: 15px;
}
#applicationResults .total, #applicationResults .total span {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.8px;
}
#applicationResults .total span {
font-weight: 800;
}
#applicationResults .list-topBar {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 16px;
}
#applicationResults .btn-wrap {
display: flex;
width: 100%;
margin-bottom: 20px;
justify-content: flex-end;
}
/* 상단 요약 */
.common .summary {
font-size: 13px;
color: #111;
margin-bottom: 14px
}
.common .summary a {
color: #4F46E5;
text-decoration: none;
font-weight: 700
}
/* 리스트 */
.common .card-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 27px 33px;
align-items: stretch;
}
#webzin .card-list, #gallery .card-list {
display: block;
}
/* 4열 기준 */
.common .card {
height: 280px;
background: #FFFFFF;
border: 1px solid #E6E9F0;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
display: flex;
flex-direction: column;
}
.common {
margin-top: 25px;
}
.common .card a:hover, .card-grid a:hover, .card-grid a:focus-visible {
border-radius: 15px;
border: 1.5px solid #B52F8B;
background: #FFFAFE;
box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.04);
}
*:focus-visible
{
outline: 2px dashed var(--focus) !important;
outline-offset: 2px !important;
z-index: 9999;
}
#phone-panel .save-check:focus-visible {
outline: 2px dashed var(--focus) !important;
outline-offset: 2px !important;
}
#phone-panel .save-check:focus:not(:focus-visible) {
outline: none !important;
}
footer a:focus-visible,
footer button:focus-visible,
footer [role="button"]:focus-visible,
footer input:focus-visible,
footer select:focus-visible,
footer textarea:focus-visible,
.center .card-rightBox .card-banner .button-link:focus-visible
{
outline: 2px dashed var(--focus-outer) !important;
outline-offset: 2px !important;
}
.card-banner .button-link{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border: 1px solid var(--line, #E5E7EB);
text-decoration: none;
}
.focus-host { position: relative; }
.focus-host:focus-within{
outline: 3px solid var(--focus-outer);
outline-offset: 4px;
}
.common .card > a {
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
color: inherit;
padding: 25px 27px;
position: relative;
height: 100%;
}
/* 상단 칩들 */
.common .chips {
display: flex;
gap: 6px
}
.common .title-wrap {
position: relative;
display: flex;
flex-direction: column;
min-width: 0
}
.common .title {
margin: 0;
position: relative;
color: #000;
font-family: "Pretendard";
font-size: 21px;
font-weight: 700;
line-height: 26px;
letter-spacing: -0.42px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 2줄까지만 표시 */
line-clamp: 2; /* 표준 속성(지원 브라우저용) */
overflow: hidden;
text-overflow: ellipsis; /* … 표시 */
padding-right: 22px; /* 우측 N 뱃지 공간 */
/*word-break: keep-all; */
}
/*.common .badge-n {*/
/* position: absolute;*/
/* right: -25px;*/
/* top: 0;*/
/* width: 16px;*/
/* height: 16px;*/
/* border-radius: 50%;*/
/* background: #FB6A1C;*/
/* color: #fff;*/
/* font-size: 10px;*/
/* font-weight: 900;*/
/* line-height: 16px;*/
/* text-align: center;*/
/*}*/
.common .badge-h {
position: sticky;
right: 5px;
top: 0;
width: 18px;
height: 18px;
border-radius: 50% !important;
background: #08660e !important;
color: #fff;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 18px;
text-align: center;
flex-shrink: 0;
padding: 0;
border: 0 !important;
}
.common .badge-b {
position: sticky;
right: 5px;
top: 0;
padding: 0;
width: 18px;
height: 18px;
border-radius: 50% !important;
background: #FB6A1C !important;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 18px;
text-align: center;
flex-shrink: 0;
border: 0;
}
.common .title .badge-b {
position: absolute;
}
#card02 .badge-b {
right: 24px;
top: 23px;
}
#gallery .badge-b {
position: absolute;
top: 15px;
}
/* 기관명 */
.common .org {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 300;
line-height: 28px;
}
/* 날짜(제목/기관 바로 아래에 단독 라인) */
.common .m-left-box {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
color: #000;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
border-bottom: 1px solid #D9D9D9;
padding-bottom: 10px;
margin-bottom: 20px;
margin-top: auto;
position: relative;
flex-direction: column;
}
.common .m-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: #4b4b4b;
font-family: "Pretendard";
font-size: 13px;
font-weight: 400;
margin-top: auto;
position: relative;
flex-wrap: wrap;
}
.common .m-left h5 {
font-weight: 500;
font-family: "Pretendard";
font-size: 14px;
color: #000000;
}
.common .m-left svg {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: #94A3B8
}
/* 구분선: 날짜 아래 */
.common .split {
position: relative;
height: 1px;
background: #E6E9F0;
margin: 8px 0 2px
}
/* var(--line) */
.common .meta {
display: flex;
align-items: center;
gap: 8px
}
.common .m-right {
display: flex;
align-items: center;
gap: 8px;
position: absolute;
right: 16px;
bottom: 16px;
margin: 0;
z-index: 1;
width: max-content;
justify-content: flex-end;
}
.common .count {
font-size: 12px;
font-weight: 800;
color: #111
}
.common .state {
height: 24px;
line-height: 24px;
border-radius: 7px;
padding: 0 10px;
font-size: 12px;
font-weight: 800
}
.common .state.on {
display: flex;
width: 72px;
height: 24px;
padding: 0 6px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 90px;
background: #F7EBF5;
color: #B70669;
font-family: "Pretendard";
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.common .state.off {
display: flex;
width: 72px;
height: 24px;
padding: 0 6px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 90px;
background: #E5E7EC;
color: #6A6E77;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 22px;
}
.common .m-left svg {
width: 16px;
height: 16px;
flex: 0 0 14px;
color: #94A3B8
}
.common .meta {
gap: 8px;
}
.common .title-wrap {
position: relative;
min-width: 0;
}
.common .search-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
margin-top: 10px;
}
.common .title-top-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 25px;
}
.common-total {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.8px;
}
.common-total span {
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.8px;
padding-left: 5px;
}
.common-total b {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.8px;
}
.common .search-bar button {
width: auto;
height: auto;
padding: 12px 14px;
}
.common .search-bar input {
max-width: none;
}
.common .grid {
display: grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap: 27px 33px;
}
#gallery .grid {
display: grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap: 38px;
}
/* ===== 카드 공통 ===== */
a.card-list {
display: block;
position: relative;
background: #fff;
border: 1px solid #E6E9F0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
text-decoration: none;
color: inherit;
overflow: hidden;
}
.common a.card-list:hover {
box-shadow: 0 4px 14px rgba(15, 23, 42, .08)
}
/*.common a.card-list:focus-visible {*/
/* outline: 3px solid #9159f6;*/
/* outline-offset: 2px*/
/*}*/
.common .card__inner {
display: grid;
grid-template-columns:140px 1fr;
column-gap: 29px;
min-height: 160px;
padding: 30px 33px;
width: 100%;
}
#gallery .card__inner {
display: flex;
flex-direction: column;
}
.common .card__inner .content {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: space-around;
}
.common .media {
width: 140px;
height: 160px;
overflow: hidden;
}
#gallery .media {
width: auto;
height: auto;
overflow: hidden;
}
.common .media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
#gallery .media img {
max-width: 384px;
max-height: 268px;
width: 100%;
height: 100%;
}
.common .content {
min-width: 0
}
.common .card__inner .content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-around;
gap: 4px;
}
#gallery .card__inner {
height: 445px;
}
.common .card__inner .content .txt-box {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
min-width: 0;
}
.common .card__inner .content .txt-box .name {
position: relative;
}
.common .content .org {
display: block;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
}
.common .card__inner .content .title .title__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
font-family: "Pretendard";
font-size: 21px;
font-weight: 700;
line-height: 28px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
#gallery .card__inner .content .title {
padding-top: 10px;
}
.common .month-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.common .month-row .label {
color: #001F82;
font-family: "Pretendard";
font-size: 16px;
font-weight: 600;
}
.common .month-row .value {
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
}
.common .tail {
position: absolute;
right: 31px;
bottom: 21px;
display: flex;
align-items: center;
gap: 6px;
color: #6B7280;
font-size: 12px;
width: 95px;
height: 32.828px;
flex-shrink: 0;
border-radius: 90px;
background: #F4F5F6;
justify-content: center;
}
.common .tail span {
color: #5F6B8A;
text-align: center;
font-family: "Pretendard";
font-size: 14px;
font-weight: 500;
line-height: 150%;
display: flex;
align-items: center;
gap: 2px;
}
.common .tail span b {
color: #5F6B8A;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 150%;
}
.common .poster {
width: 140px;
height: 160px;
overflow: hidden;
background: #F2F3F6;
border: 1px solid #EDF0F5
}
.common .poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
/* ===== 제목: 짧으면 fit-content, 길면 … ===== */
.common .card__inner .content {
min-width: 0;
}
.common .card__inner .content .txt-box {
width: 100%;
min-width: 0;
}
.common .card__inner .content .title {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
white-space: nowrap;
}
/* 기본은 '… 처리 모드'(width:100%) */
.common .card__inner .content .title__text {
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 짧을 땐 자동으로 콘텐츠 너비만 사용 */
.common .card__inner .content .title__text.fit {
width: fit-content;
}
.common .card__inner .badge-b {
position: unset;
}
.common .card__inner:hover {
border-radius: 10px;
border: 1.5px solid #B52F8B;
background: #FFFAFE;
box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.04);
}
#card02 .vmsC2-cards {
display: grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap: 27px 33px;
list-style: none;
padding: 0;
margin: 0;
align-items: stretch;
position: relative;
}
#card02 .vmsC2-item {
min-width: 0
}
#card02 .vmsC2-card {
display: grid;
grid-template-rows: auto auto 1fr auto;
height: 195px;
padding: 30px 27px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid #DDD;
background: #FFF;
box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.04);
}
#card02 .vmsC2-card:hover {
border-radius: 10px;
border: 1.5px solid #B52F8B;
background: #FFFAFE;
box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, .04);
}
#card02 .vmsC2-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px 0;
min-width: 0;
}
#card02 .vmsC2-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 22px;
padding: 0 8px;
border-radius: 6px;
background: #7C3AED;
color: #fff;
font-weight: 800;
font-size: 12px;
flex: 0 0 auto;
}
.vmsC2-titleWrap {
display: flex;
align-items: center;
gap: 6px;
/*flex:1 1 auto; */
min-width: 0;
height: 100%;
}
.vmsC2-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*flex: 1 1 auto;*/
min-width: 0;
color: #000;
font-family: "Pretendard";
font-size: 21px;
font-weight: 700;
line-height: 26px;
letter-spacing: -0.42px;
}
#card02 .vmsC2-addr {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#card02 .vmsC2-spacer {
block-size: 1px;
inline-size: 1px;
visibility: hidden
}
#card02 .vmsC2-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 28px;
align-content: flex-start;
align-items: baseline;
margin-top: 12px;
max-height: 54px;
}
#card02 .vmsC2-metaItem {
display: flex;
gap: 6px;
align-items: baseline;
min-width: 0
}
#card02 .vmsC2-metaLabel {
color: #001F82;
font-family: "Pretendard";
font-size: 16px;
font-weight: 600;
flex: 0 0 auto
}
#card02 .vmsC2-metaValue {
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0
}
.popup-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, .55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.popup-backdrop[hidden] {
display: none
}
#homePopupLayer .swiper-button-prev,
#homePopupLayer .swiper-button-next {
z-index: 3
}
#homePopupLayer .popup__pager {
display: flex;
align-items: center;
gap: 8px;
position: static !important;
width: auto !important;
}
#homePopupLayer .popup__pager .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: #FFFFFF;
opacity: .35;
margin: 0 !important;
}
#homePopupLayer .popup__pager .swiper-pagination-bullet-active {
opacity: 1
}
#homePopupLayer .popup {
width: min(92vw, 440px);
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
position: relative;
}
#homePopupLayer .main-popup-wrap {
border-radius: 15px;
height: 600px;
overflow-y: scroll;
}
#certPopupTitle {
font-size: 24px;
font-weight: 700;
font-family: "Pretendard";
}
#homePopupLayer .popup__close {
position: absolute;
top: -8px;
right: -6px;
width: 40px;
height: 40px;
border: none;
cursor: pointer;
border-radius: 50%;
background: rgba(17, 17, 17);
color: #fff;
font-size: 20px;
line-height: 40px;
box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
z-index: 9999;
}
/*#homePopupLayer .popup__close:focus-visible {*/
/* outline: 2px solid #fff;*/
/* outline-offset: 2px*/
/*}*/
/* 스와이퍼 */
#homePopupLayer .popup .swiper {
width: 100%;
background: #fff;
}
#homePopupLayer .popup .swiper-slide {
width: fit-content !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: static;
height: auto;
}
#homePopupLayer .popup .swiper-slide a {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
width: 100%;
background-color: var(--accent);
color: #fff;
font-family: "Pretendard";
font-size: 17px;
font-weight: 600;
position: absolute;
bottom: 0;
}
#homePopupLayer .popup .swiper-slide .swiper-img {
display: block;
width: 100%;
height: 100%;
object-fit: fill;
}
#homePopupLayer .popup .swiper-button-prev,
#homePopupLayer .popup .swiper-button-next {
color: #111111;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, .92);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
#homePopupLayer .popup .swiper-button-prev:after,
#homePopupLayer .popup .swiper-button-next:after {
font-size: 16px
}
/* 아이핀 발급 안내 팝업 전용 */
#ipinPopupLayer .swiper-button-prev,
#ipinPopupLayer .swiper-button-next {
z-index: 3
}
#ipinPopupLayer .popup__pager {
display: flex;
align-items: center;
gap: 8px;
position: static !important;
width: auto !important;
}
#ipinPopupLayer .popup__pager .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: #FFFFFF;
opacity: .35;
margin: 0 !important;
}
#ipinPopupLayer .popup__pager .swiper-pagination-bullet-active {
opacity: 1
}
#ipinPopupLayer .popup {
width: min(72vw, 500px);
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
position: relative;
}
#ipinPopupLayer .main-popup-wrap {
border-radius: 15px;
height: 600px;
overflow-y: auto;
scrollbar-gutter: stable;
}
#ipinPopupLayer .popup__close {
position: absolute;
top: -58px;
right: -6px;
width: 40px;
height: 40px;
border: none;
cursor: pointer;
border-radius: 50%;
background: rgba(17, 17, 17, .7);
color: #fff;
font-size: 20px;
line-height: 40px;
box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
z-index: 9999;
}
/*#ipinPopupLayer .popup__close:focus-visible {*/
/* outline: 2px solid #fff;*/
/* outline-offset: 2px*/
/*}*/
/* 스와이퍼 */
#ipinPopupLayer .popup .swiper {
width: 100%;
background: #fff;
}
#ipinPopupLayer .popup .swiper-slide {
width: fit-content !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#ipinPopupLayer .popup .swiper-slide a {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
width: 100%;
background-color: var(--accent);
color: #fff;
font-family: "Pretendard";
font-size: 17px;
font-weight: 600;
}
#ipinPopupLayer .popup .swiper-slide .swiper-img {
display: block;
width: 100%;
height: 100%;
object-fit: fill;
}
#ipinPopupLayer .popup .swiper-button-prev,
#ipinPopupLayer .popup .swiper-button-next {
color: #111111;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, .92);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
#ipinPopupLayer .popup .swiper-button-prev:after,
#ipinPopupLayer .popup .swiper-button-next:after {
font-size: 16px
}
/* 아이핀 발급 안내 팝업 전용 끝 */
.popup__today {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 20px 24px;
background: #111111;
color: rgba(255, 255, 255, .9);
font-size: 13px;
}
.popup__today label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
font-size: 14px;
font-weight: 700;
}
.popup__today input {
width: 16px;
height: 16px
}
#specialty select {
width: 100%;
}
#group-name {
width: 100%;
height: 45px;
}
.apply-box {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.apply-box p {
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.apply-box button {
display: flex;
height: 42px;
padding: 0 24px;
align-items: center;
gap: 4px;
border-radius: 90px;
background: #B52F8B;
text-align: center;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
color: white;
}
.apply-box button:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#specialty .total {
color: #111;
font-size: 18px;
font-weight: 500;
font-family: "Pretendard";
letter-spacing: -0.52px;
}
#specialty .total span {
color: #001F82;
font-size: 18px;
font-weight: 700;
font-family: "Pretendard";
letter-spacing: -0.52px;
padding-left: 4px;
}
#volunteer_apply .info-t02{
color: #B70669;
font-family: Pretendard;
font-size: 18px;
font-weight: 500;
line-height: 150%;
}
#volunteer_apply .note {
color: #B70669;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
margin-bottom: 20px;
margin-top: 50px;
}
#volunteer_apply .note b {
font-weight: 700
}
#volunteer_apply .card {
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
#volunteer_apply .adv-panel {
background: #EEF4FA;
border-bottom: 1px solid #E2E8F0;
border-radius: 10px 10px 0 0;
padding: 35px;
}
#volunteer_apply .adv-grid {
display: grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap: 12px 30px;
align-items: center;
}
#volunteer_apply .col-span-2 {
grid-column: 1 / -1
}
#volunteer_apply .col-span-3 {
grid-column: 2 / -3;
}
#volunteer_apply .adv-grid .field, #volunteer_apply .adv-block .field {
display: flex;
align-items: center;
min-width: 0
}
#volunteer_apply .adv-grid .field {
gap: 30px;
}
#volunteer_apply .adv-block .adv-inner .adv-grid:nth-child(2) {
padding-top: 20px;
}
#volunteer_apply .adv-block .field {
gap: 30px;
}
#volunteer_apply .adv-grid .field .checkline label {
color: #1D1D1D;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
}
#volunteer_apply .adv-block .field .date-wrap {
display: flex;
width: 100%;
align-items: center;
}
#volunteer_apply .field > label,
#volunteer_apply .field > .label {
flex: 0 0 120px;
white-space: nowrap;
font-weight: 600;
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
}
#volunteer_apply .field .control {
flex: 1 1 0;
min-width: 0;
display: flex;
gap: 20px;
}
#volunteer_apply select,
#volunteer_apply input[type="text"],
#volunteer_apply input[type="date"] {
width: 100%;
}
#volunteer_apply input[type="text"] {
height: 45px;
border-radius: 5px;
border: 1px solid #B1B8BE;
}
#volunteer_apply input[type="text"]::placeholder {
color: #555960;
opacity: 1;
}
#volunteer_apply .checkline {
display: flex;
align-items: center;
gap: 10px
}
#volunteer_apply .checkline input {
width: 18px;
height: 18px
}
#volunteer_apply .adv-block {
background: #F7F8F9;
overflow: hidden;
}
#volunteer_apply .adv-inner {
padding: 20px 35px;
border-bottom: 1px solid #E2E8F0;
}
#volunteer_apply .tilde {
margin: 0 4px;
flex: 0 0 auto;
color: #333;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
}
#volunteer_apply .adv-footer {
display: flex;
justify-content: flex-end;
background: #F7F8F9;
padding: 6px 10px;
}
#volunteer_apply .btn-fold {
appearance: none;
border: 0;
background: transparent;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
color: #1D1D1D;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
letter-spacing: -0.2px;
}
#volunteer_apply .btn-fold .tri {
width: 25px;
height: 25px;
display: inline-block;
transition: transform .18s ease;
background: no-repeat center/contain url('/img/designIcon/minus-black.png');
}
#volunteer_apply .btn-fold[aria-expanded="false"] .tri {
background-image: url('/img/designIcon/plus-black.png');
transform: none;
}
/*#volunteer_apply .btn-fold:focus-visible {*/
/* outline: 2px solid #94A3FF;*/
/* outline-offset: 2px;*/
/* border-radius: 6px*/
/*}*/
#volunteer_apply .btn-fold[aria-expanded="false"] .tri {
transform: rotate(180deg)
}
#volunteer_apply .actions {
display: flex;
justify-content: center;
padding: 14px 18px 20px
}
#volunteer_apply .btn-primary {
height: 40px;
min-width: 120px;
padding: 0 18px;
background: #4059F2;
color: #fff;
border: 0;
border-radius: 8px;
cursor: pointer;
font-weight: 800;
}
/*#volunteer_apply .btn-primary:focus-visible {*/
/* outline: 2px solid #94A3FF;*/
/* outline-offset: 2px*/
/*}*/
#stats .notes {
margin: 6px 0 14px;
padding-left: 1em;
color: #6B7280;
font-size: 13px;
padding-top: 50px
}
#stats .notes li {
margin: .2em 0;
list-style: disc inside;
color: #333;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
line-height: 20px;
}
#stats {
--year-color: #47568C;
}
#stats .section-title .year {
color: #B70669;
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
}
#stats .year-filter {
display: grid;
grid-template-columns: repeat(8, 120px);
grid-auto-rows: 44px;
gap: 14px 20px;
place-content: start;
width: 100%;
}
#stats .year-filter button span {
font-family: "Pretendard";
font-size: 17px;
font-weight: 500;
line-height: 28px;
}
#stats .year-filter button {
font-family: "Pretendard";
border: 1px solid #E5E7EB;
background: #fff;
height: 44px;
padding: 0 18px;
min-width: 86px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
letter-spacing: -.2px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
transition: .15s ease;
}
#stats .year-filter button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(17, 24, 39, .08)
}
#stats .year-filter button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(17, 24, 39, .10)
}
/*#stats .year-filter button:focus-visible {*/
/* outline: none;*/
/* box-shadow: 0 0 0 3px rgba(64, 89, 242, .20)*/
/*}*/
#stats .year-filter button[aria-pressed="true"] {
background: #47568C;
color: #fff;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
}
#stats .year-filter-wrap {
background: #F3F4F6;
border-radius: 8px;
padding: 18px 22px;
margin: 30px 0 40px;
}
#stats .year-filter {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-auto-rows: 44px;
gap: 14px 20px;
place-content: start;
width: 100%;
}
#stats .section-title {
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 500;
line-height: 30px;
letter-spacing: -0.2px;
display: flex;
align-items: center;
gap: 6px;
margin: 8px 0 10px;
}
#stats .section-title::before {
content: "▸";
color: #E11D6A
}
#stats #sectionTitle {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
line-height: 30px;
letter-spacing: -0.2px;
}
#stats .card {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(17, 24, 39, .08)
}
#stats .table-card {
background: #FFFFFF;
border: 1px solid #E5E7EB;
overflow: hidden;
margin-bottom: 50px;
}
#stats .chart-card {
padding: 0
}
#stats .chart-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch
}
#stats .chart-stage {
min-width: 1100px;
padding: 50px 40px;
}
#stats #activityChart {
display: block;
width: 100%;
height: 360px
}
#stats .meta {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 8px;
color: #6B7280;
font-size: 13px;
margin-top: 50px
}
#stats .meta .total {
color: #000;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 30px;
letter-spacing: -0.2px;
}
#stats .total #totalCount {
font-family: "Pretendard";
color: #001F82;
font-weight: 600;
}
#stats .table {
width: 100%;
border-collapse: separate;
border-spacing: 0
}
#stats .table caption {
position: absolute;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap
}
#stats .table thead th {
position: sticky;
top: 0;
background: #F3F6FB;
color: #374151;
border-bottom: 1px solid #E5E7EB;
font-weight: 700;
text-align: center;
padding: 12px 14px;
}
#stats .table tbody td {
height: auto;
padding: 12px 14px !important;
border-bottom: 1px solid #DDD
}
#stats .table tbody tr:hover {
background: transparent
}
#stats .table .col-name {
width: 30%;
font-size: 17px;
text-align: center
}
#stats .table .col-val {
font-family: "Pretendard";
text-align: center;
font-variant-numeric: tabular-nums;
font-size: 17px;
font-weight: 500
}
#stats .table tbody td:first-child {
border-radius: 0;
background: #F7F8F9;
border-right: 1px solid #DDD;
}
.edu-schedule * {
box-sizing: border-box
}
.panel-header.none-border {
border: 0 !important
}
.edu-schedule .panel {
min-width: 0;
overflow: hidden;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 10px;
margin-bottom: 0
}
.edu-schedule .panel-header, .edu-schedule .panel-headerEducation {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 30px;
border-bottom: 1px solid #E5E7EB;
font-weight: 800;
font-size: 17px;
}
.edu-schedule .panel-headerEducation {
background-color: #EEF2F7;
padding: 18px 30px;
}
.edu-schedule .panel-body01 {
padding: 30px 30px
}
.edu-schedule .panel-body {
padding: 14px
}
.edu-schedule .form .row {
margin-bottom: 20px;
display: grid;
grid-template-columns:92px minmax(0, 1fr);
gap: 10px;
align-items: center;
}
.edu-schedule .form label, .edu-schedule .form .date-inline p {
white-space: nowrap;
color: #1D1D1D;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
}
.edu-schedule .form input[type="text"],
.edu-schedule .form input[type="date"],
.edu-schedule .form select {
width: 100%;
height: 45px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 0 12px;
background: #fff;
font-size: 15px;
}
.edu-schedule .form select {
height: auto;
}
.edu-schedule .form textarea {
min-height: 72px;
resize: vertical
}
.edu-schedule .form .actions {
display: flex;
justify-content: flex-end;
margin-top: 8px
}
.edu-schedule .btn {
color: #FFF;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 20px 16px;
border: 1px solid #4C5160;
background: #4C5160;
border-radius: 8px;
cursor: pointer;
}
.edu-schedule .btn:hover {
outline: 2px solid #FFF;
background: #000925;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
/*.edu-schedule .btn:focus-visible {*/
/* outline: 3px solid #93C5FD;*/
/* outline-offset: 2px*/
/*}*/
.edu-schedule .calendar .month-nav {
display: flex;
align-items: center;
gap: 8px
}
.edu-schedule .calendar .arrow {
width: 32px;
height: 32px;
border: 0;
background: transparent
}
.edu-schedule .calendar .arrow:hover {
border: 1px solid #ddd;
border-radius: 8px;
}
.edu-schedule .calendar .month-label {
font-weight: 800;
font-size: 18px
}
.edu-schedule .grid {
width: 100%;
border-collapse: separate;
border-spacing: 0
}
.edu-schedule .grid th {
padding: 10px 0;
background: #F7F8F9;
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
}
.edu-schedule .daycell {
padding: 4px 0;
text-align: center;
background-color: white;
}
.edu-schedule .daybtn {
width: 38px;
height: 40px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
font: inherit;
cursor: pointer;
color: #4C5160;
font-family: "Pretendard";
font-size: 14px;
font-weight: 400;
}
.edu-schedule .daybtn:hover {
border-color: #CBD5E1
}
.edu-schedule .daybtn[aria-selected="true"] {
/*background: #F0F5FB;
color: black;
border-color: #F0F5FB;*/
outline: 2px solid #93C5FD;
outline-offset: 2px;
}
.edu-schedule .daybtn.is-today {
outline: 2px solid #93C5FD;
outline-offset: 2px
}
.edu-schedule .daybtn.is-out {
color: #94A3B8
}
.edu-schedule .dot {
display: block;
width: 6px;
height: 6px;
border-radius: 999px;
background: #001F82;
margin: 3px auto 0
}
.edu-schedule .daybtn:disabled {
opacity: .45;
cursor: not-allowed
}
.edu-schedule .list {
margin-top: 16px
}
.edu-schedule .list ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.edu-schedule .badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 24px;
padding: 0 8px;
}
.edu-schedule .item-title {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 27px;
letter-spacing: -0.42px;
}
.edu-schedule .item-meta {
margin-top: 2px;
color: #4C5160;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
line-height: 170%;
}
.edu-schedule .empty {
color: #64748B;
display: flex !important;
display: flex !important;
font-family: "Pretendard";
font-size: 16px;
font-weight: 300;
}
.edu-schedule .top-grid {
display: grid;
grid-template-columns: 480px minmax(0, 1fr) 420px;
gap: 16px;
}
.edu-schedule .form .row--date {
grid-template-columns:92px minmax(0, 1fr);
}
.edu-schedule .form .date-inline {
display: grid;
grid-template-columns: minmax(0, 1fr) 60px;
gap: 8px;
align-items: center;
}
.edu-schedule .grid {
table-layout: fixed;
width: 100%;
}
.edu-schedule .list {
margin-top: 0
}
.edu-schedule .list .panel-header .list-title-date {
color: #9D0058;
font-weight: 900;
font-size: 22px;
letter-spacing: -.2px;
}
.edu-schedule .list .panel-body {
padding: 10px 16px 16px;
}
.edu-schedule .list li {
display: grid;
grid-template-columns: 64px 1fr;
align-items: center;
min-height: 46px;
padding: 0;
}
.edu-schedule .list li + li {
border-top: 1px solid #C9D2DD;
}
.edu-schedule .list .badge {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*min-width:auto;*/
padding: 0;
background: #EEF2F5;
color: #4C5160;
font-weight: 700;
border-right: 1px solid #C9D2DD;
border-radius: 0;
font-size: 14px;
}
.edu-schedule .list .item-title {
padding: 0 12px;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #1D1D1D;
}
.edu-schedule .list .item-meta {
display: none !important;
}
.edu-schedule .edu-title {
padding-top: 24px;
font-size: 22px;
}
#listTitle {
color: #000;
font-size: 22px;
letter-spacing: -.2px;
}
#tabs-basic {
margin-top: 50px;
}
#alertInfo_education .tabs {
position: relative;
display: flex;
gap: 40px;
border-bottom: 1px solid #e5e7eb;
}
#alertInfo_education .tab {
position: relative;
appearance: none;
background: none;
width: 120px;
border: 0;
padding: 12px 0 14px;
cursor: pointer;
color: #6A6E77;
font-size: 17px;
font-weight: 800;
line-height: 16px;
}
#alertInfo_education .tab:hover {
color: #001F82;
}
#alertInfo_education .tab[aria-selected="true"] {
color: #001F82;
}
#alertInfo_education .indicator {
position: absolute;
bottom: -1px;
height: 3px;
left: 0;
width: 0;
background: #001F82;
border-radius: 2px;
transition: transform .25s ease, width .25s ease;
will-change: transform, width;
pointer-events: none;
}
#alertInfo_education .panels {
padding: 18px 0
}
#alertInfo_education [role="tabpanel"] {
display: none
}
#alertInfo_education [role="tabpanel"].is-active {
display: block
}
/*#alertInfo_education .tab:focus-visible {*/
/* outline: 2px solid #111827;*/
/* outline-offset: 3px;*/
/* border-radius: 4px;*/
/*}*/
#board .tbl-basic {
width: 100%;
margin-top: 20px
}
#board .tbl-basic thead th {
background: #F3F4F6;
text-align: center;
font-weight: 700;
padding: 12px 10px;
border-bottom: 1px solid #E5E7EB
}
#board .tbl-basic th, .tbl-basic td {
padding: 12px 14px;
border-top: 1px solid #E5E7EB;
vertical-align: middle;
word-break: keep-all;
white-space: nowrap
}
#board .tbl-basic td {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
}
#board .tbl-basic col:first-child {
width: 140px
}
#board .tbl-basic col:first-child {
width: 2%;
}
#board .page-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
padding: 20px 0;
}
#board .badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFF7ED;
color: #FF7A00;
border: 1px solid #FFD7AF;
padding: 6px 12px;
border-radius: 999px;
font-weight: 500;
font-family: "Pretendard";
font-size: 17px;
}
#board .title {
flex: 1;
font-size: 30px;
font-weight: 700;
letter-spacing: -.3px;
font-family: "Pretendard";
}
#board .actions {
display: flex;
gap: 8px
}
#board .actions .btn-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E5E7EB;
display: grid;
place-items: center;
background: #fff
}
#board .actions .btn-icon:hover {
background: #f2f2f2;
}
#board .actions .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #4C5160;
color: #fff;
border: 0;
padding: 0 14px;
height: 36px;
border-radius: 999px;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: -0.2px;
}
#board .actions .btn-primary:hover {
outline: 2px solid #FFF;
background: #000925 !important;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#board .i {
width: 18px;
height: 18px;
display: block
}
#board .i-star {
width: 18px;
height: 18px;
display: block;
}
#board .fav-toggle .i-star path {
fill: none;
stroke: currentColor;
stroke-width: 2;
}
#board .fav-toggle[aria-pressed="true"] .i-star path {
fill: currentColor;
stroke: currentColor;
}
#board .fav-toggle {
color: #9CA3AF;
}
#board .fav-toggle[aria-pressed="true"] {
color: #F59E0B;
}
/*#board .fav-toggle:focus-visible {*/
/* outline: 2px solid #4059F2;*/
/* outline-offset: 2px;*/
/* border-radius: 6px;*/
/*}*/
/*#board .board-content {*/
/* color: #0F172A;*/
/* font-size: 15px;*/
/* line-height: 1.75;*/
/* padding: 30px 10px;*/
/*}*/
#board .board-content * {
box-sizing: border-box
}
#board .board-content .sec-title {
margin: 28px 0 10px;
font-weight: 800;
font-size: 16px;
letter-spacing: -.2px;
color: #0F172A;
position: relative;
padding-left: 10px
}
#board .board-content .sec-title::before {
content: "[";
margin-right: 2px;
position: absolute;
left: 0
}
#board .board-content .sec-title::after {
content: "]";
margin-left: 4px
}
#board .board-content .kv-list {
counter-reset: num;
list-style: none;
padding: 0;
margin: 0 0 14px
}
#board .board-content .kv-list > li {
counter-increment: num;
position: relative;
padding-left: 28px;
display: flex;
gap: 10px;
align-items: center;
border-top: 1px dashed #DDD;
font-size: 16px;
height: 45px;
}
#board .board-content .kv-list > li:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0
}
#board .board-content .kv-list > li::before {
content: counter(num) ".";
position: absolute;
left: 0;
color: #6B7280;
font-weight: 700
}
#board .board-content .kv-list .k,
#board .board-content .kv-list .v,
#board .board-content .dash-list > li,
#board .board-content .note-warn,
#board .board-content a,
.sub3-infoBox p {
font-family: "Pretendard";
}
#board .board-content .kv-list .k {
min-width: 120px;
font-weight: 700;
font-size: 17px;
}
#board .board-content .kv-list .v {
flex: 1;
word-break: keep-all;
}
#board .board-content .kv-list .v,
#board .board-content .dash-list > li,
#board .board-content a,
#board .board-content .note-warn,
.sub3-infoBox p {
font-size: 16px;
}
#board .board-content .dash-list {
list-style: none;
padding: 0;
margin: 0 0 14px
}
#board .board-content .dash-list > li {
position: relative;
padding-left: 16px;
margin: 6px 0;
}
#board .board-content .dash-list > li::before {
content: "-";
position: absolute;
left: 0;
top: 0;
color: #6B7280;
font-weight: 700
}
#board .board-content .note-warn {
margin: 18px 0 0;
color: #001F82;
font-weight: 700;
letter-spacing: -.2px
}
.sub3-infoBox p {
margin: 18px 0 0;
color: #B70669;
font-weight: 700;
letter-spacing: -.2px
}
#board .board-content a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
/*#board .board-content a:focus-visible {*/
/* outline: 2px solid #DC2626;*/
/* outline-offset: 2px;*/
/* border-radius: 4px*/
/*}*/
#board .contact-banner {
background: #F0F5FB;
color: #0e0e0e;
margin: 45px auto;
padding: 45px 18px 45px 45px;
border-radius: 8px;
letter-spacing: -.2px;
position: relative;
overflow: hidden;
}
#board .contact-banner__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
#board .contact-banner img {
position: absolute;
right: 5%;
top: -25%;
}
#board .contact-banner__list li, #board .contact-banner__list li b {
font-family: "Pretendard";
font-weight: 700;
font-size: 18px;
color: #0e0e0e;
}
#board .contact-banner b {
font-weight: 700;
font-family: "Pretendard";
font-size: 16px;
}
#board .contact-banner a {
font-family: "Pretendard";
font-weight: 500;
font-size: 18px;
color: #0e0e0e;
}
#board .contact-banner a:hover {
border-bottom: 1px solid #000;
}
/*#board .contact-banner a:focus-visible {*/
/* outline: 0;*/
/* box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);*/
/* border-radius: 4px;*/
/*}*/
#board .contact-banner__list .contact-banner__sep {
opacity: .7;
font-weight: 400;
color: #575757;
}
#board .clamp-2 {
display: -webkit-box;
-webkit-box-orient: inherit;
-webkit-line-clamp: none;
line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
font-family: "Pretendard";
font-size: 19px;
font-weight: 400;
line-height: 170%;
}
#board a.clamp-2:hover {
text-decoration: underline;
}
#board .noticeTable.table tbody tr.fixed-notice .badge-blue {
background-color: #3F508D;
}
#board .sub3-infoBox {
display: flex;
gap: 10px;
flex-direction: column;
}
#board .txt-sub3 {
color: #000;
font-family: "NanumSquareNeo";
font-size: 26px;
font-weight: 800;
}
/**신청하기 모달 css**/
.apply-backdrop {
position: fixed;
inset: 0;
background: rgba(2, 8, 23, .45);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease
}
.apply-backdrop.is-open {
opacity: 1;
pointer-events: auto;
z-index: 9999 !important
}
#applyModal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
z-index: 9999 !important;
}
#applyModal:not(.is-open) {
pointer-events: none;
}
#applyModal[hidden],
#applyBackdrop[hidden] {
display: none !important;
}
#applyModal.is-open {
pointer-events: auto;
}
#applyModal.is-open .dialog {
pointer-events: auto;
}
#applyModal .dialog {
width: min(420px, 92vw);
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(2, 6, 23, .2);
transform: translateY(10px) scale(.98);
opacity: 0;
transition: transform .2s ease, opacity .2s ease;
/* pointer-events:auto; ← 유지해도 됨 (is-open에서만 실동작) */
z-index: 9999;
font-family: "Pretendard", system-ui, -apple-system, "Noto Sans KR", "맑은 고딕", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
#applyModal.is-open .dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
#applyModal .head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: #3F508D;
color: #fff;
border-radius: 12px 12px 0 0
}
#applyModal .head h2 {
margin: 0;
font-size: 18px;
font-weight: 800;
letter-spacing: -.2px
}
#applyModal .close {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: #fff;
border-radius: 50%;
padding: 8px; /* 여백 추가 */
}
#applyModal .body {
padding: 16px 18px 6px
}
#applyModal .req-note {
margin: 0 0 20px;
color: #4C5160;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 25px;
}
#applyModal .form {
display: grid;
gap: 20px; /* 18px → 20px */
}
/* 4. 포커스 표시 추가 (KWCAG 2.4.7) */
#applyModal .close:focus,
#applyModal input:focus,
#applyModal select:focus,
#applyModal .submit:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
#applyModal .row {
display: grid;
grid-template-columns:92px 1fr;
align-items: center;
gap: 8px
}
#applyModal .row .label {
letter-spacing: -.2px;
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
#applyModal .row.required .label::before {
content: "* ";
color: #DC2626;
font-weight: 800
}
#applyModal input[type="text"], #applyModal input[type="email"], #applyModal select {
width: 100%;
height: 44px;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 0 12px; /* 10px → 12px (여백 확보) */
font-size: 15px
box-sizing: border-box; /* 패딩 포함 크기 */
}
#applyModal .phone {
display: flex;
gap: 6px;
align-items: center
}
#applyModal .dash {
opacity: .55
}
#applyModal .actions {
padding: 12px 0 18px
}
#applyModal .submit {
width: 100%;
height: 44px;
border: 0;
border-radius: 10px;
background: #4C5160;
color: #fff;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
margin-top: 0;
}
#applyModal .helper {
grid-column: 2/span 1;
margin: -6px 0 2px;
font-size: 12px;
color: #DC2626;
display: none
}
#applyModal .helper.show {
display: block
}
#applyModal #logoutDialog .close::before, .close::after {
display: none;
}
.alert-board .pn-nav {
border-top: 1px solid #E5E7EB;
border-bottom: 1px solid #E5E7EB;
margin-top: 40px;
margin-bottom: 50px
}
/* 리스트 기본 */
.alert-board .pn-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #cacaca;
border-bottom: 1px solid #cacaca;
display: flex;
flex-direction: column;
}
.alert-board .pn-item {
display: grid;
grid-template-columns:80px 1fr;
gap: 16px;
align-items: center;
min-height: 44px;
padding: 10px 0;
}
.alert-board .pn-item + .pn-item {
border-top: 1px solid #EFEFEF
}
/* 배지 */
.alert-board .badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1;
border: 1px solid transparent;
}
.alert-board .badge--prev {
background: #fff !important;
border-color: #B52F8B !important;
color: #B52F8B !important;
}
.alert-board .badge--next {
background: #B52F8B !important;
color: #fff !important;
}
/* 링크(제목) 영역 */
.alert-board .pn-link {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
color: #111;
text-decoration: none;
}
.alert-board .pn-link:hover .pn-title {
text-decoration: underline
}
/*.alert-board .pn-link:focus-visible {*/
/* outline: 2px dotted #B52F8B;*/
/* outline-offset: 2px;*/
/* border-radius: 4px*/
/*}*/
.alert-board .pn-list li:first-child .pn-title, .alert-board .pn-list li:first-child .pn-cat {
color: #4C5160;
font-weight: 400;
line-height: 150%;
}
/* 말줄임 처리 */
.alert-board .pn-cat {
flex: 0 0 auto;
display: -webkit-box;
-webkit-box-orient: inherit;
-webkit-line-clamp: none;
line-clamp: 2;
overflow-wrap: anywhere;
font-family: "Pretendard";
font-size: 17px;
font-weight: 500;
line-height: 170%;
}
.alert-board .pn-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
overflow-wrap: anywhere;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 170%;
}
.alert-board .board-content * {
color: #333 !important;
font-family: "Pretendard" !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 28px !important;
}
.alert-board button {
display: flex;
width: 125px;
height: 45px;
padding: 15px 24px 15px 20px;
flex-direction: column;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 5px;
background: #4C5160;
color: #FFF;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
margin: 0 auto;
border: 0;
}
.alert-board button:hover{
outline: 2px solid #FFF;
background: #000925;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.alert-board button.cf-submit:hover{
outline: 2px solid #FFF;
background: #8E004F !important;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#press th, #press .tbl-basic th {
width: auto;
}
#participate .h-title {
font-size: 28px;
line-height: 1.25;
margin: 0 0 10px;
font-weight: 800
}
.t1-info {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
line-height: 30px;
letter-spacing: -0.2px;
margin-top: 18px;
}
.flow {
margin: 0 0 28px
}
.flow .sec-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-weight: 800;
font-size: 18px;
}
.flow .sec-head .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff6aa7;
box-shadow: 0 0 0 4px rgba(255, 106, 167, .15);
}
.flow-list {
list-style: none;
margin-top: 32px;
margin-bottom: 73px;
padding: 0;
display: grid;
grid-template-columns:repeat(6, 1fr);
gap: 22px 43px;
}
#v-accident .flow-list {
list-style: none;
margin-top: 32px;
margin-bottom: 73px;
padding: 0;
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 22px 43px;
}
#v-accident .flow-item, .flow-item {
position: relative;
text-align: center;
}
#v-accident .flow-circle, .flow-circle {
width: 195px;
height: 195px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 19px;
border-radius: 900px;
border: 1px solid #DCDCDC;
background: #FFF;
box-shadow: 0 20px 40px 0 rgba(198, 198, 198, 0.10);
}
.flow-step {
color: #B52F8B;
text-align: center;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
}
.flow-title {
color: #1D1D1D;
text-align: center;
font-size: 20px;
font-weight: 800;
}
.flow-arrow {
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.flow-item:last-child .flow-arrow {
display: none
}
#participate .apply-section {
margin-top: 65px
}
#participate .sec-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
font-weight: 800;
font-size: 18px;
}
#participate .sec-head .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff6aa7;
box-shadow: 0 0 0 4px rgba(255, 106, 167, .15);
}
#participate .grid {
display: grid;
gap: 20px;
grid-template-columns:1fr 1fr
}
.way {
border-radius: 16px;
padding: 18px 18px 22px;
position: relative;
margin-top: 30px;
}
#participate .way.magenta-border {
border: 2.5px solid #BF80AD;
}
.way.blue-border {
border: 2.5px solid #7684B8;
}
.way .tag {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 0;
display: flex;
width: 150px;
height: 40px;
padding: 7px 36px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 90px;
color: #FFF;
text-align: center;
font-size: 20px;
font-weight: 700;
}
.way .tag.magenta {
background: #B52F8B
}
.way .tag.blue {
background: #3E4C83
}
#participate .part-steps {
margin-top: 18px
}
#participate .step {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 12px 14px;
border-radius: 5px;
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 25px;
}
#participate .step.magenta-bg {
background: #F9F4F8;
}
#participate .step.blue-bg {
background: #F0F5FB;
}
#participate .step em {
color: #B70669;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 25px;
}
#participate .step em.blue {
color: #001F82;
background-color: transparent;
}
#participate .arrow {
display: flex;
align-items: center;
justify-content: center;
height: 26px
}
#participate .arrow svg {
width: 18px;
height: 18px;
opacity: .6
}
#inquiry .topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 16px
}
#inquiry .page-title {
color: #000;
font-size: 26px;
font-weight: 800;
}
#inquiry .page-title .em {
color: #001F82;
font-size: 26px;
font-weight: 800;
}
#inquiry .faq-btn {
display: flex;
width: 300px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid #1D1D1D;
background: #FFF;
color: #000;
font-family: "Pretendard";
font-size: 18px;
font-weight: 800;
}
#inquiry .faq-btn:hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#inquiry .faq-btn svg {
width: 18px;
height: 18px;
color: #6B7280
}
/* ========== Sub lead text ========== */
#inquiry .lead {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
margin-bottom: 24px;
}
#inquiry .lead a {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
}
/* ========== 안내 패널 ========== */
#inquiry .notice {
position: relative;
background: #FBF8F7;
border-radius: 6px;
padding: 40px;
overflow: hidden;
}
#inquiry .notice::after {
content: "";
position: absolute;
inset: auto 12px 0 auto;
width: 360px;
height: 100%;
background: url('/img/designIcon/inquiry.png') center right / 220px auto no-repeat;
pointer-events: none;
transform: translateY(6px);
right: 40px;
}
#inquiry .n-head {
display: flex;
align-items: center;
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
flex-wrap: wrap;
}
#inquiry .n-strong {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
}
#inquiry .n-strong .time {
color: #B70669;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
}
#inquiry .n-body {
margin: 10px 0 0
}
#inquiry .n-body ul {
padding-left: 10px;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
#inquiry .n-body li {
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 150%;
list-style: disc inside;
}
#inquiry .n-body .warn {
color: #B70669;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 150%;
}
#inquiry .grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px 39px;
margin-top: 37px
}
#inquiry .card {
position: relative;
background: #fff;
border: 1px solid #e0e2e8;
border-radius: 14px;
display: flex;
flex-direction: column;
height: 280px;
justify-content: space-between;
}
#inquiry .card-main {
padding: 35px 35px 25px;
display: flex;
flex-direction: column;
gap: 18px
}
#inquiry .head {
display: flex;
align-items: center;
gap: 10px
}
#inquiry .head img {
width: 20px;
}
#inquiry .ic {
width: 32px;
height: 32px;
border-radius: 999px;
background: #2563EB;
display: grid;
place-items: center;
flex: 0 0 32px
}
#inquiry .ic svg {
width: 18px;
height: 18px;
color: #fff
}
#inquiry .title {
color: #001048;
font-size: 23px;
font-weight: 800;
line-height: 30px;
margin: 0
}
#inquiry .body {
padding-left: 4px;
}
#inquiry .body ul {
margin: 0;
font-size: 14px;
color: #374151
}
#inquiry .body li {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
list-style: disc inside;
position: relative;
}
#inquiry .body p {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
}
.body li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 1rem;
height: 1rem;
background: url("/img/designIcon/li_mark-check.png") no-repeat center / contain;
}
/* 하단 바 */
#inquiry .footbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: #F7F8F9;
border-top: 1px solid #E8ECF3;
padding: 14px 22px;
border-radius: 0 0 14px 14px;
}
#inquiry .foot-left {
display: flex;
align-items: center;
gap: 12px;
color: #333;
font-size: 17px;
line-height: 30px;
flex-wrap: wrap
}
#inquiry .foot-label {
color: #001F82;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 30px;
white-space: nowrap;
}
#inquiry .foot-text {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 30px;
}
#inquiry .foot-text strong {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 30px;
}
#inquiry .foot-btn {
display: inline-flex;
height: 32px;
padding: 0 15px;
justify-content: center;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-radius: 6px;
background: #47568C;
color: #FFF;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 150%;
}
#inquiry .foot-btn:hover {
outline: 2px solid #FFF;
background: #00176C;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#v-system .tier-list {
padding: 0;
margin: 0
}
#v-system .tier {
position: relative;
display: grid;
grid-template-columns: 1fr 90px 250px;
gap: 34px;
align-items: center;
padding-block: 14px;
margin-bottom: 77px;
}
#v-system .tier + .tier {
margin-top: 18px
}
#v-system .tier + .tier::before {
content: "";
position: absolute;
left: 35%;
transform: translateX(-50%);
top: -72px;
width: 50px;
height: 50px;
background: url("/img/designIcon/arrow-down02.png") center/contain no-repeat;
display: block;
}
#v-system .card {
width: auto;
min-height: 230px;
border: 1.5px solid #DCDCDC;
border-radius: 16px;
background: #fff;
overflow: hidden;
}
#v-system .card.t2 {
background: #F5F9FF
}
#v-system .card.t3 {
background: #FFF5F9
}
#v-system .card.t4 {
background: #FFF6F5
}
#v-system .card-head {
display: flex;
align-items: center;
gap: 10px;
padding: 26px 35px 19px
}
#v-system .card-head.blue {
background: #F0F5FB
}
#v-system .card-head.pink {
background: #F9F4F8
}
#v-system .card-title {
color: #001F82;
font-size: 23px;
font-weight: 800;
line-height: 30px
}
#v-system .card-title.pink {
color: #B52F8B;
background: transparent
}
#v-system .card-sub {
font-size: 18px;
font-weight: 500;
line-height: 25px;
color: #000;
font-family: "Pretendard";
}
#v-system .cols ul {
display: flex;
flex-direction: column;
gap: 9px
}
#v-system .cols {
display: grid;
gap: 10px 18px;
grid-template-columns:repeat(2, minmax(0, 1fr));
padding: 22px 38px;
background: #fff
}
#v-system .cols li.list-blue, #v-benefit li.list-blue {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
list-style-image: url("/img/designIcon/li_mark-check.png");
list-style-position: inside
}
#v-system .cols li.list-pink, #v-benefit li.list-pink {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
list-style-image: url("/img/designIcon/li-bullet_check.png");
list-style-position: inside
}
#v-system .tier-arrow {
width: 90px;
height: 90px;
display: grid;
place-items: center;
color: #D2D6DA;
text-indent: -9999em
}
#v-system .tier-arrow::before {
content: "";
width: 100px;
height: 22px;
opacity: 1;
background: url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
}
#v-system .pill {
width: 250px;
height: 230px;
border-radius: 15px;
padding: 22px 16px;
color: #fff;
text-align: center;
display: grid;
place-items: center;
position: relative;
}
#v-system .pill h3 {
color: #FFF;
text-align: center;
font-size: 23px;
font-weight: 900;
line-height: 23px;
}
#v-system .pill p {
color: #FFF;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 500;
line-height: 23px;
}
#v-system .pill .pill-box {
display: flex;
flex-direction: column;
gap: 9px;
}
#v-system .pill.navy {
background: #1D1F5D
}
#v-system .pill.purple {
background: #36488A
}
#v-system .pill.magenta {
background: #930060
}
#v-system .pill.pink {
background: #BC4095
}
#v-system .pill::before {
display: none !important
}
.info-card {
border-radius: 10px;
border: 6px solid #F2F2F2;
background: #FFF;
padding: 42px;
margin-bottom: 17px;
}
.info-head {
display: flex;
gap: 16px;
align-items: center;
}
.info-title, .mb-info-title {
color: #000;
font-size: 23px;
font-weight: 800;
margin-bottom: 10px;
}
#blood .info-title, .mb-info-title {
margin-bottom: 0;
}
.info-title span {
color: #9D0058;
font-size: 23px;
font-weight: 800;
padding-left: 6px
}
.mb-info-title span {
color: #9D0058;
font-size: 20px;
font-weight: 800
}
.info-desc {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 25px
}
.info-desc strong {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 25px
}
#v-accident .info-note {
color: #9D0058;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
letter-spacing: -0.15px;
margin-bottom: 73px;
}
#v-accident .info-note strong {
font-family: "Pretendard";
font-size: 15px;
font-weight: 800;
letter-spacing: -0.15px
}
#v-accident .year-title {
color: #111;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.52px
}
#v-accident .year-title strong {
color: #9D0058;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.52px
}
#v-accident .grid {
display: grid;
grid-template-columns: 160px 1fr;
margin-top: 28px;
border-radius: 12px;
background: #FBF7F6;
padding: 31px 47px;
gap: 0;
}
#v-accident .term {
color: #000;
font-family: "Pretendard";
font-size: 18px;
font-weight: 700;
line-height: 34px
}
#v-accident .desc {
color: #000;
font-family: "Pretendard";
font-size: 18px;
font-weight: 400;
line-height: 34px
}
#v-accident .grid02, #v-info .grid02, #v-index .grid02 {
display: grid;
grid-template-columns:268px 1fr;
gap: 28px 36px;
margin-top: 48px;
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px dashed #ccc;
}
#v-accident .flow-circle {
gap: 17px;
width: 230px;
height: 230px;
}
#v-accident .t2 {
align-items: flex-start;
}
.flow-circle p {
color: #4C5160;
text-align: center;
font-size: 17px;
font-weight: 400;
line-height: 21px;
font-family: "Pretendard";
}
#v-accident .row, #v-info .row, #v-index .row {
display: contents
}
#v-accident .label {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: 800;
font-size: 20px;
letter-spacing: -.2px;
}
#v-accident .label .dot {
position: relative;
width: 18px;
height: 18px;
margin-top: 4px;
flex: 0 0 18px
}
#v-accident .body h3 {
color: #000;
font-family: "Pretendard";
font-size: 24px;
font-weight: 600;
line-height: 24px;
}
#v-accident .panel {
padding: 20px 24px;
border: 1px solid #E8ECF3;
border-radius: 12px;
background: #fff;
}
#v-accident .step-grid {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 24px;
align-items: center
}
#v-accident .step {
position: relative;
display: flex;
align-items: center;
gap: 14px
}
#v-accident .node {
flex: 0 0 116px;
width: 116px;
height: 116px;
border-radius: 999px;
background: #fff;
border: 1px solid #E8ECF3;
display: grid;
place-items: center;
box-shadow: 0 8px 24px rgba(2, 6, 23, .06)
}
#v-accident .ring {
width: 92px;
height: 92px;
border-radius: 999px;
display: grid;
place-items: center;
background: conic-gradient(from 0deg, #EAD2E2 0deg, #B1006C 300deg, #EAD2E2 300deg 360deg)
}
#v-accident .node em {
width: 82px;
height: 82px;
border-radius: 999px;
background: #fff;
border: 1px solid #E8ECF3;
display: grid;
place-items: center;
font-style: normal;
text-align: center;
padding: 8px 10px
}
#v-accident .node small {
display: block;
color: #B1006C;
font-weight: 800
}
#v-accident .node b {
display: block;
color: #111827;
font-weight: 800;
margin-top: 4px
}
#v-accident .bullets {
margin-top: 14px;
display: grid;
gap: 8px
}
#v-accident .bullets li {
list-style: disc inside;
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 400;
line-height: 180%;
}
#v-accident .bullets li strong {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 700;
line-height: 180%;
}
#v-accident .bullets li b {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 700;
line-height: 180%;
}
#v-accident #table03-wrap {
max-height: max-content;
margin: 18px 0;
border-radius: 0;
}
.accident_count {
font-size: 14px !important;
}
#v-accident .table tbody th, .table tbody td:first-child {
border-right: 0;
border-left: 0;
border-top: 0;
}
#v-accident .table.responsive tbody tr:nth-child(1) {
border: 0 !important;
}
#v-accident #table03-wrap .table tbody td:first-child {
border-left: 1px solid #DDD;
}
#v-accident .table tbody th {
border-radius: 0;
color: #4C5160;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 600;
line-height: 130%;
width: 100%;
}
#v-accident .table tbody td {
white-space: normal;
text-align: start !important;
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
}
#v-accident .note {
color: #001F82;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 23px;
}
#v-accident .note b {
color: #001F82;
font-family: "Pretendard";
font-size: 15px;
font-weight: 800;
line-height: 23px;
}
.download_btn-primary {
display: flex;
width: 330px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
border-radius: 8px;
background: #B52F8B;
color: #FFF;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
margin: 0 auto;
}
.download_btn-primary:hover {
outline: 2px solid #FFF;
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.mb-info-card {
display: none;
}
.content-title {
display: flex;
flex-direction: column;
margin-bottom: 26px;
}
#v-benefit *, #v-benefit *::before, #v-benefit *::after {
box-sizing: border-box;
}
#v-benefit .grid {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 35px 40px;
align-items: stretch;
}
#v-benefit .card {
display: flex;
flex-direction: column;
border-radius: 16px;
padding: 42px;
width: auto;
min-width: 0;
height: 420px;
background: #F2F7FF;
border: 0;
}
#v-benefit .card p {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
}
#v-benefit .card strong {
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 20px;
}
#v-benefit .card .list-info {
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 28px;
}
#v-benefit .card .a-link {
display: flex;
align-items: center;
gap: 8px;
}
#v-benefit .card .a-link img {
transition: 0.3s;
}
#v-benefit .card .a-link:hover img {
transform: translateY(-5px);
}
#v-benefit .card .a-link img {
padding-bottom: 20px;
}
#v-benefit .card.is-pink {
background: #F9F4F8;
border-color: #F6DCEB;
}
#v-benefit .card.is-blue {
background: #F0F5FB;
border-color: #E2EEFF;
}
#v-benefit .mini {
display: inline-block;
margin-bottom: 10px;
flex: 0 0 auto;
color: #000;
font-family: "Pretendard";
font-size: 18px;
font-weight: 500;
line-height: 25px;
}
#v-benefit .title {
color: #9D0058;
font-size: 23px;
font-weight: 800;
line-height: 30px;
display: flex;
gap: 8px;
align-items: center;
padding-bottom: 20px;
border-bottom: 2.5px solid #FFFFFF;
flex: 0 0 auto;
word-break: keep-all;
}
#v-benefit .title.pink {
color: #9D0058;
background-color: transparent
}
#v-benefit .title.blue {
color: #001F82;
background-color: transparent
}
#v-benefit .title .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
#v-benefit .body {
font-size: 14px;
line-height: 1.7;
color: #374151;
margin-top: 12px;
flex: 1 1 auto;
}
#v-benefit .body ul {
margin: 8px 0 0;
}
#v-benefit .body li {
margin: 3px 0;
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
}
#v-personnel .tabs {
max-width: 709px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
background: #fff;
padding: 6px;
border-radius: 90px;
border: 1px solid #DDD;
background: #FFF;
box-shadow: 0 20px 40px 0 rgba(198, 198, 198, 0.10);
}
/* 탭 버튼 */
#v-personnel .tabbtn {
appearance: none;
border: 0;
background: transparent;
cursor: pointer;
width: 100%;
padding: 12px 24px;
border-radius: 999px;
text-align: center;
color: #6A6E77;
transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .02s ease;
font-size: 17px;
font-style: normal;
font-weight: 800;
line-height: 16px;
height: 44px;
}
#v-personnel .tabbtn[aria-selected="true"] {
background: #B52F8B;
color: #fff;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}
#v-personnel .tabbtn[aria-selected="true"]:hover {
background: #A4006B;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#v-personnel .tabbtn:hover {
/*transform: translateY(-0.5px);*/
background: #f2f2f2;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#v-personnel .tabbtn:active {
transform: translateY(0)
}
/*#v-personnel .tabbtn:focus-visible {*/
/* outline: 3px solid rgba(181, 47, 139, .35);*/
/* outline-offset: 2px*/
/*}*/
/* =============== Intro Card =============== */
#v-personnel .badge img {
width: 34px;
height: 34px
}
#v-personnel .intro h2 {
font-size: 16px
}
#v-personnel .intro h2 b {
color: #B52F8B
}
#v-personnel .intro p {
color: #6B7280;
margin-top: 6px
}
/* =============== Duties (chips grid) =============== */
.duties {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 10px;
margin-bottom: 59px;
margin-top: 16px
}
.duties li {
display: flex;
height: 70px;
padding: 12px 22px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 5px;
background: #F0F5FB;
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 18px;
font-weight: 500;
line-height: 25px;
}
/* =============== Qualify Cards =============== */
#v-personnel .cards {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: 19px;
margin-top: 16px;
margin-bottom: 68px
}
#v-personnel .card {
height: 300px;
flex-shrink: 0;
background: #fff;
border: 1px solid #DCDCDC;
padding: 18px;
min-height: 134px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 8px;
}
#v-personnel .card .eyebrow {
color: #4C5160;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 23px;
}
#v-personnel .card strong {
text-align: center;
font-size: 20px;
font-weight: 800;
line-height: 28px;
}
/* 핑크/블루 믹스 */
#v-personnel .info-card {
margin-bottom: 32px;
}
#v-personnel .card--pink strong {
color: #9D0058
}
#v-personnel .card--blue strong {
color: #001F82
}
/* =============== Panels =============== */
#v-personnel .panel {
display: none
}
#v-personnel .panel[aria-hidden="false"] {
display: block;
margin-top: 26px
}
/* =============== 관리센터 및 인증관리요원 통이미지 부분 css 추후 삭제예정 =============== */
#v-personnel .ex-imgBox {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
}
#v-personnel .ex-imgBox img {
max-width: 100%;
height: auto;
}
#v-personnel .w-1400 {
display: block;
}
#v-personnel .w-975 {
display: none;
}
#v-personnel .w-480 {
display: none;
}
#v-info .flow-list {
list-style: none;
margin-top: 32px;
margin-bottom: 73px;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px 43px;
}
.sub01 .title-box span {
color: #6A6E77;
text-align: center;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
margin-top: 12px;
}
.blood-img {
width: 45%;
}
/**사업안내**/
#v-index .title-box {
margin-top: 0;
}
#v-index .thumb-list p {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
#v-index .c-txt-area h3 {
margin: 0
}
#v-index .flow-list {
display: grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
margin: 32px 0 44px;
}
#v-index .grid02 {
border-bottom: 0;
}
#v-index .flow-circle {
width: auto;
height: auto;
max-width: 100%;
flex: 1 1 auto;
border-radius: 20px;
border: 1px solid #DCDCDC;
background: #FFF;
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
#v-index .flow-item {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
#v-index .flow-item:last-child .flow-arrow {
display: none;
}
#v-index .flow-item {
position: relative
}
#v-index .c-txt-area {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
#v-index .duties {
display: grid;
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap: 10px 12px;
margin: 8px 0 12px;
word-break: keep-all;
}
/* 문의 박스 */
#v-index .matrix-contact {
position: relative;
border: 1px solid #eaeaea;
border-radius: 4px;
padding-top: 8px;
height: 60px;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 800;
font-size: 17px;
margin-top: 20px;
}
#v-index .matrix-contact .num {
font-size: 26px;
color: #B70669;
}
#v-index .matrix-contact::after {
content: "";
position: absolute;
inset: 0;
background: url('/img/designIcon/mat-contact.png') center center no-repeat;
pointer-events: none;
transform: translateY(2px) translateX(-90px);
}
/* =============== 썸네일 목록(그리드) =============== */
#v-index .thumList_wrap {
display: grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap: 58px 16px;
margin-top: 18px;
}
/* 카드 */
#v-index .thumb-list {
display: flex;
gap: 14px;
align-items: center;
min-width: 0;
}
/* 썸네일 */
#v-index .thumb {
flex: 0 0 96px;
width: 96px;
height: 96px;
border-radius: 200px;
overflow: hidden;
background: #F3F4F6;
border: 1px solid #E5E7EB;
}
#v-index .thumb img {
width: 100%;
height: auto;
}
/* 텍스트 영역 */
#v-index .c-txt-area {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0
}
#v-index .c-txt-area h3 {
font-size: 20px;
font-weight: 800;
line-height: 1.4;
margin: 0;
white-space: normal;
word-break: keep-all
}
#v-index .c-txt-area p {
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 25px;
}
/* 포인트 색 */
#v-index .c-pink {
color: #B70669
}
#v-index .c-blue {
color: #001F82
}
#v-index .info-list li {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 400;
line-height: 180%;
list-style: disc inside;
}
#v-index .info-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 20px;
}
#v-info .grid02 {
border-bottom: 0;
}
#v-info .flow-circle {
width: 330px;
height: 330px;
}
#v-info .flow-circle p {
color: #001F82;
text-align: center;
font-size: 20px;
font-weight: 800;
line-height: 28px;
}
#v-info .flow-title span {
color: #333;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
#v-info .flow-title {
display: flex;
flex-direction: column;
gap: 4px;
}
#v-info .grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 25px;
}
#v-info .way {
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
height: 108px;
padding: 30px 22px 20px;
margin: 0;
}
#v-info .way .box-info {
color: #333;
text-align: center;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
#v-info .decade {
font-weight: 900;
font-size: 30px;
color: #B52F8B;
margin: 45px 0 12px;
}
#v-info .decade:first-child {
margin-top: 0;
}
.timeline {
position: relative;
padding-left: 26px;
}
.timeline::before {
content: "";
position: absolute;
left: 8px;
top: var(--tl-top, 0px);
height: var(--tl-height, 0px);
width: 2px;
background: #E6E9EF;
}
#v-info .item {
display: grid;
grid-template-columns:90px 1fr;
column-gap: 16px;
position: relative;
border: 0;
align-items: flex-start;
padding: 25px 20px 25px 6px;
cursor: default;
}
#v-info .item:hover {
background-color: transparent;
}
#v-info .item.cont::before { /* 그대로 두되, 아래 불릿만 유지 */
}
#v-info .item::before {
content: "";
position: absolute;
left: -23px;
top: 32px;
width: 12px;
height: 12px;
background: url('/img/designIcon/year-bullet.png') no-repeat center / contain;
}
#v-info .date {
white-space: nowrap;
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
letter-spacing: -0.6px;
}
#v-info .desc {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 500;
line-height: 30px;
}
#v-info .item.cont .date {
visibility: hidden;
}
#v-info img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#v-perfor .infoBox {
max-width: 1400px;
border-radius: 18px;
padding: 65px;
}
#v-perfor .infoBox.c1 {
background: #FBF7F6;
}
#v-perfor .infoBox-tit {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
}
#v-perfor .kicker {
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 24px;
}
#v-perfor .title {
color: #000;
font-size: 40px;
font-style: normal;
font-weight: 800;
letter-spacing: -1.2px;
}
#v-perfor .title .magenta {
color: #B70669;
background-color: transparent;
}
#v-perfor .t1-info {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
margin-top: 18px;
}
#v-perfor .t1-info .crumb, #v-perfor .t1-info .sep {
color: #001048;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 30px;
letter-spacing: -0.2px;
}
#v-perfor .t1-info .sep {
color: #9AA3B2;
margin: 0.1em;
}
#v-perfor .itemlink {
color: #001048;
font-family: "Pretendard";
font-size: 18px;
font-weight: 700;
line-height: 28px;
}
#v-perfor .itemlink:hover {
border-bottom: 1px solid #001048;
}
/* 버튼 */
#v-perfor .btn {
text-decoration: none;
width: 300px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 8px;
color: #FFF;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
cursor: pointer;
margin: 40px 0;
}
#v-perfor .btn-primary {
background: #B52F8B;
}
/*#v-perfor .btn:focus-visible {*/
/* outline: 3px solid #0000;*/
/* box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(181, 47, 139, .55);*/
/*}*/
#v-perfor .btn .chev {
inline-size: 18px;
block-size: 18px;
display: inline-block;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
background: #fff;
}
/* 우측 일러스트 패널 */
#v-perfor .illust {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
}
/* 하단 */
#v-perfor .info {
background: #fff;
border-radius: 12px;
padding: 50px;
}
#v-perfor .info p {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 500;
line-height: 28px;
}
#v-perfor .info-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 40px;
}
#v-perfor .info-item {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
height: 30px;
}
#v-perfor .num {
min-width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
font-size: 13px;
background: #B70669;
}
#v-perfor .info-item p {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-style: normal;
font-weight: 500;
}
#v-perfor .info-item h6 {
color: #B70669;
font-size: 20px;
font-style: normal;
font-weight: 800;
min-width: 45px;
}
#v-perfor .con-list {
color: #333333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
}
#v-perfor .noti {
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
color: #4C5160;
}
#v-perfor .noti a {
font-weight: 600;
color: #001048;
text-decoration: underline;
}
#v-perfor .noti a > img {
display: inline-block;
}
#certi .center {
text-align: center;
}
#certi .mt10 {
margin-top: 10px;
}
#certi .mt20 {
margin-top: 20px;
}
#certi .mt30 {
margin-top: 30px;
}
#certi .mt40 {
margin-top: 40px;
}
#certi .mt50 {
margin-top: 50px;
}
#certi .main-tit {
color: #111;
font-family: "NanumSquareNeo";
font-size: 26px;
font-style: normal;
font-weight: 800;
margin-bottom: 7px;
}
#certi .tit-detail {
font-family: 'Pretendard';
color: #333;
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
#certi .infoBox {
max-width: 1400px;
border-radius: 18px;
padding: 65px;
}
#certi .infoBox.c1 {
background: #FBF7F6;
}
#certi .infoBox.c2 {
background: #f8f8f8;
}
#certi .infoBox-tit {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
}
#certi .infoBox-tit.l2 {
grid-template-columns: 1.5fr 0.9fr;
}
#certi .kicker {
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
#certi .title {
color: #000;
font-size: 40px;
font-weight: 800;
letter-spacing: -1.2px;
margin-top: 17px;
margin-bottom: 23px;
}
#certi .title .magenta {
color: #B70669;
}
#certi .title .navy {
color: #001F82;
background-color: transparent;
}
#certi .t1-info {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
margin-top: 18px;
}
#certi .t1-info .bold {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 30px;
letter-spacing: -0.2px;
}
#certi .t1-info .crumb {
color: #001048;
font-weight: 600;
}
#certi .t1-info .sep {
color: #9AA3B2;
margin: 0.1em;
}
#certi .itemlink {
color: #001048;
}
#certi .btn {
text-decoration: none;
width: 300px;
height: 52px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 8px;
color: #FFF;
font-family: "Pretendard";
font-size: 19px;
font-weight: 700;
line-height: 150%;
cursor: pointer;
flex: auto;
}
#certi .btn-primary {
background: #B52F8B;
}
#certi .btn-secondary {
background: #47568C;
}
#certi .btn-secondary:hover {
outline: 1.5px solid #FFF;
background: #00176C;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
/*#certi .btn:focus-visible {*/
/* outline: 3px solid #0000;*/
/* box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(181, 47, 139, .55);*/
/*}*/
#certi .btn .chev {
inline-size: 18px;
block-size: 18px;
display: inline-block;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
background: #fff;
}
#certi .illust {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
}
#certi .illust img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#certi .info {
background: #fff;
border-radius: 12px;
padding: 50px;
}
#certi .info-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 40px;
}
#certi .info-item {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
height: 30px;
}
#certi .num {
min-width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
font-size: 13px;
background: #B70669;
}
#certi .info-item p {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 500;
}
#certi .info-item h6 {
color: #B70669;
font-size: 20px;
font-style: normal;
font-weight: 800;
min-width: 45px;
}
#certi .con-list li {
color: #333333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 150%;
list-style: disc inside;
}
#certi .noti {
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
color: #4C5160;
margin-top: 20px;
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
}
#certi .noti a {
text-decoration: underline;
color: #001048;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 150%;
display: flex;
align-items: center;
}
#certi .noti a svg {
transition: 0.3s;
}
#certi .noti a:hover svg {
transform: translateX(5px);
}
#certi .noti a > img {
display: inline-block;
}
#certi .form-grid {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
gap: 18px 28px;
max-width: 941px;
width: 100%;
margin: 0 auto;
}
#certi .form-grid .label {
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
#certi .form-grid .field {
min-width: 0
}
#certi .rrn-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
#certi .rrn-group .input {
flex: 1 1 0;
min-width: 210px;
height: 46px;
padding: 0 14px;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #FFF;
transition: border-color .15s ease, box-shadow .15s ease;
font-size: 16px;
color: #111;
}
/*#certi .rrn-group .input:focus {*/
/* outline: 0;*/
/* border-color: #B9C3D6;*/
/* box-shadow: 0 0 0 3px rgba(181, 47, 139, .12);*/
/*}*/
#certi .rrn-group .hyphen {
color: #000;
font-family: "Pretendard";
font-size: 19px;
font-weight: 500;
}
#edu .mt10 {
margin-top: 10px;
}
#edu .mt40 {
margin-top: 40px;
}
#edu .tit-detail {
font-family: 'Pretendard';
color: #333;
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin-bottom: 40px;
}
#edu .edu-grid {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
}
#edu .edu-card {
overflow: hidden;
border-radius: 12px;
background: #F0F5FB;
text-align: center;
font-weight: 600;
color: #111827;
}
#edu .edu-imgbox {
width: 100%;
}
#edu .edu-imgbox img {
width: 100%;
height: auto;
display: inline-block;
}
#edu .ministry {
font-family: 'Pretendard';
font-size: 18px;
color: #000;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
background: #F0F5FB;
}
#edu .target-grid {
display: grid;
grid-template-columns:repeat(2, 1fr);
gap: 20px
}
#edu .target-card {
display: grid;
grid-template-columns:200px 1fr;
align-items: center;
border: 1px solid #ddd;
border-radius: 10px;
background: #fff;
gap: 35px;
overflow: hidden;
}
/* 왼쪽 이미지 박스 */
#edu .target-media {
width: 100%;
height: 100%;
min-height: 90px;
overflow: hidden;
background: #F6f6f6;
display: grid;
place-items: center;
padding: 60px;
}
#edu .target-media img {
width: 100%;
height: 100%;
object-fit: contain
}
/* 오른쪽 텍스트 */
#edu .target-content {
padding: 30px 0;
}
#edu .target-content h3 {
font-family: "NanumSquareNeo";
font-size: 23px;
font-weight: 800;
line-height: 30px;
}
#edu .c-pink {
color: #9D0058
}
#edu .c-blue {
color: #001F82
}
#edu .target-content p {
color: #6B7280;
margin-bottom: 6px
}
#edu .target-content ul li {
position: relative;
padding-left: 25px;
margin: 8px 0;
color: #333;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 28px;
}
#edu .target-content ul li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-position: center;
background-size: 15px 15px
}
#edu .dot-pink li::before {
background-image: url("/img/designIcon/bullet-pink.png");
}
#edu .dot-blue li::before {
background-image: url("/img/designIcon/bullet-blue.png");
}
#edu .tit-detail {
text-align: center;
}
#edu .tit-detail strong {
color: #000;
text-align: center;
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 35px;
letter-spacing: -0.2px;
}
.sub01 .title-box {
text-align: center;
}
.sub01 .title-box h2 {
position: relative;
display: inline-block;
margin: 0;
padding: 0 .2em;
}
.sub01 .title-box h2::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: .15em;
height: .7em;
background: #FAF1F6;
z-index: -1;
border-radius: 4px;
transform: none;
}
#v-info .info-imgWrap {
position: relative;
--ar-w: 902;
--ar-h: 638;
aspect-ratio: var(--ar-w) / var(--ar-h);
padding: 0;
}
#v-info .info-imgWrap > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
#v-info .info-imgWrap .pin {
position: absolute;
left: var(--x, 50%);
top: var(--y, 50%);
transform: translate(-50%, -50%);
font-size: clamp(20px, 1.2vw + 0.2rem, 22px);
white-space: nowrap;
text-align: center;
color: #001048;
font-family: "Pretendard";
font-weight: 700;
line-height: 28px;
}
#v-info .info-imgWrap > .pin span:first-of-type, #v-info .info-imgWrap > p.pin span:nth-of-type(2) {
color: #fff;
text-align: center;
font-family: "Pretendard";
font-size: clamp(12px, 1.2vw + 0.2rem, 17px);
font-weight: 500;
line-height: 24px;
}
#v-info .info-imgWrap > .pin:first-of-type strong, #v-info .info-imgWrap > p.pin:nth-of-type(2) strong {
color: #fff;
font-family: "NanumSquareNeo";
font-size: clamp(22px, 1.2vw + 0.2rem, 23px);
font-weight: 900;
letter-spacing: -0.46px;
padding-bottom: 14px;
display: inline-block;
}
#v-info .info-imgWrap .pc-bg-info {
display: block;
}
#v-info .info-imgWrap .mb-bg-info {
display: none;
}
#v-personnel .process-map {
position: relative;
/* 원본 비율 (예: 1400x430) */
--ar-w: 1400;
--ar-h: 430;
aspect-ratio: var(--ar-w) / var(--ar-h);
max-width: 1400px; /* 페이지 폭에 맞게 조절 */
margin: 24px auto;
}
#v-personnel .process-map > img {
width: 100%;
display: block;
margin-top: 40px;
}
/* 고정 핀 기본 */
#v-personnel .process-map .pin {
position: absolute;
left: var(--x, 50%);
top: var(--y, 50%);
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
font-size: clamp(12px, 1.05vw, 16px);
color: #000;
font-style: normal;
font-weight: 700;
line-height: 21px;
}
/* 가운데 원(굵은 타이틀 + 보조문) */
#v-personnel .process-map .pin strong {
display: block;
font-weight: 900;
letter-spacing: -0.02em;
font-size: clamp(22px, 1.4vw, 23px);
color: #fff;
margin-top: 10px;
line-height: 28px;
}
#v-personnel .process-map .pin--badge-top {
--x: 50%;
--y: 12%;
}
#v-personnel .process-map .pin span {
display: block;
margin-top: 6px;
color: #fff;
font-weight: 600;
font-size: clamp(17px, 1.1vw, 18px);
}
#v-personnel .process-map .pin.side {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 21px;
}
#v-personnel .process-map .pin.side small {
color: #4C5160;
font-size: 13px;
font-weight: 700;
line-height: 21px;
}
#v-personnel .process-map .badge {
padding: .5em 1.25em;
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
color: #000;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 21px;
}
#v-personnel .process-map .badge b {
color: #9D0058;
font-size: 18px;
font-weight: 800;
line-height: 21px;
}
#v-personnel .process-map .badge .b-blue {
color: #001F82;
font-size: 18px;
font-weight: 800;
line-height: 21px;
}
#value .bg-wrap {
position: relative;
--ar-w: 402;
--ar-h: 390;
aspect-ratio: var(--ar-w) / var(--ar-h);
max-width: 560px;
margin: 24px auto;
}
#value .bg-wrap .pin {
position: absolute;
left: var(--x, 50%);
top: var(--y, 50%);
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-weight: 800;
line-height: 28px;
white-space: nowrap;
font-size: clamp(17px, 1.3vw, 20px);
}
#v-logo .tb-wrap {
display: none;
}
#v-logo .tb-thumb {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 24px;
}
#v-logo .tb-thumb img {
min-width: 240px;
}
#v-logo .term__scroll {
height: 180px;
}
#v-logo .header {
display: flex;
align-items: flex-end;
gap: 12px;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 24px
}
#v-logo .header div {
display: flex;
flex-direction: column;
}
#v-logo .page-title {
margin: 0;
font-size: 22px;
font-weight: 800;
letter-spacing: -.2px
}
#v-logo .page-desc {
color: #000;
font-family: "Pretendard";
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px
}
#v-logo .header-actions {
display: flex;
gap: 10px;
flex-wrap: wrap
}
#v-logo .btn-download {
display: flex;
width: 300px;
height: 45px;
padding: 0 20px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
border: 1px solid #1D1D1D;
background: #FFF;
color: #1D1D1D;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
#v-logo .btn-download:hover {
outline: 1.5px solid #58616A;
background: #EFF1F7;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#v-logo .btn-download svg {
width: 18px;
height: 18px
}
#v-logo .card {
border: 1px solid #E6E9EF;
border-radius: 14px;
padding: 18px;
box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
background: #fff
}
#v-logo .rule {
display: grid;
grid-template-columns:1fr;
gap: 10px;
color: #374151;
font-size: 14px
}
#v-logo .rule .row {
border: 1px solid #E6E9EF;
border-radius: 12px;
padding: 14px;
background: #fff
}
#v-logo .rule .row .cap {
color: #6B7280;
font-weight: 700;
margin-bottom: 6px;
font-size: 13px
}
#v-logo .rule .row p {
margin: 0;
color: #374151
}
#v-logo .block-head {
display: flex;
align-items: center;
gap: 10px;
margin: 98px 0 18px;
justify-content: space-between
}
#v-logo .item {
display: grid;
grid-template-columns:290px 1fr;
gap: 47px;
align-items: start;
padding-bottom: 61px;
background: #fff;
}
#v-logo .item + .item {
margin-top: 18px
}
#v-logo .thumb img {
display: block;
max-width: 100%;
height: auto
}
#v-logo .info .title {
font-weight: 800;
margin: 0 0 6px
}
#v-logo .info .desc {
color: #333;
font-family: "Pretendard";
font-size: 18px;
font-weight: 500;
line-height: 28px
}
#v-logo .info {
display: flex;
flex-direction: column;
gap: 21px
}
#v-logo .color-grid {
display: grid;
grid-template-columns:repeat(2, minmax(320px, 1fr));
gap: 14px;
}
#v-logo .color-chip {
display: flex;
align-items: stretch;
gap: 14px;
background: #fff;
min-width: 0;
}
#v-logo .swatch {
width: 180px;
height: 80px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2px;
padding: 19px;
color: #fff;
font-weight: 800;
font-size: 13px;
flex: 0 0 180px;
min-width: 180px;
box-sizing: border-box;
}
#v-logo .swatch p {
color: #FFF;
font-size: 15px;
font-weight: 900;
line-height: 23px;
margin: 0
}
#v-logo .swatch span {
color: rgba(255, 255, 255, .90);
font-family: "Pretendard";
font-size: 14px;
font-weight: 500;
line-height: 23px
}
#v-logo .meta {;
display: grid;
gap: 6px;
align-content: center;
flex: 1;
min-width: 0;
}
#v-logo .meta .k {
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 20px
}
#v-logo .meta span {
font-family: "Pretendard";
font-size: 20px;
font-weight: 700;
line-height: 23px
}
#v-logo .btn-download span {
color: #001A66;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 150%
}
#v-logo .term__panel {
max-height: fit-content;
overflow: visible;
display: block
}
#v-index .grid-content01, #v-index .grid-content02 {
margin-bottom: 50px;
}
#result .table tbody td {
color: #4C5160;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
}
#rank .section-title {
display: flex;
flex-direction: column;
color: #000;
font-size: 32px;
font-weight: 800;
line-height: 44px;
letter-spacing: -0.96px;
gap: 13px;
margin-bottom: 51px
}
#rank .section-title h2 {
color: #000;
font-size: 32px;
font-weight: 800;
line-height: 44px;
letter-spacing: -0.96px;
}
#rank .section-title .pink {
color: #B70669;
font-size: 32px;
font-weight: 800;
line-height: 44px;
letter-spacing: -0.96px;
background-color: transparent
}
#rank .section-title .blue {
color: #001F82
}
#rank .dim {
color: #000;
font-size: 20px;
font-weight: 400;
line-height: 30px;
letter-spacing: -0.2px;
font-family: "Pretendard"
}
#rank .top-barWrap {
display: flex;
justify-content: space-between;
align-items: flex-start
}
/* ===== Toolbar (상단 필터) ===== */
#rank .toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex-wrap: nowrap;
margin: 12px 0 22px;
border: 0;
width: 28%;
}
/* 셀렉트 + 단위 묶음 */
#rank .sel-inline {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* 공통 셀렉트 UI */
#rank .select {
height: 45px;
line-height: 40px;
padding: 0 36px 0 12px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("/img/designIcon/arrow-down.png");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 34px;
border-radius: 5px;
border: 1px solid #B1B8BE;
color: #1E2438;
min-width: 94px;
cursor: pointer;
background-color: #fff;
font: 600 14px/1 "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
/* 년/월 단위 텍스트 */
#rank .unit {
color: #000;
font-family: "Pretendard";
font-size: 16px;
font-weight: 700;
line-height: 1;
}
/* 정렬 셀렉트(횟수/시간) - 동일 규격 */
#rank .toolbar > .select {
height: 45px;
padding: 0 36px 0 12px;
min-width: 110px;
}
/* 검색 버튼 */
#rank .filter-actions .btn-search {
border: 1px solid #344173;
letter-spacing: -0.2px;
cursor: pointer;
color: #FFF;
font-family: "Pretendard";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 150%;
white-space: nowrap;
border-radius: 5px;
background: #4C5160;
display: flex;
width: 125px;
height: 45px;
padding: 15px 24px 15px 20px;
align-items: center;
justify-content: center;
gap: 10px;
}
#rank .filter-actions .btn-search:hover {
filter: brightness(1.03);
outline: 2px solid #FFF;
background: #000925;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
#rank .filter-actions img {
width: 16px;
height: 16px
}
/* ===== Top 1~3 카드 ===== */
#rank .top-cards {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 39px;
margin: 14px 0 27px
}
#rank .card {
position: relative;
border-radius: 18px;
border: 5px solid transparent;
background: linear-gradient(#FFF, #FFF) padding-box,
linear-gradient(30deg, #D92363 0%, #BB4395 55%, #F1DE89 100%) border-box;
height: 340px;
padding: 47px 42px 38px;
display: flex;
flex-direction: column;
justify-content: space-between
}
#rank .card .ribbon {
position: absolute;
top: -50px;
right: 12px;
display: grid;
place-items: center;
}
#rank .card .eyebrow {
color: #333;
font-size: 18px;
font-weight: 500;
line-height: 25px;
margin-bottom: 16px;
font-family: "Pretendard";
}
#rank .card .name {
color: #B70669;
font-size: 26px;
font-weight: 800;
line-height: 35px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
#rank .card .meta {
color: #333;
font-size: 20px;
font-weight: 600;
font-family: "Pretendard"
}
#rank .card .meta b {
color: #001F82;
font-size: 20px;
font-weight: 600;
font-family: "Pretendard"
}
#rank .card .hr {
height: 1px;
background: #DDD;
margin: 20px 0 12px
}
#rank .card .cta {
display: block;
width: 100%;
text-align: center;
padding: 11px 14px;
border-radius: 90px;
border: 1px solid #4C5160;
background: #344173;
color: #FFF;
font-size: 17px;
font-weight: 700;
height: 45px;
cursor: pointer
}
#rank .card .cd-bottom {
display: flex;
flex-direction: column;
gap: 27px;
}
/* ===== 4~10위 리스트 ===== */
#rank .rank-board {
border-radius: 18px;
overflow: hidden;
background: linear-gradient(92deg, #FFF6F5 0%, #FFFAE4 65.64%, #FFF6F5 100%)
}
#rank .rank-row {
padding: 46px 50px;
display: grid;
grid-template-columns: 28px 1fr 530px;
align-items: center;
gap: 12px;
border-top: 1px solid #EEF2F8
}
#rank .rank-row:first-child {
border-top: 0
}
#rank .rank-no {
color: #B70669;
font-size: 23px;
font-weight: 700;
font-family: "Pretendard"
}
#rank .rank-name {
color: #000;
font-size: 21px;
font-weight: 700;
line-height: 27px;
font-family: "Pretendard";
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
#rank .rank-meta {
display: flex;
align-items: center;
justify-content: flex-end;
color: #4B5563;
font-size: 13px
}
#rank .rank-meta span, .tab-panels span {
white-space: nowrap;
color: #333;
font-size: 18px;
font-weight: 600;
font-family: "Pretendard"
}
#rank .rank-meta span b, #rank .tab-panels span b {
color: #001F82;
font-size: 18px;
font-weight: 600;
font-family: "Pretendard"
}
#rank .rank-metaWrap {
display: flex;
gap: 15px;
}
#rank .slash {
color: #AAA !important;
font-family: "Pretendard";
font-size: 16px;
font-weight: 400;
}
#rank .btn-outline {
display: flex;
height: 32px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 5px;
border: 1px solid #4C5160;
background-color: transparent;
color: #4C5160;
white-space: nowrap;
font-size: 14px;
font-weight: 700;
line-height: 150%;
cursor: pointer;
margin-left: 50px;
font-family: "Pretendard";
}
/* ===== 11~100위 탭 ===== */
#rank .subhead {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 34px;
margin-bottom: 21px
}
#rank .subhead h2 {
color: #000;
font-size: 32px;
font-weight: 800;
line-height: 44px;
letter-spacing: -0.96px
}
#rank .subhead .blue {
background-color: transparent;
color: #001F82;
font-size: 32px;
font-weight: 800;
line-height: 44px;
letter-spacing: -0.96px
}
#rank .tabs {
display: flex;
gap: 18px;
align-items: flex-end
}
#rank .tabs [role="tab"] {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
border-bottom: 2px solid transparent;
color: #6A6E77;
font-size: 21px;
font-weight: 700;
line-height: 150%;
padding: 10px 2px;
font-family: "Pretendard";
}
#rank .tabs [role="tab"][aria-selected="true"] {
color: #001F82;
border-bottom-color: #001F82;
}
/*#rank .tabs [role="tab"]:focus-visible {*/
/* outline: 2px solid #b3c7ff;*/
/* outline-offset: 2px*/
/*}*/
#rank .tab-panels {
margin-top: 8px;
border-radius: 15px;
background: #F9F9F9
}
#rank .table {
width: 100%
}
#rank .trow {
display: grid;
grid-template-columns: 28px 1fr 420px;
gap: 12px;
align-items: center;
padding: 44px 50px;
}
#rank .no {
color: #001F82;
font-size: 23px;
font-weight: 700;
font-family: "Pretendard";
white-space: nowrap;
}
#rank .name {
color: #000;
font-size: 21px;
font-weight: 700;
line-height: 27px;
font-family: "Pretendard"
}
#rank .right-wrap {
display: flex;
justify-content: flex-end
}
#rank .right {
display: flex;
align-items: center;
gap: 16px;
justify-content: flex-end;
color: #4B5563;
font-size: 13px
}
table.noticeTable td strong.td-label {
display: none;
font-weight: 700;
margin-right: 8px;
white-space: nowrap;
line-height: 1.6;
font-family: "Pretendard";
font-size: 16px;
}
.blue-info-box {
padding: 16px;
gap: 8px;
border-radius: 6px;
border: 1px solid #D6E0EB;
background: #EEF2F7;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 50px;
}
.blue-info-box ul li {
color: #001048;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 160%;
list-style: disc inside;
}
.blue-info-box p {
display: flex;
align-items: center;
gap: 4px;
color: #001048;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 160%;
}
.red-info-box{
padding: 16px;
gap: 8px;
border-radius: 6px;
border: 1px solid #C554A1;
background: #F9F4F8;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 50px;
}
.red-info-box ul li{
color: #B70669;
font-family: "Pretendard";
font-size: 15px;
font-weight: 400;
line-height: 160%;
list-style: disc inside;
}
.red-info-box p {
display: flex;
align-items: center;
gap: 4px;
color: #9D0058;
font-family: "Pretendard";
font-size: 15px;
font-weight: 700;
line-height: 160%;
}
#specialty .table tbody td {
text-align: center;
}
.dropdown {
height: 100%;
position: relative;
display: inline-flex;
align-items: center;
background: #fff;
min-width: 160px;
max-width: 230px;
width: 100%;
border-right: 1px solid #DDD;
}
.dropdown .dropdown__button {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.dropdown__list {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
background: #fff;
border: 1px solid #D7DBE2;
border-radius: 8px;
max-height: 280px;
overflow: auto;
z-index: 30;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
min-width: 90px;
max-width: none;
width: 100%;
}
.dropdown__option {
padding: 10px 12px;
cursor: pointer;
font-size: 16px;
font-weight: 700;
font-family: "Pretendard";
}
.dropdown__option:hover, .dropdown__option.is-active {
background: #B70669;
color: white;
font-weight: 800;
}
#join_enterInformation .form-grid, #secede .form-grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 14px 20px;
border-top: 2px solid #C7CFDA;
align-items: center;
}
/*#join_enterInformation .form-grid #mobno_1,*/
/*#join_enterInformation .form-grid #mobno_2,*/
/*#join_enterInformation .form-grid #mobno_3 {*/
/* width: 27%;*/
/*}*/
#mobno_1,
#mobno_2,
#mobno_3 {
width: 27% !important;
}
.is-selected {
width: 44px;
height: 24px;
padding: 0 6px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 200px;
background: #F7EBF5;
color: #B70669;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 22px;
}
.is-unselected {
width: 54px;
height: 24px;
padding: 0 6px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 200px;
background: #E5E7EC;
color: #6A6E77;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 22px;
}
.is-pending {
width: 44px;
height: 24px;
padding: 0 6px;
justify-content: center;
align-items: center;
border-radius: 200px;
background: #D9E5F9;
color: #001F82;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 22px;
}
.cancel_btn {
display: inline-flex;
height: 32px;
padding: 0 8px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 5px;
border: 1px solid #001F82;
background: #FFF;
color: #001F82;
text-align: center;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 150%;
}
.cancel_btn:hover {
outline: 1.5px solid #2445AF;
background: #E7F0FF;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.register_btn {
display: inline-flex;
height: 32px;
padding: 0 14px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 5px;
background: #4C5160;
color: #FFF;
text-align: center;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 150%;
}
.is-unselected, .is-pending, .is-selected{
border: 0 !important;
}
.listOpen_btn {
height: 32px;
padding: 0 10px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 5px;
border: 1px solid #1D1D1D;
background: #FFF;
color: #000B17;
text-align: center;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
line-height: 150%;
}
.listOpen_btn svg {
vertical-align: sub;
}
.dropdown__current {
color: #4C5160;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.51px;
font-family: "Pretendard";
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
}
#join_enterInformation .termgbn1 , #join_enterInformation .termgbn2{
white-space: nowrap;
}
.comments { color:#222; background:#fff; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment{
border-top:1px solid #E5E7EB;
padding:20px 0;
}
.comment:last-child{ border-bottom:1px solid #E5E7EB; }
.comment__meta{
display:flex;
align-items:center;
gap:10px;
min-height:28px;
}
.comment__author{
color: #000;
font-family: "Pretendard";
font-size: 22px;
font-weight: 700;
line-height: 27px;
white-space: nowrap;
}
.comment__meta .title-box{
display: flex;
gap: 8px;
align-items: center;
}
.comment__time{
color: #8E8E8E;
font-family: "Pretendard";
font-size: 16px;
font-weight: 500;
}
.comment__actions{
display:flex;
gap:8px;
margin-left:12px;
}
.comment__body{
margin-top:10px;
word-wrap:break-word;
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.comment__edit{
margin-top:12px;
display:flex;
gap:10px;
align-items:flex-start;
}
.comment__edit[hidden]{ display:none !important; }
.comment__edit textarea{
flex:1 1 auto;
min-height:45px;
padding:10px 12px;
border-radius: 5px;
border: 1px solid #B1B8BE;
background: #FFF;
line-height: 20px;
color: #8E8E8E;
font-family: "Pretendard";
font-size: 17px;
font-weight: 500;
word-wrap:break-word;
}
.comment__edit input{
height: 45px;
}
.comment-form{
align-items: start;
padding: 38px 46px;
background: #FAFAFA;
border:1px solid #F1F2F4;
display: flex;
flex-direction: column;
gap: 14px;
}
.refer-wrap{
display: flex;
align-items: center;
gap: 10px;
padding: 24px 0;
}
.refer-wrap p{
color: #1D1D1D;
text-align: center;
font-size: 20px;
font-weight: 800;
line-height: 23px;
}
.refer-wrap p span{
color: #B70669;
font-size: 20px;
font-weight: 800;
line-height: 23px;
}
.writing-area{
width: 100%;
display: flex;
justify-content: space-between;
gap: 20px;
align-items: end;
}
#board .cf-submit{ display: flex;
width: 145px;
height: 45px;
padding: 0 10px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 5px;
background: #9D0058;
}
#board .save-btn{
display: flex;
width: 90px;
height: 45px;
padding: 0 10px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 5px;
background: #9D0058;
flex: none;
}
#board .save-btn:hover {
outline: 2px solid #FFF;
background: #8E004F !important;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.cf-label{
color:#000;
font-family: "Pretendard";
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.cf-count{
color:#999;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 30px;
}
.cf-count .count{
color: #333;
font-family: "Pretendard";
font-size: 15px;
font-weight: 500;
line-height: 30px;
}
.cf-input{
height: 36px;
padding: 0 12px;
border: 1px solid #D1D5DB;
border-radius: 8px;
font-size: 0.9375rem;
color:#111827;
width: 220px;
background:#fff;
}
.cf-textarea{
display:block;
width: 100%;
min-height: 40px;
padding: 10px 12px;
border: 1px solid #D1D5DB;
border-radius: 8px;
font-size: 18px;
line-height: 1.5;
color:#111827;
background:#fff;
font-family: "Pretendard";
}
/*.cf-input:focus,*/
/*.cf-textarea:focus{*/
/* outline: 2px solid #B52F8B33;*/
/* outline-offset: 1px;*/
/* border-color:#B52F8B;*/
/*}*/
.cf-submit{
height: 36px;
padding: 0 14px;
border-radius: 8px;
border: none;
background: #B52F8B;
color:#fff;
font-weight: 700;
font-size: 0.875rem;
cursor: pointer;
}
.cf-submit:disabled{
opacity:.6; cursor: default;
}
/*.cf-submit:focus-visible{*/
/* outline:2px solid #B52F8B;*/
/* outline-offset:2px;*/
/*}*/
.author-wrap{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.author-wrap .author-box{
display: flex;
align-items: center;
gap: 46px;
}
#board .modify-btn, #board .delete-btn{
display: flex;
width: 46px;
height: 28px;
padding: 0 10px;
justify-content: center;
align-items: center;
gap: 2px;
flex-shrink: 0;
border-radius: 5px;
background: #4C5160;
white-space: nowrap;
color: #FFF;
text-align: center;
font-family: "Pretendard";
font-size: 14px;
font-weight: 700;
}
#board .modify-btn:hover, #board .delete-btn:hover {
outline: 2px solid #FFF;
background: #000925;
box-shadow: 3px 3px 10px 0 rgba(152, 167, 201, 0.50);
}
.dropdown .chev{
display: flex;
align-items: center;
}
#notice-tbody tr td{
text-align: center;
}
.empty-wrap{
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
border-radius: 10px;
border: 1px solid #DDD;
background: #FFF;
box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.04);
padding: 100px;
}
.empty-wrap02{
padding: 20px 0;
}
.empty{
/*width: 100%;*/
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
color: #656565;
font-family: "Pretendard";
font-size: 1.25rem;
font-weight: 600;
line-height: 25px;
gap: 10px;
}
.empty .tc{
color: rgb(101, 101, 101);
font-family: "Pretendard";
font-size: 1.25rem;
font-weight: 600;
line-height: 25px;
padding-top: 20px;
}
/* 공통 */
.table.noticeTable tbody tr.empty {
display: table-row;
}
.table.noticeTable tbody tr.empty td {
display: table-cell;
width: 100%;
text-align: center;
}
.info-boxWrap{
display: flex;
gap: 30px;
flex-direction: column;
}
#login .login-content{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:82px;
padding: 50px 120px;
}
#login .login-formWrap{
flex: 3 1 0;
min-width:0;
}
#login .auth-grid{
flex: 2 1 0;
display:grid;
grid-template-columns: 1fr;
gap:16px;
align-content:start;
min-width:0;
}
#login .auth-info{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}
#login .title-box{ display:flex; align-items:center; gap:10px; }
#login .title-box img{ width:40px; height:40px; object-fit:contain; }
#login .auth-arrow img{ width:24px; height:24px; object-fit:contain; }
#login .form-row > input,
#login .submit{ width:100%; }
/*페이지별 테이블 텍스트 위치*/
#performance .table tbody td a{
text-align: center;
}
.empty{
padding: 20px !important;
text-align: center !important;
font-size: 18px !important;
font-weight: 600 !important;
font-family: "Pretendard" !important;
}
.search-inputWrap{
display: flex;
gap: 5px;
}
.main-popup-wrap .layer_cont2{
padding: 30px;
}
.skipTarget {
scroll-margin-top: 145px;
}
@media (max-width: 1420px) {
.main-header {
padding: 16px 20px;
}
}
@media (max-width: 1400px) {
footer {
padding: 35px 20px 49px 20px;
}
.center .card .org {
font-size: 14px;
}
.center .card .title {
font-size: 19px;
}
.center {
gap: 24px;
}
#stats .year-filter {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
#participate .flow-list {
grid-template-columns:repeat(3, 1fr);
gap: 18px 22px
}
#v-accident .grid02, #v-info .grid02, #v-index .grid02 {
grid-template-columns: 1fr;
gap: 0;
}
#v-index {
grid-template-columns:1fr
}
}
select option:hover {
background: #1C90FB;
color:#fff;
}
@media (max-width: 1350px) {
.common .card-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1330px) {
.vms-container {
gap: 34px;
}
.custom-select select {
font-size: 16px;
}
.select-group {
justify-content: center;
}
.select-group .text-label {
font-size: 16px;
}
.main-top .login-box .btn-box {
width: 100%;
}
.main-top .login-box {
width: 45%;
}
.main-top .login-box .login-btn {
width: 100%;
}
#rank .top-barWrap {
flex-direction: column;
margin-bottom: 50px
}
#rank .section-title {
margin-bottom: 0
}
#rank .toolbar {
width: 50%;
justify-content: flex-start
}
}
@media (max-width: 1300px) {
.logout-card {
width: 47%;
}
.logout-box {
grid-template-columns: 80px 1fr;
margin: 20px 25px 0 25px;
}
.logout-actions {
margin: 15px 25px 30px 25px;
}
.select-group {
justify-content: flex-start;
}
.main-bannerWrapper {
gap: 10px;
}
.main-bannerWrapper .txt-box p {
font-size: 24px;
line-height: 50px;
}
.main-bannerWrapper .txt-box .pc-mainTitle {
font-size: 34px;
line-height: 45px;
}
#v-personnel .card .eyebrow {
font-size: 15px;
}
#v-personnel .card strong {
font-size: 18px;
}
.center .card-rightBox {
display: flex;
flex-direction: row;
flex: auto;
width: auto;
}
.center .card-rightBox .rank-box {
width: 50%;
}
.captcha-canvas{
width: 40%;
}
#login .login-content{gap: 34px;}
.auth-card{
padding: 22px;
}
.auth-info .title-box h3{
font-size: 20px;
}
}
@media (max-width: 1240px) {
.center {
flex-direction: column;
gap: 30px;
}
.main-top {
flex-direction: column-reverse;
align-items: center;
margin-top: 32px;
}
.main-bannerWrapper {
max-width: none;
}
.main-top .login-box {
width: 90%;
align-items: center;
margin: 0 auto;
}
.main-top .login-box .btn-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.main-top .login-box .goto-loginBox {
width: 100%;
justify-content: flex-start;
}
.main-top .login-box .login-btn {
width: 40%;
}
.main-bannerWrapper .txt-box p {
font-size: 20px;
line-height: 40px;
text-align: center;
}
.main-bannerWrapper .txt-box .pc-mainTitle {
font-size: 32px;
line-height: 42px;
text-align: center;
}
#v-personnel .cards {
grid-template-columns:repeat(3, 1fr)
}
}
@media (max-width: 1210px) {
#v-system .cols {
display: flex;
flex-direction: column;
}
}
@media (max-width: 1200px) {
.quick-menu a {
flex-direction: column;
}
.stats-area {
width: 100%;
max-width: none;
}
.stats-area .highlight {
font-size: 24px;
}
.stats-area strong {
font-size: 18px;
}
.stats-area li .title {
font-size: 15px;
}
.vms-container {
gap: 40px;
}
.stats-area .highlight-black {
font-size: 28px;
}
.stats-pt {
padding: 22px 24px;
}
.depth1-wrap .depth1-item .depth1 {
font-size: 18px;
}
.col-reverseBox {
flex-direction: column-reverse;
gap: 20px;
}
.col-reverseBox > img {
order: -1;
width: 40%;
}
.sub01 .center .left-box, .sub01 .center .right-box {
flex-direction: row;
width: 100%;
order: -1;
}
.sub01 .center .left-box .lt-flexBox, .sub01 .center .right-box .rt-flexBox {
width: 100%;
}
.sub01 .center .card-box {
width: 100%;
}
.sub01 .center .left-box .lt-flexBox:first-child .card-box::after,
.sub01 .center .left-box .lt-flexBox:nth-child(2) .card-box::after,
.sub01 .center .right-box .rt-flexBox:first-child .card-box::after,
.sub01 .center .right-box .rt-flexBox:nth-child(2) .card-box::after {
display: none;
}
.sub01 .bt-effect .effect-card {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.sub01 .bt-effect .effect-card .card {
width: 100%;
}
#stats .year-filter {
grid-template-columns: repeat(6, 1fr);
}
#stats .year-filter button {
width: 100%;
min-width: 0;
}
#stats #activityChart {
height: 300px
}
#stats .year-filter {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.edu-schedule .top-grid {
grid-template-columns: repeat(3, minmax(280px, 1fr));
}
#participate .h-title {
font-size: 26px
}
#participate .grid {
gap: 16px
}
#participate .step {
min-height: 50px;
font-size: 15px
}
#participate .step em {
font-size: 15px;
}
#inquiry .foot-text, #inquiry .foot-text strong {
font-size: 15px;
}
#inquiry .card {
height: auto;
}
#inquiry .lead {
font-size: 18px;
}
#inquiry .footbar {
gap: 4px;
}
#v-benefit .card {
height: auto;
}
#v-benefit .grid {
grid-template-columns:repeat(2, 1fr);
}
#v-index .flow-list {
grid-template-columns: repeat(3, 1fr)
}
#v-index .duties {
grid-template-columns: repeat(3, 1fr)
}
#v-index .flow-circle {
width: 250px;
}
#v-perfor .title {
font-size: 35px
}
#v-perfor .infoBox {
padding: 2.7rem;
}
#v-perfor .info {
padding: 35px;
}
#v-perfor .t1-info, #v-perfor .t1-info .crumb {
font-size: 17px;
}
#certi .title {
font-size: 35px
}
#certi .infoBox {
padding: 2.7rem;
}
#certi .info {
padding: 35px;
}
#certi .t1-info, #certi .t1-info .bold {
font-size: 17px;
}
#certi .rrn-group .input {
min-width: 180px
}
#v-logo .item {
gap: 32px;
}
}
@media (max-width: 1180px) {
#result .help-box {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
gap: 30px;
}
.table tbody td, .table thead th {
text-align: center;
}
.table-wrap {
flex-direction: column;
}
#gallery .card__inner .content, #gallery .card__inner {
height: auto;
}
#gallery .card__inner .content .txt-box {
padding-bottom: 40px;
}
#gallery .card__inner .content .title .title__text {
font-size: 20px;
}
.edu-schedule .form .row, .edu-schedule .form .row--date {
grid-template-columns: 52px minmax(0, 1fr);
}
#v-index .matrix-grid {
grid-template-columns:repeat(4, 1fr)
}
#rank .rank-row {
grid-template-columns: 28px 1fr 420px;
}
#rank .card .name {
font-size: 23px;
}
#rank .card .meta, #rank .card .meta b {
font-size: 18px;
}
#login .login-content{
padding: 50px;
}
}
@media (max-width: 1150px) {
#search-id .id-form .row,
#search-pw .id-form .row {
align-items: flex-start;
flex-direction: column;
}
#search-id .row.regno-inputs {
align-items: flex-start;
}
#search-id .captcha-line,
#search-pw .captcha-line {
align-items: flex-start;
flex-direction: column;
}
#search-id .id-form input[type="text"],
#search-id .id-form input[type="password"],
#search-pw .id-form input[type="text"],
#search-pw .id-form input[type="password"] {
max-width: none;
}
.captcha-line .input-wrap {
flex-direction: column;
}
#search-id .regno-inputs .input-wrap {
width: 100%;
}
#search-id .input-wrap,
#search-pw .input-wrap {
width: 100%;
}
#search-id .captchaBox,
#search-pw .captchaBox {
max-width: none;
}
#search-id .option.active .id-form,
#search-pw .option.active .id-form {
max-height: max-content;
}
.edu-schedule .form .date-inline {
grid-template-columns: minmax(0, 1fr) 40px;
}
#inquiry .grid {
grid-template-columns: 1fr;
}
#v-accident .step-grid {
grid-template-columns:repeat(2, 1fr);
row-gap: 28px
}
#v-accident .step::after {
display: none
}
#v-accident .t2 {
line-height: normal;
}
#v-accident .grid02, #v-info .grid02 {
gap: 15px 36px;
}
#v-info .flow-circle {
width: 280px;
height: 280px;
}
#v-personnel .process-map .pin--badge-top {
--x: 50%;
--y: 13%;
}
}
@media (max-width: 1080px) {
.boardView_detail{
font-size: 17px;
}
.common .card-list {
grid-template-columns: repeat(2, 1fr);
}
.auth-card {
height: 150px;
}
.auth-card h2 {
font-size: 20px;
}
#gallery .media img {
max-width: none;
max-height: none;
}
#gallery .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#volunteer_apply .adv-block .field .date-wrap {
flex-direction: column;
}
#v-system .card-head {
flex-direction: column;
align-items: flex-start;
}
#v-system .tier + .tier::before {
left: 30%;
}
.sub01 .bt-rule .v-rules p {
font-size: 18px;
}
#v-logo .item {
display: none
}
#v-logo .tb-wrap {
display: block;
margin-bottom: 40px;
}
#v-personnel .process-map .badge {
font-size: 16px;
}
#v-personnel .process-map .badge b {
font-size: 16px;
}
#rank .top-cards {
grid-template-columns:1fr 1fr
}
#rank .btn-outline {
margin-left: 0;
}
#rank .name, #rank .rank-name {
font-size: 19px;
}
#rank .rank-no, #rank .no {
font-size: 17px;
}
}
@media (max-width: 1024px) {
#volunteer_apply #year{
width: 60% !important;
}
.logout-card {
width: 100%;
max-width: none;
margin-bottom: 40px;
}
.center .card-rightBox {
width: 100%;
flex-direction: column;
}
.center .card-rightBox .rank-box {
width: 100%;
}
.center .card-grid {
grid-template-columns: repeat(2, 1fr);
}
.center .card-rightBox .card-banner .txt-box p {
font-size: 17px;
}
.center .card-rightBox .card-banner button a {
font-size: 16px;
}
.center .card-rightBox .card-banner button {
width: 180px;
height: 45px;
}
.info-table tbody td {
padding: 22px 18px;
}
#v-system .tier {
grid-template-columns: 1fr;
grid-template-areas:
"pill"
"card";
gap: 14px;
align-items: start;
margin-bottom: 0;
}
#v-system .tier + .tier::before {
left: 20%;
}
#v-system .tier-arrow {
display: none
}
#v-system .tier + .tier {
margin-top: 22px
}
#v-system .tier + .tier::before {
left: 50%;
transform: translateX(-50%);
top: -18px;
width: 28px;
height: 28px;
background: url("/img/designIcon/arrow-down02.png") center/contain no-repeat;
display: block;
opacity: .9;
}
#v-system .cols ul {
list-style: none;
padding-left: 0;
}
#v-system .cols li {
position: relative;
padding-left: calc(14px + 8px);
}
#v-system .cols li.list-blue::before, #v-benefit li.list-blue::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 14px;
height: 14px;
background: url("/img/designIcon/li_mark-check.png") no-repeat center/100% 100%;
}
#v-system .cols li.list-pink::before, #v-benefit li.list-pink::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 14px;
height: 14px;
background: url("/img/designIcon/li-bullet_check.png") no-repeat center/100% 100%;
}
#v-system .cols li.list-blue, #v-system .cols li.list-pink, #v-benefit li.list-blue, #v-benefit li.list-pink {
list-style-image: url("");
}
#v-system .card {
grid-area: card
}
#v-system .pill {
grid-area: pill;
height: 180px;
margin: 0 auto;
padding: 18px 12px;
}
#v-system .pill h3 {
font-size: 21px;
}
#v-system .pill p {
font-size: 16px;
font-weight: 400;
}
#v-system .cols {
grid-template-columns:1fr;
padding: 18px 18px
}
#v-system .card-head {
padding: 20px 18px 14px
}
#v-system .card-title {
font-size: 18px;
line-height: 1.35
}
#v-system .card-sub {
font-size: 15px
}
#v-accident .year-title, #v-accident .year-title strong {
font-size: 21px
}
#v-accident .grid {
grid-template-columns:140px 1fr;
padding: 31px 40px
}
#v-benefit .grid {
gap: 30px 35px;
}
.duties {
grid-template-columns:repeat(2, 1fr)
}
#v-index .thumList_wrap {
grid-template-columns:repeat(2, minmax(0, 1fr))
}
#v-index .c-txt-area h3 {
font-size: 18px
}
#v-index .c-txt-area p {
font-size: 14px
}
#v-index .grid02 .row {
grid-template-columns:190px 1fr
}
#edu .edu-grid {
grid-template-columns:repeat(2, 1fr)
}
#edu .target-card {
grid-template-columns:140px 1fr;
gap: 25px;
}
#edu .target-media {
padding: 35px;
}
#edu .target-content h3 {
font-size: 21px;
}
#edu .ministry {
height: 52px;
}
#login .login-content{ gap:24px; }
}
@media (max-width: 1000px) {
nav .header-container li a {
font-size: 17px;
}
.main-top .main-bannerWrapper {
max-width: none;
}
.select-group {
justify-content: center;
gap: 20px;
}
.quick-menu a {
font-size: 16px;
gap: 10px;
padding: 15px 0;
}
.quick-menu a img {
width: 50px;
}
#join .title-box .popup-info , #join_complete .title-box .popup-info {
position: absolute;
left: 150px;
width: 100%;
}
#inquiry .faq-btn {
width: 250px;
font-size: 16px;
}
#v-accident .flow-list, #v-info .flow-list {
grid-template-columns: repeat(2, 1fr);
}
#v-personnel .mb-info-card {
border-radius: 10px;
border: 6px solid #F2F2F2;
background: #FFF;
padding: 30px;
display: block;
margin-bottom: 32px;
}
.mb-info-title {
color: #000;
font-size: 20px;
font-weight: 800;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.mb-info-title img {
padding-right: 20px;
width: 75px;
}
.info-card {
display: none;
}
#v-info .info-imgWrap .pc-bg-info {
display: none;
}
#v-info .info-imgWrap .mb-bg-info {
display: block;
}
#v-info .info-imgWrap > .pin span:first-of-type, #v-info .info-imgWrap > p.pin span:nth-of-type(2) {
display: none;
}
#v-info .info-imgWrap > .pin:first-of-type strong, #v-info .info-imgWrap > p.pin:nth-of-type(2) strong {
display: none;
}
#v-info .info-imgWrap .pin {
display: none;
}
#v-personnel .process-map .pin--badge-top {
--x: 50%;
--y: 14%;
}
#search-id .id-form .bg-con .input-box,
#search-pw .id-form .bg-con .input-box{
padding: 20px;
}
.main-popup-wrap .layer_cont2 h3{
font-size: 20px;
}
#login .title-box img{
width: 30px;
}
#login .auth-card p{
padding: 0;
}
}
@media (max-width: 980px) {
#transfer .form-grid {
grid-template-columns:120px 1fr 120px 1fr;
gap: 12px 14px;
}
#transfer .input--code {
max-width: 100%
}
#transfer .input--code.pattern{
max-width: 100%;
background-color: #f2f2f2;
background-image: repeating-linear-gradient(
-45deg,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.03) 8px,
transparent 8px,
transparent 16px
);
}
#volunteer_apply .adv-grid {
grid-template-columns:1fr 1fr
}
#volunteer_apply .row2 {
grid-template-columns:1fr
}
#stats .year-filter {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#v-benefit .body li {
position: relative;
padding-left: calc(14px + 8px);
}
#v-index .flow-list {
grid-template-columns: repeat(2, 1fr);
}
#v-index .duties {
grid-template-columns: repeat(2, 1fr)
}
#v-index .sub01 .title-box h2 {
line-height: normal;
}
#v-index .grid02 .row {
grid-template-columns:1fr;
gap: 10px;
}
#v-index .info-list li {
font-size: 16px;
}
#v-info .grid {
grid-template-columns:repeat(2, minmax(0, 1fr));
gap: 40px;
}
#v-perfor .infoBox-tit {
grid-template-columns: 1fr;
gap: 18px
}
#v-perfor .infoBox-tit.l2 {
grid-template-columns: 1fr;
}
#v-perfor img {
display: none;
}
#certi .infoBox-tit {
grid-template-columns: 1fr;
gap: 18px
}
#certi .infoBox-tit.l2 {
grid-template-columns: 1fr;
}
#certi .form-grid {
grid-template-columns: 120px 1fr;;
align-items: start
}
#certi .form-grid .label {
padding-top: 6px
}
#certi .rrn-group .input {
flex: 1 1 calc(50% - 9px);
min-width: 0
}
#certi .rrn-group .hyphen {
width: auto
}
#rank .toolbar {
width: 100%;
justify-content: flex-end
}
#rank .rank-meta, #rank .right-wrap {
gap: 12px;
}
}
@media (max-width: 975px) {
#volunteer_apply #year{
width: 70% !important;
}
#v-personnel .w-1400 {
display: none;
}
#v-personnel .w-975 {
display: block;
margin-top: 50px;
}
#v-personnel .w-480 {
display: none;
margin-top: 40px;
}
#v-personnel .card {
padding: 26px 18px;
height: auto;
}
#v-personnel .process-map .pin {
white-space: normal;
}
.redCross_result .textBox .t01 span{
font-size: 23px;
}
#v-personnel .process-map {
display: none;
}
.footer-mark{
text-align: start;
}
.footer-container .logo-infoWrap{
flex-direction: column;
}
}
@media (max-width: 960px) {
.edu-schedule .top-grid {
grid-template-columns:1fr
}
.edu-schedule .form .row {
grid-template-columns:80px minmax(0, 1fr)
}
.edu-schedule .form .row--date {
grid-template-columns:80px minmax(0, 1fr)
}
#search-id .id-form{
padding: 0;
}
#search-id .captcha-actions{
padding-top: 15px;
}
}
@media (max-width: 900px) {
.sub01-banner__inner {
/*grid-template-columns: 1fr;*/
align-items: center;
}
.banner__art {
justify-self: start;
max-width: 350px;
}
.crumbs {
order: 1;
}
.selects {
order: 2;
}
.toolbar .actions {
display: none;
}
.sub01 .bt-effect .effect-card p {
padding: 27px;
}
.way .tag {
font-size: 18px;
}
#participate .flow-arrow {
right: -20px;
}
.eval-kv th, .tbl-basic th {
font-size: 17px;
}
#login .login-content{
flex-direction:column;
}
#login .login-formWrap,
#login .auth-grid{
flex:none;
width:100%;
}
}
@media (max-width: 875px) {
#volunteer_apply #year{
width: 100% !important;
}
#v-perfor .info p{
font-size: 14px;
}
.info p, .itemlink{
line-height: normal !important;
}
.homepage{
display: flex;
justify-content: start !important;
align-items: center;
}
.sub01 .center .left-box, .sub01 .center .right-box {
flex-direction: column;
gap: 20px;
}
.sub01 .bt-effect .effect-card {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sub01 .bt-rule .v-rules li {
padding: 18px 24px 18px 82px;
}
.sub01 .bt-rule .v-rules {
flex-direction: column;
}
.sub01 .bt-rule .v-rules .num {
left: 34px;
}
.sub01 .bt-effect .effect-card p, .sub01 .bt-effect .effect-card .card-title {
height: auto;
}
.sub01 .bt-effect .effect-card .card-title {
padding: 24px 32px;
}
.sub01 .bt-effect .effect-card .card-title h3 {
font-size: 20px;
line-height: 27px;
}
.main-header {
display: none;
}
.banner__art {
top: 61px;
right: -30px;
}
.header-nav {
padding: 0;
}
nav .header-container ul {
display: none;
}
nav .header-container {
justify-content: space-between;
height: 55px;
position: relative;
}
.logo {
display: none;
}
.mo-logo {
display: block;
padding-left: 12px;
width: 85%;
}
.hamburger {
height: 100%;
}
.my-pageBtn {
position: absolute;
right: 60px;
display: block;
cursor: pointer;
}
.login-content {
padding: 60px 50px;
}
#loginForm {
width: 100%;
}
.simple-grid {
grid-template-columns: 1fr;
}
.simple-card {
width: 100%;
max-width: none;
padding: 30px 75px 43px 75px;
gap: 21px;
}
.sub01 .center .card-box {
height: auto;
}
.captcha-canvas {
width: 40%;
}
#search-id .id-form, #search-pw .id-form {
padding: 0;
}
#search-id .save-option, #search-pw .save-option {
align-items: flex-start;
}
#search-id .input-wrap {
flex-direction: column;
}
#search-id .captchaBox, #search-pw .captchaBox {
flex-direction: column;
}
#search-id .captcha-canvas, #search-pw .captcha-canvas {
width: 100%;
flex: auto;
}
#search-id .captchaBox input, #search-pw .captchaBox input {
flex: auto;
}
.auth-grid {
grid-template-columns: 1fr;
}
#change-pwInfo .main-titleBox h2 {
font-size: 35px;
}
#change-pwInfo .sub-infoBox {
margin-top: 30px;
gap: 8px;
}
#change-pwInfo .sub-infoBox p {
font-size: 17px;
}
#performance .src-fig {
font-size: 18px;
padding-top: 10px;
}
#search-keyword, #search-type {
height: 38px;
}
.stat-head {
width: auto;
height: auto;
padding: 14px 20px;
}
.stat-heading b, .stat-heading {
font-size: 20px;
}
.stat-center {
white-space: normal;
}
.filter-card {
padding: 20px 24px;
}
.filter-grid {
grid-template-columns: fit-content(10ch) minmax(0, 1fr);
gap: 12px 40px;
align-items: flex-start;
}
.range-group {
gap: 6px
}
.chip-radio label {
min-width: 42px;
height: 30px;
padding: 0 8px
}
.filter-actions {
margin-top: 16px
}
#transfer .filter-actions {
margin-top: 0
}
#performance .btn-search {
width: 120px
}
.common .info h3 {
font-size: 17px;
}
.common .meta b {
font-size: 15px;
}
.common .meta span {
font-size: 15px;
}
#performance .top-line {
flex-direction: column;
align-items: center;
}
#performance .search-btn {
font-size: 15px;
}
#performance .total {
margin-top: 6px
}
#performance select.field, #performance .date input {
width: 100%;
height: 38px;
}
.common .item {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 4px;
}
#performance .num-badge {
width: auto;
justify-content: flex-start;
order: 1;
}
#performance .info {
order: 2;
}
#performance .info h3 {
white-space: normal
}
#performance .meta {
gap: 10px
}
#performance .btns {
justify-content: flex-end
}
.pagination {
justify-content: center;
flex-wrap: nowrap;
gap: 8px;
padding-inline: 8px;
margin: 22px 0;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
.page-btn, .page {
width: clamp(28px, 7vw, 32px);
height: clamp(28px, 7vw, 32px);
border-radius: 50%;
font-size: clamp(13px, 3.3vw, 14px);
flex: 0 0 auto;
}
.page-btn svg {
width: 1em;
height: 1em
}
#performance .ellipsis {
flex: 0 0 auto;
min-width: 0;
height: auto;
padding: 0 2px
}
#performance .kpi {
line-height: normal;
font-size: 18px;
}
#performance .kpi span {
font-size: 18px;
line-height: 30px;
}
#performance .field {
color: #232323;
}
.info-table,
.info-table thead, .info-table tbody, .info-table th, .info-table td, .info-table tr {
display: block;
width: 100%;
}
.info-table thead {
display: none;
}
.info-table {
border-radius: 10px;
}
.info-table tbody tr {
border-top: 1px solid #E5E7EB;
}
.info-table tbody tr:first-child {
border-top: 0;
}
.info-table tbody td {
border-right: 0;
padding: 14px 0 18px;
}
.info-table tbody td::before {
content: attr(data-label);
display: block;
background: #F5F6F8;
padding: 10px 10px;
border: 1px solid #E5E7EB;
border-radius: 6px;
margin-bottom: 10px;
color: #000;
font-family: "Pretendard";
font-size: 17px;
font-weight: 700;
line-height: 150%;
}
#blood .org-box {
justify-content: flex-start;
}
.panel {
margin-top: 24px;
}
#blood .panel {
margin-top: 40px;
margin-bottom: 0;
}
#blood form {
margin-bottom: 17px;
padding: 20px 0;
}
#blood .notice {
padding: 20px;
}
#blood .notice, #blood .notice b, #blood .notice .corp, #blood .notice .option {
font-size: 18px;
}
#blood .notice ul {
padding-top: 18px;
}
#blood .info {
flex-direction: column;
}
#blood .info .info-title {
width: 100%;
}
.info-table tbody td .org-box img {
padding-top: 10px;
}
#blood .agree span {
font-size: 19px;
}
#blood input[type="checkbox"] {
width: 19px;
height: 19px;
}
.info-table tbody td::before {
font-size: 17px;
}
.stat-agree {
flex-direction: column;
gap: 25px;
}
#result .info, #result .info strong {
font-size: 17px;
}
#result .stat-head {
gap: 0;
}
#result .box-title p, #result .box-title .stat-blue {
font-size: 28px;
}
.table-wrap {
flex-direction: column;
}
#table01-wrap tbody {
border-top: 2px solid #9D0058;
}
#table02-wrap tbody {
border-top: 2px solid #001048;
}
#table03-wrap .table tbody td {
border-left: none;
text-align: start;
}
table.responsive tbody td[data-content="제목"] {
position: relative;
}
table.responsive tbody td[data-content="제목"] img {
position: absolute;
right: 10px;
}
.noticeTable.table.responsive tbody th:before,
.noticeTable.table.responsive tbody td:before,
.inquiryTable.table.responsive tbody th:before,
.inquiryTable.table.responsive tbody td:before {
display: none;
}
.noticeSpan {
font-size: 12px;
padding: 1px 6px;
}
#board .noticeTable.table.responsive tbody td:nth-child(2) {
font-size: 16px;
}
.noticeTable.table.responsive tbody td:nth-child(2),
.inquiryTable.table.responsive tbody td:nth-child(3) {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 4px;
/*padding: 0 20px !important;*/
}
.noticeTable.table.responsive tbody td:nth-child(2) a,
.inquiryTable.table.responsive tbody td:nth-child(3) a {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.noticeTable.table.responsive tbody td:nth-child(2) {
margin-bottom: 16px;
}
.inquiryTable.table.responsive tbody td:nth-child(4) {
font-size: 15px;
margin-top: 6px;
margin-bottom: 16px;
color: #555;
}
/*임시 주석 어디가 회색으로 먹는지 확인 후 제거 예정*/
/*.noticeTable.table.responsive tbody td:nth-child(3),*/
/*.inquiryTable.table.responsive tbody td:nth-child(5) {*/
/* color: #777;*/
/* font-size: 16px;*/
/*}*/
#headquarter .table.table-a tbody td {
display: flex;
}
#headquarter .noticeTable.table.responsive tbody td:nth-child(2),
#headquarter .noticeTable.table.responsive tbody td:nth-child(3) {
color: #444;
}
.table thead th {
text-align: center;
}
.table tbody td[data-content="No"] {
display: none;
}
.table thead th,
.table tbody th,
.table tbody td,
.table tfoot th,
.table tfoot td {
/*padding: 4px 20px !important;*/
word-break: break-word !important;
height: auto !important;
}
.table tbody th,
.table tbody td span {
padding: 4px 8px;
}
.table colgroup col {
width: auto !important;
}
table.responsive thead {
display: none;
}
table.responsive colgroup {
display: none;
}
table.responsive tbody tr {
display: block;
position: relative;
border-bottom: 1px solid #dedede;
padding: 18px 0 14px 0;
}
table.responsive tbody tr:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
/*table.responsive tbody tr:nth-child(odd) {*/
/* background: #f8f8f8;*/
/*}*/
table.responsive tbody th,
table.responsive tbody td {
display: block;
padding: 4px 3%;
border: none;
background-color: transparent;
text-align: left;
box-sizing: border-box;
font-size: 15px;
}
table.responsive tbody td .subject {
font-size: 15px;
font-weight: 600;
white-space: normal;
display: inline;
}
table.responsive tbody td[data-content="제목"] {
font-size: 17px;
font-weight: 600;
}
table.responsive tbody th {
font-weight: 600;
}
table.responsive tbody tr:last-child td,
table.responsive tbody tr:last-child th {
border-top: none;
}
table.responsive tbody th:before,
table.responsive tbody td:before {
content: attr(data-content) " : ";
display: inline;
font-weight: 500;
margin-right: 4px;
}
table.responsive tfoot tr {
position: relative;
display: block;
border-bottom: 1px solid #dedede;
padding: 10px 0;
}
table.responsive tfoot tr:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
table.responsive tfoot tr:nth-child(odd) {
background: #f7f8f9;
}
table.responsive tfoot th,
table.responsive tfoot td {
display: block;
padding: 4px 3%;
border: none;
background-color: transparent;
text-align: left;
box-sizing: border-box;
font-size: 14px;
}
table.responsive tfoot th {
font-weight: 600;
}
table.responsive tfoot tr:last-child td,
table.responsive tfoot tr:last-child th {
border-top: none;
}
.table tbody th,
.table tbody td a {
padding-left: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*width: 400px;*/
}
.noticeTable.table.responsive tbody tr.fixed-notice th:first-child,
.noticeTable.table.responsive tbody tr.fixed-notice td a {
padding-left: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 330px;
}
/*.noticeTable.table.responsive tbody td[data-content="작성자"],*/
/*.noticeTable.table.responsive tbody td[data-content="작성일"] {*/
/* display: inline-block;*/
/* width: auto;*/
/* margin-right: 4px;*/
/* font-size: 14px;*/
/* font-weight: 400 !important;*/
/* color: #444;*/
/* vertical-align: middle;*/
/* text-align: left;*/
/*}*/
.noticeTable.table.responsive tbody td[data-content="작성일"] {
margin-right: 0;
position: relative;
}
/* 스크롤 테이블 */
.table-scroll-wrap .table thead th {
padding: 18px 20px !important;
}
.table-scroll-wrap .responsive {
min-width: 100% !important;
}
.table-scroll-wrap .responsive th,
.table-scroll-wrap .responsive td {
text-align: left !important;
}
.inquiryTable.table.responsive tbody td:nth-child(3) {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 4px;
padding: 0 20px;
}
.noticeTable.table.responsive tbody td:nth-child(2) {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 16px;
}
.noticeTable.table.responsive tbody td:nth-child(2) a {
white-space: inherit;
}
#result .help-box ul li, #result .help-box ul li strong {
font-size: 15px;
}
#result .help-box button {
font-size: 17px;
}
#transfer .search-bar button {
height: 38px !important;
font-size: 15px;
margin: 0 auto;
width: 100%;
}
#transfer .form-grid {
grid-template-columns:1fr;
gap: 10px 0;
}
#transfer .field {
padding-right: 0;
}
#transfer .search-bar input {
max-width: none;
}
#transfer .search-tableWrapper {
padding: 0;
}
#transfer .table-title span {
padding: 0;
}
#transfer .table-title {
padding: 14px;
margin-bottom: 0;
}
#transfer .panel__title {
font-size: 20px;
}
#transfer .table {
border-top: 2px solid #414F78;
}
.noticeTable.table tbody tr.fixed-notice th:first-child,
.noticeTable.table tbody tr.fixed-notice td:first-child,
.table tbody td[data-content="번호"],
.table tbody td[data-content="작성자"],
.table tbody td[data-content="등록일"],
.table tbody td[data-content="첨부파일"],
.table tbody td[data-content="조회수"] {
text-align: start;
}
.noticeTable.table.responsive tbody td:nth-child(2) {
margin-bottom: 4px;
}
.table.table-a tbody td {
text-align: start;
}
#centerDetails .filter-grid {
justify-items: start;
}
.common .info h3 {
/*width: 330px;*/
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.common .badge-row {
position: relative;
}
.common .badge-row img {
position: absolute;
right: 10px;
}
.common .round-wrap {
justify-content: flex-end;
}
.common .title-top-wrap {
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
.common .search-bar button {
width: auto;
height: auto;
padding: 9px 12px;
}
.common .grid {
grid-template-columns:1fr
}
.common .card__inner {
grid-template-columns:140px 1fr;
min-height: 126px;
column-gap: 25px;
}
.common .poster {
width: 110px;
height: 126px
}
#card02 .vmsC2-cards {
grid-template-columns:1fr;
gap: 20px
}
#card02 .vmsC2-card {
min-height: 140px
}
.apply-box {
flex-direction: column;
align-items: flex-start;
}
#volunteer_apply .adv-grid {
grid-template-columns:1fr
}
#volunteer_apply .adv-grid .field, #volunteer_apply .adv-block .field {
flex-direction: column;
align-items: flex-start
}
#volunteer_apply .field > label,
#volunteer_apply .field > .label {
flex: 0 0 auto;
width: auto
}
#volunteer_apply .field .control {
width: 100%
}
#volunteer_apply .adv-grid .field,
#volunteer_apply .adv-block .field {
gap: 15px;
}
#volunteer_apply .adv-panel, #volunteer_apply .adv-inner {
padding: 20px;
}
#volunteer_apply .adv-block .field .date-wrap {
flex-direction: row;
}
#volunteer_apply .adv-grid {
gap: 12px 0;
}
#stats .year-filter {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
#stats .year-filter button {
border-radius: 5px;
}
#stats .notes {
padding-top: 0;
}
#board .title {
font-size: 25px;
}
#board .fixed-notice {
background-color: #fbfbfb;
}
#board .page-head {
flex-direction: column;
}
#participate .step {
flex-direction: column;
}
.t1-info {
font-size: 17px;
}
#participate .step em {
font-size: 15px;
}
.t2 {
line-height: normal;
font-size: 19px;
}
.t2 img {
width: 16px;
}
#v-accident .row, #v-info .row {
display: block
}
#v-accident .label {
font-size: 18px;
padding: 6px 0
}
#v-accident .body {
padding-bottom: 24px;
border-bottom: 1px solid #E8ECF3;
margin-bottom: 14px
}
#v-accident .body:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0
}
#v-accident .table tbody tr:first-child {
border-bottom: 0;
text-align: start;
border-top: 0;
}
#v-accident .table tbody tr:last-child {
border-bottom: 0;
}
#v-accident #table03-wrap .table tbody td:first-child {
border-left: 0;
}
#v-accident .table tbody tr:first-child, #v-accident .table .t-head {
border-top: 0;
background-color: #EFF0F1;
padding: 7px;
}
#v-accident .term {
line-height: normal;
margin-bottom: 0;
}
.download_btn-primary {
font-size: 16px;
}
.download_btn-primary svg {
width: 20px;
}
#v-benefit .card {
padding: 30px;
}
#v-benefit .title {
padding-bottom: 14px;
font-size: 20px;
}
#v-benefit .card p {
font-size: 15px;
}
#v-benefit .body li {
font-size: 16px;
}
#v-benefit .grid {
grid-template-columns:1fr;
gap: 25px 0;
}
.sub01 .title-box h2, .sub01 .title-box h2 span {
font-size: 27px;
}
.sub01 .title-box p, .sub01 .title-box p strong {
font-size: 18px;
}
.sub01 .title-box h2 .left-comma {
left: -82px;
}
.sub01 .title-box h2 .left-comma, .sub01 .title-box h2 .right-comma {
width: 24px;
}
.sub01 .title-box h2 span {
font-size: 27px;
line-height: normal;
margin-top: 0;
}
#inquiry .grid {
gap: 16px 18px;
margin-top: 20px;
}
#v-index .title-box h2, #v-index .title-box h2 span {
margin-top: 0
}
#v-info .timeline-wrap {
padding: 0 16px;
}
#v-info .decade {
font-size: 28px;
}
#v-info .item {
grid-template-columns:80px 1fr;
}
#v-info .item::before {
top: 20px;
}
#v-perfor .infoBox {
padding: 25px;
}
#v-perfor .info {
padding: 35px 15px;
}
#v-perfor .info p {
font-size: 16px
}
#v-perfor .title {
font-size: 28px
}
#v-perfor .btn-primary {
width: 100%;
justify-content: center
}
#v-perfor .num {
min-width: 26px;
height: 26px;
font-size: 12px
}
#v-perfor .info-item h6 {
font-size: 18px;
}
#v-perfor .info-item p, #v-perfor .itemlink {
font-size: 16px;
}
#v-perfor .info-item {
height: 35px
}
#v-perfor .kicker {
line-height: normal;
margin-bottom: 14px;
font-size: 15px
}
#v-perfor .btn {
margin: 20px 0;
font-size: 18px;
}
#v-logo .header {
gap: 8px
}
#v-logo .page-title {
font-size: 20px
}
#v-logo .color-grid {
grid-template-columns:1fr
}
#v-accident .table tbody th {
width: 100%;
background-color: #EFF0F1;
}
#certi .title {
font-size: 28px
}
/*.search-bar button {*/
/* width: 38px;*/
/* height: 38px;*/
/*}*/
#performance #search-keyword {
height: 38px;
}
#rank .card .ribbon {
top: -30px;
}
#blood .notice ul {
padding-left: 0;
}
#blood .input, #blood .rrn-group {
width: 100%;
}
#blood .form-grid {
grid-template-columns: 130px 1fr;
}
#result #table01-wrap, #result #table02-wrap {
border-radius: 0;
}
/*.noticeTable.table.responsive tbody td:nth-child(2) {*/
/* font-weight: 700;*/
/* font-size: 18px;*/
/*}*/
.stat-card-wrap p, .stat-card-wrap span {
font-size: 20px;
}
.stat-panel {
padding: 35px 16px;
}
#rank .rank-row {
grid-template-columns:44px 1fr;
grid-auto-rows: auto
}
#rank .rank-meta {
justify-content: flex-start;
grid-column: 1/-1
}
#rank .trow {
grid-template-columns:50px 1fr
}
#rank .right {
grid-column: 1/-1;
justify-content: flex-start
}
#rank .tabs [role="tab"], #rank .tabs [role="tab"][aria-selected="true"] {
font-size: 17px
}
#rank .subhead h2, #rank .subhead .blue {
font-size: 26px
}
#rank .rank-no, #rank .no {
font-size: 20px
}
#rank .rank-row, #rank .trow {
gap: 12px 0;
padding: 26px 30px
}
#rank .card .eyebrow {
font-size: 16px;
margin-bottom: 2px
}
#rank .card .name {
font-size: 22px
}
#rank .card .meta, #rank .card .meta b {
font-size: 17px
}
#rank .card {
height: 320px;
padding: 27px 32px 35px;
}
#rank .card .cta {
font-size: 16px;
margin-top: 10px
}
#rank .top-cards {
gap: 29px
}
#rank .top-barWrap {
flex-direction: column
}
#rank .section-title {
margin-bottom: 5px;
gap: 0
}
#rank .section-title h2, #rank .section-title .pink {
font-size: 26px;
background-color: transparent
}
#rank .rank-meta span, #rank .tab-panels span, #rank .tab-panels span b {
font-size: 17px
}
#rank .dim {
font-size: 18px
}
#rank .subhead {
flex-direction: column;
gap: 25px;
align-items: flex-start
}
#rank .card .ribbon img {
width: 90px
}
#rank .right-wrap {
justify-content: flex-start;
}
/* 메타/버튼 줄바꿈 */
#rank .rank-meta, #rank .right {
flex-wrap: nowrap;
align-items: center;
gap: 8px 12px;
}
/* 툴바 2열 구성 */
#rank .toolbar {
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px 12px;
}
#rank .filter-actions {
flex: 1 1 100%
}
#rank .filter-actions .btn-search {
width: 100%;
justify-content: center;
height: 44px;
}
#rank .unit {
font-size: 15px
}
#rank .card .cd-bottom {
gap: 10px;
}
table.noticeTable td {
display: flex;
align-items: center;
gap: 8px;
}
table.noticeTable td strong.td-label {
display: inline-block;
}
#rank .table {
border-top: 0;
}
.table {
border-top: 2px solid #B1006C;
}
.table tbody td[data-content="번호"] {
display: none;
}
#headquarter .table {
border-top: 2px solid #9D0058;
}
.signUp_certification .inquiry {
flex-direction: column !important;
}
.signUp_certification .inquiry dl {
margin: 0 0 30px 0;
}
#search-id .row.regno-inputs input {
flex: auto;
}
#search-id .id-form .bg-con .input-box, #search-pw .id-form .bg-con .input-box {
padding: 31px;
}
#search-id .captcha-actions, #search-pw .captcha-actions {
padding-top: 12px;
}
#search-id .desc, #search-pw .desc {
font-size: 16px;
}
input::placeholder {
font-size: 15px !important;
}
button, .btn-ghost {
font-size: 17px;
}
#specialty .table tbody td {
text-align: start;
}
.table.common #table02-wrap .table.responsive tbody td {
display: flex;
align-items: center;
padding: 3px 10px;
font-size: 14px;
}
.table.common #table02-wrap .table tbody td a {
font-size: 14px;
}
.login-content, .simple-login-content {
height: auto;
}
#join_enterInformation .label {
padding: 10px 0;
}
#join_enterInformation .field {
padding: 0 0 20px;
}
#join_enterInformation .form-grid input[type="checkbox"] {
width: 17px;
}
#join_enterInformation .info-text {
margin: 0 0 24px;
}
#join_enterInformation .form-grid {
grid-template-columns: 1fr;
gap: 8px 0;
}
#secede .form-grid{
grid-template-columns: 1fr;
gap: 0;
}
#join_enterInformation .form-grid > *, #secede .form-grid > *{
grid-column: 1 / -1;
}
#join_enterInformation .form-grid > label, #secede .form-grid > label {
display: block;
margin-bottom: 6px;
white-space: nowrap;
}
#join_enterInformation .form-grid input,
#join_enterInformation .form-grid select,
#join_enterInformation .form-grid textarea,
#secede .form-grid input,
#secede .form-grid select,
#secede .form-grid textarea
{
width: 100%;
}
.table.common #table02-wrap .table, .table.common #table02-wrap tbody {
border-top: 0;
}
.table.common #table02-wrap .table tbody tr {
background-color: #f1f1f1 !important;
}
#table_table tbody tr {
padding: 10px 0;
}
.table.common tbody #filearea td, .table.common tbody #filearea {
padding: 0;
}
.table.common #table02-wrap .table tbody tr {
padding: 10px;
}
#board .clamp-2 {
font-size: 17px;
}
.eval-kv tr.pair {
display: grid;
grid-template-columns:34% 1fr
}
.eval-kv tr.pair th, .eval-kv tr.pair td {
padding: 10px 12px;
border-top: none !important
}
.eval-kv tr.pair th:nth-of-type(1) {
grid-column: 1;
grid-row: 1
}
.eval-kv tr.pair td:nth-of-type(1) {
grid-column: 2;
grid-row: 1
}
.eval-kv tr.pair th:nth-of-type(2) {
grid-column: 1;
grid-row: 2;
border-top: 1px solid #EEF0F3;
background: #F8FAFC;
font-weight: 700
}
.eval-kv tr.pair td:nth-of-type(2) {
grid-column: 2;
grid-row: 2;
border-top: 1px solid #EEF0F3
}
.eval-kv tr.full {
display: grid;
grid-template-columns:34% 1fr
}
.eval-kv tr.full th {
grid-column: 1;
grid-row: 1;
background: #F8FAFC;
font-weight: 700
}
.eval-kv tr.full td {
grid-column: 2;
grid-row: 1
}
.eval-kv th {
width: auto;
font-size: 16px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #DDD
}
.eval-kv td {
border-bottom: 1px solid #DDD;
font-size: 15px
}
#board .table tbody td {
text-align: start;
display: flex;
align-items: center;
gap: 2px;
}
#board .table tbody td{
display: flex;
align-items: center;
gap: 4px;
}
#certPopupTitle{
font-size: 20px;
}
.comment-form{
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 8px;
border: none;
padding: 20px;
}
.comment__author{
font-size: 20px;
}
.cf-submit{
grid-column: 1;
grid-row: 5;
width: 100%;
height: 44px;
margin-top: 6px;
border-radius: 10px;
font-size: 1rem;
}
.author-wrap{
gap: 30px;
}
.author-wrap .author-box{
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
}
.cf-count{
align-self: end;
white-space: nowrap;
}
.writing-area{
flex-direction: column;
gap: 20px;
}
.comment__meta{
flex-wrap:wrap;
gap:6px;
}
.comment__time{
order:3;
width:100%;
margin-left:0;
font-size: 14px;
}
.comment__actions{
order:2;
margin-left:0;
}
.comment__body{
font-size: 16px;
}
.comment__edit{
width:100%;
line-height:40px;
border-radius:10px;
flex-direction:column;
align-items:stretch;
}
.comment__edit input{
height: 35px;
}
.cf-textarea, .comment__edit input{
font-size: 16px;
}
.dropdown{
min-width: fit-content;
}
.dropdown__current{
font-size: 15.5px;
}
#notice-tbody tr td{
text-align: start;
display: flex;
}
.empty{
padding: 20px !important;
text-align: center !important;
font-size: 17px !important;
font-weight: 500 !important;
font-family: "Pretendard" !important;
}
.notice-tab{
font-size: 17px;
}
#secede .field {
padding: 0;
}
#secede .label{
padding: 20px 0;
}
#performance .table tbody td a{
text-align: start;
}
.title-box p br {
display: none;
}
.skipTarget {
scroll-margin-top: 60px;
}
}
@media (max-width: 768px) {
.top-bar {
height: 30px;
line-height: 25px;
}
.goto-btn {
display: none;
}
nav {
border-top: 0;
}
.hamburger {
width: 60px;
}
.banner-box {
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-top .login-box .btn-box {
flex-direction: column;
}
.main-top .login-box .goto-loginBox {
justify-content: center;
}
.banner-box .txt-box,
.banner-box img {
max-width: 100%;
}
.center .card-grid {
grid-template-columns: 1fr;
}
.center .card {
height: auto;
}
.center .card .card-txtBox {
gap: 40px;
}
.quick-menu a {
flex: 0 0 50%;
max-width: 50%;
border-bottom: 1px solid #D4D4D4;
flex-direction: column;
gap: 12px;
padding: 12px 0;
}
.quick-menu a:nth-child(2):after,
.quick-menu a:nth-child(4):after {
display: none;
}
.quick-menu a:nth-child(3),
.quick-menu a:nth-child(4) {
border-bottom: none;
}
.quick-menu a:not(:nth-child(2)):after {
height: 100%;
top: 0;
transform: none;
}
.vms-container {
flex-direction: column;
}
.stats-area {
width: 100%;
}
.highlight-box .icon {
margin-bottom: 10px;
width: 104px;
}
.main-top .login-box .login-btn {
width: 90%;
}
.notice-area nav {
display: grid;
grid-template-columns: 1fr 1fr;
border: 0;
gap: 10px;
}
.notice-area {
border: 0;
overflow: initial;
flex: none;
}
.notice-tabs {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
border-bottom: 0;
border: 0;
/*margin-bottom: 60px;*/
}
.notice-tab {
width: 100%;
border: 1px solid #D4D4D4;
border-radius: 10px;
}
.notice-tab.active {
width: 100%;
}
.notice-tab:nth-child(4),
.notice-tab:nth-child(1){
border-radius: 10px;
}
.notice-tab.plus {
display: none;
}
.mo-only {
height: 45px;
font-size: 17px;
font-weight: 800;
color: #666;
background: #F8F8F8;
cursor: pointer;
position: relative;
border-radius: 8px;
border: 1px solid #DDDDDD;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
gap: 10px;
}
.mo-only img{
width: 13px;
}
.notice-tabs .notice-tab:not(.plus):not(.no-after):not(:last-of-type)::after {
display: none;
}
.notice-tab-content {
border: 1px solid #D4D4D4;
border-radius: 15px;
margin-top: 20px;
padding: 28px;
}
.sub01 .bt-rule .v-rules li {
flex: 0 0 100%;
}
.sub01 .select-wrap {
max-width: none;
}
.crumbs__home {
width: 52px;
}
.select-wrap select {
padding-left: 10px;
}
.select-wrap {
min-width: auto;
max-width: none;
}
#join h2 {
margin-bottom: 28px;
margin-top: 20px;
}
.terms {
padding: 30px;
}
.agree-msg {
font-size: 16px;
}
.radios label {
font-size: 16px;
}
.all-agree span {
font-size: 20px;
}
#search-id,
#search-pw {
flex-direction: column;
gap: 40px;
}
#search-id .id-form input[type="text"],
#search-id .id-form input[type="password"],
#search-pw .id-form input[type="text"],
#search-pw .id-form input[type="password"] {
max-width: 100%;
}
#search-pw .input-con {
padding: 60px 80px;
}
.clamp-2 {
font-size: 15px;
}
.eval-body {
background: #fff;
padding: 18px 18px 20px;
overflow: scroll;
height: 530px;
}
.rate-item {
flex-direction: column;
}
.eval-head h3 {
font-size: 20px;
}
#gallery .grid {
gap: 27px 23px;
}
#gallery .card__inner {
padding: 20px 23px;
}
#gallery .card__inner .content .title .title__text {
font-size: 19px;
}
#gallery .tail {
background: transparent;
height: auto;
width: auto;
}
#gallery .card__inner .content .txt-box {
padding-bottom: 30px;
}
#stats #activityChart {
height: 260px
}
#stats .notes {
padding-left: 0;
}
#stats #sectionTitle, #stats .section-title .year {
font-size: 18px;
}
#stats .table thead th {
font-size: 15px;
}
#stats .table .col-name, #stats .table .col-val {
font-size: 14px;
}
#stats .meta .total {
font-size: 14px;
}
#stats .year-filter button {
height: 35px;
}
#stats .chart-stage {
padding: 40px 30px;
}
#board .table tbody td {
font-size: 16px;
text-align: start;
}
#board .tbl-basic th, .tbl-basic td,
#board .contact-banner__list li,
#board .contact-banner__list li b,
#board .contact-banner a {
font-size: 16px;
}
#board .contact-banner {
margin: 10px auto;
padding: 35px 18px 35px 35px;
}
.prev-nextCon .btn {
font-size: 16px;
}
#board .sub-wrap {
margin-top: 20px !important;
}
#board .clamp-2 {
font-size: 16px;
}
#v-accident .flow-list, #participate .flow-list, .flow-list {
grid-template-columns:repeat(2, 1fr);
gap: 16px 18px
}
#participate .flow-circle {
gap: 12px
}
.flow-circle {
width: 150px;
height: 150px
}
.flow-title {
font-size: 16px
}
#participate .h-title {
font-size: 22px
}
#participate .t1-info, #participate .step em {
font-size: 16px;
line-height: 25px;
}
#participate .grid {
grid-template-columns:1fr
}
.way {
padding: 16px;
margin-top: 23px
}
.way .tag {
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
}
#participate .step {
min-height: 48px;
font-size: 15px;
}
#participate .arrow {
height: 22px
}
.t1 {
font-size: 23px;
}
#participate .apply-section {
margin-top: 45px;
}
.flow-item:nth-child(2) .flow-arrow,
.flow-item:nth-child(4) .flow-arrow {
display: none;
}
#inquiry .page-title {
font-size: 22px
}
#inquiry .faq-btn {
width: 200px;
font-size: 14px;
height: 45px;
}
#inquiry .notice {
padding: 30px
}
#inquiry .notice::after {
width: 250px;
background-size: 180px auto, 180px auto;
opacity: .3
}
#inquiry .title {
font-size: 19px;
line-height: 26px
}
#inquiry .n-body li {
font-size: 14px;
}
#inquiry .n-body .warn {
font-size: 14px;
}
#inquiry .body li, #inquiry .body p, #inquiry .lead, #inquiry .lead a {
font-size: 15px;
}
#inquiry .card-main {
padding: 30px 30px 30px 20px;
gap: 8px;
}
#inquiry .n-strong,
#inquiry .n-head,
#inquiry .n-strong .time {
font-size: 17px
}
#inquiry .footbar {
gap: 3px;
padding: 12px 18px;
}
.body li::before {
width: 0.95rem;
top: 0.4em;
}
.info-card {
padding: 18px
}
#v-accident .grid {
grid-template-columns:1fr;
gap: 8px 0
}
#v-accident .term {
font-size: 16px;
padding-top: 10px
}
#v-accident .desc {
padding-bottom: 10px;
border-bottom: 1px dashed #f0cfe0
}
#v-accident .grid > .term + .desc {
margin-top: -6px
}
#v-index .flow-list {
grid-template-columns:repeat(2, 1fr)
}
#v-info .flow-circle {
width: 250px;
height: 250px;
}
#v-info .flow-circle .flow-icon {
width: 45px;
}
#v-info .flow-circle p {
font-size: 18px;
}
#v-info .flow-title span {
font-size: 14px;
}
#v-info .flow-list {
grid-template-columns:1fr;
}
#certi .form-grid {
grid-template-columns: 1fr;
gap: 12px 0;
}
#certi .form-grid .label {
padding-top: 0;
}
#certi .rrn-group {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
#certi .rrn-group .input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: 44px;
}
#certi .rrn-group .hyphen {
display: none;
}
#edu .edu-grid {
grid-template-columns:1fr
}
#edu .target-grid {
grid-template-columns:1fr
}
#edu .tit-detail {
font-size: 18px;
margin-bottom: 30px
}
#edu .tit-detail, #edu .tit-detail strong {
font-size: 17px;
}
#edu .target-content {
padding: 26px 0;
}
#v-logo .btn-download {
margin-bottom: 20px;
width: auto;
}
.sub-wrap.perfor_m img[alt="VMS 실적은 1365자원봉사 종합포털을 통해 교육행정정보시스템으로 연계됩니다"] {
content: url('/img/designIcon/perfor-mo.png');
}
.sub-wrap.perfor_m img {
display: none;
}
.sub-wrap.perfor_m:after {
content: "";
display: block;
height: 800px;
background: url("/img/designIcon/perfor-mo.png") no-repeat top center / contain;
}
.notice-tab:nth-child(1){
border-radius: 10px;
}
.table.noticeTable tbody tr.empty td {
display: table-cell !important;
width: 100% !important;
}
.signUp_certification .inquiry .btnarea{
width: 100%;
}
}
@media (max-width: 720px) {
.steps::before{
top: 22%;
}
#certi .infoBox {
padding: 25px;
}
#certi .info {
padding: 35px 15px;
}
#certi .btn-primary {
width: 100%;
justify-content: center
}
#certi .num {
min-width: 26px;
height: 26px;
font-size: 12px
}
#certi .info-item h6 {
font-size: 18px;
}
#certi .info-item p {
font-size: 16px;
}
#certi .con-list {
font-size: 15px;
}
#certi .rrn-group {
gap: 12px
}
#certi .rrn-group .input {
height: 44px
}
/*#performance #search-keyword {*/
/* max-width: 55%;*/
/*}*/
.boardView_detail,
.boardView_detail img,
.boardView_detail p,
.boardView_detail span,
.boardView_detail font,
.boardView_detail ul,
.boardView_detail ol,
.boardView_detail li,
.boardView_detail table,
.boardView_detail b,
.boardView_detail v,
.board-content,
.board-content img,
.board-content span,
.board-content font,
.board-content ul,
.board-content ol,
.board-content li,
.board-content table,
.board-content b,
.board-content v,
.boardView_detail a,
.board-content a,
.boardView_detail strong,
.board-content strong {
font-size: 17px;
}
.boardView_detail h1,
.board-content h1 {
font-size: 25px;
}
.boardView_detail h2,
.board-content h2 {
font-size: 24px;
}
.boardView_detail h3,
.board-content h3 {
font-size: 23px;
}
.boardView_detail h4,
.board-content h4 {
font-size: 22px;
}
.boardView_detail h5,
.board-content h5 {
font-size: 21px;
}
}
@media (max-width: 700px) {
.common .card-list {
grid-template-columns: 1fr;
height: auto;
}
}
@media (max-width: 650px) {
.sub01 .title-box h2 .right-comma {
right: -52px;
}
.sub01 .title-box h2 .left-comma {
left: -52px;
}
.sub01 .bt-rule .v-rules .num {
left: 27px;
font-size: 17px;
}
.sub01 .bt-rule .v-rules li {
padding: 18px 24px 18px 62px;
}
.col-reverseBox > img {
width: 60%;
margin-bottom: 20px;
}
.sub01 .bt-rule .v-rules p {
font-size: 16px;
}
.sub01 .bt-effect .effect-card p {
font-size: 16px;
line-height: 25px;
}
.banner__art {
max-width: 300px;
}
.banner__eyebrow {
font-size: 17px;
line-height: 50px;
white-space: nowrap;
}
.page-header .title {
font-size: 32px;
}
.agree-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
height: auto;
}
.step--current p {
font-size: 15px;
}
.step--current strong {
font-size: 17px;
}
.step p {
font-size: 15px;
}
.step strong {
font-size: 17px;
}
#join h2 {
margin-bottom: 18px;
margin-top: 10px;
font-size: 30px;
}
.join-container .desc {
margin-bottom: 24px;
font-size: 16px;
}
.term__title {
margin-bottom: 14px;
font-size: 19px;
}
.tag {
font-size: 20px;
}
.tag.opt {
font-size: 17px;
}
.agree-row {
padding: 18px 20px;
margin-bottom: 34px;
}
input[type="checkbox"] {
width: 17px;
height: 17px;
}
.term__scroll strong {
font-size: 18px;
}
.term__scroll .term-list-title {
font-size: 15px;
}
.term__scroll .term-list-info {
font-size: 14px;
}
.all-agree span {
font-size: 18px;
}
#search_idpw-complete .bg-container .txt-title,
#search_idpw-complete .bg-container .txt-box .txt-title strong,
#search_idpw-complete .bg-container .txt-box .txt-title span {
font-size: 20px;
}
#search_idpw-complete .bg-container .txt-info {
font-size: 16px;
}
#search_idpw-complete .bg-container .txt-box {
gap: 10px;
}
#search_idpw-complete h1, #search_idpw-complete span,
#join_complete h1, #join_complete h1 span {
font-size: 32px;
}
.filter-grid {
grid-template-columns: 1fr;
}
.filter-label {
padding-top: 6px;
}
#performance .stat-chip, #performance .stat-center {
font-size: 20px;
}
#result .help-box {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
gap: 30px;
}
.table-wrap {
flex-direction: column;
}
#result .sec-txtBox {
flex-direction: column;
gap: 0;
justify-content: flex-start;
align-items: flex-start;
}
.stat-agree {
gap: 18px;
}
.stat-card-wrap .logo-box {
width: 270px;
height: 50px;
}
.stat-card-wrap .logo-box img {
width: 65%;
}
#result .info, #result .info strong {
font-size: 15px;
}
#result .info {
font-size: 15px;
text-align: start;
line-height: 20px;
}
#result .box-title {
flex-direction: column-reverse;
gap: 0;
align-items: flex-start;
}
.center-search span, .center-search span b {
font-size: 16px;
}
#transfer .panel__body {
padding: 16px 14px 20px
}
#transfer .search-bar {
display: grid;
grid-template-columns: minmax(120px, 120px) 1fr;
grid-auto-rows: minmax(38px, auto);
gap: 8px;
}
#transfer .label {
justify-self: start;
margin-top: 10px;
}
#transfer .filter-actions {
grid-column: 1 / -1;
}
#transfer .btn-search {
width: 100%;
justify-content: center;
}
.common .card {
flex-basis: 100%;
max-width: 100%
}
.common .meta {
flex-wrap: wrap;
row-gap: 6px
}
.common .m-right {
margin-left: auto
}
.common .title {
-webkit-line-clamp: 1;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 22px;
word-break: keep-all;
overflow-wrap: anywhere;
}
#gallery .card__inner .content .title .title__text {
font-size: 17px;
}
.common .left {
grid-template-columns: 28px 1fr;
}
#stats .year-filter {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#board .contact-banner__list {
gap: 8px 14px
}
#board .contact-banner__sep {
display: none
}
#board .tbl-basic th, .tbl-basic td {
width: 8% !important;
}
.alert-board .pn-item {
grid-template-columns: 70px 1fr;
gap: 8px;
padding: 12px 0
}
.alert-board .pn-label {
order: 1
}
.alert-board .pn-link {
order: 2
}
#v-accident .year-title, #v-accident .year-title strong {
font-size: 22px;
display: flex;
flex-direction: column;
gap: 3px;
}
.info-head {
flex-direction: column
}
#v-accident .info-note {
margin-bottom: 50px;
font-size: 13px;
line-height: 20px
}
#v-accident .info-note strong {
font-size: 13px
}
#v-accident .info-title, #v-accident .info-title span {
font-size: 20px
}
#v-accident .grid {
margin-top: 20px;
margin-bottom: 20px;
padding: 20px
}
#v-accident .grid > .term + .desc {
font-size: 14px;
line-height: normal
}
#v-accident .info-desc, #v-accident .info-desc strong {
font-size: 15px
}
#v-accident .flow-circle {
width: 150px;
height: 150px;
gap: 8px
}
.flow-title {
font-size: 15px
}
.flow-circle p {
font-size: 12px;
}
#v-accident .row, #v-info .row {
margin-top: 20px;
margin-bottom: 40px;
}
#v-accident .flow-list {
margin-bottom: 43px;
}
#v-accident .bullets li, #v-accident .bullets li b, #v-accident .bullets li strong {
font-size: 15px;
}
#v-accident .grid02, #v-info .grid02 {
display: block;
}
#v-accident .note {
font-size: 13px;
line-height: 20px;
}
#v-accident .body h3 {
font-size: 21px;
}
.duties {
grid-template-columns:1fr
}
#v-personnel .cards {
grid-template-columns:1fr 1fr
}
#v-personnel .tabbtn {
padding: 10px 16px
}
#v-personnel .tabs {
max-width: 100%;
padding: 4px
}
.duties li {
font-size: 16px;
}
.mb-info-title .mb-title {
line-height: 130%;
display: flex;
flex-direction: column;
}
.mb-info-title {
font-size: 19px
}
#v-info .grid {
grid-template-columns:1fr;
}
#v-info .decade {
font-size: 23px;
}
#v-info .item {
display: flex;
}
#v-info .date {
font-size: 19px;
}
#v-info .desc {
font-size: 15px;
}
#edu .ministry {
font-size: 17px;
}
#result .stat-head {
align-items: flex-start;
}
#rank .top-cards {
grid-template-columns:1fr
}
.simple-title {
font-size: 20px;
}
.simple-desc {
font-size: 15.5px;
margin-top: 10px;
}
.simple-head {
margin-bottom: 0;
}
.simple-head img {
width: 85px;
}
.simple-card button {
height: 44px;
}
.login-note {
font-size: 16px;
padding: 25px;
}
}
@media (max-width: 600px) {
.main-top .login-box {
width: 100%;
}
#change-pwInfo .main-titleBox h2 {
font-size: 28px;
}
#change-pwInfo .sub-infoBox p {
font-size: 16px;
}
#change-pwInfo .sub-infoBox p span {
font-size: 15px;
}
#change-pwInfo ul li {
font-size: 14px;
}
#search_idpw-complete .btn-wrap .btn-primary, #change-pwInfo .btn-wrap .btn-primary {
font-size: 17px;
}
.center-search span, .center-search span b {
flex-direction: column;
padding-bottom: 22px;
}
#transfer .search-bar {
grid-template-columns: minmax(120px, 120px) 1fr;
}
#transfer .table-title {
flex-direction: column;
display: flex;
}
#transfer .table-title span {
align-items: center;
font-size: 13px;
flex-direction: row;
}
#transfer .table-title span strong {
font-size: 13px;
}
.center-search span, .center-search span b {
padding-bottom: 5px;
}
.center-search span {
padding: 0;
}
#transfer .sub-wrap {
margin-bottom: 0;
}
.btn-deepNavy {
font-size: 17px;
}
#transfer .center-search {
padding: 20px 20px;
}
#gallery .grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
#gallery .card__inner {
padding: 30px 33px;
}
#gallery .card__inner .content .title .title__text {
font-size: 19px;
}
#v-index .thumList_wrap {
grid-template-columns:1fr;
gap: 18px 16px;
}
#v-index .matrix-contact .num {
font-size: 20px;
}
#v-index .thumb {
flex-basis: 72px;
width: 72px;
height: 72px
}
#v-index .thumb-list {
gap: 12px;
padding: 14px
}
#v-index .flow-list {
grid-template-columns:1fr
}
#v-index .flow-title {
font-size: 16px;
}
#v-index .thumb-list p {
font-size: 15px;
line-height: normal;
}
#v-index .sub01 .title-box h2 span {
margin-top: 0;
}
#v-logo .item {
grid-template-columns:1fr;
display: grid;
}
#v-logo .tb-wrap {
display: none;
}
.agreePolicy dd {
padding: 0 !important;
}
.footer-info img{
display: none;
}
}
@media (max-width: 540px) {
#performance .stat-sources {
grid-template-columns: 1fr
}
#performance .stat-kpis {
gap: 0;
}
#performance .stat-panel {
padding: 24px 16px;
}
.common .badge-row {
flex-direction: column;
align-items: flex-start;
}
.apply-box p {
font-size: 15px;
}
/*.noticeTable.table.responsive tbody tr.fixed-notice th:first-child, .noticeTable.table.responsive tbody tr.fixed-notice td a, .noticeTable.table.responsive tbody td:nth-child(2) a{*/
/* width: 290px;*/
/*}*/
#result .table tbody td {
font-size: 15px;
}
.empty-wrap{
padding: 50px;
flex-direction: column;
}
#ipinPopupLayer .popup {
width: min(82vw, 500px);
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
position: relative;
}
}
@media (max-width: 520px) {
.banner__inner {
height: 208px;
}
.banner__art {
right: -10px;
}
.edu-schedule .list .panel-header .list-title-date {
font-size: 17px;
}
#listTitle {
font-size: 17px;
}
.edu-schedule .panel-header {
padding: 10px 12px
}
.edu-schedule .panel-body {
padding: 12px
}
.edu-schedule .form .row {
grid-template-columns:1fr
}
.edu-schedule .form label {
margin-bottom: 4px;
font-size: 14px;
}
.board-content .kv-list .k {
min-width: 96px
}
#board .board-content .kv-list > li {
counter-increment: num;
position: relative;
padding-left: 28px;
display: flex;
gap: 4px;
border-top: 1px dashed #DDD;
font-size: 16px;
flex-direction: column;
align-items: flex-start;
height: auto;
}
#board .board-content .kv-list .k {
font-size: 15px;
}
#board .board-content .kv-list > li::before {
font-size: 12px;
}
#board .board-content .sec-title {
font-size: 15px;
}
#board .actions .btn-primary,
#board .board-content .kv-list .v,
#board .board-content .dash-list > li,
#board .board-content .dash-list > li b,
#board .board-content .note-warn,
.sub3-infoBox p {
font-size: 14px;
}
#board .tbl-basic th, #board .tbl-basic td {
font-size: 16px;
}
#board .prev-nextCon {
margin-bottom: 50px;
}
#applyModal .row {
grid-template-columns:84px 1fr
}
#applyModal .head h2 {
font-size: 16px
}
#v-accident .wrap {
padding: 0 16px
}
#v-accident .node {
width: 92px;
height: 92px
}
#v-accident .ring {
width: 74px;
height: 74px
}
#v-accident .node em {
width: 66px;
height: 66px;
padding: 6px
}
#v-index .matrix-grid {
grid-template-columns:repeat(2, 1fr)
}
#certi .rrn-group {
gap: 10px
}
#certi .rrn-group .hyphen {
display: none
}
#certi .con-list li {
font-size: 15px;
}
@media (max-width: 480px) {
.steps::before{
top: 18%;
}
.col-reverseBox > img {
width: 100%;
margin-bottom: 20px;
}
.banner__inner {
height: 180px;
}
#v-personnel .w-1400 {
display: none;
}
#v-personnel .w-975 {
display: none;
}
#v-personnel .w-480 {
display: block;
}
.top-bar .top-box p {
font-size: 14px;
}
.main-bannerWrapper {
gap: 20px;
}
.card-grid {
grid-template-columns: 1fr;
}
.center .card {
padding: 8px;
height: auto;
}
.card .title {
font-size: 16px;
}
.user-name .name {
font-size: 20px;
}
.user-name {
font-size: 16px;
}
.center {
margin-top: 32px;
}
.center .card .card-txtBox {
padding: 12px 18px;
gap: 35px;
}
.center .card-rightBox .card-banner {
padding: 32px;
}
.center .card-rightBox .card-banner .hand-img {
width: 50%;
right: -20px;
top: 20px;
}
.center .card .title {
font-size: 19px;
}
.center .card-rightBox .card-banner .txt-box h3 {
font-size: 22px;
}
.center .card-rightBox .card-banner .txt-box p {
font-size: 14px;
}
.notice-tab {
font-size: 15px;
}
.mo-tab {
display: block;
}
.main-top .login-box {
padding: 30px 20px 34px 20px;
}
.main-top .login-box p {
font-size: 18px;
}
.custom-select select,
.select-group .text-label {
font-size: 16px;
}
.select-group {
gap: 15px;
}
.quick-menu a {
gap: 10px;
font-size: 13.5px;
line-height: 19px;
padding: 16px 0;
}
.quick-menu a img {
width: 30%;
}
.notice-tab-content {
padding: 20px;
}
.highlight-box {
padding-bottom: 20px;
gap: 20px;
}
.highlight-box .icon {
width: 40%;
height: 55px;
}
.highlight-box .icon img {
width: 24px;
}
.highlight-box .text strong {
font-size: 17px;
}
.mo-only {
font-size: 15px;
}
.mo-only img {
width: 13px;
}
.highlight-box .text p {
font-size: 13px;
line-height: 16px;
}
.notice-list li a b {
font-size: 15px;
line-height: 18px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stats-area li .title {
font-size: 14px;
}
.stats-area strong {
font-size: 19px;
}
.stats-area .highlight {
font-size: 22px;
}
.stats-area ul {
padding: 18px;
}
.stats-area .highlight-black {
font-size: 27px;
}
.select-group {
justify-content: flex-start;
}
.custom-select {
width: 100%;
}
.custom-select select {
padding: 0;
}
.banner__inner {
display: flex;
gap: 0;
}
.banner__inner .banner__eyebrow {
font-size: 13px;
line-height: 30px;
}
.banner__inner .banner__title {
font-size: 32px;
white-space: nowrap;
}
.banner__inner .banner__art {
max-width: 200px;
right: -20px;
top: 50px;
}
.sub01 .title-box {
margin-top: 38px;
}
.sub01 .title-box h1 {
font-size: 30px;
}
.sub01 .title-box h2, .sub01 .title-box h2 span {
font-size: 18px;
margin-top: 22px;
}
.sub01 .title-box p {
margin-top: 25px;
}
.sub01 .title-box p, .sub01 .title-box p strong {
font-size: 14px;
line-height: 26px;
}
.sub01 .title-box h2 .left-comma {
left: -22px;
width: 15px;
}
.sub01 .title-box h2 .right-comma {
right: -22px;
width: 15px;
}
.sub01 .title-box b, .sub01 .title-box span {
margin-top: 14px;
}
.sub01 .col-reverseBox > img {
width: 80%;
}
.sub01 .center .col-reverseBox {
margin-top: 24px;
}
.sub01 .center .left-box, .sub01 .center .right-box {
width: 100%;
}
.sub01 .center .card-box {
width: auto;
height: auto;
padding: 14px 20px;
}
.sub01 .center .card-box h3 {
font-size: 18px;
}
.sub01 .center .card-box p {
font-size: 14px;
}
.sub01 .center .left-box .lt-flexBox:first-child .card-box::after,
.sub01 .center .left-box .lt-flexBox:nth-child(2) .card-box::after,
.sub01 .center .right-box .rt-flexBox:first-child .card-box::after,
.sub01 .center .right-box .rt-flexBox:nth-child(2) .card-box::after {
display: none;
}
.sub01 .bt-effect .effect-card {
flex-direction: column;
}
.sub01 .bt-effect .effect-card .card {
width: 100%;
}
.sub01 .bt-effect .effect-card .card-title {
padding: 20px;
height: 99px;
}
.sub01 .bt-effect .effect-card .card-title h3 {
font-size: 18px;
line-height: 24px;
}
.sub01 .bt-effect .effect-card p {
font-size: 15px;
justify-content: flex-start;
line-height: 28px;
padding: 20px;
}
.sub01 .bt-rule .v-rules p {
font-size: 16px;
}
.sub01 .bt-rule .v-rules .num {
left: 24px;
font-size: 17px;
}
/* =========================
로그인페이지
========================= */
#login {
margin-bottom: 50px;
}
#login .title {
gap: 14px;
}
#login .title h1 {
font-size: 27px;
}
#login .tab {
padding: 0;
font-size: 19px;
}
.login-note {
padding: 30px 0;
font-size: 16px;
}
.login-content {
padding: 20px 0;
border: 0;
}
.captcha-line {
gap: 8px;
flex-direction: column;
}
.captcha-canvas {
width: 100%;
}
.simple-login-content {
height: 100%;
}
.simple-card {
padding: 30px 20px 35px 20px;
gap: 28px;
}
.simple-card button {
font-size: 18px;
}
.submit {
font-size: 17px;
}
#join .title-box .popup-info, #join_complete .title-box .popup-info {
left: 130px;
}
.page-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.page-header .title {
font-size: 30px;
}
#join .page-header .title {
width: 100%;
}
#join h2, .signUp_certification .inquiry .inquiry-title {
font-size: 28px;
}
.signUp_certification .inquiry
.join-container .desc {
font-size: 14px;
}
.terms {
padding: 20px 14px;
}
.term__toggle {
white-space: nowrap;
flex-wrap: nowrap;
min-width: 0;
font-size: 13px;
}
.term__title {
font-size: 16px;
}
.tag {
font-size: 17px;
}
.steps[data-step="1"]::after {
width: 28.5%;
} {
}
.auth-info .title-box h3 {
font-size: 18px;
}
.auth-info .title-box img {
width: 35px;
}
.auth-card {
gap: 4px;
height: 140px;
}
.auth-card p {
padding-left: 0;
font-size: 15px;
}
.prev-nextCon .btn {
font-size: 16px;
height: 47px;
}
#search-id .id-form,
#search-pw .id-form {
padding: 0;
}
#search-id .id-form .row,
#search-pw .id-form .row {
flex-direction: column;
}
#search-id #regno-box .input-box label {
max-width: none;
font-size: 14px;
}
#search-id .option.active .id-form,
#search-pw .option.active .id-form {
max-height: max-content;
}
#search-id, #search-pw {
gap: 30px;
}
#search-id .option, #search-pw .option {
padding: 24px;
gap: 8px;
}
#search-id .option .option-header {
gap: 8px;
}
#search-id .title,
#search-pw .title {
font-size: 22px;
}
#search-id .sub-desc,
#search-pw .sub-desc {
font-size: 14px;
line-height: 140%;
}
#search-id .id-form p.info,
#search-pw .id-form p.info {
font-size: 14.5px;
}
#search-id .regno-inputs .input-wrap {
width: 100%;
display: flex;
flex-direction: row;
}
#search-id .id-form .bg-con .input-box,
#search-pw .id-form .bg-con .input-box {
padding: 31px 20px;
}
#search-id .submit-btn,
#search-pw .submit-btn {
font-size: 15px;
height: 43px;
}
#search-id .next-btn,
#search-pw .next-btn {
max-width: 200px;
width: 100%;
min-width: 0;
border-radius: 50px;
padding: 0;
height: 43px;
}
#search-id .option .save-option label,
#search-pw .option .save-option label {
font-size: 15px;
}
#search-id .main-title,
#search-pw .main-title {
gap: 15px;
}
#search-id .main-title h1,
#search-pw .main-title h1 {
font-size: 29px;
line-height: 34px;
}
#search_idpw-complete h1, #search_idpw-complete span,
#join_complete h1, #join_complete h1 span {
font-size: 23px;
}
#search_idpw-complete .bg-container .txt-box .txt-title span {
display: block;
}
#search_idpw-complete .bg-container {
padding: 35px 40px;
}
#search_idpw-complete .bg-container .txt-info {
font-size: 15px;
text-align: center;
}
#search_idpw-complete .bg-container .txt-title {
font-size: 20px;
text-align: center;
}
#search_idpw-complete .bg-container .txt-box .txt-title span {
font-size: 16px;
}
#search_idpw-complete ul li {
font-size: 15px;
}
.btn-wrap .btn-border,
.btn-wrap .btn-primary {
font-size: 17px;
}
.btn-wrap {
margin-top: 40px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
}
#search_idpw-complete ul {
margin-bottom: 100px;
}
#search-pw .input-con {
padding: 40px 20px;
border-radius: 8px;
}
#search-pw .txt-box {
gap: 10px;
}
#search-pw .search-pw-con p {
font-size: 16px;
}
#search-pw .search-pw-con .btn-ghost {
width: 100%;
}
#change-pwInfo .main-titleBox h2 {
font-size: 20px;
}
#change-pwInfo .form-row {
flex-direction: column;
}
#change-pwInfo .form-row label {
flex: 0;
}
#change-pwInfo .form-row {
align-items: flex-start;
gap: 5px;
}
#change-pwInfo .btn-wrap .btn-border,
#change-pwInfo .btn-wrap .btn-primary {
height: 48px;
}
#change-pwInfo .form-row input[type="password"] {
width: 100%;
}
#logoutDialog .close {
top: 8px;
right: 8px
}
#logoutDialog .eyebrow {
font-size: 1rem;
margin-bottom: 8px
}
#logoutDialog .title {
font-size: 1.5rem;
margin-bottom: 12px;
display: flex;
flex-direction: column;
}
#logoutDialog .desc {
font-size: 1rem;
margin-bottom: 18px
}
#logoutDialog .btn {
height: 44px;
font-size: 1rem;
border-radius: 6px
}
.filter-grid {
grid-template-columns: 1fr;
gap: 8px 12px;
}
.filter-label {
padding-top: 6px;
}
#performance .date-range {
gap: 8px;
}
#performance .meta {
flex-direction: column;
gap: 6px;
align-items: flex-start
}
#performance .search-bar {
padding: 0 2px
}
#performance .search-bar input {
flex: 1;
min-width: 120px
}
#performance .pagination {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#performance .info h3 {
font-size: 15px;
}
#performance .date input[type="date"] {
padding: 10px;
}
#performance .stat-chip, #performance .stat-center {
font-size: 16px;
line-height: 1.4;
}
.stat-card .img-boxWrap {
gap: 0;
}
#performance .search-bar button {
width: 38px;
height: 38px;
}
input[type="date"]:required:invalid {
font-size: 13px;
padding: 0 10px;
}
#performance .stat-head {
display: flex;
flex-direction: column;
gap: 0;
}
.common .left {
flex-direction: column;
display: flex;
}
#performance #search-keyword {
height: 38px;
}
.sub-wrap .main-title {
font-size: 30px;
margin-bottom: 30px;
}
.info-table tbody td {
padding: 18px 0;
}
#blood .dot-list li {
font-size: 15px;
}
#blood .notice, #blood .notice b, #blood .notice .corp, #blood .notice .option {
font-size: 16px;
}
.lead .t1 {
font-size: 22px;
}
#blood .actions .btn {
font-size: 20px;
width: 100%;
}
#blood .agree span {
font-size: 18px;
}
#blood .form-grid {
grid-template-columns:1fr;
row-gap: 10px;
}
#blood .form-grid .label,
#blood .form-grid .field {
grid-column: 1 / -1;
}
.info-table tbody td::before {
font-size: 15px;
}
.select-wrap select {
font-size: 13px;
}
.select-wrap .chev {
right: 5px;
}
.crumbs__home {
width: auto;
}
#result #submitBtn {
width: 100%;
font-size: 17px;
}
#result .t1 {
font-size: 24px;
}
#result .box-title p, #result .box-title .stat-blue {
font-size: 18px;
}
#result .sec-btnWrap {
flex-direction: column;
align-items: flex-start;
}
#transfer .sec-txtBox {
flex-direction: column;
gap: 0;
}
.common .info h3 {
/*width: 300px;*/
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.common .card .title {
font-size: 18px;
}
.common .search-bar {
width: 100%;
}
.common .search-bar input {
width: inherit;
height: 38px;
}
/*.common .card {*/
/* height: 250px;*/
/*}*/
.common .grid {
grid-template-columns:1fr
}
.common .card__inner {
grid-template-columns:110px 1fr;
min-height: 126px;
column-gap: 25px;
}
.common .poster {
width: 110px;
height: 126px
}
.common .media {
height: auto;
}
.common .media img {
width: 65%;
height: auto;
}
.common .card__inner {
grid-template-columns: 100px 1fr;
column-gap: 5px;
padding: 20px 23px;
}
.common .end-btn-wrap {
width: 100%;
display: flex;
justify-content: flex-end;
}
.common .end-btn-wrap .tail svg {
width: 28%;
}
.common .tail {
position: unset;
width: auto;
height: auto;
background-color: transparent;
}
.common .content .org {
font-size: 13px;
line-height: 13px;
}
.common .tail span, .common .tail span b {
font-size: 11px;
}
.common .month-row .label, .common .month-row .value {
font-size: 13px;
}
.common .card__inner .badge-b {
position: absolute;
right: 0;
}
.common .card__inner .content .title .title__text {
font-size: 17px;
}
.common .month-row {
font-size: 13px;
margin-top: 13px;
}
.common .grid {
gap: 13px 33px;
}
#gallery .card__inner {
padding: 24px 23px;
}
#gallery .card__inner .content .title .title__text {
font-size: 17px;
}
#gallery .card__inner .content .txt-box {
padding-bottom: 10px;
}
#card02 .vmsC2-meta {
max-height: none;
overflow: visible;
}
#card02 .vmsC2-title {
font-size: 19px;
}
#card02 .vmsC2-addr {
line-height: normal;
font-size: 15px;
}
#card02 .vmsC2-metaLabel, #card02 .vmsC2-metaValue {
font-size: 13px;
}
#homePopupLayer .popup .swiper-slide a {
padding: 14px;
font-size: 15px;
height: 45px;
}
#ipinPopupLayer .popup .swiper-slide a {
padding: 14px;
font-size: 15px;
height: 45px;
}
.popup__today label {
font-size: 13px
}
.apply-box p {
text-align: start;
line-height: 20px;
}
#stats .notes li {
font-size: 14px;
}
#stats .year-filter-wrap {
padding: 12px;
}
#stats .year-filter button span {
font-size: 15px;
}
#stats .chart-stage {
padding: 24px 0;
}
#stats .chart-stage {
padding: 24px 20px;
}
.edu-schedule .list li {
/*grid-template-columns: 1fr;*/
align-items: center;
grid-template-columns: 54px 1fr;
}
.edu-schedule .list li .badge {
justify-self: start;
margin-bottom: 6px;
}
.edu-schedule .item-title, #listTitle, .edu-schedule .list .panel-header .list-title-date, .edu-schedule .item-meta {
font-size: 16px;
}
.edu-schedule .list .panel-header .list-title-date {
line-height: 30px;
}
.edu-schedule .panel-header, .edu-schedule .panel-headerEducation {
padding: 12px 20px;
font-size: 18px;
}
.edu-schedule .panel-body01 {
padding: 12px 20px;
}
.edu-schedule .list .item-title {
font-size: 14px;
}
#alertInfo_education .tab {
font-size: 15px;
}
.alert-board .pn-title {
-webkit-line-clamp: 2;
font-size: 15px;
}
.alert-board .badge {
height: 32px;
}
#participate .flow-circle, #v-accident .flow-circle, .flow-circle {
gap: 12px;
}
#participate .flow-arrow, #v-accident .flow-arrow {
right: -16px;
width: 10px;
}
#inquiry .lead {
font-size: 15px;
line-height: 25px
}
#inquiry .n-strong,
#inquiry .n-head,
#inquiry .n-strong .time {
font-size: 16px;
line-height: 27px
}
#inquiry .n-body li,
#inquiry .n-body .warn,
#inquiry .foot-text strong {
font-size: 13px;
line-height: normal
}
#inquiry .n-body li,
#inquiry .n-body .warn {
font-weight: 400;
line-height: normal;
}
#inquiry .topbar img {
width: 20px;
}
#inquiry .card-main {
padding: 18px 18px 20px;
}
#inquiry .title {
font-size: 17px;
}
#inquiry .body li {
font-size: 14px;
padding-left: 5px;
}
#inquiry .notice {
padding: 20px;
}
#inquiry .foot-label {
font-size: 15px;
padding-right: 5px;
}
#inquiry .foot-text, #inquiry .foot-btn {
font-size: 13px;
}
#inquiry .foot-btn {
font-weight: 600;
}
#inquiry .foot-left {
gap: 0;
}
#inquiry .foot-text {
line-height: 1.4;
}
#inquiry .body p {
font-size: 13px;
}
#inquiry .card-main {
gap: 10px;
}
#inquiry .body li, #inquiry .body p {
line-height: 24px;
}
#inquiry .faq-btn {
width: 190px;
font-size: 13px;
}
#v-system .cols li.list-blue, #v-system .cols li.list-pink, #v-benefit li.list-blue, #v-benefit li.list-pink {
font-size: 15px;
}
#v-system .card-head {
gap: 0;
}
#v-system .pill {
height: auto;
padding: 24px 12px;
}
#v-system .pill h3 {
font-size: 19px;
}
#v-system .pill p {
font-size: 14px;
}
#v-accident .t2 {
align-items: center;
}
.download_btn-primary {
width: auto;
}
#v-accident .grid02, #v-info .grid02 {
padding-bottom: 0;
}
.flow-circle p {
line-height: normal;
}
.mb-info-title .mb-title span, .mb-info-title {
font-size: 17px;
}
.mb-info-card {
padding: 20px;
}
#v-benefit .title {
font-size: 18px;
}
#v-benefit .card {
padding: 20px;
}
#v-benefit .card .list-info, #v-benefit .card strong {
font-size: 14px;
}
#v-benefit .mini {
font-size: 15px;
}
.t3 {
font-size: 16px;
}
#v-benefit .card .a-link img {
width: 20px;
}
#v-personnel .cards {
grid-template-columns:1fr;
margin-bottom: 45px
}
#v-personnel .card .eyebrow {
font-size: 14px
}
#v-personnel .w-1400 {
display: none;
}
#v-personnel .w-975 {
display: none;
}
#v-personnel .w-480 {
display: block;
}
#v-personnel .tabbtn {
font-size: 15px;
}
.mb-info-card {
margin-bottom: 25px;
}
#v-accident .flow-circle, .flow-circle {
gap: 12px;
}
#v-index .flow-circle {
width: 100%;
}
#v-index .thumb {
flex-basis: 64px;
width: 64px;
height: 64px
}
#v-index .thumb-list {
gap: 10px
}
#v-index .duties {
grid-template-columns: repeat(1, 1fr)
}
#v-info .way .box-info {
font-size: 15px;
}
#v-info .item {
padding: 14px 4px;
}
.duties li {
height: auto;
font-size: 15px;
}
#v-info .title-box span {
margin-top: 0;
}
/*#v-info .title-box h2 {*/
/* display: flex;*/
/* flex-direction: column;*/
/* line-height: normal;*/
/*}*/
#v-perfor .infoBox {
padding: 20px;
}
#v-perfor .title {
font-size: 27px
}
#v-perfor .kicker {
font-size: 13px;
margin-bottom: 12px
}
#v-perfor .t1-info, #v-perfor .t1-info .crumb {
font-size: 15px;
}
#v-perfor .num {
min-width: 23px;
height: 23px;
}
#v-perfor .info-item {
gap: 8px;
}
#v-perfor .info-item h6 {
font-size: 15px;
min-width: 35px;
}
#v-perfor .info-item p, #v-perfor .itemlink {
font-size: 14px;
}
#v-perfor .btn {
font-size: 16px;
margin: 20px 0;
}
#certi .infoBox {
padding: 20px;
}
#certi .title {
font-size: 27px
}
#certi .kicker {
font-size: 13px;
}
#certi .t1-info {
font-size: 15px;
}
#certi .num {
min-width: 23px;
height: 23px;
}
#certi .info-item {
gap: 8px;
}
#certi .info-item h6 {
font-size: 15px;
min-width: 35px;
}
#certi .info-item p {
font-size: 14px;
}
#certi .btn {
width: 100%;
font-size: 16px;
}
#edu .target-card {
grid-template-columns:100px 1fr;
gap: 20px;
}
#edu .target-media {
padding: 20px;
}
.target-content ul li{
margin: 0;
font-size: 15px !important;
}
#edu .target-content ul li {
margin: 0;
}
.target-content ul li::before{
width: 13px !important;
height: 13px !important;
background-size: 13px 13px !important;
top: 6px;
}
.target-content h3{
font-size: 19px;
}
#edu .target-content {
padding: 20px 0;
}
#edu .target-media img {
width: 80%;
}
#edu .target-content h3 {
font-size: 20px;
}
#edu .target-content ul li {
font-size: 16px;
}
#v-logo .wrapper {
margin: 28px auto 72px;
padding: 0 16px
}
#v-logo .block-head {
margin: 58px 0 18px;
flex-direction: column;
align-items: flex-start
}
#v-logo .page-desc {
font-size: 17px;
margin-bottom: 10px
}
#v-logo .item .info .desc {
font-size: 16px;
line-height: 24px;
}
#v-logo .swatch {
padding: 12px 19px
}
#v-logo .swatch p {
font-size: 14px
}
#v-logo .swatch span {
font-size: 12px
}
#v-logo .item {
padding-bottom: 51px
}
#v-logo .meta {
padding: 0;
}
#v-logo .swatch {
flex: 0 0 160px;
min-width: 160px;
}
#v-logo .meta .k {
font-size: 14px;
}
#v-perfor .info-item h6 {
display: none;
}
#performance #search-type {
max-width: 130px;
}
#performance .search-btn, #performance .btn-search {
padding: 10px 24px 10px 20px;
}
.kpi img {
width: 32px;
}
.peristalsis {
width: 70px;
}
#result .help-box button {
width: 100%;
height: 45px;
}
.stat-panel {
padding: 28px 16px;
}
.stat-card-wrap p, .stat-card-wrap span {
font-size: 16px;
}
#result .stat-head {
align-items: flex-start;
}
.btn-deepNavy, .btn-wrap .btn-border {
height: auto;
padding: 16px 24px;
line-height: normal;
}
#transfer table.responsive tbody tr {
padding: 18px 10px 14px 10px;
}
#rank .card {
padding: 37px 32px 38px
}
#rank .rank-row, #rank .trow {
padding: 24px
}
#rank .rank-name, #rank .name {
font-size: 16px
}
#rank .rank-meta span, #rank .tab-panels span, #rank .tab-panels span b, #rank .rank-meta span b {
font-size: 15px
}
#rank .trow, #rank .rank-row {
grid-template-columns:30px 1fr
}
#rank .dim {
font-size: 16px
}
#rank .rank-row, #rank .trow {
padding: 20px 30px
}
#rank .top-cards {
gap: 19px
}
#rank .card .ribbon {
top: -20px;
right: 0
}
#rank .card .ribbon img {
width: 70px
}
#rank .subhead h2, #rank .subhead .blue {
font-size: 22px
}
#rank .card .cta {
padding: 8px 14px
}
#rank .rank-no, #rank .no {
font-size: 17px
}
#rank .rank-meta .btn-outline, #rank .right .btn-outline {
height: 36px
}
#rank .toolbar > .select {
flex: 1 1 100%
}
#rank .select {
height: 38px
}
#rank .filter-actions .btn-search {
height: 42px
}
#rank .right-wrap {
display: flex;
flex-direction: column;
gap: 20px;
}
#rank .btn-outline {
width: 120px;
padding: 18px 24px;
}
#rank .rank-meta {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.blue-info-box p, .red-info-box p {
display: flex;
align-items: flex-start;
}
.pagination {
gap: 0;
}
#volunteer_apply .field .control {
gap: 10px;
}
#join .info-table tbody td {
text-align: start;
}
.term__title, .term__toggle {
margin-bottom: 0;
}
.term__panel {
margin-top: 10px;
}
#join .info-table tbody td strong {
font-size: 17px;
}
.signUp_certification .inquiry .inquiryBox p, .signUp_certification .inquiry .inquiryBox strong {
font-size: 15px;
}
#search-pw .search-pw-con .desc {
margin-top: 30px;
}
#join .title-box, #join_complete .title-box{
gap: 10px;
}
#login .btn-box {
width: 100%;
}
.simple-desc {
font-size: 14px;
}
.simple-card button img {
width: 20px;
}
.eval-kv th, .tbl-basic th {
font-size: 16px;
}
#join_complete .bg-container .txt-info{
font-size: 16px;
text-align: center;
}
#join_complete .bg-container{
padding: 40px;
}
#join_complete .btn-wrap {
padding-bottom: 40px !important;
}
#search_idpw-complete .bg-container .txt-title{
display: flex;
flex-direction: column;
}
.comment__meta{
justify-content: space-between;
}
.selects{
gap: 12px;
}
.dropdown{
min-width: fit-content;
max-width: none;
border-right: none;
width: auto;
}
.toolbar{
padding: 0 10px;
}
/*.toolbar .selects.has-3depth #cat-1-custom-list, .toolbar .selects.has-3depth #cat-2-custom-list , .toolbar .selects.has-3depth #cat-3-custom-list { width: 100px; }*/
.dropdown .dropdown__button{
padding: 0;
}
.dropdown__current, .dropdown__option{
font-size: 13px;
}
.crumbs__home img {
width: 18px;
}
.crumbs{
padding-right:10px;
border: 0;
}
#blood .notice span{
font-size: 16px;
}
#homePopupLayer .main-popup-wrap{
padding: 0;
}
#ipinPopupLayer .main-popup-wrap,
#homePopupLayer .main-popup-wrap
{
height: 500px;
overflow: scroll;
}
#ipinPopupLayer .popup,
#homePopupLayer .popup{
width: 100% !important;
}
.main-popup-wrap .layer_cont2{
padding: 30px 10px;
}
.date-range span{
font-size: 14px;
}
.vmsC2-title{
font-size: 17px;
}
#login .title-box img{
width: 28px;
}
#login .login-content{
padding: 0;
}
header .mo-logo img{
width: 150px;
}
#card02 .vmsC2-card{
padding: 30px 20px;
}
.btn-wrap .btn-primary, .btn-wrap .btn-deepNavy {
width: 100%;
}
#value .bg-wrap .pin{
font-size: 14px;
}
.sub01 .center .card-box p br{
display: none;
}
.sub01 .center .card-box p{
font-size: 14px;
}
.notice-list{
display: flex;
flex-direction: column;
gap: 0;
}
.mo-only{
margin-top: 10px;
}
.tit-detail br{
display: none;
}
.tit-detail, .tit-detail strong{
font-size: 14px !important;
}
.info-desc, .info-desc strong{
font-size: 15px;
}
#v-accident .body h3 {
font-size: 19px;
}
footer {
padding: 35px 20px;
}
.footer-links {
gap: 12px;
}
.footer-info p {
font-size: 14px;
}
.footer-mark {
text-align: left;
gap:10px;
}
.footer-links li a, .footer-links li .highlight-pink {
font-size: 14px;
}
}
@media (max-width: 385px) {
.toolbar__inner{
padding-left: 3px;
}
#v-logo .swatch{
flex: 0 0 100px;
min-width: 100px;
}
#v-logo .color-chip {
flex-direction: column;
}
#v-logo .btn-download, #v-logo .btn-download span{
font-size: 14px;
}
.toolbar{
padding: 0;
}
.dropdown .dropdown__button{
width: 96px;
}
.sub-wrap .main-title{
font-size: 26px;
}
.target-card{
grid-template-columns: 80px 1fr !important;
}
.target-media img{
width: 40px !important;
}
#v-accident .flow-list, #participate .flow-list, .flow-list{
grid-template-columns: repeat(1, 1fr);
}
#participate .flow-arrow, #v-accident .flow-arrow{
display: none;
}
#certi .info-item h6 {
display: none;
}
#v-logo .thumb img {
width: 100%;
}
.crumbs{
display: none;
}
.boardView .tit{
font-size: 20px;
}
#search_idpw-complete .bg-container .txt-title,
#join_complete .bg-container .txt-title{
font-size: 19px;
}
.date-range span{
font-size: 13px;
}
.main-top .login-box .goto-loginBox a{
font-size: 12px;
}
.main-top .login-box p{
font-size: 16px;
text-align: center;
}
.t1{
font-size: 20px;
}
.stat-card-wrap .logo-box{
width: auto;
}
header .mo-logo img{
width: 130px;
}
#alertInfo_education .tab{
font-size: 14px;
}
}
@media (max-width: 1330px) and (min-width: 1000px) {
.center .card-rightBox {
margin-top: 32px;
flex-direction: row;
flex: auto;
width: 100%;
gap: 20px;
}
.center .card-rightBox .card-banner,
.center .card-rightBox .rank-box {
width: 50%;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.banner-box .txt-box {
flex: none;
}
.main-bannerWrapper .txt-box p {
text-align: start;
}
.main-bannerWrapper .txt-box .pc-mainTitle {
text-align: start;
}
.select-group {
gap: 20px;
justify-content: flex-start;
}
}
@media (max-width: 856px) and (min-width: 769px) {
.custom-select select {
font-size: 14px;
}
.select-group .text-label {
font-size: 14px;
}
.select-group {
gap: 15px;
}
}
@media (max-width: 768px) and (min-width: 580px) {
.main-top .login-box .btn-box {
display: none;
}
.main-top .login-box .mo-btn-box {
flex-direction: column;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 28px;
}
.main-top .login-box .goto-loginBox {
justify-content: center;
}
.main-bannerWrapper .txt-box .pc-mainTitle {
display: none;
}
.mo-mainTitle {
font-weight: 800;
letter-spacing: -1.17px;
display: block;
font-size: 32px;
line-height: 42px;
text-align: center;
}
}
}
.h3Style {
font-size: 1.6em;
font-weight: 800;
}
.dayStand {
font-weight: bold;
color: #363d43 !important;
}
/*common css 끝*/
#homePopupLayer .main-popup-wrap::-webkit-scrollbar , #ipinPopupLayer .main-popup-wrap::-webkit-scrollbar {
width: 4px;
background: transparent;
}
#homePopupLayer .main-popup-wrap::-webkit-scrollbar-track, #ipinPopupLayer .main-popup-wrap::-webkit-scrollbar-track {
background: transparent;
}
#homePopupLayer .main-popup-wrap::-webkit-scrollbar-thumb, #ipinPopupLayer .main-popup-wrap::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 999px;
}