:root {
    --main-color: #E74750;
    --main-light-color1: #E95962;
    --main-light-color2: #FFECEE;

    --blue-color: #4285F4;

    --black2: #222;
    --black3: #333;
    --black4: #444;
    --black6: #666;
    --black7: #777;

    --gray9: #999;
    --graye5: #e5e5e5;
    --graye9: #e9e9e9;
    --grayf5: #f5f5f5;
    --grayf9: #f9f9f9;

    --background-color: #121212;

    --wh-color: #fff;

    --eng-font: 'Anta';
    --eng-font2-italic: 'OpenSans_Condensed_Italic';

    --scale-ratio: 1;
}

.bg-main-color { background-color: var(--main-color) !important; }
.bg-blue-color { background-color: var(--blue-color) !important; }
.bg-black6-color { background-color: var(--black6) !important; }
.bg-black4-color { background-color: var(--black4) !important; }

.text-white-color { color: #fff !important; }

.font-main-color { color: var(--main-color); }

.inner1 {
    max-width: 1780px;
    width: 100%;
    margin: 0 auto;
}

.inner2 {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
}

.display-block-hidden {
    display: block;
    overflow: hidden;
}

/****************** 효과 ******************/
.fade {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fade.show {
    opacity: 1;
}

.slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
}
.slide-up.show {
    opacity: 1;
    transform: translateY(0);
}


/****************** section-title-box1 ******************/
.section-title-box1 span {
    display: block;
    font-weight: 600;
    font-size: 20px;
    color: var(--main-color);
}
.section-title-box1 strong {
    display: block;
    line-height: 63px;
    margin-top: 20px;
    font-weight: 700;
    font-size: 52px;
}
.section-title-box1 p {
    line-height: 26px;
    margin-top: 20px;
    font-size: 18px;
}

/****************** section-title-box2 ******************/
.section-title-box2 .title > span {
    display: inline-block;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50px;
}
.section-title-box2 .title .txt {
    display: block;
    margin: 25px 0 15px;
    font-weight: 300;
    font-size: 40px;
}
.section-title-box2 .title .txt span {
    font-weight: 700;
    font-size: inherit;
}
.section-title-box2 .desc p {
    line-height: 29px;
    font-weight: 300;
    font-size: 18px;
}
.section-title-box2.center {
    margin-bottom: 90px;
}
.section-title-box2.center .title,
.section-title-box2.center .desc {
    text-align: center;
}
@media only screen and (max-width: 1500px) {
    .section-title-box2 .title .txt {
        font-size: 32px;
    }
    .section-title-box2 .desc p {
        line-height: 25px;
        font-size: 16px;
    }
}
@media only screen and (max-width: 1023px) {
    .section-title-box2 .title > span {
        display: block;
        width: fit-content;
        margin: 0 auto;
        padding: 8px 10px;
        font-size: 12px;
    }
    .section-title-box2 .title .txt {
        margin: 18px 0 12px;
        line-height: 29px;
        font-size: 24px;
        text-align: center;
    }
    .section-title-box2 .desc p {
        line-height: 21px;
        font-size: 16px;
        text-align: center;
    }
}
@media only screen and (max-width: 767px) {
    .section-title-box2 .title .txt {
        margin: 12px 0 8px;
        line-height: 27px;
        font-size: 20px;
    }
    .section-title-box2 .desc p {
        line-height: 19px;
        font-size: 13px;
    }
}

/****************** section-title-box3 ******************/
.section-title-box3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-bottom: 80px;
}
.section-title-box3 > span {
    display: inline-block;
    font-weight: 700;
    font-size: 20px;
    background: linear-gradient(to right, var(--main-color), var(--blue-color));
    color: transparent;
    -webkit-background-clip: text;
    text-align: center;
}
.section-title-box3 .title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
}
.section-title-box3 .title .lf {
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title-box3 .title .img {
    width: 100px;
    height: 50px;
    border-radius: 50px;
    overflow: hidden;
}
.section-title-box3 .title .img img {
    width: 100%;
}
.section-title-box3 .title strong {
    display: block;
    font-weight: 700;
    font-size: 50px;
}
.section-title-box3 .title strong > span {
    color: var(--main-color);
}
.section-title-box3 > p {
    line-height: 26px;
    font-size: 16px;
    color: #CBCBCB;
    text-align: center;
}
@media only screen and (max-width: 1199px) {
    .section-title-box3 .title .img {
        width: 80px;
        height: 42px;
    }
    .section-title-box3 .title strong {
        font-size: 42px;
    }
}
@media only screen and (max-width: 1023px) {
    .section-title-box3 {
        gap: 15px;
    }
    .section-title-box3 > span {
        font-size: 14px;
    }
    .section-title-box3 .title {
        flex-wrap: wrap;
        gap: 20px;
    }
    .section-title-box3 .title .lf {
        justify-content: center;
    }
    .section-title-box3 .title .lf, .section-title-box3 .title .rg {
        width: 100%;
        text-align: center;
    }
    .section-title-box3 .title strong {
        font-size: 32px;
    }
    .section-title-box3 .title .img {
        width: 60px;
        height: 32px;
    }
    .section-title-box3 > p {
        line-height: 24px;
        font-size: 15px;
    }
}
@media only screen and (max-width: 560px) {
    .section-title-box3 > span {
        font-size: 12px;
    }
    .section-title-box3 .title strong {
        font-size: 28px;
    }
    .section-title-box3 .title .img {
        width: 50px;
        height: 28px;
    }
    .section-title-box3 > p {
        line-height: 21px;
        font-size: 13px;
    }
}



.mobile-section-title {
    display: none;
}
@media only screen and (max-width: 1023px) {
    .mobile-section-title {
        display: block;
        text-align: center;
        margin-bottom: 50px;
    }
    .mobile-section-title span {
        display: block;
        font-weight: 700;
        font-size: 14px;
        color: var(--main-color);
    }
    .mobile-section-title strong {
        display: block;
        margin-top: 10px;
        line-height: 29px;
        font-weight: 700;
        font-size: 24px;
        word-break: keep-all;
    }
    .mobile-section-title p {
        margin-top: 10px;
        line-height: 21px;
        font-size: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .mobile-section-title span {
        font-size: 12px;
    }
    .mobile-section-title strong {
        margin-top: 8px;
        line-height: 27px;
        font-size: 20px;
    }
    .mobile-section-title p {
        margin-top: 8px;
        line-height: 19px;
        font-size: 13px;
    }
}
/****************** list ******************/
.list1 > li {
    position: relative;
    margin-bottom: 8px;;
    padding-left: 9px;
    line-height: 19px;
    font-size: 14px;
}
.list1 > li::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 100%;
}
.list2 > li {
    position: relative;
    margin-bottom: 8px;;
    padding-left: 9px;
    line-height: 19px;
    font-size: 13px;
}
.list2 > li::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 5px;
    height: 1px;
    background: #fff;
    border-radius: 100%;
}
@media only screen and (max-width: 767px) {
    .list1 > li {
        padding-left: 7px;
        font-size: 13px;
    }
    .list1 > li::after {
        top: 5px;
    }
}

