@import url("./reset.css");
@import url("./font.css");

.text-left {text-align: left !important;}
.pl-0 {padding-left: 0 !important;}
.pr-0 {padding-right: 0 !important;}
.mt-50 {margin-top: 50px !important;}
.bg-none {background: none !important;}
.inner-content {max-width:1500px;margin:0 auto}

/* HEADER */
.header {height: 79px;padding: 16px 80px;background: #fff;display: flex;align-items: center;justify-content: space-between;}
.header .logo {width: 165px; height: 55px;}

/* FOOTER */
.footer {background: #000;padding: 100px 48px;display: flex;align-items: start;justify-content: space-between;}
.footer .logo {width: 165px;height: 55px;}
.footer .right {display: flex;align-items: flex-end;gap: 28px;flex-direction: column;justify-content: space-between;}
.footer .terms-button {font-size: 16px;line-height: 16px;font-weight: 500;color: #fff;}
.footer .terms-button:hover {text-decoration: underline;}
.footer .copyright {font-size: 14px;line-height: 20px;color: #fff;}

/* BUTTON */
.round-button {color: #fff;border-radius: 4px;font-weight: 500;background: transparent;cursor: pointer;transition: all 0.5s ease;position: relative;display: inline-block;background-color: #5f38ea;background-image: linear-gradient(270deg, #5f38ea, #3e72ff);border: none;height: 48px;font-size: 16px;}
.round-button:before,
.round-button:after {position: absolute;content: "";right: 0;bottom: 0;background: #0044ff;transition: all 0.5s ease;}
.round-button:before {height: 0%;width: 2px;}
.round-button:after {width: 0%;height: 2px;}
.round-button:hover:before {height: 100%;}
.round-button:hover:after {width: 100%;}
.round-button:hover {background: #fff;}
.round-button span {padding: 13px 28px 11px;width: 100%;height: 100%;position: relative;display: flex;justify-content: center;align-items: center;}
.round-button span:hover {color: #0044ff;}
.round-button span:before,
.round-button span:after {position: absolute;content: "";left: 0;top: 0;background: #0044ff;transition: all 0.3s ease;}
.round-button span:before {width: 2px;height: 0%;}
.round-button span:after {height: 2px;width: 0%;}
.round-button span:hover:before {height: 100%;}
.round-button span:hover:after {width: 100%;}

.round-button.point {background-image: linear-gradient(270deg, #679cff, #b847fa);border: 1px solid #fff;font-weight: 700;height: 44px;box-shadow: 0px 0px 7px #b1ccff85;font-weight: 700;}
.round-button.point:hover {background: #fff;border: none;}
.round-button.point span {padding: 15px 20px 13px;}
.round-button.point i {width: 20px;height: 20px;background-image: url("../images/icon_star_w.svg");background-size: cover;margin-left: 10px;}
.round-button.point:hover i {background-image: url("../images/icon_star_b.svg");}

.round-button.blue {background: #376dff;}
.round-button.blue:hover {background: #fff;}

/* VISUAL */
.visual {height: calc(100vh - 79px);position: relative;background-image: linear-gradient(270deg, #594aff, #352c99);overflow: hidden;}
.visual .text-box {backdrop-filter: blur(3px);position: relative;z-index: 5;color: #fff;display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
.visual .title {font-family: ONE-Mobile-Title;font-weight: bold;font-size: 44px;line-height: 60px;}
.visual .text {font-size: 20px;margin-top: 16px;line-height: 30px;}
.visual .background-group {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.visual .background-group img {position: absolute;}
.visual .background-group img.bg {width: 100%;height: 100%;object-fit: cover;}
.visual .background-group img.img-01 {width: 319px;height: 310px;top: -150px;right: 400px;mix-blend-mode: plus-lighter;}
.visual .background-group img.img-02 {width: 400px;height: 520px;top: 133px;right: 75px;mix-blend-mode: plus-lighter;}
.visual .background-group img.img-03 {width: 300px;height: 350px;top: 426px;left: 173px;mix-blend-mode: plus-lighter;}
.visual .background-group img.img-04 {width: 80vw;height: 81vw;top: 45%;left: 45%;transform: translateX(-50%);}
.visual .button-box {margin-top: 44px;}
.visual .icon-scroll-bottom {z-index: 5;position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);width: 25px;height: 14px;background: url("../images/icon_arrow_bottom.svg");background-size: cover;}

section {padding: 120px 100px;}
section .point-text {font-size: 18px;line-height: 27px;color: #0044ff;font-weight: 600;text-align: center;display: block;}
section > .title {font-size: 42px;line-height: 63px;color: #21272a;margin-top: 8px;font-weight: 700;text-align: center;}
section .s-title {font-size: 40px;line-height: 60px;color: #000000;margin-top: 8px;font-weight: 700;text-align: center;}
section .title-sub-text {font-size: 28px;line-height: 42px;color: #676767;margin-top: 12px;text-align: center;}
section .content {margin-top: 44px;}

/* PROBLEM */
section.problem {position: relative;overflow: hidden;}  
section.problem::after {content:"";position:absolute;width:600px;height:550px;background-image: linear-gradient(90deg, #F7F8FA,transparent);bottom:0;z-index: 5;}  
section.problem::after {right:0;transform: rotate(180deg);}   
.problem-list {position: relative;left: 50%;padding-top:20px; white-space: nowrap;} 
.problem-item { display: inline-block; width:319px;min-height: 338px; padding:44px 24px; margin:0px 8px; border:1px solid #F2F2FF; border-radius: 12px;background-image: linear-gradient(130deg, #fff,#fff, #E6E6FF);vertical-align: top; }
.problem-item i {display: inline-block; width:44px;height:44px;}
.problem-item:nth-child(1) i {background-image: url("../images/icon_problem_01.svg");}
.problem-item:nth-child(2) i {background-image: url("../images/icon_problem_02.svg");}
.problem-item:nth-child(3) i {background-image: url("../images/icon_problem_03.svg");} 
.problem-item:nth-child(4) i {background-image: url("../images/icon_problem_04.svg");} 
.problem-item .title {margin-top:16px;font-size: 20px;line-height: 30px;color: #232323;font-weight: 700;white-space: initial;}
.problem-item .text {margin-top:16px;font-size: 18px;line-height: 27px;color: #232323;font-weight: 600;white-space: initial;}

/* SOLUTION AUTO */
.card-group {padding: 32px;border-radius: 24px;background-color: #fff;background-repeat: no-repeat;overflow: hidden;}
.card-group .title {font-size: 32px;line-height: 48px;color: #232323;font-weight: 700;}
.card-item {background: #ffffffb2;border-radius: 16px;padding: 24px;flex: 1;}
.card-item .title {font-size: 24px;line-height: 36px;color: #000;font-weight: 700;}
.card-item .text {font-size: 20px;line-height: 30px;color: #232323;margin-top: 8px;}

.list-type-mix {display: flex;gap: 24px;}
.list-type-mix > .card-group {flex: 1;}
.list-type-mix > .list {width: 45%;min-width: 789px;display: flex;gap: 24px;flex-direction: column;}
.list-type-mix > .list > li {display: flex;gap: 24px;}

.card-group.bg-firecracker-p {background-image: url("../images/bg_firecracker_p.png");background-position: right bottom;background-size: 250px 350px;}
.card-group.bg-firecracker-o {position: relative;background-image: url("../images/bg_firecracker_o_01.png");background-position: left top;background-size: 160px 320px;background-color: #fff7f4;}
.card-group.bg-firecracker-o::before {content: "";width: 300px;height: 344px;position: absolute;right: 0;top: 0;background-image: url("../images/bg_firecracker_o_02.png");background-position: left top;background-size: cover;background-color: #fff7f4;}
.card-group.bg-firecracker-b {background-image: url("../images/bg_firecracker_b.png");background-position: center;background-size: 480px 460px;background-color: #f0fdfb;}

.card-group.bg-firecracker-o .list {display: flex;gap: 20px;margin-top: 20px;position: relative;z-index: 5;}
.card-group.bg-firecracker-b .list {display: flex;flex-direction: column;gap: 20px;margin-top: 20px;}
.card-group.bg-firecracker-b > .list > li {display: flex;gap: 24px;}

section.solution-auto .content {display: flex;flex-direction: column;gap: 44px;}

/* SOLUTION AI */
.ai-list {display: flex;gap: 24px;flex-direction: column;}
.ai-list > li {display: flex;gap: 24px;}
.ai-item {background: #fff;border-radius: 20px;padding: 44px 32px;flex: 1;text-align: center;}
.ai-item .title {font-size: 24px;line-height: 36px;color: #232323;font-weight: 700;}
.ai-item .text {font-size: 20px;line-height: 30px;color: #464646;margin-top: 16px;}

/* TESTIMONIAl */
.testimonial-list {position: relative;z-index: 1;display: flex;gap: 20px;flex-direction: column;margin-top: 44px;}
.testimonial-item {background: #fff;border-radius: 20px;padding: 32px;flex: 1;text-align: center;}
.testimonial-item .point-title {font-size: 24px;line-height: 36px;color: #5946ec;font-weight: 700;}
.testimonial-item .title {font-size: 20px;line-height: 30px;color: #232323;font-weight: 600;margin-top: 16px;}
.testimonial-item .text {font-size: 20px;line-height: 30px;color: #464646;margin-top: 16px;}
.bottom-text {font-size: 32px;line-height: 48px;color: #21272a;margin-top: 32px;text-align: center;font-weight: 700;}
section.testimonial {position: relative;}
section.testimonial .title {position: relative;z-index: 5;}
section.testimonial .background-box .icon {position: absolute;}
section.testimonial .background-box .icon.bg-01 {left: 40px;top: 440px;width: 238px;height: 238px;z-index: 5;}
section.testimonial .background-box .icon.bg-02 {right: 106px;top: 670px;width: 184px;height: 185px;z-index: 5;}
section.testimonial .background-box .icon.bg-03 {right: 161px;top: 115px;width: 175px;height: 175px;}
/* FAQ */
.faq-list {display: flex;gap: 16px;flex-direction: column;margin-top: 44px;}
.faq-item {background: #fff;border-radius: 20px;padding: 44px;}
.faq-item:hover {border: 1px solid #376dff;}
.faq-item .point-title {font-size: 24px;line-height: 36px;color: #003de6;font-weight: 700;margin-right: 9px;}
.faq-item .title {font-size: 24px;line-height: 36px;color: #000000;font-weight: 700;}
.faq-item .text {font-size: 20px;line-height: 24px;color: #232323;margin-top: 11px;}

.banner {position: relative;border-radius: 32px;overflow: hidden;min-height: 374px;padding: 0 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #fff;text-align: center;}
.banner::before {content: "";position: absolute;top: 0;right: 0;width: 100%;height: 100%;background: url("../images/bg_banner.jpeg") no-repeat center left;background-size: cover;transition: all 0.5s;}
.banner::after {content: "";position: absolute;top: 0;right: 0;width: 100%;height: 100%;background-color: #07073cbd;}
.banner:hover::before {transform: scale(1.1);}
.banner > div {position: relative;z-index: 5;} 
.banner .title {font-size: 36px;line-height: 42px;font-weight: 700;}
.banner .text {font-size: 20px;line-height: 26px;font-weight: 700;margin-top: 40px;}
.banner .button-area {margin-top: 40px;}

@media (max-width: 1700px) {
    section.problem::before,
    section.problem::after {width:250px;}  
}

@media (max-width: 1440px) {
    .problem-item { width:260px; } 
}
@media (max-width: 1250px) {
    section {padding: 80px 50px;}
    .list-type-mix > .list {  min-width: 600px;}
    .problem-item { width:220px; } 
}