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

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:calc(100vh - var(--header-height));}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#mainContainer #fullpage .section:not(#mainFooter){min-height:750px;}
	#mainContainer #fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; /* height:100vh; */ height:801px; position:relative;  /* margin-top:var(--header-height); */}
.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;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative; width:100%; height:0; padding-top:44.445%; padding-top:80rem;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{
    animation: image-zoom-out 8s 0s forwards;
}
/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	padding: 16.5rem 17.1rem;
    box-sizing: border-box;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-txt3,
.main-visual-item .main-visual-txt-con .main-visual-more-btn{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:5.2rem; font-weight:500; letter-spacing:0.01em; color:#333; line-height:1.35}
.main-visual-item .main-visual-txt-con .main-visual-txt1 .char{padding-bottom:0.3rem;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:38px; letter-spacing:-0.5px; color:#fff; margin-bottom:25px; }
.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:17px; letter-spacing:-0.75px; color:#fff; color:rgba(255,255,255,0.7);  line-height:26px; margin-bottom:35px; }
.main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; font-size:16px; font-weight:300; color:#333; padding:15px 30px;  border-radius:30px; background-color:#fff;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3,
.main-visual-item.active-item .main-visual-more-btn{
	-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.active-item .main-visual-txt-con .main-visual-txt3{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-more-btn{-webkit-animation-delay:0.8s; animation-delay:0.8s;}
.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;
}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@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);
	}
}


