/* ==================================================
  폰트
================================================== */
html, body {overflow-x:hidden;}
@font-face {
    font-family: 'SchoolSafeBoardMarker';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/HakgyoansimBoadmarkerR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GyeonggiMillenniumTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GyeonggiMillenniumTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GyeonggiMillenniumTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'GyeonggiMillenniumTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/TitleV.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'High1WonchuriTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-2@1.0/high1WonchuriTitleL.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'High1WonchuriTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-2@1.0/high1WonchuriTitleM.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'High1WonchuriTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-2@1.0/high1WonchuriTitleB.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

body { font-family: 'SchoolSafeBoardMarker', sans-serif;  font-weight:300; overflow-X:hidden; }


/* ======================
   Motion – 자연스러운 등장
====================== */
/* .reveal {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition:
    opacity .4s cubic-bezier(.52,1,.66,1),
    transform .4s cubic-bezier(.52,1,.66,1);
}
.reveal.show {
  opacity: 1;
  transform: none;
} */

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.94);
  transition:
    opacity .7s ease-out,
    transform 2s cubic-bezier(.16,1,.3,1.25);
  will-change: transform, opacity;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal.delay-1 { transition-delay: .04s; }
.reveal.delay-2 { transition-delay: .09s; }
.reveal.delay-3 { transition-delay: .14s; }
.reveal.delay-4 { transition-delay: .19s; }
.reveal.delay-5 { transition-delay: .24s; }
.reveal.delay-6 { transition-delay: .29s; }
.reveal.delay-7 { transition-delay: .34s; }

.reveal2 {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 0.6s ease-out,
    transform 2s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}

.reveal2.show {
  opacity: 1;
  transform: translateX(0);
}
.reveal2.delay-1 { transition-delay: 0.18s; }
.reveal2.delay-2 { transition-delay: 0.36s; }
.reveal2.delay-3 { transition-delay: 0.54s; }
.reveal2.delay-4 { transition-delay: 0.72s; }
.reveal2.delay-5 { transition-delay: 0.90s; }
.reveal2.delay-6 { transition-delay: 1.08s; }
.reveal2.delay-7 { transition-delay: 1.26s; }


/* 📱 모바일에서는 아래 → 위 */
@media (max-width: 768px) {
  .reveal2 {
    transform: translateY(28px);
  }

  .reveal2.show {
    transform: translateY(0);
  }
}

/* ======================
parallax-bg 배경움직임
====================== */
.parallax-bg {
  transition: all 0.8s ease-out;
  will-change: filter, opacity, box-shadow;
}


/* ==================================================
  공통스타일
================================================== */
.compadding {padding-top:clamp(40px, 8.5vw, 130px);
padding-bottom:clamp(40px, 8.5vw, 130px);
}

section h3 {font-size:clamp(25px, 5.5vw, 55px);
font-family: 'High1WonchuriTitle'; line-height:1.3; padding:16px 0px; }
section h4 {font-size:clamp(20px, 5.5vw, 30px); color: var(--primary2);

}
	@media (max-width:650px) {
			.mobile_br {display:block;}

.compadding {
  scroll-margin-top: 120px;
}


	}

/* ======================
   Wide Nav (스크롤 반응) - 메뉴 네비
====================== */
.nav-wrap { /* background:rgba(255,255,255,0.3); */
  transition: all .4s ease; top:0; left:0; position:fixed; width:100%; z-index:99;
}
.nav-scrolled {
background:#fff;
  backdrop-filter: blur(8px);
}

.nav-wrap .width_area {  padding:30px 0px; flex-wrap:wrap; justify-content: space-between; align-items: center;}
.nav-wrap .logo >  img:nth-child(1) { height:30px}
.nav-wrap .logo>  img:nth-child(2) { height:36px}

.nav-wrap .logo  {display:flex; flex-wrap:wrap; gap:0px 20px;}

.nav-wrap nav {gap:0px 24px}
.nav-wrap nav a {
  font-size:22px; 
  color:var(--color);
  line-height:1.5;
  position:relative;
  padding-right:14px;
  transition:all .3s ease;
  transform:translateY(0px);
}

