@charset "utf-8"; 
/* reset.css  있음 나중에 삭제 */
@font-face{
	font-family:'SangSangBodyM';
	font-style:normal;
	font-weight:normal;
	src: url('./fonts/SangSangBodyM');
	src:url('./fonts/SangSangBodyM.eot');
	src:local('?'), url('./fonts/SangSangBodyM.woff') format('woff'), url('./fonts/SangSangBodyM.ttf') format('truetype');
}
@font-face{
	font-family:'SangSangBodyL';
	font-style:normal;
	font-weight:normal;
	src: url('./fonts/SangSangBodyL');
	src:url('./fonts/SangSangBodyL.eot');
	src:local('?'), url('./fonts/SangSangBodyL.woff') format('woff');
}
@font-face{
	font-family:'SangSangTitleM';
	font-style:normal;
	font-weight:normal;
	src: url('./fonts/SangSangTitleM');
	src:url('./fonts/SangSangTitleM.eot');
	src:local('?'), url('./fonts/SangSangTitleM.woff') format('woff'), url('./fonts/SangSangTitleM.ttf') format('truetype');
}
@font-face{
	font-family:'SangSangTitleB';
	font-style:normal;
	font-weight:normal;
	src:url('./fonts/SangSangTitleB.eot');
	src:local('?'), url('./fonts/SangSangTitleB.woff') format('woff'), url('./fonts/SangSangTitleB.ttf') format('truetype');
}
/* // 나중에 삭제 */

/*fonts*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

* {margin:0; padding:0; -webkit-text-size-adjust:none;}
/* html {overflow-y:scroll;} */
html, body {height:100%; min-height:100%;}
body, select, textarea, input {font-family: "Pretendard", sans-serif; color:#222; border:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object, textarea, a, img {padding: 0; margin: 0;}
table {border-collapse:collapse; border-spacing:0;}
table img {vertical-align:middle;}
select, input, table tr td, table tr th {vertical-align:middle;}
form, fieldset, abbr, acronym {border:0;}
img {border:0; vertical-align:top;}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, th, var {font-weight:normal; font-style:normal;}
ol, ul, li {list-style:none;}
table td a {display:inline-block;}
table caption {display:none;}
a {text-decoration:none;}
input[type="image"] {vertical-align:top;}


 #skipNav{position:relative;width:100%;overflow:hidden;}
 #skipNav a{display:block; height:1px; margin-bottom:-1px; 
      overflow:hidden; text-align:center; text-decoration:none; color:#fff; font-size:12px;}
 #skipNav a:hover,#skipNav a:focus,#skipNav a:active{
     display:block;height:auto;padding:10px 0; background:none repeat scroll 0 0 #666;}

/*min-width: 1760px;*/
#wrapper {
  /*min-width: 1440px;*/
  overflow: hidden;
}

.main {
  font-family: "Pretendard", sans-serif;
}

#container {
  padding: 0 40px;
  /*overflow: hidden;*/
}

/*
.visual_box {
  width: 1760px;
  height: 860px;
  margin: 0 auto;
}
*/

.main_cont {
  /*margin: 0 40px;*/
  position: relative;
  /* z-index: 1; */
}
/* 메인 개선*/
.visual {
  width: 100%;
}
.visual.main-new-visual{position:relative; }
.visual-inner {
  max-width: 1760px;
  height: 802px;
  margin: 0 auto;
  position: relative;
}
.visual .slide_inr .img {
  position: relative;
  z-index: 1;
  transition: transform 5s 1s;
}
.visual .slide_inr .img img {
  margin: 0;
  padding: 0;
}

.visual .swiper-slide {
  overflow: hidden;
}
.swiper-slide-active .slide_inr .img img {
  transform:scale(1.05);
	transition: transform 5s 1s;
}
/* .swiper-slide .slide_inr .img img {
  transform: scale(1.05);
  transition: transform 5s 1s;
}
.swiper-slide-active .slide_inr .img img {
  will-change: transform, opacity;
  transition: transform 3s;
  transform: scale(1);
} */

