body{overflow-y: hidden;}
.intro{position:fixed; top: 0; left: 0; width: 100%; height: 100%;cursor: pointer; z-index: 1000;}
.intro .logo{position:absolute; top: 0; left: 0; background:url(/img/common/logoH.png) 50% 50% no-repeat; width: 96px; height: 91px; margin: 40px 30px 20px 60px; transition:0.8s; z-index: 100;}
.intro .logo.on{background:url(/img/common/logo.png) 50% 50% no-repeat;}
.intro .intro_bg{}
.intro .intro_bg .bg{width: 100vw; height: 100vh; background-size:cover; background-repeat: no-repeat; background-position:50% 50%;}
.intro .intro_bg .bg01{background-image:url(/img/common/intro01_2.jpg);}
.intro .intro_bg .bg02{background-image:url(/img/common/intro02.png);}
.intro .intro_bg .bg03{background-image:url(/img/common/intro03.png);}
.intro a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}


.main{opacity: 0; transition:0.6s 0.6s}
.main.in{opacity: 1;}
.main .project_list{display:flex; flex-wrap:wrap;}
.main .project_list .item{position:relative; width: calc((100% - 186px) / 4); margin-right: 62px; margin-bottom:40px; overflow: hidden;}
.main .project_list .item:nth-of-type(4n){margin-right: 0;}
.main .project_list .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main .project_list .item figure{position:relative; overflow: hidden; padding-bottom:120%;}
.main .project_list .item figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); max-width: inherit; height: 100%;}
.main .project_list .item .hover{position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #00000090; }
.main .project_list .item .hover h2{position:absolute; bottom: 0; left: 0; width: 100%; font-weight:300; font-size:16px; color: #fff; padding: 20px;}

@media (max-width: 1400px){
	.main .project_list .item{width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom:20px;}
}

@media (max-width: 1200px){
	.intro .logo{margin: 20px 16px 10px;}

	.main .project_list .item{width: calc((100% - 40px) / 3);}
	.main .project_list .item:nth-of-type(4n){margin-right: 20px;}
	.main .project_list .item:nth-of-type(3n){margin-right: 0;}
}

@media (max-width: 800px){
	.main .project_list .item{width: calc((100% - 20px) /2);}
	.main .project_list .item:nth-of-type(3n),
	.main .project_list .item:nth-of-type(4n){margin-right: 20px;}
	.main .project_list .item:nth-of-type(2n){margin-right: 0;}
	.main .project_list .item .hover{top: 0 !important; left: 0 !important; position:static; background: transparent;}
	.main .project_list .item .hover h2{padding: 14px 20px 10px; font-weight:500; margin-top: 6px;/*  background: #00000090; */}
	
	.intro .intro_bg .bg01{background-image:url(/img/common/intro_m01_2.jpg);}
	.intro .intro_bg .bg02{background-image:url(/img/common/intro_m02.png);}
	.intro .intro_bg .bg03{background-image:url(/img/common/intro_m03.png);}

}