.cosdox-detailpage .sub-info-title span {
    color: #24E2EF;
}
.cosdox-detailpage .sub-info-title .box-icon {
    background-color: #24E2EF;
}


.cosdox-detailpage .visual-section {
    position: relative;
    color: #24E2EF;
    width: 100%;
    height: fit-content;
    overflow: hidden;
}
.cosdox-detailpage .visual-section::before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -100;
    width: 100%;
    height: 100%;
    background-color: #F3FFFD;
    content: "";
}
.cosdox-detailpage .visual-section .project-info .wrapper80 .title {
    border-bottom: 1px solid rgba(36, 226, 239, 0.25);
}
.cosdox-detailpage .visual-section .project-info .wrapper80 .info-wrap .info-detail > ul > li .category-list li {
    border: 1px solid #24E2EF;
}
.cosdox-detailpage .visual-section .project-info .wrapper80 .info-wrap .info-detail > ul > li .label-wrap .label-icon {
    background-color: #24E2EF;
}
.cosdox-detailpage .img-title-wrap .img-area,
.cosdox-detailpage .video-title-wrap .video-area {
    outline: 4px solid rgba(36, 226, 239, 0.8);
}
.cosdox-detailpage .video-title-wrap .sub-info-title .box-icon, 
.cosdox-detailpage .img-title-wrap .sub-info-title .box-icon {
    background-color: #24E2EF;
}
.cosdox-detailpage .video-title-wrap .sub-info-title span ,
.cosdox-detailpage .img-title-wrap .sub-info-title span {
    color: #24E2EF;
}
.cosdox-detailpage .visual-section .bubble01,
.cosdox-detailpage .visual-section .bubble02,
.cosdox-detailpage .visual-section .bubble03 {
    position:absolute;
    z-index: -10;
    width:10rem;
    bottom: -20rem;
    aspect-ratio: 1 / 1;
    animation: floatup 15s linear infinite, sideways 4s ease-in-out 1s infinite alternate;
}
.cosdox-detailpage .visual-section .bubble02 {
    width: 15rem;
}
.cosdox-detailpage .visual-section .bubble03 {
    width: 20rem;
}
.cosdox-detailpage .visual-section .bubble01 img,
.cosdox-detailpage .visual-section .bubble02 img,
.cosdox-detailpage .visual-section .bubble03 img {
    width: 100%;
    object-fit: contain;
}
.cosdox-detailpage .visual-section .b1{
    animation-delay: 0s;
    left: 10%;
}
.cosdox-detailpage .visual-section .b2 {
    animation-delay: 2s;
    left: 85%;
}
.cosdox-detailpage .visual-section .b3 {
    animation-delay: 3s;
    left: 50%;
}
.cosdox-detailpage .visual-section .b4 {
    animation-delay: 6s;
    left: 25%;
}
.cosdox-detailpage .visual-section .b5{
    animation-delay: 8s;
    left: 60%;
}
.cosdox-detailpage .visual-section .b6{
    animation-delay: 1s;
    left:40%;
    /* top:50%; */
}
.cosdox-detailpage .visual-section .b7{
    animation-delay: 9s;
    left: 90%;
    /* top:90%; */
}
.cosdox-detailpage .visual-section .b7{
    animation-delay: 7s;
    left: 42%;
    /* top:90%; */
}
.cosdox-detailpage .visual-section .b8{
    animation-delay: 13s;
    left: 32%;
}
.cosdox-detailpage .visual-section .b9{
    animation-delay: 10s;
    left: -5%;
}
.cosdox-detailpage .visual-section .b10{
    animation-delay: 5s;
    left: 95%;
}
.cosdox-detailpage .visual-section .b11{
    animation-delay: 14s;
    left: 57%;
}
.cosdox-detailpage .visual-section .b12{
    animation-delay: 15s;
    left: 47%;
}
@keyframes floatup {
    0% { top: 100%; }           
    100% { top: -20rem; }       
}
@keyframes sideways {
    0% {margin-left: 0em;}
    100%{margin-left: 20em;}
}

