/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
html.cf-theme-dark {
    color-scheme: dark;
}
:root, :root.cf-theme-dark .cf-theme-inverted {
    --overline-default: hsla(23, 41%, 86%, 1);
    --overline-accent: hsl(36, 6%, 70%);
    --bg-default: #ffffff;
    --bg-accent: #f7f3ed;
    ---bg-accent-alt: #E1DDD8;
    --text-default: #4a4a4a;
    --text-accent: #212121;
    --bt-bg-default: hsla(23, 41%, 86%, 1);
    --bt-bg-hover: hsla(34, 19%, 93%, 1);
    --bt-text-default: #4a4a4a;
    --bt-text-hover: #91887F;
    --bt-bg-default-alt: hsl(24, 18%, 65%);
    --bt-bg-hover-alt: #FCFCF9;
    --bt-text-default-alt: #FFF;
    --bt-text-hover-alt: #B5B0A6;
    --space-2xs: clamp(0.3rem, calc(0.19vw + 0.26rem), 0.49rem);
    --space-xs: clamp(0.44rem, calc(0.34vw + 0.38rem), 0.78rem);
    --space-s: clamp(0.67rem, calc(0.58vw + 0.55rem), 1.25rem);
    --space-m: clamp(1rem, calc(1vw + 0.8rem), 2rem);
    --space-l: clamp(1.5rem, calc(1.7vw + 1.16rem), 3.2rem);
    --space-xl: clamp(2.25rem, calc(2.87vw + 1.68rem), 5.12rem);
    --space-2xl: clamp(3.38rem, calc(4.82vw + 2.41rem), 8.19rem);
    --text-size-xs: clamp(0.56rem, calc(0.16vw + 0.53rem), 0.72rem);
    --text-size-s: clamp(0.7rem, calc(0.2vw + 0.66rem), 0.9rem);
    --text-size-m: clamp(0.88rem, calc(0.25vw + 0.82rem), 1.13rem);
    --text-size-l: clamp(1.09rem, calc(0.31vw + 1.03rem), 1.41rem);
    --text-size-xl: clamp(1.37rem, calc(0.39vw + 1.29rem), 1.76rem);
    --text-size-2xl: clamp(1.71rem, calc(0.49vw + 1.61rem), 2.2rem);
    --text-size-3xl: clamp(2.14rem, calc(0.61vw + 2.01rem), 2.75rem);
    --text-size-4xl: clamp(2.67rem, calc(0.76vw + 2.52rem), 3.43rem);
    --text-size-5xl: clamp(3.34rem, calc(0.95vw + 3.15rem), 4.29rem);
    --text-size-6xl: clamp(4.17rem, calc(1.19vw + 3.93rem), 5.36rem);
    --line-height-s: calc(0.9em + 0.2rem);
    --line-height-m: calc(1em + 0.5rem);
    --line-height-l: calc(1.2em + 0.8rem);
    --outer-margin: clamp(2rem, 0.6rem + 7vw, 9rem);
    --outer-margin-wg: calc(var(--outer-margin) - var(--gap));
    --content-width: calc(100vw - 2 * var(--outer-margin));
    --header-height: clamp(6.5625rem, 5.625rem + 4.6875vi, 11.25rem);
    --hero-height: calc(100dvh - var(--header-height));
    --slider-height: clamp(25rem, calc(93svh - var(--header-height)), 40rem);
    --section-padding: var(--space-2xl);
    --gap: var(--space-m);
    --text-max-width-l: 65ch;
    --text-max-width-m: 45ch;
    --text-max-width-s: 25ch;
    --radius-s: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
    --radius-m: clamp(0.75rem, calc(-0.13vw + 0.78rem), 0.63rem);
    --radius-l: clamp(1.5rem, calc(-0.25vw + 1.55rem), 1.25rem);
    --anim-timing-short: 0.3s ease-in-out;
    --anim-timing-long: 1.5s ease-in-out;
}
:root.cf-theme-dark, :root.cf-theme-light .cf-theme-inverted {
    --text-default: #000000;
    --text-accent: #000000;
    --bt-bg-default: hsla(215, 3%, 7%, 1);
    --bt-bg-hover: hsla(34, 0%, 100%, 1);
    --bt-text-default: #ffffff;
    --bt-bg-default-alt: hsl(215, 3%, 7%);
    --bt-bg-hover-alt: hsla(34, 0%, 100%, 1);
    --bt-text-default-alt: #ffffff;
}
/* Components */
.cf-bricks-button, :is(.bricks-button) {
    padding: 1.2em 3em;
    background: var(--color-main, var(--bt-bg-default));
    color: var(--bt-text-default);
    border: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.cf-bricks-button:hover, :is(.bricks-button):hover {
    background: var(--color-hover, var(--bt-bg-hover));
    color: var(--bt-text-hover);
}
.cf-bricks-button.sm, :is(.bricks-button).sm {
    font-size: var(--text-size-s);
    padding: 0;
}
.cf-bricks-button.md, :is(.bricks-button).md {
    font-size: var(--text-size-s);
    padding: 1.2em 3em;
}
.cf-bricks-button.bricks-background-secondary, :is(.bricks-button).bricks-background-secondary {
    background: var(--bt-bg-default-alt);
    color: var(--bt-text-default-alt);
}
.cf-bricks-button.bricks-background-primary, :is(.bricks-button).bricks-background-primary {
    background-color: var(--bt-bg-default);
    color: var(--bt-text-default);
    border: none;
}
.cf-bricks-button.bricks-background-secondary:hover, :is(.bricks-button).bricks-background-secondary:hover {
    background: var(--bt-bg-hover-alt);
    color: var(--bt-text-hover-alt);
}
.cf-bricks-button.bricks-background-primary:hover, :is(.bricks-button).bricks-background-primary:hover {
    background-color: var(--bt-bg-hover);
    color: var(--bt-text-hover);
}
.cf-bricks-button.lg, :is(.bricks-button).lg {
    font-size: var(--text-size-m);
    padding: 1.1em 2.5em;
}
.cf-bricks-button.xl, :is(.bricks-button).xl {
    font-size: var(--text-size-l);
    padding: 1.2em 3em;
}
.cf-bricks-button.bricks-background-light, :is(.bricks-button).bricks-background-light {
    color: var(--bg-default);
    background: none;
    border: none;
}
.cf-bricks-button.bricks-background-dark, :is(.bricks-button).bricks-background-dark {
    color: var(--text-accent);
    background: none;
    border: none;
}
.cf-bricks-button.bricks-background-muted, :is(.bricks-button).bricks-background-muted {
    background-color: var(--primary-l-3);
    color: var(--primary-d-1);
}
.cf-bricks-button.bricks-background-dark:hover:after, :is(.bricks-button).bricks-background-dark:hover:after {
    translate: 10px;
}
.cf-bricks-button.bricks-background-dark:after, :is(.bricks-button).bricks-background-dark:after {
    content: "→";
    transition: translate 0.3s ease-in-out;
}
.cf-bricks-button.bricks-background-light:after, :is(.bricks-button).bricks-background-light:after {
    content: "→";
    transition: translate 0.3s ease-in-out;
}
.cf-bricks-button.bricks-background-light:hover:after, :is(.bricks-button).bricks-background-light:hover:after {
    translate: 10px;
}
.cf-bricks-button.bricks-background-muted:hover, :is(.bricks-button).bricks-background-muted:hover {
    background-color: var(--primary-l-2);
    color: var(--primary-d-2);
}
.cf-link {
    color: var(--color-main, var(--text-default));
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.3s;
    background-image: linear-gradient(var(--color-main, var(--overline-default)), var(--color-main, var(--overline-default)));
    background-size: 100% var(--line-width, 0.15em);
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-block: 0.25em;
    padding-inline: 0.2em;
}
.cf-link:hover {
    background-size: 100% 0.7em;
}
.cf-link:focus-visible {
    background-size: 100% 0.7em;
    outline: none!important;
}
.cf-checkbox, input[type="checkbox"] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    border: 2px solid var(--color-main, currentcolor);
    border-radius: var(--radius-s);
    padding: 0;
    width: clamp(1.13rem, calc(-0.19vw + 1.16rem), 0.94rem);
    height: clamp(1.13rem, calc(-0.19vw + 1.16rem), 0.94rem);
    cursor: pointer;
    transition: all 0.3s;
}
.cf-checkbox:checked:before, input[type="checkbox"]:checked:before {
    transform: scale(1);
}
.cf-checkbox::before, input[type="checkbox"]::before {
    content: "";
    width: 0.7em;
    aspect-ratio: 1;
    box-shadow: inset 1em 1em var(--color-inverse, var(--bg-default));
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.2s;
}
.cf-checkbox:hover, input[type="checkbox"]:hover {
    border-color: var(--color-hover, color-mix(in lch, currentcolor, white));
}
.cf-checkbox:focus, input[type="checkbox"]:focus {
    outline: 3px solid var(--color-hover, color-mix(in lch, currentcolor, white));
    outline-offset: 2px;
}
.cf-checkbox:checked, input[type="checkbox"]:checked {
    background: var(--color-checked, var(--color-hover, currentcolor));
    border-color: var(--color-checked, var(--color-hover, currentcolor));
}
:is(input):not([type="checkbox"]), :is(textarea, select) {
    border: 0!important;
    border-bottom: 1px solid var(--color-main, var(--text-default))!important;
    border-radius: 0;
    background: transparent;
    transition: all 0.3s;
}
:is(input):not([type="checkbox"]):focus-visible, :is(textarea:focus-visible, select):focus-visible {
    outline: none!important;
    border-bottom: 4px solid var(--color-main, var(--text-default))!important;
    margin-bottom: -3px;
}
/* Color System */
.cf-text-overline-default {
    color: var(--overline-default);
}
.cf-text-overline-accent {
    color: var(--overline-accent);
}
.cf-bg-accent {
    background-color: var(--bg-accent);
}
.cf-bg--accent-alt {
    background-color: var(---bg-accent-alt);
}
.cf-text-accent {
    color: var(--text-accent);
}
/* Fluid Spacing */
/* Fluid Typography */
.cf-text-size-xs {
    font-size: 0.56rem;
    font-size: var(--text-size-xs);
}
.cf-text-size-s {
    font-size: 0.7rem;
    font-size: var(--text-size-s);
}
.cf-text-size-m {
    font-size: 0.88rem;
    font-size: var(--text-size-m);
}
.cf-text-size-l {
    font-size: 1.09rem;
    font-size: var(--text-size-l);
}
.cf-text-size-xl {
    font-size: 1.37rem;
    font-size: var(--text-size-xl);
}
.cf-text-size-2xl {
    font-size: 1.71rem;
    font-size: var(--text-size-2xl);
}
.cf-text-size-3xl {
    font-size: 2.14rem;
    font-size: var(--text-size-3xl);
}
.cf-text-size-4xl {
    font-size: 2.67rem;
    font-size: var(--text-size-4xl);
}
.cf-text-size-5xl {
    font-size: 3.34rem;
    font-size: var(--text-size-5xl);
}
.cf-text-size-6xl {
    font-size: 4.17rem;
    font-size: var(--text-size-6xl);
}
/* CSS reset */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}
*, h1, h2, h3, h4, p {
    line-heigh: var(--line-height-m);
}
body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    color: var(--text-default);
}
h1, h2, h3, h4 {
    text-wrap: balance;
}
img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
}
blockquote {
    padding: 0;
    border-style: none;
}
:target {
    scroll-margin-block: 5ex;
}
/* Adaptive Line-height */
/* Typography system */
.cf-font-hero, :is(.bricks-type-hero) {
    font-family: Ortica light;
    font-size: var(--text-size-6xl);
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-m);
    letter-spacing: 0em;
    text-transform: uppercase;
}
.cf-font-logo, :is(.brxe-logo) {
    font-family: NanumMyeongjo;
    font-size: var(--text-size-xl);
    font-style: normal;
    font-weight: regular;
    line-height: 1em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.cf-font-title-1, h1 {
    font-family: Ortica light;
    font-size: var(--text-size-2xl);
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-m);
    letter-spacing: -0.02em;
    text-transform: none;
}
.cf-font-title-2, h2 {
    font-family: Palanquin;
    font-size: var(--text-size-2xl);
    font-style: normal;
    font-weight: 500;
    line-height: var(--line-height-m);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cf-font-title-3 {
    font-family: Spectral;
    font-size: var(--text-size-2xl);
    font-style: italic;
    font-weight: 300;
    line-height: var(--line-height-m);
    letter-spacing: 0.05em;
    text-transform: none;
}
.cf-font-title-4, h4 {
    font-family: Ortica light;
    font-size: var(--text-size-2xl);
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-m);
    letter-spacing: 0;
    text-transform: uppercase;
}
.cf-font-subtitle1 {
    font-family: Libre Franklin;
    font-weight: 400;
    font-style: normal;
    font-size: var(--text-size-xs);
    line-height: var(--line-height-m);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cf-font-subtitle2, form label {
    font-family: Syncopate;
    font-weight: 400;
    font-style: normal;
    font-size: var(--text-size-xs);
    line-height: var(--line-height-m);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cf-font-quote, blockquote {
    font-family: Spectral;
    font-size: var(--text-size-xl);
    font-weight: 300;
    font-style: italic;
    line-height: var(--line-height-s);
    letter-spacing: -0.01em;
    text-transform: none;
}
.cf-font-paragraph, body {
    font-family: Libre Franklin;
    font-size: var(--text-size-m);
    font-style: normal;
    font-weight: regular;
    line-height: var(--line-height-l);
    letter-spacing: 0em;
    text-transform: none;
}
.cf-font-description {
    font-family: Libre Franklin;
    font-size: var(--text-size-s);
    font-weight: regular;
    font-style: italic;
    line-height: var(--line-height-m);
    letter-spacing: 0.02em;
    text-transform: none;
}
.cf-font-navigation, nav a, :is(.bricks-button) {
    font-family: Palanquin;
    font-size: var(--text-size-s);
    font-weight: 500;
    font-style: normal;
    line-height: var(--line-height-m);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cf-font-overline1 {
    font-family: Palanquin;
    font-size: var(--text-size-xs);
    font-weight: 500;
    font-style: normal;
    line-height: var(--line-height-m);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.cf-font-overline2 {
    font-family: Palanquin;
    font-size: var(--text-size-xs);
    font-weight: 700;
    font-style: normal;
    line-height: var(--line-height-m);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.cf-font-primary-cta {
    font-family: Palanquin;
    font-size: var(--text-size-s);
    font-weight: 500;
    font-style: normal;
    line-height: var(--line-height-s);
    letter-spacing: 0.11em;
    text-transform: none;
}
.cf-font-secondary-cta {
    font-family: Palanquin;
    font-size: var(--text-size-s);
    font-weight: 500;
    font-style: normal;
    line-height: var(--line-height-s);
    letter-spacing: 0.11em;
    text-transform: none;
}
.cf-font-caption {
    font-family: NanumMyeongjo;
    font-size: var(--text-size-xs);
    font-weight: 400;
    font-style: normal;
    line-height: var(--line-height-s);
    letter-spacing: 0;
    text-transform: none;
}
/* Text Alignment */
.cf-text-left {
    text-align: left;
}
.cf-text-center {
    align-self: center;
    text-align: center;
}
.cf-text-right {
    text-align: right;
    align-self: end;
}
.cf-text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
/* Utility */
.cf-wrap-balance {
    text-wrap: balance;
}
.cf-nowrap {
    white-space: nowrap;
}
/* Custom spacing */
/* Layout Settings */
main > *:not(:first-child), footer > *:not(:last-child) {
    padding-block: var(--section-padding);
}
main > *:first-child {
    padding-top: 0;
    padding-bottom: var(--section-padding);
}
footer > *:last-child {
    padding-top: var(--section-padding);
    padding-bottom: var(--space-s);
}
:where(.brxe-section) {
    row-gap: var(--space-l);
    column-gap: var(--space-l);
}
:is(.brxe-container) {
    width: var(--content-width);
    row-gap: var(--space-m);
    column-gap: var(--space-m);
}
:where(.brxe-block) {
    row-gap: var(--space-m);
    column-gap: var(--space-m);
}
/* Grid Layouts */
.cf-even-columns {
    display: grid;
    grid-auto-flow: column;
    column-gap: 0;
    grid-auto-columns: 1fr;
    align-items: stretch;
    &.brxe-section > :where(.brxe-container:first-child){padding-inline: var(--outer-margin) var(--space-xl)};
    &.brxe-section > :where(.brxe-container:last-child){padding-inline: var(--space-xl) var(--outer-margin)};
    &.brxe-section > :where(.brxe-container:not(:first-child, :last-child)){padding-inline: var(--space-xl)};
    &.brxe-section > :where(.brxe-container, div.brxe-block){width: 100%;
    justify-content: center};
}
.cf-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    justify-items: center;
}
.cf-grid-12-full {
    display: grid;
    grid-template-columns: var(--outer-margin-wg) repeat(12, 1fr) var(--outer-margin-wg);
    gap: var(--gap);
    justify-items: center;
}
.cf-grid-24 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: var(--gap);
    justify-items: center;
}
.cf-grid-24-full {
    display: grid;
    grid-template-columns: var(--outer-margin-wg) repeat(24, 1fr) var(--outer-margin-wg);
    gap: var(--gap);
    justify-items: center;
}
.cf-subgrid {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}
.cf-grid-img-wrapper-100 {
    position: relative;
    width: 100%;
    height: 100%;
}
.cf-grid-img-wrapper-h100 {
    position: relative;
    height: 100%;
}
.cf-grid-img-wrapper-w100 {
    position: relative;
    width: 100%;
}
/* Layout Utilities */
.cf-container-query {
    container-type: inline-size;
    container-name: var(--container-name, container);
}
.cf-img-abs {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    object-fit: cover;
    & img {object-fit: cover};
}
.cf-relative {
    position: relative;
}
.cf-absolute {
    position: absolute;
}
/* Z-index */
.cf-z-index-1 {
    z-index: -1;
}
/* Design Settings */
body.bricks-is-frontend :focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
body.bricks-is-frontend :focus-visible:not(:is(input):not([type="checkbox"]), :is(textarea)) {
    outline: color-mix(in lab, currentcolor 60%, white) solid 4px;
    outline-offset: 7px;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
p, li {
    text-wrap: pretty;
}
:is(div.brxe-posts, div.bricks-layout-item, div.bricks-layout-inner) {
    overflow: visible!important;
}
/* Aspect Ratios */
.cf-aspect-1 {
    aspect-ratio: 1;
}
.cf-aspect-4-3 {
    aspect-ratio: 4 / 3;
}
.cf-aspect-3-4 {
    aspect-ratio: 3 / 4;
}
.cf-aspect-3-2 {
    aspect-ratio: 3 / 2;
}
.cf-aspect-2-3 {
    aspect-ratio: 2 / 3;
}
.cf-aspect-16-9 {
    aspect-ratio: 16 / 9;
}
/* Utilities */
.cf-display-none {
    display: none;
}
.cf-flow > * + * {
    margin-top: var(--flow, 1em);
}
.cf-red-border {
    border: 3px solid #f03e3e;
}
.cf-green-border {
    border: 3px solid #9bbb36;
}
.cf-blue-border {
    border: 3px solid #228be6;
}
.cf-yellow-border {
    border: 3px solid #fcc419;
}
/* Animation */
@media (max-width: 767px) {
    .cf-even-columns {
        grid-auto-flow: row;
        &.brxe-section > .brxe-container{padding-inline: var(--outer-margin)};
    }
    .cf-grid-12 {
        display: flex;
    }
    .cf-grid-12-full {
        display: flex;
    }
    .cf-grid-24 {
        display: flex;
    }
    .cf-grid-24-full {
        display: flex;
    }
    .cf-mobile-grid-full {
        display: grid;
        grid-template-columns: var(--outer-margin-wg) 1fr 1fr var(--outer-margin-wg);
        grid-template-rows: unset;
        gap: var(--gap);
    }
    .cf-mobile-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
        gap: var(--gap);
    }
}
@media (min-width: 1920px) {
    :root {
        --outer-margin: calc(50vw - 816px);
    }
    .cf-even-columns.brxe-section > :where(.brxe-div):first-child {
        margin-left: var(--outer-margin);
    }
    .cf-even-columns.brxe-section > :where(.brxe-div):last-child {
        margin-right: var(--outer-margin);
    }
    .cf-even-columns.brxe-section > :where(.brxe-div) {
        width: calc(100% - var(--outer-margin));
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}