@charset "UTF-8";
/*-------------------------------------------------
title       : main
Author      : YEONA
Create date : 2025-06
-------------------------------------------------*/
/*레이아웃*/
html.popup-locked, body.popup-locked {
  overflow: hidden;
  overscroll-behavior: contain; /* 모바일 바운스 방지 */
}
#header{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  background-color:#fff;
  z-index: 100;
  transition: transform 0.3s ease;
}
.menu-toggle{display:none;}
.header_wrap{
  margin:0 auto;
  height: 7.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 6rem);
}
#fp-nav{
  right:3rem;
  position: absolute;
  top:1.2rem;
  z-index: 100;
  transition:all .3s;
  margin-top:0 !important;
}


#fp-nav ul{
  display: flex;
  gap:3rem;
}

#fp-nav ul li, .fp-slidesNav ul li{
	width:auto;
	height:auto;
	margin:0;
}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span{
	display:none;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
	display:none;
}
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active+.fp-tooltip{
	transition:none;
}
#fp-nav ul li .fp-tooltip{
	position:static;
	font-size:2rem;
	max-width:inherit;
	opacity:1; visibility:visible;
	color:#999;
	overflow:visible;
	font-family:inherit;
	width:100%;
	font-weight:700;
}
#fp-nav ul li a.active + .fp-tooltip{
	color:#111;
}
#gnb{
  opacity: 0;
  visibility: hidden;
}
#gnb li.active a{
  color: #111;
}
#nav-icon2{
  z-index: 30;
  width: 1.8rem;
  height: 1.8rem;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 50%;
  background: #111;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
}

#nav-icon2 span:nth-child(odd) {
  left:0px;
  /* border-radius: 9px 0 0 9px; */
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0px;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 7px;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 14px;
}

.open #nav-icon2 span:nth-child(1),.open #nav-icon2 span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.open #nav-icon2 span:nth-child(2),.open #nav-icon2 span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.open #nav-icon2 span{
  width:1.2rem;
}

.open #nav-icon2 span:nth-child(1) {
  left: 0;
  top: 4px;
}


.open #nav-icon2 span:nth-child(2) {
  left: .7rem;
  top:4px;
}

.open #nav-icon2 span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

.open #nav-icon2 span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

.open #nav-icon2 span:nth-child(5) {
  left: 0;
  top: 1.1rem;
}

.open #nav-icon2 span:nth-child(6) {
  left: 0.7rem;
  top: 1.1rem;
}


#footer{
  position: fixed;
  z-index: 10;
  width:7rem;
  bottom:0;
  right:0;
  border-left:1px solid rgba(255,255,255,0.2);
  border-top :1px solid rgba(255,255,255,0.2);
  color:#fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

#footer .side_foot{
  width: 100%;
  text-align: center;
}
#footer .side_foot > *{
  height: 7rem;
  font-size: 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .side_foot .lang-icon{
  border-top:1px solid rgba(255,255,255,0.2);
  font-size:1.9rem;
  font-weight: 300;
}

#footer.on .side_foot .lang-icon{
  color:#ccc;
  border-top:1px solid #eee;
}

#footer .side_foot #gotop{
  background:#0BA2F2;
  font-size:1.4rem;
}

#footer .side_foot .gotop{
  background:#0BA2F2;
  font-size:1.4rem;
  display: none;
}

/*콘텐츠*/
.container{
  width:160rem;
  margin:0 auto;
  max-width:92%;
}
h2.title{
  font-family: 'proximanova';
  font-weight: 700;
  font-size: 6rem;
  letter-spacing: -0.2rem;
  color: #FFFFFF;
  margin-bottom: 2.4rem;
  line-height: 1;
}

/*비주얼*/
.visual{
  position:relative;
  width:100%;
}
.visual video,
.visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;        
  object-position: center;  
  z-index: -1;
  position: relative;
}

#main .container{
  position: absolute;
  top:50%;
  width: 160rem;
  max-width:92%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:#fff;
  z-index: 1;
}

#main .txt strong{
  font-size:11rem;
  font-family: 'proximanova';
  line-height: 1.1;
  letter-spacing: -5px;
}

#main .txt span{
  color: rgba(255, 255, 255, 0.70);
  font-size:2.4rem;
  font-weight: 300;
  display: block;
  margin-top:3rem;
}

.swiper-controls {
  position: absolute;
  right: 40px;
  bottom: 10px;
  z-index: 10;
}

#toggleAutoplay {
  background: none;
  border: none;
  color: white;
  font-size: 1.7rem;
  cursor: pointer;
  line-height: 1;
  margin-right: 5px;
}

.visual .txt strong {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 3.2rem;
/*   border-right: 2px solid rgba(255, 255, 255, 0.6); */
  max-width: 0;
}

/* active일 때 typing과 blink → blink-out */
.active .visual .txt strong {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  animation: typing 2.5s steps(30, end) forwards;
}


/* 깜빡임 */
@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* 타이핑 */
@keyframes typing {
  from { max-width: 0; }
  to { max-width: 100%; }
}


/* 서브텍스트 페이드 업 */
.visual .txt span {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.active .visual .txt span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.8s;
}

.visual .controls{
  display: flex;
  margin-top:7rem;
  align-items: center;
}

.visual .controls .swiper-prev, .visual .controls .swiper-next{
  font-size:2rem;
  cursor: pointer;
}

.v_slide{
	height:calc(100vh - 7.8rem);
}

.v_slide .swiper-slide{
  z-index: -1;
}

.swiper-toggle {
  z-index: 10;
  font-size: 2rem;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
}

.visual .swiper-pagination{
  position:static;
  width:auto !important;
  margin:0 1.5rem;
}

.visual .swiper-pagination-bullet{
  width:7rem;
  height: 0.4rem;
  margin:0 0.5rem !important;
  border-radius: inherit;
  background:#fff;
}

/*section1*/
#section1{
  position: relative;
  color:#fff;
}
#section1::before{
  content:'';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/section1_bg.webp) no-repeat center / cover;
  object-fit: cover;
  z-index: -1;
}
#section1 .container{
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.depth{
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 165%; /* 3.96rem */
  letter-spacing: -0.072rem;
}
.dashed_box{
  border: 2px dashed rgba(255, 255, 255, 0.60);
  padding:3rem;
  margin-top:8rem;
}
.list1{
  display: flex;
  gap:3rem;
}
.list1 > li{
  flex:1;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px);
  will-change: backdrop-filter;
  height: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:3rem;
  font-weight: 700;
  gap:4rem;
}
.list1 > li > p > b{
  font-size: 8rem;
  font-weight: 700;
}
.list1 > li > p span{
  font-size:2.8rem;
}

/*section2*/
#section2{
  position: relative;
  color:#fff;
}
#section2::before{
  content:'';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/section2_bg.webp) no-repeat center / cover;
  object-fit: cover;
  z-index: -1;
}
#section2 .container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:16rem;
}
#section2 .border_box{
  position: absolute;
  right:0;
  height: calc(100% - 7.8rem);
  bottom:0;
  width: 96rem;
}
#section2 .list2{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#section2 .list2 li{
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(8.5px);
  will-change: backdrop-filter;

}

#section2 .list2 li .item{
  border-left: 1px solid rgba(255, 255, 255, 0.40);
  border-bottom: 1px solid rgba(255, 255, 255, 0.40);

  display: flex;
  height: 100%;
  align-items: center;
  font-size:2.6rem;
  font-weight: 700;
  gap:2.4rem;
  padding:2rem 10rem;
  position: relative;
  transition: all .3s;
  cursor: pointer;
}

