@charset "utf-8";

/* ==========================================================================
   webOS Hub Showcase — Autumn Canton Fair 2026
   모바일 우선(mobile first). 750px 이하가 모바일, 751px 이상이 PC.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 변수
   -------------------------------------------------------------------------- */
:root {
    /* 컬러 */
    --red: #c50036;       /* 시안 지정 */
    --red-dark: #a5002d;  /* --red 의 hover 상태 */
    --black: #000000;
    --white: #ffffff;
    --ink: #1a1a1a;
    --cream: #feecc8;        /* 히어로 상단 안내 문구 */
    --cream-light: #fef1d7;  /* LOCATION 카드 중국어 주소 */

    --card-dark: #0a0a0a;
    --card-border: #777777;   /* 카드 테두리 · 카드 안쪽 구분선 · SNS 아이콘 테두리 */

    --text-mute: #8e8e8e;      /* 어두운 배경 위 보조 텍스트 */
    --text-mute-ink: #6b6b6b;  /* 밝은 배경 위 보조 텍스트 */
    --text-dim: #4a4a4a;       /* 저작권 등 최하위 텍스트 */

    /* 레이아웃 — 모바일 여백은 750px 시안 값을 vw 로 환산했다 (값 / 7.5)
       375px 화면에서 정확히 절반이 되고, 뷰포트는 375px 아래로 내려가지 않는다 */
    --container: 790px;
    --gutter: 5.3333vw;    /* 시안 40px */
    --card-gap: 5.3333vw;  /* 시안 40px */
    --card-pad: 4vw;       /* 상단·좌우 — 시안 30px */
    --card-pad-b: 9vw;     /* 하단만 크게 — 67.5px */
    --radius: 4vw;    /* 시안 20px */

    /* 타이포 */
    --font: 'Paperozi', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
            'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif;

    /* 본문 작은 글씨용 */
    --font-sm: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif;

    /* 중국어 간체 주소 표기용 */
    --font-cjk: 'Noto Sans SC', 'Noto Sans CJK SC',
                'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* --------------------------------------------------------------------------
   2. 기본
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
}

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* z-index 는 주지 않는다. 값을 주면 히어로 안의 고정 버튼(.cta__inner)과 같은 층이 되어,
   문서 순서상 뒤에 있는 main 이 버튼을 덮어버린다.
   페이지 배경은 body 의 var(--black) 하나로 충분하다. */
main,
.footer {
    position: relative;
    /* background: var(--black); */
}

/* 섹션 사이 간격 — 카드가 연달아 붙는 구조라 gap 으로만 제어한다 */
.section + .section { margin-top: var(--card-gap); }
main > .section:first-child { margin-top: 0; }

/* Pretendard 를 쓰는 문구 (시안 지정)
   제목·날짜·버튼은 Paperozi, 중국어 주소는 Noto Sans SC 를 그대로 유지한다. */
.hero__hours,           /* 10:00 - 16:00 (By Appointment Only) */
.label,                 /* VENUE / LOCATION / CONTACT */
.venue__room,           /* Renewal Studio (4F) */
.venue__desc,           /* As a premier venue for corporate events... */
.location__address-en,  /* Area C, Canton Fair Complex, 681 Fengpu Zhong Rd... */
.contact__sub,          /* Experience webOS Hub in person. */
.contact__desc,         /* To schedule a private demo or meeting... */
.contact__mail,         /* weboshubbiz@lge.com */
.contact__note,         /* By Appointment Only */
.footer__copy {         /* Copyright (c)2026 LG Electronics Inc... */
    font-family: var(--font-sm);
}

/* --------------------------------------------------------------------------
   3. 공통 요소
   -------------------------------------------------------------------------- */

