@charset "utf-8";

/*
본문
*/
.main{position:relative; width:100%; box-sizing:border-box;}
.main section{clear:both; position:relative; overflow:hidden; min-height:320px; padding:40px 0;}
.main section .container{width:1240px; margin:0 auto;}

/* 영상 */
.main .sec1{background:url("../images/main/main-bg.jpg");}
.main .sec2{background:#fff;}
.main .sec3{background:#ededed;}
.main .sec4{background:#ffbca1;}
.main .sec5{background:#effff1;}
.main .sec6{background:#fff;}
.main .sec7{background:#c1ebff;}

.main .sec1 .container{display:flex; justify-content:space-between; align-items:center; overflow:hidden; position:relative; padding:30px 0;}

.main .sec1 .slogan{width:350px;}
.main .sec1 .slogan p{font-size:38px; color:#fff; font-weight:bold;}
.main .sec1 .edu_go{margin-top:50px;}
.main .sec1 .edu_go a{display:block; width:85%; padding:15px 0px; text-align:center; color:#fff; border:1px solid #fff;}

.main .sec1 .video{width:800px; height:100%; overflow:hidden; display:flex; align-items:center; position:relative;}
.main .sec1 .video video{width:100%; object-fit:cover;}
.main .sec1 .video > div{display:none;}
.main .sec1 .video > div.on{display:block;}
.main .sec1 .video iframe{width:800px; height:450px; object-fit:cover;}
/* .main .sec1 .video .video_ctrl.on{display:block;}
.main .sec1 .video .video_ctrl{display:none; position:absolute; bottom:2.438em; left:2.438em; width:54px; height:54px; border-radius:100%; background:rgba(255, 255, 255, 0.2); border:0;} */
.main .sec1 .video .video_ctrl{position:absolute; bottom:1em; right:1em;}
.main .sec1 .video .video_ctrl{float:left;}
.main .sec1 .video .video_ctrl li{float:left; margin:5px;}
.main .sec1 .video .video_ctrl a{display:flex; align-items:center; justify-content:center; width:30px; height:30px; font-weight:bold; text-align:center; border-radius:100%; background:rgba(255, 255, 255, 0.8); border:0;}
.main .sec1 .video .video_ctrl a.on{color:#fff; background:rgba(0, 0, 0, 0.8);}


/* 게시판 */
.main .sec2 .container{display:flex; flex-wrap:nowrap; justify-content:space-between; overflow:hidden; position:relative;}
.main .sec2 .board{position:relative; width:360px;}
.main .sec2 .board h2{padding:5px 0 5px 0; font-size:20px; font-weight:600; border-bottom:1px solid #ccc;}

.main .sec2 .board ul{margin-top:15px;}
.main .sec2 .board li{display:flex; justify-content:space-between; height:40px; line-height:28px; position:relative;}

.main .sec2 .board li a{display:block; width:94%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main .sec2 .board li a:before{content:""; display:inline-block; clear:both; width:4px; height:4px; margin:0 5px 4px 0; background:#0c4a96;}
.main .sec2 .board li a:hover{color:#999;}
.main .sec2 .board li .day{width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; color:#666;}
.main .sec2 .board li.more{position:absolute; top:5px; right:5px;}
.main .sec2 .board li.more a{width:100%;}
.main .sec2 .board li.more a:before{display:none;}

@media screen and (max-width: 1280px){
    .main section .container{width:100%; padding:0 20px;}
    .main .sec1 .slogan{width:30%;}
    .main .sec1 .slogan p{font-size:2rem;}
    .main .sec1 .video{width:60%;}
}
@media screen and (max-width: 1100px){
    .main .sec2 .container{flex-direction:column;}
    .main .sec2 .board{width:100%; margin-bottom:40px; padding:10px 20px; border:1px solid #ccc; border-radius:10px;}
    .main .sec2 .board.student{margin-bottom:0;}
    .main .sec2 .board li.more{top:4%; right:3%;}
}
@media screen and (max-width: 840px){
    .main .sec1 .container{flex-direction:column;}
    .main .sec1 .slogan{width:100%;}
    .main .sec1 .slogan p{text-align:center;}
    .main .sec1 .edu_go{margin-top:20px;}
    .main .sec1 .edu_go a{margin:0 auto;}
    .main .sec1 .video{width:85%; margin-top:30px;}
}