@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap');

/* sec1 */
.user#main section#sec_1{position:relative;}

/* sec2 */
.user#main section#sec_2{padding:7em 0;}
.user#main section#sec_2>.layout:after{content:""; display:block; clear:both;}
.user#main section#sec_2 #notice{float:left; width:calc(50% - 3em); margin-right:3em;}
.user#main section#sec_2 #list-icon{float:left; width:50%}
.user#main section#sec_3{padding:7em 0; background:#634D57;}


/* visual */
.user#main #visual{position:relative; height:65em; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #visual > .layout{position:relative; height:100%;}
.user#main #visual > .layout:before{content:""; display:block; position:absolute; left:2em; bottom:0; width:67em; height:20.2em; background-image:url(../../../images/site/ai/main/visual_simbol.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user#main #visual > .layout > .head{
    position:absolute; left:2em; top:50%; max-width:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.user#main #visual > .layout > .head > span,
.user#main #visual > .layout > .head > strong{display:block; line-height:1.2; color:#fff;}
.user#main #visual > .layout > .head > span{font-weight:300; font-size:2.4em;}
.user#main #visual > .layout > .head > strong{font-family: 'Noto Serif KR', serif; font-weight:500; font-size:6em;}

.user#main #info{position:relative; width:50%; height:9em;}
.user#main #info:before{
    content:""; display:block; position:absolute; right:0; top:0; z-index:0; width:20000px; height:100%;
    background:#003B63;
    background:linear-gradient(90.53deg, #0066AB 90%, #003B63 100%);
}
.user#main #info>ul{position:relative; z-index:100; padding:2.3em 0;}
.user#main #info>ul:after{content:""; display:block; clear:both;}
.user#main #info>ul>li{float:left; position:relative; width:calc((100% - 1px) / 3);}
.user#main #info>ul>li:nth-child(n+2):before{content:""; display:block; position:absolute; left:0; top:0; width:1px; height:100%; background-color:rgba(255,255,255,0.5);}
.user#main #info>ul>li>a{display:block; height:4.4em; line-height:4.4em; text-align:center;}
.user#main #info>ul>li>a>span{display:inline-block; position:relative; padding-left:2em; font-weight:500; font-size:2em; color:#fff;}
.user#main #info>ul>li>a>span:before{content:""; display:block; position:absolute; left:0; top:0.2em; width:1.6em; height:1.6em; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user#main #info>ul>li:nth-child(1)>a>span:before{background-image:url(../../../images/site/ai/main/info_simbol_1.svg);}
.user#main #info>ul>li:nth-child(2)>a>span:before{background-image:url(../../../images/site/ai/main/info_simbol_2.svg);}
.user#main #info>ul>li:nth-child(3)>a>span:before{background-image:url(../../../images/site/ai/main/info_simbol_3.svg);}
.user#main #youtube{
    overflow:hidden; position:absolute; right:2em; bottom:0; width:calc(50% - 2em); height:auto; padding-top:calc((56.25% / 2) - 2em);
    -webkit-border-radius:0 0 5em 0;
    border-radius:0 0 5em 0;
}
.user#main #youtube iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
@media screen and (max-width: 1024px) {
    .user#main #visual{height:39.8em;}
    .user#main #visual > .layout > .head{max-width:calc(100% - 4em);}
    .user#main #visual > .layout > .head > span{font-size:1.8em;}
    .user#main #visual > .layout > .head > strong{font-size:4em;}
}
@media screen and (max-width: 800px) {
    .user#main #info{width:100%; height:auto;}
    .user#main #info:before{right:-4em;}
    .user#main #info>ul{padding:1em 0;}
    .user#main #info>ul>li:nth-child(n+2):before{top:20%; height:60%;}
    .user#main #info>ul>li>a>span{font-size:1.5em;}
    .user#main #info>ul>li>a>span:before{top:0.5em;}
    .user#main #youtube{position:relative; right:auto; bottom:auto; width:100%; margin-top:2em; padding-top:52.6%;}
}
@media screen and (max-width: 500px) {
    .user#main section#sec_1 > .layout{padding:0;}
    .user#main #visual{height:26.5em;}
    .user#main #visual > .layout:before{width:calc(100% - 4em); background-position:left bottom;}
    .user#main #visual > .layout > .head > span{display:none;}
    .user#main #visual > .layout > .head > strong{font-size:3.4em;}
    .user#main #visual > .layout > .head > strong>span{display:block;}
    .user#main #youtube>iframe{left:2em; width:calc(100% - 4em);}
}


