/* 언어 전환 버튼 스타일 */
.language-switcher {
    /* 부모 요소(inner)를 기준으로 우측에 배치 */
    position: absolute;
    top: 20px;
    right: 20px;
    
    font-size: 14px;
    font-weight: bold;
    z-index: 1000; /* 다른 요소보다 위에 오도록 설정 */
}

/* 링크 스타일 */
.language-switcher a {
    text-decoration: none;
    color: #999;
    transition: color 0.3s ease;
}

/* 활성화된 버튼 스타일 */
.language-switcher a.active {
    color: #000;
}

/* 호버 효과 */
.language-switcher a:hover {
    color: #333;
}


/*
 * style.css 파일의 마지막 부분에 추가
 * 모바일 화면에서 언어 버튼 가독성 향상
 */
@media (max-width: 600px) {
    /* 언어 전환 버튼 전체 스타일 */
    .language-switcher {
        display: flex; /* flexbox를 사용하여 버튼을 나란히 배치 */
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden; /* 버튼 경계선 바깥으로 삐져나오는 부분 숨기기 */
        font-size: 14px;
        position: static; /* 부모 요소인 gnb에 상대적으로 위치 */
    }

    /* 각 언어 버튼 스타일 */
    .language-switcher a {
        flex: 1; /* 버튼의 너비를 동일하게 분배 */
        text-align: center;
        padding: 8px 12px; /* 버튼의 터치 영역을 넓힘 */
        border-right: 1px solid #ccc; /* 구분선 추가 */
        background-color: #f7f7f7;
    }

    /* 마지막 버튼의 오른쪽 경계선 제거 */
    .language-switcher a:last-child {
        border-right: none;
    }

    /* 활성화된 버튼 스타일 */
    .language-switcher a.active {
        color: #fff;
        background-color: #333;
        font-weight: bold;
    }
}

html,body,*{
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    letter-spacing: -1px;
    color: #333333;
    transition: all 0.3s ease-in-out;
}

.inner{
    width: 80%;
    height: 100vh;
    max-height: 900px;
    min-height: 800px;
    margin: 0 auto;
    /* background-color: rgba(173, 173, 173, 0.056); */
}

/* header */
#header{
    position: relative;
    width: 100%;
}
#header .inner{
    min-height: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#header .inner h1{
    overflow: hidden;
    width: 0;
    font-size: 0;
    height: 0;
}
#header .menu,.gnb .menu{
    display: flex;
    height: 70px;
    align-items: center;
    gap: 20px;
    margin-bottom: 70px;
}
#header .menu div a,.gnb .menu div a{
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

#header .menu div:hover,.gnb .menu div:hover{
    /*color: #3F95CA;*/
    color: #111111;
}

#header .inner .logoV{
    transition: all 0.3s ease-in-out;
    height: auto;
    width: 100%;
    margin: 0 auto 70px;
    overflow: hidden;
}
#header .inner .logoV img{
    margin: 0 auto;
}

/* navigation */
.gnb{
    position: fixed;
    width: 100%;
    top: -70px;
    background-color: rgba(255, 255,255, 0.5);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease-in-out;
    z-index: 10;
}
.gnb.on{
    top: 0;
}
.gnb .inner{
    min-height: 70px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gnb .menu{
    margin-bottom: 0;
}

/* section01  */
.section01 .inner{
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}
.section01 .inner h2{
    font-size: clamp( 20px,2vw,35px);
    text-align: center;
    font-weight: 700;
    display: block;
}
.section01 .inner .mainVisual{
    flex-grow: 1;
    width: 100%;
    min-height: 500px;
    background-color: #797979;
    border-radius: 30px;
}
.section01 .inner .mainVisual .swiper-slide img{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    filter : grayscale(100%) 
}
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
    top: auto;
    bottom: 0;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    /* background: #3F95CA; */
    background: #111111;
}

/* section02 */
.section02 .inner{
    height: fit-content;
    min-height: fit-content;
    padding-bottom: 80px;
}
.sectionName{
    display: block;
    font-weight: 600;
    font-size: 35px;
    margin-bottom: 100px;
}
.sectionTitle{
    font-size: clamp( 18px,1.5vw,25px);
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 40px;
    letter-spacing: -1px;
}
.sectionTitle .point{
    position: relative;
    z-index: 1;
}
.sectionTitle .point::after{
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 50%;
    background-color: #EDEDED;
    z-index: -1;
    top: 50%;
    left: 0%;
}
.sectionSubTxt{
    width: 70%;
    margin-bottom: 80px;
    font-size: 18px;
    line-height: 130%;
}

