@charset "UTF-8";

#section1 .bg {position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:1; }
#section1 .bg img,
#section1 .bg video {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; opacity:0.5; }
#section1 .bg video { display: none; }
#section1 .visual_txt { position:relative; color:#fff; text-align:center; z-index:2; }
#section1 .visual_txt p { font-size:20rem; margin-bottom:60rem; }
#section1 .scroll_down { position:absolute; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-bottom:15rem; width:50rem; height:50rem; border-radius:50%;  left:50%; bottom:30rem; transform:translateX(-50%); z-index:2; border:1px solid rgba(255,255,255,0.5); background:rgba(0,0,0,0.2); }
#section1 .scroll_down span { display:block; width:10rem; height:10rem; border-left:1px solid #fff; border-bottom:1px solid #fff; transform:rotate(-45deg); margin-bottom:-2px; animation: arrowFadeDown 2s infinite; opacity: 0; }
#section1 .scroll_down .arrow1 { animation-delay: 0s; }
#section1 .scroll_down .arrow2 { animation-delay: 0.2s; }
#section1 .scroll_down .arrow3 { animation-delay: 0.4s; }
@keyframes arrowFadeDown {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translate(0, 0);
    }
    40% {
        opacity: 1; /* 중간 지점에서 가장 밝아짐 */
    }
    80% {
        opacity: 0;
        transform: rotate(-45deg) translate(-5px, 5px); /* rotate 상태에서 아래 방향으로 이동 */
    }
    100% {
        opacity: 0;
    }
}

.visual_txt p,
.visual_txt img { opacity:0; transition:0.6s ease;}
.visual_txt p { transform:translateY(30rem); }
.active-ani .visual_txt p { opacity:1; transform:translateY(0); transition-delay:0.3s; }
.active-ani .visual_txt img { opacity:1; transition-delay:0.8s; }
@media all and (max-width:1023px){
  .active-ani .visual_txt img {width:400rem;}
}
@media all and (max-width:480px){
  .active-ani .visual_txt img {width:320rem;}
}

#section2 .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; }
#section2 h2 {font-size:32rem}
#section2 .more {position:relative; width:30rem; height:30rem; }
#section2 .more::before,
#section2 .more::after {content:''; position:absolute; left:50%; top:50%; width:2px; height:17px; background:#333; transform:translate(-50%, -50%); }
#section2 .more::after {transform:translate(-50%, -50%) rotate(90deg); }
#section2 .list { display:flex; justify-content:space-between; width:100%; margin-top:40rem; }
#section2 .list > div { position:relative; width:calc((35% - 60rem)/3); height:600rem; overflow:hidden; border-radius:10rem; background:#000; cursor:pointer; transition: width 0.3s ease; }
#section2 .list > div img { opacity:0.3; width:100%; height:100%; object-fit:cover; }
#section2 .list > div:hover img {opacity:0.6;}
#section2 .list > div dl { position:absolute;  z-index:2; color:#fff; }
#section2 .list > div dt span { display:inline-flex; width:50rem; height:50rem; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,0.3);}
#section2 .list > div dt strong,
#section2 .list > div dd {text-shadow:0 0 5rem rgba(0, 0, 0, 0.6); }
#section2 .list > div.on { width:65%; }
#section2 .list > div.on::before {content:''; position:absolute; left:0; bottom:0; width:100%; height:70%; background:linear-gradient(180deg, transparent 0, #000 100% ); opacity:0.6; z-index:1; }
#section2 .list > div.on dl { left:0; bottom:0; padding:50rem; }
#section2 .list > div.on dt { display:flex; align-items:center; font-size:26rem; font-weight:600; margin-bottom:10rem; }
#section2 .list > div.on dt span { border-bottom:0; font-size:0.9em; margin-right:20rem; border-radius:50%; background:var(--p_color); }
#section2 .list > div.on a {display:inline-flex; align-items:center; height:45rem; background:#213376; color:#fff; padding:0 25rem; border-radius:5rem; margin-top:30rem;  }
#section2 .list > div.on a::after {content:''; display:block; width:6px; height:6px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin-left:20rem; }
#section2 .list > div.on img {opacity:0.8;}
#section2 .list > div:not(.on) dl { top:50rem; left:50%; width:50rem; transform:translateX(-50%); text-align:center;}
#section2 .list > div:not(.on) dt span { display:flex; font-size:1.4em; font-weight:600; }
#section2 .list > div:not(.on) dt strong { display:inline-block; width:30rem; font-size:26rem; line-height:1.2; margin-top:20rem; }
#section2 .list > div:not(.on) dd { position:absolute; left:-99999px; top:-99999px; }
@media (min-height: 651px) and (min-width: 1024px) {
  #section2 .wrap { padding-top:80rem; }
}
@media all and (max-width:768px){
  #section2 .list { flex-wrap:wrap; margin-top:20rem; }
  #section2 .list > div {width:100%; height:70rem; margin:5rem 0; transition:height 0.3s ease; }
  #section2 .list > div.on {width:100%; height:410rem; }
  #section2 .list > div:not(.on) dl {top:50%; left:50rem; transform:translateY(-50%); width:auto;}
  #section2 .list > div:not(.on) dt {display:flex; align-items:center;}
  #section2 .list > div:not(.on) dt span {margin-right:10rem;}
  #section2 .list > div:not(.on) dt strong {width:auto; margin:0; }
}
@media all and (max-width:480px){
  #section2 .list > div.on dl {padding:30rem; }
  #section2 .list > div:not(.on) dl {left:30rem;}
}


