@import "style.css";

.container{
	max-width:none;
	padding:0;
}
.container > section:not(:first-child){
	width:84.21%;
	max-width:1600px;
	margin:0 auto;
}

/************************************** home start ***************************************************/
#home{
	color:#1d1b1b;
	background:#FFF;
}
#home .ct{
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}

#home .main{
	position:relative;
	width:84.21%;
	max-width:1600px;
	margin-top:2.5%;
}

/*********** 事業類別 icon 選單 start ***********/
.indexBU{
	display:flex;
	justify-content:space-between;
}
.indexBU li{
	position:relative;
	width:16.56%;
}
.indexBU li:before{
	content:"";
	display:block;
	padding-top:193.96%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.indexBU li:nth-child(1):before{ background-image:url(../images/index_bu1.jpg);}
.indexBU li:nth-child(2):before{ background-image:url(../images/index_bu2.jpg);}
.indexBU li:nth-child(3):before{ background-image:url(../images/index_bu3.jpg);}
.indexBU li:nth-child(4):before{ background-image:url(../images/index_bu4.jpg);}
.indexBU li:nth-child(5):before{ background-image:url(../images/index_bu5.jpg);}
.indexBU li:nth-child(6):before{ background-image:url(../images/index_bu6.jpg);}
.indexBU li a{
	position:absolute;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0);
	transition:background 0.3s;
}
.indexBU li a .icon{
	width:41.5%;
	border:2px solid #FFF;
	border-radius:50%;
	opacity:0;
	transform:translateY(-10%);
	transition:all 0.3s;
}
.indexBU li a .icon:before{
	content:"";
	display:block;
	padding-top:100%;
	background:url(../images/bu.png) no-repeat;
	background-size:600%;
	background-position-y:top;
}
.indexBU li:nth-child(1) a .icon:before{ background-position-x:0%;}
.indexBU li:nth-child(2) a .icon:before{ background-position-x:20%;}
.indexBU li:nth-child(3) a .icon:before{ background-position-x:40%;}
.indexBU li:nth-child(4) a .icon:before{ background-position-x:60%;}
.indexBU li:nth-child(5) a .icon:before{ background-position-x:80%;}
.indexBU li:nth-child(6) a .icon:before{ background-position-x:100%;}

.indexBU li a em{
	display:inline-block;
	font-style:normal;
	font-size:1.05em;
	font-weight:bold;
	line-height:1em;
	letter-spacing:0.1em;
	border:2px solid;
	border-top:none;
	border-bottom:none;
	margin-top:1.2em;
	padding:0 0.6em;
	color:#FFF;
	opacity:0;
	transform:translateY(100%);
	transition:all 0.3s;
}

.indexBU li a:hover{
	background:rgba(0, 0, 0, 0.6);
}
.indexBU li a:hover .icon,
.indexBU li a:hover em{
	opacity:1;
	transform:none;
}
/*********** 事業類別 icon 選單 end ***********/

/*********** 主標 start ***********/
h3{
	margin-top:5%;
	font-size:2.4em;
	letter-spacing:0.08em;
}
h3 strong{
	font-size:1.1em;
	font-weight:normal;
	display:inline-block;
}
h3 span{
	display:inline-block;
	margin-left:0.6em;
	min-height:1em;
	visibility:hidden;
}
h3 span:before{
	content:"/";
	display:inline-block;
	margin-right:0.8em;
	font-weight:normal;
}
/*********** 主標 end ***********/

/*********** scrollHint start ***********/
.scrollHint{
	position:absolute;
	right:0;
	bottom:0;
	cursor:pointer;
	font-family:BrandonGrotesqueMedium;
	font-weight:bold;
	display:flex;
	align-items:center;
	letter-spacing:0.05em;
}
.scrollHint span{
	width:2.4em;
	height:2.4em;
	border:2px solid;
	border-radius:50%;
	margin-left:0.7em;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background 0.2s;
}
.scrollHint span i{
	position:relative;
	width:2px;
	height:52%;
	background:currentColor;
	transition:background 0.2s;
	animation:floatArrow 0.5s ease-in alternate infinite;
}
@keyframes floatArrow{
	from{
		transform:translateY(-15%);
	}
	to{
		transform:translateY(15%);
	}
}
.scrollHint span i:before{
	position:absolute;
	content:"";
	display:block;
	left:1px;
	bottom:-2px;
	width:0.7em;
	height:0.7em;
	border:2px solid currentColor;
	border-top:none;
	border-right:none;
	transform-origin:left bottom;
	transform:rotate(-45deg) skewX(4deg);
	transition:color 0.2s;
}
.scrollHint:hover span{
	background:currentColor;
}
.scrollHint:hover span i{
	background:#FFF;
}
.scrollHint:hover span i:before{
	color:#FFF;
}
/*********** scrollHint end ***********/
/************************************** home end ***************************************************/

/************************************** about start ***************************************************/
#about .ct{
	display:flex;
	flex-direction:column;
	align-items:center;
}
#about .main{
	width:100%;
	margin:15% 0 10%;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#about .main .intro{
	width:27%;
	text-align:center;
}
#about .main .intro p{
	position:relative;
	font-size:1.25em;
	margin-top:1.5em;
	padding-top:2em;
}
#about .main .intro p:before{
	position:absolute;
	left:50%;
	top:0;
	content:"";
	display:block;
	width:3.8em;
	height:2px;
	background:currentColor;
	transform:translateX(-50%);
}
#about .main img{
	order:-1;
	width:28.75%;
	display:block;
}
#about .main .txt{
	width:30%;
	font-size:1.25em;
}
/************************************** about end ***************************************************/

