@charset "utf-8";

/* 메인 공통 레이아웃 영역 - main */
.main-container {
    & .sec {position: relative;
        & .tit {padding: 0 0 36px;
            & p {font-size: 48px; line-height: 1.2; font-weight: 600;}
            & p strong {font-weight: 600; color: var(--key-blue);}
        }
    }
}

/* 메인 비주얼 영역 - visual */
.visual {height: calc(var(--vh, 1vh) * 80);
    & .visual-swiper {
        & .swiper-slide {position: relative;
            & img {position: absolute; top: 50%; right: 240px; transform: translateY(-50%); width: auto; max-height: 400px; object-fit: contain; -webkit-user-drag: none; user-select: none;}
            &.v01 {background: #84bbec;}
            &.v02 {background: #42e17b;}
            &.v03 {background: #ffc809;}
            &.v04 {background: #fb697e;}
            &.v05 {background: #000;}
            &.v06 {background: #9fe0a8;}
            &.v07 {background: #631ba3;}
            &.v08 {background: #33dac6;}
            &.v09 {background: #6eb2ee;}
            &.v10 {background: #000;}
        }
    }
    & .visual-txt {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; color: var(--basic-white); text-shadow: 0px 0px 8px rgb(0 0 0 / 15%); z-index: 2;
        & p {font-size: 20px;}
        & h2 {font-size: 60px; line-height: 1; margin: 4px 0 24px;}
        & h2 strong {color: var(--key-blue);}
        & span {font-size: 18px;}
    }
}

/* 메인 프로필 영역 - profile */
.profile {padding: var(--main-gap) 0;
    & .inner {display: flex; gap: 60px;}
    & .profile-con {width: 500px;
        & .photo {position: relative; aspect-ratio: 1.5 / 1; overflow: hidden; border-radius: 12px; box-shadow: var(--basic-shadow);
            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            & p {position: absolute; bottom: 24px; left: 0; width: 100%; font-size: 36px; color: rgba(255, 255, 255, 0.5); text-align: center;}
        }
        & .info {padding: 36px 0 0;
            > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
                > li {
                    & p {font-size: 15px; font-weight: 500;}
                    & span {font-size: 14px; color: var(--basic-gray);}
                }
            }
        }
    }
    & .profile-text {display: flex; flex-direction: column; gap: 36px; flex: 1;
        & .say {position: relative; background: var(--key-blue); padding: 36px 120px 36px 36px; border-radius: 12px; box-shadow: var(--basic-shadow);
            & p {font-size: 36px; line-height: 1.2; font-weight: 600; color: var(--basic-white); padding: 0 0 36px;}
            & p strong {font-weight: 600; color: var(--key-mint);}
            & span {line-height: 1.4; color: var(--basic-white);}
            &::before {content: 'BETTER THAN YESTERDAY'; position: absolute; top: 50%; right: 0; transform: translateY(-50%); height: 100%; font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, 0.3); writing-mode: vertical-rl; text-align: center; padding: 0 24px;}
        }
        & .desc {display: flex; flex-direction: column; gap: 24px;
            & p {font-size: 18px; line-height: 1.4; font-weight: 500;
                & strong {font-weight: 600;}
            }
            & span {line-height: 1.4;}
        }
        & .more {
            & .more-btn {
                & button {color: var(--key-blue); font-weight: 900;}
            }
            & .more-box {padding: 24px 0 0;
                & p {font-weight: 600; padding: 0 0 12px;}
                & p strong {font-weight: 700; color: var(--key-blue);}
                & span {font-size: 15px; color: var(--basic-gray);}
            }
        }
    }
}

/* 메인 경력사항 영역 - exp */
.exp {
    & .exp-con {
        & .cate {padding: 0 0 24px;
            & p {font-size: 15px; color: var(--basic-gray);}
        }
        & .list {
            > ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
                > li {position: relative; padding: 24px 0 0; border-top: 3px solid #eeee;
                    &::before {content: ''; position: absolute; top: -3px; left: 0; width: calc(100% / 5); height: 3px; background: var(--key-blue);}
                    & .subject {display: flex; align-items: flex-end; gap: 8px;
                        & p {font-size: 18px; line-height: 1; font-weight: 500;}
                        & span {font-size: 12px; line-height: 1; color: var(--basic-gray2);}
                    }
                    & .info {padding: 12px 0 0;
                        & p {font-weight: 500; padding: 0 0 12px;}
                        & span {display: block; font-size: 15px; margin: 0 0 4px;}
                        & span:last-child {margin: 0;}
                    }
                }
            }
        }
    }
}

/* 메인 포트폴리오 영역 - portfolio */
.portfolio {padding: var(--main-gap) 0;
    & .portfolio-list {
        > ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px;
            > li {
                & .thumb {position: relative; aspect-ratio: 560 / 390; border-radius: 12px; overflow: hidden; box-shadow: var(--basic-shadow);
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    & i {position: absolute; bottom: 24px; right: 36px; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 16px; color: var(--key-blue); background: var(--basic-white); border-radius: 50%; opacity: 0; z-index: 11;}
                    &::before {content: ''; position: absolute; top: -20%; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); z-index: 8;}
                    &::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #154d8b; z-index: 2; opacity: 0; transition: all 0.5s;}
                }
                & .cate {display: flex; gap: 4px; padding: 18px 0 12px;
                    & p {font-size: 12px; font-weight: 500; line-height: 1; color: var(--basic-white); padding: 4px 8px; border-radius: 4px;
                        &.ct1 {background: var(--key-blue);}
                        &.ct2 {background: var(--key-mint);}
                        &.ct3 {background: #fb697e;}
                        &.ct4 {background: #ffc809;}
                    }
                }
                & .subject {
                    & p {font-size: 20px; font-weight: 600;}
                }
                &:hover {
                    & .thumb {
                        & i {right: 24px; opacity: 1; transition: all 0.5s 0.5s;}
                        &::before {-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);}
                        &::after {opacity: 0.3;}
                    }
                }
            }
        }
    }
}

/* 메인 클론 코딩 영역 - clone */
.clone {
    & .clone-swiper {
        & .swiper-slide {display: flex; align-items: center; gap: 60px;
            & .thumb {position: relative; flex: 1; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden;
                &::before {content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #f9f9f9; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);}
                & img {position: absolute; top: 0; left: 0; width: 0; height: 100%; object-fit: cover; box-shadow: var(--basic-shadow); transition: all 0.4s 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);}
                &.on {
                    &::before {width: 100%;}
                    & img {width: 100%;}
                }
            }
            & .text {flex: 1;
                > div {transform: translateY(40px); opacity: 0;}
                & .subject {transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
                    & p {font-size: 24px; font-weight: 600; margin: 0 0 12px;}
                    & span {}
                }
                & .info {padding: 24px 0; transition: all 0.4s 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
                    > ul {
                        > li {display: flex; gap: 8px; padding: 0 0 4px;
                            &:last-child {padding: 0;}
                            & p {width: 60px; font-size: 15px;}
                            & span {font-size: 15px; color: var(--basic-gray);}
                        }
                    }
                }
                & .more {transition: all 0.4s 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
                    & a {display: flex; align-items: center; gap: 8px; opacity: 0.3;
                        & p {font-size: 15px; font-weight: 500; line-height: 1;}
                        & i {font-size: 20px;}
                    }
                }
                &.on {
                    > div {transform: translateY(0); opacity: 1;}
                }
            }
            & .swiper-nav {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 24px; z-index: 2;
                & .swiper-btn i {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--basic-white); cursor: pointer;}
            }
        }
    }
}

/* 메인 컨택 영역 - contact */
.contact {padding: calc(var(--main-gap) + 60px) 0; text-align: center;
    & .text {position: relative; display: inline-block; margin: 0 0 60px;
        & em {position: absolute; top: -80px; right: -60px; width: 200px; font-size: 14px; font-weight: 500; color: var(--key-blue); word-break: keep-all; background: var(--basic-white); border: 1px solid var(--key-blue); border-radius: 4px; box-shadow: var(--basic-shadow); padding: 6px 8px; animation: bounce 0.43s linear infinite alternate;
            &::after {content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 13px; height: 7px; background: url("/img/common/ico-arrow.png") no-repeat center; background-size: cover;}
        }
        & p {font-size: 60px; font-weight: 600; font-style: italic; padding: 0 0 24px;
            & strong {color: var(--key-blue);
                &:last-child {color: var(--key-mint);}
            }
        }
        & span {}
    }
    & .list {
        > ul {display: flex; justify-content: center; align-items: center; gap: 36px;
            > li {
                & p {font-size: 15px; color: var(--basic-gray);}
            }
        }
    }
}