@charset "utf-8";

/******* 차플 랜딩페이지 공통 *******/
:root {--max-width:140rem; --color-point:#8160FB; --school-color:#1D004C; --school-point:#5606C2}
html {font-size:62.5%; }
body {background-color:#1F0E5E; color:#fff; font-weight: 500; }
main {overflow: hidden}
section {width:100%; padding:15rem 0;}
div[class$='-inner'] {flex-direction:column; gap:0; width:100%;}
.section-title {display:flex; align-items:center; justify-content: center; gap:1.5rem; font-weight:800; font-size:5.6rem; }

.point-elem {color:#C491FF}
.btn-group {display:flex; align-items:center; justify-content:center; gap:1.2rem}
.btn-group > a.btn-point, .btn-group > a.btn-register {margin:0}
button.btn-point, a.btn-point, button.btn-register, a.btn-register {display:inline-flex; align-items:center; justify-content: center; width:24rem; height:7rem; margin:auto;
    background-color:var(--color-point); border-radius:0.8rem; color:#fff; font-size:2.2rem; font-weight:500; transition:.3s}
button.btn-point:hover, a.btn-point:hover {background-color:#C491FF; color:#111}
a.btn-register, button.btn-lightPrimary {background-color:#e3dbff; color:#3600ff}
button.btn-register:hover, a.btn-register:hover {background-color:#C491FF; color:#111}
button.btn-top {width:7.2rem; height:6.2rem; background: none; border:none}
button.btn-top img {width:7.2rem}
.w100 {width:100%}
.mobile {display:none}
input[type='number']::-webkit-inner-spin-button {display: none;}

/* 각 랜딩 섹션별 */
/* 임시배너 */
.banner-open {position:fixed; z-index:100; bottom:1rem; left:50%; display:flex; align-items:center; justify-content:center; gap:1.2rem;
    height:8rem; width:calc(100% - 3.2rem); max-width:140rem; transform:translateX(-50%); background:#fff;  }
.banner-open img {width:5.2rem; margin-top:-1rem}
.banner-open .img-clock {margin-top:-3.2rem; margin-right:1rem;}
.banner-open .img-clock img {width:8.8rem}
.banner-open .banner-title {color:#3600FF; font-weight:800; font-size:3rem}
.banner-open .row {gap:1rem}
.banner-open .right {display:flex; align-items: center; gap:2rem}
.banner-open .banner-txt {display:inline-flex; align-items: center; gap:0.6rem; font-size:2.2rem; color:#111; font-weight: 700}
.banner-open .banner-txt em {font-size:2.4rem; color:#3600FF; font-weight:800;}

/* 헤드라인 */
.headline {position:relative; padding:0; background:hsla(252, 85%, 71%, 1);
    background-image:radial-gradient(circle, hsla(252, 85%, 71%, 1) 0%, hsla(252, 71%, 24%, 1) 64%, hsla(252, 71%, 24%, 1) 100%),
    linear-gradient(to top, hsla(252, 71%, 24%, 0) 54%, hsla(236, 67%, 12%, 0.3) 100%);
}
.headline:before {content:''; position:absolute; bottom:0; z-index:0; display:block; width:100%; height:46%;
    background:linear-gradient(to top, hsla(236, 67%, 12%, 1) 13%, hsla(236, 67%, 12%, 0.3) 100%);
}
.headline .headline-inner {position:relative; z-index:1; min-height:100vh; justify-content: center;}
.headline-header-txt {font-size:4.2rem; font-weight:800; text-align:center}
.headline-header-txt span {display: block; font-size:2.1rem; }
.landing-logo {position:relative; margin-top:-5.6rem}
.landing-logo img {display:block; max-width:66.1rem; margin:0 auto;}
.light {position:absolute; top:0; left:32%; transform:translateX(-50%); opacity:0; transition:opacity .5s 1.2s}
.light img {width:25rem}
.headline-explain {margin-top:-1rem; font-size:2.6rem; text-align:center; }
.headline-explain .only {margin-bottom:0.2rem; font-size:4.2rem; font-weight: 600;}
.headline-explain .only span {position:relative; }
.headline-explain .only span:before {content:''; position:absolute; top:-1rem; left:50%; transform:translateX(-50%); display:block; width:6px; height:6px; background-color: #fff; border-radius:50%;}
.headline-explain .txt {margin-bottom:4rem}
.headline-explain .txt em {font-size:3rem; font-weight:800; line-height:1 }
.combination-img {margin-top:-8.7rem; opacity:0; transform:scale(0.2); transition:opacity .8s .2s, transform .6s .2s;}
.combination-img img {display:block; max-width:81.5rem; margin:0 auto;}

.bg-car {position:absolute; left:50%; bottom:7rem; transform:translateX(-50%); max-width:162rem; height:34rem; width:100%; }
.schoolbus {position:absolute; left:10rem; top:-3rem; width:24.4rem; transform:scale(.8); transition: transform .5s .1s;}
.truck {position:absolute; left:-7rem; bottom:6rem; width:28rem; transform:scale(.8); transition:transform .4s .3s;  }
.small-truck {position:absolute; top:-6rem; right:8rem; width:19.5rem; transform:scale(.8); transition: transform 1s .5s; }
.bus {position:absolute; right:9rem; bottom:3rem; width:27.6rem; transform:scale(.8); transition:transform .8s .5s;}

.light.move.animate {opacity:1; animation:light 2s 1s infinite alternate}
.combination-img.move.animate {opacity:1; transform: scale(1)}
.schoolbus.move.animate {transform:translate(20%,30%) scale(1) }
.truck.move.animate {transform:translate(30%,40%) scale(1)}
.small-truck.move.animate {transform:translate(-20%,20%) scale(1)}
.bus.move.animate {transform:translate(-10%,30%) scale(1)}
@keyframes light {
    0% {opacity:1}
    100% {opacity:.2}
}

/* 문제제기 */
.problem {background-color:#090C32}
.problem-inner {height:100vh; justify-content: center;}
.problem-inner .section-title {margin-bottom:10rem}
.problem-inner .section-title em {position:relative; text-align:center; }
.problem-inner .section-title em:before, .problem-inner .section-title em:after {content:''; position:absolute; top:0; left:-6.6rem; display:block; width:4.2rem; height:2.26rem;
    background: url("../images/landing/question_mark.svg") no-repeat center center / cover}
.problem-inner .section-title em:after {left:auto; right:-8.6rem; top:auto; bottom:7rem; transform:rotate(180deg)}
.problem-img {position:relative; margin:0 auto;}
.human {width:68.4rem;}
.question1 {position:absolute; left:0; top:-2.6rem; width:13.6rem; animation:bounce .8s infinite alternate ease-in-out;}
.question2 {position:absolute; right:-30rem;bottom:5rem; width:33rem; animation:bounce 1.6s infinite alternate ease-in-out;}
@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(46px); }
}


/* 주요특징 */
.feature {position:relative; z-index:1; background:linear-gradient(to bottom, #090C32 13%, #150A49 53%, #200760 100%);}
div.feature-inner {gap:5.6rem;}
.feature article {display:flex; flex-wrap:wrap; gap:1.8rem}
.feature dl {display:flex; gap:3.5rem; width:calc(50% - 0.9rem); padding:4rem; border:1px solid rgba(255,255,255,0.2);
    background-color:rgba(255,255,255,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius:0.8rem}
.feature .ai img {width:12.3rem}
.feature .report img {width:12.2rem}
.feature .location img {width:14.5rem}
.feature .manage img {width:14rem}
.feature dl dd em {display:inline-flex; align-items:center; padding:0.6rem 2.6rem; font-size:2.5rem; font-weight:700; border-radius:3rem; border:1px solid rgba(255,255,255,0.2); background-color:rgba(255,255,255,0.2);}
.feature dl dd span {display:block; margin-top:1.6rem; padding-left:1rem; font-size:2.1rem}

/* 기존문제점 타파 */
.solution {position:relative}
.solution:before {content:''; position:absolute; top:-10%; left:43%; z-index:0;  display:block; width:129rem; height:136rem;
    background: radial-gradient(ellipse 51% 31% at center, #5741B9 20%, #200860 100%); transform:rotate(-150deg)}
div.solution-inner {position:relative; flex-direction: row; justify-content: space-between}
div.solution-inner .section-title {margin-bottom:6rem}
.issue-img {width:7.9rem}
.issue .list li span {position:relative; display:inline-flex; align-items:center; justify-content:center; height:20.5rem; margin-bottom:-6rem; padding-bottom:44px; font-size:2.2rem; color:#fff;background-repeat:no-repeat; background-size: cover}
.issue .list li:first-child span {width:42.2rem; margin-left:29rem; margin-bottom:-2.4rem; background-image: url("../images/landing/bubble1.png"); transition:transform .8s .5s}
.issue .list li:nth-child(2) span {width:38rem; margin-left:20rem; background-image: url("../images/landing/bubble2.png"); ; transition:transform .8s .4s}
.issue .list li:nth-child(3) span {width:35.3rem; margin-left:45rem; background-image: url("../images/landing/bubble3.png"); transition:transform .8s .2s}
.issue .list li:last-child span {width:38.4rem; margin-left:20rem; background-image: url("../images/landing/bubble4.png"); transition:transform .8s .2s}
.issue .list li:first-child .move.animate {transform: rotate(-5.38deg) translateX(-20rem); }
.issue .list li:nth-child(2) .move.animate {transform: rotate(-8.08deg) translateX(-20rem)}
.issue .list li:nth-child(3) .move.animate {transform: rotate(15.43deg) translateX(-20rem) translateY(6rem)}
.issue .list li:last-child .move.animate {transform: rotate(10.86deg) translateX(-20rem)}
.idea-img {width:8.5rem}
.idea .list {position:relative; display:flex; align-items: center; flex-direction:column; gap:3rem;}
.idea .list:before {content:''; position:absolute; top:4rem; right:0; z-index: 2; width:3.9rem; height:6.2rem; background: url("../images/landing/shine1.webp") no-repeat center center / cover}
.idea .list:after {content:''; position:absolute; top:2rem; left:0; z-index: 2; width:4.9rem; height:6.2rem; background: url("../images/landing/shine2.webp") no-repeat center center / cover}
.idea .list span {display:inline-flex; padding:4.6rem 6rem; border-radius:13rem; font-size:2.4rem; color:#111; box-shadow: 0 1.4rem 5rem rgba(0,0,0,0.4);}
.idea .list li:first-child span {margin-left:-6rem; background-color:#71D0FF; }
.idea .list li:nth-child(2) span {margin-left:20rem; background-color:#FFB54D; border-bottom-right-radius: 0.2rem;}
.idea .list li:nth-child(3) span {margin-left:-20rem; background-color:#8FDB81; }
.idea .list li:last-child span {margin-left:6rem; background-color:#FBB4B5; border-bottom-left-radius: 0.2rem;}
.punch {position:absolute; left:60%; transform:translateX(0%); opacity:0; mix-blend-mode:plus-lighter; transition:.4s}
.punch img {width:61.4rem}
.punch.move.animate {opacity:1; transform:translateX(-60%)}

/* 리뷰 */
div.review-inner, div.flow-inner, div.faq-inner, div.contact-inner, div.service-inner {position:relative; gap:5.6rem;}
div.review-inner:before {content:''; position:absolute; right:-20rem; bottom:-13rem; display:block; width:37.5rem; height:21rem; background: url("../images/landing/bg_review.webp") no-repeat 0 0 / cover;}
.review-list dl {display:flex; align-items:center; gap:3.2rem; padding:5rem 4rem;  border-radius: 0.8rem; background-color:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.review-list dl:not(:last-child) {margin-bottom:2.4rem}
.review-list dl dt {margin:0}
.review-list dl dd {font-size:2.4rem;}
.review-list dl dd span {margin-left:2.4rem; font-size:2rem; color:rgba(255,255,255,0.6);}
.review-list dt img {width:12.8rem}

/* 사용흐름 */
div.flow-inner:before {content:''; position:absolute; left:-16rem; bottom:-5rem; display:block; width:34.9rem; height:34rem; background: url("../images/landing/bg_step.webp") no-repeat 0 0 / cover;}
.flow .step-list {display:flex; gap:2rem; }
.flow .step-list dl {display:flex; flex-direction: column; justify-content: space-between; width:calc(100% / 3); padding:8rem 4rem; text-align:center; border-radius: 0.8rem;
    background-color:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.flow .step-list dl dd {display:flex; align-items:center; justify-content:center; gap:1rem; font-size:2.4rem;}
.flow .step-list dl dd em {font-size:2rem; font-weight:800}
.flow .step-list .step1 img {width:18.9rem}
.flow .step-list .step2 img {width:28.8rem}
.flow .step-list .step3 img {width:24.3rem}
.flow .additional {font-size:3.2rem; font-weight:600; text-align: center}

/* 다른솔루션 비교 */
.compare {background:radial-gradient(ellipse, #6349D0 24%, #1F0E5E 58%)}
.compare .vs {max-width:7.5rem}
.compare-tbl {position:relative; margin:1rem 0 5.6rem}
.compare-tbl:before {content:''; position:absolute; right:22%; z-index:1; height: 100%; width: 22%; background-color: rgba(1, 254, 252, 0.3);
    box-shadow: 0 0 1.6rem 1.6rem rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.8rem;}
.compare-tbl ul p {font-size:3rem; text-align:center}
.compare-tbl ul p:first-child {width:56%; }
.compare-tbl ul p:nth-child(2) {widtH:22%}
.compare-tbl ul p:last-child {width:22%}
.compare-tbl .tbl-header {display:flex; align-items:center; background-color:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:0.8rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 700}
.compare-tbl .tbl-header p {padding:1.6rem 4rem;  }
.compare-tbl .tbl-header p.chafle {font-size:3.6rem; }
.compare-tbl .tbl-content {display:flex; flex-direction:column;}
.compare-tbl .tbl-content li {display:flex; background-color:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.2); border-radius:0.8rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.compare-tbl .tbl-content p {align-content:center; padding:2.4rem 4rem; line-height:1.3; }
.compare-tbl .tbl-content p:first-child {font-size:2.4rem; text-align:left}
.compare-tbl .tbl-content p:first-child em {display:block; font-size:2.7rem; font-weight:800; line-height:1.4}
.compare .additional {margin-bottom:4.8rem; font-size:3.2rem; font-weight:600; text-align: center}
.compare .additional em {font-size:3.8rem; font-weight:800;}

/* 서비스설정 - 요금제 */
.service-setting .section-txt {font-size:2.8rem; text-align: center; max-width:var(--max-width); }
.service-setting .pay-list {display:flex; flex-wrap:wrap; flex-direction: row; justify-content: center; gap:1.5rem}
.service-setting article {display: flex; flex-direction: column; justify-content: space-between; width:calc(25% - 1.2rem); padding:3.5%; border-radius: 0.8rem; color:#fff;
    background-color:rgba(255,255,255,0.1); background:radial-gradient(ellipse at -10% 0%, #6349D0 -46%, rgba(255,255,255,0.1) 78%); border:1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform:translateY(0); transition:.8s}
.service-setting article dl {margin-bottom:2rem}
.service-setting article dt {font-size:3.0rem; margin-bottom:4.5rem; font-weight:600; text-align: center; line-height:1.4; color:#fff}
.service-setting article dt .price {display:flex; flex-direction:column; align-items:center; line-height:0}
.service-setting article dt .price em {font-weight:800; font-size:4.4rem}
.service-setting article dt .price span {font-weight:400; font-size:1.8rem}
.service-setting article dd {font-size:2.2rem; line-height:1.8}
.service-setting article button {width:100%; height:6rem; font-size:2rem}
.service-setting article:hover {transform:translateY(-20px); background:#00519B; background: radial-gradient(ellipse at 100% 90%, #8467ff 0%, #5606c2 100%); box-shadow: 0 4px 26px rgba(0,0,0,0.2); }
.service-setting article:hover button:hover {background-color: #fff}

/* faq */
div.faq-inner:before {content:''; position:absolute; right:-20rem; bottom:-8rem; display:block; width:37.5rem; height:21rem; background: url("../images/landing/bg_faq.webp") no-repeat 0 0 / cover;}
.faq-list dl:not(:last-child) {margin-bottom: 1.2rem}
.faq-list .question {position:relative; margin:0; background-color:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:0.8rem; cursor:pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.faq-list .question > p {display:flex; gap:1.2rem; padding:3.2rem 9rem 3.2rem 4rem; font-size:2.4rem; color:#fff;}
.faq-list .question:after {content:''; position:absolute; right:4rem; top:50%; transform:translateY(-50%) rotate(0); width:4rem; height:4rem;
    transition:transform .3s; background: url("../images/landing/arrow.svg") no-repeat 0 0 / cover; }
.faq-list .answer {max-height:0; height:0; opacity:0; overflow:hidden; transition:max-height .6s ease-in-out;
    background-color:rgba(0,0,0,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:0.8rem; backdrop-filter:blur(10px); -webkit-backdrop-filter: blur(10px);}
.faq-list .answer .inner {display:flex; gap:1.2rem; padding:3.2rem 4rem; opacity:0; transform:translateY(100%); font-size:2.2rem; line-height:1.5; color:#fff; transition:.6s}
.faq-list .active .question:after {transform:translateY(-50%) rotate(180deg)}
.faq-list .active .answer {max-height:100rem; height:auto; opacity:1;}
.faq-list .active .answer .inner {opacity:1; transform:translateY(0%)}
.faq-list .question em, .faq-list .answer em {color:#C491FF}
.faq-list .tbl {width:100%; margin:2.4rem 0; background-color:rgba(255,255,255,0.1); border-radius: 0.4rem}
.faq-list .tbl dl {display: flex; margin:0 }
.faq-list .tbl dl:not(:nth-last-of-type(1)) {border-bottom:1px solid rgba(255,255,255,0.2); }
.faq-list .tbl dl.tbl-header {background-color: rgba(1,254,252, 0.1);}
.faq-list .tbl dl.tbl-header dt, .faq-list .tbl dl.tbl-header dd {justify-content: center; }
.faq-list .tbl dl:nth-of-type(2n) {background-color:rgba(255,255,255,0.05); }
.faq-list .tbl dt, .faq-list .tbl dd {margin:0; padding:1.2rem 4rem; font-size:2rem; text-align:center; color:#fff}
.faq-list .tbl dt {width:30%;}
.faq-list .tbl dd {width:35%;}

/* 문의 */
div.contact-inner:before {content:''; position:absolute; left:-20rem; top:4rem; display:block; width:34.2rem; height:24.4rem; background: url("../images/landing/bg_contact.webp") no-repeat 0 0 / cover;}
.contact-list {display:flex; flex-wrap:wrap; gap:2.4rem;}
.contact-list label {display:flex; flex-direction: column; gap:1.2rem; width:calc(50% - 1.2rem); font-size:2.2rem; color:#fff; }
.contact-list label input, .contact-list label textarea {height:auto; padding:2.4rem; color:#fff; font-size:2.2rem; background-color:rgba(255,255,255,0.1); border-radius:0.4rem; border:1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.contact-list label.textarea {width:100%}
.contact-list label.checkbox {width:100%; flex-direction: row}
.contact-list label.checkbox input + i {background-color: rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.2); }
.contact-list label.checkbox input:checked + i {background-color: var(--color-point)}
.contact-list label.checkbox input:checked + i:before {border-color: #fff}

/* 푸터 */
#footer { padding:10rem 0; border-color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.6); font-size: 1.7rem}
#footer div.footer-inner {max-width: var(--max-width); margin:0 auto; padding:0}
#footer .copyright {color:rgba(255,255,255,0.4); font-size: 1.8rem}

/* 공통애니 */
article > dl {opacity:0; transition:0.4s}
article.animate > dl {opacity:1; }
article > dl:nth-of-type(1) {transition-delay:0s}
article > dl:nth-of-type(2) {transition-delay:.25s}
article > dl:nth-of-type(3) {transition-delay:.4s}
article > dl:nth-of-type(4) {transition-delay:.55s}
article > dl:nth-of-type(5) {transition-delay:.7s}
article > dl:nth-of-type(6) {transition-delay:.85s}
article > dl:nth-of-type(7) {transition-delay:1s}

/* 반응할 부분 */
@media (max-width:2130px) {
    html {font-size:63%}
}
@media (max-width:1930px) {
    html {font-size:58%}
}
@media (max-width:1620px) {
    html {font-size:50%}
}
@media (max-width:1440px) {
    :root {--max-width:calc(100% - 4rem);}
}
@media (max-width:1024px) {
    html {font-size:48.5%}
    section, .headline {padding:10rem 0}
    .headline .headline-inner, .problem-inner {min-height:auto; height:auto}
    .feature article, div.solution-inner {flex-direction: column}
    .service-setting article {width:calc(50% - 1.2rem)}
    .feature dl {width:100%}
    .solution:before {top:auto; bottom:0; transform:translate(-50%, 0)}
    .solution .issue .list {max-width:64rem; margin:0 auto}
    .issue .list li:nth-child(2) span {}
    .punch {position:static; margin:0 0 -50rem; transform: translateX(0) rotate(90deg)}
    .punch.move.animate {transform:translateX(0) rotate(90deg);}
    .banner-open {height:11rem}
    .banner-open .banner-title {margin-bottom:-1rem}
    .banner-open .right {flex-direction: column; align-items: flex-start; gap:0}
}
@media (max-width:768px) {
    html {font-size:40%}
    main {overflow-x: hidden}
    .section-title {font-size:4rem;}
    div.review-inner, div.flow-inner, div.faq-inner, div.contact-inner {gap:3rem}
    button.btn-top {right:3rem}
    .mobile {display:block}

    .headline-header-txt {font-size:3.4rem}
    .headline:before {height:50%}
    .light {top:-12rem}
    .landing-logo {margin-top:-2rem}
    .landing-logo img {width:40rem}
    .combination-img {margin-top:-1rem}
    .combination-img img {width:60rem}
    .headline-explain {margin-top:0}
    .bg-car {display:none}
    .human {width:50rem}
    .question2 {display: none}
    .punch {margin:-20rem 0 -40rem}
    .review-list dl {flex-direction:column; align-items:flex-start; gap:1rem}
    .flow .step-list, .service-setting .pay-list  {flex-direction: column}
    .flow .step-list dl, .service-setting article  {width:100%}
    .compare .additional {font-size:2.8rem;}
    .compare .additional em, .flow .additional {font-size:3.2rem}
    .contact-list label {width:100%}
}
@media (max-width:560px) {
    .banner-open {height:21rem; padding:0 2rem}
    .banner-open .banner-title {margin-bottom: 0}
    .banner-open .banner-txt {display:inline-block}
    .banner-open .banner-txt em {display:inline-block; margin-right: 0.4rem}
    .banner-open img {display:none}
    .banner-open .img-clock {margin-top:0}
    .banner-open .img-clock img {display:block}
}
@media (max-width:400px) {
    .issue .list li:nth-child(3) span {margin-left:40rem}
}



/*********** 스쿨버스 랜딩 *************/
main.school {background: #fff; color:var(--school-color); }
.school .section-title {display:block; text-align: center; font-size:6rem}
.school .section-title em {color:var(--school-point)}
.school :is(button.btn-point, a.btn-point, button.btn-register, a.btn-register) {width:27.4rem; height:8.7rem; border-radius:4.4rem}
.school .additional {margin-top:4rem; font-size:4.8rem; font-weight:700; text-align:center}
.school .additional em  {color:var(--school-point)}

.school .headline {padding-bottom:20rem; background:linear-gradient(to bottom, #FFCF98 55%, #FF9345 100%); }
.school .headline:before {display: none;}
.school .headline .headline-inner {z-index: 3; height:113rem; max-height:100vh; min-height:auto;}
.school .headline-content {display:flex; flex-direction: row; align-items: center;}
.school .headline-content .left-txt {width:54%;}
.school .headline-content .right-img {width:46%;}
.school .left-txt .headline-header-txt {font-size:3rem; font-weight:700; text-align: left; line-height: 1.4}
.school .left-txt .headline-title {margin-bottom: 6rem; font-size:10rem; font-weight:800; line-height:0.8}
.school .left-txt .headline-title span {color:var(--school-point)}
.school .left-txt .headline-explain {font-size:2.4rem; font-weight:500; text-align:left}
.school .right-img {position: relative; display:flex; align-items:flex-start; margin-top:16rem}
.school .right-img:before {content:'chafle'; position: absolute; z-index:-1 ; top:-31rem; left:12.8rem; font-size:32.4rem; font-weight: 800; color:#FF935B; opacity: 0.3}
.school .right-img:after {content:''; position:absolute; bottom:-32rem; right:-35rem; width:66.9rem; height:37rem; background: url("../images/sch_landing/school_bus.webp") no-repeat 0 0 / cover}
.school .right-img .app-box {position:relative}
.school .right-img .app {width:30.6rem; }
.school .light {position:absolute; left:-8rem; top:-9rem; z-index:1; transform:translateX(0); animation:light 2s 1s infinite alternate}
.school .right-img .students {width:42.6rem; margin-top:4rem; margin-left:-1rem}


/* 기존 불편한점 */
.school .problem {position:relative; z-index:1; margin-top:-20rem; background-color:#EEFAFF; color:var(--school-color); border-radius:18rem}
.school .problem-inner {height:auto;}
.school .problem-list {display:flex; align-items:flex-end; justify-content: space-between; }
.school .problem-list dt {width:42.2rem; height:20.4rem; padding-top:4rem; background: url("../images/sch_landing/bubble1.png") no-repeat 0 0 / cover; font-weight: 500; font-size:2.4rem; text-align: center}
.school .problem-list .problem01 dt {margin-bottom:-1rem}
.school .problem-list .problem02 dt {margin-bottom:-3rem; margin-left:5rem;}
.school .problem-list .problem03 dt {margin-bottom:-7rem}
.school .problem01 img {width:47rem;}
.school .problem02 img {width:43.4rem;}
.school .problem03 img {width:38rem;}

/* 차플을 쓰면 달라지는 점 */
.school .feature {position:relative; z-index:0; padding-bottom:40rem; background:#E2D5FF;}
.school .feature:before {content:''; position:absolute; top:-20rem; width:100%; height:20rem; background-color:#E2D5FF }
.school .difference-list, .school .solve-list {flex-wrap: nowrap; gap:2rem}
.school .difference-list > dl, .school .solve-list > div {flex-direction: column; align-items: center; justify-content: space-between; padding-top:0; border:0; border-radius:3.2rem; background-color: #fff; text-align: center}
.school .difference-list dt {width:22rem; height:8rem; margin:0; border-radius: 0 0 11rem 11rem; line-height:2.2; background-color: #FFCC93; font-size:3.2rem; font-weight:700; }
.school .difference01 img {width:30rem}
.school .difference02 img {width:28.7rem}
.school .difference03 img {width:20.5rem}
.school .difference-list dl dd span {font-size:2.5rem; color:#111; line-height: 1.4;}
.school .feature .btn-register {background-color: #faf8ff}

.school .feature-inner {position:relative}
.school .feature-inner:before {content:''; position:absolute; right:-30rem; top:6rem; width:19.2rem; height:21.5rem;
    background: url("../images/sch_landing/safe.webp") no-repeat center center / cover; animation:bounce 2s infinite alternate ease-in-out;}
.school .feature-inner:after {content:''; position:absolute; left:-26rem; bottom:20rem; width:18rem; height:18.1rem;
    background: url("../images/sch_landing/time.webp") no-repeat center center / cover; animation:bounce 1.6s infinite alternate ease-in-out;}
@keyframes bounce {
    0% {transform:translateY(5rem) scale(.7);}
    100% {transform:translateY(0px) scale(.8);}
}
.school .feature .section-title {position:relative}
.school .feature .section-title:before {content:''; position:absolute; z-index:-1; top:2.6rem; left:50%; width:66.1rem; height:7rem; transform:translateX(-50%); background: url("../images/sch_landing/line.webp") no-repeat 0 0 / cover}

/* 문제해결 기능소개 */
.school .flow {position:relative; z-index:2; margin-top:-20rem; background-color:#FFD9AF; border-radius: 18rem; }
.school .flow-inner {position:relative;}
.school .flow-inner:before {content:''; position:absolute; left:-23rem; top:0; width:25.1rem; height:27.1rem; background:url("../images/sch_landing/idea.webp") no-repeat center center / cover; animation:bounce 2s infinite alternate ease-in-out;}
.school .flow-inner:after {content:''; position:absolute; right:-23rem; bottom:-4rem; width:16.8rem; height:16.8rem; background:url("../images/sch_landing/gear.webp") no-repeat center center / cover; animation:bounce 1.6s infinite alternate ease-in-out;}
.school .flow .solve-list {display: flex}
.school .flow .solve-list > div {display: flex; gap: 3.5rem; justify-content: space-between; width: calc(50% - 0.9rem); padding-top:4rem;}
.school .flow .solve-list > div  figure {display:flex; align-items: center; height: 100%;}
.school .flow .solve-list > div p {width:100%; padding:2.4rem 0; background-color: #fff; border-radius: 3.2rem; font-size:2.5rem; font-weight: 700}
.school .flow .solve-list > div p em {display: block; font-size:3.2rem}
.school .flow .solve-list > div p em i {font-size:2.5rem}
.school .flow .solve-list .solve01 {background-color:#FFDFDE}
.school .flow .solve-list .solve02 {background-color:#DEF0FF}
.school .flow .solve-list .solve03 {background-color:#ECDEFF}
.school .flow .solve-list .solve01 img {width:29.6rem}
.school .flow .solve-list .solve02 img {width:25.8rem}
.school .flow .solve-list .solve03 img {width:21.2rem}

/* 차를이 특별한 이유 -*/
.school .compare {background: #fff}
.school .compare .section-title {position:relative; gap:0}
.school .compare .section-title:before {content:''; position:absolute; left:-10rem; top:-10rem; width:24rem; height:25rem; background:url("../images/sch_landing/coongrulate.webp") no-repeat center center / cover; }
.school .compare .section-title:after {content:''; position:absolute; right:-10rem; top:-10rem; width:24rem; height:25rem; background:url("../images/sch_landing/coongrulate.webp") no-repeat center center / cover; transform:rotate(90deg)}
.school .compare .compare-txt {margin:0 0 5.6rem; font-size:3.4rem; text-align: center}
.school .compare-tbl:before {right:0; width:33%; background-color: rgba(209,157,255,.2)}
.school .compare-tbl .tbl-header {color:#111; background-color:#f9f9f9; border:1px solid #eee}
.school .compare-tbl ul p:first-child {width:34%; color:#111; text-align: center; font-weight: 800}
.school .compare-tbl ul p:nth-child(2) {width:33%}
.school .compare-tbl ul p:last-child {width:33%; color:#111}
.school .compare-tbl .tbl-content li {background-color: #fff; color:#666; border:1px solid #eee}

/* 문의상담 */
.school .contact {background-color:#F6F6F6}
.school div.contact-inner:before {display:none;}
.school .contact-list {gap:2.4rem 8rem}
.school .contact-list label {width:calc(50% - 4rem); color:#111}
.school .contact-list label input, .school .contact-list label textarea {background-color: #fff}
.school .contact-list label input, .school .contact-list label textarea {color:#111}
.school .contact-list label.textarea, .contact-list label.checkbox {width:100%}
.school .contact-list label.checkbox input + i {background-color: #fff; }
.school .contact-list label.checkbox input:checked + i {background-color: var(--color-point)}

/* 푸터 */
.school #footer {color:#666; background-color:#F6F6F6; font-weight: 400; border-color:#e2e2e2}
.school button.btn-top {width:7rem; height:7rem; border-radius: 50%; background-color: #F5EAFE; opacity:0.8; font-size:1.6rem}

/* 스쿨버스 학원용 */
.school.academy .headline {background: linear-gradient(to bottom, #A1FFD3 55%, #19DA76 100%)}
.school.academy .right-img:before {color:#19D373}
.school.academy .right-img .students {width:50.2rem}
.school.academy .right-img:after {width:66.6rem; height:43.4rem; bottom:-36rem; background-image: url("../images/sch_landing/academy_bus.webp");}
.school.academy .difference01 img {width:27rem; }
.school.academy .difference02 img {width:24rem; }
.school.academy .difference03 img {width:29rem; }
.school.academy .difference-list dt {background-color:#92EFC4;}
.school.academy .flow {background-color:#C4FAE1 }

/* 스쿨버스 유치원용 */
.school.child .headline {position:relative; background: linear-gradient(to bottom, #FFE260 55%, #FFC335 100%)}
.school.child .headline:after {content:''; position:absolute; bottom:19rem; width:713.4rem; height:40rem; left: 50%;
    transform: translateX(-50%); background: url("../images/sch_landing/bg_cloud.webp") repeat center 0 / contain}
.school.child .right-img:before {color:#F6AF04}
.school.child .right-img:after {bottom:-37rem}
.school.child .right-img .students {width:46.8rem}
.school.child .right-img:after {width:66.6rem; height:43.4rem; background-image: url("../images/sch_landing/child_bus.webp");}
.school.child .problem-list {justify-content: center; gap:6rem}
.school.child .problem-list .problem01 dt {width:42.7rem; height:19.5rem; background-image: url("../images/sch_landing/bubble3.png");}
.school.child .difference-list dt {background-color:#FFE56F}
.school.child .difference01 img {width:27rem; }
.school.child .difference02 img {width:31rem; }
.school.child .difference03 img {width:29.8rem; }
.school.child :is(.problem, .flow) {border-radius:0 }
.school.child .feature {z-index:3; padding-bottom:15rem}
.school.child .feature:before {content:''; position:absolute; top:-1rem; left:0; height:12.1rem; width:100%; background: url("../images/sch_landing/mask-wave01.png") repeat-x 50% 0 / contain; }
.school.child .feature:after {content:''; position:absolute; bottom:-11rem; left:0; height:12.1rem; width:100%; background: url("../images/sch_landing/mask-wave02.png") repeat-x 50% 0 / contain; }
.school.child .feature .additional {margin-top:0}
.school.child .flow {margin-top:0; background-color:#FFF4C3}
.school.child .feature-inner, .school.child .flow-inner, .school.child .compare-inner {margin-top:10rem}
.school.child .flow:after {content:''; position:absolute; bottom:-10rem; left:0; height:12.1rem; width:100%; background: url("../images/sch_landing/mask-wave03.png") repeat-x 50% 0; }

/* 스쿨버스 랜딩 반응할 부분*/
@media (max-width:1024px) {
    .school .headline {padding-bottom:20rem}
    .school .headline .headline-inner {display: block; max-height:none; height:auto}
    .school .headline-content {flex-direction: column}
    .school .headline-content :is(.left-txt, .right-img) {width:100%}
    .school .right-img {margin-top:6rem}
    .school .right-img:after {display:none}
    .school .problem {margin-top:-10rem;}
    .school :is(.problem, .flow) {border-radius:10rem }
    .school :is(.problem-list, .solve-list) {flex-direction: column; align-items: center; gap:4rem}
    .school .flow .solve-list > div {width:100%}
    .school .compare .section-title:after, .school .compare .section-title:before {display:none}

    .school.child .headline:after {bottom:9rem}
}
@media (max-width:768px) {
    .school .section-title {font-size:5.6rem}
    .school .additional {font-size:4rem}
    .school .left-txt .headline-title {font-size:6rem}
    .school .right-img:before {display:none}
    .school .right-img .app {width:26.6rem}
    .school :is(.problem, .flow) {border-radius:6rem }
    .school .feature .section-title {line-height:1}
    .school .feature .section-title:before {top:6.2rem; width:36rem}
    .school .compare .compare-txt {font-size:3rem}
    .school .compare-tbl .tbl-header, .school .compare-tbl:before {display:none;}
    .school .compare-tbl .tbl-content {border-top:1px solid #e2e2e2}
    .school .compare-tbl .tbl-content li {flex-direction: column; padding:3rem 0; border:0; border-bottom:1px solid #e2e2e2;}
    .school .compare-tbl .tbl-content p {padding:1rem 4rem}
    .school .compare-tbl ul p:first-child {padding-bottom:2rem}
    .school .compare-tbl ul p:first-child, .school .compare-tbl ul p:nth-child(2), .school .compare-tbl ul p:last-child {width:100%; text-align: left}
    .school .compare-tbl ul p:nth-child(2):before {content:'- 다른 서비스 : '}
    .school .compare-tbl ul p:last-child:before {content:'- 차플 : '; color:var(--school-point)}
    .school .compare-tbl ul p:last-child {color:var(--school-point)}
    .school .contact-list label {width:100%}

}