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

/* 메인에서의 헤더 */
.hq-main-page #header {top:calc(-1 * (var(--header-height)));}
/* .hq-main-page #header .logo {top:-1rem;} */
.hq-main-page #header .logo img.logo_sub {opacity:0;}
.hq-main-page #header .logo svg *{fill:#fff;}
.hq-main-page.main-active #header {top:var(--header-top);}
.hq-main-page.main-active #header.active {top:0;}

.hq-main-page #gnb > ul > li > a {color: #fff;}

/* ******************  메인 레이아웃(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;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#000 }
.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;}
.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-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
}
.main-visual-txt-inner {text-align:center;}
.main-visual-txt-box .main-visual-txt1 {font-family: "Play", sans-serif;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	transition:1.4s;
	/* transition-delay:0.8s; */
	filter:blur(20px);
}

.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:7.2rem; font-weight:700; letter-spacing:0.065em; color:#fff; text-align:center; transition-delay:0.6s;}
.main-visual-txt-box .main-visual-txt2{font-size:2.4rem; letter-spacing:0.05em; line-height:1.7; color:#fff; margin-top:3rem; font-weight: 400; transition-delay:0.9s; word-break: keep-all;}
.main-visual-txt-box .main-visual-txt2 strong {font-weight: 600;}
.main-visual-txt-box .main-visual-more-btn{display:flex; align-items:center; width: 20rem; box-sizing:border-box; margin:0 auto; padding:1rem 3rem 1rem 1rem; border-radius:5rem; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); overflow:hidden; margin-top: 6rem; transition:all 0.5s;}
.main-visual-txt-box .main-visual-more-btn .arrow-circle {display:flex; align-items:center; justify-content:center; width: 4rem; height: 4rem; background: #369AC6; border-radius:100%; line-height:4rem; margin-right: 2rem; position: relative; z-index:1;}
.main-visual-txt-box .main-visual-more-btn .arrow-circle > i {color: #fff;}
.main-visual-txt-box .main-visual-more-btn em {font-size:1.5rem; color:#fff; letter-spacing:-0.3px; font-weight: 400; position: relative; z-index:1; transition:all 0.4s;}
.btn-effect .cm-fill {position:absolute; display: block; width: 0; height: 0; transform:translate(-50%,-50%); border-radius:50%; background:#1d4ea2; transition:width 0.7s, height 0.7s; z-index:0;}
.btn-effect:hover .cm-fill {width: 40rem; height: 40rem;}
.btn-effect:hover em {color: #fff !important;}
.btn-effect:hover i {color: #fff !important;}
.btn-effect:hover:not(.main-visual-more-btn) .arrow-wrap em {background: #333;}
.btn-effect:hover:not(.main-visual-more-btn) .arrow-wrap .arrow-head {border-left:5.5px solid #333;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1{opacity: 1; filter:blur(0); letter-spacing:0;}
.active-item .main-visual-txt2{opacity: 1; filter:blur(0); letter-spacing:-0.018em;}

.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-more-btn{animation-delay:1.1s;}
/* .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 {
	0% {
		opacity: 0;
		filter: blur(20px); 
	}
	100% {
		opacity: 1.0;
		filter: blur(0px);
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-active .main-visual-con .slick-dots {bottom:6rem;}
.main-visual-con .slick-dots {display:flex; position:absolute; left:10rem; /* bottom:6rem; */ bottom:-10%; z-index:11; transition:var(--transition-custom2);}
.main-visual-con .slick-dots li {float:left; width: 10rem; cursor:pointer;}
.main-visual-con .slick-dots li .loading-bar-paging-tit {font-size:1.2rem; color: rgba(255,255,255,0.35); margin-bottom: 1.4rem; transition:var(--transition-custom);}
.main-visual-con .slick-dots li .loading-bar-line {display: block; position: relative; height: 2px; width: 100%; background-color:rgba(255,255,255,0.2);}
.main-visual-con .slick-dots li .loading-bar-line:after {display: block; content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #fff; }
.main-visual-con .slick-dots li.slick-active .loading-bar-paging-tit {color: #fff;}
.main-visual-con.active-dots .slick-dots li.slick-active .loading-bar-line:after {width: 100%; transition:all 10s;}

/* 메인 비주얼 :: 스크롤아이콘 */
.cm-scroll-icon{display: flex; align-items:center; position: absolute; bottom:-10%; /* left:10rem; */ right:5rem; z-index:99; transition:var(--transition-custom2);font-family: "Play", sans-serif;}
.cm-scroll-icon .scroll-txt{font-size:15px; letter-spacing:0.02em; color:#fff; font-weight:600; margin:0 2rem; transition:var(--transition-custom2);transform:rotate(90deg);}
.cm-scroll-icon .scroll-box{position: relative; width:60px; height:60px;}
.cm-scroll-icon .scroll-box svg{stroke-dasharray: 500; stroke-dashoffset: 500; transition:all 3s linear; transition-delay: 0.8s;}
.cm-scroll-icon .scroll-box svg *{fill:transparent; stroke:#fff; stroke-width:3px; transition:stroke 0.8s ease-in-out;}

.cm-scroll-icon .scroll-box .dots{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:2px; height:4rem; /* background:rgba(255,255,255,0.1); */ overflow:hidden;}
.cm-scroll-icon .scroll-box .dots span{display: block; width:100%; height:100%; animation: scroll-icon 1.25s linear infinite; transition:var(--transition-custom2);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+25,1+75,0+100 */ animation-delay:1s; transform: translateY(-100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* active */
.main-active .cm-scroll-icon {bottom:10rem;}
.main-active .cm-scroll-icon .scroll-box svg{stroke-dashoffset: 0;}
/* black */
.cm-scroll-icon.black .scroll-txt{color:#58595B;}
.cm-scroll-icon.black .scroll-box svg *{stroke:#58595B;}
.cm-scroll-icon.black .scroll-box .dots span{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+25,1+75,0+100 */
background: linear-gradient(to bottom,  rgba(88,89,91,0) 0%,rgba(88,89,91,1) 40%,rgba(88,89,91,1) 60%,rgba(88,89,91,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

@keyframes scroll-icon {
	0% {
		transform:translateY(-100%)
	}
	50% {
		transform:translateY(0%)
	}
	100% {
		transform:translateY(100%)
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
/* .main-tit-box{margin-bottom:55px; letter-spacing:-0.75px;} */
.main-tit-box .main-mini-tit {font-size:2rem; color:#fff; letter-spacing:-0.4px; font-weight: 600; line-height: 1.9em;}
.main-tit-box .main-tit{color:#fff; font-size:6rem; font-weight:700; letter-spacing:-1.8px; margin-top: 3rem; line-height:1.266em;}
.main-tit-box .main-tit sup {position: relative; top:-8px; font-size:3rem; letter-spacing:0;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:rgba(255,255,255,0.5); font-size:2rem; letter-spacing:-0.48px; font-weight:400; line-height:1.583em;}

.main-tit-box .main-mini-tit, .main-tit-box .main-tit, .main-tit-box .main-sub-tit {letter-spacing:0.05em; filter:blur(20px); transition:var(--transition-custom2);}

/* .animated .main-mini-tit {letter-spacing:-0.4px; filter:blur(0px);}
.animated .main-tit {letter-spacing:-0.025em; filter:blur(0px);}
.animated .main-sub-tit {letter-spacing:-0.9px; filter:blur(0px);} */

@media all and (min-width:1281px){
	.main-sub-tit {white-space:nowrap;}
	.active-section .main-mini-tit {letter-spacing:-0.4px; filter:blur(0px);}
	.active-section .main-tit {letter-spacing:-0.025em; filter:blur(0px);}
	.active-section .main-sub-tit {letter-spacing:-0.9px; filter:blur(0px);}
}

@media all and (max-width:1280px){
	.animated .main-mini-tit {letter-spacing:-0.4px; filter:blur(0px);}
	.animated .main-tit {letter-spacing:-0.025em; filter:blur(0px);}
	.animated .main-sub-tit {letter-spacing:-0.9px; filter:blur(0px);}
}

/* 메인 공통 view-btn */
.main-view-btn {/* position: relative; */ display:flex; align-items:center; justify-content:space-between; width: 22rem; height: 6.6rem; border:1px solid #fff; border-radius:3.3rem; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background: rgba(255,255,255,0.1); box-sizing:border-box; padding:0 3rem; overflow:hidden;}
.main-view-btn em {font-size:1.7rem; color: #fff; letter-spacing:-0.4px; position: relative; z-index:1; font-style: normal; margin: 0 auto;}
.main-view-btn:hover {border:1px solid #1d4ea2}
.main-view-btn:hover .cm-fill {width: 60rem; height: 60rem;}
.main-view-btn:hover .arrow-wrap em {}

/* 메인 공통 화살표 */
.arrow-wrap {display:flex; align-items:center;}
.arrow-right-wrap .arrow-head {position: relative; display:inline-block; width: 0px; height: 0px; border-left: 5.5px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; z-index:1;}
.arrow-left-wrap {flex-direction:row-reverse;}
.arrow-left-wrap .arrow-head {display:inline-block; width: 0px; height: 0px; border-right: 5.5px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}
.arrow-wrap em {display:inline-block; width: 15px; height: 2px; background: #fff;}


/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
.main-tit-box{position: relative; z-index: 10;}
.main-tit-box p{font-size: 11rem; line-height: 0.55; letter-spacing: -0.02em;}
.main-tit-box .main-tit01{color: rgba(0,0,0,0.15); font-weight: 300;}
.main-tit-box .main-tit02{color: #000; font-weight: 600; margin-left: -0.5rem;}
.main-tit-box .main-tit01{transform: translateX(30%); opacity:0; transition: all 1.4s ease-in-out; }
.main-tit-box .main-tit02{transform: translateX(-30%);opacity:0;transition: all 1.4s ease-in-out;}
.active-section .main-tit-box .main-tit01,
.active-section .main-tit-box .main-tit02 {transform: translateX(0);opacity:1;}

.cm-overflow-box{overflow: hidden; display: block;}
.cm-overflow-inner{display: block; font-size:inherit; font-weight:inherit; color:inherit; opacity:0;filter:Alpha(opacity=0); transform: translateY(100%);}
.active-section .cm-overflow-box .cm-overflow-inner{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-section .cm-overflow-box .delay01{animation-delay:0.1s;}
.active-section .cm-overflow-box .delay03{animation-delay:0.3s;}
.active-section .cm-overflow-box .delay05{animation-delay:0.5s;}
.active-section .cm-overflow-box .delay07{animation-delay:0.7s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translateY(0); 
	}
}

#mainAbout {position: relative; overflow: hidden;}
.main-about-bg {position: absolute; width: 100%; height: 100%; left: 0; top: 0;  background: url(../../images/section1_bg.jpg)no-repeat center / cover; animation: image-zoom-out 8s 0s forwards;}
#mainAbout .main-tit-box p {font-size: 10rem;font-family: "Play", sans-serif;}
#mainAbout .main-tit-box .main-tit01 {margin-left: -13rem; color: #3480db; opacity: .2; line-height: 0.55}
#mainAbout .main-tit-box .main-tit02 {color: #111111; line-height: 0.9}
.main-about {display:flex;}
.main-about-txt-con {padding-left: 13rem; padding-top: 5rem; width: 50%;}
.main-about-txt-con .main-about-txt01 {font-size: 3.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.29; color: #000; padding-top: 5rem;}
.main-about-txt-con .main-about-txt02 {font-size: 1.7rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.64; color: rgba(68,68,68,0.8); padding-top: 2.5rem; word-break: keep-all;}
.main-about-txt-con .main-about-btn {display: flex; align-items: center; justify-content: center; width: 22rem; height: 6.6rem; text-align: center; border: 1px solid #1d4ea3; border-radius: 3.3rem; background: #fff; transition: all 0.3s;
	font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; color: #1d4ea3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; margin-top: 6.5rem;}
.main-about-txt-con .main-about-btn:hover {background: #1d4ea3; color: #fff;}
.main-about-video {width: 50%;}
.main-about-video .video {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; top: 50%; transform: translateY(-50%);}
.main-about-video iframe {position: absolute; z-index: 10; border-radius: 20px; width: 100%; height: 100%; top: 0; left: 0; }


/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
/* type */
#type{ overflow: hidden; }
#type .area-box{ max-width: 1520px; width: 100%; margin: 0 auto; }
#type .type-wrap{ padding-top: 25px; }
#type .type-wrap .slick-list{ overflow: visible; }
#type .flex-box{ display: flex; align-items: center; }
#type .type{ overflow: hidden; }
#type .type figure{ width: 46.5%; }
#type .type figure img {border-radius: 20px;}

#type .type .text-box{ width: 53.5%; /*padding: 0 120px;*/ }
#type .type ul{ display: flex; margin-left: -35px; }
#type .type ul li{ /* font-size: 2.4rem; */ font-size: 2.0rem; font-weight: 400; color: #aaa; padding: 6px 35px; position: relative; cursor: pointer; }
#type .type ul li::after{ content: ""; width: 5px; height: 5px; background: #aaa; border-radius: 50%; position: absolute; top: 50%; right: -2px; transform: translateY(-50%); }
#type .type ul li:last-of-type::after{ display: none; }

#type .type ul li.active{ font-weight: 700; color: #1e4ea3; }
#type .type ul li.active::before{ content: ""; width: calc(100% - 70px); height:  4px; background: #1e4ea3; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

#type .type .text-box div{ position: relative; left: -60px; opacity: 0; transition: all 1s; transition-delay: 0.8s; }
#type .type .text-box div:not(.tab-menu){ padding-top: 80px; transition-delay: 1.1s; }
#type .type span{ font-size: 2.4rem; color: #999999; }
#type .type h3{ font-family: "Play", sans-serif; font-size: 7.2rem; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: -0.04em; margin: 7px 0 110px; }
#type .type h3 span{ font-size: 3rem; font-weight: 700; color: #111; margin-left: 17px; }
#type .type p{ font-size: 1.6rem; font-weight: 300; color: #777; line-height: 1.8; padding-bottom: 70px; }

#type .type a{ display: inline-block; font-family: "Play", sans-serif; font-size: 1.6rem; font-weight: 500; color: #111; position: relative; overflow: hidden; padding: 10px 0; padding-right: 30px; }
#type .type a img{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#type .type a::before, #type .type a::after{ content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; transition: all 0.3s; transition-delay: 0.3s; }
#type .type a::before{ background: #111; transform: scaleX(1); transform-origin: right; }
#type .type a::after{ background: #111; transform: scaleX(0); transform-origin: left; z-index: -1; transition-delay: unset; }

#type .type.slick-active .text-box div{ left: 0; opacity: 1; }
#type .type.slick_now .text-box div{ left: 0; opacity: 1; }
#type .type a:hover::before{ transform: scaleX(0); transition-delay: unset; }
#type .type a:hover::after{ transform: scaleX(1); transition-delay: 0.3s; }


#type .c_hero {position:relative;z-index:0;width:145px; height: 0;}
#type .c_hero .c_marquee {transform:rotate(90deg);}
#type .c_marquee {position:relative; left: 0; transform: translateX(-50%);}
#type .c_marquee .cm_wrap {width:100%; height:180px; display:flex; justify-content:center; align-items:center;}
#type .c_marquee .marquee,
#type .c_marquee .marqueereverse {position:absolute; display:inline-block; white-space:nowrap; font-family:'Play'; font-size:200px; font-weight:900; line-height:180px;}
#type .c_marquee .marqueereverse {color: #3480db; opacity: .2; animation:slidereversemarquee 120s linear infinite;}
#type .c_marquee .marqueereverse.t1 {animation-delay:-60s;}
@keyframes slidemarquee {0% {transform:translateX(100%);}100% { transform:translateX(-100%);}}
@keyframes slidereversemarquee {0% {transform:translateX(-100%);}100% { transform:translateX(100%);}}



/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
.main-tit-box .main-tit{font-size:7.2rem; line-height:1.16; color:#222; font-weight:700; opacity:0; transform:translateX(-30px); transition:all 1s 0.2s; font-family:'Play';}
.main-tit-box .main-txt{font-size:1.8rem; line-height:1.77; letter-spacing:-0.05em; color:#666; margin-top:2rem; opacity:0; transform:translateX(-30px); transition:all 1s 0.2s; word-break: keep-all;}
.animated .main-tit-box .main-tit{transform:translateX(0); opacity:1;}
.animated .main-tit-box .main-txt{transform:translateX(0); opacity:1;}
#product{background:no-repeat bottom left; background-size:contain; background-image:url('../../images/section3_bg.jpg');}
.main-priduct-wrap{display: flex; align-items:center;}
.main-priduct-wrap .main-tit-box{width:42.1%}
.main-priduct-wrap .right-box{width:57.9%}
.main-priduct-wrap .right-box .main-product-item{position: relative; width:100%; max-width:76rem; height:25rem; margin:6rem auto; padding:0 6rem; box-sizing:border-box; overflow:hidden; border-radius: 20px;}
.main-priduct-wrap .right-box .main-product-item:nth-child(1){margin-left:0;}
.main-priduct-wrap .right-box .main-product-item:nth-child(2){margin-right:0;}
.main-priduct-wrap .right-box .main-product-item:before{position: absolute; content:''; width:0%; height:100%; top:0; left:0; background:no-repeat center; background-size:cover; transition:var(--transition-custom2);}
.main-priduct-wrap .right-box .main-product-item:nth-child(1):before{background-image:url('../../images/section3_img1.jpg'); margin-left:0;}
.main-priduct-wrap .right-box .main-product-item:nth-child(2):before{background-image:url('../../images/section3_img2.jpg'); margin-right:0;}
.main-priduct-wrap .right-box .main-product-item a{position: relative; display: flex; justify-content:center; flex-direction:column; height:100%; opacity:0;  transition:var(--transition-custom2);}
.main-priduct-wrap .right-box .main-product-item a .tit{font-size:3.6rem; line-height:1; letter-spacing:-0.05em; color:#fff; font-weight:600; padding-bottom: 2rem; font-family: 'play';}
.main-priduct-wrap .right-box .main-product-item a .tit-en{font-size:1.5rem; line-height:1.5; color:#fff; font-weight:600; opacity:0.5;}
/* active 효과 */
#product.animated .main-priduct-wrap .right-box .main-product-item:before{width:100%}
#product.animated .main-priduct-wrap .right-box .main-product-item a{opacity:1;}
/* 오버효과 */
.main-priduct-wrap .right-box .main-product-item:hover:before{transform:scale(1.08);}

#product .main-product-item a .sec3_btn{ display: inline-block; font-family: "Play", sans-serif; font-size: 1.6rem; font-weight: 500; color: #fff; position: relative; overflow: hidden; padding: 10px 0; padding-right: 30px; }
#product .main-product-item a .sec3_btn img{ position: absolute; top: 50%; left: 90px; transform: translateY(-50%); }
#product .main-product-item a .sec3_btn::before, 
#product .main-product-item a .sec3_btn::after{ content: ""; width: 110px; height: 1px; position: absolute; bottom: 0; left: 0; transition: all 0.3s; transition-delay: 0.3s; }
#product .main-product-item a .sec3_btn::before{ background: #fff; transform: scaleX(1); transform-origin: right; }
#product .main-product-item a .sec3_btn::after{ background: #fff; transform: scaleX(0); transform-origin: left; z-index: -1; transition-delay: unset; }

#product .main-product-item a:hover .sec3_btn::before{ transform: scaleX(0); transition-delay: unset; }
#product .main-product-item a:hover .sec3_btn::after{ transform: scaleX(1); transition-delay: 0.3s; }
#product .main-product-item.slick-active .text-box div{ left: 0; opacity: 1; }
#product .main-product-item.slick_now .text-box div{ left: 0; opacity: 1; }


/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
#contact:before {position:absolute; content:""; top:0; left:0; width: 100%; /* height:135rem; */ height:160%; background:#000 url(../../images/section4_bg.jpg) no-repeat 50% 50% / cover; background-position: 0% 50%;}
#contact .main-tit-box {text-align:center; margin-bottom: 10rem;}
#contact .main-tit-box .main-tit{color:#fff;}
#contact .main-sub-tit {margin-top: 4rem; color: #fff; word-break: keep-all;}
#contact .main-view-btn {margin: 0 auto; filter:blur(10px); transition:var(--transition-custom2);}
#contact .animated + .main-view-btn {filter:blur(0px);}

/* -------- 메인 컨텐츠 :: 컨텐츠5 -------- */
#footer{background-color:#333333;}
.footer-con-inner {/*padding-right: 8rem;*/ -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.footer-left-con{float:left; }
.footer-right-con{float:right;}

/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; 
	bottom:-7rem; 
	right:5rem;
	 display: flex; align-items:center; 
	 justify-content: center;
	width:7rem; 
	height:7rem; 
	background-color:#fff; 
	text-align:center; 
	color:#000; 
	z-index:101;
	box-sizing:border-box;
	opacity:0;
	transition:var(--transition-custom);
	border-radius:50%;
	-webkit-box-shadow: 0.5rem 0.5rem 1.5rem rgba(0,0,0,0.21)r;
	-moz-box-shadow: 0.5rem 0.5rem 1.5rem rgba(0,0,0,0.21);
	box-shadow: 0.5rem 0.5rem 1.5rem rgba(0,0,0,0.21);
}
.to-top-btn.bottom-fixed{bottom:5rem; opacity:1.0;}
.to-top-btn i{display:inline-block; font-size:2.2rem; transition:var(--transition-custom); z-index: 99}
.to-top-btn:hover i{transform:translateY(-3px); color: #fff !important;}
.to-top-btn.main-on { bottom:5rem; opacity:1.0; z-index: 99999;}

/* -------- FOOTER :: 상단 -------- */
#footerTop{border-bottom:1px solid rgba(255,255,255,0.1 ); padding:7rem 0 4rem; }

/* Footer :: 푸터로고 */
.foot-logo{display:block;}

/* Footer :: 푸터메뉴 */
.foot-menu{}
.foot-menu li{float:left; position:relative; margin-left: 0.5rem;}
.foot-menu li:first-child{margin-left:0}
.foot-menu li a{display: flex; align-items: center; justify-content: center; width: 16rem; height: 4.8rem; border: 1px solid rgba(255,255,255,0.3); text-align: center; border-radius: 2.4rem; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; box-sizing: border-box; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.7); transition: all 0.3s;}
.foot-menu li a:hover {background: #fff; color: #232323;}

/* -------- FOOTER :: 하단 -------- */
#footerBottom{ padding:4rem 0 5rem; }

/* Footer :: 정보 style02 */
.footer-address-info-box{}
.footer-address-list dl{display:inline-block; vertical-align:middle; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.625; margin-right: 5.8rem;}
.footer-address-list dl:last-child{margin-right:0}
.footer-address-list dl dt,
.footer-address-list dl dd{vertical-align:middle; display:inline-block;}
.footer-address-list dl dt{color: #999999; margin-right: 2rem;}
.footer-address-list dl dd{color: #fff;}
.footer-address-list span{display:inline-block; margin-right:15px}
.footer-address-list a{color:inherit}

/* Footer :: Copyright */
.footer-copyright{font-size:1.6rem; line-height: 1.85; color: #999999; letter-spacing:-0.05px;}




/* 메인 페이지 top-btn */
/* .hq-main-page .to-top-btn {top:-18rem; transform: translateY(10rem);} */
.hq-main-page .main-view-btn.to-top-btn em {font-size: 12px; color: #105271;}


/* 슬라이드 수정 작업 */
.type-inner-container .slick-list {overflow:visible;}
.type-inner-container .type-item {position: relative; width: 100%; margin-right: 2rem; transition: var(--transition-custom); transform-origin: center center;}
.mainTypeCon {position:static; top:initial; width: auto; margin-top: 8.765%;}
.main-type-tit-box {position: relative; width: 24.69%; z-index:100; left:initial; }
.type-container {/* width: 75.31%; */width:73.91%; margin: 0; overflow:initial; padding-top:0;}
.main-type-tit-box .main-tit-box {width: auto;}

.type-inner-container .type-item.item-effect {transform:perspective(960px) rotateY(-90deg) scale(0.8);}
.type-control-box .arrow-button.slick-disabled {border-color:rgba(255,255,255,0.25);}
.type-control-box .arrow-button.slick-disabled .arrow-wrap em {background: rgba(255,255,255,0.25);}

.type-control-box .arrow-prev.arrow-button.slick-disabled .arrow-wrap .arrow-head {border-right:5.5px solid rgba(255,255,255,0.25);}
.type-control-box .arrow-next.arrow-button.slick-disabled .arrow-wrap .arrow-head {border-left:5.5px solid rgba(255,255,255,0.25);}

.section-bg-title {top:9.5%;}

.type-inner-container .slick-current .type-item-inner {transform:translateY(-4rem);}
.type-inner-container .slick-current a {background: linear-gradient(180deg, rgba(15,86,118,1) 0%, rgba(9,36,48,1) 100%);}

#mainContent3 .section-bg-title {top:9.5%;}
#mainContent3 .type-inner-container .type-item.slick-current a {background: linear-gradient(180deg, rgba(15,86,118,1) 0%, rgba(1,4,5,1) 100%);} 


.automotive-container.type-container .type-inner-container .type-item .img-box{width: calc(100% + 10rem); margin-left: -5rem;}
.automotive-container.type-container .type-inner-container .type-item .img-box img{width:100%; max-width:auto; max-height:auto;}



/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* base */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width: 0; height: 0; border-radius:50%;  transform:translate(-50%,-50%) scale(1); transition:var(--transition-custom); opacity:0; border:1px solid var(--main-color);}

/* scroll */
.mouse-pointer .pointer-txt{position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:13rem; height:13rem; font-size: 1.6rem; color:#fff; font-weight: 500; letter-spacing: 0.015em; transition:var(--transition-custom); transform: translate(-50%,-50%) scale(0.5); border-radius: 100%; opacity:0; visibility: hidden;}
.mouse-pointer.scroll .pointer-circle{width:13rem; height:13rem; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-color:#fff; opacity:1;}
.mouse-pointer.scroll .pointer-txt{transform: translate(-50%,-50%) scale(1.0); visibility: visible; opacity: 1;}

.is-mobile .mouse-pointer,
.is-mobile .pointer-circle,
.is-mobile .pointer-txt,
.is-mobile .pointer-arrow{visibility: hidden; opacity: 0;}

@media all and (max-width:800px){
	.mouse-pointer,
	.pointer-circle,
	.pointer-txt,
	.pointer-arrow{visibility: hidden; opacity: 0;}
}