@charset "utf-8";

/* =========================== MAIN */
#mainVisual{overflow:hidden;position:relative;letter-spacing:-.2px;width:100%;height:100vh;min-height:650px;background:#222}
#mainVisual .main_slide{height:100%}
#mainVisual ul li{background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/main/main01.jpg) center no-repeat;background-size: cover;background-position: center;background-blend-mode: darken;}
#mainVisual ul li.bg02{background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/main/main02.jpg)}
#mainVisual ul li.bg03{background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/main/main03.jpg)}
#mainVisual ul li img{object-fit: cover}
.main a.main_eng_btn {color: #fff;!important;margin-right: 30px;}
/* 텍스트 */
#mainVisual .main_txt{position:absolute;top:50%;left:5%;z-index:101;transform:translateY(-50%);width:max-content;font-size:18px;line-height:1.5;color: rgb(255 255 255 / 81%);font-family:'Poppins','Pretendard'}
#mainVisual .main_txt .stit{display:block;font-size:16px;font-weight:500;color:var(--primary)}
#mainVisual .main_txt .btit{margin:45px 0 30px;font-size:60px;font-weight:700;color:#fff;line-height:1.25;white-space:pre-line}

/* 컨트롤 */
#mainVisual .controls{display:flex;flex-flow:column;align-items:flex-start;width:max-content;margin-top:100px}
#mainVisual .controls div{display:flex;align-items:center;margin-bottom:20px}
#mainVisual .controls .arr{cursor:pointer;padding-bottom:4px}
#mainVisual .controls .pager{width:75px;margin:0 35px; font-size:0}
#mainVisual .controls .pager span{position:relative;font-size:14px;font-weight:600;color:#fff}
#mainVisual .controls .pager span+span{opacity:.5;margin-left:20px;padding-left:20px}
#mainVisual .controls .pager span:before{content:"0"}
#mainVisual .controls .pager span+span:after{display:block;;content:"";position:absolute;left:0;top:4px;width:1px;height:12px;background:rgba(255,255,255,.4)}
#mainVisual .main_timeline{width:100%;height:auto;margin-right:12px}
#mainVisual .main_timeline span{display:none;position:relative;width:100%;height:2px;border-radius:0;background:#fff;opacity:1}
#mainVisual .main_timeline span.on{display:block}
#mainVisual .main_timeline span:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}
#mainVisual .main_timeline span.on:before{background:var(--primary);animation:progressbar 4s linear}
@keyframes progressbar{0%{width:0}to{width:100%}}

@media(max-width:1024px){
#mainVisual .main_txt{left:30px;font-size:16px}
#mainVisual .main_txt .btit{font-size:48px}
.main_eng_btn{color: #000;margin-right: 50px;font-weight: 600;}
}
@media(max-width:768px){
#mainVisual{min-height:450px}
#mainVisual .main_txt{width:100%;padding-right:30px;word-break:keep-all}
#mainVisual .main_txt .stit{font-size:14px}
#mainVisual .main_txt .btit{margin:20px 0;font-size:38px}
#mainVisual .controls{margin-top:50px}
#mainVisual .controls div{margin-bottom:10px}
#mainVisual .controls .pager span{font-size:13px}
}
@media(max-width:480px){
#mainVisual .main_txt .btit{white-space:normal;word-break:keep-all}
#mainVisual .main_txt .btit{font-size:32px}
#mainVisual .main_txt {padding: 0 5%; left: 0;}
}

/* =========================== inc01 */
#inc01{display:flex;padding:220px 0 220px 5%;background:url(../img/main/inc01/bg.png) bottom center no-repeat #020305}
#inc01 .tit_area{flex-shrink:0;padding-top:70px}
#inc01 .tit_area p{margin-bottom:25px;font-size:65px;font-weight:700;color:#fff}
#inc01 .tit_area .pl{font-size:17px;white-space:pre-line;line-height:1.8}
#inc01 .controls{display:flex;align-items:center;margin-top:70px;color:#fff}
#inc01 .controls .arr{display:flex;align-items:center;cursor:pointer}
#inc01 .controls .pager{width:76px;margin:0 35px;font-size:0}
#inc01 .controls .pager span{position:relative;font-size:14px;font-weight:600}
#inc01 .controls .pager span+span{opacity:.5;margin-left:20px;padding-left:20px}
#inc01 .controls .pager span:before{content:"0"}
#inc01 .controls .pager span+span:after{display:block;;content:"";position:absolute;left:0;top:4px;width:1px;height:12px;background:rgba(255,255,255,.4)}

#inc01 .inc01_slide {margin-left:18%}
#inc01 ul li{height:526px;overflow:hidden;border-radius:30px;background:url(../img/main/inc01/biz_img.jpg) center no-repeat;background-size:cover}
#inc01 ul li.li02{background-image:url(../img/main/inc01/img02.jpg)}
#inc01 ul li.li03{background-image:url(../img/main/inc01/img03.jpg)}
#inc01 ul li a{position:relative;display:flex;flex-flow:column;align-items:flex-start;height:100%;padding:50px;color:rgba(255,255,255,.7);word-break:keep-all;transition:all .3s}
#inc01 ul li a img{opacity:0;margin-top:15px;transition:all .3s}
#inc01 ul li p{margin:auto 0 15px;font-size:30px;font-weight:600;line-height:1.35;color:#fff}
#inc01 ul li:before{opacity:0;display:block;content:"";position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;background:var(--primary);transition:all .3s}
#inc01 .main_business_bg {background-size: cover;background-position: center;background-blend-mode: darken;}
#inc01 .biz_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_biz.png');}
#inc01 .lift_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_lift.png');}
#inc01 .tm_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_tm.png');}
#inc01 .robot_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_robot.png');}
#inc01 .space_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_space.png');}
#inc01 .camera_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_camera.png');}
#inc01 .infra_con {background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/img/home/main1/business_infra.png');}
@media(hover:hover){
#inc01 ul li:hover:before{opacity:.9}
#inc01 ul li:hover a{color:#fff}
#inc01 ul li:hover img{opacity:1;margin:0}
}
@media(max-width:1300px){
#inc01{padding:160px 0 160px 30px}
#inc01 .inc01_slide{margin-left:8%}
#inc01 ul li{height:480px}
#inc01 ul li a{padding:30px}
}
@media(max-width:1024px){
#inc01 .tit_area p{font-size:42px}
#inc01 .tit_area .pl{font-size:16px}
#inc01 ul li{height:420px}
#inc01 ul li p{font-size:26px}
}
@media(max-width:768px){
#inc01{display:block;padding:60px 0}
#inc01 .tit_area{padding:0 20px 25px;text-align:center}
#inc01 .tit_area p{margin-bottom:10px;font-size:32px}
#inc01 .tit_area .pl{white-space:normal;word-break:keep-all}
#inc01 .controls{justify-content:center;margin-top:15px}
#inc01 .inc01_slide{margin-left:20px}
#inc01 ul li{height:380px;border-radius:16px}
#inc01 ul li a{padding:20px}
#inc01 ul li p{font-size:22px;word-break:keep-all}
}
@media(max-width:480px){
#inc01 .inc01_slide{margin-left:0}
}

/* =========================== inc02 */
#inc02{ display:flex;align-items: baseline;height:970px;padding:80px 5% 0;background:url(../img/main/inc02/bg.png) top center no-repeat #020305}
#inc02 .tit_area{flex-shrink:0;padding-top:70px}
#inc02 .tit_area p{margin-bottom:25px;font-size:65px;font-weight:700;color:#fff}
#inc02 .tit_area .pl{font-size:17px;white-space:pre-line;line-height:1.8}

#inc02 ul{display:flex;flex-grow:1;margin-left:250px}
#inc02 ul li{width:33%;text-align:center}
#inc02 ul li span{font-size:65px;font-weight:700;color:#fff;font-family:'Poppins'}
#inc02 ul li p i{font-size:45px;font-weight:700;color:#fff;font-style:normal;font-family:'Poppins'}
#inc02 ul li .tit{margin:5px 0 30px;font-size:30px;font-weight:600;color:#fff}
#inc02 ul li div{white-space:pre-line}
@media(max-width:1500px){
#inc02 ul{margin-left:8%}
}
@media(max-width:1300px){
#inc02{padding:80px 30px}
}
@media(max-width:1024px){
#inc02{height:600px;padding-top:0}
#inc02 .tit_area p{font-size:42px}
#inc02 .tit_area .pl{font-size:16px}
#inc02 ul li span{font-size:40px}
#inc02 ul li .tit{font-size:26px}
#inc02 ul li p i{font-size:26px}
}
@media(max-width:768px){
#inc02{display:block;padding:60px 20px}
#inc02 .tit_area{padding:0 20px 35px;text-align:center}
#inc02 .tit_area p{margin-bottom:10px;font-size:32px}
#inc02 .tit_area .pl{white-space:normal;word-break:keep-all}
#inc02 ul{margin-left:0}
#inc02 ul li span{font-size:32px}
#inc02 ul li .tit{margin-bottom:15px;font-size:22px}
}
@media(max-width:480px){
#inc02{height:auto}
#inc02 ul{display:block}
#inc02 ul li{width:auto}
#inc02 ul li+li{margin-top:25px}
#inc02 ul li span{font-size:26px}
#inc02 ul li p i{font-size:20px}
#inc02 ul li .tit{margin-bottom:10px;font-size:18px}
}

/* =========================== inc03 */
#inc03{display:flex;padding:220px 0 280px 5%;background:url(../img/main/inc03/bg.png) 70% center no-repeat #020305}
#inc03 .tit_area{flex-shrink:0;padding-top:70px}
#inc03 .tit_area p{margin-bottom:25px;font-size:65px;font-weight:700;color:#fff}
#inc03 .tit_area .pl{font-size:17px;white-space:pre-line;line-height:1.8}
#inc03 .controls{display:flex;align-items:center;margin-top:70px;color:#fff}
#inc03 .controls .arr{display:flex;align-items:center;cursor:pointer}
#inc03 .controls .pager{width:76px;margin:0 35px;font-size:0}
#inc03 .controls .pager span{position:relative;font-size:14px;font-weight:600}
#inc03 .controls .pager span+span{opacity:.5;margin-left:20px;padding-left:20px}
#inc03 .controls .pager span:before{content:"0"}
#inc03 .controls .pager span+span:after{display:block;;content:"";position:absolute;left:0;top:4px;width:1px;height:12px;background:rgba(255,255,255,.4)}

#inc03 .inc03_slide{margin-left:18%}
#inc03 ul{padding-top:15px}
#inc03 ul li{height:526px;overflow:hidden;border-radius:30px;background:center no-repeat #fff;background-size:cover;transition:transform .3s}
#inc03 ul li:nth-child(even){margin-top:65px}
#inc03 ul li a{position:relative;display:flex;flex-flow:column;align-items:flex-start;height:100%;padding:100px 50px 80px;color:#777;word-break:keep-all}
#inc03 ul li a img{opacity:0;margin-top:15px;transition:all .3s}
#inc03 ul li p{margin-bottom:25px;font-size:27px;font-weight:600;word-break:keep-all;color:#222;line-height:1.35}
#inc03 ul li span{margin-top:auto;font-size:15px}
#inc03 ul li a.img{color:rgba(255,255,255,.75);background:rgba(0,0,0,.5)}
#inc03 ul li a.img p{color:#fff}

@media(hover:hover){
#inc03 ul li:hover{transform:translateY(-15px)}
}
@media(max-width:1300px){
#inc03{padding:160px 0 160px 30px}
#inc03 .inc03_slide{margin-left:8%}
#inc03 ul li{height:480px}
#inc03 ul li a{padding:30px}
}
@media(max-width:1024px){
#inc03 .tit_area p{font-size:42px}
#inc03 .tit_area .pl{font-size:16px}
#inc03 ul li{height:420px}
#inc03 ul li p{font-size:26px}
}
@media(max-width:768px){
#inc03{display:block;padding:60px 0}
#inc03 .tit_area{padding:0 20px 25px;text-align:center}
#inc03 .tit_area p{margin-bottom:10px;font-size:32px}
#inc03 .tit_area .pl{white-space:normal;word-break:keep-all}
#inc03 .controls{justify-content:center;margin-top:15px}
#inc03 .inc03_slide{margin-left:20px}
#inc03 ul li{height:380px;border-radius:16px}
#inc03 ul li:nth-child(even){margin-top:0}
#inc03 ul li a{padding:20px}
#inc03 ul li p{font-size:20px;word-break:keep-all}
#inc03 ul li span{font-size:13px}
}
@media(max-width:480px){
#inc03 .inc03_slide{margin-left:0}
#inc03 ul li{height:280px}
}

/*퀵메뉴*/
.floating-wrapper{
    position:fixed;
    right:24px;
    bottom:120px;
    z-index:1000;
    display:flex;
    flex-direction:column;
    gap:12px;

}
.floating-btn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    padding:0 20px;
    border-radius:28px;
    background:linear-gradient(135deg,#027BFF,#0052D4);
    color:#fff!important;
    font:500 15px/1.2 "Noto Sans KR",sans-serif;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    overflow:hidden;
    text-decoration:none;
    transition:width .25s ease,box-shadow .25s ease;
}
.floating-btn .icon{
    flex:none;
    font-size:24px;
}
.floating-btn .label{
    opacity:0;
    white-space:nowrap;
    margin-left:12px;
    transition:opacity .15s .1s ease;
}
.floating-btn:hover{
    width:220px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.floating-btn:hover .label{
    opacity:1;
}
.material-icons {
    position: absolute;
    left: 30%;
    transition: left 0.3s ease;
}
.floating-btn:hover .material-icons {
    left: 10%;
}
.floating-btn.quote{
    background:linear-gradient(135deg,#00BCF2,#0090E7);
}
@media(max-width:768px){
    .floating-wrapper{bottom:80px;right:25px;}
    .floating-btn:hover{
        width: 44px;
        box-shadow:none;
    }
    .floating-btn span.label {
        display: none;
    }
    .floating-btn:hover .material-icons {
        left: 25%;

    }
}