@charset "utf-8";

/*-------------------------------------------------------------------
  파일정의 : main style
  작성날짜 : 2025-08-25 구경희
-------------------------------------------------------------------*/

section {
    min-height: 100vh;
}
section > .inner {
    padding: 16.46vh 0;
}
section > .inner > .title {
    font-size: clamp(40px, 2.083vw, 60px);
    font-weight: 600;
    line-height: 1.4;
    padding-left: 50px;
}

.visual-box {
    border-radius: 30px;
    background: #F6F7F9;
    padding: 46px 50px 50px;
    box-sizing: border-box;
    display: flex;
    gap: 16px;
}
.visual-box > .txt-area {
    display: flex;
    flex-flow: column;
    flex: 1;
}
.visual-box > .txt-area h2.title {
    font-size: clamp(40px, 2.083vw, 60px);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 36px;
}

.visual-box > .txt-area .sub-txt {
    font-size: clamp(16px, 0.833vw, 28px);
    line-height: 1.5;
    color: #4C4E55;
}

.visual-box > .txt-area .btn-area {
    margin-top: auto;
    flex-wrap: wrap;
}

.visual-box .video-area{
    width: 53%;
    flex-shrink: 0;
    min-height: 329px;
}
.visual-box .video-area .video-wrap{
    margin: 0 auto;
    border-radius: 24px;
    height: 100%;
    overflow: hidden;
}
.visual-box .video-area video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.visual-box.sub{
    display: block;
}
.visual-box.sub > .txt-area {
    display: flex;
    flex-flow: unset;
    align-items: flex-end;
    gap: 74px;
}
.visual-box.sub > .txt-area h2.title {
    white-space: nowrap;
    margin-bottom: 0;
}
.visual-box.sub > .txt-area .sub-txt{
    margin-bottom: 10px;
    margin-top: 8px;
}
.visual-box.sub .img-area {
    border-radius: 30px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.visual-box.sub .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.visual-box.sub .content{
    display: flex;
    flex-flow: column;
    gap: 16px;
    margin-top: 54px;
}
.skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.skill-list li {
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    width: calc((100% - 48px)/4);
    box-sizing: border-box;
}
.skill-list li > .inner {
    padding: 0;
    height: 0;
    padding-bottom: 100%;
    max-width: none;
    position: relative;
    width: 100%;
    display: block;
}
.skill-list .large > .inner {
    position: relative;
    padding-bottom: calc((100% - 16px) / 2);
    width: 100%;
}
.skill-list li .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.skill-list li:not(.large, .go-btn) .txt-area {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: #123385;
    opacity: 0;
    transition: 0.3s;
    padding: 2vw 2.29vw;
    box-sizing: border-box;
}
.skill-list li:not(.large, .go-btn) .txt-area .title{
    margin-bottom: 13px;
    font-size: clamp(22px, 1.1458vw, 40px);
    font-weight: 600;
    line-height: 1.5;
}
.skill-list li:not(.large, .go-btn) .txt-area .desc{
    color: #8A8C92;
    font-size: clamp(16px, 0.833vw, 28px);
    font-weight: 500;
    line-height: 1.5;
}
.skill-list li:not(.large, .go-btn) .txt-area .ic{
    position: absolute;
    bottom: 32px;
    right: 34px;
}
.skill-list li:not(.large, .go-btn):hover .txt-area {
    opacity: 1;
}
.skill-list .large {
    background: #FFF;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    width: calc((100% - 16px)/2);
}
.skill-list .large .txt-area {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 13px;
    position: relative;
    padding: 2vw 220px 2vw 2.29vw;
    height: 100%;
}
.skill-list .large .txt-area .sub-txt.gray{
    margin-top: 0;
    color: #8A8C92;
    font-size: clamp(16px, 0.833vw, 28px);
    font-weight: 500;
    line-height: 1.5;

}
.skill-list .large.blue .txt-area .title {
    color: #FFF;
}

.skill-list .large.blue .txt-area .sub-txt {
    color: #D4E0FC;
    word-break: break-all;
}

.skill-list .large .txt-area .title {
    font-size: clamp(22px, 1.1458vw, 40px);
    font-weight: 600;
    line-height: 1.5;
}
.skill-list .large .txt-area .sub-txt {
    font-size: clamp(16px, 0.833vw, 28px);
}
.skill-list .large .img-area{
    width: 166px;
    height: 166px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: auto;
    right: 44px;
    transform: translateY(-50%);
}

.skill-list .large.blue {
    background: #5182FE;
}

.skill-list > .go-btn {
    position: relative;
    width: calc((100% - 48px)/4);
    background: #4C4E55;
}

.skill-list > .go-btn .inner{
    padding: 0;
    height: 0;
    padding-bottom: 100%;
    max-width: none;
}

.skill-list .go-btn .txt-area {
    display: flex;
    flex-flow: column;
    align-items: unset;
    justify-content: center;
    padding: 2vw 2.29vw;
}

.skill-list .go-btn .txt-area .title {
    font-size: clamp(22px, 1.1458vw, 40px);
    font-weight: 600;
    line-height: 1.5;
    color: #FFF;
    margin-bottom: 13px;
}

.skill-list .go-btn .txt-area .sub-txt {
    font-size: clamp(16px, 0.833vw, 28px);
    font-weight: 500;
    line-height: 1.5;
    color: #BFC0C4;
}

.skill-list .go-btn .txt-area .ic {
    position: absolute;
    bottom: 32px;
    right: 34px;
}
/* 최근 제작 포트폴리오 */
.portfolio .inner {
    padding-left: 50px;
    padding-right: 50px;
}
.portfolio .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 54px;
}
.portfolio .sec-head > .title {
    font-size: clamp(40px, 2.083vw, 60px);
    font-weight: 600;
    line-height: 1.4;
}
.portfolio .sec-head > .portfolio-menu {
    display: flex;
    font-size: clamp(22px, 1.1458vw, 40px);
    font-weight: 600;
    color: #DADBDE;
}
.portfolio .sec-head > .portfolio-menu li + li {
    margin-left: 24px;
    padding-left: 24px;
    border-left: 2px solid #F6F7F9;
}
.portfolio .sec-head > .portfolio-menu li.active {
    color: #5182FE;
}
.portfolio-list {
    display: flex;
    box-sizing: border-box;
    gap: 16px;
    flex-wrap: wrap;
}
.portfolio-list > li {
    width: calc((100% - 64px)/5);
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    font-size: 0;
}
.portfolio-list > li a {
    display: inline-block;
    width: 100%;
}

