/* main */
main{ overflow-x: clip; position: relative;}
@supports(overflow-x: clip){
	main{ overflow-x: hidden; }
}

/* visual */
.main_visual{ min-height: 450rem; text-align: center; color: #fff; }
.main_visual .swiper-slide{ position: relative; }
.main_visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
.main_visual .slide1::before{ background-image: url('/images/main/visual1.jpg'); }
.main_visual .slide2::before{ background-image: url('/images/main/visual2.jpg'); }
.main_visual .slide3::before{ background-image: url('/images/main/visual3.jpg'); }
.main_visual .inr{ display: flex; align-items: center; justify-content: center; padding-bottom: 3.3%; box-sizing: border-box; }
.main_visual__p{ font-size: 22rem; font-weight: 300; }
.main_visual__h2{ margin-top: .6em; font-size: var(--fs50); font-weight: 400; }
.main_visual__pager{ position: absolute; inset: auto 0 min(19.6%, 185rem); display: flex; justify-content: center; gap: 40rem; width: auto; z-index: 1;}
.main_visual__pager .swiper-pagination-bullet{ position: relative; width: 10rem; height: 10rem; background: currentColor; opacity: .5; }
.main_visual__pager .swiper-pagination-bullet-active{ opacity: 1; }
.main_visual__pager .swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -9rem; border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.main_visual__pager .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)::before{ opacity: 0; }
.main_scroll{ position: absolute; inset: auto 0 min(4.8%, 46rem); pointer-events: none; z-index: 1; }
.main_scroll::before{ content: 'SCROLL DOWN'; display: block; }
.main_scroll::after{ content: ''; margin-top: 6rem; display: inline-block; width: 18rem; height: 18rem; border: solid currentColor; border-width: 0 2px 2px 0; box-sizing: border-box; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference){
	.main_visual .swiper-slide-active::before{ animation: slide_bg 3s both; }
	@keyframes slide_bg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.main_visual__h2{ opacity: 0; }
	.main_visual__p{ opacity: 0; }
	.main_visual .swiper-slide-active .main_visual__p{ animation: visual_txt .8s .3s both; }
	.main_visual .swiper-slide-active .main_visual__h2{ animation: visual_txt .8s .5s both; }
	@keyframes visual_txt{
		0%{ transform: translateY(40rem); filter: blur(10rem); opacity: 0; }
		100%{ transform: translateY(0); filter: blur(0); opacity: 1; }
	}
}
@media(min-width:768px){
	.main_visual{ aspect-ratio: 1920/780; }
}
@media(max-width:767px){
	.main_visual{ height: 100vh; }
}

