@charset "utf-8";

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
:after, :before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

:root {
	--inner: 1600;
	--color-primary: #2c2c2c;
	--color-secondary: #1c1c1c;
	--color-muted: #676767;
	--color-label: #bbbbbb;
	--color-footer: #1c1c1c;
	/* sub content 1494 + gutter 30*2 / main content 1720(plan2_mod2) + gutter 30*2 */
	--contain-width: 1554px;
	--contain-width-main: 1874px;
	--header-height: clamp(60px, calc(100 / var(--inner) * 100vw), 100px);
	--header-safe-top: clamp(100px, 14vh, 120px);
	--hero-ratio: 954 / 1920;
	--hero-bottom-space: clamp(60px, 5.2vw, 100px);

	/* font-size (desktop max = XX) */
	--font-size-12: clamp(11px, calc(12 / var(--inner) * 100vw), 12px);
	--font-size-14: clamp(13px, calc(14 / var(--inner) * 100vw), 14px);
	--font-size-16: clamp(14px, calc(16 / var(--inner) * 100vw), 16px);
	--font-size-18: clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
	--font-size-20: clamp(16px, calc(20 / var(--inner) * 100vw), 20px);
	--font-size-22: clamp(17px, calc(22 / var(--inner) * 100vw), 22px);
	--font-size-24: clamp(18px, calc(24 / var(--inner) * 100vw), 24px);
	--font-size-26: clamp(18px, calc(26 / var(--inner) * 100vw), 26px);
	--font-size-28: clamp(20px, calc(28 / var(--inner) * 100vw), 28px);
	--font-size-30: clamp(22px, calc(30 / var(--inner) * 100vw), 30px);
	--font-size-32: clamp(22px, calc(32 / var(--inner) * 100vw), 32px);
	--font-size-36: clamp(24px, calc(36 / var(--inner) * 100vw), 36px);
	--font-size-40: clamp(26px, calc(40 / var(--inner) * 100vw), 40px);
	--font-size-48: clamp(28px, calc(48 / var(--inner) * 100vw), 48px);
	--font-size-56: clamp(32px, calc(56 / var(--inner) * 100vw), 56px);
	--font-size-64: clamp(32px, calc(64 / var(--inner) * 100vw), 64px);

	/* space (desktop max = XX) · padding / margin / gap */
	--space-4: 4px;
	--space-5: 5px;
	--space-6: 6px;
	--space-8: clamp(5px, calc(8 / var(--inner) * 100vw), 8px);
	--space-10: clamp(6px, calc(10 / var(--inner) * 100vw), 10px);
	--space-12: clamp(6px, calc(12 / var(--inner) * 100vw), 12px);
	--space-14: clamp(7px, calc(14 / var(--inner) * 100vw), 14px);
	--space-16: clamp(8px, calc(16 / var(--inner) * 100vw), 16px);
	--space-20: clamp(10px, calc(20 / var(--inner) * 100vw), 20px);
	--space-24: clamp(12px, calc(24 / var(--inner) * 100vw), 24px);
	--space-26: clamp(13px, calc(26 / var(--inner) * 100vw), 26px);
	--space-28: clamp(14px, calc(28 / var(--inner) * 100vw), 28px);
	--space-30: clamp(15px, calc(30 / var(--inner) * 100vw), 30px);
	--space-32: clamp(16px, calc(32 / var(--inner) * 100vw), 32px);
	--space-34: clamp(17px, calc(34 / var(--inner) * 100vw), 34px);
	--space-40: clamp(20px, calc(40 / var(--inner) * 100vw), 40px);
	--space-44: clamp(22px, calc(44 / var(--inner) * 100vw), 44px);
	--space-48: clamp(24px, calc(48 / var(--inner) * 100vw), 48px);
	--space-50: clamp(25px, calc(50 / var(--inner) * 100vw), 50px);
	--space-52: clamp(26px, calc(52 / var(--inner) * 100vw), 52px);
	--space-56: clamp(28px, calc(56 / var(--inner) * 100vw), 56px);
	--space-60: clamp(30px, calc(60 / var(--inner) * 100vw), 60px);
	--space-64: clamp(32px, calc(64 / var(--inner) * 100vw), 64px);
	--space-70: clamp(35px, calc(70 / var(--inner) * 100vw), 70px);
	--space-80: clamp(40px, calc(80 / var(--inner) * 100vw), 80px);
	--space-100: clamp(50px, calc(100 / var(--inner) * 100vw), 100px);
	--space-120: clamp(50px, calc(120 / var(--inner) * 100vw), 120px);
	--space-140: clamp(50px, calc(140 / var(--inner) * 100vw), 140px);

	--container-space: var(--space-30);
}

body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, figure, figcaption {margin:0;padding:0;}
body {font-family:'Pretendard',sans-serif;font-size:var(--font-size-20);line-height:1.7em;color:var(--color-muted);word-break:keep-all;-webkit-text-size-adjust:none;}
input, textarea, select, button, table {font-family:inherit;font-size:inherit;line-height:inherit;}
img {border:0;max-width:100%;vertical-align:top;}
ul, ol {list-style:none;}
fieldset {border:none;}
fieldset legend {overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-999em;}
button {cursor:pointer;}
header, hgroup, article, nav, footer, figure, figcaption, canvas, section, time {display:block;}
hr {clear:both;display:none;}
a {color:inherit;text-decoration:none;transition:all 0.2s ease-in-out;}
.blind {overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);white-space:nowrap;}
.text-primary {color:var(--color-primary);}
.text-secondary {color:var(--color-secondary);}
.color-primary {color:var(--color-primary);}

#skipToContent a {position:absolute;top:-9999px;left:0;z-index:9999;padding:var(--space-10) var(--space-16);background:var(--color-secondary);color:#fff;}
#skipToContent a:focus {top:0;}
[id^="section-"] {scroll-margin-top:120px;}

.contain {max-width:var(--contain-width);margin:0 auto;padding-left:var(--container-space);padding-right:var(--container-space);}
#main .contain,
.page-home-index .contain {max-width:var(--contain-width-main);}
#contArea {max-width:none;padding:0;margin:0 auto;}
#contArea.wide {max-width:100%;padding:0;}