/****************** Button ******************/
.btn-bace1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 130px;
    height: 50px;
    font-weight: 700;
    background: url(../img/content/list-btn.png)center center no-repeat
}
.btn-bace2 {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    text-align: center;
    color: var(--black2);
    background: #fff;
    border-radius: 5px;
}
.btn-bace3 {
    display: inline-block;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 3px;
}

/****************** input ******************/
.input-st1 {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    font-size: 16px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 5px;
}
.input-st2 {
    display: block;
    width: 100%;
    height: 45px;
    padding: 0 12px;
    border: 1px solid var(--graye5);
    border-radius: 5px;
}

/****************** marquee ******************/
.marquee {
    width: 100%;
    height: 98px;
    line-height: 98px;
    overflow: hidden;
    white-space: nowrap;
    background: url(../img/content/marquee-bg.png)center center no-repeat;
}
.marquee .marquee-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: marquee-scroll 20s linear infinite;
}
.marquee .marquee-inner > span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family:'Anta';
    font-weight: 700;
    font-size: 19px;
    color: var(--wh-color);
    text-transform: uppercase;
}
.marquee .marquee-inner.mac > span::before {
    content: "";
    width: 27px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none"><path d="M7.5084 5.84473C7.49451 4.45128 8.64677 3.78295 8.69829 3.74919C8.0507 2.80405 7.0418 2.67437 6.68273 2.65961C5.8248 2.57263 5.00787 3.16404 4.57264 3.16404C4.1383 3.16404 3.46585 2.67236 2.75442 2.68488C1.81855 2.69874 0.955918 3.22821 0.474316 4.06446C-0.497625 5.74746 0.225675 8.24167 1.17275 9.60761C1.63576 10.2753 2.18792 11.0265 2.91234 10.999C3.61055 10.9715 3.87398 10.5483 4.71802 10.5483C5.56205 10.5483 5.79905 10.999 6.53758 10.985C7.28843 10.9713 7.76443 10.3046 8.22363 9.63422C8.75519 8.85856 8.97404 8.10751 8.98703 8.0695C8.97067 8.06189 7.5234 7.5085 7.5084 5.84473Z" fill="black"/><path d="M6.1211 1.75634C6.50527 1.29081 6.76556 0.643954 6.69477 0C6.14037 0.0223595 5.46926 0.367814 5.07121 0.832892C4.7146 1.24565 4.40279 1.90279 4.48634 2.53512C5.10481 2.58297 5.7356 2.22097 6.1211 1.75634Z" fill="black"/></svg>')center center no-repeat #fff;
    border-radius: 50px;
}
.marquee .marquee-inner.window > span::before {
    content: "";
    width: 27px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M1.03125 1.27829V9.72165C1.03131 9.73997 1.03677 9.75786 1.04696 9.77309C1.05714 9.78831 1.0716 9.80019 1.08851 9.80723C1.10542 9.81428 1.12403 9.81617 1.14201 9.81268C1.15999 9.80919 1.17655 9.80047 1.18959 9.7876L5.58594 5.50018L1.18959 1.21233C1.17655 1.19947 1.15999 1.19075 1.14201 1.18725C1.12403 1.18376 1.10542 1.18566 1.08851 1.1927C1.0716 1.19974 1.05714 1.21162 1.04696 1.22685C1.03677 1.24207 1.03131 1.25997 1.03125 1.27829Z" fill="%230086F9"/><path d="M7.42965 3.73835L1.91719 0.701314L1.91375 0.69938C1.81879 0.647818 1.72856 0.776295 1.80633 0.85106L6.12748 4.98293L7.42965 3.73835Z" fill="%2300AA4B"/><path d="M1.80658 10.1489C1.72838 10.2237 1.81861 10.3521 1.914 10.3006L1.91744 10.2987L7.42947 7.26162L6.1273 6.0166L1.80658 10.1489Z" fill="%23FF4031"/><path d="M9.65522 4.96301L8.11586 4.11523L6.66846 5.50012L8.11586 6.88436L9.65522 6.03723C10.0739 5.80584 10.0739 5.19439 9.65522 4.96301Z" fill="%23FFBD00"/></svg>')center center no-repeat #fff;
    border-radius: 50px;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
@media only screen and (max-width: 767px) {
    .marquee {
        height: 70px;
        line-height: 70px;
        background-size: cover;
    }
    .marquee .marquee-inner {
        animation-duration: 10s;
    }
    .marquee .marquee-inner > span {
        font-size: 13px;
    }
}

/****************** content-desc-box ******************/
.content-desc-box {
    display: flex;
    align-items: center;
    gap: 2.083vw;
}
.content-desc-box .arr {
    position: relative;
    width: 69px;
    height: 4px;
    background: linear-gradient(90deg, rgba(231,71,89,0), var(--main-color));
}
.content-desc-box .arr:after {
    content: "";
    position: absolute;
    top: -4px; right: 0;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background: var(--main-color);
}
.content-desc-box .text strong {
    display: block;
    margin-top: 15px;
    font-weight: 700;
    font-size: 28px;
}
.content-desc-box .text p {
    line-height: 23px;
    margin-top: 13px;
    font-size: 17px;
    color: #bfbfbf;
}
.content-desc-box .text .point-desc {
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: 24px;
    margin-top: 22px;
    padding: 30px 50px 30px 25px;
    color: #bfbfbf;
    background: #1d1d1d;
    border: 1px solid var(--black4);
    border-radius: 20px;
}
@media only screen and (max-width: 1500px) {
    .content-desc-box .text strong {
        font-size: 22px;
    }
    .content-desc-box .text p {
        margin-top: 10px;
        font-size: 15px;
    }
}
@media only screen and (max-width: 1023px) {
    .content-desc-box .text strong {
        line-height: 28px;
        font-size: 20px;
    }
    .content-desc-box .text p {
        line-height: 19px;
        font-size: 13px;
    }
}

/****************** Custom Cursor ******************/
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--main-light-color2);
    border-radius: 100%;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    z-index: 9999;
    mix-blend-mode: difference;
}
.custom-cursor::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231,71,80,0.3) 0%, transparent 70%);
    z-index: -1;
}
@media only screen and (max-width: 1023px) {
    .custom-cursor { display: none; }
}







.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }