@charset "UTF-8";
section:after,
section:before {
    content: "";
    display: table
}

section:after {
    clear: both
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
	font-size:14px
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: 700
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Noto Sans TC', 'Noto Sans', PingFangTC, 'Microsoft Jhenghei', Helvetica, Arial, Verdana, sans-serif
}

ol,
ul {
    padding: 0;
    margin: 0;
    list-style: none
}

a {
    text-decoration: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

p {
	font-size: 1.2em
}

td,
th {
    padding: 0
}

button,
input[type=button],
input[type=submit] {
    #padding: 0;
    #margin: 0;
    #border: none;
    #text-align: center;
    #background: 0 0;
    #cursor: pointer;
    #outline: 0;
    #border-radius: 0;
    -webkit-appearance: none
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text] {
    outline: 0;
    border: 1px solid #dbdadd;
    border-radius: 3px;
    -webkit-appearance: none
}

input[type=email]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder {
    color: #b1b0b9
}

input[type=email]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=search]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=text]:-moz-placeholder {
    color: #b1b0b9
}

input[type=email]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=text]::-moz-placeholder {
    color: #b1b0b9
}

input[type=email]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=search]::-ms-input-placeholder,
input[type=tel]::-ms-input-placeholder,
input[type=text]::-ms-input-placeholder {
    color: #b1b0b9
}

input[type=radio] {
    margin-right: .25em
}

select {
    position: relative;
    padding: 0;
    padding-right: 1em;
    margin: 0;
    border: 1px solid #dbdadd;
    background: #fff;
    cursor: pointer;
    outline: 0;
    border-radius: 3px
}

header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    padding: 0 1em;
    border-bottom: 4px solid #ffa22e;
    height: 60px;
    background-color: #017dad;
    background-image: linear-gradient( to right, #017dad 55%, #002a3a 100%);
    clear: both;
    box-shadow: 0px 10px 20px rgba(20%,20%,40%,0.5);
}

.cesium-viewer{
	margin-top:60px;
	height: 88%
}

.logo {
    float: left;
    width: 80px;
    margin-top: 8px
}

.logo img {
    width: 100%
}
.res-body {
        background-color:#eaf5fd;
        padding-top: 120px;
}


.nav-button {
    float: right;
    padding: 20px 10px;
    height: 80px;
    cursor: pointer
}

.lang-button {
    padding: 13px 15px;
}

.lang-button  a{
    color : #fff;
	font-size: 18px;
}

.nav-button.active span {
    display: none
}

.nav-button.active span:first-child {
    position: relative;
    top: 7px;
    display: block;
    transform: rotate(45deg)
}

.nav-button.active span:last-child {
    display: block;
    transform: rotate(-45deg)
}

.nav-button span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff
}

.nav-button span:first-child {
    margin-bottom: 5px
}

.nav-button span:last-child {
    margin-top: 5px
}

nav a:hover{
    text-decoration : none;
}

.nav {
    display: none;
    position: fixed;
    overflow-y: auto;
    width: 100%;
    max-height: 80%;
    border-bottom: 1px solid #09235e;
    top: 60px;
    left: 0;
    z-index: 2;
    background-color: #017dad;
}

.nav.active {
    display: block
}

.nav ul {
    padding: 20px 0 0
}

