/* ==========================================================
   sec1 (메인 배너 슬라이더)
========================================================== */
.sec1 {
    border-radius: 1.6rem;
    margin: 0 1rem;
}
.sec1 .swiper-slide {
    height: 72.4rem;
    border-radius: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
.sec1 .swiper-slide .banner_tag {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 7.2rem;
}
.sec1 .swiper-slide .banner_tit {
    margin-top: 3rem;
    font-size: 8rem;
    font-weight: 700;
    line-height: 1.2;
}
@media (max-width: 1024px) {
    .sec1 .swiper-slide .banner_tit {
        font-size: clamp(4rem, 1.353rem + 8.82vw, 7rem);
    }
}
.sec1 .swiper-slide .bottom_img {
    margin-top: auto;
    display: flex;
}

/* slide01 */
.sec1 .swiper-slide.slide01 {
    background: #000;
    color: #fff;
}
.sec1 .swiper-slide.slide01 .banner_tit {
    max-width: 98.8rem;
    width: var(--pc-width);
}
.sec1 .swiper-slide.slide01 .bottom_img {
    width: 53.6rem;
}

/* slide02 */
.sec1 .swiper-slide.slide02 {
    background: linear-gradient(180deg, #D6EBF6 0%, #FAFAFA 100%);
}
.sec1 .swiper-slide.slide02 .banner_tit {
    max-width: 84.8rem;
    width: var(--pc-width);
}
.sec1 .swiper-slide.slide02 .bottom_img { width: 134.4rem; }

/* 슬라이드 컨트롤 */
.sec1 .sec1_slide_remote {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 1.5rem;
    gap: 0.8rem;
}
.sec1 .sec1_slide_remote .sec1_autoplay {
    width: 1.8rem;
    height: 1rem;
    border-radius: 10rem;
    background-image: url('../image/autoplay_stop.png');
    background-size: 100%;
    cursor: pointer;
}
.sec1 .sec1_slide_remote .sec1_autoplay.on {
    background-image: url('../image/autoplay_stop_on.png');
}
.sec1 .sec1_slide_remote .sec1_swiper_pagination {
    display: flex;
    top: 0;
    bottom: 0;
    align-items: center;
    width: auto;
    gap: 0.8rem;
}
.sec1 .sec1_slide_remote .sec1_swiper_pagination .swiper-pagination-bullet {
    opacity: 1;
    width: 1rem;
    height: 1rem;
    background-color: #ececec;
    margin: 0;
}
.sec1 .sec1_slide_remote .sec1_swiper_pagination .swiper-pagination-bullet-active {
    background-color: #000;
}

.sec1_swiper .swiper-slide {
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.sec1_swiper .swiper-slide-active {
    opacity: 1 !important;
    visibility: visible;
}

/* ─── 768px 이하 레이아웃 변경 ─── */
@media (max-width: 768px) {
    .sec1 .swiper-slide { height: 60rem; }

    .sec1 .swiper-slide.slide01 .banner_tit { max-width: unset; }
    .sec1 .swiper-slide.slide01 .bottom_img {
        width: 75%;
    }
    .sec1 .swiper-slide.slide02 .banner_tit { max-width: unset; }
    .sec1 .swiper-slide.slide02 .bottom_img { width: 125%; }

    .sec1 .sec1_slide_remote .sec1_autoplay {
        width: 2.6rem;
        height: 1.4rem;
    }
    .sec1 .sec1_slide_remote .sec1_swiper_pagination .swiper-pagination-bullet {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* ─── 480px 이하 레이아웃 변경 ─── */
@media (max-width: 480px) {
    .sec1 .swiper-slide { 
        height: 45rem; 
    }
    .sec1 .swiper-slide .banner_tag { font-size: 1.8rem; }
    .sec1 .swiper-slide .banner_tit {
        margin-top: 2rem;
    }
    .sec1 .swiper-slide.slide02 .bottom_img { width: 220%; }

    .sec1 .sec1_slide_remote .sec1_autoplay {
        width: 1.8rem;
        height: 1rem;
    }
    .sec1 .sec1_slide_remote .sec1_swiper_pagination .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
    }
}
/* END - sec1 */


/* ==========================================================
   sec2 (서비스 카드 슬라이더)
========================================================== */
.sec2 { 
    padding: 12rem 0; 
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec2 .sec_title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

.sec2 .sec2_swiper {
    margin-top: 4rem;
    width: 100%;
    overflow: visible;
}


.sec2 .sec2_swiper .sec2_item {
    width: 420px; 
    flex-shrink: 0 !important;
    
    transition: background-color 0.2s ease-out, color 0.2s ease-out;

    height: 58rem;
    padding: 5rem 0;
    border-radius: 4rem;
    background: var(--boxBg-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.sec2 .sec2_swiper .sec2_item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4rem;
    background: transparent no-repeat center / cover;
    opacity: 0;
    transition: opacity 0.2s ease-out, transform 0.3s ease-out;
    transform: scale(1);
    z-index: -1;
}
.sec2 .sec2_swiper .sec2_item:hover::after { 
    opacity: 1; 
    transform: scale(1.05); 
}

.sec2 .sec2_swiper .item_title {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.2;
    padding: 0 3rem;
    text-align: center;
}
.sec2 .sec2_swiper .sec2_item .item_title,
.sec2 .sec2_swiper .sec2_item .item_sub {
    transition: color 0.2s ease-out;
    position: relative;
    z-index: 1;
}
.sec2 .sec2_swiper .sec2_item .item_view,
.sec2 .sec2_swiper .sec2_item .item_bottom_img {
    transition: all 0.2s ease-out;
    position: relative;
    z-index: 1;
}
.sec2 .sec2_swiper .sec2_item:hover .item_title { color: #fff; }
.sec2 .sec2_swiper .sec2_item:hover .item_sub   { color: #fff; }
.sec2 .sec2_swiper .sec2_item:hover .item_view {
    background-color: #fff;
    color: var(--black-color);
}
.sec2 .sec2_swiper .sec2_item:hover .item_view:hover {
    background-color: var(--buttonBg-color);
}
.sec2 .sec2_swiper .sec2_item:hover .item_bottom_img { display: none; }

.sec2 .sec2_swiper .item_sub {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    padding: 0 3rem;
    margin-top: 2rem;
}
.sec2 .sec2_swiper .item_view {
    margin: 3rem auto 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 10rem;
    background-color: #000;
    display: flex;
}
.sec2 .sec2_swiper .item_bottom_img {
    display: flex;
    margin: auto;
}

/* 각 카드 이미지 크기 */
.sec2 .sec2_item.credit_card .item_bottom_img { 
    width: 30.1rem; margin-bottom: -6.5rem; transform: rotate(38.7deg); 
}
.sec2 .sec2_item.payment .item_bottom_img { 
    width: 17.3rem; margin-bottom: -5rem; 
}
.sec2 .sec2_item.cell_phone .item_bottom_img { 
    width: 28.7rem; margin-bottom: -5rem; 
}
.sec2 .sec2_item.virtual_account .item_bottom_img { 
    width: 23rem;   margin-bottom: 1rem; 
}
.sec2 .sec2_item.real_time_account_transfer .item_bottom_img { 
    width: 23rem; margin-bottom: -1rem; 
}
.sec2 .sec2_item.overseas_remittance .item_bottom_img { 
    width: 30.5rem; margin-bottom: 1rem; 
}
.sec2 .sec2_item.identity_verification .item_bottom_img { 
    width: 24.6rem; margin-bottom: 0; 
}
.sec2 .sec2_item.account_verification .item_bottom_img { 
    width: 25rem;   margin-bottom: 1rem; 
}

/* hover 배경 이미지 */
.sec2 .sec2_item.credit_card:hover::after{ 
    background-image: url('../image/img_credit_card_bg.png') !important; 
}
.sec2 .sec2_item.payment:hover::after{ 
    background-image: url('../image/img_payment_bg.png') !important; 
}
.sec2 .sec2_item.cell_phone:hover::after{ 
    background-image: url('../image/img_cell_phone_bg.png') !important; 
}
.sec2 .sec2_item.virtual_account:hover::after{ 
    background-image: url('../image/img_virtual_account_bg.png') !important; 
}
.sec2 .sec2_item.real_time_account_transfer:hover::after{ 
    background-image: url('../image/img_real_time_account_transfer_bg.png') !important; 
}
.sec2 .sec2_item.overseas_remittance:hover::after{ 
    background-image: url('../image/img_overseas_remittance_bg.png') !important; 
}
.sec2 .sec2_item.identity_verification:hover::after{ 
    background-image: url('../image/img_identity_verification_bg.png') !important; 
}
.sec2 .sec2_item.account_verification:hover::after{ 
    background-image: url('../image/img_account_verification_bg.png') !important; 
}

/* 슬라이더 컨트롤 */
.sec2 .sec2_swiper_control {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.sec2 .sec2_pause {
    position: static;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--buttonBg-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sec2 .sec2_pause::after {
    content: "";
    display: block;
    width: 0.9rem;
    height: 1.1rem;
    background: url('../image/icon_pause.svg') no-repeat center center;
    background-size: contain;
}

.sec2 .sec2_pause:not(.is-playing)::after {
    background-image: url('../image/icon_play.svg');
}


.sec2 .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 1rem;
}
.sec2 .swiper-pagination .swiper-pagination-bullet {
    opacity: 1;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #D8DAE0;
    margin: 0;
}
.sec2 .swiper-pagination .swiper-pagination-bullet-active { background-color: #000; }
.sec2 .swiper-button-prev,
.sec2 .swiper-button-next {
    position: static;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--buttonBg-color);
    margin-top: auto;
}
.sec2 .swiper-button-prev::after {
    content: "";
    background: url('../image/icon_prev.svg') no-repeat center center;
    width: 0.7rem;
    height: 1.2rem;
}
.sec2 .swiper-button-next::after {
    content: "";
    background: url('../image/icon_next.svg') no-repeat center center;
    width: 0.7rem;
    height: 1.2rem;
}

/* ─── 1024px 이하: 카드 2열 그리드로 ─── */
@media (max-width: 1024px) {
    .sec2 .sec2_swiper {
        gap: 3rem;
        flex-wrap: wrap;
    }
    .sec2 .sec2_swiper .sec2_item {
        padding: 5rem 0;
        min-height: 58rem;
    }
}

/* ─── 480px 이하: 1열로 ─── */
@media (max-width: 480px) {
    .sec2 { padding: 10rem 0; }
    .sec2 .sec2_swiper .sec2_item {
        width: 100%;
    }
    .sec2 .sec2_swiper .item_title { font-size: 1.5rem; }
    .sec2 .sec2_swiper .item_sub {
        font-size: 1.8rem;
        margin-top: 2rem;
    }
    .sec2 .sec2_swiper .item_view {
        font-size: 1.5rem;
        margin: 3rem auto;
    }
    .sec2_swiper .swiper-wrapper{
        gap: 2rem;
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .sec2 .sec2_swiper_control{
        display: none;
    }
}
/* END - sec2 */


/* ==========================================================
   sec3 (카테고리 리스트)
========================================================== */
.sec3 .section_items {
    display: flex;
    flex-direction: column;
}
.sec3 .section_items .item_box_list {
    display: flex;
    gap: 12rem;
    padding: 4rem 0 12rem;
    border-top: 0.1rem solid #dcdcdc;
}
.sec3 .section_items .item_box_list:last-child { padding: 4rem 0 0; }

/* 카테고리 */
.sec3 .section_items .item_box_list .category {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 30rem;
}
.sec3 .section_items .item_box_list .category .category_tit {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
}
.sec3 .section_items .item_box_list .category .cotegory_txt {
    color: var(--grey-color);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
}

/* 콘텐츠 박스 */
.sec3 .section_items .item_box_list .item_box_contents { width: 90rem; }
.sec3 .section_items .item_box_list .item_box_contents .item_con_box {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}
.sec3 .section_items .item_box_list .item_box_contents .item_con_box .item_con_list {
    width: calc((100% - 5rem) / 2);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.sec3 .item_con_list .list_img { width: 8rem; display: flex; }
.sec3 .item_con_list .list_tit {
    color: var(--black-color);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.sec3 .item_con_list .list_txt {
    color: var(--grey-color);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
}
.sec3 .item_con_list .list_date {
    color: var(--grey-color);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}
.sec3 .item_con_list .list_view_btn {
    border-radius: 10rem;
    background: var(--boxBg-color);
    padding: 0.8rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 400;
    width: fit-content;
    transition: background-color 0.3s ease-out;
}
.sec3 .item_con_list .list_view_btn:hover {
    background: var(--buttonBg-color);
}

/* 게시판형 말줄임 */
.sec3 .item_box_list.list_board .list_tit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sec3 .item_box_list.list_board .list_txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 768px 이하: 세로 방향 레이아웃 ─── */
@media (max-width: 768px) {
    .sec3 .section_items .item_box_list {
        flex-direction: column;
        gap: 4rem;
        padding: 12rem 0;
    }
    .sec3 .section_items .item_box_list .category { 
        width: 100%; 
    }
    .sec3 .section_items .item_box_list .item_box_contents { 
        width: 100%; 
    }
}

/* ─── 480px 이하: 콘텐츠 1열 ─── */
@media (max-width: 480px) {
    .sec3 .section_items .item_box_list { 
        padding: 10rem 0; 
    }
    .sec3 .section_items .item_box_list .category .category_tit { 
        font-size: 2.8rem; 
    }
    .sec3 .section_items .item_box_list .category .cotegory_txt { 
        font-size: 1.6rem; 
    }
    .sec3 .section_items .item_box_list .item_box_contents .item_con_box {
        flex-direction: column;
        gap: 2rem;
    }
    .sec3 .section_items .item_box_list .item_box_contents .item_con_box .item_con_list {
        width: 100%;
        padding: 2rem;
        border-radius: 1.6rem;
        background: var(--boxBg-color);
    }
    .sec3 .item_con_list .list_img { 
        width: 6rem; 
    }
    .sec3 .item_con_list .list_tit { 
        font-size: 2rem; 
    }
    .sec3 .item_con_list .list_txt { 
        font-size: 1.6rem; 
    }
    .sec3 .item_con_list .list_date { 
        font-size: 1.6rem; 
    }
    .sec3 .item_con_list .list_view_btn {
        background: #FFF;
    }
}
/* END - sec3 */