.outback-detailpage {
    background: #F2FAFF;
}
.outback-detailpage .project-detail-head {
    border-bottom: 1px solid rgba(0, 150, 237, 0.25);
}
.outback-detailpage .project-detail-head h2 {
    color: #0096ED;
}
.outback-detailpage .project-detail-head p {
    color: #0096ED;
}
.outback-detailpage .img-title-wrap .img-area,
.outback-detailpage .video-title-wrap .video-area {
    outline: 4px solid rgba(0, 150, 237, 0.8);
}
.outback-detailpage .video-title-wrap .sub-info-title .box-icon, 
.outback-detailpage .img-title-wrap .sub-info-title .box-icon {
    background-color: #0096ED;
}
.outback-detailpage .sub-info-title span {
    color: #0096ED;
}


.outback-detailpage .visual-section {
    position: relative;
    color: #0096ED;
    overflow: hidden;
}
.outback-detailpage .visual-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -50;
    background: linear-gradient(180deg, #E0F3FF 0%, #C1FAFF 88.57%);
    content: "";
}
.outback-detailpage .visual-section::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -10;
    aspect-ratio: 120 / 13;
    background: url(../../img/project/outback/bg_pc.svg) no-repeat center center / cover;
    content: "";
}
.outback-detailpage .visual-section .project-info .wrapper80 .title {
    border-bottom: 1px solid rgba(0, 150, 237, 0.5);
}
.outback-detailpage .visual-section .project-info .wrapper80 .info-wrap .info-detail > ul > li .category-list li {
    border: 1px solid #0096ED;
}
.outback-detailpage .visual-section .project-info .wrapper80 .info-wrap .info-detail > ul > li .label-wrap .label-icon {
    background-color: #0096ED;
}
.outback-detailpage .visual-section .project-mainimg {
    position: relative;
}
.portfolio-detailpage .visual-section .project-mainimg .sub-title-wrap {
    bottom: 15%;
}
.outback-detailpage .visual-section .project-mainimg .sub-title-wrap span {
    color: #0096ED;
}
.outback-detailpage .visual-section .project-mainimg .sub-title-wrap .box-icon {
    background-color: #0096ED;
}
.outback-detailpage .visual-section .project-mainimg .cloud-icon {
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 10;
    
}
.outback-detailpage .visual-section .project-mainimg .cloud-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.outback-detailpage .visual-section .project-mainimg .cloud-icon.cloud01 {
    aspect-ratio: 434 / 94;
    width: 15vw;
    animation: bob1 3s ease-in-out infinite;
}
.outback-detailpage .visual-section .project-mainimg .cloud-icon.cloud02 {
    top: 0;
    left: auto;
    right: -1%;
    width: 12vw;
    aspect-ratio: 359 / 147;
    animation:  bob2 2.5s ease-in-out infinite;
}
@keyframes bob1 {
    0%   { transform: translateY(0) scale(1.05); }
    50%  { transform: translateY(-10px) scale(1.06); }
    100% { transform: translateY(0) scale(1.05); }
}

@keyframes bob2 {
    0%   { transform: translateY(0) scale(0.95); }
    50%  { transform: translateY(-12px) scale(0.96); }
    100% { transform: translateY(0) scale(0.95); }
}

.outback-detailpage .visual-section .project-mainimg .boat-icon {
    position: absolute;
    left: 2%;
    bottom: 12%;
    width: 5vw;
    max-width: 115px;
    min-width: 30px;
    z-index: -5;
    aspect-ratio: 37 / 68;
    animation: float-slide 40s linear infinite, 
               wave-tilt 3s ease-in-out infinite alternate;
    /* animation-name: float-slide;
    animation-duration: 20s; 
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation: float-slide01 40s linear infinite, 
               wave-tilt 3s ease-in-out infinite alternate; */
}
.outback-detailpage .visual-section .project-mainimg .boat-icon.boat02 {
    left: 70%;
    bottom: 15%;
    animation: float-slide 40s linear -25s infinite, /* -15s: 15초 진행된 상태에서 시작 */
    wave-tilt 3s ease-in-out infinite alternate;
}
.outback-detailpage .visual-section .project-mainimg .boat-icon.boat03 {
    left: 70%;
    bottom: 20%;
    animation: float-slide 40s linear -15s infinite, /* -15s: 15초 진행된 상태에서 시작 */
    wave-tilt 3s ease-in-out infinite alternate;
}
.outback-detailpage .visual-section .project-mainimg .boat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* @keyframes wave-tilt {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); } 
    75% { transform: rotate(3deg); }  
    100% { transform: rotate(0deg); }
} */
/* 
@keyframes float-slide01 {
    0% { left: 2%; }
    100% { left: 102%; } 
}

@keyframes float-slide02 {
    0% { left: 70%; }
    100% { left: 170%; } 
} */
@keyframes float-slide {
    0% { left: -5vw; } 
    100% { left: 105%; } 
}

