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

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

/* #mainContainer {background: url(/images/main/main_total_bg.jpg) no-repeat; background-position:0 0;} */
.main-wrap {background: url(/images/main/main_total_bg.jpg) no-repeat; background-position:0 0; background-size:cover; opacity:0; transition:opacity 0.3s ease-in-out}
.main-wrap.active{opacity:1;}

/* ******************  메인 비주얼 ********************** */
.main-visual-container {position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-clip-path: inset(0 20% 0 20%); /* 아래 30%는 숨김 */
  clip-path: inset(0 20% 0 20%);
  transition: clip-path 1.2s ease-in-out; transform:translateY(20%); transition:all 1.3s ease-in-out; opacity: 0;}
.main-visual-container.active {
  clip-path: inset(0 0 0 0); /* 전체 노출 */
  transform:translateY(0); opacity: 1;
}
.visual-inner {position: relative; width: 100%; overflow:hidden;}

/* active 시 전체 슬라이드 보이도록 */
.main-visual-container.active .main-visual-con {
    transform: translateX(0);
}

#mainVisual{overflow:hidden; width:100%; /* height:100vh; height:calc(100vh - var(--header-height));  */ height: auto; position:relative; /* background-color:#000; */ display: flex !important; flex-direction: column; padding-top: 23rem; max-width: 96.588%; margin: 0 auto;}