/************************************** business start ***************************************************/
#business .ct{
	display:flex;
	flex-direction:column;
	align-items:center;
}
#business .main{
	width:100%;
	margin:10% 0 5%;
	text-align:center;
}

/*********** 事業類別 icon 選單 start ***********/
.bu{
	margin-top:3.5%;
}
.bu > li em{
	display:inline-block;
	font-style:normal;
	font-size:1.25em;
	line-height:1em;
	border:2px solid;
	border-top:none;
	border-bottom:none;
	margin-top:2em;
	padding:0 0.6em;
	color:#666;
}
.bu > li ul{
	margin:2.5em auto 0;
	width:55.29%;
}
.bu > li:nth-child(1) ul{
	width:74.11%;
}
.bu > li ul li+li{
	margin-top:1.5em;
}
.bu > li ul li a{
	display:block;
	font-size:0;
	transition:transform 0.2s;
}
.bu > li ul li a:hover{
	transform:scale(1.2);
}
.bu > li ul li a:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	padding-top:34.28%;
}
.bu > li ul li.mot a:before{
	background-image:url(../images/bu_mot.png);
	padding-top:17.14%;
}
.bu > li ul li.casa a:before{
	background-image:url(../images/bu_casa.png);
}
.bu > li ul li.select a:before{
	background-image:url(../images/bu_select.png);
}
.bu > li ul li.flower a:before{
	background-image:url(../images/bu_flower.png);
}
.bu > li ul li.nordic a:before{
	background-image:url(../images/bu_nordic.png);
}
.bu > li ul li.domani a:before{
	background-image:url(../images/bu_domani.png);
	padding-top:24.28%;
	transform:scale(1.2);
}
.bu > li ul li.bar a:before{
	background-image:url(../images/bu_bar.png);
	padding-top:26.87%;
	transform:scale(1.2);
}
.bu > li ul li.oldBridge a:before{
	background-image:url(../images/bu_oldBridge.png);
	padding-top:32.5%;
	transform:scale(1.1);
}
.bu > li ul li.dft a:before{
	background-image:url(../images/bu_dft.png);
	padding-top:75%;
	transform:scale(0.85);
}
.bu > li ul li.cafe a:before{
	background-image:url(../images/bu_cafe.png);
}
.bu > li ul li.times a:before{
	background-image:url(../images/bu_times.png);
	padding-top:50%;
}
.bu > li ul li.arts a:before{
	background-image:url(../images/bu_arts.png);
}
/*********** 事業類別 icon 選單 end ***********/
/************************************** business end ***************************************************/


@media screen and (max-width:1023px){
	
	.container > section:not(:first-child){
		width:auto;
		padding:0 5%;
	}
	
	/************************************** home start ***************************************************/		
	#home{
		padding:0 2%;
	}
	#home .main{
		width:100%;
	}
	/*********** 事業類別 icon 選單 start ***********/
	.indexBU{
		flex-wrap:wrap;
	}
	.indexBU li{
		width:33.1%;
	}
	.indexBU li:nth-child(n+4){
		margin-top:0.4%;
	}
	.indexBU li:before{
		padding-top:30vh;
	}
	.indexBU li a{
		background:rgba(0, 0, 0, 0.4);
	}
	.indexBU li a .icon{
		width:50%;
		opacity:1;
		transform:none;
	}	
	.indexBU li a em{
		font-size:0.9em;
		margin-top:1em;
		border-width:1px;
		padding:0 0.4em;
		opacity:1;
		transform:none;
	}
	/*********** 事業類別 icon 選單 end ***********/
	/*********** 主標 start ***********/
	h3{
		font-size:1.6em;
	}
	h3 strong{
		display:block;
	}
	h3 span{
		display:block;
		margin:0.2em 0 0 0;
	}
	h3 span:before{
		display:none;
	}
	/*********** 主標 end ***********/
	/*********** scrollHint start ***********/
	.scrollHint{
		font-size:0.8em;
	}
	/*********** scrollHint end ***********/
	/************************************** home end ***************************************************/
	
	/************************************** about start ***************************************************/
	#about .main{
		margin:25% 0 15%;
		display:block;
	}
	#about .main .intro{
		width:auto;
	}
	#about .main .intro p{
		font-size:1.1em;
	}
	#about .main img{
		width:100%;
		max-width:460px;
		margin:10% auto 0;
	}
	#about .main .txt{
		width:auto;
		margin-top:10%;
		font-size:1.1em;
	}
	/************************************** about end ***************************************************/
	
	/************************************** business start ***************************************************/
	#business .main{
		margin:15% 0 10%;
	}
	/*********** 事業類別 icon 選單 start ***********/
	.bu{
		flex-wrap:wrap;
		margin-top:10%;
	}
	.bu > li{
		width:30%;
	}
	.bu > li+li{
		margin-left:0%;
	}
	.bu > li:not(:nth-child(3n+1)){
		margin-left:5%;
	}
	.bu > li:not(:nth-child(-n+3)){
		margin-top:10%;
	}
	.bu > li+li:before{
		display:none;
	}
	.bu > li em{
		font-size:3.5vw;
		margin-top:1.5em;
	}
	.bu > li ul{
		margin-top:2em;
		width:72%;
	}
	.bu > li:nth-child(1) ul{
		width:98%;
	}
	.bu > li ul li+li{
		margin-top:1em;
	}
	/*********** 事業類別 icon 選單 end ***********/
	/************************************** business end ***************************************************/
	
}