#section2 .list2 li.active .item > p{
	font-size:2.8rem;
}

#section2 .list2 li .item:hover,
#section2 .list2 li .item:focus{
  background: rgba(18, 47, 80, 0.60);
backdrop-filter: blur(12px);
will-change: backdrop-filter;
transition: all .3s;
}

#section2 .list2 li .item:hover button:before{
  color:#fff;
}

#section2 .list2 li.active .item:hover{
  cursor: inherit;
}
#section2 .list2 li.active .item{
  cursor: inherit;
  flex-direction: column;
  justify-content: center;
  gap:1.6rem;
  background: #122F50;
  align-items: flex-start;
}
#section2 .list2 li.active .item > p br{
  display: none;
}
#section2 .list2 li.active .item .icon{
  display: none;
}

#section2 .list2 li .item .desc{
  opacity: 0;
  visibility: hidden;
  height: 0;
  width:0;
}
#section2 .list2 li.active .desc{
  width: 100%;
  height: auto;
  color: rgba(255, 255, 255, 0.80);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 130%; /* 2.6rem */
  letter-spacing: -0.06rem;
  opacity: 1;
  visibility: visible;
}


#section2 .list2 li.active .item:before{
  display: none;
}

#section2 .list2 li.active .desc span{
  display: block;
}
#section2 .list2 li.active .desc span + span{
  margin-top:1rem;
}
#section2 .list2 li.active .desc span:last-child{
	font-size:1.9rem;
}
#section2 .list2 li:last-child > .item{
  border-bottom: 0;
}

#section2 .list2 li button:before{
  content:'\EA13';
  position: absolute;
  top:3rem;
  right: 3rem;
  font-family: 'remixicon';
  font-size: 3.9rem;
  color: rgba(255, 255, 255, 0.40);
  font-weight: 400;
  line-height: 1;
  display: block;
  transition: all .3s;
}

#section2 .list2 li.active .cls_btn:before{
  transform: rotate(45deg);
}


#section2 .txt_wrap{
  width:64rem;
}
#section2 .title{
  margin-bottom: 4rem;;
}

/*profile*/
#section3,#section4{
  color:#fff;
  background-image:url('../images/bg.png');
  background-repeat: no-repeat;
  background-size:cover;
  object-fit: cover;

}
#section3 .container, #section4 .container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible; /* controls가 밖으로 나올 수 있도록 visible로 변경 */
}

.tab-menu{
  display: flex;
  margin-bottom: 3.5rem;
  margin-top:5.5rem;
}

.tab-menu li{
  color: rgba(255, 255, 255, 0.60);
  font-size: 2.4rem;
  font-weight: 700; 
  letter-spacing: -0.54px;
  padding:1.4rem 2.5rem;
  cursor: pointer;
}

.tab-menu li.active{
  background: #FFF;
  border-radius: 10rem;
  color:#111;
}
.swiper-group{
  position: relative;
}
.swiper.team-swiper {
  display: none;
  overflow: hidden; /* 세로 스크롤을 위해 hidden으로 설정 */
  height: 36rem; /* 2행 그리드에 맞는 정확한 높이로 조정 (17rem × 2 + 1.25rem) */
  position: static; /* controls가 밖으로 나올 수 있도록 static으로 설정 */
}
.swiper.team-swiper.active {
  display: block;
}
.swiper.team-swiper .board-list-nodata > img{display:none;}
/* no-swiper 클래스가 적용된 경우 스크롤 비활성화 */
.team-swiper.no-swiper {
  overflow: hidden !important; /* 스크롤 비활성화 */
  pointer-events: none; /* 마우스 이벤트 비활성화 */
  scroll-behavior: auto; /* 스크롤 동작 비활성화 */
  -ms-overflow-style: none; /* IE 스크롤바 숨김 */
  scrollbar-width: none; /* Firefox 스크롤바 숨김 */
}

.team-swiper.no-swiper .swiper-wrapper {
  overflow: visible !important; /* 내부 콘텐츠는 보이도록 */
  pointer-events: auto; /* 내부 콘텐츠는 클릭 가능하도록 */
}

/* no-swiper에서 마우스 휠 이벤트 완전 차단 */
.team-swiper.no-swiper {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* 표준 */
}

/* no-swiper에서 transform 초기화 */
.team-swiper.no-swiper .swiper-wrapper {
  -webkit-transform: none !important; /* Safari transform 초기화 */
  -moz-transform: none !important; /* Firefox transform 초기화 */
  -ms-transform: none !important; /* IE transform 초기화 */
  transform: none !important; /* 표준 transform 초기화 */
  -webkit-transition: none !important; /* Safari transition 비활성화 */
  -moz-transition: none !important; /* Firefox transition 비활성화 */
  -ms-transition: none !important; /* IE transition 비활성화 */
  transition: none !important; /* 표준 transition 비활성화 */
}

.team-swiper.no-swiper .swiper-slide {
  -webkit-transform: none !important; /* Safari 슬라이드 transform 초기화 */
  -moz-transform: none !important; /* Firefox 슬라이드 transform 초기화 */
  -ms-transform: none !important; /* IE 슬라이드 transform 초기화 */
  transform: none !important; /* 표준 슬라이드 transform 초기화 */
  -webkit-transition: none !important; /* Safari 슬라이드 transition 비활성화 */
  -moz-transition: none !important; /* Firefox 슬라이드 transition 비활성화 */
  -ms-transition: none !important; /* IE 슬라이드 transition 비활성화 */
  transition: none !important; /* 표준 슬라이드 transition 비활성화 */
}
  /* no-swiper 클래스가 적용된 경우 스크롤 비활성화 */
.team-swiper.no-swiper {
  height:auto !important;
}
.team_card a{
  background: #335370;
  backdrop-filter: blur(10px);
  will-change: backdrop-filter;
}

.team_card a{
  padding:3rem;
  box-sizing: border-box;
  position: relative;
  opacity: 1;
  transition:all 0.3s;
  height: 17rem;
  padding:3rem;
  width: 100%;
  display: block;
  min-height: 17rem; /* 세로 스크롤에서 최소 높이 보장 */
}



/* 세로 스크롤에서 그리드 레이아웃 조정 */
.swiper.team-swiper .swiper-wrapper {
  display: -webkit-grid; /* Safari */
  display: -moz-grid; /* Firefox */
  display: grid;
  -webkit-grid-template-columns: repeat(5, 1fr); /* Safari */
  -moz-grid-template-columns: repeat(5, 1fr); /* Firefox */
  grid-template-columns: repeat(5, 1fr); /* 5열 그리드 */
  -webkit-gap: 1.25rem; /* Safari */
  -moz-gap: 1.25rem; /* Firefox */
  gap: 1.25rem; /* 카드 간 간격 */
  -webkit-grid-auto-flow: row dense; /* Safari */
  -moz-grid-auto-flow: row dense; /* Firefox */
  grid-auto-flow: row dense; /* 빈 공간을 채우고 마지막 행도 완성 */
}
.swiper .swiper-wrapper:has(.group-slide){
	gap:1.25rem;
	display:flex;
}
.swiper.team-swiper .swiper-slide {
  width: 100% ;
  height: 17rem !important; /* 슬라이드 높이 고정으로 일관된 레이아웃 보장 */
  min-height: 17rem !important; /* 최소 높이도 강제 설정 */
  max-height: 17rem !important; /* 최대 높이도 강제 설정 */
  order: initial !important; /* 스와이퍼가 자동으로 생성하는 order 속성 초기화 */
}