/* notice */
.user#main #notice{position:relative;}
.user#main #notice>.head{height:3.6em;}
.user#main #notice>.head>strong{font-weight:400; font-size:3em; color:#222;}
.user#main #notice>.midd{margin-top:2.7em;}
.user#main #notice>.midd>ul>li{display:table; table-layout:fixed; width:100%;}
.user#main #notice>.midd>ul>li:nth-child(n+2){margin-top:1.5em;}
.user#main #notice>.midd>ul>li>a{
    display:table-cell; position:relative; width:100%; height:14.8em; padding:0 3em 0 12.3em; border:1px solid #E5E5E5; vertical-align:middle;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
    -webkit-transition:border-color 0.2s linear;
    transition:border-color 0.2s linear;
}
.user#main #notice>.midd>ul>li>a>strong,
.user#main #notice>.midd>ul>li>a>span{display:block;}
.user#main #notice>.midd>ul>li>a>.t{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:1.8em; color:#222;}
.user#main #notice>.midd>ul>li>a>.c{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-top:0.5em; font-size:1.5em; color:#222;}
.user#main #notice>.midd>ul>li>a>.d{position:absolute; left:2em; top:2.5em; width:3.86em; padding-top:3.4em; font-size:1.5em; color:#222;}
.user#main #notice>.midd>ul>li>a>.d>span{position:absolute; left:0; top:0; width:100%; line-height:1; text-align:center; font-weight:500; font-size:3.2em; color:#005792;}
.user#main #notice>.more{overflow:hidden; position:absolute; right:0; top:1em; width:2.4em; height:2.4em; text-align:left; text-indent:-1000px;}
.user#main #notice>.more>a{display:block; width:100%; height:100%;}
.user#main #notice>.more>a:before{
    content:""; display:block; width:100%; height:100%; background-image:url(../../../images/site/ai/main/main_more.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #notice>.more>a:hover:before{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #notice>.midd>ul>li>a:hover{border-color:rgba(0, 0, 0, 0.7);}
@media screen and (max-width: 1024px) {
    .user#main #notice{font-size:0.8em;}
}
@media screen and (max-width: 800px) {
    .user#main section#sec_2 #notice{width:100%;}
}
@media screen and (max-width: 500px) {
    .user#main #notice>.midd>ul>li>a{height:12.8em; padding:0 2em 0 10.3em;}
    .user#main #notice>.midd>ul>li>a>.d{top:1.7em;}
}


/* 학사일정 */
.user#main #list-icon{padding-top:6.3em;}
.user#main #list-icon > ul:after{content:""; display:block; clear:both;}
.user#main #list-icon > ul > li{
    overflow:hidden; float:left; width:calc((100% - 1px - 9em) / 4); margin-right:3em; text-align:center;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
}
.user#main #list-icon > ul > li:nth-child(n+5){margin-top:1.5em;}
.user#main #list-icon > ul > li:nth-child(4n+4){margin-right:0;}
.user#main #list-icon > ul > li > a{
    display:table; table-layout:fixed; width:100%; height:14.8em; border:1px solid #E5E5E5;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
    -webkit-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
}
.user#main #list-icon > ul > li > a > span{display:table-cell; vertical-align:middle; text-align:center; font-size:2em; color:#222;}
.user#main #list-icon > ul > li > a > span:before{content:""; display:block; width:2.5em; height:2.5em; margin:0 auto 1em; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user#main #list-icon > ul > li:nth-child(1) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_1_g.svg);}
.user#main #list-icon > ul > li:nth-child(2) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_2_g.svg);}
.user#main #list-icon > ul > li:nth-child(3) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_3_g.svg);}
.user#main #list-icon > ul > li:nth-child(4) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_4_g.svg);}
.user#main #list-icon > ul > li:nth-child(5) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_5_g.svg);}
.user#main #list-icon > ul > li:nth-child(6) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_6_g.svg);}
.user#main #list-icon > ul > li:nth-child(7) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_7_g.svg);}
.user#main #list-icon > ul > li:nth-child(8) > a > span:before{background-image:url(../../../images/site/ai/main/icon_list_8_g.svg);}