.nav-wrap nav a::after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1354c1;
  transform:translateY(-50%) scale(0);
  opacity:0;
  transition:.3s ease;
}
.nav-wrap nav a:hover{
color:#1354c1; transform:translateY(-2px);
}
.nav-wrap nav a:hover::after {
  transform:translateY(-50%) scale(1);
  opacity:1;
}

.nav-wrap .btn-inaera {gap:0px 10px; }
.nav-wrap .btn-inaera a {border-radius:9999px; justify-content: center; display:flex; line-height:2.5;
font-size:16px; width:90px;  font-weight:bold;  
}
 .nav-wrap .btn-inaera a:first-child {background-color:#2a4c6a;  
color: #fff;} 
.nav-wrap .btn-inaera a:last-child { background-color:#fff; }


/*스크롤*/
.nav-wrap.nav-scrolled  {box-shadow:11px 12px 7px rgba(0,0,0,0.02)}
.nav-wrap.nav-scrolled .width_area{padding:16px 0px;}
.nav-wrap.nav-scrolled  .btn-inaera a:last-child {background-color:#eee;  }


	@media (min-width:1200px) {
		.nav-wrap .logo  {gap:0px 30px;}
		.nav-wrap .logo >  img:nth-child(1) { height:40px}
		.nav-wrap .logo>  img:nth-child(2) { height:46px}
		.nav-wrap nav {gap:0px 44px}
		.nav-wrap nav a { padding-right:14px;}

	 	}


	@media (max-width:1024px) {
		/*순서변경*/
		.nav-wrap .logo  {order:1; flex:1;}
		.nav-wrap nav {order:3; flex:100%;}
		.nav-wrap .btn-inaera{order:2; }

		.nav-wrap .width_area {  padding:20px 0px; }
		.nav-wrap .logo >  img:nth-child(1) { height:26px}
		.nav-wrap .logo>  img:nth-child(2) { height:28px}
		.nav-wrap nav {gap:0px 24px; padding-top:20px;}
		.nav-wrap nav a {
		  font-size:18px;  line-height:1.2;
		  padding-right:10px;
		}
		.nav-wrap nav a::after {
		  width:4px;
		  height:4px;
		}
		.nav-wrap .btn-inaera a {; line-height:2.5;
		font-size:14px; width:80px; 
		}
		/*스크롤*/
		.nav-wrap.nav-scrolled .width_area{padding:16px 0px;}
	 	}

	@media (max-width:650px) {

		.nav-wrap nav{ flex-wrap:wrap; gap:10px; justify-content: space-between;}
		.nav-wrap nav a {width:calc(50% - 20px); text-align:Center;}
		.nav-wrap nav a::after { right:auto; right:auto;}
		.nav-wrap .btn-inaera {gap:5px;}
		.nav-wrap .btn-inaera a { width:40px; height:40px; border-radius:999px; text-indent:-9999px ;font-size:13px; background-repeat: no-repeat; background-position:center center;}
		.nav-wrap .btn-inaera a:nth-child(1) {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'none'%20viewBox%3D'0%200%2024%2024'%20stroke-width%3D'1.5'%20stroke%3D'%23fff'%20class%3D'size-6'%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'M9%206.75V15m6-6v8.25m.503%203.498%204.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869%201.934c-.317.159-.69.159-1.006%200L9.503%203.252a1.125%201.125%200%200%200-1.006%200L3.622%205.689C3.24%205.88%203%206.27%203%206.695V19.18c0%20.836.88%201.38%201.628%201.006l3.869-1.934c.317-.159.69-.159%201.006%200l4.994%202.497c.317.158.69.158%201.006%200Z'%20%2F%3E%3C%2Fsvg%3E");
background-size: auto 22px;}

		.nav-wrap .btn-inaera a:nth-child(2) {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'none'%20viewBox%3D'0%200%2024%2024'%20stroke-width%3D'1.5'%20stroke%3D'%23666'%20class%3D'size-6'%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'M21.75%206.75v10.5a2.25%202.25%200%200%201-2.25%202.25h-15a2.25%202.25%200%200%201-2.25-2.25V6.75m19.5%200A2.25%202.25%200%200%200%2019.5%204.5h-15a2.25%202.25%200%200%200-2.25%202.25m19.5%200v.243a2.25%202.25%200%200%201-1.07%201.916l-7.5%204.615a2.25%202.25%200%200%201-2.36%200L3.32%208.91a2.25%202.25%200%200%201-1.07-1.916V6.75'%20%2F%3E%3C%2Fsvg%3E");
background-size: auto 22px;}
		.nav-wrap .logo  {gap:10px}
	}



/* ======================
  section01
====================== */

#section01 {background:#52ccfa url(/img/inimg3.jpg?ver=202611);
/* background-image:url(/img/bg3.jpg?ver=202611); */
position:relative;
background-repeat:no-repeat;  text-align:center; width:100%; height:100vh;  padding-top:clamp(150px, 7.5vw, 160px)}

#section01.parallax-bg.is-active { }
#section01  dl {text-align:Center; padding-top:60px;
/* text-shadow: 1px 1px 12px rgba(255,255,255,0.8); */




}
#section01  dl dt,
#section01  dl dd
{font-size:clamp(30px, 3.5vw, 57px); line-height:1.3;  letter-spacing:-2px;  
font-family: 'High1WonchuriTitle'; font-weight:700;}

#section01  dl strong.c01 {color:var(--primary2);} 
#section01  dl strong.c02 {color:var(--secondary);} 
#section01  dl strong.c03 {color:#ff6541;} 


#section01  h4 {color:#fff;  background:var(--primary2); width:fit-content;  padding:0px 30px; margin-left:auto; margin-right:auto;
border-radius:60px;
margin-top:20px; font-size:clamp(20px, 2.5vw, 30px); font-weight:300;}


