/* --- 기본 스타일 리셋 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Pretendard;
    word-break: keep-all;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.6;
}

ul,
li,
dl,
dt,
dd {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- 공통 스타일 --- */
.wrap {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
}

.wrapConetnet {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto
}

.topBox {
    position: relative;
    padding-bottom: 56px
}

/* --- textwrap1: 상단 헤더 --- */
.textwrap1 {
    text-align: center;
    position: relative;
    z-index: 1;
}

.textwrap1:after {
    content: "";
    background: url('https://img.megastudy.net/campus/library/v2015/library/campus_common/2026/teample/img/bg.svg') no-repeat 0 0;
    position: absolute;
    width: 100%;
    height: 771px;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: center;
}

.textwrap1 p {
    padding-top: 60px;
    color: #222;
    text-align: center;
    
    font-size: 46px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 59.8px */
    letter-spacing: -0.46px;
}

.textwrap1 h1 {
    font-size: 84px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -2.1px;
    margin: 8px 0 26px;
    color: #222;
    text-align: center;
}

.textwrap1 h2 {
    color: #555;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.2px;
}

.textwrap1 h2 span {
    color: #151AB2;
    text-align: center;    
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 28px */
    letter-spacing: -0.2px;
}

/* --- textwrap2: 통계 --- */
.textwrap2 {
    text-align: center;
    margin: 40px auto 0;
    position: relative;
    z-index: 10;
}

