@charset "utf-8";
.main-slide-prev { top: -70px; left: auto; right: 56px; width: 44px; height: 44px; border: 1px solid #ccc; border-radius: 100%; background: url('data:image/svg+xml,')no-repeat center; background-color: #fff; }
.main-slide-next { top: -70px; right: 0; width: 44px; height: 44px; border: 1px solid #ccc; border-radius: 100%; background: url('data:image/svg+xml,')no-repeat center; background-color: #fff; }
/* visual */
#visual { width: 100%; overflow: hidden; }
#visual .visual-inner { margin-top: 60px; }
#visual .visual-inner ul { display: flex; flex-wrap: wrap; flex-direction: column; width: 200px; margin-top: 48px; }
#visual .visual-inner ul li:nth-of-type(1) { margin-bottom: 10px; }
#visual .visual-inner ul li a { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; padding: 13px 0; background: #fff; border-radius: 25px; box-shadow: 5px 5px 11.7px 1.3px rgba(0, 0, 0, 0.07); }
#visual .visual-inner ul li a span {display: inline-block; margin-left: 6px; color: #58595a; font-size: 16px; font-weight: 600; letter-spacing:-0.02em; }
#visual .visual-inner ul li a img { width: auto; height: 20px; }
.visual-slide-wrap { position: relative; width: 100%; overflow: hidden; }
.visual-slide-prev { left: 48px; width: 44px; height: 44px; border-radius: 100%; background: url('data:image/svg+xml,')no-repeat center; }
.visual-slide-next { right: 48px; width: 44px; height: 44px; border-radius: 100%; background: url('data:image/svg+xml,')no-repeat center; }
/* visual pagination */
.main-visual-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; grid-column-gap: 32px; width: 568px; bottom: 40px; left: 50%; transform: translateX(-50%); }
.main-visual-pagination .swiper-pagination-bullet { position: relative; display: flex; flex-wrap: wrap; width: auto; height: auto; text-align: center; border-radius: 0; background-color: transparent; }
.main-visual-pagination .swiper-pagination-bullet p { width: 100%; padding: 0 12px; font-size: 16px; line-height: 3; font-weight: 400; letter-spacing: -0.03em; color: #fff; opacity: 0.4; }
.main-visual-pagination .swiper-pagination-bullet i { position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; height: 2px; background-color: #fff; border: none; opacity: 0.4; } /*progress bar 채워지는 부분 */
.main-visual-pagination .swiper-pagination-bullet b { position: absolute; bottom: 0; left: 0; z-index: 2; width: 0; height: 2px; background-color: #fff; border: none; z-index: 2; }
.main-visual-pagination .swiper-pagination-bullet-active { background-color: transparent;}
.main-visual-pagination .swiper-pagination-bullet-active p { font-weight: bold; opacity: 1; }
.main-visual-pagination .swiper-pagination-bullet-active i { opacity: 0.4; }
.main-visual-pagination .swiper-pagination-bullet-active b { animation-name: countingBar; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-direction: alternate ; animation-fill-mode:forwards; transition: transform .2s; opacity: 1; }
/* visual pagination animation */
@keyframes countingBar {
0% { width: 100%; transform: scaleX(0); }
100% { width: 100%; transform: scaleX(1); }
}
/* curriculum */
.curriculum { width: 100%; margin: 0 auto; }
.curriculum .program { border-bottom: 1px solid #ddd; }
.curriculum .program ul { display: flex; justify-content: center; width: 100%; }
.curriculum .program li { width: 33.33%; }
.curriculum .program li a { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.curriculum .program li:nth-of-type(2) { border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.curriculum .program li p { color: #222; font-size: 26px; font-weight: 700; line-height: 36px; }
.curriculum .program li p small { display: block; margin-bottom: 4px; color: #555; font-size: 18px; line-height: 1.2; }
.curriculum .program li i { width: 96px; height: 96px; margin: 28px 0; border-radius: 100%; }
.curriculum .program li:nth-of-type(1) i { background: url('data:image/svg+xml,')no-repeat center; }
.curriculum .program li:nth-of-type(2) i { background: url('data:image/svg+xml,')no-repeat center; }
.curriculum .program li:nth-of-type(3) i { background: url('data:image/svg+xml,')no-repeat center; }
.curriculum .curriculum-tab { width: 1440px; margin: 108px auto; }
.curriculum .tab-list-wrap { display: flex; justify-content: center; width: 100%; margin: 0 auto 48px; border-bottom: 1px solid #aaa; }
.curriculum .tab-list { display: flex; justify-content: center; width: 1030px; border: 1px solid #aaa; border-bottom: none; border-radius: 8px 8px 0 0; overflow: hidden; }
.curriculum .tab-list li { width: 50%; }
.curriculum .tab-list li .tab-button { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px 0; color: #555; font-size: 26px; line-height: 1.2; }
.curriculum .tab-list li .tab-button.on { background: #1a73e8; color: #fff; }
.tab-slide-wrap { position: relative; padding-bottom: 18px; overflow: hidden; }
.tab-slide { position: relative; width: 696px; height: 196px; border-radius: 14px; }
.tab-slide .swiper-slide { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 48px; background: #F1EDFB; border-radius: 14px; }
.tab-slide .swiper-slide b { display: block; margin-bottom: 8px; color: #8361D8; font-size: 18px; line-height: 1.2; }
.tab-slide .swiper-slide p { color: #333; font-size: 26px; line-height: 36px; }
.tab-slide .swiper-slide em { display: block; font-weight: bold; }
.tab-player { position: absolute; bottom: -18px; left: 6px; display: flex; grid-column-gap: 10px; }
.swiper-pagination.tab-pagination { position: static; display: flex; grid-column-gap: 10px; width: fit-content; }
.swiper-pagination.tab-pagination .swiper-pagination-bullet { margin: 0; background: #222; opacity: 1; }
.swiper-pagination.tab-pagination .swiper-pagination-bullet-active { background: #D9D9D9; }
.pagination-btn { position: relative; width: 6px; height: 8px; cursor: pointer; }
.swiper-player { position: absolute; top: 0; left: 0; width: 6px; height: 8px; background: url('data:image/svg+xml,'); text-indent: -9999px; }
.thum-list { display: none; width: 100%; }
.thum-list.on { display: flex; justify-content: space-between; }
.thum-list ul { display: flex; grid-column-gap: 24px; }
.thum-list ul li { display: flex; justify-content: space-between; align-items: flex-end; flex-direction: column; width: 216px; height: 196px; padding: 32px; background: #f5f8fd; border: 1px solid #ddd; border-radius: 16px; }
.thum-list ul li p { width: 100%; color: #222; font-size: 22px; line-height: 30px; text-align: left; }
.thum-list ul li p em { display: block; color: #1A73E8; font-weight: 700; }
.thum-list ul li i { width: 56px; height: 56px; }
.thum-list ul li:nth-of-type(1) i { background: url('data:image/svg+xml,')no-repeat center; }
.thum-list ul li:nth-of-type(2) i { background: url('data:image/svg+xml,')no-repeat center; }
.thum-list ul li:nth-of-type(3) i { background: url('data:image/svg+xml,')no-repeat center; }
@media (hover: hover) {
.thum-list ul li:hover { background: #1A73E8; border: 1px solid #ddd; }
.thum-list ul li:hover p { color: #fff; }
.thum-list ul li:hover p em { color: #fff; }
.thum-list ul li:nth-of-type(1):hover i { background: url('data:image/svg+xml,')no-repeat center; }
.thum-list ul li:nth-of-type(2):hover i { background: url('data:image/svg+xml,')no-repeat center; }
.thum-list ul li:nth-of-type(3):hover i { background: url('data:image/svg+xml,')no-repeat center; }
}
/* AWRAD */
.awards { width: 100%; margin: 0 auto 180px; background: url('../images/web/main/awards_bg.png')no-repeat center, #272732;}
.awards .inner { display: flex; flex-wrap: nowrap; align-items: center; grid-column-gap: 80px; }
.awards .awards-desc { width: 832px; padding: 140px 0; }
.awards h3 { color: #fff; font-size: 48px; line-height: 1.25; }
.awards h3 span { font-weight: bold; background: linear-gradient(90deg, #1A73E8 0%, #33D2BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.awards .subtitle { margin-top: 10px; color: #aaa; font-size: 20px; line-height: 1.5; }
.awards ul { display: flex; flex-wrap: wrap; grid-column-gap: 16px; grid-row-gap: 16px; margin: 34px 0 39px; }
.awards ul li { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(50% - 8px); border: 1px solid transparent; background-image: linear-gradient(#2C2C39, #2C2C39), linear-gradient(270deg, #33D2C0 0%, rgba(26, 115, 232, 0.6) 100%); background-origin: border-box; background-clip: content-box, border-box; border-radius: 12px; }
.awards ul li p { position: relative; padding: 34px 0; color: #aaa; font-size: 18px; line-height: 28px; letter-spacing: -0.05em; text-align: center; }
.awards ul li strong { color: #fff; font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }
.awards ul li strong span { color: #1A73E8; }
.awards ul li p::before { position: absolute; bottom: 50%; transform: translateY(50%); left: -40px; display: block; content:''; clear: both; width: 32px; height: 68px; background: url('data:image/svg+xml,')no-repeat center; }
.awards ul li p:after { position: absolute; bottom: 50%; transform: translateY(50%); right: -40px; display: block; content:''; clear: both; width: 32px; height: 68px; background: url('data:image/svg+xml,')no-repeat center; }
.awards .slogan { display: flex; justify-content: center; width: 100%; padding: 24px 0; color: #fff; font-size: 22px; line-height: 1.2; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; }
.awards .slogan b { display: inline-block; color: #1A73E8; }
/* educate */
.educate { position: relative; width: 100%; margin: 0 auto 180px; padding: 64px 0 108px; }
.educate:after { position: absolute; top: 0; right: 0; display: block; content:''; clear: both; width: 760px; height: 100%; background: rgba(26, 115, 232, 0.1); border-radius: 48px 0 0 48px; }
.educate .inner { overflow: hidden; }
.educate h3 { color: #000; font-size: 48px; line-height: 1.3333; }
.educate h3 em { color: #1A73E8; font-weight: bold; }
.educate .subtitle { margin-top: 12px; color: #777; font-size: 20px; line-height: 1.2; }
.edu-wrap { position: relative; display: flex; flex-direction: row-reverse; position: relative; max-width: 1440px; margin: 48px auto 0; }
.edu-slide .swiper-slide-duplicate-next:after { position: absolute; left: 0; top: 0; display: block; content:''; clear: both; width: 300px; height: 100%; }
.edu-slide .swiper-slide-duplicate-next .slide-inner { background: transparent; }
.edu-slide .swiper-slide-duplicate-next .slide-inner img { display: none; }
.edu-slide .swiper-slide-prev .slide-inner { background: transparent; }
.edu-slide .swiper-slide-prev .slide-inner img { display: none; }
.edu-slide { display: flex; align-items: center; max-width: 936px; height: 480px; }
.edu-slide .swiper-slide { position: relative; display: flex; flex-wrap: wrap; width: 36%; height: 374px; }
.edu-slide .swiper-slide .slide-inner { display: flex; align-items: flex-end; position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 14px; }
.edu-slide .slide-kids { background: #44b51c; }
.edu-slide .slide-elementary { background: #2E85F8;}
.edu-slide .slide-middle { background: #223854;}
.edu-slide .swiper-slide .edu-title { position: absolute; top: 40px; left: 0; width: 100%; border-radius: 16px; }
.edu-slide .swiper-slide-active .edu-title { display: none; }
.edu-slide .swiper-slide .edu-title p { color: #fff; font-size: 18px; line-height: 1.2; text-align: center; }
.edu-slide .swiper-slide .edu-title b { display: block; color: #fff; font-size: 24px; line-height: 1.2; font-weight: 700; text-align: center; }
.edu-slide .swiper-slide-active { display: flex; grid-column-gap: 64px; width: 100%; }
.edu-slide .swiper-slide-active .slide-inner { display: flex; justify-content: space-between; align-items: center; width: 49rem; height: 30rem; transform: translate(-31.5rem, -11%); background: transparent; }
.edu-slide .swiper-slide-active img { width: 25rem; height: 100%; }
.edu-slide .swiper-slide .edu-slide-desc { position: relative; display: none; flex-direction: column; }
.edu-slide .swiper-slide-active .edu-slide-desc { display: block; }
.edu-slide .swiper-slide .edu-slide-desc:before { position: absolute; top: -30px; left: 0; display: block; content:''; clear: both; width: 10px; height: 10px; background: #1a73e8; border-radius: 100%; }
.edu-slide .swiper-slide .edu-slide-desc b { color: #333; font-size: 32px; }
.edu-slide .swiper-slide .edu-slide-desc p { margin: 14px 0 40px; color: #555; font-size: 20px; line-height: 1.6; }
.edu-slide .swiper-slide .edu-slide-desc a { display: flex; justify-content: space-between; align-items: center; width: 204px; height: 50px; padding: 0 30px; color: #333; font-size: 16px; font-weight: 700; border: 2px solid #333; border-radius: 25px; }
.edu-slide .swiper-slide .edu-slide-desc a:after { display: block; content:''; clear: both; width: 16px; height: 14px; background: url('data:image/svg+xml,')no-repeat center; }
/* knowhow */
.knowhow { position: relative; width: 100%; margin: 0 auto 180px; }
.knowhow .inner { overflow: hidden; }
.knowhow p { color: #777; font-size: 20px; line-height: 1.2; }
.knowhow h3 { margin: 14px 0 48px; color: #000; font-size: 48px; line-height: 1.3333; }
.knowhow h3 em { color: #1A73E8; font-weight: bold; }
.knowhow-slide { position: relative; }
.knowhow-slide .swiper-slide { max-width: 480px; border-radius: 14px; overflow: hidden; }
.knowhow-slide .swiper-slide .slide-inner { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 480px; height: 100%; padding: 64px 0; }
.knowhow-slide .swiper-slide .slide-title { width: 100%; border-radius: 16px; }
.knowhow-slide .swiper-slide .slide-title p { color: #fff; font-size: 20px; line-height: 1.6; text-align: center; }
.knowhow-slide .swiper-slide .slide-title strong { display: block; color: #fff; font-size: 32px; line-height: 1.375; font-weight: 700; text-align: center; }
.knowhow-slide .swiper-slide ul { display: flex; grid-column-gap: 12px; }
.knowhow-slide .swiper-slide ul li { color: #fff; padding: 6px 18px; font-size: 16px; line-height: 2; font-weight: 700; border-radius: 100px;}
.knowhow-slide .slide-math ul li { background: #1983F9; }
.knowhow-slide .slide-eng ul li { background: #1F965F; }
.knowhow-slide .slide-middle ul li { background: #9843E8; }
/* finding */
.finding { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 0 auto 180px; padding: 180px 0; background: url('../images/web/main/finding_bg.png')no-repeat center; }
.finding h3 { color: #fff; font-size: 48px; line-height: 1.25; }
.finding h3 em { color: #FFE500; font-weight: 700; }
.finding p { margin: 14px 0 40px; color: #ddd; font-size: 20px; line-height: 1.2; text-align: center; }
.finding p em { color: #191F2C; font-weight: 700; }
.finding .input-box { position: relative; width: 528px; height: 64px; }
.finding input[type='text'] { width: 100%; height: 100%; padding: 0 32px; background: #fff; border-radius: 100px; box-shadow: 0px 18px 27px 0px #00000014; }
.finding input[type='text']:focus { outline: none; }
.finding input[type='text']::placeholder { color: #999; font-size: 18px; line-height: 1.2; }
.finding .input-box:after { position: absolute; top: 50%; right: 28px; display: block; content:''; clear: both; width: 24px; height: 24px; background: url('data:image/svg+xml,')no-repeat center; transform: translateY(-50%);}
/* review */
.review { position: relative; width: 100%; margin: 0 auto 180px; }
.review .inner { overflow: hidden; }
.review p { color: #777; font-size: 20px; line-height: 1.2; }
.review h3 { margin: 14px 0 48px; color: #000; font-size: 48px; line-height: 1.2; }
.review h3 em { color: #1A73E8; font-weight: bold; }
.review-slide { position: relative; }
.review-slide .swiper-slide { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid #ddd; overflow: hidden; }
.review-slide .swiper-slide .slide-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; padding: 32px; }
.review-slide .swiper-slide .cate { background: #1A73E821; color: #1A73E8; padding: 8px 14px; font-size: 14px; line-height: 1.2; font-weight: 700; border-radius: 100px; }
.review-slide .swiper-slide .subject { width: 100%; margin: 12px 0 16px; color: #555; font-size: 18px; line-height: 1.5556; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.review-slide .swiper-slide .writing { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.review-slide .swiper-slide .writing .name { color: #999; font-size: 14px; line-height: 1.2; font-weight: 700; }
/* apply */
.apply { width: 100%; margin: 0 auto 180px; }
.apply .inner { margin: 0 auto; padding: 118px 120px; background: url('../images/web/main/apply_main-bg.png')no-repeat center, #f1f1f1; border-radius: 48px; overflow: hidden; }
.apply h3 { color: #000; font-size: 48px; line-height: 1.3333; }
.apply h3 em { color: #1A73E8; font-weight: bold; }
.apply p { margin: 14px 0 48px; color: #777; font-size: 20px; line-height: 1.2; }
.apply a { display: flex; align-items: center; justify-content: space-between; width: 204px; padding: 16px 32px; background: #555; color: #fff; font-size: 16px; line-height: 1.2; border-radius: 100px; }
.apply a:after { display: block; content:''; clear: both; width: 16px; height: 13px; background: url('data:image/svg+xml,')no-repeat center; }
@media ( max-width: 1024px ) {
.inner { width: 100%; margin: 0 auto; padding: 0 32px; }
.web-view { display: none; }
.mob-view { display: block; }
header { height: auto; border-bottom: 2px solid rgba(255,255,255,0.15); }
header .header-wrap { position: relative; display: block; }
header .header-wrap .main-logo { position: static; display: block; width: fit-content; padding: 36px 32px; transform: translate(0); }
header .header-wrap .main-logo img { width: fit-content; height: 36px; }
header .header-wrap .menu-trigger { position: absolute; right: 36px; top: 38px; width: 48px; height: 32px; cursor: pointer; z-index: 2; text-indent: -9999px; }
header .header-wrap .menu-trigger span { position: absolute; left: 0; width: 48px; height: 4px; transition: all .4s; background-color: #fff; }
header .header-wrap .menu-trigger span:nth-of-type(2) { top: 14px; }
header .header-wrap .menu-trigger span:nth-of-type(3) { top: 28px; }
header .header-wrap .menu-trigger.active span:nth-of-type(1) { background: #333; -webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg); }
header .header-wrap .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
header .header-wrap .menu-trigger.active span:nth-of-type(3) { background: #333; -webkit-transform: translateY(-14px) rotate(45deg); transform: translateY(-14px) rotate(45deg); }
header.scrolling .menu-trigger span { background: #333; }
header .header-wrap nav { display: flex; flex-direction: column; justify-content: center; position: absolute; top: 108px; left: auto; right: -100%; width: 100%; height: calc(100dvh - 108px); background: #fff; transform: translate(0); transition: .2s; }
header .header-wrap nav.opened { right: 0; border-top: 2px solid #ddd; }
header .header-wrap nav ul { display: flex; flex-direction: column; align-items: center; align-content: center; }
header .header-wrap nav ul li:nth-of-type(2) { margin: 40px auto; }
header .header-wrap nav ul li a { color: #333; font-size: 36px; line-height: 1.8333; font-weight: bold; opacity: 1; }
header .header-wrap nav .inquriy { position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; width: 100%; padding: 28px 0; background: #0461ed; color: #fff; font-size: 32px; line-height: 1.1875; font-weight: bold; }
header .header-wrap nav .inquriy i { display: flex; flex-wrap: wrap; height: 20px; margin-right: 32px; color: #fff; font-size: 32px; line-height: 1.1875; font-weight: bold; }
header .header-wrap nav .inquriy i img { height: 40px; margin-right: 20px; }
/* visual */
.visual { position: relative; flex-direction: column; justify-content: center; align-items: end; height: auto; padding-top: 144px; background: url('../images/mob/visual_bg.png')no-repeat center/cover; }
.visual .visual-wrap { flex-direction: column; align-items: flex-start; width: 100%; height: 100%; }
.visual .visual-wrap h2 { margin: 0 auto 36px; }
.visual .visual-wrap .visual-item { position: static; margin: 0 auto; }
.visual a { position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; background: #2d313c; padding: 32px 64px; border-radius: 16px 16px 0 0; }
.visual a img { height: 50px; }
.visual a i { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #00f4bf; border-radius: 100%; }
.visual a i img { height: 24px; }
.benefit { padding: 120px 0 100px; }
.benefit .inner { flex-direction: column; }
.benefit .benefit-desc { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.benefit .benefit-desc img { width: fit-content; }
.benefit .benefit-desc h4 { margin: 40px 0; }
.benefit .benefit-desc h4 img { height: 84px; }
.benefit .benefit-desc p { margin-bottom: 40px; font-size: 32px; line-height: 1.5; }
.condition { padding: 100px 0; background: linear-gradient(320deg, rgba(216,231,255,1) 38%, rgba(231,240,255,1) 38%); }
.condition .inner { width: calc(100% - 128px); padding: 0; }
.condition .condition-desc { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.condition .condition-desc img { width: fit-content; }
.condition h4 { margin: 40px 0 16px; }
.condition ul { grid-row-gap: 0; grid-column-gap: 24px; margin-top: -200px; }
.condition ul li { width: calc(50% - 12px) }
.condition p { margin-top: 40px; }
.review { padding: 64px 0 156px; }
.review h4 { margin: 36px auto 32px; }
.review .review-subtitle { margin-bottom: 32px; font-size: 32px; line-height: 1.5; }
.review .slider-wrap { width: 100%; padding-left: 64px; }
.review-slider { width: 100%; }
.review .swiper-slide { padding: 44px 56px 56px;}
.review .swiper-slide h5 { font-size: 36px; margin-bottom: 12px; line-height: 1.6667; }
.review .swiper-slide p { width: auto; height: 140px; font-size: 28px; line-height: 1.675; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; overflow: hidden }
.review .star { height: 20px; margin: 32px 0 80px; }
.review .swiper-slide .review_customer { height: auto; margin-bottom: 10px; }
.review .swiper-slide .review_customer small { width: 72px; margin-bottom: 8px; font-size: 22px; line-height: 2; border-radius: 22px; }
.review .swiper-slide div img { max-width: 174px; margin-bottom: 0; border-radius: 8px; }
.review .swiper-pagination { grid-column-gap: 16px; margin-top: 40px; }
.review .swiper-pagination-bullet { width: 16px; height: 16px; }
.form { padding: 0; }
.form .form-box { flex-direction: column; width: 100%; max-width: 100%; margin: 44px 0 0; grid-row-gap: 24px; grid-column-gap: 0; }
.form-wrap { position: static; width: 100%; height: auto; padding: 100px 64px; border-radius: 0; }
.form-wrap.fixed { position: static; width: 100%; transform: translate(0); }
.form-wrap .title { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.form-wrap .title h4 img { width: fit-content; height: 54px; }
.form-wrap .title p { font-size: 32px; font-weight: bold; }
#Frm { width: 100%; }
.form-wrap .input-box { width: 100%; margin: 0 auto;}
.form-wrap input { width: 100%; height: 96px; padding: 0 32px; font-size: 32px; border-radius: 8px; }
.form-wrap input[type="text"]::placeholder, .form-wrap input[type="tel"]::placeholder { font-size: 32px; letter-spacing: -0.05em; }
.form-wrap input[name="user_name"] { width: 100%; }
.form-wrap input[type="tel"] { width: 100%; }
.form-wrap .btn-submit { width: 100%; border-radius: 8px; }
.form-wrap input[type="submit"] { height: 104px; }
.form-wrap input[type="submit"] + label { justify-content: center; font-size: 36px; line-height: 104px; }
.form-wrap input[type="submit"] + label:after { position: static; width: 30px; height: 28px; margin-left: 24px; }
.form-wrap .privacy { position: static; margin: 10px 0 16px; text-align: center; }
.form-wrap .privacy input[type="checkbox"] + label { height: 32px; background: url('../images/mob/check_off.png') no-repeat left center/ 32px; }
.form-wrap .privacy input[type="checkbox"]:checked + label { height: 32px; background: url('../images/mob/check_on.png') no-repeat left center/ 32px; }
.form-wrap .privacy .btn-terms { margin-left: 18px; font-size: 26px; }
.form-wrap .privacy label{ padding-left: 52px; font-size: 26px; line-height: 44px; }
#terms .popup-full { width: calc(100% - 128px); }
#terms .popup-full .title { padding: 28px 0; font-size: 28px; line-height: 1.5; border-bottom: 2px solid #ddd; }
#terms .popup-full .pop-content { padding: 32px 36px; height:100%; color: #777; font-size: 20px; line-height: 1.5; }
#terms .popup-full .btn-close { padding: 20px 0; font-size: 20px; line-height: 1.5; font-weight: bold; letter-spacing: -0.056em; }
footer { padding: 100px 0 88px; }
footer .footer-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70%; }
footer ul { margin: 36px auto 32px; }
footer ul li { padding: 0; }
footer ul li:after { width: 2px; height: 20px; }
footer ul li p { padding: 0; font-size: 32px; line-height: 1.5; text-align: center; }
footer ul li:nth-of-type(1) { padding-right: 20px; }
footer ul li:nth-of-type(2) { padding-left: 20px; }
footer ul li:nth-of-type(2):after { display: none; }
footer ul li:nth-of-type(3) { display: flex; justify-content: center; width: 100%; }
footer ul li:nth-of-type(3):after { display: none; }
footer ul li:nth-of-type(4):after { display: none; }
footer ul li:nth-of-type(5) { display: flex; justify-content: center; width: 100%; }
footer .copy { font-size: 26px; line-height: 1.7; text-align: center;}
}
@media ( max-width: 767px ) {
.inner { width: 100%; margin: 0 auto; padding: 0 32px; }
.web-view { display: none; }
.mob-view { display: block; }
.fixed { position: static; transform: translate(0); }
aside a { right: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 10px; }
aside a img { width: auto; height: 5px; margin-bottom: 6px; }
summary img { height: 45px; }
header { height: auto; border-bottom: 1px solid rgba(255,255,255,0.15); }
header .header-wrap { position: relative; display: block; }
header .header-wrap .main-logo { position: static; display: block; width: fit-content; padding: 18px 16px; transform: translate(0); }
header .header-wrap .main-logo img { width: auto; height: 18px; }
header .header-wrap .menu-trigger { position: absolute; right: 18px; top: 20px; width: 24px; height: 16px; cursor: pointer; z-index: 2; text-indent: -9999px; }
header .header-wrap .menu-trigger span { position: absolute; left: 0; width: 24px; height: 2px; transition: all .4s; background-color: #fff; }
header .header-wrap .menu-trigger span:nth-of-type(2) { top: 7px; }
header .header-wrap .menu-trigger span:nth-of-type(3) { top: 14px; }
header .header-wrap .menu-trigger.active span:nth-of-type(1) { background: #333; -webkit-transform: translateY(7px) rotate(-45deg); transform: translateY(7px) rotate(-45deg); }
header .header-wrap .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
header .header-wrap .menu-trigger.active span:nth-of-type(3) { background: #333; -webkit-transform: translateY(-7px) rotate(45deg); transform: translateY(-7px) rotate(45deg); }
header.scrolling .menu-trigger span { background-color: #333; }
header .header-wrap nav { display: flex; flex-direction: column; justify-content: center; position: absolute; top: 54px; left: auto; right: -100%; width: 100%; height: calc(100dvh - 54px); background: #fff; transform: translate(0); transition: .2s; }
header .header-wrap nav.opened { right: 0; border-top: 1px solid #ddd; }
header .header-wrap nav ul { display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; justify-content: center; align-content: center; height: calc(100% - 48px); }
header .header-wrap nav ul li:nth-of-type(2) { margin: 20px auto; }
header .header-wrap nav ul li a { color: #333; font-size: 24px; line-height: 1.8333; font-weight: bold; opacity: 1; }
header .header-wrap nav .inquriy { position: static; bottom: 0; left: 0; display: flex; justify-content: center; width: 100%; padding: 14px 0; background: #0461ed; color: #fff; font-size: 16px; line-height: 1.1875; font-weight: bold; }
header .header-wrap nav .inquriy i { display: flex; flex-wrap: wrap; height: 20px; margin-right: 16px; color: #fff; font-size: 16px; line-height: 1.1875; font-weight: bold; }
header .header-wrap nav .inquriy i img { height: 20px; margin-right: 10px; }
/* visual */
.visual { position: relative; flex-direction: column; justify-content: center; align-items: end; height: auto; padding-top: 74px; background: url('../images/mob/visual_bg.png')no-repeat center/cover; }
.visual .visual-wrap { flex-direction: column; align-items: flex-start; width: 100%; height: 100%; }
.visual .visual-wrap h2 { max-width: 244px; margin: 0 auto 18px; }
.visual .visual-wrap .visual-item { position: static; margin: 0 auto; }
.visual .visual-wrap .visual-item img { width: auto; height: 326px; }
.visual a { position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; background: #2d313c; padding: 16px 32px; border-radius: 8px 8px 0 0; }
.visual a img { height: 25px; }
.visual a i { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background: #00f4bf; border-radius: 100%; }
.visual a i img { height: 12px; }
.benefit { padding: 60px 0 50px; }
.benefit .inner { flex-direction: column; }
.benefit .benefit-desc { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.benefit .benefit-desc img { width: auto; }
.benefit .benefit-desc h4 { margin: 20px 0; }
.benefit .benefit-desc h4 img { height: 42px; }
.benefit .benefit-desc p { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
.benefit .benefit-visual { width: 100%; height: 356px; }
.condition { padding: 50px 0; background: linear-gradient(320deg, rgba(216,231,255,1) 38%, rgba(231,240,255,1) 38%); }
.condition .inner { width: calc(100% - 64px); padding: 0; }
.condition .condition-desc { display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: 100%; }
.condition .condition-desc img { width: auto }
.condition h4 { margin: 20px 0 8px; }
.condition h4 img { height: 87px; }
.condition .condition-visual { height: 348px; }
.condition ul { grid-row-gap: 0; grid-column-gap: 12px; margin-top: -100px; }
.condition ul li { width: calc(50% - 6px) }
.condition ul li img { max-height: 125px; }
.condition p { margin-top: 20px; }
.condition p img { height: 65px; }
.review { padding: 32px 0 78px; }
.review h4 { margin: 18px auto 16px; }
.review h4 img { height: 46px; }
.review .review-subtitle { margin-bottom: 16px; font-size: 16px; line-height: 1.5; }
.review .slider-wrap { width: 100%; padding-left: 32px; }
.review-slider { width: 100%; }
.review .swiper-slide { padding: 22px 28px 28px;}
.review .swiper-slide h5 { font-size: 18px; margin-bottom: 8px; line-height: 1.6667; }
.review .swiper-slide p { height: 70px; font-size: 14px; word-break: keep-all; }
.review .star { height: 10px; margin: 18px 0 40px; }
.review .swiper-slide .review_customer { margin-bottom: 5px; }
.review .swiper-slide .review_customer small { width: 36px; font-size: 11px; line-height: 2; }
.review .swiper-slide div img { max-width: 86px; margin-bottom: 0; border-radius: 4px; }
.review .swiper-pagination { grid-column-gap: 8px; margin-top: 20px; }
.review .swiper-pagination-bullet { width: 8px; height: 8px; }
.form { padding: 0; }
.form .form-box { flex-direction: column; width: 100%; max-width: 100%; margin: 22px 0 0; grid-row-gap: 12px; grid-column-gap: 0; }
.form-wrap { justify-content: center; width: 100%; padding: 50px 32px; border-radius: 0; }
.form-wrap .title { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.form-wrap .title h4 img { width: auto; height: 27px; }
.form-wrap .title p { font-size: 16px; }
.form-wrap .input-box { width: 100%; margin: 0 auto;}
.form-wrap input { width: 100%; height: 48px; padding: 0 16px; font-size: 16px; border-radius: 4px; }
.form-wrap input[type="tel"] { width: 100%; }
.form-wrap input[type="text"]::placeholder, .form-wrap input[type="tel"]::placeholder { font-size: 16px; }
.form-wrap .btn-submit { width: 100%; border-radius: 4px; }
.form-wrap input[type="submit"] { height: 52px; }
.form-wrap input[type="submit"] + label { justify-content: center; font-size: 18px; line-height: 52px; }
.form-wrap input[type="submit"] + label:after { position: static; width: 16px; margin-left: 12px; }
.form-wrap .privacy { margin: 2px 0 4px; text-align: center; }
.form-wrap .privacy input[type="checkbox"] + label { height: 16px; background: url('../images/mob/check_off.png') no-repeat left center/ 16px; }
.form-wrap .privacy input[type="checkbox"]:checked + label { height: 16px; background: url('../images/mob/check_on.png') no-repeat left center/ 16px; }
.form-wrap .privacy label{ padding-left: 22px; font-size: 13px; line-height: 22px; }
.form-wrap .privacy .btn-terms { margin-left: 4px; font-size: 12px;}
#terms .popup-full { width: calc(100% - 64px); }
#terms .popup-full .title { padding: 16px 0; font-size: 20px; border-bottom: 1px solid #ddd; }
#terms .popup-full .pop-content { padding: 16px 18px; height:100%; max-height: 50vh; font-size: 14px; line-height: 1.5; overflow-y: scroll; }
#terms .popup-full .btn-close { padding: 16px 0; font-size: 14px; line-height: 1.5; }
footer { padding: 50px 0 44px; }
footer .footer-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 78%; }
footer .footer-wrap h4 img { height: 25px; }
footer ul { margin: 16px auto; grid-row-gap: 3px; }
footer ul li { padding: 0; }
footer ul li:after { width: 1px; height: 10px; }
footer ul li p { padding: 0; font-size: 16px; line-height: 1.5; text-align: center; }
footer ul li:nth-of-type(1) { padding-right: 10px; }
footer ul li:nth-of-type(2) { padding-left: 10px; }
footer ul li:nth-of-type(3) { display: flex; justify-content: center; width: 100%; }
footer ul li:nth-of-type(4) { display: flex; justify-content: center; width: 100%; }
footer .copy { font-size: 13px; line-height: 1.7; text-align: center;}
}