@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main main {overflow: hidden; }
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}


.color-b {color:#222 !important;}
.color-g {color:#666 !important;}
.color-1 {color:#172b80 !important;}
.color-2 {color:#aa3a00 !important;}
.color-3 {color:var(--color-main) !important;}








@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */






/* ===================================================== */
/* MAIN-VISUAL : S */



.mainvisual-wrap {position: relative;}

/*.is-fix .mainvisual-wrap.is-active {margin:0; border-radius: 0;}*/


.mainvisual-slide {height:100vh; height: calc(var(--vh, 1vh) * 100); min-height: 65rem; background-color: #000; position: relative; transition: height 0.3s linear;}


.mainvisual-slide .slide-list {height: 100%;}
.mainvisual-slide .item {position: relative; height:100%; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.mainvisual-slide .item .bg {height:100%; width:100%; position: absolute; z-index: -1;}
.mainvisual-slide .item .bg::after {content:''; display: block; width:100%; height:100%; position: absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.7); z-index: 2;}
.mainvisual-slide .item .bg span{display: block; width: 100%;height: 100%; background:no-repeat center/cover; transform: scale(1); transition: all 10s linear;}
.mainvisual-slide .item.is-active .bg span {transform: scale(1.1);}

.mainvisual-slide .item.nth-1 .bg span {background-image: url('../images/main/visual_bg01.jpg');}
.mainvisual-slide .item.nth-2 .bg span {background-image: url('../images/main/visual_bg02.jpg');}
.mainvisual-slide .item.nth-3 .bg span {background-image: url('../images/main/visual_bg03.jpg');}
.main__visual-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.mainvisual-slide .swiper-slide .bg.vod {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	transition: all 10s ease-in-out;
	
}



.mainvisual-slide .copy-box {margin:0 var(--inner-padding);}
.mainvisual-slide .copy-box h3 {font-size:max(8rem); font-weight: 700; color:#11b4ea ;}
.mainvisual-slide .copy-box h3 span:last-child {color:#0094d9;}
.mainvisual-slide .copy-box p {margin-top:1rem; display: inline-flex; font-size:max(2.4rem, 17px); font-weight: 700; color:#fff;}

.mainvisual-slide .item.is-active .copy-box h3 {animation: clip-right 1s ease-in-out 1s both ;}
.mainvisual-slide .item.is-active .copy-box p {animation: fade-up 1s ease-in-out 1.2s both ;}




.mainvisual-slide .slide-control {position: absolute; top:50%; right:var(--outer-padding); z-index: 1; }

.mainvisual-slide .slide-control-wrap {display: flex; flex-direction: column; gap:2rem; align-items: center;}

.slide-control-wrap .paging {font-size:0; display: flex; flex-direction: column; gap:3rem; align-items: center; }
.slide-control-wrap .paging span {width:1rem; height:1rem; opacity: 1; background-color: #898b8f; transition: all 0.3s ease;}
.slide-control-wrap .paging span:hover {background-color: var(--color-main);}
.slide-control-wrap .paging span.swiper-pagination-bullet-active {background-color: var(--color-sub1);}





.mainvisual-slide .slide-control .progress {display: flex; align-items: center; justify-content: center; position: relative; width: 5.4rem; height: 5.4rem; flex-shrink: 0;}
.mainvisual-slide .slide-control .progress svg {z-index: 2; width: 100%; height: 100%; stroke-width: 1px; stroke: #fff; fill: none; stroke-dashoffset: calc(166.5 * (1 - var(--progress))); stroke-dasharray: 166.5; transform: rotate(-90deg); }
.mainvisual-slide .slide-control .progress .bg { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
}



.slide-control-wrap .play {position: absolute; top:0%; left:0%; z-index: 2; display: flex; align-items: center; justify-content: center; width:100%; height:100%; cursor: pointer; font-size: 0; text-indent: -99999px; overflow: hidden;}

.slide-control-wrap .play span {display: inline-block; width: 0; height: 0; transition: all 0.5s ease-in-out; border: solid transparent; border-width: 7px 0 7px 12px; margin-left:1px;}
.slide-control-wrap .play span::before,
.slide-control-wrap .play span::after {content:''; display: block; width:1px; height:18px; position: absolute; top:50%; left:50%;  transition: all 0.5s ease-in-out; background-color: #fff;}
.slide-control-wrap .play span::before {transform: translate(-0.5rem, -50%);}
.slide-control-wrap .play span::after {transform: translate(0.3rem, -50%);}

.slide-control-wrap .play.on span { border-color: transparent transparent transparent #fff;}

.slide-control-wrap .play.on span::before,
.slide-control-wrap .play.on span::after {background-color: transparent; transform: translate(-50%, -50%);}






@media (max-width: 1440px){
	
}


@media (max-width: 1024px){
	
}

@media (max-width: 768px){
	.mainvisual-slide .copy-box {text-align: center; }
	.mainvisual-slide .copy-box h3 {font-size:max(4.8rem, 40px); font-weight: 700; }
}

@media (max-width: 640px){
	.mainvisual-slide .slide-control {inset:auto; bottom:3rem; left:50%; transform: translate(-50%, 0);}

	.mainvisual-slide .slide-control-wrap {flex-direction: row;}
	.slide-control-wrap .paging { flex-direction: row; gap:2rem;}
}



/* 스크롤 다운 */
.visual-scroll { display: flex; flex-direction: column; align-items: center; width:5.4rem; position: absolute; right: var(--outer-padding); bottom: 0; transition: .3s; z-index: 1;} 
.visual-scroll-line { overflow: hidden; position: relative; width: 1px; height:13rem; background-color: var(--color-white-a2); } 
.visual-scroll-line::before { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: #fff; content: ''; animation: scroll-line 2.5s linear infinite; } 
@keyframes scroll-line { 
  0% { transform: translateY(-110%); } 
  10% { transform: translateY(-60%); } 
  60% { transform: translateY(160%); } 
  70% { transform: translateY(210%); } 
  100% { transform: translateY(210%); } 
}



.scroll-btn {position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1; opacity: 0;}
.scroll-btn a {display: block; height:100%; font-size:0; text-indent: -8888px; }

@media (max-width: 640px){
	.visual-scroll {width:1rem;} 
}

/* MAIN-VISUAL : E */
/* ===================================================== */










/* ===================================================== */
/* SECTION 2 : S*/

/*SJ Product*/
.main__pro {padding:9rem 0 10rem; background: url('../images/main/section02_bg.png') no-repeat center bottom/cover;}
.main__pro .sec-header {text-align: center;}
.main__pro .sec-header .sec-tit {font-size:5rem; font-weight: 700; color:#000; display: flex; justify-content: center; align-items: center; gap:1rem; line-height: 1;}
.main__pro .sec-header .sec-tit span:first-child {display: inline-block; width:8rem;}
.main__pro .sec-header .sec-txt {font-size: max(2rem, 18px); font-weight: 700; color:#007bc3; margin-top:1rem;}

.main__pro-wrap {max-width: 1920px; margin:0 auto;}


.main__pro-list .item {padding:0 1rem;}
.main__pro-list .image-box {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.main__pro-list .image-box .image {display: block; transform: scale(0.5); transition: all 0.5s ease-in-out;}
.main__pro-list .image-box .tit {display: flex; align-items: center; justify-content: center; text-align: center; width:100%; font-size:2rem; font-weight: 700; transition: all 0.5s ease-in-out; position: absolute;}

.main__pro-list .image-box .tit.is-off {width:100%; top:72%; }

.main__pro-list .image-box .tit.is-on {z-index: 1;  font-size:2.5rem; width:18rem; height:18rem; color:#fff; top:50%; left:auto; right:0; opacity: 0;}
.main__pro-list .image-box .tit.is-on::before {content: '';  display: block; position: absolute; top:50%; left:50%;width:0%; height:0%; border-radius: 50%; z-index: -1; transform: translate(-50%, -50%); transition: all 0.5s ease-in-out;}

.main__pro-list .is-active .image-box .image {transform: scale(1);}
.main__pro-list .is-active .image-box .tit.is-off {opacity: 0;}
.main__pro-list .is-active .image-box .tit.is-on {opacity: 1;}
.main__pro-list .is-active .image-box .tit.is-on::before { background-color: rgba(8, 104, 172, 0.7); width:100%; height:100%;}

.main__pro-list .is-active .link:hover .image-box .image {transform: scale(1.1);}
.main__pro-list .is-active .link:hover .image-box .tit.is-on::before { background-color: rgba(8, 104, 172, 1);}


.main__pro-list .desc {font-size:2.2rem; font-weight: 700; color: #222; text-align: center; opacity: 0;}
.main__pro-list .is-active .desc { opacity: 1; animation: fadeInUp 1s ease-in-out;}



.main__pro-box {position: relative;}
.main__pro-box .slide-btn { width:5.6rem; height:5.6rem; font-size:0; text-indent: -99999px; transition: all 0.3s ease-in-out; position: absolute; top:50%; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center;}
.main__pro-box .slide-btn span {display: block; width:100%; height:100%; border:solid #222;  border-width: 0.3rem 0.3rem 0 0;transition: all 0.3s ease-in-out;}

.main__pro-box .slide-btn.prev {left:var(--outer-padding); transform: translate(0, -50%) rotate(-135deg);}
.main__pro-box .slide-btn.next {right:var(--outer-padding); transform: translate(0, -50%) rotate(45deg);}

.main__pro-box .slide-btn.swiper-button-disabled {opacity: 0.2; cursor: default;}
.main__pro-box .slide-btn:hover span{border-color:var(--color-sub1);}
.main__pro-box .slide-btn.swiper-button-disabled:hover span {border-color:#000;}

.main__pro-box .slide-btn.swiper-button-lock {pointer-events: none; opacity: 0;}

@media (max-width: 1920px) {
	.main__pro-box .slide-btn.prev {left:calc(var(--inner-padding) * 2);}
	.main__pro-box .slide-btn.next {right:calc(var(--inner-padding) * 2);}
}

@media (max-width: 768px) {
	.main__pro-box .slide-btn {width:30px; height:30px; top:100%;}
	.main__pro-box .slide-btn.prev {left:var(--inner-padding);transform: translate(0, 50%) rotate(-135deg);}
	.main__pro-box .slide-btn.next {right:var(--inner-padding);transform: translate(0, 50%) rotate(45deg);}
}


/* SECTION 2 : E*/
/* ===================================================== */





/* ===================================================== */
/* SECTION 3 : S*/
/*Repair*/
.main__repair {padding:15rem 0 0; background:url('../images/main/section03_bg01.png') no-repeat center/cover;}

.main__repair .sec-header {color:#fff;}
.main__repair .sec-header .sec-tit {font-size: 8rem; font-weight: 700;}

.main__repair-wrap {margin-top:6rem;}
.main__repair-list {display: grid; grid-template-columns: repeat(3, 1fr);grid-auto-rows: 1fr;}
.main__repair-item {border:solid var(--color-white-a3); border-width: 1px 0 0 1px; position: relative;}
.main__repair-item:nth-child(3n + 1) {border-left-width:0px;}


.main__repair-item .is-off {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease-in-out; z-index: 2;}
.main__repair-item:hover { z-index: 2;}
.main__repair-item:hover .is-off {opacity: 0; z-index: 1;}

.main__repair-item .is-on {height:100%; z-index: 1; transition: all 0.5s ease-in-out; opacity:0; position: relative;}
.main__repair-item:hover .is-on {opacity: 1; z-index: 2; animation: clip-right 0.3s linear both;}

.main__repair-item .on-item {display: flex; align-items: center; height:100%; width:100%; background: #fff url('../images/main/repair_bg01.png') no-repeat center/cover;}
.main__repair-item .on-item .brand{flex-shrink: 0; width:50%;}

.repair__nav {height:100%; border-left:1px solid #e3e3e3; display: flex; align-items: center; width: 100%;}
.repair__nav-wrap {width: 100%;}



.repair__nav .link {display: block; padding:1.5rem 6rem 1.5rem 4rem; font-size: max(1.8rem, 16px); font-weight: 700; color:#222; transition: all 0.3s ease-in-out; position: relative; z-index: 1; }
.repair__nav .link span {display: block;}

.repair__nav .link::before,
.repair__nav .link::after,
.repair__nav .link span::before {content:''; display: block; transition: all 0.3s ease-in-out; position: absolute;}

.repair__nav .link::before {width:0%; height:100%; background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(31, 141, 220, 1) 70%); top:0; left:0; z-index: -1;}
.repair__nav .link::after {content:''; display: block; width:3.7rem; height:100%; background: url('../images/sub/ico_arrow01.png') no-repeat 100% center/contain; position: absolute; top:0; right:2rem; opacity: 0;}
.repair__nav .link span::before {width:4px; height:4px; background-color:#000; top:50%; left:2rem; transform: translate(0, -50%);}

.repair__nav .link:hover {color:#fff;}
.repair__nav .link:hover::before {width:100%;}
.repair__nav .link:hover::after {right:1rem; opacity: 1; transition-delay: 0.3s;}
.repair__nav .link:hover span::before {background-color: #fff;} 

@media (max-width: 1440px) {
	.main__repair-item .on-item .brand{ width:50%;}
	.repair__nav .link {padding:1rem 6rem 1rem 4rem;}
	
}

@media (max-width: 1280px) {
	.main__repair-list {grid-template-columns: repeat(2, 1fr);grid-auto-rows: 1fr;}
	.main__repair-item:nth-child(3n + 1) {border-left-width:1px;}
	.main__repair-item:nth-child(2n + 1) {border-left-width:0;}
}
@media (max-width: 960px) {
	.main__repair .sec-header .sec-tit {font-size: 7rem; text-align: center;}
	.main__repair-list {grid-template-columns: repeat(1, 1fr);}
	
	.main__repair-item,
	.main__repair-item:nth-child(3n + 1) {border-left-width:0px;}
	
}

@media (max-width: 640px) {
	.main__repair-list {grid-auto-rows:auto ;}

	.main__repair-item .on-item {flex-direction: column;}
	.main__repair-item .on-item .brand{ width:70%;}

	.repair__nav {height:auto; border-left:0; border-top:1px solid #e3e3e3; padding:2rem 0; display: none;}

	
}


/* SECTION 3 : E*/
/* ===================================================== */





/* ===================================================== */
/* SECTION 4 : S */

/*회사소개*/
.main__info {padding:16rem 0; background: #0868ac;}
.main__info-wrap {display: flex; gap:4rem;}
.main__info-cols {flex:1;}


.main__info .sec-header {color:#fff;}
.main__info .sec-header .sec-tit {font-size: 7rem; font-weight: 700;}
.main__info .sec-header .sec-txt {font-size: 3.7rem; font-weight: 700; color:#87cdff; border:solid #2783c5; border-width: 1px 0; padding:1rem 0; margin-top:2rem;}
.main__info .sec-header .sec-desc {font-size: 2.1rem; font-weight: 500; font-family: var(--font-pret); margin-top:2rem;}

.main__info-item {margin-top:10rem; display: flex; gap:3rem;}
.main__info-item .link {flex:1;display: flex;  padding-bottom:2rem; position: relative; border-bottom:2px solid #000;}

.main__info-item .link::before,
.main__info-item .link::after {content:''; display: block; transition: all 0.5s ease-in-out; position: absolute;}

.main__info-item .link::before {width:0; height:2px; background-color: #fff; top:100%; left:0;}
.main__info-item .link::after {width:1.6rem; height:1.6rem; border:solid #fff; border-width: 2px 2px 0 0; top:100%; right:100%; transform: translateY(calc(0px - 50% + 1px)) rotate(45deg); opacity: 0;}

.main__info-item .link:hover::before {width:100%;}
.main__info-item .link:hover::after {right:0; opacity: 1;}


.main__info-item .link-box {display: flex; flex-direction: column;  gap:2rem;}

.main__info-item .link-box::before {content:''; display: block; width:9.4rem; height:9.4rem;  background: #0b619f no-repeat center/contain; border-radius: 50%; transition:all 0.5s ease-in-out;}

.main__info-item .link:hover .link-box::before {background-color: #1279c1;}

.main__info-item .link.nth-1 .link-box::before {background-image: url('../images/main/section04_ico01.png');}
.main__info-item .link.nth-2 .link-box::before {background-image: url('../images/main/section04_ico02.png');}
.main__info-item .link.nth-3 .link-box::before {background-image: url('../images/main/section04_ico03.png');}

.main__info-item .link.nth-1:hover .link-box::before {background-image: url('../images/main/section04_ico01_on.png');}
.main__info-item .link.nth-2:hover .link-box::before {background-image: url('../images/main/section04_ico02_on.png');}
.main__info-item .link.nth-3:hover .link-box::before {background-image: url('../images/main/section04_ico03_on.png');}



.main__info-item .txt {font-size: 2.5rem; font-weight: 700; color:#000; transition: all 0.5s ease-in-out;}
.main__info-item .link:hover .txt {color:#fff;}






.main__info-cols.nth-2 {display: flex; align-items: center; justify-content: center;}
.main__info-bg {position: relative;}
.main__info-bg .bg-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 58rem;  margin: 0 auto; mix-blend-mode: soft-light;}
.main__info-bg .bg-wrap .item { aspect-ratio: 1 / 1;}
.main__info-bg .bg-wrap .item .bg {width: 100%; height: 100%; animation: rotate-1 12s linear infinite;}
.main__info-bg .bg-wrap .item:nth-child(2n) .bg {animation-name:rotate-2; animation-duration: 11s;}
.main__info-bg .bg-wrap .item:nth-child(2) .bg {animation-delay: 0.3s;}
.main__info-bg .bg-wrap .item:nth-child(3) .bg {animation-delay: 0.6s;}
.main__info-bg .bg-wrap .item:nth-child(4) .bg {animation-delay: 0.9s;}
.main__info-bg .bg-wrap .item:nth-child(5) .bg {animation-delay: 0.3s;}
.main__info-bg .bg-wrap .item:nth-child(6) .bg {animation-delay: 0.6s;}
.main__info-bg .bg-wrap .item:nth-child(7) .bg {animation-delay: 0.9s;}
.main__info-bg .bg-wrap .item:nth-child(8) .bg {animation-delay: 0.3s;}
.main__info-bg .bg-wrap .item .bg img {width: 100%; height: 100%; object-fit: cover; display: block;}

@keyframes rotate-1 {
	0% { transform:rotate(0); opacity: 1;} 
	50% {transform:rotate(360deg); opacity: 0.1;}
	100% {transform:rotate(0deg); opacity: 1;} 
}
@keyframes rotate-2 {
	0% { transform:rotate(0); opacity: 1;} 
	50% {transform:rotate(-360deg); opacity: 0.05;}
	100% {transform:rotate(0deg);  opacity: 1;} 
}

.main__info-bg .symbol-txt {position: absolute; top:15%; left:20%; width:30%; height:40%; background-color: #fff; display: flex; align-items: center; justify-content: 
center; opacity: 0; box-shadow: 0 0 5rem rgba(0, 50, 85, 0.6); padding:2rem;}
.main__info-bg .symbol-txt.aos-animate { opacity: 1; animation: zoomIn 0.7s linear both;}



@media (max-width: 1280px) {
	.main__info .sec-header .sec-tit {font-size: 5rem;}
	.main__info .sec-header .sec-txt {font-size: 3rem;}
	.main__info .sec-header .sec-desc {font-size: 2rem;}
}

@media (max-width: 768px) {
	.main__info-wrap {flex-direction: column; row-gap: 5rem;}

	.main__info-bg .symbol-txt {width:35%; top:50%; left:50%; transform: translate(-50%, -50%) scale(0);}
	.main__info-bg .symbol-txt.aos-animate { opacity: 1; animation: none; transform: translate(-50%, -50%) scale(1);}
}



@media (max-width: 480px) {
	.main__info-item {margin-top:6rem; flex-direction: column;}
	.main__info-item .link-box {flex-direction: row; align-items: center;}
}


/* SECTION 4 : E */
/* ===================================================== */





/* ===================================================== */
/* */

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
@media (max-width: 480px) {
}
/* */
/* ===================================================== */