/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
    html {
        font-size: 16px !important;
    }
    .container-flui {
        width: 98%;
        max-width: 748px;
    }
}
@media (min-width: 1024px) {
    html {
        font-size: 32px !important;
    }

    .container-flui {
        width: 98%;
        max-width: 1004px;
    }
}
@media (min-width: 2159px) {
    html {
        font-size: 100px !important;
    }
    .container-flui {
         width: 98%;
        max-width: 2149px;
    }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
body {
    /*margin-bottom: 60px;*/    
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
/*----------------------------------*\ 
   # common 2021-0503               
\*----------------------------------*/
* {margin: 0;padding: 0;border: 0;list-style:none;box-sizing: border-box;}
body {
	background:whitesmoke;	
	font-family: Microsoft JhengHei;
}
.clearfix:before,
.clearfix:after {content:" ";display: table;}
.clearfix:after{clear: both;}
.clearfix {*zoom:1;}
/*----------------------------------*\ 
   # container-full 2021-0503               
\*----------------------------------*/
.container-full {
	background: white;    
	height: 100vh;
	border: 0px solid #385a8b;    
	width: 100%;    
}
/*----------------------------------*\ 
   # theTop 2021-0503               
\*----------------------------------*/
.theTop {
  width: 100%;
  height:12.4vh; 
  line-height: 12.4vh;
  font-size: 3.13vw; /**/
}
.cell-logo { 
  float: left;
  width: 35%;
  height: 100%; 
  display: inline-block;  
}
.logoWrap {
	display: flex;  
	align-items: center;
	height: 100%;
	padding-left: 5%;
}
.cell-logo img { height: 90% ; }

.cell-date { 
  float: left;
  width: 30%;
  height: 100%; 
  display: inline-block;
  display: flex;  
  align-items: center;
}
.cell-date p {
  font-size: 100%; 
  letter-spacing:2px;
  font-weight: bold;  
}

.cell-weather1 { 
  float: left;
  width: 17%;
  height: 100%;
  display: inline-block;
}
.cell-weather2 { 
  float: left;
  width: 18%;
  height: 100%;
  display: inline-block;
}
.cell-weather1 .box1 { 
  float: left;
  width: 35%;
  height: 100%;
  padding:  0;   
}
.cell-weather1 .box1 img {
	height: 80%;
	transform: translateY(10%);	
} 
.cell-weather1 .box2{ 
  float: left;
  width: 65;
  height: 100%; 
  font-size: 3.5vw; font-size: 112%;
  font-weight: bold;
}
.cell-weather1 .box2 p { position: relative; }
.cell-weather1 .box2 span { /*度C*/
	position: absolute;
	font-size: 40%;
	transform: translateY(-20%);
}
.cell-weather2 .box1{ 
  float: left;
  width: 35%;
  height: 100%;     
}
.cell-weather2 .box2{ 
  float: left;
  width: 65%;
  height: 100%; 
  font-size: 3.5vw; font-size: 112%;
  font-weight: bold;    
}
.cell-weather2 .box1 img {
	height: 80%;
	transform: translateY(10%);
} 

/*----------------------------------*\ 
   # theBody 2021-0503               
\*----------------------------------*/
.theBody {
	width: 100%;
	font-size: 5vh; /**/
	height:67.6vh; 
}
.theBody .box-1 {
	float: left;
	width:57%;
	height: 100%;
	border: 5px solid #2a426e;
	box-shadow: inset 0 0 10px #43649a;
	box-shadow: inset -3px -1px 0px 3px #456ED6,-5px 0px 0px -4px #43649a;
}
.theBody .box-1 video {
	width: 100%;
	height: 100%;
}
.theBody .box-2 {
	float: left;
	width:43%;
	height: 100%;
}
.theBody .title {  
	width:calc(100% - 10px); width:calc(100% - 5px);
	height: 14%; 
	color: white ;	
	text-align: center;
	text-shadow: rgb(200, 200, 200) .1vw .1vw .1vw;
}
.theBody .title .box1 { 
	position: relative;
	float: left;
	width: 17%;	
	height: 100%;
	border-radius:13px 0 0 13px;
	background: linear-gradient(to top, #235296, #14508c, #0073c7);
	border: .5vh solid #0063b5;	
}
.theBody .title .box2 {
	position: relative;
	height: 100%;
	float: left;	
	width: calc(((100% - 17%)/2) - 2vw);
	border-left: 2px solid #4093c9;	
	border-radius:0 13px 13px 0;
	background: linear-gradient(to top, #235296, #14508c, #0073c7);
	border: .5vh solid #0063b5;
}
.theBody .title .box2:nth-child(2){
	border-radius:0;
	border-right:0; 
	border-left-width: 0; 
	width: calc(((100% - 17%)/2) + 2vw);
}
.theBody .title span {/*英小字*/
	color: white; 
	font-size: 45%;	
	text-shadow: rgb(200, 200, 200) 0px 1px 0px;
	font-weight: 200;
	font-family: 'Poppins', sans-serif; /*google字型*/
}
.theBody .title .box1 span {	
	position: absolute;
	top:65%;
	left:20%;	
}
.theBody .title .box2 span {	
	position: absolute;
	top:65%;
	left:43%;
}
.theBody .itemWrap {
	width:calc(100% - 10px); width:calc(100% - 5px);
	height: 86%; 
}
.theBody .itemWrap li {
	border: 3px solid #ccc;
	width: 100%;
	height: calc(58vh / 5);
	background: white;	
	border-radius:13px; 	
}
.theBody .itemWrap li .box1 {
	height: 100%;
	float: left;
	width: 17%;
	background: #fff;
	background: linear-gradient(to top, #dddddd, #eef2f1, #ffffff);
	border-radius:13px 0 0 13px; 
	padding:.4vh;
}
.theBody .itemWrap li .box1 .num {
	width: 100%;
	height: 100%;
	background: #a8444c;
	color: #fff;
	text-align: center;
	line-height: 100%;
	border-radius:12px; 
	font-size: 160%;/**/
	font-family: 'Public Sans', sans-serif; /*google字型*/
	display: flex;	
	align-items: center;
	justify-content: center;	
}
.theBody .itemWrap li:nth-child(2) .box1 .num {background: #ea9d4f}
.theBody .itemWrap li:nth-child(3) .box1 .num {background: #314f98}
.theBody .itemWrap li:nth-child(4) .box1 .num {background: #7463a7}
.theBody .itemWrap li:nth-child(5) .box1 .num {background: #33a6b9}
.theBody .itemWrap li .box2 {/*項目黑字*/
	height: 100%;
	float: left;	
	width: calc(((100% - 17%)/2) + 2vw);	
	background: linear-gradient(to top, #dddddd, #eef2f1, #ffffff);
	display: flex;	
	align-items: center;
	justify-content: center;
	color: black;
	font-weight: bold; 
	font-size: 90%; /**/
	text-shadow: rgb(200, 200, 200) .1vw .1vw .1vw;
}
.theBody .itemWrap li .box3 {
	padding:0 1vw;
	float: left;	
	width: calc(((100% - 17%)/2) - 2vw);
	height: 100%;
	background: linear-gradient(to top, #ededed, #ffffff, #ffffff);
	border-left:3px solid #ccc;
	border-radius:0 13px 13px 0; 	
	color: #005390;
	font-family: 'Public Sans', sans-serif; /*google字型*/
	font-size: 170%; /**/
	text-align: right;
	height: calc((57vh / 5) - .5vh);
	line-height: calc((57vh / 5) - .5vh);
}
/*----------------------------------*\ 
   # theFooter 2021-0503               
\*----------------------------------*/
.theFooter {
	width: 100% ; 
	background: white;
	width:100%;
	font-size: 20vh; 
	line-height: 100%; 	
	height: 20vh; 
	white-space:nowrap; 
	border: 0.2vw solid #ccc; 
}
.theFooter .wrap { 
	width: 100%;
	height: calc(100% - 1.5vh); 
	margin:0 0 1.5vh;  
	background: linear-gradient(to top, #d4dfdf, #f4f4f4, #ffffff);  
}
.theFooter .box1 { 
	float: left;
	width: 57%;
	height: 100%;
	padding:0 2%;
	display: flex;  
	align-items: center;
}
.theFooter .box2 {
	float: left;
	width: 43%;
	height: 100%; 
}
.theFooter .box1 p,
.theFooter .box2 p { 
	position: relative; 
	color: #002447; /*請~深藍*/
	font-size: 40%;/**/  
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
	transform: scale(1, 1.4);
	margin-bottom:4vh;	
	text-shadow: rgb(200, 200, 200) .3vw .3vw .3vw;	
}

.theFooter .box1 .span1 ,
.theFooter .box2 .span1,
.theFooter .box1 .span2,
.theFooter .box2 .span2   {
	color: #00528e;	/*大數字藍*/
	font-size: 85%;	  	
	font-weight: bold;	
	vertical-align:top;
	text-align: center;	
	font-family: 'Public Sans', sans-serif;	/*google字型*/
}
.theFooter .box1 .span1,
.theFooter .box2 .span1 {/*大數字1*/
	width: 42%;
	display: inline-block; 
}
.theFooter .box1 .span2,
.theFooter .box2 .span2 {/*大數字2*/
	width: 20%;
	display: inline-block;
}
.theFooter .box2 p {
	font-size: 35%;		
}
.theFooter .box2 .span1,
.theFooter .box2 .span2 {/*右大數字*/
	font-size: 55%;
}
.theFooter .box2 .inner {
	display: flex;  
	align-items: center; 
	padding:0 5% ;
	width: 99%;
	height: 88%; 
	margin:2% 0 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#e1dddc), to(#ffffff));
	border-radius: 20px; 
	-webkit-box-shadow: inset 0 0 1vh #888;
	-moz-box-shadow: inset 0 0 1vh #888;
	box-shadow: inset 0 0 1vh #888;
}
span.entx,
span.entx2,
span.entx3 { 	
	position: absolute;
	top:27%;
	left:-10%;	 
	font-size:40%;
	color: #0a2c56;/*英文小字*/
	font-weight: bold;	
	vertical-align: bottom;
	font-family: 'Poppins', sans-serif; /*google字型*/
	transform: scale(1, .8);
	text-shadow: rgb(223, 237, 242) 1px 2px 0px;
	text-shadow:4px -1px 2px #fff,0 0 0 #000,4px -1px 2px #fff;
	text-shadow:3px 1px 1px #fff,0 0 0 #000,3px 1px 1px #fff;
}
span.entx2{	
	top:27%;	 
	left:45%;	 
}
span.entx3{	
	top:27%;	 
	left:10%;	 
}
     
@media (max-width: 769px){
	.container-full {	   
		height: 100vh; 
		overflow: hidden;		
	}	
	.theTop { 
	  height:16vh; 
	  line-height: 8vh;	  
	}
	.cell-logo {   
	  width: 50%; 
	  height:8vh; 
	}
	.cell-date {  
	  width: 50%;
	  height:8vh; 	   
	}
	.cell-date p {
	  font-size: 160%;   
	}
	.cell-weather1 {  
	  width: 50%; 
	  padding: 0 10%;
	  height:8vh;  
	}
	.cell-weather2 {  
		padding: 0 10%;
		width: 50%;
		height:8vh;   
	}
	.cell-weather1 .box2,
	.cell-weather2 .box2 {  
	  font-size: 176%;
	}

	/*------------theBody*/
	.theBody {	 
		height:66vh; 
	}
	.theBody .box-1 {
		display: none;			
	}
	.theBody .box-2 {	
		width:100%;
		height: 66vh;	
	}
	.theBody .title {  
		width: 100%;	
	}	
	.theBody .title .box1 span {
		left:10%;	
	}
	.theBody .itemWrap {
		width: 100%;	
	}
	/*------------theFooter*/
	.theFooter {	
		height: 18vh; 
		line-height: 18vh;
		overflow: hidden;    
	}
	.theFooter .wrap { 	
		height: calc(100% - 1.5vh); height: calc(100% - .5vh);
	  	margin:0 0 1.5vh;  margin: 0vh 0 .5vh;	
	}	
	.theFooter .box1 {	
		width: 100%;
		height: 18vh;
		padding:0 0 0 3%;	
	}
	.theFooter .box2 {	
		display: none;		
	}	
	.theFooter .box1 .span1,
	.theFooter .box2 .span1,
	.theFooter .box1 .span2,
	.theFooter .box2 .span2 {	
		font-size: 53%;	/**/
		transform: scale(1, 1.2);
	}
	.theFooter .box1 p,
	.theFooter .box2 p {		
		font-size: 25%;	
		margin-bottom:0vh;	
	}
	span.entx,
	span.entx2,
	span.entx3 {
		top:20%;
		left:-14%; 
	}
	span.entx2{			 
		left:40%;	 
	}
	span.entx3{
		left:7%;	 
	}
}