.nav li {
    position: relative;
    padding: 0;
    cursor: pointer;
	font-size: 1.2em;
}
.nav li.active span{
color: #ffa22e;
}
.nav li.active span:before {
    right: -25px;
    top: .9em;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.nav li.active span:after {
    right: -25px;
    top: .8em;
    border-top: 6px solid #017dad;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent
}

.nav span {
    position: relative;
    display: inline-block;
    padding: 5px 0 5px 10%;
    min-width: 5em;
    font-size: 1.5em;
    color: #fff
}

.nav span:before {
    content: '';
    position: absolute;
    right: -20px;
    top: .7em;
    border-left: 6px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}

.nav span:after {
    content: '';
    position: absolute;
    right: -18px;
    top: .7em;
    border-left: 6px solid #017dad;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: .35s transform
}


.nav-links {
    display: none;
    padding: 5px 10% 0 20%;
    background-color: #009ad6;
}

li.active .nav-links {
    display: block
}

.nav-links a {
    display: block;
    white-space: nowrap;
    padding: 5px 0;
    font-size: 1.15em;
    color: #fff
}

.nav-links a:hover {
    opacity: .75;
}

.nav-links a.sublink {
    padding-left: 1em
}

.nav-top {
    display: none
}
.nav-top a:hover {
    opacity: .75;
}

.nav-top a {
    display: inline-block;
    padding: 0 15px;
    font-size: 1.15em;
    color: #fff
}

footer {
    background-color: #b1daf8
}

.nav-footer {
    max-width: 350px;
    padding: 40px 0 20px;
    margin: 0 auto;
    text-align: center
}

.nav-footer-container {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    text-align: left
}

.nav-footer-links {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 1.5em;
    text-align: left
}

.nav-footer-links h3 {
    margin: 0;
    font-size: 1.15em
}

.nav-footer-links a {
    color: #000;
    font-size: .9em
}

.nav-footer-links a.sublink {
    padding-left: 1em
}

.copyright {
    margin: 0;
    width: 100%;
    padding: 40px 0;
    background-color: #024e6b
}

.copyright p {
    text-align: center;
    margin: 0;
    font-size: .75em;
    color: #fff
}

.banner {
    position: relative;
    margin-top: 60px
}

.banner img {
    width: 116%;
    display: block
}

.banner-e {
    position: relative;
    margin-top: 30px
}

.banner-e img {
    width: 116%;
    display: block
}

.banner-images {
    margin-bottom: 0
}

.slick-dots {
    z-index: 2;
    bottom: .5em
}

.slick-dots li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: #36a5f2;
    cursor: pointer
}

.slick-dots li:hover {
    background-color: #fff
}

.slick-dots li.slick-active {
    border: 2px solid transparent;
    background-color: #36a5f2
}

.slick-dots li button:before {
    content: ''
}

.heading {
    display:none;
    position: relative;
    height:60px;
    #top: -60px;
    margin-bottom: -60px;   
    text-align: center;
    opacity:1;
    color:#fff;
}

section {
    background-color: #1b9cce;
    #background-image: linear-gradient( to right, #1b9cce 45%, #15779e 70%);
}

section:nth-child(even) .desc {
    float: left
}

section:nth-child(even) .image {
    float: right
}

section .desc {
    float: left;
    width: 100%;
    padding: 2em 3em
}

section .desc h2 {
    margin: 0 0 .15em;
    font-size: 2em;
    color: #fff
}

section .desc p {
    margin: 0;
    margin-bottom: 1em;
    font-size: 1em;
    line-height: 1.75;
    color: #fff
}

section .desc .button {
    display: inline-block;
    padding: 10px 20px;
    margin-right: .75em;
    border: 1px solid #09235e;
    font-size: 1.15em;
    line-height: 1;
    color: #fff;
    background-color: #f37d18;
    transition: background-color .5s;
    border-radius: 10px;
}

section .desc .button:hover {
    background-color: #2d81ff
}

section .image {
    float: left;
    width: 100%;
    overflow: hidden
}

section .image img {
    display: block;
    width: 100%;
    transition: transform .35s;
    overflow: hidden;
    width: 125%;
    margin-top: -7%;
    margin-left: -6.2%;
    margin-bottom: -7%;
}

section .image img:hover {
   # transform: scale(1.05)
}

.page {
    padding-top: 80px;
    background-color: #eaf5fd
}

article {
    width: 100%;
    max-width: 1440px;
    padding: 25px 10%;
    margin: 0 auto
}

article h1 {
    font-size: 1.5em
}

article h2 {
    font-size: 1.15em
}

article h3 {
    font-size: 1em
}

