#idx_wrapper{position:fixed; top:0; left:0; right:0; height:100vh; z-index:0;}

/* 메인슬라이더 */
#visual{position:relative; width:100%; height:100vh; margin:0 auto; position:relative; overflow:hidden; visibility:hidden;}
#visual .sliderbx{ z-index:10;width:100% !important; height:100vh; position:relative;}
#visual .sliderbx li{ width:100% !important; height:100%; background-repeat:no-repeat; background-position: center top; background-size:cover;
    animation: imagescale 6s ease-in-out infinite alternate;
    -webkit-animation: imagescale 6s ease-in-out infinite alternate;
    -moz-animation: imagescale 6s ease-in-out infinite alternate;
    -o-webkit-animation: imagescale 6s ease-in-out infinite alternate;
}
#visual .sliderbx li.mv01{background-image:url(../img/main/mvisual01.jpg)}
#visual .sliderbx li.mv02{background-image:url(../img/main/mvisual02.jpg)}
#visual .sliderbx li.mv03{background-image:url(../img/main/mvisual03.jpg)}
#visual .area_txt{position:absolute; top:40%; left:50%;  width:100%; max-width: 1300px; z-index:15; transform:translate(-50%, -50%); color:#fff; text-align: right;}

#visual .area_txt > span{font-weight: 600; font-size: 1.1em; display: inline-block; margin-bottom: 40px;}
#visual .area_txt > h2{font-size:3em; line-height: 1.2em; font-weight:400; text-transform:uppercase;font-family: 'GmarketSans';}
#visual .area_txt > h3{font-size:3em; line-height: 1.2em; font-weight:600; text-transform:uppercase;font-family: 'GmarketSans'; margin-bottom: 30px;}
#visual .area_txt > h2 strong{color: #E2CED0;}
#visual .area_txt > p{display:block; line-height: 1.6em; padding:30px 0 0; font-size:20px; font-weight:400; word-break:keep-all; position: relative;}
#visual .area_txt > p:before{content: ""; position:absolute; left: -50%; top: 0; display: block; width: calc(100% + 1300px); height: 1px; background: rgba(255,255,255,0.5);}

#visual .bx-controls{}
#visual div.bx-pager{z-index:50; position:absolute; max-width: 1300px;  width:100%; bottom:25%; left:50%; transform:translateX(-50%);
    display: flex; align-items: center; justify-content: right}
#visual div.bx-pager div{margin:0 0 40px;}
#visual div.bx-pager div a{position:relative; display: block; text-indent: -9999px; width: 24px; height: 3px; background: #fff; margin-right: 8px;}
#visual div.bx-pager div a.active{background: #4869d8}

#visual .bx-controls-direction{display:none;}
/*.fixed_bg{position:fixed; z-index:-1; opacity:0; top:0; left:0; right:0;  width:100%; height:120vh; background:url('../img/main/business_bg.jpg')no-repeat center; background-size:cover; transition:all 0.1s ease;}
body.on .fixed_bg{z-index:1; opacity:1;}
body.on #idx_wrapper{z-index:-1;}
body.on .scrolldown{z-index:-1;}*/