/*스크롤링*/
 .scrollHint{ text-align:Center; background:rgba(255,255,255,0.9); justify-content: center;  font-family:'inter',arial;
 cursor:pointer; position:Absolute; bottom:30px; padding:10px 30px;  border-radius:30px;
	  left:50%; transform:translateX(-50%);
      display:flex; 
      align-items:center;
      gap:20px;
      font-weight:700;
      font-size:11px; letter-spacing:3px;
    }
    .mouse{ 
      width:20px;height:26px;border-radius:999px;
      border:1px solid rgba(0,0,0,.43);
      position:relative;
    }
    .mouse:after{
      content:"";
      width:3px;height:4px;border-radius:99px;
      background:rgba(0,0,0,.75);
      position:absolute; left:50%; top:4px;
      transform:translateX(-50%);
      animation: wheel 1s infinite ease;
    }
    @keyframes wheel{
      0%{transform:translate(-50%,0); opacity:.95}
      70%{transform:translate(-50%,10px); opacity:.28}
      100%{opacity:0}
    }


	@media (min-width:1024px) {
		#section01 {background-size:2200px auto; background-position: top -100px center;}
		#section01.parallax-bg.is-active { background-size:2000px auto ;  background-position: top -200px center;}
	}
	@media (max-width:1024px) {
		#section01 {  transform: scale(1.2); background-size:1024px auto ; background-position:center bottom;}
		#section01.parallax-bg.is-active {   transform: scale(1);}
		 .scrollHint{ padding:10px 20px; gap:10px; font-size:8px;  }
		.mouse{ width:17px;height:22px;}
	}

	@media (max-width:650px) {

		#section01 {background-size:890px auto; background-position:center bottom; }
		#section01.parallax-bg.is-active { background-size:890px auto ;  background-position:center bottom;}
	}


/* ======================
  section02
====================== */

#section02 {text-align:Center; position:relative;}
#section02 .width_area{text-align:Center;}
#section02 h3,
#section02 h4{position:relative; z-index:2;}

#section02 .info {border-radius:clamp(30px, 2.5vw, 180px);  width:100%; max-width:1000px; margin-left:auto; margin-right:auto;
margin-top:40px;  justify-content: center; position:relative; z-index:3;
 padding:clamp(30px, 4.5vw, 100px);
padding-top:50px;
background: color-mix(
  in srgb,
  var(--secondary) 6%,
  white 94%
);

padding-bottom:50px; display:flex; flex-wrap:wrap; 
}
#section02 .info dl {display:flex; width:100%; max-width:700px; 
flex-wrap:wrap; padding:10px 0px; gap:10px 5%; align-items: center;}