.visual .swiper-slide{background-repeat:no-repeat;background-position:0 0;background-size:cover;width: 1760px; height: 802px;}
/*.visual .swiper-slide{height:802px;margin-left:0px;} */
.visual .slide_inr {max-width: 1760px; height:802px; position: relative; width:100%;}
.visual .slide-txt{position:absolute;top:50%;left:160px;font-size:40px;font-weight: normal;color:#fff;transform:translateY(-50%);}
.visual .slide-txt strong{display:block;margin:20px 0 60px;font-size:70px;font-weight:bold;color:#fff; line-height: 1.23;}
.visual .slide-txt .view-more, .visual .swiper-new-top .slide-txt .view-whitepaper{color:#fff;font-size:20px; padding: 20px 32px;  border:1px solid #fff; display: inline-block; font-weight: normal;}
.visual .slide-txt .view-whitepaper:after {margin-top: -5px;}
.visual.main-new-visual .swiper-container-horizontal>.swiper-pagination-bullets, .visual.main-new-visual .swiper-pagination-custom, .visual.main-new-visual .swiper-pagination-fraction {text-align: center;width: 100%;}
.visual.main-new-visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin :0; margin-right: 16px;}
.visual.main-new-visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:last-child {margin-right: 0;}
.visual.main-new-visual .swiper-pagination-bullet { position: relative;width: 336px;height: auto; text-align: left;border-radius: 20px;opacity: 1;margin-right: 20px;background-color: transparent;}

.visual.main-new-visual .swiper-pagination-bullet em {font-size: 15px; line-height: 28px;	font-weight: bold;	letter-spacing: -0.38px; color: #fff;}
.visual.main-new-visual .swiper-pagination-bullet i { position: absolute;bottom: 0;left: 0; z-index: 1; width: 100%;height: 3px; background-color: #fff;opacity: 0.2; display: block;}
.visual.main-new-visual .swiper-pagination-bullet b { position: absolute; bottom: 0; left: 0; z-index: 2; width: 0%; height: 3px;background-color: #fff;}
.visual.main-new-visual .swiper-pagination-bullet-active { background-color: transparent;}
.visual.main-new-visual .swiper-pagination-bullet-active b {  
    animation-name: swBar; animation-duration: 5s;animation-timing-function: ease-in;animation-iteration-count: 1;animation-direction: alternate; animation-fill-mode:forwards;
}

.control-area {position: absolute; display: flex;   position: absolute;  bottom:40px;  z-index: 11; max-width: 1920px;justify-content: center;width: 100%;}/*left:90px;*/
.control-area .sw-pagination { display: flex; justify-content: center; align-items: center;}
.visual.main-new-visual .swiper-pagination-bullet {background: #fff;opacity: 0.3; height: 3px; }
@keyframes swBar {
    0% {width: 0;}
    100% {width:100%;}
}

.main-visual-container {
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
}
/*
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin :0;
  margin-right: 32px;
}
*/
.main-visual-container .swiper-pagination-bullet {
  position: relative;
  width: 336px;
  height: auto;
  text-align: left;
  border-radius: 20px;
  opacity: 1;
  margin-right: 32px;
  background-color: transparent;
}
.main-visual-container .swiper-pagination-bullet em {
  color: #111;
}
.main-visual-container .swiper-pagination-bullet  i {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, .3);
}
.main-visual-container .swiper-pagination-bullet b {
  position: absolute;
  bottom: 0;
  left:  0;
  z-index: 2;
  width: 0%;
  height: 3px;
  /*background-color: rgba(17, 17, 17, 1);*/
  background-color: rgba(255, 255, 255, 1);
}

.visual .swiper-pagination-bullet-active {
  background-color: transparent;
  b {  
      animation-name: countingBar;
      animation-duration: 5s;
      animation-timing-function: ease-in;
      animation-iteration-count: 1;
      animation-direction: alternate ;
      animation-fill-mode:forwards;
  }
}

/* 개발 소스 삽입 후 에러 재설정*/
.visual {
  position: relative;
}
/*
.main-visual-container .swiper-pagination.new-swiper {
  height: 4px;
  z-index: 11;
  bottom:60px;
}
.main-visual-container .new-swiper.swiper-pagination {
  height: 4px;
  margin-top: 0;
  padding-top: 0;
}
.main-visual-container .new-swiper .swiper-pagination-bullet {
  height: 4px;
  background-color: rgba(255, 255, 255, .3);
  margin-top: 0;
  padding-top: 0;
}
.main-visual-container .new-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: rgba(255, 255, 255, 1);}
*/
#container{
	position:relative;
}
#container.main_wrap{
	background:#fff;
    padding: 0;
}
#container .visual_wrap {
  max-width: 1760px;
  height: 802px;
  margin: 0 auto;
  position: relative;
  
}
#container .visual_wrap > div{
	margin:0 auto;
	text-align:center;
  overflow: hidden;
  border-radius: 30px;
}
#container .visual_wrap > div .swiper-wrapper {
}
#container .visual_wrap .rotation{
	position:absolute;
	top:0;
	left:50%;
	width:600px;
	height:666px;
	transform:translate(-9%,0);
	z-index:1;
}
#container .visual_wrap .rotation img{
	position:absolute;
	top:160px;
	right:50px;
	animation: rotate_image 9s linear infinite;
	transform-origin:50% 50%;
}
@keyframes rotate_image{
    100% {
        transform: rotate(-360deg);
    }
}
#container .visual_wrap .main_slider{
	position:relative;
}
#container .visual_wrap .main_slider .swiper-slide a{
	display:block;
}
#container .visual_wrap .main_slider .swiper-slide a .txt_box{
	position:absolute;
	top:250px;
	left:50%;
	width:1200px;
	text-align:left;
	transform:translate(-50%,0);
}
#container .visual_wrap .main_slider .swiper-slide a .txt_box p{
	font-family:'SangSangTitleB';
	font-size:70px;
	color:#000;
}
#container .visual_wrap .main_slider .swiper-slide a .txt_box span{
	display:block;
	margin-top:80px;
	font-family:'SangSangBodyM';
	font-size:24px;
	color:#000;
	line-height:1.5;
}
	/*
  transform:scale(1.03);
	transition: all 5s;
  */
