@charset "UTF-8";
/* =================================================
title       :NSRE New Style PC
Create date :2026-06
- NSRE 메인 전용
- NSRE 카드
- NSRE 공개영상
- NSRE 등록현황
memo : NSRE 신규 UI 스타일 적용
================================================= */

/* =========================================
  NSRE main
========================================= */
.nsre-main,
.nsre-video,
.nsre-footer-inner {
  max-width:1400px;
  margin:0 auto;
}

.nsre-main {
  padding:40px 0 64px;
}

/* 상단 */
.nsre-visual {
  margin-bottom:44px;
}

.nsre-visual-inner {
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f6f7ec;
  border-radius:20px;
}
.nsre-visual-inner .ui-icon {
  margin-right:22px;
}

.nsre-visual-inner strong {
  font-size:30px;
}

.nsre-visual-inner span {
  font-weight:700;
  padding:0 14px;
  font-size:30px;
}

.nsre-visual-inner em {
  font-style:normal;
  font-size:29px;
}

/* 공통 섹션 */
.nsre-section {
  max-width:1400px;
  margin:0 auto 73px;
}

.nsre-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}

.nsre-section-head .nsre-section-title {
  margin:0;
  font-size:var(--text-xl);
}

.nsre-section-head .nsre-section-title::before {
  display:inline-block;
  vertical-align:middle;
  content:'';
  width:5px;
  height:32px;
  margin-right:20px;
  border-radius:50px; 
  background:#BED73B;
}

.nsre-section-head .ui-btn {
  font-size:18px;
}

/* 교수법 영역 */
.nsre-edu-list {
  width:100%;
  display:grid;
  gap:40px;
}

.nsre-edu {
  position:relative;
  padding:40px 0 0;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
}
.nsre-edu h3,
.nsre-edu p {
  padding-left:110px;
  padding-right:110px; 
}

.nsre-edu h3 {
  display:flex;
  align-items:center;
  gap:15px;
  margin:0 0 12px;
}

.nsre-edu p {
  margin:0 0 50px;
}

.nsre-card-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.nsre-card {
  width:100%;
  height:390px;
  border:1px solid #e2e5e9;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-sizing:border-box;
}

.nsre-card-head {
  min-height:70px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#EBEEF3;
  font-size:24px;
  font-weight:700;
  text-align:center;
  box-sizing:border-box;
}

.nsre-card .nsre-card-bar {
  width:1px;
  height:18px;
  background-color:#33363D;
}

.nsre-card-cont {
  height:calc(390px - 74px);
  padding:30px 40px 24px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.nsre-info .nsre-info-item {
  display:flex;
  gap:20px;
  margin-bottom:20px;
}

.nsre-info .nsre-info-item + .nsre-info .nsre-info-item {
  margin-top:12px;
}

.nsre-info dt {
  flex:0 0 72px;
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--color-text-secondary);
}

.nsre-info dd {
  flex:1;
  margin:0;
  line-height:1.2;
}

.nsre-card .nsre-card-foot .ui-btn {
  width:280px;
  background-color:#333B42;
  color:#fff;
}

/* Grid + Swiper 대응 */
.nsre-edu-list,
.nsre-edu,
.nsre-swiper-wrap,
.nsre-swiper-wrap .swiper {
  min-width:0;
}

.nsre-swiper-wrap,
.nsre-swiper-wrap .swiper,
.nsre-swiper-wrap .swiper-wrapper,
.nsre-swiper-wrap .swiper-slide {
  height:auto;
}


/* 교수법 swiper */
.nsre-edu-list .nsre-swiper-wrap {
  padding:0 110px 80px;
}

.nsre-swiper-wrap {
  position:relative;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  box-sizing:border-box;
}

.nsre-swiper-wrap * {
  box-sizing:border-box;
}

.nsre-swiper-wrap .swiper-pagination {
  bottom:26px;
}

.nsre-swiper-wrap .ui-swiper {
  min-width:0;
}

.nsre-swiper-wrap .swiper-wrapper {
  display:flex;
  align-items:stretch;
}

