@charset "UTF-8";
/*  -------------------------------------------------- */
/*  ----- (((((( MOBILE :: screen < 768px )))))) ----- */
/*  -------------------------------------------------- */
/* common background */
#homePAGE {
	background-image: url("../images/svgTRI_iS_top.svg") , url("../images/svgTRI_iS_bottom.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, left bottom;
	background-origin: border-box, border-box;
	background-size: contain, cover;
	background-color: rgb(var(--ccYellow));
}
.ivoryBG {
	background-image: url("../images/svgTRI_yS.svg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-origin: border-box;
	background-color: rgb(var(--ccIvory));
}
.redBG {
	background-image: url("../images/svgTRI_dkbS.svg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-origin: border-box;
	background-color: rgb(var(--ccRed));
}
.yellowBG {
	background-image: url("../images/svgTRI_dkbS.svg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-origin: border-box;
	background-color: rgb(var(--ccYellow));
}

/* ================================ */
/* ----------- homePAGE ----------- */
/* ================================ */
/* header */
#hero {
	display: grid;
	grid-template-columns: 0.5fr 2fr 180px 2fr 0.5fr;
	grid-template-rows: auto auto;
	align-items: flex-end;
}
#hero article {
	grid-column: 2/-2;
	grid-row: 2/-1;
	text-align: center;
}
#heroBOX {
	height: 100vh;
	grid-column: 2/-2;
	grid-row: 1/2;
	display: grid;
	grid-template-columns: 1fr 180px 1fr;
	grid-template-rows: 1fr 1fr 0.5fr 180px 0.5fr;
	align-items: flex-end;
}
#heroBOX p {
	grid-column: 1/-1;
	grid-row: 2/3;
	text-align: center;
}
#heroBOX section {
	grid-column: 2/-2;
	grid-row: 4/5;
}
.spinIN,
.spinOUT {
	width: 180px;
	position: absolute;
}
.spinIN {
	transform: translateY(-100%);
	z-index: 1;
}
.spinOUT {
	margin-top: -180px;
	z-index: 0;
	animation: spin 10s ease-in-out infinite;
	animation-direction: alternate;
}
/* brand icon spinning animation */
@keyframes spin {
0% {
		-ms-transform: rotate(0);
		-webkit-transform: rotate(0);
	transform: rotate(0);
}
100% {
		-ms-transform: rotate(480deg);
		-webkit-transform: rotate(480deg);
	transform: rotate(480deg);
}
}
/* -------------------------------- */
/* content - WORK */
#workBOX {padding: 100px 0 70px 0;}

.workCARD {
	background-color: rgba(var(--ccIvory), 0.5);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	width: 85%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
}
.workCARD:last-child {margin-bottom: 0;}

.workCARD img {
	object-fit: cover;
	height: auto;
	max-width: 500px;
}
.workCARD article {
	padding: 1.5vw;
	line-height: 1.8;
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
}

/* ================================ */
/* ----------- subPAGEs ----------- */
/* ================================ */
/* == subPAGE::DESIGN == */
#designHEAD {
	height: 900px;
	background-image: url("../images/BG768_img.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-origin: border-box;
	background-size: cover;
		/* title text */
	padding-top: 320px;
}

	/* main content */
#design {
	padding-top: 80px;
	padding-bottom: 80px;
}

#design ul {column-count: 2;}

	/* carousel */
#designIMG { position: relative;
	width: 90vw;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.caroBOX {
	width: 90vw;
	max-width: 900px;
	position: relative;
}
.caroITEM {display: none;}
.caroITEM img {
	width: 100%;
}
._overCaption { 
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 8px;
	padding: 0.2rem 0;
	background: rgba(var(--ccBlue), 0.8);
	text-align: center;
}
	/* carousel-navigation */
.caroNAV {text-align: center;}
._prev,
._next {
	cursor: pointer;
	padding: 0 0.1rem;
	color: rgba(var(--ccBlue), 0.3);
	font-size: 3rem;
	user-select: none;
}
._prev:hover,
._next:hover {
	color: rgba(var(--ccBlue), 1);
}
.caroDOT {
	height: 0.5rem;
	width: 0.5rem;
	margin: 0 0.1rem 0.5rem 0.1rem;
	border: 2px solid rgba(var(--ccRed), 1);
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.3s ease;
}
.active,
.caroDOT:hover {background-color: rgba(var(--ccRed), 1);}

	/* carousel-images fading animation */
._fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 3s;
	animation-name: fade;
	animation-duration: 3s;
}
@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}
@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}
/* --------------------------------
 */
/* == subPAGE::VIDEO == */
#videoHEAD {
	height: 980px;
	background-image: url("../images/BG768_vid.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-origin: border-box;
	background-size: cover;
		/* title text */
	padding-top: 320px;
	text-shadow: 2px 2px 3px rgba(var(--ccBlue), 0.3);
}
	/* main content */
#video {
	padding-top: 80px;
	padding-bottom: 80px;
}
	/* modal buttons with thumbnail */
#modalBOX {
	width: 80%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
#vidBTN {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
#vidBTN section {
	width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vidIMG,
#vidBTN a {
	cursor: pointer;
	display: block;
}
.vidIMG {
	width: 100px;
	height: 100px;
}

#vidBTN a {
	width: 106px;
	height: 106px;
	background-color: rgb(var(--ccBlue));
	border: 3px solid rgb(var(--ccBlue));
	border-radius: 50%;
}
#vidBTN a:hover,
#vidBTN a:active {
	border: 3px solid rgb(var(--ccRed));
}
	/* modal screen */
