@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:#fa7000}
.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:#fea948}
.back_slide .inner_slide div.slide04 h2 span{color:#ffae00}

.back_slide .inner_slide .slide01{
    /*background: #cea2fd url('https://j-pupple.com/images/2026-1.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{height:clamp(230px, 26vh, 310px); padding:2.5vw 2.5vw 2.5vw 2.75vw; border-radius:10px; box-sizing:border-box; overflow:hidden;}
.slide_title{display:flex;width:100%; flex-wrap:wrap; overflow:hidden;}
.slide_title > h3:before{content:''; position:absolute; left:0; top:0; display:block; background-color:#f84f39; width:33px; height:4px; margin:0;}
.slide_title > h3{position:relative; width:100%; height:calc((1.6rem * 2) + 1vh + 4px); padding-top:calc(1vh + 4px); box-sizing:border-box; overflow:hidden; font-size:1.3rem; font-weight:700; line-height:1.6rem; white-space:normal; letter-spacing:-0.8px; word-break:normal; overflow-wrap:anywhere;}
.slide_title > p{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:100%; height:3em; overflow:hidden; max-width:100%; margin:1vh 0 0; color:inherit; font-size:clamp(12px, 0.72vw, 14px); line-height:1.5; letter-spacing:-1px; word-break:normal; overflow-wrap:anywhere;}
.slide_cont{margin-top:1.5vw; overflow:hidden; white-space:normal;}
.slide_cont > table{width:100%; table-layout:fixed;}
.slide_cont > table th{text-align:left; font-size:1.2vh; vertical-align:top; font-weight:600; padding-right:15px;}
.slide_cont > table td{overflow:hidden; font-size:1.2vh; font-weight:500; text-overflow:ellipsis; white-space:nowrap;}

.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{height:calc((1.65rem * 2) + 1vh + 4px); font-size:1.35rem; line-height:1.65rem;}
}
@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 7vw}
  .m_only{display:none;}
}
@media (max-width: 1023px) {
  .m_only{display:block;}
  .swiper-slide.white_slide,
  .swiper-slide.black_slide{height:230px;}
  .slide_title > h3{height:calc((1.25rem * 2) + 12px); padding-top:12px; font-size:0.9rem; line-height:1.25rem; font-weight:600; letter-spacing:-0.8px;}
  .slide_title > p{height:2.7em; margin-top:8px; font-size:12px; line-height:1.35;}
  .slide_cont{margin-top:14px;}
  .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); }

/* Main shorts section */
#j_shorts_section{padding:120px 0 0; overflow:hidden; position:relative;}
.shorts_wrap{max-width:1400px; margin:0 auto; padding:0 20px; position:relative;}
.shorts_head{text-align:center; margin-bottom:50px;}
.shorts_head .t1{margin-bottom:5px; color:#333; font-family:'Montserrat', sans-serif; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;}
.shorts_head .t2{margin-bottom:10px; color:#111; font-family:'Noto Sans KR', sans-serif; font-size:42px; font-weight:800; line-height:1.2; letter-spacing:-1px;}
.shorts_head .t3{color:#666; font-size:17px; font-weight:400; letter-spacing:-1px;}
.shorts_slider_wrap{padding:0 40px;}
.shorts_slider .slick-list{padding-top:20px !important;}
.shorts_slider .slick-slide{padding:0 10px; box-sizing:border-box;}
.shorts_open_btn{display:block; position:relative; overflow:hidden; aspect-ratio:9 / 16; border-radius:20px; background:#fff; cursor:pointer; transition:transform 0.3s ease; -webkit-mask-image:-webkit-radial-gradient(white, black);}
.shorts_open_btn:hover{transform:translateY(-10px);}
.shorts_open_btn img{width:100%; height:100%; object-fit:cover; opacity:1; transform:scale(1.03); transition:opacity 0.3s;}
.shorts_open_btn:before{content:""; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.45); opacity:0; transition:opacity 0.3s;}
.shorts_open_btn:hover:before{opacity:1;}
.shorts_play_icon{position:absolute; top:50%; left:50%; z-index:2; width:60px; height:60px; border:2px solid #fff; border-radius:50%; box-sizing:border-box; color:#fff; font-size:0; opacity:0; text-shadow:none; transform:translate(-50%, -50%); transition:opacity 0.3s;}
.shorts_play_icon:before{content:""; position:absolute; left:50%; top:50%; width:0; height:0; border-top:13px solid transparent; border-bottom:13px solid transparent; border-left:18px solid #fff; transform:translate(-35%, -50%);}
.shorts_open_btn:hover .shorts_play_icon{opacity:1;}
.btn_share_copy{position:absolute; top:15px; right:15px; z-index:50; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,0.3); border-radius:50%; background:rgba(0,0,0,0.5); color:#fff; font-size:20px; cursor:pointer; transition:0.2s;}
.btn_share_copy:hover{border-color:#ed2b38; background:#ed2b38; transform:scale(1.1);}
.shorts_info{position:absolute; bottom:0; left:0; z-index:3; width:100%; padding:20px; box-sizing:border-box; background:linear-gradient(to top, rgba(0,0,0,0.9), transparent); color:#fff; text-align:left;}
.shorts_info .s_tit{display:-webkit-box; overflow:hidden; margin-bottom:5px; font-size:13px; font-weight:600; line-height:1.3; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.shorts_info .s_desc{font-size:13px; opacity:0.8;}
.shorts_slider .slick-arrow{position:absolute; top:50%; z-index:10; width:50px; height:50px; border:0; border-radius:50%; background:#fff; box-shadow:0 5px 15px rgba(0,0,0,0.1); font-size:0; cursor:pointer; transform:translateY(-50%); transition:0.3s;}
.shorts_slider .slick-arrow:hover{background:#ed2b38;}
.shorts_slider .slick-arrow::before{position:absolute; top:50%; left:50%; color:#333; font-family:'xeicon'; font-size:24px; transform:translate(-50%, -50%);}
.shorts_slider .slick-arrow:hover::before{color:#fff;}
.shorts_slider .slick-prev{left:-20px;}
.shorts_slider .slick-prev::before{content:'\e93b';}
.shorts_slider .slick-next{right:-20px;}
.shorts_slider .slick-next::before{content:'\e93e';}
.modle_popup_shorts{display:none; position:fixed; top:0; left:0; z-index:99999999; width:100%; height:100%;}
.modle_popup_shorts.on{display:block;}
.modle_popup_shorts .bg{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); cursor:pointer;}
.modle_popup_shorts .contents{position:absolute; top:50%; left:50%; z-index:10; width:90%; max-width:500px; height:80vh; border-radius:30px; background:#000; transform:translate(-50%, -50%);}
.modle_popup_shorts .btn_close{position:absolute; top:-40px; right:0; z-index:20; width:30px; height:30px; fill:#fff; cursor:pointer;}
.modle_popup_shorts .btn_close svg{width:100%; height:100%;}
.modle_popup_shorts .play{width:100%; height:100%;}
.modle_popup_shorts iframe{width:100%; height:100%; border-radius:30px;}

@media (max-width:1024px){
	.shorts_head .t2{font-size:32px;}
	.shorts_slider_wrap{padding:0;}
	.shorts_slider .slick-arrow{display:none !important;}
}
@media (max-width:768px){
	#j_shorts_section{padding:80px 0 30px;}
	.shorts_head .t2{font-size:28px;}
}

/* Main service shortcuts */
.main_service_links{width:100%; margin:40px auto 30px; box-sizing:border-box; text-align:left;}
.main_service_links > strong{display:block; margin-bottom:18px; color:#111427; font-size:22px; line-height:30px; font-weight:600; letter-spacing:-1px;}
.main_service_links .tab{margin-bottom:0 !important;}
.main_service_link_buttons{display:block; width:100%; box-sizing:border-box;}
.main_service_link_buttons ul{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; width:100%; margin-left:0; box-sizing:border-box;}
.main_service_link_buttons li{float:none; width:auto !important; min-width:0;}
.main_service_links .tab a{display:flex; align-items:center; justify-content:center; width:100%; min-height:60px; height:auto; margin:0; padding:10px 12px; box-sizing:border-box; border-top:2px solid #5d5d5d; border-bottom:1px solid #eaeaea; border-radius:0; background-color:transparent; color:#212121; font-size:16px; font-family:'Montserrat', Noto Sans KR, sans-serif; font-weight:500; line-height:1.35; text-align:center; overflow:visible; text-overflow:clip; white-space:normal; word-break:normal; overflow-wrap:normal; box-shadow:none; transition:0.2s; -webkit-transition:0.2s;}
.main_service_links .tab a.service_link_split{flex-direction:column; gap:2px;}
.main_service_links .tab a.service_link_split .service_link_pc{display:block; white-space:nowrap;}
.main_service_links .tab a.service_link_split .service_link_mobile{display:none;}
.main_service_links .tab a:hover{background-color:transparent; color:#ff6714; border-top-color:#ff6714; border-bottom-color:#ff6714;}

@media all and (max-width:800px){
    .main_service_links{margin-top:32px; width:100%;}
    .main_service_links > strong{font-size:20px; line-height:28px;}
    .main_service_link_buttons ul{grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:10px; row-gap:0;}
    .main_service_link_buttons li:nth-child(-n+2) a{border-bottom:0;}
    .main_service_links .tab a{min-height:50px; padding:7px 4px; font-size:12px; line-height:1.25; letter-spacing:-0.8px; word-break:normal; overflow-wrap:normal;}
    .main_service_links .tab a.service_link_split{gap:1px;}
    .main_service_links .tab a.service_link_split .service_link_pc{display:none;}
    .main_service_links .tab a.service_link_split .service_link_mobile{display:block; white-space:nowrap;}
}


/* 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; } /* 모바일에서는 버튼 숨김 */
}