.swiper.team-swiper .swiper-slide.group-slide {
  display: -webkit-grid !important; /* Safari */
  display: -moz-grid !important; /* Firefox */
  display: grid !important;
  -webkit-grid-template-columns: repeat(5, 1fr) !important; /* Safari */
  -moz-grid-template-columns: repeat(5, 1fr) !important; /* Firefox */
  grid-template-columns: repeat(5, 1fr) !important;
  -webkit-gap: 1.25rem !important; /* Safari */
  -moz-gap: 1.25rem !important; /* Firefox */
  gap: 1.25rem !important;
  height: 17rem !important;
  width: 100% !important;
}
.swiper.team-swiper .swiper-slide.group-slide .swiper-slide{width:100%;}


.team_card a:after{
  content:'\EA13';
  font-family: 'remixicon';
  font-size: 3rem;
  font-weight: 300;
  color:rgba(255, 255, 255, 0.4);
  position: absolute;
  bottom:2.5rem;
  right: 2.5rem;
}

.team_card a:before{
  content:'';
  position: absolute;
  bottom:0;
  right:0;
  background:url('../images/more_hover.png') no-repeat center/cover;
  width:9rem;
  height: 10.3rem;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.team_card a:hover:before,
.team_card a:active:before,
.team_card a:focus:before{
  opacity: 1;
  visibility: visible;
}

.team_card a:hover,
.team_card a:focus,
.team_card a:active{
  background: linear-gradient(191deg, #1FA9C4 -26.67%, #3E57FE 131.87%);
  backdrop-filter: blur(10px);
  will-change: backdrop-filter;
  color:#fff;
}



.team_card.swiper-slide-active{
  display: flex;
}


.team_card:hover:before{
  opacity: 1;
  visibility: visible;
  
}

.team_card .img{
 width:100%;
 height: 31rem;
 display: block;
}

.team_card .img img{
  object-fit: cover;
  width:100%;
  height: 100%;
}

.team_card .info{
  color: rgba(255, 255, 255, 0.80);
  line-height: 1;
  font-size: 1.6rem;
  font-weight: 700;
}

.team_card .info .name{
  font-size: 2.6rem;
  color:#fff;
  display: block;
  margin-bottom: 1rem;
}


.swiper-group .controls{
  position: absolute;
  display: flex;
  flex-direction: column; /* 세로 스크롤을 위해 세로 배치 */
  right: 0; /* swiper 컨테이너 밖으로 이동 */
  top: -12rem;
  justify-content: center;
  z-index: 10; /* swiper 위에 표시되도록 z-index 설정 */
}

.swiper-group .swiper-button-next, .swiper-group .swiper-button-prev{
  color:#fff;
  position:static;
  height: auto;
  margin: 1rem 0; /* 세로 스크롤을 위해 상하 여백 추가 */
  width: auto;
}

.swiper-group .swiper-button-next:after, .swiper-group .swiper-button-prev:after{display: none;}

.swiper-group .swiper-button-next::before{
  background:url('../images/union.png') no-repeat center/cover;
  content: '';
  display: block;
  width: 4.1rem;
  height: 2.7rem;
  transform: rotate(90deg); /* 세로 스크롤을 위해 90도 회전 */
}
.swiper-group .swiper-button-prev:after{
  background:url('../images/union.png') no-repeat center/cover;
  content: '';
  display: block;
  width: 4.1rem;
  height: 2.7rem;
  transform: rotate(270deg); /* 세로 스크롤을 위해 270도 회전 (아래쪽 화살표) */
}

.swiper-group .swiper-pagination{
  position: absolute;
  top:100% !important;
  transform:none;
  left:0;
  background:rgba(255, 255, 255, 0.40);
  height: 1px;
  display: flex;
  z-index: 10; /* swiper 위에 표시되도록 z-index 설정 */
  opacity: 0;
  visibility: hidden;
  margin-top:2rem;
}

.swiper-group .swiper-pagination > *{
  flex:1;
}

.swiper-group .swiper-pagination-bullet{
  height: 4px;
  margin: -2px 0 0 0 !important;
}

.swiper-group .swiper-pagination-bullet-active{
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  filter: blur(1px);
}


.profile-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  display: none;
}

.profile-popup:before{
  background: rgba(18, 47, 80, 0.80);
  backdrop-filter: blur(35px);
  will-change: backdrop-filter;
  content:'';
  width:100%;
  height: 100%;
  position: absolute;
  z-index: -1;

}

.profile-popup.active{
  display: flex;
  opacity: 1;
  visibility: visible;
}


.profile-popup .popup-photo{
  width:32rem;
  height: 40.6rem;
  flex-shrink: 0;
}

.profile-popup .popup-photo img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

.profile-popup .popup-inner{
  position:relative;
  width: 120rem;
  max-width:92%;
}

.profile-popup .popup-content{
  display: flex;
  gap:8rem;
}

.profile-popup .popup-info .popup-name{
  font-family: 'Oswald';
  font-size: 5.6rem;
  font-weight: 700;
  padding-bottom: 4rem;
  display: block;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.40);
  line-height: 1;
  color:#fff;
}

.profile-popup .popup-info .popup-role{
  font-size:2.4rem;
  font-weight: 600;
  display: flex;
  margin:4rem 0 3.2rem;
  color:#fff;
  align-items: center;
}

.profile-popup .popup-info .popup-role p + p:before{
  content:'/';
  position:relative;
  display: inline-block;
  vertical-align: text-bottom;
  color:rgba(255, 255, 255, 0.20);
  font-weight: 100;
  font-size: 2rem;
  margin:0 2rem;
}

.bul1 li{
  position: relative;
  padding-left:1.7rem;
  color: rgba(255, 255, 255, 0.80);
  font-weight: 300;
  line-height: 1.6;
}

.bul1 li + li{
  margin-top:2rem;
}

.bul1 > li:before{
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.40);
  clip-path: polygon(
    50% 0%,     
    93% 25%,    
    93% 75%,   
    50% 100%,  
    7% 75%,     
    7% 25%  
  );
  content: '';
  position: absolute;
  top:1rem;
  left:0;
}

.profile-popup .close-btn{
  position:absolute;
  right:0;
  top:0;
  background: #2E4978;
  backdrop-filter: blur(7px);
  will-change: backdrop-filter;
  border-radius: 10rem;
  width:14rem;
  height:5rem;
  line-height:5rem; 
  color:#fff;
}

.profile-popup .close-btn:hover{
  text-decoration: underline;
}

.glow-bg,
.glow-bg2{
  width: 100%;
  height: 100rem;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0;
  z-index: 0;
  animation: floatGlow 8s infinite ease-in-out;
  transition:all .7s;
} 

.glow-bg {
  background: radial-gradient(circle, rgba(199, 94, 255, 0.3) 0%, transparent 70%);
  right: -40%;
  top: -30%;
  

}

.glow-bg2 {
  background: radial-gradient(circle, rgba(175, 240, 255, 0.3) 0%, transparent 70%);
  animation: floatGlow 8s infinite ease-in-out;
  left: -40%;
  bottom: -40%;
}



