@charset "utf-8";

.quick{
    top:131px;
}

main{
    position:relative;
}

main .top {
    padding:33px 0;
    background:#e7eef4;
}
.top .inner {display:flex; align-items:flex-start; gap:20px;}
.top .inner:after {display: none;}
.top .login_wrap {
    width:320px;
    height:410px;
    padding:37px 29px;
    float:left;
    background:#fff;
    border-radius:4px;
    box-shadow:0 20px 18px 0 #e0e7eb;
}

.top .login_wrap .area{
    margin:27px 0 14px;
    overflow:hidden;
    border:1px solid #ccc;
    border-bottom:0;
    border-radius:4px;
}

.top .login_wrap .area input{
    width:100%;
    height:41px;
    font-size:14px;
    border:0;
    border-bottom:1px solid #ccc;
}

.top .login_wrap .sbtn{
    margin:20px 0 54px;
    overflow:hidden;
}

.top .login_wrap .sbtn a{
    display:block;
    float:left;
    font-size:14px;
    color:#666;
    font-weight:300;
}

.top .login_wrap .sbtn a:first-child{
    margin-right:18px;
}

.top .login_wrap .sbtn a:first-child::after{
    content:'';
    width:1px;
    height:14px;
    display:inline-block;
    margin:-2px 0 0 17px;
    vertical-align:middle;
    background:#ccc;
}

.top .login_wrap .print::after{
    content:'';
    display:block;
    clear:both;
}

.top .login_wrap .print a{
    display:block;
    float:left;
    font-size:15px;
    line-height:29px;
    color:#666;
    font-weight:300;
}

.top .login_wrap .print a.btn01{
    margin-right:30px;
}

.top .login_wrap .print a::before{
    content:'';
    width:29px;
    height:29px;
    display:inline-block;
    margin:-2px 7px 0 0;
    vertical-align:inherit;
}

.top .login_wrap .print a.btn01::before{
    background:url('../images/main/icon_print01.jpg') no-repeat left top;
}
.top .login_wrap .print a.btn02::before{
    background:url('../images/main/icon_print02.jpg') no-repeat left top;
}

.top .box {
    width:420px;
    height:410px;
    float:left;
    margin-left:20px;
    padding:46px 30px 0;
    border-radius:4px;
    background:url('../images/main/bg_box.jpg') no-repeat left top;
    box-shadow:0 10px 13px 0 #e4ebf0;
}

.top .box.box01{
    border:1px solid #006abe;    
}
.top .box.box02{
    border:1px solid #028998;
}

.top .box h3{
    font-size:24px;
    color:#333;
    font-weight:600;
}

.top .box.box01 h3 span{
    color:#006abe;    
}
.top .box.box02 h3 span{
    color:#028998;
}

.top .box .txt{
    margin-top:16px;
    color:#666;
    font-size:16px;
    line-height:28px;
}

.top .box ul{
    margin-top:43px;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
    display:flex;
	justify-content:center;
}

.top .box ul li{
    width:110px;
    margin-left:15px;
    text-align:center;
}

.top .box ul li:first-child{
    margin-left:0;
}

.top .box ul li span{
    position:relative;
    display:block;
    padding-top:88px;
    margin-bottom:22px;
    font-size:18px;
    color:#111;
}

.top .box ul li span::before{
    content:'';
    display:block;
    width:80px;
    height:80px;
    position:absolute;
    top:0;
    left:14px;
    background:url('../images/main/icon_box01.jpg') no-repeat left top;
}

.top .box.box01 ul li.list02 span::before{
    background-position:-80px top;
}
.top .box.box01 ul li.list03 span::before{
    background-position:-160px top;
}
.top .box.box02 ul li span::before{
    background:url('../images/main/icon_box02.jpg') no-repeat left top;
}
.top .box.box02 ul li.list02 span::before{
    background-position:-80px top;
}
.top .box.box02 ul li.list03 span::before{
    background-position:-160px top;
}

