/******************************************************************************* 레이아웃 ********************************************************************************/ .philippines-junior-abroad .max-width {text-align: center;} #programs-detail .philippines-junior-abroad .contents{padding: 0;} .philippines-junior-section1 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section1-bg01.jpg")no-repeat center center; background-size: cover; } .philippines-junior-section2, .philippines-junior-section5 { background: #FBF8E5; } .philippines-junior-section4 { background: #E5F6FB url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-bg01.jpg")no-repeat center top; background-size: 100%; } .philippines-junior-section6 { background: #E5F6FB; } .philippines-junior-abroad h2 { margin-bottom: 60rem; font-size: 36rem; line-height: 1.2; color: #000; } .philippines-junior-abroad h2 > span { display: block; font-weight: 400; } .philippines-junior-abroad h2 > small { font-size: 24rem; } .philippines-junior-abroad h2 > strong { color: #CE1126; } .philippines-junior-last-text { font-size: 24rem; font-weight: 700; line-height: 1.2; color: #000; } .philippines-junior-last-text > span { color: #CE1126; } .philippines-junior-abroad .main-video .videoWrap{border-radius: 0; isolation: isolate;} .philippines-junior-abroad .video-wrap figure:after{display: none;} @media (min-width: 992px){ .philippines-junior-abroad h2 { font-size: 60rem; } .philippines-junior-abroad h2 > small { font-size: 32rem; } .philippines-junior-last-text { font-size: 32rem; } } @media (max-width: 991px){ .philippines-junior-abroad h2 { margin-bottom: 40rem; font-size: 28rem; } } /******************************************************************************* 에니메이션 ********************************************************************************/ .philippines-junior-section1 h1 > strong > strong, .philippines-junior-section1 h1 > strong > span, .philippines-junior-section2-col { opacity: 0; } .philippines-junior-section1 h1 > strong > span, .active .philippines-junior-section2-col { animation: animation1 1s forwards; } .active .philippines-junior-section2-col:nth-child(2) { animation-delay: .3s; } .philippines-junior-section1 h1 > strong > strong, .active .philippines-junior-section2-col:nth-child(3) { animation-delay: .6s; } .philippines-junior-section3-list li { opacity: 0; } .philippines-junior-section1 h1 > strong > strong, .active .philippines-junior-section3-list li { animation: animation2 1s forwards; } .active .philippines-junior-section3-list li:nth-child(2) { animation-delay: .2s; } .philippines-junior-section1 h1 > strong > strong, .active .philippines-junior-section3-list li:nth-child(3) { animation-delay: .4s; } .active .philippines-junior-section3-list li:nth-child(4) { animation-delay: .6s; } .active .philippines-junior-section3-list li:nth-child(5) { animation-delay: .8s; } @keyframes animation1 { 0% { opacity: 0; transform: translateY(20%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes animation2 { 0% { opacity: 0; transform: translatex(-20%); } 100% { opacity: 1; transform: translateX(0); } } /******************************************************************************* 영어 학습의 시기를 놓치지 마세요 ********************************************************************************/ .philippines-junior-section2{padding: 100rem 0;} .philippines-junior-section2-con { display: grid; margin-bottom: 40rem; grid-template-columns: repeat(3,1fr); grid-gap: 10rem; } .philippines-junior-section2-col { padding: 0 16rem 40rem; background: #FDDC00; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section2-col .imgBox { aspect-ratio: 80 / 86; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; transform: translateY(-30rem); } .philippines-junior-section2-col .imgBox.img1 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section2-img01.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section2-col .imgBox.img2 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section2-img02.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section2-col .imgBox.img3 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section2-img03.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section2-col p { margin-bottom: 20rem; height: 80rem; font-size: 24rem; color: #767676; } @media (min-width: 992px){ .philippines-junior-section2-con { grid-gap: 32rem; } .philippines-junior-section2-col { padding: 0 0 40rem; } .philippines-junior-section2-col .imgBox { margin: 0 auto; width: 70%; aspect-ratio: 220 / 180; transform: translateY(-20rem); } .philippines-junior-section2-col p { height: auto; font-size: 24rem; } } @media (max-width: 991px){ .philippines-junior-section2{padding: 65rem 0;} .philippines-junior-section2-con { margin-bottom: 24rem; } .philippines-junior-section2-col { padding: 0 10rem 24rem; } .philippines-junior-section2-col p { font-size: 16rem; } .philippines-junior-last-text { font-size: 16rem; } } /******************************************************************************* 관리형 프로그램 추천 대상 ********************************************************************************/ .philippines-junior-section3-list { margin-bottom: 60rem; } .philippines-junior-section3-list > li { margin-bottom: 20rem; padding: 20rem 0; background: transparent linear-gradient(111deg, #0088FF 0%, #202CD4 100%) 0% 0% no-repeat padding-box; font-size: 24rem; font-weight: 700; color: #fff; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section3-list > li:last-of-type { margin-bottom: 0; } .philippines-junior-section3-list > li > span { color: #FDDC00; } .philippines-junior-section3 .philippines-junior-last-text { margin-bottom: 80rem; } .philippines-junior-section3-con { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 28rem; } .philippines-junior-section3-con-col { padding: 40rem 10rem 30rem; position: relative; background: #EFF1F6; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section3-con-col + div::before { position: absolute; top: 50%; right: calc(100% + .7em); width: 24rem; height: 24rem; background: #000; content: ''; transform: translate(50%,-50%); clip-path: polygon(0 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%); } .philippines-junior-section4-con h3, .philippines-junior-section3-con-col h3 { display: inline-block; padding:10rem 40rem; position: absolute; top: 0; left: 50%; background: #000; font-size: 24rem; color: #fff; white-space: nowrap; transform: translate(-50%,-50%); -webkit-border-radius: 80rem; isolation: isolate; -moz-border-radius: 80rem; isolation: isolate; border-radius: 80rem; isolation: isolate; } .philippines-junior-section5-textBox ul, .philippines-junior-section3-con-col ul { display: inline-block; text-align: left; } .philippines-junior-section5-con2-list > li dl dd > ul li, .philippines-junior-section5-con table tr td ul li, .philippines-junior-section5-textBox ul li, .philippines-junior-section3-con-col ul li { margin-left: 10rem; position: relative; font-size: 24rem; color: #767676; } .philippines-junior-section5-con2-list > li dl dd > ul li::before, .philippines-junior-section5-con table tr td ul li::before, .philippines-junior-section5-textBox ul li::before, .philippines-junior-section3-con-col ul li::before { position: absolute; top: 0; right: 100%; content: 'ㆍ'; } @media (min-width: 992px){ .philippines-junior-section3-list > li { font-size: 28rem; -webkit-border-radius: 40rem; isolation: isolate; -moz-border-radius: 40rem; isolation: isolate; border-radius: 40rem; isolation: isolate; } .philippines-junior-section3-con { grid-gap: 60rem; } .philippines-junior-section3-con-col { padding: 60rem 0 40rem; } .philippines-junior-section3-con-col + div::before { right: calc(100% + 32rem); width: 40rem; height: 40rem; } .philippines-junior-section4-con h3, .philippines-junior-section3-con-col h3 { font-size: 28rem; } .philippines-junior-section5-con table tr td ul li, .philippines-junior-section5-textBox ul li, .philippines-junior-section3-con-col ul li { margin-left: 20rem; font-size: 24rem; } } @media (max-width: 991px){ .philippines-junior-section3-list > li { margin-bottom: 12rem; padding: 16rem 0; font-size: 16rem;} .philippines-junior-section4-con h3, .philippines-junior-section3-con-col h3 { padding: 4rem 20rem; font-size: 16rem; } .philippines-junior-section3-con-col ul li { font-size: 16rem; } .philippines-junior-section3-con-col + div::before { right: calc(100% + 12rem);width: 16rem; height: 16rem;} .philippines-junior-section3 .philippines-junior-last-text {margin-bottom: 52rem;} } /******************************************************************************* 관리형 프로그램 추천 대상 ********************************************************************************/ .philippines-junior-section4{padding: 100rem 0;} .philippines-junior-section4-list { margin-bottom: 120rem; } .philippines-junior-section4-list li { margin-bottom: 20rem; } .philippines-junior-section4-list li:last-of-type { margin-bottom: 0; } .philippines-junior-section4-list li .imgBox { width: 100%; aspect-ratio: 16 / 5; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section4-list li .textBox { box-shadow: 0 3rem 6rem rgba(0,0,0, 0.2); overflow: hidden; height: 0; background: #fff; text-align: left; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; opacity: 0; } .active .philippines-junior-section4-list li .textBox { padding: 20rem 20rem; height: auto; transition: all 1s; opacity: 1; } .active .philippines-junior-section4-list li:nth-child(2) .textBox { transition-delay: .2s } .active .philippines-junior-section4-list li:nth-child(3) .textBox { transition-delay: .4s } .active .philippines-junior-section4-list li:nth-child(4) .textBox { transition-delay: .6s } .active .philippines-junior-section4-list li:nth-child(5) .textBox { transition-delay: .8s } .philippines-junior-section5-con3 h5, .philippines-junior-section4-list li .textBox h3 { font-size: 24rem; color: #000; } .philippines-junior-section5-con3 h5 span, .philippines-junior-section4-list li .textBox h3 span { color: #CE1126; } .philippines-junior-section5-con3 p, .philippines-junior-section4-list li .textBox p { font-size: 24rem; color: #767676; } .philippines-junior-section4-con { display: grid; margin-bottom: 80rem; padding: 40rem 10rem 30rem; position: relative; background: #fff; grid-template-columns: repeat(2,1fr); grid-gap: 32rem; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section4-con:last-of-type { margin-bottom: 0; } .philippines-junior-section4-con-imgBox { box-shadow: 0 3rem 6rem rgba(0,0,0, 0.2); overflow: hidden; aspect-ratio: 346 / 510; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section4 .img1 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img01.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img2 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img02.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img3 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img03.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img4 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img04.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img5 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img05.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img6 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img06.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img7 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img07.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img8 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img08.jpg") no-repeat center center; background-size: cover; } .philippines-junior-section4 .img9 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section4-img09.jpg") no-repeat center center; background-size: cover; } @media (min-width: 992px){ .philippines-junior-section4-list li { margin-bottom: 40rem; position: relative; } .philippines-junior-section4-list li .imgBox { width: 35%; aspect-ratio: 170 / 67; } .philippines-junior-section4-list li .textBox { margin-top: 60rem; padding: 0; overflow: hidden; position: absolute; bottom: 0; left: 0; width: 0; opacity: 0; box-sizing: border-box; } .philippines-junior-section4-list li .textBox h3, .philippines-junior-section4-list li .textBox p { white-space: nowrap; } .active .philippines-junior-section4-list li .textBox { padding: 20rem 40rem; left: 30%; width: 70%; transition: all 1s; opacity: 1; } .active .philippines-junior-section4-list li:nth-child(2) .textBox { transition-delay: .2s } .active .philippines-junior-section4-list li:nth-child(3) .textBox { transition-delay: .4s } .active .philippines-junior-section4-list li:nth-child(4) .textBox { transition-delay: .6s } .active .philippines-junior-section4-list li:nth-child(5) .textBox { transition-delay: .8s } .philippines-junior-section5-con3 h5, .philippines-junior-section4-list li .textBox h3 { font-size: 28rem; } .philippines-junior-section5-con3 p, .philippines-junior-section4-list li .textBox p { font-size: 24rem; } .philippines-junior-section4-con { padding: 60rem 40rem 40rem; } } @media (min-width: 1200px){ .philippines-junior-section4-con { padding: 60rem 160rem 40rem; } } @media (max-width: 991px){ .philippines-junior-section4{padding: 65rem 0;} .philippines-junior-section4-con {margin-bottom: 52rem;} .philippines-junior-section4-list {margin-bottom: 80rem;} .philippines-junior-section4-list li .textBox h3 {font-size: 16rem;} .philippines-junior-section5-con3 p, .philippines-junior-section4-list li .textBox p {font-size: 16rem;} .active .philippines-junior-section4-list li .textBox {padding: 10rem; font-size: 16rem;} } /******************************************************************************* 관리형 프로그램 상세 안내 ********************************************************************************/ .philippines-junior-abroad .philippines-junior-section5{margin-top: 0; padding: 100rem 0;} .philippines-junior-section5-con-box { margin-bottom: 96rem; } .philippines-junior-section5-con-box h3 { margin-bottom: 32rem; } .philippines-junior-section5-con-box h3 strong { display: inline-block; margin-bottom: 40rem; padding: 10rem 60rem; position: relative; background: #0010FF; font-size: 24rem; color: #fff; -webkit-border-radius: 80rem; isolation: isolate; -moz-border-radius: 80rem; isolation: isolate; border-radius: 80rem; isolation: isolate; } .philippines-junior-section5-con-box h3 strong::before { position: absolute; top: 100%; left: 50%; width: 4rem; height: 40rem; background: #0010FF; content: ''; transform: translate(-50%); } .philippines-junior-section5-con-box h3 span { display: inline-block; padding: 20rem 32rem; border: 1rem solid #CE1126; position: relative; background: #CE112610; font-size: 24rem; color: #CE1126; } .philippines-junior-section5-con-box h3 span::before { position: absolute; top: 0; left: 50%; width: 7rem; height: 7rem; background: #0010FF; content: ''; transform: translate(-50%,-50%); -webkit-border-radius: 50%; isolation: isolate; -moz-border-radius: 50%; isolation: isolate; border-radius: 50%; isolation: isolate; } .philippines-junior-section5-text { margin-bottom: 32rem; font-size: 24rem; font-weight: 700; } .philippines-junior-section5-con-wrap { padding: 32rem; background: #fff; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section5-textBox { margin-bottom: 40rem; padding: 40rem 20rem; background: #EFF1F6; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section5-textBox h4 { font-size: 24rem; color: #CE1126; } .philippines-junior-section5-textBox ul li span { color: #CE1126; } .philippines-junior-section5-con { margin-bottom: 40rem; } .philippines-junior-section5-con table { border-top: 1rem solid #C5C5C5; width: 100%; border-collapse: collapse; } .philippines-junior-section5-con table tr td, .philippines-junior-section5-con table tr th { padding: 16rem 8rem; border-bottom: 1rem solid #C5C5C5; border-left: 1rem solid #C5C5C5; font-size: 18rem;} .philippines-junior-section5-con table tr th:first-child, .philippines-junior-section5-con table tr td:first-child {border-left: 0;} .philippines-junior-section5-con table tr td + tr td, .philippines-junior-section5-con table tr th + th { border-left: 1rem solid #C5C5C5; } .philippines-junior-section5-con table tr th { background: #F8F8F8; font-weight: 400; color: #000; } .philippines-junior-section5-con table tr td { vertical-align: top; } .philippines-junior-section5-con table tr td ul { text-align: left; } .philippines-junior-section5-con-imgBox > div { margin-bottom: 20rem; position: relative; aspect-ratio: 323 / 244; } .philippines-junior-section5-con-imgBox > div:last-of-type { margin-bottom: 0; } .philippines-junior-section5-con-imgBox > div span { margin: -1rem; overflow: hidden; position: absolute; width: 1rem; height: 1rem; clip-path: polygon(0 0, 0 0, 0 0); } .philippines-junior-section5-con-imgBox .img1 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section5-img01.jpg") no-repeat 75%; background-size: contain; } .philippines-junior-section5-con-imgBox .img2 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section5-img02.jpg") no-repeat right; background-size: contain; } .philippines-junior-section5-con-text-list { margin-top: 20rem; text-align: left; } .philippines-junior-section5-con-text-list li { font-size: 20rem; color: #767676; } .philippines-junior-section5-con-text-list li::before { content: '※ '; } .philippines-junior-section5-con2-list > li { margin-bottom: 40rem; padding: 10rem; border: 1rem solid #C5C5C5; box-shadow: 0 3rem 6rem rgba(0,0,0, 0.2); position: relative; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section5-con2-list > li:last-of-type { margin-bottom: 0; } .philippines-junior-section5-con2-list > li + li::before { position: absolute; bottom: 100%; left: 50%; width: 60rem; background: #000; content: ''; transform: translate(-50%, 0); aspect-ratio: 45 /40; clip-path: polygon(20% 60%, 20% 0, 80% 0, 80% 60%, 100% 60%, 50% 100%, 0 60%); } .philippines-junior-section5-con2-list > li dl dt { display: flex; align-items: center; justify-content: center; margin-bottom: 32rem; height: 80rem; background: #FFE716; font-size: 24rem; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section5-con2-list > li dl dd > ul { text-align: left; } .philippines-junior-section5-con-imgBox2 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section5-img03.jpg") no-repeat center center; background-size: cover; aspect-ratio: 50 / 19; } .philippines-junior-section5-con3 li { margin-bottom: 20rem; padding: 20rem 20rem; border: 1rem solid #C5C5C5; box-shadow: 0 3rem 6rem rgba(0,0,0,0.2); background: #fff; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section5-con4 { padding: 20rem 20rem; border: 1rem solid #C5C5C5; box-shadow: 0 3rem 6rem rgba(0,0,0,0.2); -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section5-con4-row { margin-bottom: 20rem; padding-bottom: 32rem; border-bottom: 1rem solid #C5C5C5; } .philippines-junior-section5-con4-row:last-of-type { margin-bottom: 0; border-bottom: none; } .philippines-junior-section5-con4-row > dt { margin-bottom: 20rem; padding: 20rem 0; background: #FFE716; font-size: 24rem; font-weight: 700; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate;} .philippines-junior-section5-con4-row > dd { font-size: 24rem; color: #767676; text-align: left; } @media (min-width: 992px){ .philippines-junior-section5-con-box h3 strong { margin-bottom: 32rem; font-size: 32rem; } .philippines-junior-section5-con-box h3 strong::before { height: 32rem; } .philippines-junior-section5-con-box h3 span { padding: 10rem 20rem; font-size: 24rem; } .philippines-junior-section5-con-box h3 span::before { width: 12rem; height: 12rem; } .philippines-junior-section5-text { font-size: 28rem; color: #000; } .philippines-junior-section5-con-wrap { padding: 40rem; } .philippines-junior-section5-textBox { padding: 60rem 0; } .philippines-junior-section5-textBox h4 { font-size: 28rem; } .philippines-junior-section5-con table tr td ul { display: grid; margin: 0 auto; width: 80%; grid-template-columns: repeat(2,1fr); } .philippines-junior-section5-con-imgBox { display: grid; margin: 0 auto; width: 70%; grid-template-columns: repeat(2,1fr); grid-gap: 60rem; } .philippines-junior-section5-con-imgBox > div { margin-bottom: 0; } .philippines-junior-section5-con2-list > li { padding: 20rem; } .philippines-junior-section5-con2-list > li dl { display: flex; justify-content: space-between; } .philippines-junior-section5-con2-list > li dl dt { margin: 0; width: 30%; height: auto; font-size: 24rem; } .philippines-junior-section5-con2-list > li dl dd { width: calc( 70% - 32rem); } .philippines-junior-section5-con2-list > li dl dd > ul li { font-size: 18rem; } .philippines-junior-section5-con4 { display: grid; padding: 40rem 0; grid-template-columns: repeat(2,1fr); row-gap: 40rem; } .philippines-junior-section5-con4-row { margin-bottom: 0; padding: 0 20rem; border-bottom: none; } .philippines-junior-section5-con4-row:nth-child(2n + 2) { border-left: 1rem solid #C5C5C5; } .philippines-junior-section5-con4-row > dt { font-size: 24rem; } .philippines-junior-section5-con4-row > dd { font-size: 16rem; } } @media (max-width: 991px){ #programs-detail .philippines-junior-abroad .philippines-junior-section5{padding: 65rem 0; margin-top: 0;} .philippines-junior-section5-con {margin-bottom: 24rem;} .philippines-junior-section5-con-box {margin-bottom: 60rem;} .philippines-junior-section5-con-box h3 strong { margin-bottom: 20rem; padding: 4rem 32rem; font-size: 16rem;} .philippines-junior-section5-con-box h3 strong::before { height: 20rem; } .philippines-junior-section5-con-box h3 span {padding: 10rem 16rem; font-size: 16rem; } .philippines-junior-section5-text { margin-bottom: 20rem; font-size: 16rem; } .philippines-junior-section5-con-wrap { padding: 20rem; } .philippines-junior-section5-textBox { margin-bottom: 24rem; padding: 32rem 10rem;} .philippines-junior-section5-textBox h4 { font-size: 16rem; } .philippines-junior-section5-con table tr td ul { width: 100%; grid-template-columns: repeat(1,1fr); } .philippines-junior-section5-con2-list > li dl dd > ul li, .philippines-junior-section5-con table tr td ul li, .philippines-junior-section5-textBox ul li, .philippines-junior-section3-con-col ul li, .philippines-junior-section5-con4-row > dd { font-size: 16rem; } .philippines-junior-section5-con4-row > dt, .philippines-junior-section5-con2-list > li dl dt { margin-bottom: 2rem; margin-bottom: 6rem; padding: 0; height: 52rem; font-size: 16rem; line-height: 52rem;} .philippines-junior-section5-con2-list > li {margin-bottom: 24rem;} .philippines-junior-section5-con2-list > li + li::before {width: 40rem; height: 40rem;} .philippines-junior-section5-con table tr td, .philippines-junior-section5-con table tr th {padding: 10rem 4rem; font-size: 14rem;} .philippines-junior-section5-con-text-list li {font-size: 14rem;} .philippines-junior-section5-con3 h5, .philippines-junior-section4-list li .textBox h3 {font-size: 16rem;} .philippines-junior-section5-con3 li { margin-bottom: 12rem; padding: 10rem 10rem;font-size: 16rem;} } /******************************************************************************* 안심유학 ********************************************************************************/ .philippines-junior-abroad .philippines-junior-section6{margin-top: 0; padding: 100rem 0;} .philippines-junior-section6-con { margin-bottom: 80rem; padding: 32rem; background: #fff; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section6-con .imgBox { margin-bottom: 40rem; position: relative; background: #FEF6E5; aspect-ratio: 280 / 219; -webkit-border-radius: 10rem; isolation: isolate; -moz-border-radius: 10rem; isolation: isolate; border-radius: 10rem; isolation: isolate; } .philippines-junior-section6-con .imgBox > span { display: inline-block; position: absolute; bottom: 0; left: 50%; width: 70%; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/programs/details/philippines-junior-abroad/philippines-junior-section6-img01.png") no-repeat center center; background-size: cover; transform: translateX(-50%); aspect-ratio: 330 / 327; } .philippines-junior-section6-con .textBox { text-align: left; } .philippines-junior-section6-con .textBox h3 { font-size: 24rem; } .philippines-junior-section6-con .textBox p { font-size: 24rem; color: #767676; } .philippines-junior-section6-con .textBox p strong { display: inline-block; margin-bottom: 20rem; font-weight: 400; color: #0010FF; } .philippines-junior-section6-con .textBox p span { color: #CE1126; } .philippines-junior-section6-con .textBox small { display: inline-block; margin-bottom: 20rem; font-size: 20rem; color: #767676; } .philippines-junior-section6-video { margin: 0 auto 60rem; } @media (min-width: 992px){ .philippines-junior-section6-con { display: flex; justify-content: space-between; } .philippines-junior-section6-con .imgBox { margin-bottom: 0; width: 50%; aspect-ratio: auto; } .philippines-junior-section6-con .imgBox > span { width: 55%; } .philippines-junior-section6-con .textBox { width: calc(50% - 20rem); } .philippines-junior-section6-con .textBox h3 { font-size: 32rem; } .philippines-junior-section6-con .textBox p { font-size: 24rem; } .philippines-junior-section6-con .textBox small { font-size: 16rem; } .philippines-junior-section6-video { width: 70%; } } @media (max-width: 991px) { #programs-detail .philippines-junior-abroad .philippines-junior-section6{padding: 65rem 0; margin-top: 0;} .philippines-junior-section6-con {margin-bottom: 52rem; padding: 20rem;} .philippines-junior-section6-con .textBox h3 { margin-bottom: 0;font-size: 16rem;} .philippines-junior-section6-con .textBox p, .philippines-junior-section6-con .textBox small { margin-bottom: 0;font-size: 16rem;} .philippines-junior-section6-con .textBox p strong {margin-bottom: 10rem;} } /******************************************************************************* 소비자가 선택한 유학기업 1위 ********************************************************************************/ .pharmacy-section09 { background: #6D453B; } .pharmacy-section09 > div { position: relative; text-align: left; } .pharmacy-section09-img { position: absolute; right: 0; bottom: 0; width: 85%; } .pharmacy-section09-img > img { width: 100%; } .pharmacy-section09-logo { display: inline-block; line-height: 1; text-align: left; } .pharmacy-section09-logo > span { display: block; font-size: 32rem; color: #fff; } .pharmacy-section09-logo > svg { width: 100%; } @media screen and (max-width: 991px){ .pharmacy-section09 > div { padding-bottom: 264rem; text-align: center; } .pharmacy-section09-img { width: 140%; } .pharmacy-section09-logo > span { font-size: 24rem; } }