.bx_left{position:absolute; bottom:0; left:0; z-index:52; background:#fff; font-weight:500;display: flex;}
.scrolldown{width: 220px; background-color: #1c3d88;}
.scrolldown > a{position:relative; display:block; line-height:100px; height:100%; box-sizing:border-box; color: #fff!important; font-weight: 600; padding: 0 30px; text-align: left; }
.area_notice{width: 530px;}

.bx_right{position:absolute; bottom:-20px; right:0; width:calc(100% / 2); background:#1c3d88; z-index:50; opacity:0; transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;}
.bx_right.active{bottom:0; opacity:1;}
.area_bn{padding: 60px 50px; display: flex; align-items: end; color: #fff; background: url("../img/main/bx_btbn_bg.jpg") no-repeat center right/auto 100%}
.area_bn h2{font-size: 2.8em; line-height: 1.2em; font-family: 'GmarketSans'; margin-right: 40px;}
.area_bn strong{display: block; font-weight: 700;}
.area_bn a{border: 1px solid rgba(255,255,255,0.5); font-size: 1.15em; color: #fff!important; display: flex; align-items: center; padding: 15px 20px; cursor: pointer; margin-bottom: 10px}
.area_bn a i{display: inline-block; width: 43px; height: 1px; background-color: #fff; position: relative; margin-left: 50px;}
.area_bn a i:after{content: ""; width: 11px; height: 11px; transform: rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; display: block; position: absolute; right: 0; top: -5px;}
.area_bn a:hover{color: #000E41!important; background-color: #fff; transition:all 0.1s ease; font-weight: 700;}
.area_bn a:hover i{background-color: #000E41; transition:all 0.1s ease;}
.area_bn a:hover i:after{border-top: 1px solid #000E41; border-right: 1px solid #000E41; transition:all 0.1s ease;}

@media screen and (max-width:1400px) {
    #visual .area_txt,
    #visual div.bx-pager{width: 80%;}
    .scrolldown{width: auto;}
    .scrolldown > a{line-height: 70px;}
    .scrolldown > a span{display: none;}
    .area_notice{width: calc(100% - 75px);}

    .bx_right{width: auto;}
    .area_bn{padding: 25px 50px;}
    .area_bn h2{font-size: 2em; margin-bottom: 10px; }
    .area_bn{display: block;}
    .area_bn a{display: inline-block; padding: 10px 20px; font-size: 1em; margin-bottom: 0;}

}
@media screen and (max-width:992px) {
    .bx-wrapper{height: calc(100vh/2)}
    .bx_left{width: 100%;}
    .bx_right.active{width: 100%; bottom: 70px;}
    .area_bn{display:flex; justify-content: space-between;}
    .area_bn h2{margin-bottom: 0;}
    .area_bn a{margin-bottom: 0px;}


}
@media screen and (max-width:768px) {
    #visual .area_txt > span{margin-bottom: 20px;}
    #visual .area_txt > h2,
    #visual .area_txt > h3{font-size: 2.5em;}
    #visual .area_txt > p{font-size: 1.2em;}

    .area_bn a i{display: none;}
}
@media screen and (max-width:550px) {
    #visual .area_txt > span{margin-bottom: 20px;}
    #visual .area_txt > h2,
    #visual .area_txt > h3{font-size: 2em;}
    #visual .area_txt > p{font-size: 1.2em;}

    .area_bn h2{font-size: 1.2em;}
    .area_bn{padding:25px;}

}
@media screen and (max-width:450px) {
    #visual .area_txt > h2,
    #visual .area_txt > h3{font-size: 1.5em;}
    .area_bn a{padding: 4px 6px; font-size: 0.9em;}
}

.idx_title{text-align: center; margin-bottom: 60px;}
.idx_title span{text-transform: uppercase; font-size: 1.4em; font-weight: 600;}
.idx_title h2{font-family: 'MapoDPPA';font-weight: 500; margin: 10px 0 15px; font-size: 2.2em; line-height: 1.4em;}
.idx_title h2 strong{font-weight: 500;}
.idx_title p{font-size: 1.2em; opacity: 0.8;}
.title h3{font-size: 2em; font-weight: 600;}


#content section{position:relative;padding:100px 0; z-index:1; }
.area_robot{background:#fff;}
.area_robot .type_list{display: flex;}
.area_robot .type_list li{width: calc(100%/2); aspect-ratio:1/0.8; border: 1px solid transparent; position: relative; overflow: hidden;}
.area_robot .type_list .txt{ color: #fff; padding: 60px 15px 60px 45px; z-index: 2; position: absolute; left: 0; top: 0;}
.area_robot .type_list .txt h3{font-size: 2.2em; font-weight: 600; margin-bottom: 20px;}
.area_robot .type_list .txt p{margin-bottom: 20px; font-size: 1.1em; opacity: 0.8;}
.area_robot .type_list .brand span{text-transform: uppercase; display: inline-block; color: #fff; background-color: rgba(0,0,0,0.5); margin:0 4px 4px 0; padding: 4px 8px;}
.area_robot .type_list .more_btn{display: block; width: 60px; height: 60px; font-size: 1.8em; color: #fff; background-color: rgba(0,0,0,0.5); line-height: 55px; text-align: center; position: absolute; bottom: 0; left: 0;}

.area_robot .type_list li:before{background-position:center; background-size:cover; background-repeat: no-repeat; position: relative; z-index: 0;}
.area_robot .type_list li:before{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.2}
.area_robot .type_list li:nth-child(1){background-color:#1c3d88}
.area_robot .type_list li:nth-child(2){background-color:#1a61a9}
.area_robot .type_list li:nth-child(3){background-color:#ff7300}
.area_robot .type_list li:nth-child(4){background-color:#e0e4ec}

.area_robot .type_list li:nth-child(1):before{background-image:url("../img/main/robot_type01.jpg");}
.area_robot .type_list li:nth-child(2):before{background-image:url("../img/main/robot_type02.jpg");}
.area_robot .type_list li:nth-child(3):before{background-image:url("../img/main/robot_type03.jpg");}

.area_robot .type_list li:nth-child(4) .txt{color:#000;}

/*.area_robot .type_list li:nth-child(even){background-position:10% bottom;}
.area_robot .type_list li:nth-child(even) .more_btn{left:auto; right: 0}
.area_robot .type_list li:nth-child(even) .txt{padding: 60px 45px 60px 0px; text-align: right;}*/

.area_robot .type_list li:hover{background-color: #fff; z-index: 1; border: 1px solid rgba(0,0,0,0.5); box-sizing: border-box; transition: all 0.5s; cursor: pointer;}
.area_robot .type_list li:hover .txt h3{color: #1c3d88;}
.area_robot .type_list li:hover .txt{color: #000;}
.area_robot .type_list li:hover .brand{opacity: 0.5;}

.area_product{background-color: #f7f6f8;}
.area_product .nav-tabs{display: flex; align-items: center; justify-content: center; border: 0;}
.area_product .nav-tabs>li{float: none; }
.area_product .nav-tabs>li a,
.area_product .nav-tabs>li:hover a{
    display: block;
    border-radius: 0;
    border: 0;
    background-color: #1c3d88;
    color: #fff;
    opacity: 0.5;
    cursor: pointer;
    margin:0 3px;
    padding: 8px 15px;
}
.area_product .nav-tabs>li.active>a,
.area_product .nav-tabs>li.active>a:focus,
.area_product .nav-tabs>li.active>a:hover{border: 0; background-color: #1c3d88; color: #fff; opacity: 1; font-weight: 600;}

.area_product .tab-content{padding: 30px;}

.area_product .gall_con {margin:0;padding:0;list-style:none; position:relative; overflow:hidden;border: 1px solid #e8e7eb; background:#fff; transition:all 0.5s;border-right: 1px solid #e8e7eb;}
.area_product .gall_li:last-child .gall_con{border-right: 1px solid #e8e7eb;}
.area_product .gall_con:hover{ background:#fff; border: 1px solid #1B3D85;}
.area_product .gall_con:hover .over{opacity:1;}
.area_product .bo_cate_link {display:inline-block;margin:0 3px 8px 0; padding:4px 8px; text-align:center; color:#fff !important; border-radius:3px; background:#1B3D85; font-weight:500;text-decoration:none; font-size: .90em !important;}

.area_product .gall_href{width: 100%;}
.area_product .gall_href img{width: 100%; height: 100%; object-fit: cover;}

.area_product .gall_text_href {padding:20px; min-height:100px}
.area_product .gall_text_href a {font-size:1.05em;}
.area_product .gall_text_href a:hover{text-decoration:none;}
.area_product .gall_text_href span {display:inline!important}
.area_product .gall_text_href img {margin:0}
.area_product p.t9,
.area_product p.t16{opacity: 1!important; font-weight: 600; font-size: 1.2em; display:inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap;}
.area_product p.t7{opacity: 0.8; line-height: 1.6em;}

.area_product a.down_btn{display: block; color: #1B3D85; border: 1px solid #1B3D85; padding: 10px; font-weight: 600; text-align: center;/* background:#333 ;color: #fff; text-align: center;*/ cursor: pointer;}
.area_product a.down_btn:hover{background-color: #eee; border: 1px solid #eee; color: #1B3D85;}

.area_product .swiper-wrapper{padding-bottom: 40px;}
.area_product .swiper-pagination-bullet{border-radius:0; width:10px; height: 5px; opacity: 0.2; background-color: #1c3d88;}
.area_product .swiper-pagination-bullet-active{width: 38px; height: 5px; opacity: 1;}

.area_product .empty_list{padding: 50px 0; font-weight: 700; font-size: 1.6em;}
.area_product .more_btn{margin: 0 auto; width: auto; display: inline-block; font-size: 1.3em; border: 1px solid rgba(0,0,0,0.4); background-color: #fff; padding: 18px 20px; font-weight: 600;}
.area_product .more_btn i{margin-left: 20px;}
.area_product .more_btn:hover{background-color:#1B3D85; color: #fff; transition: all 0.5s;}



.area_news{background-color: #f7f6f8; padding: 0!important;}
.area_news .img img{width: 100%; height:auto;}
.area_news .inr{padding: 40px 0; display: flex; justify-content: space-between; align-items: flex-start;}
.area_news .title{width: 350px;}
.area_news .title h3{font-size: 2.3em;}
.area_news .title p{text-transform: uppercase; font-size: 1.3em; margin-bottom: 20px; opacity: 0.5; font-weight: 600}
.area_news .list{width: calc(100% - 350px)}
.area_news .more_btn{color: rgba(255,255,255,0.7); font-size: 1.1em; background-color:#1B3D85; display: inline-block; padding: 5px 15px; }

.area_news .list.flex .news_bn{margin-right: 40px; width: 100%; max-width: 660px;}

.area_contact{background-color: #fff;}
.area_contact .inr{display: flex; align-items: flex-start;}
.area_contact .inr > div{width: calc(100%/2)}
.area_contact .inr > div:not(:last-child){margin-right: 80px;}

.area_contact .case .title{margin-bottom: 40px;}
.area_contact .case .title .more_btn{color: #666; font-size: 1.15em;}

.area_contact .contact .title{margin-bottom: 10px;}
.area_contact .contact .title span{margin-top: 10px; font-size: 1.2em; display: inline-block; opacity: 0.8;}
.area_contact .contact .call strong{font-size: 3.2em; line-height: 1.2em; font-weight: 600; display: block; margin-bottom: 20px}
.area_contact .contact .call ul{display: flex;}
.area_contact .contact .call li{color: #6b6b6b; margin-right: 10px; font-size: 1.2em; font-weight: 600; margin-bottom: 10px;}
.area_contact .contact .call i{color: #0f2244;}
.area_contact .contact .call .fa-youtube{color: #ee2221;}

.area_contact .contact .play{padding: 20px 0 30px 0;}
.area_contact .contact .play img{width: 100%;}

.area_contact .btn_wrap{padding-top: 20px; display: flex; }
.area_contact .btn_wrap a:not(:last-child){margin-right: 10px;}
.area_contact .btn_wrap a{width: 100%; color: #fff; font-size: 1.3em; padding: 20px 20px; display: flex; align-items: center; justify-content: space-between;}
.area_contact .btn_wrap a i{color: #fff; font-size: 1.3em;}
.area_contact .btn_wrap a:first-child{background-color: #1c3d88;}
.area_contact .btn_wrap a:last-child{background-color: #008bd6;}

.area_site{background-color: #fff;position:relative;padding:50px 0; z-index:1;}
.area_site .title{width: 250px; display: flex; align-items: center;}
.area_site .title strong{font-size: 1.4em; font-weight: 700; margin: 0 20px 0 10px;}

.area_site .siteSwiper{width: calc(100% - 250px)}
.area_site .swiper-button-next,
.area_site .swiper-button-prev{all:unset; text-align: center; position: relative; width: 25px; height: 22px; background-color:#25375d ; color: #fff; display: inline-block; margin:0px;}
.area_site .swiper-button-next:after,
.area_site .swiper-button-prev:after{content: "\f054"; line-height: 22px; display: block; font-family: "Font Awesome 6 Pro"; font-weight: 500; font-size: 1em;}
.area_site .swiper-button-prev:after{transform: rotate(180deg)}


@media screen and (max-width:1400px) {
    .area_contact .inr{display: block;}
    .area_contact .inr > div{width: 100%; border-bottom:1px solid #eee; padding-bottom: 40px; margin-bottom: 40px;}
}
@media screen and (max-width:1200px) {
    .area_robot .type_list li{aspect-ratio: 1/1;}
    .area_robot .type_list .txt{padding:40px 40px;}
    .area_robot .type_list .txt h3{font-size:1.8em}

}
@media screen and (max-width:992px) {
    .area_robot .type_list li{aspect-ratio: 1/1.3;}
    .area_robot .type_list .txt h3{font-size:1.5em}
}
@media screen and (max-width:768px) {
    .idx_title{padding: 0px;}
    .idx_title h2{font-size: 1.8em;}
    .idx_title p{font-size: 1em;}

    .area_robot .type_list{display: block;}
    .area_robot .type_list li,
    .area_robot .type_list li:nth-child(even){
        display: table;
        width: 100%;
        padding: 30px 30px 30px 30px;
        background-size: 55% auto;
        background-position: center 100%;
    }
    .area_robot .type_list .txt,
    .area_robot .type_list li:nth-child(even) .txt{text-align: center;padding: 0;width: 100%;display: table-cell;vertical-align: middle;position: relative;}
    .area_robot .type_list .txt h3{font-size: 1.8em;}
    .area_robot .type_list .more_btn{left: auto; right: 0!important;}

    .area_news .inr{display: block;}
    .area_news .title{margin-bottom: 20px;}
    .area_news .title,
    .area_news .list{width: 100%;}

    .area_news .list.flex .news_bn{margin: 0 0 40px 0;}
    .area_news .list.flex{display: block;}

    .area_product .nav-tabs{flex-wrap: wrap; padding: 0 25px;}
    .area_product .nav-tabs>li{width: calc(100% / 3);margin-bottom: 4px;text-align: center;}


    .area_product .nav-tabs>li a,
    .area_product .nav-tabs>li:hover a{padding: 8px 4px;}

    .area_contact .contact .call ul{display: block;}
}
@media screen and (max-width:550px) {
    .area_site{display: none;}
    .idx_title{padding: 0 10px;}
    .idx_title h2{font-size: 1.5em;}

    .area_news .more_btn{font-size: 1em;}

}

@media screen and (max-width:350px) {
    .idx_title span{font-size:1em; }
    .idx_title h2{font-size: 1.3em;}
}


@-webkit-keyframes scrollDownPointer {
    60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
    70% {opacity: 0;}
    100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes scrollDownPointer {
    60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
    70% {opacity: 0;}
    100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@keyframes imagescale {
    0% {
        transform: scale(1)  rotate(.001deg);;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
    }

    100% {
        transform: scale(1.3)  rotate(.001deg);;
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
    }
}