@charset "UTF-8";

.fs-83 {font-size: 83px !important;}
.fs-78 {font-size: 78px !important;}
.fs-50 {font-size: 50px !important;}
.fs-45 {font-size: 45px !important;}
.fs-40 {font-size: 40px !important;}
.fs-35 {font-size: 35px !important;}
.fs-30 {font-size: 30px !important;}
.fs-30-16 {font-size: 30px !important;}
.fs-30-14 {font-size: 30px !important;}
.fs-28 {font-size: 28px !important;}
.fs-27 {font-size: 27px !important;}
.fs-27-16 {font-size: 27px !important;}
.fs-24 {font-size: 24px !important;}
.fs-22 {font-size: 22px !important;}
.fs-20 {font-size: 20px !important;}
.fs-20-15 {font-size: 20px !important;}
.fs-17 {font-size: 17px !important;}
.fs-16 {font-size: 16px !important;}
.fs-14 {font-size: 14px !important;}

.section {padding: 100px .75em 85px;}
.section.sec15 {background: url('/assets/images/ad/sec15-bg.jpeg') no-repeat; background-size: 100% 100%;}

.fade-up {opacity: 0; transform: translateY(40px); transition: .7s ease;}
.fade-up.active-ani {opacity: 1; transform: translateY(0);}

