/* html */
html {-ms-overflow-style: var(--scroll); scrollbar-width: var(--scroll);}
body{background: #fff;}

/*! wrap */
body { transition: opacity 0.4s; }
#wrap { min-height: 800rem;position: relative; }

/*! mask */
body.hold { overflow: hidden; }
#overlay-mask { position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(4rem); -webkit-backdrop-filter:blur(4rem); display: none; }

/* layout — PC 우선: 1200 > 1024 > 767 */
.wrap { width: 100%; }
.wrap-large { width: 1600rem; margin: 0 auto; }
.wrap-medium { width: 1300rem; margin: 0 auto; }
.wrap-small { width: 770rem; margin: 0 auto; }
.wrap-tiny { width: 380rem; margin: 0 auto; }
.wrap-order { width: 1180rem; margin: 0 auto; }

@media all and (max-width: 1200px) {
	.wrap-large { width: 100%; padding: 0 20rem; margin: 0; }
	.wrap-medium { width: 100%; padding: 0 20rem; margin: 0; }
}

@media all and (max-width: 1023px) {
	#wrap { padding-top: 50rem; }

	.wrap-order { width: 528rem; margin: 0 auto; }

	.grid4,
	.grid5 { grid-template-columns: repeat(3,minmax(0,1fr)); gap:40rem 15rem; }
}

@media all and (max-width: 767px) {
	.wrap-small { width: 100%; padding: 0 16rem; margin: 0; }

	.wrap-order { width: 100%; margin: 0; }

	.wrap-large,
	.wrap-medium { padding: 0 16rem; }

	.wrap-tiny { width: 100%; }

	.grid3,
	.grid4,
	.grid5 { grid-template-columns: repeat(2,minmax(0,1fr)); gap:40rem 10rem; }
}

/* text-align */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* gap */
.gap { display: block; height: 50rem; }

/* float */
.float-start { float: left; }
.float-end { float: right; }

/* rwd */
.ms-hidden-mobile { }
.ms-visible-desktop { }

/* state */
.ms-is-active { }
.ms-is-disabled { }

/* iframe 16:9 */
.video-embed { position: relative; width: 100%; height: auto; padding-bottom: 56.25%; }
.video-embed iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

/* iframe 9:16 */
.video-shorts-embed { position: relative; width: 100%; max-width: 315rem; margin: 0 auto; padding-bottom: 177.78%; }
.video-shorts-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* grid */
.grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:40rem 20rem }
.grid3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:40rem 20rem }
.grid4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:40rem 20rem }
.grid5 { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:40rem 15rem }

.flex { display: flex; align-items: center; }

/* font-size */
.fz-10 { font-size: 10rem; }
.fz-12 { font-size: 12rem; }
.fz-14 { font-size: 14rem; }
.fz-16 { font-size: 16rem; }
.fz-18 { font-size: 18rem; }
.fz-20 { font-size: 20rem; }

/* margin */
.mi-0 { margin-inline: 0; }
.mbck-0 { margin-block: 0; }
.mt-5 { margin-top: 5rem; }
.ml-5 { margin-left: 5rem; }

.mt-10 { margin-top: 10rem; }
.ml-10 { margin-left: 10rem; }