.nsre-swiper-wrap .swiper-slide {
  min-width:0;
  height:auto;
  display:flex;
  flex-shrink:0;
}

.nsre-swiper-wrap .ui-swiper .swiper-button-prev {
  left:40px;
}

.nsre-swiper-wrap .ui-swiper .swiper-button-next {
  right:40px;
}


/* 등록현황 */
.nsre-status-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.nsre-status {
  min-height:120px;
  padding:24px 16px;
  border-radius:10px;
  background:#eef5c8;
  text-align:center;
  font-size:24px;
}
.nsre-status strong {
  margin-right:10px;
  font-size:50px;
  text-decoration:underline;
  text-decoration-thickness:2px; /* 굵기 설정 */
  text-underline-offset :-7px; /* 밑줄 위치 */
}

.nsre-status .nsre-status-tag {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.nsre-status .nsre-status-tag .tag-item {
  padding:5px 12px;
  font-size:18px;
  text-align:center;
  color:#717786;
  background:#F8FFD3;
  border-radius:50px;
}


/* 공개영상 */
.nsre-video-wrap {
  padding:56px 0 64px;
  background:#f5f5f5;
}

.nsre-video-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.nsre-video-card {
  height:auto;
  display:grid;
  grid-template-rows:auto 1fr;
  border:1px solid #ddd;
  background:#fff;
  position:relative;
}

.nsre-video-card .ui-card-flag {
  position:absolute;
  top:0;
  left:0;
}

.nsre-video-card .nsre-video-item {
  /* height:200px;
  overflow:hidden; */
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  position:relative;
}
.nsre-video-card .nsre-video-item .ui-icon {
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  width:58px !important;
  height:58px !important;
  top:50%;
  transform:translateY(-29px);
}

.nsre-video-card .nsre-video-item button,
.nsre-video-card .nsre-video-item img {
  width:100%;
  height:100%;
  display:block;
}

.nsre-video-card .nsre-video-item img {
  object-fit:cover;
}

.nsre-video-card .nsre-video-text {
  height:auto;
  min-height:97px;
  text-align:left;
  font-size:20px;
  padding:17px 20px  0 30px;
}


/* 플래그 뱃지 */
.ui-card-flag {
  font-size:0;
  z-index:2;
}

.ui-badge {
  height:22px;
  padding:1px 10px 2px;
  border:1px solid #0B78CB;
  box-sizing:border-box;
  font-size:14px;
  font-weight:700;
  text-align:center;
  color:#fff;
}

.badge-blue {
  display:inline-block;
  background:#0B78CB;
  font-size:14px;
  border:1px solid #0B78CB;
}

/* nsre-footer */
.nsre-footer {
  padding:48px 0 64px;
  background:#f5f5f5;
}

.nsre-footer-inner {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  padding-top:36px;
  border-top:1px solid #ddd;
}

.nsre-footer-info {
  flex:1;
}
.nsre-footer-info strong,
.nsre-footer-info p {
  font-size:var(--text-xl);
  font-weight:700;
  margin-bottom:18px;
}
.nsre-footer-info span {
  font-size:20px;
}

.nsre-footer-quick {
  display:grid;
  grid-template-columns:repeat(4, 130px);
  gap:20px; 
}

.nsre-footer-quick a {
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid #D9E1E9;
  background:#fff;
  border-radius:10px;
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  gap:16px 0;
}


/* =========================================
  NSRE contents
========================================= */
/* list */
.ui-org-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px 32px;
  margin:0;
  padding:0;
  list-style:none;
}

