body{ overflow: hidden;}

/* intro */
.loading{ background-color: var(--bg-green);}
.loading::before{ background-color: #fff;}
.intro{  display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 11;   }
.intro-main{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--bg-green);}
.intro-main p{font-size: 100px; font-weight: bold; text-align: center; opacity: 0;}

#intro_item1{ transform: translateY(40px); }
#intro_item2{ transform: translateX(40px); }
#intro_item3{ transform: translateY(-40px); }
#intro_item4{ transform: translateX(-40px); }

/* calendar */
.calendar .item.none{ background-color: var(--bg-green);}
.calendar .item.mobile{ display: none;}
.home-container{ width: 100%; height: 100%; background-color:var(--bg-green); display: flex; justify-content: center; align-items: center;}
.home-project{ position: relative; width: 90%; height: 80%;}
.calendar{display: grid; width: 100%; height: 100%; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

.calendar .item{ border: 5px solid var(--bg-green); position: relative; z-index: 2; overflow: hidden;  }
.calendar .item a{ position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; box-sizing: border-box;}
.calendar .item.showDone { transform: translateY(0%)}

.calendar .item.single{ background-color: var(--bg-green);}
.calendar .item.single a{ z-index: 2; color: #000;}
.calendar .item.single::after{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 1px solid #000; }
.calendar .item.single:hover{ background-color: rgba(255, 255, 255, 0.5);}
.calendar .item.single a span{ display: block; position: absolute; left: 20px; right: 20px; bottom: 20px; white-space: nowrap; padding-bottom: 10px; text-align: right; }
.calendar .item.single a span::after{ content: ''; position: absolute; width: 100%; left: 0; bottom: 0; border-bottom: 2px solid #000;}


/* orange item */
.calendar .item.bg-orange:hover{ background-color: rgba(255, 255, 255, 0.5) !important;}
.calendar .item.bg-orange a{ z-index: 2; color: #000; display: flex; flex-direction: column; justify-content: flex-end;}

.calendar .item.bg-orange a>div{ padding: 20px;}
.calendar .item.bg-orange a>div span, .calendar .item.bg-orange a>div em{ display: block;}
.calendar .item.bg-orange a>div span{
	text-align: right;
	width: 100%;
	max-height: 42px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.calendar .item.bg-orange a>div em{ border-bottom: 2px solid #000; margin-top: 10px;}
.calendar .item.bg-orange::after{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 1px solid #000; }


.calendar .item.project a:hover{ background-color: rgba(255, 255, 255, 0.7);}
.calendar .item a i{ display: flex; justify-content: center; align-items:flex-end;  font-size: 32px;  width: 100%; height: 60%; position: relative; color: #FFF; overflow: hidden; transition: all 0.5s;}

.calendar .item.project a i::after{ content: ''; position: absolute; width: 50px; border-bottom: 1px solid #FFF; left: 50%; bottom: 0; margin-left: -25px;}
.calendar .item.project span{ color: #000; display: block; text-align: center; font-size: 12px;  padding: 5px 20px ; margin: auto;
	overflow:hidden;
	word-wrap: break-word;
	height: 25px;
	line-height: 14px;
}
.calendar .item.project a:hover i{ color: #000;}
.calendar .item.project a:hover i::after{ border-color: #000; border-width: 2px;}


/* calendar-bg */
.calendar-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.swiper-slide{ background-size: cover;  }

/* logo */
.item-logo{ z-index: 3 !important; position: absolute; left: 5px; top: 5px; background-image: url(../images/logo.png); background-size: 100%; background-repeat: no-repeat; background-color: var(--bg-green); background-position: center center; overflow: hidden; text-indent: -9999px;}
.mobile-logo{ display: none;}

.swiper {
    width: 100%;
    height: 100%;
}  

@media screen and (max-width: 1440px) {
	.calendar .item a i{ font-size: 28px;}
	.calendar .item.project span{ font-size: 10px;}
	.calendar .item.bg-orange a>div span{ font-size: 14px;}
	.calendar .item.single a span{ font-size: 14px;}
}

@media screen and (max-width: 640px) {
	body{ overflow: visible;}
	body::before{ display: none;}
	/* intro */
	.intro-main>div{ height: auto;}
	.intro-main p{font-size: 40px;}

	/* logo */
	.item-logo{ display: none;}
	.mobile-logo{ display: block;}
	.mobile-logo img{ width: 100%;}

	/* calendar */
	.home-container{ height:auto; padding-bottom: 40px; min-height: 100%; flex-direction: column;}
	.home-project {
		width: 94%;
		height: auto;
	}
	.calendar{ grid-template-columns: 1fr 1fr 1fr;}
	.calendar .item.first, .calendar .mobile-hide{ display: none;}
	.calendar .item{ height: 76px;}

	.calendar .item.desktop{ display: none;}
	.calendar .item.mobile{ display: block; background-color: var(--bg-green);}

	.calendar .item{ border-width: 3px;}
	.calendar .item.single a::after{ border: 2px solid #000; }
	.calendar .item.single a span{ padding-bottom: 6px; font-size: 10px; word-wrap:normal; left: 10px; right: 10px; }
	.calendar .item.single a span::after{border-bottom: 2px solid #000; width: 50%; left: auto; right: 0;}

	.calendar .item.project a i{ font-size: 18px;  height: 50%; }
	.calendar .item.project a i::after{ width: 50px; margin-left: -25px;}
	.calendar .item.project span{ font-size: 10px;  padding: 5px 5px 0 5px;
		height: 30px;
		line-height: 1.2;
	}
	.calendar .item.bg-orange a>div {
		padding: 0 10px 20px 10px;
		position: relative;
	}
	.calendar .item.bg-orange a>div span {
		max-height: 42px;
		font-size: 10px;
	}
	.calendar .item.bg-orange a>div em {
		width: 50%;
		margin-left: auto;
		margin-top: 5px;
	}




}

/* 显示省略号 */
.ellipsis{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; 
}

@media screen and (max-width: 980px) and (orientation: landscape) {
	/* 横屏 */
	body{ overflow-y: visible; background-color: var(--bg-green);}
	.intro-main p{font-size: 40px;}
	.calendar .item a i {
		font-size: 20px;
	}
	.home-container{ height: auto; padding: 30px 0;}
	.calendar .item{ min-height: 80px;}
	.home-project{ height: 90%;}
	.calendar .item.bg-orange a>div {
		padding: 5px;
	}	
	.calendar .item.project span {
		font-size: 10px;
		padding: 5px;
		height: 18px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; 
	}
	.calendar .item.single a span {
		left: 5px;
		right: 5px;
		bottom: 10px;
		padding-bottom: 5px;
		font-size: 12px;
	}
	.calendar .item.bg-orange a>div span {
		font-size: 12px;

	}
	.calendar .item.bg-orange a>div em {
		border-bottom: 1px solid #000;
		margin-bottom: 5px;
		margin-top: 5px;
	}
	.calendar .item.single a span::after {
		border-bottom: 1px solid #000;
	}
}