:root {   
    --image-clip-path: 30px; /*calc( 100vw * 0.045 );*/    
    --image-clip-border: 8px; /*calc( 100vw * 0.0075 ); */    
    --RadarHeight:86px;
    /* 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 {
    position: relative;
    z-index: 10;
/*    width: 100vw;
    height: calc(100vw*0.33);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;*/
    width: 100vw;
    height: 450px;
    background-image: url('../img/banner-2024-bg.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    
}
#BannerZone .container-fluid {
	/*max-width: calc(100% - var(--IndexSpaceWidth) - var(--IndexSpaceWidth)/2 );*/
	max-width: calc(100% - var(--IndexSpaceWidth)  );
}

#BannerZone #BannerZoneTop {
    width: 100vw;
    height: 450px;
    z-index: 10;
}
#BannerZone .BannerZoneTop-left {
    padding: 1rem;
    /*background-color: rgba(255, 255, 255, 0.45);*/
    font-size: 1.25rem;
}
#BannerZone .BannerZoneTop-right {
    padding: 1rem;
    flex: 0 0 auto;
    width: 250px;
}
#BannerZone .BannerZoneTop-left img {
    width: 25%;
    height: auto;
    margin: 1rem auto;
}
#BannerZone .BannerZoneTop-right img {
    width: auto;
    height: calc(100vw*0.33 - 160px );
}

#BannerZone .Bannericon {
    position: absolute;
    top: 1rem;
    right: 15px;
    z-index: 999;
    font-size: .8rem;
    text-align: center;
}

#BannerZone .img-link {
    display: block;
    width: 100%;
    height: var(--RadarHeight);
    border-radius: 10px;
    background-color: var(--Index-icon-gotop-bgColor);
    color: var(--Index-icon-gotop-Color);
    /*margin-bottom: 15px;*/
    margin: 0.25rem;
    align-content:center;
}

#BannerZone .img-link img {
    width: 100%;
    height: auto;
    max-height: var(--RadarHeight);
    padding: 0.75rem;
}

.bannerborder {
    padding: 0;
    margin: 0;
}

.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 {
    background-image: url("../img/BusinessZone_bg.jpg");
    background-color: var(--GlobalStyle-bgColor);
    background-repeat: no-repeat;
    background-size: cover;
}    

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

#BusinessZone .BusinessItem {
    margin: 1rem;
    color: #ffffff;
    display: block;
    font-size: 1.5rem;
}
#BusinessZone .BusinessItem div {
    margin-top: 0.75rem;
    text-align: center;
}

#BusinessZone .BusinessItem img{
    width: 100%;
    height: auto;
    padding: 1.75rem;
    border-radius: 10px;
    background-color: var(--NavGlobalStyle-Color);
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#BusinessZone .BusinessItem.BusinessItemBg img{
	background-color: #898989;
}

#newsZone {
	max-width: calc(100% - var(--IndexSpaceWidth) );
}

#newsZone .newsZoneTitle{
	color: #000000;
    font-size: 1.25rem;
    padding: 0.5rem;
}

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

#newsZone .events-list-title{
    /*color: var(--NavGlobalStyle-bgColor);*/
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-self: center;
}

#newboard-zone button {
	padding: 0.5rem 0.5rem;
	color: var(--NavNewsStyle-Color);
	background-color: var(--NavNewsStyle-bgColor);
    border: 5px solid #ffffff;
}
#newboard-zone button.active {
	color: var(--NavGlobalStyle-Color);
	background-color: var(--NavGlobalStyle-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-activity > .events-news:last-child, #nav-board > .events-news:last-child, #nav-news > .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.25rem;
	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-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: var(--RadarHeight);
  border-radius: 5px;
    margin: 0.25rem;
}
#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);
}

#InfoZone {
    padding-bottom: 1.5rem;
    margin-top: -100px !important;
    position: relative;
    z-index: 20;

}

#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;
}


.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;
}

.InfoEqui {
    padding: 0px;
}
.slick-foundation img {
    height: auto;
    margin: auto;
    width: 100%;
    padding: 0px;
    border: 1px solid #cccccc;
}
.InfoEquiTitle {
    padding: 0px;
}
.InfoPicData {
    padding: 4px;
}
.InfoPicData .slick-slide{
    padding: 0.25rem 1rem;
}

.InfoPicData .slider .slick-dots button::before {
    color: #aaaaaa;
    opacity: 0.85;
}
.InfoPicData .slider .slick-dots .slick-active button {
    background-color: #457884;
}

.InfoPicData img{
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.InfoPicData .Picsubtitle{
    text-align: center;
    margin: 1rem;
}

.InfoEquiTitle div {
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0.5rem auto;
    margin-top: 1rem;
    text-align: center;
}