.ui-org-card {
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:350px;
  padding:34px 54px;
  border:1px solid #C9C9C9;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}

.ui-org-card-head {
  display:flex;
  justify-content:space-between;
  gap:24px;
  letter-spacing:-0.5px;
}

.ui-org-card-head h3 {
  margin:0;
  font-size:22px;
}

.ui-org-card-head span {
  display:block;
  margin:8px 0 20px;
  font-size:var(--text-sm);
  line-height:1;
  color:#797F8C;
}

.ui-org-card-head p {
  font-size:var(--text-sm)
}

.ui-org-card-head img {
  width:130px;
  height:130px;
  object-fit:contain;
  flex-shrink:0;
}

.ui-org-card-body {
  margin-top:32px;
  margin-bottom:32px;
  font-size:20px;
}
.ui-org-card-body p {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:5;  /* 5줄 넘어가면 말줄임 */
  -webkit-box-orient:vertical;
}

.ui-org-card-link {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  margin-top:auto;
}

.ui-org-card-link .ui-btn {
  flex:1 1 0;
  height:36px;
  max-width:132px;
  min-height:34px;
  justify-content:center;
  background:#EBF0F5;
  font-size:var(--text-xs);
  text-decoration:none;
  border-radius:5px;
}

.ui-org-card-link .ui-btn:hover {
  background:var(--color-primary);
  color:#fff;
}

/* mou체결 */
.ui-mou-info h3 {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  color:var(--color-text-primary);
}
.ui-mou-info h3 span {
  font-size:18px;
  font-weight:500;
  color:#797F8C;
}

.ui-mou-info-cont {
  margin-top:10px;
}
.ui-mou-info-cont .ui-table {
  margin-bottom:60px;
  border-top:2px solid #D7DEE7;
}

.ui-mou-info-cont .ui-table th {
  border-right:1px solid #D7DEE7;
  padding-left:40px;
}

.ui-mou-info-cont .ui-table td {
  padding-left:40px;
}

.ui-mou-info:last-child .ui-mou-info-cont .ui-table {
  margin-bottom:0;
}


/* 참여기관 썸네일형 */
.ui-project-card {
  width:100%;
  height:auto;
  min-height:0;
  overflow:visible;
  border-radius:8px;
  background:#fff;
}

.ui-project-card .nsre-swiper-wrap .swiper {
  overflow:visible;
}

.ui-project-card .ui-thumbnail-card  {
  padding:0 50px 40px;
}

.ui-project-card .ui-thumbnail-card-item {
  display:flex;
  align-items:center;
}

.ui-project-card .ui-thumbnail-card-image {
  flex:0 0 130px;
  margin:0;
}

.ui-project-card .ui-thumbnail-card-image img {
  display:block;
  width:100%;
  height:auto;
}

.ui-project-card .ui-thumbnail-card-content {
  min-width:0;
  padding-left:72px;
}

.ui-project-card .ui-thumbnail-card-title {
  margin:0 0 30px;
  color:var(--color-text-primary);
  font-size:26px;
  font-weight:700;
  line-height:1.3;
}

.ui-project-card .ui-thumbnail-card-title span {
  display:inline-block;
  margin-left:20px;
  padding-left:20px;
  font-weight:400;
  border-left:2px solid #DAE0EB;
}

.ui-project-card .ui-thumbnail-card-description {
  margin:0;
  color:#797F8C;
  font-size:20px;
  line-height:1.5;
}

.ui-project-card .ui-project-card-body {
  height:auto;
  max-height:none;
  overflow:visible;
  padding:40px 50px;
  border:1px solid #C3C3C3;
  border-radius:10px;
}

.ui-project-card .ui-project-info {
  display:flex;
  flex-wrap:wrap;
  margin:0;
  gap:30px 40px;
}

.ui-project-card .ui-project-info > div {
  display:flex;
  align-items:center;
  min-width: 0;
}

.ui-project-card .ui-project-info dt {
  flex:0 0 auto;
  padding-right:18px;
  color:#222;
  font-size:20px;
  font-weight:700;
}

.ui-project-card .ui-project-info dt [class^="ri-"] {
  font-weight:500;
}

.ui-project-card .ui-project-info dd {
  flex: 1 1 auto;
  min-width: 0;
  margin:0;
  overflow-wrap: anywhere;

  font-size:18px;
  color:#333;
  line-height:1.5;
}

.ui-project-card .ui-project-info .ui-target {
  display:flex;
  flex-direction:column;
  align-items:normal;
  gap:20px;
  width:100%;
}

.ui-project-card .ui-file-list {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 280px));
  justify-content:center;
  justify-items:center;
  gap:32px;
  margin:60px 0 0;
  padding:0;
  list-style:none;
}

