/* ============================ 共用 ============================ */
/* 設定CSS變數 */
:root{
    --space:10px; /* 通用間隔 */
    --UIsize:30px; /* icon尺寸 */
    --labelw:100px; /* bulidingmap label寬*/
    --headerH:70px; /* header heigh */
	--h6Top:50%; /* 預設圖表寬度, js後續控制 */
    --halfH:calc((100vh - var(--headerH) - 40px - 46px - var(--space)*3) / 2);
    --halfH2:calc((100vh - var(--headerH) - 40px - 46px - var(--space)*3 - 50px) / 2);
    --normalH:calc(100vh - var(--headerH) - 40px - var(--space)*2);
    --functionH:calc(100vh - var(--headerH) - 40px - var(--space)*3 - 45px);
    
    --pri01:#262223; /*主色1深灰*/
    --pri02:#0477BF; /*主色2藍*/
    --pri03:#3F8EBF; /*主色3藍２*/
    --pri04:#D98825; /*主色4橘*/
    --pri05:#F2F2F2; /*主色5淺灰*/
    --pri06:#4DADBC; /*主色6藍綠*/
    --pri07:#D30000; /*主色7紅*/
    --pri08:#25AD22; /*主色8綠*/
    
    --fsizeS:16px;
    --fsizeP:22px;
    --fsizeM:28px;
    --fsizeL:30px;
    --fsizeXL:48px;
    
    --gradient01: linear-gradient(0deg, #3F8EBF -10%, #262223 105%); /* 漸層 */
    --gradient02: linear-gradient(90deg, #0477BF 0%, #3F8EBF 100%); /* 漸層 */
    --gradient03: linear-gradient(90deg, #197BBD 0%, #4DADBC 20%); /* 漸層 */

    
}
.logo{ width: 160px; background-image: url(../Images/logo.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.logo::after{ padding-top: 38.306%; content:''; display: block;}

.mainContent{ font-size: 0; padding: calc(var(--headerH) + var(--space)) var(--space) var(--space) calc(50px + var(--space));}
.container{ display: inline-block; width: 100%; padding: var(--space); position: relative; z-index: 2;}
.container .error{font-size: var(--fsizeP); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 90; display: flex; align-items: center; justify-content: center;}

.pc{ display: inline-block;}
.mobile{ display: none;}

a.btn{ font-size: var(--fsizeM); background-color: var(--pri02); background:var(--gradient02); color: #FFF; border-radius: 10px; border: 1px solid #AAA; padding: 9px 50px; min-width: 200px; text-align: center; transition: .3s;}
a.btn:hover{ color: #000;}
popup a.sbtn{ font-size: var(--fsizeS); padding: 6px 15px; min-width: auto; background: none; background-color: #BBB; border: none; text-transform: uppercase; border-radius: 7px; text-decoration: none!important;}
popup a.sbtn:hover{ color: #FFF!important; background-color:var(--pri02);}
popup a.sbtn::before{font-size: var(--fsizeP); margin-bottom: 2px;}


.page.btnbox{ margin-top: var(--space); text-align: center; padding-top: 3px;}
.page.btnbox a.btn{ font-size: var(--fsizeP); padding: 7px 45px; margin: 0 5px; }
.page.btnbox a.btn.gray{ background: none; background-color: #DDD; color: var(--pri01);}
.page.btnbox a.btn.gray:hover{ background-color: #BBB; color: #FFF;}
.page.btnbox a.btn.UI::before{ margin-right: 5px; margin-bottom: 2px;}

/* tablebox */
.tablebox{ font-size: var(--fsizeS); color: #333; width: 100%; background-color: #F5F5F5; font-family: 'Roboto Condensed', Arial, Helvetica, 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; position: relative;}
/*.tablebox ul{ transition: .3s;}*/
/*.tablebox ul:nth-of-type(odd){ background-color: #DDD;}*/
.tablebox ul{ transition: .3s;}
.tablebox.ui-sortable ul{ transition: none;}
.tablebox ul:hover{ background-color: #DEDEDE;}
.tablebox ul.focus{ background-color: var(--pri02); color: #FFF;}
.tablebox ul.focus li{ border-bottom: 1px solid #AAA;}
.tablebox ul.focus a.UI{ color: #FFF;}
.tablebox ul.focus a{ }
.tablebox ul.focus a:hover,
.tablebox ul.focus:hover a:hover{ color: #FFF; background-color: #333;}
.tablebox li{ padding: 10px 7px; vertical-align: middle; text-align: left; position: relative; /*overflow: hidden;*/ border-bottom: 1px solid #DDD; }
.tablebox li.sort{ cursor: pointer;}
.tablebox li.sort:hover{ color: #333!important;}
.tablebox li.sort::after{content: 'arrow_drop_down'; transform: scaleY(2); }
.tablebox li.sort.up::after{content: 'arrow_drop_up';}
.tablebox a{ color: var(--pri01); background-color: #CCC; padding: 3px 10px; border-radius: 20px; transition: .3s;}
.tablebox ul:hover a{ background-color: #AAA;}
.tablebox ul:hover a:hover{ background-color: var(--pri02); color: #FFF;}
/*.tablebox li a{ text-decoration: underline;}*/
/*.tablebox li a.btn{ text-decoration:none;}*/
.tablebox a.UI{font-size: var(--fsizeP); line-height:var(--fsizeP); }
.tablebox li:last-child a.UI{background-color: transparent; padding: 3px 4px;}
.tablebox li:last-child a.UI:hover{background-color: var(--pri02); color: #FFF;}
.tablebox .head{ font-size: 16px; }
body.zh .tablebox .head{ font-size: 14px; transition: font-size 0s; }
.tablebox ul.head{ position: sticky; top: 0; z-index: 9; }
.tablebox .head li,
.tablebox li.head{ color: #FFF; font-weight: 700; white-space: nowrap; background-color: var(--pri01); transition: .3s;}
body.zh .tablebox .head li,
body.zh .tablebox li.head{ font-weight: 500; transition: background-color .3s;}
.tablebox li.head{ /*text-align: right;*/ background-color: var(--pri02);}
.tablebox li.UI::before{ font-size: var(--fsizeP); margin-right: 5px; margin-bottom: 2px;}

.tablebox.m2 .head li{ color: #FFF; background-color: var(--pri04);}

.tablebox ul.filter{ display: none; background-color: var(--pri03); color: #FFF; height: 100px;}
.tablebox ul.filter li{ border-bottom: 1px solid  rgba(255,255,255,.4);}
.tablebox ul.filter.on{ display: table-row; position: sticky; top: 0; z-index: 10; }
.tablebox ul.filter.on ~ ul.head{ top: 100px; }
.tablebox ul.filter h6{ font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; display: block; text-align: left; border-color: #FFF;}
.tablebox ul.filter ::before{ font-size: 26px; margin-right: 5px;}
.tablebox ul.filter select,
.tablebox ul.filter span{ display: inline-block; vertical-align: middle;}
.tablebox ul.filter select{ font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; color: #333; background-image: url(../Images/ui/icon_form_select_arrow.svg); border: none; background-color: rgba(255,255,255,.8); border-radius: 20px; min-width: auto; padding-left: 8px; padding-right: 10px; text-align: left;}
.tablebox ul.filter input{ font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; width: 100%; color: #333; background-color: rgba(255,255,255,.8); border-radius: 20px; text-align: left; min-width: auto; padding: 5px 15px; }
.tablebox ul.filter a.btn{ font-size: var(--fsizeS); padding: 6px 15px; min-width: auto; background: none; background-color: transparent; color: #FFF; border-color: #FFF; margin-bottom: 6px; border-radius: 7px; font-family: Roboto, Arial, Helvetica, sans-serif;}
.tablebox ul.filter a.btn:hover{ color: var(--pri01); background-color:rgba(255,255,255,.8);  }
.tablebox ul.filter li:last-child{ vertical-align: bottom;}
body.zh .tablebox ul.filter h6{ font-size: 14px;}
body.zh .tablebox ul.filter a.btn{padding: 5px; font-size: 14px; white-space: nowrap;}

.tablebox select,
.tablebox input[type=text],
.tablebox input[type=password],
.tablebox textarea{ width: 100%; min-width: 100px; border: none; border-radius: 5px; text-align: left; transition: .3s; background-color: rgba(0,0,0,.15);}
/*
.tablebox li:hover select,
.tablebox li:hover input[type=text],
.tablebox li:hover input[type=password],
.tablebox li:hover textarea{  }
*/
.tablebox li input[type=text]:focus,
.tablebox li input[type=password]:focus,
.tablebox li textarea:focus{ background-color: rgba(0,0,0,.25); color: #FFF;}
.tablebox li input.num{ width: 80px; min-width: auto; border-radius: 20px; padding: 5px 15px;}
.tablebox li i.UI.check{cursor: pointer;}


/* popup */
popup{ position: fixed; width: 100%;  height: 100vh; top: 0; left: 0; z-index: 99999; display: none; align-items: center; justify-content: center;}
popup.show{display: flex;}
popup a.bg{ position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); top: 0; left: 0; z-index: 1;}
popup .pcontent{ padding: 20px; border-radius: 10px; background-color: #FFF; position: relative; z-index: 5; box-shadow: 4px 4px 4px rgba(0,0,0,.25); max-width: 90%; min-width: 600px; line-height: 1.5;}
popup .tablebox{ border-radius: 10px; /*overflow: hidden;*/ margin-bottom: 10px;}
popup .tablebox li{ text-align:left; padding: 10px; border-bottom: 1px solid #FFF; background-color: #EEE;}
popup a.UI.close{ position: absolute; top: 5px; right: 10px; font-size: 18px;}
popup h6{ font-size: var(--fsizeM); text-align: center; padding: 10px; font-weight: 500; line-height: 1.2;}
body.zh popup h6{ font-size: 26px; }
popup .container h6{font-size: 20px!important; color: #666; text-align: left; padding: 15px 0;}
popup .btnbox{ margin-top: 10px; text-align: center;}
popup .btnbox a.btn{ font-size: 18px; min-width: 120px; padding: 8px 32px; margin: 0 5px;}
popup .btnbox a.btn::before{ margin-right: 2px; margin-bottom: 2px;}
popup .btnbox a.btn.gray{ background: none; background-color: #DDD; color: var(--pri01);}
popup .btnbox a.btn.gray:hover{ background-color: #BBB; color: #FFF;}
popup .tablebox select,
popup .tablebox input[type=text],
popup .tablebox input[type=password]{ width: 100%; min-width: 200px; border: none; border-radius: 20px; text-align: left;}
popup .tablebox input[type=text],
popup .tablebox input[type=password]{ padding: 5px 15px;}
/*popup li input[type=text]:focus{ background-color: rgba(0,0,0,.3); color: #FFF;}*/
.feedback {display: none;border: 3px solid rgb(255, 14, 14);background-color: #EEE;margin-left:10px;padding: 5px;position: absolute;left: 0;width: 100%; border-radius: 3px;box-shadow: 0px 0px 5px rgba(0,0,0,0.2);z-index:99;}
popup .tablebox{
    overflow: auto;
}
popup.device_edit .pcontent{ width: 750px;}
popup.station_info .pcontent{ width: 640px;}

/* pop-label */
.pop-label{ display: none; position: absolute; z-index: 99; top: 0; left: -10px; transform: translateY(calc(-100% - 10px)); background-color: var(--pri03); font-style: normal; font-family: Roboto, Arial, Helvetica, sans-serif; padding: 8px; border-radius: 8px; border: 1px solid #FFF; font-weight: 400;}
.pop-label dt{ font-weight: 700;}
.pop-label::before,
.pop-label::after { border: solid transparent; content:""; width: 0; height: 0; position: absolute;}
.pop-label::after{ border-width: 6px 6px 0 6px; border-top-color: var(--pri03); left: 10px; bottom: -6px;}
.pop-label::before{ border-width: 8px 8px 0 8px; border-top-color: #FFF; left: 8px; bottom: -8px;}

i.UI.info{ position: relative; margin-left: 5px; vertical-align: middle;}
i.UI.info:hover .pop-label{ display: inline-block;}

/* filterbox */
.filterbox{ font-family: Roboto, Arial, Helvetica, sans-serif;  display: inline-flex; position: relative; align-items: center; justify-content: center; white-space: nowrap; width: 100%; height: 45px; font-size: 0; color: #FFF; padding: 0 10px; margin-bottom: var(--space); background-color: var(--pri02); background:var(--gradient03); overflow: hidden; border-radius: 10px;}
.filterbox > div{font-size: var(--fsizeP); margin-right: 20px;}
.filterbox h6{font-size: 18px; display: inline-block; vertical-align: middle;}
.filterbox ::before{ font-size: 26px; margin-right: 5px;}
.filterbox select,
.filterbox span{ display: inline-block; vertical-align: middle;}
.filterbox select{ color: #333; background-image: url(../Images/ui/icon_form_select_arrow.svg); border: none; padding-left: 25px; background-color: rgba(255,255,255,.8); border-radius: 5px; }
.filterbox input{ color: #333; background-color: rgba(255,255,255,.8); border-radius: 5px; text-align: center; margin: 0 5px;}
.filterbox a.btn{ font-size: 18px; padding: 5px 15px 2px; min-width: auto; transition: .3s; border:none;}
.filterbox a.btn:hover{ color: var(--pri01); border-color: var(--pri01);}
.filterbox a.btn::before{font-size: var(--fsizeP); margin-bottom: 2px;}

/* watermark */
.watermark::before{ content: ''; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../Images/watermark.png); background-repeat: no-repeat; background-position: center; background-size: 50%; opacity: .1; pointer-events: none; z-index: 99;}
block.watermark::before{ background-image: url(../Images/watermark2.png); background-size: 30%; opacity: .2; z-index: 1;}

/* block */
block{ width: calc((100% - var(--space))/2); margin-right:var(--space); display: inline-block; overflow: -moz-scrollbars-none; overflow-y: auto; overflow-x:none; position: relative;}
block::-webkit-scrollbar { width: 2px !important; height: 0 !important; }
block:last-child{ margin-right: 0;}
block.full{ width: 100% !important; }
block.loading > .container > div.tablebox{ display: none!important;}
block.loading > .container::before ,div.tempload.loading::before{content: 'motion_photos_on'; font-size: 30px; animation: rotateme2 3s linear 0s infinite; position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -15px;}
block.loading > .container::after,div.tempload.loading::after{ content: 'LOADING...'; font-size: 14px; font-weight: 700; animation: changcolor 3s linear 0s infinite; font-family: Roboto, Arial, Helvetica, sans-serif; position: absolute; width: 80px; height: 16px; top: 50%; left: 50%; margin: 20px 0 0 -36px; text-align: center;}

@keyframes rotateme2 {
	0% {transform:rotate(0); color: var(--pri01);}
	25% { color: var(--pri02);}
	50% { color: var(--pri06);}
	75% { color: var(--pri02);}
	100% {transform:rotate(359deg); color: var(--pri01);}
}
@keyframes changcolor {
	0% {color: var(--pri01);}
	25% { color: var(--pri02);}
	50% { color: var(--pri06);}
	75% { color: var(--pri02);}
	100% {color: var(--pri01);}
}

block h3{ font-size: 0; position: relative; margin-bottom: -1px;}
block h3 b,
popup h3 b{ font-family: Roboto, Arial, Helvetica, 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; font-size: var(--fsizeP); font-weight: 400; text-transform: uppercase; line-height: 20px; display: inline-block; padding: 10px 50px 7px; color: #FFF; position: relative; z-index: 5; background-color: var(--pri01); border: 1px solid var(--pri01); transition: .3s; margin-right: 3px;  white-space: nowrap; border-radius: 10px 10px 0 0;}
body.zh block h3 b,
body.zh popup h3 b{ font-size: 18px; transition:background-color .3s;}
block h3 b i.name{ font-style: normal; font-weight: 700; margin-right: 8px; vertical-align: middle;}
block h3 b span{ display: inline-block; vertical-align: middle;}
block h3 b.UI::before{ margin-bottom: 2px; margin-right: 5px;}

block h3.multi b{cursor: pointer; background-color: var(--pri05); color: #999;}
block h3.multi b.focus{background-color: var(--pri01); color: #FFF;}
block h3.multi b:hover{color: #FFF; background-color: var(--pri02); border: 1px solid var(--pri01);}

block h3 .unit{/*font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;*/ font-size: var(--fsizeP); font-weight: 400; display: inline-block; float: right; margin-top: 5px; cursor: pointer;}
block h3 .unit span{ vertical-align: middle;}
block h3 .unit span::before{ margin-bottom: 3px;}
block h3 b.hot,
block h3 b.hot:hover,
block h3 b.hot.focus{ background-color: var(--pri04); color: #FFF;}

block h3 .extra{ position: absolute; top: 3px; right: 0px; z-index: 5;}
block h3 .extra a{ color: #FFF; transition: .3s; margin-left: 5px; vertical-align: middle; line-height: 1; }
block h3 .extra a:hover{ color: var(--pri01); }
block h3 .extra > a.UI{font-size: var(--fsizeS); padding: 6px; border-radius: 7px; background-color: #BFBFBF;}
block h3 .extra a.btn{font-size: var(--fsizeS); padding: 7px 15px 6px; border-radius: 7px; min-width: auto; background: none; background-color: #BFBFBF; border: none; text-transform: uppercase;}
block h3 .extra a.btn.UI::before{ margin-bottom: 2px; margin-right: 5px;}
block h3 .extra a.UI.filter.on{ background-color: var(--pri02); }
block h3 .extra a.btn ~ div.pageview{ margin-left: 20px;}
block h3 .extra a.btn ~ div.pageview::before{ content: '|'; position: absolute; left: -12px; color: #666;}

block h3 .extra select,
block h3 .extra span{ font-size: var(--fsizeS); display: inline-block; vertical-align: middle;}
block h3 .extra span{ font-weight: 500;}
block h3 .extra select{ color: #FFF; background-image: url(../Images/ui/icon_form_select_arrow_white.svg); border: none; margin-bottom: 1px; background-color: #BFBFBF; border-radius: 7px; margin: 0 10px 0 5px; }
block h3 .extra option{background-color: #BFBFBF;}
block h3 .extra select:hover{ color: #333; background-image: url(../Images/ui/icon_form_select_arrow.svg);}
block h3 .extra input{ color: #333; background-color: rgba(255,255,255,.8); border-radius: 7px; text-align: center; margin: 0 5px;}

block h3 .extra .pageview{ font-size: var(--fsizeS); color: #FFF; display: inline-flex; align-items: center; vertical-align: middle; background-color: #BBB; padding: 3px 15px; border-radius: 20px; position: relative;}
block h3 .extra .pageview a{ margin: 0;}
block h3 .extra .pageview .total{ padding: 3px; margin-right: 8px;}
block h3 .extra .pageview select{ color: #FFF; background-image: url(../Images/ui/icon_form_select_arrow_white.svg); background-position: 140% center; background-color: rgba(255,255,255,.0); padding: 3px 15px 5px; margin: 0; border-radius: 20px;}
block h3 .extra *:last-child{ margin-right: 0!important;}

block h6{ font-size: var(--fsizeP); margin-bottom: calc(var(--space)); font-weight: 500; border-bottom: 1px solid #999; padding-bottom: 5px;}
body.zh block h6{ font-size: 18px; transition: font-size 0s;}
block h6 span{ font-size: var(--fsizeS); font-weight: 300; color: #666; display: inline-block; margin-left: 10px;}
block img{ width: 100%;}

block .function{ position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: 2px; padding-right: var(--space); background-color: #DDD; text-align: right;}
block .function i{ font-size: 18px; vertical-align: middle; margin-bottom: 3px;}
block .function select{ font-size: 16px; border: none; padding: 3px 24px 3px 5px; vertical-align: middle;}
block .function a{ font-size: 18px; vertical-align: middle; color: #333; transition: .3s;}
block .function a::before{ margin-bottom: 2px;}
block .function a:hover{ color: var(--pri02);}

block .infobox{ width: 100%; display: inline-block; vertical-align: top; margin-bottom: calc(var(--space)*2);}
block .infobox.w50{ width: calc((100% - var(--space))/2);}
block .infobox.w50:nth-of-type(odd){ margin-right: var(--space); }

block .infobox input{ width: 100%; margin-bottom: 5px;}
block .infobox .btnbox{ display: inline-block; margin: 0 auto;}
block .infobox .btnbox a{ margin: 0 5px;}
block .infobox::after{ content: ''; display: table; clear: both;}

block > .container{ border: 1px solid var(--pri01); padding: var(--space); height: var(--functionH); overflow-y: auto;}
block > h3 + .container{ border-radius: 0 10px 10px 10px;}
block > iframe.container{ padding: 0;}
block.full.no-filter > .container{height: var(--normalH); }

block.move_function{ width: 0; overflow:visible; margin: 0; font-size: 26px; position: relative; z-index: 15; vertical-align: top;}
block.move_function .container{ overflow:visible; border: none; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: var(--functionH); }
block.move_function a{ color: #FFF; background-color: var(--pri02); border-radius: 5px; text-align: center; width: 80px; margin: 5px; padding-bottom: 10px; transition: .3s; margin: 5px 0; margin-right: var(--space); }
block.move_function a::before{ font-size: 32px; margin-bottom: -10px; position: relative; transition: .3s;}
block.move_function a:hover{ color: var(--pri01);}
block.move_function a.prev:hover::before{ animation: btn_prev .3s linear 0s infinite alternate;}
block.move_function a.next:hover::before{ animation: btn_next .3s linear 0s infinite alternate;}
block.move_function a span{ display: inline-block; font-size: 16px; width: 100%;}

@keyframes btn_prev {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-15%);}
}
@keyframes btn_next {
	0% {transform: translateX(0%);}
	100% {transform: translateX(15%);}
}


/*
block:hover > .container,
*/
block:hover h3 b{ background-color: var(--pri03); border-color: var(--pri03); }
block:hover h3.master b{ border-color: var(--pri01); border-bottom-color: var(--pri05);}
block:hover h3.master b.focus,
block:hover h3.master b:hover{ border-color: var(--pri01);}
block:hover .tablebox .head li{ background-color: var(--pri03);}
block:hover h3.multi b{background-color: var(--pri05); color: #999;}
block:hover h3.multi b:hover{color: #FFF; background-color: var(--pri02); border: 1px solid var(--pri01);}
block:hover h3.multi b.focus{background-color: var(--pri03); border-color: var(--pri03); color: #FFF;}
block:hover h3 b.hot,
block:hover h3 b.hot:hover,
block:hover h3 b.hot.focus{ background-color: var(--pri04); border-color: var(--pri04); color: #FFF;}


block.m2:hover .tablebox .head li{ background-color: var(--pri04);}
block.m2 > .container,
block.m2 h3 b.hot{ border-color: var(--pri04);}

.chart_obj{ display: flex; align-items: center; width: 100%; height: calc(var(--halfH2) - 40px); max-width: 450px; text-align: center; position: relative; margin: 10px auto 0;}
.chart_obj h6,
body.zh .chart_obj h6{ position: absolute; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: var(--fsizeXL);  width: 100%; text-align: center; top: var(--h6Top); transform: translateY(-50%); left: 0; border-bottom: none; margin-bottom: 0; }
.chart_obj canvas{ margin: 0 auto;}

/* header */
header{ height: var(--headerH); width: 100%; background-color: var(--pri05); padding: var(--space); position: fixed; z-index: 9998; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center;}
header .logo{width: 110px; margin-left: 55px; vertical-align: middle;}
header h1{ font-size: var(--fsizeL); font-weight: 700; display: inline-block; margin-right: 10px; color: #666;}
header h1::before{ font-size: var(--UIsize); margin: 0 5px 5px 0;}
body.zh header h1{ font-size: 28px; transition: font-size 0s;}

/* menu */
menu:hover dd,
menu:hover span,
.MenuOn menu dd,
.MenuOn menu span{ display: inline-block;}
.MenuOn menu .UI.menubtn::before{ content: 'sort';}
.fullscreenOn menu .UI.fullscreen::before{ content: 'fullscreen_exit';}
menu:hover,
.MenuOn menu{ width: 400px; box-shadow: 2px 0px 2px rgba(0,0,0,.4);}

menu{ position: fixed; top: 0; left: 0; z-index: 9999; width: 50px; height: 100vh; background: var(--gradient01);}
menu *{ text-transform: uppercase;}
menu dl{transition: .3s;}
menu .head{ height: var(--headerH); border-bottom: 1px solid rgba(255,255,255,.2);}
menu .menubtn{ line-height: var(--headerH);}
menu .down{ position: absolute; bottom: 0;}
menu .down a{width: 100%; margin-top: var(--space);}
menu .down a.normalscreen{ display: none;}
menu .UI::before{ font-size: var(--UIsize); margin:0 8px 3px 0;}
menu dt{ margin-bottom: var(--space); }
menu dt, menu dd, menu dd a{width: 100%;}
menu dd,
menu span{ display: none;}
menu a{ color: #FFF; font-size: 20px; transition: .3s; padding-left:var(--space); font-weight: 500; }
menu a:hover{ color: var(--pri02);}
menu .down a:hover{ color: #000;}
menu dd{ width: calc(100% - 48px); margin-left: 48px; margin-bottom:var(--space); border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); padding: 10px 0;}
menu dd a{ margin-bottom: 8px; padding-left: 0; position: relative; font-weight: 300;}
menu dd a.suba::after{ content: 'keyboard_arrow_down'; float: right; margin-right: 10px;}
menu dd a.suba.open::after{ content: 'keyboard_arrow_up';}
menu dd .sub{ display: none; border-left: 1px solid var(--pri01); margin-left: 9px; margin-bottom: 5px;}
menu dd .sub a::before{content: 'arrow_right';}
menu dd .sub a:last-child{ margin-bottom: 0;}
menu dd a.suba.open + .sub{ display: inline-block;}

.main menu a.home,
.history menu a.history,
.station menu a.hub,
.device menu a.device,
.device_log menu a.device_log,
.user menu a.people{color: var(--pri03);}

/* ============================ LOGIN ============================ */
.bodybox.login{ background-size: cover; background-repeat: no-repeat; background-position: center;display: flex; align-items: center;align-content: center;}
.bodybox.login::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../Images/index/bg_mask.svg); background-size: auto 100%; background-position: right; background-repeat: no-repeat;}

.loginbox{max-width: 655px; width: 655px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: inline-block; padding: 20px;}
.loginbox::after{ content: ''; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background-color: rgba(255,255,255,.6);-webkit-backdrop-filter: blur(15px);backdrop-filter: blur(15px); border-radius: 10px; }

.loginbox iframe{ border-radius: 15px; overflow: hidden; display: inline-block;}
.loginbox input{ border-radius: 20px!important;}

.login .head-logo{width:100%; text-align:center; font-size:30px;vertical-align:bottom;margin:20px 0 30px 0;border-bottom:solid 1px var(--pri01);padding-bottom:20px; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;}
.login .head-logo img{ width: 200px;}
.login b{vertical-align:bottom; margin:0 0 7px 20px; display:inline-block; font-weight: 500;}

.login .tablebox{ font-size:22px; width:100%; background-color: transparent;}
.login li:first-child{width:30%; min-width: 200px; vertical-align:middle;}

.login .tablebox ul{width:100%; background-color: transparent;}
.login ul li{ padding: 20px 10px; text-align: left; border-bottom: none;}
.login ul li img{max-width:302px;}
.login .UI::before{ margin-right:5px; margin-bottom: 3px;}
.login input{width:100%; border-bottom:1px #000 solid; padding:10px 20px; background-color: rgba(255,255,255,.25);}

.login a.link{display:inline-block; color:#000; background-color: transparent!important;}
.login a.link:hover{color:var(--pri02);}
.login li span{ display: inline-block; margin: 0 10px;}
.login a.btn{margin-bottom:15px; color:#FFF;}
.login a.btn:hover{ color: #000;}

/* ============================ MAIN ============================ */
.bodybox.main block > .container{ height: var(--halfH2);}
.bodybox.main block.map > .container{ height: var(--halfH);}
.bodybox.main block.map{ margin-bottom: var(--space);}
.bodybox.main block.event_list{width: calc(67% - var(--space)); margin-right: var(--space);}
.bodybox.main block.status_list{width: 33%; margin-right: 0;}
.bodybox.main block.map > .container,
.bodybox.main block.event_list > .container{ padding: 0;}
div.tablebox.m1,
div.tablebox.m2,
div.tablebox.m3{ display: none;}
.event_list.m1 .tablebox.m1,
.event_list.m2 .tablebox.m2,
.event_list.m3 .tablebox.m3{ display: table;}
div.tablebox.m2 > ul:nth-of-type(2){ color: var(--pri04); font-weight: 500; }

div.tablebox.m2 li:nth-of-type(1){ width: 250px;}
div.tablebox.m2 li:nth-of-type(2){ width: 100px;}
div.tablebox.m2 li:nth-of-type(3){}

div.tablebox.m3 li:nth-of-type(1){ width: 200px; }                                                                
div.tablebox.m3 li:nth-of-type(2){ width: 130px; }
div.tablebox.m3 li:nth-of-type(3){ }
div.tablebox.m3 li:nth-of-type(4){ width: 250px;}

div.tablebox.m1 ul.master{ font-weight: 500; background-color: #F5F5F5; cursor: pointer;}
div.tablebox.m1 ul.master:nth-of-type(odd){ background-color: #F5F5F5;}
div.tablebox.m1 ul.master:hover{ background-color: #CCC;}
div.tablebox.m1 ul.master:hover a{ background-color: #999;}
div.tablebox.m1 ul.master:hover a:hover{ background-color: var(--pri02);}
div.tablebox.m1 ul.master li{ border-top: 1px solid #DDD;}
div.tablebox.m1 ul li{ text-align: left;}
div.tablebox.m1 ul li:nth-of-type(1){ width: 230px;}
div.tablebox.m1 ul li:nth-of-type(2){ white-space: nowrap;}
div.tablebox.m1 ul li:nth-of-type(3){ width: 300px; }
div.tablebox.m1 ul li:nth-of-type(4){ width: 100px; }
div.tablebox.m1 ul.sub{ background-color: #DDD; display: none; }
div.tablebox.m1 ul.sub.on{ display: table-row;}
div.tablebox.m1 ul.sub li{border-bottom: 1px solid #FFF; font-size: var(--fsizeS);}
div.tablebox.m1 ul.sub li:first-child::before{ content: 'subdirectory_arrow_right'; margin-left:10px; margin-bottom: 6px; margin-right: 5px; color: #999; font-weight: 700;}
div.tablebox.m1 ul.sub li.UI::before{ margin-right: 5px; margin-bottom: 1px;}



#map h6.name{ font-size: var(--fsizeS); width: 100%; text-align: center; padding-bottom: 3px; margin-bottom: 3px;}
.mPointInfo{ width: 100%; display: table;}
.mPointInfo ul.item{ display: table-row; background-color: #EEE;}
.mPointInfo .item li{display: table-cell; font-size: 12px; white-space: nowrap; border-bottom: 1px solid #FFF; padding-right: 10px;}
.mPointInfo .item li::before{ content: ''; padding: 3px 10px; font-weight: 700; background-color: #DDD; margin-right: 10px;}
.mPointInfo .item li.id{}
.mPointInfo .item li.id::before{ content: 'ID:';}
.mPointInfo .item li:nth-of-type(2),
.mPointInfo .item li:nth-of-type(3){ }
.mPointInfo .item li:nth-of-type(2)::before{ content: 'PI:';}
.mPointInfo .item li:nth-of-type(3)::before{ content: 'MI:';}

span.up_time{ display: block; width: 100%; font-size: 16px; font-weight: 700; text-align: left; padding: 10px; color: var(--pri01);}
span.up_time.show{animation: time-updated 1s linear 0s 1 alternate;}

@keyframes time-updated {
	0% { color: var(--pri04);}
	10% { color: var(--pri01);}
	20% { color: var(--pri04);}
	30% { color: var(--pri01);}
	40% { color: var(--pri04);}
	95% {color: var(--pri04);}
	100% {color: var(--pri01);}
}
/* ============================ HISTORY ============================ */
.img_box{ margin-bottom:var(--space);}

.bodybox.history block.history_list,
.bodybox.history .group{width: calc(67% - var(--space)); margin-right: var(--space); display: inline-block; vertical-align: top;}
.bodybox.history block.history_Img{width: 33%; margin-right: 0;}
.bodybox.history block.alarm_areas{width: 33%; }
.bodybox.history block.log_message{width: calc(67% - var(--space));}
.bodybox.history block.history_list > .container,
.bodybox.history block.event_history > .container,
.bodybox.history block.alarm_areas > .container,
.bodybox.history block.log_message > .container{ padding: 0;}
/*.bodybox.history .tablebox ul.focus a.UI.map{ white-space: nowrap;}*/

div.tablebox.h1 li:nth-of-type(1){ width: 250px; text-align: left; padding-left: 20px;}
div.tablebox.h1 li:nth-of-type(2){ width: 100px; text-align: left;}
div.tablebox.h1 li:nth-of-type(3){ text-align: left;}
div.tablebox.h1 li:last-child{ width: 85px; text-align: left; white-space: nowrap;}
div.tablebox.h1 ul.focus li:last-child::after{content: 'keyboard_arrow_right'; font-size: var(--fsizeP); vertical-align: middle; margin-bottom: 3px;}
div.tablebox.h1 a.UI.map{ pointer-events: none; background-color: transparent;}


/* history detail */
.bodybox.history block.event_history{width: 100%; margin-right: 0; margin-bottom: var(--space); }
.bodybox.history block.event_history > .container,
.bodybox.history .group block > .container{ height: var(--halfH2);}

.bodybox.history .alarm_areas h5{ font-size: var(--fsizeP); font-weight: 500; width: 100%; background-color: var(--pri01); color: #FFF; padding: 7px; padding-left: 20px;}
.bodybox.history .area_list{ width: 100%; font-size: var(--fsizeS); }
.bodybox.history .area_list dl{ padding: 8px 0; border-bottom: 1px solid #DDD;}
.bodybox.history .area_list dt,
.bodybox.history .area_list dd{ position: relative; padding: 4px 8px; width: 100%;}
.bodybox.history .area_list dd{ display: none;}
.bodybox.history .area_list dd.on{ display: inline-block;}
.bodybox.history .area_list dt::before,
.bodybox.history .area_list dd::before{ content: 'label'; color: var(--pri03); position: absolute; left: 18px; top: 6px;}
.bodybox.history .area_list dd::before{ content: 'subdirectory_arrow_right'; }
.bodybox.history .area_list dt{ padding-left: 40px; cursor: pointer; font-weight: 600; color: #333;}
.bodybox.history .area_list dd.sub1{padding-left: 60px;}
.bodybox.history .area_list dd.sub1::before{ left: 38px;}
.bodybox.history .area_list dd.sub2{padding-left: 80px;}
.bodybox.history .area_list dd.sub2::before{ left: 58px;}

div.tablebox.l1 ul li:nth-of-type(1),
div.tablebox.l2 ul li:nth-of-type(1){ width: 220px;}

block.log_message div.tablebox{display: none;}
block.log_message.l1 div.tablebox.l1,
block.log_message.l2 div.tablebox.l2{display: table;}
block.log_message .tablebox li{ text-align: left;}
block.log_message .tablebox li a.btn{color: #FFF; font-size: var(--fsizeS); padding: 3px 10px; min-width: auto; background: none; background-color: #BFBFBF; position: absolute; bottom: 10px; right: 10px; border-radius: 7px;}
block.log_message .tablebox li a.btn:hover{ color: #000;}

div.tablebox.h2 ul.master{ font-weight: 700;}
div.tablebox.h2 ul li:nth-of-type(1){ width: 300px; padding-left: 20px; text-align: left;}
div.tablebox.h2 ul li:nth-of-type(2){ text-align: left;}
div.tablebox.h2 ul li:nth-of-type(3),
div.tablebox.h2 ul li:nth-of-type(4){ width: 100px;}
div.tablebox.h2 ul li:nth-of-type(5),
div.tablebox.h2 ul li:nth-of-type(6){ width: 80px;}
div.tablebox.h2 ul li:nth-of-type(7){ width: 150px;}

div.tablebox.h2 ul.sub{ background-color: #DDD;}
div.tablebox.h2 ul.sub li:nth-of-type(1)::before{ content: 'subdirectory_arrow_right'; margin-left:10px; margin-bottom: 6px; margin-right: 5px;}


/* ============================ DEVICE, DEVICE LOG ============================ */
block.device_list,
block.d_log_list{ width: 100%;}
block.device_list .container,
block.d_log_list .container{ padding: 0;}

div.tablebox.dl1 ul.master{ font-weight: 700; background-color: #F5F5F5; cursor: pointer;}
div.tablebox.dl1 ul.master:nth-of-type(odd){ background-color: #F5F5F5;}
div.tablebox.dl1 ul.master:hover{ background-color: #CCC;}
div.tablebox.dl1 ul.master li{ border-top: 1px solid #DDD;}
div.tablebox.dl1 ul li{ text-align: left;}
div.tablebox.dl1 ul li:nth-of-type(1){ padding-left: 20px; width: 300px;}
div.tablebox.dl1 ul li:nth-of-type(2){ }
div.tablebox.dl1 ul li:nth-of-type(3){ width: 300px;}
div.tablebox.dl1 ul li:nth-of-type(5){ width: 100px; text-align: center;}
div.tablebox.dl1 ul.sub{ background-color: #DDD; display: none;}
div.tablebox.dl1 ul.sub.on{ display: table-row;}
div.tablebox.dl1 ul.sub li:first-child::before{ content: 'subdirectory_arrow_right'; margin-left:10px; margin-bottom: 6px; margin-right: 5px;}

div.tablebox.d1 ul li:nth-of-type(1){ text-align: center; width: 80px;}
div.tablebox.d1 ul li:nth-of-type(2){}
div.tablebox.d1 ul li:nth-of-type(3){}
div.tablebox.d1 ul li:nth-of-type(4){}
div.tablebox.d1 ul li:nth-of-type(5){}


/* ============================ STATION, STATION GROUP ============================ */
.bodybox.station block > .container{ height: var(--normalH);}
block.station_list .container,
block.station_group .container{ padding: 0;}

div.tablebox.s2 a.UI{ margin: 0 3px;}
div.tablebox.s2 ul li:nth-of-type(1){ width: 82px; text-align: center;}
div.tablebox.s2 ul li:nth-of-type(2){ width: 200px; }
div.tablebox.s2 ul li:nth-of-type(3){ }
div.tablebox.s2 ul li:nth-of-type(4){ width: 130px; text-align: center; white-space: nowrap;}

div.tablebox.s3 ul li{ text-align: left;}
div.tablebox.s3 ul li:nth-of-type(1),
div.tablebox.s3 ul li:nth-of-type(7),
div.tablebox.s3 ul li:nth-of-type(8){ width: 80px; text-align: center;}
div.tablebox.s3 ul li:nth-of-type(2){ width: 150px;}

div.tablebox.s2 li.icon-field,
div.tablebox.s3 li.icon-field{ width: 80px;}

/*popup.station_edit .tablebox li:nth-of-type(2){ text-align:center;}*/
popup.device_edit .mydevice{ font-size: 0;}

div.tablebox.s4 ul li:nth-of-type(1){ width: 140px;}
div.tablebox.s4 ul li:nth-of-type(3){ width: 80px; text-align: center;}
body.zh div.tablebox.s4 ul li:nth-of-type(3){ width: 100px;}

div.tablebox.s5 ul li:nth-of-type(1){ width: 140px;}

.mydevice ul.item{ display: inline-block; /*width: calc((100% - 5px)/2);*/ width: 100%; min-width: 300px; background-color: #EEE; padding: 8px 10px 8px 15px; border-radius: 5px; margin: 0 5px 5px 0; position: relative; overflow: hidden;}
.mydevice ul.item:nth-of-type(2n){ margin-right: 0;}
.mydevice ul.item::before{ content: ''; width: 10px; height: 100%; position: absolute; top: 0; left: -5px; background-color: #AAA; transition: .3s;}
.mydevice ul.item li:first-child::before{ font-size: 20px; margin-right: 5px;}
.mydevice ul.item.type1 li:first-child::before{content: 'memory';}
.mydevice ul.item.type2 li:first-child::before{content: 'camera_rear';}
.mydevice ul.item.type3 li:first-child::before{content: 'mediation';}
.mydevice ul.item.type4 li:first-child::before{content: 'deblur';}

.mydevice li{ display: inline-block;  font-size: var(--fsizeS); white-space: nowrap;}
.mydevice li:last-child{ display: none; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.mydevice ul:hover li:last-child{ display: inline-block;}
.mydevice ul:hover::before{ background-color: var(--pri03);}

/* station group setting */
.bodybox.station block.group_setting > .container,
.bodybox.station block.station_group2 > .container,
.bodybox.station block.station_list2 > .container,
.bodybox.station block.move_function > .container,
.bodybox.station block.region_list > .container{ height: var(--functionH);}


block.group_setting{ width: 450px;}
block.move_function{ width: 50px;}
block.station_group2,
block.station_list2{ width: calc((100% - 450px)/2 - var(--space) - 25px);}
block.region_list{ width: calc(50% - var(--space) - 25px);}
block.station_group2 .container,
block.station_list2 .container,
block.region_list .container{ padding: 0;}
block.station_list2,
block.region_list.all{ margin-right: 0;}

.user_assign{}
.user_assign Label{ min-width: 50%; margin-bottom: 5px;}
.user_assign Label::before{ margin-right: 5px;}
div.tablebox.g1{ margin-bottom: 20px; border-radius: 10px; overflow: hidden; }
div.tablebox.g1 li{ border-bottom: 1px solid #FFF; text-align: left;}
div.tablebox.g1 li.head{ padding-left: 20px;}
div.tablebox.g1 li:nth-of-type(2){ font-family: Roboto, Arial, Helvetica, sans-serif; font-size: var(--fsizeP); }
div.tablebox.g1 li span{ white-space: nowrap; display: inline-block; font-weight: 700; }
div.tablebox.g1 li input{ border-radius: 20px; padding: 5px 15px;}
div.tablebox.g1 li input.alone{ padding: 5px;}
div.tablebox.g1 li input.num{ margin: 5px;}
/*div.tablebox.g1 ul:nth-of-type(odd){ background-color: #EEE;}*/
div.tablebox.g1 li.head img{ width: 34px; vertical-align: middle;}

div.tablebox.g2 li{ text-align: left;}
div.tablebox.g2 li:nth-of-type(1){ width: 50px; text-align: right;}
div.tablebox.g2 li:nth-of-type(2),
div.tablebox.g2 li:nth-of-type(3){ width: 140px; white-space: nowrap; overflow: hidden; text-overflow : ellipsis;}
div.tablebox.g2 li:nth-of-type(4),
div.tablebox.g2 li:nth-of-type(5),
div.tablebox.g2 li:nth-of-type(6){}

div.tablebox.g2.ui-sortable ul{ cursor: grab;}
div.tablebox.g2.ui-sortable ul:active{ cursor: grabbing;}
div.tablebox.g2.ui-sortable ul:hover li:nth-of-type(1)::after{content: 'unfold_more'; position: absolute; top: 50%; left: 2px; transform: translateY(-50%);}
div.tablebox.g2 ul.head{ cursor: default!important;}
div.tablebox.g2.ui-sortable ul.head:hover li:nth-of-type(1)::after{ display: none;}

div.tablebox.ar1 li,
div.tablebox.ar2 li{ text-align: left;}
div.tablebox.ar1 li:nth-of-type(1),
div.tablebox.ar2 li:nth-of-type(1){ width: 80px; text-align: center;}

.alarm_info p.UI::before{ margin-right: 5px; margin-bottom: 4px;}


/* ============================ USER, USER GROUP ============================ */
.bodybox.user block > .container{ height: var(--normalH);}
block.user_list,
block.role_list{ width: 100%;}
block.ugroup_list{ width: calc((100% - 50px - var(--space)*2) / 3 - 50px);}
block.ugroup_list.l1{ width: calc((100% - 50px - var(--space)*2) / 3 + 100px);}
block.user_list .container,
block.role_list .container,
block.ugroup_list .container{ padding: 0;}

block.ugroup_list h3 b{ padding: 10px 35px 7px;}
block.ugroup_list h3 b,
block.ugroup_list h3 select{font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;}

popup.user_edit .tablebox li.head{ width: 120px;}
popup.user_edit .tablebox li input{ text-align: left;}

div.tablebox.u1 li:nth-of-type(1){ width: 240px; text-align: left; padding-left: 20px;}
div.tablebox.u1 li:nth-of-type(2){ }
div.tablebox.u1 li:nth-of-type(2),
div.tablebox.u1 li:nth-of-type(3){ text-align: left;}
div.tablebox.u1 li:nth-of-type(4){ width: 150px;}
div.tablebox.u1 li:nth-of-type(5),
div.tablebox.u1 li:last-child{ width: 80px; text-align: center;}

div.tablebox.r1 li:nth-of-type(1){ width: 80px; padding-left: 20px;}
div.tablebox.r1 li:nth-of-type(2){ text-align: left;}
div.tablebox.r1 li:nth-of-type(3){ text-align: left;}
div.tablebox.r1 li:nth-of-type(4){ width: 80px;}

block.ugroup_list div.tablebox li{ text-align: left;}
div.tablebox.ug1 li:nth-of-type(1){ padding-left: 20px;}
div.tablebox.ug1 li:last-child{ width: 85px; text-align: left;}
/*div.tablebox.ug1 ul.focus a.UI.delete{ white-space: nowrap;}*/
div.tablebox.ug1 ul.focus li:last-child::after{content: 'keyboard_arrow_right'; font-size: var(--fsizeP); vertical-align: middle; margin-bottom: 3px;}

div.tablebox.ug2 li:nth-of-type(1){ width: 50px; text-align: right;}
div.tablebox.ug2 li:nth-of-type(2){ text-align: left;}

popup div.tablebox.r2 li{ width: 10%; min-width: 80px; text-align: center;}
/*popup div.tablebox.r2 .head li{ background-color: var(--pri02);}*/
popup div.tablebox.r2 li:nth-of-type(1){ width: auto; text-align: left;}
popup div.tablebox.r3 li input[type=text],
popup div.tablebox.r3 li textarea{ text-align: left;}








/* ============================ mediaquires ============================ */
@media screen and (max-width: 1400px) {
	.filterbox h6.UI,
	.filterbox a.btn{ font-size: 0;}
	block h3 b, popup h3 b{ font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; padding: 10px 20px 7px!important;}
	block h3 .extra a{font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;}
	block.ugroup_list.l2 h3 b.UI.group{ padding: 10px 10px 7px!important;}
	block.ugroup_list.l2 h3 b.UI.group span{ display: none;}
	
}