#section02 .info dl  dt {width:200px; color:#fff;  border-radius:99px;  line-height:2;
background: color-mix(
  in srgb,
  var(--secondary) 90%,
  white 10%
);
}

.bubble-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;

}

/* 공통 버블 */
.bubble {
  position: absolute;
  filter: blur(1px);

}

.bubble img {
  width: 100%;
  height: auto;
  display: block;
}

/* 위아래 부유 애니메이션 */
@keyframes floatY {
  0%   { filter: blur(2px); transform: translateY(0); }
  50%  { filter: blur(0px); transform: translateY(-70px); }
  100% { filter: blur(2px);   transform: translateY(0); }
}
@keyframes floatY2 {
  0%   { filter: blur(1px); transform: translateY(0); }
  50%  { filter: blur(0px); transform: translateY(70px); }
  100% { filter: blur(1px);   transform: translateY(0); }
}



/* 왼쪽 상단 */
.b1 {    animation: floatY2 3s ease-in-out infinite;
  top: 2%;
  left: 4%;
  animation-duration: 14s;
}

/* 오른쪽 상단 */
.b2 {     animation: floatY 3s ease-in-out infinite;
  top: 10%;
  right: 3%;
  animation-duration: 16s;
}

.b3 {   animation: floatY2 3s ease-in-out infinite;
  top: 45%;
  left: -2%; 
  animation-duration: 11s;
}

.b4 {    animation: floatY 3s ease-in-out infinite;
  top: 48%;
  right: -3%;    opacity:0.7;
  animation-duration: 13s;
}

.b5 {    animation: floatY2 3s ease-in-out infinite;
  bottom: -2%; 
  left: 16%;
  animation-duration: 11s;  opacity:0.3;
}

.b6 {     animation: floatY 3s ease-in-out infinite;
  bottom: -3%; 
  right: 8%;
  animation-duration: 19s;  
}

.b7 { z-index:1;     animation: floatY 3s ease-in-out infinite;
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  animation-duration: 20s;
  opacity:0.3; 
}


	@media (min-width:1024px) {
	.b6 {width:290px;}
	.b3, .b4 .b7 {  width:300px;}
	}


	@media (max-width:1024px) {

		.bubble img {width:170px;}
		.b6 {width:220px;}
		.b3, .b4 .b7 {  width:240px;}
		#section02 .info dl  dt {width:160px;}

	}


	@media (max-width:650px) {
		#section02 .info dl{flex-direction:column;}
		#section02 .info dl  dt {width:110px;}
		.bubble img {width:110px;}
		.b6 {width:120px;}
		.b3, .b4 .b7 {  width:140px;}


	}



/* ======================
section03
====================== */


#section03 { overflow:hidden;  width:100%;
  text-align: center;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.9)), url('/img/inimg2.gif') no-repeat;
  background-position:center center;
  background-repeat:no-repeat;
  background-size: cover;
}
#section03 .inlist {width:90%;  margin-left:auto; margin-right:auto; max-width:900px; margin-top:30px; margin-bottom:30px;}
#section03 .inlist li{padding-left:60px; width:100%; text-align:left; margin:5px 0px;
font-size:clamp(17px, 2.5vw, 22px); color:rgba(40,40,40,0.9);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%23ff8125'%20class%3D'size-5'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
background-size: auto 30px;
background-repeat: no-repeat;
background-position: left 20px top 0px;

}

#section03.parallax-bg.is-active {background-position:center bottom -70px;}



.population-diagram {    margin-left:auto; margin-right:auto; overflow:hidden; 
margin-top:70px; margin-bottom:30px; box-sizing:border-box; 
 max-width:1400px; width:97%; 
}


.content-layout {
    display: flex;
    flex-direction: column; 
}

.card-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.pop-card {
    flex: 1; 
    background: #fff;
    border-radius: 20px;
    border: 2px solid #ddd;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-header {
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: clamp(20px, 2.5vw, 30px);
    border-bottom: 1px solid #eee;
}

.card-body {
    padding: 20px;
    flex-grow:1;
    display: flex;
    flex-direction: column;
    align-items: center;
/*     justify-content: center;
     */}