.theMODAL {
	position: fixed;
	z-index: 9999;
	top: 0;
	left:0;
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: 0;
	visibility: hidden;
	transition: visibility 0s linear 0s, opacity 1s 0s;
}
.showMODAL {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s linear 0s, opacity 1s 0s;
}
.modalBODY {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.modalBODY iframe {
	max-width: 80% !important;
	max-height: 50%;
}
#caption {
	text-align: center;
	white-space: pre-wrap;
	font-weight: 300;
	font-size: 1rem;
	padding: 20px 20px;
}
/* -------------------------------- */
/* == subPAGE::HISTORY == */
#bioSIDE,
#bioTXT {margin: 0 5vw;}

#bioSIDE {
	background-color: rgba(var(--ccBlue), 0.8);
	padding: 8em 0 5em 0;
}
#bioTXT {padding: 5em 0;}

#bioSIDE article {padding: 0 5vw;}

	/* television set */
#tvDEMO {
	width: 60%;
	max-width: 488px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 15px 0 10px 0;
}
.tv { /*max::488x539px*/
	width: 100%;
}
.demo { /*max::320x256px*/
	border: 1px solid #000;
	border-radius: 8px;
	position: absolute;
	z-index: 1;
	left: 5%;
	bottom: 21%;
	width: 90%;
}
/* -------------------------------- */
/* == subPAGE::TALK == */
#talkHEAD {padding-top: 140px;}
#talk {padding-top: 60px;}

.talkCOL {
	max-width: 280px;
	column-count: 1;
}

.talkCARD {
	display: inline-block;
	margin: 10px auto;
	width: 280px;
	height: auto;
	background-color: rgba(var(--ccBlue), 0.3);
	padding: 16px;
}
.talkCARD img {
	width: 100%;
	padding-top: 8px;
}
.talkCARD article {
	width: 100%;
	text-align: left;
}

/* -------------------------------------------- */
/*  ----- (((((( LANDSCAPE < 768px )))))) ----- */
/* -------------------------------------------- */
@media only screen and (orientation:landscape) {

	.talkCOL {
		max-width: 280px;
		column-count: 1;
	}
}

/* ---------------------------------------------------- */
/*  ----- (((((( TABLET :: screen => 768px )))))) ----- */
/* ---------------------------------------------------- */
@media only screen and (min-width: 768px) {
	/* COMMON STYLE */
	#homePAGE {background-image: url("../images/svgTRI_iL_top.svg") , url("../images/svgTRI_iL_bottom.svg");}
	.ivoryBG {background-image: url("../images/svgTRI_yL.svg");}
	.redBG {background-image: url("../images/svgTRI_dkbL.svg");}
	.yellowBG {background-image: url("../images/svgTRI_dkbL.svg");}

	/* homePAGE::HEADER */
	#hero {grid-template-columns: 0.5fr 2fr 180px 2fr 0.5fr;}
	#heroBOX {
		grid-template-columns: 1fr 180px 1fr;
		grid-template-rows: 1fr 1fr 0.5fr 180px 0.5fr;
	}
	.spinIN,
	.spinOUT {width: 180px;}
	.spinOUT {margin-top: -180px;}

	/* homePAGE::WORK */
	.workCARD {
		width: 90%;
		max-width: 900px;
		height: 300px;
		margin-bottom: 20px;
		display: flex;
		flex-direction: row;
	}
	.workCARD img {min-width: 40%;}
	.workCARD article {
		min-width: 50%;
		padding: 0 1.5vw;
		text-align: left;
	}

	/* subPAGE::DESIGN */
	#designHEAD {background-image: url("../images/BG1920_img.png");}
	#design ul {column-count: 3;}

	/* subPAGE::VIDEO */
	#videoHEAD {background-image: url("../images/BG1580_vid.png");}

	/* subPAGE::HISTORY */
	#bioBOX {
		max-width: 1300px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
	}

	#bioSIDE {
		width: 40%;
		min-width: 320px;
		max-width: 400px;
		margin: 0 2% 0 4%;
	}
	#bioSIDE article {padding: 0 20px;}

	#bioTXT {
		width: 60%;
		padding: 500px 1rem 0 0;
		margin: auto 2% auto 2%;
	}

	#tvDEMO {width: 80%;}

	/* subPAGE::TALK */
	.talkCOL {
		max-width: 600px; /* = each column 280px width and 40px gap in between */
		column-count: 2;
		column-gap: 40px;
	}

}
/* ------------------------------------------------------ */
/*  ----- (((((( DESKTOP :: screen => 1024px )))))) ----- */
/* ------------------------------------------------------ */
@media only screen and (min-width: 1024px) {

	/* homePAGE::HEADER */
	#hero {grid-template-columns: 1fr 1fr 180px 1fr 1fr;}

	/* subPAGE::DESIGN */
	#designHEAD {height: 1000px;}
	#designHEAD div {padding-top: 160px;}
	#design ul {column-count: 3;}

	/* subPAGE::VIDEO */
	#videoHEAD {height: 1000px;}
	#videoHEAD div {padding-top: 160px;}

	/* subPAGE::TALK */
	.talkCOL {
		max-width: 920px; /* = each column 280px width and 40px gap in between */
		column-count: 3;
		column-gap: 40px;
	}
}