/****************** 공통 ******************/
.hidden {
    display: none;
}

/****************** 메인비주얼 ******************/
.main-visual-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
}
.main-visual-wrapper::after {
    content: "";
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    height: 1000px;
    background: var(--background-color);
    opacity: 0;
}
.main-visual-wrapper.show::after {
    opacity: 1;
    transition: opacity 0.3s;
}
.main-visual-img .img {
    position: absolute;
    top: 260px;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s, top 0.3s;
}
.main-visual-img .img.show {
    top: 210px;
    opacity: 1;
}
.main-visual-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 180px;
    opacity: 0;
    transition: opacity 0.5s;
}
.main-visual-text.show {
    opacity: 1;
}
.main-visual-text .glitch {
    width: 100%;
    text-align: center;
}
.main-visual-text h2 {
    position: relative;
    display: inline-block;
    font-family: var(--eng-font2-italic);
    font-weight: 700;
    font-size: 7.813vw;
    transition: clip-path 20ms ease-in;
    transform: skew(var(--skew));
}
.main-visual-text h2::before, .main-visual-text > h2::after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    background-color: transparent;
}
.main-visual-text h2::before {
    left: 5px;
    text-shadow: 2px -2px #2a96d4;
    clip-path: polygon(
        0 var(--t1), 100% var(--t1), 100% var(--b1), 0 var(--b1)
    );
}
.main-visual-text h2::after {
    left: 5px;
    text-shadow: 2px -2px #cc2a1f;
    clip-path: polygon(
        0 var(--t2), 100% var(--t2), 100% var(--b2), 0 var(--b2)
    );
    
}
.main-visual-text h2:first-child {
    display: block;
    width: 50%;
    margin: 0 auto;
    font-family: var(--eng-font2-italic);
    color: var(--main-color);
}
.main-visual-text > strong {
    position: relative;
    display: inline-block;
    height: 3.854vw;
    line-height: 3.854vw;
    margin-top: 20px;
    padding: 0 20px;
    font-weight: 300;
    font-size: 1.563vw;
    color: var(--black2);
    background: var(--main-color);
}
.main-visual-text > strong::before,
.main-visual-text > strong::after {
    content: "";
    position: absolute;
}
.main-visual-text > strong::before {
    top: -0.26vw;
    left: -1.875vw;
    width: 1.875vw;
    height: 4.896vw;
    background: url(../img/content/main-visual-text-left.png)center / cover no-repeat;
}
.main-visual-text > strong::after {
    top: 0;
    right: -2.135vw;
    width: 2.135vw;
    height: 4.948vw;
    background: url(../img/content/main-visual-text-right.png)center / cover no-repeat;
}
.main-visual-text > strong > span {
    font-weight: 500;
    color: var(--black2);
}
.main-visual-text > p {
    width: 100%;
    line-height: 1.771vw;
    margin-top: 30px;
    font-size: 1.094vw;
    text-align: center;
}
.main-visual-text > p > span {
    color: var(--main-color);
}
.main-visual-text .scroll-down {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 3.125vw;
    animation: up-down-animation 2s linear infinite;
}
.main-visual-text .scroll-down span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    border: 1px solid rgba(255,255,255,0.7);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="11" viewBox="0 0 8 11" fill="none"><path d="M4 11L7.76541 7.3505C8.0782 7.04735 8.0782 6.55733 7.76541 6.25418C7.45263 5.95102 6.94705 5.95102 6.63427 6.25418L4.79996 8.03202L4.79996 0.775335C4.79996 0.34735 4.44238 3.44634e-07 4 3.0596e-07C3.55762 2.67286e-07 3.20004 0.34735 3.20004 0.775335L3.20004 8.03202L1.36573 6.25418C1.20974 6.10299 1.00495 6.02701 0.80016 6.02701C0.595371 6.02701 0.39058 6.10299 0.234588 6.25418C-0.0781962 6.55733 -0.0781962 7.04734 0.234588 7.3505L4 11Z" fill="white" fill-opacity="0.7"/></svg>')center center no-repeat;
}
.main-visual-text .scroll-down p {
    font-family: 'Anta';
    color: rgba(255,255,255,0.7);
}
.main-visual-wrapper .app-download-btn {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 2.604vw;
}
.main-visual-wrapper .app-download-btn .btn {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    height: 4.688vw;
    line-height: 4.688vw;
    padding: 3px 3.646vw 0 1.563vw;
    background: var(--background-color);
}
.main-visual-wrapper .app-download-btn .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.563vw;
    width: 8px;
    height: 14px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 13L7 7L1 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center center no-repeat;
    transform: translateY(-50%);
}
.main-visual-wrapper .app-download-btn .btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 95%;
    height: 83%;
    border: 1px solid #fff;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}
