body{background: var(--shellBlack-color);}

/* 히어로 섹션 */
.hero {position: relative; height: 100vh; background: #fff; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover;}
.hero .hero-content{display: flex; width: 100%; height: 100vh; justify-content: center; align-items: center; text-align: center; flex-direction: column;}
.hero h1 {margin-bottom: 80px; font-size: 34px; font-weight: 400;}
.hero h1 > span{font-weight: 600;}
.hero-btn {display: flex; justify-content: center; gap: 32px;}
.hero-btn a{width: 200px; height: 56px; line-height: 56px; font-size: 18px; border-radius: 500px; transition: background-color 0.3s;}
.hero-btn .story-btn{background: var(--shellBlack-color); color: var(--white-100-color);}
.hero-btn .zip-btn{border: 1px solid var(--shellBlack-color); background-color: var(--white-100-color);}
.hero-btn .story-btn:hover {background-color: var(--white-100-color); border: 1px solid var(--shellBlack-color); color: var(--shellBlack-color);}
.hero-btn .zip-btn:hover {background-color: var(--shellBlack-color); color: var(--white-100-color); border: 0;}

/* 포르폴리오 섹션 */
.zip{padding-top: 30px; background: var(--shellBlack-color); z-index: 99;}
.zip .swiper { width: calc(100% + 100px); height: 100%; margin-left: -100px;}
.zip .swiper-slide {display: flex; height: 100%; justify-content: center; align-items: center;}
.zip .swiper-slide img {display: block; width: 100%; height: 100%; border-radius: 14px; object-fit: cover;}

/* 서비스 섹션 */
.service {padding: 200px 40px; background-color: var(--shellBlack-color); color: var(--white-100-color); text-align: center;}
.service h2 {font-size: 32px; margin-bottom: 20px; font-weight: 600;}
.service h5{font-size: 24px; margin-bottom: 80px; font-weight: 500;}
.service p {margin-bottom: 70px; font-size: 24px; font-weight: 400;}
.service .service-cards {display: flex; justify-content: center; gap: 40px;}
.service .service-card {width: 300px; background-color: var(--white-90-color); color: var(--black-100-color); padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.service .service-card:hover{background: var(--white-100-color);}
.service .service-card {opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: 0s;}
.service .service-card.show {opacity: 1; transform: translateY(0);}
.service .service-card:nth-child(1).show { transition-delay: 0s; }
.service .service-card:nth-child(2).show { transition-delay: 0.2s; }
.service .service-card:nth-child(3).show { transition-delay: 0.4s; }
.service .service-card h3 {margin: 10px 0; font-size: 60px;}
.service .service-card h4{margin-bottom: 30px; font-size: 24px; font-weight: 700;}
.service .service-card p {margin-bottom: 40px; font-size: 16px; color: var(--black-100-color);}
.more-info{margin-top: 100px; padding: 17px 30px; font-size: 18px; font-weight: 600; border: 2px solid var(--white-100-color); background: none; color: var(--white-100-color); border-radius: 300px; cursor: pointer; transition: all .3s;}
.more-info:hover{background: var(--white-100-color); color: var(--black-100-color);}

/* 무빙 텍스트 섹션 */
.moving-texts {padding: 60px 0px; text-align: center; background-color: var(--shellBlack-color); color: var(--white-100-color);}
.moving-texts h2 {font-size: 28px; margin-bottom: 50px; font-weight: 500;}
.row {overflow: hidden; white-space: nowrap; display: flex; align-items: center; margin-bottom: 30px;}
.track {display: flex; gap: 34px; width: 100%; animation: scroll 30s linear infinite;}
.row.right-to-left .track {animation: scrollReverse 30s linear infinite;}
.track img {height: 70px; width: auto; object-fit: contain; flex-shrink: 0;}
@keyframes scroll {
    0% {transform: translateX(0);} 
    100% {transform: translateX(-100%);}
}
@keyframes scrollReverse {
    0% {transform: translateX(-100%);} 
    100% {transform: translateX(0%);}
} /* 반대로 흐르게 설정 */


/* 문의하기 섹션 */
.contact {padding: 60px 40px; background-color: var(--shellBlack-color); color: var(--white-100-color); text-align: center;}
.contact h2 {font-size: 28px; margin-bottom: 50px; font-weight: 500;}
.contact .note {display: flex; justify-content: center; align-items: center; gap: 70px;}
.contact .note p{display: flex; width: 320px; height: 160px; background: var(--white-90-color); border-radius: 30px; color: var(--black-100-color); font-size: 20px; justify-content: center; align-items: center;}
.contact .note-2 p{background: var(--white-100-color);}
.contact .arrow{display: flex; justify-content: center; align-items: center; gap: 70px;}
.contact .arrow p{display: flex; width: 320px; margin: -10px 0 10px; justify-content: center; align-items: center;}
.contact .arrow p img{width: 42px;}

/* 공통 설정 */
.note p, .arrow p {opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease;}
.note p.show, .arrow p.show {opacity: 1; transform: translateY(0);}

/* note-1 안 p들 등장 */
.note-1 p:nth-child(1).show {transition-delay: 0s;}
.note-1 p:nth-child(2).show {transition-delay: 0.1s;}
.note-1 p:nth-child(3).show {transition-delay: 0.2s;}

/* arrow 안 p들 등장 */
.arrow p:nth-child(1).show {transition-delay: 0.3s;}
.arrow p:nth-child(2).show {transition-delay: 0.4s;}
.arrow p:nth-child(3).show {transition-delay: 0.5s;}

/* note-2 안 p들 등장 (늦게) */
.note-2 p:nth-child(1).show {transition-delay: 0.6s;}
.note-2 p:nth-child(2).show {transition-delay: 0.7s;}
.note-2 p:nth-child(3).show {transition-delay: 0.8s;}


/* 모바일 스타일 */
@media (max-width: 768px) {
    /* hero - mo */
    .hero .hero-content{position: unset; width: calc(100% - 68px); height: 100vh; margin: 0 34px; padding-bottom: 60px; text-align: left; transform: unset; align-items: flex-start; justify-content: flex-end}
    .hero h1{margin-bottom: 34px; font-size: 24px; line-height: 40px;}
    .hero-btn a{width: 152px; height: 46px; line-height: 46px; font-size: 16px; text-align: center;}
    .hero-btn .zip-btn{display: none;}

    /* zip - mo */
    .zip .swiper{width: calc(100% + 35.5%); margin-left: -35.5%;}

    /* sevice - mo */
    .service{padding: 143px 30px 0;}
    .service h2{font-size: 20px;}
    .service h5{margin-bottom: 14px; font-size: 16px;}
    .service p{margin-bottom: 42px; font-size: 16px; line-height: 34px;}
    .service .service-cards{flex-direction: column; gap: 24px;}
    .service .service-card{width: 100%; border-radius: 28px;}
    .service .service-card h3{font-size: 50px;}
    .service .service-card p{font-size: 18px; line-height: 26px;}
    .more-info{width: 242px; height: 60px; margin-top: 52px; padding: 0;}

    .moving-texts{padding: 112px 0 98px;}
    .moving-texts h2{font-size: 20px; margin-bottom: 42px;}
    .row{margin-bottom: 12px;}
    .track{gap: 10px;}
    .track img{height: 52px;}

    .contact h2{font-size: 20px;}
    .contact .note, .contact .arrow{gap: 10px;}
    .contact .note p{height: 140px; font-size: 16px; line-height: 26px; border-radius: 14px;}
}