/* 애니메이션 */
@keyframes floatGlow {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sweep {
  0% { transform: translateX(-100%) rotate(15deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(200%) rotate(15deg); opacity: 0; }
}


.active .glow-bg,
.active .glow-bg2 {
  opacity: 0.8;
}

.active .glow-bg{
  transition-delay:0.6s;
}

.active .glow-bg2{
  transition-delay:0.9s;
}

/* 자유롭게 떠다니는 효과 */
@keyframes glowMove1 {
  0%   { transform: translate(0px, 0px) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.1); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes glowMove2 {
  0%   { transform: translate(0px, 0px) scale(1); }
  50%  { transform: translate(-25px, 15px) scale(1.05); }
  100% { transform: translate(20px, -15px) scale(0.9); }
}




/*section4*/
#section4 .depth{
  margin-bottom: 3rem;
}
.map_wrap{
  display: flex;
  gap:15rem;
  justify-content: center;
  align-items: center;
}

.map_img{
  width:45.4rem;
  height: 58.4rem;
  position: relative;
  flex-shrink: 0;
}

.map_img li{
  position: absolute;
}
.map_img li a{
  position: relative;
}
.map_img li a:before{
  content:'';
  background:url('../images/mark.png') no-repeat center/contain;
  width:2.2rem;
  height: 2.3rem;
  position: absolute;
  transition: all .3s;
  z-index: 1;
}
.map_img li.active a:before{
  background:url('../images/marker.png') no-repeat center/contain;
  width:3.6rem;
  height: 3.7rem;
  margin-top:-1.6rem;
}
.map_img li.mark1{
  top: 9.47rem;
  left:12.1rem;
}
.map_img li.mark2{
  top: 10rem;
  left:16.3rem;
}

.map_img li.mark3{
  top: 17.59rem;
  left:12.5rem;
}
.map_img li.mark4{
  top: 18.31rem;
  left:16.25rem;
}

.map_img li.mark5{
  top: 5rem;
  left:15rem;
}

.map_info.swiper-wrapper{
  flex-direction: column;
  justify-content: center;
}

.map_info .swiper-slide{
  padding:3rem 15rem 3rem 2.8rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.40);
  height: auto;
  box-sizing: border-box;
}
.map_info .swiper-slide:before{
  content:'';
  width:2rem;
  height: 2rem;
  border:.6rem solid rgba(255, 255, 255, 0.30);
  border-radius: 50%;
  position: absolute;
  left:-0.6rem;
  top:50%;
  transform: translateY(-50%);
  transition: all .3s;
}
.map_info .swiper-slide-active:before{
  border:.6rem solid #0BA2F2;
  background:#fff;
}


.map_info .swiper-slide:after{
  content:'';
  width:0;
  height: 2px;
  background:#0BA2F2;
  position: absolute;
  left:0;
  bottom:-1px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.map_info .swiper-slide-active:after{
  width:100%;
  opacity: 1;
  visibility: visible;
}

.map_info .swiper-slide > a{
  font-size:2.8rem;
  font-weight: 700;
  color:#fff;
}
.map_info .more_view{
  position: absolute;
  right: 0;
  height: 4rem;
  line-height: 4rem;
  backdrop-filter: blur(7px);
  will-change: backdrop-filter;
  border-radius: 10rem;
  background:#fff;
  color: #163154;
  padding:0 2rem;
  font-weight: 600;
  top:50%;
  transform: translateY(-50%);
  transition: all .3s;
}
.map_info .swiper-slide-active .more_view{
  background: #0BA2F2;
  color:#fff;
}
.map_info .more_view:hover{
  text-decoration: underline;
}
.pulse-ring {
  position: absolute;
  width:2.5rem;
  height: 2.5rem;
  background: rgba(41, 197, 255, 0.6); /* 하늘색 + 투명도 */
  border-radius: 50%;
  z-index: 0;
  top:4px;
  left:0;
  opacity: 0;
  visibility: hidden;
}
.pulse-ring:before{
  animation: pulse 1.5s ease-out infinite;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(41, 197, 255, 0.6); 
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  z-index: -1;
}

.pulse-ring:after{
  width:45rem;
  border-top:2px dashed #0BA2F2;
  position: absolute;
  left:100%;
  top:0;
  transform: rotate(-12deg);
  content: '';
  margin-top:-4rem;
}

.mark4 .pulse-ring:after{
  width:41rem;
  margin-top:0.9rem;
  transform: rotate(-1deg);
}

.mark1 .pulse-ring:after{
  width:49rem;
  margin-top:10rem;
  transform: rotate(21deg);
  left:0;
}

.mark2 .pulse-ring:after{
  width:48.3rem;
  margin-top:14.7rem;
  transform: rotate(32.7deg);
  left:-1rem;
}

.mark5 .pulse-ring:after{
  width:59rem;
  margin-top:22rem;
  transform: rotate(43.3deg);
  left:-5rem;
  left:-6rem;
}

li.active .pulse-ring{
  opacity: 1;
  visibility: visible;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  70% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.profile-popup.map .popup-inner{
  width:160rem;
}
.profile-popup.map .map-content{
  display: flex;
  gap:12rem;
  align-items: center;
  color:#fff;
}

.map-photo{
  width: 76rem;
  display: block;
  flex-shrink: 0;
  height:49rem;
  overflow:hidden;
}
.map-photo img{
  object-fit: cover;
  width:100%;
  height: 100%;
}
.map .img img{
  object-fit: cover;
  width:100%;
  height: 100%;
}

.map .info{
  width:100%;
}

.map .info .tit{
  font-weight: 700;
  font-size: 4.2rem;
  display: block;
  letter-spacing: -1px;
  margin-bottom: 3rem;
}

.map .info .box{
  gap:2rem;
  display: flex;
  flex-wrap:wrap;
  background: rgba(255, 255, 255, 0.06);
  padding:7.6rem 2rem;
}

.map .info .box li i{
  width: 8rem;
  height: 8rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.map .info .box li > span{
  display: block;
  color:#0BA2F2;
  font-weight: 500;
  margin-top:5px;
  font-size:1.8rem;
}

.map .info .box li{
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map .info .box li p b{
  font-weight: 700;
  font-size:2.2rem;
  display: block;
  line-height: 1;
}

.map .info .box li p span{
  display: block;
  color:#0BA2F2;
  font-weight: 500;
  margin-top:5px;
  font-size:1.8rem;
}

.map .info .address{
  position: relative;
  padding-top:2rem;
  margin-top:4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(7px);
  will-change: backdrop-filter;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map .info .address > p{
  font-size: 2rem;
  font-weight: 500;
  display: flex;
  gap:1.2rem;
  align-items: center;
  padding-right:5rem;
  color: rgba(255, 255, 255, 0.60);
}

.map .info .address > p i{
  width:8rem;
  height:8rem;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.map .info .address > p span{
  display:inline-block;
}

.map .info .address a{
  font-weight: 600;
  color:#fff;
}
.map .info .address a:hover, .map .info .address a:focus{
  text-decoration:underline;
}
.map .info .address a i{
  margin-left:1rem;
}

.close_popup{
  border-radius: 10rem;
  background: #FFF;
  backdrop-filter: blur(7px);
  will-change: backdrop-filter;
  width:12rem;
  height:4rem;
  line-height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right:0;
  top:2rem;
  cursor: pointer;
  color: #153153;
  font-weight: 600;
  transtion:all .2s;
}
.close_popup:hover{
  text-decoration:underline;
  font-weight:700;
}



/* 자식 요소 개별 딜레이 */
#section4 .title,
#section4 .depth,
#section4 .map_wrap {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#section4.active .title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

#section4.active .depth {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

#section4.active .map_wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}










/*section5*/
#section5{
  background: #122F50;
  overflow: hidden;
}
#newsMap01 area{
  position: relative;
}
#newsMap01 area:before{
  content:'';
  background:url('../images/marker.png') no-repeat center/cover;
  width:3.6rem;
  height:3.7rem;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}


#section5 .fp-tableCell{
  display: flex;
  height:100%;
  flex-direction: column;
  justify-content: center;
  gap:9rem;
}

.card-container{
  display: flex;
  width:160rem;
  margin:0 auto;
}

.card-container li{
  width: 100%;
  height: 50rem;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:3.2rem;
  transition: flex 0.5s ease;
  padding:3rem;
}
.card-container .btn {
  background-color: #009dff;
  color: white;
  border: none;
  padding: 1.25rem 2rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 10rem;
  background: #0BA2F2;
  backdrop-filter: blur(7px);
  will-change: backdrop-filter;
  font-weight: 600;
}

.card-container .btn::after {
  content: '→';
  margin-left: 8px;
  color:rgba(255, 255, 255, 0.60);
  transition: all .3s;
}

.card-container .btn:hover {
  background-color: #007acc;
}
.card-container .btn:hover:after{
  color:#fff;
}
.card-container li.card2{width:0;transition:all 1s;}

/* 초기 상태 */
.card2{
  opacity: 0;
  visibility: hidden;
  transform: translateY(100vh);
}
#section5 .container{
  opacity: 0;
  visibility: hidden;
}

/* section5 활성화 시 */

#section5.fp-completely .card-container{
	width:100%;
	gap:4.5rem;
}
#section5.fp-completely .card2{width:100%;opacity:1;visibility:visible;transform:scale(1);}
#section5.active .card-container {
  animation: section5Sequence 2.5s ease forwards !important;
}

