@font-face {
	font-family: "ImgFont";
	src: url("../font/IMGUltraSharp_Bd.ttf");
}

.ImgFont {
	font-family: ImgFont;
}

.ImgTXT {
	font-family: aktiv-grotesk;
}

* {
	font-family: "Noto Sans TC", Microsoft Jhenghei, "微軟正黑體";
}

/* color */
.text-ImgBlack {
	color: rgba(39, 37, 31, 1);
}

.text-ImgSmoke {
	color: rgba(199, 201, 199, 1);
}

.text-ImgPurple {
	color: rgba(165, 0, 255, 1);
}

.text-ImgRed {
	color: rgba(255, 25, 85, 1);
}

.text-ImgGreen {
	color: rgba(120, 214, 75, 1);
}

.text-ImgYellow {
	color: rgba(251, 255, 34, 1);
}

.bg-ImgBlack {
	color: #fff;
	background-color: rgba(39, 37, 31, 1);
}

.bg-ImgSmoke {
	color: #000;
	background-color: rgba(199, 201, 199, 1);
}

.bg-ImgPurple {
	color: #fff;
	background-color: rgba(165, 0, 255, 1);
}

.bg-ImgRed {
	color: #fff;
	background-color: rgba(255, 25, 85, 1);
}

.bg-ImgGreen {
	color: #000;
	background-color: rgba(120, 214, 75, 1);
}

.bg-ImgYellow {
	color: #000;
	background-color: rgba(251, 255, 34, 1);
}

.btn-ImgBlack {
	color: #fff;
	background-color: rgba(39, 37, 31, 1);
}

.btn-ImgBlack::before {
	border-color: rgba(39, 37, 31, 1);
}

.btn-ImgSmoke {
	color: #000;
	background-color: rgba(199, 201, 199, 1);
}

.btn-ImgSmoke::before {
	border-color: rgba(199, 201, 199, 1);
}

.btn-ImgPurple {
	color: #fff;
	background-color: rgba(165, 0, 255, 1);
}

.btn-ImgPurple::before {
	border-color: rgba(165, 0, 255, 1);
}

.btn-ImgRed {
	color: #fff;
	background-color: rgba(255, 25, 85, 1);
}

.btn-ImgRed::before {
	border-color: rgba(255, 25, 85, 1);
}

.btn-ImgGreen {
	color: #000;
	background-color: rgba(120, 214, 75, 1);
}

.btn-ImgGreen::before {
	border-color: rgba(120, 214, 75, 1);
}

.btn-ImgYellow {
	color: #000;
	background-color: rgba(251, 255, 34, 1);
}

.btn-ImgYellow::before {
	border-color: rgba(251, 255, 34, 1);
}

.border-ImgBlack {
	border-color: rgba(39, 37, 31, 1);
}

.border-ImgSmoke {
	border-color: rgba(199, 201, 199, 1);
}

.border-ImgPurple {
	border-color: rgba(165, 0, 255, 1);
}

.border-ImgRed {
	border-color: rgba(255, 25, 85, 1);
}

.border-ImgGreen {
	border-color: rgba(120, 214, 75, 1);
}

.border-ImgYellow {
	border-color: rgba(251, 255, 34, 1);
}

body {
	overflow-x: hidden;
	background: #fff;
	/* background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(80, 80, 80, 1) 100%); */
}

.navbar-brand>img {
	width: 200px;
}

.navbar-nav a {
	color: rgba(199, 201, 199, 1);
}

.nav-link:focus,
.nav-link:hover {
	color: #ff1955;
}

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: #ff1955;
}

/* 
.navbar-nav a:hover {
	color: rgba(199, 201, 199, 0.7);
}

.navbar-nav a:active {
	color: #ff1955;
} */

.dropdown-menu a:hover {
	color: rgba(0, 0, 0, 1);
}

button>i {
	font-size: 1.2em;
	border: rgba(199, 201, 199, 1) 2px solid;
	padding: 5px 10px;
	color: rgba(199, 201, 199, 1);
}

nav {
	margin-bottom: 0;
}

a {
	text-decoration: none;
	cursor: pointer;
}

.card-footer {
	background: transparent;
	border: none;
}

#_Solution {
	margin-top: 10px;
	padding: 20px;
	border-radius: 5px;
	background: #fff;
	/* background: linear-gradient(180deg, rgba(100, 100, 100, 1) 0%, rgba(80, 80, 80, 1) 100%); */
}

#_Solution .container {
	text-align: center;
}

#_Solution h2 {
	margin: 30px auto 25px auto;
	color: #000;
	letter-spacing: 1px;
	/* text-shadow: rgba(0, 0, 0, .5) 3px 3px 0; */
}

#_Solution .sub {
	text-align: center;
	margin: 0 auto 50px auto;
	font-weight: 400;
	letter-spacing: 1px;
}

#_Solution div.card {
	border: none;
	background: rgb(255, 255, 255);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease-out;
	/* max-width: 480px;
	margin: 0 auto; */
}

