@charset "UTF-8";
/*******************************************************************************
                                  공용
********************************************************************************/
.philippines-family-training * {
    line-height: 1.2;
    box-sizing: border-box;
}
.philippines-family-section2,
.philippines-family-section6 {
    background: #FBF8E5;
}
.philippines-family-width {
    max-width: 1080px;
    margin: 0 auto;
    padding: 6rem 0;
    text-align: center;
    color: #191919;
}
.philippines-family-section3 .philippines-family-width,
.philippines-family-section4 .philippines-family-width,
.philippines-family-section5 .philippines-family-width {
    padding:11rem 0 6rem ;
}
.color-red {
    color: #CE1126;
}
.philippines-family-col {
    padding: 1.5rem 0 2rem;
    background: #0010FF;
    border-radius: 2.5rem;
}
.philippines-family-col strong {
    display: inline-block;
    width: 9.6rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    background: #FFFFFF;
    border-radius: 3rem;
    font-size: 1.4rem;
    color: #1333A2;
}
.philippines-family-col li {
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.4;
}
.philippines-family-sub-title {
    font-size: 3rem;
    color: #000;
}
.philippines-family-sub-text {
    font-size: 1.6rem;
}
@media screen and (max-width: 1200px) {
    .philippines-family-width {
        padding: 6rem 20px;
    }
    .philippines-family-section3 .philippines-family-width,
    .philippines-family-section4 .philippines-family-width,
    .philippines-family-section5 .philippines-family-width {
        padding:11rem 20px 6rem ;
    }
}
@media screen and (max-width: 767px) {
    .philippines-family-width {
        padding: 4rem 20px;
    }
    .philippines-family-col {
        padding: 1.5rem 1rem 2rem;
        border-radius: 1.5rem;
    }
    .philippines-family-col strong {
        width: 100%;
        font-size: calc(1rem + 0.5556vw);
    }
    .philippines-family-col li {
        font-size: calc(1rem + 0.5556vw);
    }
    .philippines-family-sub-title {
        font-size: calc(1rem + 4.167vw);
    }
    .philippines-family-sub-text {
        font-size: calc(1rem + 1.389vw);
    }
    .philippines-family-section3 .philippines-family-width,
    .philippines-family-section4 .philippines-family-width,
    .philippines-family-section5 .philippines-family-width {
        padding:8rem 20px 4rem ;
    }   
}
/*******************************************************************************
                                필리핀 가족연수
********************************************************************************/
.philippines-family-section1 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section1-bg01-230602.jpg") no-repeat center center;
    background-size: cover;
}
.philippines-family-section1 h1 {
    margin-bottom: 1rem;
    font-size: 6.8rem;
    color: #000;
}
.philippines-family-section1 h1 span {
    display: block;
}
.philippines-family1-text {
    display: inline-block;
    padding: .5rem 2rem;
    margin-bottom: 4.5rem;
    background: #000;
    border-radius: 2rem;
    font-size: 2rem;
    color: #fff;
}
.philippines-family1-con {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 4rem;
}
@media screen and (max-width: 767px) {
    .philippines-family-section1 h1 {
        font-size: calc(1rem + 10.2786vw);
    }
    .philippines-family1-text {
        padding: .2rem 1.5rem;
        font-size: calc(1rem + 1.389vw);
    }
    .philippines-family1-con {
        grid-gap: 1.5rem;
    }
}

/*******************************************************************************
                            필리핀 가족연수 프로그램
********************************************************************************/
.philippines-family-section2 .philippines-family-sub-title {
    margin-bottom: 1rem;
}
.philippines-family-section2 .philippines-family-sub-text {
    margin-bottom: 8rem;
}
.philippines-family-section2 .philippines-family-sub-text:last-child {
    margin-bottom: 0;
}
.philippines-family2-conBox {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1.5rem;
}
.philippines-family2-col {
    grid-column: 2 span;
}
.philippines-family2-col:last-child {
    grid-column: 1 span;
}
.philippines-family2-con {
    position: relative;
    padding: 5rem 0 7.1rem;
    background: #fff;
    border-radius: 2.5rem;
}
.philippines-family2-con > span {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-50%);
    display: inline-block;
    width: 9rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section2-img01-230602.png") no-repeat center center;
    background-size: cover;
}
.philippines-family2-col:last-child .philippines-family2-con > span {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section2-img02-230602.png") no-repeat center center;
    background-size: cover;
}
.philippines-family2-con > p {
    font-size: 1.6rem;
    font-weight: 700;
}
.philippines-family2-col .philippines-family1-con {
    grid-gap: 1.5rem;
    transform: translateY(-50%);
}
.philippines-family2-col:last-child .philippines-family1-con {
    grid-template-columns: repeat(1,1fr);    
}
.philippines-family2-col:last-child .philippines-family-col {
    background: #191919;
}
.philippines-family2-col:last-child .philippines-family1-con strong {
    color: #191919;
}

