/* @import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap"); */

/* * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	color: rgba(255, 255, 255, 0.80);
font-size: 16px;
line-height: 150%; 
letter-spacing: -0.32px;
	font-family: "Host Grotesk", sans-serif;
	background-color: #151513;
	overflow-x: hidden;
} */

.container1 {
	width: 100%;
	height: 100%;
}

.wrapper1 {
	padding-inline: 2rem;
	max-width: 1080px;
	width: 100%;
	margin-inline: auto;
}

[data-text-anim] {
  visibility: hidden;
}

.duplicate-char {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

.preloader-mask, 
.preloader-progress-bar,
.preloader-bg {
	position: fixed;
	inset:0;
	/* height: 100vh; */
	height: auto;
	width: 100%;
	pointer-events: none;
}

.mask-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,1);
		pointer-events: none;
		z-index: 9999;
		 -webkit-mask:
		radial-gradient(circle 160px at center 38%, transparent 99%, rgba(0, 0, 0, 1) 100%);
		mask:
		radial-gradient(circle 160px at center 38%, transparent 99%, rgb(0, 0, 0, 1) 100%);
	}
.preloader-mask {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1007;
  pointer-events: none;
  overflow: hidden;
}
/* 구멍 */
.mask-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 240px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  /* border-radius: 88.5px; */
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 200vmax #df600c;
   will-change: transform;
}
.preloader-progress-bar {
	width: 100%;
	height: 100%;
	z-index: 1006;
	/* background-color: #2D2925; */
	background:transparent
}
.preloader-bg {
  	/* background-color: #fff; */
	background:transparent;
	transform-origin: left;
	transform: scaleX(0.2);
}
.preloader-logo {
	display: flex;
	width: 100%;
	height: 100%;
	
	p {
		display:flex;
		margin: auto;
		text-align: center;
		mix-blend-mode: difference;
		font-size: 2.5rem;
		color: #fff;
		font-weight: 500;
		line-height: 100%;
	}
}

button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 16px;
	border-radius: 46px;
	border: none;
	outline: none;
	
	.btn-icon {
		width: 34px;
		height: 34px;
		background: #25201C;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}
}

.visual-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 200px;
	z-index: 10;
	background: linear-gradient(180deg, #25201c 0%, rgba(37, 32, 28, 0) 100%);
}

.visual-header .wrapper {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: start;
	gap: 24px;
	width: 100%;
	margin-top: 24px;
	margin-inline: auto;
}
.focus-text {
	position: absolute;
	color: rgba(255 255 255 / 90%);
	display: block;
	top: 0;
	font-size: 2rem;
	z-index: 15;
	font-weight: 600;
	line-height: 1.2;
	left: 0;
	padding:2rem;
	letter-spacing: -1px;
	/* text-shadow: 1px 1px 0 #885f3a, 2px 2px 0 #533216; */
	text-shadow: 1px 1px 0 #a88667, 2px 2px 0 #130d08
}
.focus-text::after {
	display: none;
	content: "";
	width: calc(100% - 4rem);
	height: calc(100% - 4.2rem);
	background: linear-gradient(270deg, rgba(242, 228, 11, 0.1) 0%, rgba(147, 45, 6, 0.2) 100%);
	position: absolute;
	top: 31px;
	z-index: 10;
	top: 50%;
	transform: translateY(-50%);
}

.v_logo {
    text-align: center;
    margin-top:50px
}
.v_logo img {
    width: 80px;
    height: auto;
}

.tagline {
	font-weight: 700;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	p {
	    max-width: 430px;
        color:rgba(255 255 255 / 90%)
	}
	.divider {
		width: 2px;
		height: 40px;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	}
}

.menu-button {
	margin-left: auto;
}

.hero-section1 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	height: 50vh;
	overflow: hidden;
	border-radius: 1.2rem;
}

.hero-img {
	position: absolute;
	inset: 0;
	z-index: -10;
	
	img {
		will-change: transform;
		transform: scale(1.2);
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 74%;
	}
}

.hero-content {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}

