@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2024-12-02
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; height:35rem; position:relative; box-sizing: border-box;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual:before{position: absolute; bottom: 0; left: -50%; right: -50%; height: 50%; content: ''; background-color: #eee;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1; overflow:hidden;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
     transform: scale(1.05,1.05);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:center; justify-content: center; text-align: center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{height: 3rem;}
.main-visual-item .main-visual-txt-con .main-visual-txt1 img{display: inline-block; height: 100%; max-height: 30px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{margin-top: 2rem; font-size:5rem; line-height: 1.1; letter-spacing: 0.025em; font-weight: 700; color:#fff;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}
.main-visual-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainVisual{height:30rem;}
	
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{height: 3rem;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img{max-height: 30px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{margin-top: 2rem; font-size:4rem; line-height: 1.1;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size:5.4rem; line-height: 1.14; letter-spacing: -0.025em; font-weight: 700; color: #222;}
.main-tit-box .main-sub-tit{margin-top:1.5rem; font-size:1.6rem; letter-spacing:-0.025em; font-weight:500; line-height:1.5; color: rgba(0,0,0,0.7);}
.main-tit-box .main-btn{margin-top: 2.5rem;}
.main-tit-box .main-btn a{font-size: 1.2rem; line-height: 3rem; font-weight: 600; color: rgba(0,0,0,0.5); display: inline-flex; align-items: center; transition:var(--transition-custom); transition-property: color;}
.main-tit-box .main-btn a i{margin-left: 1rem; font-size: 2.4rem;}
.main-tit-box .main-btn a:hover{color: var(--main-color);}
.white-ver.main-tit-box .main-tit{color: #fff;}
.white-ver.main-tit-box .main-sub-tit{color: rgba(255,255,255,0.7);}
.white-ver.main-tit-box .main-btn a{color: rgba(255,255,255,0.5);}
.white-ver.main-tit-box .main-btn a:hover{color: var(--main-color);}

.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	.main-tit-box br{display: none;}
	.main-tit-box .main-tit{font-size:4.4rem; line-height: 1.14;}
	.main-tit-box .main-sub-tit{margin-top:1.5rem; font-size:1.6rem;}
	.main-tit-box .main-btn{margin-top: 2.5rem;}
	.main-tit-box .main-btn a{font-size: 1.2rem; line-height: 3rem;}
	.main-tit-box .main-btn a i{margin-left: 1rem; font-size: 2.4rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(통합검색) -------- */
#mainSearchCon{padding:5rem 0; background-color: #eee;}
#mainSearchCon .main-search-filter-result-list li button{border-color: #666;}

@media all and (max-width:800px){
	#mainSearchCon{padding:5rem 0;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Product Training) -------- */
#mainProductCon{position: relative; padding: 17rem 0 8rem; background: url("../images/main/main_product_bg2.png") center bottom no-repeat; background-size: cover;}
#mainProductCon:before{position: absolute; top: 10rem; bottom: 0; right: 10rem; left: 0; background: url("../images/main/main_product_bg.jpg") center/cover no-repeat; content: '';}

.main-training-con{position: relative; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.main-training-left{width: 30rem;}

.main-training-right{width: calc(100% - 30rem); max-width: 92rem;}
.main-training-list{display: flex; flex-wrap:wrap;}
.main-training-item{margin: 0 2rem; width: calc(50% - 4rem);}
.main-training-item:nth-child(2)~*{display: none;}
.main-training-item a{display: block;}
.main-training-img{position: relative; width: 100%; height: 0; padding-top: 56.81%; border-radius: 0.5rem; overflow: hidden;}
.main-training-img .img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition:var(--transition-custom);background-size: cover; background-position:center; background-repeat:no-repeat;}
.main-training-img .hover{position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 3rem solid #111214; border-top: 3rem solid transparent; border-left: 3rem solid transparent; border-right: 3rem solid #111214; display: flex; justify-content: flex-start; align-items: flex-start; transform: translate(3rem,3rem); transition:var(--transition-custom); transition-property: transform;}
.main-training-img .hover i{position: relative; top: -0.2rem; font-size: 3.7rem; color: var(--main-color);}
.main-training-txt{margin-top: 2.5rem;}
.main-training-txt span{font-size: 1.4rem; line-height: 1.3;  font-weight: 600; letter-spacing: -0.025em; color: rgba(0,0,0,0.8); display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-training-txt h5{margin-top: 1.5rem; font-size: 2rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; color: #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:var(--transition-custom); transition-property: color;}
.main-training-txt p{margin-top: 1.5rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; color: rgba(0,0,0,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.white-ver .main-training-txt span{color: rgba(255,255,255,0.8);}
.white-ver .main-training-txt h5{color: #fff;}
.white-ver .main-training-txt p{color: rgba(255,255,255,0.5);}

.main-training-item a:hover .main-training-img .img{transform: scale(1.1) rotate(0.002deg);}
.main-training-item a:hover .main-training-img .hover{transform: translate(0,0);}
.white-ver .main-training-item a:hover .main-training-txt h5,
.main-training-item a:hover .main-training-txt h5{color: var(--main-color);}

@media all and (max-width:1620px){
	#mainProductCon:before{right: 0;}
}
@media all and (max-width:800px){
	#mainProductCon{padding: 15rem 0 8rem;}
	#mainProductCon:before{top: 8rem; right: 0;}

	.main-training-left{width: 100%;}

	.main-training-right{margin-top: 2.5rem; width: 100%; max-width: none;}
	.main-training-list{margin: 0 -1rem;}
	.main-training-item{margin: 0 1rem; width: calc(50% - 2rem);}
	.main-training-img .hover i{top: -0.2rem; font-size: 3.7rem;}
	.main-training-txt{margin-top: 2.5rem;}
	.main-training-txt span{font-size: 1.4rem; line-height: 1.3;}
	.main-training-txt h5{margin-top: 1.5rem; font-size: 2rem; line-height: 1.3;}
	.main-training-txt p{margin-top: 1.5rem; font-size: 1.4rem; line-height: 1.3;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Clinical Training) -------- */
#mainClinicalCon{position: relative; margin: 10rem 0; padding: 8rem 0;}
#mainClinicalCon:before{position: absolute; top: 0; bottom: 0; left: 10rem; right: 0; background: url("../images/main/main_clinical_bg2.jpg") 40% 50% no-repeat; background-size: cover; content: '';}

#mainClinicalCon .main-training-con{flex-direction: row-reverse;}
#mainClinicalCon .main-training-img .hover{border-bottom-color: #eee; border-right-color: #eee;}

@media all and (max-width:1620px){
	#mainClinicalCon:before{left: 0;}
}
@media all and (max-width:800px){
	#mainClinicalCon{margin: 8rem 0; padding: 8rem 0;}
	#mainClinicalCon:before{left: 0;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(Product Portfolio) -------- */
#mainPortfolioCon{padding-top: 9rem; height: 73.5rem; background: url('../images/main/main_portfolio_bg.jpg') center bottom no-repeat; background-size: cover; box-sizing: border-box;}
#mainPortfolioCon .main-tit-box{padding-right: 15rem; display: flex; flex-wrap:wrap; align-items: flex-end; position: relative;}
#mainPortfolioCon .main-tit-box .main-sub-tit{margin-left: 2.5rem; padding-bottom: 0.5rem; margin-top:0;}
#mainPortfolioCon .main-tit-box .main-btn{margin-top: 0; position: absolute; top: 3rem; right: 4.5rem;}

.main-portfolio-con{margin-top: 6rem; position: relative;}
.main-portfolio-con:before{position: absolute; left: 50%; margin-left: -50vw; top: 39.6rem; width: 100vw; height: 1px; background-color: rgba(255,255,255,0.15); content: '';}
.main-portfolio-container{}
.main-portfolio-list{}
.main-portfolio-item{}
.main-portfolio-item a{display: block; width: 100%; text-align: center;}
.main-portfolio-img{width: 100%; height: 33.7rem; display: flex; align-items: center; justify-content: center;}
.main-portfolio-img img{max-width: 100%; max-height: 100%; opacity: 0.5; transition:var(--transition-custom); transition-property: opacity;}
.main-portfolio-txt{position: relative; margin-top: 9.5rem;}
.main-portfolio-txt:before{position: absolute; top: -4.3rem; left: 50%; width: 0.6rem; height: 0.6rem; background-color: rgba(255,255,255,0.5); transform: rotate(45deg) translate(-20%, 100%); transform-origin: bottom; content: ''; transition:var(--transition-custom);}
.main-portfolio-txt:after{position: absolute; top: -4.7rem; left: 50%; margin-left: -1.2rem; font-size: 2.4rem; color: #fff; content: "\e914"; font-family: xeicon; opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.main-portfolio-txt h5{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: rgba(255,255,255,0.8); text-align: center; transition:var(--transition-custom); transition-property: font-size, color;}
/* active */
.main-portfolio-item.swiper-slide-active .main-portfolio-img img{opacity: 1;}
.main-portfolio-item.swiper-slide-active .main-portfolio-txt:before{top: -6rem; width: 2rem; height: 2rem; background-color: var(--main-color);}
.main-portfolio-item.swiper-slide-active .main-portfolio-txt:after{opacity: 1;}
.main-portfolio-item.swiper-slide-active .main-portfolio-txt h5{font-size: 2rem; color: var(--main-color);}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainPortfolioCon{padding-top: 8rem; height: 73.5rem;}
	#mainPortfolioCon .main-tit-box{padding-right: 0; align-items: flex-start;}
	#mainPortfolioCon .main-tit-box .main-sub-tit{margin-top: 1.5rem; margin-left: 0rem; width: 100%; padding-bottom: 0;}
	#mainPortfolioCon .main-tit-box .main-btn{margin-top: 0; top: auto; bottom: -0.2rem; right: 0;}

	.main-portfolio-con{margin-top: 6rem;}
	.main-portfolio-con:before{top: 39.6rem;;}
	.main-portfolio-img{width: 100%; height: 33.7rem;}
	.main-portfolio-txt{margin-top: 9.5rem;}
	.main-portfolio-txt:before{top: -4.3rem; left: 50%; width: 0.6rem; height: 0.6rem; transform: rotate(45deg) translate(-20%, 100%);}
	.main-portfolio-txt:after{top: -4.7rem; left: 50%; margin-left: -1.2rem; font-size: 2.4rem;}
	.main-portfolio-txt h5{font-size: 1.6rem; line-height: 1.3;}
	/* active */
	.main-portfolio-item.swiper-slide-active .main-portfolio-img img{opacity: 1;}
	.main-portfolio-item.swiper-slide-active .main-portfolio-txt:before{top: -6rem; width: 2rem; height: 2rem; background-color: var(--main-color);}
	.main-portfolio-item.swiper-slide-active .main-portfolio-txt:after{opacity: 1;}
	.main-portfolio-item.swiper-slide-active .main-portfolio-txt h5{font-size: 2rem; color: var(--main-color);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Contact Us) -------- */
#mainContactCon{padding: 8rem 0 12rem;}

.main-contact-wrapper01{}
.main-contact-list01{}
.main-contact-item01{}
.main-contact-item01 a{padding: 0 6rem; width: 100%; height: 30rem; border-radius: 0.5rem; background-color: #000; position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
.main-contact-item01-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: url("../images/main/main_contact_bg_l.png") right center no-repeat; background-size: cover; transition:var(--transition-custom); transition-property: transform, background;}
.main-contact-tit01{position: relative; display: flex; align-items: center;}
.main-contact-tit01 h5{font-size: 4.4rem; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: #fff;}
.main-contact-tit01 p{margin-left: 3rem; font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.025em; color: rgba(255,255,255,0.5);}

.main-contact-item01 a:hover .main-contact-item01-bg{background: url("../images/main/main_contact_bg_l_on.png") right center no-repeat; transform: scale(1.1) rotate(0.002deg);}

.main-contact-wrapper02{}
.main-contact-list02{display: flex; flex-wrap:wrap; justify-content: space-between;}
.main-contact-item02{width: calc(100% - 40rem);}
.main-contact-item02 + .main-contact-item02{width: 36rem;}
.main-contact-item02 a{padding: 0 6rem; width: 100%; height: 30rem; border-radius: 0.5rem; background-color: #000; position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
.main-contact-item02 + .main-contact-item02 a{padding: 0 5rem 5rem;}
.main-contact-item02-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-size: cover; transition:var(--transition-custom); transition-property: transform, background;}
.main-contact-item02-bg.bg1{background: url("../images/main/main_contact_bg_s.png") right center no-repeat;}
.main-contact-item02-bg.bg2{background: url("../images/main/main_partner_bg_s.png") right center no-repeat;}
.main-contact-tit02{position: relative;}
.main-contact-tit02 span{margin-bottom: 1.5rem; font-size: 1.4rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--main-color); display: block;}
.main-contact-tit02 h5{font-size: 4rem; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: #fff;}
.main-contact-tit02 p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.025em; color: rgba(255,255,255,0.5);}

.main-contact-item02 a:hover .main-contact-item02-bg{transform: scale(1.1) rotate(0.002deg);}
.main-contact-item02 a:hover .main-contact-item02-bg.bg1{background: url("../images/main/main_contact_bg_s_on.png") right center no-repeat;}
.main-contact-item02 a:hover .main-contact-item02-bg.bg2{background: url("../images/main/main_partner_bg_s_on.png") right center no-repeat;}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainContactCon{padding: 8rem 0;}

	.main-contact-item01 a{padding: 0 5rem; width: 100%; height: 30rem; border-radius: 0.5rem;}
	.main-contact-tit01{display: block;}
	.main-contact-tit01 h5{font-size: 4.4rem; line-height: 1.1;}
	.main-contact-tit01 p{margin-top: 1.5rem; margin-left: 0; font-size: 1.6rem; line-height: 1.5;}

	.main-contact-item01 a:hover .main-contact-item01-bg{background: url("../images/main/main_contact_bg_l_on.png") right center no-repeat; transform: scale(1.1) rotate(0.002deg);}

	.main-contact-item02{width: 100%;}
	.main-contact-item02 + .main-contact-item02{margin-top: 1.5rem; width: 100%;}
	.main-contact-item02 a{padding: 0 5rem; width: 100%; height: 30rem;}
	.main-contact-item02 + .main-contact-item02 a{padding: 0 5rem;}
	.main-contact-tit02 span{margin-bottom: 1.5rem; font-size: 1.4rem; line-height: 1.1;}
	.main-contact-tit02 h5{font-size: 4rem; line-height: 1.1;}
	.main-contact-tit02 p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.5;}
}