#_Solution div.card:hover {

	box-shadow: 0 7px 15px rgba(0, 0, 0, 0.4);
}

#_Solution div.card .card-body {
	font-size: 1rem;
	flex: 1 1 auto;
	padding: 1.5625rem;
}

#_Solution div.card .card-body .iconBox {

	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 99%;
	box-sizing: border-box;
	padding: 20px;
	background-color: #27251f;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

#_Solution div.card .card-body .iconBox img {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
}

#_Solution img {}

#_Solution ._GPU {
	color: rgba(0, 0, 0, 1);
}


#_Solution ._AI {
	color: rgba(0, 0, 0, 1);
}


#_Solution .linkEF a {
	position: relative;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}


@keyframes a_line {
	0% {
		left: 0%;
	}

	50% {
		left: 100%;
	}

	51% {
		left: -100%;
	}


	100% {
		left: 0%;
	}
}


#_Solution .linkEF a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #FF1955;

	/* animation-iteration-count: infinite; */
	/* animation-play-state: paused; */
}

#_Solution .linkEF a:hover::after {
	/* animation-play-state: running; */
	animation: a_line 0.4s;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
}

#_Solution div p {
	text-align: left;
	color: rgba(39, 39, 39, 1);
}

#_Solution .card-footer {
	padding: 0 1rem 1.5625rem 1rem;
}

#_Solution .card-footer div {
	padding: 1px;
}

#_Solution .card-footer .linkEF {
	display: flex;
	justify-content: center;
	align-items: center;
}

#_Solution .card-footer div a {
	color: #000;
	font-weight: bolder;
	font-size: 1em;
	display: block;
	padding: 15px;
	height: 100%;
}

#_Application {
	position: relative;
	box-sizing: border-box;
	padding: 30px 0 10px 0;
	background: #F6F6F6;
}

#_Application>div {
	background: #F6F6F6;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	padding: 20px;
}

#_Application h2 {
	color: rgba(0, 0, 0, 1);
}

#_Application a {
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
}

#_Application a:hover {
	color: rgba(255, 255, 0, 1);
	text-decoration: none;
}

#_Application .row {
	margin-top: 30px;
}

#_Application .card {
	position: relative;
	padding: 20px 0;
	color: rgb(255, 255, 255);
	border: none;
	border-radius: 0;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

#_Application .card a {
	position: relative;
	border-radius: 99%;
	background-color: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 300px;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
	transform: translateY(0) scale(1);
	transition: all 0.2s ease-out;
}

#_Application .card a:hover {
	transform: translateY(-10px) scale(1.05);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

#_Application .card h5 {
	margin-bottom: 20px;
	color: rgba(237, 238, 32, 1.00);
	font-weight: 900;
	font-size: 28px;
	letter-spacing: 3px;
}

#_Application .card img {
	position: relative;
	width: 100%;
	max-width: 100px;
	height: auto;
}

#_Application .card i {
	font-size: 5em;
}

#_EU {
	position: relative;
	box-sizing: border-box;
	padding: 30px 0 10px 0;
	background: #fff;
}

#_EU>div {
	padding: 20px;
}

#_EU>div h2 {
	color: rgb(0, 0, 0);
	/* text-shadow: rgba(0, 0, 0, .1) 3px 3px 0; */
	text-align: left;
	margin-bottom: 20px;
}

#_EU .sub {
	color: rgb(0, 0, 0);
	/* text-shadow: rgba(0, 0, 0, .1) 3px 3px 0; */
	text-align: left;
	margin-bottom: 20px;
}

#_EU>div p {
	line-height: 1.6em;
}

#_EU .linkEF a {
	position: relative;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	display: inline-block;
	cursor: pointer;
}


@keyframes a_line {
	0% {
		left: 0%;
	}

	50% {
		left: 100%;
	}

	51% {
		left: -100%;
	}


	100% {
		left: 0%;
	}
}


#_EU .linkEF a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #FF1955;

	/* animation-iteration-count: infinite; */
	/* animation-play-state: paused; */
}

#_EU .linkEF a:hover::after {
	/* animation-play-state: running; */
	animation: a_line 0.4s;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
}

#_EU>div .card-footer {
	text-align: center;
	padding: 20px;
}

#_EU>div .card-footer a {
	font-size: 1.2em;
	padding: 10px 20px;
}

#_EU>div .card-footer a._more {
	color: #000;
}

#_EU>div .card-footer a._download {
	color: #000;
}

#_Engineer {
	border-right: solid #000;
	border-width: 0 1px 0 0;
}

#_Engineer .card {
	border-radius: 0;
	border: 0;
	box-sizing: border-box;
	padding: 25px;
}

#_UP .card {
	border-radius: 0;
	border: 0;
	box-sizing: border-box;
	padding: 25px;
}

#_WE {
	position: relative;
	background-color: #070707;
	margin: -10px 0;
}

#_WE>div {
	margin-top: 10px;
	margin-bottom: 10px;
}

#_WE>div h2 {
	text-align: center;
}

#_WE>div .card {
	padding: 0;
	border: none;
}

