@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;900&display=swap');
* {-webkit-box-sizing: border-box;box-sizing: border-box;}

html {font-size: 16px;}
body {margin: 0 auto;padding: 0;font-size: 100%;font-weight: 400;font-family: 'Noto Sans TC', sans-serif;line-height: 1.8;    
    min-height: 100vh;display: flex;
    flex-direction: column;
/*background-color: #eaeaea;*/}
p {font-size: 1.125rem;color: #232323;}
@media (max-width:37.5rem) {p {font-size: 1.125rem;}}
@media (max-width:20rem) {p {font-size: .875rem;}}
a {color: #232323;text-decoration: none;}
a:hover {opacity: .9;-webkit-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}
img {max-width: 100%;height: auto;display: -webkit-box;display: -ms-flexbox;display: flex;}
.wrapper {margin: 0 auto;clear: both;background-color: #fff;flex: 1 0 auto;}


/***header***/
nav{ max-width: 1200px;margin: 0 auto;}
.head_group .logobox {padding: 10px 0px 0px;}
.float-r{font-size:1.125rem;display: inline-block;color:#004E98;font-weight: 600;float: right;padding-top: 8px;}
@media (max-width:50rem) {
    .head_group{padding: 0 20px;}
}
/*** slider ***/
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {width: 100%;position: relative;background: #fff;}
.slideshow-container img{width: 100%;}
.prev, .next {
  cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;
  color: white;font-weight: bold; font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;
}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(25,72,102,0.8);}
.text {color: #f2f2f2;font-size: 2rem;font-weight: bold;padding: 8px 12px;position: absolute;bottom: 20px;width: 100%;text-align: center;}
.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.dot-box {display:flex;justify-content: center;position: absolute;bottom: 8px;width: 100%;text-align: center;} 
.dot {
  cursor: pointer;height: 15px;width: 15px;margin: 0 5px;background-color: #fff;border-radius: 50%;
  display: flex;transition: background-color 0.6s ease;
}
.active, .dot:hover {background-color: #1D3F69;}
.fade {animation-name: fade;animation-duration: 1.5s;}
@keyframes fade {
      from {opacity: .8} 
      to {opacity: 1}
}

@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.wrap{background-color: #1D3F69;}
.conten{ flex: 1 0 auto;background-color: #1D3F69;}
.textWrap{max-width: 1000px; margin: 0 auto;}
h1{font-size: 3.75rem;color: #fff;padding: 40px 0;text-align: center;    letter-spacing: 0.2rem;}
.btn-box{text-align: center;}
.btn-box button{
    width: 250px;height: 80px;background-color: #eee;cursor: pointer;margin: 20px 20px 80px;
    border: none;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
    box-sizing: border-box;padding: 20px 0 28px;
}
.btn-box button{font-size: 1.85rem;text-align: center;padding: 10px;font-weight: 600;color: #1D3F69;}
.top-area{
    background-image: url(../img/heard-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 350px;
}
@media (max-width:37.5rem) {
h1{font-size: 2.75rem;}
.text {color: #f2f2f2;font-size: 1rem;}
.btn-box button{margin: 20px;}
.wrap {background-color: #1D3F69;height: 69vh;}
}

/***article***/
article{max-width: 600px;margin: 40px auto 0px; text-align: justify;}
.title{font-size: 60px;text-align: center;color: #fff;font-weight: bold;padding: 70px;letter-spacing: 0.25rem;}
h3{font-size: 20px;font-weight: 600; padding-top: 20px;color: #004E98;font-family: 'Noto Sans TC', sans-serif;}
@media (max-width:37.5rem) {
    .title {font-size: 30px;text-align: center;color: #fff;font-weight: bold;padding: 30px;}
    .top-area {height: 200px;}
}

/***Tabs***/
.tabs {display: flex;flex-wrap: wrap;position: relative;top: -130px;z-index: 99;}
.tabs label {
  order: 1;
  display: inline-block;
  cursor: pointer;
  background: #eaeaea;
  font-weight: 600;
  transition: background ease 0.2s;
  color: #1D3F69;
  font-size: 32px;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
  padding: 0.9rem 2rem;
}
.tabs img{width: 45px;vertical-align: text-top;display: inline-block;padding: 8px 6px;}
.tabs .tab {order: 99;flex-grow: 1;width: 100%;display: none;padding: 1rem;background: #fff;position: relative;z-index: 99;padding: 40px 0px;}
.tabs .tab p{font-family: 'Noto Sans TC', sans-serif;font-size: 1.125rem;padding: 20px;}
.tabs .tab li, .tabs .tab span{font-size: 1.125rem;font-family: 'Noto Sans TC', sans-serif;}
#tab-conten{padding:40px 20px;}
.tabs input[type=radio] {display: none;}
.tabs input[type=radio]:checked + label {
  background: #fff;
  z-index: 1;
    -webkit-box-shadow: 2px -8px 25px -2px rgba(0,0,0,0.3);
       -moz-box-shadow: 2px -8px 25px -2px rgba(0,0,0,0.3);
            box-shadow: 2px -8px 25px -2px rgba(0,0,0,0.3);
}
.tabs input[type=radio]:checked + label + .tab {display: block;}
/*@media (max-width: 45em) {
  .tabs .tab,.tabs label {order: initial;}
*/
.tabs label {width: 50%;margin-right: 0;margin-top: 0.2rem;}
.awards ul{padding:40px 20px;}
@media (max-width:37.5rem) {
.tabs img{width: 30px; padding: 0px 3px 0px 0px;}
.tabs label {font-size: 20px;padding: 0.5rem;}
}

/*** Table Styles **/
.table-fill {
    background: white;border-radius: 3px;border-collapse: collapse;
    height: 320px;margin: auto;max-width: 600px;padding: 5px;width: 100%;animation: float 5s infinite;
}
th {
    color: #d5dde5;background: #1b1e24;border-bottom: 4px solid #9ea7af;border-right: 1px solid #343a45;font-size: 23px;font-weight: 100;
    padding: 24px;text-align: left;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);vertical-align: middle;
}
th:first-child {border-top-left-radius: 3px;}
th:last-child {border-top-right-radius: 3px;border-right: none;}
tr {border-top: 1px solid #c1c3d1;border-bottom-: 1px solid #c1c3d1;color: #1D3F69;font-size: 18px;font-weight: 600;}
/*tr:hover td {background: #004E98;color: #ffffff;border-top: 1px solid #22262e;}*/
tr:first-child { border-top: none;}
tr:last-child {border-bottom: none;}
/*tr:nth-child(odd):hover td {background: #004E98;}*/
tr:last-child td:first-child {border-bottom-left-radius: 3px;}
tr:last-child td:last-child {border-bottom-right-radius: 3px;}
td {background: #ffffff;padding: 20px;text-align: left;vertical-align: middle;font-weight: 600;font-size: 18px;}
td:last-child {border-right: 0px;}
th.text-left {text-align: left;}
td.text-left {text-align: left;}


/***footer****/
.footer {font-size: .875rem;color: #232323;text-align: center;padding: 1em 0;background-color: #eaeaea;}
.footer2{font-size: .875rem;color: #eaeaea;text-align: center;padding: 1em 0;background-color: #1D3F69;}
.cd-top {
    color: #fff;
    font-size: 1.2rem;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 48px;
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    overflow: hidden;
    background: rgba(232, 232, 232, .9) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border-radius: 100%;
    z-index: 10;
}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {opacity: 1;}
.back2top {fill: #fff;width: 40px;height: 40px;}

@media only screen and (min-width:64rem) {
    .cd-top {right: 30px;bottom: 20px;}
}
@media only screen and (min-width:40rem) {
    .cd-top {right: 20px;bottom: 20px;}
}
@media (max-width:37.5rem) {
    .cd-top {width: 40px;height: 40px;line-height: 40px;}
}