@charset "utf-8";

:root {
    
    /* ===========================
        MAIN COLOR
    =========================== */
    --static-1: #2F6BFF;
    --static-1-hover: #285EDB;
    --static-2: #765DE8;
    --static-2-hover: #6546CC;
    --static-3: #32C79A;
    --static-3-hover: #27A987;
    --static-4: #A98BFA;

    /* ===========================
        MAIN BG
    =========================== */
    --bg-1: #F7F9FF;
    --bg-2: #EEF3FF;
    --bg-3: #F4F0FF;
    --bg-4: #EAFBF6;
    
    /* ===========================
        BACKGROUND
    =========================== */
    --bg-body:#F7F9FB;
    --bg-body-rgb:247,249,251;

    /* ===========================
        TEXT
    =========================== */
    --text-1: #171B24;
    --text-2: #3F4756;
    --text-3: #7B8494;
    --text-4: #A5ADBA;

    --color-white: #FFFFFF;
    --color-white-rgb: 255,255,255;
    --color-black: #000000;
    --color-black-rgb: 0,0,0;

    /* ===========================
        BORDER
    =========================== */
    --border-1: #F1F3F7;
    --border-2: #E7EAF0;
    --border-3: #D6DBE4;
    --border-4: #B9C1CE;

    /* ===========================
        SPACE
    =========================== */
    --space-180:clamp(100px,12.5vw,180px);
    --space-140:clamp(90px,9.72vw,140px);
    --space-120:clamp(80px,8.33vw,120px);
    --space-100:clamp(70px,6.94vw,100px);
    --space-80:clamp(60px,5.56vw,80px);
    --space-60:clamp(40px,4.17vw,60px);
    --space-40:clamp(30px,2.78vw,40px);
    --space-30:clamp(24px,2.08vw,30px);
    --space-24:clamp(20px,1.67vw,24px);
    --space-20:clamp(18px,1.39vw,20px);
    --space-16:clamp(15px,1.11vw,16px);
    --space-12:clamp(10px,.83vw,12px);
    --space-10:clamp(8px,.69vw,10px);
    --space-8:clamp(6px,.56vw,8px);

    /* font size */
    --fs-96:clamp(56px,6.67vw,96px);
    --fs-72:clamp(42px,5vw,72px);
    --fs-64:clamp(40px,4.44vw,64px);
    --fs-60:clamp(36px,4.17vw,60px);
    --fs-56:clamp(34px,3.89vw,56px);
    --fs-50:clamp(34px,3.47vw,50px);
    --fs-48:clamp(32px,3.33vw,48px);
    --fs-42:clamp(30px,2.92vw,42px);
    --fs-40:clamp(28px,2.78vw,40px);
    --fs-36:clamp(28px,2.5vw,36px);
    --fs-32:clamp(24px,2.22vw,32px);
    --fs-28:clamp(22px,1.94vw,28px);
    --fs-24:clamp(20px,1.67vw,24px);
    --fs-20:clamp(18px,1.39vw,20px);
    --fs-18:clamp(16px,1.25vw,18px);
    --fs-17:clamp(16px,1.18vw,17px);
    --fs-16:clamp(15px,1.11vw,16px);
    --fs-15:clamp(13px,1.04vw,15px);
    --fs-14:clamp(12px,0.97vw,14px);
    --fs-13:clamp(11px,0.9vw,13px);
    --fs-12:clamp(10px,0.83vw,12px);
    --fs-10:clamp(8px,0.69vw,10px);
    --fs-8:clamp(6px,0.56vw,8px);

    /* shadow */
    --shadow-main: 0 12px 30px rgba(32, 84, 224, 0.25);
    --shadow: 0 4px 30px rgba(0, 0, 0, 0.04);

    /* transition */
    --transition:.3s ease;
    
}

/*==========================================================
    TEXT COLOR
==========================================================*/
.text-1{color:var(--text-1)!important;}
.text-2{color:var(--text-2)!important;}
.text-3{color:var(--text-3)!important;}
.text-4{color:var(--text-4)!important;}
.static-1{color:var(--static-1)!important;}
.static-2{color:var(--static-2)!important;}
.static-3{color:var(--static-3)!important;}
.static-4{color:var(--static-4)!important;}
.color-white{color:var(--color-white)!important;}
.color-black{color:var(--color-black)!important;}