#section5.active .card2 {
  animation: card2In 1s ease forwards !important;
  animation-delay: 1s !important;
}

#section5.active .container {
  animation: containerIn 0.6s ease forwards !important;
  animation-delay: 1.5s !important;
}



/* 카드 컨테이너 등장 */
@keyframes section5Sequence {
  0% {
    opacity: 0;
    transform: translateY(100vh);
    gap: 0;
    width: 160rem;
    visibility: hidden;
  }
  25% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    gap: 0;
  }
  50% {
    /* card2 등장 시점에 맞춰 스타일 전환 준비 */
    gap: 0;
  }
  75% {
    /* container 텍스트 등장 */
    gap: 0;
  }
  100% {
    width: 100%;
    gap: 4.5rem;
  }
}

/* card2 확대 */
@keyframes card2In {
  0% {
    opacity: 0;
    transform: scale(0);
    visibility: hidden;
	width:0 !important;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    width: 100% !important;
  }
}

/* txt 나타나기 */
@keyframes containerIn {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}






/*Announcement*/
#section6 .container{
  display: flex;
  height: 100%;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
#section6 h2.title{
  color:#111;
  margin-bottom: 4rem;
}
.an_noti{
  border-top: 1px solid #111;
  width:100%;
  position: relative;
}


.an_noti .list li{
  padding:4rem 0;
  display: flex;
  align-items: center;
  gap:3rem;
  color:#555555;
  font-weight: 700;
  font-size:2.4rem;
  border-bottom: 1px solid #DDD;
}

.an_noti .list .tt{
  color:#555;
  width:100%;
  display: block;
  text-align: left;
}

.an_noti .list .down{
  width:3.6rem;
  height: 3.6rem;
  background:#122F50;
  border-radius: 10rem;
  text-align: center;
  line-height: 3.6rem;
  flex-shrink: 0;
  border:1px solid #122F50;
  transition:all .5s;
  flex-shrink: 0;
  font-weight: 400;
}

.an_noti .list .down:hover{
  background:#fff;
  color:#122F50;
}

.an_noti .list .down:hover:before{
  color:#122F50;
}

.an_noti .list .down:before{
  content: '\EC5A';
  color:#fff;
  font-family: 'remixicon';
  font-size: 1.7rem;
  display: block;
}

.SMN_effect-31{
  display: inline-block;
  position: absolute;
  top:-10rem;
  right:0; 
}

.SMN_effect-31 a {
	position: relative;
	overflow: hidden;
	display: block;
	text-align: center;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	padding: 0;
  border-radius: 10rem;
  background: #122F50;
  backdrop-filter: blur(7px);
  will-change: backdrop-filter;
  color:#fff;
  width:16rem;
  line-height: 5rem;
  display: inline-block;
  text-align: center;
  font-weight: 600;
}

.SMN_effect-31 a span {
	display: block;
	-webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.SMN_effect-31 a:after {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	content: attr(data-hover);
	display: inline;
	text-align: center;
	-webkit-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.SMN_effect-31 a:hover {
	color: #fff;
}

.SMN_effect-31 a:hover span {
	color: #fff;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

.SMN_effect-31 a:hover:after {
	top: 0;
}

.SMN_effect-31 a:active {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand;
}

/* 제목 애니메이션 */
#section6 .title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#section6.active .title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* 리스트 항목 기본 상태 */
#section6 .an_noti .list li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 순차 등장 효과 */
#section6.active .an_noti .list li:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

#section6.active .an_noti .list li:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

#section6.active .an_noti .list li:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

/* Learn more 버튼 애니메이션 */
#section6 .SMN_effect-31 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#section6.active .SMN_effect-31 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}


/*section7*/
#section7{
  position: relative;
  color:#fff;
}
#section7::before{
  content:'';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/section7_bg.webp) no-repeat center / cover;
  object-fit: cover;
  z-index: -1;
}
#section7 .container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tit_wrap{
  display: flex;
  align-items: center;
  gap:6rem;

}

.tit_wrap .title{
  margin-bottom: 0;
}

.contact{
  padding:6rem 0;
}
.tit_wrap > a{
  font-size: 2.6rem;
  font-weight: 700;
  position: relative;
  padding-left:5rem;
  color:#fff;
}
.tit_wrap > a:hover{
	color:#0BA2F2;
}
.tit_wrap > a i{
  width:4.2rem;
  height: 4.2rem;
  text-align: center;
  line-height: 4.2rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  display: inline-block;
  font-size: 2.4rem;
  position: absolute;
  left:0;
  top:-0.5rem;
}

.contact li + li{
  margin-top:2rem;
}

.contact li {
  border-radius: 10rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px);
  will-change: backdrop-filter;
  padding:3rem 4rem;
  display: flex;
  align-items: center;
  gap:5rem;
  color: rgba(255, 255, 255, 0.80);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 3.6rem */
  letter-spacing: -0.048rem;
}
#section7 .foot {
  border-top: 1px solid rgba(255, 255, 255, 0.50);
  font-weight: 700;
  font-size: 2rem;
  opacity: 0.8;
  padding-top:4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
} 

/* 타이틀 래퍼 */
#section7 .tit_wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#section7.active .tit_wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* contact 리스트 */
#section7 .contact li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#section7.active .contact li:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

#section7.active .contact li:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* footer 영역 */
#section7 .foot {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#section7.active .foot {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.email > div{
	display:flex;
}

.email.kr > div > p{
	width:auto;
	margin-right:1rem;
}

.email > div > p{
	width:24rem;
	font-size:2.4rem;
}
.email > div > a{
	margin-left:0.9rem;
}
.email > div + div{
	margin-top:0.8rem;
}

