/* 공통서식 */

.innerWidth{
    width: 1436px;
    margin: 0 auto;
}
.sectionTitle{
    padding-top: 111px;
    .kor{
        font-family: "Clipartkorea";
        font-weight: 500;
        color: #444;
        font-size: 40px;
        line-height: 47px;
    }
    .eng{
        margin-left: 8px;
        font-family: "GmarketSans";
        font-weight: 500;
        color: #C0C0C0;
        font-size: 30px;
        line-height: 30px;
    }
}



/* 섹션 */
.header{

    background-color: #FFF;
    display: grid;
    grid-template-columns: 1fr fit-content(100%) 1fr;
    grid-template-areas: "left center right";
    align-items: center;

    padding: 35px 54px 17px;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);



    :where(&) .n2ailogo{
        grid-area: left;

        img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    nav{
        grid-area: center;
        ul{
            display: flex;
            column-gap: 86px;

            & > li > a{
                display: block;
                font-family: "Pretendard";
                font-weight: 700;
                font-size: 18px;
                line-height: 23px;
                color: #444;
                position: relative;
                

                &:hover{
                    &::after{
                        content: "";
                        display: block;
                        left: 0;
                        right: 0;
                        height: 1px;
                        bottom: 0;
                        position: absolute;
                        /* text-decoration: underline; */
                        background-color: #888;
                    }
                }
            }
        }
    }

}


