:root {   
    --image-clip-path: 30px; /*calc( 100vw * 0.045 );*/    
    --image-clip-border: 8px; /*calc( 100vw * 0.0075 ); */    
    /* var(--image-clip-path)  */
}
.page-searchbar, .nusc_logo_page {
  display: none;
}
.slider .slick-dots button  {
    padding-top: 1px;
}
.slider .slick-dots .slick-active  {
    width: 30px;
}
.slider .slick-dots .slick-active button {
    width: 30px;
    height: 3px;
    background-color: #000;
    border-radius: 5px;    
}
.slider .slick-dots .slick-active button::before {
    content:"";    
}
#BannerZone .container-fluid {
	max-width: calc(100% - var(--IndexSpaceWidth) );
}


#BannerZone img {
    width:100%;
    height:auto;
/*    width: auto;
    height: 100%;
    position: absolute;  */  
}

#BannerZone .BannerGroup a:last-child > img {
    /*position: relative;    */
}
#BannerZone .slick-current > div {
    text-align: center;
}
.slick-banner {
    margin-top: var(--image-clip-border);
}

#BannerZone .slick-list {
    --WidthData: calc(100vw - var(--IndexSpaceWidth) - var(--bs-gutter-x) );
    --HeightData: calc( var(--WidthData) * 0.1954 );
    width: var(--WidthData);
    /*height: var(--HeightData);*/
}
.bannerborder {
    padding: 0;
    margin: 0;
}
.bannerimg_1 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*0 );
}
.bannerimg_2 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*1 );
}
.bannerimg_3 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*2 );
}
.bannerimg_4 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*3 );
}
.bannerimg_5 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*4 );
}
.bannerimg_6 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*5 );
}
.bannerimg_7 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*6 );
}
.bannerimg_8 {
    width: calc( 100% + (var(--image-clip-border) - var(--image-clip-path))*7 );
}
.slick-banner .bannerlink {
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}    
.slick-banner .bannerlink div{
    display: none;
}    

#BannerZone .BannerGroup {
    --WidthData: calc(100vw - var(--IndexSpaceWidth) );
    --HeightData: calc( var(--WidthData) * 0.1954 );  /*0.1954*/
    width: var(--WidthData);
    height: var(--HeightData);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}
.slick-banner .bannerborder:not(:first-child) {
    /*margin-left: calc( 0px - var(--image-clip-path) + var(--image-clip-border) ) !important;*/
}    
.bannerClass {
    /*position: relative;*/
    /*top: 2px;  equal to border thickness * /
    left: 2px; / * equal to border thickness */
    /*width: calc( 100% - 2px );  container height - (border thickness * 2) * /
    height: calc( 100% - 2px ); / * container height - (border thickness * 2)   
    clip-path: polygon(0 0, calc( 100% - var(--image-clip-path) ) 0, 100% 100%, calc( var(--image-clip-path) ) 100%);
    -webkit-clip-path:  polygon(0 0, calc( 100% - var(--image-clip-path) ) 0, 100% 100%, calc( var(--image-clip-path) ) 100%);*/  
}    

#BusinessZone .container-fluid {
	max-width: calc(100% - var(--IndexSpaceWidth) );
}

#BusinessZone .BusinessItem {
    --WdithZone: calc( (100vw - var(--IndexSpaceWidth) )/ 5  );
    --HeightZone: calc( var(--WdithZone) * 0.75 );
    margin: 2px;
    /*background-color: blue;*/
    height: var(--HeightZone);
    display: block;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;    
}
#BusinessZone .BusinessItem div {
    margin-left: 5px;
    font-size: 1.7rem;
    font-weight: bold;
    align-items: end;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: #fff;
    padding-bottom: 5px;
    position: absolute;
    bottom: 20px;
}
#BusinessZone .BusinessItem img{
    width: calc( 50% );
    min-width: calc( 1.8rem * 4  );
    height: auto;
    position: absolute;
    bottom: 20px;
}

#BusinessZone .BusinessItem.BusinessItemControl{
    background-image: url("../img/BussinessZone/b-1.jpg")
}
#BusinessZone .BusinessItem.BusinessItemsSafty{
    background-image: url("../img/BussinessZone/b-2.jpg")
}
#BusinessZone .BusinessItem.BusinessItemResponse{
    background-image: url("../img/BussinessZone/b-3.jpg")
}
#BusinessZone .BusinessItem.BusinessItemWast{
    background-image: url("../img/BussinessZone/b-4.jpg")
}

