body{
	--cut: 10px;
}

/*Section1*/
#section1{
	width: 100vw;
	background: url(../img/bg.jpg) no-repeat top center;
	background-size: cover;
	background-attachment: fixed;
	padding: 50px 0;
}
#section1 p{
	margin-bottom: 30px;
}
h1{
	font-family: var(--spFont);
	font-size: 8vw;
	line-height: 1em;
	margin-bottom: 20px;
	font-weight: 700;
	color: var(--White);
	text-transform: uppercase;
}
.w1024 div:nth-child(2) h1,
.w1024 div:nth-child(3) h1{
	margin-top: 50px;
}
.filter{
	width: 180px;
	position: fixed;
	left: 30px;
	top: 220px;
	z-index: 3;
}
.linkTitle{
	font-family: var(--spFont);
	font-weight: 200;
	color: var(--Green);
	font-size: 40px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.filter a{
	width: fit-content ;
	height: 26px;
	line-height: 26px;
	display: block;
	padding: 0 10px;
	font-size: 12px;
	color: var(--White);
	font-family: var(--spFont);
	border:1px solid var(--shadow);
	text-transform: uppercase;
	margin: 0 0 10px 0;
}
.filter a:hover .char,
.filter a.active .char{
    animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation-delay: calc(60ms * var(--char-index));
}
.filter a:hover,
.filter a.active{
	background: var(--shadow);
	color: var(--Green);
	transition: .3s;
	box-shadow: 0 0 5px var(--shadow);
}
.allLinks{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.allLinks a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	clip-path: polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
	width: 48%;
	padding: 15px 15px;
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	color: var(--White);
	background-color: rgba(72,255,236,.1);
  	backdrop-filter: blur(5px);

}
.allLinks a i{
	color: var(--Green);
}
.allLinks a:focus,
.allLinks a:hover{
	clip-path: polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}

/*Hover Img Show*/
.hover{
	position: relative;
}
.hover-reveal {
	position: absolute;
	z-index: -1;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	overflow: hidden;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
}

.hover-reveal__inner {
	overflow: hidden;
}

.hover-reveal__inner,
.hover-reveal__img {
	width: 100%;
	height: 100%;
	position: relative;
}

.hover-reveal__img {
	background-size: cover;
	background-position: 50% 50%;
}
/*End Hover Img Show*/



/*////RWD////*/
@media screen and (max-width:1660px) {
	
}
@media screen and (max-width:1440px) {
	.w1024 {
	    margin-left: 20%;
	}
}
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1280px) {
	
}
@media (orientation:landscape) and (max-height: 800px) {
	
}
@media screen and (max-width:1024px) {
	.w1024 {
    	margin-left: 24%;
	}
}
@media (orientation:landscape) and (max-height: 768px) {

}
@media (orientation:portrait) and (max-height: 1180px) {
	#section1{
		background-attachment: initial;
		background-repeat:repeat-y; 
		background-size: contain;
	}
	.allLinks a{
		width: 100%;
	}
	.w1024 {
    	width: 65%;
    	margin-left: 30%;
	}
}
@media (orientation:portrait) and (max-height: 1024px) {
	.w1024 {
    	width: 60%;
    	margin-left: 34%; 
	}
}
@media (orientation:portrait) and (max-width: 480px) {
	h1 {
    	font-size: 10vw;
	}
	.w1024 {
    	width: 50%;
    	margin-left: 40%;
	}
	.allLinks a {
		font-size: 16px;
	}
	.filter {
	    top: 170px;
	}
	.linkTitle {
	    font-size: 36px;
	}
}
/*Iphone XR 414*896 */
@media (orientation: portrait) and (max-height: 896px) {
  
}
/*Iphone 12Pro 390*844 */
@media (orientation: portrait) and (max-height: 844px) {
	
}
/*Iphone 10 375*812 */
@media (orientation: portrait) and (max-height: 812px) {
  
}

/*Iphone 8Plus 414*736 */
@media (orientation: portrait) and (max-height: 736px) {
  
}
/*Iphone 8 375*667 */
@media (orientation: portrait) and (max-height: 667px) {
	
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 320px) {
}