@charset "UTF-8";

@font-face {
  font-family: 'brands-400';
  src: url('../font/fontAwesome/fa-brands-400.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'regular-400';
  src: url('../font/fontAwesome/fa-regular-400.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'solid-900';
  src: url('../font/fontAwesome/fa-solid-900.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'v4compatibility';
  src: url('../font/fontAwesome/fa-v4compatibility.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --main-navy:#264E99;
  --main-blue:#256EF4;
  --main-yellow:#FFCC22;
  --main-orange:#ff6c00;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
}


/*260820 어린이 서브페이지 비주얼 리뉴얼*/
.visualWrap {position:relative; margin-bottom:20px; width:100%; min-height:430px; display:flex; flex-flow:column nowrap; align-items: center; justify-content: center; gap:1em; font-size:18px; color:#333; background: url("../../images/childRenew_bg01.jpg") center bottom / cover no-repeat;}
.visualWrap.no1 {background-image: url("../../images/childRenew_bg01.jpg");}
.visualWrap.no2 {background-image: url("../../images/childRenew_bg02.jpg");}
.visualWrap.no3 {background-image: url("../../images/childRenew_bg03.jpg");}
.visualWrap.no4 {background-image: url("../../images/childRenew_bg04.jpg");}
.visualWrap.no5 {background-image: url("../../images/childRenew_bg05.jpg");}
.visualWrap .titleArea {width:100%; text-align:center;}
.visualWrap .titleArea .mainTitle { font-weight: normal; font-size: 2.5em; font-family: 'OneMobilePop'; color:#264E99; text-align:center; margin-bottom:10px;}
.visualWrap .titleArea .subTitle {font-size:1.05em; text-align:center;}
.visualWrap .mobileDeco {display:none;}

/*260922 어린이 메인 개편*/
.headerWrap {position: fixed; z-index: 999; width:100%;}
.headerWrap #krds-header {transition: transform 0.3s ease-in-out;}
.headerWrap #krds-header.scrolling { transform: translateY(-100%);}
.headerWrap #krds-header .header-container .header-branding {justify-content: space-between;}
.headerWrap #krds-header .header-container .logo {width:auto; height:auto; align-items:center; justify-content: flex-start; gap:20px;}
.headerWrap #krds-header .header-container .logo a { display: inline-flex;  width: 13rem; height: var(--krds-size-height-7);}
.headerWrap #krds-header .header-container .logo .text {font-size:20px; color:#666; position: relative;}
.headerWrap #krds-header .header-container .logo .text::before {content:''; position: absolute; top: 50%; left: -10px; transform: translate(50%, -50%); width:1px; height:14px; background-color: #ddd;}
.headerWrap .krds-main-menu .gnb-menu {justify-content: space-between; gap:0;}
.headerWrap .krds-main-menu .gnb-menu .depthTitle {width:auto; flex:1;}
.headerWrap .krds-main-menu .gnb-menu .gnb-main-trigger {width:100%; justify-content: space-between;}
.headerWrap .krds-main-menu .gnb-menu .gnb-main-trigger.active {}
.headerWrap .krds-main-menu > .inner { height: var(--krds-main-menu--main-trigger-size-height); }
.headerWrap .krds-main-menu .gnb-menu { position: relative; 	isolation: isolate; 	align-items: stretch; gap: .8rem; }
.headerWrap .krds-main-menu .gnb-menu > li { display: flex; flex: 1 1 0; 	min-width: 0; flex-direction: column; }
.headerWrap .krds-main-menu .gnb-main-trigger { 	width: 100%; justify-content: space-between; }
.headerWrap .krds-main-menu .gnb-toggle-wrap { position: static; width: auto; margin: 1.5rem 0; border-radius:1rem; flex: 1; padding: 0; background: transparent; }
.headerWrap .krds-main-menu .gnb-menu.is-open .gnb-toggle-wrap { min-height: 18rem; padding:2rem; display: flex; flex-flow:column wrap; align-items: stretch; justify-content: space-between; gap: 3rem;}
.headerWrap .krds-main-menu .gnb-main-trigger.active + .gnb-toggle-wrap { background: #eefaff; 	border-radius: .8rem;  }
.headerWrap .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true]::before { 	display: none; }
.headerWrap .krds-main-menu .gnb-toggle-wrap .gnb-main-list {margin:0;}
.headerWrap .krds-main-menu .gnb-toggle-wrap .gnb-main-list .list { padding:0 0 2rem 0;}
.headerWrap .krds-main-menu .gnb-toggle-wrap .gnb-main-list .list:last-child {padding-bottom:0;}
.headerWrap .krds-main-menu .gnb-toggle-wrap .gnb-main-list .list a { display: block; width:100%;}
.headerWrap .krds-main-menu .gnb-toggle-wrap .gnb-main-list .list a:hover {font-weight:600; color:#063A74;}
.headerWrap .krds-main-menu .gnb-menu.is-open::before { content: ""; position: absolute; z-index: -1; top: var(--krds-main-menu--main-trigger-size-height); bottom: 0; left: 50.7%; width: 100vw; transform: translateX(-50%); background: var(--krds-main-menu--color-surface); border-top: .1rem solid var(--krds-main-menu--color-border); }
.headerWrap .krds-main-menu .gnb-menu.is-open .gnb-toggle-wrap .icon {width: 100%; text-align: right;}
/*.headerWrap .krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap .gnb-sub-list {  padding:0  var(--krds-main-menu-mobile--sub-menu-padding);}*/
.footerWrap #krds-footer .f-btm .f-btm-text .f-menu {gap:1em;}
.footerWrap #krds-footer .f-btm .f-btm-text .f-menu .point {color: var(--main-blue); font-weight:600;}


/* main-footer modal */
#externalLayer.external-layer { position: fixed;  inset: 0;   display: none;  z-index: 9999;  -webkit-overflow-scrolling: touch;}
#externalLayer.external-layer iframe { width: 100%;  height: 100%;  border: 0;}
.renew2026 .krds-modal[data-type=full] {background-color: rgba(238, 242, 247, 1);}
.renew2026 .krds-modal .modal-dialog {max-width:100%;}
.renew2026 .krds-modal .modal-dialog .btn-close { z-index: 2000 !important; right:50% !important;transform: translate(50%, -50%)!important;  top: 8%!important; transition:all 0.2s ease-in-out;}
.renew2026 .krds-modal .modal-dialog .btn-close.krds-btn.icon .svg-icon {background-color:#7b7b7b;}
.renew2026 .krds-modal .modal-dialog .btn-close:hover i {transform:rotate(180deg);}
.renew2026.modal-wrap .modal-dialog .modal-content {padding: 6.5% 15%;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header {flex-flow:column nowrap; margin-bottom: 1em; text-align: center; width: 100%; align-items: center; justify-content: center;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header .modal-title { margin-bottom:50px; overflow: visible; position:relative; text-align: center; font-size: 36px; display: inline-block;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header .modal-title::after {content:''; position:absolute; bottom:-20px; right:50%; transform:translate(50%,-50%); width:30px; height: 2px; background-color: #0058ff;   display: inline-block;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container {width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 20px;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container button {    font-size: 20px; width: calc( ( 100% - 80px ) / 5 ); border: 1px solid #ccc; padding: 5px 10px; border-radius: 20px; font-weight: 500;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container button.active {background-color: var(--krds-color-light-secondary-70); color: #fff; font-weight: 600;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container button:hover {font-weight: 600;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts [role="tabpanel"] { display: none;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts [role="tabpanel"].active { display: block;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links { padding: 10px 0;width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: flex-start; gap: 20px;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li {display: flex; width: calc( ( 100% - 80px ) / 5 ); }
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li::before {content:'·'; font-size: 18px; display: inline-block; color: #1d1d1d; padding-right: 5px; font-weight: 800;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li:hover {font-weight: 600;}
.renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li a {display: inline-flex;  align-items: flex-start;  justify-content: flex-start;   gap: 5px; font-size: 20px;  font-weight: 500;  color: #333; word-break: break-all; width: 100%; height: 100%;}

.directBtn {color:#fff; background-color: var(--main-navy); font-size:14px; line-height: 1; padding:10px 12px; border-radius:30px; display: inline-flex; align-items:center; justify-content: center;}
.directBtn.small {font-size:12px; padding:8px 12px;}
.directBtn:hover {color:#fff; font-weight: 600;}
.directBtn .icon {font-size:0.95em; display: inline-block; margin-left:6px; line-height: 0.8;}
.directBtn .icon.plus {transition: all 0.3s ease-in-out;}
.directBtn:hover .icon.plus {transform:rotate(180deg);}
.directBtn .icon.arrow {transition: all 0.2s ease-in-out;}

#renewContainer {width:100%; max-width:100%; font-size:18px; color:#333; padding-top:166px;}
#renewContainer .topBtn { position: fixed;  right: 14px;  bottom: 2vh;  z-index: 99; animation: upDown 1.8s ease-in-out infinite; }
#renewContainer .topBtn .text {display: none; transition: display 0.4s ease-in-out; width:70px; height: 70px; border-radius: 50%; font-size:14px; font-weight: 600; color:#fff; background-color:var(--main-blue);}
#renewContainer .topBtn:hover .text {display: inline-flex; align-items:center; justify-content: center;}
#renewContainer .topBtn:hover img {display: none;}
@keyframes upDown {
  0%, 100% {
    transform: translateY(10px);
    opacity: 1;
  }
  50% {
    transform: translateY(0);
  }
}
#renewContainer .topBtn img {max-width:70px;}
#renewContainer img {min-width:unset;}
#renewContainer .section {position: relative; width:100%; max-width:100%; padding:80px 0; background-position: bottom center; background-repeat: no-repeat; background-size: cover;}
#renewContainer .section.no1 {background-image: url("../../images/renewBg01.jpg");}
#renewContainer .section.no2 {background-image: url("../../images/renewBg02.jpg");}
#renewContainer .section.no3 {background-image: url("../../images/renewBg03.jpg");}
#renewContainer .section.no4 {background-image: url("../../images/renewBg04.jpg"); padding-bottom:200px; min-height:880px;}
#renewContainer .section .widthWrap {min-height:400px;  margin: 0 auto; width:100%; max-width:1200px; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: space-between; gap:6rem;}
#renewContainer .section .titleWrap {width:100%; text-align:center;}
#renewContainer .section .titleWrap .secTitle {font-size:2em; color: var(--main-navy); font-family: 'OneMobilePop';  font-weight: normal;}
#renewContainer .section .titleWrap .secSub {font-size:1em; color:#666; font-weight: 500;}
#renewContainer .section .titleWrap .directBtn {margin-top:1em;}
#renewContainer .section .secDeco {display:none;}

#renewContainer .section.no1 .titleWrap {}
#renewContainer .section.no1 .titleWrap .subTitle {font-family: 'OneMobilePop'; background-color: #fff; color:var(--main-navy); display: inline-block; width:fit-content; line-height:0.9; padding:8px 16px; border-radius: 30px; margin-bottom:0.5em;}
#renewContainer .section.no1 .titleWrap .mainTitle { position: relative; font-family: 'OneMobilePop';  font-weight: normal;  font-size: 2.5em;  line-height: 1.3;  color: var(--main-blue);  --outline: #fff;
  text-shadow:  0    -2px 0 var(--outline),  1px  -2px 0 var(--outline),  2px  -1px 0 var(--outline),  2px   0   0 var(--outline),  2px   1px 0 var(--outline), 1px   2px 0 var(--outline),  0     2px 0 var(--outline),  -1px   2px 0 var(--outline), -2px   1px 0 var(--outline),  -2px   0   0 var(--outline),  -2px  -1px 0 var(--outline),  -1px  -2px 0 var(--outline),  3px   2px 0 #fff; }
#renewContainer .section.no1 .titleWrap .mainTitle .accent {color:#ff4951; font-family: 'OneMobilePop';}

#renewContainer .introWrap {width:100%; background-color: #fff; overflow: hidden; border-radius: var(--radius-lg); padding:2em; display: flex;  align-items: center; justify-content: space-between; gap:200px;}
#renewContainer .introWrap .leftArea {width:fit-content; height: stretch; display: inline-flex; flex-flow: column nowrap; align-items: center; justify-content: space-between;}
#renewContainer .introWrap .leftArea .top {width:100%;}
#renewContainer .introWrap .leftArea .top .title {font-size:1.5em; color:var(--main-navy); font-weight:700; margin-bottom:10px;}
#renewContainer .introWrap .leftArea .top .sub {font-size:0.95em;}
#renewContainer .introWrap .leftArea .bot {width: 100%;}
#renewContainer .introWrap .rightArea {width:auto; flex:1; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; gap:3em;}
#renewContainer .introWrap .rightArea .introBtn { }
#renewContainer .introWrap .rightArea .introBtn .img { margin-bottom: 1em; width: 150px; height: 150px; border-radius: 50%; background-color: #dff4ff; display: inline-flex; align-items: center; justify-content: center;}
#renewContainer .introWrap .rightArea .introBtn .img img {max-height:70px; min-width:unset;transition: transform 0.8s ease; transform-style: preserve-3d; }
#renewContainer .introWrap .rightArea .introBtn:hover .img img { transform: rotateY(360deg);}
#renewContainer .introWrap .rightArea .introBtn .text {width:100%; text-align: center;display: block; font-weight: 600;}
#renewContainer .introWrap .rightArea .introBtn .text br {display: none;}
#renewContainer .introWrap .rightArea .introBtn:hover .text {font-weight: 700;}

#renewContainer .tubeWrap {width:100%; display:flex; flex-flow: row nowrap; align-items:stretch; justify-content: space-between; gap:1em;position: relative; }
#renewContainer .tubeWrap .deco {position: absolute; top:-68px; left:10px; }
#renewContainer .tubeWrap .deco img {max-height: 70px;}
#renewContainer .tubeWrap .tubeBox {width: calc((100% - 3rem) / 4);}
#renewContainer .tubeWrap .tubeBox .imgArea {width:100%; aspect-ratio: 4/3; margin-bottom:1em; border-radius: var(--radius-md); overflow: hidden;}
#renewContainer .tubeWrap .tubeBox .imgArea img {object-fit: cover;  display: block;  height: 100%; transition: all 0.3s ease-in-out;}
#renewContainer .tubeWrap .tubeBox:hover .imgArea img {transform: scale(1.1);}
#renewContainer .tubeWrap .tubeBox .badge {line-height:1; border-radius: 30px; background-color: #fff; color: var(--main-navy);  font-size:0.8em; padding:8px 12px 6px; margin-bottom:0.5em;}
#renewContainer .tubeWrap .tubeBox .tubeTitle {font-size:1.1em;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}

#renewContainer .tabWrap {width:100%;}
#renewContainer .tabBtnWrap { width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;gap:1em; margin-bottom:1em;}
#renewContainer .tabBtnWrap .tabBtn {flex: 1; color: #4b4b4b;  background-color: #F2F2F2; border-radius: 30px; padding: 12px;  font-size: 1em; font-weight: 500; display: inline-flex; align-items: center; flex-flow: row nowrap; justify-content: center; gap: 5px; position: relative;  overflow: hidden;  z-index: 0; transition: color 0.3s ease;}
#renewContainer .tabBtnWrap .tabBtn::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--main-navy); border-radius:30px; transform:scaleX(0); transform-origin:left center; transition:transform 0.5s ease; z-index:0;}
#renewContainer .tabBtnWrap .tabBtn:hover::before {transform:scaleX(1);}
#renewContainer .tabBtnWrap .tabBtn:hover {color:#fff;}
#renewContainer .tabBtnWrap .tabBtn > * {position:relative; z-index:1;}
#renewContainer .tabBtnWrap .tabBtn .icon img {transition:filter 0.3s ease;}
#renewContainer .tabBtnWrap .tabBtn:hover .icon img {filter:brightness(0) invert(1);}
#renewContainer .tabBtnWrap .tabBtn.active {background-color:var(--main-navy); font-weight:600; color:#fff;}
#renewContainer .tabBtnWrap .tabBtn .icon {display: inline-flex; align-items: center; justify-content: center;}
#renewContainer .tabBtnWrap .tabBtn.active .icon img {filter: brightness(0) invert(1);}
#renewContainer .tabContWrap .tabCont { display: none;  flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 1em; background-color: #fff; padding:1em; border-radius: var(--radius-md); }
#renewContainer .tabContWrap .tabCont.active { display: flex; }
#renewContainer .tabContWrap .tabCont .imgArea {width:45%; height:320px; border-radius: var(--radius-sm); overflow: hidden;}
#renewContainer .tabContWrap .tabCont .imgArea img {height: 100%; display: block; object-fit: cover; transition: transform 0.3s ease-in-out; }
#renewContainer .tabContWrap .tabCont:hover .imgArea img {transform: scale(1.1);}
#renewContainer .tabContWrap .tabCont .textArea {width:auto; flex:1; display: flex;  flex-direction: column;  align-items: flex-start; gap:0.5em;}
#renewContainer .tabContWrap .tabCont .textArea .badge { display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; width: fit-content; line-height:1; border-radius: 30px; background-color: #DFF4FF; color: var(--main-navy);  font-size:0.8em; padding:8px 12px 6px;}
#renewContainer .tabContWrap .tabCont .textArea .title {word-break: break-all; width:100%; font-size: 1.3em; font-weight: 700;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#renewContainer .tabContWrap .tabCont .textArea .text {width:100%; font-size:0.95em;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#renewContainer .tabContWrap .tabCont .textArea .directBtn {margin-left: auto; margin-top:10px;}

#renewContainer .jobWrap {width:100%; display: flex; align-items: flex-start; justify-content: space-between; gap:1em;}
#renewContainer .jobWrap .jobBox {width: auto; flex:1;}
#renewContainer .jobWrap .jobBox .imgArea {width:100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 0.5em;}
#renewContainer .jobWrap .jobBox .imgArea img {height: 100%; display: block; object-fit: none;  }
#renewContainer .jobWrap .jobBox .text {width: 100%; text-align: center; font-size: 0.95em; font-weight: 500;}
#renewContainer .jobWrap .jobBox.noImg {color: var(--main-navy); border-radius: 50%; aspect-ratio: 1; background-color: #fff; display: inline-flex; align-items: center; justify-content: center;}
#renewContainer .jobWrap .jobBox.noImg:hover {background-color: var(--main-navy); color: #fff;}
#renewContainer .jobWrap .jobBox.noImg .text {font-weight: 600; font-size:1.05em;}
#renewContainer .jobWrap .jobBox.noImg .text .icon {font-size:0.9em;}

#renewContainer .whiteWrap {position: relative; background-color: #fff; padding:1em ; border-radius: var(--radius-md); width: 100%; display: flex; align-items: center; justify-content: space-between; gap:1em;}
#renewContainer .whiteWrap .leftArea {width:auto; flex:1; display: inline-flex; align-items: center; justify-content: flex-start; gap:2em;}
#renewContainer .whiteWrap .leftArea .title { font-family: 'OneMobilePop';  font-weight: normal;  font-size: 1.2em; line-height: 1; color: var(--main-navy); position: relative; }
#renewContainer .whiteWrap .leftArea .title::after {content:''; display: inline-block; width:1px; height:14px; background-color: #ddd; position: absolute; bottom: 50%;  right: -1em; transform: translateY(50%); }
#renewContainer .whiteWrap .leftArea .sub {font-size: 0.9em; font-weight: 500;}
#renewContainer .whiteWrap .deco {position: absolute; top:-46px; left: 120px;}


/*sub*/
.renew2026 .secWrap {width:100%; margin: 0 auto; max-width:1200px;}
.renew2026 .secWrap .quick_link {margin-bottom:4rem;}
.renew2026 .secWrap .titleArea {width:100%; text-align:center; margin-bottom:4rem;}
.renew2026 .secWrap .titleArea .introMain {font-family: 'OneMobilePop'; color: #264e99;  font-weight: normal;  font-size:2.4em;}
.renew2026 .secWrap .titleArea .introSub {font-size:1.15em; color: #7b7b7b; font-weight:500;}
.renew2026 .secWrap .contWrap {width:100%; margin-bottom:10rem;}

.renew2026 .secWrap .contWrap .introduceWrap {width:100%; text-align:center;}
.renew2026 .secWrap .contWrap .introduceWrap .introTitle, .renew2026 .introduce1_content_text h6 {font-family: "pretendard GOV"; color: #7b7b7b; font-size:1.5em; margin-bottom:2rem;  font-weight: 600;  }
.renew2026 .secWrap .contWrap .introduceWrap .textArea, .renew2026 .introduce1_content_text p {color: #7b7b7b; font-size:1.1em; width:100%; text-align:center; margin-bottom:3rem;}

.renew2026 .introduce4_address h5, .renew2026 .introduce4_location_img h5 {font-family: 'OneMobilePop'; font-weight: normal;}
/*서브페이지 유튜브 영역 레이아웃 수정 시작*/
.renew2026 .together_box .s-l-board-thumnail:has(.h6) { }
.renew2026 .together_box .s-l-board-thumnail .h6::after {display: none;}
.renew2026 .together_box .s-l-board-thumnail:has(.h6) .h6::before { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; background-color:var(--main-blue); right: 50%; transform: translateX(50%); }
.renew2026 .together_box .s-l-board-thumnail .h5 {font-weight:600; line-height: 1.4;}
.renew2026 .together_box .s-l-board-thumnail .h6 , .renew2026 .together_box .s-l-board-thumnail>ul li a:hover .h6 {color: var(--main-blue);}
.renew2026 .together_box .s-l-board-thumnail ul li a:hover div {  background-color: #f3f6f9;}
.renew2026 .together_box .s-l-board-thumnail ul {display: flex;  flex-flow: row wrap;  align-items: stretch;  justify-content: flex-start;  gap: 2rem;}
.renew2026 .together_box .s-l-board-thumnail ul li {width: calc( ( 100% - 4rem ) / 3 ); margin: 0 !important;}
.renew2026 .together_box .s-l-board-thumnail ul li a {width: 100%; height: stretch; display: inline-flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start;}
.renew2026 .together_box .s-l-board-thumnail ul li a .thumnails {width:100%; padding-top:0; height:250px;}
.renew2026 .together_box .s-l-board-thumnail div {width:100%; }
.renew2026 .together_box .s-l-board-thumnail ul li a div {flex: 1; overflow: hidden;}
/*서브페이지 유튜브 영역 레이아웃 수정 끝*/
.renew2026 .nav-tabs.together_tab .nav-link:hover, .renew2026 .nav-tabs.together_tab .nav-link.active {background-color: var(--main-blue);}








@media only screen and (max-width:1440px){
  .renew2026 .krds-modal .modal-dialog .btn-close { width: 3rem !important;  height: auto!important;  aspect-ratio: 1!important;}
  .renew2026.modal-wrap .modal-dialog .modal-content {padding:10% 2.5vw;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .modal-title {font-size:30px;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container button {font-size:18px;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li a {font-size:18px;}

  #renewContainer .section.no4 {min-height:unset;}

}


@media only screen and (max-width: 1280px){
  #renewContainer {font-size:16px;}
  #renewContainer .section .widthWrap {min-height:unset; max-width:95vw;}
  #renewContainer .section.no3 {background-position: center right 33%;}
  #renewContainer .section.no4 {background-position: center left 25%;}

  #renewContainer .introWrap {gap:80px; padding: 1.5em;}

  .renew2026 .secWrap {max-width:90vw;}

}

@media only screen and (max-width: 1024px){
  #renewContainer {padding-top:102.5px;}

  #renewContainer .introWrap .leftArea {width:40%;}
  #renewContainer .introWrap .leftArea .top .sub {word-break: keep-all; text-align: left;}
  #renewContainer .introWrap .leftArea .top .sub br {display:none;}
  #renewContainer .introWrap .rightArea {gap:1.5em;}
  #renewContainer .introWrap .rightArea .introBtn .img {width:120px; height:120px;}
  #renewContainer .introWrap .rightArea .introBtn .img img {max-height: 50px;}

  #renewContainer .section .secDeco {display:inline-block; position:absolute;}
  #renewContainer .section.no1 .secDeco {bottom:1vh; right:1vw;}
  #renewContainer .section.no1 .secDeco img {max-width: 140px;}
  #renewContainer .section.no3 .secDeco {bottom:1vh; right:1vw;}
  #renewContainer .section.no3 .secDeco img {max-width: 100px;}
  #renewContainer .section.no4 .secDeco {display: none;}

}



/*기존 구축에 따른 브레이크 포인트*/
@media only screen and (max-width: 992px){
  #header.renew .container .navigation {padding: 0 2.5vw; max-width: 100vw; display: flex; flex-flow: row nowrap; 	align-items: center; justify-content: space-between; width: 100% !important; float: unset !important;}
  #header.renew .container .navigation .holder .scroller {}
  #header.renew .container .navigation .holder .scroller div > nav> ul {height: fit-content; width: 100%; flex-flow: column nowrap; align-items: center; justify-content: flex-start;}
  #header.renew .container .navigation .holder .scroller div > nav> ul>li { flex: unset; width: 100% !important;}
  #header.renew .container .pc_logo_box {width:auto; order:1; border-bottom:none;}
  #header.renew .container .pc_logo_box .logoArea {}
  #header.renew .container .pc_logo_box .logoArea .logo {position:unset;margin-left: unset; width: unset;}
  #header.renew .container .pc_logo_box .logoArea .logo img {max-width: 200px;}
  #header.renew .container .navigation button.nav-on {position:unset;}
  #header.renew .container .navigation button.nav-on {order:2;}
  #header.renew .holder .menu_box {max-width:100%; padding:0 2.5vw;}
}


@media only screen and (max-width: 890px){
  .headerWrap #krds-header .header-container .logo a { width: 11rem;}
  .headerWrap #krds-header .header-container .logo .text { font-size: 18px;}

  .renew2026.modal-wrap .modal-dialog .modal-content {padding: 10%;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container button {font-size: 16px; width: calc((100% - 40px) / 3);}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li {font-size: 15px; width: calc((100% - 40px) / 3);}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .modal-title {font-size: 30px;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li a {font-size:18px;}

  .visualWrap {min-height:320px; font-size:16px;}

  .renew2026 .secWrap {font-size:14px;}

  .renew2026 .together_box .s-l-board-thumnail ul {gap: 1.5rem;}
  .renew2026 .together_box .s-l-board-thumnail ul li {width: calc( ( 100% - 1.5rem ) / 2 );}
  .renew2026 .together_box .s-l-board-thumnail ul li a .thumnails {height:auto; aspect-ratio: 1;}
}

@media only screen and (max-width: 768px){
  :root {
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --radius-xs: 4px;
  }

  .directBtn {font-size:12px;}

  #renewContainer {font-size:15px; padding-top:99.5px;}
  #renewContainer .section.no3 .secDeco img {max-width: 80px;}
  #renewContainer .section.no4 {background-position: center left 28%;}
  #renewContainer .section.no4 .secDeco {display: inline-block; bottom: 4vh; left: 30vw;}
  #renewContainer .section.no4 .secDeco img {max-width: 120px;}

  #renewContainer .introWrap {  gap:2em;}
  #renewContainer .introWrap .leftArea {width:auto;}
  #renewContainer .introWrap .leftArea .top .sub {word-break: break-all; text-align: justify;}
  #renewContainer .introWrap .leftArea .top .sub br {display: block;}
  #renewContainer .introWrap .leftArea .bot {margin-top:1em;}
  #renewContainer .introWrap .rightArea {gap:1em;}
  #renewContainer .introWrap .rightArea .introBtn .img { width: 90px;  height: 90px;  }
  #renewContainer .introWrap .rightArea .introBtn .img img {max-height: 40px;}
  #renewContainer .introWrap .rightArea .introBtn .text br {display: block;}

  #renewContainer .tubeWrap {flex-flow: row wrap;}
  #renewContainer .tubeWrap .deco {top:-58px;}
  #renewContainer .tubeWrap .deco img {max-height: 60px;}
  #renewContainer .tubeWrap .tubeBox {flex: unset; width: calc( ( 100% - 1em ) / 2 );}
  #renewContainer .tubeWrap .tubeBox .imgArea { aspect-ratio: 16 / 9;}

  #renewContainer .jobWrap {flex-flow: row wrap;}
  #renewContainer .jobWrap .jobBox {flex:unset; width: calc( ( 100% - 3em ) / 4 );}


}

@media only screen and (max-width: 550px){
  .visualWrap {font-size:14px; min-height:300px;}
  .visualWrap.no1 {background-position-x: -440px; }
  .visualWrap.no5 {    background-position-x: -530px; }
  .visualWrap .titleArea .subTitle {font-size: 1em;}
  .visualWrap .mobileDeco {display:inline-block; position:absolute; bottom:0;}
  .visualWrap.no1 .mobileDeco { right:10px;}
  .visualWrap.no2 .mobileDeco {right:10px;}
  .visualWrap.no3 .mobileDeco {right:10px;}
  .visualWrap.no4 .mobileDeco {left:10px;}
  .visualWrap.no5 .mobileDeco {left:10px;}
  .visualWrap .mobileDeco img {max-height: 100px; }

  .headerWrap #krds-header .header-container .logo a { width: 94px; height: 36px;}
  .headerWrap #krds-header .header-container .logo .text {font-size:16px;}

  .renew2026 .krds-modal .modal-dialog .btn-close {top:6% !important;}
  .renew2026 .krds-modal:not([data-type=bottom-sheet]) .modal-dialog .modal-conts {padding-inline:0;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header {margin-bottom: 1em; padding: 5rem 0 0;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container {gap: 10px;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .modal-title {   font-size: 24px; margin-bottom:20px; }
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .modal-title::after {display:none;}
  .renew2026.modal-wrap .modal-dialog .modal-content {padding: 10% 2.5vw;}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-header .tab-container button {font-size: 15px; width: calc((100% - 10px) / 2);}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li {font-size: 16px; width: calc((100% - 20px) / 2);}
  .renew2026.modal-wrap .modal-dialog .modal-content .modal-conts .pop-foot-links li a {  font-size: 16px;}

  #renewContainer .topBtn { right: 10px;  bottom: 14px; }
  #renewContainer .topBtn img {    max-width: 50px;}
  #renewContainer .topBtn .text {width:50px; height: 50px;font-size:12px; }

  #renewContainer .section {padding:60px 0;}
  #renewContainer .section.no1 .secDeco img { max-width: 100px;}
  #renewContainer .section.no3 .secDeco {right: unset; left: 1vw;}
  #renewContainer .section.no3 .secDeco img {  max-width: 70px; transform: rotateY(180deg);}
  #renewContainer .section.no4 { background-position: center left 24%;}
  #renewContainer .section.no4 .secDeco {  left: 52vw;}

  #renewContainer .introWrap {flex-direction: column;}
  #renewContainer .introWrap .leftArea .top .title, #renewContainer .introWrap .leftArea .top .sub, #renewContainer .introWrap .leftArea .bot {text-align: center;}
  #renewContainer .introWrap .leftArea .top .sub {word-break: keep-all;}
  #renewContainer .introWrap .rightArea { flex-direction: row;  width: 100%;  justify-content: space-around;}
  #renewContainer .introWrap .rightArea .introBtn { gap:0.5em; flex-direction: column;display: inline-flex; align-items: center; justify-content: center; gap:0.5em; width: 100%; }
  #renewContainer .introWrap .rightArea .introBtn .img {width: 90px; aspect-ratio: 1; height: unset; margin-bottom:0;}
  #renewContainer .introWrap .rightArea .introBtn .img img {max-height: 40px;}
  #renewContainer .introWrap .rightArea .introBtn .text {word-break: keep-all; text-align: center; line-height: 1.3;}
  #renewContainer .introWrap .rightArea .introBtn .text br {display: block;}

  #renewContainer .tabContWrap .tabCont {flex-flow: column nowrap;}
  #renewContainer .tabContWrap .tabCont .imgArea {width:100%; height: unset; aspect-ratio: 16/9;}
  #renewContainer .tabBtnWrap {gap:0.5em;}

  #renewContainer .whiteWrap {flex-direction: column;}
  #renewContainer .whiteWrap .leftArea {flex-direction: column; width: 100%; flex:unset; gap:0.5em;}
  #renewContainer .whiteWrap .leftArea .title {width:100%; text-align: left;}
  #renewContainer .whiteWrap .leftArea .title::after {display: none;}
  #renewContainer .whiteWrap .leftArea .sub {width:100%; text-align: left;}
  #renewContainer .whiteWrap .directBtn {margin-left: auto;}
  #renewContainer .whiteWrap .deco {left: unset; right:2%;}

  #renewContainer .tubeWrap .deco {top:-48px;}
  #renewContainer .tubeWrap .deco img {max-height: 50px;}

  .renew2026 .secWrap {font-size:12px;}
  .renew2026 .secWrap .quick_link {text-align: center;}
  .renew2026 .secWrap .contWrap .introduceWrap .textArea br {display: none;}

  .renew2026 .together_box .s-l-board-thumnail .h6 {font-size:14px;}
  .renew2026 .together_box .s-l-board-thumnail .h5 {font-size:17px;}
  .renew2026 .together_box .s-l-board-thumnail .p {font-size:14px; margin:0;}
  .renew2026 .together_box .s-l-board-thumnail ul li a div {min-height: unset;}
}

@media only screen and (max-width: 425px){
  #renewContainer .tabBtnWrap .tabBtn .icon img {max-height: 16px;}

}


@media only screen and (max-width: 375px){
  .headerWrap #krds-header .header-container .logo a {width: 80px; height: 31px;}
  .headerWrap #krds-header .header-container .logo .text {font-size:14px;}

  #renewContainer .introWrap .rightArea .introBtn .img {width: 70px;}
  #renewContainer .introWrap .rightArea .introBtn .img img {max-height:30px;}

  #renewContainer .tabBtnWrap .tabBtn .icon img {}

  #renewContainer .jobWrap .jobBox .text {line-height: 1.3;}
  #renewContainer .jobWrap .jobBox.noImg .text {font-size: 0.95em;}
}

@media only screen and (max-width: 320px){
  .visualWrap .mobileDeco img {max-height: 80px; }

  #renewContainer .introWrap .rightArea {justify-content: space-between;}
}