.portfolio-list > li .img-area {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.portfolio-list > li .img-area img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    object-fit: cover;
    object-position: center;
}

.portfolio-list > li .txt-area {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(49,51,57,0) 20%, #313339 100%);
    display: flex;
    flex-flow: column;
    padding: 24px;
    opacity: 0;
    transition: 0.3s;
}
.portfolio-list > li a:hover .txt-area {
    opacity: 1;
}
.portfolio-list > li .txt-area p {
    color: #fff;
    font-size: clamp(18px, 0.938vw, 40px);
    font-weight: 600;
    line-height: 1.5;
    margin-top: auto;
}
.portfolio-list > li .txt-area span {
    color: #8A8C92;
    font-size: clamp(14px, 0.729vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    margin-top: 2px;
}
    /* rolling (이전 버전 복붙)*/
.side-rolling {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 6vh 0;
    position: relative;
}

.side-rolling::after {
    content: '';
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 15.62vw;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 90%);
}

.side-rolling::before {
    content: '';
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: 15.62vw;
    height: 100%;
    background: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 90%);
}

.rolling-list {
    display: flex;
    align-items: center;
    gap: 4.16vw;
    position: relative;
    width: max-content;
}

.rolling-list + .rolling-list {
    margin-top: 3.2vh;
}

.rolling-list:nth-child(odd) {
    animation: sideRolling 20s infinite linear;
}

.rolling-list:nth-child(even) {
    animation: sideRolling 20s infinite linear reverse;
}


