@media screen and (max-width: 768px) {
    h2 {font-size: 32px !important;}
    p {font-size: 16px !important;}
}



.program_Introduction { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;  padding-bottom: 100px}
.program_Introduction .swiper { width: 100%; max-width: 1600px; height: 60vh; position: relative; }
.program_Introduction .swiper-slide { display: flex; justify-content: center; align-items: center; }
.program_Introduction .content-wrapper { display: flex; width: 90%; max-width: 1600px; margin: 0 auto; }
.program_Introduction .typography-content {  width: 50%; padding-right: 20px;  display: flex;flex-direction: column;justify-content: center;}
.program_Introduction .image-content { width: 50%; }
.program_Introduction .image-content img { width: 100%; height: auto; max-width: 100%; }
.program_Introduction h3 { font-size: 20px; margin-bottom: 0.5em; color: #333; font-weight: 500 }
.program_Introduction h2 { font-size: 50px; margin-bottom: 0.5em; letter-spacing: -1px }
.program_Introduction p { font-size: 20px; color: #555; font-weight: 400 }
.program_Introduction .swiper-controls {  position: absolute; bottom: 0px; right: 20px; display: flex;  align-items: center; background-color: rgba(0,0,0,0.5); padding: 5px 10px;  border-radius: 20px;  z-index: 9}
.program_Introduction .swiper-pagination { position: static; width: auto; margin: 0 10px; color: #fff; font-size: 16px; }
.program_Introduction .swiper-button-next, 
.program_Introduction .swiper-button-prev {  position: static;  width: 30px;   height: 30px;  margin: 0;  color: #fff; display: flex; align-items: center; justify-content: center; }
.program_Introduction .swiper-button-next:after, 
.program_Introduction .swiper-button-prev:after { 
    content: none; 
}

@media (max-width: 1024px) {
    .program_Introduction .swiper { 
        height: auto; 
    }
    .program_Introduction .content-wrapper {
        flex-direction: column; 
    }
    .program_Introduction .typography-content,
    .program_Introduction .image-content { 
        width: 100%; 
        padding-right: 0;
    }
    .program_Introduction .typography-content {
        text-align: center;
        margin-bottom: 20px;
    }
    .program_Introduction h2 {
        font-size: 30px;
    }
    .program_Introduction p { 
        font-size: 16px; 
    }
}

@media (max-width: 768px) {
    .program_Introduction h3 { 
        font-size: 18px; 
    }
    .program_Introduction h2 {
        font-size: 26px; 
    }
    .program_Introduction p {
        font-size: 14px; 
    }
    .program_Introduction .swiper-controls { 
        bottom: 10px; 
        right: 10px; 
    }
}





.plugin {  width: 100%; display: flex; flex-direction: column; align-items: center; background-color: #0f2040;}
.plugin .plugin_title { width: 100%; max-width: 1600px; padding: 150px 20px 0 20px; box-sizing: border-box;}
.plugin .plugin_title h2 {  font-size: 50px; font-weight: bold; color: #fff;letter-spacing: -1px;text-align: center; margin: 0;}
.plugin .swiper { width: 100%; max-width: 1600px;  position: relative; padding: 100px 0 }
.plugin .swiper-slide { display: flex; justify-content: center; align-items: center; }
.plugin .content-wrapper { display: flex; width: 90%; max-width: 1600px; margin: 0 auto; }
.plugin .typography-content {  width: 50%; padding-right: 20px;  display: flex;flex-direction: column;justify-content: center;}
.plugin .image-content { width: 50%; }
.plugin.image-content img { width: 100%; height: auto; max-width: 100%; }
.plugin h3 { color: #fff; font-size: 18px; margin-top: 20px} 
.plugin .main_copy { font-size: 37px; font-weight: 500; margin-bottom: 0.5em; color: #fff; }
.plugin p { font-size: 20px; color: #fff; opacity: 0.8; line-height: 1.65;nt-weight: 400; word-break: keep-all }
.plugin .swiper-controls {  position: absolute; bottom: 20px; right: 20px; display: flex;  align-items: center; background-color: rgba(0,0,0,0.5); padding: 5px 10px;  border-radius: 20px; }
.plugin .swiper-pagination { position: static; width: auto; margin: 0 10px; color: #fff; font-size: 16px; }
.plugin .swiper-button-next, 
.plugin .swiper-button-prev {  position: static;  width: 30px;   height: 30px;  margin: 0;  color: #fff; display: flex; align-items: center; justify-content: center; }
.plugin .swiper-button-next:after, .plugin .swiper-button-prev:after {  content: none; }

@media (max-width: 1024px) {
    .plugin .swiper { 
        height: auto; 
    }
    .plugin .content-wrapper { 
        flex-direction: column;
    }
    .plugin .typography-content,
    .plugin .image-content { 
        width: 100%; 
        padding-right: 0;
    }
    .plugin .typography-content,
    .plugin .image-content img {
        width: 90%; 
        display: block;
        margin: 0 auto
    }
    .plugin .typography-content {
        text-align: center;
        margin-bottom: 20px;
    }
    .plugin .main_copy  { 
        font-size: 32px;
    }
    .plugin p { 
        font-size: 16px; 
    }
}

@media (max-width: 768px) {
    .plugin .plugin_title h2 {
        font-size: 32px
    }
    .plugin h3 { 
        font-size: 18px;
    }

    .plugin .swiper-controls {
        bottom: 10px;
        right: 10px;
    }
}



.program { width: 100%; background-color: #0f2040; padding: 150px 0}
.program h3 { font-size: 18px; color: #fff;  margin-bottom: 10px; }
.program h2 { font-size: 40px; color: #fff;  font-weight: bold; margin-bottom: 30px; }
.program .features-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.program .feature-card { flex-basis: calc(50% - 20px); background-color: #fff; border-radius: 5px; padding: 40px 60px; display: flex; align-items: center; color: #333; }
.program .feature-icon { width: 80px; height: 80px; margin-right: 50px; }
.program .feature-content h3 { font-size: 27px; margin-bottom: 10px; color: #1a1a1a; }
.program .feature-content span { font-size: 16px; color: #555; font-weight: 400}
.program .feature-content p { font-size: 18px; color: #555; font-weight: 400; line-height: 1.65; max-width: 400px; word-break: keep-all }

@media (max-width: 1200px) { 
    .program .feature-card { flex-basis: 100%; }
}
@media (max-width: 768px) { 
    .program .feature-card { flex-direction: column; text-align: center; } 
    .program .feature-icon { margin-right: 0; margin-bottom: 20px; } 
}



.service_list { width: 100%; padding: 150px 0; }
.service_list .tbl-stat { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.service_list .tbl-stat th, .service_list .tbl-stat td { border: 1px solid #ddd; padding: 18px; text-align: left; }
.service_list .tbl-stat th { background-color: #eff1f6; font-weight: bold; font-size: 18px; }
.service_list .button { padding: 5px 10px; background-color: #02a6a4; color: #fff; border: none; cursor: pointer; font-size: 16px; }

@media screen and (max-width: 800px) {
    .service_list {
        padding: 50px 0; 
    }
    .service_list .tbl-stat, .service_list .tbl-stat tbody {
        display: block; 
    }
    .service_list .tbl-stat thead { 
        display: none; 
    }
    .service_list .tbl-stat tr { 
        display: block; 
        margin-bottom: 15px; 
        border: 1px solid #ddd;
    }
    .service_list .tbl-stat td { 
        display: flex;
        justify-content: space-between;
        justify-content: flex-start;
        border: none;
        border-bottom: 1px solid #ddd;
        padding: 10px 15px;
        font-size: 16px
    }
    .service_list .tbl-stat td:last-child {
        border-bottom: none; 
    }
    .service_list .tbl-stat td::before { 
        content: attr(data-label);
        font-weight: bold;
        flex-basis: 30%;
        text-align: left;
        background-color: #eff1f6;
        padding: 10px;
        margin: -10px 15px -10px -15px;
    }
}



.payment { width: 100%; padding: 150px 0; }
.payment .tbl-stat { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.payment .tbl-stat th, .payment .tbl-stat td { border: 1px solid #ddd; padding: 18px; text-align: left; }
.payment .tbl-stat th { background-color: #eff1f6; font-weight: bold; font-size: 18px; }

@media screen and (max-width: 800px) {
    .payment {
        padding: 50px 0; 
    }
    .payment .tbl-stat, ..payment .tbl-stat tbody {
        display: block; 
    }
    
    .payment .tbl-stat thead { 
        display: none; 
    }
    .payment .tbl-stat tr { 
        display: block; 
        margin-bottom: 15px; 
        border: 1px solid #ddd;
    }
    .payment .tbl-stat td { 
        display: flex;
        justify-content: space-between;
        justify-content: flex-start;
        border: none;
        border-bottom: 1px solid #ddd;
        padding: 10px 15px;
        font-size: 16px
    }
    .payment .tbl-stat td:last-child {
        border-bottom: none; 
    }
    .payment .tbl-stat td::before { 
        content: attr(data-label);
        font-weight: bold;
        flex-basis: 30%;
        text-align: left;
        background-color: #eff1f6;
        padding: 10px;
        margin: -10px 15px -10px -15px;
    }
}




#footer { background-color: #000; }
#footer .inner { padding: 6rem 1.25rem 9rem; max-width: 1600px; margin: 0 auto; }
#footer .top { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 5rem; }
#footer .top .left, #footer .top .right { flex: 1; min-width: 300px; }
#footer .top .txt h3 { font-size: 1.25rem; color: #fff; font-weight: 800; padding-bottom: 1.25rem; }
#footer .top .txt ul { padding: 0; list-style: none; }
#footer .top .txt ul li { font-size: 1.0625rem; color: #fff; padding: 0.5rem 0; display: flex; align-items: center; flex-wrap: wrap; }
#footer .top .txt ul li .title { font-weight: 800; color: #fff; font-size: 1.125rem; margin-right: 1rem; }
#footer .top .txt ul li span { font-size: 1.125rem; color: #838383; font-weight: 500; }
#footer .bottom { margin-top: 3rem; }
#footer .bottom ul { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0; }
#footer .bottom ul li { margin-right: 2rem; margin-bottom: 1rem; }
#footer .bottom ul li a { font-size: 1.0625rem; color: #fff; font-weight: 800; }
#footer .bottom ul li span { color: #d50000; }
#footer .copy { font-size: 0.9375rem; color: #fff; opacity: 0.8; font-weight: 400; margin-top: 2rem; }
#footer .copy a { color: #fff}
#footer .sns_box { display: flex; gap: 1.5rem; margin-top: 2rem; padding: 0; }
#footer .sns_box .sns a { display: block; width: 4rem; height: 4rem; border: 1px solid rgba(255,255,255,0.2); font-size: 0; background: url(../img/facebook.png) no-repeat center / 0.6rem; }
#footer .sns_box .sns.n2 a { background-image: url(../img/insta.png); background-size: 2rem; }
#footer .sns_box .sns.n3 a { background-image: url(../img/naver.png); background-size: 1.8rem; }

@media (max-width: 768px) {
    #footer .top { 
        flex-direction: column; 
    }
    #footer .top .left, #footer .top .right { 
        width: 100%;
        margin-bottom: 2rem; 
    }
    #footer .bottom ul { 
        flex-direction: column; 
    }
    #footer .bottom ul li { 
        margin-right: 0; 
    }
}

@media (max-width: 576px) {
    #footer .top .txt ul li h2 { 
        font-size: 16px
    }
    #footer .top .txt ul li span {
        font-size: 16px
    }
    #footer .sns_box .sns a { 
        display: block; 
        width: 3rem; 
        height: 3rem; 
        border: 1px solid rgba(255,255,255,0.2); 
        font-size: 0; 
        background: url(../img/facebook.png) no-repeat center / 0.6rem; 
    }
    #footer .sns_box .sns.n2 a { 
        background-image: url(../img/insta.png); background-size: 1.0rem; 
    }
    #footer .sns_box .sns.n3 a { 
        background-image: url(../img/naver.png); background-size: 1.0rem;
    }
}