/* 비주얼 이미지 */
#visual .visual01{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#visual .visual02{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }
#visual .visual03{ background: url("/img/main/visual03.jpg") no-repeat center center / cover; }


/* common */
#fullpage .w1400{ height: auto; }
#fullpage .ptH{ padding-top: var(--headerH); }
#fullpage .plusTit{ font-weight: 700; color: #FFF; letter-spacing: -0.02em; }
#fullpage .plusTit::after{ content: ""; display: inline-block; width: 22px; height: 22px; background: url("/img/svg/plus.svg") no-repeat center center / contain; vertical-align: top; margin-left: 10px; filter: grayscale(1) brightness(2); -webkit-filter: grayscale(1) brightness(2); }
#fullpage .plusTit.black{ color: #222; }
#fullpage .plusTit.black::after{ filter: grayscale(1) brightness(1.5) invert(1); -webkit-filter: grayscale(1) brightness(1.5) invert(1); }


/* visual */
#visual{ position: relative; }
#visual .visualSlide{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#visual .visualSlide .swiper-wrapper, 
#visual .visualSlide .swiper-slide{ height: 100%; }

#visual .content{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 100; }
#visual .content h2{ font-weight: 200; color: #FFF; letter-spacing: -0.02em; text-align: center; margin-bottom: 75px; -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0); -webkit-transform:translate3d(0, 0, 0); }
#visual .content h2 strong{ font-weight: 700; }
#visual .content h2 span{ display: inline-block; opacity: 0; transition: all 0.6s; will-change: transform. opacity; }
#visual .content h2 em span{ transform: translateX(20px); }
#visual .content h2 strong span{ transform: scale(1.12) translateY(-30px); }
#visual .content h2.on span{ opacity: 1; transform: scale(1) translate(0, 0) !important; }

#visual .content .flex-box{ display: flex; justify-content: space-between; }
#visual .content .flex-box > div{ width: calc((100% - 30px) / 2); }

#visual .content .vpBox{ position: relative; }
#visual .content .vp .swiper{ height: auto; }
#visual .content .vp .video,
#visual .content .vp figure{ padding: 28.125% 0; position: relative; overflow: hidden; border-radius: 20px; }
#visual .content .vp figure{ padding-bottom: 28.125%; margin: 0; }
#visual .content .vp .video video,
#visual .content .vp .video button,
#visual .content .vp figure img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#visual .content .vp .video video, 
#visual .content .vp figure img{ width: 100% }
#visual .content .vp .video::after{ content: ""; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#visual .content .vp .video video{ height: 100%; }
#visual .content .vp .video button{ width: 69px; height: 69px; background: none; border: 1px solid #FFF; border-radius: 50%; opacity: 0.5; z-index: 10; transition: opacity 0.4s; }
#visual .content .vp .video.off::after{ display: none; }
#visual .content .vp .video.off button{ display: none; }

#visual .content .vp .dots{ display: flex; justify-content: center; position: absolute; bottom: 25px; left: 0; z-index: 100; }
#visual .content .vp .dots span{ width: 10px; height: 10px; background: rgba(255, 255, 255, 0.3); opacity: 1; margin: 0; }
#visual .content .vp .dots span:not(:last-child){ margin-right: 15px; }
#visual .content .vp .dots span.swiper-pagination-bullet-active{ background: #FFF; }

#visual .content .link .grid{ height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px; }
#visual .content .link .grid .item{ display: flex; flex-direction: column; position: relative; z-index: 10; padding: 40px; }
#visual .content .link .grid .item::before{ content: "";  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transition: background 0.4s; }
#visual .content .link .grid .item p{ flex: 1 0 auto; font-size: 19px; font-weight: 500; color: #151515; letter-spacing: -0.02em; margin-bottom: 10px; transition: color 0.4s; }
#visual .content .link .grid .item p::after{ content: ""; display: inline-block; width: 7px; height: 13px; background: url("/img/svg/visual_arrow.svg") no-repeat center center / contain; margin-left: 15px; transition: filter 0.4s, margin 0.4s; }
#visual .content .link .grid .item .icon{ text-align: right; }
#visual .content .link .grid .item .icon img{ transition: filter 0.4s; }

@media screen and (hover: hover){
	#visual .content .vp .video button:hover{ opacity: 1; }

	#visual .content .link .grid .item:hover::before{ background: var(--color-orange); }
	#visual .content .link .grid .item:hover p{ color: #FFF; }
	#visual .content .link .grid .item:hover p::after, 
	#visual .content .link .grid .item:hover .icon img{ filter: invert(1) brightness(13); -webkit-filter: invert(1) brightness(13); }
	#visual .content .link .grid .item:hover p::after{ margin-left: 20px; }
}


/* news */
#news{ background: url("/img/main/news_bg.jpg") no-repeat center right / cover; }
#news .title{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
#news .title .tit{ display: flex; align-items: flex-end; }
#news .tabMenu{ margin-left: 40px; }
#news .tabMenu ul{ display: flex; flex-wrap: wrap; }
#news .tabMenu ul li{ background: transparent; font-size: 20px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; padding: 12px 30px; border-radius: 100px; cursor: pointer; transition: background 0.4s, color 0.4s; }
#news .tabMenu ul li.active{ background: #FFF; font-weight: 600; color: var(--color-orange); }

