@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;}
.user#main section#sec_2{position:relative; padding:7em 0 12.6em 0;}
.user#main section#sec_2:before,
.user#main section#sec_2:after{content:""; display:block; position:absolute; z-index:-1; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user#main section#sec_2:before{left:0; bottom:0; width:63.5em; height:59.2em; background-image:url(../../../images/site/dronebot/main/movie_bg_1.svg);}
.user#main section#sec_2:after{right:0; top:0; width:67.4em; height:41.9em; background-image:url(../../../images/site/dronebot/main/movie_bg_2.svg);}
.user#main section#sec_5{padding-bottom:7em;}
.user#main section#sec_5>.layout:after{content:""; display:block; clear:both;}


/* visual */
.user#main #visual{position:relative; width:calc(100% - 6em); height:65em; margin:0 auto; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #visual > .layout{display:table; table-layout:fixed; width:100%; height:100%;}
.user#main #visual > .layout > .head{display:table-cell; vertical-align:middle;}
.user#main #visual > .layout > .head > span,
.user#main #visual > .layout > .head > strong{display:block; line-height:1.2; font-size:6em; color:#fff;}
.user#main #visual > .layout > .head > strong{font-weight:600;}
.user#main #visual > .layout > .head > strong + span{line-height:1.6; font-weight:300; font-size:2.8em; color:#fff;}
.user#main #visual > .layout > .head > strong + span:after{content:""; display:block; width:25.42em; height:3.6em; background-image:url(../../../images/site/dronebot/main/visual_text.svg); background-repeat:no-repeat; background-position:bottom left; background-size:contain;}

@media screen and (max-width: 1024px) {
    .user#main #visual{width:100%; height:35em;}
    .user#main #visual>.layout>.head{font-size:0.55em;}
}
@media screen and (max-width: 600px) {
    .user#main #visual{width:100%; height:30em;}
    .user#main #visual>.layout>.head{font-size:0.45em;}
}


/* 홍보동영상 */
.user#main #movie>.head{margin-bottom:3em; text-align:center;}
.user#main #movie>.head>strong{font-size:3em; color:#222;}
.user#main #movie>.midd #youtube{position:relative; max-width:116.2em; padding-top:39%; margin:0 auto;}
.user#main #movie>.midd #youtube>iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
@media screen and (max-width: 1300px) {
    .user#main section#sec_2:before{display:none;}
}
@media screen and (max-width: 1024px) {
    .user#main section#sec_2{padding:4em 0 6em 0;}
    .user#main section#sec_2:before, 
    .user#main section#sec_2:after{display:none;}
    .user#main #movie>.head{margin-bottom:1.5em;}
    .user#main #movie>.head>strong{font-size:2.4em;}
    .user#main #movie>.midd #youtube{padding-top:59.2%;}
}

/* 학과안내 */
.user#main #info{background-image:url(../../../images/site/dronebot/main/type_3_info_bg.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #info>.layout>.head{
    position:absolute; left:2em; bottom:0; width:32.8em; height:calc(100% + 5em); padding:6em 5em;
    background:#139E84;
    background: linear-gradient(-217.59deg, #13C4A3 3.85%, #139E84 94.7%);
}
.user#main #info>.layout>.head:after{content:""; display:block; position:absolute; right:0; bottom:0; width:16.7em; height:15.2em; background-image:url(../../../images/site/dronebot/main/type_3_ingo_simbol.svg); background-repeat:no-repeat; background-position:right bottom; background-size:contain;}
.user#main #info>.layout>.head>strong,
.user#main #info>.layout>.head>span{display:block;}
.user#main #info>.layout>.head>strong{font-size:3em; color:#fff;}
.user#main #info>.layout>.head>span{margin-top:0.5em; font-size:2em; color:rgba(255,255,255,0.6);}
.user#main #info>.layout>.midd{padding:4.2em 0; margin-left:34.8em;}
.user#main #info>.layout>.midd>ul:after{content:""; display:block; clear:both;}
.user#main #info>.layout>.midd>ul>li{float:left; width:calc((100% - 1px - 9em) / 3); margin-left:3em;}
.user#main #info>.layout>.midd>ul>li>a{
    display:table; table-layout:fixed; width:100%; height:21em; border:1px solid #fff;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.user#main #info>.layout>.midd>ul>li>a>span{display:table-cell; vertical-align:middle; text-align:center; font-size:2.4em; color:#fff;}