.text-point {--bs-text-opacity: 1; color: #FF8800 !important;}

.counsel-btn {background: #fff; color: #000 !important; text-decoration: none; display: flex; padding: .6rem 2rem; justify-content: center; align-items: center;}
.counsel-btn.header-btn::after {content: '1555-2545'; font-size: 20px; line-height: 20px;}
.counsel-btn:hover {background: #FF8800; color: #fff !important; text-decoration: none; display: flex; padding: .6rem 2rem; justify-content: center; align-items: center;}
.counsel-btn.header-btn:hover::after {content: '무료 상담 신청'; font-size: 18px;}
.text-gradation {background: linear-gradient(271deg, #FFF0E5 4.86%, #F80 83.56%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.ls-lg {letter-spacing: 0.1rem;}
.text-gray {color: #c7c7c7;}
.text-gray2 {color: #9a9a9a;}
.text-gray3 {color: #5d5d5d;}
.text-gray4 {color: #7D7D7D;}

.effect-box {display:inline-block; position: relative; overflow: hidden; border-radius: 20.648px; border: 1px solid rgba(255, 136, 0, 0.45); background: #110D0A; padding: 15px 85px;}
.effect-box::after {content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 220%; background: linear-gradient(100deg, transparent 0%, rgba(0, 255, 255, 0.02) 20%, rgba(120, 220, 255, 0.12) 45%, rgb(255 255 255 / 50%) 50%, rgba(120, 220, 255, 0.12) 55%, rgba(0, 255, 255, 0.02) 80%, transparent 100%); filter: blur(12px); transform: rotate(8deg); opacity: .8; pointer-events: none; animation: flowingLight 5.5s cubic-bezier(.22,.61,.36,1) infinite; }
.effect-box.bottom {display: block; border-radius: 0px; border: 1px solid rgba(255, 136, 0, 0.45); border-left: 3px solid #FF8800;}
@keyframes flowingLight {
    0% {
        transform: translateX(-20%) rotate(8deg);
        opacity: 0;
    }
    12% {
        opacity: .8;
    }
    55% {
        opacity: .9;
    }
    100% {
        transform: translateX(420%) rotate(8deg);
        opacity: 0;
    }
}

.c-row-empty {gap: 6rem; justify-content: center;}

.pain-box.card {border-radius: 18.44px; background: #FFF; box-shadow: 0 4.339px 17.681px 1.085px rgba(0, 0, 0, 0.25); border: 3px solid transparent; transition: transform 0.15s ease, box-shadow 0.3s ease; transform-style: preserve-3d; will-change: transform;}
.pain-box.card:hover {background-color: #474747; box-shadow: 0 20px 40px rgba(0,0,0,.15);}
.pain-box .card-body { transform: translateZ(20px); }
.pain-box .card-subtitle {background: rgba(255, 136, 0, 0.15);}
.pain-box .card-text {color: #737373;}
.pain-box:hover .card-title, .pain-box:hover .card-text {color: #fff;}

@keyframes wobble {
    0% { transform: translateY(-10px) rotate(0); }
    25% { transform: translateY(-10px) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
    75% { transform: translateY(-10px) rotate(-1deg); }
    100% { transform: translateY(-10px) rotate(0); }
}

.comparison-box.card {border: 1px solid rgba(255, 255, 255, 0.12); background: #0A0A0C; border-top: 3px solid #595959; border-radius: 0;}
.comparison-box.card.teamnext {border: 1px solid rgba(255, 136, 0, 0.12); background: #110D0A; border-top: 3px solid #FF8800; transition: transform 0.15s ease, box-shadow 0.3s ease; transform-style: preserve-3d; will-change: transform;}
.comparison-box.card.teamnext:hover {box-shadow: 0 20px 40px rgba(0,0,0,.15);}
.comparison-box .card-body { transform: translateZ(20px); }
.comparison-box .card-subtitle {border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); color: #FFF;}
.comparison-box.card.teamnext .card-subtitle {border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 136, 0, 0.20); color: #FF8800;}
.comparison-box .card-list li {border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 10px 0 50px;}
.comparison-box .card-list li::before {content: ''; display: inline-block; margin-right: 15px; background: #474747; width: 13px; height: 3px; vertical-align: middle;}
.comparison-box.card.teamnext .card-list li::before {content: ""; display: inline-block; width: 25px; height: 25px; background: url('/assets/images/ad/comparison-check_2.png') no-repeat center; background-size: contain; margin-right: 10px;}

.pain-point-box.card {border-radius: 18.44px; background: #FFF; box-shadow: 0 4.339px 17.681px 1.085px rgba(0, 0, 0, 0.25); border: 3px solid transparent; transition: transform 0.15s ease, box-shadow 0.3s ease; transform-style: preserve-3d; will-change: transform;}
.pain-point-box.card:hover {background-color: #F80; box-shadow: 0 20px 40px rgba(0,0,0,.15);}
.pain-point-box .card-body {transform: translateZ(20px);}
.pain-point-box.card:hover .card-text {color: #fff !important;}

#main-slide .swiper-slide .slide-inner {background: #FFF; box-shadow: 0 4px 20.9px -5px rgba(0, 0, 0, 0.25); overflow: hidden; border-radius: 2%;}

.find-box.card {border: 1px solid rgba(255, 255, 255, 0.08); background: #0E0E10; border-radius: 0;}
.find-box .card-subtitle {color: #474747;}
/* .find-box.card.last {border: 1px solid rgba(255, 136, 0, 0.70); background: #110D0A; border-top-width: 3px;}
.find-box.card.last .card-subtitle {color: #FF8800;}
.find-box.card.last .card-text {color: #FF8800 !important;} */
.find-box.card:hover {border: 1px solid rgba(255, 136, 0, 0.70); background: #110D0A; border-top-width: 3px;}
.find-box.card:hover .card-subtitle {color: #FF8800;}
.find-box.card:hover .card-text {color: #FF8800 !important;}

.check-box.card {border: 1px solid rgba(255, 136, 0, 0.25); border-left: 3px solid #FF8800; background: #FFF; border-radius:0; }
.check-box.card .check-item::before {content: ""; display: inline-block;  width: 30px; height: 30px; background: url('/assets/images/ad/find-check.png') no-repeat center; background-size: contain; margin-right: 15px;}
.typing {display: inline-block; overflow: hidden; white-space: nowrap; width: 0;}

.active-ani .typing {animation: typing 1.5s steps(25, end) forwards;}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.marketing-box.card {border: 0.891px solid rgba(255, 136, 0, 0.25); background: #FFF; border-top: 3px solid #FF8800; border-radius: 0; transition: all 0.3s ease; transform-origin: center;}
.marketing-box .card-subtitle {border-radius: 4.5px; background: rgba(255, 136, 0, 0.18); color: #FF8800;}
.marketing-box.card:hover {transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,.15);}

.channel-box.card {border-radius: 4.5px; border: 1px solid rgba(255, 255, 255, 0.07); background: #FFF; box-shadow: 0 0 12.141px -2.228px rgba(0, 0, 0, 0.25);}
.channel-box .channel-dot {background-color: #FF8800; width:7px; height: 7px;}
.channel-box .card-text img {max-width: 56px; max-height: 56px; border-radius: 12px; box-shadow: 0 2.315px 6.945px 0 rgba(0, 0, 0, 0.20);}

.skill-box.card {min-height: 228px; border-radius: 18px; border: 1px solid #FF8800; background: transparent; box-shadow: 0 0 12.141px -2.228px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.3s ease; transform-style: preserve-3d; will-change: transform;}
.skill-box.card:hover {box-shadow: 0 20px 40px rgba(0,0,0,.15);}
.skill-box .card-body {transform: translateZ(20px);}

.number-box.card {border: 1px solid rgba(255, 255, 255, 0.08); background: #FFF; border-left: 3px solid #FF8800; border-radius: 0;}
.number-box.card .number-bg {color: rgba(255, 136, 0, 0.10); font-size: 90.4px;}

.partner-box.card {border: 1px solid rgba(255, 255, 255, 0.07); background: #0E0E10; border-radius: 0;}
.partner-box.card:hover {border-color: #FF8800;}
.partner-box.card .partner-icon {background: rgba(255, 136, 0, 0.15); width: 40px; height: 40px;}

.work-box.card {border: 1px solid rgba(255, 136, 0, 0.25); border-top: 3px solid #FF8800; background: #FFF; border-radius:0; transition: transform 0.15s ease, box-shadow 0.3s ease; transform-style: preserve-3d; will-change: transform;}
.work-box .card-subtitle {background: rgba(255, 136, 0, 0.15);}
.work-box.card:hover {box-shadow: 0 20px 40px rgba(0,0,0,.15);}
.work-box .card-body {transform: translateZ(20px);}

.form-box.card {border-radius: 4px; border: 1px solid rgba(255, 107, 61, 0.08); box-shadow: 0 0 13.088px -2.446px rgba(0, 0, 0, 0.25);}

.fill-title {--fill: 0%; position: relative; display: inline-block; color: #fff;}
.fill-title::before {content: attr(data-text); position: absolute; inset: 0; background: linear-gradient(271deg,#FFF0E5 4.86%,#FF8800 83.56%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; clip-path: inset(calc(100% - var(--fill)) 0 0 0); pointer-events: none;}
.fill-title::after {content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: linear-gradient(90deg, #FF8800, #FFF0E5); transform-origin: left; transform: scaleX(var(--fill-rate, 0));}

.text-point-fill {--fill: 0%; color: transparent; background: linear-gradient(to bottom, #ff8800 0%, #ff8800 var(--fill), #fff var(--fill), #fff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.text-point-fill::after {content: attr(data-text); position: absolute; inset: 0;}

@media (max-height: 1263px) {
    .c-row-empty {gap: 4rem;}
}

.title-line::before {content: ''; position: absolute; top: -10px; left: 0; width: 42px; height: 4px; background: #FF8800; box-shadow: 0 0 12px rgba(255, 138, 0, .35);}

@media (max-width: 768px){
    .section:not(footer) {display: flex; align-items: center; padding-top: 5em; padding-bottom: 5em;}
    .section.sec01 {padding-top: 7em;}
    .title-line::before {width: 20px; height: 2px;}
    .c-row-empty {gap: 2rem;}
    .effect-box {display: block; padding: 12px 0;}

    .comparison-box .card-list li {padding-bottom: 20px;}
    .comparison-box .card-list li::before {width: 6px; height: 1px; margin-right: 10px;}
    .comparison-box.card.teamnext .card-list li::before {content: ""; display: inline-block; width: 15px; height: 15px; background: url('/assets/images/ad/comparison-check_2.png') no-repeat center; background-size: contain; margin-right: 10px;}

    .arrow-icon {width: 20px;}
    /* .check-box.card .check-item p::before {content: ''; position: absolute; left: 5px; display: inline-block; width: 23px; height: 23px; margin-right: 8px; background-image: url('/assets/images/ad/find-check.png'); background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle;} */
    .check-box.card .check-item::before {position: absolute;}

    .skill-box.card {min-height: 130px;}

    .number-box.card .number-bg {font-size: 11vw;}

    .fs-83 {font-size: 8.53vw !important;}
    .fs-78 {font-size: 8.53vw !important;}
    .fs-50 {font-size: 7.75vw !important;}
    .fs-45 {font-size: 7vw !important;}
    .fs-40 {font-size: 6vw !important;}
    .fs-35 {font-size: 5.4vw !important;}
    .fs-30 {font-size: 4.8vw !important;}
    .fs-30-16 {font-size: 4.26vw !important;}
    .fs-30-14 {font-size: 3.73vw !important;}
    .fs-27 {font-size: 4.54vw !important;}
    .fs-27-16 {font-size: 4.26vw !important;}
    .fs-24 {font-size: 4vw !important;}
    .fs-22 {font-size: 4.26vw !important;}
    .fs-20 {font-size: 4.25vw !important;}
    .fs-20-15 {font-size: 4vw !important;}
    .fs-17 {font-size: 17px !important;}
    .fs-16 {font-size: 16px !important;}
    .fs-14 {font-size: 14px !important;}

    .skill-icon {width: 7.47vw;}

    .section.sec15 {background: url('/assets/images/ad/sec15-bg-m.jpg') no-repeat; background-size: 100% 100%;}
}

@media (max-width: 992px){
}