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


.user#main #container{position:relative; padding:12em 0;}
.user#main #container .layout{}
/* sec1 */
.user#main section>.layout>.in{float:right; width:100%; max-width:92.1em;}
.user#main section:after{content:""; display:block; clear:both;}
.user#main section#sec_1{position:relative;}
.user#main section#sec_2{margin-top:3.6em;}
/* .user#main section#sec_2>.layout>.in:after{content:""; display:block; clear:both;} */
.user#main section#sec_3{margin-top:3.6em;}

@media screen and (max-width: 1024px) {
    .user#main section>.layout>.in{max-width:100%;}
    .user#main section#sec_1>.layout{padding:0;}
}


.user#main #visual{position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%;}
.user#main #visual:after{content:""; display:block; position:absolute; right:0; bottom:0; width:48.2em; height:36.4em; background-image:url(../../../images/site/eee/main/bg_simbol.svg); background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #visual>div{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
@media screen and (max-width: 1024px) {
    .user#main #container{padding:8em 0 5em 0;}
    .user#main #visual:after{display:none;}
    .user#main #visual>div{background-position:30% center;}
}
@media screen and (max-width: 600px) {
    .user#main #container{padding:4.8em 0 3em 0;}
}

/*  */
.user#main #etc-list>ul:after{content:""; display:block; clear:both;}
.user#main #etc-list>ul>li{float:left; width:calc((100% - 1px - 6em) / 3); margin-left:3em;}
.user#main #etc-list>ul>li:nth-child(3n+1){clear:both; margin-left:0;}
.user#main #etc-list>ul>li>a{
    display:block; height:24.6em; padding:3.7em 3.2em; border:1px solid #C4C4C4; background-color:rgba(255,255,255,0);
    -webkit-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
}
.user#main #etc-list>ul>li>a>.head>em,
.user#main #etc-list>ul>li>a>.head>strong{display:block;}
.user#main #etc-list>ul>li>a>.head>em{font-family: 'Poppins', sans-serif; font-style:normal; font-weight:500; font-size:1.8em; color:#A5E27C;}
.user#main #etc-list>ul>li>a>.head>strong{margin-top:0.2em; letter-spacing:-0.03em; font-size:2.4em; color:#fff;}
.user#main #etc-list>ul>li>a>.midd{overflow:hidden; display:block; height:5em; line-height:1.6; margin-top:1em; font-weight:300; font-size:1.5em; color:#fff;}
.user#main #etc-list>ul>li>a>.foot{display:block; text-align:right;}
.user#main #etc-list>ul>li>a>.foot>span{display:inline-block; position:relative; line-height:1; font-weight:300; font-size:1.5em; color:#fff;}
.user#main #etc-list>ul>li>a>.foot>span:before{
    content:""; display:block; position:absolute; right:-0.4em; bottom:-0.3em; z-index:0; width:100%; height:0.8em; background-color:rgba(165, 226, 124, 0.19);
    -webkit-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
}
.user#main #etc-list>ul>li>a>.foot>span>span{position:relative; z-index:10;}


.user#main #etc-list>ul>li>a:hover{background-color:rgba(255,255,255,1);}
.user#main #etc-list>ul>li>a:hover>.head>em{color:#519723;}
.user#main #etc-list>ul>li>a:hover>.head>strong,
.user#main #etc-list>ul>li>a:hover>.midd{color:#102140;}
.user#main #etc-list>ul>li>a:hover>.foot>span{color:#102140;}
.user#main #etc-list>ul>li>a:hover>.foot>span:before{background-color:rgba(165, 226, 124, 0.6);}
@media screen and (max-width: 1024px) {
    .user#main #etc-list{
        overflow-x:auto; overflow-y:hidden; padding-left:2em;
        -ms-overflow-style: none; /* IE, Edge */
        scrollbar-width: none;
    }
    .user#main #etc-list::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .user#main #etc-list>ul{white-space:nowrap; font-size:0.9em;}
    .user#main #etc-list>ul>li{white-space:normal; float:none; display:inline-block; width:30.5em;}
    .user#main #etc-list>ul>li>a>.foot>span:before{opacity:0.72; right:0; bottom:0; width:1.6em; height:1.6em; background-color:transparent; background-image:url(../../../images/site/eee/main/type_3_more.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;}
    .user#main #etc-list>ul>li>a>.foot>span>span{opacity:0; position:absolute;}
}
@media screen and (max-width: 600px) {
    .user#main #etc-list>ul{font-size:0.8em;}
}

/* youtube */
.user#main #youtubebox{float:left; width:calc((100% - 1px - 3.2em) / 2); margin-right:3.2em;}
.user#main #youtubebox>.head>strong{font-family: 'Poppins', sans-serif; font-size:2.6em; color:#A5E27C;}
.user#main #youtubebox>.midd{margin-top:1.4em;}
.user#main #youtubebox>.midd>#youtube{width:100%; height:23em;}
.user#main #youtubebox>.midd>#youtube>iframe{width:100%; height:100%;}
@media screen and (max-width: 1024px) {
    .user#main #youtubebox>.head{display:none;}
    .user#main #youtubebox>.midd>#youtube{height:20em;}
}
@media screen and (max-width: 600px) {
    .user#main #youtubebox{float:none; width:100%;}
    .user#main #youtubebox>.head{display:block;}
    .user#main #youtubebox>.head>strong{font-size:2.2em;}
    .user#main #youtubebox>.midd>#youtube{position:relative; height:auto; padding-top:56.2%;}
    .user#main #youtubebox>.midd>#youtube>iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
}

.user#main #notice{float:left; position:relative; width:calc((100% - 1px - 3.2em) / 2);}
.user#main #notice>.head>strong{font-family: 'Poppins', sans-serif; font-size:2.6em; color:#A5E27C;}
.user#main #notice>.midd{margin-top:1.4em;}
.user#main #notice>.midd>ul>li:nth-child(n+2){margin-top:0.9em;}
.user#main #notice>.midd>ul>li>a{display:block; position:relative; padding:2.2em 0 2.2em 8.8em;}
.user#main #notice>.midd>ul>li>a>.t,
.user#main #notice>.midd>ul>li>a>.c,
.user#main #notice>.midd>ul>li>a>.d{display:block;}
.user#main #notice>.midd>ul>li>a>.t,
.user#main #notice>.midd>ul>li>a>.c{white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.user#main #notice>.midd>ul>li>a>.t{font-weight:500; font-size:1.8em; color:#fff;}
.user#main #notice>.midd>ul>li>a>.c{display: none; height:1.6em; margin-top:0.2em; font-weight:300; font-size:1.5em; color:rgba(255,255,255,0.95);}
.user#main #notice>.midd>ul>li>a>.d{position:absolute; left:0; top:0; width:5.23em; height:5.23em; padding-top:1em; text-align:center; font-weight:300; font-size:1.3em; color:#fff; background-color:rgba(88, 135, 255, 0.2);}
.user#main #notice>.midd>ul>li>a>.d>span{display:block; line-height:1.2; font-weight:500; font-size:1.846em; color:#A5E27C;}
.user#main #notice .more{position:absolute; right:0; top:1.2em;}
.user#main #notice .more>a{display:block; position:relative;}
.user#main #notice .more>a:before{
    content:""; display:block; position:absolute; right:0; bottom:-0.1em; z-index:0; width:calc(100% - 0.4em); height:1.2em; background-color:rgba(165, 226, 124, 0.19);
    -webkit-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
}
.user#main #notice .more>a>span{display:block; position:relative; z-index:100; padding-right:0.4em; font-size:1.5em; color:#fff;}
.user#main #notice .more>a:hover:before{background-color:rgba(165, 226, 124, 0.6);}
.user#main #notice>.midd>ul>li>a:hover>.t,
.user#main #notice>.midd>ul>li>a:hover>.c{text-decoration:underline;}
@media screen and (max-width: 1024px) {
    .user#main #notice .more>a{opacity:0.72; width:1.6em; height:1.6em;}
    .user#main #notice .more>a:before{bottom:auto; width:100%; height:100%; background-color:transparent; background-image:url(../../../images/site/eee/main/type_3_more.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;}
    .user#main #notice .more>a>span{opacity:0; position:absolute;}
    .user#main #notice>.midd>ul>li>a{padding: 1em 0;}
    .user#main #notice>.midd>ul>li>a>.c,
    .user#main #notice>.midd>ul>li>a>.d{display:none;}
}
@media screen and (max-width: 600px) {
    .user#main #notice{float:none; width:100%; margin-top:3em;}
    .user#main #notice>.head>strong{font-size:2.2em;}
    .user#main #notice>.midd{margin-top:1em;}
}

