.subtop-wrap h1{opacity:0;}
.subtop-wrap > .inner-wrap > .threed-dwrap{position:absolute; top:20px; left:50%; width:584px; transform-style: preserve-3d; transition: all 1.5s ease-in-out; transform: rotate3d(1,-1,0,60deg) translate(-50%,0); opacity:0;}
.subtop-wrap > .inner-wrap > .threed-dwrap > img{width:100%;}

.project-search-wrap{padding:var(--gap-140) 0;}
.project-search-wrap > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto; display:flex; justify-content: center; align-items: flex-start;}
.project-search-wrap > .inner-wrap > button{width:40px; height: 40px; border-radius: 50%; display:flex; align-items: center; justify-content: center; transition: all .5s; background-color:var(--color-point); border:1px solid var(--color-point); box-sizing: border-box;}
.project-search-wrap > .inner-wrap > button:hover{background-color:transparent;}
.project-search-wrap > .inner-wrap > button > img{width:15px;}
.project-search-wrap  .tag-wrap{overflow-x: auto; position: relative; white-space: nowrap; margin-right:20px; width:calc(100% - 60px); max-width:700px; padding-bottom:20px;}
.project-search-wrap  .tag-wrap::-webkit-scrollbar {height: 3px;background: #3A3A3A;}
.project-search-wrap  .tag-wrap::-webkit-scrollbar-thumb {background-color: var(--color-point); border-radius: 5px;}
.project-search-wrap  .tag-wrap::-webkit-scrollbar-track {background: #3A3A3A;}
.project-search-wrap .inner-tag-wrap{display: inline-flex; gap:var(--gap-20); width: max-content; white-space: normal; padding:0 20px;}
.project-search-wrap .tag-box{width:auto; text-align: center; padding:5px var(--gap-30); border:1px solid var(--color-point); border-radius: 20px; box-sizing: border-box; color:#fff; font-size:var(--font-size-normal); cursor:pointer; transition: all .5s;}
.project-search-wrap .tag-box.on{background-color:var(--color-point);}





.contents-grid-wrap{padding:var(--gap-140) 0; overflow: hidden;}
.contents-grid-wrap .search-result-wrap{width:calc(100% - var(--layout-flax-margin)); display:flex; flex-wrap: wrap; gap:20px; margin:0 auto var(--gap-40) auto;}
.contents-grid-wrap .search-result-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}
.contents-grid-wrap .search-result-wrap > p > span{color:var(--color-point); font-weight: 900;}
.contents-grid-wrap .search-result-wrap > #cancleSearchBtn{border-radius: 20px; padding:5px 10px; color:#fff; font-size:var(--font-size-small); background-color:var(--color-point);}

.contents-grid-wrap > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto;  display:flex; flex-wrap: wrap; gap:100px 3%; perspective: 1000px;}
.contents-grid-wrap .content-box{width:17.6%; transform-style: preserve-3d; transition: all 1.5s ease-in-out;  opacity:0;}
.contents-grid-wrap .content-box > .thumnail-box{position:relative; overflow: hidden;}
.contents-grid-wrap .content-box > .thumnail-box:before{content:""; display:block; clear:both; padding-top:116%;}
.contents-grid-wrap .content-box .image-box{width:100%; height: 100%; overflow: hidden; border-radius: 10px; background-color:#17171A; position:absolute; top:0; left:0; z-index: 0; display:flex; align-items: center; justify-content: center;}
.contents-grid-wrap .content-box .image-box > img{ transition:all .5s; object-fit: cover; opacity:.3; width:100%; height: 100%;}
.contents-grid-wrap .content-box .thumnail-box > .info-wrap{display:flex; flex-direction: column; justify-content: space-between; padding:var(--gap-20); box-sizing: border-box; position:absolute; top:0; left:0; z-index: 1; height: 100%; width:100%;}
.contents-grid-wrap .content-box .thumnail-box > .info-wrap > .part-wrap{display:flex; justify-content: space-between;  align-items: center; color:#fff; font-size:var(--font-size-small); text-transform: }
.contents-grid-wrap .content-box .thumnail-box > .info-wrap > .hash-tag{color:#fff; font-size:var(--font-size-small);}
.contents-grid-wrap .content-box > .info-box{color:#fff; margin-top:var(--gap-20);}
.contents-grid-wrap .content-box > .info-box > p{transition:all .5s; color:#fff;}
.contents-grid-wrap .content-box > .info-box .stlt{font-size:var(--font-size-small);}
.contents-grid-wrap .content-box > .info-box .tlt{font-size:var(--font-size-normal);}
.contents-grid-wrap .content-box .thumnail-box > .info-wrap > .part-wrap > img{transition:all .5s;}
.contents-grid-wrap .content-box .thumnail-box > .info-wrap > .part-wrap > p{transition:all .5s; text-transform: uppercase;}
.contents-grid-wrap .content-box .thumnail-box > .info-wrap > .hash-tag > p { white-space: nowrap; overflow: hidden; text-overflow: clip; transition: all 0.5s; }
.contents-grid-wrap .content-box.on .thumnail-box > .info-wrap > .part-wrap > img{transform:translateX(-100%); opacity:0;}
.contents-grid-wrap .content-box.on .thumnail-box > .info-wrap > .part-wrap > p{transform:translateX(100%); opacity:0;}
.contents-grid-wrap .content-box.on .thumnail-box > .info-wrap > .hash-tag > p{transform:translateY(100%); opacity:0;}
.contents-grid-wrap .content-box.on .image-box > img{transform:scale(1.2); opacity:1;}
.contents-grid-wrap .content-box.on > .info-box > p{color:var(--color-point);}

.moreBtn{padding:10px 20px; border:1px solid #fff; display:flex; align-items: center; font-size:var(--font-size-normal); color:#fff; transition:all .5s; background-color:transparent; margin:var(--gap-140) auto;}
.moreBtn > img{margin-left:20px; transition:all .5s;}
.moreBtn:hover{background-color:var(--color-point); border-color:var(--color-point)}
.moreBtn:hover > img{transform: rotate(360deg)}
.numbering-wrap{margin-top:var(--gap-140);}


.project-read-top{width:100%; height: 100vh; position:relative; display:flex; align-items: center; justify-content: center; background-color:#17171A;}
.project-read-top > .image-wrap > img{opacity: .7; object-fit: cover; width:100%; height: 100%; position:absolute; z-index: 0; top:50%; left:50%; transform: translate(-50%,-50%);}
.project-read-top > .text-wrap{text-align: center; width:calc(100% - var(--layout-flax-margin)); max-width:1000px; position:absolute; z-index: 1; top:50%; left:50%; transform: translate(-50%,-50%);}
.project-read-top > .text-wrap > .icon{margin:0 auto 20px auto; transition:all .5s; opacity:0; transform: translateY(-50%);}
.project-read-top > .text-wrap > .icon.on{opacity:1; transform: translateY(0);}
.project-read-top > .text-wrap .stlt{font-size:var(--font-size-normal); color:#fff; font-weight: 900; opacity:0; text-transform: uppercase;}
.project-read-top > .text-wrap .tlt{font-size:var(--font-size-huge); color:#fff; font-weight: 400; margin-top:var(--gap-100); line-height: 120%; opacity:0;}




.project-read-info-wrap{padding:var(--gap-140) 0; overflow: hidden;}
.project-read-info-wrap > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto;  display:flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
.project-read-info-wrap .left-wrap{width:calc(50% - 30px); color:#fff;}
.project-read-info-wrap .left-wrap > .stlt{font-size:var(--font-size-large); margin-bottom:10px;} 
.project-read-info-wrap .left-wrap > .tlt{font-size:var(--font-size-huge); font-weight: 600; margin-bottom:var(--gap-40); line-height: 120%; word-break: break-all;}
.project-read-info-wrap .left-wrap > .cont{font-size:var(--font-size-large); white-space: pre-line;}
.project-read-info-wrap .right-wrap{width:calc(50% - 30px); color:#fff; display:flex; justify-content: flex-end; gap:var(--gap-40);}
.project-read-info-wrap .right-wrap .stlt{color:var(--color-font); font-size:var(--font-size-normal); margin-bottom:30px;}
.project-read-info-wrap .right-wrap .tlt{color:#fff; font-size:var(--font-size-large);}


.project-read-contents-wrap{padding:var(--gap-140) 0; overflow: hidden;}
.project-read-contents-wrap > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto; color:#fff; font-size:var(font-size-normal);}
.project-read-contents-wrap > .inner-wrap img{width:100%; display:block; font-size:0px;}


@media only screen and (max-width:1000px){
	.contents-grid-wrap > .inner-wrap{flex-wrap: wrap; gap:80px 3%;}
	.contents-grid-wrap .content-box{width:22.6%}
}


@media only screen and (max-width:768px){
	.contents-grid-wrap > .inner-wrap{flex-wrap: wrap; gap:60px 2%;}
	.contents-grid-wrap .content-box{width:31.9%}
	.project-read-info-wrap .left-wrap > .cont{font-size:var(--font-size-large); white-space:normal;}
}


@media only screen and (max-width:640px){
	.contents-grid-wrap > .inner-wrap{flex-wrap: wrap; gap:40px 2%;}
	.contents-grid-wrap .content-box{width:49%}
	.subtop-wrap > .inner-wrap > .threed-dwrap{width:calc(100vw - var(--layout-flax-margin));}
	.subtop-wrap > .inner-wrap > .threed-dwrap{width:300px; top:50px;}
	.project-read-info-wrap .left-wrap{width:100%; color:#fff;}
	.project-read-info-wrap .right-wrap{width:100%; color:#fff; margin-top:var(--gap-40); justify-content: flex-start;}
	.project-read-info-wrap > .inner-wrap{justify-content: flex-start;}
}