html.popup-fixed,
body.popup-fixed { overflow: hidden; }

#wrap { overflow: hidden; }

/* common */
/** text-area **/
.text-area { text-align:center; }
.text-area .title { margin:20px 0 0; }

/* main-slider */
.main-slider { height: 100vh; }
.main-slider img { width:100%; height:100%; min-height: 100%; object-fit: cover; }
.main-slider .swiper-slide .text-area { text-align:center; position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); max-width:1400px; width:100%; color:#333; }
.main-slider .swiper-slide .text-area .title { opacity:0; transition:all .3s .3s; transform:translateY(30px); margin:0; font-size:42px; line-height:1.2; font-weight:700; }
.main-slider .swiper-slide .text-area .sub-desc,
.main-slider .swiper-slide .text-area .desc { opacity:0; transition:all .3s .6s; transform:translateY(30px); font-size:26px; margin:30px 0 0; font-weight:500; }
.main-slider .swiper-slide.swiper-slide-active .text-area .title { opacity:1; transform:translateY(0); }
.main-slider .swiper-slide.swiper-slide-active .text-area .sub-desc,
.main-slider .swiper-slide.swiper-slide-active .text-area .desc { opacity:1; transform:translateY(0); }

/* .research-wrap */
.research-wrap { display:flex; align-items:center; height:100%; min-height:80vh; max-height: 80vh; background:url('/images/research-bg.png') no-repeat center/cover; }
.research-cover { display: flex; align-items: center; overflow: hidden; padding: 80px 0; }

