.doghug-detailpage .project-detail-head {
    border-bottom: 1px solid rgba(255, 123, 100, 0.25);
}
.doghug-detailpage .project-detail-head h2 {
    color: #FF7B64;
}
.doghug-detailpage .project-detail-head p {
    color: #FF7B64;
}
.doghug-detailpage .img-title-wrap .img-area,
.doghug-detailpage .video-title-wrap .video-area {
    outline: 4px solid rgba(255, 123, 100, 0.8);
    outline-offset: -4px;
}
.doghug-detailpage .video-title-wrap .sub-info-title .box-icon, 
.doghug-detailpage .img-title-wrap .sub-info-title .box-icon {
    background-color: #FF7B64;
}
.doghug-detailpage .video-title-wrap .sub-info-title span ,
.doghug-detailpage .img-title-wrap .sub-info-title span {
    color: #FF7B64;
}
.doghug-detailpage .sub-info-title span {
    color: #FF7B64;
}
.doghug-detailpage .sub-info-title .box-icon {
    background-color: #FF7B64;
}

.doghug-detailpage .visual-section .sub-info-title span {
    color: #100C12;
}
.doghug-detailpage .visual-section .sub-info-title .box-icon {
    background-color: #100C12;
}

.doghug-detailpage .visual-section {
    background-color: #FFE1E7;
    overflow: hidden;
}
.doghug-detailpage .visual-section .project-mainimg {
    position: relative;
}
.doghug-detailpage .visual-section .project-mainimg .bounceball {
    position: absolute;
    left: 20%;
    bottom: 0;
    width: 7vw;
    z-index: 10;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    animation: bounce 1.5s ease-in-out infinite;
}
.doghug-detailpage .visual-section .project-mainimg .bounceball img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.doghug-detailpage .visual-section .project-mainimg .dog-icon {
    position: absolute;
}
.doghug-detailpage .visual-section .project-mainimg .dog-icon img {
    width: 100%;
    object-fit: contain;
}
.doghug-detailpage .visual-section .project-mainimg .dog-icon.dog01 {
    left: 0;
    top: 15%;
    transform: translate(-30%, 0);
    width: 19vw;
}
.doghug-detailpage .visual-section .project-mainimg .dog-icon.dog02 {
    left: 7%;
    bottom: 15%;
    width: 21vw;
}
.doghug-detailpage .visual-section .project-mainimg .dog-icon.dog03 {
    right: 2%;
    bottom: 8%;
    width: 21vw;
    animation: dogBounce 1.2s  infinite;
}
.doghug-detailpage .visual-section .project-mainimg .star-icon {
    position: absolute;
    transform-origin: center center;
    aspect-ratio: 58 / 62;
}

.doghug-detailpage .visual-section .project-mainimg .star-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.doghug-detailpage .visual-section .project-mainimg .star-icon.star01 {
    left: 3%;
    top: 50%;
    width: 4vw;
    animation: star 2s linear infinite;
}
.doghug-detailpage .visual-section .project-mainimg .star-icon.star02 {
    right: 10%;
    top: 52%;
    width: 2.5vw;
    animation: star 2s 300ms linear infinite;
}
.doghug-detailpage .visual-section .project-mainimg .star-icon.star03 {
    right: 5%;
    top: 20%;
    width: 3.5vw;
    animation: star 2s linear infinite;
}
@keyframes bounce {
    /* 바닥에 닿은 순간 — 눌림 */
    0% {
        height: 40%;                /* 납작 */
        border-radius: 40% 40% 5% 5%;
        transform: scaleX(1.2);       /* 좌우로 찌그러짐 */
    }

    /* 공이 위로 올라가는 중 — 복원 중 */
    35% {             /* 이게 bounce height */
        height: 100%;               /* 공 실제 높이 */
        border-radius: 50%;         /* 완전한 공 */
        transform: scaleX(1);       /* 복구 */
    }

    /* 다시 아래로 떨어짐 — 충돌 전까지 그대로 */
    40% {
        height: 100%;
        border-radius: 50%;
        transform: scaleX(1);
    }

    /* 바닥에 닿는 찰나 — 다시 찌그러짐 */
    80% {
        height: 40%;
        border-radius: 40% 40% 5% 5%;
        transform: scaleX(1.2);
    }
    100% {
        height: 40%;
        border-radius: 40% 40% 5% 5%;
        transform: scaleX(1.2);
    }
}