article p {
    padding-bottom: .5em;
    font-size: 1em;
    line-height: 1.85;
    color: #686766
}

article img {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto
}

article iframe {
    width: 100%
}

.carousel-indicators {
    justify-content:left;
    z-index:1; 
}
.breadcrumb {
    display: none;
    background-color: #eaf5fd;
}

.breadcrumb a {
    padding: 0 .5em;
    font-size: 1.15em;
    color: #58595a
}

.breadcrumb a:first-child {
    padding-left: 0
}

.breadcrumb a.current {
    font-size: 1.35em;
    color: #000
}

.message-bar{
    background-color:#000;
    color:#fff;
	padding: .5em 0em;
	font-size: .8em;
}

.message-bar img{
    display:none;
}

.indexbody{
    background-color: #1b9cce;
}

.map{
    padding: 0px;
}


.indexbody .mapframe  img{
    width: 100%;
}

.abstract{
    width: 100%;
    background-color : #eaf5fd;
    text-align : center;
    padding : 2em;
    position: relative;
    border: 2px solid #1b9cce;
    box-shadow: 0px 0px 10px rgba(20%,20%,40%,0.1) inset;
    
}

.abstract:hover {
    background-color : #ffffcc;
}

.abstract-mark {
    height: 100px;
	width:  100px;
}

.app-block{
  background-repeat: no-repeat;
  background-position: center;
  opacity:.85;
  min-height:400px;
  
}
.app-block:hover{
  opacity:1;
  cursor: pointer;
}

.app-block:hover .app-title{
  opacity:.9;
}
	
.app-title{
  background-color: #eaf5fd;
  margin: -2em  -2em;
  opacity: .8;
}
	
.orbit-sat-div img {
  margin-top:-100px;
}     

.orbit-sat-div {
  z-index:10;          
  height: 570px;          
  max-width: 100%;
  overflow: hidden;
  
}

img.orbit-bg {
	max-width: 100%; 
	height: 570px; 
	position: absolute; 
	z-index:-1;
} 

.fadeOut{
	opacity: 0;
}

.fadeIn{
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
 -o-transition: opacity 1s ease-in;
	transition: opacity 1s ease-in;
}

.include-link p{
	display:inline;
}

.include-link a {
	font-size: 1.15em;
	color: #fff;
}

.service{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .2;
    width: 100%;
    height: 100%;
    background-image: url("../images/server.jpg");
}
.mapframe{
    padding: 0em;
    overflow:hidden;
    cursor: url(/v2/images/NSPOF7_6.cur) -64 0 ,auto; 
}

#atm_timestamp {
    overflow: overlay;
    margin-top: -1.5em;
    margin-bottom: 0;
    padding: 0px 5px;
    color:red;
}

#ion_timestamp {
    overflow: overlay;
    margin-top: -1.5em;
    margin-bottom: 0;
    padding: 0px 5px;
    color:red;
}

.desc {
    float: left;
    width: 100%;
    padding: 2em 3em
}

.desc h2 {
    margin: 0 0 .15em;
    font-size: 2em;
    color: #fff
}

.desc p {
    margin: 0;
    margin-bottom: 1em;
    font-size: 1em;
    line-height: 1.75;
    color: #fff
}
.indent{
        text-indent: 2em;
}
.button {
    display: inline-block;
    padding: 10px 10px;
    margin-right: .75em;
    border: 1px solid #09235e;
    font-size: 1.15em;
    line-height: 1;
    color: #fff;
    background-color: #f37d18;
    transition: background-color .5s;
    border-radius: 10px;
}

.button:hover {
    background-color: #2d81ff;
    text-decoration : none;
}

.level-title{
    background-color: #215b97;
    text-align: center;
    padding: 5px;
    margin-bottom: 0px;
    color:#ffffff;
}

.main-level{
    #margin-left:10%;
    cursor:pointer;
    background-color: #2ea0cc;
    color:#ffffff;
    padding: 0px 0px;
    height:auto;
}

