@charset "UTF-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); @font-face { font-family: 'Cafe24Shiningstar'; src: url('../../fonts/Cafe24Shiningstar-v2.0.woff') format('woff'); font-weight: normal; font-style: normal; } @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300; 400; 500; 600; 700; 800; 900&display=swap'); @font-face { font-family: 'NanumSquare'; font-weight: 700; src: url('../../fonts/NanumSquareB.ttf') format('woff'), url('../../fonts/NanumSquareB.ttf') format('woff2'); } @font-face { font-family: 'NanumSquare'; font-weight: 900; src: url('../../fonts/NanumSquareEB.ttf') format('woff'), url('../../fonts/NanumSquareEB.ttf') format('woff2'); } /******************************************************************************* 애니메이션 ********************************************************************************/ @keyframes move { 0% { transform: translateY(0); opacity: 0; } 10% ,90% { opacity: 1; } 100% { transform: translateY(45vw); opacity: 0; } } /* ---------------------------------------------- * Generated by Animista on 2023-12-29 8:21:12 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation bounce-in-bottom * ---------------------------------------- */ @-webkit-keyframes bounce-in-bottom { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(65px); transform: translateY(65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-bottom { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(65px); transform: translateY(65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes bounce-in-bottom-mo { 0% { -webkit-transform: translate(-50%,500px); transform: translate(-50%,500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translate(-50%,65px); transform: translate(-50%,65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translate(-50%,28px); transform: translate(-50%,28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translate(-50%,8px); transform: translate(-50%,8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-bottom-mo { 0% { -webkit-transform: translate(-50%,500px); transform: translate(-50%,500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translate(-50%,65px); transform: translate(-50%,65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translate(-50%,28px); transform: translate(-50%,28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translate(-50%,8px); transform: translate(-50%,8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } /******************************************************************************* layout ********************************************************************************/ .dndn-package * { box-sizing: border-box; } .dndn-package { font-family: 'Noto Sans KR', sans-serif; } .dndn-package-section02 { background: linear-gradient(180deg, #FDDBBC 10%, #FFBFA7 30%); } .dndn-package-section03 { position: relative; z-index: 1; overflow: hidden; background: #F0EFFA; } .dndn-package-section04 { background: #FFD786; } .dndn-package-section05 { background: #F4FDFC; } .dndn-package-section06 { background: #FFF6C4; } .dndn-package-section07 { background: #EBEBEB; } .dndn-package-section08 { background: #FFD786; } .dndn-package-section09 { background: linear-gradient(180deg, #FF8A6D 0%, #FFC26A 100%); } .dndn-package-width { width: 1080px; margin: 0 auto; padding: 5rem 0; text-align: center; } .dndn-package-sub-title { font-size: 3rem; margin-bottom: 4rem; color: #000; } .dndn-package-sub-title > span { font-size: 1.6rem; color: #000000; } .dndn-package-sub-title > span > strong { font-size: 2rem; } .dndn-package-sub-title > strong { color: #8150FF; } @media screen and (max-width:1200px){ .dndn-package-width { width: 100%; padding: 5rem 1.5rem; } } @media screen and (max-width:768px){ .dndn-package-sub-title { font-size: calc(1rem + 4.75vw); } .dndn-package-sub-title > span { font-size: calc(1rem + 1vw); } .dndn-package-sub-title > span > strong { font-size: calc(1rem + 2.5002vw); } } /******************************************************************************* 타이틀 ********************************************************************************/ .dndn-package-section01 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section01-bg01-221026.jpg") no-repeat center bottom; background-size: cover; } .dndn-package-section01-title { width: 75%; margin: 0 auto; padding: 4rem 3rem 4rem; background: #0C1B43; -webkit-border-radius: .75rem; -moz-border-radius: .75rem; border-radius: .75rem; color: #FFFFFF; font-size: 5.25rem; line-height: 1; } .dndn-package-section01-title > small { display: block; font-size: 1.7rem; line-height: 1.2; font-weight: 500; } .dndn-package-section01-title > strong { font-family: 'Cafe24Shiningstar', sans-serif; font-size: 10rem; font-weight: 400; color: #FAB52A; display: inline-block; line-height: 1; } .dndn-package-section01-title > span { display: inline-block; margin-top: 1.2rem; line-height: 1; font-size: 1.6rem; color: #0D1C43; background: #FAB52A; padding: .5rem 2.4rem; -webkit-border-radius: .4rem; -moz-border-radius: .4rem; border-radius: .4rem; font-weight: 700; } .dndn-package-section01-title > span > span { color: red; } @media screen and (max-width:1200px){ .dndn-package-section01-title { width: 100%; } } @media screen and (max-width:768px){ .dndn-package-section01-title { font-size: calc(1rem + 11.95vw); padding: 2rem 1rem 2rem; line-height: 1.2; } .dndn-package-section01-title > small { font-size: calc(1rem + 1.39vw); } .dndn-package-section01-title > strong { font-size: calc(1rem + 19vw); } .dndn-package-section01-title > span { font-size: calc(1rem + 0.85vw); width: 100%; padding: .5rem; } } .dndn-package-section01.dndn2406 .dndn-package-section01-title { background: #fff; color: #000000; line-height: 1.2; max-width: 712px; font-size: 5.6rem; } .dndn-package-section01.dndn2406 .dndn-package-section01-title > small { color: #8E61FF; font-size: 2rem; font-weight: 700; } .dndn-package-section01.dndn2406 .dndn-package-section01-title > strong { display: block; color: #350FA8; line-height: 1; } .dndn-package-section01.dndn2406 .dndn-package-section01-title > span { display: block; background: #350FA8; color: #fff; line-height: 1.4; } .dndn-package-section01.dndn2406 .dndn-package-section01-title > span > span { color: #FFEA33; } @media screen and (max-width:768px){ .dndn-package-section01.dndn2406 .dndn-package-section01-title { font-size: calc(1rem + 11.3898vw); } .dndn-package-section01.dndn2406 .dndn-package-section01-title > span { transform: translate(0); } .dndn-package-section01.dndn2406 .dndn-package-section01-title > span, .dndn-package-section01.dndn2406 .dndn-package-section01-title > small { font-size: calc(1rem + 2.5002vw); } } /******************************************************************************* 무엇이 걱정되나요? ********************************************************************************/ .dndn-package-section02-title { font-size: 2.3rem; color: #000; margin-bottom: 2.5rem; line-height: 1.4; } .dndn-package-section02-title > span { display: inline-block; padding: .2rem 2rem; background: #8150FF; color: #fff; font-size: 3rem; } .dndn-package-section03-con-busan li, .dndn-package-section02-con { -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; background: #fff; margin-bottom: .4rem; padding: 1rem 0; } .dndn-package-section02-con > span { font-size: 1.4rem; font-weight: 500; color: #000; position: relative; } .dndn-package-section02-con > span::before { content: ''; position: absolute; left: 105%; top: 50%; transform: translateY(-50%); width: 5.2rem; height: 4.3rem; } .dndn-package-section02-con:nth-child(2n +1) > span::before { left: auto; right: 105%; } .dndn-package-section02-text { margin-top: 3rem; font-size: 1.6rem; color: #000; } .dndn-package-section02-text > strong > strong { color: #3F07CE; } .dndn-package-section02-row1 > span::before { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section02-img01-221026.png") no-repeat center center; background-size: cover; top: 20%; } .dndn-package-section02-row2 > span::before { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section02-img02-221026.png") no-repeat center center; background-size: cover; } .dndn-package-section02-row3 > span::before { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section02-img03-221026.png") no-repeat center center; background-size: cover; } .dndn-package-section02-row4 > span::before { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section02-img04-221026.png") no-repeat center center; background-size: cover; } .dndn-package-section02-row5 > span::before { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section02-img05-221026.png") no-repeat center center; background-size: cover; top: 100%; } @media screen and (max-width:1200px){ .dndn-package-section02-con > span::before { display: none; } } @media screen and (max-width:768px){ .dndn-package-section02-title { font-size: calc(1rem + 3vw); } .dndn-package-section02-title > span { font-size: calc(1rem + 4.75vw); } .dndn-package-section02-con > span { font-size: calc(1rem + 0.85vw); } .dndn-package-section02-text { font-size: calc(1rem + 2vw); } } /******************************************************************************* 어학연수 든든 패키지 ********************************************************************************/ .dndn-package-section03-title { font-size: 3rem; color: #000; margin-bottom: 3rem; position: relative; line-height: 1.2; } .dndn-package-section03-title::before { content: ''; position: absolute; right: 0; transform: translate(50%,-10%); top: 100%; width: 16.35rem; height: 13rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section03-img01-221026.png") no-repeat center top; background-size: cover; } .dndn-package-section03-title > span { font-size: 2rem; } .dndn-package-section03-title > strong { color: #8150FF; } .dndn-package-section03-con { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1rem; margin-bottom: 2rem; } .dndn-package-section03-con-col { display: flex; justify-content: center; align-items: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 12rem; height: 12rem; background: #FFE064; border: 3px solid #FFFFFF; margin: 0 auto; } .dndn-package-section03-con-col > span { font-size: 1.5rem; line-height: 1.2; font-weight: 700; } .dndn-package-section03-con-col > span > svg { width: 1.3rem; } .dndn-package-section03-textBox { padding: 1.9rem 0; background: #E7E5F5; -webkit-border-radius: 5rem; -moz-border-radius: 5rem; border-radius: 5rem; font-size: 1.6rem; color: #000; line-height: 1.2; position: relative; font-weight: 700; } .dndn-package-section03-textBox::before { content: ''; position: absolute; left: 0; top: 50%; transform: translate(-40%,-50%); width: 8.9rem; height: 11.35rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section03-img02-221026.png") no-repeat center center; background-size: cover; } .dndn-package-section03-textBox small { display: block; margin-top: 8px; line-height: 1.4; font-size: 0.9rem; } .dndn-package-section03-textBox > span { color: #DD0000; } .busan #dndn-package-section03 * { font-family: 'NanumSquare', sans-serif; font-weight: 900; } .dndn-package-section03-con-busan { position: relative; } .dndn-package-section03-con-busan-row { padding: 2.5rem 16px !important; border-radius: 4px !important; box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 10%); } .dndn-package-section03-con-busan-row2 { background: #fff url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section03-con-busan-img01.png") no-repeat right center !important; background-size: 10% !important; } .dndn-package-section03-con-busan-row > span { display: inline-block; margin-bottom: 1.2rem; line-height: 1.2; font-weight: 900 !important; font-size: 1.7rem; } .dndn-package-section03-con-busan-row > span:last-child { margin-bottom: 0; } .dndn-package-section03-con-busan-row > span > span { display: inline-block; position: relative; z-index: 1; } .dndn-package-section03-con-busan-row > span > span::before { content: ''; position: absolute; z-index: -1; left: 4px; top: 50%; height: 50%; width: 100%; background: #FFE06450; } .dndn-package-section03-con-busan strong { color: #DD0000; font-weight: 900; } .dndn-package-section03-con-busan small { display: block; font-weight: 400 !important; font-size: 0.7rem; color: #888888; font-family: 'Noto Sans KR', sans-serif !important; } .dndn-package-section03-con-busan-text { margin-bottom: 4rem; font-size: 0.7rem; color: #888888; font-family: 'Noto Sans KR', sans-serif !important; font-weight: 400 !important; } .busan .dndn-package-section03-title::before { display: none; } .busan .dndn-package-section03-title { font-family: 'Noto Sans KR', sans-serif; } .busan .dndn-package-section03-title > span , .busan .dndn-package-section03-title > strong { font-weight: 700; } .busan .dndn-package-section03-textBox { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; } .busan .dndn-package-section03-textBox::before { display: none; } .dndn-package-section03.may { background: #FFE3F2; } .dndn-package-section03.may .dndn-package-section03-title > span { font-size: 3.75rem; letter-spacing: -1px; } .dndn-package-section03.may .dndn-package-section03-title { font-size: 3.5rem; } .dndn-package-section03.may .dndn-package-section03-textBox { background: #F9D9E9; } @media screen and (max-width:1200px){ .dndn-package-section03 .dndn-package-width { padding: 5rem 1.5rem 8rem; } .container.dndn-package-default .dndn-package-section03 .dndn-package-width { padding: 5rem 16px 8rem; } .dndn-package-section03-title::before { right: 0; transform: translate(30%,-40%); top: 0; } .dndn-package-section03-con { grid-template-columns: repeat(2,1fr); } .dndn-package-section03-textBox::before { transform: translate(0,0); } .dndn-package-section03-con-busan::before { display: none; } } @media screen and (max-width:768px){ .dndn-package-section03-con-busan-row2 { background: #fff url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section03-con-busan-img01.png") no-repeat right center !important; background-size: 20% !important; } .dndn-package-section03-title { font-size: calc(1rem + 4.75vw); } .dndn-package-section03-title > span { font-size: calc(1rem + 3vw); } .dndn-package-section03-con-busan li > span, .dndn-package-section03-con-col > span, .dndn-package-section03-textBox { font-size: calc(1rem + 1.39vw); } .dndn-package-section03-con-busan small { font-size: calc(1rem + -0.5556vw); } .dndn-package-section03-con-busan-text { text-align: left; font-size: calc(1rem + -0.5556vw); } .dndn-package-section03.may .dndn-package-section03-con-busan-row { padding: 2.5rem 10px !important; letter-spacing: -2px; } .dndn-package-section03.may .dndn-package-section03-textBox { border-radius: 12px; } .dndn-package-section03.may .dndn-package-section03-title > span { font-size: calc(1rem + 6.3894vw); } .dndn-package-section03.may .dndn-package-section03-title { font-size: calc(1rem + 5.2782vw); } .dndn-package-section03-textBox small { font-size: calc(1rem + 0.5556vw); } } /* 240529 6월 추가 */ .dndn2406 .dndn-package-section03-title { position: relative; } .dndn2406 .dndn-package-section03-title::before { right: 0; bottom: 0; top: auto; transform: translateY(50%); aspect-ratio: 327 / 260; width: 25%; height: auto; } .dndn-package-section03-con2 { display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.2rem; margin-bottom: 2rem; } .dndn-package-section03-con2 li { grid-column: 4 span; padding: 2rem 1rem; background: #fff; border-radius: 1rem; box-shadow: 0 3px 12px #E0DEEF; } .dndn-package-section03-con2 li:nth-child(n + 4) { grid-column: 3 span; } .dndn-package-section03-con2 li > span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 32px; margin: 0 auto .6rem; background: #B8B2EC; border-radius: 50%; font-weight: 700; font-size: 16px; color: #fff; } .dndn-package-section03-con2 li > span > span { transform: translateY(-5%); } .dndn-package-section03-con2 li p { font-size: 1.3rem; font-weight: 700; color: #000; } .dndn-package-section03-con2 li p strong { display: block; color: #681AFF; } .dndn-package-section03-textBox2.dndn-package-section03-textBox::before { aspect-ratio: 166 / 162; height: 8rem; width: auto; background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section03-img02-240529.png') no-repeat center center; background-size: cover; transform: translateY(-50%); } .dndn-package-section03-textBox2 { margin-bottom: 2rem; border-radius: 1rem; } .dndn-package-section03-textBox2 > span { font-size: 1.3rem; } .dndn-package-section03-linkBox { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.2rem; } .dndn-package-section03-linkBox > a { display: flex; justify-content: center; align-items: center; padding: 0.8rem 0; border-radius: 8px; background: #2E04FF; box-shadow: 0 10px 16px #B7A8FF; font-size: 1.6rem; font-weight: 700; color: #fff; } .dndn-package-section03-linkBox > a > svg { aspect-ratio: 24 / 30; height: 1.5rem; } @media screen and (max-width:768px){ .dndn2406 .dndn-package-section03-title::before { bottom: auto; top: 0; transform: translateY(-50%); width: 40%; } .dndn-package-section03-con2 { grid-template-columns: repeat(2,1fr); } .dndn-package-section03-con2 li { grid-column: 2 span; } .dndn-package-section03-con2 li:nth-child(n + 4) { grid-column: 1 span; } .dndn-package-section03-con2 li > span { width: 24px; font-size: 14px; } .dndn-package-section03-con2 li p { font-size: calc(1rem + 1.9446vw); } .dndn-package-section03-con2 li p strong { display: inline-block; } .dndn-package-section03-textBox2.dndn-package-section03-textBox { padding-top: calc(1.9rem + 8rem); } .dndn-package-section03-textBox2.dndn-package-section03-textBox::before { height: 6rem; top: 1.9rem; left: 50%; transform: translate(-50%,0); } .dndn-package-section03-textBox2 { margin-bottom: 2rem; } .dndn-package-section03-textBox2 > span { display: inline-block; margin-bottom: 16px; font-size: calc(1rem + 1.9446vw); } .dndn-package-section03-linkBox { grid-template-columns: repeat(1,1fr); } .dndn-package-section03-linkBox > a { font-size: calc(1rem + 2.5002vw); } .dndn-package-section03-linkBox > a > svg { aspect-ratio: 24 / 30; font-size: calc(1rem + 2.5002vw); } } /******************************************************************************* 주목! 어학연수 혜택 베스트 ********************************************************************************/ .benefit-best{background-color: #FFEAA4; text-align: center; padding: 4rem 0;} .benefit-best .videoWrap.youtube{position: relative; cursor: pointer; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; aspect-ratio: 1024/576; width: 51.2rem; margin: 0 auto; border-radius: var(--r-radius02); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12); max-width: 100%;} .benefit-best .videoWrap.youtube .video{width: 100%; height: 100%;} .benefit-best .videoWrap.youtube figure {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 2;} .benefit-best .videoWrap.youtube iframe { width: 100%; height: 100%; object-fit: cover; border: none; outline: 0;} .benefit-best .videoWrap.youtube figure::after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-repeat: no-repeat; background-size: cover; width: 4.1rem; height: 4.1rem; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/btn_play.png'); touch-action: none; pointer-events: none;} .benefit-best em{color: #640BFF;} .benefit-best *{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} .benefit-best .all-title .title{font-size: var(--f-fontSize01); font-weight: 700; color: var(--c-text01); margin-top: 0.4rem; margin-bottom: 4.65rem;} .benefit-best .roundWrap{position: relative; background-color: #fff; border-radius: var(--r-radius02); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12); padding: 4rem 3rem 3rem;} .benefit-best .roundWrap + .roundWrap{margin-top: 4.65rem;} .benefit-best .roundWrap .wrap-title{background-color: #000; position: absolute; color: #fff; width: 25rem; height: 3.3rem; border-radius: var(--r-radius03); top: -1.65rem; left: 50%; transform: translateX(-50%); line-height: 2.9; display: inline-block; font-size: var(--f-fontSize04); font-weight: 700;} .benefit-best .roundWrap .wrap-title em{color: #FFF843;} .benefit-best .article + .article{padding-top: 3rem; margin-top: 3rem; border-top: 1px solid #E4E8F1;} .benefit-best .article1{display: flex; flex-wrap: wrap; column-gap: 1.2rem; padding-left: 2.3rem; padding-right: 2.3rem;} .benefit-best .article1 .innerWrap{width: calc(50% - 0.6rem);} .benefit-best .article1 .textWrap{text-align: left; color: var(--c-text01); } .benefit-best .article1 .textWrap h3{font-size: var(--f-fontSize03); letter-spacing: -0.26px; margin-bottom: 0.8rem; line-height: 150%; } .benefit-best .article1 .textWrap p{font-size: 1.2rem; letter-spacing: -0.24px; font-weight: 500; line-height: 150%; } .benefit-best .article1 .textWrap .bottom{font-size: var(--f-body2); color: var(--c-text03); letter-spacing: -0.14px; margin-top: 1.6rem;} .benefit-best .article1 .textWrap .bottom span{display: block; line-height: 150%; } .benefit-best .article1 .imgWrap{border-radius: var(--r-radius01); overflow: hidden; aspect-ratio: 506/270;} .benefit-best .article1 .imgWrap img{width: 100%; object-fit: contain;} .benefit-best .article2 .sub-title{font-size: var(--f-fontSize04); font-weight: 700; margin-bottom: 0.4rem; color: var(--c-text01); letter-spacing: -0.22px;} .benefit-best .article2 h3{font-size: var(--f-fontSize02); font-weight: 700; line-height: 130%; color: var(--c-text01); letter-spacing: -0.64px;} .benefit-best .article2 .sub-bottom{font-size: var(--f-body2); color: var(--c-text03); margin-top: 0.6rem; letter-spacing: -0.16px; line-height: 150%;} .benefit-best .article2 .roundBox{border-radius: var(--r-radius01); background-color: #fff; box-shadow: 0px 4px 10px 0px #EBEFF4; border: 1px solid #E4E8F1; } .benefit-best .article2 .box-2{display: flex; flex-wrap: wrap; column-gap: 1.2rem; margin-top: 2rem;} .benefit-best .article2 .box-2 .roundBox{width: calc(50% - 0.6rem); padding: 2rem 1.6rem;} .benefit-best .article2 .box-2 .roundBox p{font-size: var(--f-fontSize03); font-weight: 700; margin-bottom: 1.6rem;} .benefit-best .article2 .box-2 .roundBox img{margin: 0 auto;} .benefit-best .article2 .review-text{margin-top: 1.2rem; margin-bottom: 3rem;} .benefit-best .article2 .review-text .roundBox{padding: 2rem 3.6rem; display: flex; align-items: center;} .benefit-best .article2 .review-text .roundBox + .roundBox{margin-top: 0.6rem;} .benefit-best .article2 .review-text .roundBox .imgWrap{aspect-ratio: 1/1; width: 5rem; height: 5rem; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center;} .benefit-best .article2 .review-text .roundBox .textWrap{width: calc(100% - 5rem); padding-left: 1.8rem; text-align: left; letter-spacing: -0.2px; color: var(--c-text01); line-height: 150%;} .benefit-best .article2 .review-text .roundBox .textWrap .name{color: var(--c-text03); font-size: var(--f-body2); margin-top: 0.6rem; letter-spacing: -0.16px;} .benefit-best .article2 .videoWrap{ overflow: hidden;} .benefit-best .roundWrap1 .article1 .textWrap .bottom{font-size: var(--f-detail); margin-top: 1.2rem;} /******************************************************************************* 수업 4주 무료 ********************************************************************************/ .dndn-package-section04-con { padding: 4rem; background: #ffff; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; display: flex; justify-content: space-between; margin-bottom: 1rem; } .dndn-package-section04-con.dndn-package-section04-con1 { padding: 0 0 4rem; } .dndn-package-section04-textBox { width: 60%; text-align: left; } .dndn-package-section04-con-title { font-size: 2.3rem; color: #000; margin-bottom: 2.5rem; } .dndn-package-section04-con-title > span { font-size: 1.6rem; display: flex; align-items: center; } .dndn-package-section04-con-title-2 > span { justify-content: center; } .dndn-package-section04-con-title > span > strong { color: #8150FF; } .dndn-package-section04-con-title > span > span { font-size: 1rem; color: #fff; background: #F75252; display: inline-block; padding: .35rem 1.3rem; margin-right: .3rem; } .dndn-package-section04-con-title > span > span:first-child { color: #000; background: #FFE064; } .dndn-package-section04-con-title > strong { color: #8150FF; } .dndn-package-section04-con-title > small { font-size: .7rem; font-weight: 300; color: #888888; } .dndn-package-section04-con-text { font-size: 1.2rem; color: #000; margin-bottom: 2rem; } .dndn-package-section04-con-text > strong { color: #8150FF; } .dndn-package-section04-con-list li { color: #888888; font-size: .7rem; } .dndn-package-section04-con-list li::before { content: '※'; } .dndn-package-section04-imgBox { width: 40%; } .dndn-package-section04-con-wrap { padding: 4rem; background: #ffff; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; margin-bottom: 1rem; } .dndn-package-section04-con-con2 { padding: 4rem 0 0; position: relative; } .dndn-package-section04-con-con2::before { content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 100%; height: 4px; border: 1px solid #ccc; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; background: #CCCCCC; } .dndn-package-section04-con2-row1 { margin-bottom: 3rem; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: .5rem; } .dndn-package-section04-con2-row1-left { background: #EBEBEB; padding: 2rem; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } .dndn-package-section04-con2-row1-left-title { font-size: 1.6rem; color: #000; margin-bottom: 2rem; } .dndn-package-section04-con2-row1-left-title > strong { color: #8150FF; } .dndn-package-section04-con2-row1-left-graph { width: 14rem; height: 14rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 auto .8rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-graph-221026.png") no-repeat center center; background-size: cover; font-size: 0; } .dndn-package-section04-con2-row1-left-color { display: flex; justify-content: space-between; align-items: center; } .dndn-package-section04-con2-row1-left-color > span { font-size: .7rem; color: #000; } .dndn-package-section04-con2-row1-left-color > span > span { display: inline-block; width: .6rem; height: .6rem; margin-right: .3rem; background: #000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .dndn-package-section04-con2-row1-left-color > span:nth-child(1) > span { background: #4678DB; } .dndn-package-section04-con2-row1-left-color > span:nth-child(2) > span { background: #00CB9C; } .dndn-package-section04-con2-row1-left-color > span:nth-child(3) > span { background: #FF9900; } .dndn-package-section04-con2-row1-left-color > span:nth-child(4) > span { background: #976CEA; } .dndn-package-section04-con2-row1-left-color > span:nth-child(5) > span { background: #818181; } .dndn-package-section04-con2-row1-right { background: #743EFF; padding: 2rem; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } .dndn-package-section04-con2-row1-right-title { font-size: 1.6rem; color: #fff; margin-bottom: 2rem; } .dndn-package-section04-con2-row1-right-title > strong { color: #10FF9A; } .dndn-package-section04-con2-row1-right-list { display: inline-block; } .dndn-package-section04-con2-row1-right-list li { font-size: 1rem; color: #fff; text-align: left; border-bottom: 1px dashed #fff; padding: .5rem 0; } .dndn-package-section04-con2-row2 { margin-bottom: 5rem; } .dndn-package-section04-con2-row2-row { border: 1px solid #e5e5e5; margin-bottom: .6rem; box-shadow: .5rem .5rem 1rem #00000010; -webkit-border-radius: .5rem; -moz-border-radius: .5rem; border-radius: .5rem; text-align: left; padding: 2rem; display: flex; align-items: center; justify-content: space-between; } .dndn-package-section04-con2-row2-textBox { width: calc(95% - 6.5rem); } .dndn-package-section04-con2-row2-textBox > p { font-size: 1rem; margin-bottom: .6rem; } .dndn-package-section04-con2-row2-textBox > p > strong { color: #4D7DFF; font-weight: 400; } .dndn-package-section04-con2-row2-textBox > span { font-size: .9rem; color: #707070; } .dndn-package-section04-con2-row2-textBox > span > strong::after { content: '-'; } .dndn-package-section04-con2-row2-imgBox { width: 6.5rem; height: 6.5rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .dndn-package-section04-con2-row3 { width: 100%; height: 25.9rem; } .dndn-package-section04-con2-row3 > iframe { width: 100%; height: 100%; border: none; box-shadow: .75rem .75rem 1.5rem #00000020; } .dndn-package-section04-con2-row2-row1 .dndn-package-section04-con2-row2-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img08-221026.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con2-row2-row2 .dndn-package-section04-con2-row2-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img09-221026.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con2-row2-row3 .dndn-package-section04-con2-row2-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img10-221026.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con2-row2-row4 .dndn-package-section04-con2-row2-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img11-221026.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con1 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img01-221026.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con2 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img02-240613.png") no-repeat center center; background-size: contain; } .dndn-package-section04-con3 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img03-241204.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con4 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img04-231030.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con5 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img05-221026.jpg") no-repeat center center; background-size: 80%; } .dndn-package-section04-con6 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img06-221026.jpg") no-repeat center center; background-size: contain; } .dndn-package-section04-con7 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img07-221026.jpg") no-repeat center center; background-size: contain; } .color-red .dndn-package-section04-con-title strong { color: #dd0000; } .color-red .dndn-package-section04-con-text span { color: #dd0000; font-weight: 700; } @media screen and (max-width:1200px){ .dndn-package-section04 .dndn-package-width { padding: 5rem 1rem; } .dndn-package-section04-con { display: block; } .dndn-package-section04-textBox { width: 100%; text-align: center; } .dndn-package-section04-imgBox { width: 100%; height: 20rem; } .dndn-package-section04-con1 .dndn-package-section04-imgBox, .dndn-package-section04-con2 .dndn-package-section04-imgBox, .dndn-package-section04-con3 .dndn-package-section04-imgBox, .dndn-package-section04-con4 .dndn-package-section04-imgBox, .dndn-package-section04-con5 .dndn-package-section04-imgBox, .dndn-package-section04-con6 .dndn-package-section04-imgBox, .dndn-package-section04-con7 .dndn-package-section04-imgBox { background-size: contain; } .dndn-package-section04-con3 .dndn-package-section04-imgBox { margin-top: 2rem; } .dndn-package-section04-con2-row3 { height: 41vw; } .dndn-package-section04-con2-row1 { grid-template-columns: repeat(1,1fr); } } @media screen and (max-width:768px){ .dndn-package-section04-con { padding: 2rem .5rem; } .dndn-package-section04-con.dndn-package-section04-con1 { padding: 0 0 2rem; } .dndn-package-section04-con-wrap { padding: 2rem .5rem; } .dndn-package-section04-textBox { margin-bottom: 1rem; } .dndn-package-section04-con-title { font-size: calc(1rem + 3vw); } .dndn-package-section04-con-title > span { margin-bottom: 10px; font-size: calc(1rem + 1.39vw); justify-content: center; } .dndn-package-section04-con-title > span > span { font-size: calc(1rem + .3vw); } .dndn-package-section04-con-title > small { font-size: calc(1rem - .6vw); } .dndn-package-section04-con-text { font-size: calc(1rem + 0.85vw); } .dndn-package-section04-con-list li { font-size: calc(1rem - .6vw); } .dndn-package-section04-con2-row1-left-title { font-size: calc(1rem + 1.39vw); } .dndn-package-section04-con2-row1-left-color > span { font-size: calc(1rem - .6vw); } .dndn-package-section04-con2-row1-right-title { font-size: calc(1rem + 1.39vw); } .dndn-package-section04-con2-row1-right-list li { font-size: calc(1rem + .55vw); } .dndn-package-section04-con2-row2-textBox > p { font-size: calc(1rem + .55vw); } .dndn-package-section04-con2-row2-textBox > span { font-size: 1rem; } .dndn-package-section04-con2-row3 { height: 49.3vw; } .dndn-package-section04-con2-row2-textBox { width: calc(95% - 5.5rem); } .dndn-package-section04-con2-row2-imgBox { width: 5.5rem; height: 5.5rem; } .dndn-package-section04-con1 .dndn-package-section04-imgBox { height: 26rem; } .dndn-package-section04-con5 .dndn-package-section04-imgBox { height: 26rem; } .dndn-package-section04-con2 .dndn-package-section04-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section04-img02-240613.png") no-repeat center center; background-size: contain; } .dndn-package-section04-con3 .dndn-package-section04-imgBox { height: 13rem; } } /******************************************************************************* 숙소 예약 마감 주의 ********************************************************************************/ .dndn-package-section09-con { padding: 4rem; background: #ffff; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; } .dndn-package-section09-con { padding: 4rem; text-align: center; } .dndn-package-section09-title > p > em { display: inline-block; margin: 0 0.6rem; font-size: 1.6rem; font-weight: 700; color: #DD0000; vertical-align: middle; } .dndn-package-section09-title-icon { display: inline-block; width: 2.5rem; height: 2.5rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section09-icon01.png") no-repeat center center; background-size: contain; vertical-align: middle; } .dndn-package-section09-title > h2 { display: block; margin: 2rem 0 1.2rem; font-size: 2.3rem; color: #000; } .dndn-package-section09-con .color_purple { color: #8150FF; } .dndn-package-section09-text { font-size: 1.2rem; } .dndn-package-section09-text .color_purple { font-weight: 700; } @media screen and (max-width:768px){ .dndn-package-section09-con { padding: 2rem .5rem; } } /******************************************************************************* 어학연수 국가별 특징 ********************************************************************************/ .dndn-package-section05-con { display: flex; justify-content: space-between; margin-bottom: 3rem; } .dndn-package-section05-imgBox { width: 40%; -webkit-border-radius: .5rem; -moz-border-radius: .5rem; border-radius: .5rem; } .dndn-package-section05-con-textBox { width: calc(60% - 1.5rem); } .dndn-package-section05-con-title { font-size: 1.8rem; margin-bottom: .9rem; text-align: left; color: #8150FF; } .dndn-package-section05-table { background-color: #fff; border-collapse: collapse; width: 100%; border: 1px solid rgba(129, 80, 255, .27); } .dndn-package-section05-table th, .dndn-package-section05-table td { border-bottom: 1px solid rgba(129, 80, 255, .27); padding: .5rem 1rem; font-size: 1rem; width: auto; } .dndn-package-section05-table th { background: #F5F1FF; color: #555555; } .dndn-package-section05-table th:first-child { width: 20%; } .dndn-package-section05-table td { text-align: left; color: #000; } .dndn-package-section05-table td li::before { content: '-'; } .dndn-package-section05-img01 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img01-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img02 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img02-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img03 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img03-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img04 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img04-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img05 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img05-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img06 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img06-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img07 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img07-221026.jpg") no-repeat center center; background-size: cover; } .dndn-package-section05-img08 { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section05-img08-221026.jpg") no-repeat center center; background-size: cover; } @media screen and (max-width:768px){ .dndn-package-section05-con { display: block; } .dndn-package-section05-imgBox { width: 100%; height: 15rem; margin-bottom: .5rem; } .dndn-package-section05-con-textBox { width: 100%; } .dndn-package-section05-con-title { font-size: calc(1rem + 2vw); text-align: center; } .dndn-package-section05-table th, .dndn-package-section05-table td { font-size: calc(1rem + .55vw); } } /******************************************************************************* 선택에는 이유가 있습니다 ********************************************************************************/ .dndn-package-section06-con { padding: 4rem 5rem; background: #fff; -webkit-border-radius: .5rem; -moz-border-radius: .5rem; border-radius: .5rem; margin-bottom: 1rem; position: relative; } .dndn-package-section06-con:last-child { margin-bottom: 0; } .dndn-package-section06-con::before { content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%) rotate(45deg); width: 1.9rem; height: 1.9rem; background: linear-gradient(to right bottom, #FFF6C400 50%, #FFF6C4 50%); } .dndn-package-section06-title { color: #000; font-size: 1.8rem; margin-bottom: .4rem; } .dndn-package-section06-text { font-size: .7rem; color: #888888; margin-bottom: 3rem; } .dndn-package-section06-img { width: 100%; height: 15rem; margin-bottom: 4rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section06-img01-221026.png") no-repeat center center; background-size: contain; } .dndn-package-section06-text2 { display: inline-block; padding: .4rem 1.7rem; background: linear-gradient(to right, #EB38A6 , #8150FF ); font-size: 1.6rem; color: #fff; } .dndn-package-section06-con2 .dndn-package-section06-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section06-img02-221026.png") no-repeat center center; background-size: contain; } @media screen and (max-width:1200px){ .dndn-package-section06-con { padding: 4rem 2rem; } } @media screen and (max-width:768px){ .dndn-package-section06-con { padding: 4rem 1rem; } .dndn-package-section06-img { height: 20rem; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section06-img03-221026.png") no-repeat center center; background-size: contain; } .dndn-package-section06-con2 .dndn-package-section06-img { height: 15rem; } .dndn-package-section06-title { font-size: calc(1rem + 2vw); } .dndn-package-section06-text { font-size: calc(1rem - .8vw); } .dndn-package-section06-text2 { font-size: calc(1rem + 2vw); } } /******************************************************************************* 어학연수 후기를 확인하세요! ********************************************************************************/ .dndn-package-section07-con { margin-bottom: 1.9rem; } .dndn-package-section07-text { margin-bottom: .9rem; } .dndn-package-section07-text > span { color: #000; font-size: 1.6rem; } .dndn-package-section07-text > span::before { content: '#'; color: #8150FF; } .dndn-package-section07-youtube { width: 40.3rem; height: 22.7rem; margin: 0 auto; } .dndn-package-section07-youtube > iframe { width: 100%; height: 100%; } @media screen and (max-width:1200px){ .dndn-package-section07-youtube { width: 100%; height: 50vw; } } @media screen and (max-width:768px){ .dndn-package-section07-text > span { font-size: calc(1rem + .55vw); } } /******************************************************************************* edm유학센터가 함께하겠습니다. ********************************************************************************/ .dndn-package-section08-con { display: flex; justify-content: space-between; padding: 4rem; background: #fff; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; text-align: left; margin-bottom: 1rem; } .dndn-package-section08-con5 { margin-bottom: 4rem; } .dndn-package-section08-con-textBox { width: 65%; } .dndn-package-section08-con-title { font-size: 2.3rem; margin-bottom: 2rem; color: #000; } .dndn-package-section08-con-title > strong { color: #8150FF; } .dndn-package-section08-con-text { font-size: 1.2rem; color: #000; margin-bottom: 1rem; } .dndn-package-section08-con-text > strong { color: #8150FF; } .dndn-package-section08-con-text > small { color: #888888; font-size: .7rem; } .dndn-package-section08-con-text > small::before { content: '*'; } .dndn-package-section08-con-imgBox { width: 35%; } .dndn-package-section08-con-imgBox li { margin-bottom: .5rem; background: #FCF6E5; padding: .5rem 1rem; -webkit-border-radius: .5rem; -moz-border-radius: .5rem; border-radius: .5rem; color: #6B6055; font-size: .8rem; display: flex; align-items: center; } .dndn-package-section08-text { font-size: 1.6rem; color: #DD0000; font-weight: 700; line-height: 1.4; } .dndn-package-section08-con-imgBox li:nth-child(1) .dndn-package-section08-con-imgBox-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-icon01-221026.jpg") no-repeat center center; } .dndn-package-section08-con-imgBox li:nth-child(2) .dndn-package-section08-con-imgBox-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-icon02-221026.jpg") no-repeat center center; } .dndn-package-section08-con-imgBox li:nth-child(3) .dndn-package-section08-con-imgBox-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-icon03-221026.jpg") no-repeat center center; } .dndn-package-section08-con-imgBox li:nth-child(4) .dndn-package-section08-con-imgBox-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-icon04-221026.jpg") no-repeat center center; } .dndn-package-section08-con-imgBox li:nth-child(5) .dndn-package-section08-con-imgBox-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-icon05-221026.jpg") no-repeat center center; } .dndn-package-section08-con-imgBox li:nth-child(6) .dndn-package-section08-con-imgBox-img { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-icon06-221026.jpg") no-repeat center center; } .dndn-package-section08-con-imgBox li .dndn-package-section08-con-imgBox-img { display: inline-block; width: 2.25rem; height: 1.4rem; background-size: cover; margin-right: .5rem; } .dndn-package-section08-con1 .dndn-package-section08-con-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-img01-221026.png") no-repeat center center; background-size: contain; } .dndn-package-section08-con2 .dndn-package-section08-con-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-img02-221026.png") no-repeat center center; background-size: contain; } .dndn-package-section08-con4 .dndn-package-section08-con-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-img03-221026.png") no-repeat center center; background-size: 80%; } .dndn-package-section08-con5 .dndn-package-section08-con-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-img04-221026.png") no-repeat center center; background-size: contain; } @media screen and (max-width:1200px){ .dndn-package-section08-con { display: block; } .dndn-package-section08-con-textBox { width: 100%; text-align: center; margin-bottom: 1.5rem; } .dndn-package-section08-con-imgBox { width: 100%; } .dndn-package-section08-con1 .dndn-package-section08-con-imgBox { height: 13rem; } .dndn-package-section08-con2 .dndn-package-section08-con-imgBox, .dndn-package-section08-con4 .dndn-package-section08-con-imgBox, .dndn-package-section08-con5 .dndn-package-section08-con-imgBox { height: 10rem; } .dndn-package-section08-con2 .dndn-package-section08-con-imgBox { height: 32rem; } } @media screen and (max-width:768px){ .dndn-package-section08-con { padding: 2rem .5rem; } .dndn-package-section08-con-title { font-size: calc(1rem + 3vw); } .dndn-package-section08-con-text { font-size: calc(1rem + 0.85vw); } .dndn-package-section08-con-text > small { font-size: calc(1rem - 1vw); } .dndn-package-section08-con-imgBox li { font-size: calc(1rem + 0.3vw); } .dndn-package-section08-text { font-size: calc(1rem + 1vw); } .dndn-package-section08-con4 .dndn-package-section08-con-imgBox { background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section08-img03-221026.png") no-repeat center center; background-size: contain; } } /******************************************************************************* 6월 이벤트 ********************************************************************************/ .dndn-package-section10 { background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section10-bg.png') no-repeat, radial-gradient(closest-side at 48% 41%, #F1FCEC 0%, #DFF6C4 64%, #BFF1AB 100%) center top; background-size: 100%; } .dndn-package-section10 .dndn-package-sub-title > strong { color: #1EC95B; } .dndn-package-section10-img { position: relative; aspect-ratio: 530 / 290; max-width: 530px; margin: 0 auto 4.5rem; background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section10-img1.png') no-repeat center center; background-size: cover; } .dndn-package-section10-img2 { background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section10-img1-busan.png') no-repeat center center; background-size: cover; } .dndn-package-section10-img span { position: absolute; left: 50%; top: calc(100% + 2.25rem); transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; width: 2.7rem; background: #1EC95B; border-radius: 50%; } .dndn-package-section10-img span svg { width: 50%; } .dndn-package-section10-con { max-width: 712px; margin: 0 auto; } .dndn-package-section10-con > div { border-radius: 16px; background: #F7FDF1; } .dndn-package-section10-con .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding: 1.6rem 2rem; } .dndn-package-section10-con .row .textBox { width: calc(100% - 10rem); text-align: left; font-size: 0.9rem; } .dndn-package-section10-con .row .textBox > strong { display: block; font-size: 1.3rem; } .dndn-package-section10-con .row .textBox > span { color: #666666; } .dndn-package-section10-con .row .img { width: 9rem; aspect-ratio: 183 / 90; background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section10-img2.png') no-repeat center center; background-size: cover; box-shadow: 10px 10px 20px rgba(0, 0, 0, 10%); } .dndn-package-section10-con .row2 { display: grid; grid-template-columns: repeat(3,1fr); padding: 1.3rem 1.2rem; } .dndn-package-section10-con .row2 .col { display: flex; align-items: center; justify-content: center; } .dndn-package-section10-con .row2 .col + .col { border-left: 1px solid #C5C5C5; } .dndn-package-section10-con .row2 .col .icon { display: block; aspect-ratio: 1 / 1; height: 1.2rem; margin-right: 0.4rem; } .dndn-package-section10-con .row2 .col > p { font-size: 0.9rem; } @media screen and (max-width:768px){ .dndn-package-section10-con .row { margin-bottom: 1rem; padding: 1.6rem 1rem; } .dndn-package-section10-con .row .textBox { width: calc(100% - 8rem); font-size: 1rem; } .dndn-package-section10-con .row .textBox > strong { font-size: calc(1rem + 0.8334vw); } .dndn-package-section10-con .row .img { width: 7rem; } .dndn-package-section10-con .row2 { grid-template-columns: repeat(1,1fr); padding: 1.6rem 1rem; } .dndn-package-section10-con .row2 .col { justify-content: start; } .dndn-package-section10-con .row2 .col + .col { border-left: none; margin-top: 0.5rem; } .dndn-package-section10-con .row2 .col .icon { height: 16px; margin-right: 1rem; } .dndn-package-section10-con .row2 .col .icon svg { height: 100%; } .dndn-package-section10-con .row2 .col > p { font-size: 1rem; } } /******************************************************************************* 지사 후기 ********************************************************************************/ .dndn-package-section11 { background: #F8F1FF url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section11-bg.png') no-repeat center top; background-size: 100%; } .dndn-package-section11 .dndn-package-sub-title { position: relative; } .dndn-package-section11 .dndn-package-sub-title::before { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,25%); aspect-ratio: 52 / 42; width: 10%; max-width: 82px; background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section11-img1.png') no-repeat center center; background-size: cover; } .dndn-package-section11-con { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.2rem; margin-bottom: 4rem; } .dndn-package-section11-con .col { padding: .8rem 1rem; background: #fff; border-radius: 12px; box-shadow: 0 0 20px rgba(129, 80, 255, 20%); } .dndn-package-section11-con .col .name { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.8rem; margin-bottom: 0.8rem; border-bottom: 1px solid #C5C5C5; } .dndn-package-section11-con .col .name > p { font-size: 0.9rem; font-weight: 700; } .dndn-package-section11-con .col .name > span { position: relative; display: inline-block; width: 3.2rem; aspect-ratio: 1 / 1; border-radius: 50%; background: #EFF1F6; } .dndn-package-section11-con .col .name > span::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 2rem; aspect-ratio: 1/ 1; background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-section11-img2.png') no-repeat center center; background-size: cover; } .dndn-package-section11-con .col .text { text-align: left; } .dndn-package-section11-con .col .text dt { margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 700; color: #8150FF; letter-spacing: -1px; } .dndn-package-section11-con .col .text dd { font-size: 0.8rem; } .dndn-package-section11-con .col .text dd > span { color: #8150FF; } .dndn-package-section11 h3 { font-size: 1.3rem; color: #000; } @media screen and (max-width:768px){ .dndn-package-section11 { background: #F8F1FF; } .dndn-package-section11 .dndn-package-sub-title::before { width: 15%; } .dndn-package-section11-con { grid-template-columns: repeat(1,1fr); } .dndn-package-section11-con .col { display: flex; justify-content: space-between; align-items: start; padding: 20px; } .dndn-package-section11-con .col .name { display: flex; flex-direction: column-reverse; width: 20%; padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .dndn-package-section11-con .col .name > p { font-size: calc(1rem + 0.2778vw); } .dndn-package-section11-con .col .name > span { width: 100%; margin-bottom: 7px; } .dndn-package-section11-con .col .name > span::before { width: 60%; } .dndn-package-section11-con .col .text { width: calc(80% - 20px); } .dndn-package-section11-con .col .text dt, .dndn-package-section11-con .col .text dd, .dndn-package-section11 h3 { font-size: calc(1rem + 0.5556vw); } } /* 모바일 floating 버튼 */ .dndn-package-btn-call { display: none; } @media screen and (max-width:768px){ .dndn-package-btn-call { display: block; position: fixed; z-index: 10; right: 1.5rem; bottom: 102px; width: 56px; height: 56px; background: #fff url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/dndn-package-icon-call-mo.png') no-repeat center center; background-size: 32px; border: 1px solid #D8D5E1; border-radius: 28px; box-shadow: 0 6px 15px #00000015; } } @media screen and (max-width:767px){ .dndn-package-btn-call { bottom: 166px; } } /* 리뉴얼 커스터마이징 */ :root { /* Color */ --c-primary : #1EC95B; --c-point : #FC1D01; --c-background-neutral : #F5F5F7; --c-background-yellow : #F8FAEC; --c-background-blue : #EAFAFF; --c-text01 : #000000; --c-text02 : #333333; --c-text03 : #666666; --c-text04 : #999999; --c-gradient-red : linear-gradient(90deg, #FC1D01 0%, #FDA245 100%); --c-gradient-green : linear-gradient(90deg, #1EC95B 0%, #01D29C 100%); --c-border-neutral : #F5F5F7; --c-border-blue : #E4E8F1; --c-border-black : #000000; --c-success : #1EC95B; --c-warning : #FC1D01; /* Typography */ --f-display : 2.7rem; /* 54px */ --f-fontSize01 : 2rem; /* 40px */ --f-fontSize02 : 1.6rem; /* 32px */ --f-fontSize03 : 1.3rem; /* 26px */ --f-fontSize04 : 1.1rem; /* 22px */ --f-fontSize05 : 1rem; /* 20px */ --f-body1 : 0.9rem; /* 18px */ --f-body2 : 0.8rem; /* 16px */ --f-detail : 0.7rem; /* 14px */ /* letter spacing (Typography와 함께 사용) */ --ls-display : ; /* Shadows */ --s-shadow-neutral01 : 0px 4px 10px 0px rgba(0, 0, 0, 0.12); --s-shadow-neutral02 : 0px 8px 20px 0px rgba(0, 0, 0, 0.12); --s-shadow-neutral03 : 0px 14px 40px 0px rgba(0, 0, 0, 0.14); --s-shadow-blue01 : 0px 4px 10px 0px #EBEFF4; --s-shadow-blue02 : 0px 8px 20px 0px #EBEFF4; --s-shadow-blue03 : 0px 14px 40px 0px #EBEFF4; /* Radius */ --r-radius01: 12px; --r-radius02: 24px; --r-radius03: 9999999px; } @media screen and (max-width: 768px){ :root { /* Typography */ --f-display : 2.153rem; /* 28px */ --f-fontSize01 : 1.923rem; /* 25px */ --f-fontSize02 : 1.692rem; /* 22px */ --f-fontSize03 : 1.538rem; /* 20px */ --f-fontSize04 : 1.384rem; /* 18px */ --f-fontSize05 : 1.23rem; /* 16px */ --f-body1 : 1.153rem; /* 15px */ --f-body2 : 1.076rem; /* 14px */ --f-detail : 1rem; /* 13px */ } } .container.dndn-package-default { overflow: initial; } .container.dndn-package-default .dndn-package-width { width: 100%; max-width: 1248px; } .container .area_renewal * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important; overflow: initial; line-height: 150%; } .container .maxWidth { max-width: 1248px; margin: 0 auto; } @media screen and (max-width: 1280px){ .dndn-package .maxWidth { padding: 0 16px; } .container.dndn-package-default .dndn-package-width { padding: 5rem 16px; } } /* 비주얼 */ #heroArea .visual { position: relative; padding: 5rem 0; } #heroArea .visual .bgImage { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/heroArea-bg-250224.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #heroArea .visual .titleWrap span { display: inline-block; color: #E54231; background-color: #023CFC; border-radius: 8px; font-size: var(--f-body1); line-height: 1.7; height: 1.5rem; font-weight: 700; padding: 0 0.5rem; margin-bottom: 0.4rem; } #heroArea .visual h1 { line-height: 130%; font-size: var(--f-display); } #heroArea .visual h1 em { line-height: 130%; color: #023CFC; } #heroArea .visual .contactWrap { font-size: var(--f-body2); margin-top: 1.2rem; } #heroArea .visual .contactWrap .box { display: flex; align-items: center; } #heroArea .visual .contactWrap .box + .box { margin-top: 0.6rem; } #heroArea .visual .contactWrap .box .tit { width: 2.8rem; } #heroArea .visual .contactWrap .box .tit strong { border: 1px solid #000; border-radius: 4px; height: 1.2rem; min-width: 1.1rem; display: inline-block; padding: 0 0.4rem; vertical-align: top; font-weight: 600; } #heroArea .visual .contactWrap .box p { width: calc(100% - 2.8rem); } #heroArea .visual .contactWrap .contact-btn { background-color: #000; color: #fff; font-size: var(--f-body1); border-radius: var(--r-radius03); height: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1.6rem; width: 8.5rem; } #heroArea .visual .contactWrap .contact-btn .arrow { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/buttonArrow.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 0.8rem; height: 0.8rem; margin-left: 0.2rem; } #heroArea .noticeBoard .board { background-color: #E4E8F1; font-size: var(--f-body2); border-radius: 0 0 var(--r-radius01) var(--r-radius01); overflow: hidden; padding: 0.6rem 1.2rem 0.6rem 3rem; position: relative; margin-bottom: 1rem; } #heroArea .noticeBoard .board figure { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/noticeBoard-icon-250224.png'); width: 1.2rem; height: 1.2rem; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); } #heroArea .noticeBoard .board .textWrap { display: flex; align-items: center; overflow: hidden; letter-spacing: -0.16px; font-weight: 500; } #heroArea .noticeBoard .board .textWrap .text { animation: noticeBoardText 30s linear infinite; white-space: nowrap; display: flex; } #heroArea .noticeBoard .board .textWrap p { margin-right: 3rem; font-weight: 600;} @keyframes noticeBoardText { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @media screen and (max-width: 768px){ #heroArea .visual { padding: 40px 0; height: 33.38rem; } #heroArea .visual .bgImage { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/heroArea-bg-mo-250224.png'); } #heroArea .visual .titleWrap { padding: 0 8px; } #heroArea .visual .titleWrap span { font-size: var(--f-body2); height: 2rem; padding: 0 7px; line-height: 1.9; margin-bottom: 8px; } #heroArea .visual h1 { font-size: 2.46rem; } #heroArea .visual .contactWrap { margin-top: 24px; padding: 0 8px; } #heroArea .visual .contactWrap .box { align-items: flex-start; } #heroArea .visual .contactWrap .box + .box { margin-top: 8px; } #heroArea .visual .contactWrap .box .tit { width: 3.46rem; } #heroArea .visual .contactWrap .box .tit strong { height: 1.61rem; padding: 0 4px; } #heroArea .noticeBoard .maxWidth { padding: 0; } #heroArea .noticeBoard .board { border-radius: 0; padding: 10px 0 10px 52px; margin-bottom: 0; } #heroArea .noticeBoard .board figure { width: 24px; height: 24px; } #heroArea .noticeBoard .board .textWrap p { margin-right: 30px; } #heroArea .noticeBoard .board .textWrap .text { animation-duration: 26s; } } /* 블랙프라이데이 */ #heroArea.blackFriday .visual .bgImage { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/mainBanner-251226.webp'); } #heroArea.blackFriday .visual .titleWrap span { background-color: #FFF; } #heroArea.blackFriday .visual h1 { color: #060606; } #heroArea.blackFriday .visual h1 em { color: #E54231; } #heroArea.blackFriday .visual .contactWrap .box { color: #333; font-weight: 600;} #heroArea.blackFriday .visual .contactWrap .box .tit strong { border-color: #333; } @media screen and (max-width: 768px){ #heroArea.blackFriday .visual .bgImage { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/mainBanner-mo-251226.webp'); } #heroArea.blackFriday .visual h1 { letter-spacing: -.4px; } } .program .navigation { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 2.2rem; font-size: var(--f-body1); position: relative; z-index: 6; } .program .navigation button { background-color: #E2E2E5; width: 2rem; height: 2rem; border-radius: 50%; background-repeat: no-repeat; background-size: contain; background-position: center; } .program .navigation button:hover { background-color: #ccc; } .program .navigation button + button { margin-left: 0.8rem; } .program .navigation .nav-prev { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/nav_prev.svg'); } .program .navigation .nav-next { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/nav_next.svg'); } .program .navigation .control { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/control_stop.svg'); } .program .navigation .control.play { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/control_play.svg'); } .program .navigation .fraction { display: inline-block; width: auto; margin-right: 1rem; } .program .navigation .fraction .swiper-pagination-current { color: var(--c-text01); font-weight: 700; } .program .navigation .swiper-button-disabled { display: block !important; touch-action: none; pointer-events: none; opacity: 0.6; } @media screen and (max-width: 768px){ .program .navigation { position: absolute; bottom: 0; right: 16px; margin: 0; padding: 0; } .program .navigation button.nav-prev, .program .navigation button.nav-next, .program .navigation button.control { display: none !important; } .program .navigation .fraction { background-color: #E2E2E5; border-radius: 999999px; padding: 0 12px; font-size: var(--f-body1); margin-right: 0; } .program .navigation .fraction span { display: inline-block; font-size: inherit; } } /* 탭 메뉴 */ #page-tabMenu { padding: 0.9rem 1rem; border-bottom: 1px solid var(--c-border-blue); position: sticky; top: 0; background-color: #fff; z-index: 7; } #page-tabMenu button { display: inline-block; font-size: var(--f-fontSize05); color: var(--c-text03); position: relative; } #page-tabMenu button::after { content: ''; position: absolute; bottom: -0.9rem; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background-color: var(--c-primary); z-index: 1; opacity: 0; transition: width 0.5s ease; } #page-tabMenu button.active { font-weight: 700; color: var(--c-text01); } #page-tabMenu button.active::after, #page-tabMenu button:hover::after { opacity: 1; width: 100%; } #page-tabMenu button + button { margin-left: 3rem; } @media screen and (max-width: 768px){ #page-tabMenu { padding: 16px 0; } #page-tabMenu button { font-size: 1.23rem; } #page-tabMenu button + button { margin-left: 20px; } #page-tabMenu button::after { bottom: -17px; } } /* 핵심 보기 */ #pointView { padding: 0; overflow: hidden; } #pointView .slideWrap { overflow: hidden; width: calc(100% + 150px); margin-left: -50px; padding: 1.4rem 50px 4rem; position: relative; } #pointView .slideWrap::before { content: ''; position: absolute; width: 50px; left: 0; height: 100%; background: linear-gradient(90deg, #fff 75%, transparent 100%); z-index: 5; top: 0; } #pointView .slideWrap::after { content: ''; position: absolute; width: 100px; right: 0; height: 100%; background: linear-gradient(-90deg, #fff 0%, transparent 100%); z-index: 5; top: 0; } #pointView .slideWrap .navigation { margin-bottom: 1.4rem; } #pointView .swiper-slide { border-radius: 24px; box-shadow: 0 8px 20px 0 #EBEFF4; padding: 1.6rem 1.2rem; border: 1px solid var(--c-border-blue); height: 11rem; max-width: 16rem; } #pointView .swiper-slide figure { width: 1.8rem; height: 1.8rem; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; margin-bottom: 7px; } #pointView .swiper-slide p { font-size: var(--f-fontSize03); font-weight: 700; color: var(--c-text01); margin-bottom: 0.4rem; } #pointView .swiper-slide span { display: block; color: var(--c-text03); font-size: var(--f-body1); line-height: 27px; } @media screen and (max-width: 1500px){ #pointView .slideWrap { width: calc(100% + 100px); } #pointView .slideWrap::after { background: linear-gradient(-90deg, #fff 50%, transparent 100%); } } @media screen and (min-width: 950px) and (max-width: 1140px){ #pointView .swiper-slide { height: 12.8rem; } } @media screen and (max-width: 768px){ #pointView .slideWrap { padding: 32px 0 5.461rem 16px; width: calc(100% + 32px); margin-left: -16px; } #pointView .slideWrap::before { background: linear-gradient(90deg, #fff 55%, transparent 100%); width: 16px; } #pointView .slideWrap::after { background: linear-gradient(-90deg, #fff 50%, transparent 100%); width: 50px; } #pointView .swiper-slide { height: 14rem; padding: 24px 16px; max-width: initial; } #pointView .swiper-slide figure { width:2.46rem; height: 2.46rem; margin-bottom: 8px; } #pointView .swiper-slide p { line-height: 30px; margin-bottom: 8px; } #pointView .swiper-slide span { line-height: 22.5px; } #pointView .slideWrap .navigation { margin-bottom: 0; bottom: 2.461rem; } } /* 조회수 폭발 브이로그 */ .area-vlog { padding: 5.8rem 0 4rem; background: #D4AEFF; } .area-vlog .box-cont { position: relative; border-radius: 4px; background-color: #fff; box-shadow: 0px 8px 20px 0px #0000001F; } .area-vlog .box-cont:before { position: absolute; top: -36px; left: 50%; width: 192px; height: 72px; margin-left: -96px; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/contTop_tag.png") no-repeat; background-size: cover; background-position: center; content: ""; } .area-vlog .tit-cont { padding: 2.4rem 5.6rem 1.6rem; border-radius: 4px 4px 0 0; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/contTop_bg.png") no-repeat; background-size: cover; text-align: center; } .area-vlog .tit-cont h2 { font-size: var(--f-fontSize01); line-height: 130%; letter-spacing: -0.8px; color: var(--c-text01); } .area-vlog .tit-cont h2 strong { display: inline-block; line-height: 130%; color: #FF14C7; vertical-align: top; } .area-vlog.common-videoPlay .videoWrap.youtube { padding-bottom: 56.25%; } .area-vlog .box-video { padding: 3rem 5.6rem; border-radius: 0 0 4px 4px; background-color: #FFF1FC; } @media screen and (max-width: 768px){ .area-vlog { padding: 6rem 0 3.9rem; } .area-vlog .box-cont:before { width: 150px; height: 58px; top: -29px; margin-left: -75px; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/contTop_tag_mo.png") no-repeat; background-size: cover; } .area-vlog .tit-cont { padding: 40px 16px 24px; } .area-vlog .tit-cont h2, .area-vlog .tit-cont h2 strong { line-height: 110%; } .area-vlog .box-video { padding: 30px 44px; } } /* 추가 혜택 어학교 */ .area-school { padding: 5.8rem 0 4rem; background: #A8F464; } .area-school .box-cont { position: relative; border-radius: 4px; background-color: #fff; box-shadow: 0px 8px 20px 0px #0000001F; } .area-school .box-cont:before { position: absolute; top: -36px; left: 50%; width: 192px; height: 72px; margin-left: -96px; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/contTop_tag_green.png") no-repeat; background-size: cover; background-position: center; content: ""; } .area-school .tit-cont { padding: 2.4rem 5.6rem 1.6rem; border-radius: 4px 4px 0 0; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/contTop_bg.png") no-repeat; background-size: cover; text-align: center; } .area-school .tit-cont h2 { font-size: var(--f-fontSize01); line-height: 130%; letter-spacing: -0.8px; color: var(--c-text01); } .area-school .tit-cont h2 strong { display: inline-block; line-height: 130%; color: #FF14C7; vertical-align: top; } .area-school .box-school { padding: 3rem; border-radius: 0 0 4px 4px; background-color: #D5FACE; text-align: center; } .area-school .list-school { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .area-school .list-school > li { padding: 1.6rem; background-color: #fff; border-radius: 4px; border: 1px solid #000; box-shadow: 1px 2px 0px 0px #000000; text-align: center; color: var(--c-text01); } .area-school .list-school > li > .logo { width: 100%; max-width: 10rem; margin: 0 auto; background-size: cover; background-position: center; aspect-ratio: 200/90; } .area-school .list-school > li > strong { display: block; padding: .4rem 0; font-size: var(--f-fontSize05); letter-spacing: -.3px; } .area-school .list-school > li > p { font-size: var( --f-body1); letter-spacing: -.3px; } .area-school .box-school .desc { padding: 1.2rem 0 1.6rem; font-size: var(--f-detail); } .area-school .box-school .title_link { display: block; font-size: var(--f-fontSize03); color: var(--c-text01); } .area-school .box-school .contact-btn { display: inline-block; margin: 0.8rem auto 0; border-radius: 999999px; background-color: var(--c-text01); color: #fff; font-size: var(--f-body1); width: 302px; height: 56px; line-height: 150%; font-weight: 500; display: flex; align-items: center; justify-content: center; } .area-school .box-school .contact-btn .arrow { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/buttonArrow.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 1.2rem; height: 1.2rem; margin-left: 0.2rem; } @media screen and (max-width: 768px){ .area-school { padding: 6rem 0 3.9rem; } .area-school .box-cont:before { width: 150px; height: 58px; top: -29px; margin-left: -75px; background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/contTop_tag_green_mo.png") no-repeat; background-size: cover; } .area-school .tit-cont { padding: 40px 16px 24px; } .area-school .tit-cont h2, .area-school .tit-cont h2 strong { line-height: 110%; } .area-school .box-school { padding: 30px 8px; } .area-school .list-school { grid-template-columns: repeat(2,1fr); gap: 8px; } .area-school .list-school > li { padding: 12px 16px; } .area-school .list-school > li > .logo { width: 100%; max-width: 10rem; height: auto; aspect-ratio: 120/54; } .area-school .list-school > li > strong { padding: 0; padding-bottom: 4px; } .area-school .list-school > li > p { line-height: 135%; } .area-school .box-school .desc { padding: 1.2rem 0 2rem; } .area-school .box-school .contact-btn { width: 20.16rem; height: 3.1rem; margin-top: .95rem; font-size: 1.4rem; } } @media screen and (max-width: 430px){ .area-school .list-school > li > strong { display: flex; align-items: center; height: 5.85rem; } } /* youtube 영상 재생 부분 (공통) :: common-videoPlay : youtube 영상 article class name */ .common-videoPlay .videoWrap.youtube { position: relative; cursor: pointer; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; padding-bottom: 54.5%; } .common-videoPlay .videoWrap.youtube figure { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 2; } .common-videoPlay .videoWrap.youtube iframe { width: 100%; height: 100%; object-fit: cover; position: absolute; border: none; outline: 0;} .common-videoPlay .videoWrap.youtube figure::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/btn_play.png'); touch-action: none; pointer-events: none; } /***************************************** 25-03월 update *****************************************/ .march.dndn-package .all-title{text-align: center;} .march.dndn-package .all-title .title{font-size: var(--f-fontSize01); font-weight: 700; color: var(--c-text01); margin-top: 0.4rem; margin-bottom: 4.65rem;} .march.dndn-package .link-btn .btn{background-color: #000; color: #fff; width: 12rem; height: 2.8rem; font-size: var(--f-body1); font-weight: 500; display: inline-block; border-radius: var(--r-radius03); display: flex; justify-content: center; align-items: center; margin: 0 auto; transition: background-color 0.3s ease;} .march.dndn-package .link-btn .btn svg{width: 1.2rem; height: 1.2rem; margin-left: 0.2rem;} .march.dndn-package .area-vlog .box-cont{border: 3px solid #0C68A0; box-shadow: 4px 8px 0 rgba(0,0,0,0.12); padding: 0 0 3rem;} .march.dndn-package .area-vlog .box-cont + .box-cont{margin-top: 3rem;} .march.dndn-package .area-notice { padding: 4rem 0; background: #FC824D; } .march.dndn-package .area-notice .box-cont { padding: 2rem 3rem 3rem; border-radius: 24px; background-color: #fff; box-shadow: 0px 8px 20px 0px #0000001F; text-align: center; } .march.dndn-package .area-notice .box-cont .tag-notice { display: block; position: relative; width: 10rem; height: 2rem; margin: 0 auto 1.2rem; background-color: #000; border-radius: var(--r-radius03); line-height: 2rem; font-weight: 700; color: #fff; } .march.dndn-package .area-notice .box-cont .tag-notice:before { position: absolute; bottom: -11px; left: -20px; width: 58px; height: 64px; background: url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/notice_bell_icon.png) no-repeat; background-size: cover; content: ""; } .march.dndn-package .area-notice .box-cont .tit-cont { margin: 1.2rem 0; font-size: var(--f-fontSize01); line-height: 130%; letter-spacing: -0.8px; color: #FC1D01; } .march.dndn-package .area-notice .box-cont > p { font-size: var(--f-fontSize05); color: var(--c-text01); } .march.dndn-package .tag-top { position: absolute; top: -1.25rem; left: 50%; width: 6.5rem; height: 2.5rem; margin-left: -3.25rem; border-radius: var(--r-radius03); border: 1px solid #DC450B; background: linear-gradient(90deg, #FD6C34 0%, #DB470E 100%); box-shadow: 0px 4px 10px 0px #0000001F; font-size: var(--f-fontSize04); font-weight: 700; line-height: 2.5rem; text-align: center; color: #fff; } .march.dndn-package .area-vlog { padding: 4rem 0; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/march-v-log-bg-251127.png'); background-repeat: no-repeat; background-size: cover; background-position: top center;} .march.dndn-package .area-vlog .tit-cont{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/march-contTop_bg.png');} .march.dndn-package .area-vlog .tit-cont h2 span{position: relative; padding-left: 3.2rem; padding-right: 3.2rem; display: inline-block; line-height: inherit;} .march.dndn-package .area-vlog .tit-cont h2 strong{color: #023CFC; line-height: inherit;} .march.dndn-package .area-vlog .tit-cont h2 span::before, .march.dndn-package .area-vlog .tit-cont h2 span::after{content: ''; position: absolute; width: 2.2rem; aspect-ratio: 44/52; background-repeat: no-repeat; background-size: contain; background-position: center; top: 50%; transform: translateY(-50%);} .march.dndn-package .area-vlog .tit-cont h2 span::before{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/march-contTop_left.png'); left: 0;} .march.dndn-package .area-vlog .tit-cont h2 span::after{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/march-contTop_right.png'); right: 0;} .march.dndn-package .area-vlog .box-cont:before { display: none; } .march.dndn-package .area-vlog .text-cont { margin: 1.5rem 0; text-align: center; } .march.dndn-package .area-vlog .text-cont .logo img { display: block; width: 15.5rem; margin: 0 auto; background: #FFEDCB; } .march.dndn-package .area-vlog .text-cont .text { position: relative; margin-top: .6rem; font-size: var( --f-fontSize03); font-weight: 500; color: var(--c-text01); } .march.dndn-package .area-vlog .text-cont .text > em { color: #007456; } .march.dndn-package .area-vlog .text-cont .smile { display: inline-block; width: 1.95rem; height: 1.95rem; vertical-align: top; } .march.dndn-package .area-vlog .text-cont .smile img { vertical-align: top; } .march.dndn-package .area-vlog .box-video { display: flex; background: none; border-radius: 0 0 24px 24px; padding: 0 3rem;} .march.dndn-package .area-vlog .box-video p{font-size: var(--f-detail); line-height: 150%; letter-spacing: -0.14px; margin-top: 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .march.dndn-package .area-vlog .left{width: 43.5rem; max-width: 100%;} .march.dndn-package .area-vlog .videoWrap.youtube{padding-bottom: 0; } .march.dndn-package .area-vlog .videoWrap.youtube .video{width: 100%; aspect-ratio: 870 / 490; position: relative; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); border-radius: 4px; overflow: hidden;} .march.dndn-package .area-vlog .videoWrap.youtube figure::after { width: 4.1rem; height: 4.1rem; background: url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/btn_play.png) no-repeat; background-size: cover; } .march.dndn-package .area-vlog .right{width: calc(100% - 43.5rem); padding-left: 1.2rem;} .march.dndn-package .area-vlog .videoList {display: flex; flex-wrap: wrap; row-gap: 0.8rem; } .march.dndn-package .area-vlog .videoList li{width: 100%;} .march.dndn-package .area-vlog .videoList li .video{display: block; position: relative; border-radius: 4px; aspect-ratio: 234/132; overflow: hidden; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);} .march.dndn-package .area-vlog .videoList li iframe{width: 100%; height: 100%; border: none; outline: 0;} .march.dndn-package .area-vlog .videoList figure { background-size: cover; background-position: center; width: 100%; height: 100%;} .march.dndn-package .area-vlog .videoList figure:after { position: absolute; width: 2.4rem; height: 2.4rem; object-fit: cover; top: 0.8rem; right: 0.8rem; background: url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/btn_play.png); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 2; content: ""; } .march.dndn-package .area-vlog .videoList li.active figure:after { background-image: url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/btn_play_green.png); } .march.dndn-package .area-vlog .videoList li.active .video { position: relative; border: 3px solid #1EC95B; border-radius: 4px; } .march.dndn-package .area-vlog .videoList li.active .video:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; content: ""; } /* edm유학센터 어학연수가 특별한 이유 */ .march.dndn-package .area-vlog .box-cont.special .roundWrap{display: flex; flex-wrap: wrap; column-gap: 1.2rem; padding: 0 3rem;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox{width: calc(50% - 1.2rem); border-radius: 8px; background-color: #fff; border: 1px solid #E4E8F1; box-shadow: 0 4px 10px #EBEFF4; text-align: center; padding: 2rem 2rem 1rem;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .tit{font-size: var(--f-fontSize03); font-weight: 700; line-height: 150%; letter-spacing: -0.26px;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .tit em{color: #023CFC;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .sub{color: var(--c-text03); font-size: var(--f-body2); margin-top: 0.2rem; line-height: 150%; letter-spacing: -0.16px;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .imgWrap{margin-top: 1.6rem;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .imgWrap img{max-width: 100%; object-fit: contain; margin: 0 auto;} /* 고객들의 진짜 어학연수 후기 */ .march.dndn-package .area-vlog .box-cont.review .slideWrap{padding: 0 3rem; } .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide{overflow: hidden; width: calc(100% + 4rem); margin-left: -2rem; padding: 0 2rem 1rem; position: relative;} .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide::before, .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide::after{content: ''; position: absolute; width: 2rem; height: 100%; top: 0; z-index: 2; touch-action: none; pointer-events: none;} .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide::before{left: 0; background: linear-gradient(90deg, #fff 50%, transparent);} .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide::after{right: 0; background: linear-gradient(-90deg, #fff 50%, transparent);} .march.dndn-package .area-vlog .box-cont.review .slide .swiper-slide{position: relative; height: 17rem; border-radius: var(--r-radius02); box-shadow: 0 8px 20px rgba(0,0,0,0.12); padding: 2rem 1.2rem; font-size: var(--f-body2); font-weight: 700; line-height: 150%; letter-spacing: -0.16px; overflow: hidden; color: #fff;} .march.dndn-package .area-vlog .box-cont.review .slide .swiper-slide span{display: block; font-size: var(--f-detail); margin-top: 0.6rem; line-height: 150%; letter-spacing: -0.14px;} .march.dndn-package .area-vlog .box-cont.review .slide .swiper-slide figure{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1;} .march.dndn-package .area-vlog .box-cont.review .slide .swiper-slide em{color: #13FF62;} .march.dndn-package .area-school { position: relative; padding-top: 0; background: linear-gradient(180deg, #C8FDFF 0%, #FFF8EF 100%); } .march.dndn-package .area-school .tag-top { width: 10.3rem; margin-left: -5.15rem; } .march.dndn-package .area-school .box-cont:before { display: none; } .march.dndn-package .area-school .box-school { border-radius: 0 0 24px 24px; } /* 국가별 어학연수 특징 */ .march.dndn-package .characteristic-country{background-color: #F3F6FF; padding: 4rem 0;} .march.dndn-package .characteristic-country .all-title .title{margin-bottom: 1.4rem;} .march.dndn-package .characteristic-country .slideWrap .slide{overflow: hidden; width: calc(100% + 4rem); margin-left: -2rem; padding: 0 2rem 1rem; position: relative;} .march.dndn-package .characteristic-country .slideWrap .slide::before, .march.dndn-package .characteristic-country .slideWrap .slide::after{content: ''; position: absolute; width: 2rem; height: 100%; top: 0; z-index: 2;} .march.dndn-package .characteristic-country .slideWrap .slide::before{left: 0; background: linear-gradient(90deg, #F3F6FF 50%, transparent);} .march.dndn-package .characteristic-country .slideWrap .slide::after{right: 0; background: linear-gradient(-90deg, #F3F6FF 50%, transparent);} .march.dndn-package .characteristic-country .slideWrap .navigation{margin-bottom: 1.4rem;} .march.dndn-package .characteristic-country .swiper-slide{background-color: #fff; border-radius: var(--r-radius01); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); height: 23.7rem; overflow: hidden;} .march.dndn-package .characteristic-country .swiper-slide figure{width: 100%; aspect-ratio: 400/162; background-repeat: no-repeat; background-size: cover; background-position: center;} .march.dndn-package .characteristic-country .swiper-slide .textWrap{padding: 1.2rem 1.2rem 1.6rem;} .march.dndn-package .characteristic-country .swiper-slide .textWrap h3{font-size: var(--f-fontSize04); text-align: center; margin-bottom: 0.8rem;} .march.dndn-package .characteristic-country .swiper-slide .textWrap h3 em{color: #6E31F5;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box{display: flex;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box + .box{margin-top: 0.6rem;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .left{width: 3.8rem; font-size: var(--f-detail);} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .left span{background-color: #6E7C9C; display: inline-block; color: #fff; font-weight: 700; border-radius: 4px; height: 1.3rem; padding: 0 8px; line-height: 1.85; letter-spacing: -0.14px;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .right{width: calc(100% - 3.8rem); font-size: var(--f-body2); line-height: 150%; letter-spacing: -0.16px;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .right .dotTxt{padding-left: 7px; position: relative;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .right .dotTxt::before{content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%; background-color: var(--c-text01); left: 0; top: 0.5rem;} /* */ .march.dndn-package .recommended-training{background-color: #B2DFFF; padding: 4rem 0;} .march.dndn-package .recommended-training .list{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.2rem; row-gap: 1.2rem;} .march.dndn-package .recommended-training .list li{background-color: #fff; border-radius: var(--r-radius01); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); overflow: hidden; text-align: center; height: 11.4rem; padding: 1.6rem;} .march.dndn-package .recommended-training .list li figure{margin: 0 auto 0.4rem; aspect-ratio: 200/90; height: 4.5rem; background-repeat: no-repeat; background-size: contain; background-position: center; max-width: 100%;} .march.dndn-package .recommended-training .list li p{font-size: var(--f-body1); margin-top: 0.4rem;} .march.dndn-package .recommended-training .bottom-txt{font-size: var(--f-detail); color: var(--c-text02); text-align: center; line-height: 150%; letter-spacing: -0.14px; margin-top: 1.2rem;} .march.dndn-package .recommended-training .next-txt{margin: 2rem 0 0.8rem; font-size: var(--f-fontSize03); font-weight: 700; text-align: center; color: var(--c-text01); letter-spacing: -0.26px; line-height: 150%;} @media screen and (max-width: 1399px){ .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide{width: 100%; margin-left: 0; padding: 0;} .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide::before{display: none;} .march.dndn-package .area-vlog .box-cont.review .slideWrap .slide::after{width: 100px; background: linear-gradient(-90deg, #fff 20%, transparent);} .march.dndn-package .area-vlog .box-cont.review .navigation{position: static; margin-top: 20px;} } @media screen and (max-width: 1200px){ .march.dndn-package .recommended-training .list{grid-template-columns: repeat(2,1fr);} .march.dndn-package .characteristic-country .swiper-slide{height: auto;} } @media screen and (max-width: 768px){ .march.dndn-package .all-title .sub{font-size: var(--f-fontSize05); letter-spacing: -0.16px; line-height: 150%;} .march.dndn-package .all-title .title{margin-bottom: 55px; margin-top: 8px; line-height: 130%; letter-spacing: -0.5px;} .march.dndn-package .link-btn .btn{font-size: var(--f-fontSize04); height: 3.07rem; width: 15.38rem;} .march.dndn-package .link-btn .btn svg{width: 16px; height: 16px; margin-left: 4px;} .march.dndn-package .area-pg-visual .contactWrap { margin-top: 10.7rem; } .march.dndn-package .area-pg-visual .titleWrap span { padding: 2px 8px; font-size: 1.4rem; } .march.dndn-package .area-pg-visual .bgImage { background-image: url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/mainBanner_newyear_tablet.png); background-position: center center; } .march.dndn-package .area-notice .box-cont .tag-notice { width: 124px; height: 36px; font-size: 18px; line-height: 36px; } .march.dndn-package .area-notice .box-cont .tag-notice:before { top: -8px; width: 46px; height: 51px; } .march.dndn-package .area-notice .box-cont { padding: 24px 16px 32px; } .march.dndn-package .tag-top { width: 7.6rem; height: 2.8rem; top: 0; margin-top: -1.4rem; margin-left: -3.8rem; line-height: 2.8rem; } .march.dndn-package .area-vlog{background-color: #2859B3; background-image: none; padding: 50px 0;} .march.dndn-package .area-vlog .box-cont{border-width: 2px; padding-bottom: 30px;} .march.dndn-package .area-vlog .box-cont + .box-cont{margin-top: 30px;} .march.dndn-package .area-vlog .tit-cont{padding: 28px 0; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/march-contTop_bg-mo.png');} .march.dndn-package .area-vlog .tit-cont h2{line-height: 130%; letter-spacing: -0.5px; } .march.dndn-package .area-vlog .tit-cont h2 span{padding: 0 38px;} .march.dndn-package .area-vlog .tit-cont h2 span::before, .march.dndn-package .area-vlog .tit-cont h2 span::after{width: 26px; aspect-ratio: 26/32;} .march.dndn-package .area-vlog .box-cont.special .roundWrap{padding: 0 16px;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox{width: 100%; padding: 24px 16px 20px;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox + .roundBox{margin-top: 12px;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .sub{font-size: var(--f-detail); letter-spacing: -0.13px; margin-top: 8px;} .march.dndn-package .area-vlog .box-cont.special .roundWrap .roundBox .imgWrap{margin-top: 16px;} .march.dndn-package .area-vlog .box-cont.review .slideWrap{padding: 0 0 0 16px;} .march.dndn-package .area-vlog .box-cont.review .slide .swiper-slide{height: 72.2222vw; padding: 24px; box-shadow: none;} .march.dndn-package .area-vlog .box-cont.review .slide .swiper-slide br{display: none;} .march.dndn-package .area-vlog .box-cont.review .navigation{margin: 16px 16px 14px auto;} .march.dndn-package .area-vlog .box-cont.review .navigation .fraction{font-size: var(--f-body2); height: 1.92rem; line-height: 1.8; letter-spacing: -1.14px; padding: 0 15px;} .march.dndn-package .area-vlog .text-cont { margin: 24px 0;} .march.dndn-package .area-vlog .text-cont .text { font-size: 1.3rem; line-height: 130%; } .march.dndn-package .area-vlog .box-video { display: block; padding: 0 16px 0; } .march.dndn-package .area-vlog .mo-video{width: 100%;} .march.dndn-package .area-vlog .mo-video .videoWrap + .videoWrap{margin-top: 24px;} .march.dndn-package .area-vlog .videoList {padding: 0; width: 100%;} .march.dndn-package .area-vlog .videoList li + li{margin-top: 24px;} .march.dndn-package .area-vlog .box-video p{margin-top: 8px; font-size: var(--f-body2); letter-spacing: -0.14px;} .march.dndn-package .area-vlog .videoList li figure{position: relative;} .march.dndn-package .area-vlog .videoList li figure::after {content: ''; width: 3.69rem; height: 3.69rem; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/btn_play.png'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} .march.dndn-package .area-school .tag-top { width: 12.62rem; margin-left: -6.31rem; } .benefit-best{padding: 50px 0;} .benefit-best .videoWrap.youtube{border-radius: 4px;} .benefit-best .roundWrap{padding: 40px 16px 18px;} .benefit-best .roundWrap + .roundWrap{margin-top: 54px;} .benefit-best .roundWrap .wrap-title{font-size: var(--f-fontSize05); width: 20.76rem; height: 3.69rem; line-height: 3;} .benefit-best .roundWrap .wrap-title.other{height: 4.3rem; line-height: 1.3; padding-top: 6px; top: -2.15rem;} .benefit-best .article + .article{padding-top: 30px; margin-top: 30px;} .benefit-best .article1{padding: 0;} .benefit-best .article1 .textWrap{width: 100%;} .benefit-best .article1 .imgWrap{width: 100%; margin-top: 12px;} .benefit-best .article1 .textWrap{text-align: center;} .benefit-best .article1 .textWrap h3{font-size: 1.3rem; margin-bottom: 8px;} .benefit-best .article1 .textWrap p{font-size: var(--f-body1);} .benefit-best .article1 .textWrap .bottom, .benefit-best .roundWrap1 .article1 .textWrap .bottom{font-size: 0.92rem; line-height: 150%; letter-spacing: -0.12px; margin-top: 12px;} .benefit-best .article2 .sub-bottom{font-size: 0.92rem; line-height: 150%; letter-spacing: -0.12px; margin-top: 8px;} .benefit-best .article2 .sub-title{font-size: var(--f-body1); letter-spacing: -0.15px; line-height: 150%; margin-bottom: 4px;} .benefit-best .article2 .box-2{margin-top: 20px;} .benefit-best .article2 .box-2 .roundBox{width: 100%; padding: 20px 16px 15px;} .benefit-best .article2 .box-2 .roundBox + .roundBox{margin-top: 8px;} .benefit-best .article2 .box-2 .roundBox p{margin-bottom: 16px;} .benefit-best .article2 .review-text{margin-top: 8px; margin-bottom: 30px;} .benefit-best .article2 .review-text .roundBox{padding: 24px 16px; display: block;} .benefit-best .article2 .review-text .roundBox + .roundBox, .benefit-best .article2 .review-text .mo-btn + .roundBox{margin-top: 8px;} .benefit-best .article2 .review-text .roundBox .imgWrap{width: 5.38rem; height: 5.38rem; margin: 0 auto 8px;} .benefit-best .article2 .review-text .roundBox .textWrap{width: 100%; padding: 0; text-align: center; font-size: var(--f-body1); word-break: keep-all;} .benefit-best .article2 .review-text .roundBox .textWrap .name{font-size: var(--f-body2); margin-top: 8px;} .benefit-best .article2 .review-text .moreBtn{background-color: #1EC95B; color: #fff; display: flex; align-items: center; justify-content: center; display: inline-block; border-radius: var(--r-radius03); height: 3.07rem; font-size: var(--f-fontSize04); font-weight: 500; width: 8.92rem; margin-top: 24px; transition: background-color 0.3s ease;} .benefit-best .article2 .review-text .moreBtn svg{width: 1.23rem; height: 1.23rem;} .benefit-best .article2 .review-text .mo-btn ~ .roundBox{display: none;} .benefit-best .article2 .review-text .mo-btn.active{display: none;} .benefit-best .article2 .review-text .mo-btn.active ~ .roundBox{display: block;} .benefit-best .roundWrap1{padding-bottom: 30px; padding-top: 50px;} .benefit-best .roundWrap1 .article1 .imgWrap{margin-top: 24px;} .benefit-best .roundWrap1 .article1 .textWrap p{font-size: var(--f-fontSize05);} .march.dndn-package .characteristic-country{padding: 50px 0 40px;} .march.dndn-package .characteristic-country .all-title .title{margin-bottom: 30px;} .march.dndn-package .characteristic-country .slideWrap .slide{width: calc(100% + 32px); margin-left: -16px; padding: 0 16px 10px;} .march.dndn-package .characteristic-country .slideWrap .slide::before, .march.dndn-package .characteristic-country .slideWrap .slide::after{width: 16px;} .march.dndn-package .characteristic-country .swiper-slide{height: auto;} .march.dndn-package .characteristic-country .swiper-slide .textWrap{padding: 16px 16px 26px;} .march.dndn-package .characteristic-country .swiper-slide .textWrap h3{font-size: var(--f-fontSize03); margin-bottom: 12px;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box + .box{margin-top: 12px;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .left{width: 5rem;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .left span{padding: 0 5px; height: 1.69rem;} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .right{width: calc(100% - 5rem);} .march.dndn-package .characteristic-country .swiper-slide .textWrap .box .right .dotTxt::before{top: 8px;} .march.dndn-package .characteristic-country .slideWrap .navigation{position: static; margin-bottom: 20px;} .march.dndn-package .characteristic-country .slideWrap .navigation .pagination{overflow-x: auto; display: flex; overflow-y: hidden;} .march.dndn-package .characteristic-country .slideWrap .navigation .swiper-pagination-bullet{width: auto; height: 2.61rem; border-radius: var(--r-radius03); background: #DAE0F0; color: var(--c-text02 ); opacity: 1; font-size: var(--f-detail); letter-spacing: -0.13px; line-height: 2.7; padding: 0px 16px; margin: 0;} .march.dndn-package .characteristic-country .slideWrap .navigation .swiper-pagination-bullet + .swiper-pagination-bullet{margin-left: 6px;} .march.dndn-package .characteristic-country .slideWrap .navigation .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #6E31F5; color: #fff; font-weight: 600;} .march.dndn-package .recommended-training{padding: 50px 0;} .march.dndn-package .recommended-training .all-title .title{margin-bottom: 30px;} .march.dndn-package .recommended-training .list{column-gap: 8px; row-gap: 8px; } .march.dndn-package .recommended-training .list li{height: 14.92rem; padding: 12px 16px;} .march.dndn-package .recommended-training .list li strong{font-size: var(--f-fontSize05); width: 100%;} .march.dndn-package .recommended-training .list li p{font-size: var(--f-body2); margin-top: 0; width: 100%;} .march.dndn-package .recommended-training .list li figure{aspect-ratio: 128/54; height: 4.15rem; margin-bottom: 0;} .march.dndn-package .recommended-training .list li .textWrap{height: calc(100% - 4.15rem); display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} .march.dndn-package .recommended-training .list li.ec figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/recommended-training-1-mo.png') !important;} .march.dndn-package .recommended-training .list li.kaplan figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/recommended-training-2-mo.png') !important;} .march.dndn-package .recommended-training .list li.ilsc figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/recommended-training-3-mo.png') !important;} .march.dndn-package .recommended-training .list li.ces figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/recommended-training-4-mo.png') !important;} .march.dndn-package .recommended-training .list li.bayswater figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/recommended-training-5-mo.png') !important;} .march.dndn-package .recommended-training .list li.vgc figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/recommended-training-6-mo.png') !important;} .march.dndn-package .recommended-training .bottom-txt{margin-top: 16px;} .march.dndn-package .recommended-training .next-txt{margin: 30px 0 12px;} } /************************************************************* hover effect *************************************************************/ @media (hover: hover) and (pointer: fine) { .march.dndn-package .link-btn .btn:hover{background-color: var(--c-text03);} .benefit-best .article2 .review-text .moreBtn:hover{background-color: var(--c-text03);} } /***************************************** 25-05월 event update *****************************************/ .may { padding: 4rem 0; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-bg-251226.webp'); background-repeat: no-repeat; background-size: cover; background-position: top center; } .may .box { padding: 3rem; border-radius: 4px; background: #FFF; } .may .title { font-size: var(--f-fontSize01); font-weight: 700; line-height: 130%; text-align: center; color: var(--c-text01); } .may .title > strong { line-height: 130%; font-weight: 700; color: #E54231; } .may .innerBox { width: 100%; max-width: 51.8rem; margin: 3rem auto 0; } .may .innerBox .info{margin-top: 40px;} .may .innerBox .info p {color: #666; text-align: center; font-size: var(--f-body2); font-style: normal;font-weight: 400;line-height: 150%;letter-spacing: -0.01rem; margin-top: 1.2rem;} .may .listEvent li { display: flex; gap: 1.2rem; } .may .listEvent li + li { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #E4E8F1; } .may .listEvent .textWrap { width: calc(100% - 25.3rem - 1.2rem); } .may .listEvent .titleList { display: block; font-size: var(--f-fontSize02); font-weight: 700; line-height: 2rem; letter-spacing: -.2px; color: #000; } .may .listEvent .titleList figure { display: inline-block; width: 1.6rem; height: 2rem; aspect-ratio: 1/1; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-flag01.png'); background-repeat: no-repeat; background-size: 1.6rem; background-position: center; vertical-align: top; } .may .listEvent .titleList figure.flag02 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-flag02.png'); } .may .listEvent .titleList figure.flag03 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-flag03.png'); } .may .listEvent .text { margin: .8rem 0 1.2rem; font-size: var(--f-fontSize05); color: #000; } .may .listEvent .text > strong { font-weight: 700; color: #E54231; } .may .listEvent .textWrap .contact-btn { display: flex; align-items: center; justify-content: center; width: 6.45rem; height: 1.6rem; background-color: #000; color: #fff; font-size: var(--f-detail); border-radius: var(--r-radius03); font-weight: 400; } .may .listEvent .textWrap .contact-btn .arrow { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/buttonArrow.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 0.8rem; height: 0.8rem; margin-left: 0.2rem; } .may .listEvent .imgWrap { width: 25.3rem; } .may .listEvent .imgWrap figure { aspect-ratio: 506/270; border-radius: 12px; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-img01-251226.png'); background-repeat: no-repeat; background-size: cover; background-position: center; } .may .listEvent .imgWrap figure.img02 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-img02-251226.png'); } .may .listEvent .imgWrap figure.img03 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/dndn-package/may-benefit-img03-251226.png'); } .may .bottomText {display: flex;justify-content: center;align-items: center;gap: .2rem;margin-top: 3rem;margin-bottom: .8rem;font-size: var(--f-body1);} .may .bottomText figure {display: block;width: 1.2rem;height: 1.2rem;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/uk-early-study-program/boxArrowDown.svg');background-repeat: no-repeat;background-size: cover;background-position: center;} .may .btn-filled-secondary-medium {min-width: 10rem;margin: 0 auto;} .may .btn-filled-secondary-medium {display: flex;justify-content: center;align-items: center;width: fit-content;height: 2.4rem;padding: 0 1.2rem;border-radius: 8px;background-color: var(--c-text01);font-size: var(--f-body2);font-weight: 400;line-height: 150%;color: #fff;} .may .btn-filled-secondary-medium .arrow {width: 0.8rem;height: 0.8rem;margin-left: 0.1rem;background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/buttonArrow.svg');background-repeat: no-repeat;background-size: contain;background-position: center;} .may .btn-filled-secondary-medium:hover {background-color: var(--c-text02);} @media screen and (max-width: 768px) { .may { padding: 50px 0; background: #B5EEFF; } .may .box { padding: 30px 0; } .may .innerBox { max-width: 100%; margin-top: 32px; } .may .innerBox .info{margin-top: 24px;} .may .listEvent li { display: block; padding: 0 16px; } .may .listEvent li + li { margin-top: 32px; padding-top: 32px; } .may .listEvent .textWrap { width: 100%; margin-bottom: 24px; text-align: center; } .may .listEvent .imgWrap { width: 100%; } .may .listEvent .titleList { line-height: 2.235rem; } .may .listEvent .titleList figure { width: 1.7rem; height: 2.235rem; background-size: 1.7rem; } .may .listEvent .text { margin: 8px 0 16px; } .may .bottomText figure{width: 1.85rem;height: 1.85rem;} .may .listEvent .textWrap .contact-btn { width: 9.46rem; height: 2.46rem; margin: 0 auto; } .may .listEvent .textWrap .contact-btn .arrow { width: 1.24rem; height: 1.24rem; margin-left: 2px; } .may .btn-filled-secondary-medium{min-width: 17.77rem;height: 3.08rem; font-size: var(--f-fontSize05);font-weight: 700;} .may .btn-filled-secondary-medium .arrow{width: 1.23rem;height: 1.23rem;} }