/* 학사일정 */
.user#main #list-icon>.head>strong{font-family: 'Poppins', sans-serif; font-size:2.6em; color:#A5E27C;}
.user#main #list-icon>.midd{margin-top:1.4em;}
.user#main #list-icon>.midd > ul:after{content:""; display:block; clear:both;}
.user#main #list-icon>.midd > ul > li{
    float:left; width:10em; height:10em; margin-right:1.7em; text-align:center;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
}
.user#main #list-icon>.midd > ul > li:nth-child(n+9){margin-top:1.5em;}
.user#main #list-icon>.midd > ul > li:nth-child(8n+8){margin-right:0;}
.user#main #list-icon>.midd > ul > li > a{
    display:table; table-layout:fixed; width:100%; height:100%; background-color:#071837;
    -webkit-border-radius:50%;
    border-radius:50%;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #list-icon>.midd > ul > li > a > span{display:table-cell; vertical-align:middle; text-align:center; font-size:1.4em; color:#fff;}
.user#main #list-icon>.midd > ul > li > a > span:before{content:""; display:block; width:2.64em; height:2.64em; margin:0 auto 0.5em; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user#main #list-icon>.midd > ul > li:nth-child(1) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_1.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(2) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_2.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(3) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_3.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(4) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_4.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(5) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_5.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(6) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_6.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(7) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_7.svg);}
.user#main #list-icon>.midd > ul > li:nth-child(8) > a > span:before{background-image:url(../../../images/site/eee/main/icon_list_8.svg);}

.user#main #list-icon>.midd > ul > li > a:hover{
    -webkit-transform:translateY(-1em);
    transform:translateY(-1em);
}
@media screen and (max-width: 1024px) {
    .user#main #list-icon>.midd > ul > li{width:calc((100% - 1px) / 4); height:5.6em; margin-right:0;}
    .user#main #list-icon>.midd > ul > li:nth-child(4n+1){clear:both;}
    .user#main #list-icon>.midd > ul > li:nth-child(n+5){margin-top:1.8em;}
    .user#main #list-icon>.midd > ul > li > a{background-color:transparent;}
    .user#main #list-icon>.midd > ul > li > a > span{position:relative; padding-left:4.2941em; text-align:left; font-size:1.7em;}
    .user#main #list-icon>.midd > ul > li > a > span:before{position:absolute; left:0; top:0; z-index:20; width:3.2941em; height:3.2941em; margin-bottom:0; background-size:50% auto;}
    .user#main #list-icon>.midd > ul > li > a > span:after{
        content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:3.2941em; height:3.2941em; background-color:#071837;
        -webkit-border-radius:50%;
        border-radius:50%;
    }
}
@media screen and (max-width: 700px) {
    .user#main #list-icon>.midd > ul > li{width:calc((100% - 1px) / 3);}
    .user#main #list-icon>.midd > ul > li:nth-child(4n+1){clear:none;}
    .user#main #list-icon>.midd > ul > li:nth-child(3n+1){clear:both;}
    .user#main #list-icon>.midd > ul > li:nth-child(n+4){margin-top:1.8em;}
}
@media screen and (max-width: 600px) {
    .user#main #list-icon>.head>strong{font-size:2.2em;}
}
@media screen and (max-width: 500px) {
    .user#main #list-icon>.midd > ul > li{width:calc((100% - 1px) / 2);}
    .user#main #list-icon>.midd > ul > li:nth-child(3n+1){clear:none;}
    .user#main #list-icon>.midd > ul > li:nth-child(2n+1){clear:both;}
    .user#main #list-icon>.midd > ul > li:nth-child(n+3){margin-top:1.3em;}
}
@media screen and (max-width: 360px) {
    .user#main #list-icon>.midd{font-size:0.8em;}
}