.icon-group {margin-bottom: 15px;  }
.icon-group img{width:auto; height:clamp(46px, 5.5vw, 90px)}
.desc { font-size: 0.9rem; color: #666; text-align: center; line-height: 1.4; }

/* 내부 강조 박스 */
.info-box { width: 100%; padding: 12px; border-radius: 12px; font-weight:normal; flex: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;}


.box-title { font-weight: bold; margin-bottom: 5px; }
.list { padding-left: 15px; margin: 0; }
.list-detail li { list-style: none; margin-bottom: 4px; }

/* 카드 컬러링 */
.population-diagram {
  --boxmain_color01: #868891;
  --boxmain_color02: #0d9488;
  --boxmain_color03: #2563eb;

}

.card-header {color:#fff;}
.type-gray  .card-header {background:var(--boxmain_color01)}
.type-gray { border-color:var(--boxmain_color01) }
.type-gray .info-box {  background: color-mix(in srgb, var(--boxmain_color01) 10%, white 90%);}

.type-teal  .card-header {background:var(--secondary)}
.type-teal { border-color:var(--secondary) }
.type-teal .info-box {  background: color-mix(in srgb, var(--secondary) 5%, white 95%); 
color: color-mix(in srgb, var(--secondary) 85%, black 15%);
}

.type-blue  .card-header {background:var(--primary2)}
.type-blue { border-color:var(--primary2) }
.type-blue .info-box {  background: color-mix(in srgb, var(--primary2) 5%, white 95%);
color: color-mix(in srgb, var(--primary2) 85%, black 15%);}






/* 작은 연결 화살표 (사이사이) */
.small-connector {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    min-width: 160px;
}
.small-connector .arrow { 
    margin-bottom: 5px;
}
.small-connector .arrow svg {width:40px; height:40px;}


.small-connector .label { text-align: center; font-weight:bold; }

/* 메인 브릿지 (긴 화살표) - 데스크톱 (가로) */
.main-bridge {
    order: 2; /* 카드 아래로 배치 */
    margin-top: 50px;
    padding: 20px 40px;
}
.bridge-line {
    height: 2px;
    background: #666;
    position: relative;
    display: flex;
    justify-content: center;
}
.bridge-line::after {
    content: '';
    position: absolute;
    right: 0; top: -7px;
    width: 16px; height: 16px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    transform: rotate(45deg);
}
.bridge-text { margin-top:-30px;
    padding:0px 35px; height:60px; line-height:60px;
	background:#fff; border-radius:30px;  
    white-space: nowrap;
}

.fromist {display:flex; flex-wrap:wrap; gap:10px; justify-content: center; opacity:0.6; padding:0px 20px;
font-size:clamp(14px, 2.5vw, 17px)}

/* 반응형 (모바일) */
@media (max-width: 768px) {
	 .pop-card {flex: 0 1 auto;}
    .content-layout {  width:100%; overflow:hidden;  box-sizing:border-box; padding-left:20px; padding-right:20px;
        flex-direction: row; 
    }
.small-connector {
    min-width: auto;
}

    .main-bridge {
        order: 1; 
        margin-top: 0;
        margin-right: 15px; 
        padding-right:20px;
        width: 40px; 
    }

    .bridge-line {
        width: 2px;
        height: 100%; 
        flex-direction: column;
        align-items: center;
    }

    .bridge-line::after {
        right: -7px;
        bottom: 0;
        top: auto;
        transform: rotate(135deg); 
    }

    .bridge-text {
        writing-mode: vertical-rl; /* 텍스트 세로 방향 */
        text-orientation: upright;
        letter-spacing: -2px;
		line-height:30px; height:30px;
        margin-top: 0;
        height: auto; overflow:hidden;
        padding: 25px 3px;
    }

    .card-wrapper {
        flex-direction: column;
        flex: 1;
    }

    .small-connector {
        padding: 15px 0;
    }

    .small-connector .arrow {
     transform:rotate(90deg)
    }

#section03.parallax-bg {background-position:center bottom center;}
#section03.parallax-bg.is-active {background-position:center bottom;}

}








/* ======================
section04
====================== */

#section04 { overflow:hidden; width:100%; 
  --boxmain_color01: #36b4ff;
  --boxmain_color02: #1ed981;
--boxmain_color03: #ffd943; 
--boxmain_color04: #ffa633; 
--boxmain_color05: #a9dd1b
}
#section04 h3 {text-align:center;}
#section04 .person  {text-align:center; } 
#section04 .person  img {width:80%; max-width:1000px;}


#section04 .steparea {padding-top:clamp(30px, 7.5vw, 100px); max-width:1400px;
padding-bottom:clamp(30px, 7.5vw, 100px);  
display:flex; flex-wrap:wrap; flex-direction:column; gap:20px 0px;}
#section04 .steparea > div {border-radius:30px; padding:clamp(25px, 2.5vw, 40px); justify-content: center;  align-items: center;
display:flex; flex-wrap:wrap; gap: 30px 3%;
padding-left:clamp(20px, 7.5vw, 60px);
padding-right:clamp(20px, 7.5vw, 60px);}
#section04 .steparea > div p {border-radius:50%; background:red; display:flex; flex-wrap:wrap;
flex-direction:column; justify-content: center; color:rgba(255,255,255,1); 
  align-items: center; font-size:clamp(25px, 2.5vw, 50px); font-family: 'High1WonchuriTitle'; font-weight:900;
