/* ## Reset
**************************************************/
::after { all: unset; display: revert } *, ::after, ::before { box-sizing: border-box } a, button { cursor: revert } img { max-width: 100% } table { border-collapse: collapse } textarea { white-space: revert } meter { -webkit-appearance: revert; appearance: revert } ::placeholder { color: unset } :where([hidden]) { display: none } :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; line-break: after-white-space; } :where([draggable=true]) { -webkit-user-drag: element } body{scroll-behavior: smooth;}

.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}

img{
	width: 100%;
	height: auto;
}

:root{
/* :: presets */
	--unit-xs: 12px;
	--unit-sm: 20px;
	--unit-md: 50px;
	--unit-lg: clamp(15px, -18.261px + 7.391vw, 100px);
	--unit-xl: clamp(70px, 40.909px + 9.091vw, 150px);

	--widthFull: 100%;
	--widthDefault: 1600px;
	--widthNarrow: 800px;

	--header-space: 80px;
	--inset: 30px;

	--z-top: 1000;
	--z-mid: 100;
	--z-bottom: 0;

	--brand01: #157ab9;
	--brand02: #FFCD00;
	--brand03: #2F38A8;
	--brand04: #201267;
	--pale: #F8F1EB;

	--gray05: hsl(0, 0%, 95%);
	--gray10: hsl(0, 0%, 90%);
	--gray20: hsl(0, 0%, 80%);
	--gray30: hsl(0, 0%, 70%);
	--gray40: hsl(0, 0%, 60%);
	--gray50: hsl(0, 0%, 50%);
	--gray60: hsl(0, 0%, 40%);
	--gray70: hsl(0, 0%, 30%);
	--gray80: hsl(0, 0%, 20%);
	--gray90: hsl(0, 0%, 10%);
}

