@charset "utf-8";

.contract-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    color: #111;
    min-width:320px;
}

.contract-logo {
    width: 140px;
    height: 130px;
    margin-bottom: -8px; 
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

.contract-hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #0f172a, #020617);
    color: #fff;
    border-radius: 20px;
}

.contract-hero h1 {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.contract-hero p {
    margin-top: 16px;
    font-size: 18px;
    opacity: 0.85;
}

.contract-step {
    position:relative;
    display: none;
    margin-top: 80px;
    padding: 60px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.contract-step.active::after,
.contract-hero.active::after {
    content: var(--current-page, "1 / 6");
    position: absolute;
    top: 50px;
    right: 50px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}
.contract-wrap {
    position: relative; 
}

.contract-step.active {
    display: block;
}

.contract-step h2 {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: 700;
}

.contract-step p {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}

.party-box {
    margin-top: 30px;
    padding: 30px;
    border-radius: 16px;
    background: #f8fafc;
}

.party-box h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.party-box ul {
    padding-left: 18px;
}

.party-box li {
    margin-bottom: 6px;
    font-size: 16px;
}

.cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.cost-card {
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f1f5f9, #ffffff);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.cost-card span {
    font-size: 14px;
    color: #64748b;
}

.cost-card strong {
    display: block;
    margin-top: 8px;
    font-size: 22px;
    font-weight: 800;
}

.cost-card.total {
    background: linear-gradient(135deg, #020617, #0f172a);
    color: #fff;
}

.cost-card.total span {
    color: #cbd5f5;
}

.profit-box {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.profit {
    flex: 1;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}

.profit.head {
    background: #f1f5f9;
    color:#333
}

.profit.branch {
    background: #020617;
    color: #fff;
}

.profit strong {
    font-size: 48px;
    display: block;
    margin-top: 10px;
}

.next-btn,
.prev-btn {
    display: inline-block;
    margin-top: 50px;
    padding: 14px 36px;
    font-size: 16px;
    border-radius: 999px;
    border: none;
    background: #020617;
    color: #fff;
    cursor: pointer;
}

.next-btn:hover,
.prev-btn:hover {
    opacity: 0.9;
}

.signature {
    margin-top: 40px;
    font-size: 17px;
}

@media (max-width: 1024px) {
    .contract-wrap {
        padding: 50px 50px;
        padding-bottom:70px;
    }

    .contract-hero {
        padding: 60px 20px;
    }

    .contract-hero h1 {
        font-size: 34px;
    }

    .contract-step {
        padding: 40px;
        margin-top: 60px;
    }

    .contract-step h2 {
        font-size: 26px;
    }

    .contract-step p {
        font-size: 16px;
    }

    .profit strong {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .contract-wrap {
        padding: 30px 20px;
    }

    .contract-hero {
        padding: 48px 16px;
        border-radius: 16px;
    }

    .contract-hero h1 {
        font-size: 28px;
    }

    .contract-hero p {
        font-size: 15px;
    }

    .contract-step {
        padding: 28px 22px;
        margin-top: 40px;
        border-radius: 16px;
    }

    .contract-step h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .contract-step p {
        font-size: 15px;
        line-height: 1.7;
    }

    .party-box {
        padding: 20px;
    }

    .party-box h3 {
        font-size: 18px;
    }

    .party-box li {
        font-size: 15px;
    }

    .cost-card {
        padding: 22px;
    }

    .cost-card strong {
        font-size: 20px;
    }

    .profit-box {
        flex-direction: column;
        gap: 16px;
    }

    .profit {
        padding: 28px;
    }

    .profit strong {
        font-size: 36px;
    }

    /* 버튼 */
    .next-btn {
        width: 100%;
        padding: 14px 0;
        font-size: 15px;
        margin-top: 36px;
    }

    .signature {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .contract-hero h1 {
        font-size: 24px;
    }

    .contract-hero p {
        font-size: 14px;
    }

    .contract-step h2 {
        font-size: 20px;
    }

    .contract-step p {
        font-size: 14.5px;
    }

    .profit strong {
        font-size: 32px;
    }
}

.flag-marquee {
    margin-top: 18px;
    overflow: hidden;
    width: 100%;
}

.flag-track {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap; 
    overflow: hidden;        
    justify-content: center;
}

.flag-track img {
    width: clamp(34px, 6vw, 77px);
    height: auto;
    flex-shrink: 0;
    opacity: 0.9;
}

.contract-intro {
    margin-top: 60px;
    text-align: center;
}

.global-count h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.global-count p {
    font-size: 18px;
    color: #334155;
}

.global-count strong {
    font-size: 42px;
    font-weight: 800;
    margin-left: 8px;
    color: #020617;
}

.hot-branches {
    margin-top: 50px;
    text-align: left;
}

.hot-branches h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
}

.branch-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 18px;
    cursor: grab;
    scroll-behavior: smooth;
    user-select: none;          
    -webkit-user-select: none;  
    -ms-user-select: none;   
}

.branch-scroll::-webkit-scrollbar {
    display: none;
}
.branch-scroll {
    -ms-overflow-style: none;  
    scrollbar-width: none;   
}

.branch-card {
    min-width: 210px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    flex-shrink: 0;
    width:258px;
}

.branch-card img {
    width: 43%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.branch-card h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.branch-card ul {
    padding-left: 0;
    list-style: none;
    font-size: 14px;
    color: #475569;
}

.branch-card li {
    margin-bottom: 4px;
}

.partner-brands {
    margin-top: 40px;
}

.partner-brands h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 34px;
    text-align: center;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.partner-grid img {
    width: 100%;
    height: auto;
    opacity: 0.5;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.partner-grid img:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}


.signature-buttons button {
    flex: 1; /* 버튼 두 개가 같은 너비를 가지도록 */
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    border: 2px solid #163adb; /* 파란색 테두리 */
    border-radius: 6px;
    background-color: #fff;
    color: #163adb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.signature-buttons button:hover {
    background-color: #163adb;
    color: #fff;
}

#complete_signature {
    font-weight: 600;
    background-color: #0020a8;
    color: #fff;
    border: 2px solid #0020a8;
}

#complete_signature:hover {
    background-color: #001580;
    border-color: #001580;
}

html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}