#news .btns{ display: flex; }
#news .btns *{ font-size: 20px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; }
#news .btns > *:not(:last-child){ margin-right: 7px; }
#news .btns ul li:not(:first-child){ display: none; }
#news .btns button{ width: 50px; height: 50px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; padding: 0; }
#news .btns a{ display: flex; justify-content: center; align-items: center; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 0 30px; }

#news .tab-content .tab:not(:first-child){ display: none; }

#news .swiper-slide a{ display: block; background: #FFF; border-radius: 10px; padding: 30px; transition: background 0.4s; }
#news .swiper-slide a:not(:last-of-type){ margin-bottom: 10px; }
#news .swiper-slide span{ display: inline-block; background: var(--color-orange); font-size: 16px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; line-height: 1; padding: 7px 15px; border-radius: 10px; transition: background 0.4s, color 0.4s; }
#news .swiper-slide dl{ margin: 10px 0 40px; }
#news .swiper-slide dl dt,
#news .swiper-slide dl dd{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color 0.4s; }
#news .swiper-slide dl dt{ font-size: 26px; font-weight: 600; color: #151515; letter-spacing: -0.02em; line-height: 1.5; }
#news .swiper-slide dl dd{ font-size: 18px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.4; margin-top: 20px; }
#news .swiper-slide p{ font-size: 16px; font-weight: 300; color: #666; letter-spacing: -0.02em; transition: color 0.4s; }

@media screen and (hover: hover){
	#news .swiper-slide a:hover{ background: var(--color-orange); }
	#news .swiper-slide a:hover span{ background: #FFF; color: var(--color-orange); }
	#news .swiper-slide a:hover dl dt{ color: #FFF; }
	#news .swiper-slide a:hover dl dd{ color: rgba(255, 255, 255, 0.8); }
	#news .swiper-slide a:hover p{ color: rgba(255, 255, 255, 0.5); }
}


/* community */
#fullpage .community {
  background: #f5f5f5 url("/img/main/communityBg.png") no-repeat right center/50% 100%;
}

#fullpage .community .swiper-pagination {
  width: 100%;
  height: 2px;
  background: #dddddd;
}

#fullpage .community .swiper-pagination .swiper-pagination-progressbar-fill {
  background: var(--color-orange);
}

#fullpage .community .box {
  padding: 50px 0 0;
}

#fullpage .community .contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#fullpage .community .infoBox {
  width: 50%;
  padding: 40px 80px 0 0;
}

#fullpage .community .infoBox .text h2 {
  color: #222222;
  font-weight: 700;
  line-height: 1.1666;
  margin: 0 0 25px;
}

#fullpage .community .infoBox .text p {
  color: #555555;
  font-size: 2.0rem;
  font-weight: 300;
}

#fullpage .community .communityBox > div {
  position: absolute;
  top: -222222px;
  left: -222222px;
}

#fullpage .community .communityBox > div.on {
  position: relative;
  top: auto;
  left: auto;
}

#fullpage .community .communitySlideBox {
  margin: 110px 0 0;
  overflow: hidden;
}

#fullpage .community .communitySlideBox .item h5 {
  color: #222222;
  font-size: 2.2rem;
  font-weight: 600;
}

#fullpage .community .communitySlideBox .item h6 {
  color: #333333;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

#fullpage .community .communitySlideBox .item .info {
  height: 240px;
  background: #ffffff;
  padding: 30px 20px;
  margin: 20px 0 0;
}

#fullpage .community .communitySlideBox .item ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px 0;
  margin: 25px 0 0;
}

#fullpage .community .communitySlideBox .item ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 5px;
}

#fullpage .community .communitySlideBox .item i {
  color: var(--color-orange);
  font-size: 1.7rem;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

#fullpage .community .communitySlideBox .item p {
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.375;
}

#fullpage .community .communitySlideBox .item p a {
  color: #666666;
}

#fullpage .community .optionBox,
#fullpage .community .buttonBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#fullpage .community .optionBox {
  gap: 0 20px;
  margin: 35px 0 0;
}

#fullpage .community .buttonBox {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 0 15px;
}

#fullpage .community .buttonBox button i {
  color: #aaaaaa;
  font-size: 2.0rem;
}

#fullpage .community .buttonBox button:hover i {
  color: var(--color-orange);
}

#fullpage .community .mapBox {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#fullpage .community .mapBox .map {
  width: 68%;
}

#fullpage .community .markerCls {
  fill: #aaaaaa;
  opacity: 1;
}

#fullpage .community .regionOn:hover .mapCls {
  fill: var(--color-orange);
}

#fullpage .community .regionOn:hover .textCls {
  fill: #ffffff;
}

#fullpage .community .regionOn:hover .markerCls {
  fill: #ffffff;
  opacity: 1;
}