#container .visual_wrap .main_slider .swiper-slide-active a img{
  transform:scale(1.02);
	transition: transform 5s 1s;
}
#container .visual_wrap .main_slider .indi_box{
	position:absolute;
	left:70px;
	bottom:86px;
	width: 142px;
    height: 48px;
    padding: 15px 8px;
    text-align: right;
	background:rgba(0,0,0,0.3);
	border-radius:24px;
	box-sizing: border-box;
	z-index:10;
}
#container .visual_wrap .main_slider .indi_box .swiper-pagination-bullet{
	width:18px;
	height:18px;
}
#container .visual_wrap .main_slider .indi_box .swiper-pagination-bullet{
	width:18px;
	height:18px;
	margin: 0 12px;
	background:rgba(255,255,255,0.4);
}
#container .visual_wrap .main_slider .indi_box .swiper-pagination-bullet-active{
	background:rgba(255,255,255,1);
}
#container .visual_wrap .stop_btn,
#container .visual_wrap .play_btn{
	position:absolute;
	left: 60px;
    bottom: 98px;
	width:24px;
	height:24px;
	z-index:11;
	cursor:pointer;
}
#container .visual_wrap .play_btn{
	display: none;
}
#container .visual_wrap .play_btn.on{
	display: block;
}
#container .visual_wrap .stop_btn.on{
	display: block;
}
#container .visual_wrap .stop_btn.off{
	display: none;
}

.visual_wrap .swiper-pagination{
	bottom:40px;
}
.visual_wrap .swiper-pagination-bullet {
  margin-left:10px;
  width: 336px;;
  height: 3px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  background-color: rgba(255, 255, 255, .3);
}
.visual_wrap .swiper-pagination-bullet:first-child{
	margin-left:0;
}
.visual_wrap .swiper-pagination-bullet::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*

