@import url(./module.css);


.filterURL {
    text-transform: capitalize;
}

#menu-item-90>a {
    display: none;
}

/*스크롤바 없애기*/

html {
    scroll-behavior: smooth;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


body {
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}


::selection {
    background: #000;
    color: #fff;
}


@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Light.otf');
    font-weight: 300;
}


@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Regular.otf');
    font-weight: 400;
}

@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Medium.otf');
    font-weight: 500;
}

@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-SemiBold.otf');
    font-weight: 600;
}


@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Bold.otf');
    font-weight: 700;
}


@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Black.otf');
    font-weight: 800;
}

body.scroll-lock {
    overflow: hidden;
    height: 100vh;
}



.aos-item {
    width: 100%;
}


:root {
    --background: #fff;
    --fontcolor: #000;
    --subColorG: #A2A2A2;
    --subColorG2: #EFEFEF;
    --padding: 5px;
    --animation: 0.3s ease-in-out;

}

.gray{
    color: var(--subColorG);
    
}

#menu-item-106:hover a{
     color: var(--subColorG);
     
}
#menu-item-93:hover a{
 color: var(--subColorG);
}
@media (max-width:768px) {

    
#menu-item-106:hover a{
     color: inherit; /* 또는 삭제 */
     
}
#menu-item-93:hover a{
color: inherit; /* 또는 삭제 */
}
   
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
    font-family: 'SuisseIntl', "Noto Sans KR", "Noto Sans CJK KR", "Pretendard", sans-serif;
}

body {
    background: var(--background);
    color: var(--fontcolor);
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.0025em;
    line-height: 1.3;
}

.dark-mode {
    --background: #000;
    --fontcolor: #fff;
}

.invert {
    filter: invert(1);
}


/*----------HEADER----------*/


.filterURL {
    padding: var(--padding);
}

.filterURL span {
    color: var(--subColorG);
}

header {
    font-size: 1em;
    /*14px*/
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
    position: -webkit-sticky;
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--background);
    z-index: 1000;
    transition: padding var(--animation);
}


header nav ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}


header aside ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
} 

/* 
header aside ul li{
    float: left;    
    padding: 5px;
    box-sizing: border-box;
} */
/* 
#menu-item-94{
    border: 1px solid red;
    width: calc((100% / 9) * 3)
}

#menu-item-93{
    border: 1px solid blue;
    width: calc((100% / 9) * 3)
}

#menu-item-106{
    border: 1px solid green;
    width: calc((100% / 9) )
}

#menu-item-90{
    border: 1px solid orange;
    width: calc((100% / 9) )
} */


aside ul li:last-child{
    text-align: right;
}






.start {
    color: var(--subColorG);
}

.end {
    color: var(--fontcolor);
}

nav {
    padding: calc(var(--padding)) var(--padding);
}

#menu-item-94 a {
    text-transform: capitalize;
}

#menu-main-menu li a,
.item_index .col-8 a, .filterURL {
    font-weight:700;
    cursor: pointer !important;
}

 #menu-item-94 a{
    font-weight: 700 !important;
}

#menu-item-201 a {
    color: var(--subColorG);
}

#menu-item-201 a.clicked {
    color: var(--fontcolor)
}

header aside {
    font-weight: 500;
}

hr {
    margin: 0 var(--padding);
    background-color: var(--fontcolor);
    height: 1px;
    border: 0;
    /* transform-origin: left;
    animation: animate 3s ease-in-out ; */
}

@keyframes animate {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        transform-origin: right;

    }


}


/* Aside */
aside {
    padding: calc(var(--padding)) var(--padding);

}



aside li {
    line-height: 1;
}


aside .info {
    text-align: center;
    transition: height var(--animation);
    line-height: 1.4;
    height: auto;
    width: 25%;

}
.info a{
    color: var(--fontcolor);
transition: color var(--animation);
}
.info a:hover {
    /* font-style: italic; */
     color: var(--subColorG);

}
.aboutlimobile{display: block;}

.underline:hover{
  color: var(--subColorG);
}

@media (max-width:768px) {

    aside .info{width:100%}

   
}



.aboutli, .aboutlimobile{
    text-transform: none;
    line-height: 1.4;
    font-weight: 400;
    display: none;
    padding-bottom: 20px;
}

.aboutlimobile{display: none;}
@media (max-width:768px) {


.aboutli{

    padding-bottom:20px;
}

   
}





.show{
    display: block;

}


.hide {
    opacity: 0;
    height: 0;
    display: none;
}

.siteabout{
    text-decoration: underline;
    cursor: pointer;
}

.siteabout:hover{
    text-decoration: none;
}

.sitedesc{
    display: none;
}
.sitedesc.show {
    display:block
}


.logoWrap{
    padding: 0;
}

.logoIMG {
    vertical-align: top;
    object-fit: cover;
    transition: opacity var(--animation), height var(--animation);
    opacity: 1;
    height: 150px;
    cursor: pointer;
}






@media (max-width:768px) {

    .item_desc .col-4, .tag_mobile {
        padding-top:calc(var(--padding)*.5);
    }

    .info,
    .item_index,
    .aside_hr {
        display: none;
    }

    .index .col-3 ul{
        border-bottom: 1px solid var(--fontcolor);
        padding-bottom: 10px;
}
}

.item_index .col-8 {
    padding: 0;
}





.index {
    display: none;
    padding-bottom: calc(var(--padding)*2);
    transition: all var(--animation);
}



.index.show{
    display: block !important;
}



.index_hr {
    display: none;
}


.index_hr.show{
    display: block !important;
}