@keyframes dogBounce {
0% {
    transform: translateX(0%) translateY(0px);
}
60% {
    transform: translateX(10px) translateY(0) rotate(-5deg);
}
80% {
    transform: translateX(-10px) translateY(-15px) rotate(5deg);
}
100% {
    transform: translateX(0) translateY(0);
}
}


.doghug-detailpage .overview-section {
    background-color: #FFF2F5;
}
.doghug-detailpage .overview-section .contents-wrap .home-wrap {
    margin-bottom: 100px;
}
.doghug-detailpage .overview-section .contents-wrap .sub-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-right: -6%;
    padding: 16px 0 0 0;
    margin-bottom: 160px;
}
.doghug-detailpage .overview-section .contents-wrap .sub-wrap .inner {
    max-width: 1450px;
    width: 75vw;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap {
    padding: 0 40px;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .wrapper80 {
    display: flex;
    justify-content: space-between;
    gap: 120px;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .m-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap  .m-list .img-list {
    display: flex;
    gap: 60px;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 {
    width: calc(60% - 60px);
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 {
    width: calc(40% - 60px);
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap {
    width: calc(33.33% - 40px);
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 .img-list .img-title-wrap {
    width: calc(50% - 30px);
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap {
    transform: translateX(calc(-100% - 60px));
    z-index: 5;
    transition: transform 0.8s ease-out;
    transition-delay: 0s;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 .img-list .img-title-wrap {
    transform: translateX(calc(-100% - 60px));
    z-index: 5;
    transition: transform 0.8s ease-out;
    transition-delay: 1s;
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap:first-child,
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 .img-list .img-title-wrap:first-child  {
    z-index: 8;
    transform: translateX(0);
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap:nth-child(3) {
    z-index: 4;
    transform: translateX(calc(-200% - 120px));
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap.is-visible:nth-child(3) {
    transform: translateX(0);
}
.doghug-detailpage .overview-section .contents-wrap .m-wrap .sub-info-title.is-visible,
.doghug-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap.is-visible {
    transform: translateX(0);
}


.doghug-detailpage .tone-manner-section {
    background: #fff;
}
.doghug-detailpage .tone-manner-section .contents-wrap ul li.orange {
    width: 50%;
    background: #F36A10;
}
.doghug-detailpage .tone-manner-section .contents-wrap ul li.white {
    background: #fff;
}
.doghug-detailpage .tone-manner-section .contents-wrap ul li.black {
    background: #000;
}


.doghug-detailpage .detailpage-section.program-section {
    position: relative;
}
.doghug-detailpage .detailpage-section.program-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: linear-gradient(0deg, #FFF2F5 0%, #FFF 100%), #FFF;
    content: "";
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap {
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap {
    position: relative;
    display: flex;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(1)::before{
    position: absolute;
    right: 0;
    top: -10%;
    width: 56%;
    transform: translateX(50%);
    transform-origin: center center;
    aspect-ratio: 841 / 1080;
    background: url(../../img/project/doghug/heart01.png) no-repeat center center / contain;
    content: "";
    animation: heartBounce01 2s linear infinite;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(2)::before{
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 60%;
    transform: translateX(-55%);
    transform-origin: center center;
    aspect-ratio: 39 / 41;
    background: url(../../img/project/doghug/heart02.png) no-repeat center center / contain;
    content: "";
    animation: heartBounce02 5s linear infinite 1s;
}
@keyframes heartBounce01 {
    0% { transform:  translateX(50%) rotate(0deg) translateY(0); }
    50% { transform:  translateX(50%) rotate(-2deg) translateY(-50px);} 
    100% { transform:  translateX(50%) rotate(0deg) translateY(0); } 
}
@keyframes heartBounce02 {
    0% { transform:  translateX(-55%) rotate(0deg) translateY(0); }
    50% { transform:  translateX(-55%) rotate(2deg) translateY(50px);} 
    100% { transform:  translateX(-55%) rotate(0deg) translateY(0); } 
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(4)::before{
    position: absolute;
    left: -10%;
    top: 0;
    width: 50%;
    transform-origin: center center;
    aspect-ratio: 777 / 243;
    mix-blend-mode: color-burn;
    isolation: isolate;
    background: url(../../img/project/doghug/logo_bg.png) no-repeat center center / contain;
    content: "";
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(2) {
    justify-content: flex-end;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list {
    display: flex;
    align-items: flex-end;
    gap: 60px;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.pc {
    width: calc(50% - 30px);
    /* max-width: 850px; */
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.mobile {
    width: calc(20% - 30px);
    /* max-width: 330px; */
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(even) .inner {
    align-items: flex-end;
}
.doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(even) .inner .img-list {
    justify-content: flex-end;
}


.doghug-detailpage .detailpage-section.guide-section {
    background-color: #FFF2F5;
}
.doghug-detailpage .detailpage-section.guide-section .contents-wrap {
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.doghug-detailpage .detailpage-section.guide-section .contents-wrap .pc-wrap {
    display: flex;
    gap: 30px;
}
.doghug-detailpage .detailpage-section.guide-section .contents-wrap .pc-wrap .img-title-wrap {
    width: calc(50% - 15px);
}
.doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap {
    display: flex;
    gap: 30px;
}
.doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap .m-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 55px;
}
.doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap .m-list .img-list { 
    display: flex;
    gap: 80px;
}
.doghug-detailpage .f-thumb-section {
    position: relative;
}
.doghug-detailpage .f-thumb-section .star-icon {
    position: absolute;
    aspect-ratio: 93 / 89;
}
.doghug-detailpage .f-thumb-section .star-icon svg ,
.doghug-detailpage .f-thumb-section .heart-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.doghug-detailpage .f-thumb-section .star-icon.star01 {
    left: 10%;
    top: 40%;
    width: 6vw;
    min-width: 50px;
    animation: star 2s linear infinite;
}
.doghug-detailpage .f-thumb-section .star-icon.star02 {
    left: 17%;
    top: 60%;
    width: 4vw;
    min-width: 30px;
    animation: star 2s 300ms linear infinite;
}
.doghug-detailpage .f-thumb-section .star-icon.star03 {
    right: 2%;
    top: 55%;
    width: 5vw;
    min-width: 50px;
    animation: star 2s 400ms linear infinite;
}
.doghug-detailpage .f-thumb-section .heart-icon {
    position: absolute;
    right: 8%;
    top: 67%;
    width: 1.5vw;
    aspect-ratio: 1 / 1;
    animation: heart 2s linear infinite;
}

@keyframes star {
    0% { transform: scale(1); }
    90% { transform: scale(0.1);} 
    100% { transform: scale(1); } 
}
@keyframes heart {
    0% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(-15deg) translateY(5px);} 
    100% { transform: rotate(0deg) translateY(0); } 
}

@media screen and (max-width : 1500px) { 
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .wrapper80 {
        padding: 0;
    }
}

@media screen and (max-width : 1280px) {
    .doghug-detailpage .visual-section .project-info .wrapper80 .info-wrap {
        margin-bottom: 40px;
    }
    .doghug-detailpage .visual-section .project-mainimg .dog-icon.dog03 {
        bottom: 17%;
    }
    .doghug-detailpage .img-title-wrap .img-area,
    .doghug-detailpage .video-title-wrap .video-area {
        outline: 2px solid rgba(255, 123, 100, 0.8);
        outline-offset: -2px;
    }

    .doghug-detailpage .overview-section .contents-wrap .sub-wrap .bg-text {
        left: 20px;
        top: 20px;
    }
    .doghug-detailpage .overview-section .contents-wrap .sub-wrap .inner {
        width: 83vw;
    }

   
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .wrapper80 {
        gap: 60px;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 {
        width: calc(60% - 30px);
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 {
        width: calc(40% - 30px);
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .m-list .img-list {
        gap: 30px;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap {
        width: calc(33.33% - 20px);
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap {
        transform:translateX(calc(-100% - 30px));
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap  .list01 .img-list .img-title-wrap:nth-child(3) {
        transform:translateX(calc(-200% - 60px));
    }
    .doghug-detailpage .detailpage-section.subpage-section .contents-wrap .wrapper80 .inner .img-list {
        gap: 30px;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 .img-list .img-title-wrap {
        width: calc(50% - 15px);
    }
  

    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list {
        width: 100%;
        gap: 30px;
    } 
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.pc {
        width: calc(50% - 15px);
        /* max-width: 850px; */
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.mobile {
        width: calc(20% - 15px);
        /* max-width: 330px; */
    }

    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap .m-list {
        padding: 0 25px;
    }
    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap .m-list .img-list { 
        gap: 40px;
    }
}

@media screen and (max-width : 768px) {
    .doghug-detailpage .img-title-wrap .img-area,
    .doghug-detailpage .video-title-wrap .video-area {
        outline: 1px solid rgba(255, 123, 100, 0.8);
        outline-offset: -1px;
    }
    .doghug-detailpage .visual-section .project-mainimg .dog-icon.dog03 {
        bottom: 10%;
    }

    .doghug-detailpage .overview-section .contents-wrap .home-wrap {
        margin-bottom: 50px;
    }
    .doghug-detailpage .overview-section .contents-wrap .sub-wrap {
        margin-bottom: 80px;
    }
    .doghug-detailpage .overview-section .contents-wrap .sub-wrap .bg-text {
        display: none;
     }
    .doghug-detailpage .overview-section .contents-wrap .sub-wrap .inner {
        width: 100%;
    } 
    .doghug-detailpage .overview-section .contents-wrap .sub-wrap .inner .video-title-wrap.campaign {
        margin-left: 60px;
    }

    .doghug-detailpage .overview-section .contents-wrap .m-wrap {
        padding: 0;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .wrapper80 {
        flex-direction: column; 
        gap: 50px;       
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .m-list {
        padding: 0 15px;
        gap: 12px;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 ,
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 {
        width: 100%;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .m-list .img-list {
        flex-wrap: wrap;
        column-gap: 40px;
        row-gap: 24px;
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap,
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 .img-list .img-title-wrap {
        width: calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap {
        transform: translateX(0);
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap:first-child,
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list02 .img-list .img-title-wrap:first-child  {
        transform: translateX(0);
    }
    .doghug-detailpage .overview-section .contents-wrap .m-wrap .list01 .img-list .img-title-wrap:nth-child(3) {
        transform: translateX(0);
    }


    .doghug-detailpage .detailpage-section.program-section::after {
        display: none;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap {
        gap: 50px;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(1)::before {
        bottom: 30%;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(2)::before {
        bottom: auto;
        top: -10%;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .inner {
        width: 100%;
        gap: 12px;
        align-items: flex-end;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(even) .inner  {
        align-items: flex-start;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list {
        position: relative;
        justify-content: flex-end;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.mobile {
        position: absolute;
        width: 35%;
        right: 0;
        bottom: 0;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.pc{
        width: 100%;
        margin-bottom: 36px;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap .img-list .img-title-wrap.pc .img-area {
        margin: 0 0 0 -10%;
    } 
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(even) .img-list .img-title-wrap.pc .img-area {
        margin: 0 0 0 10%;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(even) .inner .img-list .img-title-wrap.mobile {
        left: 0;
        right: auto;
        z-index: 20;
    }
    .doghug-detailpage .detailpage-section.program-section .contents-wrap .pc-m-wrap:nth-child(4)::before{ 
        display: none;
    }


    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .pc-wrap {
        flex-direction: column;
        gap: 50px;
    }
    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .pc-wrap .img-title-wrap {
        width: 100%;
    }
    .doghug-detailpage .detailpage-section.guide-section .contents-wrap {
        gap: 50px;
    }
    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap {
        flex-direction: column;
        gap: 50px;
    }
    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap .m-list {
        gap: 12px;
    }
    .doghug-detailpage .detailpage-section.guide-section .contents-wrap .m-wrap .m-list .img-list {
        gap: 20px;
    }
}

@media screen and (max-width : 500px) {
    .doghug-detailpage .visual-section .project-mainimg .star-icon.star01 {
        top: 15%;
        width: 10vw;
    }
    .doghug-detailpage .visual-section .project-mainimg .star-icon.star02 {
        top: 22%;
        width: 8vw;
    }
    .doghug-detailpage .visual-section .project-mainimg .star-icon.star03 {
        right: -3%;
        top: 7%;
        width: 12vw;
    }
    .doghug-detailpage .visual-section .project-mainimg .dog-icon.dog01 {
        display: none;
    }
    .doghug-detailpage .visual-section .project-mainimg .dog-icon.dog02 {
        width: 40vw;
        left: -5%;
    }
    .doghug-detailpage .visual-section .project-mainimg .dog-icon.dog03 {
        width: 35vw;
        right: -5%;
        bottom: 22%;
    }
    .doghug-detailpage .visual-section .project-mainimg .bounceball {
        width: 13vw;
    }
    .doghug-detailpage .f-thumb-section .star-icon.star01 {
        left: -5%;
        top: 30%;
        width: 20vw;
        min-width: 55px;
    }
    .doghug-detailpage .f-thumb-section .star-icon.star02 {
        left: 4%;
        top: 48%;
        width: 10vw;
        min-width: 45px;
    }
    .doghug-detailpage .f-thumb-section .star-icon.star03 {
        right: -2%;
        top: 40%;
        width: 15vw;
        min-width: 50px;
    }
    .doghug-detailpage .f-thumb-section .heart-icon {
        top: 63%;
        width: 3vw;
    }
}