/* =========================================================
   LAVOISIER R&D
   BRAND IDENTITY GUIDELINES
========================================================= */

:root {

    --lav-main: #0B3566;
    --lav-sub: #C9DCF3;

    --lav-dark: #061D35;
    --lav-blue: #164B80;

    --lav-bg: #F5F8FC;
    --lav-white: #FFFFFF;

    --lav-text: #172B40;
    --lav-gray: #6E7D8C;

    --lav-border: #DDE6EF;

}


/* =========================================================
   RESET
========================================================= */

.lav-brand {

    width: 100%;

    overflow: hidden;

    color: var(--lav-text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        sans-serif;

}

.lav-brand *,
.lav-brand *::before,
.lav-brand *::after {

    box-sizing: border-box;

}

.lav-brand img {

    display: block;

    max-width: 100%;

}


.brand-container {

    width:
        min(
            1200px,
            calc(100% - 80px)
        );

    margin: 0 auto;

}


/* =========================================================
   ANIMATION
========================================================= */

.lav-reveal {

    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s
        cubic-bezier(.22,1,.36,1);

}

.lav-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   HERO
========================================================= */

.brand-hero {

    position: relative;

    min-height: 580px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #061D35 0%,
            #0B3566 55%,
            #164B80 100%
        );

    color: #fff;

}


.brand-hero-bg {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(201,220,243,.2),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(201,220,243,.1),
            transparent 30%
        );

}


.brand-hero-bg::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -300px;

    top: -350px;

    border:
        1px solid
        rgba(201,220,243,.12);

    border-radius: 50%;

}


.brand-container {

    position: relative;

}


.brand-hero .brand-container {

    min-height: 580px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 80px;

}


.brand-eyebrow {

    display: inline-block;

    margin-bottom: 25px;

    padding:
        9px 18px;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius: 50px;

    color: var(--lav-sub);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.brand-hero h1 {

    margin: 0;

    font-size:
        clamp(55px,7vw,92px);

    line-height: .95;

    font-weight: 200;

    letter-spacing: -4px;

}


.brand-hero h1 strong {

    color: var(--lav-sub);

    font-weight: 700;

}


.brand-hero-content p {

    margin:
        35px 0 0;

    color:
        rgba(255,255,255,.7);

    font-size: 16px;

    line-height: 1.8;

}


.brand-hero-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 430px;

    height: 430px;

    padding: 60px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 50%;

    background:
        rgba(255,255,255,.04);

    backdrop-filter:
        blur(10px);

    animation:
        logoFloat 5s
        ease-in-out
        infinite;

}


.brand-hero-logo img {

    width: 100%;

    max-width: 300px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 35px
            rgba(0,0,0,.25)
        );

}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


/* =========================================================
   SECTION
========================================================= */

.brand-section {

    padding:
        130px 0;

    background:
        var(--lav-white);

}


.brand-gray-section {

    background:
        var(--lav-bg);

}


.brand-section-head {

    display: flex;

    align-items: flex-start;

    gap: 22px;

    margin-bottom: 70px;

}


.brand-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    border-radius: 50%;

    background:
        var(--lav-main);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

}


.brand-label {

    display: block;

    margin-bottom: 12px;

    color:
        var(--lav-main);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.brand-section-head h2 {

    margin: 0;

    color:
        #172B40;

    font-size:
        clamp(35px,4vw,55px);

    line-height: 1.15;

    letter-spacing: -2px;

}


.brand-section-head h2 strong {

    color:
        var(--lav-main);

}


/* =========================================================
   TWO COLUMN
========================================================= */

.brand-two-column {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 80px;

    align-items: center;

}


.brand-description h3 {

    margin: 0 0 25px;

    color:
        #172B40;

    font-size:
        clamp(28px,3vw,42px);

    line-height: 1.4;

    letter-spacing: -1.5px;

}


.brand-description h3 strong {

    color:
        var(--lav-main);

}


.brand-description p {

    margin:
        0 0 20px;

    color:
        var(--lav-gray);

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   LOGO SHOWCASE
========================================================= */

.brand-logo-showcase {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 20px;

}


.logo-showcase-item > span {

    display: block;

    margin-bottom: 10px;

    color:
        #6B7B89;

    font-size: 10px;

    font-weight: 700;

}


.logo-box {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 260px;

    padding: 35px;

    border:
        1px solid
        var(--lav-border);

}


.logo-box.white-bg {

    background:
        #fff;

}


.logo-box img {

    width: 100%;

    max-width: 220px;

    object-fit: contain;

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1);

}


.logo-box:hover img {

    transform:
        scale(1.06);

}


/* =========================================================
   RULE
========================================================= */

.brand-rule h3 {

    margin:
        0 0 20px;

    color:
        #172B40;

    font-size: 30px;

}


.brand-rule > p {

    max-width: 500px;

    margin:
        0 0 15px;

    color:
        var(--lav-gray);

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   MINIMUM LOGO
========================================================= */

.minimum-logo {

    display: flex;

    align-items: flex-end;

    gap: 20px;

    margin-top: 45px;

}


.minimum-logo img {

    width: 55px;

    height: 55px;

    object-fit: contain;

}


.minimum-logo span {

    padding-bottom: 5px;

    color:
        #657585;

    font-size: 11px;

}


/* =========================================================
   CLEARSPACE
========================================================= */

.clearspace-box {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 350px;

    margin-top: 30px;

    background:
        #fff;

    border:
        1px solid
        var(--lav-border);

}


.clearspace-guide {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 220px;

    height: 220px;

    border:
        1px dashed
        #AAB8C5;

    background-image:

        linear-gradient(
            45deg,
            transparent 48%,
            rgba(11,53,102,.08) 49%,
            rgba(11,53,102,.08) 51%,
            transparent 52%
        );

    background-size:
        40px 40px;

}


.clearspace-guide img {

    width: 120px;

    height: 120px;

    object-fit: contain;

}


.guide-line {

    position: absolute;

    background:
        var(--lav-main);

}


.guide-line.top,
.guide-line.bottom {

    left: 0;

    width: 100%;

    height: 1px;

}


.guide-line.top {

    top: 30px;

}


.guide-line.bottom {

    bottom: 30px;

}


.guide-line.left,
.guide-line.right {

    top: 0;

    width: 1px;

    height: 100%;

}


.guide-line.left {

    left: 30px;

}


.guide-line.right {

    right: 30px;

}


/* =========================================================
   COLOR USAGE
========================================================= */

.color-usage-layout {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 80px;

    align-items: start;

}


.logo-usage-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 30px;

}


.usage-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

}