/* 왼쪽 텍스트 영역 */
.research-cover .left { width: 50%; padding-left: 10%; z-index: 10; }
.research-cover .sub-title { text-align:left; font-size: 40px;font-weight: 700; margin-bottom: 40px; }
/* 페이지네이션 스타일 */
.research-cover .swiper-pagination { position: static !important; text-align: left !important; }
.research-cover .paging { position:relative; font-size: 18px; color: #999; margin-bottom: 15px; cursor: pointer; transition: 0.3s; font-weight: 500; }
.research-cover .paging span { position:relative; padding:5px 0; }
.research-cover .paging span:after { content:''; display:block; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#0A62F2; transition:width .3s; }
.research-cover .paging.active { color: #0A62F2; font-weight: 700; }
.research-cover .paging.active span:after { width:100%; }
/* 오른쪽 슬라이드 영역 */
.research-cover .right { min-width:860px; width: 50%; overflow: hidden; }
.research-container { width: 100%; overflow: visible !important; }
.research-cover .swiper-slide {  }
.research-cover .swiper-slide img { width:100%; height: 450px; object-fit: cover; border-radius: 15px; }

/* cba-wrap */
.cba-wrap { height: 100vh; overflow: hidden; position: relative; background:url('/images/main/cba-bg.png') no-repeat center/cover; }
.cba-cover { display:flex; height:100%; }
.cba-item { position:relative; flex:1; height: 100%; }
.cba-item:after { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:0; pointer-events:none; background-color: transparent; background-image: linear-gradient(180deg, #00000000 40%, #0057E7 100%); transition:all .3s; }
.cba-item:hover:after { height:100%; }
.cba-item .item-cover { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; padding:0 40px; color: #fff; display: flex; flex-direction: column; justify-content: center; z-index:1; transition:transform .3s; }
.cba-item .item-cover .title-cover { }
.cba-item .item-cover .title-area .sub-title { font-size:15px; font-weight:700; }
.cba-item .item-cover .title-area .title { font-size:36px; font-weight:700; }
.cba-item .item-cover .desc { margin:40px 0 0; font-size:17px; font-weight:400; }
.cba-item .item-cover .list-wrap { position:absolute; top:100%; left:0; width:100%; padding:0 40px; opacity: 0; transition:all .6s; transition-timing-function: cubic-bezier(.16, .86, .32, 1.1); pointer-events:none; }
.cba-item .item-cover .list-wrap .line { width:45px; height:3px; background-color:#fff; margin:40px 0; }
.cba-item .item-cover .list-wrap .list > li { display:flex; align-items:flex-start; gap:0 8px; font-size:17px; font-weight:500; }
.cba-item .item-cover .list-wrap .list > li:before { content:''; width:5px; height:5px; margin:10px 0 0; background-color:#fff; border-radius:50%; }
.cba-item:hover .item-cover { transform:translateY(-90%); }
.cba-item:hover .item-cover .list-wrap { opacity:1; pointer-events:auto; }
.cba-item + .cba-item { border-left:1px solid #eaeaea; }

/* board-wrap */
.board-wrap { margin:165px 0 0; padding:0 0 320px; }
.board-cover { position:relative; max-width: 1400px; width: 100%; margin:0 auto; }
.board-cover .pagination { opacity:0; position: absolute; top: calc(50% - 20px); left: 0; width: 100%; transform: translate(0, -50%); transition:all .3s ease-in-out; }
.board-cover .pagination .prev { position: absolute; left: -17px; cursor:pointer; }
.board-cover .pagination .next { position: absolute; right: -17px; cursor:pointer; }
.board-cover:hover .pagination { opacity: 1; }
/* board-list 컨테이너 */
.board-list { max-width: 1400px; width: 100%; margin: 132px auto 0; overflow: hidden; padding: 50px 0; }
/* 기본 슬라이드 상태 */
.board-list .item { max-width: 17.25% !important; transition: transform 0.4s ease, opacity 0.4s ease; transform: scale(1) translateY(0); border:1px solid #d5d5d5; box-shadow:8px 8px 8px rgba(0,0,0,.1); }
.board-list .item.swiper-slide-active { transform: scale(1.112) translateY(15px); z-index: 10; }
.board-list .item h6 { margin:0; }
.board-list .item img { max-height:320px; height:100%; object-fit:cover; }

/* 팝업들이 생성될 전체 컨테이너 */
#modal-popup { display:none; position: fixed; top:0; left:0; width:100%; height:100%; z-index: 9999; }
#modal-popup.active { display:block; }
#modal-popup .dimmed { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); z-index:10; }
#popup-container { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 500px; max-height:500px; overflow:hidden; z-index: 9999; }
#popup-container .swiper-wrapper { align-items:center; }
.kica-modal { background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.kica-modal img { display:block; width:100%; }
.kica-modal.type-image h4 { display:none; }
.modal-body { padding: 20px; max-height: 460px; overflow-y: auto; }
.modal-body h4 { margin:0; padding:0 0 10px; border-bottom:1px solid #E8E8E8; }
.modal-body p { margin:0; }
.modal-body p + p { margin:1rem 0 0; }
.modal-body .content { padding:12px 0 0; }
/*.modal-body h4 { padding:0 0 10px; margin:0; border-bottom:1px solid #333; }*/
.modal-footer { display: flex; justify-content: space-between; background: #f8f9fa; padding: 10px; border-top: 1px solid #eee; }
.modal-footer button { font-size: 13px; cursor: pointer; border: none; background: none; color: #666; }

.pc { display:block; }
.mo { display:none; }

@media screen and (max-width: 1420px) {
    .research-cover {}
    .research-cover .left { padding-left:7%; }
    .research-cover .right { min-width:600px; }
}

/* --- 반응형 시작 --- */
/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .pc { display:none; }
    .mo { display:block; }

    .main-slider .swiper-slide .text-area { padding: 0 5%; bottom: 15%; }
    .main-slider .swiper-slide .text-area .title { font-size: 32px; }
    .main-slider .swiper-slide .text-area .sub-desc,
    .main-slider .swiper-slide .text-area .desc { font-size: 20px; }

    .research-wrap { height: auto; min-height: auto; max-height: none; }
    .research-cover { flex-direction: column; padding: 40px 20px; }
    .research-cover .left, .research-cover .right { width: 100%; padding: 0; min-width:100%; }
    .research-cover .sub-title { font-size: 28px; margin-bottom: 20px; }
    .research-cover .right { margin-top: 30px; }

    .cba-wrap { height:auto; }
    .cba-cover { flex-direction: column; height: auto; }
    .cba-item { border-left: none !important; border-bottom: 1px solid #eaeaea; min-height: 350px; }
    .cba-item .item-cover { position: relative; top: 0; transform: none; min-height: auto; padding: 40px; }
    .cba-item:hover .item-cover { transform:none; }
    .cba-item .item-cover .list-wrap { position: static; opacity: 1; padding: 0; }
    .cba-item .item-cover .title-area .title { font-size: 26px; }
    .cba-item .item-cover .list-wrap .line { margin:20px 0; height:1px; }

    .text-area .title h1 { font-size:2.5rem; }
    .board-cover { padding:50px 40px 0; }
    .board-list { margin:60px 0 0; padding:0; }
    .board-wrap { margin: 80px 0 0; padding-bottom: 100px; }
    .board-list .item { max-width:100% !important; }
    .board-list .item.swiper-slide-active { transform:none; }
    .board-list .item img { max-height:100%; }

    .board-cover .pagination { opacity:1; top:50%; }
    .board-cover .pagination .prev { left: 10px; cursor:pointer; width:30px; }
    .board-cover .pagination .next { right: 10px; cursor:pointer; width:30px; }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .main-slider { height: 80vh; } /* 모바일은 슬라이더 높이 조절 */
    .main-slider .swiper-slide .text-area .title { font-size: 24px; }
    .main-slider .swiper-slide .text-area .sub-desc,
    .main-slider .swiper-slide .text-area .desc { font-size: 16px; margin: 15px 0 0; }

    .research-wrap { height: auto; }
    .research-cover .sub-title { font-size: 22px; }
    .research-cover .swiper-slide img { height: auto; }

    .cba-item .item-cover .title-area .title { font-size: 20px; }
    .cba-item .item-cover .desc { font-size: 15px; margin: 20px 0 0; }
    .cba-item .item-cover .list-wrap .list > li { font-size: 15px; }

    .text-area .title h1 { font-size:22px; }
    .board-cover { padding:20px 20px 0; }
    .board-list { margin:20px 0 0; }
    /*.board-list .item { width: 90% !important; } !* 1열 배치 *!*/
    /*.board-cover .pagination { display: none; } !* 모바일은 스와이프 위주라 버튼 숨김 *!*/

    #popup-container { width:90%; max-height:60vh; }
    .modal-static { height:100%; max-height:calc(60vh - 40px); }
    .modal-body { height:100%; max-height:calc(60vh - 40px); }
    .modal-static .modal-body { max-height:calc(60vh - 40px); }
}