/*교육원 소개*/
.intro_wrap{background-color: white; margin-top: 100px;}
.intro_wrap .wrap{display: flex;}
.intro_wrap .wrap .intro_txt{width: 50%; text-align: center;}
.intro_wrap .wrap .intro_txt h3{padding: 50px 0; font-size: 30px; line-height: 45px;opacity: 0;}
.intro_wrap .wrap .intro_txt h3 span{color: #003378;}
.intro_wrap .wrap .intro_txt p{font-size: 18px; line-height: 36px; color: #666; font-weight: 400;opacity: 0;}
.intro_wrap .wrap .intro_bg{width: 50%; padding:3% 5%;opacity: 0;}
.intro_wrap .wrap .intro_bg img{width: 100%;}

.intro_wrap .wrap .intro_txt h3.active{animation: bottom-up .8s ease-out forwards;}
.intro_wrap .wrap .intro_txt p.active{animation: bottom-up .5s .8s ease-out forwards;}
.intro_wrap .wrap .intro_bg.active{animation: bottom-up .5s .8s ease-out forwards;}

@media(max-width:1220px){
    .intro_wrap .wrap .intro_txt{width: 95%; margin-left: 2.5%; padding-bottom: 50px;}
    .intro_wrap .wrap .intro_bg{display: none;}
}

@media(max-width:1000px){
    .intro_wrap{margin-top: 40px;}
    .intro_wrap .wrap .intro_txt{width: 95%; margin-left: 2.5%; padding-bottom: 30px; opacity: 1;}
    .intro_wrap .wrap .intro_txt h3{padding: 24px 0; font-size: 20px; line-height: 32px; opacity: 1;}
    .intro_wrap .wrap .intro_txt p{font-size: 16px; line-height: 24px; opacity: 1;}
    .intro_wrap .wrap .intro_bg{display: none;}
    .intro_wrap .wrap .intro_txt h3.active{animation:none;}
    .intro_wrap .wrap .intro_txt p.active{animation:none;}
}

@media(max-width:640px){
    .intro_wrap .wrap .intro_txt h3{font-size: 18px;}
    .intro_wrap .wrap .intro_txt p{font-size: 14px;}
}

.merit_wrap{margin-top: 100px;}
.merit_wrap h3{font-size: 30px;opacity: 0; }

.merit_wrap ul,
.merit_wrap .merit_list {margin-top: 60px; opacity: 0; transition: opacity 0.5s, transform 0.5s;}

.merit_wrap h3.active{animation: bottom-up .8s ease-out forwards;}
.merit_wrap p.active{animation: bottom-up .8s ease-out forwards;}
.merit_wrap ul.active,
.merit_wrap .merit_list.active {animation: bottom-up .8s ease-out forwards;}

.merit_wrap ul li,
.merit_wrap .merit_item {width: 45%; margin-right:2.5%;margin-left: 2.5%; float:left; display:flex; border-radius: 20px; margin-bottom: 30px; padding: 10px; background-color: #e5eef6; transition: box-shadow 0.3s, transform 0.3s;}
.merit_wrap ul li dl,
.merit_wrap .merit_item .merit_text {width: 70%;display: flex; flex-direction: column;justify-content: center;}
.merit_wrap ul li dl dt,
.merit_wrap .merit_item .merit_title {font-size: 18px; font-weight: 500;}
.merit_wrap ul li dl dd,
.merit_wrap .merit_item .merit_desc {color: #666; padding-top: 10px; word-break: keep-all;}

.merit_wrap .merit_item_2 {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); /* 부드러운 그림자 */
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
}
.merit_wrap .merit_item_2 .merit_text {text-align: center; display: flex; flex-direction: column;justify-content: center;}
.merit_wrap .merit_item_2 .merit_title {font-size: 23px; font-weight: 600; line-height: 1.5;}
.merit_wrap .merit_item_2  .merit_desc {color: #666; padding-top: 10px; word-break: keep-all;}

.merit_item_4 .merit_title {text-align: center; margin-top:10px; font-weight: 500;}
.merit_wrap .merit_item_3 {
    background: #fff;
    border-radius: 16px;
    border: 2px solid #dfdfdf;
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 452px;
}
.merit_wrap .merit_item_3 i,
.merit_wrap .merit_item_3 svg {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: #0b396a;
    margin-bottom: 18px;
    line-height: 1;
    display: inline-block;
}
.merit_wrap .merit_item_3 .merit_text {text-align: center; display: flex; flex-direction: column;justify-content: center;}
.merit_wrap .merit_item_3 .merit_title {font-size: 23px; font-weight: 600; line-height: 1.5;}
.merit_wrap .merit_item_3  .merit_desc {color: #666; padding-top: 10px; word-break: keep-all;}


/* 비전 카드 */
.vision_wrap {margin-top: 100px;}
.vision_wrap h3 {font-size: 30px; margin-bottom: 40px;}
.vision_cards {display: flex; padding:40px 0; flex-wrap: wrap; justify-content: center;}
.vision_card {
    flex: 1 1 32%;
    min-width: 280px;
    max-width: 360px;
    background: #fff;
    box-shadow: 0 0px 10px rgba(0,0,0,0.12);
    padding: 26px 24px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid #f1f1f1;
}
.vision_card_bar {
    height: 5px;
    background: #0b396a;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

}
.vision_card_icon{
    display: flex; justify-content: center; align-items: center;
}

.vision_card_icon svg {
    font-size: 58px;
    color: #0b396a;
    margin: 20px 0;
}
.vision_card_meta {
    font-size: 16px;
    color: #1f2b3d;
    font-weight: 700;
    margin: 2px 0 0;
}
.vision_card_title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
    color: #0b1d3b;
    margin: 0;
}
.vision_card_desc {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1000px){
    .vision_cards {gap: 16px;}
    .vision_card {flex: 1 1 100%; min-width: 100%;}
}

.merit_wrap .merit_item_3 {
    background: #fff;
    border-radius: 16px;
    border: 2px solid #dfdfdf;
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 452px;
}
.merit_wrap .merit_item_3 i,
.merit_wrap .merit_item_3 svg {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: #0b396a;
    margin-bottom: 18px;
    line-height: 1;
    display: inline-block;
}
.merit_wrap .merit_item_3 .merit_text {text-align: center; display: flex; flex-direction: column;justify-content: center;}
.merit_wrap .merit_item_3 .merit_title {font-size: 23px; font-weight: 600; line-height: 1.5;}
.merit_wrap .merit_item_3  .merit_desc {color: #666; padding-top: 10px; word-break: keep-all;}

@media(max-width:1000px){
    .merit_wrap .merit_list {margin-top: 30px; opacity: 1;}
    .merit_wrap .merit_item {float: none; width: 95%;}
    .merit_wrap .merit_item img{width: 20%;}
    .merit_wrap .merit_item .merit_title{font-size: 18px; padding-top: 0px;}
    .merit_wrap .merit_item .merit_desc{font-size: 16px; padding-top: 5px;}
    .merit_wrap .merit_list.active{animation:none;}
}

@media(max-width:640px){
    .merit_wrap .merit_item img{width: 30%;}
    .merit_wrap .merit_item .merit_title{font-size: 16px;}
    .merit_wrap .merit_item .merit_desc{font-size: 14px;}
}

@media(max-width:1000px){
    .merit_wrap{margin-top: 40px;}
    .merit_wrap h3{font-size: 20px; opacity: 1;}
    .merit_wrap ul{margin-top: 30px; opacity: 1;}
    .merit_wrap ul li{float: none; width: 95%;}
    .merit_wrap ul li img{width: 20%;}
 
    .merit_wrap ul li dl dt{font-size: 18px; padding-top: 0px;}
    .merit_wrap ul li dl dd{font-size: 16px; padding-top: 5px;}
    .merit_wrap h3.active{animation:none;}
    .merit_wrap ul.active{animation:none;}
}



@media(max-width:640px){
    .merit_wrap ul li img{width: 30%;}
    .merit_wrap h3{font-size: 18px;}
 
    .merit_wrap ul li dl dt{font-size: 16px; }
    .merit_wrap ul li dl dd{font-size: 14px; }
}


@keyframes bottom-up{
    from{transform: translateY(50px); opacity: 0;}
    to{transform: translateY(0);opacity: 1;}
}


/*강사진 소개*/
.professor_contents_wrap{margin-top: 100px;}
.professor{display: flex; opacity: 0; } 
.professor .img{width: 100%; padding: 0 4%;}
.professor .img img{width: 100%; border-radius: 13px;}
.professor .img span{display: block; text-align: right;margin-top: 20px; position: relative;}
.professor .img span::before{content: ''; height: 100%; width: 4px;background-color: #003378; position: absolute; left: 0;}

.professor .introduce{width: 80%; padding: 2% 3%;background-color: #e5eef6; border-radius: 13px;}
.professor .introduce ul li{margin-bottom: 20px;}
.professor .introduce dt{display: inline-block; width: 70px; height: 100%; color: #003378; font-weight: 600;}
.professor .introduce dd:first-of-type{display: inline-block; margin-left: 18px;}
.professor .introduce dd{margin-left: 92px; padding-bottom: 10px;}

.prof_1.active{animation: bottom-up .8s ease-out forwards;}
.prof_2.active{animation: bottom-up .8s ease-out forwards;}
.prof_3.active{animation: bottom-up .8s ease-out forwards;}

@media (max-width:1000px){
    .professor_contents_wrap{margin-top: 40px;}
    .professor .img{width: 30%;}
    .professor .introduce{width: 70%;}
    .professor .introduce dt{display: block;}
    .professor .introduce dd{margin-left: 0; font-size: 15px;}
    .professor .introduce dd:first-of-type{margin-left: 0; margin-top: 10px;}
}


/*오시는 길*/
.contents_wrap{margin-top: 60px;}
.map_intro{display: flex; position: relative;}
.map_intro .txt{width: 50%; padding:77px 0 0 7%;}
.map_intro .txt h3{font-size: 36px ;color: #003378; margin-top: 31px;text-align: left;}
.map_intro .txt p{font-size: 24px;line-height: 36px;margin-top: 64px; font-weight: 600; color: #555  ;}

.map_intro::before{content: ''; width: 80%; height: 134px; background-color: #e5eef6; position: absolute; top: 37%;left: -20% ; z-index: -1;}

.map_intro .img{width: 50%;}
.map_intro .img img{width: 100%;}

.map_info {display: flex; justify-content: space-around; margin-top: 100px;}
.map_info .map{width: 100%;}

.map .map_title{margin-bottom: 15px; padding-left:20px;font-size: 20px ; position: relative;}
.map .map_title::before{content: ''; width: 5px; height: 100%; position: absolute; left: 0;}
.map:nth-of-type(1) .map_title::before{background-color: #f9c2e3;}
.map:nth-of-type(2) .map_title::before{background-color: #6c8dce;}
.map:nth-of-type(3) .map_title::before{background-color: #eded48;}

.location_contents_wrap .location_contents { margin-top:40px; width: 700px; }
.location_contents .title { margin-top:30px; margin-bottom: 25px; font-size: 20px; font-weight: 500; }
.location_contents > ul { margin-top: 25px;}
.location_contents > ul > .stitle > span { padding:1px 15px; border-radius: 50px; background-color: #7799e5; color: #fff;}
.location_contents > ul > .contents { font-size: 16px;margin-top: 13px;}


@media (max-width:1000px){
    .contents_wrap{margin-top: 0px;}
    .map_intro .img{margin-top: 90px;}
    .map_info{display: block;}
    .map_info .map{width: 100%; margin-top: 50px;}
    .location_contents .title {font-size: 20px;}}



@media (max-width:640px){
    .map_intro{display: block;margin-top: 40px;}
    .map_intro .txt{width: 100%; padding: 0;}
    .map_intro .txt h3{font-size: 22px; margin-top: 0;}
    .map_intro .txt p{font-size: 16px; margin-top: 25px;}
    .map_intro .img{width: 100%; margin-top: 0;}
    .map_intro::before{top:10%;}

    .location_contents .title {margin-bottom: 0;font-size: 18px ;}
    .location_contents > ul > .stitle{font-size: 14px;}
    .location_contents > ul > .contents{font-size: 14px;}
    .location_contents > ul{display: block; margin-top: 15px;}
    .location_contents > ul > .contents{margin-top: 10px;}

}