.top .box ul li .btn{
    display:block;
    line-height:40px;
    text-align:center;
    color:#fff;
    font-size:14px;
    font-weight:350;
    border-radius:4px;
}

.top .box.box01 ul li .btn{
    background:#006abe;
}
.top .box.box02 ul li .btn{
    background:#028998;
}
.top .box_area {display:flex; flex-direction:column; gap:12px; width:500px;}
.top .box_area .box {margin:0; padding:26px 30px; width:100%; height:198px; background-color:#fff; border-spacing:100% 0;}
.top .box_area .box h3 {border-bottom:#ddd 1px solid; padding-bottom:20px; margin-bottom:20px; line-height:1;}
.top .box_area .box ul {margin-top:0;}
.top .box_area .box ul li {position:relative; display:flex; flex-direction:column; width:auto; height:auto; padding:0 0 0 90px; margin:0; width:50%;}
.top .box_area .box ul li::before {content:''; position:absolute; top:50%; left:0; display:block; width:80px; height:80px; background:no-repeat left top; transform:translateY(-50%);}
.top .box_area .box01 ul li::before {background-image:url('../images/main/icon_box01.jpg');}
.top .box_area .box02 ul li::before {background-image:url('../images/main/icon_box02.jpg');}
.top .box_area .box01 ul li.list02::before,
.top .box_area .box02 ul li.list02::before {background-position:-80px 0;}
.top .box_area .box ul li span {padding-top:0; margin-bottom:12px; font-size:17px; color:#333; font-weight:500; text-align:left;}
.top .box_area .box ul li span::before {display:none;}
.top .box_area .box ul li .btn {width:80px; height:34px; line-height:34px;}

.top .banner_area {position:relative; width:340px; height:408px; border-radius:4px; overflow:hidden;}
.top .main_slide .slick-list,
.top .main_slide .slick-track {min-width:100%;}
.top .main_slide .slick-slide > div {font-size:0;}
.top .main_slide .slick-slide img {width:100%; height:100%; object-fit:cover;}
.top .banner_area .btm {position: absolute; bottom:0; left:0; width:100%; display:flex; justify-content:space-between; padding:12px 24px; background:#000c;}
.top .banner_area .btm .tit {font-size:18px; color:#fff; font-weight:600; line-height:30px;}
.top .banner_area .btm .navi {display:flex; align-items:center;}
.top .banner_area .btm .navi.disabled {display:none;}
.top .banner_area .btm .navi .paging {display:flex; align-items:center; gap:6px; font-size:14px; color:#fff9; font-weight:500; line-height:22px;}
.top .banner_area .btm .navi .paging strong {color:#fff; font-weight:600;}
.top .banner_area .btm .navi .paging i {width:8px; height:1px; background:#fff9;}
.top .banner_area .btm .navi button {width:18px; aspect-ratio:1/1; font-size:0; background:no-repeat 50% 50%;}
.top .banner_area .btm .navi .arrow {background-image:url('../images/main/arrow_slide.svg');}
.top .banner_area .btm .navi .prev {order:1;}
.top .banner_area .btm .navi .next {order:3; transform:scaleX(-1);}
.top .banner_area .btm .navi .papl {order:2; display:none;}
.top .banner_area .btm .navi .papl.on {display:block;}
.top .banner_area .btm .navi .play {background-image:url('../images/main/icon_play.svg'); background-size:10px;}
.top .banner_area .btm .navi .pause {background-image:url('../images/main/icon_pause.svg');}

.board {
    width:1200px;
    height:271px;
    margin:0 auto;
    padding:38px 0 0;
    overflow:hidden;
}

.board .notice {
    float:left;
    width:685px;
    position:relative;
    margin-right:48px;
}

main .tit {
    font-size:22px;
    font-weight:600;
    color:#333;
}

.board .notice .list {
    overflow:hidden;
    margin-top:33px;
}

.board .notice .list a {
    display:block;
    float:left;
    width:323px;
    position:relative;
    background:url('../images/main/icon_more.jpg') no-repeat right bottom;
}

.board .notice .list a:last-child {
    float:right;
}

.board .notice .list a p{
    height:72px;
    overflow :hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    margin-bottom:25px;
    font-size:15px;
    color:#666;
    font-weight:300;
    line-height:26px;
}

.board .notice .list a .date{
    font-size:15px;
    color:#111;
    font-family:'Roboto';
}

.board .notice .more{
    position:absolute;
    padding-right:38px;
    right:0;
    top:0;
    font-size:14px;
    color:#999;
    font-weight:300;
}

.board .notice .more::after{
    content:'';
    width:28px;
    height:25px;
    position:absolute;
    right:0;
    top:-3px;
    background:url('../images/main/icon_link.jpg') no-repeat left top;
}

.board .tab_brd {
    width:466px;
    float:right;
}

.board .tab_brd .tabs .tit{
    margin-right:15px;
    padding-bottom:1px;
    position:relative;
    color:#ccc;
}

.board .tab_brd .tabs .tit.active{
    color:#333;
}

.board .tab_brd .tabs .tit.active::before{
    content:'';
    width:100%;
    height:1px;
    position:absolute;
    left:0;
    bottom:0;
    background:#333;
}

.board .tab_brd .brd{
    margin-top:15px;
}

.board .tab_brd .brd li{
    position:relative;
}

.board .tab_brd .brd li::after{
    content:'';
    width:100%;
    height:1px;
    position:absolute;
    left:0;
    bottom:0;
    background:url('../images/main/line.gif') repeat-x left top;
}

.board .tab_brd .brd li:last-child::after{
    display:none;
}

.board .tab_brd .brd li a{
    padding-right:120px;
    position:relative;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:300;
    line-height:52px;
    font-size:15px;
    color:#666;
}

.board .tab_brd .brd li a .date{
    position:absolute;
    right:0;
    color:#111;
    font-family:'Roboto';
    font-weight:300;
}

.board .tab_brd .tab_content {
    position:relative;
}
.board .tab_brd .tab_content .more{
    position:absolute;
    padding-right:38px;
    right:0;
    top:-44px;
    font-size:14px;
    color:#999;
    font-weight:300;
}

.board .tab_brd .tab_content .more::after{
    content:'';
    width:28px;
    height:25px;
    position:absolute;
    right:0;
    top:-3px;
    background:url('../images/main/icon_link.jpg') no-repeat left top;
}


/*241203 교육문의가추가*/
.board.three { display:flex; gap:30px; height:auto; padding:38px 0;}
.board.three .contact {padding:20px 30px 20px 20px; background:#f5f5f5; }
.board.three .contact .time { padding-top:33px;}
.board.three .contact .time li { color:#333; font-size:13px;}
.board.three .contact .time li:nth-child(1){ font-size:16px; margin-bottom:5px;}	
.board.three .contact .time em { color:#666; font-style:inherit;}
.board.three .contact .time span { font-size:13px; color:#666;}
.board.three .contact .num{font-size:16px; margin-top:18px; display:block;}

.board.three .notice { width:calc((100% - 38%) - 260px); float:inherit; margin-right:0; margin-top:20px;}
.board.three .notice .more { top:8px;}
.board.three .notice .list { display:flex; gap:15px;}
.board.three .notice .list a { width:50%; float:inherit; background-size:40px;}
.board.three .tab_brd { width:38%; float:inherit; margin-top:20px;}

.loginAfter{
    width:262px;
    height:135px;
    padding:15px 15px;
    background:#F1F9FC;
    border-radius:4px;
	display:table-cell;
    vertical-align:middle;
}

.loginAfter a:visited {
    text-decoration:none;
	color:#666;
}