header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    z-index: 5;
    transition: 0.4s;
}

header .inner {
    margin: 0 12rem;
    height: 12rem;
    /* background: #ff0; */
    border-bottom: 2px solid var(--line-color);
    position: relative;
}

header.hide {
    transform: translateY(-100%); /* 자신의 세로크기 전부 */
}

header .inner::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--main-color);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 2rem 0;
}

header nav h1 a {
    display: block;
    font-size: 2.5rem;
    letter-spacing: 1.1px;
    color: #fff;
    padding-top: 1rem;
}

header nav h1 a:hover {
    font-weight: 700;
}

.gnb {
    display: flex;
    gap: 4rem;
    margin: 1.5rem 0 0 10rem;
}
.gnb li a {
    font-size: 3rem;
    font-weight: 700;
    position: relative;
    letter-spacing: 1.1px;
    color: #fff;
}
.section {
    background: var(--bg-color);
}

.gnb li a:hover {
    font-weight: 700;
    color: var(--main-color);
}

.wrap {
    width: 80%;
    height: 90%;
    margin: 4rem auto;
    /* padding-top: 20rem; */
    /* border: 10px solid #eee; */
    display: flex;
    position: relative;
}

.info {
    width: 50%;
    height: 100%;
    padding: 60px 50px;
}

.info-list {
    position: relative;
}

.info-list li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.info-list li h1 {
    font-size: 5.5rem;
    font-weight: 700;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.6s;
    margin-top: 10rem;
}

.info-list li h1 span {
    font-size: 2.5rem;
    font-weight: 500;
    padding-left: 2rem;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.7s;
}

.info-list li h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.8s;
}

.info-list li > p:first-of-type {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.9s;
}

.cosmo-project {
    margin-top: 3rem;
}

.cosmo-project p {
    font-size: 1.8rem;
    font-weight: 500;
    /* color: var(--main-color); */
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 1s;
    margin-top: 1rem;
}

.cosmo-res dt {
    font-size: 5rem;
    font-weight: 800;
    color: var(--line-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.9s;
    margin: 5rem 0 3rem 0;
}

.cosmo-res dd {
    font-size: 1.8rem;
    font-weight: 500;
    /* color: var(--main-color); */
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 1s;
    margin-top: 1rem;
}

/* section2 */

.section2 > .wrap {
    width: 80%;
    height: 90%;
    margin: 0 auto;
    /* padding-top: 20rem; */
    /* border: 10px solid #eee; */
    display: flex;
    position: relative;
}

.info-list li h3 {
    font-size: 5.5rem;
    font-weight: 700;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.6s;
    margin-top: 10rem;
}

.info-list li h3 span {
    font-size: 2.5rem;
    font-weight: 500;
    padding-left: 2rem;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.7s;
}

.info-list li h4 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.8s;
}

.bf-project {
    margin-top: 3rem;
}

.bf-project p {
    font-size: 1.8rem;
    font-weight: 500;
    /* color: var(--main-color); */
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 1s;
    margin-top: 1rem;
}

.bf-res dt {
    font-size: 5rem;
    font-weight: 800;
    color: var(--line-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.9s;
    margin: 5rem 0 3rem 0;
}

.bf-res + .bf-res dt {
    padding-top: 12rem;
}

.bf-res dd {
    font-size: 1.8rem;
    font-weight: 500;
    /* color: var(--main-color); */
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 1s;
    margin-top: 1rem;
}

/* section 3 */
.section3 > .wrap {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    /* padding-top: 20rem; */
    /* border: 10px solid #eee; */
    display: flex;
    position: relative;
}
.info-list li h5 {
    font-size: 5.5rem;
    font-weight: 700;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.6s;
    margin-top: 10rem;
}

.info-list li h5 span {
    font-size: 2.5rem;
    font-weight: 500;
    padding-left: 2rem;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.7s;
}

.info-list li h6 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--main-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.8s;
}

.cha-project {
    margin-top: 3rem;
}

.cha-project p {
    font-size: 1.8rem;
    font-weight: 500;
    /* color: var(--main-color); */
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 1s;
    margin-top: 1rem;
}

.cha-res dt {
    font-size: 5rem;
    font-weight: 800;
    color: var(--line-color);
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 0.9s;
    margin: 5rem 0 3rem 0;
}

.cha-res dd {
    font-size: 1.8rem;
    font-weight: 500;
    /* color: var(--main-color); */
    transform: translateX(-50px);
    opacity: 0;
    transition: 0.4s 1s;
    margin-top: 1rem;
}

/* active */
.info-list li.active h1,
.info-list li.active h1 span,
.info-list li.active h2,
.info-list li.active h3,
.info-list li.active h3 span,
.info-list li.active h4,
.info-list li.active h5,
.info-list li.active h5 span,
.info-list li.active h6,
.info-list li.active p,
.info-list li.active dt,
.info-list li.active dd {
    opacity: 1;
    transform: translateX(0);
}

/* 슬라이더 공통 */
.my-slider-wrap {
    width: 50%;
    padding: 50px;
    position: relative;
    overflow: hidden;
}

.my-slider-wrap .swiper-slide {
    margin-top: 20%;
    width: 80%;
    aspect-ratio: 1/0.8;
}

.my-slider-wrap .swiper-slide figure {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 10px solid #fff;
    overflow: hidden;
}
.my-slider-wrap .swiper-slide figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next {
    position: absolute;
    top: 53.5%;
    right: -25px;
    transform: translateY(-50%);
}
.swiper-button-prev {
    position: absolute;
    top: 53.5%;
    left: 48%;
    transform: translateY(-50%);
}
.section3 .swiper-button-next {
    position: absolute;
    top: 48%;
    right: -25px;
    /* transform: translateY(-50%); */
}
.section3 .swiper-button-prev {
    position: absolute;
    top: 48%;
    left: 48%;
    /* transform: translateY(-50%); */
}

/* pagination 스타일 추가 */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--main-color);
    opacity: 0.2;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--main-color);
}
.section3 .swiper-pagination {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}