.usage-title span {

    color:
        var(--lav-main);

    font-size: 9px;

    font-weight: 800;

}


.usage-title p {

    margin: 0;

    color:
        #687989;

    font-size: 11px;

}


.usage-bg {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 260px;

    padding: 40px;

    overflow: hidden;

}


.usage-bg img {

    width: 75%;

    max-width: 220px;

    object-fit: contain;

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1);

}


.usage-card:hover
.usage-bg img {

    transform:
        scale(1.07);

}


.usage-bg.white {

    background:
        #fff;

    border:
        1px solid
        var(--lav-border);

}


.usage-bg.gray {

    background:
        #BCBCBC;

}


.usage-bg.black {

    background:
        #000;

}


.usage-bg.blue {

    background:
        var(--lav-main);

}


/* =========================================================
   PALETTE
========================================================= */

.palette-layout {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 80px;

    align-items: start;

}


.palette-main-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 15px;

}


.palette-card {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px;

    color: #fff;

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.palette-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(11,53,102,.15);

}


.palette-card.main-color {

    background:
        #0B3566;

}


.palette-card.sub-color {

    background:
        #164B80;

}


.palette-card small {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: .65;

}


.palette-card h3 {

    margin:
        12px 0 0;

    font-size: 24px;

}


.palette-code {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.palette-code strong {

    font-size: 20px;

}


.palette-code span {

    color:
        rgba(255,255,255,.65);

    font-size: 10px;

}


/* =========================================================
   BASIC PALETTE
========================================================= */

.basic-palette {

    margin-top: 30px;

}


.basic-title {

    margin-bottom: 10px;

    color:
        #667789;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.basic-color {

    min-height: 90px;

    display: flex;

    align-items: center;

    padding: 25px;

}


.basic-color div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.basic-color strong {

    font-size: 14px;

}


.basic-color span {

    font-size: 10px;

}


.white-color {

    background:
        #fff;

    border:
        1px solid
        var(--lav-border);

    color:
        #172B40;

}


.gray-color {

    background:
        #BCBCBC;

    color:
        #172B40;

}


.black-color {

    background:
        #000;

    color:
        #fff;

}


/* =========================================================
   CLOSING
========================================================= */

.brand-closing {

    position: relative;

    padding:
        140px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #061D35,
            #0B3566
        );

    color:
        #fff;

    text-align:
        center;

}


.brand-closing-bg {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(201,220,243,.13),
            transparent 35%
        );

}


.brand-closing-content {

    position: relative;

    z-index: 2;

}


.brand-closing-content > span {

    color:
        var(--lav-sub);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.brand-closing h2 {

    margin:
        25px 0;

    font-size:
        clamp(32px,4vw,55px);

    font-weight: 300;

    letter-spacing: -2px;

}


.brand-closing p {

    margin: 0;

    color:
        rgba(255,255,255,.65);

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .brand-container {

        width:
            calc(100% - 60px);

    }


    .brand-two-column,
    .color-usage-layout,
    .palette-layout {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .brand-hero-logo {

        width: 330px;

        height: 330px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .brand-container {

        width:
            calc(100% - 36px);

    }


    /* HERO */

    .brand-hero {

        min-height: 620px;

    }


    .brand-hero .brand-container {

        min-height: 620px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;

        gap: 50px;

    }


    .brand-hero h1 {

        font-size: 54px;

        letter-spacing: -2px;

    }


    .brand-hero-content p {

        font-size: 14px;

    }


    .brand-hero-logo {

        position: absolute;

        width: 190px;

        height: 190px;

        right: 0;

        bottom: 35px;

        padding: 30px;

    }


    /* SECTION */

    .brand-section {

        padding:
            75px 0;

    }


    .brand-section-head {

        gap: 15px;

        margin-bottom: 45px;

    }


    .brand-number {

        width: 42px;

        height: 42px;

        flex: 0 0 42px;

    }


    .brand-section-head h2 {

        font-size: 32px;

        letter-spacing: -1.5px;

    }


    /* LOGO */

    .brand-logo-showcase {

        grid-template-columns:
            1fr;

    }


    .logo-box {

        min-height: 210px;

    }


    /* RULE */

    .clearspace-box {

        min-height: 280px;

    }


    /* USAGE */

    .logo-usage-grid {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .usage-bg {

        min-height: 230px;

    }


    /* PALETTE */

    .palette-main-grid {

        grid-template-columns:
            1fr;

    }


    .palette-card {

        min-height: 220px;

    }


    /* CLOSING */

    .brand-closing {

        padding:
            90px 20px;

    }


    .brand-closing h2 {

        font-size: 30px;

    }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .brand-hero h1 {

        font-size: 48px;

    }


    .brand-hero-logo {

        width: 160px;

        height: 160px;

    }


    .brand-description h3 {

        font-size: 28px;

    }

}