/* 제목 애니메이션 */
#section1 .title {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.2s;
}

#section1.active .title {
  opacity: 1;
  transform: translateY(0);
}

/* 설명 텍스트 */
#section1 .depth {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.4s;
}

#section1.active .depth {
  opacity: 1;
  transform: translateY(0);
}

/* dashed_box */
#section1 .dashed_box {
  opacity: 0;
  transform: scale(0.95);
}

#section1.active .dashed_box {
  opacity: 1;
  transform: scale(1);
}

/* 리스트 아이템 stagger 효과 */
#section1 .dashed_box .list1 li {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  visibility: hidden;
}

#section1.active .dashed_box .list1 li:nth-child(1) {
  transition-delay: 0.7s;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

#section1.active .dashed_box .list1 li:nth-child(2) {
  transition-delay: 0.9s;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;

}

/* 초기 상태 */
/* 제목 */
#section2 .title {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.6s ease 0.2s;
}

#section2.active .title {
  opacity: 1;
  transform: translateY(0);
}

/* 설명 텍스트 */
#section2 .depth {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.4s;
}

#section2.active .depth {
  opacity: 1;
  transform: translateY(0);
}

/* border_box */
#section2 .border_box {
  opacity: 0;
  transform: scale(0.9);
}

#section2.active .border_box {
  opacity: 1;
  transform: scale(1);
}

/* 리스트 아이템 stagger 효과 - 좌우 번갈아 */
#section2 .border_box .list2 li {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.3s ease;
  visibility: hidden;
}

#section2 .border_box .list2 li:nth-child(even) {
  transform: translateX(-50px);

}

#section2.active .border_box .list2 li:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
  visibility: visible;
}

#section2.active .border_box .list2 li:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
  visibility: visible;
}

#section2.active .border_box .list2 li:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.2s;
  visibility: visible;
}

/* 초기 상태 */
/* 제목 */
#section3 .title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

#section3.active .title {
  opacity: 1;
  transform: translateY(0);
}

/* 설명 텍스트 */
#section3 .depth {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

#section3.active .depth {
  opacity: 1;
  transform: translateY(0);
}

/* 탭 메뉴 */
#section3 .tab-menu li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#section3.active .tab-menu li {
  opacity: 1;
  transform: translateY(0);
}

#section3.active .tab-menu li:nth-child(1) { transition-delay: 0.5s; }
#section3.active .tab-menu li:nth-child(2) { transition-delay: 0.6s; }
#section3.active .tab-menu li:nth-child(3) { transition-delay: 0.7s; }
#section3.active .tab-menu li:nth-child(4) { transition-delay: 0.8s; }
#section3.active .tab-menu li:nth-child(5) { transition-delay: 0.9s; }
#section3.active .tab-menu li:nth-child(6) { transition-delay: 1s; }
#section3.active .tab-menu li:nth-child(7) { transition-delay: 1.1s; }
/* 팀 카드 */
#section3 .swiper .team_card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#section3.active .swiper .team_card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 1.2s;
}
.fp-tableCell {
  height: 100vh !important;
}

.team-swiper .board-list-nodata{
    color: #222;
    font-size: 2.2rem;
    font-weight: 700;
	padding:3rem 0;
	border-bottom:0 none;
}
.section{min-width: 0;padding-top:7.8rem;}
@media screen and (max-width: 1700px){
  #section2 .border_box{width:68rem;}
  .card-container{width: 100%;max-width: 100%;}
  .tit_wrap{gap:4rem;}
  .profile-popup.map .popup-inner{width:100%;}
  .profile-popup.map .map-content{gap:6rem;}
  .map-photo{width:63rem;height:40rem;}
  .map .info .box{padding:5rem 2rem;}
}

@media screen and (max-width: 1600px){
  #main .txt strong{animation: none;font-size: 8rem;white-space: inherit;max-width: 100%;border-right: 0;}
  #main .txt strong br{display: none;}
  #parallax__nav ul{gap:2rem;}
  .container{width: 100%;}
  .tit_wrap{gap:1rem;flex-direction: column;}
  #main .container{width:100%;}
  /* 카드 컨테이너 등장 */
  @keyframes section5Sequence {
    0% {
      opacity: 0;
      transform: translateY(100vh);
      gap: 0;
      width: 160rem;
      visibility: hidden;
    }
    25% {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
      gap: 0;
    }
    50% {
      /* card2 등장 시점에 맞춰 스타일 전환 준비 */
      gap: 0;
    }
    75% {
      /* container 텍스트 등장 */
      gap: 0;
    }
    100% {
      width: 100%;
      gap: 2rem;
    }
  }
  .card-container li{height: 40rem;}



  #section2 .list2 li .item{padding:2rem 3rem;}
  #section2 .border_box{width:60rem;}
  #section2 .txt_wrap{width:54rem;}
  h2.title{font-size:5rem;}
  .depth{font-size:2.1rem;line-height:1.5}
  #section2 .list2 li .item{font-size:2.3rem;}
  #fp-nav{top:1.6rem;}
  #fp-nav ul{gap:1.5rem;}
  #fp-nav ul li .fp-tooltip{font-size:1.7rem;}
}
@media screen and (max-width: 1280px){
  #section2 .border_box{width:100%;height:auto;bottom:0;top:auto;}
  #section2 .list2{height: auto;}
  #section2 .txt_wrap{width:100%;margin-top:5%;max-width:92%;margin:5% auto 0;}
  #section2 .container{max-width:100%;justify-content:flex-start;}
  
  #parallax__nav{background:#fff;height: 100vh;right:0;padding-right: 0;width:0;top:7.8rem;transition: width .5s ease-in-out;opacity: 0;visibility: hidden;}
  #parallax__nav.open{width: 50%;visibility: visible;opacity: 1;}
  #parallax__nav ul{flex-direction: column;align-items: center;padding-top:3rem;}
  .swiper-group .controls{top:-14rem;}
  .team_card a{padding:1.5rem;height:12rem;}
  .team_card a:after{bottom:1rem;right: 1rem;}
  .profile-popup.map .map-content{flex-direction: column;gap:3rem;}
  .map .info .tit{text-align: center;}
  .map .info .box{padding:2rem;}
  .map .info .tit{line-height: 1;font-size:3rem;margin-bottom: 2rem;}
  .map-photo{width:55rem; height:28rem;}
  .close_popup{top:0;}

  .map_info .swiper-slide{padding:3rem 14rem 3rem 2.8rem;}
  .mark3 .pulse-ring:after{margin-top:-1rem;}
}
@media screen and (max-width: 1200px){
  .pulse-ring:after{display: none;}
  .map_wrap{gap:4rem;}
  .map_info .swiper-slide > a{font-size:2.5rem;}
  .list1 > li > p > b{font-size:6rem;}
  .tab-menu li{padding:0.8rem 1.2rem;font-size: 2rem; white-space:nowrap;}
  #section7 .foot{flex-direction: column;align-items: flex-start;}
  #section7 .foot p br{display: none;}
  .card-container li{height: 35rem;}
  .card-container li > span{width:27rem;text-align:center;}
  .team_card .info .name{font-size:2.5rem;}

  #fp-nav ul li .fp-tooltip{letter-spacing:-1px;}
  #fp-nav ul li .fp-tooltip{font-size:1.6rem;}
  .tab-menu li.active{border-radius:1rem;}
  .swiper-group .swiper-button-prev:after,.swiper-group .swiper-button-next::before{width:3rem;height:1.9rem;}
  #section4 .depth{margin-bottom:1.5rem;line-height:1.3;font-size:2rem;}
    #section4 .depth br{display:none;}
}

