@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --accent-color: #12D7E0;
}

* {
    box-sizing: border-box;
    font-family: Inter;
}
* {margin: 0;padding: 0;box-sizing: border-box;}
html, body {width: 100%;overflow-x: hidden; }
body{margin: 0;}
header {position: absolute;top: 0;left: 0;width: 100%;z-index: 100;display: flex;justify-content: space-between;align-items: center;}


.title {color: #000;text-align: center;font-size: 35px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.75px;}


.qa {padding: 100px 0;}
.qa__wrapper {width: 1260px;max-width: 98%;display: flex;gap: 30px;flex-wrap:wrap;margin: 90px auto 140px;}
.qa__box {width: 100%;border-radius: 16px;background: #F8F9FA;overflow: hidden;padding: 30px 50px;display: flex;gap: 50px;flex-wrap:wrap;text-align:left;}
.qa__box-question {color: #313131;font-size: 24px;font-style: normal;font-weight: 700;line-height: 1.15;width: 100%;position: relative;padding-right: 60px;margin-bottom: 0;}
.qa__box-question:after {content: '';position: absolute;top:0;right:0;transition: transform 0.5s linear;width: 20px;height: 20px;background: url('../../assets/img/qa__arrow.png') center  / contain no-repeat;}        
.qa__box.on .qa__box-question:after {transform: rotate(180deg);}
.qa__box-answer {color: #414141;font-size: 20px;font-style: normal;font-weight: 500;line-height: 1.4;width: 90%;opacity:0;display: none;transition: opacity 0.5s linear; }
.qa__box.on .qa__box-answer {opacity: 1;display: block;}

.tuition {width:1280px;max-width:98%;margin: 0 auto;}
.tuition__title {color: #000;text-align: left;font-size: 35px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.75px;}
.tuition__type {width: 100%;margin-top: 55px;display: flex;justify-content: center;}
.tuition__type-tab {width:50%;cursor:pointer;display: flex;justify-content: center;border-radius: 10px;background: #F8F9FA;font-size: 24px;font-weight: 600;line-height: 2.1;color: #313131;padding: 12px;transition: background 0.5s ease;}
.tuition__type-tab.on {border-radius: 10px;background: var(--accent-color);color: #FFF;}
.tuition__cont {display: none;opacity: 0;transition: opacity 1s ease; /* min-height: 70vh; */margin: 130px auto 0;}
.tuition__cont.on {display: block;opacity: 1;}
.tuition {width: 1200px;max-width:98%;margin: 0 auto;padding: 100px 0 280px;}
.tuition__top {color: #000;font-size: 35px;font-style: normal;font-weight: 700;line-height: 1.4;letter-spacing: -1.75px;}
.tuition__form-box {margin-bottom: 60px;}
.tuition__form-title {color: #313131;font-size: 22px;font-style: normal;font-weight: 700;line-height: 1.2;margin-bottom: 35px;}
.tuition__form-title span {color: var(--accent-color);}
.tuition__inputs-wrapper {display: flex;gap: 30px;flex-wrap: wrap;}
.tuition__inputs-wrapper input {display: none;}
.tuition__inputs-wrapper label {background: #F8F9FA;color:#313131;padding:20px 35px;border-radius: 10px;transition: background 0.5s ease;}
.tuition__inputs-wrapper label:has(input:checked) {background:var(--accent-color);color: #FFF;}
.tuition__kakao-wrapper {display: flex;gap: 30px;flex-wrap: wrap;}
.tuition__kakao-link {background: #F8F9FA;color:#313131;padding:20px 35px;border-radius: 10px;transition: background 0.5s ease;text-decoration: unset;}
.tuition__kakao-link:hover, .tuition__kakao-link:active {background:var(--accent-color);color: #FFF;}
.tuition__form-row {display: flex;justify-content: space-between;margin-bottom: 25px;}
.tuition__input  {border-radius: 10px;background: #F8F9FA;padding: 20px 35px;border: unset;width:100%;}
.tuition__input::placeholder {color: #939393;font-size: 18px;font-weight: 400;line-height: 1.4;}
.tuition__input.w50 {width: 48%;}
.tuition__input-textarea {min-height: 175px;}
.tuition-policy {text-align: right;}
.tuition-policy input {margin-right: 5px;}
.tuition-policy summary::marker {display: none;color: transparent;}
.tuition__button {border-radius: 50px;background: #12D7E0;color: #FFF;text-align: center;font-size: 25px;font-weight: 700;border: unset;box-shadow: unset;width: 390px;padding: 15px 50px;display: flex;justify-content: center;gap: 30px;margin: 0 auto;align-items: center;}
.tuition__button svg {width: 36px;height: 36px;}

.footer {padding: 75px 0 90px;background: #EBEBEB;display: flex;}
.footer__table {margin: 0 auto;width: 1170px;max-width: 98%;}
.footer__table thead {background: #FFF;color: #595959;text-align: center;font-weight: 600;text-align: center;}
.footer__table td {padding: 10px;color: #595959;font-weight: 400;font-size: 13px;text-align: center;}
.footer__table th {color: #595959;font-weight: 600;padding: 10px;font-size: 13px;text-align: center;}
.footer__table tr {border-bottom: 1px solid #fff;text-align: center;}

.footer__info, .footer__social {list-style: none;}
.footer__info {text-align: right;margin-bottom: 30px;}
.footer__social {display: flex; gap: 12px;justify-content: flex-end;}
.footer__social li a {width: 32px;height: 32px;display: flex ;justify-content: center;align-items: center; border-radius: 100%;background: rgba(119, 119, 119, 0.1);text-decoration: none;}
.footer__social li a:hover {background: rgba(119, 119, 119, 0.3);}

.footer__wrapper {max-width: 100%;margin: 0 auto;display: flex;justify-content: center;gap: 183px;flex-wrap: wrap;flex-wrap: wrap-reverse;}
.footer__top {width: 100%;}
.footer__logo {display:flex;justify-content: flex-end;margin-top: 585px;}
.footer__logo img {margin-right: 0;display: block;width: 175px;height: auto;object-fit: contain;}

.tuition__button {min-width: unset;width: max-content;}






.logo {position: absolute;left: 64px;top: 53px;}
.logo img {height: auto;max-width: 200px;}
.call {position: absolute;right: 64px;top: 53px;}
.call img {height: auto;max-width: 200px;}

.sec_01 {padding: 29rem;display: flex;flex-direction: column;justify-content: center;
align-items: flex-start;margin: 0 auto;background: url('../../assets/img/crew_bg.png') center/cover no-repeat;position: relative;}
.sec_01 .tuition-btn {padding: 0.87rem 1.5rem;border-radius: 50px;font-size: 1.6rem;font-weight: 800;border: none;cursor: pointer;
position: absolute;bottom: 10rem;left: 50%;transform: translateX(-50%);}
.sec_01 .title {margin: 0 auto;display: grid;}
.sec_01 .title h3 {font-size: 2.8rem;font-weight: 700;line-height: 1.4;margin-bottom: 2rem;letter-spacing: -0.5px;}
.sec_01 .title span {font-size: 18px;color: #aaa;font-weight: 400;}

.sec_02 {background-color: #ffffff;padding: 6rem 2rem;}
.sec_02_header {text-align: center;margin-bottom: 4rem;}
.sec_02_header h2 {color: #000;text-align: center;font-family: Inter;font-size: 35px;font-style: normal;font-weight: 700;line-height: normal;
letter-spacing: -1.75px;margin-bottom: 4.7rem;}
.sec_02_header .subtitle {color: #000;text-align: center;font-family: Inter;font-size: 25px;font-style: normal;font-weight: 400;
line-height: normal;letter-spacing: -1.25px;margin-bottom: 1rem;}
.sec_02_header .description {font-size: 0.95rem;color: #666;}
.sec_02 .card_wrap {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;max-width: 1200px;margin: 0 auto;}
.sec_02 .card_item {display: flex;flex-direction: column;gap: 1.8rem;}
.sec_02 .card {background-color: #fff;border-radius: 10px;border: 1px solid #D9D9D9;padding: 2.4rem 2rem;display: flex;gap: 3.2rem;
align-items: center; }
.sec_02 .card:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.sec_02 .card_img {width: 169px;height: 200px;background-color: #333;border-radius: 10px;flex-shrink: 0;}
.sec_02 .card_content {flex: 1;text-align: left;}
.sec_02 .card_content h3 {color: #2D2D2D;font-family: Inter;font-size: 22px;font-style: normal;font-weight: 700;line-height: normal;
letter-spacing: -1.1px;}
.sec_02 .card_subtitle {color: #2D2D2D;font-family: Inter;font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -0.9px;}
.sec_02 .card_desc {color: #414141;font-family: Inter;font-size: 15px;font-style: normal;font-weight: 500;line-height: 20px;letter-spacing: -0.45px;}
.sec_02 .check_points {padding: 1rem 1.5rem;display: flex;gap: 7.7rem;align-items: flex-start;}
.sec_02 .check_title {color: #2D2D2D;font-family: Inter;font-size: 16px;font-style: normal;font-weight: 600;line-height: normal;letter-spacing: -0.8px;}
.sec_02 .check_points ul {list-style: none;padding: 0;margin: 0;}
.sec_02 .check_points li {color: #2D2D2D;font-family: Inter;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.8px;}

.sec_03 {background: url('../../assets/img/crew_sec03_bg.png') center/cover no-repeat;padding: 6rem 2rem;text-align: center;position: relative;}

/* .sec_03::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.87);z-index: 0;} */

.sec_03 > * {position: relative;  z-index: 1;}
.sec_03 .title {    color: #FFF;font-family: Inter;font-size: 35px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.75px;}
.sec_03_cont {list-style: none;padding: 0;margin: 7.8rem auto 0;max-width: 912px;display: grid; grid-template-columns: repeat(2, 1fr);gap: 2rem;}
.sec_03_cont li {border-radius: 96px;border: 1px solid var(--accent-color);background: rgba(12, 12, 12, 0.73);color: #FFF;text-align: center;
    font-family: Inter;font-size: 22px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.1px;padding: 1.5rem;}

.sec_04 {background-color: #ffffff;padding: 6rem 2rem;text-align: center;}
.sec_04 .title {color: #000;text-align: center;font-family: Inter;font-size: 35px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.75px;margin-bottom: 4rem;}
.benefit_wrap {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;max-width: 1075px;margin: 0 auto;}
.benefit_box {padding: 0.5rem 3rem;position: relative;display: flex;justify-content: space-between;align-items: center;min-height: 180px;border-radius: 10px;
border: 2px solid var(--accent-color);background: #FFF;box-shadow: 4px 7px 25.2px 0 rgba(0, 0, 0, 0.08);width: 521px;}
.benefit_badge {position: absolute;top: 37px;left: 48px;color: #fff;font-size: 20px;font-weight: 700;border-radius: 17px;background: var(--accent-color);
display: flex;width: 55px;height: 30px;padding: 1px 14px;justify-content: center;align-items: center;gap: 10px;}
.benefit_text {text-align: left;margin: 0;color: #313131;font-family: Inter;font-size: 25px;font-style: normal;font-weight: 600;line-height: normal;letter-spacing: -1.25px;}
.benefit_icon img {width: 100%;height: 100%;object-fit: contain;position: absolute;}
.benefit_box:nth-child(1) .benefit_icon img {right: -30px;top: -100px;width: 300px;height: 300px;}
.benefit_box:nth-child(2) .benefit_icon {width: 160px;height: 140px;}
.benefit_box:nth-child(2) .benefit_icon img {right: 26px;top: -26px;width: 190px;height: 178px;}
.benefit_box:nth-child(3) .benefit_icon {width: 140px;height: 160px;}
.benefit_box:nth-child(3) .benefit_icon img {right: 30px;top: -2px;width: 182px;height: 182px;aspect-ratio: 1 / 1;}
.benefit_box:nth-child(4) .benefit_icon {width: 150px;height: 170px;}
.benefit_box:nth-child(4) .benefit_icon img {right: -10px;top: -65px;width: 257px;height: 222px;aspect-ratio: 77 / 68;}
.benefit_box:nth-child(3) .benefit_text,.benefit_box:nth-child(4) .benefit_text {margin-top: 1.5rem;}