/* === 지급대행 서비스 + cardCMS ===*/

/* ==== 지급대행 서비스 :: 맨위 상단(파랑배경) ==== */
.payAgency{margin-bottom: 0px;}
.logo_txt, .payAgency_titleImg{display: flex; flex-direction: column; align-items: center;}
.payAgency_txt03{
    background: #1c1c1c; color: #fff;
    padding: 8px 20px;
    font-size: 1.05em;margin-bottom: 10px;
    line-height: 25px; border-radius: 50px;
}
.payAgency_title{font-size: 2em; line-height: 1.27em; margin-bottom: 25px; color: #1c1c1c; text-align: center; word-break: keep-all;}
.payAgency_titleImg{width: 100%; min-width: 290px; max-width: 450px; margin: 0 auto 0 auto;}

/* ==== 지급대행 서비스 :: PC화면 ==== */
.ap_scrbg{width: 100%; padding: 60px 0; margin: 50px 0 0 0; background: #e0f7fa;}
.ap_mp_sr{width: 100%;}
.sr_im02{align-items: center;}
.sr_imbg02{width: 85%; margin-bottom: 25px;}
.payAgency_h03{font-size: 1.8em; line-height: 40px; font-weight: 600; word-break: keep-all; margin-bottom: 25px; color: #1c1c1c; text-align: center;}
.payAgency_con02{font-size: 1.095em; line-height: 1.35em; color: #1c1c1c;}

/* === 지급대행 서비스 :: 서비스 프로세스 === */
.sectionApㄴ03{margin-bottom: 50px; padding-top: 20px; padding-bottom: 30px;}
.payAgency_process{width: 100%; min-width: 290px; max-width: 450px; margin: 5px auto 0 auto;}

/* === 지급대행 서비스 :: 서비스 장점 === */
.ap_mob{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.ap_bg02{background: #d0e8f2 !important;}
.ap_mt-50{margin-top: 50px;}
.uselist {
    width: 100%; margin-bottom: 100px; display: flex;
    gap: 20px;  flex-direction: column; justify-content: space-between;
}
.uselist>li{
    width: 100%; padding: 25px 25px; text-align: center;
    border: 1px solid #5c768d; border-radius: 8px;
}
.sr_step03{display: inline-block; margin-bottom: 25px; width: 60px; height: 60px;}
.use_txt, .use_txt02{font-size: 1.25em; line-height: 28px; word-break: keep-all;}
.use_txt02{font-weight: bold; margin-bottom: 10px;}
.payAgency_strength{font-size: 1.095em; line-height: 1.35em; word-break: keep-all;}

/* ==== 카드 CMS 서비스 ==== */
/* ==== 카드 CMS 서비스 :: bg section ==== */
.cms_scrbg{background: #F5F5F5;}
.suqBtn{max-width: 900px !important; margin: 0 auto !important;}
.cms_titleImg{margin: 40px auto 70px auto;}
.cms_con02{word-break: break-all;}
.cms_con02>br , .swiper-slide br{display: none;}
.d-block{display: block !important;}

/* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
.layout-wrapper{
    min-width: 280px; max-width: 1300px;
    display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px;
    padding: 50px 15px;
}
/* 이미지 슬라이드(왼쪽) */
.left-swiper{width: 85%; margin: 0 auto;}
.left-swiper img{width: 100%; max-width: 380px;}
.right-swiper{width: 100%; padding: 0; position: relative;}

/* 탭+텍스트 슬라이드(오른쪽) */
.tab-menu{display: flex; align-items: center; justify-content:flex-start; gap: 12px; margin-bottom: 20px;}
.tab-menu button{
    padding: 15px 10px; font-size: 18px; line-height: 24px;
    border: none; border-radius: 7px;  background-color: #eee;
    font-weight: bold; cursor: pointer; word-break: keep-all;
}
.tab-menu button.active{background-color: #004ed4; color: #fff;}

.right-swiper-container{height: 100%; box-sizing: border-box; padding-bottom: 40px;}
.right-swiper .swiper-pagination{
    position: absolute; bottom: 0px !important; left: 0; 
    width: 100%; z-index: 10; text-align: center;
}
.right-swiper .swiper-slide{display: flex; flex-direction: column; align-items: center; padding: 30px 10px 30px 0px;}
.right-swiper h2{font-size: 2em; font-weight: bold; margin-bottom: 30px;}
.right-swiper p{font-size: 1.25em; line-height: 1.3; word-break: keep-all; text-align: center;}
.swiper-pagination{margin-top: 30px; text-align: left;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
{width: 11px; height: 11px;}
.swiper-pagination-bullet-active{background-color: #004ed4 !important;}

/* ==== cms 서비스 장점 ==== */
.cms_scrbg02{background: #ebf7ff !important; margin: 0 !important;}
.cmsList{margin-bottom: 30px;}

/* ==== 판매자용 간편결제 ==== */
.seller_titleImg{max-width: 320px !important;}
.seller_scrbg{background:#DDE6F3  !important;}
.seller_scrbg02{background: #F5F5F5 !important;}

/* === 반응형 css ===*/
/* 모바일 */
@media (min-width: 375px) and (max-width: 414px){
    /* ==== 카드 CMS 서비스 ==== */
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_con02{font-size: 1.09em;}
    .cms_con02>br, .swiper-slide br{display: none;}
    .d-block{display: block !important;}

    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 85%; margin: 0 auto;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu button{padding: 15px 18px; font-size: 18px; line-height: 24px;}
    .right-swiper p{font-size: 1.25em; line-height: 1.4;}
}
@media (min-width: 415px) and (max-width: 515px){
    .payAgency_txt03{font-size: 1.2em; margin-bottom: 15px; line-height: 25px;}
    .payAgency_title{font-size: 2.2em; line-height: 1.3em; margin-bottom: 35px;}

    /* ==== 지급대행 서비스 :: PC화면 ==== */
    .payAgency_h03{font-size: 1.95em; line-height: 35px; margin-bottom: 22px;}
    .payAgency_con02{font-size: 1.2em; line-height: 1.35em;}

    /* === 지급대행 서비스 :: 서비스 프로세스 === */
    .sectionAp03{margin-bottom: 50px; padding-top: 20px; padding-bottom: 30px;}
    .payAgency_process{width: 100%; min-width: 290px; max-width: 450px; margin: 12px auto 0 auto;}

    /* === 지급대행 서비스 :: 서비스 장점 === */
    .uselist{margin-bottom: 35px; gap: 20px;}
    .uselist>li{padding: 25px 25px;}
    .sr_step03{ margin-bottom: 30px; width: 65px; height: 65px;}
    .use_txt, .use_txt02{font-size: 1.25em; line-height: 28px;}
    .use_txt02{font-weight: bold; margin-bottom: 10px;}
    .payAgency_strength{font-size: 1.095em; line-height: 1.35em;}

    /* ==== 카드 CMS 서비스 ==== */
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_titleImg{margin: 40px auto 85px auto;}

    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 60%; margin: 0 auto;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu{justify-content: center;}
    .tab-menu button{padding: 15px 18px; font-size: 18px; line-height: 24px;}
    .right-swiper p{font-size: 1.25em; line-height: 1.4;}

    /* ==== 판매자용 간편결제 ==== */
    .seller_titleImg{max-width: 380px !important;}
}
@media (min-width: 516px) and (max-width: 616px){
    .payAgency_titleImg{max-width: 400px;}
    .payAgency_txt03{font-size: 1.25em; margin-bottom: 15px; line-height: 30px;}
    .payAgency_title{font-size: 2.25em; line-height: 1.3em; margin-bottom: 35px;}

    /* ==== 지급대행 서비스 :: PC화면 ==== */
    .sr_imbg02{width: 80%;}
    .payAgency_h03{font-size: 1.95em; line-height: 40px; margin-bottom: 30px;}
    .payAgency_con02{font-size: 1.2em; line-height: 1.35em;}

    /* === 지급대행 서비스 :: 서비스 프로세스 === */
    .sectionAp03{margin-bottom: 50px; padding-top: 20px; padding-bottom: 30px;}
    .payAgency_process{width: 100%; min-width: 290px; max-width: 550px; margin: 20px auto 0 auto;}

    /* === 지급대행 서비스 ::서비스 장점 === */
    .uselist{margin-bottom: 35px; gap: 20px;}
    .uselist>li{padding: 25px 25px;}
    .sr_step03{ margin-bottom: 30px; width: 65px; height: 65px;}
    .use_txt, .use_txt02{font-size: 1.35em; line-height: 28px;}
    .use_txt02{font-weight: bold; margin-bottom: 10px;}
    .payAgency_strength{font-size: 1.2em; line-height: 1.4em;}

    /* ==== 카드 CMS 서비스 ==== */
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_titleImg{margin: 40px auto 85px auto;}
    .cms_con02>br{display: block;}
    .swiper-slide br{display: none;}
    
    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 50%; margin: 0 auto;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu{justify-content: center;}
    .tab-menu button{padding: 15px 18px; font-size: 18px; line-height: 24px;}
    .right-swiper p{font-size: 1.25em; line-height: 1.4;}

    /* ==== 판매자용 간편결제 ==== */
    .seller_titleImg{max-width: 380px !important;}
}
@media (min-width: 617px) and (max-width: 711px){
    .payAgency_titleImg{max-width: 420px;}
    .payAgency_txt03{font-size: 1.35em; margin-bottom: 15px; line-height: 30px;}
    .payAgency_title{font-size: 2.4em; line-height: 1.35em; margin-bottom: 40px;}

    /* ==== 지급대행 서비스 :: PC화면 ==== */
    .ap_scrbg{padding: 60px 0; margin: 60px 0 0 0;}
    .sr_imbg02{width: 70%;}
    .payAgency_h03{font-size: 2.3em; line-height: 40px; margin-bottom: 40px;}
    .payAgency_con02{font-size: 1.25em; line-height: 1.35em;}

    /* === 지급대행 서비스 :: 서비스 프로세스 === */
    .sectionAp03{margin-bottom: 50px; padding-top: 30px; padding-bottom: 40px;}
    .payAgency_process{width: 100%; min-width: 290px; max-width: 550px; margin: 20px auto 0 auto;}

    /* === 지급대행 서비스 :: 서비스 장점 === */
    .uselist{gap: 20px; margin-bottom: 45px; flex-wrap: wrap; flex-direction: row;}
    .uselist>li{width: 48%; padding: 25px 25px;}
    .sr_step03{ margin-bottom: 30px; width: 65px; height: 65px;}
    .use_txt, .use_txt02{font-size: 1.2em; line-height: 26px;}
    .use_txt02{font-weight: bold; margin-bottom: 10px;}
    .payAgency_strength{font-size: 1.1em; line-height: 1.3em;}

    /* ==== 카드 CMS 서비스 ==== */ 
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_titleImg{margin: 40px auto 85px auto;}
    .cms_con02>br{display: block;}
    .swiper-slide br{display: none;}
    
    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 50%; margin: 0 auto;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu{justify-content: center;}
    .tab-menu button{padding: 15px 18px; font-size: 18px; line-height: 24px;}
    .right-swiper p{font-size: 1.3em; line-height: 1.4; width: 70%;}
    .swiper-pagination{margin-top: 40px;}

    /* ==== 판매자용 간편결제 ==== */
    .seller_titleImg{max-width: 400px !important;}
}

/* 테블릿 */
@media (min-width: 712px) and (max-width: 800px){
    .payAgency_titleImg{max-width: 420px;}
    .payAgency_txt03{font-size: 1.35em; margin-bottom: 15px; line-height: 30px;}
    .payAgency_title{font-size: 2.4em; line-height: 1.35em; margin-bottom: 40px;}

    /* ==== 지급대행 서비스 :: PC화면 ==== */
    .sr_imbg02{width: 60%;}
    .ap_scrbg{padding: 60px 0; margin: 60px 0 0 0;}
    .payAgency_h03{font-size: 2.3em; line-height: 40px; margin-bottom: 40px;}
    .payAgency_con02{font-size: 1.25em; line-height: 1.35em;}

    /* === 지급대행 서비스 :: 서비스 프로세스 === */
    .sectionAp03{margin-bottom: 50px; padding-top: 30px; padding-bottom: 40px;}
    .payAgency_process{width: 100%; min-width: 290px; max-width: 550px; margin: 20px auto 0 auto;}

    /* === 지급대행 서비스 :: 서비스 장점 === */
    .uselist{gap: 20px; margin-bottom: 45px; flex-wrap: wrap; flex-direction: row;}
    .uselist>li{width: 48%; padding: 25px 25px;}
    .sr_step03{ margin-bottom: 30px; width: 65px; height: 65px;}
    .use_txt, .use_txt02{font-size: 1.2em; line-height: 26px;}
    .use_txt02{font-weight: bold; margin-bottom: 10px;}
    .payAgency_strength{font-size: 1.1em; line-height: 1.3em;}

    /* ==== 카드 CMS 서비스 ==== */ 
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_titleImg{margin: 40px auto 85px auto;}
    .cms_con02>br{display: block;}
    .swiper-slide br{display: none;}
    
    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 40%; margin: 0 auto;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu{justify-content: center;}
    .tab-menu button{padding: 15px 18px; font-size: 18px; line-height: 24px;}
    .right-swiper p{font-size: 1.3em; line-height: 1.4; width: 70%;}
    .swiper-pagination{margin-top: 40px;}

    /* ==== 판매자용 간편결제 ==== */
    .seller_titleImg{max-width: 420px !important;}
}
@media (min-width: 801px) and (max-width: 1024px){
    .payAgency_titleImg{max-width: 450px;}
    .payAgency_txt03{font-size: 1.35em; margin-bottom: 15px; line-height: 30px;}
    .payAgency_title{font-size: 3em; line-height: 1.4em; margin-bottom: 50px;}

    /* ==== 지급대행 서비스 :: PC화면 ==== */
    .sr_imbg02{width: 60%;}
    .ap_scrbg{padding: 80px 0; margin: 70px 0 0 0;}
    .payAgency_h03{font-size: 2.5em; line-height: 40px; margin-bottom: 40px;}
    .payAgency_con02{font-size: 1.3em; line-height: 1.4em;}

    /* === 지급대행 서비스 :: 서비스 프로세스 === */
    .sectionAp03{margin-bottom: 50px; padding-top: 30px; padding-bottom: 40px;}
    .payAgency_process{width: 100%; min-width: 290px; max-width: 550px; margin: 20px auto 0 auto;}

    /* === 지급대행 서비스 :: 서비스 장점 === */
    .uselist{gap: 20px; margin-bottom: 45px; flex-wrap: wrap; flex-direction: row;}
    .uselist>li{width: 48%; padding: 25px 25px;}
    .sr_step03{margin-bottom: 30px; width: 65px; height: 65px;}
    .use_txt, .use_txt02{font-size: 1.2em; line-height: 26px;}
    .use_txt02{font-weight: bold; margin-bottom: 10px;}
    .payAgency_strength{font-size: 1.1em; line-height: 1.3em;}

    /* ==== 카드 CMS 서비스 ==== */ 
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_titleImg{margin: 40px auto 85px auto;}
    .cms_con02>br{display: block;}
    .swiper-slide br{display: none;}
    
    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 30%; margin: 0 auto;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu{justify-content: center;}
    .tab-menu button{padding: 15px 18px; font-size: 18px; line-height: 24px;}
    .right-swiper p{font-size: 1.3em; line-height: 1.4; width: 70%;}
    .swiper-pagination{margin-top: 40px;}

    /* ==== 판매자용 간편결제 ==== */
    .seller_titleImg{max-width: 420px !important;}
}

/* 데스크탑 일반 */
@media (min-width: 1025px){
    /* ==== 지급대행 서비스 ==== */
    .payAgency_titleImg{max-width: 450px;}
    .payAgency_txt03{font-size: 1.5em; margin-bottom: 15px; line-height: 35px;}
    .payAgency_title{font-size: 3em; line-height: 1.4em; margin-bottom: 50px;}

    /* ==== 지급대행 서비스 :: PC화면 ==== */
    .sr_imbg02{width: 45%;}
    .ap_scrbg{padding: 80px 0; margin: 70px 0 0 0;}
    .payAgency_h03{font-size: 2.8em; line-height: 40px; margin-bottom: 40px; text-align: left;}
    .payAgency_con02{font-size: 1.4em; line-height: 1.4em;}

    /* === 지급대행 서비스 :: 서비스 프로세스 === */
    .sectionAp03{margin-bottom: 50px; padding-top: 40px; padding-bottom: 60px;}
    .payAgency_process{width: 100%; min-width: 290px; max-width: 600px; margin: 30px auto 0 auto;}

    /* === 지급대행 서비스 :: 서비스 장점 === */
    .text-center{text-align: center; margin-bottom: 90px;}
    .uselist{gap: 20px; margin-bottom: 45px; flex-wrap: nowrap; flex-direction: row;}
    .uselist>li{width: 48%; padding: 20px;}
    .sr_step03{ margin-bottom: 30px; width: 60px; height: 60px;}
    .use_txt, .use_txt02{font-size: 1.25em; line-height: 26px;}
    .use_txt02{font-weight: bold; margin-bottom: 15px;}
    .payAgency_strength{font-size: 1.1em; line-height: 1.3em;}

    /* ==== 카드 CMS 서비스 ==== */
    /* ==== 카드 CMS 서비스 :: bg section ==== */
    .cms_titleImg{max-width: 650px; margin: 40px auto 90px auto;}
    .cms_con02>br, .swiper-slide br{display: block;}

    /* ==== 카드 CMS 서비스 :: 탭 슬라이드 ====*/
    .layout-wrapper{
        flex-direction: row; justify-content: center; gap: 40px;
        margin: 120px auto 70px auto; padding: 0;
    }
    /* 이미지 슬라이드(왼쪽) */
    .left-swiper{width: 32%;}
    .right-swiper{width: 50%;}

    /* 탭+텍스트 슬라이드(오른쪽) */
    .tab-menu{gap: 15px; margin-bottom: 40px;}
    .right-swiper .swiper-pagination{bottom: 430px !important; text-align: left;}
    .right-swiper .swiper-slide{text-align: left !important; align-items: flex-start;}
    .right-swiper h2{font-size: 2.8em; margin-bottom: 35px;}
    .right-swiper p{font-size: 1.4em; line-height: 1.4; text-align: start;}
    .swiper-pagination{margin-top: 20px; text-align: left;}
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
    {width: 15px; height: 15px;}

    /* ==== cms 서비스 장점 ==== */
    .cms_scrbg02{padding: 120px 0 !important; margin-bottom: 0 !important;}
    .suqBtn{margin: 100px auto 0 auto !important;}

    /* ==== 판매자용 간편결제 ==== */
    .seller_titleImg{max-width: 480px !important; margin: 40px auto 60px auto;}
}