@media screen and (max-width: 767px) {
    .philippines-family2-conBox {
        grid-gap: 10px;
    }
    .philippines-family2-con {
        padding: 5rem 1rem 7.1rem;
        border-radius: 1.5rem;
    }
    .philippines-family2-con > span {
        width: 5rem;
    }
    .philippines-family2-con > p {
        font-size: calc(1rem + 1.389vw);
    }
    .philippines-family2-col .philippines-family1-con {
        grid-gap: 1.5rem;
        transform: translateY(-50%);
    }
}
/*******************************************************************************
                            영어과정
********************************************************************************/
.philippines-family-section3 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section3-bg01-230602.jpg") no-repeat center top;
    background-size: 100%;
}
.philippines-family-section4 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section4-bg01-230602.jpg") no-repeat center top;
    background-size: 100%;
}
.philippines-family-section5 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section5-bg01-230602.jpg") no-repeat center top;
    background-size: 100%;
}
.philippines-family-section-titleBox {
    width: calc(100% - 4rem );
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 3rem 0;
    background: #fff;
    border-radius: 2.5rem;
}
.philippines-family-section-titleBox > p {
    font-size: 1.6rem;
}
.philippines-family-section-titleBox > h2 {
    position: relative;
    display: inline-block;
    margin-bottom: 2.1rem;
    font-size: 3rem;
    color: #0010FF;
}
.philippines-family-section-titleBox > h2 > span {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(-50%,-50%);
    aspect-ratio: 1 / 1;
    width: 2.5rem;
    border-radius: 0.5rem;
    background: #0010FF;
    color: #fff;
    font-size: 2rem;
    line-height: 2.5rem;
}
.philippines-family-section-titleBox > div > span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #CE1126;
    background: rgba(206, 17, 38, 0.05);
    font-size: 1.1rem;
    color: #CE1126;
}
/* //타이틀 박스 */

.philippines-family-section-row {
    margin-bottom: 5rem;
}
.philippines-family-section-row ul li {
    padding: 1rem 0;
    margin-bottom: 1rem;
    border: 1px solid #C5C5C5;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.philippines-family-section-row ul li:last-child {
    margin-bottom: 0;
}
.philippines-family-section-row ul li h3 {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    color: #CE1126;
}
.philippines-family-section-row ul li p {
    font-size: 1.1rem;
    color: #767676;
}
/* //리스트 */