.main-level p{
   margin-left:10%;
   margin-bottom: 0px;
}

.main-level ul{
    border-bottom: 2px solid #daecff;
}



.sub-level1{
    background-color: #daecff;
}

.sub-level1 li a{
    margin-left:20%;
    color: #000000;
}

.data-kind-hr{
    border-top: 1px solid #b5b5b5;
    margin-left:20%;
    color : #b5b5b5;
}


#format_des {
    font-size:.8rem;    
}

#format_name{
    color:red;
    font-size:.7rem; 
    word-break:break-all;    
    margin: 0px;
}

.format-ncdata-title {
    cursor:pointer;
    color:blue
}
.data-description li{
    font-size: .8em;
}

.data-description hr{
    margin: 0px;
}

.fadeOut{
opacity: 0;
}

.fadeIn{
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-ms-transition: opacity 2s linear;
 -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
}

@-webkit-keyframes rightan{
  from{
      padding: 0px;
      opacity: 0;
  }
  to{
      padding: 20px;
      opacity: 1;
  }
}

.page  img{
    width:100%;
	padding: 1em 0em;
}

.scroll-anim{
     position: fixed;
     display:none
}


.falcon{
    bottom: -100%;
    left: 3%;
    display:block
}
.fs3{
    top: -100%;
}
.fs7{
    bottom: -100%;
}
.earth{
    bottom: -100%;
}

.fs3-mark {
	display:inline;
}

.fs3-mark img{
         height: 40px;
         width: 30px;
         margin: 0px 25px;
		 padding: 0em 0em;
      }
	  
.fs7-mark {
	display:inline;
}	  
	  
.fs7-mark img{
	 height: 40px;
	 width: 80px;
	 padding: 0em 0em;
}



#orbit_title h3 {
	display: inline-block;
	color:#fff;
	font-size:1.5em;
}
.count-text {
	display: inline-block;
	font-size:1em;
	width:8em;

}

.count-text-e {
	display: inline-block;
	font-size:1em;
	width:10em;

}

.count-num{
	font-size:1em;
	display: inline-block;
	text-align:right;
	width:5em;
}

.leaflet-popup-content h2{
    font-size:1rem;
}

#leafletmap img{
padding: 0em 0em;
}





@media (min-width:600px) {
	body {
		font-size: 14px;
	}
}


