@import url('sub.css'); 

@-webkit-keyframes mouse-scroll {
	0%   { opacity: 0;}
	50%  { opacity: .5;}
	100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

/**** S:: 비전 ****/
.vision_deco{margin: 0 auto 60px; width: 20px; position: relative;}
.vision_deco img{width: 100%; height: auto; position: absolute; left: 0; top:0;}
.vision_deco img:nth-child(1){position: relative; -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite; -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; animation-direction: alternate; animation-delay: alternate;}
.vision_deco img:nth-child(2){ -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite;-webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; animation-delay: .2s; animation-direction: alternate;}
.vision_deco img:nth-child(3){ -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite;-webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate; animation-delay: .3s; animation-direction: alternate;}
.vision_deco img:nth-child(4){}

.vision_list{display: flex; margin: 0 auto; max-width:1480px;}
.vision_list li{flex:1; margin:0 0 0 -40px;}
.vision_list li:nth-child(1){margin: 0;}
.vision_list li .in{text-align:center; width: 400px; height: 400px; border-radius:50%; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);}
.vision_list li .in > *{position: relative; z-index: 5;}
.vision_list li .in img{width: 70px; height: auto; margin: 0 auto 30px;}
.vision_list li .in .fs30{color:var(--white);}
.vision_list li .in .eng_tit{color:var(--white); font-weight: 700; letter-spacing: 0; padding: 5px 0 0;}
.vision_list li .in .fs16{padding: 15px 0 0; color:rgba(255,255,255,.7);}
/**** E:: 비전 ****/