.ui-project-card .ui-file-list li {
  text-align:center;
}

.ui-project-card .ui-file-list .ui-file-icon {
  display:block;
  margin-bottom:40px;
}

.ui-project-card .ui-file-list strong {
  display:block;
  margin-bottom:30px;
  color:#222;
  font-size:24px;
}

/* 연간교육일정 모달 */
.ui-modal-application .ui-modal-body .ui-form-group {
  margin-bottom:24px;
}

.ui-modal-application .ui-modal-body .ui-table {
  margin-bottom:40px;
}

.ui-modal-application .ui-modal-body > .ui-form-group-column {
  margin-bottom:20px;
}

.ui-modal-application .ui-modal-body > .ui-btn-group-center {
  margin-bottom:70px;
}

.ui-tel-group {
  display:flex;
  align-items:center;
  gap:8px;
}

.ui-tel-group select,
.ui-tel-group input {
  width:160px;
}


/* 교육신청안내 */
.ui-nsre-thumbnail .ui-thumbnail-card-item {
  padding:30px 0;
  border-bottom:1px solid #D2DBE4;
}


/* 사업소개 */
.ui-section-biz {
  margin-bottom: 80px;
}
.ui-section-biz + .ui-section-biz {
  margin-top: 80px;
  margin-bottom: 0;
}


/* 마이페이지 */
.ui-table td button.td-text-left {
  width: 100%;
}

.ui-request-form > div {
  margin-bottom: 20px;
}

.ui-request-form .ui-form-item input,
.ui-request-form .ui-form-item textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #BBC4D0;
  padding: 27px 40px;
  font-size: 24px;
  line-height: 1.8;
}

.ui-request-form .ui-form-item input::placeholder ,
.ui-request-form .ui-form-item textarea::placeholder {
  color: #8E939D;
  font-size: 24px;
}



/* =================================================
   만족도 설문
================================================= */
.ui-icon--emoji1 {
  width:46px;
  height:46px;
  background-image:url('../images/icon/icon_emoticon1.svg');
}
.ui-icon--emoji2 {
  width:46px;
  height:46px;
  background-image:url('../images/icon/icon_emoticon2.svg');
}
.ui-icon--emoji3 {
  width:46px;
  height:46px;
  background-image:url('../images/icon/icon_emoticon3.svg');
}
.ui-icon--emoji4 {
  width:46px;
  height:46px;
  background-image:url('../images/icon/icon_emoticon4.svg');
}
.ui-icon--emoji5 {
  width:46px;
  height:46px;
  background-image:url('../images/icon/icon_emoticon5.svg');
}


.ui-survey-form {
  width:100%;
  color:#333;
}
.ui-survey-page{
  display:none;
}

.ui-survey-page.is-active{
  display:block;
}

.ui-survey-header {
  position:relative;
}

.ui-survey-title {
  margin:0;
  padding:12px 20px;
  border-radius:6px;
  background-color:#eef2f6;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
}

.ui-survey-step {
  position:absolute;
  top:0;
  right:0;
  font-size:20px;
  font-weight:500;
  margin-top:20px;
  margin-right:20px;
}

.ui-survey-step > em {
  color:#0066B3;
}

.ui-survey-item {
  min-width:0;
  margin:0;
  padding:40px 0 40px;
  border:0;
  border-bottom:1px solid #e1e5ea;
}
.ui-survey-page fieldset.ui-survey-item:only-of-type {
  padding:40px 0 0;
  border-bottom:0;
}

.ui-survey-question {
  display:block;
  width:100%;
  margin:0 0 30px;
  padding:0;
  font-size:20px;
  font-weight:600;
  line-height:1.8;
  text-align:center;
}

.ui-survey-score {
  display:flex;
  justify-content:center;
  gap:40px;
}

.ui-survey-textarea {
  width:100%;
  min-height:220px;
  padding:20px;
  margin:0;
  border:1px solid #c5d1e0;
  border-radius:12px;
  resize:vertical;
  box-sizing:border-box;
}
.ui-survey-textarea::placeholder {
  color: #666;
}