.outback-detailpage .overview-section {
    padding: 100px 0 0 0;
}
.outback-detailpage .overview-section .contents-wrap {
    padding-top: 40px;
}
.outback-detailpage .overview-section .home-wrap {
    margin-bottom: 116px;
}
.outback-detailpage .overview-section .home-wrap .wrapper230 .inner {
    position: relative;
}
.outback-detailpage .overview-section .home-wrap .wrapper230 .inner .m-wrap { 
    position: absolute;
    right: 0;
    bottom: -140px;
    width: 20%;
    z-index: 15;
}
.outback-detailpage .overview-section .home-wrap .wrapper230 .inner > .sub-info-title {
    display: none;
}
.outback-detailpage .overview-section .home-wrap .wrapper230 .inner .pc-wrap {
    margin-right: 10%;
}

.outback-detailpage .overview-section .home-sub-wrap .wrapper120 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 25px;
}   
.outback-detailpage .overview-section .home-sub-wrap .wrapper120 .pc-m-wrap {
    display: flex;
    align-items: flex-end;
    gap: 100px;
}
.outback-detailpage .overview-section .home-sub-wrap .wrapper120 .pc-m-wrap .img-title-wrap.pc {
    width: calc(60% - 50px);
}
.outback-detailpage .overview-section .home-sub-wrap .wrapper120 .pc-m-wrap .img-title-wrap.pc .img-area {
    aspect-ratio: 988 / 666;
}
.outback-detailpage .overview-section .home-sub-wrap .wrapper120 .pc-m-wrap .m-list-wrap {
    display: flex;
    gap: 80px;
    width: calc(40% - 50px);
}
.outback-detailpage .overview-section .home-sub-wrap .wrapper120 .pc-m-wrap .m-list-wrap .img-title-wrap { 
    width: calc(50% - 40px);
}