width:clamp(70px, 8.5vw, 190px) ; line-height:1; gap:10px 0px;
height:clamp(70px, 8.5vw, 190px) ;
}
#section04 .steparea > div p  span {font-size:clamp(13px, 2.5vw, 19px); opacity:0.8;}



#section04 .steparea > div  > dl {flex:1 }
#section04 .steparea > div  > dl dt {font-size:clamp(25px, 2.5vw, 40px)}
#section04 .steparea > div  > dl dd{font-weight:normal; margin-top:7px;
  background-size: auto 30px;
  background-repeat: no-repeat;
  background-position: left 0px top 0px;
  padding-left:40px;
}



/*박스색감*/
#section04 .steparea > div:nth-child(1){ background: color-mix(in srgb, var(--boxmain_color01) 9%, white 91%);}
#section04 .steparea > div:nth-child(1) p {background:var(--boxmain_color01)}
#section04 .steparea > div:nth-child(1)  > dl dt {color:var(--boxmain_color01)}
#section04 .steparea > div:nth-child(1)  > dl dd {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%23a7d4f0'%20class%3D'size-5'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
}

#section04 .steparea > div:nth-child(2){ background: color-mix(in srgb, var(--boxmain_color02) 9%, white 91%);}
#section04 .steparea > div:nth-child(2) p {background:var(--boxmain_color02)}
#section04 .steparea > div:nth-child(2)  > dl dt {color:var(--boxmain_color02)}
#section04 .steparea > div:nth-child(2)  > dl dd {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%2389e7bb'%20class%3D'size-5'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
}
#section04 .steparea > div:nth-child(3){ background: color-mix(in srgb, var(--boxmain_color03) 9%, white 91%);}
#section04 .steparea > div:nth-child(3) p {background:var(--boxmain_color03)}
#section04 .steparea > div:nth-child(3)  > dl dt {color: color-mix(in srgb, var(--boxmain_color03) 80%, #ff4715 20%)}
#section04 .steparea > div:nth-child(3)  > dl dd {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%23f1dd8c'%20class%3D'size-5'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
}

#section04 .steparea > div:nth-child(4){ background: color-mix(in srgb, var(--boxmain_color04) 9%, white 91%);}
#section04 .steparea > div:nth-child(4) p {background:var(--boxmain_color04)}
#section04 .steparea > div:nth-child(4)  > dl dt {color:color-mix(in srgb, var(--boxmain_color04) 40%, #ff5519 60%);}
#section04 .steparea > div:nth-child(4)  > dl dd {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%23f9cd93'%20class%3D'size-5'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
}
#section04 .steparea > div:nth-child(5){ background: color-mix(in srgb, var(--boxmain_color05) 9%, white 91%);}
#section04 .steparea > div:nth-child(5) p {background:var(--boxmain_color05)}
#section04 .steparea > div:nth-child(5)  > dl dt {color:color-mix(in srgb, var(--boxmain_color05) 40%, #78a301 60%);}
#section04 .steparea > div:nth-child(5)  > dl dd {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%23d2ea8f'%20class%3D'size-5'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
}



.rolling-wrap {
	overflow: hidden;
/* 	padding: 0 8vw;
	 */}