.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255);
}
.swiper-pagination-bullet-active::before {
  background-color:#000;
  -webkit-animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
          animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.swiper-paused .swiper-pagination-bullet-active::before {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@-webkit-keyframes slide-progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
*/
/* white ver*/
.visual_wrap .swiper-pagination-bullet::before {
  background-color: rgba(255, 255, 255, .5);
}

.visual_wrap .swiper-pagination-bullet-active::before {
  opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  animation-name: countingBar;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-direction: alternate ;
  animation-fill-mode:forwards;
}
/*// white ver*/
.pagination_container{
	position:absolute;
	width:1400px;
	height:0;
	left:50%;
	bottom:0;
	transform:translate(-50%, 0);
	z-index:1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-pagination2{
	position:absolute;
	left:0;
	bottom:102px;
	text-align:left;
	font-family:'SangSangBodyM';
	font-size:20px;
}

/*// 재수정 */
@keyframes countingBar {
  0% {width: 0;}
  100% {width:100%;}
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 160px;
  transform: translateY(-50%);
  color: #fff;
  z-index: 2;
}
/*font-family: "KT&G SangSangTitle", sans-serif;*/
.slide-content h2 {
  font-family:'SangSangTitleM', sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-bottom: 24px;
}
.slide-content p {
  font-size: 24px;
  font-weight: 600;
  line-height: 140%;
  color: #fff;
  font-family: "Pretendard", sans-serif;
}
.slide-content h2,
.slide-content p {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 1s ease, transform 1s ease;
}

.swiper-slide-active .slide-content h2,
.swiper-slide-active .slide-content p {
  opacity: 1;
  transform: translateY(0);
}

.swiper-slide-active .slide-content p {
  transition-delay: 0.3s;
}

/*컨텐츠 1440px*/
.contbox-ty1 {
  max-width: 1440px;
  margin: 0 auto;
  font-family:'SangSangTitleM', sans-serif;
  position: relative;
}
.contbox-ty1 .tr {
  position: relative;
  overflow: hidden;
}
.cont_ty1 {
  padding: 130px 0;
}
.cont_ty2 {
  padding: 100px 0;
}
/*font-family:'SangSangTitleM', sans-serif;*/

/*재단사무처*/
.title-ty1 {
  display: flex;
  flex-direction: column;
}
.title-ty1-mb {
  margin-bottom: 40px;
}
/*font-family: "KT&G SangSangTitle", sans-serif;font-family:'SangSangBodyM', sans-serif;*/
.title-ty1 p {
  font-size: 24px;
  font-weight: 400;
  line-height: 100%;
  font-family:'SangSangTitleB', sans-serif;
}
.title-ty1 p.color-id-ty1 {
  color: #1CA8E0;
}
.title-ty1 p.color-id-ty2 {
  color: #F7941D;
}
.title-ty1 p.color-id-ty3 {
  color: #8FC940;
}
.title-ty1 p.color-id-ty4 {
  color: #F25D22;
}

.title-ty1 h3 {
  color: #000;
  font-size: 42px;
  font-weight: 400;
  line-height: 140%; 
  letter-spacing: -0.92px;
  font-family:'SangSangTitleB', sans-serif;
  margin-top: 4px;
}

/*margin-top: 80px;*/
.ulbox-ty1 {
  display: flex;
  gap: 20px;
  
}
.ulbox-ty1 .li {
 /* width: 710px;*/
  /*height: 110px;*/
  flex: 1;
}
/*background: #F5F5F5;*/
.ulbox-ty1 .li > a {
  display: block;
  border-radius: 16px;
  border: 1px solid #D9D9D9;
  
  padding: 0 50px;
  position: relative;
}
.ulbox-ty1 .li > a:hover {
  border: 1px solid #1CA8E0;
  background: #1CA8E0;
}
.ulbox-ty1 .li > a:hover .text-wrap .txt-box .tit-1 {
  color: #fff;
}
.ulbox-ty1 .li > a:hover .text-wrap .txt-box .txt-1 {
  color: #fff;
}
.ulbox-ty1 .li > a .text-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 140px;
}
.ulbox-ty1 .li > a .text-wrap .txt-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Pretendard", sans-serif;
}
.ulbox-ty1 .li > a .text-wrap .txt-box .tit-1 {
  color: #222;
  font-size: 30px;
  font-weight: 600;
  line-height: 100%;
}
/*font-family:'SangSangBodyL', sans-serif;*/
.ulbox-ty1 .li > a .text-wrap .txt-box .txt-1 {
  color: #444;
  font-size: 18px;
  
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.4px;
}
.ulbox-ty1 .li > a .text-wrap .btn-a span {
  position: relative;
  z-index: 2;
}
.ulbox-ty1 .li > a .text-wrap .btn-bg-a {
  position: absolute;
  bottom: 0;
  right:80px;
  z-index: 1;
}
.ulbox-ty1 .li.n2 > a .text-wrap .btn-bg-a {
  right:80px;
}
/*자원봉사센터(&터)*/
/*background-color: #F8F7F5;
background: #D9D9D9;
*/
.contbox-full-gray-ty1 {
  background-color: #F8F7F5;
  margin: 0 -40px;
  /*
  background: #D9D9D9;
  background: rgba(217,217,217, 1);
  */
}
/*overflow: hidden;*/
.contbox-full-gray-ty1 .contbox-ty1 {
  padding: 130px 40px;
  
}

.sec2 {
  padding: 150px 0;
}

.flex-cont {
  display: flex;
  flex-direction: column;
  gap: 104px;
}
.flex-cont-ty2 {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.flex-cont-ty3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 353px;
  position: relative;
  z-index: 3;
}
.flex-ty1 {
  display: flex;
  gap: 48px;
}
.flex-ty1 .box-1 {
  max-width: 696px;
}

.title-ty2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-family: 'Pretendard', sans-serif;
}
.title-ty2 h4 {
  color: #222;
  font-size: 30px;
  font-weight: 600;
  line-height: 100%;
}
.title-ty2 .btn-alink {
  display: flex;
  align-items: center;
  gap: 10px;
  
}
.title-ty2 .btn-alink span {
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;

}
.title-ty2 .btn-alink img {
  width: 22px;
}