@media screen and (max-width: 1023px){
	.card-container li > span{width:100%;}
  #main .txt strong{font-size:5rem;letter-spacing: -1px;}
  #main .container{padding-top:7rem;}
  #section1 .container{height: auto; padding: 15rem 0;}
  .list1{flex-direction: column;}
  .list1 > li{height: auto;padding:3rem 2rem;}
  #section2 .container{height: auto;padding:10rem 0 0;max-width: 100%;}

  #section2 .border_box{position: static;}
  #section2 .txt_wrap{margin-top:0;max-width: 92%;margin-left:auto;margin-right:auto;}
  #section2 .list2 li .item{padding:4rem 5rem;}
  h2.title{font-size: 4rem;}
  .depth{font-size: 2rem;}
  .list1 > li > p > b{font-size: 4rem;}
  .list1 > li{font-size:2.5rem;gap:2rem;padding:2rem 1rem;}
  .dashed_box{padding:2rem;}
  .list1{gap:1rem;}
  #section3 .container, #section4 .container,#section6 .container,#section7 .container{height: auto;padding:11rem 0;}
  .team_card .info .name{font-size: 2.2rem;}
  .depth br{display: none;}
  .swiper-group .controls{display: none;}
  .section{padding-top:0;}
  #main{padding-top:7.8rem;}
  .menu-toggle{display:block;}

  
  
  #section5 > *{height: auto;}
  #section5 .container{height: auto;padding:10rem 0 5rem;}
  .SMN_effect-31{top:-8rem;}
  .an_noti .list .down{width:4rem;height: 4rem;}
  .contact li{border-radius: 10px;}
  .profile-popup .popup-content{gap:5rem;}
  .profile-popup .popup-info .popup-name{font-size:4rem;}
  .profile-popup .popup-photo{width:23rem;height: 21rem;}
  .profile-popup .popup-info .bul1{overflow-y:auto;}
  .profile-popup .bul1 li + li{margin-top:1rem;}
  .map_wrap{flex-direction: column;overflow:visible}
  #footer .side_foot #gotop{display: none;}
  #footer .side_foot .gotop{display: flex;}
  .close_popup{position: fixed;top:3rem;right:3rem;}

  #parallax__nav{display: none;}
  #gnb{background:#fff;height: 100vh;right:0;padding-right: 0;width:0;top:7.8rem;transition: width .5s ease-in-out;opacity: 0;visibility: hidden;position: fixed;color:#999;font-size:2rem;font-weight:700;text-align: center;}
  #gnb.open{width: 50%;visibility: visible;opacity: 1;}
  #gnb ul{padding-top:3rem;}
  #gnb li + li{margin-top:2rem;}
  #gnb li a{display: block;color:#999;}

  #section1 .title, #section1 .depth,#section1 .dashed_box, #section1 .dashed_box .list1 li{opacity: 1;}
  #section1 .dashed_box .list1 li{transform: none;}
  .map_info .swiper-slide:before{left:0;}
  #section4 .map_wrap{width:100%;}
  div p{font-size:1.8rem;}
  .an_noti .list .tt{font-size:2rem;}
  
  .contact li,.email > div > p{font-size:2rem;}
  .email > div > p{width:21rem;}

  
  .swiper.team-swiper .swiper-slide.group-slide,.swiper.team-swiper .swiper-wrapper{grid-template-columns: repeat(4, 1fr) !important;}
  .swiper-group .swiper-pagination{opacity:1;visibility:visible;}
}

@media screen and (max-width: 768px){
  .contact li{flex-direction: column;padding:2rem;text-align: center;gap:2rem;}
  .dashed_box{margin-top:4rem;}
  #section2 .list2 li .item{padding:2rem;font-size:2rem;}
  #section2 .list2 li .item .icon{width: 5rem;height: 5rem;}
  #section2 .list2 li button:before{top:1rem;right:1rem;}
  #section2 .list2 li .item > p{width: calc(100% - 4rem);font-size:2.5rem;}
  #section2 .list2 li .item .desc{font-size:1.8rem;}
  .tab-menu{overflow-x:auto;padding-bottom:5px; overflow-y: hidden;}
  #section2 .list2 li.active .desc span{font-size:2rem;}
  #section2 .list2 li.active .desc span:last-child{font-size:1.7rem;}

.card-container {
    flex-direction: column;
    width: 100%;
    gap: 2rem;
  }

  .card-container li {
    height: auto !important;
	transition:all 1s;
  }
  
  .active .card-container li{
	height:30rem;
  }

  .card-container li.card2 {
    width: 100%;
	height:0;
  }

  #section5.active .card-container {
    animation: section5SequenceMobile 1.5s ease forwards !important;
  }

  #section5.active .card2 {
    animation: card2InMobile 0.8s ease forwards !important;
    animation-delay: 0.5s !important;
  }

  #section5.active .container {
    animation: containerInMobile 0.5s ease forwards !important;
    animation-delay: 1s;
	visibility:visible;
  }

  /* 모바일용 단순화된 애니메이션 */
  @keyframes section5SequenceMobile {
    0% {
      opacity: 0;
      transform: translateY(30px);
      gap: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      gap: 2rem;
    }
  }

  @keyframes card2InMobile {
    0% {
      opacity: 0;
	  height:0;
      transform: translateY(30px) scale(0);
    }
    100% {
      opacity: 1;
	  height:30rem;
      transform: translateY(0) scale(1);
	  visibility:visible;
    }
  }

  @keyframes containerInMobile {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .profile-popup .popup-content{flex-direction: column;gap:2rem;}
  .profile-popup .popup-info .popup-name{font-size: 2.6rem;padding-bottom: 2rem;}
  .profile-popup .popup-info .popup-role > p{font-size:1.6rem;}
  .profile-popup .popup-info .popup-role{margin:2rem 0;}
  .map .info .box li i{width:3rem;height: 3rem;}
  .map .info .address{margin-top:2rem;flex-direction:column;gap:1.5rem;}
  
  .map-photo{width:40rem;height:25rem;}
  .map .info .box li > p{display: flex;align-items: center;gap:1rem;}
  .map .info .box li{flex-direction: row;gap:2rem;}
  .map .info .box{flex-direction: column;}
  .map .info .box li i{margin-bottom: 0; }
  .map .info .box li p span{margin-top:0;}
  
  .swiper.team-swiper .swiper-slide.group-slide, .swiper.team-swiper .swiper-wrapper{grid-template-columns: repeat(3, 1fr) !important;}

	.swiper.team-swiper .swiper-slide,.swiper.team-swiper .swiper-slide.group-slide{height:13rem !important; min-height:13rem !important; max-height:13rem !important;}
	.swiper.team-swiper{height:32rem;}
	.team_card a{min-height:auto;height:100%;}
	
	.email > div > p{width:auto;margin-right:4px;}
}
@media screen and (max-width: 580px){
  .map .info .address{flex-direction: column;}
  .map .info .address > p{padding-right: 0;}
  .an_noti .list li{font-size:2rem;padding:2rem 0;gap:1.5rem;}
  .an_noti .list li .date{display: none;}
  .tab-menu li{white-space:nowrap;text-align:center;}
  
  h2.title, .depth, #section7 .foot, #main .txt strong{text-align:center;}
  .visual .controls{justify-content: center;}
  #section2 .container{gap:9rem;}
  #section2 .list2 li .item > p,
  #section2 .list2 li.active .item > p{font-size:2.2rem;}
  #section2 .list2 li .item{gap:1.5rem;}
  #section2 .list2 li .item{padding:2.5rem;}
  #section2 .list2 li button:before{font-size:3.2rem;}
  .map_img{margin-bottom:3rem;}
  .map-photo{width:100%;}
	

  
}
@media screen and (max-width: 530px){
  #section1 .container, #section3 .container, #section4 .container,   #section6 .container,#section7 .container{padding: 11rem 0;}
  #section2 .container{padding:12rem 0 0;}
  .tab-menu{grid-template-columns: repeat(2, 1fr);}
  .list1 > li{font-size:1.9rem;}
  .list1 > li > p span{font-size:2.2rem;}
  .list1 > li > p > b{font-size:2.5rem;}
  .dashed_box{padding:1rem;}
  .tit_wrap > a{font-size:2.2rem;}
  .contact li{gap:1rem;font-size:2rem;}
  #section7 .foot{font-size:1.8rem;}
  .contact{padding:3rem 0;}

  .SMN_effect-31{position: static; top:auto;margin-top:2rem;display: block;text-align: center;}
  .tab-menu li{padding:1rem;display: flex;align-items: center;justify-content: center;}
  .depth{line-height: 1.2;}
  .profile-popup .popup-info .popup-role p{font-size: 1.6rem;}
  .profile-popup .popup-info .popup-role p + p:before{margin:0 .5rem;vertical-align: initial;}
  .map_wrap{width: 100%;gap:0;}
  .map_info.swiper-wrapper{width: 100%;}
  .map_info .swiper-slide:before{left:0;}
  .map_info .swiper-slide{padding:2rem 0 2rem 3rem;}
  #gnb.open{width:80%;}
  
  .email > div > p{width:100%}
  .email > div{flex-direction:column;}
  .email > div > span{display:none;}
  .email > div > a{margin-left:0;line-height:1.1;}
  .email > div + div{margin-top:1.3rem;}
  
  .map .info .box li p b{font-size:2rem;}
  .map .info .address > p span{text-align:center;}
  .map .info .tit{font-size:2.5rem;}
}
@media screen and (max-width: 480px){
  .map_img{width:37rem;height: auto;}
  .map_img li.mark1{top:6.7rem;left:10rem;}
  .map_img li.mark2{top:7.6rem;left:13.3rem;}
  .map_img li.mark3{top:13.6rem;left:10.5rem;}
  .map_img li.mark4{top:14.3rem;left:13.5rem;}
  .map_img li.mark5{top:4rem;left:12rem;}
  
  .map_info .swiper-slide > a{display: block;font-size:2.2rem;}
  .swiper.team-swiper .swiper-slide.group-slide, .swiper.team-swiper .swiper-wrapper{grid-template-columns: repeat(2, 1fr) !important;}
}
@media screen and (max-width: 414px){
  .visual .controls{margin-top:3rem;}
  .profile-popup .close-btn{width: 10rem;}
  .map_info .swiper-slide{padding:2rem 0 2rem 2rem;}
  .map_info .swiper-slide:before{width:1.5rem;height: 1.5rem;border-width: 0.4rem;}
  .map_info .more_view{padding:0 1rem;}
  .header_wrap{width:100%;max-width:90%;}
  
}

