@charset "utf-8";
/*Noto Sans TC*/
@import url(https://fonts.google.com/specimen/Noto+Sans+TC);
/*reset*/
html, body { height: 100%; }
body,input,select { font-family: 'Noto Sans TC', Helvetica, "微軟正黑體"; font-size: 1em; line-height:1.2; font-weight: 400; color:#000; background-color:#eaf3f7; margin:0; padding:0; }
input,select { font-size: 1em; }
a { text-decoration:none; }
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img { margin: 0; padding: 0;border: none; box-sizing: border-box; }
img { border: none; display:block; }
img.inline { display: inline-block; vertical-align: middle; }
ul, li { list-style: none; }
.clearfix {*zoom: 1; }
.clearfix::before, .clearfix::after { line-height: 0; display: table; content: ''; }
.clearfix::after { clear: both; }
.sr-only{display: none;}
/*in*/
.in{ width:1440px;margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.m_block{display: none;}
.m_hide{display: block;}

/*goMain*/
a.goMain{position: absolute; top:0; left: 0; color:#007d7d; font-size: 0.01em;}
a.goMain:focus{color:#fff;}
#AC{position: absolute; color:#fff; top:10px; left: 0;}
/*pageSize*/
#pageSize{ position: relative; height: 100%;}
/*nav*/
nav ul{ display: flex;align-items: center; flex-wrap: wrap; font-size: 1.125em;font-weight: bold; margin: 10px 0;}
nav ul li{margin: 5px 0;}
nav ul a{padding: 5px 15px; border-radius:99em;}
nav ul a:hover, nav ul a.on{ background:#fff; color:#056060;}
/*header*/
header{ background: #007d7d; }
header a{color:#fff;}
h1{ padding: 20px 0;margin: 0 0 ;}
h1 img{width:180px; height: 50px; display: block;}
/*footer*/
footer {width:100%;background: #007d7d;color: #fff; font-size: 0.875em;padding: 20px 0;}
footer .in .m_hide{}
footer .in img{width:140px; height: auto;} 

/*main*/
.main{ position: relative;width:1440px;  padding: 50px  0; margin: 0 auto;}
h2{ font-size: 1.875em; border-left: 12px solid #007d7d;  line-height: 3.75; padding: 0 0 0 15px; margin: 0 0 30px;}
h3{ font-size: 1.25em;  margin: 0 0 20px;}
.cont{ padding: 0 30px;}
.intro{padding: 50px; margin: 0 0 50px;  text-align: center; background: #fff;  border-top-left-radius: 120px;border-bottom-right-radius: 120px; box-shadow: 0px 0px 30px rgba(0,0,0,.1)}
.intro h2{ font-size: 3.125em; color:#364d68; border: none;  line-height:1.5; padding: 0 ; margin: 0;}
.intro p{color:#555555;line-height: 1.5;}
ul.siteBtn{ display: flex; justify-content: center; align-items: center;}
ul.siteBtn li{padding: 8px; margin: 0 15px;width:200px; height: 200px; display: block;border-radius:15px;background-image: linear-gradient(to right, #94c7e4 , #a0d5d5);}
ul.siteBtn li a{width:100%; height:100%;font-size: 1.5em; font-weight: 600; color: #555555; display: flex; justify-content: center; align-items: center; border-radius:10px; background: #fff; text-align: center;}

ul.siteBtn2{ display: flex; justify-content: space-between; align-items: center;}
ul.siteBtn2 li{margin: 0 20px 0 0;width:25%; display: block;}
ul.siteBtn2 li:last-child{margin: 0 0 0 0;width:25%; display: block;}
ul.siteBtn2 li a{width:100%; height:100%;font-size: 1.5em; font-weight: 600; color: #fff; display: flex; justify-content: center; align-items: center; border-radius:12px;background: #364d68; text-align: center; padding:25px 0;}

ul.dataSet{display: flex; justify-content:space-between; align-items: center;flex-wrap:wrap;margin: 0 0 30px;}
ul.dataSet li{width:calc((100% - 60px)/2); padding: 30px; border:8px solid #d6e0ea; background: #fff; text-align: center; margin: 0 0 20px;}
ul.dataSet p{margin: 0;}
ul.dataSet h3{font-size:1.5em; color:#056060; margin: 0;}
ul.dataSet a{color:#000; text-decoration: underline;}

.cont p{ margin: 0 0 20px;}
.cont ol{  margin: 0 0 30px 30px;}
.cont ol.big li{list-style: decimal; font-size: 1.5em; color:#364d68; font-weight: 500; margin: 5px 0;}
.cont ol li{list-style: decimal; font-size: 1em;  margin: 5px 0;}

.sysBox{position: relative; border:8px solid #d6e0ea; background: #fff; padding: 25px; margin: 0 0 40px; display: flex;  align-items: center;}
.sysBox p{ margin: 0;}
.sysBox  h4{font-size:1.25em; color:#056060;}
.sysBox  h4.tag01, .sysBox  h4.tag02, .sysBox  h4.tag03{font-size:1.5em; color:#405a78;display: flex;  align-items: center;}
.sysBox  h4.tag01{ height: 67px; padding: 0 0 0 40px; background: url("../images/ico01.png") no-repeat;background-size:35px auto;}
.sysBox  h4.tag02{ height: 45px; padding: 0 0 0 56px; margin: 0 0 5px; background: url("../images/ico02.png") no-repeat;background-size:51px auto;}
.sysBox  h4.tag03{ height: 42px; padding: 0 0 0 45px; margin: 0 0 5px; background: url("../images/ico03.png") no-repeat;background-size:40px auto;}
.Lbox{width:120px;}
.Mbox{padding: 0 0 0 20px;}

.Rbox a{ padding: 10px 20px; background: #405a78; color:#fff; border-radius:99em; margin: 0 20px 0 0;}
.sysBox.w01 .Mbox{width:calc(100% - 120px - 344px);}
.sysBox.w01 .Rbox{width:344px;}
.sysBox.w02 .Mbox{width:calc(100% - 120px - 368px);}
.sysBox.w02 .Rbox{width:368px;}
.sysBox.w03 .Mbox{width:calc(100% - 120px - 238px);}
.sysBox.w03 .Rbox{width:238px;}
.sysBox.w03 .Rbox a:last-child{margin: 0;}
.sysBox.w04 .Mbox{width:calc(100% - 120px - 114px);}
.sysBox.w04 .Rbox{width:114px;}
.sysBox.w04 .Rbox a{margin: 0;}
.Rbox {display: flex; justify-content: flex-end; align-items: center;}
.Rbox img{margin: 0 0 0 10px;}


.tbBox{ margin: 0 0 30px;}
.tbBox p, .tbBox caption{display:none; }
.tbBox table{ width:100%; border-top: 1px solid #c3d4db;border-left: 1px solid #c3d4db;border-right: 1px solid #c3d4db;}
.tbBox table th, .tbBox table td{text-align: left; padding: 15px 0;border-bottom: 1px solid #c3d4db;}
.tbBox table th.tC, .tbBox table td.tC{text-align: center;}
.tbBox table th{background: #405a78; color:#fff;}
.tbBox table td{background: #fff; }
@media screen and (max-width: 1480px){
    /*in*/
    .in{ width:100%; padding:0 20px;}
    /*main*/
    .main{ width:100%; }
    h2{ margin: 0 0 30px 30px;}
    ul.siteBtn li{width:180px; height: 180px;}

}

@media screen and (max-width: 900px){ 
    /*nav*/
    nav ul{ font-size: 1em;}
    nav ul a{padding: 5px 10px;}
    /*main*/
    ul.siteBtn li{margin: 0 5px ;}
    ul.siteBtn2 li{margin: 0 10px 0 0;}
    ul.dataSet li{width:calc((100% - 20px)/2); padding: 20px;}
    
    .sysBox{flex-wrap: wrap;}
    .Lbox{padding: 0 0 15px;}
    .Rbox a, .Rbox img{ margin: 0 10px;}
    .sysBox.w01 .Mbox, .sysBox.w02 .Mbox, .sysBox.w03 .Mbox, .sysBox.w04 .Mbox{width:calc(100% - 120px );padding: 0 0 15px 20px;}
    .sysBox.w01 .Rbox, .sysBox.w02 .Rbox, .sysBox.w03 .Rbox, .sysBox.w04 .Rbox{width:100%; justify-content: center; padding:15px 0 0; border-top:3px dotted #dddddd;}
    .sysBox.w03 .Rbox a:last-child{margin: 0 10px;}
    
    .tbBox{font-size: .875em;}
}
@media screen and (max-width: 767px){
   
    .m_block{display: block;}
    .m_hide{display: none;}
    /*in*/
    .in{ width:100%; padding:0 15px;}
    /*header*/
    header{padding: 15px 0;}
    h1{ padding:  0 0;margin: 0 0 ;}
    /*nav*/
    nav ul{ margin: 10px 0 0;}
    /*footer*/
    footer {padding: 15px 0;}
    footer .in{ display: block; text-align: center;}
    footer .in img{padding:10px 0  0; margin: 0 auto;} 

   /*main*/
    .main{  padding: 20px  0; }
    h2{ margin: 0 0 30px 15px;}
    .cont{ padding: 0 15px;}
    .intro{padding: 30px 25px; margin: 0 0 20px;  text-align: center; background: #fff;  border-top-left-radius: 90px;border-bottom-right-radius: 90px;}
    .intro h2{ font-size: 1.875em;  line-height:1.2; margin: 0 0 7px;}
    ul.siteBtn{ flex-wrap: wrap;  }
    ul.siteBtn li{margin: 10px ;}
    ul.siteBtn2{flex-wrap: wrap;}
    ul.siteBtn2 li, ul.siteBtn2 li:last-child{ width:calc((100% - 15px)/2);margin: 10px  0;}
    ul.siteBtn2 li a{font-size: 1.25em; }
    ul.dataSet {display: block; margin: 0 0 10px;}
    ul.dataSet li{width:100%; padding: 20px; margin: 0 0 10px;}
    
    .Lbox{width:100%;display: flex; justify-content: center;  padding: 0 0 10px; text-align: center;}
    .Rbox a, .sysBox.w03 .Rbox a:last-child{width: 100%;text-align: center;margin:0 0 10px;}
    .Rbox img{  margin:0 0 10px;}
    .sysBox.w01 .Mbox, .sysBox.w02 .Mbox, .sysBox.w03 .Mbox, .sysBox.w04 .Mbox{width:100% ;padding: 0 0 15px ;}
    .sysBox.w01 .Rbox, .sysBox.w02 .Rbox, .sysBox.w03 .Rbox, .sysBox.w04 .Rbox{flex-wrap: wrap;}
    
   
    .tbBox table th{ display: none;}
    .tbBox table td{width:100%; display: block; font-size: 1em; padding: 5px 10px;border-bottom:none; }
    .tbBox table td:first-child{ padding-top: 15px;}
     .tbBox table td:last-child{ padding-bottom: 15px; border-bottom: 2px dotted #c3d4db;}
    .tbBox table td.tC{ text-align: left;}
    .tbBox table td::before{content: attr(data-title); display: block;font-size: 1.125em; font-weight: bold;  }
}