@charset "UTF-8";

/* 메인페이지 공통 */
.main_wrap { margin:0 auto; padding:100px 0 90px; }
.bg_mint{ background:#17a9ca; }

/*메인 타이틀*/
.main_tit_wrap{
    width:100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 00px 0 50px;
    position: relative;
}
.main_tit_wrap.narrow_bottom{  padding: 0px 0 30px; }
    .main_tit_wrap h3{
        font-size: 40px; font-weight: 800; color:#000 ; vertical-align: baseline;
    }
    .main_tit_wrap h3.white{ color:#fff; }

/* 메인 배너 */
.main_baner_sec_wrap{
    height:100vh;
    width:100%;
    background:#323948;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
    .main_baner_sec{ margin-top: 15vh; width:1200px; }
        .main_baner_cnt{ text-align: center; width:90%; margin: 0 auto; }
            .main_baner_cnt h3{
                font-size:36px;
                font-weight: 200;
                color:#fff;
                word-break: keep-all;
                line-height: 1.5;
            }
                .banner_cut{ display: inline; vertical-align: baseline; }
                .main_baner_cnt h3 strong{
                    font-weight: 600; vertical-align: baseline;
                }

        .main_banner_keyword{
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: space-around;
            width:90%;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        .main_banner_keyword::after{
            content: '';
            width:100vw;
            height: 15px;
            position: absolute;
            z-index: -1;
            left:20px;
            top:221px;
            background:linear-gradient(to right,#17a9ca 10%,#8400ff 90%);
        }
            .main_banner_keyword li { text-align: center;  }
                .main_banner_keyword li .img_box{
                    display: flex;
                    align-content: center;
                    align-items: center;
                    justify-content: center;
                    height:160px;
                    animation: openKeyword1 0.7s;
                }
                .main_banner_keyword li h3{
                    font-size: 32px;
                    font-weight: 800;
                    color:#fff;
                    margin: 40px auto 30px;
                }
                .main_banner_keyword li p{
                    font-size: 14px;
                    font-weight: 200;
                    color:#fff;
                    line-height: 1.4
                }
            .main_banner_keyword .slick-arrow {
               z-index: 2;
               width: 20px;
               height: 30px;
               transform: translate(0,0);
               top:initial;
               bottom: -60px;
            }
/*
            .main_banner_keyword .slick-prev{
                left:calc(50% - 30px);
                background:url('/images/icon/left_arrow2.png')center left no-repeat;
                background-size: contain;
            }
            .main_banner_keyword .slick-next{
                right:calc(50% - 30px);
                background:url('/images/icon/right_arrow2.png')center right no-repeat;
                background-size: contain;
            }
*/
@keyframes openKeyword1{
    0%{ transform: translateY(-50px); opacity: 0}
    80%{ opacity: 0.5}
    90%{ transform: translateY(-5px); }
    100%{ transform: translateY(0px); opacity: 1}
}


/* 메인 who are we */
.main_who_sec{   }
    .main_who_sec .slick-arrow{
        z-index: 2; width:20px; height:30px;
    }
    .main_who_sec .slick-prev{
        left:calc(50% - 560px);
        background:url('/images/icon/left_arrow2.png')center left no-repeat;
        background-size: contain;
    }
    .main_who_sec .slick-next{
        right:calc(50% - 560px);
        background:url('/images/icon/right_arrow2.png')center right no-repeat;
        background-size: contain;
    }
    .main_who_sec .slick-next{ right:calc(50% - 540px) }
    .main_who_sec li{ width:1200px; }
        .main_who_sec dl{
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
        }
            .main_who_sec dd{ margin-left: 22px; width:580px; }
                .main_who_sec dd h5{
                    font-size: 21px; font-weight:800; color:#242b5a;
                }
                .main_who_sec dd h3{
                    font-size: 24px;
                    font-weight:800;
                    color:#fff;
                    margin: 5px 0 30px;
                }
                .main_who_sec dd p{
                    font-size: 13px;
                    font-weight:400;
                    color:#fff;
                    line-height: 1.4;
                    letter-spacing: -0.5px;
                    word-break: keep-all;
                }

/* 메인 portfolio */
/*.swiper_con_wrap{ width:1280px; margin: 0 auto; }*/
.main_port_tab_scroll{ overflow-y: hidden; padding-bottom: 10px; }
.main_port_tab{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
    .main_port_tab li { margin: 0 20px; }
        .main_port_tab li a{
            color:#7f7f7f; font-size:16px; font-weight: 800;
        }
        .main_port_tab li a.on{
            color:#17a9ca; border-bottom: 2px solid #17a9ca;
        }
        .main_port_tab li a:hover{ color:#17a9ca; }
.main_port_list{  }
/*.swiper_con_wrap{ margin-left: calc(50% - 580px) !important;  }*/
/*.swiper_con_wrap{ margin-left: calc(50% - 580px) !important; width:calc(100% - 290px );  }*/
    .swiper-container { margin-top: 30px; margin-bottom: 40px; }
        .swiper-wrapper{  }
        .swiper-slide {
            text-align:center;
            display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
            align-items:center; /* 위아래 기준 중앙정렬 */
            justify-content:center; /* 좌우 기준 중앙정렬 */
            width:420px !important;
             z-index: 2;
            margin: 0 10px 0 0px;
            box-sizing: border-box;
        }
        .swiper-scrollbar_wrap{  width:1160px; margin: 0 auto; } 
            .swiper-scrollbar{
                background:#b5b8c0;
                height:4px;
/*                width:1160px;*/
                margin: 0;
/*                cursor: pointer;*/
            }
                .swiper-scrollbar-drag::before{
                    content: '';
                    width:100%;
                    height:20px;
                    position: absolute;
                    top:-10px;
                }
    #port_cnt li a{
        width:100%;
        height:100%;
        height:320px;
        transition-duration: 0.5s;
        display: block;
    }
    #port_cnt li:not(:first-child) a:hover{ background:#8400ff; }
    #port_cnt li:first-child.swiper-slide { width:calc(50% - 600px) !important; }
        #port_cnt li a img{
            position: absolute; left:0; top:0; width:100%; z-index: -1;
        }
        .port_txt{
            text-align: left;
            position: absolute;
            left:0;
            bottom:0;
            width:100%;
            padding: 40px;
            box-sizing: border-box;
        }
        .port_txt::after{
            content: '';
            background: url(/images/main/main_right_arrow.png)center right no-repeat;
            background-size: cover;
            width: 40px;
            height: 30px;
            position: absolute;
            right: 40px;
            bottom: 40px;
            transform: translateX(-20px);
            transition-duration: 0.5s;
            opacity: 0;
        }
        #port_cnt li a:hover .port_txt::after{ transform: translateX(0px); opacity: 1 }
            .port_type{
                font-size: 13px; font-weight:800; margin-bottom: 20px;
            }
                .port_type span.web{ color:#28d4ff }
                .port_type span.app{ color:#00ffd2 }
            .port_name{
                font-size: 24px;
                font-weight:800;
                color:#fff;
                letter-spacing: -0.5px;
                word-break: keep-all;
                width:80%;
                line-height: 1.3;
            }