.bg-image{background-position: center;background-repeat: no-repeat;background-size: cover;}

body .swiper-button-next{margin-top:0;background-image: none;z-index:10;right: 20px;border: 1px solid #fff;border-radius: 200px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #fff;top: 50%;transform: translateY(-50%);transition:0.3s;}
body .swiper-button-prev{margin-top:0;background-image: none;z-index:10;left: 20px;border: 1px solid #fff;border-radius: 200px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #fff;top: 50%;transform: translateY(-50%);transition:0.3s;}
body .swiper-button-next:hover{color:#d81823;border-color:#d81823;}
body .swiper-button-prev:hover{color:#d81823;border-color:#d81823;}

body .swiper-pagination-bullet{width:10px;height:10px;margin:0 4px;opacity:.6;}
body .swiper-pagination-bullet-active{background: #000;}

.sec-title{display:flex;align-items:center;justify-content:space-between;}
.sec-title h4{color:#333;font-weight:800;}
.sec-title a{color:#0D0E0F;text-decoration: none;min-width:5.786rem;height:30px;font-size:14px;padding: 6px 12px;border: 1px solid #D4D6D6;border-radius: 20px;transition: all 0.25s ease;display: inline-flex;align-items: center;justify-content: center;position: relative;z-index: 100;}
.sec-title a:hover{background:#0D0E0F;color:#fff;}

.content-body{padding:0 1rem;}

@media (max-width:1200px) {
    .content-body{padding:0 0.75rem;}
}
@media (max-width:1024px) {
    .content-body{padding:0 0.625rem;}
}
@media (max-width:480px) {
    .sec-title a{min-width:5rem;font-size:13px;}
}

/***************** sec01 *****************/
#section1 {padding:0 !important; position: relative;width:100%;height:50rem;}

#sec01_sli{height:100%;width:100%;margin: 0 auto;overflow: inherit;}
#sec01_sli .image {position: relative;width: 100%;height: 0;padding-top: 37.0625%;display: block;}
#sec01_sli img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center center;}

#sec01_sli .text-box {width: 100%;text-align: left;position: absolute;z-index: 1;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;flex-flow: column;opacity: 0;transform: translateY(30px);}
#sec01_sli .text-box h1 {font-weight: 800;font-family: 'Paperlogy';color: #fff;}

#section1:has(.sec01_sli.sli_01.swiper-slide-active) .text-box {animation: fadeOutDown 0.6s ease forwards;}
#section1:has(.sec01_sli.sli_02.swiper-slide-active) .text-box {animation: fadeInUpDelay 1s ease-out 1s forwards;}
@keyframes fadeInUpDelay { 0% {opacity: 0;transform: translateY(30px);} 100% {opacity: 1;transform: translateY(0);} }
@keyframes fadeOutDown { 0% {opacity: 1;transform: translateY(0);} 100% {opacity: 0;transform: translateY(-20px);} }





#sec01_page{display:flex;align-items:center;}
body #sec01_sli .swiper-pagination-bullet {width:5px;height:5px;background: rgba(255,255,255,0.8);border-radius:0;position: relative;overflow: hidden;transition: 0.2s;}
body #sec01_sli .swiper-pagination-bullet-active {width:150px;height:3px;border-radius: 0;background: rgba(255,255,255,0.6);}
.swiper-progress {position: absolute;left: 0;top: 0;height: 100%;background:var(--primary);width: 0;}


@media (max-width: 1700px) {
    #section1 { height: 40rem; }
    #sec01_sli .image { height: 40rem; }
}

@media (max-width: 1024px) {
    #section1 { height: 35rem; }
    #sec01_sli .image { height: 35rem; }
}

@media (max-width: 768px) {
    #section1 { height: 30rem; }
    #sec01_sli .image { height: 30rem; }
}

@media (max-width: 480px) {
    #section1 { height: 25rem; }
    #sec01_sli .image { height: 25rem; }
}

/***************** sec02 *****************/

.sec02-contant-area{display:flex;}
.sec02-contant-area .con-lf{padding-right:70px;}
.sec02-contant-area .con-rt{width:100%;}

.main-calendar { text-align: center;}
.main-calendar .calendar-title { font-size: 24px; font-weight: bold; color: #333; }
.main-calendar .calendar-weekdays {display: flex;margin-bottom: 10px;width: 100%;gap: 10px;}
.main-calendar .weekday { width:100%; color:#7D7D7D; font-size: 14px; }
.main-calendar .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 20px; }
.main-calendar .day { width:50px; height:50px; margin: 0 auto;display: flex; align-items: center; justify-content: center; border-radius: 50%;border:1px solid var(--variant-dark); font-size:1rem; cursor:default; background-color: #fff; }
.main-calendar .day.prev-month, .main-calendar .day.next-month { background-color:var(--variant-dark); color: #999; pointer-events: none;}
.main-calendar .day.selected { background-color: #000; color: #fff; }
.main-calendar .day.highlighted { background-color: #fff; border: 2px solid #0066cc; color: #0066cc; font-weight: bold; }
.main-calendar .calendar-footer {border-top:1px solid #E2E2E2;padding-top:1.5rem; display: flex; align-items: center; margin-top:1.5rem; font-size: 14px; }
.main-calendar .calendar-footer ul{width: 100%;height: 100%;max-height: 65px;overflow-y: auto;padding-top: 2px;padding-bottom: 2px;}
.main-calendar .calendar-footer ul li{display:flex;align-items:center;margin-bottom: 5px;}
.main-calendar .calendar-footer ul li:last-child{margin-bottom:0;}
.main-calendar .calendar-date { font-weight: bold; margin-right: 10px; }
.main-calendar .calendar-info { color: #666; }


.notice-area ul {display: flex;width: 100%;flex-flow: column;gap: 20px;}
.notice-area ul li .card-body {transition:.4s ease-in-out;}
.notice-area ul li .content-body{display:flex;align-items:center;justify-content: space-between;}
.notice-area ul li .text-box h6{font-weight:600;}
.notice-area ul li .text-box p{color:var(--gray-400);}
.notice-area ul li .notice-arr{width:46px;height:46px;background:#fff;display:inline-flex;align-items:center;justify-content:center;border-radius:100px;transition:.4s ease-in-out;}
.notice-area ul li a i span{font-size:18px;transition:.4s ease-in-out;}
.notice-area ul li:hover .card-body  {box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.notice-area ul li:hover .notice-arr{background: #000;}
.notice-area ul li:hover i span{color:#fff;}


@media (max-width:1200px) {
    .sec02-contant-area .con-lf{padding-right:20px;}
}

@media (max-width:1024px) {
    .sec02-contant-area{flex-flow: column;}
    .sec02-contant-area .con-lf {padding-right:0;margin-bottom:40px;}

    .notice-area ul{gap:10px;}

    .main-calendar .calendar-title{font-size:20px;}
    .calendar-body{ max-width:600px;margin:0 auto;}
    .main-calendar .calendar-footer{margin-top:1.2rem;padding-top:1.2rem;}
}

@media (max-width:480px) {
    .main-calendar .day{width:38px;height:38px;font-size:14px;}
    .main-calendar.content-body {padding: 0;min-width: 304px;overflow-x: auto;}
    .main-calendar .calendar-footer{margin-top:1rem;padding-top:1rem;}

    .notice-area ul li .notice-arr{width:40px;height:40px;}
    .notice-area ul li a i span{font-size:1rem;}
}




/***************** sec03 *****************/
#section3{background:#F0F2F6;overflow: hidden;}
#section3 .container{overflow: visible;}

.program-list{display: grid;grid-template-columns: repeat(4, 1fr);gap:40px;width:100%;position: relative;z-index: 1;}
.program-list:before{content: '';width:136px;height:136px;position: absolute;left: -5%;bottom: -20%;background-image: url("../img/main/sec03-01.png");background-repeat: no-repeat;background-size: cover;background-position: center;z-index: -1;}
.program-list:after{content: '';width:488px;height:517px;position: absolute;right:-15%;bottom: 45%;background-image: url("../img/main/sec03-02.png");background-repeat: no-repeat;background-size: cover;background-position: center;z-index: -1;}

.program-item .program-content{display: block;background: #fff ;padding:2rem;border-radius:20px;overflow: hidden;transition: 0.4s ease;}
.program-item .program-content:hover{transform: translateY(-5px);box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);}
.program-item .program-content:hover .program-title{color:var(--primary);}

.program-item .program-title {font-weight: 700;color: #333;line-height: 1.4;transition: 0.4s ease;word-break: break-all;overflow: hidden;text-overflow: ellipsis;height: 65px;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.program-item .program-info {color:var(--variant);letter-spacing:-0.045rem;}
.program-item .program-info p{margin-bottom: 5px;}
.program-item .program-info p:last-child{margin-bottom:0;}


.program-item .apply-status{width:100%;color: white;border: none;border-radius: 30px;padding: 12px 20px;font-family:'Paperlogy';font-size:1rem;font-weight:600;display:flex;align-items:center;justify-content:center;}
.program-item.status-pending .apply-status{background:#E9F2FF;color: var(--primary);}
.program-item.status-active .apply-status{background: var(--primary);}
.program-item.status-closed .apply-status{color:#42526E;background:#F1F2F4;}

@media (max-width:1200px) {
    .program-list{gap: 20px;}
    .program-item .program-content{padding:1.8rem;}
    .program-item .program-title {height:58px;}
}


@media (max-width: 1024px) {
    .program-list{gap:10px;grid-template-columns: repeat(2, 1fr);}
    .program-item .program-title {height:30px;-webkit-line-clamp:1;}
    .program-item .program-content { padding: 1.5rem 1.2rem; }
}

@media (max-width: 768px) {
    .program-list{grid-template-columns: repeat(2, 1fr);}
    .program-item .program-content { padding: 1.2rem 1rem; }
}

@media (max-width:480px) {
    .program-list{grid-template-columns: repeat(1, 1fr);}
    .program-item .apply-status{font-size:14px;}
    .program-item .program-title {height:28px;}
}


/***************** sec04 *****************/
.support-content{display:flex;flex-flow:column;}


.support-area{display:flex;width:100%;gap:45px;}
.support-area .text-box span{color:#C8C9CC;text-transform: uppercase;display:block;margin-bottom:6px; }
.support-area .text-box h5{font-weight:800;color:#333;}
.support-area .text-box p{color:var(--variant);font-weight:300;padding-top:6px;}

.support-card {width: 100%;}
.support-content { position: relative; z-index: 2;overflow: visible !important;transition:.4s ease-in-out;}
.support-card:hover .support-content {box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.support-card:hover .arrow-button .ico{background:var(--primary);}


.arrow-button { position: absolute; right: 0; bottom: 0; width: 4.6875rem; height: 4.6875rem; border-radius: 2.5rem 0 0 0; background-color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.arrow-button:before { content: ""; position: absolute; left: -5rem; bottom: 0; width: 5rem; height: 5rem; overflow: hidden; border-radius: 50%; box-shadow: 2.5rem 2.5rem 0 0 #ffffff; }
.arrow-button:after { content: ""; position: absolute; right: 0; top: -5rem; width: 5rem; height: 5rem; overflow: hidden; border-radius: 50%; box-shadow: 2.5rem 2.5rem 0 0 #ffffff; }
.arrow-button .ico { position: absolute; right: 0; bottom: 0; z-index: 1; width: 3.75rem; height: 3.75rem; border-radius: 50%; background-color: #000; display: flex; align-items: center; justify-content: center; transition:.4s ease-in-out;}
.arrow-button span { color: #fff; position: relative; z-index: 1; }


@media (max-width: 1200px) {
    .support-area { gap:20px; }
    .support-area .text-box h5 { font-size: 1.2rem; }
    .arrow-button { width: 4.4rem; height: 4.4rem; }
    .arrow-button:before { left: -4.5rem; width: 4.5rem; height: 4.5rem; box-shadow: 2.25rem 2.25rem 0 0 #ffffff; }
    .arrow-button:after { top: -4.5rem; width: 4.5rem; height: 4.5rem; box-shadow: 2.25rem 2.25rem 0 0 #ffffff; }
    .arrow-button .ico { width: 3.4rem; height: 3.4rem; }
}

@media (max-width: 1024px) {
    .support-area { flex-direction: column; }
    .support-card { width: 100%; }
    .support-area .text-box span{font-size:14px;}

    .arrow-button {width: 4rem;height: 4rem;}
    .arrow-button:before { left: -3.5rem; width: 3.5rem; height: 3.5rem; box-shadow: 1.75rem 1.75rem 0 0 #ffffff; }
    .arrow-button:after { top: -3.5rem; width: 3.5rem; height: 3.5rem; box-shadow: 1.75rem 1.75rem 0 0 #ffffff; }
    .arrow-button .ico {width: 2.875rem;height: 2.875rem;}
    .arrow-button span{font-size:18px;}

}

@media (max-width: 768px) {
    .support-image img { max-width: 100px; }
    .support-area .text-box span { font-size: 13px; }

    .arrow-button { width: 3.5rem; height: 3.5rem; border-radius: 1.75rem 0 0 0; }
    .arrow-button:before { left: -3rem; width: 3rem; height: 3rem; box-shadow: 1.5rem 1.5rem 0 0 #ffffff; }
    .arrow-button:after { top: -3rem; width: 3rem; height: 3rem; box-shadow: 1.5rem 1.5rem 0 0 #ffffff; }
    .arrow-button .ico { width: 2.75rem; height: 2.75rem; }
    .arrow-button span { font-size: 16px; }
}

@media (max-width: 480px) {
    .support-image img { max-width: 80px; }
    .support-area .text-box span { font-size: 13px; }

    .arrow-button { width: 3rem; height: 3rem; border-radius: 1.5rem 0 0 0; }
    .arrow-button:before { left: -2.5rem; width: 2.5rem; height: 2.5rem; box-shadow: 1.25rem 1.25rem 0 0 #ffffff; }
    .arrow-button:after { top: -2.5rem; width: 2.5rem; height: 2.5rem; box-shadow: 1.25rem 1.25rem 0 0 #ffffff; }
    .arrow-button .ico { width: 2.5rem; height: 2.5rem; }
    .arrow-button span { font-size: 14px; }
}