@charset "utf-8";

/* back slide style */
.back_slide {width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; z-index: 0; transition:all .4s ease;}
.back_slide .swiper-slide {overflow: hidden; }
.container {width:100%; height:100%;}
.back_slide .inner_slide {width: 100%; height: 100%; position: absolute; overflow:hidden; z-index:0;}
.back_slide .inner_slide div{width: 100%; height: 100%;}
.back_slide .inner_slide div.in_slide {width: 100%; height: 100%; display:flex; justify-content:center; align-items:center;}
.back_slide .inner_slide h2{font-size:9vw; opacity:0.5; color:#000}

.back_slide .inner_slide div.slide01{background-color:#cea2fd;}
.back_slide .inner_slide div.slide01 h2 span{color:#bee28f}
.back_slide .inner_slide div.slide02{background-color:#ffae00}
.back_slide .inner_slide div.slide02 h2 span{color:#ffae00}
.back_slide .inner_slide div.slide03{background-color:#5bbcc4}
.back_slide .inner_slide div.slide03 h2 span{color:#ffc6b7}
.back_slide .inner_slide div.slide04{background-color:#ffae00}
.back_slide .inner_slide div.slide04 h2 span{color:#ffae00}

/*.back_slide .inner_slide .slide01{
    background: #cea2fd url('https://j-pupple.com/images/gadong.jpg') center/contain no-repeat;
}*/
.back_slide .inner_slide .slide02{
    background: #cea2fd url('https://j-pupple.com/images/gadong.jpg') center/cover no-repeat;
}
.back_slide .inner_slide .slide03{
    background: #cea2fd url('https://j-pupple.com/images/smart.jpg') center/cover no-repeat;
}
.back_slide .inner_slide .slide04{
    background: #cea2fd url('https://j-pupple.com/images/neungheodae.jpg') center/cover no-repeat;
}


/* 1. 기존 slide01 배경 설정 수정 */
.back_slide .inner_slide .slide01 {
    /* 이미지는 영상 로딩 전 잠깐 보일 수 있으므로 유지하거나, 색상만 남깁니다. */
    background-color: #cea2fd; 
    /* background-image 줄은 지워도 되지만, 로딩 딜레이 대비용(썸네일)으로 놔둬도 됩니다. */
    position: relative; /* 자식 요소(video)의 기준점 */
    overflow: hidden;
}

/* 2. 새로 추가할 비디오 스타일 (영상을 꽉 차게 만듦) */
.back_slide .inner_slide .slide01 .bg_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 cover로 맞추듯 영상도 비율 유지하며 꽉 채움 */
    z-index: 0; /* 딤 처리(::after)보다 뒤에 있어야 함 */
}

/* 3. 중요: 기존 딤(Dim) 처리 순서 확인 */
/* 작성해주신 코드에 .in_slide::after { z-index: ... } 부분이 없으므로
   기본적으로 video 태그 위에 가상요소(::after)가 올라오게 됩니다.
   혹시 영상이 너무 밝게 나오면 아래 코드를 확인하세요.
*/
.back_slide .inner_slide .in_slide::after {
    /* 기존 코드 유지 */
    z-index: 1; /* 비디오(0)보다 높아야 함 */
}


/* ===== back_slide full-bleed overrides ===== */
.back_slide{
    position: relative;
    width: 100%;
    height: 100dvh; /* 뷰포트 가득 */
    z-index: 0;
}
@supports not (height: 100dvh){
    .back_slide{ height: 100vh; }
}

/* slick 컨테이너가 높이를 잃지 않도록 */
.back_slide .inner_slide{ position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.slick-list.draggable{ width:100%; height:100%; }
.back_slide .slick-track{ width:100%; height:100%; }

/* 각 슬라이드 배경 공통값 : 중앙정렬, 반복없음, 꽉 채움 */
.back_slide .inner_slide .in_slide{
    width: 100%; height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==== dim overlay on background slides ==== */
.back_slide .inner_slide .in_slide{
    position: relative;
}

/* 기본 35% 어둡게 */
.back_slide .inner_slide .in_slide::after{
    content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}

.inner_text{ position: relative; z-index: 2; }

/* 슬라이드별 농도 조절 */
.back_slide .inner_slide .slide01::after{ background: rgba(0,0,0,.30); }
.back_slide .inner_slide .slide02::after{ background: rgba(0,0,0,.30); }
.back_slide .inner_slide .slide03::after{ background: rgba(0,0,0,.30); }
.back_slide .inner_slide .slide04::after{ background: rgba(0,0,0,.30); }

.inner_text{color:#fff; font-size:2.5vw; font-weight:700; position:relative; width:100%; height:100%; display:flex; align-items: center; justify-content:center;text-align:center;}
.inner_text > div{width:100%; position:absolute; top:27%;}
.inner_text > div h2{color:#fff; font-weight:700; line-height:4.5rem; font-size:5rem; white-space:normal;}
.inner_text div.chg_wrap{width:100%; position:relative; display:flex; justify-content:center;}
.inner_text div.chg_wrap h2{position:absolute; left:0; text-align:right; width:46%; margin-right:1vw;line-height:5rem}
.inner_chg {width:53%; position:absolute; right:0; text-align:left; font-size:4.5rem; line-height:5.25rem; font-weight:700; overflow:hidden;}

.slick-list.draggable{width:100%; height:100%;}
.back_slide .slick-track{width:100%; height:100%;}
.back_slide .swiper-slide.slide01 h2{color:#000}
.back_slide .swiper-slide.slide01{background-color:#cea2fd}
.back_slide .swiper-slide.slide01 h2 span{color:#bee28f}
.back_slide .swiper-slide.slide02{background-color:#407f91}
.back_slide .swiper-slide.slide02 h2 span{color:#ffae00}
.back_slide .swiper-slide.slide03{background-color:#5bbcc4}
.back_slide .swiper-slide.slide03 h2 span{color:#ffc6b7}
.back_slide .swiper-slide.slide04{background-color:#407f91}
.back_slide .swiper-slide.slide04 h2 span{color:#ffae00}

.main_slogan{white-space:nowrap; position:relative;}
.main_slogan > div{display:flex; justify-content:center; height:100%; width:100vw; align-items:center; z-index:1;}
.main_slogan > div h1{color:#fff; font-size:3vw}
.main_slogan > div h1 span{color:#f9543f}
.main_slogan > div svg#logo {fill:transparent; stroke:#f9543f ;stroke-width:2}
.main_slogan > .inner_text.top_inner{color:#fff}
.main_slogan > .inner_text.top_inner > div h2{color:#fff}
.main_slogan > .inner_text.top_inner .slick-vertical .slick-slide.cover_01{color:#f5ff00}
.main_slogan > .inner_text.top_inner .slick-vertical .slick-slide.cover_02{color:#32ffd1}
.main_slogan > .inner_text.top_inner .slick-vertical .slick-slide.cover_03{color:#000000}

/* slide_2 */
.flowwrap{transition-timing-function: linear;}
.w_slide{position:absolute; bottom:5vh;width:100%; background-color:#1b1a27}
.w_slide .flowwrap{width:100%;}
.w_slide .swiper-slide{width:10%; background-color:#24232f; color:#fff; padding:0 5rem; margin:0 1rem}

.b_slide {position:absolute; bottom:5vh;color:#fff; width:100%; z-index:0}
.b_slide .swiper-slide{width:10%; background-color:#fff; padding:0 5rem; margin:0 1rem}

/* 슬라이드 공통*/
.swiper-slide.white_slide,
.swiper-slide.black_slide{padding:2.5vw 2.5vw 2.5vw 2.75vw; border-radius:10px; box-sizing:border-box;}
.slide_title{display:flex;width:100%; flex-wrap:wrap; overflow:hidden;}
.slide_title > h3:before{content:''; display:block; background-color:#f84f39; width:33px; height:4px; margin-bottom:1vh;}
.slide_title > h3{font-size:1.1rem; width:100%; font-weight:700; line-height:1.25rem; white-space:normal; letter-spacing:0.5px; min-height:6vh}
.slide_title > p{font-size:1.25vh; width:100%; word-break:keep-all; max-width:100%; line-height:1.75vh; margin:1vh 0 0; min-height:4vh; }
.slide_cont{margin-top:1.5vw; white-space:normal;}
.slide_cont > table{width:100%;}
.slide_cont > table th{text-align:left; font-size:1.2vh; vertical-align:top; font-weight:600; padding-right:15px;}
.slide_cont > table td{font-size:1.2vh; font-weight:500;}

.swiper-slide.white_slide{color:#000;;background-color:#fff}
.swiper-slide.white_slide .slide_title > p{color:#afadc0}

.swiper-slide.black_slide{color:#fff; background-color:#242133}
.swiper-slide.black_slide .slide_title > p{color:#9c9ca9; white-space:normal}
.swiper-slide.black_slide .slide_cont > table td{color:#9c9ca9}

/* 덮어쓰기 */
#header .h_gnb .hg_wrap a.on:before,
#header .h_gnb .hg_wrap a:hover:before{background-color:#fff;}

#contents{text-align:center; z-index:0; background-color:#f5f6f9}
mark{background-color:transparent}
.blind{display:none}
hr{display:none;}
#footer .f_copyright{display:none}
#footer .f_download{display:none}
#aside .a_quick{display:none}
#contents .c_title.main_title{margin-top:80px;}
#footer{margin-top:0; text-align:center;}
#footer .f_title{margin-top:0;}

/* footer */
div.wave_wrap{background-color:#f5f6f9; padding-top:6vh}
.waves {position:relative; width: 100%; height:15vh; margin-bottom:-7px; min-height:100px; max-height:150px;}
.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s; animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s; animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s; animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s; animation-duration: 20s;}
@keyframes move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}
section.load{position:relative; width:100vw; height:100vh}
section.load > article.blue{position:absolute; top:0; left:0; width:100%; height:100%; background-color:#eee; z-index:999; animation: pageUp 25s cubic-bezier(.55,.5,.45,.5) infinite;}
@keyframes pageUp {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

@media (max-width: 1700px) {
  .inner_text div.chg_wrap h2{width:43%}
  .inner_chg{width:56%}
}

@media (max-width: 1400px) {
  .inner_text div.chg_wrap h2{width:40%}
  .inner_chg{width:59%}
}
@media (max-width: 1400px) {
  .inner_text div.chg_wrap h2{width:40%}
  .inner_chg{width:59%}
  .slide_title > h3{font-size:1.5rem}
}
@media (max-width: 1100px){
    .swiper-slide.white_slide,
    .swiper-slide.black_slide{padding:4vh 3vw}
}
@media (max-width: 1024px) {
  .inner_text div.chg_wrap h2{width:39%}
  .inner_chg{width:60%}
  .swiper-slide.white_slide,
  .swiper-slide.black_slide{padding:5vh 9vw}
  .m_only{display:none;}
}
@media (max-width: 1023px) {
  .m_only{display:block;}
  .slide_title > h3{font-size:1.25rem}
  .w_slide .swiper-slide{margin:0 0.5rem; min-width:250px !important;}
  .b_slide .swiper-slide{margin:0 0.5rem; min-width:250px;}
  .inner_text div.chg_wrap h2{width:34%}
  .inner_chg{width:65%}
  .inner_text > div h2{font-size:2.5rem; line-height:3rem}
  .inner_chg{font-size:2.5rem; line-height:3rem}
  .inner_text div.chg_wrap h2{font-size:2.5rem; line-height:3rem}
  #contents .c_title.main_title{margin-top:0; padding:0 50px}
  td.data_td > div {height:30px; vertical-align:top;}
}




/**/

/* VIEW SHORTS SECTION STYLE */
.view_shorts_section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
}

.shorts_wrap {
    max-width: 1280px; /* 제이펍플 기준 넓이 */
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    box-sizing: border-box;
}

/* Header Area */
.shorts_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.shorts_header .header_txt {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.shorts_header h2 {
    font-size: 40px;
    color: #111;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.shorts_header .sub_txt {
    font-size: 16px;
    color: #999;
    font-weight: 400;
    margin-bottom: 3px;
}

.btn_view_more {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.btn_view_more:hover {
    color: #000;
}

.circle_arrow {
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s;
}

.circle_arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    width: 6px;
    height: 6px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn_view_more:hover .circle_arrow {
    border-color: #000;
    background: #f9f9f9;
}

/* Slider Area */
.shorts_slider_container {
    position: relative;
    padding: 0 10px; /* 양옆 여백 */
}

/* Shorts Card Design */
.shorts_card {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 20px; /* 둥근 모서리 핵심 */
    overflow: hidden;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.1);
    transform: translateZ(0); /* 사파리 둥근모서리 버그 방지 */
}

.img_frame {
    position: relative;
    width: 100%;
    padding-bottom: 177%; /* 9:16 비율 유지 (중요) */
    background: #000;
    overflow: hidden;
}

.img_frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.shorts_card:hover .img_frame img {
    transform: scale(1.05);
}

/* Text Overlay (Gradient) */
.txt_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
    text-align: left;
    box-sizing: border-box;
}

.txt_overlay .tit {
    display: block;
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.txt_overlay .hash {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 300;
    margin: 0;
}

/* Navigation Buttons */
.shorts_nav_btn {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 10;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.3s;
    background-repeat: no-repeat;
    background-position: center;
}
.shorts_nav_btn:hover {
    background-color: #ffe618; /* 제이펍플 포인트 컬러 */
}

/* 화살표 아이콘 만들기 */
.shorts_nav_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}

.prev_btn { left: -23px; }
.prev_btn::after { transform: translate(-30%, -50%) rotate(-135deg); }

.next_btn { right: -23px; }
.next_btn::after { transform: translate(-70%, -50%) rotate(45deg); }


/* Mobile Responsive */
@media (max-width: 1024px) {
    .shorts_header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .shorts_header .header_txt { flex-direction: column; align-items: flex-start; gap: 5px; }
    .shorts_header h2 { font-size: 30px; }
    .btn_view_more { position: absolute; right: 0; top: 10px; }
    
    .shorts_nav_btn { display: none; } /* 모바일에서는 버튼 숨김 */
}