/**** S:: 비즈니스 ****/
.business_list{border-top:3px solid var(--white);}
.business_list dl{display: flex; padding: 60px 0; border-bottom: 1px solid rgba(255,255,255,.2);}
.business_list dl dt{width: 220px; text-align:center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.business_list dl dt img{width: 100px; height: auto;}
.business_list dl dd{width: calc(100% - 220px);}
.business_list dl dd .fs30{font-weight: 700; color:var(--white);}
.business_list dl dd .fs18{color:rgba(255,255,255,.7); padding: 10px 0 0;}
.business_list dl dd .relation{display: flex; align-items:center; padding: 30px 0 0;}
.business_list dl dd .relation strong{width: 54px; height: 30px; line-height: 30px; text-align:center; border-radius:30px; background:var(--main); color:var(--white); font-size:0.778rem; letter-spacing: var(--letter-spacing-default); font-weight: 700; display: block;}
.business_list dl dd .relation ul{width: calc(100% - 54px); padding: 0 0 0 10px; box-sizing:border-box; display: flex; flex-wrap:wrap; gap:5px 10px;}
.business_list dl dd .relation ul li{font-size:0.778rem; line-height: 160%; color:rgba(255,255,255,.7); letter-spacing: var(--letter-spacing-default);}
/**** E:: 비즈니스 ****/


@keyframes dots  {
	from {transform:scale(1); }
	to {transform:scale(3); }
}


/**** S:: 유지보수 ****/
.maintenance_dia{position: relative;}
.maintenance_dia .maintenance_dia_img{width: 560px; margin: 0 auto; position: relative;}
.maintenance_dia .maintenance_dia_img img{width: 100%; height: auto;}
.maintenance_dia .maintenance_dia_img i{display: block; font-style:normal; width: 14px; height: 14px; position: absolute;}
.maintenance_dia .maintenance_dia_img i::before{content:''; display: block; width: 100%; height: 100%; border-radius:50%; background:var(--main); position: absolute; left:0; top:0; opacity: 0.3; animation: dots 1.5s ease-in-out infinite;}
.maintenance_dia .maintenance_dia_img i.dot2::before{background:var(--sub);}
.maintenance_dia .maintenance_dia_img i::after{content:''; display: block; width: 100%; height: 100%; border-radius:50%; box-sizing:border-box; border:3px solid var(--white); position: absolute; left:0; top:0; z-index: 2;}
.maintenance_dia .maintenance_dia_img i.dot1::after{background:var(--main);}
.maintenance_dia .maintenance_dia_img i.dot2::after{background:var(--sub);}
.maintenance_dia .maintenance_dia_img i.dot3::after{background:var(--main);}
.maintenance_dia .maintenance_dia_img i.dot1{left: -7px; top:317px;}
.maintenance_dia .maintenance_dia_img i.dot2{right: -7px; top:245px;}
.maintenance_dia .maintenance_dia_img i.dot3{right: 122px; top:552px;}
.maintenance_dia .maintenance_dia_img i span{display: block; width: 70px; height: 1px; background:rgba(255,255,255,.2); position: absolute;}
.maintenance_dia .maintenance_dia_img i.dot1 span{left: -70px; top:50%;}
.maintenance_dia .maintenance_dia_img i.dot2 span{right: -70px; top:50%;}
.maintenance_dia .maintenance_dia_img i.dot3 span{right: -60px; top:180%; transform:rotate(30deg);}
.maintenance_dia dl{position: absolute; max-width:400px; width: 100%;}
.maintenance_dia dl.one{text-align:right; left: 50%; margin-left: -770px; top:308px;}
.maintenance_dia dl.two{right: 50%; margin-right: -770px; top:237px;}
.maintenance_dia dl.three{right: 50%; margin-right: -630px; top:600px;}
.maintenance_dia dl dt{display: none;}
.maintenance_dia dl dt img{}
.maintenance_dia dl dt .fs24{}
.maintenance_dia dl dd{}
.maintenance_dia dl dd .fs24{color:var(--white);}
.maintenance_dia dl dd .fs18{color:rgba(255,255,255,.7); padding: 10px 0 0;}

.maintenance_list{display: flex; background:url('/company/img/maintenance_bg.jpg') no-repeat center/cover;}
.maintenance_list li{box-sizing:border-box; width: 50%; border-right:1px solid rgba(255,255,255,.2); padding: 150px 100px; text-align:center;}
.maintenance_list li:last-child{border:0;}
.maintenance_list li img{width: 60px; height: auto; margin: 0 auto 10px;}
.maintenance_list li .fs24{color:var(--white); font-weight: 700;}
.maintenance_list li .fs18{padding-top: 20px; color:rgba(255,255,255,.7);}
.maintenance_list li .fs18 + .fs18{padding-top: 10px;}
/**** E:: 유지보수 ****/

/**** S:: 자사위치 ****/
.location_map{}
.location_map .wrap_map{width: 100%; height: 500px !important;}
.location_map .map_border{display: none !important;}
.location_map .wrap_controllers{display: none !important;}
.location_map .cont{display: none !important;}
.location_txt{box-sizing:border-box; position:relative; padding:50px 300px 50px 50px;}
.location_txt::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; position: absolute; left:0; top:0;  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid transparent; border-image: linear-gradient(145deg , rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 100%) 1;}
.location_txt > *{position: relative; z-index: 2;}
.location_txt .fs36{font-weight: 200; color:var(--white);}
.location_txt .fs36 b{font-weight: 700;}
.location_info{display: flex; flex-wrap:wrap; gap:10px 40px; padding: 20px 0 0;}
.location_info dl{display: flex; gap:0 10px;}
.location_info dl dt{display: flex; align-items:center; gap:0 10px; font-size:1rem; font-weight: 600; color:var(--white); letter-spacing: var(--letter-spacing-default); line-height: 140%;}
.location_info dl dt::before{display: inline-block; width: 45px; height: 45px; line-height: 45px; font-size:24px; text-align:center; color:var(--main); border-radius:50%; background:rgba(255,255,255,.1); font-family:var(--icon); font-weight: 400;}
.location_info dl.address dt::before{content:'\e0c8';}
.location_info dl.tel dt::before{content:'\e0b0';}
.location_info dl.fax dt::before{content:'\e8ad';}
.location_info dl dd{font-size:1rem; font-weight: 400; color:var(--white); letter-spacing: var(--letter-spacing-default); line-height: 140%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}

