@charset "utf-8";

@layer components {
	/* layer popup - basic */
.layerPop{position:absolute; z-index:90; overflow:hidden; border:1px solid #353535; border-radius:14rem; z-index:10;}
.layerPop a{display:block;}
.layerPop img{max-width:100%;display: block;}
.layerPop .btn{display:flex; justify-content:space-between; padding:13rem 10rem; background:#353535; text-align:left;}
.layerPop .btn button{display:inline-block; margin-left:15rem; background:none; color:#fff; font-size:13rem;}
.layerPop .btn button:last-child{float:right; margin:0 12rem 0 0;}
@media screen and (max-width:1024px){
	[data-pop-layer="layer"] .popBox{top:0rem !important; left:0rem !important; width:100% !important; height:100%  !important; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	[data-pop-layer="layer"] .popBox h2{height:67rem; box-sizing:border-box; padding-right:80rem !important;}
	[data-pop-layer="layer"] .popBox .popConts{height:calc(100% - 67rem); max-height:inherit;}
	[data-pop-layer="layer"] .popBox .btn_close{right:0rem; box-shadow:none;}

	.layerPop{left:50% !important; transform:translateX(-50%);}
}
@media screen and (max-width:600px){
	.layerPop{top:15vh; width:90% !important; height:auto !important;}
	.layerPop img{max-width:100%; width:100%;}
	.layerPop .btn button{margin-left:10rem; font-size:12rem;}
	.layerPop .btn button:last-child{margin:0 10rem 0 0;}
	
	[data-pop-layer="layer"] .popBox h2{font-size:20rem !important;}
}


    /* --- SKIP LINK --- */
    .ui-skip-link { position: absolute; top: 0; left: 0; z-index: 20; display: inline-block; margin: 0; font-size: 16px; text-align: center; color: #fff; text-decoration: underline; background: #222; border-radius: 2px; }
    .ui-skip-link:not(:focus-visible) { width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; clip: rect(0,0,0,0); clip-path: inset(100%); }
    .ui-skip-link:focus-visible { padding: 0.5lh 1lh; border: 2px solid currentColor; }

    /* --- SITE HEADER --- */
    .ui-site-header { position: -webkit-sticky; position: sticky; inset: 0 0 auto; z-index: 10; background: var(--color-white); border-bottom: var(--border-width-2) solid transparent; }
    [data-scrolled="true"] .ui-site-header { border-bottom-color: var(--color-primary); }
    
    @media (prefers-reduced-motion: no-preference) { 
        .ui-site-header { transition: var(--duration); } 
    }
    
    .ui-site-header * { letter-spacing: -0.04em; }
    .ui-site-header .container { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--spacing-08); height: var(--header-height); }
    .ui-site-header .home-link { justify-self: start; }
    
    .ui-site-header .main-nav { margin-right: clamp(var(--spacing-08), 3.69791667vw, var(--spacing-17)); font: var(--font-body-1); font-weight: var(--font-weight-500); font-family: var(--font-family-gmarket); color: var(--color-neutral-900); }
    
    /* FIX MEDIA QUERY */
    @media (max-width: 1279.98px) { 
        .ui-site-header .main-nav { display: none; } 
    }
    
    .ui-site-header .main-nav .nav-menu-list { display: flex; gap: 4.9ch; }
    /* FIX TRANSLATE */
    .ui-site-header .main-nav .nav-menu-link { display: inline-block; transform: translateY(5%); }

    .ui-site-header .phone-link { display: inline-flex; align-items: center; gap: 0.7em; font: var(--font-body-1-bold); font-family: var(--font-family-gmarket); color: var(--color-cheesecake); background: var(--color-primary); border-radius: var(--radius-full); }
    
    @media (min-width: 768px) { .ui-site-header .phone-link { padding: 0.5em 2.1em; } }
    @media (max-width: 767.98px) { 
        .ui-site-header .phone-link { justify-content: center; width: 1.8em; height: 1.8em; } 
        .ui-site-header .phone-link .phone-link-text { display: none; }
    }
    
    .ui-site-header .phone-link .phone-link-icon { width: 0.9em; height: auto; }
    .ui-site-header .phone-link .phone-link-text { transform: translateY(7%); }

    /* --- TOGGLE NAV BUTTON --- */
    .ui-site-header .toggle-nav-button { position: relative; display: block; width: var(--toggle-nav-button-size); aspect-ratio: 1/1; cursor: pointer; }
    @media (min-width: 1280px) { .ui-site-header .toggle-nav-button { display: none; } }
    .ui-site-header .toggle-nav-button .bar { position: absolute; inset: 0; height: 2px; margin: auto; background: currentcolor; }
    .ui-site-header .toggle-nav-button .bar-1 { transform: translateY(-8px); }
    .ui-site-header .toggle-nav-button .bar-3 { transform: translateY(8px); }

    /* --- TOGGLE NAV POPOVER --- */
    .ui-site-header .toggle-nav { --border-color: #eaeaea; --padding-block: 15px; --padding-inline: 16px; right: 0; left: auto; z-index: 12; width: 100%; max-width: 280px; height: 100vh; height: 100dvh; padding: 0; color: #000; background: #fff; border: 0; }
    @media (min-width: 1280px) { .ui-site-header .toggle-nav { display: none; } }
    .ui-site-header .toggle-nav::backdrop { background: #000; }
    
    .ui-site-header .toggle-nav-header { display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); }
    .ui-site-header .toggle-nav-close { position: relative; display: block; width: var(--toggle-nav-button-size); aspect-ratio: 1/1; margin-right: 16px; background: transparent; border: none; }
    .ui-site-header .toggle-nav-close::before, .ui-site-header .toggle-nav-close::after { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background: currentcolor; content: ""; }
    .ui-site-header .toggle-nav-close::before { transform: translateY(-50%) rotate(45deg); }
    .ui-site-header .toggle-nav-close::after { transform: translateY(-50%) rotate(-45deg); }
    
    .ui-site-header .toggle-nav .nav-menu-list .nav-menu-item { border-top: 1px solid var(--border-color); }
    .ui-site-header .toggle-nav .nav-menu-list .nav-menu-item:last-child { border-bottom: 1px solid var(--border-color); }
    .ui-site-header .toggle-nav .nav-menu-list .nav-menu-link { position: relative; display: block; width: 100%; padding: var(--padding-block) 30px var(--padding-block) var(--padding-inline); font-size: 16px; text-align: left; }

    @media (prefers-reduced-motion: no-preference) { 
        .ui-site-header .toggle-nav { transform: translateX(100%); transition: transform var(--duration) ease-in-out; display: none; }
        .ui-site-header .toggle-nav::backdrop { opacity: 0; transition: opacity var(--duration); }
        .ui-site-header .toggle-nav:popover-open  { transform: translateX(0); display: block; }
        .ui-site-header .toggle-nav:popover-open::backdrop { opacity: 0.6; }
    }

	@supports (-webkit-touch-callout: none) {
		.ui-site-header .toggle-nav.active {display: block;}
	}

    /* --- LOGO & TYPOGRAPHY --- */
    .ui-logo { display: block; width: auto; }
    @media (min-width: 1280px) { .ui-logo { height: 31px; } }
    @media (max-width: 1279.98px) { .ui-logo { height: var(--spacing-10); } }

    .ui-link-home { display: flex; align-items: flex-start; justify-self: start; gap: var(--spacing-06); }
    .ui-link-home ._indicator { margin-top: 3.2%; padding: var(--spacing-06); font: 700 18px / 1 var(--font-family-hanamdaume); color: var(--white); background: var(--gradient); border-radius: var(--radius-2); }
    @media (max-width: 1279.98px) { .ui-link-home ._indicator { display: none; } }
    .ui-link-home .visually-hidden { color: var(--white); background: var(--black); }

    .ui-hr { --border-color: #dfdfdf; height: 8px; background: repeating-linear-gradient(135deg, var(--border-color), var(--border-color) 1px, transparent 1px, transparent 6px) repeat -2px / 8px; border: 0; }
    @media (min-width: 1280px) { .ui-hr { margin-block: 120px; } }
    @media (max-width: 1279.98px) { .ui-hr { margin-block: var(--spacing-17); } }

    .ui-scrollable { overflow: auto; }

    .ui-eyebrow { display: block; font: var(--font-weight-700) var(--font-size) / var(--line-height-hangeul) var(--font-family-hanamdaume); color: var(--color-tertiary); text-transform: uppercase; user-select: none; }
    @media (min-width: 1280px) { .ui-eyebrow { --font-size: 22px; } }
    @media (max-width: 1279.98px) { .ui-eyebrow { --font-size: 16px; } }

    .ui-heading { font: var(--font-weight-700) var(--font-size) / var(--line-height-hangeul) var(--font-family-gmarket); text-wrap: balance; }
    .ui-heading * { letter-spacing: var(--letter-spacing-negative-60); }
    .ui-heading strong { font-weight: inherit; }
    
    @media (min-width: 1280px) { 
        .ui-heading { --font-size: 70px; }
        .ui-heading.ui-heading--large { --font-size: 100px; }
        .ui-eyebrow + .ui-heading { margin-top: 0.24285714em; }
    }
    @media (max-width: 1279.98px) { 
        .ui-heading { --font-size: var(--spacing-12); --line-height-hangeul: 1.2; }
        .ui-eyebrow + .ui-heading { margin-top: var(--spacing-05); }
		.ui-eyebrow + .ui-heading:has(.emphasis) { margin-top: var(--spacing-08); }
    }

    .ui-sub-line { font: var(--font-weight-500) var(--font-size) / var(--line-height-hangeul) var(--font-family-pretendard); text-wrap: balance; color: var(--color-neutral-700); }
    @media (min-width: 1280px) { .ui-sub-line { --font-size: 30px; margin-top: 0.7em; } }
    @media (max-width: 1279.98px) { .ui-sub-line { --font-size: var(--spacing-09); margin-top: var(--spacing-05); } }

    /* --- FORM ELEMENTS --- */
    .ui-tablist { display: flex; justify-content: center; gap: var(--grid-gutter); font: var(--font-weight-500) var(--font-size) / var(--line-height-hangeul) var(--font-family-sans-serif); color: var(--color-white); }
    @media (min-width: 1280px) { .ui-tablist { --font-size: 22px; gap: 20px; } }
    @media (max-width: 1279.98px) { .ui-tablist { --font-size: 16px; margin-top: var(--spacing-heading-content); } }
    
    .ui-tablist ._tab { background: var(--color-neutral-500); }
    .ui-tablist ._tab.is-current { font-weight: var(--font-weight-700); background: var(--color-primary); outline-color: black; }
    .ui-tablist ._tab.is-current::selection { color: var(--color-primary); background: var(--color-white, #fff); }
    @media (min-width: 768px) { .ui-tablist ._tab { padding: 18.3px 39.5px; border-radius: var(--radius-full); } }
    @media (max-width: 767.98px) { .ui-tablist ._tab { padding: 0.25lh 1ch; border-radius: var(--radius-5); } }

    .ui-radio { display: inline-flex; align-items: center; gap: 6px; }
    .ui-radio ._radio { width: 1.375em; height: auto; aspect-ratio: 1/1; }
	@media(max-width:1279px){
		.ui-radio{ font-size: 14px; }
	}

    .ui-checkbox { width: 22px; height: 22px; background: #ccc; border-radius: 50%; -webkit-appearance: none; appearance: none; }
    .ui-checkbox:checked { background: var(--color-primary) url("/images/one-page/ui/checked-white.svg") no-repeat 50% / 77.27272727%; }

    /* --- FOOTER --- */
    .ui-site-footer { color: #fff; background: var(--color-primary); }
    .ui-site-footer * { letter-spacing: var(--letter-spacing-negative-10); }
    .ui-site-footer .top-wrapper { padding-block: 60px 54px; }
    .ui-site-footer .logo { display: block; width: 58px; height: auto; margin-inline: auto; }
    .ui-site-footer .list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1em 51px; margin-top: 35px; }
    @media (min-width: 768px) { .ui-site-footer .list { justify-content: center; } }
	@media(max-width:1279px){ .ui-site-footer{ font-size: 14px; } }
    @media (max-width: 767.98px) { .ui-site-footer .list { flex-direction: column; } }
    
    .ui-site-footer .list .item { display: inline-flex; }
    .ui-site-footer .list .key::after { margin-inline: 0.4ch; content: ":"; }
    .ui-site-footer .list .value--bold { font-weight: var(--font-weight-700); }
    
    .ui-site-footer .bottom-wrapper { padding-block: 25px; font: var(--font-weight-300) 14px / var(--line-height-hangeul) var(--font-family-sans-serif); text-align: center; border-top: var(--border-width-1) solid rgba(255, 255, 255, 0.2); }
    .ui-site-footer .bottom-wrapper .copyright { color: rgba(255, 255, 255, 0.8); }
}