.outback-detailpage .tone-manner-section {
    background: linear-gradient(180deg, #FFF 0%, #F1FAFD 21.35%);
}
.outback-detailpage .tone-manner-section .contents-wrap ul li.red {
    width: 50%;
    background-color: #F12908;
}
.outback-detailpage .tone-manner-section .contents-wrap ul li.white {
    background-color: #fff;
}
.outback-detailpage .tone-manner-section .contents-wrap ul li.skyblue {
    background-color: #9DEAF4;
}

.outback-detailpage .detailpage-section.mobile-section {
    background-color: #fff;
    padding: 100px 0 0 0;
}
.outback-detailpage .detailpage-section.mobile-section .project-detail-head {
    margin-bottom: 0;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap {
    padding: 0 140px;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list {
    display: flex;
    align-items: flex-end;
    gap: 50px;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list.m {
    display: none;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area {
    width: calc(25% - 37.5px);
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list.pc .img-area:nth-child(1) {
    aspect-ratio: 334 / 1279;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area:nth-child(1) {
    position: relative;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area:nth-child(1) img {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area:nth-child(1)::after {
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    z-index: 10;
    aspect-ratio: 334 / 679;
    outline: 4px solid #0096ED;
    border-radius: 20px;
    box-shadow: 0 4.024px 10.061px 0 rgba(0, 0, 0, 0.15);
    content: "";
}
.outback-detailpage .detailpage-section.main-section {
    position: relative;
}
.outback-detailpage .detailpage-section.main-section::before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -50;
    width: 100%;
    height: 100%;
    background-color: #F1FAFD;
    content: "";
}
.outback-detailpage .detailpage-section.main-section::after {
    position: absolute;
    left: -2%;
    bottom: 100px;
    width: 40%;
    aspect-ratio: 777 / 243;
    opacity: 0.1;
    background: url(../../img/project/outback/bg_logo.svg) no-repeat center center / contain;
    content: "";
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 100px;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li {
    width: calc(50% - 30px);
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(4) {
    position: relative;
    display: flex;
    padding-top: 4%;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(4) .event-img {
    position: relative;
    z-index: -20;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(4) .event-img::before {
    position: absolute;
    left: calc(-60px - 7%);
    top: 50%;
    z-index: -20;
    transform: translate(0, -50%);
    aspect-ratio: 49 / 124;
    height: 120%;
    background: url(../../img/project/outback/polygon_bg.png) no-repeat center center / contain;
    content: "";
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li .event-img {
    width: 100%;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li .event-img img {
    width: 100%;
    object-fit: contain;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(5) {
    position: relative;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li .fish_icon {
    position: absolute;
    right: 8%;
    top: 50%;
    z-index: -5;
    width: 15%;
    rotate: 119 / 45;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li .fish_icon.fish02 {
    position: absolute;
    right: -10%;
    top: 30%;
}
.outback-detailpage .detailpage-section.main-section .contents-wrap ul li .fish_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.outback-detailpage .f-thumb-section .wrapper80 h2 {
    font-size: 40px;
    color: #0096ED;
}
@media screen and (max-width : 1280px) {
    .portfolio-detailpage .visual-section .project-mainimg .sub-title-wrap {
        bottom: 10%;
    }
    .outback-detailpage .visual-section .project-info .wrapper80 .info-wrap {
        margin-bottom: 50px;
    }
    .outback-detailpage .img-title-wrap .img-area,
    .outback-detailpage .video-title-wrap .video-area {
        outline: 2px solid rgba(0, 150, 237, 0.8);
    } 

    .outback-detailpage .detailpage-section.mobile-section .contents-wrap {
        padding: 0 30px;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area:nth-child(1)::after {
        border-radius: 10px;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area:nth-child(1) img {
        border-radius: 10px 10px 0 0;
    }

    .outback-detailpage .detailpage-section.main-section::after {
        display: none;
    }
    .outback-detailpage .detailpage-section.main-section .contents-wrap ul li .fish_icon  {
        display: none;
    }
    .outback-detailpage .detailpage-section.main-section .contents-wrap ul {
        flex-direction: column;
        gap: 60px;
    }
    .outback-detailpage .detailpage-section.main-section .contents-wrap ul li {
        width: 100%;
    }
    .outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(4) {
        padding-top: 0;
        margin-top: -40px;
    }
    .outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(5) {
        display: none;
    }
    .outback-detailpage .detailpage-section.main-section .contents-wrap ul li:nth-child(4) .event-img::before {
        left: 50%;
        top: -20px;
        width: 150%;
        height: 150%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@media screen and (max-width : 768px) {
    .outback-detailpage .img-title-wrap .img-area,
    .outback-detailpage .video-title-wrap .video-area {
        outline: 1px solid rgba(0, 150, 237, 0.8);
    } 
    .portfolio-detailpage .visual-section .project-mainimg img.pc-img {
        display: none;
    }
    .portfolio-detailpage .visual-section .project-mainimg img.m-img {
        display: block;
    }
    .outback-detailpage .visual-section .project-mainimg .cloud-icon {
        top: 10%;
        
    }
    .outback-detailpage .visual-section .project-mainimg .cloud-icon.cloud01 {
        width: 30vw;
    }
    .outback-detailpage .visual-section .project-mainimg .cloud-icon.cloud02 {
        top: 5%;
        width: 32vw;
    }
    .outback-detailpage .visual-section::after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: -10;
        aspect-ratio: 390 / 253;
        background: url(../../img/project/outback/bg_m.svg) no-repeat center center / cover;
        content: "";
    }
    .outback-detailpage .visual-section .project-mainimg .boat-icon {
        z-index: 10;
        bottom: 25%;
    }
    .outback-detailpage .visual-section .project-mainimg .boat-icon.boat02 {
        bottom: 20%;
    }


    .outback-detailpage .overview-section .contents-wrap {
        padding-top: 0;
    }
    .outback-detailpage .overview-section .home-wrap {
        margin-bottom: 0;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 {
        padding: 0;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .pc-wrap {  
        position: absolute;
        left: -15%;
        top: 0;
        width: 100%;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .pc-wrap .video-title-wrap .video-area {
        aspect-ratio: 358 / 198;
    }
     
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .m-wrap { 
        position: relative;
        right: -16px;
        bottom: -2px;
        width: 30%;
        margin-top: calc(2% + 27px);
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .m-wrap .img-title-wrap .img-area {
        border-radius: 10px 10px 0 0 ;
    }
    /* .outback-detailpage .overview-section .home-wrap .wrapper230 .inner > .sub-info-title {
        display: flex;
        position: absolute;
        left: 0;
        transform: translate(0, 100%);
        bottom: 6%;
        width: 60%;
    } */
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner > .sub-info-title span {
        white-space: wrap;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .pc-wrap .sub-info-title {
        position: absolute;
        bottom: -12px;
        transform: translate(0, 100%);
        left: calc(15% + 16px);
        width: 60%;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .pc-wrap .sub-info-title span {
        white-space: wrap;
    }
    .outback-detailpage .overview-section .home-wrap .wrapper230 .inner .pc-wrap {
        margin-left: 0;
    }
    .outback-detailpage .detailpage-section.mobile-section .project-detail-head {
        margin-bottom: 30px;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list.pc {
        display: none;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list.m {
        display: flex;
        align-items: flex-start;
        gap: 30px;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area {
        width: calc(50% - 15px);
        aspect-ratio: 133 / 970;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area img {
        object-fit: cover;
    }
    .outback-detailpage .detailpage-section.mobile-section .contents-wrap .img-list .img-area:nth-child(1)::after {
        outline: 1px solid rgba(0, 150, 237, 0.8);
    }
}