/* === 광고 랜딩페이지 ===*/
#withpayup-wrapper{position: relative;}

/* 메인 section */
.sub_sub_main_logo{width: 100%; max-width: 85px; margin: 0 auto 10px auto;}
.sub_sub_main_logo img{width: 100%; height: auto;}
.main-section{text-align: center; color: #1c1c1c;}
.main-title{font-size: 1.7em; margin-bottom: 30px; line-height: 1.25em; word-break: keep-all;}
.maintitleImg{max-width: 100%; margin: 0 auto;}
.maintitleImg img{width: 100%; height: auto; display: block;}

/* section01 */
.bg-section{width: 100%; background: #f0f6ff; padding: 30px 0;}
.benefit-section{padding: 60px 15px;}
.benefit-inner{display: flex; flex-direction: column; gap: 24px; max-width: 100%; margin: 0 auto;}
.benefit-text{flex: 1 1 100%; max-width: 100%;}
.benefit-text .label,.review-heading .label,.title-wrap .label{color: #1064ff; font-weight: bold; font-size: 1.2em; margin-bottom: 8px;}
.benefit-text .title{font-size: 1.55em; font-weight: bold; line-height: 1.3; color: #1c1c1c; margin-top: 5px; word-break: break-all;}
.benefit-grid{width: 100%; display: flex; flex-direction: column; gap: 12px; flex: 1 1 100%; max-width: 100%;}
.benefit-card{display: flex; flex-direction: column; padding: 20px 16px; border-radius: 10px; background-color: #fff; box-shadow:0 4px 12px rgba(0,0,0,0.06); box-sizing: border-box;}
.card-content{display: flex; align-items: flex-start; align-items: center;}
.card-icon{flex-shrink: 0; margin-right: 20px;}
.card-icon img{width: 40px; height: 40px;}
.card-text{display: flex; flex-direction: column;}
.card-text h3{font-size: 1.2em; margin-bottom: 12px; color: #1064ff;}
.card-text p{font-size: 1em; line-height: 1.3; margin: 0; color: #1c1c1c; word-break: keep-all;}
.card-text p strong{color: #e51717; font-weight: 800;}
.card-text p strong.big-zero{font-size: 1.4em; vertical-align: baseline; line-height: 1.3;}

/* section02 */
.review-section{padding: 60px 15px; text-align: center;}
.review-heading{margin-bottom: 24px;}
.review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size: 1.6em; font-weight: bold; line-height: 1.25; word-break: keep-all; color: #1c1c1c;}
.review-list{display: flex; flex-direction: column; gap: 16px; justify-content: center;}
.review-item{display: flex; flex-direction: column; width: 100%; max-width: 100%; background: #ebf0f6; padding: 20px 16px; border-radius: 12px;}
.review-item .image-placeholder{width: 75px; height: 75px; margin: 0 auto 24px; border-radius: 50%;}
.review-item .image-placeholder img{width: 100%; height: auto;}
.review-item .category{font-weight: 600; font-size: 1.3em; margin-bottom: 15px; color: #1c1c1c; word-break: keep-all;}
.review-item .comment{font-size: 1em; line-height: 1.5; margin-bottom: 20px; word-break: keep-all;}
.review-item .company{font-size: 0.9em; margin-top: auto; color: #5a5a5a;}
.highlight{display: inline-block; color: #003ab8; font-weight: 700;}

/* section03 */
.why-payup{padding: 40px 15px; text-align: center; position: relative;}
.timeline-wrap{position: relative; max-width: 100%; margin: 40px auto 0 auto;}
.timeline{position: relative; padding: 0 15px;}
.timeline-line{position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #d3d8e6; transform: translateX(-50%); z-index: 0;}
.timeline-item{position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 12px;}
.timeline-dot{width: 10px; height: 10px; border-radius: 50%; background-color: #2c6ce2; position: relative; z-index: 1; margin-bottom: 12px;}
.timeline-content{width: 100%; background: #f4f5f8; border-radius: 10px; padding: 20px 16px; text-align: left; position: relative; z-index: 2;}
.timeline-content h3{font-size: 1.1em; font-weight: 700; margin-bottom: 12px;}
.timeline-content h3 span{font-weight: 900; color: #2c6ce2; display: inline-block;}
.timeline-content p{font-size: 1em; line-height: 1.4; color: #333;}
.timeline-content.left{order: 1; margin: 0; text-align: left;}
.timeline-content.right{order: 1; margin: 0; text-align: left;}

/* section04 */
.app-section{width: 100%; background-image: none; background-color: #f0f4fa; padding: 60px 15px; margin-bottom: 60px; box-sizing: border-box;}
.app-inner{max-width: 100%; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; box-sizing: border-box;}
.device-wrapper{max-width: 85%; width: 100%; flex-shrink: 0;}
.device-image{width: 100%; height: auto; display: block;}
.app-caption{font-size: 1.4em; line-height: 1.3; color: #1c1c1c; text-align: center;}
.app-caption strong{font-size: 1.1em; color: #1064ff; font-weight: 700;}

/* 탭 메뉴 상단 고정용 */
.withpayup-tab-wrap{min-width: 100%; max-width: 100%; width: 100%; margin: 0 auto;}
.withpayup-tab-inner{margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 15px;}
.withpayup-tab-inner a{background: #f3f3f3; color: #a19c9c; padding: 12px 16px; border-radius: 6px; font-size: 1.1em; text-decoration: none; transition: background 0.3s ease, color 0.3s ease;}
.withpayup-tab-inner a:hover{background: #e0e0e0; color: #333;}
.withpayup-tab-inner a.active{background: #1c1c1c; color: #fff; font-weight: 600;}
.is-fixed{position: fixed; top: 55px; left: 0; right: 0; background: white; z-index: 1000;}
.withpayup-tab-wrap.is-fixed{max-width: 100%; width: 100%; margin: 0 auto; box-sizing: border-box;}
.payment-section,.service-section{padding-top: 20px;}
#tabArea{opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform;}
#tabArea.is-hidden{opacity: 0; transform: translateY(-10px); pointer-events: none;}

/* section05 */
.payment-section,.service-section{min-width: 100%; max-width: 100%; width: 100%; margin: 0 auto;}
.section-inner{background: #f3f3f3; padding: 60px 15px 60px 15px;}
.section-title{text-align: center; margin-bottom: 24px;}
.payment-grid{display: flex; flex-direction: column; gap: 16px; justify-content: center;}
.payment-card{background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); padding: 20px; text-align: left; width: 100%; display: flex; flex-direction: column; justify-content: flex-start;}
.card-icon02{width: 100%; text-align: right; margin-bottom: 20px;}
.card-icon02 img{width: 50px; height: 50px; object-fit: contain; display: inline-block;}
.card-title{font-size: 1.2em;  font-weight: 700; margin-bottom: 3px; color: #1c1c1c;}
.card-desc{font-size: 1rem; line-height: 1.3; margin-top: 8px; color: #666; word-break: keep-all;}

/* section06 */
.service-section{padding: 0; text-align: center;}
.service-section .section-inner{padding-top: 20px;}
.service-grid{display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 100%; margin: 0 auto;}
.service-card{background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center;}
.service-card .card-desc br.br-m-none{display: none;}
.card-icon03{margin-bottom: 30px; width: 50px; height: 50px;}
.card-icon03 img{width: 100%; height: 100%; object-fit: contain; display: block;}
.card-content02{display: flex; flex-direction: column; align-items: center;}

/* section07 */
.bg-section02{width: 100%; padding: 30px 0;}
.award-section{padding: 40px 15px; text-align: center;}
.award-grid{display: flex; flex-direction: column; gap: 16px; min-width: 100%; max-width: 100%; margin: 0 auto;}
.award-card{flex: 1 1 100%; min-width: 100%; background: #f0f6ff; border-radius: 12px; padding: 24px 16px; box-shadow:0 4px 12px rgba(0,0,0,0.06); text-align: center; display: flex; flex-direction: column; justify-content: space-between;}
.award-card img{width: 100px; height: auto; max-height: 32px; display: block; margin: 0 auto 24px;}
.award-card:nth-child(3) img{width: 130px; padding-top: 5px;}
.award-card:nth-child(4) img{width: 150px;}
.award-title{font-size: 1.2em; font-weight: 700; color: #1c1c1c; margin-bottom: 8px;}
.host{color: #1064ff; font-weight: 600; font-size: 1em; margin-bottom: 12px;}
.date-name{font-size: 0.9em; color: #666;}

/* section08 */
.summary-section{text-align: center; padding: 60px 15px 140px 15px; background: #f0f6ff;}
.summary-title{color: #1064ff !important; word-break: keep-all; margin-bottom: 24px;}
.summary-table-wrap{overflow-x: auto;}
.summary-table{width: 100%; min-width: 290px; border-collapse: collapse; font-size: 0.95rem; border-top: 2px solid #1c1c1c; border-bottom: 2px solid #1c1c1c;}
.summary-table thead th{padding: 12px 8px; font-size: 0.95em; font-weight: 600; border-bottom: 1px solid #cdcdcd; background-color: #f9f9f9; word-break: keep-all;}
.summary-table tbody td{padding: 14px 8px; font-size: 0.9em; line-height: 1.3; border-bottom: 1px solid #ccc; vertical-align: middle; background-color: #fff; transition: background-color 0.2s ease; word-break: keep-all;}
.summary-table tbody tr:last-child td{border-bottom: none;}
.summary-table tbody tr:hover td{background-color: #f3f6f9;}
.summary-table td:first-child{font-weight: 500;}
.summary-table td:nth-child(2),.summary-table td:nth-child(3){text-align: center; line-height: 20px;}
.summary-table td:last-child{text-align: center;}
.summary-table tbody td strong{color: #e51717; font-weight: bold;}
.summary-table tbody td small{color: #8a8a8a !important;}

/* 스크롤 고정 CTA */
.payup-fixed-btn{width: 100%; padding: 0 15px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 999; text-align: center;}
.payup-fixed-btn.visible{opacity: 1; pointer-events: auto;}
.payup-fixed-btn.on{position: absolute !important; bottom: 65px}
.payup-fixed-btn button{width: 100%; background-color: #2c45e8; color: #fff; padding: 16px 24px; font-size: 1.1rem; font-weight: bold; border: none; border-radius: 12px; cursor: pointer;}


/* === 반응형 css ===*/
/* 모바일 */
@media (min-width: 375px) and (max-width: 414px){
    /* 메인 section */
    .sub_main_logo{max-width: 95px; margin: 0 auto 12px auto;}
    .main-title{font-size: 2em; margin-bottom: 35px;}
    .maintitleImg img{max-width: 95%;}

    /* section01 */
    .bg-section{padding: 40px 0;}
    .benefit-section{padding: 80px 20px;}
    .benefit-inner{gap: 28px;}
    .benefit-text .label{font-size: 1.3em; margin-bottom: 10px;}
    .benefit-text .title{font-size: 1.53em;}
    .benefit-grid{gap: 14px;}
    .benefit-card{padding: 24px 20px;}
    .card-icon{margin-right: 24px;}
    .card-icon img{width: 42px; height: 42px;}
    .card-text h3{font-size: 1.3em;}
    .card-text p{font-size: 1.05em;}
    .card-text p strong.big-zero{font-size: 1.4em; vertical-align: baseline; line-height: 1.3;}

    /* section02 */
    .review-section{padding: 60px 20px;}
    .review-heading{margin-bottom: 28px;}
    .benefit-text .label, .review-heading .label, .title-wrap .label{font-size: 1.3em; margin-bottom: 8px;}
    .review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size: 1.75em;}
    .review-list{gap: 20px;}
    .review-item{padding: 24px 18px; border-radius: 14px;}
    .review-item .image-placeholder{width: 80px; height: 80px; margin: 0 auto 26px;}
    .review-item .category{font-size: 1.4em; margin-bottom: 16px;}
    .review-item .comment{font-size: 1.05em;}

    /* section03 */
    .why-payup{padding: 60px 20px;}
    .timeline-wrap{margin: 50px auto 0 auto;}
    .timeline{padding: 0 15px;}
    .timeline-item{margin-bottom: 20px;}
    .timeline-content{padding: 24px 20px;}
    .timeline-content h3{font-size: 1.2em; margin-bottom: 14px;}
    .timeline-content p{font-size: 1em;}

    /* section04 */
    .app-section{padding: 60px 20px; margin-bottom: 60px;}
	.app-inner{gap: 40px;}
	.device-wrapper{max-width: 85%;}
	.app-caption{font-size: 1.5em;}
	.app-caption strong{font-size: 1.15em;}
    
    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-inner{gap: 10px; padding: 10px 15px;}
    .withpayup-tab-inner a{padding: 14px 18px; font-size: 1.2em;}
    .is-fixed{top: 55px;}

    /* section05 */
    .section-inner{padding: 60px 15px 60px 15px;}
    .section-title{margin-bottom: 28px;}
    .payment-grid{gap: 20px;}
    .payment-card{padding: 24px;}
    .card-icon02{margin-bottom: 30px;}
    .card-icon02 img{width: 52px; height: 52px;}
    .card-title{font-size: 1.3em;}
    .card-desc{font-size: 1.05em;}

    /* section06 */
    .service-section .section-inner{padding-top: 28px;}
    .service-grid{gap: 20px;}
    .service-card{padding: 24px;}
    .card-icon03{margin-bottom: 30px; width: 52px; height: 52px;}

    /* section07 */
    .bg-section02{padding: 40px 0;}
	.award-section{padding: 60px 15px;}
	.award-grid{gap: 20px;}
	.award-card{padding: 28px 20px; border-radius: 14px;}
	.award-card img{width: 100px; max-height: 36px; margin: 0 auto 25px;}
	.award-card:nth-child(3) img{width: 140px;}
	.award-card:nth-child(4) img{width: 160px;}
	.award-title{font-size: 1.3em; margin-bottom: 8px;}
	.host{font-size: 1.05em; margin-bottom: 15px;}
	.date-name{font-size: 0.9em;}
    
    /* section08 */
    .summary-section{padding: 60px 15px 160px 15px;}
    .summary-title{margin-bottom: 28px;}
    .summary-table thead th{padding: 15px 10px; font-size: 1em;}
    .summary-table tbody td{padding: 15px 10px; font-size: 0.95em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom: 20px;}
    .payup-fixed-btn.on{bottom: 70px;}
    .payup-fixed-btn button{padding: 18px 26px; font-size: 1.2rem; border-radius: 10px;}
}
@media (min-width: 415px) and (max-width: 515px){
    /* 메인 section */
    .sub_main_logo{max-width: 100px; margin: 0 auto 12px auto;}
	.main-title{font-size: 2.3em; margin-bottom: 60px;}
	.maintitleImg img{max-width: 100%;}
    
    /* section01 */
    .bg-section{padding: 50px 0;}
    .benefit-section{padding: 65px 15px;}
    .benefit-inner{gap: 32px;}
    .benefit-text .label{font-size: 1.3em; margin-bottom: 10px;}
    .benefit-text .title{font-size: 1.7em;}
    .benefit-grid{gap: 16px;}
    .benefit-card{padding: 26px 24px;}
    .card-icon{margin-right: 26px;}
    .card-icon img{width: 44px; height: 44px;}
    .card-text h3{font-size: 1.3em; margin-bottom: 10px;}
    .card-text p{font-size: 1.05em; line-height: 1.35;}
    .card-text p strong.big-zero{font-size: 1.4em; vertical-align: baseline; line-height: 1.3;}

    /* section02 */
    .review-section{padding: 65px 15px;}
    .review-heading{margin-bottom: 32px;}
    .benefit-text .label, .review-heading .label, .title-wrap .label{font-size: 1.3em; margin-bottom: 8px;}
    .review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size: 1.9em;}
    .review-list{gap: 24px;}
    .review-item{padding: 28px 22px; border-radius: 16px;}
    .review-item .image-placeholder{width: 85px; height: 85px; margin: 0 auto 30px;}
    .review-item .category{font-size: 1.3em; margin-bottom: 15px;}
    .review-item .comment{font-size: 1.05em; line-height: 1.35;}

    /* section03 */
    .why-payup{padding: 65px 15px;}
    .timeline-wrap{margin: 40px auto 0 auto;}
    .timeline-item{margin-bottom: 20px;}
    .timeline-content{padding: 28px 24px;}
    .timeline-content h3{font-size: 1.3em; margin-bottom: 15px;}
    .timeline-content p{font-size: 1.05em;}

    /* section04 */
    .app-section{padding: 60px 15px; margin-bottom: 65px;}
    .app-inner{gap: 48px;}
    .device-wrapper{max-width: 80%;}
    .app-caption{font-size: 1.6em;}
    .app-caption strong{font-size: 1.2em;}

    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-inner{gap: 12px; padding: 10px 15px;}
    .withpayup-tab-inner a{padding: 16px 20px; font-size: 1.25em;}
    .is-fixed{top: 55px;}

    /* section05 */
    .section-inner{padding: 65px 20px 65px 20px;}
    .section-title{margin-bottom: 32px;}
    .payment-grid{gap: 24px;}
    .payment-card{padding: 28px;}
    .card-icon02{margin-bottom: 34px;}
    .card-icon02 img{width: 56px; height: 56px;}
    .card-title{font-size: 1.35em; margin-bottom: 5px;}
    .card-desc{font-size: 1.1em;}

    /* section06 */
    .service-grid{gap: 24px;}
    .service-card{padding: 28px;}
    .card-icon03{margin-bottom: 34px; width: 56px; height: 56px;}

    /* section07 */
    .bg-section02{padding: 50px 0;}
    .award-section{padding: 65px 15px;}
    .award-grid{gap: 24px;}
    .award-card{padding: 32px 24px;}
    .award-card img{width: 105px; max-height: 40px; margin: 0 auto 28px;}
    .award-card:nth-child(3) img{width: 150px;}
    .award-card:nth-child(4) img{width: 170px;}
    .award-title{font-size: 1.35em; margin-bottom: 10px;}
    .host{font-size: 1.15em; margin-bottom: 20px;}
    .date-name{font-size: 0.95em;}

    /* section08 */
    .summary-section{padding: 65px 15px 175px 15px;}
    .summary-title{margin-bottom: 32px;}
    .summary-table thead th{padding: 15px 12px; font-size: 1.05em;}
    .summary-table tbody td{padding: 15px 12px; font-size: 1em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom: 24px;}
    .payup-fixed-btn.on{bottom: 75px;}
    .payup-fixed-btn button{padding: 20px 28px; font-size: 1.25rem; border-radius: 12px;}
}
@media (min-width: 516px) and (max-width: 616px){
    /* 메인 section */
    .sub_main_logo{max-width: 110px; margin: 0 auto 10px auto;}
    .main-title{font-size: 2.8em; margin-bottom: 80px;}
    .maintitleImg img{max-width: 100%;}

    /* section01 */
    .bg-section{padding: 60px 0;}
    .benefit-section{padding: 70px 15px;}
    .benefit-inner{gap: 32px;}
    .benefit-text .label{font-size: 1.4em; margin-bottom: 8px;}
    .benefit-text .title{font-size: 2em; line-height: 1.2;}
    .benefit-grid{gap: 18px;}
    .benefit-card{padding: 30px 26px;}
    .card-icon{margin-right: 28px;}
    .card-icon img{width: 48px; height: 48px;}
    .card-text h3{font-size: 1.38em; margin-bottom: 10px;}
    .card-text p{font-size: 1.1em;}
    .card-text p strong.big-zero{font-size: 1.4em; vertical-align: baseline; line-height: 0;}
    .card-text br{display: none;}

    /* section02 */
    .review-section{padding: 70px 15px;}
    .review-heading{margin-bottom: 32px;}
    .benefit-text .label,.review-heading .label,.title-wrap .label{font-size: 1.4em; margin-bottom: 8px;}
    .review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size: 2.4em;}
    .review-list{gap: 28px;}
    .review-item{padding: 32px 26px; border-radius: 18px;}
    .review-item .image-placeholder{width: 90px; height: 90px; margin: 0 auto 40px;}
    .review-item .category{font-size: 1.4em; margin-bottom: 16px;}
    .review-item .comment{font-size: 1.1em; line-height: 1.4; margin-bottom: 25px;}
    .review-item .company{font-size: 0.95em;}

    /* section03 */
    .why-payup{padding: 70px 15px;}
    .timeline-wrap{margin: 38px auto 0 auto;}
    .timeline-item{margin-bottom: 20px;}
    .timeline-content{padding: 32px 28px;}
    .timeline-content h3{font-size: 1.4em; margin-bottom: 16px;}
    .timeline-content p{font-size: 1.1em;}

    /* section04 */
    .app-section{padding: 70px 15px; margin-bottom: 70px;}
    .app-inner{gap: 60px;}
    .device-wrapper{max-width: 70%;}
    .app-caption{font-size: 2em;}
    .app-caption strong{font-size: 1.25em;}

    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-inner{gap: 14px; padding: 10px 15px;}
    .withpayup-tab-inner a{padding: 18px 22px; font-size: 1.3em;}
    .is-fixed{top: 55px;}

    /* section05 */
    .section-inner{padding: 70px 15px 70px 15px;}
    .section-title{margin-bottom: 32px;}
    .payment-grid{gap: 28px;}
    .payment-card{padding: 32px;}
    .card-icon02{margin-bottom: 25px;}
    .card-icon02 img{width: 60px; height: 60px;}
    .card-title{font-size: 1.4em; margin-bottom: 6px;}
    .card-desc{font-size: 1.1em;}

    /* section06 */
    .service-grid{gap: 28px;}
    .service-card{padding: 32px;}
    .card-icon03{margin-bottom: 38px; width: 60px; height: 60px;}

    /* section07 */
    .bg-section02{padding: 55px 0;}
    .award-section{padding: 70px 15px;}
    .award-grid{gap: 28px;}
    .award-card{padding: 36px 28px;}
    .award-card img{width: 110px; max-height: 42px; margin: 0 auto 30px;}
    .award-card:nth-child(3) img{width: 155px;}
    .award-card:nth-child(4) img{width: 175px;}
    .award-title{font-size: 1.4em; margin-bottom: 12px;}
    .host{font-size: 1.2em; margin-bottom: 22px;}
    .date-name{font-size: 1em;}

    /* section08 */
    .summary-section{padding: 70px 15px 180px 15px;}
    .summary-title{margin-bottom: 36px;}
    .summary-table thead th{padding: 16px 14px; font-size: 1.1em;}
    .summary-table tbody td{padding: 16px 14px; font-size: 1.05em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom: 28px;}
    .payup-fixed-btn.on{bottom: 80px;}
    .payup-fixed-btn button{padding: 22px 30px; font-size: 1.3rem; border-radius: 14px;}
}
@media (min-width: 617px) and (max-width: 711px){
    /* 메인 section */
    .sub_main_logo{max-width: 110px; margin: 0 auto 10px auto;}
    .main-title{font-size: 2.8em; margin-bottom: 100px;}
    .maintitleImg img{max-width: 100%;}

    /* section01 */
    .bg-section{padding: 60px 0;}
    .benefit-section{padding: 70px 15px;}
    .benefit-inner{gap: 32px;}
    .benefit-text .label{font-size: 1.4em; margin-bottom: 8px;}
    .benefit-text .title{font-size: 2em; line-height: 1.2;}
    .benefit-grid{gap: 18px;}
    .benefit-card{padding: 30px 26px;}
    .card-icon{margin-right: 28px;}
    .card-icon img{width: 48px; height: 48px;}
    .card-text h3{font-size: 1.38em; margin-bottom: 10px;}
    .card-text p{font-size: 1.1em;}
    .card-text p strong.big-zero{font-size: 1.4em; vertical-align: baseline; line-height: 0;}
    .card-text br{display: none;}

    /* section02 */
    .review-section{padding:70px 15px;}
    .review-heading{margin-bottom:32px;}
    .benefit-text .label,.review-heading .label,.title-wrap .label{font-size:1.4em; margin-bottom:8px;}
    .review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size:2.4em;}
    .review-list{gap:28px;}
    .review-item{padding:32px 26px; border-radius:18px;}
    .review-item .image-placeholder{width:90px; height:90px; margin:0 auto 40px;}
    .review-item .category{font-size:1.4em; margin-bottom:16px;}
    .review-item .comment{font-size:1.1em; line-height:1.4; margin-bottom:25px;}
    .review-item .company{font-size:0.95em;}

    /* section03 */
    .why-payup{padding:70px 15px;}
    .timeline-wrap{margin:38px auto 0 auto;}
    .timeline{padding: 0 80px;}
    .timeline-item{margin-bottom:20px;}
    .timeline-content{padding:32px 28px;}
    .timeline-content h3{font-size:1.4em; margin-bottom:16px;}
    .timeline-content p{font-size:1.1em;}

    /* section04 */
    .app-section{padding:70px 15px; margin-bottom:70px;}
	.app-inner{gap:60px;}
	.device-wrapper{max-width:70%;}
	.app-caption{font-size:2em;}
	.app-caption strong{font-size:1.25em;}

    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-inner{gap:14px; padding:10px 15px;}
    .withpayup-tab-inner a{padding:18px 22px; font-size:1.3em;}
    .is-fixed{top:55px;}

    /* section05 */
    .section-inner{padding:70px 15px 70px 15px;}
    .section-title{margin-bottom:32px;}
    .payment-grid{gap:28px;}
    .payment-card{padding:32px;}
    .card-icon02{margin-bottom:25px;}
    .card-icon02 img{width:60px; height:60px;}
    .card-title{font-size:1.4em; margin-bottom:6px;}
    .card-desc{font-size:1.1em;}

    /* section06 */
    .service-grid{gap:28px;}
    .service-card{padding:32px;}
    .card-icon03{margin-bottom:38px; width:60px; height:60px;}

    /* section07 */
    .bg-section02{padding:55px 0;}
    .award-section{padding:70px 15px;}
    .award-grid{gap:28px;}
    .award-card{padding:36px 28px;}
    .award-card img{width:110px; max-height:42px; margin:0 auto 30px;}
    .award-card:nth-child(3) img{width:155px;}
    .award-card:nth-child(4) img{width:175px;}
    .award-title{font-size:1.4em; margin-bottom:12px;}
    .host{font-size:1.2em; margin-bottom:22px;}
    .date-name{font-size:1em;}

    /* section08 */
    .summary-section{padding:70px 15px 180px 15px;}
    .summary-title{margin-bottom:36px;}
    .summary-table thead th{padding:16px 14px; font-size:1.1em;}
    .summary-table tbody td{padding:16px 14px; font-size:1.05em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom:28px;}
    .payup-fixed-btn.on{bottom:80px;}
    .payup-fixed-btn button{padding:22px 30px; font-size:1.3rem; border-radius:14px;}
}

/* 테블릿 */
@media (min-width: 712px) and (max-width: 800px){
    /* 메인 section */
    .sub_main_logo{max-width:110px; margin:0 auto 10px auto;}
    .main-title{font-size:3em; margin-bottom:120px;  line-height:1.3;}
    .maintitleImg img{max-width:100%;}

    /* section01 */
    .bg-section{padding:60px 0;}
    .benefit-section{padding:70px 15px;}
    .benefit-inner{gap:36px;}
    .benefit-text .label{font-size:1.4em; margin-bottom:8px;}
    .benefit-text .title{font-size:2em; line-height:1.2;}
    .benefit-grid{gap:18px;}
    .benefit-card{padding:30px 26px;}
    .card-icon{margin-right:28px;}
    .card-icon img{width:48px; height:48px;}
    .card-text h3{font-size:1.38em; margin-bottom:10px;}
    .card-text p{font-size:1.1em;}
    .card-text p strong.big-zero{font-size: 1.5em; vertical-align: baseline; line-height: 0;}
    .card-text br{display:none;}

    /* section02 */
    .review-section{padding:70px 15px;}
    .review-heading{margin-bottom:36px;}
    .benefit-text .label,.review-heading .label,.title-wrap .label{font-size:1.4em; margin-bottom:8px;}
    .review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size:2.4em; margin-bottom: 36px;}
    .review-list{gap:28px;}
    .review-item{padding:32px 26px; border-radius:18px;}
    .review-item .image-placeholder{width:90px; height:90px; margin:0 auto 40px;}
    .review-item .category{font-size:1.4em; margin-bottom:16px;}
    .review-item .comment{font-size:1.1em; line-height:1.4; margin-bottom:25px;}
    .review-item .company{font-size:0.95em;}

    /* section03 */
    .why-payup{padding:70px 15px;}
    .timeline-wrap{margin:45px auto 0 auto;}
    .timeline{padding: 0 180px;}
    .timeline-item{margin-bottom:25px;}
    .timeline-content{padding:32px 28px;}
    .timeline-content h3{font-size:1.4em; margin-bottom:16px;}
    .timeline-content p{font-size:1.1em;}

    /* section04 */
    .app-section{padding:70px 15px; margin-bottom:80px;}
    .app-inner{gap:65px;}
    .device-wrapper{max-width:55%;}
    .app-caption{font-size:2.1em;}
    .app-caption strong{font-size:1.3em;}

    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-inner{gap:16px; padding:10px 18px;}
    .withpayup-tab-inner a{padding:20px 24px; font-size:1.35em;}

    /* section05 */
    .section-inner{padding:70px 15px 70px 15px;}
    .payment-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
    .payment-grid > *:last-child:nth-child(odd){grid-column:span 2;}
    .payment-card{padding:25px;}
    .card-icon02{margin-bottom:25px;}
    .card-icon02 img{width:64px; height:64px;}
    .card-title{font-size:1.45em; margin-bottom: 8px;}
    .card-desc{font-size:1.15em; line-height: 1.35;}

    /* section06 */
    .service-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
    .service-card{padding:25px;}
    .card-icon03{margin-bottom:30px; width:64px; height:64px;}

    /* section07 */
    .award-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
    .award-section{padding:70px 15px;}
    .award-card{padding:30px 25px;}
    .award-card img{width:110px; max-height:42px; margin:0 auto 30px;}
    .award-card:nth-child(3) img{width:155px;}
    .award-card:nth-child(4) img{width:175px;}
    .award-title{font-size:1.4em; margin-bottom:12px;}
    .host{font-size:1.2em; margin-bottom:22px;}
    .date-name{font-size:1em;}

    /* section08 */
    .summary-section{padding:70px 15px 180px 15px;}
    .summary-title{margin-bottom:36px;}
    .summary-table thead th{padding:18px 14px; font-size:1.2em;}
    .summary-table tbody td{padding:18px 14px; font-size:1.1em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom:28px;}
    .payup-fixed-btn.on{bottom:80px;}
    .payup-fixed-btn button{padding:22px 30px; font-size:1.3rem;}
}
@media (min-width: 801px) and (max-width: 1024px){
    /* 메인 section */
    .sub_main_logo{max-width:115px; margin:0 auto 12px auto;}
    .main-title{font-size:3em; margin-bottom:120px; line-height:1.3;}
    .maintitleImg{max-width: 800px; margin: 0 auto;}

    /* section01 */
    .bg-section{padding:60px 0;}
    .benefit-section{padding:70px 15px;}
    .benefit-inner{gap:36px;}
    .benefit-text .label{font-size:1.4em; margin-bottom:8px;}
    .benefit-text .title{font-size:2em; line-height:1.2;}
    .benefit-grid{gap:18px;}
    .benefit-card{padding:30px 26px;}
    .card-icon{margin-right:28px;}
    .card-icon img{width:48px; height:48px;}
    .card-text h3{font-size:1.38em; margin-bottom:10px;}
    .card-text p{font-size:1.1em;}
    .card-text p strong.big-zero{font-size: 1.5em; vertical-align: baseline; line-height: 0;}
    .card-text br{display:none;}

    /* section02 */
    .review-section{padding:70px 15px;}
    .review-heading{margin-bottom:36px;}
    .benefit-text .label,.review-heading .label,.title-wrap .label{font-size:1.4em; margin-bottom:8px;}
    .review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size:2.4em; margin-bottom:36px;}
    .review-list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
    .review-list > *:last-child:nth-child(odd){grid-column:span 2;}
    .review-item{padding:30px 26px;}
    .review-item .image-placeholder{width:90px; height:90px; margin:0 auto 40px;}
    .review-item .category{font-size:1.4em; margin-bottom:16px;}
    .review-item .comment{font-size:1.1em; line-height:1.4; margin-bottom:25px;}
    .review-item .company{font-size:0.95em;}

    /* section03 */
   	.why-payup{padding:70px 15px;}
    .timeline-wrap{max-width:900px; margin:60px auto 0 auto;}
    .timeline{padding:0;}
    .timeline-item{flex-direction:row; margin:0; align-items:center;}
    .timeline-dot{width:12px; height:12px; opacity:0.3; left:50%; transform:translateX(-50%); transition: background-color 0.4s ease; transition: opacity 0.8s ease, transform 0.6s ease;}
    .timeline-dot.active{background-color:#2c6ce2; opacity:1;}
    .timeline-content{width:43%; padding:25px 25px; text-align:left;}
    .timeline-content.left{text-align:right; margin-right:auto;}
    .timeline-content.right{text-align:left; margin-left:auto;}

    /* section04 */
    .app-section{
        width: 100%; margin: 80px 0;
        background-image: url('../img/gray-line-patterns.svg'),
        linear-gradient(to right, #f9f9f9 0%, #eef1f5 30%, #e4ecf7 70%, #d4e4fb 100%);
        background-repeat: no-repeat, no-repeat; background-size: cover, 100% 100%; 
        background-position: center center; padding: 0; box-sizing: border-box;
    }
    .app-inner{
        max-width: 1300px; width: 100%; padding: 70px 15px;
        flex-direction: row; justify-content: space-between; gap:60px;
    }
    .device-wrapper{max-width:35%;}
    .app-caption{font-size:1.8em;}
    .app-caption strong{font-size:1.3em;}

    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-inner{gap:16px; padding:10px 18px;}
    .withpayup-tab-inner a{padding:20px 24px; font-size:1.35em;}

    /* section05 */
    .section-inner{padding:70px 15px 70px 15px;}
    .payment-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
    .payment-grid > *:last-child:nth-child(odd){grid-column:span 2;}
    .payment-card{padding:25px;}
    .card-icon02{margin-bottom:25px;}
    .card-icon02 img{width:64px; height:64px;}
    .card-title{font-size:1.45em; margin-bottom:8px;}
    .card-desc{font-size:1.15em; line-height:1.35;}

    /* section06 */
    .service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
    .service-card{padding:25px;}
    .card-icon03{margin-bottom:30px; width:64px; height:64px;}

    /* section07 */
    .award-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
    .award-section{padding:70px 15px;}
    .award-card{padding:30px 25px;}
    .award-card img{width:110px; max-height:42px; margin:0 auto 30px;}
    .award-card:nth-child(3) img{width:155px;}
    .award-card:nth-child(4) img{width:175px;}
    .award-title{font-size:1.4em; margin-bottom:12px;}
    .host{font-size:1.2em; margin-bottom:22px;}
    .date-name{font-size:1em;}

    /* section08 */
    .summary-section{padding:70px 15px 180px 15px;}
    .summary-title{margin-bottom:36px;}
    .summary-table thead th{padding:18px 14px; font-size:1.2em;}
    .summary-table tbody td{padding:18px 14px; font-size:1.1em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom:28px;}
    .payup-fixed-btn.on{bottom:80px;}
    .payup-fixed-btn button{padding:22px 30px; font-size:1.3rem;}
}

/* 데스크탑 일반 */
@media (min-width: 1025px){
    /* 메인 section */
    .sub_main_logo{max-width:120px; margin:0 auto 12px auto;}
    .main-title{font-size:3em; margin-bottom:120px; line-height:1.25;}
    .maintitleImg{max-width:800px; margin:0 auto;}

    /* section01 */
    .bg-section{width: 100%; background: #f0f6ff; padding: 40px 0; margin-bottom: 50px;}
    .benefit-section{padding: 120px 15px;}
    .benefit-inner{flex-direction:row; justify-content: space-between; gap:32px; max-width: 1300px; margin: 0 auto;}
    .benefit-text{flex: 1 1 50%; max-width: 50%;}
    .benefit-text .label, .review-heading .label, .title-wrap .label
    {color: #1064ff; font-weight: bold; font-size: 1.6em; margin-bottom: 10px;}
    .benefit-text .title{font-size: 2.6em; line-height: 1.2;}
    .benefit-grid{width: 100%; display: flex; flex-direction: column; gap: 15px; flex: 1 1 48%; max-width: 40%;}
    .benefit-card{padding:30px 26px;}
    .card-icon{margin-right:25px;}
    .card-icon img{width: 42px; height: 42px;}
    .card-text h3{font-size: 1.5em; margin-bottom: 18px; color: #1064ff;}
    .card-text p{font-size: 1.2em; margin: 0; color: #1c1c1c;}
    .card-text p strong{color: #e51717; font-weight: 800;}
    .card-text p strong.big-zero{font-size: 1.6em; vertical-align: baseline; line-height: 0;}
    .card-text br{display:none;}

    /* section02 */
    .review-section{padding:120px 15px; text-align:center;}
	.review-heading{margin-bottom:32px;}
	.review-heading .title,.title-wrap .title,.section-title,.summary-title{font-size:2.8em; margin-bottom:60px;}
	.review-list{display:flex; flex-direction: row; gap:20px; justify-content:center;}
	.review-item{padding:30px 20px; max-width:350px;}
	.review-item .image-placeholder{width:100px; height:100px; margin:0 auto 35px;}
	.review-item .category{font-size:1.3em; margin-bottom:15px;}
	.review-item .comment{font-size:1.1em; line-height:1.45; margin-bottom:30px;}
	.review-item .company{font-size:1em;}

    /* section03 */
    .why-payup{padding:120px 15px;}
    .timeline-wrap{max-width:900px; margin:60px auto 0 auto;}
    .timeline{position: relative; padding: 0 30px;}
    .timeline-item{flex-direction:row; margin:0; align-items:center;}
    .timeline-dot{width:12px; height:12px; opacity:0.3; left:50%; transform:translateX(-50%); transition:background-color 0.4s ease, opacity 0.8s ease, transform 0.6s ease;}
    .timeline-dot.active{opacity:1;}
    .timeline-content{width:40%; padding:25px 30px; text-align:left;}
    .timeline-content h3{font-size: 1.3em; font-weight: 700; margin-bottom: 15px;}
    .timeline-content h3 span{font-weight: 900; color: #2c6ce2; display: inline-block;}
    .timeline-content p{font-size: 1em; line-height: 1.3; color: #333;}
    .timeline-content.left{text-align:right; margin-right:auto;}
    .timeline-content.right{text-align:left; margin-left:auto;}

    /* section04 */
    .app-section{
        width: 100%; margin: 120px 0;
        background-image: url('../img/gray-line-patterns.svg'),
        linear-gradient(to right, #f9f9f9 0%, #eef1f5 30%, #e4ecf7 70%, #d4e4fb 100%);
        background-repeat: no-repeat, no-repeat; background-size: cover, 100% 100%; 
        background-position: center center; padding: 0; box-sizing: border-box;
    }
    .app-inner{max-width:1300px; padding:70px 15px; flex-direction:row; justify-content:space-between; gap:20px;}
    .device-wrapper{max-width:400px;}
    .app-caption{font-size: 3em; line-height: 1.3;}
    .app-caption strong{font-size: 1.2em; font-weight: 700;}

    /* 탭 메뉴 상단 고정용 */
    .withpayup-tab-wrap{min-width: 280px; max-width: 1200px; width: 100%; margin: 0 auto;}
    .withpayup-tab-inner{gap:16px; padding:10px 18px; margin-top: 10px; min-width: 280px; max-width: 1200px;}
    .withpayup-tab-inner a{padding:20px 24px; font-size:1.35em;}

    /* section05 */
    .payment-section, .service-section{min-width: 280px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px 15px;}
    .section-inner{padding:25px !important; border-radius: 15px;}
    .section-title{margin-bottom: 40px;}
	.payment-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
	.payment-grid>.payment-card:nth-child(-n+3){grid-column:span 2;}
	.payment-grid>.payment-card:nth-child(4){grid-column:span 3;}
	.payment-grid>.payment-card:nth-child(5){grid-column:span 3;}
    .payment-card{padding:20px; min-width: 280px;}
	.card-icon02{margin-bottom:25px;}
	.card-icon02 img{width:60px; height:60px; object-fit: contain; display: inline-block;}
	.card-title{font-size: 1.3em; margin-bottom:8px;}
	.card-desc{font-size: 1em; line-height: 1.5; line-height:1.3;}

    /* section06 */
    .service-section{margin-top: 80px !important;}
    .service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
    .service-card{padding:30px;}
    .service-card .card-desc br{display: none;}
    .service-card .card-desc br.br-m-none{display: block;}
    .card-icon03{margin-bottom:30px; width:64px; height:64px;}

    /* section07 */
    .bg-section02{width: 100%; background: #f0f6ff; padding: 40px 0;}
    .award-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; min-width: 280px; max-width: 1300px; margin: 0 auto; padding: 0 15px;}
    .award-section{padding:120px 15px; margin: 120px 0;}
    .award-card{padding:30px 20px; background: #fff;}
    .award-card img{width:110px; max-height:44px; margin:0 auto 32px;}
    .award-card:nth-child(3) img{width:145px; padding-top: 5px;}
    .award-card:nth-child(4) img{width:180px;}
    .award-title{font-size: 1.4em; font-weight: 700; margin-bottom: 10px; word-break: keep-all;}
    .host{font-size: 1.15em; line-height: 1.3; margin-bottom: 15px;}
    .date-name{font-size:0.95em;}

    /* section08 */
    .summary-section{padding:20px 0 200px 0; background: none !important;}
    .summary-title{margin-bottom:48px;}
    .summary-table{width: 100%; max-width: 950px; margin: 0 auto;}
    .summary-table thead th{padding:20px 16px;font-size:1.3em;}
    .summary-table tbody td{padding:20px 16px;font-size:1.2em;}

    /* 스크롤 고정 CTA */
    .payup-fixed-btn{bottom:40px;}
    .payup-fixed-btn.on{bottom:90px;}
    .payup-fixed-btn button{width: 330px; padding:20px 35px; font-size:1.4rem;}
}