.index .col-8 {
    padding: 0;
}

.index a {
    text-transform: none;
    font-weight: 500;
       color: var(--fontcolor);

}

.index a:hover{
      color: var(--subColorG);

}


.indexTitle{display: none;}
@media (max-width:768px) {



   .index .clearfix > .col-4{
   display: none;
   }

   .indexTitle{
    display: block;
    padding-bottom: var(--padding);

}

   .index .col-8{
    display: block;
   }


   .index .col-8 ul{
    border-bottom: 1px solid var(--fontcolor);
   }

   .index .col-8 ul li:last-child{
    padding-bottom:calc( var(--padding)*2)
   }

      .index .col-8 div:last-child ul{
    border-bottom: 0;
   }

   .index{
    padding-bottom: 0;
   }

}




/*----------CONTAINER----------*/

.container {
    transition: margin-top var(--animation);
    will-change: margin-top;
}





/* Item Imgae */

.image_slider {
    position: relative;
  z-index: 10000;
}



@media (min-width:768px){

    
	.image_slider {
    
    width: calc((100% / 9) * 3)
}

.item_desc .col-4{
    width: calc((100% / 9) * 3)
}
.tagUl_web{
    width: calc((100% / 9))
}


.item_index .col-4{
    width: calc((100% / 9) * 3)
}

.item_index .col-3, .item_index .col-2{
     width: calc((100% / 9))
}

.index .col-4{
     width: calc((100% / 9) * 3)
}

.index .col-3, .index .col-2{
     width: calc((100% / 9))
}
}


.slides {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.slides img {
    width: 100%;
    height: auto;
    /* 비율에 맞게 자동으로 높이가 조정되게 함 */
    display: none;
    object-fit: contain;
     transition: transform var(--animation) /* 부드러운 확대 효과 */

     
}
.slides iframe {
    display: none;
    width: 100%;
    height: auto;
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: middle; /* baseline 문제 해결 */
    object-fit: contain;
    aspect-ratio:3 / 2; /* 필요 시 고정 비율 지정 */
}




.slides img.displaySlide {
    display: block;
}

.slides iframe.displaySlide {
    display: block;
}


.image_slider:hover img{
    transform:scale(1.05)
}



/* 슬라이드 view-list 눌렀을 때 */
.slides.listed {
    display: flex;
    gap: var(--padding);
    flex-wrap: nowrap;
    overflow-x: auto;
}



.slides.listed img {
    display: block;
    width: 30px;
}

.slides.listed iframe {
    display: block;
    width: 30px;
}

.sub-menu a {
    color: var(--subColorG);
}

.sub-menu a.clicked {
    color: var(--fontcolor);
}







/* 슬라이드 기본 설정 */
.slide {
    display: none;
    width: 100%;
    position: relative;
}


.displaySlide {
    display: block;
}


.prev,
.next {
    position: absolute;
    top: 50%;
    height: 100%;
    width: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    z-index: 3;


}

.prev,
.next {
  touch-action: manipulation; /* ✅ 더블탭 확대 방지 */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
-webkit-tap-highlight-color: transparent; /* ✅ 모바일 터치 하이라이트 제거 */
}


.prev {
    left: 0;
    cursor: w-resize;
}

.next {
    right: 0;
    cursor: e-resize;
}


/* img Desc */
.item_desc {
    position: -webkit-sticky;
    position: sticky;
    padding: 0;
    top: 0;
    transition: top var(--animation);


}
.item_desc .col-4 {
  overflow-y: auto;
}


.item {
  transform: translateY(50px);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.item.aos-animate {
  transform: translateY(0);
  opacity: 1;
}


.project_title {
    padding-bottom: calc(var(--padding)*2);
    cursor: pointer;
    font-weight: 700;
}

.project_desc {

    padding-bottom: calc(var(--padding)*2);
    font-weight: 400;
}

.project_credit {
    padding-bottom: calc(var(--padding)*4);
    font-weight: 400;
}

.project_title{
     white-space: nowrap;       /* 줄바꿈 안 함 */
    overflow: hidden;          /* 넘치는 내용 숨김 */
    text-overflow: ellipsis; 
}

.tagUl {
    display: flex;
    flex-wrap: wrap;
}

.tagUl li, .tagUl_Mobile li {
    display: inline;
    color: var(--fontcolor);
    font-weight: 500;
    margin-right: var(--padding);
}

 .tagUl_Mobile li {
    margin-right:0
 }

 .tagUl li a{display: inline;}

.tagUl li::after{
    content: ",";
    color: var(--subColorG);
}


.tagUl li:hover {
     color: var(--subColorG);
   
}
.tagUl_Mobile li::after{
    content: ",";
    color: var(--fontcolor);
}

#menu-item-201, #menu-item-202{text-transform: capitalize;}
.tagUl_Mobile li:hover {
    color: var(--fontcolor);
}

#menu-item-201::after {
  content: "/";
  color: var(--subColorG);
}

.tagUl li:last-child:after {
    content: " ";
}

.tagUl_Mobile li:last-child:after{
     content: " ";
}

.tagUl_web{display: block;}
.tagUl_Mobile{display: none;}

@media (max-width:768px) {

    .project_title, 
    .project_desc, .tagUl_Mobile {
        padding-bottom: var(--padding) !important;
    }

    .tagUl_web{display: none;}
    .tagUl_Mobile{display: block;}

    .tagUl_Mobile{
        display: flex;
        gap:2.5px;
        flex-wrap: wrap !important;
    }

    .tagUl {
            display: inline-block;
    }

    .tagUl li{
         margin-right: 0
    }

}