/*==========================================================
    BACKGROUND
==========================================================*/
.bg-body{background:var(--bg-body)!important;}
.bg-1{background:var(--bg-1)!important;}
.bg-2{background:var(--bg-2)!important;}
.bg-3{background:var(--bg-3)!important;}
.bg-4{background:var(--bg-4)!important;}
.bg-white{background:var(--color-white)!important;}
.bg-black{background:var(--color-black)!important;}

/*==========================================================
    GRADIENT
==========================================================*/
.gradient-blue{background:linear-gradient(to right,#6793FF,#4A7EFF)!important;}
.gradient-green{background:linear-gradient(to right,#32C79A,#2CC9C9)!important;}
.gradient-violet{background:linear-gradient(to right,#765DE8,#5A36FF)!important;}

/*==========================================================
    BORDER
==========================================================*/
.border-1{border-color:var(--border-1)!important;}
.border-2{border-color:var(--border-2)!important;}
.border-3{border-color:var(--border-3)!important;}
.border-4{border-color:var(--border-4)!important;}

/*==========================================================
    SHADOW
==========================================================*/
.shadow-main{box-shadow:var(--shadow-main)!important;}
.shadow{box-shadow:var(--shadow)!important;}

/* =========================================================
    LAYOUT
========================================================= */
.inner {width: calc(100% - 32px); max-width: 1120px; margin: 0 auto;}

/* =========================================================
    PADDING
========================================================= */
.pd-180 {padding:var(--space-180) 0;}
.pd-120 {padding:var(--space-120) 0;}
.pd-100 {padding:var(--space-100) 0;}
.pd-80 {padding:var(--space-80) 0;}

/* =========================================================
    IMG
========================================================= */
.img-wrap {overflow: hidden;}
.img-wrap img {width: 100%; height: 100%; object-fit: cover;}

.center {text-align: center;}

/* =========================================================
    TYPOGRAPHY
========================================================= */
.hero-headline{word-break:keep-all;font-size:var(--fs-14);font-weight:600;line-height:1.4;}
.section-tit{word-break:keep-all;font-size:var(--fs-24);font-weight:700;line-height:1.35;}
.sub-section-tit{word-break:keep-all;font-size:var(--fs-20);font-weight:700;line-height:1.4;}
.card-tit{word-break:keep-all;font-size:var(--fs-18);font-weight:700;line-height:1;}
.body-md{word-break:keep-all;font-size:var(--fs-16);font-weight:400;line-height:1.6;}
.body-sm{word-break:keep-all;font-size:var(--fs-14);font-weight:400;line-height:1.5;}
.badge{word-break:keep-all;font-size:var(--fs-14);font-weight:600;line-height:1.4;}

/* =========================================================
    BUTTON
========================================================= */
.btn {width: fit-content; display:inline-flex; align-items:center; justify-content:center; column-gap: var(--fs-12); padding: var(--fs-12) var(--fs-18); font-size: var(--fs-14); line-height: 1.4; font-weight: 600; color: var(--color-white); border-radius: 999px; transition:var(--transition); cursor:pointer;}
.btn.w-100 {width: 100%;}

.btn.label {padding: var(--fs-8) var(--fs-14); background-color: var(--color-white); color: var(--text-1);}

.btn-label {width: fit-content; display:inline-flex; align-items:center; justify-content:center; column-gap: var(--fs-12); padding: var(--fs-12) var(--fs-18); font-size: var(--fs-14); line-height: 1.4; font-weight: 600; color: var(--color-white); border-radius: 6px; transition:var(--transition); cursor:pointer;}

.btn.line {border: 1px solid var(--border-1); color: var(--text-1);}
.btn.line:hover {background-color: var(--bg-1);}

.btn.blue {background-color: var(--static-1);}
.btn.blue:hover {background-color: var(--static-1-hover);}
.btn.violet {background-color: var(--static-2);}
.btn.violet:hover {background-color: var(--static-2-hover);}
.btn.green {background-color: var(--static-3);}
.btn.green:hover {background-color: var(--static-3-hover);}

.btn-text {display: flex; align-items: center; column-gap: 6px; color: var(--text-2); font-size: var(--fs-16); line-height: 1.6; font-weight: 400;}

/* =========================================================
    COMMON GRID
========================================================= */
.common-grid2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-20);}
.common-grid3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-20);}
.common-grid4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-20);}

.common-flex {display: flex; flex-direction: column; row-gap: var(--fs-10);}
.common-flex.common-flex-14 {row-gap: var(--fs-14);}

.card {padding: var(--fs-20); border-radius: var(--fs-20);}
.card.line {border: 1px solid var(--border-2)}