.content-main {
    display: flex;
    flex-direction: column;
    width:100%;
    margin-bottom:3rem;
	.sub-title {
		text-align: left;
		color: #FFF;
		font-size: 14px;
		font-weight: 400;
		line-height: 130%;
		letter-spacing: -0.56px;
        margin-bottom:0;
		background: linear-gradient(80deg, #FFF 17.73%, #F7CFB4 92.44%);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	h1.visual-size {
        margin:0;
        text-shadow: 0 4px 53.1px rgba(38, 35, 35, 0.26);
		font-size: clamp(1.2rem, 1.752vw + 2rem, 3.688rem);
		font-weight: 500;
		line-height: 90%; /* 197.1px */
		letter-spacing: -5.76px;
		background: linear-gradient(180deg, #FFF 17.73%, #F7CFB4 92.44%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
	}
}

.header-char {
	background: linear-gradient(180deg, #FFF 17.73%, #F7CFB4 92.44%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.content-cta {
	position: relative;
	max-width: 100%;
	border-radius: 12px;
	/* background: linear-gradient(180deg, #FFE5CF 0%, rgba(255, 191, 136, 0.90) 100%);
	box-shadow: 0 4px 54px 0 #2B1D10; */
	overflow: hidden;
	
	.cta-marquee {
		display: flex;
		gap: 8px;
		color: #000;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: -0.6px;
		margin-top: 10px;
	}
	
	.marquee-group {
		align-items: center;
		white-space: nowrap;
		width: max-content;
		display: flex;
		gap: 8px;
		padding-block: 10px;
		animation: scroll 30s linear infinite;
	}
	
	.img-wrapper {
		margin: 10px;
		img { 
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 10px;
		}
	}
		
	.register-button {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		background: #FF983F;
	}
}

@keyframes scroll {
	to {
		transform: translateX(calc(-100% - 8px));
	}
}



.gallery-wrap {
  position: relative;
  width: 83%;
  height: 500px;
  margin:0 auto;
  overflow: hidden;
}
.gallery-wrap ul {padding:0;margin:0}
.gallery-wrap .cards-ac {
  position: absolute;
  /* width: calc(100% / 3); */
  width:40%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius:2.8rem;
  transform: translate(-50%, -50%);
  border:12px solid #dbdbdb
}

.gallery-wrap .cards-ac li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  aspect-ratio: 16/9;
  text-align: center;
  line-height: 1;
  font-size: 2rem;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  border-radius: 0.8rem;
}
.gallery-wrap .cards-ac li .card {
	container-type: inline-size;
	height:100%;
	border-radius:2rem;
	box-shadow:0 0 5px 0 rgba(0 0 0 /10%);
}
.gallery-wrap .cards-ac li .card .card-img-top {
	height:300px;
	object-fit: cover;
	border-radius:2rem 2rem 0 0;
}
.gallery-wrap .cards-ac li .card .card-title {

}
.gallery-wrap .cards-ac li .card .card-text {
	font-size:1rem;
	line-height:1.4
}

@container (min-width:332px) {
	.card-title {
		font-size:1.5rem
	}
}
@container (max-width:331px) {
	.card-title {
		font-size:1.2rem
	}
}

.gallery-wrap .actions {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
.gallery-wrap .actions button {
	padding:6.4px 10px
}
.gallery-wrap .actions button i::before {
	color:#b0aa9b
}

.drag-proxy {
  visibility: hidden;
  position: absolute;
}




@media screen and (max-width: 991px) {
    .hero-section1 {
        /* height: 90svh; */
    }
}
@media (min-width: 768px) {
}

@media screen and (max-width:  767.98px) {
	.hero-section1 {
		border-radius: 0;
		justify-content: space-around;
		background: linear-gradient(180deg, #282828 0%, rgba(0 0 0 / 20%) 50%, rgba(37, 32, 28, 0) 100%);
    }
	.visual-header {
		/* background:none; */
	}
	.preloader-mask {
		width: 100%;
	}
	.content-main {
		margin-bottom:0;
		margin-top:10rem;
	}
	.gallery-wrap {
		width:100%;
		height:400px;
	}
	.gallery-wrap .cards-ac {
		width:50%;
	}
	.gallery-wrap .cards-ac li .card .card-img-top {
		height:200px
	}
}
@media screen and (max-width:575.98px) {
	/* .mask-hole {
		width:100px;
		height:100px;
		box-shadow:0 0 0 200vmax #1C1917
	} */
	.mask-overlay {
        display:none;
		background: rgba(255, 255, 255, 1);
		/* background: transparent; */
		 -webkit-mask:
		radial-gradient(circle 100px at center, transparent 99%, rgb(56, 33, 33) 90%);
		mask:
		radial-gradient(circle 100px at center, transparent 99%, rgb(63, 10, 10) 90%);
	}

    .logo-text {
        font-size:1.5rem !important;
        line-height: 1 !important;
    }
	.hero-section1 {
		width:100%;
		height:80svh;
	}
	.gallery-wrap .cards-ac {
		width:73%
	}
	.focus-text {
		font-size:1.5rem;
		text-shadow:none
	}
	.preloader-bg {
		/* background-color: #fff; */
	}
}