/* Atomic Styles
**************************************************/
	/* ## alignment */
	.txt-center{text-align: center;}

	.justify-center{justify-content: center;}
	.justify-start{justify-content: start;}
	.justify-space-between{justify-content: space-between;}

	.align-center{align-items: center;}
	.align-end{align-items: end;}
	.place-center{place-content: center;}

	/* ## aspect-ratio */
	.asp-landscape{aspect-ratio: 4 / 3;}
	.asp-portrait{aspect-ratio: 3 / 4;}
	.asp-square{aspect-ratio: 1;}
	.asp-wide {aspect-ratio:16 / 9;}
	.asp-tall {aspect-ratio: 9 / 16;}
	.asp-xwide{aspect-ratio: 16 / 6}


	/* ## dimension */
	.h-100{height: 100%;}
	.h-auto{height: auto;}

	.w-narrow{max-width: 600px;}
	.w-100{width: 100%;}
	.w-auto{width: auto;}

	/* ## display */
	.d-none{display:none}
	.d-block{display:block}
	.d-iblock{display:inline-block}
	.d-inline{display:inline}
	.d-flex{display:flex}
	.d-grid{display:grid}
	.d-contents{display:contents}

	/* ## flex */
	.flexwrap{flex-wrap: wrap;}
	.flexflow-x{flex-direction: row;}
	.flexflow-y{flex-direction: column;}

	/* ## grid */
	.grid-1-1{grid-template-columns: 1fr 1fr;}
	.grid-2-1{grid-template-columns: 2fr 1fr;}
	.grid-1-2{grid-template-columns: 1fr 2fr;}

	/* ## gap */
	.gap-xs{gap: var(--unit-xs)}
	.gap-sm{gap: var(--unit-sm)}
	.gap-md{gap: var(--unit-md)}
	.gap-lg{gap: var(--unit-lg)}
	.gap-xl{gap: var(--unit-xl)}

	/* ## margin */
	.m-inline-auto{margin-inline:auto}
	.m-block-auto{margin-block:auto}

	.mt-0{margin-top: 0 !important;}
	.mb-0{margin-bottom: 0 !important;}

	.mt-xs{margin-top:var(--unit-xs)}
	.mt-sm{margin-top:var(--unit-sm)}
	.mt-md{margin-top:var(--unit-md)}
	.mt-lg{margin-top:var(--unit-lg)}
	.mt-xl{margin-top:var(--unit-xl)}
	.mt-auto{margin-top:auto}

	.mb-xs{margin-bottom:var(--unit-xs)}
	.mb-sm{margin-bottom:var(--unit-sm)}
	.mb-md{margin-bottom:var(--unit-md)}
	.mb-lg{margin-bottom:var(--unit-lg)}
	.mb-xl{margin-bottom:var(--unit-xl)}
	.mb-auto{margin-bottom:auto}

	.ml-xs{margin-left:var(--unit-xs)}
	.ml-sm{margin-left:var(--unit-sm)}
	.ml-md{margin-left:var(--unit-md)}
	.ml-lg{margin-left:var(--unit-lg)}
	.ml-xl{margin-left:var(--unit-xl)}
	.ml-auto{margin-left:auto}

	.mr-xs{margin-right:var(--unit-xs)}
	.mr-sm{margin-right:var(--unit-sm)}
	.mr-md{margin-right:var(--unit-md)}
	.mr-lg{margin-right:var(--unit-lg)}
	.mr-xl{margin-right:var(--unit-xl)}
	.mr-auto{margin-right:auto}

	/* ## object-fit */
	.fit-contain{object-fit: contain;}
	.fit-cover{object-fit: cover;}

	/* ## padding */
	.p-0{padding:0}
	.p-xs{padding:var(--unit-xs)}
	.p-sm{padding:var(--unit-sm)}
	.p-md{padding:var(--unit-md)}
	.p-lg{padding:var(--unit-lg)}
	.p-xl{padding:var(--unit-xl)}

	.pt-0{padding-top:0}
	.pt-xs{padding-top:var(--unit-xs)}
	.pt-sm{padding-top:var(--unit-sm)}
	.pt-md{padding-top:var(--unit-md)}
	.pt-lg{padding-top:var(--unit-lg)}
	.pt-xl{padding-top:var(--unit-xl)}

	.pb-0{padding-bottom:0}
	.pb-xs{padding-bottom:var(--unit-xs)}
	.pb-sm{padding-bottom:var(--unit-sm)}
	.pb-md{padding-bottom:var(--unit-md)}
	.pb-lg{padding-bottom:var(--unit-lg)}
	.pb-xl{padding-bottom:var(--unit-xl)}

	.pl-0{padding-left:0}
	.pl-xs{padding-left:var(--unit-xs)}
	.pl-sm{padding-left:var(--unit-sm)}
	.pl-md{padding-left:var(--unit-md)}
	.pl-lg{padding-left:var(--unit-lg)}
	.pl-xl{padding-left:var(--unit-xl)}

	.pr-0{padding-right:0}
	.pr-xs{padding-right:var(--unit-xs)}
	.pr-sm{padding-right:var(--unit-sm)}
	.pr-md{padding-right:var(--unit-md)}
	.pr-lg{padding-right:var(--unit-lg)}
	.pr-xl{padding-right:var(--unit-xl)}

	.pinline-auto{padding-inline:auto}


	/* ## position */
	.pos-static{position:static}
	.pos-rel{position:relative}
	.pos-abs{position:absolute}
	.pos-fixed{position:fixed}
	.pos-sticky{position:sticky}

	/* ## radius */
	.radius-0{border-radius: 0}
	.radius-xs{border-radius: var(--unit-xs)}
	.radius-sm{border-radius: var(--unit-sm)}
	.radius-md{border-radius: var(--unit-md)}
	.radius-lg{border-radius: var(--unit-lg)}
	.radius-xl{border-radius: var(--unit-xl)}
	.radius-round{border-radius: 50%}

	/* ## text */
	.txt-xl{font-size: 160%;}
	.txt-lg{font-size: 130%;}
	.txt-md{font-size: 115%;}
	.txt-sm{font-size: 80%;}
	.bold{font-weight: bold;}
	.tdn{text-decoration: none;}
	.tdu{text-decoration: underline;}

	/* ## shadows */
	.shadow-sm{box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);}
	.shadow-md{box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);}
	.shadow-lg{box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.2);}

	/* ## z-index */
	.z-top{z-index: var(--z-top);}
	.z-mid{z-index: var(--z-mid);}
	.z-bottom{z-index: var(--z-bottom);}

/* ## @Large SCREENS */
	@media (min-width:1025px){
		/* hiding */
		.hide-desktop{display:none}
		.show-desktop{display:block}
	}

/* ## @Medium SCREENS */
	@media (min-width:811px) and (max-width: 1024px){
		/* hiding */
		.hide-tablet{display:none}
		.show-tablet{display:block}
	}

/* ## @Small SCREENS */
	@media only screen and (max-width: 810px){
		/* hiding */
		.hide-mobile{display:none}
		.show-mobile{display:block}
	}