:root{
    --header-height: 420px;
}
.titleContainer > *{
    user-select: none;
}
.titleContainer .right img{
    margin-top: 80px !important;
}
@media (max-width:768px) {
    .header{
        /* height: 300px !important; */
        height: auto !important;
    }
    .headerLayer{
        height: 60px !important;
    }
    /* .mobile{
        height: 420px;
    } */
    nav
    , .imgContainer
    {display: none !important;}
    .hamburger {
        cursor: pointer;
    }
    .titleContainer{
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 0px 0px 40px 16px;
        width: 100vw !important;
        height:280px !important;
    }
    .headerContainer{
        padding : 0px 16px 0px 0px !important;
        width: 100% !important;
        height: 60px !important;
        min-height: unset !important;
        padding-right : 18px;
        justify-content: space-between;
        box-shadow: 0px 1px 0px rgba(252, 250, 250, 0.2); /* 가로: 0px, 세로: 1px, 두께: 0px */
    }
    .sidemenuContainer{
        z-index: 999;
        position: fixed;
        top: 60px;
        right: -100%;
        width: 66%;
        height: 100%;
        background-color: var(--gray-100) !important;
        color: white;
        overflow-y: auto;
        transition: right 1s ease; /* 1초 애니메이션 */
      }
    .sidemenu{
        /* position: fixed; */
        top: 101px;
        width: 100%;
        height: 100%;
        right:100%;
        /* background-color: var(--gray-100) !important; */
        padding: 40px 0px 0px 16px;
        overflow-y: auto;
        transition: right 1s ease; /* 1초 애니메이션 */
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
      .sidemenu  *{
        white-space: nowrap;
        color: var(--gray-400);
        text-decoration: unset !important;
      }
      .sidemenuContainer.open {
        right: 0; /* 메뉴가 보이는 위치 */
        z-index: 999;
      }
      .sidemenu > *{
        color: var(--gray-400) !important;
      }
      .headerContainer .img , .headerContainer:hover .img{
        width: 126px !important;
        height: 65px !important;
      }
      .swiper-container .swiper-wrapper .swiper-slide {
        width: calc(226 / 375 * 100vw) !important;
        /* height: calc(302 / 375 * 100vw) !important; */
      }
    
    .bannerimg{
        width: 100vw !important;
        height: 100% !important;
    }
}
@media (min-width:768px) and (max-width:1200px) {
    .headerContainer .hamburger, .side-menu, .sidemenuContainer{
        display: none !important;
    }
    .titleContainer{
        width: 100% !important;
    }
    .headerContainer:hover nav a span{
        color : black;
    }
    .headerContainer nav a:hover{
        color : var(--primary-500) !important;
    }
    .bannerimg{
        height: 420px;
    }
}

@media (min-width:1200px) {
    .headerContainer .hamburger, .side-menu, .sidemenuContainer{
        display: none !important;
    }
}
    

/* .header.mobile{
    height: auto !important;
} */

.header{
    position: relative;
    display: flex;
    justify-content: baseline;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    /* height: 556px; */
}
.headerContainer{
    z-index: 1;
    width : 1450px;
    padding : 0px 125px;
    min-height: 84px;
    display: flex;
    align-items: center;
}
.headerContainer nav{
    margin-left: 134.98px;
}


.headerLayer:hover *:hover
,.headerContainer nav a span:hover
{
    color: #009591 !important;
}
nav{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
}
nav a {
    color: black;
    overflow-wrap: break-word;
    word-wrap: break-word; /* 단어가 너비를 초과하면 줄바꿈 */
    word-break: break-all; /* 단어의 중간에서도 줄바꿈 허용 */
    padding:28px 16px;
    text-decoration: unset;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}
.headerLayer{
    z-index: 99;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    box-shadow: 0px 0.5px 0px rgba(252, 250, 250, 0.2);
    
    background: rgb(39, 99, 81);
    display: flex;
    justify-content: center;
    color: black;
}
.header-title1{
    display: flex;
    gap: 4px;
}
.spot{
    width: 28px;
    height: 28px;
}
.titleContainer{
    display: flex;
    /* justify-content: center; */
    gap: 28px;
    width: 1200px;
    height: var(--header-height);
}
.titleContainer .right{
    flex: 0.3;
}
.titleContainer .left{
    width: 537px;
    word-break: break-all;
    /* height: 550px; */
    flex: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 100px;
}

.header-title{
    display: flex;
    align-items: center;
    color: white;
}
.header-title2{
    font-size: 52px;
    line-height: 64px;
    color: white;
}
.imgContainer{
    margin-left: auto;
    display: flex;
    gap: 16px;
    white-space: nowrap;
}
.swiper-container .swiper-wrapper{
    width: 100vw;
  }
.swiper-container .swiper-wrapper .swiper-slide{
    justify-content: space-between;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: -1;
    width: 100vw !important;
    background: #276351;
    /* object-fit: contain !important; */
}
.slide_text{
    width: 700px;
    color: var(--gray-white, #FFF);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 72px; /* 180% */
} 
/* @media (min-width:330px) and (max-width:700) {
    .swiper-container >  .swiper-wrapper > .swiper-slide img{
        max-height: 360px !important;
    }
} */
@media (max-width:768px) {
    .swiper_main{
        z-index:-1;
    }
    .swiper_main, .remote_container{
        width: 100% !important;
    }
    .slide_text{
        font-size: calc(18 / 375 * 100vw) !important;
        line-height: calc(28 / 375 * 100vw) !important; /* 375px 기준으로 28px 줄 높이 */
        padding-left: 28px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: unset !important ;
        margin-top: 100px !important;
        color: white !important;
    }
    .slide_img{
        padding-right: 20px !important;
        width: 100% !important;
        height: inherit !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    .swiper-container .swiper-wrapper .swiper-slide{
        /* height: 400px; */
        aspect-ratio: 375/360;
        display: flex !important;
        /* flex-direction: column !important; */
        background: var(--primary-gradient) !important;
    }
    .swiper-container >  .swiper-wrapper > .swiper-slide img{
        width : 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 375/360 !important;
    }
    .remote{
        width: 139px !important;
        height: 32px !important;
        display: flex !important;
        padding: 4px 12px !important;
        align-items: center !important;
        gap: 4px !important;
        left: 16px !important;
        bottom: 100px !important;
    }
    .remote > img{
        width: 20px !important;
        height: 20px !important ;
    }
}

.visual{
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}
.remote_container{
    position: relative;
    width: 1200px;
    height: 80px;
}
.remote{
    position: absolute;
    left: calc(99/1200*100vw); /* 맨 왼쪽 */
    bottom: 105px;
    z-index: 99;
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 4px;
    border-radius: 20px;
    background: rgba(18, 18, 18, 0.38);
}
.bannerimg{
    width: 100%;
     height: 420px;
    /* aspect-ratio: 480/139;  */
    object-fit: cover;
}