.slick-list {
	overflow: visible;
}

.slick-slide {
	padding: 0 10px;
}

.rolling-slider .slide {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 16px;
}

.rolling-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


@media (max-width: 768px) {
	#section04 .steparea > div {flex-direction:column;}
	#section04 .steparea > div dl dd {background-size: auto 26px; padding-left: 30px;}
	#section04 .steparea > div dl {flex: 0 1 100%; width:100%}
}









/* ======================
section05
====================== */

#section05 { 
background-color:#8ecffd;
background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url('/img/inbg03.jpg') no-repeat;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size: cover;
overflow:hidden;  width:100%;
}

#section05.parallax-bg.is-active {background-position:center center ;}


#section05 h3{ text-align:center; text-shadow:15px 2px 15px rgba(255,255,255,0.9);
padding-bottom:clamp(30px, 2.5vw, 50px);}
#section05 .list_wrap {display:flex; flex-wrap:wrap; gap:20px 20px; }
	#section05 .list_wrap .modal_open {width:calc((100% / 4) - 20px); background:#fff; cursor:pointer; transition:1s all; 
	padding:clamp(15px, 6.5vw, 30px); border-radius:30px;    display: flex;
  flex-direction: column; }
		#section05 .list_wrap .modal_open { text-align:Center;}
	#section05 .list_wrap .modal_open .imglist img {width:100%;}
	#section05 .list_wrap .modal_open:hover {transform:translateY(-20px)}
	#section05 .list_wrap .modal_open  dl {
	gap:10px 0px;   display: grid;
  grid-template-rows:
    minmax(100px, auto)  
    1fr                
    auto;    }
	#section05 .list_wrap .modal_open  dl dt { font-weight:bold; min-height:80px; padding-top:20px; font-size:clamp(17px, 2.5vw, 27px); line-height:1.3;}
	#section05 .list_wrap .modal_open  dl dd {opacity:0.8;  line-height:1.2;   display: grid;
  grid-template-rows: auto 1fr auto;  }

	#section05 .list_wrap .modal_open  dl dd p.detail { margin-top:20px;   border-radius:999px; font-size:clamp(16px, 2.5vw, 20px); color:#fff; font-weight:bold; width:100%; text-align:Center;
	padding:10px 0px; background:var(--secondary)}


@media (max-width: 1200px) {
	#section05 .list_wrap .modal_open {width:calc((100% / 2) - 20px);}
    }


@media (max-width: 765px) {
	#section05 .list_wrap .modal_open  dl dt{min-height:auto;}
  #section05 .list_wrap .modal_open {width:100%;}


    }





/* ======================
modal
====================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.modal.is-open {
  display: block;
}

/* dim */
.modal__dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* content */
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 1100px);

}


/* close */
.modal__close { cursor:pointer;
  position: absolute;
  top: 0px; 
  right: 0px;
  cursor: pointer;
}

.modal__close svg {width:60px; height:60px;   pointer-events: none;}
.modal__body {padding-top:70px;   max-height: 80vh; overflow-y:scroll; }
.modal__body{ margin-top:clamp(60px, 6.5vw, 90px); 
  border-radius: 16px;
    background: #fff;
  padding: 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}



.modal__body .modal-tit   { display:flex; flex-wrap:wrap; gap:10px 0px; flex-direction:column; border-radius:30px; padding:30px  6%; background: color-mix(in srgb, var(--primary) 9%, white 91%); }
.modal__body .modal-tit  dt{font-size:clamp(15px, 2.5vw, 20px); line-height:30px; color:#fff; padding:10px 20px; width:fit-content; line-height:1.3;
border-radius:80px;
background: color-mix(in srgb, var(--primary) 70%, white 30%);}
.modal__body .modal-tit  dd {font-size:clamp(20px, 4vw, 40px); font-weight:bold; color: color-mix(in srgb, var(--primary) 100%, white 0%); display:flex; gap:0px 10px; display:flex;  align-items: center; justify-content: space-between;}