#BusinessZone .BusinessRightItem img{
    width: 100%;
    height: auto;
    padding: 4px;
}

#BusinessZone .BusinessRightItem {
    border-radius: 8px;
    background-color: var(--GlobalStyle-bgColor);
    width: calc( 100% - 3px);
    height: calc( 100% - 3px);
    display: flex;
    padding: 5px;
}
#newsZone {
	max-width: calc(100% - var(--IndexSpaceWidth) );
}

#newsZone .tab-content {
    font-size: 1rem;
}

#newsZone .events-list-title{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-self: center;
}

#newboard-zone button {
	padding: 0.5rem 0.5rem;
	background-color: var(--GlobalStyle-bgColor);
}
#newboard-zone button.active {
	color: var(--NavNewsActiveStyle-Color);
	background-color: var(--NavNewsActiveStyle-bgColor);
}
#newboard-zone button div{
    --FontSize: 1.5rem;
	font-size: var(--FontSize);
    /*width: calc( var(--FontSize) * 5 );*/
    width: 100%;
	line-height: calc( var(--FontSize) * 1.25 );	
	font-weight: 300;
	/*border: 2px solid var(--GlobalStyle-bgColor);*/
	color: var(--GlobalStyle-Color);
}
#newboard-zone button.active div{
	/*border-bottom-color: var(--NavSubGlobalStyle-bgColor);*/
}

#nav-NewsContent .events-news
{
  border-bottom: 1px solid #D3D3D3;
  padding: 8px 0px;
    padding-top: 8px;
}

#nav-NewsContent .events-news:first-child
{
  padding-top: 8px;
}

#nav-newboard > .events-news:last-child, #nav-news > .events-news:last-child, #nav-clarification > .events-news:last-child
{
  border-bottom: 0px;
  padding-top: 8px;
}

#nav-newszone > .events-news:last-child, #nav-news > .events-news:last-child, #nav-clarification > .events-news:last-child
{
  border-bottom: 0px;
  padding-top: 8px;
}

#newboard-hotzone > div, #newboard-zone > div , #newboard-newszone > div  {
	padding: 0.5rem 0.5rem;
	background-color: var(--GlobalStyle-bgColor);
    cursor: default;
}
#newboard-hotzone  > div div, #newboard-zone  > div div, #newboard-newszone  > div div{
    --FontSize: 1.5rem;
	font-size: var(--FontSize);
    /*width: calc( var(--FontSize) * 5 );*/
    width: 100%;
	line-height: calc( var(--FontSize) * 1.25 );	
	font-weight: 300;
	/*border: 2px solid var(--GlobalStyle-bgColor);*/
	color: var(--GlobalStyle-Color);
}

#newsZone #nav-hotzone ul {
    list-style-type: none;
    padding: 1rem 0;
}
#newsZone #nav-hotzone ul li{
    --FontSize: 1.25rem;
	font-size: var(--FontSize);
	line-height: calc( var(--FontSize) * 1.75 );	
    padding-right: 1rem;
}

.newsZone-board {
    --FontSize: 1.5rem;
	font-size: var(--FontSize);
	line-height: calc( var(--FontSize) * 1 );	
	font-weight: 300;
	color: var(--GlobalStyle-Color);
	background-color: var(--GlobalStyle-bgColor);
    text-align: left;
    padding: .5rem;
    margin: 0 4px;
}
.newsZone-board a {
    --FontSize: 1.25rem;
	font-size: var(--FontSize);
	color: var(--GlobalStyle-Color);
	background-color: var(--GlobalStyle-bgColor);
}
.newsZone-board a.btn {
    --FontSize: 0.875rem;
	font-size: var(--FontSize);
}
.newsZone-board .events-list-date{
    --FontSize: 1.1rem;
	font-size: var(--FontSize);
}