#_WorkWithImgination .card {
	background: rgb(0, 0, 0);
	padding: 0;
}

#_WorkWithImgination .card h4 {
	margin: .8em 0 .3em 0;
}

#_WorkWithImgination .card p {
	color: rgb(255, 255, 255);
	margin: .3em 0;
}

#_WorkWithImgination .card a {
	margin: 0;
	padding: 0;
}

#_WorkWithImgination .card a img {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
}

#_EV {
	background-color: #C6C6C6;
}

#_EV .container {
	max-width: 800px;
}

#_EV>div {
	padding: 20px;
	background-color: #C6C6C6;
}

#_EV>div h2 {
	text-align: center;
}

#_EV>div .card {
	padding: 20px;
	border: none;
}

#_EventNews h2 {
	color: rgb(0, 0, 0);
}

#_EventNews .card {
	background-color: transparent;
}

#_EventNews .card a {
	border-left: #fff 5px solid;
	margin: 15px 0;
	padding: 5px 20px;
	background-color: rgba(255, 255, 255, 0);
	transition: all 0.3s ease-out;
	cursor: pointer;
}

#_EventNews .card a:hover {
	background-color: rgba(255, 255, 255, 0.35);
}

#_EventNews .card a p {
	color: #666;
	margin: 0 0 7px 0;
	font-size: 1rem;
}

#_EventNews .card a h5 {
	color: #000;
	font-size: 1.25rem;
}


footer a {
	margin: .5rem;
}

footer a:hover {
	color: #fff;
}

footer a i {
	font-size: 1.8rem;
}


#_all>div {
	background: rgba(255, 255, 255, 1);
	padding: 0;
}

#_all #_header {
	height: 300px;
	text-align: center;
	color: rgb(255, 255, 255);
	padding: 20px 0;
	margin: 0;
	background: rgb(72, 72, 72);
	background: linear-gradient(180deg, rgba(72, 72, 72, 1) 0%, rgba(155, 150, 150, 1) 100%);
}

#_all #_header h1 {
	margin-top: 3rem;
	text-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#_all #_header h2 {
	margin: 0 5rem;
	color: rgba(255, 255, 255, .7);
}

.spLinkEf a {
	position: relative;
	box-sizing: border-box;
	padding: 5px 0;
	font-weight: bold;
}

.spLinkEf a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #FF1955;
}

.spLinkEf a:hover::after {
	/* animation-play-state: running; */
	animation: a_line 0.4s;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
}


#_all #_header p {
	margin: .5rem 5rem;
	color: rgba(255, 255, 255, .9);
}

#_all #_content {
	padding: 20px;
}

#_all #_content>div {
	padding: 20px;
}

#pills-tab a {
	color: rgba(165, 0, 255, 1);
}

#pills-tab a.active {
	background: rgba(165, 0, 255, 1);
	color: rgb(255, 255, 255);
}

#_all #_content h2 {
	color: rgba(0, 0, 0, .6);
	text-align: center;
	padding: 30px 0;
	background: rgb(204, 204, 204);
	background: linear-gradient(180deg, rgba(240, 240, 240, 1) 0%, rgba(204, 204, 204, 1) 100%);
}

#_all #_content h3 {
	border-left: rgba(165, 0, 255, 1) 8px solid;
	padding-left: 8px;
	margin: 40px 0 20px 0;
}

#_all #_content a {
	margin: 10px;
	text-decoration: none;
}


#_all #_content a h3 {
	color: rgba(0, 0, 0, 1);
	margin: 10px 0;
	padding-left: 8px;
}

#_all #_content a p {
	color: rgba(0, 0, 0, .8);
}

#_all #_content a:hover {
	background: #f0f0f0;
}

#_all #_content .card:hover {
	background: #f0f0f0;
}

._Webinar {
	padding: 20px;
}

._Webinar span {
	background: #f0f0f0;
	color: #999;
	padding: 3px 15px;
}

._Webinar div {
	border-left: rgba(165, 0, 255, .3) 3px solid;
	padding-left: 10px;
}

._Webinar h4 {
	color: rgba(165, 0, 255, 1);
	margin: 15px 0;
}

._Resources ._box {}

#_all #_content a.btn-info {
	background: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
	border: 0;
	padding: .5rem 1rem;
}

#_all #_content a.btn-info:hover {
	background-color: rgba(0, 0, 0, .8);
	color: rgba(255, 255, 0, 1);
	border: 0;
	padding: .5rem 1rem;
}

#_all #_content a.btn-outline-info {
	background: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
	border: 0;
	padding: .5rem 1rem;
}

#_all #_content a.btn-outline-info:hover {
	background-color: rgba(0, 0, 0, .8);
	color: rgba(0, 255, 0, 1);
	border: 0;
	padding: .5rem 1rem;
}

a.btn-info {
	background: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
	border: 0;
	padding: .5rem 1rem;
}

a.btn-info:hover {
	background-color: rgba(0, 0, 0, .8);
	color: rgba(0, 255, 255, 1);
	border: 0;
	padding: .5rem 1rem;
}