.modal__body .modal-tit  dd  a  {display:flex; border-radius:50%; 
width:clamp(15px, 6.5vw, 40px);height:clamp(15px, 6.5vw, 40px);
justify-content: center; background: color-mix(in srgb, var(--primary) 70%, black 30%);   align-items: center;}
.modal__body .modal-tit  dd a svg{ width:clamp(12px, 4.5vw, 21px); height:clamp(12px, 4.5vw, 21px)}
.modal__body .indesc-modal {display:flex; color:#555; flex-wrap:Wrap; gap:30px 0px; flex-direction:column;}
.modal__body .indesc-modal  h5 {font-size:clamp(19px, 2.5vw, 25px);  color:#000;}



@media (max-width: 768px) {
	.modal__close svg {width:36px; height:36px; }
.modal__body .indesc-modal { gap:20px 0px; }

.modal__body .modal-tit  dd a svg{ width:13px; height:13px;}

}


/* ======================
modal-inner-slider
====================== */
/* slick 폭 안정화 */
.modal-inner-slider {margin:20px 0px;}
.modal-inner-slider,
.modal-inner-slider .slick-list,
.modal-inner-slider .slick-track {
	width: 100%;
}

/* slide 패딩 */
.modal-inner-slider .slick-slide {
	padding: 0 8px;
}

/* 비율 박스 */
.modal-inner-slider .img-box {
	aspect-ratio: 3.4 / 2; border:1px  solid #ddd;
	overflow: hidden;
	border-radius: 16px;
}

/* 이미지 */
.modal-inner-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 화살표 */
.modal-inner-slider .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.55);
	cursor: pointer;
}

/* 모달 안에서는 안쪽으로 */
.modal-inner-slider .slick-prev { left: 20px; }
.modal-inner-slider .slick-next { right: 20px; }

.modal-inner-slider .slick-prev p,
.modal-inner-slider .slick-next p {background-size:  40% auto;
width:100%; height:100%;
background-repeat: no-repeat;
background-position: center center;}
.modal-inner-slider .slick-prev p {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'none'%20viewBox%3D'0%200%2024%2024'%20stroke-width%3D'3'%20stroke%3D'%23fff'%20class%3D'size-6'%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'M6.75%2015.75%203%2012m0%200%203.75-3.75M3%2012h18'%20%2F%3E%3C%2Fsvg%3E");
}
.modal-inner-slider .slick-next  p {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'none'%20viewBox%3D'0%200%2024%2024'%20stroke-width%3D'3'%20stroke%3D'%23fff'%20class%3D'size-6'%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'M17.25%208.25%2021%2012m0%200-3.75%203.75M21%2012H3'%20%2F%3E%3C%2Fsvg%3E");


}





.modal-inner-slider .slick-list {
	overflow: hidden;  
}
/* 모바일 */
@media (max-width: 768px) {
	.modal-inner-slider .slick-arrow {
		width: 34px;
		height: 34px;
		font-size: 16px;
	}
}


/* ======================
section06
====================== */
#section06 h3 {text-align:center; padding-bottom:clamp(30px,6.5vw, 60px);}



.customoverlay {
  position: relative;
  bottom: 55px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.customoverlay .bubble2 {
  padding: 12px 16px;
  text-align: left;
}

.customoverlay .name {
  display: block;
  font-weight:bold; line-height:1.3;
}


.customoverlay .addr {
  display: block;
  font-size: 16px;
  color: #666;
}

.customoverlay::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-width: 10px 8px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}
.map-mobile { display: none;  border-radius:30px; height:400px}
.map-pc  {border-radius:80px; height:800px}


/* 모바일 */
@media (max-width: 768px) {
#section06 #map {height:500px; }
  .map-pc { display: none; }
  .map-mobile { display: block; }
}


/* ======================
footer
====================== */
	.footer {background:#1a1a1a; color:#fff; padding-top:clamp(30px, 2.5vw, 50px); padding-bottom:clamp(30px, 2.5vw, 50px);}  
	.footer .width_area {gap:15px 30px; justify-content: space-between; align-items: center;}
	.footer  .logo img{height:30px;  filter: brightness(0) invert(1);}
	.footer .logo {gap:0px 30px;}
	.intxt {font-size:16px;flex:1;}
	.copy {font-size:13px; opacity:0.5;}

@media (max-width: 768px) {
	.footer .width_area {flex-direction:column;}
	.footer  .logo img{height:25px; }

}