.user#main #list-icon > ul > li > a:hover{background-color:#005792;}
.user#main #list-icon > ul > li > a:hover>span{color:#fff;}
.user#main #list-icon > ul > li:nth-child(1) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_1_w.svg);}
.user#main #list-icon > ul > li:nth-child(2) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_2_w.svg);}
.user#main #list-icon > ul > li:nth-child(3) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_3_w.svg);}
.user#main #list-icon > ul > li:nth-child(4) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_4_w.svg);}
.user#main #list-icon > ul > li:nth-child(5) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_5_w.svg);}
.user#main #list-icon > ul > li:nth-child(6) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_6_w.svg);}
.user#main #list-icon > ul > li:nth-child(7) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_7_w.svg);}
.user#main #list-icon > ul > li:nth-child(8) > a:hover > span:before{background-image:url(../../../images/site/ai/main/icon_list_8_w.svg);}
@media screen and (max-width: 1024px) {
    .user#main section#sec_2{padding:3em 0;}
    .user#main #list-icon{font-size:0.8em;}
}
@media screen and (max-width: 800px) {
    .user#main section#sec_2 #list-icon{width:100%;}
    .user#main #list-icon{padding-top:3em;}
    .user#main #list-icon > ul > li{width:calc((100% - 1px - 4.5em) / 4); margin-right:1.5em;}
}
@media screen and (max-width: 500px) {
    .user#main #list-icon{font-size:0.6em;}
}

/* 포토갤러리 */
.user#main #photo_slide{position:relative; z-index:0;}
.user#main #photo_slide>.head{text-align:center;}
.user#main #photo_slide>.head>strong{font-weight:500; font-size:3em; color:#fff;}
.user#main #photo_slide>.midd{position:relative; height:41.6em; margin-top:3em;}
.user#main #photo_slide>.midd>ul:after{content:""; display:block; clear:both;}
.user#main #photo_slide>.midd>ul{
    white-space:nowrap; position:absolute; left:50%; top:0; height:100%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}
.user#main #photo_slide>.midd>ul>li{
    display:inline-block; position:relative; width:71.5em; height:100%; padding:0 1.5em; vertical-align:top;
    -webkit-transition:all 0.7s linear;
    transition:all 0.7s linear;
}
.user#main #photo_slide>.midd>ul>li>a{display:block; position:relative; top:50%; z-index:10; width:100%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.user#main #photo_slide>.midd>ul>li>a>img{display:block; position:relative; z-index:-1; width:100%;}
.user#main #photo_slide>.midd>ul>li:not(.on){width:52.5em;}
.user#main #photo_slide>.midd>ul>li:not(.on)>a:before,
.user#main #photo_slide>.midd>ul>li:not(.on)>a>.t,
.user#main #photo_slide>.midd>ul>li:not(.on)>a>.d{opacity:0;}
.user#main #photo_slide>.midd>ul>li:not(.on)>a>.p{opacity:0.5;}
.user#main #photo_slide>.midd>ul>li>a:before{
    content:""; display:block; position:absolute; left:0; top:0; z-index:100; width:100%; height:100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 56.01%, rgba(0, 0, 0, 0.9) 94.95%);
}
.user#main #photo_slide>.midd>ul>li>a>.p,
.user#main #photo_slide>.midd>ul>li>a>.t,
.user#main #photo_slide>.midd>ul>li>a>.d{
    -webkit-transition:all 0.7s linear;
    transition:all 0.7s linear;
}
.user#main #photo_slide>.midd>ul>li>a>.p{display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #photo_slide>.midd>ul>li>a>.t{position:absolute; left:0; bottom:0; z-index:200; width:100%; padding: 1.25em 7.875em 1.25em 1.875em; overflow: hidden; text-overflow: ellipsis; font-size:1.6em; color:#fff; background-color:rgba(0, 0, 0, 0.7);}
.user#main #photo_slide>.midd>ul>li>a>.d{position:absolute; right:2em; bottom:1.33em; z-index:300; font-weight:300; font-size:1.5em; color:rgba(255,255,255,0.8);}

.user#main #photo_slide>.midd .tips{display:none;}

.user#main #photo_slide>.more{overflow:hidden; position:absolute; right:0; top:1em; width:2.4em; height:2.4em; text-align:left; text-indent:-1000px;}
.user#main #photo_slide>.more>a{display:block; width:100%; height:100%;}
.user#main #photo_slide>.more>a:before{
    content:""; display:block; width:100%; height:100%; background-image:url(../../../images/site/ai/main/main_more_w.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #photo_slide>.more>a:hover:before{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #photo_slide .prev,
.user#main #photo_slide .next{
    display:block; position:absolute; top:50%; z-index:400; width:4.3em; height:8.6em; background-image:url(../../../images/site/ai/main/photo_slide_arrow.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #photo_slide .prev{
    left:-2.15em;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.user#main #photo_slide .next{
    right:-2.15em;
    -webkit-transform:translateY(-50%) rotate(180deg);
    transform:translateY(-50%) rotate(180deg);
}
.user#main #photo_slide .prev>span,
.user#main #photo_slide .next>span{position:absolute; opacity:0;}
.user#main #photo_slide .prev:hover{
    -webkit-transform:translateY(-50%) scale(1.1);
    transform:translateY(-50%) scale(1.1);
}
.user#main #photo_slide .next:hover{
    -webkit-transform:translateY(-50%) rotate(180deg) scale(1.1);
    transform:translateY(-50%) rotate(180deg) scale(1.1);
}