.ui-survey-stxt {
  text-align:center;
  font-size:18px;
  margin-top:40px;
}

.ui-survey-option {
  position:relative;
  display:flex;
  flex:0 1 64px;
  flex-direction:column;
  align-items:center;
  min-width:0;
  cursor:pointer;
}

.ui-survey-radio {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  border:0;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
}

.ui-survey-emoji {
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  font-size:34px;
  line-height:1;
  transition:transform 0.2s ease;
}

.ui-survey-text {
  display:block;
  margin-top:10px;
  font-size:14px;
  line-height:1.8;
  color:var(--color-text-primary);
  text-align:center;
  white-space:nowrap;
}

/* 하단 선택 표시 원 */
.ui-survey-text::after {
  display:block;
  width:20px;
  height:20px;
  margin:12px auto 0;
  border-radius:50%;
  background-color:#e4ebf3;
  content:"";
}

/* 선택 상태 */
.ui-survey-radio:checked + .ui-survey-emoji {
  transform:scale(1.08);
}

.ui-survey-radio:checked ~ .ui-survey-text {
  color:#006fd6;
  font-weight:700;
}

.ui-survey-radio:checked ~ .ui-survey-text::after {
  box-sizing:border-box;
  border:4px solid #147bd1;
  background-color:#fff;
}

/* 키보드 포커스 */
.ui-survey-radio:focus-visible + .ui-survey-emoji {
  border-radius:6px;
  outline:2px solid #111;
  outline-offset:4px;
}

.ui-survey-option:hover .ui-survey-emoji {
  transform:scale(1.08);
}

/* 오류 상태 */
.ui-survey-item.is-error {
  border-radius:6px;
  background-color:#fff7f7;
}

.ui-survey-item.is-error .ui-survey-question {
  color:#c62828;
}

.ui-survey-error {
  display:none;
  margin:14px 0 0;
  font-size:13px;
  line-height:1.4;
  color:#c62828;
  text-align:center;
}

.ui-survey-item.is-error .ui-survey-error {
  display:block;
}

.ui-survey-footer {
  padding-top:40px;
  text-align:center;
}

.ui-survey-next {
  display:inline-block;
  width:160px;
  height:52px;
  padding: 0 0;
  font-size:20px;
}

.ui-file-box{
  min-height: 215px;
  border-radius: 4px;
  margin-bottom: 60px;
  padding: 50px 80px;
  border: 1px solid #BBC4D0;
  font-size:18px;
  line-height: 100px;
}

.ui-file-box .ui-box-group{
  align-items: center;
}

.ui-file-box .ui-file-text {
  margin-right: 15px;
  font-size: 22px;
  font-weight: 500;
}

/* 납부현황 */
.ui-payment-section {
  margin-top: -40px;
}
.ui-payment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-payment-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid #999;
  background: #fff;
  position: relative;
}

.payment-item-help {
  width:100%;
  heighT:100%;
  position: absolute;
  left:0;
  right :0;
  bottom:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);

  /* 뒤쪽 영역만 블러 */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.payment-item-help p {
  padding: 30px 0;
  background: #fff;
  font-size:24px;
  font-weight: 600;
}

.ui-payment-summary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 16px;
  border-right: 1px solid #ddd;
}

.ui-payment-select {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ui-payment-select input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.ui-payment-select label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  cursor: pointer;
}

.ui-payment-status {
  font-size: 20px;
  line-height: 1.4;
}

.ui-payment-return {
  margin-top: 2px;
  line-height: 1.4;
}

.ui-payment-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.ui-payment-info-item {
  min-width: 0;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.ui-payment-info-item:nth-child(4n) {
  border-right: 0;
}

.ui-payment-info-item:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.ui-payment-info dt {
  padding: 10px 12px;
  background: #F4FAFF;
  border-bottom: 1px solid #ddd;
  font-size: 20px;
}

.ui-payment-info dd {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  font-size: 20px;
  line-height: 1.5;
  text-align: right;
  overflow-wrap: anywhere;
}