/*프로그램 신청*/
.list-ty1 {
  width: 696px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.list-ty1 li {
  width: 338px;
  height: 240px;
}
.list-ty1 li a {
  display: block;
  border-radius: 16px;
  border: 1px solid #D9D9D9;
  background: #FFF;
  color: #222;
  height: 208px;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  gap: 16px;
  padding: 0 30px 30px 30px;
  font-family: 'Pretendard', sans-serif;
  
}
.list-ty1 li a:hover {
  background: #F7941D;
}
.list-ty1 li a:hover span {
  color: #F7941D;
  background-color: #fff;
}
.list-ty1 li a:hover span.off {
  background-color: #fff;
}

.list-ty1 li a:hover p {
  color: #fff;
}

.list-ty1 li a > span {
  display: inline-flex;
  padding: 10px 14px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background: #F7941D;

  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;

  margin-top: 41px;
}
.list-ty1 li a > span.off {
  background: #7B7B7B;
}
.list-ty1 li a p {
  color: #222;
  font-size: 21px;
  font-weight: 500;
  line-height: 130%; 
  letter-spacing: -0.42px;

  overflow : hidden;   
  text-overflow: ellipsis;    
  display: -webkit-box;    
  -webkit-line-clamp: 4;    
  -webkit-box-orient: vertical;
  word-break: keep-all;
}

/*협력동아리*/
.club-box {
  max-width: 696px;
  height: 362px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.club-box img {
  position: relative;
  z-index: 1;
  /*max-width: 100%;*/
}
.club-box .text-box {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #FFF;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 380px;
  white-space: nowrap;
}
/*font-family:'SangSangBodyL', sans-serif;*/
.club-box .text-box p {
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  width: 366px;
}
.club-box .text-box a {
  font-family: 'Pretendard', sans-serif;
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;

  display: inline-flex;
  padding: 24px 0px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border: 1px solid #FFF;
  backdrop-filter: blur(15px);
  text-align: center;
  width: 228px;
  margin: 0 auto;
}

.sns-wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ul-sns {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-shrink: 0;
  justify-content: space-between;
  max-width: 696px;
  height: 90px;
  padding: 0 16px;
  border-top: 2px solid #D9D9D9;
}
.ul-sns .sns-title {
  color: #222;
  font-family: 'Pretendard', sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; 
}
/*  flex: 1;*/
.ul-sns .sns-icon-box {

  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.ul-sns ul li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #222;
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%; 
}
.sns-list {
  display: flex;
  /*justify-content: space-between;*/
  justify-content: flex-end;
  align-items: center;
  flex: 1 0 0;
  gap: 40px;
}
.sns-list li {
  flex:0;
}

.youtube-wrap {
  display: flex;
  justify-content: space-between;
}
.youtube-wrap .n1 {
  flex: 1;
  height: 417px;
}
.youtube-wrap .n2 {
  margin-left: 114px;
  width: 219px;
  height: 417px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 36px;
  font-family: 'Pretendard', sans-serif;
}
.youtube-wrap .n2 .t1 {
  color: #222;
  font-size: 36px;
  font-weight: 600;
  line-height: 100%; 
}
.youtube-wrap .n2 a {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}



/*&터 활동 스토리*/
.contbox-full-gray-ty2 {
  background: #EFECE5;
}


/* 레이아웃 */
.youtube-layout {
  width: 100%;
  display: flex;
  gap: 20px;
}

.youtube-play-box {
  width: 981px;
  height: 417px;
}
/*&터 활동 스토리*/
.main-swiper {
  width: 742px;
  height: 417px;
  overflow: hidden;
}

.main-swiper .youtube-inner {
  width: 742px;
  height: 417px;
  overflow: hidden;
  border-radius: 30px;
}

.main-swiper img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
}

/*작은 썸네일*/
.thumbs-wrap {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.thumbs-wrap .swiper-container-vertical>.swiper-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  height: 417px;
}
.thumbs-wrap .thumbs-swiper {
  /*width: 219px;*/
  width: 170px;
  height: 417px;
}
.thumbs-wrap .thumbs-swiper .swiper-wrapper .swiper-slide {
  /*height: 123px;*/
  height: 132px;
}
.thumbs-wrap .thumbs-swiper img {
  max-width: 100%;
  /*height: 123px;*/
  height: 132px;
  border-radius: 8px;
  cursor: pointer;
}

.thumb-title {
  flex: 1;
  height: 417px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*align-items: center;*/
  font-family: 'Pretendard', sans-serif;
}
.thumb-title > div {
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin-left: 90px;
}
/*font-size: 36px;*/
.thumb-title h3 {
  color: #222;
  font-size: 30px;
  font-weight: 600;
  line-height: 100%;
}
.more-btn {
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Pretendard', sans-serif;
}
.img-abs-right {
  position: absolute;
  bottom: 0;
  /*right: -208px;*/
  right: -100px;
}

.img-welfare {
  position: absolute;
  bottom: 0;
}
/*left: -243px;*/
.img-welfare.--left {
  width: 279px;
  height: 195px;
  left: -203px;
}
/*-232px*/
.img-welfare.--right {
  width: 184px;
  height: 182px;
  right: -192px;
}
/* 팝업 스타일 */
.video-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
}