.user#main #info>.layout>.midd>ul>li>a>span:before{content:""; display:block; width:2.08em; height:2.08em; margin:0 auto 0.5em; background-repeat:no-repeat; background-position:center center; background-size: contain;}
.user#main #info>.layout>.midd>ul>li:nth-child(1)>a>span:before{background-image:url(../../../images/site/dronebot/main/type_3_info_simbol_1.svg);}
.user#main #info>.layout>.midd>ul>li:nth-child(2)>a>span:before{background-image:url(../../../images/site/dronebot/main/type_3_info_simbol_2.svg);}
.user#main #info>.layout>.midd>ul>li:nth-child(3)>a>span:before{background-image:url(../../../images/site/dronebot/main/type_3_info_simbol_3.svg);}
.user#main #info>.layout>.midd>ul>li>a:hover{
    -webkit-transform:translateY(-1em);
    transform:translateY(-1em);
}
@media screen and (max-width: 1024px) {
    .user#main #info>.layout>.head,
    .user#main #info>.layout>.midd{font-size:0.7em;}
    .user#main #info>.layout>.head{height:calc(100% + 2em);}
    .user#main #info>.layout>.midd{margin-left:31.8em;}
    .user#main #info>.layout>.midd>ul>li>a{height:26em;}
}
@media screen and (max-width: 700px) {
    .user#main #info>.layout>.head{display:none;}
    .user#main #info>.layout>.midd{margin-left:0;}
    .user#main #info>.layout>.midd>ul>li{width:calc((100% - 1px - 4em) / 3); margin-left:2em;}
    .user#main #info>.layout>.midd>ul>li:first-child{margin-left:0;}
}
@media screen and (max-width: 500px) {
    .user#main #info>.layout>.head,
    .user#main #info>.layout>.midd{font-size:0.6em;}
    .user#main #info>.layout>.midd{padding:3.2em 0;}
}
@media screen and (max-width: 400px) {
    .user#main #info>.layout>.midd>ul>li>a{height:22em;}
}


/* 학사일정 */
.user#main #list-icon{padding:5em 5em;}
.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 - 7em) / 8); margin-right:1em; text-align:center;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
}
.user#main #list-icon > ul > li:nth-child(n+9){margin-top:1.5em;}
.user#main #list-icon > ul > li:nth-child(8n+8){margin-right:0;}
.user#main #list-icon > ul > li > a{
    display:table; table-layout:fixed; width:100%; height:14.8em;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
}
.user#main #list-icon > ul > li > a > span{
    display:table-cell; vertical-align:middle; text-align:center; font-size:2em; color:#666;
    -webkit-transition:transform 0.2s linear;
    transition:transform 0.2s linear;
}
.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/dronebot/main/icon_list_1_p.svg);}
.user#main #list-icon > ul > li:nth-child(2) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_2_p.svg);}
.user#main #list-icon > ul > li:nth-child(3) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_3_p.svg);}
.user#main #list-icon > ul > li:nth-child(4) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_4_p.svg);}
.user#main #list-icon > ul > li:nth-child(5) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_5_p.svg);}
.user#main #list-icon > ul > li:nth-child(6) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_6_p.svg);}
.user#main #list-icon > ul > li:nth-child(7) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_7_p.svg);}
.user#main #list-icon > ul > li:nth-child(8) > a > span:before{background-image:url(../../../images/site/dronebot/main/icon_list_8_p.svg);}

.user#main #list-icon > ul > li > a:hover > span{
    -webkit-transform:translateY(-1em);
    transform:translateY(-1em);
}
@media screen and (max-width: 1024px) {
    .user#main #list-icon{padding:2em 0;}
}
@media screen and (max-width: 900px) {
    .user#main #list-icon>ul{font-size:0.8em;}
}
@media screen and (max-width: 700px) {
    .user#main #list-icon>ul>li{width:calc((100% - 1px - 3em) / 4); margin-left:1em; margin-right:0;}
    .user#main #list-icon>ul>li:nth-child(4n+1){clear:both; margin-left:0;}
}
@media screen and (max-width: 400px) {
    .user#main #list-icon>ul{font-size:0.7em;}
}