.philippines-family-section-row-title {
    display: inline-block;
    background: #000000;
    margin-bottom: 2rem;
    padding: .4rem 1.6rem;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 3rem;
}
.philippines-family-section-row-title-text {
    margin-bottom: 1rem;
}
.philippines-family-section-row-text {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: #767676;
}
.philippines-family-section-table-title {
    padding: 1rem;
    background: #EFF1F6;
    border: 1px solid #C5C5C5;
    font-size: 1.1rem;
    color: #0010FF;
    margin-bottom: -1px;
}
.philippines-family-section-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5rem;
}
.philippines-family-section-mo-table {
    display: none;
    border-bottom: 1px solid #C5C5C5;
}
.philippines-family-section-table.table-3 th,
.philippines-family-section-table.table-3 td {
    width: 33.3333%;
}
.philippines-family-section-table.table-3.table-3-2 th,
.philippines-family-section-table.table-3.table-3-2 td {
    width: 25%;
}
.philippines-family-section-table.table-3.table-3-2 th:nth-child(2),
.philippines-family-section-table.table-3.table-3-2 td:nth-child(2) {
    width: 50%;
}
.philippines-family-section-table.table-2 th,
.philippines-family-section-table.table-2 td {
    width: 50%;
}
.philippines-family-section-table.table-1 th,
.philippines-family-section-table.table-1 td {
    width: 100%;
}
.philippines-family-section-table.table-4 th, 
.philippines-family-section-table.table-4 td {
    width: 25%;
}
.philippines-family-section-mo-table h4,
.philippines-family-section-table th,
.philippines-family-section-table td {
    padding: 1rem 0;
    border-bottom: 1px solid #C5C5C5;
}
.philippines-family-section-mo-table h4 + h4,
.philippines-family-section-mo-table p + p,
.philippines-family-section-table th + th,
.philippines-family-section-table td + td {
    border-left: 1px solid #C5C5C5;
}
.philippines-family-section-mo-table h4,
.philippines-family-section-table th {
    background: #F8F8F8;
    border-top: 1px solid #C5C5C5;
    font-size: 1.1rem;
    font-weight: 400;
}
.philippines-family-section-mo-table p,
.philippines-family-section-table td {
    padding: 1rem;
    background: #fff;
    color: #767676;
    font-size: 0.9rem;
}
.philippines-family-section-table td > span {
    display: block;
    color: #191919;
}

.philippines-family-section-plus {
    margin-bottom: 1rem;
}
.philippines-family-section-plus > span {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 2.9rem;
    background: #000;
    border-radius: 50%;
    margin: 0 auto;
}
.philippines-family-section-plus > span > span {
    display: inline-block;
    width: 1.2rem;
    aspect-ratio: 1 / 1;
    clip-path: polygon(0 35%, 35% 35%, 35% 0, 65% 0%, 66% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
    background: #fff;
}
/* //테이블 */

.philippines-family-section-row-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 1.5rem;
}
.philippines-family-section-row-grid-col {
    padding: 2rem 0;
    background: #F8FAEC;
    border-radius: 0.5rem;
}
.philippines-family-section-row-grid-col div {
    width: 5rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto 2rem;
}
.philippines-family-section-row-grid-col strong {
    display: block;
    font-size: 1.1rem;
}
.philippines-family-section-row-grid-col span {
    font-size: 0.9rem;
    color: #767676;
}
.philippines-family-section-row-grid-col div.icon-1 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon01-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-2 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon02-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-3 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon03-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-4 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon04-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-5 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon05-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-6 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon06-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-7 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon07-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-col div.icon-8 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-icon08-230602.png") no-repeat center top;
    background-size: cover;
} 
.philippines-family-section-row-grid-text {
    font-size: 1.4rem;
    margin-top: 2rem;
}
/* //그리드 */