.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%;
	border-radius:60px;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	/* height:100%; */
	height: 83rem;
	background-size:cover !important;
	transform: scale(1.08,1.08);
	border-radius:60px;
}
.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-txt-con{
	/* position:absolute; 
	left:0px; top:0; */
	width:100%; 
	height:100%;
	z-index:1;
	
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:10.6rem; font-weight:300; letter-spacing:-0.025em; color:#fff; margin-bottom:4rem; text-transform:uppercase;}
.main-visual-txt-box .main-visual-txt1 .highlight {font-weight: 500;}
.main-visual-txt-box .main-visual-txt2{font-size:2.4rem; letter-spacing:-0.065em; color:#fff; margin-bottom:1.25em; }
.main-visual-txt-box .main-visual-txt3{font-size:1.8rem; letter-spacing:-0.025em; color:rgba(255,255,255,0.7); line-height:1.5; margin-bottom:1.66em; }
.main-visual-txt-box .main-visual-more-btn{display:inline-block; font-size:1.6rem; color:#333; padding:1.5rem 3rem; border-radius:3rem; background-color:#fff;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-more-btn{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{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);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:20px; width:100%; text-align:left; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:5px; }
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:12px; height:12px; background-color:#fff; font-size:0; opacity:0.8;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.main-visual-con .slick-dots li.slick-active button{background-color:#000; opacity:1.0; }

.slick-dots li span {width: 12px !important;
    height: auto !important;
    background: none !important;
    opacity: 1 !important;
    display: block !important;
    position: relative;
    cursor: pointer;}
.slick-dots li span button {
	position: relative;
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    background: none;
    vertical-align: top;
    width: 12px;
    height: 12px;
    font-size: 0;
    border-radius: 50%;
    box-sizing: border-box;
}



.slick-dots li span:after {position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background-color: #fff;
    content: "";
    border-radius: 50%;
    opacity: 1;
    transition: var(--transition-custom);}

/* 메인 비주얼 :: 화살표 */
.main-arrows {width: 100%; position:absolute; top: 0; /* top: calc(100% - (100% - 83rem + 28.5rem)); */ z-index: 10; margin-top: 5.5rem;}
.main-arrows .area {display: flex; align-items: center;}
.main-arrows .slick-dots button {position: relative;
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    background: none;
    vertical-align: top;
    width: 21px;
    height: 21px;
    font-size: 0;
    border-radius: 50%;
    box-sizing: border-box;}
.main-arrows .slick-dots button:after {
	display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px));
    background: rgba(255,255,255,0.5);
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 100%;
}
.main-arrows .slick-dots li.slick-active button:after {background: #fff;}
.main-arrows .slick-dots button svg {
	    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0) rotate(-90deg);
    transition: var(--transition-custom);
}
.main-arrows .slick-dots button svg circle {
	fill: transparent;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 50;
}
.main-arrows button i {font-size:2.4rem; color: #fff;}
.main-arrows button:last-of-type {order: 2;}
.main-arrows .slick-dots {order: 1; display:flex; margin: 0 3rem;}
.main-arrows .slick-dots li {margin: 0 0.85rem;}
.main-arrows .slick-dots li span button {position: relative;}
.main-arrows .slick-dots li span button svg{position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(0) rotate(-90deg); transition:var(--transition-custom);}
.main-arrows .slick-dots li span button svg circle{fill:transparent; stroke:#fff; stroke-width:2.5px; stroke-linecap:round; stroke-dasharray: 25.5; stroke-dashoffset: 25.5; transition: stroke-dashoffset linear;}
/* html:not(.ios-os) .main-visual-con .slick-dots li.slick-active button svg circle {animation:draw-circle 5s cubic-bezier(0.4, 0, 0.2, 1) both;} */
.main-arrows .slick-dots li.slick-active button svg {transform:scale(1) rotate(-90deg);}
.main-arrows .slick-dots li.slick-active button svg circle {animation: draw-circle 5s cubic-bezier(0.4, 0, 0.2, 1) both;}
html.ios-os .main-arrows .slick-dots li.slick-active button svg {transform:scale(1) rotate(-90deg);}
html.ios-os .main-arrows .slick-dots li.slick-active button svg circle {animation: draw-circle-ios 5s linear both;}

@keyframes draw-circle {
	from {
		stroke-dashoffset: -50;
	}
	to {
		stroke-dashoffset: 0
	}
}

/*@keyframes draw-circle2 {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: -56.52;
	}
}*/

@keyframes draw-circle-ios {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -56.52; }
}

.main-visual-con .slick-arrow{	position:absolute; width:50px; top:50%;transform:translateY(-50%); border:0; cursor:pointer; z-index:9; font-size:2.4rem; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
.main-visual-con .slick-arrow.slick-prev{left:10px;}
.main-visual-con .slick-arrow.slick-next{right:10px;}

/* 메인 문의하기 버튼 */
.main-inquiry-btn {position: absolute;
    /* bottom: 7rem; */
    top: 29.3rem;
    right: 16.3rem;
    width: 13rem;
    height: 13rem;
    box-sizing: border-box;
    border-radius: 13rem;
    display: flex;
    align-items: center;
    z-index: 99;}
.main-inquiry-btn:before, .main-inquiry-btn:after {
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: '';
    pointer-events: none;
    border: 0.2rem solid #fff;
    border-radius: 50%;
    margin: -0.2rem;
    box-sizing: border-box;
}
.main-inquiry-btn:before {opacity: 1; transform: scale(1);}
.main-inquiry-btn:after{visibility: visible; opacity: 0; transform: scale(0.5);}

.main-inquiry-btn i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:2rem;
	color: #fff;
	margin-top: -2rem;
}
.main-inquiry-btn .flow-txt-wrap {overflow: hidden; padding-top: 3rem;}
.main-inquiry-btn .flow-txt {display: flex;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s;}
.main-inquiry-btn .flow-txt span {
	    padding: 0 1rem;
    font-size: 2rem;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: #fff;
    display: inline-block;
    animation: textLoopL 4s linear infinite;
}

.main-inquiry-btn .flow-txt span:nth-child(even){color: rgba(78,80,84,0.5);}
.main-inquiry-btn:hover {border-color: transparent;}
.main-inquiry-btn:hover:before {
	transition: all 0.5s ease-in-out;
        transform: scale(1.5);
        opacity: 0;
        border-width: 0.1rem;
}
.main-inquiry-btn:hover:after{
	transition: all 0.3s ease-in-out;
        transform: scale(1);
        opacity: 1;
        border-width: 0.2rem;
}

@keyframes textLoopL {
	0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
	100% {-webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0);}
}


/* 메인 비주얼 :: 카운터 */
.main-visual-conuter{position:absolute; bottom:55px; left:0; width:100%; z-index:11; font-size:14px; color:#fff; letter-spacing:-0.5px; }
.main-visual-conuter span,
.main-visual-conuter .middle{display:inline-block; vertical-align:middle;}
.main-visual-conuter .middle{margin:0 10px}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{width: 100%; position:absolute; bottom:38.7rem; left:0; /* margin-left:-40px; */ text-align:center; z-index:9; /* animation: upDown 1.5s ease-in-out infinite; */ z-index: 10; }
.main-scroll-icon .scroll-box {width: 100%;}
.main-scroll-icon .scroll-box > .scroll-inner {position: relative; width: 0.6rem; height: 4rem; background:rgba(255,255,255,0.1); border-radius: 3px; overflow:hidden;}
.main-scroll-icon .scroll-box > .scroll-inner span {position:absolute; left: 0; top: 0; display:inline-block; width: 0.6rem; height: 0.6rem; background: #fff; border-radius:100%; animation: ScrollDown 2s ease infinite forwards;}

@keyframes ScrollDown {
	0%{top:0;}	
	100%{top:100%;}
}

@keyframes upDown {
	0% {
		/* opacity: 0.5; */
		transform:  translateY(-5px);
	}
	50% {
		/* opacity: 1; */
		transform: translateY(5px);
	}
	100% {
		/* opacity: 0.5; */
		transform:  translateY(-5px);
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:center;}
.main-tit-box .main-tit{color:#040404; font-size:40px; font-weight:300; }
.main-tit-box .main-tit strong{font-weight:500;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:#aaa; font-size:15px; letter-spacing:-0.75px; font-weight:300; line-height:1.5; }
.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);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainContent1{/* padding:28.2rem 0 30.2rem; */ }
#mainContent1 .main-tit-box {margin-bottom: 0;}
#mainContent1 .main-tit-box .main-tit {font-size:14rem; letter-spacing:-0.01em; /* letter-spacing:-0.025em; */ color: #fff; font-weight: 300; line-height:1.2;} 
#mainContent1 .main-tit-box .main-sub-tit {font-size:4.2rem; letter-spacing:-0.065em; color: #fff; font-weight: 700; line-height:1.2; margin-top: 2.4rem;}
#mainContent1 .main-tit-box .main-sub-txt {font-size:1.8rem; letter-spacing:-0.055em; color: rgba(255,255,255,0.5); font-weight: 500; line-height:1.667; font-family: 'Pretendard'; margin-top: 1.2rem;}
.mainContent1Inner {display:inline-block; width: 100%; height: 100%; padding:28.2rem 0 30.2rem; box-sizing:border-box;}
#cmMainCursor {
	position:fixed; top: 0; left: 0; /* top: 50%;
    left: 50%; */ z-index: 10000; pointer-events:none; /* transform: translate(-50%, -50%); */
    width: 18rem;
    height: 18rem;
    /* background: url(/images/main/more_view_img.png) no-repeat;
    background-size: cover; */
    opacity: 0;
}
.cm-cursor-inner {display: block;
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

  /* scale(0) */; }
.cm-cursor-circle {display:block;  position: absolute; width: 13.3rem; height: 13.3rem; background: rgba(3,165,238,0.8); top: 50%; left: 50%; transform:translate(-50%,-50%); box-sizing: border-box; border-radius:100%;}
.cm-cursor-circle:before {
	display: block;
    content: "";
    width: 18rem;
    height: 18rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/images/main/more_view_img.png) no-repeat;
    background-size: cover;
}
.cm-cursor-circle:after {
	content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 100%;
    width: 0.8rem;
    height: 0.8rem;
}

.mouse-pointer { position: fixed; top: 0px; left: 0px; z-index: 10000; pointer-events: none; }
.mouse-pointer .pointer-circle {opacity: 0; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 13.3rem; height: 13.3rem; background: rgba(3,165,238,0.8); border-radius:100%; backdrop-filter: blur(10px);}
.mouse-pointer .pointer-circle:before{ display: block; content: ""; position: absolute;   top: 50%; left: 50%; transform: translate(-50%, -50%); animation:mouse-pointer-ani 8s linear infinite;}

/* drag */
.mouse-pointer.drag .pointer-circle:before{width: 18rem; height: 18rem; background: url('/images/main/more_view_img.png') no-repeat; background-size: cover;}
.mouse-pointer.drag .pointer-circle:after {content: ""; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 100%; width: 0.8rem; height: 0.8rem;}
/* scroll */
.mouse-pointer.scroll .pointer-circle:before{width: 17.5rem; height: 17.5rem; background: url('/images/content/scroll_view_img.png') no-repeat; background-size: cover;}
.mouse-pointer.scroll .pointer-circle span {position: relative; display: flex; align-items:center; justify-content:center; width:100%; height:100%;}
.mouse-pointer.scroll .pointer-circle span:before{position: absolute; content:''; top:50%; left:50%; transform:translate(-50%, -50%); width:2px; height:14px; background:rgba(255,255,255,0.1);}
.mouse-pointer.scroll .pointer-circle span i{font-size:3rem; color:Rgba(255,255,255,0.3);}
.mouse-pointer.scroll .pointer-circle span i:last-child{color:#fff;}

@keyframes mouse-pointer-ani {
	0% {
		transform:translate(-50%,-50%) rotate(0) scale(1);
	}
	100% {
		transform:translate(-50%,-50%) rotate(360deg) scale(1);
	}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(갤러리) -------- */
/* #mainContent2{padding:60px 0; background-color:#f2f2f2;} */
.m-pd-wrapper {display:flex;}
.m-pd-box {position: relative; width: 42.392%; margin-right: 1.6rem; border-radius:50px; height: 94rem; padding: 8.153% 8.153% 6.522% 8.153%; box-sizing: border-box;}
.m-pd-box:last-of-type {width: calc(100% - (42.392% + 1.6rem)); background: rgba(0,0,0,0.32); margin-right:0; padding: 9.2rem 7.5rem 9rem;}
.bg-list {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 
.bg-list li { position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: opacity .5s ease;
    opacity: 0;}
.bg-list li:first-child {
    opacity: 1; /* 초기 배경 */
}
.bg-list li span {display: block; position: relative; width: 100%; padding-top: 94rem;/* padding-top: 123.26%; */ height: 0;}
.bg-list li img {border-radius:50px; width:100%; height: 100%;}
.m-pd-contents {position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.m-pd-contents .tit-box .tit {font-size:10.4rem; letter-spacing:-0.01em; color: #fff; font-weight: 500; line-height: 1.057em;}
.m-pd-contents .tit-box .tit.splitting .char {opacity: 0; transform: translateY(100%); transition: var(--transition-custom2); transition-property: opacity, transform;}
.m-pd-contents .tit-box.animated .tit.splitting .char {opacity: 1.0; transform: translateY(0);}
.m-pd-contents .tit-box .tit span {font-weight: 300;}
.m-pd-contents .tit-box .tit > span:last-of-type > span {font-weight: 500;}
.m-pd-contents .tit-box .txt {font-size:2rem; letter-spacing:-0.065em; color: #fff; font-weight: 600; line-height:1.6em; margin-top: 2.5rem;}

.sub-tab-wrapper-style.pd-tab-wrapper-style {height: auto; margin-bottom: 0; margin-top: 5rem; background: none; backdrop-filter: none;}
.sub-tab-list-style ul.m-pd-list {display:flex; flex-direction:column; height: auto;}
.sub-tab-list-style ul.m-pd-list li {width: 100%; background-color: initial;
    border: 0;}
.sub-tab-list-style ul.m-pd-list li a {position: relative; display: flex; justify-content: space-between; align-items: center; height: 6.5rem; box-sizing:border-box; width: 100%; padding:2.5rem 0 1.5rem 0; border-bottom:1px solid rgba(255,255,255,0.1);}
.sub-tab-list-style ul.m-pd-list li a:after {
	display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
    opacity: 0;
    transition: var(--transition-custom);
}
.sub-tab-list-style ul.m-pd-list li em {font-size:2rem; letter-spacing:-0.055em; color: rgba(255,255,255,0.4); font-weight: 500; line-height:1.5em; transition:var(--transition-custom); text-align:left;} 
.sub-tab-list-style ul.m-pd-list li i {font-size:2.6rem; color: #fff; opacity: 0; transition:var(--transition-custom);}
.sub-tab-list-style ul.m-pd-list li.selected {background-color: initial; border: 0;}
.sub-tab-list-style ul.m-pd-list li.selected a em {color: #fff;}
.sub-tab-list-style ul.m-pd-list li a:hover i, .sub-tab-list-style ul.m-pd-list li.selected a i {opacity: 1;}
.sub-tab-list-style ul.m-pd-list li a:hover:after, .sub-tab-list-style ul.m-pd-list li.selected a:after {width: 100%; opacity: 1;}
.sub-tab-list-style ul.m-pd-list li a:hover em, .sub-tab-list-style ul.m-pd-list li a.selected em {color: #fff;}



.inner-pd-list li {text-align: center;}
.pd-type {display: block; font-size:3.6rem; letter-spacing:-0.01em; color: rgba(255,255,255,0.2); line-height:1.2; text-align:center; text-transform:uppercase; font-weight: 500;}
.pd-img-box {margin: 6rem auto 0;/* margin:10.2rem auto 6.5rem; */ width: 42rem;}
.pd-img-box span {width: 100%;
    position: relative;
    height: 0;
    padding-top: 100%;
    display: block;}
.pd-title {margin-top: 3.3rem;}
.pd-title .pd-link {position: relative; font-size:7.6rem; letter-spacing:-0.01em; color: #fff; font-weight: 500; line-height:1.1; transition:var(--transition-custom);}
.pd-title .pd-link:after {display: block;
    position: absolute;
    right: -4rem;
    top: 1rem;
    content: "\e916";
    font-family: 'xeicon';
    color: #fff; font-size:3rem; transition:var(--transition-custom);}
/* .pd-title .pd-link:hover {color: var(--main-color);} */
.pd-title .pd-link:hover:after {color: var(--main-color);}
.pd-title p {font-size:1.8rem; letter-spacing:-0.055em; color: rgba(255,255,255,0.5); font-weight: 400; line-height:1.667; margin-top: 2rem;}
.pd-arrows {position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 15rem);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box; z-index: 999;}
.pd-arrows button {position: relative; box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center; width: 7.2rem;
    height: 7.2rem;
    border-radius: 100%;
    border: 3px solid rgba(255, 255, 255, 0.15);}
.pd-arrows button i {font-size:2rem; color: rgba(255,255,255,0.3); }

.pd-arrows button:after, .pd-arrows button:before {
	display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    border: 0.3rem solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    margin: -0.3rem;
    box-sizing: border-box;
    transform: scale(1);
  
}

.pd-arrows button:after {
	transform: scale(0.5);
    visibility: visible;
    opacity: 0;
}

/* .pd-arrows button:hover {border-color:var(--main-color);} */
.pd-arrows button:hover:before {transition: all 0.5s ease-in-out; transform: scale(1.5); opacity: 0; border-width: 0.1rem; border-color: var(--main-color);}
.pd-arrows button:hover:after {transition: all 0.3s ease-in-out;transform: scale(1); opacity: 1; border-width: 0.2rem; border-color: var(--main-color);}
.pd-arrows button:hover i {color: var(--main-color);}

@media all and (max-width:1280px){
	.bg-list li span {padding-top: 59.765%; overflow: hidden;
        border-radius: 50px;}
	.bg-list li img {top: 50%; transform: translateY(-50%); bottom: initial; height: auto; max-height: initial;}
}

@media all and (max-width:800px){
	.pd-img-box {width: 14.4rem; margin: 3.5rem auto 4.658rem;}
	.pd-drop-menu.open .sub-drop-open-btn-style {border-radius: 10px 10px 0 0;}
	.sub-tab-list-style ul.m-pd-list {background-color: initial; backdrop-filter: blur(30px); top: 100%; padding: 0; background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);         border: 1px solid rgba(255, 255, 255, 0.3);}
	.sub-tab-list-style ul.m-pd-list li a {height: 5rem; padding: 1.5rem; }
	.sub-tab-list-style ul.m-pd-list li em {font-size: 1.5rem; color: rgba(255,255,255,0.5);}
	.sub-tab-list-style ul.m-pd-list li.selected em {color:var(--main-color);}
	.sub-tab-list-style ul.m-pd-list li a:hover:after, .sub-tab-list-style ul.m-pd-list li.selected a:after {display:none;}
	.pd-title .pd-link:after {opacity: 0;}

	
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
#mainContent3{padding:32.4rem 0 25rem;}
#mainContent3 .main-tit-box {text-align:left;}
#mainContent3 .main-tit {font-size:11rem; letter-spacing:-0.01em; color: #fff; font-weight: 500; line-height:1.1;}
#mainContent3 .main-tit > span {font-weight: 300;}
#mainContent3 .main-tit-box .main-tit strong {padding-left: 2.5rem; font-weight: 500;}
.main-support-list {border-top:1px solid rgba(255,255,255,0.1);}
.main-support-list li {position: relative;}
.main-support-list li a {display: block; position: relative; border-bottom:2px solid rgba(255,255,255,0.1); padding: 3.45rem 4.8rem;}
.main-support-list li a:after {display: block; content: ""; position: absolute; left: 0; background: var(--main-color); height: 2px; width: 0; bottom: -2px; transition:var(--transition-custom);}
.main-support-list li .title-box {display: flex; justify-content: space-between; align-items: center; }
.main-support-list li .tit-box {display: flex; align-items: center;}
.main-support-list .category {width: 5.8rem; height: 2.4rem; border-radius:12px; border:1px solid #fff; font-size:1.4rem; letter-spacing:-0.01em; line-height: 2.4rem; color: #fff; text-align: center; margin-right: 2rem; transition:var(--transition-custom);}
.main-support-list .title {font-size:2.4rem; letter-spacing:-0.065em; color: #fff; font-weight: 700; line-height:1.5em; transition:var(--transition-custom);}
.main-support-list li i {font-size:2.6rem; color: rgba(255,255,255,0.2); transition:var(--transition-custom);}
.main-support-list .inner-img {width: 32rem; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none;}
.main-support-list .inner-img span {display: block; width: 100%; position: relative; height: 0; padding-top: 140.625%;}
.main-support-list .inner-img img {border-radius:24px; opacity: 0; width:100%; object-fit:cover;}
.main-support-list .inner-img img.m-ver {display:none;}
.main-support-list li a:hover:after {width: 100%;}
.main-support-list li a:hover .title {color: var(--main-color);}
.main-support-list li a:hover .category {background: var(--main-color); color: #fff; border-color:var(--main-color);}
.main-support-list li:hover .inner-img img {opacity: 1;}
.main-support-list li:hover i {color: var(--main-color);}


/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
#mainContent4{padding:0 0 15.6rem;}
/* .flow-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%; 앞부분만 어둡게 하고 싶은 영역
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.5), transparent);
    pointer-events: none; 클릭 막지 않음
    z-index: 3; 텍스트 위쪽
} */
.txt-flow-con {position: relative; height: 20rem; overflow: hidden;
	mask-image: linear-gradient(-90deg, rgba(255,255,255,1), transparent);
    -webkit-mask-image: linear-gradient(-90deg, rgba(255,255,255,1), transparent);
    mix-blend-mode:soft-light;
}
.txt-flow-con .bg-box img {margin-top: -27rem;}
#mainContent4 .flow-txt {width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 2; mix-blend-mode:soft-light; color: rgba(255,255,255,0.8);}
.maskBg {width: 100%; height: 100%; /* background: #fff; */ display: flex; align-items: center; overflow: hidden;} .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.maskBg .marquee .absol h4 {font-size:20rem; letter-spacing:-0.05em; font-weight: 800; box-sizing:border-box; white-space:nowrap; padding-right:calc(300/737*1em); text-transform: uppercase; /* background-image:linear-gradient(-90deg, rgba(255,255,255,0.5), transparent);
background-clip: text;
  -webkit-background-clip: text;
  color: transparent; */}

@media all and (max-width:1280px){
	.txt-flow-con {height: 300px;}
	.maskBg .marquee .absol h4 {font-size:280px;}
}
@media all and (max-width:800px){
	.txt-flow-con {height: 100px;}
	.maskBg .marquee .absol h4 {font-size:100px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
#mainContent5{padding-bottom:17.7rem;}
.m-bottom-box {display:flex; transform:translateY(10%); opacity: 0; transition:var(--transition-custom2);}
#mainContent5.on .m-bottom-box {transform:translateY(0); opacity: 1;} 
.m-bottom-box .left-box {background: url('/images/main/m_tech_bg_new.png') no-repeat; background-size:cover; width: 24.286%; margin-right: 1.4rem; border-radius:30px; }
.m-bottom-box .left-box .hover-box {display:inline-block; width: 100%; height: 100%; padding: 49.804rem 3rem 7.2rem 4.8rem; box-sizing: border-box;}
.m-bottom-box .left-box .tit-box strong {color: #fff; font-weight: 600; font-size:5.2rem; /* letter-spacing:-0.025em; */ letter-spacing:-0.01em; line-height:1.192em; }
.m-bottom-box .left-box .tit-box p {font-size:1.6rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.6); font-weight: 500; line-height:1.625em; margin-top: 1.6rem;}
.m-bottom-box .right-box {width: calc(100% - (24.286% + 1.4rem));}
.m-bottom-box .inner-box {display:flex; margin-top: 1.4rem; height: calc((100% - 1.4rem) / 2);}
.m-bottom-box .inner-box > div {position: relative; border-radius: 30px; transition:var(--transition-custom);}
/* .m-bottom-box .inner-box > div {background: linear-gradient(180deg, rgba(2, 168, 239, 1) 0%, rgba(14, 123, 227, 1) 100%);} */
.m-bottom-box .inner-box:first-of-type {margin-top: 0;}
.m-bottom-box .inner-box:first-of-type .count-container {margin-bottom: 5rem;}
.m-bottom-box .inner-box .s-box {width: 32.466%; margin-right: 1.5rem; background: url(/images/main/m_cm_btnBg04.jpg) no-repeat; background-size:cover; }
.m-bottom-box .inner-box .s-box > .hover-box {position: relative; display:inline-block; width: 100%; padding: 3.6rem 5.2rem 4.6rem; box-sizing: border-box;}
.m-bottom-box .inner-box .b-box {display:flex; align-items:center; width: calc(100% - (32.466% + 1.5rem));}
.m-bottom-box .inner-box .b-box > .hover-box {position: relative; display:inline-block; padding: 2.7rem 2.9rem; box-sizing:border-box;}
.m-bottom-box .inner-box:first-of-type .b-box {display: block; background: url(/images/main/m_cm_btnBg02.jpg) no-repeat; background-size:cover;}
.m-bottom-box .inner-box:first-of-type .b-box > .hover-box {display:flex; align-items:center;}
.m-bottom-box .inner-box:last-of-type .b-box {flex-direction: column; align-items: flex-start; background: url(/images/main/m_cm_btnBg03.jpg) no-repeat; background-size:cover; margin-right: 1.4rem; padding: 7.9rem 6.5rem 6.5rem; box-sizing:border-box;}
/* .m-bottom-box .inner-box:last-of-type .b-box a {display:inline-block; padding: 7.9rem 6.5rem 6.5rem; box-sizing:border-box;} */
.m-bottom-box .inner-box:last-of-type .s-box {background: url(/images/main/m_cm_btnBg04.jpg) no-repeat; background-size:cover; margin-right: 0;}
.m-bottom-box .inner-box:last-of-type .s-box > .hover-box {display:inline-block; padding: 5.2rem; box-sizing: border-box; }
.m-bottom-box .btn-sub-tit {display: block ;font-size:3.3rem; letter-spacing:-0.01em; /* letter-spacing:-0.025em; */ color: #fff; font-weight: 600; line-height:1.25em; margin-bottom: 2rem;}
.m-bottom-box .btn-tit {font-size:2.6rem; letter-spacing:-0.05em; color: #fff; font-weight: 700; line-height:1.4615em;}
.m-bottom-box .btn-txt {font-size:1.6rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.6); font-weight: 500; line-height:1.625em; margin-top: 0.7rem;}
.m-bottom-box .btn-txt02 {font-size:1.4rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.5); font-weight: 500; line-height:1.571em; margin-top: 2.2rem;}
.m-bottom-box .inner-box:first-of-type .s-box .btn-txt { color: rgba(255,255,255,0.8);}

.m-bottom-box .inner-box > div:has(a):before {
	display: block; content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(180deg, rgba(2, 168, 239, 1) 0%, rgba(14, 123, 227, 1) 100%);
	transition:all 0.5s linear 0s; border-radius: inherit; opacity: 0;

}
.m-bottom-box .inner-box > div:has(a):hover:before {opacity: 1;}
.m-bottom-box .inner-box:last-of-type .b-box:hover:before {opacity: 0;}
.m-bottom-box .inner-box:last-of-type .b-box .data-btn-list li:hover .ico-box {background: #fff;}
.m-bottom-box .inner-box:last-of-type .b-box .data-btn-list li:hover .ico-box i {color: var(--main-color);}

.cs-img-box {display:flex; align-items:center; justify-content:center; margin-right: 5.8rem; width: 32rem; height: 32rem; border-radius:60px; background: rgba(23,19,32,0.45);}
.cs-img-box img {max-width:100%;}
.m-data-tit {position: relative; font-size:6rem; letter-spacing:-0.01em; /* letter-spacing:-0.025em; */ color: #fff; font-weight: 600;}
.data-btn-list {display:flex; margin-top: 11rem;}
.data-btn-list li {margin-right: 7.8rem;}
.data-btn-list li:last-of-type {margin-right: 0;}
.data-btn-list li .hover-box {position: relative; display:flex; align-items: center;} 
.data-btn-list li:nth-child(1) .ico-box {background: var(--main-color);}
.data-btn-list li:nth-child(2) .ico-box {background: #0e7ce2;}
.data-btn-list li .ico-box {display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius:8px; margin-right: 2.8rem; transition:var(--transition-custom);}
.data-btn-list li .ico-box i {font-size:2.5rem; letter-spacing:-0.05em; color: #fff; transition:var(--transition-custom);}
.data-btn-list .list-tit-box {width: calc(100% - 8.8rem);}
.data-btn-list .list-tit-box p { font-size:2.2rem; letter-spacing:-0.05em; color: #fff; font-weight: 700; line-height:1.727;}
.data-btn-list .list-tit-box em {font-size:1.4rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.4); font-weight: 500; line-height:1.2;}

/* 카운트 */
.count-num-box{display:flex; align-items:center; font-size:3rem}
.count-num-box > p {color: #ec008d; font-size:5.8rem; line-height: 5.8rem; font-weight: 700; letter-spacing: -0.05em;} 
.count-num-item-wrap{height:3.5em; overflow:hidden;}
.count-num-item-wrap .count-num-item-box{height: 110rem;}
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:#000; font-weight:700;}	 
/* 카운트 active */
.animated .count-num-item-box{animation:count-up-ani 3s forwards;}
.animated .count-num-item-box.down {animation:count-down-ani 3s forwards;}
@keyframes count-up-ani {
    0% {
	   transform: translate3d(0, 0, 0);
    }
    100% {
	   transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
	   transform: translate3d(0, -90%, 0);
    }
    100% {
	   transform: translate3d(0, 0, 0);
    }
} 

/* .ai-count-inner {display:flex; width: 85.715%; margin: 0 auto; margin: 7.5rem auto 0;}
.ai-count-inner .number {display: flex; align-items: flex-end; justify-content: center; margin-top: 3rem;}
.ai-count-inner > li {position: relative; width: 33.3333%; text-align:center;}
.ai-count-inner > li:after {display: block; content: ""; position: absolute; right: 0; width: 1px; background: #ddd; height: 15.2rem; top: 50%; transform: translateY(-50%);}
.ai-count-inner > li:last-of-type:after {display:none;}
.ai-count-inner > li i {font-size:2.6rem; letter-spacing:-0.025em; color: #222;}
.ai-count-inner > li > p {font-size:1.8rem; letter-spacing:-0.05em; color: #555; font-weight: 600; line-height:1.2; margin-top: 2rem;} */
.count-container {margin-bottom: 5.5rem; position: relative; left: -2rem;}
.count-container .number {display:flex;}
.count-num-item-wrap .count-num-item-box .count-num-item {font-size:11rem; letter-spacing:-0.025em; color: #fff; font-weight: 600; padding-right: 0.1rem; display: flex;
    justify-content: flex-end;}
.count-unit {position: relative; top: 0.5rem; font-size:4rem; letter-spacing:-0.01em; /* letter-spacing:-0.025em; */ color: #fff; font-weight: 600; line-height:1.2; margin-left: 2rem; align-self: flex-end;}


/* .support-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.support-item.big {
	
    grid-row: span 2;
} */

.support-list {
  /*  display:flex; flex-wrap:wrap; */
}

.swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.support-item {border-radius: 30px;}

/* 1번: 좌측 전체 세로 */
.support-item:nth-child(1) {
    background: url(/images/main/m_tech_bg.jpg) no-repeat;
    background-size: cover;
    height: 76.2rem;
	padding: 49.804rem 3rem 7.2rem 4.8rem; box-sizing: border-box;
    margin-right: 2rem;
    width: 24.286%;
}

/* 2번: 첫 줄 2열 */
.support-item:nth-child(2) {
   width: calc(100% - (24.286% + 2rem));
    background: url(/images/main/m_cm_btnBg04.jpg) 0% 0% / cover no-repeat;
    padding: 3.6rem 5.2rem 4.6rem; box-sizing: border-box;
        align-self: flex-start;
}

.support-item .tit-box strong {color: #fff; font-weight: 600; font-size:5.2rem; letter-spacing:-0.025em; line-height:1.192em; }
.support-item .tit-box p {font-size:1.6rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.6); font-weight: 500; line-height:1.625em; margin-top: 1.6rem;}
.support-item .btn-tit {font-size:2.6rem; letter-spacing:-0.05em; color: #fff; font-weight: 700; line-height:1.4615em;}
.support-item .btn-txt {font-size:1.6rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.6); font-weight: 500; line-height:1.625em; margin-top: 0.7rem;}
.support-item .btn-txt02 {font-size:1.4rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.5); font-weight: 500; line-height:1.571em; margin-top: 2.2rem;}

@media all and (max-width:1280px){
	.support-item:nth-child(1) {padding: 49.804rem 3rem 10rem; height: auto; width: 100%; margin-right: 0;}

	.m-bottom-box {flex-wrap: wrap;}
	.m-bottom-box .left-box {width: 100%; margin-right: 0;}
	.m-bottom-box .right-box {width: 100%; margin-top: 1.4rem;}
	.m-bottom-box .left-box .hover-box {padding: 14rem 3rem 7.2rem 4.8rem;}
}

@media all and (max-width:800px){
	#mainContent5 {padding-bottom:9.3rem;}
	.swiper-wrapper {display:flex !important; flex-wrap: nowrap !important;}
	.support-list {display: flex; flex-wrap: nowrap; /* swiper 구조 */}	
	.support-item {
		width: 100% !important;
		margin-right: 0 !important;
		height: auto;
	}
	.support-item:nth-child(1),
	.support-item:nth-child(2) {
		width: 100% !important;
		padding: 3rem !important;
		height: auto;
	}	

	.count-num-item-wrap {height: 2em;}
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size:6rem;}
	.m-bottom-box .inner-box:first-of-type .count-container {margin-bottom: 2.5rem; left: -1rem;}
	.count-container {left: -1rem;}

	
}

/* @media all and (max-width:480px){
	#mainContent5 .left-box,
	  #mainContent5 .s-box,
	  #mainContent5 .b-box {
	    opacity: 0 !important;
	    transform: translateY(60px);
	    transition: opacity 0.6s ease, transform 0.6s ease;
	  }

	  #mainContent5 .left-box.on,
	  #mainContent5 .s-box.on,
	  #mainContent5 .b-box.on {
	    opacity: 1 !important;
	    transform: translateY(0);
	  }
} */

/* 마지막 버튼 슬라이드 */
.sp-list {display:flex;}
.sp-list li:not(.count-num-item) {width: calc((100% - 2rem) / 2); margin-right: 2rem; padding: 4rem; box-sizing: border-box; background: #fff; border-radius:20px; color: #000;}
.sp-list li:not(.count-num-item):last-of-type {margin-right: 0;}

.sp-list li:not(.count-num-item):nth-of-type(1) {background: url(/images/main/m_cm_btnBg04.jpg) no-repeat; background-size:cover;}
.sp-list li:not(.count-num-item):nth-of-type(2) {background: url(/images/main/m_cm_btnBg02.jpg) no-repeat; background-size:cover;}	

.inner-flex {display:flex; align-items:center;}

.sp-list .btn-sub-tit {display: block ;font-size:3.3rem; letter-spacing:-0.025em; color: #fff; font-weight: 600; line-height:1.25em; margin-bottom: 2rem;}
.sp-list .btn-tit {font-size:2.6rem; letter-spacing:-0.05em; color: #fff; font-weight: 700; line-height:1.4615em;}
.sp-list .btn-txt {font-size:1.6rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.6); font-weight: 500; line-height:1.625em; margin-top: 0.7rem;}
.sp-list .btn-txt02 {font-size:1.4rem; letter-spacing:-0.05em; color: rgba(255,255,255,0.5); font-weight: 500; line-height:1.571em; margin-top: 2.2rem;}
.sp-list > li:nth-of-type(2) .cm-btn-tit-box {width: calc(100% - (32rem + 5.8rem));}
.sp-list > li:nth-of-type(1) .cm-btn-tit-box {width: 100%;}

.sp-arrows {display:flex; justify-content: center; align-items: center; margin-top: 3rem;}
.sp-arrows .area {margin: 0;}
.sp-arrows .slick-arrow {font-size:1.6rem; color: #fff;}
.sp-arrows .slick-arrow.slick-disabled {opacity: 0.5;}
.sp-arrows .slick-dots {display:flex;}
.sp-arrows .slick-dots li {margin: 0 0.5rem;}
.sp-arrows .slick-dots button {
	position: relative;
	cursor: pointer;
	margin: 0px;
	padding: 0px;
	background: none;
	vertical-align: top;
	width: 16px;
	height: 16px;
	font-size: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

.sp-arrows .slick-dots button:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.5);
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 100%;
}

.sp-arrows .slick-dots li.slick-active button:after {background: #fff;}

.sp-arrows .slick-dots button svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scale(0) rotate(-90deg);
	transition: var(--transition-custom);
}

.sp-arrows .slick-dots li.slick-active button svg {transform: scale(1) rotate(-90deg);}
.sp-arrows .slick-dots button svg circle {fill: transparent;
stroke: #fff;
stroke-width: 2px;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 50;}
.sp-arrows .slick-dots li.slick-active button svg circle {animation: draw-circle 2s cubic-bezier(0.4, 0, 0.2, 1) both;}

@media all and (max-width:1280px){
	.cs-img-box {width: 22rem; margin-right: 3rem; border-radius: 3rem;}
	.cs-img-box img {max-width:60%;}
	.sp-list > li:nth-of-type(2) .cm-btn-tit-box {width: calc(100% - (22rem + 3rem));}
}

@media all and (max-width:800px){
	.sp-list li:not(.count-num-item) {margin-right: 0; }
	.sp-arrows .slick-dots button svg circle {stroke-width: 1px;}
}