#radar-pc {
}
#radar-pc.radar-bg{
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    color: #000;
    background-image: url("../img/lsb_bg_icon.png");
    background-color: #A4D29F;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40%;
    height: 60px;
    margin: 8px 2px;
    border-radius: 5px;
}
#radar-pc .radar-location {
    position: absolute;
    top: 13%;
    left: 32%;
    width: calc(100% - 32%);
    color: #365A83;
    font-size: 1rem;
    font-weight: 800;
    font-family: "Microsoft JhengHei", sans-serif;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;    
}
#radar-pc .radar-title {
    font-size: 0.75rem;
    position: absolute;
    left: 6px;
    bottom: 3px;
    color: #000000;
    font-weight: 300;
    font-family: "Microsoft JhengHei,Arbonnie";
}
#radar-pc .radar-value {
    font-size: 1.3rem;
    position: absolute;
    top: 51%;
    left: 32%;
    color: #365A83 !important;
    letter-spacing: 1px;
    font-family: "Arial";
}
#radar-pc .radar-unit {
    font-size: .8rem;
    position: absolute;
    right: 4%;
    color: #000000;
    font-weight: 500;
    font-family: "Arial";
    bottom: 3px;
}
.NppDataInfo {
    background-color: #E8EFEC;
}
.NppDataInfo .InfoTitle {
    --FontSize: 1.75rem;
	font-size: var(--FontSize);
	/*line-height: calc( var(--FontSize) * 1.25 );*/
	font-weight: bold;
	color: var(--GlobalStyle-bgColor);
    text-align: center;
    padding: .25rem;
    margin: 0 4px;
    /*height: 72px;*/
}

.NppDataInfo .nppTitle {
    width: 22%;
}

.NppDataInfo .nppTitle a:hover {
    color: var(--GlobalStyle-bgColor);
}

.NppDataInfo .nppTitle a:first-child{
    font-size: 1.2rem;
    display: block;
}
.NppDataInfo .nppSatus {
    width: 39%;
}
.NppDataInfo .nppborder {
    border: 2px solid #E8EFEC;
    padding: 0.75rem 4px;
    margin: 0;
}
.NppDataInfo .nppTitle .btn {
    background-color: var(--GlobalStyle-bgColor);
    font-size: 0.75rem;
    padding-left: 2px;
    padding-right: 2px;    
    margin-top: 0.75rem;
}

.NppDataInfo .nppNoTitle {
    padding: 0;
    margin: 0;
    font-size: 1rem;
    align-self: center;
}
.NppDataInfo .nppSatusValue {
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    align-self: center;
}

.NppDataInfo .nppSatus .nppSatusValue > div {
    border-radius: 12px;
    padding: 3px 0;
}
.NppDataInfo .nppSatus1 .nppSatusValue > div {
    /* background-color: #00AA59; */
    background-color: #008505;
    color: #ffffff;
}
.NppDataInfo .nppSatus2 .nppSatusValue > div {
    background-color: #ffffff;
    border: 1px solid #ccc;
    color: #000000;
}
.NppDataInfo .nppSatus3 .nppSatusValue > div {
    background-color: #d9d9d9;
    border: 1px solid #6A6A6A;
    color: #000000;
}
.NppDataInfo .nppSatus4 .nppSatusValue > div {
    background-color: #000000;
    color: #ffffff;
}
.NppDataInfo .nppSatus2 .nppData, .NppDataInfo .nppSatus2 .SatusValue {
    display: none;
}
.NppDataInfo .nppSatus3 .nppData, .NppDataInfo .nppSatus3 .SatusValue {
    display: none;
}
.NppDataInfo .nppSatus4 .nppData, .NppDataInfo .nppSatus4 .SatusValue {
    display: none;
}

.NppDataInfo .nppDataTitle {
    padding: 0;
    padding-top: 2px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 0.9rem
}
.NppDataInfo .nppDataValue {
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    text-align: end;
}
.NppDataInfo .nppDataUnit {
    padding: 0;
    padding-left: 3px;
    margin: 0;
    font-size: 0.7rem;
    text-align: start;
    align-self: end;
}
.NppDataInfo .SatusValue {
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    align-self: center;
}
.NppDataInfo .nppDateValue {
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    white-space: nowrap;
}

.NppDataInfo #npp1 {
    background-color: #ffffff;
}
.NppDataInfo #npp2 {
    background-color: #ffffff;
}
.NppDataInfo #npp3 {
    background-color: #ffffff;
}

.NppDataInfo .InfoSubTitle {
    text-align: left;
    padding: 12px;
}
#radar-pc-2.radar-bg {
  color: #000;
  background-image: url("../img/lsb_bg_icon.png");
  background-color: #A4D29F;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
#radar-pc-2 .radar-location {
  color: #365A83;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: "Microsoft JhengHei", sans-serif;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#radar-pc-2 .radar-title {
    font-size: 0.75rem;
    color: #000000;
    font-family: "Microsoft JhengHei,Arbonnie";
    align-self: end;
    text-align: right;
}
#radar-pc-2 .radar-value {
  font-size: 1.3rem;
  color: #365A83 !important;
  letter-spacing: 1px;
  font-family: "Arial";
    align-self: end;
}
#radar-pc-2 .radar-unit {
    font-size: .8rem;
    color: #000000;
    font-family: "Arial";
    align-self: end;
    text-align: left;
}