/* 3-1. 섹션 라벨 (VENUE / LOCATION / CONTACT) */
.label {
    font-size: clamp(9px, 2.4vw, 18px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .1em;   /* TODO: 시안 자간 값 확인 */
}
.label--red { color: var(--red); }
.label--white { color: var(--white); }

/* 카드 맨 위에 라벨이 오는 경우(LOCATION · CONTACT) 위 여백을 준다.
   em 단위라 라벨 글자 크기를 따라 함께 움직인다.
   VENUE 는 이미지가 먼저 오므로 대상이 아니다. */
.location > .label:first-child,
.contact__left > .label:first-child {
    margin-top: 1em;
}

/* 3-1-1. 모바일에서만 줄을 바꾼다. PC 에서는 한 줄로 이어진다.
   태그 앞에 공백을 두어야 PC 에서 앞뒤 글자가 붙지 않는다. */
.br-mo { display: inline; }

/* 3-2. 구분선 */
.rule {
    width: 3.7333vw;        /* 시안 28px */
    height: .2667vw;        /* 시안 2px */
    margin: 2.1333vw 0 2.4vw;
}
.rule--red { background: var(--red); }

/* 3-3. 카드 */
.card {
    border-radius: var(--radius);
    padding: var(--card-pad) var(--card-pad) var(--card-pad-b);
    overflow: hidden;
}
.card--white  { background: var(--white); color: var(--ink); }
.card--red    { background: var(--red);   color: var(--white); }
.card--outline {
    background: var(--card-dark);
    border: 1px solid var(--card-border);
    color: var(--white);
}

/* 3-4. 버튼 */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11.8667vw;   /* 시안 89px */
    padding: 0 2vw;
    font-size: clamp(10px, 2.6667vw, 20px);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: #e8e8e8; }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-dark); }

.btn--block {
    width: 100%;
    border-radius: 8px;
}

/* 좌우로 붙는 버튼 한 쌍 */
.btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    overflow: hidden;
}

/* 3-5. 상단 고정 CTA
   .cta        자리표시자. 고정될 때 JS 가 height 를 넣어 레이아웃이 튀지 않게 한다
   .cta__inner 실제로 화면에 고정되는 요소 */
.cta { margin-top: 10vw; }

.cta.is-fixed .cta__inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 10px var(--gutter);
    background: rgba(0, 0, 0, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    animation: cta-drop .22s ease;
}

/* backdrop-filter 는 지원 브라우저에서만 적용한다 */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .cta.is-fixed .cta__inner {
        background: rgba(0, 0, 0, .78);
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
    }
}

.cta.is-fixed .btn-group {
    max-width: var(--container);
    margin: 0 auto;
}

@keyframes cta-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* 고정된 바에 가려지지 않도록 앵커 이동 지점에 여백을 준다 */
.section { scroll-margin-top: 88px; }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
/* overflow: hidden 을 쓰지 않는다.
   모바일 브라우저는 이 속성이 걸린 부모 안의 position: fixed 요소를
   부모 영역 밖으로 못 나가게 잘라내는 경우가 있다 (상단 고정 버튼이 사라짐). */
.hero {
    position: relative;
    padding: 16.9333vw 0 11.7333vw;   /* 시안 위 127px / 아래 88px */
}

.hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* 고정 상태의 버튼은 .hero__inner 가 만든 층 안에 갇히지 않도록
   .hero__inner 자체를 main 보다 위로 올려둔다 (main 은 z-index 없음). */

/* PC·모바일 동일 크기 */
.hero__eyebrow {
    font-size: clamp(11px, 2.9333vw, 22px);
    font-weight: 400;
    line-height: clamp(20px, 5.3333vw, 40px);   /* 시안 40px */
    color: var(--cream);
}
/* "Autumn Canton Fair 2026" 만 크고 굵게 */
.hero__eyebrow strong {
    font-size: clamp(14px, 3.7333vw, 28px);
    font-weight: 700;
}

/* 모바일: 750px 에서 74px, 화면이 좁아지면 비율대로 줄다가 375px 값(37px)에서 멈춘다
   74 / 750 = 9.8667vw  →  375px 에서 37px */
