/* common */
main{ background: #f8f8f8; }
.common__h2-kor{ font-size: 16rem; font-weight: 600; color: var(--primary); }
.common__h2-eng{ margin-top: 0.08888889em; font-size: var(--fs45); letter-spacing: -.02em; }
.common__arrow{ width: 6rem; fill: currentColor; }

/* visual */
.mVis{ height: 970rem; min-height: 450rem; background: var(--black); color: #fff; }
.mVis .swiper-slide{ position: relative; }
.mVis .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; z-index: -1; }
.mVis .s1::before{ background-image: url('/images/main/mVis-s1.jpg'); }
.mVis .s2::before{ background-image: url('/images/main/mVis-s2.jpg'); }
.mVis .s3::before{ background-image: url('/images/main/mVis-s3.jpg'); }
.mVis .inr{ position: absolute; inset: var(--header-height) 0 10.8%; display: flex; align-items: center; z-index: 1; }
.mVis__p{ font-size: 20rem; font-weight: 500; }
.mVis__h2{ margin: 0.25454545em 0 0.74545455em; text-transform: uppercase; font-size: var(--fs55); line-height: 1.36363636; text-shadow: 0 0 0.49090909em rgba(0, 0, 0, 0.3) }
.mVis__a{ display: inline-flex; gap: 11rem; }
.mVis__btn{ display: inline-flex; align-items: center; justify-content: center; height: 68rem; border-radius: 5em; font-weight: 500; letter-spacing: -.01em; }
.mVis__btn:hover {background: rgba(255, 255, 255, 0.15) !important; transition: .3s;}
.mVis__btn.b1{ border: 1px solid color-mix(in srgb, currentColor, #0000 50%); padding: 0 47rem 0 48rem; }
.mVis__btn.b2{ width: 68rem; padding-top: 1.4%; background: color-mix(in srgb, currentColor, #0000 97%); border: 1px solid color-mix(in srgb, currentColor, #0000 70%); }
.mVis__wrapPager{ position: absolute; inset: auto 0 min(80rem, 8.24742268%); border-bottom: 2rem solid color-mix(in srgb, currentColor, #0000 80%); z-index: 1; }
.mVis__pager{ margin: 0 auto -2rem; display: flex; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);  }
.mVis .swiper-pagination-bullet{ all: unset; flex: 1; max-width: 47.5rem; padding: 14rem 0; border-bottom: 2rem solid #0000; font-size: 15rem; font-weight: 600; cursor: pointer; }
.mVis .swiper-pagination-bullet-active{ max-width: 200rem; border-bottom-color: currentColor; }
.mVis__bar{ position: relative; max-width: 170rem; height: 3rem; }
.mVis__bar::before{ content: ''; position: absolute; inset: 0; background: currentColor; opacity: .2; }
.mVis__bar::after{ content: ''; position: absolute; inset: 0; width: 0; background: currentColor; }
.mVis__bar.play::after{ animation: visual_bar 5s linear both; }
@media (prefers-reduced-motion: no-preference){
	.mVis .swiper-pagination-bullet{ transition: .3s; }
	.mVis .swiper-slide-active::before{ animation: slide_bg 3s both; }
	@keyframes slide_bg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.mVis__txt > *{ opacity: 0; animation: visual_txt .8s .3s both; }
	.mVis__txt > *:nth-child(2){ animation-delay: .6s; }
	.mVis__txt > *:nth-child(3){ animation-delay: .9s; }
	@keyframes visual_txt{
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
}
@media(max-width:767px){
	.mVis{ max-height: 100vh; }
}

/* about */
.mAbout{ padding: clamp(70rem, calc( 126 / var(--inr) * 100vw ), 126rem) 0 clamp(70rem, calc( 120 / var(--inr) * 100vw ), 120rem); }
.mAbout__title{ display: grid; }
.mAbout__p{ margin-top: 21rem; color: #555; }
.mAbout__info {background: var(--primary); overflow:hidden; display:inline-block; padding:10px 40px; border-radius:30px; color:#fff; width:70%;}
.mAbout__info li {float:left; margin-right:40px; font-weight:bold;}
.mAbout__info li:last-child {margin-right:0}
:where(.mAboutA__wrap, .mAboutA){ contain: content; position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 195rem; height: 60rem; border-radius: 5em; font-size: 14rem; font-weight: 500; color: #fff; }
.mAboutA{ border: 1px solid #0000; padding: 0 23rem; }
.mAboutA__bg{ position: absolute; transform: translate(-50%, -50%) scale(0); width: 400rem; height: 400rem; background: var(--primary); border-radius: 50%; pointer-events: none; z-index: -1; }
.mAbout__ul{ margin-top: 44rem; display: grid; gap: 20rem clamp(20rem, calc( 40 / var(--inr) * 100vw ), 40rem); }
.mAbout__a{ display: grid; padding: 53rem clamp(30rem, calc( 43 / var(--inr) * 100vw ), 43rem) 54rem; background: #fff no-repeat 87% 60rem / auto 55rem; border: 1px solid #555; border-radius: 8rem; box-shadow: 0 0 18rem 2rem rgba(0, 0, 0, 0.08); }
.mAbout__a.a1{ background-image: url('/images/main/mAbout-a1.svg'); }
.mAbout__a.a2{ background-image: url('/images/main/mAbout-a2.svg'); }
.mAbout__a.a3{ background-image: url('/images/main/mAbout-a3.svg'); }
.mAbout__head{ font-size: 20rem; }
.mAbout__body{ margin-top: 9rem; line-height: 1.5625; color: #555; }
.mAbout__view{ margin-top: 20rem; display: flex; gap: 11rem; font-size: 15rem; color: #666; }
@media(prefers-reduced-motion:no-preference){
	.mAboutA{ transition: .6s .1s; }
	.mAboutA__bg{ transition: transform .6s .1s; }
	.mAboutA:hover, .mAboutA:hover + .mAboutA__bg{ transition-delay: 0s; }
	.mAbout__a{ transition: .4s; }
}
@media(hover:hover){
	.mAboutA:not(:hover){ border-color: #ddd; color: #555; }
	.mAboutA:hover + .mAboutA__bg{ transform: translate(-50%, -50%) scale(1); }
	.mAbout__a:not(:hover){ border-color: #0000; box-shadow: none; }
}
@media(hover:none){
	.mAboutA{ background: var(--primary); }
	.mAboutA__bg{ display: none; }
}
@media(min-width:768px){
	.mAboutA__wrap{ grid-area: 1 / 2 / 4 / 3; align-self: center; justify-self: end; }
	.mAbout__ul{ grid-template-columns: repeat(3, 1fr); } 
}
@media(max-width:767px){
	.mAboutA__wrap{ margin-top: 30rem; }
	
	.mAbout__info {background: var(--primary); overflow:hidden; display:inline-block; padding:10px 40px; border-radius:100px; color:#fff; width:100%;}
	.mAbout__info li {float:left;font-weight:bold; margin-right:10px;}
	.mAbout__info li:last-child {clear:both; margin-right:0}
}

/* product */
.mProd{ contain: content; padding: clamp(70rem, calc( 121 / var(--inr) * 100vw ), 121rem) 0 clamp(70rem, calc( 79 / var(--inr) * 100vw ), 79rem); background: #1959a6 url('/images/main/mProd-bg.jpg') no-repeat 50% / cover; border-radius: 35rem; color: #fff; }
.mProd__title{ display: grid; align-items: center; justify-content: space-between; }
.mProd [class^="common__h2"]{ color: inherit; }
.mProd__control{ grid-area: 1 / 2 / 3 / 3; position: relative; top: -5rem; display: inline-flex; gap: 15rem; }
.mPord__btn{ display: flex; align-items: center; justify-content: center; width: 70rem; height: 70rem; background: #fff; border-radius: 50%; color: var(--black); }
.mProd .swiper-button-disabled{ background: rgba(255, 255, 255, 0.3); color: #fff; }
.mProd .common__arrow{ width: 7rem; }
.mProd__swiper{ margin-top: 42rem; }
.mProd__a{ display: block; text-align: center; font-size: var(--fs22); font-weight: 500; }
.mProd__noImg{ margin-bottom: 0.59090909em; aspect-ratio: 1; border-radius: 15rem; }
.mProd__img{ width: 100%; height: 100%; padding: 16rem; object-fit: scale-down; }
.mProd__scrollbar{ height: 2px; background: color-mix(in srgb, currentColor, #0000 80%); z-index: 1; }
.mProd .swiper-scrollbar-drag{ background: currentColor; border-radius: 0; }
@media(prefers-reduced-motion:no-preference){
	.mPord__btn,
	.mProd__a{ transition: .3s; }
}
@media(min-width:768px){
	.mProd__swiper{ height: var(--sHeight, auto); padding-left: 100rem; }
	.swiper-slide-prev .mProd__a{ margin-right: 100rem; margin-left: -100rem; }
	.swiper-slide-active .mProd__a{ margin-left: -100rem; }
	.swiper-slide-active .mProd__noImg{ border-radius: 20rem; }
	.mProd__scrollbar{ position: absolute; inset: auto 0 clamp(43rem, calc( 46 / var(--inr) * 100vw ), 46rem) var(--bLeft, calc( 27.7% + 20px + 100rem )); }
}
@media(min-width:1280px){
	.mProd__scrollbar{ left: var(--bLeft, calc( 21% + 33px + 100rem )); }
}
@media(max-width:1279px){
	.mProd .e3{ display: none; }
}
@media(max-width:767px){
	.mProd__swiper{ overflow: visible; }
	.mProd :is(.e1, .e2){ display: none; }
	.mProd__scrollbar{ margin-top: 40rem; }
}

/* notice */
.mNotice{ padding: clamp(70rem, calc( 130 / var(--inr) * 100vw ), 130rem) 0 clamp(70rem, calc( 92 / var(--inr) * 100vw ), 92rem); }
.mNotice .inr{ display: grid; gap: 40rem clamp(20rem, calc( 40 / var(--inr) * 100vw ), 40rem); }
.mAddr{ margin-top: 29rem; display: grid; gap: 8rem; }
.mAddr__p{ display: flex; gap: 8rem; }
.mAddr__head{ font-weight: 600; }
.mAddr__p:nth-child(2) .mAddr__head{ flex: 0 0 6.5ch; }
.mAddr__p:nth-child(3){ gap: 16rem; }
.mNotice__ul{ display: grid; gap: 17rem; }
.mNotice__a{ display: grid; grid-template-columns: 1fr auto; gap: 8rem 20rem; padding: 34rem 45rem 35rem; background: #fff; border-radius: 10rem; font-weight: 600; }
.mNotice__date{ color: var(--primary); }
.mNotice__head{ font-size: 18rem; font-weight: 600; }
.mNotice__circle{ grid-area: 1 / 2 / 3 / 3; position: relative; top: 5rem; display: flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; background: rgba(255, 255, 255, 0.1); border: 1px solid #e8e8e8; border-radius: 50%; }
@media(hover:hover){
	.mNotice__a:hover{ background: var(--primary); box-shadow: 0 0 18rem 2rem rgba(0, 0, 0, 0.06); }
	.mNotice__a:hover *{ color: #fff; }
	.mNotice__a:hover .mNotice__circle {background: #fff; border-color: #fff; }
	.mNotice__a:hover .common__arrow {fill: #111;}
}
@media(min-width:768px){
	.mNotice .inr{ grid-template-columns: 58fr 78fr; }
	.mNotice__info{ margin-top: 64rem; }
	.mAddr__p:nth-child(3){ margin-top: 45rem; }
}