.topbanner{
    width: 1820px;
    height: 800px;
    padding-top: 12px;
    margin: 12px auto 0;
    position: relative;
    :where(&) .imgWrap{
        width: 1820px;
        height: 800px;
        border-radius: 30px;
        overflow: hidden;
        position: relative;
        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &::after{
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
    }
    :where(&) .bannerText{
        font-family: "Pretendard";
        color: #FFF;
        position: absolute;
        width: max-content;
        text-align: center;
        top: 185px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        .a{
            font-size: 40px;
            line-height: 90px;
            font-weight: 800;
        }
        .b{
            font-size: 70px;
            line-height: 90px;
            font-weight: 500;
            
            &::after{
                content: "";
                display: block;
                width: 100%;
                height: 2px;
                background-color: #FFF;
                margin-top: 20px;
                margin-bottom: 5px;
            }
        }
        .c{
            font-size: 50px;
            line-height: 90px;
            font-weight: 400;
        }
    }
}

.about{

    .top{
        display: flex;
        justify-content: space-between;

        .logoWrap{
            width: 367px;
            height: 232px;
            flex-shrink: 0;
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        .txt{
            font-family: "Pretendard";
            color: #444;
            font-size: 30px;
            line-height: 50px;
            max-width: 976px;
            word-break: keep-all;
            
            b{font-weight: 700;}

            .a{
                margin-bottom: 25px;
            }
        }

    }

    .bottom{
        display: flex;
        justify-content: center;
        .count{
            font-family: "Pretendard";
            padding: 42px 90px 35px;
            .t{
                font-size: 25px;
                line-height: 50px;
                color: #444;
                margin-bottom: 48px;
            }
            .c{
                font-size: 90px;
                line-height: 90px;
                font-weight: 700;
                color: #3B61FD;
                .number{
                    display: inline-block;
                    position: relative;
                    white-space: nowrap;
                    color: transparent;
                    .a{
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        color: #3B61FD;
                    }
                }
                .text{
                    font-size: 50px;
                    line-height: 50px;
                }
            }
        }
        .count + .count{
            border-left: 1px solid #D3D3D3;
        }
        
    }

    .l{
        background-color: #F5F5F5;
        font-family: "Pretendard";
        font-size: 30px;
        line-height: 50px;
        padding: 48px;
        color: #444;
        p{
            text-align: center;
            width: fit-content;
            margin: 0 auto;
        }
    }

}


.service{

    /* background: linear-gradient(to bottom, #fff 475px,  #F5F5F5 475px); */
    
    .service_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 26px;
        row-gap: 28px;
    }
    .sCard{
        width: 266px;
        height: 265px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        background-color: #fff;

        .default{
            width: 266px;
            height: 265px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            border: 1px solid #E0E0E0;

            color: var(--default_text);

            .imgWrap{
                height: 50px;
                text-align: center;
                margin-bottom: 15px;
                img{
                    height: 100%;
                    object-fit: contain;
                }
            }
            .title{
                font-family: "yg-jalnan";
                font-size: 30px;
                line-height: 40px;
            }
            .text{
                font-family: "Pretendard";
                font-size: 20px;
                line-height: 40px;
                font-weight: 700;
            }
        }
        .hover{
            width: 266px;
            height: 265px;
            padding: 35px 23px 23px;
            position: absolute;
            top: 0;
            left: 0;
            
            display: grid;
            grid-template-rows: min-content min-content auto;
            row-gap: 9px;
            border-radius: 20px;
            
            color: #FFF;
            background: var(--hover_background);

            /* visibility: hidden; */
            opacity: 0;
            transform: translateY(60%);
            transition: transform 0.25s, opacity 0.2s;
            transition-timing-function: ease-out;
            

            .badge{
                font-family: "Pretendard";
                font-size: 20px;
                line-height: 24px;
                display: block;
                width: fit-content;
                padding: 3px 14px;
                border: 1px solid #FFF;
                border-radius: 24px;
                margin: 0 auto;
            }
            .title{
                font-family: "yg-jalnan";
                font-size: 30px;
                line-height: 40px;
                text-align: center;
            }
            .details{
                align-self: flex-end;
                font-family: "Pretendard";
                font-size: 15px;
                line-height: 23px;
                /* display: flex; */
                /* flex-wrap: wrap; */
                column-gap: 4px;
                width: fit-content;
                /* min-height: 75px; */
                margin: 0 auto;
                
                & > li{
                    /*
                    display: inline-block;
                    word-break: keep-all;
                    flex-shrink: 0;
                    */
                    display: inline;
                    word-break: break-all;
                    &:not(:last-child)::after{
                        content: ",";
                    }
                }
            }
            .list{
                align-self: flex-end;
                font-family: "Pretendard";
                font-size: 17px;
                line-height: 25px;
                list-style-position: inside;
                min-height: 75px;
                & > li::marker{
                    content: "· ";
                }
            }
        }
        &:hover .hover{
            /* visibility: visible; */
            opacity: 1;
            transform: translateY(0);
        }


        &.aide{
            --default_text: #0E59C6;
            --hover_background: linear-gradient(to right, #07ACE3 0%, #0D5DF7 42%, #FE0E82 100%);
        }
        &.qpis{
            --default_text: #F86AB6;
            --hover_background: #F86AB6;
        }
        &.mworks{
            --default_text: #0BB0F4;
            --hover_background: #0BB0F4;
        }
        &.link{
            --default_text: #F9C534;
            --hover_background: #F9C534;
        }
        &.lbt{
            --default_text: #FC793F;
            --hover_background: #FC793F;
        }
        &.wish{
            --default_text: #FF7BAC;
            --hover_background: linear-gradient(70deg, #FFA5D9 15%, #9BAFFF 50%, #00C7AC 100%);
        }
        &.mrp{
            --default_text: #02C7BA;
            --hover_background: #02C7BA;
        }
        &.mama{
            --default_text: #8CC63F;
            --hover_background: #8CC63F;
        }
        &.tv{
            --default_text: #B990D3;
            --hover_background: #B990D3;
        }
        &.consulting{
            --default_text: #978474;
            --hover_background: #978474;
        }
        

    }
}

.history{
    background-color: #F5F5F5;
    .history-swiper{
        padding: 20px 0;
        .swiper-wrapper{
            /* align-items: center; */
            height: 400px;
        
            .historyCard{
                width: fit-content;
                padding: 0 10px;
                display: flex;
                align-items: center;
    
                .inner{
                    background-color: #fff;
                    border-radius: 20px;
                    border: 1px solid transparent;
                    width: 400px;
                    font-family: "Pretendard";
                    
                    height: 302px;
                    padding: 42px 45px 40px;
                    display: grid;
                    grid-template-rows: min-content min-content 0px;
            
                    transition: grid-template-rows 0.6s, height 0.6s, transform 0.4s, box-shadow 0.4s, opacity 0.4s;
    
                    cursor: grab;
                    opacity: 0.7;
                    .date{
                        font-size: 30px;
                        line-height: 40px;
                        font-weight: 800;
                        color: #D0D0D0;
                        margin-bottom: 100px;
                        transition: margin 0.6s, color 0.4s;
                    }
                    .title{
                        height: 80px;
                        font-size: 30px;
                        line-height: 40px;
                        font-weight: 800;
                        color: #D0D0D0;
                        margin-bottom: 0px;
                        transition: margin 0.6s, color 0.4s;
                    }
            
                    .hidden{
                        font-size: 22px;
                        line-height: 30px;
                        color: #444;
                        height: 100%;
                        overflow: hidden;
                        align-items: flex-end;
                    }
                }
                &.swiper-slide-active .inner{
                    height: 400px;
                    padding: 32px 45px 38px;
                    border-color: #BCBCBC;
                    grid-template-rows: min-content min-content 120px;
                    opacity: 1;
        
                    .hidden{
                        display: flex;
                    }
                    .date{
                        color: #F00;
                        margin-bottom: 59px;
                    }
                    .title{
                        color: #444;
                        margin-bottom: 31px;
                    }
                }
            }
        }
    
    
        
    
        
    }
    .gauge{
        display: flex;
        align-items: center;
        column-gap: 17px;
        padding: 0 65px;
        

        .year{
            flex-shrink: 0;
            font-family: "Pretendard";
            color: #FFF;
            font-weight: 700;
            font-size: 30px;
            line-height: 40px;
            padding: 9px 26px;
            background-color: #444;
            border-radius: 40px;
            width: min-content;
        }

        .line{
            width: 100%;
            height: 4px;
            background-color: #D0D0D0;
            position: relative;

            .inner{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 0%;
                background-color: #444;
                transition: width 0.8s;
                
                &::after{
                    content: "";
                    display: block;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #F00;
                    box-shadow: 0 0 11px 0 rgba(255, 0, 0, 1);
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translate(50%, -50%);
                }
            }
        }

    }
    .history-swiper:hover{
        .swiper-wrapper {
            .historyCard {
                .inner {
                    
                    opacity: 1;
                }
                &:not(.swiper-slide-active) .inner{
                    
                    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.05);
                    /* .date{
                        color: #b4b4b4;
                    }
                    .title{
                        color: #b4b4b4;
                    } */
                }
                &.swiper-slide-active .inner{
                    border-color: #a9a9a9;
                    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.1);
                    transform: scale(1.02);
                }
            }
        }


        & + .gauge{
            .line .inner{
                background-color: #9d9d9d;
                &::after{
                    background-color: #6B7280;
                    box-shadow: none;
                }
            }
        }

    }


}


.news{
    /* .r2025_section{
        max-width: 1420px;
    } */

    .r2025_news_gridWrap--main{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 8px;
        row-gap: 36px;
        margin-bottom: 70px;
    }
    .r2025_news_gridWrap--sub{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, min-content);
        row-gap: 12px;
        column-gap: 6vw;
        grid-auto-flow: column;
    }
    .r2025_news_article{
        font-family: "Pretendard";
        border-radius: 16px;
        padding: 8px;
        :where(& > a){display: block; height: 100%;}
    }
    .r2025_news_article:hover{
        background-color: #f4f4f4;
        box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.1);
    }
    .r2025_news_article--sub{
        font-family: "Pretendard";
        max-width: 620px;
        padding-bottom: 13px;
    }
    .r2025_news_article--sub:not(:nth-of-type(3n)){
        border-bottom: 1px solid #ccc;
    }
    .r2025_news_article--sub:hover{
        box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
    }

    .r2025_news_article--link{
        display: grid;
        grid-template-columns: 167px auto;
        align-items: center;
        column-gap: 20px;
        font-family: inherit;
        padding: 4px 8px;
    }

    .r2025_news_imgWrap{
        aspect-ratio: 337 / 210;
        overflow: hidden;
        border-radius: 16px;
    }

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

    .r2025_news_articleTitle{
        font-size: 18px;
        font-weight: 700;
        line-height: 23px;
        word-break: keep-all;
        color: #000;
        padding: 10px 4px;
        font-family: inherit;
    }
    .r2025_news_time{
        font-size: 14px;
        color: #6D6D6D;
        padding: 0 4px;
        font-family: inherit;
    }

    :where(.r2025_news_gridWrap--sub) .r2025_news_articleTitle{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .r2025_news_linkMore{
        display: block;
        text-align: center;
        padding: 16px;
        font-size: 18px;
        line-height: 23px;
        border: 1px solid #B2B2B2;
    }
    .r2025_news_linkMore:hover,
    .r2025_news_linkMore:focus,
    .r2025_news_linkMore:visited{
        color: inherit;
    }

    /*
    @media screen and (max-width: 1024px){
        .r2025_news_article--link{
            grid-template-columns: 120px auto;
        }
        .r2025_news_articleTitle{font-size: 16px; line-height: 20px;}
    }
    @media screen and (max-width: 768px){
        .r2025_news_gridWrap--main{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            row-gap: 8px;

        }
        .r2025_news_gridWrap--sub{
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-auto-flow: row;

        }
        .r2025_news_article--sub{
            max-width: unset;
            border-bottom: 1px solid #ccc;
        }
        
    }
    @media screen and (max-width: 480px){
        .r2025_news_gridWrap--main{
            display: grid;
            grid-template-columns: 1fr;
            column-gap: 24px;
        }
    }
    */

}