.main-visual-wrapper .app-download-btn img {
    width: 1.615vw;
}
.main-visual-wrapper .app-download-btn .btn:hover::before {
    transition: all 0.3s ease;
}
.main-visual-wrapper .app-download-btn .apple::before {
    border-color: var(--main-color);
}
.main-visual-wrapper .app-download-btn .apple:hover::before {
    box-shadow: 0 0 4px var(--main-color);
}
.main-visual-wrapper .app-download-btn .google::before {
    border-color: var(--blue-color);
}
.main-visual-wrapper .app-download-btn .google:hover::before {
    box-shadow: 0 0 4px var(--blue-color);
}
.main-visual-wrapper .app-download-btn .btn em {
    display: block;
    line-height: 1.302vw;
    font-size: 0.781vw;
}
.main-visual-wrapper .app-download-btn .btn em > span {
    display: block;
    font-weight: 700;
    font-size: 1.302vw;
}
@media only screen and (max-width: 1199px) {
    .main-visual-text {
        padding-top: 150px;
    }
}
@media only screen and (max-width: 1023px) {
    .main-visual-text .scroll-down {
        display: none;
    }
    .main-visual-text > strong {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
    }
    .main-visual-text > strong::before {
        top: 0;
        left: -23px;
        width: 23px;
        height: 40px;
    }
    .main-visual-text > strong::after {
        top: 0;
        right: -30px;
        width: 30px;
        height: 40px;
    }
    .main-visual-text > p {
        line-height: 19px;
        margin-top: 20px;
        font-size: 12px;
    }
    .main-visual-wrapper .app-download-btn {
        margin-top: 8.309vw;
    }
    .main-visual-wrapper .app-download-btn {
        margin-top: 7.823vw;
    }
    .main-visual-wrapper .app-download-btn .btn {
        height: auto;
        line-height: normal;
        padding: 12px 39px 12px 16px;
    }
    .main-visual-wrapper .app-download-btn img {
        width: 20px;
    }
    .main-visual-wrapper .app-download-btn .btn em {
        line-height: 16px;
        font-size: 11px;
    }
    .main-visual-wrapper .app-download-btn .btn em span {
        font-size: 14px;
    }
    .main-visual-wrapper .app-download-btn .btn::after {
       background-size: 6px;
    }
}
@media only screen and (max-width: 767px) {
    .main-content-wrap {
        overflow: hidden;
    }
    .main-visual-text {
        padding-top: 130px;
    }
    .main-visual-text h2 {
        font-size: 70px;
    }
    .main-visual-text:after {
        content: "";
        position: absolute;
        bottom: -51px;
        left: 0;
        width: 100%;
        height: 200px;
        background: linear-gradient(0deg, var(--background-color), transparent);
        z-index: -1;
    }
    .main-visual-img .img {
        width: 767px;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-visual-wrapper .app-download-btn .btn::after {
        right: 15px;
    }
}
@media only screen and (max-width: 520px) {
    .main-visual-text h2 {
        font-size: 13.462vw;
    }
    .main-visual-text > strong {
        height: 7.692vw;
        line-height: 7.692vw;
        font-size: 3.077vw;
    }
    .main-visual-text > strong::before {
        left: -4.423vw;
        width: 4.423vw;
        height: 7.692vw;
    }
    .main-visual-text > strong::after {
        right: -5.769vw;
        width: 5.769vw;
        height: 7.692vw;
    }
    .main-visual-text > p {
        line-height: 3.654vw;
        margin-top: 3.846vw;
        font-size: 2.308vw;
    }
    .main-visual-img .img {
        display: none;
    }
}





/****************** 타이핑 애니메이션 ******************/
.typing-ani {
    white-space: pre-wrap;
    overflow: hidden;
    border-right: .15em solid transparent;
}

/****************** 페이지 로딩 ******************/
.loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    z-index: 101;
    transform: translate(-50%, -50%);
}
.loading-inner .line {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--main-color);
}
.loading-inner button {
    flex-shrink: 0;
    position: relative;
    max-width: 350px;
    width: 100%;
    height: 163px;
    padding: 0 55px;
    animation: buttonWidthAni 0.4s ease-in-out forwards;
    overflow: hidden;
}
.loading-inner button > span {
    display: block;
    font-family: 'Anta';
    font-size: 26px;
    color: #EDABAF;
    text-align: center;
    animation: opacityAni 1s forwards;
    animation-delay: 0.6s;
    opacity: 0;
    transition: all 0.3s ease;
}
.loading-inner .click {
    position: absolute;
    bottom: 28%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
    font-family: 'Anta';
    font-size: 16px;
    color: #EDABAF;
    text-align: center;
    transform: translate(-50%, 50%);
    opacity: 0;
    animation: opacityAni2 1.5s infinite;
    animation-delay: 0.6s;
}
.loading-inner .click:before {
    content: "";
    display: block;
    width: 12px;
    height: 10px;
    background: url(../img/content/click-left.png);
}
.loading-inner .click:after {
    content: "";
    display: block;
    width: 12px;
    height: 10px;
    background: url(../img/content/click-right.png);
}
.loading-inner button::before, .loading-inner button::after {
    content: "";
    position: absolute;
    top: 0;
    width: 14px;
    height: 100%;
}
.loading-inner button::before {
    left: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="165" viewBox="0 0 14 165" fill="none"><path d="M13 9L7 12V153L13 156V9Z" fill="%23E74750"/><path d="M13 1L1 7V158L13 164" stroke="%23E74750"/></svg>');
    
}
.loading-inner button::after {
    right: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="165" viewBox="0 0 14 165" fill="none"><path d="M1 9L7 12V153L1 156V9Z" fill="%23E74750"/><path d="M1 1L13 7V158L1 164" stroke="%23E74750"/></svg>');
}
@keyframes buttonWidthAni {
    0% { width: 0; height: 0; }
    100% { width: 350px; height: 163px; }
}
@keyframes opacityAni {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes opacityAni2 {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.loading-inner.fade-out {
    opacity: 0;
    transition: opacity 0.4s;
}
.loading-inner.out button {
    width: 0;
    height: 0;
    padding: 0;
    animation: buttonWidthAniOut 0.4s ease-in-out forwards;
    transition: all 0.4s ease-in-out;
}
.loading-inner.out button > span,
.loading-inner.out button > p {
    width: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}
@keyframes buttonWidthAniOut {
    0% { width: 350px; height: 163px; }
    100% { width: 0; height: 0; }
}
/* 반응형 */
@media only screen and (max-width: 620px) {
    .loading-inner button {
        max-width: 260px;
    }
    .loading-inner button > span {
        font-size: 22px;
    }
}
@media only screen and (max-width: 480px) {
    .loading-inner button {
        max-width: 135px;
        padding: 0 40px;
    }
    .loading-inner button > span {
        font-size: 16px;
    }
    .loading-inner .click {
        font-size: 13px;
    }
}


/****************** 동영상 배경 ******************/
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #431518;
    overflow: hidden;
}
.background-video video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    opacity: .30;
    filter: brightness(0.5);
    transform: translateX(-50%);
}
.background-video.back {
    z-index: 1;
}


/****************** 메인 컨텐츠 ******************/
.main-content-wrap {
    background: #121212;
}

/****************** AI 캐릭터 소개 ******************/
.ai-introduce-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1
}
.ai-introduce-section .text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.ai-introduce-section .text-inner > div {
    display: flex;
}
.ai-introduce-section .text-inner > div .intro-txt {
    font-weight: 300;
    font-size: 4.688vw;
}
.ai-introduce-section .text-inner > div .intro-txt.left {
    font-weight: 700;
}
.ai-introduce-section .text-inner .sub-txt {
    position: absolute;
    bottom: 115px;
    left: 0;
    width: 100%;
    line-height: 1.615vw;
    font-weight: 500;
    font-size: 1.042vw;
    color: var(--gray9);
    text-align: center;
}

.ai-introduce-section .char-card-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 310px;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.ai-introduce-section .char-card-wrap .card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    transform: translateY(100px);
    border-radius: 10px;
    overflow: hidden;
}
.project-el--motion3::before,
.ai-introduce-section .char-card-wrap .card:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 32px;
    height: 32px;
    background: url(../img/content/oboa-ai-badge.png);
}


.coordinate-row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 100vh;
    display: flex;
    pointer-events: none;
    z-index: 1;
} 
.coordinate-row .col {
    position: relative;
    flex: 1;
}
.coordinate-row .col .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.coordinate-row .col3 .box {
    top: 57%;
}
.coordinate-row .col .project-el {
    margin-bottom: 130px;
}