.section3_wrap { position:relative; display:flex; align-items:center; background:#000; height:100vh; overflow:hidden; }
.section3_wrap .wrap { position:relative; color:#fff; text-align:right; z-index:2; }
.section3_wrap dl { display:inline-block; max-width:500rem;}
.section3_wrap dl dt {font-size:64rem; font-weight:700; line-height:1.2; margin-bottom:30rem; }
.section3_wrap dl dd a {display:inline-flex; align-items:center; height:45rem; background:#213376; color:#fff; padding:0 25rem; border-radius:5rem; margin-top:30rem;  }
.section3_wrap dl dd a::after {content:''; display:block; width:6px; height:6px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin-left:20rem; }
.section3_wrap .bg { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5; z-index:1; }

.section3_wrap .bg .txt {position:absolute; left:0; bottom:0; color:#fff; font-size:60rem; line-height:1; font-weight:800; opacity:0.4; z-index:2; }
.section3_wrap .bg video { width:100%; height:100%; object-fit:cover; }

.section3_wrap dl dt,
.section3_wrap dl dd,
.section3_wrap dl dd a { opacity:0; transition:0.6s ease; transform:translateY(30rem); }
.active-ani .section3_wrap dl dt,
.active-ani .section3_wrap dl dd,
.active-ani .section3_wrap dl dd a { opacity:1; transform:translateY(0); }
.active-ani .section3_wrap dl dd { transition-delay:0.3s; }
.active-ani .section3_wrap dl dd a { transition-delay:0.6s; }
@media all and (max-width:768px){
  .section3_wrap .wrap {text-align:center;}
  .section3_wrap dl dt {font-size:40rem; }
  .section3_wrap .bg .txt {font-size:40rem;}
}

.section4_wrap {position:relative; height:650rem; }
.section4_wrap .root_daum_roughmap {position:absolute; left:0; top:0; width:100%; height:100%; pointer-events: none; z-index:1; }
.section4_wrap .root_daum_roughmap .cont,
.section4_wrap .root_daum_roughmap .map_border,
.section4_wrap .root_daum_roughmap .hide,
.section4_wrap .root_daum_roughmap .wrap_btn_zoom {display:none;}
.section4_wrap .root_daum_roughmap .wrap_map {height:100% !important;}
.section4_wrap .wrap { display:flex; justify-content:space-between; position:relative; z-index:2; }
.section4_wrap .wrap > div { position:relative; width:33%; background:rgba(255,255,255,0.7); border-radius:0 0 20rem 20rem; box-shadow:0 0 20rem rgba(0,0,0,0.25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding:40rem; }
.section4_wrap .wrap > div h2 { font-size:32rem; text-align:center;}
.section4_wrap .wrap > div h2::before {content:''; display:block; width:96px; height:58px; background:url('/design2026/kingmunmu/img/main/ci_color.png') no-repeat center/cover; margin:40rem auto 60rem; }
.section4_wrap .wrap > div a.more { position:absolute; top:210rem; right:40rem; width:30rem; height:30rem; }
.section4_wrap .wrap > div a.more::before,
.section4_wrap .wrap > div a.more::after {content:''; position:absolute; left:50%; top:50%; width:2px; height:17px; background:#333; transform:translate(-50%, -50%); }
.section4_wrap .wrap > div a.more::after {transform:translate(-50%, -50%) rotate(90deg); }
.section4_wrap .wrap > div dt {font-size:20rem; font-weight:700; text-align:center; margin:15rem auto 10rem; white-space:nowrap; text-overflow: ellipsis; overflow:hidden; }
.section4_wrap .wrap > div dd {text-align:center;}
.section4_wrap .wrap > div dd.txt { color:#555; display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.section4_wrap .wrap > div dd.date { color:#555; text-align:right; margin-top:10rem; font-size:14rem;  }
.section4_wrap a.map_blank { position:absolute; right:0; bottom:-180rem; display:inline-flex; align-items:center; height:45rem; background:#213376; color:#fff; padding:0 25rem; border-radius:5rem; }
.section4_wrap a.map_blank::after {content:''; display:block; width:6px; height:6px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin-left:20rem; }
@media all and (max-width:1023px){
  .section4_wrap .wrap > div {width:calc((100% - 60rem)/2); }
  .section4_wrap .wrap > div h2::before {margin:20rem auto 30rem; }
  .section4_wrap .wrap > div a.more {top:165rem;}
}
@media all and (max-width:768px){
  .section4_wrap {height:auto; padding:20rem 0 40rem;}
  .section4_wrap .wrap {flex-wrap:wrap; justify-content:flex-end; }
  .section4_wrap .wrap > div {width:100%; border-radius:20rem; margin:20rem auto;}
  .section4_wrap a.map_blank {position:relative; bottom:0; }
}

@media (min-height: 651px) and (min-width: 1024px) {
  #section3 {overflow: hidden !important;}
  #section3 .fp-scrollable {
      height: 100vh !important;       /* 화면 높이에 딱 맞춤 */
      overflow-y: scroll !important;  /* 내부 내용(1500px)이 넘치므로 스크롤 생성 */
      -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
  }
}
@media all and (max-height:650px){
  .fp-tableCell { padding:40rem 0; height:auto !important;}
}

.btn_top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 999;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: #111;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.btn_top::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	transform: translate(-50%, -30%) rotate(45deg);
}

.btn_top.on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
@media all and (max-width:1023px){
	.btn_top {display: none !important;}
}

/*레이어팝업*/
.layerPopup {max-width:450px; position:absolute; background:#fff; border-radius:20px; padding:10px; padding-bottom:0; box-shadow:10px 10px 10px rgba(0,0,0,0.2); z-index:500;}
.layerPopup a {display:block;}
.layerPopup .img img {display:block; width:100%; border-radius:20px;}
.layerPopup .close {padding:15px 12px; display:flex; align-items:center; justify-content:space-between;}
.layerPopup .close .one {width:20px; height:20px; text-indent:-9999px; position:relative;}
.layerPopup .close .one:before,
.layerPopup .close .one:after {content:''; position:absolute; top:50%; left:50%; width:2px; height:100%; background:#323232; transform:translate(-50%, -50%) rotate(45deg);}
.layerPopup .close .one:after {transform:translate(-50%, -50%) rotate(-45deg);}
#popup0{top:100px; left:50px;}
#popup1{top:0; right:350px;}
@media all and (max-width:1240px){
  .layerPopup {top:100px !important; left:50% !important; transform:translateX(-50%); width:60% !important;}
}
@media all and (max-width:768px){
  .layerPopup {width:80% !important;}
}