.btn-rmc {
    background-color: var(--GlobalStyle-bgColor);
}

#peopleZone {
	/*background-image: url("../img/people_bg_pc.png")*/
}
#peopleZone .container-fluid {
	max-width: calc(100% - var(--IndexSpaceWidth) );
}
 
#peopleZone .peopleItem {
    border: 1px solid #cccccc;
    padding: 32px 4px;
    display: block;
    font-size: 0.85rem;
    line-height: 1.25rem;
    text-align: center;
}
#peopleZone img {
    width: auto;
    height: 50px;
    margin-bottom: 0.25rem;
}
.peopleZoneTitle div{
    font-size: 1.75rem;
    color: var(--GlobalStyle-bgColor);
    margin: 1rem auto;
    margin-top: 2rem;
}
.peopleItem a {
	display: block;
	text-align: center;
	margin: 4px;
}

#InfoZone .container-fluid {
  max-width: calc(100% - var(--IndexSpaceWidth) );	
}
.InfoZoneTitle {
	padding: 0px;
}
.InfoZoneTitle div {
    font-size: 1.75rem;
    color: var(--GlobalStyle-bgColor);
    text-align: center;
    margin: 1rem auto;
    margin-top: 2rem;
}

.InfoItem a  {
	display: block;
    /*color: var(--GlobalStyle-bgColor);*/
    color: var(--GlobalStyle-bgColor);;
}

.InfoItem a > div {
	/*border: 1px solid #C4C4C4;*/
	padding: 1rem 0 !important;
	height: 100%;
	border: 1px solid #dedede;
	/*box-shadow: 0px 0px 5px #ccc;*/
} 
.InfoItemIcon {
	/*display: flex;*/
	padding: 5px;
	margin: 0;
	color: var(--GlobalStyle-Color);
	text-align: center;
	align-items: center;
	/*width:100%;
	height: 80px;*/
}

.InfoItemIcon img{
	width: auto;
	height: 50px;
}

.InfoItemTItle {
	/*align-self: center;	*/
    font-size: 0.75rem;
	padding: 0 2px;
    text-align: center;
}

.InfoAgency {
    padding: 0px;
}
.InfoAgencyTitle {
    padding: 0px;
}
.InfoAgencyTitle div {
    font-size: 1.75rem;
    color: var(--GlobalStyle-bgColor);
    text-align: center;
    margin: 1rem auto;
    margin-top: 2rem;
}

.InfoAgencyData {
    display: block;   
    width: 100%;
}
.InfoAgencyData img{
    width: 100%;
    height: auto;
    padding: 4px;
}
.InfoAgencyData div{
    width: 100%;
    text-align: center;
    font-size: 1rem;
}

.InfoInstitute {
    padding: 0px;
}
.InfoInstituteTitle {
    padding: 0px;
}
.InfoInstituteTitle div {
    font-size: 1.75rem;
    color: var(--GlobalStyle-bgColor);
    text-align: center;
    white-space: nowrap;
    margin: 1rem auto;
    margin-top: 2rem;
}
.InfoInstituteData {
    display: block;   
    width: 100%;
}
.InfoInstituteData img{
    width: 100%;
    height: auto;
    padding: 4px;
}
.InfoInstituteData div{
    width: 100%;
    text-align: center;;
    font-size: 1rem;
}

.InfoLink {
    padding: 0px;
}
.slick-link img {
    height: auto;
    margin: auto;
    width: 100%;
    padding: 0px;
    border: 1px solid #cccccc;
}
.InfoLinkTitle {
    padding: 0px;
}
.InfoLinkData {
    padding: 4px;
}
.InfoLinkTitle div {
    font-size: 1.75rem;
    color: var(--GlobalStyle-bgColor);
    margin: 1rem auto;
    text-align: center;
}

.InfoFoundation {
    padding: 0px;
}
.slick-foundation img {
    height: auto;
    margin: auto;
    width: 100%;
    padding: 0px;
    border: 1px solid #cccccc;
}
.InfoFoundationTitle {
    padding: 0px;
}
.InfoFoundationData {
    padding: 4px;
}

.InfoFoundationTitle div {
    font-size: 1.75rem;
    color: var(--GlobalStyle-bgColor);
    margin: 1rem auto;
    text-align: center;
}