@charset "utf-8";


/* 메인 wrapper 너비 */
/* 비주얼 */  .visual-wrapper{max-width: var(--wrapper); margin:0 auto}
/* 연구 결과  */  .researchResult-wrapper{max-width: var(--wrapper); margin:0 auto}
/* 수평 정렬 콘텐츠 */ .alignment-horizontal{max-width: var(--wrapper); margin:0 auto}
/* 새소식 */  .news-wrapper{max-width: var(--wrapper); margin:0 auto}
/* 연구실 연구정보 안내 */  .research-wrapper{max-width: var(--wrapper); margin:0 auto}


:root .head-logo h1 .head-logo-white{display:block}
:root .head-logo h1 .head-logo-black{display:none}
:root .head-logo h1 .v-bar{background-color: #fff;opacity: 0.5}
:root .head-logo h1 small>a{color:#fff}


:root .ani-gnb::after{content:'';z-index: 1001;position:absolute;top:89px;left:0;width:100%;height:1px;background-color:#fff;opacity:0.2}
:root .head-gnb .gnb-parent-item>a{position:relative;display:block;width:170px;text-align: center;height:90px;padding: 35px 0 0;font-size: 20px;font-weight:700;color: #fff;}

:root .gnb-sitemap .gnb-sitemap-white{display:block}
:root .gnb-sitemap .gnb-sitemap-black{display:none}




.visual-slide-control{z-index:10;position:absolute;bottom: 70px;left:0;right:0;width:100%;max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content: center;padding: 0 20px;}
.visual-slide-control button{line-height:0}
.visual-slide-control .control-center{display:flex;align-items:center;background-color:rgba(0, 0, 0, 0.7);padding:10px 20px;border-radius:25px;margin:0 20px}
.visual-slide-control .control-page{display:flex;align-items:center}
.visual-slide-control .control-page .number ~ .number{margin-left:5px}
.visual-slide-control .control-page .number{position:relative;width:22px;height:22px;border-radius:100%;border:2px solid transparent}
.visual-slide-control .control-page .number::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:5px;height:5px;border-radius:100%;background-color:#fff}
.visual-slide-control .control-page .number.is-selected{border-color:#fff}
.visual-slide-control .control-page .number.is-selected::before{width:7px;height:7px;background-color:#4195f8}
.visual-slide-control .control-play{display:flex;align-items:center;margin-left:10px}
.visual-slide-control .control-play .play{display:none}




#visual{position: relative;overflow:hidden}
    .visual-slide{position:relative;overflow:hidden;}
    .visual-slide .slide-list{position:relative;height:710px;width: 100%;overflow: hidden;}
    .visual-slide .slide-list .item{position:absolute;top:0;left:0;width:inherit;height:inherit}
    .visual-slide .slide-list .item:not(:first-child){display:none}

    .visual-wrapper{position:absolute;top: 90px;left:0;right:0;margin:0 auto}

        .visual-lesson{position:absolute;top: 100px;left:0;width:100%;height:100%;display:flex;flex-wrap:wrap;align-items:center}
        
                .descript-summary{}
                .descript-summary .summary-text{line-height: 65px;font-size: 55px;color:#fff;max-width: 850px;display: block;word-break: break-word;}
                .descript-summary .summary-paragraph{
                    line-height: 27px;
                    font-size: 18px;
                    color:#fff;
                    margin-top:30px;
                    max-width: 850px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 5;
                }
                .descript-summary .summary-more{
                    display:block;
                    background-color:#0a51a8;
                    color:#fffefe;
                    font-weight:500;
                    font-size:17px;
                    width:143px;
                    height:48px;
                    padding-top:15px;
                    margin-top: 55px;
                    border-radius:45px;
                    text-align:center;
                }


/* #main-contents */
    .section-quickMenu{position:absolute;top: 190px;left:50%;margin-left: 179px;}
    .section-quickMenu::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-radius:0 0 50px 0;
        background-color: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(15px);
    }
    .section-quickMenu .quickMenu-wrapper{z-index:1;position:relative;width:540px;height:320px;padding:60px;/* background-color: rgba(0, 0, 0, 0.15); */}

    .section-quickMenu .quickMenu-title{position:relative;padding-bottom: 30px;border-bottom:1px solid rgba(255, 255, 255, 0.3);}
    .section-quickMenu .quickMenu-title::after{content:'';position:absolute;bottom:-1px;left:0;width:140px;height:1px;background-color:#fff}
    .section-quickMenu .quickMenu-title h3{font-weight:600;font-size:25px;color:#fff}

    .section-quickMenu .quickMenu-navigation{display:flex;} 
    .section-quickMenu .quickMenu-navigation a{position:relative;flex:1;height: 160px;padding-top: 110px;}
    .section-quickMenu .quickMenu-navigation a img{position:absolute;top: 35px;left:0;right:0;margin:0 auto}
    .section-quickMenu .quickMenu-navigation a span{display:block;text-align: center;font-weight:500;font-size:18px;color:#fff} 
            


    .alignment-horizontal{display:flex;padding: 80px 0;}

        .section-researchResult{flex:1;margin-right:90px}
            .researchResult-wrapper{position:relative}

                .researchResult-title{}
                .researchResult-title h3{font-weight:700;font-size: 40px;color:#000}

                .researchResult-navigation{position:absolute;top: -5px;right: 80px;display:flex;align-items:center}
                .researchResult-navigation .navigation-button{font-weight:700;font-size:22px;color:#333}
                .researchResult-navigation .navigation-button  span{display:inline-block;padding:5px 0 7px;border-bottom:2px solid transparent}
                .researchResult-navigation .navigation-button ~ .navigation-button{margin-left:30px}
                .researchResult-navigation .navigation-button:hover{color:#0a51a8}
                .researchResult-navigation .navigation-button.is-selected{color: #0a51a8;}
                .researchResult-navigation .navigation-button.is-selected span{border-bottom-color: #0a51a8;}

                .researchResult-list{margin-top: 53px}
                .researchResult-list .list-empty p{font-weight:700;font-size:24px}
                .researchResult-list ~ .researchResult-list{display:none}
                .researchResult-list .list-items{}
                .researchResult-list .list-items .item ~ .item{margin-top:55px}
                .researchResult-list .list-items .item a{display:block;position:relative}
                .researchResult-list .list-items .item .item-thumbnail{position:absolute;right:0;top:0;border-radius:13px;overflow:hidden;width:185px;height:143px}
                .researchResult-list .list-items .item .item-thumbnail img{position:relative;top:50%;left:50%;transform:translate(-50%, -50%)}
                .researchResult-list .list-items .item .item-subject{height:60px;overflow:hidden;border-radius:10px}
                .researchResult-list .list-items .item .item-subject strong{
                    word-break:break-all;font-weight:700;font-size:25px;color:#000;line-height: 30px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .researchResult-list .list-items .item .item-descript{height:69px;margin-top: 13px;overflow:hidden;}
                .researchResult-list .list-items .item .item-descript p{
                    word-break:break-all;
                    font-weight:400;
                    line-height: 23px;
                    font-size:16px;
                    color:#666;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
                .researchResult-list .list-items .item .item-date{margin-top: 20px;}
                .researchResult-list .list-items .item .item-date span{font-weight:400;font-size:15px;color:#666}
                
                .researchResult-list .items-more{position:absolute;top: 0px;right:0;width:48px;height:48px;border:1px solid #bdbdbd;border-radius:100%}
                .researchResult-list .items-more img{position:relative;top:50%;left:50%;transform:translate(-50%, -50%)}
                .researchResult-list .items-more:hover{background-color:#0a52a7;border-color:#0a52a7}
                .researchResult-list .items-more:hover img{filter:brightness(0) invert(1)}

                .researchResult-list .list-items .item .item-thumbnail ~ .item-subject{padding-right:225px}
                .researchResult-list .list-items .item .item-thumbnail ~ .item-descript{padding-right:225px}
                


        .alignment-vertical{flex:0 0 585px}
            .section-news{}
                .news-wrapper{position:relative}

                    .news-title{}
                    .news-title h3{font-weight:700;font-size: 40px;color:#000}

                    .news-list{margin-top: 30px;}
                    .news-list .list-empty p{font-weight:700;font-size:24px}
                    
                    .news-list .list-items{border-top:2px solid #000}
                    .news-list .list-items .item{border-bottom:1px solid #aeaeae}
                    .news-list .list-items .item a{position:relative;display:block;overflow:hidden;padding:35px 0;}
                    .news-list .list-items .item .item-subject{height:60px;overflow:hidden}
                    .news-list .list-items .item .item-subject strong{
                        font-weight:700;font-size:25px;line-height:30px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }
                    .news-list .list-items .item .item-descript{height:44px;overflow:hidden;margin-top: 20px;}
                    .news-list .list-items .item .item-descript p{
                        line-height:22px;font-size:16px;color:#666;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

                    .news-list .list-items .item:not(:first-child) a{display:flex;align-items:center}
                    .news-list .list-items .item:not(:first-child) .item-subject{flex:1;height:auto;margin:0 20px}
                    .news-list .list-items .item:not(:first-child) .item-subject strong{-webkit-line-clamp: 1;}
                    .news-list .list-items .item:not(:first-child) .item-date{flex:0 0 auto}

                    .news-list .list-items .item:first-child a{padding-left: 120px;}
                    .news-list .list-items .item:first-child .item-date{position:absolute;top:0;left:0;text-align: center;padding: 35px 20px 0;}
                    .news-list .list-items .item:first-child .item-date i{display:block;font-weight:700;font-size:54px;color:#000}
                    .news-list .list-items .item:first-child .item-date span{display:block;font-size:14px;color:#666}



                    .news-list .items-more{position:absolute;top: 0px;right:0;width:48px;height:48px;border:1px solid #bdbdbd;border-radius:100%}
                    .news-list .items-more img{position:relative;top:50%;left:50%;transform:translate(-50%, -50%)}
                    .news-list .items-more:hover{background-color:#0a52a7;border-color:#0a52a7}
                    .news-list .items-more:hover img{filter:brightness(0) invert(1)}

            .section-research{border-radius:20px;overflow:hidden;background:url(/resources/images/name/user/template04/main/research-background.png) no-repeat 0 0 / cover;margin-top: 100px;}
                .research-wrapper{width:585px;height:163px;}
                .research-wrapper a{display:block;height:inherit;padding:40px 0 0 90px}
                .research-wrapper h4{font-weight:700;font-size:40px;color: #fff;}
                .research-wrapper p{font-weight:500;font-size:18px;color: #fff;margin-top:10px}



/* 1480 이하 */

@media screen and (max-width:1480px) {

    :root .head-logo h1 .head-logo-white{display:none}
    :root .head-logo h1 .head-logo-black{display:block}
    :root .head-logo h1 .v-bar{background-color:#ccc}
    :root .head-logo h1 small>a{color:#000}


    #visual{padding:0}
    #visual .visual-wrapper{height:auto;top: 0;}
    #visual .visual-lesson{position:static;padding:40px;display:block}
    #visual .descript-summary{text-align:center}
    #visual .descript-summary .summary-text{font-size:34px;line-height:125%;max-width:none}
    #visual .descript-summary .summary-paragraph{max-width:none}
    #visual .descript-summary .summary-more{margin:50px auto 0}
    


    #visual .visual-slide-control{bottom:250px}
    

    #main-contents .section-quickMenu{position:relative;width:100%;height:auto;top:0;left:0;margin:-186px 0 0 0}
    #main-contents .section-quickMenu::before{border-radius: 0;}
    #main-contents .section-quickMenu .quickMenu-wrapper{width:auto;height:auto;padding:30px;margin:0}
    #main-contents .section-quickMenu .quickMenu-navigation{padding-top:30px}
    #main-contents .section-quickMenu .quickMenu-navigation a{height:auto;padding:0 15px;display:flex;align-items:center;justify-content:center}
    #main-contents .section-quickMenu .quickMenu-navigation a img{position:static;height:38px;margin:0;margin-right:20px}


    .alignment-horizontal{padding:30px 20px;max-width:100%}
    
    
}

@media screen and (max-width:1320px) {

    #main-contents .alignment-horizontal{display:block}
    #main-contents .researchResult-list{margin-top:30px}
    #main-contents .researchResult-list .list-items .item .item-subject{height:auto}
    #main-contents .researchResult-list .list-items .item .item-descript{height:auto}

    #main-contents .news-title h3{font-size:40px}
    #main-contents .alignment-vertical{margin-top: 60px;}

    #main-contents .section-researchResult{margin-right:0} 
    #main-contents .researchResult-list .list-items .item ~ .item{margin-top:20px;padding-top:20px;border-top:1px solid #ddd}

    #main-contents .news-list .list-items .item .item-subject{height:auto}
    #main-contents .news-list .list-items .item .item-descript{height:auto}
    #main-contents .section-research{margin-top:30px}
}

@media screen and (max-width:800px) {

    #visual .visual-slide .slide-list{height:700px}
    #visual .visual-slide-control{bottom:270px}

    #main-contents .section-quickMenu{margin-top: -228px}
    
    #main-contents .section-quickMenu .quickMenu-navigation a{display:block;text-align: center;}
    #main-contents .section-quickMenu .quickMenu-navigation a img{margin:0 0 20px}
    #main-contents .section-quickMenu .quickMenu-navigation a span{}
    
    
    .researchResult-navigation{position:static;margin-top:20px}
    .researchResult-navigation .navigation-button span br{display:none}
}