/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; top:40%; left:16.5rem;  z-index:9; width:11.9rem; margin-top:1rem; transition:all 0.3s;}
.main-scroll-icon:before{position: absolute; content:''; width:100%; height:0rem; padding-top:100%; animation: spin 1.5s ease-in-out infinite; background:no-repeat center; background-image:url('/images/main/main_visual_circle.png'); background-size:cover;}
.main-scroll-icon span{display: block; font-size:2.2rem; color:#000; line-height:11.9rem; text-align:center;}

.main-scroll-icon:before {
	-webkit-animation: spin 10s infinite linear;
	-o-animation: spin 10s infinite linear;
	-moz-animation: spin 10s infinite linear;
	animation: spin 10s infinite linear;
}
@keyframes spin {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1800px){
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{margin-top:5rem;}
}
@media all and (max-width:1280px){
	.main-visual-item .main-visual-txt-con{padding:10rem 5rem;}
	.main-scroll-icon{left:50%; transform:translateX(-50%); top:auto; bottom:5rem;}
}


/* ******************  메인 비주얼 영상 ********************** */
#mainVisual.video-visual{overflow:visible; width:100%; height:0; padding-top:56.25%; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */

/* 메인 비주얼 텍스트영역 */
#mainVisual.video-visual .main-visual-con{position: absolute; top:0; left:0; width:100%; height:100%;}

/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:absolute; overflow:hidden; height:100%; width:100%; background-color:#000; top:0; left:0; margin-top: calc(-1 * var(--header-height));}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80);}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:center;}
.main-tit-box .main-tit{color:#333; font-size:5.2rem; font-weight:500; line-height:1.35;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:#555; font-size:1.6rem; letter-spacing:-0.05em; line-height:1.75; }
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.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;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

/* -------- 메인 컨텐츠 :: 배경애니메이션 -------- */
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; }
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:transform 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

.main-section-bg .main-section-bg-inner.mobile-visual{display: none;}
@media all and (max-width:640px){
	.main-section-bg .main-section-bg-inner.mobile-visual{display: block;}
	.main-section-bg .main-section-bg-inner.pc-visual{display: none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
#mainContent1{/* padding:16rem 0 14rem; */ padding:16rem 0 25rem; transition:all 0.3s;}
#mainContent1.auto-height,
#mainContent1.auto-height .fp-tableCell{height:auto !important;}
#mainContent1 .main-item-wrap{display: flex;}
#mainContent1 .main-item-wrap .main-item{position: relative; width:50%; text-align:center;}
#mainContent1 .main-item-wrap .main-item:before{position: absolute; content:''; width:5rem; height:5rem; right:0; top:50%; transform:translate(50%, -50%); background:no-repeat center; background:url('../images/main/main_content_01_plus.png'); background-size:cover;}
#mainContent1 .main-item-wrap .main-item:last-child:before{display: none;}
#mainContent1 .main-item-wrap .main-item .txt{font-size:2rem; line-height:1.5; letter-spacing:-0.05em; color:#333; margin-bottom:2.4rem;}
#mainContent1 .main-item-wrap .main-item .num{font-size:5.2rem; line-height:1.5; letter-spacing:-0.025em; color:var(--main-color); font-weight:700;}
#mainContent1 .main-item-wrap .main-item .icon{display: block; text-align:center; margin-top:1.8rem;}


#mainContent1 .num.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
} 
/* transition일때 */ 
#mainContent1 .active-section .num.splitting .char,
#mainContent1 .animated .num.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

@media all and (max-width:800px){
	#mainContent1{padding:7rem 0;}
	#mainContent1 .main-item-wrap{flex-wrap:wrap;}
	#mainContent1 .main-item-wrap .main-item{width:100%; margin-bottom:15rem;}
	#mainContent1 .main-item-wrap .main-item:last-child{margin-bottom:0rem;}
	#mainContent1 .main-item-wrap .main-item:before{top:auto; bottom:0; right:50%; transform:translate(50%, 200%);}
	#mainContent1 .main-item-wrap .main-item .num{font-size:4rem}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
#mainContent2{padding:17rem 0 8rem; position: relative; margin-bottom:22rem; /* padding:5rem 0; */}
#mainContent2 .main-section-bg{opacity:0; transform:translateY(30px); transition:all 0.8s 0.8s;}
#mainContent2 .main-section-bg .main-section-bg-inner{background:url('../images/main/main_content_02.jpg') no-repeat right 0 / cover;}
#mainContent2 .main-tit-box .main-sub-tit{margin-bottom:5rem;}
#mainContent2 .main-tit-box span img{max-width:100%;}

#mainContent2.on .main-section-bg{opacity:1; transform:translateY(0px);}

@media all and (max-width:800px){
	#mainContent2{margin-bottom:12rem; padding:8rem 0 5rem;}
	#mainContent2 .main-tit-box .main-sub-tit{margin-bottom:2rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
.main-service-wrap{display: flex; margin-bottom:25rem;}
.main-service-wrap .left-box{width:53.33%; overflow:hidden; position: relative; top:-5rem}
.main-service-wrap .left-box span{position: relative; display: block; width:100%; height:0; padding-top:72.916%;}
.main-service-wrap .left-box span img{position: absolute; width:100%; height:100%; top:0; left:0;}
.main-service-wrap .right-box{width:46.67%; background:#f7f7f7; padding:12rem 9rem 10rem 10rem; box-sizing:border-box;}
.main-service-wrap .main-tit-box .main-tit{text-align:left; margin-bottom:11.5rem;}
.main-service-wrap .right-box .txt-box{margin-bottom:13rem;}
.main-service-wrap .right-box .txt-box .sub-tit{font-size:1.6rem; line-height:1.5; letter-spacing:0.025em; color:#333; font-weight:400;}
.main-service-wrap .right-box .txt-box .tit{font-size:3.6rem; line-height:1.5; letter-spacing:-0.075em; color:#333; font-weight:600; margin-top:1rem;}
.main-service-wrap .right-box .txt-box .txt{font-size:1.7rem; line-height:1.75; letter-spacing:-0.05em; color:#666; margin-top:2rem; height:8.5rem;}

.main-service-wrap .right-box .slick-list{overflow:visible;}

.main-more-btn{position: absolute; font-size:1.4rem; line-height:2.36em; color:#333; font-weight:700; bottom:-2rem; right:3px;}
.main-more-btn:before{position: absolute; content:''; width:calc(100% + 4px); height:3px; background:#333; bottom:-0.5rem; left:-1px;
	transform:scaleX(1); 
	transition:var(--transition-custom);
	transition-property: transform;
	transform-origin:0 0;
}


.main-more-btn:hover:before{transform:scaleX(0); transform-origin:100% 0;}

.slick-arrow{position: absolute; bottom:10.2rem; z-index:9;}
.slick-arrow.slick-prev{left:10rem;}
.slick-arrow.slick-next{left:36.2rem;}

/* 메인 컨텐츠 :: Dots */
.slick-dots-wrapper{position:absolute; left:0; bottom:47rem; width:100%; text-align:left; z-index:11; transition:var(--custom-transiton2); }
.slick-dots{/* display:inline-block; */ vertical-align:top; *display:inline;*zoom:1; display: flex; width:15rem; justify-content:center; margin-left:8rem;}
.slick-dots li{float:left; margin-left:1.5rem;}
.slick-dots li:first-child{margin-left:0}
.slick-dots li button{
	position:relative; 
	cursor:pointer; 
	margin:0px; 
	padding:0px; 
	background:none; 
	vertical-align:top; 
	width:15px; 
	height:15px; 
	font-size:0; 
	border-radius:50%; 
	box-sizing:border-box;
}
.slick-dots li button:focus{}
.slick-dots li button:after{position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background-color:#333; content:""; border-radius:50%; transform:scale(1); transition:var(--custom-transiton1); }
.slick-dots li button svg{position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(0) rotate(-90deg); transition:var(--custom-transiton1);}
.slick-dots li button svg circle{
	fill:transparent; 
	stroke:#333; 
	stroke-width:2px; 
	stroke-linecap:round; 
	stroke-dasharray: 100;
	stroke-dashoffset: 50;
}
.slick-dots li.slick-active button svg{transform:scale(1) rotate(-90deg);; }
html:not(.ios-os) .slick-dots li.slick-active button svg circle{animation: draw-circle 3s cubic-bezier(0.4, 0, 0.2, 1) both;}
.ios-os .slick-dots li.slick-active button svg circle{animation: draw-circle-ios 3s cubic-bezier(0.4, 0, 0.2, 1) both;}
.slick-dots li.slick-active button:after{transform:scale(0); transition-duration:0s;}

/* svg Circle draw */
@keyframes draw-circle {
	from {
		stroke-dashoffset: -50;
	}
	to {
		stroke-dashoffset: 0
	}
}
@keyframes draw-circle-ios {
	from {
		stroke-dashoffset: 100;
	}
	to {
		stroke-dashoffset: 50
	}
}

/* 메인 컨텐츠3 :: 슬라이드 이동 효과 */
.main-service-wrap .main-tit-box .splitting .char,
.main-service-wrap .txt-box .tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
.main-service-wrap .txt-box .sub-tit,
.main-service-wrap .txt-box .txt{overflow:hidden; display: block;
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
	transition-delay:0.5s;
}
.main-service-wrap .txt-box .txt{transform:translateY(50%);}
.main-service-wrap .left-box span img{transform:scale(1.05); transition:all 3s;}

 /* transition일때 */ 
.main-service-wrap .slick-active .main-tit-box .splitting .char,
.main-service-wrap .slick-active .txt-box .tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
.main-service-wrap .slick-active .txt-box .sub-tit,
.main-service-wrap .slick-active .txt-box .txt{
	opacity:1.0;
	transform:translateY(0);
}
.main-service-wrap .left-box .slick-active span img{transform:scale(1);}
.main-service-wrap .slick-dots {position:relative; z-index: 99;}
.main-service-wrap .slick-arrow {z-index: 99;}
@media all and (max-width:1280px){
	.main-service-wrap .right-box{padding:8rem 4rem;}
	.slick-arrow{bottom:8.4rem; width:5rem;}
	.slick-arrow img{width:100%;}
	.slick-arrow.slick-prev{left:4rem;}
	.slick-arrow.slick-next{left:28rem;}
	.main-service-wrap .main-tit-box .main-tit{margin-bottom:0;}
	.main-service-wrap .right-box .txt-box{margin-bottom:7rem;}
}
@media all and (max-width:800px){
	.main-service-wrap{flex-wrap:wrap; margin-bottom:12rem;}
	.main-service-wrap .left-box{width:100%; top:0;}
	.main-service-wrap .right-box{width:100%; text-align:center; padding:8rem 6rem 14rem;}
	.main-service-wrap .right-box .txt-box{margin-bottom:5rem; height:20rem;}
	.main-service-wrap .right-box .txt-box .txt br{display: none;}
	.main-more-btn{bottom:-8rem;}
	.main-more-btn:before{bottom:0;}
	.main-service-wrap .main-tit-box .main-tit{text-align:center;}

	.slick-dots{margin:auto; margin-left:auto;}
	.slick-arrow{bottom:14rem;}
	.slick-arrow.slick-prev{left:6rem;}
	.slick-arrow.slick-next{left:auto; right:6rem;}
	.main-service-wrap .main-more-btn{right:auto; left:50%; transform:translateX(-50%);}
	.main-service-wrap .slick-dots  {margin-top:10px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
#mainContent4{margin-bottom:20rem;}
/* -------- 아코디언 스타일 02 -------- */
/* 아코디언 전체 레이아웃 */
.accordion-list{position: relative;}
.accordion-list .accordion-item{position:relative; overflow:hidden;  }
.accordion-list .accordion-item .accordion-inner{display:block; width:100%; position:relative; height:100%; margin:0; overflow:hidden;}
@media all and ( min-width: 1025px ){
	.accordion-list-box .accordion-list{ display: table; width:100%; height: 70rem; white-space:nowrap; overflow:hidden; font-size:0;}
	.accordion-list .accordion-item{width:110px; display:table-cell; height:100%; white-space:nowrap; } /* 접힌 li의 width*/
	.accordion-list .accordion-item .accordion-inner{margin-left:1px}
	.accordion-list .accordion-img{display: block; position: absolute; width:100%; height:100%; top:0; left:0; opacity:0; background-size:cover !important; transform:scale(1.1); transition:transform 1.5s 0.2s, opacity 0.5s;}
	.accordion-list .accordion-item .accordion-m-img{display:none;}
}
@media all and ( max-width: 1024px ){
	/* .accordion-list-box .accordion-list{max-width:800px; margin:0px auto;} */
	.accordion-list .accordion-item{display:block; width:100%; height:auto; margin-top:1px; padding-left:0; }
	.accordion-list .accordion-item:first-child{margin-top:0}
	.accordion-list .accordion-item .accordion-inner{background-image:none;}
	.accordion-list .accordion-img{display: none;}
	.accordion-list .accordion-item .accordion-m-img{
		height:0; padding-top:8rem; 
		background-size:cover !important;
		-webkit-transition:padding 0.4s;
		-moz-transition:padding 0.4s;
		-o-transition:padding 0.4s;
		-ms-transition:padding 0.4s;
		transition:padding 0.4s;
	}
	.accordion-list .accordion-item.active .accordion-m-img{padding-top:67rem}
}
@media all and (max-width:800px){
	#mainContent4{margin-bottom:12rem;}
}
@media all and ( max-width: 480px ){
	.accordion-list .accordion-item .accordion-m-img{padding-top:80px;}
}

/* 아코디언 내용 */
.accordion-inner-box{
	position:relative; height:100%; width:100%; 
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
.accordian-tit-box{position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; cursor:pointer;}
.accordian-tit-box:before{
	position:absolute; 
	top:0px; left:0px; 
	width:100%; 
	height:100%; 
	content:""; 
	background-color:#eee;
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
.accordian-tit-box .accordian-tit{transform:rotate(90deg); margin-top:7rem;}
.accordian-tit-box .accordian-tit strong,
.accordian-tit-box .accordian-tit span{display:block; color:#000; font-size:1.6rem; font-weight:500;}
.accordian-tit-box .inner-box{/* display: none; */ opacity:0;}

.active > .accordion-inner .accordian-tit-box .inner-box{opacity:1; /*  margin-top:19rem; */}
.active > .accordion-inner .accordian-tit-box .inner-box .inner-tit{font-size:5.2rem; color:#fff; line-height:1.2; font-weight:600; margin-bottom:21rem;}
.active > .accordion-inner .accordian-tit-box .inner-box .tit{display: block; font-size:3.6rem; line-height:1.2; letter-spacing:-0.025em; color:#fff; font-weight:500; margin-bottom:2.8rem;}
.active > .accordion-inner .accordian-tit-box .inner-box .txt{font-size:1.7rem; line-height:1.75; letter-spacing:-0.025em; color:rgba(239,239,239,0.6); min-height:5.7rem;}
.active > .accordion-inner .accordian-tit-box .inner-box .main-more-btn{position: relative; display: inline-block; color:#fff; margin-top:3rem;}
.active > .accordion-inner .accordian-tit-box .inner-box .main-more-btn:before{background:#efefef;}
/* 아코디언 내용 Active */
.active > .accordion-inner .accordion-inner-box{opacity:1.0;filter:Alpha(opacity=100); background-size:cover !important;}
.active > .accordion-inner .accordian-tit-box{cursor:default; padding:10rem 9rem; box-sizing:Border-box;}
.active > .accordion-inner .accordian-tit-box:before{opacity:0;filter:Alpha(opacity=0);}
.active > .accordion-inner .accordian-tit-box .accordian-tit{
	-ms-transform: rotate(0);
	-o-transform: rotate(0);
	-moz-transform: rotate(0);
	-webkit-transform: rotate(0);
	transform: rotate(0);
	animation:active-title 0.5s alternate both 0.2s;
	-webkit-animation:active-title 0.5s alternate both 0.2s;
}
.active > .accordion-inner .accordian-tit-box .accordian-tit{display: none;}
.active > .accordion-inner .accordian-tit-box .accordian-tit strong{font-size:5.2rem; color:#fff; line-height:1.2; font-weight:600;}

@keyframes active-title {
	0% {
		opacity: 0;
		left:0;
	}
	100% {
		opacity: 1;
		left:20px
	} 
}

.accordian-tit-box .inner-box .inner-tit.splitting .char,
.accordian-tit-box .inner-box .tit.splitting .char,
.accordian-tit-box .inner-box .txt{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
.accordian-tit-box .inner-box .txt{transition-delay:0.5s;}

.trigger .accordion-inner .accordion-img{transform:scale(1); opacity:1;}
.trigger .accordian-tit-box .inner-box .inner-tit.splitting .char,
.trigger .accordian-tit-box .inner-box .tit.splitting .char,
.trigger .accordian-tit-box .inner-box .txt{
	opacity:1.0;
	transform:translateY(0);
}
@media all and (max-width:1024px){
	.active > .accordion-inner .accordian-tit-box .inner-box .inner-tit{margin-bottom:15rem;}

	.accordian-tit-box .accordian-tit{position: relative; transform:none; margin-top:0; padding:0 25px; display: flex; align-items: center; height:100%;}
	.active > .accordion-inner .accordian-tit-box{padding:9rem 25px;}
}
@media all and (max-width:800px){
	.active > .accordion-inner .accordian-tit-box .inner-box{text-align:center;}
	.active > .accordion-inner .accordian-tit-box .inner-box .tit{font-size:3rem;}
	.active > .accordion-inner .accordian-tit-box .inner-box .inner-tit{height:20rem; margin-bottom:9rem; font-size:24px;}
	.active > .accordion-inner .accordian-tit-box .inner-box .txt{min-height:8rem}
	.active > .accordion-inner .accordian-tit-box .inner-box .main-more-btn{margin-top:1rem; bottom:0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 -------- */
#mainContent5{max-width:1800px; margin:0 auto 17.2rem;}
.main-media-content{position: relative; /* display: flex; justify-content: space-between; */}
.main-media-content .left-box{position: absolute; width:23.88%; top:0; left:0; z-index:1;}
.main-media-content .left-box .main-tit-box{margin-bottom:20px;}
.main-media-content .left-box .main-tit-box .main-tit{text-align:left;}
.main-media-content .left-box .main-more-btn{display: inline-block; position: relative; bottom:0; right:auto;}
.main-media-content .right-box{padding-left:23.88%; width:calc(100% + 2rem); margin: 0 -1rem;}
.main-media-content .right-box .main-media-item{width:calc(33.33% - 2rem); background:#f7f7f7; margin:0 1rem; }
.main-media-content .right-box .main-media-item span{display: block; overflow:hidden; position: relative; width:100%; height:0; padding-top:56.82%; background:#fff;}
.main-media-content .right-box .main-media-item span img{position: absolute; top:0; left:0; right:0; width:100%; /* height:100%; */ transition:all 0.5s;}
.main-media-content .right-box .main-media-item .txt-box{padding:4.5rem 4rem 3.5rem;}
.main-media-content .right-box .main-media-item .tit{font-size:2.4rem; line-height:1.38; letter-spacing:-0.025em; color:#333; font-weight:500; word-break: keep-all; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:7rem; overflow:hidden; margin-bottom:3.5rem;}
.main-media-content .right-box .main-media-item .txt{font-size:1.6rem; line-height:1.75; letter-spacing:-0.075em; color:rgba(51,51,51,0.6); word-break: keep-all; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:5.6rem; overflow:hidden;}

.main-media-content .right-box .main-media-item a:hover span img{transform:scale(1.1);}

.main-media-content .slick-dots{position: absolute; width:15rem; left:5rem; bottom:2px; margin-left:0;}

.main-media-content .slick-arrow{bottom:0.35rem;}
.main-media-content .slick-arrow.slick-prev{left:0;}
.main-media-content .slick-arrow.slick-next{left:22.5rem;}

@media all and (min-width:801px){
	#mainContent5 .main-media-content .slick-dots{left:5.4rem;}
	#mainContent5 .slick-dots li:first-child{margin-left:1.5rem;}
}/* 
#mainContent5 .slick-dots li {
    display: none;
}
#mainContent5 .slick-dots li.slick-active,
#mainContent5 .slick-dots li.slick-active + li,
#mainContent5 .slick-dots li.slick-active + li + li {
    display: inline-block;
}

#mainContent5 .slick-dots li:nth-last-child(1),
#mainContent5 .slick-dots li:nth-last-child(2),
#mainContent5 .slick-dots li:nth-last-child(3) {
    display: inline-block;
}

#mainContent5 .slick-dots li.slick-active ~ li:nth-last-child(1),
#mainContent5 .slick-dots li.slick-active ~ li:nth-last-child(2),
#mainContent5 .slick-dots li.slick-active ~ li:nth-last-child(3) {
    display: none;
}
#mainContent5 .slick-dots li.slick-active + li + li:nth-last-child(3),
#mainContent5 .slick-dots li.slick-active + li + li:nth-last-child(2),
#mainContent5 .slick-dots li.slick-active + li + li:nth-last-child(1),
#mainContent5 .slick-dots li.slick-active + li:nth-last-child(3),
#mainContent5 .slick-dots li.slick-active + li:nth-last-child(2),
#mainContent5 .slick-dots li.slick-active + li:nth-last-child(1){
    display: inline-block;
} */

@media all and (max-width:1850px){
	#mainContent5{padding:0 var(--area-padding);}
}
@media all and (max-width:1280px){
	.main-media-content .right-box{padding-left:27%;}
}
@media all and (max-width:800px){
	#mainContent5{margin-bottom:12rem;}
	.main-media-content .left-box{position: relative; width:100%; text-align:center; margin-bottom:9.4rem;}
	.main-media-content .right-box{padding-left:0%; width:100%; margin: 0;}
	.main-media-content .left-box .main-tit-box .main-tit{text-align:center;}
	.main-media-content .right-box .main-media-item{margin:0;}

	.main-media-content .slick-arrow{bottom:auto; top:-5rem;}
	.main-media-content .slick-arrow.slick-prev{left:50%; transform: translateX(-50%); margin-left: -11.2rem;}
	.main-media-content .slick-arrow.slick-next{left:50%; transform: translateX(-50%); margin-left: 12rem;}

	.main-media-content .slick-dots{bottom:auto; top:-5rem; left:50%; transform:translateX(-50%);}
}


/* svg */
.svg-icon{display:block; width:6.4rem; margin:1.8rem auto 0;}
.svg-icon svg{width:100%;}
.svg-icon svg * {stroke:var(--main-color);}
.svg-img-pc{position: relative; display:block; width:100%; height:0; padding-top:38.216%;}
.svg-img-pc svg{position: absolute; top:0; left:50%; transform:translate(-50%); width:100%; height:100%; overflow:visible;}

.animated .svg-icon svg{
  stroke:var(--main-color);
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: ani 3s linear;
}

@keyframes ani {
  0% {
    stroke-dashoffset: 130; 
  }
  100% {
    stroke-dashoffset: 0;  
  }
}

.animated.svg-img-pc svg path{
  animation: ani2 8s linear infinite;
}
@keyframes ani2 {
  0% {
    stroke-dashoffset: 142;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@media all and (max-width:800px){
	.svg-img-pc{padding-top:87.8%;}
}



@media (min-width:1281px) and (min-height:800px){
	.fullpage-wrapper > article{padding:0 !important; margin:0 auto!important;}

	.main-service-wrap{margin-bottom:0; margin-top:5rem;}

	/* .main-visual-item {padding-top:100vh;} */
	#mainContent1 .main-item-wrap{padding:15rem 0;}
	#mainContent2 .main-tit-box{margin-bottom:0;}

	.main-service-wrap .left-box{margin-top:-5rem; top:auto;}

	.service-top-btn.to-top-btn{bottom:15px; opacity:1;}
}
@media all and (max-width:1280px){
	.index-wrapper .section,
	.index-wrapper .fp-tableCell{height:auto !important;}
}
@media all and (max-width:480px){
	#fullpage #mainVisual{height:auto;}
}