@media screen and (max-width: 380px){
	.team_card .info .name{font-size:1.8rem;}
	.map_info .swiper-slide > a{font-size:1.8rem;}
	.map_info .more_view{font-size:1.5rem;height:3.6rem;line-height:3.5rem;}
	.visual .swiper-pagination-bullet{width:4rem;vertical-align: super;}
	#main .txt strong{font-size:4rem;}
	.map .info .box li p b{font-size:1.7rem;}
	.map .info .box{padding:1.5rem;}
	.map .info .box li i{width:2rem;height:2rem;}
	.map .info .box li{gap:1rem;}
	.map-photo{height:18rem;}
	.map .info .address > p{font-size:1.7rem;}
	.map .info .address{gap:1rem;}
	.profile-popup .popup-photo{width:18rem;height:18rem;}
	.swiper.team-swiper .swiper-slide, .swiper.team-swiper .swiper-slide.group-slide{height: 11.5rem !important;
        min-height: 11.5rem !important;
        max-height: 11.5rem !important;}
	.tab-menu li{font-size:1.8rem;}
	#section2 .list2 li .item{gap:1rem;}
	#section2 .list2 li .item > p, #section2 .list2 li.active .item > p{font-size:2rem;}
	#section2 .list2 li .item .icon{width:4rem;height:4rem;}
	#section2 .list2 li.active .desc span{font-size:1.8rem;}
	#section2 .list2 li.active .desc span:last-child{font-size:1.6rem;}
	.map_img{width:30rem;}
	.map_img li.mark5{top:3rem;left:10rem;}
	.map_img li.mark1{top:5.4rem;left:7.9rem;}
	.map_img li.mark2{top:5.9rem;left:10.5rem;}
	.map_img li.mark3{top:10.8rem;left:8.4rem;}
	.map_img li.mark4{top:11.3rem;left:10.6rem;}
	.tit_wrap > a{line-height:1.2;font-size:1.7rem;padding-left:3.6rem;}
	.tit_wrap > a i{width:3rem;height:3rem;line-height:3rem;font-size:1.7rem;top:0;}
	.contact li{font-size:1.7rem;}
	.contact li img{width:2.7rem;}
	.email > div > p{margin-right:0;font-size:1.8rem;color:#fff;}
	#section7 .foot > p{font-size:1.6rem;}
	#section7 .foot > p + p{margin-top:1rem;}
	#section7 .foot{padding-top:2rem;}
	.an_noti .list .tt{font-size:1.8rem;}
	h2.title{font-size:3.6rem;}
	#section2 .title{margin-bottom:2.4rem;}
	.depth{font-size:1.7rem;}
	#section2 .container{padding:8rem 0 0;gap:5rem;}
	#section1 .container, #section3 .container, #section4 .container, #section6 .container, #section7 .container{padding:8rem 0;}
	#section5 .container{padding:8rem 0 4rem;}
}


@media screen and (max-width: 320px){
	.team_card .info{font-size:1.4rem;}
	.team_card .info .name{font-size:1.6rem;}
	.map_info .more_view{font-size:1.4rem;}
	.map_info .swiper-slide{padding:1.3rem 2rem 1.3rem 3rem;}
	.map_info .more_view{position:static;transform:none;padding:0 2rem;width:100%;margin-top:1rem;}
	.team_card a{padding:1rem;}
}

@media screen and (min-width: 1024px) and (max-height: 800px){
	.map_img{height:auto;width:37rem;}
	.map_img li.mark1{top:7.07rem;left:9.9rem;}
	.map_img li.mark2{top:7.8rem;left:13.3rem;}
	.map_img li.mark3{top:14.1rem;left:10.1rem;}
	.map_img li.mark4{top:14.8rem;left:13.25rem;}
	.pulse-ring:after{display:none;}
	.map-photo{width:41rem;}
	.map .info .box li i{margin-bottom:0;}
}
@media screen and (max-width: 1024px) and (max-height: 855px){
	.profile-popup .popup-info .bul1{max-height:27rem;}
}