/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 공통
********************************************************/
.inner {margin: 0 auto; padding: 0 var(--side-padding); width:100%; max-width:calc(100rem + (var(--side-padding) * 2));}
.outfit {font-family: var(--ff-outfit);}
#container {position:relative;}


/*----- 타이틀 -----*/
.tit { text-align:center;}
.tit .word {max-height:clamp(1.938rem, 1.725rem + 1.063vw, 3rem); overflow:hidden; transform: translate(0, 120%);}
.tit .char {/* display: flex; flex-direction: column; align-items: center; justify-content: center; gap:clamp(1rem, 0.94rem + 0.3vw, 1.3rem); */ text-align: center; font-size: var(--font-size-40); line-height:140%; color:#333333; font-weight:700;}
.tit [class*='line'] {clip-path: inset(0); vertical-align: middle;}
.tit_eng {display:block; margin-bottom:clamp(0.5rem, 0.325rem + 0.875vw, 1.375rem); font-size:var(--font-size-20); color:var(--Brand-Color-sub); text-align: center; font-weight: 600; letter-spacing: 0.04rem;  line-height: 1.5; font-family: var(--ff-outfit);}
.sub_text {margin-top:clamp(1.5rem, 1.413rem + 0.438vw, 1.938rem); color:#515151; font-size:var(--font-size-20);}
.tit.al-l {text-align: left;}
.tit.al-l [class*='line'] {align-items: flex-start;}
.tit.al-l .tit_eng {text-align: left;}


/*----- 더보기 버튼 -----*/
.more {display: flex; align-items: center; justify-content: center; gap:clamp(1rem, 0.8rem + 1vw, 2rem); padding: clamp(0.5rem, 0.463rem + 0.188vw, 0.688rem) clamp(1rem, 0.9rem + 0.5vw, 1.5rem); min-width:clamp(10rem, 9.575rem + 2.125vw, 12.125rem); font-family: var(--ff-outfit); font-size: clamp(0.889rem, 0.879rem + 0.049vw, 0.938rem); font-weight:500; border-radius:3.75rem; border: 1px solid #000; background: #FFF; transition: all 0.3s ease;}
.more.trans {background:rgba(255,255,255,0.4); color:#fff; border-color:#fff;}
.more .arrow_bg {display: flex; align-items: center; justify-content: center; width:1.875rem; height:1.875rem; border-radius:100%; background:var(--Brand-Color-sub);}
.more .ico_arrow {width:1.25rem; height:auto; aspect-ratio:1; background-color:#fff; transition: transform 0.3s ease;}
.more:hover {gap:0.5rem; border-color:var(--Brand-Color-sub); background:var(--Brand-Color-sub); color:#fff;}



/********************************************************
■ 헤더
********************************************************/
#wrap {padding-top: 0 !important;}

#header {--head-color:var(--Text-Color-White) !important; background:transparent !important;}
#header .header_inner {transition: top 0.6s; top:-100% !important;}
#header .logo a {background-image:url('/images/default/main/logo_rw.svg?v=1');}
#header .btnAll span {background-color:var(--Gray-Color-0);}
#header:is(.headerOpen) .btnAll span {background-color:var(--Gray-Color-800) !important;}
#header:is(.headerOver) {background:#fff !important; --head-color:var(--Text-Color-Basic-1) !important;}
#header:is(.headerOver) .logo a {background-image: url('/images/default/main/logo_b.svg') !important; }
#header:is(.headerOver) .btn-gnb-menu .btnAll span{background-color: var(--Gray-Color-800) !important;}


/*----- 애니메이션 -----*/
#wrap.vsApper #header .header_inner {top:0 !important;}

/********************************************************
■ 메인 비주얼
********************************************************/
#visual {box-sizing: border-box; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); height: 100vh; height: calc((var(--vh, 1vh) * 100) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); position: relative;}
#visual .main_visual {height:100%;}


/*----- 비주얼 이미지 및 비디오 -----*/
.vis_bg_img,
.visual_vid {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;}
.visual_vid video{width: 100%; height: 100%; object-fit: cover; pointer-events: none !important; -webkit-user-select: none; user-select: none;}


/*----- 비주얼 텍스트 -----*/
.vis_txt {display: flex; flex-direction: column; gap:clamp(1rem, 0.98rem + 0.1vw, 1.1rem); padding: 0 var(--side-padding); color:#fff; font-size: clamp(1.424rem, 1.359rem + 0.326vw, 1.75rem); position:absolute; top:35.52%; left:50%; transform: translateX(-50%); z-index:1; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.vis_txt p {overflow: hidden;}
.vis_txt p > span {display:inline-block; font-weight: 600; transform: translate3d(0%, 150%, 0px); transition: transform 0.7s cubic-bezier(0.16, 1.08, 0.38, 0.98); -webkit-transition: transform 0.7s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
.vis_txt .separate {font-size: clamp(2.986rem, 2.833rem + 0.764vw, 3.75rem); font-family:var(--ff-outfit); font-weight: 600;}
.vis_txt .separate [class*='line'] {clip-path: inset(0); vertical-align: top;}
.vis_txt .separate .word {max-height:clamp(4.063rem, 3.75rem + 1.563vw, 5.625rem); overflow: hidden;  transform: translate(0, 120%); transition: transform 0.6s 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);}

.main_visual.is-ready .swiper-slide-active .vis_txt .separate .word {transform: translateY(0%);}
.main_visual.is-ready .swiper-slide-active .vis_txt p > span {transform: none; -webkit-transform: none; transition-delay: 0.55s;}


/*----- 비주얼 컨트롤러 -----*/
.main_visual .controls {padding:1.5625rem var(--side-padding) 2px; position:absolute; bottom:clamp(5rem, 4.75rem + 1.25vw, 6.25rem); left:50%; transform: translateX(-50%); z-index: 9999 !important; overflow:hidden; backface-visibility: hidden;}
.main_visual .controls .usable {display:flex; justify-content: space-between; margin-bottom: clamp(2rem, 1.8rem + 1vw, 3rem); padding-right:clamp(1.5rem, 1.4rem + 0.5vw, 2rem);}
.main_visual .controls .ani {transform: translate3d(0, 0, 0); will-change: transform; transition: none !important; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
#wrap:not(:is(.vsApper)) .main_visual .controls .ani {transform: translate3d(0, 150%, 0);}
#wrap:is(.vsApper) .main_visual .controls .ani {animation: slideUp 0.6s 0.2s forwards;}

@keyframes slideUp {
	0% { 
		transform: translate3d(0, 150%, 0);
	}
	1% {
		transform: translate3d(0, 150%, 0);
	}
	100% { 
		transform: translate3d(0, 0, 0);
	}
}

/* 네비게이션 */
.navigation {display:flex; gap:clamp(1.5rem, 1.425rem + 0.375vw, 1.875rem); transform: translateY(calc(-1 * clamp(0rem, -0.188rem + 0.938vw, 0.938rem)));}
.navigation [class*='mainVis_'] {margin-top:0; width:clamp(4rem, 3.467rem + 2.667vw, 6.667rem); height:0.875rem; position:static; background-size: auto 100%; cursor: pointer !important;}
.navigation [class*='mainVis_'] .swiper-navigation-icon {display:none;}
.navigation .mainVis_next {background:url('/images/default/main/visual_navi_r.svg') no-repeat right center;}
.navigation .mainVis_prev {background:url('/images/default/main/visual_navi_l.svg') no-repeat left center;}

/* 페이지네이션 */
.controls .mainVis_pagin {display: flex; align-items: center; justify-content: flex-end; position:static;}
.controls .mainVis_pagin .swiper-pagination-bullet {margin: 0 clamp(0.5rem, 0.412rem + 0.438vw, 0.938rem); width:clamp(0.5rem, 0.475rem + 0.125vw, 0.625rem); height:auto; aspect-ratio:1; background:#fff; opacity: 1; position:relative; transition:all 0.3s;}
.controls .mainVis_pagin .swiper-pagination-bullet:first-child {margin-left:0 !important;}
.controls .mainVis_pagin .swiper-pagination-bullet:last-child {margin-right:0 !important;}
.controls .mainVis_pagin .swiper-pagination-bullet:before {content:''; display:block; width:clamp(1.5rem, 1.275rem + 1.125vw, 2.625rem); height:auto; aspect-ratio:1; box-shadow: 0 0 0 clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem) rgba(255, 255, 255, 0.5); border-radius:100%; background: linear-gradient(180deg, #184299 0%, #0074ED 100%); position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%) scale(0); transition:transform 0.3s; z-index: -1;}
.controls .mainVis_pagin .swiper-pagination-bullet.swiper-pagination-bullet-active {margin:0 clamp(1rem, 0.825rem + 0.875vw, 1.875rem); width:0.5rem;}
.controls .mainVis_pagin .swiper-pagination-bullet.swiper-pagination-bullet-active:before {transform: translate(-50%, -50%) scale(1);}

/* 프로그래스바 */
.controls .mainVis_scrollbar {height:2px; background: rgba(255, 255, 255, 0.40); border-radius:0; position: static;}
.controls .mainVis_scrollbar .swiper-scrollbar-drag {background:#fff; border-radius:0;}


@media (max-width:768px){	
	.vis_txt .separate {line-height: 1.2;}
}
@media (max-width:767px){	
	.vis_txt .separate {font-size: clamp(1.802rem, 1.412rem + 1.948vw, 3.75rem);}
	.vis_txt .separate .word {max-height:clamp(2.375rem, 1.725rem + 3.25vw, 5.625rem);}
}
@media (max-width:450px){	
	/*----- 비주얼 텍스트 -----*/
	.vis_txt {letter-spacing:-0.05em; line-height: 1.3;}

	.main_visual .controls .ani {transform: translateY(200%);}
	#wrap.vsApper .main_visual .controls .ani {animation: slideUp 0.6s 0.2s forwards;}

	@keyframes slideUp {
		0% { 
			transform: translate3d(0, 200%, 0);
		}
		1% {
			transform: translate3d(0, 200%, 0);
		}
		100% { 
			transform: translate3d(0, 0, 0);
		}
	}
}

/********************************************************
■ BUSINESS (cts1)
********************************************************/
.cts1 {padding-top:clamp(5rem, 4.188rem + 4.063vw, 9.063rem); position:relative; background:#fff;}
.cts1 .tit {display:flex; justify-content: space-between; align-items: flex-start; padding-right: clamp(0rem, -1.2rem + 5.999vw, 5.999rem); margin-bottom:clamp(4rem, 3.438rem + 2.813vw, 6.813rem);}
.cts1 .sub_text {margin:0; padding-top:calc(clamp(1.509rem, 1.435rem + 0.366vw, 1.875rem) + clamp(0.5rem, 0.325rem + 0.875vw, 1.375rem)); font-size: var(--font-size-22); color:#333; letter-spacing:-0.05em; font-weight:500;}

/*----- 슬라이드 -----*/
.busi_wrap {display:flex; height: clamp(30rem, 27.075rem + 14.625vw, 44.625rem); transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);}

.busi_list {flex:1; z-index: 0;  margin-left: -1px;}
.busi_list [class*='busi_item0'] {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding:clamp(2rem, 1.34rem + 3.302vw, 5.303rem) clamp(1.5rem, 0.8rem + 3.5vw, 5rem); text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); color:#fff; font-size:var(--font-size-20);}
.busi_list [class*='busi_item0'] h4 {margin:0; color:#fff; font-weight:500; font-size: clamp(1.602rem, 1.485rem + 0.586vw, 2.188rem); opacity:0; transform: translateY(100%); transition: 0s;}
.busi_list [class*='busi_item0'] p {margin-top:clamp(0.75rem, 0.619rem + 0.656vw, 1.406rem); opacity:0; transform: translateY(100%); transition: 0s;}
.busi_list [class*='busi_item0'] .more {margin-top: clamp(2rem, 1.7rem + 1.5vw, 3.5rem); opacity:0; transform: translateY(100%); transition: 0s;}


/* 텍스트 애니메이션 */
.busi_wrap.aos-animate .busi_list [class*='busi_item0'].swiper-slide-active h4 {opacity:1; transform: translateY(0%); transition: 0.6s 0.5s;}
.busi_wrap.aos-animate .busi_list [class*='busi_item0'].swiper-slide-active p {opacity:0.8; transform: translateY(0%); transition: 0.6s 0.6s;}
.busi_wrap.aos-animate .busi_list [class*='busi_item0'].swiper-slide-active .more {opacity:1; transform: translateY(0%); transition: 0.6s 0.7s;}


/* 아이템별 백그라운드 */
.busi_list .busi_item01 {background:url('/images/default/main/busi01.webp?v=2') no-repeat center center; background-size:cover;}
.busi_list .busi_item02 {background:url('/images/default/main/busi02.webp?v=2') no-repeat center center; background-size:cover;}
.busi_list .busi_item03 {background:url('/images/default/main/busi03.webp?v=3') no-repeat center center; background-size:cover;}
.busi_list .busi_item04 {background:url('/images/default/main/busi04.webp?v=3') no-repeat center center; background-size:cover;}

/* 페이지네이션 */
.tab_area {flex-shrink: 0; width:21.875%; background: linear-gradient(93deg, #0065DC -1.37%, #003676 102.36%); position:relative; z-index: 1;}
.tab_area .busi_tab {display: flex; flex-direction: column; gap:clamp(1rem, 0.794rem + 1.031vw, 2.031rem); margin-left: clamp(0rem, -1.988rem + 9.938vw, 9.938rem); margin-top: 36%; width: 62.14%; text-align: left; position:static;}
.busi_tab .swiper-pagination-bullet {display: flex; align-items: center; gap: 0.4rem; margin:0 !important; width:auto; height:auto; font-weight: 400; line-height: 1.36; font-size:var(--font-size-22); color:rgba(255,255,255,0.8); border-radius:0; background:transparent; opacity:1; position:relative; z-index: 0; transition: padding-left 0.6s;}
.busi_tab .swiper-pagination-bullet:before {content:''; display:block; width:4px; height:4px; border-radius:100%; background:#fff; position:absolute; top:50%; left:clamp(0.375rem, 0.263rem + 0.563vw, 0.938rem); transform: translateX(-10px) translateY(-50%); opacity:0; transition: 0.6s;}
.busi_tab .swiper-pagination-bullet span {color:rgba(255,255,255,0.8); font-size:var(--font-size-22); position:relative;}
.busi_tab .swiper-pagination-bullet:after {content:''; display:block; width:0; height:0; background:var(--Brand-Color-sub); border-top-right-radius:var(--radius30); position:absolute; top:0; left:0; transition: width 0.6s;  z-index: -1;}
.busi_tab .swiper-pagination-bullet-active {padding: clamp(0.375rem, 0.244rem + 0.656vw, 1.031rem) 0 clamp(0.375rem, 0.244rem + 0.656vw, 1.031rem) clamp(1rem, 0.838rem + 0.813vw, 1.813rem); margin:0 !important; width:calc(100% + 1rem); height:clamp(2.75rem, 2.425rem + 1.625vw, 4.375rem); font-size:var(--font-size-24); color:#fff; font-weight:600;  overflow:hidden;}
.busi_tab .swiper-pagination-bullet-active:after {width:100%; height:100%;}
.busi_tab .swiper-pagination-bullet-active:before {transform: translateX(0) translateY(-50%); opacity:1;}
.busi_tab .swiper-pagination-bullet-active span {color:#fff; font-size:var(--font-size-24); font-weight:600;}


@media (max-width:1200px){
	.cts1 .tit {padding-right:0;}

	/* 페이지네이션 */
	.tab_area .busi_tab {margin-left:var(--side-padding); width:100%;}
}
@media (max-width:1028px){
	.cts1 .tit {flex-direction: column; align-items: flex-start;}
	.cts1 .tit h3,
	.cts1 .sub_text {width:100%;}
	.cts1 .tit br.web {display:none;}

	/* 페이지네이션 */
	.busi_tab .swiper-pagination-bullet-active {width: calc(100% + clamp(0.375rem, 0.25rem + 0.625vw, 1rem));}
}
@media (max-width:767px){
	.busi_wrap { flex-direction: column; height:auto;}
	.busi_list {margin-left: 0;}

	.busi_list {flex:unset; width: 100%; height: clamp(30rem, 27.075rem + 14.625vw, 44.625rem);}
	.tab_area {flex:1; width:100%; background:unset;}
	.tab_area .busi_tab {display:none; flex-direction:row; justify-content: center; align-items: center; margin: 0; width: auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
	.busi_tab .swiper-pagination-bullet {width:8px; height:auto; aspect-ratio:1; border-radius:100%; justify-content: center; text-align: center; gap: 0.25rem;font-size:0; background:#ff5d59; transition: border-radius 0.6s, width 0s;}
	.busi_tab .swiper-pagination-bullet:before {display:none;}
	.busi_tab .swiper-pagination-bullet span {font-size:0;}
	.busi_tab .swiper-pagination-bullet-active {width:8rem; height:auto; background:var(--Brand-Color-sub); aspect-ratio:unset; padding:clamp(0.375rem, 0.244rem + 0.656vw, 1.031rem); font-size: var(--font-size-22); white-space: nowrap; border-radius:4rem; transition: border-radius 0.6s, width 0.6s}
	.busi_tab .swiper-pagination-bullet-active span {font-size: var(--font-size-22);}

	/* 탭 애니메이션 */
	.busi_tab .swiper-pagination-bullet-active,
	.busi_tab .swiper-pagination-bullet-active span{color:#fff;}
	.busi_tab .swiper-pagination-bullet:after {display:none;}
}
@media (max-width:540px){
}

/********************************************************
■ SPECIAL (cts2)
********************************************************/
.cts2 {padding:clamp(5rem, 4.125rem + 4.375vw, 9.375rem) 0;}
.cts2 .tit {display:flex; justify-content: space-between; align-items: flex-end; margin-bottom:clamp(5rem, 4.875rem + 0.625vw, 5.625rem);}

/*----- 그리드 레이아웃 -----*/
.sp_grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem, 0.8rem + 1vw, 2rem);}
.sp_grid .grid-rows{display:grid; grid-template-rows:1fr 1fr; gap:clamp(1rem, 0.8rem + 1vw, 2rem);}
.sp_grid .col-span-4{grid-column:span 4;}
.sp_grid .col-span-5{grid-column:span 5;}
.sp_grid .col-span-7{grid-column:span 7;}
.sp_grid .col-span-8{grid-column:span 8;}
.sp_grid .h-row{display:flex; gap: clamp(1rem, 0.8rem + 1vw, 2rem);} 


/* 공통 */
.stat-card {clip-path: inset(0);}
.stat-card .inn {display:flex; flex-direction:column; gap:clamp(0.5rem, 0.4rem + 0.5vw, 1rem); padding:clamp(1rem, 0.6rem + 2vw, 3rem) clamp(1rem, 0.7rem + 1.5vw, 2.5rem); min-height:clamp(12.5rem, 11.875rem + 3.125vw, 15.625rem); position:relative; overflow:hidden; transform:translateX(101%);}
.stat-card .card-tit {margin:0; font-size: clamp(0.889rem, 0.842rem + 0.236vw, 1.125rem); line-height:140%; color:var(--Text-Color-Basic-1); font-weight:500;}
.stat-card .card-subTit {margin: 0; color:#fff; font-size: clamp(1.602rem, 1.447rem + 0.773vw, 2.375rem);font-weight: 500; clip-path: inset(0);}
.stat-card .card-subTit p {transform: translateY(100%);}
.stat-card:is(.his-year, .card-truck) .card-tit {color:#fff;}
.stat-card .stat-group {display: flex; align-items: flex-end; gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem); color:var(--Brand-Color-point);}
.stat-card:is(.his-year) .stat-group {color:#fff;}
.stat-card .stat-group p {font-weight:500;}
.stat-card .stat-value {flex-shrink: 0; font-size:var(--font-size-40); font-weight:500; line-height: 1; clip-path: inset(0);}
.stat-card .stat-value p {transform: translateY(100%);}

/* 구획별 css */
.sp_grid.active .stat-card .inn {transform:translateX(0);} 
.sp_grid.active .stat-value p,
.sp_grid.active .stat-card .card-subTit p {transform: translateY(0);}
.prod-cnt .inn,
.prod-cnt .stat-value p,
.his-year .inn,
.his-year .stat-value p,
.db-cnt .inn,
.db-cnt .stat-value p,
.prtn-cnt .inn,
.prtn-cnt .stat-value p,
.card-truck .inn,
.stat-card .card-subTit p{transition: all 0.6s 0s;}

.sp_grid.active .prod-cnt .inn           { transition: all 0.6s 0.1s; }
.sp_grid.active .prod-cnt .stat-value p   { transition: all 0.4s 0.5s; }
.sp_grid.active .his-year .inn           { transition: all 0.6s 0.3s; }
.sp_grid.active .his-year .stat-value p   { transition: all 0.4s 0.7s; }
.sp_grid.active .db-cnt .inn             { transition: all 0.6s 0.5s; }
.sp_grid.active .db-cnt .stat-value p     { transition: all 0.4s 0.9s; }
.sp_grid.active .prtn-cnt .inn           { transition: all 0.6s 0.7s; }
.sp_grid.active .prtn-cnt .stat-value p   { transition: all 0.4s 1.1s; }
.sp_grid.active .card-truck .inn         { transition: all 0.6s 0.9s; }
.sp_grid.active .stat-card .card-subTit p { transition: all 0.4s 1.3s; }

.prod-cnt, .prtn-cnt {width:35.20%;}
.his-year, .db-cnt {width:61.79%;}
.prod-cnt .inn {background:#EFF0F5 url('/images/default/main/card_prod.png') no-repeat bottom right;  background-size:30% auto;}
.his-year .inn {color:#fff; background:var(--Brand-Color-point) url('/images/default/main/card_his.svg') no-repeat bottom right; background-size:30% auto; color:#fff;}
.prtn-cnt .inn {background:#EFF0F5 url('/images/default/main/card_prtn.png') no-repeat bottom right;  background-size:45% auto;}
.db-cnt .inn {background:#EFF0F5 url('/images/default/main/card_db.png') no-repeat bottom right;  background-size:50% auto;}
.card-truck .inn {justify-content: flex-start; gap:0; height: 100%; background:url('/images/default/main/card_truck.png') no-repeat center center; background-size:cover; }

@media (max-width:1200px){	
	/* 구획별 css */
	.prod-cnt, .prtn-cnt {flex:1;}
	.his-year, .db-cnt {width: 57.79%;}
}
@media (max-width:1028px){	
	.sp_grid .col-span-8{grid-column:span 7;}
	.sp_grid .col-span-4{grid-column:span 5;}
	.sp_grid .h-row {flex-direction:column;}

	/* 공통 */
	.stat-card:not(.card-truck) .inn {min-height:unset;}
	
	/* 구획별 css */
	.prtn-cnt .inn {transition: all 0.8s 0.3s;}
	.db-cnt .inn {transition: all 0.8s 0.2s;}

	.prod-cnt, .prtn-cnt,
	.his-year, .db-cnt {flex:1; width:100%;}
	.prod-cnt .inn{background-size: auto 80%;}
	.db-cnt .inn{background-size: auto 90%;}
	.prtn-cnt .inn{background-size: auto 100%;}
}
@media (max-width:767px){	
	.cts2 .tit {flex-direction: column; align-items: flex-start;  gap: 1.5rem;}
	.cts2 .tit .inner_wrap {width:100%;}
}
@media (max-width:640px){	
	.sp_grid {display: flex; flex-direction: column;}
	.stat-card:is(.card-truck) .inn{min-height:unset;}

	/* 구획별 css */
	.card-truck {background-position:center 34%;}
}



/********************************************************
■ KEY SERVICES (cts3)
********************************************************/
.cts3 {padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); height: 100vh; height: calc((var(--vh, 1vh) * 100) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:hidden; position: relative; transform-origin: top; will-change: transform, opacity; z-index:1;}
/* .cts3:before {content:''; display:block; width:auto; height:100%; aspect-ratio: 229.11 / 1098.84; background:url('/images/default/main/symb_img.png') no-repeat center center; background-size:100% auto; position:absolute; top:50%; right: 90%; transform: translateY(-50%); pointer-events: none; z-index:1;} */
.cts3 .inner {height:100%;}
/* .cts3-scroll-gap { height: 200vh; background: transparent; pointer-events: none; } */

/*----- 슬라이드 -----*/
.key_serv {height: 100%; position:relative; z-index:0;}
.key_serv .tit .char {align-items: flex-start; color:#fff; text-align: left;}


/* 글자 구역 */
.key_serv .cont_area {display: flex; align-items: flex-start; flex-direction: column; margin: 0 auto; width: calc(100% - clamp(5rem, 2.7rem + 11.5vw, 16.5rem)); height: 100%; position:relative; z-index: 0;}
.key_serv .cont_area:after {content: ''; display: block; width: 50%; height: 100%; background: #030308; border-radius: 100%; filter: blur(150px); opacity: 0.3; z-index: -1;}
.key_serv .cont_area [class*='key'] {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap:clamp(1.5rem, 0.8rem + 3.5vw, 5rem); width: 60%; height: 100%; color:#fff; pointer-events: auto; transition: transform 0s, opacity 0s; opacity: 0; pointer-events: none;  position: absolute; top: 50%; left: 0; z-index: 0; transform: translateX(-50%) translateY(-50%);}
.key_serv .cont_area [class*='key'].active {transform: translateX(0) translateY(-50%); opacity: 1; z-index: 1; transition: transform 0.6s 0.2s, opacity 0.6s 0.2s;}
.key_serv .cont_area [class*='key'] .text {padding-left:clamp(1rem, 0.7rem + 1.5vw, 2.5rem); clip-path: inset(0); position:relative;}
.key_serv .cont_area [class*='key'] .text:before {content:''; display:block; width:1px; height:0; background:#fff; position:absolute; top:0; left:0; transition: height 0s}
.key_serv .cont_area [class*='key'] h4 {margin:0; font-size: clamp(1.424rem, 1.271rem + 0.764vw, 2.188rem); color:#fff; font-weight: 500; transform: translateX(-200%);  transition: transform 0;}
.key_serv .cont_area [class*='key'] p {margin-top:clamp(0.75rem, 0.688rem + 0.313vw, 1.063rem); font-size: var(--font-size-20); opacity:0.8; transform: translateX(-200%);  transition: transform 0;}

.key_serv .cont_area [class*='key']:not(.key1).active .text:before,
.key_serv .cont_area .key1.revealed .text:before{height:100%; transition: height 0.3s 0.5s}
.key_serv .cont_area [class*='key']:not(.key1).active h4,
.key_serv .cont_area .key1.revealed h4{transform: translateX(0); transition: transform 0.6s 0.7s;}
.key_serv .cont_area [class*='key']:not(.key1).active p,
.key_serv .cont_area .key1.revealed p{transform: translateX(0); transition: transform 0.6s 0.75s;}
.key_serv .cont_area .key1.active {opacity: 0; transform: translateX(-50%) translateY(-50%); transition: transform 0s, opacity 0s;}
.key_serv .cont_area .key1.revealed {opacity: 1; transform: translateX(0) translateY(-50%); transition: transform 0.6s 0.2s, opacity 0.6s 0.2s;}


/* 이미지 구역 */
.key_serv .slides {overflow: hidden;width: 100vw;height: 100%;position: absolute;left: 50%;top: 0;transform:translateX(-50%);z-index: -1;}
.key_serv .slides [class*='key'] {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.key_serv .slides [class*='key'] span {display:block; width:100%; height:100%; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition: clip-path 1s ease-in-out, transform 1s ease-in-out, background-position 1.5s ease-out; transform: translateX(10%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position:-60% 50%; background-size:cover; background-repeat:no-repeat;}
.key_serv .slides [class*='key'].active span {clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); background-position: 50% 50%; transform: translateX(0);}


/*----- 슬라이드 탭 -----*/
.cont_tab {display: flex; justify-content: flex-end; width: 100%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); pointer-events: none;}
.cont_tab >  ul {flex-shrink: 0;width:17.5rem;}
.cont_tab .key_tab {border-radius: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);  border:1px solid transparent; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(10px); pointer-events: auto; transition: border 0.5s, background 0.5s;}
.cont_tab .key_tab:not(:last-child) {margin-bottom:clamp(1rem, 0.8rem + 1vw, 2rem)}
.cont_tab .key_tab button {display:flex; flex-direction:column; gap:clamp(0.375rem, 0.338rem + 0.188vw, 0.563rem); padding: clamp(0.5rem, 0.325rem + 0.875vw, 1.375rem) clamp(1rem, 0.9rem + 0.5vw, 1.5rem); width: 100%; height: 100%; text-align: left; color:#fff; font-size: clamp(0.889rem, 0.842rem + 0.236vw, 1.125rem); position:relative; transition: padding-left 0s;}
.cont_tab .key_tab button:after {content:''; display:block; width:clamp(1.375rem, 1.31rem + 0.323vw, 1.698rem); height:auto; aspect-ratio:7/5; forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; background-color:#fff; -webkit-mask-image: url('/images/default/main/key_tab_icon.svg'); mask-image: url('/images/default/main/key_tab_icon.svg'); position: absolute; top: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
right: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);} 
.cont_tab .key_tab .dot {margin-right:0.625rem; display:none;}
.cont_tab .tab_img {display:block; width:100%; max-width:clamp(6.875rem, 6.375rem + 2.5vw, 9.375rem); height:auto; aspect-ratio: 150 / 62; border-radius: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);}

.cont_tab .key_tab.active .tab_img,
.cont_tab .key_tab.active button:after {display:none;}
.cont_tab .key_tab.active {width: calc(100% + 61.95%); background:var(--Brand-Color-point); border-color:rgba(255,255,255,0.5); backdrop-filter:unset;}
.cont_tab .key_tab.active:not(:last-child) {margin-bottom:clamp(1rem, 0.6rem + 2vw, 3rem)}
.cont_tab .key_tab.active:last-child {margin-top:clamp(1rem, 0.6rem + 2vw, 3rem)}
.cont_tab .key_tab.active button{padding:clamp(0.5rem, 0.343rem + 0.787vw, 1.288rem); padding-left: clamp(1rem, 0.7rem + 1.5vw, 2.5rem); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); font-weight: 500; transition: padding-left 0.6s;}
.cont_tab .key_tab.active .dot {display:inline-block;}

@media (max-width:1850px){	
	.cts3:before {right: 93%;}
}
@media (max-width:1700px){	
	.cts3:before {right: 95%;}

	.cont_tab > ul {width:19rem;}
	.cont_tab .key_tab {width:15rem;}
}
@media (max-width:1028px){	
	.cts3:before {width:100%; height:auto; background-image:url('/images/default/main/symb_img_tab.png'); background-position: bottom center; left:50%; bottom:calc(-1 * clamp(1rem, 0.6rem + 2vw, 3rem)); top:auto; transform: translateY(0) translateX(-50%);}

	.cont_tab {width:100%; top: clamp(2rem, 1.8rem + 1vw, 3rem); transform: unset;}
	.cont_tab > ul {display:flex; align-items:stretch; gap:clamp(0.5rem, 0.2rem + 1.5vw, 2rem) clamp(0.5rem, 0.2rem + 1.5vw, 2rem); width: 100%;}
	.cont_tab .key_tab {width:calc((100% - clamp(0.5rem, 0.2rem + 1.5vw, 2rem) * 3)/4)}
	.cont_tab .key_tab:not(:last-child),
	.cont_tab .key_tab.active:not(:last-child),
	.cont_tab .key_tab.active:last-child {margin-bottom:0; margin-top:0;}
	.cont_tab .key_tab button {padding: 0.75rem; justify-content: center; text-align: center;}
	.cont_tab .key_tab button:after {display:none;}
	.cont_tab .key_tab.active {width:calc((100% - clamp(0.5rem, 0.2rem + 1.5vw, 2rem) * 3)/4); height: 100%; border-radius: var(--radius30);}
	.cont_tab .key_tab.active button {justify-content: center; padding: 0.75rem; text-align: center;}
	.cont_tab .key_tab.active .dot {display:none;}

	.key_serv .cont_area {justify-content: flex-start; width:calc(100% - clamp(0rem, -0.4rem + 2vw, 2rem)); left:clamp(0rem, -0.4rem + 2vw, 2rem); top:auto; bottom:clamp(6.25rem, 2.5rem + 18.75vw, 25rem); transform:unset;}
	.key_serv .cont_area [class*='key'] {justify-content: flex-end; width:100%;}
	.cont_tab .tab_img {max-width:100%;}
}
@media (max-width:767px){
}
@media (max-width:640px){
	.cont_tab > ul {flex-wrap:wrap; align-items: stretch;}
	.cont_tab .key_tab,
	.cont_tab .key_tab.active {width:calc((100% - clamp(0.5rem, 0.2rem + 1.5vw, 2rem) * 1)/2); height:auto;}
	.cont_tab .key_tab.active {border-radius: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);}
	.cont_tab .key_tab.active button {font-size: clamp(0.889rem, 0.842rem + 0.236vw, 1.125rem);}
	.cont_tab .tab_img {display:none;}

	.key_serv [class*='key']:not(.key_tab) h4 {letter-spacing: -0.05em;}
}
@media (max-width:450px){
	/* .cts3-scroll-gap {height: 450vh;} */
}


/********************************************************
■ AI DATA (cts4)
********************************************************/
.cts4 {padding: clamp(5rem, 4.125rem + 4.375vw, 9.375rem) 0 clamp(5rem, 3.75rem + 6.25vw, 11.25rem); height:100vh; background:#fff url('/images/default/main/ai_bg.webp') no-repeat top center; background-size:cover; position:relative; z-index: 1; box-shadow: rgba(0, 0, 0, 0.02) 0px -2px 1px, rgba(0, 0, 0, 0.02) 0px -8px 7px, rgba(0, 0, 0, 0.02) 0px -14px 13px, rgba(0, 0, 0, 0.02) 0px -20px 19px, rgba(0, 0, 0, 0.02) 0px -26px 25px; transform-origin: top; will-change: transform, opacity;}
.cts4 .tit {margin-bottom:clamp(3rem, 2.888rem + 0.563vw, 3.563rem);}
/* .cts4-scroll-gap { height: 50vh; background: transparent; pointer-events: none; } */


/*----- 인포그래픽 -----*/
.ai_infographic {display:flex; align-items: stretch; justify-content: space-between; padding: 0 clamp(0rem, -0.545rem + 2.724vw, 2.724rem); position: relative; transform:translateY(50%); opacity:0; transition: transform 0.6s 0s, opacity 0.6s 0s;}
.ai_infographic:before {content:''; display:block; width:18.4275%; height:auto; aspect-ratio:295/337; background:url('/images/default/main/ai_line1.svg') no-repeat center center; background-size:cover; position:absolute; top:50%; right:53.81%; transform:translateY(-50%); z-index:-1;}
.ai_infographic:after {content:''; display:block; width:18.38125%; height:auto; aspect-ratio:295/342; background:url('/images/default/main/ai_line2.svg') no-repeat center center; background-size:cover; position:absolute; top:50%; left:53.81%;; transform:translateY(-50%); z-index:-1;}
.ai_infographic [class*='ai_']:not(.ai_center) {width:26%;}
.ai_infographic [class*='ai_']:not(.ai_center) > ul {display:flex; flex-direction:column; gap:clamp(1rem, 0.9rem + 0.5vw, 1.5rem); width: 100%;}
.ai_infographic [class*='_item'] {clip-path: inset(0);}
.ai_infographic [class*='_item'] .inn {display: flex; flex-direction: column; justify-content: center; flex:1; padding:clamp(1rem, 0.8rem + 1vw, 2rem) clamp(1rem, 0.7rem + 1.5vw, 2.5rem);}
.ai_infographic [class*='_item'] .text{display:flex; justify-content: space-between; gap:1.5rem; align-items: center;}
.ai_infographic [class*='_item'] h4 {display: flex; flex-direction: column; align-items: flex-start; gap:clamp(0.25rem, 0.15rem + 0.5vw, 0.75rem); margin:0; font-size: var(--font-size-22); font-weight:500;}
.ai_infographic [class*='_item'] h4 > em {display:inline-block; padding:clamp(0.125rem, 0.087rem + 0.188vw, 0.313rem) clamp(0.5rem, 0.4rem + 0.5vw, 1rem); font-size: clamp(0.79rem, 0.773rem + 0.085vw, 0.875rem); font-weight:400; border-radius:5rem;}

.cts4.active .ai_infographic {transform:translateY(0); opacity:1; transition: transform 0.6s 0.4s, opacity 1s 0.4s;}


/* 왼쪽 */
.ai_left {display:flex; align-items: center;}
.l_item .inn {background:var(--Brand-Color-point);}
.l_item:first-child .inn {border-top-left-radius:var(--radius30);}
.l_item:last-child .inn {border-bottom-left-radius:var(--radius30);}
.l_item h4 {color:#fff;}
.l_item h4 > em {color:var(--Brand-Color-point); background:#fff;}
.l_item .icon {display: flex; justify-content: center; align-items: center; flex-shrink: 0; width:60px; height:auto; aspect-ratio: 1; background: rgba(0, 0, 0, 0.60); border-radius:clamp(0.375rem, 0.343rem + 0.161vw, 0.536rem);}
.l_item .icon img {width:61.66%;}

.ai_left.active .l_item .inn {transform:translateX(0); opacity:1;}




/* 가운데 */
.ai_center {display:flex;align-items:center;justify-content:center;align-self: center; width:clamp(7.5rem, 7.125rem + 1.875vw, 9.375rem);height:auto;aspect-ratio:167.52/193;position:relative;z-index:1;}
.ai_center:before,
.ai_center:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0; background-color:var(--Brand-Color-sub); forced-color-adjust: none; -webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url('/images/default/main/hex-mask.svg'); mask-image: url('/images/default/main/hex-mask.svg');  z-index:-1;}
.ai_center:before {transform: scale(1.35); opacity: 0.12;}
.ai_center:after {transform: scale(2.05); opacity: 0.04;}
.ai_center .hex-cont {width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--Brand-Color-sub); forced-color-adjust: none; -webkit-mask-repeat: no-repeat;-webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url('/images/default/main/hex-mask.svg'); mask-image: url('/images/default/main/hex-mask.svg'); position:relative;z-index:10;transition:transform 0.3s ease;}
.ai_center .hex-cont:before {content:''; display:block; width:15.53%; height:auto; aspect-ratio:13/11; background:var(--Brand-Color-sub) url('/images/default/main/ai_symbol.svg') no-repeat center center; background-size:100% auto; background-blend-mode: luminosity; position:absolute; top:clamp(2.375rem, 2.275rem + 0.5vw, 2.875rem); right:clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}
.ai_center .hex-cont img {width: 78.44%; -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}




/* 오른쪽 */
.ai_right > ul {height:100%;}
.r_item .inn {background:#EFF0F5;}
.r_item:first-child .inn {border-top-right-radius: var(--radius30);}
.r_item:last-child .inn {border-bottom-right-radius: var(--radius30);}
.r_item h4 > em {color:#fff; background:var(--Brand-Color-point);}
.r_item .desc {padding: clamp(0.5rem, 0.4rem + 0.5vw, 1rem); margin-top:clamp(1rem, 0.938rem + 0.313vw, 1.313rem); color:var(--Text-Color-Basic-1); font-size: var(--font-size-16); background:#fff;}
.r_item .icon img {width:clamp(2.5rem, 2.225rem + 1.375vw, 3.875rem);}

@media (max-width:1440px){	
	.ai_infographic [class*='ai_']:not(.ai_center) {width:33%;}
}
@media (max-width:1028px){	
	.cts4 {height:auto;}
	.ai_infographic {flex-direction: column; gap: 3rem;}
	.ai_infographic:before {width:80%; aspect-ratio:912/297; background-image:url('/images/default/main/ai_line1_tab.svg'); top:auto; bottom: 55%; right:auto; left:50%; transform: translateY(0) translateX(-50%);}
	.ai_infographic:after {width:50%; aspect-ratio:912/257; background-image:url('/images/default/main/ai_line2_tab.svg'); right:auto; left:50%; top:55%; transform: translateY(0) translateX(-50%);}
	.ai_infographic [class*='ai_']:not(.ai_center),
	.ai_infographic [class*='ai_']:not(.ai_center) > ul {width:100%;}
	.ai_infographic [class*='ai_']:not(.ai_center) > ul {flex-direction: row;}

	/* 왼쪽 */
	.l_item:last-child .inn {border-bottom-left-radius:0; border-top-right-radius:var(--radius30);}

	/* 오른쪽 */
	.r_item:first-child .inn {border-top-right-radius: 0; border-bottom-left-radius: var(--radius30);}
}
@media (max-width:767px){
	.ai_infographic [class*='ai_']:not(.ai_center) > ul {flex-direction: column;}

	/* 왼쪽 */
	.l_item:first-child .inn {border-top-left-radius:var(--radius30); border-top-right-radius:var(--radius30);}
	.l_item:last-child .inn {border-bottom-left-radius:var(--radius30); border-bottom-right-radius:var(--radius30); border-top-right-radius:0;}

	/* 오른쪽 */
	.r_item:first-child .inn {border-top-right-radius: var(--radius30); border-top-left-radius: var(--radius30); border-bottom-left-radius: 0;}
	.r_item:last-child .inn {border-bottom-left-radius: var(--radius30);}
}


/********************************************************
■ 랩케어 (cts5)
********************************************************/
.cts5 {padding:clamp(5rem, 4.75rem + 1.25vw, 6.25rem) 0; background: #fff; position:relative; z-index: 3; /* box-shadow: rgba(0, 0, 0, 0.02) 0px -2px 1px, rgba(0, 0, 0, 0.02) 0px -8px 7px, rgba(0, 0, 0, 0.02) 0px -14px 13px, rgba(0, 0, 0, 0.02) 0px -20px 19px, rgba(0, 0, 0, 0.02) 0px -26px 25px; */}
.cts5:after {content:''; display:block; width:50%; height:100%; background:url('/images/default/main/labcare_bg.webp') no-repeat center center; background-size:cover; position:absolute; top:0; right:0; z-index:-1; clip-path: inset(0 0 0 100%); transition:clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);}
.cts5.active:after {clip-path: inset(0 0 0 0);}
.cts5 .tit {width:50%; padding-right:1.5rem;}
.cts5 .sub_text {opacity:0; transform:translateY(100px); transition:all 1s cubic-bezier(0.22, 1, 0.36, 1);}
.cts5 .sub_text.active {opacity:1; transform:translateY(0);}
.labcare_btm {display:flex; justify-content: space-between; gap:1rem; margin-top:clamp(3rem, 1.65rem + 6.75vw, 9.75rem);}


/*----- 랩케어 다운버튼 -----*/
.down_link {flex-shrink:0; width: 22.75%;}
.down_link a {display: flex; flex-direction: column; justify-content: center; padding: clamp(0.75rem, 0.5rem + 1.25vw, 2rem); height: 100%; border-radius: 1rem; box-shadow: inset 0 0 0 2px #EFF0F5; background: #EFF0F5; transition:all 0.3s;}
.down_link:hover a {filter: drop-shadow(4px 4px 16px rgba(154, 14, 14, 0.12)); box-shadow: inset 0 0 0 2px #E10600; outline:none;}
.down_link .txt {display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-22); font-weight: 600; line-height:160%;}
.down_link .txt > span {color: var(--Brand-Color-sub); font-size: clamp(0.79rem, 0.773rem + 0.085vw, 0.875rem); font-family: var(--ff-outfit); font-weight: 700;}
.down_link .img {display:block; margin-top: clamp(0.5rem, 0.39rem + 0.55vw, 1.05rem); width:100%; height:auto; aspect-ratio:300/168; border-radius: var(--radius10);}


/*----- 랩케어 기능 -----*/
.functions {margin-right: -5%; margin-top: calc(-1 * clamp(0rem, -0.5rem + 2.5vw, 2.5rem)); margin-top: calc(-1 * clamp(0rem, -0.5rem + 2.5vw, 2.5rem)); width:66%;}
.functions ul {display:flex; align-items: stretch; gap:clamp(1rem, 0.8rem + 1vw, 2rem); height: 100%;}
.functions [class*='func'] {flex:1; clip-path: inset(-15px); transition:all 0.3s;}
.functions [class*='func'] .inn {display: flex; flex-direction: column; gap:clamp(1rem, 0.81rem + 0.95vw, 1.95rem); height: 100%; max-height:17.9375rem; padding: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem); padding-top: clamp(1rem, 0.475rem + 2.625vw, 3.625rem); color:var(--Text-Color-Basic-1); border-radius: var(--radius10); background: #FFF; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10); overflow:hidden; position: relative; transform:translate(0,0); z-index:0;}
.functions [class*='func'] .inn:after {content:''; display:block; width:clamp(2.5rem, 1.75rem + 3.75vw, 6.25rem); height:auto; aspect-ratio:1; forced-color-adjust: none;
-webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat;  mask-position: center center; mask-size: contain; background-color:#EFF0F5; position:absolute; top:clamp(2rem, 1.925rem + 0.375vw, 2.375rem); right:calc(-1 * clamp(1rem, 0.95rem + 0.25vw, 1.25rem)); z-index:-1; pointer-events: none; transition:all 0.3s;}
.functions [class*='func']:hover:has(.end) {transform:translateY(calc(-1 * clamp(1.5rem, 1.3rem + 1vw, 2.5rem)));}
.functions [class*='func']:hover .inn:after {background-color:var(--Brand-Color-point);}
.functions [class*='func'] h4{display: flex; flex-direction: column; gap: clamp(0.375rem, 0.237rem + 0.688vw, 1.063rem); align-items: flex-start; margin:0; font-size:var(--font-size-24);}
.functions [class*='func'] em {display: inline-flex; justify-content: center; align-items: center; padding:clamp(0rem, -0.069rem + 0.344vw, 0.344rem) clamp(0.5rem, 0.4rem + 0.5vw, 1rem); color:#fff; font-family: var(--ff-outfit); font-size: clamp(0.889rem, 0.879rem + 0.049vw, 0.938rem); letter-spacing: 0.045rem; border-radius:4.375rem; background:var(--Brand-Color-point);}
.functions [class*='func'] p {letter-spacing: -0.02em; font-size: clamp(0.889rem, 0.842rem + 0.236vw, 1.125rem);}

/* 아이콘 이미지 */
.func1 .inn:after {-webkit-mask-image: url('/images/default/main/function1.svg'); mask-image: url('/images/default/main/function1.svg');}
.func2 .inn:after {-webkit-mask-image: url('/images/default/main/function2.svg'); mask-image: url('/images/default/main/function2.svg');}
.func3 .inn:after {-webkit-mask-image: url('/images/default/main/function3.svg'); mask-image: url('/images/default/main/function3.svg');}
.func4 .inn:after {-webkit-mask-image: url('/images/default/main/function4.svg'); mask-image: url('/images/default/main/function4.svg');}


/*----- 배경 애니메이션 -----*/
.cts5 .bg_deco {position:absolute; top:48.83%; left:-7.21%; z-index:-1;}
.cts5 .bg_deco .wiggle {--radius: 15px; --duration: 8s; animation: smooth-swirl var(--duration) linear infinite;}
.cts5 .bg_deco img {width:clamp(10rem, 7.566rem + 12.169vw, 22.169rem);  animation: micro-wiggle 4s ease-in-out infinite alternate;}

@keyframes smooth-swirl {
	from {
		transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
	}
	to {
		transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
	}
}

@keyframes micro-wiggle {
	0% { transform: translate(-2px, -3px) scale(1); }
	50% { transform: translate(3px, 1px) scale(1.02); }
	100% { transform: translate(-1px, 4px) scale(1); }
}

@media (max-width:1800px){	
	/*----- 랩케어 기능 -----*/
	.functions {margin-right:0;}
}
@media (max-width:1200px){	
	.cts5 {padding-top:0;}
	.cts5:after {width:100%; height:50%; top:auto; bottom:0;}
	.cts5 .tit {width:100%; padding-right:0;}
	.cts5 .tit h3,
	.cts5 .tit .sub_text {width:100%;}
	.cts5 .tit h3 br.web {display:none;}
	.labcare_btm {flex-direction: column;}

	/*----- 랩케어 다운버튼 -----*/
	.down_link {min-width: 23.5%;}
	.down_link .txt {flex-direction: column-reverse; align-items: flex-start;}
	.down_link .txt > span {line-height:1;}

	/*----- 랩케어 기능 -----*/
	.functions{margin-top: 0; width:100%;}
	.functions [class*='func'] {}
	.functions [class*='func'] .inn {min-height:unset;}

	/*----- 배경 애니메이션 -----*/
	.cts5 .bg_deco {top:22%; left:auto; right:-11.21%;}
}
@media (max-width:767px){	
	.labcare_btm {flex-direction: column-reverse;}

	.down_link {min-width:unset; width:100%;}
	.down_link .txt {flex-direction: row; align-items: center;}
	.down_link .img {display:none;}

	.functions ul {flex-wrap:wrap;}
	.functions [class*='func'] {flex:unset; gap:0.5rem; width:calc((100% - clamp(1rem, 0.8rem + 1vw, 2rem) * 1)/2);}
	.functions [class*='func']:after {top: auto; bottom: clamp(0.5rem, 0.4rem + 0.5vw, 1rem); right:clamp(0.125rem, -0.05rem + 0.875vw, 1rem);}
	.functions [class*='func'] em {letter-spacing:0;}
	.functions [class*='func']:hover {transform:translateY(0);}
	.functions [class*='func']:hover:after {background-color:#EFF0F5;}
}


/********************************************************
■ 공지사항 (cts6)
********************************************************/
.cts6 {display: flex; flex-direction: column; justify-content: center; align-items: center; padding:clamp(5rem, 4.188rem + 4.063vw, 9.063rem) 0 clamp(5rem, 4.125rem + 4.375vw, 9.375rem); background: #fff; position:relative; z-index: 3;}
.cts6:after {content:''; display:block; width:100vw; height:100%; background:#fff url('/images/default/main/notice_bg.jpg') no-repeat; background-position: 0 30%; background-size:30.76% auto; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:-1; opacity:0; transition: opacity 0.6s 0s;}
.cts6 .tit {margin-bottom:clamp(3rem, 2.712rem + 1.438vw, 4.438rem)}
.notice_overflow {clip-path: inset(0);}

.cts6.bg_move:after {opacity:1; transition: opacity 0.6s 0.3s;}

/*----- 공지사항 리스트 -----*/
.notice_wrap {transition:transform 0.6s; transform:translate(0, 120%);}
.notice_overflow.active .notice_wrap {transform:translate(0, 0);}
.notice_wrap .pimg {width:100%; height:auto; aspect-ratio:1; position: relative; border-radius: 0; overflow: hidden; clip-path: circle(75% at 50% 50%); transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.notice_wrap .pimg .hover {display: flex; align-items: center; justify-content: center; width:100%; height:100%; font-size: clamp(0.889rem, 0.879rem + 0.049vw, 0.938rem);  font-family: var(--ff-outfit); color:#fff; text-align:center; background: rgba(0, 68, 134, 0.80); position:absolute; top:0; left:0; z-index:1; opacity:0; transition: opacity 0.3s ease 0s; pointer-events: none;}
.notice_wrap .pimg .hover:after {content:''; display:block; width:calc(100% + 2px); height:calc(100% + 2px); background:url('/images/default/main/notice_hover.svg') no-repeat center center; background-size:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.notice_wrap .pimg > span {display:block; width:100%; height:100%; position:absolute; top:0; left:0;}
.notice_wrap .post-title {display: flex; flex-direction: column; gap: clamp(0.75rem, 0.713rem + 0.188vw, 0.938rem); align-items: flex-start; margin-bottom:0; margin-top:clamp(1.5rem, 1.462rem + 0.188vw, 1.688rem); }
.notice_wrap .post-title > h4 {margin:0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; height: 3.2em; -webkit-box-orient: vertical;     word-wrap: break-word; word-break: keep-all; font-size:var(--font-size-20); line-height: 160%;}
.notice_wrap .post-title > span {padding: clamp(0.25rem, 0.231rem + 0.094vw, 0.344rem) clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem); font-size: clamp(0.889rem, 0.879rem + 0.049vw, 0.938rem); color:#0174E5; border-radius: 4.37rem; background:#EFF0F5; line-height: 1.5; font-weight: 600;}
.no-post{text-align:center; padding:5rem 0; width: 100%; background:#f7f7f7; border-radius:1rem;}
/* 페이지네이션 */
.notice-pagin {margin-top: 3rem; position:static;}
.notice-pagin .swiper-pagination-bullet-active {background:var(--Brand-Color-sub);}

/* 호버 애니메이션 */
.notice_wrap .swiper-slide:hover .pimg { clip-path: circle(50% at 50% 50%);}
.notice_wrap .swiper-slide:hover .pimg .hover {opacity:1; transition: opacity 0.3s ease 0.4s;}


@media (max-width:1028px){	
	/*----- 공지사항 리스트 -----*/
	.notice_wrap .swiper-wrapper {gap:0;}
}
@media (max-width:768px){	
	/* 호버 애니메이션 */
	.notice_wrap .swiper-slide:hover .pimg {clip-path: circle(75% at 50% 50%);}
	.notice_wrap .swiper-slide:hover .pimg .hover {opacity:0;}
}
@media (max-width:450px){	
	.cts6 {background-size:50% auto;}
}