.hero__title {
    margin-top: 4.1333vw;   /* 시안 31px */
    font-size: clamp(37px, 9.8667vw, 74px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: clamp(36px, 9.6vw, 72px);   /* 시안 72px */
    text-wrap: balance;
}

/* ---- 히어로 기하학 도형 ----
   PC/모바일 각각의 이미지를 <picture> 로 바꿔 끼운다. */
.hero__graphic {
    margin: 9.8667vw auto 0;                  /* 시안 74px */
    width: clamp(235px, 62.6667vw, 470px);    /* 시안 470px */
}
.hero__graphic img {
    width: 100%;
    height: auto;
}

.hero__info { margin-top: 10vw; }

.hero__date,
.hero__venue {
    font-size: clamp(16px, 4.2667vw, 32px);
    font-weight: 500;
    line-height: 1.35;
}
.hero__hours {
    margin-top: 1vw;
    font-size: clamp(12px, 3.2vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    color: #777777;
}



/* --------------------------------------------------------------------------
   5. VENUE
   -------------------------------------------------------------------------- */
/* 모바일: 이미지 → 텍스트 순서. PC 에서는 좌우 2단으로 뒤집는다 */
.venue {
    display: flex;
    flex-direction: column;
}

.venue__figure {
    order: 1;
    margin: 0;
    aspect-ratio: 610 / 336;   /* 시안 610 x 336 */
    border-radius: 12px;
    overflow: hidden;
}
.venue__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 비율이 다른 원본을 잘라서 채운다 */
    object-position: bottom;   /* 아래쪽을 기준으로 맞춰 위쪽이 잘리게 한다 */
}

.venue__body {
    order: 2;
    margin-top: 5vw;
}

/* 카드 제목 3종 — The Westin Pazhou / Directly connected to... / Plan Your Visit.
   셋이 항상 같은 값을 갖도록 한 규칙으로 묶는다 */
.venue__name,
.location__title,
.contact__title {
    font-size: clamp(20px, 5.3333vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;   /* TODO: 시안 자간 값 확인 */
}

.venue__name { margin-top: 3.2vw; }   /* 시안 24px */

.venue__room {
    margin-top: 2px;
    font-size: clamp(12px, 3.2vw, 24px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--red);
}

.venue__desc {
    font-size: clamp(11px, 2.9333vw, 22px);
    font-weight: 300;
    line-height: clamp(13px, 3.4667vw, 26px);   /* 시안 26px */
    color: var(--black);
}

/* --------------------------------------------------------------------------
   6. LOCATION
   -------------------------------------------------------------------------- */
.location__title { margin-top: 3.4667vw; }   /* 시안 26px */

.location__map {
    margin: 5.6vw 0 5.2vw;     /* 시안 42px / 39px */
    aspect-ratio: 610 / 336;   /* 시안 610 x 336 — VENUE 썸네일과 동일 */
    border-radius: 10px;
    overflow: hidden;
    background: var(--ink);
}
.location__map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location__address { text-align: center; }

.location__address-name {
    font-size: clamp(12px, 3.2vw, 24px);
    font-weight: 700;
    line-height: 1.35;
}
.location__address-cn {
    margin-top: 1vw;
    font-family: var(--font-cjk);
    font-size: clamp(12px, 3.2vw, 24px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--cream-light);
}
/* 핀을 목록의 점처럼 쓴다.
   flex 로 핀과 글자를 갈라 두면, 줄이 넘어갈 때 둘째 줄이 핀 아래가 아니라
   첫 줄 글자 시작점에 맞춰 들여써진다.
   width: fit-content + margin auto → 글자 너비만큼만 차지하고 가운데 정렬된다. */
.location__address-en {
    display: flex;
    align-items: baseline;
    gap: .35em;
    width: fit-content;
    margin: 2vw auto 0;
    text-align: left;
    font-size: clamp(9.5px, 2.5333vw, 19px);   /* 시안 19px */
    font-weight: 400;
    line-height: 1.4;
}

/* 주소 앞 위치 핀 — .location__address-en 의 flex 항목 */
.pin {
    flex: none;
    /* PC 비율(글자 14px : 아이콘 16x18)을 모바일 글자 19px 에 맞춰 환산 */
    width: clamp(10.86px, 2.8952vw, 21.71px);
    height: clamp(12.21px, 3.2571vw, 24.43px);
    background: url('../images/icon-pin.png?v=20261013') no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   7. CONTACT
   -------------------------------------------------------------------------- */
.contact__title { margin-top: 3.4667vw; }   /* 시안 26px */
.contact__title .dot { color: var(--red); }

.contact__sub {
    margin-top: 3vw;
    font-size: clamp(11px, 2.9333vw, 22px);
    font-weight: 500;
    line-height: 1.5;
    color: #777777;
}

.contact__note {
    margin-top: 3vw;
    font-size: clamp(10px, 2.6667vw, 20px);
    font-weight: 500;
    line-height: 1.4;
}

/* 모바일에서는 좌우 영역 사이를 가로선으로 나눈다 */
.contact__right {
    margin-top: 7vw;
    padding-top: 3vw;
    border-top: 1px solid var(--card-border);
}

.contact__desc {
    font-size: clamp(11px, 2.9333vw, 22px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--white);
}

.contact__mail {
    display: inline-flex;
    align-items: center;
    margin-top: 7.4667vw;   /* 시안 56px */
    font-size: clamp(11px, 2.9333vw, 22px);
    line-height: 1.4;
    color: var(--red);
}
.contact__mail:hover { text-decoration: underline; }

.contact__mail-icon {
    flex: none;
    /* PC 비율(글자 16px : 아이콘 28x20)을 모바일 글자 22px 에 맞춰 환산 */
    width: clamp(19.25px, 5.1333vw, 38.5px);
    height: clamp(13.75px, 3.6667vw, 27.5px);
    margin-right: 7px;
    background: url('../images/icon-mail.svg?v=20261013') no-repeat center / contain;
}

/* CONTACT US 버튼은 히어로 버튼과 크기가 다르다 */
.contact .btn--block {
    margin-top: 7vw;
    font-size: clamp(13px, 3.4667vw, 26px);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.footer {
    padding: 5.7333vw 0 8.6667vw;   /* 시안 위 43px / 아래 65px */
    text-align: center;
}
/* 푸터는 콘텐츠 폭 제한 없이 화면 전체를 쓴다.
   좌우 여백(--gutter)은 좁은 화면에서 글자가 붙지 않도록 유지한다. */
.footer .container { max-width: none; }

.footer__more {
    font-size: clamp(11px, 2.9333vw, 22px);
    font-weight: 500;
    line-height: 1.5;
}
.footer__more a { color: var(--red); }
.footer__more a:hover { text-decoration: underline; }

.footer__sns {
    display: flex;
    justify-content: center;
    gap: 6.1333vw;       /* 시안 46px */
    margin-top: 5.6vw;   /* 시안 42px */
}
.footer__sns li { position: relative; }

.footer__sns a,
.footer__sns .sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.2667vw;   /* 시안 77px */
    height: 10.2667vw;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    transition: border-color .2s ease, background-color .2s ease;
}
.footer__sns a:hover,
.footer__sns .sns-btn:hover { border-color: var(--white); }

/* 아이콘마다 원본 비율이 달라 정사각으로 강제하지 않는다.
   높이가 비슷하게 보이도록 너비만 개별 지정한다. */
/* 원이 PC 40px → 모바일 77px 로 1.925배 커지므로 아이콘도 같은 배율로 키운다 */
.sns-ico { width: auto; height: auto; }
.sns-ico--globe    { width: clamp(16.36px, 4.3633vw, 32.73px); }   /* PC 17px */
.sns-ico--linkedin { width: clamp(15.4px, 4.1067vw, 30.8px); }   /* PC 16px */
.sns-ico--wechat   { width: clamp(17.32px, 4.6200vw, 34.65px); }   /* PC 18px */

/* QR 툴팁이 열려 있는 동안 버튼을 눌린 상태로 보여준다 */
.footer__sns .sns-btn[aria-expanded="true"] {
    border-color: var(--white);
    background: rgba(255, 255, 255, .14);
}

/* ---- WeChat QR 툴팁 ---- */
.qr-pop {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 176px;
    padding: 8px;
    background: var(--white);
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    animation: qr-in .16s ease;
}
.qr-pop img {
    width: 100%;
    height: auto;
}

/* 툴팁 아래쪽 꼬리 */
.qr-pop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    background: var(--white);
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    transform: rotate(45deg);
}

@keyframes qr-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.footer__logo { margin-top: 10.6667vw; }   /* 시안 80px */
.footer__logo img {
    width: 204px;
    margin: 0 auto;
}

.footer__copy {
    margin-top: 10.1333vw;   /* 시안 76px */
    font-size: clamp(9px, 2.4vw, 18px);
    line-height: 1.5;
    color: #434343;
}

/* ==========================================================================
   9. PC (751px 이상 — 750px 이하는 모바일)
   ========================================================================== */
@media (min-width: 751px) {

    /* 모바일에서 vw 로 준 여백은 PC 에서 모두 px 로 되돌린다.
       그러지 않으면 화면이 넓어질수록 여백이 계속 커진다. */
    :root {
        --gutter: 24px;
        --radius: 30px;
        --card-gap: 20px;
        --card-pad: 40px;
        --card-pad-b: 40px;
    }

    .rule {
        width: 28px;
        height: 2px;
        margin: 14px 0 16px;
    }

    .btn {
        min-height: 56px;
        padding: 0 16px;
        font-size: 16px;
    }

    .label { font-size: 14px; }

    /* ---- HERO ---- */
    .hero { padding: 100px 0 70px; }


    .hero__title {
        margin-top: 8px;
        font-size: 66px;
    }

    /* 시안의 그래픽 영역이 콘텐츠 폭(790px)과 같아 원본 크기 그대로 쓴다 */
    .hero__graphic {
        margin-top: 30px;
        width: 100%;
    }

    .hero__info { margin-top: 40px; }


    .hero__date,
    .hero__venue { font-size: 26px; }

    .hero__hours {
        margin-top: 8px;
        font-size: 19px;
    }

    .hero .cta { margin-top: 36px; }

    /* ---- VENUE : 텍스트 좌 / 이미지 우 ---- */
    .venue {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        align-items: center;
        gap: 40px;
    }

    .venue__body { order: 1; margin-top: 0; }
    .venue__name { margin-top: 16px; }
    /* PC 는 시안대로 원본 비율을 그대로 쓴다 */
    .venue__figure {
        order: 2;
        aspect-ratio: auto;
    }
    .venue__figure img { height: auto; }

    .venue__name,
    .location__title,
    .contact__title { font-size: 37px; }

    .venue__room { font-size: 22px; }
    .venue__desc { font-size: 14px; }

    /* ---- LOCATION ---- */
    .location__title { margin-top: 16px; }
    /* PC 는 원본 비율 유지 */
    .location__map {
        margin: 30px 0 26px;
        aspect-ratio: auto;
    }
    .location__map img { height: auto; }
    .location__address-cn { margin-top: 4px; }
    .location__address-en { margin: 10px auto 0; }

    .location__address-name { font-size: 17px; }
    .br-mo { display: none; }

    .location__address-cn { font-size: 16px; }
    .location__address-en { font-size: 14px; }

    /* ---- CONTACT : 좌우 2단 + 세로 구분선 ---- */
    /* 좌우 칸을 같은 너비로 나누고, 구분선 양옆 간격은 각 칸의 패딩으로 만든다.
       gap 으로 벌리면 오른쪽에만 패딩이 있어 콘텐츠 너비가 30px 어긋난다. */
    .contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .contact__left {
        display: flex;
        flex-direction: column;
        padding-right: 30px;   /* 오른쪽 칸의 padding-left 와 동일 */
    }

    .contact__title { margin-top: 20px; }
    .contact__sub { margin-top: 10px; }
    .contact__mail { margin-top: 40px; }

    /* "By Appointment Only" 를 왼쪽 칸 맨 아래로 내린다 */
    .contact__note {
        margin-top: auto;
        padding-top: 24px;
        font-size: 14px;
    }

    .contact__right {
        margin-top: 0;
        padding-top: 6px;
        padding-left: 30px;
        padding-bottom: 6px;
        border-top: 0;
        border-left: 1px solid var(--card-border);
    }

    .contact__sub { font-size: 14px; }
    .contact__desc { font-size: 16px; }
    .contact__mail { font-size: 16px; }

    /* 아이콘은 PC 에서 시안 원래 크기로 고정 */
    .contact__mail-icon {
        width: 28px;
        height: 20px;
    }
    .pin {
        width: 16px;
        height: 18px;
    }
    .contact .btn--block {
        margin-top: 20px;
        width: 100%;
        min-height: 52px;   /* .btn 의 min-height: 56px 을 눌러야 52px 이 적용된다 */
        height: 52px;
        border-radius: 15px;
        font-size: 14px;
    }

    /* ---- FOOTER ---- */
    .footer { padding: 56px 0 40px; }
    .footer__more { font-size: 16px; }

    .footer__sns {
        gap: 24px;
        margin-top: 22px;
    }
    .footer__sns a,
    .footer__sns .sns-btn {
        width: 40px;
        height: 40px;
    }
    .sns-ico--globe    { width: 17px; }
    .sns-ico--linkedin { width: 16px; }
    .sns-ico--wechat   { width: 18px; }
    .qr-pop { width: 200px; }
    .footer__logo { margin-top: 90px; }
    .footer__logo img { width: 204px; }
    .footer__copy {
        margin-top: 16px;
        font-size: 16px;
    }
}