.popup-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; max-width: 800px;
}

.popup-content iframe {
  width: 100%;
  height: 450px;
  border-radius: 8px;
}

.popup-close {
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}


/*메인 영상 팝업*/
.layer_box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  text-align: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /*background-color: #00000080;*/
  transition: opacity .35s linear;
  z-index:100;
  
}
.layer_box::after {
  content: '';
  clear: both;
  display: block;
  position: absolute;
  left:0; top:0; right:0; bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000;
  opacity: 0.5;
}
/*display: block; position:absolute;left:50%; top: 86px;margin-left:-426px;*/

.video_pop_inner {
  width:853px;height:630px;border:solid 2px #000;background:#000;box-shadow:#555 3px 3px 10px 0px;
  position:absolute;left:50%; top: 86px; transform: translateX(-50%); z-index: 2;
}
.video_pop_inner .frame {
  width: 853px;
  height: 480px;
}
.video_pop_inner .btn_close_videopop{position:absolute;display:block;top:0;right:-37px;width:35px;height:35px;text-indent:-9999px;background:url('/rs/images/main-renewal/button_close_video.gif') 0 0 no-repeat;}
.video_pop_inner .video_text{overflow:auto;width:853px;height:150px;margin-top:-2px;background-color:#182225}
.video_pop_inner .video_text div {margin:20px;}
.video_pop_inner .video_text div p{padding:5px 0;font-size:13px;line-height:1.8em;color:#aaa; text-align: left;}



.video_pop_box {z-index:100;display:none;position:fixed;left:50%;width:853px;height:630px;margin-left:-426px;border:solid 2px #000;background:#000;box-shadow:#555 3px 3px 10px 0px}
.video_pop_box .btn_close_videopop{position:absolute;display:block;top:0;right:-37px;width:35px;height:35px;text-indent:-9999px;background:url('/rs/images/main/btn_close_video.gif') 0 0 no-repeat;}
.video_pop_box .video_text{overflow:auto;width:853px;height:150px;margin-top:-2px;background-color:#182225}
.video_pop_box .video_text div {margin:20px;}
.video_pop_box .video_text div p{padding:5px 0;font-size:13px;line-height:1.8em;color:#aaa}

.black_opacity_new {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  background: #000;
  opacity: 0.5;
  top: 92.5px;
}
.black_opacity_new {
    z-index: 98;
}

/*지역별복지센터*/
.contbox-full-green-ty1 {
  background: #EFF8E5 url('/rs/images/main-renewal/bg-pattern-green.png') repeat-x 0 0;
  margin: 0 -40px;
}
.contbox-full-green-ty1 .contbox-ty1 {
  padding: 130px 40px;
}
.welfare-center-list {
  max-width: 1440px;
  display: flex;
  justify-content: space-between;
  /*gap: 39px;*/
}
.welfare-center-list a {
  display: flex;
  width: 146px;
  height: 146px;
  padding: 0px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  font-family: 'Pretendard', sans-serif;
  color: #444;
  border-radius: 999px;
  border: 1px solid #D9D9D9;
  background: #FFF;
}

.welfare-center-list a h4 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.48px;
}
.welfare-center-list a p {
  font-size: 18px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.36px;
}

.welfare-center-list a:hover {
  border-radius: 999px;
  background: #8FC940;
  color: #fff;
}
.welfare-center-list a:hover h4, .welfare-center-list a:hover p {
  color: #fff;
}


/*후원*/
/*#D9D9D9*/
.contbox-full-gray-ty3 {
  position: relative;
  height: 353px;
  /*background: url('/rs/images/main-renewal/img-bg-boost.png') lightgray -2.655px -65.946px / 100.043% 117.954% no-repeat;*/
  overflow: hidden;
  z-index: 1;
  margin: 0 -40px;
}
.contbox-full-gray-ty3::before {
  content: '';
  clear: both;
  display: block;
  width: 100%;
  height: 353px;
  opacity: 0.63;
  background: #2B251F;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}
.contbox-full-gray-ty3 .bg-box {
  position: absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: 100%;
  height: 353px;
  background: url('/rs/images/main-renewal/img-bg-boost.png') lightgray -2.655px -65.946px / 100.043% 117.954% no-repeat;
  background-position: center center;
  z-index: 0;
}
.title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #FFF;
}
.title-box span {
  font-family:'SangSangTitleB';
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.title-box p {
  color: #FFF;
  font-family: "Pretendard", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 140%; 
}
.btn-wrap {
  display: flex;
  gap: 20px;
  opacity: 1;
}
.btn-wrap a {
  display: flex;
  padding: 24px 80px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: #FFF;

  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  border-radius: 99px;
  border: 1px solid #FFF;
}

.flex-ty2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*알림센터*/
.id {
  color: #F25D22;
}


.notice-list {
  width: 100%;
  border-collapse: collapse;
  border-top: 3px solid #222;
  font-family: 'Pretendard', sans-serif;
}
.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 40px;
  border-bottom: 1px solid #9F9F9F;
}
.notice-item.pinned {
  background: rgba(255, 185, 147, 0.05);
}
.notice-item .notice-date {
  width: 100px;
  flex-shrink: 0;
  font-size: 16px;
  color: #222;
  font-weight: 400;
  line-height: 140%;
  margin-right: 15px;
}
.notice-item:not(.pinned) .notice-date {
  color: #666;
}
.notice-list .notice-title {
  flex: 1;
  font-size: 21px;
  font-weight: 600;
  line-height: 140%;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-list .notice-item:not(.pinned) .notice-title {
  color: #444;
  font-weight: 500;
}
.pin-icon {
  width: 24px;
  height: 24px;
}

.btn-faq-qna-box {
  display: flex;
  max-width: 1440px;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
}
.btn-faq-qna-box a {
  display: flex;
  padding: 24px 10px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 8px;
  border: 1px solid #F25D22;

  color: #F25D22;
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 140%;
}
.btn-faq-qna-box a:hover {
  background: #F25D22;
  color: #fff;
}

.pop {
  z-index: 100;
  /*position: absolute;*/
  display: none;
}

/*이메일 무단수집거부 */
.emailCollect_pop{position:fixed;left:50%;top:200px;width:520px;margin-left:-260px;background:#FFF;border:solid 2px #c4d2ff; }
.emailCollect_pop .con_top{position:relative;height:40px;background: #c4d2ff;padding:10px 20px}
.emailCollect_pop .btn_close{display:block;position:absolute;top:20px;right:20px;width:21px;height:21px;text-indent:-9999px;}
/*background: url('/rs/images/online/layer_close.png') no-repeat 0 0;*/
.emailCollect_pop .con_top .logo{font-size:0;text-indent:-9999px;} 
.emailCollect_pop .conBody{position:relative;padding:10px 20px 20px }
.emailCollect_pop .conBody .conText{padding:30px 30px 20px;font-size:13px;line-height:20px;color:#555;}
.emailCollect_pop .conBody .conText h1{color:#2a479a;font-family:NanumGothicBold, NanumGothic, sans-serif;font-size:25px;font-weight:600;line-height:140%;letter-spacing:-0.05em}
.emailCollect_pop .conBody .conText p  {padding:15px 0px 0px}
.emailCollect_pop .conBody dl {border-top:solid 2px #2a479a;;font-size:12px;line-height:150%;color:#555;}
.emailCollect_pop .conBody dt {background:#f3f3f3;font-size:16px;line-height:140%;color:#2a479a;padding:10px 30px;border-bottom:solid 1px #d3d3d3}
.emailCollect_pop .conBody dt span {display:block;font-size:13px;color:#567be8}
.emailCollect_pop .conBody dd {position:relative;padding:10px 20px;border-bottom:solid 1px #d3d3d3;padding-left:70px}
.emailCollect_pop .conBody dd p {position:absolute;top:20px;left:30px;color:#2a479a;font-size:28px;font-weight:600}

.black_opacity {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  width: 100%;
  background: #000;
  opacity: 0.5;
}

.content-popup-reset {

}
.content_inner.content-popup-reset .content_wrapper.renewal .page_content {
  padding: 0px 0 0px;
}

/*협력동아리 현황 251023*/
.pop.pop_group_report_main {
    z-index: 100;
    position: absolute;
}
.pop_group_report_main{
    padding:40px 50px;
    left:50%;
    transform: translateX(-50%);
    width: 1000px;
    height: auto;
    background:#fff;
    border: none;
    box-sizing: border-box;
    z-index: 99;
}
.pop_group_report_main .btn_close_popup{
    position: absolute;
    top: -60px;
    right: 0;
    width: 60px;
    height: 60px;
    background: url("../imgs/renew/icon_popup_close.png") no-repeat center/13px;
}
.pop_group_report_main .pop_tit{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.pop_group_report_main .pop_tit p.sub{
    margin-top: 10px;
    padding-left: 20px;
    font-weight: 300;
    font-size: 14px;
}
.pop_group_report_main .pop_tit p.title{
    font-family:'SangSangTitleB';
    font-size:34px;
    color:#f15c22;
}
.pop_group_report_main .list_report{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    float: initial;
    margin: 20px 0 40px;
}
.pop_group_report_main .list_report li{
    margin-top: 12px;
    padding-top: 3px;
    font-size: 14px;
    color: #000;
}
.pop_group_report_main .list_report > li > ul > li a{
    position: relative;
}
.pop_group_report_main .list_report > li > ul > li a:hover::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 10px);
    height: 1px;
    background:#222;
}
.pop_group_report_main .list_report > li > ul > li a:hover::after{
    content: "";
    position: absolute;
    right: -10px;
    bottom: 2px;
    width: 5px;
    height: 10px;
    background:url("../imgs/renew/icon_center_small.png") no-repeat center/cover;
}
.pop_group_report_main .list_report li a{
    font-size: 14px;
    color: #000;
}
.pop_group_report_main > span{
    font-weight: 300;
    font-size: 14px;
    color:#868f96;
}