.textwrap2 h3 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
}
.textwrap2 h3 span{color:#151AB2}

.textwrap2>span {
    /* h3 아래 설명 텍스트 */
    color: #555;
    text-align: center;
    
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    letter-spacing: -0.2px;
}

.textwrap2>span>i {
    color: #555;
    
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.2px;
}

.textwrap2 ul {
    display: flex;
    /* Flexbox로 가로 정렬 */
    justify-content: center;
    gap: 50px;
    padding-bottom: 40px;
    
    
}

.textwrap2 ul li {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: center;
}

.textwrap2 ul li span:first {
    /* '누적 장학생' 라벨 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #E5E5E5;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.textwrap2 ul li p {
    font-size: 46px;
    font-weight: 700;
    color: #000;
}

.textwrap2 ul li p e {
    font-size: 30px;
    font-weight: 500;
    margin-left: 4px;
    vertical-align: middle;
    margin-right:10px;
}

.textwrap2 ul li p e span {
    /* '원' */
    font-size: 16px;
}

.textwrap2>span:last-of-type {
    
    color: #555;
}

.textwrap2 ul li span {
    /* Flexbox로 중앙 정렬 */
    display: flex;
    justify-content: center;
    /* 가로 중앙 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    background:#E5E5E5;
    /* 기존 스타일 유지 */
    width: 88px;
    height: 88px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    /* '누적'과 '장학생' 두 줄을 가운데로 정렬 */
    flex-shrink: 0;
    line-height: 1.4;
}

.scholarshipBox ul li span.textSpan {
    border-radius: 0;
    background: transparent;
    font-size: 30px;
    width: auto;
    height: auto;
    display: inline-block;
}

.scholarshipBox {
    padding: 40px 50px;
    margin: 40px auto 0;
    max-width:800px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    height: 233px;
}

.scholarshipBox span.ex {
    font-size: 14px;
    color: #777;
    text-align: right;
    display: block;

}

/* Caption1 */
/* ================================================= */
/* --- content1: 대입성공의 비결 (수정된 부분) --- */
/* ================================================= */
.content1 {
    padding: 60px 0;
    background-color: #ECF5FD;
    text-align: center;
    padding-bottom: 60px
}

.content1 .content1Box,
.content2 {
    width:100%;
    max-width: 1024px;
    margin: 0 auto;
}
.content2{
    padding:60px 24px}

.content1 h3 {
    padding: 0 0 30px;
    color: #222;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    /* 41.6px */
    letter-spacing: -0.8px;
}

.content1 h3 span {
    color: #151AB2;
    
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.8px;
}

.content1>ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content1 ul.studentList li.list {
    margin-bottom: 20px
}

.content1 li dl {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px;
    background-color: #fff;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
}

.content1 li dt {
    
    /* 이미지 영역 너비 */
    flex-shrink: 0;
    /* 이미지가 찌그러지지 않도록 */
}

.content1 li dt img {
    width: 180px;
    display: inline-block;
    /* 이미지 아래 불필요한 공백 제거 */
}

.content1 li dd strong {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 8px
}
.content1 li dd{padding-bottom:30px}

.content1 li dd ul {
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: #777;
    margin: 4px 0 16px;
}
.content1 li dd ul li{
    color:#555;
    border:1px solid #dbdbdb;
    line-height:140%;
    font-weight:600;
    border-radius:999px;
    padding:3px 12px
}
.content1 li dd ul li.name{
    font-size:18px;
    line-height:140%;
    font-weight:400;
    border:none;
    padding:3px 0px
}

.content1 li .textBox {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin: 20px 0;
}

.content1 li .textBox span {
    color: #151AB2;
    
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    /* 28.8px */
    letter-spacing: -0.45px;
}

.content1 li a {
    position:absolute;
    right: 40px;
    display:block;;
    text-align: right;
    font-size: 13px;
    color: #888;
    letter-spacing: -0.13px;
    border:1px solid #E5E5E5;
    padding:2px 10px;
}

/* ================================================= */
/* --- content2: 추가 후기 (수정된 섹션) --- */
/* ================================================= */


.content2>ul {
    display: grid;
    /* 2단 그리드 레이아웃 유지 */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}
.content2>ul>li{border:1px solid #D9D9D9;min-height:358px;overflow:hidden}
/* --- 전체 카드 레이아웃 --- */
.content2 li {
    border: 1px solid #e0e0e0;
    /* 옅은 회색 테두리 */
    border-radius: 12px;
    /* 모서리 둥글게 */
    /* 내부 여백 */
    background-color: #fff;
    /* 배경 흰색으로 변경 */
}

/* --- 상단 제목 영역 (dt) --- */
.content2 li dt {
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    margin-bottom: 0; 
    font-size: 20px;
    font-weight: 700;
    color: #333;
    background:#f5f5f5
}
.content2 li dd{
    border-radius:0 0 8px 8px;    
    padding:24px;
    letter-spacing: -0.16px;
    word-break: keep-all;
    color:#777
}
/* --- 오른쪽 이름/지역 정보 (ul) --- */
.content2 li dt ul {
    display: flex;
    align-items: center;
    gap: 12px;
    /* '부천'과 '임성연' 사이의 간격 */

    /* ul, li 태그의 기본 스타일 제거 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- '부천', '임성연' 폰트 스타일 --- */
.content2 li dt ul li {
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    padding:0;
}

/* --- '부천' 태그 스타일 (첫 번째 li) --- */
.content2 li dt ul li:first-child {
    border: 1px solid #ccc;
    border-radius: 999px;
    font-size:14px;
    letter-spacing:-0.14px;
    padding: 4px 12px;
    color:#333;
    line-height:140%;
    font-weight:600;
    background:transparent
}
.content2 li dt ul li:last-child{
    border: none;
    border-radius: 0;
    background: transparent;
    color:#656556;
    line-height:32px;
    font-size:18px
}

/* --- 하단 본문 (dd) --- */
.content2 li dd {
    
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.16px;
    word-break: keep-all;
}

/* --- 본문 강조 텍스트 (span) --- */
.content2 li dd span {
    color: #151AB2;
    font-weight: 400;
}

.content2>a {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    line-height:50px;
    height:50px;
    color:#333;
    border: 1px solid #333;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}
.content2>a  span {color:#333}


/* ================================================= */

/* --- content3: 비디오 섹션 --- */
.content3 {
    text-align: center;
    background: #F5F5F5;
    padding: 60px 24px;
    min-height:680px
}

.content3 h3 {
    color: #222;
    text-align: center;
    
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    /* 41.6px */
    letter-spacing: -0.8px;
    padding-bottom: 30px
}

.content3 h3 span {
    color: #151AB2;
    
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.8px;
}

.content3 div.vidoBoxs {
    width: 100%;
    max-width:1024px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #888;
    margin:0 auto
}

.content3Box {
    width:100%;
    max-width: 1024px;
    margin: 0 auto
}
.moText{display:none}
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    /* 16:9 비율을 만들기 위한 padding-bottom 트릭 (9 / 16 * 100 = 56.25%) */
    padding-bottom: 56.25%; 
    overflow: hidden; /* 혹시 모를 오버플로우 방지 */
    background-color: #000; /* 영상 로딩 전 검은 배경 */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content3 h3{font-size:32px}
.moText strong{font-size:24px}
.moText ul li{font-size:16px;line-height:140%}
.content2 li dd br{display:none}
/*테블릿*/
@media (max-width: 768px) {
    .textwrap2{margin-top:20px;padding:0 24px}
    .content1 li dt img{display:inline-block;width:130px;margin-right:20px}
    .content2 > ul {
        grid-template-columns: 1fr; /* 1단으로 변경 */
    }
    .moText ul li{
        display: inline-block;
        border: 1px solid #DBDBDB;
        border-radius: 999px;
        padding: 3px 12px;
        line-height:140%;
        font-weight:600;
    }
    .moText ul li.name{
        border: none;
        padding: 3px 0px;
    }
    .pcText{display:none}

    .content2 > ul {
        grid-template-columns: 1fr; /* 1단으로 변경 */
    }

    
    .moText{display:inline-block;vertical-align: top;}

    .moText ul li {
        display: inline-block;
        border: 1px solid #DBDBDB;
        border-radius: 999px;
        padding: 3px 12px;
    }

    .moText ul li.name {
        border: none;
        padding: 3px 0px;
    }

    .pcText {
        display: none; /* PC 텍스트 숨김 */
    }

    /* Flexbox 설정 추가 */
.content1 li dl {
    display: block; /* 블록 요소로 설정하여 세로 방향으로 정렬 */
}

.content1 li dl dt {
                    display: flex;
        align-items: center; /* 왼쪽 정렬 */
    margin-bottom: 20px; /* dt와 dd 사이의 간격 */
}


.content1 li dd {
    display: block; /* 블록 요소로 설정하여 세로 방향으로 정렬 */
    margin-top: 20px; /* dt와 dd 사이의 간격 */
}

.content1 li .textBox {
    margin-top: 10px;
    line-height:160%
}
.content1 ul.studentList li.list{
    padding:0 20px
}
.textwrap1 {padding:0 24px}
.content1 h3{padding:0 24px 30px}
.content2{padding:60px 24px}
.content3{min-height:100%;padding:60px 24px}
.textwrap2 h3{margin-bottom:30px}
.scholarshipBox{padding:40px 19px}
.textwrap2 ul li:first-child{margin-left:0}
.content2>ul>li{min-height:auto}
.content2 li dd br{display:block}
}
/*모바일*/
@media (max-width:771px) {
        .textwrap2 ul li {
        justify-content: center;
    }
}
@media (max-width:767px) {
    .scholarshipBox ul li span.textSpan{font-size:22px}
    .textwrap1 h2 span{font-size:17px}
    .scholarshipBox span.ex{font-size:12px}
    .topBox{padding-bottom:40px}
    .textwrap2 ul li p e{font-size:22px;margin-right: 4px;}
    .textwrap2 ul{gap:16px;padding-bottom:20px}
    .scholarshipBox{padding:22px 38px;margin:0 }
    .textwrap2{padding-top:40px}
    .textwrap2 ul li span{width:68px;height:68px;font-size:14px}
    .textwrap2 ul li p{font-size:30px}
    .textwrap2 ul li p e{margin-left:2px} 
    .textwrap2 ul li{justify-content: center;}
    .textwrap2>span>i,.textwrap2>span:last-of-type{font-size:17px}    
    .textwrap2 h3{font-size:24px;margin-bottom:10px}
    .textwrap2 ul li:first-child{margin-left:0}
    .content2 > ul {grid-template-columns: 1fr;}
    .textwrap2,.textwrap1{padding:0 16px}
    .textwrap1 h1{font-size:38px;letter-spacing:-2.5%;font-weight: 800;line-height:120%;margin-bottom:13px}
    .textwrap1 p{font-size:24px;padding-top:64px}
    .textwrap1 h2{font-size:17px}
    .content3 h3{font-size:24px}
    .content3 h3 span{font-size:24px}
    .content1 li .textBox span,.content1 li .textBox{font-size:16px}
    .textwrap2 ul{flex-direction: column}
    .scholarshipBox{height:auto;margin:20px 0 0}
    .textwrap1, .content1 h3{padding:0 24px 20px;font-size:24px}
    .content1 h3 span{display:block}
    .moText span{display:block}
    .moText ul{display:block;margin-top:6px}
    .moText strong{font-size:20px;line-height:140%}
    .content1 li dt img{width:113px;margin-right:8px}
    .moText ul li{font-size:14px}
    .moText ul li.name{font-size:16px}
    .content1 li dl{padding:24px 25px}
    .content1 li a{right:25px}
    .textBox br{display:none}
    .content1 li a{font-size:13px}
    .content2{padding:40px 16px}
    .content2 li {flex-direction: column;}
    .content2 li dt{flex-direction: column;align-items: flex-start;font-size:18px;line-height:140%;font-weight:700;color:#222}
    .content2 li dt ul{margin-top:8px;gap:10px}
    .content2>ul>li{min-height:auto}
    .textwrap1 h2 span{line-height:140%;letter-spacing:-1%;}
    .content1 li dl dt{margin-bottom:15px}
    .content1 li .textBox{font-size:16px;line-height:140%;letter-spacing:-2.5%;}
    .content2 li dt{padding:20px 24px}
    .content2 li dd{font-size:14px}
    .content2 li dt ul li:first-child{font-size:13px;line-height:140%;font-weight:600;}
    .content2 li dt ul li:last-child{font-size:16px}
    .content3{padding:40px 16px}
    .content2>a{font-size: 14px;padding: 0;height: 44px;line-height: 44px;width:100%;max-width:100%;border:1px solid #222}    
    
    .textwrap1:after{background:url(https://img.megastudy.net/campus/library/v2015/library/campus_common/2026/teample/img/mo_bg.svg) no-repeat 0 0}
    
}