@charset "utf-8";

/*메인 페이지 스타일*/
.main-wrapper{width: 100%;margin: 0 auto;padding: 0 var(--container-padding)}
.main-top-section{width: 100%;max-width:1800px;height: 700px;overflow: hidden;position: relative;border-radius: 30px;margin: 0 auto;background-image: url("../images/edu-top-bg.png");background-size: auto 100%;background-position: center;background-repeat: no-repeat;display: flex;justify-content: center;align-items: flex-end;}
.main-top-section .text-box{width: 100%;text-align: center;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.main-top-section .text-box .title{font-size: 70px;font-weight: 800;color:var(--white);line-height: 1.142;letter-spacing: -0.03em;}
.main-top-section .text-box .button-box{display: flex;margin-top: 44px;column-gap: 18px;justify-content: center;}
.main-top-section .text-box .button-box .button{display: flex;align-items: center;height: 60px;border-radius: 50px;font-family: var(--NanumSquareNeo);font-size: 22px;letter-spacing: -0.03em;font-weight: 700;color:var(--white);padding:0 30px;}
.main-top-section .text-box .button-box .button.edu{background-color: var(--black1);}
.main-top-section .text-box .button-box .button.edu::after{content:'';background-image: url("../images/icons/icon-edu.svg");background-repeat: no-repeat;background-size: 100% auto;width: 28px;height: 28px;display: block;margin-left: 10px;}
.main-top-section .text-box .button-box .button.print{background-color: var(--orange1);}
.main-top-section .text-box .button-box .button.print::after{content:'';background-image: url("../images/icons/icon-print.svg");background-repeat: no-repeat;background-size: 100% auto;width: 28px;height: 28px;display: block;margin-left: 10px;}
.main-top-section .edu-title{width: 100%;max-width: calc(var(--content-width) + (var(--container-padding)* 2));padding: 0 var(--container-padding)  0;}
.main-top-section .edu-title h2 {background-color: var(--white);color:var(--button_on);width: 100%;display: flex;align-items: center;border-radius: 30px 30px 0 0;padding: 30px 40px 0}
.main-top-section .edu-title h2::after{content:'';background-image: url("../images/icons/icon-edu-title.svg");background-repeat: no-repeat;background-size: 100% auto;width: 60px;height: 50px;display: block;margin-left: 24px;}

.edu-section{}
.edu-section .edu-list{display: flex;flex-wrap: wrap;gap: 40px 30px;padding:40px;background-image: url("../images/edu-list-bg.svg");background-repeat: no-repeat;background-position: bottom right;}
.edu-section .edu-list .edu-item{width: calc((100% - 60px) / 3);}
.edu-section .edu-list .edu-item .img-box{width: 100%;height: auto;aspect-ratio: 381 / 224;border-radius: 30px;box-shadow: var(--shadow1);overflow: hidden;transition-duration: 0.3s;}
.edu-section .edu-list .edu-item .img-box > img{width: 100%;height: 100%;object-fit: cover;}
.edu-section .edu-list .edu-item .text-box{color:var(--black1);margin-top: 20px;display: flex;flex-direction: column;row-gap: 10px;}
.edu-section .edu-list .edu-item .text-box .subject {color:var(--button_on);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.edu-section .edu-list .edu-item .text-box .summary {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}


.notice-box{width: 100%;background-color: var(--green3);border-radius: 30px;padding: 30px;position: relative;margin-top: 80px;}
.notice-box::before{content:'';display: block;position: absolute;background-image: url("../images/notice-deco003.svg");background-size:100% auto;width: 125px;height: auto;aspect-ratio:125 / 100;top:-20px;left: 30px;}
.notice-box::after{content:'';display: block;position: absolute;;background-image: url("../images/notice-deco002.svg");background-size:100% auto;width: 96px;height: auto;aspect-ratio:96 / 57;bottom:13px;right: 12px;}
.notice-box .title-box{text-align: center}
.notice-box .list-box{display: flex;column-gap: 10px;margin-top: 20px;}
.notice-box .list-box .item-box{width: calc((100% - 10px) / 2);background-color: var(--white);border-radius: 20px;padding:12px 30px;transition-duration: 0.3s;transition-property: background-color;}
.notice-box .list-box .item-box .text-box{}
.notice-box .list-box .item-box .text-box::before{content:'';display: block;background-image: url("../images/icons/icon-notice-red.svg");background-size:cover;margin: 0 auto 20px;width: 28px;height: auto;aspect-ratio: 29 / 24;}
.notice-box .list-box .item-box .text-box .subject{overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: var(--black1);text-align: center;}
.notice-box .list-box .item-box .text-box .info{display: flex;justify-content: center;margin-top: 20px;color:var(--black2)}
.notice-box .list-box .item-box .text-box .info > li{font-size: 18px;letter-spacing: -0.03em;display: flex;align-items: center;}
.notice-box .list-box .item-box .text-box .info > li.icon-view::before{content:'';background-image: url("../images/icons/icon-view.svg");background-size: 100% auto;width: 25px;height: 25px;display: inline-block;transform: translateY(1px);}
.notice-box .list-box .item-box .text-box .info > li:after{content:'|';margin: 0 0.5em;color:var(--line1)}
.notice-box .list-box .item-box .text-box .info > li:last-of-type:after{content:none;}


.banner-box{display: flex;column-gap: 30px;margin-top: 30px;}
.banner-box .banner-item{display: flex;align-items:center;width: calc((100% - 30px) / 2);height:120px;background-color: var(--orange3);border-radius: 30px;padding:17px 40px}
.banner-box .banner-item .text-box {display: flex;align-items:center;column-gap: 30px;row-gap: 8px;}
.banner-box .banner-item .text-box h2{flex: none;}
.banner-box .banner-item .text-box p {word-break: keep-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.banner-box .banner-item .banner-wrapper{width:100%;display: flex;align-items:center;justify-content: space-between;column-gap: 30px;}
.banner-box .banner-item img{height: auto;display: block;}
.banner-box .banner-item:nth-of-type(1) img{width: 74px;}
.banner-box .banner-item:nth-of-type(2) img{width: 80px;}

@media all and (max-width:15200px) {
    .banner-box .banner-item .text-box{flex-direction: column;
    align-items: flex-start;
    }
}

@media all and (max-width:1200px) {
    .edu-section .edu-list .edu-item {width: calc((100% - 30px) / 2);}
}

@media all and (max-width:1000px) {
    .main-top-section .m-view{display: block;}

    .notice-box .list-box{flex-direction: column;row-gap: 10px;}
    .notice-box .list-box .item-box {width: 100%;padding: 12px 16px;}

    .banner-box{flex-direction: column;row-gap: 16px}
    .banner-box .banner-item{width: 100%;}
}


@media all and (max-width:750px) {
    .main-wrapper{padding:0;}
    .main-top-section{width: 100%;height: auto;aspect-ratio: 375 / 300;border-radius: 0;}
    .main-top-section .text-box{top: calc(50% - 34px)}
    .main-top-section .text-box .title {font-size: 32px;line-height: 1.25;}
    .main-top-section .text-box .button-box {flex-direction: column;margin-top: 16px;row-gap: 16px;padding:0 38px;}
    .main-top-section .text-box .button-box .button {justify-content: space-between;height: 48px;width: 300px;font-size: 18px;margin: 0 auto;}
    .main-top-section .edu-title{padding:0;}
    .main-top-section .edu-title h2 {display: flex;justify-content:center;}
    .main-top-section .edu-title h2::after{width: 41px;height: 34px;margin-left: 16px;}

    .edu-section .edu-list {gap: 16px;padding: 40px 0;background-image: none;}
    .edu-section .edu-list .edu-item {width: calc((100% - 16px) / 2);}
    .edu-section .edu-list .edu-item .text-box {margin-top: 16px;row-gap: 8px;}


    .notice-box {padding: 20px var(--container-padding);margin-top: 0}
    .notice-box::before {width: 82px;top: -5px;left: 15px;}
    .notice-box::after {content:none;}
    .notice-box .list-box .item-box {padding: 12px 16px;}
    .notice-box .list-box .item-box .text-box::before {margin: 0 auto 8px;width: 20px;}
    .notice-box .list-box .item-box .text-box .info {margin-top: 8px;}
    .notice-box .list-box .item-box .text-box .info > li {font-size: 14px;}
    .notice-box .list-box .item-box .text-box .info > li.icon-view::before {background-image: url(../images/icons/icon-view.svg);width: 20px;height: 20px;transform: translateY(2px);}

}

@media all and (max-width:520px) {
    .main-top-section{width: 100%;height: auto;aspect-ratio: 375 / 440;border-radius: 0;}
    .edu-section .edu-list .edu-item {width: 100%;}
}

/*호버 이벤트가 가능할때만 적용*/
@media (hover: hover) and (pointer: fine) and (min-width:750px){

    .edu-section .edu-list .edu-item:hover .img-box{transform: translateY(-5px);}

    .notice-box .list-box .item-box:hover{background-color: var(--green1);}
    .notice-box .list-box .item-box:hover .subject{color:var(--white);}
    .notice-box .list-box .item-box:hover .text-box .info > li.icon-view::before{content:'';background-image: url("../images/icons/icon-view-hover.svg");}
    .notice-box .list-box .item-box:hover .text-box .info > li{color:var(--white);}

}