.aboutConWrap{
    display: flex;
    justify-content: space-between;
}

.aboutConWrap .item{
    background-color: #F7F7F7;
    width: 32%;
    padding: 30px;
    border-radius: 30px;
    text-align: right;
    /* 컨텐츠 추가 */
    width: 24%;
}
.aboutConWrap .item img{
    display: inline;
    margin-bottom: 50px;
}
.aboutConWrap .item .tit{
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
}
.aboutConWrap .item .txt{
    text-align: left;
    line-height: 130%;
}

/* section03 */
.section03 .inner{
    margin: 50px auto;
    background-color: #EDEDED;
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-height: fit-content;
}
.serviceConWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 80px 0px;
    flex-grow: 1;
}
.serviceConWrap .item{
    width: 30%;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    line-height: 130%;
}
.serviceConWrap .item .fwr{
    font-weight: 300;
    display: block;
}
.serviceConWrap .item img{
    display: inline;
    margin-bottom: 20px;
}

/* section04 portfolio */
.section04 .inner{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    height: fit-content;
}

.swiper-container {
    width: 100%;
    height: 600px;
    overflow: hidden;
  }

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F7F7F7;
    height: 100%;
    transition: all 0.5s ease;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
}

/* 버튼 스타일 재정의 */
.swiper-button-next, .swiper-button-prev{
    top:15%;
    color: #555555;
    right: 0;
    width: 50px;
    left: auto;
}
.swiper-button-prev{
    right: 50px;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 20px;
}
/* 확장된 슬라이드 스타일 */
.swiper-slide.expanded {
    width: 100% !important; /* 슬라이드 넓이 100% */
    height: 100%; /* 높이 유지 */
    z-index: 10; /* 다른 슬라이드 위로 */
}

/* 기본 콘텐츠 */
.swiper-slide .default-content {
    display: flex;
    justify-content: center;
    font-size: 20px;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.swiper-slide .default-content>img{
    height: 100%;
    max-width: fit-content;
}
.swiper-slide .default-content > *{
    position: absolute;
    text-shadow: 0px 0px 5px #333333;
    transition: all 0.5s ease-in-out;
}
.swiper-slide .default-content .cartegori{
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 27px;
    margin: 4px;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.1);
}
.swiper-slide .default-content .itemInfo{
    z-index: 2;
    width: calc(100% - 8px);
    height: 0%;
    padding: 0px 0px;
    border-radius: 27px;
    margin: 4px;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0%;
}
.swiper-slide .default-content .itemInfo > *{
    color: #ffffff;
    display: block;
    padding: 0 30px;
    font-weight: 300;
    letter-spacing: normal;
    overflow: hidden;
}

.swiper-slide .default-content .itemInfo .eventTitle{
    font-weight: 500;
    padding-bottom: 20px;
    width: 100%;
}
.swiper-slide .default-content .itemInfo .eventTitle::after{
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background-color: #ffffff;
    position: relative;
    bottom: -10px;
}

.swiper-slide .default-content .itemInfo .discription,.swiper-slide .default-content .itemInfo .client{
    font-size: 16px;
}

/* 마우스오버 */
.swiper-slide:hover .default-content .itemInfo{
    height: 40%;
    padding: 20px 10px;
}

.swiper-slide:hover .default-content .cartegori{
    height: 0%;
    width: 80%;
    padding: 30px 10px;
    margin: 50% 10%;
    background: rgba(237, 237, 237, 0.7);
}

/* 확장 시 기본 콘텐츠 숨기기 */
.swiper-slide.expanded .default-content{
    opacity: 0;
}
.swiper-slide.expanded .default-content .cartegori{
    margin: 0;
}
/* 추가 콘텐츠 숨기기 */
.swiper-slide .extra-content {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 24px;
}

