@media (hover: hover) {

	.hover:hover {
    opacity: var(--dim);
    transition: opacity 0.3s;
	}

}



@media (max-aspect-ratio: 3/4) /* 세로형 */{
  .header__background{
      padding-bottom: 200%;
      width: 350%;
  }
}
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3){
	.header__background{
	padding-bottom: 200%; 
    width: 300%;
  }
}
@media (min-aspect-ratio: 4/3) /* 가로형 */{
  .header__background{
	padding-bottom: 100%; 
    width: 150%; 
  }
}


@media all and (max-width: 812px) and (orientation:portrait){

	:root {
	  --font-size-s: 4vw;
	  --font-size-m: 4vw;
	  --line-height: 1.28;
	  --line-height-m: 1.4;
	}

	nav{
	    grid-template-columns: 24.3vw calc(100% - 24.3vw);
    	width: 100%;
	}

	.preloader {
    font-size: 12vw;
	}

	.works-group{
		opacity: 1; /* 모바일에서는 안사라지게 */
	}

	.logo{
		    padding: 3vw 2.1vw;
        font-size: 12.8vw;
	}

	.introduction{
		padding: 1.9vw 0 1.9vw 0.4vw;
	}

	.introductiontext {
    	display: none;
	}

	.keywords-box{
		margin: 3vw 2vw;
	}

	.keywords-btn{
		padding: 0;
		background: transparent;
    	backdrop-filter: none;
    	margin-bottom: 1.5vw;
	}

	.keywords-btn.all-btn {
    display: inline-block;
	}


	.keywords-btn a {
    padding: 0 1.5vw;
}

	.keywords-btn:not(.selected) {
	    background: none;
	    opacity: 0.3;
	}

	.keywords-btn:has(.selected) {
	    background: none;
	    opacity: 1;
	}


	.works-group{
		padding: 0;
    	margin: 12.5vw 0;
	}

	.works-container{
		width: calc(100% - 4vw);
    	margin: 0 2vw;
	}

	.works{
		width: calc(100% - 6.8vw);
    padding: 3vw 3.4vw 3.4vw;
	  float: none;
	  margin: 0 0 3vw;
	}

	.works figure{
		height: 60vw;
    	margin-top: 3vw;
	}

	.header__background{
		width: 350%;
    	padding-bottom: 200%;
	}

	.pop-box {
    	padding: 20vw 6.4vw;
	}
	.pop-close{
		padding: 5.4vw 6.4vw;
	}
	.pop-title{
		margin-bottom: 6vw;
	}
	.pop-description{
		margin-bottom: 6vw;
	}

	.pop-long-introduction {
	    margin-bottom: 6vw;
	}

	.year {
    padding-left: 0.6vw;
	}

	.role {
    padding-left: 0.6vw;
	}


	.pop-memberbox{
		margin-bottom: 6vw;
	}

	.img-grid {
    	padding-bottom: 6vw;
	}
	.twobtn{
		grid-template-columns: 100%;
		grid-gap: 6vw;
	}

	.twobtn img{
		width: 100%;
	}

	.twovideo{
		grid-template-columns: 100%;
	    width: 100%;
	    grid-gap: 6vw;
	}

	.imgvideo{
		grid-template-columns: 100%;
	    width: 100%;
	    grid-gap: 6vw;
	}

	ul.menu a {
	    width: max-content;
	    display: inline-block;
	    background: rgba(0,0,0,0.3);
	    backdrop-filter: blur(40px);
	    -webkit-backdrop-filter: blur(40px);
	    border-radius: 10px;
	    margin-right: 0.1vw;
    	padding: 1.5vw 3.4vw 1.5vw;
	}

	ul.menu a:last-child{
		margin-right: 0;
	}

	ul.filter {
	    background: rgba(0,0,0,0.3);
	    backdrop-filter: blur(40px);
	    -webkit-backdrop-filter: blur(40px);
	    border-radius: 15px;
	    padding: 3vw 1.9vw 1.5vw;
	}

	.figurebox {
    	padding: 20vw 0 0;
	}

}