@media screen and (max-width: 1500px) {
    .user#main #photo_slide .prev{left:0;}
    .user#main #photo_slide .next{right:0;}
}
@media screen and (max-width: 1024px) {
    .user#main section#sec_3{padding:3em 0;}
}
@media screen and (max-width: 900px) {
    .user#main #photo_slide>.midd{height:26.6em;}
    .user#main #photo_slide>.midd>ul>li{width:49.1em;}
    .user#main #photo_slide>.midd>ul>li:not(.on){width:44.5em;}
}
@media screen and (max-width: 600px) {
    .user#main #photo_slide>.midd{height:auto;}
    .user#main #photo_slide>.midd>ul{
        overflow-x:auto; overflow-y:hidden; position:relative; left:auto; width:100%; height:auto;
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    .user#main #photo_slide>.midd>ul>li,
    .user#main #photo_slide>.midd>ul>li:not(.on){width:100%; padding:0; margin-right:2em;}
    .user#main #photo_slide>.midd>ul>li:last-child{margin-right:0;}
    .user#main #photo_slide>.midd>ul>li.clone{display:none;}
    .user#main #photo_slide>.midd>ul>li>a{
        top:auto;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    .user#main #photo_slide>.midd>ul>li:not(.on)>a:before, 
    .user#main #photo_slide>.midd>ul>li:not(.on)>a>.t, 
    .user#main #photo_slide>.midd>ul>li:not(.on)>a>.d,
    .user#main #photo_slide>.midd>ul>li:not(.on)>a>.p{opacity:1;}
    .user#main #photo_slide .prev, 
    .user#main #photo_slide .next{display:none;}

    .user#main #photo_slide>.midd .tips{
        opacity:1; display:block; position:absolute; left:50%; top:50%; z-index:300; width:20em; height:9em; background-color:rgba(0, 0, 0, 0.7);
        -webkit-border-radius:4.5em;
        border-radius:4.5em;
        -webkit-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
        -webkit-transition:opacity 0.2s linear;
        transition:opacity 0.2s linear;
    }
    .user#main #photo_slide>.midd .tips>span{display:block; position:relative; width:100%; height:100%;}
    .user#main #photo_slide>.midd .tips>span>span{
        display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:contain;

        -webkit-animation-duration:1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: infinite;

        animation-duration:1s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    .user#main #photo_slide>.midd .tips>span>span:nth-child(1){background-image:url(../../../images/site/common/mobile_scroll_1.svg);}
    .user#main #photo_slide>.midd .tips>span>span:nth-child(2){background-image:url(../../../images/site/common/mobile_scroll_2.svg);}
    .user#main #photo_slide>.midd .tips>span>span:nth-child(3){background-image:url(../../../images/site/common/mobile_scroll_3.svg);}
    .user#main #photo_slide>.midd .tips>span>span:nth-child(4){background-image:url(../../../images/site/common/mobile_scroll_4.svg);}
    .user#main #photo_slide>.midd .tips>strong{opacity:0; position:absolute;}

    
    .user#main #photo_slide>.midd .tips>span>span:nth-child(2){
        -webkit-animation-name:photo_arrow;
        -webkit-animation-delay:0.2s;

        animation-name:photo_arrow;
        animation-delay:0.2s;
    }
    .user#main #photo_slide>.midd .tips>span>span:nth-child(3){
        -webkit-animation-name:photo_arrow;
        -webkit-animation-delay:0s;

        animation-name:photo_arrow;
        animation-delay:0s;
    }
    .user#main #photo_slide>.midd .tips>span>span:nth-child(4){
        -webkit-animation-name:photo_point;
        -webkit-animation-delay:0.2s;

        animation-name:photo_point;
        animation-delay:0.2s;
    }

    @-webkit-keyframes photo_arrow {
        0%,100%{opacity:0;}
        50%{opacity:1;}
    }
    @keyframes photo_arrow {
        0%,100%{opacity:0;}
        50%{opacity:1;}
    }

    @-webkit-keyframes photo_point {
        0%,100%{-webkit-transform:translateX(-3px); transform:translateX(-3px);}
        50%{-webkit-transform:translateX(3px); transform:translateX(3px);}
    }
    @keyframes photo_point {
        0%,100%{-webkit-transform:translateX(-3px); transform:translateX(-3px);}
        50%{-webkit-transform:translateX(3px); transform:translateX(3px);}
    }
    .user#main #photo_slide[data-def="off"]>.midd .tips{opacity:0;}
}