.sec-top {
    padding: 18.33vh 0 90px 50px;
    max-width: 57.29vw;
    width: 100%;
    box-sizing: border-box;
}
.sec-top .txt-area {
    position: relative;
}
.sec-top .txt-area .title{
    position: relative;
    padding-right: 110px;
    font-size: clamp(40px, 2.083vw, 60px);
    font-weight: 600;
    line-height: 1.4;
}
.sec-top .navigation {
    display: flex;
    gap: 6px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.sec-top .product-list-wrap {
    margin-top: 53px;
}
.sec-top .product-list .swiper-slide{
    box-sizing: border-box;
    width: calc((100% - 16px * 5) / 4.1) !important;
}
.sec-top .product-list .swiper-slide .img-area {
    border-radius: 30px;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
}
.sec-top .product-list .swiper-slide .img-area img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec-bottom{
    margin: 0 -16px;
    overflow: hidden;
    white-space: nowrap;
    background-color: #4C4E55;
    position: relative;
    width: 100%;
}
.sec-bottom > .title{
    font-size: clamp(40px, 2.083vw, 60px);
    font-weight: 600;
    line-height: 1.4;
    color: #FFF;
    z-index: 10;
    padding: 0 50px;
    max-width: 57.29vw;
    width: 100%;
    position: absolute;
    top: 4.25vh;
    left: 50%;
    transform: translateX(-50%);
}
.sec-bottom .review-list-area {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    gap: 20px;
    padding: 4.25vh 0 8.05vh;
    position: relative;
}
.sec-bottom .review-list-wrap {
    display: flex;
    position: relative;
    gap: 16px;
    overflow: hidden;
}
.sec-bottom .review-list{
    display: flex;
    gap: 16px;
    position: relative;
}
.sec-bottom .review-list-wrap.top {
    max-width: 54.42vw;
    overflow: hidden;
}
.sec-bottom .review-list-wrap.top .review-list {
    animation: rolling 20s infinite linear;
}

.sec-bottom .review-list-wrap.bottom {
    max-width: 78.64vw;
}
.sec-bottom .review-list-wrap.bottom .review-list{
    animation: reverse-rolling 20s infinite linear;
}
.sec-bottom .review-list li{
    padding: 2.8vh 34px;
    border-radius: 14px;
    border: 1px solid #BFC0C4;
    background-color: #FFF;
}
.sec-bottom .review-list .title{
    font-size: clamp(18px, 0.938vw, 40px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    color: #1E1F23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sec-bottom .review-list .user-name{
    font-size: clamp(14px, 0.729vw, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    color: #BFC0C4;
    margin-top: 6px;
    display: block;
}

.sec-bottom .review-list-wrap::after{
    content: '';
    width: 10.41vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: linear-gradient(90deg, #4C4E55 0%, rgba(76, 78, 85, 0.00) 100%);
}
.sec-bottom .review-list-wrap::before{
    content: '';
    width: 10.41vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(270deg, rgba(76, 78, 85, 0.50) 0%, rgba(76, 78, 85, 0.00) 100%);
}

section.qna {

}
section.qna .inner{
    background: transparent;
    flex-flow: column;
    padding: 0 50px;
}
.qna .sec-head{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 54px;
}
.qna .sec-head > .title {
    font-size: clamp(40px, 2.083vw, 60px);
    font-weight: 600;
    line-height: 1.4;
}
.qna-list-wrap{
    border-top: 1px solid #E9EAEE;
    border-bottom: 1px solid #E9EAEE;
}

@media screen and (max-width: 1440px) {
    .inner {
        max-width: 1200px;
        padding: 0 32px;
    }
    section .inner {
        padding: 16.46vh 0;
    }

    .sec-top {
        max-width: 1200px;
    }
    .sec-bottom > .title {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1024px){
    section .inner {
        padding: 0 32px;
    }
    section .inner:has(.visual-box) {
        padding: 54px 32px 0;
    }
    section .inner:has(.visual-box.sub) {
        padding: 0 32px;
    }
    section > .inner > .title,
    section h2.title{
        font-size: 25px;
    }
    section > .inner > .title {
        padding-left: 0;
    }
    .sec-top {
        padding-left: 32px;
    }
    .visual-box{
        padding: 0;
        flex-flow: column;
        align-items: flex-start;
        gap: 20px;
    }

    .visual-box .txt-area{
        flex-flow: column;
        align-items: flex-start;
    }
    .visual-box > .txt-area h2.title {
        font-size: 25px;
        margin-bottom: 0;
    }
    .visual-box .video-area {
        width: 100%;
        min-height: auto;
    }
    .visual-box.sub > .txt-area {
        gap: 14px;
    }
    .visual-box.sub > .txt-area h2.title {
        white-space: wrap;
        font-size: 25px;
    }
    .visual-box .video-area .video-wrap{
        min-height: 0;
    }
    section:has(.visual-box) {
        background: #F6F7F9;
    }
    .visual-box.sub .content{
        margin-top: 20px;
    }
    .visual-box.sub .txt-area{
        flex-flow: column;
        align-items: flex-start;
    }
    .skill-list li:not(.large, .go-btn) .txt-area {
        height: 100%;
        z-index: 100;
        opacity: 1;
        background: none !important;
    }
    .skill-list li:not(.large, .go-btn) .txt-area .title {
        position: absolute;
        bottom: 23px;
        left: 0;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        font-size: 18px;
    }
    .skill-list li:not(.large, .go-btn) .txt-area .ic {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
    }
    .visual-box .txt-area .title{
        flex-shrink: 1;
    }
    .visual-box .txt-area .sub-txt{
        font-size: 14px;
        margin: 14px auto 20px;
    }

    .visual-box.sub .txt-area .sub-txt {
        margin: 0 !important;
    }

    .portfolio .inner {
        padding: 0 32px;
    }
    .portfolio .sec-head {
        gap: 20px;
        margin-bottom: 20px;
    }
    .portfolio .sec-head > .title {
        font-size: 25px;
    }
    .portfolio .sec-head > .portfolio-menu {
        font-size: 16px;
        padding: 10px 32px;
        margin: 0 -32px;
        overflow: auto;
        scrollbar-width: none;

    }
    .portfolio .sec-head > .portfolio-menu li {
        white-space: nowrap;
    }
    .portfolio .sec-head > .portfolio-menu li + li {
        margin-left: 14px;
        padding-left: 14px;
    }
    .portfolio .portfolio-list {
        gap: 8px;
    }
    .portfolio .portfolio-list li{
        width: calc((100% - 8px)/2);
        border-radius: 18px;
    }
    .portfolio-list > li .txt-area {
        opacity: 1;
        padding: 20px 18px;
    }
    .skill-list li{
        border-radius: 18px;
    }
    .skill-list.top{
        display: none;
    }
    .skill-list .large .txt-area{
        padding-right: 0;
    }

    .sec-bottom{
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding: 29px 0 10.75vh;
    }
    .sec-bottom >.title{
        font-size: 25px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding: 0 32px;
        margin-bottom: 34px;
    }

    .sec-bottom .review-list-area {
        display: flex;
        flex-flow: unset;
        position: relative;
        padding: 0;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        gap: 6px;
    }
    .sec-bottom .review-list-area::after {
        content:'';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(76, 78, 85, 0.20) 0%, rgba(76, 78, 85, 0.00) 100%);
    }
    .sec-bottom .review-list-wrap.top .review-list,
    .sec-bottom .review-list-wrap.bottom .review-list {
        animation: none;
    }
    .sec-bottom .review-list-wrap {
        animation: moblie-rolling 30s infinite linear;
    }
    .sec-bottom .review-list-wrap.top::after,
    .sec-bottom .review-list-wrap::before,
    .sec-bottom .review-list-wrap::after{
        display: none;
    }
    .sec-bottom .review-list-wrap{
        overflow: unset !important;
        max-width: none !important;
        display: inline-flex !important;
    }
    .sec-bottom .review-list li {
        padding: 24px 28px;
    }
    .qna .sec-head{
        flex-flow: column;
        gap: 14px;
        margin-bottom: 20px;
    }
    .qna .sec-head > .title {
        font-size: 25px;
    }
    .skill-list li:not(.large, .go-btn) .txt-area .ic {
        position: relative;
    }


    .visual-box .title{
        font-weight: 600;
    }
    .visual-box .img-list .hover:hover .img-area::before {
        opacity: 0 !important;
    }
    .visual-box .img-list .hover:hover .txt-area {
        opacity: 0 !important;
        transform: translateY(10px) !important;
        transition: none;
    }
    .visual-box .img-list .swiper-slide{
        width: 100% !important;
    }
    .visual-box .img-list .img-area{
        width: 100%;
        height: auto;
        border-radius: 24px;
    }
    .visual-box .img-list .img-area img{
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    .visual-box.sub .img-area{
        border-radius: 18px;
    }

    .skill-list{
        flex-wrap: wrap;
        gap: 6px;
    }
    .skill-list li,
    .skill-list > .go-btn{
        width: auto;
        flex: 0 0 calc((100% - 6px) / 2);
    }
    .skill-list .large{
        width: 100%;
        flex: 0 0 100%;
        height: auto;
        border-radius: 18px;
    }
    .skill-list .large > .inner {
        height: auto;
        padding: 0;
    }
    .skill-list .large .txt-area{
        padding: 24px;
        gap: 6px;
    }
    .skill-list .large .txt-area .title{
        font-size: 18px;
    }
    .skill-list .large .sub-txt{
        margin-bottom: 0;
    }
    .skill-list .large .txt-area .sub-txt.gray{
        font-size: 14px;
    }
    .skill-list .go-btn .txt-area{
        padding-top: 24px;
        padding-left: 24px;
    }
    .skill-list .go-btn .txt-area .title{
        font-size: 18px;
    }
    .skill-list .go-btn .txt-area .ic{
        right: 24px;
        bottom: 22px;
    }
    .skill-list.bottom .keyring .img-area::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(49, 51, 57, 0) 20%, #313339 100%);
        z-index: 5;
        border-radius: inherit;
    }
    .skill-list.bottom .keyring .txt-area-mo p{
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        line-height: 150%;
        color: #FFF;
        position: absolute;
        left: 20px;
        bottom: 25px;
        z-index: 30;
    }
    .skill-list.bottom .keyring .txt-area-mo .ic{
        width: 30px;
        height: 30px;
        position: absolute;
        right: 24px;
        bottom: 25px;
        z-index: 30;
    }
    .rolling-list + .rolling-list {
        margin-top: 10px;
    }
    .rolling-list > li img{
        max-width: 25.3vw;
        max-height: 8vh;
    }
    .sec-top .txt-area .title{
        padding-right: 0;
        font-size: 25px;
    }
    .sec-top .navigation{
        position: unset;
        margin-top: 20px;
    }
    .sec-top .product-list-wrap{
        margin-top: 14px;
    }
    .sec-top .product-list .swiper-slide{
        width: calc((100% - 6px * 3) / 2.2) !important;
    }
    .sec-top .product-list .swiper-slide .img-area{
        border-radius: 18px;
    }

    .sec-bottom .review-list .title {
        font-size: 16px;
    }
    .sec-bottom .review-list .user-name {
        font-size: 12px;
        margin-top: 4px;
    }
    .sec-bottom .review-list-wrap{
        gap: 6px;
    }

    .sec-bottom .review-list-wrap .review-list{
        gap: 6px;
    }
    section.qna .inner {
        padding: 0 32px;
    }

    .qna .btn-area button,
    .visual-box .btn-area button,
    .qna .btn-area .btn,
    .visual-box .btn-area .btn{
        justify-content: center;
    }
}


@keyframes sideRolling{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}
@keyframes rolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes reverse-rolling {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes moblie-rolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

/*fade-in*/
.fade-in{
    opacity: 0;
}
.fade-in.visible {
    animation: fade-in 0.8s forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}