/* 확장된 슬라이드에서 추가 콘텐츠 표시 */
.swiper-slide.expanded .extra-content {
    opacity: 1;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
.swiper-slide.expanded .extra-content .changeMain{
    width: 70%;
    display: flex;
    align-items: center;
}
.swiper-slide.expanded .extra-content .changeMain img{
    min-height: 100%;
    width: 100%;
}
.swiper-slide.expanded .extra-content .txtNavi{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swiper-slide.expanded .extra-content .txtNavi .itemInfo{
    padding: 30px;
}
.swiper-slide.expanded .extra-content .txtNavi .itemInfo > span{
    display: block;
    text-align: left;
    font-size: 20px;
}
.swiper-slide.expanded .extra-content .txtNavi .itemInfo .eventTitle{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}
.swiper-slide.expanded .extra-content .txtNavi .imgNavi{
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
}
.swiper-slide.expanded .extra-content .txtNavi .imgNavi a{
    width: 65px;
    height: 65px;
    border-radius: 65px;
    overflow: hidden;
    filter: grayscale(100%);
}
.swiper-slide.expanded .extra-content .txtNavi .imgNavi a.active{
    filter: grayscale(0%);
}
.swiper-slide.expanded .extra-content .txtNavi .imgNavi a img{
    height: 100%;
    max-width: max-content;
}

/* 아이템 확장 시 레이아웃 틀어짐 방지를 위한 dummy slide */
.dummy-slide{
visibility: hidden;
}

  

/* footer */
#footer{
    width: 100%;
    color: #969696;
    font-size: 14px;
}
#footer .inner{
    min-height: 30vh;
    height: 30vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;  
    gap: 28px;
}
#footer .inner .address{
    flex-grow: 2;
}
#footer .inner .email{
    font-size: 24px;
    padding: 10px 70px 10px 20px;
    border: 0;
    color: #ffffff;
    border-radius: 5px;
    background-color: #9A9A97;
    background-image: url(../img/ico_mail.svg);
    background-repeat: no-repeat;
    background-position: center right 17px;
    background-size: 45px auto;
    letter-spacing: normal;
}



/* 반응형 작업 시작 */
@media (max-width:1600px){
    .inner{
        width: 85vw;
        max-height: 45vw;
        min-height: unset;
    }
    #header .menu{
        margin-bottom: 3vw;
    }
    #header .inner .logoV{
        width: 23vw;
        margin: 0 auto 2vw;
    }
    .section01 .inner{
        padding: 2vw 0;
    }
    .section01 .inner .mainVisual{
        min-height: 25vw;
    }
    .section02 .inner{
        padding-bottom: 2vw;
    }
    .sectionName{
        margin-bottom:5vw
    }
    .sectionTitle{
        margin-bottom:3vw
    }
    .sectionSubTxt{
        margin-bottom:5vw
    }
    .swiper-button-next, .swiper-button-prev{
        top:5vw
    }
    #footer .inner .email{
        font-size:  clamp( 16px,2vw,20px);;
    }
}
@media (max-width:1440px) {
    .inner{
        width: 90vw;
        max-height: 50vw;
    }
    .sectionSubTxt{
        width: 90%;
    }
    .aboutConWrap .item{
        padding: 2vw;
    }
    .aboutConWrap .item .tit,.serviceConWrap .item{
        font-size: clamp(18px, 1.5vw, 20px);
    }
    /* about item 4개 인 경우 스타일 */
    .aboutConWrap{
        flex-wrap: wrap;
    }
    .aboutConWrap .item{
        width: 49%;
        margin-bottom: 2vw;
    }
    
}
@media (max-width:1024px) {
    .sectionSubTxt{
        width: 100%;
    }
    .section02 .inner{
        padding-bottom: 0vw;
        max-height: unset;
    }
    .section03 .inner,.section04 .inner{
        max-height: unset;
    }
    .aboutConWrap{
        flex-wrap: wrap;
    }
    .aboutConWrap .item{
        width: 48%;
        margin-bottom: 2vw;
    }
    .swiper-container{
        height: 80vh;
        max-height: 600px;
    }
    .serviceConWrap .item{
        width: 50%;
    }
    .swiper-slide.expanded .extra-content{
        flex-direction: column;
    }
    .swiper-slide.expanded .extra-content .changeMain{
        width: 100%;
        height: 70%;
        overflow: auto;
    }
    .swiper-slide.expanded .extra-content .txtNavi{
        width: 100%;
        height: 30%;
        flex-direction: row;
    }
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo{
        padding: 2vw 0vw 2vw 3vw;
    }
    .swiper-slide.expanded .extra-content .txtNavi .imgNavi{
        max-width: 55%;
        align-content: flex-start;
        gap: 10px;
        overflow: scroll;
    }
    .swiper-slide.expanded .extra-content .txtNavi .imgNavi a{
        width: 60px;
        height: 60px;
    }
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo > span{
        font-size: clamp(16px, 3vw, 18px);
    }
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo .eventTitle{
        font-size: clamp(18px, 4vw, 20px);
    }
}
@media (max-width:600px) {
    .gnb .inner .logo{
        width: 65px;
        overflow: hidden;
    }
    .gnb .inner .logo img{
        height: 100%;
        max-width: fit-content;
    }
    #header .inner .logoV {
        width: 40vw;
        margin: 0 auto 6vw;
    }
    .section01 .inner{
        max-height: 50vh;
        margin-bottom: 5vh;
    }
    .section03 .inner{
        padding: 30px 0;
    }
    .serviceConWrap{
        gap: 40px 0;
    }
    .serviceConWrap .item img{
        width: 40%;
    }
    #footer .inner{
        flex-direction: column-reverse;
        height: fit-content;
        min-height: 40vh;
        padding: 5vh 0;
        text-align: center;
        justify-content: center;
    }
    #footer .inner .address{
        flex-grow: 0;
    }
