/* visual */
.main_visual{ color: #fff; }
.main_visual .swiper-wrapper {position: absolute;}
.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/visual01.jpg'); }
.main_visual .slide2::before{ background-image: url('/images/main/visual02.jpg'); }
.main_visual .slide3::before{ background-image: url('/images/main/visual03.jpg'); }
.main_visual .swiper-slide .inr{ display: flex; align-items: center; padding-bottom: 1.8%; box-sizing: border-box; }
.main_visual__inr {max-width: 1200rem; padding-bottom: 40rem;}
.main_visual__small{ display: block; }
.main_visual__text {display: flex; flex-direction: column; height: 100%; justify-content: center;}
.main_visual__h2{margin-bottom: 25rem; font-size: var(--fs60); line-height: 1.15; text-align: center; font-family: 'montserrat'; font-weight: 800;}
.main_visual__p{ margin: 20rem 0 0 10rem; font-size: 18rem; font-weight: 500; text-align: center;}
.main_visual__a{ margin-left: 25rem; display: inline-flex; align-items: center; vertical-align: bottom; font-size: 16rem; font-weight: 700; }
.main_visual__a::before{ content: ''; margin-right: 30rem; display: inline-block; width: 60rem; height: 1px; background: currentColor; opacity: .8; }
.main_visual__a::after{ content: ''; position: relative; top: -1rem; margin-left: 10rem; display: inline-block; width: 9rem; height: 9rem; border: solid currentColor; border-width: 2px 2px 0 0; box-sizing: border-box; transform: rotate(45deg); }
.main_visual__contorl{position: relative; inset: auto 0 ; display: flex; align-items: center; height: auto; pointer-events: none; }
.main_visual__num {display: flex; flex-direction: column; position: absolute; left: 0; top: auto; bottom: auto; font-weight: 600;}
.main_visual__num span:first-child {margin-bottom: 30rem;}
.main_visual__num span:last-child {margin-top: 30rem; opacity: 0.6;}
.main_visual__arrow {display: flex; flex-direction: column; position: absolute; right: 0; z-index: 21;}
.main_visual__btn{ position: relative; top: 1rem; flex-shrink: 0; width: 10rem; height: 16rem; pointer-events: auto; }
.main_visual__btn::after{ content: ''; position: absolute; inset: -20rem; }
.main_visual__btn.prev{ margin-bottom: 30rem;}
.main_visual__btn.next{ margin-top: 30rem;}
.main_visual__bar{ position: relative;  width: 100%; height: 1px; }
.main_visual__bar::before,
.main_visual__bar::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
.main_visual__bar::before{ opacity: .2; }
.main_visual__bar::after{ width: 0; }
.main_visual__bar.play::after{ animation: progress_bar 5s linear both; }
@keyframes progress_bar {
	0%{ width: 0%; }
	100%{ width: 100%; }
}
.main_visual__pager{ margin-left: 31rem; display: inline-flex; gap: 10rem; }
.main_visual__pager .swiper-pagination-bullet{ position: relative; display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; background: 0; border: 1px solid #0000; border-radius: 50%; box-sizing: border-box; color: #fff; opacity: .6; pointer-events: auto; }
.main_visual__pager .swiper-pagination-bullet-active{ border-color: currentColor; color: #88bee9; opacity: 1; }
.main_visual__pager .swiper-pagination-bullet::before{ content: ''; display: inline-block; width: 6rem; height: 6rem; background: currentColor; border-radius: 50%; }
.main_visual__pager .swiper-pagination-bullet::after{ content: ''; position: absolute; inset: -5rem; }
.main_down{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; display: flex; flex-direction:column; gap: 29rem; font-weight: 500; color: rgba(255, 255, 255, 0.6);pointer-events: none; z-index: 11; }
.main_down::before{ content: url(/images/common/mouse.png); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 80rem;  }
.main_down__p{margin-bottom: 20px; font-family: 'S-CoreDream-3Light'; text-align: center;}
.main_down::after{ content: ''; margin: 0 auto; display: block; width: 1px; height: 40rem; background: currentColor; opacity: .8; }
@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__a{ opacity: 0; }
	.main_visual .main_visual__h2{ animation: visual_txt .6s .3s both; }
	.main_visual .main_visual__p{ animation: visual_txt .6s .5s both; }
	.main_visual .main_visual__a{ animation: visual_txt .6s .7s both; }
	@keyframes visual_txt{
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
}

@media(min-width:768px){
	.main_visual{ aspect-ratio: 1920/920; }
}
@media(max-width:767px){
	.main_visual{ height:calc(100vh - 80rem); }
	.main_down{ right: 30rem; }
}

/* common */
main *{ letter-spacing: -.025em; }
.common_cat{ position: relative; font-size: 20rem; font-weight: 700; color: var(--secondary); }
.common_h2{ margin-top: .25em; font-size: var(--fs48); font-weight: 700; line-height: 1.25; }
.common_p{ margin-top: 47rem; font-size: 18rem; font-weight: 500; line-height: 1.55555556; color: #444; }
.common_a{  display: flex;  align-items: center; gap: 16rem; padding: 10rem 0; font-weight: 700; white-space: nowrap; color: var(--primary); font-size: 20rem;}
.common_a .common_arrow{ height: 10rem; }
.common_arrow{ height: 14rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px; transform: rotate(90deg);}
.common_arrow.next{ transform: rotate(-90deg); }
.common_btn{ display: flex; align-items: center; justify-content: center; width: 30rem; height: 30rem; border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; color: var(--primary); transform: rotate(90deg);}

/* about */
.main_about {margin: 120rem 0 200rem; position: relative;}
.main_about .main_about__txt {display: flex; justify-content: space-between; margin-bottom: 80rem;}
.main_about .common_a {margin-top: 70rem;justify-content: flex-end;}
.main_about .common_a::before {content: ''; width: 100%; height: 1px; background: #cccccc; margin-right: 10rem;}
.main_about__img_wrap {display: flex; justify-content: space-between;}
.main_about__img_wrap figure {display: flex; flex-direction: column;justify-content: flex-end;    width: 100%; max-width: 45%;}
.main_about__img_wrap figure:first-child {}
.main_about__bg {font-size: 140rem; color: #e6f3fb; z-index: -1; position: absolute; font-weight: 700;top: 210rem;}
.main_about__img {border-radius: 20px;}

@media(max-width:1279px){
	.main_about .main_about__txt {flex-direction: column;}

}
@media(max-width:767px){
	.main_about__img_wrap {flex-direction: column;}
	.main_about__img_wrap figure:first-child {max-width: 80%; margin-right: auto; margin-bottom: 40rem;}
	.main_about__img_wrap figure:last-child {max-width:80%; margin-left: auto;}

}

/* product */

.main_prod{ background: url(/images/main/bg_prd01.png) no-repeat center/cover; box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.15);}
.main_prod .inr {display: flex; gap: 120rem;}
.main_prod .inr > div:first-child {width: 48%; display: flex; flex-direction: column; gap: 60rem;}
.main_prod__txt {display: flex; flex-direction: column; background: #fff; border-radius: 0 0 40rem 40rem; padding: 60rem 100rem; box-sizing: border-box; }
.main_prod__txt .common_p {margin: 80rem 0 100rem;}
.main_prod__control_wrap {display: flex;  background: #fff; border-radius: 40rem 40rem 0 0; padding: 60rem 100rem; box-sizing: border-box; }
.main_prod_head__swiper {width: 100%;}
.main_prod_head {display: flex;gap: 20rem; align-items: baseline;}
.main_prod_head span {font-size:18rem; font-weight: 600; }
.main_prod__title {font-size: var(--fs36);}
.main_prod__swiper .swiper-wrapper {height: auto;}
.main_prod__control{  display: flex; gap: 40rem; align-items: center; margin-top: 5rem;}
.main_prod__control .main_visual__btn.prev {transform: rotate(-90deg); margin-bottom: 0;}
.main_prod__control .main_visual__btn.next {transform: rotate(-90deg); margin-top: 0;}

.main_prod__btn{ display: flex; align-items: center; justify-content: center; width: 39rem; height: 39rem; border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; color: var(--primary); }
.main_prod .common_arrow{ height: 13rem; }
.main_prod__swiper{  padding:0 42rem 0 0;display: flex;align-items: center;}
.main_prod__a{  aspect-ratio: 65/65; width: 100%; padding: 10rem; background: #000 no-repeat 50% / cover; box-sizing: border-box; border-radius: 50%;box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.15);}
.main_prod .a1{ background-image: url('/images/main/prd01.jpg'); }
.main_prod .a2{ background-image: url('/images/main/prd02.jpg'); }
.main_prod .a3{ background-image: url('/images/main/prd03.jpg'); }
.main_prod .a4{ background-image: url('/images/main/prd04.jpg'); }
.main_prod__box{ display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; background: var(--primary); }
.main_prod__arrow{ height: 16rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;}

@media(max-width:1279px){
	.main_prod .inr > div:first-child {width: 100%; gap: 0;}
	.main_prod .inr {display: block; padding-bottom: 40rem;}
	.main_prod__swiper {margin:40rem auto 0; width: 100%; box-sizing: border-box; padding: 20rem 30rem 40rem;}
	.main_prod__txt {border-radius: 0; padding: 60rem 100rem 30rem;}
	.main_prod__control_wrap {padding: 0rem 100rem 30rem; border-radius:0 0 40rem 40rem;}
	.main_prod__txt .common_p {margin: 40rem 0rem;}
}
@media(max-width:767px){
	.main_prod__txt {padding: 60rem 20rem 30rem;}
	.main_prod__control_wrap {padding: 0rem 20rem 30rem;}
	.main_prod__control {gap: 20rem;}
}

/* lab */
.main_lab {display: flex; margin-top: 180rem;background: #000; }
.main_lab .inr {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main_lab .inr .common_btn {color: #fff;}
.main_lab > div {width: 50%; position: relative; aspect-ratio: 960/700;}
.main_lab > div::before { content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; transition: .3s;}
.main_lab > div:hover::before {opacity: 0.6;}
.main_lab > div:hover .common_h2 {background: var(--primary); }
.main_lab .common_h2 {margin-top: 0;padding: 4rem 20rem; transition: .3s;}
.main_lab > .main_labintro::before {background-image: url(/images/main/bg_lab.jpg);}
.main_lab > .main_equip::before {background-image: url(/images/main/bg_equip.jpg);}
.main_lab .common_h2 {color: #fff; font-size: 42rem;}
.main_lab .common_p {color: #fff; margin-top: 16rem;}
.main_lab .common_a {color: #fff; margin-top: 60rem;}

@media(max-width:767px){
	.main_lab {display: flex; flex-direction: column;}
	.main_lab > div {width: 100%;}
	.main_lab .common_h2 {font-size: 36rem;}
}

/* contact */
.main_cont{aspect-ratio: 1920/770; background: #193043 url('/images/main/bg_online.jpg') no-repeat 50% / cover; text-align: center; color: #fff; }
.main_cont .inr {display: flex; align-items: center; flex-direction: column; justify-content: center;}

.main_cont .common_h2{ margin:0 0 60rem;font-size: var(--fs60);line-height: 1.15;text-align: center;font-family: 'montserrat';font-weight: 800;}
.main_cont .common_p{ margin:0 0 70rem; color: inherit; }
.main_cont .common_a{padding: 20rem 50rem; background: #fff; color: #000;}

@media(max-width:767px){
	.main_cont {aspect-ratio: 1/1.5;}
	.main_cont .common_h2 {margin-bottom: 50rem;}
	.main_cont .common_a {padding: 15rem 25rem;}
	.main_cont .common_p {margin-bottom: 50rem;}


}