/* ============================================
   기본 스타일 초기화
   ============================================ */

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}
section {
    overflow: hidden;
    width: 100%;
}

.main::after {
    width: 1vw;
    height: 0vw;
    position: absolute;
    top: 0;
    pointer-events: none;
    opacity: 0;
    pointer-events: none;
}
.clearfix::after,
.clearfix::before {
    display: block;
    clear: both;
    content: "";
}

/* ============================================
   애니메이션 클래스
   ============================================ */

.animate-blk {
    animation: blk 1s infinite ease-in-out;
}
.scaleOpa {
    animation: scaleOpa infinite 2s;
}
.scaleOpa2 {
    animation: scaleOpa2 infinite 2s;
}
.light {
    animation: light infinite 5s;
}
.rotate_img {
    animation: rotate_image 10s infinite linear;
}
.image_sd {
    animation: marqueeX 20s infinite linear;
}
.image_sd_r {
    animation: marqueeX_r 20s infinite linear;
}
.slide_y {
    animation: marqueeY 20s infinite linear;
}
.slide_y_r {
    animation: marqueeY_r 20s infinite linear;
}
.smoke {
    animation: smoke 5.5s infinite ease-out;
    top: -25%;
    pointer-events: none;
}
.floating_ani {
    animation: floating 2s ease-in-out infinite alternate;
}
.floating_ani2 {
    animation: floating 2s 1s ease-in-out infinite alternate;
}

/* ============================================
   퍼블 시작
   ============================================ */

body {
    font-family: var(--font-family);
    font-size: 1.8rem;
    min-height: 0vw;
    letter-spacing: -0.06em;
    line-height: 1.5;
}

/* ============================================
   main start
   ============================================ */
