@charset "utf-8";
/* CSS Document */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
:root{
	--decide-bg:
		radial-gradient(circle at 50% 18%, rgba(20, 134, 171, .72), rgba(8, 58, 105, .42) 34%, rgba(5, 24, 57, .88) 76%),
		linear-gradient(90deg, #0c2a55 0%, #12698b 47%, #09224c 100%);
}
*,body{padding:0px;	margin:0px;font-family: var(--font-sans);}
html{
	background: #09224c;
}
body{
	color:#fff;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	background: var(--decide-bg);
	background-size: cover;
}
#particles-js{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: .5;
	pointer-events: none;
}
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
html,body{width: 100%; height: 100%; min-height: 100%;}
body{min-width: 1180px;}
li{ list-style-type:none;}
table{}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#fff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}
.clearfix:after, .clearfix:before {display: table;content: " "}
 .clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}
i{font-style: normal;}
.text-w{color: #ffe400}
.text-d{color: #ff6316}
.text-s{color: #14e144}
.text-b{color: #07e5ff}

.decide-shell{position: relative; z-index: 2; min-width: 1180px; min-height: 720px; height: 100vh; padding: 0 14px 10px; overflow: hidden;}
.decide-shell:after{
	position: absolute;
	inset: -18% -42%;
	z-index: 20;
	content: "";
	pointer-events: none;
	background:
		linear-gradient(112deg,
			rgba(255,255,255,0) 34%,
			rgba(167,244,255,.04) 42%,
			rgba(199,252,255,.18) 48%,
			rgba(7,229,255,.10) 52%,
			rgba(255,255,255,0) 62%);
	mix-blend-mode: screen;
	opacity: .82;
	transform: translateX(-64%) skewX(-10deg);
	animation: decideSweepLight 7.5s ease-in-out infinite;
}
.head{position: relative; z-index: 2; display: grid; grid-template-columns: minmax(330px, .95fr) minmax(520px, 1.55fr) minmax(330px, .95fr); align-items: center; gap: 16px; height: 86px; margin: 0 5px;}
.head:before,.head:after,.nav1:before,.nav1:after{display: none; content: none;}
.head .pulll_left,.head .pulll_right{float: none;}
.head h1{font-size: 26px; letter-spacing: -1px; text-align: left; line-height: 1; padding-right: 0; color: #daf9ff;}
.decide-title-block{display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-width: 0;}
.decide-title{white-space: nowrap;}
.decide-title-actions{display: flex; align-items: center; gap: 12px; min-width: 0;}
.decide-brand{display: flex; align-items: center; justify-content: flex-end; min-width: 0;}
.decide-brand img{display: block; width: 220px; max-height: 54px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(7,229,255,.28));}
.decide-fullscreen-button{
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 9px;
	border: 1px solid rgba(7,229,255,.36);
	border-radius: 999px;
	background: rgba(2, 24, 55, .46);
	box-shadow: inset 0 0 10px rgba(7,118,181,.24), 0 0 12px rgba(7,229,255,.10);
	color: rgba(218,249,255,.78);
	font: 600 11px/1 var(--font-sans);
	letter-spacing: .4px;
	cursor: pointer;
}
.decide-fullscreen-button i{font-size: 14px; color: #07e5ff;}
.decide-fullscreen-button:hover{
	border-color: rgba(7,229,255,.74);
	color: #fff;
	background: rgba(8, 64, 104, .62);
}
.head .menu{}
.head .menu ul{display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 0;}

.head .menu li{ display: inline-block; position: relative;margin: 0;}
.head .menu li a{ display: block; font-size: 17px; color: #fff; line-height: 30px; padding: 0 10px; white-space: nowrap; }
.head .time{position: static; right: auto; top: auto; line-height: 1; color: rgba(218,249,255,.72); font-size: 14px; font-family: var(--font-sans); font-weight: 500; letter-spacing: 1.6px; white-space: nowrap;}

.menu li:before,
.menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: "";  border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;}
.menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;}
.menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;}
.menu li a{ position:relative;}
.menu li a:before,
.menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4;  content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;}

.head .menu li a:hover{ color: #f4e925;}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after{border-color:  #f4e925; opacity: 1;}

.mainbox{position: relative; z-index: 2; height: calc(100vh - 96px); min-height: 624px; padding: 0 0 0;}
.nav1{display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 56fr) minmax(0, 22fr); gap: 12px; height: 100%; margin-left: 0; margin-right:0;}
.nav1>li{width: auto !important; min-width: 0; padding:0; float: none;}
.decide-column{display: grid; min-height: 0; gap: 12px;}
.decide-column--left{grid-template-rows: repeat(2, minmax(0, 1fr));}
.decide-column--center,
.decide-column--right{grid-template-rows: repeat(3, minmax(0, 1fr));}
.decide-card--energy{grid-row: 1;}
.decide-card--oee{grid-row: 2;}
.decide-card--map{grid-row: 1 / span 2;}
.decide-card--orders{grid-row: 3;}
.decide-card--otd{grid-row: 1;}
.decide-card--cost-saving{grid-row: 2;}
.decide-card--projects{grid-row: 3;}

.box{ border:1px solid rgba(7,118,181,.5); box-shadow:inset 0 0 10px rgba(7,118,181,.4); margin-bottom: 0; position: relative;}
.decide-card{display: flex; flex-direction: column; min-height: 0; overflow: hidden;}
.tit{ padding: 10px 10px 10px 25px;border-bottom:1px solid rgba(7,118,181,.7);font-size: 16px; font-weight: 500; position: relative;}
.tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(22,214,255,.9);box-shadow: 0 0 5px rgba(22,214,255,.9); border-radius: 10px; left: 10px; top: 18px;}
.decide-card__title-with-scope{display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.decide-card__title-with-scope > span:first-child{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.decide-card__scope{font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(218,249,255,.8); border: 1px solid rgba(7,229,255,.36); border-radius: 999px; padding: 2px 8px; background: rgba(2, 24, 55, .35);}
.decide-oee-card__title{padding-right: 8px; text-align: left; white-space: nowrap; letter-spacing: -.2px; font-size: 15px;}

.tit:after,.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom:-1px; background:linear-gradient(to right,#076ead,#4ba6e0,#076ead); box-shadow: 0 0 5px rgba(131,189,227,1); opacity: .6}
.box:before{top: -1px;}

.boxnav{padding: 10px;}
.decide-card .boxnav{flex: 1; min-height: 0; height: auto !important;}
.decide-card #echart2,
.decide-card #echart3,
.decide-card #echart4,
.decide-card #echart5,
.decide-card #echart6,
.decide-card #echart7,
.decide-card #echart8,
.decide-card .map{height: 100% !important; min-height: 0;}
.decide-card--energy .boxnav{display: flex; align-items: center;}
.decide-card--energy .yqlist{width: 100%;}
.decide-card--map .boxnav{padding: 8px;}
.tit01{font-size: 16px; font-weight: 500; position: relative; padding-left: 15px;}
.tit01:before{ left: 3px; top: 8px;}

.mapc{
	background:
		radial-gradient(circle at 50% 46%, rgba(25, 125, 180, .20), rgba(4, 26, 61, .16) 58%, rgba(3, 18, 45, .40) 100%),
		linear-gradient(135deg, rgba(11, 81, 134, .16), rgba(7, 26, 65, .28));
	background-size: cover;
}
.map{position: relative; height: 100%;}
.map img{}
.mapnav{position: absolute;z-index: 10;}
.decide-map-overlay{position: absolute; z-index: 12; border: 1px solid rgba(7,118,181,.62); box-shadow: inset 0 0 10px rgba(7,118,181,.42), 0 10px 28px rgba(0,0,0,.18); background: rgba(5, 31, 72, .72); backdrop-filter: blur(2px); overflow: hidden;}
.decide-map-overlay--capacity{left: 16px; bottom: 16px; width: min(360px, 36%); height: 240px;}
.decide-map-overlay .tit{font-size: 14px; padding-top: 8px; padding-bottom: 8px;}
.decide-map-overlay .tit:before{top: 16px;}
.decide-map-overlay .boxnav{height: calc(100% - 37px) !important; padding: 2px 4px 4px;}
.decide-reliability-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.decide-chart-split{min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid rgba(7,118,181,.28); background: rgba(3, 24, 58, .24);}
.decide-chart-split h2{margin: 0; padding: 8px 10px 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.2; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.decide-chart-split > div{flex: 1; min-height: 0;}
.decide-oee-list{height: 100%; display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 24px 34px 24px 26px; box-sizing: border-box;}
.decide-oee-row{display: grid; grid-template-columns: 58px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 0;}
.decide-oee-row__name{color: #fff; font-size: 12px; text-align: right; white-space: nowrap;}
.decide-oee-row__track{position: relative; height: 15px; border-radius: 999px; background: rgba(79, 182, 157, .12); overflow: hidden;}
.decide-oee-row__bar{position: absolute; inset: 0 auto 0 0; width: var(--oee-value); border-radius: inherit; background: #4fb69d; box-shadow: 0 0 10px rgba(79, 182, 157, .32);}
.decide-oee-row__value{color: rgba(255,255,255,.62); font-size: 12px; white-space: nowrap;}


.decide-metrics-list{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px;}
.yqlist li{float: none; width: auto; padding:6px 0; text-align: center;}
.yq{width:100px; height: 100px; margin: 0 auto  5px auto;  position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; color: #fff32b;}
.yq i{position: relative; z-index: 1; margin-bottom: 4px; color: #07e5ff; font-size: 24px; text-shadow: 0 0 10px rgba(7,229,255,.7);}
.yq strong{position: relative; z-index: 1; font-size: 26px; line-height: 1; font-family:electronicFont; font-weight: 400;}
.yqlist li span{display: inline-flex; justify-content: center; align-items: baseline; gap: 4px; opacity: .75; font-size: 14px; letter-spacing: .2px;}
.yqlist li span em{font-style: normal; color: #07e5ff; font-size: 12px; opacity: .85;}

.yq:before{position: absolute; width: 100%; height: 100%; content: ""; background: url(../images/metric-ring-outer.png) center center; border-radius: 100px; background-size: 100% 100%; opacity:.3;
	left:0; top: 0; animation: myfirst2 15s infinite linear;}

.yq:after{position: absolute; width: 86%; background: url(../images/metric-ring-inner.png) center center; border-radius: 100px; background-size: 100% 100%;  opacity:.3;
	height: 86%; content: "";   left:7%; top: 7%; animation: myfirst 15s infinite linear;}

@media (max-width: 1280px), (max-height: 760px) {
	body{overflow: auto;}
	.decide-shell{width: 1280px; height: 760px; min-height: 760px;}
	.mainbox{height: 664px; min-height: 664px;}
}

@media (min-width: 1600px) and (min-height: 880px) {
	.decide-shell{padding-left: 18px; padding-right: 18px;}
	.head{height: 92px;}
	.mainbox{height: calc(100vh - 104px);}
	.head h1{font-size: 30px;}
	.decide-brand img{width: 250px;}
}


@keyframes myfirst
{
to { transform: rotate(-360deg)}
}
@keyframes myfirst2
{
to { transform: rotate(360deg)}
}

@keyframes decideSweepLight
{
	0%, 34% { transform: translateX(-64%) skewX(-10deg); opacity: 0; }
	42% { opacity: .82; }
	58% { opacity: .64; }
	74%, 100% { transform: translateX(64%) skewX(-10deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.decide-shell:after{display: none;}
}