.cosdox-detailpage .overview-section {
    background-color: #fff;
}
.cosdox-detailpage .overview-section .contents-wrap .home-wrap .video-title-wrap {
    width: 75vw;
    max-width: 1450px;
    margin: 0 auto;
    padding: 45px 0 100px 0;
}
.cosdox-detailpage .overview-section .contents-wrap .project-wrap {
    display: flex;
    justify-content: flex-end;
    margin-right: -6%;
    padding: 16px 0 100px 0;
}
.cosdox-detailpage .overview-section .contents-wrap .project-wrap .video-title-wrap {
    width: 75vw;
    max-width: 1450px;
} 
.cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .wrapper80 {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list {
    display: flex;
    align-items: flex-end;
    gap: 100px;
}
.cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list .pc-wrap {
    width: calc(57% - 50px);
}
.cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list .m-wrap {
    width: calc(43% - 50px);
    display: flex;
    gap: 80px;
}

.cosdox-detailpage .tone-manner-section {
    background-color: #FBFDFD;
}
.cosdox-detailpage .tone-manner-section .contents-wrap ul li.blue {
    width: 50%;
    background: #8AE4E2;
}
.cosdox-detailpage .tone-manner-section .contents-wrap ul li.white {
    width: 50%;
    background: #fff;
}

.cosdox-detailpage .f-thumb-section .wrapper80 h2 {
    font-size: 40px;
    color: #24E2EF;
}


.cosdox-detailpage .detailpage-section.message-section,
.cosdox-detailpage .detailpage-section.products-section,
.cosdox-detailpage .detailpage-section.productdetail-section{
    background-color: #fff;
}
.cosdox-detailpage .detailpage-section.productdetail-section .contents-wrap {
    padding: 0 80px;
}
.cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner ,
.cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1480px;
    margin: 0 auto;
}
.cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-list ,
.cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-list {
    display: flex;
    align-items: flex-end;
    gap: 50px;
}
.cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc ,
.cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc {
    width: calc(75.8% - 25px);
}
.cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile,
.cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile {
    width: calc(24.2% - 25px);
}