@media screen and (max-width: 767px) {
    .philippines-family-section3 {
        background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section3-bg01-230602.jpg") no-repeat center top;
        background-size: 200%;
    }
    .philippines-family-section4 {
        background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section4-bg01-230602.jpg") no-repeat center top;
        background-size: 200%;
    }
    .philippines-family-section5 {
        background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section5-bg01-230602.jpg") no-repeat center top;
        background-size: 200%;
    }
    .philippines-family-section-titleBox {
        width: calc(100% - 2rem );
    }
    .philippines-family-section-titleBox > p {
        font-size: calc(1rem + 1.389vw);
    }
    .philippines-family-section-titleBox > h2 {
        font-size: calc(1rem + 4.167vw);
    }
    .philippines-family-section-titleBox > h2 > span {
        font-size: calc(1rem + 3.0558vw);
        transform: translate(-5%,-50%);
    }
    .philippines-family-section-titleBox > div > span {
        font-size: calc(1rem + 0.5556vw);
    }
    /* //타이틀 박스 */
    .philippines-family-section-row ul li h3 {
        font-size: calc(1rem + 1.389vw);
    }
    .philippines-family-section-row ul li p {
        font-size: calc(1rem + 0.5556vw);
    
    }
    /* //리스트 */
    
    
    .philippines-family-section-row-title {
        padding: .4rem 1.6rem;
        font-size: calc(1rem + 0.8334vw);
    }
    .philippines-family-section-row-text {
        font-size: calc(1rem + 0.2778vw);
    }
    .philippines-family-section-table-title {
        font-size: calc(1rem + 0.8334vw);
    }
    .philippines-family-section-mo-table h4,
    .philippines-family-section-table th {
        font-size: calc(1rem + 0.8334vw);
    }
    .philippines-family-section-mo-table p,
    .philippines-family-section-table td {
        font-size: 1rem;
    }
    .philippines-family-section-table.table-4 {
        display: none;
    }
    .philippines-family-section-mo-table {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    /* //테이블 */
    
    .philippines-family-section-row-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .philippines-family-section-row-grid-col div {
        width: 50%;
        margin: 0 auto 2rem;
    }
    .philippines-family-section-row-grid-col strong {
        font-size: calc(1rem + 0.8334vw);
    }
    .philippines-family-section-row-grid-col span {
        font-size: calc(1rem + 0.2778vw);
    }
    .philippines-family-section-row-grid-text {
        font-size: calc(1rem + 0.8334vw);
        margin-top: 4rem;
    }
    /* //그리드 */
}

/*******************************************************************************
                            국내 1위, edm유학센터
********************************************************************************/
.philippines-family-section6 .philippines-family-sub-title {margin-bottom: 4rem;}
.philippines-family-section6-con {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    margin-bottom: 4.5rem;
    background: #fff;
    border-radius: 0.5rem;
}
.philippines-family-section6-imgBox {
    width: 50%;
    aspect-ratio: 500 / 357;
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/philippines-family-training/philippines-family-section6-img01-230602.png") no-repeat center top;
    background-size: cover;
}
.philippines-family-section6-textBox {
    width: calc(50% - 1.5rem);
    text-align: left;
}
.philippines-family-section6-textBox > h2 {
    font-size: 1.6rem;
}
.philippines-family-section6-textBox > span {
    display: block;
    margin-bottom: 2rem;
    font-size: 0.8rem;
    color: #767676;
}
.philippines-family-section6-textBox > span > strong {
    display: block;
    margin-bottom: 1.1rem;
    font-size: 1.1rem;
    color: #0010FF;
}
.philippines-family-section6-textBox > p {
    color: #767676;
    font-size: 1.1rem;
}
.philippines-family-section6-video {
    width: calc(100% - 14rem);   
    margin: 0 auto 5rem;
}
@media screen and (max-width: 767px) {
    .philippines-family-section6-con {
        display: block;
        padding: 1rem;
    }
    .philippines-family-section6-imgBox {
        width: 100%;
        margin-bottom: 1rem;
    }
    .philippines-family-section6-textBox {
        width: 100%;
    }
    .philippines-family-section6-textBox > h2 {
        font-size: calc(1rem + 1.389vw);
    }
    .philippines-family-section6-textBox > span {
        font-size: 1rem;
    }
    .philippines-family-section6-textBox > span > strong {
        font-size: calc(1rem + 0.5556vw);
    }
    .philippines-family-section6-textBox > p {
        font-size: calc(1rem + 0.5556vw);

    }
    .philippines-family-section6-video {
        width: 100%;
    }
}



/*******************************************************************************
                            소비자가 선택한 유학기업 1위
********************************************************************************/
.philippines-family-section7 {
    background: #6D453B;
}
.philippines-family-section7 > div {
    text-align: left;
    position: relative;
}
.philippines-family-section7-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 85%;
}
.philippines-family-section7-img > img {
    width: 100%;
}
.philippines-family-section7-logo {
    display: inline-block;
    text-align: left;
    line-height: 1;
}
.philippines-family-section7-logo > span {
    font-size: 1.6rem;
    display: block;
    color: #fff;
}
.philippines-family-section7-logo > svg {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .philippines-family-section7 > div {
        padding-bottom: 70.0000vw;
        text-align: center;
    }
    .philippines-family-section7-img {
        width: 140%;
    }
}




/*******************************************************************************
                            애니메이션
********************************************************************************/
.philippines-family-section-titleBox {
    opacity: 0;
}
.active .philippines-family-section-titleBox {
    animation: animation1 .7s  forwards;
}
.philippines-family-col {
    opacity: 0;
    animation: animation1 .7s .35s forwards;
}
.philippines-family-col:nth-of-type(2) {
    animation-delay: .7s;
}
@keyframes animation1 {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}