/* Common */
.f_point {font-family: 'GmarketSans'; /*font-family: 'jalnan';*/}

/* Main */
.main-visual-section {overflow: hidden;}
.main-visual-wr {position: relative;}
.main-visual-sl {}
.main-visual-item {position: relative;}
.main-visual-img {position: relative; height: 0; padding-bottom: 27.2202%;}
.main-visual-img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}
.main-visual-text-box {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
.main-visual-text-box .title {font-weight: 500; font-size: 46px; color: #000; line-height: 1.2; padding-bottom: 6px;}
.main-visual-text-box .point {color: #e2190f;}
.main-visual-text-box .text {font-weight: 500; font-size: 26px; color: #3d3d3d; padding-bottom: 22px;}
.main-visual-text-box .info-box {width: 462px; max-width: 100%; background-color: rgba(255,255,255,0.53); border-radius: 10px 30px 10px 30px; box-shadow: 20px 11px 38px rgba(51,51,51,0.13); position: relative; padding: 25px 36px; padding-right: 85px;}
.main-visual-text-box .info-box p {font-weight: 500; font-size: 20px; color: #333; line-height: 1.6;}
.main-visual-text-box .info-box p b {font-weight: 900;}
.main-visual-text-box .info-btn {position: absolute; top: 50%; right: 36px; transform: translateY(-50%); background-image:  linear-gradient(90deg, #ef3e50 0%, #fa804f 100%); width: 39px; height: 39px; border-radius: 50%; line-height: 43px; text-align: center;}

.main-mv-ctr-box {position: absolute; bottom: 38px; left: 0; width: 100%; z-index: 1; text-align: right;}
.main-mv-ctr-wr {background-color: rgba(0,0,0,0.72); border-radius: 20.5px; display: inline-block; padding: 5.5px 0; width: 138px; text-align: center;}
.main-mv-paging {font-weight: 400; font-size: 20px; color: #fff; padding-right: 13px;}
.main-mv-ctr {font-size: 0; margin: 0 -7.5px; margin-top: 5px;}
.main-mv-ctr button {border: none; background-color: transparent; margin: 0 7.5px;}

.main-qb-section {padding: 100px 0;}

.main-qb-wr {font-size: 0;}
.main-qb-wr > * {display: inline-block; vertical-align: top; font-size: 16px;}
.main-qb-left {width: 53.57%;}
.main-section .q-tit {font-weight: 700; font-size: 26px; color: #333; line-height: 1;}
.main-qb-left .q-txt {font-weight: 500; font-size: 20px; color: #666; padding-top: 3px;}
.main-quick-btn-wr {padding-top: 37px;}
.main-quick-ul {margin: -14px;}
.main-quick-ul li {padding: 14px;}
.main-quick-ul li .quick-btn {}
.main-quick-ul li .quick-btn .icon {position: relative; width: 100%; height: 103px; border-radius: 32px; border: 1px solid #999; text-align: center; transition: .2s;}
.main-quick-ul li .quick-btn .icon img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main-quick-ul li .quick-btn .txt {text-align: center; font-weight: 500; font-size: 18px; color: #333; padding-top: 24px;}
.main-quick-ul li .quick-btn:hover .icon { background-color: #f14040; box-shadow: 0 0 20px 5px rgba(0, 0, 0, .1); border-color: #f14040; }

.main-qb-right {width: 46.43%; padding-left: 104px;}
.main-board-tab {position: relative; padding-top: 62px;}
.main-board-tab > li {}
.main-board-title {position: absolute; top: 0; left: 0; border: none; background-color: transparent; border-radius: 22px; font-weight: 500; font-size: 20px; color: #666; transition: .2s; z-index: 1; padding: 13px 17px 8px;}
.main-board-title::before {content: ''; width: 23.25px; height: 23.25px; background-color: #d31421; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) rotate(45deg); z-index: -1; transition: .3s; opacity: 0;}
.main-board-tab > li:nth-child(2) .main-board-title {left: 121px;}
.main-board-title.on { background-color: #d31421; color: #fff;}
.main-board-title.on::before {opacity: 1;}

.main-board-list {border-top: 1px solid #ccc; display: none; padding-top: 10px;}
.main-board-item {position: relative; padding: 7px 0; padding-right: 140px;}
.main-board-item .title {display: block; font-weight: 500; font-size: 18px; color: #333; position: relative; padding-left: 18px;}
.main-board-item .title::before {content: ''; width: 3px; height: 3px; background-color: #333; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.main-board-item .date {position: absolute; top: 50%; right: 9px; transform: translateY(-50%); font-weight: 500; font-size: 16px; color: #999;}

.main-board-tab > li .more-view {position: absolute; top: 0; right: 0; font-size: 0; display: none;}
.main-board-tab > li .more-view span {font-weight: 700; font-size: 16px; color: #333; display: inline-block; vertical-align: middle;}
.main-board-tab > li .more-view .icon {display: inline-block; width: 37px; height: 37px; border-radius: 50%; border: 1px solid #ccc; background-color: #fcfcfc; text-align: center; line-height: 34px; margin-left: 12px;}

.main-board-tab > li.on .main-board-list {display: block;}
.main-board-tab > li.on .more-view {display: block;}

.main-btn-section {padding-bottom: 100px;}

.main-btn-wr {}
.main-btn-ul {margin: -9px;}
.main-btn-ul li {padding: 9px;}
.main-btn-ul li .btn {display: block; border-radius: 19px; box-shadow: 20px 11px 38px rgba(175,45,52,0.13); height: 100%; background-image:  linear-gradient(120deg, #ef3e50 0%, #fa804f 100%); padding: 29px 35px; position: relative; border: none;}
.main-btn-ul li .btn .tit {font-weight: 700; font-size: 24px; line-height: 1.3; color: #fff;}
.main-btn-ul li .btn .icon {position: absolute; bottom: 0; right: 35px; font-size: 0;}

.main-rel-section {background-color: #f7f7f7; padding: 37.5px 0;}

.main-rel-wr {font-size: 0;}
.main-rel-wr > * {display: inline-block; vertical-align: middle;}
.main-rel-wr .q-tit {width: 195px;}
.main-rel-ul {width: calc(100% - 195px); margin: 0 -13px; text-align: right;}
.main-rel-ul li {padding: 0 13px;}
.main-rel-ul li a {display: block; font-size: 0;}

/* Sub */
.text-wr ~ .text-wr {padding-top: 0;}

.numTxt_wr {counter-reset: colorcircle 0;}
.numTxt_wr .numTxt {position: relative; padding-left: 38px;}
.numTxt_wr .numTxt:before {counter-increment: colorcircle 1; content: counter(colorcircle); display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; font-size: 16px; font-weight: 700; color: #fff; text-align: center; background-color: #e2190f;}

.dotTxt {position: relative; padding-left: 50px;}
.dotTxt:before {content: ""; display: block; position: absolute; top: 11px; left: 38px; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background-color: #333;}

/* sub visual */
.sub-visual_1 {background: url('../img/sub-visual-bg1.jpg') no-repeat center/cover;}

/* 교육안내 > 교육목표및방향 */
.civiledu-vision_wr {width: 840px; max-width: 100%; margin: 0 auto;}
.civiledu-vision_box {position: relative;}
.civiledu-vision_box ~ .civiledu-vision_box {margin-top: 100px;}
.civiledu-vision_box ~ .civiledu-vision_box:before {content: ""; display: block; position: absolute; top: -50px; left: 50%; display: block; width: 32px; height: 42px; transform: translate(-50%, -50%); background: url('../img/target-arrow-up.png') no-repeat center/contain;}
.civiledu-vision_box:after {content: ""; display: table; clear: both;}

/* 인재개발원소개 > 시설예약안내 > 예약현황 */
.date-btn-wr {padding-left: 20px;}
.datepicker {background-color: #fff!important;}

.click-tb {}
.click-tb tr {transition: .3s;}
.click-tb tr td {transition: .3s; cursor: pointer; width: 3.6%;}

.click-tb tr:hover td {background-color: #f7f7f7;}

.reser-step-ul {margin: -16px; padding-top: 10px;}
.reser-step-ul li {padding: 16px;}
.reser-step-ul li .step {}
.reser-step-ul li .step .color {width: 16px; height: 16px; border: 1px solid #ddd;}
.reser-step-ul li .step .txt {font-weight: 500; font-size: 16px; color: #666; padding-left: 6px;}

.reser-step-ul li .step01 {}
.reser-step-ul li .step01 .color {background-color: #fff;}
.reser-step-ul li .step02 {}
.reser-step-ul li .step02 .color {background-color: #d31421;}
.reser-step-ul li .step03 {}
.reser-step-ul li .step03 .color {background-color: #333;}

/* 인재개발원소개 > 시설예약안내 > 나의예약 */
.board-srch-item.date {width: 50%;}
.board-top.date {}
.board-top.date > * {vertical-align: bottom;}

.date-form button { height: 45px;}

/* 교육안내 > 사이버교육 > 나라배움터(공무원) */
.sub-tab.type2.custom1 .sub-tab-ul {
  margin: 0;
}

/* 교육안내 > 평가및수료안내 */
.board-list.txt-type02 table thead tr th.custom1 {
  border-right: 1px solid #ddd!important;
}

/* 인재개발원소개 >	인사말 */
.sub4_1 {
  display: table;
  width: 100%;
}

.sub4_1>* {
  display: table-cell;
  vertical-align: top;
}

.sub4_1>.message_l {
  width: 162px;
}

.sub4_1>.message_r {
  padding-left: 100px;
}

/* 인재개발원소개 >	조직안내 */
.employee-wrap .split-box {
  position: relative;
  padding-bottom: 80px;
}
.employee-footer {
  display: block;
  position: absolute;
  bottom: 0; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.employee-button {
  display: inline-block;
  vertical-align: middle;
  padding: 11px 32px;
  padding-right: 25px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-radius: 2em;
  background: #cc3333;
  transition: background 0.3s;
  box-shadow: 20px 20px 38px 11px rgba(175, 45, 52, 0.13);
}

.employee-button .arrow1 {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 18px;
  background: url("../img/sub4_3_arrow.png") no-repeat center / cover;
  margin-left: 30px;
}

.role-box {}

.role-top {
  padding-bottom: 40px;
  position: relative;
}

.role-main-item {}

.role-top::before {
  content: '';
  width: 1px;
  height: 58px;
  background-color: #364c24;
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  left: 50%;
}

.role-top::after {
  content: '';
  width: calc(100% - 151px);
  height: 1px;
  background-color: #364c24;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.role-main-item {
  position: relative;
  z-index: 1;
  font-size: 24px;
  width: 220px;
  height: 220px;
  line-height: 220px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  background: url('../img/sub4_3_role_main_item.png') no-repeat center / cover;
  font-weight: 800;
}

.role-body {
  padding-top: 32px;
  position: relative;
}

.role-body::before {
  content: '';
  width: 1px;
  height: 32px;
  background-color: #364c24;
  position: absolute;
  top: 0;
  left: 75.5px;
}

.role-body::after {
  content: '';
  width: 1px;
  height: 32px;
  background-color: #364c24;
  position: absolute;
  top: 0;
  right: 75.5px;
}

.role-ul {
  margin: -5px;
}

.role-ul>li {
  padding: 5px 30px;
  vertical-align: top;
}

.role-ul .item_center::before {
  content: '';
  width: 1px;
  height: 40px;
  background-color: #364c24;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

.role-ul .depart-title {
  display: block;
  background-color: #5e646d;
  border-radius: 6px;
  height: 61px;
  line-height: 61px;
  text-align: center;
  position: relative;
}

.role-ul .depart-title span {
  display: inline-block;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  line-height: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.role-ul .depart-ul {
  /* margin: -5px; */
  padding-top: 10px;
}

.role-ul .depart-ul li {
  vertical-align: top;
  border: 1px solid #999;
  background: #fff;
  border-radius: 6px;
  height: 61px;
  line-height: 61px;
  text-align: center;
  color: #666;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}

.role-ul .depart-ul li:last-child {
  margin-bottom: 0;
}

.role-ul .depart-ul li a {
  display: block;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-weight: 500;
  font-size: 16px;
  color: #666;
  position: relative;
  transition: .3s;
  padding: 11.5px 0;
  padding-left: 33px;
}

.role-ul .depart-ul li a::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #666;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
}

.role-ul .depart-ul li a:hover {
  border-color: #999;
}

.org_box .i-col-2 {
  padding-bottom: 40px;
}

.dotted-line {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #999 30%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.org_box .i-col-2>* {
  vertical-align: top;
}

.org_box li {
  font-weight: 500 !important;
}

.gradient-button {
  display: inline-block;
  padding: 16px 38px;
  padding-right: 27px;
  font-size: 20px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  border-radius: 2em;
  background: linear-gradient(270deg, #fa804f, #ef3e50);
  transition: background 0.3s;
  box-shadow: 20px 20px 38px 11px rgba(175, 45, 52, 0.13);
}

.gradient-button .arrow1 {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: url("../img/sub4_3_arrow.png") no-repeat center / cover;
  transform: translateY(3px);
  margin-left: 20px;
}

.gradient-button:hover {
  background: linear-gradient(270deg, #ef3e50, #fa804f);
}

.gradient-button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 인재개발원소개 >	직원안내 > 교육총괄과 */
.board-list.txt-type02.sub4_4 table td.left {
  padding: 10px 15px;
}

/* 인재개발원소개 >	직원안내 > 교육운영과 */
.board-list.txt-type02.sub4_5 table td.left {
  padding: 10px 15px;
}

/* 인재개발원소개 >	직원안내 > 도민교육운영과 */
.board-list.txt-type02.sub4_6 table td.left {
  padding: 10px 15px;
}

/* 인재개발원소개	> 찾아오시는 길 */
.root_daum_roughmap {
  width: 100% !important;
}
.root_daum_roughmap_landing .border2 {
  display: block !important;
}
.root_daum_roughmap .wrap_controllers {
  display: none  !important;
}


/* 인재개발원소개 > 사이트맵 */
.sitemap-ul>li {
  padding: 5px;
  vertical-align: top;
}

.sitemap-ul>li>.inner-box {
  height: 100%;
  border: 1px solid #d31421;
  border-radius: 10px;
  padding: 16px;
  background-color: #f7f7f7;
  box-shadow: 7px 0 21px rgba(59, 59, 59, 0.13);
}

.sitemap-depth1 {
  display: block;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  background-color: #d31421;
  padding: 10px 0;
  margin-bottom: 16px;
}

.sitemap-depth2-ul {}

.sitemap-depth2-ul>li {
  border-bottom: 1px solid #ddd;
}

.sitemap-depth2-ul>li:last-child {
  border-bottom: none;
}

.sitemap-depth2 {
  font-weight: 500;
  font-size: 16px;
  color: #333;
  display: block;
  position: relative;
  padding: 8px 0;
  padding-left: 14px;
}

.sitemap-depth2::before {
  content: '';
  width: 5px;
  height: 3px;
  background-color: #d31421;
  position: absolute;
  top: 19px;
  left: 0;
}

.sitemap-depth3-ul {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin: 4px 0 12px;
}

.sitemap-depth3-ul>li {}

.sitemap-depth3 {
  font-weight: 400;
  font-size: 16px;
  color: #333;
  position: relative;
  padding-left: 10px;
}

.sitemap-depth3::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 8px;
  left: 0;
}

.sitemap-depth4-ul {padding: 8px; padding-right: 0;}
.sitemap-depth4-ul > li {line-height: 1.2;}
.sitemap-depth4 {font-size: 14px; color: #999; position: relative; padding-left: 8px;}
.sitemap-depth4::before {content: '- '; font-size: 14px; color: #999; position: absolute; top: 0; left: 0;}

/* 인재개발원소개 > 시설안내 */
.info_box {}
.info_box > li {
  font-size: 0;
}
.info_box > li ~ li {
  margin-top: 20px;
}
.info_box li > * {
  display: inline-block;
  vertical-align: top;
}
.info_box li > .info_img {
  width: 120px;
  height: 100px;
  overflow: hidden;
}
.info_box li > .info_txt {
  width: calc(100% - 120px);
  padding-left: 30px;
}
.info_img {
  font-size: 0;
}

.bookinglist .info_img {
  width: 120px;
  height: 100px;
  margin: 0 auto 10px;
  overflow: hidden;
}

/* 2025-02-11 메인 > 포토/영상 게시판 */
.main-board-section {padding-bottom: 100px;}
.main-board-wr {}
.main-board-title-box {position: relative; margin-bottom: 50px;}
.main-board-title-box .title {font-weight: 700; font-size: 26px; line-height: 1;}
.main-board-title-box .more-view {position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-size: 0;}
.main-board-title-box .more-view span {font-weight: 700; font-size: 16px; color: #333; display: inline-block; vertical-align: middle;}
.main-board-title-box .more-view .icon {display: inline-block; width: 37px; height: 37px; border-radius: 50%; border: 1px solid #ccc; background-color: #fcfcfc; text-align: center; line-height: 34px; margin-left: 12px;}

.main-board-sl-wrap {overflow: hidden; padding: 60px 0; position: relative;}
.main-board-sl-item {width: 380px;  transition: .5s; font-size: 0;}
.main-board-sl-item::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(239,62,80); background: linear-gradient(117deg, rgba(239,62,80,1) 0%, rgba(250,128,79,1) 100%); z-index: 1; opacity: 0.71; border-radius: 20px; overflow: hidden; transition: .3s; opacity: 0; display: none;}
.main-board-inner {position: relative; display: block;}
.main-board-inner .img-wrap {position: relative; height: 0; padding-bottom: 66.072%; overflow: hidden; border-radius: 20px; overflow: hidden; border: 1px solid #ccc;}
.main-board-inner .img-wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; max-width: none;}
.main-board-inner .text-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; text-align: center; width: 66%; z-index: 2;}
.main-board-inner .text-wrap .date {font-weight: 500; font-size: 20px; color: #fff; margin-bottom: 6px; line-height: 1;}
.main-board-inner .text-wrap .tit {font-weight: 700; font-size: 30px; color: #fff; line-height: 1.1; letter-spacing: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.main-board-sl-item.swiper-slide-active {transform: scale(1.474);}
.main-board-sl-item.swiper-slide-active::before {opacity: 0.71;}
.main-board-sl-item.swiper-slide-active .text-wrap {display: block;}

.main-board-sl-ctr-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; width: 599px;}
.main-board-sl-ctr-box button {border: none; width: 39px; height: 39px; line-height: 39px; text-align: center; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); background: rgb(239,62,80); background: linear-gradient(117deg, rgba(239,62,80,1) 0%, rgba(250,128,79,1) 100%); box-shadow: 20px 11px 38px rgba(175,45,52,.13);}
.main-board-sl-ctr-box .prev {left: 0;}
.main-board-sl-ctr-box .prev img {margin-left: -5px; margin-bottom: -2px;}
.main-board-sl-ctr-box .next {right: 0;}
.main-board-sl-ctr-box .next img {margin-right: -5px; margin-bottom: -2px;}

.main-board-bot {text-align: center; padding-top: 25px;}
.main-board-pg-box {position: relative; display: inline-block; border-radius: 20px; background-color: rgba(0,0,0,0.5); margin: 0 auto; padding: 16px 25px; font-size: 0;}
.main-board-bot .swiper-pagination {position: static; display: inline-block; vertical-align: middle; width: auto;}
.main-board-bot .swiper-pagination-bullets .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 3.5px; background-color: #ffffff; opacity: 1; transition: .3s; display: inline-block;}
.main-board-bot .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 25px; border-radius: 4px;}
.main-board-stop {display: inline-block; vertical-align: middle; margin-left: 5px; border: none; background-color: transparent;}

/* 2025-03-04 추가 작업 */
.main-board-sl-item.swiper-slide-active::before {opacity: 0;}
.main-board-inner .text-wrap {transform: none; top: inherit; left: 0; bottom: 0; padding: 8px 10px; width: 100%; text-align: left; z-index: 2;}
.main-board-inner .text-wrap::before {content: ''; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; backdrop-filter: blur(5px); z-index: 1; display: none;}
.main-board-inner .text-wrap > * {position: relative; z-index: 2;}
.main-board-inner .text-wrap .date {font-size: 12px; color: #000000;}
.main-board-inner .text-wrap .tit {font-size: 18px; color: #000000;}

.main-board-inner .text-wrap {position: static;}
.main-board-sl-wrap {padding: 73px 0;}
.main-board-sl-ctr-box {top: 43%;}

/*2026-01-30 교육일정 */
.education-sub-back-color-01 {background: #E6EEF7;}
.education-sub-back-color-02 {background: #FFE7D8;}