main {overflow: hidden;}
/* visual */
.main_visual{ color: #fff; }
.main_visual { position: relative; }
.main_visual .visual {height: 100%; margin-bottom: -160rem;}
.main_visual .visual::before{ content: ''; position: absolute; inset: 0; background: url('/images/main/main_visual.jpg') no-repeat 50% / cover; }
.main_visual .inr{ display: flex; align-items: center;  box-sizing: border-box; height: 100%;}
.main_visual__small{ display: block; }
.main_visual__h2{ font-size: var(--fs50); line-height: 1.2;  color: var(--primary);}
.main_visual__p{ margin: 30rem 0 70rem;line-height: 1.2;  font-size: 22rem; font-weight: 500; color: var(--secondary);}
.main_visual__a{font-size: 18rem; color: var(--secondary); background: #fff; font-weight: 600; padding: 20rem 50rem; border-radius: 20px; }
.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_banner {position: relative; display: flex; border-radius: 20px; background: var(--primary); max-height: 160rem; max-width: 1400rem; margin: 0 auto; box-sizing: border-box; bottom: -80rem;}
.main_banner > * {width: 50%;}
.main_banner .banner_img {background: url(/images/main/main_banner.png) no-repeat center/cover;} 
.main_banner .banner_btn {padding: 50rem; display: flex; align-items: center; justify-content: space-between; z-index: 1;}
.main_banner .banner_btn span { width: 1px; height: 40px; background: #fff;}
.main_banner .banner_btn a {font-size: 20rem; font-weight: 500;}
.main_banner .banner_btn a img {margin-right: 20rem;}

@media (prefers-reduced-motion: no-preference){
	.main_visual .visual::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/750; }
}
@media(max-width:1280px){
	.main_banner > * {width: 100%;}
	.main_visual .visual { margin: 40rem 0;}
	.main_visual .inr {align-items: flex-end;}
	.main_banner {position: relative;}
	.main_banner .banner_img {position: absolute; left: 50%; transform: translateX(-50%); opacity: 0.5; height: 150rem; z-index: 0; bottom: 10%;}
	.main_banner .banner_btn {width: 100%; gap: 20rem;}
	.main_banner .banner_btn a {width: 45%; text-align: center;}
}
@media(max-width:767px){
	.main_visual .inr {padding-top: 120rem;}
	.main_banner {max-height: none;}
	.main_banner .banner_btn {flex-direction: column;}
	.main_banner .banner_btn a {width: 100%;}
	.main_banner .banner_btn span {width: 100%; height: 1px; opacity: 0.4;}
	.main_visual .visual::before {opacity: 0.5; background-position: 55% 20%;}

}

.main_biz {padding: 200rem 0 120rem; position: relative;}
.main_biz::before {content: url(/images/main/main_bg01.png) ; position: absolute; top: 0; right: 0; z-index: -1;}
.main_head {position: relative; padding-left: 15px; font-size: 32rem; margin-bottom: 16rem; font-family: 'NexonLv1Gothic';font-weight: 700;}
.main_head::before{content: url(/images/main/head_i01.png); position: absolute; left: -10px; top: -20px; z-index: 0;}
.biz_tabs {display: flex; gap: 60rem;}
.tab_cont_wrap {width: 100%;}

.tabs_wrap {background: #fff8ee; padding: 40rem; border-radius: 40px; min-width: 420rem;}
.tabs{ display: flex;flex-direction: column; gap: 20rem;}
.tabs h2{ white-space: nowrap ;  font-size: 22rem; font-weight: 500;}
/* .tab_link{ flex: 1; padding: 0 15px; border-bottom: 2px solid #ededed; line-height: 2.9em; text-align: center; box-sizing: border-box; cursor: pointer; font-size: 20px } */
.tab_link{ cursor: pointer; border-radius: 40px; background: #fff; height: 100rem; display: flex; align-items: center; justify-content: center;}
.tab_link.current h2 {color: var(--primary); font-weight: 600;}
.tab_link.current h2::before{ content: '•'; }
.tab_content{ display: none }
.tab_content.current{ display: block }

.main_biz figure {aspect-ratio: 920/420; width: 100%;}
.tab_content {position: relative;}
.tab_content figure {padding: 20px;}
.tab_content figure::before {z-index: -1;}
#tab_1 figure::before {background: url(/images/main/business01.jpg) no-repeat center/cover; content: ''; position: absolute; inset: 0; border-radius: 40px;}
#tab_2 figure::before {background: url(/images/main/business02.jpg) no-repeat center/cover; content: ''; position: absolute; inset: 0; border-radius: 40px;}
#tab_3 figure::before {background: url(/images/main/business03.jpg) no-repeat center/cover; content: ''; position: absolute; inset: 0; border-radius: 40px;}

.biz_link1 {position: absolute; font-size: 22rem; font-family: 'NexonLv1Gothic'; right: 0; bottom: 100%; display: flex; align-items: center; margin-bottom: 20px;}
.biz_link1 img {margin: 0 0 2px 4px;}
.biz_link2 {display: flex; background: #fff; position: absolute; bottom: 20px; right: 20px; border-radius: 40px; width: 100%; height: 100%; max-width: 400rem; max-height: 140rem; padding: 40rem; box-sizing: border-box; align-items: center; justify-content: space-between;}
.biz_link2 p {font-size: 18rem; font-weight: 600; line-height: 24rem; }

@media(max-width:1280px){
	.main_biz figure{ aspect-ratio: 450/420; }
}
@media(max-width:767px){
	.biz_tabs {flex-direction: column;}
	.tab_link {height: 80rem;}
	.tabs_wrap {padding: 10rem;}
	.tabs {gap: 10rem;}
	.main_biz figure {aspect-ratio: 450/300;}
	.biz_link2 {max-height: 100rem; padding: 20rem;}
	.main_biz::before {width: 20%; right: 40%;}
}
@media(max-width:400px){
	.biz_link2 {right: 0;}
}


/* common */

.common_a .common_arrow{ height: 12rem; }
.common_arrow{ height: 14rem; fill:none; stroke:#df9935; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;}
.common_arrow.next{ transform: rotate(180deg); }
.common_btn{ display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; background: #fff; border-radius: 50%; box-sizing: border-box;  }
@media(max-width:767px){
	.common_btn {width: 30rem; height: 30rem;}
}

/* case */
.main_case{display: flex;  padding: clamp(90rem, calc( 118 / var(--inner) * 100vw ), 118rem) 0 clamp(90rem, calc( 113 / var(--inner) * 100vw ), 113rem); }
.main_case__control{ margin-top: clamp(50rem, calc( 81 / var(--inner) * 100vw ), 81rem); display: flex; align-items: center; gap: 20rem; }
.main_case__swiper{  clip-path: inset(0 -100vw 0 0); }
.main_case__img_wrap{ overflow: hidden; position: relative; aspect-ratio: 32/28; background: #eee; border-radius: 20rem; }
.main_case__img_wrap::before{ content: ''; position: absolute; inset: 0; background: black; filter: grayscale(1); opacity: 0; z-index: 1; transition: .3s;}
.main_case__a:hover .main_case__img_wrap::before {opacity: 0.5;}
.main_case__img{ position: relative; width: 100%; height: 100%; text-indent: -100vw; }
.main_case__title{  font-size: 20rem; margin-top: 40rem; color: #fff;}
.link_hover figure {width: 80rem; height: 80rem; background: var(--primary); margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%;} 

.main_case__date{ margin-top: 8rem; font-weight: 500; color: #888; }
.main_case .inr::before{content: ''; background: #fff8ee; width: 120%; height: 280rem; display: block; position: absolute; border-radius: 20px 0 0 20px; margin-top: 120rem;}
.main_case .common_p{  position: relative; top: -1px; font-size: 20rem; margin-left: 40rem; font-weight: 500;}
.main_case__control{  margin: 40rem; }
.main_case__a{ }
.main_case__a .link_hover {opacity: 0; position: absolute; inset: 0; margin: 70rem 40rem 50rem;; z-index: 2; transition: .3s;}
.main_case__a:hover .link_hover {opacity: 1;}
.main_case__txt {max-width: 420rem; position: absolute; margin-top: 60rem;}
.main_case__swiper{ margin-left: 480rem;}
.main_case_head {display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 80rem;}
.main_case_head .biz_link1 {position: static;}

@media(max-width:767px){

	.main_case__txt {position: relative;}
	.main_case__swiper {margin-left: 0;}
}

.main_notice > .inr {display: flex; gap: 60rem; margin-top: 280rem;}
.notice_head {display: flex; justify-content: space-between; align-items: baseline;}
.notice_head .biz_link1 {position: static;}

.main_notice {position: relative;}
.main_notice::before {content: url(/images/main/main_bg02.png); position: absolute; left: 0; top: -10%;}
.notice {width: 100%;}
.notice ul li:first-child {border-top: 1px solid #000; }
.notice ul li {transition: .3s;border-bottom: 1px solid #ccc; }
.notice ul li:hover {background: var(--primary);border-radius: 10rem; }
.notice ul li:hover h2 {color: #fff;}
.notice ul li a {display: flex; align-items: center; justify-content: space-between; padding:25rem 40rem;}
.notice ul li a h2 {font-size: 20rem;}
.notice ul li a p {font-size: 16rem; color: #ccc;}
.cs {position: relative; min-width: 540rem; margin-top: 60rem;}
.cs figure {padding:80px 20px 0px; aspect-ratio: 540/320; }
.cs figure::before {z-index: -1;background: url(/images/main/main_custom.jpg) no-repeat center/cover; content: ''; position: absolute; inset: 0; border-radius: 40px;}
.cs ul li {display: flex; align-items: center; justify-content: center;gap: 20rem; margin-bottom: 15rem;}
.cs ul li i {width: 52rem; height: 52rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.cs ul li span {font-size: 20rem; font-family: 'NexonLv1Gothic'; color: #fff;}
.cs ul li a {font-size: 28rem; font-family: 'NexonLv1Gothic'; font-weight: 600; color: #fff;}
.cs figcaption {display: flex; color: #fff; gap: 20rem; justify-content: center; margin-top: 45rem;}
.cs figcaption p {font-size: 18rem; font-family: 'NexonLv1Gothic'}

@media(max-width:1280px){
	.main_notice > .inr {flex-direction: column; margin-top: 180rem;}
	.cs figure {aspect-ratio: 540/200;}
}
@media(max-width:767px){
	.cs {min-width: auto;}
	.cs figcaption {margin: 30rem 0; flex-direction: column; text-align: center; gap: 0;}
	.cs figure {padding: 60rem 20rem 20rem;}
}
@media(max-width:400px){
	.cs ul li a {font-size: 21rem;}
}


.brand_swiper {max-width: 1790rem; width: 92%; margin: 0 auto 120rem;  position: relative; }
/* .brand_swiper .swiper-wrapper {padding: 0 55rem;} */
.brand_swiper .swiper-wrapper .swiper-slide {width: auto !important;}
.brand_control {display: flex; width: 100%; justify-content: space-between; position: absolute; bottom: 15px; z-index: 2; }
.brand_control .common_btn {background: none;}
.brand_control .common_arrow {height: 24rem; stroke: #000;}
.brands {position: relative;}
.brands .inr h2 {font-size: 32rem; font-family: 'NexonLv1Gothic'; font-weight: 700; margin:120rem 0 60rem;}

@media(max-width:767px){
	.brand_swiper {width: 86%;}

}