.user#main #notice{float:left; position:relative; width:calc((100% - 4em) * 0.4); margin-right:4em;}
.user#main #notice>.head>strong{font-size:3em; color:#222;}
.user#main #notice>.midd{margin-top:3em;}
.user#main #notice>.midd>ul>li:nth-child(n+2){margin-top:1.5em;}
.user#main #notice>.midd>ul>li>a{display:block; position:relative; padding-left:1.2em; padding-right:8em;}
.user#main #notice>.midd>ul>li>a:before{
    content:""; display:block; position:absolute; left:0; top:0.8em; z-index:100; width:0.5em; height:0.5em; background-color:#C4C4C4;
    -webkit-border-radius:50%;
    border-radius:50%;
}
.user#main #notice>.midd>ul>li>a>span,
.user#main #notice>.midd>ul>li>a>strong{display:block; position:relative;}
.user#main #notice>.midd>ul>li>a>.t{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block; font-weight:normal; font-size:1.6em; color:#444;}
.user#main #notice>.midd>ul>li>a>.d{position:absolute; right:0; bottom:0; font-weight:300; font-size:1.5em; color:#666;}
.user#main #notice .more{display:block; position:absolute; right:0; top:0; z-index:50; width:2.4em; height:2.4em;}
.user#main #notice .more>a{position:relative; display:block; width:100%; height:100%;}
.user#main #notice .more>a:before{
    content:""; display:block; position:absolute; left:0; top:0.8em; width:100%; height:100%; background-image:url(../../../images/site/dronebot/main/type_3_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>span{opacity:0; position:absolute; left:0; top:0;}
.user#main #notice .more>a:hover:before{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #notice>.midd>ul>li>a:hover>.t{text-decoration:underline;}


.user#main #photo{float:left; position:relative; width:calc((100% - 4em) * 0.6);}
.user#main #photo>.head>strong{font-size:3em; color:#222;}
.user#main #photo>.midd{margin-top:3em;}
.user#main #photo>.midd>ul:after{content:""; display:block; clear:both;}
.user#main #photo>.midd>ul>li{float:left; width:calc((100% - 1px - 6em) / 3); margin-left:3em;}
.user#main #photo>.midd>ul>li:nth-child(3n+1){clear:both; margin-left:0;}
.user#main #photo>.midd>ul>li>a>.p,
.user#main #photo>.midd>ul>li>a>.t{display:block;}
.user#main #photo>.midd>ul>li>a>.p{position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.user#main #photo>.midd>ul>li>a>.p>img{display:block; width:100%;}
.user#main #photo>.midd>ul>li>a>.t{margin-top:1em; font-weight:normal; font-size:1.6em; color:#444;}
.user#main #photo .more{display:block; position:absolute; right:0; top:0; z-index:50; width:2.4em; height:2.4em;}
.user#main #photo .more>a{position:relative; display:block; width:100%; height:100%;}
.user#main #photo .more>a:before{
    content:""; display:block; position:absolute; left:0; top:0.8em; width:100%; height:100%; background-image:url(../../../images/site/dronebot/main/type_3_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 #photo .more>a>span{opacity:0; position:absolute; left:0; top:0;}
.user#main #photo .more>a:hover:before{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.user#main #photo>.midd>ul>li>a:hover>.t{text-decoration:underline;}

@media screen and (max-width: 1024px) {
    .user#main #notice>.head>strong,
    .user#main #photo>.head>strong{font-size:2.4em;}
    .user#main #notice>.midd,
    .user#main #photo>.midd{margin-top:1.5em;}
    .user#main #notice .more,
    .user#main #photo .more{width:1.8em; height:1.8em;}
    .user#main #notice{width:calc((100% - 4em - 25.7em - 1px));}
    .user#main #photo{width:25.7em;}
    .user#main #photo>.midd>ul>li{width:100%; margin:0;}
    .user#main #photo>.midd>ul>li:nth-child(n+2){display:none;}
}
@media screen and (max-width: 600px) {
    .user#main #notice,
    .user#main #photo{width:100%; margin:0;}
    .user#main #photo{margin-top:3em;}
}