.con01 {
    padding-top: var(--headerH);
    background: #000;
    height: 89.5rem;
}
.con01__bg {
    top: var(--headerH);
    left: 0;
    &::after {
        content: "";
        position: absolute;
        display: block;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75));
    }
}
.con01_bg1 {
    margin-left: -1px;
}
.con01__bg--left {
    top: 0;
    left: 12rem;
}
.con01__bg--right {
    top: 0;
    right: 12rem;
}
.con01 .deco--top {
    top: -2.7rem;
}
.con01_10 {
    bottom: 0;
    left: 0;
}
.con01 .card__wrap li .card__img--hover {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.con01 .card__wrap li.active .card__img--hover,
.con01 .card__wrap li.hover .card__img--hover,
.con01 .card__wrap li:hover .card__img--hover {
    opacity: 1;
}

/* ---- con02 ----- */
.con02 {
    background: url(/images/con02_bg.webp) no-repeat center/cover;
}
.con02 .title__bg {
    top: -15rem;
}
.con02__content--wrap {
    margin-top: 15rem;
}

.con02 .card--wrap {
    .card-1,
    .card-2,
    .card-3 {
        border-radius: 2rem;
        width: 52rem;
        height: 45rem;
    }
}
.con02 .card--wrap .card-2 {
    height: 44.4rem;
}
.con02 .card-2--bg {
    overflow: hidden;
    border-radius: inherit;
}
.con02_03--wrap {
    top: 13rem;
}
.con02_03a {
    bottom: 10rem;
}
.con02_05 {
    top: 16rem;
    right: -7rem;
}
.con02__content-2 {
    background: rgba(0, 0, 0, 0.6);
    padding-top: 30rem;
    margin-top: -31rem;
    max-width: 153rem;
    border-radius: 3rem;
}
.con02 .button {
    --button-bg: var(--bg-color);
    --button-fc: #000;
    --button-px: 4rem;
    border: 1px solid #000;
    border-radius: 999px;
}
.con02 .img__wrap .bg__img {
    top: 0rem;
}
.con02_12 {
    margin-top: -1rem;
    margin-bottom: -1rem;
}

/* ---- con03 ------ */

.con03__container {
    padding-top: 10rem;
    padding-bottom: 11rem;
}
.con03 .stack__card__wrap {
    height: 50rem;
    overflow: hidden;
}
.con03 .card {
    max-width: 150rem;
    width: 100%;
    height: 48.9rem;
    border: 8px solid #fff;
    outline: 1px solid #cebfaa;
    flex-shrink: 0;
}
.con03 .card-1 {
    background: url(/images/con03_bg1.webp) no-repeat left/cover;
}
.con03 .card-2 {
    background: url(/images/con03_bg2.webp) no-repeat left/cover;
}
.con03 .card-3 {
    background: url(/images/con03_bg3.webp) no-repeat center/cover;
}
.con03 .card__number {
    top: 6rem;
    left: 10rem;
}
.con03 .card__left .inner {
    padding-left: 17rem;
}
.con03 .card__right {
    max-width: 49.8%;
}

.con03_06 {
    margin-right: 15rem;
    transform: translateY(-7rem);
}
.con03_06a {
    margin-left: 15rem;
    transform: translateY(7rem);
}
.con03_09 {
    top: 7rem;
    right: 7rem;
}
.con03_10 {
    margin-right: -3rem;
}
.con03_07 {
    height: 53.2rem;
}
.con03 .marquee {
    transform: rotate(-45deg);
    img {
        transform: rotate(45deg);
        padding: 0 2rem;
        animation: con03Marquee 3s infinite linear;
    }
}
@keyframes con03Marquee {
    0% {
        transform: translateX(0%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* ------- con04 --------- */
.con04 {
    height: 95rem;
}
.con04 .left__bg,
.con04 .right__bg {
    max-width: 50%;
}
.con04 .door__img {
    left: 0;
    top: 0;
    transform: translateX(-27rem);
}
.con04 .door__img-r {
    right: 0;
    top: 0;
    transform: translateX(27rem);
    img {
        transform: scaleX(-1);
    }
}
.con04__content {
    max-width: 158rem;
    width: 100%;
    padding-top: 12rem;
    box-sizing: border-box;
}
.con04_03 {
    margin-right: -5rem;
    margin-bottom: 10rem;
}
.con04_03a {
    margin-bottom: -27rem;
}
.con04_03--wrap {
    top: 12rem;
}
.con04_02 {
    top: 6rem;
}
.con04_03c {
    bottom: 0;
    margin-right: 5rem;
}

/* ------- con05 ------- */
.con05 {
    background: #cebfaa;
    box-sizing: border-box;
    padding: 3rem;
}
.con05__container {
    padding-top: 11rem;
    background: var(--bg-color);
}
.con05 .center .inner {
    top: 7rem;
}
.con05 .left {
    margin-top: -21.6rem;
    margin-right: -27rem;
}
.con05 .right {
    margin-top: -20.3rem;
    margin-left: -27rem;
}
.con05_03a {
    top: -2rem;
}
.con05 .center__bg {
    mix-blend-mode: darken;
    will-change: clip-path;
}

.con05_01 {
    top: 3rem;
}
.con05 .bg__wrap {
    outline: 1px solid #b1aba2;
    outline-offset: -3rem;
}
.con05_05 {
    background-color: var(--bg-color);
    padding: 2rem;
}

/* left top */
.con05_05:nth-of-type(2) {
    top: 1rem;
    left: 1rem;
}
/* right top */
.con05_05:nth-of-type(3) {
    top: 1rem;
    right: 1rem;
    img {
        transform: rotate(90deg);
    }
}
/* right bottom */
.con05_05:nth-of-type(4) {
    bottom: 1rem;
    right: 1rem;
    img {
        transform: rotate(180deg);
    }
}
/* left bottom */
.con05_05:nth-of-type(5) {
    bottom: 1rem;
    left: 1rem;
    img {
        transform: rotate(270deg);
    }
}

/* ------- con06 -------- */
.con06 {
    background: url(/images/con06_bg.webp) no-repeat center/cover;
    height: 100rem;
}
.con06__container {
    padding-top: 10rem;
}
.con06_06 {
    margin-left: -28rem;
}
.con06_07 {
    margin-bottom: -8.4rem;
}
.con06_04 {
    top: 7.4rem;
    left: 1.8rem;
}
.con06 .con06__swiper {
    top: 50%;
    left: 15rem;
    overflow: visible;

    @media (width >= 600px) {
        width: 30rem;
        height: 24rem;
        transform: translateY(-50%);
    }
}

@media (width>=600px) {
    .con06 .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        opacity: 0.5;
        transition:
            transform 0.5s,
            opacity 0.5s;

        .con06_02,
        .con06_02_r {
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.6s 0.3s;
        }
    }
    .con06 .swiper-slide-active {
        opacity: 1;

        .con06_02,
        .con06_02_r {
            height: auto;
            opacity: 1;
        }
    }
    .con06 .swiper-slide:has(~ .swiper-slide-prev),
    .con06 .swiper-slide-next ~ .swiper-slide {
        transform: translateX(-30rem);
        opacity: 0;
    }
    .con06 .swiper-slide-prev,
    .con06 .swiper-slide-next {
        transform: translateX(-8rem);
    }
}

.con06_02_r img {
    transform: scale(-1);
}
.con06 .swiper__bg {
    left: -15rem;
}

/* ---- con07 ---- */
.con07 {
    background: url(/images/con07_bg.webp) center/cover no-repeat;
    height: 99.8rem;
}
.con07__container {
    padding-top: 12rem;
}
.con07_08 {
    bottom: 0;
}

.con07 .left__card,
.con07 .right__card {
    width: 96rem;
    height: 50rem;
    box-sizing: border-box;
    padding: 5rem;
    background: linear-gradient(120deg, var(--primary), color-mix(var(--primary), #111));
}

.con07 .left__card {
    justify-content: end;
    .card__badge {
        right: 0;
    }
    .con07__swiper {
        width: 28rem;
        height: 40.6rem;
        margin: 0;
        border-radius: 2rem;
    }
    .swiper-slide {
        background-color: #ddd;
        p {
            bottom: 2rem;
        }
        &::after {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 80%, rgba(0, 0, 0, 0.5) 100%);
        }
    }
    .swiper__btn__wrap {
        top: 2rem;
    }
    .swiper__btn--next img {
        transform: scaleX(-1);
    }
}
.con07 .blink__item {
    border: 1px solid color-mix(var(--primary), #fff 10%);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.con07 .blink__item.active {
    background-color: #fff !important;
    color: #000 !important;
    border-color: transparent !important;
}
.con07 .timer--wrap.active .number__box {
    color: #fff;
}
.con07 .timer--wrap {
    border-radius: 2.4rem;
    padding: 1.6rem 0;
    line-height: 1;
}
.w-20rem {
    width: 20rem;
}
.con07 .timer {
    .number__box {
        width: 3.5rem;
        height: 4.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #003260;
        border-radius: 1rem;
        font-size: 2.8rem;
    }
    span {
        padding: 0 0.4rem;
    }
}
.con07 .left__card .text-2 {
    border-color: color-mix(var(--primary), #fff 10%);
}
.con07 .right__card {
    background: linear-gradient(-120deg, var(--primary), color-mix(var(--primary), #111));
    padding-left: 16rem;
    .card__badge {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .custom__slider {
        width: 40.7rem;
        height: 28.5rem;
    }
    .slide {
        opacity: 0;
        transition: all 0.5s;
    }
    .slide.active {
        opacity: 1;
    }
}

/* ---- con09 ---- */
.con09 {
    background: url(/images/con09_bg.webp) no-repeat center/cover;
    height: 99rem;
    padding-top: 13rem;
}

.con09 .sales__main,
.con09 .sales__month {
    width: 50rem;
    height: 18.7rem;
    border-radius: 3rem;
    box-sizing: border-box;
    border: 0.5rem solid #cebfaa;
}
.con09 .center [data-font="paperlogy"] {
    font-family: "Paperlogy", sans-serif;
    letter-spacing: -0em;
}

.con09 .swiper-slide {
    width: 25.4rem;
}

/* ---- con10 ---- */
.con10 {
    background: url(/images/con10_bg.webp) center/cover no-repeat;
    clip-path: url(#con10-clip);
    height: 108.7rem;
    padding-top: 15rem;
    box-sizing: border-box;
}

.con11 {
    background: url(/images/con11_bg.webp) no-repeat center/cover;
    height: 182.4rem;
    margin-top: -36rem;
    padding-top: 18rem;
    box-sizing: border-box;
}

.con11__content {
    grid-template-columns: 1fr 1fr;
    max-width: 127rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4rem;
}
@media (width >= 600px) {
    .con11 .grid__deco {
        justify-self: center;
        align-self: center;
    }
    .con11 .grid__item-1 {
        order: 1;
        border-bottom: 1px solid #cebfaa;
        border-right: 1px solid #cebfaa;
    }
    .con11 .grid__item-2 {
        order: 3;
        border-right: 1px solid #cebfaa;
    }
    .con11 .grid__item-3 {
        order: 2;
        border-bottom: 1px solid #cebfaa;
    }
    .con11 .grid__item-4 {
        order: 4;
        .grid__img {
            margin-left: auto;
            margin-right: 1rem;
        }
    }

    .con11 .grid__item-3,
    .con11 .grid__item-4 {
        padding-left: 14rem;
        flex-direction: row-reverse;
        justify-content: start;
        .number__img {
            right: 4rem;
        }
    }
}

.con11-2 {
    padding-top: 16rem;
}
.con11-2 .filter {
    font-size: max(2rem, 14px);
    padding: 2rem 3.6rem;
    border-radius: 999px;
    background: #011425;
    border: 1px solid #000;

    transition: all 0.3s;

    &.active {
        background: var(--bg-color);
        color: #000;
        font-weight: 700;
    }

    @media (width >= 600px) and (hover: hover) {
        &.active:hover {
            background: color-mix(var(--bg-color), #000 5%);
        }
        &.active:active {
            background: color-mix(var(--bg-color), #000 8%);
        }
        &:not(.active):hover {
            background: color-mix(#011425, #fff 5%);
        }
        &:not(.active):active {
            background: color-mix(#011425, #fff 3%);
        }
    }
}
.con11-2 .filter__box .swiper-wrapper {
    gap: 1.6rem;
}
.menu__container {
    min-height: 40.7rem;
    max-width: 140rem;
    margin-left: auto;
    margin-right: auto;

    .swiper {
        width: 109.6rem;
    }
    .swiper--wrap {
        display: none;
    }
    .swiper--wrap.active {
        display: flex;
    }
    .swiper-slide {
        width: 25rem;
        height: 25rem;
        border-radius: 99rem;
        background: #e3d5c0;
        overflow: hidden;
    }
    .swiper__btn--next img {
        transform: scaleX(-1);
    }
}
.con11_09 {
    bottom: 5rem;
    right: 4rem;
}
.con11_11 {
    margin-top: -1rem;
    margin-bottom: -1rem;
}

/* ---- con12 ---- */
.con12 {
    background: url(/images/con13_bg.webp) no-repeat top/cover;
    padding-top: 15rem;
}
.con12__container {
    max-width: 148rem;
    padding-bottom: 10rem;
}
.con12 .name__deco_r img {
    transform: scaleX(-1);
}
.con12 .interview__swiper {
    width: 81rem;
    aspect-ratio: 16/9;
    border: 0.5rem solid #f2f2f2;
    box-sizing: border-box;
    outline: 1px solid #cebfaa;

    .swiper-slide {
        background: #ddd;
    }
}
.con12 .swiper__btn--next img {
    transform: scaleY(-1);
}
.con12__bg {
    right: 0;
    top: 0;
}

/* ---- con13 ---- */
.con13__container {
    padding-top: 8rem;
    max-width: 171rem;
    background: #031f39;
}
@media (width > 600px) {
    .con13 .con13__swiper {
        margin-bottom: -4rem;
        .con13__swiper__deco {
            top: 0;
        }
        .swiper-wrapper {
            margin-top: 0.4rem;
        }
        .swiper-slide {
            display: flex;
            width: 37.4rem;
            border-radius: 4rem;
            overflow: hidden;
            transform: scale(0.8) translate(0, -2rem);
            transition: transform 0.5s;
        }
        .swiper-slide-active {
            transform: scale(1);
        }
        .swiper-slide-next {
            transform: scale(0.8) translate(-3rem, -2rem);
            transition: transform 0.4s;
        }
        .swiper-slide-next + .swiper-slide {
            transform: scale(0.8) translate(-11rem, -2rem);
            transition: transform 0.2s;
        }
        .swiper-slide-prev {
            transform: scale(0.8) translate(3rem, -2rem);
            transition: transform 0.4s;
        }
        .swiper-slide:has(+ .swiper-slide-prev) {
            transform: scale(0.8) translate(11rem, -2rem);
            transition: transform 0.2s;
        }
    }
}

/* ---- con14 ---- */
.con14 {
    background: url(/images/con14_bg.webp) no-repeat top/cover;
    height: 95rem;
    padding-top: 20rem;
    box-sizing: border-box;
}
.con14 .scroll__item {
    max-width: 85.4rem;
    width: 100%;
    height: 35.8rem;
    box-sizing: border-box;
    border: 0.3rem solid #fff;
    border-radius: 0.4rem;
    outline: 1px solid #cebfaa;
    outline-offset: -0.3rem;
    padding-left: 12.5rem;
    padding-bottom: 7rem;

    &:nth-child(1) {
        background: #fef5e8;
    }
    &:nth-child(2) {
        background: #fff;
    }
    &:nth-child(3) {
        background: #edece7;
    }
    &:nth-child(4) {
        background: url(/images/con14_06.webp) no-repeat center/cover;
        .item__img {
            border: none;
        }
    }
    &:not(:last-child) {
        margin-bottom: 2rem;
    }

    .item__img {
        width: 28.7rem;
        aspect-ratio: 1;
        border-radius: 99rem;
        right: 4rem;
        top: 3rem;
        box-sizing: border-box;
        border: 1px solid #cebfaa;
    }
    .number__img {
        top: 5rem;
        left: 5rem;
    }
    .con14__video {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        overflow: hidden;
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.con14_03,
.con14_03a,
.con14_03b,
.con14_03c {
    bottom: 0rem;
}

/* ---- con15 ---- */
.con15 {
    background: url(/images/con15_bg.webp) no-repeat center/cover;
    height: 95rem;
    box-sizing: border-box;
    padding-top: 20rem;
}
.con15__container {
    margin-left: 20rem;
}
@media (width >= 600px) {
    .con15 .con15__swiper {
        width: 38.7rem;
        height: 43.9rem;
        overflow: visible;
        left: 74rem;
        top: 28rem;

        .swiper-slide {
            display: flex;
            filter: opacity(0);

            transition:
                filter 0.5s,
                transform 0.5s;
        }
        .swiper-slide-active {
            filter: opacity(1);
        }
        .swiper-slide-prev {
            transform: translateY(55%);
            filter: opacity(0.5);
        }
        .swiper-slide:has(+ .swiper-slide-prev) {
            transform: translateY(110%);
        }
        .swiper-slide-next {
            transform: translateY(-55%);
            filter: opacity(0.5);
        }
        .swiper-slide-next + .swiper-slide {
            transform: translateY(-100%);
        }
    }
}

/* ---- con16 ---- */
.con16 {
    padding-top: 15rem;
    padding-bottom: 13.5rem;
}
.con16_06 {
    top: 45.3rem;
}
.con16 .con16__swiper {
    overflow: visible;
    margin-top: 10rem;
}
.con16__swiper .swiper-slide {
    box-sizing: border-box;
    border: 0.5rem solid #fff;
    outline: 1px solid #d4c7b5;
    transition: transform 0.5s;
}
@media (width>=600px) {
    .con16__swiper .swiper-slide:has(~ .swiper-slide-prev) {
        transform: translateY(-10rem);
    }
    .con16__swiper .swiper-slide-next ~ .swiper-slide {
        transform: translateY(-10rem);
    }
}
.con16__swiper .swiper__bg {
    top: -5rem;
}

.con16 .con16__swiper-2 {
    max-width: 126rem;
    height: 10.4rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    .swiper-slide {
        width: 40rem;
    }
    .swiper__btn--next {
        right: 27rem;
        img {
            transform: scaleX(-1);
        }
    }
    .swiper__btn--prev {
        left: 27rem;
    }
}
.con16_05 {
    margin-top: -1rem;
    margin-bottom: -1rem;
}

/* ---- con17 ---- */
.con17 {
    background: url(/images/con17_bg.webp) no-repeat center/cover;
    padding: 10rem 0;
}

.con17 .benefit__wrap .sticker {
    top: 15rem;
}
.con17 .benefit__bg {
    top: 6rem;
}
.con17 [class^="benefit__item"] {
    .base {
        opacity: 1;
        transition: opacity 0.3s;
    }
    .overlay {
        opacity: 0;
        transition: opacity 0.3s;
    }
    &.active {
        .base {
            opacity: 0;
        }
        .overlay {
            opacity: 1;
        }
    }
}

.con17 .process {
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
}
.con17 .process__deco {
    bottom: 6rem;
    right: 12rem;
}
.con17__bottom__wrap {
    max-width: 170rem;
    padding: 10rem 0;
    outline: 1px solid #b1aba2;
    outline-offset: -1rem;
}

/* ----- con19 ----- */
.con19 {
    background: #001325;
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.map__container {
    --map-border-radius: 2.4rem;
    height: 66rem;
}
.map__list__wrap {
    border-radius: var(--map-border-radius) 0 0 var(--map-border-radius);
    overflow: hidden;
    border: 2px solid #cebfaa;
    border-right: 0;
    box-sizing: border-box;
}
.map__list {
    overflow-y: scroll;
    min-width: 42.5rem;
}
.map__list__wrap .map__item {
    padding-left: 10rem;
    padding-bottom: 2.4rem;
    padding-top: 2.4rem;
    padding-right: 3rem;
    width: 41rem;
    box-sizing: border-box;
    border-color: #f0f0f0;
}
#map {
    width: 127rem;
    background: #ddd;
    border-radius: 0 var(--map-border-radius) var(--map-border-radius) 0;
    border: 2px solid #cebfaa;
    border-left: 0;
    box-sizing: border-box;
}
.search__wrap {
    top: -3.5rem;
    width: 84.5rem;

    height: 7rem;
    background: #fff;
    border-radius: 99rem;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border: 2px solid #cebfaa;
}
.search__wrap .map__search {
    width: 100%;
    height: 100%;
    padding-left: 3rem;
    padding-right: 8rem;
    background: transparent;
}
.map__search--button {
    right: 3rem;
}
.map__modal {
    width: 93rem;
    height: 44rem;
    border-radius: var(--map-border-radius);
    padding: 6rem;
}
.map__modal__wrap {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2010;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    &.active {
        opacity: 1;
        visibility: visible;
    }

    .modal__img {
        width: 37rem;
        height: 100%;
    }

    .modal__line {
        background: #ddd;
    }
    .modal__close {
        top: 4rem;
        right: 4rem;
    }
}
/* ---- con20 ---- */
.con20 {
    background: url(/images/con20_bg.webp) no-repeat center/cover;
    height: 109rem;
    box-sizing: border-box;
}
.con20__container {
    gap: 20rem;
}

/* ---- con21 ---- */
.con21 {
    background: url(/images/con21_bg.webp) no-repeat center/cover;
    height: 98.5rem;
}
.con21__container {
    max-width: 171rem;
}
.con21 .text__wrap {
    /* padding-top: 20rem;
    padding-left: 8rem; */
    margin-top: 20rem;
    margin-left: 8rem;
}
.con21 label {
    min-width: 10rem;
}
.con21 .form__wrap {
    --formH: 4rem;
    background: url(/images/con21_04.webp) no-repeat center/cover;
    padding: 0 9rem;
    max-width: 77rem;
    width: 100%;
    box-sizing: border-box;
    margin-right: 1rem;
}
.con21 .req {
    white-space: nowrap;

    &::before {
        content: "*";
        display: inline-block;
        color: #c7000c;
        margin-right: 1rem;
    }
}

.con21 .column {
    padding: 1rem 3rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    &:not(:last-child) {
        margin-bottom: 1rem;
    }
}
.con21 input {
    height: var(--formH);
}
.con21 textarea {
    min-height: 4rem;
    height: var(--formH);
    max-height: 12rem;
    padding: 0.8rem;
    resize: vertical;
}
.con21 select {
    width: 100%;
    max-width: 37rem;
    margin-left: auto;
    height: var(--formH);
    outline: none;
    background-color: #f0f0f0;
    border-radius: 0.8rem;
    appearance: none;
    box-sizing: border-box;
    border: 1px solid transparent;

    transition: all 0.2s;

    &:hover {
        border: 1px solid #ddd;
    }
    &:focus {
        border: 1px solid var(--primary);
    }
}
.con21 .chevron {
    right: 4rem;
}

.con21 .radio__wrap {
    max-width: 37rem;
    margin-left: auto;
}

.con21 {
    textarea,
    input {
        --input-border: #000;
        width: 100%;
        max-width: 37rem;
        margin-left: auto;
        box-sizing: border-box;
        border: 1px solid transparent;
        transition: border 0.2s;

        &:hover {
            border-bottom: 1px solid #ddd;
        }
        &:focus,
        &:focus-visible {
            border-bottom: 1px solid color-mix(var(--primary), #fff 50%);
        }
    }
}

.con21 .custom__radio {
    height: var(--formH);
    border-radius: 0.8rem;
    background: #f0f0f0;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: all 0.2s;
    &:hover {
        border: 1px solid #ddd;
    }
    &.checked {
        background: var(--primary);
        color: #fff;
    }
}