/* common */
.common__eng{ text-transform: uppercase; font-size: 20rem; font-weight: 700; color: var(--primary); }
.common__h2{ position: relative; margin: .5em 0 2.15em; font-size: clamp(30rem, calc( 40 / var(--inner) * 100vw ), 40rem); line-height: 1.4; font-weight: 400; letter-spacing: -.015em; }
.common__h2::before{ content: ''; position: absolute; bottom: -1.025em; width: 2em; height: 1px; background: currentColor; }
.common__p{ text-wrap: balance; font-size: 18rem; font-weight: 300; color: #666; }
.common__a{ display: inline-flex; align-items: center; justify-content: center; min-width: 200rem; height: 60rem; padding: 17rem 15rem 14rem; border: 1px solid currentColor; box-sizing: border-box; font-size: 18rem; color: #333; }
.common__btn{ position: relative; width: 60rem; height: 60rem; background: no-repeat 50% / 66.6% auto; }
.common__btn.swiper-button-disabled{ opacity: .3; }
.common__btn.prev{ background-image: url(/images/main/menu_prev.png); }
.common__btn.next{ background-image: url(/images/main/menu_next.png); }
.desat_logo{ position: relative; z-index: -1; }
.desat_logo::before{ content: ''; position: absolute; top: 0; display: inline-block; aspect-ratio: 530/435; width: clamp(200rem, 33.125vw, 530rem); background: url(/images/main/menu_logo.png) no-repeat 50% / contain; opacity: .1; }
.desat_logo.item1::before{ left: 0; transform: translate(-2.6%,8.4%); }
.desat_logo.item2::before{ right: 0; transform: translate(23.8%,-45.5%); }
@media(min-width:768px){
	.desat_logo.item2::before{ right: 0; transform: translate(23.8%,-75.5%); }
}

/* about */
.main_about{ position: relative; padding: clamp(90rem, calc( 115 / var(--inner) * 100vw ), 115rem) 0 clamp(90rem, calc( 120 / var(--inner) * 100vw ), 120rem); }
.main_about::before{ content: ''; position: absolute; inset: 0 30% 0 0; background: #f8f6f2; }
.main_about__inr{ display: grid; grid-template: 't' 'a' 'i1'; gap: clamp(60rem, 5.875vw, 94rem) clamp(60rem, 7.5vw, 120rem); }
.main_about__title{ grid-area: t; }
.main_about__img1{ grid-area: i1; }
.main_about__img2{ grid-area: i2; position: relative; top: 5rem; height: 660rem; }
.main_about .common__a{ grid-area: a; justify-self: start; display: inline-flex; align-items: center; height: 60rem; padding: 17rem 53.5rem 14rem; border: 1px solid currentColor; box-sizing: border-box; font-size: 18rem; color: #000; }
.main_about .dot {position: relative;}
.main_about .dot::before {position: absolute; content: ''; top: -5rem; left: 50%; transform: translateX(-50%); width: 6rem; height: 6rem; border-radius: 50%; background: #333;}
@media(prefers-reduced-motion:no-preference){
	.main_about::before {transition: 0.5s;}
	.effect_active .main_about__img1{ transition-delay: .6s; }
	.effect_active .main_about__img2{ transition-delay: .3s; }
	.effect_active .main_about .common__a{ transition-delay: .9s; }
}
@media(min-width:1280px){
	.main_about::before{ right: 50%; }
	.main_about__inr{ display: grid; grid-template: 't i2' 'i1 i2' 'i1 a'; gap: 94rem clamp(60rem, 7.5vw, 120rem); }
	.main_about__img1{ height: 500rem; }
}
@media(max-width:1279px){
	.main_about__img1{ width: 100%; }
	.main_about__img2{ display: none; }
	.main_about .common__a{ margin-top: -20rem; }
	.main_about .dot::before {top: -3rem; width: 4rem; height: 4rem;}
}

@media(max-width:767px){
	.main_about::before{inset: 0 0% 0 0}
}

/* menu */
.main_menu{ padding: clamp(90rem, calc( 120 / var(--inner) * 100vw ), 120rem) 0 clamp(90rem, calc( 112 / var(--inner) * 100vw ), 112rem); }
.main_menu__inr{ display: grid; align-items: end; gap: 60rem 0; }
.main_menu [role="tablist"]{ margin-top: 49rem; display: flex; gap: 67rem; font-size: 20rem; font-weight: 700; color: #bbb; }
.main_menu [role="tab"]{ position: relative; cursor: pointer; }
.main_menu [aria-selected="true"]{ color: #998963; }
.main_menu [role="tab"] + [role="tab"]::before{ content: ''; position: absolute; top: 11rem; left: -37rem; width: 6rem; height: 6rem; background: #ccc; border-radius: 50%; }
.main_menu__wrap_btn{ margin-top: 51rem; display: flex; gap: 10rem; }
.main_menu .common__btn{ display: none; }
.main_menu .common__btn.prev{ margin-left: 40rem; }
.main_menu [role="tabpanel"]:not([aria-hidden="false"]){ position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.main_menu [role="tablist"]:has([aria-selected="true"][aria-controls="con1"]) + .main_menu__wrap_btn .con1{ display: inline-block; }
.main_menu [role="tablist"]:has([aria-selected="true"][aria-controls="con2"]) + .main_menu__wrap_btn .con2{ display: inline-block; }
.main_menu [role="tablist"]:has([aria-selected="true"][aria-controls="con3"]) + .main_menu__wrap_btn .con3{ display: inline-block; }
.main_menu [role="tabpanel"]{ position: relative; }
.main_menu__swiper{ max-width: 500rem; width: 100%; clip-path: inset(0 -800rem 0 0); }
.main_menu__swiper .swiper-slide{ display: flex; justify-content: center; transition: transform .3s; }
.main_menu__a{ align-self: flex-end; display: block; width: 100%; }
.main_menu .no_image{ margin: 0 auto; display: block; aspect-ratio: 1/1; width: 100%; border-radius: 50%; transition: .3s; }
.main_menu__img{ position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; text-indent: -100vw; object-fit: cover; z-index: 1; }
.main_menu__caption{ position: relative; margin-top: 74rem; text-align: center; font-size: 30rem; color: #222; }
.main_menu__caption::before{ content: ''; position: absolute; top: -34rem; left: 50%; transform: translateX(-50%); width: 80rem; height: 1px; background: #111; }
.main_menu__swiper .non_board_data{ display: flex; align-items: center; }
@media(min-width:768px){
	.main_menu__title{ position: relative; bottom: 8rem; }
	.main_menu__swiper{ height: 619rem; }
	/* .main_menu__swiper .swiper-slide:not(.swiper-slide-active) .main_menu__img{ width: 300rem; } */
	.main_menu__swiper .swiper-slide:not(.swiper-slide-active) .no_image{ width: 300rem; }
	.main_menu__swiper .swiper-slide-next ~ .swiper-slide{ transform: translateX(-100rem); }
}
@media(min-width:1280px){
	.main_menu__inr{ grid-template-columns: 593rem 1fr; }
}
@media(max-width:1279px) and (min-width:768px){
	.main_menu__inr{ grid-template-columns: 55% 40%; }
}
@media(max-width:767px){
	.main_menu {padding: clamp(100rem, calc( 120 / var(--inner) * 100vw ), 120rem) 0 clamp(90rem, calc( 112 / var(--inner) * 100vw ), 112rem)}
	.main_menu .no_image{ width: 80%; }
	/* .main_menu__img{ width: 80%; } */
}

/* brand */
.main_brand{ padding: clamp(90rem, calc( 115 / var(--inner) * 100vw ), 115rem) 0 clamp(90rem, calc( 110 / var(--inner) * 100vw ), 110rem); background: #f8f6f2; text-align: center; text-wrap: balance; }
.main_brand .common__h2 {font-weight: 600;}
.main_brand .common__h2::before{ left: 50%; transform: translateX(-50%);}
.main_brand__ul{ margin-top: 54rem; display: grid; gap: 60rem clamp(10rem, 5vw, 80rem); font-size: 18rem; font-weight: 300; color: #666; }
.main_brand__img{ aspect-ratio: 553/470; width: 100%; background: var(--primary); }
.main_brand__strong{ margin: 1.1em 0 0.83333333em; display: block; font-size: var(--fs28); font-weight: 600; color: #222; }
@media(min-width:768px){
	.main_brand__ul{ grid-template-columns: repeat(3, 1fr); }
}
@media(min-width:1280px){
	.main_brand__inr{ max-width: 1820rem; width: 94.79166667%; } 
}

/* branch */
.main_branch{ padding: clamp(90rem, calc( 120 / var(--inner) * 100vw ), 120rem) 0 clamp(45rem, calc( 60 / var(--inner) * 100vw ), 60rem); }
.main_branch__inr{ display: grid; gap: 60rem 3.7vw; }
.main_branch__img{ aspect-ratio: 115/70; width: 100%; background: var(--primary) url(/images/main/branch.jpg) no-repeat 50% / cover; }
@media(min-width:768px){
	.main_branch__inr{ margin: 0; grid-template-columns: 62.4% 1fr; align-items: center; max-width: 100%; width: 96%; }
	.main_branch__title{ position: relative; top: -3rem; }
	.main_branch__img{ min-height: 440rem; }
	.main_branch .common__a{ margin-top: 54.5rem; }
}
@media(min-width:1280px){
	.main_branch__inr{ column-gap: 6.2vw;}
}
@media(max-width:767px){
	.main_branch__img{ order: 1; }
	.main_branch .common__a{ margin-top: 40rem; }
}

/* bottom */
.main_bottom{ padding: clamp(45rem, calc( 60 / var(--inner) * 100vw ), 60rem) 0 clamp(90rem, calc( 120 / var(--inner) * 100vw ), 120rem); }
.main_bottom__inr{ display: grid; gap: 60rem clamp(50rem, 6.25vw, 100rem); }
@media(min-width:1280px){
	.main_bottom__inr{ grid-template-columns: calc( 50% - clamp(50rem, 6.25vw, 100rem) ) 1fr; }
}

/* notice */
.main_notice__title{ display: grid; grid-template: 'e e e' 'h p n' / 1fr auto auto; }
.main_notice .common__eng{ grid-area: e; }
.main_notice .common__h2{ grid-area: h; margin-bottom: 30rem; }
.main_notice .common__h2::before{ display: none; }
.main_notice .prev{ grid-area: p; top: 6rem; }
.main_notice .next{ grid-area: n; top: 6rem; left: 10rem; }
.main_notice__a{ display: block; padding: 24rem 29rem; border: 1px solid #ddd; box-sizing: border-box; }
.main_notice__num{ display: block; font-size: 20rem; font-weight: 700; color: var(--primary); }
.main_notice__head{ position: relative; margin: 8rem 0 52rem; min-height: 3em; font-size: 18rem; font-weight: 500; color: #222; word-break: keep-all; -webkit-line-clamp: 2; }
.main_notice__head::before{ content: ''; position: absolute; bottom: -10rem; left: 0; width: 60rem; height: 1px; background: var(--black); }
.main_notice__data{ min-height: 4.5em; font-weight: 300; color: #777; -webkit-line-clamp: 3; }
.main_notice__date{ margin-top: 39rem; display: block; font-size: 13rem; font-weight: 300; color: #aaa; }
.main_notice__more{ position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 146rem; height: 50rem; font-size: 18rem; color: #fff; user-select: none; }
@media(prefers-reduced-motion:no-preference){
	.main_notice__a{ transition: .4s; }
	.main_notice__more{ transition: .4s; }
}
@media(hover:hover){
	.main_notice__a:hover{ border-color: var(--primary); }
	.main_notice__a:hover .main_notice__more{ background: var(--primary); }
}
@media(min-width:1280px){
	.main_notice{ margin-top: -5rem; }
}
@media(max-width:1279px){
	.main_notice__swiper{ width: 92vw; }
}

/* franchise */
.main_franchise{ padding: 75rem 0 81rem; background: #3d3b39 url(/images/main/franchise.jpg) no-repeat 50% / cover; text-align: center; color: #fff; }
.main_franchise :is(.common__h2, .common__p){ color: inherit; }
.main_franchise .common__h2{ margin-bottom: .625em; }
.main_franchise .common__h2::before{ display: none; }
.main_franchise .common__a{ margin-top: 54rem; color: inherit; }


/* 메뉴 노 이미지 대용 넣기 */