/* header */
header{ position: absolute; inset: 0 0 auto; color: #fff; }
header .logo__primary{fill:#c1c1c1;}
header .logo__gray{fill:#6b6b6b;}
header .logo__black{fill:#ffffff;}

/* common */
main{ --bottomBg: #fbf9f4; }
.common__h2{ font-size: var(--fs40); font-weight: 500; }
.common__p{ margin-top: 20rem; font-size: 18rem; line-height: 1.55555556; color: #666; }
.common__more{ display: flex; align-items: center; gap: 2.8em; width: fit-content; padding: .95em 1.95em; border: 1px solid currentColor; text-transform: uppercase; font-size: clamp(16rem, calc( 20 / var(--inr) * 100vw ), 20rem); font-weight: 600; letter-spacing: .2em; color: var(--primary); }
.common__right{ height: 8rem; fill: currentColor; }

/* visual */
.mainVisual{ contain: content; position: relative; height:100vh; background: #000; color: #fff; z-index: 9; }
.mainVisual .swiper-slide{ position: relative; }
.mainVisual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.mainVisual .slide1::before{ background-image: url('/images/main/visual2.jpg'); }
.mainVisual .slide2::before{ background-image: url('/images/main/visual1.jpg'); }
.mainVisual .slide3::before{ background-image: url('/images/main/visual3.jpg'); }
.mainVisual__inr{ position: absolute; inset: 0; display: flex; align-items: center; padding-top: 4%; pointer-events: none; }
.mainVisual__txt{ display: inline-block; margin-top:-150rem; pointer-events: auto; }
.mainVisual__h2{ font-size: var(--fs50); font-weight: 400; letter-spacing: -.03em; }
.mainVisual__h2 span{ display: inline-block; }
.mainVisual__h2 b{ display: inline-block; font-weight: 600; letter-spacing: -.06em; }
.mainVisual__p{ margin-top: 29rem; font-size: 22rem; font-weight: 500; }
.mainVisual__control{ margin-top:260rem; display: inline-flex; align-items: center; gap: 30rem; pointer-events: auto;}
.mainVisual__btn{ position: relative; width: 12rem; height: 21rem; }
.mainVisual__btn::before{ content: ''; position: relative; top: 50%; left: 50%; display: inline-block; width: 16rem; height: 16rem; border: solid currentColor; border-width: 2px 2px 0 0; pointer-events: none; }
.mainVisual__btn.prev::before{ transform: translate(-20%,-50%) rotate(-135deg); }
.mainVisual__btn.next::before{ transform: translate(-80%,-50%) rotate(45deg); }
.mainVisual__btn::after{ content: ''; position: absolute; inset: -10rem; }
.mainVisual__pager{ display: flex; gap: 10rem; font-size: 18rem; font-weight: 900; color: #ffffffb3; }
.mainVisual__pager .swiper-pagination-current{ color: #fff; }
.mainScroll{ position: absolute; top: 57.2%; right: -0.25%; transform: translateY(-50%); display: grid; justify-items: center; gap: 10rem; font-size: 14rem; letter-spacing: 0; }
.mainScroll__txt{ writing-mode: vertical-lr; transform: rotate(180deg); color-mix(in srgb, currentColor 80%, #0000); }
.mainScroll__bar{ position: relative; width: 2px; height: 100rem; background: color-mix(in srgb, currentColor 40%, #0000); }
.mainScroll__bar::before{ content: ''; position: absolute; inset: 0 0 48%; background: currentColor; }
.mainScroll__bar::after{ content: ''; position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: 8rem; height: 8rem; background: currentColor; border-radius: 50%; }
@media(prefers-reduced-motion:no-preference){
	.mainVisual .swiper-slide-active::before{ animation: slideBg 3s both; }
	@keyframes slideBg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}

	.swiper-slide-active :is(.mainVisual__h2 span, .mainVisual__h2 b, .mainVisual__p){ animation: visualTxt .8s .2s both; }
	#wrap .mainVisual__h2 b{ animation-delay: .4s; }
	#wrap .mainVisual__p{ animation-delay: .6s; }
	#wrap .mainVisual__control{ animation: visualTxt .8s 1s both; }
	@keyframes visualTxt{
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}

	.mainScroll__bar{ clip-path: inset(-8rem -8rem 0); }
	.mainScroll__bar::before{ animation: scrollBar 3s linear infinite; }
	.mainScroll__bar::after{ animation: scrollCircle 3s linear infinite; bottom: auto; }
	@keyframes scrollBar {
		0%{ bottom: 100%; }
		60%, 100%{ bottom: 0; opacity: 1; }
		70%{ opacity: 1; }
		80%, 100%{ opacity: 0; }
	}
	@keyframes scrollCircle {
		0%{ top: 0; }
		100%{ top: 166.66666667%; }
	}
}
/*
@media(min-width:768px){
	.mainVisual{ aspect-ratio: 1920/940; }
}
*/
@media(max-width:767px){
	.mainVisual{ height: 100vh; }
    .mainVisual__txt{margin-top:-100rem;}
    .mainVisual__control{margin-top:200rem;}
}

/* instrument */
.mainInstrument{ contain: content; position: relative; padding: clamp(90rem, calc( 128 / var(--inr) * 100vw ), 128rem) 0 clamp(90rem, calc( 140 / var(--inr) * 100vw ), 140rem); }
.mainInstrument__bgTxt{ position: absolute; transform: translate(-50%,-50%); display: inline-block; font-size: clamp(50rem, calc( 180 / var(--inr) * 100vw ), 250rem); font-weight: 700; letter-spacing: 0; color: rgba(185, 179, 163, 0.1); white-space: nowrap; pointer-events: none; }
.mainInstrument__bgTxt.t1{ top: 42.3%; left: 47.1%; }
.mainInstrument__bgTxt.t2{ top: 61.3%; left: 68%; }
.mainInstrument .common__h2{ text-align: center; }
.mainInstrument .common__p{ margin-top: 20rem; text-align: center; }
.mainInstrument__ul{ margin: 103rem auto 0; display: grid; gap: 80rem clamp(10rem, calc( 100 / var(--inr) * 100vw ), 100rem); max-width: 1160rem; }
.mainInstrument__li{ contain: content; display: block; aspect-ratio: 1; border-radius: 50%; }
.mainInstrument__img{ max-width: 100%; width:100%;}
.mainInstrument .common__more{ margin: 80rem auto 0; }
@media(min-width:768px){
	.mainInstrument__ul{ grid-template-columns: repeat(3, 1fr); }
	.mainInstrument__li:nth-child(3n+1), .mainInstrument__li:nth-child(3n+3){ margin-top: -60rem; }
}
@media(max-width:767px){
	.mainInstrument__ul{ grid-template-columns: repeat(2, 1fr); }
}

/* about */
.mainAbout{ position: relative; padding: clamp(90rem, calc( 140 / var(--inr) * 100vw ), 140rem) 0; }
.mainAbout::before{ content: ''; position: absolute; inset: 0 0 0 53.125%; background: rgba(250, 248, 241, 0.8); }
.mainAbout::after{ content: ''; position: absolute; top: 0; transform: translateY(-30.9%); aspect-ratio: 486/1033; width: min(486rem, 26%); background: url('/images/main/aboutBg.jpg') no-repeat 50% / contain; }
.mainAbout__inr{ display: grid; gap: clamp(10rem, calc( 50 / var(--inr) * 100vw ), 50rem); }
.mainAbout__txt{ grid-area: t; align-self: center; }
.mainAbout__img{ background: var(--primary) no-repeat 50% / cover; }
.mainAbout__img.i1{ grid-area: i1; height: clamp(200rem, calc( 410 / var(--inr) * 100vw ), 410rem); background-image: url('/images/main/about1.jpg'); }
.mainAbout__img.i2{ grid-area: i2; height: clamp(140rem, calc( 280 / var(--inr) * 100vw ), 280rem); background-image: url('/images/main/about2.jpg'); }
.mainAbout__img.i3{ grid-area: i3; margin-right: 16.8%; height: clamp(240rem, calc( 481 / var(--inr) * 100vw ), 481rem); background-image: url('/images/main/about3.jpg'); }
.mainAbout .common__more{ grid-area: m; align-self: end; }
@media(min-width:768px){
	.mainAbout__inr{ grid-template: 't i1 i1' 'i2 i2 i3' 'm m i3' / 1fr 22% 28.65%; }
	.mainAbout__txt{ padding-bottom: .08%; }
	.mainAbout .common__more{ margin-left: 7%; }
}
@media(max-width:1279px) and (min-width:768px){
	.mainAbout .common__h2 br{ display: none; }
}
@media(max-width:767px){
	.mainAbout__inr{ grid-template: 't t' 'i1 i1' 'i2 i3' 'm i3' / 1fr 33%; }
	.mainAbout__img.i1{ margin-top: 40rem; }
	.mainAbout .common__more{ justify-self: end; }
}

/* navigation */
.mainNav{ position: relative; padding-top: 197rem; background: var(--bottomBg); text-align: center; }
.mainNav::before{ content: ''; position: absolute; inset: 0 0 57.5%; background: url('/images/main/navBg.jpg') no-repeat 50% / cover; }
.mainNav .logo__svg{ max-width: 100%; width: 506rem; }
.mainNav .logo__svg > *{ fill: #fff; }
.mainNav__a + a::before{ content: ''; position: absolute; inset: 0 40rem auto; border-top: 1px solid #d7d4d0; }
.mainNav__links{ margin-top: 170rem; display: grid; background: #fff; box-shadow: 0 37rem 43rem rgba(0, 0, 0, 0.05); }
.mainNav__a{ position: relative; display: grid; justify-content: center; padding: 61rem 15rem 53rem; }
.mainNav__svg{ justify-self: center; height: 60rem; fill: var(--primary); }
.mainNav__svg.s2{ fill-rule: evenodd; }
.mainNav__head{ margin-top: 1.1em; font-size: var(--fs30); font-weight: 500; }
.mainNav__body{ margin-top: 15rem; font-size: 18rem; line-height: 1.55555556; color: #888; }
.mainNav__view{ margin-top: 26rem; font-size: 20rem; font-weight: 600; letter-spacing: .2em; color: var(--primary); }
@media(prefers-reduced-motion:no-preference){
	.mainNav__svg,
	.mainNav__view{ transition: .4s; }
}
@media(hover:hover){
	.mainNav__a:not(:hover) .mainNav__svg{ fill: #aaa; }
	.mainNav__a:not(:hover) .mainNav__view{ opacity: .4; }
}
@media(min-width:768px){
	.mainNav::before{ bottom: 177rem; }
	.mainNav__links{ grid-template-columns: repeat(3, 1fr); }
	.mainNav__a + a::before{ inset: 41rem auto 40rem 0; border-left: 1px solid #d7d4d0; }
}

/* contact */
.mainContact{ padding: clamp(90rem, calc( 140 / var(--inr) * 100vw ), 140rem) 0; background: var(--bottomBg) url('/images/main/contactBg.jpg') no-repeat 100% 100% / min(960rem, 100%) auto; }
.mainContact__inr{ display: grid; align-items: center; gap: 7.1%; }
#wrap .root_daum_roughmap{ width: 100%; }
#wrap .root_daum_roughmap .wrap_map{ height: 500rem; }
.root_daum_roughmap svg{ pointer-events: none; }
.map_border,
.wrap_controllers{ display: none }
.mainContact .common__h2{ font-weight: 600; }
.mainContact__ul{ margin-top: 30rem; font-size: 18rem; color: #444; }
.mainContact__li{ position: relative; padding-left: 25rem; }
.mainContact__li + li{ margin-top: 8rem; }
.mainContact__li::before{ content: ''; position: absolute; top: 3rem; left: 1px; width: 15rem; height: 20rem; background: url('/images/main/location.svg') no-repeat 50% / contain; }
.mainContact__tel{ margin-top: .42222222em; display: inline-block; font-size: var(--fs45); font-weight: 900; letter-spacing: -.03em; }
/*
.mainContact__sns{ margin-top: 24rem; display:flex; align-items: center; gap: 10rem; font-size: 18rem; font-weight: 900; color: #381e1f; }
.mainContact__icon{ flex-shrink: 0; width: 30rem; height: 30rem; }
*/
.mainContact__p1{ margin-top: 27rem; font-size: 18rem; color: #666; }
.mainContact__p1-gray{ margin: 0 1.22222222em; color: #ddd; }
.mainContact__p2{ margin-top: 5rem; color: #999; }

.mainContact_sns{margin-top:30rem;}
.mainContact_sns li+li{margin-top:10rem;}
.mainContact_sns li a{display:block; position:relative; overflow:hidden; padding:6rem; height:50rem; width:400rem; border-radius:25rem; border:1px solid var(--primary); background:#fff;}
.mainContact_sns li a img{float:left; display:block; height:100%;}
.mainContact_sns li a em{float:left; padding:0 20rem; font-size:20rem; line-height:35rem; font-weight:500; color:#222;}
.mainContact_sns li a svg{float:right; margin-top:5rem; margin-right:15rem; display:block; height:70%;}
.mainContact_sns li a svg .cls-1{fill:var(--primary);}
/*
.mainContact_sns li.kakao a{border:2px solid #fae100;}
.mainContact_sns li.kakao a svg .cls-1{fill:#fae100;}
.mainContact_sns li.insta a{border:2px solid #ac3aca;}
.mainContact_sns li.insta a svg .cls-1{fill:#ac3aca;}
.mainContact_sns li.blog a{border:2px solid #2cb24a;}
.mainContact_sns li.blog a svg .cls-1{fill:#2cb24a;}
.mainContact_sns li.youtube a{border:2px solid #ff0000;}
.mainContact_sns li.youtube a svg .cls-1{fill:#ff0000;}
*/

@media(min-width:768px){
	.mainContact__inr{ grid-template-columns: 1fr 1fr; }
	.mainContact__txt{ padding-bottom: 2%; }
}
@media(min-width:1280px){
	.mainContact__inr{ grid-template-columns: 57.14285714% 1fr; }
}
@media(max-width:767px){
	.root_daum_roughmap{ aspect-ratio: 1/1; }
	.root_daum_roughmap .wrap_map{ height: 100%; }
    .mainContact_sns li a{width:350rem;}
}