/* 
    .aboutConWrap .item{
        width: 49%;
    }
    .aboutConWrap .item img{
        margin-bottom: 3vh;
    } */
    
    /* about item 4개 인 경우 스타일 */
    .aboutConWrap .item{
        width: 100%;
        padding: 5vw;
        margin-bottom: 3vw;
    }
}

@media (max-width:630px) {
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo {
        max-width: 260px;
    }
}

@media (max-width:530px) {
    .inner{
        max-height: fit-content;
    }
    .section01 .inner{
        max-height: 70vh;
    }
    .section01 .inner .mainVisual .swiper-slide img{
        width: auto;
        min-width: auto;
        max-width: none;
        height: 100%;
    }
    .aboutConWrap .item{
        width: 100%;
        padding: 5vw;
        margin-bottom: 5vw;
    }
    .sectionName{
        margin-bottom: 7vh;
        text-align: center;
    }
    .sectionTitle{
        text-align: center;
        margin-bottom: 5vh;
    }
    .sectionSubTxt{
        font-size: 16px;
        width: 80%;
        text-align: center;
        margin: 0 auto 5vh;
    }
    .section03 .inner{
        padding: 30px 15px;
    }
    .serviceConWrap .item img{
        width: 40%;
    }
    .section04 .sectionName{
        margin-bottom: 60px;
    }
    .swiper-button-next, .swiper-button-prev{
        top: 70px;
        right: 50%;
    }
    .swiper-button-next{
        right: calc(50% - 50px);
    }
    
    .swiper-slide.expanded .default-content .cartegori,.swiper-slide:hover .default-content .cartegori{
        height: 0%;
        width: 30%;
        padding: 20px 10px;
        margin: 5% 60% 0 0;
        background: rgba(237, 237, 237, 0.7);
        min-width: 115px;
        font-size: 18px;
    }
    
    .swiper-slide.expanded .default-content{
        opacity: 1;
    }
    .swiper-slide .default-content img,.swiper-slide  .default-content .itemInfo{
        display: none;
    }

    .swiper-slide.expanded .extra-content .changeMain{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .swiper-slide.expanded .extra-content .changeMain img{
        width: auto;
        max-width: unset;
        height: 100%;
    }
    .swiper-slide.expanded .extra-content .txtNavi{
        position: absolute;
        bottom: 0;
        flex-wrap: wrap;
        height: fit-content;
    }
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo{
        
        max-width: unset;
        width: 100%;
        text-align: left;
    }
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo> span{
        display: inline-block;
        color: #ffffff;       
        text-shadow: 0px 0px 5px #333333;
    }
    .swiper-slide.expanded .extra-content .txtNavi .itemInfo .eventTitle{
        display: block;
        margin-bottom: 0px;
    }
    .swiper-slide.expanded .extra-content .txtNavi .imgNavi{
        max-width: 100%;
        width: 100%;
        padding: 10px 20px;
        gap: 10px;
        height: 80px;
        backdrop-filter: blur(1px);
        background-color: rgba(255, 255,255, 0.2);
    }
}

@media (max-width:499px) {
    #header .menu div a, .gnb .menu div a{
        padding: 1vw 2vw;
    }
    .gnb.on{
        display: none;
    }
    .swiper-slide.expanded .default-content .cartegori, .swiper-slide:hover .default-content .cartegori{
        margin: 5% 50% 0 0;
    }
    .swiper-container{
        height: 70vh;
    }
}