@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Ramabhadra&family=Barlow+Semi+Condensed&&family=Rubik:wght@600,700,800&display=swap');

#area-middle {
	padding:20px 10%;	
}
#area-middle .area-breadcrumb {
	color:#646464;
	font-size:20px;
	margin-bottom:20px;
}
#area-banner {
     position: relative;
 	 text-align: center;
	 overflow: hidden;
/*	 padding:0 15%;*/
}
#area-banner img {
	width:100%;
}
#area-banner .title {
    color: #000;
    font-size: 4vw;
    font-weight:700;
	font-family: 'Rubik', sans-serif;
	line-height:4vw;
    position: absolute;
    text-align: left;
    left: 57%;
	top: 33%;
    /*transform: translate(-50%,0%);*//*2020*/
}
#area-banner .title .inside {
	text-shadow:none;
}
#area-banner .title .date {
	color:#FFF;
	margin-top:1.5vw;
	font-size: 2.3vw;
	font-weight:700;
	line-height:2.3vw;
}
#themehall-past-events button {
	cursor:pointer;
}
@media (max-width:991px) {
	#area-banner .title {
		font-size: 4vw;
		line-height:4vw;
	}
	#area-banner .title .date {
		font-size: 3vw;
		line-height:3.2vw;
	}
	#area-banner img {
		width:auto;
	}
}
#area-countdown {
    position: relative;
	margin:1vh 0;
	overflow: hidden;
}
#area-countdown img {
	width: 100%;	
}
#area-countdown .box {
	position: absolute;
	text-align:center;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#area-countdown .box .title {
	font-size:20px;
	font-weight:bold;
	margin-bottom:8vh;	
}
#area-countdown .box .countarea {
	font-family: 'Bebas Neue', cursive;
	font-size:56px;
	display: flex;
	flex-direction: row;
}
#area-countdown .box .countarea .item {
	margin:0 10px;
}
#area-countdown .box .countarea .text {
	font-family: 'Arimo', sans-serif;	
	font-size:18px;
}
#area-program {
	position: relative;
	text-align: center;
	margin:5vh 0;
	padding:0 15%;
}

#area-program .box {
	background-image:url(../../images/themehall-background-program.jpg);
	background-repeat:no-repeat;
	/*background-size:80%;*/
	background-position:center;
	height: 130px;
	margin: 0 auto;
	cursor:pointer;
	transition: all 0.8s ease-in-out;
}
#area-program .box:hover {
	background-image:url(../../images/themehall-background-program-hover.jpg);
	/*background-size:80%;*/
}
#area-program .box div {
	font-family: 'Arimo', sans-serif;
	font-size:30px;
	font-weight:bold;
	position: absolute;
	text-align:center;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	padding:5px 20px;
	border:#000 solid 2px;
}
#area-subject {
	position: relative;
	text-align: center;
	margin:5vh 0;
	padding:0 15%;
}
#area-subject .box {	
	position: relative;
	width: 100%;
	/*max-width: 1070px;*/
	margin:0 auto;
	overflow: hidden;
	display: flex;
	flex-direction: row;	
}
#area-subject .box img {
	width:100%;	
}
#area-subject .box .text {
	position: relative;
	background-image:url(../../images/themehall-background-subject.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	transition: all 0.8s ease-in-out;
	cursor:pointer;
}
#area-subject .box .text:hover {
	background-image:url(../../images/themehall-background-subject-hover.jpg);
}
#area-subject .box .text:hover .shape {
	bottom:	0vh;
}
#area-subject .box .date {
	position: absolute;	
	top: 2.5vw;
	left: 3vw;
	font-family: 'Arimo', sans-serif;
	font-size:2.5vw;
	font-weight:bold;
	line-height:2.8vw;
	text-align:left;
	color:#FFF;
}
#area-subject .box .title {
	position: absolute;	
	top: 2.5vw;
	right: 3vw;
	font-family: 'Ramabhadra', sans-serif;
	font-size:2.5vw;
	line-height:2.8vw;
	text-align:right;
}
#area-subject .box .time {
	position: absolute;	
	bottom: 2.5vw;
	left: 3vw;
	font-family: 'Arimo', sans-serif;
	font-size:1.5vw;
	font-weight:bold;
	line-height:2.5vw;
	text-align:left;
	color:#FFF;
}
#area-subject .box .shape {
	position: absolute;	
	bottom:	-12vw;
	height:12vw;
	width: 100%;
	padding:0 4vw;
	background-color:#edc3d6;
	color:#000;
	display: table;
	transition: all 0.8s ease;
}
#area-subject .box .shape .description {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size:1.2vw;
	line-height:1.5vw;
	display: table-cell;
	vertical-align: middle;
	text-align:left;
}
#area-showroom, #area-ideas {
	position: relative;
	text-align: center;
	margin:5vh 0;
	padding:0 15%;
}
#area-showroom .box, #area-ideas .box {
	background-image:url(../../images/themehall-background-showroom.jpg);
	background-repeat:no-repeat;
	background-position:center;	
	height: 150px;
	margin: 0 auto;
	cursor:pointer;
	transition: all 0.8s ease-in-out;
}
#area-showroom .box:hover, #area-ideas .box:hover {
	background-image:url(../../images/themehall-background-showroom-hover.jpg);	
}
#area-showroom .box div, #area-ideas .box div {
	font-family: 'Arimo', sans-serif;
	font-size:30px;
	font-weight:bold;
	position: absolute;
	text-align:center;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
@media (max-width:1341px) {
	#area-banner img, #area-program img {
		width: 100%;
	}
	#area-program, #area-showroom, #area-ideas { {
		padding:0 10%;
	}
	#area-subject .box {
		width: 100%;
	}
}
@media (max-width:991px) {
	#area-banner, #area-program, #area-subject, #area-showroom, #area-ideas {
		padding:0;
	}
	#area-countdown {
		margin:20px 0;
	}
	#area-countdown img {
		width: 150%;	
	}
	#area-countdown .box .title {
		margin-bottom:0;		
	}
	#area-countdown .box {
		top:60%;		
	}
}
@media (max-width:576px) {
	#area-subject .box .shape {
		display:none;	
	}
	#area-subject .box .title {
		font-size:5.5vw;
		line-height:5.8vw;
		top:12vw;
	}
	#area-subject .box .date {
		font-size:4.5vw;
		line-height:4.8vw;
	}
	#area-subject .box .time {
		font-size:3.5vw;
		line-height:4.5vw;
	}
}