@media (min-width:900px) {
	body {
		font-size: 16px;
	}
    header {
        height: 100px;
        padding: 0 10px
    }
	.logo {
		width: auto;
        max-width: 100px;
        margin-top: 30px;
        margin-right: 0px;
        margin-left: 10px;
    } 	
	.nav span{
		font-size: 1.2em;
	}

	.nav-button {
        display: none
    }
	.nav {
        position: static;
        overflow-y: visible;
        display: block;
        width: auto;
        border: none;
        max-height: auto;
        background-color: transparent
    }
	.nav ul {
        min-width: 800px;
        padding: 0
    }
	.nav li.active span{
        color:#fff;
    }
    .nav li.active span:before {
        top: 25px;
        right: -.75em;
        margin: 0 5px;
        border-top: 4px solid #fff;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent
    }
	.nav li {
        display: inline-block;
        padding: 35px 2% 0px;
		font-size: 1em;
    }
    .nav li:hover .nav-links {
        display: block;
        border-bottom: 4px solid #ffa22e;
    }

    .nav li:hover span:after {
        transform: translate(0);
        right: auto;
        left: 0;
        top: 85%;
        border: none;
        width: 100%;
        height: 3px;
        background-color: #ffff1a
    }
	.nav span {
        display: block;
        min-width: auto;
        padding: 15px 0;
        color: #fff;
        overflow: hidden
    }
	.nav span:before {
        display: none
    }
	.nav span:after {
        right: auto;
        left: 0;
        top: 85%;
        border: none;
        width: 100%;
        height: 3px;
        background-color: #017dad;
        transform: translateX(110%)
    }
	.nav-links {
        position: absolute;
        left: 10px;
        top: 90px;
        padding: 10px 30px 20px;
        background-color: #017dad;
        box-shadow: 0px 20px 50px -10px rgba(20%,20%,40%,0.5);
    }
    li.active .nav-links {
        display: none
    }
	.nav-top {
        display: block;
        position: absolute;
        right: 35px;
        top: 20px;
		z-index:99;
    } 
	.nav-top a{
		font-size: 1em;
	}
	.nav-footer {
        max-width: 1500px;
    
    }
	.nav-footer-container {
        width: auto
    }
	.nav-footer-links {
        padding: 0 40px 1em
    }
	.nav-footer-links h3 {
        font-size: 1.25em
    }
	.nav-footer-links a {
        font-size: 1em
    }
	.copyright p {
        font-size: .8em
    }
	.banner {
        margin-top: 100px
    }
	.slick-dots {
        bottom: 1em
    }

	section {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center
    }
	section:nth-child(even) {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
	section .desc {
        width: 37.5%;
        padding: 3em
    }
	section .desc h2 {
        font-size: 2.5em
    }
	section .desc p {
        font-size: 1.15em
    }
	section .desc .button {
       # font-size: 1.5em
    }
	section .image {
        width: 62.5%
    }
	.page {
        padding-top: 110px
    }
	article {
        padding: 65px 50px
    }
	article h1 {
        font-size: 3em
    }
	article h2 {
        font-size: 2em
    }
	article h3 {
        font-size: 1.75em
    }
	article p {
        font-size: 1.15em;
        padding-bottom: 1em
    }
	.breadcrumb {
        display: block
    }
	.message-bar{
		font-size: 1em;
	}
	.message-bar  img{
        display: block;
		height: 30px;
		padding: 0em 1em;
    }
	.abstract{
        padding : 3em 5em;
        min-height:500px;
		font-size: 14px;
    }
    .app-title{
          margin: -3em  -5em;
    }
	.rightan{
      -webkit-animation: rightan 1.5s infinite;
      -webkit-animation-fill-mode: both;
    }
	.cesium-viewer{
        margin-top:100px;
        height: 85%
	}
}

@media (min-width:1000px) {

	.logo {
        max-width: 150px;
        margin-top: 20px;
        margin-left: 15px;
    } 

	.message-bar{
		font-size: 1.2em;
	}
    .desc {
        width: 37.5%;
        padding: 1.5em 3em 2em
    } 
	.desc h2 {
        font-size: 2.5em
    }  
	.desc p {
        font-size: 1.15em
    }
	
}

@media (min-width:1300px) {
	header {
		height: 110px;
		padding: 0 50px
	}
	.button {
		padding: 10px 20px;
	}
	.nav-links {
        position: absolute;
        left: 10px;
        top: 100px;
        padding: 10px 30px 20px;
        background-color: #017dad;
        box-shadow: 0px 20px 50px -10px rgba(20%,20%,40%,0.5);
    }
	
	.nav span{
		font-size: 1.5em;
	}
	.nav-top a{
		font-size: 1.3em;
	}
	.banner {
        margin-top: 110px
    }
	.banner-e {
		margin-top: 60px
	}
	.heading {
       display:block;
    }
	.message-bar{
		font-size: 1.4em;
		padding: .5em 4em; 
		height: 110px;
	}
	.message-bar  img{
		height: 55px;
		padding: 0em 1em;
    }
    #format_des {
        font-size: 1rem;
    }
    #format_name{
        font-size: 1rem;
    }
    .scroll-anim{
        display:block
    }
	.abstract{
        padding : 3em 5em;
        min-height:500px;
		font-size: 16px;
    }
	.app-title{
          margin: -3em  -5em;
    }
	.cesium-viewer{
        margin-top:110px;
        height: 85%
	}
}


@media (min-width:1300px) and (max-width:1500px){
	#index-status-title{
	  display:none;
	}
}