/*더보기 버튼*/
button.more{padding:0.8rem;background-color:#fff;border:1px solid #888888;transition:0.2s;}
button.more:hover{background-color:var(--color-primary);color:#fff;border:1px solid var(--color-primary);}
/* sec01 slide */
.section-hero { position: relative; width:100%; height:80vh; min-height:520px; overflow:hidden !important; }
.mySwiper, .swiper-wrapper, .swiper-slide { height:100%; }
.slide-bg {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center center;
  transform: scale(1.12); /* 초기엔 약간 확대 */
  transition: transform 8s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  z-index:1;
}
.mySwiper .swiper-slide {
  position: relative;
  overflow: hidden; 
  box-sizing: border-box;
  width: 100% !important;
}
.swiper-slide-active .slide-bg {
  transform: scale(1);
}

.slide-content {
  position: relative;
  z-index:2;
  max-width:760px;
  padding-left:6%;
  top:50%;
  transform:translateY(-50%);
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.subtitle{opacity:0;transform:translateY(18px);margin:0 0 .4rem;letter-spacing:0.06em;}
.title{line-height:1.3em;margin:0 0 1rem;padding:2rem 0;opacity:0;transform:translateY(28px);}
.desc{opacity:0;transform:translateY(20px);}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.slide-content.anim .subtitle { animation: fadeUp 560ms ease forwards 160ms; }
.slide-content.anim .title    { animation: fadeUp 660ms ease forwards 360ms; }
.slide-content.anim .desc     { animation: fadeUp 560ms ease forwards 640ms; }

.swiper-pagination { z-index: 5; bottom: auto !important; left: 6% !important;bottom: 12% !important; text-align:left; margin-top: 1.5rem; display: flex; align-items: center; }
.swiper-pagination-bullet {
  width:12px; height:12px; display:inline-block; border-radius:50%;
  background: rgba(255,255,255,0.45) !important; margin-right:25px !important; position:relative;
  transition: all .28s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.swiper-pagination-bullet-active {
  background: rgba(255,255,255,1) !important;
/*   transform: scale(1); */
}

.swiper-pagination-bullet-active::after{
  content: "";
  position: absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:19px; height:19px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.85);
  box-sizing: border-box;
  z-index:-1;
}

/* sec02 slide-section */
.slider{width:auto;overflow:hidden;position:relative;margin: 0 auto;} 
.slider-wrapper {display:flex;transition:transform 0.4s ease-in-out;} 
.slide{flex: 1;height:auto;/* display:flex; */align-items:center;margin:0;} 
.s-cont{width:100%;height:auto;aspect-ratio: 1 / 1; background-size: cover; background-position: center center; background-repeat: no-repeat; display: block;} 
.s-tcont{padding:2rem 1.5rem;z-index: 5; pointer-events: auto; cursor: pointer;} 
.s-tcont>div{width: 100%;flex-direction:column;display:flex;justify-content:space-between;}
.s-tcont>div .title-row{display: flex;flex-direction: row;justify-content: space-between;}
.title-row{margin-bottom:0.7rem;}
.mobile-ui {display:none;} 
/*sec02 slide-text&icon*/
/* 기본: CTA(링크)와 내부 요소 정렬 */
.s-tcont .cta { display: inline-flex; align-items: center; background: transparent; border: none; color: #999; text-decoration: none; cursor: pointer; transition: color .28s ease; }
.s-tcont .bar { display: inline-block; width: 30px; height: 3px; background: currentColor; transform-origin: right center; transform: scaleX(0); transition: transform .28s ease; border-radius: 0px; margin-right: -18px; }
.s-tcont .icon{z-index: 1;}
.s-tcont .icon, .s-tcont .icon path { transition: stroke .28s ease, color .28s ease, opacity .28s ease; color: inherit; stroke: currentColor; }
.s-tcont:hover .cta,
.s-tcont:focus-within .cta,
.s-tcont .cta:hover,
.s-tcont .cta:focus { color: #0066cc; }
.s-tcont:hover .bar,
.s-tcont:focus-within .bar,
.s-tcont .cta:hover .bar,
.s-tcont .cta:focus .bar { transform: scaleX(1); }

.s-tcont:focus-within { outline: none; }
.s-tcont .cta:focus-visible { box-shadow: 0 0 0 3px rgba(0,102,204,0.12); border-radius: 6px; }

/*sec03*/
.msec-03 .s-tcont{color:#ffffff;}
.msec-03 .s-tcont:hover .cta,
.msec-03 .s-tcont:focus-within .cta,
.msec-03 .s-tcont .cta:hover,
.msec-03 .s-tcont .cta:focus { color: #ffffff; }

/*sec04*/
.sec-media {margin-bottom: 3rem;}
.media-sepa{display:flex;flex-direction:row;gap:4rem;}
.media-sepa>div{/*width:50%;*/flex:1 1 50%;min-width:300px;box-sizing:border-box;}
/* .media-sepa>div>div{display:flex;justify-content:space-between;align-items:center;} */
.media-sepa .media-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:3rem;
}
.media-sepa .media-body{ display:block; }

/*sec04 icon*/
/* 기본: CTA(링크)와 내부 요소 정렬 */
.kboard-hwaikeul-gallery-latest-notice .cta { display: inline-flex; align-items: center; background: transparent; border: none; color: #999; text-decoration: none; cursor: pointer; transition: color .28s ease; }
.kboard-hwaikeul-gallery-latest-notice .bar { display: inline-block; width: 25px; height: 3px; background: currentColor; transform-origin: right center; transform: scaleX(0); transition: transform .28s ease; border-radius: 0px; margin-right: -18px; }
.kboard-hwaikeul-gallery-latest-notice .icon{z-index: 1;}
.kboard-hwaikeul-gallery-latest-notice .icon, .kboard-hwaikeul-gallery-latest-notice .icon path { transition: stroke .28s ease, color .28s ease, opacity .28s ease; color: inherit; stroke: currentColor; }
.kboard-latest-title:hover .cta,
.kboard-latest-title:focus-within .cta,
.kboard-latest-title .cta:hover,
.kboard-latest-title .cta:focus { color: #0066cc; }
.kboard-latest-title:hover .bar,
.kboard-latest-title:focus-within .bar,
.kboard-latest-title .cta:hover .bar,
.kboard-latest-title .cta:focus .bar { transform: scaleX(1); }

.kboard-latest-title:focus-within { outline: none; }
.kboard-latest-title .cta:focus-visible { box-shadow: 0 0 0 3px rgba(0,102,204,0.12); border-radius: 6px; }

/* aspect-ratio 미지원 브라우저용 폴백 */
@supports not (aspect-ratio: 1 / 1) {
  .s-cont{
    padding-top: 100%;
    position: relative;
  }
}

@media screen and (min-width:1921px){ 
	.slider-wrapper { gap: 40px; } 
	.slide { flex: 0 0 calc((100% - 80px) / 3); /* gap/마진에 따라 값 조정 */ } 
} 
@media screen and (min-width:1200px) and (max-width: 1920px){ 
	.slider-wrapper { gap: 40px; } 
	.slide { flex: 0 0 calc((100% - 80px) / 3); /* gap/마진에 따라 값 조정 */ } 
} 
@media screen and (min-width:1024px) and (max-width: 1200px){ 
	.slider-wrapper { gap: 30px; } 
	.slide { flex: 0 0 calc((100% - 60px) / 3); /* gap/마진에 따라 값 조정 */ } 
} 
@media screen and (min-width:769px) and (max-width:1024px){ 
	.slider-wrapper { gap: 20px; } 
	.slide { flex: 0 0 calc((100% - 40px) / 3); /* gap/마진에 따라 값 조정 */ } 
/*   .title { font-size:2.2rem; } */
	.section-hero { height:65vh; min-height:420px; }
} 
@media screen and (max-width: 768px){ 
	.slider-wrapper { display: block; gap: 0; } /* Swiper가 내부 제어함 */ 
	.slide { margin: 0; box-sizing: border-box; flex: 0 0 100%; width: 100% !important; } 
	.mobile-ui {display: flex; padding: 8px 0; align-items: center; justify-content: space-between; gap: 25px; box-sizing: border-box;} 
	.page-indicator { font-size: 14px; white-space: nowrap; flex: 0 0 auto; } 
	.progress-bar { width: 100%; height: 5px; background:#f7f7f7; border-radius:6px; overflow:hidden;position: relative; } 
	.progress { height: 100%; border-radius: 6px; position: absolute; transition: left .28s cubic-bezier(.2, .8, .2, 1); will-change: left; background: #dbdbdb; /*transition: width .25s linear;*/ } 
	.media-sepa{gap:0; flex-direction: column;} .media-sepa>div{width: auto;}
	.media-sepa>div:nth-child(2) { margin-top: 3rem; }
	
	.s-tcont .bar { width: 28px; }
	
	.slide-content { padding-left:4%; max-width:90%; }
/*   .title { font-size:1.6rem; }
	.subtitle { font-size:.9rem; } */
	.swiper-pagination { bottom: 18px; left:4% }
	
	/*sec03*/
	.msec-03{ height: 380px; margin-bottom: 100%;}
	.msec-03 .s-tcont{color:#000000;}
}