.bannerWrap{
    display: flex;
    align-items: center;
    column-gap: 38px;
    justify-content: center;

    .partner-swiper{
        width: 1400px;
        height: 300px;
        flex-shrink: 0;
    }

    .btn{
        font-size: 30px;
        padding: 8px;
        color: #C0C0C0;
        flex-shrink: 0;
        &:hover{
            color: #999;
        }
    }
    .prev{
        order: -1;
    }
}


.contact{
    display: flex;
    justify-content: center;
    column-gap: 30px;

    .linkbutton{
        width: 478px;
        padding: 38px 49px;
        border-radius: 15px;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #25ACE3;
    
        font-family: "Clipartkorea";
        color: #FFF;
        font-size: 25px;
        line-height: 30px;
        font-weight: 500;
    
        &:hover{
            background-color: #1497ca;
        }
    }
    
    .linkbutton2{
        width: 478px;
        padding: 38px 49px;
        border-radius: 15px;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #444;
    
        font-family: "Clipartkorea";
        color: #FFF;
        font-size: 25px;
        line-height: 30px;
        font-weight: 500;
    
        &:hover{
            background-color: #363636;
        }
    }
}



.footer{
    #footer {
        clear:both;
        background-color:#434343;
        margin-top: 30px ;
        font-family: "Pretendard";
    }

    #footer .footer_css {width:1100px; margin:0 auto; position:relative; padding-top:25px; padding-bottom:10px;}
    #footer .footer_css .footer_wrap {display:flex;justify-content:space-between;}
    #footer .footer_css .footer_wrap .footer_2 {display:flex;flex-direction:column;align-items:flex-end;}
    #footer .footer_css h1{background:url(/home/images/logo_n2ai_small_white.png) no-repeat; height:25px; text-indent:-9999px; overflow:hidden;  margin-bottom:25px;}
    #footer .footer_css h1.n2ai{
        margin: .67em 0;
        margin-top: 10px;
        font-size: 38px;
        font-weight: 100;
        color: #555;
        line-height: 50px;
        background:url(/home/images/logo_n2ai_small_white.png) no-repeat;
        height: auto;
        text-indent:-9999px;
        overflow:hidden;
        margin-bottom:25px;
    }
    #footer .footer_css nav{ position:absolute; left:250px; top:33px;}
    #footer .footer_css nav ul li{
        float:left;
        font-weight:bold;
        background: url(/home/images/bg_footmenu.png) no-repeat left center;
        padding-left:5px;
        color:#5a5a5a;
        margin-right:35px;
        font-size: 12px;
    }
    #footer .footer_css nav ul li.first{ background:none;}
    #footer .footer_css .escro{/*position:absolute; right:0; top:10px; */ margin-top:0;}
    #footer .footer_css .company_infomation address, #footer .footer_css  .company_infomation p{clear:both;font-size:13px; color:#999; color:#666; font-style:normal; line-height:22px;}
    #footer .footer_css .copyright{ font-size:11px; color:#000; margin-top:15px;}
    #footer .family_site{border-top:1px solid #999;}
    #footer .site_list_con{display: flex;justify-content: space-between;align-items: flex-start;width:1100px; margin:0 auto; padding:10px 0 15px 0; font-size:11px;}
    #footer .site_list_con dl dt{ float:left; width:100px; height:20px; color:#fff; background-color:#aaaaab; padding-left:5px; line-height:20px; margin-right:5px;}
    #footer .site_list_con dl dd{ float:left; line-height:20px; margin-left:9px; padding-left:10px; background:url(/images/bg_sitemenu.png) no-repeat left center;}
    #footer .site_list_con dl dd.fisrt{ background:none;}
}

.swiper-fade .swiper-slide {
  transition-property: opacity;
}