.project-el--clone {
    width: 240px;
    height: 310px;
    opacity: 0;
    margin: 0 auto;
    background-color: transparent;
}
.grid-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.project-el--motion3 {
    position: absolute;
    width: 240px;
    height: 310px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
}
.project-el--motion3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
@media only screen and (max-width: 1023px) {
    .ai-introduce-section .text-wrap.active {
        padding-bottom: 350px;
        transition: padding 0.4s;
    }
    .ai-introduce-section .text-inner .sub-txt {
        line-height: 21px;
        font-size: 14px;
    }
    .project-el--motion3,
    .ai-introduce-section .char-card-wrap {
        width: 190px;
        height: 240px;
    }
    .ai-introduce-section .char-card-wrap {
        margin-top: -5px;
    }
    .ai-introduce-section .char-card-wrap .card img {
        width: 100%;
    }
    .coordinate-row {
        width: 1200px;
    }
}









.introduce-wrapper {
    position: relative;
    height: 100vh;
    margin-top: 100px;
    overflow: hidden;
}
.introduce-wrapper .background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/content/introduce-bg-img.png) center/cover no-repeat;
    z-index: 0;
}
.introduce-wrapper .title-box {
    position: sticky;
    position: -webkit-sticky;
    top: 30px;
    left: 0;
    padding: 130px 4.167vw 0;
    z-index: 1000;
    mix-blend-mode: difference;
}
.introduce-wrapper .title-box .type,
.introduce-wrapper .title-box .title {
    overflow: hidden;
}
.introduce-wrapper .title-box .type span {
    font-weight: 700;
    font-size: 1.042vw;
    color: var(--main-color);
}
.introduce-wrapper .title-box .title {
    margin-top: 15px;
}
.introduce-wrapper .title-box .title strong {
    overflow: hidden;
    font-weight: 700;
    font-size: 2.5vw;
}
.introduce-wrapper .title-box .desc {
    padding-top: 24px;
}
.introduce-wrapper .title-box .desc p {
    font-weight: 300;
    opacity: .8;
}
.introduce-wrapper .scroll-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 100px;
}
.introduce-wrapper .scroll-area .scroll-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}
@media only screen and (max-width: 1500px) {
    .introduce-wrapper .title-box .desc p {
        font-size: 15px;
    }
}
@media only screen and (max-width: 1023px) {
    .introduce-wrapper {
        height: auto;
        overflow: inherit;
    }
    .introduce-wrapper .background-img {
        display: none;
    }
    .introduce-wrapper .title-box {
        display: none;
    }
    .introduce-wrapper .scroll-area {
        position: relative;
        padding-top: 0;
    }
    .introduce-wrapper .scroll-area .scroll-content {
        height: auto;
    }
    .introduce-wrapper .scroll-area .content-desc-box {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .introduce-wrapper .scroll-area .scroll-content {
        padding: 0 30px;
    }
}
/****************** 캐릭터 모드 변경 섹션 ******************/
.mode-section {
    padding: 200px 0;
}
.mode-section .content {
    display: flex;
    gap: 4.688vw;
    margin-top: 50px;
    padding: 0 30px;
}
.mode-section .content .right {
    display: flex;
    align-items: center;
}

.mode-select-button {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.781vw;
    width: 21.615vw;
}
.mode-select-button .gradient-border {
    display: block;
    width: calc((21.615vw - 1.406vw) / 2);
    aspect-ratio: 1 / 1;
    padding: 2px 4px 2px 2px;
    border-radius: 1.563vw;
    background: #3C3C3C;
}
.mode-select-button button {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background: var(--black3);
    border: 1px solid #3C3C3C;
    border-radius: 1.563vw;
}
.mode-select-button button span {
    display: block;
    width: 100%;
    margin-top: 7px;
    font-size: 0.938vw;
    color: var(--gray9);
    text-align: center;
}
.mode-select-button button img {
    display: block;
    max-width: 100%;
    width: 60%;
    height: auto;
}
.mode-select-button .gradient-border.active button span {
    font-weight: 500;
    color: var(--wh-color);
    transition: color 0.3s;
}

/* 감성적인 모드 */
.mode-select-button .emotional.active {
    background: linear-gradient(270deg, #E3C556, #FFFAE8);
}
.mode-select-button .emotional.active button span {
    color: #E3C556;
}
/* 로맨틱 모드 */
.mode-select-button .romantic.active {
    background: linear-gradient(270deg, #D26BB3, #F8E3EF);
}
.mode-select-button .romantic.active button span {
    color: #D26BB3;
}
/* 논리적 모드 */
.mode-select-button .logical.active {
    background: linear-gradient(270deg, #4A8BC8, #DCE4EC);
}
.mode-select-button .logical.active button span {
    color: #4A8BC8;
}
/* 다크 모드 */
.mode-select-button .dark.active {
    background: linear-gradient(270deg, #808080, #F6F9FC);
}
.mode-select-button .dark.active button span {
    color: #F6F9FC;
}
.mode-example-box {
    flex-shrink: 0;
    width: 26.667vw;
    height: 18.49vw;
    padding-left: 3.125vw;
    padding-top: 3.125vw;
    background: url(../img/content/mode-phone-img.png)left top / cover no-repeat;
}
@media only screen and (max-width: 1023px) {
    .mode-section {
        padding: 0 0 100px;
    }
    .mode-section .inner2 {
        max-width: 700px;
    }
    .mode-section .content {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0;
        padding: 0;
        gap: 0;
    }
    .mode-select-button {
        width: 100%;
    }
    .mode-select-button .gradient-border {
        flex: 1;
        width: auto;
        height: 60px;
        aspect-ratio: inherit;
        padding: 2px 4px 4px 2px;
        border-radius: 5px;
    }
    .mode-select-button button {
        flex-wrap: nowrap;
        gap: 10px;
        border-radius: 5px;
    }
    .mode-select-button button img {
        width: 39px;
    }
    .mode-select-button .gradient-border button span {
        width: auto;
        margin-top: 0;
        font-size: 14px;
    }
    .mode-example-box {
        width: 49.071vw;
        height: auto;
        margin-top: 50px;
        padding: 0;
        background: none;
    }
}
@media only screen and (max-width: 767px) {
    .mode-section .content .right {
        flex-wrap: wrap;
        justify-content: center;
    }
    .mode-section .content .right .content-desc-box {
        display: none;
    }
    .mode-select-button .gradient-border {
        flex: 1 1 49%;
    }
    .mode-example-box {
        width: 350px;
        min-height: 140px;
        margin-top: 30px;
        padding: 0;
    }
}
.chat-example .chat {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
}
.chat-example .chat:last-child {
    margin-bottom: 0;
}
.chat-example .chat.me {
    justify-content: flex-end;
}
.chat-example .chat p {
    max-width: 355px;
    padding: 12px 17px;
    line-height: 1.406vw;
    font-size: 0.938vw;
    background: var(--black3);
    border-radius: 17px;
    
}
.chat-example .chat.me p {
    border-top-right-radius: 3px;
    background: var(--main-color);
}
.chat-example .chat.bot p {
    border-top-left-radius: 3px;
}
/* 감성적인 모드 말풍선 */
.chat-example .chat.bot p.emotional {
    background: #586174;
}
/* 로맨틱 모드 말풍선 */
.chat-example .chat.bot p.romantic {
    background: #F1A4A8;
}
/* 논리적인 모드 말풍선 */
.chat-example .chat.bot p.logical {
    background: #627D64;
}
/* 다크 모드 말풍선 */
.chat-example .chat.bot p.dark {
    background: #6B5B6E;
}
@media only screen and (max-width: 1500px) {
    .chat-example .chat p {
        font-size: 14px;
        line-height: 19px;
    }
}
@media only screen and (max-width: 1023px) {
    .chat-example .chat p {
        line-height: 23px;
        font-size: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .chat-example .chat p {
        line-height: 19px;
        font-size: 13px;
    }
}

/****************** 20250729 모드 변경 ******************/
@media only screen and (max-width: 1023px) {
    .introduce-wrapper { display: none; }
    .introduce-wrapper-mobile { display: block !important; position: relative; }
    .introduce-wrapper-mobile .section .cont-box { padding: 0 30px; }
    .mode-section .cont,
    .voice-section .cont,
    .char-section .cont { max-width: 550px; width: 100%; margin: 0 auto; }
    .mode-section {
        position: relative;
        z-index: 1;
        padding: 150px 0;
        background: url(../img/content/mode-section-background.png)top center / cover no-repeat;
    }
    .mode-section::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, var(--background-color), transparent, var(--background-color));
        z-index: -1;
    }
    .mode-section .chat-example {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid rgba(255,255,255,0.1);;
    }
    .mode-section .mode-button-box > p {
        display: flex;
        align-items: center;
        gap: 3px;
        justify-content: center;
        font-size: 11px;
        text-align: center;
    }
    .mode-section .mode-button-box ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 12px;
    }
    .mode-section .mode-button-box ul li button {
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 28px;
        font-size: 12px;
        color: rgba(255,255,255,0.7);
        background: rgba(255,255,255,0.08);
        border-radius: 50px;
        background-repeat: no-repeat !important;
        background-position: 10px center !important;
    }
    .mode-section .mode-button-box ul li.active button {
        font-weight: 600;
        color: var(--background-color);
        background: #fff;
    }
    .mode-section .mode-button-box ul li button[data-mode='emotional'] { background-image: url(../img/content/mode-ico1.png); }
    .mode-section .mode-button-box ul li button[data-mode='romantic'] { background-image: url(../img/content/mode-ico2.png); }
    .mode-section .mode-button-box ul li button[data-mode='logical'] { background-image: url(../img/content/mode-ico3.png); }
    .mode-section .mode-button-box ul li button[data-mode='dark'] { background-image: url(../img/content/mode-ico4.png); }
    .mode-section .mode-button-box ul li.active button[data-mode='emotional'] { background-image: url(../img/content/mode-ico1-active.png); }
    .mode-section .mode-button-box ul li.active button[data-mode='romantic'] { background-image: url(../img/content/mode-ico2-active.png); }
    .mode-section .mode-button-box ul li.active button[data-mode='logical'] { background-image: url(../img/content/mode-ico3-active.png); }
    .mode-section .mode-button-box ul li.active button[data-mode='dark'] { background-image: url(../img/content/mode-ico4-active.png); }
    .mode-section .chat-example .chat {
        min-height: 43px;
    }

    /***** 캐릭터별 음성 소개 *****/
    .voice-section { padding-bottom: 150px; }
    .voice-section .voice-char-button-box {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 30px;
    }
    .voice-section .voice-char-button-box li {
        width: calc(100% / 2 - 6px);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 50px;
    }
    .voice-section .voice-char-button-box li button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px;
        font-size: 11px;
    }
    .voice-section .voice-char-button-box li.active {
        font-weight: 700;
        color: var(--background-color);
        background: #fff;
    }
    .voice-section .voice-char-button-box li button img {
        width: 25px;
        height: 25px;
        border-radius: 100%;
    }
    .voice-example-chat .bot-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
        padding-bottom: 17px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .voice-example-chat .bot-info .profile {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .voice-example-chat .bot-info .profile p {
        font-weight: 600;
        font-size: 13px;
    }
    .voice-example-chat .bot-info .profile .img {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        overflow: hidden;
    }
    .voice-example-chat .bot-info .profile .img img {
        width: 100%;
    }
    .voice-example-chat .chat-example .chat {
        display: flex;
        gap: 15px;
    }
    .voice-example-chat .chat-example .chat .img {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 100%;
    }
    .voice-example-chat .chat-example .chat .img img {
        width: 100%;
    }

    /***** 슈퍼캐릭터 *****/
    .char-section {
        padding-bottom: 150px;
    }
    .char-section .store-img {
        display: block;
        max-width: 376px;
        width: 100%;
        margin: 0 auto 50px;
    }
    .char-section .cont {
        display: flex;
        gap: 20px;
    }
    .char-section .sm-list {
       flex: 1 1 63%;
    }
    .char-section .sm-list .char-box {
        margin-bottom: 20px;
    }
    .char-section .sm-list .char-box:last-child {
        margin-bottom: 0;
    }
    .char-section .char-box.super {
        width: 100%;
    }
    .char-section .char-box {
        position: relative;
    }
    .char-section .char-box > p {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 25px 0;
        font-size: 12px;
        text-align: center;
    }
    .char-section .char-box img {
        width: 100%;
    }
    .char-section .char-box.super .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 45px 25px;
    }
    .char-section .char-box.super .text > strong {
        display: block;
        margin-bottom: 10px;
        font-family: 'Anta';
        font-size: 24px;
        background: linear-gradient(to right, var(--main-color), var(--blue-color));
        color: transparent;
        -webkit-background-clip: text;
    }
    .char-section .char-box.super .text > p {
        padding: 0;
        line-height: 18px;
        font-size: 12px;
        opacity: 0.8;
    }
}
@media only screen and (max-width: 610px) {
    .char-section .store-img {
        margin-bottom: 30px;
    }
    .char-section .cont {
        display: block;
    }
    .char-section .sm-list {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    .char-section .sm-list .char-box {
        flex: 1;
        margin-bottom: 0;
    }
    .char-section .char-box p {
        padding: 4.918vw 0;
    }
    .char-section .char-box.super .text {
        padding: 20.164vw 25px;
    }
}
@media only screen and (max-width: 462px) {
    .char-section .char-box.super .text {
        padding: 14.719vw 25px;
    }
}
@media only screen and (max-width: 410px) {
    .char-section .sm-list {
        gap: 10px;
        margin-bottom: 10px;
    }
    .char-section .char-box p {
        padding: 5.366vw 0;
        font-size: 10px;
    }
    .char-section .char-box.super .text {
        padding: 12.195vw 25px;
    }
}
@media only screen and (max-width: 380px) {
    .char-section .char-box.super .text {
        padding: 20px 25px 10.526vw 25px;
    }
    .char-section .char-box.super .text > strong {
        font-size: 6.316vw;
    }
    .char-section .char-box.super .text > p {
        font-size: 3.158vw;
    }
}










/****************** 감정 기반 음성 응답 섹션 ******************/
.voice-bg-section {
    width: 100%;
}
.voice-bg-section .inner2 {
    display: flex;
    align-items: flex-end;
    gap: 50px;
    padding: 0 30px;
}
.voice-bg-section .inner2 .mobile {
    display: flex;
    align-items: flex-end;
    gap: 50px;
    width: 100%;
}
.voice-bg-section .voice-ex-phone {
    width: 415px;
    height: 630px;
    background: url(../img/content/voice-phone-img.png)center center no-repeat;
}
.ex-phone-screen .bot-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    padding: 70px 42px 0;
}
.ex-phone-screen .bot-info .lf {
    display: flex;
    align-items: center;
    gap: 9px;
}
.ex-phone-screen .bot-info .profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ex-phone-screen .bot-info .profile .img {
    width: 27px;
    height: 27px;
    border-radius: 100%;
    overflow: hidden;
}
.ex-phone-screen .bot-info .profile .img img {
    width: 100%;
}
.ex-phone-screen .chat-example {
    padding-left: 42px;
}
.ex-phone-screen .chat-example .chat {
    display: flex;
    gap: 15px;
}
.ex-phone-screen .chat-example .chat .img {
    flex-shrink: 0;
    width: 47px;
    height: 47px;
    border-radius: 100%;
    overflow: hidden;
}
.ex-phone-screen .chat-example .chat .img img {
    width: 100%;
}
.chat-example .chat button.voice-play-button {
    display: flex;
    align-items: center;
    height: 35px;
    margin-top: 12px;
    padding: 0 14px 0 8px;
    font-weight: 700;
    color: var(--black2);
    background: #fff;
    border-radius: 50px;
}
.chat-example .chat button.voice-play-button img {
    width: 41px;
}
.voice-bg-section .right {
    width: 100%;
}
.voice-bg-section .right .char-voice-btn {
    margin-top: 105px;
}

.char-voice-btn {
    display: flex;
    gap: 20px;
}
.char-voice-btn button {
    flex: 1;
}
.char-voice-btn button .img {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover !important;
    border-radius: 30px;
    filter: grayscale(1);
}
.char-voice-btn button.active .img {
    filter: grayscale(0);
}
.char-voice-btn button .img .ico {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.66667 11.3334C8.66667 13.1744 7.17428 14.6668 5.33333 14.6668C3.49238 14.6668 2 13.1744 2 11.3334C2 9.49249 3.49238 8.00011 5.33333 8.00011C7.17428 8.00011 8.66667 9.49249 8.66667 11.3334ZM8.66667 11.3334V2.66677C8.66667 1.93039 9.27289 1.31634 9.98651 1.49801C12.2937 2.08536 14 4.1768 14 6.66677C14 8.01937 13.4965 9.25436 12.6667 10.1945' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.5);
}
.char-voice-btn button > strong {
    display: block;
    margin-top: 15px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    text-align: center;
}
@media only screen and (max-width: 1199px) {
    .voice-bg-section .voice-ex-phone {
        width: 340px;
        height: 521px;
        background-size: cover;
    }
    .char-voice-btn button .img {
        border-radius: 10px;
    }
}
@media only screen and (max-width: 1023px) {
    .voice-bg-section {
        padding-bottom: 100px;
    }
    .voice-bg-section .inner2 {
        max-width: 700px;
        flex-wrap: wrap;
        gap: 0;
    }
    .voice-bg-section .inner2 > div {
        width: 100%;
    }
    .voice-bg-section .inner2 .mobile {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 0;
    }
    .voice-bg-section .inner2 .mobile > div {
        width: 100%;
    }
    .voice-bg-section .left {
        margin-top: 50px;
    }
    .voice-bg-section .right {
        flex-shrink: 0;
        width: 330px;
    }
    .voice-bg-section .voice-ex-phone {
        width: 350px;
        height: 537px;
        margin: 0 auto;
        background-size: contain;
    }
    .voice-bg-section .right .char-voice-btn {
        flex-wrap: nowrap;
        margin-top: 0;
    }
    .char-voice-btn button .img {
        border-radius: 10px;
    }
    .chat-example .chat button.voice-play-button {
        height: 31px;
        font-size: 14px;
    }
    .chat-example .chat button.voice-play-button img {
        width: 26px;
    }
}
@media only screen and (max-width: 767px) {
    .voice-bg-section .left {
        margin-top: 30px;
    }
    .char-voice-btn button > strong {
        font-size: 13px;
    }
}
@media only screen and (max-width: 520px) {
    .voice-bg-section .right .char-voice-btn {
        flex-wrap: wrap;
    }
    .char-voice-btn button {
        flex: 1 1 46%;
    }
    
    .voice-bg-section .voice-ex-phone {
        width: 270px;
        height: 408px;
    }
    .ex-phone-screen .bot-info {
        margin-bottom: 30px;
        padding: 45px 30px 0;   
    }
    .ex-phone-screen .bot-info .profile p {
        font-size: 13px;
    }
    .ex-phone-screen .chat-example {
        padding-left: 33px;
    }
    .ex-phone-screen .chat-example .chat .img {
        width: 27px;
        height: 27px;
    }
}
/****************** 기능성 챗봇 섹션 ******************/
.function-section {
    width: 100%;
}
/*** 콘텐츠 영역 ***/
.phone-frame-wrapper {
    width: 1140px; 
    margin: 0 auto;
    transform-origin: top center;
    display: block;
}
.phone-frame {
    position: relative;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}
.phone-frame.mobile {
    display: none;
}
.phone-frame .bubble-box {
    position: absolute;
    top: 130px;
    left: 50%;
    display: flex;
    gap: 355px;
    width: 100%;
    z-index: 2;
    transform: translateX(-50%);
}
.phone-frame .bubble-box .bubble {
    position: relative;
    margin-bottom: 40px;
}
.phone-frame .bubble-box .bubble:last-child {
    margin-bottom: 0;
}
.phone-frame .bubble-box .bubble p {
    position: absolute;
    top: 0;
    height: 55px;
    line-height: 55px;
    padding: 0 34px;
}

.phone-frame .bubble-box .bubble1 {
    margin-left: 67px;
}
.phone-frame .bubble-box .bubble3 {
    margin-left: 57px;
}
.phone-frame .bubble-box .left {
    padding-top: 60px;
}
.phone-frame .bubble-box .left .bubble p {
    left: 3px;
}
.phone-frame .bubble-box .right .bubble p {
    right: 3px;
}
.phone-frame > img {
    position: relative;
    display: block;
    margin: 0 auto;
    z-index: 1;
}

.phone-frame .super-char {
    position: absolute;
    bottom: 0;
    right: -4.25vw;
    display: flex;
    z-index: 3;
}
.phone-frame .super-char .char {
    margin-top: 175px;
}
.phone-frame .super-char .info {
    position: relative;
    margin-left: -50px;
    margin-bottom: 175px;
}
.phone-frame .super-char .info .text {
    position: absolute;
    top: 0; 
    right: 0;
    width: 340px;
    padding: 42px 40px;
}
.phone-frame .super-char .info .text strong {
    display: block;
    margin-bottom: 10px;
    font-family: 'Anta';
    font-size: 24px;
    background: linear-gradient(to right, var(--main-color), var(--blue-color));
    color: transparent;
    -webkit-background-clip: text;
}
.phone-frame .super-char .info .text p {
    line-height: 20px;
    font-size: 14px;
    opacity: 0.8;
}
@media only screen and (max-width: 1360px) {
    :root {
        --scale-ratio: calc(100vw / 1360);
    }
    .phone-frame-wrapper {
        transform: scale(var(--scale-ratio));
    }
    .phone-frame .super-char {
        right: 290px;
    }
    .phone-frame .super-char .info {
        position: absolute;
        bottom: 0;
        right: -165px;
        margin-left: 0;
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 1023px) {
    .function-section {
        padding-bottom: 100px;
    }
    .phone-frame {
        display: flex;
        max-width: 700px;
    }
    .phone-frame > img {
        width: 300px;
        margin: 0;
    }
    .phone-frame .bubble-box {
        width: auto;
        top: 30px;
        left: 290px;
    }
    .phone-frame .bubble-box .left {
        display: none;
    }
    .phone-frame .super-char {
        right: 0;
    }
    .phone-frame .super-char .char img {
        width: 190px;
    }
    .phone-frame .super-char .info .text {
        width: 310px;
        padding: 35px 42px;
    }
    .phone-frame .super-char .info .text strong {
        font-size: 20px;
    }
    .phone-frame .super-char .info .text p {
        line-height: 18px;
        font-size: 12px;
    }
    .phone-frame .super-char .info img {
        width: 360px;
    }
}
@media only screen and (max-width: 767px) {
    .phone-frame {
        display: none;
    }
    .phone-frame.mobile {
        display: block;
    }
    .phone-frame .bubble-box {
        position: relative;
        top: inherit;
        left: inherit;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 500px;
        margin: 0 auto 30px;
    }
    .phone-frame .bubble-box p {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% / 2 - 10px);
        height: 55px;
        font-size: 14px;
        border: 1px solid #fff;
    }
    .phone-frame .bubble-box p::after,
    .phone-frame .bubble-box p::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: url(../img/content/bubble-right-bottom.png);
    }
    .phone-frame .bubble-box p::after {
        bottom: -1px;
        right: -1px;
    }
    .phone-frame .bubble-box p::before {
        top: -1px;
        left: -1px;
        transform: rotate(180deg);
    }
    .phone-frame > .img {
        position: relative;
        text-align: center;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .phone-frame > .img .super-char-img {
        width: 180px;
        margin-left: -90px;
    }
    .phone-frame > .img img.phone {
        width: 280px;
    }
    .phone-frame .super-char {
        position: relative;
        justify-content: center;
        margin-top: 30px;
    }
    .phone-frame .super-char .info {
        margin: 0;
    }
    .phone-frame .super-char .info img {
        width: 310px;
    }
}
@media only screen and (max-width: 560px) {
    .phone-frame .bubble-box {
        width: 100%;
    }
    .phone-frame .bubble-box p {
        width: 100%;
    }
    .phone-frame > .img img.phone {
        width: 220px;
    }
    .phone-frame > .img .super-char-img {
        width: 145px;
    }
}

/****************** 수익창출 ******************/
.revenue-section {
    padding: 200px 0;
}
.revenue-content-box .top {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.revenue-content-box .top .content-desc-box {
    padding-top: 80px;
}
.revenue-content-box .bottom {
    display: flex;
    gap: 40px;
    margin-top: -250px;
    padding-left: 390px;
}
.revenue-content-box .bottom .alarm-list {
    position: relative;
    width: 22.917vw;
    flex-shrink: 0;
}
.revenue-content-box .bottom .alarm-list:before {
    content: "";
    position: absolute;
    top: -66px;
    left: -65px;
    width: 301px;
    height: 67px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='302' height='68' viewBox='0 0 302 68' fill='none'%3E%3Cpath d='M0 1H281C292.046 1 301 9.9543 301 21V67.5' stroke='white' stroke-dasharray='6 6'/%3E%3C/svg%3E");
}
.revenue-content-box .bottom .alarm-list .alarm {
    width: 22.396vw;
    margin-bottom: 15px;
    padding: 1.042vw 1.25vw;
    background: var(--wh-color);
    border-radius: 10px;
}
.revenue-content-box .bottom .alarm-list .alarm:last-child {
    margin-bottom: 0;
}
.revenue-content-box .bottom .alarm-list .alarm:nth-child(2) {
    margin-left: 20px;
}
.revenue-content-box .bottom .alarm-list .alarm .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.revenue-content-box .bottom .alarm-list .alarm .top .oboa-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black4);
}
.revenue-content-box .bottom .alarm-list .alarm .top p {
    color: var(--black6);
}
.revenue-content-box .bottom .alarm-list .alarm > strong {
    font-weight: 500;
    font-size: 0.99vw;
    color: var(--black4);
}
.revenue-content-box .bottom .alarm-list .alarm > p {
    margin-top: 0.417vw;
    font-size: 0.729vw;
    color: var(--black6);
}
@media only screen and (max-width: 1023px) {
    .revenue-section {
        padding: 100px 0;
    }
    .revenue-content-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .revenue-content-box .top {
        gap: 20px;
    }
    .revenue-content-box .top .phone-img img {
        width: 240px;
    }
    .revenue-content-box .top .content-desc-box {
        padding-top: 100px;
    }
    .revenue-content-box .bottom {
        flex-direction: row-reverse;
        gap: 20px;
        margin-top: 0;
        padding-left: 0;
    }
    .revenue-content-box .bottom .alarm-list {
        width: 340px;
    }
    .revenue-content-box .bottom .alarm-list:before {
        left: -100px;
    }
    .revenue-content-box .bottom .alarm-list .alarm {
        width: 320px;
        padding: 12px 15px;
    }
    .revenue-content-box .bottom .alarm-list .alarm > strong {
        font-size: 14px;
    }
    .revenue-content-box .bottom .alarm-list .alarm > p {
        margin-top: 8px;
        font-size: 11px;
    }
    .revenue-content-box .bottom .alarm-list .alarm .top {
        margin-bottom: 11px;
    }
    .revenue-content-box .bottom .alarm-list .alarm .top p {
        font-size: 13px;
    }
    .revenue-content-box .bottom .alarm-list .alarm .top .oboa-badge {
        gap: 6px;
        font-size: 12px;
    }
    .revenue-content-box .bottom .content-desc-box {
        flex-direction: row-reverse;
    }
    .revenue-content-box .bottom .content-desc-box .arr {
        background: linear-gradient(-90deg, rgba(231,71,89,0), var(--main-color))
    }
    .revenue-content-box .bottom .content-desc-box .arr:after {
        right: inherit;
        left: 0;
    }
    .revenue-content-box .bottom .content-desc-box .point-desc {
        line-height: 19px;
        font-size: 13px;
    }
    .revenue-content-box .bottom .content-desc-box .point-desc {
        gap: 13px;
        margin-top: 13px;
        padding: 15px 20px;
        border-radius: 10px;
    }
    .revenue-content-box .bottom .content-desc-box .point-desc img {
        width: 32px;
    }
}
@media only screen and (max-width: 767px) {
    .revenue-section {
        padding: 100px 30px;
    }
    .revenue-content-box .content-desc-box .ico {
        display: block;
        text-align: center;
    }
    .revenue-content-box .content-desc-box strong,
    .revenue-content-box .content-desc-box .text p {
        text-align: center;
    }
    .revenue-content-box .top,
    .revenue-content-box .bottom {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
    }
    .revenue-content-box .top .content-desc-box {
        width: 100%;
        justify-content: center;
        padding-top: 40px;
    }
    .revenue-content-box .content-desc-box .arr {
        display: none;
    }
    .revenue-content-box .top .phone-img img {
        width: 300px;
    }
    .revenue-content-box .bottom .alarm-list {
        width: auto;
        padding-top: 60px;
    }
    .revenue-content-box .bottom .alarm-list:before {
        top: 10px;
        left: 50%;
        width: 1px;
        height: 50px;
        border-left: 1px dashed #fff;
        transform: translateX(-50%);
        background: none;
    }
    .revenue-content-box .bottom .alarm-list .alarm {
        width: 100%;
    }
    .revenue-content-box .bottom .alarm-list .alarm:nth-child(2) {
        margin-left: 0;
    }
    .revenue-content-box .bottom .content-desc-box {
        width: 100%;
        justify-content: center;
        margin-top: 40px;
    }
}




/****************** 기존 챗앱과의 차이점 ******************/
.diffe-section {
    padding-bottom: 200px;
}
.diffe-table.mobile {
    display: none;
}
.diffe-section .section-title-box2 {
    margin-bottom: 60px;
}
.diffe-table .diffe-thead {
    display: flex;
    align-items: center;
    gap: 15px;
}
.diffe-table .diffe-thead > span {
    flex-shrink: 0;
    padding: 0 17px;
    font-size: 13px;
}
.diffe-table .diffe-type-head {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 24px 0;
    border-radius: 14px;
    background: #232332;
}
.diffe-table .diffe-type-head li {
    flex: 1;
    text-align: center;
}

.diffe-table .diffe-tbody {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.diffe-table .chat-type {
    padding: 25px 20px;
    border-radius: 14px;
    background: #232332;
}
.diffe-table .chat-type .box {
    line-height: 17px;
    margin-bottom: 30px;
    font-size: 13px;
    text-align: center;
}
.diffe-table .chat-type .box:last-child {
    margin-bottom: 0;
}
.diffe-table .chat-type .box .ico {
    width: 34px;
    height: 34px;
    margin-bottom: 7px;
    border-radius: 10px;
}
.diffe-table .chat-type .box.normal .ico {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18" fill="none"><path d="M15 12.75C14.854 12.7503 14.7124 12.6994 14.6 12.6063L11.775 10.25H10.625C9.29892 10.25 8.02715 9.72322 7.08947 8.78553C6.15178 7.84785 5.625 6.57608 5.625 5.25C5.625 3.92392 6.15178 2.65215 7.08947 1.71447C8.02715 0.776784 9.29892 0.25 10.625 0.25H14.375C15.5895 0.253468 16.7611 0.698838 17.6713 1.50295C18.5814 2.30706 19.1678 3.41494 19.3208 4.61972C19.4739 5.8245 19.1833 7.04382 18.5032 8.04999C17.8231 9.05617 16.8 9.78042 15.625 10.0875V12.125C15.6253 12.2445 15.5913 12.3617 15.5271 12.4625C15.4628 12.5633 15.371 12.6435 15.2625 12.6938C15.1801 12.7313 15.0905 12.7505 15 12.75ZM10.625 1.5C9.63044 1.5 8.67661 1.89509 7.97335 2.59835C7.27009 3.30161 6.875 4.25544 6.875 5.25C6.875 6.24456 7.27009 7.19839 7.97335 7.90165C8.67661 8.60491 9.63044 9 10.625 9H12C12.146 8.99971 12.2876 9.05057 12.4 9.14375L14.375 10.7875V9.575C14.3735 9.42334 14.4272 9.27632 14.5261 9.16132C14.625 9.04633 14.7623 8.97123 14.9125 8.95C15.8361 8.79863 16.6698 8.30735 17.2496 7.57267C17.8295 6.83799 18.1137 5.91303 18.0463 4.97951C17.979 4.04599 17.565 3.1714 16.8856 2.52757C16.2063 1.88374 15.3108 1.51721 14.375 1.5H10.625Z" fill="%23464646"/><path d="M13.125 4.625H11.875V5.875H13.125V4.625Z" fill="%23464646"/><path d="M10 4.625H8.75V5.875H10V4.625Z" fill="%23464646"/><path d="M16.25 4.625H15V5.875H16.25V4.625Z" fill="%23464646"/><path d="M5.00188 17.7502C4.91133 17.7507 4.82177 17.7315 4.73938 17.694C4.63089 17.6437 4.53907 17.5635 4.47482 17.4627C4.41057 17.3619 4.37658 17.2447 4.37688 17.1252V15.0877C3.38242 14.8228 2.49394 14.2574 1.8327 13.4688C1.17146 12.6802 0.769674 11.7068 0.682172 10.6813C0.59467 9.65593 0.825717 8.6285 1.34378 7.73926C1.86185 6.85002 2.64169 6.1423 3.57687 5.7127C3.65236 5.67292 3.73518 5.64902 3.82025 5.64247C3.90532 5.63592 3.99083 5.64685 4.07152 5.6746C4.1522 5.70235 4.22635 5.74632 4.28939 5.80381C4.35243 5.86131 4.40304 5.9311 4.43809 6.00889C4.47313 6.08668 4.49188 6.17082 4.49318 6.25613C4.49448 6.34144 4.47829 6.42612 4.44562 6.50494C4.41295 6.58375 4.36449 6.65505 4.30322 6.71443C4.24196 6.77381 4.16918 6.82002 4.08938 6.8502C3.35183 7.18461 2.74235 7.74879 2.35209 8.45837C1.96183 9.16794 1.81176 9.98479 1.92431 10.7867C2.03687 11.5887 2.406 12.3327 2.97652 12.9074C3.54703 13.4821 4.28827 13.8567 5.08938 13.9752C5.23955 13.9964 5.37688 14.0715 5.47577 14.1865C5.57466 14.3015 5.62837 14.4485 5.62688 14.6002V15.8127L7.60188 14.169C7.71076 14.0667 7.85266 14.0068 8.00188 14.0002H9.37687C9.8774 14.0011 10.3729 13.9008 10.8337 13.7054C11.2945 13.5099 11.711 13.2233 12.0581 12.8627C12.1742 12.7434 12.3328 12.675 12.4993 12.6726C12.5817 12.6715 12.6635 12.6866 12.7401 12.717C12.8167 12.7475 12.8865 12.7927 12.9456 12.8502C13.0047 12.9077 13.0519 12.9762 13.0845 13.0519C13.1171 13.1276 13.1345 13.209 13.1357 13.2914C13.1368 13.3738 13.1218 13.4556 13.0913 13.5322C13.0608 13.6088 13.0156 13.6786 12.9581 13.7377C12.4924 14.2162 11.9356 14.5965 11.3205 14.8563C10.7054 15.116 10.0446 15.25 9.37687 15.2502H8.22688L5.40188 17.6065C5.28943 17.6996 5.14791 17.7505 5.00188 17.7502Z" fill="%23464646"/></svg>')center center no-repeat #B6B6B6;
}
.diffe-table .chat-type .box.oboa {
    font-weight: 700;
    color: var(--main-color);
}
.diffe-table .chat-type .box.oboa .ico {
    background: var(--main-color);
}
.diffe-table .diffe-tbody .rg {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
}
.diffe-table .diffe-tbody .rg .line {
    display: flex;
    flex: 1;
}
.diffe-table .diffe-tbody .rg .line:first-child {
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.diffe-table .diffe-tbody .rg .line > div {
    flex: 1;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-weight: 500;
}
.diffe-table .diffe-tbody .rg .line1 > div {
    color: var(--black7);
}
.diffe-table .diffe-tbody .rg .line2 > div {
    flex-wrap: wrap;
}
.diffe-table .diffe-tbody .rg .line2 > div p {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    color: var(--main-light-color1);
    text-align: center;
}
@media only screen and (max-width: 1023px) {
    .diffe-table {
        display: none;
    }
    .diffe-table.mobile {
        display: block;
        padding: 0 30px;
    }
    .diffe-table.mobile .top {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    .diffe-table.mobile .top > span {
        flex-shrink: 0;
        width: 90px;
        font-size: 13px;
        text-align: center;
    }
    .diffe-table.mobile .top .chat-type {
        display: flex;
        width: 100%;
        padding: 15px 18px;
    }
    .diffe-table.mobile .top .chat-type li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 10px;
        margin-bottom: 0;
    }
    .diffe-table.mobile .top .chat-type li > br {
        display: none;
    }
    .diffe-table.mobile .top .chat-type li .ico {
        margin-bottom: 0;
    }
    .diffe-table.mobile .bottom {
        display: flex;
        gap: 15px;
    }
    .diffe-table.mobile .bottom .diffe-type-head {
        flex-shrink: 0;
        display: block;
        width: 90px;
        padding: 0 10px;
    }
    .diffe-table.mobile .bottom .diffe-type-head li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120px;
        line-height: 19px;
        font-size: 14px;
        word-break: keep-all;
    }
    .diffe-table.mobile .bottom .diffe-tbody {
        width: 100%;
        margin-top: 0;
    }
    .diffe-table.mobile .bottom .diffe-tbody .rg {
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .diffe-table.mobile .bottom .diffe-tbody .rg .line {
        display: block;
        border-bottom: 0;
    }
    .diffe-table.mobile .bottom .diffe-tbody .rg .line1 {
        border-right: 1px dashed rgba(255,255,255,0.1);
    }
    .diffe-table.mobile .bottom .diffe-tbody .rg .line > div {
        height: 120px;
        padding: 0 15px;
    }
    .diffe-table.mobile .bottom .diffe-tbody .rg .line > div,
    .diffe-table.mobile .bottom .diffe-tbody .rg .line > div p {
        word-break: keep-all;
        font-size: 13px;
    }
}
@media only screen and (max-width: 440px) {
    .diffe-table.mobile .top > span {
        width: 70px;
    }
    .diffe-table.mobile .bottom .diffe-type-head {
        width: 70px;
    }
    .diffe-table.mobile .bottom .diffe-tbody .rg .line > div,
    .diffe-table.mobile .bottom .diffe-tbody .rg .line > div p,
    .diffe-table.mobile .bottom .diffe-type-head li {
        font-size: 12px;
    }
}

/****************** Last section ******************/
.last-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(#121212, #20205C)
}
.last-section .inner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.last-section .inner-content .greeting-bubble {
    position: relative;
    padding: 30px 50px;
    font-weight: 700;
    font-size: 30px;
    background: #242232;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    animation: up-down-animation 2s linear infinite;
}
.last-section .inner-content .greeting-bubble::after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 50%;
    width: 33px;
    height: 21px;
    background: url(../img/content/bubble-bottom.png)center center no-repeat;
    transform: translateX(-50%);
}
.last-section .inner-content .img {
    margin-top: 33px;
    text-align: center;
}
.last-section .inner-content .img img {
    animation: up-down-animation 2s linear infinite;
}
@keyframes up-down-animation {
    0% { transform: translateY(0); }
    50% { transform: translateY(15px); }
    100% { transform: translateY(0); }
}
@keyframes up-down-animation2 {
    0% { transform: translateY(0); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

/*** 배경 행성&로켓 ***/
.last-section .background-img .img {
    position: absolute;
}
.last-section .background-img .img1 {
    top: 41vh;
    right: 28vw;
    animation: rotate-animation 20s linear infinite;
}
.last-section .background-img .img2 {
    top: 58vh;
    left: 23vw;
    animation: up-down-animation1 6s linear infinite;
}
@keyframes rotate-animation {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
@keyframes up-down-animation1 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}
/* 반응형 */
@media only screen and (max-width: 1023px) {
    .last-section .inner-content .greeting-bubble {
        widtH: 448px;
        padding: 20px 40px;
        font-size: 20px;
    }
    .last-section .inner-content .img img {
        width: 200px;
    }
    .last-section .background-img .img1 {
        width: 80px;
    }
    .last-section .background-img .img2 {
        width: 120px;
    }
}
@media only screen and (max-width: 767px) {
    .last-section .inner-content .greeting-bubble {
        width: 300px;
        line-height: 24px;
        padding: 17px 25px;
        font-size: 18px;
        text-align: center;
        word-break: keep-all;
    }
    .last-section .background-img .img1 {
        right: 10.43vw;
    }
    .last-section .background-img .img2 {
        left: 9.126vw;
    }
}