.cosdox-detailpage .detailpage-section.howtoapp-section {
    position: relative;
    padding: 100px 0 0 0;
    background-color: #FBFDFD;
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-list {
    display: flex;
    align-items: flex-end;
    gap: 80px;
    margin-bottom: -30px;
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc {
    position: relative;
    width: calc(74.7% - 40px);
    transform: rotate(-2deg);
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile  {
    position: relative;
    width: calc(25.3% - 40px);
    transform: rotate(2deg);
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap .img-box {
    position: relative;
    width: 100%;
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc .img-box::after {
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    z-index: 10;
    aspect-ratio: 1100 / 619;
    outline: 4px solid rgba(36, 195, 239, 0.8);
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    content: "";
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile .img-box::after {
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    z-index: 10;
    aspect-ratio: 334 / 679;
    outline: 4px solid rgba(36, 195, 239, 0.8);
    border-radius: 20px;
    box-shadow: 0 4.024px 10.061px 0 rgba(0, 0, 0, 0.15);
    content: "";
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap .img-box img {
    border-radius: 20px 20px 0 0;
    width: 100%;
    object-fit: contain;
}
.cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner > .sub-info-title {
    display: none;
}

@media screen and (max-width : 1280px) {
    .cosdox-detailpage .overview-section .contents-wrap .home-wrap .video-title-wrap {
        width: 100%;
    }
    .cosdox-detailpage .overview-section .contents-wrap .project-wrap .video-title-wrap {
        width: 83vw;
    } 
    .cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list .m-wrap {
        gap: 30px;
    }
    
    .cosdox-detailpage .img-title-wrap .img-area,
    .cosdox-detailpage .video-title-wrap .video-area {
        outline: 2px solid rgba(36, 226, 239, 0.8);
    }

    .cosdox-detailpage .detailpage-section.productdetail-section .contents-wrap {
        padding: 0;
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-list ,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-list {
        gap: 30px;
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc ,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc  {
        width: calc(76% - 15px);
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile ,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile {
        width: calc(24% - 15px);
    }

    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-list {
        gap: 40px;
        margin-bottom: -15px;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc {
        width: calc(75.9% - 25px);
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile {
        width: calc(24.1% - 25px);
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc .img-box::after {
        outline: 2px solid rgba(36, 195, 239, 0.8);
        border-radius: 10px;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile .img-box::after {
        outline: 2px solid rgba(36, 195, 239, 0.8);
        border-radius: 10px;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile .img-box img {
        border-radius: 10px 10px 0 0;
    }
}

@media screen and (max-width : 768px) {
    .cosdox-detailpage .visual-section .bubble01,
    .cosdox-detailpage .visual-section .bubble02,
    .cosdox-detailpage .visual-section .bubble03 {
        animation: floatup 30s linear infinite, sideways 4s ease-in-out 1s infinite alternate;
    }
    .cosdox-detailpage .visual-section .b1{
        animation-delay: 0s;
        left: 10%;
    }
    .cosdox-detailpage .visual-section .b2 {
        animation-delay: 5s;
        left: 85%;
    }
    .cosdox-detailpage .visual-section .b3 {
        animation-delay: 26s;
        left: 50%;
    }
    .cosdox-detailpage .visual-section .b4 {
        animation-delay: 9s;
        left: 25%;
    }
    .cosdox-detailpage .visual-section .b5{
        animation-delay: 11s;
        left: 60%;
    }
    .cosdox-detailpage .visual-section .b6{
        animation-delay: 4s;
        left:40%;
        /* top:50%; */
    }
    .cosdox-detailpage .visual-section .b7{
        animation-delay: 12s;
        left: 90%;
        /* top:90%; */
    }
    .cosdox-detailpage .visual-section .b7{
        animation-delay: 10s;
        left: 42%;
        /* top:90%; */
    }
    .cosdox-detailpage .visual-section .b8{
        animation-delay: 16s;
        left: 32%;
    }
    .cosdox-detailpage .visual-section .b9{
        animation-delay: 13s;
        left: -5%;
    }
    .cosdox-detailpage .visual-section .b10{
        animation-delay: 8s;
        left: 95%;
    }
    .cosdox-detailpage .visual-section .b11{
        animation-delay: 17s;
        left: 57%;
    }
    .cosdox-detailpage .visual-section .b12{
        animation-delay: 22s;
        left: 47%;
    }
    @keyframes floatup {
        0% { top: 100%; }           
        100% { top: -20rem; }       
    }
    @keyframes sideways {
        0% {margin-left: 0em;}
        100%{margin-left: 10em;}
    }
    
    .cosdox-detailpage .img-title-wrap .img-area,
    .cosdox-detailpage .video-title-wrap .video-area {
        outline: 1px solid rgba(36, 226, 239, 0.8);
    }
    .cosdox-detailpage .overview-section .contents-wrap .home-wrap .video-title-wrap {
        padding: 0 0 50px 0;
    }
    .cosdox-detailpage .overview-section .contents-wrap .project-wrap {
        padding: 16px 0 50px 0;
    }
    .cosdox-detailpage .overview-section .contents-wrap .project-wrap .video-title-wrap {
        width: 100%;
        margin-left: 60px;
        gap: 12px;
    }
    .cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .wrapper80 {
        gap: 12px;
    }
    .cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list {
        flex-direction: column; 
        gap: 24px;
    }
    .cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list .pc-wrap {
        width: 100%;
    }
    .cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .img-list .m-wrap {
        width: 100%;
        padding: 0 15px;
        gap: 40px;
    }
    .cosdox-detailpage .overview-section .contents-wrap .pc-mobile-wrap .sub-info-title {
        margin: 0 15px;
    }


    .cosdox-detailpage .detailpage-section.message-section .project-detail-head h2 ,
    .cosdox-detailpage .detailpage-section.products-section .project-detail-head h2 {
        font-size: 53px;
    }
    .cosdox-detailpage .detailpage-section.message-section .project-detail-head h2 .m_none {
        display: none;
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner {
        width: 100%;
        align-items: flex-start;
       
        gap: 12px;
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-list,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-list {
        position: relative;
        width: 100%;
        gap: 0;
        align-items: flex-start;
        /* margin-right: -16px; */
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc ,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc {
        width: 100%;
        margin-bottom: 15px;
    }
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc .img-area ,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc .img-area {
        margin: 0 0 0 10%;
    }
    
    .cosdox-detailpage .detailpage-section.message-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile ,
    .cosdox-detailpage .detailpage-section.products-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 30;
        width: 24%;
    }

    .cosdox-detailpage .detailpage-section.productdetail-section {
        padding: 50px 0;
    }

    .cosdox-detailpage .detailpage-section.howtoapp-section::after {
        display: none;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .project-detail-head h2 {
        font-size: 53px;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 {
        padding: 0;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner {
        width: 102%;
        align-items: flex-start;
        gap: 22px;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-list {
        width: 100%;
        gap: 22px;
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc {
        width: calc(75.9% - 11px);
    }
    
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile {
        width: calc(24.1% - 11px);
    }
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.pc .img-box::after,
    .cosdox-detailpage .detailpage-section.howtoapp-section .contents-wrap .wrapper80 .inner .img-title-wrap.mobile .img-box::after {
        outline: 1px solid rgba(36, 226, 239, 0.8);
    }

    @keyframes floatup {
        0% {
          /* 화면 아래에서 시작: 요소를 자신의 높이만큼 아래로 내립니다. */
          transform: translateY(0%); 
        }
        100% {
          /* 화면 위로 사라짐: 요소를 자신의 높이만큼 위로 올립니다. */
          transform: translateY(-500vh); 
        }
    }
}