/* visual */
.mainVis{ color: #fff; }
.mainVis .swiper-slide{ position: relative; background: var(--black); }
.mainVis .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
.mainVis .s1::before{ background-image: url('/images/main/vis3.jpg'); }
.mainVis .s2::before{ background-image: url('/images/main/vis4.jpg'); }
.mainVis__inr{ position: absolute; inset: 1.2% 0 0; display: flex; align-items: center; z-index: 1; }
.mainVis__p1{ font-size: 20rem; }
.mainVis__p2{ margin-top: .41818182em; font-size: clamp(30rem, calc( 55 / var(--inr) * 100vw ), 55rem); font-weight: 700; letter-spacing: -.015em; color: rgba(255, 255, 255, .6); }
.mainVis__p3{ margin-top: -.14545455em; font-size: clamp(30rem, calc( 55 / var(--inr) * 100vw ), 55rem); font-weight: 700; letter-spacing: -.015em; }
.mainVis__control{ margin-top: 49rem; display: inline-flex; align-items: center; gap: 30rem; }
.mainVis__btn{ display: inline-flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; border: 1px solid currentColor; border-radius: 50%; }
.mainVis__btn::before{ content: ''; display: block; width: 9rem; height: 10rem; background: currentColor; }
.mainVis__btn:not(.pause)::before{ clip-path: polygon(0 10rem, 0 0, 3rem 0, 3rem 10rem, 6rem 10rem, 6rem 0, 9rem 0, 9rem 100%); }
.mainVis__btn.pause::before{ clip-path: polygon(0 0, 9rem 5rem, 0 10rem); }
.mainVis__pager{ display: inline-flex; gap: 21rem; width: auto; }
.mainVis__pager .swiper-pagination-bullet{ position: relative; margin: 0; width: 10rem; height: 10rem; background: 0; border: 1px solid currentColor; }
.mainVis__pager .swiper-pagination-bullet-active{ background: currentColor; }
.mainVis__pager .swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -10rem; border-radius: 50%; }
.mainScroll__wrap{ position: absolute; inset: auto 0 0; display: flex; justify-content: end; user-select: none; }
.mainScroll{ position: relative; right: -5rem; display: grid; justify-content: center; gap: 15rem; }
.mainScroll__p{ font-size: 12rem; letter-spacing: .05em; writing-mode: vertical-lr; }
.mainScroll__bar{ overflow: hidden; justify-self: center; position: relative; width: 2rem; height: 150rem; background: rgba(255, 255, 255, .3); }
.mainScroll__bar::before{ content: ''; position: absolute; inset: auto 0 0; height: 50rem; background: currentColor; }
@media (prefers-reduced-motion: no-preference){
	.mainVis .swiper-slide{ transform: scale(1.05); }
	.mainVis .swiper-slide-active::before{ animation: slide_bg 3s both; }
	@keyframes slide_bg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.mainVis__txt > *{ animation: visual_txt .8s .3s both; opacity: 0; }
	.mainVis__txt > *:nth-child(2){ animation-delay: .6s; }
	.mainVis__txt > *:nth-child(3){ animation-delay: .9s; }
	.mainVis__txt > *:nth-child(4){ animation-delay: 1.2s; }
	@keyframes visual_txt{
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
	.mainScroll__bar::before{ animation: mainScroll 4s linear infinite; }
	@keyframes mainScroll {
		0%{ bottom: 100%; }
		100%{ bottom: -100%; }
	}
}
@media(min-width:768px){
	.mainVis{ aspect-ratio: 1920/970; }
}
@media(max-width:767px){
	.mainVis{ height: 100vh; min-height: 450rem; }
}

/* about */
.mainAbout{ padding: clamp(90rem, calc( 124 / var(--inr) * 100vw ), 124rem) 0 0; }
.mainAbout__eng{ text-transform: uppercase; font-weight: 600; color: var(--primary); }
.mainAbout__h2{ margin-top: .57777778em; font-size: var(--fs45); }
.mainAbout__p{ margin-top: 24rem; font-size: 18rem; line-height: 1.55555556; color: #444; }
.mainAbout__links{ margin-top: clamp(60rem, calc( 126 / var(--inr) * 100vw ), 126rem); display: grid; gap: 13.3333334rem; }
.mainAbout__a{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 470/610; padding: 10rem 10% 14.5%; background: #000 no-repeat 50% / cover; color: #fff; }
.mainAbout__a.a1{ background-image: url('/images/main/about1.jpg'); }
.mainAbout__a.a2{ background-image: url('/images/main/about2.jpg'); }
.mainAbout__a.a3{ background-image: url('/images/main/about3.jpg'); }
.mainAbout__a.a4{ background-image: url('/images/main/about4.jpg'); }
.mainAbout__a::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #000, #0000 57.21311475%); }
.mainAbout__head{ position: relative; font-size: 25rem; letter-spacing: -.015em; }
.mainAbout__body{ position: relative; margin-top: 12rem; font-size: 16rem; letter-spacing: -.01em; text-wrap: balance; }
.mainAbout__more{ contain: content; position: relative; display: flex; align-items: end; height: 3.57142857em; text-transform: uppercase; font-size: 14rem; }
.mainAbout__more::after{ content: ''; position: relative; top: -.35714286em; margin-left: .71428571em; display: inline-block; width: .5em; height: .5em; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
@media(prefers-reduced-motion:no-preference){
	.mainAbout__a::before,
	.mainAbout__more{ transition: .4s; }
}
@media(hover:hover){
	.mainAbout__a:not(:hover)::before{ opacity: .85; }
	.mainAbout__a:not(:hover) .mainAbout__more{ height: 0; }
}
@media(min-width:768px){
	.mainAbout__links{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:1279px) and (min-width:768px){
	.mainAbout__head{ font-size: 15rem; }
	.mainAbout__body{ font-size: 12rem; }
	.mainAbout__more{ font-size: 10rem; }
}

/* notice */
.mainNot{ contain: content; padding: clamp(90rem, calc( 113 / var(--inr) * 100vw ), 113rem) 0 clamp(90rem, calc( 131 / var(--inr) * 100vw ), 131rem); }
.mainNot__title{ display: grid; }
.mainNot__h2{ font-size: var(--fs40); letter-spacing: -.015em; }
.mainNot__p{ margin-top: 6rem; color: #666; }
.mainNot__control{ display: flex; justify-content: flex-end; gap: 10rem; }
.mainNot__btn{ display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; background: #f1f1f1; border-radius: 50%; color: #888; }
.mainNot__arrow{ width: 15rem; fill: currentColor; }
.mainNot__swiper{ margin-top: 45rem; clip-path: inset(-16rem); }
.mainNot__a{ position: relative; display: block; padding: 44rem 8.6% 42rem; border: 1px solid #ddd; }
.mainNot__category{ display: block; text-transform: uppercase; font-weight: 600; letter-spacing: .01em; color: var(--primary); }
.mainNot__head{ margin-top: 17rem; font-size: 20rem; }
.mainNot__body{ margin-top: 18rem; min-height: 3.5em; font-weight: 300; line-height: 1.75; color: #444; -webkit-line-clamp: 2; }
.mainNot__date{ margin-top: 27rem; display: block; font-size: 15rem; color: #888; }
.mainNot__scrollbar{ margin-top: 50rem; height: 3rem; background: #eee; }
.mainNot .swiper-scrollbar-drag{ background: var(--black); border-radius: 0; }
@media(prefers-reduced-motion:no-preference){
	.mainNot__btn,
	.mainNot__a,
	.mainNot__a > *,
	.mainNot__a::before{ transition: .4s; }
}
@media(hover:hover){
	.mainNot__btn:hover{ background: #182028; color: #fff; }
	.mainNot__a:hover{ box-shadow: 4rem 4rem 20rem rgba(22, 30, 37, .2); }
	.mainNot__a::before{ content: ''; position: absolute; inset: 0; background: #182028 url('/images/main/notBg.png') no-repeat 100% 100% / 50% auto; z-index: -1; }
	.mainNot__a:not(:hover)::before{ opacity: 0; }
	.mainNot__a:hover > *{ color: #fff; }
}
@media(min-width:768px){
	.mainNot__title{ grid-template: 'h c' 'p c' / 1fr auto; align-items: center; }
	.mainNot .common__h2{ grid-area: h; }
	.mainNot__p{ grid-area: p; }
	.mainNot__control{ grid-area: c; margin-top: 4rem; }
}
@media(min-width:1280px){
	.mainNot__swiper{ clip-path: inset(-25rem); }
}
@media(max-width:767px){
	.mainNot__control{ margin-top: 20rem; }
}

/* contact */
.mainCont{ contain: content; position: relative; padding: 84rem 0 91rem; text-align: center; color: #fff; }
.mainCont::before{ content: ''; position: absolute; inset: 0; background: #313e49 url('/images/main/contBg.jpg') no-repeat 50% / cover; }
.mainCont__eng{ font-weight: 500; }
.mainCont__h2{ margin-top: .575em; font-size: var(--fs40); font-weight: 600; letter-spacing: -.015em; }
.mainCont__a{ margin-top: 33rem; display: inline-flex; align-items: center; height: 55rem; border: 1px solid rgba(255, 255, 255, .6); text-transform: uppercase; font-size: 13rem; font-weight: 500; }
.mainCont__txt{ padding: 2rem 52rem 0 18rem; }
.mainCont__icon{ display: flex; align-items: center; justify-content: center; aspect-ratio: 1; height: 100%; background: rgba(255, 255, 255, .1);; border-left: 1px solid rgba(255, 255, 255, .6); }
.mainCont__arrow{ width: 12rem; fill: currentColor; }
@media(prefers-reduced-motion:no-preference){
	.mainCont::before{ transition: .4s; }
}
@media(hover:hover){
	.mainCont:hover::before{ transform: scale(1.05); }
}

/* link */
.mainLinks{ padding: clamp(90rem, calc( 106 / var(--inr) * 100vw ), 106rem) 0 clamp(90rem, calc( 100 / var(--inr) * 100vw ), 100rem); }
.mainLinks__inr{ display: grid; gap: 60rem; }
.mainLinks__part{ position: relative; }
.mainLinks__h2{ font-size: var(--fs35); letter-spacing: -.015em; }
.mainLinks__p{ margin-top: 13rem; color: #444; }
.mainLinks__a{ position: absolute; top: 13rem; right: 0; display: block; width: 38rem; height: 38rem; border: 1px solid #182028; color: #343b42; }
.mainLinks__a::before,
.mainLinks__a::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 11rem; height: 1px; background: currentColor; }
.mainLinks__a::before{ transform: rotate(90deg); }
.mainLinks__img{ margin-top: 34rem; aspect-ratio: 67/23; background: no-repeat 50% / cover; }
.mainLinks__img.i1{ background-image: url('/images/main/links1.jpg'); }
.mainLinks__img.i2{ background-image: url('/images/main/links2.jpg'); }
@media(prefers-reduced-motion:no-preference){
	.mainLinks__a{ transition: .4s; }
}
@media(hover:hover){
	.mainLinks__a:not(:hover){ border-color: #ddd; color: #8a8a8a; }
}
@media(min-width:768px){
	.mainLinks__inr{ grid-template-columns: repeat(2, 1fr); }
}