#fullpage .community .regionOn.on .markerCls {
  fill: #ffffff;
}


/* notice */
#notice{ background: url("/img/main/notice_bg.jpg") no-repeat center center / cover; }
#notice *{ line-height: 1.3; }
#notice .plusTit{ margin-bottom: 50px; }
#notice .flex-box{ display: flex; justify-content: space-between; }
#notice .flex-box > div{ width: calc((100% - 30px) / 2); }
#notice .tit{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
#notice .tit h6{ font-size: 24px; font-weight: 600; color: #444; letter-spacing: -0.02em; }
#notice .tit a{ display: inline-block; font-size: 18px; font-weight: 500; color: #999; letter-spacing: -0.02em; padding: 10px; margin-right: -10px; margin-bottom: -10px; }
#notice .tit a::after{ content: "\e93f"; display: inline-block; font-family: "xeicon"; font-size: 19px; font-style: normal; margin-left: 5px; vertical-align: middle; }
#notice .item .img{ position: relative; }
#notice .item .text{ background: #FFF; transition: background 0.3s; }
#notice .item i{ width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; background: var(--color-orange); border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%) scale(0); overflow: hidden; transition: transform 0.3s; }
#notice .item i::before{ content: ""; width: 32px; height: 32px; background: url("/img/svg/link_arrow.svg") no-repeat center center / contain; position: relative; left: -100%; transition: left 0.3s 0.2s; }
#notice figure{ display: block; position: relative; overflow: hidden; margin: 0; }
#notice figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#notice .event .list-box .item{ margin-bottom: 15px; }
#notice .event .list-box .item:last-child{ margin-bottom: 0; }
#notice .event a{ display: flex; border-radius: 10px; overflow: hidden; }
#notice .event .img{ width: 45%; position: relative; }
#notice .event .img span{ width: 30px; height: 30px; background: var(--color-orange); border-radius: 10px; font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; line-height: 30px; text-align: center; position: absolute; top: 15px; left: 15px; z-index: 10; }
#notice .event figure{ height: 100%; padding-bottom: 71%; }
#notice .event .text{ align-content: center; display: flex; flex-direction: column; width: 55%;padding: 30px; }
#notice .event .text h6,
#notice .event .text dl dd{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#notice .event .text .category{ display: flex; flex-wrap: wrap; gap: 5px; }
#notice .event .text span{ max-width: max-content; display: inline-block; background: var(--color-orange); border-radius: 10px; font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; line-height: 1; padding: 6px 15px; margin-bottom: 15px; transition: background 0.3s, color 0.3s; }
#notice .event .text .close{ background: #DDD; color: #999; }
#notice .event .text h6{ flex: 1 0 auto; font-size: 22px; font-weight: 600; color: #151515; letter-spacing: -0.02em; margin-bottom: 15px; transition: color 0.3s; }
#notice .event .text dl{ display: flex; flex-wrap: wrap; font-size: 15px; letter-spacing: -0.02em; }
#notice .event .text dl > *:not(:last-of-type){ margin-bottom: 5px; }
#notice .event .text dl dt{ width: 105px; font-weight: 600; color: #555; padding-right: 10px; transition: color 0.3s; }
#notice .event .text dl dd{ width: calc(100% - 105px); font-family: "Prompt", serif; font-weight: 300; color: #666; transition: color 0.3s; }

#notice .news{ display: flex; flex-direction: column; }
#notice .news .list-box{ flex: 1 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
#notice .news .list-box .item{ width: calc((100% - 15px) / 2); margin-right: 15px; border-radius: 10px; overflow: hidden; }
#notice .news .list-box .item:last-child{ margin-right: 0; }
#notice .news .list-box .item a{ height: 100%; display: flex; flex-direction: column; }
#notice .news .list-box .item a > div{ width: 100%; }

/* 25.03.26 썸네일 비율 수정 */
/* #notice .news figure{ padding-bottom: 96.4%; } */
#notice .news figure { padding-bottom: 135%; }
#notice .news .list-box .item { height: fit-content; }
/*-----------*/

#notice .news .text{ flex: 1 0 auto; display: flex; flex-direction: column; padding: 30px; padding-top: 20px; }
#notice .news .text h6{ flex: 1 0 auto; font-size: 20px; font-weight: 600; color: #333; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 20px; transition: color 0.3s; }
#notice .news .text p{ font-family: "Prompt", serif; font-size: 14px; font-weight: 300; color: #666; letter-spacing: -0.02em; transition: color 0.3s; }

#notice .item:hover .text{ background: var(--color-orange); }
#notice .item:hover .text span:not(.close){ background: #FFF; color: var(--color-orange); }
#notice .event .item:hover .text h6{ color: #FFF; }
#notice .event .item:hover .text dl dt{ color: #FFF; }
#notice .event .item:hover .text dl dd{ color: #FFF; }
#notice .news .item:hover .text h6{ color: #FFF; }
#notice .news .item:hover .text p{ color: #FFF; }