.location_btn{position: absolute; right: 50px; bottom: 50px; display: flex; gap:10px;}
.location_btn a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; height: 100px; font-size:0.889rem; font-weight: 600; color:var(--white); letter-spacing: var(--letter-spacing-default); text-align:center; transition:all .3s linear;}
.location_btn a img{width: 28px; height: auto; margin: 0 auto 8px; display: block;}
.location_btn a.kakao_btn{color:var(--black); background:#FAE100;}
.location_btn a.kakao_btn:hover{background:#FAD400;}
.location_btn a.naver_btn{background:#10D265;}
.location_btn a.naver_btn:hover{background:#08AD50;}
/**** E:: 자사위치 ****/

/**** S:: 특허/인증 ****/
.certification_cont{overflow: hidden;}
.certification_roll{display: flex; gap:30px; overflow: hidden; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);}
.certification_roll .roll{}
.certification_roll .roll span{display: block; width: 420px; box-sizing:border-box; padding:20px; aspect-ratio:2/2.75; overflow: hidden; position: relative;}
.certification_roll .roll span::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; position: absolute; left:0; top:0;  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid transparent; border-image: linear-gradient(145deg , rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 100%) 1;}
.certification_roll .roll span img{position: relative; z-index: 2; display: block; width: 100%; object-fit:contain;}
/**** E:: 특허/인증 ****/



/*******************************************************************************
    @media 1710px
*******************************************************************************/
@media all and (max-width:1710px){


/**** S:: 비전 ****/
.vision_list{max-width:1110px;}
.vision_list li{margin:0 0 0 -30px;}
.vision_list li .in{width: 300px; height: 300px;}
.vision_list li .in img{width: 60px; height: auto; margin: 0 auto 20px;}
/**** E:: 비전 ****/

/**** S:: 유지보수 ****/
.maintenance_dia{}
.maintenance_dia .maintenance_dia_img{width: 460px;}
.maintenance_dia .maintenance_dia_img i.dot1{top:217px;}
.maintenance_dia .maintenance_dia_img i.dot2{top:205px;}
.maintenance_dia .maintenance_dia_img i.dot3{right: 102px; top:456px;}
.maintenance_dia .maintenance_dia_img i span{width: 50px;}
.maintenance_dia .maintenance_dia_img i.dot1 span{left: -50px;}
.maintenance_dia .maintenance_dia_img i.dot2 span{right: -50px;}
.maintenance_dia .maintenance_dia_img i.dot3 span{right: -40px; top:140%;}
.maintenance_dia dl{max-width:300px;}
.maintenance_dia dl.one{margin-left: -610px; top:208px;}
.maintenance_dia dl.two{margin-right: -610px; top:196px;}
.maintenance_dia dl.three{margin-right: -480px; top:470px;}
/**** E:: 유지보수 ****/

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/**** S:: 비전 ****/
.vision_list{max-width:580px; flex-wrap:wrap;}
.vision_list li{flex:auto; margin:0;}
.vision_list li:nth-child(1){margin: 0;}
.vision_list li:nth-child(2){margin: 0 0 0 -20px;}
.vision_list li:nth-child(3){margin: -20px 0 0 0;}
.vision_list li:nth-child(4){margin: -20px 0 0 -20px;}
/**** E:: 비전 ****/

/**** S:: 유지보수 ****/
.maintenance_dia{}
.maintenance_dia .maintenance_dia_img{width: 380px;}
.maintenance_dia .maintenance_dia_img i.dot1{top:155px;}
.maintenance_dia .maintenance_dia_img i.dot2{top:145px;}
.maintenance_dia .maintenance_dia_img i.dot3{right: 92px; top:378px;}
.maintenance_dia .maintenance_dia_img i.dot1 span{left: -50px;}
.maintenance_dia .maintenance_dia_img i.dot2 span{right: -50px;}
.maintenance_dia .maintenance_dia_img i.dot3 span{right: -40px;}
.maintenance_dia dl{max-width:220px;}
.maintenance_dia dl.one{margin-left: -480px; top:148px;}
.maintenance_dia dl.two{margin-right: -480px; top:116px;}
.maintenance_dia dl.three{margin-right: -380px; top:380px;}

.maintenance_list{}
.maintenance_list li{padding: 150px 50px;}
/**** E:: 유지보수 ****/

/**** S:: 특허/인증 ****/
.certification_roll{mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);}
.certification_roll .roll span{width: 300px;}
/**** E:: 특허/인증 ****/


}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/**** S:: 비전 ****/
.vision_deco{margin: 0 auto 40px;}

.vision_list{max-width:480px;}
.vision_list li .in{width: 250px; height: 250px;}
.vision_list li .in img{width: 50px; height: auto; margin: 0 auto 15px;}
.vision_list li .in .eng_tit{padding: 3px 0 0;}
.vision_list li .in .fs16{padding: 10px 0 0;}
/**** E:: 비전 ****/


/**** S:: 비즈니스 ****/
.business_list{}
.business_list dl{padding: 40px 0;}
.business_list dl dt{width: 180px;}
.business_list dl dt img{width: 60px; height: auto;}
.business_list dl dd{width: calc(100% - 180px);}
.business_list dl dd .relation{padding: 20px 0 0;}
/**** E:: 비즈니스 ****/


/**** S:: 유지보수 ****/
.maintenance_dia{counter-reset: my-counter;}
.maintenance_dia .maintenance_dia_img{display: none;}
.maintenance_dia dl{max-width:100%; position: relative; display: flex;}
.maintenance_dia dl + dl{margin-top: 5px;}
.maintenance_dia dl.one{left: auto; margin-left: 0; top:auto; text-align:left;}
.maintenance_dia dl.two{right: auto; margin-right: 0; top:auto;}
.maintenance_dia dl.three{right: auto; margin-right: 0; top:auto;}
.maintenance_dia dl dt{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 150px; text-align:center; box-sizing:border-box; padding:20px 10px; position: relative;}
.maintenance_dia dl dt::before{counter-increment: my-counter; content: counter(my-counter, decimal-leading-zero); font-size:0.778rem; color:rgba(255,255,255,.7); position: absolute; left: 10px; top:10px; font-weight: 600;}
.maintenance_dia dl.one dt{background:#f16a33;}
.maintenance_dia dl.two dt{background:#fc8c37;}
.maintenance_dia dl.three dt{background:#f16a33;}
.maintenance_dia dl dt img{width: 45px; height: auto; margin: 0 auto 10px;}
.maintenance_dia dl dt .fs18{color:var(--white); font-weight: 700;}
.maintenance_dia dl dd{width: calc(100% - 150px); box-sizing:border-box; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border:1px solid rgba(255,255,255,.2); border-left: 0;}
.maintenance_dia dl dd .fs18{padding: 6px 0 0;}


.maintenance_list{}
.maintenance_list li{padding: 100px 30px;}
.maintenance_list li img{width: 50px; height: auto;}
.maintenance_list li .fs18{padding-top: 10px;}
/**** E:: 유지보수 ****/



/**** S:: 자사위치 ****/
.location_map{}
.location_map .wrap_map{height: 400px !important;}
.location_txt{padding:30px;}

.location_btn{right: 20px; bottom: auto; top:-100px; z-index: 99;}
.location_btn a{width: 80px; height: 80px;}
.location_btn a img{width: 20px; height: auto; margin: 0 auto 8px;}
/**** E:: 자사위치 ****/

/**** S:: 특허/인증 ****/
.certification_roll{gap:20px;}
.certification_roll .roll span{width: 250px; padding:15px;}
/**** E:: 특허/인증 ****/

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



/**** S:: 비전 ****/
.vision_deco{margin: 0 auto 30px; width: 15px;}

.vision_list{max-width:100%;}
.vision_list li{width: 50%; box-sizing:border-box; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);}
.vision_list li:nth-child(1){margin: 0; border-right:0; border-bottom:0;}
.vision_list li:nth-child(2){margin: 0; border-bottom:0;}
.vision_list li:nth-child(3){margin: 0; border-right:0;}
.vision_list li:nth-child(4){margin: 0;}

.vision_list li .in{width: 100%; height: 100%; border-radius:0; padding:30px 20px; border:0; background:transparent; backdrop-filter: blur(0);}
.vision_list li .in img{width: 40px; height: auto; margin: 0 auto 10px;}
/**** E:: 비전 ****/



/**** S:: 비즈니스 ****/
.business_list{border-width:2px;}
.business_list dl{padding: 30px 0; flex-wrap:wrap;}
.business_list dl dt{width: 50px; margin: 0 auto 10px;}
.business_list dl dt img{width: 50px; height: auto;}
.business_list dl dd{width: 100%; text-align:center;}
.business_list dl dd .fs18{padding: 6px 0 0;}
.business_list dl dd .relation{padding: 10px 0 0; flex-wrap:wrap;}
.business_list dl dd .relation strong{width: 50px; height: 24px; line-height: 24px; margin: 0 auto 8px; font-size:0.889rem;}
.business_list dl dd .relation ul{width: 100%; padding: 0; gap:5px; font-size:0.889rem; justify-content: center;}
/**** E:: 비즈니스 ****/

/**** S:: 유지보수 ****/
.maintenance_dia dl{}
.maintenance_dia dl + dl{margin-top: 5px;}
.maintenance_dia dl dt{width: 120px; padding:15px 10px;}
.maintenance_dia dl dt::before{top:5px;}
.maintenance_dia dl dt img{width: 35px; height: auto; margin: 0 auto 6px;}
.maintenance_dia dl dd{width: calc(100% - 120px); padding: 15px;}



.maintenance_list{flex-wrap:wrap;}
.maintenance_list li{width: 100%; padding: 50px 30px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2);}
.maintenance_list li:last-child{border:0;}
.maintenance_list li img{width: 40px; height: auto;}
.maintenance_list li .fs18{padding-top: 6px;}
.maintenance_list li .fs18 + .fs18{padding-top: 6px;}
/**** E:: 유지보수 ****/




/**** S:: 자사위치 ****/
.location_map{}
.location_map .wrap_map{height: 300px !important;}
.location_txt{padding:20px;}
.location_txt::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.25)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 2;
    pointer-events: none;
}
.location_info{gap:8px 30px; padding: 15px 0 0;}
.location_info dl{gap:0 8px;}
.location_info dl dt{gap:0 8px;}
.location_info dl dt::before{width: 30px; height: 30px; line-height: 30px; font-size:16px;}
.location_info dl dd{}

.location_btn{right: 10px; bottom: auto; top:-80px; gap:5px;}
.location_btn a{width: 70px; height: 70px;}
.location_btn a img{width: 16px; height: auto; margin: 0 auto 5px;}
/**** E:: 자사위치 ****/



/**** S:: 특허/인증 ****/
.certification_roll .roll span{width: 150px;}

.certification_roll .roll span::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.25)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 2;
    pointer-events: none;
}

/**** E:: 특허/인증 ****/


}